diff --git a/backend/api/core/Auth.py b/backend/api/core/Auth.py
index 3b8fbd51..5e5de247 100644
--- a/backend/api/core/Auth.py
+++ b/backend/api/core/Auth.py
@@ -9,12 +9,13 @@ from api.core.exception import ResponseException
 
 
 class AlterState:
-    def __init__(self, alter: str, token: str, charcater: Character, equVersion: str):
+    def __init__(self, alter: str, token: str, charcater: Character, equVersion: str,time: int):
         self.alter = alter
         self.token = token
         self.origin = alter.split('.')[-1]
         self.character = charcater
         self.equVersion = equVersion
+        self.time = time
 
     def to_dict(self):
         return self.__dict__
diff --git a/backend/api/dp.py b/backend/api/dp.py
index f00cd38a..182c0993 100644
--- a/backend/api/dp.py
+++ b/backend/api/dp.py
@@ -1,26 +1,48 @@
+import time
 from typing import Annotated, Optional
 from redis import Redis
 from sqlalchemy.orm import Session
 from fastapi import Depends, Header
 
 from api.core.exception import ResponseException
-from database.connect import get_db,get_redis
-from api.core.Auth import AlterState, deleteToken, readToken
+from database.connect import get_db, get_redis
+from api.core.Auth import AlterState
+import base64
+import json
 
 SessionDep = Annotated[Session, Depends(get_db)]
 RedisDep = Annotated[Redis, Depends(get_redis)]
 
 
-def authorize(redis:RedisDep, access_token: Optional[str] = Header(None)):
-    if access_token is not None:
-        info = readToken(access_token, redis)
-        return info
+def alterToken(alter_token: Optional[str] = Header(None)):
+    if alter_token is not None:
+        try:
+            decoded_bytes = base64.b64decode(alter_token)
+            decoded_str = decoded_bytes.decode('utf-8')
+            alter = json.loads(decoded_str)
+            # 时间判断 后面再加
+            if (int(time.time() * 1000) - alter['time']) / (60 * 60 * 1000) > 6:
+                raise ResponseException('登录过期或无效Token，请刷新后重试')
+            return AlterState(alter['alter'], alter_token, {}, alter['equVersion'], alter['time'])
+        except (base64.binascii.Error, json.JSONDecodeError):
+            raise ResponseException('登录过期或无效Token，请刷新后重试')
     else:
         raise ResponseException('登录过期或无效Token，请刷新后重试')
+    pass
 
 
-def unauthorize(redis:RedisDep, access_token: Optional[str] = Header(None)):
-    if access_token is not None:
-        return deleteToken(access_token, redis)
+AltersDep = Annotated[AlterState, Depends(alterToken)]
 
-AltersDep = Annotated[AlterState, Depends(authorize)]
\ No newline at end of file
+# def authorize(redis:RedisDep, access_token: Optional[str] = Header(None)):
+#     if access_token is not None:
+#         info = readToken(access_token, redis)
+#         return info
+#     else:
+#         raise ResponseException('登录过期或无效Token，请刷新后重试')
+
+
+# def unauthorize(redis:RedisDep, access_token: Optional[str] = Header(None)):
+#     if access_token is not None:
+#         return deleteToken(access_token, redis)
+
+# TokenDep = Annotated[AlterState, Depends(authorize)]
diff --git a/backend/api/routes/info.py b/backend/api/routes/info.py
index b1dd8e1a..2fb18f86 100644
--- a/backend/api/routes/info.py
+++ b/backend/api/routes/info.py
@@ -33,8 +33,9 @@ async def get_character_info(
     request: Request, state: AltersDep ,redis:RedisDep
 ):
     character = createCharacter(state.alter, state.equVersion)
-    def get_character():
-        return character.getInfo()
-    info = get_redis_info(redis, f"dcalc:character:{state.alter}", get_character)
+    # def get_character():
+    #     return character.getInfo()
+    # info = get_redis_info(redis, f"dcalc:character:{state.alter}", get_character)
+    info = character.getInfo()
     return response(data=info)
 
diff --git a/backend/core/basic/equipment.py b/backend/core/basic/equipment.py
index b8827e8d..ae26bb9b 100644
--- a/backend/core/basic/equipment.py
+++ b/backend/core/basic/equipment.py
@@ -56,6 +56,7 @@ class Suit:
     point: int
     level: int
     count: int
+    imageUrl: str
     SkillAttack: float
     Attack: float
 
