fix Bug or esLink formatting

src/views/setting/account/BasicSetting.vue

@@ -1,95 +1,85 @@
-<template>
-  <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
-    <n-grid-item>
-      <n-form
-          :label-width="80"
-          :model="formValue"
-          :rules="rules"
-          ref="formRef"
-      >
-        <n-form-item label="昵称" path="name">
-          <n-input v-model:value="formValue.name" placeholder="请输入昵称"/>
-        </n-form-item>
-
-        <n-form-item label="邮箱" path="email">
-          <n-input placeholder="请输入备案编号" v-model:value="formValue.email"/>
-        </n-form-item>
-
-
-        <n-form-item label="联系电话" path="mobile">
-          <n-input placeholder="请输入联系电话" v-model:value="formValue.mobile"/>
-        </n-form-item>
-
-        <n-form-item label="联系地址" path="address">
-          <n-input
-              v-model:value="formValue.address"
-              type="textarea"
-              placeholder="请输入联系地址"
-          />
-        </n-form-item>
-
-        <div>
-          <n-space>
-            <n-button type="primary" @click="formSubmit">更新基本信息</n-button>
-          </n-space>
-        </div>
-      </n-form>
-    </n-grid-item>
-  </n-grid>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, ref, toRefs } from 'vue'
-import { useMessage } from 'naive-ui'
-
-const rules = {
-  name: {
-    required: true,
-    message: '请输入昵称',
-    trigger: 'blur'
-  },
-  email: {
-    required: true,
-    message: '请输入邮箱',
-    trigger: 'blur'
-  },
-  mobile: {
-    required: true,
-    message: '请输入联系电话',
-    trigger: 'input'
-  },
-}
-
-export default defineComponent({
-  setup() {
-    const formRef: any = ref(null)
-    const message = useMessage()
-
-    const state = reactive({
-      formValue: {
-        name: '',
-        mobile: '',
-        email: '',
-        address: '',
-      }
-    })
-
-    function formSubmit() {
-      formRef.value.validate((errors) => {
-        if (!errors) {
-          message.success('验证成功')
-        } else {
-          message.error('验证失败，请填写完整信息')
-        }
-      })
-    }
-
-    return {
-      formRef,
-      ...toRefs(state),
-      rules,
-      formSubmit
-    }
-  }
-})
-</script>
+<template>
+  <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
+    <n-grid-item>
+      <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
+        <n-form-item label="昵称" path="name">
+          <n-input v-model:value="formValue.name" placeholder="请输入昵称" />
+        </n-form-item>
+
+        <n-form-item label="邮箱" path="email">
+          <n-input placeholder="请输入备案编号" v-model:value="formValue.email" />
+        </n-form-item>
+
+        <n-form-item label="联系电话" path="mobile">
+          <n-input placeholder="请输入联系电话" v-model:value="formValue.mobile" />
+        </n-form-item>
+
+        <n-form-item label="联系地址" path="address">
+          <n-input v-model:value="formValue.address" type="textarea" placeholder="请输入联系地址" />
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">更新基本信息</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-grid-item>
+  </n-grid>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, toRefs } from 'vue';
+  import { useMessage } from 'naive-ui';
+
+  const rules = {
+    name: {
+      required: true,
+      message: '请输入昵称',
+      trigger: 'blur',
+    },
+    email: {
+      required: true,
+      message: '请输入邮箱',
+      trigger: 'blur',
+    },
+    mobile: {
+      required: true,
+      message: '请输入联系电话',
+      trigger: 'input',
+    },
+  };
+
+  export default defineComponent({
+    setup() {
+      const formRef: any = ref(null);
+      const message = useMessage();
+
+      const state = reactive({
+        formValue: {
+          name: '',
+          mobile: '',
+          email: '',
+          address: '',
+        },
+      });
+
+      function formSubmit() {
+        formRef.value.validate((errors) => {
+          if (!errors) {
+            message.success('验证成功');
+          } else {
+            message.error('验证失败，请填写完整信息');
+          }
+        });
+      }
+
+      return {
+        formRef,
+        ...toRefs(state),
+        rules,
+        formSubmit,
+      };
+    },
+  });
+</script>

