dev

2025-05-18 16:05:56 +08:00
parent 01c56656fb
commit 14ca64b4cd
13 changed files with 268 additions and 117 deletions
@@ -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>
-      </>
-    )
-  },
-})
@@ -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>
      </>
    )
@@ -0,0 +1,7 @@
+.skill-reinforce {
+  width: 620px;
+  height: 375px;
+  background-image: url('./img/bg.png');
+  background-size: 100% 100%;
+  background-color: black;
+}
@@ -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>
+      </>
+    )
+  },
+})
@@ -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;
+  }
+}
@@ -1,31 +1,67 @@
 <template>
  <div>
-    <calc-tabs v-model="tab">
+    <div class="flex bg-#101012 h-40px text-#6C5E4A font-bold">
+      <div
+        class="flex-1 text-15px flex items-center justify-center"
+        @click="tab = 0"
+        :class="{ active: tab === 0 }"
+      >
+        技能加点
+      </div>
+      <div class="w-auto text-18px flex items-center justify-center !font-normal">|</div>
+      <div
+        class="flex-1 text-15px flex items-center justify-center"
+        @click="tab = 1"
+        :class="{ active: tab === 1 }"
+      >
+        技能VP
+      </div>
+      <!-- <div class="w-auto text-18px flex items-center justify-center !font-normal">|</div>
+      <div
+        class="flex-1 text-15px flex items-center justify-center"
+        @click="tab = 2"
+        :class="{ active: tab === 2 }"
+      >
+        技能突破
+      </div> -->
+    </div>
+    <!-- <calc-tabs v-model="tab">
      <calc-tab :value="0">技能加点</calc-tab>
      <calc-tab :value="1">技能VP</calc-tab>
      <calc-tab :value="2">技能突破</calc-tab>
-    </calc-tabs>
-    <div class="h-90vh w-auto overflow-y-auto overflow-x-hidden">
-      <SkillTree
-        :skills="infoStore.skills"
-        v-model:lvInfo="configStore.config.skills"
-        v-model:bindAwake="configStore.config.bindAwake"
-        v-if="tab === 0"
-      ></SkillTree>
-      <SkillVP
-        :skills="infoStore.skills"
-        v-model:lvInfo="configStore.config.skills"
-        v-model:bindAwake="configStore.config.bindAwake"
-        v-if="tab === 1"
-      ></SkillVP>
+    </calc-tabs> -->
+    <div class="h-90vh w-620px overflow-x-hidden bg-#202020">
+      <div class="overflow-y-auto h-full" v-if="tab === 0">
+        <SkillTree
+          :skills="infoStore.skills"
+          v-model:lvInfo="configStore.config.skills"
+          v-model:bindAwake="configStore.config.bindAwake"
+        ></SkillTree>
+      </div>
+      <div v-if="tab === 1" class="flex flex-col overflow-y-hidden h-full">
+                <SkillReinforce
+        class="flex-1"
+          :skills="infoStore.skills"
+          v-model:lvInfo="configStore.config.skills"
+          v-model:bindAwake="configStore.config.bindAwake"
+        ></SkillReinforce>
+        <div class="flex-1 overflow-y-auto w-full">
+          <SkillVP
+            :skills="infoStore.skills"
+            v-model:lvInfo="configStore.config.skills"
+            v-model:bindAwake="configStore.config.bindAwake"
+          ></SkillVP>
+        </div>
+      </div>
    </div>
  </div>
 </template>

 <script lang="ts" setup name="Index">
 import { useInfoStore } from '@/stores/info'
-import SkillTree from './components/SkillTree/index'
-import SkillVP from './components/SkillReinforce';
+import SkillTree from './components/SkillTree'
+import SkillVP from './components/SkillVP'
+import SkillReinforce from './components/SkillReinforce'
 import { useConfigStore } from '@/stores'
 const props = defineProps<{
  alter: string
@@ -34,3 +70,31 @@ const tab = ref(0)
 const infoStore = useInfoStore()
 const configStore = useConfigStore()
 </script>
+
+<style lang="scss" scoped>
+.active {
+  color: #ccc088;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 80px;
+    height: 15px;
+    opacity: 0.35;
+    background: #bf8d20;
+    filter: blur(7px);
+    z-index: 2;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    background: url('@/assets/img/active.png') no-repeat;
+    width: 148px;
+    height: 16px;
+    bottom: 2px;
+    transform: translate(0, 50%);
+  }
+}
+</style>
@@ -111,6 +111,11 @@
  @include icon-style('min');
 }

+.icon-exchange {
+  @include icon-style('exchange', 20px, 20px, auto 100%);
+}
+
+
 .icon-increase-little {
  @include icon-style('increase', 16px, 16px);
 }