1

frontend/src/api/common.ts

@@ -20,7 +20,7 @@ let baseURL = '/api'
 
 // 避免远程开发的时候冲突
 if (process.env.NODE_ENV == 'development') {
-  baseURL = 'http://127.0.0.1:47173/api'
+  baseURL = '/api'
 }
 
 if (import.meta.env.MODE == 'web' || import.meta.env.MODE == 'show') {

frontend/src/pages/Dnfhelper/index.vue

@@ -11,8 +11,9 @@
         //   rgba(0, 0, 0, 0.95) 100%
         // ),
         `url(${getImageURL('adventure/bg.png')})`,
-      backgroundSize: '100% auto',
-      backgroundPosition: 'center',
+      backgroundSize: '80% auto',
+      backgroundPosition: 'center center',
+      backgroundRepeat: 'no-repeat',
       /* url(https://wfiles.gtimg.cn/wuji_open/wupload/dnf_universe_data.picture_info/30b81227_1245MGsPY_R.png); */
     }"
   >

frontend/src/pages/Dnfhelper/list.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="flex-1 overflow-hidden w-full flex items-center justify-center p-20 box-border">
-    <div class="max-h-full w-full overflow-auto flex flex-wrap gap-4 items-center">
+    <div
+      class="max-h-full w-full overflow-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4"
+    >
       <template v-for="item in sortedList" :key="item.roleId">
         <div
-          class="flex flex-col items-center gap-4 rounded-lg border-2 border-transparent border-solid hover:border-blue/80 w-40 relative h-50 cursor-pointer p-2"
+          class="mx-auto w-full max-w-52 h-65 flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-transparent border-solid hover:border-blue/80 cursor-pointer px-3 py-4 box-border"
           :style="{
             borderColor: acitveRoleId == item.roleId ? '#F4C08A' : '',
           }"
@@ -13,11 +15,9 @@
           <img
             :src="item.avatarLink"
             alt="avatar"
-            class="w-auto h-50 rounded-full object-cover border-2 border-white/50 absolute top--5"
+            class="h-auto w-40 rounded-full object-cover border-2 border-white/50 shrink-0"
           />
-          <div
-            class="absolute bottom-2 left-1/2 transform -translate-x-1/2 text-center flex flex-col w-50"
-          >
+          <div class="w-full text-center flex flex-col items-center leading-6">
             <span class="text-sm text-#DED29A">{{ item.roleName }}</span>
             <span class="text-sm text-#908150">{{ item.roleJob }}</span>
             <span class="text-sm text-[#3ea74e]">名望: {{ formatFame(item.fame) }}</span>
@@ -30,16 +30,18 @@
     <div class="flex-1"></div>
     <calc-button class="h-10 w-30">导入角色</calc-button>
     <div class="flex-1 flex justify-end px-10 gap-5">
-      <calc-button>选择职业</calc-button>
-      <calc-button>刷新</calc-button>
-      <calc-button>取消绑定</calc-button>
+      <calc-button @click="navToHome">选择职业</calc-button>
+      <calc-button @click="helperStore.refreshHelperInfo(helperStore.helperInfo?.id)">
+        刷新
+      </calc-button>
+      <calc-button @click="helperStore.logout">取消绑定</calc-button>
     </div>
   </div>
 </template>
 <script setup lang="ts" name="dnfhelper-list">
-import { computed } from 'vue'
-
+import router from '@/router'
 import { useDnfHelperStore } from '@/stores/dnfhelper'