src/views/setting/account/SafetySetting.vue

@@ -7,7 +7,9 @@
             <n-button type="primary" text>修改</n-button>
           </template>
           <n-thing title="账户密码">
-            <template #description><span class="text-gray-400">绑定手机和邮箱，并设置密码，帐号更安全</span></template>
+            <template #description
+              ><span class="text-gray-400">绑定手机和邮箱，并设置密码，帐号更安全</span></template
+            >
           </n-thing>
         </n-list-item>
         <n-list-item>
@@ -15,7 +17,9 @@
             <n-button type="primary" text>修改</n-button>
           </template>
           <n-thing title="绑定手机">
-            <template #description><span class="text-gray-400">已绑定手机号：+86189****4877</span></template>
+            <template #description
+              ><span class="text-gray-400">已绑定手机号：+86189****4877</span></template
+            >
           </n-thing>
         </n-list-item>
         <n-list-item>
@@ -23,7 +27,11 @@
             <n-button type="primary" text>设置</n-button>
           </template>
           <n-thing title="密保问题">
-            <template #description><span class="text-gray-400">未设置密保问题，密保问题可有效保护账户安全</span></template>
+            <template #description
+              ><span class="text-gray-400"
+                >未设置密保问题，密保问题可有效保护账户安全</span
+              ></template
+            >
           </n-thing>
         </n-list-item>
         <n-list-item>
@@ -31,7 +39,9 @@
             <n-button type="primary" text>修改</n-button>
           </template>
           <n-thing title="个性域名">
-            <template #description><span class="text-gray-400">已绑定域名：https://www.naiveui.com</span></template>
+            <template #description
+              ><span class="text-gray-400">已绑定域名：https://www.naiveui.com</span></template
+            >
           </n-thing>
         </n-list-item>
       </n-list>
@@ -40,57 +50,57 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, toRefs } from 'vue'
-import { useMessage } from 'naive-ui'
+  import { defineComponent, reactive, ref, toRefs } from 'vue';
+  import { useMessage } from 'naive-ui';
 
-const rules = {
-  name: {
-    required: true,
-    message: '请输入昵称',
-    trigger: 'blur'
-  },
-  email: {
-    required: true,
-    message: '请输入邮箱',
-    trigger: 'blur'
-  },
-  mobile: {
-    required: true,
-    message: '请输入联系电话',
-    trigger: 'input'
-  },
-}
+  const rules = {
+    name: {
+      required: true,
+      message: '请输入昵称',
+      trigger: 'blur',
+    },
+    email: {
+      required: true,
+      message: '请输入邮箱',
+      trigger: 'blur',
+    },
+    mobile: {
+      required: true,
+      message: '请输入联系电话',
+      trigger: 'input',
+    },
+  };
 