diff --git a/backend/dataFiles/dcalc_0.db b/backend/dataFiles/dcalc_0.db
index 469e8088..79306c5f 100644
Binary files a/backend/dataFiles/dcalc_0.db and b/backend/dataFiles/dcalc_0.db differ
diff --git a/backend/dataFiles/dcalc_1.db b/backend/dataFiles/dcalc_1.db
new file mode 100644
index 00000000..beedb6dc
Binary files /dev/null and b/backend/dataFiles/dcalc_1.db differ
diff --git a/backend/database/models.py b/backend/database/models.py
index 89ef8e71..cb20bfee 100644
--- a/backend/database/models.py
+++ b/backend/database/models.py
@@ -22,6 +22,7 @@ class SuitData(Base):
     count = Column(Integer)
     SkillAttack = Column(Float)
     Attack = Column(Float)
+    imageUrl = Column(Text)
 
 
 class EquData(Base):
diff --git a/frontend/.gitattributes b/frontend/.gitattributes
deleted file mode 100644
index 6313b56c..00000000
--- a/frontend/.gitattributes
+++ /dev/null
@@ -1 +0,0 @@
-* text=auto eol=lf
diff --git a/frontend/.gitignore b/frontend/.gitignore
deleted file mode 100644
index 8ee54e8d..00000000
--- a/frontend/.gitignore
+++ /dev/null
@@ -1,30 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-*.tsbuildinfo
diff --git a/frontend/src/api/common.ts b/frontend/src/api/common.ts
index be96305e..cbdd572e 100644
--- a/frontend/src/api/common.ts
+++ b/frontend/src/api/common.ts
@@ -59,10 +59,10 @@ export function defineRequest<T>(fn: (ax: AxiosInstance) => T) {
         // const token = configStore.token
         // const uid = useAppStore().uid
 
-        const token = useInfoStore().token
+        const token = useInfoStore().alter_token
 
         if (token) {
-          request.headers['Access-Token'] = token
+          request.headers['Alter-Token'] = token
         }
 
         return request
diff --git a/frontend/src/api/info/type.ts b/frontend/src/api/info/type.ts
index ab59e2b7..9d880d67 100644
--- a/frontend/src/api/info/type.ts
+++ b/frontend/src/api/info/type.ts
@@ -28,6 +28,7 @@ export interface ICharacterInfo {
   weapons: string[]
   skills: ISkill[]
   suits: ISuit[]
+
 }
 
 export interface IEquipment {
@@ -36,6 +37,9 @@ export interface IEquipment {
   itemType: string
   itemDetailType: string
   name: string
+  categorize:string
+  suit:  number[]
+  rarity:string
 }
 
 export interface ISkill {
@@ -46,4 +50,9 @@ export interface ISkill {
   positon: number
 }
 
-export interface ISuit {}
+export interface ISuit {
+  id: number
+  name: string
+  imageUrl: string
+  suitId: number
+}
diff --git a/frontend/src/assets/img/effect/primeval/0.png b/frontend/src/assets/img/effect/primeval/0.png
deleted file mode 100644
index e1b9fc4d..00000000
Binary files a/frontend/src/assets/img/effect/primeval/0.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/1.png b/frontend/src/assets/img/effect/primeval/1.png
deleted file mode 100644
index 5b294aee..00000000
Binary files a/frontend/src/assets/img/effect/primeval/1.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/10.png b/frontend/src/assets/img/effect/primeval/10.png
deleted file mode 100644
index 2cec2d6f..00000000
Binary files a/frontend/src/assets/img/effect/primeval/10.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/11.png b/frontend/src/assets/img/effect/primeval/11.png
deleted file mode 100644
index fa1c6dbd..00000000
Binary files a/frontend/src/assets/img/effect/primeval/11.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/12.png b/frontend/src/assets/img/effect/primeval/12.png
deleted file mode 100644
index 18ffbe69..00000000
Binary files a/frontend/src/assets/img/effect/primeval/12.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/13.png b/frontend/src/assets/img/effect/primeval/13.png
deleted file mode 100644
index 89096b99..00000000
Binary files a/frontend/src/assets/img/effect/primeval/13.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/14.png b/frontend/src/assets/img/effect/primeval/14.png
deleted file mode 100644
index 94c92441..00000000
Binary files a/frontend/src/assets/img/effect/primeval/14.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/15.png b/frontend/src/assets/img/effect/primeval/15.png
deleted file mode 100644
index 17a6e35e..00000000
Binary files a/frontend/src/assets/img/effect/primeval/15.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/16.png b/frontend/src/assets/img/effect/primeval/16.png
deleted file mode 100644
index bec64a31..00000000
Binary files a/frontend/src/assets/img/effect/primeval/16.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/17.png b/frontend/src/assets/img/effect/primeval/17.png
deleted file mode 100644
index ec3bcf6e..00000000
Binary files a/frontend/src/assets/img/effect/primeval/17.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/18.png b/frontend/src/assets/img/effect/primeval/18.png
deleted file mode 100644
index 724b67ff..00000000
Binary files a/frontend/src/assets/img/effect/primeval/18.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/19.png b/frontend/src/assets/img/effect/primeval/19.png
deleted file mode 100644
index fa941feb..00000000
Binary files a/frontend/src/assets/img/effect/primeval/19.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/2.png b/frontend/src/assets/img/effect/primeval/2.png
deleted file mode 100644
index 78ea5725..00000000
Binary files a/frontend/src/assets/img/effect/primeval/2.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/20.png b/frontend/src/assets/img/effect/primeval/20.png
deleted file mode 100644
index 4a68c068..00000000
Binary files a/frontend/src/assets/img/effect/primeval/20.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/21.png b/frontend/src/assets/img/effect/primeval/21.png
deleted file mode 100644
index cef2851c..00000000
Binary files a/frontend/src/assets/img/effect/primeval/21.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/22.png b/frontend/src/assets/img/effect/primeval/22.png
deleted file mode 100644
index 5a0b9743..00000000
Binary files a/frontend/src/assets/img/effect/primeval/22.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/23.png b/frontend/src/assets/img/effect/primeval/23.png
deleted file mode 100644
index 834acba5..00000000
Binary files a/frontend/src/assets/img/effect/primeval/23.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/24.png b/frontend/src/assets/img/effect/primeval/24.png
deleted file mode 100644
index 573335c1..00000000
Binary files a/frontend/src/assets/img/effect/primeval/24.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/25.png b/frontend/src/assets/img/effect/primeval/25.png
deleted file mode 100644
index a64380a5..00000000
Binary files a/frontend/src/assets/img/effect/primeval/25.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/26.png b/frontend/src/assets/img/effect/primeval/26.png
deleted file mode 100644
index 70b4a968..00000000
Binary files a/frontend/src/assets/img/effect/primeval/26.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/27.png b/frontend/src/assets/img/effect/primeval/27.png
deleted file mode 100644
index 09e07de0..00000000
Binary files a/frontend/src/assets/img/effect/primeval/27.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/28.png b/frontend/src/assets/img/effect/primeval/28.png
deleted file mode 100644
index 62b85de5..00000000
Binary files a/frontend/src/assets/img/effect/primeval/28.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/29.png b/frontend/src/assets/img/effect/primeval/29.png
deleted file mode 100644
index 8330987a..00000000
Binary files a/frontend/src/assets/img/effect/primeval/29.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/3.png b/frontend/src/assets/img/effect/primeval/3.png
deleted file mode 100644
index 493647ec..00000000
Binary files a/frontend/src/assets/img/effect/primeval/3.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/4.png b/frontend/src/assets/img/effect/primeval/4.png
deleted file mode 100644
index 3c476d05..00000000
Binary files a/frontend/src/assets/img/effect/primeval/4.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/5.png b/frontend/src/assets/img/effect/primeval/5.png
deleted file mode 100644
index c2f16025..00000000
Binary files a/frontend/src/assets/img/effect/primeval/5.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/6.png b/frontend/src/assets/img/effect/primeval/6.png
deleted file mode 100644
index 0a0657c6..00000000
Binary files a/frontend/src/assets/img/effect/primeval/6.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/7.png b/frontend/src/assets/img/effect/primeval/7.png
deleted file mode 100644
index 48534587..00000000
Binary files a/frontend/src/assets/img/effect/primeval/7.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/8.png b/frontend/src/assets/img/effect/primeval/8.png
deleted file mode 100644
index fcb7c1d8..00000000
Binary files a/frontend/src/assets/img/effect/primeval/8.png and /dev/null differ
diff --git a/frontend/src/assets/img/effect/primeval/9.png b/frontend/src/assets/img/effect/primeval/9.png
deleted file mode 100644
index 30e6f707..00000000
Binary files a/frontend/src/assets/img/effect/primeval/9.png and /dev/null differ
diff --git a/frontend/src/assets/img/rarity/传说.png b/frontend/src/assets/img/rarity/传说.png
deleted file mode 100644
index 4c0e1ffb..00000000
Binary files a/frontend/src/assets/img/rarity/传说.png and /dev/null differ
diff --git a/frontend/src/assets/img/rarity/勇者.png b/frontend/src/assets/img/rarity/勇者.png
deleted file mode 100644
index 12fc8fae..00000000
Binary files a/frontend/src/assets/img/rarity/勇者.png and /dev/null differ
diff --git a/frontend/src/assets/img/rarity/史诗.png b/frontend/src/assets/img/rarity/史诗.png
deleted file mode 100644
index a6e3d841..00000000
Binary files a/frontend/src/assets/img/rarity/史诗.png and /dev/null differ
diff --git a/frontend/src/assets/img/rarity/太初.png b/frontend/src/assets/img/rarity/太初.png
deleted file mode 100644
index 9de55dc0..00000000
Binary files a/frontend/src/assets/img/rarity/太初.png and /dev/null differ
diff --git a/frontend/src/assets/img/rarity/神器.png b/frontend/src/assets/img/rarity/神器.png
deleted file mode 100644
index a801aba1..00000000
Binary files a/frontend/src/assets/img/rarity/神器.png and /dev/null differ
diff --git a/frontend/src/assets/img/rarity/神话.png b/frontend/src/assets/img/rarity/神话.png
deleted file mode 100644
index 7db406f1..00000000
Binary files a/frontend/src/assets/img/rarity/神话.png and /dev/null differ
diff --git a/frontend/src/assets/img/rarity/稀有.png b/frontend/src/assets/img/rarity/稀有.png
deleted file mode 100644
index e1e7a939..00000000
Binary files a/frontend/src/assets/img/rarity/稀有.png and /dev/null differ
diff --git a/frontend/src/assets/img/specificity/0.png b/frontend/src/assets/img/specificity/0.png
deleted file mode 100644
index 51499135..00000000
Binary files a/frontend/src/assets/img/specificity/0.png and /dev/null differ
diff --git a/frontend/src/assets/img/specificity/1.png b/frontend/src/assets/img/specificity/1.png
deleted file mode 100644
index b3aee222..00000000
Binary files a/frontend/src/assets/img/specificity/1.png and /dev/null differ
diff --git a/frontend/src/assets/img/specificity/17.png b/frontend/src/assets/img/specificity/17.png
deleted file mode 100644
index dbca368c..00000000
Binary files a/frontend/src/assets/img/specificity/17.png and /dev/null differ
diff --git a/frontend/src/assets/img/specificity/2.png b/frontend/src/assets/img/specificity/2.png
deleted file mode 100644
index 60d961a5..00000000
Binary files a/frontend/src/assets/img/specificity/2.png and /dev/null differ
diff --git a/frontend/src/assets/img/specificity/3.png b/frontend/src/assets/img/specificity/3.png
deleted file mode 100644
index 135d13b0..00000000
Binary files a/frontend/src/assets/img/specificity/3.png and /dev/null differ
diff --git a/frontend/src/assets/img/specificity/none.png b/frontend/src/assets/img/specificity/none.png
deleted file mode 100644
index 4d4d0e47..00000000
Binary files a/frontend/src/assets/img/specificity/none.png and /dev/null differ
diff --git a/frontend/src/assets/img/specificity/select.png b/frontend/src/assets/img/specificity/select.png
deleted file mode 100644
index 9b03f51e..00000000
Binary files a/frontend/src/assets/img/specificity/select.png and /dev/null differ
diff --git a/frontend/src/assets/img/specificity/select_0.png b/frontend/src/assets/img/specificity/select_0.png
deleted file mode 100644
index 06a810fe..00000000
Binary files a/frontend/src/assets/img/specificity/select_0.png and /dev/null differ
diff --git a/frontend/src/assets/img/specificity/select_1.png b/frontend/src/assets/img/specificity/select_1.png
deleted file mode 100644
index 9b03f51e..00000000
Binary files a/frontend/src/assets/img/specificity/select_1.png and /dev/null differ
diff --git a/frontend/src/components/dcalc/button/index.vue b/frontend/src/components/basic/button/index.vue
similarity index 100%
rename from frontend/src/components/dcalc/button/index.vue
rename to frontend/src/components/basic/button/index.vue
diff --git a/frontend/src/components/dcalc/dialog/index.vue b/frontend/src/components/basic/dialog/index.vue
similarity index 100%
rename from frontend/src/components/dcalc/dialog/index.vue
rename to frontend/src/components/basic/dialog/index.vue
diff --git a/frontend/src/components/dnf/Equipment/Icon/index.vue b/frontend/src/components/dnf/Equipment/Icon/index.vue
new file mode 100644
index 00000000..3d47ac52
--- /dev/null
+++ b/frontend/src/components/dnf/Equipment/Icon/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <template v-if="props.equipment">
+    <div class="relative" :class="{inactive: props.inactive}">
+      <div class="w-28px h-28px " :style="{ backgroundImage: `url(${getImageURL('equipment' + props.equipment?.imageUrl)})` }">
+      <img :src="getLocalImageURL(`./rarity/${rarity}.png`)" />
+    </div>
+    </div>
+  </template>
+  <template v-else>
+    <div class="w-26px h-26px border-1px border-solid  border-#7a7a7a/50"></div>
+  </template>
+
+</template>
+
+
+<script lang="ts" setup>
+import type { IEquipment } from '@/api/info/type';
+import { getImageURL } from '@/utils/images'
+
+const props = defineProps<{
+  equipment?: IEquipment
+  inactive?: boolean
+}>()
+
+const rarity = computed(()=>{
+  switch(props.equipment?.rarity){
+    case '稀有':
+      return 'rare'
+    case '神器':
+      return 'artifact'
+    case '传说':
+      return 'legend'
+    case '史诗':
+      return 'epic'
+    case '太初':
+      return 'primeval'
+    default:
+      return ''
+  }
+})
+
+const getLocalImageURL = (url:string)=>{
+  return new URL(url, import.meta.url).href
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+// @keyframes primeval {
+//   @for $i from 0 through 29 {
+//     #{percentage($i / 29)} {
+//       background-image: url("./effect/primeval/#{$i}.png");
+//     }
+//   }
+// }
+
+// .primeval_effect {
+//   width: 28px;
+//   height: 28px;
+//   background-size: cover;
+//   animation: primeval 2s infinite;
+//   //  设置动画名称，持续时间，和循环次数
+//   mix-blend-mode: color-dodge;
+// }
+
+.inactive {
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 28px;
+    height: 28px;
+    background-color: #00000060;
+  }
+}
+
+</style>
diff --git a/frontend/src/components/dnf/Equipment/Icon/rarity/artifact.png b/frontend/src/components/dnf/Equipment/Icon/rarity/artifact.png
new file mode 100644
index 00000000..12d0d063
Binary files /dev/null and b/frontend/src/components/dnf/Equipment/Icon/rarity/artifact.png differ
diff --git a/frontend/src/components/dnf/Equipment/Icon/rarity/epic.png b/frontend/src/components/dnf/Equipment/Icon/rarity/epic.png
new file mode 100644
index 00000000..9166969d
Binary files /dev/null and b/frontend/src/components/dnf/Equipment/Icon/rarity/epic.png differ
diff --git a/frontend/src/components/dnf/Equipment/Icon/rarity/legend.png b/frontend/src/components/dnf/Equipment/Icon/rarity/legend.png
new file mode 100644
index 00000000..8162c33b
Binary files /dev/null and b/frontend/src/components/dnf/Equipment/Icon/rarity/legend.png differ
diff --git a/frontend/src/components/dnf/Equipment/Icon/rarity/primeval.png b/frontend/src/components/dnf/Equipment/Icon/rarity/primeval.png
new file mode 100644
index 00000000..2efcc308
Binary files /dev/null and b/frontend/src/components/dnf/Equipment/Icon/rarity/primeval.png differ
diff --git a/frontend/src/components/dnf/Equipment/Icon/rarity/rare.png b/frontend/src/components/dnf/Equipment/Icon/rarity/rare.png
new file mode 100644
index 00000000..618085ed
Binary files /dev/null and b/frontend/src/components/dnf/Equipment/Icon/rarity/rare.png differ
diff --git a/frontend/src/components/dnf/Equipment/RaritySelect/index.vue b/frontend/src/components/dnf/Equipment/RaritySelect/index.vue
new file mode 100644
index 00000000..b90bf40b
--- /dev/null
+++ b/frontend/src/components/dnf/Equipment/RaritySelect/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="flex gap-8px">
+    <template v-for="(rarity,_) in rarities" :key="_">
+      <div class="w-14px h-14px shadow-[0px_0px_3px_#ffffff_inset,0px_0px_1px_#ffffff40]" :style="{background: rarity.background}" @click="value=rarity.value">
+        <div class="w-14px h-14px" :class="{'active': value === rarity.value}"></div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const value = defineModel<string>()
+
+const rarities = [{
+  value: '稀有',
+  background: '#d06eff',
+},{
+  value: '神器',
+  background: '#fe11ff',
+},{
+  value: '传说',
+  background: '#fc8711',
+},{
+  value: '史诗',
+  background: '#feca11',
+},{
+  value: '太初',
+  background: 'linear-gradient(180deg, #70faa7 0%, #7bfefe 100%)',
+}]
+
+</script>
+
+<style lang="scss" scoped>
+
+.active{
+  background: url('@/assets/img/control/item_checked.png') no-repeat center;
+  background-size: 12px 10px;
+}
+</style>
diff --git a/frontend/src/pages/Character/Equipment/Suit.vue b/frontend/src/pages/Character/Equipment/Suit.vue
index e69de29b..23ebad1e 100644
--- a/frontend/src/pages/Character/Equipment/Suit.vue
+++ b/frontend/src/pages/Character/Equipment/Suit.vue
@@ -0,0 +1,92 @@
+<!-- 每排总计6+4+4,共计14个排列 -->
+
+<template>
+  <div>
+    <div class="flex gao-10px">
+    <!-- 套装选择tab -->
+    <div class="flex flex-wrap w-300px">
+      <template v-for="(suit, _) in suits" :key="_">
+        <div class="flex items-center justify-center">
+          <img
+            class="w-40px h-40px object-contain"
+            :src="getImageURL('equipment' + suit.imageUrl)"
+            :alt="suit.name"
+            :style="{ filter: curSuit === suit.value ? '' : 'grayscale(100%)' }"
+            @click="curSuit = suit.value"
+          />
+        </div>
+      </template>
+    </div>
+    <EquipmentRaritySelect v-model="curRarity" />
+    </div>
+
+    <div class="flex flex-wrap gap-4px content-start" :style="{width: `${rowCount * 32}px`}">
+    <template v-for="(equip,_) in suitEquipments" :key="_">
+      <EquipmentIcon :equipment="equip" />
+    </template>
+  </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { IEquipment } from '@/api/info/type'
+import { useInfoStore } from '@/stores'
+import { getImageURL } from '@/utils/images'
+import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
+import EquipmentRaritySelect from '@/components/dnf/Equipment/RaritySelect/index.vue'
+const infoStore = useInfoStore()
+const curSuit = ref(16201)
+
+const curRarity = ref()
+
+const props = defineProps<{
+  rowCount?:number
+}>()
+
+const rowCount = Math.max(props.rowCount ?? 0, 14)
+
+const suits = computed(() => {
+  const uniqueSuits = new Map<number, { name: string; value: number; imageUrl: string }>()
+  infoStore.suits.forEach((a) => {
+    if (!uniqueSuits.has(a.suitId)) {
+      uniqueSuits.set(a.suitId, { name: a.name, value: a.suitId, imageUrl: a.imageUrl })
+    }
+  })
+  return Array.from(uniqueSuits.values())
+})
+
+const suitEquipments = computed(() => {
+  const equs =  infoStore.equips.filter((a) => a.suit.includes(curSuit.value) && a.suit.length === 1)
+
+  const res: (IEquipment | undefined)[] = []
+  const raritiyList = ['神器','传说','史诗']
+  raritiyList.forEach((rarity) => {
+    const equ : (IEquipment | undefined)[]  = equs.filter((a) => a.rarity === rarity && !a.name.includes('黑牙'))
+    equ.splice(5,0,undefined)
+    equ.splice(9,0,undefined)
+    res.push(
+      ...equ,
+      ...Array(Math.max(0,rowCount - equ.length)).fill(undefined),
+    )
+  })
+  const remind = equs.filter(a=>a.rarity == '太初' || a.name.includes('黑牙')).sort((a,b)=>(a.rarity == '太初' ? 1 : 0) - (b.rarity == '太初' ? 1 : 0))
+  res.push(undefined,undefined,...remind.filter(a=>a.itemDetailType == '项链'),undefined,...remind.filter(a=>a.itemDetailType == '手镯'),undefined,...remind.filter(a=>a.itemDetailType == '戒指'),...Array(Math.max(0,rowCount - remind.length -4)).fill(undefined))
+  return res
+  // const raritiyList = [['神器'],['传说'],['史诗','太初']]
+  // const partList = ['上衣','下装','头肩','腰带','鞋','项链','手镯','辅助装备','魔法石','耳环']
+  // // 一个品质占3行
+  // // 第一行 防具5+空+特殊3
+  // // 第二行 首饰3+3+3
+  // // 第三行 全空行
+  // partList.forEach((part) => {
+  //   const equ = equs.filter((a) => a.itemDetailType === part)
+  //   res.push(
+  //     ...equ,
+  //     ...Array(rowCount - equ.length).fill(undefined),
+  //   )
+  // })
+  // return res
+})
+
+
+</script>
diff --git a/frontend/src/pages/Character/Equipment/Universal.vue b/frontend/src/pages/Character/Equipment/Universal.vue
new file mode 100644
index 00000000..7dffcf34
--- /dev/null
+++ b/frontend/src/pages/Character/Equipment/Universal.vue
@@ -0,0 +1,41 @@
+<!-- 每排总计6+4+4,共计14个排列 -->
+
+<template>
+  <div class="flex flex-wrap gap-4px content-start" :style="{width: `${rowCount * 32}px`}">
+    <template v-for="(equ,_) in equs" :key="_">
+        <EquipmentIcon :equipment="equ" />
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { IEquipment } from '@/api/info/type'
+import { useInfoStore } from '@/stores'
+import { getImageURL } from '@/utils/images'
+import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
+
+const props = defineProps<{
+  rowCount ?:number
+}>()
+
+const rowCount = Math.max(props.rowCount ?? 0, 14)
+const infoStore = useInfoStore()
+
+const equs = computed(() => {
+  const items = infoStore.equips.filter(
+    (equip) => equip.categorize === '通宝装备' || equip.categorize === '稀有装备 套装',
+  )
+  const res: (IEquipment | undefined)[] = []
+  const raritiyList = ['稀有','神器','传说','史诗']
+  raritiyList.forEach((rarity) => {
+    const equ : (IEquipment | undefined)[]  = items.filter((a) => a.rarity === rarity)
+    equ.splice(5,0,undefined)
+    equ.splice(9,0,undefined)
+    res.push(
+      ...equ,
+      ...Array(Math.max(0,rowCount - equ.length)).fill(undefined),
+    )
+  })
+  return res
+})
+</script>
diff --git a/frontend/src/pages/Character/Equipment/Weapon.vue b/frontend/src/pages/Character/Equipment/Weapon.vue
index ca64e677..f2d7d6ca 100644
--- a/frontend/src/pages/Character/Equipment/Weapon.vue
+++ b/frontend/src/pages/Character/Equipment/Weapon.vue
@@ -1,18 +1,41 @@
+<!-- 每排总计6+4+4,共计14个排列 -->
+
 <template>
-  <div class="flex flex-wrap gap-2px">
-    <template v-for="weapon in weapons" :key="weapon.id">
-      <div class="w-34px h-34px bg-#2c2d2c rounded-2px flex flex-col items-center">
-        <img class="w-30px h-30px" :src="getImageURL('equipment/'+weapon.imageUrl)" :alt="weapon.name" />
-      </div>
+  <div class="flex flex-wrap gap-4px content-start" :style="{width: `${rowCount * 32}px`}">
+    <template v-for="(weapon,_) in weapons" :key="_">
+        <EquipmentIcon :equipment="weapon" />
     </template>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useInfoStore } from '@/stores';
-import { getImageURL } from '@/utils/images';
+import type { IEquipment } from '@/api/info/type'
+import { useInfoStore } from '@/stores'
+import { getImageURL } from '@/utils/images'
+import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
 
+const props = defineProps<{
+  rowCount ?:number
+}>()
+
+const rowCount = Math.max(props.rowCount ?? 0, 14)
 const infoStore = useInfoStore()
 
-const weapons = computed(()=>infoStore.equips.filter((equip) => equip.itemType === '武器' && infoStore.infos?.weapons.includes(equip.itemDetailType)))
+const weapons = computed(() => {
+  const items = infoStore.equips.filter(
+    (equip) => equip.itemType === '武器' && infoStore.infos?.weapons.includes(equip.itemDetailType),
+  )
+  const res: (IEquipment | undefined)[] = []
+  Array.from(new Set(items.map((item) => item.itemDetailType))).forEach((type) => {
+    const weapon = items.filter((item) => item.itemDetailType === type)
+    res.push(
+      ...weapon.filter((item) => item.categorize === '制式武器'),
+      undefined,
+      ...weapon.filter((item) => item.categorize === '传世武器'),
+    )
+    const remind = rowCount - res.length % rowCount
+    res.push(...Array(remind).fill(undefined))
+  })
+  return res
+})
 </script>
diff --git a/frontend/src/pages/Character/Index.vue b/frontend/src/pages/Character/Index.vue
index d0fd219c..450f1ca0 100644
--- a/frontend/src/pages/Character/Index.vue
+++ b/frontend/src/pages/Character/Index.vue
@@ -2,7 +2,12 @@
   <div class="w-100% h-100% main" :class="props.alter.split('.').slice(-1)">
     <div class="header"></div>
     <div class="content flex">
-      <Weapon></Weapon>
+      <div class="flex flex-col gap-20px">
+        <Weapon ></Weapon>
+        <Suit></Suit>
+        <Universal></Universal>
+      </div>
+
       <div class="h-90vh w-560px overflow-y-auto overflow-x-hidden">
 
       <SkillTree></SkillTree>
@@ -18,7 +23,9 @@
 import { useInfoStore } from '@/stores/info'
 import { getImageURL } from '@/utils/images'
 import SkillTree from './Skill/SkillTree.vue';
+import Suit from './Equipment/Suit.vue';
 import Weapon from './Equipment/Weapon.vue';
+import Universal from './Equipment/Universal.vue';
 const props = defineProps<{
   alter: string
 }>()
diff --git a/frontend/src/stores/info.ts b/frontend/src/stores/info.ts
index f9e4cde4..3d3804df 100644
--- a/frontend/src/stores/info.ts
+++ b/frontend/src/stores/info.ts
@@ -4,7 +4,7 @@ import { defineStore } from "pinia"
 
 export const useInfoStore = defineStore("infoStore", ()=>{
 
-  const token = ref<string>("")
+  const alter_token = ref<string>("")
   const infos = ref<ICharacterInfo | null>(null)
 
   const skills = computed(()=>infos.value?.skills ?? [])
@@ -14,12 +14,13 @@ export const useInfoStore = defineStore("infoStore", ()=>{
   const suits = computed(()=>infos.value?.suits ?? [])
 
   const createCharacter = async (alter: string, equVersion?: string) => {
-    token.value = await api.createToken(alter, equVersion)
+    const time = new Date().getTime()
+    alter_token.value = btoa(JSON.stringify({alter, equVersion, time}))
     infos.value = await api.characterInfo()
   }
 
   return {
-    token,
+    alter_token,
     infos,
     skills,
     equips,
diff --git a/frontend/src/utils/images.ts b/frontend/src/utils/images.ts
index 0df0c6a6..fbce2ca5 100644
--- a/frontend/src/utils/images.ts
+++ b/frontend/src/utils/images.ts
@@ -13,3 +13,7 @@ export const getImageURL = (image: string) => {
   image = image.startsWith('/') ? image : `/${image}`
   return `${baseURL}${image}`
 }
+
+export const getLocalImageURL = (url:string)=>{
+  return new URL(url, import.meta.url).href
+}
diff --git a/images/equipment/new_equipment/07_ring/ring.img/457.png b/images/equipment/new_equipment/07_ring/ring.img/457.png
new file mode 100755
index 00000000..560c24c9
Binary files /dev/null and b/images/equipment/new_equipment/07_ring/ring.img/457.png differ
diff --git a/images/equipment/new_equipment/07_ring/ring.img/458.png b/images/equipment/new_equipment/07_ring/ring.img/458.png
new file mode 100755
index 00000000..0b545c60
Binary files /dev/null and b/images/equipment/new_equipment/07_ring/ring.img/458.png differ
diff --git a/images/equipment/new_equipment/08_necklace/necklace.img/418.png b/images/equipment/new_equipment/08_necklace/necklace.img/418.png
new file mode 100755
index 00000000..cae5d60c
Binary files /dev/null and b/images/equipment/new_equipment/08_necklace/necklace.img/418.png differ
diff --git a/images/equipment/new_equipment/08_necklace/necklace.img/419.png b/images/equipment/new_equipment/08_necklace/necklace.img/419.png
new file mode 100755
index 00000000..75016a2d
Binary files /dev/null and b/images/equipment/new_equipment/08_necklace/necklace.img/419.png differ
diff --git a/images/equipment/new_equipment/09_bracelet/bracelet.img/411.png b/images/equipment/new_equipment/09_bracelet/bracelet.img/411.png
new file mode 100755
index 00000000..f660ce1f
Binary files /dev/null and b/images/equipment/new_equipment/09_bracelet/bracelet.img/411.png differ
diff --git a/images/equipment/new_equipment/09_bracelet/bracelet.img/412.png b/images/equipment/new_equipment/09_bracelet/bracelet.img/412.png
new file mode 100755
index 00000000..4f315734
Binary files /dev/null and b/images/equipment/new_equipment/09_bracelet/bracelet.img/412.png differ
diff --git a/images/equipment/rarity/artifact.png b/images/equipment/rarity/artifact.png
new file mode 100644
index 00000000..12d0d063
Binary files /dev/null and b/images/equipment/rarity/artifact.png differ
diff --git a/images/equipment/rarity/epic.png b/images/equipment/rarity/epic.png
new file mode 100644
index 00000000..9166969d
Binary files /dev/null and b/images/equipment/rarity/epic.png differ
diff --git a/images/equipment/rarity/legend.png b/images/equipment/rarity/legend.png
new file mode 100644
index 00000000..8162c33b
Binary files /dev/null and b/images/equipment/rarity/legend.png differ
diff --git a/images/equipment/rarity/primeval.png b/images/equipment/rarity/primeval.png
new file mode 100644
index 00000000..2efcc308
Binary files /dev/null and b/images/equipment/rarity/primeval.png differ
diff --git a/images/equipment/rarity/rare.png b/images/equipment/rarity/rare.png
new file mode 100644
index 00000000..618085ed
Binary files /dev/null and b/images/equipment/rarity/rare.png differ