Settings - Subclassification - Added name alignment function, which can adjust the alignment of subcategory names in the project area on the right side of the main interface.

This commit is contained in:
unknown 2023-11-10 22:59:57 +08:00
parent 0d93c2f922
commit dcb2b1cc38
4 changed files with 28 additions and 0 deletions

View File

@ -185,15 +185,18 @@ function getSubClassification({
itemAreaNameFontSize = 14, itemAreaNameFontSize = 14,
itemAreaNameFontWeight = 700, itemAreaNameFontWeight = 700,
itemAreaNameFontLineHeight = 1.25, itemAreaNameFontLineHeight = 1.25,
itemAreaNameAlign = "left",
}: { }: {
itemAreaNameFontSize?: number | null; itemAreaNameFontSize?: number | null;
itemAreaNameFontWeight?: number | null; itemAreaNameFontWeight?: number | null;
itemAreaNameFontLineHeight?: number | null; itemAreaNameFontLineHeight?: number | null;
itemAreaNameAlign?: "left" | "center" | "right" | null;
}): SubClassification { }): SubClassification {
return { return {
itemAreaNameFontSize: itemAreaNameFontSize ?? 14, itemAreaNameFontSize: itemAreaNameFontSize ?? 14,
itemAreaNameFontWeight: itemAreaNameFontWeight ?? 700, itemAreaNameFontWeight: itemAreaNameFontWeight ?? 700,
itemAreaNameFontLineHeight: itemAreaNameFontLineHeight ?? 1.25, itemAreaNameFontLineHeight: itemAreaNameFontLineHeight ?? 1.25,
itemAreaNameAlign: itemAreaNameAlign ?? "left",
}; };
} }

View File

@ -41,6 +41,7 @@
lineHeight: lineHeight:
store.setting.subClassification.itemAreaNameFontLineHeight + store.setting.subClassification.itemAreaNameFontLineHeight +
'rem', 'rem',
textAlign: store.setting.subClassification.itemAreaNameAlign,
}" }"
> >
{{ classification.name }} {{ classification.name }}

View File

@ -771,6 +771,13 @@
<div class="mx-2" v-if="selectedMenuId === 3"> <div class="mx-2" v-if="selectedMenuId === 3">
<NForm label-placement="left" :show-feedback="false" size="small"> <NForm label-placement="left" :show-feedback="false" size="small">
<span class="block font-semibold">{{ store.language.name }}</span> <span class="block font-semibold">{{ store.language.name }}</span>
<NFormItem :label="store.language.align" class="mt-1">
<NSelect
v-model:value="setting.subClassification.itemAreaNameAlign"
:options="itemAreaSubclassificationNameAlignOptions"
size="small"
></NSelect>
</NFormItem>
<NFormItem :label="store.language.fontSize" class="mt-1"> <NFormItem :label="store.language.fontSize" class="mt-1">
<NInputNumber <NInputNumber
v-model:value="setting.subClassification.itemAreaNameFontSize" v-model:value="setting.subClassification.itemAreaNameFontSize"
@ -1771,6 +1778,21 @@ let backgroundImagePositionOptions = ref([
value: "right", value: "right",
}, },
]); ]);
//
let itemAreaSubclassificationNameAlignOptions = ref([
{
label: store.language.left,
value: "left",
},
{
label: store.language.center,
value: "center",
},
{
label: store.language.right,
value: "right",
},
]);
// //
watch( watch(
() => setting.value, () => setting.value,

2
types/setting.d.ts vendored
View File

@ -118,6 +118,8 @@ export interface SubClassification {
itemAreaNameFontWeight: number; itemAreaNameFontWeight: number;
// 名称字体行高(项目区域) // 名称字体行高(项目区域)
itemAreaNameFontLineHeight: number; itemAreaNameFontLineHeight: number;
// 名称对齐(项目区域)
itemAreaNameAlign: "left" | "center" | "right";
} }
// 项目 // 项目