style: 菜单页面排版

src/views/system/menu/index.vue

@@ -97,49 +97,58 @@ let tableColumns: ColumnsType = [
     title: t('views.system.menu.menuName'),
     dataIndex: 'menuName',
     align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.menu.menuId'),
     dataIndex: 'menuId',
-    align: 'center',
+    align: 'left',
+    width: 120,
   },
   {
     title: t('views.system.menu.menuSort'),
     dataIndex: 'menuSort',
-    align: 'center',
+    align: 'left',
+    width: 100,
   },
   {
     title: t('views.system.menu.menuTitle'),
     dataIndex: 'icon',
     key: 'icon',
     align: 'center',
+    width: 100,
   },
   {
     title: t('views.system.menu.perId'),
     dataIndex: 'perms',
     align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.menu.formLoc'),
     dataIndex: 'component',
     align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.menu.status'),
     dataIndex: 'visible',
     key: 'visible',
     align: 'center',
+    width: 120,
   },
   {
     title: t('views.system.menu.menuStatus'),
     dataIndex: 'status',
     key: 'status',
     align: 'center',
+    width: 120,
   },
   {
     title: t('views.system.menu.createTime'),
     dataIndex: 'createTime',
     align: 'center',
+    width: 150,
     customRender(opt) {
       if (+opt.value <= 0) return '';
       return parseDateToStr(+opt.value);
@@ -148,7 +157,7 @@ let tableColumns: ColumnsType = [
   {
     title: t('common.operate'),
     key: 'menuId',
-    align: 'center',
+    align: 'left',
   },
 ];
 
@@ -419,7 +428,7 @@ function fnModalCancel() {
 function fnRecordDelete(menuId: string | number) {
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.system.menu.menuInfo', { menuId }),
+    content: t('views.system.menu.delSure', { menuId }),
     onOk() {
       const key = 'delMenu';
       message.loading({ content: t('common.loading'), key });
@@ -634,7 +643,7 @@ onMounted(() => {
         :size="tableState.size"
         :row-class-name="fnTableStriped"
         :pagination="false"
-        :scroll="{ x: true }"
+        :scroll="{ x: tableColumns.length * 150 }"
         children-column-name="children"
         :expanded-row-keys="tableState.expandedRowKeys"
         @expandedRowsChange="fnTableExpandedRowsChange"
@@ -719,34 +728,42 @@ onMounted(() => {
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
-      <a-form layout="horizontal">
+      <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
+        <a-form-item
+          :label="t('views.system.menu.highMenu')"
+          name="parentId"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
+          <a-tree-select
+            :value="modalState.from.parentId"
+            disabled
+            :tree-data="modalState.treeData"
+            :field-names="{
+              children: 'children',
+              label: 'menuName',
+              value: 'menuId',
+            }"
+            tree-node-label-prop="menuName"
+          >
+            <template #suffixIcon></template>
+          </a-tree-select>
+        </a-form-item>
+        <a-form-item
+          :label="t('views.system.menu.menuName')"
+          name="menuName"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
+          {{ modalState.from.menuName }}
+        </a-form-item>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.system.menu.highMenu')"
-              name="parentId"
-            >
-              <a-tree-select
-                :value="modalState.from.parentId"
-                disabled
-                :tree-data="modalState.treeData"
-                :field-names="{
-                  children: 'children',
-                  label: 'menuName',
-                  value: 'menuId',
-                }"
-                tree-node-label-prop="menuName"
-              >
-                <template #suffixIcon></template>
-              </a-tree-select>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
             <a-form-item :label="t('views.system.menu.menuId')" name="menuId">
               {{ modalState.from.menuId }}
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.menu.menuSort')"
               name="menuSort"
@@ -757,14 +774,6 @@ onMounted(() => {
         </a-row>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.system.menu.menuName')"
-              name="menuName"
-            >
-              {{ modalState.from.menuName }}
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
             <a-form-item
               :label="t('views.system.menu.menuType')"
               name="menuType"
@@ -789,7 +798,7 @@ onMounted(() => {
               </a-tag>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.menu.menuTitle')" name="icon">
               <IconFont
                 :type="modalState.from.icon || '#'"
@@ -829,7 +838,7 @@ onMounted(() => {
           :gutter="16"
           v-if="modalState.from.menuType !== MENU_TYPE_BUTTON"
         >
-          <a-col :lg="6" :md="6" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.menu.local')" name="isFrame">
               <a-tag color="default">
                 {{
@@ -840,7 +849,7 @@ onMounted(() => {
               </a-tag>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.menu.pageCache')"
               name="isCache"
@@ -855,7 +864,7 @@ onMounted(() => {
               </a-tag>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.menu.status')" name="visible">
               <a-tag color="default">
                 {{
@@ -866,7 +875,7 @@ onMounted(() => {
               </a-tag>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.menu.menuStatus')"
               name="status"
@@ -882,12 +891,19 @@ onMounted(() => {
         <a-form-item
           :label="t('views.system.menu.perId')"
           name="perms"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
           v-if="modalState.from.menuType !== MENU_TYPE_DIR"
         >
           {{ modalState.from.perms }}
         </a-form-item>
 
-        <a-form-item :label="t('views.system.menu.mark')" name="remark">
+        <a-form-item
+          :label="t('views.system.menu.mark')"
+          name="remark"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
           {{ modalState.from.remark }}
         </a-form-item>
       </a-form>
@@ -909,11 +925,18 @@ onMounted(() => {
       @ok="fnModalOk"
       @cancel="fnModalCancel"
     >
-      <a-form name="modalStateFrom" layout="horizontal">
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :label-wrap="true"
+      >
         <a-form-item
           :label="t('views.system.menu.highMenu')"
           name="parentId"
           v-bind="modalStateFrom.validateInfos.parentId"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
         >
           <a-tree-select
             v-model:value="modalState.from.parentId"
@@ -962,7 +985,12 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-form-item :label="t('views.system.menu.menuType')" name="menuType">
+        <a-form-item
+          :label="t('views.system.menu.menuType')"
+          name="menuType"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
           <a-radio-group v-model:value="modalState.from.menuType">
             <a-radio
               :key="MENU_TYPE_DIR"
@@ -1105,6 +1133,8 @@ onMounted(() => {
           :label="t('views.system.menu.formLoc')"
           name="component"
           v-bind="modalStateFrom.validateInfos.component"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
           v-if="modalState.from.menuType === MENU_TYPE_MENU"
         >
           <a-input v-model:value="modalState.from.component" allow-clear>
@@ -1126,6 +1156,8 @@ onMounted(() => {
           name="perms"
           v-if="modalState.from.menuType !== MENU_TYPE_DIR"
           v-bind="modalStateFrom.validateInfos.perms"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
         >
           <a-input v-model:value="modalState.from.perms" allow-clear>
             <template #prefix>
@@ -1141,7 +1173,12 @@ onMounted(() => {
           </a-input>
         </a-form-item>
 
-        <a-form-item :label="t('views.system.menu.mark')" name="remark">
+        <a-form-item
+          :label="t('views.system.menu.mark')"
+          name="remark"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
           <a-textarea
             v-model:value="modalState.from.remark"
             :auto-size="{ minRows: 4, maxRows: 6 }"