diff --git a/.gitignore b/.gitignore
index 9768ad7..aee9584 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,4 +31,6 @@ coverage
 tsconfig.app.tsbuildinfo
 tsconfig.node.tsbuildinfo
 
-/public/data/
\ No newline at end of file
+/public/data/
+package-lock.json
+.cursor/rules/fe.mdc
diff --git a/README.md b/README.md
index c046b31..b741c66 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,15 @@
-## 这是[PyWxDump](https://github.com/xaoyaoo/PyWxDump)的Web版，用于在浏览器中查看微信聊天记录。
\ No newline at end of file
+# PyWxDump-UI
+
+这是[PyWxDump](https://github.com/xaoyaoo/PyWxDump)的Web版，用于在浏览器中查看微信聊天记录。
+
+开发者朋友可以基于此项目二次开发自己的UI界面
+
+## 启动UI
+
+```
+npm i
+
+npm run dev
+```
+
+启动后在http://localhost:8080访问
diff --git a/package-lock.json b/package-lock.json
index 6f7db26..5d45d32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "wxdump_web",
       "version": "2.4.10",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
         "@types/axios": "^0.14.0",
         "axios": "^1.6.3",
         "cors": "^2.8.5",
@@ -486,8 +487,9 @@
     },
     "node_modules/@element-plus/icons-vue": {
       "version": "2.3.1",
-      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
       "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
+      "license": "MIT",
       "peerDependencies": {
         "vue": "^3.2.0"
       }
diff --git a/package.json b/package.json
index 7814352..b115abe 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "@types/axios": "^0.14.0",
     "axios": "^1.6.3",
     "cors": "^2.8.5",
diff --git a/src/App.vue b/src/App.vue
index 87d38e7..b030c9c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,13 +14,13 @@ import FavoriteIcon from "@/assets/icon/FavoriteIcon.vue";
 import CollapseOpenIcon from "@/assets/icon/CollapseOpenIcon.vue";
 import CollapseCloseIcon from "@/assets/icon/CollapseCloseIcon.vue";
 
-import {RouterLink, RouterView} from 'vue-router'
-import {ref, onMounted, withCtx, watch} from 'vue'
+import { RouterLink, RouterView } from 'vue-router'
+import { ref, onMounted, withCtx, watch } from 'vue'
 import router from "@/router";
-import {is_db_init, is_use_local_data} from "@/utils/common_utils";
+import { is_db_init, is_use_local_data } from "@/utils/common_utils";
 import ChatRecordsMain from "@/components/chat/ChatRecordsMain.vue";
 
-const isCollapse = ref(true);
+const isCollapse = ref(false);
 
 const is_local_data = ref(true);
 
@@ -28,7 +28,7 @@ onMounted(() => {
   // localStorage.setItem('isDbInit', "t");
   is_local_data.value = localStorage.getItem('isUseLocalData') === 't';
   console.log("is_local_data", is_local_data.value);
-  if(!is_local_data.value) {
+  if (!is_local_data.value) {
     is_db_init();
   }
 })
@@ -46,24 +46,24 @@ const handleClose = (key: string, keyPath: string[]) => {
 
 <template>
   <div class="export-main" v-if="is_local_data">
-    <chat-records-main wxid="wxid_test"/>
+    <chat-records-main wxid="wxid_test" />
   </div>
   <div id="appbg" v-else>
     <el-container class="layout-container-demo" style="height: 100%;background:none;">
       <el-aside :width="isCollapse ? '64px' : '160px'">
         <el-container class="sidebar-container">
           <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" :router='true'
-                   :collapse-transition="false" :show-timeout="0" :hide-timeout="0">
-
-            <el-radio-group v-model="isCollapse"
-                            style="margin-bottom: 20px;margin-top: 10px;margin-left: 10px;max-height: 30px">
-              <el-radio-button :label="false" v-if="isCollapse">
-                <collapse-open-icon></collapse-open-icon>
-              </el-radio-button>
-              <el-radio-button :label="true" v-else>
-                <collapse-close-icon></collapse-close-icon>
-              </el-radio-button>
-            </el-radio-group>
+            :collapse-transition="true" :show-timeout="200" :hide-timeout="200">
+
+            <div class="collapse-btn-container">
+              <el-button 
+                class="collapse-btn" 
+                :icon="isCollapse ? CollapseOpenIcon : CollapseCloseIcon" 
+                @click="isCollapse = !isCollapse"
+                circle
+                plain
+              />
+            </div>
 
             <el-menu-item index='/home'>
               <home-icon></home-icon>
@@ -108,7 +108,7 @@ const handleClose = (key: string, keyPath: string[]) => {
           </el-menu>
 
           <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
-                   @close="handleClose" :router='true'>
+            @close="handleClose" :router='true'>
             <el-menu-item index='/about'>
               <about-icon></about-icon>
               <template #title>关于我们</template>
@@ -126,7 +126,7 @@ const handleClose = (key: string, keyPath: string[]) => {
       </el-aside>
 
       <el-main>
-        <RouterView/>
+        <RouterView />
       </el-main>
 
     </el-container>
@@ -134,7 +134,6 @@ const handleClose = (key: string, keyPath: string[]) => {
 </template>
 
 <style scoped>
-
 .export-main {
   position: absolute;
   top: 0;
@@ -218,4 +217,44 @@ header {
   justify-content: space-between;
   height: 100%;
 }
+
+.collapse-btn-container {
+  position: absolute;
+  right: 0px;
+  top: 350px;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+
+.collapse-btn {
+  transition: all 0.3s;
+  font-size: 12px;
+  padding: 6px;
+  width: 26px;
+  height: 26px;
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-border-color);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.collapse-btn :deep(.el-icon) {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.collapse-btn:hover {
+  transform: scale(1.1);
+  background-color: var(--el-color-primary-light-9);
+  border-color: var(--el-color-primary);
+}
+
+.collapse-btn:active {
+  transform: scale(0.95);
+}
 </style>
diff --git a/src/components/chat/ChatRecords.vue b/src/components/chat/ChatRecords.vue
index 8b1d671..01f95ff 100644
--- a/src/components/chat/ChatRecords.vue
+++ b/src/components/chat/ChatRecords.vue
@@ -38,7 +38,7 @@ onMounted(() => {
 
 <template>
   <el-container>
-    <el-header style="height: 40px; max-height: 40px; width: 100%;background-color: #d2d2fa;padding-top: 5px;">
+    <el-header style="height: auto; width: 100%;padding-top: 10px;background-color: #f5f5f5;">
       <ChatRecprdsHeader :wxid="wxid" @exporting="onExport"/>
     </el-header>
     <el-main style="height: calc(100vh - 40px);padding: 0;margin: 0;background-color: #f5f5f5;">
@@ -49,5 +49,8 @@ onMounted(() => {
 </template>
 
 <style scoped>
-
+.el-container {
+  height: 100%;
+  width: 100%;
+}
 </style>
diff --git a/src/components/chat/ChatRecprdsHeader.vue b/src/components/chat/ChatRecprdsHeader.vue
index 7a28d9e..7d073d3 100644
--- a/src/components/chat/ChatRecprdsHeader.vue
+++ b/src/components/chat/ChatRecprdsHeader.vue
@@ -136,66 +136,145 @@ const export_button = (val: boolean) => {
 </script>
 
 <template>
+  <el-card class="chat-header-card" shadow="hover">
+    <div class="header-content">
+      <div class="info-section">
+        <div class="info-item">
+          <span class="label">wxid:</span>
+          <el-tag class="value" size="small" effect="plain">{{ userinfo?.wxid }}</el-tag>
+        </div>
+        
+        <div class="info-item">
+          <span class="label">名称:</span>
+          <el-tag class="value" size="small" effect="plain">{{ gen_show_name(userinfo) }}</el-tag>
+        </div>
+        
+        <div class="info-item">
+          <span class="label">消息数量:</span>
+          <el-tag class="value" size="small" type="info" effect="plain">{{ msg_count }}</el-tag>
+        </div>
+      </div>
 
-  <el-row :gutter="5" style="width: 100%;">
-    <el-col :span="6" style="white-space: nowrap;">
-      <el-text class="label_color mx-1" truncated>wxid:</el-text>&ensp;
-      <el-text class="data_color mx-1" truncated :title="userinfo?.wxid">{{ userinfo?.wxid }}</el-text>
-    </el-col>
-    <el-col :span="6" style="white-space: nowrap;">
-      <el-text class="label_color mx-1" truncated>名称:</el-text>&ensp;
-      <el-text class="data_color mx-1" truncated title="show_name">{{ gen_show_name(userinfo) }}</el-text>
-    </el-col>
-    <el-col :span="5" style="white-space: nowrap;">
-      <el-text class="label_color mx-1" truncated>数量:</el-text>&ensp;
-      <el-text class="data_color mx-1" truncated :title="msg_count">{{ msg_count }}</el-text>
-    </el-col>
-    <el-col :span="2" style="white-space: nowrap;">
-      <el-text class="button_color mx-1 underline" truncated @click="is_show_more=!is_show_more"> 详细信息</el-text>
-    </el-col>
-    <el-col :span="2" style="white-space: nowrap;">
-      <el-text v-if="!is_export" class="button_color mx-1 underline" truncated @click="export_button(true);">导出备份
-      </el-text>
-      <el-text v-if="is_export" class="button_color mx-1 underline" truncated @click="export_button(false);">聊天查看
-      </el-text>
-    </el-col>
-    <el-col :span="3" style="white-space: nowrap;">
-      <el-text class="button_color mx-1 underline" truncated @click="get_real_time_msg();">实时消息
-        <template v-if="is_getting_real_time_msg" style="color: #00bd7e">...</template>
-      </el-text>
-    </el-col>
-  </el-row>
-
-  <el-dialog v-model="is_show_more" title="详细信息" width="600" center>
-    <user-info-show :userinfo="userinfo" :show_all="true"></user-info-show>
-  </el-dialog>
+      <div class="action-section">
+        <el-button 
+          type="primary" 
+          link 
+          @click="is_show_more=!is_show_more"
+          :icon="is_show_more ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+        >
+          详细信息
+        </el-button>
+
+        <el-button 
+          type="primary" 
+          link 
+          @click="export_button(!is_export)"
+        >
+          {{ is_export ? '聊天查看' : '导出备份' }}
+        </el-button>
+
+        <el-button 
+          type="primary" 
+          link 
+          @click="get_real_time_msg()"
+          :loading="is_getting_real_time_msg"
+        >
+          实时消息
+        </el-button>
+      </div>
+    </div>
+
+    <el-dialog 
+      v-model="is_show_more" 
+      title="详细信息" 
+      width="600" 
+      center
+      class="info-dialog"
+    >
+      <user-info-show :userinfo="userinfo" :show_all="true"></user-info-show>
+    </el-dialog>
+  </el-card>
 </template>
 
 <style scoped>
-.label_color {
-  color: #333; /* 调整字体颜色 */
-  font-size: 15px;
-  padding-left: 15px;
-  padding-right: 0;
+.chat-header-card {
+  margin-bottom: 20px;
+  border-radius: 8px;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.info-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  align-items: center;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.label {
+  color: #606266;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.value {
+  font-size: 14px;
+  padding: 0 8px;
+  height: 24px;
+  line-height: 24px;
+}
+
+.action-section {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+:deep(.el-button--link) {
+  padding: 0 8px;
+  height: 24px;
+  font-size: 14px;
+}
+
+:deep(.el-button--link:hover) {
+  color: #409EFF;
+}
+
+:deep(.el-dialog) {
+  border-radius: 8px;
 }
 
-.data_color {
-  color: #08488c;
-  background-color: #f4f4f4; /* 调整背景颜色 */
-  font-size: 15px;
-  padding-left: 6px;
-  padding-right: 6px;
-  font-weight: bold; /* 使用 bold 表示加粗 */
-  white-space: nowrap;
-  max-width: 80%;
+:deep(.el-dialog__header) {
+  padding: 20px;
+  margin: 0;
+  border-bottom: 1px solid #ebeef5;
 }
 
-.button_color {
-  color: #0048ff; /* 调整字体颜色 */
-  font-size: 15px;
-  padding-left: 15px;
-  padding-right: 0;
-  text-decoration: underline;
+:deep(.el-dialog__body) {
+  padding: 20px;
 }
 
+@media screen and (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .action-section {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/chat/ContactsList.vue b/src/components/chat/ContactsList.vue
index a34b0f1..a749acc 100644
--- a/src/components/chat/ContactsList.vue
+++ b/src/components/chat/ContactsList.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import {defineEmits, onMounted, ref} from 'vue';
+import { defineEmits, onMounted, ref } from 'vue';
 import http from '@/utils/axios.js';
-import {apiUserList, apiUserSessionList} from "@/api/chat";
+import { apiUserList, apiUserSessionList } from "@/api/chat";
 import UserInfoShow from "@/components/chat/components/UserInfoShow.vue";
-import {gen_show_name, type User} from "@/utils/common_utils";
-import {api_img} from "@/api/base";
+import { gen_show_name, type User } from "@/utils/common_utils";
+import { api_img } from "@/api/base";
 
 // "wxid": strUsrName, "nOrder": nOrder, "nUnReadCount": nUnReadCount, "strNickName": strNickName,
 // "nStatus": nStatus, "nIsSend": nIsSend, "strContent": strContent, "nMsgLocalID": nMsgLocalID,
@@ -14,7 +14,7 @@ import {api_img} from "@/api/base";
 // "ExtraBuf": ExtraBuf, "LabelIDList": tuple(LabelIDList)
 
 
-const tableData = ref([]);
+const tableData = ref<User[]>([]);
 
 
 // 初始化请求session数据 START
@@ -43,7 +43,7 @@ const search = async () => {
     const ret = await apiUserList(search_word.value);
     if (ret !== null && typeof ret === 'object') {
       Object.entries(ret).forEach(([key, value]) => {
-        tableData.value.push(value);
+        tableData.value.push(value as User);
       });
     }
     // for (const key in ret) {
@@ -85,15 +85,15 @@ const handleCurrentChange = (val: User | undefined) => {
     <!-- 搜索框以及按钮   -->
     <div style="padding: 10px 10px;">
       <el-input placeholder="请输入关键字" v-model="search_word" @keyup.enter="search"
-                style="width: 170px;margin-left: 15px;"></el-input>
-      <el-button type="primary" @click="search" style="width: 50px;">搜索</el-button>
+        style="width: 170px;"></el-input>
+      <el-button type="primary" @click="search" style="width: 50px;margin-left: 10px;">搜索</el-button>
     </div>
     <!--  这是联系人的list    -->
-    <el-table :data="tableData" stripe style="width: 100%" max-height="100%" height="100%" highlight-current-row loading="lazy"
-              @current-change="handleCurrentChange">
+    <el-table :data="tableData" stripe style="width: 100%" max-height="100%" height="100%" highlight-current-row
+      loading="lazy" @current-change="handleCurrentChange">
       <el-table-column width="57">
         <template v-slot="{ row }">
-          <el-avatar :size="33" :src="api_img(row.headImgUrl)" v-if="row.headImgUrl!==''"></el-avatar>
+          <el-avatar :size="33" :src="api_img(row.headImgUrl)" v-if="row.headImgUrl !== ''"></el-avatar>
           <el-avatar :size="33" v-else>群</el-avatar>
         </template>
       </el-table-column>
@@ -117,6 +117,7 @@ const handleCurrentChange = (val: User | undefined) => {
 <style scoped>
 /* 允许提示内容换行 */
 .el-tooltip__popper .popper__content {
-  white-space: pre-line; /* 允许换行 */
+  white-space: pre-line;
+  /* 允许换行 */
 }
 </style>
\ No newline at end of file
diff --git a/src/components/stats/ContactStats.vue b/src/components/stats/ContactStats.vue
index 0309dbd..4432332 100644
--- a/src/components/stats/ContactStats.vue
+++ b/src/components/stats/ContactStats.vue
@@ -7,6 +7,7 @@ import {gen_show_name, type User} from "@/utils/common_utils";
 import DateTimeSelect from "@/components/utils/DateTimeSelect.vue";
 import ColorSelect from "@/components/utils/ColorSelect.vue";
 import ChartInit from "@/components/stats/components/ChartInit.vue";
+import { ElMessage } from 'element-plus';
 
 
 // https://echarts.apache.org/examples/en/editor.html
@@ -18,7 +19,11 @@ interface gender_face {
 }
 
 const user = ref<{ [key: string]: User }>({});
-const gender_data = ref<gender_face>({});
+const gender_data = ref<gender_face>({
+  男: 0,
+  女: 0,
+  未知: 0
+});
 const signature_count_dict = ref<{ [key: string]: number }>({});
 
 const is_update = ref(false);
@@ -149,25 +154,159 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="common-layout" style="background-color: #d2d2fa;height: 100%;width: 100%;">
-    <el-container style="height: 100%;width: 100%;">
-      <el-header :height="'80px'" style="width: 100%;">
-        <strong>颜色设置：</strong>
-        bg:
-        <color-select
-            @updateColors="(val:any)=>{val?chart_option.backgroundColor=val:'';refreshChart(false)}"></color-select>
-      </el-header>
-
-      <el-main style="height: calc(100% - 100px);width: 100%;">
-        <chart-init :option="chart_option" :update="is_update" class="charts_main"/>
-      </el-main>
-    </el-container>
+  <div class="contact-container">
+    <el-card class="contact-card">
+      <template #header>
+        <div class="card-header">
+          <span class="title">联系人画像</span>
+        </div>
+      </template>
+
+      <div class="content">
+        <div class="control-panel">
+          <div class="control-group">
+            <div class="control-item">
+              <span class="label">背景色：</span>
+              <color-select
+                @updateColors="(val:any)=>{val?chart_option.backgroundColor=val:'';refreshChart(false)}"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="stats-info">
+          <div class="gender-stats">
+            <div class="stat-item">
+              <span class="stat-label">男性：</span>
+              <span class="stat-value">{{ gender_data["男"] }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-label">女性：</span>
+              <span class="stat-value">{{ gender_data["女"] }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-label">未知：</span>
+              <span class="stat-value">{{ gender_data["未知"] }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-label">总计：</span>
+              <span class="stat-value">{{ gender_data["男"] + gender_data["女"] + gender_data["未知"] }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="chart-container">
+          <chart-init :option="chart_option" :update="is_update"/>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <style scoped>
-.charts_main {
+.contact-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.contact-card {
+  width: 95%;
+  max-width: 1200px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.content {
+  padding: 20px;
+}
+
+.control-panel {
+  margin-bottom: 20px;
+}
+
+.control-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 20px;
+  align-items: center;
+}
+
+.control-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.label {
+  font-weight: bold;
+  color: #606266;
+  white-space: nowrap;
+}
+
+.stats-info {
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+}
+
+.gender-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 20px;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.stat-label {
+  font-weight: bold;
+  color: #606266;
+}
+
+.stat-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #409EFF;
+}
+
+.chart-container {
+  height: 600px;
   width: 100%;
-  height: 100%;
+  margin-top: 20px;
+}
+
+:deep(.el-card__header) {
+  padding: 15px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+:deep(.el-card__body) {
+  padding: 20px;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/stats/DateChatHeatmapStats.vue b/src/components/stats/DateChatHeatmapStats.vue
index f272946..0cef5a3 100644
--- a/src/components/stats/DateChatHeatmapStats.vue
+++ b/src/components/stats/DateChatHeatmapStats.vue
@@ -8,6 +8,7 @@ import DateTimeSelect from "@/components/utils/DateTimeSelect.vue";
 import ColorSelect from "@/components/utils/ColorSelect.vue";
 import NumberInput from "@/components/utils/NumberInput.vue";
 import ChartInit from "@/components/stats/components/ChartInit.vue";
+import { ElMessage } from 'element-plus';
 
 // https://echarts.apache.org/examples/en/editor.html
 
@@ -173,55 +174,201 @@ const set_top_user = async (wxid: string) => {
 </script>
 
 <template>
-  <div class="common-layout" style="background-color: #d2d2fa;height: 100%;width: 100%;">
-    <el-container style="height: 100%;width: 100%;">
-      <el-header :height="'80px'" style="width: 100%;">
-        <strong>时间(默认全部)：</strong>
-        <DateTimeSelect @datetime="(val: any) => {datetime = val;}"/> &nbsp;
-        <el-select
-            v-model="word"
-            filterable
-            remote
-            reserve-keyword
-            placeholder="输入想查看的联系人"
-            remote-show-suffix
-            clearable
-            :remote-method="search_user"
-            :loading="loading"
-            style="width: 240px"
-        >
-          <el-option v-for="item in user_options" :key="item.wxid" :label="gen_show_name(item)" :value="item.wxid"/>
-        </el-select>&nbsp;
-        <el-button type="primary" @click="refreshChart">查看</el-button>
-        &nbsp
-        <strong>颜色设置：</strong>
-        bg:
-        <color-select
-            @updateColors="(val:any)=>{val?chart_option.backgroundColor=val:'';refreshChart(false)}"></color-select>
-        min:
-        <number-input :n="chart_option.visualMap.min" :step="100"
-                      @updateNumber="(val:any)=>{val?chart_option.visualMap.min=val:'';refreshChart(false)}"></number-input>
-        max:
-        <number-input :n="chart_option.visualMap.max" :step="100"
-                      @updateNumber="(val:any)=>{val?chart_option.visualMap.max=val:'';refreshChart(false)}"></number-input>
-        <br>
-        <strong>top10[总:(收/发)]：</strong>
-        <template v-for="wxid in Object.keys(top_user_count)" :key="wxid">
-          <el-button type="primary" plain @click="set_top_user(wxid)" size="small">
-            {{ gen_show_name(top_user[wxid]) }} [{{ top_user_count[wxid]?.total_count }}({{
-              top_user_count[wxid]?.receiver_count
-            }}/{{ top_user_count[wxid]?.sender_count }})]
-          </el-button>
-        </template>
-      </el-header>
-
-      <el-main style="height: calc(100% - 100px);width: 100%;">
-        <chart-init :option="chart_option" :update="is_update"/>
-      </el-main>
-    </el-container>
+  <div class="heatmap-container">
+    <el-card class="heatmap-card">
+      <template #header>
+        <div class="card-header">
+          <span class="title">聊天记录热力图</span>
+        </div>
+      </template>
+
+      <div class="content">
+        <div class="control-panel">
+          <div class="control-group">
+            <div class="control-item">
+              <span class="label">时间范围：</span>
+              <DateTimeSelect @datetime="(val: any) => {datetime = val;}"/>
+            </div>
+            
+            <div class="control-item">
+              <span class="label">联系人：</span>
+              <el-select
+                v-model="word"
+                filterable
+                remote
+                reserve-keyword
+                placeholder="输入想查看的联系人"
+                remote-show-suffix
+                clearable
+                :remote-method="search_user"
+                :loading="loading"
+                class="user-select"
+              >
+                <el-option 
+                  v-for="item in user_options" 
+                  :key="item.wxid" 
+                  :label="gen_show_name(item)" 
+                  :value="item.wxid"
+                />
+              </el-select>
+            </div>
+
+            <div class="control-item">
+              <el-button type="primary" @click="refreshChart">查看</el-button>
+            </div>
+          </div>
+
+          <div class="control-group">
+            <div class="control-item">
+              <span class="label">背景色：</span>
+              <color-select
+                @updateColors="(val:any)=>{val?chart_option.backgroundColor=val:'';refreshChart(false)}"
+              />
+            </div>
+
+            <div class="control-item">
+              <span class="label">最小值：</span>
+              <number-input 
+                :n="chart_option.visualMap.min" 
+                :step="100"
+                @updateNumber="(val:any)=>{val?chart_option.visualMap.min=val:'';refreshChart(false)}"
+              />
+            </div>
+
+            <div class="control-item">
+              <span class="label">最大值：</span>
+              <number-input 
+                :n="chart_option.visualMap.max" 
+                :step="100"
+                @updateNumber="(val:any)=>{val?chart_option.visualMap.max=val:'';refreshChart(false)}"
+              />
+            </div>
+          </div>
+
+          <div class="top-users">
+            <span class="label">TOP10[总:(收/发)]：</span>
+            <div class="user-buttons">
+              <el-button 
+                v-for="wxid in Object.keys(top_user_count)" 
+                :key="wxid"
+                type="primary" 
+                plain 
+                @click="set_top_user(wxid)" 
+                size="small"
+                class="user-button"
+              >
+                {{ gen_show_name(top_user[wxid]) }} 
+                [{{ top_user_count[wxid]?.total_count }}
+                ({{ top_user_count[wxid]?.receiver_count }}/{{ top_user_count[wxid]?.sender_count }})]
+              </el-button>
+            </div>
+          </div>
+        </div>
+
+        <div class="chart-container">
+          <chart-init :option="chart_option" :update="is_update"/>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <style scoped>
+.heatmap-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
+.heatmap-card {
+  width: 95%;
+  max-width: 1200px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.content {
+  padding: 20px;
+}
+
+.control-panel {
+  margin-bottom: 20px;
+}
+
+.control-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 20px;
+  align-items: center;
+}
+
+.control-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.label {
+  font-weight: bold;
+  color: #606266;
+  white-space: nowrap;
+}
+
+.user-select {
+  width: 240px;
+}
+
+.top-users {
+  margin-top: 20px;
+}
+
+.user-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.user-button {
+  margin: 5px;
+}
+
+.chart-container {
+  height: 600px;
+  width: 100%;
+  margin-top: 20px;
+}
+
+:deep(.el-select) {
+  width: 240px;
+}
+
+:deep(.el-button) {
+  margin: 0;
+}
+
+:deep(.el-card__header) {
+  padding: 15px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+:deep(.el-card__body) {
+  padding: 20px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/stats/DateChatStats.vue b/src/components/stats/DateChatStats.vue
index 8b13aa0..f292049 100644
--- a/src/components/stats/DateChatStats.vue
+++ b/src/components/stats/DateChatStats.vue
@@ -7,6 +7,7 @@ import {gen_show_name, type User} from "@/utils/common_utils";
 import DateTimeSelect from "@/components/utils/DateTimeSelect.vue";
 import ColorSelect from "@/components/utils/ColorSelect.vue";
 import ChartInit from "@/components/stats/components/ChartInit.vue";
+import { ElMessage } from 'element-plus';
 
 // https://echarts.apache.org/examples/en/editor.html
 
@@ -270,57 +271,183 @@ const set_top_user = async (wxid: string) => {
 </script>
 
 <template>
-  <div class="common-layout" style="background-color: #d2d2fa;height: 100%;width: 100%;">
-    <el-container style="height: 100%;width: 100%;">
-      <el-header :height="'80px'" style="width: 100%;">
-        <strong>时间(默认全部)：</strong>
-        <DateTimeSelect @datetime="(val: any) => {datetime = val;}"/> &nbsp;
-        <el-select
-            v-model="word"
-            filterable
-            remote
-            reserve-keyword
-            placeholder="输入想查看的联系人"
-            remote-show-suffix
-            clearable
-            :remote-method="search_user"
-            :loading="loading"
-            style="width: 240px"
-        >
-          <el-option v-for="item in user_options" :key="item.wxid" :label="gen_show_name(item)" :value="item.wxid"/>
-        </el-select>&nbsp;
-        <el-button type="primary" @click="search_change">查看</el-button>
-        &nbsp;
-        <strong>颜色设置：</strong>
-        bg:
-        <color-select
-            @updateColors="(val:any)=>{val?chart_option.backgroundColor=val:'';refreshChart(false)}"></color-select>
-
-        <template v-for="(color, index) in chart_option.series" :key="index">
-          c{{ index + 1 }}
-          <color-select
-              @updateColors="(val:any)=>{val?chart_option.series[index].itemStyle.color=val:'';refreshChart(false)}"
-          ></color-select>
-        </template>
-        <el-button @click="update_chart_option();refreshChart(false);" size="small">重置</el-button>
-        <br>
-        <strong>top10[总:(收/发)]：</strong>
-        <template v-for="wxid in Object.keys(top_user_count)" :key="wxid">
-          <el-button type="primary" plain @click="set_top_user(wxid)" size="small">
-            {{ gen_show_name(top_user[wxid]) }} [{{ top_user_count[wxid]?.total_count }}({{
-              top_user_count[wxid]?.receiver_count
-            }}/{{ top_user_count[wxid]?.sender_count }})]
-          </el-button>
-        </template>
-      </el-header>
-
-      <el-main style="height: calc(100% - 100px);width: 100%;">
-        <chart-init :option="chart_option" :update="is_update" id="charts_main"/>
-      </el-main>
-    </el-container>
+  <div class="stats-container">
+    <el-card class="stats-card">
+      <template #header>
+        <div class="card-header">
+          <span class="title">聊天记录统计</span>
+        </div>
+      </template>
+
+      <div class="content">
+        <div class="control-panel">
+          <div class="control-group">
+            <div class="control-item">
+              <span class="label">时间范围：</span>
+              <DateTimeSelect @datetime="(val: any) => {datetime = val;}"/>
+            </div>
+            
+            <div class="control-item">
+              <span class="label">联系人：</span>
+              <el-select
+                v-model="word"
+                filterable
+                remote
+                reserve-keyword
+                placeholder="输入想查看的联系人"
+                remote-show-suffix
+                clearable
+                :remote-method="search_user"
+                :loading="loading"
+                class="user-select"
+              >
+                <el-option 
+                  v-for="item in user_options" 
+                  :key="item.wxid" 
+                  :label="gen_show_name(item)" 
+                  :value="item.wxid"
+                />
+              </el-select>
+            </div>
+
+            <div class="control-item">
+              <el-button type="primary" @click="refreshChart">查看</el-button>
+            </div>
+          </div>
+
+          <div class="control-group">
+            <div class="control-item">
+              <span class="label">背景色：</span>
+              <color-select
+                @updateColors="(val:any)=>{bg_color=val;update_chart_option();refreshChart(false)}"
+              />
+            </div>
+          </div>
+
+          <div class="top-users">
+            <span class="label">TOP10[总:(收/发)]：</span>
+            <div class="user-buttons">
+              <el-button 
+                v-for="wxid in Object.keys(top_user_count)" 
+                :key="wxid"
+                type="primary" 
+                plain 
+                @click="set_top_user(wxid)" 
+                size="small"
+                class="user-button"
+              >
+                {{ gen_show_name(top_user[wxid]) }} 
+                [{{ top_user_count[wxid]?.total_count }}
+                ({{ top_user_count[wxid]?.receiver_count }}/{{ top_user_count[wxid]?.sender_count }})]
+              </el-button>
+            </div>
+          </div>
+        </div>
+
+        <div class="chart-container">
+          <chart-init :option="chart_option" :update="is_update"/>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <style scoped>
+.stats-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.stats-card {
+  width: 95%;
+  max-width: 1200px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.content {
+  padding: 20px;
+}
+
+.control-panel {
+  margin-bottom: 20px;
+}
+
+.control-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 20px;
+  align-items: center;
+}
+
+.control-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
 
+.label {
+  font-weight: bold;
+  color: #606266;
+  white-space: nowrap;
+}
+
+.user-select {
+  width: 240px;
+}
+
+.top-users {
+  margin-top: 20px;
+}
+
+.user-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.user-button {
+  margin: 5px;
+}
+
+.chart-container {
+  height: 600px;
+  width: 100%;
+  margin-top: 20px;
+}
+
+:deep(.el-select) {
+  width: 240px;
+}
+
+:deep(.el-button) {
+  margin: 0;
+}
+
+:deep(.el-card__header) {
+  padding: 15px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+:deep(.el-card__body) {
+  padding: 20px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/utils/DbInitComponent.vue b/src/components/utils/DbInitComponent.vue
index 63c9e4d..30d96ce 100644
--- a/src/components/utils/DbInitComponent.vue
+++ b/src/components/utils/DbInitComponent.vue
@@ -5,6 +5,7 @@ import {defineEmits, onMounted, ref, watch} from "vue";
 import {ElTable, ElTableColumn, ElMessage, ElMessageBox} from "element-plus";
 import type {Action} from 'element-plus'
 import router from "@/router";
+import { Clock, MagicStick, Setting } from '@element-plus/icons-vue'
 
 interface wxinfo {
   pid: string;
@@ -18,10 +19,15 @@ interface wxinfo {
   key: string;
 }
 
+interface LocalWxid {
+  wxid: string;
+}
+
 const percentage = ref(0);
 const startORstop = ref(-1);  // 用于进度条的开始和停止 0表示0% 1表示100%
 
-const init_type = ref("");
+type InitType = 'last' | 'auto' | 'custom'| '';
+const init_type = ref<InitType>('');
 
 const is_init = ref(false);
 const wxinfoData = ref<wxinfo[]>([]);
@@ -36,19 +42,34 @@ const wx_path = ref("");
 const key = ref("");
 const my_wxid = ref("");
 
-const local_wxids = ref([]);
+const local_wxids = ref<LocalWxid[]>([]);
 
 const db_init = (init: boolean) => {
   if (init) {
     localStorage.setItem('isDbInit', "t");
-    router.push('/');
+    // router.push('/');
     ElMessage({
       type: 'success',
       message: '初始化成功！',
+      duration: 3000,
     })
+    init_type.value = '';
   }
 }
 
+const showError = (error: unknown) => {
+  const errorMessage = error instanceof Error ? error.message : String(error);
+  ElMessageBox.alert(errorMessage, '错误', {
+    confirmButtonText: '确认',
+    callback: (action: Action) => {
+      ElMessage({
+        type: 'error',
+        message: `操作: ${action}`,
+      })
+    },
+  });
+}
+
 // ** 是否使用key的初始化** START
 const init_key = async () => {
   if (decryping.value) {
@@ -75,15 +96,7 @@ const init_key = async () => {
     percentage.value = 0; // 进度条 0%
     isErrorShow.value = true;
     decryping.value = false;
-    ElMessageBox.alert(error, 'error', {
-      confirmButtonText: '确认',
-      callback: (action: Action) => {
-        ElMessage({
-          type: 'error',
-          message: `action: ${action}`,
-        })
-      },
-    })
+    showError(error);
     return [];
   }
   decryping.value = false;
@@ -103,18 +116,11 @@ const init_nokey = async () => {
     }
     decryping.value = false;
     db_init(body_data.is_init);
-    // emits('isAutoShow', body_data.is_init);
   } catch (error) {
     percentage.value = 0; // 进度条 0%
     isErrorShow.value = true;
     decryping.value = false;
-    ElMessageBox.alert(error, 'error', {
-      confirmButtonText: '确认',
-      callback: (action: Action) => {
-        init_type.value = "";// 刷新
-      },
-    })
-    // console.error('Error fetching data:', error);
+    showError(error);
     return [];
   }
   decryping.value = false;
@@ -123,28 +129,25 @@ const init_nokey = async () => {
 
 // ** 使用上次数据部分** START
 const selectLastWx = async (row: wxinfo) => {
-  // console.log(row)
   my_wxid.value = row.wxid;
 }
 
 const get_init_last_local_wxid = async () => {
   try {
-    const body_data = await http.post('/api/ls/init_last_local_wxid'); //[ 'wx1234567890', 'wx0987654321' ]
+    const body_data = await http.post('/api/ls/init_last_local_wxid');
     local_wxids.value = body_data.local_wxids.map((item: string) => {
       return {wxid: item}
     });
     if (local_wxids.value.length === 1) {
       my_wxid.value = local_wxids.value[0].wxid;
-      // console.log("init_last")
       await init_last();
     }
   } catch (error) {
-    console.error('Error fetching data:', error);
+    showError(error);
     return [];
   }
 }
 
-
 const init_last = async () => {
   try {
     let reqdata = {
@@ -158,33 +161,23 @@ const init_last = async () => {
       percentage.value = 100; // 进度条 100%
       decryping.value = false;
       db_init(body_data.is_init);
-      // emits('isAutoShow', body_data.is_init);
     } else {
       isErrorShow.value = true;
       decryping.value = false;
-      ElMessageBox.alert("未发现上次的设置数据！", 'error', {
+      ElMessageBox.alert("未发现上次的设置数据！", '错误', {
         confirmButtonText: '确认',
         callback: (action: Action) => {
           init_type.value = "";// 刷新
         },
       })
     }
-
     decryping.value = false;
   } catch (error) {
-    // percentage.value = 0; // 进度条 0%
     isErrorShow.value = true;
     decryping.value = false;
-    ElMessageBox.alert(error, 'error', {
-      confirmButtonText: '确认',
-      callback: (action: Action) => {
-        init_type.value = "";
-      },
-    })
-    // console.error('Error fetching data:', error);
+    showError(error);
     return [];
   }
-
   decryping.value = false;
 }
 
@@ -200,7 +193,7 @@ const get_wxinfo = async () => {
       setTimeout(okWx, 5000);
     }
   } catch (error) {
-    console.error('Error fetching data:', error);
+    showError(error);
     return [];
   }
 }
@@ -226,7 +219,6 @@ const okWx = () => {
 
 // **自动解密微信部分**  END 查看有多少个微信正在登录 ， 并调用init_key解密初始化
 
-
 // 监测isAutoShow是否为aoto，如果是则执行get_wxinfo
 watch(init_type, (val) => {
   if (val === 'auto') {
@@ -235,149 +227,231 @@ watch(init_type, (val) => {
     // init();
   } else if (val === 'last') {
     get_init_last_local_wxid();
-    // init_last();
   }
 })
 
 </script>
 
 <template>
-  <div style="background-color: #d2d2fa; height: 100%; display: flex; justify-content: center; align-items: center;">
-    <!-- 上次数据 -->
-    <div v-if="init_type==='last'">
-      <div
-          style="background-color: #fff; width: 90%;min-width: 800px; height: 80%; border-radius: 10px; padding: 20px; overflow: auto;">
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <div style="font-size: 20px; font-weight: bold;">选择要查看的微信</div>
+  <div class="db-init-container">
+    <!-- 初始选择界面 -->
+    <div v-if="!init_type" class="init-options">
+      <el-card 
+        class="option-card" 
+        @click="init_type = 'last'"
+        shadow="hover"
+      >
+        <div class="option-content">
+          <el-icon class="option-icon"><Clock /></el-icon>
+          <div class="option-title">使用历史数据</div>
+          <div class="option-desc">使用上次的配置信息进行初始化</div>
         </div>
-        <div style="margin-top: 20px;">
-          <el-table :data="local_wxids" @current-change="selectLastWx" highlight-current-row style="width: 100%">
-            <el-table-column :min-width="50" prop="wxid" label="微信原始id"></el-table-column>
-          </el-table>
+      </el-card>
+
+      <el-card 
+        class="option-card" 
+        @click="init_type = 'auto'"
+        shadow="hover"
+      >
+        <div class="option-content">
+          <el-icon class="option-icon"><MagicStick /></el-icon>
+          <div class="option-title">自动解密已登录微信</div>
+          <div class="option-desc">自动检测并解密当前登录的微信</div>
         </div>
-        <div style="margin-top: 20px;">
-          <el-button style="margin-right: 10px;margin-top: 10px;width: 100%;" type="success" @click="init_last">确定
-          </el-button>
+      </el-card>
+
+      <el-card 
+        class="option-card" 
+        @click="init_type = 'custom'"
+        shadow="hover"
+      >
+        <div class="option-content">
+          <el-icon class="option-icon"><Setting /></el-icon>
+          <div class="option-title">自定义配置</div>
+          <div class="option-desc">手动配置微信路径和密钥</div>
         </div>
-      </div>
+      </el-card>
     </div>
-    <!-- END -->
-
-    <!-- 自动解密和显示 -->
-    <div v-else-if="init_type==='auto'">
-
-      <!--      <el-progress v-if="decryping && !isErrorShow" type="dashboard" :percentage="percentage" :color="colors"/>-->
-      <div v-if="decryping">
-        <ProgressBar v-if="decryping" :startORstop="startORstop"/>
-      </div>
-      <div v-else
-           style="background-color: #fff; width: 90%;min-width: 800px; height: 80%; border-radius: 10px; padding: 20px; overflow: auto;">
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <div style="font-size: 20px; font-weight: bold;">选择要查看的微信(会清空work下对应wxid数据)</div>
-        </div>
-        <div style="margin-top: 20px;">
-          <el-table :data="wxinfoData" @current-change="selectWx" highlight-current-row style="width: 100%">
-            <el-table-column :min-width="30" prop="pid" label="进程id"></el-table-column>
-            <el-table-column :min-width="40" prop="version" label="微信版本"></el-table-column>
-            <el-table-column :min-width="40" prop="account" label="账号"></el-table-column>
-            <el-table-column :min-width="40" prop="nickname" label="昵称"></el-table-column>
-            <el-table-column :min-width="50" prop="wxid" label="微信原始id"></el-table-column>
-          </el-table>
-        </div>
-        <div style="margin-top: 20px;">
-          <el-button style="margin-right: 10px;margin-top: 10px;width: 100%;" type="success" @click="okWx">确定{{
-              oneWx
-            }}
-          </el-button>
+
+    <!-- 历史数据初始化 -->
+    <div v-if="init_type === 'last'" class="init-form">
+      <el-card class="form-card" shadow="hover">
+        <template #header>
+          <div class="form-header">
+            <span>使用历史数据初始化</span>
+            <el-button type="primary" link @click="init_type = ''">返回</el-button>
+          </div>
+        </template>
+        <el-table :data="local_wxids" @row-click="selectLastWx" highlight-current-row>
+          <el-table-column prop="wxid" label="微信ID" />
+        </el-table>
+        <div class="form-footer">
+          <el-button type="primary" @click="init_last" :loading="decryping">开始初始化</el-button>
         </div>
-      </div>
+      </el-card>
     </div>
-    <!-- END -->
-
-    <!-- 用于自定义参数 -->
-    <div v-else-if="init_type==='custom'">
-      <div v-if="decryping">
-        <ProgressBar v-if="decryping" :startORstop="startORstop"/>
-      </div>
-      <div v-else
-           style="background-color: #fff; width: 80%;min-width: 800px; height: 70%; border-radius: 10px; padding: 20px; overflow: auto;">
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <div style="font-size: 20px; font-weight: bold;">自定义-文件位置</div>
-          <div style="display: flex; justify-content: space-between; align-items: center;">
-            <!--          <el-button style="margin-right: 10px;" @click="exportData">导出</el-button>-->
+
+    <!-- 自动解密初始化 -->
+    <div v-if="init_type === 'auto'" class="init-form">
+      <el-card class="form-card" shadow="hover">
+        <template #header>
+          <div class="form-header">
+            <span>自动解密已登录微信</span>
+            <el-button type="primary" link @click="init_type = ''">返回</el-button>
           </div>
+        </template>
+        <el-table :data="wxinfoData" @row-click="selectWx" highlight-current-row>
+          <el-table-column prop="account" label="账号" />
+          <el-table-column prop="nickname" label="昵称" />
+          <el-table-column prop="wxid" label="微信ID" />
+        </el-table>
+        <div class="form-footer">
+          <el-button type="primary" @click="okWx" :loading="decryping">开始初始化</el-button>
         </div>
-        <div style="margin-top: 20px;">
-          <!--    单选按钮      -->
-          <input type="radio" v-model="isUseKey" value="true"/> 使用 KEY &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-          <input type="radio" v-model="isUseKey" value="false"/> 不使用 KEY
-          <div v-if="isUseKey=='false'">
-            说明：1、表示数据库已解密并合并<br>2、合并后的数据库需要包含(MediaMSG,MSG,MicroMsg,OpenIMMsg)这些数据库合并的内容<br>
-          </div>
-          <div v-if="isUseKey=='true'">
-            说明：1、自动根据key解密微信文件夹下的数据库<br>2、必须保证key正确，否则解密失败<br>
-          </div>
-
-          <el-divider></el-divider>  <!-- 分割线-->
+      </el-card>
+    </div>
 
-          <div v-if="isUseKey=='true'">
-            <label>密钥key(必填): </label>
-            <el-input placeholder="密钥key (64位)" v-model="key" style="width: 80%;"></el-input>
-            <br>
-          </div>
-          <div v-if="isUseKey=='false'">
-            <label>merge_all.db 文件路径(必填,非文件夹): </label>
-            <el-input placeholder="(MediaMSG.db,MSG.db,MicroMsg.db,OpenIMMsg.db)合并后的数据库" v-model="merge_path"
-                      style="width: 80%;"></el-input>
-            <br>
+    <!-- 自定义配置初始化 -->
+    <div v-if="init_type === 'custom'" class="init-form">
+      <el-card class="form-card" shadow="hover">
+        <template #header>
+          <div class="form-header">
+            <span>自定义配置初始化</span>
+            <el-button type="primary" link @click="init_type = ''">返回</el-button>
           </div>
-          <label>微信文件夹路径(必填): </label>
-          <el-input placeholder="C:\***\WeChat Files\wxid_*******" v-model="wx_path" style="width: 80%;"></el-input>
-          <br>
-          <label>微信原始id(必填): </label>
-          <el-input placeholder="wxid_*******" v-model="my_wxid" style="width: 80%;"></el-input>
-          <br>
-
-          <el-button v-if="isUseKey=='true'" style="margin-top: 10px;width: 100%;" type="success" @click="init_key">
-            确定
-          </el-button>
-          <el-button v-if="isUseKey=='false'" style="margin-top: 10px;width: 100%;" type="success" @click="init_nokey">
-            确定
+        </template>
+        <el-form label-position="top">
+          <el-form-item label="微信路径">
+            <el-input v-model="wx_path" placeholder="请输入微信路径" />
+          </el-form-item>
+          <el-form-item label="合并路径">
+            <el-input v-model="merge_path" placeholder="请输入合并路径" />
+          </el-form-item>
+          <el-form-item label="微信ID">
+            <el-input v-model="my_wxid" placeholder="请输入微信ID" />
+          </el-form-item>
+          <el-form-item>
+            <el-radio-group v-model="isUseKey">
+              <el-radio label="true">使用密钥</el-radio>
+              <el-radio label="false">不使用密钥</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="isUseKey === 'true'" label="密钥">
+            <el-input v-model="key" placeholder="请输入密钥" />
+          </el-form-item>
+        </el-form>
+        <div class="form-footer">
+          <el-button type="primary" @click="isUseKey === 'true' ? init_key() : init_nokey()" :loading="decryping">
+            开始初始化
           </el-button>
         </div>
-      </div>
+      </el-card>
     </div>
-    <!-- END -->
-
 
-    <!-- 初始选择界面 -->
-    <div v-else-if="init_type === ''" style="display: flex; justify-content: space-between;">
-      <label
-          style="width: 200px; height: 150px; background-color: #fff; display: flex; flex-direction: column; align-items: center; border-radius: 10px; margin-right: 20px;">
-        <input type="radio" v-model="init_type" value="last"/>
-        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-          <div>使用历史数据</div>
-        </div>
-      </label>
-      <label
-          style="width: 200px; height: 150px; background-color: #fff; display: flex; flex-direction: column; align-items: center; border-radius: 10px; margin-right: 20px;">
-        <input type="radio" v-model="init_type" value="auto"/>
-        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-          <div>自动解密已登录微信</div>
-        </div>
-      </label>
-      <label
-          style="width: 200px; height: 150px; background-color: #fff; display: flex; flex-direction: column; align-items: center; border-radius: 10px;">
-        <input type="radio" v-model="init_type" value="custom"/>
-        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-          <div>自定义文件位置</div>
-        </div>
-      </label>
-    </div>
-    <!-- END -->
+    <!-- 进度条 -->
+    <ProgressBar v-if="decryping" :percentage="percentage" :startORstop="startORstop" />
   </div>
 </template>
 
 <style scoped>
+.db-init-container {
+  height: 100%;
+  /* background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%); */
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 
+.init-options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  width: 100%;
+  max-width: 1200px;
+  margin-bottom: 20px;
+}
+
+.option-card {
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-radius: 12px;
+}
+
+.option-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.option-card.selected {
+  border: 2px solid #409EFF;
+}
+
+.option-content {
+  padding: 20px;
+  text-align: center;
+}
+
+.option-icon {
+  font-size: 32px;
+  color: #409EFF;
+  margin-bottom: 16px;
+}
+
+.option-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
+.option-desc {
+  font-size: 14px;
+  color: #606266;
+}
+
+.init-form {
+  width: 100%;
+  max-width: 800px;
+}
+
+.form-card {
+  border-radius: 12px;
+}
+
+.form-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.form-footer {
+  margin-top: 20px;
+  text-align: center;
+}
+
+:deep(.el-table) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+:deep(.el-table__row) {
+  cursor: pointer;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 500;
+}
+
+@media screen and (max-width: 768px) {
+  .init-options {
+    grid-template-columns: 1fr;
+  }
+  
+  .init-form {
+    width: 95%;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/CleanupView.vue b/src/views/CleanupView.vue
index c483c25..1cc3c35 100644
--- a/src/views/CleanupView.vue
+++ b/src/views/CleanupView.vue
@@ -3,25 +3,146 @@ import {ref} from "vue";
 import HomeView from "@/views/HomeView.vue";
 import ContactsList from "@/components/chat/ContactsList.vue";
 import ChatExportMain from "@/components/chatBackup/ChatExportMain.vue";
-
+import { ElMessage } from 'element-plus';
 </script>
 
 <template>
-  <div style="background-color: #d2d2fa; height: 100vh; display: grid; place-items: center; ">
-    <h2 style="text-align: center">欢迎使用<a href="https://github.com/xaoyaoo/PyWxDump.git">PyWxDump</a>聊天记录查看工具!
-    </h2>
-    <h3 style="text-align: center">
-      微信存储空间清理，减少微信占用空间<br>通过选择某个人或群，把这群里的聊天记录中涉及的图片、视频、文件、语音等的媒体文件找出来<br>
-      以群对话为单位有选择性的（比如时间段）或按群会话批量从电脑的缓存中清除。
-    </h3>
-    <h3 style="text-align: center">
-      打开电脑微信，点击左下角的菜单，选择设置->通用设置->存储空间管理->清理空间，即可查看微信占用的空间，点击清理即可清理微信占用的空间。<br>
-      如果这些自带功能无法满足需要，请提交issue，我会增加点新的功能。
-    </h3>
-    <p>如需提前体验更多功能，请多多支持，多多鼓励！</p>
+  <div class="cleanup-container">
+    <el-card class="cleanup-card">
+      <template #header>
+        <div class="card-header">
+          <span class="title">微信存储空间清理</span>
+        </div>
+      </template>
+
+      <div class="content">
+        <div class="description">
+          <el-alert
+            title="功能介绍"
+            type="info"
+            :closable="false"
+            class="alert-box"
+          >
+            <template #default>
+              <p class="description-text">
+                通过选择某个人或群，把这群里的聊天记录中涉及的图片、视频、文件、语音等的媒体文件找出来。<br>
+                以群对话为单位有选择性的（比如时间段）或按群会话批量从电脑的缓存中清除。
+              </p>
+            </template>
+          </el-alert>
+
+          <el-alert
+            title="使用说明"
+            type="warning"
+            :closable="false"
+            class="alert-box"
+          >
+            <template #default>
+              <p class="description-text">
+                打开电脑微信，点击左下角的菜单，选择设置->通用设置->存储空间管理->清理空间，即可查看微信占用的空间，点击清理即可清理微信占用的空间。<br>
+                如果这些自带功能无法满足需要，请提交issue，我会增加点新的功能。
+              </p>
+            </template>
+          </el-alert>
+        </div>
+
+        <div class="github-link">
+          <el-link 
+            type="primary" 
+            href="https://github.com/xaoyaoo/PyWxDump.git"
+            target="_blank"
+          >
+            <el-icon><Link /></el-icon>
+            访问 GitHub 项目
+          </el-link>
+        </div>
+
+        <div class="support-text">
+          <el-tag type="success" effect="light">
+            如需提前体验更多功能，请多多支持，多多鼓励！
+          </el-tag>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <style scoped>
+.cleanup-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cleanup-card {
+  width: 90%;
+  max-width: 800px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.content {
+  padding: 20px;
+}
+
+.description {
+  margin-bottom: 30px;
+}
+
+.alert-box {
+  margin-bottom: 20px;
+}
+
+.description-text {
+  margin: 10px 0;
+  line-height: 1.6;
+  color: #606266;
+}
+
+.github-link {
+  text-align: center;
+  margin: 20px 0;
+}
+
+.github-link .el-icon {
+  margin-right: 5px;
+}
+
+.support-text {
+  text-align: center;
+  margin-top: 20px;
+}
+
+:deep(.el-link) {
+  font-size: 16px;
+}
+
+:deep(.el-tag) {
+  font-size: 16px;
+  padding: 8px 16px;
+}
+
+:deep(.el-alert) {
+  margin-bottom: 20px;
+}
 
+:deep(.el-alert__title) {
+  font-size: 18px;
+  font-weight: bold;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index c82d591..354549b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -2,29 +2,138 @@
 import http from '@/utils/axios.js';
 import {onMounted, ref} from "vue";
 import {apiVersion} from "@/api/base";
+import { ElMessage } from 'element-plus';
 
 const version = ref(''); // 用于显示返回值
 
-const getVersion = () => {
-  apiVersion().then((data: string) => {
+const getVersion = async () => {
+  try {
+    const data = await apiVersion();
     version.value = data;
-  }).catch((error: string) => {
+  } catch (error) {
     console.error('Error fetching API version:', error);
-  });
+    ElMessage.error('获取版本信息失败');
+  }
 }
 
 onMounted(getVersion);
-
 </script>
 
 <template>
-  <div style="background-color: #d2d2fa; height: 100vh; display: grid; place-items: center; ">
-    <h2 style="text-align: center">欢迎使用<a href="https://github.com/xaoyaoo/PyWxDump.git">PyWxDump</a>聊天记录查看工具!
-      <p style="text-align: center">当前版本：{{ version }}</p>
-    </h2>
+  <div class="home-container">
+    <el-card class="welcome-card">
+      <template #header>
+        <div class="card-header">
+          <span class="title">欢迎使用 PyWxDump</span>
+        </div>
+      </template>
+
+      <div class="content">
+        <div class="logo">
+          <el-icon class="icon"><ChatDotRound /></el-icon>
+        </div>
+        
+        <div class="text-content">
+          <h2 class="welcome-text">
+            微信聊天记录查看工具
+          </h2>
+          
+          <div class="version-info">
+            <el-tag type="info" size="large">
+              当前版本：{{ version }}
+            </el-tag>
+          </div>
+
+          <div class="github-link">
+            <el-link 
+              type="primary" 
+              href="https://github.com/xaoyaoo/PyWxDump.git"
+              target="_blank"
+            >
+              <el-icon><Link /></el-icon>
+              访问 GitHub 项目
+            </el-link>
+          </div>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <style scoped>
+.home-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.welcome-card {
+  width: 90%;
+  max-width: 800px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40px 20px;
+}
+
+.logo {
+  margin-bottom: 30px;
+}
+
+.icon {
+  font-size: 64px;
+  color: #409EFF;
+}
+
+.text-content {
+  text-align: center;
+}
+
+.welcome-text {
+  font-size: 28px;
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 20px;
+}
+
+.version-info {
+  margin: 20px 0;
+}
+
+.github-link {
+  margin-top: 30px;
+}
+
+.github-link .el-icon {
+  margin-right: 5px;
+}
+
+:deep(.el-link) {
+  font-size: 16px;
+}
+
+:deep(.el-tag) {
+  font-size: 16px;
+  padding: 8px 16px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index c82d591..6b23163 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -18,13 +18,83 @@ onMounted(getVersion);
 </script>
 
 <template>
-  <div style="background-color: #d2d2fa; height: 100vh; display: grid; place-items: center; ">
-    <h2 style="text-align: center">欢迎使用<a href="https://github.com/xaoyaoo/PyWxDump.git">PyWxDump</a>聊天记录查看工具!
-      <p style="text-align: center">当前版本：{{ version }}</p>
-    </h2>
+  <div class="index-container">
+    <el-card class="welcome-card" shadow="hover">
+      <div class="welcome-content">
+        <h2 class="welcome-title">
+          欢迎使用
+          <a href="https://github.com/xaoyaoo/PyWxDump.git" class="project-link">
+            PyWxDump
+          </a>
+          聊天记录查看工具
+        </h2>
+        <div class="version-info">
+          <el-tag type="info" effect="plain" size="large">
+            当前版本：{{ version }}
+          </el-tag>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <style scoped>
+.index-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.welcome-card {
+  width: 80%;
+  max-width: 600px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+}
+
+.welcome-content {
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.welcome-title {
+  font-size: 28px;
+  color: #303133;
+  margin-bottom: 20px;
+  line-height: 1.5;
+}
+
+.project-link {
+  color: #409EFF;
+  text-decoration: none;
+  font-weight: bold;
+  transition: color 0.3s ease;
+}
+
+.project-link:hover {
+  color: #66b1ff;
+  text-decoration: underline;
+}
+
+.version-info {
+  margin-top: 20px;
+}
+
+:deep(.el-tag) {
+  font-size: 16px;
+  padding: 8px 16px;
+}
 
+@media screen and (max-width: 768px) {
+  .welcome-card {
+    width: 95%;
+  }
+  
+  .welcome-title {
+    font-size: 24px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/other/AboutView.vue b/src/views/other/AboutView.vue
index fd0283f..171135e 100644
--- a/src/views/other/AboutView.vue
+++ b/src/views/other/AboutView.vue
@@ -1,67 +1,173 @@
 <template>
-  <div class="about">
-    <h1 id="-center-pywxdump-center-" style="text-align: center">
-      PyWxDump<a @click="check_update" target="_blank" style="float: right; margin-right: 30px;">检查更新</a>
-    </h1>
-    <!--  在右上角添加按钮， “检查更新”  -->
+  <div class="about-container">
+    <el-card class="about-card" shadow="hover">
+      <template #header>
+        <div class="about-header">
+          <h1 class="about-title">
+            PyWxDump
+            <el-button 
+              type="primary" 
+              link 
+              @click="check_update"
+              class="update-btn"
+            >
+              <el-icon><Refresh /></el-icon>
+              检查更新
+            </el-button>
+          </h1>
+        </div>
+      </template>
 
-    <Markdown :source="source" style="background-color: #d2d2fa;"/>
+      <div class="about-content">
+        <el-skeleton :rows="10" animated v-if="loading" />
+        <Markdown 
+          v-else 
+          :source="source" 
+          class="markdown-content"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script setup lang="ts">
 import Markdown from 'vue3-markdown-it';
 import http from '@/utils/axios.js';
-import {type Action, ElMessage, ElMessageBox} from "element-plus";
-import {onMounted, ref} from "vue";
+import { type Action, ElMessage, ElMessageBox } from "element-plus";
+import { onMounted, ref } from "vue";
+import { Refresh } from '@element-plus/icons-vue'
+
+const loading = ref(true);
+const source = ref("# 加载中");
 
 const check_update = async () => {
   try {
-
+    loading.value = true;
     const body_data = await http.post('/api/rs/check_update');
     const latest_version = body_data.latest_version;
     const msg = body_data.msg;
     const url = body_data.latest_url;
     const showtext = `${msg}：${latest_version} \n ${url || ''}`;
 
-    ElMessageBox.alert(showtext, 'info', {
+    ElMessageBox.alert(showtext, '更新信息', {
       confirmButtonText: '确认',
       callback: (action: Action) => {
         ElMessage({
           type: 'info',
-          message: `action: ${action}`,
+          message: `操作: ${action}`,
         })
       },
     })
   } catch (error) {
-    // console.error('Error fetching data:', error);
-    return [];
+    ElMessage.error('检查更新失败');
+  } finally {
+    loading.value = false;
   }
 }
 
-const source = ref("# 加载中")
-
 const get_readme_md = async () => {
   try {
-
+    loading.value = true;
     const body_data = await http.post('/api/rs/get_readme');
     source.value = body_data;
   } catch (error) {
-    // console.error('Error fetching data:', error);
-    return [];
+    ElMessage.error('获取文档失败');
+    source.value = "# 获取文档失败，请稍后重试";
+  } finally {
+    loading.value = false;
   }
 }
 
 onMounted(() => {
-  get_readme_md()
+  get_readme_md();
 })
+</script>
 
+<style scoped>
+.about-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
 
-</script>
+.about-card {
+  width: 90%;
+  max-width: 1200px;
+  border-radius: 12px;
+  margin-bottom: 20px;
+}
+
+.about-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.about-title {
+  font-size: 24px;
+  color: #303133;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.update-btn {
+  font-size: 14px;
+}
+
+.about-content {
+  padding: 20px 0;
+}
+
+.markdown-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+:deep(.markdown-content h1) {
+  font-size: 24px;
+  color: #303133;
+  margin-bottom: 20px;
+}
+
+:deep(.markdown-content h2) {
+  font-size: 20px;
+  color: #409EFF;
+  margin: 16px 0;
+}
 
-<style>
-.about {
-  background-color: #d2d2fa;
-  height: 100%;
+:deep(.markdown-content p) {
+  line-height: 1.6;
+  color: #606266;
+  margin-bottom: 16px;
+}
+
+:deep(.markdown-content code) {
+  background-color: #f5f7fa;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: #409EFF;
+}
+
+:deep(.markdown-content pre) {
+  background-color: #f5f7fa;
+  padding: 16px;
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+@media screen and (max-width: 768px) {
+  .about-card {
+    width: 95%;
+  }
+  
+  .about-title {
+    font-size: 20px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/other/HelpView.vue b/src/views/other/HelpView.vue
index 6c3c648..a2963bd 100644
--- a/src/views/other/HelpView.vue
+++ b/src/views/other/HelpView.vue
@@ -1,33 +1,134 @@
 <template>
-  <div class="about">
-    <h1 id="-center-pywxdump-center-" style="text-align: center">
-      PyWxDump UserGuide & FAQ
-    </h1>
-<br><br><br><br><br><br>
-    <!--    <Markdown :source="source" />-->
-    <h2 style="text-align: center">
-      <a href="https://github.com/xaoyaoo/PyWxDump/blob/master/doc/UserGuide.md" target="_blank">使用教程</a>
-      <br>
-      <a href="https://github.com/xaoyaoo/PyWxDump/blob/master/doc/FAQ.md" target="_blank">常见问题</a>
-      <br>
-      <a href="https://github.com/xaoyaoo/PyWxDump/blob/master/doc/CE%E8%8E%B7%E5%8F%96%E5%9F%BA%E5%9D%80.md"
-         target="_blank">CE获取基址</a>
-      <br>
-      <a href="https://github.com/xaoyaoo/PyWxDump/blob/master/doc/wx%E6%95%B0%E6%8D%AE%E5%BA%93%E7%AE%80%E8%BF%B0.md"
-         target="_blank">wx数据库简述</a>
-      <br>
-      <a href="https://github.com/xaoyaoo/PyWxDump/blob/master/doc/MAC%E6%95%B0%E6%8D%AE%E5%BA%93%E8%A7%A3%E5%AF%86.md"
-         target="_blank">MAC数据库解密</a>
-    </h2>
+  <div class="help-container">
+    <el-card class="help-card" shadow="hover">
+      <div class="help-content">
+        <h1 class="help-title">
+          PyWxDump 使用指南 & 常见问题
+        </h1>
+        
+        <div class="doc-links">
+          <el-card 
+            v-for="(link, index) in docLinks" 
+            :key="index"
+            class="doc-card"
+            shadow="hover"
+            @click="openLink(link.url)"
+          >
+            <div class="doc-item">
+              <el-icon class="doc-icon"><Document /></el-icon>
+              <span class="doc-text">{{ link.text }}</span>
+            </div>
+          </el-card>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import Markdown from 'vue3-markdown-it';
+import { Document } from '@element-plus/icons-vue'
 
-const source = "";
+const docLinks = [
+  {
+    text: '使用教程',
+    url: 'https://github.com/xaoyaoo/PyWxDump/blob/master/doc/UserGuide.md'
+  },
+  {
+    text: '常见问题',
+    url: 'https://github.com/xaoyaoo/PyWxDump/blob/master/doc/FAQ.md'
+  },
+  {
+    text: 'CE获取基址',
+    url: 'https://github.com/xaoyaoo/PyWxDump/blob/master/doc/CE%E8%8E%B7%E5%8F%96%E5%9F%BA%E5%9D%80.md'
+  },
+  {
+    text: 'wx数据库简述',
+    url: 'https://github.com/xaoyaoo/PyWxDump/blob/master/doc/wx%E6%95%B0%E6%8D%AE%E5%BA%93%E7%AE%80%E8%BF%B0.md'
+  },
+  {
+    text: 'MAC数据库解密',
+    url: 'https://github.com/xaoyaoo/PyWxDump/blob/master/doc/MAC%E6%95%B0%E6%8D%AE%E5%BA%93%E8%A7%A3%E5%AF%86.md'
+  }
+]
+
+const openLink = (url: string) => {
+  window.open(url, '_blank')
+}
 </script>
 
-<style>
+<style scoped>
+.help-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.help-card {
+  width: 80%;
+  max-width: 800px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+}
+
+.help-content {
+  padding: 40px 20px;
+}
+
+.help-title {
+  text-align: center;
+  color: #303133;
+  font-size: 28px;
+  margin-bottom: 40px;
+}
+
+.doc-links {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.doc-card {
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-radius: 8px;
+}
+
+.doc-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.doc-item {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+}
+
+.doc-icon {
+  font-size: 24px;
+  color: #409EFF;
+  margin-right: 12px;
+}
+
+.doc-text {
+  font-size: 16px;
+  color: #303133;
+}
 
+@media screen and (max-width: 768px) {
+  .help-card {
+    width: 95%;
+  }
+  
+  .help-title {
+    font-size: 24px;
+  }
+  
+  .doc-links {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/other/SettingView.vue b/src/views/other/SettingView.vue
index 70f66e9..38b81ea 100644
--- a/src/views/other/SettingView.vue
+++ b/src/views/other/SettingView.vue
@@ -1,53 +1,262 @@
 <script setup lang="ts">
-import DbInitView from "@/views/DbInitView.vue";
-import {ref} from "vue";
+import { Setting, DataLine, Timer } from '@element-plus/icons-vue'
 import DbInitComponent from "@/components/utils/DbInitComponent.vue";
+import { ref } from "vue";
 
-const setting_selected = ref("")
+const setting_selected = ref("db_init")
 
-const MeneSelect = (val: any) => {
+const MeneSelect = (val: string) => {
   setting_selected.value = val
 }
-
 </script>
 
 <template>
-  <div class="common-layout" style="height: 100vh;width: 100%;background-color: #F7F7F7;">
-    <el-container>
-      <el-header style="height: 35px; max-height: 35px; width: 100%;">
-        <h2 style="text-align: center">欢迎使用<a
-            href="https://github.com/xaoyaoo/PyWxDump.git">PyWxDump</a>聊天记录查看工具!
-          <span style="font-size: 14px">(如需提前体验更多功能请开通超级vip)</span>
-        </h2>
-      </el-header>
-      <el-container style="height: calc(100vh - 35px);width: 100%;">
-
-        <el-aside width="200px" style="height: 100%;">
-          <el-menu style="height: 100%;background-color: #F7F7F7;color:#262626;"
-                   default-active="2"
-                   class="el-menu-vertical-demo"
-                   @select="MeneSelect"
-          >
-            <el-menu-item index="-1" disabled>
-              <span style="color: #043bea">设置</span>
-            </el-menu-item>
-            <el-menu-item index="db_init">
-              <span>初始化设置</span>
-            </el-menu-item>
-            <el-menu-item index="3">
-              <span></span>
-            </el-menu-item>
-          </el-menu>
-        </el-aside>
-
-        <el-main style="height: 100%;max-height: 100%;width: 100%;margin: 0;padding: 0;">
-          <db-init-component v-if="setting_selected=='db_init'"></db-init-component>
-        </el-main>
-      </el-container>
+  <div class="setting-container">
+    <el-container class="setting-layout">
+      <el-aside width="240px" class="setting-aside">
+        <el-menu :default-active="setting_selected" class="setting-menu" @select="MeneSelect">
+
+          <el-menu-item index="db_init">
+            <el-icon>
+              <DataLine />
+            </el-icon>
+            <span>初始化设置</span>
+          </el-menu-item>
+
+          <el-menu-item index="title">
+            <el-icon>
+              <Setting />
+            </el-icon>
+            <span>设置中心</span>
+          </el-menu-item>
+
+          <!-- <el-menu-item index="coming_soon" disabled>
+            <el-icon>
+              <Timer />
+            </el-icon>
+            <span>更多功能即将上线</span>
+          </el-menu-item> -->
+        </el-menu>
+      </el-aside>
+
+      <el-main class="setting-main">
+        <el-card class="setting-card" shadow="hover">
+          <template #header>
+            <div class="setting-header">
+              <h2 class="setting-title">
+                欢迎使用
+                <a href="https://github.com/xaoyaoo/PyWxDump.git" class="project-link">
+                  PyWxDump
+                </a>
+                聊天记录查看工具
+              </h2>
+              <div class="setting-subtitle">
+                <el-tag type="info" effect="plain" size="small">
+                  如需提前体验更多功能请开通超级vip
+                </el-tag>
+              </div>
+            </div>
+          </template>
+
+          <transition name="fade" mode="out-in">
+            <db-init-component v-if="setting_selected === 'db_init'" />
+            <div v-else class="coming-soon">
+              <el-card class="coming-soon-card" shadow="hover">
+                <div class="coming-soon-content">
+                  <el-icon class="coming-soon-icon">
+                    <Timer />
+                  </el-icon>
+                  <h1 class="coming-soon-title">更多功能即将上线</h1>
+                  <p class="coming-soon-text">我们正在努力开发更多精彩功能，敬请期待！</p>
+                  <!-- <div class="coming-soon-features">
+                    <el-tag type="info" effect="plain" class="feature-tag">新功能 1</el-tag>
+                    <el-tag type="info" effect="plain" class="feature-tag">新功能 2</el-tag>
+                    <el-tag type="info" effect="plain" class="feature-tag">新功能 3</el-tag>
+                  </div> -->
+                </div>
+              </el-card>
+            </div>
+          </transition>
+        </el-card>
+      </el-main>
     </el-container>
   </div>
 </template>
 
 <style scoped>
+.setting-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
+}
+
+.setting-layout {
+  height: 100vh;
+}
+
+.setting-aside {
+  background-color: #fff;
+  border-right: 1px solid #ebeef5;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.setting-menu {
+  height: 100%;
+  border-right: none;
+}
+
+.setting-main {
+  padding: 20px;
+  overflow-y: auto;
+}
 
+.setting-card {
+  border-radius: 12px;
+  /* min-height: calc(100vh - 40px); */
+}
+
+.setting-header {
+  text-align: center;
+  padding: 20px 0;
+}
+
+.setting-title {
+  font-size: 24px;
+  color: #303133;
+  margin-bottom: 16px;
+}
+
+.project-link {
+  color: #409EFF;
+  text-decoration: none;
+  font-weight: bold;
+  transition: color 0.3s ease;
+}
+
+.project-link:hover {
+  color: #66b1ff;
+  text-decoration: underline;
+}
+
+.setting-subtitle {
+  margin-top: 12px;
+}
+
+:deep(.el-menu-item.is-disabled) {
+  opacity: 1;
+  cursor: default;
+}
+
+:deep(.el-menu-item [class^="el-icon-"]) {
+  margin-right: 8px;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.coming-soon {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+.coming-soon-card {
+  width: 100%;
+  max-width: 600px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
+  border: none;
+}
+
+.coming-soon-content {
+  padding: 40px;
+  text-align: center;
+}
+
+.coming-soon-icon {
+  font-size: 64px;
+  color: #409EFF;
+  margin-bottom: 24px;
+  animation: pulse 2s infinite;
+}
+
+.coming-soon-title {
+  font-size: 28px;
+  color: #303133;
+  margin-bottom: 16px;
+  font-weight: bold;
+}
+
+.coming-soon-text {
+  font-size: 16px;
+  color: #606266;
+  margin-bottom: 32px;
+  line-height: 1.6;
+}
+
+.coming-soon-features {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.feature-tag {
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 20px;
+  transition: all 0.3s ease;
+}
+
+.feature-tag:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .setting-aside {
+    width: 100% !important;
+    height: auto !important;
+  }
+
+  .setting-layout {
+    flex-direction: column;
+  }
+
+  .setting-main {
+    padding: 10px;
+  }
+
+  .coming-soon-content {
+    padding: 24px;
+  }
+  
+  .coming-soon-title {
+    font-size: 24px;
+  }
+  
+  .coming-soon-icon {
+    font-size: 48px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/tools/BiasView.vue b/src/views/tools/BiasView.vue
index 2cbbe4c..9314f1f 100644
--- a/src/views/tools/BiasView.vue
+++ b/src/views/tools/BiasView.vue
@@ -1,22 +1,24 @@
 <script setup lang="ts">
 import {ref} from "vue";
 import http from '@/utils/axios.js';
+import { ElMessage } from 'element-plus';
 
 const mobile = ref<string>('');
 const name = ref<string>('');
 const account = ref<string>('');
 const key = ref<string>('');
 const wxdbPath = ref<string>('');
-
-const result = ref<string>(''); // 结果
+const result = ref<string>('');
+const loading = ref<boolean>(false);
 
 const decrypt = async () => {
   try {
-    // key与wxdbPath二选一
     if (key.value === '' && wxdbPath.value === '') {
-      result.value = 'key与wxdbPath必须填写一个';
+      ElMessage.warning('key与wxdbPath必须填写一个');
       return;
     }
+    
+    loading.value = true;
     result.value = await http.post('/api/ls/biasaddr', {
       mobile: mobile.value,
       name: name.value,
@@ -28,48 +30,141 @@ const decrypt = async () => {
   } catch (error) {
     result.value = 'Error fetching data: \n' + error;
     console.error('Error fetching data:', error);
-    return [];
+    ElMessage.error('获取数据失败');
+  } finally {
+    loading.value = false;
   }
-
 };
 </script>
 
 <template>
-  <div style="background-color: #d2d2fa; height: 100vh; display: grid; place-items: center; ">
-    <div style="background-color: #fff; width: 70%; height: 70%; border-radius: 10px; padding: 20px; overflow: auto;">
-      <div style="display: flex; justify-content: space-between; align-items: center;">
-        <div style="font-size: 20px; font-weight: bold;">基址偏移</div>
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <!--          <el-button style="margin-right: 10px;" @click="exportData">导出</el-button>-->
+  <div class="bias-container">
+    <el-card class="bias-card">
+      <template #header>
+        <div class="card-header">
+          <span class="title">基址偏移工具</span>
         </div>
-      </div>
-      <div style="margin-top: 20px;">
-        <label>手机号: </label>
-        <el-input placeholder="请输入手机号" v-model="mobile" style="width: 80%;"></el-input>
-        <br>
-        <label>昵称: </label>
-        <el-input placeholder="请输入昵称" v-model="name" style="width: 80%;"></el-input>
-        <br>
-        <label>微信账号: </label>
-        <el-input placeholder="请输入微信号" v-model="account" style="width: 80%;"></el-input>
-        <br>
-        <label>密钥（key）: </label>
-        <el-input placeholder="请输入密钥（key）（可选）" v-model="key" style="width: 80%;"></el-input>
-        <br>
-        <label>微信数据库路径: </label>
-        <el-input placeholder="请输入微信数据库路径（可选）" v-model="wxdbPath" style="width: 75%;"></el-input>
-        <br>
-        <el-button style="margin-top: 10px;width: 50%;" type="success" @click="decrypt">偏移</el-button>
-        <!--    分割线    -->
-        <el-divider></el-divider>
-        <!--    分割线    -->
-        <el-input type="textarea" :rows="10" readonly placeholder="输出结果" v-model="result"
-                  style="width: 100%;color: #00bd7e;"></el-input>
-      </div>
-    </div>
+      </template>
+      
+      <el-form label-position="top" class="bias-form">
+        <el-form-item label="手机号">
+          <el-input 
+            v-model="mobile" 
+            placeholder="请输入手机号"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item label="昵称">
+          <el-input 
+            v-model="name" 
+            placeholder="请输入昵称"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item label="微信账号">
+          <el-input 
+            v-model="account" 
+            placeholder="请输入微信号"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item label="密钥（key）">
+          <el-input 
+            v-model="key" 
+            placeholder="请输入密钥（key）（可选）"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item label="微信数据库路径">
+          <el-input 
+            v-model="wxdbPath" 
+            placeholder="请输入微信数据库路径（可选）"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item>
+          <el-button 
+            type="primary" 
+            @click="decrypt"
+            :loading="loading"
+            class="submit-btn"
+          >
+            开始偏移
+          </el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-divider content-position="center">结果展示</el-divider>
+      
+      <el-input
+        type="textarea"
+        :rows="8"
+        v-model="result"
+        readonly
+        placeholder="偏移结果将在这里显示"
+        class="result-textarea"
+      />
+    </el-card>
   </div>
 </template>
 
 <style scoped>
+.bias-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: top;
+}
+
+.bias-card {
+  width: 90%;
+  /* max-width: 800px; */
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.bias-form {
+  padding: 20px 0;
+}
+
+.submit-btn {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.result-textarea {
+  font-family: monospace;
+  color: #409EFF;
+}
+
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px #dcdfe6;
+}
+
+:deep(.el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px #c0c4cc;
+}
 
+:deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px #409EFF;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/tools/DecryptView.vue b/src/views/tools/DecryptView.vue
index 607357f..58a7ca3 100644
--- a/src/views/tools/DecryptView.vue
+++ b/src/views/tools/DecryptView.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import {ref} from "vue";
 import http from '@/utils/axios.js';
+import { ElMessage } from 'element-plus';
 
 const wxdbPath = ref<string>('');
 const key = ref<string>('');
 const outPath = ref<string>('');
 const decryptResult = ref<string>('');
+const loading = ref<boolean>(false);
 
 const decrypt = async () => {
   try {
+    loading.value = true;
     decryptResult.value = await http.post('/api/ls/decrypt', {
       wxdbPath: wxdbPath.value,
       key: key.value,
@@ -17,44 +20,125 @@ const decrypt = async () => {
   } catch (error) {
     decryptResult.value = 'Error fetching data: \n' + error;
     console.error('Error fetching data:', error);
-    return [];
+    ElMessage.error('解密失败');
+  } finally {
+    loading.value = false;
   }
-
 };
-
 </script>
 
 <template>
-  <div style="background-color: #d2d2fa; height: 100vh; display: grid; place-items: center; ">
-    <div style="background-color: #fff; width: 70%; height: 70%; border-radius: 10px; padding: 20px; overflow: auto;">
-      <div style="display: flex; justify-content: space-between; align-items: center;">
-        <div style="font-size: 20px; font-weight: bold;">解密-微信数据库</div>
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <!--          <el-button style="margin-right: 10px;" @click="exportData">导出</el-button>-->
+  <div class="decrypt-container">
+    <el-card class="decrypt-card">
+      <template #header>
+        <div class="card-header">
+          <span class="title">微信数据库解密工具</span>
         </div>
-      </div>
-      <div style="margin-top: 20px;">
-        <label>密钥（key）: </label>
-        <el-input placeholder="请输入密钥（key）" v-model="key" style="width: 82%;"></el-input>
-        <br>
-        <label>微信数据库路径: </label>
-        <el-input placeholder="请输入微信数据库路径" v-model="wxdbPath" style="width: 80%;"></el-input>
-        <br>
-        <label>解密后输出文件夹路径: </label>
-        <el-input placeholder="请输入解密后输出文件夹路径" v-model="outPath" style="width: 75%;"></el-input>
-        <br>
-
-        <el-button style="margin-top: 10px;width: 50%;" type="success" @click="decrypt">解密</el-button>
-        <!--    分割线    -->
-        <el-divider></el-divider>
-        <!--    分割线    -->
-        <el-input type="textarea" :rows="10" readonly placeholder="解密后数据库路径" v-model="decryptResult"
-                  style="width: 100%;"></el-input>
-      </div>
-    </div>
+      </template>
+      
+      <el-form label-position="top" class="decrypt-form">
+        <el-form-item label="密钥（key）">
+          <el-input 
+            v-model="key" 
+            placeholder="请输入密钥（key）"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item label="微信数据库路径">
+          <el-input 
+            v-model="wxdbPath" 
+            placeholder="请输入微信数据库路径"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item label="解密后输出文件夹路径">
+          <el-input 
+            v-model="outPath" 
+            placeholder="请输入解密后输出文件夹路径"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item>
+          <el-button 
+            type="primary" 
+            @click="decrypt"
+            :loading="loading"
+            class="submit-btn"
+          >
+            开始解密
+          </el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-divider content-position="center">解密结果</el-divider>
+      
+      <el-input
+        type="textarea"
+        :rows="8"
+        v-model="decryptResult"
+        readonly
+        placeholder="解密结果将在这里显示"
+        class="result-textarea"
+      />
+    </el-card>
   </div>
 </template>
 
 <style scoped>
+.decrypt-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: top;
+}
+
+.decrypt-card {
+  width: 90%;
+  /* max-width: 800px; */
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.decrypt-form {
+  padding: 20px 0;
+}
+
+.submit-btn {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.result-textarea {
+  font-family: monospace;
+  color: #409EFF;
+}
+
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px #dcdfe6;
+}
+
+:deep(.el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px #c0c4cc;
+}
 
+:deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px #409EFF;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/tools/MergeView.vue b/src/views/tools/MergeView.vue
index 44e87c7..3f7dddf 100644
--- a/src/views/tools/MergeView.vue
+++ b/src/views/tools/MergeView.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import {ref} from "vue";
 import http from '@/utils/axios.js';
+import { ElMessage } from 'element-plus';
 
 const dbPath = ref<string>('');
 const outPath = ref<string>('');
 const Result = ref<string>('');
+const loading = ref<boolean>(false);
 
 const decrypt = async () => {
   try {
+    loading.value = true;
     Result.value = await http.post('/api/ls/merge', {
       dbPath: dbPath.value,
       outPath: outPath.value
@@ -15,39 +18,117 @@ const decrypt = async () => {
   } catch (error) {
     Result.value = 'Error fetching data: \n' + error;
     console.error('Error fetching data:', error);
-    return [];
+    ElMessage.error('合并失败');
+  } finally {
+    loading.value = false;
   }
-
 };
 </script>
 
 <template>
-  <div style="background-color: #d2d2fa; height: 100vh; display: grid; place-items: center; ">
-    <div style="background-color: #fff; width: 70%; height: 70%; border-radius: 10px; padding: 20px; overflow: auto;">
-      <div style="display: flex; justify-content: space-between; align-items: center;">
-        <div style="font-size: 20px; font-weight: bold;">合并-微信数据库</div>
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <!--          <el-button style="margin-right: 10px;" @click="exportData">导出</el-button>-->
+  <div class="merge-container">
+    <el-card class="merge-card">
+      <template #header>
+        <div class="card-header">
+          <span class="title">微信数据库合并工具</span>
         </div>
-      </div>
-      <div style="margin-top: 20px;">
-        <label>数据库路径: </label>
-        <el-input placeholder="数据库路径（文件夹，并且确保文件夹下的db文件已经解密）：" v-model="dbPath" style="width: 80%;"></el-input>
-        <br>
-        <label>微信数据库路径: </label>
-        <el-input placeholder="输出合并后的数据库路径" v-model="outPath" style="width: 80%;"></el-input>
-        <br>
-        <el-button style="margin-top: 10px;width: 50%;" type="success" @click="decrypt">合并</el-button>
-        <!--    分割线    -->
-        <el-divider></el-divider>
-        <!--    分割线    -->
-        <el-input type="textarea" :rows="10" readonly placeholder="合并后数据库路径" v-model="Result"
-                  style="width: 100%;"></el-input>
-      </div>
-    </div>
+      </template>
+      
+      <el-form label-position="top" class="merge-form">
+        <el-form-item label="数据库路径">
+          <el-input 
+            v-model="dbPath" 
+            placeholder="数据库路径（文件夹，并且确保文件夹下的db文件已经解密）"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item label="输出路径">
+          <el-input 
+            v-model="outPath" 
+            placeholder="输出合并后的数据库路径"
+            clearable
+          />
+        </el-form-item>
+        
+        <el-form-item>
+          <el-button 
+            type="primary" 
+            @click="decrypt"
+            :loading="loading"
+            class="submit-btn"
+          >
+            开始合并
+          </el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-divider content-position="center">合并结果</el-divider>
+      
+      <el-input
+        type="textarea"
+        :rows="8"
+        v-model="Result"
+        readonly
+        placeholder="合并结果将在这里显示"
+        class="result-textarea"
+      />
+    </el-card>
   </div>
 </template>
 
 <style scoped>
+.merge-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: top;
+}
+
+.merge-card {
+  width: 90%;
+  /* max-width: 800px; */
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.merge-form {
+  padding: 20px 0;
+}
+
+.submit-btn {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.result-textarea {
+  font-family: monospace;
+  color: #409EFF;
+}
+
+:deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px #dcdfe6;
+}
+
+:deep(.el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px #c0c4cc;
+}
 
+:deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px #409EFF;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/tools/WxinfoView.vue b/src/views/tools/WxinfoView.vue
index 2e93589..15f2e89 100644
--- a/src/views/tools/WxinfoView.vue
+++ b/src/views/tools/WxinfoView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import {defineComponent, reactive, ref, onMounted, toRefs} from 'vue'
-import {ElNotification, ElTable, ElTableColumn} from 'element-plus'
+import { defineComponent, reactive, ref, onMounted, toRefs } from 'vue'
+import { ElNotification, ElTable, ElTableColumn } from 'element-plus'
 import http from '@/utils/axios.js';
 
 interface wxinfo {
@@ -46,8 +46,8 @@ const downloadCSV = (csvContent: string, fileName: string) => {
   const blob = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), csvContent], { type: 'text/csv;charset=utf-8;' });
   const link = document.createElement('a');
 
-  if (navigator.msSaveBlob) {
-    navigator.msSaveBlob(blob, fileName);
+  if ((navigator as any).msSaveBlob) {
+    (navigator as any).msSaveBlob(blob, fileName);
   } else {
     link.href = URL.createObjectURL(blob);
     link.setAttribute('download', fileName);
@@ -64,8 +64,8 @@ const downloadCSV = (csvContent: string, fileName: string) => {
 </script>
 
 <template>
-  <div style="background-color: #d2d2fa; height: 100vh; display: grid; place-items: center; ">
-    <div style="background-color: #fff; width: 90%; height: 80%; border-radius: 10px; padding: 20px; overflow: auto;">
+  <div class="merge-container">
+    <el-card class="merge-card">
       <div style="display: flex; justify-content: space-between; align-items: center;">
         <div style="font-size: 20px; font-weight: bold;">微信信息（已经登录）</div>
         <div style="display: flex; justify-content: space-between; align-items: center;">
@@ -86,10 +86,24 @@ const downloadCSV = (csvContent: string, fileName: string) => {
           <el-table-column prop="key" label="密钥(key)"></el-table-column>
         </el-table>
       </div>
-    </div>
+    </el-card>
   </div>
 </template>
 
 <style scoped>
+.merge-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: top;
+}
 
+.merge-card {
+  width: 90%;
+  /* max-width: 800px; */
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
 </style>
\ No newline at end of file