mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-16 07:57:33 +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/base/ItemIconBase.ts
+20 -19
View File
@@ -1,8 +1,9 @@
import { computed } from 'vue';
import type { ColorValue } from '@/core/color.ts';
import type {ColorStyleValue, ColorValue} from '@/core/color.ts';
import { ALL_ACCOUNT_ICONS, DEFAULT_ACCOUNT_ICON, ALL_CATEGORY_ICONS, DEFAULT_CATEGORY_ICON } from '@/consts/icon.ts';
import { DEFAULT_ICON_COLOR, DEFAULT_ACCOUNT_COLOR, DEFAULT_CATEGORY_COLOR } from '@/consts/color.ts';
import { DEFAULT_ICON_COLOR, DEFAULT_ACCOUNT_COLOR, DEFAULT_CATEGORY_COLOR, DEFAULT_COLOR_STYLE_VARIABLE } from '@/consts/color.ts';
import { isNumber } from '@/lib/common.ts';
type IconItemStyleName = string;
@@ -14,14 +15,14 @@ export interface CommonIconProps {
iconType: CommonIconItemType | MobileIconItemType;
iconId: string | number;
color?: ColorValue;
defaultColor?: ColorValue;
defaultColor?: ColorStyleValue;
additionalColorAttr?: string;
size?: string | number;
}
export function useItemIconBase(props: CommonIconProps) {
const style = computed<Record<IconItemStyleName, IconItemStyleValue>>(() => {
let defaultColor = 'var(--default-icon-color)';
let defaultColor: ColorStyleValue = DEFAULT_COLOR_STYLE_VARIABLE;
if (props.defaultColor) {
defaultColor = props.defaultColor;
@@ -60,15 +61,15 @@ export function useItemIconBase(props: CommonIconProps) {
return ALL_CATEGORY_ICONS[iconId].icon;
}
function getAccountIconStyle(color?: ColorValue | string, defaultColor?: ColorValue | string, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
function getAccountIconStyle(color?: ColorValue, defaultColor?: ColorStyleValue, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
let displayColor: ColorStyleValue | undefined = defaultColor;
if (color && color !== DEFAULT_ACCOUNT_COLOR) {
color = '#' + color;
} else {
color = defaultColor;
displayColor = `#${color}`;
}
const ret: Record<IconItemStyleName, IconItemStyleValue> = {
color: color
color: displayColor
};
if (additionalColorAttr) {
@@ -82,15 +83,15 @@ export function useItemIconBase(props: CommonIconProps) {
return ret;
}
function getCategoryIconStyle(color?: ColorValue | string, defaultColor?: ColorValue | string, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
function getCategoryIconStyle(color?: ColorValue, defaultColor?: ColorStyleValue, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
let displayColor: ColorStyleValue | undefined = defaultColor;
if (color && color !== DEFAULT_CATEGORY_COLOR) {
color = '#' + color;
} else {
color = defaultColor;
displayColor = `#${color}`;
}
const ret: Record<IconItemStyleName, IconItemStyleValue> = {
color: color
color: displayColor
};
if (additionalColorAttr) {
@@ -104,15 +105,15 @@ export function useItemIconBase(props: CommonIconProps) {
return ret;
}
function getDefaultIconStyle(color?: ColorValue | string, defaultColor?: ColorValue | string, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
function getDefaultIconStyle(color?: ColorValue, defaultColor?: ColorStyleValue, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
let displayColor: ColorStyleValue | undefined = defaultColor;
if (color && color !== DEFAULT_ICON_COLOR) {
color = '#' + color;
} else {
color = defaultColor;
displayColor = `#${color}`;
}
const ret: Record<IconItemStyleName, IconItemStyleValue> = {
color: color
color: displayColor
};
if (additionalColorAttr) {
src/components/base/MonthlyTrendsChartBase.ts
+1 -12
View File
@@ -11,8 +11,6 @@ import type {
YearMonthUnixTime
} from '@/core/datetime.ts';
import type { FiscalYearUnixTime } from '@/core/fiscalyear.ts';
import type { ColorValue } from '@/core/color.ts';
import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
import type { YearMonthItems } from '@/models/transaction.ts';
import { getAllDateRangesFromItems } from '@/lib/statistics.ts';
@@ -49,19 +47,10 @@ export function useMonthlyTrendsChartBase<T extends Year1BasedMonth>(props: Comm
return props.translateName ? tt(name) : name;
}
function getColor(color: string): ColorValue {
if (color && color !== DEFAULT_ICON_COLOR) {
color = '#' + color;
}
return color;
}
return {
// computed states
allDateRanges,
// functions
getItemName,
getColor
getItemName
}
}
src/components/base/PieChartBase.ts
+4 -2
View File
@@ -2,9 +2,11 @@ import { ref, computed, watch } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import type { ColorValue, ColorStyleValue } from '@/core/color.ts';
import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
import { isNumber } from '@/lib/common.ts';
import { getDisplayColor } from '@/lib/color.ts';
export interface CommonPieChartDataItem {
id: string;
@@ -13,7 +15,7 @@ export interface CommonPieChartDataItem {
value: number;
percent: number;
actualPercent: number;
color: string;
color: ColorStyleValue;
sourceItem: Record<string, unknown>;
displayPercent?: string;
displayValue?: string;
@@ -68,7 +70,7 @@ export function usePieChartBase(props: CommonPieChartProps) {
value: value,
percent: (isNumber(percent) && percent >= 0) ? percent : (value / totalValidValue * 100),
actualPercent: value / totalValidValue,
color: (props.colorField && item[props.colorField]) ? item[props.colorField] as string : DEFAULT_CHART_COLORS[validItems.length % DEFAULT_CHART_COLORS.length],
color: getDisplayColor((props.colorField && item[props.colorField]) ? item[props.colorField] as ColorValue : DEFAULT_CHART_COLORS[validItems.length % DEFAULT_CHART_COLORS.length]),
sourceItem: item
};
src/components/desktop/AccountBalanceTrendsChart.vue
+5 -5
View File
@@ -14,7 +14,7 @@ import { useUserStore } from '@/stores/user.ts';
import type { NameValue } from '@/core/base.ts';
import { TextDirection } from '@/core/text.ts';
import type { ColorValue } from '@/core/color.ts';
import type { ColorStyleValue } from '@/core/color.ts';
import { ThemeType } from '@/core/theme.ts';
import { AccountBalanceTrendChartType } from '@/core/statistics.ts';
import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
@@ -32,10 +32,10 @@ interface AccountBalanceTrendsChartDataItem {
id: string;
name: string;
itemStyle: {
color: ColorValue;
color0?: string;
borderColor?: string;
borderColor0?: string;
color: ColorStyleValue;
color0?: ColorStyleValue;
borderColor?: ColorStyleValue;
borderColor0?: ColorStyleValue;
};
selected: boolean;
type: string;
src/components/desktop/ColorSelect.vue
+5 -13
View File
@@ -11,7 +11,7 @@
>
<template #selection="{ item }">
<v-label class="cursor-pointer" style="padding-top: 3px">
<v-icon size="28" :icon="mdiSquareRounded" :color="getFinalColor(item.raw)"/>
<v-icon size="28" :icon="mdiSquareRounded" :color="getDisplayColor(item.raw)"/>
</v-label>
</template>
@@ -23,14 +23,14 @@
<div class="text-center" :key="colorInfo.color" v-for="colorInfo in row">
<div class="cursor-pointer" @click="color = colorInfo.color">
<v-icon class="ma-2" size="28"
:icon="mdiSquareRounded" :color="getFinalColor(colorInfo.color)"
:icon="mdiSquareRounded" :color="getDisplayColor(colorInfo.color)"
v-if="!modelValue || modelValue !== colorInfo.color" />
<v-badge class="right-bottom-icon" color="primary"
offset-x="8" offset-y="8"
:location="`bottom ${textDirection === TextDirection.LTR ? 'right' : 'left'}`"
:icon="mdiCheck"
v-if="modelValue && modelValue === colorInfo.color">
<v-icon class="ma-2" size="28" :icon="mdiSquareRounded" :color="getFinalColor(colorInfo.color)" />
<v-icon class="ma-2" size="28" :icon="mdiSquareRounded" :color="getDisplayColor(colorInfo.color)" />
</v-badge>
</div>
</div>
@@ -47,9 +47,9 @@ import { useI18n } from '@/locales/helpers.ts';
import { TextDirection } from '@/core/text.ts';
import type { ColorValue, ColorInfo } from '@/core/color.ts';
import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
import { arrayContainsFieldValue } from '@/lib/common.ts';
import { getColorsInRows } from '@/lib/color.ts';
import { getColorsInRows, getDisplayColor } from '@/lib/color.ts';
import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
import {
@@ -86,14 +86,6 @@ function hasSelectedIcon(row: ColorInfo[]): boolean {
return arrayContainsFieldValue(row, 'id', props.modelValue);
}
function getFinalColor(color: ColorValue): string {
if (color && color !== DEFAULT_ICON_COLOR) {
return '#' + color;
} else {
return 'var(--default-icon-color)';
}
}
function onMenuStateChanged(state: boolean): void {
if (state) {
nextTick(() => {
src/components/desktop/MonthlyTrendsChart.vue
+9 -4
View File
@@ -16,10 +16,12 @@ import { useUserStore } from '@/stores/user.ts';
import { TextDirection } from '@/core/text.ts';
import { type Year1BasedMonth, DateRangeScene } from '@/core/datetime.ts';
import type { ColorValue } from '@/core/color.ts';
import type { ColorStyleValue } from '@/core/color.ts';
import { ThemeType } from '@/core/theme.ts';
import { TrendChartType, ChartDateAggregationType } from '@/core/statistics.ts';
import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
import type { YearMonthDataItem, SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
import {
@@ -32,6 +34,9 @@ import {
getDateTypeByDateRange,
getFiscalYearFromUnixTime
} from '@/lib/datetime.ts';
import {
getDisplayColor
} from '@/lib/color.ts';
import {
sortStatisticsItems
} from '@/lib/statistics.ts';
@@ -47,7 +52,7 @@ interface MonthlyTrendsChartDataItem {
id: string;
name: string;
itemStyle: {
color: ColorValue;
color: ColorStyleValue;
};
selected: boolean;
type: string;
@@ -83,7 +88,7 @@ const {
formatAmountToLocalizedNumeralsWithCurrency
} = useI18n();
const { allDateRanges, getItemName, getColor } = useMonthlyTrendsChartBase(props);
const { allDateRanges, getItemName } = useMonthlyTrendsChartBase(props);
const userStore = useUserStore();
@@ -218,7 +223,7 @@ const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
id: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
name: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
itemStyle: {
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]),
},
selected: true,
type: 'line',
src/components/desktop/PieChart.vue
+3 -12
View File
@@ -13,13 +13,12 @@ import type { CallbackDataParams } from 'echarts/types/dist/shared';
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 type { ColorStyleValue } from '@/core/color.ts';
import { ThemeType } from '@/core/theme.ts';
import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
interface DesktopPieChartDataItem extends CommonPieChartDataItem {
itemStyle: {
color: ColorValue;
color: ColorStyleValue;
};
selected: boolean;
}
@@ -66,7 +65,7 @@ const seriesData = computed<DesktopPieChartDataItem[]>(() => {
ret.push({
...item,
itemStyle: {
color: getColor(item.color),
color: item.color,
},
selected: true
});
@@ -214,14 +213,6 @@ const chartOptions = computed<object>(() => {
};
});
function getColor(color: string): ColorValue {
if (color && color !== DEFAULT_ICON_COLOR) {
color = '#' + color;
}
return color;
}
function clickItem(e: ECElementEvent): void {
if (!props.enableClickItem || e.componentType !== 'series' || e.seriesType !=='pie') {
return;
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;