fix(daily): fix multiselect

2026-05-11 18:28:26 +08:00
parent 332d6ab5f1
commit a1565dc18e
8 changed files with 1090 additions and 86 deletions
--- a/components/tree-select/VirtualTreeSelect.module.css
+++ b/components/tree-select/VirtualTreeSelect.module.css
@@ -0,0 +1,157 @@
+.root {
+  width: 100%;
+}
+
+.root :global(.mantine-Input-root),
+.root :global(.mantine-Input-wrapper) {
+  width: 100%;
+}
+
+.root :global(button.mantine-Input-input),
+.dropdown :global(.mantine-Input-input) {
+  min-height: 32px;
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+  background: #f7f8fa;
+  color: #1d2129;
+  font-size: 14px;
+  box-shadow: none;
+  transition:
+    border-color 0.2s ease,
+    color 0.2s ease,
+    background-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.root :global(button.mantine-Input-input) {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding-inline: 12px;
+  text-align: left;
+}
+
+.root[data-opened="true"] :global(button.mantine-Input-input),
+.dropdown :global(.mantine-Input-input:focus),
+.dropdown :global(.mantine-Input-input:focus-visible) {
+  border-color: #1874ff;
+  background: #ffffff;
+  box-shadow: 0 0 0 2px rgba(24, 116, 255, 0.12);
+}
+
+.root :global(.mantine-Input-section),
+.dropdown :global(.mantine-Input-section) {
+  color: #86909c;
+}
+
+.root :global(button.mantine-Input-input:disabled) {
+  border-color: #e5e6eb;
+  background: #f2f3f5;
+  color: #c9cdd4;
+}
+
+.dropdown {
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+  background: #ffffff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.dropdown :global(.mantine-Input-input::placeholder) {
+  color: #86909c;
+}
+
+.triggerText {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.triggerActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #86909c;
+}
+
+.triggerValue {
+  color: #1d2129;
+}
+
+.triggerPlaceholder {
+  color: #86909c;
+}
+
+.triggerCountTag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 72px;
+  height: 22px;
+  padding-inline: 10px;
+  border-radius: 999px;
+  background: #e7efff;
+  color: #1874ff;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.clearButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  color: #86909c;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.clearButton:hover {
+  background: #f2f3f5;
+  color: #4e5969;
+}
+
+.searchArea {
+  padding: 8px 8px 10px;
+}
+
+.searchField {
+  width: 100%;
+}
+
+.treePanel {
+  overflow: hidden;
+  border-top: 1px solid #f2f3f5;
+  padding: 4px 8px 8px 0;
+}
+
+.emptyState {
+  border-top: 1px solid #f2f3f5;
+  padding: 8px;
+}
+
+.treeRow {
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+/* .treeRow[data-active="true"] {
+  background: #f2f3f5;
+} */
+
+.treeContent {
+  min-width: 0;
+}
+
+.levelSpacer {
+  display: inline-block;
+  flex: 0 0 auto;
+  min-width: 0;
+}