fix: 修复刷新页面菜单、页脚闪动的问题

2026-07-23 07:33:53 +08:00 · 2026-03-17 16:01:10 +08:00
parent 818ac1eefb
commit 20ac6f3f96
13 changed files with 143 additions and 87 deletions
@@ -26,7 +26,7 @@
          <span class="nav-text">{{ $t("header.smartManagement") }}</span>
        </div>
        <!-- 普通用户显示音色克隆 -->
-        <div v-if="!isSuperAdmin && featureStatus.voiceClone" class="equipment-management"
+        <div v-if="!userInfo.superAdmin && featureStatus.voiceClone" class="equipment-management"
          :class="{ 'active-tab': $route.path === '/voice-clone-management' }" @click="goVoiceCloneManagement">
          <img loading="lazy" alt="" src="@/assets/header/voice.png" :style="{
            filter:
@@ -38,7 +38,7 @@
        </div>

        <!-- 超级管理员显示音色克隆下拉菜单 -->
-        <el-dropdown v-if="isSuperAdmin && featureStatus.voiceClone" trigger="click" class="equipment-management more-dropdown" :class="{
+        <el-dropdown v-if="userInfo.superAdmin && featureStatus.voiceClone" trigger="click" class="equipment-management more-dropdown" :class="{
          'active-tab':
            $route.path === '/voice-clone-management' ||
            $route.path === '/voice-resource-management',
@@ -64,7 +64,7 @@
          </el-dropdown-menu>
        </el-dropdown>

-        <div v-if="isSuperAdmin" class="equipment-management" :class="{ 'active-tab': $route.path === '/model-config' }"
+        <div v-if="userInfo.superAdmin" class="equipment-management" :class="{ 'active-tab': $route.path === '/model-config' }"
          @click="goModelConfig">
          <img loading="lazy" alt="" src="@/assets/header/model_config.png" :style="{
            filter:
@@ -81,7 +81,7 @@
          }" />
          <span class="nav-text">{{ $t("header.knowledgeBase") }}</span>
        </div>
-        <el-dropdown v-if="isSuperAdmin" trigger="click" class="equipment-management more-dropdown" :class="{
+        <el-dropdown v-if="userInfo.superAdmin" trigger="click" class="equipment-management more-dropdown" :class="{
          'active-tab':
            $route.path === '/dict-management' ||
            $route.path === '/params-management' ||
@@ -140,7 +140,7 @@

      <!-- 右侧元素 -->
      <div class="header-right">
-        <div class="search-container" v-if="$route.path === '/home' && !(isSuperAdmin && isSmallScreen)">
+        <div class="search-container" v-if="$route.path === '/home' && !(userInfo.superAdmin && isSmallScreen)">
          <div class="search-wrapper">
            <el-input v-model="search" :placeholder="$t('header.searchPlaceholder')" class="custom-search-input"
              @keyup.enter.native="handleSearch" @focus="showSearchHistory" @blur="hideSearchHistory" clearable
@@ -189,7 +189,7 @@
 <script>
 import userApi from "@/apis/module/user";
 import i18n, { changeLanguage } from "@/i18n";
-import { mapActions, mapGetters } from "vuex";
+import { mapActions, mapState } from "vuex";
 import ChangePasswordDialog from "./ChangePasswordDialog.vue"; // 引入修改密码弹窗组件
 import featureManager from "@/utils/featureManager"; // 引入功能管理工具类

