diff --git a/frontend/index.html b/frontend/index.html
index 1d5cb807..c2191165 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -12,7 +12,6 @@
     <title>DNF计算器</title>
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-J0NPDEYQJS"></script>
     <script>
-      if (!window.pywebview) {
         // 百度统计
         // eslint-disable-next-line vars-on-top, no-var
         var _hmt = _hmt || []
@@ -29,7 +28,6 @@
         }
         gtag('js', new Date())
         gtag('config', 'G-J0NPDEYQJS')
-      }
     </script>
   </head>
   <body>
diff --git a/frontend/src/components/calc/button/index.vue b/frontend/src/components/calc/button/index.vue
index 4a0bae9b..bcd242a1 100644
--- a/frontend/src/components/calc/button/index.vue
+++ b/frontend/src/components/calc/button/index.vue
@@ -19,6 +19,10 @@ export default defineComponent({
     },
     icon: {
       type: String
+    },
+    type: {
+      type: String,
+      default: "primary"
     }
   },
   setup(props, { slots }) {
diff --git a/frontend/src/components/calc/cascader/index.vue b/frontend/src/components/calc/cascader/index.vue
index ad9744d5..a14910ee 100644
--- a/frontend/src/components/calc/cascader/index.vue
+++ b/frontend/src/components/calc/cascader/index.vue
@@ -1,5 +1,5 @@
 <script lang="tsx">
-import { selectionListEmits, selectionListProps } from "hoci"
+import { selectionEmits, selectionProps } from "hoci"
 import type { CSSProperties, PropType } from "vue";
 import { Teleport, Transition, computed, defineComponent, onDeactivated, ref, watch } from "vue"
 
@@ -15,7 +15,7 @@ interface ICascaderItem {
 export default defineComponent({
   name: "ICascader",
   props: {
-    ...selectionListProps,
+    ...selectionProps,
     disabled: {
       type: Boolean,
       default: false
@@ -37,7 +37,7 @@ export default defineComponent({
       default: () => []
     }
   },
-  emits: [...selectionListEmits, "select"],
+  emits: [...selectionEmits, "select"],
   setup(props, { emit }) {
     const modelValue = useVModel(props, "modelValue")
 
diff --git a/frontend/src/components/calc/checkbox-group/index.vue b/frontend/src/components/calc/checkbox-group/index.vue
index 0fd92385..d2570f0a 100644
--- a/frontend/src/components/calc/checkbox-group/index.vue
+++ b/frontend/src/components/calc/checkbox-group/index.vue
@@ -1,13 +1,13 @@
 <script lang="tsx">
 import { defineComponent, provide } from "vue"
-import { selectionListEmits, selectionListProps, useSelectionList } from "hoci"
+import { selectionEmits, selectionProps, useSelectionList } from "hoci"
 import { CHECKBOX_GROUP } from "../shared"
 
 export default defineComponent({
   name: "ICheckboxGroup",
   components: {},
   props: {
-    ...selectionListProps,
+    ...selectionProps,
     activeClass: {
       type: String,
       default: "checked"
@@ -21,7 +21,7 @@ export default defineComponent({
       default: true
     }
   },
-  emits: [...selectionListEmits],
+  emits: [...selectionEmits],
 
   setup(props, context) {
     provide(CHECKBOX_GROUP, true)
diff --git a/frontend/src/components/calc/checkbox/index.vue b/frontend/src/components/calc/checkbox/index.vue
index 73164f2b..fb969899 100644
--- a/frontend/src/components/calc/checkbox/index.vue
+++ b/frontend/src/components/calc/checkbox/index.vue
@@ -1,7 +1,7 @@
 <script lang="tsx">
 import type { EmitsOptions, SetupContext } from "vue";
 import { computed, defineComponent, inject, nextTick, renderSlot } from "vue"
-import { selectionItemProps, switchEmits, switchProps, useSelectionItem, useSwitch } from "hoci"
+import { selectionProps, switchEmits, switchProps, useSelectionItem, useSwitch } from "hoci"
 import { CHECKBOX_GROUP } from "../shared"
 
 export default defineComponent({
@@ -9,7 +9,7 @@ export default defineComponent({
   components: {},
   props: {
     ...switchProps,
-    ...selectionItemProps,
+    ...selectionProps,
     label: {
       type: String
     },
diff --git a/frontend/src/components/calc/iconselect/index.vue b/frontend/src/components/calc/iconselect/index.vue
index c60d6ccc..bf627cad 100644
--- a/frontend/src/components/calc/iconselect/index.vue
+++ b/frontend/src/components/calc/iconselect/index.vue
@@ -1,5 +1,5 @@
 <script lang="tsx">
-import { selectionListEmits, selectionListProps, useSelectionList } from "hoci"
+import { selectionEmits, selectionProps, useSelectionList } from "hoci"
 import type { CSSProperties, PropType, RendererElement } from "vue";
 import { Teleport, Transition, computed, defineComponent, onDeactivated, ref, renderSlot, watch } from "vue"
 
@@ -8,7 +8,7 @@ import { onClickOutside } from "@vueuse/core"
 export default defineComponent({
   name: "IIconselect",
   props: {
-    ...selectionListProps,
+    ...selectionProps,
     disabled: {
       type: Boolean,
       default: false
@@ -29,7 +29,7 @@ export default defineComponent({
       default: "body"
     }
   },
-  emits: selectionListEmits,
+  emits: selectionEmits,
   setup(props, context) {
     // props.itemClass = "i-select-dropdown-item"
     // const { active } = useSelectionList({ ...props, itemClass: "i-select-dropdown-item" }, context)
diff --git a/frontend/src/components/calc/select/index.vue b/frontend/src/components/calc/select/index.vue
index 8cb45d8d..fb1e6837 100644
--- a/frontend/src/components/calc/select/index.vue
+++ b/frontend/src/components/calc/select/index.vue
@@ -1,5 +1,5 @@
 <script lang="tsx">
-import { selectionListEmits, selectionListProps, useSelectionList } from "hoci"
+import { selectionEmits, selectionProps, useSelectionList } from "hoci"
 import type { CSSProperties, PropType, RendererElement } from "vue";
 import { Teleport, Transition, computed, defineComponent, onDeactivated, ref, renderList, renderSlot, watch } from "vue"
 
@@ -9,7 +9,7 @@ import { classPropType, labelPropType } from "@/components/hooks/types"
 export default defineComponent({
   name: "ISelect",
   props: {
-    ...selectionListProps,
+    ...selectionProps,
     disabled: {
       type: Boolean,
       default: false
@@ -41,7 +41,7 @@ export default defineComponent({
       }
     }
   },
-  emits: [...selectionListEmits],
+  emits: [...selectionEmits],
   setup(props, context) {
     const modelValue = useVModel(props, "modelValue", context.emit, { passive: true })
 
diff --git a/frontend/src/components/calc/tab/index.vue b/frontend/src/components/calc/tab/index.vue
index 79e5bcfd..2dcd7450 100644
--- a/frontend/src/components/calc/tab/index.vue
+++ b/frontend/src/components/calc/tab/index.vue
@@ -1,11 +1,11 @@
 <script lang="tsx">
 import { defineComponent, renderSlot } from "vue"
-import { HiItem, selectionItemProps } from "hoci"
+import { HiItem, selectionProps } from "hoci"
 
 export default defineComponent({
   name: "CalcTab",
   props: {
-    ...selectionItemProps
+    ...selectionProps
   },
   setup(props, { slots }) {
     return () => {
diff --git a/frontend/src/components/calc/tabs/index.vue b/frontend/src/components/calc/tabs/index.vue
index a6d82cbc..850bd296 100644
--- a/frontend/src/components/calc/tabs/index.vue
+++ b/frontend/src/components/calc/tabs/index.vue
@@ -1,5 +1,5 @@
 <script lang="tsx">
-import { HiSelection, selectionListProps } from "hoci"
+import { HiSelection, selectionProps } from "hoci"
 import type { PropType } from "vue";
 import { computed, defineComponent, renderSlot } from "vue"
 import type { LocationQuery } from "vue-router";
@@ -9,7 +9,7 @@ import type { BaseType } from "@/components/hooks/types"
 export default defineComponent({
   name: "CalcTabs",
   props: {
-    ...selectionListProps,
+    ...selectionProps,
     vertical: {
       type: Boolean
     },
diff --git a/frontend/src/components/calc/tree/index.vue b/frontend/src/components/calc/tree/index.vue
index 20f933c3..04f012da 100644
--- a/frontend/src/components/calc/tree/index.vue
+++ b/frontend/src/components/calc/tree/index.vue
@@ -1,5 +1,5 @@
 <script lang="tsx">
-import { HiSelection, selectionListProps } from "hoci"
+import { HiSelection, selectionProps } from "hoci"
 import { useVModel } from "@vueuse/core"
 import type { PropType } from "vue";
 import { computed, defineComponent, renderList, watch } from "vue"
@@ -10,7 +10,7 @@ import { labelPropType, valuePropType } from "@/components/hooks/types"
 const Tree = defineComponent({
   name: "CalcTree",
   props: {
-    ...selectionListProps,
+    ...selectionProps,
     modelValue: {
       type: valuePropType,
       default: () => null
diff --git a/frontend/src/pages/Character/Equipment/Index.vue b/frontend/src/pages/Character/Equipment/Index.vue
new file mode 100644
index 00000000..1b0945eb
--- /dev/null
+++ b/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>
diff --git a/frontend/src/pages/Character/Equipment/Stone.vue b/frontend/src/pages/Character/Equipment/components/Stone.vue
similarity index 100%
rename from frontend/src/pages/Character/Equipment/Stone.vue
rename to frontend/src/pages/Character/Equipment/components/Stone.vue
diff --git a/frontend/src/pages/Character/Equipment/Suit.vue b/frontend/src/pages/Character/Equipment/components/Suit.vue
similarity index 100%
rename from frontend/src/pages/Character/Equipment/Suit.vue
rename to frontend/src/pages/Character/Equipment/components/Suit.vue
diff --git a/frontend/src/pages/Character/Equipment/Universal.vue b/frontend/src/pages/Character/Equipment/components/Universal.vue
similarity index 100%
rename from frontend/src/pages/Character/Equipment/Universal.vue
rename to frontend/src/pages/Character/Equipment/components/Universal.vue
diff --git a/frontend/src/pages/Character/Equipment/Weapon.vue b/frontend/src/pages/Character/Equipment/components/Weapon.vue
similarity index 100%
rename from frontend/src/pages/Character/Equipment/Weapon.vue
rename to frontend/src/pages/Character/Equipment/components/Weapon.vue
diff --git a/frontend/src/pages/Character/Index.vue b/frontend/src/pages/Character/Index.vue
index 75e3f7d3..0bab2df4 100644
--- a/frontend/src/pages/Character/Index.vue
+++ b/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
diff --git a/frontend/src/pages/Character/Skill/SkillTree/index.tsx b/frontend/src/pages/Character/Skill/components/SkillTree/index.tsx
similarity index 100%
rename from frontend/src/pages/Character/Skill/SkillTree/index.tsx
rename to frontend/src/pages/Character/Skill/components/SkillTree/index.tsx
diff --git a/frontend/src/pages/Character/Skill/SkillTree/style.scss b/frontend/src/pages/Character/Skill/components/SkillTree/style.scss
similarity index 100%
rename from frontend/src/pages/Character/Skill/SkillTree/style.scss
rename to frontend/src/pages/Character/Skill/components/SkillTree/style.scss
diff --git a/frontend/src/pages/Character/Skill/index.vue b/frontend/src/pages/Character/Skill/index.vue
new file mode 100644
index 00000000..ac191f39
--- /dev/null
+++ b/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>
diff --git a/frontend/src/pages/Home/Index.vue b/frontend/src/pages/Home/Index.vue
index 7acc17e1..e98607e6 100644
--- a/frontend/src/pages/Home/Index.vue
+++ b/frontend/src/pages/Home/Index.vue
@@ -36,7 +36,7 @@ export default defineComponent(async () => {
           return
         }
         else{
-          return window.open("/character/" + (child.class || child.name),"_self")
+          return window.open("/character/" + (child.class || child.name),"_blank")
         }
     }
   }
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index b124b5e0..31d641fe 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,9 +1,9 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 const routes: RouteRecordRaw[] = [
-  {
-    path: '/:pathMatch(.*)',
-    redirect: '/',
-  },
+  // {
+  //   path: '/:pathMatch(.*)',
+  //   redirect: '/',
+  // },
   {
     path: '/',
     name: 'home',
@@ -11,9 +11,25 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path:'/character/:alter',
-    name:'character',
+    redirect: (to) => {
+      return { path: `/character/equipment/${to.params.alter}` }
+    },
     props: true,
+    name:'character',
     component: defineAsyncComponent(() => import('@/pages/Character/Index.vue')),
+    children: [
+      {
+        path: '/character/equipment/:alter',
+        name: 'equipment',
+        props: true,
+        component: defineAsyncComponent(() => import('@/pages/Character/Equipment/Index.vue')),
+      },{
+        path: '/character/skill/:alter',
+        name: 'skill',
+        props: true,
+        component: defineAsyncComponent(() => import('@/pages/Character/Skill/index.vue')),
+      }
+    ]
   }
 ]