refactor: 菜单列表优化

Former-commit-id: f5a697443ddcf5ef0a5c90416eb7e9267875e66d

README.md

@@ -121,7 +121,7 @@
 1. 访问后端项目仓库地址：https://gitee.com/youlaiorg/youlai-boot.git
 
 2. 根据项目说明文档 [README.md](https://gitee.com/youlaiorg/youlai-boot#%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C) 的描述完成数据库的创建和后端工程的启动；
-3. 进入 [vite.config.ts](vite.config.ts) 文件修改代理线上接口地址地址 http://sapi.youlai.tech 为本地接口地址 http://localhost:8989 即可。
+3. 进入 [vite.config.ts](vite.config.ts) 文件修改代理线上接口地址 http://sapi.youlai.tech 为本地接口地址 http://localhost:8989 即可。
 
 
 

src/types/api/menu.d.ts

@@ -2,7 +2,7 @@
  * 菜单查询参数类型声明
  */
 export interface MenuQueryParam {
-  name: string;
+  keywords?: string;
 }
 
 /**

src/views/system/menu/index.vue

@@ -1,16 +1,10 @@
 <template>
   <div class="app-container">
-    <!-- 搜索表单 -->
+    <div class="search">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
-        >
-      </el-form-item>
-
-      <el-form-item prop="name">
+        <el-form-item label="关键字" prop="keywords">
           <el-input
-          v-model="queryParams.name"
+            v-model="queryParams.keywords"
             placeholder="菜单名称"
             clearable
             @keyup.enter="handleQuery"
@@ -23,8 +17,16 @@
           <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>
+    </div>
 
     <!-- 数据表格 -->
+    <el-card>
+      <template #header>
+        <el-button type="success" :icon="Plus" @click="handleAdd"
+          >新增</el-button
+        >
+      </template>
+
       <el-table
         v-loading="loading"
         :data="menuList"
@@ -51,9 +53,15 @@
             <el-tag v-if="scope.row.type === 'CATALOG'" type="warning"
               >目录</el-tag
             >
-          <el-tag v-if="scope.row.type === 'MENU'" type="success">菜单</el-tag>
-          <el-tag v-if="scope.row.type === 'BUTTON'" type="danger">按钮</el-tag>
-          <el-tag v-if="scope.row.type === 'EXTLINK'" type="info">外链</el-tag>
+            <el-tag v-if="scope.row.type === 'MENU'" type="success"
+              >菜单</el-tag
+            >
+            <el-tag v-if="scope.row.type === 'BUTTON'" type="danger"
+              >按钮</el-tag
+            >
+            <el-tag v-if="scope.row.type === 'EXTLINK'" type="info"
+              >外链</el-tag
+            >
           </template>
         </el-table-column>
         <el-table-column
@@ -114,7 +122,7 @@
           </template>
         </el-table-column>
       </el-table>
-
+    </el-card>
     <!-- dialog -->
     <el-dialog
       :title="dialog.title"