@@ -202,10 +202,6 @@ export default {
  data() {
    return {
      search: "",
-      userInfo: {
-        username: "",
-        mobile: "",
-      },
      isChangePasswordDialogVisible: false, // 控制修改密码弹窗的显示
      paramDropdownVisible: false,
      voiceCloneDropdownVisible: false,
@@ -224,18 +220,16 @@ export default {
        label: "label",
        children: "children",
      },
-      // 功能状态
-      featureStatus: {
-        voiceClone: false, // 音色克隆功能状态
-        knowledgeBase: false, // 知识库功能状态
-      },
    };
  },
  computed: {
-    ...mapGetters(["getIsSuperAdmin"]),
-    isSuperAdmin() {
-      return this.getIsSuperAdmin;
-    },
+    ...mapState({
+      featureStatus: (state) => ({
+        voiceClone: state.pubConfig.systemWebMenu?.features?.voiceClone?.enabled, // 音色克隆功能状态
+        knowledgeBase: state.pubConfig.systemWebMenu?.features?.knowledgeBase?.enabled, // 知识库功能状态
+      }),
+      userInfo: (state) => state.userInfo,
+    }),
    // 获取当前语言
    currentLanguage() {
      return i18n.locale || "zh_CN";
@@ -325,7 +319,6 @@ export default {
    },
  },
  async mounted() {
-    this.fetchUserInfo();
    this.checkScreenSize();
    window.addEventListener("resize", this.checkScreenSize);
    // 从localStorage加载搜索历史
@@ -386,20 +379,6 @@ export default {
    async loadFeatureStatus() {
      // 等待featureManager初始化完成
      await featureManager.waitForInitialization();
-      
-      const config = featureManager.getConfig();
-      
-      this.featureStatus.voiceClone = config.voiceClone;
-      this.featureStatus.knowledgeBase = config.knowledgeBase;
-    },
-    // 获取用户信息
-    fetchUserInfo() {
-      userApi.getUserInfo(({ data }) => {
-        this.userInfo = data.data;
-        if (data.data.superAdmin !== undefined) {
-          this.$store.commit("setUserInfo", data.data);
-        }
-      });
    },
    checkScreenSize() {
      this.isSmallScreen = window.innerWidth <= 1386;
@@ -17,17 +17,37 @@
            class="custom-input"></el-input>
        </el-form-item>

-        <el-form-item :label="$t('paramDialog.paramValue')" prop="paramValue" class="form-item">
-          <el-input v-model="form.paramValue" :placeholder="$t('paramDialog.paramValuePlaceholder')"
-            class="custom-input"></el-input>
+        <el-form-item :label="$t('paramDialog.valueType')" prop="valueType" class="form-item">
+          <el-select
+            v-model="form.valueType"
+            :placeholder="$t('paramDialog.valueTypePlaceholder')"
+            class="custom-select"
+            @change="handleValueTypeChange"
+          >
+            <el-option
+              v-for="item in valueTypeOptions"
+              :key="item.value"
+              :label="$t(`paramDialog.${item.value}Type`)"
+              :value="item.value"
+            />
+          </el-select>
        </el-form-item>

-        <el-form-item :label="$t('paramDialog.valueType')" prop="valueType" class="form-item">
-          <el-select v-model="form.valueType" :placeholder="$t('paramDialog.valueTypePlaceholder')"
-            class="custom-select">
-            <el-option v-for="item in valueTypeOptions" :key="item.value" :label="$t(`paramDialog.${item.value}Type`)"
-              :value="item.value" />
-          </el-select>
+        <el-form-item :label="$t('paramDialog.paramValue')" prop="paramValue" class="form-item">
+          <el-input
+            v-if="form.valueType !== 'json' && form.valueType !== 'array'"
+            v-model="form.paramValue"
+            :placeholder="$t('paramDialog.paramValuePlaceholder')"
+            class="custom-input"
+          ></el-input>
+          <el-input
+            v-else
+            type="textarea"
+            v-model="form.paramValue"
+            :placeholder="$t('paramDialog.paramValuePlaceholder')"
+            :rows="6"
+            class="custom-textarea"
+          ></el-input>
        </el-form-item>

        <el-form-item :label="$t('paramDialog.remark')" prop="remark" class="form-item remark-item">
@@ -95,11 +115,45 @@ export default {
    };
  },
  methods: {
+    handleValueTypeChange(value) {
+      if (value === 'json') {
+
+      }
+    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
+          const submitData = { ...this.form };
+
+          // 如果是 array 类型，校验格式并转换
+          if (submitData.valueType === 'array' && submitData.paramValue) {
+            const lines = submitData.paramValue.split('\n').filter(line => line.trim());
+
+            // 检查除最后一行外的每行是否以分号结尾
+            for (let i = 0; i < lines.length - 1; i++) {
+              if (!lines[i].trim().endsWith(';')) {
+                this.$message.error('数组格式错误，需要使用英文分号结尾');
+                return;
+              }
+            }
+
+            const items = lines
+              .map(item => item.trim().replace(/;$/, ''))
+              .filter(item => item);
+            submitData.paramValue = items.join(';');
+          }
+          // 如果是 json 类型，压缩 JSON 格式后再提交
+          else if (submitData.valueType === 'json' && submitData.paramValue) {
+            try {
+              const parsed = JSON.parse(submitData.paramValue);
+              submitData.paramValue = JSON.stringify(parsed);
+            } catch (e) {
+              // 如果解析失败，保持原值
+            }
+          }
+
          this.saving = true; // 开始加载
-          this.$emit('submit', this.form);
+          this.$emit('submit', submitData);
        }
      });
    },
@@ -116,7 +170,24 @@ export default {
  },
  watch: {
    visible(newVal) {
-      if (!newVal) {
+      if (newVal) {
+        if (this.form.paramValue) {
+          // 如果是 json 类型，格式化显示
+          if (this.form.valueType === 'json') {
+            try {
+              const parsed = JSON.parse(this.form.paramValue);
+              this.form.paramValue = JSON.stringify(parsed, null, 2);
+            } catch (e) {
+              // 如果解析失败，保持原值
+            }
+          }
+          // 如果是 array 类型，将分号分隔的字符串转换为每行一个项目
+          else if (this.form.valueType === 'array') {
+            const items = this.form.paramValue.split(';').filter(item => item.trim());
+            this.form.paramValue = items.join(';\n');
+          }
+        }
+      } else {
        // 当对话框关闭时，重置saving状态
        this.saving = false;
      }
@@ -88,7 +88,6 @@
                    <el-option :label="$t('providerDialog.booleanType')" value="boolean"></el-option>
                    <el-option :label="$t('providerDialog.dictType')" value="dict"></el-option>
                    <el-option :label="$t('providerDialog.arrayType')" value="array"></el-option>
-                    <el-option :label="$t('providerDialog.ragType')" value="RAG"></el-option>
                  </el-select>
                </template>
                <template v-else>