+import { computed } from 'vue'
 
 const props = defineProps<{
   list: {
@@ -53,7 +55,6 @@ const props = defineProps<{
 
 const { list } = toRefs(props)
 const acitveRoleId = ref<string | null>(null)
-
 const helperStore = useDnfHelperStore()
 
 const sortedList = computed(() => {
@@ -64,6 +65,10 @@ const formatFame = (fame: number) => {
   return new Intl.NumberFormat('zh-CN').format(fame)
 }
 
+const navToHome = () => {
+  router.push({ path: '/' })
+}
+
 const chooseRole = ({ roleId }: { roleId: string }) => {
   console.log(roleId)
   acitveRoleId.value = roleId

frontend/src/pages/Dnfhelper/processing.vue

@@ -1,2 +1,10 @@
-<template></template>
-<script lang="ts" name="dnfhelper-processing" setup></script>
+<template>
+  <div class="w-full h-full flex flex-col items-center justify-center gap-1">
+    <img :src="getImageURL('loading2.webp')" alt="loading2" class="mb-1" />
+    <div>同步数据中</div>
+    <div>请稍候，正在处理从助手识别数据。请勿刷新页面。</div>
+  </div>
+</template>
+<script lang="ts" name="dnfhelper-processing" setup>
+import { getImageURL } from '@/utils/images'
+</script>

frontend/src/pages/Home/Index.vue

@@ -41,6 +41,8 @@ export default defineComponent(async () => {
 
   const adventure = await api.adventures()
 
+  // https://bbs.colg.cn/zfj_auth.html?r=${Date.now().toString()}
+
   return () => (
     <Fragment>
       <div
@@ -103,6 +105,15 @@ export default defineComponent(async () => {
         ></div>
       </div>
       */}
+      <div
+        class="flex flex-col"
+        style={`position: absolute;top: ${30 + 82 * 0}px;left: 750px;width: 160px;height: 150px;`}
+      >
+        <div
+          class="w-70px h-50px bg-no-repeat"
+          style={`z-index:5;background-position:2% 50%;background-size:100% auto;background-image: url('${import.meta.env.BASE_URL}images/tooltips/login.gif')`}
+        ></div>
+      </div>
     </Fragment>
   )
 })

frontend/src/stores/dnfhelper.ts

@@ -1,44 +1,48 @@
-import { defineStore } from "pinia";
-import api from "@/api";
-import type { IHelperInfo } from "@/api/info/type";
+import { defineStore } from 'pinia'
+import api from '@/api'
+import type { IHelperInfo } from '@/api/info/type'
 
-export const useDnfHelperStore = defineStore("dnfHelperStore", () => {
-  const helperInfo = useLocalStorage<IHelperInfo | null>("dnfHelperInfo", null, {
+export const useDnfHelperStore = defineStore('dnfHelperStore', () => {
+  const helperInfo = useLocalStorage<IHelperInfo | null>('dnfHelperInfo', null, {
     serializer: {
       read: (v) => (v ? JSON.parse(v) : null),
       write: (v) => JSON.stringify(v),
     },
-  });
+  })
 
-  const loading = ref(false);
-  const errorMessage = ref("");
+  const loading = ref(false)
+  const errorMessage = ref('')
 
-  const refleshHelperInfo = async (uid?: string) => {
-    if (!uid) return;
-    loading.value = true;
-    errorMessage.value = "";
+  const refreshHelperInfoInner = async (uid?: string) => {
+    if (!uid) return
+    loading.value = true
+    errorMessage.value = ''
     try {
-      const data = await api.getHelperList(uid);
+      const data = await api.getHelperList(uid)
       if (data) {
-        helperInfo.value = data;
+        helperInfo.value = data
       }
-      
     } catch (error) {
-      errorMessage.value = error instanceof Error ? error.message : "同步助手数据失败";
-      throw error;
+      errorMessage.value = error instanceof Error ? error.message : '同步助手数据失败'
+      throw error
     } finally {
-      loading.value = false;
+      loading.value = false
     }
-  };
+  }
 
   const refreshHelperInfo = async (uid?: string) => {
-    await refleshHelperInfo(uid);
-  };
+    await refreshHelperInfoInner(uid)
+  }
+
+  // Keep compatibility with existing callers.
+  const refleshHelperInfo = async (uid?: string) => {
+    await refreshHelperInfoInner(uid)
+  }
 
   const logout = () => {
-    helperInfo.value = null;
-    errorMessage.value = "";
-  };
+    helperInfo.value = null
+    errorMessage.value = ''
+  }
 
   return {
     helperInfo,
@@ -47,5 +51,5 @@ export const useDnfHelperStore = defineStore("dnfHelperStore", () => {
     refleshHelperInfo,
     refreshHelperInfo,
     logout,
-  };
-});
+  }
+})

frontend/src/utils/images.ts

@@ -2,7 +2,7 @@ let baseURL = 'https://image.dnftools.com'
 
 // 避免远程开发的时候冲突
 if (process.env.NODE_ENV == 'development') {
-  baseURL = 'http://127.0.0.1:3000'
+  baseURL = '/image'
 }
 
 if (import.meta.env.MODE == 'web' || import.meta.env.MODE == 'show') {

frontend/vite.config.ts

@@ -8,7 +8,7 @@ import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 // import RekaResolver from 'reka-ui/resolver'
 import UnoCSS from 'unocss/vite'
-import uncomponents from "unplugin-vue-components/vite"
+import uncomponents from 'unplugin-vue-components/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -19,9 +19,9 @@ export default defineConfig({
     UnoCSS(),
     uncomponents({
       dts: true,
-      dirs: ["src/components/"],
+      dirs: ['src/components/'],
       allowOverrides: true,
-      directoryAsNamespace: true
+      directoryAsNamespace: true,
     }),
     // Components({
     //   dts: 'src/types/components.d.ts',
@@ -44,6 +44,21 @@ export default defineConfig({
       },
     }),
   ],
+  server: {
+    host: '0.0.0.0',
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:47173/api',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+      '/image': {
+        target: 'http://127.0.0.1:3000',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/image/, ''),
+      },
+    },
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),

frontendNew/MIGRATION_REGRESSION_CHECKLIST.md

@@ -0,0 +1,56 @@
+# Character Migration Regression Checklist
+
+Last updated: 2026-05-28
+Scope: frontendNew Character module (Equipment / Skill / Forge / Result)
+
+## 1. Skill page
+
+- [ ] Enter Skill page and switch between `结果面板` and `技能详情`.
+- [ ] Verify there is only one visible result panel in Skill page.
+- [ ] Change at least one skill level and confirm result recalculates automatically.
+- [ ] Set and clear baseline in result panel.
+
+## 2. Forge page
+
+- [ ] Enter Forge page and switch between `结果面板` and `配置编辑`.
+- [ ] In mobile width, use accordion module groups to switch `装备打造 / 誓约 / 时装徽章 / 全局`.
+- [ ] Edit reinforce/refine/adaptation and confirm result recalculates automatically.
+- [ ] Trigger quick reset and confirm change source logs are appended.
+
+## 3. Result states (4-state)
+
+- [ ] Loading: trigger compute and confirm loading state appears.
+- [ ] Error: simulate invalid calculation and confirm retry button appears.
+- [ ] Empty: clear config to no-result state and confirm empty hint appears.
+- [ ] Success: valid config renders result summary and details.
+
+## 4. Baseline comparison
+
+- [ ] Set current result as baseline and verify delta labels update.
+- [ ] Modify skill counts and verify total diff and row diff update.
+- [ ] Clear baseline and verify diff falls back to absolute values.
+
+## 5. Change source logs
+
+- [ ] Perform updates in Equipment / Skill / Forge and verify source names and details.
+- [ ] Verify log list is scrollable and supports clear action.
+- [ ] Confirm latest records appear first.
+
+## 6. This iteration patches
+
+- [x] CalcDetail left panel switched to accordion groups.
+- [x] Forge config module selector supports mobile accordion groups.
+- [x] Forge form density reduced for small screens (`text-xs`, compact paddings).
+
+## 7. Sidebar helper binding UX
+
+- [ ] Without helper binding, sidebar user section should show placeholder name and guide text.
+- [ ] Dropdown should provide `绑定/同步助手` entry and open `/dcalc/dnfhelper`.
+- [ ] `取消绑定` should clear helper info via store logout action.
+- [x] dnfhelper store keeps backward-compatible `refleshHelperInfo` alias.
+
+## Validation commands
+
+- `cd frontendNew && pnpm type-check`
+- `cd frontendNew && pnpm lint`
+- `cd frontendNew && pnpm build`

frontendNew/src/api/common.ts

@@ -1,6 +1,5 @@
 import type { AxiosInstance, AxiosResponse } from "axios";
 import axios from "axios";
-import { h } from "vue";
 import { ungzip } from "pako";
 import { useInfoStore } from "@/stores";
 // import { useDialog } from '@/components/hooks/dialog'
@@ -20,7 +19,7 @@ let baseURL = "/api";
 
 // 避免远程开发的时候冲突
 if (import.meta.env.MODE == "development") {
-  baseURL = "http://127.0.0.1:47173/api";
+  baseURL = "/api";
 }
 
 if (import.meta.env.MODE == "web" || import.meta.env.MODE == "show") {
@@ -105,7 +104,7 @@ export function defineRequest<T>(fn: (ax: AxiosInstance) => T) {
           try {
             const data = unzip(atob(response.data.data as string));
             response.data.data = JSON.parse(data);
-          } catch (e) {}
+          } catch {}
         }
         return response.data;
       },

frontendNew/src/api/info/type.ts

@@ -173,10 +173,10 @@ export interface ISkillInfo {
   maxLevel: number;
   requiredLevel: number;
   requiredLevelRange: number;
-  preRequiredSkill: any;
+  preRequiredSkill: unknown;
   jobId: string;
   jobName: string;
-  jobGrowLevel: any[];
+  jobGrowLevel: unknown[];
   evolution: Evolution[];
   enhancement: Enhancement[];
   attribute: Attribute;

frontendNew/src/api/types.ts

@@ -1,6 +1,6 @@
-export interface IDataType<T = any> {
-  code?: number
-  message: string
-  data: T
-  state?: number
+export interface IDataType<T = unknown> {
+  code?: number;
+  message: string;
+  data: T;
+  state?: number;
 }

frontendNew/src/components/AppSidebar.vue

@@ -46,10 +46,12 @@ const toggleDarkMode = () => {
 const dnfHelperStore = useDnfHelperStore();
 
 const userInfo = computed(() => {
+  const helper = dnfHelperStore.helperInfo;
+  const hasBind = !!helper?.id;
   return {
-    name: dnfHelperStore.helperInfo?.name ?? "尚未绑定助手ID",
-    id: dnfHelperStore.helperInfo?.id ?? "",
-    avatar: dnfHelperStore.helperInfo?.avatar ?? "",
+    name: helper?.name ?? "尚未绑定助手ID",
+    id: hasBind ? (helper?.id ?? "") : "前往计算器页绑定",
+    avatar: helper?.avatar ?? "",
   };
 });
 

frontendNew/src/components/NavUser.vue

@@ -32,6 +32,10 @@ const { user } = toRefs(props);
 const { isMobile } = useSidebar();
 
 const helperStore = useDnfHelperStore();
+
+const bindHelper = () => {
+  window.location.href = "/dcalc/dnfhelper";
+};
 </script>
 
 <template>
@@ -81,6 +85,10 @@ const helperStore = useDnfHelperStore();
           </DropdownMenuGroup> -->
           <DropdownMenuSeparator />
           <DropdownMenuGroup>
+            <DropdownMenuItem @click="bindHelper">
+              <Bell />
+              绑定/同步助手
+            </DropdownMenuItem>
             <!-- <DropdownMenuItem>
               <BadgeCheck />
               反馈
@@ -95,10 +103,7 @@ const helperStore = useDnfHelperStore();
             </DropdownMenuItem>
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
-          <DropdownMenuItem
-            :disabled="!helperStore.helperInfo"
-            @click="helperStore.helperInfo = null"
-          >
+          <DropdownMenuItem :disabled="!helperStore.helperInfo" @click="helperStore.logout()">
             <LogOut />
             取消绑定
           </DropdownMenuItem>

frontendNew/src/components/ui/accordion/Accordion.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
-import { AccordionRoot, useForwardPropsEmits } from 'reka-ui'
+import type { AccordionRootEmits, AccordionRootProps } from "reka-ui";
+import { AccordionRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<AccordionRootProps>()
-const emits = defineEmits<AccordionRootEmits>()
+const props = defineProps<AccordionRootProps>();
+const emits = defineEmits<AccordionRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>

frontendNew/src/components/ui/accordion/AccordionContent.vue

@@ -1,16 +1,21 @@
 <script setup lang="ts">
-import type { AccordionContentProps } from 'reka-ui'
-import { AccordionContent } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { AccordionContentProps } from "reka-ui";
+import { AccordionContent } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AccordionContentProps & { class?: string }>()
+const props = defineProps<AccordionContentProps & { class?: string }>();
 </script>
 
 <template>
   <AccordionContent
     data-slot="accordion-content"
     v-bind="props"
-    :class="cn('overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down', props.class)"
+    :class="
+      cn(
+        'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+        props.class,
+      )
+    "
   >
     <div class="pb-3 pt-0">
       <slot />

frontendNew/src/components/ui/accordion/AccordionItem.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { AccordionItemProps } from 'reka-ui'
-import { AccordionItem } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { AccordionItemProps } from "reka-ui";
+import { AccordionItem } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AccordionItemProps & { class?: string }>()
+const props = defineProps<AccordionItemProps & { class?: string }>();
 </script>
 
 <template>

frontendNew/src/components/ui/accordion/AccordionTrigger.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ChevronDown } from 'lucide-vue-next'
-import type { AccordionTriggerProps } from 'reka-ui'
-import { AccordionHeader, AccordionTrigger } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { ChevronDown } from "lucide-vue-next";
+import type { AccordionTriggerProps } from "reka-ui";
+import { AccordionHeader, AccordionTrigger } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AccordionTriggerProps & { class?: string }>()
+const props = defineProps<AccordionTriggerProps & { class?: string }>();
 </script>
 
 <template>
@@ -12,10 +12,17 @@ const props = defineProps<AccordionTriggerProps & { class?: string }>()
     <AccordionTrigger
       data-slot="accordion-trigger"
       v-bind="props"
-      :class="cn('group/accordion-trigger flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', props.class)"
+      :class="
+        cn(
+          'group/accordion-trigger flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
     >
       <slot />
-      <ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDown
+        class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"
+      />
     </AccordionTrigger>
   </AccordionHeader>
 </template>

frontendNew/src/components/ui/accordion/index.ts

@@ -1,4 +1,4 @@
-export { default as Accordion } from './Accordion.vue'
-export { default as AccordionItem } from './AccordionItem.vue'
-export { default as AccordionTrigger } from './AccordionTrigger.vue'
-export { default as AccordionContent } from './AccordionContent.vue'
+export { default as Accordion } from "./Accordion.vue";
+export { default as AccordionItem } from "./AccordionItem.vue";
+export { default as AccordionTrigger } from "./AccordionTrigger.vue";
+export { default as AccordionContent } from "./AccordionContent.vue";

frontendNew/src/components/ui/scroll-area/ScrollArea.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import type { ScrollAreaRootProps } from 'reka-ui'
-import { ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { ScrollAreaRootProps } from "reka-ui";
+import { ScrollAreaRoot, ScrollAreaViewport } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ScrollAreaRootProps & { class?: string }>()
+const props = defineProps<ScrollAreaRootProps & { class?: string }>();
 </script>
 
 <template>
-  <ScrollAreaRoot data-slot="scroll-area" :class="cn('relative overflow-hidden', props.class)" v-bind="props">
+  <ScrollAreaRoot
+    data-slot="scroll-area"
+    :class="cn('relative overflow-hidden', props.class)"
+    v-bind="props"
+  >
     <ScrollAreaViewport class="size-full rounded-[inherit]">
       <slot />
     </ScrollAreaViewport>

frontendNew/src/components/ui/scroll-area/ScrollBar.vue

@@ -1,22 +1,26 @@
 <script setup lang="ts">
-import type { ScrollAreaScrollbarProps } from 'reka-ui'
-import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { ScrollAreaScrollbarProps } from "reka-ui";
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: string }>(), {
-  orientation: 'vertical',
-})
+  orientation: "vertical",
+});
 </script>
 
 <template>
   <ScrollAreaScrollbar
     data-slot="scroll-area-scrollbar"
     v-bind="props"
-    :class="cn(
-      'flex touch-none select-none p-px transition-colors',
-      props.orientation === 'vertical' ? 'h-full w-2.5 border-l border-l-transparent' : 'h-2.5 w-full border-t border-t-transparent',
-      props.class,
-    )"
+    :class="
+      cn(
+        'flex touch-none select-none p-px transition-colors',
+        props.orientation === 'vertical'
+          ? 'h-full w-2.5 border-l border-l-transparent'
+          : 'h-2.5 w-full border-t border-t-transparent',
+        props.class,
+      )
+    "
   >
     <ScrollAreaThumb data-slot="scroll-area-thumb" class="relative flex-1 rounded-full bg-border" />
   </ScrollAreaScrollbar>

frontendNew/src/components/ui/scroll-area/index.ts

@@ -1,2 +1,2 @@
-export { default as ScrollArea } from './ScrollArea.vue'
-export { default as ScrollBar } from './ScrollBar.vue'
+export { default as ScrollArea } from "./ScrollArea.vue";
+export { default as ScrollBar } from "./ScrollBar.vue";

frontendNew/src/pages/Dcalc/Character/CalcDetail/index.vue

@@ -4,6 +4,12 @@ import type { IResultSkill } from "@/api/calc/type";
 import { useConfigStore, useInfoStore } from "@/stores";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Input } from "@/components/ui/input";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import Tabs from "@/components/ui/tabs/Tabs.vue";
