diff --git a/.prettierrc.json b/.prettierrc.json
index 29a2402..804b1bb 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,6 +1,10 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
+  "endOfLine": "lf",
+  "semi": true,
   "singleQuote": true,
-  "printWidth": 100
+  "singleAttributePerLine": false,
+  "printWidth": 200,
+  "tabWidth": 2,
+  "trailingComma": "all"
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index cac0e10..ed90805 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,10 @@
 {
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 709a0c2..1f97923 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,8 @@
   },
   "dependencies": {
     "@stomp/stompjs": "^7.1.1",
+    "@tanstack/vue-query": "^5.83.1",
+    "@tanstack/vue-query-devtools": "^5.84.0",
     "@vueuse/core": "^13.6.0",
     "axios": "^1.11.0",
     "compressing": "^2.0.0",
@@ -38,6 +40,8 @@
     "@tsconfig/node22": "^22.0.2",
     "@types/crypto-js": "^4.2.2",
     "@types/node": "^22.16.5",
+    "@vicons/antd": "^0.13.0",
+    "@vicons/carbon": "^0.13.0",
     "@vicons/ionicons5": "^0.13.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitejs/plugin-vue-jsx": "^5.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a9d0aaf..a82dba0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,12 @@ importers:
       '@stomp/stompjs':
         specifier: ^7.1.1
         version: 7.1.1
+      '@tanstack/vue-query':
+        specifier: ^5.83.1
+        version: 5.83.1(vue@3.5.18(typescript@5.8.3))
+      '@tanstack/vue-query-devtools':
+        specifier: ^5.84.0
+        version: 5.84.0(@tanstack/vue-query@5.83.1(vue@3.5.18(typescript@5.8.3)))(vue@3.5.18(typescript@5.8.3))
       '@vueuse/core':
         specifier: ^13.6.0
         version: 13.6.0(vue@3.5.18(typescript@5.8.3))
@@ -69,6 +75,12 @@ importers:
       '@types/node':
         specifier: ^22.16.5
         version: 22.17.1
+      '@vicons/antd':
+        specifier: ^0.13.0
+        version: 0.13.0
+      '@vicons/carbon':
+        specifier: ^0.13.0
+        version: 0.13.0
       '@vicons/ionicons5':
         specifier: ^0.13.0
         version: 0.13.0
@@ -724,6 +736,31 @@ packages:
   '@stomp/stompjs@7.1.1':
     resolution: {integrity: sha512-chcDs6YkAnKp1FqzwhGvh3i7v0+/ytzqWdKYw6XzINEKAzke/iD00dNgFPWSZEqktHOK+C1gSzXhLkLbARIaZw==}
 
+  '@tanstack/match-sorter-utils@8.19.4':
+    resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
+    engines: {node: '>=12'}
+
+  '@tanstack/query-core@5.83.1':
+    resolution: {integrity: sha512-OG69LQgT7jSp+5pPuCfzltq/+7l2xoweggjme9vlbCPa/d7D7zaqv5vN/S82SzSYZ4EDLTxNO1PWrv49RAS64Q==}
+
+  '@tanstack/query-devtools@5.84.0':
+    resolution: {integrity: sha512-fbF3n+z1rqhvd9EoGp5knHkv3p5B2Zml1yNRjh7sNXklngYI5RVIWUrUjZ1RIcEoscarUb0+bOvIs5x9dwzOXQ==}
+
+  '@tanstack/vue-query-devtools@5.84.0':
+    resolution: {integrity: sha512-RA3bNvaIsFFngycBd7vF/hB4SwvSeTaZ7eiUDnWPbOwg8lxBZrBmF7d4uI3OYQwSmnA2B8tER2UWxkKgqrNFpg==}
+    peerDependencies:
+      '@tanstack/vue-query': ^5.83.1
+      vue: ^3.3.0
+
+  '@tanstack/vue-query@5.83.1':
+    resolution: {integrity: sha512-Ss7LJGC2LZMZBsFFnrEfmQYcooDtJOjFZhmnXXUmlawk9EXHHDHUDaH2v7/r9jzyp2nOgABDQlDmjcBLXiyuvQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.2
+      vue: ^2.6.0 || ^3.3.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   '@tsconfig/node22@22.0.2':
     resolution: {integrity: sha512-Kmwj4u8sDRDrMYRoN9FDEcXD8UpBSaPQQ24Gz+Gamqfm7xxn+GBR7ge/Z7pK8OXNGyUzbSwJj+TH6B+DS/epyA==}
 
@@ -810,6 +847,12 @@ packages:
     resolution: {integrity: sha512-W8FQi6kEh2e8zVhQ0eeRnxdvIoOkAp/CPAahcNio6nO9dsIwb9b34z90KOlheoyuVf6LSOEdjlkxSkapNEc+4A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@vicons/antd@0.13.0':
+    resolution: {integrity: sha512-yrUGoUSz2BbGupk9ghQOahc04n5H3MwUDM9pVPsLh9U1uqB47oRWZvYRiZaT1JKPqgTgSE6BXcVw4i9MOF4M+g==}
+
+  '@vicons/carbon@0.13.0':
+    resolution: {integrity: sha512-Z/jExyyS4gsXJc66oTqV/j98nsaiX2JlQ0IUwu9Ms3rztf8VOHEQRuX8Jey1/zbxJpFY/tU+bWvKPRFYGIvCWQ==}
+
   '@vicons/ionicons5@0.13.0':
     resolution: {integrity: sha512-zvZKBPjEXKN7AXNo2Na2uy+nvuv6SP4KAMQxpKL2vfHMj0fSvuw7JZcOPCjQC3e7ayssKnaoFVAhbYcW6v41qQ==}
 
@@ -1852,6 +1895,9 @@ packages:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
 
+  remove-accents@0.5.0:
+    resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -2119,6 +2165,17 @@ packages:
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-eslint-parser@10.2.0:
     resolution: {integrity: sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2722,6 +2779,28 @@ snapshots:
 
   '@stomp/stompjs@7.1.1': {}
 
+  '@tanstack/match-sorter-utils@8.19.4':
+    dependencies:
+      remove-accents: 0.5.0
+
+  '@tanstack/query-core@5.83.1': {}
+
+  '@tanstack/query-devtools@5.84.0': {}
+
+  '@tanstack/vue-query-devtools@5.84.0(@tanstack/vue-query@5.83.1(vue@3.5.18(typescript@5.8.3)))(vue@3.5.18(typescript@5.8.3))':
+    dependencies:
+      '@tanstack/query-devtools': 5.84.0
+      '@tanstack/vue-query': 5.83.1(vue@3.5.18(typescript@5.8.3))
+      vue: 3.5.18(typescript@5.8.3)
+
+  '@tanstack/vue-query@5.83.1(vue@3.5.18(typescript@5.8.3))':
+    dependencies:
+      '@tanstack/match-sorter-utils': 8.19.4
+      '@tanstack/query-core': 5.83.1
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.18(typescript@5.8.3)
+      vue-demi: 0.14.10(vue@3.5.18(typescript@5.8.3))
+
   '@tsconfig/node22@22.0.2': {}
 
   '@types/crypto-js@4.2.2': {}
@@ -2837,6 +2916,10 @@ snapshots:
       '@typescript-eslint/types': 8.39.1
       eslint-visitor-keys: 4.2.1
 
+  '@vicons/antd@0.13.0': {}
+
+  '@vicons/carbon@0.13.0': {}
+
   '@vicons/ionicons5@0.13.0': {}
 
   '@vitejs/plugin-vue-jsx@5.0.1(vite@7.1.2(@types/node@22.17.1)(jiti@2.5.1)(sass@1.90.0))(vue@3.5.18(typescript@5.8.3))':
@@ -3908,6 +3991,8 @@ snapshots:
 
   readdirp@4.1.2: {}
 
+  remove-accents@0.5.0: {}
+
   resolve-from@4.0.0: {}
 
   reusify@1.1.0: {}
@@ -4177,6 +4262,10 @@ snapshots:
 
   vscode-uri@3.1.0: {}
 
+  vue-demi@0.14.10(vue@3.5.18(typescript@5.8.3)):
+    dependencies:
+      vue: 3.5.18(typescript@5.8.3)
+
   vue-eslint-parser@10.2.0(eslint@9.33.0(jiti@2.5.1)):
     dependencies:
       debug: 4.4.1
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 012c404..d3a3ea9 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +1,4 @@
 onlyBuiltDependencies:
   - '@parcel/watcher'
   - esbuild
+  - vue-demi
diff --git a/src/App.vue b/src/App.vue
index e03121f..f5f6655 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,35 +1,24 @@
 <script lang="ts">
 const GlobalFeedback = defineComponent({
   setup() {
-    window.$dialog = useDialog()
-    window.$loadingBar = useLoadingBar()
-    window.$message = useMessage()
-    window.$notification = useNotification()
-    return () => null
+    window.$dialog = useDialog();
+    window.$loadingBar = useLoadingBar();
+    window.$message = useMessage();
+    window.$notification = useNotification();
+    return () => null;
   },
-})
+});
 </script>
 
 <script setup lang="ts">
-import {
-  dateZhCN,
-  NConfigProvider,
-  NDialogProvider,
-  NLoadingBarProvider,
-  NMessageProvider,
-  NNotificationProvider,
-  useDialog,
-  useLoadingBar,
-  useMessage,
-  useNotification,
-  zhCN,
-} from 'naive-ui'
-import { defineComponent } from 'vue'
-import { useThemeStore } from '@/stores/theme'
-import { storeToRefs } from 'pinia'
+import { dateZhCN, NConfigProvider, NDialogProvider, NLoadingBarProvider, NMessageProvider, NNotificationProvider, useDialog, useLoadingBar, useMessage, useNotification, zhCN } from 'naive-ui';
+import { defineComponent } from 'vue';
+import { useThemeStore } from '@/stores/theme';
+import { storeToRefs } from 'pinia';
+import { VueQueryDevtools } from '@tanstack/vue-query-devtools';
 
-const themeStore = useThemeStore()
-const { themeMode } = storeToRefs(themeStore)
+const themeStore = useThemeStore();
+const { themeMode } = storeToRefs(themeStore);
 </script>
 
 <template>
@@ -40,6 +29,7 @@ const { themeMode } = storeToRefs(themeStore)
           <NNotificationProvider>
             <GlobalFeedback />
             <RouterView />
+            <VueQueryDevtools />
           </NNotificationProvider>
         </NMessageProvider>
       </NLoadingBarProvider>
diff --git a/src/main.ts b/src/main.ts
index 46bc3e9..bcd86c7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,15 +1,30 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import persist from 'pinia-plugin-persistedstate'
+import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query'
 
 import App from './App.vue'
 import router from './router'
 
 import '@/styles/reset.scss'
 
+import { getAppEnvConfig } from '@/utils/env'
+
 const app = createApp(App)
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchInterval: getAppEnvConfig().requestInterval * 1000,
+      refetchIntervalInBackground: false,
+      refetchOnReconnect: true,
+      refetchOnWindowFocus: true,
+    },
+  },
+})
+
 app.use(createPinia().use(persist))
 app.use(router)
+app.use(VueQueryPlugin, { queryClient })
 
 app.mount('#app')