style(projects): 💄 adjust form label styles. fixed [#68]

src/plugins/ui.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue';
-import ElementPlus, { ElCard, ElTable } from 'element-plus';
+import ElementPlus, { ElCard, ElForm, ElTable } from 'element-plus';
 
 /** global table column align */
 ElTable.TableColumn.props.align = {
@@ -13,6 +13,12 @@ ElCard.props.shadow = {
   default: 'never'
 };
 
+/** global ElForm require asterisk position */
+ElForm.props.requireAsteriskPosition = {
+  type: String,
+  default: 'right'
+};
+
 /** full import ElementPlus */
 export const setupUI = (app: App) => {
   app.use(ElementPlus);

src/styles/scss/element-plus.scss

@@ -137,6 +137,7 @@ html .el-collapse {
 
 .el-form {
   .el-form-item__label {
+    text-align: right;
     align-items: center;
     line-height: 1.2;
   }

src/views/manage/menu/index.vue

@@ -1,13 +1,13 @@
 <script setup lang="tsx">
 import { ref } from 'vue';
 import type { Ref } from 'vue';
-import { useBoolean } from '@sa/hooks';
 import { ElButton, ElPopconfirm, ElTag } from 'element-plus';
+import { useBoolean } from '@sa/hooks';
+import { yesOrNoRecord } from '@/constants/common';
+import { enableStatusRecord, menuTypeRecord } from '@/constants/business';
 import { fetchGetAllPages, fetchGetMenuList } from '@/service/api';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { $t } from '@/locales';
-import { yesOrNoRecord } from '@/constants/common';
-import { enableStatusRecord, menuTypeRecord } from '@/constants/business';
 import SvgIcon from '@/components/custom/svg-icon.vue';
 import MenuOperateModal, { type OperateType } from './modules/menu-operate-modal.vue';
 
@@ -106,7 +106,7 @@ const { columns, columnChecks, data, loading, pagination, getData, getDataByPage
     {
       prop: 'operate',
       label: $t('common.operate'),
-      width: 230,
+      width: 270,
       formatter: row => (
         <div class="flex-center justify-end pr-10px">
           {row.menuType === '1' && (

src/views/manage/menu/modules/menu-operate-modal.vue

@@ -1,11 +1,11 @@
 <script setup lang="tsx">
 import { computed, ref, watch } from 'vue';
-import { useForm, useFormRules } from '@/hooks/common/form';
-import { $t } from '@/locales';
 import { enableStatusOptions, menuIconTypeOptions, menuTypeOptions } from '@/constants/business';
-import SvgIcon from '@/components/custom/svg-icon.vue';
-import { getLocalIcons } from '@/utils/icon';
 import { fetchGetAllRoles } from '@/service/api';
+import { useForm, useFormRules } from '@/hooks/common/form';
+import { getLocalIcons } from '@/utils/icon';
+import { $t } from '@/locales';
+import SvgIcon from '@/components/custom/svg-icon.vue';
 import {
   getLayoutAndPage,
   getPathParamFromRoutePath,
@@ -285,7 +285,7 @@ watch(
 <template>
   <ElDialog v-model="visible" :title="title" preset="card" class="w-800px">
     <ElScrollbar class="h-480px pr-20px">
-      <ElForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="100">
+      <ElForm ref="formRef" :model="model" :rules="rules" label-position="right" :label-width="100">
         <ElRow>
           <ElCol :span="12">
             <ElFormItem :label="$t('page.manage.menu.menuType')" prop="menuType">