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,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>