feat:优化APIHUB功能页面

src/views/apihub/component/edit.vue

@@ -55,7 +55,7 @@
             </el-form-item>
             <el-form-item label="API路径" prop="path">
               <div class="path-input-container">
-                <div class="path-prefix">
+                <div class="path-prefix2">
                   {{ originUrl }}
                 </div>
                 <el-input v-model="formData.path" placeholder="请输入API路径" class="path-input" />
@@ -333,18 +333,18 @@ const editorDidMount = (editor) => {
   if (editor) {
     // 设置焦点
     editor.focus();
-    
+
     // 添加输入监听，在用户开始输入时触发提示
     editor.onDidChangeModelContent(() => {
       // 触发自动提示
       editor.trigger('keyboard', 'editor.action.triggerSuggest', {});
     });
-    
+
     // 初始化时就触发一次提示
     setTimeout(() => {
       editor.trigger('keyboard', 'editor.action.triggerSuggest', {});
     }, 100);
-    
+
     // 添加键盘事件处理，阻止回车键触发表单提交
     editor.onKeyDown((e) => {
       // 当用户在编辑器中按下回车键时
@@ -361,16 +361,16 @@ const checkTabWithErrors = () => {
   // 获取所有验证失败的字段
   const fields = formRef.value.fields;
   const errorFields = [];
-  
+
   // 收集所有错误字段
   for (const field in fields) {
     if (fields[field].validateState === 'error') {
       errorFields.push(field);
     }
   }
-  
+
   if (errorFields.length === 0) return;
-  
+
   // 基本信息标签页的字段
   const basicTabFields = ['name', 'path', 'version', 'description', 'groupKey'];
   // 执行器标签页的字段
@@ -383,10 +383,10 @@ const checkTabWithErrors = () => {
       pluginsTabFields.push(field);
     }
   });
-  
+
   // 检查每个标签页并切换到有错误的标签页
   const errorTabs = [];
-  
+
   if (errorFields.some(field => basicTabFields.includes(field))) {
     errorTabs.push({ tab: 'basic', name: '基本信息' });
   }
@@ -396,17 +396,17 @@ const checkTabWithErrors = () => {
   if (pluginsTabFields.length > 0) {
     errorTabs.push({ tab: 'plugins', name: '全局插件' });
   }
-  
+
   if (errorTabs.length > 0) {
     // 如果当前标签页不在错误标签页列表中，切换到第一个错误标签页
     const currentTabHasError = errorTabs.some(tab => tab.tab === activeTab.value);
     if (!currentTabHasError) {
       activeTab.value = errorTabs[0].tab;
     }
-    
+
     // 显示错误提示
     showErrorTooltip(errorTabs);
-    
+
     // 等待DOM更新后滚动到错误字段
     nextTick(() => {
       const errorElement = document.querySelector('.is-error');
@@ -428,7 +428,7 @@ const showErrorTooltip = (errorTabs) => {
   });
   errorMessage += '</ul>';
   errorMessage += '</div>';
-  
+
   // 显示消息提示
   ElMessage({
     dangerouslyUseHTMLString: true,
@@ -441,7 +441,7 @@ const showErrorTooltip = (errorTabs) => {
       removeErrorTabClickListeners();
     }
   });
-  
+
   // 等待DOM更新后添加点击事件
   nextTick(() => {
     addErrorTabClickListeners();
@@ -612,10 +612,10 @@ const onSubmit = () => {
       // 验证失败
       // 直接显示错误提示
       showValidationErrorMessage(fields);
-      
+
       // 验证失败时检查是哪个标签页的必填项出错
       checkTabWithErrors();
-      
+
       return false;
     }
   });
@@ -626,15 +626,15 @@ const showValidationErrorMessage = (fields) => {
   // 获取所有错误字段
   const errorFields = Object.keys(fields);
   if (errorFields.length === 0) return;
-  
+
   // 基本信息标签页的字段
   const basicTabFields = ['name', 'path', 'version', 'description', 'groupKey'];
   // 执行器标签页的字段
   const executorTabFields = ['dataSourceKey', 'sqlType', 'sqlContent', 'returnFormat', 'status'];
-  
+
   // 检查每个标签页的错误
   const errorTabs = [];
-  
+
   if (errorFields.some(field => basicTabFields.includes(field))) {
     errorTabs.push('基本信息');
   }
@@ -644,7 +644,7 @@ const showValidationErrorMessage = (fields) => {
   if (errorFields.some(field => field.startsWith('plugins['))) {
     errorTabs.push('全局插件');
   }
-  
+
   if (errorTabs.length > 0) {
     // 显示错误消息
     ElMessage({
@@ -936,8 +936,8 @@ defineExpose({ open });
   width: 100%;
 }
 
-.path-prefix {
-  background-color: #f5f7fa;
+.path-prefix2 {
+  background-color: #eee;
   padding: 0 10px;
   height: 32px;
   line-height: 32px;
@@ -948,6 +948,13 @@ defineExpose({ open });
   white-space: nowrap;
 }
 
+/* 深色主题下的样式 */
+[data-theme='dark'] .path-prefix2 {
+  background-color: #333;
+  border-color: #424242;
+  color: #dadada;
+}
+
 .path-input {
   flex: 1;
 }

src/views/apihub/component/group.vue

@@ -8,7 +8,7 @@
         <el-input v-model="formData.groupKey" placeholder="请输入分组唯一标识，留空则自动生成" />
       </el-form-item>
       <el-form-item label="父级分组" prop="parentId">
-        <el-cascader v-model="formData.parentId" :options="groupOptions" :props="{ checkStrictly: true, emitPath: false, value: 'Id', label: 'Name', children: 'Children' }" placeholder="请选择父级分组，不选择则为顶级分组" clearable style="width: 100%" />
+        <el-cascader v-model="formData.parentId" :options="groupOptions" :props="cascaderProps" placeholder="请选择父级分组，不选择则为顶级分组" clearable style="width: 100%" />
       </el-form-item>
       <el-form-item label="排序号" prop="sort">
         <el-input-number v-model="formData.sort" :min="0" :max="999" />
@@ -37,6 +37,13 @@ const emit = defineEmits(["refresh"]);
 const showDialog = ref(false);
 const formRef = ref();
 const groupOptions = ref<any[]>([]);
+const cascaderProps = {
+  checkStrictly: true,
+  emitPath: false,
+  value: 'Id',
+  label: 'Name',
+  children: 'Children'
+};
 let treeData: any[] = [];
 
 // 定义基础表单数据
@@ -128,27 +135,57 @@ const loadGroupOptions = async (excludeId?: string) => {
   }
 };
 
+// 根据GroupKey查找Id
+const findIdByGroupKey = (groupKey: string, tree: any[]): string | null => {
+  for (const node of tree) {
+    if (node.GroupKey === groupKey) {
+      return node.Id;
+    }
+    if (node.Children && node.Children.length > 0) {
+      const foundId = findIdByGroupKey(groupKey, node.Children);
+      if (foundId) return foundId;
+    }
+  }
+  return null;
+};
+
 // 打开对话框
-const open = async (row?: any, parentId?: string) => {
+const open = async (row?: any, parentGroupKey?: string) => {
+  // 先重置表单
   resetForm();
   showDialog.value = true;
 
   // 加载分组选项
   await loadGroupOptions(row?.Id);
 
+  // 等待DOM更新
+  await nextTick();
+  
   if (row) {
     // 编辑模式，填充表单数据
-    nextTick(() => {
-      formData.id = row.Id;
-      formData.groupKey = row.GroupKey;
-      formData.name = row.Name;
-      formData.parentId = row.ParentId;
-      formData.sort = row.Sort;
-      formData.description = row.Description;
-    });
-  } else if (parentId) {
+    formData.id = row.Id;
+    formData.groupKey = row.GroupKey;
+    formData.name = row.Name;
+    formData.parentId = row.ParentId;
+    formData.sort = row.Sort;
+    formData.description = row.Description;
+  } else if (parentGroupKey) {
     // 新增子分组模式
-    formData.parentId = parentId;
+    // 先根据GroupKey查找Id
+    const parentId = findIdByGroupKey(parentGroupKey, treeData);
+    
+    if (parentId) {
+      // 使用setTimeout确保在下一个事件循环中设置值
+      setTimeout(() => {
+        // 设置父级分组ID
+        formData.parentId = parentId;
+        
+        // 手动触发表单验证，强制更新显示
+        if (formRef.value) {
+          formRef.value.validateField('parentId');
+        }
+      }, 200);
+    }
   }
 };