faet: 优化 api 列表页面

src/views/apihub/apilist.vue

@@ -46,110 +46,108 @@
       </div>
 
       <!-- 右侧API列表 -->
-      <div class="apihub-content">
-        <el-card shadow="never">
-          <div class="api-header">
-            <div class="current-group" v-if="currentGroup.name">
-              当前分组: <span class="group-name">{{ currentGroup.name }}</span>
-            </div>
-            <div class="current-group" v-else>全部API</div>
+      <el-card shadow="never">
+        <div class="api-header">
+          <div class="current-group" v-if="currentGroup.Name">
+            当前分组: <span class="group-name">{{ currentGroup.Name }}</span>
           </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: 180px" @keyup.enter.native="getList(1)" />
-            </el-form-item>
-            <el-form-item label="数据源" prop="dataSourceId">
-              <el-select v-model="params.dataSourceId" placeholder="请选择数据源" clearable style="width: 180px">
-                <el-option v-for="item in dataSources" :key="item.id" :label="item.name" :value="item.id" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="状态" prop="status">
-              <el-select v-model="params.status" placeholder="请选择状态" clearable style="width: 120px">
-                <el-option label="全部" value="" />
-                <el-option label="草稿" value="Draft" />
-                <el-option label="已发布" value="Published" />
-                <el-option label="已废弃" value="Deprecated" />
-              </el-select>
-            </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" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" class="ml10" @click="getList(1)">
-                <el-icon>
-                  <ele-Search />
-                </el-icon>
-                查询
-              </el-button>
-              <el-button @click="resetQuery()">
-                <el-icon>
-                  <ele-Refresh />
-                </el-icon>
-                重置
-              </el-button>
-              <el-button type="primary" @click="addOrEdit()" v-auth="'add'">
-                <el-icon>
-                  <ele-FolderAdd />
-                </el-icon>
-                新增API
-              </el-button>
-            </el-form-item>
-          </el-form>
-          <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id">
-            <el-table-column type="selection" width="55" align="center" />
-            <el-table-column prop="id" label="ID" width="80" align="center" />
-            <el-table-column prop="name" label="API名称" min-width="120" show-overflow-tooltip></el-table-column>
-            <el-table-column prop="path" label="API路径" min-width="150" show-overflow-tooltip></el-table-column>
-            <el-table-column prop="method" label="请求方法" width="100" align="center">
-              <template #default="scope">
-                <el-tag :type="getMethodTagType(scope.row.method)" size="small">
-                  {{ scope.row.method }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column prop="dataSourceName" label="数据源" width="120" show-overflow-tooltip></el-table-column>
-            <el-table-column prop="sqlType" label="SQL类型" width="100" align="center">
-              <template #default="scope">
-                <el-tag size="small" type="info" v-if="scope.row.sqlType === 'query'">查询</el-tag>
-                <el-tag size="small" type="warning" v-else-if="scope.row.sqlType === 'procedure'">存储过程</el-tag>
-                <span v-else>{{ scope.row.sqlType }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="version" label="版本" width="80" align="center"></el-table-column>
-            <el-table-column prop="status" label="状态" width="100" align="center">
-              <template #default="scope">
-                <el-tag size="small" v-if="scope.row.status === 'Draft'">草稿</el-tag>
-                <el-tag size="small" type="success" v-else-if="scope.row.status === 'Published'">已发布</el-tag>
-                <el-tag size="small" type="info" v-else-if="scope.row.status === 'Deprecated'">已废弃</el-tag>
-                <span v-else>{{ scope.row.status }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="createdAt" label="创建时间" width="160" align="center"></el-table-column>
-            <el-table-column label="操作" width="190" align="center" fixed="right">
-              <template #default="scope">
-                <div class="flex-row">
-                  <el-button size="small" text type="primary" @click="viewDetail(scope.row)" v-auth="'view'">查看</el-button>
-                  <el-button size="small" text type="warning" @click="addOrEdit(scope.row)" v-auth="'edit'">编辑</el-button>
-                  <el-button size="small" text type="success" @click="testApi(scope.row)" v-auth="'test'">测试</el-button>
-                  <el-dropdown @command="(command: string) => handleCommand(command, scope.row)">
-                    <el-button size="small" text type="primary" style="margin-left: 12px; vertical-align: top">
-                      更多<el-icon class="el-icon--right" style="font-size: 12px !important"><arrow-down /></el-icon>
-                    </el-button>
-                    <template #dropdown>
-                      <el-dropdown-menu>
-                        <el-dropdown-item command="publish" v-if="scope.row.status === 'Draft'" v-auth="'publish'">发布</el-dropdown-item>
-                        <el-dropdown-item command="deprecate" v-if="scope.row.status === 'Published'" v-auth="'deprecate'">废弃</el-dropdown-item>
-                        <el-dropdown-item command="delete" v-auth="'delete'">删除</el-dropdown-item>
-                      </el-dropdown-menu>
-                    </template>
-                  </el-dropdown>
-                </div>
-              </template>
-            </el-table-column>
-          </el-table>
-          <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
-        </el-card>
-      </div>
+          <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: 180px" @keyup.enter.native="getList(1)" />
+          </el-form-item>
+          <el-form-item label="数据源" prop="dataSourceId">
+            <el-select v-model="params.dataSourceId" placeholder="请选择数据源" clearable style="width: 180px">
+              <el-option v-for="item in dataSources" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="params.status" placeholder="请选择状态" clearable style="width: 120px">
+              <el-option label="全部" value="" />
+              <el-option label="草稿" value="Draft" />
+              <el-option label="已发布" value="Published" />
+              <el-option label="已废弃" value="Deprecated" />
+            </el-select>
+          </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" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" class="ml10" @click="getList(1)">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button @click="resetQuery()">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button type="primary" @click="addOrEdit()" v-auth="'add'">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增API
+            </el-button>
+          </el-form-item>
+        </el-form>
+        <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column prop="id" label="ID" width="80" align="center" />
+          <el-table-column prop="name" label="API名称" min-width="120" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="path" label="API路径" min-width="150" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="method" label="请求方法" width="100" align="center">
+            <template #default="scope">
+              <el-tag :type="getMethodTagType(scope.row.method)" size="small">
+                {{ scope.row.method }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="dataSourceName" label="数据源" width="120" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="sqlType" label="SQL类型" width="100" align="center">
+            <template #default="scope">
+              <el-tag size="small" type="info" v-if="scope.row.sqlType === 'query'">查询</el-tag>
+              <el-tag size="small" type="warning" v-else-if="scope.row.sqlType === 'procedure'">存储过程</el-tag>
+              <span v-else>{{ scope.row.sqlType }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="version" label="版本" width="80" align="center"></el-table-column>
+          <el-table-column prop="status" label="状态" width="100" align="center">
+            <template #default="scope">
+              <el-tag size="small" v-if="scope.row.status === 'Draft'">草稿</el-tag>
+              <el-tag size="small" type="success" v-else-if="scope.row.status === 'Published'">已发布</el-tag>
+              <el-tag size="small" type="info" v-else-if="scope.row.status === 'Deprecated'">已废弃</el-tag>
+              <span v-else>{{ scope.row.status }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createdAt" label="创建时间" width="160" align="center"></el-table-column>
+          <el-table-column label="操作" width="190" align="center" fixed="right">
+            <template #default="scope">
+              <div class="flex-row">
+                <el-button size="small" text type="primary" @click="viewDetail(scope.row)" v-auth="'view'">查看</el-button>
+                <el-button size="small" text type="warning" @click="addOrEdit(scope.row)" v-auth="'edit'">编辑</el-button>
+                <el-button size="small" text type="success" @click="testApi(scope.row)" v-auth="'test'">测试</el-button>
+                <el-dropdown @command="(command: string) => handleCommand(command, scope.row)">
+                  <el-button size="small" text type="primary" style="margin-left: 12px; vertical-align: top">
+                    更多<el-icon class="el-icon--right" style="font-size: 12px !important"><arrow-down /></el-icon>
+                  </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="publish" v-if="scope.row.status === 'Draft'" v-auth="'publish'">发布</el-dropdown-item>
+                      <el-dropdown-item command="deprecate" v-if="scope.row.status === 'Published'" v-auth="'deprecate'">废弃</el-dropdown-item>
+                      <el-dropdown-item command="delete" v-auth="'delete'">删除</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
+      </el-card>
     </div>
 
     <!-- 组件 -->
@@ -522,18 +520,22 @@ const deleteApi = (row: ApiDefinition) => {
 
 .apihub-container {
   display: flex;
-  height: calc(100vh - 160px);
+  height: 100%;
+  align-items: stretch;
 }
 
 .apihub-sidebar {
   width: 280px;
+  min-width: 280px;
   margin-right: 16px;
-  overflow: hidden;
+  overflow-y: auto;
+  height: 100%;
 }
 
 .apihub-content {
   flex: 1;
-  overflow: hidden;
+  overflow-y: auto;
+  height: 100%;
 }
 
 .group-card {