美化页面和交互

.gitignore

@@ -31,4 +31,6 @@ coverage
 tsconfig.app.tsbuildinfo
 tsconfig.node.tsbuildinfo
 
-/public/data/
+/public/data/
+package-lock.json
+.cursor/rules/fe.mdc

README.md

@@ -1 +1,15 @@
-## 这是[PyWxDump](https://github.com/xaoyaoo/PyWxDump)的Web版，用于在浏览器中查看微信聊天记录。
+# PyWxDump-UI
+
+这是[PyWxDump](https://github.com/xaoyaoo/PyWxDump)的Web版，用于在浏览器中查看微信聊天记录。
+
+开发者朋友可以基于此项目二次开发自己的UI界面
+
+## 启动UI
+
+```
+npm i
+
+npm run dev
+```
+
+启动后在http://localhost:8080访问

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",

src/App.vue

@@ -14,21 +14,21 @@ 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);
 
 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,15 +126,14 @@ const handleClose = (key: string, keyPath: string[]) => {
       </el-aside>
 
       <el-main>
-        <RouterView/>
+        <RouterView />
       </el-main>
 
     </el-container>
   </div>
 </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>

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>