feat: 支持在设置页展示监听程序运行状态

src/global/initPlugin.js

@@ -239,8 +239,8 @@ export default function initPlugin() {
       utools.outPlugin()
     }
     const errorHandler = (error) => {
-      const info = '请手动安装 clipboard-event-handler 到 剪贴板数据库目录'
-      utools.showNotification('启动剪贴板监听出错: ' + error + info)
+      const info = '请到设置页手动安装 clipboard-event-handler 剪贴板监听程序'
+      utools.showNotification('启动剪贴板监听程序启动出错: ' + error + info)
       addCommonListener()
     }
     listener

src/global/registerElement.js

@@ -9,6 +9,7 @@ import 'element-plus/theme-chalk/el-input.css'
 import 'element-plus/theme-chalk/el-select.css'
 import 'element-plus/theme-chalk/el-option.css'
 import 'element-plus/theme-chalk/el-scrollbar.css'
+import 'element-plus/theme-chalk/el-tag.css'
 import {
   ElButton,
   ElMessageBox,
@@ -17,7 +18,8 @@ import {
   ElInput,
   ElSelect,
   ElOption,
-  ElScrollbar
+  ElScrollbar,
+  ElTag
 } from 'element-plus'
 
 const components = [
@@ -28,7 +30,8 @@ const components = [
   ElInput,
   ElSelect,
   ElOption,
-  ElScrollbar
+  ElScrollbar,
+  ElTag
 ]
 
 document.querySelector('html').className = utools.isDarkColors() ? 'dark' : ''

src/style/cpns/setting.less

@@ -12,12 +12,16 @@
           width: 85px;
         }
         &.operation-select {
-          width: 450px;
+          width: 520px;
         }
       }
       .el-textarea {
         width: 70%;
       }
+      .el-tag {
+        margin: 0 10px;
+        cursor: pointer;
+      }
       .path {
         width: 65%;
       }

src/views/Setting.vue

@@ -3,11 +3,21 @@
     <el-card class="setting-card">
       <template #header>
         <el-button type="primary" @click="handleLinkClick(0)">🚀 主页</el-button>
-        <el-button @click="handleLinkClick(1)">⚡ 手动安装剪贴板监听程序</el-button>
+        <el-button @click="handleLinkClick(1)">⚡ 迁移数据 | 云同步 | 自定义功能</el-button>
         <el-button @click="handleLinkClick(2)">⭐ 开源代码</el-button>
         <el-button @click="handleLinkClick(3)">🎈 论坛发布页</el-button>
       </template>
       <div class="setting-card-content">
+        <div class="setting-card-content-item">
+          <span>剪贴板监听程序状态</span>
+          <el-tag
+            :type="listenStatus ? 'success' : 'warning'"
+            @click="handleLinkClick(1)"
+            title="手动安装剪贴板监听程序"
+          >
+            {{ listenStatus ? '已安装' : '未安装' }}
+          </el-tag>
+        </div>
         <div class="setting-card-content-item">
           <span>数据库路径</span>
           <el-input class="path" v-model="path" :title="path" disabled></el-input>
@@ -65,7 +75,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import setting from '../global/readSetting'
 import restoreSetting from '../global/restoreSetting'
@@ -82,6 +92,8 @@ const shown = ref(operation.shown)
 const custom = ref(operation.custom)
 const stringCustom = ref(JSON.stringify(operation.custom))
 
+const listenStatus = ref(false)
+
 const handleLinkClick = (index) => {
   const links = [
     'https://ziuchen.gitee.io/project/ClipboardManager/',
@@ -168,6 +180,10 @@ const handleRestoreBtnClick = () => {
     })
     .catch(() => {})
 }
+
+onMounted(() => {
+  listenStatus.value = window.listener.listening
+})
 </script>
 
 <style lang="less" scoped>