dev

frontend/src/pages/Character/Equipment/Index.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="flex flex-col gap-20px mx-10px">
+      <Weapon></Weapon>
+      <Suit></Suit>
+      <Universal></Universal>
+    </div>
+</template>
+
+<script lang="ts" setup name="Index">
+import { useInfoStore } from '@/stores/info'
+import { getImageURL } from '@/utils/images'
+import Suit from './components/Suit.vue'
+import Weapon from './components/Weapon.vue'
+import Universal from './components/Universal.vue'
+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>

frontend/src/pages/Character/Index.vue

@@ -1,27 +1,19 @@
 <template>
   <div class="w-100% h-100% main" :class="props.alter.split('.').slice(-1)">
-    <div class="header"></div>
+    <div class="header">
+      <calc-tabs route>
+      <calc-tab :value="`/character/equipment/${props.alter}`">装备设置</calc-tab>
+      <calc-tab :value="`/character/skill/${props.alter}`">技能设置</calc-tab>
+    </calc-tabs>
+    </div>
     <div class="content flex">
-      <div class="flex flex-col gap-20px mx-10px">
-        <Weapon></Weapon>
-        <Suit></Suit>
-        <Universal></Universal>
-      </div>
-
-      <div class="h-90vh w-auto overflow-y-auto overflow-x-hidden">
-        <SkillTree :skills="infoStore.skills" :lvInfo="configStore.config?.skills"></SkillTree>
-      </div>
+      <RouterView></RouterView>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup name="Index">
 import { useInfoStore } from '@/stores/info'
-import { getImageURL } from '@/utils/images'
-import SkillTree from './Skill/SkillTree/index'
-import Suit from './Equipment/Suit.vue'
-import Weapon from './Equipment/Weapon.vue'
-import Universal from './Equipment/Universal.vue'
 import { useConfigStore } from '@/stores'
 const props = defineProps<{
   alter: string

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

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <div class="h-90vh w-auto overflow-y-auto overflow-x-hidden">
+      <SkillTree :skills="infoStore.skills" :lvInfo="configStore.config?.skills"></SkillTree>
+    </div>
+  </div>
+</template>
+
+
+<script lang="ts" setup name="Index">
+import { useInfoStore } from '@/stores/info'
+import SkillTree from './components/SkillTree/index'
+import { useConfigStore } from '@/stores'
+const props = defineProps<{
+  alter: string
+}>()
+const infoStore = useInfoStore()
+const configStore = useConfigStore()
+</script>