From b071a9eb58e6c8a3a2d365d5103e63824d96cf5d Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Sun, 18 Sep 2022 15:20:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Setting=E9=A1=B5=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E4=B8=BB=E7=95=8C=E9=9D=A2=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E6=8C=89=E9=92=AE=20=E6=94=AF=E6=8C=81=E9=87=8D?=
 =?UTF-8?q?=E7=BD=AE=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cpns/ClipOperate.vue    |  6 +---
 src/style/cpns/setting.less |  7 +++-
 src/views/Setting.vue       | 71 ++++++++++++++++++++++++++++++-------
 3 files changed, 66 insertions(+), 18 deletions(-)

diff --git a/src/cpns/ClipOperate.vue b/src/cpns/ClipOperate.vue
index 0c31def..c75ac03 100644
--- a/src/cpns/ClipOperate.vue
+++ b/src/cpns/ClipOperate.vue
@@ -31,11 +31,7 @@ const props = defineProps({
   }
 })
 
-const operation = computed(() =>
-  props.isFullData
-    ? [...defaultOperation, ...setting.operation.custom]
-    : [...defaultOperation, ...setting.operation.custom].splice(0, 5)
-)
+const operation = computed(() => [...defaultOperation, ...setting.operation.custom])
 
 const { handleOperateClick, filterOperate } = useClipOperate({ emit })
 </script>
diff --git a/src/style/cpns/setting.less b/src/style/cpns/setting.less
index 2ab4684..4584186 100644
--- a/src/style/cpns/setting.less
+++ b/src/style/cpns/setting.less
@@ -8,7 +8,12 @@
       align-items: center;
       margin: 10px;
       .el-select {
-        width: 85px;
+        &.number-select {
+          width: 85px;
+        }
+        &.operation-select {
+          width: 400px;
+        }
       }
       .path {
         width: 65%;
diff --git a/src/views/Setting.vue b/src/views/Setting.vue
index 296521b..ada36cb 100644
--- a/src/views/Setting.vue
+++ b/src/views/Setting.vue
@@ -17,20 +17,38 @@
         </div>
         <div class="setting-card-content-item">
           <span>最大历史条数</span>
-          <el-select v-model="maxsize" fit-input-width>
+          <el-select class="number-select" v-model="maxsize" fit-input-width>
             <el-option v-for="n in [600, 800, 1000, 1200, 1400]" :key="n" :value="n" />
           </el-select>
           条
         </div>
         <div class="setting-card-content-item">
           <span>最长保存时间</span>
-          <el-select v-model="maxage" fit-input-width>
+          <el-select class="number-select" v-model="maxage" fit-input-width>
             <el-option v-for="n in [10, 11, 12, 13, 14]" :key="n" :value="n" />
           </el-select>
           天
         </div>
+        <div class="setting-card-content-item">
+          <span>展示在主界面的功能按钮</span>
+          <el-select
+            class="operation-select"
+            v-model="shown"
+            multiple
+            :multiple-limit="4"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="{ id, title, icon } in defaultOperation"
+              :key="id"
+              :label="icon + title"
+              :value="id"
+            />
+          </el-select>
+        </div>
       </div>
       <div class="setting-card-footer">
+        <el-button @click="handleRestoreBtnClick">重置</el-button>
         <el-button @click="emit('back')">返回</el-button>
         <el-button @click="handleSaveBtnClick" type="primary">保存</el-button>
       </div>
@@ -40,16 +58,21 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ElButton, ElInput, ElMessage } from 'element-plus'
+import { ElButton, ElInput, ElMessage, ElMessageBox } from 'element-plus'
 import setting from '../global/readSetting'
+import restoreSetting from '../global/restoreSetting'
+import defaultOperation from '../data/operation.json'
 
 const emit = defineEmits(['back'])
-const { database } = setting
+const { database, operation } = setting
 
 const path = ref(database.path)
 const maxsize = ref(database.maxsize)
 const maxage = ref(database.maxage)
 
+const shown = ref(operation.shown)
+const custom = ref(operation.custom)
+
 const handleLinkClick = (index) => {
   const links = [
     'https://ziuchen.gitee.io/project/ClipboardManager/',
@@ -83,19 +106,43 @@ const handleSaveBtnClick = () => {
     ElMessage.error('数据库路径不正确')
     return
   }
-  utools.dbStorage.setItem('setting', {
-    ...setting,
-    database: {
-      path: path.value,
-      maxsize: maxsize.value,
-      maxage: maxage.value
-    }
-  })
+  utools.dbStorage.setItem(
+    'setting',
+    JSON.parse(
+      JSON.stringify({
+        database: {
+          path: path.value,
+          maxsize: maxsize.value,
+          maxage: maxage.value
+        },
+        operation: {
+          shown: shown.value,
+          custom: custom.value
+        }
+      })
+    )
+  )
   ElMessage({
     message: '保存成功 重启插件生效',
     type: 'success'
   })
 }
+
+const handleRestoreBtnClick = () => {
+  ElMessageBox.confirm('确定要重置设置吗', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(() => {
+      restoreSetting()
+      ElMessage({
+        message: '重置成功 重启插件生效',
+        type: 'success'
+      })
+    })
+    .catch(() => {})
+}
 </script>
 
 <style lang="less" scoped>