init

2026-08-05 08:45:15 +08:00
parent f77034edd7
commit cef594cc86
49 changed files with 2382 additions and 296 deletions
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { UiAutocomplete, type UiAutocompleteOption } from '@/components/ui/autocomplete'
 import { UiBadge } from '@/components/ui/badge'
 import { buttonVariants, UiButton } from '@/components/ui/button'
 import { UiCheckbox } from '@/components/ui/checkbox'
+import { UiDataRow, UiDataSection } from '@/components/ui/data-section'
 import {
  UiDataTable,
  type UiDataTableColumn,
@@ -29,10 +31,12 @@ import {
 import { UiInput } from '@/components/ui/input'
 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 { UiProgress } from '@/components/ui/progress'
 import { UiRadioGroup, UiRadioGroupItem } from '@/components/ui/radio-group'
 import { UiRating } from '@/components/ui/rating'
+import { UiScrollArea } from '@/components/ui/scroll-area'
 import {
  SelectRoot,
  SelectValue,
@@ -41,6 +45,8 @@ import {
  UiSelectTrigger,
 } from '@/components/ui/select'
 import { UiSlider } from '@/components/ui/slider'
+import { UiSettingRow, UiSettingsGroup, UiSettingsSection } from '@/components/ui/settings'
+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 {
@@ -55,6 +61,10 @@ import itemArtifact from '../../../../design/src-web/rarity/img/sprite_item.NPK/
 import itemLegend from '../../../../design/src-web/rarity/img/sprite_item.NPK/equipmentskill.img/2.PNG'
 import itemEpic from '../../../../design/src-web/rarity/img/sprite_item.NPK/equipmentskill.img/3.PNG'
 import itemPrimeval from '../../../../design/src-web/rarity/img/sprite_item.NPK/equipmentskill.img/4.PNG'
+import navHome from '../../../../design/src-web/navigation/img/sprite_interface2_option.NPK/option.img/82.PNG'
+import navDisplay from '../../../../design/src-web/navigation/img/sprite_interface2_option.NPK/option.img/85.PNG'
+import navEffect from '../../../../design/src-web/navigation/img/sprite_interface2_option.NPK/option.img/91.PNG'
+import navArrow from '../../../../design/src-web/navigation/img/sprite_interface2_option.NPK/option.img/103.PNG'

 const { activeTheme, themes, setTheme } = useTheme()

@@ -71,6 +81,10 @@ const activeTab = ref('equipment')
 const activeLineTab = ref('detail')
 const lastAction = ref('尚未执行菜单操作')
 const selectedRow = ref('sword')
+const autocompleteValue = ref('dnf-one')
+const navigationValue = ref('effects')
+const dataSectionOpen = ref(true)
+const shopSelected = ref('shop-rare')
 const sortKey = ref('reinforce')
 const sortDirection = ref<'ascending' | 'descending'>('ascending')

@@ -95,6 +109,62 @@ const componentNames = [
  'Tooltip',
  'DropdownMenu',
  'Dialog',
+  'Autocomplete',
+  'Navigation',
+  'DataSection',
+  'ScrollArea',
+  'Settings',
+  'ShopItemRow',
+]
+
+const autocompleteOptions: UiAutocompleteOption[] = [
+  { value: 'dnf-one', label: 'DNF Toonies（1天）' },
+  { value: 'dnf-three', label: 'DNF Toonies（3天）' },
+  { value: 'poison', label: 'DNF毒战者', tone: 'epic' },
+  { value: 'sage', label: 'DNF智者', tone: 'rare' },
+  { value: 'warrior', label: '闪耀之DNF勇士', tone: 'artifact' },
+]
+
+const navigationItems: UiNavigationItem[] = [
+  { value: 'home', label: '首页', icon: navHome },
+  { value: 'display', label: '画面', icon: navDisplay, indicator: navArrow },
+  { value: 'effects', label: '特效', icon: navEffect, indicator: navArrow },
+]
+
+const shopRows: UiShopItem[] = [
+  {
+    id: 'shop-artifact',
+    image: itemArtifact,
+    reinforce: '+0',
+    amplify: '+0',
+    name: '人造神 3 号纳波尔宝珠',
+    status: '购买完成',
+    statusTone: 'info',
+    owner: '湖北 4\n绝唱',
+    rarity: 'artifact',
+  },
+  {
+    id: 'shop-epic',
+    image: itemEpic,
+    reinforce: '+0',
+    amplify: '+0',
+    name: '果味整夏收集箱宝珠自选',
+    status: '出售完成',
+    statusTone: 'success',
+    owner: '湖北 4\n绝唱',
+    rarity: 'epic',
+  },
+  {
+    id: 'shop-rare',
+    image: itemRare,
+    reinforce: '+2',
+    amplify: '+0',
+    name: '魔法封印转换灵魂',
+    status: '购买完成',
+    statusTone: 'info',
+    owner: '湖北 4\n蛋猪超人',
+    rarity: 'rare',
+  },
 ]

 const raritySamples = [
@@ -385,8 +455,62 @@ function handleSort(key: string) {
            </UiPanel>
          </div>

+          <div class="two-column migrated-row">
+            <UiPanel title="Autocomplete / DataSection" note="Reka Combobox · Collapsible">
+              <div class="migration-stack">
+                <label class="field-stack">
+                  <span>Autocomplete · keyboard filtering</span>
+                  <UiAutocomplete
+                    v-model="autocompleteValue"
+                    :options="autocompleteOptions"
+                    placeholder="搜索物品名称"
+                  />
+                </label>
+                <UiDataSection v-model:open="dataSectionOpen" title="基本信息">
+                  <UiDataRow><span class="grow">魔法暴击</span><b>+113.5%</b></UiDataRow>
+                  <UiDataRow><span class="grow">技能等级</span><b>46</b></UiDataRow>
+                  <UiDataRow disabled><span class="grow">精神</span><span>不可用</span></UiDataRow>
+                </UiDataSection>
+              </div>
+            </UiPanel>
+
+            <UiPanel title="Navigation / SettingsRow" note="Source composition · responsive rows">
+              <div class="navigation-settings-demo">
+                <UiNavigation v-model="navigationValue" :items="navigationItems" label="设置分类" />
+                <UiSettingsGroup>
+                  <UiSettingsSection>显示特效</UiSettingsSection>
+                  <UiSettingRow label="阴影效果">
+                    <label class="ui-control-row"><UiCheckbox v-model="accepted" />开启</label>
+                  </UiSettingRow>
+                  <UiSettingRow label="角色轮廓" alt focused>
+                    <UiSlider v-model="volume" label="角色轮廓" />
+                  </UiSettingRow>
+                  <UiSettingRow label="自动同步" :indent="1">
+                    <label class="ui-control-row"><UiSwitch v-model="syncEnabled" />开启</label>
+                  </UiSettingRow>
+                </UiSettingsGroup>
+              </div>
+            </UiPanel>
+          </div>
+
+          <UiPanel title="ShopItemRow / ScrollArea" note="Source frame layers · real scrolling">
+            <div class="shop-scroll-demo">
+              <UiShopItemList
+                v-model:selected="shopSelected"
+                :rows="shopRows"
+                @inspect="lastAction = `查看 ${$event.name}`"
+              />
+              <UiScrollArea class="catalog-scroll-area">
+                <div class="scroll-demo-content">
+                  <b>SCROLLABLE SOURCE CONTENT</b>
+                  <span v-for="index in 12" :key="index">设置记录 {{ index }}</span>
+                </div>
+              </UiScrollArea>
+            </div>
+          </UiPanel>
+
          <UiPanel
-            title="Tooltip / DropdownMenu / WindowDialog"
+            title="Tooltip / DropdownMenu / WindowDialog / ComplexDialog"
            note="Portal · Escape · focus restoration"
          >
            <div class="overlay-showcase">
@@ -434,6 +558,59 @@ function handleSort(key: string) {
                  ></DialogPortal
                ></DialogRoot
              >
+              <DialogRoot
+                ><DialogTrigger as-child
+                  ><UiButton variant="outline">打开组合设置窗口</UiButton></DialogTrigger
+                ><DialogPortal
+                  ><UiDialogOverlay /><UiDialogContent class="complex-dialog-demo"
+                    ><UiDialogHeader
+                      ><UiDialogTitle>管理设置</UiDialogTitle>
+                      <UiDialogDescription
+                        >组合展示已迁移的导航、设置行、滚动区与表单控件。</UiDialogDescription
+                      ></UiDialogHeader
+                    >
+                    <div class="complex-dialog-body">
+                      <p>※ 直接组合迁移后的 Navigation、SettingsRow、ScrollArea 与表单控件。</p>
+                      <div class="complex-dialog-main">
+                        <UiNavigation
+                          v-model="navigationValue"
+                          :items="navigationItems"
+                          label="设置分类"
+                        />
+                        <UiScrollArea class="complex-dialog-scroll">
+                          <UiSettingsGroup>
+                            <UiSettingsSection>当前预设差异</UiSettingsSection>
+                            <UiSettingRow label="装备信息对比">
+                              <label class="ui-control-row"
+                                ><UiCheckbox v-model="accepted" />开启</label
+                              >
+                            </UiSettingRow>
+                            <UiSettingRow label="角色技能效果透明" alt>
+                              <UiSlider v-model="volume" label="技能透明度" />
+                            </UiSettingRow>
+                            <UiSettingRow label="自动同步">
+                              <label class="ui-control-row"
+                                ><UiSwitch v-model="syncEnabled" />开启</label
+                              >
+                            </UiSettingRow>
+                            <UiSettingRow label="界面分类" alt>
+                              <UiAutocomplete
+                                v-model="autocompleteValue"
+                                :options="autocompleteOptions"
+                              />
+                            </UiSettingRow>
+                          </UiSettingsGroup>
+                        </UiScrollArea>
+                      </div>
+                    </div>
+                    <UiDialogFooter
+                      ><DialogClose :class="buttonVariants({ variant: 'outline' })"
+                        >返回</DialogClose
+                      ><DialogClose :class="buttonVariants()">应用</DialogClose></UiDialogFooter
+                    ></UiDialogContent
+                  ></DialogPortal
+                ></DialogRoot
+              >
              <output>{{ lastAction }}</output>
            </div>
          </UiPanel>
@@ -750,6 +927,67 @@ label > span,
  margin-top: 10px;
  color: var(--ui-primary-foreground);
 }
+.migration-stack {
+  display: grid;
+  gap: 12px;
+}
+.navigation-settings-demo {
+  display: grid;
+  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
+  gap: 12px;
+}
+.navigation-settings-demo :deep(.ui-navigation) {
+  --ui-navigation-width: 100%;
+}
+.shop-scroll-demo {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.22fr);
+  gap: 12px;
+}
+.catalog-scroll-area {
+  --ui-scroll-area-height: 158px;
+  border: 1px solid var(--ui-composition-border);
+}
+.scroll-demo-content {
+  display: grid;
+  padding: 8px 20px 8px 8px;
+  gap: 7px;
+  color: var(--ui-muted-foreground);
+}
+.scroll-demo-content b {
+  color: var(--ui-primary-foreground);
+  font-size: 10px;
+  font-weight: 400;
+}
+.complex-dialog-demo {
+  --ui-dialog-max-inline-size: 980px;
+}
+.complex-dialog-body {
+  display: grid;
+  gap: 10px;
+  padding: 10px;
+  background: var(--ui-dialog-background);
+}
+.complex-dialog-body p {
+  margin: 0;
+  padding: 10px;
+  border: 1px solid var(--ui-composition-border);
+  color: var(--ui-muted-foreground);
+  text-align: center;
+}
+.complex-dialog-main {
+  display: grid;
+  grid-template-columns: minmax(160px, 0.32fr) minmax(0, 1fr);
+  gap: 10px;
+  min-height: 0;
+}
+.complex-dialog-main :deep(.ui-navigation) {
+  --ui-navigation-width: 100%;
+}
+.complex-dialog-scroll {
+  --ui-scroll-area-height: 270px;
+  border: 1px solid var(--ui-composition-border);
+}
 .overlay-showcase {
  display: flex;
  flex-wrap: wrap;
@@ -816,6 +1054,10 @@ footer {
  .control-grid {
    grid-template-columns: 1fr 1fr;
  }
+  .navigation-settings-demo,
+  .shop-scroll-demo {
+    grid-template-columns: 1fr;
+  }
 }

@media (max-width: 520px) {
@@ -838,6 +1080,21 @@ footer {
  .slider-line {
    grid-template-columns: 1fr;
  }
+  .complex-dialog-main {
+    grid-template-columns: 1fr;
+  }
+  .complex-dialog-main :deep(.ui-navigation) {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .complex-dialog-main :deep(.ui-navigation__item) {
+    height: var(--ui-control-height-large);
+    grid-template-columns: 18px minmax(0, 1fr);
+    padding-inline: 7px;
+  }
+  .complex-dialog-main :deep(.ui-navigation__item > :last-child) {
+    display: none;
+  }
  .overlay-showcase output {
    width: 100%;
    margin-left: 0;