feat: 构建基本配置界面

src/global/registerElement.js

@@ -1,9 +1,17 @@
 import 'element-plus/theme-chalk/base.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import 'element-plus/theme-chalk/el-overlay.css'
-import { ElButton, ElMessageBox, ElMessage, ElCard } from 'element-plus'
+import {
+  ElButton,
+  ElMessageBox,
+  ElMessage,
+  ElCard,
+  ElInput,
+  ElSelect,
+  ElOption
+} from 'element-plus'
 
-const components = [ElButton, ElMessageBox, ElMessage, ElCard]
+const components = [ElButton, ElMessageBox, ElMessage, ElCard, ElInput, ElSelect, ElOption]
 
 export default function registerElement(app) {
   components.forEach((c) => {

src/style/cpns/setting.less

@@ -2,5 +2,25 @@
   margin: 10px;
   &-content {
     padding: 10px;
+    &-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin: 10px;
+      .el-select {
+        width: 85px;
+      }
+      .path {
+        width: 65%;
+      }
+      & div {
+        padding: 5px 10px;
+      }
+    }
+  }
+  &-footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 }

src/views/Setting.vue

@@ -1,17 +1,85 @@
 <template>
   <div class="setting">
     <el-card class="setting-card">
-      <template #header> 设置 </template>
-      <div class="setting-card-content"></div>
-      <el-button @click="emit('back')">返回</el-button>
-      <el-button type="primary">保存</el-button>
+      <div class="setting-card-content">
+        <div class="setting-card-content-item">
+          <span>数据库路径</span>
+          <el-input class="path" v-model="path" disabled></el-input>
+          <el-button type="primary" @click="handlePathBtnClick('modify')">修改</el-button>
+          <el-button @click="handlePathBtnClick('open')" v-show="path">打开</el-button>
+          <input type="file" id="database-path" :style="{ display: 'none' }" />
+        </div>
+        <div class="setting-card-content-item">
+          <span>最大历史条数</span>
+          <el-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-option v-for="n in [10, 11, 12, 13, 14]" :key="n" :value="n" />
+          </el-select>
+          天
+        </div>
+      </div>
+      <div class="setting-card-footer">
+        <el-button @click="emit('back')">返回</el-button>
+        <el-button @click="handleSaveBtnClick" type="primary">保存</el-button>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script setup>
-import { ElButton } from 'element-plus'
+import { ref } from 'vue'
+import { ElButton, ElInput, ElMessage } from 'element-plus'
+import setting from '../global/readSetting'
+
 const emit = defineEmits(['back'])
+const { database } = setting
+
+const path = ref(database.path)
+const maxsize = ref(database.maxsize)
+const maxage = ref(database.maxage)
+
+const handlePathBtnClick = (param) => {
+  if (param === 'modify') {
+    const file = document.getElementById('database-path')
+    file.click()
+    file.onchange = (e) => {
+      const { files } = e.target
+      if (files.length > 0) {
+        path.value = files[0].path
+      }
+    }
+  } else if (param === 'open') {
+    utools.shellShowItemInFolder(path.value)
+  }
+}
+
+const handleSaveBtnClick = () => {
+  if (path.value === '') {
+    ElMessage.error('数据库路径不能为空')
+    return
+  } else if (path.value.indexOf('_utools_clipboard_manager_storage') === -1) {
+    ElMessage.error('数据库路径不正确')
+    return
+  }
+  utools.dbStorage.setItem('setting', {
+    ...setting,
+    database: {
+      path: path.value,
+      maxsize: maxsize.value,
+      maxage: maxage.value
+    }
+  })
+  ElMessage({
+    message: '保存成功 重启插件生效',
+    type: 'success'
+  })
+}
 </script>
 
 <style lang="less" scoped>