diff --git a/src/pages/User/Characters.vue b/src/pages/User/Characters.vue
index 00e1c033..3eeda199 100644
--- a/src/pages/User/Characters.vue
+++ b/src/pages/User/Characters.vue
@@ -1,49 +1,88 @@
 <template>
-  <h1>角色数据获取、展示、详情</h1>
-  <v-btn @click="getRoleList">
-    获取角色列表
-  </v-btn>
+  <ToLoading v-model="loading" :title="loadingTitle" />
+  <div class="uc-top">
+    <div class="uc-top-title">我的角色</div>
+    <v-btn @click="refresh" variant="outlined">
+      更新数据
+    </v-btn>
+  </div>
   {{ roleList }}
 </template>
 <script lang="ts" setup>
 // vue
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
+import ToLoading from "../../components/overlay/to-loading.vue";
+// tauri
+import { fs } from "@tauri-apps/api";
 // store
+import { useAppStore } from "../../store/modules/app";
 import { useUserStore } from "../../store/modules/user";
 // request
 import TGRequest from "../../web/request/TGRequest";
 // utils
 import TGSqlite from "../../utils/TGSqlite";
 
+// store
+const appStore = useAppStore();
 const userStore = useUserStore();
-const roleList = ref([]);
+
+// loading
+const loading = ref(false);
+const loadingTitle = ref("");
 
 // data
-const characterCookie = ref({
-  cookie_token: "",
-  account_id: "",
-  ltoken: "",
-  ltuid: "",
-});
+const roleList = ref([]);
+const characterCookie = ref({} as TGApp.BBS.Constant.CookieGroup4);
 const user = ref({} as TGApp.Sqlite.Account.Game);
+const filePath = computed(() => `${appStore.dataPath.userDataDir}/roleList.json`);
 
 onMounted(async () => {
+  loadingTitle.value = "正在获取角色数据";
+  loading.value = true;
   const curUser = await TGSqlite.getCurAccount();
   if (curUser) {
     user.value = curUser;
   }
-  characterCookie.value = {
-    cookie_token: userStore.getCookieItem("cookie_token"),
-    account_id: userStore.getCookieItem("account_id"),
-    ltoken: userStore.getCookieItem("ltoken"),
-    ltuid: userStore.getCookieItem("ltuid"),
-  };
+  characterCookie.value = userStore.getCookieGroup4();
+  const fileGet = await fs.readTextFile(filePath.value);
+  if (fileGet) {
+    roleList.value = JSON.parse(fileGet);
+  }
+  loading.value = false;
 });
 
-async function getRoleList () {
+async function refresh () {
+  loadingTitle.value = "正在获取角色数据";
+  loading.value = true;
   const res = await TGRequest.User.byLToken.getRoleList(characterCookie.value, user.value);
   console.log(res);
+  if (Array.isArray(res)) {
+    loadingTitle.value = "正在保存角色数据";
+    await fs.writeTextFile({
+      path: filePath.value,
+      contents: JSON.stringify(res),
+    });
+    loadingTitle.value = "正在更新角色数据";
+    roleList.value = res;
+  }
+  loading.value = false;
 }
 </script>
 <style lang="css" scoped>
+.uc-top {
+  background: rgba(0, 0, 0, 0.2);
+  width: 100%;
+  height: 50px;
+  border-radius: 5px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  font-family: Genshin, sans-serif;
+  font-size: 20px;
+  color: #faf7e8;
+}
+
+.uc-top-title {
+  margin-right: 10px;
+}
 </style>
diff --git a/src/web/request/getRoleList.ts b/src/web/request/getRoleList.ts
index 92cc5d02..a81c8f57 100644
--- a/src/web/request/getRoleList.ts
+++ b/src/web/request/getRoleList.ts
@@ -18,12 +18,12 @@ import TGUtils from "../utils/TGUtils";
  * @param {TGApp.Sqlite.Account.Game} account 游戏账号
  * @returns {Promise<TGApp.Game.Character.ListItem[]|TGApp.BBS.Response.Base>} 用户角色列表
  */
-export async function getGameRoleListByLToken (cookie: Record<string, string>, account: TGApp.Sqlite.Account.Game): Promise<TGApp.Game.Character.ListItem[] | TGApp.BBS.Response.Base> {
+export async function getGameRoleListByLToken(cookie: TGApp.BBS.Constant.CookieGroup4, account: TGApp.Sqlite.Account.Game): Promise<TGApp.Game.Character.ListItem[] | TGApp.BBS.Response.Base> {
   const url = TGApi.GameData.byCookie.getCharacter;
   const uid = account.gameUid;
   // eslint-disable-next-line camelcase
   const data = { role_id: uid, server: TGUtils.Tools.getServerByUid(uid) };
-  const header = TGUtils.User.getHeader(cookie, "POST", JSON.stringify(data), "common");
+  const header = TGUtils.User.getHeader(cookie as unknown as Record<string,string>, "POST", JSON.stringify(data), "common");
   return await http.fetch<TGApp.Game.Character.ListResponse>(url, {
     method: "POST",
     headers: header,