瀏覽代碼

fix(kanban): white query controls on dark filter bar for all modules

Use white background and dark text for all S1-S9 filter fields and the home
grid query bar so remote search input remains readable. Web 2.4.187.

Co-authored-by: Cursor <cursoragent@cursor.com>
skygu 2 月之前
父節點
當前提交
c17298569f

+ 1 - 1
Web/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "admin.net",
 	"type": "module",
-	"version": "2.4.186",
+	"version": "2.4.187",
 	"packageManager": "pnpm@10.32.1",
 	"lastBuildTime": "2026.03.15",
 	"description": "Admin.NET 站在巨人肩膀上的 .NET 通用权限开发框架",

+ 20 - 49
Web/src/views/aidop/kanban/components/DetailQueryBar.vue

@@ -81,82 +81,53 @@ defineEmits(['query', 'reset'])
   color: #cbd5e1;
 }
 
-/* 深色条内:输入/日期/下拉内文字为浅色,占位符略灰 */
-.detail-query-bar--dark :deep(.el-input__inner),
-.detail-query-bar--dark :deep(.el-range-input) {
-  color: #f8fafc !important;
-}
-.detail-query-bar--dark :deep(.el-input__inner::placeholder),
-.detail-query-bar--dark :deep(.el-range-input::placeholder),
-.detail-query-bar--dark :deep(.el-range-separator) {
-  color: #64748b !important;
-}
-.detail-query-bar--dark :deep(.el-select__placeholder) {
-  color: #64748b;
-}
-.detail-query-bar--dark :deep(.el-select__selected-item),
-.detail-query-bar--dark :deep(.el-select__tags-text),
-.detail-query-bar--dark :deep(.el-select .el-input__inner) {
-  color: #f8fafc !important;
-}
-.detail-query-bar--dark :deep(.el-select__wrapper),
-.detail-query-bar--dark :deep(.el-select .el-input__wrapper) {
-  background: rgba(15, 23, 42, 0.85);
-  box-shadow: 0 0 0 1px #475569 inset;
-}
-.detail-query-bar--dark :deep(.el-select__caret) {
-  color: #94a3b8;
-}
-.detail-query-bar--dark :deep(.el-date-editor .el-range__icon) {
-  color: #94a3b8;
-}
-
-/* S1~S9 智慧运营:产品/订单号/产线 下拉与白底日期、客户输入框一致(见 SmartOpsBaseQueryFields 包装类) */
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-select__wrapper) {
+/* 深色条内:表单区所有查询控件统一白底深字(S1~S9 基础字段 + 各模块扩展字段 + 九宫格) */
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-select__wrapper),
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-select .el-input__wrapper) {
   background-color: #ffffff !important;
   box-shadow: 0 0 0 1px var(--el-border-color, #dcdfe6) inset;
 }
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-select:hover:not(.is-disabled) .el-select__wrapper) {
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-select:hover:not(.is-disabled) .el-select__wrapper) {
   box-shadow: 0 0 0 1px var(--el-border-color-hover, #c0c4cc) inset;
 }
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-select.is-focused .el-select__wrapper) {
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-select.is-focused .el-select__wrapper) {
   box-shadow: 0 0 0 1px var(--el-color-primary) inset;
 }
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-select__placeholder) {
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-select__placeholder) {
   color: var(--el-text-color-placeholder, #a8abb2);
 }
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-select__selected-item),
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-select__tags-text),
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-select .el-input__inner) {
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-select__selected-item),
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-select__tags-text),
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-select .el-input__inner),
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-select__input) {
   color: var(--el-text-color-regular, #606266) !important;
 }
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-select__caret) {
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-select__caret) {
   color: var(--el-text-color-secondary, #909399);
 }
 
-/* 同上区域内的日期范围:白底 + 深色字/占位符,与产品等下拉一致 */
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-date-editor.el-input__wrapper),
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-range-editor.el-input__wrapper) {
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-date-editor.el-input__wrapper),
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-range-editor.el-input__wrapper) {
   background-color: #ffffff !important;
   box-shadow: 0 0 0 1px var(--el-border-color, #dcdfe6) inset;
 }
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-date-editor:hover:not(.is-disabled) .el-input__wrapper),
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-date-editor.el-input__wrapper:hover) {
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-date-editor:hover:not(.is-disabled) .el-input__wrapper),
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-date-editor.el-input__wrapper:hover) {
   box-shadow: 0 0 0 1px var(--el-border-color-hover, #c0c4cc) inset;
 }
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-date-editor.el-input__wrapper.is-focus) {
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-date-editor.el-input__wrapper.is-focus) {
   box-shadow: 0 0 0 1px var(--el-color-primary) inset;
 }
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-range-input) {
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-range-input) {
   color: var(--el-text-color-regular, #606266) !important;
 }
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-range-input::placeholder) {
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-range-input::placeholder) {
   color: var(--el-text-color-placeholder, #a8abb2) !important;
 }
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-range-separator) {
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-range-separator) {
   color: var(--el-text-color-secondary, #909399) !important;
 }
-.detail-query-bar--dark :deep(.smart-ops-base-fields--light-selects .el-date-editor .el-range__icon) {
+.detail-query-bar--dark :deep(.detail-query-bar__form .el-date-editor .el-range__icon) {
   color: var(--el-text-color-secondary, #909399);
 }
 </style>

+ 1 - 1
Web/src/views/aidop/kanban/components/SmartOpsBaseQueryFields.vue

@@ -4,7 +4,7 @@
 -->
 <template>
   <!-- 仅 S1~S9 引用;白底下拉与深色条内的日期/其它输入框视觉对齐(九宫格不用本组件) -->
-  <div class="smart-ops-base-fields smart-ops-base-fields--light-selects">
+  <div class="smart-ops-base-fields smart-ops-base-fields--light-selects smart-ops-query-light-control">
   <el-form-item v-if="!compact" label-width="0" class="smart-ops-base-fields__hint-row">
     <span class="smart-ops-base-fields__hint">基础查询:日期、产品、订单号、产线</span>
   </el-form-item>

+ 24 - 15
Web/src/views/aidop/kanban/components/SmartOpsFuzzySelect.vue

@@ -1,19 +1,21 @@
 <template>
-	<el-select
-		:model-value="modelValue || undefined"
-		filterable
-		remote
-		reserve-keyword
-		clearable
-		:placeholder="placeholder"
-		:style="{ width }"
-		:loading="loading"
-		:remote-method="onRemoteSearch"
-		@visible-change="onVisibleChange"
-		@update:model-value="onSelect"
-	>
-		<el-option v-for="item in options" :key="field + '-' + item.value" :label="item.label" :value="item.value" />
-	</el-select>
+	<div class="smart-ops-fuzzy-select smart-ops-query-light-control">
+		<el-select
+			:model-value="modelValue || undefined"
+			filterable
+			remote
+			reserve-keyword
+			clearable
+			:placeholder="placeholder"
+			:style="{ width }"
+			:loading="loading"
+			:remote-method="onRemoteSearch"
+			@visible-change="onVisibleChange"
+			@update:model-value="onSelect"
+		>
+			<el-option v-for="item in options" :key="field + '-' + item.value" :label="item.label" :value="item.value" />
+		</el-select>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -77,3 +79,10 @@ function onSelect(value: string | null | undefined) {
 
 onMounted(() => loadOptions(''));
 </script>
+
+<style scoped>
+.smart-ops-fuzzy-select {
+	display: inline-block;
+	vertical-align: middle;
+}
+</style>

+ 24 - 29
Web/src/views/dashboard/home.vue

@@ -590,35 +590,30 @@ onUnmounted(() => {
   flex-shrink: 0;
 }
 
-/* 顶栏内日期、输入框与暗色一致 */
-.dashboard-query-bar--embedded :deep(.el-input__wrapper),
-.dashboard-query-bar--embedded :deep(.el-range-editor.el-input__wrapper),
-.dashboard-query-bar--embedded :deep(.el-select__wrapper) {
-  background: rgba(15, 23, 42, 0.85);
-  box-shadow: 0 0 0 1px #475569 inset;
-}
-
-.dashboard-query-bar--embedded :deep(.el-input__inner),
-.dashboard-query-bar--embedded :deep(.el-range-input) {
-  color: #f8fafc !important;
-}
-.dashboard-query-bar--embedded :deep(.el-input__inner::placeholder),
-.dashboard-query-bar--embedded :deep(.el-range-input::placeholder),
-.dashboard-query-bar--embedded :deep(.el-range-separator) {
-  color: #64748b !important;
-}
-.dashboard-query-bar--embedded :deep(.el-select__placeholder) {
-  color: #64748b;
-}
-.dashboard-query-bar--embedded :deep(.el-select__selected-item),
-.dashboard-query-bar--embedded :deep(.el-select .el-input__inner) {
-  color: #f8fafc !important;
-}
-.dashboard-query-bar--embedded :deep(.el-select__caret) {
-  color: #94a3b8;
-}
-.dashboard-query-bar--embedded :deep(.el-date-editor .el-range__icon) {
-  color: #94a3b8;
+/* 顶栏内日期、下拉:与 S1~S9 看板一致,白底深字 */
+.dashboard-query-bar--embedded :deep(.detail-query-bar__form .el-input__wrapper),
+.dashboard-query-bar--embedded :deep(.detail-query-bar__form .el-range-editor.el-input__wrapper),
+.dashboard-query-bar--embedded :deep(.detail-query-bar__form .el-select__wrapper) {
+  background-color: #ffffff !important;
+  box-shadow: 0 0 0 1px var(--el-border-color, #dcdfe6) inset;
+}
+
+.dashboard-query-bar--embedded :deep(.detail-query-bar__form .el-range-input),
+.dashboard-query-bar--embedded :deep(.detail-query-bar__form .el-select__selected-item),
+.dashboard-query-bar--embedded :deep(.detail-query-bar__form .el-select .el-input__inner),
+.dashboard-query-bar--embedded :deep(.detail-query-bar__form .el-select__input) {
+  color: var(--el-text-color-regular, #606266) !important;
+}
+.dashboard-query-bar--embedded :deep(.detail-query-bar__form .el-range-input::placeholder),
+.dashboard-query-bar--embedded :deep(.detail-query-bar__form .el-select__placeholder) {
+  color: var(--el-text-color-placeholder, #a8abb2) !important;
+}
+.dashboard-query-bar--embedded :deep(.detail-query-bar__form .el-range-separator) {
+  color: var(--el-text-color-secondary, #909399) !important;
+}
+.dashboard-query-bar--embedded :deep(.detail-query-bar__form .el-select__caret),
+.dashboard-query-bar--embedded :deep(.detail-query-bar__form .el-date-editor .el-range__icon) {
+  color: var(--el-text-color-secondary, #909399);
 }
 
 .dashboard-query-bar--embedded :deep(.detail-query-bar__band) {