feat✨ 菜单模块功能调整

src/views/admin/sys-menu/index.vue

@@ -106,10 +106,16 @@
           size="830px"
         >
           <div class="demo-drawer__content">
-            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+            <el-form ref="form" :model="form" :rules="rules" label-width="106px">
               <el-row>
                 <el-col :span="24">
-                  <el-form-item label="上级菜单">
+                  <el-form-item prop="parentId">
+                    <span slot="label">
+                      上级菜单
+                      <el-tooltip content="指当前菜单停靠的菜单归属" placement="top">
+                        <i class="el-icon-question" />
+                      </el-tooltip>
+                    </span>
                     <treeselect
                       v-model="form.parentId"
                       :options="menuOptions"
@@ -120,18 +126,36 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item label="菜单标题" prop="title">
+                  <el-form-item prop="title">
+                    <span slot="label">
+                      菜单标题
+                      <el-tooltip content="菜单位置显示的说明信息" placement="top">
+                        <i class="el-icon-question" />
+                      </el-tooltip>
+                    </span>
                     <el-input v-model="form.title" placeholder="请输入菜单标题" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item label="显示排序" prop="sort">
+                  <el-form-item prop="sort">
+                    <span slot="label">
+                      显示排序
+                      <el-tooltip content="根据序号升序排列" placement="top">
+                        <i class="el-icon-question" />
+                      </el-tooltip>
+                    </span>
                     <el-input-number v-model="form.sort" controls-position="right" :min="0" />
                   </el-form-item>
                 </el-col>
 
                 <el-col :span="24">
-                  <el-form-item label="菜单类型" prop="menuType">
+                  <el-form-item prop="menuType">
+                    <span slot="label">
+                      菜单类型
+                      <el-tooltip content="包含目录：以及菜单或者菜单组，菜单：具体对应某一个页面，按钮：功能才做按钮；" placement="top">
+                        <i class="el-icon-question" />
+                      </el-tooltip>
+                    </span>
                     <el-radio-group v-model="form.menuType">
                       <el-radio label="M">目录</el-radio>
                       <el-radio label="C">菜单</el-radio>
@@ -162,19 +186,37 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'" label="路由名称" prop="menuName">
+                  <el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'" prop="menuName">
+                    <span slot="label">
+                      路由名称
+                      <el-tooltip content="需要和页面name保持一致，对应页面即可选择缓存" placement="top">
+                        <i class="el-icon-question" />
+                      </el-tooltip>
+                    </span>
                     <el-input v-model="form.menuName" placeholder="请输入路由名称" />
                   </el-form-item>
                 </el-col>
 
                 <el-col v-if="form.menuType == 'M' || form.menuType == 'C'" :span="12">
-                  <el-form-item label="组件路径" prop="component">
+                  <el-form-item prop="component">
+                    <span slot="label">
+                      组件路径
+                      <el-tooltip content="菜单对应的具体vue页面文件路径views的下级路径/admin/sys-api/index；目录类型：填写Layout，如何有二级目录请参照日志目录填写；" placement="top">
+                        <i class="el-icon-question" />
+                      </el-tooltip>
+                    </span>
                     <el-input v-model="form.component" placeholder="请输入组件路径" />
                   </el-form-item>
                 </el-col>
 
                 <el-col :span="12">
-                  <el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'" label="是否外链">
+                  <el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'">
+                    <span slot="label">
+                      是否外链
+                      <el-tooltip content="可以通过iframe打开指定地址" placement="top">
+                        <i class="el-icon-question" />
+                      </el-tooltip>
+                    </span>
                     <el-radio-group v-model="form.isFrame">
                       <el-radio label="0">是</el-radio>
                       <el-radio label="1">否</el-radio>
@@ -183,18 +225,36 @@
                 </el-col>
 
                 <el-col :span="12">
-                  <el-form-item v-if="form.menuType != 'F'" label="路由地址" prop="path">
+                  <el-form-item v-if="form.menuType != 'F'" prop="path">
+                    <span slot="label">
+                      路由地址
+                      <el-tooltip content="访问此页面自定义的url地址，建议/开头书写，例如 /app-name/menu-name" placement="top">
+                        <i class="el-icon-question" />
+                      </el-tooltip>
+                    </span>
                     <el-input v-model="form.path" placeholder="请输入路由地址" />
                   </el-form-item>
                 </el-col>
 
                 <el-col :span="12">
-                  <el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'" label="权限标识">
+                  <el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'">
+                    <span slot="label">
+                      权限标识
+                      <el-tooltip content="前端权限控制按钮是否显示" placement="top">
+                        <i class="el-icon-question" />
+                      </el-tooltip>
+                    </span>
                     <el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item v-if="form.menuType != 'F'" label="菜单状态">
+                  <el-form-item v-if="form.menuType != 'F'">
+                    <span slot="label">
+                      菜单状态
+                      <el-tooltip content="需要显示在菜单列表的菜单设置为显示，否则设置为隐藏" placement="top">
+                        <i class="el-icon-question" />
+                      </el-tooltip>
+                    </span>
                     <el-radio-group v-model="form.visible">
                       <el-radio
                         v-for="dict in visibleOptions"
@@ -205,7 +265,13 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="24">
-                  <el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'" label="api权限">
+                  <el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'">
+                    <span slot="label">
+                      api权限
+                      <el-tooltip content="配置在这个才做上需要使用到的接口，否则在设置用户角色时，接口将无权访问。" placement="top">
+                        <i class="el-icon-question" />
+                      </el-tooltip>
+                    </span>
                     <el-transfer
                       v-model="form.apis"
                       style="text-align: left; display: inline-block"