♻️优化 element-plus 全局 form item 样式，避免 select 样式失真

.gitignore

@@ -1,6 +1,6 @@
 .DS_Store
 node_modules
-/dist
+dist
 
 
 # local env files

.vscode/settings.json

@@ -29,7 +29,7 @@
 	"eslint.validate": ["vue", "html", "javascript", "graphql", "javascriptreact", "json", "typescript", "typescriptreact", "vue-html"],
 	"eslint.format.enable": true,
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true
+		"source.fixAll.eslint": "explicit"
 	},
 	"files.associations": {
 		"*.cjson": "jsonc",

package.json

@@ -86,6 +86,6 @@
 	],
 	"repository": {
 		"type": "git",
-		"url": "https://gitee.com/log4j/pig"
+		"url": "https://gitee.com/log4j/pig-ui"
 	}
 }

src/theme/element.scss

@@ -60,12 +60,11 @@
 }
 
 .el-form-item__content {
-	min-width: var(--el-form-inline-content-width);
 	.el-select {
-		width: 100% !important;
+		min-width: 180px;
 	}
 	.el-date-editor {
-		width: 100% !important;
+      min-width: 180px;
 	}
 }
 

src/views/admin/client/form.vue

@@ -23,7 +23,8 @@
       <el-form-item :label="t('client.refreshTokenValidity')" prop="refreshTokenValidity">
         <el-input-number :placeholder="t('client.inputRefreshTokenValidityTip')" v-model="form.refreshTokenValidity"/>
       </el-form-item>
