浏览代码

refactor(frontend): 优化设置页面的选项卡切换逻辑

- 重构了选项卡切换的逻辑,增加了保存当前设置的功能
- 优化了代码结构,提高了可读性和可维护性
-修复了一些潜在的 bug,例如在切换选项卡时未保存当前设置的问题
panqiuyao 5 月之前
父节点
当前提交
1dd1e6b829
共有 2 个文件被更改,包括 22 次插入13 次删除
  1. 4 4
      frontend/src/views/Setting/components/otherConfig.vue
  2. 18 9
      frontend/src/views/Setting/index.vue

+ 4 - 4
frontend/src/views/Setting/components/otherConfig.vue

@@ -26,7 +26,7 @@ import tokenInfo from '@/stores/modules/token';
 const tokenInfoStore = tokenInfo();
 import { getWebUrlrUrl } from '@/utils/appfun'
 
-s
+
 
 // 数据定义
 const showRechargeDialog = ref(false);
@@ -48,18 +48,18 @@ const handleWindowMessage = async (event) => {
   if (message.type === 'close') {
     showRechargeDialog.value = false;
     await useUserInfoStore.getInfo();
-    this.loading = false;
+    loading.value = false;
   }
 };
 
 const onClose = async () => {
   await useUserInfoStore.getInfo();
-  this.loading = false;
+  loading.value = false;
 };
 
 const openDialog = () => {
   showRechargeDialog.value = true;
-  this.loading = false;
+  loading.value = false;
 };
 // 绑定监听
 onMounted(() => {

+ 18 - 9
frontend/src/views/Setting/index.vue

@@ -4,17 +4,17 @@
   />
   <div class="container">
     <nav class="settings-nav">
-      <div class="nav-item" :class="{'active': activeIndex === 0}" @click="activeIndex = 0">
+      <div class="nav-item" :class="{'active': activeIndex === 0}" @click="toggleTab(0)">
         <img src="@/assets/images/setting/icon1.png" class="nav-icon" v-if="activeIndex !== 0"/>
         <img src="@/assets/images/setting/icon1a.png" class="nav-icon" v-else/>
         <span>基础配置</span>
       </div>
-      <div class="nav-item" :class="{'active': activeIndex === 2}" @click="activeIndex = 2">
+      <div class="nav-item" :class="{'active': activeIndex === 2}" @click="toggleTab(2)">
         <img src="@/assets/images/setting/icon3.png" class="nav-icon" v-if="activeIndex !== 2"/>
         <img src="@/assets/images/setting/icon3a.png" class="nav-icon" v-else/>
         <span>其他设置</span>
       </div>
-      <div class="nav-item" v-if="configInfoStore.appModel === 1" :class="{'active': activeIndex === 4}" @click="activeIndex = 4">
+      <div class="nav-item" v-if="configInfoStore.appModel === 1" :class="{'active': activeIndex === 4}"  @click="toggleTab(4)">
         <img src="@/assets/images/setting/icon4.png" class="nav-icon" v-if="activeIndex !== 4"/>
         <img src="@/assets/images/setting/icon4a.png" class="nav-icon" v-else/>
         <span>左右脚程序设置</span>
@@ -303,7 +303,7 @@ const indexKey  ={
 watch(() => route.query.type, async (newType,oldType) => {
 
   if(['0','1','2'].includes(oldType)){
-    await  saveSetting(oldType)
+ //   await  saveSetting(oldType)
   }
   const typeValue = parseInt(newType) || 0;
   if(typeValue === 4) return;
@@ -383,12 +383,22 @@ const handleInput = (value) => {
   }
 };
 
+const toggleTab = async (item) => {
+  let oldType = activeIndex.value;
+
+  if([0,1,2].includes(oldType)){
+      const next =  await  saveSetting(oldType)
+    console.log(next);
+    if(next === false) return ;
+  }
+   activeIndex.value = item;
+};
+
 
 /**
  * 保存当前表单配置。
  */
 const saveSetting = async (index) => {
-
   // 构建临时提交数据
   const submitData = {
     ...formData[indexKey[index]]
@@ -396,7 +406,7 @@ const saveSetting = async (index) => {
   if(index === 0) {
     if (formData.basic_configs.main_image_size.length === 0) {
       ElMessage.error('请选择主图尺寸!');
-      return;
+      return false;
     }
 
     // 处理自定义尺寸逻辑
@@ -406,7 +416,7 @@ const saveSetting = async (index) => {
       if (!customInput.value || isNaN(customInput.value) ||
           customInput.value < 1 || customInput.value > 2000) {
         ElMessage.error('请输入1-2000之间的有效数值');
-        return;
+        return false;
       }
 
       // 创建新数组用于提交
@@ -431,8 +441,7 @@ const saveSetting = async (index) => {
         clientStore.ipc.on(icpList.setting.updateSysConfigs, async (event, result) => {
           clientStore.ipc.removeAllListeners(icpList.setting.updateSysConfigs);
           if(result.code === 0 && result.msg){
-            resolve(result)
-
+            resolve(true)
           }
 
         });