mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-17 00:12:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

code refactor

Browse Source
This commit is contained in:
MaysWind
2025-08-30 00:38:45 +08:00
parent 32cf41a7a0
commit 4d0e376568
16 changed files with 126 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/AccountBalanceTrendsBarChart.vue
+4 -4
View File
@@ -37,7 +37,7 @@
<template #inner>
<div class="display-flex padding-top-half">
<div class="statistics-percent-line width-100 no-margin-horizontal">
<f7-progressbar :progress="item.percent >= 0 ? item.percent : 0" :style="{ '--f7-progressbar-progress-color': (item.color ? '#' + item.color : '') } "></f7-progressbar>
<f7-progressbar :progress="item.percent >= 0 ? item.percent : 0" :style="{ '--f7-progressbar-progress-color': item.color } "></f7-progressbar>
</div>
</div>
</template>
@@ -56,13 +56,13 @@ import {
useAccountBalanceTrendsChartBase
} from '@/components/base/AccountBalanceTrendsChartBase.ts'
import type { ColorValue } from '@/core/color.ts';
import type { ColorStyleValue } from '@/core/color.ts';
import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
interface MobileAccountBalanceTrendsChartItem extends AccountBalanceTrendsChartItem {
index: number;
percent: number;
color: ColorValue;
color: ColorStyleValue;
}
interface MobileAccountBalanceTrendsChartProps extends CommonAccountBalanceTrendsChartProps {
@@ -104,7 +104,7 @@ const allVirtualListItems = computed<MobileAccountBalanceTrendsChartItem[]>(() =
averageBalance: dataItem.averageBalance,
minimumBalance: dataItem.minimumBalance,
maximumBalance: dataItem.maximumBalance,
color: DEFAULT_CHART_COLORS[0],
color: `#${DEFAULT_CHART_COLORS[0]}`,
percent: 0.0
};
src/components/mobile/MonthlyTrendsBarChart.vue
+9 -3
View File
@@ -96,8 +96,11 @@ import { type CommonMonthlyTrendsChartProps, type MonthlyTrendsBarChartClickEven
import { useUserStore } from '@/stores/user.ts';
import { type Year1BasedMonth, type UnixTimeRange, DateRangeScene } from '@/core/datetime.ts';
import type { ColorStyleValue } from '@/core/color.ts';
import { ChartDateAggregationType } from '@/core/statistics.ts';
import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
import type { YearMonthDataItem, SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
import {
@@ -109,6 +112,9 @@ import {
getDateTypeByDateRange,
getFiscalYearFromUnixTime
} from '@/lib/datetime.ts';
import {
getDisplayColor
} from '@/lib/color.ts';
import {
sortStatisticsItems
} from '@/lib/statistics.ts';
@@ -116,7 +122,7 @@ import {
interface TrendsBarChartLegend {
readonly id: string;
readonly name: string;
readonly color: string;
readonly color: ColorStyleValue;
readonly displayOrders: number[];
}
@@ -157,7 +163,7 @@ const {
formatAmountToLocalizedNumeralsWithCurrency
} = useI18n();
const { allDateRanges, getItemName, getColor } = useMonthlyTrendsChartBase(props);
const { allDateRanges, getItemName } = useMonthlyTrendsChartBase(props);
const userStore = useUserStore();
@@ -179,7 +185,7 @@ const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
const legend: TrendsBarChartLegend = {
id: id,
name: (props.nameField && item[props.nameField]) ? getItemName(item[props.nameField] as string) : id,
color: getColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]),
color: getDisplayColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]),
displayOrders: (props.displayOrdersField && item[props.displayOrdersField]) ? item[props.displayOrdersField] as number[] : [0]
};
src/components/mobile/PieChart.vue
+8 -21
View File
@@ -7,7 +7,7 @@
fill="transparent"
cx="0" cy="0"
:r="diameter / 2"
:stroke="getColor(item.color)"
:stroke="item.color"
:stroke-width="diameter"
:stroke-dasharray="getItemStrokeDash(item)"
:stroke-dashoffset="getItemDashOffset(item, validItems, itemCommonDashOffset)"
@@ -50,7 +50,7 @@
</f7-chip>
<f7-chip outline
:text="selectedItem.displayPercent"
:style="getColorStyle(selectedItem ? selectedItem.color : '', '--f7-chip-outline-border-color')"
:style="getColorStyle(selectedItem?.color, '--f7-chip-outline-border-color')"
v-else-if="!skeleton"></f7-chip>
</p>
<p v-else-if="!validItems || !validItems.length">
@@ -60,7 +60,7 @@
<span class="skeleton-text" v-if="skeleton">Name</span>
<span v-else-if="!skeleton && selectedItem.displayName">{{ selectedItem.displayName }}</span>
<span class="skeleton-text" v-if="skeleton">Value</span>
<span v-else-if="!skeleton && showValue" :style="getColorStyle(selectedItem ? selectedItem.color : '')">{{ selectedItem.displayValue }}</span>
<span v-else-if="!skeleton && showValue" :style="getColorStyle(selectedItem?.color)">{{ selectedItem.displayValue }}</span>
<f7-icon class="item-navigate-icon icon-with-direction" f7="chevron_right" v-if="enableClickItem"></f7-icon>
</f7-link>
<f7-link :no-link-class="true" v-else-if="!validItems || !validItems.length">
@@ -82,13 +82,12 @@ import { computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { type CommonPieChartDataItem, type CommonPieChartProps, usePieChartBase } from '@/components/base/PieChartBase.ts'
import type { ColorValue } from '@/core/color.ts';
import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
import type { ColorStyleValue } from '@/core/color.ts';
interface MobilePieChartProps extends CommonPieChartProps {
showCenterText?: boolean;
showSelectedItemInfo?: boolean;
centerTextBackground?: ColorValue;
centerTextBackground?: ColorStyleValue;
}
const props = defineProps<MobilePieChartProps>();
@@ -135,25 +134,13 @@ const itemCommonDashOffset = computed<number>(() => {
return offset;
});
function getColor(color: ColorValue): ColorValue {
if (color && color !== DEFAULT_ICON_COLOR) {
color = '#' + color;
} else {
color = 'var(--default-icon-color)';
}
return color;
}
function getColorStyle(color: ColorValue, additionalFieldName?: string): Record<string, string> {
const finalColor = getColor(color);
function getColorStyle(color: ColorStyleValue, additionalFieldName?: string): Record<string, string> {
const ret: Record<string, string> = {
color: finalColor
color: color
};
if (additionalFieldName) {
ret[additionalFieldName] = finalColor;
ret[additionalFieldName] = color;
}
return ret;