diff --git a/frontend/src/api/info/index.ts b/frontend/src/api/info/index.ts
index 4aa2d21b..48a5dca2 100644
--- a/frontend/src/api/info/index.ts
+++ b/frontend/src/api/info/index.ts
@@ -1,5 +1,5 @@
 import { defineRequest } from '../common'
-import type { IAdventureInfo, ICharacterInfo, ISkillInfo } from './type'
+import type { IAdventureInfo, ICharacterInfo, IHelperInfo, ISkillInfo } from './type'
 
 export default defineRequest((request) => {
   return {
@@ -31,5 +31,10 @@ export default defineRequest((request) => {
       const res = await request.get(`/info/oath/${suitId}/${skillId}`, { params: { rarity, lv } })
       return res.data
     },
+    async getHelperList(id: string) {
+      const res = await request.get<IHelperInfo>(`/dnfhelper/${id}/list`)
+      await new Promise((resolve) => setTimeout(resolve, 30000))
+      return res.data
+    },
   }
 })
diff --git a/frontend/src/api/info/type.ts b/frontend/src/api/info/type.ts
index 73aca316..a76ffb79 100644
--- a/frontend/src/api/info/type.ts
+++ b/frontend/src/api/info/type.ts
@@ -215,3 +215,16 @@ export interface Attribute {
   optionValue: Record<`value${string}`, string>
   detail: string
 }
+
+export interface IHelperInfo {
+  id: string
+  avatar: string
+  name: string
+  roleList: {
+    roleId: string
+    roleName: string
+    roleJob: string
+    avatarLink: string
+    fame: number
+  }[]
+}
diff --git a/frontend/src/pages/Dnfhelper/bind.vue b/frontend/src/pages/Dnfhelper/bind.vue
new file mode 100644
index 00000000..79962213
--- /dev/null
+++ b/frontend/src/pages/Dnfhelper/bind.vue
@@ -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>
diff --git a/frontend/src/pages/Dnfhelper/index.vue b/frontend/src/pages/Dnfhelper/index.vue
new file mode 100644
index 00000000..69f48294
--- /dev/null
+++ b/frontend/src/pages/Dnfhelper/index.vue
@@ -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>
diff --git a/frontend/src/pages/Dnfhelper/list.vue b/frontend/src/pages/Dnfhelper/list.vue
new file mode 100644
index 00000000..fa1923c1
--- /dev/null
+++ b/frontend/src/pages/Dnfhelper/list.vue
@@ -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>
diff --git a/frontend/src/pages/Dnfhelper/processing.vue b/frontend/src/pages/Dnfhelper/processing.vue
new file mode 100644
index 00000000..06dfc280
--- /dev/null
+++ b/frontend/src/pages/Dnfhelper/processing.vue
@@ -0,0 +1,2 @@
+<template></template>
+<script lang="ts" name="dnfhelper-processing" setup></script>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 1e783d8e..16ba4c0a 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -9,6 +9,11 @@ const routes: RouteRecordRaw[] = [
     name: 'home',
     component: () => import('@/pages/Home/Index.vue'),
   },
+  {
+    path: '/dnfhelper',
+    name: 'dnfhelper',
+    component: () => import('@/pages/Dnfhelper/index.vue'),
+  },
   {
     path: '/character/:alter',
     redirect: (to) => {
diff --git a/frontend/src/stores/dnfhelper.ts b/frontend/src/stores/dnfhelper.ts
new file mode 100644
index 00000000..ca65e07c
--- /dev/null
+++ b/frontend/src/stores/dnfhelper.ts
@@ -0,0 +1,51 @@
+import { defineStore } from "pinia";
+import api from "@/api";
+import type { IHelperInfo } from "@/api/info/type";
+
+export const useDnfHelperStore = defineStore("dnfHelperStore", () => {
+  const helperInfo = useLocalStorage<IHelperInfo | null>("dnfHelperInfo", null, {
+    serializer: {
+      read: (v) => (v ? JSON.parse(v) : null),
+      write: (v) => JSON.stringify(v),
+    },
+  });
+
+  const loading = ref(false);
+  const errorMessage = ref("");
+
+  const refleshHelperInfo = async (uid?: string) => {
+    if (!uid) return;
+    loading.value = true;
+    errorMessage.value = "";
+    try {
+      const data = await api.getHelperList(uid);
+      if (data) {
+        helperInfo.value = data;
+      }
+      
+    } catch (error) {
+      errorMessage.value = error instanceof Error ? error.message : "同步助手数据失败";
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const refreshHelperInfo = async (uid?: string) => {
+    await refleshHelperInfo(uid);
+  };
+
+  const logout = () => {
+    helperInfo.value = null;
+    errorMessage.value = "";
+  };
+
+  return {
+    helperInfo,
+    loading,
+    errorMessage,
+    refleshHelperInfo,
+    refreshHelperInfo,
+    logout,
+  };
+});