diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..3486431
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,12 @@
+<template>
+  <div id="vue-admin-better">
+    <router-view />
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'App',
+    mounted() {},
+  }
+</script>
diff --git a/src/api/ad.js b/src/api/ad.js
new file mode 100644
index 0000000..55cd5e7
--- /dev/null
+++ b/src/api/ad.js
@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function getList() {
+  return request({
+    url: 'https://api.vuejs-core.cn/getAd',
+    method: 'get',
+  })
+}
diff --git a/src/api/colorfulIcon.js b/src/api/colorfulIcon.js
new file mode 100644
index 0000000..c2b6d5b
--- /dev/null
+++ b/src/api/colorfulIcon.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getIconList(data) {
+  return request({
+    url: '/colorfulIcon/getList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/github.js b/src/api/github.js
new file mode 100644
index 0000000..8d7e49d
--- /dev/null
+++ b/src/api/github.js
@@ -0,0 +1,19 @@
+import request from 'axios'
+
+export function getRepos(params) {
+  return request({
+    url: 'https://api.github.com/repos/zxwk1998/vue-admin-better',
+    method: 'get',
+    params,
+    timeout: 10000,
+  })
+}
+
+export function getStargazers(params) {
+  return request({
+    url: 'https://api.github.com/repos/zxwk1998/vue-admin-better/stargazers',
+    method: 'get',
+    params,
+    timeout: 10000,
+  })
+}
diff --git a/src/api/goodsList.js b/src/api/goodsList.js
new file mode 100644
index 0000000..3a40f8f
--- /dev/null
+++ b/src/api/goodsList.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/goodsList/getList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/icon.js b/src/api/icon.js
new file mode 100644
index 0000000..fe1d186
--- /dev/null
+++ b/src/api/icon.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getIconList(data) {
+  return request({
+    url: '/icon/getList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/markdown.js b/src/api/markdown.js
new file mode 100644
index 0000000..4359eaf
--- /dev/null
+++ b/src/api/markdown.js
@@ -0,0 +1,8 @@
+import request from 'axios'
+
+export function getList() {
+  return request({
+    url: 'https://gcore.jsdelivr.net/gh/prettier/prettier@master/docs/options.md',
+    method: 'get',
+  })
+}
diff --git a/src/api/menuManagement.js b/src/api/menuManagement.js
new file mode 100644
index 0000000..32b22d3
--- /dev/null
+++ b/src/api/menuManagement.js
@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function getTree(data) {
+  return request({
+    url: '/menuManagement/getTree',
+    method: 'post',
+    data,
+  })
+}
+
+export function doEdit(data) {
+  return request({
+    url: '/menuManagement/doEdit',
+    method: 'post',
+    data,
+  })
+}
+
+export function doDelete(data) {
+  return request({
+    url: '/menuManagement/doDelete',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/notice.js b/src/api/notice.js
new file mode 100644
index 0000000..280d7ce
--- /dev/null
+++ b/src/api/notice.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function getNoticeList() {
+  return request({
+    url: 'https://api.vuejs-core.cn/getNotice',
+    method: 'get',
+  })
+}
+
+
+
+export function getOrderList() {
+  return request({
+    url: 'https://dev.wagoo.pet/wagoo/1.1/membership/types',
+    method: 'post',
+  })
+}
diff --git a/src/api/personalCenter.js b/src/api/personalCenter.js
new file mode 100644
index 0000000..804c679
--- /dev/null
+++ b/src/api/personalCenter.js
@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/personalCenter/getList',
+    method: 'post',
+    data,
+  })
+}
+
+export function doEdit(data) {
+  return request({
+    url: '/personalCenter/doEdit',
+    method: 'post',
+    data,
+  })
+}
+
+export function doDelete(data) {
+  return request({
+    url: '/personalCenter/doDelete',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/publicKey.js b/src/api/publicKey.js
new file mode 100644
index 0000000..44df792
--- /dev/null
+++ b/src/api/publicKey.js
@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function getPublicKey() {
+  return request({
+    url: "/publicKey",
+    method: 'post',
+  })
+}
diff --git a/src/api/remixIcon.js b/src/api/remixIcon.js
new file mode 100644
index 0000000..c62ea70
--- /dev/null
+++ b/src/api/remixIcon.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getIconList(data) {
+  return request({
+    url: '/remixIcon/getList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/roleManagement.js b/src/api/roleManagement.js
new file mode 100644
index 0000000..4aac23e
--- /dev/null
+++ b/src/api/roleManagement.js
@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/roleManagement/getList',
+    method: 'post',
+    data,
+  })
+}
+
+export function doEdit(data) {
+  return request({
+    url: '/roleManagement/doEdit',
+    method: 'post',
+    data,
+  })
+}
+
+export function doDelete(data) {
+  return request({
+    url: '/roleManagement/doDelete',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/router.js b/src/api/router.js
new file mode 100644
index 0000000..4d34d48
--- /dev/null
+++ b/src/api/router.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getRouterList(data) {
+  return request({
+    url: '/menu/navigate',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/table.js b/src/api/table.js
new file mode 100644
index 0000000..7023660
--- /dev/null
+++ b/src/api/table.js
@@ -0,0 +1,284 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/get/order_details',
+    method: 'post',
+    data,
+  })
+}
+// 上门洗护单
+export function getdoorList(data) {
+  return request({
+    url: '/get/home_service_orders',
+    method: 'post',
+    data,
+  })
+}
+
+// 注册用户
+export function getUsere(data) {
+  return request({
+    url: '/get/users',
+    method: 'post',
+    data,
+  })
+}
+
+// 商城列表
+export function getmallList(data) {
+  return request({
+    url: '/get/product_orders',
+    method: 'post',
+    data,
+  })
+}
+
+// 小哇列表
+export function waList(data) {
+  return request({
+    url: '/get/waInfo',
+    method: 'post',
+    data,
+  })
+}
+
+
+
+export function  goodsListList(data) {
+  return request({
+    url: '/get/membership_instances',
+    method: 'post',
+    data,
+  })
+}
+
+export function  walletList(data) {
+  return request({
+    url: '/get/wallet_instances',
+    method: 'post',
+    data,
+  })
+}
+
+export function archiveList(data) {
+  return request({
+    url: '/get/pets',
+    method: 'post',
+    data,
+  })
+}
+
+export function commentList(data) {
+  return request({
+    url: '/get/comments_info',
+    method: 'post',
+    data,
+  })
+}
+
+export function messageList(data) {
+  return request({
+    url: '/get/notice',
+    method: 'post',
+    data,
+  })
+}
+
+export function couponList(data) {
+  return request({
+    url: '/get/coupons',
+    method: 'post',
+    data,
+  })
+}
+
+export function couponPackage(data) {
+  return request({
+    url: '/get/products',
+    method: 'post',
+    data,
+  })
+}
+
+/** 商城订单列表 pageNo、pageSize 必传；status_Inquiry、time 为搜索项 */
+export function getProductOrders(data) {
+  return request({
+    url: '/get/product_orders',
+    method: 'post',
+    data,
+  })
+}
+
+export function unreadOtice(data) {
+  return request({
+    url: '/unread_notice',
+    method: 'post',
+    data,
+  })
+}
+
+export function markNotice(data) {
+  return request({
+    url: '/update/notice',
+    method: 'post',
+    data,
+  })
+}
+
+
+
+
+
+export function  recordList(data) {
+  return request({
+    url: '/get/delivery',
+    method: 'post',
+    data,
+  })
+}
+
+export function  couponstList(data) {
+  return request({
+    url: '/get/coupons',
+    method: 'post',
+    data,
+  })
+}
+
+export function  additional(data) {
+  return request({
+    url: '/get/additional_services',
+    method: 'post',
+    data,
+  })
+}
+
+
+export function distributeEdit(data) {
+  return request({
+    url: '/delivery/coupons',
+    method: 'post',
+    data,
+  })
+}
+// 洗护订单导出
+export function exportUserOperateAdmin(data, headers) {
+  return request({
+    url: '/download/order_details',
+    method: 'get',
+    data: data,
+  })
+}
+
+// 上门订单导出
+export function expordoortodoorOrdern(data, headers) {
+  return request({
+    url: '/download/home_service_orders',
+    method: 'get',
+    data: data,
+  })
+}
+// 商城订单导出
+export function expormallOrdern(data, headers) {
+  return request({
+    url: '/download/product_orders',
+    method: 'get',
+    data: data,
+  })
+}
+
+// 注册用户导出
+export function exportRegisterUser(data, headers) {
+  return request({
+    url: '/download/users',
+    method: 'get',
+    data: data,
+  })
+}
+
+export function exportUserMembership(data, headers) {
+  return request({
+    url: '/download/membership_instances',
+    method: 'get',
+    data: data,
+  })
+}
+
+export function doEdit(data) {
+  return request({
+    url: '/update/order_details',
+    method: 'post',
+    data,
+  })
+}
+
+export function additionalEdit(data) {
+  return request({
+    url: '/update/additional_services',
+    method: 'post',
+    data,
+  })
+}
+
+export function addPackage(data) {
+  return request({
+    url: '/add/package',
+    method: 'post',
+    data,
+  })
+}
+
+// 商城列表编辑接口
+export function addproduct(data) {
+  return request({
+    url: '/update/product',
+    method: 'post',
+    data,
+  })
+}
+
+// 商城订单编辑
+export function addOrder(data) {
+  return request({
+    url: '/update/product_order_status',
+    method: 'post',
+    data,
+  })
+}
+
+export function editPackage(data) {
+  return request({
+    url: '/edit/package',
+    method: 'post',
+    data,
+  })
+}
+
+export function deletePackage(data) {
+  return request({
+    url: '/delete/package',
+    method: 'post',
+    data,
+  })
+}
+
+// 商品列表
+export function deleteProduct(data) {
+  return request({
+    url: '/update/product_status',
+    method: 'post',
+    data,
+  })
+}
+
+
+
+
+export function doDelete(data) {
+  return request({
+    url: '/table/doDelete',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/tree.js b/src/api/tree.js
new file mode 100644
index 0000000..e29ad38
--- /dev/null
+++ b/src/api/tree.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getTreeList(data) {
+  return request({
+    url: '/tree/list',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/user.js b/src/api/user.js
new file mode 100644
index 0000000..7772397
--- /dev/null
+++ b/src/api/user.js
@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+import { encryptedData } from '@/utils/encrypt'
+import { loginRSA, tokenName } from '@/config'
+
+export async function login(data) {
+  // if (loginRSA) {
+    // data = await encryptedData(data)
+  // }
+
+  return request({
+    url: '/admin/login',
+    method: 'post',
+    data,
+  })
+}
+export function  members(data) {
+  return request({
+    url: '/daily/new_membership_number',
+    method: 'post',
+    data,
+  })
+}
+
+export function getUserInfo(accessToken) {
+  return request({
+    url: '/get/user_info',
+    method: 'post',
+    data: {
+      [tokenName]: accessToken,
+    },
+  })
+}
+
+export function logout() {
+  return request({
+    url: '/admin/logout',
+    method: 'post',
+  })
+}
+
+export function register() {
+  return request({
+    url: '/register',
+    method: 'post',
+  })
+}
diff --git a/src/api/userManagement.js b/src/api/userManagement.js
new file mode 100644
index 0000000..9eaca6e
--- /dev/null
+++ b/src/api/userManagement.js
@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/userManagement/getList',
+    method: 'post',
+    data,
+  })
+}
+
+export function doEdit(data) {
+  return request({
+    url: '/userManagement/doEdit',
+    method: 'post',
+    data,
+  })
+}
+
+export function doDelete(data) {
+  return request({
+    url: '/userManagement/doDelete',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/Wagoo.png b/src/assets/Wagoo.png
new file mode 100644
index 0000000..f758a39
Binary files /dev/null and b/src/assets/Wagoo.png differ
diff --git a/src/assets/comparison/left.jpg b/src/assets/comparison/left.jpg
new file mode 100644
index 0000000..f5133cf
Binary files /dev/null and b/src/assets/comparison/left.jpg differ
diff --git a/src/assets/comparison/right.jpg b/src/assets/comparison/right.jpg
new file mode 100644
index 0000000..625a53f
Binary files /dev/null and b/src/assets/comparison/right.jpg differ
diff --git a/src/assets/error_images/401.png b/src/assets/error_images/401.png
new file mode 100644
index 0000000..90bbf6e
Binary files /dev/null and b/src/assets/error_images/401.png differ
diff --git a/src/assets/error_images/404.png b/src/assets/error_images/404.png
new file mode 100644
index 0000000..14fa725
Binary files /dev/null and b/src/assets/error_images/404.png differ
diff --git a/src/assets/error_images/cloud.png b/src/assets/error_images/cloud.png
new file mode 100644
index 0000000..247c06b
Binary files /dev/null and b/src/assets/error_images/cloud.png differ
diff --git a/src/assets/ewm.png b/src/assets/ewm.png
new file mode 100644
index 0000000..a97a6ad
Binary files /dev/null and b/src/assets/ewm.png differ
diff --git a/src/assets/g.png b/src/assets/g.png
new file mode 100644
index 0000000..5ee025a
Binary files /dev/null and b/src/assets/g.png differ
diff --git a/src/assets/login_images/background.jpg b/src/assets/login_images/background.jpg
new file mode 100644
index 0000000..87ac496
Binary files /dev/null and b/src/assets/login_images/background.jpg differ
diff --git a/src/assets/qr_logo/lqr_logo.png b/src/assets/qr_logo/lqr_logo.png
new file mode 100644
index 0000000..f81db46
Binary files /dev/null and b/src/assets/qr_logo/lqr_logo.png differ
diff --git a/src/assets/vuejs-fill.svg b/src/assets/vuejs-fill.svg
new file mode 100644
index 0000000..0e6787a
--- /dev/null
+++ b/src/assets/vuejs-fill.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path d="M1 3h4l7 12 7-12h4L12 22 1 3zm8.667 0L12 7l2.333-4h4.035L12 14 5.632 3h4.035z"/>
+</svg>
diff --git a/src/assets/zfb_kf.jpg b/src/assets/zfb_kf.jpg
new file mode 100644
index 0000000..a850a5e
Binary files /dev/null and b/src/assets/zfb_kf.jpg differ
diff --git a/src/components/SelectTree/index.vue b/src/components/SelectTree/index.vue
new file mode 100644
index 0000000..4679d93
--- /dev/null
+++ b/src/components/SelectTree/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="select-tree-template">
+    <el-select
+      v-model="selectValue"
+      class="vab-tree-select"
+      :clearable="clearable"
+      :collapse-tags="selectType == 'multiple'"
+      :multiple="selectType == 'multiple'"
+      value-key="id"
+      @clear="clearHandle"
+      @remove-tag="removeTag"
+    >
+      <el-option :value="selectKey">
+        <el-tree
+          id="treeOption"
+          ref="treeOption"
+          :current-node-key="currentNodeKey"
+          :data="treeOptions"
+          :default-checked-keys="defaultSelectedKeys"
+          :default-expanded-keys="defaultSelectedKeys"
+          :highlight-current="true"
+          node-key="id"
+          :props="defaultProps"
+          :show-checkbox="selectType == 'multiple'"
+          @check="checkNode"
+          @node-click="nodeClick"
+        />
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'SelectTreeTemplate',
+    props: {
+      /* 树形结构数据 */
+      treeOptions: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      /* 单选/多选 */
+      selectType: {
+        type: String,
+        default: () => {
+          return 'single'
+        },
+      },
+      /* 初始选中值key */
+      selectedKey: {
+        type: String,
+        default: () => {
+          return ''
+        },
+      },
+      /* 初始选中值name */
+      selectedValue: {
+        type: String,
+        default: () => {
+          return ''
+        },
+      },
+      /* 可做选择的层级 */
+      selectLevel: {
+        type: [String, Number],
+        default: () => {
+          return ''
+        },
+      },
+      /* 可清空选项 */
+      clearable: {
+        type: Boolean,
+        default: () => {
+          return true
+        },
+      },
+    },
+    data() {
+      return {
+        defaultProps: {
+          children: 'children',
+          label: 'name',
+        },
+        defaultSelectedKeys: [], //初始选中值数组
+        currentNodeKey: this.selectedKey,
+        selectValue: this.selectType == 'multiple' ? this.selectedValue.split(',') : this.selectedValue, //下拉框选中值label
+        selectKey: this.selectType == 'multiple' ? this.selectedKey.split(',') : this.selectedKey, //下拉框选中值value
+      }
+    },
+    mounted() {
+      this.initTree()
+    },
+    methods: {
+      // 初始化树的值
+      initTree() {
+        const that = this
+        if (that.selectedKey) {
+          that.defaultSelectedKeys = that.selectedKey.split(',') // 设置默认展开
+          if (that.selectType == 'single') {
+            that.$refs.treeOption.setCurrentKey(that.selectedKey) // 设置默认选中
+          } else {
+            that.$refs.treeOption.setCheckedKeys(that.defaultSelectedKeys)
+          }
+        }
+      },
+      // 清除选中
+      clearHandle() {
+        const that = this
+        this.selectValue = ''
+        this.selectKey = ''
+        this.defaultSelectedKeys = []
+        this.currentNodeKey = ''
+        this.clearSelected()
+        if (that.selectType == 'single') {
+          that.$refs.treeOption.setCurrentKey('') // 设置默认选中
+        } else {
+          that.$refs.treeOption.setCheckedKeys([])
+        }
+      },
+      /* 清空选中样式 */
+      clearSelected() {
+        const allNode = document.querySelectorAll('#treeOption .el-tree-node')
+        allNode.forEach((element) => element.classList.remove('is-current'))
+      },
+      // select多选时移除某项操作
+      removeTag() {
+        this.$refs.treeOption.setCheckedKeys([])
+      },
+      // 点击叶子节点
+      nodeClick(data) {
+        if (data.rank >= this.selectLevel) {
+          this.selectValue = data.name
+          this.selectKey = data.id
+        }
+      },
+      // 节点选中操作
+      checkNode() {
+        const checkedNodes = this.$refs.treeOption.getCheckedNodes()
+        const keyArr = []
+        const valueArr = []
+        checkedNodes.forEach((item) => {
+          if (item.rank >= this.selectLevel) {
+            keyArr.push(item.id)
+            valueArr.push(item.name)
+          }
+        })
+        this.selectValue = valueArr
+        this.selectKey = keyArr
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+    height: auto;
+    max-height: 274px;
+    padding: 0;
+    overflow-y: auto;
+  }
+
+  .el-select-dropdown__item.selected {
+    font-weight: normal;
+  }
+
+  ul li > .el-tree .el-tree-node__content {
+    height: auto;
+    padding: 0 20px;
+  }
+
+  .el-tree-node__label {
+    font-weight: normal;
+  }
+
+  .el-tree > .is-current .el-tree-node__label {
+    font-weight: 700;
+    color: #409eff;
+  }
+
+  .el-tree > .is-current .el-tree-node__children .el-tree-node__label {
+    font-weight: normal;
+    color: #606266;
+  }
+</style>
+<style lang="scss"></style>
diff --git a/src/components/VabCharge/index.vue b/src/components/VabCharge/index.vue
new file mode 100644
index 0000000..a90c90a
--- /dev/null
+++ b/src/components/VabCharge/index.vue
@@ -0,0 +1,178 @@
+<template>
+  <div class="content">
+    <div class="g-container" :style="styleObj">
+      <div class="g-number">
+        {{ endVal }}
+      </div>
+      <div class="g-contrast">
+        <div class="g-circle"></div>
+        <ul class="g-bubbles">
+          <li v-for="(item, index) in 15" :key="index"></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'VabCharge',
+    props: {
+      styleObj: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+      startVal: {
+        type: Number,
+        default: 0,
+      },
+      endVal: {
+        type: Number,
+        default: 100,
+      },
+    },
+    data() {
+      return {
+        decimals: 2,
+        prefix: '',
+        suffix: '%',
+        separator: ',',
+        duration: 3000,
+      }
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  }
+</script>
+
+<style lang="scss" scoped>
+  .content {
+    position: relative;
+    display: flex;
+    align-items: center; /* 垂直居中 */
+    justify-content: center; /* 水平居中 */
+    width: 100%;
+    background: #000;
+
+    .g-number {
+      position: absolute;
+      top: 27%;
+      z-index: 99;
+      width: 300px;
+      font-size: 32px;
+      color: #fff;
+      text-align: center;
+    }
+
+    .g-container {
+      position: relative;
+      width: 300px;
+      height: 400px;
+      margin: auto;
+    }
+
+    .g-contrast {
+      width: 300px;
+      height: 400px;
+      overflow: hidden;
+      background-color: #000;
+      filter: contrast(15) hue-rotate(0);
+      animation: hueRotate 10s infinite linear;
+    }
+
+    .g-circle {
+      position: relative;
+      box-sizing: border-box;
+      width: 300px;
+      height: 300px;
+      filter: blur(8px);
+
+      &::after {
+        position: absolute;
+        top: 40%;
+        left: 50%;
+        width: 200px;
+        height: 200px;
+        content: '';
+        background-color: #00ff6f;
+        border-radius: 42% 38% 62% 49% / 45%;
+        transform: translate(-50%, -50%) rotate(0);
+        animation: rotate 10s infinite linear;
+      }
+
+      &::before {
+        position: absolute;
+        top: 40%;
+        left: 50%;
+        z-index: 99;
+        width: 176px;
+        height: 176px;
+        content: '';
+        background-color: #000;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .g-bubbles {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 100px;
+      height: 40px;
+      background-color: #00ff6f;
+      filter: blur(5px);
+      border-radius: 100px 100px 0 0;
+      transform: translate(-50%, 0);
+    }
+
+    li {
+      position: absolute;
+      background: #00ff6f;
+      border-radius: 50%;
+    }
+
+    @for $i from 0 through 15 {
+      li:nth-child(#{$i}) {
+        $width: 15 + random(15) + px;
+
+        top: 50%;
+        left: 15 + random(70) + px;
+        width: $width;
+        height: $width;
+        transform: translate(-50%, -50%);
+        animation: moveToTop #{random(6) + 3}s ease-in-out -#{random(5000) / 1000}s infinite;
+      }
+    }
+
+    @keyframes rotate {
+      50% {
+        border-radius: 45% / 42% 38% 58% 49%;
+      }
+
+      100% {
+        transform: translate(-50%, -50%) rotate(720deg);
+      }
+    }
+
+    @keyframes moveToTop {
+      90% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 0.1;
+        transform: translate(-50%, -180px);
+      }
+    }
+
+    @keyframes hueRotate {
+      100% {
+        filter: contrast(15) hue-rotate(360deg);
+      }
+    }
+  }
+</style>
diff --git a/src/components/VabPageHeader/index.vue b/src/components/VabPageHeader/index.vue
new file mode 100644
index 0000000..42d207e
--- /dev/null
+++ b/src/components/VabPageHeader/index.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="page-header" :class="customClass">
+    <div class="header-content">
+      <div class="header-left">
+        <h1 class="page-title">
+          <vab-icon v-if="icon" :icon="icon" />
+          {{ title }}
+        </h1>
+        <p v-if="description" class="page-description" v-html="description"></p>
+      </div>
+      <div v-if="rightIcon || rightText" class="header-right">
+        <slot name="right">
+          <vab-icon v-if="rightIcon" :icon="rightIcon" />
+          <span v-if="rightText">{{ rightText }}</span>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'VabPageHeader',
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      description: {
+        type: String,
+        default: '',
+      },
+      icon: {
+        type: Array,
+        default: () => [],
+      },
+      rightIcon: {
+        type: Array,
+        default: () => [],
+      },
+      rightText: {
+        type: String,
+        default: '',
+      },
+      customClass: {
+        type: String,
+        default: '',
+      },
+    },
+  }
+</script>
+
+<style lang="scss">
+  .page-header {
+    background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
+    border-radius: 12px;
+    padding: 30px;
+    margin-bottom: 24px;
+    color: white;
+    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+
+    .header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .header-left {
+        .page-title {
+          font-size: 2rem;
+          font-weight: 700;
+          margin: 0 0 8px 0;
+          display: flex;
+          align-items: center;
+          gap: 12px;
+
+          .vab-icon {
+            font-size: 1.8rem;
+          }
+        }
+
+        .page-description {
+          font-size: 1rem;
+          opacity: 0.9;
+          margin: 0;
+        }
+      }
+
+      .header-right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 1.1rem;
+        font-weight: 600;
+
+        .vab-icon {
+          font-size: 1.3rem;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/VabProfile/index.vue b/src/components/VabProfile/index.vue
new file mode 100644
index 0000000..3c7505e
--- /dev/null
+++ b/src/components/VabProfile/index.vue
@@ -0,0 +1,305 @@
+<template>
+  <div class="card" :style="styleObj">
+    <div class="card-borders">
+      <div class="border-top"></div>
+      <div class="border-right"></div>
+      <div class="border-bottom"></div>
+      <div class="border-left"></div>
+    </div>
+    <div class="card-content">
+      <el-image class="avatar" :src="avatar" />
+      <div class="username">
+        {{ username }}
+      </div>
+      <div class="social-icons">
+        <a v-for="(item, index) in iconArray" :key="index" class="social-icon" :href="item.url" target="_blank">
+          <vab-icon :icon="['fas', item.icon]" />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'VabProfile',
+    props: {
+      styleObj: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+      username: {
+        type: String,
+        default: '',
+      },
+      avatar: {
+        type: String,
+        default: '',
+      },
+      iconArray: {
+        type: Array,
+        default: () => {
+          return [
+            { icon: 'bell', url: '' },
+            { icon: 'bookmark', url: '' },
+            { icon: 'cloud-sun', url: '' },
+          ]
+        },
+      },
+    },
+    data() {
+      return {}
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  }
+</script>
+
+<style lang="scss" scoped>
+  .card {
+    --card-bg-color: hsl(240, 31%, 25%);
+    --card-bg-color-transparent: hsla(240, 31%, 25%, 0.7);
+
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .card-borders {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+
+      .border-top {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 2px;
+        background: var(--card-bg-color);
+        transform: translateX(-100%);
+        animation: slide-in-horizontal 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
+      }
+
+      .border-right {
+        position: absolute;
+        right: 0;
+        width: 2px;
+        height: 100%;
+        background: var(--card-bg-color);
+        transform: translateY(100%);
+        animation: slide-in-vertical 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
+      }
+
+      .border-bottom {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background: var(--card-bg-color);
+        transform: translateX(100%);
+        animation: slide-in-horizontal-reverse 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
+      }
+
+      .border-left {
+        position: absolute;
+        top: 0;
+        width: 2px;
+        height: 100%;
+        background: var(--card-bg-color);
+        transform: translateY(-100%);
+        animation: slide-in-vertical-reverse 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
+      }
+    }
+
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: 100%;
+      padding: 40px 0 40px 0;
+      background: var(--card-bg-color-transparent);
+      opacity: 0;
+      transform: scale(0.6);
+      animation: bump-in 0.5s 0.8s forwards;
+
+      .avatar {
+        width: 80px;
+        height: 80px;
+        border: 1px solid $base-color-white;
+        border-radius: 50%;
+        opacity: 0;
+        transform: scale(0.6);
+        animation: bump-in 0.5s 1s forwards;
+      }
+
+      .username {
+        position: relative;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        font-size: 26px;
+        color: transparent;
+        letter-spacing: 2px;
+        animation: fill-text-white 1.2s 2s forwards;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          color: black;
+          content: '';
+          background: #35b9f1;
+          transform: scaleX(0);
+          transform-origin: left;
+          animation: slide-in-out 1.2s 1.2s cubic-bezier(0.75, 0, 0, 1) forwards;
+        }
+      }
+
+      .social-icons {
+        display: flex;
+
+        .social-icon {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 2.5em;
+          height: 2.5em;
+          margin: 0 15px;
+          color: white;
+          text-decoration: none;
+          border-radius: 50%;
+
+          @for $i from 1 through 3 {
+            &:nth-child(#{$i}) {
+              &::before {
+                animation-delay: 2s + 0.1s * $i;
+              }
+
+              &::after {
+                animation-delay: 2.1s + 0.1s * $i;
+              }
+
+              svg {
+                animation-delay: 2.2s + 0.1s * $i;
+              }
+            }
+          }
+
+          &::before,
+          &::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            content: '';
+            border-radius: inherit;
+            transform: scale(0);
+          }
+
+          &::before {
+            background: #f7f1e3;
+            animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
+          }
+
+          &::after {
+            background: #2c3e50;
+            animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
+          }
+
+          svg {
+            z-index: 99;
+            transform: scale(0);
+            animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
+          }
+        }
+      }
+    }
+  }
+
+  @keyframes bump-in {
+    50% {
+      transform: scale(1.05);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes slide-in-horizontal {
+    50% {
+      transform: translateX(0);
+    }
+
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes slide-in-horizontal-reverse {
+    50% {
+      transform: translateX(0);
+    }
+
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes slide-in-vertical {
+    50% {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(-100%);
+    }
+  }
+
+  @keyframes slide-in-vertical-reverse {
+    50% {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(100%);
+    }
+  }
+
+  @keyframes slide-in-out {
+    50% {
+      transform: scaleX(1);
+      transform-origin: left;
+    }
+
+    50.1% {
+      transform-origin: right;
+    }
+
+    100% {
+      transform: scaleX(0);
+      transform-origin: right;
+    }
+  }
+
+  @keyframes fill-text-white {
+    to {
+      color: white;
+    }
+  }
+
+  @keyframes scale-in {
+    to {
+      transform: scale(1);
+    }
+  }
+</style>
diff --git a/src/components/VabSnow/index.vue b/src/components/VabSnow/index.vue
new file mode 100644
index 0000000..96516ad
--- /dev/null
+++ b/src/components/VabSnow/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="content" :style="styleObj">
+    <div v-for="(item, index) in 200" :key="index" class="snow"></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'VabSnow',
+    props: {
+      styleObj: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+    },
+    data() {
+      return {}
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  }
+</script>
+
+<style lang="scss" scoped>
+  .content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
+    filter: drop-shadow(0 0 10px white);
+  }
+
+  @function random_range($min, $max) {
+    $rand: random();
+    $random_range: $min + floor($rand * (($max - $min) + 1));
+
+    @return $random_range;
+  }
+
+  .snow {
+    $total: 200;
+
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: white;
+    border-radius: 50%;
+
+    @for $i from 1 through $total {
+      $random-x: random(1000000) * 0.0001vw;
+      $random-offset: random_range(-100000, 100000) * 0.0001vw;
+      $random-x-end: $random-x + $random-offset;
+      $random-x-end-yoyo: $random-x + ($random-offset / 2);
+      $random-yoyo-time: random_range(30000, 80000) / 100000;
+      $random-yoyo-y: $random-yoyo-time * 100vh;
+      $random-scale: random(10000) * 0.0001;
+      $fall-duration: random_range(10, 30) * 1s;
+      $fall-delay: random(30) * -1s;
+
+      &:nth-child(#{$i}) {
+        opacity: random(10000) * 0.0001;
+        transform: translate($random-x, -10px) scale($random-scale);
+        animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
+      }
+
+      @keyframes fall-#{$i} {
+        #{percentage($random-yoyo-time)} {
+          transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
+        }
+
+        to {
+          transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/VabUpload/index.vue b/src/components/VabUpload/index.vue
new file mode 100644
index 0000000..7e353ff
--- /dev/null
+++ b/src/components/VabUpload/index.vue
@@ -0,0 +1,217 @@
+<template>
+  <el-dialog :before-close="handleClose" :close-on-click-modal="false" :title="title" :visible.sync="dialogFormVisible" width="909px">
+    <div class="upload">
+      <el-alert
+        :closable="false"
+        :title="`支持jpg、jpeg、png格式，单次可最多选择${limit}张图片，每张不可大于${size}M，如果大于${size}M会自动为您过滤`"
+        type="info"
+      />
+      <br />
+      <el-upload
+        ref="upload"
+        accept="image/png, image/jpeg"
+        :action="action"
+        :auto-upload="false"
+        class="upload-content"
+        :close-on-click-modal="false"
+        :data="data"
+        :file-list="fileList"
+        :headers="headers"
+        :limit="limit"
+        list-type="picture-card"
+        :multiple="true"
+        :name="name"
+        :on-change="handleChange"
+        :on-error="handleError"
+        :on-exceed="handleExceed"
+        :on-preview="handlePreview"
+        :on-progress="handleProgress"
+        :on-remove="handleRemove"
+        :on-success="handleSuccess"
+      >
+        <i slot="trigger" class="el-icon-plus"></i>
+        <el-dialog append-to-body title="查看大图" :visible.sync="dialogVisible">
+          <div>
+            <img alt="" :src="dialogImageUrl" width="100%" />
+          </div>
+        </el-dialog>
+      </el-upload>
+    </div>
+    <div slot="footer" class="dialog-footer" style="position: relative; padding-right: 15px; text-align: right">
+      <div v-if="show" style="position: absolute; top: 10px; left: 15px; color: #999">
+        正在上传中... 当前上传成功数:{{ imgSuccessNum }}张 当前上传失败数:{{ imgErrorNum }}张
+      </div>
+      <el-button type="primary" @click="handleClose">关闭</el-button>
+      <el-button :loading="loading" size="small" style="margin-left: 10px" type="success" @click="submitUpload">开始上传</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'VabUpload',
+    props: {
+      url: {
+        type: String,
+        default: '/upload',
+        required: true,
+      },
+      name: {
+        type: String,
+        default: 'file',
+        required: true,
+      },
+      limit: {
+        type: Number,
+        default: 50,
+        required: true,
+      },
+      size: {
+        type: Number,
+        default: 1,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        show: false,
+        loading: false,
+        dialogVisible: false,
+        dialogImageUrl: '',
+        action: 'https://vab-unicloud-3a9da9.service.tcloudbase.com/upload',
+        headers: {},
+        fileList: [],
+        picture: 'picture',
+        imgNum: 0,
+        imgSuccessNum: 0,
+        imgErrorNum: 0,
+        typeList: null,
+        title: '上传',
+        dialogFormVisible: false,
+        data: {},
+      }
+    },
+    computed: {
+      percentage() {
+        if (this.allImgNum == 0) return 0
+        return this.$baseLodash.round(this.imgNum / this.allImgNum, 2) * 100
+      },
+    },
+    methods: {
+      submitUpload() {
+        this.$refs.upload.submit()
+      },
+      handleProgress() {
+        this.loading = true
+        this.show = true
+      },
+      handleChange(file, fileList) {
+        if (file.size > 1048576 * this.size) {
+          fileList.map((item, index) => {
+            if (item === file) {
+              fileList.splice(index, 1)
+            }
+          })
+          this.fileList = fileList
+        } else {
+          this.allImgNum = fileList.length
+        }
+      },
+      handleSuccess(response, file, fileList) {
+        this.imgNum = this.imgNum + 1
+        this.imgSuccessNum = this.imgSuccessNum + 1
+        if (fileList.length === this.imgNum) {
+          setTimeout(() => {
+            this.$baseMessage(`上传完成! 共上传${fileList.length}张图片`, 'success')
+          }, 1000)
+        }
+
+        setTimeout(() => {
+          this.loading = false
+          this.show = false
+        }, 1000)
+      },
+      handleError() {
+        this.imgNum = this.imgNum + 1
+        this.imgErrorNum = this.imgErrorNum + 1
+        this.$baseMessage(`文件[${file.raw.name}]上传失败,文件大小为${this.$baseLodash.round(file.raw.size / 1024, 0)}KB`, 'error')
+        setTimeout(() => {
+          this.loading = false
+          this.show = false
+        }, 1000)
+      },
+      handleRemove() {
+        this.imgNum = this.imgNum - 1
+        this.allNum = this.allNum - 1
+      },
+      handlePreview(file) {
+        this.dialogImageUrl = file.url
+        this.dialogVisible = true
+      },
+      handleExceed(files, fileList) {
+        this.$baseMessage(
+          `当前限制选择 ${this.limit} 个文件，本次选择了
+             ${files.length}
+             个文件`,
+          'error'
+        )
+      },
+      handleShow(data) {
+        this.title = '上传'
+        this.data = data
+        this.dialogFormVisible = true
+      },
+      handleClose() {
+        this.fileList = []
+        this.picture = 'picture'
+        this.allImgNum = 0
+        this.imgNum = 0
+        this.imgSuccessNum = 0
+        this.imgErrorNum = 0
+        /* if ("development" === process.env.NODE_ENV) {
+      this.api = process.env.VUE_APP_BASE_API;
+    } else {
+      this.api = `${window.location.protocol}//${window.location.host}`;
+    }
+
+    this.action = this.api + this.url; */
+        this.dialogFormVisible = false
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .upload {
+    height: 500px;
+
+    .upload-content {
+      .el-upload__tip {
+        display: block;
+        height: 30px;
+        line-height: 30px;
+      }
+
+      ::v-deep {
+        .el-upload--picture-card {
+          width: 128px;
+          height: 128px;
+          margin: 3px 8px 8px 8px;
+          border: 2px dashed #c0ccda;
+        }
+
+        .el-upload-list--picture {
+          margin-bottom: 20px;
+        }
+
+        .el-upload-list--picture-card {
+          .el-upload-list__item {
+            width: 128px;
+            height: 128px;
+            margin: 3px 8px 8px 8px;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/config/index.js b/src/config/index.js
new file mode 100644
index 0000000..86e58d6
--- /dev/null
+++ b/src/config/index.js
@@ -0,0 +1,7 @@
+/**
+ * @description 3个子配置，通用配置|主题配置|网络配置导出
+ */
+const setting = require('./setting.config')
+const theme = require('./theme.config')
+const network = require('./net.config')
+module.exports = Object.assign({}, setting, theme, network)
diff --git a/src/config/net.config.js b/src/config/net.config.js
new file mode 100644
index 0000000..6ee57e4
--- /dev/null
+++ b/src/config/net.config.js
@@ -0,0 +1,25 @@
+/**
+ * @description 导出默认网路配置
+ **/
+const network = {
+  // 默认的接口地址 如果是开发环境和生产环境走vab-mock-server，当然你也可以选择自己配置成需要的接口地址
+  // 生产环境
+  // 開發環境走本地代理 /api，避免跨域；生產環境直連
+  baseURL: process.env.NODE_ENV === 'development' ? '/api' : 'https://admin-api.wagoo.pet/',  
+  // 测试环境
+  // baseURL: process.env.NODE_ENV === 'development' ? 'https://dev.wagoo.pet/wagoo/1.1/' : 'https://dev.wagoo.pet/wagoo/1.1/',
+
+  //配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
+  contentType: 'application/json;charset=UTF-8',
+  //消息框消失时间
+  messageDuration: 3000,
+  //最长请求时间
+  requestTimeout: 15000,
+  //操作正常code，支持String、Array、int多种类型
+  successCode: [200, 0],
+  //登录失效code
+  invalidCode: 402,
+  //无权限code
+  noPermissionCode: 401,
+}
+module.exports = network
diff --git a/src/config/permission.js b/src/config/permission.js
new file mode 100644
index 0000000..387588e
--- /dev/null
+++ b/src/config/permission.js
@@ -0,0 +1,76 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 路由守卫，目前两种模式：all模式与intelligence模式
+ */
+import router from '@/router'
+import store from '@/store'
+import VabProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+import getPageTitle from '@/utils/pageTitle'
+import { authentication, loginInterception, progressBar, recordRoute, routesWhiteList } from '@/config'
+
+VabProgress.configure({
+  easing: 'ease',
+  speed: 500,
+  trickleSpeed: 200,
+  showSpinner: false,
+})
+router.beforeResolve(async (to, from, next) => {
+  if (progressBar) VabProgress.start()
+  let hasToken = store.getters['user/accessToken']
+
+  if (!loginInterception) hasToken = true
+
+  if (hasToken) {
+    if (to.path === '/login') {
+      next({ path: '/' })
+      if (progressBar) VabProgress.done()
+    } else {
+      const hasPermissions = store.getters['user/permissions'] && store.getters['user/permissions'].length > 0
+      if (hasPermissions) {
+        next()
+      } else {
+        try {
+          let permissions
+          if (!loginInterception) {
+            //settings.js loginInterception为false时，创建虚拟权限
+            await store.dispatch('user/setPermissions', ['admin'])
+            permissions = ['admin']
+          } else {
+            permissions = await store.dispatch('user/getUserInfo')
+          }
+
+          let accessRoutes = []
+          if (authentication === 'intelligence') {
+            accessRoutes = await store.dispatch('routes/setRoutes', permissions)
+          } else if (authentication === 'all') {
+            accessRoutes = await store.dispatch('routes/setAllRoutes')
+          }
+          accessRoutes.forEach((item) => {
+            router.addRoute(item)
+          })
+          next({ ...to, replace: true })
+        } catch {
+          await store.dispatch('user/resetAccessToken')
+          if (progressBar) VabProgress.done()
+        }
+      }
+    }
+  } else {
+    if (routesWhiteList.indexOf(to.path) !== -1) {
+      next()
+    } else {
+      if (recordRoute) {
+        next(`/login?redirect=${to.path}`)
+      } else {
+        next('/login')
+      }
+
+      if (progressBar) VabProgress.done()
+    }
+  }
+  document.title = getPageTitle(to.meta.title)
+})
+router.afterEach(() => {
+  if (progressBar) VabProgress.done()
+})
diff --git a/src/config/setting.config.js b/src/config/setting.config.js
new file mode 100644
index 0000000..ac70f1a
--- /dev/null
+++ b/src/config/setting.config.js
@@ -0,0 +1,66 @@
+/**
+ * @description 导出默认通用配置
+ */
+const setting = {
+  // 开发以及部署时的URL
+  publicPath: '',
+  // 生产环境构建文件的目录名
+  outputDir: 'dist',
+  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
+  assetsDir: 'static',
+  // 开发环境每次保存时是否输出为eslint编译警告
+  lintOnSave: true,
+  // 进行编译的依赖
+  transpileDependencies: [],
+  //标题 （包括初次加载雪花屏的标题 页面的标题 浏览器的标题）
+  title: 'Wagoo管理后台',
+  //简写
+  abbreviation: 'vab',
+  //开发环境端口号
+  devPort: '8090',
+  //copyright
+  copyright: 'zxwk1998',
+  //是否显示页面底部自定义版权信息
+  footerCopyright: true,
+  //是否显示顶部进度条
+  progressBar: true,
+  //缓存路由的最大数量
+  keepAliveMaxNum: 99,
+  // 路由模式，可选值为 history 或 hash
+  routerMode: 'hash',
+  //不经过token校验的路由
+  routesWhiteList: ['/login', '/register', '/404', '/401'],
+  //加载时显示文字
+  loadingText: '正在加载中...',
+  //token名称
+  tokenName: 'accessToken',
+  //token在localStorage、sessionStorage存储的key的名称
+  tokenTableName: 'vue-admin-better-2024',
+  //token存储位置localStorage sessionStorage
+  storage: 'localStorage',
+  //token失效回退到登录页时是否记录本次的路由
+  recordRoute: true,
+  //是否显示logo，不显示时设置false，显示时请填写remixIcon图标名称，暂时只支持设置remixIcon
+  logo: 'vuejs-fill',
+  //是否显示在页面高亮错误
+  errorLog: ['development'],
+  //是否开启登录拦截
+  loginInterception: true,
+  //是否开启登录RSA加密
+  loginRSA: true,
+  //intelligence和all两种方式，前者后端权限只控制permissions不控制view文件的import（前后端配合，减轻后端工作量），all方式完全交给后端前端只负责加载
+  authentication: 'intelligence',
+  //vertical布局时是否只保持一个子菜单的展开
+  uniqueOpened: true,
+  //vertical布局时默认展开的菜单path，使用逗号隔开建议只展开一个
+  defaultOopeneds: ['/vab'],
+  //需要加loading层的请求，防止重复提交
+  debounce: ['doEdit'],
+  //需要自动注入并加载的模块
+  providePlugin: {},
+  //代码生成机生成在view下的文件夹名称
+  templateFolder: 'project',
+  //是否显示终端donation打印
+  donation: true,
+}
+module.exports = setting
diff --git a/src/config/settings.js b/src/config/settings.js
new file mode 100644
index 0000000..c070a66
--- /dev/null
+++ b/src/config/settings.js
@@ -0,0 +1,6 @@
+/**
+ * @description 3个子配置，通用配置|主题配置|网络配置
+ */
+//默认配置
+const { setting, theme, network } = require('./')
+module.exports = Object.assign({}, setting, theme, network)
diff --git a/src/config/theme.config.js b/src/config/theme.config.js
new file mode 100644
index 0000000..b6a69d2
--- /dev/null
+++ b/src/config/theme.config.js
@@ -0,0 +1,14 @@
+/**
+ * @description 导出默认主题配置
+ */
+const theme = {
+  //是否国定头部 固定fixed 不固定noFixed
+  header: 'fixed',
+  //横纵布局 horizontal vertical
+  layout: 'vertical',
+  //是否开启主题配置按钮
+  themeBar: true,
+  //是否显示多标签页
+  tabsBar: true,
+}
+module.exports = theme
diff --git a/src/layouts/EmptyLayout.vue b/src/layouts/EmptyLayout.vue
new file mode 100644
index 0000000..98240ae
--- /dev/null
+++ b/src/layouts/EmptyLayout.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>
diff --git a/src/layouts/components/VabAd/index.vue b/src/layouts/components/VabAd/index.vue
new file mode 100644
index 0000000..25d0132
--- /dev/null
+++ b/src/layouts/components/VabAd/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="vab-ad">
+    <!-- <el-carousel v-if="adList" :autoplay="true" :interval="3000" direction="vertical" height="30px" indicator-position="none">
+      <el-carousel-item v-for="(item, index) in adList" :key="index">
+        <el-tag type="warning">付费版本 Ad</el-tag>
+        <a :href="item.url" target="_blank">{{ item.title }}</a>
+      </el-carousel-item>
+    </el-carousel> -->
+  </div>
+</template>
+<script>
+  import { getList } from '@/api/ad'
+
+  export default {
+    name: 'VabAd',
+    data() {
+      return {
+        nodeEnv: process.env.NODE_ENV,
+        adList: [],
+      }
+    },
+    created() {
+      this.fetchData()
+    },
+    methods: {
+      async fetchData() {
+        const { data } = await getList()
+        this.adList = data
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .vab-ad {
+    margin-top: 7px;
+    height: 30px;
+    padding-right: $base-padding;
+    padding-left: $base-padding;
+    margin-bottom: -20px;
+    line-height: 32px;
+    cursor: pointer;
+
+    a {
+      margin-left: 5px;
+      color: #888;
+    }
+
+    ::v-deep {
+      .el-carousel__container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/components/VabAppMain/index.vue b/src/layouts/components/VabAppMain/index.vue
new file mode 100644
index 0000000..c1a7983
--- /dev/null
+++ b/src/layouts/components/VabAppMain/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <div v-if="routerView" class="app-main-container">
+    <vab-github-corner />
+    <transition mode="out-in" name="fade-transform">
+      <keep-alive :include="cachedRoutes" :max="keepAliveMaxNum">
+        <router-view :key="key" class="app-main-height" />
+      </keep-alive>
+    </transition>
+    <!-- <footer v-show="footerCopyright" class="footer-copyright">
+      Copyright
+      <vab-icon :icon="['fas', 'copyright']"></vab-icon>
+      vue-admin-better 开源免费版 {{ fullYear }}
+    </footer> -->
+  </div>
+</template>
+
+<script>
+  import { mapActions, mapGetters } from 'vuex'
+  import { copyright, footerCopyright, keepAliveMaxNum, title } from '@/config'
+
+  export default {
+    name: 'VabAppMain',
+    data() {
+      return {
+        show: false,
+        fullYear: new Date().getFullYear(),
+        copyright,
+        title,
+        keepAliveMaxNum,
+        routerView: true,
+        footerCopyright,
+      }
+    },
+    computed: {
+      ...mapGetters({
+        visitedRoutes: 'tabsBar/visitedRoutes',
+        device: 'settings/device',
+      }),
+      cachedRoutes() {
+        const cachedRoutesArr = []
+        this.visitedRoutes.forEach((item) => {
+          if (!item.meta.noKeepAlive) {
+            cachedRoutesArr.push(item.name)
+          }
+        })
+        return cachedRoutesArr
+      },
+      key() {
+        return this.$route.path
+      },
+    },
+    watch: {
+      $route: {
+        handler(route) {
+          if ('mobile' === this.device) this.foldSideBar()
+        },
+        immediate: true,
+      },
+    },
+    created() {
+      const handleReloadRouterView = () => {
+        this.routerView = false
+        this.$nextTick(() => {
+          this.routerView = true
+        })
+      }
+
+      //重载所有路由
+      this.$baseEventBus.$on('reload-router-view', handleReloadRouterView)
+
+      this.$once('hook:beforeDestroy', () => {
+        this.$baseEventBus.$off('reload-router-view', handleReloadRouterView)
+      })
+    },
+    mounted() {},
+    methods: {
+      ...mapActions({
+        foldSideBar: 'settings/foldSideBar',
+      }),
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .app-main-container {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+
+    .vab-keel {
+      margin: $base-padding;
+    }
+
+    .app-main-height {
+      min-height: $base-app-main-height;
+    }
+
+    .footer-copyright {
+      min-height: 55px;
+      line-height: 55px;
+      color: rgba(0, 0, 0, 0.45);
+      text-align: center;
+      border-top: 1px dashed $base-border-color;
+    }
+  }
+</style>
diff --git a/src/layouts/components/VabAvatar/index.vue b/src/layouts/components/VabAvatar/index.vue
new file mode 100644
index 0000000..506fc80
--- /dev/null
+++ b/src/layouts/components/VabAvatar/index.vue
@@ -0,0 +1,254 @@
+<template>
+  <el-dropdown @command="handleCommand" trigger="click">
+    <div class="avatar-container">
+      <div class="avatar-wrapper">
+        <img :src="avatar" alt="用户头像" class="user-avatar" />
+      </div>
+      <!-- <div class="user-info">
+        <div class="username">{{ username }}</div>
+      </div> -->
+    </div>
+
+    <el-dropdown-menu slot="dropdown" class="custom-dropdown">
+      <div class="dropdown-header">
+        <img :src="avatar" alt="用户头像" class="header-avatar" />
+        <div class="header-info">
+          <div class="header-username">{{ username }}</div>
+          <div class="header-email">admin@example.com</div>
+        </div>
+      </div>
+
+      <!-- <el-dropdown-item command="personalCenter" class="dropdown-item">
+        <i class="el-icon-user-solid"></i>
+        <span>个人中心</span>
+      </el-dropdown-item>
+
+      <el-dropdown-item command="settings" class="dropdown-item">
+        <i class="el-icon-setting"></i>
+        <span>系统设置</span>
+      </el-dropdown-item> -->
+
+      <!-- <el-divider></el-divider> -->
+
+      <!-- <el-dropdown-item command="github" class="dropdown-item">
+        <i class="el-icon-link"></i>
+        <span>GitHub 地址</span>
+      </el-dropdown-item>
+
+      <el-dropdown-item command="gitee" class="dropdown-item">
+        <i class="el-icon-link"></i>
+        <span>码云地址</span>
+      </el-dropdown-item>
+
+      <el-dropdown-item command="pro" class="dropdown-item">
+        <i class="el-icon-link"></i>
+        <span>Admin Pro 地址</span>
+      </el-dropdown-item>
+
+      <el-dropdown-item command="plus" class="dropdown-item">
+        <i class="el-icon-link"></i>
+        <span>Admin Plus 地址</span>
+      </el-dropdown-item>
+
+      <el-dropdown-item command="shop" class="dropdown-item">
+        <i class="el-icon-link"></i>
+        <span>Shop Vite 地址</span>
+      </el-dropdown-item>
+
+      <el-dropdown-item command="job" class="dropdown-item">
+        <i class="el-icon-link"></i>
+        <span>好工作就业参考网</span>
+      </el-dropdown-item>
+
+      <el-divider></el-divider> -->
+
+      <el-dropdown-item command="logout" class="dropdown-item logout-item">
+        <i class="el-icon-switch-button"></i>
+        <span>退出登录</span>
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+  import { recordRoute } from '@/config'
+
+  export default {
+    name: 'VabAvatar',
+    computed: {
+      ...mapGetters({
+        avatar: 'user/avatar',
+        username: 'user/username',
+      }),
+    },
+    methods: {
+      handleCommand(command) {
+        switch (command) {
+          case 'logout':
+            this.logout()
+            break
+          case 'personalCenter':
+            this.personalCenter()
+            break
+          case 'settings':
+            this.settings()
+            break
+          case 'github':
+            window.open('https://github.com/zxwk1998/vue-admin-better')
+            break
+          case 'gitee':
+            window.open('https://gitee.com/chu1204505056/vue-admin-better')
+            break
+          case 'pro':
+            window.open('https://vuejs-core.cn/admin-pro/')
+            break
+          case 'plus':
+            window.open('https://vuejs-core.cn/admin-plus/')
+            break
+          case 'shop':
+            window.open('https://vuejs-core.cn/shop-vite/')
+            break
+          case 'job':
+            window.open('https://job.vuejs-core.cn/')
+            break
+        }
+      },
+      personalCenter() {
+        this.$router.push('/personalCenter/personalCenter')
+      },
+      settings() {
+        this.$message.info('系统设置功能开发中...')
+      },
+      logout() {
+        this.$baseConfirm('您确定要退出' + this.$baseTitle + '吗?', null, async () => {
+          await this.$store.dispatch('user/logout')
+          if (recordRoute) {
+            const fullPath = this.$route.fullPath
+            this.$router.push(`/login?redirect=${fullPath}`)
+          } else {
+            this.$router.push('/login')
+          }
+        })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .avatar-container {
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    cursor: pointer;
+
+    .avatar-wrapper {
+      position: relative;
+
+      .user-avatar {
+        width: 37.5px;
+        height: 37.5px;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    .user-info {
+      flex: 1;
+      min-width: 0;
+
+      .username {
+        font-size: 14px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 2px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .user-role {
+        font-size: 12px;
+        color: #666;
+        opacity: 0.8;
+      }
+    }
+
+    .dropdown-icon {
+      margin-left: 8px;
+      color: #666;
+    }
+  }
+
+  .custom-dropdown {
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.95);
+    padding: 0;
+    min-width: 220px;
+
+    .dropdown-header {
+      display: flex;
+      align-items: center;
+      padding: 16px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+      background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
+      border-radius: 12px 12px 0 0;
+      color: white;
+
+      .header-avatar {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        margin-right: 12px;
+        object-fit: cover;
+      }
+
+      .header-info {
+        flex: 1;
+
+        .header-username {
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 4px;
+        }
+
+        .header-email {
+          font-size: 12px;
+          opacity: 0.8;
+        }
+      }
+    }
+
+    .dropdown-item {
+      display: flex;
+      align-items: center;
+      padding: 8px 16px;
+      border-radius: 0;
+
+      i {
+        margin-right: 12px;
+        font-size: 16px;
+        width: 16px;
+        text-align: center;
+      }
+
+      span {
+        font-size: 14px;
+      }
+
+      &.logout-item {
+        color: #f56c6c;
+      }
+    }
+
+    .el-divider {
+      margin: 8px 0;
+    }
+  }
+</style>
diff --git a/src/layouts/components/VabBreadcrumb/index.vue b/src/layouts/components/VabBreadcrumb/index.vue
new file mode 100644
index 0000000..d6d6d43
--- /dev/null
+++ b/src/layouts/components/VabBreadcrumb/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <el-breadcrumb class="breadcrumb-container hidden-sm-and-down" separator=">">
+    <el-breadcrumb-item v-for="item in list" :key="item.path">
+      {{ item.meta.title }}
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script>
+  export default {
+    name: 'VabBreadcrumb',
+    data() {
+      return {
+        list: this.getBreadcrumb(),
+      }
+    },
+    watch: {
+      $route() {
+        this.list = this.getBreadcrumb()
+      },
+    },
+    methods: {
+      getBreadcrumb() {
+        return this.$route.matched.filter((item) => item.name && item.meta.title)
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .breadcrumb-container {
+    height: $base-nav-bar-height;
+    font-size: $base-font-size-default;
+    line-height: $base-nav-bar-height;
+
+    ::v-deep {
+      .el-breadcrumb__item {
+        .el-breadcrumb__inner {
+          a {
+            display: flex;
+            float: left;
+            font-weight: normal;
+            color: #515a6e;
+
+            i {
+              margin-right: 3px;
+            }
+          }
+        }
+
+        &:last-child {
+          .el-breadcrumb__inner {
+            a {
+              color: #999;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/components/VabColorfullIcon/index.vue b/src/layouts/components/VabColorfullIcon/index.vue
new file mode 100644
index 0000000..840de3c
--- /dev/null
+++ b/src/layouts/components/VabColorfullIcon/index.vue
@@ -0,0 +1,65 @@
+<template>
+  <img
+    v-if="isExternal"
+    :src="styleExternalIcon"
+    class="svg-external-icon svg-icon"
+    v-on="$listeners"
+  />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+  import { isExternal } from '@/utils/validate'
+
+  export default {
+    name: 'VabColorfulIcon',
+    props: {
+      iconClass: {
+        type: String,
+        required: true,
+      },
+      className: {
+        type: String,
+        default: '',
+      },
+    },
+    computed: {
+      isExternal() {
+        return isExternal(this.iconClass)
+      },
+      iconName() {
+        return `#colorful-icon-${this.iconClass}`
+      },
+      svgClass() {
+        if (this.className) {
+          return 'svg-icon ' + this.className
+        } else {
+          return 'svg-icon'
+        }
+      },
+      styleExternalIcon() {
+        return this.iconClass
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .svg-icon {
+    width: 1em;
+    height: 1em;
+    overflow: hidden;
+    vertical-align: -0.15em;
+    fill: currentColor;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .svg-external-icon {
+    display: inline-block;
+  }
+</style>
diff --git a/src/layouts/components/VabErrorLog/index.vue b/src/layouts/components/VabErrorLog/index.vue
new file mode 100644
index 0000000..e2681ce
--- /dev/null
+++ b/src/layouts/components/VabErrorLog/index.vue
@@ -0,0 +1,128 @@
+<template>
+  <div v-if="errorLogs.length > 0">
+    <el-badge
+      :value="errorLogs.length"
+      @click.native="dialogTableVisible = true"
+    >
+      <el-button type="danger">
+        <vab-icon :icon="['fas', 'bug']" />
+      </el-button>
+    </el-badge>
+
+    <el-dialog
+      :visible.sync="dialogTableVisible"
+      append-to-body
+      title="vue-admin-better异常捕获(温馨提示：错误必须解决)"
+      width="70%"
+    >
+      <el-table :data="errorLogs">
+        <el-table-column label="报错路由">
+          <template slot-scope="{ row }">
+            <a :href="row.url" target="_blank">
+              <el-tag type="success">{{ row.url }}</el-tag>
+            </a>
+          </template>
+        </el-table-column>
+        <el-table-column label="错误信息">
+          <template slot-scope="{ row }">
+            <el-tag type="danger">{{ decodeUnicode(row.err.message) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="错误详情" width="120">
+          <template slot-scope="scope">
+            <el-popover placement="top-start" trigger="hover">
+              <div style="color: red">
+                {{ scope.row.err.stack }}
+              </div>
+              <el-button slot="reference">查看</el-button>
+            </el-popover>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="380">
+          <template slot-scope="{ row }">
+            <a
+              v-for="(item, index) in searchList"
+              :key="index"
+              :href="item.url + decodeUnicode(row.err.message)"
+              target="_blank"
+            >
+              <el-button style="margin-left: 5px" type="primary">
+                <vab-icon :icon="['fas', 'search']" />
+                {{ item.title }}
+              </el-button>
+            </a>
+          </template>
+        </el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogTableVisible = false">取 消</el-button>
+        <el-button icon="el-icon-delete" type="danger" @click="clearAll">
+          暂不显示
+        </el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import { abbreviation, title } from '@/config'
+  import { mapGetters } from 'vuex'
+
+  export default {
+    name: 'VabErrorLog',
+
+    data() {
+      return {
+        dialogTableVisible: false,
+        title: title,
+        abbreviation: abbreviation,
+        searchList: [
+          {
+            title: '百度搜索',
+            url: 'https://www.baidu.com/baidu?wd=',
+          },
+          {
+            title: '谷歌搜索',
+            url: 'https://www.google.com/search?q=',
+          },
+          {
+            title: 'Magi搜索',
+            url: 'https://magi.com/search?q=',
+          },
+        ],
+      }
+    },
+
+    computed: {
+      ...mapGetters({
+        errorLogs: 'errorLog/errorLogs',
+      }),
+    },
+    methods: {
+      clearAll() {
+        this.dialogTableVisible = false
+        this.$store.dispatch('errorLog/clearErrorLog')
+      },
+      decodeUnicode(str) {
+        str = str.replace(/\\/g, '%')
+        str = unescape(str)
+        str = str.replace(/%/g, '\\')
+        str = str.replace(/\\/g, '')
+        return str
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep {
+    .el-badge {
+      .el-button {
+        display: flex;
+        align-items: center;
+        justify-items: center;
+        height: 28px;
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/components/VabFullScreen/index.vue b/src/layouts/components/VabFullScreen/index.vue
new file mode 100644
index 0000000..b5885af
--- /dev/null
+++ b/src/layouts/components/VabFullScreen/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <span :title="isFullscreen ? '退出全屏' : '进入全屏'">
+    <vab-icon :icon="['fas', isFullscreen ? 'compress' : 'expand']" @click="click"></vab-icon>
+  </span>
+</template>
+
+<script>
+  import screenfull from 'screenfull'
+
+  export default {
+    name: 'VabFullScreen',
+    data() {
+      return {
+        isFullscreen: false,
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.destroy()
+    },
+    methods: {
+      click() {
+        if (!screenfull.isEnabled) {
+          this.$baseMessage('开启全屏失败', 'error')
+          return false
+        }
+        screenfull.toggle()
+        this.$emit('refresh')
+      },
+      change() {
+        this.isFullscreen = screenfull.isFullscreen
+      },
+      init() {
+        if (screenfull.isEnabled) {
+          screenfull.on('change', this.change)
+        }
+      },
+      destroy() {
+        if (screenfull.isEnabled) {
+          screenfull.off('change', this.change)
+        }
+      },
+    },
+  }
+</script>
diff --git a/src/layouts/components/VabGithubCorner/index.vue b/src/layouts/components/VabGithubCorner/index.vue
new file mode 100644
index 0000000..d2dfb31
--- /dev/null
+++ b/src/layouts/components/VabGithubCorner/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <!-- <a
+    aria-label="View source on Github"
+    class="github-corner"
+    href="https://github.com/zxwk1998/vue-admin-better"
+    target="_blank"
+  >
+    <svg
+      aria-hidden="true"
+      class="github-color"
+      height="80"
+      viewBox="0 0 250 250"
+      width="80"
+    >
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+      <path
+        class="octo-arm"
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor"
+        style="transform-origin: 130px 106px"
+      />
+      <path
+        class="octo-body"
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor"
+      />
+    </svg>
+  </a> -->
+</template>
+<script>
+  export default {
+    name: 'VabGithubCorner',
+  }
+</script>
+
+<style lang="scss" scoped>
+  .github-corner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: $base-z-index - 3;
+
+    .octo-arm {
+      animation: octocat-wave 560ms ease-in-out infinite;
+    }
+
+    &:hover {
+      .octo-arm {
+        animation: octocat-wave 560ms ease-in-out infinite;
+      }
+    }
+
+    .github-color {
+      color: #fff;
+      fill: $base-color-blue;
+    }
+  }
+
+  @keyframes octocat-wave {
+    0%,
+    100% {
+      transform: rotate(0);
+    }
+
+    20%,
+    60% {
+      transform: rotate(-25deg);
+    }
+
+    40%,
+    80% {
+      transform: rotate(100deg);
+    }
+  }
+</style>
diff --git a/src/layouts/components/VabLogo/index.vue b/src/layouts/components/VabLogo/index.vue
new file mode 100644
index 0000000..b79ebd0
--- /dev/null
+++ b/src/layouts/components/VabLogo/index.vue
@@ -0,0 +1,95 @@
+<template>
+  <div :class="'logo-container-' + layout">
+    <router-link to="/">
+      <!-- 这里是logo变更的位置 -->
+      <img class="logo" src="@/assets/Wagoo.png" alt="">
+      <!-- <svg v-if="logo" xmlns="@/assets" viewBox="0 0 24 24" class="logo">
+        <path fill="none" d="M0 0h24v24H0z" />
+        <path d="M1 3h4l7 12 7-12h4L12 22 1 3zm8.667 0L12 7l2.333-4h4.035L12 14 5.632 3h4.035z" />
+      </svg> -->
+      <span :class="{ 'hidden-xs-only': layout === 'horizontal' }" :title="title" class="title">
+        {{ title }}
+      </span>
+    </router-link>
+  </div>
+</template>
+<script>
+  import { mapGetters } from 'vuex'
+
+  export default {
+    name: 'VabLogo',
+    data() {
+      return {
+        title: this.$baseTitle,
+      }
+    },
+    computed: {
+      ...mapGetters({
+        logo: 'settings/logo',
+        layout: 'settings/layout',
+      }),
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  @mixin container {
+    position: relative;
+    height: $base-top-bar-height;
+    overflow: hidden;
+    line-height: $base-top-bar-height;
+    background: $base-menu-background;
+  }
+
+  @mixin logo {
+    display: inline-block;
+    width: 34px;
+    height: 34px;
+    margin-right: 3px;
+    color: $base-title-color;
+    fill: $base-title-color;
+    vertical-align: middle;
+  }
+
+  @mixin title {
+    display: inline-block;
+    overflow: hidden;
+    font-size: 24px;
+    line-height: 55px;
+    color: $base-title-color;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+
+  .logo-container-horizontal {
+    @include container;
+
+    .logo {
+      @include logo;
+    }
+
+    .title {
+      @include title;
+    }
+  }
+
+  .logo-container-vertical {
+    @include container;
+
+    height: $base-logo-height;
+    line-height: $base-logo-height;
+    text-align: center;
+
+    .logo {
+      @include logo;
+      fill: #fff !important;
+    }
+
+    .title {
+      @include title;
+
+      max-width: calc(#{$base-left-menu-width} - 60px);
+      line-height: $base-logo-height; // 修复：使line-height与容器高度一致
+    }
+  }
+</style>
diff --git a/src/layouts/components/VabNav/index.vue b/src/layouts/components/VabNav/index.vue
new file mode 100644
index 0000000..822e76a
--- /dev/null
+++ b/src/layouts/components/VabNav/index.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="nav-container">
+    <el-row :gutter="15">
+      <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="4">
+        <div class="left-panel">
+          <vab-icon :icon="['fas', collapse ? 'indent' : 'outdent']" class="fold-unfold" @click="handleCollapse" />
+          <vab-breadcrumb class="hidden-xs-only" />
+        </div>
+      </el-col>
+      <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="20">
+        <div class="right-panel">
+          <vab-error-log />
+          <vab-full-screen @refresh="refreshRoute" />
+          <vab-theme class="hidden-xs-only" />
+          <vab-icon :icon="['fas', 'sync-alt']" :pulse="pulse" title="重载所有路由" @click="refreshRoute" />
+          <vab-avatar />
+          <!--  <vab-icon
+            title="退出系统"
+            :icon="['fas', 'sign-out-alt']"
+            @click="logout"
+          />-->
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import { mapActions, mapGetters } from 'vuex'
+
+  export default {
+    name: 'VabNav',
+    data() {
+      return {
+        pulse: false,
+        timeOutID: null,
+      }
+    },
+    computed: {
+      ...mapGetters({
+        collapse: 'settings/collapse',
+        visitedRoutes: 'tabsBar/visitedRoutes',
+        device: 'settings/device',
+        routes: 'routes/routes',
+      }),
+    },
+    methods: {
+      ...mapActions({
+        changeCollapse: 'settings/changeCollapse',
+      }),
+      handleCollapse() {
+        this.changeCollapse()
+      },
+      async refreshRoute() {
+        this.$baseEventBus.$emit('reload-router-view')
+        this.pulse = true
+        this.timeOutID = setTimeout(() => {
+          this.pulse = false
+        }, 1000)
+      },
+    },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .nav-container {
+    position: relative;
+    height: $base-nav-bar-height;
+    padding-right: $base-padding;
+    padding-left: $base-padding;
+    overflow: hidden;
+    user-select: none;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.3) 100%);
+      pointer-events: none;
+    }
+
+    .left-panel {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-items: center;
+      height: $base-nav-bar-height;
+    }
+
+    ::v-deep {
+      .fold-unfold {
+        margin-right: 12px;
+      }
+      svg {
+        width: 1em;
+        height: 1em;
+        padding: 9px;
+        color: rgba(0, 0, 0, 0.7);
+        background: rgba(255, 255, 255, 0.7);
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        border-radius: 50%;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+
+        &:hover {
+          color: rgba(0, 0, 0, 0.9);
+          background: rgba(255, 255, 255, 0.9);
+          border-color: rgba(0, 0, 0, 0.15);
+          transform: translateY(-1px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
+        }
+
+        &:active {
+          transform: translateY(0);
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
+        }
+      }
+
+      button {
+        svg {
+          margin-right: 0;
+          color: rgba(255, 255, 255, 0.95);
+          background: linear-gradient(135deg, rgba(77, 138, 240, 0.9) 0%, rgba(52, 120, 246, 0.95) 100%);
+          border-color: rgba(77, 138, 240, 0.8);
+          cursor: pointer;
+          fill: rgba(255, 255, 255, 0.95);
+
+          &:hover {
+            background: linear-gradient(135deg, rgba(77, 138, 240, 1) 0%, rgba(52, 120, 246, 1) 100%);
+            border-color: rgba(77, 138, 240, 1);
+            box-shadow: 0 4px 12px rgba(77, 138, 240, 0.3), 0 2px 4px rgba(77, 138, 240, 0.2);
+          }
+        }
+      }
+
+      .el-badge {
+        margin-right: 0;
+
+        .el-button {
+          background: rgba(255, 255, 255, 0.7);
+          border: 1px solid rgba(0, 0, 0, 0.08);
+          border-radius: 12px;
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.9);
+            border-color: rgba(0, 0, 0, 0.15);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
+          }
+        }
+      }
+
+      .user-name {
+        color: rgba(0, 0, 0, 0.8);
+        font-weight: 500;
+      }
+
+      .user-avatar {
+        border: 2px solid rgba(255, 255, 255, 0.8);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+        &:hover {
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+          transform: translateY(-1px);
+        }
+      }
+    }
+
+    .right-panel {
+      position: relative;
+      display: flex;
+      align-content: center;
+      align-items: center;
+      justify-content: flex-end;
+      height: $base-nav-bar-height;
+      gap: 12px;
+    }
+  }
+</style>
diff --git a/src/layouts/components/VabQueryForm/VabQueryFormBottomPanel.vue b/src/layouts/components/VabQueryForm/VabQueryFormBottomPanel.vue
new file mode 100644
index 0000000..327dc83
--- /dev/null
+++ b/src/layouts/components/VabQueryForm/VabQueryFormBottomPanel.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-col :span="24">
+    <div class="bottom-panel">
+      <slot></slot>
+    </div>
+  </el-col>
+</template>
+
+<script>
+  export default {
+    name: 'VabQueryFormBottomPanel',
+    props: {},
+    data() {
+      return {}
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  }
+</script>
diff --git a/src/layouts/components/VabQueryForm/VabQueryFormLeftPanel.vue b/src/layouts/components/VabQueryForm/VabQueryFormLeftPanel.vue
new file mode 100644
index 0000000..38795e4
--- /dev/null
+++ b/src/layouts/components/VabQueryForm/VabQueryFormLeftPanel.vue
@@ -0,0 +1,25 @@
+<template>
+  <el-col :lg="span" :md="24" :sm="24" :xl="span" :xs="24">
+    <div class="left-panel">
+      <slot></slot>
+    </div>
+  </el-col>
+</template>
+
+<script>
+  export default {
+    name: 'VabQueryFormLeftPanel',
+    props: {
+      span: {
+        type: Number,
+        default: 14,
+      },
+    },
+    data() {
+      return {}
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  }
+</script>
diff --git a/src/layouts/components/VabQueryForm/VabQueryFormRightPanel.vue b/src/layouts/components/VabQueryForm/VabQueryFormRightPanel.vue
new file mode 100644
index 0000000..0e3c4e3
--- /dev/null
+++ b/src/layouts/components/VabQueryForm/VabQueryFormRightPanel.vue
@@ -0,0 +1,25 @@
+<template>
+  <el-col :lg="span" :md="24" :sm="24" :xl="span" :xs="24">
+    <div class="right-panel">
+      <slot></slot>
+    </div>
+  </el-col>
+</template>
+
+<script>
+  export default {
+    name: 'VabQueryFormRightPanel',
+    props: {
+      span: {
+        type: Number,
+        default: 10,
+      },
+    },
+    data() {
+      return {}
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  }
+</script>
diff --git a/src/layouts/components/VabQueryForm/VabQueryFormTopPanel.vue b/src/layouts/components/VabQueryForm/VabQueryFormTopPanel.vue
new file mode 100644
index 0000000..7a48e3f
--- /dev/null
+++ b/src/layouts/components/VabQueryForm/VabQueryFormTopPanel.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-col :span="24">
+    <div class="top-panel">
+      <slot></slot>
+    </div>
+  </el-col>
+</template>
+
+<script>
+  export default {
+    name: 'VabQueryFormTopPanel',
+    props: {},
+    data() {
+      return {}
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  }
+</script>
diff --git a/src/layouts/components/VabQueryForm/index.vue b/src/layouts/components/VabQueryForm/index.vue
new file mode 100644
index 0000000..f49a6bb
--- /dev/null
+++ b/src/layouts/components/VabQueryForm/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <el-row :gutter="0" class="vab-query-form">
+    <slot></slot>
+  </el-row>
+</template>
+
+<script>
+  export default {
+    name: 'VabQueryForm',
+    props: {},
+    data() {
+      return {}
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  }
+</script>
+
+<style lang="scss" scoped>
+  @mixin panel {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .vab-query-form {
+    margin-bottom: 10px;
+
+    ::v-deep {
+      .top-panel {
+        @include panel;
+      }
+
+      .bottom-panel {
+        @include panel;
+
+        padding-top: 14px;
+        border-top: 1px solid #dcdfe6;
+      }
+
+      .left-panel {
+        @include panel;
+
+        > .el-button,
+        .el-form-item {
+          margin: 5px;
+        }
+      }
+
+      .right-panel {
+        @include panel;
+
+        justify-content: flex-end;
+
+        .el-form-item {
+          margin: 5px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/components/VabSide/components/VabMenuItem.vue b/src/layouts/components/VabSide/components/VabMenuItem.vue
new file mode 100644
index 0000000..fc34144
--- /dev/null
+++ b/src/layouts/components/VabSide/components/VabMenuItem.vue
@@ -0,0 +1,84 @@
+<template>
+  <el-menu-item :index="handlePath(routeChildren.path)" @click="handleLink">
+    <vab-icon
+      v-if="routeChildren.meta.icon"
+      :icon="['fas', routeChildren.meta.icon]"
+      class="vab-fas-icon"
+    />
+    <span>{{ routeChildren.meta.title }}</span>
+    <el-tag
+      v-if="routeChildren.meta && routeChildren.meta.badge"
+      effect="dark"
+      type="danger"
+    >
+      {{ routeChildren.meta.badge }}
+    </el-tag>
+  </el-menu-item>
+</template>
+
+<script>
+  import { isExternal } from '@/utils/validate'
+  import path from 'path'
+
+  export default {
+    name: 'VabMenuItem',
+    props: {
+      routeChildren: {
+        type: Object,
+        default() {
+          return null
+        },
+      },
+      item: {
+        type: Object,
+        default() {
+          return null
+        },
+      },
+      fullPath: {
+        type: String,
+        default: '',
+      },
+    },
+    methods: {
+      handlePath(routePath) {
+        if (isExternal(routePath)) {
+          return routePath
+        }
+        if (isExternal(this.fullPath)) {
+          return this.fullPath
+        }
+        return path.resolve(this.fullPath, routePath)
+      },
+      handleLink() {
+        const routePath = this.routeChildren.path
+        const target = this.routeChildren.meta.target
+
+        if (target === '_blank') {
+          if (isExternal(routePath)) {
+            window.open(routePath)
+          } else if (isExternal(this.fullPath)) {
+            window.open(this.fullPath)
+          } else if (
+            this.$route.path !== path.resolve(this.fullPath, routePath)
+          ) {
+            let routeData = this.$router.resolve(
+              path.resolve(this.fullPath, routePath)
+            )
+            window.open(routeData.href)
+          }
+        } else {
+          if (isExternal(routePath)) {
+            window.location.href = routePath
+          } else if (isExternal(this.fullPath)) {
+            window.location.href = this.fullPath
+          } else if (
+            this.$route.path !== path.resolve(this.fullPath, routePath)
+          ) {
+            this.$router.push(path.resolve(this.fullPath, routePath))
+          }
+        }
+      },
+    },
+  }
+</script>
diff --git a/src/layouts/components/VabSide/components/VabSideItem.vue b/src/layouts/components/VabSide/components/VabSideItem.vue
new file mode 100644
index 0000000..21af61e
--- /dev/null
+++ b/src/layouts/components/VabSide/components/VabSideItem.vue
@@ -0,0 +1,96 @@
+<template>
+  <component :is="menuComponent" v-if="!item.hidden" :full-path="fullPath" :item="item" :route-children="routeChildren">
+    <template v-if="item.children && item.children.length">
+      <vab-side-item v-for="route in item.children" :key="route.path" :full-path="handlePath(route.path)" :item="route" />
+    </template>
+  </component>
+</template>
+
+<script>
+  import { isExternal } from '@/utils/validate'
+  import path from 'path'
+
+  export default {
+    name: 'VabSideItem',
+    props: {
+      item: {
+        type: Object,
+        required: true,
+      },
+      fullPath: {
+        type: String,
+        default: '',
+      },
+    },
+    data() {
+      this.onlyOneChild = null
+      return {}
+    },
+    computed: {
+      menuComponent() {
+        if (
+          this.handleChildren(this.item.children, this.item) &&
+          (!this.routeChildren.children || this.routeChildren.notShowChildren) &&
+          !this.item.alwaysShow
+        ) {
+          return 'VabMenuItem'
+        } else {
+          return 'VabSubmenu'
+        }
+      },
+    },
+    methods: {
+      handleChildren(children = [], parent) {
+        if (children === null) children = []
+        const showChildren = children.filter((item) => {
+          if (item.hidden) {
+            return false
+          } else {
+            this.routeChildren = item
+            return true
+          }
+        })
+        if (showChildren.length === 1) {
+          return true
+        }
+
+        if (showChildren.length === 0) {
+          this.routeChildren = {
+            ...parent,
+            path: '',
+            notShowChildren: true,
+          }
+          return true
+        }
+        return false
+      },
+      handlePath(routePath) {
+        if (isExternal(routePath)) {
+          return routePath
+        }
+        if (isExternal(this.fullPath)) {
+          return this.fullPath
+        }
+        return path.resolve(this.fullPath, routePath)
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vab-nav-icon {
+    margin-right: 4px;
+  }
+
+  ::v-deep {
+    .el-tag {
+      float: right;
+      height: 16px;
+      padding-right: 4px;
+      padding-left: 4px;
+      margin-top: calc((#{$base-menu-item-height} - 16px) / 2);
+      line-height: 16px;
+      border: 0;
+    }
+  }
+</style>
diff --git a/src/layouts/components/VabSide/components/VabSubmenu.vue b/src/layouts/components/VabSide/components/VabSubmenu.vue
new file mode 100644
index 0000000..7e67e3a
--- /dev/null
+++ b/src/layouts/components/VabSide/components/VabSubmenu.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-submenu ref="subMenu" :index="handlePath(item.path)" :popper-append-to-body="false">
+    <template slot="title">
+      <vab-icon v-if="item.meta && item.meta.icon" :icon="['fas', item.meta.icon]" class="vab-fas-icon" />
+      <vab-remix-icon v-if="item.meta && item.meta.remixIcon" :icon-class="item.meta.remixIcon" class="vab-remix-icon" />
+      <span>{{ item.meta.title }}</span>
+    </template>
+    <slot />
+  </el-submenu>
+</template>
+
+<script>
+  import { isExternal } from '@/utils/validate'
+  import path from 'path'
+
+  export default {
+    name: 'VabSubmenu',
+    props: {
+      routeChildren: {
+        type: Object,
+        default() {
+          return null
+        },
+      },
+      item: {
+        type: Object,
+        default() {
+          return null
+        },
+      },
+      fullPath: {
+        type: String,
+        default: '',
+      },
+    },
+    methods: {
+      handlePath(routePath) {
+        if (isExternal(routePath)) {
+          return routePath
+        }
+        if (isExternal(this.fullPath)) {
+          return this.fullPath
+        }
+        return path.resolve(this.fullPath, routePath)
+      },
+    },
+  }
+</script>
diff --git a/src/layouts/components/VabSide/index.vue b/src/layouts/components/VabSide/index.vue
new file mode 100644
index 0000000..6b9cffc
--- /dev/null
+++ b/src/layouts/components/VabSide/index.vue
@@ -0,0 +1,141 @@
+<template>
+  <el-scrollbar :class="{ 'is-collapse': collapse }" class="side-container">
+    <vab-logo />
+    <el-menu
+      active-text-color=" hsla(0, 0%, 100%, 0.95)"
+      background-color="#191a23"
+      :collapse="collapse"
+      :collapse-transition="false"
+      :default-active="activeMenu"
+      :default-openeds="defaultOpens"
+      text-color=" hsla(0, 0%, 100%, 0.95)"
+      :unique-opened="uniqueOpened"
+      mode="vertical"
+    >
+      <template v-for="route in routes">
+        <vab-side-item :full-path="route.path" :item="route" />
+      </template>
+    </el-menu>
+  </el-scrollbar>
+</template>
+<script>
+  import variables from '@/styles/variables.scss'
+  import { mapGetters } from 'vuex'
+  import { defaultOopeneds, uniqueOpened } from '@/config'
+
+  export default {
+    name: 'VabSide',
+    data() {
+      return {
+        uniqueOpened,
+      }
+    },
+    computed: {
+      ...mapGetters({
+        collapse: 'settings/collapse',
+        routes: 'routes/routes',
+      }),
+      defaultOpens() {
+        if (this.collapse) {
+        }
+        return defaultOopeneds
+      },
+      activeMenu() {
+        const route = this.$route
+        const { meta, path } = route
+        if (meta.activeMenu) {
+          return meta.activeMenu
+        }
+        return path
+      },
+      variables() {
+        return variables
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  @mixin active {
+    &:hover {
+      color: $base-color-white;
+      background-color: $base-menu-background-active !important;
+    }
+
+    &.is-active {
+      color: $base-color-white;
+      background-color: $base-menu-background-active !important;
+    }
+  }
+
+  .side-container {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $base-z-index;
+    width: $base-left-menu-width;
+    height: 100vh;
+    overflow: hidden;
+    background: $base-menu-background;
+    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    transition: width $base-transition-time;
+
+    &.is-collapse {
+      width: $base-left-menu-width-min;
+      border-right: 0;
+
+      ::v-deep {
+        .el-menu {
+          transition: width $base-transition-time;
+        }
+
+        .el-menu--collapse {
+          border-right: 0;
+
+          .el-submenu__icon-arrow {
+            right: 10px;
+            margin-top: -3px;
+          }
+
+          .el-menu-item,
+          .el-submenu {
+            text-align: center;
+          }
+        }
+      }
+    }
+
+    ::v-deep {
+      .el-scrollbar__wrap {
+        overflow-x: hidden;
+      }
+
+      .el-menu {
+        border: 0;
+
+        .vab-fas-icon {
+          padding-right: 3px;
+          font-size: $base-font-size-default;
+          display: inline-block;
+          width: 14px;
+        }
+
+        .vab-remix-icon {
+          padding-right: 3px;
+          font-size: $base-font-size-default + 2;
+        }
+      }
+
+      .el-menu-item,
+      .el-submenu__title {
+        height: $base-menu-item-height;
+        line-height: $base-menu-item-height;
+        vertical-align: middle;
+      }
+
+      .el-menu-item {
+        @include active;
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/components/VabTabs/index.vue b/src/layouts/components/VabTabs/index.vue
new file mode 100644
index 0000000..49545a3
--- /dev/null
+++ b/src/layouts/components/VabTabs/index.vue
@@ -0,0 +1,761 @@
+<template>
+  <div id="tabs-container" class="tabs-container">
+    <el-tabs v-model="tabActive" class="tabs-content" type="card" @tab-click="handleTabClick" @tab-remove="handleTabRemove">
+      <el-tab-pane v-for="item in visitedRoutes" :key="item.path" :closable="!isAffix(item)" :name="item.path">
+        <template slot="label">
+          <vab-icon v-if="getTabIcon(item)" :icon="['fas', getTabIcon(item)]" class="tab-icon" />
+          <span>{{ item.meta.title }}</span>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-dropdown  v-if="false">
+      <div @mouseenter="handleMouseEnter">
+        <i class="el-icon-message-solid el-icon--right"></i>
+      <span style="cursor: pointer;" >
+        消息
+      </span>
+      <span style="color:red;">({{messageList.length + total }})</span>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="tabs-more">
+        <div style="display: flex;justify-content: center;margin-top:20px;">
+       <h3 class="message">
+           消息通知
+     </h3>
+      <span style="color:red;">({{ messageList.length + total }})</span>
+        </div>
+
+          <div class="allmark" @click="allRead" v-if="messageList.length + total != 0 ">
+        <p class="y">全部已读</p>
+           <!-- <img class="gg" alt="" src="@/assets/g.png"  /> -->
+      </div>
+          <div class="order" v-for="(item, index) in list"
+            :key="item.id">
+      <div :class="[ markIndex2 == index? ' order-item' : 'order-item2'  ]" @mouseenter="marklist2(item,index)" @mouseleave="handleMouseLeave">
+        <div class="tick">
+            <div class="time">
+       {{item.created_at}}
+      </div>
+        <div class="mark" v-if="markIndex2 == index" @click="markRead(item)">
+        <p class="y">标记已读</p>
+           <img class="gg" alt="" src="@/assets/g.png"  />
+      </div>
+        </div>
+      <div class="od-item2">
+       {{item.content}}
+      </div>
+      </div>
+     </div>
+     <div class="order" v-for="(item, index) in messageList"
+            :key="index">
+      <div :class="[ markIndex == index? ' order-item' : 'order-item2'  ]" @mouseenter="marklist(item,index)" @mouseleave="handleMouseLeave2">
+        <div class="tick">
+            <div class="time">
+       {{item.date}}
+      </div>
+        <div class="mark" v-if="markIndex == index" @click="markRead2(item)">
+        <p class="y">标记已读</p>
+           <img class="gg" alt="" src="@/assets/g.png"  />
+      </div>
+        </div>
+      <div class="od-item2">
+       {{item.content}}
+      </div>
+      </div>
+     </div>
+        <!-- <el-dropdown-item command="closeOtherstabs">
+          <vab-icon :icon="['fas', 'times-circle']" />
+          关闭其他
+        </el-dropdown-item>
+        <el-dropdown-item command="closeLefttabs">
+          <vab-icon :icon="['fas', 'arrow-alt-circle-left']"></vab-icon>
+          关闭左侧
+        </el-dropdown-item>
+        <el-dropdown-item command="closeRighttabs">
+          <vab-icon :icon="['fas', 'arrow-alt-circle-right']"></vab-icon>
+          关闭右侧
+        </el-dropdown-item>
+        <el-dropdown-item command="closeAlltabs">
+          <vab-icon :icon="['fas', 'ban']"></vab-icon>
+          关闭全部
+        </el-dropdown-item> -->
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+
+<script>
+  import path from 'path'
+  import { mapGetters } from 'vuex'
+  import { unreadOtice,markNotice } from '@/api/table'
+  import { recordRoute } from '@/config'
+
+  
+
+  export default {
+    name: 'VabTabs',
+    data() {
+      return {
+        list:[],
+        total:'',
+        affixtabs: [],
+        tabActive: '',
+        markIndex:-1,
+        markIndex2:-1,
+        mark:false,
+         messages: [],
+      ws: null,
+      messageList:[]
+      }
+    },
+
+    computed: {
+      ...mapGetters({
+        visitedRoutes: 'tabsBar/visitedRoutes',
+        routes: 'routes/routes',
+      }),
+    },
+    watch: {
+      $route: {
+        handler(route) {
+          this.inittabs()
+          this.addtabs()
+          let tabActive = ''
+          this.visitedRoutes.forEach((item, index) => {
+            if (item.path === this.$route.path) {
+              tabActive = item.path
+            }
+          })
+          this.tabActive = tabActive
+        },
+        immediate: true,
+      },
+    },
+    created(){
+//  this.connect();
+//  this.fetchData()
+ 
+    },
+    mounted() {
+      // console.log(111)
+     setTimeout(() => {
+     this.$store.dispatch('user/logout')
+     const fullPath = this.$route.fullPath
+     this.$router.push(`/login?redirect=${fullPath}`)
+    },
+     86400000);
+    },
+    methods: {
+        async fetchData() {
+        this.listLoading = true
+        const { data, total } = await unreadOtice(this.queryForm)
+        this.list = data
+        // console.log( this.list,'--')
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+         connect() {
+      this.ws = new WebSocket('wss://dev.wagoo.pet/wagoo/1.1/ws/admin'); // 确保使用wss（加密的WebSocket）或ws（非加密的WebSocket）
+      this.ws.onopen = this.onOpen;
+      this.ws.onmessage = this.onMessage;
+      this.ws.onerror = this.onError;
+      this.ws.onclose = this.onClose;
+    },
+    onOpen() {
+      console.log('已经链接到服务');
+      setTimeout(() => {
+         this.ws.send('Hello Server!');
+        }, 500)
+    },
+    onMessage(event) {
+      // console.log(event,'--')
+      this.messageList.push(JSON.parse(event.data))
+       this.messageList.reverse()
+      // console.log( this.messageList,'什么东东')
+      // console.log( this.messageList,'???')
+      // const message = JSON.parse(event.data);
+      // this.messages.push(message); // 更新消息列表
+    },
+    onError(event) {
+      console.error('WebSocket连接出错:', event);
+    },
+    onClose(event) {
+      console.log('WebSocket连接已关闭', event);
+
+      this.connect()
+      // 可以在这里重新连接，例如使用setTimeout或setInterval
+    },
+    disconnect() {
+      if (this.ws) {
+        this.ws.close();
+      }
+    },
+  beforeDestroy() {
+    this.disconnect(); // 组件销毁时关闭WebSocket连接
+  },
+async  markRead(it){
+  const queryForm = {
+    id:it.id
+  }
+   const res = await markNotice(queryForm)
+   if(res.code === 200){
+    this.fetchData()
+   }
+    // console.log(it,'??')
+
+  },
+
+   async  allRead(){
+     this.messageList = []
+     const queryForm = {
+    id:'0'
+  }
+      const res = await markNotice(queryForm)
+       if(res.code === 200){
+    this.fetchData()
+   }
+  },
+  async  markRead2(it){
+    console.log(it,'?')
+  const queryForm = {
+    id:it.id
+  }
+   const res = await markNotice(queryForm)
+    if(res.code === 200){
+    this.fetchData()
+   }
+    // console.log(it,'??')
+
+  },
+      marklist(item,index){
+        this.markIndex = index
+//  console.log( item);
+      },
+       marklist2(item,index){
+        this.markIndex2 = index
+//  console.log( item);
+      },
+      handleMouseLeave2(){
+ this.markIndex = -1
+      },
+      handleMouseLeave(){
+        // console.log(111)
+  this.markIndex2 = -1
+      },
+     handleMouseEnter(event) {
+      // this.fetchData()
+      // console.log('鼠标移入事件被触发', event);
+      // 在这里编写你的处理代码
+    },
+      async handleTabRemove(tabActive) {
+        let view
+        this.visitedRoutes.forEach((item, index) => {
+          if (tabActive == item.path) {
+            view = item
+          }
+        })
+        const { visitedRoutes } = await this.$store.dispatch('tabsBar/delRoute', view)
+        if (this.isActive(view)) {
+          this.toLastTag(visitedRoutes, view)
+        }
+      },
+      handleTabClick(tab) {
+        const route = this.visitedRoutes.filter((item, index) => {
+          if (tab.index == index) return item
+        })[0]
+        if (this.$route.path !== route.path) {
+          this.$router.push({
+            path: route.path,
+            query: route.query,
+            fullPath: route.fullPath,
+          })
+        } else {
+          return false
+        }
+      },
+      isActive(route) {
+        return route.path === this.$route.path
+      },
+      isAffix(tag) {
+        return tag.meta && tag.meta.affix
+      },
+      filterAffixtabs(routes, basePath = '/') {
+        let tabs = []
+        routes.forEach((route) => {
+          if (route.meta && route.meta.affix) {
+            const tagPath = path.resolve(basePath, route.path)
+            tabs.push({
+              fullPath: tagPath,
+              path: tagPath,
+              name: route.name,
+              meta: { ...route.meta },
+            })
+          }
+          if (route.children) {
+            const temptabs = this.filterAffixtabs(route.children, route.path)
+            if (temptabs.length >= 1) {
+              tabs = [...tabs, ...temptabs]
+            }
+          }
+        })
+        return tabs
+      },
+      inittabs() {
+        const affixtabs = (this.affixtabs = this.filterAffixtabs(this.routes))
+        for (const tag of affixtabs) {
+          if (tag.name) {
+            this.$store.dispatch('tabsBar/addVisitedRoute', tag)
+          }
+        }
+      },
+      addtabs() {
+        const { name } = this.$route
+        if (name) {
+          this.$store.dispatch('tabsBar/addVisitedRoute', this.$route)
+        }
+        return false
+      },
+      handleCommand(command) {
+        switch (command) {
+          case 'refreshRoute':
+            this.refreshRoute()
+            break
+          case 'closeOtherstabs':
+            this.closeOtherstabs()
+            break
+          case 'closeLefttabs':
+            this.closeLefttabs()
+            break
+          case 'closeRighttabs':
+            this.closeRighttabs()
+            break
+          case 'closeAlltabs':
+            this.closeAlltabs()
+            break
+        }
+      },
+      async refreshRoute() {
+        this.$baseEventBus.$emit('reloadrouter-view')
+      },
+      async closeSelectedTag(view) {
+        const { visitedRoutes } = await this.$store.dispatch('tabsBar/delRoute', view)
+        if (this.isActive(view)) {
+          this.toLastTag(visitedRoutes, view)
+        }
+      },
+      async closeOtherstabs() {
+        const view = await this.toThisTag()
+        await this.$store.dispatch('tabsBar/delOthersRoutes', view)
+      },
+      async closeLefttabs() {
+        const view = await this.toThisTag()
+        await this.$store.dispatch('tabsBar/delLeftRoutes', view)
+      },
+      async closeRighttabs() {
+        const view = await this.toThisTag()
+        await this.$store.dispatch('tabsBar/delRightRoutes', view)
+      },
+      async closeAlltabs() {
+        const view = await this.toThisTag()
+        const { visitedRoutes } = await this.$store.dispatch('tabsBar/delAllRoutes')
+        if (this.affixtabs.some((tag) => tag.path === view.path)) {
+          return
+        }
+        this.toLastTag(visitedRoutes, view)
+      },
+      toLastTag(visitedRoutes, view) {
+        const latestView = visitedRoutes.slice(-1)[0]
+        if (latestView) {
+          this.$router.push(latestView)
+        } else {
+          this.$router.push('/')
+        }
+      },
+      async toThisTag() {
+        const view = this.visitedRoutes.filter((item, index) => {
+          if (item.path === this.$route.fullPath) {
+            return item
+          }
+        })[0]
+        if (this.$route.path !== view.path) this.$router.push(view)
+        return view
+      },
+      getTabIcon(item) {
+        // 如果当前路由有图标，直接返回
+        if (item.meta && item.meta.icon) {
+          return item.meta.icon
+        }
+
+        // 查找父级路由的图标
+        const parentIcon = this.findParentIcon(item.path)
+        if (parentIcon) {
+          return parentIcon
+        }
+
+        return null
+      },
+
+      findParentIcon(path) {
+        // 从路径中提取父级路径
+        const pathParts = path.split('/').filter((part) => part)
+        if (pathParts.length <= 1) {
+          return null
+        }
+
+        // 查找父级路由
+        const findRouteByPath = (routes, targetPath) => {
+          for (const route of routes) {
+            if (route.path === targetPath) {
+              return route
+            }
+            if (route.children) {
+              const found = findRouteByPath(route.children, targetPath)
+              if (found) return found
+            }
+          }
+          return null
+        }
+
+        // 尝试查找父级路径
+        for (let i = pathParts.length - 1; i > 0; i--) {
+          const parentPath = '/' + pathParts.slice(0, i).join('/')
+          const parentRoute = findRouteByPath(this.routes, parentPath)
+          if (parentRoute && parentRoute.meta && parentRoute.meta.icon) {
+            return parentRoute.meta.icon
+          }
+        }
+
+        return null
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tabs-container {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: space-between;
+    height: 54px;
+    padding-right: $base-padding;
+    padding-left: $base-padding;
+    user-select: none;
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.2) 100%);
+      pointer-events: none;
+    }
+
+    ::v-deep {
+      .fold-unfold {
+        margin-right: $base-padding;
+      }
+    }
+
+    .tabs-content {
+      position: relative;
+      width: calc(100% - 90px);
+      height: $base-tag-item-height;
+
+      ::v-deep {
+        .el-tabs__nav-next,
+        .el-tabs__nav-prev {
+          height: $base-tag-item-height;
+          line-height: $base-tag-item-height;
+          color: rgba(0, 0, 0, 0.6);
+          background: rgba(255, 255, 255, 0.6);
+          border: 1px solid rgba(255, 255, 255, 0.8);
+          border-radius: 12px;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+
+          &:hover {
+            color: rgba(0, 0, 0, 0.8);
+            background: rgba(255, 255, 255, 0.8);
+            border-color: rgba(255, 255, 255, 1);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
+          }
+        }
+
+        .el-tabs__header {
+          border-bottom: 0;
+
+          .el-tabs__nav {
+            border: 0;
+          }
+
+          .el-tabs__item {
+            position: relative;
+            box-sizing: border-box;
+            height: $base-tag-item-height;
+            margin-right: 8px;
+            margin-top: 3px;
+            padding: 0 20px;
+            line-height: $base-tag-item-height;
+            border: 1px solid $base-color-default;
+            color: $base-color-default;
+            border-radius: 5px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            overflow: hidden;
+
+            .tab-icon {
+              margin-right: 6px;
+              font-size: 12px;
+            }
+
+            &::before {
+              content: '';
+              position: absolute;
+              top: 0;
+              left: -100%;
+              width: 100%;
+              height: 100%;
+              background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+              transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+            }
+
+            &:hover {
+              
+              color: rgba(255, 255, 255, 0.95);
+              background: $base-color-default;
+              border-color: $base-color-default;
+
+              &::before {
+                left: 100%;
+              }
+            }
+
+            &.is-active {
+              color: rgba(255, 255, 255, 0.95);
+              background: $base-color-default;
+              border-color: $base-color-default;
+            }
+
+            .el-icon-close {
+              position: relative;
+              margin-left: 8px;
+              font-size: 12px;
+              color: rgba(255, 255, 255, 0.7);
+              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+              border-radius: 5px;
+              padding: 2px;
+
+              &:hover {
+                color: rgba(255, 255, 255, 0.9);
+                background: rgba(255, 255, 255, 0.2);
+                transform: scale(1.2);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .more {
+      position: relative;
+      display: flex;
+      align-content: center;
+      align-items: center;
+      padding: 8px 16px;
+      color: rgba(0, 0, 0, 0.7);
+      background: rgba(255, 255, 255, 0.6);
+      border: 1px solid rgba(255, 255, 255, 0.8);
+      border-radius: 16px;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+
+      &:hover {
+        color: rgba(0, 0, 0, 0.9);
+        background: rgba(255, 255, 255, 0.8);
+        border-color: rgba(255, 255, 255, 1);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
+      }
+
+      &:active {
+        transform: translateY(0);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  .tabs-more {
+    border-radius:15px;
+      width: 550px;
+      height: 550px;
+      position: relative;
+       overflow: auto;
+          .allmark{
+          font-size: 12px;
+          padding: 0 10px;
+          position: absolute;
+          right: 10px;
+          top: 20px;
+          // width: 60px;
+          height: 30px;
+        border: 1px solid #ccc;
+        font-weight: 600;
+        border-radius: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .gg{
+          width: 15px;
+          height: 15px;
+        }
+        }
+      .message{
+        display: flex;
+        justify-content: center;
+        margin: 0;
+        // display: inline-block;
+      }
+      .order{
+        padding:0 20px 0 20px;
+       
+        .od-item{
+          color:#9B939A;
+          margin-top: 30px;
+
+        }
+        .order-item{
+          border-radius: 5px;
+          margin-top: 10px;
+          background: #fbf9f9;
+          height: 50px;
+          padding: 5px;
+          position: relative;
+          .tick{
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .mark{
+              position: absolute;
+              right: 10px;
+              top: 10px;
+          font-size: 12px;
+          padding: 0 10px;
+          // width: 60px;
+          height: 30px;
+        border: 1px solid #ccc;
+        font-weight: 600;
+        border-radius: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .gg{
+          width: 15px;
+          height: 15px;
+          margin-left: 4px;
+        }
+        }
+          .time{
+          display: flex;
+          justify-content: center;
+          font-size: 12px;
+           color:#887a86;
+        }
+
+          }
+         
+        .od-item2{
+          color:#353535;
+          margin-top: 10px;
+        }
+        
+
+        }
+         .order-item2{
+          margin-top: 10px;
+          height: 50px;
+          padding: 5px;
+          position: relative;
+          .tick{
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .mark{
+          font-size: 12px;
+          padding: 0 10px;
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          // width: 60px;
+          height: 30px;
+        border: 1px solid #ccc;
+        font-weight: 600;
+        border-radius: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .gg{
+          width: 15px;
+          height: 15px;
+        }
+        }
+          .time{
+          display: flex;
+          justify-content: center;
+          font-size: 12px;
+           color:#887a86;
+        }
+
+          }
+         
+        .od-item2{
+          color:#353535;
+          margin-top: 10px;
+        }
+        
+
+        }
+       
+      }
+   
+    .el-dropdown-menu__item {
+      padding: 8px 20px;
+      font-size: 14px;
+      line-height: 1.5;
+
+      &:not(:last-child) {
+        margin-bottom: 4px;
+      }
+
+      .vab-icon {
+        margin-right: 8px;
+        width: 16px;
+        text-align: center;
+      }
+
+      &:hover {
+        background: rgba(77, 138, 240, 0.1);
+        color: #4d8af0;
+        border-radius: 6px;
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/components/VabTheme/index.vue b/src/layouts/components/VabTheme/index.vue
new file mode 100644
index 0000000..7d9c380
--- /dev/null
+++ b/src/layouts/components/VabTheme/index.vue
@@ -0,0 +1,600 @@
+<template>
+  <span v-if="themeBar">
+    <vab-icon :icon="['fas', 'crown']" title="主题配置" @click="handleOpenTheme" />
+    <div class="theme-setting">
+      <div @click="handleOpenTheme">
+        <vab-icon :icon="['fas', 'crown']" />
+        <p>主题配置</p>
+      </div>
+      <div @click="handleGetCode">
+        <vab-icon :icon="['fas', 'laptop-code']"></vab-icon>
+        <p>拷贝源码</p>
+      </div>
+    </div>
+
+    <el-drawer :visible.sync="drawerVisible" append-to-body direction="rtl" size="300px" title="主题配置">
+      <el-scrollbar style="height: 80vh; overflow: hidden">
+        <div class="el-drawer__body">
+          <div class="theme-config-container">
+            <div class="config-section">
+              <div class="section-header">
+                <i class="el-icon-picture-outline"></i>
+                <span>主题风格</span>
+              </div>
+              <div class="theme-options">
+                <div
+                  class="theme-option"
+                  :class="{ active: theme.name === 'default' }"
+                  @click="
+                    theme.name = 'default'
+                    handleSaveTheme()
+                  "
+                >
+                  <div class="theme-preview default-theme">
+                    <div class="preview-header"></div>
+                    <div class="preview-sidebar"></div>
+                    <div class="preview-content"></div>
+                  </div>
+                  <span class="theme-name">默认主题</span>
+                </div>
+                <div
+                  class="theme-option"
+                  :class="{ active: theme.name === 'green' }"
+                  @click="
+                    theme.name = 'green'
+                    handleSaveTheme()
+                  "
+                >
+                  <div class="theme-preview green-theme">
+                    <div class="preview-header"></div>
+                    <div class="preview-sidebar"></div>
+                    <div class="preview-content"></div>
+                  </div>
+                  <span class="theme-name">绿荫草场</span>
+                </div>
+                <div
+                  class="theme-option"
+                  :class="{ active: theme.name === 'glory' }"
+                  @click="
+                    theme.name = 'glory'
+                    handleSaveTheme()
+                  "
+                >
+                  <div class="theme-preview glory-theme">
+                    <div class="preview-header"></div>
+                    <div class="preview-sidebar"></div>
+                    <div class="preview-content"></div>
+                  </div>
+                  <span class="theme-name">荣耀典藏</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="config-section">
+              <div class="section-header">
+                <i class="el-icon-s-grid"></i>
+                <span>布局设置</span>
+              </div>
+              <div class="layout-options">
+                <div
+                  class="layout-option"
+                  :class="{ active: theme.layout === 'vertical' }"
+                  @click="
+                    theme.layout = 'vertical'
+                    handleSaveTheme()
+                  "
+                >
+                  <div class="layout-preview vertical-layout">
+                    <div class="preview-header"></div>
+                    <div class="preview-sidebar"></div>
+                    <div class="preview-content"></div>
+                  </div>
+                  <span class="layout-name">纵向布局</span>
+                </div>
+                <div
+                  class="layout-option"
+                  :class="{ active: theme.layout === 'horizontal' }"
+                  @click="
+                    theme.layout = 'horizontal'
+                    handleSaveTheme()
+                  "
+                >
+                  <div class="layout-preview horizontal-layout">
+                    <div class="preview-header"></div>
+                    <div class="preview-main">
+                      <div class="preview-sidebar"></div>
+                      <div class="preview-content"></div>
+                    </div>
+                  </div>
+                  <span class="layout-name">横向布局</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="config-section">
+              <div class="section-header">
+                <i class="el-icon-setting"></i>
+                <span>功能设置</span>
+              </div>
+              <div class="feature-options">
+                <div class="feature-item">
+                  <div class="feature-info">
+                    <span class="feature-name">固定头部</span>
+                    <span class="feature-desc">头部始终固定在页面顶部</span>
+                  </div>
+                  <el-switch v-model="theme.header" active-value="fixed" inactive-value="noFixed" @change="handleSaveTheme" />
+                </div>
+                <div class="feature-item">
+                  <div class="feature-info">
+                    <span class="feature-name">多标签页</span>
+                    <span class="feature-desc">开启页面标签页功能</span>
+                  </div>
+                  <el-switch v-model="theme.tabsBar" active-value="true" inactive-value="false" @change="handleSaveTheme" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-scrollbar>
+
+      <div class="el-drawer__footer">
+        <el-button type="primary" @click="handleSaveTheme">保存设置</el-button>
+        <el-button @click="drawerVisible = false">取消</el-button>
+      </div>
+    </el-drawer>
+  </span>
+</template>
+
+<script>
+  import { mapActions, mapGetters } from 'vuex'
+  import { layout as defaultLayout } from '@/config'
+
+  export default {
+    name: 'VabTheme',
+    data() {
+      return {
+        drawerVisible: false,
+        theme: {
+          name: 'default',
+          layout: '',
+          header: 'fixed',
+          tabsBar: '',
+        },
+      }
+    },
+    computed: {
+      ...mapGetters({
+        layout: 'settings/layout',
+        header: 'settings/header',
+        tabsBar: 'settings/tabsBar',
+        themeBar: 'settings/themeBar',
+      }),
+    },
+    created() {
+      const handleTheme = () => {
+        this.handleOpenTheme()
+      }
+
+      this.$baseEventBus.$on('theme', handleTheme)
+      const theme = localStorage.getItem('vue-admin-better-theme')
+      if (null !== theme) {
+        this.theme = JSON.parse(theme)
+        this.handleSaveTheme()
+      } else {
+        this.theme.layout = this.layout
+        this.theme.header = this.header
+        this.theme.tabsBar = this.tabsBar
+      }
+
+      this.$once('hook:beforeDestroy', () => {
+        this.$baseEventBus.$off('theme', handleTheme)
+      })
+    },
+    methods: {
+      ...mapActions({
+        changeLayout: 'settings/changeLayout',
+        changeHeader: 'settings/changeHeader',
+        changeTabsBar: 'settings/changeTabsBar',
+      }),
+      handleIsMobile() {
+        return document.body.getBoundingClientRect().width - 1 < 992
+      },
+      handleOpenTheme() {
+        this.drawerVisible = true
+      },
+      handleSaveTheme() {
+        let { name, layout, header, tabsBar } = this.theme
+        localStorage.setItem(
+          'vue-admin-better-theme',
+          `{
+            "name":"${name}",
+            "layout":"${layout}",
+            "header":"${header}",
+            "tabsBar":"${tabsBar}"
+          }`
+        )
+        if (!this.handleIsMobile()) this.changeLayout(layout)
+        this.changeHeader(header)
+        this.changeTabsBar(tabsBar)
+        document.getElementsByTagName('body')[0].className = `vue-admin-better-theme-${name}`
+        this.drawerVisible = false
+      },
+      handleGetCode() {
+        const url = 'https://github.com/zxwk1998/vue-admin-better/tree/master/src/views'
+        let path = this.$route.path + '/index.vue'
+        if (path === '/vab/menu1/menu1-1/menu1-1-1/index.vue') {
+          path = '/vab/nested/menu1/menu1-1/menu1-1-1/index.vue'
+        }
+        if (path === '/vab/icon/awesomeIcon/index.vue') {
+          path = '/vab/icon/index.vue'
+        }
+        if (path === '/vab/icon/remixIcon/index.vue') {
+          path = '/vab/icon/remixIcon.vue'
+        }
+        if (path === '/vab/icon/colorfulIcon/index.vue') {
+          path = '/vab/icon/colorfulIcon.vue'
+        }
+        if (path === '/vab/table/comprehensiveTable/index.vue') {
+          path = '/vab/table/index.vue'
+        }
+        if (path === '/vab/table/inlineEditTable/index.vue') {
+          path = '/vab/table/inlineEditTable.vue'
+        }
+        window.open(url + path)
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  @mixin right-bar {
+    position: fixed;
+    right: 0;
+    z-index: $base-z-index;
+    width: 60px;
+    min-height: 60px;
+    text-align: center;
+    cursor: pointer;
+    background: $base-color-blue;
+    border-radius: $base-border-radius;
+
+    > div {
+      padding-top: 10px;
+      border-bottom: 0 !important;
+
+      &:hover {
+        opacity: 0.9;
+      }
+
+      & + div {
+        border-top: 1px solid $base-color-white;
+      }
+
+      p {
+        padding: 0;
+        margin: 0;
+        font-size: $base-font-size-small;
+        line-height: 30px;
+        color: $base-color-white;
+      }
+    }
+  }
+
+  .theme-setting {
+    @include right-bar;
+
+    top: calc((100vh - 110px) / 2);
+
+    ::v-deep {
+      svg:not(:root).svg-inline--fa {
+        display: block;
+        margin-right: auto;
+        margin-left: auto;
+        color: $base-color-white;
+      }
+
+      .svg-icon {
+        display: block;
+        margin-right: auto;
+        margin-left: auto;
+        font-size: 20px;
+        color: $base-color-white;
+        fill: $base-color-white;
+      }
+    }
+  }
+
+  .el-drawer__body {
+    padding: 20px;
+  }
+
+  .el-drawer__footer {
+    border-top: 1px solid #dedede;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 10px 0 0 20px;
+    height: 50px;
+  }
+
+  .theme-config-container {
+    .config-section {
+      margin-bottom: 30px;
+
+      .section-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        padding-bottom: 8px;
+        border-bottom: 1px solid #f0f0f0;
+
+        i {
+          margin-right: 8px;
+          font-size: 16px;
+          color: #677ae4;
+        }
+
+        span {
+          font-size: 16px;
+          font-weight: 600;
+          color: #333;
+        }
+      }
+
+      .theme-options {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+
+        .theme-option {
+          display: flex;
+          align-items: center;
+          padding: 12px;
+          border: 2px solid #f0f0f0;
+          border-radius: 8px;
+          cursor: pointer;
+          transition: all 0.3s ease;
+
+          &:hover {
+            border-color: #677ae4;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
+          }
+
+          &.active {
+            border-color: #677ae4;
+            background: rgba(64, 158, 255, 0.05);
+            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+          }
+
+          .theme-preview {
+            width: 60px;
+            height: 40px;
+            margin-right: 12px;
+            border-radius: 4px;
+            overflow: hidden;
+            position: relative;
+
+            .preview-header {
+              height: 8px;
+              background: #f0f0f0;
+            }
+
+            .preview-sidebar {
+              position: absolute;
+              left: 0;
+              top: 8px;
+              width: 12px;
+              height: 32px;
+              background: #e0e0e0;
+            }
+
+            .preview-content {
+              position: absolute;
+              left: 12px;
+              top: 8px;
+              width: 48px;
+              height: 32px;
+              background: #fafafa;
+            }
+
+            &.default-theme {
+              .preview-header {
+                background: $base-color-default;
+              }
+              .preview-sidebar {
+                background: #2c3e50;
+              }
+              .preview-content {
+                background: #ffffff;
+              }
+            }
+
+            &.green-theme {
+              .preview-header {
+                background: #67c23a;
+              }
+              .preview-sidebar {
+                background: #2d5a27;
+              }
+              .preview-content {
+                background: #f0f9ff;
+              }
+            }
+
+            &.glory-theme {
+              .preview-header {
+                background: #e6a23c;
+              }
+              .preview-sidebar {
+                background: #8b4513;
+              }
+              .preview-content {
+                background: #fff8e1;
+              }
+            }
+          }
+
+          .theme-name {
+            font-size: 14px;
+            font-weight: 500;
+            color: #333;
+          }
+        }
+      }
+
+      .layout-options {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+
+        .layout-option {
+          display: flex;
+          align-items: center;
+          padding: 12px;
+          border: 2px solid #f0f0f0;
+          border-radius: 8px;
+          cursor: pointer;
+          transition: all 0.3s ease;
+
+          &:hover {
+            border-color: #677ae4;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
+          }
+
+          &.active {
+            border-color: #677ae4;
+            background: rgba(64, 158, 255, 0.05);
+            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+          }
+
+          .layout-preview {
+            width: 60px;
+            height: 40px;
+            margin-right: 12px;
+            border-radius: 4px;
+            overflow: hidden;
+            position: relative;
+
+            .preview-header {
+              height: 8px;
+              background: #677ae4;
+            }
+
+            .preview-main {
+              position: absolute;
+              left: 0;
+              top: 8px;
+              width: 100%;
+              height: 32px;
+              display: flex;
+
+              .preview-sidebar {
+                background: #2c3e50;
+              }
+
+              .preview-content {
+                background: #ffffff;
+              }
+            }
+
+            &.vertical-layout {
+              .preview-header {
+                height: 8px;
+                background: #677ae4;
+              }
+
+              .preview-sidebar {
+                position: absolute;
+                left: 0;
+                top: 8px;
+                width: 12px;
+                height: 32px;
+                background: #2c3e50;
+              }
+
+              .preview-content {
+                position: absolute;
+                left: 12px;
+                top: 8px;
+                width: 48px;
+                height: 32px;
+                background: #ffffff;
+              }
+            }
+
+            &.horizontal-layout {
+              .preview-main {
+                .preview-sidebar {
+                  width: 100%;
+                  height: 8px;
+                }
+                .preview-content {
+                  width: 100%;
+                  height: 24px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          .layout-name {
+            font-size: 14px;
+            font-weight: 500;
+            color: #333;
+          }
+        }
+      }
+
+      .feature-options {
+        .feature-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 16px 0;
+          border-bottom: 1px solid #f0f0f0;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          .feature-info {
+            flex: 1;
+            margin-right: 16px;
+
+            .feature-name {
+              display: block;
+              font-size: 14px;
+              font-weight: 500;
+              color: #333;
+              margin-bottom: 4px;
+            }
+
+            .feature-desc {
+              display: block;
+              font-size: 12px;
+              color: #999;
+              line-height: 1.4;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
+<style lang="scss">
+  .el-drawer__wrapper {
+    outline: none !important;
+
+    * {
+      outline: none !important;
+    }
+  }
+
+  .vab-color-picker {
+    .el-color-dropdown__link-btn {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/layouts/components/VabTop/index.vue b/src/layouts/components/VabTop/index.vue
new file mode 100644
index 0000000..60d970d
--- /dev/null
+++ b/src/layouts/components/VabTop/index.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="top-container">
+    <div class="vab-main">
+      <el-row>
+        <el-col :lg="7" :md="7" :sm="7" :xl="7" :xs="7">
+          <vab-logo />
+        </el-col>
+        <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
+          <el-menu
+            active-text-color=" hsla(0, 0%, 100%, 0.95)"
+            background-color="#191a23"
+            :default-active="activeMenu"
+            text-color=" hsla(0, 0%, 100%, 0.95)"
+            menu-trigger="hover"
+            mode="horizontal"
+          >
+            <template v-for="route in routes">
+              <vab-side-item v-if="!route.hidden" :key="route.path" :full-path="route.path" :item="route" />
+            </template>
+          </el-menu>
+        </el-col>
+        <el-col :lg="5" :md="5" :sm="5" :xl="5" :xs="5">
+          <div class="right-panel">
+            <vab-error-log />
+            <div class="right-menu">
+              <vab-full-screen @refresh="refreshRoute" />
+              <vab-theme class="hidden-md-and-down" />
+            </div>
+            <vab-icon :icon="['fas', 'sync-alt']" :pulse="pulse" title="重载路由" @click="refreshRoute" />
+            <vab-avatar />
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import variables from '@/styles/variables.scss'
+  import { mapGetters } from 'vuex'
+
+  export default {
+    name: 'VabTop',
+    data() {
+      return {
+        pulse: false,
+        menuTrigger: 'hover',
+      }
+    },
+    computed: {
+      ...mapGetters({
+        routes: 'routes/routes',
+        visitedRoutes: 'tabsBar/visitedRoutes',
+      }),
+      activeMenu() {
+        const route = this.$route
+        const { meta, path } = route
+        if (meta.activeMenu) {
+          return meta.activeMenu
+        }
+        return path
+      },
+      variables() {
+        return variables
+      },
+    },
+    methods: {
+      async refreshRoute() {
+        this.$baseEventBus.$emit('reload-router-view')
+        this.pulse = true
+        this.timeOutID = setTimeout(() => {
+          this.pulse = false
+        }, 1000)
+      },
+    },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .top-container {
+    display: flex;
+    align-items: center;
+    justify-items: flex-end;
+    height: $base-top-bar-height;
+    background: $base-menu-background;
+
+    .vab-main {
+      background: $base-menu-background;
+
+      ::v-deep {
+        .el-menu {
+          &.el-menu--horizontal {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            height: $base-top-bar-height;
+            border-bottom: 0 solid transparent !important;
+
+            .el-menu-item,
+            .el-submenu__title {
+              padding: 0 15px;
+            }
+
+            @media only screen and (max-width: 767px) {
+              .el-menu-item,
+              .el-submenu__title {
+                padding: 0 8px;
+              }
+
+              li:nth-child(4),
+              li:nth-child(5) {
+                display: none !important;
+              }
+            }
+
+            > .el-menu-item {
+              height: $base-top-bar-height;
+              line-height: $base-top-bar-height;
+            }
+
+            > .el-submenu {
+              .el-submenu__title {
+                height: $base-top-bar-height;
+                line-height: $base-top-bar-height;
+              }
+            }
+          }
+
+          svg {
+            width: 1rem;
+            margin-right: 3px;
+          }
+
+          &--horizontal {
+            .el-menu {
+              .el-menu-item,
+              .el-submenu__title {
+                height: $base-menu-item-height;
+                line-height: $base-menu-item-height;
+              }
+            }
+
+            .el-submenu,
+            .el-menu-item {
+              &.is-active {
+                background-color: $base-color-blue !important;
+                border-bottom: 0 solid transparent !important;
+
+                .el-submenu__title {
+                  border-bottom: 0 solid transparent !important;
+                }
+              }
+            }
+
+            > .el-menu-item {
+              .el-tag {
+                margin-top: calc(#{$base-top-bar-height} / 2 - 7.5px);
+                margin-left: 5px;
+              }
+
+              @media only screen and (max-width: 1199px) {
+                .el-tag {
+                  display: none;
+                }
+              }
+
+              &.is-active {
+                background-color: transparent !important;
+                border-bottom: 3px solid $base-color-blue !important;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .right-panel {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      height: $base-top-bar-height;
+
+      ::v-deep {
+        .username,
+        .user-role {
+          color: rgba($base-color-white, 0.9);
+        }
+
+        .username + i {
+          color: rgba($base-color-white, 0.9);
+        }
+
+        svg {
+          width: 1em;
+          height: 1em;
+          margin-right: 15px;
+          font-size: $base-font-size-big;
+          color: rgba($base-color-white, 0.9);
+          cursor: pointer;
+          fill: rgba($base-color-white, 0.9);
+        }
+
+        button {
+          svg {
+            margin-right: 0;
+            color: rgba($base-color-white, 0.9);
+            cursor: pointer;
+            fill: rgba($base-color-white, 0.9);
+          }
+        }
+
+        .el-badge {
+          margin-right: 15px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/export.js b/src/layouts/export.js
new file mode 100644
index 0000000..1f7e4bd
--- /dev/null
+++ b/src/layouts/export.js
@@ -0,0 +1,20 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 公共布局及样式自动引入
+ */
+
+import Vue from 'vue'
+
+const requireComponents = require.context('./components', true, /\.vue$/)
+requireComponents.keys().forEach((fileName) => {
+  const componentConfig = requireComponents(fileName)
+  const componentName = componentConfig.default.name
+  Vue.component(componentName, componentConfig.default || componentConfig)
+})
+
+// 使用 require.context 安全地导入主题文件
+const requireThemes = require.context('@/styles/themes', true, /\.scss$/)
+requireThemes.keys().forEach((fileName) => {
+  // 使用 require.context 直接引入，避免动态字符串拼接
+  requireThemes(fileName)
+})
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
new file mode 100644
index 0000000..c5a7e34
--- /dev/null
+++ b/src/layouts/index.vue
@@ -0,0 +1,298 @@
+<template>
+  <div :class="classObj" class="vue-admin-better-wrapper">
+    <div
+      v-if="'horizontal' === layout"
+      :class="{
+        fixed: header === 'fixed',
+        'no-tabs-bar': tabsBar === 'false' || tabsBar === false,
+      }"
+      class="layout-container-horizontal"
+    >
+      <div :class="header === 'fixed' ? 'fixed-header' : ''">
+        <vab-top />
+        <div v-if="tabsBar === 'true' || tabsBar === true" :class="{ 'tag-view-show': tabsBar }">
+          <el-scrollbar>
+            <div class="vab-main main-padding"><vab-tabs /></div>
+          </el-scrollbar>
+        </div>
+      </div>
+      <div class="vab-main main-padding">
+        <vab-ad />
+        <vab-app-main />
+      </div>
+    </div>
+    <div
+      v-else
+      :class="{
+        fixed: header === 'fixed',
+        'no-tabs-bar': tabsBar === 'false' || tabsBar === false,
+      }"
+      class="layout-container-vertical"
+    >
+      <div v-if="device === 'mobile' && collapse === false" class="mask" @click="handleFoldSideBar" />
+      <vab-side />
+      <div :class="collapse ? 'is-collapse-main' : ''" class="vab-main">
+        <div :class="header === 'fixed' ? 'fixed-header' : ''">
+          <vab-nav />
+          <vab-tabs v-if="tabsBar === 'true' || tabsBar === true" />
+        </div>
+        <vab-ad />
+        <vab-app-main />
+      </div>
+    </div>
+    <el-backtop />
+  </div>
+</template>
+
+<script>
+  import { mapActions, mapGetters } from 'vuex'
+  import { tokenName } from '@/config'
+
+  export default {
+    name: 'Layout',
+    data() {
+      return {
+        oldLayout: '',
+        controller: new window.AbortController(),
+        timeOutID: null,
+      }
+    },
+    computed: {
+      ...mapGetters({
+        layout: 'settings/layout',
+        tabsBar: 'settings/tabsBar',
+        collapse: 'settings/collapse',
+        header: 'settings/header',
+        device: 'settings/device',
+      }),
+      classObj() {
+        return {
+          mobile: this.device === 'mobile',
+        }
+      },
+    },
+    beforeMount() {
+      window.addEventListener('resize', this.handleResize)
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.handleResize)
+      this.controller.abort()
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {
+      this.oldLayout = this.layout
+      const userAgent = navigator.userAgent
+      const isMobile = this.handleIsMobile()
+      if (isMobile) {
+        if (isMobile) {
+          //横向布局时如果是手机端访问那么改成纵向版
+          this.$store.dispatch('settings/changeLayout', 'vertical')
+        } else {
+          this.$store.dispatch('settings/changeLayout', this.oldLayout)
+        }
+        this.$store.dispatch('settings/toggleDevice', 'mobile')
+        this.timeOutID = setTimeout(() => {
+          this.$store.dispatch('settings/foldSideBar')
+        }, 2000)
+      } else {
+        this.$store.dispatch('settings/openSideBar')
+      }
+      this.$nextTick(() => {
+        window.addEventListener(
+          'storage',
+          (e) => {
+            if (e.key === tokenName || e.key === null) window.location.reload()
+            if (e.key === tokenName && e.value === null) window.location.reload()
+          },
+          {
+            capture: false,
+            signal: this.controller?.signal,
+          }
+        )
+      })
+    },
+    methods: {
+      ...mapActions({
+        handleFoldSideBar: 'settings/foldSideBar',
+      }),
+      handleIsMobile() {
+        return document.body.getBoundingClientRect().width - 1 < 992
+      },
+      handleResize() {
+        if (!document.hidden) {
+          const isMobile = this.handleIsMobile()
+          if (isMobile) {
+            //横向布局时如果是手机端访问那么改成纵向版
+            this.$store.dispatch('settings/changeLayout', 'vertical')
+          } else {
+            this.$store.dispatch('settings/changeLayout', this.oldLayout)
+          }
+
+          this.$store.dispatch('settings/toggleDevice', isMobile ? 'mobile' : 'desktop')
+        }
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  @mixin fix-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: $base-z-index - 2;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .vue-admin-better-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .layout-container-horizontal {
+      position: relative;
+
+      &.fixed {
+        padding-top: calc(#{$base-top-bar-height} + #{$base-tabs-bar-height});
+      }
+
+      &.fixed.no-tabs-bar {
+        padding-top: $base-top-bar-height;
+      }
+
+      ::v-deep {
+        .vab-main {
+          width: 88%;
+          margin: auto;
+        }
+
+        .fixed-header {
+          @include fix-header;
+        }
+
+        .tag-view-show {
+          background: $base-color-white;
+          box-shadow: $base-box-shadow;
+        }
+
+        .nav-container {
+          .fold-unfold {
+            display: none;
+          }
+        }
+
+        .main-padding {
+          .app-main-container {
+            margin-top: $base-padding;
+            margin-bottom: $base-padding;
+            background: $base-color-white;
+          }
+        }
+      }
+    }
+
+    .layout-container-vertical {
+      position: relative;
+
+      .mask {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: $base-z-index - 1;
+        width: 100%;
+        height: 100vh;
+        overflow: hidden;
+        background: #000;
+        opacity: 0.5;
+      }
+
+      &.fixed {
+        padding-top: calc(#{$base-nav-bar-height} + #{$base-tabs-bar-height});
+      }
+
+      &.fixed.no-tabs-bar {
+        padding-top: $base-nav-bar-height;
+      }
+
+      .vab-main {
+        position: relative;
+        min-height: 100%;
+        margin-left: $base-left-menu-width;
+        background: #f6f8f9;
+        transition: $base-transition;
+
+        ::v-deep {
+          .fixed-header {
+            @include fix-header;
+
+            left: $base-left-menu-width;
+            width: $base-right-content-width;
+            box-shadow: $base-box-shadow;
+            transition: $base-transition;
+          }
+
+          .nav-container {
+            position: relative;
+            box-sizing: border-box;
+          }
+
+          .tabs-container {
+            box-sizing: border-box;
+          }
+
+          .app-main-container {
+            width: calc(100% - #{$base-padding} - #{$base-padding});
+            margin: $base-padding auto;
+            background: $base-color-white;
+            border-radius: $base-border-radius;
+          }
+        }
+
+        &.is-collapse-main {
+          margin-left: $base-left-menu-width-min;
+
+          ::v-deep {
+            .fixed-header {
+              left: $base-left-menu-width-min;
+              width: calc(100% - 65px);
+            }
+          }
+        }
+      }
+    }
+
+    /* 手机端开始 */
+    &.mobile {
+      ::v-deep {
+        .el-pager,
+        .el-pagination__jump {
+          display: none;
+        }
+
+        .layout-container-vertical {
+          .el-scrollbar.side-container.is-collapse {
+            width: 0;
+          }
+
+          .vab-main {
+            width: 100%;
+            margin-left: 0;
+          }
+        }
+
+        .vab-main {
+          .fixed-header {
+            left: 0 !important;
+            width: 100% !important;
+          }
+        }
+      }
+    }
+
+    /* 手机端结束 */
+  }
+</style>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..d303984
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,47 @@
+import Vue from 'vue'
+import App from './App'
+import store from './store'
+import router from './router'
+import './plugins'
+import '@/layouts/export'
+import { printLayoutsInfo } from '@/utils/printInfo'
+import JSEncrypt from 'jsencrypt';
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 生产环境默认都使用mock，如果正式用于生产环境时，记得去掉
+ */
+
+// 检测环境变量或默认使用mock
+// 生产环境
+// const useMock = process.env.VUE_APP_MOCK_ENABLE === 'true' || process.env.NODE_ENV === 'development'
+// development
+// production
+// 测试环境 
+const useMock = process.env.VUE_APP_MOCK_ENABLE === 'true' || process.env.NODE_ENV === 'production'
+if (useMock) {
+  // 使用动态import替代require
+  import('@/utils/static').then(({ mockXHR }) => {
+    mockXHR()
+    console.log('已启用Mock拦截，所有接口请求将被Mock拦截')
+    // 打印layouts/index.js中的信息到控制台
+    printLayoutsInfo()
+    Vue.config.productionTip = false
+    Vue.prototype.$jsEncrypt = JSEncrypt;
+    new Vue({
+      el: '#vue-admin-better',
+      router,
+      store,
+      render: (h) => h(App),
+    })
+  })
+} else {
+  // 未启用Mock时直接打印layouts/index.js中的信息到控制台
+  printLayoutsInfo()
+  new Vue({
+    el: '#vue-admin-better',
+    router,
+    store,
+    render: (h) => h(App),
+  })
+}
diff --git a/src/plugins/echarts.js b/src/plugins/echarts.js
new file mode 100644
index 0000000..f600f83
--- /dev/null
+++ b/src/plugins/echarts.js
@@ -0,0 +1,4 @@
+import 'echarts'
+import VabChart from 'vue-echarts'
+
+export default VabChart
diff --git a/src/plugins/element.js b/src/plugins/element.js
new file mode 100644
index 0000000..349da86
--- /dev/null
+++ b/src/plugins/element.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+Vue.use(ElementUI, {
+  size: 'small',
+})
diff --git a/src/plugins/index.js b/src/plugins/index.js
new file mode 100644
index 0000000..b5dace4
--- /dev/null
+++ b/src/plugins/index.js
@@ -0,0 +1,13 @@
+/* 公共引入,勿随意修改,修改时需经过确认 */
+import Vue from 'vue'
+import './element'
+import './support'
+import '@/styles/vab.scss'
+import '@/config/permission'
+import '@/utils/errorLog'
+import './vabIcon'
+import VabPermissions from 'layouts/Permissions'
+import Vab from '@/utils/vab'
+
+Vue.use(Vab)
+Vue.use(VabPermissions)
diff --git a/src/plugins/support.js b/src/plugins/support.js
new file mode 100644
index 0000000..14e8d1f
--- /dev/null
+++ b/src/plugins/support.js
@@ -0,0 +1,16 @@
+import { MessageBox } from 'element-ui'
+
+if (!!window.ActiveXObject || 'ActiveXObject' in window) {
+  MessageBox({
+    title: '温馨提示',
+    message:
+      '自2015年3月起，微软已宣布弃用IE，且不再对IE提供任何更新维护，请<a target="_blank" style="color:blue" href="https://www.microsoft.com/zh-cn/edge/">点击此处</a>访问微软官网更新浏览器，如果您使用的是双核浏览器,请您切换浏览器内核为极速模式',
+    type: 'warning',
+    showClose: false,
+    showConfirmButton: false,
+    closeOnClickModal: false,
+    closeOnPressEscape: false,
+    closeOnHashChange: false,
+    dangerouslyUseHTMLString: true,
+  })
+}
diff --git a/src/plugins/vabIcon.js b/src/plugins/vabIcon.js
new file mode 100644
index 0000000..634bca7
--- /dev/null
+++ b/src/plugins/vabIcon.js
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VabIcon from 'vab-icon'
+
+Vue.component('VabIcon', VabIcon)
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..dab4452
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,539 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description router全局配置，如有必要可分文件抽离，其中asyncRoutes只有在intelligence模式下才会用到，vip文档中已提供路由的基础图标与小清新图标的配置方案，请仔细阅读
+ */
+
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Layout from '@/layouts'
+import EmptyLayout from '@/layouts/EmptyLayout'
+import { publicPath, routerMode } from '@/config'
+
+Vue.use(VueRouter)
+export const constantRoutes = [
+  {
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true,
+  },
+  {
+    path: '/register',
+    component: () => import('@/views/register/index'),
+    hidden: true,
+  },
+  {
+    path: '/401',
+    name: '401',
+    component: () => import('@/views/401'),
+    hidden: true,
+  },
+  {
+    path: '/404',
+    name: '404',
+    component: () => import('@/views/404'),
+    hidden: true,
+  },
+]
+
+export const asyncRoutes = [
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/index',
+    children: [
+      {
+        path: 'index',
+        
+        name: 'Index',
+        component: () => import('@/views/index/index'),
+        meta: {
+          title: '首页',
+          icon: 'home',
+          affix: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/mall',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'Mall',
+    meta: {
+      title: '预约数据',
+      icon: 'book',
+      permissions: ['admin'],
+    },
+
+    children: [
+      {
+        path: 'pay',
+        name: 'Pay',
+        component: () => import('@/views/mall/pay/index'),
+        meta: {
+          title: '洗护订单管理',
+          noKeepAlive: true,
+        },
+        children: null,
+      },
+        {
+        path: 'doorOrder',
+        name: 'doorOrder',
+        component: () => import('@/views/mall/doorOrder/index'),
+        meta: {
+          title: '上门订单管理',
+          noKeepAlive: true,
+        },
+        children: null,
+      },
+        {
+        path: 'registerUser',
+        name: 'registerUser',
+        component: () => import('@/views/mall/registerUser/index'),
+        meta: {
+          title: '注册用户',
+          noKeepAlive: true,
+        },
+        children: null,
+      },
+
+      {
+        path: 'goodsList',
+        name: 'GoodsList',
+        component: () => import('@/views/mall/goodsList/index'),
+        meta: {
+          title: '钱包管理',
+        },
+      }, 
+       {
+        path: 'points',
+        name: 'points',
+        component: () => import('@/views/mall/points/index'),
+        meta: {
+          title: '积分管理',
+        },
+      }, 
+      {
+        path: 'member',
+        name: 'Member',
+        component: () => import('@/views/mall/member/index'),
+        meta: {
+          title: '会员管理',
+        },
+        
+      },
+        {
+        path: 'time',
+        name: 'time',
+        component: () => import('@/views/mall/time/index'),
+        meta: {
+          title: '时段管理',
+        },
+        
+      },
+       {
+        path: 'additional',
+        name: 'Additional',
+        component: () => import('@/views/mall/additional/index'),
+        meta: {
+          title: '附加项管理',
+        },
+      },
+       {
+        path: 'archive',
+        name: 'Archive',
+        component: () => import('@/views/mall/archive/index'),
+        meta: {
+          title: '宠物档案管理',
+        },
+      },
+    ],
+  },
+   {
+    path: '/coupon',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'Coupon',
+    meta: {
+      title: '券管理',
+      icon: 'cog',
+      permissions: ['admin'],
+    },
+    children: [
+      //  {
+      //   path: 'couponlist',
+      //   name: 'Couponlist',
+      //   component: () => import('@/views/Coupon/couponlist/index'),
+      //   meta: {
+      //     title: '券包',
+      //   },
+      // },
+      //    {
+      //   path: 'distribution',
+      //   name: 'distribution',
+      //   component: () => import('@/views/Coupon/distribution/index'),
+      //   meta: {
+      //     title: '优惠券',
+      //   },
+      // },
+       {
+        path: 'redemption',
+        name: 'redemption',
+        component: () => import('@/views/Coupon/redemption/index'),
+        meta: {
+          title: '兑换码',
+        },
+      },
+       {
+        path: 'distribute',
+        name: 'Distribute',
+        component: () => import('@/views/Coupon/distribute/index'),
+        meta: {
+          title: '派券管理',
+        },
+      },
+      {
+        path: 'record',
+        name: 'Record',
+        component: () => import('@/views/Coupon/record/index'),
+        meta: {
+          title: '派券记录',
+        },
+      },
+      
+    ],
+  },
+
+   {
+    path: '/careManagement',
+    component: Layout,
+    redirect: 'careManagement',
+    name: 'Comment',  
+    meta: {
+      title: '洗护管理',
+      icon: 'sleigh',
+      permissions: ['admin'],
+    },
+    children: [
+      {
+        path: 'therapist',
+        name: 'therapist',
+        component: () => import('@/views/careManagement/therapist/index'),
+        meta: {
+          title: '洗护师管理',
+        },
+      },
+        {
+        path: 'vehicle',
+        name: 'vehicle',
+        component: () => import('@/views/careManagement/vehicle/index'),
+        meta: {
+          title: '车辆洗护师关系绑定',
+        },
+      }
+    ],
+  },
+    {
+    path: '/publicWelfare',
+    component: Layout,
+    redirect: 'publicWelfare',
+    name: 'Comment',
+    meta: {
+      title: '公益管理',
+      icon: 'bahai',
+      permissions: ['admin'],
+    },
+    children: [
+      {
+        path: 'adopt',
+        name: 'adopt',
+        component: () => import('@/views/publicWelfare/adopt/index'),
+        meta: {
+          title: '领养宠物管理',
+        },
+      },
+        {
+        path: 'points',
+        name: 'points',
+        component: () => import('@/views/publicWelfare/points/index'),
+        meta: {
+          title: '积分捐助管理',
+        },
+      },
+       {
+        path: 'public',
+        name: 'public',
+        component: () => import('@/views/publicWelfare/public/index'),
+        meta: {
+          title: '公益行管理',
+        },
+      }
+    ],
+  },
+
+    {
+    path: '/franchisee',
+    component: Layout,
+    redirect: 'franchisee',
+    name: 'Comment',
+    meta: {
+      title: '加盟商管理',
+      icon: 'book-reader',
+      permissions: ['admin'],
+    },
+    children: [
+      {
+        path: 'xiaowa',
+        name: 'Xiaowa',
+        component: () => import('@/views/xiaowa/index'),
+        meta: {
+          title: '小哇管理',
+        },
+      },
+        {
+        path: 'vehicle',
+        name: 'Vehicle',
+        component: () => import('@/views/vehicle/index'),
+        meta: {
+          title: '车辆管理',
+        },
+      },
+      //  {
+      //   path: 'order',
+      //   name: 'Order',
+      //   component: () => import('@/views/order/index'),
+      //   meta: {
+      //     title: '订单管理',
+      //   },
+      // },
+       {
+        path: 'information',
+        name: 'Information',
+        component: () => import('@/views/information/index'),
+        
+        meta: {
+          title: '信息管理',
+           permissions: ['admin', ],
+        },
+      },
+
+    ],
+  },
+   {
+    path: '/administrator',
+    component: Layout,
+    redirect: 'administrator',
+    name: 'Comment',
+    meta: {
+      title: '管理员权限管理',
+      icon: 'paper-plane',
+      permissions: ['admin'],
+    },
+    children: [
+      {
+        path: 'role',
+        name: 'role',
+        component: () => import('@/views/administrator/role/index'),
+        meta: {
+          title: '角色管理',
+        },
+      },
+        {
+        path: 'user',
+        name: 'user',
+        component: () => import('@/views/administrator/user/index'),
+        meta: {
+          title: '用户列表',
+        },
+      }
+    ],
+  },
+   {
+    path: '/pricing',
+    component: Layout,
+    redirect: 'pricing',
+    name: 'Comment',
+    meta: {
+      title: '定价管理',
+      icon: 'pen-square',
+      permissions: ['admin'],
+    },
+    children: [
+      {
+        path: 'care',
+        name: 'care',
+        component: () => import('@/views/pricing/care/index'),
+        meta: {
+          title: '洗护价格列表',
+        },
+      },
+        {
+        path: 'commission',
+        name: 'commission',
+        component: () => import('@/views/pricing/commission/index'),
+        meta: {
+          title: '佣金列表',
+        },
+      }
+    ],
+  },
+   {
+    path: '/commodity',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'commodity',
+    meta: {
+      title: '商城管理',
+      icon: 'comment-dots',
+      permissions: ['admin'],
+    },
+    children: [
+      {
+        path: 'malllist',
+        name: 'malllist',
+        component: () => import('@/views/commodity/malllist/index'),
+        meta: {
+          title: '商品列表',
+        },
+      },
+      {
+        path: 'orderlist',
+        name: 'orderlist',
+        component: () => import('@/views/commodity/orderlist/index'),
+        meta: {
+          title: '商城订单',
+        },
+      },
+    ],
+  },
+  {
+    path: '/comment',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'Comment',
+    meta: {
+      title: '评论管理',
+      icon: 'comment-dots',
+      permissions: ['admin'],
+    },
+    children: [
+      {
+        path: 'comment',
+        name: 'Comment',
+        component: () => import('@/views/comment/index'),
+        meta: {
+          title: '评论列表',
+        },
+      },
+    ],
+  },
+
+   {
+    path: '/payment',
+    component: Layout,
+    redirect: 'payment',
+    name: 'Comment',
+    meta: {
+      title: '支付管理',
+      icon: 'comment-dots',
+      permissions: ['admin'],
+    },
+    children: [
+      {
+        path: 'paymentList',
+        name: 'paymentList',
+        component: () => import('@/views/payment/paymentList/index'),
+        meta: {
+          title: '支付列表',
+        },
+      }
+    ],
+  },
+
+   {
+    path: '/settlement',
+    component: Layout,
+    redirect: 'settlement',
+    name: 'Comment',
+    meta: {
+      title: '结算管理',
+      icon: 'comment-dots',
+      permissions: ['admin'],
+    },
+    children: [
+      {
+        path: 'sett',
+        name: 'sett',
+        component: () => import('@/views/settlement/sett/index'),
+        meta: {
+          title: '结算列表',
+        },
+      }
+    ],
+  },
+
+   {
+    path: '/certificate',
+    component: Layout,
+    redirect: 'certificate',
+    name: 'Comment',
+    meta: {
+      title: '证书管理',
+      icon: 'comment-dots',
+      permissions: ['admin'],
+    },
+    children: [
+      {
+        path: 'ficate',
+        name: 'ficate',
+        component: () => import('@/views/certificate/ficate/index'),
+        meta: {
+          title: '证书列表',
+        },
+      }
+    ],
+  },
+
+   {
+    path: '/holidays',
+    component: Layout,
+    redirect: 'holidays',
+    name: 'Comment',
+    meta: {
+      title: '节假日管理',
+      icon: 'comment-dots',
+      permissions: ['admin'],
+    },
+    children: [
+      {
+        path: 'day',
+        name: 'day',
+        component: () => import('@/views/holidays/day/index'),
+        meta: {
+          title: '节假日列表',
+        },
+      }
+    ],
+  },
+ 
+  {
+    path: '*',
+    redirect: '/404',
+    hidden: true,
+  },
+]
+
+const router = new VueRouter({
+  base: publicPath,
+  mode: routerMode,
+  scrollBehavior: () => ({
+    y: 0,
+  }),
+  routes: constantRoutes,
+})
+
+export function resetRouter() {
+  location.reload()
+}
+
+export default router
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..efc3487
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,22 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 导入所有 vuex 模块，自动加入namespaced:true，用于解决vuex命名冲突，请勿修改。
+ */
+
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+const files = require.context('./modules', false, /\.js$/)
+const modules = {}
+
+files.keys().forEach((key) => {
+  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+})
+Object.keys(modules).forEach((key) => {
+  modules[key]['namespaced'] = true
+})
+const store = new Vuex.Store({
+  modules,
+})
+export default store
diff --git a/src/store/modules/errorLog.js b/src/store/modules/errorLog.js
new file mode 100644
index 0000000..08c7c03
--- /dev/null
+++ b/src/store/modules/errorLog.js
@@ -0,0 +1,28 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 异常捕获的状态拦截，请勿修改
+ */
+
+const state = () => ({
+  errorLogs: [],
+})
+const getters = {
+  errorLogs: (state) => state.errorLogs,
+}
+const mutations = {
+  addErrorLog(state, errorLog) {
+    state.errorLogs.push(errorLog)
+  },
+  clearErrorLog: (state) => {
+    state.errorLogs.splice(0)
+  },
+}
+const actions = {
+  addErrorLog({ commit }, errorLog) {
+    commit('addErrorLog', errorLog)
+  },
+  clearErrorLog({ commit }) {
+    commit('clearErrorLog')
+  },
+}
+export default { state, getters, mutations, actions }
diff --git a/src/store/modules/routes.js b/src/store/modules/routes.js
new file mode 100644
index 0000000..586b6d1
--- /dev/null
+++ b/src/store/modules/routes.js
@@ -0,0 +1,63 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 路由拦截状态管理，目前两种模式：all模式与intelligence模式
+ */
+import { asyncRoutes, constantRoutes } from '@/router'
+import { getRouterList } from '@/api/router'
+import { convertRouter, filterAsyncRoutes } from '@/utils/handleRoutes'
+
+const state = () => ({
+  routes: [],
+  partialRoutes: [],
+})
+const getters = {
+  routes: (state) => state.routes,
+  partialRoutes: (state) => state.partialRoutes,
+}
+const mutations = {
+  setRoutes(state, routes) {
+    state.routes = constantRoutes.concat(routes)
+  },
+  setAllRoutes(state, routes) {
+    state.routes = constantRoutes.concat(routes)
+  },
+}
+const actions = {
+  /**
+   * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+   * @description intelligence模式设置路由
+   * @param {*} { commit }
+   * @param {*} permissions
+   * @returns
+   */
+  async setRoutes({ commit }, permissions) {
+    //根据permissions做路由筛选
+    let accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
+    commit('setRoutes', accessedRoutes)
+    return accessedRoutes
+  },
+  /**
+   * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+   * @description all模式设置路由
+   * @param {*} { commit }
+   * @returns
+   */
+  async setAllRoutes({ commit }) {
+    try {
+      let { data } = await getRouterList()
+      if (!data || !Array.isArray(data)) {
+        console.error('后端返回的路由数据格式不正确', data)
+        data = []
+      }
+
+      const accessedRoutes = convertRouter(data)
+      commit('setAllRoutes', accessedRoutes)
+      return accessedRoutes
+    } catch (error) {
+      console.error('获取路由列表失败', error)
+      commit('setAllRoutes', [])
+      return []
+    }
+  },
+}
+export default { state, getters, mutations, actions }
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..183fbc0
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,74 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 所有全局配置的状态管理，如无必要请勿修改
+ */
+
+import defaultSettings from '@/config'
+
+const { tabsBar, logo, layout, header, themeBar } = defaultSettings
+const theme = JSON.parse(localStorage.getItem('vue-admin-better-theme')) || ''
+const state = () => ({
+  tabsBar: theme.tabsBar || tabsBar,
+  logo,
+  collapse: false,
+  layout: theme.layout || layout,
+  header: theme.header || header,
+  device: 'desktop',
+  themeBar,
+})
+const getters = {
+  collapse: (state) => state.collapse,
+  device: (state) => state.device,
+  header: (state) => state.header,
+  layout: (state) => state.layout,
+  logo: (state) => state.logo,
+  tabsBar: (state) => state.tabsBar,
+  themeBar: (state) => state.themeBar,
+}
+const mutations = {
+  changeLayout: (state, layout) => {
+    if (layout) state.layout = layout
+  },
+  changeHeader: (state, header) => {
+    if (header) state.header = header
+  },
+  changeTabsBar: (state, tabsBar) => {
+    if (tabsBar) state.tabsBar = tabsBar
+  },
+  changeCollapse: (state) => {
+    state.collapse = !state.collapse
+  },
+  foldSideBar: (state) => {
+    state.collapse = true
+  },
+  openSideBar: (state) => {
+    state.collapse = false
+  },
+  toggleDevice: (state, device) => {
+    state.device = device
+  },
+}
+const actions = {
+  changeLayout({ commit }, layout) {
+    commit('changeLayout', layout)
+  },
+  changeHeader({ commit }, header) {
+    commit('changeHeader', header)
+  },
+  changeTabsBar({ commit }, tabsBar) {
+    commit('changeTabsBar', tabsBar)
+  },
+  changeCollapse({ commit }) {
+    commit('changeCollapse')
+  },
+  foldSideBar({ commit }) {
+    commit('foldSideBar')
+  },
+  openSideBar({ commit }) {
+    commit('openSideBar')
+  },
+  toggleDevice({ commit }, device) {
+    commit('toggleDevice', device)
+  },
+}
+export default { state, getters, mutations, actions }
diff --git a/src/store/modules/table.js b/src/store/modules/table.js
new file mode 100644
index 0000000..616eda5
--- /dev/null
+++ b/src/store/modules/table.js
@@ -0,0 +1,23 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 代码生成机状态管理
+ */
+
+const state = () => ({
+  srcCode: '',
+})
+const getters = {
+  srcTableCode: (state) => state.srcCode,
+}
+
+const mutations = {
+  setTableCode(state, srcCode) {
+    state.srcCode = srcCode
+  },
+}
+const actions = {
+  setTableCode({ commit }, srcCode) {
+    commit('setTableCode', srcCode)
+  },
+}
+export default { state, getters, mutations, actions }
diff --git a/src/store/modules/tabsBar.js b/src/store/modules/tabsBar.js
new file mode 100644
index 0000000..a1097e1
--- /dev/null
+++ b/src/store/modules/tabsBar.js
@@ -0,0 +1,110 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description tabsBar多标签页逻辑，前期借鉴了很多开源项目发现都有个共同的特点很繁琐并不符合框架设计的初衷，后来在github用户hipi的启发下完成了重构，请勿修改
+ */
+
+const state = () => ({
+  visitedRoutes: [],
+})
+const getters = {
+  visitedRoutes: (state) => state.visitedRoutes,
+}
+const mutations = {
+  addVisitedRoute(state, route) {
+    let target = state.visitedRoutes.find((item) => item.path === route.path)
+    if (target) {
+      if (route.fullPath !== target.fullPath) Object.assign(target, route)
+      return
+    }
+    state.visitedRoutes.push(Object.assign({}, route))
+  },
+  delVisitedRoute(state, route) {
+    state.visitedRoutes.forEach((item, index) => {
+      if (item.path === route.path) state.visitedRoutes.splice(index, 1)
+    })
+  },
+  delOthersVisitedRoute(state, route) {
+    state.visitedRoutes = state.visitedRoutes.filter((item) => item.meta.affix || item.path === route.path)
+  },
+  delLeftVisitedRoute(state, route) {
+    let index = state.visitedRoutes.length
+    state.visitedRoutes = state.visitedRoutes.filter((item) => {
+      if (item.name === route.name) index = state.visitedRoutes.indexOf(item)
+      return item.meta.affix || index <= state.visitedRoutes.indexOf(item)
+    })
+  },
+  delRightVisitedRoute(state, route) {
+    let index = state.visitedRoutes.length
+    state.visitedRoutes = state.visitedRoutes.filter((item) => {
+      if (item.name === route.name) index = state.visitedRoutes.indexOf(item)
+      return item.meta.affix || index >= state.visitedRoutes.indexOf(item)
+    })
+  },
+  delAllVisitedRoutes(state) {
+    state.visitedRoutes = state.visitedRoutes.filter((item) => item.meta.affix)
+  },
+  updateVisitedRoute(state, route) {
+    state.visitedRoutes.forEach((item) => {
+      if (item.path === route.path) item = Object.assign(item, route)
+    })
+  },
+}
+const actions = {
+  addVisitedRoute({ commit }, route) {
+    commit('addVisitedRoute', route)
+  },
+  async delRoute({ dispatch, state }, route) {
+    await dispatch('delVisitedRoute', route)
+    return {
+      visitedRoutes: [...state.visitedRoutes],
+    }
+  },
+  delVisitedRoute({ commit, state }, route) {
+    commit('delVisitedRoute', route)
+    return [...state.visitedRoutes]
+  },
+  async delOthersRoutes({ dispatch, state }, route) {
+    await dispatch('delOthersVisitedRoute', route)
+    return {
+      visitedRoutes: [...state.visitedRoutes],
+    }
+  },
+  async delLeftRoutes({ dispatch, state }, route) {
+    await dispatch('delLeftVisitedRoute', route)
+    return {
+      visitedRoutes: [...state.visitedRoutes],
+    }
+  },
+  async delRightRoutes({ dispatch, state }, route) {
+    await dispatch('delRightVisitedRoute', route)
+    return {
+      visitedRoutes: [...state.visitedRoutes],
+    }
+  },
+  delOthersVisitedRoute({ commit, state }, route) {
+    commit('delOthersVisitedRoute', route)
+    return [...state.visitedRoutes]
+  },
+  delLeftVisitedRoute({ commit, state }, route) {
+    commit('delLeftVisitedRoute', route)
+    return [...state.visitedRoutes]
+  },
+  delRightVisitedRoute({ commit, state }, route) {
+    commit('delRightVisitedRoute', route)
+    return [...state.visitedRoutes]
+  },
+  async delAllRoutes({ dispatch, state }, route) {
+    await dispatch('delAllVisitedRoutes', route)
+    return {
+      visitedRoutes: [...state.visitedRoutes],
+    }
+  },
+  delAllVisitedRoutes({ commit, state }) {
+    commit('delAllVisitedRoutes')
+    return [...state.visitedRoutes]
+  },
+  updateVisitedRoute({ commit }, route) {
+    commit('updateVisitedRoute', route)
+  },
+}
+export default { state, getters, mutations, actions }
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
new file mode 100644
index 0000000..ba65c1d
--- /dev/null
+++ b/src/store/modules/user.js
@@ -0,0 +1,85 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 登录、获取用户信息、退出登录、清除accessToken逻辑，不建议修改
+ */
+
+import Vue from 'vue'
+import { getUserInfo, login, logout } from '@/api/user'
+import { getPublicKey } from '@/api/publicKey'
+import { getAccessToken, removeAccessToken, setAccessToken } from '@/utils/accessToken'
+import { resetRouter } from '@/router'
+import { title, tokenName } from '@/config'
+
+const state = () => ({
+  accessToken: getAccessToken(),
+  username: '',
+  avatar: '',
+  permissions: [],
+})
+const getters = {
+  accessToken: (state) => state.accessToken,
+  username: (state) => state.username,
+  avatar: (state) => state.avatar,
+  permissions: (state) => state.permissions,
+}
+const mutations = {
+  setAccessToken(state, accessToken) {
+    state.accessToken = accessToken
+    setAccessToken(accessToken)
+  },
+  setUsername(state, username) {
+    state.username = username
+  },
+  setAvatar(state, avatar) {
+    state.avatar = avatar
+  },
+  setPermissions(state, permissions) {
+    state.permissions = permissions
+  },
+}
+const actions = {
+  setPermissions({ commit }, permissions) {
+    commit('setPermissions', permissions)
+  },
+  async login({ commit }, userInfo) {
+    const { data } = await login(userInfo)
+    const accessToken = data.tokenName
+    console.log(data,'--/-----111')
+    if (accessToken) {
+      commit('setAccessToken', accessToken)
+      const hour = new Date().getHours()
+      const thisTime = hour < 8 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 18 ? '下午好' : '晚上好'
+      Vue.prototype.$baseNotify(`欢迎登录${title}`, `${thisTime}！`)
+    } else {
+      Vue.prototype.$baseMessage(`登录接口异常，未正确返回${tokenName}...`, 'error')
+    }
+  },
+  async getUserInfo({ commit, state }) {
+    const { data } = await getUserInfo(state.accessToken)
+    if (!data) {
+      Vue.prototype.$baseMessage('验证失败，请重新登录...', 'error')
+      return false
+    }
+    let { permissions, username, avatar } = data
+    if (permissions && username && Array.isArray(permissions)) {
+      commit('setPermissions', permissions)
+      commit('setUsername', username)
+      commit('setAvatar', avatar)
+      return permissions
+    } else {
+      Vue.prototype.$baseMessage('用户信息接口异常', 'error')
+      return false
+    }
+  },
+  async logout({ dispatch }) {
+    await logout(state.accessToken)
+    await dispatch('resetAccessToken')
+    await resetRouter()
+  },
+  resetAccessToken({ commit }) {
+    commit('setPermissions', [])
+    commit('setAccessToken', '')
+    removeAccessToken()
+  },
+}
+export default { state, getters, mutations, actions }
diff --git a/src/styles/loading.scss b/src/styles/loading.scss
new file mode 100644
index 0000000..4aceb61
--- /dev/null
+++ b/src/styles/loading.scss
@@ -0,0 +1,346 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 全局加载动画
+ */
+
+@charset "utf-8";
+
+@import './spinner/dots.css';
+@import './spinner/gauge.css';
+@import './spinner/inner-circles.css';
+@import './spinner/plus.css';
+
+$base-loading: '.vab-loading-type';
+
+/* 自定义loading开始 */
+#{$base-loading}1 {
+  display: flex;
+  width: 36px;
+  height: 36px;
+  margin: 0 auto 15px;
+  border: 3px solid transparent;
+  border-top-color: $base-color-blue;
+  border-bottom-color: $base-color-blue;
+  border-radius: 50%;
+  animation: vabLoading1-0 0.8s linear infinite;
+}
+
+#{$base-loading}1::before {
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin: auto;
+  content: '';
+  border: 3px solid $base-color-blue;
+  border-radius: 50%;
+  animation: vabLoading1 0.5s alternate ease-in infinite;
+}
+
+@keyframes vabLoading1-0 {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes vabLoading1 {
+  from {
+    transform: scale(0.5);
+  }
+
+  to {
+    transform: scale(1.2);
+  }
+}
+
+#{$base-loading}2 {
+  width: 20px;
+  height: 20px;
+  margin-top: -40px;
+  margin-left: -10px;
+  animation: vabLoading2 1s linear reverse infinite;
+}
+
+#{$base-loading}2::before {
+  display: block;
+  width: 36px;
+  height: 36px;
+  margin-top: -17px;
+  margin-left: -18px;
+  content: '';
+  animation: vabLoading2 0.4s linear infinite;
+}
+
+#{$base-loading}2::after {
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin-top: -3px;
+  margin-left: -4px;
+  content: '';
+  animation: vabLoading2 0.4s linear infinite;
+}
+
+#{$base-loading}2::before,
+#{$base-loading}2,
+#{$base-loading}2::after {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  border: 3px solid transparent;
+  border-top-color: $base-color-blue;
+  border-right-color: $base-color-blue;
+  border-radius: 50%;
+}
+
+@keyframes vabLoading2 {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+#{$base-loading}3 {
+  display: inline-block;
+  width: 2.5em;
+  height: 3em;
+  margin-bottom: 15px;
+  border: 3px solid transparent;
+  border-top-color: $base-color-blue;
+  border-bottom-color: $base-color-blue;
+  border-radius: 50%;
+  animation: vabLoading3 2s ease infinite;
+}
+
+@keyframes vabLoading3 {
+  50% {
+    border-width: 8px;
+    transform: rotate(360deg) scale(0.4, 0.33);
+  }
+
+  100% {
+    border-width: 3px;
+    transform: rotate(720deg) scale(1, 1);
+  }
+}
+
+#{$base-loading}4 {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  margin: 0 auto 10px;
+  border: 8px solid transparent;
+  border-bottom-color: $base-color-blue;
+  border-left-color: $base-color-blue;
+  border-radius: 50%;
+  animation: vabLoading4 1s linear infinite normal;
+}
+
+#{$base-loading}4::after {
+  display: block;
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  content: ' ';
+  border: 6px solid $base-color-blue;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  border-radius: 50%;
+}
+
+@keyframes vabLoading4 {
+  0% {
+    opacity: 0.2;
+    transform: rotate(0deg);
+  }
+
+  50% {
+    opacity: 1;
+    transform: rotate(180deg);
+  }
+
+  100% {
+    opacity: 0.2;
+    transform: rotate(360deg);
+  }
+}
+
+#{$base-loading}5 {
+  display: block;
+  width: 0;
+  height: 0;
+  margin: 0 auto 15px;
+  border: solid 1.5em $base-color-blue;
+  border-right: solid 1.5em transparent;
+  border-left: solid 1.5em transparent;
+  border-radius: 100%;
+  animation: vabLoading5 1s linear infinite;
+}
+
+@keyframes vabLoading5 {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(60deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#{$base-loading}6 {
+  display: block;
+  width: 0;
+  height: 0;
+  margin: 0 auto 25px auto;
+  perspective: 200px;
+}
+
+#{$base-loading}6::before,
+#{$base-loading}6::after {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  content: '';
+  background: rgba(0, 0, 0, 0);
+  animation: vabLoading6 0.5s infinite alternate;
+}
+
+#{$base-loading}6::before {
+  left: 0;
+}
+
+#{$base-loading}6::after {
+  right: 0;
+  animation-delay: 0.15s;
+}
+
+@keyframes vabLoading6 {
+  0% {
+    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    transform: scale(1) translateY(0) rotateX(0deg);
+  }
+
+  100% {
+    background: $base-color-blue;
+    box-shadow: 0 25px 40px rgba($base-color-blue, 0.5);
+    transform: scale(1.2) translateY(-25px) rotateX(45deg);
+  }
+}
+
+#{$base-loading}7 {
+  display: block;
+  width: 25px;
+  height: 25px;
+  margin: 0 auto 15px auto;
+  border: 2px solid $base-color-blue;
+  border-top-color: rgba($base-color-blue, 0.2);
+  border-right-color: rgba($base-color-blue, 0.2);
+  border-bottom-color: rgba($base-color-blue, 0.2);
+  border-radius: 100%;
+  animation: vabLoading7 infinite 0.75s linear;
+}
+
+@keyframes vabLoading7 {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#{$base-loading}8 {
+  position: relative;
+  box-sizing: border-box;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 0 auto 15px auto;
+  background-color: $base-color-blue;
+  border-radius: 50%;
+  box-shadow: 30px 0 0 0 $base-color-blue;
+  transform: translateX(-15px);
+}
+
+#{$base-loading}8::after {
+  position: absolute;
+  top: 8px;
+  left: 9px;
+  width: 10px;
+  height: 10px;
+  content: '';
+  background-color: $base-color-white;
+  border-radius: 50%;
+  box-shadow: 30px 0 0 0 $base-color-white;
+  animation: vabLoading8 2s ease-in-out infinite alternate;
+}
+
+@keyframes vabLoading8 {
+  0% {
+    left: 9px;
+  }
+
+  100% {
+    left: 1px;
+  }
+}
+
+#{$base-loading}9 {
+  position: relative;
+  box-sizing: border-box;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 0 auto 15px auto;
+  border: 1px $base-color-blue solid;
+  animation: vabLoading9 5s linear infinite;
+}
+
+#{$base-loading}9::after {
+  position: absolute;
+  top: -8px;
+  left: 0;
+  width: 4px;
+  height: 4px;
+  content: '';
+  background-color: $base-color-blue;
+  animation: vabLoading9_check 1s ease-in-out infinite;
+}
+
+@keyframes vabLoading9_check {
+  25% {
+    top: -8px;
+    left: 22px;
+  }
+
+  50% {
+    top: 22px;
+    left: 22px;
+  }
+
+  75% {
+    top: 22px;
+    left: -9px;
+  }
+
+  100% {
+    top: -7px;
+    left: -9px;
+  }
+}
+
+@keyframes vabLoading9 {
+  0% {
+    box-shadow: inset 0 0 0 0 rgba($base-color-blue, 0.5);
+    opacity: 0.5;
+  }
+
+  100% {
+    box-shadow: inset 0 -20px 0 0 $base-color-blue;
+  }
+}
+
+/* 自定义loading结束 */
diff --git a/src/styles/normalize.scss b/src/styles/normalize.scss
new file mode 100644
index 0000000..8112c9b
--- /dev/null
+++ b/src/styles/normalize.scss
@@ -0,0 +1,353 @@
+@charset "utf-8";
+
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  margin: 0.67em 0;
+  font-size: 2em;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+  border-bottom: none; /* 1 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0; /* 2 */
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  color: inherit; /* 2 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/src/styles/spinner/dots.css b/src/styles/spinner/dots.css
new file mode 100644
index 0000000..f9e9de7
--- /dev/null
+++ b/src/styles/spinner/dots.css
@@ -0,0 +1,68 @@
+.dots-loader:not(:required) {
+  position: relative;
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin-bottom: 30px;
+  overflow: hidden;
+  text-indent: -9999px;
+  background: transparent;
+  border-radius: 100%;
+  box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
+  transform-origin: 50% 50%;
+  animation: dots-loader 5s infinite ease-in-out;
+}
+
+@keyframes dots-loader {
+  0% {
+    box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
+  }
+
+  8.33% {
+    box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
+  }
+
+  16.67% {
+    box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
+  }
+
+  25% {
+    box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
+  }
+
+  33.33% {
+    box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
+  }
+
+  41.67% {
+    box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
+  }
+
+  50% {
+    box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
+  }
+
+  58.33% {
+    box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
+  }
+
+  66.67% {
+    box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
+  }
+
+  75% {
+    box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
+  }
+
+  83.33% {
+    box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
+  }
+
+  91.67% {
+    box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
+  }
+
+  100% {
+    box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
+  }
+}
diff --git a/src/styles/spinner/gauge.css b/src/styles/spinner/gauge.css
new file mode 100644
index 0000000..5457bf9
--- /dev/null
+++ b/src/styles/spinner/gauge.css
@@ -0,0 +1,104 @@
+.gauge-loader:not(:required) {
+  position: relative;
+  display: inline-block;
+  width: 64px;
+  height: 32px;
+  margin-bottom: 10px;
+  overflow: hidden;
+  text-indent: -9999px;
+  background: #6ca;
+  border-top-left-radius: 32px;
+  border-top-right-radius: 32px;
+}
+
+.gauge-loader:not(:required)::before {
+  position: absolute;
+  top: 5px;
+  left: 30px;
+  width: 4px;
+  height: 27px;
+  content: '';
+  background: white;
+  border-radius: 2px;
+  transform-origin: 50% 100%;
+  animation: gauge-loader 4000ms infinite ease;
+}
+
+.gauge-loader:not(:required)::after {
+  position: absolute;
+  top: 26px;
+  left: 26px;
+  width: 13px;
+  height: 13px;
+  content: '';
+  background: white;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+}
+
+@keyframes gauge-loader {
+  0% {
+    transform: rotate(-50deg);
+  }
+
+  10% {
+    transform: rotate(20deg);
+  }
+
+  20% {
+    transform: rotate(60deg);
+  }
+
+  24% {
+    transform: rotate(60deg);
+  }
+
+  40% {
+    transform: rotate(-20deg);
+  }
+
+  54% {
+    transform: rotate(70deg);
+  }
+
+  56% {
+    transform: rotate(78deg);
+  }
+
+  58% {
+    transform: rotate(73deg);
+  }
+
+  60% {
+    transform: rotate(75deg);
+  }
+
+  62% {
+    transform: rotate(70deg);
+  }
+
+  70% {
+    transform: rotate(-20deg);
+  }
+
+  80% {
+    transform: rotate(20deg);
+  }
+
+  83% {
+    transform: rotate(25deg);
+  }
+
+  86% {
+    transform: rotate(20deg);
+  }
+
+  89% {
+    transform: rotate(25deg);
+  }
+
+  100% {
+    transform: rotate(-50deg);
+  }
+}
diff --git a/src/styles/spinner/inner-circles.css b/src/styles/spinner/inner-circles.css
new file mode 100644
index 0000000..a7955f5
--- /dev/null
+++ b/src/styles/spinner/inner-circles.css
@@ -0,0 +1,51 @@
+.inner-circles-loader:not(:required) {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  margin-bottom: 10px;
+  overflow: hidden;
+  text-indent: -9999px;
+  background: rgba(25, 165, 152, 0.5);
+  border-radius: 50%;
+  transform: translate3d(0, 0, 0);
+}
+
+.inner-circles-loader:not(:required)::before,
+.inner-circles-loader:not(:required)::after {
+  position: absolute;
+  top: 0;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  content: '';
+  border-radius: 50%;
+}
+
+.inner-circles-loader:not(:required)::before {
+  left: 0;
+  background: #c7efcf;
+  transform-origin: 0 50%;
+  animation: inner-circles-loader 3s infinite;
+}
+
+.inner-circles-loader:not(:required)::after {
+  right: 0;
+  background: #eef5db;
+  transform-origin: 100% 50%;
+  animation: inner-circles-loader 3s 0.2s reverse infinite;
+}
+
+@keyframes inner-circles-loader {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(360deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
diff --git a/src/styles/spinner/plus.css b/src/styles/spinner/plus.css
new file mode 100644
index 0000000..2659c9c
--- /dev/null
+++ b/src/styles/spinner/plus.css
@@ -0,0 +1,341 @@
+.plus-loader:not(:required) {
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 48px;
+  margin-bottom: 10px;
+  overflow: hidden;
+  text-indent: -9999px;
+  background: #f86;
+  -moz-border-radius: 24px;
+  -webkit-border-radius: 24px;
+  border-radius: 24px;
+  -moz-transform: rotateZ(90deg);
+  -ms-transform: rotateZ(90deg);
+  -webkit-transform: rotateZ(90deg);
+  transform: rotateZ(90deg);
+  -moz-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  -webkit-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+  -moz-animation: plus-loader-background 3s infinite ease-in-out;
+  -webkit-animation: plus-loader-background 3s infinite ease-in-out;
+  animation: plus-loader-background 3s infinite ease-in-out;
+}
+
+.plus-loader:not(:required)::after {
+  position: absolute;
+  top: 0;
+  right: 50%;
+  width: 50%;
+  height: 100%;
+  content: '';
+  background: #f86;
+  -moz-border-radius: 24px 0 0 24px;
+  -webkit-border-radius: 24px;
+  border-radius: 24px 0 0 24px;
+  -moz-transform-origin: 100% 50%;
+  -ms-transform-origin: 100% 50%;
+  -webkit-transform-origin: 100% 50%;
+  transform-origin: 100% 50%;
+  -moz-animation: plus-loader-top 3s infinite linear;
+  -webkit-animation: plus-loader-top 3s infinite linear;
+  animation: plus-loader-top 3s infinite linear;
+}
+
+.plus-loader:not(:required)::before {
+  position: absolute;
+  top: 0;
+  right: 50%;
+  width: 50%;
+  height: 100%;
+  content: '';
+  background: #fc6;
+  -moz-border-radius: 24px 0 0 24px;
+  -webkit-border-radius: 24px;
+  border-radius: 24px 0 0 24px;
+  -moz-transform-origin: 100% 50%;
+  -ms-transform-origin: 100% 50%;
+  -webkit-transform-origin: 100% 50%;
+  transform-origin: 100% 50%;
+  -moz-animation: plus-loader-bottom 3s infinite linear;
+  -webkit-animation: plus-loader-bottom 3s infinite linear;
+  animation: plus-loader-bottom 3s infinite linear;
+}
+
+@keyframes plus-loader-top {
+  2.5% {
+    background: #f86;
+    -moz-transform: rotateY(0deg);
+    -ms-transform: rotateY(0deg);
+    -webkit-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+    -moz-animation-timing-function: ease-in;
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  13.75% {
+    background: #ff430d;
+    -moz-transform: rotateY(90deg);
+    -ms-transform: rotateY(90deg);
+    -webkit-transform: rotateY(90deg);
+    transform: rotateY(90deg);
+    -moz-animation-timing-function: step-start;
+    -webkit-animation-timing-function: step-start;
+    animation-timing-function: step-start;
+  }
+
+  13.76% {
+    background: #ffae0d;
+    -moz-transform: rotateY(90deg);
+    -ms-transform: rotateY(90deg);
+    -webkit-transform: rotateY(90deg);
+    transform: rotateY(90deg);
+    -moz-animation-timing-function: ease-out;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  25% {
+    background: #fc6;
+    -moz-transform: rotateY(180deg);
+    -ms-transform: rotateY(180deg);
+    -webkit-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+  }
+
+  27.5% {
+    background: #fc6;
+    -moz-transform: rotateY(180deg);
+    -ms-transform: rotateY(180deg);
+    -webkit-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+    -moz-animation-timing-function: ease-in;
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  41.25% {
+    background: #ffae0d;
+    -moz-transform: rotateY(90deg);
+    -ms-transform: rotateY(90deg);
+    -webkit-transform: rotateY(90deg);
+    transform: rotateY(90deg);
+    -moz-animation-timing-function: step-start;
+    -webkit-animation-timing-function: step-start;
+    animation-timing-function: step-start;
+  }
+
+  41.26% {
+    background: #2cc642;
+    -moz-transform: rotateY(90deg);
+    -ms-transform: rotateY(90deg);
+    -webkit-transform: rotateY(90deg);
+    transform: rotateY(90deg);
+    -moz-animation-timing-function: ease-out;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    background: #6d7;
+    -moz-transform: rotateY(0deg);
+    -ms-transform: rotateY(0deg);
+    -webkit-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+  }
+
+  52.5% {
+    background: #6d7;
+    -moz-transform: rotateY(0deg);
+    -ms-transform: rotateY(0deg);
+    -webkit-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+    -moz-animation-timing-function: ease-in;
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  63.75% {
+    background: #2cc642;
+    -moz-transform: rotateY(90deg);
+    -ms-transform: rotateY(90deg);
+    -webkit-transform: rotateY(90deg);
+    transform: rotateY(90deg);
+    -moz-animation-timing-function: step-start;
+    -webkit-animation-timing-function: step-start;
+    animation-timing-function: step-start;
+  }
+
+  63.76% {
+    background: #1386d2;
+    -moz-transform: rotateY(90deg);
+    -ms-transform: rotateY(90deg);
+    -webkit-transform: rotateY(90deg);
+    transform: rotateY(90deg);
+    -moz-animation-timing-function: ease-out;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  75% {
+    background: #4ae;
+    -moz-transform: rotateY(180deg);
+    -ms-transform: rotateY(180deg);
+    -webkit-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+  }
+
+  77.5% {
+    background: #4ae;
+    -moz-transform: rotateY(180deg);
+    -ms-transform: rotateY(180deg);
+    -webkit-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+    -moz-animation-timing-function: ease-in;
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  91.25% {
+    background: #1386d2;
+    -moz-transform: rotateY(90deg);
+    -ms-transform: rotateY(90deg);
+    -webkit-transform: rotateY(90deg);
+    transform: rotateY(90deg);
+    -moz-animation-timing-function: step-start;
+    -webkit-animation-timing-function: step-start;
+    animation-timing-function: step-start;
+  }
+
+  91.26% {
+    background: #ff430d;
+    -moz-transform: rotateY(90deg);
+    -ms-transform: rotateY(90deg);
+    -webkit-transform: rotateY(90deg);
+    transform: rotateY(90deg);
+    -moz-animation-timing-function: ease-in;
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  100% {
+    background: #f86;
+    -moz-transform: rotateY(0deg);
+    -ms-transform: rotateY(0deg);
+    -webkit-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+    -moz-animation-timing-function: step-start;
+    -webkit-animation-timing-function: step-start;
+    animation-timing-function: step-start;
+  }
+}
+
+@keyframes plus-loader-bottom {
+  0% {
+    background: #fc6;
+    -moz-animation-timing-function: step-start;
+    -webkit-animation-timing-function: step-start;
+    animation-timing-function: step-start;
+  }
+
+  50% {
+    background: #fc6;
+    -moz-animation-timing-function: step-start;
+    -webkit-animation-timing-function: step-start;
+    animation-timing-function: step-start;
+  }
+
+  75% {
+    background: #4ae;
+    -moz-animation-timing-function: step-start;
+    -webkit-animation-timing-function: step-start;
+    animation-timing-function: step-start;
+  }
+
+  100% {
+    background: #4ae;
+    -moz-animation-timing-function: step-start;
+    -webkit-animation-timing-function: step-start;
+    animation-timing-function: step-start;
+  }
+}
+
+@keyframes plus-loader-background {
+  0% {
+    background: #f86;
+    -moz-transform: rotateZ(180deg);
+    -ms-transform: rotateZ(180deg);
+    -webkit-transform: rotateZ(180deg);
+    transform: rotateZ(180deg);
+  }
+
+  25% {
+    background: #f86;
+    -moz-transform: rotateZ(180deg);
+    -ms-transform: rotateZ(180deg);
+    -webkit-transform: rotateZ(180deg);
+    transform: rotateZ(180deg);
+    -moz-animation-timing-function: step-start;
+    -webkit-animation-timing-function: step-start;
+    animation-timing-function: step-start;
+  }
+
+  27.5% {
+    background: #6d7;
+    -moz-transform: rotateZ(90deg);
+    -ms-transform: rotateZ(90deg);
+    -webkit-transform: rotateZ(90deg);
+    transform: rotateZ(90deg);
+  }
+
+  50% {
+    background: #6d7;
+    -moz-transform: rotateZ(90deg);
+    -ms-transform: rotateZ(90deg);
+    -webkit-transform: rotateZ(90deg);
+    transform: rotateZ(90deg);
+    -moz-animation-timing-function: step-start;
+    -webkit-animation-timing-function: step-start;
+    animation-timing-function: step-start;
+  }
+
+  52.5% {
+    background: #6d7;
+    -moz-transform: rotateZ(0deg);
+    -ms-transform: rotateZ(0deg);
+    -webkit-transform: rotateZ(0deg);
+    transform: rotateZ(0deg);
+  }
+
+  75% {
+    background: #6d7;
+    -moz-transform: rotateZ(0deg);
+    -ms-transform: rotateZ(0deg);
+    -webkit-transform: rotateZ(0deg);
+    transform: rotateZ(0deg);
+    -moz-animation-timing-function: step-start;
+    -webkit-animation-timing-function: step-start;
+    animation-timing-function: step-start;
+  }
+
+  77.5% {
+    background: #f86;
+    -moz-transform: rotateZ(270deg);
+    -ms-transform: rotateZ(270deg);
+    -webkit-transform: rotateZ(270deg);
+    transform: rotateZ(270deg);
+  }
+
+  100% {
+    background: #f86;
+    -moz-transform: rotateZ(270deg);
+    -ms-transform: rotateZ(270deg);
+    -webkit-transform: rotateZ(270deg);
+    transform: rotateZ(270deg);
+    -moz-animation-timing-function: step-start;
+    -webkit-animation-timing-function: step-start;
+    animation-timing-function: step-start;
+  }
+}
diff --git a/src/styles/themes/default.scss b/src/styles/themes/default.scss
new file mode 100644
index 0000000..7061af3
--- /dev/null
+++ b/src/styles/themes/default.scss
@@ -0,0 +1 @@
+/* 绿荫草场主题、荣耀典藏主题、暗黑之子主题加QQ讨论群972435319、1139183756后私聊群主获取，获取后将主题放到themes文件夹根目录即可 */
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
new file mode 100644
index 0000000..ea742ce
--- /dev/null
+++ b/src/styles/transition.scss
@@ -0,0 +1,19 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description vue过渡动画
+ */
+
+@charset "utf-8";
+
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: $base-transition;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+}
diff --git a/src/styles/vab.scss b/src/styles/vab.scss
new file mode 100644
index 0000000..784266e
--- /dev/null
+++ b/src/styles/vab.scss
@@ -0,0 +1,532 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 全局样式
+ */
+
+@charset "utf-8";
+
+@import './normalize.scss';
+@import './transition.scss';
+@import './loading.scss';
+@import 'element-ui/lib/theme-chalk/display.css';
+
+@mixin scrollbar {
+  max-height: 88vh;
+  margin-bottom: 0.5vh;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(144, 147, 153, 0.3);
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(144, 147, 153, 0.3);
+  }
+}
+
+@mixin base-scrollbar {
+  &::-webkit-scrollbar {
+    width: 13px;
+    height: 13px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    background-clip: padding-box;
+    border: 3px solid transparent;
+    border-radius: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-track:hover {
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+}
+
+img {
+  object-fit: cover;
+  border-radius: 6px;
+}
+
+a {
+  color: $base-color-blue;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.3s ease;
+
+  &:hover {
+    color: darken($base-color-blue, 10%);
+  }
+}
+
+* {
+  transition: $base-transition;
+}
+
+svg {
+  transition: none;
+
+  * {
+    transition: none;
+  }
+}
+
+html {
+  body {
+    position: relative;
+    height: 100vh;
+    padding: 0;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: $base-font-size-default;
+    color: #2c3e50;
+    background: #f0f2f5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    @include base-scrollbar;
+
+    div {
+      @include base-scrollbar;
+    }
+
+    svg,
+    i {
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    .v-modal {
+      backdrop-filter: blur(10px);
+    }
+
+    .el-tag + .el-tag {
+      margin-left: 10px;
+    }
+
+    .editor-toolbar {
+      .no-mobile,
+      .fa-question-circle {
+        display: none;
+      }
+    }
+
+    .el-divider--horizontal {
+      margin: 15px 0 25px 0;
+
+      .el-divider__text {
+        display: -webkit-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    .el-image-viewer {
+      &__close {
+        .el-icon-circle-close {
+          color: $base-color-white;
+        }
+      }
+    }
+
+    .vue-admin-better-wrapper {
+      .app-main-container {
+        @include base-scrollbar;
+
+        > [class*='-container'] {
+          * {
+            transition: none;
+          }
+
+          padding: $base-padding;
+          background: $base-color-white;
+          border-radius: 12px;
+          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
+          border: 1px solid rgba(0, 0, 0, 0.02);
+        }
+      }
+    }
+
+    /* 进度条开始 */
+    #nprogress {
+      position: fixed;
+      z-index: $base-z-index;
+
+      .bar {
+        background: linear-gradient(90deg, $base-color-blue, lighten($base-color-blue, 20%)) !important;
+        height: 3px !important;
+      }
+
+      .peg {
+        box-shadow: 0 0 14px $base-color-blue, 0 0 8px $base-color-blue !important;
+      }
+    }
+
+    .el-table {
+      .el-table__body-wrapper {
+        @include base-scrollbar;
+      }
+
+      th {
+        background: #f8fafc;
+      }
+
+      td,
+      th {
+        position: relative;
+        box-sizing: border-box;
+        padding: 10px 0;
+
+        .cell {
+          font-size: $base-font-size-default;
+          font-weight: normal;
+          color: #555;
+
+          .el-image {
+            width: 50px;
+            height: 50px;
+            border-radius: 8px;
+          }
+        }
+      }
+
+      &::before {
+        height: 0;
+      }
+
+      .el-table__fixed-right {
+        height: 100% !important;
+        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
+      }
+
+      .el-table__fixed {
+        height: 100% !important;
+        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
+      }
+    }
+
+    .el-pagination {
+      padding: 2px 5px;
+      margin: 20px 0 0 0;
+      font-weight: normal;
+      color: $base-color-black;
+      text-align: center;
+    }
+
+    .el-menu.el-menu--popup.el-menu--popup-right-start {
+      @include scrollbar;
+      border-radius: 6px;
+      border: none;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    .el-menu.el-menu--popup.el-menu--popup-bottom-start {
+      @include scrollbar;
+      border-radius: 6px;
+      border: none;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    .el-submenu__title i {
+      color: $base-color-white;
+    }
+
+    .el-dialog,
+    .el-message-box {
+      border-radius: 10px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+
+      &__body {
+        border-top: 1px solid $base-border-color;
+
+        .el-form {
+          padding-right: 30px;
+        }
+      }
+
+      &__footer {
+        padding: $base-padding;
+        text-align: right;
+        border-top: 1px solid $base-border-color;
+      }
+
+      &__content {
+        padding: 20px 20px 20px 20px;
+      }
+    }
+
+    .el-card {
+      margin-bottom: 16px;
+      border-radius: 12px;
+      border: none;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+      transition: all 0.3s ease;
+
+      &:hover {
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
+        transform: translateY(-2px);
+      }
+
+      &__body {
+        padding: $base-padding;
+      }
+    }
+
+    /* VabPageHeader 全局样式 - 高优先级 */
+    .page-header {
+      background: linear-gradient(135deg, #518df1 0%, #667eea 100%) !important;
+      border-radius: 16px !important;
+      padding: 32px !important;
+      margin-bottom: 24px !important;
+      color: white !important;
+      box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3) !important;
+      border: none !important;
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        right: -50%;
+        bottom: -50%;
+        left: -50%;
+        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+        transform: rotate(30deg);
+      }
+
+      .header-content {
+        position: relative;
+        display: flex !important;
+        justify-content: space-between !important;
+        align-items: center !important;
+
+        .header-left {
+          .page-title {
+            font-size: 2.2rem !important;
+            font-weight: 700 !important;
+            margin: 0 0 10px 0 !important;
+            display: flex !important;
+            align-items: center !important;
+            gap: 14px !important;
+            color: white !important;
+
+            .vab-icon {
+              font-size: 2rem !important;
+              color: white !important;
+              background: rgba(255, 255, 255, 0.2);
+              border-radius: 12px;
+              padding: 8px;
+            }
+          }
+
+          .page-description {
+            font-size: 1.1rem !important;
+            opacity: 0.95 !important;
+            margin: 0 !important;
+            color: white !important;
+            font-weight: 300;
+          }
+        }
+
+        .header-right {
+          display: flex !important;
+          align-items: center !important;
+          gap: 10px !important;
+          font-size: 1.2rem !important;
+          font-weight: 500 !important;
+          color: white !important;
+          background: rgba(255, 255, 255, 0.2);
+          padding: 12px 20px;
+          border-radius: 12px;
+          backdrop-filter: blur(10px);
+
+          .vab-icon {
+            font-size: 1.4rem !important;
+            color: white !important;
+          }
+        }
+      }
+    }
+
+    /* 响应式设计 */
+    @media (max-width: 768px) {
+      .page-header {
+        padding: 22px !important;
+        border-radius: 12px !important;
+
+        .header-content {
+          flex-direction: column !important;
+          gap: 18px !important;
+          text-align: center !important;
+
+          .header-left {
+            .page-title {
+              font-size: 1.7rem !important;
+            }
+          }
+
+          .header-right {
+            width: 100%;
+            justify-content: center;
+          }
+        }
+      }
+    }
+
+    .select-tree-popper {
+      .el-scrollbar {
+        .el-scrollbar__view {
+          .el-select-dropdown__item {
+            height: auto;
+            max-height: 274px;
+            padding: 0;
+            overflow-y: auto;
+            line-height: 26px;
+          }
+        }
+      }
+    }
+
+    /* 扩展 el-divider 样式 */
+    .el-divider {
+      position: relative;
+      border: none;
+      background: linear-gradient(90deg, transparent, #e4e7ed, transparent);
+
+      &--horizontal {
+        height: 1px;
+        margin: 24px 0 32px 0;
+
+        .el-divider__text {
+          position: relative;
+          padding: 0 18px;
+          font-size: 14px;
+          font-weight: 500;
+          color: #606266;
+          background: #fff;
+          border-radius: 6px;
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: -8px;
+            width: 4px;
+            height: 4px;
+            margin-top: -2px;
+            background: #409eff;
+            border-radius: 50%;
+          }
+        }
+      }
+
+      &--vertical {
+        width: 1px;
+        height: 1em;
+        margin: 0 16px;
+        background: #e4e7ed;
+      }
+
+      /* 主题变体 */
+      &--primary {
+        background: linear-gradient(90deg, transparent, #409eff, transparent);
+
+        .el-divider__text {
+          color: #409eff;
+
+          &::before {
+            background: #409eff;
+          }
+        }
+      }
+
+      &--success {
+        background: linear-gradient(90deg, transparent, #67c23a, transparent);
+
+        .el-divider__text {
+          color: #67c23a;
+
+          &::before {
+            background: #67c23a;
+          }
+        }
+      }
+
+      &--warning {
+        background: linear-gradient(90deg, transparent, #e6a23c, transparent);
+
+        .el-divider__text {
+          color: #e6a23c;
+
+          &::before {
+            background: #e6a23c;
+          }
+        }
+      }
+
+      &--danger {
+        background: linear-gradient(90deg, transparent, #f56c6c, transparent);
+
+        .el-divider__text {
+          color: #f56c6c;
+
+          &::before {
+            background: #f56c6c;
+          }
+        }
+      }
+
+      /* 虚线样式 */
+      &--dashed {
+        background: none;
+        border-top: 1px dashed #e4e7ed;
+
+        .el-divider__text {
+          background: #fff;
+        }
+      }
+
+      /* 粗线样式 */
+      &--thick {
+        height: 2px;
+        background: linear-gradient(90deg, transparent, #409eff, transparent);
+      }
+    }
+  }
+
+  .side-container {
+    .el-menu-item,
+    .el-submenu {
+      margin: 7px !important;
+      border-radius: 5px !important;
+      transition: all 0.3s ease;
+
+      &:hover {
+        border-radius: 5px !important;
+      }
+
+      &.is-active {
+        background: linear-gradient(90deg, $base-color-default, lighten($base-color-default, 10%)) !important;
+      }
+    }
+  }
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..e32034c
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,70 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 全局主题变量配置
+ */
+/* stylelint-disable */
+@charset "utf-8";
+//框架默认主题色
+$base-color-default: #4d8af0;
+//默认层级
+$base-z-index: 1000;
+//横向布局纵向布局时菜单背景色
+$base-menu-background: #191a23;
+//菜单文字颜色
+$base-menu-color: hsla(0, 0%, 100%, 0.95);
+//菜单选中文字颜色
+$base-menu-color-active: hsla(0, 0%, 100%, 0.95);
+//菜单选中背景色
+$base-menu-background-active: $base-color-default;
+//标题颜色
+$base-title-color: #fff;
+//字体大小配置
+$base-font-size-small: 12px;
+$base-font-size-default: 14px;
+$base-font-size-big: 16px;
+$base-font-size-bigger: 18px;
+$base-font-size-max: 22px;
+$base-font-color: #606266;
+$base-color-blue: $base-color-default;
+$base-color-green: #52c41a;
+$base-color-white: #fff;
+$base-color-black: #000;
+$base-color-yellow: #faad14;
+$base-color-orange: #fa8c16;
+$base-color-red: #f5222d;
+$base-color-gray: rgba(0, 0, 0, 0.65);
+$base-main-width: 1279px;
+$base-border-radius: 6px;
+$base-border-color: #ebeef5;
+//输入框高度
+$base-input-height: 36px;
+//默认paddiing
+$base-padding: 22px;
+//默认阴影
+$base-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+//横向布局时top-bar、logo、一级菜单的高度
+$base-top-bar-height: 64px;
+//纵向布局时logo的高度
+$base-logo-height: 70px;
+//顶部nav-bar的高度
+$base-nav-bar-height: 60px;
+//顶部多标签页tabs-bar的高度
+$base-tabs-bar-height: 50px;
+//顶部多标签页tabs-bar中每一个item的高度
+$base-tag-item-height: 32px;
+//菜单li标签的高度
+$base-menu-item-height: 50px;
+//app-main的高度
+$base-app-main-height: calc(100vh - #{$base-nav-bar-height} - #{$base-tabs-bar-height} - #{$base-padding} - #{$base-padding} - 55px - 55px);
+//纵向布局时左侧导航未折叠时的宽度
+$base-left-menu-width: 240px;
+//纵向布局时左侧导航未折叠时右侧内容的宽度
+$base-right-content-width: calc(100% - #{$base-left-menu-width});
+//纵向布局时左侧导航已折叠时的宽度
+$base-left-menu-width-min: 64px;
+//纵向布局时左侧导航已折叠时右侧内容的宽度
+$base-right-content-width-min: calc(100% - #{$base-left-menu-width-min});
+//默认动画
+$base-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s, background 0s, color 0s, font-size 0s;
+//默认动画长
+$base-transition-time: 0.3s;
\ No newline at end of file
diff --git a/src/utils/accessToken.js b/src/utils/accessToken.js
new file mode 100644
index 0000000..548ebb6
--- /dev/null
+++ b/src/utils/accessToken.js
@@ -0,0 +1,59 @@
+import { storage, tokenTableName } from '@/config'
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 获取accessToken
+ * @returns {string|ActiveX.IXMLDOMNode|Promise<any>|any|IDBRequest<any>|MediaKeyStatus|FormDataEntryValue|Function|Promise<Credential | null>}
+ */
+export function getAccessToken() {
+  if (storage) {
+    if ('localStorage' === storage) {
+      return localStorage.getItem(tokenTableName)
+    } else if ('sessionStorage' === storage) {
+      return sessionStorage.getItem(tokenTableName)
+    } else {
+      return localStorage.getItem(tokenTableName)
+    }
+  } else {
+    return localStorage.getItem(tokenTableName)
+  }
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 存储accessToken
+ * @param accessToken
+ * @returns {void|*}
+ */
+export function setAccessToken(accessToken) {
+  if (storage) {
+    if ('localStorage' === storage) {
+      return localStorage.setItem(tokenTableName, accessToken)
+    } else if ('sessionStorage' === storage) {
+      return sessionStorage.setItem(tokenTableName, accessToken)
+    } else {
+      return localStorage.setItem(tokenTableName, accessToken)
+    }
+  } else {
+    return localStorage.setItem(tokenTableName, accessToken)
+  }
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 移除accessToken
+ * @returns {void|Promise<void>}
+ */
+export function removeAccessToken() {
+  if (storage) {
+    if ('localStorage' === storage) {
+      return localStorage.removeItem(tokenTableName)
+    } else if ('sessionStorage' === storage) {
+      return sessionStorage.clear()
+    } else {
+      return localStorage.removeItem(tokenTableName)
+    }
+  } else {
+    return localStorage.removeItem(tokenTableName)
+  }
+}
diff --git a/src/utils/clipboard.js b/src/utils/clipboard.js
new file mode 100644
index 0000000..4c86324
--- /dev/null
+++ b/src/utils/clipboard.js
@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import Clipboard from 'clipboard'
+
+function clipboardSuccess() {
+  Vue.prototype.$baseMessage('复制成功', 'success')
+}
+
+function clipboardError() {
+  Vue.prototype.$baseMessage('复制失败', 'error')
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 复制数据
+ * @param text
+ * @param event
+ */
+export default function handleClipboard(text, event) {
+  const clipboard = new Clipboard(event.target, {
+    text: () => text,
+  })
+  clipboard.on('success', () => {
+    clipboardSuccess()
+    clipboard.destroy()
+  })
+  clipboard.on('error', () => {
+    clipboardError()
+    clipboard.destroy()
+  })
+  clipboard.onClick(event)
+}
diff --git a/src/utils/encrypt.js b/src/utils/encrypt.js
new file mode 100644
index 0000000..7e61b1e
--- /dev/null
+++ b/src/utils/encrypt.js
@@ -0,0 +1,42 @@
+import JSEncrypt from 'jsencrypt'
+import { getPublicKey } from '@/api/publicKey'
+
+const privateKey =
+  'MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAMFPa+v52FkSUXvcUnrGI/XzW3EpZRI0s9BCWJ3oNQmEYA5luWW5p8h0uadTIoTyYweFPdH4hveyxlwmS7oefvbIdiP+o+QIYW/R4Wjsb4Yl8MhR4PJqUE3RCy6IT9fM8ckG4kN9ECs6Ja8fQFc6/mSl5dJczzJO3k1rWMBhKJD/AgMBAAECgYEAucMakH9dWeryhrYoRHcXo4giPVJsH9ypVt4KzmOQY/7jV7KFQK3x//27UoHfUCak51sxFw9ek7UmTPM4HjikA9LkYeE7S381b4QRvFuf3L6IbMP3ywJnJ8pPr2l5SqQ00W+oKv+w/VmEsyUHr+k4Z+4ik+FheTkVWp566WbqFsECQQDjYaMcaKw3j2Zecl8T6eUe7fdaRMIzp/gcpPMfT/9rDzIQk+7ORvm1NI9AUmFv/FAlfpuAMrdL2n7p9uznWb7RAkEA2aP934kbXg5bdV0R313MrL+7WTK/qdcYxATUbMsMuWWQBoS5irrt80WCZbG48hpocJavLNjbtrjmUX3CuJBmzwJAOJg8uP10n/+ZQzjEYXh+BszEHDuw+pp8LuT/fnOy5zrJA0dO0RjpXijO3vuiNPVgHXT9z1LQPJkNrb5ACPVVgQJBALPeb4uV0bNrJDUb5RB4ghZnIxv18CcaqNIft7vuGCcFBAIPIRTBprR+RuVq+xHDt3sNXdsvom4h49+Hky1b0ksCQBBwUtVaqH6ztCtwUF1j2c/Zcrt5P/uN7IHAd44K0gIJc1+Csr3qPG+G2yoqRM8KVqLI8Z2ZYn9c+AvEE+L9OQY='
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description RSA加密
+ * @param data
+ * @returns {Promise<{param: PromiseLike<ArrayBuffer>}|*>}
+ */
+export async function encryptedData(data) {
+  let publicKey = ''
+  const res = await getPublicKey()
+  publicKey = res.data.publicKey
+  if (res.data.mockServer) {
+    publicKey = ''
+  }
+  if (publicKey == '') {
+    return data
+  }
+  const encrypt = new JSEncrypt()
+  encrypt.setPublicKey(`-----BEGIN PUBLIC KEY-----${publicKey}-----END PUBLIC KEY-----`)
+  data = encrypt.encrypt(JSON.stringify(data))
+  return {
+    param: data,
+  }
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description RSA解密
+ * @param data
+ * @returns {PromiseLike<ArrayBuffer>}
+ */
+export function decryptedData(data) {
+  const decrypt = new JSEncrypt()
+  decrypt.setPrivateKey(`-----BEGIN RSA PRIVATE KEY-----${privateKey}-----END RSA PRIVATE KEY-----`)
+  data = decrypt.decrypt(JSON.stringify(data))
+  return data
+}
diff --git a/src/utils/errorLog.js b/src/utils/errorLog.js
new file mode 100644
index 0000000..751a6fd
--- /dev/null
+++ b/src/utils/errorLog.js
@@ -0,0 +1,52 @@
+import Vue from 'vue'
+import store from '@/store'
+import { isArray, isString } from '@/utils/validate'
+import { errorLog } from '@/config'
+
+const needErrorLog = errorLog
+const checkNeed = () => {
+  const env = process.env.NODE_ENV
+  if (isString(needErrorLog)) {
+    return env === needErrorLog
+  }
+  if (isArray(needErrorLog)) {
+    return needErrorLog.includes(env)
+  }
+  return false
+}
+
+// 检查是否是Chrome扩展相关错误
+const isChromeExtensionError = (err) => {
+  if (!err) return false
+
+  // 错误消息是字符串
+  if (typeof err.message === 'string') {
+    return (
+      err.message.includes('runtime.lastError') ||
+      err.message.includes('message port closed') ||
+      err.message.includes('The message port closed')
+    )
+  }
+
+  // 错误本身是字符串
+  if (typeof err === 'string') {
+    return err.includes('runtime.lastError') || err.includes('message port closed') || err.includes('The message port closed')
+  }
+
+  return false
+}
+
+if (checkNeed()) {
+  Vue.config.errorHandler = (err, vm, info) => {
+    // 过滤Chrome扩展相关错误
+    if (isChromeExtensionError(err)) {
+      return
+    }
+
+    console.error('vue-admin-better错误拦截:', err, vm, info)
+    const url = window.location.href
+    Vue.nextTick(() => {
+      store.dispatch('errorLog/addErrorLog', { err, vm, info, url })
+    })
+  }
+}
diff --git a/src/utils/handleRoutes.js b/src/utils/handleRoutes.js
new file mode 100644
index 0000000..3c37560
--- /dev/null
+++ b/src/utils/handleRoutes.js
@@ -0,0 +1,110 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description all模式渲染后端返回路由
+ * @param constantRoutes
+ * @returns {*}
+ */
+
+// import { pcaData } from "@/utils/rouList";
+
+// console.log(pcaData,'--=')
+
+
+export function convertRouter(asyncRoutes) {
+  console.log(asyncRoutes,'--=11?')
+  // 处理空值情况
+  if (!asyncRoutes || !Array.isArray(asyncRoutes)) {
+    console.warn('后端返回的路由格式不正确或为空')
+    return []
+  }
+
+  return asyncRoutes
+    .map((route) => {
+      if (!route) return null
+
+      if (route.component) {
+        if (route.component === 'Layout') {
+          route.component = () => import('@/layouts')
+        } else if (route.component === 'EmptyLayout') {
+          route.component = () => import('@/layouts/EmptyLayout')
+        } else {
+          try {
+            const index = route.component.indexOf('views')
+            const path = index > 0 ? route.component.slice(index) : `views/${route.component}`
+            route.component = () =>
+              import(`@/${path}`).catch((err) => {
+                console.error(`路由组件加载失败: @/${path}`, err)
+                return import('@/views/404')
+              })
+          } catch (err) {
+            console.error(`路由组件解析失败: ${route.component}`, err)
+            route.component = () => import('@/views/404')
+          }
+        }
+      }
+
+      if (route.children) {
+        if (Array.isArray(route.children) && route.children.length) {
+          route.children = convertRouter(route.children)
+          // 过滤掉空路由
+          route.children = route.children.filter((child) => child !== null)
+        }
+        if (!route.children || route.children.length === 0) delete route.children
+      }
+
+      return route
+    })
+    .filter((route) => route !== null) // 过滤掉无效路由
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 判断当前路由是否包含权限
+ * @param permissions
+ * @param route
+ * @returns {boolean|*}
+ */
+function hasPermission(permissions, route) {
+  // 确保permissions是数组
+  if (!permissions || !Array.isArray(permissions)) {
+    return false
+  }
+
+  if (route.meta && route.meta.permissions) {
+    return permissions.some((role) => route.meta.permissions.includes(role))
+  } else {
+    return true
+  }
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description intelligence模式根据permissions数组拦截路由
+ * @param routes
+ * @param permissions
+ * @returns {[]}
+ */
+export function filterAsyncRoutes(routes, permissions) {
+  // 处理无效参数
+  if (!routes || !Array.isArray(routes)) {
+    return []
+  }
+
+  if (!permissions || !Array.isArray(permissions)) {
+    return []
+  }
+
+  const finallyRoutes = []
+  routes.forEach((route) => {
+    if (!route) return
+
+    const item = { ...route }
+    if (hasPermission(permissions, item)) {
+      if (item.children && Array.isArray(item.children)) {
+        item.children = filterAsyncRoutes(item.children, permissions)
+      }
+      finallyRoutes.push(item)
+    }
+  })
+  return finallyRoutes
+}
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 0000000..3d826f7
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,242 @@
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 格式化时间
+ * @param time
+ * @param cFormat
+ * @returns {string|null}
+ */
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
+      time = parseInt(time)
+    }
+    if (typeof time === 'number' && time.toString().length === 10) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay(),
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
+    if (result.length > 0 && value < 10) {
+      value = `0${value}`
+    }
+    return value || 0
+  })
+  return time_str
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 格式化时间
+ * @param time
+ * @param option
+ * @returns {string}
+ */
+export function formatTime(time, option) {
+  if (`${time}`.length === 10) {
+    time = parseInt(time) * 1000
+  } else {
+    time = +time
+  }
+  const d = new Date(time)
+  const now = Date.now()
+
+  const diff = (now - d) / 1000
+
+  if (diff < 30) {
+    return '刚刚'
+  } else if (diff < 3600) {
+    // less 1 hour
+    return `${Math.ceil(diff / 60)}分钟前`
+  } else if (diff < 3600 * 24) {
+    return `${Math.ceil(diff / 3600)}小时前`
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前'
+  }
+  if (option) {
+    return parseTime(time, option)
+  } else {
+    return `${d.getMonth() + 1}月${d.getDate()}日${d.getHours()}时${d.getMinutes()}分`
+  }
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 将url请求参数转为json格式
+ * @param url
+ * @returns {{}|any}
+ */
+export function paramObj(url) {
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse(`{"${decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"').replace(/\+/g, ' ')}"}`)
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 父子关系的数组转换成树形结构数据
+ * @param data
+ * @returns {*}
+ */
+export function translateDataToTree(data) {
+  const parent = data.filter((value) => value.parentId === 'undefined' || value.parentId == null)
+  const children = data.filter((value) => value.parentId !== 'undefined' && value.parentId != null)
+  const translator = (parent, children) => {
+    parent.forEach((parent) => {
+      children.forEach((current, index) => {
+        if (current.parentId === parent.id) {
+          const temp = JSON.parse(JSON.stringify(children))
+          temp.splice(index, 1)
+          translator([current], temp)
+          typeof parent.children !== 'undefined' ? parent.children.push(current) : (parent.children = [current])
+        }
+      })
+    })
+  }
+  translator(parent, children)
+  return parent
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 树形结构数据转换成父子关系的数组
+ * @param data
+ * @returns {[]}
+ */
+export function translateTreeToData(data) {
+  const result = []
+  data.forEach((item) => {
+    const loop = (data) => {
+      result.push({
+        id: data.id,
+        name: data.name,
+        parentId: data.parentId,
+      })
+      const child = data.children
+      if (child) {
+        for (let i = 0; i < child.length; i++) {
+          loop(child[i])
+        }
+      }
+    }
+    loop(item)
+  })
+  return result
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 10位时间戳转换
+ * @param time
+ * @returns {string}
+ */
+export function tenBitTimestamp(time) {
+  const date = new Date(time * 1000)
+  const y = date.getFullYear()
+  let m = date.getMonth() + 1
+  m = m < 10 ? `${m}` : m
+  let d = date.getDate()
+  d = d < 10 ? `${d}` : d
+  let h = date.getHours()
+  h = h < 10 ? `0${h}` : h
+  let minute = date.getMinutes()
+  let second = date.getSeconds()
+  minute = minute < 10 ? `0${minute}` : minute
+  second = second < 10 ? `0${second}` : second
+  return `${y}年${m}月${d}日 ${h}:${minute}:${second}` //组合
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 13位时间戳转换
+ * @param time
+ * @returns {string}
+ */
+export function thirteenBitTimestamp(time) {
+  const date = new Date(time / 1)
+  const y = date.getFullYear()
+  let m = date.getMonth() + 1
+  m = m < 10 ? `${m}` : m
+  let d = date.getDate()
+  d = d < 10 ? `${d}` : d
+  let h = date.getHours()
+  h = h < 10 ? `0${h}` : h
+  let minute = date.getMinutes()
+  let second = date.getSeconds()
+  minute = minute < 10 ? `0${minute}` : minute
+  second = second < 10 ? `0${second}` : second
+  return `${y}年${m}月${d}日 ${h}:${minute}:${second}` //组合
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 获取随机id
+ * @param length
+ * @returns {string}
+ */
+export function uuid(length = 32) {
+  const num = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'
+  let str = ''
+  for (let i = 0; i < length; i++) {
+    str += num.charAt(Math.floor(Math.random() * num.length))
+  }
+  return str
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description m到n的随机数
+ * @param m
+ * @param n
+ * @returns {number}
+ */
+export function random(m, n) {
+  return Math.floor(Math.random() * (m - n) + n)
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description addEventListener
+ * @type {function(...[*]=)}
+ */
+export const on = (function () {
+  return function (element, event, handler, useCapture = false) {
+    if (element && event && handler) {
+      element.addEventListener(event, handler, useCapture)
+    }
+  }
+})()
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description removeEventListener
+ * @type {function(...[*]=)}
+ */
+export const off = (function () {
+  return function (element, event, handler, useCapture = false) {
+    if (element && event) {
+      element.removeEventListener(event, handler, useCapture)
+    }
+  }
+})()
diff --git a/src/utils/pageTitle.js b/src/utils/pageTitle.js
new file mode 100644
index 0000000..3fb78c1
--- /dev/null
+++ b/src/utils/pageTitle.js
@@ -0,0 +1,12 @@
+import { title } from '@/config'
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 设置标题
+ * @param pageTitle
+ * @returns {string}
+ */
+export default function getPageTitle(pageTitle) {
+  if (pageTitle) return `${pageTitle}-${title}`
+  return `${title}`
+}
diff --git a/src/utils/permission.js b/src/utils/permission.js
new file mode 100644
index 0000000..04fae07
--- /dev/null
+++ b/src/utils/permission.js
@@ -0,0 +1,20 @@
+import store from '@/store'
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 检查权限
+ * @param value
+ * @returns {boolean}
+ */
+export default function checkPermission(value) {
+  if (value && value instanceof Array && value.length > 0) {
+    const permissions = store.getters['user/permissions']
+    const permissionPermissions = value
+
+    return permissions.some((role) => {
+      return permissionPermissions.includes(role)
+    })
+  } else {
+    return false
+  }
+}
diff --git a/src/utils/printInfo.js b/src/utils/printInfo.js
new file mode 100644
index 0000000..22efb09
--- /dev/null
+++ b/src/utils/printInfo.js
@@ -0,0 +1,9 @@
+/**
+ * @description 只在控制台打印layouts/index.js中的内容
+ */
+import { donationConsole } from 'layouts'
+
+export function printLayoutsInfo() {
+  // 只在控制台打印
+  donationConsole()
+}
diff --git a/src/utils/request.js b/src/utils/request.js
new file mode 100644
index 0000000..be88b02
--- /dev/null
+++ b/src/utils/request.js
@@ -0,0 +1,175 @@
+import Vue from 'vue'
+import axios from 'axios'
+import {
+  baseURL,
+  contentType,
+  debounce,
+  invalidCode,
+  loginInterception,
+  noPermissionCode,
+  requestTimeout,
+  successCode,
+  tokenName,
+} from '@/config'
+import store from '@/store'
+import qs from 'qs'
+import router from '@/router'
+import { isArray } from '@/utils/validate'
+
+let loadingInstance
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 处理code异常
+ * @param {*} code
+ * @param {*} msg
+ */
+const handleCode = (code, msg) => {
+  switch (code) {
+    case invalidCode:
+      Vue.prototype.$baseMessage(msg || `后端接口${code}异常`, 'error')
+      store.dispatch('user/resetAccessToken').catch(() => {})
+      if (loginInterception) {
+        location.reload()
+      }
+      break
+    case noPermissionCode:
+      router.push({ path: '/401' }).catch(() => {})
+      break
+    default:
+      Vue.prototype.$baseMessage(msg || `后端接口${code}异常`, 'error')
+      break
+  }
+}
+
+// 请求重试配置
+const retryConfig = {
+  retry: 3, // 重试次数
+  retryDelay: 1000, // 重试间隔时间
+}
+
+// 创建axios实例
+const instance = axios.create({
+  baseURL,
+  timeout: requestTimeout,
+  headers: {
+    'Content-Type': contentType,
+  },
+})
+
+// 请求重试方法
+instance.defaults.retry = retryConfig.retry
+instance.defaults.retryDelay = retryConfig.retryDelay
+
+// 请求拦截器
+instance.interceptors.request.use(
+  (config) => {
+    if (store.getters['user/accessToken']) {
+      config.headers[tokenName] = store.getters['user/accessToken']
+    }
+    //这里会过滤所有为空、0、false的key，如果不需要请自行注释
+    if (config.data) config.data = Vue.prototype.$baseLodash.pickBy(config.data, Vue.prototype.$baseLodash.identity)
+    if (config.data && config.headers['Content-Type'] === 'application/x-www-form-urlencoded;charset=UTF-8')
+      config.data = qs.stringify(config.data)
+    if (debounce.some((item) => config.url.includes(item))) loadingInstance = Vue.prototype.$baseLoading()
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+instance.interceptors.response.use(
+  (response) => {
+    if (loadingInstance) loadingInstance.close()
+
+    const { data, config } = response
+
+    // 判断data是否为undefined或null
+    if (data === undefined || data === null) {
+      Vue.prototype.$baseMessage('后端接口返回数据为空', 'error')
+      return Promise.reject('后端接口返回数据为空')
+    }
+
+    // 安全地解构code和msg，避免undefined异常
+    const code = data.code !== undefined ? data.code : null
+    const msg = data.msg !== undefined ? data.msg : '未知错误'
+
+    // 操作正常Code数组
+    const codeVerificationArray = isArray(successCode) ? [...successCode] : [...[successCode]]
+
+    // 是否操作正常
+    if (code !== null && codeVerificationArray.includes(code)) {
+      return data
+    } else {
+      handleCode(code, msg)
+      return Promise.reject(
+        `vue-admin-better请求异常拦截:${JSON.stringify({
+          url: config.url,
+          code,
+          msg,
+        })}` || 'Error'
+      )
+    }
+  },
+  (error) => {
+    if (loadingInstance) loadingInstance.close()
+
+    // 处理请求重试
+    const { config } = error
+    if (config && config.retry) {
+      // 设置当前重试次数
+      config.__retryCount = config.__retryCount || 0
+
+      // 检查是否可以重试
+      if (config.__retryCount < config.retry) {
+        // 增加重试次数
+        config.__retryCount += 1
+
+        // 创建新的Promise进行重试
+        const backoff = new Promise((resolve) => {
+          setTimeout(() => {
+            console.log(`重试请求: ${config.url}, 尝试次数: ${config.__retryCount}`)
+            resolve()
+          }, config.retryDelay || 1000)
+        })
+
+        // 重新发起请求
+        return backoff.then(() => instance(config))
+      }
+    }
+
+    // 处理undefined或无法解析的错误情况
+    if (!error) {
+      Vue.prototype.$baseMessage('发生未知错误', 'error')
+      return Promise.reject('发生未知错误')
+    }
+
+    const { response, message } = error
+    if (response && response.data) {
+      
+      const { status, data } = response
+      handleCode(status, data.msg || message || '未知错误')
+      return Promise.reject(error)
+    } else {
+      let errorMsg = '后端接口未知异常'
+
+      if (message) {
+        if (message === 'Network Error') {
+          errorMsg = '后端接口连接异常'
+        } else if (message.includes('timeout')) {
+          errorMsg = '后端接口请求超时'
+        } else if (message.includes('Request failed with status code')) {
+          const code = message.substr(message.length - 3)
+          errorMsg = `后端接口${code}异常`
+        }
+      }
+
+      Vue.prototype.$baseMessage(errorMsg, 'error')
+      return Promise.reject(error)
+    }
+  }
+)
+
+export default instance
diff --git a/src/utils/rouList.js b/src/utils/rouList.js
new file mode 100644
index 0000000..bb665f6
--- /dev/null
+++ b/src/utils/rouList.js
@@ -0,0 +1,62 @@
+export const pcaData = {
+  "code": 0,
+  "message": "success",
+  "data": [
+    {
+      "path": "/mall",
+       "name": "Mall",
+      "component": "Layout",
+      "meta": {
+        "title": "预约数据",
+        "icon": "book",
+        "permissions": ['admin'],
+      },
+      "children": [
+        {
+          "path": "pay",
+           "name": "Pay",
+          "component": "@/views/mall/pay/index",
+          "meta": {
+            "title": "订单管理",
+          }
+        },
+        {
+       "path":'goodsList',
+        "name":'GoodsList',
+        "component":'@/views/mall/goodsList/index',
+        "meta": {
+         "title":'钱包管理',
+        },
+      }, 
+      ]
+    },
+    {
+      "path": "/coupon",
+       "name": "Coupon",
+      "component": "Layout",
+      "meta": {
+        "title": "券管理",
+        "icon": "cog",
+        "permissions":['admin'],
+      },
+      "children": [
+        {
+          "path": "couponlist",
+             "name": "Couponlist",
+          "component": "@/views/Coupon/couponlist/index",
+          "meta": {
+            "title": "券包"
+          }
+        },
+        {
+          "path": "distribution",
+            "name": "distribution",
+          "component": "@/views/Coupon/distribution/index",
+          "meta": {
+            "title": "优惠券"
+          }
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/utils/static.js b/src/utils/static.js
new file mode 100644
index 0000000..c646f9b
--- /dev/null
+++ b/src/utils/static.js
@@ -0,0 +1,81 @@
+/**
+ * @author https://vuejs-core.cn
+ * @description 导入所有 controller 模块，浏览器环境中自动输出controller文件夹下Mock接口，请勿修改。
+ */
+import Mock from 'mockjs'
+import { paramObj } from '@/utils'
+
+const mocks = []
+// 使用兼容 rspack 的方式导入 mock 控制器
+const files = require.context('../../mock/controller', false, /\.js$/)
+
+files.keys().forEach((key) => {
+  mocks.push(...files(key))
+})
+
+export function mockXHR() {
+  // 设置Mock响应延迟
+  Mock.setup({
+    timeout: '200-600',
+  })
+
+  // 保存原始的XHR send方法
+  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
+  Mock.XHR.prototype.send = function () {
+    if (this.custom.xhr) {
+      this.custom.xhr.withCredentials = this.withCredentials || false
+
+      if (this.responseType) {
+        this.custom.xhr.responseType = this.responseType
+      }
+    }
+    this.proxy_send(...arguments)
+  }
+
+  function XHRHttpRequst(respond) {
+    return function (options) {
+      let result
+      try {
+        if (respond instanceof Function) {
+          const { body, type, url } = options
+          // 安全解析body
+          let parsedBody = {}
+          if (body) {
+            try {
+              parsedBody = JSON.parse(body)
+            } catch (e) {
+              console.warn('无法解析请求体:', e)
+            }
+          }
+
+          result = respond({
+            method: type,
+            body: parsedBody,
+            query: paramObj(url),
+          })
+        } else {
+          result = respond
+        }
+      } catch (error) {
+        console.error('Mock处理请求时发生错误:', error)
+        // 返回默认错误响应
+        result = {
+          code: 500,
+          message: '服务器内部错误',
+        }
+      }
+      return Mock.mock(result)
+    }
+  }
+
+  // 注册所有的mock服务
+  mocks.forEach((item) => {
+    Mock.mock(new RegExp(item.url), item.type || 'get' || 'post' , XHRHttpRequst(item.response))
+  })
+
+  // 记录mock设置完成
+  console.info(`[Mock] 成功设置 ${mocks.length} 个模拟接口`)
+}
+
+// 导出mocks列表，便于调试
+export const mockList = mocks
diff --git a/src/utils/vab.js b/src/utils/vab.js
new file mode 100644
index 0000000..cbbd4da
--- /dev/null
+++ b/src/utils/vab.js
@@ -0,0 +1,156 @@
+import { loadingText, messageDuration, title } from '@/config'
+import * as lodash from 'lodash'
+import { Loading, Message, MessageBox, Notification } from 'element-ui'
+import store from '@/store'
+import { getAccessToken } from '@/utils/accessToken'
+
+const accessToken = store.getters['user/accessToken']
+const layout = store.getters['settings/layout']
+
+const install = (Vue) => {
+  /* 全局accessToken */
+  Vue.prototype.$baseAccessToken = () => {
+    return accessToken || getAccessToken()
+  }
+  /* 全局标题 */
+  Vue.prototype.$baseTitle = (() => {
+    return title
+  })()
+  /* 全局加载层 */
+  Vue.prototype.$baseLoading = (index, text) => {
+    let loading
+    if (!index) {
+      loading = Loading.service({
+        lock: true,
+        text: text || loadingText,
+        background: 'hsla(0,0%,100%,.8)',
+      })
+    } else {
+      loading = Loading.service({
+        lock: true,
+        text: text || loadingText,
+        spinner: `vab-loading-type${index}`,
+        background: 'hsla(0,0%,100%,.8)',
+      })
+    }
+    return loading
+  }
+  /* 全局多彩加载层 */
+  Vue.prototype.$baseColorfullLoading = (index, text) => {
+    let loading
+    if (!index) {
+      loading = Loading.service({
+        lock: true,
+        text: text || loadingText,
+        spinner: 'dots-loader',
+        background: 'hsla(0,0%,100%,.8)',
+      })
+    } else {
+      switch (index) {
+        case 1:
+          index = 'dots'
+          break
+        case 2:
+          index = 'gauge'
+          break
+        case 3:
+          index = 'inner-circles'
+          break
+        case 4:
+          index = 'plus'
+          break
+      }
+      loading = Loading.service({
+        lock: true,
+        text: text || loadingText,
+        spinner: `${index}-loader`,
+        background: 'hsla(0,0%,100%,.8)',
+      })
+    }
+    return loading
+  }
+  /* 全局Message */
+  Vue.prototype.$baseMessage = (message, type) => {
+    Message({
+      offset: 60,
+      showClose: true,
+      message: message,
+      type: type,
+      dangerouslyUseHTMLString: true,
+      duration: messageDuration,
+    })
+  }
+
+  /* 全局Alert */
+  Vue.prototype.$baseAlert = (content, title, callback) => {
+    MessageBox.alert(content, title || '温馨提示', {
+      confirmButtonText: '确定',
+      dangerouslyUseHTMLString: true,
+      callback: () => {
+        if (callback) {
+          callback()
+        }
+      },
+    })
+  }
+
+  /* 全局Confirm */
+  Vue.prototype.$baseConfirm = (content, title, callback1, callback2) => {
+    MessageBox.confirm(content, title || '温馨提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      closeOnClickModal: false,
+      type: 'warning',
+    })
+      .then(() => {
+        if (callback1) {
+          callback1()
+        }
+      })
+      .catch(() => {
+        if (callback2) {
+          callback2()
+        }
+      })
+  }
+
+  /* 全局Notification */
+  Vue.prototype.$baseNotify = (message, title, type, position) => {
+    Notification({
+      title: title,
+      message: message,
+      position: position || 'top-right',
+      type: type || 'success',
+      duration: messageDuration,
+    })
+  }
+
+  /* 全局TableHeight */
+  Vue.prototype.$baseTableHeight = (formType) => {
+    let height = window.innerHeight
+    let paddingHeight = 400
+    const formHeight = 50
+
+    if (layout === 'vertical') {
+      paddingHeight = 365
+    }
+
+    if ('number' == typeof formType) {
+      height = height - paddingHeight - formHeight * formType
+    } else {
+      height = height - paddingHeight
+    }
+    return height
+  }
+
+  /* 全局lodash */
+  Vue.prototype.$baseLodash = lodash
+  /* 全局事件总线 */
+  Vue.prototype.$baseEventBus = new Vue()
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default install
diff --git a/src/utils/validate.js b/src/utils/validate.js
new file mode 100644
index 0000000..4a6030a
--- /dev/null
+++ b/src/utils/validate.js
@@ -0,0 +1,53 @@
+/**
+ * @author zxwk1998  （不想保留author可删除）
+ * @description 判读是否为外链
+ * @param path
+ * @returns {boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @author https://github.com/zxwk1998/vue-admin-better （不想保留author可删除）
+ * @description 校验密码是否小于6位
+ * @param str
+ * @returns {boolean}
+ */
+export function isPassword(str) {
+  return str.length >= 6
+}
+
+/**
+ * @author zxwk1998  （不想保留author可删除）
+ * @description 判断是否是字符串
+ * @param str
+ * @returns {boolean}
+ */
+export function isString(str) {
+  return typeof str === 'string' || str instanceof String
+}
+
+/**
+ * @author zxwk1998  （不想保留author可删除）
+ * @description 判断是否是数组
+ * @param arg
+ * @returns {arg is any[]|boolean}
+ */
+export function isArray(arg) {
+  if (typeof Array.isArray === 'undefined') {
+    return Object.prototype.toString.call(arg) === '[object Array]'
+  }
+  return Array.isArray(arg)
+}
+
+/**
+ * @author zxwk1998  （不想保留author可删除）
+ * @description 判断是否是手机号
+ * @param str
+ * @returns {boolean}
+ */
+export function isPhone(str) {
+  const reg = /^1\d{10}$/
+  return reg.test(str)
+}
diff --git a/src/views/401.vue b/src/views/401.vue
new file mode 100644
index 0000000..496b849
--- /dev/null
+++ b/src/views/401.vue
@@ -0,0 +1,290 @@
+<template>
+  <div class="error-container">
+    <div class="error-content">
+      <el-row :gutter="20">
+        <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
+          <div class="pic-error">
+            <img alt="401" class="pic-error-parent" src="@/assets/error_images/401.png" />
+            <img alt="401" class="pic-error-child left" src="@/assets/error_images/cloud.png" />
+            <img alt="401" class="pic-error-child" src="@/assets/error_images/cloud.png" />
+            <img alt="401" class="pic-error-child" src="@/assets/error_images/cloud.png" />
+          </div>
+        </el-col>
+
+        <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
+          <div class="bullshit">
+            <div class="bullshit-oops">
+              {{ oops }}
+            </div>
+            <div class="bullshit-headline">
+              {{ headline }}
+            </div>
+            <div class="bullshit-info">
+              {{ info }}
+            </div>
+            <a class="bullshit-return-home" href="#/index">{{ jumpTime }}s&nbsp;{{ btn }}</a>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getOrderList } from '@/api/notice'
+  export default {
+    name: 'Page401',
+    data() {
+      return {
+        jumpTime: 5,
+        oops: '抱歉!',
+        headline: '您没有操作权限...',
+        info: '当前帐号没有操作权限,请联系管理员。',
+        btn: '返回',
+        timer: 0,
+      }
+    },
+    mounted() {
+    this.fetchData()
+    },
+    beforeDestroy() {
+      clearInterval(this.timer)
+    },
+    methods: {
+        async fetchData() {
+        const res = await getOrderList()
+        this.noticeList = res.data
+      },
+      
+      // timeChange() {
+      //   this.timer = setInterval(() => {
+      //     if (this.jumpTime) {
+      //       this.jumpTime--
+      //     } else {
+      //       this.$router.push({ path: '/' })
+      //       this.$store.dispatch('tabsBar/delOthersRoutes', {
+      //         path: '/',
+      //       })
+      //       clearInterval(this.timer)
+      //     }
+      //   }, 1000)
+      // },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .error-container {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    .error-content {
+      .pic-error {
+        position: relative;
+        float: left;
+        width: 120%;
+        overflow: hidden;
+
+        &-parent {
+          width: 100%;
+        }
+
+        &-child {
+          position: absolute;
+
+          &.left {
+            top: 17px;
+            left: 220px;
+            width: 80px;
+            opacity: 0;
+            animation-name: cloudLeft;
+            animation-duration: 2s;
+            animation-timing-function: linear;
+            animation-delay: 1s;
+            animation-fill-mode: forwards;
+          }
+
+          &.mid {
+            top: 10px;
+            left: 420px;
+            width: 46px;
+            opacity: 0;
+            animation-name: cloudMid;
+            animation-duration: 2s;
+            animation-timing-function: linear;
+            animation-delay: 1.2s;
+            animation-fill-mode: forwards;
+          }
+
+          &.right {
+            top: 100px;
+            left: 500px;
+            width: 62px;
+            opacity: 0;
+            animation-name: cloudRight;
+            animation-duration: 2s;
+            animation-timing-function: linear;
+            animation-delay: 1s;
+            animation-fill-mode: forwards;
+          }
+
+          @keyframes cloudLeft {
+            0% {
+              top: 17px;
+              left: 220px;
+              opacity: 0;
+            }
+
+            20% {
+              top: 33px;
+              left: 188px;
+              opacity: 1;
+            }
+
+            80% {
+              top: 81px;
+              left: 92px;
+              opacity: 1;
+            }
+
+            100% {
+              top: 97px;
+              left: 60px;
+              opacity: 0;
+            }
+          }
+
+          @keyframes cloudMid {
+            0% {
+              top: 10px;
+              left: 420px;
+              opacity: 0;
+            }
+
+            20% {
+              top: 40px;
+              left: 360px;
+              opacity: 1;
+            }
+
+            70% {
+              top: 130px;
+              left: 180px;
+              opacity: 1;
+            }
+
+            100% {
+              top: 160px;
+              left: 120px;
+              opacity: 0;
+            }
+          }
+
+          @keyframes cloudRight {
+            0% {
+              top: 100px;
+              left: 500px;
+              opacity: 0;
+            }
+
+            20% {
+              top: 120px;
+              left: 460px;
+              opacity: 1;
+            }
+
+            80% {
+              top: 180px;
+              left: 340px;
+              opacity: 1;
+            }
+
+            100% {
+              top: 200px;
+              left: 300px;
+              opacity: 0;
+            }
+          }
+        }
+      }
+
+      .bullshit {
+        position: relative;
+        float: left;
+        width: 300px;
+        padding: 30px 0;
+        overflow: hidden;
+
+        &-oops {
+          margin-bottom: 20px;
+          font-size: 32px;
+          font-weight: bold;
+          line-height: 40px;
+          color: $base-color-blue;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-fill-mode: forwards;
+        }
+
+        &-headline {
+          margin-bottom: 10px;
+          font-size: 20px;
+          font-weight: bold;
+          line-height: 24px;
+          color: #222;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-delay: 0.1s;
+          animation-fill-mode: forwards;
+        }
+
+        &-info {
+          margin-bottom: 30px;
+          font-size: 13px;
+          line-height: 21px;
+          color: $base-color-gray;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-delay: 0.2s;
+          animation-fill-mode: forwards;
+        }
+
+        &-return-home {
+          display: block;
+          float: left;
+          width: 110px;
+          height: 36px;
+          font-size: 14px;
+          line-height: 36px;
+          color: #fff;
+          text-align: center;
+          cursor: pointer;
+          background: $base-color-blue;
+          border-radius: 100px;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-delay: 0.3s;
+          animation-fill-mode: forwards;
+        }
+
+        @keyframes slideUp {
+          0% {
+            opacity: 0;
+            transform: translateY(60px);
+          }
+
+          100% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/404.vue b/src/views/404.vue
new file mode 100644
index 0000000..59c6da8
--- /dev/null
+++ b/src/views/404.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="error-container">
+     <img alt="401" class="pic-error-parent" src="@/assets/error_images/404.png" />
+     <!-- <div>111111111111111111111111111111111111111</div> -->
+    <!-- <div class="error-content">
+      <el-row :gutter="20">
+        <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
+          <div class="pic-error">
+            <img alt="401" class="pic-error-parent" src="@/assets/error_images/404.png" />
+            <img alt="401" class="pic-error-child left" src="@/assets/error_images/cloud.png" />
+            <img alt="401" class="pic-error-child" src="@/assets/error_images/cloud.png" />
+            <img alt="401" class="pic-error-child" src="@/assets/error_images/cloud.png" />
+          </div>
+        </el-col>
+
+        <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
+          <div class="bullshit">
+            <div class="bullshit-oops">
+              {{ oops }}
+            </div>
+            <div class="bullshit-headline">
+              {{ headline }}
+            </div>
+            <div class="bullshit-info">
+              {{ info }}
+            </div>
+            <a class="bullshit-return-home" href="#/index">{{ jumpTime }}s&nbsp;{{ btn }}</a>
+          </div>
+        </el-col>
+      </el-row>
+    </div> -->
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Page404',
+    data() {
+      return {
+        jumpTime: 5,
+        oops: '抱歉!',
+        headline: '当前页面不存在...',
+        info: '请检查您输入的网址是否正确，或点击下面的按钮返回首页。',
+        btn: '返回首页',
+        timer: 0,
+      }
+    },
+    mounted() {
+      // this.timeChange()
+    },
+    beforeDestroy() {
+      clearInterval(this.timer)
+    },
+    methods: {
+      timeChange() {
+        this.timer = setInterval(() => {
+          if (this.jumpTime) {
+            this.jumpTime--
+          } else {
+            this.$router.push({ path: '/' })
+            this.$store.dispatch('tabsBar/delOthersRoutes', {
+              path: '/',
+            })
+            clearInterval(this.timer)
+          }
+        }, 1000)
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .error-container {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    .error-content {
+      .pic-error {
+        position: relative;
+        float: left;
+        width: 120%;
+        overflow: hidden;
+
+        &-parent {
+          width: 100%;
+        }
+
+        &-child {
+          position: absolute;
+
+          &.left {
+            top: 17px;
+            left: 220px;
+            width: 80px;
+            opacity: 0;
+            animation-name: cloudLeft;
+            animation-duration: 2s;
+            animation-timing-function: linear;
+            animation-delay: 1s;
+            animation-fill-mode: forwards;
+          }
+
+          &.mid {
+            top: 10px;
+            left: 420px;
+            width: 46px;
+            opacity: 0;
+            animation-name: cloudMid;
+            animation-duration: 2s;
+            animation-timing-function: linear;
+            animation-delay: 1.2s;
+            animation-fill-mode: forwards;
+          }
+
+          &.right {
+            top: 100px;
+            left: 500px;
+            width: 62px;
+            opacity: 0;
+            animation-name: cloudRight;
+            animation-duration: 2s;
+            animation-timing-function: linear;
+            animation-delay: 1s;
+            animation-fill-mode: forwards;
+          }
+
+          @keyframes cloudLeft {
+            0% {
+              top: 17px;
+              left: 220px;
+              opacity: 0;
+            }
+
+            20% {
+              top: 33px;
+              left: 188px;
+              opacity: 1;
+            }
+
+            80% {
+              top: 81px;
+              left: 92px;
+              opacity: 1;
+            }
+
+            100% {
+              top: 97px;
+              left: 60px;
+              opacity: 0;
+            }
+          }
+
+          @keyframes cloudMid {
+            0% {
+              top: 10px;
+              left: 420px;
+              opacity: 0;
+            }
+
+            20% {
+              top: 40px;
+              left: 360px;
+              opacity: 1;
+            }
+
+            70% {
+              top: 130px;
+              left: 180px;
+              opacity: 1;
+            }
+
+            100% {
+              top: 160px;
+              left: 120px;
+              opacity: 0;
+            }
+          }
+
+          @keyframes cloudRight {
+            0% {
+              top: 100px;
+              left: 500px;
+              opacity: 0;
+            }
+
+            20% {
+              top: 120px;
+              left: 460px;
+              opacity: 1;
+            }
+
+            80% {
+              top: 180px;
+              left: 340px;
+              opacity: 1;
+            }
+
+            100% {
+              top: 200px;
+              left: 300px;
+              opacity: 0;
+            }
+          }
+        }
+      }
+
+      .bullshit {
+        position: relative;
+        float: left;
+        width: 300px;
+        padding: 30px 0;
+        overflow: hidden;
+
+        &-oops {
+          margin-bottom: 20px;
+          font-size: 32px;
+          font-weight: bold;
+          line-height: 40px;
+          color: $base-color-blue;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-fill-mode: forwards;
+        }
+
+        &-headline {
+          margin-bottom: 10px;
+          font-size: 20px;
+          font-weight: bold;
+          line-height: 24px;
+          color: #222;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-delay: 0.1s;
+          animation-fill-mode: forwards;
+        }
+
+        &-info {
+          margin-bottom: 30px;
+          font-size: 13px;
+          line-height: 21px;
+          color: $base-color-gray;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-delay: 0.2s;
+          animation-fill-mode: forwards;
+        }
+
+        &-return-home {
+          display: block;
+          float: left;
+          width: 110px;
+          height: 36px;
+          font-size: 14px;
+          line-height: 36px;
+          color: #fff;
+          text-align: center;
+          cursor: pointer;
+          background: $base-color-blue;
+          border-radius: 100px;
+          opacity: 0;
+          animation-name: slideUp;
+          animation-duration: 0.5s;
+          animation-delay: 0.3s;
+          animation-fill-mode: forwards;
+        }
+
+        @keyframes slideUp {
+          0% {
+            opacity: 0;
+            transform: translateY(60px);
+          }
+
+          100% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/administrator/role/components/TableEdit.vue b/src/views/administrator/role/components/TableEdit.vue
new file mode 100644
index 0000000..13b7ad0
--- /dev/null
+++ b/src/views/administrator/role/components/TableEdit.vue
@@ -0,0 +1,222 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules" v-if="!ids">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="角色名称" prop="角色名称">
+        <el-input style="width:300px;" :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="角色描述" prop="角色描述">
+     <el-input  style="width:300px;" type="textarea" v-model="form.券包价格"></el-input>
+        <!-- <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+  </el-row>
+  
+    <el-row>
+   <el-col :span="12">
+  <el-form-item label="状态">
+    <el-radio-group  style="width:300px;"  v-model="form.resource">
+      <el-radio label="1">启用</el-radio>
+      <el-radio label="2">禁用</el-radio>
+    </el-radio-group>
+  </el-form-item>
+   </el-col>
+  </el-row>
+       </template>
+    </el-form>
+
+  <div class="block" v-else>
+  <span class="demonstration">权限设置</span>
+  <el-cascader
+  style="width:300px;margin-left:20px;"
+    :options="options"
+    :props="props"
+    collapse-tags
+    clearable>
+    </el-cascader>
+   </div>
+     
+    <div slot="footer" class="dialog-footer" >
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+        //   options: [{
+        //   value: '已支付',
+        //   label: '已支付'
+        // },
+        // ],
+         props: { multiple: true },
+          options: [{
+          value: 1,
+          label: '东南',
+          children: [{
+            value: 2,
+            label: '上海',
+            children: [
+              { value: 3, label: '普陀' },
+              { value: 4, label: '黄埔' },
+              { value: 5, label: '徐汇' }
+            ]
+          }, {
+            value: 7,
+            label: '江苏',
+            children: [
+              { value: 8, label: '南京' },
+              { value: 9, label: '苏州' },
+              { value: 10, label: '无锡' }
+            ]
+          }, {
+            value: 12,
+            label: '浙江',
+            children: [
+              { value: 13, label: '杭州' },
+              { value: 14, label: '宁波' },
+              { value: 15, label: '嘉兴' }
+            ]
+          }]
+        }, {
+          value: 17,
+          label: '西北',
+          children: [{
+            value: 18,
+            label: '陕西',
+            children: [
+              { value: 19, label: '西安' },
+              { value: 20, label: '延安' }
+            ]
+          }, {
+            value: 21,
+            label: '新疆维吾尔族自治区',
+            children: [
+              { value: 22, label: '乌鲁木齐' },
+              { value: 23, label: '克拉玛依' }
+            ]
+          }]
+        }],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+          resource:'1'
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '权限设置'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/administrator/role/index.vue b/src/views/administrator/role/index.vue
new file mode 100644
index 0000000..2fe4eed
--- /dev/null
+++ b/src/views/administrator/role/index.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="table-container">
+    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
+  <el-form-item label="">
+    <el-input style="width:200px;" clearable v-model="queryForm.user" placeholder="请输入关键词"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="onSubmit">查询</el-button>
+  </el-form-item>
+</el-form>
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">权限设置</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/administrator/user/components/TableEdit.vue b/src/views/administrator/user/components/TableEdit.vue
new file mode 100644
index 0000000..7438819
--- /dev/null
+++ b/src/views/administrator/user/components/TableEdit.vue
@@ -0,0 +1,189 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="账号" prop="账号">
+        <el-input style="width:300px;" placeholder="请输入账号" :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="密码" prop="密码">
+        <el-input style="width:300px;" type="password" placeholder="请输入账号" :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+    <el-row>
+   <el-col :span="12">
+   <el-form-item label="昵称" prop="昵称">
+        <el-input style="width:300px;" placeholder="请输入账号" :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-form-item label="选择角色类型">
+   <el-checkbox-group class="group" v-model="checkedCities" @change="handleCheckedCitiesChange">
+   <el-checkbox  
+    v-for="(value,index) in cities" 
+    :label="value.id"
+    :key="index">{{value.text}}
+    </el-checkbox>
+   </el-checkbox-group>
+  </el-form-item>
+
+   <el-form-item label="状态">
+    <el-radio-group v-model="form.resource">
+      <el-radio label="显示"></el-radio>
+      <el-radio label="隐藏"></el-radio>
+    </el-radio-group>
+  </el-form-item>
+   <!-- <el-row>
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+  <script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+  export default {
+  name: 'TableEdit',
+  data() {
+  return {
+  ids:true,
+  status:'',
+  checkedCities: [],
+  cities: [
+{text:'超级管理员',id:0},
+{text:'管理员',id:1},
+{text:'主管',id:2},
+{text:'队长',id:3}
+],
+//   options:[
+//   { "label": "选项1", "value": "1" },
+//   { "label": "选项2", "value": "2" },
+//   { "label": "选项3", "value": "3" }
+// ],
+  form: {
+  券包名称:'',
+  券包价格:'',
+  package1:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  package2:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  package3:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  },
+  rules: {
+  // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+  券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+  券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+  },
+  title: '',
+  dialogFormVisible: false,
+  }
+  },
+  created() {
+  },
+  methods:{
+  showEdit(row,ids){
+  this.status = row
+  if (!row) {
+  this.title = '添加1'
+  this.ids = false
+  this.form.券包名称='',
+  this.form. 券包价格='',
+  this.form.package1 = {}
+  this.form.package2 = {}
+  this.form.package3 = {}
+  }
+  else if (ids) {
+  this.ids = ids
+  this.title = '查看'
+  this.form = Object.assign({}, row)
+  }
+  else{
+  this.title = '编辑'
+  this.ids = false
+  this.form = Object.assign({}, row)
+  }
+  this.dialogFormVisible = true
+  },
+  close(){
+  // this.$refs['form'].resetFields()
+  // this.form = this.$options.data().form
+  this.dialogFormVisible = false
+  this.form.券包名称='',
+  this.form. 券包价格='',
+  this.form.package1 = {}
+  this.form.package2 = {}
+  this.form.package3 = {}
+  },
+  save() {
+  if(this.status){
+  this.$refs['form'].validate(async (valid) => {
+  if (valid) {
+  const { msg } = await editPackage(this.form)
+  this.$message({
+  message:msg,
+  duration:2000,
+  type:'success'
+  })
+  // this.$baseMessage(msg, 'success')
+  this.$refs['form'].resetFields()
+  this.$parent.fetchData();
+  this.dialogFormVisible = false
+  this.form = this.$options.data().form
+  } 
+  else 
+  {
+  return false
+  }
+  })
+  }
+  else
+  {
+  this.$refs['form'].validate(async (valid) => {
+  if (valid) {
+  const { msg } = await addPackage(this.form)
+  this.$message({
+  message:msg,
+  duration:2000,
+  type:'success'
+  })
+  // this.$baseMessage(msg, 'success')
+  this.$refs['form'].resetFields()
+  this.$parent.fetchData();
+  this.dialogFormVisible = false
+  this.form = this.$options.data().form
+  } else {
+  return false
+  }
+  })
+  }
+  },
+  },
+  }
+  </script>
diff --git a/src/views/administrator/user/index.vue b/src/views/administrator/user/index.vue
new file mode 100644
index 0000000..5c593e9
--- /dev/null
+++ b/src/views/administrator/user/index.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="table-container">
+       <el-form :inline="true" :model="queryForm" class="demo-form-inline">
+  <el-form-item label="">
+    <el-input style="width:200px;" clearable v-model="queryForm.user" placeholder="请输入关键词"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="onSubmit">查询</el-button>
+  </el-form-item>
+</el-form>
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加1</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <!-- <el-button  type="text" @click="handleView(row,ids)">查看</el-button> -->
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/careManagement/therapist/components/TableEdit.vue b/src/views/careManagement/therapist/components/TableEdit.vue
new file mode 100644
index 0000000..86252f3
--- /dev/null
+++ b/src/views/careManagement/therapist/components/TableEdit.vue
@@ -0,0 +1,214 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加2'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/careManagement/therapist/index.vue b/src/views/careManagement/therapist/index.vue
new file mode 100644
index 0000000..2fbe424
--- /dev/null
+++ b/src/views/careManagement/therapist/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">洗护师登记</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/careManagement/vehicle/components/TableEdit.vue b/src/views/careManagement/vehicle/components/TableEdit.vue
new file mode 100644
index 0000000..184c28d
--- /dev/null
+++ b/src/views/careManagement/vehicle/components/TableEdit.vue
@@ -0,0 +1,211 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+  <script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+  export default {
+  name: 'TableEdit',
+  data() {
+  return {
+  ids:true,
+  status:'',
+  options: [{
+  value: '已支付',
+  label: '已支付'
+  },
+  ],
+  form: {
+  券包名称:'',
+  券包价格:'',
+  package1:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  package2:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  package3:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  },
+  rules: {
+  // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+  券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+  券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+  },
+  title: '',
+  dialogFormVisible: false,
+  }
+  },
+  created() {
+  },
+  methods:{
+  showEdit(row,ids){
+  this.status = row
+  if (!row) {
+  this.title = '添加1'
+  this.ids = false
+  this.form.券包名称='',
+  this.form. 券包价格='',
+  this.form.package1 = {}
+  this.form.package2 = {}
+  this.form.package3 = {}
+  }
+  else if (ids) {
+  this.ids = ids
+  this.title = '查看'
+  this.form = Object.assign({}, row)
+  }
+  else{
+  this.title = '编辑'
+  this.ids = false
+  this.form = Object.assign({}, row)
+  }
+  this.dialogFormVisible = true
+  },
+  close(){
+  // this.$refs['form'].resetFields()
+  // this.form = this.$options.data().form
+  this.dialogFormVisible = false
+  this.form.券包名称='',
+  this.form. 券包价格='',
+  this.form.package1 = {}
+  this.form.package2 = {}
+  this.form.package3 = {}
+  },
+  save() {
+  if(this.status){
+  this.$refs['form'].validate(async (valid) => {
+  if (valid) {
+  const { msg } = await editPackage(this.form)
+  this.$message({
+  message:msg,
+  duration:2000,
+  type:'success'
+  })
+  // this.$baseMessage(msg, 'success')
+  this.$refs['form'].resetFields()
+  this.$parent.fetchData();
+  this.dialogFormVisible = false
+  this.form = this.$options.data().form
+  } 
+  else 
+  {
+  return false
+  }
+  })
+  }
+  else
+  {
+  this.$refs['form'].validate(async (valid) => {
+  if (valid) {
+  const { msg } = await addPackage(this.form)
+  this.$message({
+  message:msg,
+  duration:2000,
+  type:'success'
+  })
+  // this.$baseMessage(msg, 'success')
+  this.$refs['form'].resetFields()
+  this.$parent.fetchData();
+  this.dialogFormVisible = false
+  this.form = this.$options.data().form
+  } else {
+  return false
+  }
+  })
+  }
+  },
+  },
+  }
+  </script>
diff --git a/src/views/careManagement/vehicle/index.vue b/src/views/careManagement/vehicle/index.vue
new file mode 100644
index 0000000..42f7415
--- /dev/null
+++ b/src/views/careManagement/vehicle/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">建立绑定</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/certificate/ficate/components/TableEdit.vue b/src/views/certificate/ficate/components/TableEdit.vue
new file mode 100644
index 0000000..a559633
--- /dev/null
+++ b/src/views/certificate/ficate/components/TableEdit.vue
@@ -0,0 +1,214 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/certificate/ficate/index.vue b/src/views/certificate/ficate/index.vue
new file mode 100644
index 0000000..d6eb4ed
--- /dev/null
+++ b/src/views/certificate/ficate/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/comment/components/TableEdit.vue b/src/views/comment/components/TableEdit.vue
new file mode 100644
index 0000000..d8d3e79
--- /dev/null
+++ b/src/views/comment/components/TableEdit.vue
@@ -0,0 +1,109 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template v-if="form.status == '2' ">
+      <el-form-item label="车辆ID" prop="车辆ID">
+        <el-input v-model.trim="form.车辆ID" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="小哇ID" prop="小哇ID">
+        <el-input v-model.trim="form.小哇ID" autocomplete="off" />
+      </el-form-item>
+       <el-form-item label="时段ID" prop="时段ID">
+        <el-input v-model.trim="form.时段ID" autocomplete="off" />
+      </el-form-item>
+          <el-form-item label="预约日期" prop="预约日期">
+             <el-date-picker
+      v-model="form.预约日期"
+      style="width:350px;"
+      type="date"
+      value-format="yyyy-MM-dd"
+      placeholder="选择日期">
+    </el-date-picker>
+        <!-- <el-input v-model.trim="form.预约日期" autocomplete="off" /> -->
+      </el-form-item>
+       </template>
+         <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item>
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          title: '',
+          author: '',
+          smallWow:'',
+          time:'',
+          author:''
+        },
+        rules: {
+          车辆ID: [{ required: true, trigger: 'blur', message: '请输入车辆ID' }],
+            小哇ID: [{ required: true, trigger: 'blur', message: '请输入小哇ID' }],
+             时段ID: [{ required: true, trigger: 'blur', message: '请输入时段ID' }],
+          预约日期: [{ required: true, trigger: 'blur', message: '请选择时间' }],
+          订单状态: [{ required: true, trigger: 'blur', message: '请选择状态' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        // this.$emit('fetch-data')
+      },
+      save() {
+        // console.log(this.form,'--=')
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/comment/index.vue b/src/views/comment/index.vue
new file mode 100644
index 0000000..6b6b43a
--- /dev/null
+++ b/src/views/comment/index.vue
@@ -0,0 +1,289 @@
+<template>
+  <div class="table-container">
+    
+    <!-- <vab-page-header description="功能强大的数据表格组件，支持排序、分页、搜索等功能" :icon="['fas', 'table']" title="表格管理" /> -->
+    <el-row>
+  <el-col :span="22">
+     <el-form ref="form"  :inline="true" :model="queryForm" @submit.native.prevent>
+       <el-form-item label="查询时间" >
+            <el-date-picker
+               v-model="queryForm.time"
+                 unlink-panels
+                value-format="yyyy-MM-dd"
+               type="daterange"
+               range-separator="-"
+               start-placeholder="开始日期"
+               end-placeholder="结束日期"
+                :picker-options="pickerOptions"
+            ></el-date-picker>
+         </el-form-item>
+           </el-form>
+  </el-col>
+     <el-form ref="form" style="maigin-left:50px;"  :inline="true" :model="queryForm" @submit.native.prevent>
+          <!-- <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入手机号或订单号查询" />
+          </el-form-item> -->
+          
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+           </el-form>
+</el-row>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <el-table-column  type="selection" width="55" />
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="100" label="用户ID" prop="用户ID"  />
+         <el-table-column align="center" width="100" label="管家ID" prop="管家ID"  />
+           <el-table-column align="center" width="100" label="管家名称" prop="管家名称"  />
+         <el-table-column align="center"  width="160" label="昵称" prop="昵称"  />
+       <el-table-column align="center" width="100" label="用户头像" prop="用户头像">
+         <template slot-scope="scope">
+          <img v-if="scope.row.用户头像" :src="scope.row.用户头像" alt="图片" style="width: 30px; height: 30px;">
+        </template>
+          </el-table-column>
+      <el-table-column  align="center" width="100" label="评论ID" prop="评论ID"  />
+      <el-table-column  align="center" width="100" label="订单ID" prop="订单ID"  />
+       <el-table-column  align="center" width="180" label="订单号" prop="订单号"  />
+      <el-table-column  align="center" width="100" label="星级" prop="星级"  />
+        <el-table-column align="center"  width="160" label="评论内容" prop="评论内容"  />
+        <el-table-column align="center"  width="200" label="评论图片" prop="评论图片"  >
+         <template    slot-scope="scope" >
+          <div style="display: flex;overflow:auto;">
+              <div v-for="(image, index) in scope.row.评论图片" :key="index" >
+        <img v-if="image" :src="image" alt="图片" @click="previewImage(image)" style="width: 50px; height: 50px;margin-left:10px;">
+      </div>
+          </div>
+        </template>
+          </el-table-column>
+        <el-table-column align="center"  width="160" label="评论时间" prop="评论时间"  />
+       
+      <!-- <el-table-column label="头像" >
+        <template #default="{ row }">
+          <el-image v-if="imgShow" :preview-src-list="imageList" :src="row.img" />
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="点击量" prop="pageViews"  sortable /> -->
+      <!-- <el-table-column label="状态" >
+        <template #default="{ row }">
+          <el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
+            <el-tag :type="row.status | statusFilter">
+              {{ row.status }}
+            </el-tag>
+          </el-tooltip>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="时间" prop="datetime"  width="200" /> -->
+      <!-- <el-table-column label="操作"  fixed="right" width="60px">
+        <template #default="{ row }">
+          <el-button v-if="row.订单状态 == '已派单' || row.订单状态 == '已支付'  " type="text" @click="handleEdit(row)">编辑</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, commentList } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+           pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+      previewImage(url) {
+        
+      // 方法1: 使用window.open在新标签页中打开图片
+      window.open(url, '_blank');
+      
+      // 方法2: 使用Vue的Modal组件（例如使用Element UI的Dialog）
+      // this.$refs.imageModal.showImage(url);
+    },
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleEdit(row) {
+        console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids: ids })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await commentList(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/commodity/malllist/components/TableEdit.vue b/src/views/commodity/malllist/components/TableEdit.vue
new file mode 100644
index 0000000..7c60a56
--- /dev/null
+++ b/src/views/commodity/malllist/components/TableEdit.vue
@@ -0,0 +1,184 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="售价" prop="售价">
+        <el-input style="width:300px;" :disabled="ids" v-model.trim="form.售价" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="库存" prop="库存">
+        <el-input style="width:300px;" :disabled="ids" v-model.trim="form.库存" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="销量" prop="销量">
+        <el-input style="width:300px;" :disabled="ids" v-model.trim="form.销量" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+    <el-form-item label="状态">
+    <el-select v-model="form.状态" :disabled="ids" style="width: 300px;" placeholder="请选择状态">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+     </el-option>
+     </el-select>
+  </el-form-item>
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addproduct,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '1',
+          label: '上架'
+        }, {
+          value: '2',
+          label: '下架'
+        }],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+          this.title = '添加'
+          this.ids = false
+          this.form.券包名称='',
+          this.form. 券包价格='',
+          this.form.package1 = {}
+          this.form.package2 = {}
+          this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = row
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = row
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        this.form.券包名称='',
+          this.form. 券包价格='',
+         this.form.package1 = {}
+           this.form.package2 = {}
+             this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            if(this.form.状态 == '上架' ) this.form.状态 = '1'
+             if(this.form.状态 == '下架' ) this.form.状态 = '2'
+            const { msg } = await addproduct(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/commodity/malllist/index.vue b/src/views/commodity/malllist/index.vue
new file mode 100644
index 0000000..186b4a6
--- /dev/null
+++ b/src/views/commodity/malllist/index.vue
@@ -0,0 +1,300 @@
+<template>
+  <div class="table-container">
+<el-form :inline="true" :model="queryForm" class="demo-form-inline">
+    <el-form-item label="状态">
+    <el-select v-model="queryForm.status" style="width: 300px;" placeholder="请选择状态">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+     </el-option>
+     </el-select>
+  </el-form-item>
+  <el-form-item label="">
+    <el-input style="width: 300px;" v-model="queryForm.status_Inquiry" placeholder="请输入商品名称和号码"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="handleQuery">查询</el-button>
+  </el-form-item>
+</el-form>
+
+
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+  
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <el-table-column align="center" width="80" label="商品图片">
+        <template #default="{ row }">
+          <el-image
+            v-if="row['商品图片']"
+            :src="getImageUrl(row['商品图片'])"
+            :preview-src-list="[getImageUrl(row['商品图片'])]"
+            fit="cover"
+            style="width: 48px; height: 48px; border-radius: 4px;"
+          />
+          <span v-else style="color: #999;">—</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" min-width="120" label="商品名称" prop="商品名称" show-overflow-tooltip />
+      <el-table-column align="center" width="100" label="商品编号" prop="商品编号" />
+      <el-table-column align="center" width="90" label="售价" prop="售价" />
+      <el-table-column align="center" width="90" label="原价" prop="原价" />
+      <el-table-column align="center" width="70" label="库存" prop="库存" />
+      <el-table-column align="center" width="70" label="销量" prop="销量" />
+      <el-table-column align="center" width="100" label="价格描述" prop="价格描述" show-overflow-tooltip />
+      <el-table-column align="center" width="70" label="状态" prop="状态" />
+        <!-- <template #default="{ row }">
+          <el-tag :type="row['状态'] === 1 ? 'success' : 'info'" size="small">
+            {{ row['状态'] === 1 ? '上架' : '下架' }}
+          </el-tag>
+        </template>
+      </el-table-column> -->
+      <el-table-column align="center" width="60" label="推荐">
+        <template #default="{ row }">
+          {{ row['推荐'] === 1 ? '是' : '否' }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" width="80" label="标签" prop="标签" show-overflow-tooltip />
+      <el-table-column align="center" width="165" label="创建时间" prop="创建时间" />
+      <el-table-column label="操作" fixed="right" width="150">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleView(row, ids)">查看</el-button>
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+    <script>
+    import { deleteProduct, couponPackage, exportUserOperateAdmin } from '@/api/table'
+    import TableEdit from './components/TableEdit'
+    import VabPageHeader from '@/components/VabPageHeader'
+    export default {
+    name: 'ComprehensiveTable',
+    components: {
+    TableEdit,
+    VabPageHeader,
+    },
+    filters: {
+    statusFilter(status) {
+    const statusMap = {
+    published: 'success',
+    draft: 'gray',
+    deleted: 'danger',
+    }
+    return statusMap[status]
+    },
+    },
+    data() {
+    return {
+    ids:true,
+    pickerOptions: {
+    shortcuts: [{
+    text: '最近一周',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+    picker.$emit('pick', [start, end]);
+    }
+    }, 
+    {
+    text: '最近一个月',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+    picker.$emit('pick', [start, end]);
+    }
+    }, 
+    {
+    text: '最近三个月',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+    picker.$emit('pick', [start, end]);
+    }
+    }]
+    },
+     options: [
+       {
+          value: '1',
+          label: '上架'
+        },{
+          value: '2',
+          label: '下架'
+        }],
+        value: '',
+    imgShow: true,
+    list: [],
+    imageList: [],
+    listLoading: true,
+    layout: 'total, sizes, prev, pager, next, jumper',
+    total: 0,
+    background: true,
+    selectRows: '',
+    elementLoadingText: '正在加载...',
+    queryForm: {
+    pageNo: 1,
+    pageSize: 20,
+    title: '',
+    },
+    timeOutID: null,
+    }
+    },
+    computed: {
+    height() {
+    return this.$baseTableHeight()
+    },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+    hdleDelete(row) {
+      const id =  row['商品ID']
+      if (id != null) {
+        this.$baseConfirm('确定要删除当前商品吗？', null, async () => {
+          const { msg } = await deleteProduct({ product_id: id })
+          this.$baseMessage(msg, 'success')
+          this.fetchData()
+        })
+      }
+    },
+    getImageUrl(path) {
+      if (!path) return ''
+      if (path.startsWith('http')) return path
+      return `https://static.wagoo.pet/${path}`
+    },
+    tableSortChange() {
+      const imageList = (this.$refs.tableSort && this.$refs.tableSort.tableData) || []
+      this.imageList = imageList.map((item) => item['商品图片']).filter(Boolean)
+    },
+    setSelectRows(val) {
+    this.selectRows = val
+    },
+    handleAdd() {
+    this.$refs['edit'].showEdit()
+    },
+    handleView(row,ids){
+    this.$refs['edit'].showEdit(row,ids)
+    },
+    handleEdit(row) {
+    // console.log(row,'---')
+    this.$refs['edit'].showEdit(row)
+    },
+
+    handleDelete() {
+    exportUserOperateAdmin().then(
+    response => {
+    window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+    }
+    ).catch(error => {
+    console.error('下载失败', error)
+    this.loading = false // 停止加载，隐藏加载状态
+    })
+    },
+    handleSizeChange(val) {
+    this.queryForm.pageSize = val
+    this.fetchData()
+    },
+    handleCurrentChange(val) {
+    this.queryForm.pageNo = val
+    this.fetchData()
+    },
+    onSubmit(){
+      console.log(111)
+
+    },
+    handleQuery() {
+    this.queryForm.pageNo = 1
+    this.fetchData()
+    },
+    async fetchData() {
+      this.listLoading = true
+      try {
+        const res = await couponPackage(this.queryForm)
+        const data = res.data || []
+        const total = res.total != null ? res.total : data.length
+        this.list = Array.isArray(data) ? data : []
+        this.total = total
+      } catch (e) {
+        this.list = []
+        this.total = 0
+      }
+      this.timeOutID = setTimeout(() => {
+        this.listLoading = false
+      }, 300)
+    },
+    testMessage() {
+    this.$baseMessage('test1', 'success')
+    },
+    testALert() {
+    this.$baseAlert('11')
+    this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+    })
+    this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+    })
+    },
+    testConfirm() {
+    this.$baseConfirm(
+    '你确定要执行该操作?',
+    null,
+    () => {
+            /* 可以写回调; */
+    },
+    () => {
+            /* 可以写回调; */
+    }
+    )
+    },
+    testNotify() {
+    this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+    },
+    },
+    }
+    </script>
diff --git a/src/views/commodity/orderlist/components/TableEdit.vue b/src/views/commodity/orderlist/components/TableEdit.vue
new file mode 100644
index 0000000..f911730
--- /dev/null
+++ b/src/views/commodity/orderlist/components/TableEdit.vue
@@ -0,0 +1,160 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+    <el-form-item label="状态">
+    <el-select v-model="form.status" :disabled="ids" style="width: 300px;" placeholder="请选择状态">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+     </el-option>
+     </el-select>
+  </el-form-item>
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addOrder,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '3',
+          label: '待收货'
+        }],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+          this.title = '添加'
+          this.ids = false
+          this.form.券包名称='',
+          this.form. 券包价格='',
+          this.form.package1 = {}
+          this.form.package2 = {}
+          this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = row
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = row
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        this.form.券包名称='',
+          this.form. 券包价格='',
+         this.form.package1 = {}
+           this.form.package2 = {}
+             this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            // if(this.form.状态 == '上架' ) this.form.状态 = '1'
+            //  if(this.form.状态 == '下架' ) this.form.状态 = '2'
+            const { msg } = await addOrder(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/commodity/orderlist/index.vue b/src/views/commodity/orderlist/index.vue
new file mode 100644
index 0000000..a98aba7
--- /dev/null
+++ b/src/views/commodity/orderlist/index.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="table-container">
+<el-form :inline="true" :model="queryForm" class="demo-form-inline">
+  
+    <!-- <el-form-item label="状态">
+    <el-select v-model="queryForm.status" style="width: 300px;" placeholder="请选择状态">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+     </el-option>
+     </el-select>
+  </el-form-item> -->
+  <el-form-item label="">
+    <el-input style="width: 300px;" v-model="queryForm.status_Inquiry" placeholder="请输入内容查询"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="handleQuery">查询</el-button>
+  </el-form-item>
+</el-form>
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+          <el-button  icon="el-icon-delete" type="primary" @click="handleDelete">导出</el-button> 
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+    </vab-query-form>
+  <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <el-table-column align="center" label="订单ID" prop="订单ID" width="100" />
+      <el-table-column align="center" label="订单号" prop="订单号" min-width="160" show-overflow-tooltip />
+      <el-table-column align="center" label="订单状态" prop="订单状态" width="100" />
+      <el-table-column align="center" label="订单内容" prop="订单内容" width="100" />
+      <el-table-column align="center" label="创建时间" prop="创建时间" width="165" />
+      <el-table-column align="center" label="支付时间" prop="支付时间" width="165" />
+      <el-table-column align="center" label="实付金额" prop="实付金额" width="100" />
+      <el-table-column align="center" label="用户ID" prop="用户ID" width="100" />
+      <el-table-column align="center" label="手机号" prop="手机号" width="120" />
+      <el-table-column align="center" label="地址" prop="地址" min-width="180" show-overflow-tooltip />
+      <el-table-column label="操作" fixed="right" width="150">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleView(row, ids)">查看</el-button>
+          <el-button type="text" v-if="row.订单状态 == '2' " @click="handleEdit(row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+    <script>
+    import { getProductOrders, expormallOrdern } from '@/api/table'
+    import TableEdit from './components/TableEdit'
+    import VabPageHeader from '@/components/VabPageHeader'
+    export default {
+    name: 'ComprehensiveTable',
+    components: {
+    TableEdit,
+    VabPageHeader,
+    },
+    filters: {
+    statusFilter(status) {
+    const statusMap = {
+    published: 'success',
+    draft: 'gray',
+    deleted: 'danger',
+    }
+    return statusMap[status]
+    },
+    },
+    data() {
+    return {
+    ids:true,
+    pickerOptions: {
+    shortcuts: [{
+    text: '最近一周',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+    picker.$emit('pick', [start, end]);
+    }
+    }, 
+    {
+    text: '最近一个月',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+    picker.$emit('pick', [start, end]);
+    }
+    }, 
+    {
+    text: '最近三个月',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+    picker.$emit('pick', [start, end]);
+    }
+    }]
+    },
+     options: [
+       {
+          value: '1',
+          label: '上架'
+        },{
+          value: '2',
+          label: '下架'
+        }],
+        value: '',
+    imgShow: true,
+    list: [],
+    imageList: [],
+    listLoading: true,
+    layout: 'total, sizes, prev, pager, next, jumper',
+    total: 0,
+    background: true,
+    selectRows: '',
+    elementLoadingText: '正在加载...',
+    queryForm: {
+    pageNo: 1,
+    pageSize: 20,
+    title: '',
+    },
+    timeOutID: null,
+    }
+    },
+    computed: {
+    height() {
+    return this.$baseTableHeight()
+    },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+    hdleDelete(row) {
+      const id = row['价格ID'] || row['商品ID']
+      if (id != null) {
+        this.$baseConfirm('确定要删除当前商品吗？', null, async () => {
+          const { msg } = await deletePackage({ ids: id })
+          this.$baseMessage(msg, 'success')
+          this.fetchData()
+        })
+      }
+    },
+     handleDelete() {
+        expormallOrdern().then(
+  response => {
+     window.location.href = response.data.url;  
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      },
+    getImageUrl(path) {
+      if (!path) return ''
+      if (path.startsWith('http')) return path
+      return `https://static.wagoo.pet/${path}`
+    },
+    tableSortChange() {
+      const imageList = (this.$refs.tableSort && this.$refs.tableSort.tableData) || []
+      this.imageList = imageList.map((item) => item['商品图片']).filter(Boolean)
+    },
+    setSelectRows(val) {
+    this.selectRows = val
+    },
+    handleAdd() {
+    this.$refs['edit'].showEdit()
+    },
+    handleView(row,ids){
+    this.$refs['edit'].showEdit(row,ids)
+    },
+    handleEdit(row) {
+    // console.log(row,'---')
+    this.$refs['edit'].showEdit(row)
+    },
+
+    handleDelete() {
+    expormallOrdern().then(
+    response => {
+    window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+    }
+    ).catch(error => {
+    console.error('下载失败', error)
+    this.loading = false // 停止加载，隐藏加载状态
+    })
+    },
+    handleSizeChange(val) {
+    this.queryForm.pageSize = val
+    this.fetchData()
+    },
+    handleCurrentChange(val) {
+    this.queryForm.pageNo = val
+    this.fetchData()
+    },
+    onSubmit(){
+      console.log(111)
+
+    },
+    handleQuery() {
+    this.queryForm.pageNo = 1
+    this.fetchData()
+    },
+    async fetchData() {
+      this.listLoading = true
+      try {
+        const res = await getProductOrders(this.queryForm)
+        const data = res.data || []
+        const total = res.total != null ? res.total : data.length
+        this.list = Array.isArray(data) ? data : []
+        this.total = total
+      } catch (e) {
+        this.list = []
+        this.total = 0
+      }
+      this.timeOutID = setTimeout(() => {
+        this.listLoading = false
+      }, 300)
+    },
+    testMessage() {
+    this.$baseMessage('test1', 'success')
+    },
+    testALert() {
+    this.$baseAlert('11')
+    this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+    })
+    this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+    })
+    },
+    testConfirm() {
+    this.$baseConfirm(
+    '你确定要执行该操作?',
+    null,
+    () => {
+            /* 可以写回调; */
+    },
+    () => {
+            /* 可以写回调; */
+    }
+    )
+    },
+    testNotify() {
+    this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+    },
+    },
+    }
+    </script>
diff --git a/src/views/coupon/couponlist/components/TableEdit.vue b/src/views/coupon/couponlist/components/TableEdit.vue
new file mode 100644
index 0000000..16f9ce4
--- /dev/null
+++ b/src/views/coupon/couponlist/components/TableEdit.vue
@@ -0,0 +1,215 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+          this.title = '添加'
+           this.ids = false
+            this.form.券包名称='',
+            
+          this.form. 券包价格='',
+         this.form.package1 = {}
+           this.form.package2 = {}
+             this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        this.form.券包名称='',
+          this.form. 券包价格='',
+         this.form.package1 = {}
+           this.form.package2 = {}
+             this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/coupon/couponlist/index.vue b/src/views/coupon/couponlist/index.vue
new file mode 100644
index 0000000..e5069d2
--- /dev/null
+++ b/src/views/coupon/couponlist/index.vue
@@ -0,0 +1,252 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+        <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+        <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+        <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+        <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+    <script>
+    import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+    import TableEdit from './components/TableEdit'
+    import VabPageHeader from '@/components/VabPageHeader'
+    export default {
+    name: 'ComprehensiveTable',
+    components: {
+    TableEdit,
+    VabPageHeader,
+    },
+    filters: {
+    statusFilter(status) {
+    const statusMap = {
+    published: 'success',
+    draft: 'gray',
+    deleted: 'danger',
+    }
+    return statusMap[status]
+    },
+    },
+    data() {
+    return {
+    ids:true,
+    pickerOptions: {
+    shortcuts: [{
+    text: '最近一周',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+    picker.$emit('pick', [start, end]);
+    }
+    }, 
+    {
+    text: '最近一个月',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+    picker.$emit('pick', [start, end]);
+    }
+    }, 
+    {
+    text: '最近三个月',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+    picker.$emit('pick', [start, end]);
+    }
+    }]
+    },
+    imgShow: true,
+    list: [],
+    imageList: [],
+    listLoading: true,
+    layout: 'total, sizes, prev, pager, next, jumper',
+    total: 0,
+    background: true,
+    selectRows: '',
+    elementLoadingText: '正在加载...',
+    queryForm: {
+    pageNo: 1,
+    pageSize: 20,
+    title: '',
+    },
+    timeOutID: null,
+    }
+    },
+    computed: {
+    height() {
+    return this.$baseTableHeight()
+    },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+    hdleDelete(row) {
+    if (row.券包ID) {
+    this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+    const { msg } = await deletePackage({ ids: row.券包ID })
+    this.$baseMessage(msg, 'success')
+    this.fetchData()
+    })
+    } 
+    },
+    tableSortChange() {
+    const imageList = []
+    this.$refs.tableSort.tableData.forEach((item, index) => {
+    imageList.push(item.img)
+    })
+    this.imageList = imageList
+    },
+    setSelectRows(val) {
+    this.selectRows = val
+    },
+    handleAdd() {
+    this.$refs['edit'].showEdit()
+    },
+    handleView(row,ids){
+    this.$refs['edit'].showEdit(row,ids)
+    },
+    handleEdit(row) {
+    // console.log(row,'---')
+    this.$refs['edit'].showEdit(row)
+    },
+    handleDelete() {
+    exportUserOperateAdmin().then(
+    response => {
+    window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+    }
+    ).catch(error => {
+    console.error('下载失败', error)
+    this.loading = false // 停止加载，隐藏加载状态
+    })
+    },
+    handleSizeChange(val) {
+    this.queryForm.pageSize = val
+    this.fetchData()
+    },
+    handleCurrentChange(val) {
+    this.queryForm.pageNo = val
+    this.fetchData()
+    },
+    handleQuery() {
+    this.queryForm.pageNo = 1
+    this.fetchData()
+    },
+    async fetchData() {
+    this.listLoading = true
+    const { data, total } = await couponPackage(this.queryForm)
+    this.list = data
+    const imageList = []
+    data.forEach((item, index) => {
+    imageList.push(item.img)
+    })
+    this.imageList = imageList
+    this.total = total
+    this.timeOutID = setTimeout(() => {
+    this.listLoading = false
+    }, 500)
+    },
+    testMessage() {
+    this.$baseMessage('test1', 'success')
+    },
+    testALert() {
+    this.$baseAlert('11')
+    this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+    })
+    this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+    })
+    },
+    testConfirm() {
+    this.$baseConfirm(
+    '你确定要执行该操作?',
+    null,
+    () => {
+            /* 可以写回调; */
+    },
+    () => {
+            /* 可以写回调; */
+    }
+    )
+    },
+    testNotify() {
+    this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+    },
+    },
+    }
+    </script>
diff --git a/src/views/coupon/distribute/components/TableAdd.vue b/src/views/coupon/distribute/components/TableAdd.vue
new file mode 100644
index 0000000..da7c193
--- /dev/null
+++ b/src/views/coupon/distribute/components/TableAdd.vue
@@ -0,0 +1,187 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券名称" prop="券名称">
+        <el-input :disabled="ids"  style="width:300px;" v-model.trim="form.券名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券规则" prop="券规则">
+        <el-input :disabled="ids" style="width:300px;" v-model.trim="form.券规则" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+    <el-row>
+   <el-col :span="12">
+   <el-form-item label="满多少" prop="满多少">
+        <el-input :disabled="ids" style="width:300px;" v-model.trim="form.满多少" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+    <el-row>
+   <el-col :span="12">
+   <el-form-item label="减多少" prop="减多少">
+        <el-input :disabled="ids" style="width:300px;" v-model.trim="form.减多少" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+    <el-form-item label="起始时间" prop="起始时间">
+      <el-date-picker
+      v-model="form.起始时间"
+     style="width:300px;"
+      type="date"
+      value-format="yyyy-MM-dd"
+      placeholder="选择日期">
+    </el-date-picker>
+      </el-form-item>
+       <el-form-item label="结束时间" prop="结束时间">
+      <el-date-picker
+      v-model="form.结束时间"
+      style="width:300px;"
+      type="date"
+      value-format="yyyy-MM-dd"
+      placeholder="选择日期">
+    </el-date-picker>
+      </el-form-item>
+ 
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:''
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券规则: [{ required: true, trigger: 'blur', message: '请输入券包价格' }],
+          满多少: [{ required: true, trigger: 'blur', message: '请输入满多少' }],
+          减多少: [{ required: true, trigger: 'blur', message: '请输入减多少' }],
+          起始时间: [{ required: true, trigger: 'blur', message: '请输入起始时间' }],
+          结束时间: [{ required: true, trigger: 'blur', message: '请输入结束时间' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+          this.title = '添加'
+          this.ids = false
+          this.form.券包名称='',
+          this.form. 券包价格=''
+        //  this.form.package1 = {}
+        //    this.form.package2 = {}
+        //      this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        this.form.券名称 ='',
+        this.form.券规则 ='',
+        this.form.满多少 ='',
+        this.form.减多少 ='',
+        this.form.起始时间 ='',
+        this.form.结束时间 =''
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/coupon/distribute/components/TableEdit.vue b/src/views/coupon/distribute/components/TableEdit.vue
new file mode 100644
index 0000000..32a4359
--- /dev/null
+++ b/src/views/coupon/distribute/components/TableEdit.vue
@@ -0,0 +1,91 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template >
+      <el-form-item label="券ID" prop="券ID">
+        <el-input v-model.trim="form.券ID" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="手机号" prop="手机号">
+        <el-input v-model.trim="form.手机号" autocomplete="off" />
+      </el-form-item>
+       <el-form-item label="有效期" prop="有效期">
+             <el-date-picker
+      v-model="form.有效期"
+      style="width:350px;"
+      type="date"
+      value-format="yyyy-MM-dd"
+      placeholder="选择日期">
+    </el-date-picker>
+      </el-form-item>
+       </template>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { distributeEdit } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          title: '',
+          author: '',
+          smallWow:'',
+          time:'',
+          author:''
+        },
+        rules: {
+            券ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+             手机号: [{ required: true, trigger: 'blur', message: '请输入手机号' }],
+          有效期: [{ required: true, trigger: 'blur', message: '请选择时间' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '派发'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        // this.$emit('fetch-data')
+      },
+      save() {
+        // console.log(this.form,'--=')
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await distributeEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
diff --git a/src/views/coupon/distribute/index.vue b/src/views/coupon/distribute/index.vue
new file mode 100644
index 0000000..87fdafa
--- /dev/null
+++ b/src/views/coupon/distribute/index.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="table-container">
+    <!-- <vab-page-header description="功能强大的数据表格组件，支持排序、分页、搜索等功能" :icon="['fas', 'table']" title="表格管理" /> -->
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <el-table-column  type="selection" width="55" />
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+      <el-table-column align="center" label="券ID" prop="券ID"  />
+      <el-table-column  align="center" width="180" label="券名称" prop="券名称"  />
+      <el-table-column  align="center" width="300" label="券规则" prop="券规则"  />
+      <el-table-column align="center" label="券类型" prop="券类型"  />
+      <el-table-column align="center"  width="120" label="抵扣条件" prop="抵扣条件"  />
+      <el-table-column align="center" width="200" label="抵扣金额" prop="抵扣金额"  />
+      <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+      <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  />
+      <!-- <el-table-column label="头像" >
+        <template #default="{ row }">
+          <el-image v-if="imgShow" :preview-src-list="imageList" :src="row.img" />
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="点击量" prop="pageViews"  sortable /> -->
+      <!-- <el-table-column label="状态" >
+        <template #default="{ row }">
+          <el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
+            <el-tag :type="row.status | statusFilter">
+              {{ row.status }}
+            </el-tag>
+          </el-tooltip>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="时间" prop="datetime"  width="200" /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleEdit(row)">派发</el-button>
+          <el-button  type="text" @click="handleEdit2(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+       <table-add ref="add" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, couponstList } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import TableAdd from './components/TableAdd'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+      TableAdd
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['add'].showEdit()
+      },
+      handleEdit(row) {
+        console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+       handleEdit2(row) {
+        console.log(row,'---')
+        this.$refs['add'].showEdit(row)
+      },
+      handleDelete(row) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.券ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponstList(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/coupon/distribution/components/TableEdit.vue b/src/views/coupon/distribution/components/TableEdit.vue
new file mode 100644
index 0000000..16f9ce4
--- /dev/null
+++ b/src/views/coupon/distribution/components/TableEdit.vue
@@ -0,0 +1,215 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+          this.title = '添加'
+           this.ids = false
+            this.form.券包名称='',
+            
+          this.form. 券包价格='',
+         this.form.package1 = {}
+           this.form.package2 = {}
+             this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        this.form.券包名称='',
+          this.form. 券包价格='',
+         this.form.package1 = {}
+           this.form.package2 = {}
+             this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/coupon/distribution/index.vue b/src/views/coupon/distribution/index.vue
new file mode 100644
index 0000000..e5069d2
--- /dev/null
+++ b/src/views/coupon/distribution/index.vue
@@ -0,0 +1,252 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+        <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+        <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+        <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+        <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+    <script>
+    import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+    import TableEdit from './components/TableEdit'
+    import VabPageHeader from '@/components/VabPageHeader'
+    export default {
+    name: 'ComprehensiveTable',
+    components: {
+    TableEdit,
+    VabPageHeader,
+    },
+    filters: {
+    statusFilter(status) {
+    const statusMap = {
+    published: 'success',
+    draft: 'gray',
+    deleted: 'danger',
+    }
+    return statusMap[status]
+    },
+    },
+    data() {
+    return {
+    ids:true,
+    pickerOptions: {
+    shortcuts: [{
+    text: '最近一周',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+    picker.$emit('pick', [start, end]);
+    }
+    }, 
+    {
+    text: '最近一个月',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+    picker.$emit('pick', [start, end]);
+    }
+    }, 
+    {
+    text: '最近三个月',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+    picker.$emit('pick', [start, end]);
+    }
+    }]
+    },
+    imgShow: true,
+    list: [],
+    imageList: [],
+    listLoading: true,
+    layout: 'total, sizes, prev, pager, next, jumper',
+    total: 0,
+    background: true,
+    selectRows: '',
+    elementLoadingText: '正在加载...',
+    queryForm: {
+    pageNo: 1,
+    pageSize: 20,
+    title: '',
+    },
+    timeOutID: null,
+    }
+    },
+    computed: {
+    height() {
+    return this.$baseTableHeight()
+    },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+    hdleDelete(row) {
+    if (row.券包ID) {
+    this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+    const { msg } = await deletePackage({ ids: row.券包ID })
+    this.$baseMessage(msg, 'success')
+    this.fetchData()
+    })
+    } 
+    },
+    tableSortChange() {
+    const imageList = []
+    this.$refs.tableSort.tableData.forEach((item, index) => {
+    imageList.push(item.img)
+    })
+    this.imageList = imageList
+    },
+    setSelectRows(val) {
+    this.selectRows = val
+    },
+    handleAdd() {
+    this.$refs['edit'].showEdit()
+    },
+    handleView(row,ids){
+    this.$refs['edit'].showEdit(row,ids)
+    },
+    handleEdit(row) {
+    // console.log(row,'---')
+    this.$refs['edit'].showEdit(row)
+    },
+    handleDelete() {
+    exportUserOperateAdmin().then(
+    response => {
+    window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+    }
+    ).catch(error => {
+    console.error('下载失败', error)
+    this.loading = false // 停止加载，隐藏加载状态
+    })
+    },
+    handleSizeChange(val) {
+    this.queryForm.pageSize = val
+    this.fetchData()
+    },
+    handleCurrentChange(val) {
+    this.queryForm.pageNo = val
+    this.fetchData()
+    },
+    handleQuery() {
+    this.queryForm.pageNo = 1
+    this.fetchData()
+    },
+    async fetchData() {
+    this.listLoading = true
+    const { data, total } = await couponPackage(this.queryForm)
+    this.list = data
+    const imageList = []
+    data.forEach((item, index) => {
+    imageList.push(item.img)
+    })
+    this.imageList = imageList
+    this.total = total
+    this.timeOutID = setTimeout(() => {
+    this.listLoading = false
+    }, 500)
+    },
+    testMessage() {
+    this.$baseMessage('test1', 'success')
+    },
+    testALert() {
+    this.$baseAlert('11')
+    this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+    })
+    this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+    })
+    },
+    testConfirm() {
+    this.$baseConfirm(
+    '你确定要执行该操作?',
+    null,
+    () => {
+            /* 可以写回调; */
+    },
+    () => {
+            /* 可以写回调; */
+    }
+    )
+    },
+    testNotify() {
+    this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+    },
+    },
+    }
+    </script>
diff --git a/src/views/coupon/record/components/TableEdit.vue b/src/views/coupon/record/components/TableEdit.vue
new file mode 100644
index 0000000..3521335
--- /dev/null
+++ b/src/views/coupon/record/components/TableEdit.vue
@@ -0,0 +1,98 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template >
+      <el-form-item label="券ID" prop="券ID">
+        <el-input v-model.trim="form.券ID" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="手机号" prop="手机号">
+        <el-input v-model.trim="form.手机号" autocomplete="off" />
+      </el-form-item>
+       <el-form-item label="有效期" prop="有效期">
+             <el-date-picker
+      v-model="form.有效期"
+      style="width:350px;"
+      type="date"
+      value-format="yyyy-MM-dd"
+      placeholder="选择日期">
+    </el-date-picker>
+        <!-- <el-input v-model.trim="form.预约日期" autocomplete="off" /> -->
+      </el-form-item>
+       <!-- <el-form-item label="有效期" prop="有效期">
+        <el-input v-model.trim="form.有效期" autocomplete="off" />
+      </el-form-item> -->
+        
+       </template>
+        
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { distributeEdit } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          title: '',
+          author: '',
+          smallWow:'',
+          time:'',
+          author:''
+        },
+        rules: {
+            券ID: [{ required: true, trigger: 'blur', message: '请输入小哇ID' }],
+             手机号: [{ required: true, trigger: 'blur', message: '请输入时段ID' }],
+          有效期: [{ required: true, trigger: 'blur', message: '请选择时间' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        // this.$emit('fetch-data')
+      },
+      save() {
+        // console.log(this.form,'--=')
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await distributeEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
diff --git a/src/views/coupon/record/index.vue b/src/views/coupon/record/index.vue
new file mode 100644
index 0000000..09ae759
--- /dev/null
+++ b/src/views/coupon/record/index.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="table-container">
+    <!-- <vab-page-header description="功能强大的数据表格组件，支持排序、分页、搜索等功能" :icon="['fas', 'table']" title="表格管理" /> -->
+    <vab-query-form>
+      <vab-query-form-left-panel style="visibility: hidden;">
+        <el-button :disabled="true" icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button>
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入手机号" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <el-table-column  type="selection" width="55" />
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" label="记录ID" prop="记录ID"  />
+         <el-table-column align="center" label="券ID" prop="券ID"  />
+        <el-table-column align="center"  width="100" label="用户ID" prop="用户ID"  />
+      <el-table-column  align="center" width="180" label="使用状态" prop="使用状态"  />
+      <el-table-column  align="center" width="180" label="派发日期" prop="派发日期"  />
+      <el-table-column align="center"  width="180" label="到期日期" prop="到期日期"  />
+        <el-table-column align="center"  width="120" label="手机号" prop="手机号"  />
+      <!-- <el-table-column label="头像" >
+        <template #default="{ row }">
+          <el-image v-if="imgShow" :preview-src-list="imageList" :src="row.img" />
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="点击量" prop="pageViews"  sortable /> -->
+      <!-- <el-table-column label="状态" >
+        <template #default="{ row }">
+          <el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
+            <el-tag :type="row.status | statusFilter">
+              {{ row.status }}
+            </el-tag>
+          </el-tooltip>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="时间" prop="datetime"  width="200" /> -->
+      <!-- <el-table-column label="操作"  fixed="right" width="60px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleEdit(row)">派发</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, recordList } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleEdit(row) {
+        console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids: ids })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await recordList(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/coupon/redemption/components/TableEdit.vue b/src/views/coupon/redemption/components/TableEdit.vue
new file mode 100644
index 0000000..16f9ce4
--- /dev/null
+++ b/src/views/coupon/redemption/components/TableEdit.vue
@@ -0,0 +1,215 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+          this.title = '添加'
+           this.ids = false
+            this.form.券包名称='',
+            
+          this.form. 券包价格='',
+         this.form.package1 = {}
+           this.form.package2 = {}
+             this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        this.form.券包名称='',
+          this.form. 券包价格='',
+         this.form.package1 = {}
+           this.form.package2 = {}
+             this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/coupon/redemption/index.vue b/src/views/coupon/redemption/index.vue
new file mode 100644
index 0000000..d4bc164
--- /dev/null
+++ b/src/views/coupon/redemption/index.vue
@@ -0,0 +1,252 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+      <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+        <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+        <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+        <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+        <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+    <script>
+    import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+    import TableEdit from './components/TableEdit'
+    import VabPageHeader from '@/components/VabPageHeader'
+    export default {
+    name: 'ComprehensiveTable',
+    components: {
+    TableEdit,
+    VabPageHeader,
+    },
+    filters: {
+    statusFilter(status) {
+    const statusMap = {
+    published: 'success',
+    draft: 'gray',
+    deleted: 'danger',
+    }
+    return statusMap[status]
+    },
+    },
+    data() {
+    return {
+    ids:true,
+    pickerOptions: {
+    shortcuts: [{
+    text: '最近一周',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+    picker.$emit('pick', [start, end]);
+    }
+    }, 
+    {
+    text: '最近一个月',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+    picker.$emit('pick', [start, end]);
+    }
+    }, 
+    {
+    text: '最近三个月',
+    onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+    picker.$emit('pick', [start, end]);
+    }
+    }]
+    },
+    imgShow: true,
+    list: [],
+    imageList: [],
+    listLoading: true,
+    layout: 'total, sizes, prev, pager, next, jumper',
+    total: 0,
+    background: true,
+    selectRows: '',
+    elementLoadingText: '正在加载...',
+    queryForm: {
+    pageNo: 1,
+    pageSize: 20,
+    title: '',
+    },
+    timeOutID: null,
+    }
+    },
+    computed: {
+    height() {
+    return this.$baseTableHeight()
+    },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+    hdleDelete(row) {
+    if (row.券包ID) {
+    this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+    const { msg } = await deletePackage({ ids: row.券包ID })
+    this.$baseMessage(msg, 'success')
+    this.fetchData()
+    })
+    } 
+    },
+    tableSortChange() {
+    const imageList = []
+    this.$refs.tableSort.tableData.forEach((item, index) => {
+    imageList.push(item.img)
+    })
+    this.imageList = imageList
+    },
+    setSelectRows(val) {
+    this.selectRows = val
+    },
+    handleAdd() {
+    this.$refs['edit'].showEdit()
+    },
+    handleView(row,ids){
+    this.$refs['edit'].showEdit(row,ids)
+    },
+    handleEdit(row) {
+    // console.log(row,'---')
+    this.$refs['edit'].showEdit(row)
+    },
+    handleDelete() {
+    exportUserOperateAdmin().then(
+    response => {
+    window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+    }
+    ).catch(error => {
+    console.error('下载失败', error)
+    this.loading = false // 停止加载，隐藏加载状态
+    })
+    },
+    handleSizeChange(val) {
+    this.queryForm.pageSize = val
+    this.fetchData()
+    },
+    handleCurrentChange(val) {
+    this.queryForm.pageNo = val
+    this.fetchData()
+    },
+    handleQuery() {
+    this.queryForm.pageNo = 1
+    this.fetchData()
+    },
+    async fetchData() {
+    this.listLoading = true
+    const { data, total } = await couponPackage(this.queryForm)
+    this.list = data
+    const imageList = []
+    data.forEach((item, index) => {
+    imageList.push(item.img)
+    })
+    this.imageList = imageList
+    this.total = total
+    this.timeOutID = setTimeout(() => {
+    this.listLoading = false
+    }, 500)
+    },
+    testMessage() {
+    this.$baseMessage('test1', 'success')
+    },
+    testALert() {
+    this.$baseAlert('11')
+    this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+    })
+    this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+    })
+    },
+    testConfirm() {
+    this.$baseConfirm(
+    '你确定要执行该操作?',
+    null,
+    () => {
+            /* 可以写回调; */
+    },
+    () => {
+            /* 可以写回调; */
+    }
+    )
+    },
+    testNotify() {
+    this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+    },
+    },
+    }
+    </script>
diff --git a/src/views/holidays/day/components/TableEdit.vue b/src/views/holidays/day/components/TableEdit.vue
new file mode 100644
index 0000000..a559633
--- /dev/null
+++ b/src/views/holidays/day/components/TableEdit.vue
@@ -0,0 +1,214 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/holidays/day/index.vue b/src/views/holidays/day/index.vue
new file mode 100644
index 0000000..d6eb4ed
--- /dev/null
+++ b/src/views/holidays/day/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/index/components/VersionInformation.vue b/src/views/index/components/VersionInformation.vue
new file mode 100644
index 0000000..de40e73
--- /dev/null
+++ b/src/views/index/components/VersionInformation.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-card class="version-information" shadow="hover">
+    <template #header>
+      <vab-icon icon="information-line" />
+    </template>
+    <el-scrollbar>
+      <table class="table">
+        <tr>
+          <td>vue</td>
+          <td>{{ dependencies['vue'] }}</td>
+          <td>@vue/cli</td>
+          <td>{{ devDependencies['@vue/cli-service'] }}</td>
+        </tr>
+        <tr>
+          <td>vuex</td>
+          <td>{{ dependencies['vuex'] }}</td>
+          <td>vue-router</td>
+          <td>{{ dependencies['vue-router'] }}</td>
+        </tr>
+        <tr>
+          <td>element-ui</td>
+          <td>{{ dependencies['element-ui'] }}</td>
+          <td>axios</td>
+          <td>{{ dependencies['axios'] }}</td>
+        </tr>
+        <tr>
+          <td>授权渠道</td>
+          <td colspan="3">
+            <a href="https://vuejs-core.cn/authorization" target="_blank">
+              <el-button style="margin-left: 10px" type="primary">PRO付费版本 购买源码 ￥699</el-button>
+            </a>
+            <a href="https://vuejs-core.cn/authorization" target="_blank">
+              <el-button style="margin-left: 10px" type="primary">Plus付费版本 购买源码 ￥799</el-button>
+            </a>
+            <a href="https://github.com/zxwk1998/vue-admin-better/" target="_blank">
+              <el-button style="margin-left: 10px" type="warning">开源免费版</el-button>
+            </a>
+          </td>
+        </tr>
+      </table>
+    </el-scrollbar>
+  </el-card>
+</template>
+
+<script>
+  import { dependencies, devDependencies } from '../../../../package.json'
+
+  export default {
+    data() {
+      return {
+        updateTime: process.env.VUE_APP_UPDATE_TIME,
+        dependencies,
+        devDependencies,
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .version-information {
+    .table {
+      width: 100%;
+      color: #666;
+      border-collapse: collapse;
+      background-color: #fff;
+
+      td {
+        position: relative;
+        padding: 9px 15px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 20px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border: 1px solid #e6e6e6;
+
+        &:nth-child(odd) {
+          width: 20%;
+          text-align: right;
+          background-color: #f7f7f7;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
new file mode 100644
index 0000000..0a03968
--- /dev/null
+++ b/src/views/index/index.vue
@@ -0,0 +1,1506 @@
+<template>
+  <div class="index-container">
+    <el-row :gutter="20">
+      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
+        <!-- <el-alert v-if="noticeList">
+          <div style="display: flex; align-items: center; justify-content: center">
+            <a href="https://github.com/zxwk1998/vue-admin-better" target="_blank">
+              <img
+                src="https://img.shields.io/github/stars/zxwk1998/vue-admin-better?style=flat-square&label=Stars&logo=github"
+                style="margin-right: 10px"
+              />
+            </a>
+            <p v-html="noticeList.notice"></p>
+          </div>
+        </el-alert> -->
+      </el-col>
+      <!-- <el-col v-for="(item, index) in iconList" :key="index" :lg="6" :md="6" :sm="6" :xl="3" :xs="12">
+        <el-card class="icon-card" shadow="never">
+          <div class="icon-container" @click="handleIconClick(item)">
+            <div class="icon-header">
+              <div class="icon-wrapper" :style="{ background: item.color }">
+                <vab-icon :icon="['fas', item.icon]" />
+              </div>
+              <div class="icon-title">{{ item.title }}</div>
+            </div>
+            <div class="icon-content">
+              <div class="icon-description">
+                {{ getIconDescription(item.title) }}
+              </div>
+            </div>
+            <div class="icon-footer">
+              <div class="icon-stats">
+                <div class="stat-item">
+                  <vab-icon :icon="['fas', 'eye']" />
+                  <span>{{ getRandomViews() }}</span>
+                </div>
+                <div class="stat-item">
+                  <vab-icon :icon="['fas', 'heart']" />
+                  <span>{{ getRandomLikes() }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col> -->
+      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="never">
+          <div slot="header">
+            <span>访问量</span>
+          </div>
+          <div class="chart-container">
+            <div class="chart-header">
+              <div class="chart-title">
+                <span>今日新增会员数量</span>
+              </div>
+              <div class="chart-stats">
+                <div class="stat-item">
+                  <div class="stat-value">{{ count }}</div>
+                  <div class="stat-label">新增会员</div>
+                </div>
+              </div>
+            </div>
+            <!-- <div class="chart-content">
+              <vab-chart autoresize :option="fwl" />
+            </div> -->
+            <!-- <div class="chart-footer">
+              <div class="trend-info">
+                <div class="trend-item">
+                  <vab-icon class="trend-up" :icon="['fas', 'arrow-up']" />
+                  <span class="trend-text">较昨日增长 12.5%</span>
+                </div>
+                <div class="trend-item">
+                  <vab-icon class="trend-icon" :icon="['fas', 'users']" />
+                  <span class="trend-text">活跃用户 2.3K</span>
+                </div>
+              </div>
+            </div> -->
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="never">
+          <div slot="header">
+            <span>授权数</span>
+          </div>
+          <div class="chart-container">
+            <div class="chart-header">
+              <div class="chart-title">
+                <span>授权统计</span>
+              </div>
+              <div class="chart-stats">
+                <div class="stat-item">
+                  <div class="stat-value">{{ config2.endVal }}</div>
+                  <div class="stat-label">总授权数</div>
+                </div>
+              </div>
+            </div>
+            <div class="chart-content">
+              <vab-chart autoresize :option="sqs" />
+            </div>
+            <div class="chart-footer">
+              <div class="trend-info">
+                <div class="trend-item">
+                  <vab-icon class="trend-up" :icon="['fas', 'arrow-up']" />
+                  <span class="trend-text">较昨日增长 8.3%</span>
+                </div>
+                <div class="trend-item">
+                  <vab-icon class="trend-icon" :icon="['fas', 'clock']" />
+                  <span class="trend-text">今日新增 156</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="never">
+          <div slot="header">
+            <span>用户活跃度</span>
+          </div>
+          <div class="chart-container">
+            <div class="chart-header">
+              <div class="chart-title">
+                <span>用户活跃统计</span>
+              </div>
+              <div class="chart-stats">
+                <div class="stat-item">
+                  <div class="stat-value">{{ config3.endVal }}</div>
+                  <div class="stat-label">活跃用户</div>
+                </div>
+              </div>
+            </div>
+            <div class="chart-content">
+              <vab-chart autoresize :option="userActivity" />
+            </div>
+            <div class="chart-footer">
+              <div class="trend-info">
+                <div class="trend-item">
+                  <vab-icon class="trend-up" :icon="['fas', 'arrow-up']" />
+                  <span class="trend-text">较昨日增长 15.2%</span>
+                </div>
+                <div class="trend-item">
+                  <vab-icon class="trend-icon" :icon="['fas', 'clock']" />
+                  <span class="trend-text">在线时长 2.5h</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="never">
+          <div slot="header">
+            <span>系统性能</span>
+          </div>
+          <div class="chart-container">
+            <div class="chart-header">
+              <div class="chart-title">
+                <span>性能监控</span>
+              </div>
+              <div class="chart-stats">
+                <div class="stat-item">
+                  <div class="stat-value">98.5%</div>
+                  <div class="stat-label">系统可用性</div>
+                </div>
+              </div>
+            </div>
+            <div class="chart-content">
+              <vab-chart autoresize :option="systemPerformance" />
+            </div>
+            <div class="chart-footer">
+              <div class="trend-info">
+                <div class="trend-item">
+                  <vab-icon class="trend-up" :icon="['fas', 'check-circle']" />
+                  <span class="trend-text">运行正常</span>
+                </div>
+                <div class="trend-item">
+                  <vab-icon class="trend-icon" :icon="['fas', 'server']" />
+                  <span class="trend-text">响应时间 120ms</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :lg="13" :md="13" :sm="24" :xl="13" :xs="24">
+      
+      </el-col>
+      <!-- <el-col :lg="11" :md="24" :sm="24" :xl="11" :xs="24">
+        <el-card class="card" shadow="never">
+          <div slot="header">
+            <span>依赖信息</span>
+          </div>
+          <div class="rspack-info">
+            <div class="rspack-item">
+              <div class="rspack-name">Rspack版本</div>
+              <div class="rspack-version">{{ devDependencies['rspack'] }}</div>
+            </div>
+          </div>
+
+          <div class="dependency-content">
+            <div class="dependency-grid">
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Vue版本</div>
+                  <div class="dependency-version">{{ dependencies['vue'] }}</div>
+                </div>
+              </div>
+
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Vuex版本</div>
+                  <div class="dependency-version">{{ dependencies['vuex'] }}</div>
+                </div>
+              </div>
+
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Vue Router</div>
+                  <div class="dependency-version">{{ dependencies['vue-router'] }}</div>
+                </div>
+              </div>
+
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Element UI</div>
+                  <div class="dependency-version">{{ dependencies['element-ui'] }}</div>
+                </div>
+              </div>
+
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Axios版本</div>
+                  <div class="dependency-version">{{ dependencies['axios'] }}</div>
+                </div>
+              </div>
+
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">ESLint版本</div>
+                  <div class="dependency-version">{{ devDependencies['eslint'] }}</div>
+                </div>
+              </div>
+
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Prettier版本</div>
+                  <div class="dependency-version">{{ devDependencies['prettier'] }}</div>
+                </div>
+              </div>
+
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Sass版本</div>
+                  <div class="dependency-version">{{ devDependencies['sass'] }}</div>
+                </div>
+              </div>
+
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Lodash版本</div>
+                  <div class="dependency-version">{{ dependencies['lodash'] }}</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="system-info">
+              <div class="info-header">
+                <vab-icon :icon="['fas', 'info-circle']" />
+                <span>系统信息</span>
+              </div>
+              <div class="info-content">
+                <div class="info-item">
+                  <span class="info-label">构建时间:</span>
+                  <span class="info-value">{{ updateTime || '未知' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">运行环境:</span>
+                  <span class="info-value">{{ nodeEnv }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">用户代理:</span>
+                  <span class="info-value">{{ userAgent }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col> -->
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import VabChart from '@/plugins/echarts'
+  import { dependencies, devDependencies } from '../../../package.json'
+  import { getNoticeList } from '@/api/notice'
+  import { members } from '@/api/user'
+
+  export default {
+    name: 'Index',
+    components: {
+      VabChart,
+    },
+    data() {
+      return {
+        count:'',
+        timer: 0,
+        updateTime: process.env.VUE_APP_UPDATE_TIME,
+        nodeEnv: process.env.NODE_ENV,
+        dependencies: dependencies,
+        devDependencies: devDependencies,
+        config1: {
+          startVal: 0,
+          endVal: this.$baseLodash.random(20000, 60000),
+          decimals: 0,
+          prefix: '',
+          suffix: '',
+          separator: ',',
+          duration: 8000,
+        },
+        config2: {
+          startVal: 0,
+          endVal: this.$baseLodash.random(1000, 20000),
+          decimals: 0,
+          prefix: '',
+          suffix: '',
+          separator: ',',
+          duration: 8000,
+        },
+        config3: {
+          startVal: 0,
+          endVal: this.$baseLodash.random(1000, 20000),
+          decimals: 0,
+          prefix: '',
+          suffix: '',
+          separator: ',',
+          duration: 8000,
+        },
+
+        //访问量
+        fwl: {
+          color: ['#4d8af0', '#5cdbd3', '#8B5CF6', '#F59E0B', '#EC4899'],
+          backgroundColor: 'transparent',
+          grid: {
+            top: '15%',
+            left: '3%',
+            right: '4%',
+            bottom: '15%',
+            containLabel: true,
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: false,
+              data: [],
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#E4E7ED',
+                },
+              },
+              axisLabel: {
+                color: '#909399',
+                fontSize: 11,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: false,
+              },
+              axisLabel: {
+                color: '#909399',
+                fontSize: 11,
+              },
+              splitLine: {
+                lineStyle: {
+                  color: '#F5F7FA',
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          series: [
+            {
+              name: '访问量',
+              type: 'line',
+              data: [],
+              smooth: true,
+              symbol: 'circle',
+              symbolSize: 6,
+              lineStyle: {
+                width: 3,
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: '#4d8af0' },
+                    { offset: 1, color: '#4d8af0' },
+                  ],
+                },
+              },
+              itemStyle: {
+                color: '#4d8af0',
+                borderWidth: 2,
+                borderColor: '#fff',
+              },
+              areaStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: '#4d8af0' },
+                    { offset: 1, color: '#4d8af0' },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+        //授权数
+        sqs: {
+          color: ['#4d8af0', '#5cdbd3', '#8B5CF6', '#F59E0B', '#EC4899'],
+          backgroundColor: 'transparent',
+          grid: {
+            top: '15%',
+            left: '3%',
+            right: '4%',
+            bottom: '15%',
+            containLabel: true,
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['0时', '4时', '8时', '12时', '16时', '20时', '24时'],
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#E4E7ED',
+                },
+              },
+              axisLabel: {
+                color: '#909399',
+                fontSize: 11,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: false,
+              },
+              axisLabel: {
+                color: '#909399',
+                fontSize: 11,
+              },
+              splitLine: {
+                lineStyle: {
+                  color: '#F5F7FA',
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          series: [
+            {
+              name: '授权数',
+              type: 'bar',
+              barWidth: '60%',
+              data: [10, 52, 20, 33, 39, 33, 22],
+              itemStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: '#4d8af0' },
+                    { offset: 1, color: '#4d8af0' },
+                  ],
+                },
+                borderRadius: [6, 6, 0, 0],
+                shadowColor: '#4d8af0',
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowOffsetY: 5,
+              },
+              emphasis: {
+                itemStyle: {
+                  color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      { offset: 0, color: '#5A67D8' },
+                      { offset: 1, color: '#4d8af0' },
+                    ],
+                  },
+                  shadowBlur: 15,
+                  shadowColor: '#4d8af0',
+                },
+              },
+            },
+          ],
+        },
+
+        //用户活跃度
+        userActivity: {
+          color: ['#4d8af0', '#5cdbd3', '#8B5CF6', '#F59E0B', '#EC4899'],
+          backgroundColor: 'transparent',
+          grid: {
+            top: '15%',
+            left: '3%',
+            right: '4%',
+            bottom: '15%',
+            containLabel: true,
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#E4E7ED',
+                },
+              },
+              axisLabel: {
+                color: '#909399',
+                fontSize: 11,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: false,
+              },
+              axisLabel: {
+                color: '#909399',
+                fontSize: 11,
+              },
+              splitLine: {
+                lineStyle: {
+                  color: '#F5F7FA',
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          series: [
+            {
+              name: '活跃用户',
+              type: 'line',
+              data: [1200, 1350, 1100, 1400, 1600, 1800, 1500],
+              smooth: true,
+              symbol: 'circle',
+              symbolSize: 6,
+              lineStyle: {
+                width: 3,
+                color: '#4d8af0',
+              },
+              itemStyle: {
+                color: '#4d8af0',
+                borderWidth: 2,
+                borderColor: '#fff',
+              },
+              areaStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: 'rgba(77, 138, 240, 0.3)' },
+                    { offset: 1, color: 'rgba(77, 138, 240, 0.1)' },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+
+        //系统性能
+        systemPerformance: {
+          color: ['#4d8af0', '#5cdbd3', '#8B5CF6', '#F59E0B'],
+          backgroundColor: 'transparent',
+          grid: {
+            top: '15%',
+            left: '3%',
+            right: '4%',
+            bottom: '15%',
+            containLabel: true,
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['CPU', '内存', '磁盘', '网络'],
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#E4E7ED',
+                },
+              },
+              axisLabel: {
+                color: '#909399',
+                fontSize: 11,
+              },
+            },
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              max: 100,
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: false,
+              },
+              axisLabel: {
+                color: '#909399',
+                fontSize: 11,
+                formatter: '{value}%',
+              },
+              splitLine: {
+                lineStyle: {
+                  color: '#F5F7FA',
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          series: [
+            {
+              name: '使用率',
+              type: 'bar',
+              data: [45, 62, 38, 28],
+              barWidth: '50%',
+              itemStyle: {
+                color: function (params) {
+                  const colors = ['#4d8af0', '#4d8af0', '#4d8af0', '#4d8af0']
+                  return colors[params.dataIndex]
+                },
+                borderRadius: [4, 4, 0, 0],
+              },
+              label: {
+                show: true,
+                position: 'top',
+                formatter: '{c}%',
+                color: '#2c3e50',
+                fontSize: 12,
+              },
+            },
+          ],
+        },
+
+        //更新日志
+        reverse: true,
+        activities: [],
+        noticeList: [],
+        //其他信息
+        userAgent: navigator.userAgent,
+        //卡片图标
+        iconList: [
+          {
+            icon: 'video',
+            title: '视频播放器',
+            link: 'https://vuejs-core.cn/shop-vite',
+            color: '#4d8af0', // 蓝色 - 与主题色一致
+          },
+          {
+            icon: 'table',
+            title: '表格',
+            link: 'https://vuejs-core.cn/shop-vite',
+            color: '#5cdbd3', // 青色 - 清爽感
+          },
+          {
+            icon: 'laptop-code',
+            title: '源码',
+            link: 'https://github.com/zxwk1998/vue-admin-better',
+            color: '#8B5CF6', // 紫色 - 技术感
+          },
+          {
+            icon: 'book',
+            title: '书籍',
+            link: 'https://vuejs-core.cn/shop-vite',
+            color: '#F59E0B', // 琥珀色 - 知识感
+          },
+          {
+            icon: 'bullhorn',
+            title: '公告',
+            link: 'https://vuejs-core.cn/shop-vite',
+            color: '#EC4899', // 粉色 - 引人注意
+          },
+          {
+            icon: 'gift',
+            title: '礼物',
+            link: 'https://vuejs-core.cn/shop-vite',
+            color: '#10B981', // 绿色 - 礼物/积极
+          },
+          {
+            icon: 'balance-scale-left',
+            title: '公平的世界',
+            link: 'https://vuejs-core.cn/shop-vite',
+            color: '#6366F1', // 靛蓝色 - 平衡公正
+          },
+          {
+            icon: 'coffee',
+            title: '休息一下',
+            link: 'https://vuejs-core.cn/shop-vite',
+            color: '#F97316', // 橙色 - 温暖放松
+          },
+        ],
+      }
+    },
+    created() {
+      this.fetchData()
+      this.membersList()
+    },
+    beforeDestroy() {
+      clearInterval(this.timer)
+    },
+    mounted() {
+      let base = +new Date(2020, 1, 1)
+      let oneDay = 24 * 3600 * 1000
+      let date = []
+
+      let data = [Math.random() * 1500]
+      let now = new Date(base)
+
+      const addData = (shift) => {
+        now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
+        date.push(now)
+        data.push(this.$baseLodash.random(20000, 60000))
+
+        if (shift) {
+          date.shift()
+          data.shift()
+        }
+
+        now = new Date(+new Date(now) + oneDay)
+      }
+
+      for (let i = 1; i < 6; i++) {
+        addData()
+      }
+      addData(true)
+      this.fwl.xAxis[0].data = date
+      this.fwl.series[0].data = data
+      this.timer = setInterval(() => {
+        addData(true)
+        this.fwl.xAxis[0].data = date
+        this.fwl.series[0].data = data
+      }, 3000)
+    },
+    methods: {
+      handleClick(e) {
+        this.$baseMessage(`点击了${e.name},这里可以写跳转`)
+      },
+      handleZrClick() {},
+      handleChangeTheme() {
+        this.$baseEventBus.$emit('theme')
+      },
+      async fetchData() {
+        const res = await getNoticeList()
+        this.noticeList = res.data
+      },
+
+       async membersList() {
+        const res = await members()
+        this.count = res.data.count
+      },
+      handleIconClick(item) {
+        if (item.link) {
+          window.open(item.link, '_blank')
+        }
+      },
+      getIconDescription(title) {
+        const descriptions = {
+          视频播放器: '多格式视频播放',
+          表格: '强大的表格组件',
+          源码: '项目源码下载',
+          书籍: '技术文档和教程',
+          公告: '系统公告和通知',
+          礼物: '免费资源和福利',
+          公平的世界: '开源社区贡献',
+          休息一下: '享受生活',
+        }
+        return descriptions[title] || '功能模块'
+      },
+      getRandomViews() {
+        return `${this.$baseLodash.random(100, 999)}K`
+      },
+      getRandomLikes() {
+        return `${this.$baseLodash.random(10, 99)}K`
+      },
+      hexToRgb(hex) {
+        // 将十六进制颜色转换为RGB值
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+        return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : null
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .index-container {
+    padding: 0 !important;
+    margin: 0 !important;
+    background: #f5f7f8 !important;
+
+    ::v-deep {
+      .el-alert {
+        padding: $base-padding;
+
+        &--info.is-light {
+          min-height: 82px;
+          padding: $base-padding;
+          margin-bottom: 15px;
+          color: #909399;
+          background-color: $base-color-white;
+          border: 1px solid #ebeef5;
+          font-size: 14px !important;
+          * {
+            font-size: 14px !important;
+          }
+        }
+      }
+
+      .el-card__body {
+        .echarts {
+          width: 100%;
+          height: 115px;
+        }
+      }
+    }
+
+    .card {
+      height: 600px;
+      display: flex;
+      flex-direction: column;
+
+      ::v-deep {
+        .el-card__body {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+
+          .echarts {
+            width: 100%;
+            height: 305px;
+          }
+        }
+      }
+
+      .dependency-content {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+
+        .dependency-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 15px;
+          margin-bottom: 25px;
+          flex-shrink: 0;
+
+          .dependency-item {
+            display: flex;
+            align-items: center;
+            padding: 15px;
+            background: #f8f9fa;
+            border: 1px solid #e9ecef;
+            border-radius: 8px;
+            transition: all 0.3s ease;
+
+            &:hover {
+              transform: translateY(-2px);
+              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+              background: #ffffff;
+            }
+
+            .dependency-info {
+              flex: 1;
+              text-align: center;
+
+              .dependency-name {
+                font-size: 0.9rem;
+                color: #6c757d;
+                margin-bottom: 6px;
+                font-weight: 500;
+              }
+
+              .dependency-version {
+                font-size: 1.1rem;
+                color: #2c3e50;
+                font-weight: 600;
+              }
+            }
+          }
+        }
+
+        .system-info {
+          background: #f8f9fa;
+          border: 1px solid #e9ecef;
+          border-radius: 8px;
+          padding: 20px;
+          flex-shrink: 0;
+
+          .info-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid #dee2e6;
+
+            .vab-icon {
+              color: $base-color-default;
+              margin-right: 3px;
+              font-size: 1.1rem;
+            }
+
+            span {
+              font-size: 1.1rem;
+              font-weight: 600;
+              color: #2c3e50;
+            }
+          }
+
+          .info-content {
+            .info-item {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              padding: 8px 0;
+              border-bottom: 1px solid #f1f3f4;
+
+              &:last-child {
+                border-bottom: none;
+              }
+
+              .info-label {
+                color: #6c757d;
+                font-weight: 500;
+                font-size: 0.9rem;
+              }
+
+              .info-value {
+                color: #2c3e50;
+                font-weight: 600;
+                font-size: 0.9rem;
+                max-width: 60%;
+                text-align: right;
+                word-break: break-all;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .bottom {
+      padding-top: 20px;
+      margin-top: 5px;
+      color: #595959;
+      text-align: left;
+      border-top: 1px solid $base-border-color;
+    }
+
+    .table {
+      width: 100%;
+      color: #666;
+      border-collapse: collapse;
+      background-color: #fff;
+
+      td {
+        position: relative;
+        min-height: 20px;
+        padding: 9px 15px;
+        font-size: 14px;
+        line-height: 20px;
+        border: 1px solid #e6e6e6;
+
+        &:nth-child(odd) {
+          width: 20%;
+          text-align: right;
+          background-color: #f7f7f7;
+        }
+      }
+    }
+
+    .icon-panel {
+      height: 117px;
+      text-align: center;
+      cursor: pointer;
+
+      svg {
+        font-size: 40px;
+      }
+
+      p {
+        margin-top: 10px;
+      }
+    }
+
+    .bottom-btn {
+      button {
+        margin: 5px 10px 15px 0;
+      }
+    }
+
+    // 高级信息卡片样式
+    .advanced-info-card {
+      height: 600px;
+      overflow: hidden;
+
+      .advanced-content {
+        height: 100%;
+        background: #ffffff;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+
+        .logo-section {
+          text-align: center;
+          margin-bottom: 30px;
+          flex-shrink: 0;
+
+          .logo-container {
+            position: relative;
+            display: inline-block;
+            margin-bottom: 20px;
+
+            .logo-glow {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              width: 140px;
+              height: 140px;
+              background: radial-gradient(circle, rgba($base-color-default, 0.1) 0%, transparent 70%);
+              border-radius: 50%;
+              animation: pulse 2s ease-in-out infinite;
+            }
+          }
+
+          .project-title {
+            font-size: 2rem;
+            font-weight: 700;
+            color: #2c3e50;
+            margin: 0 0 10px 0;
+          }
+
+          .project-description {
+            color: #7f8c8d;
+            font-size: 1rem;
+            margin: 0;
+          }
+        }
+
+        .stats-section {
+          display: flex;
+          justify-content: space-around;
+          margin-bottom: 30px;
+          padding: 20px;
+          background: #f8f9fa;
+          flex-shrink: 0;
+
+          .stat-card {
+            text-align: center;
+            padding: 15px;
+            transition: all 0.3s ease;
+
+            .stat-icon {
+              width: 50px;
+              height: 50px;
+              background: linear-gradient(135deg, $base-color-default 0%, darken($base-color-default, 10%) 100%);
+              border-radius: 12px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin: 0 auto 10px;
+              color: white;
+              font-size: 1.2rem;
+            }
+
+            .stat-info {
+              .stat-number {
+                font-size: 1.5rem;
+                font-weight: 700;
+                color: #2c3e50;
+                margin-bottom: 5px;
+              }
+
+              .stat-label {
+                font-size: 0.9rem;
+                color: #7f8c8d;
+              }
+            }
+          }
+        }
+
+        .action-section {
+          flex: 1;
+          overflow-y: auto;
+
+          .action-group {
+            margin-bottom: 25px;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
+            .action-title {
+              font-size: 1.1rem;
+              font-weight: 600;
+              color: #2c3e50;
+              margin: 0 0 15px 0;
+              padding-bottom: 8px;
+              border-bottom: 2px solid #ecf0f1;
+            }
+
+            .action-buttons {
+              display: flex;
+              flex-wrap: wrap;
+              gap: 15px;
+
+              .action-btn {
+                flex: 1;
+                min-width: 200px;
+                height: 45px;
+                border-radius: 10px;
+                font-weight: 600;
+                transition: all 0.3s ease;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 8px;
+
+                &:hover {
+                  transform: translateY(-2px);
+                  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+                }
+
+                &.primary-btn {
+                  background: $base-color-default;
+                  border: none;
+                  color: white;
+
+                  &:hover {
+                    background: darken($base-color-default, 5%);
+                  }
+                }
+
+                &.premium-btn {
+                  background: linear-gradient(45deg, #f093fb, #f5576c);
+                  border: none;
+                  color: white;
+
+                  &:hover {
+                    background: linear-gradient(45deg, #e085e7, #e54b5f);
+                  }
+                }
+              }
+
+              .premium-card {
+                flex: 1;
+                min-width: 180px;
+                background: linear-gradient(135deg, $base-color-default 0%, darken($base-color-default, 10%) 100%);
+                border-radius: 15px;
+                padding: 20px;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                position: relative;
+                overflow: hidden;
+                color: white;
+                border: none;
+
+                &:hover {
+                  transform: translateY(-5px);
+                  box-shadow: 0 10px 25px rgba($base-color-default, 0.3);
+                }
+
+                &.featured {
+                  background: linear-gradient(135deg, #e6a23c 0%, #f56c6c 100%);
+
+                  &:hover {
+                    box-shadow: 0 10px 25px rgba(230, 162, 60, 0.3);
+                  }
+
+                  .premium-badge {
+                    background: rgba(255, 255, 255, 0.2);
+                    color: #fff;
+                  }
+                }
+
+                .premium-header {
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                  margin-bottom: 15px;
+
+                  .premium-icon {
+                    font-size: 1.5rem;
+                    color: rgba(255, 255, 255, 0.9);
+                  }
+
+                  .premium-badge {
+                    background: rgba(255, 255, 255, 0.2);
+                    color: rgba(255, 255, 255, 0.9);
+                    padding: 4px 8px;
+                    border-radius: 12px;
+                    font-size: 0.7rem;
+                    font-weight: 600;
+                    letter-spacing: 0.5px;
+                  }
+                }
+
+                .premium-content {
+                  .premium-title {
+                    font-size: 1.1rem;
+                    font-weight: 700;
+                    margin-bottom: 8px;
+                    color: white;
+                  }
+
+                  .premium-price {
+                    font-size: 1.3rem;
+                    font-weight: 800;
+                    margin-bottom: 5px;
+                    color: white;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // 图表容器高级样式
+    .chart-container {
+      height: 200px;
+      display: flex;
+      flex-direction: column;
+
+      .chart-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 15px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #f0f0f0;
+        flex-shrink: 0;
+
+        .chart-title {
+          display: flex;
+          align-items: center;
+          font-size: 1rem;
+          font-weight: 600;
+          color: #2c3e50;
+
+          .vab-icon {
+            color: $base-color-default;
+            margin-right: 3px;
+            font-size: 1.1rem;
+          }
+        }
+
+        .chart-stats {
+          .stat-item {
+            text-align: right;
+
+            .stat-value {
+              font-size: 1.5rem;
+              font-weight: 700;
+              color: #2c3e50;
+              line-height: 1;
+            }
+
+            .stat-label {
+              font-size: 0.8rem;
+              color: #7f8c8d;
+              margin-top: 2px;
+            }
+          }
+        }
+      }
+
+      .chart-content {
+        flex: 1;
+        margin-bottom: 15px;
+        min-height: 0;
+
+        .echarts {
+          height: 100% !important;
+          min-height: 120px;
+        }
+      }
+
+      .chart-footer {
+        flex-shrink: 0;
+        padding-top: 15px;
+        padding-bottom: 5px;
+
+        .trend-info {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .trend-item {
+            display: flex;
+            align-items: center;
+            font-size: 0.85rem;
+
+            .trend-up {
+              color: #8b5cf6;
+              margin-right: 3px;
+              font-size: 0.8rem;
+            }
+
+            .trend-icon {
+              color: $base-color-default;
+              margin-right: 3px;
+              font-size: 0.8rem;
+            }
+
+            .trend-text {
+              color: #7f8c8d;
+            }
+          }
+        }
+      }
+    }
+
+    // 图表卡片固定高度
+    .el-card {
+      height: 280px;
+      display: flex;
+      flex-direction: column;
+
+      ::v-deep {
+        .el-card__body {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+      }
+    }
+
+    // 高级信息卡片和依赖信息卡片不受影响
+    .advanced-info-card,
+    .card {
+      height: auto !important;
+    }
+
+    // 图标卡片高级样式
+    .icon-card {
+      height: 200px;
+      display: flex;
+      flex-direction: column;
+      border: none;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+      transition: all 0.4s ease;
+      background: #ffffff;
+
+      &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+      }
+
+      .icon-container {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        padding: 20px 15px;
+
+        .icon-header {
+          text-align: center;
+          margin-bottom: 15px;
+          flex-shrink: 0;
+
+          .icon-wrapper {
+            width: 64px;
+            height: 64px;
+            border-radius: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 12px;
+            color: white;
+            font-size: 1.8rem;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          }
+
+          .icon-title {
+            font-size: 1.05rem;
+            font-weight: 600;
+            color: #2c3e50;
+            margin: 0;
+            letter-spacing: 0.3px;
+          }
+        }
+
+        .icon-content {
+          flex: 1;
+          margin-bottom: 15px;
+          min-height: 0;
+
+          .icon-description {
+            font-size: 0.9rem;
+            color: #7f8c8d;
+            text-align: center;
+            line-height: 1.5;
+            padding: 0 5px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+
+        .icon-footer {
+          flex-shrink: 0;
+
+          .icon-stats {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            padding: 10px 0;
+            border-top: 1px solid #f0f0f0;
+
+            .stat-item {
+              display: flex;
+              align-items: center;
+              font-size: 0.85rem;
+              color: #7f8c8d;
+
+              .vab-icon {
+                margin-right: 4px;
+                font-size: 0.8rem;
+              }
+
+              span {
+                font-weight: 500;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 动画
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 0.5;
+      transform: translate(-50%, -50%) scale(1);
+    }
+    50% {
+      opacity: 0.8;
+      transform: translate(-50%, -50%) scale(1.1);
+    }
+  }
+</style>
diff --git a/src/views/information/components/TableEdit.vue b/src/views/information/components/TableEdit.vue
new file mode 100644
index 0000000..aea1ad3
--- /dev/null
+++ b/src/views/information/components/TableEdit.vue
@@ -0,0 +1,214 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加3'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/information/index.vue b/src/views/information/index.vue
new file mode 100644
index 0000000..4ec9553
--- /dev/null
+++ b/src/views/information/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加3</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000..68d9b2c
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,919 @@
+<template>
+  <div class="login-container">
+    <div class="login-background">
+      <div class="background-overlay"></div>
+      <div class="floating-shapes">
+        <div class="shape shape-1"></div>
+        <div class="shape shape-2"></div>
+        <div class="shape shape-3"></div>
+        <div class="shape shape-4"></div>
+      </div>
+    </div>
+    <el-dialog :title="'修改密码'" :visible.sync="dialogFormVisible" width="500px" @close="close">
+        <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+          <el-row >
+  <el-col :span="22">
+   <el-form-item  label-width="100px" label="输入新密码" prop="输入新密码">
+    <div style="display: flex;">
+    <el-input
+    v-model.trim="form.newPassword"
+    class="custom-input"
+    placeholder="请输入新密码"
+    tabindex="2"
+    :type="passwordType"
+    />
+    </div>
+    </el-form-item>
+    </el-col>
+    </el-row>
+    </template>
+    </el-form>
+       <div slot="footer" class="dialog-footer" >
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+    <div class="login-content">
+      <!-- <div class="login-left">
+        <div class="welcome-section">
+          <div class="logo-container">
+            <div class="logo-icon">
+              <i class="el-icon-s-platform"></i>
+            </div>
+            <h1 class="logo-text">{{ title }}</h1>
+          </div>
+          <h2 class="welcome-title">欢迎回来</h2>
+          <p class="welcome-subtitle">登录您的账户以继续访问系统</p>
+          <div class="feature-list">
+            <div class="feature-item">
+              <i class="el-icon-check"></i>
+              <span>现代化的管理界面</span>
+            </div>
+            <div class="feature-item">
+              <i class="el-icon-check"></i>
+              <span>强大的功能模块</span>
+            </div>
+            <div class="feature-item">
+              <i class="el-icon-check"></i>
+              <span>安全可靠的数据保护</span>
+            </div>
+          </div>
+        </div>
+      </div> -->
+
+      <div class="login-right">
+        <div class="login-card">
+          <div class="card-header">
+            <h3 class="login-title">用户登录</h3>
+            <p class="login-subtitle">请输入您的账户信息</p>
+          </div>
+
+          <el-form ref="form" class="login-form" label-position="left" :model="form" :rules="rules">
+            <el-form-item class="form-item" prop="username">
+              <div class="input-wrapper">
+                <div class="input-icon">
+                  <i class="el-icon-user"></i>
+                </div>
+                <el-input v-model.trim="form.username" v-focus class="custom-input" placeholder="请输入用户名" tabindex="1" type="text" />
+              </div>
+            </el-form-item>
+            <el-form-item class="form-item" prop="password">
+              <div class="input-wrapper">
+                <div class="input-icon">
+                  <i class="el-icon-lock"></i>
+                </div>
+                <el-input
+                  :key="passwordType"
+                  ref="password"
+                  v-model.trim="form.password"
+                  class="custom-input"
+                  placeholder="请输入密码"
+                  tabindex="2"
+                  :type="passwordType"
+                  @keyup.enter.native="handleLogin"
+                />
+                <div class="password-toggle" @click="handlePassword">
+                  <i :class="passwordType === 'password' ? 'el-icon-view' : 'el-icon-hide'"></i>
+                </div>
+              </div>
+            </el-form-item>
+
+            <!-- <div class="form-options">
+              <el-checkbox v-model="rememberMe">记住我</el-checkbox>
+              <a class="forgot-link" @click="dialogFormVisible = true " href="#">修改密码？</a>
+            </div> -->
+
+            <el-button class="login-btn" :loading="loading" type="primary" @click="handleLogin">
+              <span v-if="!loading">登录</span>
+              <span v-else>登录中...</span>
+            </el-button>
+
+            <!-- <div class="register-link">
+              <span>还没有账户？</span>
+              <router-link class="link" to="/register">立即注册</router-link>
+            </div> -->
+          </el-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { isPassword } from '@/utils/validate'
+ import CryptoJS from 'crypto-js';
+
+  export default {
+    name: 'Login',
+    directives: {
+      focus: {
+        inserted(el) {
+          el.querySelector('input').focus()
+        },
+      },
+    },
+    data() {
+      const validateusername = (rule, value, callback) => {
+        if ('' == value) {
+          callback(new Error('用户名不能为空'))
+        } else {
+          callback()
+        }
+      }
+      const validatePassword = (rule, value, callback) => {
+        if (!isPassword(value)) {
+          callback(new Error('密码不能少于6位'))
+        } else {
+          callback()
+        }
+      }
+      return {
+        dialogFormVisible:false,
+        nodeEnv: process.env.NODE_ENV,
+        title: this.$baseTitle,
+        form: {
+          username: '',
+          password: '',
+        },
+        rules: {
+          username: [
+            {
+              required: true,
+              trigger: 'blur',
+              validator: validateusername,
+            },
+          ],
+          password: [
+            {
+              required: true,
+              trigger: 'blur',
+              validator: validatePassword,
+            },
+          ],
+        },
+        loading: false,
+        secretKey:'',
+        passwordType: 'password',
+        redirect: undefined,
+        timeOutID: null,
+        rememberMe: false,
+      }
+    },
+    watch: {
+      $route: {
+        handler(route) {
+          this.redirect = (route.query && route.query.redirect) || '/'
+        },
+        immediate: true,
+      },
+    },
+    created() {
+      document.body.style.overflow = 'hidden'
+    },
+    beforeDestroy() {
+      document.body.style.overflow = 'auto'
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {
+      // this.form.username = 'admin'
+      // this.form.password = '123456'
+      // this.timeOutID = setTimeout(() => {
+      //   this.handleLogin()
+      // }, 8000)
+    },
+    methods: {
+       close() {
+        this.dialogFormVisible = false
+        this.form.newPassword = ''
+      },
+      save(){
+         this.dialogFormVisible = false
+          this.form.newPassword = ''
+      },
+      handlePassword() {
+        this.passwordType === 'password' ? (this.passwordType = '') : (this.passwordType = 'password')
+        this.$nextTick(() => {
+          this.$refs.password.focus()
+        })
+      },
+      handleLogin() {
+        this.$refs.form.validate((valid) => {
+        if (valid) {
+        this.loading = true
+        var key = '12345678900';//前后端约定好的秘钥
+        var keyHex = CryptoJS.enc.Utf8.parse(key);
+        var encrypted = CryptoJS.AES.encrypt(this.form.password, keyHex, {
+            mode: CryptoJS.mode.ECB,
+            padding: CryptoJS.pad.Pkcs7
+        });
+        this.form.password = encrypted.toString()
+        // console.log(encrypted.toString(),'???')
+          //  const  password = encrypted
+            // console.log(encrypted,'--')
+            this.$store.dispatch('user/login', this.form)
+              .then(() => {
+                const routerPath = this.redirect === '/404' || this.redirect === '/401' ? '/' : this.redirect
+                this.$router.push(routerPath).catch(() => {})
+                this.loading = false
+              })
+              .catch(() => {
+                this.loading = false
+              })
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .login-container {
+    position: relative;
+    height: 100vh;
+    overflow: hidden;
+    background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+   
+
+    .login-background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+
+      .background-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(10px);
+      }
+
+      .floating-shapes {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+
+        .shape {
+          position: absolute;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.1);
+          animation: float 6s ease-in-out infinite;
+
+          &.shape-1 {
+            width: 80px;
+            height: 80px;
+            top: 20%;
+            left: 10%;
+            animation-delay: 0s;
+          }
+
+          &.shape-2 {
+            width: 120px;
+            height: 120px;
+            top: 60%;
+            right: 10%;
+            animation-delay: 2s;
+          }
+
+          &.shape-3 {
+            width: 60px;
+            height: 60px;
+            top: 40%;
+            right: 20%;
+            animation-delay: 4s;
+          }
+
+          &.shape-4 {
+            width: 100px;
+            height: 100px;
+            bottom: 20%;
+            left: 20%;
+            animation-delay: 1s;
+          }
+        }
+      }
+    }
+
+    .login-content {
+      position: relative;
+      z-index: 2;
+      display: flex;
+      width: 35%; 
+      max-width: 1200px;
+       min-width: 300px;
+      height: 500px;
+      background: rgba(255, 255, 255, 0.95);
+      border-radius: 20px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+      backdrop-filter: blur(20px);
+      overflow: hidden;
+
+      .login-left {
+        flex: 1;
+        background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
+        color: white;
+        padding: 60px 40px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+          opacity: 0.3;
+        }
+
+        .welcome-section {
+          position: relative;
+          z-index: 1;
+
+          .logo-container {
+            display: flex;
+            align-items: center;
+            margin-bottom: 40px;
+
+            .logo-icon {
+              width: 60px;
+              height: 60px;
+              background: rgba(255, 255, 255, 0.2);
+              border-radius: 15px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-right: 20px;
+              backdrop-filter: blur(10px);
+
+              i {
+                font-size: 30px;
+                color: white;
+              }
+            }
+
+            .logo-text {
+              font-size: 28px;
+              font-weight: 700;
+              margin: 0;
+              background: linear-gradient(45deg, #fff, #f0f0f0);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              background-clip: text;
+            }
+          }
+
+          .welcome-title {
+            font-size: 36px;
+            font-weight: 700;
+            margin: 0 0 16px 0;
+            line-height: 1.2;
+          }
+
+          .welcome-subtitle {
+            font-size: 18px;
+            opacity: 0.9;
+            margin: 0 0 40px 0;
+            line-height: 1.5;
+          }
+
+          .feature-list {
+            .feature-item {
+              display: flex;
+              align-items: center;
+              margin-bottom: 20px;
+              font-size: 16px;
+
+              i {
+                width: 24px;
+                height: 24px;
+                background: rgba(255, 255, 255, 0.2);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-right: 16px;
+                font-size: 12px;
+              }
+
+              span {
+                font-weight: 500;
+              }
+            }
+          }
+        }
+      }
+
+      .login-right {
+        flex: 1;
+        padding: 60px 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .login-card {
+          width: 100%;
+          max-width: 400px;
+
+          .card-header {
+            text-align: center;
+            margin-bottom: 40px;
+
+            .login-title {
+              font-size: 28px;
+              font-weight: 700;
+              color: #333;
+              margin: 0 0 8px 0;
+            }
+
+            .login-subtitle {
+              font-size: 16px;
+              color: #666;
+              margin: 0;
+            }
+          }
+
+          .login-form {
+            .form-item {
+              margin-bottom: 16px;
+
+              .input-wrapper {
+                position: relative;
+                display: flex;
+                align-items: center;
+
+                .input-icon {
+                  position: absolute;
+                  left: 16px;
+                  z-index: 2;
+                  width: 20px;
+                  height: 20px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  color: #999;
+                  font-size: 16px;
+                }
+
+                .custom-input {
+                  ::v-deep .el-input__inner {
+                    height: 46px;
+                    padding-left: 50px;
+                    padding-right: 50px;
+                    border: 2px solid #f0f0f0;
+                    border-radius: 12px;
+                    font-size: 16px;
+                    background: #fafafa;
+                    transition: all 0.3s ease;
+
+                    &:focus {
+                      border-color: #4d8af0;
+                      background: white;
+                      box-shadow: 0 0 0 3px rgba(77, 138, 240, 0.1);
+                    }
+
+                    &::placeholder {
+                      color: #999;
+                    }
+                  }
+                }
+
+                .password-toggle {
+                  position: absolute;
+                  right: 16px;
+                  z-index: 2;
+                  width: 20px;
+                  height: 20px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  color: #999;
+                  cursor: pointer;
+                  transition: color 0.3s ease;
+
+                  &:hover {
+                    color: #4d8af0;
+                  }
+
+                  i {
+                    font-size: 16px;
+                  }
+                }
+              }
+            }
+
+            .form-options {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 20px;
+
+              .forgot-link {
+                color: #667eea;
+                text-decoration: none;
+                font-size: 14px;
+                transition: color 0.3s ease;
+
+                &:hover {
+                  color: #1a56db;
+                }
+              }
+            }
+
+            .login-btn {
+              width: 100%;
+              height: 50px;
+              background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
+              border: none;
+              border-radius: 12px;
+              font-size: 16px;
+              font-weight: 600;
+              color: white;
+              cursor: pointer;
+              transition: all 0.3s ease;
+              margin-bottom: 24px;
+
+              &:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 8px 20px rgba(77, 138, 240, 0.3);
+              }
+
+              &:active {
+                transform: translateY(0);
+              }
+            }
+
+            .register-link {
+              text-align: center;
+              font-size: 14px;
+              color: #666;
+
+              .link {
+                color: #4d8af0;
+                text-decoration: none;
+                font-weight: 600;
+                margin-left: 4px;
+                transition: color 0.3s ease;
+
+                &:hover {
+                  color: #1a56db;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0px) rotate(0deg);
+    }
+    50% {
+      transform: translateY(-20px) rotate(180deg);
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .login-container {
+      padding: 15px;
+
+      .login-content {
+        flex-direction: column;
+        height: auto;
+        max-height: 90vh;
+        overflow-y: auto;
+        margin: 10px;
+        border-radius: 16px;
+        max-width: 43%;
+
+        .login-left {
+          padding: 25px 20px;
+          text-align: center;
+          // 不完全隐藏，而是简化显示
+
+          .welcome-section {
+            .logo-container {
+              justify-content: center;
+              margin-bottom: 15px;
+
+              .logo-icon {
+                width: 40px;
+                height: 40px;
+                border-radius: 10px;
+
+                i {
+                  font-size: 20px;
+                }
+              }
+
+              .logo-text {
+                font-size: 22px;
+              }
+            }
+
+            .welcome-title {
+              font-size: 24px;
+              margin-bottom: 10px;
+            }
+
+            .welcome-subtitle {
+              font-size: 14px;
+              margin-bottom: 20px;
+            }
+
+            // 在手机端隐藏功能列表
+            .feature-list {
+              display: none;
+            }
+          }
+        }
+
+        .login-right {
+          padding: 25px 20px;
+
+          .login-card {
+            .card-header {
+              margin-bottom: 25px;
+
+              .login-title {
+                font-size: 22px;
+              }
+
+              .login-subtitle {
+                font-size: 14px;
+              }
+            }
+
+            .login-form {
+              .form-item {
+                margin-bottom: 20px;
+
+                .input-wrapper {
+                  .custom-input {
+                    ::v-deep .el-input__inner {
+                      height: 45px;
+                      font-size: 14px;
+                    }
+                  }
+                }
+              }
+
+              .form-options {
+                margin-bottom: 25px;
+                flex-wrap: wrap;
+                gap: 10px;
+
+                .forgot-link {
+                  font-size: 13px;
+                }
+              }
+
+              .login-btn {
+                height: 45px;
+                font-size: 15px;
+                margin-bottom: 20px;
+              }
+            }
+          }
+        }
+      }
+
+      // 调整浮动形状在手机端的位置和大小
+      .login-background {
+        .floating-shapes {
+          .shape {
+            &.shape-1 {
+              width: 50px;
+              height: 50px;
+            }
+
+            &.shape-2 {
+              width: 70px;
+              height: 70px;
+            }
+
+            &.shape-3 {
+              width: 40px;
+              height: 40px;
+            }
+
+            &.shape-4 {
+              width: 60px;
+              height: 60px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 添加更小屏幕的适配
+  @media (max-width: 480px) {
+    .login-container {
+      .login-content {
+        margin: 5px;
+        border-radius: 12px;
+
+        // 在非常小的屏幕上隐藏左侧内容
+        .login-left {
+          display: none;
+        }
+
+        .login-right {
+          padding: 25px 15px;
+
+          .login-card {
+            .login-form {
+              .form-item {
+                .input-wrapper {
+                  .input-icon {
+                    left: 12px;
+                  }
+
+                  .custom-input {
+                    ::v-deep .el-input__inner {
+                      padding-left: 40px;
+                      border-radius: 10px;
+                    }
+                  }
+                }
+              }
+
+              .login-btn {
+                border-radius: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 添加横屏模式的适配
+  @media (max-height: 600px) and (orientation: landscape) {
+    .login-container {
+      .login-content {
+        flex-direction: row;
+        height: auto;
+        max-height: 90vh;
+
+        .login-left {
+          padding: 20px;
+
+          .welcome-section {
+            .logo-container {
+              margin-bottom: 10px;
+
+              .logo-icon {
+                width: 35px;
+                height: 35px;
+
+                i {
+                  font-size: 18px;
+                }
+              }
+
+              .logo-text {
+                font-size: 18px;
+              }
+            }
+
+            .welcome-title {
+              font-size: 20px;
+              margin-bottom: 5px;
+            }
+
+            .welcome-subtitle {
+              font-size: 12px;
+              margin-bottom: 10px;
+            }
+
+            .feature-list {
+              display: none;
+            }
+          }
+        }
+
+        .login-right {
+          padding: 20px;
+
+          .login-card {
+            .card-header {
+              margin-bottom: 15px;
+
+              .login-title {
+                font-size: 20px;
+              }
+
+              .login-subtitle {
+                font-size: 12px;
+              }
+            }
+
+            .login-form {
+              .form-item {
+                margin-bottom: 12px;
+
+                .input-wrapper {
+                  .custom-input {
+                    ::v-deep .el-input__inner {
+                      height: 40px;
+                    }
+                  }
+                }
+              }
+
+              .form-options {
+                margin-bottom: 15px;
+              }
+
+              .login-btn {
+                height: 40px;
+                margin-bottom: 12px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 针对iPhone SE等超小屏幕设备的特殊适配
+  @media (max-width: 375px) {
+    .login-container {
+      padding: 10px;
+
+      .login-content {
+        margin: 0;
+        border-radius: 10px;
+
+        .login-right {
+          padding: 20px 15px;
+
+          .login-card {
+            .card-header {
+              margin-bottom: 20px;
+
+              .login-title {
+                font-size: 20px;
+              }
+            }
+
+            .login-form {
+              .form-item {
+                margin-bottom: 15px;
+              }
+
+              .form-options {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/mall/additional/components/TableEdit.vue b/src/views/mall/additional/components/TableEdit.vue
new file mode 100644
index 0000000..acb86ab
--- /dev/null
+++ b/src/views/mall/additional/components/TableEdit.vue
@@ -0,0 +1,83 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template >
+      <el-form-item label="项目价格" prop="项目价格">
+        <el-input v-model.trim="form.项目价格" autocomplete="off" />
+      </el-form-item>
+       </template>
+       
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { additionalEdit } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          title: '',
+          author: '',
+          smallWow:'',
+          time:'',
+          author:''
+        },
+        rules: {
+          车辆ID: [{ required: true, trigger: 'blur', message: '请输入车辆ID' }],
+            小哇ID: [{ required: true, trigger: 'blur', message: '请输入小哇ID' }],
+             时段ID: [{ required: true, trigger: 'blur', message: '请输入时段ID' }],
+          预约日期: [{ required: true, trigger: 'blur', message: '请选择时间' }],
+          订单状态: [{ required: true, trigger: 'blur', message: '请选择状态' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        // this.$emit('fetch-data')
+      },
+      save() {
+        // console.log(this.form,'--=')
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await additionalEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/additional/index.vue b/src/views/mall/additional/index.vue
new file mode 100644
index 0000000..a321585
--- /dev/null
+++ b/src/views/mall/additional/index.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="table-container">
+    <!-- <vab-page-header description="功能强大的数据表格组件，支持排序、分页、搜索等功能" :icon="['fas', 'table']" title="表格管理" /> -->
+    <vab-query-form>
+      <vab-query-form-left-panel style="visibility: hidden;">
+        <el-button :disabled="true" icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button>
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入项目名称,种类,体重ID" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <el-table-column  type="selection" width="55" />
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" label="项目名称" prop="项目名称"  />
+      <el-table-column  align="center" width="180" label="项目ID" prop="项目ID"  />
+      <el-table-column  align="center" width="120" label="种类" prop="种类"  />
+      <el-table-column align="center"  width="100" label="长短毛" prop="长短毛"  />
+      <el-table-column align="center" label="品种名称" prop="品种名称"  />
+        <el-table-column align="center"  width="120" label="品种ID" prop="品种ID"  />
+        <el-table-column align="center" width="200" label="体重名称" prop="体重名称"  />
+        <el-table-column align="center"  width="100" label="体重ID" prop="体重ID"  />
+          <el-table-column align="center"  width="100" label="项目价格" prop="项目价格"  />
+        <el-table-column align="center"  width="180" label="项目类型" prop="项目类型"  />
+      <!-- <el-table-column label="头像" >
+        <template #default="{ row }">
+          <el-image v-if="imgShow" :preview-src-list="imageList" :src="row.img" />
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="点击量" prop="pageViews"  sortable /> -->
+      <!-- <el-table-column label="状态" >
+        <template #default="{ row }">
+          <el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
+            <el-tag :type="row.status | statusFilter">
+              {{ row.status }}
+            </el-tag>
+          </el-tooltip>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="时间" prop="datetime"  width="200" /> -->
+      <el-table-column label="操作"  fixed="right" width="60px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <!-- <el-button type="text" @click="handleDelete(row)">删除</el-button> -->
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, additional } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleEdit(row) {
+        console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids: ids })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await additional(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/archive/components/TableEdit.vue b/src/views/mall/archive/components/TableEdit.vue
new file mode 100644
index 0000000..68df2dc
--- /dev/null
+++ b/src/views/mall/archive/components/TableEdit.vue
@@ -0,0 +1,108 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template v-if="form.status == '2' ">
+      <el-form-item label="车辆ID" prop="车辆ID">
+        <el-input v-model.trim="form.车辆ID" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="小哇ID" prop="小哇ID">
+        <el-input v-model.trim="form.小哇ID" autocomplete="off" />
+      </el-form-item>
+       <el-form-item label="时段ID" prop="时段ID">
+        <el-input v-model.trim="form.时段ID" autocomplete="off" />
+      </el-form-item>
+          <el-form-item label="预约日期" prop="预约日期">
+             <el-date-picker
+      v-model="form.预约日期"
+      style="width:350px;"
+      type="date"
+      value-format="yyyy-MM-dd"
+      placeholder="选择日期">
+    </el-date-picker>
+        <!-- <el-input v-model.trim="form.预约日期" autocomplete="off" /> -->
+      </el-form-item>
+       </template>
+         <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item>
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          title: '',
+          author: '',
+          smallWow:'',
+          time:'',
+          author:''
+        },
+        rules: {
+          车辆ID: [{ required: true, trigger: 'blur', message: '请输入车辆ID' }],
+            小哇ID: [{ required: true, trigger: 'blur', message: '请输入小哇ID' }],
+             时段ID: [{ required: true, trigger: 'blur', message: '请输入时段ID' }],
+          预约日期: [{ required: true, trigger: 'blur', message: '请选择时间' }],
+          订单状态: [{ required: true, trigger: 'blur', message: '请选择状态' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        // this.$emit('fetch-data')
+      },
+      save() {
+        // console.log(this.form,'--=')
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/archive/index.vue b/src/views/mall/archive/index.vue
new file mode 100644
index 0000000..4ba020c
--- /dev/null
+++ b/src/views/mall/archive/index.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="table-container">
+    <!-- <vab-page-header description="功能强大的数据表格组件，支持排序、分页、搜索等功能" :icon="['fas', 'table']" title="表格管理" /> -->
+    <vab-query-form>
+      <vab-query-form-left-panel style="visibility: hidden;">
+        <el-button :disabled="true" icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button>
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入手机号或品种ID" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <el-table-column  type="selection" width="55" />
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="100" label="用户ID" prop="用户ID"  />
+       <el-table-column align="center" width="100" label="体重ID" prop="体重ID"  />
+      <el-table-column  align="center" width="100" label="品种ID" prop="品种ID"  />
+      <el-table-column  align="center" width="100" label="宠物ID" prop="宠物ID"  />
+        <el-table-column align="center"  width="160" label="体重名称" prop="体重名称"  />
+        <el-table-column align="center" width="160" label="品种名称" prop="品种名称"  />
+        <el-table-column align="center"  width="100" label="宠物年龄" prop="宠物年龄"  />
+          <el-table-column align="center"  width="100" label="宠物昵称" prop="宠物昵称"  />
+            <el-table-column align="center"  width="120" label="手机号" prop="手机号"  />
+        <el-table-column align="center"  width="180" label="种类" prop="种类"  />
+          <el-table-column align="center"  width="120" label="长短毛" prop="长短毛"  />
+      <!-- <el-table-column label="头像" >
+        <template #default="{ row }">
+          <el-image v-if="imgShow" :preview-src-list="imageList" :src="row.img" />
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="点击量" prop="pageViews"  sortable /> -->
+      <!-- <el-table-column label="状态" >
+        <template #default="{ row }">
+          <el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
+            <el-tag :type="row.status | statusFilter">
+              {{ row.status }}
+            </el-tag>
+          </el-tooltip>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="时间" prop="datetime"  width="200" /> -->
+      <!-- <el-table-column label="操作"  fixed="right" width="60px">
+        <template #default="{ row }">
+          <el-button v-if="row.订单状态 == '已派单' || row.订单状态 == '已支付'  " type="text" @click="handleEdit(row)">编辑</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, archiveList } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleEdit(row) {
+        console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids: ids })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await archiveList(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/doorOrder/components/TableEdit.vue b/src/views/mall/doorOrder/components/TableEdit.vue
new file mode 100644
index 0000000..487b91c
--- /dev/null
+++ b/src/views/mall/doorOrder/components/TableEdit.vue
@@ -0,0 +1,145 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template v-if="form.订单状态 == '2' ">
+      <el-form-item label="车辆ID" prop="车辆ID">
+        <el-input v-model.trim="form.车辆ID" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="小哇ID"   prop="小哇ID">
+        <el-select v-model="form.小哇ID"  style="width:350px;" placeholder="请选择">
+    <el-option
+      v-for="item in options2"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+        <!-- <el-input v-model.trim="form.小哇ID" autocomplete="off" /> -->
+      </el-form-item>
+       <el-form-item label="时段ID" prop="时段ID">
+        <el-input v-model.trim="form.时段ID" autocomplete="off" />
+      </el-form-item>
+          <el-form-item label="预约日期" prop="预约日期">
+             <el-date-picker
+      v-model="form.预约日期"
+      style="width:350px;"
+      type="date"
+      value-format="yyyy-MM-dd"
+      placeholder="选择日期">
+    </el-date-picker>
+        <!-- <el-input v-model.trim="form.预约日期" autocomplete="off" /> -->
+      </el-form-item>
+       </template>
+         <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item>
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,waList } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        //  options2: [{
+        //   value: '选项1',
+        //   label: '黄金糕'
+        // }, {
+        //   value: '选项2',
+        //   label: '双皮奶'
+        // }, {
+        //   value: '选项3',
+        //   label: '蚵仔煎'
+        // }, {
+        //   value: '选项4',
+        //   label: '龙须面'
+        // }, {
+        //   value: '选项5',
+        //   label: '北京烤鸭'
+        // }],
+        form: {
+          title: '',
+          author: '',
+          smallWow:'',
+          time:'',
+          author:''
+        },
+        rules: {
+          车辆ID: [{ required: true, trigger: 'blur', message: '请输入车辆ID' }],
+            小哇ID: [{ required: true, trigger: 'blur', message: '请输入小哇ID' }],
+             时段ID: [{ required: true, trigger: 'blur', message: '请输入时段ID' }],
+          预约日期: [{ required: true, trigger: 'blur', message: '请选择时间' }],
+          订单状态: [{ required: true, trigger: 'blur', message: '请选择状态' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {
+      this.waData()
+    },
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      async waData() {
+        const { options2 } = await waList()
+        this.options2 = options2
+        // console.log(options2,'--=')
+        // this.list = data
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        // this.$emit('fetch-data')
+      },
+      save() {
+        // console.log(this.form,'--=')
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/doorOrder/index.vue b/src/views/mall/doorOrder/index.vue
new file mode 100644
index 0000000..f3b2491
--- /dev/null
+++ b/src/views/mall/doorOrder/index.vue
@@ -0,0 +1,285 @@
+<template>
+  <div class="table-container">
+    <!-- <vab-page-header description="功能强大的数据表格组件，支持排序、分页、搜索等功能" :icon="['fas', 'table']" title="表格管理" /> -->
+    <!-- <vab-query-form> -->
+    
+       <el-col>
+      <el-row style="display: flex;align-items: center;">
+  
+     <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+         <vab-query-form-left-panel style="width:130px;">
+        <el-button  icon="el-icon-delete" type="primary" @click="handleDelete">导出</el-button> 
+      </vab-query-form-left-panel>
+       <el-form-item label="查询时间"  style="margin-right:40px;">
+            <el-date-picker
+               v-model="queryForm.time"
+                 unlink-panels
+                value-format="yyyy-MM-dd"
+               type="daterange"
+               range-separator="-"
+               start-placeholder="开始日期"
+               end-placeholder="结束日期"
+                :picker-options="pickerOptions"
+            ></el-date-picker>
+         </el-form-item>
+           <!-- <el-form-item label="订单状态"  style="margin-right:40px;">
+    <el-select v-model="queryForm.id" placeholder="请选择活动区域">
+      <el-option label="未支付" value="1"></el-option>
+      <el-option label="已支付" value="2"></el-option>
+      <el-option label="已派单" value="3"></el-option>
+      <el-option label="服务中" value="4"></el-option>
+      <el-option label="已完成" value="5"></el-option>
+      <el-option label="已取消" value="6"></el-option>
+    </el-select>
+  </el-form-item> -->
+   <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入手机号或订单号查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+        </el-row>
+  </el-col>
+      
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      <!-- <vab-query-form-right-panel>
+      </vab-query-form-right-panel> -->
+    <!-- </vab-query-form> -->
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+      <el-table-column align="center" width="180" label="创建时间" prop="创建时间"  />
+      <el-table-column align="center" width="250" label="地址" prop="地址"  />
+      <el-table-column align="center" width="120" label="小哇名字" prop="小哇名字"  />
+      <el-table-column align="center" width="120" label="宠物名称" prop="宠物名称"  />
+      <el-table-column align="center" width="180" label="订单电话" prop="订单电话"  />
+      <el-table-column align="center" width="180" label="用户电话" prop="用户电话"  />
+      <el-table-column align="center" width="180" label="支付时间" prop="支付时间"  />
+      <el-table-column align="center" width="180" label="订单创建时间" prop="订单创建时间"  />
+      <el-table-column align="center" width="180" label="订单取消时间" prop="订单取消时间"  />
+      <el-table-column align="center" width="100" label="服务价格" prop="服务价格"  />
+      <el-table-column align="center" width="200" label="服务名称" prop="服务名称"  />
+      <el-table-column align="center" width="100" label="服务日期" prop="服务日期"  />
+      <el-table-column align="center" width="200" label="服务时段" prop="服务时段"  />
+      <el-table-column align="center" width="100" label="服务类型" prop="服务类型"  />
+      <el-table-column align="center" width="120" label="用户ID" prop="用户ID"  />
+      <el-table-column align="center" label="订单ID" prop="订单ID"  />
+      <el-table-column align="center" width="200" label="订单号" prop="订单号"  />
+      <el-table-column align="center" label="订单状态" prop="订单状态"  />
+      <el-table-column align="center" label="订单类型" prop="订单类型"  />
+      <!-- <el-table-column label="头像" >
+        <template #default="{ row }">
+          <el-image v-if="imgShow" :preview-src-list="imageList" :src="row.img" />
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="点击量" prop="pageViews"  sortable /> -->
+      <!-- <el-table-column label="状态" >
+        <template #default="{ row }">
+          <el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
+            <el-tag :type="row.status | statusFilter">
+              {{ row.status }}
+            </el-tag>
+          </el-tooltip>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="时间" prop="datetime"  width="200" /> -->
+      <el-table-column label="操作"  fixed="right" width="60px">
+        <template #default="{ row }">
+          <el-button v-if="row.订单状态 == '2' || row.订单状态 == '3'  " type="text" @click="handleEdit(row)">编辑</el-button>
+          <!-- <el-button type="text" @click="handleDelete(row)">删除</el-button> -->
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, getdoorList,expordoortodoorOrdern } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        expordoortodoorOrdern().then(
+  response => {
+     window.location.href = response.data.url;  
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await getdoorList(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/goodsList/components/TableEdit.vue b/src/views/mall/goodsList/components/TableEdit.vue
new file mode 100644
index 0000000..68df2dc
--- /dev/null
+++ b/src/views/mall/goodsList/components/TableEdit.vue
@@ -0,0 +1,108 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template v-if="form.status == '2' ">
+      <el-form-item label="车辆ID" prop="车辆ID">
+        <el-input v-model.trim="form.车辆ID" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="小哇ID" prop="小哇ID">
+        <el-input v-model.trim="form.小哇ID" autocomplete="off" />
+      </el-form-item>
+       <el-form-item label="时段ID" prop="时段ID">
+        <el-input v-model.trim="form.时段ID" autocomplete="off" />
+      </el-form-item>
+          <el-form-item label="预约日期" prop="预约日期">
+             <el-date-picker
+      v-model="form.预约日期"
+      style="width:350px;"
+      type="date"
+      value-format="yyyy-MM-dd"
+      placeholder="选择日期">
+    </el-date-picker>
+        <!-- <el-input v-model.trim="form.预约日期" autocomplete="off" /> -->
+      </el-form-item>
+       </template>
+         <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item>
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          title: '',
+          author: '',
+          smallWow:'',
+          time:'',
+          author:''
+        },
+        rules: {
+          车辆ID: [{ required: true, trigger: 'blur', message: '请输入车辆ID' }],
+            小哇ID: [{ required: true, trigger: 'blur', message: '请输入小哇ID' }],
+             时段ID: [{ required: true, trigger: 'blur', message: '请输入时段ID' }],
+          预约日期: [{ required: true, trigger: 'blur', message: '请选择时间' }],
+          订单状态: [{ required: true, trigger: 'blur', message: '请选择状态' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        // this.$emit('fetch-data')
+      },
+      save() {
+        // console.log(this.form,'--=')
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/goodsList/index.vue b/src/views/mall/goodsList/index.vue
new file mode 100644
index 0000000..30109d8
--- /dev/null
+++ b/src/views/mall/goodsList/index.vue
@@ -0,0 +1,230 @@
+<template>
+  <div class="table-container">
+    <!-- <vab-page-header description="功能强大的数据表格组件，支持排序、分页、搜索等功能" :icon="['fas', 'table']" title="表格管理" /> -->
+    <vab-query-form>
+      <vab-query-form-left-panel style="visibility: hidden;">
+        <el-button :disabled="true" icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button>
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入手机号或用户ID" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <el-table-column    type="selection" width="55" />
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center"  width="120" label="用户ID" prop="用户ID"  />
+      <el-table-column  align="center" width="120" label="用户昵称" prop="用户昵称"  />
+      <el-table-column  align="center" width="140" label="手机号" prop="手机号"  />
+      <el-table-column align="center" label="余额" prop="余额"  />
+        <el-table-column align="center"  width="120" label="当前积分" prop="当前积分"  />
+        <el-table-column align="center" width="120" label="等级ID" prop="等级ID"  />
+        <el-table-column align="center"  width="120" label="等级名称" prop="等级名称"  />
+          <el-table-column align="center"  width="120" label="累计获得积分" prop="累计获得积分"  />
+            <el-table-column align="center"  width="200" label="更新时间" prop="更新时间"  />
+      <!-- <el-table-column label="头像" >
+        <template #default="{ row }">
+          <el-image v-if="imgShow" :preview-src-list="imageList" :src="row.img" />
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="点击量" prop="pageViews"  sortable /> -->
+      <!-- <el-table-column label="状态" >
+        <template #default="{ row }">
+          <el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
+            <el-tag :type="row.status | statusFilter">
+              {{ row.status }}
+            </el-tag>
+          </el-tooltip>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="时间" prop="datetime"  width="200" /> -->
+      <!-- <el-table-column label="操作"  fixed="right" width="60px">
+        <template #default="{ row }">
+          <el-button v-if="row.订单状态 == '已派单' || row.订单状态 == '已支付'  " type="text" @click="handleEdit(row)">编辑</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, walletList } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleEdit(row) {
+        console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids: ids })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await walletList(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/member/components/TableEdit.vue b/src/views/mall/member/components/TableEdit.vue
new file mode 100644
index 0000000..68df2dc
--- /dev/null
+++ b/src/views/mall/member/components/TableEdit.vue
@@ -0,0 +1,108 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template v-if="form.status == '2' ">
+      <el-form-item label="车辆ID" prop="车辆ID">
+        <el-input v-model.trim="form.车辆ID" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="小哇ID" prop="小哇ID">
+        <el-input v-model.trim="form.小哇ID" autocomplete="off" />
+      </el-form-item>
+       <el-form-item label="时段ID" prop="时段ID">
+        <el-input v-model.trim="form.时段ID" autocomplete="off" />
+      </el-form-item>
+          <el-form-item label="预约日期" prop="预约日期">
+             <el-date-picker
+      v-model="form.预约日期"
+      style="width:350px;"
+      type="date"
+      value-format="yyyy-MM-dd"
+      placeholder="选择日期">
+    </el-date-picker>
+        <!-- <el-input v-model.trim="form.预约日期" autocomplete="off" /> -->
+      </el-form-item>
+       </template>
+         <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item>
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          title: '',
+          author: '',
+          smallWow:'',
+          time:'',
+          author:''
+        },
+        rules: {
+          车辆ID: [{ required: true, trigger: 'blur', message: '请输入车辆ID' }],
+            小哇ID: [{ required: true, trigger: 'blur', message: '请输入小哇ID' }],
+             时段ID: [{ required: true, trigger: 'blur', message: '请输入时段ID' }],
+          预约日期: [{ required: true, trigger: 'blur', message: '请选择时间' }],
+          订单状态: [{ required: true, trigger: 'blur', message: '请选择状态' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        // this.$emit('fetch-data')
+      },
+      save() {
+        // console.log(this.form,'--=')
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/member/index.vue b/src/views/mall/member/index.vue
new file mode 100644
index 0000000..1948c3d
--- /dev/null
+++ b/src/views/mall/member/index.vue
@@ -0,0 +1,308 @@
+<template>
+  <div class="table-container">
+      <vab-query-form-left-panel style="width:200px;">
+        <el-button  icon="el-icon-delete" type="primary" @click="handleDelete">导出</el-button> 
+      </vab-query-form-left-panel>
+    <!-- <vab-page-header description="功能强大的数据表格组件，支持排序、分页、搜索等功能" :icon="['fas', 'table']" title="表格管理" /> -->
+    <!-- <vab-query-form> -->
+      <!-- <vab-query-form-left-panel style="width:200px;">
+        <el-button :disabled="true" icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button>
+      </vab-query-form-left-panel> -->
+        <el-row style="display: flex;align-items: center;">
+  <el-col :span="12">
+     <el-form ref="form" style="display: flex;align-items: center;" :inline="true" :model="queryForm" @submit.native.prevent>
+       <el-form-item label="查询时间" >
+            <el-date-picker
+               v-model="queryForm.time"
+                 unlink-panels
+                value-format="yyyy-MM-dd"
+               type="daterange"
+               range-separator="-"
+               start-placeholder="开始日期"
+               end-placeholder="结束日期"
+               :picker-options="pickerOptions"
+            ></el-date-picker>
+         </el-form-item>
+           </el-form>
+  </el-col>
+    <el-col :span="12">
+     <el-form ref="form" style="display: flex;align-items: center;" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入手机号或用户ID" />
+          </el-form-item>
+          
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+           </el-form>
+  </el-col>
+</el-row>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入手机号或用户ID" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    <!-- </vab-query-form> -->
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+          <el-table-column align="center"  width="120" label="用户ID" prop="用户ID"/>
+          <el-table-column align="center"  width="180" label="用户昵称" prop="用户昵称"/>
+          <el-table-column align="center"  width="180" label="手机号" prop="手机号"/>
+          <el-table-column align="center"  label="卡片名称" prop="卡片名称"/>
+          <el-table-column align="center"  width="180" label="卡号" prop="卡号"/>
+          <el-table-column align="center"  label="购买金额" prop="购买金额"/>
+          <el-table-column align="center"  width="120" label="交易流水" prop="交易流水"/>
+          <el-table-column align="center"  width="160" label="创建日期" prop="创建日期"/>
+          <el-table-column align="center"  width="160" label="到期日期" prop="到期日期"/>
+          <el-table-column align="center"  width="160" label="绑定时间" prop="绑定时间"/>
+          <el-table-column align="center"  width="100" label="宠物ID" prop="宠物ID"/>
+          <el-table-column align="center"  width="100" label="宠物名称" prop="宠物名称"/>
+          <el-table-column align="center"  width="100" label="是否退会" prop="是否退会"/>
+          <el-table-column align="center"  width="120" label="是否退会解绑" prop="是否退会解绑"  />
+          <el-table-column align="center"  width="180" label="生效日期" prop="生效日期"/>
+      <!-- <el-table-column label="头像" >
+        <template #default="{ row }">
+          <el-image v-if="imgShow" :preview-src-list="imageList" :src="row.img" />
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="点击量" prop="pageViews"  sortable /> -->
+      <!-- <el-table-column label="状态" >
+        <template #default="{ row }">
+          <el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
+            <el-tag :type="row.status | statusFilter">
+              {{ row.status }}
+            </el-tag>
+          </el-tooltip>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="时间" prop="datetime"  width="200" /> -->
+      <!-- <el-table-column label="操作"  fixed="right" width="60px">
+        <template #default="{ row }">
+          <el-button v-if="row.订单状态 == '已派单' || row.订单状态 == '已支付'  " type="text" @click="handleEdit(row)">编辑</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, goodsListList,exportUserMembership } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+           pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+       handleDelete() {
+        exportUserMembership().then(
+     response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+}) 
+},
+      // handleDelete(row) {
+      //   if (row.id) {
+      //     this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+      //       const { msg } = await doDelete({ ids: row.id })
+      //       this.$baseMessage(msg, 'success')
+      //       this.fetchData()
+      //     })
+      //   } else {
+      //     if (this.selectRows.length > 0) {
+      //       const ids = this.selectRows.map((item) => item.id).join()
+      //       this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+      //         const { msg } = await doDelete({ ids: ids })
+      //         this.$baseMessage(msg, 'success')
+      //         this.fetchData()
+      //       })
+      //     } else {
+      //       this.$baseMessage('未选中任何行', 'error')
+      //       return false
+      //     }
+      //   }
+      // },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await goodsListList(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/pay/components/TableEdit.vue b/src/views/mall/pay/components/TableEdit.vue
new file mode 100644
index 0000000..40a30e0
--- /dev/null
+++ b/src/views/mall/pay/components/TableEdit.vue
@@ -0,0 +1,145 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template v-if="form.status == '2' ">
+      <el-form-item label="车辆ID" prop="车辆ID">
+        <el-input v-model.trim="form.车辆ID" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="小哇ID"   prop="小哇ID">
+        <el-select v-model="form.小哇ID"  style="width:350px;" placeholder="请选择">
+    <el-option
+      v-for="item in options2"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+        <!-- <el-input v-model.trim="form.小哇ID" autocomplete="off" /> -->
+      </el-form-item>
+       <el-form-item label="时段ID" prop="时段ID">
+        <el-input v-model.trim="form.时段ID" autocomplete="off" />
+      </el-form-item>
+          <el-form-item label="预约日期" prop="预约日期">
+             <el-date-picker
+      v-model="form.预约日期"
+      style="width:350px;"
+      type="date"
+      value-format="yyyy-MM-dd"
+      placeholder="选择日期">
+    </el-date-picker>
+        <!-- <el-input v-model.trim="form.预约日期" autocomplete="off" /> -->
+      </el-form-item>
+       </template>
+         <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item>
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,waList } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        //  options2: [{
+        //   value: '选项1',
+        //   label: '黄金糕'
+        // }, {
+        //   value: '选项2',
+        //   label: '双皮奶'
+        // }, {
+        //   value: '选项3',
+        //   label: '蚵仔煎'
+        // }, {
+        //   value: '选项4',
+        //   label: '龙须面'
+        // }, {
+        //   value: '选项5',
+        //   label: '北京烤鸭'
+        // }],
+        form: {
+          title: '',
+          author: '',
+          smallWow:'',
+          time:'',
+          author:''
+        },
+        rules: {
+          车辆ID: [{ required: true, trigger: 'blur', message: '请输入车辆ID' }],
+            小哇ID: [{ required: true, trigger: 'blur', message: '请输入小哇ID' }],
+             时段ID: [{ required: true, trigger: 'blur', message: '请输入时段ID' }],
+          预约日期: [{ required: true, trigger: 'blur', message: '请选择时间' }],
+          订单状态: [{ required: true, trigger: 'blur', message: '请选择状态' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {
+      this.waData()
+    },
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      async waData() {
+        const { options2 } = await waList()
+        this.options2 = options2
+        console.log(options2,'--=')
+        // this.list = data
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        // this.$emit('fetch-data')
+      },
+      save() {
+        // console.log(this.form,'--=')
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/pay/index.vue b/src/views/mall/pay/index.vue
new file mode 100644
index 0000000..25a4eb4
--- /dev/null
+++ b/src/views/mall/pay/index.vue
@@ -0,0 +1,334 @@
+<template>
+  <div class="table-container">
+    <!-- <vab-page-header description="功能强大的数据表格组件，支持排序、分页、搜索等功能" :icon="['fas', 'table']" title="表格管理" /> -->
+    <!-- <vab-query-form> -->
+      
+      <el-col>
+      <el-row style="display: flex;align-items: center;">
+  
+     <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+         <vab-query-form-left-panel style="width:130px;">
+        <el-button  icon="el-icon-delete" type="primary" @click="handleDelete">导出</el-button> 
+      </vab-query-form-left-panel>
+       <el-form-item label="查询时间"  style="margin-right:40px;">
+            <el-date-picker
+               v-model="queryForm.time"
+                 unlink-panels
+                value-format="yyyy-MM-dd"
+               type="daterange"
+               range-separator="-"
+               start-placeholder="开始日期"
+               end-placeholder="结束日期"
+                :picker-options="pickerOptions"
+            ></el-date-picker>
+         </el-form-item>
+           <el-form-item label="订单状态"  style="margin-right:40px;">
+    <el-select v-model="queryForm.id" placeholder="请选择订单状态">
+      <el-option label="未支付" value="1"></el-option>
+      <el-option label="已支付" value="2"></el-option>
+      <el-option label="已派单" value="3"></el-option>
+      <el-option label="服务中" value="4"></el-option>
+      <el-option label="已完成" value="5"></el-option>
+      <el-option label="已取消" value="6"></el-option>
+    </el-select>
+  </el-form-item>
+   <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入手机号或订单号查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+        </el-row>
+  </el-col>
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+      <el-table-column align="center" label="订单ID"  prop="订单ID"  />
+      <el-table-column align="center" width="180"     label="订单号"        prop="订单号"  />
+      <el-table-column align="center" width="120"     label="订单状态"      prop="订单状态"  />
+      <el-table-column align="center" label="客户姓名" prop="客户姓名"  /> 
+      <el-table-column align="center" width="120"     label="小哇名字"      prop="小哇名字"  />
+      <el-table-column align="center" width="120"     label="订单电话"      prop="订单电话"  />
+      <el-table-column align="center" width="120"     label="用户电话"      prop="用户电话"  />
+      <el-table-column align="center" width="100"     label="省"            prop="省"  />
+      <el-table-column align="center" width="100"     label="市"            prop="市"  />
+      <el-table-column align="center" width="100"     label="区"            prop="区"  />
+      <el-table-column align="center" width="200"     label="地址"          prop="地址"  />
+      <el-table-column align="center" width="100"     label="组ID"          prop="组ID"  />
+      <el-table-column align="center" width="100"     label="时段ID"        prop="时段ID"  />
+      <el-table-column align="center" width="100"     label="车辆ID"        prop="车辆ID"  />
+      <el-table-column align="center" width="100"     label="小哇ID"        prop="小哇ID"  />
+      <el-table-column align="center" width="180"     label="预约时段"       prop="预约时段"  />
+      <el-table-column align="center" width="120"     label="预约日期"       prop="预约日期"  />
+      <el-table-column align="center" width="120"     label="订单创建时间"   prop="订单创建时间"  />
+      <el-table-column align="center" width="120"     label="订单取消时间"   prop="订单取消时间"  />
+      <el-table-column align="center" label="种类"     prop="种类"  />
+      <el-table-column align="center" label="重量ID"   prop="重量ID"  />
+      <el-table-column align="center" label="重量区间" prop="重量区间"  />
+      <el-table-column align="center" label="宠物昵称" prop="宠物昵称"  />
+      <el-table-column align="center" label="宠物品种" prop="宠物品种"  />
+      <el-table-column align="center" label="抵扣券ID" prop="抵扣券ID"  />
+      <el-table-column align="center" label="补款链接" prop="补款链接"  />
+      <el-table-column align="center" label="基础洗护" prop="基础洗护"  />
+      <el-table-column align="center" width="150"     label="一次性毛巾"    prop="一次性毛巾"  />
+      <el-table-column align="center" label="刷牙"     prop="刷牙"  />
+      <el-table-column align="center" label="头部修剪" prop="头部修剪"  />
+      <el-table-column align="center" label="屁屁修剪" prop="屁屁修剪"  />
+      <el-table-column align="center" label="贵宾脚"   prop="贵宾脚"  />
+      <el-table-column align="center" label="全身美容" prop="全身美容"  />
+      <el-table-column align="center" label="纯手剪"   prop="纯手剪"  />
+      <el-table-column align="center" label="去除废毛" prop="去除废毛"  />
+      <el-table-column align="center" width="150"     label="开结半小时"     prop="开结半小时"  />
+      <el-table-column align="center" width="150"     label="开结1小时"      prop="开结1小时"  />
+      <el-table-column align="center" width="150"     label="开结1.5小时"    prop="开结1.5小时"  />
+      <el-table-column align="center" width="150"     label="开结2小时"      prop="开结2小时"  />
+      <el-table-column align="center" width="150"     label="局部"           prop="局部"  />
+      <el-table-column align="center" width="150"     label="全身"           prop="全身"  />
+      <el-table-column width="120"    align="center"  label="附加项合计"      prop="附加项合计"  />
+      <el-table-column align="center" label="调度费"   prop="调度费"  />
+      <el-table-column align="center" label="夜间费"   prop="夜间费"  />
+      <el-table-column width="120"    align="center"  label="抵扣券名称"      prop="抵扣券名称"  />
+      <el-table-column align="center" label="抵扣金额" prop="抵扣金额"  />
+      <el-table-column width="200"    align="center"  label="会员价"         prop="会员价"  />
+      <el-table-column width="130"    align="center"  label="是否绑定会员"    prop="是否绑定会员"  />
+      <el-table-column align="center" label="折扣"    prop="折扣"  />
+      <el-table-column align="center" label="会员首单" prop="会员首单"  />
+      <el-table-column align="center" label="订单合计" prop="订单合计"  />
+      <el-table-column width="150"    align="center"  label="会员折扣后金额"   prop="会员折扣后金额"  />
+      <el-table-column align="center" label="结算金额" prop="结算金额"  />
+      <el-table-column width="150"    align="center"  label="订单实际支付价格" prop="订单实际支付价格"  />
+      <el-table-column width="120"    align="center"  label="最终支付总额"     prop="最终支付总额"  />
+      <el-table-column align="center" width="150"     label="追加一次性毛巾"   prop="追加一次性毛巾"  />
+      <el-table-column align="center" label="追加刷牙" prop="追加刷牙"  />
+      <el-table-column width="120"    align="center"  label="追加头部修建"     prop="追加头部修建"  />
+      <el-table-column width="120"    align="center"  label="追加屁屁修建"     prop="追加屁屁修建"  />
+      <el-table-column width="120"    align="center"  label="追加贵宾脚"       prop="追加贵宾脚"  />
+      <el-table-column width="120"    align="center"  label="追加全身美容"     prop="追加全身美容"  />
+      <el-table-column width="120"    align="center"  label="追加纯手剪"       prop="追加纯手剪"  />
+      <el-table-column width="120"    align="center"  label="追加去除废毛"     prop="追加去除废毛"  />
+      <el-table-column width="200"    align="center"  label="追加开结半小时"   prop="追加开结半小时"  />
+      <el-table-column width="200"    align="center"  label="追加开结1小时"    prop="追加开结1小时"  />
+      <el-table-column width="200"    align="center"  label="追加开结1.5小时"  prop="追加开结1.5小时"  />
+      <el-table-column width="200"    align="center"  label="追加开结2小时"    prop="追加开结2小时"  />
+      <el-table-column width="120"    align="center"  label="追加局部"         prop="追加局部"  />
+      <el-table-column width="120"    align="center"  label="追加全身"         prop="追加全身"  />
+      <!-- <el-table-column label="头像" >
+        <template #default="{ row }">
+          <el-image v-if="imgShow" :preview-src-list="imageList" :src="row.img" />
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="点击量" prop="pageViews"  sortable /> -->
+      <!-- <el-table-column label="状态" >
+        <template #default="{ row }">
+          <el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
+            <el-tag :type="row.status | statusFilter">
+              {{ row.status }}
+            </el-tag>
+          </el-tooltip>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="时间" prop="datetime"  width="200" /> -->
+      <el-table-column label="操作"  fixed="right" width="60px">
+        <template #default="{ row }">
+          <el-button v-if="row.订单状态 == '已派单' || row.订单状态 == '已支付'  " type="text" @click="handleEdit(row)">编辑</el-button>
+          <!-- <el-button type="text" @click="handleDelete(row)">删除</el-button> -->
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, getList,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await getList(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/points/components/TableEdit.vue b/src/views/mall/points/components/TableEdit.vue
new file mode 100644
index 0000000..a559633
--- /dev/null
+++ b/src/views/mall/points/components/TableEdit.vue
@@ -0,0 +1,214 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/mall/points/index.vue b/src/views/mall/points/index.vue
new file mode 100644
index 0000000..d6eb4ed
--- /dev/null
+++ b/src/views/mall/points/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/registerUser/components/TableEdit.vue b/src/views/mall/registerUser/components/TableEdit.vue
new file mode 100644
index 0000000..487b91c
--- /dev/null
+++ b/src/views/mall/registerUser/components/TableEdit.vue
@@ -0,0 +1,145 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template v-if="form.订单状态 == '2' ">
+      <el-form-item label="车辆ID" prop="车辆ID">
+        <el-input v-model.trim="form.车辆ID" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="小哇ID"   prop="小哇ID">
+        <el-select v-model="form.小哇ID"  style="width:350px;" placeholder="请选择">
+    <el-option
+      v-for="item in options2"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+        <!-- <el-input v-model.trim="form.小哇ID" autocomplete="off" /> -->
+      </el-form-item>
+       <el-form-item label="时段ID" prop="时段ID">
+        <el-input v-model.trim="form.时段ID" autocomplete="off" />
+      </el-form-item>
+          <el-form-item label="预约日期" prop="预约日期">
+             <el-date-picker
+      v-model="form.预约日期"
+      style="width:350px;"
+      type="date"
+      value-format="yyyy-MM-dd"
+      placeholder="选择日期">
+    </el-date-picker>
+        <!-- <el-input v-model.trim="form.预约日期" autocomplete="off" /> -->
+      </el-form-item>
+       </template>
+         <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item>
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,waList } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        //  options2: [{
+        //   value: '选项1',
+        //   label: '黄金糕'
+        // }, {
+        //   value: '选项2',
+        //   label: '双皮奶'
+        // }, {
+        //   value: '选项3',
+        //   label: '蚵仔煎'
+        // }, {
+        //   value: '选项4',
+        //   label: '龙须面'
+        // }, {
+        //   value: '选项5',
+        //   label: '北京烤鸭'
+        // }],
+        form: {
+          title: '',
+          author: '',
+          smallWow:'',
+          time:'',
+          author:''
+        },
+        rules: {
+          车辆ID: [{ required: true, trigger: 'blur', message: '请输入车辆ID' }],
+            小哇ID: [{ required: true, trigger: 'blur', message: '请输入小哇ID' }],
+             时段ID: [{ required: true, trigger: 'blur', message: '请输入时段ID' }],
+          预约日期: [{ required: true, trigger: 'blur', message: '请选择时间' }],
+          订单状态: [{ required: true, trigger: 'blur', message: '请选择状态' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {
+      this.waData()
+    },
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      async waData() {
+        const { options2 } = await waList()
+        this.options2 = options2
+        // console.log(options2,'--=')
+        // this.list = data
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        // this.$emit('fetch-data')
+      },
+      save() {
+        // console.log(this.form,'--=')
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/registerUser/index.vue b/src/views/mall/registerUser/index.vue
new file mode 100644
index 0000000..8f8ddf7
--- /dev/null
+++ b/src/views/mall/registerUser/index.vue
@@ -0,0 +1,298 @@
+<template>
+  <div class="table-container">
+    <!-- <vab-page-header description="功能强大的数据表格组件，支持排序、分页、搜索等功能" :icon="['fas', 'table']" title="表格管理" /> -->
+    <!-- <vab-query-form> -->
+    
+       <el-col>
+      <el-row style="display: flex;align-items: center;">
+  
+     <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+         <vab-query-form-left-panel style="width:130px;">
+        <el-button  icon="el-icon-delete" type="primary" @click="handleDelete">导出</el-button> 
+      </vab-query-form-left-panel>
+       <el-form-item label="查询时间"  style="margin-right:40px;">
+            <el-date-picker
+               v-model="queryForm.time"
+                 unlink-panels
+                value-format="yyyy-MM-dd"
+               type="daterange"
+               range-separator="-"
+               start-placeholder="开始日期"
+               end-placeholder="结束日期"
+                :picker-options="pickerOptions"
+            ></el-date-picker>
+         </el-form-item>
+           <!-- <el-form-item label="订单状态"  style="margin-right:40px;">
+    <el-select v-model="queryForm.id" placeholder="请选择活动区域">
+      <el-option label="未支付" value="1"></el-option>
+      <el-option label="已支付" value="2"></el-option>
+      <el-option label="已派单" value="3"></el-option>
+      <el-option label="服务中" value="4"></el-option>
+      <el-option label="已完成" value="5"></el-option>
+      <el-option label="已取消" value="6"></el-option>
+    </el-select>
+  </el-form-item> -->
+   <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入手机号或用户id" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+        </el-row>
+  </el-col>
+      
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      <!-- <vab-query-form-right-panel>
+      </vab-query-form-right-panel> -->
+    <!-- </vab-query-form> -->
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column  >
+        <template #default="{ row }">
+          <el-image  v-if="row.头像"  :src="row.头像" />
+        </template>
+      </el-table-column>
+      <!-- <el-table-column align="center" width="180" label="头像" prop="头像"  /> -->
+       <el-table-column align="center" width="200" label="注册时间" prop="注册时间"  />
+      <el-table-column align="center" width="100" label="性别" prop="性别"  />
+      <el-table-column align="center" width="120" label="手机号" prop="手机号"  />
+      <el-table-column align="center" width="120" label="推荐人ID" prop="推荐人ID"  />
+      <el-table-column align="center" width="180" label="昵称" prop="昵称"  />
+      <el-table-column align="center" width="180" label="生日" prop="生日"  />
+      <el-table-column align="center" width="180" label="用户ID" prop="用户ID"  />
+      <el-table-column align="center" width="180" label="用户名" prop="用户名"  />
+      <!-- <el-table-column align="center" width="180" label="订单取消时间" prop="订单取消时间"  />
+      <el-table-column align="center" width="100" label="服务价格" prop="服务价格"  />
+      <el-table-column align="center" width="200" label="服务名称" prop="服务名称"  />
+      <el-table-column align="center" width="100" label="服务日期" prop="服务日期"  />
+      <el-table-column align="center" width="200" label="服务时段" prop="服务时段"  />
+      <el-table-column align="center" width="100" label="服务类型" prop="服务类型"  />
+      <el-table-column align="center" width="120" label="用户ID" prop="用户ID"  />
+      <el-table-column align="center" label="订单ID" prop="订单ID"  />
+      <el-table-column align="center" width="200" label="订单号" prop="订单号"  />
+      <el-table-column align="center" label="订单状态" prop="订单状态"  />
+      <el-table-column align="center" label="订单类型" prop="订单类型"  /> -->
+      <!-- <el-table-column label="头像" >
+        <template #default="{ row }">
+          <el-image v-if="imgShow" :preview-src-list="imageList" :src="row.img" />
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="点击量" prop="pageViews"  sortable /> -->
+      <!-- <el-table-column label="状态" >
+        <template #default="{ row }">
+          <el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
+            <el-tag :type="row.status | statusFilter">
+              {{ row.status }}
+            </el-tag>
+          </el-tooltip>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="时间" prop="datetime"  width="200" /> -->
+      <el-table-column label="操作"  fixed="right" width="60px">
+        <template #default="{ row }">
+          <el-button v-if="row.订单状态 == '2' || row.订单状态 == '3'  " type="text" @click="handleEdit(row)">编辑</el-button>
+          <!-- <el-button type="text" @click="handleDelete(row)">删除</el-button> -->
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, getUsere,exportRegisterUser } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportRegisterUser().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await getUsere(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/mall/time/components/TableEdit.vue b/src/views/mall/time/components/TableEdit.vue
new file mode 100644
index 0000000..a559633
--- /dev/null
+++ b/src/views/mall/time/components/TableEdit.vue
@@ -0,0 +1,214 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/mall/time/index.vue b/src/views/mall/time/index.vue
new file mode 100644
index 0000000..d6eb4ed
--- /dev/null
+++ b/src/views/mall/time/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/message/components/TableEdit.vue b/src/views/message/components/TableEdit.vue
new file mode 100644
index 0000000..d8d3e79
--- /dev/null
+++ b/src/views/message/components/TableEdit.vue
@@ -0,0 +1,109 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template v-if="form.status == '2' ">
+      <el-form-item label="车辆ID" prop="车辆ID">
+        <el-input v-model.trim="form.车辆ID" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="小哇ID" prop="小哇ID">
+        <el-input v-model.trim="form.小哇ID" autocomplete="off" />
+      </el-form-item>
+       <el-form-item label="时段ID" prop="时段ID">
+        <el-input v-model.trim="form.时段ID" autocomplete="off" />
+      </el-form-item>
+          <el-form-item label="预约日期" prop="预约日期">
+             <el-date-picker
+      v-model="form.预约日期"
+      style="width:350px;"
+      type="date"
+      value-format="yyyy-MM-dd"
+      placeholder="选择日期">
+    </el-date-picker>
+        <!-- <el-input v-model.trim="form.预约日期" autocomplete="off" /> -->
+      </el-form-item>
+       </template>
+         <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item>
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          title: '',
+          author: '',
+          smallWow:'',
+          time:'',
+          author:''
+        },
+        rules: {
+          车辆ID: [{ required: true, trigger: 'blur', message: '请输入车辆ID' }],
+            小哇ID: [{ required: true, trigger: 'blur', message: '请输入小哇ID' }],
+             时段ID: [{ required: true, trigger: 'blur', message: '请输入时段ID' }],
+          预约日期: [{ required: true, trigger: 'blur', message: '请选择时间' }],
+          订单状态: [{ required: true, trigger: 'blur', message: '请选择状态' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        // this.$emit('fetch-data')
+      },
+      save() {
+        // console.log(this.form,'--=')
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/message/index.vue b/src/views/message/index.vue
new file mode 100644
index 0000000..c69e0a0
--- /dev/null
+++ b/src/views/message/index.vue
@@ -0,0 +1,288 @@
+<template>
+  <div class="table-container">
+    
+    <!-- <vab-page-header description="功能强大的数据表格组件，支持排序、分页、搜索等功能" :icon="['fas', 'table']" title="表格管理" /> -->
+    <el-row>
+  <el-col :span="18">
+     <el-form ref="form"  :inline="true" :model="queryForm" @submit.native.prevent>
+       <el-form-item label="查询时间" >
+            <el-date-picker
+               v-model="queryForm.time"
+                 unlink-panels
+                value-format="yyyy-MM-dd"
+               type="daterange"
+               range-separator="-"
+               start-placeholder="开始日期"
+               end-placeholder="结束日期"
+                :picker-options="pickerOptions"
+            ></el-date-picker>
+         </el-form-item>
+           </el-form>
+  </el-col>
+     <el-form ref="form"   :inline="true" :model="queryForm" @submit.native.prevent>
+          <!-- <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入手机号或订单号查询" />
+          </el-form-item> -->
+           <el-select v-model="queryForm.status_Inquiry" placeholder="请选择" style="margin:2px 20px 0 0 ;">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+          
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+           </el-form>
+</el-row>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <el-table-column  type="selection" width="55" />
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="100" label="ID" prop="ID"  />
+         <el-table-column align="center" width="200" label="创建时间" prop="创建时间"  />
+           <el-table-column align="center" width="700" label="消息" prop="消息"  />
+         <el-table-column align="center"  width="100" label="消息类型" prop="消息类型"  />
+      <!-- <el-table-column label="头像" >
+        <template #default="{ row }">
+          <el-image v-if="imgShow" :preview-src-list="imageList" :src="row.img" />
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="点击量" prop="pageViews"  sortable /> -->
+      <!-- <el-table-column label="状态" >
+        <template #default="{ row }">
+          <el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
+            <el-tag :type="row.status | statusFilter">
+              {{ row.status }}
+            </el-tag>
+          </el-tooltip>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="时间" prop="datetime"  width="200" /> -->
+      <!-- <el-table-column label="操作"  fixed="right" width="60px">
+        <template #default="{ row }">
+          <el-button v-if="row.订单状态 == '已派单' || row.订单状态 == '已支付'  " type="text" @click="handleEdit(row)">编辑</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, messageList } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+         value: '',
+         options: [{
+          value: '1',
+          label: '订单通知'
+        }, {
+          value: '3',
+          label: '附加项通知'
+        }, {
+          value: '2',
+          label: '取消通知'
+        }
+        ],
+           pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+      previewImage(url) {
+        
+      // 方法1: 使用window.open在新标签页中打开图片
+      window.open(url, '_blank');
+      
+      // 方法2: 使用Vue的Modal组件（例如使用Element UI的Dialog）
+      // this.$refs.imageModal.showImage(url);
+    },
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleEdit(row) {
+        console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids: ids })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await messageList(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/order/components/TableEdit.vue b/src/views/order/components/TableEdit.vue
new file mode 100644
index 0000000..86252f3
--- /dev/null
+++ b/src/views/order/components/TableEdit.vue
@@ -0,0 +1,214 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加2'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/order/index.vue b/src/views/order/index.vue
new file mode 100644
index 0000000..83303d5
--- /dev/null
+++ b/src/views/order/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加2</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/payment/paymentList/components/TableEdit.vue b/src/views/payment/paymentList/components/TableEdit.vue
new file mode 100644
index 0000000..13b7ad0
--- /dev/null
+++ b/src/views/payment/paymentList/components/TableEdit.vue
@@ -0,0 +1,222 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules" v-if="!ids">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="角色名称" prop="角色名称">
+        <el-input style="width:300px;" :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="角色描述" prop="角色描述">
+     <el-input  style="width:300px;" type="textarea" v-model="form.券包价格"></el-input>
+        <!-- <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+  </el-row>
+  
+    <el-row>
+   <el-col :span="12">
+  <el-form-item label="状态">
+    <el-radio-group  style="width:300px;"  v-model="form.resource">
+      <el-radio label="1">启用</el-radio>
+      <el-radio label="2">禁用</el-radio>
+    </el-radio-group>
+  </el-form-item>
+   </el-col>
+  </el-row>
+       </template>
+    </el-form>
+
+  <div class="block" v-else>
+  <span class="demonstration">权限设置</span>
+  <el-cascader
+  style="width:300px;margin-left:20px;"
+    :options="options"
+    :props="props"
+    collapse-tags
+    clearable>
+    </el-cascader>
+   </div>
+     
+    <div slot="footer" class="dialog-footer" >
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+        //   options: [{
+        //   value: '已支付',
+        //   label: '已支付'
+        // },
+        // ],
+         props: { multiple: true },
+          options: [{
+          value: 1,
+          label: '东南',
+          children: [{
+            value: 2,
+            label: '上海',
+            children: [
+              { value: 3, label: '普陀' },
+              { value: 4, label: '黄埔' },
+              { value: 5, label: '徐汇' }
+            ]
+          }, {
+            value: 7,
+            label: '江苏',
+            children: [
+              { value: 8, label: '南京' },
+              { value: 9, label: '苏州' },
+              { value: 10, label: '无锡' }
+            ]
+          }, {
+            value: 12,
+            label: '浙江',
+            children: [
+              { value: 13, label: '杭州' },
+              { value: 14, label: '宁波' },
+              { value: 15, label: '嘉兴' }
+            ]
+          }]
+        }, {
+          value: 17,
+          label: '西北',
+          children: [{
+            value: 18,
+            label: '陕西',
+            children: [
+              { value: 19, label: '西安' },
+              { value: 20, label: '延安' }
+            ]
+          }, {
+            value: 21,
+            label: '新疆维吾尔族自治区',
+            children: [
+              { value: 22, label: '乌鲁木齐' },
+              { value: 23, label: '克拉玛依' }
+            ]
+          }]
+        }],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+          resource:'1'
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '权限设置'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/payment/paymentList/index.vue b/src/views/payment/paymentList/index.vue
new file mode 100644
index 0000000..2fe4eed
--- /dev/null
+++ b/src/views/payment/paymentList/index.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="table-container">
+    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
+  <el-form-item label="">
+    <el-input style="width:200px;" clearable v-model="queryForm.user" placeholder="请输入关键词"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="onSubmit">查询</el-button>
+  </el-form-item>
+</el-form>
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">权限设置</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/personalCenter/index.vue b/src/views/personalCenter/index.vue
new file mode 100644
index 0000000..842093f
--- /dev/null
+++ b/src/views/personalCenter/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="personalCenter-container">
+    <vab-page-header description="个人信息管理，包含个人简介、基本设置、安全设置等" :icon="['fas', 'user-cog']" title="个人中心" />
+
+    <el-tabs :tab-position="tabPosition">
+      <el-tab-pane label="个人简介">个人简介</el-tab-pane>
+      <el-tab-pane label="基本设置">基本设置</el-tab-pane>
+      <el-tab-pane label="安全设置">安全设置</el-tab-pane>
+      <el-tab-pane label="账户绑定">安全设置</el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'PersonalCenter',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {
+        tabPosition: 'left',
+      }
+    },
+    created() {},
+    methods: {},
+  }
+</script>
diff --git a/src/views/personnelManagement/menuManagement/components/MenuManagementEdit.vue b/src/views/personnelManagement/menuManagement/components/MenuManagementEdit.vue
new file mode 100644
index 0000000..c27585d
--- /dev/null
+++ b/src/views/personnelManagement/menuManagement/components/MenuManagementEdit.vue
@@ -0,0 +1,64 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-divider content-position="left">这里就不具体写了，请自行完善</el-divider>
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+      <el-form-item label="name" prop="name">
+        <el-input v-model="form.name" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="路径" prop="path">
+        <el-input v-model="form.path" autocomplete="off" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/menuManagement'
+
+  export default {
+    name: 'MenuManagementEdit',
+    data() {
+      return {
+        form: {},
+        rules: {
+          id: [{ required: true, trigger: 'blur', message: '请输入路径' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+      },
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$emit('fetch-data')
+            this.close()
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
diff --git a/src/views/personnelManagement/menuManagement/index.vue b/src/views/personnelManagement/menuManagement/index.vue
new file mode 100644
index 0000000..42bdf6e
--- /dev/null
+++ b/src/views/personnelManagement/menuManagement/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="menuManagement-container">
+    <vab-page-header description="系统菜单配置管理，支持菜单的增删改查操作" :icon="['fas', 'bars']" title="菜单管理" />
+    <el-divider content-position="left">
+      演示环境仅做基础功能展示，若想实现不同角色的真实菜单配置，需将settings.js路由加载模式改为all模式，由后端全面接管路由渲染与权限控制
+    </el-divider>
+    <el-row>
+      <el-col :lg="4" :md="8" :sm="24" :xl="4" :xs="24">
+        <el-tree :data="data" :default-expanded-keys="['root']" node-key="id" :props="defaultProps" @node-click="handleNodeClick" />
+      </el-col>
+      <el-col :lg="20" :md="16" :sm="24" :xl="20" :xs="24">
+        <vab-query-form>
+          <vab-query-form-top-panel :span="12">
+            <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button>
+          </vab-query-form-top-panel>
+        </vab-query-form>
+        <el-table
+          v-loading="listLoading"
+          border
+          :data="list"
+          default-expand-all
+          :element-loading-text="elementLoadingText"
+          row-key="path"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        >
+          <el-table-column label="name" prop="name" show-overflow-tooltip />
+          <el-table-column label="路径" prop="path" show-overflow-tooltip />
+          <el-table-column label="是否隐藏" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span>
+                {{ row.hidden ? '是' : '否' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="是否一直显示当前节点" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span>
+                {{ row.alwaysShow ? '是' : '否' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="vue文件路径" prop="component" show-overflow-tooltip />
+          <el-table-column label="重定向" prop="redirect" show-overflow-tooltip />
+          <el-table-column label="标题" prop="meta.title" show-overflow-tooltip />
+          <el-table-column label="图标" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                <vab-icon v-if="row.meta.icon" :icon="['fas', row.meta.icon]" />
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="是否固定" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                {{ row.meta.affix ? '是' : '否' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="是否无缓存" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                {{ row.meta.noKeepAlive ? '是' : '否' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="badge" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span v-if="row.meta">
+                {{ row.meta.badge }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" show-overflow-tooltip width="200">
+            <template #default="{ row }">
+              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+              <el-button type="text" @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+
+    <edit ref="edit" @fetch-data="fetchData" />
+  </div>
+</template>
+
+<script>
+  import { getRouterList as getList } from '@/api/router'
+  import { doDelete, getTree } from '@/api/menuManagement'
+  import Edit from './components/MenuManagementEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'MenuManagement',
+    components: {
+      Edit,
+      VabPageHeader,
+    },
+    data() {
+      return {
+        data: [],
+        defaultProps: {
+          children: 'children',
+          label: 'label',
+        },
+        list: [],
+        listLoading: true,
+        elementLoadingText: '正在加载...',
+        timeOutID: null,
+      }
+    },
+    async created() {
+      const roleData = await getTree()
+      this.data = roleData.data
+      this.fetchData()
+    },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    methods: {
+      handleEdit(row) {
+        if (row.path) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        }
+      },
+      async fetchData() {
+        this.listLoading = true
+
+        const { data } = await getList()
+        this.list = data
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 300)
+      },
+      handleNodeClick() {
+        this.fetchData()
+      },
+    },
+  }
+</script>
diff --git a/src/views/personnelManagement/roleManagement/components/RoleManagementEdit.vue b/src/views/personnelManagement/roleManagement/components/RoleManagementEdit.vue
new file mode 100644
index 0000000..284149a
--- /dev/null
+++ b/src/views/personnelManagement/roleManagement/components/RoleManagementEdit.vue
@@ -0,0 +1,62 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+      <el-form-item label="权限码" prop="permission">
+        <el-input v-model="form.permission" autocomplete="off" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/roleManagement'
+
+  export default {
+    name: 'RoleManagementEdit',
+    data() {
+      return {
+        form: {
+          id: '',
+        },
+        rules: {
+          permission: [{ required: true, trigger: 'blur', message: '请输入权限码' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+      },
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$emit('fetch-data')
+            this.close()
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
diff --git a/src/views/personnelManagement/roleManagement/index.vue b/src/views/personnelManagement/roleManagement/index.vue
new file mode 100644
index 0000000..be45b86
--- /dev/null
+++ b/src/views/personnelManagement/roleManagement/index.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="roleManagement-container">
+    <vab-page-header description="系统角色权限管理，支持角色的增删改查操作" :icon="['fas', 'user-shield']" title="角色管理" />
+    <el-divider content-position="left">
+      演示环境仅做基础功能展示，若想实现不同角色的真实菜单配置，需将settings.js路由加载模式改为all模式，由后端全面接管路由渲染与权限控制
+    </el-divider>
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button>
+        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除</el-button>
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model.trim="queryForm.permission" clearable placeholder="请输入查询条件" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
+      <el-table-column show-overflow-tooltip type="selection" />
+      <el-table-column label="id" prop="id" show-overflow-tooltip />
+      <el-table-column label="权限码" prop="permission" show-overflow-tooltip />
+      <el-table-column label="操作" show-overflow-tooltip width="200">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <edit ref="edit" @fetch-data="fetchData" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, getList } from '@/api/roleManagement'
+  import Edit from './components/RoleManagementEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'RoleManagement',
+    components: {
+      Edit,
+      VabPageHeader,
+    },
+    data() {
+      return {
+        list: null,
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          permission: '',
+        },
+        timeOutID: null,
+      }
+    },
+    created() {
+      this.fetchData()
+    },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    methods: {
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, totalCount } = await getList(this.queryForm)
+        this.list = data
+        this.total = totalCount
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 300)
+      },
+    },
+  }
+</script>
diff --git a/src/views/personnelManagement/userManagement/components/UserManagementEdit.vue b/src/views/personnelManagement/userManagement/components/UserManagementEdit.vue
new file mode 100644
index 0000000..24766be
--- /dev/null
+++ b/src/views/personnelManagement/userManagement/components/UserManagementEdit.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model.trim="form.username" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input v-model.trim="form.password" autocomplete="off" type="password" />
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model.trim="form.email" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="权限" prop="permissions">
+        <el-checkbox-group v-model="form.permissions">
+          <el-checkbox label="admin" />
+          <el-checkbox label="editor" />
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/userManagement'
+
+  export default {
+    name: 'UserManagementEdit',
+    data() {
+      return {
+        form: {
+          username: '',
+          password: '',
+          email: '',
+          permissions: [],
+        },
+        rules: {
+          username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+          password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
+          email: [{ required: true, trigger: 'blur', message: '请输入邮箱' }],
+          permissions: [{ required: true, trigger: 'blur', message: '请选择权限' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+      },
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$emit('fetch-data')
+            this.close()
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
diff --git a/src/views/personnelManagement/userManagement/index.vue b/src/views/personnelManagement/userManagement/index.vue
new file mode 100644
index 0000000..0e17b06
--- /dev/null
+++ b/src/views/personnelManagement/userManagement/index.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="userManagement-container">
+    <vab-page-header description="系统用户管理，支持添加、编辑、删除用户信息" :icon="['fas', 'users']" title="用户管理" />
+
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button>
+        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除</el-button>
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model.trim="queryForm.username" clearable placeholder="请输入用户名" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
+      <el-table-column show-overflow-tooltip type="selection" />
+      <el-table-column label="id" prop="id" show-overflow-tooltip />
+      <el-table-column label="用户名" prop="username" show-overflow-tooltip />
+      <el-table-column label="邮箱" prop="email" show-overflow-tooltip />
+
+      <el-table-column label="权限" show-overflow-tooltip>
+        <template #default="{ row }">
+          <el-tag v-for="(item, index) in row.permissions" :key="index">
+            {{ item }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="修改时间" prop="datatime" show-overflow-tooltip />
+      <el-table-column label="操作" show-overflow-tooltip width="200">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <edit ref="edit" @fetch-data="fetchData" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, getList } from '@/api/userManagement'
+  import Edit from './components/UserManagementEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'UserManagement',
+    components: {
+      Edit,
+      VabPageHeader,
+    },
+    data() {
+      return {
+        list: null,
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 10,
+          username: '',
+        },
+        timeOutID: null,
+      }
+    },
+    created() {
+      this.fetchData()
+    },
+
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    methods: {
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleEdit(row) {
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, totalCount } = await getList(this.queryForm)
+        this.list = data
+        this.total = totalCount
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 300)
+      },
+    },
+  }
+</script>
diff --git a/src/views/pricing/care/components/TableEdit.vue b/src/views/pricing/care/components/TableEdit.vue
new file mode 100644
index 0000000..13b7ad0
--- /dev/null
+++ b/src/views/pricing/care/components/TableEdit.vue
@@ -0,0 +1,222 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules" v-if="!ids">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="角色名称" prop="角色名称">
+        <el-input style="width:300px;" :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="角色描述" prop="角色描述">
+     <el-input  style="width:300px;" type="textarea" v-model="form.券包价格"></el-input>
+        <!-- <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+  </el-row>
+  
+    <el-row>
+   <el-col :span="12">
+  <el-form-item label="状态">
+    <el-radio-group  style="width:300px;"  v-model="form.resource">
+      <el-radio label="1">启用</el-radio>
+      <el-radio label="2">禁用</el-radio>
+    </el-radio-group>
+  </el-form-item>
+   </el-col>
+  </el-row>
+       </template>
+    </el-form>
+
+  <div class="block" v-else>
+  <span class="demonstration">权限设置</span>
+  <el-cascader
+  style="width:300px;margin-left:20px;"
+    :options="options"
+    :props="props"
+    collapse-tags
+    clearable>
+    </el-cascader>
+   </div>
+     
+    <div slot="footer" class="dialog-footer" >
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+        //   options: [{
+        //   value: '已支付',
+        //   label: '已支付'
+        // },
+        // ],
+         props: { multiple: true },
+          options: [{
+          value: 1,
+          label: '东南',
+          children: [{
+            value: 2,
+            label: '上海',
+            children: [
+              { value: 3, label: '普陀' },
+              { value: 4, label: '黄埔' },
+              { value: 5, label: '徐汇' }
+            ]
+          }, {
+            value: 7,
+            label: '江苏',
+            children: [
+              { value: 8, label: '南京' },
+              { value: 9, label: '苏州' },
+              { value: 10, label: '无锡' }
+            ]
+          }, {
+            value: 12,
+            label: '浙江',
+            children: [
+              { value: 13, label: '杭州' },
+              { value: 14, label: '宁波' },
+              { value: 15, label: '嘉兴' }
+            ]
+          }]
+        }, {
+          value: 17,
+          label: '西北',
+          children: [{
+            value: 18,
+            label: '陕西',
+            children: [
+              { value: 19, label: '西安' },
+              { value: 20, label: '延安' }
+            ]
+          }, {
+            value: 21,
+            label: '新疆维吾尔族自治区',
+            children: [
+              { value: 22, label: '乌鲁木齐' },
+              { value: 23, label: '克拉玛依' }
+            ]
+          }]
+        }],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+          resource:'1'
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '权限设置'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/pricing/care/index.vue b/src/views/pricing/care/index.vue
new file mode 100644
index 0000000..aca3bf7
--- /dev/null
+++ b/src/views/pricing/care/index.vue
@@ -0,0 +1,262 @@
+<template>
+  <div class="table-container">
+    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
+  <el-form-item label="">
+    <el-input style="width:200px;" clearable v-model="queryForm.user" placeholder="请输入关键词"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="onSubmit">查询</el-button>
+  </el-form-item>
+</el-form>
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">洗护价格添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+      <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+      <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+      <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+      <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+      <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+      <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+      <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">权限设置</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button  type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+     response => {
+     window.location.href = response.data.url;
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+  ).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+  })
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/pricing/commission/components/TableEdit.vue b/src/views/pricing/commission/components/TableEdit.vue
new file mode 100644
index 0000000..7438819
--- /dev/null
+++ b/src/views/pricing/commission/components/TableEdit.vue
@@ -0,0 +1,189 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="账号" prop="账号">
+        <el-input style="width:300px;" placeholder="请输入账号" :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="密码" prop="密码">
+        <el-input style="width:300px;" type="password" placeholder="请输入账号" :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+    <el-row>
+   <el-col :span="12">
+   <el-form-item label="昵称" prop="昵称">
+        <el-input style="width:300px;" placeholder="请输入账号" :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-form-item label="选择角色类型">
+   <el-checkbox-group class="group" v-model="checkedCities" @change="handleCheckedCitiesChange">
+   <el-checkbox  
+    v-for="(value,index) in cities" 
+    :label="value.id"
+    :key="index">{{value.text}}
+    </el-checkbox>
+   </el-checkbox-group>
+  </el-form-item>
+
+   <el-form-item label="状态">
+    <el-radio-group v-model="form.resource">
+      <el-radio label="显示"></el-radio>
+      <el-radio label="隐藏"></el-radio>
+    </el-radio-group>
+  </el-form-item>
+   <!-- <el-row>
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+  <script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+  export default {
+  name: 'TableEdit',
+  data() {
+  return {
+  ids:true,
+  status:'',
+  checkedCities: [],
+  cities: [
+{text:'超级管理员',id:0},
+{text:'管理员',id:1},
+{text:'主管',id:2},
+{text:'队长',id:3}
+],
+//   options:[
+//   { "label": "选项1", "value": "1" },
+//   { "label": "选项2", "value": "2" },
+//   { "label": "选项3", "value": "3" }
+// ],
+  form: {
+  券包名称:'',
+  券包价格:'',
+  package1:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  package2:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  package3:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  },
+  rules: {
+  // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+  券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+  券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+  },
+  title: '',
+  dialogFormVisible: false,
+  }
+  },
+  created() {
+  },
+  methods:{
+  showEdit(row,ids){
+  this.status = row
+  if (!row) {
+  this.title = '添加1'
+  this.ids = false
+  this.form.券包名称='',
+  this.form. 券包价格='',
+  this.form.package1 = {}
+  this.form.package2 = {}
+  this.form.package3 = {}
+  }
+  else if (ids) {
+  this.ids = ids
+  this.title = '查看'
+  this.form = Object.assign({}, row)
+  }
+  else{
+  this.title = '编辑'
+  this.ids = false
+  this.form = Object.assign({}, row)
+  }
+  this.dialogFormVisible = true
+  },
+  close(){
+  // this.$refs['form'].resetFields()
+  // this.form = this.$options.data().form
+  this.dialogFormVisible = false
+  this.form.券包名称='',
+  this.form. 券包价格='',
+  this.form.package1 = {}
+  this.form.package2 = {}
+  this.form.package3 = {}
+  },
+  save() {
+  if(this.status){
+  this.$refs['form'].validate(async (valid) => {
+  if (valid) {
+  const { msg } = await editPackage(this.form)
+  this.$message({
+  message:msg,
+  duration:2000,
+  type:'success'
+  })
+  // this.$baseMessage(msg, 'success')
+  this.$refs['form'].resetFields()
+  this.$parent.fetchData();
+  this.dialogFormVisible = false
+  this.form = this.$options.data().form
+  } 
+  else 
+  {
+  return false
+  }
+  })
+  }
+  else
+  {
+  this.$refs['form'].validate(async (valid) => {
+  if (valid) {
+  const { msg } = await addPackage(this.form)
+  this.$message({
+  message:msg,
+  duration:2000,
+  type:'success'
+  })
+  // this.$baseMessage(msg, 'success')
+  this.$refs['form'].resetFields()
+  this.$parent.fetchData();
+  this.dialogFormVisible = false
+  this.form = this.$options.data().form
+  } else {
+  return false
+  }
+  })
+  }
+  },
+  },
+  }
+  </script>
diff --git a/src/views/pricing/commission/index.vue b/src/views/pricing/commission/index.vue
new file mode 100644
index 0000000..5c593e9
--- /dev/null
+++ b/src/views/pricing/commission/index.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="table-container">
+       <el-form :inline="true" :model="queryForm" class="demo-form-inline">
+  <el-form-item label="">
+    <el-input style="width:200px;" clearable v-model="queryForm.user" placeholder="请输入关键词"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="onSubmit">查询</el-button>
+  </el-form-item>
+</el-form>
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加1</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <!-- <el-button  type="text" @click="handleView(row,ids)">查看</el-button> -->
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/publicWelfare/adopt/components/TableEdit.vue b/src/views/publicWelfare/adopt/components/TableEdit.vue
new file mode 100644
index 0000000..86252f3
--- /dev/null
+++ b/src/views/publicWelfare/adopt/components/TableEdit.vue
@@ -0,0 +1,214 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加2'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/publicWelfare/adopt/index.vue b/src/views/publicWelfare/adopt/index.vue
new file mode 100644
index 0000000..49f342b
--- /dev/null
+++ b/src/views/publicWelfare/adopt/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">领养宠物录入</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/publicWelfare/points/components/TableEdit.vue b/src/views/publicWelfare/points/components/TableEdit.vue
new file mode 100644
index 0000000..184c28d
--- /dev/null
+++ b/src/views/publicWelfare/points/components/TableEdit.vue
@@ -0,0 +1,211 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+  <script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+  export default {
+  name: 'TableEdit',
+  data() {
+  return {
+  ids:true,
+  status:'',
+  options: [{
+  value: '已支付',
+  label: '已支付'
+  },
+  ],
+  form: {
+  券包名称:'',
+  券包价格:'',
+  package1:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  package2:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  package3:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  },
+  rules: {
+  // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+  券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+  券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+  },
+  title: '',
+  dialogFormVisible: false,
+  }
+  },
+  created() {
+  },
+  methods:{
+  showEdit(row,ids){
+  this.status = row
+  if (!row) {
+  this.title = '添加1'
+  this.ids = false
+  this.form.券包名称='',
+  this.form. 券包价格='',
+  this.form.package1 = {}
+  this.form.package2 = {}
+  this.form.package3 = {}
+  }
+  else if (ids) {
+  this.ids = ids
+  this.title = '查看'
+  this.form = Object.assign({}, row)
+  }
+  else{
+  this.title = '编辑'
+  this.ids = false
+  this.form = Object.assign({}, row)
+  }
+  this.dialogFormVisible = true
+  },
+  close(){
+  // this.$refs['form'].resetFields()
+  // this.form = this.$options.data().form
+  this.dialogFormVisible = false
+  this.form.券包名称='',
+  this.form. 券包价格='',
+  this.form.package1 = {}
+  this.form.package2 = {}
+  this.form.package3 = {}
+  },
+  save() {
+  if(this.status){
+  this.$refs['form'].validate(async (valid) => {
+  if (valid) {
+  const { msg } = await editPackage(this.form)
+  this.$message({
+  message:msg,
+  duration:2000,
+  type:'success'
+  })
+  // this.$baseMessage(msg, 'success')
+  this.$refs['form'].resetFields()
+  this.$parent.fetchData();
+  this.dialogFormVisible = false
+  this.form = this.$options.data().form
+  } 
+  else 
+  {
+  return false
+  }
+  })
+  }
+  else
+  {
+  this.$refs['form'].validate(async (valid) => {
+  if (valid) {
+  const { msg } = await addPackage(this.form)
+  this.$message({
+  message:msg,
+  duration:2000,
+  type:'success'
+  })
+  // this.$baseMessage(msg, 'success')
+  this.$refs['form'].resetFields()
+  this.$parent.fetchData();
+  this.dialogFormVisible = false
+  this.form = this.$options.data().form
+  } else {
+  return false
+  }
+  })
+  }
+  },
+  },
+  }
+  </script>
diff --git a/src/views/publicWelfare/points/index.vue b/src/views/publicWelfare/points/index.vue
new file mode 100644
index 0000000..175ebdf
--- /dev/null
+++ b/src/views/publicWelfare/points/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">积分捐助任务添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/publicWelfare/public/components/TableEdit.vue b/src/views/publicWelfare/public/components/TableEdit.vue
new file mode 100644
index 0000000..a559633
--- /dev/null
+++ b/src/views/publicWelfare/public/components/TableEdit.vue
@@ -0,0 +1,214 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/publicWelfare/public/index.vue b/src/views/publicWelfare/public/index.vue
new file mode 100644
index 0000000..a250cee
--- /dev/null
+++ b/src/views/publicWelfare/public/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">公益行内容录入</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/register/index.vue b/src/views/register/index.vue
new file mode 100644
index 0000000..3082603
--- /dev/null
+++ b/src/views/register/index.vue
@@ -0,0 +1,692 @@
+<template>
+  <div class="register-container">
+    <div class="register-background">
+      <div class="background-overlay"></div>
+      <div class="floating-shapes">
+        <div class="shape shape-1"></div>
+        <div class="shape shape-2"></div>
+        <div class="shape shape-3"></div>
+        <div class="shape shape-4"></div>
+      </div>
+    </div>
+
+    <div class="register-content">
+      <div class="register-left">
+        <div class="welcome-section">
+          <div class="logo-container">
+            <div class="logo-icon">
+              <i class="el-icon-s-platform"></i>
+            </div>
+            <h1 class="logo-text">{{ title }}</h1>
+          </div>
+          <h2 class="welcome-title">创建账户</h2>
+          <p class="welcome-subtitle">注册新账户以开始使用系统</p>
+          <div class="feature-list">
+            <div class="feature-item">
+              <i class="el-icon-check"></i>
+              <span>现代化的管理界面</span>
+            </div>
+            <div class="feature-item">
+              <i class="el-icon-check"></i>
+              <span>强大的功能模块</span>
+            </div>
+            <div class="feature-item">
+              <i class="el-icon-check"></i>
+              <span>安全可靠的数据保护</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="register-right">
+        <div class="register-card">
+          <div class="card-header">
+            <h3 class="register-title">用户注册</h3>
+            <p class="register-subtitle">请填写以下信息创建账户</p>
+          </div>
+
+          <el-form ref="registerForm" class="register-form" :model="form" :rules="registerRules" size="mini">
+            <el-form-item prop="username">
+              <div class="input-wrapper">
+                <div class="input-icon">
+                  <i class="el-icon-user"></i>
+                </div>
+                <el-input
+                  v-model.trim="form.username"
+                  v-focus
+                  auto-complete="off"
+                  placeholder="请输入用户名"
+                  class="custom-input"
+                  type="text"
+                ></el-input>
+              </div>
+            </el-form-item>
+
+            <el-form-item prop="phone">
+              <div class="input-wrapper">
+                <div class="input-icon">
+                  <i class="el-icon-mobile-phone"></i>
+                </div>
+                <el-input
+                  v-model.trim="form.phone"
+                  autocomplete="off"
+                  maxlength="11"
+                  placeholder="请输入手机号"
+                  show-word-limit
+                  type="text"
+                  class="custom-input"
+                ></el-input>
+              </div>
+            </el-form-item>
+
+            <el-form-item prop="phoneCode" style="position: relative">
+              <div class="input-wrapper">
+                <div class="input-icon">
+                  <i class="el-icon-message"></i>
+                </div>
+                <el-input v-model.trim="form.phoneCode" placeholder="手机验证码" type="text" class="custom-input"></el-input>
+              </div>
+              <el-button class="phone-code" :disabled="isGetphone" type="primary" @click="getPhoneCode">
+                {{ phoneCode }}
+              </el-button>
+            </el-form-item>
+
+            <el-form-item prop="password">
+              <div class="input-wrapper">
+                <div class="input-icon">
+                  <i class="el-icon-lock"></i>
+                </div>
+                <el-input
+                  v-model.trim="form.password"
+                  autocomplete="new-password"
+                  placeholder="设置密码"
+                  type="password"
+                  class="custom-input"
+                ></el-input>
+              </div>
+            </el-form-item>
+
+            <el-button class="register-btn" type="primary" @click.native.prevent="handleReister">注册</el-button>
+
+            <div class="login-link">
+              <span>已有账户？</span>
+              <router-link to="/login" class="link">立即登录</router-link>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { isPassword, isPhone } from '@/utils/validate'
+  import { register } from '@/api/user'
+
+  export default {
+    name: 'Register',
+    directives: {
+      focus: {
+        inserted(el) {
+          el.querySelector('input').focus()
+        },
+      },
+    },
+    data() {
+      const validateusername = (rule, value, callback) => {
+        if ('' == value) {
+          callback(new Error('用户名不能为空'))
+        } else {
+          callback()
+        }
+      }
+      const validatePassword = (rule, value, callback) => {
+        if (!isPassword(value)) {
+          callback(new Error('密码不能少于6位'))
+        } else {
+          callback()
+        }
+      }
+      const validatePhone = (rule, value, callback) => {
+        if (!isPhone(value)) {
+          callback(new Error('请输入正确的手机号'))
+        } else {
+          callback()
+        }
+      }
+      return {
+        isGetphone: false,
+        getPhoneIntval: null,
+        phoneCode: '获取验证码',
+        showRegister: false,
+        nodeEnv: process.env.NODE_ENV,
+        title: this.$baseTitle,
+        form: {},
+        registerRules: {
+          username: [
+            { required: true, trigger: 'blur', message: '请输入用户名' },
+            { max: 20, trigger: 'blur', message: '最多不能超过20个字' },
+            { validator: validateusername, trigger: 'blur' },
+          ],
+          phone: [
+            { required: true, trigger: 'blur', message: '请输入手机号码' },
+            { validator: validatePhone, trigger: 'blur' },
+          ],
+          password: [
+            { required: true, trigger: 'blur', message: '请输入密码' },
+            { validator: validatePassword, trigger: 'blur' },
+          ],
+          phoneCode: [{ required: true, trigger: 'blur', message: '请输入手机验证码' }],
+        },
+        loading: false,
+        passwordType: 'password',
+      }
+    },
+    created() {
+      document.body.style.overflow = 'hidden'
+    },
+    beforeDestroy() {
+      document.body.style.overflow = 'auto'
+      clearInterval(this.getPhoneIntval)
+      this.getPhoneIntval = null
+    },
+    methods: {
+      getPhoneCode() {
+        if (!isPhone(this.form.phone)) {
+          //this.$baseMessage('请输入手机号', 'error')
+          this.$refs['registerForm'].validateField('phone')
+          return
+        }
+        this.isGetphone = true
+        let n = 60
+        this.getPhoneIntval = setInterval(() => {
+          if (n > 0) {
+            n--
+            this.phoneCode = `重新获取(${n}s)`
+          } else {
+            clearInterval(this.getPhoneIntval)
+            this.getPhoneIntval = null
+            this.phoneCode = '获取验证码'
+            this.isGetphone = false
+          }
+        }, 1000)
+      },
+      handleReister() {
+        this.$refs['registerForm'].validate(async (valid) => {
+          if (valid) {
+            const param = {
+              username: this.form.username,
+              phone: this.form.phone,
+              password: this.form.password,
+              phoneCode: this.form.phoneCode,
+            }
+            const { msg } = await register(param)
+            this.$baseMessage(msg, 'success')
+          }
+        })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .register-container {
+    position: relative;
+    height: 100vh;
+    overflow: hidden;
+    background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .register-background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+
+      .background-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(10px);
+      }
+
+      .floating-shapes {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+
+        .shape {
+          position: absolute;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.1);
+          animation: float 6s ease-in-out infinite;
+
+          &.shape-1 {
+            width: 80px;
+            height: 80px;
+            top: 20%;
+            left: 10%;
+            animation-delay: 0s;
+          }
+
+          &.shape-2 {
+            width: 120px;
+            height: 120px;
+            top: 60%;
+            right: 10%;
+            animation-delay: 2s;
+          }
+
+          &.shape-3 {
+            width: 60px;
+            height: 60px;
+            top: 40%;
+            right: 20%;
+            animation-delay: 4s;
+          }
+
+          &.shape-4 {
+            width: 100px;
+            height: 100px;
+            bottom: 20%;
+            left: 20%;
+            animation-delay: 1s;
+          }
+        }
+      }
+    }
+
+    .register-content {
+      position: relative;
+      z-index: 2;
+      display: flex;
+      width: 100%;
+      max-width: 1200px;
+      height: 600px;
+      background: rgba(255, 255, 255, 0.95);
+      border-radius: 20px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+      backdrop-filter: blur(20px);
+      overflow: hidden;
+
+      .register-left {
+        flex: 1;
+        background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
+        color: white;
+        padding: 60px 40px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+          opacity: 0.3;
+        }
+
+        .welcome-section {
+          position: relative;
+          z-index: 1;
+
+          .logo-container {
+            display: flex;
+            align-items: center;
+            margin-bottom: 40px;
+
+            .logo-icon {
+              width: 60px;
+              height: 60px;
+              background: rgba(255, 255, 255, 0.2);
+              border-radius: 15px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-right: 20px;
+              backdrop-filter: blur(10px);
+
+              i {
+                font-size: 30px;
+                color: white;
+              }
+            }
+
+            .logo-text {
+              font-size: 28px;
+              font-weight: 700;
+              margin: 0;
+              background: linear-gradient(45deg, #fff, #f0f0f0);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              background-clip: text;
+            }
+          }
+
+          .welcome-title {
+            font-size: 36px;
+            font-weight: 700;
+            margin: 0 0 16px 0;
+            line-height: 1.2;
+          }
+
+          .welcome-subtitle {
+            font-size: 18px;
+            opacity: 0.9;
+            margin: 0 0 40px 0;
+            line-height: 1.5;
+          }
+
+          .feature-list {
+            .feature-item {
+              display: flex;
+              align-items: center;
+              margin-bottom: 20px;
+              font-size: 16px;
+
+              i {
+                width: 24px;
+                height: 24px;
+                background: rgba(255, 255, 255, 0.2);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-right: 16px;
+                font-size: 12px;
+              }
+
+              span {
+                font-weight: 500;
+              }
+            }
+          }
+        }
+      }
+
+      .register-right {
+        flex: 1;
+        padding: 60px 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .register-card {
+          width: 100%;
+          max-width: 400px;
+
+          .card-header {
+            text-align: center;
+            margin-bottom: 30px;
+
+            .register-title {
+              font-size: 28px;
+              font-weight: 700;
+              color: #333;
+              margin: 0 0 8px 0;
+            }
+
+            .register-subtitle {
+              font-size: 16px;
+              color: #666;
+              margin: 0;
+            }
+          }
+
+          .register-form {
+            .input-wrapper {
+              position: relative;
+              display: flex;
+              align-items: center;
+              margin-bottom: 16px;
+
+              .input-icon {
+                position: absolute;
+                left: 16px;
+                z-index: 2;
+                width: 20px;
+                height: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #999;
+                font-size: 16px;
+              }
+
+              .custom-input {
+                ::v-deep .el-input__inner {
+                  width: 100%;
+                  height: 46px;
+                  padding-left: 50px;
+                  padding-right: 20px;
+                  border: 2px solid #f0f0f0;
+                  border-radius: 12px;
+                  font-size: 16px;
+                  background: #fafafa;
+                  transition: all 0.3s ease;
+
+                  &:focus {
+                    border-color: #4d8af0;
+                    background: white;
+                    box-shadow: 0 0 0 3px rgba(77, 138, 240, 0.1);
+                  }
+
+                  &::placeholder {
+                    color: #999;
+                  }
+                }
+              }
+            }
+
+            .phone-code {
+              position: absolute;
+              right: 0;
+              top: 0;
+              width: 120px;
+              height: 46px;
+              background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
+              border: none;
+              border-radius: 12px;
+              font-size: 14px;
+              font-weight: 600;
+              color: white;
+              cursor: pointer;
+              transition: all 0.3s ease;
+
+              &:hover {
+                opacity: 0.9;
+                box-shadow: 0 4px 12px rgba(77, 138, 240, 0.3);
+              }
+
+              &:disabled {
+                opacity: 0.6;
+                cursor: not-allowed;
+              }
+            }
+
+            .register-btn {
+              width: 100%;
+              height: 46px;
+              background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
+              border: none;
+              border-radius: 12px;
+              font-size: 16px;
+              font-weight: 600;
+              color: white;
+              cursor: pointer;
+              transition: all 0.3s ease;
+              margin: 0 0 20px;
+
+              &:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 8px 20px rgba(77, 138, 240, 0.3);
+              }
+
+              &:active {
+                transform: translateY(0);
+              }
+            }
+
+            .login-link {
+              text-align: center;
+              font-size: 14px;
+              color: #666;
+
+              .link {
+                color: #4d8af0;
+                text-decoration: none;
+                font-weight: 600;
+                margin-left: 4px;
+                transition: color 0.3s ease;
+
+                &:hover {
+                  color: #1a56db;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0px) rotate(0deg);
+    }
+    50% {
+      transform: translateY(-20px) rotate(180deg);
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .register-container {
+      padding: 15px;
+
+      .register-content {
+        flex-direction: column;
+        height: auto;
+        max-height: 90vh;
+        overflow-y: auto;
+        margin: 10px;
+        border-radius: 16px;
+        max-width: 100%;
+
+        .register-left {
+          padding: 25px 20px;
+          text-align: center;
+
+          .welcome-section {
+            .logo-container {
+              justify-content: center;
+              margin-bottom: 15px;
+
+              .logo-icon {
+                width: 40px;
+                height: 40px;
+                border-radius: 10px;
+
+                i {
+                  font-size: 20px;
+                }
+              }
+
+              .logo-text {
+                font-size: 22px;
+              }
+            }
+
+            .welcome-title {
+              font-size: 24px;
+            }
+
+            .welcome-subtitle {
+              font-size: 16px;
+              margin-bottom: 25px;
+            }
+
+            .feature-list {
+              .feature-item {
+                margin-bottom: 15px;
+                font-size: 14px;
+
+                i {
+                  width: 20px;
+                  height: 20px;
+                  margin-right: 12px;
+                  font-size: 10px;
+                }
+              }
+            }
+          }
+        }
+
+        .register-right {
+          padding: 30px 20px;
+
+          .register-card {
+            .card-header {
+              margin-bottom: 20px;
+
+              .register-title {
+                font-size: 24px;
+              }
+
+              .register-subtitle {
+                font-size: 14px;
+              }
+            }
+
+            .register-form {
+              .input-wrapper {
+                margin-bottom: 16px;
+              }
+
+              .phone-code {
+                height: 46px;
+                width: 100px;
+                font-size: 13px;
+              }
+
+              .register-btn {
+                height: 46px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep {
+    .el-form-item {
+      margin-bottom: 16px;
+
+      &__error {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        font-size: $base-font-size-small;
+        line-height: 18px;
+        color: $base-color-red;
+      }
+    }
+  }
+</style>
diff --git a/src/views/settlement/sett/components/TableEdit.vue b/src/views/settlement/sett/components/TableEdit.vue
new file mode 100644
index 0000000..13b7ad0
--- /dev/null
+++ b/src/views/settlement/sett/components/TableEdit.vue
@@ -0,0 +1,222 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules" v-if="!ids">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="角色名称" prop="角色名称">
+        <el-input style="width:300px;" :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="角色描述" prop="角色描述">
+     <el-input  style="width:300px;" type="textarea" v-model="form.券包价格"></el-input>
+        <!-- <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+  </el-row>
+  
+    <el-row>
+   <el-col :span="12">
+  <el-form-item label="状态">
+    <el-radio-group  style="width:300px;"  v-model="form.resource">
+      <el-radio label="1">启用</el-radio>
+      <el-radio label="2">禁用</el-radio>
+    </el-radio-group>
+  </el-form-item>
+   </el-col>
+  </el-row>
+       </template>
+    </el-form>
+
+  <div class="block" v-else>
+  <span class="demonstration">权限设置</span>
+  <el-cascader
+  style="width:300px;margin-left:20px;"
+    :options="options"
+    :props="props"
+    collapse-tags
+    clearable>
+    </el-cascader>
+   </div>
+     
+    <div slot="footer" class="dialog-footer" >
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+        //   options: [{
+        //   value: '已支付',
+        //   label: '已支付'
+        // },
+        // ],
+         props: { multiple: true },
+          options: [{
+          value: 1,
+          label: '东南',
+          children: [{
+            value: 2,
+            label: '上海',
+            children: [
+              { value: 3, label: '普陀' },
+              { value: 4, label: '黄埔' },
+              { value: 5, label: '徐汇' }
+            ]
+          }, {
+            value: 7,
+            label: '江苏',
+            children: [
+              { value: 8, label: '南京' },
+              { value: 9, label: '苏州' },
+              { value: 10, label: '无锡' }
+            ]
+          }, {
+            value: 12,
+            label: '浙江',
+            children: [
+              { value: 13, label: '杭州' },
+              { value: 14, label: '宁波' },
+              { value: 15, label: '嘉兴' }
+            ]
+          }]
+        }, {
+          value: 17,
+          label: '西北',
+          children: [{
+            value: 18,
+            label: '陕西',
+            children: [
+              { value: 19, label: '西安' },
+              { value: 20, label: '延安' }
+            ]
+          }, {
+            value: 21,
+            label: '新疆维吾尔族自治区',
+            children: [
+              { value: 22, label: '乌鲁木齐' },
+              { value: 23, label: '克拉玛依' }
+            ]
+          }]
+        }],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+          resource:'1'
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '权限设置'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/settlement/sett/index.vue b/src/views/settlement/sett/index.vue
new file mode 100644
index 0000000..2fe4eed
--- /dev/null
+++ b/src/views/settlement/sett/index.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="table-container">
+    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
+  <el-form-item label="">
+    <el-input style="width:200px;" clearable v-model="queryForm.user" placeholder="请输入关键词"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="onSubmit">查询</el-button>
+  </el-form-item>
+</el-form>
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">权限设置</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/test/index.vue b/src/views/test/index.vue
new file mode 100644
index 0000000..cd3fc66
--- /dev/null
+++ b/src/views/test/index.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="test-container">
+    <el-divider content-position="left">你可以在这里写demo</el-divider>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'Test',
+    data() {
+      return { show: true }
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  }
+</script>
diff --git a/src/views/vab/backToTop/index.vue b/src/views/vab/backToTop/index.vue
new file mode 100644
index 0000000..d9efe2a
--- /dev/null
+++ b/src/views/vab/backToTop/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="back-to-top-container">
+    <vab-page-header description="页面滚动时显示返回顶部按钮，提升用户体验" :icon="['fas', 'arrow-up']" title="返回顶部" />
+
+    <div v-for="(item, index) in 100" :key="index" style="padding: 20px">测试滚轮显示返回顶部-{{ index }}</div>
+    <!-- <el-tooltip placement="top" content="返回顶部"><vab-back-to-top transition-name="fade" /></el-tooltip> -->
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'BackToTop',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {}
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .placeholder-container div {
+    margin: 10px;
+  }
+</style>
diff --git a/src/views/vab/chart/index.vue b/src/views/vab/chart/index.vue
new file mode 100644
index 0000000..7b21b8f
--- /dev/null
+++ b/src/views/vab/chart/index.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="chart-container">
+    <vab-page-header description="图表组件示例" :icon="['fas', 'chart-bar']" title="图表" />
+    <el-card shadow="never">
+      <div class="chart-content">
+        <el-alert
+          title="图表组件 - 展示各种数据可视化图表"
+          type="info"
+          show-icon
+          :closable="false"
+        />
+        <el-row :gutter="20" class="chart-row">
+          <el-col :span="12">
+            <div class="chart-wrapper">
+              <div ref="barChart" class="chart"></div>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="chart-wrapper">
+              <div ref="lineChart" class="chart"></div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" class="chart-row">
+          <el-col :span="12">
+            <div class="chart-wrapper">
+              <div ref="pieChart" class="chart"></div>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="chart-wrapper">
+              <div ref="radarChart" class="chart"></div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+  import * as echarts from 'echarts'
+
+  export default {
+    name: 'Chart',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {
+        barChart: null,
+        lineChart: null,
+        pieChart: null,
+        radarChart: null,
+      }
+    },
+    mounted() {
+      this.initCharts()
+    },
+    beforeDestroy() {
+      if (this.barChart) {
+        this.barChart.dispose()
+      }
+      if (this.lineChart) {
+        this.lineChart.dispose()
+      }
+      if (this.pieChart) {
+        this.pieChart.dispose()
+      }
+      if (this.radarChart) {
+        this.radarChart.dispose()
+      }
+    },
+    methods: {
+      initCharts() {
+        // 初始化柱状图
+        this.barChart = echarts.init(this.$refs.barChart)
+        this.barChart.setOption({
+          title: {
+            text: '柱状图示例',
+            subtext: '数据展示'
+          },
+          tooltip: {},
+          xAxis: {
+            type: 'category',
+            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            name: '销量',
+            type: 'bar',
+            data: [120, 200, 150, 80, 70, 110, 130],
+            itemStyle: {
+              color: '#409EFF'
+            }
+          }]
+        })
+
+        // 初始化折线图
+        this.lineChart = echarts.init(this.$refs.lineChart)
+        this.lineChart.setOption({
+          title: {
+            text: '折线图示例',
+            subtext: '趋势展示'
+          },
+          tooltip: {},
+          xAxis: {
+            type: 'category',
+            data: ['1月', '2月', '3月', '4月', '5月', '6月']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            name: '访问量',
+            type: 'line',
+            data: [120, 132, 101, 134, 90, 230],
+            itemStyle: {
+              color: '#67C23A'
+            },
+            smooth: true
+          }]
+        })
+
+        // 初始化饼图
+        this.pieChart = echarts.init(this.$refs.pieChart)
+        this.pieChart.setOption({
+          title: {
+            text: '饼图示例',
+            subtext: '比例展示'
+          },
+          tooltip: {},
+          series: [{
+            name: '访问来源',
+            type: 'pie',
+            radius: '55%',
+            data: [
+              { value: 335, name: '直接访问' },
+              { value: 310, name: '邮件营销' },
+              { value: 234, name: '联盟广告' },
+              { value: 135, name: '视频广告' },
+              { value: 1548, name: '搜索引擎' }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }]
+        })
+
+        // 初始化雷达图
+        this.radarChart = echarts.init(this.$refs.radarChart)
+        this.radarChart.setOption({
+          title: {
+            text: '雷达图示例',
+            subtext: '能力分析'
+          },
+          tooltip: {},
+          radar: {
+            indicator: [
+              { name: '销售', max: 6500 },
+              { name: '管理', max: 16000 },
+              { name: '信息技术', max: 30000 },
+              { name: '客服', max: 38000 },
+              { name: '研发', max: 52000 },
+              { name: '市场', max: 25000 }
+            ]
+          },
+          series: [{
+            name: '预算 vs 开销',
+            type: 'radar',
+            data: [
+              {
+                value: [4300, 10000, 28000, 35000, 50000, 19000],
+                name: '预算分配'
+              },
+              {
+                value: [5000, 14000, 28000, 31000, 42000, 21000],
+                name: '实际开销'
+              }
+            ]
+          }]
+        })
+
+        // 监听窗口大小变化，自适应图表
+        window.addEventListener('resize', this.resizeCharts)
+      },
+      
+      resizeCharts() {
+        if (this.barChart) {
+          this.barChart.resize()
+        }
+        if (this.lineChart) {
+          this.lineChart.resize()
+        }
+        if (this.pieChart) {
+          this.pieChart.resize()
+        }
+        if (this.radarChart) {
+          this.radarChart.resize()
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .chart-container {
+    padding: 15px;
+    background: $base-color-white;
+    
+    .chart-content {
+      .chart-row {
+        margin-bottom: 20px;
+      }
+      
+      .chart-wrapper {
+        .chart {
+          width: 100%;
+          height: 400px;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/vab/editor/index.vue b/src/views/vab/editor/index.vue
new file mode 100644
index 0000000..5dc0e9e
--- /dev/null
+++ b/src/views/vab/editor/index.vue
@@ -0,0 +1,339 @@
+<template>
+  <div class="editor-container">
+    <vab-page-header description="编辑器组件示例" :icon="['fas', 'edit']" title="编辑器" />
+    <el-card shadow="never">
+      <div class="editor-content">
+        <div class="editor-demo">
+          <h3>富文本编辑器</h3>
+          <div class="editor-toolbar">
+            <el-button-group>
+              <el-button @click="formatText('bold')" :class="{ active: isBold }">
+                <vab-icon :icon="['fas', 'bold']" />
+              </el-button>
+              <el-button @click="formatText('italic')" :class="{ active: isItalic }">
+                <vab-icon :icon="['fas', 'italic']" />
+              </el-button>
+              <el-button @click="formatText('underline')" :class="{ active: isUnderline }">
+                <vab-icon :icon="['fas', 'underline']" />
+              </el-button>
+            </el-button-group>
+
+            <el-button-group style="margin-left: 10px">
+              <el-button @click="formatText('justifyLeft')">
+                <vab-icon :icon="['fas', 'align-left']" />
+              </el-button>
+              <el-button @click="formatText('justifyCenter')">
+                <vab-icon :icon="['fas', 'align-center']" />
+              </el-button>
+              <el-button @click="formatText('justifyRight')">
+                <vab-icon :icon="['fas', 'align-right']" />
+              </el-button>
+            </el-button-group>
+
+            <el-select v-model="fontSize" @change="changeFontSize" size="small" style="margin-left: 10px; width: 100px">
+              <el-option label="小" value="1"></el-option>
+              <el-option label="中" value="3"></el-option>
+              <el-option label="大" value="5"></el-option>
+              <el-option label="很大" value="7"></el-option>
+            </el-select>
+
+            <el-button @click="insertImage" style="margin-left: 10px" size="small">
+              <vab-icon :icon="['fas', 'image']" />
+              插入图片
+            </el-button>
+
+            <el-button @click="insertLink" style="margin-left: 10px" size="small">
+              <vab-icon :icon="['fas', 'link']" />
+              插入链接
+            </el-button>
+          </div>
+
+          <div class="editor-wrapper">
+            <div
+              ref="editor"
+              class="editor"
+              contenteditable="true"
+              @input="onEditorInput"
+              @keyup="updateToolbarState"
+              @mouseup="updateToolbarState"
+            >
+              <p>欢迎使用富文本编辑器！</p>
+              <p>你可以在这里编辑文本，添加格式，插入图片和链接。</p>
+              <p>尝试使用上方的工具栏来格式化文本。</p>
+            </div>
+          </div>
+
+          <div class="editor-actions">
+            <el-button type="primary" @click="getContent">获取内容</el-button>
+            <el-button @click="clearContent">清空内容</el-button>
+            <el-button @click="setContent">设置示例内容</el-button>
+          </div>
+
+          <div class="editor-preview" v-if="showPreview">
+            <h4>内容预览：</h4>
+            <div class="preview-content" v-html="editorContent"></div>
+          </div>
+        </div>
+
+        <div class="markdown-demo">
+          <h3>Markdown编辑器</h3>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="markdown-editor">
+                <el-input type="textarea" :rows="10" placeholder="请输入Markdown内容" v-model="markdownContent"></el-input>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="markdown-preview">
+                <div class="preview-content" v-html="renderedMarkdown"></div>
+              </div>
+            </el-col>
+          </el-row>
+          <div class="markdown-actions">
+            <el-button @click="insertMarkdownSample">插入示例</el-button>
+            <el-button @click="clearMarkdown">清空内容</el-button>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+  import { marked } from 'marked'
+
+  export default {
+    name: 'Editor',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {
+        isBold: false,
+        isItalic: false,
+        isUnderline: false,
+        fontSize: '3',
+        editorContent: '',
+        showPreview: false,
+        markdownContent:
+          '# 欢迎使用Markdown编辑器\n\n你可以在这里编写Markdown格式的内容：\n\n- 列表项1\n- 列表项2\n\n**粗体文字**\n\n*斜体文字*\n\n[链接](https://github.com)',
+      }
+    },
+    computed: {
+      renderedMarkdown() {
+        return marked(this.markdownContent)
+      },
+    },
+    methods: {
+      formatText(command) {
+        document.execCommand(command, false, null)
+        this.updateToolbarState()
+        this.$refs.editor.focus()
+      },
+
+      changeFontSize(size) {
+        document.execCommand('fontSize', false, size)
+        this.$refs.editor.focus()
+      },
+
+      insertImage() {
+        const url = prompt('请输入图片链接:')
+        if (url) {
+          document.execCommand('insertImage', false, url)
+        }
+        this.$refs.editor.focus()
+      },
+
+      insertLink() {
+        const url = prompt('请输入链接地址:')
+        if (url) {
+          document.execCommand('createLink', false, url)
+        }
+        this.$refs.editor.focus()
+      },
+
+      onEditorInput() {
+        this.editorContent = this.$refs.editor.innerHTML
+      },
+
+      updateToolbarState() {
+        this.isBold = document.queryCommandState('bold')
+        this.isItalic = document.queryCommandState('italic')
+        this.isUnderline = document.queryCommandState('underline')
+      },
+
+      getContent() {
+        this.editorContent = this.$refs.editor.innerHTML
+        this.showPreview = true
+        this.$message.success('内容获取成功')
+      },
+
+      clearContent() {
+        this.$refs.editor.innerHTML = ''
+        this.editorContent = ''
+        this.showPreview = false
+        this.updateToolbarState()
+      },
+
+      setContent() {
+        this.$refs.editor.innerHTML = `
+          <h2>示例标题</h2>
+          <p>这是一段<strong>加粗</strong>的文字。</p>
+          <p>这是一段<em>斜体</em>的文字。</p>
+          <p>这是一段<u>下划线</u>的文字。</p>
+          <ul>
+            <li>列表项1</li>
+            <li>列表项2</li>
+            <li>列表项3</li>
+          </ul>
+        `
+        this.editorContent = this.$refs.editor.innerHTML
+      },
+
+      insertMarkdownSample() {
+        this.markdownContent = `# 标题1
+## 标题2
+### 标题3
+
+这是**粗体**文字，这是*斜体*文字。
+
+- 列表项1
+- 列表项2
+- 列表项3
+
+> 这是一个引用块
+
+\`\`\`javascript
+console.log('Hello, world!')
+\`\`\`
+
+[链接文字](https://github.com)
+`
+      },
+
+      clearMarkdown() {
+        this.markdownContent = ''
+      },
+    },
+
+    mounted() {
+      this.$refs.editor.focus()
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .editor-container {
+    padding: 15px;
+    background: $base-color-white;
+
+    .editor-content {
+      min-height: 400px;
+
+      .editor-demo,
+      .markdown-demo {
+        margin-bottom: 30px;
+
+        h3 {
+          margin: 20px 0;
+          color: #333;
+        }
+
+        .editor-toolbar {
+          padding: 10px;
+          background: #f5f5f5;
+          border-radius: 4px;
+          margin-bottom: 10px;
+
+          .el-button {
+            &.active {
+              background: #409eff;
+              color: white;
+            }
+          }
+        }
+
+        .editor-wrapper {
+          border: 1px solid #dcdfe6;
+          border-radius: 4px;
+          min-height: 200px;
+          margin-bottom: 10px;
+
+          .editor {
+            min-height: 200px;
+            padding: 15px;
+            outline: none;
+
+            &:focus {
+              border-color: #409eff;
+            }
+          }
+        }
+
+        .editor-actions {
+          margin-bottom: 20px;
+        }
+
+        .editor-preview {
+          border: 1px solid #dcdfe6;
+          border-radius: 4px;
+          padding: 15px;
+          background: #fafafa;
+
+          .preview-content {
+            min-height: 100px;
+          }
+        }
+
+        .markdown-editor,
+        .markdown-preview {
+          margin-bottom: 15px;
+        }
+
+        .markdown-preview {
+          border: 1px solid #dcdfe6;
+          border-radius: 4px;
+          padding: 15px;
+          min-height: 220px;
+          background: #fafafa;
+        }
+
+        .preview-content {
+          ::v-deep {
+            h1,
+            h2,
+            h3 {
+              margin: 10px 0;
+            }
+
+            ul,
+            ol {
+              padding-left: 20px;
+            }
+
+            blockquote {
+              margin: 10px 0;
+              padding: 10px 15px;
+              background: #f5f5f5;
+              border-left: 4px solid #409eff;
+            }
+
+            code {
+              padding: 2px 4px;
+              background: #f5f5f5;
+              border-radius: 3px;
+            }
+
+            pre {
+              padding: 10px;
+              background: #f5f5f5;
+              border-radius: 4px;
+              overflow: auto;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/vab/element/index.vue b/src/views/vab/element/index.vue
new file mode 100644
index 0000000..d2bbe25
--- /dev/null
+++ b/src/views/vab/element/index.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="element-container">
+    <vab-page-header
+      description="Element UI 组件的使用示例，包含标签、进度条、按钮、链接等"
+      :icon="['fas', 'cubes']"
+      title="Element UI 组件"
+    />
+    <el-row :gutter="20">
+      <el-col :lg="18" :md="18" :sm="24" :xl="16" :xs="24">
+        <el-button type="primary" @click="dialogVisible = !dialogVisible">element全部文档点这里</el-button>
+        <el-dialog :fullscreen="true" title="element文档" :visible.sync="dialogVisible">
+          <iframe class="element-iframe" frameborder="0" src="https://element.eleme.cn/#/zh-CN/component/installation"></iframe>
+        </el-dialog>
+        <el-divider content-position="left">
+          Tag 标签
+          <a href="https://element.eleme.cn/#/zh-CN/component/tag" target="_blank">文档</a>
+        </el-divider>
+        <el-tag>标签一</el-tag>
+        <el-tag type="success">标签二</el-tag>
+        <el-tag type="info">标签三</el-tag>
+        <el-tag type="warning">标签四</el-tag>
+        <el-tag type="danger">标签五</el-tag>
+        <el-tag effect="dark">标签一</el-tag>
+        <el-tag effect="dark" type="success">标签二</el-tag>
+        <el-tag effect="dark" type="info">标签三</el-tag>
+        <el-tag effect="dark" type="warning">标签四</el-tag>
+        <el-tag effect="dark" type="danger">标签五</el-tag>
+
+        <el-divider content-position="left">
+          进度条
+          <a href="https://element.eleme.cn/#/zh-CN/component/progress" target="_blank">文档</a>
+        </el-divider>
+        <el-progress :percentage="50" />
+        <el-progress :percentage="100" status="success" />
+        <el-progress :percentage="100" status="warning" />
+        <el-progress :percentage="50" status="exception" />
+        <el-progress :percentage="70" :stroke-width="26" :text-inside="true" />
+        <el-progress :percentage="100" status="success" :stroke-width="24" :text-inside="true" />
+        <el-progress :percentage="80" status="warning" :stroke-width="22" :text-inside="true" />
+        <el-progress :percentage="50" status="exception" :stroke-width="20" :text-inside="true" />
+        <el-progress :percentage="0" type="circle" />
+        <el-progress :percentage="25" type="circle" />
+        <el-progress :percentage="100" status="success" type="circle" />
+        <el-progress :percentage="70" status="warning" type="circle" />
+        <el-progress :percentage="50" status="exception" type="circle" />
+
+        <el-divider content-position="left">
+          按钮
+          <a href="https://element.eleme.cn/#/zh-CN/component/button" target="_blank">文档</a>
+        </el-divider>
+        <el-button>默认按钮</el-button>
+        <el-button type="primary">主要按钮</el-button>
+        <el-button type="success">成功按钮</el-button>
+        <el-button type="info">信息按钮</el-button>
+        <el-button type="warning">警告按钮</el-button>
+        <el-button type="danger">危险按钮</el-button>
+        <el-button plain>朴素按钮</el-button>
+        <el-button plain type="primary">主要按钮</el-button>
+        <el-button plain type="success">成功按钮</el-button>
+        <el-button plain type="info">信息按钮</el-button>
+        <el-button plain type="warning">警告按钮</el-button>
+        <el-button plain type="danger">危险按钮</el-button>
+        <el-button round>圆角按钮</el-button>
+        <el-button round type="primary">主要按钮</el-button>
+        <el-button round type="success">成功按钮</el-button>
+        <el-button round type="info">信息按钮</el-button>
+        <el-button round type="warning">警告按钮</el-button>
+        <el-button round type="danger">危险按钮</el-button>
+        <el-button circle icon="el-icon-search" />
+        <el-button circle icon="el-icon-edit" type="primary" />
+        <el-button circle icon="el-icon-check" type="success" />
+        <el-button circle icon="el-icon-message" type="info" />
+        <el-button circle icon="el-icon-star-off" type="warning" />
+        <el-button circle icon="el-icon-delete" type="danger" />
+        <el-button disabled>默认按钮</el-button>
+        <el-button disabled type="primary">主要按钮</el-button>
+        <el-button disabled type="success">成功按钮</el-button>
+        <el-button disabled type="info">信息按钮</el-button>
+        <el-button disabled type="warning">警告按钮</el-button>
+        <el-button disabled type="danger">危险按钮</el-button>
+        <el-button icon="el-icon-edit" type="primary" />
+        <el-button icon="el-icon-share" type="primary" />
+        <el-button icon="el-icon-delete" type="primary" />
+        <el-button icon="el-icon-search" type="primary">搜索</el-button>
+        <el-button type="primary">
+          上传
+          <i class="el-icon-upload el-icon--right"></i>
+        </el-button>
+        <el-button :loading="true" type="primary">加载中</el-button>
+
+        <el-divider content-position="left">
+          文字链接
+          <a href="https://element.eleme.cn/#/zh-CN/component/link" target="_blank">文档</a>
+        </el-divider>
+        <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
+        <el-link type="primary">主要链接</el-link>
+        <el-link type="success">成功链接</el-link>
+        <el-link type="warning">警告链接</el-link>
+        <el-link type="danger">危险链接</el-link>
+        <el-link type="info">信息链接</el-link>
+        <el-link disabled>默认链接</el-link>
+        <el-link disabled type="primary">主要链接</el-link>
+        <el-link disabled type="success">成功链接</el-link>
+        <el-link disabled type="warning">警告链接</el-link>
+        <el-link disabled type="danger">危险链接</el-link>
+        <el-link disabled type="info">信息链接</el-link>
+        <el-link :underline="false">无下划线</el-link>
+        <el-link>有下划线</el-link>
+        <el-divider content-position="left">
+          头像
+          <a href="https://element.eleme.cn/#/zh-CN/component/avatar" target="_blank">文档</a>
+        </el-divider>
+        <el-avatar icon="el-icon-user-solid" />
+        <el-divider content-position="left">
+          页头
+          <a href="https://element.eleme.cn/#/zh-CN/component/page-header" target="_blank">文档</a>
+        </el-divider>
+        <el-page-header content="详情页面" />
+        <el-divider content-position="left">
+          面包屑
+          <a href="https://element.eleme.cn/#/zh-CN/component/breadcrumb" target="_blank">文档</a>
+        </el-divider>
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
+          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
+          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
+        </el-breadcrumb>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'Element',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {
+        dialogVisible: false,
+      }
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  }
+</script>
+
+<style lang="scss" scoped>
+  .element-container {
+    ::v-deep {
+      .el-dialog__wrapper {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        bottom: 20px;
+        left: 20px;
+      }
+
+      .el-tag,
+      .el-button,
+      .el-link {
+        margin: 5px;
+      }
+
+      .el-progress {
+        margin: 20px;
+      }
+    }
+
+    .element-iframe {
+      position: absolute;
+      top: 55px;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 89vh;
+    }
+  }
+</style>
diff --git a/src/views/vab/errorLog/components/ErrorTest.vue b/src/views/vab/errorLog/components/ErrorTest.vue
new file mode 100644
index 0000000..3f653e8
--- /dev/null
+++ b/src/views/vab/errorLog/components/ErrorTest.vue
@@ -0,0 +1,13 @@
+<template>
+  <!-- js代码错误实时提醒测试 -->
+  <div>{{ zxwk1998jiayou.zxwk1998jiayou }}</div>
+</template>
+
+<script>
+  export default {
+    name: 'ErrorTest',
+    data() {
+      return {}
+    },
+  }
+</script>
diff --git a/src/views/vab/errorLog/index.vue b/src/views/vab/errorLog/index.vue
new file mode 100644
index 0000000..c1808f2
--- /dev/null
+++ b/src/views/vab/errorLog/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="errorLog-container">
+    <vab-page-header
+      description="错误日志收集和展示功能，会在顶部navbar上显示错误信息"
+      :icon="['fas', 'exclamation-triangle']"
+      title="错误日志"
+    />
+
+    <el-divider content-position="left">这里会在顶部navbar上模拟一个控制台错误日志</el-divider>
+    <el-button type="primary" @click="handleError">点击模拟一个zxwk1998jiayou的错误</el-button>
+    <error-test v-if="show" />
+  </div>
+</template>
+
+<script>
+  import ErrorTest from './components/ErrorTest'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ErrorLog',
+    components: {
+      ErrorTest,
+      VabPageHeader,
+    },
+    data() {
+      return { show: false }
+    },
+    methods: {
+      handleError() {
+        this.show = true
+      },
+    },
+  }
+</script>
diff --git a/src/views/vab/form/index.vue b/src/views/vab/form/index.vue
new file mode 100644
index 0000000..adc7476
--- /dev/null
+++ b/src/views/vab/form/index.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="form-container">
+    <vab-page-header description="Element UI 表单组件的使用示例，包含验证、重置等功能" :icon="['fas', 'edit']" title="表单组件" />
+
+    <el-row :gutter="20">
+      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
+        <el-form ref="ruleForm" class="demo-ruleForm" label-width="100px" :model="ruleForm" :rules="rules">
+          <el-form-item label="活动名称" prop="name">
+            <el-input v-model="ruleForm.name" />
+          </el-form-item>
+          <el-form-item label="活动区域" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="区域一" value="shanghai" />
+              <el-option label="区域二" value="beijing" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="即时配送" prop="delivery">
+            <el-switch v-model="ruleForm.delivery" />
+          </el-form-item>
+          <el-form-item label="活动性质" prop="type">
+            <el-checkbox-group v-model="ruleForm.type">
+              <el-checkbox label="美食/餐厅线上活动" name="type" />
+              <el-checkbox label="地推活动" name="type" />
+              <el-checkbox label="线下主题活动" name="type" />
+              <el-checkbox label="单纯品牌曝光" name="type" />
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="特殊资源" prop="resource">
+            <el-radio-group v-model="ruleForm.resource">
+              <el-radio label="线上品牌商赞助" />
+              <el-radio label="线下场地免费" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="活动形式" prop="desc">
+            <el-input v-model="ruleForm.desc" type="textarea" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+            <el-button @click="resetForm('ruleForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'Form',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {
+        ruleForm: {
+          name: '',
+          region: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: '',
+        },
+        rules: {
+          name: [
+            { required: true, message: '请输入活动名称', trigger: 'blur' },
+            {
+              min: 3,
+              max: 5,
+              message: '长度在 3 到 5 个字符',
+              trigger: 'blur',
+            },
+          ],
+          region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
+          type: [
+            {
+              type: 'array',
+              required: true,
+              message: '请至少选择一个活动性质',
+              trigger: 'change',
+            },
+          ],
+          resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
+          desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
+        },
+      }
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!')
+          } else {
+            return false
+          }
+        })
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields()
+      },
+    },
+  }
+</script>
diff --git a/src/views/vab/icon/colorfulIcon.vue b/src/views/vab/icon/colorfulIcon.vue
new file mode 100644
index 0000000..8c90a0b
--- /dev/null
+++ b/src/views/vab/icon/colorfulIcon.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="colorful-icon-container">
+    <vab-page-header description="多彩图标库，点击图标即可复制源码" :icon="['fas', 'palette']" title="彩色图标" />
+
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-divider content-position="left">多彩图标在演示环境中使用的是cdn加速服务，开发时需存储到本地，点击图标即可复制源码</el-divider>
+      </el-col>
+      <el-col :span="24">
+        <el-form :inline="true" label-width="80px" @submit.native.prevent>
+          <el-form-item label="图标名称">
+            <el-input v-model="queryForm.title" />
+          </el-form-item>
+          <el-form-item label-width="0">
+            <el-button native-type="submit" type="primary" @click="queryData">搜索</el-button>
+          </el-form-item>
+
+          <!-- <el-form-item label-width="0">
+            <el-input :value="copyText" type="text"></el-input>
+          </el-form-item>-->
+        </el-form>
+      </el-col>
+
+      <el-col v-for="(item, index) in queryIcon" :key="index" :lg="2" :md="3" :sm="8" :xl="2" :xs="6">
+        <el-card shadow="hover" style="cursor: pointer" @click.native="handleCopyIcon(index, $event)">
+          <vab-colorful-icon :icon-class="`https://gcore.jsdelivr.net/gh/zxwk1998/zx-colorful-icon@master/${item}.svg`" />
+        </el-card>
+        <div class="icon-text">
+          {{ item }}
+        </div>
+      </el-col>
+      <el-col :span="24">
+        <el-pagination
+          :background="background"
+          :current-page="queryForm.pageNo"
+          :layout="layout"
+          :page-size="queryForm.pageSize"
+          :page-sizes="[72, 144, 216, 288]"
+          :total="total"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import { getIconList } from '@/api/colorfulIcon'
+  import clip from '@/utils/clipboard'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ColorfulIcon',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {
+        copyText: '',
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        height: 0,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryIcon: [],
+        queryForm: {
+          pageNo: 1,
+          pageSize: 72,
+          title: '',
+        },
+      }
+    },
+    created() {
+      this.fetchData()
+    },
+    methods: {
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        const { data, totalCount } = await getIconList(this.queryForm)
+        this.queryIcon = data
+        this.allIcon = data
+        this.total = totalCount
+      },
+      handleCopyIcon(index, event) {
+        //const copyText = `<vab-colorful-icon icon-class="https://gcore.jsdelivr.net/gh/zxwk1998/zx-colorful-icon@master/${this.queryIcon[index]}.svg" />`;
+        const copyText = `<vab-colorful-icon icon-class="${this.queryIcon[index]}" />`
+        this.copyText = copyText
+        clip(copyText, event)
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .colorful-icon-container {
+    ::v-deep {
+      .el-card__body {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center; /* 垂直居中 */
+        justify-content: center; /* 水平居中 */
+
+        svg:not(:root) {
+          font-size: 16px;
+          font-weight: bold;
+          color: $base-color-gray;
+          text-align: center;
+          vertical-align: middle;
+          pointer-events: none;
+          cursor: pointer;
+        }
+
+        .svg-external-icon {
+          width: 20px;
+          height: 18px;
+        }
+      }
+    }
+
+    .icon-text {
+      height: 30px;
+      margin-top: -15px;
+      overflow: hidden;
+      font-size: 12px;
+      line-height: 30px;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+</style>
diff --git a/src/views/vab/icon/index.vue b/src/views/vab/icon/index.vue
new file mode 100644
index 0000000..6fd0efd
--- /dev/null
+++ b/src/views/vab/icon/index.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="icon-container">
+    <vab-page-header description="丰富的图标库，点击图标即可复制源码" :icon="['fas', 'icons']" title="图标库" />
+
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-divider content-position="left">点击图标即可复制源码</el-divider>
+      </el-col>
+      <el-col :span="24">
+        <el-form :inline="true" label-width="80px" @submit.native.prevent>
+          <el-form-item label="图标名称">
+            <el-input v-model="queryForm.title" />
+          </el-form-item>
+          <el-form-item label-width="0">
+            <el-button native-type="submit" type="primary" @click="queryData">搜索</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+
+      <el-col v-for="(item, index) in queryIcon" :key="index" :lg="2" :md="3" :sm="8" :xl="2" :xs="6">
+        <el-card shadow="hover" style="cursor: pointer" @click.native="handleCopyIcon(index, $event)">
+          <vab-icon :icon="['fas', item]" />
+        </el-card>
+        <div class="icon-text">
+          {{ item }}
+        </div>
+      </el-col>
+      <el-col :span="24">
+        <el-pagination
+          :background="background"
+          :current-page="queryForm.pageNo"
+          :layout="layout"
+          :page-size="queryForm.pageSize"
+          :page-sizes="[72, 144, 216, 288]"
+          :total="total"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import clip from '@/utils/clipboard'
+  import { getIconList } from '@/api/icon'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'AwesomeIcon',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {
+        copyText: '',
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        height: 0,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryIcon: [],
+        queryForm: {
+          pageNo: 1,
+          pageSize: 72,
+          title: '',
+        },
+      }
+    },
+    created() {
+      this.fetchData()
+    },
+    methods: {
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      queryData() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        const { data, totalCount } = await getIconList(this.queryForm)
+        this.queryIcon = data
+        this.allIcon = data
+        this.total = totalCount
+      },
+      handleCopyIcon(index, event) {
+        const copyText = `<vab-icon :icon="['fas', '${this.queryIcon[index]}']"></vab-icon>`
+        this.copyText = copyText
+        clip(copyText, event)
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .icon-container {
+    ::v-deep {
+      .el-card__body {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center; /* 垂直居中 */
+        justify-content: center; /* 水平居中 */
+
+        svg:not(:root).svg-inline--fa {
+          font-size: 18px;
+          color: $base-color-gray;
+          text-align: center;
+          vertical-align: middle;
+          pointer-events: none;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .icon-text {
+      height: 30px;
+      margin-top: -15px;
+      overflow: hidden;
+      font-size: 12px;
+      line-height: 30px;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+</style>
diff --git a/src/views/vab/loading/index.vue b/src/views/vab/loading/index.vue
new file mode 100644
index 0000000..0c79148
--- /dev/null
+++ b/src/views/vab/loading/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="loading-container">
+    <vab-page-header description="多种加载效果展示，包含传统loading和多彩loading" :icon="['fas', 'spinner']" title="加载组件" />
+    <el-divider content-position="left">传统loading</el-divider>
+    <el-button type="primary" @click="handleLoading()">默认效果</el-button>
+    <el-button type="primary" @click="handleLoading(1)">效果1</el-button>
+    <el-button type="primary" @click="handleLoading(2)">效果2</el-button>
+    <el-button type="primary" @click="handleLoading(3)">效果3</el-button>
+    <el-button type="primary" @click="handleLoading(4)">效果4</el-button>
+    <el-button type="primary" @click="handleLoading(5)">效果5</el-button>
+    <el-button type="primary" @click="handleLoading(6)">效果6</el-button>
+    <el-button type="primary" @click="handleLoading(7)">效果7</el-button>
+    <el-button type="primary" @click="handleLoading(8)">效果8</el-button>
+    <el-button type="primary" @click="handleLoading(9)">效果9</el-button>
+    <br />
+    <br />
+    <br />
+    <el-divider content-position="left">多彩loading</el-divider>
+    <el-button type="primary" @click="handleColorfullLoading(1)">效果1</el-button>
+    <el-button type="primary" @click="handleColorfullLoading(2)">效果2</el-button>
+    <el-button type="primary" @click="handleColorfullLoading(3)">效果3</el-button>
+    <el-button type="primary" @click="handleColorfullLoading(4)">效果4</el-button>
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'Loading',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {}
+    },
+    methods: {
+      handleLoading(index) {
+        const Loading = this.$baseLoading(index)
+        setTimeout(() => {
+          Loading.close()
+        }, 3000)
+      },
+      handleColorfullLoading(index) {
+        const Loading = this.$baseColorfullLoading(index)
+        setTimeout(() => {
+          Loading.close()
+        }, 3000)
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .loading-container {
+    ::v-deep {
+      .el-button {
+        margin-top: 10px;
+        margin-right: 10px;
+        margin-left: 0;
+      }
+
+      .el-button + .el-button {
+        margin-right: 10px;
+        margin-left: 0;
+      }
+    }
+  }
+</style>
diff --git a/src/views/vab/lodash/index.vue b/src/views/vab/lodash/index.vue
new file mode 100644
index 0000000..5a4d56c
--- /dev/null
+++ b/src/views/vab/lodash/index.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="lodash-container">
+    <vab-page-header
+      description="Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库"
+      :icon="['fas', 'code']"
+      title="Lodash 工具库"
+    />
+
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-card shadow="hover">
+          <el-link href="https://www.lodashjs.com/" target="_blank" type="primary">lodashjs官网</el-link>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>去除数组array中的最后一个元素</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.initial([1, 2, 3])
+            <br />
+            // => [1, 2]
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>返回数组 array的第一个元素</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.head([1, 2, 3])
+            <br />
+            // => 1
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>合并数组</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.concat([1],[2])
+            <br />
+            // => [1,2]
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>左切片</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.drop([1, 2, 3],2切除的数量)
+            <br />
+            // => [3]
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>右切片</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.dropRight([1, 2, 3],2切除的数量)
+            <br />
+            // => [1]
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>修改拼接</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.join(['a', 'b', 'c'], '~');
+            <br />
+            // => 'a~b~c'
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>获取数组最后一个元素</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.last(['a', 'b', 'c']);
+            <br />
+            // => 'c'
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>数组去重</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.uniq(['a', 'b', 'a']);
+            <br />
+            // => ['a','b']
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>获取数组的最大值</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.max([4, 2, 8, 6])
+            <br />
+            // => 8
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>获取数组的最小值</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.min([4, 2, 8, 6])
+            <br />
+            // => 2
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>四舍五入(保留任意位小数)</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.round(4.006,2保持几位小数)
+            <br />
+            // => 4.01
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>数组内数据相加</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.sum([4, 2, 8, 6])
+            <br />
+            // => 20
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>返回随机数</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.random(0, 5)
+            <br />
+            // => 0到5任意数
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>返回数组内的随机数</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.sample([1, 2, 3, 4])
+            <br />
+            // => 数组1到4任意数
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>事件防抖动</span>
+          </div>
+          <div class="lodash-content">
+            this.$baseLodash.debounce(@click的事件,延迟的毫秒数)
+            <br />
+            // => 点击后多久不可以点击
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'Lodash',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {}
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  }
+</script>
+<style lang="scss" scoped>
+  .lodash-container {
+    text-align: left;
+
+    ::v-deep {
+      .lodash-content {
+        min-height: 150px;
+      }
+    }
+  }
+</style>
diff --git a/src/views/vab/more/index.vue b/src/views/vab/more/index.vue
new file mode 100644
index 0000000..f4acb4c
--- /dev/null
+++ b/src/views/vab/more/index.vue
@@ -0,0 +1,603 @@
+<template>
+  <div class="more-container">
+    <vab-page-header description="开源版本、商业版本和VIP群相关信息" :icon="['fas', 'ellipsis-h']" title="更多功能" />
+
+    <el-row :gutter="24">
+      <!-- 开源版本卡片 -->
+      <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
+        <div class="modern-card open-source">
+          <div class="card-background">
+            <div class="bg-pattern"></div>
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <div class="icon-wrapper">
+                <vab-icon :icon="['fas', 'user']" />
+              </div>
+              <div class="header-text">
+                <h3 class="card-title">开源版本</h3>
+                <div class="card-subtitle">永久免费 · 个人/商业使用</div>
+              </div>
+              <div class="status-badge">
+                <span>免费</span>
+              </div>
+            </div>
+
+            <div class="card-body">
+              <div class="features-grid">
+                <div class="feature-item">
+                  <div class="feature-icon">
+                    <vab-icon :icon="['fas', 'check']" />
+                  </div>
+                  <span>永久开源免费</span>
+                </div>
+                <div class="feature-item">
+                  <div class="feature-icon">
+                    <vab-icon :icon="['fas', 'check']" />
+                  </div>
+                  <span>支持横纵布局切换</span>
+                </div>
+                <div class="feature-item">
+                  <div class="feature-icon">
+                    <vab-icon :icon="['fas', 'check']" />
+                  </div>
+                  <span>保留控制台打印即可商用</span>
+                </div>
+                <div class="feature-item">
+                  <div class="feature-icon">
+                    <vab-icon :icon="['fas', 'check']" />
+                  </div>
+                  <span>作者信息可全部去除</span>
+                </div>
+                <div class="feature-item">
+                  <div class="feature-icon">
+                    <vab-icon :icon="['fas', 'check']" />
+                  </div>
+                  <span>包含打包优化教程</span>
+                </div>
+                <div class="feature-item">
+                  <div class="feature-icon">
+                    <vab-icon :icon="['fas', 'check']" />
+                  </div>
+                  <span>提供讨论群专属文档</span>
+                </div>
+              </div>
+
+              <div class="card-footer">
+                <a class="action-button" href="https://github.com/zxwk1998/vue-admin-better" target="_blank">
+                  <vab-icon :icon="['fab', 'github']" />
+                  <span>查看源码</span>
+                </a>
+                <div class="contact-info">
+                  <vab-icon :icon="['fab', 'qq']" />
+                  <span>QQ群：972435319、1139183756</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+
+      <!-- 商业版本卡片 -->
+      <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
+        <div class="modern-card commercial">
+          <div class="card-background">
+            <div class="bg-pattern"></div>
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <div class="icon-wrapper">
+                <vab-icon :icon="['fas', 'crown']" />
+              </div>
+              <div class="header-text">
+                <h3 class="card-title">商业版本</h3>
+                <div class="card-subtitle">专业级 · 企业级解决方案</div>
+              </div>
+              <div class="status-badge">
+                <span>PRO</span>
+              </div>
+            </div>
+
+            <div class="card-body">
+              <div class="premium-products">
+                <a class="product-card" href="https://vuejs-core.cn/admin-pro" target="_blank">
+                  <div class="product-header">
+                    <vab-icon :icon="['fas', 'crown']" />
+                    <div class="product-badge">PRO</div>
+                  </div>
+                  <div class="product-info">
+                    <div class="product-name">Admin Pro</div>
+                    <div class="product-price">￥699</div>
+                  </div>
+                  <div class="product-arrow">
+                    <vab-icon :icon="['fas', 'arrow-right']" />
+                  </div>
+                </a>
+
+                <a class="product-card" href="https://vuejs-core.cn/admin-plus" target="_blank">
+                  <div class="product-header">
+                    <vab-icon :icon="['fas', 'gem']" />
+                    <div class="product-badge">PLUS</div>
+                  </div>
+                  <div class="product-info">
+                    <div class="product-name">Admin Plus</div>
+                    <div class="product-price">￥799</div>
+                  </div>
+                  <div class="product-arrow">
+                    <vab-icon :icon="['fas', 'arrow-right']" />
+                  </div>
+                </a>
+
+                <a class="product-card featured" href="https://vuejs-core.cn/shop-vite" target="_blank">
+                  <div class="product-header">
+                    <vab-icon :icon="['fas', 'shopping-cart']" />
+                    <div class="product-badge">SHOP</div>
+                  </div>
+                  <div class="product-info">
+                    <div class="product-name">Shop Vite</div>
+                    <div class="product-price">￥1899</div>
+                  </div>
+                  <div class="product-arrow">
+                    <vab-icon :icon="['fas', 'arrow-right']" />
+                  </div>
+                </a>
+              </div>
+
+              <div class="card-footer">
+                <div class="service-info">
+                  <vab-icon :icon="['fas', 'star']" />
+                  <span>专业技术支持 · 源码授权 · 定制服务</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 自定义版权服务 -->
+    <el-row :gutter="24" style="margin-top: 24px">
+      <el-col :span="24">
+        <div class="modern-card custom-service">
+          <div class="card-background">
+            <div class="bg-pattern"></div>
+          </div>
+          <div class="card-content">
+            <div class="service-header">
+              <div class="service-icon">
+                <vab-icon :icon="['fas', 'paint-brush']" />
+              </div>
+              <div class="service-info">
+                <h3 class="service-title">自定义版权服务</h3>
+                <p class="service-desc">如需自定义版权及作者信息，可联系微信客服zxwk-bfq购买</p>
+              </div>
+              <div class="service-price">
+                <div class="price-amount">￥99</div>
+                <div class="price-note">自愿原则</div>
+              </div>
+            </div>
+
+            <div class="service-features">
+              <div class="feature-item">
+                <vab-icon :icon="['fas', 'check-circle']" />
+                <span>移除所有作者信息</span>
+              </div>
+              <div class="feature-item">
+                <vab-icon :icon="['fas', 'check-circle']" />
+                <span>自定义版权声明</span>
+              </div>
+              <div class="feature-item">
+                <vab-icon :icon="['fas', 'check-circle']" />
+                <span>品牌化定制</span>
+              </div>
+              <div class="feature-item">
+                <vab-icon :icon="['fas', 'check-circle']" />
+                <span>自愿原则</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'More',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {
+        nodeEnv: process.env.NODE_ENV,
+      }
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  }
+</script>
+
+<style lang="scss" scoped>
+  .more-container {
+    .modern-card {
+      position: relative;
+      border-radius: 20px;
+      overflow: hidden;
+      background: white;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+      height: 100%;
+
+      .card-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+
+        .bg-pattern {
+          position: absolute;
+          top: -50%;
+          left: -50%;
+          width: 200%;
+          height: 200%;
+          background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+          background-size: 20px 20px;
+          transition: transform 0.4s ease;
+        }
+      }
+
+      .card-content {
+        position: relative;
+        z-index: 1;
+        padding: 32px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .card-header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 24px;
+
+        .icon-wrapper {
+          width: 64px;
+          height: 64px;
+          border-radius: 16px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 28px;
+          color: white;
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+        }
+
+        .header-text {
+          flex: 1;
+
+          .card-title {
+            margin: 0 0 4px 0;
+            font-size: 24px;
+            font-weight: 700;
+            color: #1a1a1a;
+          }
+
+          .card-subtitle {
+            font-size: 14px;
+            color: #666;
+            font-weight: 500;
+          }
+        }
+
+        .status-badge {
+          padding: 6px 16px;
+          border-radius: 20px;
+          font-size: 12px;
+          font-weight: 600;
+          color: white;
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+        }
+      }
+
+      .card-body {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .card-footer {
+        margin-top: auto;
+        padding-top: 20px;
+        border-top: 1px solid rgba(0, 0, 0, 0.06);
+      }
+    }
+
+    // 开源版本样式
+    .open-source {
+      .icon-wrapper {
+        background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
+      }
+
+      .status-badge {
+        background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
+      }
+
+      .features-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+        margin-bottom: 24px;
+
+        .feature-item {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          padding: 12px;
+          border-radius: 12px;
+          background: rgba(102, 126, 234, 0.05);
+          transition: all 0.3s ease;
+
+          &:hover {
+            background: rgba(102, 126, 234, 0.1);
+            transform: translateX(4px);
+          }
+
+          .feature-icon {
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 14px;
+          }
+
+          span {
+            font-size: 14px;
+            font-weight: 500;
+            color: #333;
+          }
+        }
+      }
+
+      .action-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 24px;
+        background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
+        color: white;
+        text-decoration: none;
+        border-radius: 12px;
+        font-weight: 600;
+        transition: all 0.3s ease;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
+        }
+      }
+
+      .contact-info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: 12px;
+        font-size: 14px;
+        color: #666;
+      }
+    }
+
+    // 商业版本样式
+    .commercial {
+      .icon-wrapper {
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+      }
+
+      .status-badge {
+        background: linear-gradient(135deg, #e6a23c 0%, #f7ba2a 100%);
+      }
+
+      .premium-products {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        margin-bottom: 24px;
+
+        .product-card {
+          display: flex;
+          align-items: center;
+          padding: 16px;
+          border-radius: 16px;
+          background: linear-gradient(135deg, #4d8af0 0%, #1a56db 100%);
+          color: white;
+          text-decoration: none;
+          transition: all 0.3s ease;
+          position: relative;
+          overflow: hidden;
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.5s ease;
+          }
+
+          &:hover {
+            transform: translateX(8px);
+            box-shadow: 0 12px 32px rgba(102, 126, 234, 0.3);
+
+            &::before {
+              left: 100%;
+            }
+          }
+
+          &.featured {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            box-shadow: 0 8px 24px rgba(240, 147, 251, 0.3);
+
+            &:hover {
+              box-shadow: 0 12px 32px rgba(240, 147, 251, 0.4);
+            }
+          }
+
+          .product-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-right: 16px;
+
+            .vab-icon {
+              font-size: 20px;
+            }
+
+            .product-badge {
+              padding: 2px 8px;
+              border-radius: 12px;
+              font-size: 10px;
+              font-weight: 600;
+              background: rgba(255, 255, 255, 0.2);
+              text-transform: uppercase;
+            }
+          }
+
+          .product-info {
+            flex: 1;
+
+            .product-name {
+              font-size: 16px;
+              font-weight: 600;
+              margin-bottom: 4px;
+            }
+
+            .product-price {
+              font-size: 14px;
+              opacity: 0.9;
+            }
+          }
+
+          .product-arrow {
+            opacity: 0;
+            transition: all 0.3s ease;
+          }
+
+          &:hover .product-arrow {
+            opacity: 1;
+            transform: translateX(4px);
+          }
+        }
+      }
+
+      .service-info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 14px;
+        color: #666;
+      }
+    }
+
+    // 自定义版权服务样式
+    .custom-service {
+      .service-header {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        margin-bottom: 24px;
+
+        .service-icon {
+          width: 64px;
+          height: 64px;
+          border-radius: 16px;
+          background: linear-gradient(135deg, #e6a23c 0%, #f7ba2a 100%);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 28px;
+          color: white;
+          box-shadow: 0 8px 24px rgba(230, 162, 60, 0.3);
+        }
+
+        .service-info {
+          flex: 1;
+
+          .service-title {
+            margin: 0 0 8px 0;
+            font-size: 24px;
+            font-weight: 700;
+            color: #1a1a1a;
+          }
+
+          .service-desc {
+            margin: 0;
+            font-size: 14px;
+            color: #666;
+            line-height: 1.5;
+          }
+        }
+
+        .service-price {
+          text-align: right;
+
+          .price-amount {
+            font-size: 32px;
+            font-weight: 700;
+            color: #e6a23c;
+            line-height: 1;
+          }
+
+          .price-note {
+            font-size: 12px;
+            color: #999;
+            margin-top: 4px;
+          }
+        }
+      }
+
+      .service-features {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 16px;
+
+        .feature-item {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          padding: 16px;
+          border-radius: 12px;
+          background: rgba(230, 162, 60, 0.05);
+          transition: all 0.3s ease;
+
+          &:hover {
+            background: rgba(230, 162, 60, 0.1);
+            transform: translateY(-2px);
+          }
+
+          .vab-icon {
+            color: #e6a23c;
+            font-size: 18px;
+          }
+
+          span {
+            font-size: 14px;
+            font-weight: 500;
+            color: #333;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/vab/nested/menu1/index.vue b/src/views/vab/nested/menu1/index.vue
new file mode 100644
index 0000000..13aa922
--- /dev/null
+++ b/src/views/vab/nested/menu1/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="menu1-container">
+    <vab-page-header description="嵌套路由示例页面" :icon="['fas', 'sitemap']" title="嵌套路由 1" />
+
+    <el-alert :closable="false" title="嵌套路由 1" type="success">
+      <router-view />
+    </el-alert>
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'Menu1',
+    components: {
+      VabPageHeader,
+    },
+  }
+</script>
diff --git a/src/views/vab/nested/menu1/menu1-1/index.vue b/src/views/vab/nested/menu1/menu1-1/index.vue
new file mode 100644
index 0000000..b8d00c6
--- /dev/null
+++ b/src/views/vab/nested/menu1/menu1-1/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="menu1-1-container">
+    <vab-page-header description="嵌套路由示例页面" :icon="['fas', 'sitemap']" title="嵌套路由 1-1" />
+
+    <el-alert :closable="false" title="嵌套路由 1-1" type="success">
+      <router-view />
+    </el-alert>
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'Menu11',
+    components: {
+      VabPageHeader,
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  [class*='-container'] {
+    padding: 15px;
+    background: $base-color-white;
+  }
+</style>
diff --git a/src/views/vab/nested/menu1/menu1-1/menu1-1-1/index.vue b/src/views/vab/nested/menu1/menu1-1/menu1-1-1/index.vue
new file mode 100644
index 0000000..767fed1
--- /dev/null
+++ b/src/views/vab/nested/menu1/menu1-1/menu1-1-1/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="menu1-1-1-container">
+    <vab-page-header description="嵌套路由示例页面" :icon="['fas', 'sitemap']" title="嵌套路由 1-1-1" />
+
+    <el-alert :closable="false" title="嵌套路由 1-1-1" type="success" />
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'Menu111',
+    components: {
+      VabPageHeader,
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  [class*='-container'] {
+    padding: 15px;
+    background: $base-color-white;
+  }
+</style>
diff --git a/src/views/vab/permissions/index.vue b/src/views/vab/permissions/index.vue
new file mode 100644
index 0000000..b626ebb
--- /dev/null
+++ b/src/views/vab/permissions/index.vue
@@ -0,0 +1,414 @@
+<template>
+  <div class="permissions-container">
+    <vab-page-header
+      description="管理系统权限配置和用户角色分配"
+      :icon="['fas', 'shield-alt']"
+      :right-icon="['fas', 'user-circle']"
+      :right-text="`当前用户: ${username}`"
+      title="权限管理"
+    />
+
+    <!-- 权限切换卡片 -->
+    <el-card class="permission-card" shadow="hover">
+      <div slot="header" class="card-header">
+        <vab-icon :icon="['fas', 'exchange-alt']" />
+        <span>权限切换</span>
+      </div>
+      <div class="permission-content">
+        <div class="permission-info">
+          <p class="info-text">
+            <vab-icon :icon="['fas', 'info-circle']" />
+            intelligence模式：前端根据permissions拦截路由（演示环境默认使用此方案）
+          </p>
+        </div>
+
+        <el-form ref="form" class="permission-form" :inline="true" :model="form">
+          <el-form-item class="account-selector" label="切换账号">
+            <el-radio-group v-model="form.account" class="account-radio-group">
+              <el-radio-button class="account-radio" label="admin">
+                <vab-icon :icon="['fas', 'crown']" />
+                <span>管理员</span>
+              </el-radio-button>
+              <el-radio-button class="account-radio" label="editor">
+                <vab-icon :icon="['fas', 'edit']" />
+                <span>编辑者</span>
+              </el-radio-button>
+              <el-radio-button class="account-radio" label="test">
+                <vab-icon :icon="['fas', 'user']" />
+                <span>测试员</span>
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button class="change-btn" type="primary" @click="handleChangePermission">
+              <vab-icon :icon="['fas', 'sync-alt']" />
+              切换权限
+            </el-button>
+          </el-form-item>
+        </el-form>
+
+        <div class="current-permissions">
+          <h4>当前账号拥有的权限：</h4>
+          <div class="permissions-display">
+            <el-tag v-for="permission in permissions" :key="permission" class="permission-tag" :type="getPermissionTagType(permission)">
+              <vab-icon :icon="getPermissionIcon(permission)" />
+              {{ permission }}
+            </el-tag>
+          </div>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 按钮权限演示卡片 -->
+    <el-card class="permission-card" shadow="hover">
+      <div slot="header" class="card-header">
+        <vab-icon :icon="['fas', 'mouse-pointer']" />
+        <span>按钮级权限演示</span>
+      </div>
+      <div class="button-demo">
+        <div class="demo-section">
+          <h4>权限按钮展示：</h4>
+          <div class="button-group">
+            <el-button v-permissions="['admin']" class="demo-btn" type="primary">
+              <vab-icon :icon="['fas', 'crown']" />
+              我是拥有["admin"]权限的按钮
+            </el-button>
+            <el-button v-permissions="['editor']" class="demo-btn" type="success">
+              <vab-icon :icon="['fas', 'edit']" />
+              我是拥有["editor"]权限的按钮
+            </el-button>
+            <el-button v-permissions="['test']" class="demo-btn" type="warning">
+              <vab-icon :icon="['fas', 'user']" />
+              我是拥有["test"]权限的按钮
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 路由权限演示卡片 -->
+    <el-card class="permission-card" shadow="hover">
+      <div slot="header" class="card-header">
+        <vab-icon :icon="['fas', 'route']" />
+        <span>路由权限演示</span>
+      </div>
+      <div class="route-demo">
+        <div class="demo-info">
+          <p class="info-text">
+            <vab-icon :icon="['fas', 'info-circle']" />
+            all模式：路由以及view文件引入全部交给后端（权限复杂，且随时变更，建议使用此方案）
+          </p>
+          <p class="info-text">
+            settings.js配置authentication为all即可完全交由后端控制，mock中有后端接口示例，权限繁琐，有几十种权限的项目直接用这种。
+          </p>
+        </div>
+
+        <div class="route-table-container">
+          <h4>路由配置表：</h4>
+          <el-table
+            border
+            class="route-table"
+            :data="tableData"
+            default-expand-all
+            highlight-current-row
+            row-key="path"
+            stripe
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+          >
+            <el-table-column label="路由名称" prop="name" show-overflow-tooltip width="150">
+              <template #default="{ row }">
+                <div class="route-name">
+                  <vab-icon v-if="row.meta && row.meta.icon" :icon="['fas', row.meta.icon]" />
+                  <span>{{ row.name }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="路径" prop="path" show-overflow-tooltip width="200" />
+            <el-table-column label="组件" prop="component" show-overflow-tooltip width="150" />
+            <el-table-column label="重定向" prop="redirect" show-overflow-tooltip width="150" />
+            <el-table-column label="标题" prop="meta.title" show-overflow-tooltip width="120" />
+            <el-table-column label="图标" show-overflow-tooltip width="80">
+              <template #default="{ row }">
+                <span v-if="row.meta && row.meta.icon">
+                  <vab-icon class="route-icon" :icon="['fas', row.meta.icon]" />
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="固定" show-overflow-tooltip width="80">
+              <template #default="{ row }">
+                <el-tag v-if="row.meta && row.meta.affix" size="mini" type="success">是</el-tag>
+                <el-tag v-else size="mini" type="info">否</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="无缓存" show-overflow-tooltip width="80">
+              <template #default="{ row }">
+                <el-tag v-if="row.meta && row.meta.noKeepAlive" size="mini" type="warning">是</el-tag>
+                <el-tag v-else size="mini" type="info">否</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="徽章" show-overflow-tooltip width="80">
+              <template #default="{ row }">
+                <el-badge v-if="row.meta && row.meta.badge" class="route-badge" :value="row.meta.badge" />
+                <span v-else>-</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+  import { tokenTableName } from '@/config'
+  import { getRouterList } from '@/api/router'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'Permissions',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {
+        form: {
+          account: '',
+        },
+        tableData: [],
+        res: [],
+      }
+    },
+    computed: {
+      ...mapGetters({
+        username: 'user/username',
+        permissions: 'user/permissions',
+      }),
+    },
+    created() {
+      // this.fetchData()
+    },
+    mounted() {
+      this.form.account = this.username
+    },
+    methods: {
+      handleChangePermission() {
+        this.$confirm('确定要切换权限吗？切换后页面将重新加载。', '权限切换', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+          .then(() => {
+            localStorage.setItem(tokenTableName, `${this.form.account}-accessToken`)
+            this.$message.success('权限切换成功，页面即将重新加载...')
+            setTimeout(() => {
+              location.reload()
+            }, 1000)
+          })
+          .catch(() => {
+            this.$message.info('已取消权限切换')
+          })
+      },
+      async fetchData() {
+        const res = await getRouterList()
+        this.tableData = res.data
+        this.res = res
+      },
+      getPermissionTagType(permission) {
+        const types = {
+          admin: 'danger',
+          editor: 'warning',
+          test: 'info',
+        }
+        return types[permission] || 'info'
+      },
+      getPermissionIcon(permission) {
+        const icons = {
+          admin: 'crown',
+          editor: 'edit',
+          test: 'user',
+        }
+        return ['fas', icons[permission] || 'user']
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .permissions-container {
+    padding: 20px;
+    background: #f5f7fa;
+    min-height: 100vh;
+
+    .permission-card {
+      .card-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: #2c3e50;
+
+        .vab-icon {
+          color: #667ae4;
+        }
+      }
+
+      .permission-content {
+        .permission-info {
+          margin-bottom: 20px;
+
+          .info-text {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: #606266;
+            font-size: 0.9rem;
+            margin: 0;
+            padding: 12px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            border-left: 4px solid #667eea;
+
+            .vab-icon {
+              color: #667eea;
+            }
+          }
+        }
+
+        .permission-form {
+          margin-bottom: 20px;
+
+          .account-selector {
+          }
+
+          .change-btn {
+          }
+        }
+
+        .current-permissions {
+          h4 {
+            margin: 0 0 12px 0;
+            color: #2c3e50;
+            font-size: 1rem;
+          }
+
+          .permissions-display {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+
+            .permission-tag {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+              padding: 6px 12px;
+              border-radius: 20px;
+              font-weight: 500;
+
+              .vab-icon {
+                font-size: 0.8rem;
+              }
+            }
+          }
+        }
+      }
+
+      .button-demo {
+        .demo-section {
+          h4 {
+            margin: 0 0 16px 0;
+            color: #2c3e50;
+            font-size: 1rem;
+          }
+
+          .button-group {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+          }
+        }
+      }
+
+      .route-demo {
+        .demo-info {
+          margin-bottom: 20px;
+
+          .info-text {
+            display: flex;
+            align-items: flex-start;
+            gap: 8px;
+            color: #606266;
+            font-size: 0.9rem;
+            margin: 0 0 8px 0;
+            line-height: 1.5;
+
+            .vab-icon {
+              color: #667eea;
+              margin-top: 2px;
+              flex-shrink: 0;
+            }
+          }
+        }
+
+        .route-table-container {
+          h4 {
+            margin: 0 0 16px 0;
+            color: #2c3e50;
+            font-size: 1rem;
+          }
+
+          .route-table {
+            border-radius: 8px;
+            overflow: hidden;
+
+            .route-name {
+              display: flex;
+              align-items: center;
+              gap: 6px;
+              font-weight: 500;
+
+              .vab-icon {
+                color: #667eea;
+              }
+            }
+
+            .route-icon {
+              color: #667eea;
+              font-size: 1rem;
+            }
+
+            .route-badge {
+              ::v-deep .el-badge__content {
+                background: #667eea;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .permissions-container {
+      padding: 16px;
+
+      .permission-card {
+        .permission-content {
+          .permission-form {
+            .account-selector {
+            }
+          }
+        }
+
+        .button-demo {
+          .button-group {
+            flex-direction: column;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/vab/qrCode/index.vue b/src/views/vab/qrCode/index.vue
new file mode 100644
index 0000000..93ef4f3
--- /dev/null
+++ b/src/views/vab/qrCode/index.vue
@@ -0,0 +1,442 @@
+<template>
+  <div class="qrcode-container">
+    <vab-page-header description="二维码组件示例" :icon="['fas', 'qrcode']" title="二维码" />
+    <el-card shadow="never">
+      <div class="qrcode-content">
+        <el-tabs v-model="activeTab">
+          <el-tab-pane label="生成二维码" name="generate">
+            <div class="generate-content">
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <div class="input-section">
+                    <h4>输入内容</h4>
+                    <el-input
+                      type="textarea"
+                      :rows="6"
+                      placeholder="请输入要生成二维码的内容，如网址、文本等"
+                      v-model="qrContent"
+                      maxlength="500"
+                      show-word-limit
+                    ></el-input>
+
+                    <div class="settings">
+                      <h4>二维码设置</h4>
+                      <el-form label-width="100px">
+                        <el-form-item label="尺寸">
+                          <el-slider v-model="qrSize" :min="100" :max="400" :step="10"></el-slider>
+                          <span>{{ qrSize }}px</span>
+                        </el-form-item>
+                        <el-form-item label="前景色">
+                          <el-color-picker v-model="qrFgColor"></el-color-picker>
+                        </el-form-item>
+                        <el-form-item label="背景色">
+                          <el-color-picker v-model="qrBgColor"></el-color-picker>
+                        </el-form-item>
+                        <el-form-item label="容错级别">
+                          <el-select v-model="qrLevel">
+                            <el-option label="L (7%)" value="L"></el-option>
+                            <el-option label="M (15%)" value="M"></el-option>
+                            <el-option label="Q (25%)" value="Q"></el-option>
+                            <el-option label="H (30%)" value="H"></el-option>
+                          </el-select>
+                        </el-form-item>
+                      </el-form>
+                    </div>
+
+                    <el-button type="primary" @click="generateQRCode">生成二维码</el-button>
+                    <el-button @click="clearQRCode">清空</el-button>
+                    <el-button v-if="qrCodeData" @click="downloadQRCode">下载二维码</el-button>
+                  </div>
+                </el-col>
+
+                <el-col :span="12">
+                  <div class="output-section">
+                    <h4>二维码预览</h4>
+                    <div class="qrcode-preview" v-if="qrCodeData">
+                      <img :src="qrCodeData" :style="{ width: qrSize + 'px', height: qrSize + 'px' }" alt="二维码" />
+                      <p class="qrcode-text">{{ qrContent }}</p>
+                    </div>
+                    <div class="qrcode-placeholder" v-else>
+                      <vab-icon :icon="['fas', 'qrcode']" class="qrcode-icon" />
+                      <p>请在左侧输入内容并点击生成二维码</p>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane label="扫描二维码" name="scan">
+            <div class="scan-content">
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <div class="camera-section">
+                    <h4>摄像头扫描</h4>
+                    <div class="camera-placeholder">
+                      <vab-icon :icon="['fas', 'camera']" class="camera-icon" />
+                      <p>摄像头扫描区域</p>
+                      <el-button type="primary" @click="startCamera">启动摄像头</el-button>
+                    </div>
+                  </div>
+
+                  <div class="upload-section">
+                    <h4>上传图片识别</h4>
+                    <el-upload class="upload-demo" drag action="#" :auto-upload="false" :on-change="handleFileUpload" accept="image/*">
+                      <i class="el-icon-upload"></i>
+                      <div class="el-upload__text">
+                        将文件拖到此处，或
+                        <em>点击上传</em>
+                      </div>
+                      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+                    </el-upload>
+                  </div>
+                </el-col>
+
+                <el-col :span="12">
+                  <div class="result-section">
+                    <h4>识别结果</h4>
+                    <div class="result-content" v-if="scanResult">
+                      <el-alert title="识别成功" type="success" show-icon></el-alert>
+                      <div class="result-text">
+                        <p><strong>内容：</strong></p>
+                        <p>{{ scanResult }}</p>
+                      </div>
+                      <div class="result-actions">
+                        <el-button @click="copyResult">复制内容</el-button>
+                        <el-button v-if="isUrl(scanResult)" @click="openUrl">打开链接</el-button>
+                      </div>
+                    </div>
+                    <div class="result-placeholder" v-else>
+                      <vab-icon :icon="['fas', 'file-alt']" class="result-icon" />
+                      <p>识别结果将显示在这里</p>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane label="二维码示例" name="examples">
+            <div class="examples-content">
+              <h4>常用二维码示例</h4>
+              <el-row :gutter="20">
+                <el-col :span="8">
+                  <div class="example-item">
+                    <div class="example-qrcode">
+                      <img
+                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjMgMjMiPjxyZWN0IHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgZmlsbD0iI2ZmZiIvPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0xLjUsMS41aDIwdjIwaC0yMHoiLz48L3N2Zz4="
+                        alt="网址示例"
+                      />
+                    </div>
+                    <p class="example-title">网址</p>
+                    <p class="example-desc">https://vuejs.org</p>
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <div class="example-item">
+                    <div class="example-qrcode">
+                      <img
+                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjMgMjMiPjxyZWN0IHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgZmlsbD0iI2ZmZiIvPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0xLjUsMS41aDIwdjIwaC0yMHoiLz48L3N2Zz4="
+                        alt="文本示例"
+                      />
+                    </div>
+                    <p class="example-title">文本</p>
+                    <p class="example-desc">这是一段文本</p>
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <div class="example-item">
+                    <div class="example-qrcode">
+                      <img
+                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjMgMjMiPjxyZWN0IHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgZmlsbD0iI2ZmZiIvPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0xLjUsMS41aDIwdjIwaC0yMHoiLz48L3N2Zz4="
+                        alt="名片示例"
+                      />
+                    </div>
+                    <p class="example-title">名片</p>
+                    <p class="example-desc">张三, 13800138000</p>
+                  </div>
+                </el-col>
+              </el-row>
+
+              <h4 style="margin-top: 30px">二维码应用场景</h4>
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <div class="application-item">
+                    <h5>
+                      <vab-icon :icon="['fas', 'shopping-cart']" />
+                      电商购物
+                    </h5>
+                    <p>扫码购买商品，快速下单支付</p>
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <div class="application-item">
+                    <h5>
+                      <vab-icon :icon="['fas', 'ticket-alt']" />
+                      电子票务
+                    </h5>
+                    <p>电影票、火车票、门票等电子凭证</p>
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <div class="application-item">
+                    <h5>
+                      <vab-icon :icon="['fas', 'user-circle']" />
+                      个人名片
+                    </h5>
+                    <p>快速分享联系方式和社交媒体</p>
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <div class="application-item">
+                    <h5>
+                      <vab-icon :icon="['fas', 'wifi']" />
+                      WiFi连接
+                    </h5>
+                    <p>快速连接WiFi，无需输入密码</p>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+  import { toDataURL } from 'qrcode'
+
+  export default {
+    name: 'QrCode',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {
+        activeTab: 'generate',
+        qrContent: 'https://github.com/zxwk1998/vue-admin-better',
+        qrSize: 200,
+        qrFgColor: '#000000',
+        qrBgColor: '#ffffff',
+        qrLevel: 'M',
+        qrCodeData: '',
+        scanResult: '',
+      }
+    },
+    methods: {
+      async generateQRCode() {
+        if (!this.qrContent) {
+          this.$message.warning('请输入要生成二维码的内容')
+          return
+        }
+
+        try {
+          const qrData = await toDataURL(this.qrContent, {
+            width: this.qrSize,
+            color: {
+              dark: this.qrFgColor,
+              light: this.qrBgColor,
+            },
+            errorCorrectionLevel: this.qrLevel,
+          })
+
+          this.qrCodeData = qrData
+          this.$message.success('二维码生成成功')
+        } catch (err) {
+          this.$message.error('二维码生成失败: ' + err.message)
+        }
+      },
+
+      clearQRCode() {
+        this.qrContent = ''
+        this.qrCodeData = ''
+      },
+
+      downloadQRCode() {
+        const link = document.createElement('a')
+        link.href = this.qrCodeData
+        link.download = 'qrcode.png'
+        link.click()
+        this.$message.success('二维码下载成功')
+      },
+
+      startCamera() {
+        this.$message.info('在实际应用中，这里会启动摄像头进行扫码')
+      },
+
+      handleFileUpload(file) {
+        this.scanResult = '这是示例识别结果：https://github.com/zxwk1998/vue-admin-better'
+        this.$message.success('图片识别成功')
+      },
+
+      copyResult() {
+        this.$copyText(this.scanResult).then(
+          () => {
+            this.$message.success('复制成功')
+          },
+          () => {
+            this.$message.error('复制失败')
+          }
+        )
+      },
+
+      openUrl() {
+        window.open(this.scanResult, '_blank')
+      },
+
+      isUrl(string) {
+        try {
+          new URL(string)
+          return true
+        } catch (_) {
+          return false
+        }
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .qrcode-container {
+    padding: 15px;
+    background: $base-color-white;
+
+    .qrcode-content {
+      min-height: 400px;
+
+      .generate-content,
+      .scan-content,
+      .examples-content {
+        padding: 20px 0;
+
+        .input-section,
+        .output-section,
+        .camera-section,
+        .upload-section,
+        .result-section {
+          margin-bottom: 20px;
+
+          h4 {
+            margin: 0 0 15px 0;
+            color: #333;
+          }
+
+          .settings {
+            margin: 20px 0;
+
+            ::v-deep .el-form-item {
+              margin-bottom: 15px;
+            }
+          }
+        }
+
+        .qrcode-preview {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          img {
+            border: 1px solid #dcdfe6;
+            padding: 10px;
+          }
+
+          .qrcode-text {
+            margin-top: 15px;
+            text-align: center;
+            word-break: break-all;
+          }
+        }
+
+        .qrcode-placeholder,
+        .camera-placeholder,
+        .result-placeholder {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          min-height: 200px;
+          color: #909399;
+          border: 1px dashed #dcdfe6;
+          border-radius: 4px;
+
+          .qrcode-icon,
+          .camera-icon,
+          .result-icon {
+            font-size: 48px;
+            margin-bottom: 20px;
+          }
+        }
+
+        .camera-placeholder {
+          .camera-icon {
+            color: #409eff;
+          }
+        }
+
+        .result-content {
+          .result-text {
+            margin: 20px 0;
+            padding: 15px;
+            background: #f5f5f5;
+            border-radius: 4px;
+            word-break: break-all;
+          }
+        }
+
+        .example-item {
+          text-align: center;
+          margin-bottom: 20px;
+
+          .example-qrcode {
+            height: 120px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 10px;
+
+            img {
+              max-width: 100px;
+              max-height: 100px;
+            }
+          }
+
+          .example-title {
+            font-weight: bold;
+            margin: 5px 0;
+          }
+
+          .example-desc {
+            color: #999;
+            font-size: 12px;
+          }
+        }
+
+        .application-item {
+          padding: 15px;
+          background: #f5f5f5;
+          border-radius: 4px;
+          margin-bottom: 15px;
+
+          h5 {
+            margin: 0 0 10px 0;
+            color: #333;
+
+            i {
+              margin-right: 8px;
+              color: #409eff;
+            }
+          }
+
+          p {
+            margin: 0;
+            color: #666;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/vab/tab/index.vue b/src/views/vab/tab/index.vue
new file mode 100644
index 0000000..1b1cfbb
--- /dev/null
+++ b/src/views/vab/tab/index.vue
@@ -0,0 +1,300 @@
+<template>
+  <div class="tab-container">
+    <vab-page-header description="选项卡组件示例" :icon="['fas', 'folder-open']" title="选项卡" />
+    <el-card shadow="never">
+      <div class="tab-content">
+        <div class="tab-demo">
+          <h3>基础选项卡</h3>
+          <el-tabs v-model="activeTab1">
+            <el-tab-pane label="用户管理" name="first">
+              <div class="tab-pane-content">
+                <el-table :data="tableData" style="width: 100%">
+                  <el-table-column prop="date" label="日期" width="180"></el-table-column>
+                  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
+                  <el-table-column prop="address" label="地址"></el-table-column>
+                </el-table>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="配置管理" name="second">
+              <div class="tab-pane-content">
+                <el-form :model="form" label-width="100px">
+                  <el-form-item label="活动名称">
+                    <el-input v-model="form.name"></el-input>
+                  </el-form-item>
+                  <el-form-item label="活动区域">
+                    <el-select v-model="form.region" placeholder="请选择活动区域">
+                      <el-option label="区域一" value="shanghai"></el-option>
+                      <el-option label="区域二" value="beijing"></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="活动时间">
+                    <el-col :span="11">
+                      <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
+                    </el-col>
+                    <el-col class="line" :span="2">-</el-col>
+                    <el-col :span="11">
+                      <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%"></el-time-picker>
+                    </el-col>
+                  </el-form-item>
+                  <el-form-item label="即时配送">
+                    <el-switch v-model="form.delivery"></el-switch>
+                  </el-form-item>
+                  <el-form-item label="活动性质">
+                    <el-checkbox-group v-model="form.type">
+                      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
+                      <el-checkbox label="地推活动" name="type"></el-checkbox>
+                      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
+                      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
+                    </el-checkbox-group>
+                  </el-form-item>
+                  <el-form-item label="特殊资源">
+                    <el-radio-group v-model="form.resource">
+                      <el-radio label="线上品牌商赞助"></el-radio>
+                      <el-radio label="线下场地免费"></el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                  <el-form-item label="活动形式">
+                    <el-input type="textarea" v-model="form.desc"></el-input>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
+                    <el-button>取消</el-button>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="角色管理" name="third">
+              <div class="tab-pane-content">
+                <el-alert title="角色管理信息" type="success" show-icon></el-alert>
+                <p>当前系统角色数量: {{ roles.length }}</p>
+                <el-table :data="roles" style="width: 100%">
+                  <el-table-column prop="id" label="ID" width="180"></el-table-column>
+                  <el-table-column prop="name" label="角色名称" width="180"></el-table-column>
+                  <el-table-column prop="description" label="描述"></el-table-column>
+                  <el-table-column label="操作">
+                    <template>
+                      <el-button size="mini">编辑</el-button>
+                      <el-button size="mini" type="danger">删除</el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+
+        <div class="tab-demo">
+          <h3>卡片化选项卡</h3>
+          <el-tabs v-model="activeTab2" type="border-card">
+            <el-tab-pane label="首页">
+              <div class="tab-pane-content">
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-card class="box-card">
+                      <div slot="header" class="clearfix">
+                        <span>用户数</span>
+                      </div>
+                      <div class="card-content">
+                        <p class="card-number">1,234</p>
+                        <p class="card-description">总用户数量</p>
+                      </div>
+                    </el-card>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-card class="box-card">
+                      <div slot="header" class="clearfix">
+                        <span>订单数</span>
+                      </div>
+                      <div class="card-content">
+                        <p class="card-number">567</p>
+                        <p class="card-description">总订单数量</p>
+                      </div>
+                    </el-card>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-card class="box-card">
+                      <div slot="header" class="clearfix">
+                        <span>销售额</span>
+                      </div>
+                      <div class="card-content">
+                        <p class="card-number">¥89,000</p>
+                        <p class="card-description">总销售额</p>
+                      </div>
+                    </el-card>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-card class="box-card">
+                      <div slot="header" class="clearfix">
+                        <span>访问量</span>
+                      </div>
+                      <div class="card-content">
+                        <p class="card-number">45,678</p>
+                        <p class="card-description">总访问量</p>
+                      </div>
+                    </el-card>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="消息中心">
+              <div class="tab-pane-content">
+                <el-timeline>
+                  <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
+                    {{ activity.content }}
+                  </el-timeline-item>
+                </el-timeline>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="设置">
+              <div class="tab-pane-content">
+                <el-form :model="settingForm" label-width="120px">
+                  <el-form-item label="网站名称">
+                    <el-input v-model="settingForm.name"></el-input>
+                  </el-form-item>
+                  <el-form-item label="网站描述">
+                    <el-input type="textarea" v-model="settingForm.description"></el-input>
+                  </el-form-item>
+                  <el-form-item label="开启评论">
+                    <el-switch v-model="settingForm.comment"></el-switch>
+                  </el-form-item>
+                  <el-form-item label="维护模式">
+                    <el-switch v-model="settingForm.maintenance"></el-switch>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button type="primary" @click="saveSettings">保存设置</el-button>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'Tab',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {
+        activeTab1: 'first',
+        activeTab2: 'first',
+        tableData: [
+          {
+            date: '2023-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2023-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄',
+          },
+          {
+            date: '2023-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄',
+          },
+          {
+            date: '2023-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+          },
+        ],
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: '',
+        },
+        roles: [
+          { id: 1, name: '管理员', description: '拥有系统全部权限' },
+          { id: 2, name: '编辑者', description: '可以编辑内容' },
+          { id: 3, name: '查看者', description: '只能查看内容' },
+        ],
+        activities: [
+          {
+            content: '创建了新的项目',
+            timestamp: '2023-05-01',
+          },
+          {
+            content: '完成了用户管理模块',
+            timestamp: '2023-05-02',
+          },
+          {
+            content: '修复了若干bug',
+            timestamp: '2023-05-03',
+          },
+          {
+            content: '发布了新版本',
+            timestamp: '2023-05-04',
+          },
+        ],
+        settingForm: {
+          name: 'Vue Admin Better',
+          description: '一个优秀的后台管理系统',
+          comment: true,
+          maintenance: false,
+        },
+      }
+    },
+    methods: {
+      onSubmit() {
+        this.$message('提交成功！')
+      },
+      saveSettings() {
+        this.$message('设置已保存！')
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tab-container {
+    padding: 15px;
+    background: $base-color-white;
+
+    .tab-content {
+      min-height: 400px;
+
+      .tab-demo {
+        margin-bottom: 30px;
+
+        h3 {
+          margin: 20px 0;
+          color: #333;
+        }
+
+        .tab-pane-content {
+          padding: 20px 0;
+          color: #606266;
+
+          .card-content {
+            text-align: center;
+
+            .card-number {
+              font-size: 24px;
+              font-weight: bold;
+              color: #409eff;
+              margin: 10px 0;
+            }
+
+            .card-description {
+              color: #999;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/vab/table/components/TableEdit.vue b/src/views/vab/table/components/TableEdit.vue
new file mode 100644
index 0000000..ce7cb38
--- /dev/null
+++ b/src/views/vab/table/components/TableEdit.vue
@@ -0,0 +1,70 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+      <el-form-item label="标题" prop="title">
+        <el-input v-model.trim="form.title" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="作者" prop="author">
+        <el-input v-model.trim="form.author" autocomplete="off" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        form: {
+          title: '',
+          author: '',
+        },
+        rules: {
+          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
+          author: [{ required: true, trigger: 'blur', message: '请输入作者' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        this.$emit('fetch-data')
+      },
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.dialogFormVisible = false
+            this.$emit('fetch-data')
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>
diff --git a/src/views/vab/table/index.vue b/src/views/vab/table/index.vue
new file mode 100644
index 0000000..c7b31ae
--- /dev/null
+++ b/src/views/vab/table/index.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="table-container">
+    <vab-page-header description="功能强大的数据表格组件，支持排序、分页、搜索等功能" :icon="['fas', 'table']" title="表格管理" />
+    <vab-query-form>
+      <vab-query-form-left-panel>
+        <el-button icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button>
+        <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button>
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.title" placeholder="标题" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <el-table-column show-overflow-tooltip type="selection" width="55" />
+      <el-table-column label="序号" show-overflow-tooltip width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column label="标题" prop="title" show-overflow-tooltip />
+      <el-table-column label="作者" prop="author" show-overflow-tooltip />
+      <el-table-column label="头像" show-overflow-tooltip>
+        <template #default="{ row }">
+          <el-image v-if="imgShow" :preview-src-list="imageList" :src="row.img" />
+        </template>
+      </el-table-column>
+      <el-table-column label="点击量" prop="pageViews" show-overflow-tooltip sortable />
+      <el-table-column label="状态" show-overflow-tooltip>
+        <template #default="{ row }">
+          <el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
+            <el-tag :type="row.status | statusFilter">
+              {{ row.status }}
+            </el-tag>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column label="时间" prop="datetime" show-overflow-tooltip width="200" />
+      <el-table-column label="操作" show-overflow-tooltip width="180px">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { doDelete, getList } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleEdit(row) {
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await doDelete({ ids: row.id })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } else {
+          if (this.selectRows.length > 0) {
+            const ids = this.selectRows.map((item) => item.id).join()
+            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
+              const { msg } = await doDelete({ ids: ids })
+              this.$baseMessage(msg, 'success')
+              this.fetchData()
+            })
+          } else {
+            this.$baseMessage('未选中任何行', 'error')
+            return false
+          }
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, totalCount } = await getList(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = totalCount
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/vab/tree/index.vue b/src/views/vab/tree/index.vue
new file mode 100644
index 0000000..139149b
--- /dev/null
+++ b/src/views/vab/tree/index.vue
@@ -0,0 +1,449 @@
+<template>
+  <div class="tree-container">
+    <vab-page-header
+      description="Element UI 树形组件的使用示例，包含常规树、懒加载树、单选树、多选树"
+      :icon="['fas', 'tree']"
+      title="树形组件"
+    />
+    <el-row :gutter="20">
+      <el-col :lg="6" :md="24" :sm="24" :xl="6" :xs="24">
+        <el-divider content-position="left">常规树</el-divider>
+        <el-input v-model="filterText" placeholder="输入关键字过滤" />
+        <el-tree
+          ref="demoTree"
+          class="vab-filter-tree"
+          :data="data2"
+          :default-checked-keys="defaultCheckedKeys"
+          :default-expanded-keys="defaultExpendedKeys"
+          :expand-on-click-node="false"
+          :filter-node-method="filterNode"
+          :highlight-current="true"
+          node-key="id"
+          :props="defaultProps"
+          show-checkbox
+          @check="checkNode"
+          @node-click="nodeClick"
+          @node-collapse="nodeCollapse"
+          @node-expand="nodeExpand"
+        >
+          <template #defalut="{ node, data }" class="vab-custom-tree-node">
+            <span class="vab-tree-item">
+              <i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
+              {{ node.label }}
+            </span>
+            <span class="vab-tree-options">
+              <a v-if="node.data.rank !== 4" class="vab-tree-btn" title="添加" @click="() => append(node, data, 0)">
+                <i class="el-icon-plus"></i>
+              </a>
+              <a class="vab-tree-btn" title="编辑" @click="() => edit(node, data, 1)">
+                <i class="el-icon-edit"></i>
+              </a>
+              <a v-if="node.data.rank !== 1" class="vab-tree-btn" title="刪除" @click="() => remove(node, data)">
+                <i class="el-icon-delete"></i>
+              </a>
+            </span>
+          </template>
+        </el-tree>
+      </el-col>
+      <el-col :lg="6" :md="24" :sm="24" :xl="6" :xs="24">
+        <el-divider content-position="left">懒加载树</el-divider>
+        <el-input v-model.lazy="keyW" class="input-with-select" placeholder="请输入内容" :value="keyW" @keyup.enter.native="showTreeList" />
+        <div v-show="isShow" class="blur-tree">
+          <el-tree
+            ref="treeFilter"
+            class="vab-filter-tree"
+            :data="filterDevLlist"
+            default-expand-all
+            :expand-on-click-node="false"
+            highlight-current
+            node-key="indexCode"
+            :props="defaultProps"
+            @node-click="nodeClick"
+          >
+            <template #defalut="{ node }" class="vab-custom-tree-node">
+              <span class="vab-tree-item">
+                <i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
+                {{ node.label }}
+              </span>
+              <span class="vab-tree-options">
+                <a v-if="node.data.rank !== 4" class="vab-tree-btn" title="添加">
+                  <i class="el-icon-plus"></i>
+                </a>
+                <a class="vab-tree-btn" title="编辑">
+                  <i class="el-icon-edit"></i>
+                </a>
+                <a v-if="node.data.rank !== 1" class="vab-tree-btn" title="刪除">
+                  <i class="el-icon-delete"></i>
+                </a>
+              </span>
+            </template>
+          </el-tree>
+        </div>
+        <div v-show="!isShow" class="el-tree-wrap">
+          <el-tree
+            ref="tree"
+            v-loading="loading"
+            class="vab-filter-tree"
+            :expand-on-click-node="false"
+            highlight-current
+            lazy
+            :load="loadNode"
+            node-key="indexCode"
+            :props="defaultProps"
+            @node-click="nodeClick"
+          >
+            <template #defalut="{ node }" class="vab-custom-tree-node">
+              <span class="vab-tree-item">
+                <i v-if="node.data.rank == 4" class="el-icon-s-custom"></i>
+                {{ node.label }}
+              </span>
+              <span class="vab-tree-options">
+                <!-- <a v-if="node.data.rank !== 4" class="vab-tree-btn" title="添加""><i class="el-icon-plus"></i></a> -->
+                <a class="vab-tree-btn" title="编辑">
+                  <i class="el-icon-edit"></i>
+                </a>
+                <a v-if="node.data.rank !== 1" class="vab-tree-btn" title="刪除">
+                  <i class="el-icon-delete"></i>
+                </a>
+              </span>
+            </template>
+          </el-tree>
+        </div>
+      </el-col>
+      <el-col :lg="6" :md="24" :sm="24" :xl="6" :xs="24">
+        <el-divider content-position="left">单选树</el-divider>
+        <el-select
+          ref="singleTree"
+          v-model="singleSelectTreeVal"
+          class="vab-tree-select"
+          clearable
+          popper-class="select-tree-popper"
+          value-key="id"
+          @clear="selectTreeClearHandle('single')"
+        >
+          <el-option :value="singleSelectTreeKey">
+            <el-tree
+              id="singleSelectTree"
+              ref="singleSelectTree"
+              :current-node-key="singleSelectTreeKey"
+              :data="selectTreeData"
+              :default-expanded-keys="selectTreeDefaultSelectedKeys"
+              :highlight-current="true"
+              node-key="id"
+              :props="selectTreeDefaultProps"
+              @node-click="selectTreeNodeClick"
+            >
+              <template #defalut="{ node }" class="vab-custom-tree-node">
+                <span class="vab-tree-item">{{ node.label }}</span>
+              </template>
+            </el-tree>
+          </el-option>
+        </el-select>
+      </el-col>
+      <el-col :lg="6" :md="24" :sm="24" :xl="6" :xs="24">
+        <el-divider content-position="left">多选树</el-divider>
+        <el-select
+          v-model="multipleSelectTreeVal"
+          class="vab-tree-select"
+          clearable
+          collapse-tags
+          multiple
+          popper-class="select-tree-popper"
+          @change="changeMultipleSelectTreeHandle"
+          @clear="selectTreeClearHandle('multiple')"
+          @remove-tag="removeSelectTreeTag"
+        >
+          <el-option :value="multipleSelectTreeKey">
+            <el-tree
+              id="multipleSelectTree"
+              ref="multipleSelectTree"
+              :current-node-key="multipleSelectTreeKey"
+              :data="selectTreeData"
+              :default-checked-keys="selectTreeDefaultSelectedKeys"
+              :default-expanded-keys="selectTreeDefaultSelectedKeys"
+              :highlight-current="true"
+              node-key="id"
+              :props="selectTreeDefaultProps"
+              show-checkbox
+              @check="multipleSelectTreeCheckNode"
+            />
+          </el-option>
+        </el-select>
+      </el-col>
+    </el-row>
+    <!--添加/编辑节点弹框-------------------start-->
+    <el-dialog
+      class="tree-operate-dialog"
+      :title="dialogTitle"
+      :visible.sync="treeDialogVisible"
+      width="400px"
+      @close="treeDialogVisible = false"
+    >
+      <el-form ref="treeForm" :model="treeForm">
+        <el-form-item label="节点名称" required>
+          <el-input v-model="treeForm.name" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="treeDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveTree">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!--添加/编辑节点弹框-------------------end-->
+  </div>
+</template>
+
+<script>
+  import { getTreeList } from '@/api/tree'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'Tree',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {
+        dialogTitle: '添加节点',
+        treeFlag: 0,
+        treeDialogVisible: false,
+        treeForm: {
+          id: '',
+          name: '',
+        },
+        checkNodeKeys: [],
+        filterText: '',
+        data2: [],
+        defaultProps: {
+          children: 'children',
+          label: 'name',
+        },
+        defaultExpendedKeys: [],
+        defaultCheckedKeys: [],
+        loading: true,
+        keyW: '',
+        filterDevLlist: [],
+        isShow: false,
+        updateTree: true,
+        /* 单选树-多选树---------开始 */
+        selectLevel: 4, // 树可选叶子level等级
+        singleSelectTreeVal: '', //单选树默认label值
+        singleSelectTreeKey: '', //单选树默认key值
+        selectTreeData: [], //单选树的值
+        selectTreeDefaultSelectedKeys: [], //单选树默认展开的key值数组
+        selectTreeDefaultProps: {
+          children: 'children',
+          label: 'name',
+        },
+        multipleSelectTreeVal: [], //多选树默认label值
+        multipleSelectTreeKey: '', //多选树默认key值
+        /* 单选树-多选树---------结束 */
+      }
+    },
+    watch: {
+      filterText(val) {
+        this.$refs.demoTree.filter(val)
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.getTreeListFuc(1)
+        this.setCheckedKeys()
+        // 初始化单选树
+        this.initSingleTree('single')
+        // 初始化多选树
+        this.initSingleTree('multiple')
+      })
+    },
+    methods: {
+      // 树level小于n级展开方法
+      openTree(treeData, n) {
+        const each = (data) => {
+          data.forEach((e) => {
+            if (e.rank <= n) {
+              this.defaultExpendedKeys.push(e.id)
+            }
+            if (e.children.length > 0) {
+              each(e.children)
+            }
+          })
+        }
+
+        each(treeData)
+      },
+      // 获取tree数据
+      async getTreeListFuc(flag) {
+        const { data } = await getTreeList()
+        this.data2 = data
+        if (flag) {
+          this.openTree(this.data2, 2)
+        }
+      },
+      // 节点过滤操作
+      filterNode(value, data) {
+        if (!value) return true
+        return data.name.indexOf(value) !== -1
+      },
+      // 添加节点操作
+      append(node, data, flag) {
+        this.treeFlag = flag
+        this.dialogTitle = '添加节点'
+        this.treeForm = {
+          id: '',
+          name: '',
+        }
+        this.treeDialogVisible = true
+      },
+      // 编辑节点操作
+      edit(node, data, flag) {
+        this.treeFlag = flag
+        this.dialogTitle = '编辑节点'
+        this.treeForm = {
+          id: data.id,
+          name: data.name,
+        }
+        this.treeDialogVisible = true
+      },
+      // 删除节点操作
+      remove(node, data) {
+        this.$baseConfirm('你确定要删除该节点?', null, async () => {
+          const { msg } = getTreeList()
+          this.$baseMessage(msg, 'success')
+          this.getTreeListFuc(0)
+        })
+      },
+      // 保存添加和编辑
+      saveTree() {
+        this.$refs.treeForm.validate(async (valid) => {
+          if (valid) {
+            const { msg } = await getTreeList()
+            this.$baseMessage(msg, 'success')
+            this.treeDialogVisible = false
+            this.getTreeListFuc(0)
+          }
+        })
+      },
+      // 设置节点选中
+      setCheckedKeys() {
+        this.$refs.demoTree.setCheckedKeys([1])
+      },
+      // 点击叶子节点
+      nodeClick(data, node, el) {},
+      // 节点选中操作
+      checkNode(data, node, el) {
+        this.checkNodeKeys = node.checkedKeys
+      },
+      // 节点展开操作
+      nodeExpand(data, node, el) {
+        this.defaultExpendedKeys.push(data.id)
+      },
+      // 节点关闭操作
+      nodeCollapse(data, node, el) {
+        this.defaultExpendedKeys.splice(
+          this.defaultExpendedKeys.findIndex((item) => item.id === data.id),
+          1
+        )
+      },
+      async loadNode(node, resolve) {
+        if (node.level === 0) {
+          const { data } = await getTreeList()
+          this.loading = false
+          return resolve(data)
+        } else {
+          const { data } = await getTreeList()
+          return resolve(res.data)
+        }
+      },
+      //懒加载树输入框筛选方法
+      async showTreeList(value) {
+        if (typeof value === 'string') {
+          this.keyW = value.trim()
+        }
+        if (this.keyW.length !== 0) {
+          // 请求后台返回查询结果
+          let treeOption = {}
+          treeOption = {
+            keyWord: this.keyW,
+          }
+          const { data } = await getTreeList()
+          this.filterDevLlist = data
+          this.isShow = true
+        } else {
+          this.isShow = false
+        }
+      },
+      /* 单选/多选树方法-------------------开始 */
+      // 初始化单选树的值
+      async initSingleTree(treeType) {
+        const { data } = await getTreeList()
+        this.selectTreeData = data
+        this.$nextTick(() => {
+          this.selectTreeDefaultSelectedKeys = this.singleSelectTreeKey.split(',') // 设置默认展开
+          if (treeType == 'single') {
+            //单选树
+            this.$refs.singleSelectTree.setCurrentKey(this.singleSelectTreeKey) // 设置默认选中
+          } else {
+            // 多选树
+            this.$refs.multipleSelectTree.setCheckedKeys(this.selectTreeDefaultSelectedKeys)
+          }
+        })
+      },
+      // 清除单选树选中
+      selectTreeClearHandle(type) {
+        this.selectTreeDefaultSelectedKeys = []
+        this.clearSelected()
+        if (type == 'single') {
+          this.singleSelectTreeVal = ''
+          this.singleSelectTreeKey = ''
+          this.$refs.singleSelectTree.setCurrentKey('') // 设置默认选中
+        } else {
+          this.multipleSelectTreeVal = []
+          this.multipleSelectTreeKey = ''
+          this.$refs.multipleSelectTree.setCheckedKeys([])
+        }
+      },
+      /* 清空选中样式 */
+      clearSelected() {
+        const allNode = document.querySelectorAll('#singleSelectTree .el-tree-node')
+        allNode.forEach((element) => element.classList.remove('is-current'))
+      },
+      // select多选时移除某项操作
+      removeSelectTreeTag(val) {
+        const stack = JSON.parse(JSON.stringify(this.selectTreeData))
+        while (stack.length) {
+          const curr = stack.shift()
+          if (curr.name == val) {
+            return this.$refs.multipleSelectTree.setChecked(curr.id, false)
+          }
+          if (curr.children && curr.children.length) {
+            stack.unshift(...curr.children)
+          }
+        }
+      },
+      changeMultipleSelectTreeHandle(val) {},
+      // 点击叶子节点
+      selectTreeNodeClick(data, node, el) {
+        if (data.rank >= this.selectLevel) {
+          this.singleSelectTreeVal = data.name
+          this.singleSelectTreeKey = data.id
+          this.$refs.singleTree.blur()
+        }
+      },
+      // 节点选中操作
+      multipleSelectTreeCheckNode(data, node, el) {
+        const checkedNodes = this.$refs.multipleSelectTree.getCheckedNodes()
+        const keyArr = []
+        const valueArr = []
+        checkedNodes.forEach((item) => {
+          if (item.rank >= this.selectLevel) {
+            keyArr.push(item.id)
+            valueArr.push(item.name)
+          }
+        })
+        this.multipleSelectTreeVal = valueArr
+        this.multipleSelectTreeKey = keyArr.join(',')
+      },
+      /* 单选/多选树方法-------------------结束 */
+    },
+  }
+</script>
diff --git a/src/views/vab/upload/index.vue b/src/views/vab/upload/index.vue
new file mode 100644
index 0000000..c947714
--- /dev/null
+++ b/src/views/vab/upload/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="upload-container">
+    <vab-page-header description="文件上传组件，支持拖拽上传、进度显示等功能" :icon="['fas', 'cloud-upload-alt']" title="文件上传" />
+
+    <el-divider content-position="left">演示环境可能无法模拟上传</el-divider>
+    <vab-upload ref="vabUpload" :limit="50" name="file" :size="2" url="/upload" />
+    <el-button type="primary" @click="handleShow({ key: 'value' })">模拟上传</el-button>
+  </div>
+</template>
+
+<script>
+  import VabUpload from '@/components/VabUpload'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'Upload',
+    components: {
+      VabUpload,
+      VabPageHeader,
+    },
+    data() {
+      return {}
+    },
+    methods: {
+      handleShow(data) {
+        this.$refs['vabUpload'].handleShow(data)
+      },
+    },
+  }
+</script>
diff --git a/src/views/vab/webSocket/index.vue b/src/views/vab/webSocket/index.vue
new file mode 100644
index 0000000..b9bef3b
--- /dev/null
+++ b/src/views/vab/webSocket/index.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="webSocket-container">
+    <vab-page-header description="WebSocket 实时通信功能演示，支持消息发送和接收" :icon="['fas', 'comments']" title="WebSocket" />
+
+    <el-row :gutter="20">
+      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
+        <el-alert :closable="false" type="success">webSocket连接{{ status }}！</el-alert>
+        <br />
+        <el-form ref="form" label-width="100px" :model="form" :rules="rules">
+          <el-form-item label="地址">
+            <el-input v-model="url" disabled />
+          </el-form-item>
+          <el-form-item label="消息" prop="message">
+            <el-input v-model="form.message" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="submit">发送消息</el-button>
+          </el-form-item>
+          <el-form-item label="返回信息汇总">
+            {{ data }}
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'WebSocket',
+    components: {
+      VabPageHeader,
+    },
+    data() {
+      return {
+        url: 'ws://123.207.136.134:9010/ajaxchattest',
+        webSocket: null,
+        data: [],
+        status: '',
+        form: { message: null },
+        rules: {
+          message: [{ required: true, message: '请输入消息', trigger: 'blur' }],
+        },
+      }
+    },
+    created() {
+      this.init()
+    },
+    destroyed() {
+      this.webSocket.close()
+    },
+    methods: {
+      submit() {
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            this.send(this.form.message)
+          } else {
+            return false
+          }
+        })
+      },
+      init() {
+        const wsuri = this.url
+        this.webSocket = new WebSocket(wsuri)
+        this.webSocket.onmessage = this.onmessage
+        this.webSocket.onopen = this.onopen
+        this.webSocket.onerror = this.onerror
+        this.webSocket.onclose = this.onclose
+      },
+      onopen() {
+        this.status = '成功'
+      },
+      onerror() {
+        this.status = '失败'
+        this.init()
+      },
+      onmessage({ data }) {
+        //截掉测试webSocket地址广告
+        this.data.push(data.substring(0, data.length - 66))
+      },
+      send(Data) {
+        this.webSocket.send(Data)
+      },
+      onclose(e) {
+        this.status = '断开'
+      },
+    },
+  }
+</script>
diff --git a/src/views/vehicle/components/TableEdit.vue b/src/views/vehicle/components/TableEdit.vue
new file mode 100644
index 0000000..184c28d
--- /dev/null
+++ b/src/views/vehicle/components/TableEdit.vue
@@ -0,0 +1,211 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+  <script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+  export default {
+  name: 'TableEdit',
+  data() {
+  return {
+  ids:true,
+  status:'',
+  options: [{
+  value: '已支付',
+  label: '已支付'
+  },
+  ],
+  form: {
+  券包名称:'',
+  券包价格:'',
+  package1:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  package2:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  package3:{
+  券ID:'',
+  券的有效期限:'',
+  },
+  },
+  rules: {
+  // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+  券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+  券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+  },
+  title: '',
+  dialogFormVisible: false,
+  }
+  },
+  created() {
+  },
+  methods:{
+  showEdit(row,ids){
+  this.status = row
+  if (!row) {
+  this.title = '添加1'
+  this.ids = false
+  this.form.券包名称='',
+  this.form. 券包价格='',
+  this.form.package1 = {}
+  this.form.package2 = {}
+  this.form.package3 = {}
+  }
+  else if (ids) {
+  this.ids = ids
+  this.title = '查看'
+  this.form = Object.assign({}, row)
+  }
+  else{
+  this.title = '编辑'
+  this.ids = false
+  this.form = Object.assign({}, row)
+  }
+  this.dialogFormVisible = true
+  },
+  close(){
+  // this.$refs['form'].resetFields()
+  // this.form = this.$options.data().form
+  this.dialogFormVisible = false
+  this.form.券包名称='',
+  this.form. 券包价格='',
+  this.form.package1 = {}
+  this.form.package2 = {}
+  this.form.package3 = {}
+  },
+  save() {
+  if(this.status){
+  this.$refs['form'].validate(async (valid) => {
+  if (valid) {
+  const { msg } = await editPackage(this.form)
+  this.$message({
+  message:msg,
+  duration:2000,
+  type:'success'
+  })
+  // this.$baseMessage(msg, 'success')
+  this.$refs['form'].resetFields()
+  this.$parent.fetchData();
+  this.dialogFormVisible = false
+  this.form = this.$options.data().form
+  } 
+  else 
+  {
+  return false
+  }
+  })
+  }
+  else
+  {
+  this.$refs['form'].validate(async (valid) => {
+  if (valid) {
+  const { msg } = await addPackage(this.form)
+  this.$message({
+  message:msg,
+  duration:2000,
+  type:'success'
+  })
+  // this.$baseMessage(msg, 'success')
+  this.$refs['form'].resetFields()
+  this.$parent.fetchData();
+  this.dialogFormVisible = false
+  this.form = this.$options.data().form
+  } else {
+  return false
+  }
+  })
+  }
+  },
+  },
+  }
+  </script>
diff --git a/src/views/vehicle/index.vue b/src/views/vehicle/index.vue
new file mode 100644
index 0000000..becf033
--- /dev/null
+++ b/src/views/vehicle/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">车辆登记</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>
diff --git a/src/views/xiaowa/components/TableEdit.vue b/src/views/xiaowa/components/TableEdit.vue
new file mode 100644
index 0000000..a559633
--- /dev/null
+++ b/src/views/xiaowa/components/TableEdit.vue
@@ -0,0 +1,214 @@
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+       <template>
+  <el-row>
+  <el-col :span="12">
+   <el-form-item label="券包名称" prop="券包名称">
+        <el-input :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+   <el-col :span="12">
+   <el-form-item label="券包价格" prop="券包价格">
+        <el-input :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+  <el-row>
+  <el-col :span="2">
+   <el-form-item label="券1" prop="券1">
+        <!-- <el-input v-model.trim="form.券包名称" autocomplete="off" /> -->
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package1.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package1.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券2" prop="券2">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package2.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package2.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <el-row>
+     <el-col :span="2">
+   <el-form-item label="券3" prop="券3">
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券ID" prop="券ID">
+        <el-input :disabled="ids" v-model="form.package3.券ID" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+   <el-col :span="10">
+   <el-form-item label="券有效期" prop="券的有效期限">
+        <el-input :disabled="ids" v-model="form.package3.券的有效期限" autocomplete="off" />
+      </el-form-item>
+  </el-col>
+  </el-row>
+
+   <!-- <el-row>
+ 
+  </el-row> -->
+       </template>
+         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
+             <el-select v-model="form.订单状态" placeholder="请选择">
+             <el-option
+               v-for="item in options"
+               :key="item.value"
+               :label="item.label"
+               :value="item.value">
+             </el-option>
+           </el-select>
+      </el-form-item> -->
+    </el-form>
+     
+    <div slot="footer" class="dialog-footer" v-if="!ids">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit,addPackage,editPackage } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        ids:true,
+        status:'',
+          options: [{
+          value: '已支付',
+          label: '已支付'
+        },
+        ],
+        form: {
+          券包名称:'',
+          券包价格:'',
+          package1:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package2:{
+             券ID:'',
+          券的有效期限:'',
+          },
+           package3:{
+             券ID:'',
+          券的有效期限:'',
+          },
+         
+        
+        },
+        rules: {
+          // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
+          券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
+          券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row,ids) {
+        console.log(row,ids,'???')
+        this.status = row
+        if (!row) {
+        this.title = '添加'
+        this.ids = false
+        this.form.券包名称='',
+        this.form. 券包价格='',
+        this.form.package1 = {}
+        this.form.package2 = {}
+        this.form.package3 = {}
+           
+        } else if (ids) {
+          this.ids = ids
+           this.title = '查看'
+             this.form = Object.assign({}, row)
+        }else{
+           this.title = '编辑'
+            this.ids = false
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close(){
+        // this.$refs['form'].resetFields()
+        // this.form = this.$options.data().form
+      this.dialogFormVisible = false
+      this.form.券包名称='',
+      this.form. 券包价格='',
+      this.form.package1 = {}
+      this.form.package2 = {}
+      this.form.package3 = {}
+        // this.$emit('fetch-data')
+      },
+      save() {
+        if(this.status){
+           this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await editPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+        }else{
+            this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await addPackage(this.form)
+            this.$message({
+              message:msg,
+              duration:2000,
+              type:'success'
+            })
+            // this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.$parent.fetchData();
+            this.dialogFormVisible = false
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+
+        }
+        // console.log(this.status,'--=')
+      },
+    },
+  }
+</script>
+
diff --git a/src/views/xiaowa/index.vue b/src/views/xiaowa/index.vue
new file mode 100644
index 0000000..d6eb4ed
--- /dev/null
+++ b/src/views/xiaowa/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="table-container">
+    <vab-query-form>
+      <vab-query-form-left-panel >
+        <el-button  icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
+        <!-- <el-button :disabled="true" icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button> -->
+        <!-- <el-button type="primary" @click="testMessage">baseMessage</el-button>
+        <el-button type="primary" @click="testALert">baseAlert</el-button>
+        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
+        <el-button type="primary" @click="testNotify">baseNotify</el-button> -->
+      </vab-query-form-left-panel>
+      <!-- <vab-query-form-right-panel>
+        <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input v-model="queryForm.status_Inquiry" placeholder="输入券名称支持模糊查询" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel> -->
+    </vab-query-form>
+
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      :data="list"
+      :element-loading-text="elementLoadingText"
+      :height="height"
+      @selection-change="setSelectRows"
+      @sort-change="tableSortChange"
+    >
+      <!-- <el-table-column  type="selection" width="55" /> -->
+      <!-- <el-table-column label="序号"  width="95">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column> -->
+       <el-table-column align="center" width="180" label="券包ID" prop="券包ID"  />
+      <el-table-column  align="center"  label="券包价格" prop="券包价格"  />
+      <el-table-column  align="center" label="券包名称" prop="券包名称"  />
+      <!-- <el-table-column align="center" width="200" label="券规则" prop="券规则"  /> -->
+        <!-- <el-table-column align="center"  width="120" label="手机号" prop="手机号"  /> -->
+        <!-- <el-table-column align="center" width="200" label="抵扣条件" prop="抵扣条件"  />
+        <el-table-column align="center"  width="100" label="抵扣金额" prop="抵扣金额"  /> -->
+          <!-- <el-table-column align="center"  width="100" label="有效期" prop="有效期"  /> -->
+             <!-- <el-table-column align="center"  width="100" label="起始时间" prop="起始时间"  />
+            <el-table-column align="center"  width="100" label="结束时间" prop="结束时间"  /> -->
+      <el-table-column label="操作"  fixed="right" width="150px">
+        <template #default="{ row }">
+          <el-button  type="text" @click="handleView(row,ids)">查看</el-button>
+          <el-button  type="text" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="text" @click="hdleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :background="background"
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <table-edit ref="edit" />
+  </div>
+</template>
+
+<script>
+  import { deletePackage, couponPackage,exportUserOperateAdmin } from '@/api/table'
+  import TableEdit from './components/TableEdit'
+  import VabPageHeader from '@/components/VabPageHeader'
+
+  export default {
+    name: 'ComprehensiveTable',
+    components: {
+      TableEdit,
+      VabPageHeader,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'gray',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        ids:true,
+          pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        imgShow: true,
+        list: [],
+        imageList: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        background: true,
+        selectRows: '',
+        elementLoadingText: '正在加载...',
+        queryForm: {
+          pageNo: 1,
+          pageSize: 20,
+          title: '',
+        },
+        timeOutID: null,
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight()
+      },
+    },
+    created() {
+      this.fetchData()
+    },
+    beforeDestroy() {
+      clearTimeout(this.timeOutID)
+    },
+    mounted() {},
+    methods: {
+        hdleDelete(row) {
+          console.log(row,'--=')
+        if (row.券包ID) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { msg } = await deletePackage({ ids: row.券包ID })
+            this.$baseMessage(msg, 'success')
+            this.fetchData()
+          })
+        } 
+      },
+    
+      tableSortChange() {
+        const imageList = []
+        this.$refs.tableSort.tableData.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+      handleAdd() {
+        this.$refs['edit'].showEdit()
+      },
+      handleView(row,ids){
+        this.$refs['edit'].showEdit(row,ids)
+      },
+      handleEdit(row) {
+        // console.log(row,'---')
+        this.$refs['edit'].showEdit(row)
+      },
+      handleDelete() {
+        exportUserOperateAdmin().then(
+  response => {
+     window.location.href = response.data.url;  
+    // const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
+    // const link = document.createElement('a')
+    // link.href = url
+    // link.download = '全文导入模板.xlsx' // 设置文件名
+    // document.body.appendChild(link)
+    // link.click() // 触发下载
+    // document.body.removeChild(link) // 下载后移除元素
+  }
+).catch(error => {
+  console.error('下载失败', error)
+  this.loading = false // 停止加载，隐藏加载状态
+})
+      
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+      handleQuery() {
+        this.queryForm.pageNo = 1
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const { data, total } = await couponPackage(this.queryForm)
+        this.list = data
+        const imageList = []
+        data.forEach((item, index) => {
+          imageList.push(item.img)
+        })
+        this.imageList = imageList
+        this.total = total
+        this.timeOutID = setTimeout(() => {
+          this.listLoading = false
+        }, 500)
+      },
+      testMessage() {
+        this.$baseMessage('test1', 'success')
+      },
+      testALert() {
+        this.$baseAlert('11')
+        this.$baseAlert('11', '自定义标题', () => {
+          /* 可以写回调; */
+        })
+        this.$baseAlert('11', null, () => {
+          /* 可以写回调; */
+        })
+      },
+      testConfirm() {
+        this.$baseConfirm(
+          '你确定要执行该操作?',
+          null,
+          () => {
+            /* 可以写回调; */
+          },
+          () => {
+            /* 可以写回调; */
+          }
+        )
+      },
+      testNotify() {
+        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
+      },
+    },
+  }
+</script>