@arronqzy/vue-view 0.1.25 → 0.1.26

package/src/panel/components/MaterialSidebar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, ref } from "vue";
-import { Card, Empty, Input, Switch, Tabs } from "ant-design-vue";
+import { Empty, Input, Select, Tabs, Tooltip } from "ant-design-vue";
 import type { PanelElement, PanelLayer, ReferenceCopyMode } from "../types";
 import { getPanelMessages } from "../constants/messages";
 import {
@@ -48,7 +48,6 @@ const props = withDefaults(defineProps<MaterialSidebarProps>(), {
 const leftTab = ref<"materials" | "tree">("materials");
 const activeCategoryId = ref<MaterialCategoryId>("charts");
 const keyword = ref("");
-const treeKeyword = ref("");
 const referenceOnlyTree = ref(false);
 const draggingTreeNodeId = ref<string | null>(null);
 const dragOverLayerId = ref<string | null>(null);
@@ -56,14 +55,26 @@ const expandedKeys = ref<Record<string, boolean>>({ root: true });
 
 const categories = computed(() => { void locale.value; return getDefaultCategories(t); });
 const normalizedKeyword = computed(() => keyword.value.trim().toLowerCase());
-const isSearching = computed(() => normalizedKeyword.value.length > 0);
-const normalizedTreeKeyword = computed(() => treeKeyword.value.trim().toLowerCase());
-const isTreeSearching = computed(() => normalizedTreeKeyword.value.length > 0);
-
-const activeCategory = computed(
-  () => categories.value.find((c) => c.id === activeCategoryId.value) ?? categories.value[0]
+const isSearching = computed(
+  () => leftTab.value === "materials" && normalizedKeyword.value.length > 0
+);
+const isTreeSearching = computed(
+  () => leftTab.value === "tree" && normalizedKeyword.value.length > 0
+);
+const normalizedTreeKeyword = computed(() =>
+  isTreeSearching.value ? normalizedKeyword.value : ""
+);
+const searchPlaceholder = computed(() =>
+  leftTab.value === "tree"
+    ? t("panel.material.treeSearchPlaceholder")
+    : t("panel.material.searchPlaceholder")
 );
 
+function onLeftTabChange(key: string | number) {
+  leftTab.value = key === "tree" ? "tree" : "materials";
+  keyword.value = "";
+}
+
 const matchedItems = computed(() => {
   if (!isSearching.value) return [];
   const result: Array<MaterialItem & { categoryTitle: string }> = [];
@@ -78,6 +89,15 @@ const matchedItems = computed(() => {
   return result;
 });
 
+const activeCategory = computed(
+  () =>
+    categories.value.find((c) => c.id === activeCategoryId.value) ?? categories.value[0]
+);
+
+const displayItems = computed(() =>
+  isSearching.value ? matchedItems.value : (activeCategory.value?.items ?? [])
+);
+
 const elementsByLayer = computed(() => {
   const map = new Map<string, PanelElement[]>();
   for (const layer of props.layers) map.set(layer.id, []);
@@ -270,258 +290,301 @@ const treeSearchEmpty = computed(
 <template>
   <aside
     :class="[
-      'grid h-full w-full border-r border-border bg-muted/30 text-foreground',
+      'rv-material-sidebar grid h-full min-h-0 w-full overflow-hidden border-r border-border/60 bg-muted/20 text-foreground',
       props.class ?? '',
     ]"
     style="grid-template-rows: auto 1fr"
   >
-    <div class="border-b border-border bg-background/80 px-3 py-2 backdrop-blur-sm">
+    <div class="border-b border-border/50 bg-background/70 px-2 py-1.5 backdrop-blur-sm">
       <Input
         v-model:value="keyword"
         size="small"
-        :placeholder="t('panel.material.searchPlaceholder')"
-        class="text-xs"
+        :placeholder="searchPlaceholder"
+        :aria-label="searchPlaceholder"
+        class="text-[12px]"
       />
     </div>
 
-    <Tabs v-model:active-key="leftTab" class="flex min-h-0 h-full flex-col">
+    <Tabs
+      :active-key="leftTab"
+      class="flex h-full min-h-0 flex-col overflow-hidden"
+      size="small"
+      @update:active-key="onLeftTabChange"
+    >
       <Tabs.TabPane key="materials" :tab="t('panel.material.tabMaterials')" class="min-h-0 flex-1">
-        <div class="grid h-full min-h-0 grid-cols-[110px_1fr]">
-          <div :class="`overflow-auto border-r border-border ${themedScrollbarClass}`">
-            <button
-              v-for="c in categories"
-              :key="c.id"
-              type="button"
-              :class="[
-                'w-full cursor-pointer border-b border-border/40 px-2.5 py-2.5 text-left text-xs',
-                c.id === activeCategoryId
-                  ? 'bg-accent text-accent-foreground'
-                  : 'text-muted-foreground hover:bg-accent/60 hover:text-accent-foreground',
-              ]"
-              @click="activeCategoryId = c.id"
+        <div class="flex h-full min-h-0 flex-col overflow-hidden">
+          <div
+            v-if="!isSearching"
+            class="shrink-0 border-b border-border/40 bg-background/80 px-2 py-1.5"
+          >
+            <Select
+              v-model:value="activeCategoryId"
+              size="small"
+              class="w-full text-[12px] font-semibold"
+              :aria-label="activeCategory?.title"
             >
-              {{ c.title }}
-            </button>
-          </div>
-
-          <div :class="`overflow-auto ${themedScrollbarClass}`">
-            <div class="px-2.5 py-2.5 text-xs font-semibold">
-              {{ isSearching ? t("panel.material.searchResults", { count: matchedItems.length }) : activeCategory.title }}
-            </div>
-            <div class="grid gap-2 px-2.5 pb-3">
-              <button
-                v-for="it in isSearching ? matchedItems : activeCategory.items"
-                :key="isSearching ? `${it.id}-${(it as any).categoryTitle}` : it.id"
-                type="button"
-                draggable="true"
-                class="cursor-pointer rounded-xl border border-border bg-card px-2 py-2 text-left text-xs text-card-foreground hover:bg-accent/60"
-                @dragstart="onMaterialDragStart($event, it)"
+              <Select.Option
+                v-for="category in categories"
+                :key="category.id"
+                :value="category.id"
               >
-                <div class="flex flex-col items-stretch gap-2">
-                  <MaterialPreview :id="it.id" />
-                  <div class="min-w-0">
-                    <div class="truncate">{{ it.title }}</div>
-                    <div
-                      v-if="isSearching"
-                      class="mt-1 text-[11px] text-muted-foreground"
-                    >
-                      {{ (it as any).categoryTitle }}
+                <span class="inline-flex w-full min-w-0 items-center justify-between gap-2">
+                  <span class="truncate font-medium">{{ category.title }}</span>
+                  <span class="tabular-nums text-[11px] font-normal text-muted-foreground">
+                    {{ category.items.length }}
+                  </span>
+                </span>
+              </Select.Option>
+            </Select>
+          </div>
+          <div :class="`min-h-0 flex-1 overflow-auto ${themedScrollbarClass}`">
+            <div class="px-2 pb-2.5 pt-1.5">
+              <div class="mb-1.5 flex items-baseline justify-between gap-2 px-0.5">
+                <div class="truncate text-[12px] font-semibold text-foreground/90">
+                  <template v-if="isSearching">
+                    {{ t("panel.material.searchResults", { count: matchedItems.length }) }}
+                  </template>
+                  <template v-else>{{ activeCategory?.title }}</template>
+                </div>
+                <div
+                  v-if="!isSearching"
+                  class="tabular-nums text-[11px] text-muted-foreground"
+                >
+                  {{ activeCategory?.items.length ?? 0 }}
+                </div>
+              </div>
+              <div class="rv-material-grid">
+                <button
+                  v-for="it in displayItems"
+                  :key="isSearching ? `${it.id}-${(it as any).categoryTitle}` : it.id"
+                  type="button"
+                  draggable="true"
+                  class="rv-material-card cursor-pointer rounded-lg border border-border/50 bg-card px-1.5 py-1.5 text-left text-card-foreground shadow-[0_1px_1px_hsl(var(--foreground)/0.03)] transition-colors hover:border-border hover:bg-accent/40"
+                  @dragstart="onMaterialDragStart($event, it)"
+                >
+                  <div class="flex flex-col gap-1">
+                    <MaterialPreview :id="it.id" />
+                    <div class="min-w-0 px-0.5">
+                      <div class="truncate text-center text-[11px] font-normal text-muted-foreground">
+                        {{ it.title }}
+                      </div>
+                      <div
+                        v-if="isSearching"
+                        class="mt-0.5 truncate text-center text-[10px] text-muted-foreground"
+                      >
+                        {{ (it as any).categoryTitle }}
+                      </div>
                     </div>
                   </div>
+                </button>
+                <Empty
+                  v-if="isSearching && matchedItems.length === 0"
+                  class="py-5"
+                  :description="t('panel.material.emptyMaterialsTitle')"
+                >
+                  <template #description>
+                    <span class="text-[12px] font-medium">{{ t("panel.material.emptyMaterialsTitle") }}</span>
+                    <div class="text-[11px] text-muted-foreground">
+                      {{ t("panel.material.emptyMaterialsDesc") }}
+                    </div>
+                  </template>
+                </Empty>
+                <div
+                  v-else-if="!isSearching && (activeCategory?.items.length ?? 0) === 0"
+                  class="px-1 py-3 text-[11px] text-muted-foreground"
+                >
+                  {{ t("panel.material.emptyMaterialsTitle") }}
                 </div>
-              </button>
-              <Empty
-                v-if="isSearching && matchedItems.length === 0"
-                class="py-5"
-                :description="t('panel.material.emptyMaterialsTitle')"
-              >
-                <template #description>
-                  <span class="text-xs">{{ t("panel.material.emptyMaterialsTitle") }}</span>
-                  <div class="text-[11px] text-muted-foreground">
-                    {{ t("panel.material.emptyMaterialsDesc") }}
-                  </div>
-                </template>
-              </Empty>
+              </div>
             </div>
           </div>
         </div>
       </Tabs.TabPane>
 
       <Tabs.TabPane key="tree" :tab="t('panel.material.tabTree')" class="min-h-0 flex-1">
-        <div :class="`h-full overflow-auto px-2 py-2 text-xs ${themedScrollbarClass}`">
-          <div class="mb-2">
-            <Input
-              v-model:value="treeKeyword"
-              size="small"
-              :placeholder="t('panel.material.treeSearchPlaceholder')"
-              class="text-xs"
-            />
-          </div>
-          <div class="mb-2 flex items-center justify-between rounded border border-border bg-card px-2 py-1.5">
-            <span class="text-[11px] text-muted-foreground">{{ t("panel.material.referenceOnlyTree") }}</span>
-            <Switch v-model:checked="referenceOnlyTree" size="small" :aria-label="t('panel.material.referenceOnlyTree')" />
-          </div>
-
-          <div class="rounded border border-border bg-card">
-            <div class="flex items-center gap-1 px-2 py-1.5 font-medium">
+        <div :class="`h-full overflow-auto px-1.5 py-1.5 text-xs ${themedScrollbarClass}`">
+          <div class="flex items-center gap-0.5 rounded-sm px-0.5 py-0.5 font-medium hover:bg-accent/40">
+            <button
+              type="button"
+              class="flex h-5 w-4 shrink-0 items-center justify-center rounded text-[11px] text-muted-foreground hover:bg-accent"
+              @click="setExpanded('root', !isExpanded('root', true))"
+            >
+              {{ isExpanded("root", true) ? "▾" : "▸" }}
+            </button>
+            <span class="min-w-0 flex-1 truncate text-[12px]">root</span>
+            <Tooltip :title="t('panel.material.referenceOnlyTree')">
               <button
                 type="button"
-                class="flex h-7 w-7 items-center justify-center rounded text-sm hover:bg-accent"
-                @click="setExpanded('root', !isExpanded('root', true))"
+                class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md border transition-colors"
+                :class="
+                  referenceOnlyTree
+                    ? 'border-primary/50 bg-primary/15 text-primary'
+                    : 'border-border/70 bg-background/80 text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                "
+                :aria-label="t('panel.material.referenceOnlyTree')"
+                :aria-pressed="referenceOnlyTree"
+                @click="referenceOnlyTree = !referenceOnlyTree"
               >
-                {{ isExpanded("root", true) ? "▾" : "▸" }}
+                <svg
+                  viewBox="0 0 24 24"
+                  class="h-3.5 w-3.5"
+                  fill="none"
+                  stroke="currentColor"
+                  :stroke-width="referenceOnlyTree ? 2.2 : 2"
+                >
+                  <path
+                    d="M4 5h16l-5.5 6.5V18l-5 2.5v-9L4 5Z"
+                    :fill="referenceOnlyTree ? 'currentColor' : 'none'"
+                    :fill-opacity="referenceOnlyTree ? 0.2 : 0"
+                  />
+                  <circle cx="16.5" cy="16.5" r="2.2" />
+                  <path d="M14.8 15.2 12 12.5" />
+                </svg>
               </button>
-              <span>root</span>
-            </div>
+            </Tooltip>
+          </div>
 
-            <div v-show="isExpanded('root', true)" class="space-y-1 border-t border-border/60 py-1">
-              <template v-for="layer in layers" :key="layer.id">
-                <div v-if="!(isTreeSearching && getRootNodes(layer.id).length === 0)">
-                  <Card
-                    :class="[
-                      'mb-2 overflow-hidden transition-shadow',
-                      layer.isMapping
-                        ? 'border-2 border-violet-500/70 bg-gradient-to-br from-violet-500/14 via-violet-600/10 to-fuchsia-500/12'
-                        : '',
-                      dragOverLayerId === layer.id
-                        ? getLayerDropState(layer).canDropIntoLayer
-                          ? 'ring-2 ring-primary/45 ring-offset-2 ring-offset-background'
-                          : 'ring-2 ring-destructive/45 ring-offset-2 ring-offset-background'
-                        : '',
-                    ]"
-                    size="small"
-                    :body-style="{ padding: '10px' }"
+          <div v-show="isExpanded('root', true)" class="ml-[7px] border-l border-border/45 pl-1.5">
+            <template v-for="layer in layers" :key="layer.id">
+              <div v-if="!(isTreeSearching && getRootNodes(layer.id).length === 0)">
+                <div
+                  :class="[
+                    'flex min-w-0 items-center gap-0.5 rounded-sm py-0.5 pr-0.5 transition-colors',
+                    layer.isMapping ? 'text-violet-800 dark:text-violet-200' : 'text-foreground',
+                    dragOverLayerId === layer.id
+                      ? getLayerDropState(layer).canDropIntoLayer
+                        ? 'bg-primary/12 ring-1 ring-inset ring-primary/35'
+                        : 'bg-destructive/10 ring-1 ring-inset ring-destructive/35'
+                      : 'hover:bg-accent/50',
+                  ]"
+                  :title="t('panel.material.dragToThisLayer')"
+                  @dragover="onLayerDragOver($event, layer)"
+                  @dragleave="dragOverLayerId === layer.id && (dragOverLayerId = null)"
+                  @drop="onLayerDrop($event, layer)"
+                >
+                  <button
+                    type="button"
+                    class="flex h-5 w-4 shrink-0 items-center justify-center rounded text-[11px] text-muted-foreground hover:bg-accent"
+                    @click="setExpanded(`layer:${layer.id}`, !isExpanded(`layer:${layer.id}`, true))"
                   >
-                    <div class="mb-1.5 flex flex-wrap items-center gap-1">
-                      <span
-                        v-if="dragOverLayerId === layer.id"
-                        :class="[
-                          'inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-[11px]',
-                          getLayerDropState(layer).canDropIntoLayer
-                            ? 'bg-primary/15 text-primary'
-                            : 'bg-destructive/15 text-destructive',
-                        ]"
-                        :title="
-                          getLayerDropState(layer).canDropIntoLayer
-                            ? t('panel.material.targetLayer')
-                            : getLayerDropState(layer).dropBlockReason
-                        "
-                      >
-                        ➜
-                      </span>
-                      <button
-                        type="button"
-                        class="flex h-7 w-7 shrink-0 items-center justify-center rounded text-sm text-muted-foreground hover:bg-accent"
-                        @click="
-                          setExpanded(`layer:${layer.id}`, !isExpanded(`layer:${layer.id}`, true))
-                        "
-                      >
-                        {{
-                          isExpanded(`layer:${layer.id}`, true) ? "▾" : "▸"
-                        }}
-                      </button>
-                      <span class="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
-                        {{ layer.name }}
-                        <span class="font-normal text-muted-foreground">
-                          （{{ getRootNodes(layer.id).length }}）
-                        </span>
-                      </span>
-                      <span
-                        v-if="layer.isMapping"
-                        class="shrink-0 rounded-md border-2 border-violet-600 bg-violet-500/22 px-1.5 py-0.5 text-[10px] font-semibold text-violet-950 dark:border-violet-400 dark:bg-violet-500/35 dark:text-violet-50"
-                      >
-                        {{ t("panel.material.mappingLayer") }}
-                      </span>
-                      <span
-                        v-if="dragOverLayerId === layer.id"
-                        :class="[
-                          'ml-auto shrink-0 rounded px-1.5 py-0.5 text-[10px]',
-                          getLayerDropState(layer).canDropIntoLayer
-                            ? 'bg-primary/15 text-primary'
-                            : 'bg-destructive/15 text-destructive',
-                        ]"
-                      >
-                        {{
-                          getLayerDropState(layer).canDropIntoLayer
-                            ? t("panel.material.willMoveToLayer")
-                            : getLayerDropState(layer).dropBlockReason
-                        }}
-                      </span>
-                    </div>
-
-                    <div
-                      :class="[
-                        'mb-2 rounded-md border border-dashed px-2 py-1.5 text-[10px] transition-colors',
-                        dragOverLayerId === layer.id
-                          ? getLayerDropState(layer).canDropIntoLayer
-                            ? 'border-primary/50 bg-primary/10 text-primary'
-                            : 'border-destructive/50 bg-destructive/10 text-destructive'
-                          : 'border-border/50 bg-muted/20 text-muted-foreground hover:border-border hover:bg-muted/35',
-                      ]"
-                      :title="t('panel.material.dragToThisLayer')"
-                      @dragover="onLayerDragOver($event, layer)"
-                      @dragleave="dragOverLayerId === layer.id && (dragOverLayerId = null)"
-                      @drop="onLayerDrop($event, layer)"
+                    {{ isExpanded(`layer:${layer.id}`, true) ? "▾" : "▸" }}
+                  </button>
+                  <svg
+                    viewBox="0 0 24 24"
+                    class="h-3.5 w-3.5 shrink-0"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" />
+                  </svg>
+                  <div class="flex min-w-0 flex-1 items-center gap-0.5">
+                    <span class="min-w-0 truncate text-[12px] font-medium">
+                      {{ layer.name }}
+                    </span>
+                    <span
+                      v-if="layer.isMapping"
+                      class="shrink-0 rounded border border-violet-500/60 bg-violet-500/15 px-1 text-[10px] font-medium"
                     >
-                      {{
-                        draggingTreeNodeId
-                          ? getLayerDropState(layer).canDropIntoLayer
-                            ? t("panel.material.releaseToMove")
-                            : getLayerDropState(layer).dropBlockReason || t("panel.material.cannotMoveToLayer")
-                          : t("panel.material.dragToLayer")
-                      }}
-                    </div>
-
-                    <div v-show="isExpanded(`layer:${layer.id}`, true)">
-                      <div
-                        v-if="getRootNodes(layer.id).length === 0"
-                        class="rounded border border-border/40 bg-muted/15 py-2 pl-3 text-[11px] text-muted-foreground"
-                      >
-                        {{ t("panel.material.emptyLayer") }}
-                      </div>
-                      <MaterialSidebarTreeNode
-                        v-for="node in getRootNodes(layer.id)"
-                        :key="node.id"
-                        :node="node"
-                        :level="2"
-                        :path="`${layer.id}/${node.id}`"
-                        :visited="new Set()"
-                        :selected-ids="selectedIds"
-                        :layer-by-id="layerById"
-                        :elements-by-layer="elementsByLayer"
-                        :children-by-grid-by-layer="childrenByGridByLayer"
-                        :expanded-keys="expandedKeys"
-                        :normalized-tree-keyword="normalizedTreeKeyword"
-                        :is-tree-searching="isTreeSearching"
-                        :dragging-tree-node-id="draggingTreeNodeId"
-                        @toggle-expanded="setExpanded"
-                        @select-node="(id, lid) => onSelectNode?.(id, lid)"
-                        @node-context-menu="(p) => onNodeContextMenu?.(p)"
-                        @delete-node="(id) => onDeleteNode?.(id)"
-                        @copy-node="(id, mode) => onCopyNode?.(id, mode)"
-                        @drag-start="(id) => (draggingTreeNodeId = id)"
-                        @drag-end="
-                          draggingTreeNodeId = null;
-                          dragOverLayerId = null;
-                        "
-                      />
-                    </div>
-                  </Card>
+                      {{ t("panel.material.mappingLayer") }}
+                    </span>
+                  </div>
+                  <span class="ml-auto shrink-0 pl-1 tabular-nums text-[11px] text-muted-foreground">
+                    {{ getRootNodes(layer.id).length }}
+                  </span>
                 </div>
-              </template>
 
-              <Empty v-if="treeSearchEmpty" class="mx-2 my-2 py-5" :description="t('panel.material.emptyNodesTitle')">
-                <template #description>
-                  <span class="text-xs">{{ t("panel.material.emptyNodesTitle") }}</span>
-                  <div class="text-[11px] text-muted-foreground">
-                    {{ t("panel.material.emptyNodesDesc") }}
+                <div
+                  v-show="isExpanded(`layer:${layer.id}`, true)"
+                  class="ml-[7px] border-l border-border/45 pl-1.5"
+                >
+                  <div
+                    v-if="getRootNodes(layer.id).length === 0"
+                    class="py-1 pl-1 text-[11px] text-muted-foreground"
+                  >
+                    {{ t("panel.material.emptyLayer") }}
                   </div>
-                </template>
-              </Empty>
-            </div>
+                  <MaterialSidebarTreeNode
+                    v-for="node in getRootNodes(layer.id)"
+                    :key="node.id"
+                    :node="node"
+                    :level="0"
+                    :path="`${layer.id}/${node.id}`"
+                    :visited="new Set()"
+                    :selected-ids="selectedIds"
+                    :layer-by-id="layerById"
+                    :elements-by-layer="elementsByLayer"
+                    :children-by-grid-by-layer="childrenByGridByLayer"
+                    :expanded-keys="expandedKeys"
+                    :normalized-tree-keyword="normalizedTreeKeyword"
+                    :is-tree-searching="isTreeSearching"
+                    :dragging-tree-node-id="draggingTreeNodeId"
+                    @toggle-expanded="setExpanded"
+                    @select-node="(id, lid) => onSelectNode?.(id, lid)"
+                    @node-context-menu="(p) => onNodeContextMenu?.(p)"
+                    @delete-node="(id) => onDeleteNode?.(id)"
+                    @copy-node="(id, mode) => onCopyNode?.(id, mode)"
+                    @drag-start="(id) => (draggingTreeNodeId = id)"
+                    @drag-end="
+                      draggingTreeNodeId = null;
+                      dragOverLayerId = null;
+                    "
+                  />
+                </div>
+              </div>
+            </template>
+
+            <Empty v-if="treeSearchEmpty" class="my-2 py-5" :description="t('panel.material.emptyNodesTitle')">
+              <template #description>
+                <span class="text-xs">{{ t("panel.material.emptyNodesTitle") }}</span>
+                <div class="text-[11px] text-muted-foreground">
+                  {{ t("panel.material.emptyNodesDesc") }}
+                </div>
+              </template>
+            </Empty>
           </div>
         </div>
       </Tabs.TabPane>
     </Tabs>
   </aside>
 </template>
+
+<style scoped>
+:deep(.ant-tabs) {
+  display: flex;
+  min-height: 0;
+  height: 100%;
+  flex-direction: column;
+}
+:deep(.ant-tabs-nav) {
+  margin: 0;
+  padding: 0.5rem 0.5rem 0;
+  flex-shrink: 0;
+}
+:deep(.ant-tabs-content-holder),
+:deep(.ant-tabs-content) {
+  display: flex;
+  min-height: 0;
+  height: 100%;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
+}
+/* 勿给未激活 pane 设 display:flex，否则会盖掉 antd 的 display:none 留下大块空白 */
+:deep(.ant-tabs-tabpane-active) {
+  display: flex !important;
+  min-height: 0;
+  height: 100%;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
+}
+:deep(.ant-select-selector) {
+  white-space: nowrap !important;
+}
+:deep(.ant-select-selection-item) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap !important;
+}
+</style>