From a5643868aa3a1851a7dddc19dbf41d8342c88c53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A5=BF=E7=93=9C=C2=B0?= <wxh_email@yeah.net>
Date: Sun, 15 Jun 2025 15:50:52 +0800
Subject: [PATCH] dev

---
 .../Character/EquipmentDictionary/Index.vue   |   4 +-
 frontend/src/pages/Character/Forge/index.vue  |   2 +-
 frontend/src/pages/Character/Index.vue        |   9 ++--
 .../SkillDetail/img/skill_title.svg           |  18 -------
 .../Skill/components/SkillDetail/index.tsx    |   2 +-
 .../Character/Skill/components/img/detail.png | Bin 0 -> 3668 bytes
 frontend/src/pages/Character/Skill/index.vue  |  48 +++++++++++++-----
 frontend/src/pages/IndexView.vue              |   3 +-
 8 files changed, 47 insertions(+), 39 deletions(-)
 delete mode 100644 frontend/src/pages/Character/Skill/components/SkillDetail/img/skill_title.svg
 create mode 100644 frontend/src/pages/Character/Skill/components/img/detail.png

diff --git a/frontend/src/pages/Character/EquipmentDictionary/Index.vue b/frontend/src/pages/Character/EquipmentDictionary/Index.vue
index 59a64c38..5b779714 100644
--- a/frontend/src/pages/Character/EquipmentDictionary/Index.vue
+++ b/frontend/src/pages/Character/EquipmentDictionary/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-340px bg-black flex flex-col h-90vh">
+  <div class="w-340px bg-black flex flex-col">
     <calc-dialog lazy header="装备条件" v-model:visible="triggerVisible">
       <options />
     </calc-dialog>
@@ -70,7 +70,7 @@
       </template>
     </div>
   </div>
-  <div class="px-5px flex flex-col h-90vh">
+  <div class="px-5px flex flex-col">
     <div class="flex flex-col overflow-hidden bg-black" v-if="curEquInfo">
       <div class="item-head">基础信息</div>
       <div class="flex-1 overflow-y-auto overflow-x-hidden bg-black w-240px">
diff --git a/frontend/src/pages/Character/Forge/index.vue b/frontend/src/pages/Character/Forge/index.vue
index 02e615f6..c3c49b79 100644
--- a/frontend/src/pages/Character/Forge/index.vue
+++ b/frontend/src/pages/Character/Forge/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-420px">
+  <div class="w-420px overflow-auto">
     <calc-collapse class="w-100%" title="装备/时装打造(点击部位切换)">
       <calc-tabs v-model="partTab" class="!mb-2">
         <calc-tab :value="0">装备栏</calc-tab>
diff --git a/frontend/src/pages/Character/Index.vue b/frontend/src/pages/Character/Index.vue
index 429f7713..72d6e5d8 100644
--- a/frontend/src/pages/Character/Index.vue
+++ b/frontend/src/pages/Character/Index.vue
@@ -7,11 +7,14 @@
         <calc-tab :value="`/character/forge/${props.alter}`">打造设置</calc-tab>
       </calc-tabs>
     </div>
-    <div class="content flex">
-      <div class="flex h-auto p-1 overflow-y-hidden" v-if="!!infoStore.infos?.alter">
+    <div class="content flex gap-1">
+      <div
+        class="flex h-auto p-1 overflow-y-hidden flex-1 box-border"
+        v-if="!!infoStore.infos?.alter"
+      >
         <RouterView></RouterView>
       </div>
-      <div class="p-1 ml-auto h-auto overflow-x-hidden z-2">
+      <div class="m-1 ml-auto h-auto overflow-x-auto z-2 box-border">
         <Result></Result>
       </div>
     </div>
