dev

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

@@ -1,45 +0,0 @@
-import { getImageURL, getLocalImageURL } from '@/utils/images'
-import type { ISkill } from '@/api/info/type'
-import { useVModel } from '@vueuse/core'
-import CalcButton from '@/components/calc/button/index.vue'
-import CalcCheckbox from '@/components/calc/checkbox/index.vue'
-import { renderList } from 'vue'
-
-export default defineComponent({
-  name: 'SkillTree',
-  props: {
-    skills: {
-      type: Array as PropType<ISkill[]>,
-      default: () => [],
-    },
-    lvInfo: {
-      type: Object as PropType<Record<string, { lv: number, reinforce:number }>>,
-      default: () => ({}),
-    },
-  },
-  setup(props) {
-    const lvInfo = useVModel(props, 'lvInfo')
-    const skills = computed(() => props.skills.filter((a) => a.hasReinforce).sort((a, b) => a.learnLv - b.learnLv))
-
-    const reinforce = (type:number,id:number)=>{
-      return computed({
-        get(){
-          return lvInfo.value[id].reinforce
-        },
-        set(value){
-
-        }
-      })
-    }
-
-    return () => (
-      <>
-        <div class="flex">
-          <div></div>
-          <div></div>
-          <div></div>
-        </div>
-      </>
-    )
-  },
-})

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

@@ -3,7 +3,10 @@ import type { ISkill } from '@/api/info/type'
 import { useVModel } from '@vueuse/core'
 import CalcButton from '@/components/calc/button/index.vue'
 import CalcCheckbox from '@/components/calc/checkbox/index.vue'
