人员管理

src/components/AuditState/index.vue

@@ -1,5 +1,6 @@
 <template>
   <el-tag 
+    :effect="currentOption.effect"
     v-if="currentOption"
     :type="currentOption.type" 
     :class="{ 'audit-state-tag': showIcon && currentOption.icon }"
@@ -18,6 +19,7 @@ export interface StateOption {
   label: string;
   type: 'success' | 'danger' | 'warning' | 'info' | '';
   icon?: string;
+  effect?: string;
 }
 
 interface Props {
@@ -30,9 +32,9 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   state: '',
   options: () => [
-    { value: '1', label: '通过', type: 'success', icon: 'fa-solid fa-circle-check' },
-    { value: '-2', label: '驳回', type: 'danger', icon: 'fa-solid fa-circle-xmark' },
-    { value: '0', label: '待审核', type: 'warning', icon: 'fa-regular fa-clock' }
+    { value: '1', label: '已通过', type: 'success', icon: 'fa-solid fa-circle-check' , effect:"dark" },
+    { value: '-2', label: '已驳回', type: 'danger', icon: 'fa-solid fa-circle-xmark', effect:"dark" },
+    { value: '0', label: '待审核', type: 'warning', icon: 'fa-regular fa-clock' ,effect:"light" }
   ],
   showIcon: true,
   emptyText: '-'

src/components/SearchForm/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="search-form-container">
-		<el-form :model="formModel" ref="formRef" :inline="true" @keyup.enter="handleKeyupEnter" class="search-form-inline">
+		<el-form :model="formModel" ref="formRef" :inline="true" @keyup.enter="handleKeyupEnter">
 			<!-- 直接展示的表单项 -->
 			<slot :visible="true" :expanded="isExpanded"></slot>
 
@@ -154,8 +154,9 @@ defineExpose({
 
 <style lang="scss" scoped>
 .search-form-container {
-    
-	:deep(.search-form-inline) {
+	// 直接使用全局样式 el-form--inline，只需要覆盖特殊样式
+	
+	:deep(.el-form--inline) {
 		.collapse-trigger-item {
 			margin-left: 0;
 			margin-bottom: 0;
@@ -165,6 +166,18 @@ defineExpose({
 			padding: 0;
 			font-size: 14px;
 		}
+		
+		// 如果需要自定义宽度，可以覆盖全局样式（默认使用全局的 240px）
+		// 如果需要改为 200px，取消下面的注释
+		// .el-form-item {
+		// 	& > .el-input,
+		// 	.el-cascader,
+		// 	.el-select,
+		// 	.el-date-editor,
+		// 	.el-autocomplete {
+		// 		width: 200px;
+		// 	}
+		// }
 	}
 
 	// 可折叠内容区域 - 使用 contents 让包装器不影响布局