init

frontend-ui/src/pages/ComponentCatalog/Index.vue

@@ -4,6 +4,7 @@ import { UiAutocomplete, type UiAutocompleteOption } from '@/components/ui/autoc
 import { UiBadge } from '@/components/ui/badge'
 import { buttonVariants, UiButton } from '@/components/ui/button'
 import { UiCheckbox } from '@/components/ui/checkbox'
+import { UiCascader, type UiCascaderGroup } from '@/components/ui/cascader'
 import { UiDataRow, UiDataSection } from '@/components/ui/data-section'
 import {
   UiDataTable,
@@ -33,6 +34,8 @@ import { UiItemSlot } from '@/components/ui/item-slot'
 import { UiNumberField } from '@/components/ui/number-field'
 import { UiNavigation, type UiNavigationItem } from '@/components/ui/navigation'
 import { UiPanel } from '@/components/ui/panel'
+import { UiPagination } from '@/components/ui/pagination'
+import { PopoverRoot, PopoverTrigger, UiPopoverContent } from '@/components/ui/popover'
 import { UiProgress } from '@/components/ui/progress'
 import { UiRadioGroup, UiRadioGroupItem } from '@/components/ui/radio-group'
 import { UiRating } from '@/components/ui/rating'
@@ -49,6 +52,7 @@ import { UiSettingRow, UiSettingsGroup, UiSettingsSection } from '@/components/u
 import { UiShopItemList, type UiShopItem } from '@/components/ui/shop-item-row'
 import { UiSwitch } from '@/components/ui/switch'
 import { TabsRoot, UiTabsContent, UiTabsList, UiTabsTrigger } from '@/components/ui/tabs'
+import { UiTreeSelect, type UiTreeSelectItem } from '@/components/ui/tree-select'
 import {
   TooltipProvider,
   TooltipRoot,
@@ -87,6 +91,9 @@ const dataSectionOpen = ref(true)
 const shopSelected = ref('shop-rare')
 const sortKey = ref('reinforce')
 const sortDirection = ref<'ascending' | 'descending'>('ascending')
+const treeValue = ref('rare')
+const cascaderValue = ref(['celestial', 'silent-city'])
+const currentPage = ref(1)
 
 const progress = computed(() => Math.min(100, 18 + clickCount.value * 14))
 
@@ -115,6 +122,47 @@ const componentNames = [
   'ScrollArea',
   'Settings',
   'ShopItemRow',
+  'TreeSelect',
+  'Cascader',
+  'Pagination',
+  'Popover',
+]
+
+const treeSelectItems: UiTreeSelectItem[] = [
+  {
+    value: 'rarity',
+    label: '所有稀有度',
+    children: [
+      { value: 'normal', label: '普通', tone: 'normal' },
+      { value: 'advanced', label: '高级', tone: 'advanced' },
+      { value: 'rare', label: '稀有', tone: 'rare' },
+      { value: 'artifact', label: '神器', tone: 'artifact' },
+      { value: 'legend', label: '传说', tone: 'legend' },
+      { value: 'epic', label: '史诗', tone: 'epic' },
+      { value: 'myth', label: '神话', tone: 'myth' },
+      { value: 'primeval', label: '太初', tone: 'primeval' },
+    ],
+  },
+]
+
+const cascaderOptions: UiCascaderGroup[] = [
+  {
+    value: 'celestial',
+    label: '天界',
+    children: [
+      { value: 'silent-city', label: '寂静城' },
+      { value: 'noblesse-code', label: '贵族机要' },
+      { value: 'meister-lab', label: '机械七战神实验室' },
+    ],
+  },
+  {
+    value: 'seon',
+    label: '神界',
+    children: [
+      { value: 'white-cloud', label: '白云溪谷' },
+      { value: 'solidaris', label: '索利达里斯' },
+    ],
+  },
 ]
 
 const autocompleteOptions: UiAutocompleteOption[] = [
@@ -344,6 +392,57 @@ function handleSort(key: string) {
             </UiPanel>
           </div>
 
+          <div class="two-column adaptive-components-row">
+            <UiPanel
+              title="TreeSelect / Cascader"
+              note="Hierarchical value · collision-aware responsive popup"
+            >
+              <div class="adaptive-field-grid">
+                <label class="field-stack">
+                  <span>TreeSelect · keyboard navigation</span>
+                  <UiTreeSelect v-model="treeValue" :items="treeSelectItems" />
+                </label>
+                <label class="field-stack">
+                  <span>Cascader · two-level filter</span>
+                  <UiCascader v-model="cascaderValue" :options="cascaderOptions" />
+                </label>
+              </div>
+              <output class="adaptive-output">
+                {{ treeValue }} · {{ cascaderValue.join(' / ') }}
+              </output>
+            </UiPanel>
+
+            <UiPanel
+              title="Pagination / Popover / RichHelp"
+              note="Reka state · fluid overlay width · viewport collision"
+            >
+              <div class="adaptive-overlay-grid">
+                <UiPagination v-model:page="currentPage" :total="87" result-label="装备结果" />
+                <div class="adaptive-overlay-actions">
+                  <PopoverRoot>
+                    <PopoverTrigger as-child>
+                      <UiButton variant="outline">打开属性说明</UiButton>
+                    </PopoverTrigger>
+                    <UiPopoverContent variant="rich" align="start">
+                      <strong class="popover-title">属性计算说明</strong>
+                      <p>最终结果会合并装备基础值、强化等级与当前筛选条件。</p>
+                      <UiProgress :model-value="68" :marker="50" />
+                    </UiPopoverContent>
+                  </PopoverRoot>
+                  <TooltipRoot>
+                    <TooltipTrigger as-child>
+                      <UiButton variant="outline">聚焦或悬停查看帮助</UiButton>
+                    </TooltipTrigger>
+                    <UiTooltipContent variant="rich">
+                      <strong>高级帮助</strong
+                      ><br />支持键盘聚焦、碰撞翻转，并在窄屏内限制最大宽度。
+                    </UiTooltipContent>
+                  </TooltipRoot>
+                </div>
+              </div>
+            </UiPanel>
+          </div>
+
           <div class="two-column controls-row">
             <UiPanel
               title="Checkbox / RadioGroup / Switch / Rate"
@@ -563,13 +662,11 @@ function handleSort(key: string) {
                   ><UiButton variant="outline">打开组合设置窗口</UiButton></DialogTrigger
                 ><DialogPortal
                   ><UiDialogOverlay /><UiDialogContent class="complex-dialog-demo"
-                    ><UiDialogHeader
-                      ><UiDialogTitle>管理设置</UiDialogTitle>
+                    ><UiDialogHeader><UiDialogTitle>管理设置</UiDialogTitle></UiDialogHeader>
+                    <div class="complex-dialog-body">
                       <UiDialogDescription
                         >组合展示已迁移的导航、设置行、滚动区与表单控件。</UiDialogDescription
-                      ></UiDialogHeader
-                    >
-                    <div class="complex-dialog-body">
+                      >
                       <p>※ 直接组合迁移后的 Navigation、SettingsRow、ScrollArea 与表单控件。</p>
                       <div class="complex-dialog-main">
                         <UiNavigation
@@ -816,6 +913,37 @@ label > span,
   background: #070807;
   color: var(--ui-muted-foreground);
 }
+.adaptive-field-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: clamp(8px, 1.2vw, 14px);
+}
+.adaptive-output {
+  display: block;
+  min-width: 0;
+  margin-top: 10px;
+  overflow-wrap: anywhere;
+  color: var(--ui-muted-foreground);
+}
+.adaptive-overlay-grid {
+  display: grid;
+  gap: 10px;
+}
+.adaptive-overlay-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+:global(.popover-title) {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--ui-tooltip-strong);
+  font-weight: 400;
+}
+:global(.ui-popover-content p) {
+  margin: 0 0 10px;
+  color: var(--ui-muted-foreground);
+}
 .static-select {
   margin-top: 8px;
   border: 1px solid var(--ui-border);
@@ -904,7 +1032,7 @@ label > span,
   color: var(--dcalc-quality-epic);
 }
 .quality-primeval {
-  color: #5aff62;
+  color: var(--dcalc-quality-primeval);
 }
 .status-success {
   color: var(--dcalc-success);
@@ -1065,7 +1193,8 @@ footer {
     font-size: 24px;
   }
   .field-grid,
-  .control-grid {
+  .control-grid,
+  .adaptive-field-grid {
     grid-template-columns: 1fr;
   }
   .button-showcase {

frontend-ui/src/pages/UiPreview/Index.vue

@@ -78,13 +78,13 @@ const accepted = ref(false)
             <UiDialogContent>
               <UiDialogHeader>
                 <UiDialogTitle>组合式弹窗</UiDialogTitle>
-                <UiDialogDescription>
-                  Portal、Overlay、Content、Title 和 Close
-                  均显式组合，业务逻辑不再隐藏在基础组件中。
-                </UiDialogDescription>
               </UiDialogHeader>
 
               <div class="border-y border-border py-4 text-xs text-foreground">
+                <UiDialogDescription class="mb-3">
+                  Portal、Overlay、Content、Title 和 Close
+                  均显式组合，业务逻辑不再隐藏在基础组件中。
+                </UiDialogDescription>
                 当前主题：{{ activeTheme }}
               </div>