dev

2025-03-29 00:48:05 +08:00
parent a865439f39
commit 4c392a23d3
17 changed files with 428 additions and 235 deletions
@@ -16,14 +16,5 @@ import { useConfigStore } from '@/stores'
 const props = defineProps<{
  alter: string
 }>()
-const infoStore = useInfoStore()
-const configStore = useConfigStore()

-onMounted(async () => {
-  await infoStore.createCharacter(props.alter, '0')
-  configStore.loadConfig()
-  window.addEventListener('beforeunload', () => {
-    configStore.saveConfig()
-  })
-})
 </script>
@@ -0,0 +1,181 @@
+<script lang="tsx">
+import { computed, defineComponent, ref, renderList } from "vue"
+import type { IEnchantingInfo } from "@/api/info/type"
+import { useInfoStore, useConfigStore } from "@/stores"
+export default defineComponent({
+  name: "Equip",
+  props: {
+    part: {
+      type: String,
+      default: "头肩"
+    }
+  },
+  setup(props) {
+    const configStore = useConfigStore()
+    const can_upgrade = computed(() => {
+      return !["称号", "宠物"].includes(props.part as string)
+    })
+
+    // const globalStore = useGlobalStore()
+
+    /** 是否有徽章 */
+    const has_socket = computed(() => !["称号", "宠物", "耳环", "武器"].includes(props.part as string))
+    /** 是否有右侧徽章 */
+    const has_socket_right = computed(() => has_socket.value && !["辅助装备", "魔法石"].includes(props.part as string))
+    const basicInfoStore = useInfoStore()
+
+    const enchanting_list = computed<IEnchantingInfo[] | undefined>(() => {
+      return basicInfoStore.enchantings
+        ?.filter(item => item.position.includes(props.part) && !item.position.includes("武器装扮") && !item.position.includes("宠物装备"))
+        .sort((a, b) => b.rate - a.rate)
+    })
+
+    const emblem_list = computed<IEnchantingInfo[] | undefined>(() => {
+      return basicInfoStore.emblems.filter(item => item.position.includes(props.part))
+    })
+
+    const global_change = ref(false)
+
+    const currentInfo = function<T>(name: string, defaultValue?: T) {
+      return computed<string | number>({
+        get() {
+          return (configStore.config.equips?.[props.part] as Record<string, any>)?.[name] ?? defaultValue ?? 0
+        },
+        set(val) {
+          console.log(name, val)
+          if (val == undefined) {
+            return
+          }
+          if (name == "socket_right" && !has_socket_right.value) {
+            // configStore.setForge(props.part, name, 0)
+            return
+          }
+
+          let parts: string[] = []
+
+          if (global_change.value) {
+            if (name === "enchanting") {
+              const enchant = basicInfoStore?.enchantings?.find(item => item.id == val) as IEnchantingInfo | undefined
+              if (enchant?.position) {
+                parts = enchant.position
+              }
+            }
+            if (["socket_left", "socket_right"].includes(name)) {
+              const emblem = basicInfoStore?.emblems?.find(item => item.id.toString() == val.toString()) as IEnchantingInfo | undefined
+              if (emblem?.position) {
+                parts = emblem.position.filter(item => !["皮肤", "武器装扮", "光环"].includes(item))
+              }
+            }
+            if (["cursed_type", "cursed_number"].includes(name)) {
+              parts = basicInfoStore.parts.filter(e => !["称号", "宠物"].includes(e))
+            }
+          } else {
+            parts = [props.part]
+          }
+          console.log(parts,val)
+
+          for (const part of parts) {
+            if (configStore.config.equips[part]) {
+              (configStore.config.equips[part] as Record<string, any>)[name] = val
+            }
+          }
+        }
+      })
+    }
+
+    // 附魔
+    const enchanting = currentInfo<string | number>("enchanting")
+
+    // 镶嵌栏1
+    const socket_left = currentInfo<string | number>("socket_left", 0)
+
+    // 镶嵌栏2
+    const socket_right = currentInfo<string | number>("socket_right")
+
+    // 增幅
+    const reinforce_type = currentInfo<string | number>("reinforce_type", 1)
+
+    // 增幅数值
+    const reinforce = currentInfo<string | number>("reinforce")
+
+
+    // 锻造数值
+    const dz_number = currentInfo<string | number>("dz_number")
+
+    /**
+       * 同步徽章1到徽章2
+       * @param val
+       */
+    function changeSocket(val: number) {
+      if (has_socket_right.value) {
+        socket_right.value = val
+      }
+    }
+
+    return () => {
+      return (
+        <div class="flex flex-wrap equ-profile">
+          <div class="equ-profile-item">
+            <div class="mr-10px row-name">当前部位</div>
+            <span> {props.part}</span>
+            {can_upgrade.value ? <calc-checkbox style="margin-left:auto" v-model={global_change.value} label="全局修改"></calc-checkbox> : <div></div>}
+          </div>
+          {can_upgrade.value ? (
+            <div class="equ-profile-item">
+              <div class="row-name">增幅</div>
+              <calc-select v-model={reinforce_type.value} class="flex-1 !h-20px">
+                <calc-option value={1}>增幅</calc-option>
+                <calc-option value={2}>强化</calc-option>
+              </calc-select>
+              <calc-select v-model={reinforce.value} class="flex-1 !h-20px">
+                {renderList(32, i => (
+                  <calc-option value={i - 1}>{i - 1}</calc-option>
+                ))}
+              </calc-select>
+                {props.part == '武器' && (<calc-select v-model={dz_number.value} class="flex-1 !h-20px">
+                  {renderList(9, i => (
+                    <calc-option value={i - 1}>锻造+ {i - 1}</calc-option>
+                  ))}
+                </calc-select>)}
+            </div>
+          ) : (
+            <div></div>
+          )}
+          <div class="equ-profile-item">
+            <div class="row-name">附魔</div>
+            <calc-select v-model={enchanting.value} class="flex-1 !h-20px">
+              <calc-option value={0}>无</calc-option>
+              {renderList(enchanting_list.value ?? [], item => (
+                <calc-option value={item.id}>{item.props}</calc-option>
+              ))}
+            </calc-select>
+          </div>
+          {has_socket.value ? (
+            <div class="equ-profile-item">
+              <div class="row-name">徽章</div>
+              <calc-select onChange={changeSocket} v-model={socket_left.value} class="flex-1 !h-20px">
+                <calc-option value={0}>无</calc-option>
+                {renderList(emblem_list.value ?? [], item => (
+                  <calc-option value={item.id}>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option>
+                ))}
+              </calc-select>
+              {has_socket_right.value && (
+                <calc-select v-model={socket_right.value} class="flex-1 !h-20px">
+                  <calc-option value={0}>无</calc-option>
+                  {renderList(emblem_list.value ?? [], item => (
+                    <calc-option value={item.id}>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option>
+                  ))}
+                </calc-select>
+              )}
+            </div>
+          ) : (
+            <div></div>
+          )}
+        </div>
+      )
+    }
+  }
+})
+</script>
+
+<style lang="scss"></style>
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <calc-collapse class="w-510px" title="装备打造(点击人物部位切换)">
+    <equipment />
+  </calc-collapse>
+  </div>
+
+</template>
+<script setup lang="ts">
+import equipment from './components/equipment.vue'
+</script>
+
+<style lang="scss">
+.equ-profile{
+  width: 100%;
+  .equ-profile-item {
+      width: 100%;
+      height: 20px;
+      display: flex;
+      margin-top: 5px;
+      margin-bottom: 5px;
+      align-items: center;
+
+      .row-name {
+        flex: 0 0 50px;
+        text-align: center;
+      }
+
+      :not(:last-child) {
+        margin-right: 10px !important;
+      }
+
+      .i-select-label {
+        margin-right: 0px !important;
+      }
+    }
+}
+
+</style>
@@ -4,6 +4,7 @@
      <calc-tabs route>
      <calc-tab :value="`/character/equipment/${props.alter}`">装备设置</calc-tab>
      <calc-tab :value="`/character/skill/${props.alter}`">技能设置</calc-tab>
