dev

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

@@ -12,7 +12,7 @@ export default defineComponent({
       default: () => [],
     },
     lvInfo: {
-      type: Object as PropType<Record<string, { lv: number }>>,
+      type: Object as PropType<Record<string, { lv: number; vp: number; up: number }>>,
       default: () => ({}),
     },
     bindAwake: {
@@ -63,23 +63,19 @@ export default defineComponent({
 
     const actionSkillLv = (skill: ISkill, operation: string) => {
       if (operation == 'add') {
-        lvInfo.value[skill.id.toString()] = {
-          lv: Math.min(lvInfo.value[skill.id.toString()]?.lv + 1, skill.maxLv),
-        }
+        lvInfo.value[skill.id.toString()].lv = Math.min(lvInfo.value[skill.id.toString()]?.lv + 1, skill.maxLv)
         return
       }
       if (operation == 'addMax') {
-        lvInfo.value[skill.id.toString()] = { lv: skill.maxLearnLv }
+        lvInfo.value[skill.id.toString()].lv =  skill.maxLearnLv
         return
       }
       if (operation == 'sub') {
-        lvInfo.value[skill.id.toString()] = {
-          lv: Math.max(lvInfo.value[skill.id.toString()]?.lv - 1, 0),
-        }
+        lvInfo.value[skill.id.toString()].lv = Math.max(lvInfo.value[skill.id.toString()]?.lv - 1, 0)
         return
       }
       if (operation == 'subMax') {
-        lvInfo.value[skill.id.toString()] = { lv: 0 }
+        lvInfo.value[skill.id.toString()] = { lv: 0 , vp: 0, up: 0 }
         return
       }
     }
@@ -97,6 +93,10 @@ export default defineComponent({
       return (
         <>
           <div class="relative w-35px h-55px">
+            <div class="flex w-full items-center justify-center gap-2px absolute top--18px left-1px">
+              {info?.vp > 0 && (<div class={`vp_${info.vp}`}></div>)}
+              {info?.up > 0 && (<div class={`up_${info.up}`}></div>)}
+            </div>
             {activeSkill.value == skill.id && renderSkillAction(skill)}
             <div
               class={[

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

@@ -33,3 +33,34 @@
   background-image: url('./img/awake_85.png');
   background-size: 100% 100%;
 }
+
+.vp_1{
+  width: 18px;
+  height: 18px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: url(../img/vp_1.png);
+}
+
+.vp_2 {
+  width: 18px;
+  height: 18px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: url(../img/vp_2.png);
+}
+
+.up_1 {
+  width: 18px;
+  height: 18px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: url(../img/up_1.png);
+}
+.up_2 {
+  width: 18px;
+  height: 18px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: url(../img/up_2.png);
+}

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

@@ -39,14 +39,14 @@
         ></SkillTree>
       </div>
       <div v-if="tab === 1" class="flex flex-col overflow-y-hidden h-full">
-        <div class="item-head">技能进化</div>
+        <div class="item-head" @click="linkColg">技能进化<span class="font-bold text-white">[形态爆料演示戳我]</span></div>
         <SkillUP
           class="flex-1"
           :skills="infoStore.skills"
           v-model:lvInfo="configStore.config.skills"
           v-model:bindAwake="configStore.config.bindAwake"
         ></SkillUP>
-        <div class="item-head">技能突破</div>
+        <div class="item-head" @click="linkColg">技能突破<span class="font-bold text-white">[形态爆料演示戳我]</span></div>
         <div class="flex-1 overflow-y-auto w-full">
           <SkillVP
             :skills="infoStore.skills"
@@ -71,6 +71,10 @@ const props = defineProps<{
 const tab = ref(0)
 const infoStore = useInfoStore()
 const configStore = useConfigStore()
+
+const linkColg = () => {
+  window.open('https://bbs.colg.cn/page_collect/330.html', '_blank')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -105,5 +109,9 @@ const configStore = useConfigStore()
   border-top: 1px solid #423d2c;
   border-bottom: 1px solid #211d15;
   text-align: center;
+  // 以下后面注释掉
+  height: 20px;
+  line-height: 20px;
+  font-weight: 14px;
 }
 </style>