@@ -240,6 +246,7 @@ const equippedParts = computed(() =>
 /* ─── Change sources ─── */
 const changeSources = computed(() => configStore.changeSourceLogs.slice(0, 8));
 const clearChangeSources = () => configStore.clearChangeSource();
+const leftPanelOpenSections = ["equipped", "stats", "suit", "equipped-list"];
 </script>
 
 <template>
@@ -248,152 +255,166 @@ const clearChangeSources = () => configStore.clearChangeSource();
     <div
       class="flex w-full flex-none flex-col gap-3 lg:w-72 lg:overflow-y-auto lg:overflow-x-hidden"
     >
-      <!-- Equipment / Oath grid -->
       <Card>
-        <CardContent class="space-y-2 p-3">
-          <Tabs :model-value="displayTab">
-            <TabsList class="grid w-full grid-cols-2">
-              <TabsTrigger value="equ" @click="displayTab = 'equ'">装备</TabsTrigger>
-              <TabsTrigger value="oath" @click="displayTab = 'oath'">誓约</TabsTrigger>
-            </TabsList>
-          </Tabs>
-          <div v-if="displayTab === 'equ'">
-            <EquList
-              v-model:part="equippedPart"
-              :detail="configStore.config.equips"
-              :with-sub-weapon="infoStore.infos?.alter?.includes('vegabond') ?? false"
-              :with-pet="true"
-            />
-          </div>
-          <div v-else>
-            <OathList v-model:part="equippedOathPart" :detail="configStore.config.oaths" />
-          </div>
-        </CardContent>
-      </Card>
+        <CardContent class="py-2">
+          <Accordion type="multiple" :default-value="leftPanelOpenSections" class="w-full">
+            <AccordionItem value="equipped">
+              <AccordionTrigger>穿戴概览</AccordionTrigger>
+              <AccordionContent>
+                <div class="space-y-2 px-1">
+                  <Tabs :model-value="displayTab">
+                    <TabsList class="grid w-full grid-cols-2">
+                      <TabsTrigger value="equ" @click="displayTab = 'equ'">装备</TabsTrigger>
+                      <TabsTrigger value="oath" @click="displayTab = 'oath'">誓约</TabsTrigger>
+                    </TabsList>
+                  </Tabs>
+                  <div v-if="displayTab === 'equ'">
+                    <EquList
+                      v-model:part="equippedPart"
+                      :detail="configStore.config.equips"
+                      :with-sub-weapon="infoStore.infos?.alter?.includes('vegabond') ?? false"
+                      :with-pet="true"
+                    />
+                  </div>
+                  <div v-else>
+                    <OathList v-model:part="equippedOathPart" :detail="configStore.config.oaths" />
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
 
-      <!-- Character stats -->
-      <Card v-if="resultState?.info?.length">
-        <CardHeader class="pb-1 pt-3">
-          <CardTitle class="text-xs text-muted-foreground">角色属性</CardTitle>
-        </CardHeader>
-        <CardContent class="pb-3">
-          <div class="grid grid-cols-2 gap-x-3 gap-y-0.5 text-xs">
-            <template v-for="info in resultState.info" :key="info.id">
-              <div
-                class="flex justify-between gap-1"
-                :class="
-                  typeof info.value === 'string' && info.value.includes('/') ? 'col-span-2' : ''
-                "
-              >
-                <span class="shrink-0 text-muted-foreground">{{ info.name }}</span>
-                <span class="text-right font-medium text-emerald-600">{{ info.value }}</span>
-              </div>
-            </template>
-          </div>
-        </CardContent>
-      </Card>
+            <AccordionItem v-if="resultState?.info?.length" value="stats">
+              <AccordionTrigger>角色属性</AccordionTrigger>
+              <AccordionContent>
+                <div class="grid grid-cols-2 gap-x-3 gap-y-0.5 px-1 text-xs">
+                  <template v-for="info in resultState.info" :key="info.id">
+                    <div
+                      class="flex justify-between gap-1"
+                      :class="
+                        typeof info.value === 'string' && info.value.includes('/')
+                          ? 'col-span-2'
+                          : ''
+                      "
+                    >
+                      <span class="shrink-0 text-muted-foreground">{{ info.name }}</span>
+                      <span class="text-right font-medium text-emerald-600">{{ info.value }}</span>
+                    </div>
+                  </template>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
 
-      <!-- Suit info + oath skills -->
-      <Card v-if="suit || oathSuit">
-        <CardContent class="space-y-1 px-3 py-2 text-xs">
-          <div v-if="suit" class="flex items-center gap-1.5">
-            <img
-              :src="getImageURL(`/equipment${suit.imageUrl}`)"
-              alt=""
-              class="size-5 object-contain"
-            />
-            <span :class="rarityColor(suit.rarity)" class="flex-1">{{ suit.name }} 套装</span>
-            <span class="shrink-0 text-muted-foreground">{{ suit.rarity }}</span>
-            <span class="shrink-0 font-medium">{{ suit.point }}点</span>
-          </div>
-          <div v-if="oathSuit" class="flex items-center gap-1.5">
-            <img
-              :src="getImageURL(`/equipment${oathSuit.imageUrl}`)"
-              alt=""
-              class="size-5 object-contain"
-            />
-            <span :class="rarityColor(oathSuit.rarity)" class="flex-1"
-              >{{ oathSuit.name }} 誓约</span
-            >
-            <span class="shrink-0 text-muted-foreground">{{ oathSuit.rarity }}</span>
-            <span class="shrink-0 font-medium">{{ oathSuit.point }}点</span>
-          </div>
-          <!-- Oath skill selector -->
-          <div v-if="oathSkillsSorted.length" class="flex items-center justify-center gap-4 pt-1">
-            <button
-              v-for="skill in oathSkillsSorted"
-              :key="skill.id"
-              type="button"
-              :disabled="!skill.enable"
-              class="rounded-full transition-opacity"
-              :class="[
-                skill.enable ? 'cursor-pointer opacity-100' : 'cursor-not-allowed opacity-40',
-                skill.active ? 'ring-2 ring-amber-400 ring-offset-1' : '',
-              ]"
-              @click="selectOathSkill(skill)"
-            >
-              <img
-                :src="getImageURL(skill.imageUrl)"
-                :alt="skill.name"
-                class="size-8 rounded-full object-contain"
-              />
-            </button>
-          </div>
-        </CardContent>
-      </Card>
+            <AccordionItem v-if="suit || oathSuit" value="suit">
+              <AccordionTrigger>套装与誓约</AccordionTrigger>
+              <AccordionContent>
+                <div class="space-y-1 px-1 text-xs">
+                  <div v-if="suit" class="flex items-center gap-1.5">
+                    <img
+                      :src="getImageURL(`/equipment${suit.imageUrl}`)"
+                      alt=""
+                      class="size-5 object-contain"
+                    />
+                    <span :class="rarityColor(suit.rarity)" class="flex-1"
+                      >{{ suit.name }} 套装</span
+                    >
+                    <span class="shrink-0 text-muted-foreground">{{ suit.rarity }}</span>
+                    <span class="shrink-0 font-medium">{{ suit.point }}点</span>
+                  </div>
+                  <div v-if="oathSuit" class="flex items-center gap-1.5">
+                    <img
+                      :src="getImageURL(`/equipment${oathSuit.imageUrl}`)"
+                      alt=""
+                      class="size-5 object-contain"
+                    />
+                    <span :class="rarityColor(oathSuit.rarity)" class="flex-1"
+                      >{{ oathSuit.name }} 誓约</span
+                    >
+                    <span class="shrink-0 text-muted-foreground">{{ oathSuit.rarity }}</span>
+                    <span class="shrink-0 font-medium">{{ oathSuit.point }}点</span>
+                  </div>
+                  <div
+                    v-if="oathSkillsSorted.length"
+                    class="flex items-center justify-center gap-4 pt-1"
+                  >
+                    <button
+                      v-for="skill in oathSkillsSorted"
+                      :key="skill.id"
+                      type="button"
+                      :disabled="!skill.enable"
+                      class="rounded-full transition-opacity"
+                      :class="[
+                        skill.enable
+                          ? 'cursor-pointer opacity-100'
+                          : 'cursor-not-allowed opacity-40',
+                        skill.active ? 'ring-2 ring-amber-400 ring-offset-1' : '',
+                      ]"
+                      @click="selectOathSkill(skill)"
+                    >
+                      <img
+                        :src="getImageURL(skill.imageUrl)"
+                        :alt="skill.name"
+                        class="size-8 rounded-full object-contain"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
 
-      <!-- Equipped items list -->
-      <Card v-if="equippedParts.length">
-        <CardHeader class="pb-1 pt-3">
-          <CardTitle class="text-xs text-muted-foreground">穿戴装备信息</CardTitle>
-        </CardHeader>
-        <CardContent class="pb-2">
-          <ScrollArea class="max-h-64">
-            <div class="space-y-0.5 text-xs">
-              <div
-                v-for="part in equippedParts"
-                :key="part"
-                class="flex items-center gap-1.5 rounded px-1 py-0.5 hover:bg-muted/40"
-              >
-                <img
-                  :src="getImageURL(`/equipment/part/${part}.png`)"
-                  :alt="part"
-                  class="size-4 shrink-0 object-contain"
-                />
-                <img
-                  v-if="adaptation(part) > 0"
-                  :src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
-                  alt=""
-                  class="h-2.5 w-3 shrink-0 object-contain"
-                />
-                <span
-                  v-if="(configStore.config.equips[part]?.reinforce ?? 0) > 0"
-                  class="shrink-0 font-medium"
-                  :class="
-                    configStore.config.equips[part]?.reinforceType === 1
-                      ? 'text-[#ef28c1]'
-                      : 'text-[#68d5ed]'
-                  "
-                  >+{{ configStore.config.equips[part]?.reinforce }}</span
-                >
-                <span
-                  v-if="(configStore.config.equips[part]?.refine ?? 0) > 0"
-                  class="shrink-0 text-[#9879da]"
-                  >({{ configStore.config.equips[part]?.refine }})</span
-                >
-                <span
-                  class="truncate"
-                  :class="
-                    rarityColor(equById(configStore.config.equips[part]?.id ?? '')?.rarity ?? '')
-                  "
-                  >{{ equById(configStore.config.equips[part]?.id ?? "")?.name ?? "—" }}</span
-                >
-              </div>
-            </div>
-            <template #scrollbar>
-              <ScrollBar orientation="vertical" />
-            </template>
-          </ScrollArea>
+            <AccordionItem v-if="equippedParts.length" value="equipped-list">
+              <AccordionTrigger>穿戴装备信息</AccordionTrigger>
+              <AccordionContent>
+                <ScrollArea class="max-h-64 px-1">
+                  <div class="space-y-0.5 text-xs">
+                    <div
+                      v-for="part in equippedParts"
+                      :key="part"
+                      class="flex items-center gap-1.5 rounded px-1 py-0.5 hover:bg-muted/40"
+                    >
+                      <img
+                        :src="getImageURL(`/equipment/part/${part}.png`)"
+                        :alt="part"
+                        class="size-4 shrink-0 object-contain"
+                      />
+                      <img
+                        v-if="adaptation(part) > 0"
+                        :src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
+                        alt=""
+                        class="h-2.5 w-3 shrink-0 object-contain"
+                      />
+                      <span
+                        v-if="(configStore.config.equips[part]?.reinforce ?? 0) > 0"
+                        class="shrink-0 font-medium"
+                        :class="
+                          configStore.config.equips[part]?.reinforceType === 1
+                            ? 'text-[#ef28c1]'
+                            : 'text-[#68d5ed]'
+                        "
+                        >+{{ configStore.config.equips[part]?.reinforce }}</span
+                      >
+                      <span
+                        v-if="(configStore.config.equips[part]?.refine ?? 0) > 0"
+                        class="shrink-0 text-[#9879da]"
+                        >({{ configStore.config.equips[part]?.refine }})</span
+                      >
+                      <span
+                        class="truncate"
+                        :class="
+                          rarityColor(
+                            equById(configStore.config.equips[part]?.id ?? '')?.rarity ?? '',
+                          )
+                        "
+                        >{{ equById(configStore.config.equips[part]?.id ?? "")?.name ?? "—" }}</span
+                      >
+                    </div>
+                  </div>
+                  <template #scrollbar>
+                    <ScrollBar orientation="vertical" />
+                  </template>
+                </ScrollArea>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
         </CardContent>
       </Card>
     </div>

frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/Index.vue

@@ -21,8 +21,6 @@ import {
   ColorSwatchPickerItemSwatch,
   ColorSwatchPickerRoot,
 } from "reka-ui";
-import EquList from "@/components/dnf/Equipment/List/index.vue";
-import OathList from "@/components/dnf/Equipment/Oath/index.vue";
 import EquipmentCell from "./components/EquipmentCell.vue";
 import { getImageURL } from "@/utils";
 import ResultPanel from "@/pages/Dcalc/Character/Result/Index.vue";

frontendNew/src/pages/Dcalc/Character/Forge/index.vue

@@ -5,6 +5,12 @@ import { useConfigStore, useInfoStore } from "@/stores";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import ResultPanel from "@/pages/Dcalc/Character/Result/Index.vue";
 
 const configStore = useConfigStore();
@@ -369,7 +375,10 @@ const resetAllForge = () => {
           </Button>
         </div>
 
-        <div v-if="forgeViewTab === 'config'" class="inline-flex flex-wrap rounded-md border p-1">
+        <div
+          v-if="forgeViewTab === 'config'"
+          class="hidden inline-flex flex-wrap rounded-md border p-1 sm:inline-flex"
+        >
           <Button
             size="sm"
             :variant="moduleMode === 'equip' ? 'default' : 'ghost'"
@@ -400,6 +409,39 @@ const resetAllForge = () => {
           </Button>
         </div>
 
+        <div v-if="forgeViewTab === 'config'" class="sm:hidden">
+          <Accordion
+            type="single"
+            :default-value="moduleMode"
+            class="w-full rounded-md border px-2"
+          >
+            <AccordionItem value="equip">
+              <AccordionTrigger @click="moduleMode = 'equip'">装备打造</AccordionTrigger>
+              <AccordionContent class="text-xs text-muted-foreground"
+                >强化、锻造、品级等参数编辑。</AccordionContent
+              >
+            </AccordionItem>
+            <AccordionItem value="oath">
+              <AccordionTrigger @click="moduleMode = 'oath'">誓约</AccordionTrigger>
+              <AccordionContent class="text-xs text-muted-foreground"
+                >誓约槽位适配值编辑。</AccordionContent
+              >
+            </AccordionItem>
+            <AccordionItem value="avatar">
+              <AccordionTrigger @click="moduleMode = 'avatar'">时装徽章</AccordionTrigger>
+              <AccordionContent class="text-xs text-muted-foreground"
+                >时装、徽章、等级与条目配置。</AccordionContent
+              >
+            </AccordionItem>
+            <AccordionItem value="global">
+              <AccordionTrigger @click="moduleMode = 'global'">全局</AccordionTrigger>
+              <AccordionContent class="text-xs text-muted-foreground"
+                >系统奶与组队开关等全局参数。</AccordionContent
+              >
+            </AccordionItem>
+          </Accordion>
+        </div>
+
         <div class="flex flex-wrap gap-2">
           <Button size="sm" variant="outline" @click="resetAllForge">快速重置打造</Button>
           <router-link to="/dcalc/dnfhelper">
@@ -432,336 +474,350 @@ const resetAllForge = () => {
         v-if="forgeViewTab === 'config' && moduleMode === 'equip'"
         class="grid grid-cols-1 gap-4"
       >
-      <Card class="border-border/60 bg-card/90">
-        <CardHeader>
-          <CardTitle class="flex items-center gap-2">
-            <Hammer class="size-4" />
-            装备打造编辑器
-          </CardTitle>
-          <CardDescription>强化、锻造、品级编辑并即时回写配置。</CardDescription>
-        </CardHeader>
-        <CardContent class="space-y-3">
-          <div
-            v-for="part in parts"
-            :key="part"
-            class="grid grid-cols-1 gap-2 rounded-md border p-3 text-sm md:grid-cols-[7rem_1fr_6rem_6rem_6rem_auto] md:items-center"
-          >
-            <div class="font-medium">{{ part }}</div>
-            <div class="truncate text-muted-foreground">
-              {{ equipNameById.get(equipCfg(part).id) || "未选择装备（可在装备页选择）" }}
-            </div>
-            <Input
-              :model-value="String(equipCfg(part).reinforce)"
-              type="number"
-              min="0"
-              class="h-8"
-              placeholder="强化"
-              @update:model-value="(value) => setNumberField(part, 'reinforce', String(value))"
-            />
-            <Input
-              :model-value="String(equipCfg(part).refine)"
-              type="number"
-              min="0"
-              class="h-8"
-              placeholder="锻造"
-              @update:model-value="(value) => setNumberField(part, 'refine', String(value))"
-            />
-            <Input
-              :model-value="String(equipCfg(part).adaptation)"
-              type="number"
-              min="0"
-              class="h-8"
-              placeholder="品级"
-              @update:model-value="(value) => setNumberField(part, 'adaptation', String(value))"
-            />
-            <Button size="sm" variant="ghost" @click="resetEquipPart(part)">重置</Button>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-
-    <div v-if="forgeViewTab === 'config' && moduleMode === 'oath'" class="grid grid-cols-1 gap-4">
-      <Card class="border-border/60 bg-card/90">
-        <CardHeader>
-          <CardTitle class="flex items-center gap-2">
-            <ShieldCheck class="size-4" />
-            誓约子模块
-          </CardTitle>
-          <CardDescription>编辑誓约槽位适配值。</CardDescription>
-        </CardHeader>
-        <CardContent class="space-y-3">
-          <div
-            v-for="part in oathParts"
-            :key="part"
-            class="grid grid-cols-1 gap-2 rounded-md border p-3 text-sm md:grid-cols-[6rem_1fr_7rem_auto] md:items-center"
-          >
-            <div class="font-medium">槽位 {{ part }}</div>
-            <div class="truncate text-muted-foreground">
-              {{ oathNameById.get(oathCfg(part).id) || "未选择誓约（可在装备页选择）" }}
-            </div>
-            <Input
-              :model-value="String(oathCfg(part).adaptation)"
-              type="number"
-              min="0"
-              class="h-8"
-              placeholder="适配"
-              @update:model-value="(value) => setOathAdaptation(part, String(value))"
-            />
-            <Button size="sm" variant="ghost" @click="resetOathPart(part)">重置</Button>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-
-    <div
-      v-if="forgeViewTab === 'config' && moduleMode === 'avatar'"
-      class="grid grid-cols-1 gap-4 xl:grid-cols-2"
-    >
-      <Card class="border-border/60 bg-card/90">
-        <CardHeader>
-          <CardTitle class="flex items-center gap-2">
-            <Sparkles class="size-4" />
-            时装编辑
-          </CardTitle>
-          <CardDescription>支持附魔、徽章项、品级和属性值编辑。</CardDescription>
-        </CardHeader>
-        <CardContent class="space-y-3 text-sm">
-          <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
-            <div class="text-muted-foreground">筛选</div>
-            <div class="flex items-center gap-2">
-              <Input v-model="avatarOptionKeyword" class="h-8" placeholder="搜索附魔/徽章可选项" />
-              <label class="inline-flex items-center gap-1 text-xs whitespace-nowrap">
-                <input v-model="onlyConfiguredAvatarParts" type="checkbox" class="size-3.5" />
-                仅已配置部位
-              </label>
-            </div>
-          </div>
-
-          <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
-            <div class="text-muted-foreground">部位</div>
-            <select
-              class="h-8 rounded-md border border-input bg-background px-2"
-              v-model="avatarPart"
+        <Card class="border-border/60 bg-card/90">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <Hammer class="size-4" />
+              装备打造编辑器
+            </CardTitle>
+            <CardDescription>强化、锻造、品级编辑并即时回写配置。</CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-2 text-xs sm:space-y-3 sm:text-sm">
+            <div
+              v-for="part in parts"
+              :key="part"
+              class="grid grid-cols-1 gap-2 rounded-md border p-2 md:grid-cols-[7rem_1fr_6rem_6rem_6rem_auto] md:items-center md:p-3"
             >
-              <option v-for="part in avatarParts" :key="part" :value="part">{{ part }}</option>
-            </select>
-          </div>
+              <div class="font-medium">{{ part }}</div>
+              <div class="truncate text-muted-foreground">
+                {{ equipNameById.get(equipCfg(part).id) || "未选择装备（可在装备页选择）" }}
+              </div>
+              <Input
+                :model-value="String(equipCfg(part).reinforce)"
+                type="number"
+                min="0"
+                class="h-8 text-xs"
+                placeholder="强化"
+                @update:model-value="(value) => setNumberField(part, 'reinforce', String(value))"
+              />
+              <Input
+                :model-value="String(equipCfg(part).refine)"
+                type="number"
+                min="0"
+                class="h-8 text-xs"
+                placeholder="锻造"
+                @update:model-value="(value) => setNumberField(part, 'refine', String(value))"
+              />
+              <Input
+                :model-value="String(equipCfg(part).adaptation)"
+                type="number"
+                min="0"
+                class="h-8 text-xs"
+                placeholder="品级"
+                @update:model-value="(value) => setNumberField(part, 'adaptation', String(value))"
+              />
+              <Button size="sm" variant="ghost" @click="resetEquipPart(part)">重置</Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
 
-          <div
-            v-if="hasAvatarEnchant"
-            class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center"
-          >
-            <div class="text-muted-foreground">附魔</div>
-            <select
-              class="h-8 rounded-md border border-input bg-background px-2"
-              :value="avatarCfg(avatarPart).enchant"
-              @change="
-                (event) => setAvatarField('enchant', (event.target as HTMLSelectElement).value)
-              "
+      <div v-if="forgeViewTab === 'config' && moduleMode === 'oath'" class="grid grid-cols-1 gap-4">
+        <Card class="border-border/60 bg-card/90">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <ShieldCheck class="size-4" />
+              誓约子模块
+            </CardTitle>
+            <CardDescription>编辑誓约槽位适配值。</CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-2 text-xs sm:space-y-3 sm:text-sm">
+            <div
+              v-for="part in oathParts"
+              :key="part"
+              class="grid grid-cols-1 gap-2 rounded-md border p-2 md:grid-cols-[6rem_1fr_7rem_auto] md:items-center md:p-3"
             >
-              <option value="">无</option>
-              <option v-for="item in avatarEnchantOptions" :key="item.id" :value="String(item.id)">
-                {{ item.detail }}
-              </option>
-            </select>
-          </div>
+              <div class="font-medium">槽位 {{ part }}</div>
+              <div class="truncate text-muted-foreground">
+                {{ oathNameById.get(oathCfg(part).id) || "未选择誓约（可在装备页选择）" }}
+              </div>
+              <Input
+                :model-value="String(oathCfg(part).adaptation)"
+                type="number"
+                min="0"
+                class="h-8 text-xs"
+                placeholder="适配"
+                @update:model-value="(value) => setOathAdaptation(part, String(value))"
+              />
+              <Button size="sm" variant="ghost" @click="resetOathPart(part)">重置</Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
 
-          <template v-else>
+      <div
+        v-if="forgeViewTab === 'config' && moduleMode === 'avatar'"
+        class="grid grid-cols-1 gap-4 xl:grid-cols-2"
+      >
+        <Card class="border-border/60 bg-card/90">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <Sparkles class="size-4" />
+              时装编辑
+            </CardTitle>
+            <CardDescription>支持附魔、徽章项、品级和属性值编辑。</CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-2 text-xs sm:space-y-3 sm:text-sm">
             <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
-              <div class="text-muted-foreground">品级</div>
+              <div class="text-muted-foreground">筛选</div>
+              <div class="flex items-center gap-2">
+                <Input
+                  v-model="avatarOptionKeyword"
+                  class="h-8 text-xs"
+                  placeholder="搜索附魔/徽章可选项"
+                />
+                <label class="inline-flex items-center gap-1 text-xs whitespace-nowrap">
+                  <input v-model="onlyConfiguredAvatarParts" type="checkbox" class="size-3.5" />
+                  仅已配置部位
+                </label>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
+              <div class="text-muted-foreground">部位</div>
               <select
                 class="h-8 rounded-md border border-input bg-background px-2"
-                :value="avatarCfg(avatarPart).id"
-                @change="(event) => setAvatarField('id', (event.target as HTMLSelectElement).value)"
+                v-model="avatarPart"
               >
-                <option value="">未选择</option>
-                <option v-for="item in avatarSuitOptions" :key="item.id" :value="String(item.id)">
-                  {{ item.suit || item.rarity || item.name }}
-                </option>
+                <option v-for="part in avatarParts" :key="part" :value="part">{{ part }}</option>
               </select>
             </div>
 
-            <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
-              <div class="text-muted-foreground">属性</div>
+            <div
+              v-if="hasAvatarEnchant"
+              class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center"
+            >
+              <div class="text-muted-foreground">附魔</div>
               <select
                 class="h-8 rounded-md border border-input bg-background px-2"
-                :value="avatarCfg(avatarPart).option"
+                :value="avatarCfg(avatarPart).enchant"
                 @change="
-                  (event) => setAvatarField('option', (event.target as HTMLSelectElement).value)
+                  (event) => setAvatarField('enchant', (event.target as HTMLSelectElement).value)
                 "
               >
-                <option value="0">无</option>
+                <option value="">无</option>
                 <option
-                  v-for="opt in avatarSuitOptions.find(
-                    (x) => String(x.id) === avatarCfg(avatarPart).id,
-                  )?.options || []"
-                  :key="opt"
-                  :value="opt"
+                  v-for="item in avatarEnchantOptions"
+                  :key="item.id"
+                  :value="String(item.id)"
                 >
-                  {{ opt }}
+                  {{ item.detail }}
                 </option>
               </select>
             </div>
-          </template>
 
-          <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
-            <div class="text-muted-foreground">徽章一</div>
-            <select
-              class="h-8 rounded-md border border-input bg-background px-2"
-              :value="avatarCfg(avatarPart).emblem_0"
-              @change="
-                (event) => setAvatarField('emblem_0', (event.target as HTMLSelectElement).value)
-              "
-            >
-              <option value="">无</option>
-              <option v-for="item in avatarEmblemOptions" :key="item.id" :value="String(item.id)">
-                [{{ item.rarity }}] {{ item.value }}
-              </option>
-            </select>
-          </div>
-
-          <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
-            <div class="text-muted-foreground">徽章二</div>
-            <select
-              class="h-8 rounded-md border border-input bg-background px-2"
-              :value="avatarCfg(avatarPart).emblem_1"
-              @change="
-                (event) => setAvatarField('emblem_1', (event.target as HTMLSelectElement).value)
-              "
-            >
-              <option value="">无</option>
-              <option v-for="item in avatarEmblemOptions" :key="item.id" :value="String(item.id)">
-                [{{ item.rarity }}] {{ item.value }}
-              </option>
-            </select>
-          </div>
-
-          <div class="flex justify-end">
-            <Button size="sm" variant="outline" @click="resetAvatarPart">重置当前部位</Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card class="border-border/60 bg-card/90">
-        <CardHeader>
-          <CardTitle class="flex items-center gap-2">
-            <Sparkles class="size-4" />
-            徽章编辑
-          </CardTitle>
-          <CardDescription>支持等级、徽章条目与槽位数量规则。</CardDescription>
-        </CardHeader>
-        <CardContent class="space-y-3 text-sm">
-          <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
-            <div class="text-muted-foreground">筛选</div>
-            <div class="flex items-center gap-2">
-              <Input v-model="emblemOptionKeyword" class="h-8" placeholder="搜索徽章可选项" />
-              <label class="inline-flex items-center gap-1 text-xs whitespace-nowrap">
-                <input v-model="onlyConfiguredEmblemSlots" type="checkbox" class="size-3.5" />
-                仅已配置项
-              </label>
-            </div>
-          </div>
-
-          <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
-            <div class="text-muted-foreground">槽位类型</div>
-            <select
-              class="h-8 rounded-md border border-input bg-background px-2"
-              v-model="emblemPart"
-            >
-              <option v-for="part in infoStore.emblemParts" :key="part" :value="part">
-                {{ part }}
-              </option>
-            </select>
-          </div>
-
-          <div
-            v-if="emblemPart !== '白金'"
-            class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center"
-          >
-            <div class="text-muted-foreground">等级</div>
-            <select
-              class="h-8 rounded-md border border-input bg-background px-2"
-              :value="String(emblemCfg.lv ?? 0)"
-              @change="(event) => setEmblemLv((event.target as HTMLSelectElement).value)"
-            >
-              <option v-for="(label, index) in emblemLevels" :key="label" :value="String(index)">
-                {{ label }}
-              </option>
-            </select>
-          </div>
-
-          <div class="space-y-2">
-            <div class="text-muted-foreground">徽章条目</div>
-            <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
-              <div
-                v-for="index in emblemMaxCount"
-                :key="index"
-                v-show="!onlyConfiguredEmblemSlots || !!(emblemCfg.items[index - 1] || '')"
-                class="space-y-1"
-              >
-                <div class="text-xs text-muted-foreground">槽位 {{ index }}</div>
+            <template v-else>
+              <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
+                <div class="text-muted-foreground">品级</div>
                 <select
-                  class="h-8 w-full rounded-md border border-input bg-background px-2"
-                  :value="emblemCfg.items[index - 1] || ''"
+                  class="h-8 rounded-md border border-input bg-background px-2"
+                  :value="avatarCfg(avatarPart).id"
                   @change="
-                    (event) => setEmblemItem(index - 1, (event.target as HTMLSelectElement).value)
+                    (event) => setAvatarField('id', (event.target as HTMLSelectElement).value)
                   "
                 >
-                  <option value="">无</option>
-                  <option v-for="item in emblemOptions" :key="item.id" :value="String(item.id)">
-                    [{{ item.rarity }}] {{ item.value }}
+                  <option value="">未选择</option>
+                  <option v-for="item in avatarSuitOptions" :key="item.id" :value="String(item.id)">
+                    {{ item.suit || item.rarity || item.name }}
                   </option>
                 </select>
               </div>
+
+              <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
+                <div class="text-muted-foreground">属性</div>
+                <select
+                  class="h-8 rounded-md border border-input bg-background px-2"
+                  :value="avatarCfg(avatarPart).option"
+                  @change="
+                    (event) => setAvatarField('option', (event.target as HTMLSelectElement).value)
+                  "
+                >
+                  <option value="0">无</option>
+                  <option
+                    v-for="opt in avatarSuitOptions.find(
+                      (x) => String(x.id) === avatarCfg(avatarPart).id,
+                    )?.options || []"
+                    :key="opt"
+                    :value="opt"
+                  >
+                    {{ opt }}
+                  </option>
+                </select>
+              </div>
+            </template>
+
+            <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
+              <div class="text-muted-foreground">徽章一</div>
+              <select
+                class="h-8 rounded-md border border-input bg-background px-2"
+                :value="avatarCfg(avatarPart).emblem_0"
+                @change="
+                  (event) => setAvatarField('emblem_0', (event.target as HTMLSelectElement).value)
+                "
+              >
+                <option value="">无</option>
+                <option v-for="item in avatarEmblemOptions" :key="item.id" :value="String(item.id)">
+                  [{{ item.rarity }}] {{ item.value }}
+                </option>
+              </select>
             </div>
-          </div>
 
-          <div class="flex justify-end">
-            <Button size="sm" variant="outline" @click="resetEmblemPart">重置当前徽章槽</Button>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
+            <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
+              <div class="text-muted-foreground">徽章二</div>
+              <select
+                class="h-8 rounded-md border border-input bg-background px-2"
+                :value="avatarCfg(avatarPart).emblem_1"
+                @change="
+                  (event) => setAvatarField('emblem_1', (event.target as HTMLSelectElement).value)
+                "
+              >
+                <option value="">无</option>
+                <option v-for="item in avatarEmblemOptions" :key="item.id" :value="String(item.id)">
+                  [{{ item.rarity }}] {{ item.value }}
+                </option>
+              </select>
+            </div>
 
-    <div
-      v-if="forgeViewTab === 'config' && moduleMode === 'global'"
-      class="grid grid-cols-1 gap-4 lg:grid-cols-2"
-    >
-      <Card class="border-border/60 bg-card/90">
-        <CardHeader>
-          <CardTitle class="flex items-center gap-2">
-            <ShieldCheck class="size-4" />
-            计算开关
-          </CardTitle>
-          <CardDescription>从旧版 Character 页底部迁移的全局参数。</CardDescription>
-        </CardHeader>
-        <CardContent class="space-y-2 text-sm text-muted-foreground">
-          <label class="flex items-center justify-between rounded-md border p-2">
-            <span>系统奶 DSB</span>
-            <input v-model="configStore.config.DSB" type="checkbox" class="size-4" />
-          </label>
-          <label class="flex items-center justify-between rounded-md border p-2">
-            <span>组队 BUFF</span>
-            <input v-model="configStore.config.BUFF" type="checkbox" class="size-4" />
-          </label>
-        </CardContent>
-      </Card>
+            <div class="flex justify-end">
+              <Button size="sm" variant="outline" @click="resetAvatarPart">重置当前部位</Button>
+            </div>
+          </CardContent>
+        </Card>
 
-      <Card class="border-border/60 bg-card/90">
-        <CardHeader>
-          <CardTitle class="flex items-center gap-2">
-            <ShieldCheck class="size-4" />
-            当前统计
-          </CardTitle>
-        </CardHeader>
-        <CardContent class="space-y-2 text-sm text-muted-foreground">
-          <div>已配置装备: {{ summary.equipCount }}</div>
-          <div>誓约槽位: {{ summary.oathCount }}</div>
-          <div>已配置时装: {{ summary.avatarCount }}</div>
-          <div>已配置徽章条目: {{ summary.emblemCount }}</div>
-        </CardContent>
-      </Card>
-    </div>
+        <Card class="border-border/60 bg-card/90">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <Sparkles class="size-4" />
+              徽章编辑
+            </CardTitle>
+            <CardDescription>支持等级、徽章条目与槽位数量规则。</CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-2 text-xs sm:space-y-3 sm:text-sm">
+            <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
+              <div class="text-muted-foreground">筛选</div>
+              <div class="flex items-center gap-2">
+                <Input
+                  v-model="emblemOptionKeyword"
+                  class="h-8 text-xs"
+                  placeholder="搜索徽章可选项"
+                />
+                <label class="inline-flex items-center gap-1 text-xs whitespace-nowrap">
+                  <input v-model="onlyConfiguredEmblemSlots" type="checkbox" class="size-3.5" />
+                  仅已配置项
+                </label>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
+              <div class="text-muted-foreground">槽位类型</div>
+              <select
+                class="h-8 rounded-md border border-input bg-background px-2"
+                v-model="emblemPart"
+              >
+                <option v-for="part in infoStore.emblemParts" :key="part" :value="part">
+                  {{ part }}
+                </option>
+              </select>
+            </div>
+
+            <div
+              v-if="emblemPart !== '白金'"
+              class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center"
+            >
+              <div class="text-muted-foreground">等级</div>
+              <select
+                class="h-8 rounded-md border border-input bg-background px-2"
+                :value="String(emblemCfg.lv ?? 0)"
+                @change="(event) => setEmblemLv((event.target as HTMLSelectElement).value)"
+              >
+                <option v-for="(label, index) in emblemLevels" :key="label" :value="String(index)">
+                  {{ label }}
+                </option>
+              </select>
+            </div>
+
+            <div class="space-y-2">
+              <div class="text-muted-foreground">徽章条目</div>
+              <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
+                <div
+                  v-for="index in emblemMaxCount"
+                  :key="index"
+                  v-show="!onlyConfiguredEmblemSlots || !!(emblemCfg.items[index - 1] || '')"
+                  class="space-y-1"
+                >
+                  <div class="text-xs text-muted-foreground">槽位 {{ index }}</div>
+                  <select
+                    class="h-8 w-full rounded-md border border-input bg-background px-2"
+                    :value="emblemCfg.items[index - 1] || ''"
+                    @change="
+                      (event) => setEmblemItem(index - 1, (event.target as HTMLSelectElement).value)
+                    "
+                  >
+                    <option value="">无</option>
+                    <option v-for="item in emblemOptions" :key="item.id" :value="String(item.id)">
+                      [{{ item.rarity }}] {{ item.value }}
+                    </option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+            <div class="flex justify-end">
+              <Button size="sm" variant="outline" @click="resetEmblemPart">重置当前徽章槽</Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div
+        v-if="forgeViewTab === 'config' && moduleMode === 'global'"
+        class="grid grid-cols-1 gap-4 lg:grid-cols-2"
+      >
+        <Card class="border-border/60 bg-card/90">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <ShieldCheck class="size-4" />
+              计算开关
+            </CardTitle>
+            <CardDescription>从旧版 Character 页底部迁移的全局参数。</CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-2 text-sm text-muted-foreground">
+            <label class="flex items-center justify-between rounded-md border p-2">
+              <span>系统奶 DSB</span>
+              <input v-model="configStore.config.DSB" type="checkbox" class="size-4" />
+            </label>
+            <label class="flex items-center justify-between rounded-md border p-2">
+              <span>组队 BUFF</span>
+              <input v-model="configStore.config.BUFF" type="checkbox" class="size-4" />
+            </label>
+          </CardContent>
+        </Card>
+
+        <Card class="border-border/60 bg-card/90">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <ShieldCheck class="size-4" />
+              当前统计
+            </CardTitle>
+          </CardHeader>
+          <CardContent class="space-y-2 text-sm text-muted-foreground">
+            <div>已配置装备: {{ summary.equipCount }}</div>
+            <div>誓约槽位: {{ summary.oathCount }}</div>
+            <div>已配置时装: {{ summary.avatarCount }}</div>
+            <div>已配置徽章条目: {{ summary.emblemCount }}</div>
+          </CardContent>
+        </Card>
+      </div>
     </div>
   </div>
 </template>

frontendNew/src/pages/Dcalc/Character/Index.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { LoaderCircle, PanelRight, RefreshCcw } from "lucide-vue-next";
+import { PanelRight } from "lucide-vue-next";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import Tabs from "@/components/ui/tabs/Tabs.vue";
 import TabsList from "@/components/ui/tabs/TabsList.vue";

frontendNew/src/pages/Dcalc/Character/Result/Index.vue

@@ -4,6 +4,12 @@ import type { IResultSkill } from "@/api/calc/type";
 import { useConfigStore, useInfoStore } from "@/stores";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import Tabs from "@/components/ui/tabs/Tabs.vue";
 import TabsList from "@/components/ui/tabs/TabsList.vue";
@@ -33,6 +39,15 @@ const retryCalc = async () => {
   await configStore.result.execute();
 };
 
+const setStandard = () => {
+  if (!resultState.value?.uuid) return;
+  infoStore.setStandard(resultState.value, configStore.skillCountConfig);
+};
+
+const clearStandard = () => {
+  infoStore.setStandard(undefined);
+};
+
 const getSkillCountEntry = (skill: IResultSkill) => {
   const name = skill.name;
   const mode = skill.mode;
@@ -96,59 +111,134 @@ const totalDiffClass = computed(() => {
 const hasVisibleResult = computed(
   () => (resultState.value?.skills?.length ?? 0) > 0 || (resultState.value?.info?.length ?? 0) > 0,
 );
+
+const changeSources = computed(() => configStore.changeSourceLogs.slice(0, 8));
+
+const clearChangeSources = () => {
+  configStore.clearChangeSource();
+};
+
+const defaultOpenSections = ["overview", "equipped"];
+
+const statusText = computed(() => {
+  if (isLoading.value) return "计算中...";
+  if (resultError.value) return resultError.value;
+  if (!hasVisibleResult.value) return "暂无结果，请先编辑配置。";
+  if (isBufferClass.value) return "请前往计算详情查看。";
+  return "";
+});
 </script>
 
 <template>
   <div class="flex h-full min-h-0 flex-col gap-3">
-    <!-- 装备 / 誓约 列表 -->
     <Card>
-      <CardContent class="pt-3 pb-3">
-        <div class="space-y-2 text-xs">
-          <Tabs :model-value="displayTab">
-            <TabsList class="grid w-full grid-cols-2">
-              <TabsTrigger value="equ" @click="displayTab = 'equ'">装备</TabsTrigger>
-              <TabsTrigger value="oath" @click="displayTab = 'oath'">誓约</TabsTrigger>
-            </TabsList>
-          </Tabs>
-          <ScrollArea class="max-h-56 rounded-md border p-2">
-            <div v-if="displayTab === 'equ'">
-              <EquList
-                v-model:part="equippedPart"
-                :detail="configStore.config.equips"
-                :with-sub-weapon="infoStore.infos?.alter?.includes('vegabond') ?? false"
-                :with-pet="true"
-              />
-            </div>
-            <div v-else>
-              <OathList v-model:part="equippedOathPart" :detail="configStore.config.oaths" />
-            </div>
-            <template #scrollbar>
-              <ScrollBar orientation="vertical" />
-            </template>
-          </ScrollArea>
-        </div>
-      </CardContent>
-    </Card>
+      <CardContent class="py-2">
+        <Accordion type="multiple" :default-value="defaultOpenSections" class="w-full">
+          <AccordionItem value="overview">
+            <AccordionTrigger>结果概览</AccordionTrigger>
+            <AccordionContent>
+              <div class="space-y-3 px-1">
+                <div class="flex flex-wrap gap-2">
+                  <Button size="sm" variant="outline" class="h-8 px-2.5" @click="setStandard"
+                    >设为基准</Button
+                  >
+                  <Button size="sm" variant="outline" class="h-8 px-2.5" @click="clearStandard"
+                    >清空基准</Button
+                  >
+                </div>
 
-    <!-- 合计伤害 -->
-    <Card>
-      <CardContent class="px-4 py-3">
-        <div v-if="isLoading" class="text-center text-sm text-muted-foreground">计算中...</div>
-        <div
-          v-else-if="resultError"
-          class="flex flex-col items-center gap-2 text-center text-sm text-destructive"
-        >
-          <span>{{ resultError }}</span>
-          <Button size="sm" variant="outline" @click="retryCalc">重试计算</Button>
-        </div>
-        <div v-else-if="!hasVisibleResult" class="text-center text-sm text-muted-foreground">
-          暂无结果，请先编辑配置。
-        </div>
-        <div v-else-if="!isBufferClass" class="flex items-center justify-between">
-          <span class="text-sm text-muted-foreground">合计伤害</span>
-          <span class="text-sm font-semibold" :class="totalDiffClass">{{ totalDiffLabel }}</span>
-        </div>
-        <div v-else class="text-center text-sm text-muted-foreground">请前往计算详情查看。</div>
+                <div
+                  v-if="isLoading || resultError || !hasVisibleResult || isBufferClass"
+                  class="rounded-md border border-border/60 px-3 py-2 text-center text-sm"
+                  :class="resultError ? 'text-destructive' : 'text-muted-foreground'"
+                >
+                  {{ statusText }}
+                </div>
+
+                <div
+                  v-else
+                  class="flex items-center justify-between rounded-md border border-border/60 px-3 py-2"
+                >
+                  <span class="text-sm text-muted-foreground">合计伤害</span>
+                  <span class="text-sm font-semibold" :class="totalDiffClass">{{
+                    totalDiffLabel
+                  }}</span>
+                </div>
+
+                <div v-if="resultError" class="flex justify-center">
+                  <Button size="sm" variant="outline" @click="retryCalc">重试计算</Button>
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="equipped">
+            <AccordionTrigger>穿戴信息</AccordionTrigger>
+            <AccordionContent>
+              <div class="space-y-2 px-1 text-xs">
+                <Tabs :model-value="displayTab">
+                  <TabsList class="grid w-full grid-cols-2">
+                    <TabsTrigger value="equ" @click="displayTab = 'equ'">装备</TabsTrigger>
+                    <TabsTrigger value="oath" @click="displayTab = 'oath'">誓约</TabsTrigger>
+                  </TabsList>
+                </Tabs>
+                <ScrollArea class="max-h-56 rounded-md border p-2">
+                  <div v-if="displayTab === 'equ'">
+                    <EquList
+                      v-model:part="equippedPart"
+                      :detail="configStore.config.equips"
+                      :with-sub-weapon="infoStore.infos?.alter?.includes('vegabond') ?? false"
+                      :with-pet="true"
+                    />
+                  </div>
+                  <div v-else>
+                    <OathList v-model:part="equippedOathPart" :detail="configStore.config.oaths" />
+                  </div>
+                  <template #scrollbar>
+                    <ScrollBar orientation="vertical" />
+                  </template>
+                </ScrollArea>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="changes">
+            <AccordionTrigger>配置变更来源</AccordionTrigger>
+            <AccordionContent>
+              <div class="space-y-2 px-1">
+                <div class="flex items-center justify-between text-xs text-muted-foreground">
+                  <span>最近触发计算的操作记录</span>
+                  <Button size="sm" variant="ghost" class="h-7 px-2" @click="clearChangeSources"
+                    >清空</Button
+                  >
+                </div>
+
+                <div v-if="changeSources.length === 0" class="text-xs text-muted-foreground">
+                  暂无变更来源记录。
+                </div>
+
+                <ScrollArea v-else class="max-h-40 rounded-md border border-border/60 p-2">
+                  <div class="space-y-1">
+                    <div
+                      v-for="item in changeSources"
+                      :key="item.id"
+                      class="rounded-md border border-border/60 bg-muted/20 px-2 py-1 text-xs"
+                    >
+                      <div class="flex items-center justify-between gap-2">
+                        <span class="font-medium">{{ item.source }}</span>
+                        <span class="text-muted-foreground">{{ item.time }}</span>
+                      </div>
+                      <div class="text-muted-foreground">{{ item.detail }}</div>
+                    </div>
+                  </div>
+                  <template #scrollbar>
+                    <ScrollBar orientation="vertical" />
+                  </template>
+                </ScrollArea>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
       </CardContent>
     </Card>
   </div>

frontendNew/src/pages/Dcalc/Character/Skill/components/SkillDetail/index.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import api from "@/api";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 const props = defineProps<{
   skillId: string;
@@ -63,6 +70,8 @@ const detailLines = computed(() => {
 });
 
 const hasEvolution = computed(() => (skillInfo.value?.evolution?.length ?? 0) > 0);
+
+const defaultOpenSections = ["basic", "attr"];
 </script>
 
 <template>
@@ -74,75 +83,102 @@ const hasEvolution = computed(() => (skillInfo.value?.evolution?.length ?? 0) >
   </div>
 
   <template v-else>
-    <!-- ── 基本信息 ── -->
-    <div>
-      <div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
-        基本信息
-      </div>
-      <div class="rounded-md border border-border/40 bg-muted/10 divide-y divide-border/30">
-        <div
-          v-for="item in basic"
-          :key="item.label"
-          class="flex items-center justify-between px-3 py-1.5 text-xs"
+    <Accordion type="multiple" :default-value="defaultOpenSections" class="w-full space-y-1">
+      <AccordionItem value="basic" class="rounded-md border border-border/40 px-3">
+        <AccordionTrigger class="text-xs font-semibold tracking-wide text-muted-foreground"
+          >基本信息</AccordionTrigger
         >
-          <span class="text-muted-foreground">{{ item.label }}</span>
-          <span class="tabular-nums font-medium">{{ item.value }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- ── 技能描述 ── -->
-    <div v-if="descLines.length">
-      <div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
-        技能描述
-      </div>
-      <div
-        class="rounded-md border border-border/40 bg-muted/10 px-3 py-2 text-xs leading-relaxed max-h-48 overflow-y-auto"
-      >
-        <div
-          v-for="(line, i) in descLines"
-          :key="i"
-          class="min-h-[1em] whitespace-pre-wrap text-muted-foreground"
-        >
-          {{ line }}
-        </div>
-      </div>
-    </div>
-
-    <!-- ── 技能属性 ── -->
-    <div v-if="detailLines.length">
-      <div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
-        技能属性
-      </div>
-      <div class="rounded-md border border-border/40 bg-muted/10 divide-y divide-border/30">
-        <div
-          v-for="(line, i) in detailLines"
-          :key="i"
-          class="flex items-center justify-between px-3 py-1.5 text-xs"
-          v-html="line"
-        />
-      </div>
-    </div>
-
-    <!-- ── 技能进化 (VP 描述) ── -->
-    <div v-if="hasEvolution">
-      <div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
-        技能进化
-      </div>
-      <div class="space-y-2">
-        <div
-          v-for="(evo, i) in skillInfo.evolution"
-          :key="i"
-          class="rounded-md border border-border/40 bg-muted/10 p-3"
-        >
-          <div class="text-xs font-semibold text-purple-400 mb-1.5">{{ evo.name }}</div>
-          <div
-            class="text-xs leading-relaxed text-muted-foreground whitespace-pre-wrap max-h-36 overflow-y-auto"
-          >
-            {{ evo.descDetail }}
+        <AccordionContent>
+          <div class="rounded-md border border-border/40 bg-muted/10 divide-y divide-border/30">
+            <div
+              v-for="item in basic"
+              :key="item.label"
+              class="flex items-center justify-between px-3 py-1.5 text-xs"
+            >
+              <span class="text-muted-foreground">{{ item.label }}</span>
+              <span class="tabular-nums font-medium">{{ item.value }}</span>
+            </div>
           </div>
-        </div>
-      </div>
-    </div>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem
+        v-if="descLines.length"
+        value="desc"
+        class="rounded-md border border-border/40 px-3"
+      >
+        <AccordionTrigger class="text-xs font-semibold tracking-wide text-muted-foreground"
+          >技能描述</AccordionTrigger
+        >
+        <AccordionContent>
+          <ScrollArea class="max-h-48 rounded-md border border-border/40 bg-muted/10 px-3 py-2">
+            <div
+              v-for="(line, i) in descLines"
+              :key="i"
+              class="min-h-[1em] whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground"
+            >
+              {{ line }}
+            </div>
+            <template #scrollbar>
+              <ScrollBar orientation="vertical" />
+            </template>
+          </ScrollArea>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem
+        v-if="detailLines.length"
+        value="attr"
+        class="rounded-md border border-border/40 px-3"
+      >
+        <AccordionTrigger class="text-xs font-semibold tracking-wide text-muted-foreground"
+          >技能属性</AccordionTrigger
+        >
+        <AccordionContent>
+          <ScrollArea class="max-h-56 rounded-md border border-border/40 bg-muted/10">
+            <div class="divide-y divide-border/30">
+              <div
+                v-for="(line, i) in detailLines"
+                :key="i"
+                class="flex items-center justify-between px-3 py-1.5 text-xs"
+                v-html="line"
+              />
+            </div>
+            <template #scrollbar>
+              <ScrollBar orientation="vertical" />
+            </template>
+          </ScrollArea>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem
+        v-if="hasEvolution"
+        value="evolution"
+        class="rounded-md border border-border/40 px-3"
+      >
+        <AccordionTrigger class="text-xs font-semibold tracking-wide text-muted-foreground"
+          >技能进化</AccordionTrigger
+        >
+        <AccordionContent>
+          <div class="space-y-2">
+            <div
+              v-for="(evo, i) in skillInfo.evolution"
+              :key="i"
+              class="rounded-md border border-border/40 bg-muted/10 p-3"
+            >
+              <div class="mb-1.5 text-xs font-semibold text-purple-400">{{ evo.name }}</div>
+              <ScrollArea class="max-h-36 rounded-md bg-muted/30 px-2 py-1">
+                <div class="whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground">
+                  {{ evo.descDetail }}
+                </div>
+                <template #scrollbar>
+                  <ScrollBar orientation="vertical" />
+                </template>
+              </ScrollArea>
+            </div>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
   </template>
 </template>

frontendNew/src/pages/Dcalc/DnfHelper/Character/Index.vue

@@ -3,13 +3,7 @@ import { computed, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { LoaderCircle, RefreshCcw } from "lucide-vue-next";
 import { Button } from "../../../../components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../../../../components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "../../../../components/ui/card";
 import { useInfoStore } from "../../../../stores";
 const props = defineProps<{
   alter: string;

frontendNew/src/stores/dnfhelper.ts

@@ -13,7 +13,7 @@ export const useDnfHelperStore = defineStore("dnfHelperStore", () => {
   const loading = ref(false);
   const errorMessage = ref("");
 
-  const refleshHelperInfo = async (uid?: string) => {
+  const refreshHelperInfoInner = async (uid?: string) => {
     if (!uid) return;
     loading.value = true;
     errorMessage.value = "";
@@ -22,7 +22,6 @@ export const useDnfHelperStore = defineStore("dnfHelperStore", () => {
       if (data) {
         helperInfo.value = data;
       }
-      
     } catch (error) {
       errorMessage.value = error instanceof Error ? error.message : "同步助手数据失败";
       throw error;
@@ -32,7 +31,12 @@ export const useDnfHelperStore = defineStore("dnfHelperStore", () => {
   };
 
   const refreshHelperInfo = async (uid?: string) => {
-    await refleshHelperInfo(uid);
+    await refreshHelperInfoInner(uid);
+  };
+
+  // Keep compatibility with existing callers.
+  const refleshHelperInfo = async (uid?: string) => {
+    await refreshHelperInfoInner(uid);
   };
 
   const logout = () => {

frontendNew/src/stores/info.ts

@@ -1,81 +1,81 @@
-import api from '@/api'
-import type { ICharacterInfo, IEquipment, ISuit } from '@/api/info/type'
-import { defineStore } from 'pinia'
-import { useConfigStore } from './config'
-import type { IResult, IResultSkill, IResultSkillCount } from '@/api/calc/type'
+import api from "@/api";
+import type { ICharacterInfo, IEquipment, ISuit } from "@/api/info/type";
+import { defineStore } from "pinia";
+import { useConfigStore } from "./config";
+import type { IResult, IResultSkill, IResultSkillCount } from "@/api/calc/type";
 
-export const useInfoStore = defineStore('infoStore', () => {
-  const alter_token = ref<string>('')
-  const infos = ref<ICharacterInfo | null>(null)
+export const useInfoStore = defineStore("infoStore", () => {
+  const alter_token = ref<string>("");
+  const infos = ref<ICharacterInfo | null>(null);
 
   const oathCache = ref<
     {
-      suitId: string
-      skillId: string
-      rarity: string
-      lv: number
-      data: ISuit
+      suitId: string;
+      skillId: string;
+      rarity: string;
+      lv: number;
+      data: ISuit;
     }[]
-  >([])
+  >([]);
 
-  const skills = computed(() => infos.value?.skills ?? [])
+  const skills = computed(() => infos.value?.skills ?? []);
 
-  const equips = computed(() => infos.value?.equips ?? [])
+  const equips = computed(() => infos.value?.equips ?? []);
 
-  const suits = computed(() => infos.value?.suits ?? [])
+  const suits = computed(() => infos.value?.suits ?? []);
 
-  const enchants = computed(() => infos.value?.enchants ?? [])
+  const enchants = computed(() => infos.value?.enchants ?? []);
 
-  const emblems = computed(() => infos.value?.emblems ?? [])
+  const emblems = computed(() => infos.value?.emblems ?? []);
 
   // const stones = computed(() => infos.value?.stones ?? [])
 
-  const avatars = computed(() => infos.value?.avatar ?? {})
+  const avatars = computed(() => infos.value?.avatar ?? {});
 
-  const jades = computed(() => infos.value?.jades ?? [])
+  const jades = computed(() => infos.value?.jades ?? []);
 
-  const sundries = computed(() => infos.value?.sundry ?? {})
+  const sundries = computed(() => infos.value?.sundry ?? {});
 
-  const options = computed(() => infos.value?.options ?? [])
+  const options = computed(() => infos.value?.options ?? []);
 
   const oaths = computed(() => {
-    const origin = infos.value?.oaths ?? []
-    const result: IEquipment[] = []
+    const origin = infos.value?.oaths ?? [];
+    const result: IEquipment[] = [];
     origin.forEach((o) => {
-      o.position.forEach((p, i) => {
+      o.position.forEach((p) => {
         result.push({
           ...o,
           oathPos: p,
           displayUrl: o.wearUrl?.[parseInt(p)]
             ? `/equipment/icon/oathprimer/primer_equip/${o.wearUrl?.[parseInt(p)]}`
             : o.imageUrl,
-        })
-      })
-    })
-    return result
-  })
+        });
+      });
+    });
+    return result;
+  });
 
   const getOathInfo = async (suitId: string, skillId: string, rarity: string, lv: number) => {
     const res = oathCache.value.find(
       (o) => o.suitId === suitId && o.skillId === skillId && o.rarity === rarity && o.lv === lv,
-    )
+    );
     if (res) {
       return {
         ...res.data,
-      }
+      };
     }
-    const data: ISuit = await api.getOathInfo(suitId, skillId, rarity, lv)
-    oathCache.value.push({ suitId, skillId, rarity, lv, data })
+    const data: ISuit = await api.getOathInfo(suitId, skillId, rarity, lv);
+    oathCache.value.push({ suitId, skillId, rarity, lv, data });
     return {
       ...data,
-    }
-  }
+    };
+  };
 
   const oathSkills = computed(() => {
-    const origin = infos.value?.oaths_skills
-    if (!origin) return origin
+    const origin = infos.value?.oaths_skills;
+    if (!origin) return origin;
 
-    const skillOrder = ['2', '1', '3']
+    const skillOrder = ["2", "1", "3"];
 
     return Object.fromEntries(
       Object.entries(origin).map(([key, value]) => [
@@ -83,90 +83,90 @@ export const useInfoStore = defineStore('infoStore', () => {
         {
           ...value,
           skills: [...value.skills].sort((left, right) => {
-            const leftIndex = skillOrder.indexOf(left.skillId)
-            const rightIndex = skillOrder.indexOf(right.skillId)
-            const normalizedLeftIndex = leftIndex === -1 ? skillOrder.length : leftIndex
-            const normalizedRightIndex = rightIndex === -1 ? skillOrder.length : rightIndex
+            const leftIndex = skillOrder.indexOf(left.skillId);
+            const rightIndex = skillOrder.indexOf(right.skillId);
+            const normalizedLeftIndex = leftIndex === -1 ? skillOrder.length : leftIndex;
+            const normalizedRightIndex = rightIndex === -1 ? skillOrder.length : rightIndex;
 
-            return normalizedLeftIndex - normalizedRightIndex
+            return normalizedLeftIndex - normalizedRightIndex;
           }),
         },
       ]),
-    )
-  })
-  const standardUUID = ref<string>()
+    );
+  });
+  const standardUUID = ref<string>();
 
   const setStandard = (
     result?: IResult,
     skillCount?: {
-      count: number
-      mode: string
-      name: string
+      count: number;
+      mode: string;
+      name: string;
     }[],
   ) => {
     if (!result) {
-      if (!!standardUUID.value) {
-        sessionStorage.removeItem(standardUUID.value)
+      if (standardUUID.value) {
+        sessionStorage.removeItem(standardUUID.value);
       }
-      standardUUID.value = undefined
+      standardUUID.value = undefined;
     } else {
-      standardUUID.value = result.uuid
-      sessionStorage.setItem(result.uuid, JSON.stringify({ skills: result.skills, skillCount }))
+      standardUUID.value = result.uuid;
+      sessionStorage.setItem(result.uuid, JSON.stringify({ skills: result.skills, skillCount }));
     }
-  }
+  };
 
   const standard = computed(() => {
-    const value = sessionStorage.getItem(standardUUID.value ?? '')
-    if (!value) return undefined
-    else return JSON.parse(value) as { skills: IResultSkill[]; skillCount: IResultSkillCount[] }
-  })
+    const value = sessionStorage.getItem(standardUUID.value ?? "");
+    if (!value) return undefined;
+    else return JSON.parse(value) as { skills: IResultSkill[]; skillCount: IResultSkillCount[] };
+  });
 
   const parts = [
-    '头肩',
-    '上衣',
-    '下装',
-    '腰带',
-    '鞋',
-    '武器',
-    '称号',
-    '手镯',
-    '项链',
-    '辅助装备',
-    '戒指',
-    '耳环',
-    '魔法石',
-    '宠物',
-  ]
+    "头肩",
+    "上衣",
+    "下装",
+    "腰带",
+    "鞋",
+    "武器",
+    "称号",
+    "手镯",
+    "项链",
+    "辅助装备",
+    "戒指",
+    "耳环",
+    "魔法石",
+    "宠物",
+  ];
 
   const avatarParts = [
-    '武器装扮',
-    '头部',
-    '帽子',
-    '脸部',
-    '光环',
-    '胸部',
-    '上衣',
-    '皮肤',
-    '快捷栏装备',
-    '腰带',
-    '下装',
-    '鞋',
-    '宠物',
-    '宠物装备-红',
-    '宠物装备-绿',
-    '宠物装备-蓝',
-  ]
+    "武器装扮",
+    "头部",
+    "帽子",
+    "脸部",
+    "光环",
+    "胸部",
+    "上衣",
+    "皮肤",
+    "快捷栏装备",
+    "腰带",
+    "下装",
+    "鞋",
+    "宠物",
+    "宠物装备-红",
+    "宠物装备-绿",
+    "宠物装备-蓝",
+  ];
 
-  const oathParts = Array.from({ length: 12 }, (_, i) => i.toString())
+  const oathParts = Array.from({ length: 12 }, (_, i) => i.toString());
 
-  const emblemParts = ['彩色', '红色', '蓝色', '绿色', '黄色', '白金']
+  const emblemParts = ["彩色", "红色", "蓝色", "绿色", "黄色", "白金"];
 
   const createCharacter = async (alter: string, equVersion?: string) => {
-    const time = new Date().getTime()
-    alter_token.value = btoa(JSON.stringify({ alter, equVersion, time }))
-    infos.value = await api.characterInfo()
-    useConfigStore().loadConfig()
-  }
+    const time = new Date().getTime();
+    alter_token.value = btoa(JSON.stringify({ alter, equVersion, time }));
+    infos.value = await api.characterInfo();
+    useConfigStore().loadConfig();
+  };
 
   return {
     alter_token,
@@ -190,5 +190,5 @@ export const useInfoStore = defineStore('infoStore', () => {
     options,
     oathSkills,
     getOathInfo,
-  }
-})
+  };
+});

frontendNew/src/utils/index.ts

@@ -2,7 +2,7 @@ let baseURL = "https://image.dnftools.com";
 
 // 避免远程开发的时候冲突
 if (import.meta.env.MODE == "development") {
-  baseURL = "http://127.0.0.1:3000";
+  baseURL = "/image";
 }
 
 if (import.meta.env.MODE == "web" || import.meta.env.MODE == "show") {

frontendNew/vite.config.ts

@@ -32,6 +32,21 @@ export default defineConfig({
     }),
   ],
   base: "new",
+  server: {
+    host: "0.0.0.0",
+    proxy: {
+      "/api": {
+        target: "http://127.0.0.1:47173/api",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+      "/image": {
+        target: "http://127.0.0.1:3000",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/image/, ""),
+      },
+    },
+  },
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),