-      <el-form-item :label="t('client.autoapprove')" prop="autoapprove" v-if="form.authorizedGrantTypes.includes('authorization_code')">
+      <el-form-item :label="t('client.autoapprove')" prop="autoapprove"
+                    v-if="form.authorizedGrantTypes.includes('authorization_code')">
         <el-radio-group v-model="form.autoapprove">
           <el-radio :key="index" :label="item.value" border v-for="(item, index) in common_status">{{
               item.label

src/views/daemon/job-manage/form.vue

@@ -4,44 +4,45 @@
       <el-row :gutter="20">
         <el-col :span="12" class="mb20">
           <el-form-item :label="t('job.jobName')" prop="jobName">
-						<el-input v-model="form.jobName" :placeholder="t('job.inputjobNameTip')" />
+            <el-input v-model="form.jobName" :placeholder="t('job.inputjobNameTip')"/>
           </el-form-item>
         </el-col>
         <el-col :span="12" class="mb20">
           <el-form-item :label="t('job.jobGroup')" prop="jobGroup">
-						<el-input v-model="form.jobGroup" :placeholder="t('job.inputjobGroupTip')" />
+            <el-input v-model="form.jobGroup" :placeholder="t('job.inputjobGroupTip')"/>
           </el-form-item>
         </el-col>
 
         <el-col :span="12" class="mb20">
           <el-form-item :label="t('job.jobType')" prop="jobType">
             <el-select v-model="form.jobType" :placeholder="t('job.jobType')">
-							<el-option v-for="(item, index) in job_type" :key="index" :label="item.label" :value="item.value"></el-option>
+              <el-option v-for="(item, index) in job_type" :key="index" :label="item.label"
+                         :value="item.value"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
 
         <el-col :span="12" class="mb20" v-if="['3', '4'].includes(form.jobType)">
           <el-form-item :label="t('job.executePath')" prop="executePath">
-						<el-input v-model="form.executePath" :placeholder="t('job.inputexecutePathTip')" />
+            <el-input v-model="form.executePath" :placeholder="t('job.inputexecutePathTip')"/>
           </el-form-item>
         </el-col>
 
         <el-col :span="12" class="mb20" v-if="['1', '2'].includes(form.jobType)">
           <el-form-item :label="t('job.className')" prop="className">
-						<el-input v-model="form.className" :placeholder="t('job.inputclassNameTip')" />
+            <el-input v-model="form.className" :placeholder="t('job.inputclassNameTip')"/>
           </el-form-item>
         </el-col>
 
         <el-col :span="12" class="mb20" v-if="['1', '2'].includes(form.jobType)">
           <el-form-item :label="t('job.methodName')" prop="methodName">
-						<el-input v-model="form.methodName" :placeholder="t('job.inputmethodNameTip')" />
+            <el-input v-model="form.methodName" :placeholder="t('job.inputmethodNameTip')"/>
           </el-form-item>
         </el-col>
 
         <el-col :span="12" class="mb20">
           <el-form-item :label="t('job.methodParamsValue')" prop="methodParamsValue">
-						<el-input v-model="form.methodParamsValue" :placeholder="t('job.inputmethodParamsValueTip')" />
+            <el-input v-model="form.methodParamsValue" :placeholder="t('job.inputmethodParamsValueTip')"/>
           </el-form-item>
         </el-col>
 
@@ -54,13 +55,14 @@
         <el-col :span="12" class="mb20">
           <el-form-item :label="t('job.misfirePolicy')" prop="misfirePolicy">
             <el-select v-model="form.misfirePolicy" :placeholder="t('job.inputmisfirePolicyTip')">
-							<el-option v-for="(item, index) in misfire_policy" :key="index" :label="item.label" :value="item.value"></el-option>
+              <el-option v-for="(item, index) in misfire_policy" :key="index" :label="item.label"
+                         :value="item.value"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="24" class="mb20">
           <el-form-item :label="t('job.remark')" prop="remark">
-						<el-input v-model="form.remark" :placeholder="t('job.inputremarkTip')" type="textarea" />
+            <el-input v-model="form.remark" :placeholder="t('job.inputremarkTip')" type="textarea"/>
           </el-form-item>
         </el-col>
       </el-row>
@@ -68,7 +70,9 @@
     <template #footer>
 			<span class="dialog-footer">
 				<el-button formDialogRef @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
-				<el-button formDialogRef type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
+				<el-button formDialogRef type="primary" @click="onSubmit" :disabled="loading">{{
+            $t('common.confirmButtonText')
+          }}</el-button>
 			</span>
     </template>
   </el-dialog>
@@ -76,15 +80,15 @@
 
 <script lang="ts" name="SysJobDialog" setup>
 // 定义子组件向父组件传值/事件
-import { useDict } from '/@/hooks/dict';
+import {useDict} from '/@/hooks/dict';
-import { useMessage } from '/@/hooks/message';
+import {useMessage} from '/@/hooks/message';
-import { addObj, getObj, putObj } from '/@/api/daemon/job';
+import {addObj, getObj, putObj} from '/@/api/daemon/job';
-import { useI18n } from 'vue-i18n';
+import {useI18n} from 'vue-i18n';
 
 const emit = defineEmits(['refresh']);
 const Crontab = defineAsyncComponent(() => import('/@/components/Crontab/index.vue'));
 
-const { t } = useI18n();
+const {t} = useI18n();
 
 // 定义变量内容
 const dataFormRef = ref();
@@ -92,7 +96,7 @@ const visible = ref(false);
 const loading = ref(false);
 
 // 定义字典
-const { misfire_policy, job_type } = useDict('job_status', 'job_execute_status', 'misfire_policy', 'job_type');
+const {misfire_policy, job_type} = useDict('job_status', 'job_execute_status', 'misfire_policy', 'job_type');
 
 // 提交表单数据
 const form = reactive({
@@ -118,14 +122,14 @@ const popoverVis = (bol: boolean) => {
 const popoverVisible = ref(false);
 // 定义校验规则
 const dataRules = reactive({
-	jobName: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
+  jobName: [{required: true, message: '任务名称不能为空', trigger: 'blur'}],
-	jobGroup: [{ required: true, message: '任务组名不能为空', trigger: 'blur' }],
+  jobGroup: [{required: true, message: '任务组名不能为空', trigger: 'blur'}],
-	jobType: [{ required: true, message: '任务类型不能为空', trigger: 'blur' }],
+  jobType: [{required: true, message: '任务类型不能为空', trigger: 'blur'}],
-	cronExpression: [{ required: true, message: 'cron不能为空', trigger: 'blur' }],
+  cronExpression: [{required: true, message: 'cron不能为空', trigger: 'blur'}],
-	misfirePolicy: [{ required: true, message: '策略不能为空', trigger: 'blur' }],
+  misfirePolicy: [{required: true, message: '策略不能为空', trigger: 'blur'}],
-	executePath: [{ required: true, message: '执行路径不能为空', trigger: 'blur' }],
+  executePath: [{required: true, message: '执行路径不能为空', trigger: 'blur'}],
-	className: [{ required: true, message: '执行文件不能为空', trigger: 'blur' }],
+  className: [{required: true, message: '执行文件不能为空', trigger: 'blur'}],
-	methodName: [{ required: true, message: '执行方法不能为空', trigger: 'blur' }],
+  methodName: [{required: true, message: '执行方法不能为空', trigger: 'blur'}],
 });
 
 // 打开弹窗
@@ -147,7 +151,8 @@ const openDialog = (id: string) => {
 
 // 提交
 const onSubmit = async () => {
-	const valid = await dataFormRef.value.validate().catch(() => {});
+  const valid = await dataFormRef.value.validate().catch(() => {
+  });
   if (!valid) return false;
 
   try {