From 585a57632740b4a3d59c1835dae8db3a4497b7b0 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Thu, 24 Nov 2022 17:05:24 +0800
Subject: [PATCH] perf: style

---
 .../src/components/Icon/src/IconSelect.vue    |   2 +-
 .../src/views/system/menu/index.vue           | 227 ++++++++----------
 2 files changed, 99 insertions(+), 130 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/components/Icon/src/IconSelect.vue b/yudao-ui-admin-vue3/src/components/Icon/src/IconSelect.vue
index 740088e75..6b62ceb76 100644
--- a/yudao-ui-admin-vue3/src/components/Icon/src/IconSelect.vue
+++ b/yudao-ui-admin-vue3/src/components/Icon/src/IconSelect.vue
@@ -168,7 +168,7 @@ watch(
 
           <ElPagination
             small
-            :total="copyIconList[currentActiveType].length"
+            :total="copyIconList[currentActiveType].length as unknown as number"
             :page-size="pageSize"
             :current-page="currentPage"
             background
diff --git a/yudao-ui-admin-vue3/src/views/system/menu/index.vue b/yudao-ui-admin-vue3/src/views/system/menu/index.vue
index 16e9d3ffb..8d756f5a9 100644
--- a/yudao-ui-admin-vue3/src/views/system/menu/index.vue
+++ b/yudao-ui-admin-vue3/src/views/system/menu/index.vue
@@ -98,134 +98,104 @@
   <!-- 添加或修改菜单对话框 -->
   <XModal id="menuModel" v-model="dialogVisible" :title="dialogTitle">
     <!-- 对话框(添加 / 修改) -->
-    <el-form
-      ref="formRef"
-      :model="menuForm"
-      :rules="rules"
-      :inline="true"
-      label-width="120px"
-      label-position="right"
-    >
-      <el-row :gutter="24">
-        <el-col :span="24">
-          <el-form-item label="上级菜单">
-            <el-tree-select
-              node-key="id"
-              v-model="menuForm.parentId"
-              :props="menuProps"
-              :data="menuOptions"
-              :default-expanded-keys="[0]"
-              check-strictly
+    <el-form ref="formRef" :model="menuForm" :rules="rules" label-width="auto" label-position="top">
+      <el-form-item label="上级菜单">
+        <el-tree-select
+          node-key="id"
+          v-model="menuForm.parentId"
+          :props="menuProps"
+          :data="menuOptions"
+          :default-expanded-keys="[0]"
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="菜单名称" prop="name" span="12">
+        <el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable />
+      </el-form-item>
+      <el-form-item label="菜单类型" prop="type">
+        <el-radio-group v-model="menuForm.type">
+          <el-radio-button
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <template v-if="menuForm.type !== 3">
+        <el-form-item label="菜单图标">
+          <IconSelect v-model="menuForm.icon" clearable />
+        </el-form-item>
+        <el-form-item label="路由地址" prop="path">
+          <template #label>
+            <Tooltip
+              titel="路由地址"
+              message="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
             />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="菜单类型" prop="type">
-            <el-radio-group v-model="menuForm.type">
-              <el-radio-button
-                v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
-                :key="dict.value"
-                :label="dict.value"
-              >
-                {{ dict.label }}
-              </el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="菜单名称" prop="name">
-            <el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable />
-          </el-form-item>
-        </el-col>
-        <template v-if="menuForm.type !== 3">
-          <el-col :span="12">
-            <el-form-item label="菜单图标">
-              <IconSelect v-model="menuForm.icon" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="路由地址" prop="path">
-              <template #label>
-                <Tooltip
-                  titel="路由地址"
-                  message="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
-                />
-              </template>
-              <el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable />
-            </el-form-item>
-          </el-col>
-        </template>
-        <template v-if="menuForm.type === 2">
-          <el-col :span="12">
-            <el-form-item label="路由地址" prop="component">
-              <el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable />
-            </el-form-item>
-          </el-col>
-        </template>
-        <template v-if="menuForm.type !== 1">
-          <el-col :span="12">
-            <el-form-item label="权限标识" prop="permission">
-              <template #label>
-                <Tooltip
-                  titel="权限标识"
-                  message="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
-                />
-              </template>
-              <el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable />
-            </el-form-item>
-          </el-col>
-        </template>
-        <el-col :span="12">
-          <el-form-item label="显示排序" prop="sort">
-            <el-input-number v-model="menuForm.sort" controls-position="right" :min="0" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="菜单状态" prop="status">
-            <el-radio-group v-model="menuForm.status">
-              <el-radio-button
-                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
-                :key="dict.value"
-                :label="dict.value"
-              >
-                {{ dict.label }}
-              </el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <template v-if="menuForm.type !== 3">
-          <el-col :span="12">
-            <el-form-item label="显示状态" prop="status">
-              <template #label>
-                <Tooltip
-                  titel="显示状态"
-                  message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"
-                />
-              </template>
-              <el-radio-group v-model="menuForm.visible">
-                <el-radio-button key="true" :label="true">显示</el-radio-button>
-                <el-radio-button key="false" :label="false">隐藏</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </template>
-        <template v-if="menuForm.type === 2">
-          <el-col :span="12">
-            <el-form-item label="缓存状态" prop="keepAlive">
-              <template #label>
-                <Tooltip
-                  titel="缓存状态"
-                  message="选择缓存时，则会被 `keep-alive` 缓存，需要匹配组件的 `name` 和路由地址保持一致"
-                />
-              </template>
-              <el-radio-group v-model="menuForm.keepAlive">
-                <el-radio-button key="true" :label="true">缓存</el-radio-button>
-                <el-radio-button key="false" :label="false">不缓存</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </template>
-      </el-row>
+          </template>
+          <el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable />
+        </el-form-item>
+      </template>
+      <template v-if="menuForm.type === 2">
+        <el-form-item label="路由地址" prop="component">
+          <el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable />
+        </el-form-item>
+      </template>
+      <template v-if="menuForm.type !== 1">
+        <el-form-item label="权限标识" prop="permission">
+          <template #label>
+            <Tooltip
+              titel="权限标识"
+              message="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
+            />
+          </template>
+          <el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable />
+        </el-form-item>
+      </template>
+      <el-form-item label="显示排序" prop="sort">
+        <el-input-number v-model="menuForm.sort" controls-position="right" :min="0" clearable />
+      </el-form-item>
+      <el-form-item label="菜单状态" prop="status">
+        <el-radio-group v-model="menuForm.status">
+          <el-radio
+            border
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <template v-if="menuForm.type !== 3">
+        <el-form-item label="显示状态" prop="status">
+          <template #label>
+            <Tooltip
+              titel="显示状态"
+              message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"
+            />
+          </template>
+          <el-radio-group v-model="menuForm.visible">
+            <el-radio border key="true" :label="true">显示</el-radio>
+            <el-radio border key="false" :label="false">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </template>
+      <template v-if="menuForm.type === 2">
+        <el-form-item label="缓存状态" prop="keepAlive">
+          <template #label>
+            <Tooltip
+              titel="缓存状态"
+              message="选择缓存时，则会被 `keep-alive` 缓存，需要匹配组件的 `name` 和路由地址保持一致"
+            />
+          </template>
+          <el-radio-group v-model="menuForm.keepAlive">
+            <el-radio border key="true" :label="true">缓存</el-radio>
+            <el-radio border key="false" :label="false">不缓存</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </template>
     </el-form>
     <template #footer>
       <!-- 按钮：保存 -->
@@ -247,8 +217,6 @@ import { onMounted, reactive, ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import {
-  ElRow,
-  ElCol,
   ElForm,
   ElFormItem,
   ElInput,
@@ -256,6 +224,7 @@ import {
   ElSelect,
   ElTreeSelect,
   ElOption,
+  ElRadio,
   ElRadioGroup,
   ElRadioButton,
   FormInstance