diff --git a/frontend/src/pages/Character/Skill/components/SkillDetail/img/skill_title.svg b/frontend/src/pages/Character/Skill/components/SkillDetail/img/skill_title.svg
deleted file mode 100644
index 1c52c87e..00000000
--- a/frontend/src/pages/Character/Skill/components/SkillDetail/img/skill_title.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg width="222" height="19" viewBox="0 0 222 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="221" height="18" fill="url(#paint0_linear_142_155)" stroke="url(#paint1_linear_142_155)"/>
-<rect x="1" y="9" width="220" height="9" fill="url(#paint2_linear_142_155)"/>
-<defs>
-<linearGradient id="paint0_linear_142_155" x1="0" y1="9.5" x2="222" y2="9.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#563E02"/>
-<stop offset="1" stop-color="#121212"/>
-</linearGradient>
-<linearGradient id="paint1_linear_142_155" x1="0" y1="9.5" x2="222" y2="9.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7D5F07"/>
-<stop offset="1" stop-color="#2E302E"/>
-</linearGradient>
-<linearGradient id="paint2_linear_142_155" x1="1" y1="13.5" x2="221" y2="13.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#281E06"/>
-<stop offset="1" stop-color="#121212"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/frontend/src/pages/Character/Skill/components/SkillDetail/index.tsx b/frontend/src/pages/Character/Skill/components/SkillDetail/index.tsx
index e0126c21..814085c8 100644
--- a/frontend/src/pages/Character/Skill/components/SkillDetail/index.tsx
+++ b/frontend/src/pages/Character/Skill/components/SkillDetail/index.tsx
@@ -127,7 +127,7 @@ export default defineComponent({
             {skillInfo.value?.evolution?.map((item) => (
               <>
               <div class="flex flex-col gap-2px">
-                <div class="skill_vp_skill_title">{item.name}</div>
+                <div class="skill_vp_title">{item.name}</div>
                 <div class="skill_title">技能描述</div>
                 <div class="h-auto max-h-200px">
                   <div class="h-full bg-#161816 p-2px" style="white-space: pre-wrap;">
diff --git a/frontend/src/pages/Character/Skill/components/img/detail.png b/frontend/src/pages/Character/Skill/components/img/detail.png
new file mode 100644
index 0000000000000000000000000000000000000000..4bb3f0924e090e7d6b648816f44f46f6b07382e6
GIT binary patch
literal 3668
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

literal 0
HcmV?d00001

diff --git a/frontend/src/pages/Character/Skill/index.vue b/frontend/src/pages/Character/Skill/index.vue
index 6b0cbd93..1aa134e5 100644
--- a/frontend/src/pages/Character/Skill/index.vue
+++ b/frontend/src/pages/Character/Skill/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex">
+  <div class="flex relative" ref="skillTreeRef">
     <div class="flex flex-col">
       <div class="flex bg-#101012 h-40px text-#6C5E4A font-bold">
         <div
@@ -48,26 +48,34 @@
         </div>
       </div>
     </div>
+
     <div
-      class="bg-#101012 w-250px h-full overflow-x-auto"
-      v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0"
+      class="absolute right--60px"
+      v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0 && !showSkillDetail"
     >
-      <SkillDetail :skillId="curCurrentSkill.skillId" :level="curCurrentSkill.level"></SkillDetail>
-    </div>
-    <!-- <div class="absolute right--60px">
-      <div class="text-#AE8D5A h-60px bg-black p-1px box-border flex pl-2">
+      <div class="text-#AE8D5A p-1px box-border flex pl-2 w-auto">
         <div
           class="border-1px border-solid border-#322E20 border-l-none flex p-1px box-border pl-0"
         >
           <div
-            class="border-1px border-#514531 border-solid rounded-2px"
+            class="border-1px border-#514531 border-solid rounded-2px flex flex-col items-center justify-center p-5px"
             style="background: linear-gradient(to bottom, #313330 0%, #0f110f 100%)"
+            @click="showSkillDetail = true"
           >
-            技能详细
+            <img class="w-30px h-30px" src="./components/img/detail.png" />
+            技能详情
           </div>
         </div>
       </div>
-    </div> -->
+    </div>
+  </div>
+  <div
+    class="bg-#101012 w-300px h-full absolute"
+    :style="style"
+    ref="SkillDetailRef"
+    v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0 && showSkillDetail"
+  >
+    <SkillDetail :skillId="curCurrentSkill.skillId" :level="curCurrentSkill.level"></SkillDetail>
   </div>
 </template>
 
@@ -78,6 +86,7 @@ import SkillVP from './components/SkillVP'
 import SkillUP from './components/SkillUP'
 import { useConfigStore } from '@/stores'
 import SkillDetail from './components/SkillDetail'
+import { onClickOutside } from '@vueuse/core'
 const props = defineProps<{
   alter: string
 }>()
@@ -95,13 +104,26 @@ const curCurrentSkill = computed(() => {
   }
 })
 
+const showSkillDetail = ref(false)
+
+const skillTreeRef = ref<HTMLHtmlElement>()
+const SkillDetailRef = ref<HTMLHtmlElement>()
+
+const style = computed(() => {
+  return {
+    zIndex: 99,
+    height: `${skillTreeRef.value?.clientHeight ?? 0}px`,
+    left: `${(skillTreeRef.value?.clientWidth ?? 0) + 5}px`,
+  }
+})
+
 const setCurrentSkill = (skillId: number) => {
   curSkillId.value = infoStore.skills.find((skill) => skill.id === skillId)?.uuid || ''
 }
 
-const linkColg = () => {
-  window.open('https://bbs.colg.cn/page_collect/330.html', '_blank')
-}
+onClickOutside(SkillDetailRef, (event) => {showSkillDetail.value = false}, {
+  ignore: [skillTreeRef],
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/pages/IndexView.vue b/frontend/src/pages/IndexView.vue
index 2fe3f1b7..2eb686cd 100644
--- a/frontend/src/pages/IndexView.vue
+++ b/frontend/src/pages/IndexView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full overflow-y-auto mt-0 h-100%">
+  <div class="w-full overflow-y-auto mt-0 h-100%" :style="`zoom:${zoom}`">
     <Suspense>
       <RouterView></RouterView>
     </Suspense>
@@ -8,6 +8,7 @@
 </template>
 
 <script lang="ts" name="index" setup>
+const zoom = computed(() => /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent || navigator.vendor || (window as any).opera) ? 1 :(window.screen.width / 1800 / 0.85).toFixed(2))
 import { useDialog } from '@/components/hooks/dialog'
 
 const { render } = useDialog()