-export default defineComponent({
-  setup() {
-    const formRef: any = ref(null)
-    const message = useMessage()
+  export default defineComponent({
+    setup() {
+      const formRef: any = ref(null);
+      const message = useMessage();
 
-    const state = reactive({
-      formValue: {
-        name: '',
-        mobile: '',
-        email: '',
-        address: '',
+      const state = reactive({
+        formValue: {
+          name: '',
+          mobile: '',
+          email: '',
+          address: '',
+        },
+      });
+
+      function formSubmit() {
+        formRef.value.validate((errors) => {
+          if (!errors) {
+            message.success('验证成功');
+          } else {
+            message.error('验证失败，请填写完整信息');
+          }
+        });
       }
-    })
 
-    function formSubmit() {
-      formRef.value.validate((errors) => {
-        if (!errors) {
-          message.success('验证成功')
-        } else {
-          message.error('验证失败，请填写完整信息')
-        }
-      })
-    }
-
-    return {
-      formRef,
-      ...toRefs(state),
-      rules,
-      formSubmit
-    }
-  }
-})
+      return {
+        formRef,
+        ...toRefs(state),
+        rules,
+        formSubmit,
+      };
+    },
+  });
 </script>

src/views/setting/account/account.vue

@@ -4,10 +4,11 @@
       <n-grid-item span="6">
         <n-card :bordered="false" size="small" class="proCard">
           <n-thing
-              class="thing-cell"
-              v-for="item in typeTabList" :key="item.key"
-              :class="{'thing-cell-on':type===item.key}"
-              @click="switchType(item)"
+            class="thing-cell"
+            v-for="item in typeTabList"
+            :key="item.key"
+            :class="{ 'thing-cell-on': type === item.key }"
+            @click="switchType(item)"
           >
             <template #header>{{ item.name }}</template>
             <template #description>{{ item.desc }}</template>
@@ -16,73 +17,72 @@
       </n-grid-item>
       <n-grid-item span="18">
         <n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
-          <BasicSetting v-if="type === 1"></BasicSetting>
-          <SafetySetting v-if="type === 2"></SafetySetting>
+          <BasicSetting v-if="type === 1" />
+          <SafetySetting v-if="type === 2" />
         </n-card>
       </n-grid-item>
     </n-grid>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue'
-import BasicSetting from "./BasicSetting.vue"
-import SafetySetting from "./SafetySetting.vue"
+  import { defineComponent, reactive, toRefs } from 'vue';
+  import BasicSetting from './BasicSetting.vue';
+  import SafetySetting from './SafetySetting.vue';
 
+  const typeTabList = [
+    {
+      name: '基本设置',
+      desc: '个人账户信息设置',
+      key: 1,
+    },
+    {
+      name: '安全设置',
+      desc: '密码，邮箱等设置',
+      key: 2,
+    },
+  ];
+  export default defineComponent({
+    components: { BasicSetting, SafetySetting },
+    setup() {
+      const state = reactive({
+        type: 1,
+        typeTitle: '基本设置',
+      });
 
-const typeTabList = [
-  {
-    name: '基本设置',
-    desc: '个人账户信息设置',
-    key: 1
-  },
-  {
-    name: '安全设置',
-    desc: '密码，邮箱等设置',
-    key: 2
-  }
-]
-export default defineComponent({
-  components: { BasicSetting, SafetySetting },
-  setup() {
-    const state = reactive({
-      type: 1,
-      typeTitle: '基本设置'
-    })
+      function switchType(e) {
+        state.type = e.key;
+        state.typeTitle = e.name;
+      }
 
-    function switchType(e) {
-      state.type = e.key
-      state.typeTitle = e.name
-    }
-
-    return {
-      ...toRefs(state),
-      switchType,
-      typeTabList
-    }
-  }
-})
+      return {
+        ...toRefs(state),
+        switchType,
+        typeTabList,
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-.thing-cell {
-  margin: 0 -16px 10px;
-  padding: 5px 16px;
+  .thing-cell {
+    margin: 0 -16px 10px;
+    padding: 5px 16px;
 
-  &:hover {
-    background: #f3f3f3;
-    cursor: pointer
-  }
-}
-
-.thing-cell-on {
-  background: #f0faff;
-  color: #2d8cf0;
-
-  ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
-    color: #2d8cf0
+    &:hover {
+      background: #f3f3f3;
+      cursor: pointer;
+    }
   }
 
-  &:hover {
+  .thing-cell-on {
     background: #f0faff;
+    color: #2d8cf0;
+
+    ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
+      color: #2d8cf0;
+    }
+
+    &:hover {
+      background: #f0faff;
+    }
   }
-}
 </style>

src/views/setting/system/BasicSetting.vue

@@ -1,31 +1,21 @@
 <template>
   <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
     <n-grid-item>
-      <n-form
-          :label-width="80"
-          :model="formValue"
-          :rules="rules"
-          ref="formRef"
-      >
+      <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
         <n-form-item label="网站名称" path="name">
-          <n-input v-model:value="formValue.name" placeholder="请输入网站名称"/>
+          <n-input v-model:value="formValue.name" placeholder="请输入网站名称" />
         </n-form-item>
 
         <n-form-item label="备案编号" path="icpCode">
-          <n-input placeholder="请输入备案编号" v-model:value="formValue.icpCode"/>
+          <n-input placeholder="请输入备案编号" v-model:value="formValue.icpCode" />
         </n-form-item>
 
-
         <n-form-item label="联系电话" path="mobile">
-          <n-input placeholder="请输入联系电话" v-model:value="formValue.mobile"/>
+          <n-input placeholder="请输入联系电话" v-model:value="formValue.mobile" />
         </n-form-item>
 
         <n-form-item label="联系地址" path="address">
-          <n-input
-              v-model:value="formValue.address"
-              type="textarea"
-              placeholder="请输入联系地址"
-          />
+          <n-input v-model:value="formValue.address" type="textarea" placeholder="请输入联系地址" />
         </n-form-item>
 
         <n-form-item label="登录验证码" path="loginCode">
@@ -38,14 +28,18 @@
         </n-form-item>
 
         <n-form-item label="网站开启访问" path="systemOpen">
-          <n-switch size="large" v-model:value="formValue.systemOpen" @update:value="systemOpenChange"/>
+          <n-switch
+            size="large"
+            v-model:value="formValue.systemOpen"
+            @update:value="systemOpenChange"
+          />
         </n-form-item>
 
         <n-form-item label="网站关闭提示" path="closeText">
           <n-input
-              v-model:value="formValue.closeText"
-              type="textarea"
-              placeholder="请输入网站关闭提示"
+            v-model:value="formValue.closeText"
+            type="textarea"
+            placeholder="请输入网站关闭提示"
           />
         </n-form-item>
 
@@ -60,79 +54,80 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, toRefs } from 'vue'
-import { useDialog, useMessage } from 'naive-ui'
+  import { defineComponent, reactive, ref, toRefs } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
 
-const rules = {
-  name: {
-    required: true,
-    message: '请输入网站名称',
-    trigger: 'blur'
-  },
-  mobile: {
-    required: true,
-    message: '请输入联系电话',
-    trigger: 'input'
-  },
-}
+  const rules = {
+    name: {
+      required: true,
+      message: '请输入网站名称',
+      trigger: 'blur',
+    },
+    mobile: {
+      required: true,
+      message: '请输入联系电话',
+      trigger: 'input',
+    },
+  };
 
-export default defineComponent({
-  setup() {
-    const formRef = ref(null)
-    const message = useMessage()
-    const dialog = useDialog()
+  export default defineComponent({
+    setup() {
+      const formRef: any = ref(null);
+      const message = useMessage();
+      const dialog = useDialog();
 
-    const state = reactive({
-      formValue: {
-        name: '',
-        mobile: '',
-        icpCode: '',
-        address: '',
-        loginCode: 0,
-        closeText: '网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
-        systemOpen: true
-      }
-    })
+      const state = reactive({
+        formValue: {
+          name: '',
+          mobile: '',
+          icpCode: '',
+          address: '',
+          loginCode: 0,
+          closeText:
+            '网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
+          systemOpen: true,
+        },
+      });
 
-    function systemOpenChange(value) {
-      if (!value) {
-        dialog.warning({
-          title: '提示',
-          content: '您确定要关闭系统访问吗？该操作立马生效，请慎重操作！',
-          positiveText: '确定',
-          negativeText: '取消',
-          onPositiveClick: () => {
-            message.success('操作成功')
-          },
-          onNegativeClick: () => {
-            state.formValue.systemOpen = true
-          }
-        })
-      }
-    }
-
-    function formSubmit(e) {
-      formRef.value.validate((errors) => {
-        if (!errors) {
-          message.success('验证成功')
-        } else {
-          message.error('验证失败，请填写完整信息')
+      function systemOpenChange(value) {
+        if (!value) {
+          dialog.warning({
+            title: '提示',
+            content: '您确定要关闭系统访问吗？该操作立马生效，请慎重操作！',
+            positiveText: '确定',
+            negativeText: '取消',
+            onPositiveClick: () => {
+              message.success('操作成功');
+            },
+            onNegativeClick: () => {
+              state.formValue.systemOpen = true;
+            },
+          });
         }
-      })
-    }
+      }
 
-    function resetForm() {
-      formRef.value.restoreValidation()
-    }
+      function formSubmit() {
+        formRef.value.validate((errors) => {
+          if (!errors) {
+            message.success('验证成功');
+          } else {
+            message.error('验证失败，请填写完整信息');
+          }
+        });
+      }
 
-    return {
-      formRef,
-      ...toRefs(state),
-      rules,
-      formSubmit,
-      resetForm,
-      systemOpenChange
-    }
-  }
-})
+      function resetForm() {
+        formRef.value.restoreValidation();
+      }
+
+      return {
+        formRef,
+        ...toRefs(state),
+        rules,
+        formSubmit,
+        resetForm,
+        systemOpenChange,
+      };
+    },
+  });
 </script>

src/views/setting/system/EmailSetting.vue

@@ -1,31 +1,25 @@
 <template>
   <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
     <n-grid-item>
-      <n-form
-          :label-width="120"
-          :model="formValue"
-          :rules="rules"
-          ref="formRef"
-      >
-
+      <n-form :label-width="120" :model="formValue" :rules="rules" ref="formRef">
         <n-form-item label="发件人邮箱" path="originator">
-          <n-input v-model:value="formValue.originator" placeholder="请输入发件人邮箱"/>
+          <n-input v-model:value="formValue.originator" placeholder="请输入发件人邮箱" />
         </n-form-item>
 
         <n-form-item label="SMTP服务器地址">
-          <n-input placeholder="请输入SMTP服务器地址"/>
+          <n-input placeholder="请输入SMTP服务器地址" />
         </n-form-item>
 
         <n-form-item label="SMTP服务器端口">
-          <n-input placeholder="请输入SMTP服务器端口"/>
+          <n-input placeholder="请输入SMTP服务器端口" />
         </n-form-item>
 
         <n-form-item label="SMTP用户名">
-          <n-input placeholder="请输入SMTP用户名"/>
+          <n-input placeholder="请输入SMTP用户名" />
         </n-form-item>
 
         <n-form-item label="SMTP密码">
-          <n-input type="password" placeholder="请输入SMTP密码"/>
+          <n-input type="password" placeholder="请输入SMTP密码" />
         </n-form-item>
 
         <n-form-item label="邮件测试">
@@ -43,43 +37,43 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, toRefs } from 'vue'
-import { useMessage } from 'naive-ui'
+  import { defineComponent, reactive, ref, toRefs } from 'vue';
+  import { useMessage } from 'naive-ui';
 
-const rules = {
-  originator: {
-    required: true,
-    message: '请输入发件人邮箱',
-    trigger: 'blur'
-  }
-}
-export default defineComponent({
-  setup() {
-    const formRef: any = ref(null)
-    const message = useMessage()
+  const rules = {
+    originator: {
+      required: true,
+      message: '请输入发件人邮箱',
+      trigger: 'blur',
+    },
+  };
+  export default defineComponent({
+    setup() {
+      const formRef: any = ref(null);
+      const message = useMessage();
 
-    const state = reactive({
-      formValue: {
-        originator: '',
+      const state = reactive({
+        formValue: {
+          originator: '',
+        },
+      });
+
+      function formSubmit() {
+        formRef.value.validate((errors) => {
+          if (!errors) {
+            message.success('验证成功');
+          } else {
+            message.error('验证失败，请填写完整信息');
+          }
+        });
       }
-    })
 
-    function formSubmit() {
-      formRef.value.validate((errors) => {
-        if (!errors) {
-          message.success('验证成功')
-        } else {
-          message.error('验证失败，请填写完整信息')
-        }
-      })
-    }
-
-    return {
-      formRef,
-      ...toRefs(state),
-      rules,
-      formSubmit
-    }
-  }
-})
+      return {
+        formRef,
+        ...toRefs(state),
+        rules,
+        formSubmit,
+      };
+    },
+  });
 </script>

src/views/setting/system/RevealSetting.vue

@@ -1,32 +1,47 @@
 <template>
   <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
     <n-grid-item>
-      <n-form
-          :label-width="120"
-          :model="formValue"
-          :rules="rules"
-          ref="formRef"
-      >
+      <n-form :label-width="120" :model="formValue" :rules="rules" ref="formRef">
         <n-form-item label="商品图片(大)">
           <n-space align="center">
             <span>宽度：</span>
-            <n-input v-model:value="formValue.bigWidth" style="width:80px" placeholder="宽度像素"/>
+            <n-input
+              v-model:value="formValue.bigWidth"
+              style="width: 80px"
+              placeholder="宽度像素"
+            />
             <span>高度：</span>
-            <n-input v-model:value="formValue.bigHeight" style="width:80px" placeholder="高度像素"/>
+            <n-input
+              v-model:value="formValue.bigHeight"
+              style="width: 80px"
+              placeholder="高度像素"
+            />
           </n-space>
         </n-form-item>
 
         <n-form-item label="商品图片(小)">
           <n-space align="center">
             <span>宽度：</span>
-            <n-input v-model:value="formValue.smallWidth" style="width:80px" placeholder="宽度像素"/>
+            <n-input
+              v-model:value="formValue.smallWidth"
+              style="width: 80px"
+              placeholder="宽度像素"
+            />
             <span>高度：</span>
-            <n-input v-model:value="formValue.smallHeight" style="width:80px" placeholder="高度像素"/>
+            <n-input
+              v-model:value="formValue.smallHeight"
+              style="width: 80px"
+              placeholder="高度像素"
+            />
           </n-space>
         </n-form-item>
 
         <n-form-item label="水印透明度" path="watermarkClarity">
-          <n-input-number v-model:value="formValue.watermarkClarity" :show-button="false" placeholder="请输入水印透明度"/>
+          <n-input-number
+            v-model:value="formValue.watermarkClarity"
+            :show-button="false"
+            placeholder="请输入水印透明度"
+          />
         </n-form-item>
 
         <n-form-item label="水印图片" path="watermarkClarity">
@@ -36,28 +51,31 @@
         </n-form-item>
 
         <n-form-item label="水印位置" path="watermarkPlace">
-          <n-select placeholder="请选择价格精确方式"
-                    :options="watermarkPlaceList"
-                    v-model:value="formValue.watermarkPlace"
+          <n-select
+            placeholder="请选择价格精确方式"
+            :options="watermarkPlaceList"
+            v-model:value="formValue.watermarkPlace"
           />
         </n-form-item>
 
         <n-form-item label="价格精确位数" path="pricePreciseNum">
-          <n-select placeholder="请选择价格精确位数"
-                    :options="pricePreciseNumList"
-                    v-model:value="formValue.pricePreciseNum"
+          <n-select
+            placeholder="请选择价格精确位数"
+            :options="pricePreciseNumList"
+            v-model:value="formValue.pricePreciseNum"
           />
         </n-form-item>
 
         <n-form-item label="价格精确方式" path="pricePrecise">
-          <n-select placeholder="请选择价格精确方式"
-                    :options="pricePreciseList"
-                    v-model:value="formValue.pricePrecise"
+          <n-select
+            placeholder="请选择价格精确方式"
+            :options="pricePreciseList"
+            v-model:value="formValue.pricePrecise"
           />
         </n-form-item>
 
         <n-form-item label="前台显示市场价" path="isMarketPrice">
-          <n-switch size="large" v-model:value="formValue.isMarketPrice"/>
+          <n-switch size="large" v-model:value="formValue.isMarketPrice" />
         </n-form-item>
 
         <div>
@@ -71,130 +89,130 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, toRefs } from 'vue'
-import { useDialog, useMessage } from 'naive-ui'
+  import { defineComponent, reactive, ref, toRefs } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
 
-const rules = {
-  name: {
-    required: true,
-    message: '请输入网站名称',
-    trigger: 'blur'
-  },
-  mobile: {
-    required: true,
-    message: '请输入联系电话',
-    trigger: 'input'
-  },
-}
-const watermarkPlaceList = [
-  {
-    label: '左上',
-    value: 1
-  },
-  {
-    label: '右上',
-    value: 2
-  },
-  {
-    label: '居中',
-    value: 3
-  },
-  {
-    label: '右下',
-    value: 4
-  },
-]
+  const rules = {
+    name: {
+      required: true,
+      message: '请输入网站名称',
+      trigger: 'blur',
+    },
+    mobile: {
+      required: true,
+      message: '请输入联系电话',
+      trigger: 'input',
+    },
+  };
+  const watermarkPlaceList = [
+    {
+      label: '左上',
+      value: 1,
+    },
+    {
+      label: '右上',
+      value: 2,
+    },
+    {
+      label: '居中',
+      value: 3,
+    },
+    {
+      label: '右下',
+      value: 4,
+    },
+  ];
 
-const pricePreciseNumList = [
-  {
-    label: '2位',
-    value: 1
-  },
-  {
-    label: '3位',
-    value: 2
-  },
-  {
-    label: '4位',
-    value: 3
-  },
-]
-const pricePreciseList = [
-  {
-    label: '四舍五入',
-    value: 1
-  },
-  {
-    label: '向上取整',
-    value: 2
-  },
-  {
-    label: '向下取整',
-    value: 3
-  },
-]
+  const pricePreciseNumList = [
+    {
+      label: '2位',
+      value: 1,
+    },
+    {
+      label: '3位',
+      value: 2,
+    },
+    {
+      label: '4位',
+      value: 3,
+    },
+  ];
+  const pricePreciseList = [
+    {
+      label: '四舍五入',
+      value: 1,
+    },
+    {
+      label: '向上取整',
+      value: 2,
+    },
+    {
+      label: '向下取整',
+      value: 3,
+    },
+  ];
 
-export default defineComponent({
-  setup() {
-    const formRef: any = ref(null)
-    const message = useMessage()
-    const dialog = useDialog()
+  export default defineComponent({
+    setup() {
+      const formRef: any = ref(null);
+      const message = useMessage();
+      const dialog = useDialog();
 
-    const state = reactive({
-      formValue: {
-        bigWidth: '',
-        bigHeight: '',
-        smallWidth: '',
-        smallHeight: '',
-        watermarkClarity: null,
-        pricePrecise: 1,
-        isMarketPrice: true,
-        pricePreciseNum: null,
-      }
-    })
+      const state = reactive({
+        formValue: {
+          bigWidth: '',
+          bigHeight: '',
+          smallWidth: '',
+          smallHeight: '',
+          watermarkClarity: null,
+          pricePrecise: 1,
+          isMarketPrice: true,
+          pricePreciseNum: null,
+        },
+      });
 
-    function systemOpenChange(value) {
-      if (!value) {
-        dialog.warning({
-          title: '提示',
-          content: '您确定要关闭系统访问吗？该操作立马生效，请慎重操作！',
-          positiveText: '确定',
-          negativeText: '取消',
-          onPositiveClick: () => {
-            message.success('操作成功')
-          },
-          onNegativeClick: () => {
-            state.formValue.systemOpen = true
-          }
-        })
-      }
-    }
-
-    function formSubmit(e) {
-      formRef.value.validate((errors) => {
-        if (!errors) {
-          message.success('验证成功')
-        } else {
-          message.error('验证失败，请填写完整信息')
+      function systemOpenChange(value) {
+        if (!value) {
+          dialog.warning({
+            title: '提示',
+            content: '您确定要关闭系统访问吗？该操作立马生效，请慎重操作！',
+            positiveText: '确定',
+            negativeText: '取消',
+            onPositiveClick: () => {
+              message.success('操作成功');
+            },
+            onNegativeClick: () => {
+              state.formValue.systemOpen = true;
+            },
+          });
         }
-      })
-    }
+      }
 
-    function resetForm() {
-      formRef.value.restoreValidation()
-    }
+      function formSubmit() {
+        formRef.value.validate((errors) => {
+          if (!errors) {
+            message.success('验证成功');
+          } else {
+            message.error('验证失败，请填写完整信息');
+          }
+        });
+      }
 
-    return {
-      formRef,
-      ...toRefs(state),
-      pricePreciseList,
-      watermarkPlaceList,
-      pricePreciseNumList,
-      rules,
-      formSubmit,
-      resetForm,
-      systemOpenChange
-    }
-  }
-})
+      function resetForm() {
+        formRef.value.restoreValidation();
+      }
+
+      return {
+        formRef,
+        ...toRefs(state),
+        pricePreciseList,
+        watermarkPlaceList,
+        pricePreciseNumList,
+        rules,
+        formSubmit,
+        resetForm,
+        systemOpenChange,
+      };
+    },
+  });
 </script>

src/views/setting/system/system.vue

@@ -4,10 +4,11 @@
       <n-grid-item span="6">
         <n-card :bordered="false" size="small" class="proCard">
           <n-thing
-              class="thing-cell"
-              v-for="item in typeTabList" :key="item.key"
-              :class="{'thing-cell-on':type===item.key}"
-              @click="switchType(item)"
+            class="thing-cell"
+            v-for="item in typeTabList"
+            :key="item.key"
+            :class="{ 'thing-cell-on': type === item.key }"
+            @click="switchType(item)"
           >
             <template #header>{{ item.name }}</template>
             <template #description>{{ item.desc }}</template>
@@ -16,81 +17,79 @@
       </n-grid-item>
       <n-grid-item span="18">
         <n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
-          <BasicSetting v-if="type === 1"></BasicSetting>
-          <RevealSetting v-if="type === 2"></RevealSetting>
-          <EmailSetting v-if="type === 3"></EmailSetting>
+          <BasicSetting v-if="type === 1" />
+          <RevealSetting v-if="type === 2" />
+          <EmailSetting v-if="type === 3" />
         </n-card>
       </n-grid-item>
     </n-grid>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue'
-import { useRouter } from 'vue-router'
-import BasicSetting from "./BasicSetting.vue"
-import RevealSetting from "./RevealSetting.vue"
-import EmailSetting from "./EmailSetting.vue"
+  import { defineComponent, reactive, toRefs } from 'vue';
+  import BasicSetting from './BasicSetting.vue';
+  import RevealSetting from './RevealSetting.vue';
+  import EmailSetting from './EmailSetting.vue';
 
-const typeTabList = [
-  {
-    name: '基本设置',
-    desc: '系统常规设置',
-    key: 1
-  },
-  {
-    name: '显示设置',
-    desc: '系统显示设置',
-    key: 2
-  },
-  {
-    name: '邮件设置',
-    desc: '系统邮件设置',
-    key: 3
-  }
-]
-export default defineComponent({
-  components: { BasicSetting, RevealSetting, EmailSetting },
-  setup() {
-    const router = useRouter()
-    const state = reactive({
-      type: 1,
-      typeTitle: '基本设置'
-    })
+  const typeTabList = [
+    {
+      name: '基本设置',
+      desc: '系统常规设置',
+      key: 1,
+    },
+    {
+      name: '显示设置',
+      desc: '系统显示设置',
+      key: 2,
+    },
+    {
+      name: '邮件设置',
+      desc: '系统邮件设置',
+      key: 3,
+    },
+  ];
+  export default defineComponent({
+    components: { BasicSetting, RevealSetting, EmailSetting },
+    setup() {
+      const state = reactive({
+        type: 1,
+        typeTitle: '基本设置',
+      });
 
-    function switchType(e) {
-      state.type = e.key
-      state.typeTitle = e.name
-    }
+      function switchType(e) {
+        state.type = e.key;
+        state.typeTitle = e.name;
+      }
 
-    return {
-      ...toRefs(state),
-      switchType,
-      typeTabList
-    }
-  }
-})
+      return {
+        ...toRefs(state),
+        switchType,
+        typeTabList,
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-.thing-cell {
-  margin: 0 -16px 10px;
-  padding: 5px 16px;
+  .thing-cell {
+    margin: 0 -16px 10px;
+    padding: 5px 16px;
 
-  &:hover {
-    background: #f3f3f3;
-    cursor: pointer
-  }
-}
-
-.thing-cell-on {
-  background: #f0faff;
-  color: #2d8cf0;
-
-  ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
-    color: #2d8cf0
+    &:hover {
+      background: #f3f3f3;
+      cursor: pointer;
+    }
   }
 
-  &:hover {
+  .thing-cell-on {
     background: #f0faff;
+    color: #2d8cf0;
+
+    ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
+      color: #2d8cf0;
+    }
+
+    &:hover {
+      background: #f0faff;
+    }
   }
-}
 </style>