perf: 优化系统配置面板

locales/en.yaml

@@ -55,9 +55,6 @@ panel:
   pureTagsStyleCardTip: Card tags for efficient browsing
   pureTagsStyleChrome: Chrome
   pureTagsStyleChromeTip: Chrome style is classic and elegant
-  pureFullScreenWatermark: FullScreen Watermark
-  pureEnableWatermark: Watermark
-  pureWatermarkText: Text
   pureInterfaceDisplay: Interface Display
   pureGreyModel: Grey Model
   pureWeakModel: Weak Model

locales/zh-CN.yaml

@@ -55,9 +55,6 @@ panel:
   pureTagsStyleCardTip: 卡片标签，高效浏览
   pureTagsStyleChrome: 谷歌
   pureTagsStyleChromeTip: 谷歌风格，经典美观
-  pureFullScreenWatermark: 全屏水印
-  pureEnableWatermark: 水印
-  pureWatermarkText: 文本
   pureInterfaceDisplay: 界面显示
   pureGreyModel: 灰色模式
   pureWeakModel: 色弱模式

src/layout/components/lay-panel/index.vue

@@ -51,7 +51,7 @@ onBeforeUnmount(() => {
     <div class="right-panel-background" />
     <div ref="target" class="right-panel bg-bg_color">
       <div
-        class="project-configuration border-0 border-b-[1px] border-solid border-[var(--pure-border-color)]"
+        class="flex-bc py-3 px-5 border-0 border-l border-solid border-(--pure-border-color)"
       >
         <h4 class="dark:text-white">
           {{ t("panel.pureSystemSet") }}
@@ -73,12 +73,14 @@ onBeforeUnmount(() => {
           />
         </span>
       </div>
-      <el-scrollbar>
+      <el-scrollbar
+        class="border-y border-l border-r-0 border-solid border-(--pure-border-color) h-[calc(100vh-104px)]!"
+      >
         <slot />
       </el-scrollbar>
 
       <div
-        class="flex justify-end p-3 border-0 border-t-[1px] border-solid border-[var(--pure-border-color)]"
+        class="flex justify-end p-3 border-0 border-l border-solid border-(--pure-border-color)"
       >
         <el-button
           v-tippy="{
@@ -99,10 +101,6 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="scss" scoped>
-:deep(.el-scrollbar) {
-  height: calc(100vh - 110px);
-}
-
 .right-panel-background {
   position: fixed;
   top: 0;
@@ -139,11 +137,4 @@ onBeforeUnmount(() => {
     transform: translate(0);
   }
 }
-
-.project-configuration {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-}
 </style>

src/layout/components/lay-setting/index.vue

@@ -9,14 +9,6 @@ import {
   onUnmounted,
   onBeforeMount
 } from "vue";
-import {
-  useDark,
-  debounce,
-  isNumber,
-  useGlobal,
-  isAllEmpty,
-  useWatermark
-} from "@pureadmin/utils";
 import { useI18n } from "vue-i18n";
 import { emitter } from "@/utils/mitt";
 import LayPanel from "../lay-panel/index.vue";
@@ -25,6 +17,7 @@ import { useAppStoreHook } from "@/store/modules/app";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import Segmented, { type OptionsType } from "@/components/ReSegmented";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils";
 
 import Check from "~icons/ep/check";
 import LeftArrow from "~icons/ri/arrow-left-s-line?width=20&height=20";
@@ -34,9 +27,8 @@ import DarkIcon from "@/assets/svg/dark.svg?component";
 import SystemIcon from "@/assets/svg/system.svg?component";
 
 const { t } = useI18n();
+const { device } = useNav();
 const { isDark } = useDark();
-const { device, title } = useNav();
-const { setWatermark, clear } = useWatermark();
 const { $storage } = useGlobal<GlobalPropertiesApi>();
 
 const mixRef = ref();
@@ -66,12 +58,6 @@ const markValue = ref($storage.configure?.showModel ?? "smart");
 
 const logoVal = ref($storage.configure?.showLogo ?? true);
 
-/** WIP... */
-const watermarkConfigs = reactive({
-  enable: false,
-  text: null
-});
-
 const settings = reactive({
   greyVal: $storage.configure.grey,
   weakVal: $storage.configure.weak,
@@ -143,21 +129,6 @@ function onChange({ option }) {
   emitter.emit("tagViewsShowModel", value);
 }
 
-function onWatermarkSwitchChange(value) {
-  const text = isAllEmpty(watermarkConfigs.text)
-    ? title.value
-    : watermarkConfigs.text;
-  if (value) {
-    setWatermark(text);
-  } else {
-    clear();
-  }
-}
-
-function onWatermarkInputChange(value) {
-  setWatermark(value);
-}
-
 /** 侧边栏Logo */
 function logoChange() {
   unref(logoVal)
@@ -476,39 +447,30 @@ onUnmounted(() => removeMatchMedia);
         @change="onChange"
       />
 
-      <p class="mt-5! font-medium text-sm dark:text-white">
-        {{ t("panel.pureFullScreenWatermark") }}
-      </p>
-      <ul class="setting">
-        <li>
-          <span class="dark:text-white">
-            {{ t("panel.pureEnableWatermark") }}
-          </span>
-          <el-switch
-            v-model="watermarkConfigs.enable"
-            inline-prompt
-            :active-text="t('buttons.pureOpenText')"
-            :inactive-text="t('buttons.pureCloseText')"
-            @change="onWatermarkSwitchChange"
-          />
-        </li>
-        <li>
-          <span class="dark:text-white">
-            {{ t("panel.pureWatermarkText") }}
-          </span>
-          <el-input
-            v-model="watermarkConfigs.text"
-            class="w-[100px]!"
-            :placeholder="title"
-            @input="onWatermarkInputChange"
-          />
-        </li>
-      </ul>
-
       <p class="mt-5! font-medium text-sm dark:text-white">
         {{ t("panel.pureInterfaceDisplay") }}
       </p>
       <ul class="setting">
+        <li>
+          <span class="dark:text-white">{{ t("panel.pureGreyModel") }}</span>
+          <el-switch
+            v-model="settings.greyVal"
+            inline-prompt
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
+            @change="greyChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">{{ t("panel.pureWeakModel") }}</span>
+          <el-switch
+            v-model="settings.weakVal"
+            inline-prompt
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
+            @change="weekChange"
+          />
+        </li>
         <li>
           <span class="dark:text-white">{{ t("panel.pureHiddenTags") }}</span>
           <el-switch
@@ -529,18 +491,6 @@ onUnmounted(() => removeMatchMedia);
             @change="hideFooterChange"
           />
         </li>
-        <li>
-          <span class="dark:text-white">
-            {{ t("panel.pureMultiTagsCache") }}
-          </span>
-          <el-switch
-            v-model="settings.multiTagsCache"
-            inline-prompt
-            :active-text="t('buttons.pureOpenText')"
-            :inactive-text="t('buttons.pureCloseText')"
-            @change="multiTagsCacheChange"
-          />
-        </li>
         <li>
           <span class="dark:text-white">Logo</span>
           <el-switch
@@ -554,23 +504,15 @@ onUnmounted(() => removeMatchMedia);
           />
         </li>
         <li>
-          <span class="dark:text-white">{{ t("panel.pureGreyModel") }}</span>
+          <span class="dark:text-white">
+            {{ t("panel.pureMultiTagsCache") }}
+          </span>
           <el-switch
-            v-model="settings.greyVal"
+            v-model="settings.multiTagsCache"
             inline-prompt
             :active-text="t('buttons.pureOpenText')"
             :inactive-text="t('buttons.pureCloseText')"
-            @change="greyChange"
-          />
-        </li>
-        <li>
-          <span class="dark:text-white">{{ t("panel.pureWeakModel") }}</span>
-          <el-switch
-            v-model="settings.weakVal"
-            inline-prompt
-            :active-text="t('buttons.pureOpenText')"
-            :inactive-text="t('buttons.pureCloseText')"
-            @change="weekChange"
+            @change="multiTagsCacheChange"
           />
         </li>
       </ul>

src/style/dark.scss

@@ -135,17 +135,6 @@ html.dark {
     }
   }
 
-  /* 系统配置面板 */
-  .right-panel-items {
-    .el-divider__text {
-      --el-bg-color: var(--el-bg-color);
-    }
-
-    .el-divider--horizontal {
-      border-top: none;
-    }
-  }
-
   /* 表单设计器 */
   .design-form {
     .el-main.config-content,