Browse Source

feat(setting): 添加调试面板并更新相关功能

- 在 HeaderBar组件中添加 title 插槽,支持自定义标题
- 在 Setting 页面中集成调试面板组件
- 实现调试面板的显示控制逻辑
- 添加打开资源目录功能
panqiuyao 4 months ago
parent
commit
3a35360834

+ 3 - 1
frontend/src/components/header-bar/index.vue

@@ -66,7 +66,9 @@
       </div>
     </div>
     <div class="header-bar__title">
-      <span class="header-bar__text">{{ title }}</span>
+      <span class="header-bar__text">
+        <slot name="title">{{ title }}</slot>
+      </span>
     </div>
     <div class="header-bar__buttons" v-if="showUser">
       <div class="header-bar__button header-bar__button__user">

+ 1 - 1
frontend/src/router/index.ts

@@ -14,7 +14,7 @@ const routes: RouteRecordRaw[] = [
     {
         path: "/home",
         name: "home",
-        component: () => import("@/views/Home/index_old.vue"),
+        component: () => import("@/views/Home/index.vue"),
         meta: {
             noAuth: true,
         },

+ 53 - 0
frontend/src/views/Setting/components/DebugPanel.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="debug-panel" v-if="isVisible">
+    <div class="form-item flex left">
+        <el-button @click="openResourceDirectory">打开资源目录</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import client from "@/stores/modules/client";
+import  configInfo  from '@/stores/modules/config';
+import icpList from '@/utils/ipc';
+
+const clientStore = client();
+const configInfoStore = configInfo();
+
+const isVisible = ref(false);
+
+function showDebugPanel() {
+  isVisible.value = true;
+}
+
+function hideDebugPanel() {
+  isVisible.value = false;
+}
+
+function toggleVisibility() {
+  isVisible.value = !isVisible.value;
+}
+
+function openResourceDirectory() {
+  clientStore.ipc.removeAllListeners(icpList.utils.shellFun);
+  let params = {
+    action: 'openPath',
+    params: configInfoStore.appConfig.userDataPath.replaceAll('/', '\\')
+  };
+  clientStore.ipc.send(icpList.utils.shellFun, params);
+}
+
+// 挂载时注册事件监听器
+defineExpose({
+  showDebugPanel,
+  hideDebugPanel,
+  toggleVisibility
+});
+</script>
+
+<style scoped>
+.debug-panel {
+  padding-bottom: 10px;
+}
+</style>

+ 32 - 2
frontend/src/views/Setting/index.vue

@@ -1,7 +1,8 @@
 <template>
   <headerBar
-    title="设置"
-  />
+  >
+    <template  #title><div @click="handleSettingClick">设置</div></template>
+  </headerBar>
   <div class="container">
     <nav class="settings-nav">
       <div class="nav-item" :class="{'active': activeIndex === 0}" @click="toggleTab(0)">
@@ -66,6 +67,8 @@
                     </el-select>
                     </div>
                 </div>
+
+               <DebugPanel ref="debugPanel" />
         </div>
       <!--基础配置-->
       <!--其他设置-->
@@ -147,6 +150,33 @@ import actionConfig from './components/action_config.vue'
 import otherConfig from './components/otherConfig'
 useCheckInfo();
 
+//点击三次  打开资源目录
+
+import DebugPanel from './components/DebugPanel.vue';
+// 在setup函数中创建调试面板实例
+const debugPanel = ref(null);
+// 添加设置点击计数器
+const settingClickCount = ref(0);
+
+// 修改headerBar的点击处理函数
+function handleSettingClick() {
+  console.log('handleSettingClickhandleSettingClick')
+  settingClickCount.value++;
+
+  if (settingClickCount.value >= 3) {
+    if (debugPanel.value) {
+      debugPanel.value.showDebugPanel();
+    }
+    settingClickCount.value = 0;
+  }
+
+  setTimeout(() => {
+    settingClickCount.value = 0;
+  }, 3000); // 3秒内未再次点击则重置计数器
+}
+
+
+
 // 路由和状态管理初始化
 const route = useRoute();
 const router = useRouter();