feat:优化APIHUB功能页面

src/views/apihub/apilist.vue

@@ -55,16 +55,16 @@
           <div class="current-group" v-else>全部API</div>
         </div>
         <el-form :model="params" inline ref="queryRef">
-          <el-form-item label="API名称" prop="keyWord">
-            <el-input v-model="params.keyWord" placeholder="请输入API名称" clearable style="width: 150px" @keyup.enter.native="getList(1)" />
+          <el-form-item label="关键字" prop="keyWord">
+            <el-input v-model="params.keyWord" placeholder="输入名称、路径或描述" clearable style="width: 170px" @keyup.enter.native="getList(1)" />
           </el-form-item>
           <el-form-item label="数据源" prop="dataSourceKey">
-            <el-select v-model="params.dataSourceKey" placeholder="请选择数据源" clearable style="width: 180px">
+            <el-select v-model="params.dataSourceKey" placeholder="请选择数据源" clearable style="width: 170px">
               <el-option v-for="item in dataSources" :key="item.dsKey" :label="item.name" :value="item.dsKey" />
             </el-select>
           </el-form-item>
           <el-form-item label="状态" prop="status">
-            <el-select v-model="params.status" placeholder="请选择状态" clearable style="width: 80px">
+            <el-select v-model="params.status" placeholder="请选择状态" clearable style="width: 90px">
               <el-option label="全部" value="" />
               <el-option label="草稿" value="Draft" />
               <el-option label="已发布" value="Published" />

src/views/apihub/datasource.vue

@@ -3,8 +3,8 @@
     <el-card shadow="never">
       <!-- 搜索表单 -->
       <el-form :model="params" inline ref="queryRef">
-        <el-form-item label="数据源名称" prop="keyWord">
-          <el-input v-model="params.keyWord" placeholder="请输入数据源名称" clearable style="width: 200px" @keyup.enter.native="getList(1)" />
+        <el-form-item label="关键字" prop="keyWord">
+          <el-input v-model="params.keyWord" placeholder="输入名称或备注" clearable style="width: 200px" @keyup.enter.native="getList(1)" />
         </el-form-item>
         <!--        <el-form-item label="日期范围" prop="dateRange">-->
         <!--          <el-date-picker v-model="params.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 240px" />-->
@@ -50,36 +50,54 @@
 
     <!-- 数据源表单对话框 -->
     <el-dialog v-model="dialogVisible" :title="formData.id ? '编辑数据源' : '新增数据源'" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
-      <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
+      <el-form ref="formRef" :model="formData" :rules="rules" label-width="125px">
         <el-form-item label="数据源名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入数据源名称" />
         </el-form-item>
-        <el-form-item label="数据库类型" prop="type">
-          <el-select v-model="formData.type" placeholder="请选择数据库类型" style="width: 100%">
-            <template v-if="database_type.length">
-              <el-option v-for="item in database_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            </template>
-            <template v-else>
-              <el-option label="MySQL" value="mysql" />
-            </template>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="主机地址" prop="host">
-          <el-input v-model="formData.host" placeholder="请输入主机地址" />
-        </el-form-item>
-        <el-form-item label="端口" prop="port">
-          <el-input-number v-model="formData.port" :min="1" :max="65535" style="width: 100%" />
-        </el-form-item>
-        <el-form-item label="用户名" prop="username">
-          <el-input v-model="formData.username" placeholder="请输入用户名" />
-        </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input v-model="formData.password" type="password" placeholder="请输入密码" show-password />
-          <div class="form-tip" v-if="formData.id">不修改请留空</div>
-        </el-form-item>
-        <el-form-item label="数据库名" prop="database">
-          <el-input v-model="formData.database" placeholder="请输入数据库名" />
-        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="数据库类型" prop="type">
+              <el-select v-model="formData.type" placeholder="请选择数据库类型" style="width: 100%">
+                <template v-if="database_type.length">
+                  <el-option v-for="item in database_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </template>
+                <template v-else>
+                  <el-option label="MySQL" value="mysql" />
+                </template>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="数据库名" prop="database">
+              <el-input v-model="formData.database" placeholder="请输入数据库名" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="主机地址" prop="host">
+              <el-input v-model="formData.host" placeholder="请输入主机地址" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="端口" prop="port">
+              <el-input-number v-model="formData.port" :min="1" :max="65535" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="用户名" prop="username">
+              <el-input v-model="formData.username" placeholder="请输入用户名" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="密码" prop="password">
+              <el-input v-model="formData.password" type="password" placeholder="请输入密码" show-password />
+              <div class="form-tip" v-if="formData.id">不修改请留空</div>
+            </el-form-item>
+          </el-col>
+        </el-row>
         <el-form-item label="最大打开连接数" prop="maxOpenConns">
           <el-input-number v-model="formData.maxOpenConns" :min="1" style="width: 100%" />
         </el-form-item>
@@ -104,30 +122,48 @@
     </el-dialog>
 
     <!-- 测试连接对话框 -->
-    <el-dialog v-model="testDialogVisible" title="测试数据源连接" width="500px">
-      <el-form ref="testFormRef" :model="testFormData" :rules="testRules" label-width="120px">
-        <el-form-item label="数据库类型" prop="type">
-          <el-select v-model="testFormData.type" placeholder="请选择数据库类型" style="width: 100%">
-            <el-option label="MySQL" value="MySQL" />
-            <el-option label="PostgreSQL" value="PostgreSQL" />
-            <el-option label="SQL Server" value="SQL Server" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="主机地址" prop="host">
-          <el-input v-model="testFormData.host" placeholder="请输入主机地址" />
-        </el-form-item>
-        <el-form-item label="端口" prop="port">
-          <el-input-number v-model="testFormData.port" :min="1" :max="65535" style="width: 100%" />
-        </el-form-item>
-        <el-form-item label="用户名" prop="username">
-          <el-input v-model="testFormData.username" placeholder="请输入用户名" />
-        </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input v-model="testFormData.password" type="password" placeholder="请输入密码" show-password />
-        </el-form-item>
-        <el-form-item label="数据库名" prop="database">
-          <el-input v-model="testFormData.database" placeholder="请输入数据库名" />
-        </el-form-item>
+    <el-dialog v-model="testDialogVisible" title="测试数据源连接" width="600px">
+      <el-form ref="testFormRef" :model="testFormData" :rules="testRules" label-width="125px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="数据库类型" prop="type">
+              <el-select v-model="testFormData.type" placeholder="请选择数据库类型" style="width: 100%">
+                <el-option label="MySQL" value="MySQL" />
+                <el-option label="PostgreSQL" value="PostgreSQL" />
+                <el-option label="SQL Server" value="SQL Server" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="数据库名" prop="database">
+              <el-input v-model="testFormData.database" placeholder="请输入数据库名" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="主机地址" prop="host">
+              <el-input v-model="testFormData.host" placeholder="请输入主机地址" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="端口" prop="port">
+              <el-input-number v-model="testFormData.port" :min="1" :max="65535" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="用户名" prop="username">
+              <el-input v-model="testFormData.username" placeholder="请输入用户名" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="密码" prop="password">
+              <el-input v-model="testFormData.password" type="password" placeholder="请输入密码" show-password />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <template #footer>
         <div class="dialog-footer">