dev

2025-03-12 09:36:26 +08:00
parent b98464d8b5
commit 6053fba1da
22 changed files with 286 additions and 228 deletions
@@ -0,0 +1,19 @@
+<template>
+  <div class="h-90vh w-560px overflow-y-auto overflow-x-hidden">
+    <SkillTree></SkillTree>
+  </div>
+
+</template>
+
+<script lang="ts" setup name="Index">
+import { useInfoStore } from '@/stores/info'
+import { getImageURL } from '@/utils/images'
+import SkillTree from './Skill/SkillTree.vue';
+const props = defineProps<{
+  alter: string
+}>()
+const infoStore = useInfoStore()
+onMounted(() => {
+  infoStore.createCharacter(props.alter, '0')
+})
+</script>
@@ -0,0 +1,47 @@
+<template>
+  <div class="relative w-550px h-auto">
+    <template v-for="item in infoStore.skills" :key="item.id">
+      <div
+        class="absolute w-34px h-auto flex flex-col gap-2px py-2px items-center bg-#2c2d2c rounded-2px"
+        :style="skillPositon(item.learnLv, item.positon)"
+      >
+        <img class="w-30px h-30px" :src="getImageURL(item.icon)" :alt="item.name" />
+        <div class="flex-1 bg-black text-white">100级</div>
+      </div>
+    </template>
+    <template v-for="lv of 21" :key="lv">
+      <div class="skill-tree-line flex items-center px-20px text-#373837">
+        {{ lv % 2 === 1 ?  Math.max(1, (lv - 1) * 5) :'' }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useInfoStore } from '@/stores'
+import { getImageURL } from '@/utils/images'
+
+const infoStore = useInfoStore()
+
+const skillPositon = (learnLv: number, positon: number) => {
+  return {
+    positon: 'absolute',
+    left: `${positon * 50 + 50}px`,
+    top: `${Math.floor(learnLv / 5) * 80 + 8}px`,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.skill-tree-line {
+  height: 80px;
+  width: auto;
+  &:nth-child(n + 1) {
+    background-color: #000000;
+  }
+  &:nth-child(2n + 1) {
+    background-color: #202020;
+    backdrop-filter: blur(1px);
+  }
+}
+</style>
@@ -24,82 +24,22 @@ export default defineComponent(async () => {
  // 获取角色相关信息，判定是否开放
  function choose_job(child: IAlterInfo) {
    return async () => {
-      // if (child.comment == '首页') {
-      //   return openUrl('https://dnftools.com/')
-      // }
-      // if (child.comment == '设置') {
-      //   return openUrl('/set', { width: 600, height: 500, scale: zoom.value })
-      // }
-      // if (ignores.includes(child.name)) {
-      //   return
-      // }
-      // if (child.name == 'sponsor') {
-      //   return openUrl(child.url ?? '')
-      // }
-      // if (child.open || import.meta.env.DEV) {
-      //   const options = child.options ?? []
-      //   if (options.length > 0) {
-      //     const id = randomId()
-      //     return await show({
-      //       // id,
-      //       scale: zoom.value,
-      //       content: '请选择职业平衡版本',
-      //       action: () => {
-      //         return (
-      //           <>
-      //             <div class="flex items-center justify-around flex-wrap" style="width:200px">
-      //               {renderList(options, (option) =>
-      //                 !option.class ? (
-      //                   <calc-button
-      //                     class="!w-40% !mb-2"
-      //                     onClick={() => {
-      //                       openUrl('/character', {
-      //                         query: { alter: child.name },
-      //                         width: 1100,
-      //                         height: 775,
-      //                         scale: zoom.value,
-      //                       })
-      //                       close(id, 'ok')
-      //                     }}
-      //                   >
-      //                     {option.title}
-      //                   </calc-button>
-      //                 ) : (
-      //                   <calc-button
-      //                     class="!w-40% !mb-2"
-      //                     onClick={() => {
-      //                       openUrl('/character', {
-      //                         query: { alter: option.class ?? '' },
-      //                         width: 1100,
-      //                         height: 775,
-      //                         scale: zoom.value,
-      //                       })
-      //                       close(id, 'ok')
-      //                     }}
-      //                   >
-      //                     {option.title}
-      //                   </calc-button>
-      //                 ),
-      //               )}
-      //             </div>
-      //           </>
-      //         )
-      //       },
-      //     })
-      //   }
-      //   return openUrl('/character', {
-      //     query: { alter: child.name },
-      //     width: 1100,
-      //     height: 775,
-      //     title: child.title,
-      //     scale: zoom.value,
-      //   })
-      // } else {
-      //   return alert({
-      //     content: '未开放的角色!',
-      //   })
-      // }
+      if (child.comment == '首页') {
+        return window.open("https://dnftools.com","_blank")
+      }
+      if (child.name == 'sponsor') {
+        return window.open((child.url ?? ''),"_blank")
+      }
+      if (child.open) {
+        const options = child.options ?? []
+        if (options.length > 0) {
+          return
+        }
+        else{
+          return window.open("/character/" + (child.class || child.name),"_self")
+        }
    }
+  }
    // router.push("/character/" + alter)
  }