code refactor

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
+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) {
+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
}
}
+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
};