+      <calc-tab :value="`/character/forge/${props.alter}`">打造设置</calc-tab>
    </calc-tabs>
    </div>
    <div class="content flex">
@@ -24,6 +25,7 @@ const configStore = useConfigStore()
 onMounted(async () => {
  await infoStore.createCharacter(props.alter, '0')
  configStore.loadConfig()
+  console.log("~~~~~~~~")
  window.addEventListener('beforeunload', () => {
    configStore.saveConfig()
  })
@@ -2,6 +2,7 @@ import { getImageURL } from '@/utils/images'
 import type { ISkill } from '@/api/info/type'
 import { useVModel } from '@vueuse/core'
 import './style.scss'
+import CalcButton from '@/components/calc/button/index.vue'

 export default defineComponent({
  name: 'SkillTree',
@@ -106,10 +107,10 @@ export default defineComponent({
          <div class="absolute">
            <div class="w-36px h-55px bg-gradient-linear bg-gradient-[180deg,#f8e26c_0%,#f87c43_94.34%] z-1"></div>
            <div class="flex bottom--5px relative z-2 transform -translate-x-1/4">
-              <button onClick={(e) => actionSkillLv(skill, 'subMax')}>&lt;</button>
-              <button onClick={(e) => actionSkillLv(skill, 'sub')}>-</button>
-              <button onClick={(e) => actionSkillLv(skill, 'add')}>+</button>
-              <button onClick={(e) => actionSkillLv(skill, 'addMax')}>&gt;</button>
+              <CalcButton onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'subMax')}}>&lt;</CalcButton>
+              <CalcButton onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'sub')}}>-</CalcButton>
+              <CalcButton icon="plus" onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'add')}}></CalcButton>
+              <CalcButton icon="next" onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'addMax')}}></CalcButton>
            </div>
          </div>
        </>