ev

2026-05-28 02:20:24 +08:00
parent 031c8c1cc7
commit 248aa0854a
8 changed files with 224 additions and 1 deletions
@@ -0,0 +1,37 @@
+<template>
+  <div class="w-full h-full flex flex-col items-center justify-center gap-4">
+    <div class="flex flex-col items-center">
+      <h1 class="text-2xl font-bold">绑定助手社区ID</h1>
+      <h3>输入助手社区ID后可同步角色列表与基础打造信息</h3>
+      <calc-input
+        v-model="helperId"
+        placeholder="请输入助手社区ID"
+        class="w-64 h-8"
+        @keyup.enter="onSubmit"
+      />
+      <div class="flex justify-between w-64 mt-4">
+        <calc-button class="w-20 !h-8" @click="onSubmit">绑定</calc-button>
+        <calc-button class="w-20 !h-8" @click="onSeletRole">选择角色</calc-button>
+      </div>
+      <span class="text-white/50 mt-4"
+        >助手识别基于OCR，存在一定误差，导入后建议进行手动校对。</span
+      >
+    </div>
+  </div>
+</template>
+<script lang="ts" name="dnfhelper-bind" setup>
+import router from '@/router'
+import { useDnfHelperStore } from '@/stores/dnfhelper'
+
+const helperId = ref('')
+const helperStore = useDnfHelperStore()
+
+const onSubmit = async (e: Event) => {
+  e.preventDefault()
+  await helperStore.refreshHelperInfo(helperId.value)
+}
+
+const onSeletRole = async () => {
+  await router.push({ path: '/' })
+}
+</script>
@@ -0,0 +1,34 @@
+<template>
+  <div
+    class="flex flex-col h-100% w-100% overflow-hidden text-#bea347"
+    style="
+      background-image:
+        linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0.95) 0%,
+          rgba(0, 0, 0, 0.6) 40%,
+          rgba(0, 0, 0, 0.6) 60%,
+          rgba(0, 0, 0, 0.95) 100%
+        ),
+        url(https://wfiles.gtimg.cn/wuji_open/wupload/dnf_universe_data.picture_info/30b81227_1245MGsPY_R.png);
+      background-size: cover;
+    "
+  >
+    <Processing v-if="helperStore.loading" />
+
+    <Bind v-else-if="listInfo.length === 0" class="mx-auto my-auto" />
+
+    <List v-else :list="listInfo" />
+  </div>
+</template>
+<script lang="ts" name="dnfhelper-character-index" setup>
+import { getImageURL } from '@/utils/images.ts'
+import Bind from './bind.vue'
+import List from './list.vue'
+import Processing from './processing.vue'
+import { useDnfHelperStore } from '@/stores/dnfhelper'
+
+const helperStore = useDnfHelperStore()
+
+const listInfo = computed(() => helperStore.helperInfo?.roleList ?? [])
+</script>
@@ -0,0 +1,76 @@
+<template>
+  <div class="flex-1 overflow-hidden w-full flex items-center justify-center p-20 box-border">
+    <div class="max-h-full w-full overflow-auto flex flex-wrap gap-4 items-center">
+      <template v-for="item in sortedList" :key="item.roleId">
+        <div
+          class="flex flex-col items-center gap-4 rounded-lg border-2 border-transparent border-solid hover:border-blue/80 w-40 relative h-50 cursor-pointer p-2"
+          :style="{
+            borderColor: acitveRoleId == item.roleId ? '#F4C08A' : '',
+          }"
+          @click="chooseRole(item)"
+          @dblclick.prevent="importRole()"
+        >
+          <img
+            :src="item.avatarLink"
+            alt="avatar"
+            class="w-auto h-50 rounded-full object-cover border-2 border-white/50 absolute top--5"
+          />
+          <div
+            class="absolute bottom-2 left-1/2 transform -translate-x-1/2 text-center flex flex-col w-50"
+          >
+            <span class="text-sm text-#DED29A">{{ item.roleName }}</span>
+            <span class="text-sm text-#908150">{{ item.roleJob }}</span>
+            <span class="text-sm text-[#3ea74e]">名望: {{ formatFame(item.fame) }}</span>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+  <div class="bg-white/10 h-15 mt-auto w-full flex items-center">
+    <div class="flex-1"></div>
+    <calc-button class="h-10 w-30">导入角色</calc-button>
+    <div class="flex-1 flex justify-end px-10 gap-5">
+      <calc-button>选择职业</calc-button>
+      <calc-button>刷新</calc-button>
+      <calc-button>取消绑定</calc-button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts" name="dnfhelper-list">
+import { computed } from 'vue'
+
+import { useDnfHelperStore } from '@/stores/dnfhelper'
+
+const props = defineProps<{
+  list: {
+    roleId: string
+    roleName: string
+    roleJob: string
+    avatarLink: string
+    fame: number
+  }[]
+}>()
+
+const { list } = toRefs(props)
+const acitveRoleId = ref<string | null>(null)
+
+const helperStore = useDnfHelperStore()
+
+const sortedList = computed(() => {
+  return [...list.value].sort((left, right) => right.fame - left.fame)
+})
+
+const formatFame = (fame: number) => {
+  return new Intl.NumberFormat('zh-CN').format(fame)
+}
+
+const chooseRole = ({ roleId }: { roleId: string }) => {
+  console.log(roleId)
+  acitveRoleId.value = roleId
+}
+
+const importRole = () => {
+  console.log('import')
+  if (!acitveRoleId.value) return
+}
+</script>
@@ -0,0 +1,2 @@
+<template></template>
+<script lang="ts" name="dnfhelper-processing" setup></script>