From 7d63093971e287fb49a9740a4cd58f1c19bf1642 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A5=BF=E7=93=9C=C2=B0?= <wxh_email@yeah.net>
Date: Mon, 10 Aug 2026 03:10:55 +0800
Subject: [PATCH] =?UTF-8?q?=E9=BB=91=E6=9A=97=E6=AD=A6=E5=A3=AB=E5=88=9D?=
 =?UTF-8?q?=E6=AD=A5=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/core/character/adventure.py           |   2 +-
 .../DarkKnightSkillSetting/index.vue          | 592 ++++++++++++++++++
 .../Skill/components/img/shortcut.png         | Bin 0 -> 4162 bytes
 frontend/src/pages/Character/Skill/index.vue  | 127 +++-
 frontend/src/stores/config.ts                 |  48 +-
 5 files changed, 757 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/pages/Character/Skill/components/DarkKnightSkillSetting/index.vue
 create mode 100644 frontend/src/pages/Character/Skill/components/img/shortcut.png

diff --git a/backend/core/character/adventure.py b/backend/core/character/adventure.py
index 0e89ed21..a206638c 100644
--- a/backend/core/character/adventure.py
+++ b/backend/core/character/adventure.py
@@ -221,7 +221,7 @@ adv = [
         'title': '外传',
         'children': [
             {'id': 0, 'name': 'creator', 'title': '知源·缔造者', 'open': True, 'class': 'GF.extra.creator'},
-            {'id': 1, 'name': 'dark_knight', 'title': '极诣·黑暗武士', 'open': False},
+            {'id': 1, 'name': 'dark_knight', 'title': '极诣·黑暗武士', 'open': True, 'class': 'GF.extra.dark_knight'},
             {'id': 2, 'name': 'empty', 'title': ''},
             {'id': 3, 'name': 'empty', 'title': ''},
             {'id': 4, 'name': 'empty', 'title': ''},
diff --git a/frontend/src/pages/Character/Skill/components/DarkKnightSkillSetting/index.vue b/frontend/src/pages/Character/Skill/components/DarkKnightSkillSetting/index.vue
new file mode 100644
index 00000000..b682628c
--- /dev/null
+++ b/frontend/src/pages/Character/Skill/components/DarkKnightSkillSetting/index.vue
@@ -0,0 +1,592 @@
+<template>
+  <div
+    ref="settingRef"
+    class="dark-knight-skill-setting-shell select-none"
+    :class="{ collapsed }"
+    @click.stop
+  >
+    <button
+      v-if="collapsed"
+      type="button"
+      class="shortcut-setting-trigger ml-1px"
+      title="展开快捷键设置"
+      aria-label="展开快捷键设置"
+      @click="collapsed = false"
+    >
+      <img src="../img/shortcut.png" alt="快捷键设置" />
+    </button>
+
+    <div v-else class="dark-knight-skill-setting">
+      <div class="setting-title">
+        <span>添加快捷键</span>
+        <button
+          type="button"
+          class="minimize-button"
+          title="缩小快捷键设置"
+          aria-label="缩小快捷键设置"
+          @click="collapseSetting"
+        ></button>
+      </div>
+
+      <div class="shortcut-grid">
+        <button
+          v-for="(key, index) in shortcutKeys"
+          :key="key"
+          type="button"
+          class="skill-slot"
+          :class="{ selected: isEditing('shortcut', index) }"
+          :title="getSkill(arrangement.shortcuts[index])?.name || `快捷键 ${key}`"
+          @click="openPicker('shortcut', index)"
+        >
+          <img
+            v-if="getSkill(arrangement.shortcuts[index])"
+            :src="getImageURL(getSkill(arrangement.shortcuts[index])!.icon)"
+            :alt="getSkill(arrangement.shortcuts[index])!.name"
+          />
+          <!-- <span class="slot-key">{{ key }}</span> -->
+        </button>
+      </div>
+
+      <div class="combo-title">连续技</div>
+      <!-- <div class="combo-markers" aria-hidden="true">
+        <span v-for="key in comboKeys" :key="key">✹</span>
+      </div> -->
+
+      <div class="combo-grid">
+        <div v-for="(key, column) in comboKeys" :key="key" class="combo-column">
+          <template v-for="stage in stageCount" :key="stage">
+            <button
+              type="button"
+              class="skill-slot combo-slot"
+              :class="{
+                selected: isEditing('combo', column, stage - 1),
+                disabled: isStageDisabled(column, stage - 1),
+              }"
+              :disabled="isStageDisabled(column, stage - 1)"
+              :title="
+                isStageDisabled(column, stage - 1)
+                  ? `请先设置 ${stage - 1} 阶段`
+                  : getSkill(arrangement.combos[column][stage - 1])?.name || `${stage}阶段 ${key}`
+              "
+              @click="openPicker('combo', column, stage - 1)"
+            >
+              <img
+                v-if="getSkill(arrangement.combos[column][stage - 1])"
+                :src="getImageURL(getSkill(arrangement.combos[column][stage - 1])!.icon)"
+                :alt="getSkill(arrangement.combos[column][stage - 1])!.name"
+              />
+              <span v-else class="stage-label">{{ stage }}阶段</span>
+              <!-- <span class="slot-key">{{ key }}</span> -->
+            </button>
+            <span
+              v-if="stage < stageCount"
+              class="stage-arrow"
+              :class="{ connected: isStageConnected(column, stage - 1) }"
+              aria-hidden="true"
+            ></span>
+          </template>
+
+          <CalcButton
+            small
+            class="reset-button"
+            :title="`重置 ${key} 连续技`"
+            @click="resetCombo(column)"
+          >
+            ↻
+          </CalcButton>
+        </div>
+      </div>
+
+      <div v-if="editingSlot" class="skill-picker">
+        <div class="picker-header">
+          <span>选择主动技能</span>
+          <div class="picker-actions">
+            <button type="button" :disabled="!currentValue" @click="selectSkill('')">清空</button>
+            <button type="button" @click="editingSlot = null">×</button>
+          </div>
+        </div>
+        <div class="picker-grid">
+          <button
+            v-for="skill in selectableSkills"
+            :key="skill.id"
+            type="button"
+            class="picker-skill"
+            :class="{ active: currentValue === skill.id.toString() }"
+            :disabled="isSkillUsed(skill.id.toString())"
+            :title="skill.name"
+            @click="selectSkill(skill.id.toString())"
+          >
+            <img :src="getImageURL(skill.icon)" :alt="skill.name" />
+            <span>{{ skill.name }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="DarkKnightSkillSetting">
+import type { ISkill } from '@/api/info/type'
+import type { ISkillShortcuts } from '@/stores/config'
+import { getImageURL } from '@/utils/images'
+import { onClickOutside, useEventListener } from '@vueuse/core'
+import CalcButton from '@/components/calc/button/index.vue'
+
+type EditingSlot =
+  | { type: 'shortcut'; index: number }
+  | { type: 'combo'; column: number; stage: number }
+
+const shortcutKeys = ['Q', 'W', 'E', 'R', 'T', 'Y']
+const comboKeys = ['A', 'S', 'D', 'F', 'G', 'H']
+const stageCount = 5
+const excludedSkillNames = new Set(['后跳', '受身蹲伏', '跃翔', '黑暗释放'])
+const excludedAwakeLevels = new Set([85, 100])
+
+const props = defineProps<{
+  skills: ISkill[]
+  modelValue?: ISkillShortcuts
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: ISkillShortcuts]
+}>()
+
+const settingRef = ref<HTMLElement>()
+const editingSlot = ref<EditingSlot | null>(null)
+const collapsed = ref(false)
+
+const arrangement = computed<ISkillShortcuts>(() => ({
+  shortcuts: Array.from(
+    { length: shortcutKeys.length },
+    (_, index) => props.modelValue?.shortcuts?.[index] ?? '',
+  ),
+  combos: Array.from({ length: comboKeys.length }, (_, column) =>
+    Array.from(
+      { length: stageCount },
+      (_, stage) => props.modelValue?.combos?.[column]?.[stage] ?? '',
+    ),
+  ),
+}))
+
+const skillMap = computed(() => new Map(props.skills.map((skill) => [skill.id.toString(), skill])))
+
+const selectableSkills = computed(() =>
+  [...props.skills]
+    .filter(
+      (skill) =>
+        skill.type === 'active' &&
+        !excludedSkillNames.has(skill.name) &&
+        !excludedAwakeLevels.has(skill.learnLv),
+    )
+    .sort((left, right) => {
+      const [leftColumn = -1, leftRow = -1] = left.cellPosition ?? []
+      const [rightColumn = -1, rightRow = -1] = right.cellPosition ?? []
+      return leftRow - rightRow || leftColumn - rightColumn || left.learnLv - right.learnLv
+    }),
+)
+
+const selectedSkillIds = computed(
+  () =>
+    new Set([...arrangement.value.shortcuts, ...arrangement.value.combos.flat()].filter(Boolean)),
+)
+
+const currentValue = computed(() => {
+  const slot = editingSlot.value
+  if (!slot) return ''
+  return slot.type === 'shortcut'
+    ? arrangement.value.shortcuts[slot.index]
+    : arrangement.value.combos[slot.column][slot.stage]
+})
+
+const getSkill = (skillId: string) => skillMap.value.get(skillId)
+
+const isEditing = (type: EditingSlot['type'], index: number, stage?: number) => {
+  const slot = editingSlot.value
+  if (!slot) return false
+  if (type === 'shortcut') return slot.type === 'shortcut' && slot.index === index
+  return slot.type === 'combo' && slot.column === index && slot.stage === stage
+}
+
+const isStageDisabled = (column: number, stage: number) =>
+  stage > 0 && !arrangement.value.combos[column][stage - 1]
+
+const isStageConnected = (column: number, stage: number) =>
+  !!arrangement.value.combos[column][stage] && !!arrangement.value.combos[column][stage + 1]
+
+const openPicker = (type: EditingSlot['type'], index: number, stage?: number) => {
+  if (type === 'combo' && isStageDisabled(index, stage ?? 0)) return
+  editingSlot.value =
+    type === 'shortcut' ? { type, index } : { type, column: index, stage: stage ?? 0 }
+}
+
+const isSkillUsed = (skillId: string) =>
+  selectedSkillIds.value.has(skillId) && currentValue.value !== skillId
+
+const selectSkill = (skillId: string) => {
+  const slot = editingSlot.value
+  if (!slot || isSkillUsed(skillId)) return
+
+  const next: ISkillShortcuts = {
+    shortcuts: [...arrangement.value.shortcuts],
+    combos: arrangement.value.combos.map((column) => [...column]),
+  }
+  if (slot.type === 'shortcut') next.shortcuts[slot.index] = skillId
+  else {
+    next.combos[slot.column][slot.stage] = skillId
+    if (!skillId) next.combos[slot.column].fill('', slot.stage)
+  }
+
+  emit('update:modelValue', next)
+  if (slot.type === 'combo' && skillId) {
+    editingSlot.value =
+      slot.stage < stageCount - 1
+        ? { type: 'combo', column: slot.column, stage: slot.stage + 1 }
+        : null
+  }
+}
+
+const resetCombo = (column: number) => {
+  const next: ISkillShortcuts = {
+    shortcuts: [...arrangement.value.shortcuts],
+    combos: arrangement.value.combos.map((items, index) =>
+      index === column ? Array.from({ length: stageCount }, () => '') : [...items],
+    ),
+  }
+  emit('update:modelValue', next)
+  if (editingSlot.value?.type === 'combo' && editingSlot.value.column === column) {
+    editingSlot.value = { type: 'combo', column, stage: 0 }
+  }
+}
+
+const collapseSetting = () => {
+  editingSlot.value = null
+  collapsed.value = true
+}
+
+onClickOutside(settingRef, () => (editingSlot.value = null))
+useEventListener(window, 'blur', () => (editingSlot.value = null))
+</script>
+
+<style lang="scss" scoped>
+.dark-knight-skill-setting-shell {
+  position: relative;
+  width: auto;
+  flex: none;
+
+  &.collapsed {
+    width: 48px;
+  }
+}
+
+.dark-knight-skill-setting {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 4px 8px 8px;
+  color: #8f7845;
+  background: linear-gradient(180deg, #11120f 0%, #080a09 100%);
+  border: 1px solid #383224;
+  // box-shadow: 0 4px 14px #000c;
+}
+
+.setting-title {
+  position: relative;
+  height: 20px;
+  margin: -3px -7px 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #9c854e;
+  font-size: 14px;
+  line-height: 20px;
+  // font-weight: 700;
+  background: linear-gradient(#2d281b, #13120d);
+  border-bottom: 1px solid #3a3424;
+  text-shadow: 0 1px 2px #000;
+}
+
+.minimize-button {
+  position: absolute;
+  right: 4px;
+  top: 3px;
+  width: 15px;
+  height: 14px;
+  padding: 0;
+  background: linear-gradient(#393b39, #202220);
+  border: 1px solid #554a32;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 3px;
+    right: 3px;
+    bottom: 3px;
+    height: 1px;
+    background: #c0aa70;
+  }
+
+  &:hover {
+    border-color: #8b743d;
+  }
+}
+
+.shortcut-setting-trigger {
+  width: 48px;
+  height: 48px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(to bottom, #313330 0%, #0f110f 100%);
+  border: 1px solid #514531;
+  border-radius: 2px;
+  box-shadow:
+    0 0 0 1px #322e20,
+    0 3px 8px #000a;
+  cursor: pointer;
+
+  img {
+    width: 34px;
+    height: 34px;
+    object-fit: contain;
+  }
+
+  &:hover {
+    border-color: #8b743d;
+  }
+}
+
+.shortcut-grid,
+.combo-grid,
+.combo-markers {
+  display: grid;
+  grid-template-columns: repeat(6, 28px);
+  justify-content: center;
+  column-gap: 12px;
+}
+
+.shortcut-grid {
+  margin-bottom: 5px;
+}
+
+.skill-slot {
+  position: relative;
+  width: 28px;
+  height: 28px;
+  box-sizing: border-box;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #5e5131;
+  background: #030504;
+  border: 1px solid #202320;
+  box-shadow: inset 0 0 0 1px #000;
+  cursor: pointer;
+
+  &:hover,
+  &.selected {
+    border-color: #876f36;
+  }
+
+  &.disabled {
+    color: #353832;
+    border-color: #151815;
+    opacity: 0.8;
+    cursor: not-allowed;
+    .stage-label {
+      color: #353832;
+    }
+  }
+
+  img {
+    width: 26px;
+    height: 26px;
+    object-fit: contain;
+  }
+}
+
+.slot-key {
+  position: absolute;
+  right: 1px;
+  bottom: -1px;
+  color: #fff4bd;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 13px;
+  transform: scale(0.8);
+  text-shadow:
+    -1px -1px 0 #e32610,
+    1px -1px 0 #e32610,
+    -1px 1px 0 #e32610,
+    1px 1px 0 #e32610;
+}
+
+.combo-title {
+  height: 20px;
+  display: flex;
+  align-items: center;
+  color: #aa8e4f;
+  font-size: 12px;
+  line-height: 20px;
+  // font-weight: 700;
+}
+
+.combo-markers {
+  height: 15px;
+
+  span {
+    color: #b7984e;
+    font-size: 15px;
+    line-height: 15px;
+  }
+}
+
+.combo-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.combo-slot {
+  height: 28px;
+}
+
+.stage-label {
+  color: #55482c;
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.stage-arrow {
+  position: relative;
+  width: 20px;
+  height: 11px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 7px;
+    top: 0;
+    width: 6px;
+    height: 6px;
+    background: #282a28;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 3px;
+    top: 5px;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    border-top: 6px solid #282a28;
+  }
+
+  &.connected::before {
+    background: #244b80;
+  }
+
+  &.connected::after {
+    border-top-color: #2356a0;
+  }
+}
+
+.reset-button {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 12px;
+  height: 16px;
+}
+
+.skill-picker {
+  position: absolute;
+  right: calc(100% + 8px);
+  bottom: 0;
+  width: 210px;
+  padding: 5px;
+  box-sizing: border-box;
+  z-index: 30;
+  color: #aa9155;
+  background: #090b0a;
+  border: 1px solid #5c4b2c;
+  box-shadow: 0 5px 18px #000e;
+}
+
+.picker-header {
+  height: 23px;
+  padding: 0 3px 4px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #302a1e;
+}
+
+.picker-actions {
+  display: flex;
+  gap: 4px;
+
+  button {
+    min-width: 22px;
+    height: 18px;
+    font-size: 11px;
+    color: #b9a269;
+    background: #20221f;
+    border: 1px solid #4c432e;
+    cursor: pointer;
+
+    &:disabled {
+      opacity: 0.35;
+      cursor: default;
+    }
+  }
+}
+
+.picker-grid {
+  max-height: 390px;
+  padding-top: 5px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 4px;
+  overflow-y: auto;
+}
+
+.picker-skill {
+  min-width: 0;
+  padding: 3px 2px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  color: #aa9155;
+  font-size: 10px;
+  background: #050706;
+  border: 1px solid #292c29;
+  cursor: pointer;
+
+  &:hover:not(:disabled),
+  &.active {
+    color: #e1c67e;
+    border-color: #8b743d;
+  }
+
+  &:disabled {
+    filter: grayscale(1);
+    opacity: 0.25;
+    cursor: not-allowed;
+  }
+
+  img {
+    width: 28px;
+    height: 28px;
+  }
+
+  span {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+</style>
diff --git a/frontend/src/pages/Character/Skill/components/img/shortcut.png b/frontend/src/pages/Character/Skill/components/img/shortcut.png
new file mode 100644
index 0000000000000000000000000000000000000000..282a4d2b421280e0475c06b1f2fe73dc4c85863f
GIT binary patch
literal 4162
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
M07*qoM6N<$f(x4ZmjD0&

literal 0
HcmV?d00001

diff --git a/frontend/src/pages/Character/Skill/index.vue b/frontend/src/pages/Character/Skill/index.vue
index 0b174f0c..aaad4ce7 100644
--- a/frontend/src/pages/Character/Skill/index.vue
+++ b/frontend/src/pages/Character/Skill/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex relative" ref="skillTreeRef">
-    <div class="flex flex-col">
+  <div class="flex relative h-full" ref="skillTreeRef">
+    <div class="flex flex-col h-full">
       <div class="flex bg-#101012 h-40px text-#6C5E4A font-bold">
         <div
           class="flex-1 text-15px flex items-center justify-center"
@@ -50,9 +50,43 @@
       </div>
     </div>
 
+    <div v-if="showDarkKnightSkillSetting" class="dark-knight-side-column">
+      <div class="skill-detail-region">
+        <button
+          v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0 && !showSkillDetail"
+          type="button"
+          class="side-panel-trigger"
+          @click="showSkillDetail = true"
+        >
+          <img src="./components/img/detail.png" alt="技能详情" />
+          <span>技能详情</span>
+        </button>
+
+        <div
+          v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0 && showSkillDetail"
+          ref="SkillDetailRef"
+          class="skill-detail-panel"
+        >
+          <SkillDetail :skillId="curCurrentSkill.skillId" :level="curCurrentSkill.level" />
+        </div>
+      </div>
+
+      <DarkKnightSkillSetting
+        :skills="infoStore.skills"
+        v-model="configStore.config.skillShortcuts"
+        class="ml-1px"
+      />
+    </div>
+
     <div
-      class="absolute right--65px"
-      v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0 && !showSkillDetail"
+      class="absolute"
+      :style="detailButtonStyle"
+      v-if="
+        !showDarkKnightSkillSetting &&
+        curCurrentSkill.skillId &&
+        curCurrentSkill.level > 0 &&
+        !showSkillDetail
+      "
     >
       <div class="text-#AE8D5A p-1px box-border flex pl-2 w-auto">
         <div
@@ -74,7 +108,12 @@
     class="bg-#101012 w-300px h-full absolute"
     :style="style"
     ref="SkillDetailRef"
-    v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0 && showSkillDetail"
+    v-if="
+      !showDarkKnightSkillSetting &&
+      curCurrentSkill.skillId &&
+      curCurrentSkill.level > 0 &&
+      showSkillDetail
+    "
   >
     <SkillDetail :skillId="curCurrentSkill.skillId" :level="curCurrentSkill.level"></SkillDetail>
   </div>
@@ -87,14 +126,19 @@ import SkillVP from './components/SkillVP'
 import SkillUP from './components/SkillUP'
 import { useConfigStore } from '@/stores'
 import SkillDetail from './components/SkillDetail'
+import DarkKnightSkillSetting from './components/DarkKnightSkillSetting/index.vue'
 import { onClickOutside } from '@vueuse/core'
-const props = defineProps<{
+defineProps<{
   alter: string
 }>()
 const tab = ref(0)
 const infoStore = useInfoStore()
 const configStore = useConfigStore()
 
+const skillTreeWidth = 550
+
+const showDarkKnightSkillSetting = computed(() => infoStore.infos?.alter === 'dark_knight')
+
 const curSkillId = ref()
 
 const curCurrentSkill = computed(() => {
@@ -110,11 +154,15 @@ const showSkillDetail = ref(false)
 const skillTreeRef = ref<HTMLHtmlElement>()
 const SkillDetailRef = ref<HTMLHtmlElement>()
 
+const detailButtonStyle = computed(() => ({
+  left: `${skillTreeRef.value?.clientWidth ?? skillTreeWidth}px`,
+}))
+
 const style = computed(() => {
   return {
     zIndex: 99,
     height: `${skillTreeRef.value?.clientHeight ?? 0}px`,
-    left: `${(skillTreeRef.value?.clientWidth ?? 0) + 5}px`,
+    left: `${(skillTreeRef.value?.clientWidth ?? skillTreeWidth) + 5}px`,
   }
 })
 
@@ -122,9 +170,15 @@ const setCurrentSkill = (skillId: number) => {
   curSkillId.value = infoStore.skills.find((skill) => skill.id === skillId)?.uuid || ''
 }
 
-onClickOutside(SkillDetailRef, (event) => {showSkillDetail.value = false}, {
-  ignore: [skillTreeRef],
-})
+onClickOutside(
+  SkillDetailRef,
+  () => {
+    showSkillDetail.value = false
+  },
+  {
+    ignore: [skillTreeRef],
+  },
+)
 </script>
 
 <style lang="scss" scoped>
@@ -154,6 +208,59 @@ onClickOutside(SkillDetailRef, (event) => {showSkillDetail.value = false}, {
   }
 }
 
+.dark-knight-side-column {
+  width: 310px;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.skill-detail-region {
+  width: 100%;
+  min-height: 0;
+  display: flex;
+  flex: 1;
+  align-items: flex-start;
+  overflow: hidden;
+}
+
+.skill-detail-panel {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
+  background: #101012;
+}
+
+.side-panel-trigger {
+  min-width: 48px;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  color: #ae8d5a;
+  background: linear-gradient(to bottom, #313330 0%, #0f110f 100%);
+  border: 1px solid #514531;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px #322e20;
+  cursor: pointer;
+
+  img {
+    width: 30px;
+    height: 30px;
+  }
+
+  &:hover {
+    border-color: #8b743d;
+  }
+}
+
 .item-head {
   background: linear-gradient(#2b2817, #171407);
   border-top: 1px solid #423d2c;
diff --git a/frontend/src/stores/config.ts b/frontend/src/stores/config.ts
index 0f3ad005..61f9ac39 100644
--- a/frontend/src/stores/config.ts
+++ b/frontend/src/stores/config.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { useInfoStore } from './info'
 import api from '@/api'
-import type { IEquipment } from '@/api/info/type'
+import type { IEquipment, ISkill } from '@/api/info/type'
 import type { IResultSkillCount } from '@/api/calc/type'
 // | '上衣'
 // | '头肩'
@@ -42,6 +42,11 @@ export interface IConfigEmblem {
   items: string[]
 }
 
+export interface ISkillShortcuts {
+  shortcuts: string[]
+  combos: string[][]
+}
+
 export interface IConfig {
   skills: Record<string, { lv: number; vp: number; up: number }>
   equips: Record<string, IConfigEquip>
@@ -73,6 +78,7 @@ export interface IConfig {
   options: Record<string, number>
   avatarLink: string
   emblems: Record<string, IConfigEmblem>
+  skillShortcuts: ISkillShortcuts
 }
 
 const defaultEqusConfig = {
@@ -113,6 +119,39 @@ const createDefaultEmblemConfig = (): IConfigEmblem => ({
 
 const defaultEmblemConfig = createDefaultEmblemConfig()
 
+const createDefaultSkillShortcuts = (): ISkillShortcuts => ({
+  shortcuts: Array.from({ length: 6 }, () => ''),
+  combos: Array.from({ length: 6 }, () => Array.from({ length: 5 }, () => '')),
+})
+
+const normalizeSkillShortcuts = (
+  arrangement?: Partial<ISkillShortcuts>,
+  skills: ISkill[] = [],
+): ISkillShortcuts => {
+  const validSkillIds = new Set(skills.map((skill) => skill.id.toString()))
+  const skillIdByUuid = new Map(skills.map((skill) => [skill.uuid, skill.id.toString()]))
+  const normalizeSkillId = (value: unknown) => {
+    const key =
+      typeof value === 'number' ? value.toString() : typeof value === 'string' ? value : ''
+    if (!key) return ''
+    return validSkillIds.has(key) ? key : (skillIdByUuid.get(key) ?? '')
+  }
+
+  return {
+    shortcuts: Array.from({ length: 6 }, (_, index) =>
+      normalizeSkillId(arrangement?.shortcuts?.[index]),
+    ),
+    combos: Array.from({ length: 6 }, (_, column) => {
+      const combo = Array.from({ length: 5 }, (_, stage) =>
+        normalizeSkillId(arrangement?.combos?.[column]?.[stage]),
+      )
+      const firstEmptyStage = combo.findIndex((skillId) => !skillId)
+      if (firstEmptyStage >= 0) combo.fill('', firstEmptyStage)
+      return combo
+    }),
+  }
+}
+
 export const useConfigStore = defineStore('configStore', () => {
   const config = ref<IConfig>({
     skills: {},
@@ -128,6 +167,7 @@ export const useConfigStore = defineStore('configStore', () => {
     options: {},
     avatarLink: '',
     emblems: {},
+    skillShortcuts: createDefaultSkillShortcuts(),
   })
 
   const skillCountConfig = ref<IResultSkillCount[]>([])
@@ -161,6 +201,7 @@ export const useConfigStore = defineStore('configStore', () => {
         options: {},
         avatarLink: '',
         emblems: {},
+        skillShortcuts: createDefaultSkillShortcuts(),
       }
     }
     if (!config.value?.equips) config.value.equips = {}
@@ -172,6 +213,10 @@ export const useConfigStore = defineStore('configStore', () => {
     if (!config.value?.options) config.value.options = {}
     if (!config.value?.oaths) config.value.oaths = {}
     if (!config.value?.emblems) config.value.emblems = {}
+    config.value.skillShortcuts = normalizeSkillShortcuts(
+      config.value.skillShortcuts,
+      infoStore.skills,
+    )
 
     const part = [...infoStore.parts, '宠物', '副武器'].filter(
       (a) => !config.value?.equips.hasOwnProperty(a),
@@ -291,5 +336,6 @@ export const useConfigStore = defineStore('configStore', () => {
     createDefaultOathConfig,
     defaultEmblemConfig,
     createDefaultEmblemConfig,
+    createDefaultSkillShortcuts,
   }
 })