style(web): 统一后台图标与全局视觉

src/components/Setting/src/Setting.vue

@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup lang="ts">
-import { ElDrawer, ElDivider, ElMessage } from 'element-plus'
+import { ElDrawer, ElDivider, ElMessage, ElMessageBox } from 'element-plus'
 import { ref, unref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
@@ -14,6 +14,7 @@ import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
 import { useStorage } from '@/hooks/web/useStorage'
 import { useClipboard } from '@vueuse/core'
 import { useDesign } from '@/hooks/web/useDesign'
+import { AppIcons } from '@/constants/icons'
 
 const { clear: storageClear } = useStorage('localStorage')
 
@@ -145,9 +146,18 @@ const copyConfig = async () => {
 }
 
 // 清空缓存
-const clear = () => {
-  storageClear()
-  window.location.reload()
+const clear = async () => {
+  try {
+    await ElMessageBox.confirm(t('setting.clearCacheMessage'), t('setting.clearAndReset'), {
+      confirmButtonText: t('common.ok'),
+      cancelButtonText: t('common.cancel'),
+      type: 'warning'
+    })
+    storageClear()
+    window.location.reload()
+  } catch {
+    // 取消清除时保持当前状态
+  }
 }
 
 const themeChange = () => {
@@ -163,7 +173,7 @@ const themeChange = () => {
     class="fixed top-[45%] right-0 w-40px h-40px flex items-center justify-center bg-[var(--el-color-primary)] cursor-pointer z-10"
     @click="drawer = true"
   >
-    <Icon icon="ant-design:setting-outlined" color="#fff" />
+    <AppIcon :icon="AppIcons.settings" color="#fff" />
   </div>
 
   <ElDrawer v-model="drawer" direction="rtl" size="350px" :z-index="4000">
@@ -254,6 +264,6 @@ const themeChange = () => {
 @prefix-cls: ~'@{namespace}-setting';
 
 .@{prefix-cls} {
-  border-radius: 6px 0 0 6px;
+  border-radius: var(--app-radius-md) 0 0 6px;
 }
 </style>

src/components/Setting/src/components/ColorRadioPicker.vue

@@ -4,6 +4,7 @@
 import { PropType, watch, unref, ref } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
+import { AppIcons } from '@/constants/icons'
 
 const { getPrefixCls } = useDesign()
 
@@ -51,7 +52,7 @@ watch(
       }"
       @click="colorVal = item"
     >
-      <Icon v-if="colorVal === item" color="#fff" icon="ep:check" :size="16" />
+      <AppIcon v-if="colorVal === item" color="#fff" :icon="AppIcons.check" :size="16" />
     </span>
   </div>
 </template>

src/components/Setting/src/components/LayoutRadioPicker.vue

@@ -67,7 +67,7 @@ const layout = computed(() => appStore.getLayout)
 .@{prefix-cls} {
   &__classic {
     border: 2px solid #e5e7eb;
-    border-radius: 4px;
+    border-radius: var(--app-radius-sm);
 
     &::before {
       position: absolute;
@@ -77,7 +77,7 @@ const layout = computed(() => appStore.getLayout)
       width: 33%;
       height: 100%;
       background-color: #273352;
-      border-radius: 4px 0 0 4px;
+      border-radius: var(--app-radius-sm) 0 0 4px;
       content: '';
     }
 
@@ -88,14 +88,14 @@ const layout = computed(() => appStore.getLayout)
       width: 100%;
       height: 25%;
       background-color: #fff;
-      border-radius: 4px 4px 0;
+      border-radius: var(--app-radius-sm) 4px 0;
       content: '';
     }
   }
 
   &__top-left {
     border: 2px solid #e5e7eb;
-    border-radius: 4px;
+    border-radius: var(--app-radius-sm);
 
     &::before {
       position: absolute;
@@ -105,7 +105,7 @@ const layout = computed(() => appStore.getLayout)
       width: 100%;
       height: 33%;
       background-color: #273352;
-      border-radius: 4px 4px 0 0;
+      border-radius: var(--app-radius-sm) 4px 0 0;
       content: '';
     }
 
@@ -116,14 +116,14 @@ const layout = computed(() => appStore.getLayout)
       width: 33%;
       height: 100%;
       background-color: #fff;
-      border-radius: 4px 0 0 4px;
+      border-radius: var(--app-radius-sm) 0 0 4px;
       content: '';
     }
   }
 
   &__top {
     border: 2px solid #e5e7eb;
-    border-radius: 4px;
+    border-radius: var(--app-radius-sm);
 
     &::before {
       position: absolute;
@@ -133,14 +133,14 @@ const layout = computed(() => appStore.getLayout)
       width: 100%;
       height: 33%;
       background-color: #273352;
-      border-radius: 4px 4px 0 0;
+      border-radius: var(--app-radius-sm) 4px 0 0;
       content: '';
     }
   }
 
   &__cut-menu {
     border: 2px solid #e5e7eb;
-    border-radius: 4px;
+    border-radius: var(--app-radius-sm);
 
     &::before {
       position: absolute;
@@ -150,7 +150,7 @@ const layout = computed(() => appStore.getLayout)
       width: 100%;
       height: 33%;
       background-color: #273352;
-      border-radius: 4px 4px 0 0;
+      border-radius: var(--app-radius-sm) 4px 0 0;
       content: '';
     }
 
@@ -161,7 +161,7 @@ const layout = computed(() => appStore.getLayout)
       width: 10%;
       height: 100%;
       background-color: #fff;
-      border-radius: 4px 0 0 4px;
+      border-radius: var(--app-radius-sm) 0 0 4px;
       content: '';
     }
   }