dev

frontend/src/pages/Character/Skill/components/SkillDetail/index.tsx

@@ -57,14 +57,18 @@ export default defineComponent({
           ],
     )
 
-    const desc = computed(() => skillInfo.value?.descDetail.split('\n').filter((item) => !!item))
+    const desc = computed(() => skillInfo.value?.descDetail.split('\n'))
 
     const detail = computed(() => {
-      const items = skillInfo.value?.attribute.optionDesc.split('\n').filter((item) => !!item)
+      const items = skillInfo.value?.attribute.optionDesc?.split('\n').filter((item) => !!item) ?? []
       const details = items?.map((a) => {
+        const beforeReplace = a.match(/^(.+?\s*:\s*[^\{]+)(\{value\d+\}.*)$/)
+        if(beforeReplace) {
+          a = `${beforeReplace[1]}<span class="skill_info_value">${beforeReplace[2]}</span>`
+        }
         const matches = a.match(/{([^}]+)}/g)
         if (matches) {
-          matches.forEach((match, index) => {
+          matches.forEach((match) => {
             const key = match.replace(/[{}]/g, '')
             // Only access if key matches the expected pattern
             if (/^value.+/.test(key)) {
@@ -72,7 +76,7 @@ export default defineComponent({
               if (value) {
                 a = a.replace(
                   match,
-                  `<span style="${index == 0 ? 'margin-left:auto;' : ''};padding:0px 2px;color:#4AA256">${value}</span>`,
+                  `<span style="padding:0px 2px;color:#4AA256">${value}</span>`,
                 )
               }
             }
@@ -98,16 +102,16 @@ export default defineComponent({
           )}
         </div>
         <div class="title">技能描述</div>
-        <div class="h-auto max-h-200px">
+        <div class="h-auto max-h-250px">
           <div class="h-full overflow-y-auto bg-#161816 p-2px">
-            {desc.value?.map((item) => (
-              <span style="white-space: pre-wrap;text-indent:20px;">{item}</span>
+            {desc.value?.map((item) => item.startsWith("[") ? (<div class="min-h-10px">{item}</div>) :(
+              <div class="min-h-10px" style="text-indent:20px;">{item}</div>
             ))}
           </div>
         </div>
         <div class="title">技能属性</div>
-        <div class="flex-1">
-          <div class="overflow-y-auto h-full flex flex-col gap-2px">
+        <div class="flex-1 overflow-y-auto">
+          <div class=" flex flex-col gap-2px">
             {detail.value?.map((item) => (
               <div class="flex justify-between item items-center" v-html={item}></div>
             ))}
@@ -119,14 +123,14 @@ export default defineComponent({
     const renderSkillVp = () => (
       <>
         <div class="h-auto">
-          <div class="h-full overflow-y-auto flex flex-col gap-5px">
+          <div class="h-full flex flex-col gap-5px">
             {skillInfo.value?.evolution?.map((item) => (
               <>
               <div class="flex flex-col gap-2px">
                 <div class="skill_vp_title">{item.name}</div>
                 <div class="title">技能描述</div>
                 <div class="h-auto max-h-200px">
-                  <div class="h-full overflow-y-auto bg-#161816 p-2px" style="white-space: pre-wrap;">
+                  <div class="h-full bg-#161816 p-2px" style="white-space: pre-wrap;">
                     {item.descDetail}
                   </div>
                 </div>
@@ -140,7 +144,7 @@ export default defineComponent({
 
     onMounted(() => {
       watchEffect(() => {
-        skillInfo.value?.evolution?.length == 0 && (curTab.value = 0)
+        (skillInfo.value?.evolution?.length ?? 0) == 0 && (curTab.value = 0)
       })
     })
 
@@ -151,14 +155,14 @@ export default defineComponent({
           <div class="relative">
             <CalcTabs v-model={curTab.value}>
               <CalcTab class="flex-1 flex justify-center" value={0}>
-                原技能描述
+                技能信息
               </CalcTab>
               <CalcTab
                 class="flex-1 flex justify-center"
                 value={1}
                 disabled={!skillInfo.value?.evolution?.length}
               >
-                技能进化描述
+                技能进化
               </CalcTab>
             </CalcTabs>
           </div>

frontend/src/pages/Character/Skill/components/SkillDetail/style.scss

@@ -86,3 +86,13 @@
     color:#4AA256;
   }
 }
+
+.skill_info_value{
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  margin-left:auto;
+  display: flex;
+  margin-top: auto;
+  color:#4AA256;
+}

frontend/src/pages/Character/Skill/components/SkillTree/index.tsx

@@ -166,7 +166,7 @@ export default defineComponent({
     const renderSkillAction = (skill: ISkill) => (
       <>
         <>
-          <div class="absolute skill-active w-88px h-78px translate-x--50% left-16px top--1px">
+          <div class="absolute skill-active w-88px h-78px translate-x--50% left-16px top--1px z-5">
             <div class="flex justify-between items-center px-5px relative top-54px">
               <CalcButton
                 icon="min"
@@ -235,7 +235,7 @@ export default defineComponent({
 
     return () => (
       <>
-        <div onClick={() => (activeSkill.value = -1)}>
+        <div onClick={() => (activeSkill.value = -1)} class="pb-40px">
           {((getSkill(0, 15, -1) ?? []) as ISkill[]).length > 0 && (
             <>
               <div class="skill-tree-line flex items-center gap-10px px-10px">

frontend/src/pages/Character/Skill/index.vue

@@ -52,7 +52,7 @@
         </div>
       </div>
     </div>
-    <div class="bg-#101012 flex-1 max-w-250px h-full" v-if="curCurrentSkill.skillId">
+    <div class="bg-#101012 w-250px h-full overflow-x-auto" v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0">
       <SkillDetail
         :skillId="curCurrentSkill.skillId"
         :level="curCurrentSkill.level"