add 增加系统圆角配置,并将部分圆角样式改为使用变量

This commit is contained in:
lau
2026-04-01 23:41:44 +08:00
parent 38c67fba25
commit 029eb6636c
16 changed files with 55 additions and 27 deletions

View File

@@ -101,6 +101,12 @@
<el-switch v-model="isDark" class="drawer-switch" @change="toggleDark" />
</span>
</div>
<div class="drawer-item">
<span>页面圆角</span>
<span class="comp-style">
<el-slider v-model="radiusBase" :min="0" :max="32" :step="2" style="width: 120px" @change="radiusBaseChange" />
</span>
</div>
<el-divider />
@@ -176,6 +182,7 @@ const sideTheme = ref(settingsStore.sideTheme);
const storeSettings = computed(() => settingsStore);
const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585']);
const navType = ref(settingsStore.navType);
const radiusBase = ref(settingsStore.radiusBase);
// 是否暗黑模式
const isDark = useDark({
storageKey: 'useDarkKey',
@@ -223,6 +230,11 @@ const themeChange = (val: string) => {
settingsStore.theme = val;
handleThemeStyle(val);
};
const radiusBaseChange = (val: number) => {
settingsStore.radiusBase = val;
// 更新 CSS 变量
document.documentElement.style.setProperty('--app-radius-base', `${val}px`);
};
const handleTheme = (val: string) => {
sideTheme.value = val;
if (isDark.value && val === SideThemeEnum.LIGHT) {
@@ -247,6 +259,7 @@ const saveSetting = () => {
settings.value.sideTheme = storeSettings.value.sideTheme;
settings.value.theme = storeSettings.value.theme;
settings.value.navType = storeSettings.value.navType;
settings.value.radiusBase = storeSettings.value.radiusBase;
setTimeout(() => {
proxy?.$modal.closeLoading();
}, 1000);
@@ -261,6 +274,10 @@ const openSetting = () => {
showSettings.value = true;
};
onMounted(() => {
radiusBaseChange(storeSettings.value.radiusBase);
});
defineExpose({
openSetting
});