dev

frontend/src/api/calc/index.ts

@@ -1,9 +1,10 @@
 import type { IConfig } from '@/stores'
 import { defineRequest } from '../common'
+import type { IResult } from './type'
 export default defineRequest((request) => {
   return {
     async calc(config: IConfig) {
-      const res = await request.post('/calc', config)
+      const res = await request.post<IResult>('/calc', config)
       return res.data
     }
   }

frontend/src/api/calc/type.ts

@@ -0,0 +1,13 @@
+export interface IResult {
+  skills: IResultSkill[]
+}
+
+export interface IResultSkill {
+  name: string
+  icon: string
+  lv: number
+  data: number
+  ratio: number
+  cd: number
+  damage: number
+}

frontend/src/api/common.ts

@@ -3,6 +3,7 @@ import axios from 'axios'
 import { h } from 'vue'
 import { gzip, ungzip } from 'pako'
 import { useInfoStore } from '@/stores'
+import { useDialog } from '@/components/hooks/dialog'
 // import { useAppStore, useConfigStore } from '@/store'
 // import { useDialog } from '@/components/hooks/dialog'
 
@@ -80,19 +81,19 @@ export function defineRequest<T>(fn: (ax: AxiosInstance) => T) {
     instance.interceptors.response.use(
       async (response: AxiosResponse<HttpResponse>) => {
         if (response.data.code === 500) {
-          // const { alert } = useDialog()
-          // await alert({
-          //   content: () => {
-          //     return h(
-          //       'div',
-          //       {
-          //         class: 'justify-center text-hex-d4d6b6 text-center',
-          //         style: 'white-space:pre-wrap;width:250px;margin:10px',
-          //       },
-          //       `出现错误，可加群反馈:183439472\n${response.data.message}`,
-          //     )
-          //   },
-          // })
+          const { alert } = useDialog()
+          await alert({
+            content: () => {
+              return h(
+                'div',
+                {
+                  class: 'justify-center text-hex-d4d6b6 text-center',
+                  style: 'white-space:pre-wrap;width:250px;margin:10px',
+                },
+                `出现错误，可加群反馈:183439472\n${response.data.message}`,
+              )
+            },
+          })
         }
         // 解密数据
         if (typeof response.data.data == 'string') {

frontend/src/api/info/type.ts

@@ -6,7 +6,7 @@ export interface IAdventureInfo {
 export interface IAlterOption {
   name: string
   title: string
-  class?: string
+  value?: string
 }
 
 export interface IAlterInfo {
@@ -17,7 +17,7 @@ export interface IAlterInfo {
   options?: IAlterOption[]
   open?: boolean
   comment?: string
-  class?: string
+  value?: string
 }
 
 export interface ICharacterInfo {

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

@@ -1,39 +1,37 @@
 <template>
-  <div>
-    <calc-collapse class="w-40%" title="装备打造(点击人物部位切换)">
-    <equipment />
-  </calc-collapse>
-  </div>
-
+  <div class="w-300px">
+      <calc-collapse class="w-100%" title="装备打造(点击人物部位切换)">
+        <equipment />
+      </calc-collapse>
+    </div>
 </template>
 <script setup lang="ts">
 import equipment from './components/equipment.vue'
 </script>
 
 <style lang="scss">
-.equ-profile{
+.equ-profile {
   width: 100%;
   .equ-profile-item {
-      width: 100%;
-      height: 20px;
-      display: flex;
-      margin-top: 5px;
-      margin-bottom: 5px;
-      align-items: center;
+    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;
-      }
+    .row-name {
+      flex: 0 0 50px;
+      text-align: center;
     }
-}
 
+    :not(:last-child) {
+      margin-right: 10px !important;
+    }
+
+    .i-select-label {
+      margin-right: 0px !important;
+    }
+  }
+}
 </style>

frontend/src/pages/Character/Index.vue

@@ -8,7 +8,13 @@
       </calc-tabs>
     </div>
     <div class="content flex">
-      <RouterView></RouterView>
+      <div class="flex flex-1">
+        <RouterView></RouterView>
+      </div>
+
+      <div class="w-40%">
+        <Result></Result>
+      </div>
     </div>
   </div>
 </template>
@@ -16,26 +22,19 @@
 <script lang="ts" setup name="Index">
 import { useInfoStore } from '@/stores/info'
 import { useConfigStore } from '@/stores'
+import Result from './Result/Index.vue'
 const props = defineProps<{
   alter: string
 }>()
 const infoStore = useInfoStore()
 const configStore = useConfigStore()
 
-const result = useAsyncState(
-  () => {
-    return configStore.calc()
-  },
-  {},
-  { resetOnExecute: false },
-)
-
 const stopWatch = watch<any>(
   () => {
     return JSON.stringify(configStore.config)
   },
   useDebounceFn(async () => {
-    await result.execute()
+    ;(await configStore.result).execute()
   }, 800),
 )
 

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

@@ -0,0 +1,18 @@
+<template>
+  <div class="flex" v-if="configStore.result.state">
+    <Info></Info>
+    <Skill :data="configStore.result.state.skills"></Skill>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useConfigStore } from '@/stores';
+import Info from './components/Info.vue';
+import Skill from './components/Skill.vue';
+
+const configStore = useConfigStore();
+</script>
+
+<style scoped lang="scss">
+
+</style>

frontend/src/pages/Character/Result/components/Info.vue

@@ -0,0 +1,8 @@
+<template></template>
+
+<script setup lang="ts" name="Info">
+
+</script>
+
+<style scoped lang="scss">
+</style>

frontend/src/pages/Character/Result/components/Skill.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="flex flex-col" v-if="data && data.length > 0">
+    <div class="flex gap-2 text-white items-center" v-for="skill in data" :key="skill.name">
+      <div>
+        <img :src="getImageURL(skill.icon)" alt="" class="w-8 h-8" />
+      </div>
+      <div>{{ skill.name }}</div>
+      <div>{{ skill.lv }}</div>
+      <div>{{ skill.damage.toFixed(0) }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Skill">
+import type { IResultSkill } from '@/api/calc/type'
+import { getImageURL } from '@/utils/images'
+const props = defineProps<{
+  data: IResultSkill[]
+}>()
+
+const data = computed(() => {
+  return props.data.sort((a,b)=>b.damage - a.damage)
+})
+</script>
+
+<style scoped lang="scss"></style>

frontend/src/pages/Home/Index.vue

@@ -36,7 +36,7 @@ export default defineComponent(async () => {
           return
         }
         else{
-          return window.open("/character/" + (child.class || child.name),"_blank")
+          return window.open("/character/" + (child.value || child.name),"_blank")
         }
     }
   }

frontend/src/pages/IndexView.vue

@@ -3,7 +3,12 @@
     <Suspense>
       <RouterView></RouterView>
     </Suspense>
+    <render/>
   </div>
 </template>
 
-<script lang="ts" name="index" setup></script>
+<script lang="ts" name="index" setup>
+import { useDialog } from '@/components/hooks/dialog';
+
+const { render } = useDialog()
+</script>

frontend/src/stores/config.ts

@@ -102,10 +102,23 @@ export const useConfigStore = defineStore('configStore', () => {
     return await api.calc(config.value)
   }
 
+
+  const result = useAsyncState(
+    () => {
+      return calc()
+    },
+    {
+      skills:[]
+    },
+    { resetOnExecute: false },
+  )
+
+
   return {
     config,
     loadConfig,
     saveConfig,
     calc,
+    result
   }
 })