add 增加系统圆角配置,并将部分圆角样式改为使用变量
This commit is contained in:
@@ -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
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user