diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 00000000..b6593853
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,48 @@
+<template>
+    <!-- 根元素，应用的主容器 -->
+    <div id="app">
+        <!-- 使用fade过渡效果来切换路由视图 -->
+        <transition name="fade">
+            <router-view /> <!-- 路由出口，用于渲染匹配的组件 -->
+        </transition>
+    </div>
+</template>
+
+<style>
+/* 样式定义 */
+
+/* 定义小图片的样式 */
+img.image-sm {
+    max-width: 80px; /* 最大宽度 */
+    max-height: 80px; /* 最大高度 */
+}
+
+/* 为el-col内的el-select和el-date-editor设置宽度 */
+.el-col .el-select,
+.el-col .el-date-editor {
+    width: 100%; /* 宽度设置为父容器的100% */
+}
+
+/* 设置表格展开行的样式 */
+.demo-table-expand {
+    font-size: 0; /* 将字体大小设为0，常用于清除子元素的默认间隙 */
+}
+
+/* 设置表格展开行内label的样式 */
+.demo-table-expand label {
+    width: 90px; /* 宽度 */
+    color: #99a9bf; /* 文字颜色 */
+}
+
+/* 设置el-form-item在表格展开行中的样式 */
+.demo-table-expand .el-form-item {
+    margin-right: 0; /* 右侧外边距 */
+    margin-bottom: 0; /* 底部外边距 */
+    width: 50%; /* 宽度设置为父容器的50% */
+}
+
+/* 定义警告文本的样式 */
+.text-warning {
+    color: #e6a23c; /* 文字颜色 */
+}
+</style>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 00000000..905c110b
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,68 @@
+// 导入Vue框架
+import Vue from 'vue';
+
+// 导入根组件
+import App from './App.vue';
+
+// 导入Vue Router实例，用于页面路由管理
+import router from './router';
+
+// 导入Vuex状态管理实例
+import store from './store';
+
+// 导入vue-cookie插件，用于处理cookie
+import VueCookie from 'vue-cookie';
+
+// 导入Element UI组件库
+import ElementUI from 'element-ui';
+
+// 导入moment.js库，用于日期和时间处理
+import moment from 'moment';
+
+// 导入Element UI的CSS样式
+import 'element-ui/lib/theme-chalk/index.css';
+
+// 导入全局CSS样式
+import './assets/css/common.css';
+
+// 导入全局SCSS样式
+import './assets/scss/index.scss';
+
+// 导入自定义的httpRequest工具，基于axios的封装（注意：这里注释的api链接可能不准确，因为httpRequest的具体实现未在代码中给出）
+import httpRequest from '@/utils/httpRequest';
+
+// 导入自定义的权限验证工具
+import { isAuth } from '@/utils';
+
+// 导入vue-clipboard2插件，用于复制文本到剪贴板
+import VueClipboard from 'vue-clipboard2';
+
+// 使用Element UI组件库
+Vue.use(ElementUI);
+
+// 使用vue-clipboard2插件
+Vue.use(VueClipboard);
+
+// 使用vue-cookie插件
+Vue.use(VueCookie);
+
+// 禁止Vue在启动时生成生产提示
+Vue.config.productionTip = false;
+
+// 挂载全局属性和方法
+// 全局ajax请求方法
+Vue.prototype.$http = httpRequest;
+// 全局权限验证方法
+Vue.prototype.isAuth = isAuth;
+
+// 设置moment.js的语言环境为中文
+moment.locale('zh-cn');
+// 将moment挂载到Vue原型上，作为全局的时间处理方法
+Vue.prototype.$moment = moment;
+
+// 创建Vue实例，并挂载到#app元素上
+new Vue({
+    router,       // 注入路由，使得我们可以通过this.$router访问路由实例
+    store,        // 注入store，使得我们可以通过this.$store访问状态管理实例
+    render: h => h(App) // 渲染App组件
+}).$mount('#app'); // 挂载到DOM上的#app元素
\ No newline at end of file
diff --git a/src/views/main-content.vue b/src/views/main-content.vue
new file mode 100644
index 00000000..050dc5e3
--- /dev/null
+++ b/src/views/main-content.vue
@@ -0,0 +1,114 @@
+<template>
+    <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
+        <!-- 如果当前路由元数据中包含isTab，则显示标签页组件 -->
+        <el-tabs v-if="$route.meta.isTab" v-model="mainTabsActiveName" :closable="true" 
+                 @tab-click="selectedTabHandle" @tab-remove="removeTabHandle">
+            <!-- 标签页操作菜单，包括关闭当前、关闭其他、关闭全部和刷新 -->
+            <el-dropdown class="site-tabs__tools" :show-timeout="0">
+                <i class="el-icon-arrow-down el-icon--right"></i>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
+                    <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
+                    <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
+                    <el-dropdown-item @click.native="refresh()">刷新当前标签页</el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
+            <!-- 循环渲染标签页 -->
+            <el-tab-pane v-for="item in mainTabs" :key="item.name" :label="item.title" :name="item.name">
+                <el-card :body-style="siteContentViewHeight">
+                    <!-- 如果标签页类型为iframe，则显示iframe -->
+                    <iframe v-if="item.type === 'iframe'" :src="item.iframeUrl" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
+                    <!-- 否则，使用keep-alive缓存组件，并显示当前激活的标签页内容 -->
+                    <keep-alive v-else>
+                        <router-view v-if="item.name === mainTabsActiveName" />
+                    </keep-alive>
+                </el-card>
+            </el-tab-pane>
+        </el-tabs>
+        <!-- 如果当前路由不包含isTab，则显示单个页面 -->
+        <el-card v-else :body-style="siteContentViewHeight">
+            <keep-alive>
+                <router-view />
+            </keep-alive>
+        </el-card>
+    </main>
+</template>
+
+<script>
+import { isURL } from '@/utils/validate' // 导入URL验证工具
+export default {
+    inject: ['refresh'], // 注入全局的刷新方法
+    data() {
+        return {
+            // 组件的本地状态（当前为空）
+        }
+    },
+    computed: {
+        // 计算属性，获取文档客户端高度
+        documentClientHeight: {
+            get() { return this.$store.state.common.documentClientHeight }
+        },
+        // 计算属性，获取和设置当前激活的菜单名称
+        menuActiveName: {
+            get() { return this.$store.state.common.menuActiveName },
+            set(val) { this.$store.commit('common/updateMenuActiveName', val) }
+        },
+        // 计算属性，获取和设置主标签页列表
+        mainTabs: {
+            get() { return this.$store.state.common.mainTabs },
+            set(val) { this.$store.commit('common/updateMainTabs', val) }
+        },
+        // 计算属性，获取和设置当前激活的标签页名称
+        mainTabsActiveName: {
+            get() { return this.$store.state.common.mainTabsActiveName },
+            set(val) { this.$store.commit('common/updateMainTabsActiveName', val) }
+        },
+        // 计算属性，根据条件计算内容视图的高度
+        siteContentViewHeight() {
+            var height = this.documentClientHeight - 50 - 30 - 2
+            if (this.$route.meta.isTab) {
+                height -= 40
+                // 如果当前路由的meta中包含iframeUrl且为有效URL，则设置固定高度；否则设置最小高度
+                return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
+            }
+            return { minHeight: height + 'px' }
+        }
+    },
+    methods: {
+        // 选中标签页的处理方法
+        selectedTabHandle(tab) {
+            tab = this.mainTabs.filter(item => item.name === tab.name)
+            if (tab.length >= 1) {
+                this.$router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params })
+            }
+        },
+        // 删除标签页的处理方法
+        removeTabHandle(tabName) {
+            this.$store.commit('common/removeTab', tabName)
+        },
+        // 关闭当前标签页的处理方法
+        tabsCloseCurrentHandle() {
+            this.removeTabHandle(this.mainTabsActiveName)
+        },
+        // 关闭其他标签页的处理方法
+        tabsCloseOtherHandle() {
+            this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
+        },
+        // 关闭全部标签页的处理方法
+        tabsCloseAllHandle() {
+            this.mainTabs = []
+            this.menuActiveName = ''
+            this.$router.push({ name: 'home' })
+        },
+        // 刷新当前标签页的处理方法（注意：此方法在methods中未定义，但在template中被调用，可能是个遗漏或错误）
+        // 应为 tabsRefreshCurrentHandle 而不是 refresh() 直接调用，或者需要在methods中定义tabsRefreshCurrentHandle
+        // tabsRefreshCurrentHandle() {
+        //     var tab = this.$route
+        //     this.removeTabHandle(tab.name)
+        //     this.$nextTick(() => {
+        //         this.$router.push({ name: tab.name, query: tab.query, params: tab.params })
+        //     })
+        // }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/main-navbar-update-password.vue b/src/views/main-navbar-update-password.vue
new file mode 100644
index 00000000..8cf0b223
--- /dev/null
+++ b/src/views/main-navbar-update-password.vue
@@ -0,0 +1,129 @@
+<template>
+    <!-- 使用Element UI的对话框组件 -->
+    <el-dialog title="修改密码" :visible.sync="visible" :append-to-body="true">
+        <!-- 表单用于输入原密码和新密码 -->
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+            <!-- 显示用户名，不可编辑 -->
+            <el-form-item label="账号">
+                <span>{{ userName }}</span>
+            </el-form-item>
+            <!-- 输入原密码 -->
+            <el-form-item label="原密码" prop="password">
+                <el-input type="password" v-model="dataForm.password"></el-input>
+            </el-form-item>
+            <!-- 输入新密码 -->
+            <el-form-item label="新密码" prop="newPassword">
+                <el-input type="password" v-model="dataForm.newPassword"></el-input>
+            </el-form-item>
+            <!-- 确认新密码 -->
+            <el-form-item label="确认密码" prop="confirmPassword">
+                <el-input type="password" v-model="dataForm.confirmPassword"></el-input>
+            </el-form-item>
+        </el-form>
+        <!-- 对话框底部按钮 -->
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="visible = false">取消</el-button>
+            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+import { clearLoginInfo } from '@/utils' // 引入清除登录信息的工具函数
+export default {
+    data() {
+        // 验证确认密码与新密码是否一致的函数
+        var validateConfirmPassword = (rule, value, callback) => {
+            if (this.dataForm.newPassword !== value) {
+                callback(new Error('确认密码与新密码不一致'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            // 对话框显示状态
+            visible: false,
+            // 表单数据
+            dataForm: {
+                password: '', // 原密码
+                newPassword: '', // 新密码
+                confirmPassword: '' // 确认密码
+            },
+            // 表单验证规则
+            dataRule: {
+                password: [
+                    { required: true, message: '原密码不能为空', trigger: 'blur' }
+                ],
+                newPassword: [
+                    { required: true, message: '新密码不能为空', trigger: 'blur' }
+                ],
+                confirmPassword: [
+                    { required: true, message: '确认密码不能为空', trigger: 'blur' },
+                    { validator: validateConfirmPassword, trigger: 'blur' } // 自定义验证规则
+                ]
+            }
+        }
+    },
+    computed: {
+        // 计算属性，用于获取当前用户名
+        userName: {
+            get() { return this.$store.state.user.name }
+        },
+        // 计算属性，用于获取和设置主标签页
+        mainTabs: {
+            get() { return this.$store.state.common.mainTabs },
+            set(val) { this.$store.commit('common/updateMainTabs', val) }
+        }
+    },
+    methods: {
+        // 初始化方法，显示对话框并重置表单
+        init() {
+            this.visible = true
+            this.$nextTick(() => {
+                this.$refs['dataForm'].resetFields()
+            })
+        },
+        // 表单提交方法
+        dataFormSubmit() {
+            // 验证表单
+            this.$refs['dataForm'].validate((valid) => {
+                if (valid) {
+                    // 发送请求修改密码
+                    this.$http({
+                        url: this.$http.adornUrl('/sys/user/password'), // 请求地址
+                        method: 'post', // 请求方法
+                        data: this.$http.adornData({ // 发送的数据
+                            'password': this.dataForm.password,
+                            'newPassword': this.dataForm.newPassword
+                        })
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) {
+                            // 密码修改成功
+                            this.$message({
+                                message: '操作成功',
+                                type: 'success',
+                                duration: 1500,
+                                onClose: () => {
+                                    // 关闭对话框
+                                    this.visible = false
+                                    this.$nextTick(() => {
+                                        // 清空主标签页
+                                        this.mainTabs = []
+                                        // 清除登录信息
+                                        clearLoginInfo()
+                                        // 重定向到登录页面
+                                        this.$router.replace({ name: 'login' })
+                                    })
+                                }
+                            })
+                        } else {
+                            // 密码修改失败，显示错误信息
+                            this.$message.error(data.msg)
+                        }
+                    })
+                }
+            })
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/main-navbar.vue b/src/views/main-navbar.vue
new file mode 100644
index 00000000..6d67fd9a
--- /dev/null
+++ b/src/views/main-navbar.vue
@@ -0,0 +1,120 @@
+<template>
+    <!-- 导航栏组件，类名根据navbarLayoutType动态设置 -->
+    <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
+        <!-- 导航栏头部，包含品牌标识 -->
+        <div class="site-navbar__header">
+            <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
+                <!-- 大尺寸品牌标识，点击返回首页 -->
+                <a class="site-navbar__brand-lg" href="javascript:;">微信管理系统</a>
+                <!-- 小尺寸品牌标识，点击无效果 -->
+                <a class="site-navbar__brand-mini" href="javascript:;">W</a>
+            </h1>
+        </div>
+        <!-- 导航栏主体，包含菜单 -->
+        <div class="site-navbar__body clearfix">
+            <!-- 左侧菜单，包含侧边栏折叠/展开按钮 -->
+            <el-menu class="site-navbar__menu" mode="horizontal">
+                <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
+                    <!-- 侧边栏折叠/展开图标，根据sidebarFold动态切换 -->
+                    <i :class="sidebarFold?'el-icon-s-unfold':'el-icon-s-fold'"></i>
+                </el-menu-item>
+            </el-menu>
+            <!-- 右侧菜单，包含设置、微信账号选择、用户信息等 -->
+            <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
+                <!-- 设置菜单项 -->
+                <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
+                    <template slot="title">
+                        <i class="el-icon-setting"></i>
+                    </template>
+                </el-menu-item>
+                <!-- 微信账号选择器，需要权限验证 -->
+                <el-menu-item index="2" v-if="isAuth('wx:wxaccount:list')">
+                    <template slot="title">
+                        <wx-account-selector></wx-account-selector>
+                    </template>
+                </el-menu-item>
+                <!-- 用户信息菜单项，包含下拉菜单 -->
+                <el-menu-item class="site-navbar__avatar" index="3">
+                    <el-dropdown :show-timeout="0" placement="bottom">
+                        <span class="el-dropdown-link">
+                            {{ userName }}
+                        </span>
+                        <!-- 下拉菜单内容 -->
+                        <el-dropdown-menu slot="dropdown">
+                            <!-- 修改密码菜单项 -->
+                            <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
+                            <!-- 退出菜单项 -->
+                            <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </el-menu-item>
+            </el-menu>
+        </div>
+        <!-- 修改密码弹窗组件，根据updatePassowrdVisible显示/隐藏 -->
+        <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
+    </nav>
+</template>
+
+<script>
+import UpdatePassword from './main-navbar-update-password' // 引入修改密码弹窗组件
+import WxAccountSelector from '@/components/wx-account-selector' // 引入微信账号选择器组件
+import { clearLoginInfo } from '@/utils' // 引入清除登录信息的工具函数
+export default {
+    data() {
+        return {
+            updatePassowrdVisible: false // 控制修改密码弹窗的显示/隐藏
+        }
+    },
+    components: {
+        UpdatePassword, // 注册修改密码弹窗组件
+        WxAccountSelector // 注册微信账号选择器组件
+    },
+    computed: {
+        // 动态获取navbarLayoutType、sidebarFold、mainTabs、userName的值
+        navbarLayoutType: {
+            get() { return this.$store.state.common.navbarLayoutType }
+        },
+        sidebarFold: {
+            get() { return this.$store.state.common.sidebarFold },
+            set(val) { this.$store.commit('common/updateSidebarFold', val) }
+        },
+        mainTabs: {
+            get() { return this.$store.state.common.mainTabs },
+            set(val) { this.$store.commit('common/updateMainTabs', val) }
+        },
+        userName: {
+            get() { return this.$store.state.user.name }
+        }
+    },
+    methods: {
+        // 显示修改密码弹窗，并初始化
+        updatePasswordHandle() {
+            this.updatePassowrdVisible = true
+            this.$nextTick(() => {
+                this.$refs.updatePassowrd.init()
+            })
+        },
+        // 处理退出操作
+        logoutHandle() {
+            this.$confirm(`确定进行[退出]操作?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                // 发送退出请求
+                this.$http({
+                    url: this.$http.adornUrl('/sys/logout'),
+                    method: 'post',
+                    data: this.$http.adornData()
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        // 清除登录信息并重定向到登录页面
+                        clearLoginInfo()
+                        this.$router.push({ name: 'login' })
+                    }
+                })
+            }).catch(() => { })
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/main-sidebar-sub-menu.vue b/src/views/main-sidebar-sub-menu.vue
new file mode 100644
index 00000000..9c5cf325
--- /dev/null
+++ b/src/views/main-sidebar-sub-menu.vue
@@ -0,0 +1,38 @@
+<script>
+// 导入SubMenu组件，用于递归渲染子菜单
+import SubMenu from './main-sidebar-sub-menu'
+
+export default {
+    name: 'sub-menu', // 组件名称
+    props: {
+        menu: {
+            type: Object, // 传入一个对象作为菜单数据
+            required: true // 该属性为必传
+        },
+        dynamicMenuRoutes: {
+            type: Array, // 传入一个数组作为动态路由数据
+            required: true // 该属性为必传
+        }
+    },
+    components: {
+        SubMenu // 注册SubMenu组件
+    },
+    computed: {
+        sidebarLayoutSkin() {
+            // 计算属性，从Vuex store中获取sidebarLayoutSkin的值
+            return this.$store.state.common.sidebarLayoutSkin
+        }
+    },
+    methods: {
+        // 通过menuId与动态路由进行匹配，并跳转到指定路由
+        gotoRouteHandle(menu) {
+            // 从dynamicMenuRoutes数组中筛选出menuId与传入menu对象的menuId相匹配的路由
+            var route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)
+            // 如果找到了匹配的路由，则使用$router.push方法跳转到该路由
+            if (route.length >= 1) {
+                this.$router.push({ name: route[0].name })
+            }
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/main-sidebar.vue b/src/views/main-sidebar.vue
new file mode 100644
index 00000000..9e8a962e
--- /dev/null
+++ b/src/views/main-sidebar.vue
@@ -0,0 +1,100 @@
+<template>
+    <!-- 侧边栏容器，根据sidebarLayoutSkin动态设置类名 -->
+    <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
+        <div class="site-sidebar__inner">
+            <!-- 侧边栏菜单，默认激活项为menuActiveName或'home'，可折叠，无折叠动画 -->
+            <el-menu :default-active="menuActiveName || 'home'" :collapse="sidebarFold" :collapseTransition="false" class="site-sidebar__menu">
+                <!-- 首页菜单项，点击后跳转到'home'路由 -->
+                <el-menu-item index="home" @click="$router.push({ name: 'home' })">
+                    <i class="site-sidebar__menu-icon el-icon-s-home"></i>
+                    <!-- 菜单项标题，使用slot="title"指定，但在这里直接写了，Element UI内部会处理 -->
+                    <span>首页</span>
+                </el-menu-item>
+                <!-- 遍历menuList，为每个菜单项渲染一个sub-menu组件 -->
+                <sub-menu v-for="menu in menuList" :key="menu.menuId" :menu="menu" :dynamicMenuRoutes="dynamicMenuRoutes"></sub-menu>
+            </el-menu>
+        </div>
+    </aside>
+</template>
+
+<script>
+import SubMenu from './main-sidebar-sub-menu' // 导入SubMenu组件
+import { isURL } from '@/utils/validate' // 导入isURL验证函数
+
+export default {
+    data() {
+        return {
+            dynamicMenuRoutes: [] // 动态路由列表，用于存储从后端获取的路由信息
+        }
+    },
+    components: {
+        SubMenu // 注册SubMenu组件
+    },
+    computed: {
+        // 通过Vuex store获取和设置侧边栏相关状态
+        sidebarLayoutSkin: {
+            get() { return this.$store.state.common.sidebarLayoutSkin } // 获取侧边栏皮肤
+        },
+        sidebarFold: {
+            get() { return this.$store.state.common.sidebarFold } // 获取侧边栏折叠状态
+        },
+        menuList: {
+            get() { return this.$store.state.common.menuList }, // 获取菜单列表
+            set(val) { this.$store.commit('common/updateMenuList', val) } // 更新菜单列表
+        },
+        menuActiveName: {
+            get() { return this.$store.state.common.menuActiveName }, // 获取当前激活的菜单项名称
+            set(val) { this.$store.commit('common/updateMenuActiveName', val) } // 更新当前激活的菜单项名称
+        },
+        mainTabs: {
+            get() { return this.$store.state.common.mainTabs }, // 获取主标签页列表
+            set(val) { this.$store.commit('common/updateMainTabs', val) } // 更新主标签页列表
+        },
+        mainTabsActiveName: {
+            get() { return this.$store.state.common.mainTabsActiveName }, // 获取当前激活的标签页名称
+            set(val) { this.$store.commit('common/updateMainTabsActiveName', val) } // 更新当前激活的标签页名称
+        }
+    },
+    watch: {
+        // 监听路由变化，执行routeHandle方法
+        $route: 'routeHandle'
+    },
+    created() {
+        // 组件创建时，从sessionStorage获取菜单列表和动态路由列表，并初始化routeHandle
+        this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
+        this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
+        this.routeHandle(this.$route)
+    },
+    methods: {
+        // 路由处理方法
+        routeHandle(route) {
+            if (route.meta.isTab) {
+                // 如果路由标记为tab，则处理tab的选中、添加等操作
+                var tab = this.mainTabs.filter(item => item.name === route.name)[0]
+                if (!tab) {
+                    // 如果tab不存在，则尝试从动态路由列表中获取路由信息，并创建新的tab
+                    if (route.meta.isDynamic) {
+                        route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
+                        if (!route) {
+                            return console.error('未能找到可用标签页!')
+                        }
+                    }
+                    tab = {
+                        menuId: route.meta.menuId || route.name,
+                        name: route.name,
+                        title: route.meta.title,
+                        type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module', // 根据iframeUrl判断tab类型
+                        iframeUrl: route.meta.iframeUrl || '',
+                        params: route.params,
+                        query: route.query
+                    }
+                    this.mainTabs = this.mainTabs.concat(tab) // 添加新tab到mainTabs列表
+                }
+                // 更新当前激活的菜单项名称和标签页名称
+                this.menuActiveName = tab.menuId + ''
+                this.mainTabsActiveName = tab.name
+            }
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/main.vue b/src/views/main.vue
new file mode 100644
index 00000000..3f6a31f4
--- /dev/null
+++ b/src/views/main.vue
@@ -0,0 +1,109 @@
+<template>
+    <!-- 站点包装器，根据sidebarFold状态添加类名，同时绑定全屏加载指示器 -->
+    <div class="site-wrapper" :class="{ 'site-sidebar--fold': sidebarFold }" 
+         v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
+        <!-- 当loading为false时，显示以下内容 -->
+        <template v-if="!loading">
+            <!-- 导航栏组件 -->
+            <main-navbar />
+            <!-- 侧边栏组件 -->
+            <main-sidebar />
+            <!-- 站点内容包装器，动态设置最小高度 -->
+            <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
+                <!-- 如果内容不需要刷新，则显示主要内容组件 -->
+                <main-content v-if="!$store.state.common.contentIsNeedRefresh" />
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+// 导入子组件
+import MainNavbar from './main-navbar'
+import MainSidebar from './main-sidebar'
+import MainContent from './main-content'
+
+export default {
+    // 提供一个名为refresh的方法，用于触发内容的刷新
+    provide() {
+        return {
+            refresh() {
+                // 设置内容需要刷新
+                this.$store.commit('common/updateContentIsNeedRefresh', true)
+                // 在下一个DOM更新循环之后，取消内容需要刷新的状态
+                this.$nextTick(() => {
+                    this.$store.commit('common/updateContentIsNeedRefresh', false)
+                })
+            }
+        }
+    },
+    // 组件的本地状态
+    data() {
+        return {
+            loading: true // 初始加载状态
+        }
+    },
+    // 注册的子组件
+    components: {
+        MainNavbar,
+        MainSidebar,
+        MainContent
+    },
+    // 计算属性，用于从Vuex store中获取和设置数据
+    computed: {
+        documentClientHeight: {
+            get() { return this.$store.state.common.documentClientHeight },
+            set(val) { this.$store.commit('common/updateDocumentClientHeight', val) }
+        },
+        sidebarFold: {
+            get() { return this.$store.state.common.sidebarFold }
+        },
+        userId: {
+            get() { return this.$store.state.user.id },
+            set(val) { this.$store.commit('user/updateId', val) }
+        },
+        userName: {
+            get() { return this.$store.state.user.name },
+            set(val) { this.$store.commit('user/updateName', val) }
+        }
+    },
+    // 组件创建时执行的方法
+    created() {
+        this.getUserInfo() // 获取用户信息
+    },
+    // 组件挂载后执行的方法
+    mounted() {
+        this.resetDocumentClientHeight() // 重置窗口可视高度
+    },
+    // 组件的方法
+    methods: {
+        // 重置窗口可视高度的方法
+        resetDocumentClientHeight() {
+            // 初始设置
+            this.documentClientHeight = document.documentElement['clientHeight']
+            // 绑定窗口大小改变事件，以动态更新高度
+            window.onresize = () => {
+                this.documentClientHeight = document.documentElement['clientHeight']
+            }
+        },
+        // 获取当前管理员信息的方法
+        getUserInfo() {
+            // 发送HTTP GET请求获取用户信息
+            this.$http({
+                url: this.$http.adornUrl('/sys/user/info'),
+                method: 'get',
+                params: this.$http.adornParams()
+            }).then(({ data }) => {
+                // 如果请求成功且返回码为200
+                if (data && data.code === 200) {
+                    // 更新加载状态
+                    this.loading = false
+                    // 更新用户ID和用户名
+                    this.userId = data.user.userId
+                    this.userName = data.user.username
+                }
+            })
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-menu.vue b/src/views/modules/wx/wx-menu.vue
new file mode 100644
index 00000000..2d3a00bd
--- /dev/null
+++ b/src/views/modules/wx/wx-menu.vue
@@ -0,0 +1,178 @@
+<template>
+    <div>
+        <div id="app-menu">
+            <!-- 预览窗 -->
+            <div class="weixin-preview">
+                <div class="weixin-bd">
+                    <div class="weixin-header">公众号菜单</div>
+                    <ul class="weixin-menu" id="weixin-menu">
+                        <!-- 遍历主菜单按钮 -->
+                        <li v-for="(btn, i) in menu.buttons" :key="i" class="menu-item" 
+                            :class="{'current': selectedMenuIndex === i && selectedMenuLevel == 1}" 
+                            @click="selectMenu(i)">
+                            <div class="menu-item-title">
+                                <span>{{ btn.name }}</span>
+                            </div>
+                            <ul class="weixin-sub-menu">
+                                <!-- 遍历子菜单按钮 -->
+                                <li v-for="(sub, i2) in btn.subButtons" :key="i2" class="menu-sub-item" 
+                                    :class="{'current': selectedMenuIndex === i && selectedSubMenuIndex === i2 && selectedMenuLevel == 2, 'on-drag-over': onDragOverMenu === (i + '_' + i2)}" 
+                                    @click.stop="selectSubMenu(i, i2)" draggable="true" 
+                                    @dragstart="selectSubMenu(i, i2)" @dragover.prevent="onDragOverMenu = (i + '_' + i2)" @drop="onDrop(i, i2)">
+                                    <div class="menu-item-title">
+                                        <span>{{ sub.name }}</span>
+                                    </div>
+                                </li>
+                                <!-- 如果子菜单数量少于5个，显示添加按钮 -->
+                                <li v-if="btn.subButtons.length < 5" class="menu-sub-item" 
+                                    :class="{'on-drag-over': onDragOverMenu === (i + '_' + btn.subButtons.length)}" 
+                                    @click.stop="addMenu(2, i)" @dragover.prevent="onDragOverMenu = (i + '_' + btn.subButtons.length)" @drop="onDrop(i, btn.subButtons.length)">
+                                    <div class="menu-item-title">
+                                        <i class="el-icon-plus"></i>
+                                    </div>
+                                </li>
+                                <!-- 菜单展开/收起图标 -->
+                                <i class="menu-arrow arrow_out"></i>
+                                <i class="menu-arrow arrow_in"></i>
+                            </ul>
+                        </li>
+                        <!-- 如果主菜单数量少于3个，显示添加按钮 -->
+                        <li class="menu-item" v-if="menu.buttons.length < 3" @click="addMenu(1)"> 
+                            <i class="el-icon-plus"></i>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <!-- 菜单编辑器 -->
+            <div class="weixin-menu-detail" v-if="selectedMenuLevel > 0">
+                <wx-menu-button-editor :button="selectedButton" :selectedMenuLevel="selectedMenuLevel" @delMenu="delMenu"></wx-menu-button-editor>
+            </div>
+        </div>
+        <!-- 发布和清空菜单的按钮组 -->
+        <div class="weixin-btn-group" v-if="isAuth('wx:menu:save')" @click="updateWxMenu">
+            <el-button type="success" icon="el-icon-upload">发布</el-button>
+            <el-button type="warning" icon="el-icon-delete" @click="delMenuAll">清空</el-button>
+            <!-- 注意：这里可能是一个小错误，因为delMenu方法通常用于删除选中的菜单项，而不是清空所有菜单 -->
+            <!-- 如果要清空所有菜单，可能需要一个单独的方法，比如delMenuAll -->
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    components: {
+        wxMenuButtonEditor: () => import('./wx-menu-button-editor')
+    },
+    data() {
+        return {
+            menu: { 'buttons': [] },//当前菜单
+            selectedMenuIndex: '',//当前选中菜单索引
+            selectedSubMenuIndex: '',//当前选中子菜单索引
+            selectedMenuLevel: 0,//选中菜单级别
+            selectedButton: '',//选中的菜单按钮
+            onDragOverMenu:'' //当前鼠标拖动到的位置
+        }
+    },
+    mounted() {
+         // 获取当前微信菜单配置
+        this.getWxMenu();
+    },
+    methods: {
+        getWxMenu() {
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxMenu/getMenu')
+            }).then(({ data }) => {
+                if (data.code == 200) {
+                    this.menu = data.data.menu;
+                } else {
+                    this.$message({
+                        type: 'error',
+                        message: data.msg
+                    });
+                }
+
+            });
+        },
+        //选中主菜单
+        selectMenu(i) {
+            this.selectedMenuLevel = 1
+            this.selectedSubMenuIndex = ''
+            this.selectedMenuIndex = i
+            this.selectedButton = this.menu.buttons[i]
+        },
+        //选中子菜单
+        selectSubMenu(i,i2) {
+            this.selectedMenuLevel = 2
+            this.selectedMenuIndex = i
+            this.selectedSubMenuIndex = i2
+            this.selectedButton = this.menu.buttons[i].subButtons[i2]
+        },
+       // 添加菜单项（主菜单或子菜单）
+        addMenu(level,i) {
+            if (level == 1 && this.menu.buttons.length < 3) {
+                this.menu.buttons.push({
+                    "type": "view",
+                    "name": "菜单名称",
+                    "subButtons": [],
+                    "url": ""
+                })
+                this.selectMenu(this.menu.buttons.length - 1)
+            }
+            if (level == 2 && this.menu.buttons[i].subButtons.length < 5) {
+                this.menu.buttons[i].subButtons.push({
+                    "type": "view",
+                    "name": "子菜单名称",
+                    "url": ""
+                })
+                this.selectSubMenu(i,this.menu.buttons[i].subButtons.length - 1)
+            }
+        },
+        // 删除选中的菜单项（主菜单或子菜单）
+        delMenu() {
+            if (this.selectedMenuLevel == 1 && confirm('删除后菜单下设置的内容将被删除')) {
+                this.menu.buttons.splice(this.selectedMenuIndex, 1);
+                this.unSelectMenu()
+            } else if (this.selectedMenuLevel == 2) {
+                this.menu.buttons[this.selectedMenuIndex].subButtons.splice(this.selectedSubMenuIndex, 1);
+                this.unSelectMenu()
+            }
+        },
+        unSelectMenu(){// 取消选中任何菜单项
+            this.selectedMenuLevel = 0
+            this.selectedMenuIndex = ''
+            this.selectedSubMenuIndex = ''
+            this.selectedButton = ''
+        },
+        // 更新微信菜单配置
+        updateWxMenu() {
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxMenu/updateMenu'),
+                data: this.menu,
+                method: 'post'
+            }).then(({ data }) => {
+                if (data.code == 200) {
+                    this.$message.success('操作成功')
+                } else {
+                    this.$message.error(data.msg);
+                }
+
+            });
+        },
+        onDrop(i,i2){// 拖拽放置菜单项（用于排序）
+            this.onDragOverMenu='';
+            if(i==this.selectedMenuIndex && i2==this.selectedSubMenuIndex) //拖拽到了原位置
+                return 
+            if(i!=this.selectedMenuIndex && this.menu.buttons[i].subButtons.length>=5){
+                this.$message.error('目标组已满');
+                return
+            }
+            this.menu.buttons[i].subButtons.splice(i2,0,this.selectedButton)
+            let delSubIndex = this.selectedSubMenuIndex
+            if(i==this.selectedMenuIndex && i2<this.selectedSubMenuIndex) 
+                delSubIndex++
+            this.menu.buttons[this.selectedMenuIndex].subButtons.splice(delSubIndex, 1);
+            this.unSelectMenu()
+        }
+    }
+}
+</script>
+<style src="@/assets/css/wx-menu.css"></style>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-msg-reply.vue b/src/views/modules/wx/wx-msg-reply.vue
new file mode 100644
index 00000000..cd93fa38
--- /dev/null
+++ b/src/views/modules/wx/wx-msg-reply.vue
@@ -0,0 +1,107 @@
+<template>
+    <!-- 消息回复对话框 -->
+    <el-dialog title="消息回复" :close-on-click-modal="false" :visible.sync="visible">
+        <!-- 表单区域 -->
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm">
+            <!-- 表单项：回复内容 -->
+            <el-form-item prop="replyContent">
+                <!-- 文本区域输入框，用于输入回复内容 -->
+                <el-input v-model="dataForm.replyContent" type="textarea" :rows="5" placeholder="回复内容" maxlength="600" show-word-limit :autosize="{ minRows: 5, maxRows: 30 }" autocomplete></el-input>
+                <!-- 当回复类型为文本时显示，点击插入链接 -->
+                <el-button type="text" v-show="'text'==dataForm.replyType" @click="addLink">插入链接</el-button>
+            </el-form-item>
+        </el-form>
+        <!-- 对话框底部操作区域 -->
+        <span slot="footer" class="dialog-footer">
+            <!-- 取消按钮，点击关闭对话框 -->
+            <el-button @click="visible = false">取消</el-button>
+            <!-- 发送按钮，根据uploading状态显示不同文本，并控制是否禁用 -->
+            <el-button type="success" @click="dataFormSubmit()" :disabled="uploading">{{uploading ? '发送中...' : '发送'}}</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            // 控制对话框显示状态
+            visible: false,
+            // 控制发送按钮状态及文本
+            uploading: false,
+            // 表单数据模型
+            dataForm: {
+                // 用户唯一标识
+                openid: '',
+                // 回复类型，默认为文本
+                replyType: 'text',
+                // 回复内容
+                replyContent: ''
+            },
+            // 表单验证规则
+            dataRule: {
+                // 回复内容必填验证
+                replyContent: [
+                    { required: true, message: "回复内容不能为空", trigger: "blur" }
+                ]
+            }
+        }
+    },
+    // 局部注册组件（但在此组件模板中未使用）
+    components: {
+        WxMsgPreview: () => import('@/components/wx-msg-preview')
+    },
+    methods: {
+        // 初始化方法，接收openid并显示对话框
+        init(openid) {
+            if (!openid) throw '参数异常'; // 校验openid是否存在
+            this.dataForm.openid = openid; // 设置openid
+            this.visible = true; // 显示对话框
+        },
+        // 表单提交方法
+        dataFormSubmit() {
+            if (this.uploading) return; // 如果正在上传，则直接返回
+            this.uploading = true; // 设置上传状态为true
+            this.$refs['dataForm'].validate((valid) => { // 验证表单
+                if (valid) { // 如果验证通过
+                    // 发送请求（注意：这里假设存在一个自定义的$http方法）
+                    this.$http({
+                        url: this.$http.adornUrl(`/manage/wxMsg/reply`), // 请求地址（可能经过某种处理）
+                        method: 'post', // 请求方法
+                        data: this.$http.adornData(this.dataForm) // 请求数据（可能经过某种处理）
+                    }).then(({ data }) => { // 请求成功回调
+                        if (data && data.code === 200) { // 如果请求成功且返回码为200
+                            // 显示成功消息，并关闭对话框，清空回复内容
+                            this.$message({
+                                message: '回复成功',
+                                type: 'success',
+                                duration: 1500,
+                                onClose: () => {
+                                    this.visible = false;
+                                }
+                            });
+                            this.$emit("success", { ...this.dataForm }); // 触发success事件，传递表单数据
+                            this.dataForm.replyContent = ''; // 清空回复内容
+                        } else { // 如果请求失败
+                            // 显示错误消息
+                            this.$message.error(data.msg);
+                        }
+                        this.uploading = false; // 无论成功或失败，都重置上传状态
+                    });
+                }
+            });
+        },
+        // 插入链接方法，向回复内容中添加链接文本（注意：链接地址未动态设置）
+        addLink() {
+            this.dataForm.replyContent += '<a href="链接地址">链接文字</a>';
+        }
+    }
+}
+</script>
+
+<style scoped>
+/* 样式部分，但.msg-container类在模板中未使用 */
+.msg-container {
+    background: #eee;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-msg.vue b/src/views/modules/wx/wx-msg.vue
new file mode 100644
index 00000000..f4e2fe3a
--- /dev/null
+++ b/src/views/modules/wx/wx-msg.vue
@@ -0,0 +1,208 @@
+
+<template>
+    <div class="mod-config">
+        <!-- 搜索表单 -->
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <el-form-item>
+                <!-- 时间选择器 -->
+                <el-select v-model="dataForm.startTime" placeholder="时间">
+                    <el-option v-for="(name,key) in timeSelections" :key="key" :value="name" :label="key"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <!-- 消息类型选择器 -->
+                <el-select v-model="dataForm.msgTypes" placeholder="消息类型">
+                    <el-option value="" label="不限类型"></el-option>
+                    <el-option value="text,image,voice,shortvideo,video,news,music,location,link" label="消息"></el-option>
+                    <el-option value="event,transfer_customer_service" label="事件"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <!-- 查询按钮 -->
+                <el-button @click="getDataList()">查询</el-button>
+            </el-form-item>
+        </el-form>
+        <!-- 消息回复提示 -->
+        <div class="text-gray">
+            24小时内消息可回复。此后台展示消息有一分钟左右延迟，如需畅聊请使用
+            <a href="https://mpkf.weixin.qq.com/" target="_blank">公众平台客服</a>
+        </div>
+        <!-- 消息列表，使用v-loading显示加载状态 -->
+        <div v-loading="dataListLoading">
+            <div class="msg-item" v-for="(msg,index) in  dataList" :key="index">
+                <!-- 用户头像 -->
+                <div class="avatar"><el-avatar shape="square" :size="60" :src="getUserInfo(msg.openid).headimgurl"></el-avatar></div>
+                <!-- 消息内容 -->
+                <div class="item-content">
+                    <div class="flex justify-between margin-bottom">
+                        <div class="text-cut">{{getUserInfo(msg.openid).nickname || '--'}}</div>
+                        <div>{{$moment(msg.createTime).calendar()}}</div>
+                        <div class="reply-btn">
+                            <!-- 回复按钮，如果消息在24小时内可点击 -->
+                            <div v-if="canReply(msg.createTime)" @click="replyHandle(msg.openid)" class="el-icon-s-promotion">回复</div>
+                        </div>
+                    </div>
+                    <!-- 消息预览组件 -->
+                    <wx-msg-preview :msg="msg" singleLine></wx-msg-preview>
+                </div>
+            </div>
+        </div>
+        <!-- 分页组件 -->
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+        <!-- 弹窗, 消息回复 -->
+        <wx-msg-reply ref="wxMsgReply" @success="onReplyed"></wx-msg-reply>
+    </div>
+</template>
+ 
+<script>
+const TIME_FORMAT = 'YYYY/MM/DD hh:mm:ss'
+export default {
+    data() {
+        return {
+            // 时间选项
+            timeSelections:{
+                '近24小时':this.$moment().subtract(1, 'days').format(TIME_FORMAT),
+                '近3天': this.$moment().subtract(3, 'days').format(TIME_FORMAT),
+                '近7天': this.$moment().subtract(7, 'days').format(TIME_FORMAT),
+                '近30天': this.$moment().subtract(30, 'days').format(TIME_FORMAT),
+            },
+            // 表单数据
+            dataForm: {
+                startTime: this.$moment().subtract(1, 'days').format(TIME_FORMAT),
+                msgTypes: ''
+            },
+            // 消息列表
+            dataList: [],
+            // 用户数据列表
+            userDataList:[],
+            // 分页参数
+            pageIndex: 1,
+            pageSize: 20,
+            totalCount: 0,
+            // 加载状态
+            dataListLoading: false,
+            // 选中的消息（用于多选操作，但当前代码未使用）
+            dataListSelections: []
+        }
+    },
+    components: {
+        // 异步加载组件
+        WxMsgReply:()=>import('./wx-msg-reply'),
+        WxMsgPreview:()=>import('@/components/wx-msg-preview')
+    },
+    // 激活时获取数据列表
+    activated() {
+        this.getDataList()
+    },
+    methods: {
+        // 获取数据列表
+        getDataList() {
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxMsg/list'),
+                method: 'get',
+                params: this.$http.adornParams({
+                    'page': this.pageIndex,
+                    'limit': this.pageSize,
+                    'msgTypes': this.dataForm.msgTypes,
+                    'startTime':this.dataForm.startTime,
+                    'sidx': 'create_time',
+                    'order': 'desc'
+                })
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.dataList = data.page.list
+                    this.totalCount = data.page.totalCount
+                    this.refreshUserList(this.dataList)
+                } else {
+                    this.dataList = []
+                    this.totalCount = 0
+                }
+                this.dataListLoading = false
+            })
+        },
+        // 根据消息列表刷新用户数据列表
+        refreshUserList(msgList){
+            let openidList=msgList.map(msg=>msg.openid).filter(openid=>!this.userDataList.some(u=>u.openid==openid))
+            if(!openidList.length)return
+            openidList = Array.from(new Set(openidList))//去重
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxUser/listByIds'),
+                method: 'post',
+                data: this.$http.adornParams(openidList,false)
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.userDataList = this.userDataList.concat(data.data)
+                }
+            })
+        },
+        // 根据openid获取用户信息
+        getUserInfo(openid){
+            return this.userDataList.find(u=>u.openid==openid) || {nickname:'--',headimgurl:''}
+        },
+        // 判断消息是否在24小时内可回复
+        canReply(time){
+            return new Date(time).getTime()>new Date().getTime()-24*60*60*1000
+        },
+        // 每页显示数量改变时的处理
+        sizeChangeHandle(val) {
+            this.pageSize = val
+            this.pageIndex = 1
+            this.getDataList()
+        },
+        // 当前页码改变时的处理
+        currentChangeHandle(val) {
+            this.pageIndex = val
+            this.getDataList()
+        },
+        // 多选操作（当前代码未使用此方法）
+        selectionChangeHandle(val) {
+            this.dataListSelections = val
+        },
+        // 回复消息
+        replyHandle(openid) {
+            this.$nextTick(() => {
+                this.$refs.wxMsgReply.init(openid)
+            })
+        },
+        // 回复成功后的处理
+        onReplyed(replyMsg){
+            this.dataList.unshift({
+                openid : replyMsg.openid,
+                msgType : replyMsg.replyType,
+                detail : {
+                    content : replyMsg.replyContent
+                },
+                inOut : 1,
+                createTime : new Date()
+            })
+        }
+    }
+}
+</script>
+<style scoped>
+.msg-item{
+    border: 1px solid #DCDFE6;
+    display: flex;
+    justify-content: flex-start;
+    align-items: top;
+    margin-top: 20px;
+    padding: 10px 20px;
+}
+.avatar{
+    flex: 0;
+    display: inline-block;
+    min-width: 60px;
+    margin-right: 20px;
+}
+.item-content{
+    flex: 1;
+    line-height: 20px;
+    max-width: 100%;
+    overflow: hidden;
+}
+.reply-btn{
+    width: 50px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-qrcode-add-or-update.vue b/src/views/modules/wx/wx-qrcode-add-or-update.vue
new file mode 100644
index 00000000..d0732290
--- /dev/null
+++ b/src/views/modules/wx/wx-qrcode-add-or-update.vue
@@ -0,0 +1,108 @@
+<template>
+    <!-- Element UI的对话框组件，根据dataForm.id是否存在来设置标题为“新增”或“修改” -->
+    <el-dialog 
+        :title="!dataForm.id ? '新增' : '修改'" 
+        :close-on-click-modal="false" <!-- 点击遮罩层不关闭对话框 -->
+        :visible.sync="visible"> <!-- 双向绑定控制对话框的显示隐藏 -->
+        
+        <!-- 表单部分，绑定dataForm作为数据模型，dataRule作为验证规则 -->
+        <el-form 
+            :model="dataForm" 
+            :rules="dataRule" 
+            ref="dataForm" 
+            @keyup.enter.native="dataFormSubmit()" <!-- 按下Enter键提交表单 -->
+            label-width="100px">
+            
+            <!-- 表单项：二维码类型 -->
+            <el-form-item label="二维码类型" prop="isTemp">
+                <el-radio v-model="dataForm.isTemp" :label="true">临时</el-radio>
+                <el-radio v-model="dataForm.isTemp" :label="false">永久</el-radio>
+                <div>
+                    <!-- 当不是临时二维码时显示链接 -->
+                    <a class="text-warning" v-show="!dataForm.isTemp" target="_blank" href="https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html">
+                        注意永久二维码上限10万个，且暂时无法删除旧的二维码
+                    </a>
+                </div>
+            </el-form-item>
+
+            <!-- 表单项：场景值 -->
+            <el-form-item label="场景值" prop="sceneStr">
+                <el-input v-model="dataForm.sceneStr" placeholder="任意字符串" maxlength="64"></el-input>
+            </el-form-item>
+
+            <!-- 表单项：失效时间（仅临时二维码显示） -->
+            <el-form-item label="失效时间/秒" prop="expireSeconds" v-if="dataForm.isTemp">
+                <el-input v-model="dataForm.expireSeconds" placeholder="单位：秒，最大2592000（30天）"></el-input>
+                <div>最大30天，当前设置：<span class="text-warning">{{dataForm.expireSeconds/(24*3600)}}天</span></div>
+            </el-form-item>
+        </el-form>
+
+        <!-- 对话框底部按钮 -->
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="visible = false">取消</el-button>
+            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false, // 控制对话框显示隐藏
+            dataForm: {
+                isTemp: true, // 二维码类型：临时
+                sceneStr: '', // 场景值
+                expireSeconds: 2592000 // 失效时间，默认30天
+            },
+            dataRule: {
+                isTemp: [
+                    { required: true, message: '二维码类型不能为空', trigger: 'blur' } // 验证规则
+                ],
+                sceneStr: [
+                    { required: true, message: '场景值ID不能为空', trigger: 'blur' } // 验证规则
+                ],
+                expireSeconds: [
+                    { required: true, message: '该二维码失效时间不能为空', trigger: 'blur' } // 验证规则（仅临时二维码需要）
+                ]
+            }
+        }
+    },
+    methods: {
+        // 初始化方法，传入id用于修改模式
+        init(id) {
+            this.dataForm.id = id || 0 // 设置dataForm的id属性
+            this.visible = true // 显示对话框
+            this.$nextTick(() => {
+                this.$refs['dataForm'].resetFields() // 重置表单
+            })
+        },
+        // 表单提交方法
+        dataFormSubmit() {
+            this.$refs['dataForm'].validate((valid) => {
+                if (valid) { // 表单验证通过
+                    this.$http({ // 发送请求
+                        url: this.$http.adornUrl(`/manage/wxQrCode/createTicket`), // 请求URL
+                        method: 'post', // 请求方法
+                        data: this.$http.adornData(this.dataForm) // 发送的数据
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) { // 请求成功
+                            this.$message({
+                                message: '操作成功',
+                                type: 'success',
+                                duration: 1500,
+                                onClose: () => {
+                                    this.visible = false // 关闭对话框
+                                    this.$emit('refreshDataList') // 通知父组件刷新数据列表
+                                }
+                            })
+                        } else { // 请求失败
+                            this.$message.error(data.msg) // 显示错误信息
+                        }
+                    })
+                }
+            })
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-qrcode.vue b/src/views/modules/wx/wx-qrcode.vue
new file mode 100644
index 00000000..46e2512d
--- /dev/null
+++ b/src/views/modules/wx/wx-qrcode.vue
@@ -0,0 +1,161 @@
+<template>
+    <div class="mod-config">
+        <!-- 内联表单，用于输入查询条件和执行操作 -->
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <el-form-item>
+                <!-- 输入框，用于输入场景值进行查询 -->
+                <el-input v-model="dataForm.sceneStr" placeholder="场景值" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <!-- 查询按钮，触发查询操作 -->
+                <el-button @click="getDataList()">查询</el-button>
+                <!-- 新增按钮，仅当有权限时显示，触发新增操作 -->
+                <el-button v-if="isAuth('wx:wxqrcode:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+                <!-- 批量删除按钮，仅当有权限且至少选中一项时显示 -->
+                <el-button v-if="isAuth('wx:wxqrcode:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+            </el-form-item>
+        </el-form>
+        
+        <!-- 表格，显示数据列表 -->
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+            <el-table-column prop="id" header-align="center" align="center" label="ID"></el-table-column>
+            <el-table-column prop="isTemp" header-align="center" align="center" label="类型">
+                <!-- 根据isTemp的值显示“临时”或“永久” -->
+                <span slot-scope="scope">{{scope.row.isTemp ? '临时' : '永久'}}</span>
+            </el-table-column>
+            <el-table-column prop="sceneStr" header-align="center" align="center" label="场景值"></el-table-column>
+            <el-table-column prop="ticket" header-align="center" align="center" show-overflow-tooltip label="二维码图片">
+                <!-- 点击链接查看二维码图片 -->
+                <a :href="'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='+scope.row.ticket" slot-scope="scope">{{scope.row.ticket}}</a>
+            </el-table-column>
+            <el-table-column prop="url" header-align="center" align="center" show-overflow-tooltip label="解析后的地址">
+                <!-- 点击链接访问解析后的地址 -->
+                <a :href="scope.row.url" slot-scope="scope">{{scope.row.url}}</a>
+            </el-table-column>
+            <el-table-column prop="expireTime" header-align="center" align="center" width="100" label="失效时间"></el-table-column>
+            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+                <!-- 单行删除按钮 -->
+                <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        
+        <!-- 分页组件 -->
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+        
+        <!-- 弹窗组件，用于新增或修改操作 -->
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+</template>
+
+<script>
+import AddOrUpdate from './wx-qrcode-add-or-update'
+
+export default {
+    data() {
+        return {
+            // 表单数据
+            dataForm: {
+                sceneStr: ''
+            },
+            // 数据列表
+            dataList: [],
+            // 当前页码
+            pageIndex: 1,
+            // 每页显示数量
+            pageSize: 10,
+            // 总页数
+            totalPage: 0,
+            // 数据加载状态
+            dataListLoading: false,
+            // 选中项
+            dataListSelections: [],
+            // 新增/修改弹窗显示状态
+            addOrUpdateVisible: false
+        }
+    },
+    components: {
+        AddOrUpdate // 引入新增/修改弹窗组件
+    },
+    activated() {
+        // 激活时获取数据列表
+        this.getDataList()
+    },
+    methods: {
+        // 获取数据列表
+        getDataList() {
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxQrCode/list'), // 请求地址
+                method: 'get',
+                params: this.$http.adornParams({
+                    'page': this.pageIndex,
+                    'limit': this.pageSize,
+                    'sceneStr': this.dataForm.sceneStr,
+                    'sidx': 'id',
+                    'order': 'desc'
+                })
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.dataList = data.page.list // 赋值数据列表
+                    this.totalPage = data.page.totalCount // 赋值总页数
+                } else {
+                    this.dataList = [] // 清空数据列表
+                    this.totalPage = 0 // 清空总页数
+                }
+                this.dataListLoading = false // 结束加载状态
+            })
+        },
+        // 每页数改变时触发
+        sizeChangeHandle(val) {
+            this.pageSize = val // 更新每页显示数量
+            this.pageIndex = 1 // 重置当前页码
+            this.getDataList() // 重新获取数据列表
+        },
+        // 当前页改变时触发
+        currentChangeHandle(val) {
+            this.pageIndex = val // 更新当前页码
+            this.getDataList() // 重新获取数据列表
+        },
+        // 选中项改变时触发
+        selectionChangeHandle(val) {
+            this.dataListSelections = val // 更新选中项
+        },
+        // 新增或修改操作
+        addOrUpdateHandle(id) {
+            this.addOrUpdateVisible = true // 显示弹窗
+            this.$nextTick(() => {
+                this.$refs.addOrUpdate.init(id) // 初始化弹窗（传入id表示修改，不传入表示新增）
+            })
+        },
+        // 删除操作
+        deleteHandle(id) {
+            var ids = id ? [id] : this.dataListSelections.map(item => item.id) // 根据是否传入id决定是删除单条还是批量删除
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?（仅删存档）`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$http({
+                    url: this.$http.adornUrl('/manage/wxQrCode/delete'), // 请求地址
+                    method: 'post',
+                    data: this.$http.adornData(ids, false) // 发送要删除的id
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '操作成功',
+                            type: 'success',
+                            duration: 1500,
+                            onClose: () => this.getDataList() // 操作成功后刷新数据列表
+                        })
+                    } else {
+                        this.$message.error(data.msg) // 操作失败时显示错误消息
+                    }
+                })
+            })
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-user-tagging.vue b/src/views/modules/wx/wx-user-tagging.vue
new file mode 100644
index 00000000..7856db12
--- /dev/null
+++ b/src/views/modules/wx/wx-user-tagging.vue
@@ -0,0 +1,121 @@
+<template>
+    <el-dialog :title="modeDesc[mode]+'用户标签'" :close-on-click-modal="false" :visible.sync="dialogVisible">
+        <!-- 对话框内容开始 -->
+        <div>
+            <!-- 标签选择器，用户可以选择一个标签 -->
+            <el-select v-model="selectedTagid" filterable placeholder="请选择标签" style="width:100%">
+                <!-- 遍历所有可选标签，生成下拉选项 -->
+                <el-option v-for="tagid in tagidsInOption" :key="tagid" :label="getTagName(tagid)" :value="tagid"></el-option>
+            </el-select>
+            <!-- 显示已选择用户的数量 -->
+            <div style="margin-top:20px;">已选择用户数：{{wxUsers.length}}</div>
+        </div>
+        <!-- 对话框底部按钮 -->
+        <span slot="footer" class="dialog-footer">
+            <!-- 关闭按钮 -->
+            <el-button @click="dialogVisible=false">关闭</el-button>
+            <!-- 提交按钮，根据提交状态显示不同文字 -->
+            <el-button type="primary" @click="dataFormSubmit()" :disabled="submitting">{{submitting?'保存中...':'确定'}}</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+    name: 'wx-user-tagging',
+    // 接收外部传入的用户数组
+    props: {
+        wxUsers: Array,
+    },
+    data() {
+        return {
+            // 操作模式：绑定或解绑
+            mode: 'tagging',
+            // 操作模式的描述
+            modeDesc: {
+                'tagging': '绑定',
+                'untagging': '解绑'
+            },
+            // 用户选择的标签ID
+            selectedTagid: '',
+            // 对话框显示状态
+            dialogVisible: false,
+            // 提交状态
+            submitting: false
+        }
+    },
+    // 从Vuex的state中映射数据到组件中
+    computed: mapState({
+        // 获取所有标签
+        wxUserTags: state => state.wxUserTags.tags,
+        // 计算可选标签列表
+        tagidsInOption() {
+            // 获取所有用户的标签ID数组
+            let userTags = this.wxUsers.map(u => u.tagidList || []);
+            // 如果是绑定模式，可选标签为所有标签减去所有用户都有的标签
+            if (this.mode === 'tagging') {
+                let all = this.wxUserTags.map(item => item.id);
+                return all.filter(tagid => !userTags.every(tagsIdArray => tagsIdArray.indexOf(tagid) > -1));
+            } 
+            // 如果是解绑模式，可选标签为所有用户标签的并集
+            else if (this.mode === 'untagging') {
+                let unionSet = new Set();
+                userTags.forEach(tagsIdArray => {
+                    tagsIdArray.forEach(tagid => unionSet.add(tagid));
+                });
+                return Array.from(unionSet);
+            }
+            return [];
+        }
+    }),
+    methods: {
+        // 初始化方法，设置操作模式和显示对话框
+        init(mode) {
+            if (mode === 'tagging' || mode === 'untagging') {
+                this.mode = mode;
+                this.dialogVisible = true;
+            } else {
+                throw ('mode参数有误');
+            }
+        },
+        // 根据标签ID获取标签名称
+        getTagName(tagid) {
+            let tag = this.wxUserTags.find(item => item.id == tagid);
+            return tag ? tag.name : "?";
+        },
+        // 提交表单数据
+        dataFormSubmit() {
+            if (this.submitting) return;
+            if (!this.selectedTagid) {
+                this.$message.error('未选择标签');
+                return;
+            }
+            this.submitting = true;
+            let openidList = this.wxUsers.map(u => u.openid);
+            // 发送请求，执行绑定或解绑操作
+            this.$http({
+                url: this.$http.adornUrl(`/manage/wxUserTags/${this.mode === 'tagging' ? 'batchTagging' : 'batchUnTagging'}`),
+                method: 'post',
+                data: this.$http.adornData({
+                    tagid: this.selectedTagid,
+                    openidList: openidList
+                })
+            }).then(({ data }) => {
+                this.submitting = false;
+                if (data && data.code === 200) {
+                    // 操作成功，关闭对话框并提示用户
+                    this.$message({
+                        message: '操作成功,列表数据需稍后刷新查看',
+                        type: 'success',
+                        onClose: () => this.dialogVisible = false
+                    });
+                } else {
+                    // 操作失败，提示错误信息
+                    this.$message.error(data.msg);
+                }
+            });
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-user.vue b/src/views/modules/wx/wx-user.vue
new file mode 100644
index 00000000..bc81a1d2
--- /dev/null
+++ b/src/views/modules/wx/wx-user.vue
@@ -0,0 +1,250 @@
+<template>
+    <div class="mod-config">
+        <!-- 使用内联表单，绑定数据模型，并在按下Enter键时调用获取数据列表的方法 -->
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <!-- 用户标签选择器 -->
+            <el-form-item>
+                <el-select v-model="dataForm.tagid" filterable clearable placeholder="用户标签">
+                    <!-- 循环遍历wxUserTags数组，生成选项 -->
+                    <el-option v-for="item in wxUserTags" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <!-- 昵称输入框 -->
+            <el-form-item>
+                <el-input v-model="dataForm.nickname" placeholder="昵称" clearable></el-input>
+            </el-form-item>
+            <!-- 城市输入框 -->
+            <el-form-item>
+                <el-input v-model="dataForm.city" placeholder="城市" clearable></el-input>
+            </el-form-item>
+            <!-- 关注场景值输入框 -->
+            <el-form-item>
+                <el-input v-model="dataForm.qrSceneStr" placeholder="关注场景值" clearable></el-input>
+            </el-form-item>
+            <!-- 操作按钮区域 -->
+            <el-form-item>
+                <el-button @click="getDataList()">查询</el-button>
+                <!-- 根据权限显示绑定标签按钮，如果选中的用户数为0则禁用 -->
+                <el-button v-if="isAuth('wx:wxuser:save')" type="primary" @click="$refs.wxUserTagging.init('tagging')" :disabled="dataListSelections.length <= 0">绑定标签</el-button>
+                <!-- 根据权限显示解绑标签按钮，如果选中的用户数为0则禁用 -->
+                <el-button v-if="isAuth('wx:wxuser:save')" type="primary" @click="$refs.wxUserTagging.init('untagging')" :disabled="dataListSelections.length <= 0">解绑标签</el-button>
+                <!-- 根据权限显示批量删除按钮，如果选中的用户数为0则禁用 -->
+                <el-button v-if="isAuth('wx:wxuser:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+            </el-form-item>
+            <!-- 其他操作按钮 -->
+            <el-form-item class="fr">
+                <!-- 打开标签管理界面 -->
+                <el-button icon="el-icon-price-tag" type="success" @click="$refs.wxUserTagsEditor.show()">标签管理</el-button>
+                <!-- 同步粉丝数据 -->
+                <el-button icon="el-icon-sort" type="success" @click="syncWxUsers()">同步粉丝</el-button>
+            </el-form-item>
+        </el-form>
+        <!-- 数据表格 -->
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <!-- 多选框 -->
+            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+            <!-- openid列 -->
+            <el-table-column prop="openid" header-align="center" align="center" label="openid"></el-table-column>
+            <!-- 昵称列 -->
+            <el-table-column prop="nickname" header-align="center" align="center" label="昵称"></el-table-column>
+            <!-- 性别列，使用formatter格式化显示 -->
+            <el-table-column prop="sex" header-align="center" align="center" label="性别" :formatter="sexFormat"></el-table-column>
+            <!-- 城市列 -->
+            <el-table-column prop="city" header-align="center" align="center" label="城市"></el-table-column>
+            <!-- 头像列，使用插槽自定义显示 -->
+            <el-table-column prop="headimgurl" header-align="center" align="center" label="头像">
+                <img class="headimg" slot-scope="scope" v-if="scope.row.headimgurl" :src="scope.row.headimgurl" />
+            </el-table-column>
+            <!-- 标签列，使用插槽和循环显示多个标签 -->
+            <el-table-column prop="tagidList" header-align="center" align="center" label="标签" show-overflow-tooltip>
+                <template slot-scope="scope">
+                    <span v-for="tagid in scope.row.tagidList" :key="tagid">{{getTagName(tagid)}} </span>
+                </template>
+            </el-table-column>
+            <!-- 订阅时间列，使用moment格式化显示 -->
+            <el-table-column prop="subscribeTime" header-align="center" align="center" label="订阅时间">
+                <template slot-scope="scope">{{$moment(scope.row.subscribeTime).calendar()}}</template>
+            </el-table-column>
+            <!-- 场景值列 -->
+            <el-table-column prop="qrSceneStr" header-align="center" align="center" label="场景值"></el-table-column>
+            <!-- 是否关注列，使用插槽自定义显示 -->
+            <el-table-column prop="subscribe" header-align="center" align="center" label="是否关注">
+                <span slot-scope="scope">{{scope.row.subscribe?"是":"否"}}</span>
+            </el-table-column>
+            <!-- 操作列，包含删除按钮 -->
+            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+                <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="deleteHandle(scope.row.openid)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <!-- 分页组件 -->
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+        <!-- 标签管理组件 -->
+        <wx-user-tags-manager ref="wxUserTagsEditor" :visible="showWxUserTagsEditor" @close="showWxUserTagsEditor=false"></wx-user-tags-manager>
+        <!-- 用户标签绑定/解绑组件 -->
+        <wx-user-tagging ref="wxUserTagging" :wxUsers="dataListSelections"></wx-user-tagging>
+    </div>
+</template>
+<script>
+// 引入组件
+import WxUserTagsManager from '@/components/wx-user-tags-manager'
+import WxUserTagging from './wx-user-tagging'
+// 从vuex中引入mapState辅助函数
+import { mapState } from 'vuex'
+
+export default {
+    data() {
+        return {
+            // 表单数据
+            dataForm: {
+                tagid:'',
+                nickname: '',
+                city:'',
+                qrSceneStr:''
+            },
+            // 数据列表
+            dataList: [],
+            // 当前页码
+            pageIndex: 1,
+            // 每页显示数量
+            pageSize: 10,
+            // 总页数
+            totalPage: 0,
+            // 是否显示用户标签编辑器
+            showWxUserTagsEditor:false,
+            // 数据列表加载状态
+            dataListLoading: false,
+            // 选中的数据项
+            dataListSelections: [],
+        }
+    },
+    // 注册的组件
+    components: {
+        WxUserTagsManager, WxUserTagging
+    },
+    // 组件激活时（例如在keep-alive中）
+    activated() {
+        this.getDataList() // 获取数据列表
+    },
+    // 计算属性，从vuex的state中获取wxUserTags
+    computed: mapState({
+        wxUserTags: state => state.wxUserTags.tags
+    }),
+    methods: {
+        // 获取数据列表
+        getDataList() {
+            this.dataListLoading = true // 开始加载
+            this.$http({ // 发起HTTP请求
+                url: this.$http.adornUrl('/manage/wxUser/list'), // 请求URL
+                method: 'get', // 请求方法
+                params: this.$http.adornParams({ // 请求参数
+                    'page': this.pageIndex,
+                    'limit': this.pageSize,
+                    'nickname': this.dataForm.nickname,
+                    'tagid': this.dataForm.tagid,
+                    'city': this.dataForm.city,
+                    'qrSceneStr': this.dataForm.qrSceneStr,
+                    'sidx': 'subscribe_time',
+                    'order': 'desc'
+                })
+            }).then(({ data }) => { // 请求成功后的处理
+                if (data && data.code === 200) {
+                    this.dataList = data.page.list
+                    this.totalPage = data.page.totalCount
+                } else {
+                    this.dataList = []
+                    this.totalPage = 0
+                }
+                this.dataListLoading = false // 结束加载
+            })
+        },
+        // 每页显示数量变化时的处理
+        sizeChangeHandle(val) {
+            this.pageSize = val
+            this.pageIndex = 1
+            this.getDataList()
+        },
+        // 当前页码变化时的处理
+        currentChangeHandle(val) {
+            this.pageIndex = val
+            this.getDataList()
+        },
+        // 多选变化时的处理
+        selectionChangeHandle(val) {
+            this.dataListSelections = val
+        },
+        // 删除操作
+        deleteHandle(id) {
+            // 确定要删除的ID
+            var ids = id ? [id] : this.dataListSelections.map(item => item.openid)
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$http({ // 发起删除请求
+                    url: this.$http.adornUrl('/manage/wxUser/delete'),
+                    method: 'post',
+                    data: this.$http.adornData(ids, false)
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '操作成功',
+                            type: 'success',
+                            duration: 1500,
+                            onClose: () => {
+                                this.getDataList() // 刷新列表
+                            }
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                })
+            })
+        },
+        // 同步微信用户
+        syncWxUsers(){
+            this.$http({ // 发起同步请求
+                    url: this.$http.adornUrl('/manage/wxUser/syncWxUsers'),
+                    method: 'post',
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '同步任务已建立，请稍候刷新查看列表',
+                            type: 'success',
+                            duration: 1500
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                })
+        },
+        
+        // 性别格式化函数
+        sexFormat(row, column, cellValue) {
+            let sexType = {
+                0: '未知',
+                1: '男',
+                2: '女'
+            }
+            return sexType[cellValue];
+        },
+        // 根据tagid获取标签名
+        getTagName(tagid){
+            let tag = this.wxUserTags.find(item=>item.id==tagid)
+            return tag?tag.name : "?"
+        }
+    }
+}
+</script>
+<style scoped>
+.headimg{
+    width: 50px; 
+    /* // 头像宽度 */
+    height: 50px; 
+    /* // 头像高度 */
+    border-radius: 8px; 
+    /* // 头像圆角 */
+}
+</style>
\ No newline at end of file