dev

frontend/src/components/calc/tab/index.vue

@@ -6,6 +6,14 @@ export default defineComponent({
   name: 'CalcTab',
   props: {
     ...selectionProps,
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props, { slots }) {
     return () => {

frontend/src/components/calc/tabs/index.vue

@@ -131,6 +131,11 @@ export default defineComponent({
       height: 22px;
       // color: #ffb400;
     }
+
+    &.disabled{
+     filter: grayscale(100%);
+     cursor: not-allowed;
+    }
   }
 }
 </style>

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

@@ -1,6 +1,8 @@
 import { asyncComputed } from '@vueuse/core'
 import api from '@/api'
 import './style.scss'
+import CalcTabs from '@/components/calc/tabs/index.vue'
+import CalcTab from '@/components/calc/tab/index.vue'
 
 export default defineComponent({
   name: 'SkillDetail',
@@ -24,6 +26,8 @@ export default defineComponent({
       return res
     })
 
+    const curTab = ref(0)
+
     const basic = computed(() =>
       !skillInfo.value
         ? []
@@ -79,38 +83,87 @@ export default defineComponent({
       return details || []
     })
 
+    const renderSkillDetail = () => (
+      <>
+        <div class="title">基本信息</div>
+        <div class="flex flex-col gap-2px">
+          {basic.value.map(
+            (item) =>
+              !!item.value && (
+                <div class="flex justify-between item">
+                  <span class="label">{item.label}</span>
+                  <span class="value">{item.value}</span>
+                </div>
+              ),
+          )}
+        </div>
+        <div class="title">技能描述</div>
+        <div class="h-auto max-h-200px">
+          <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>
+            ))}
+          </div>
+        </div>
+        <div class="title">技能属性</div>
+        <div class="flex-1">
+          <div class="overflow-y-auto h-full flex flex-col gap-2px">
+            {detail.value?.map((item) => (
+              <div class="flex justify-between item items-center" v-html={item}></div>
+            ))}
+          </div>
+        </div>
+      </>
+    )
+
+    const renderSkillVp = () => (
+      <>
+        <div class="h-auto">
+          <div class="h-full overflow-y-auto 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;">
+                    {item.descDetail}
+                  </div>
+                </div>
+                </div>
+              </>
+            ))}
+          </div>
+        </div>
+      </>
+    )
+
+    onMounted(() => {
+      watchEffect(() => {
+        skillInfo.value?.evolution?.length == 0 && (curTab.value = 0)
+      })
+    })
+
     return () => (
       <>
         <div class="flex flex-col gap-2px mx-2px text-#907B54 h-full">
           <div class="skill_title h-20px">{skillInfo.value?.name}</div>
-          <div class="title">基本信息</div>
+          <div class="relative">
-          <div class="flex flex-col gap-2px">
+            <CalcTabs v-model={curTab.value}>
-            {basic.value.map(
+              <CalcTab class="flex-1 flex justify-center" value={0}>
-              (item) =>
+                原技能描述
-                !!item.value && (
+              </CalcTab>
-                  <div class="flex justify-between item">
+              <CalcTab
-                    <span class="label">{item.label}</span>
+                class="flex-1 flex justify-center"
-                    <span class="value">{item.value}</span>
+                value={1}
-                  </div>
+                disabled={!skillInfo.value?.evolution?.length}
-                ),
+              >
-            )}
+                技能进化描述
-          </div>
+              </CalcTab>
-          <div class="title">技能描述</div>
+            </CalcTabs>
-          <div class="h-auto max-h-200px">
-            <div class="h-full overflow-y-auto">
-              {desc.value?.map((item) => (
-                <span style="white-space: pre-wrap;text-indent:20px;">{item}</span>
-              ))}
-            </div>
-          </div>
-          <div class="title">技能属性</div>
-          <div class="flex-1">
-            <div class="overflow-y-auto h-full flex flex-col gap-2px">
-              {detail.value?.map((item) => (
-                <div class="flex justify-between item items-center" v-html={item}></div>
-              ))}
-            </div>
           </div>
+          {curTab.value === 0 && renderSkillDetail()}
+          {curTab.value === 1 && renderSkillVp()}
         </div>
       </>
     )

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

@@ -32,6 +32,39 @@
   }
 }
 
+.skill_vp_title {
+  border-width: 1px;
+  border-style: solid;
+  border-image-source: linear-gradient(90deg, #691b86 0%, #2e302e 100%);
+  border-image-slice: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: 18px;
+  z-index: 5;
+  transform-style: preserve-3d;
+  color: #9443BE;
+  &::before {
+    width: 100%;
+    position: absolute;
+    content: '';
+    height: 50%;
+    bottom: 0;
+    background: linear-gradient(90deg, #3a0f47 0%, #121212 100%);
+    transform: translateZ(-1px);
+  }
+
+  &::after {
+    width: 100%;
+    position: absolute;
+    content: '';
+    height: 50%;
+    top: 0;
+    background: linear-gradient(90deg, #1e0b24 0%, #171717 100%);
+    transform: translateZ(-1px);
+  }
+}
 
 .title{
   border: 1px solid #3e4040;

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">
+    <div class="bg-#101012 flex-1 max-w-250px h-full" v-if="curCurrentSkill.skillId">
       <SkillDetail
         :skillId="curCurrentSkill.skillId"
         :level="curCurrentSkill.level"
@@ -75,7 +75,7 @@ const tab = ref(0)
 const infoStore = useInfoStore()
 const configStore = useConfigStore()
 
-const curSkillId = ref("")
+const curSkillId = ref()
 
 const curCurrentSkill = computed(() => {
   const skill = infoStore.skills.find(skill => skill.uuid === curSkillId.value)