-import { renderList } from 'vue'
+import CaclIconSelect from '@/components/calc/iconselect/index.vue'
+import CalcOption from '@/components/calc/option/index.vue'
+import { render, renderList } from 'vue'
+import './style.scss'
 
 export default defineComponent({
   name: 'SkillTree',
@@ -13,75 +16,73 @@ export default defineComponent({
       default: () => [],
     },
     lvInfo: {
-      type: Object as PropType<Record<string, { lv: number, vp:number }>>,
+      type: Object as PropType<Record<string, { lv: number; reinforce: number }>>,
       default: () => ({}),
     },
   },
   setup(props) {
     const lvInfo = useVModel(props, 'lvInfo')
-    const skills = computed(() => props.skills.filter((a) => a.hasVP).sort((a, b) => a.learnLv - b.learnLv))
+    const skills = computed(() =>
+      props.skills.filter((a) => a.hasReinforce && (!lvInfo.value[a.id]?.reinforce || lvInfo.value[a.id]?.reinforce == 0)).sort((a, b) => a.learnLv - b.learnLv),
+    )
 
-    const currentUsedVP = computed(()=>{
-      return Object.keys(lvInfo.value).map(a=>lvInfo.value[a].vp).filter(a=>!!a && a > 0).length
-    })
-
-    const itemChecked = (skillID:string,vp:number)=>{
-      return computed<boolean>({
-        get(){
-          if(!lvInfo.value[skillID].vp){
-            lvInfo.value[skillID].vp = 0
-          }
-          return lvInfo.value[skillID]?.vp == vp
+    const reinforce = (type: number, id: number) => {
+      return computed({
+        get() {
+          return lvInfo.value[id].reinforce
         },
-        set(value:boolean){
-          // 选中当前VP形态 并且当前已选VP大于5 并且当前技能没有VP
-          if(value && currentUsedVP.value >= 5 && lvInfo.value[skillID]?.vp == 0){
-            return
-          }
-          if(value){
-            lvInfo.value[skillID].vp = vp
-          }else{
-            lvInfo.value[skillID].vp = 0
-          }
-        }
+        set(value) {},
       })
     }
 
     return () => (
       <>
-        <div>
-          {renderList(skills.value, (item) => (
-            <div class="h-100px flex items-center bg-#202020 gap-2 p-1">
-              <div class="w-50px text-center">{item.learnLv}</div>
-              <div class="w-100px flex flex-col items-center">
-                <img class="w-28px h-28px" src={getImageURL(item.icon)} alt={item.name} />
-                <div class="skill-name">{item.name}</div>
-              </div>
-              {renderList(2, (index) => (
-                <div class="w-200px h-full flex justify-center bg-black" onClick={() => {
-                  itemChecked(item.id.toString(), index).value = !itemChecked(item.id.toString(), index).value
-                }}>
-                  <div class="flex justify-between w-full h-30px">
-                    <div class="w-16px"></div>
-                    <div class="relative inline-bloc">
-                    <div
-                      class="bg-#a128f4 w-26px h-26px top-1px left-1px absolute z-5"
-                      style="mix-blend-mode: hue;"
-                    ></div>
-                    <img
-                      style="filter:brightness(1) contrast(1) saturate(1.5)"
-                      class="w-28px h-28px"
-                      src={getImageURL(item.icon)}
-                      alt={item.name}
-                    />
+        <div class="flex pt-10px bg-black">
+          <div class="skill-reinforce relative">
+            <div class="absolute left-55px top-150px w-250px flex flex-col gap-25px">
+              {renderList(3, (index) => (
+                <>
+                  <div class="w-180px h-40px flex items-center justify-between pl-10px pr-10px">
+                    <CaclIconSelect class="!mt-3px !ml--1px !bg-white/0 !border-white/0" columnNum={4} >
+                      {renderList(skills.value, (item) => (
+                        <>
+                        <CalcOption value={item.id} key={item.id}>
+                          <img  src={getImageURL(item.icon)} alt={item.name} />
+                        </CalcOption>
+                        </>
+                      ))}
+                    </CaclIconSelect>
+                    <CalcButton icon="exchange"></CalcButton>
+                    <CaclIconSelect class="!mt-3px !bg-white/0 !border-white/0" columnNum={4} >
+                      {renderList(skills.value, (item) => (
+                        <>
+                        <CalcOption value={item.id} key={item.id}>
+                          <img  src={getImageURL(item.icon)} alt={item.name} />
+                        </CalcOption>
+                        </>
+                      ))}
+                      </CaclIconSelect>
                   </div>
-                  <CalcCheckbox modelValue={itemChecked(item.id.toString(), index).value}/>
-                  </div>
-
-                </div>
+                </>
               ))}
             </div>
-          ))}
+            <div class="absolute top-80px left-300px w-320px h-270px flex flex-wrap content-start gap-15px py-5px px-30px box-border">
+              {renderList(skills.value, (item) => (
+                <div
+                  key={item.id}
+                  class="w-28px h-28px border-1px border-solid border-#3C2E1D rounded-4px"
+                >
+                  <img src={getImageURL(item.icon)} alt={item.name} />
+                </div>
+              ))}
+              {renderList(36 - skills.value.length, (item) => (
+                <div
+                  key={item}
+                  class="w-28px h-28px border-1px border-solid border-#3C2E1D rounded-4px bg-#0B0D0A"
+                ></div>
+              ))}
+            </div>
+          </div>
         </div>
       </>
     )

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

@@ -0,0 +1,7 @@
+.skill-reinforce {
+  width: 620px;
+  height: 375px;
+  background-image: url('./img/bg.png');
+  background-size: 100% 100%;
+  background-color: black;
+}

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

@@ -0,0 +1,102 @@
+import { getImageURL, getLocalImageURL } from '@/utils/images'
+import type { ISkill } from '@/api/info/type'
+import { useVModel } from '@vueuse/core'
+import CalcButton from '@/components/calc/button/index.vue'
+import CalcCheckbox from '@/components/calc/checkbox/index.vue'
+import { renderList } from 'vue'
+import './style.scss'
+export default defineComponent({
+  name: 'SkillTree',
+  props: {
+    skills: {
+      type: Array as PropType<ISkill[]>,
+      default: () => [],
+    },
+    lvInfo: {
+      type: Object as PropType<Record<string, { lv: number; vp: number }>>,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const lvInfo = useVModel(props, 'lvInfo')
+    const skills = computed(() =>
+      props.skills.filter((a) => a.hasVP && lvInfo).sort((a, b) => a.learnLv - b.learnLv),
+    )
+
+    const currentUsedVP = computed(() => {
+      return Object.keys(lvInfo.value)
+        .map((a) => lvInfo.value[a].vp)
+        .filter((a) => !!a && a > 0).length
+    })
+
+    const itemChecked = (skillID: string, vp: number) => {
+      return computed<boolean>({
+        get() {
+          if (!lvInfo.value[skillID].vp) {
+            lvInfo.value[skillID].vp = 0
+          }
+          return lvInfo.value[skillID]?.vp == vp
+        },
+        set(value: boolean) {
+          // 选中当前VP形态 并且当前已选VP大于5 并且当前技能没有VP
+          if (value && currentUsedVP.value >= 5 && lvInfo.value[skillID]?.vp == 0) {
+            return
+          }
+          if (value) {
+            lvInfo.value[skillID].vp = vp
+          } else {
+            lvInfo.value[skillID].vp = 0
+          }
+        },
+      })
+    }
+
+    return () => (
+      <>
+        <div class="h-auto py-2 flex flex-col bg-#080808 box-content">
+          {renderList(skills.value, (item) => (
+            <div class="h-140px flex items-center vp">
+              <div class="w-30px text-center text-#816f4c">{item.learnLv}</div>
+              <div class="w-200px flex gap-5px items-center">
+                <div class="border-1px border-solid border-#3F382E rounded-4px w-28px h-28px">
+                  <img class="w-28px h-28px" src={getImageURL(item.icon)} alt={item.name} />
+                </div>
+                <div class="skill-name">{item.name}</div>
+              </div>
+              {renderList(2, (index) => (
+                <div
+                  class="flex justify-center vp-item ml-5px"
+                  onClick={() => {
+                    itemChecked(item.id.toString(), index).value = !itemChecked(
+                      item.id.toString(),
+                      index,
+                    ).value
+                  }}
+                >
+                  <div class="flex justify-between w-full h-30px ">
+                    <div class="flex items-start">
+                      <CalcCheckbox modelValue={itemChecked(item.id.toString(), index).value} disabled={currentUsedVP.value >= 5 && lvInfo.value[item.id.toString()]?.vp == 0} />
+                    </div>
+                    <div class="relative inline-block border-1px border-solid border-#3F382E rounded-4px w-28px h-28px">
+                      <div
+                        class="bg-#a128f4 w-26px h-26px top-1px left-1px absolute z-5"
+                        style="mix-blend-mode: hue;"
+                      ></div>
+                      <img
+                        style="filter:brightness(1) contrast(1) saturate(1.5)"
+                        class="w-28px h-28px"
+                        src={getImageURL(item.icon)}
+                        alt={item.name}
+                      />
+                    </div>
+                    <div class="w-16px"></div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </>
+    )
+  },
+})

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

@@ -0,0 +1,16 @@
+.vp {
+  &:nth-child(n + 1) {
+    background-color: #000000;
+  }
+  &:nth-child(2n + 1) {
+    background-color: #080808;
+  }
+
+  .vp-item {
+    height: 124px;
+    width: 152px;
+    background-image: url(./img/bg.png);
+    padding:15px 20px ;
+    box-sizing: border-box;
+  }
+}