添加列表及一键导入

frontend/src/api/info/index.ts

@@ -1,5 +1,5 @@
 import { defineRequest } from '../common'
-import type { IAdventureInfo, ICharacterInfo, IHelperInfo, ISkillInfo } from './type'
+import type { IAdventureInfo, IAlterInfo, ICharacterInfo, IHelperInfo, ISkillInfo } from './type'
 
 export default defineRequest((request) => {
   return {
@@ -7,6 +7,10 @@ export default defineRequest((request) => {
       const res = await request.get<IAdventureInfo[]>('/adventure')
       return res.data
     },
+    async alterByName(name: string) {
+      const res = await request.get<IAlterInfo>('/adventure', { params: { name } })
+      return res.data
+    },
     async createToken(alter: string, equVersion?: string) {
       const res = await request.get<string>(`/token/get/${alter}`, { params: { equVersion } })
       return res.data
@@ -23,6 +27,10 @@ export default defineRequest((request) => {
       const res = await request.get(`/dnfhelper/${uid}/`)
       return res.data
     },
+    async getConfigFromHelperAlter(uid: string, alter: string) {
+      const res = await request.get(`/dnfhelper/${uid}/${alter}`)
+      return res.data
+    },
     async getSkillFromCode(code: string) {
       const res = await request.post(`/skillTree/`, { code })
       return res.data

frontend/src/api/info/type.ts

@@ -216,15 +216,17 @@ export interface Attribute {
   detail: string
 }
 
+export interface IHelperRoleInfo {
+  roleId: string
+  roleName: string
+  roleJob: string
+  avatarLink: string
+  fame: number
+}
+
 export interface IHelperInfo {
   id: string
   avatar: string
   name: string
-  roleList: {
-    roleId: string
-    roleName: string
-    roleJob: string
-    avatarLink: string
-    fame: number
-  }[]
+  roleList: IHelperRoleInfo[]
 }

frontend/src/pages/Character/Config/importDnfhelper.vue

@@ -0,0 +1,80 @@
+<script lang="tsx">
+import { useAsyncState } from '@vueuse/core'
+import { defineComponent, ref } from 'vue'
+import api from '@/api'
+import { useDialog } from '@/components/hooks/dialog'
+import { isShow, onShow } from '@/components/hooks/show'
+import { useConfigStore } from '@/stores'
+import { type IHelperRoleInfo } from '@/api/info/type'
+
+export default defineComponent({
+  props: {
+    alter: {
+      type: Object as () => IHelperRoleInfo,
+    },
+    uid: {
+      type: String,
+    },
+  },
+  setup(props) {
+    const configStore = useConfigStore()
+    const { state, execute, isLoading } = useAsyncState(
+      async () => {
+        const res = await api.getConfigFromHelperAlter(props.uid || '', props.alter?.roleId || '')
+        configStore.config.equips = res.equips
+        configStore.config.avatar = res.avatars
+        configStore.config.avatarLink = res.avatarLink
+        configStore.config.emblems = res.emblems
+        configStore.config.sundry.fog = res.fogOathLv
+        configStore.config.oaths = res.oaths
+        const { alert } = useDialog()
+        visible.value = false
+        await alert({
+          content: '导入成功',
+        })
+        return res
+      },
+      undefined,
+      {
+        resetOnExecute: false,
+        immediate: false,
+        onError: Promise.reject,
+      },
+    )
+
+    onShow(
+      () => {
+        state.value = undefined
+      },
+      { immediate: true },
+    )
+
+    const visible = isShow()
+
+    return () => {
+      return (
+        <>
+          <div class="h-45 w-80 py-2 px-4 text-#e9c556">
+            <div class="flex justify-around items-center flex-col gap-1">
+              <div>检测到以下信息，是否导入助手数据？</div>
+              <div class="text-#DED29A">{props.alter?.roleName}</div>
+              <div class="text-#908150">{props.alter?.roleJob}</div>
+              <div class="text-#3ea74e">名望：{props.alter?.fame}</div>
+            </div>
+            <div>
+              <p class="text-#e9c556/80">* 点击导入后会从助手通过文字识别获取打造</p>
+              <p class="text-#e9c556/80">* 部分打造无法获取，此处仅做快捷导入</p>
+            </div>
+            <div class="flex justify-around items-center">
+              <calc-button onClick={execute} disabled={isLoading.value}>
+                导入
+              </calc-button>
+              <calc-button onClick={() => (visible.value = false)}>取消</calc-button>
+            </div>
+          </div>
+        </>
+      )
+    }
+  },
+})
+</script>

frontend/src/pages/Character/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-100% h-100% main flex" :class="infoStore.infos?.alter">
     <div class="header">
-      <calc-tabs route>
+      <calc-tabs route :query="route.query">
         <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>
@@ -38,6 +38,10 @@
   <calc-dialog lazy header="技能导入" v-model:visible="importSkillVisible">
     <ImportSkillVue></ImportSkillVue>
   </calc-dialog>
+
+  <calc-dialog lazy header="助手打造导入" v-model:visible="helperImport">
+    <ImportDnfhelper :alter="toImport" :uid="helperStore.helperInfo?.id"></ImportDnfhelper>
+  </calc-dialog>
 </template>
 
 <script lang="ts" setup name="Index">
@@ -45,16 +49,22 @@ import { useInfoStore } from '@/stores/info'
 import { useConfigStore } from '@/stores'
 import ImportVue from './Config/import.vue'
 import ImportSkillVue from './Config/importSkill.vue'
+import ImportDnfhelper from './Config/importDnfhelper.vue'
 import Result from './Result/Index.vue'
+import { useDnfHelperStore } from '@/stores/dnfhelper.ts'
+import { type IHelperRoleInfo } from '@/api/info/type'
 const props = defineProps<{
   alter: string
 }>()
 const infoStore = useInfoStore()
 const configStore = useConfigStore()
+const helperImport = ref(false)
 const importVisible = ref(false)
 const importSkillVisible = ref(false)
+const helperStore = useDnfHelperStore()
+const toImport = ref<IHelperRoleInfo>()
 
-const shouldWatch = ref(true)
+// const shouldWatch = ref(true)
 
 const isExecuting = ref(false)
 
@@ -81,11 +91,22 @@ const showImport = () => {
 const showImportSkill = () => {
   importSkillVisible.value = true
 }
+
+const route = useRoute()
+
 onMounted(async () => {
   await infoStore.createCharacter(props.alter, '0')
   window.addEventListener('beforeunload', () => {
     configStore.saveConfig()
   })
+  // 检测router的传参
+  const { roleId } = route.query
+  if (roleId) {
+    toImport.value = helperStore.helperInfo?.roleList.find((a) => a.roleId === roleId)
+    if (toImport.value) {
+      helperImport.value = true
+    }
+  }
 })
 
 onUnmounted(() => {

frontend/src/pages/Dnfhelper/list.vue

@@ -39,6 +39,8 @@
   </div>
 </template>
 <script setup lang="ts" name="dnfhelper-list">
+import api from '@/api'
+import { useDialog } from '@/components/hooks/dialog'
 import router from '@/router'
 import { useDnfHelperStore } from '@/stores/dnfhelper'
 import { computed } from 'vue'
@@ -70,12 +72,24 @@ const navToHome = () => {
 }
 
 const chooseRole = ({ roleId }: { roleId: string }) => {
-  console.log(roleId)
   acitveRoleId.value = roleId
 }
 
-const importRole = () => {
-  console.log('import')
+const { alert } = useDialog()
+
+const currentRoleInfo = computed(() => {
+  return list.value.find((item) => item.roleId === acitveRoleId.value)
+})
+
+const importRole = async () => {
   if (!acitveRoleId.value) return
+  const alter = await api.alterByName(currentRoleInfo.value?.roleJob || '')
+  if (!alter) {
+    return await alert({
+      content: '当前职业尚在开发中，敬请期待。',
+    })
+  } else {
+    return window.open(`/character/equipment/${alter.value}?roleId=${acitveRoleId.value}`, '_blank')
+  }
 }
 </script>

frontend/src/router/index.ts

@@ -17,7 +17,7 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/character/:alter',
     redirect: (to) => {
-      return { path: `/character/equipment/${to.params.alter}` }
+      return { path: `/character/equipment/${to.params.alter}`, query: to.query }
     },
     props: true,
     name: 'character',