init

1 year ago · c3cb7b6ca1
commit c3cb7b6ca1
48 changed files with 8215 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,9 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+end_of_line = lf
+max_line_length = 100
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,6 @@
+# 生产环境配置
+VITE_APP_ENV = 'development'
+
+# 生产环境
+VITE_APP_BASE_API = '/'
+
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,7 @@
+
+# 生产环境配置
+VITE_APP_ENV = 'production'
+
+# 生产环境
+VITE_APP_BASE_API = '/api'
+
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1 @@
+* text=auto eol=lf
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,7 @@
+
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode"
+  ]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,35 @@
+# AI-Toning
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,22 @@
+import js from '@eslint/js'
+import pluginVue, { rules } from 'eslint-plugin-vue'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{js,mjs,jsx,vue}'],
+    rules: {
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+
+  js.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+  skipFormatting,
+]
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,39 @@
+{
+  "name": "ai-toning",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "axios": "^1.7.9",
+    "echarts": "^5.6.0",
+    "element-plus": "^2.9.4",
+    "file-saver": "^2.0.5",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.3.1",
+    "vue": "^3.5.13",
+    "vue-echarts": "^7.0.3",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.18.0",
+    "@iconify-json/ep": "^1.2.2",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "eslint": "^9.18.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "prettier": "^3.4.2",
+    "sass-embedded": "^1.83.4",
+    "unplugin-auto-import": "^19.0.0",
+    "unplugin-icons": "^22.0.0",
+    "unplugin-vue-components": "^28.0.0",
+    "vite": "^6.0.11",
+    "vite-plugin-vue-devtools": "^7.7.1"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,25 @@
+<template>
+  <el-config-provider :locale="locale">
+    <router-view v-slot="{ Component }">
+      <keep-alive>
+        <component :is="Component" :key="$route.name" v-if="route.meta.keepAlive" />
+      </keep-alive>
+      <component :is="Component" :key="$route.name" v-if="!route.meta.keepAlive" />
+    </router-view>
+  </el-config-provider>
+</template>
+
+<script setup>
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+
+const locale = ref(zhCn)
+
+const route = useRoute()
+
+onMounted(() => {
+  console.log(import.meta.env.VITE_APP_ENV)
+})
+
+</script>
+
+<style lang="scss"></style>
--- a/src/assets/images/SystemManage/中文@2x.png
+++ b/src/assets/images/SystemManage/中文@2x.png
--- a/src/assets/images/SystemManage/日本@2x.png
+++ b/src/assets/images/SystemManage/日本@2x.png
--- a/src/assets/images/SystemManage/英国@2x.png
+++ b/src/assets/images/SystemManage/英国@2x.png
--- a/src/assets/images/SystemManage/越南@2x.png
+++ b/src/assets/images/SystemManage/越南@2x.png
--- a/src/assets/images/SystemManage/韩国@2x.png
+++ b/src/assets/images/SystemManage/韩国@2x.png
--- a/src/assets/images/login/login_bg.jpg
+++ b/src/assets/images/login/login_bg.jpg
--- a/src/assets/images/login/login_bg.png
+++ b/src/assets/images/login/login_bg.png
--- a/src/assets/images/login/login_img.png
+++ b/src/assets/images/login/login_img.png
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@ -0,0 +1,78 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}
--- a/src/components.d.ts
+++ b/src/components.d.ts
@ -0,0 +1,51 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElAside: typeof import('element-plus/es')['ElAside']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElOptionGroup: typeof import('element-plus/es')['ElOptionGroup']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
+    IEpHelpFilled: typeof import('~icons/ep/help-filled')['default']
+    IEpHomeFilled: typeof import('~icons/ep/home-filled')['default']
+    IEpMenu: typeof import('~icons/ep/menu')['default']
+    IEpMessageBox: typeof import('~icons/ep/message-box')['default']
+    IEpPlus: typeof import('~icons/ep/plus')['default']
+    IEpScaleToOriginal: typeof import('~icons/ep/scale-to-original')['default']
+    Pagination: typeof import('./components/Pagination/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
+}
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@ -0,0 +1,83 @@
+<script setup>
+import { scrollTo } from '@/utils/scroll-to'
+
+const props = defineProps({
+  total: {
+    required: true,
+    type: Number,
+  },
+  pageSizes: {
+    type: Array,
+    default() {
+      return [10, 20, 30, 50]
+    },
+  },
+  // 移动端页码按钮的数量端默认值5
+  pagerCount: {
+    type: Number,
+    default: document.body.clientWidth < 992 ? 5 : 7,
+  },
+  layout: {
+    type: String,
+    default: 'total, sizes, prev, pager, next, jumper',
+  },
+  background: {
+    type: Boolean,
+    default: true,
+  },
+  autoScroll: {
+    type: Boolean,
+    default: true,
+  },
+  hidden: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:limit', 'pagination'])
+const currentPage = defineModel('page', { default: 1 })
+const pageSize = defineModel('limit', { default: 20 })
+function handleSizeChange(val) {
+  if (currentPage.value * val > props.total) {
+    currentPage.value = 1
+  }
+  emit('pagination', { page: currentPage.value, limit: val })
+  if (props.autoScroll) {
+    scrollTo(0, 800)
+  }
+}
+function handleCurrentChange(val) {
+  emit('pagination', { page: val, limit: pageSize.value })
+  if (props.autoScroll) {
+    scrollTo(0, 800)
+  }
+}
+</script>
+
+<template>
+  <div class="pagination-container" :class="{ hidden }">
+    <el-pagination
+      :background="background"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :pager-count="pagerCount"
+      :total="total"
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+  padding: 32px 16px;
+  flex-shrink: 0;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>
--- a/src/layout/components/aside.vue
+++ b/src/layout/components/aside.vue
@ -0,0 +1,67 @@
+<template>
+    <div class="aside">
+        <div class="scrollbar">
+            <el-scrollbar>
+                <el-menu :default-openeds="['/SystemManage']" :default-active="route.path" active-text-color="#1890FF" background-color="#fff" text-color="#000" router>
+                    <template v-for="(item, index) in routes[0].children" :key="index">
+                        <el-sub-menu :index="'/' + item.path" v-if="item.children && item.children.filter(el => !el.meta.hide).length > 0">
+                            <template #title>
+                                <span> {{ item.meta.title }}</span>
+                            </template>
+                            <el-menu-item v-for="(ele, idx) in item.children.filter(el => !el.meta.hide)" :index="'/' + item.path + '/' + ele.path" :key="idx">{{ ele.meta.title }}</el-menu-item>
+                        </el-sub-menu>
+                        <el-menu-item :index="item.redirect || '/' + item.path" v-else-if="!item.meta.hide">
+                            <el-icon v-if="item.meta.title === '工作台'">
+                                <Calendar />
+                            </el-icon>
+                            <el-icon v-if="item.meta.title === '企业管理'">
+                                <OfficeBuilding />
+                            </el-icon>
+                            <el-icon v-if="item.meta.title === 'C端管理'">
+                                <User />
+                            </el-icon>
+                            <el-icon v-if="item.meta.title === '消息中心'">
+                                <ChatDotSquare />
+                            </el-icon>
+                            <span>{{ item.meta.title }}</span>
+                        </el-menu-item>
+                    </template>
+                </el-menu>
+            </el-scrollbar>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { routes } from '@/router/index';
+
+const route = useRoute();
+</script>
+
+<style lang="scss" scoped>
+.aside {
+    height: calc(100vh - 60px);
+    background-color: #fff;
+    padding-top: 20px;
+
+    .scrollbar {
+        height: calc(100vh - 100px);
+    }
+
+    .el-scrollbar {
+        background-color: #fff;
+
+        .el-menu-item.is-active {
+            background-color: rgba(24, 144, 255, 0.1)
+        }
+
+        .el-menu-item:hover {
+            background-color: rgba(24, 144, 255, 0.1)
+        }
+
+        :deep(.el-sub-menu__title:hover) {
+            background-color: rgba(24, 144, 255, 0.1)
+        }
+    }
+}
+</style>
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -0,0 +1,159 @@
+<template>
+  <el-container class="layout-container">
+    <el-header>
+      <div class="toolbar">
+        <div class="title">
+          <div class="img"></div>
+          <div class="text">卡叔智慧管理系统后台</div>
+        </div>
+        <el-dropdown>
+          <div class="userInfo">
+            <div class="avatar"></div>
+            <div class="username">{{ userStore.userInfo?.nickname || userStore.userInfo?.username }}</div>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </el-header>
+
+    <el-container>
+      <el-aside width="200px">
+        <Aside></Aside>
+      </el-aside>
+      <el-main>
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item v-for="(item, index) in breadcrumbList">{{ item.meta.title }}</el-breadcrumb-item>
+        </el-breadcrumb>
+        <div class="container">
+          <el-scrollbar>
+            <router-view></router-view>
+          </el-scrollbar>
+        </div>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script lang="ts" setup>
+import Aside from './components/aside.vue';
+import { routes } from '@/router/index';
+import { useRoute, useRouter } from 'vue-router';
+import { useUserStore } from '@/stores/user'
+const userStore = useUserStore()
+
+const breadcrumbList = ref([])
+const route = useRoute();
+const router = useRouter();
+
+const getBreadcrumbList = () => {
+  const arr = []
+  const obj = routes[0].children.find(item => item.path === route.path.split('/')[1])
+  arr.push(obj)
+  if (route.path.split('/').length > 2) {
+    arr.push(obj.children.find(item => item.path === route.path.split('/')[2]))
+  }
+  breadcrumbList.value = arr
+}
+watch(route, () => {
+  getBreadcrumbList()
+
+})
+getBreadcrumbList()
+
+const logout = () => {
+  userStore.logout()
+  router.push('/login')
+}
+
+
+</script>
+
+<style scoped lang="scss">
+.layout-container {
+  height: 100vh;
+  min-width: 1200px;
+  background-color: #f2f2f2;
+  overflow: hidden;
+
+  .el-header {
+    padding: 0;
+    height: 60px;
+
+    .toolbar {
+      height: 60px;
+      background-color: #000;
+      font-size: 14px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-right: 24px;
+      color: #fff;
+
+      .title {
+        display: flex;
+        align-items: center;
+        height: 60px;
+
+        .img {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          margin-left: 24px;
+          margin-right: 10px;
+          background-color: skyblue;
+        }
+
+        .text {
+          color: #fff;
+          font-weight: 700;
+        }
+      }
+
+
+      .userInfo {
+        display: flex;
+        align-items: center;
+
+        .avatar {
+          width: 26px;
+          height: 26px;
+          border-radius: 50%;
+          background-color: skyblue;
+          margin-right: 10px;
+        }
+
+        .username {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .el-main {
+    padding-top: 0;
+    overflow-y: hidden;
+
+    :deep(.el-breadcrumb__inner.is-link) {
+      color: #006eff;
+    }
+
+    .el-breadcrumb {
+      height: 56px;
+      display: flex;
+      align-items: center;
+    }
+
+    .container {
+      height: calc(98vh - 110px);
+      background-color: #fff;
+      border-radius: 10px;
+      padding: 15px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,25 @@
+import './style/main.scss'
+import './style/element.scss'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+import App from './App.vue'
+import router from './router'
+
+// 分页组件
+import Pagination from '@/components/Pagination/index.vue'
+
+const app = createApp(App)
+
+app.component('Pagination', Pagination)
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,86 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Layout from '@/layout/index.vue'
+import { useUserStore } from '@/stores/user'
+
+// 进度条
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+export const routes = [
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/WorkbenchPage',
+    children: [
+      {
+        path: 'WorkbenchPage',
+        name: 'WorkbenchPage',
+        component: () => import('@/views/WorkbenchPage/index.vue'),
+        meta: { title: '工作台' },
+      },
+      {
+        path: 'BusinessManage',
+        name: 'BusinessManage',
+        redirect: '/BusinessManage/EnterpriseManage',
+        meta: { title: '企业管理' },
+        children: [
+          {
+            path: 'EnterpriseManage',
+            name: 'EnterpriseManage',
+            component: () => import('@/views/BusinessManage/index.vue'),
+            meta: { title: '企业列表', hide: true },
+          },
+          {
+            path: 'DataManage',
+            name: 'DataManage',
+            component: () => import('@/views/BusinessManage/DataManage.vue'),
+            meta: { title: '资料管理', hide: true },
+          },
+        ],
+      },
+      {
+        path: 'CustomerManage',
+        name: 'CustomerManage',
+        component: () => import('@/views/CustomerManage/index.vue'),
+        meta: { title: 'C端管理' },
+      },
+      {
+        path: 'MessageCenter',
+        name: 'MessageCenter',
+        component: () => import('@/views/MessageCenter/index.vue'),
+        meta: { title: '消息中心' },
+      },
+    ],
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('@/views/Login/index.vue'),
+    meta: { title: '登录' },
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+})
+
+// 白名单
+const wihteList = ['/login']
+
+// 全局前置导航守卫
+router.beforeEach((to) => {
+  // 开启进度条
+  NProgress.start()
+  // 如果没有 token ，并且不在白名单中，则从定向到登陆
+  if (!useUserStore().token && !wihteList.includes(to.path)) return '/login'
+})
+
+// 全局后置导航守卫
+router.afterEach((to) => {
+  document.title = `${to.meta.title || ''}-卡叔电梯`
+  // 关闭进度条
+  NProgress.done()
+})
+
+export default router
--- a/src/stores/user.js
+++ b/src/stores/user.js
@ -0,0 +1,24 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', () => {
+  const token = ref(localStorage.getItem('token') || '')
+  const userInfo = ref(
+    localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {},
+  )
+  const setToken = (t) => {
+    token.value = t
+    localStorage.setItem('token', t)
+  }
+  const setUserInfo = (u) => {
+    userInfo.value = u
+    localStorage.setItem('userInfo', JSON.stringify(u))
+  }
+  const logout = () => {
+    localStorage.removeItem('token')
+    localStorage.removeItem('userInfo')
+    token.value = ''
+    userInfo.value = {}
+  }
+  return { token, setToken, setUserInfo, userInfo, logout }
+})
--- a/src/style/element.scss
+++ b/src/style/element.scss
@ -0,0 +1,11 @@
+.el-table {
+  .table-header {
+    .el-table__cell {
+      background-color: #f7f7f7;
+    }
+  }
+}
+
+:root:root {
+  --el-color-primary: #006eff; /* 改变主色调 */
+}
--- a/src/style/main.scss
+++ b/src/style/main.scss
@ -0,0 +1,36 @@
+body {
+  padding: 0;
+  margin: 0;
+}
+*:focus-visible {
+  outline: none;
+}
+
+.pagination-container {
+  position: relative;
+  margin-top: 30px;
+  padding: 0 20px !important;
+  display: flex;
+  justify-content: center;
+}
+
+.table_border {
+  border: 1px solid #eee;
+  border-bottom: none;
+}
+
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.content-center {
+  justify-content: center;
+}
+
+.pointer {
+  cursor: pointer;
+}
--- a/src/utils/cache.js
+++ b/src/utils/cache.js
@ -0,0 +1,77 @@
+const sessionCache = {
+  set(key, value) {
+    if (!sessionStorage) {
+      return
+    }
+    if (key != null && value != null) {
+      sessionStorage.setItem(key, value)
+    }
+  },
+  get(key) {
+    if (!sessionStorage) {
+      return null
+    }
+    if (key == null) {
+      return null
+    }
+    return sessionStorage.getItem(key)
+  },
+  setJSON(key, jsonValue) {
+    if (jsonValue != null) {
+      this.set(key, JSON.stringify(jsonValue))
+    }
+  },
+  getJSON(key) {
+    const value = this.get(key)
+    if (value != null) {
+      return JSON.parse(value)
+    }
+  },
+  remove(key) {
+    sessionStorage.removeItem(key)
+  },
+}
+const localCache = {
+  set(key, value) {
+    if (!localStorage) {
+      return
+    }
+    if (key != null && value != null) {
+      localStorage.setItem(key, value)
+    }
+  },
+  get(key) {
+    if (!localStorage) {
+      return null
+    }
+    if (key == null) {
+      return null
+    }
+    return localStorage.getItem(key)
+  },
+  setJSON(key, jsonValue) {
+    if (jsonValue != null) {
+      this.set(key, JSON.stringify(jsonValue))
+    }
+  },
+  getJSON(key) {
+    const value = this.get(key)
+    if (value != null) {
+      return JSON.parse(value)
+    }
+  },
+  remove(key) {
+    localStorage.removeItem(key)
+  },
+}
+
+export default {
+  /**
+   * 会话级缓存
+   */
+  session: sessionCache,
+  /**
+   * 本地缓存
+   */
+  local: localCache,
+}
--- a/src/utils/constant.js
+++ b/src/utils/constant.js
@ -0,0 +1,14 @@
+export const roleOption = [
+  {
+    label: '超级管理员',
+    value: -1,
+  },
+  {
+    label: '管理员',
+    value: 1,
+  },
+  {
+    label: '业务员',
+    value: 2,
+  },
+]
--- a/src/utils/hook.js
+++ b/src/utils/hook.js
@ -0,0 +1,250 @@
+import { useElementBounding } from '@vueuse/core'
+import RPC from '@/utils/rpc'
+
+const isFunction = (val) => typeof val === 'function'
+
+export function useTable({
+  queryParams = {},
+  remoteDataFn,
+  onTransformParams,
+  onTransformData,
+  deleteConfig,
+  exportUrl,
+  exportFileName,
+  searchFormRef,
+}) {
+  const tableData = ref([])
+  const loading = ref(false)
+  const total = ref(0)
+  /**
+   * @type {import('vue').Ref<import('element-plus').TableInstance | null>} tableRef - 表格组件引用
+   */
+  const tableRef = ref(null)
+
+  /**
+   * @type {()=>import('element-plus').FormInstance | null} searchFormRef - 查询表单组件引用
+   */
+  const _searchFormRef = searchFormRef ? computed(() => searchFormRef()) : ref(null)
+
+  const _queryParams = ref({
+    pageNum: 1,
+    pageSize: 10,
+    ...queryParams,
+  })
+
+  const isShowDialog = ref(false)
+
+  function getList() {
+    loading.value = true
+    const params = onTransformParams?.(_queryParams.value) || _queryParams.value
+    remoteDataFn(params)
+      .then((response) => {
+        const data = onTransformData?.(response) || response
+        tableData.value = data?.rows || []
+        total.value = data.total
+        loading.value = false
+      })
+      .catch((err) => {
+        loading.value = false
+        console.error(err)
+      })
+  }
+
+  /** 搜索按钮操作 */
+  function handleQuery() {
+    _queryParams.value.pageNum = 1
+    getList()
+  }
+  /** 重置按钮操作 */
+  function resetQuery() {
+    _searchFormRef.value.resetFields()
+    _queryParams.value.pageNum = 1
+    getList()
+  }
+
+  /** 导出 */
+  function handleExport() {
+    const params = onTransformParams?.(_queryParams.value) || _queryParams.value
+    download(exportUrl, params, exportFileName)
+  }
+
+  /** 删除按钮操作 */
+  function handleDelete(row) {
+    const { remote, message, onSuccess, onError } = deleteConfig
+    ElMessageBox.confirm(isFunction(message) ? message(row) : message, '提醒', {
+      type: 'warning',
+    })
+      .then(() => {
+        remote(row.id)
+          .then(() => {
+            getList()
+            onSuccess?.()
+            ElMessage.success('删除成功')
+          })
+          .catch((e) => {
+            console.error(`删除失败：${e}`)
+          })
+      })
+      .catch(() => {
+        onError?.()
+      })
+  }
+
+  const { tableContainerEl, maxHeight } = useTableMaxHeight()
+
+  return {
+    tableData,
+    loading,
+    total,
+    tableRef,
+    searchFormRef: _searchFormRef,
+    isShowDialog,
+    queryParams: _queryParams,
+    /** 表格容器 ref */
+    tableContainerEl,
+    /** 表格自适应外层容器高度 :max-height="maxHeight" */
+    maxHeight,
+
+    getList,
+    handleQuery,
+    resetQuery,
+    handleDelete,
+    handleExport,
+  }
+}
+
+export function useTableRPC({
+  queryParams = {},
+  remoteDataFn,
+  onTransformParams,
+  onTransformData,
+  deleteConfig,
+  exportUrl,
+  exportFileName,
+  searchFormRef,
+}) {
+  const tableData = ref([])
+  const loading = ref(false)
+  const total = ref(0)
+  /**
+   * @type {import('vue').Ref<import('element-plus').TableInstance | null>} tableRef - 表格组件引用
+   */
+  const tableRef = ref(null)
+
+  /**
+   * @type {()=>import('element-plus').FormInstance | null} searchFormRef - 查询表单组件引用
+   */
+  const _searchFormRef = searchFormRef ? computed(() => searchFormRef()) : ref(null)
+
+  const _queryParams = ref({
+    page: 1,
+    limit: 10,
+    ...queryParams,
+  })
+
+  const isShowDialog = ref(false)
+
+  const transformParams = (params) => {
+    const _params = {
+      page: params.page,
+      limit: params.limit,
+      orderby: params.orderby || null,
+      like: {},
+    }
+    for (const k in params) {
+      if (params[k] && k !== 'page' && k !== 'limit' && k !== 'orderby') {
+        _params.like[k] = [`%${params[k]}%`]
+      }
+    }
+    return _params
+  }
+
+  function getList() {
+    loading.value = true
+    const params = transformParams(_queryParams.value)
+    RPC.post(remoteDataFn, params)
+      .then((response) => {
+        tableData.value = response?.rows || []
+        total.value = response.count
+      })
+      .finally(() => {
+        loading.value = false
+      })
+  }
+
+  /** 搜索按钮操作 */
+  function handleQuery() {
+    _queryParams.value.page = 1
+    getList()
+  }
+  /** 重置按钮操作 */
+  function resetQuery() {
+    _searchFormRef.value.resetFields()
+    _queryParams.value.page = 1
+    getList()
+  }
+
+  /** 导出 */
+  function handleExport() {
+    const params = onTransformParams?.(_queryParams.value) || _queryParams.value
+    download(exportUrl, params, exportFileName)
+  }
+
+  /** 删除按钮操作 */
+  function handleDelete(row) {
+    const { remote, message, onSuccess, onError, key } = deleteConfig
+    ElMessageBox.confirm(isFunction(message) ? message(row) : message, '提醒', {
+      type: 'warning',
+    })
+      .then(() => {
+        RPC.post(remote, { id: row[key] })
+          .then(() => {
+            getList()
+            onSuccess?.()
+            ElMessage.success('删除成功')
+          })
+          .catch((e) => {
+            console.error(`删除失败：${e}`)
+          })
+      })
+      .catch(() => {
+        onError?.()
+      })
+  }
+
+  const { tableContainerEl, maxHeight } = useTableMaxHeight()
+
+  return {
+    tableData,
+    loading,
+    total,
+    tableRef,
+    searchFormRef: _searchFormRef,
+    isShowDialog,
+    queryParams: _queryParams,
+    /** 表格容器 ref */
+    tableContainerEl,
+    /** 表格自适应外层容器高度 :max-height="maxHeight" */
+    maxHeight,
+
+    getList,
+    handleQuery,
+    resetQuery,
+    handleDelete,
+    handleExport,
+  }
+}
+
+export function useTableMaxHeight() {
+  const tableContainerEl = ref(null)
+  const { height } = useElementBounding(tableContainerEl)
+
+  const maxHeight = computed(() => {
+    return Number.isNaN(height.value) ? `100%` : Math.floor(height.value)
+  })
+
+  return {
+    tableContainerEl,
+    maxHeight,
+  }
+}
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -0,0 +1,166 @@
+import axios from 'axios'
+import { ElLoading, ElMessage, ElMessageBox, ElNotification } from 'element-plus'
+import { tansParams } from '@/utils/utils'
+import cache from '@/utils/cache'
+import { useUserStore } from '@/stores/user'
+
+const errorCode = {
+  401: '认证失败，无法访问系统资源',
+  403: '当前操作没有权限',
+  404: '访问资源不存在',
+  default: '系统未知错误，请反馈给管理员',
+}
+
+let downloadLoadingInstance
+// 是否显示重新登录
+export const isRelogin = { show: false }
+
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+// 创建axios实例
+const service = axios.create({
+  // axios中请求配置有baseURL选项，表示请求URL公共部分
+  baseURL: import.meta.env.VITE_APP_BASE_API,
+  // 超时
+  timeout: 300000,
+})
+
+// request拦截器
+service.interceptors.request.use(
+  (config) => {
+    // 是否需要设置 token
+    const isToken = (config.headers || {}).isToken === false
+    // 是否需要防止数据重复提交
+    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
+    if (useUserStore().token && !isToken) {
+      config.headers.Authorization = `Bearer ${useUserStore().token}` // 让每个请求携带自定义token 请根据实际情况自行修改
+    }
+    // get请求映射params参数
+    if (config.method === 'get' && config.params) {
+      let url = `${config.url}?${tansParams(config.params)}`
+      url = url.slice(0, -1)
+      config.params = {}
+      config.url = url
+    }
+    if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
+      const requestObj = {
+        url: config.url,
+        data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
+        time: new Date().getTime(),
+      }
+      const requestSize = Object.keys(JSON.stringify(requestObj)).length // 请求数据大小
+      const limitSize = 5 * 1024 * 1024 // 限制存放数据5M
+      if (requestSize >= limitSize) {
+        console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
+        return config
+      }
+      const sessionObj = cache.session.getJSON('sessionObj')
+      if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+        cache.session.setJSON('sessionObj', requestObj)
+      } else {
+        const s_url = sessionObj.url // 请求地址
+        const s_data = sessionObj.data // 请求数据
+        const s_time = sessionObj.time // 请求时间
+        const interval = 1000 // 间隔时间(ms)，小于此时间视为重复提交
+        if (
+          s_data === requestObj.data &&
+          requestObj.time - s_time < interval &&
+          s_url === requestObj.url
+        ) {
+          const message = '数据正在处理，请勿重复提交'
+          console.warn(`[${s_url}]: ${message}`)
+          return Promise.reject(new Error(message))
+        } else {
+          cache.session.setJSON('sessionObj', requestObj)
+        }
+      }
+    }
+    return config
+  },
+  (error) => {
+    console.error(error)
+    Promise.reject(error)
+  },
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+  (res) => {
+    // 未设置状态码则默认成功状态
+    const code = res.data.code || 200
+    // 获取错误信息
+    const msg = errorCode[code] || res.data.msg || errorCode.default
+    // 二进制数据则直接返回
+    if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
+      return res.data
+    }
+    if (code === 401) {
+      return Promise.reject(new Error('无效的会话，或者会话已过期，请重新登录。'))
+    } else if (code === 500) {
+      ElMessage({ message: msg, type: 'error' })
+      return Promise.reject(new Error(msg))
+    } else if (code === 601) {
+      ElMessage({ message: msg, type: 'warning' })
+      return Promise.reject(new Error(msg))
+    } else if (code !== 200) {
+      ElNotification.error({ title: msg })
+      return Promise.reject(new Error('error'))
+    } else {
+      return Promise.resolve(res.data)
+    }
+  },
+  (error) => {
+    // eslint-disable-next-line no-console
+    console.log(`sever err: ${error}`)
+    let { message } = error
+    if (message === 'Network Error') {
+      message = '后端接口连接异常'
+    } else if (message.includes('timeout')) {
+      message = '系统接口请求超时'
+    } else if (message.includes('Request failed with status code')) {
+      message = `系统接口${message.substr(message.length - 3)}异常`
+    }
+    ElMessage({ message, type: 'error', duration: 5 * 1000 })
+    return Promise.reject(error)
+  },
+)
+
+const blobToExcel = (data, name) => {
+  // const base = base64ToArrayBuffer(data);
+  // eslint-disable-next-line no-undef
+  const blob = new Blob([data], {
+    type: 'application/vnd.ms-excel;charset=utf-8',
+  })
+
+  const link = document.createElement('a')
+  // 下载后的文件名
+  link.download = name
+
+  link.href = URL.createObjectURL(blob)
+  document.body.appendChild(link)
+  link.click()
+  // 释放URL对象
+  URL.revokeObjectURL(link.href)
+  document.body.removeChild(link)
+}
+export const download = (url, fileName) => {
+  downloadLoadingInstance = ElLoading.service({
+    text: '正在下载数据，请稍候',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
+  return service
+    .get(url, {
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      responseType: 'blob',
+    })
+    .then(async (data) => {
+      blobToExcel(data, fileName)
+      downloadLoadingInstance.close()
+    })
+    .catch((r) => {
+      console.error(r)
+      ElMessage.error('下载文件出现错误，请联系管理员！')
+      downloadLoadingInstance.close()
+    })
+}
+
+export default service
--- a/src/utils/rpc.js
+++ b/src/utils/rpc.js
@ -0,0 +1,66 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/stores/user'
+
+const noticeError = (msg) => {
+  // Message.error(msg)
+  ElMessage({
+    message: msg,
+    type: 'error',
+  })
+}
+const guid = () => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = (Math.random() * 16) | 0,
+      v = c == 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
+const instance = axios.create({
+  baseURL: '/',
+  timeout: 100000,
+  responseType: 'json',
+})
+
+// HTTP request拦截
+instance.interceptors.request.use(
+  (config) => {
+    const method = config.url
+    const params = config.data
+    config.url = '/jsonrpc'
+    config.data = {
+      id: guid(),
+      jsonrpc: '2.0',
+      method,
+      params,
+      session: useUserStore().token,
+      timestampin: Date.now().toString(),
+    }
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  },
+)
+
+// HTTP response拦截
+instance.interceptors.response.use(
+  (response) => {
+    if (response.data.error.code === 200) {
+      return Promise.resolve(response.data.result)
+    } else if (response.data.error.code === 401) {
+      noticeError(response.data.error.message)
+      useUserStore().logout()
+      return Promise.reject(response.data.error.message)
+    } else {
+      noticeError(response.data.error.message)
+      return Promise.reject(response.data.error.message)
+    }
+  },
+  (error) => {
+    noticeError(error.message)
+    return Promise.reject(error)
+  },
+)
+
+export default instance
--- a/src/utils/scroll-to.js
+++ b/src/utils/scroll-to.js
@ -0,0 +1,61 @@
+Math.easeInOutQuad = function (t, b, c, d) {
+  t /= d / 2
+  if (t < 1) {
+    return c / 2 * t * t + b
+  }
+  t--
+  return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+const requestAnimFrame = (function () {
+  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
+    window.setTimeout(callback, 1000 / 60)
+  }
+})()
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+function move(amount) {
+  document.documentElement.scrollTop = amount
+  document.body.parentNode.scrollTop = amount
+  document.body.scrollTop = amount
+}
+
+function position() {
+  return (document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop)
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export function scrollTo(to, duration, callback) {
+  const start = position()
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+  duration = (typeof (duration) === 'undefined') ? 500 : duration
+  const animateScroll = function () {
+    // increment the time
+    currentTime += increment
+    // find the value with the quadratic in-out easing function
+    const val = Math.easeInOutQuad(currentTime, start, change, duration)
+    // move the document.body
+    move(val)
+    // do the animation unless its over
+    if (currentTime < duration) {
+      requestAnimFrame(animateScroll)
+    }
+ else {
+      if (callback && typeof (callback) === 'function') {
+        // the animation is done so lets callback
+        callback()
+      }
+    }
+  }
+  animateScroll()
+}
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@ -0,0 +1,25 @@
+/**
+ * 参数处理
+ * @param {*} params  参数
+ */
+export function tansParams(params) {
+  let result = ''
+  for (const propName of Object.keys(params)) {
+    const value = params[propName]
+    const part = `${encodeURIComponent(propName)}=`
+    if (value !== null && value !== '' && typeof value !== 'undefined') {
+      if (typeof value === 'object') {
+        for (const key of Object.keys(value)) {
+          if (value[key] !== null && value[key] !== '' && typeof value[key] !== 'undefined') {
+            const params = `${propName}[${key}]`
+            const subPart = `${encodeURIComponent(params)}=`
+            result += `${subPart + encodeURIComponent(value[key])}&`
+          }
+        }
+      } else {
+        result += `${part + encodeURIComponent(value)}&`
+      }
+    }
+  }
+  return result
+}
--- a/src/views/BusinessManage/DataManage.vue
+++ b/src/views/BusinessManage/DataManage.vue
@ -0,0 +1,11 @@
+<template>
+    <div class="container">
+        资料管理
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/views/BusinessManage/index.vue
+++ b/src/views/BusinessManage/index.vue
@ -0,0 +1,92 @@
+<template>
+    <div>
+        <div class="title">
+            企业管理
+        </div>
+        <el-form ref="searchFormRef" class="form" :inline="true" label-width="98px" :model="queryParams">
+            <el-form-item label="个人名称" prop="configName">
+                <el-input clearable placeholder="请输入" style="width: 220px;" v-model="queryParams.configName" @keyup.enter="handleQuery" />
+            </el-form-item>
+
+            <el-form-item label-width="100px">
+                <el-button icon="Search" type="primary" @keyup.enter.prevent="handleQuery" @keydown.enter.prevent>
+                    搜索
+                </el-button>
+                <el-button icon="RefreshRight" @click="resetQuery">
+                    重置
+                </el-button>
+            </el-form-item>
+        </el-form>
+
+        <div style="margin-bottom: 20px;">
+            <el-button icon="Plus" type="primary" @click="add">
+                新建
+            </el-button>
+        </div>
+        <div ref="tableContainerEl" class="table_border table">
+            <el-table ref="tableRef" :data="tableData" v-loading="loading" header-row-class-name="table-header">
+                <el-table-column align="center" label="企业名称" prop="name" />
+                <el-table-column align="center" label="地址详情" prop="name" />
+                <el-table-column align="center" label="业务类型" prop="name" />
+                <el-table-column align="center" label="注册日期" prop="name" />
+                <el-table-column align="center" label="状态" prop="name" />
+                <el-table-column align="center" label="操作">
+                    <template #default="{ row }">
+                        <el-button link type="primary" @click="edit(row)">
+                            修改
+                        </el-button>
+
+                        <el-button link type="danger" @click="handleDelete(row)">
+                            删除
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <pagination v-show="total > 0" :total="total" v-model:limit="queryParams.limit" v-model:page="queryParams.page" @pagination="getList" />
+    </div>
+</template>
+
+<script setup>
+import { useTableRPC } from '@/utils/hook';
+import dayjs from 'dayjs';
+import RPC from '@/utils/rpc';
+
+const rowType = ref('')
+const currentRow = ref(null)
+const add = () => {
+    isShowDialog.value = true
+    currentRow.value = null
+    rowType.value = 'add'
+}
+const edit = (row) => {
+    isShowDialog.value = true
+    rowType.value = 'edit'
+    currentRow.value = row
+}
+
+
+const { loading, tableData, tableRef, searchFormRef, total, queryParams, getList, handleQuery, resetQuery, handleDelete, isShowDialog, maxHeight, tableContainerEl } = useTableRPC({
+    queryParams: {
+    },
+    remoteDataFn: '/underpainting/list',
+    deleteConfig: {
+        remote: '/underpainting/delete',
+        key: 'id',
+        message(row) {
+            return `确认删除 “${row.underpainting_name}”`
+        },
+    },
+})
+
+getList()
+</script>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 20px;
+}
+</style>
--- a/src/views/CustomerManage/HandleDialog.vue
+++ b/src/views/CustomerManage/HandleDialog.vue
@ -0,0 +1,74 @@
+<script setup>
+import RPC from '@/utils/rpc';
+const props = defineProps({
+  type: {
+    type: String,
+    required: true,
+  },
+  row: [Object],
+})
+
+const emit = defineEmits(['closed', 'onSuccess'])
+
+const dialogVisible = ref(false)
+
+const isAdd = computed(() => props.type === 'add')
+
+onMounted(() => {
+  dialogVisible.value = true
+})
+
+const formRef = ref(null)
+const formField = ref({
+  color_component: []
+})
+const formRules = reactive({
+
+})
+
+const loading = ref(false)
+
+function closed() {
+  emit('closed')
+}
+
+const submitForm = () => {
+
+}
+
+const detailData = ref([])
+if (!isAdd.value) {
+  // formField.value = props.row
+}
+
+
+const add = () => {
+  formField.value.color_component.push({ num: calcId(formField.value.color_component), color_paste_id: '', remark: '', ratio: 0.01 })
+}
+
+const handleDelete = row => {
+  formField.value.color_component = formField.value.color_component.filter(item => item.num !== row.num)
+}
+
+</script>
+
+<template>
+  <el-dialog align-center :title="isAdd ? '新增' : '修改'" width="774px" v-model="dialogVisible" @closed="closed" :close-on-click-modal="false">
+    <el-form ref="formRef" label-position="right" label-suffix=":" :model="formField" :rules="formRules" v-loading="loading">
+      111
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">
+          取 消
+        </el-button>
+        <el-button type="primary" :loading="loading" @click="submitForm">
+          确 定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped></style>
--- a/src/views/CustomerManage/index.vue
+++ b/src/views/CustomerManage/index.vue
@ -0,0 +1,102 @@
+<template>
+    <div>
+        <div class="title">
+            C端管理
+        </div>
+        <el-form ref="searchFormRef" class="form" :inline="true" label-width="98px" :model="queryParams">
+            <el-form-item label="个人名称" prop="configName">
+                <el-input clearable placeholder="请输入" style="width: 220px;" v-model="queryParams.configName" @keyup.enter="handleQuery" />
+            </el-form-item>
+
+            <el-form-item label-width="100px">
+                <el-button icon="Search" type="primary" @keyup.enter.prevent="handleQuery" @keydown.enter.prevent>
+                    搜索
+                </el-button>
+                <el-button icon="RefreshRight" @click="resetQuery">
+                    重置
+                </el-button>
+            </el-form-item>
+        </el-form>
+
+        <div style="margin-bottom: 20px;">
+            <el-button icon="Plus" type="primary" @click="add">
+                新建
+            </el-button>
+        </div>
+        <div ref="tableContainerEl" class="table_border table">
+            <el-table ref="tableRef" :data="tableData" v-loading="loading" header-row-class-name="table-header">
+                <el-table-column align="center" label="账号名称" prop="name" />
+                <el-table-column align="center" label="姓名" prop="name" />
+                <el-table-column align="center" label="地址详情" prop="name" />
+                <el-table-column align="center" label="手机号码" prop="name" />
+                <el-table-column align="center" label="咨询类型" prop="name" />
+                <el-table-column align="center" label="邮箱" prop="name" />
+                <el-table-column align="center" label="注册日期" prop="name">
+                    <template #default="{ row }">
+                        <span>{{ row.updateTime && dayjs(row.updateTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="备注" prop="name" />
+                <el-table-column align="center" label="操作">
+                    <template #default="{ row }">
+                        <el-button link type="primary" @click="edit(row)">
+                            修改
+                        </el-button>
+
+                        <el-button link type="danger" @click="handleDelete(row)">
+                            删除
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <pagination v-show="total > 0" :total="total" v-model:limit="queryParams.limit" v-model:page="queryParams.page" @pagination="getList" />
+
+        <HandleDialog v-if="isShowDialog" :type="rowType" :colorPasteList="colorPasteList" :row="currentRow" @closed="isShowDialog = false" @on-success="getList" />
+    </div>
+</template>
+
+<script setup>
+import { useTableRPC } from '@/utils/hook';
+import HandleDialog from './HandleDialog.vue'
+import dayjs from 'dayjs';
+import RPC from '@/utils/rpc';
+
+const rowType = ref('')
+const currentRow = ref(null)
+const add = () => {
+    isShowDialog.value = true
+    currentRow.value = null
+    rowType.value = 'add'
+}
+const edit = (row) => {
+    isShowDialog.value = true
+    rowType.value = 'edit'
+    currentRow.value = row
+}
+
+
+const { loading, tableData, tableRef, searchFormRef, total, queryParams, getList, handleQuery, resetQuery, handleDelete, isShowDialog, maxHeight, tableContainerEl } = useTableRPC({
+    queryParams: {
+    },
+    remoteDataFn: '/underpainting/list',
+    deleteConfig: {
+        remote: '/underpainting/delete',
+        key: 'id',
+        message(row) {
+            return `确认删除 “${row.underpainting_name}”`
+        },
+    },
+})
+
+getList()
+</script>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 20px;
+}
+</style>
--- a/src/views/Login/index.vue
+++ b/src/views/Login/index.vue
@ -0,0 +1,125 @@
+<template>
+    <div class="login">
+        <div class="container">
+            <div class="titleBox">
+                <div class="col"></div>
+                <div class="title">
+                    WELCOME
+                    <div class="text">
+                        卡叔电梯智慧管理系统后台
+                    </div>
+                </div>
+            </div>
+            <el-form ref="loginRef" class="login-form" :model="loginForm" :rules="loginRules">
+                <el-form-item prop="username">
+                    <el-input auto-complete="off" placeholder="请输入用户名" size="large" type="text" v-model="loginForm.username">
+                        <template #prefix>
+                            <span style="color:#000">用户名：</span>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="password">
+                    <el-input auto-complete="off" placeholder="请输入密码" size="large" type="password" v-model="loginForm.password" @keyup.enter="handleLogin">
+                        <template #prefix>
+                            <span style="color:#000">密码：</span>
+                        </template>
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item style="width:100%;">
+                    <el-button class="login_button" :loading="loading" size="large" style="width:100%;" type="primary" @click.prevent="handleLogin">
+                        <span v-if="!loading">登录</span>
+                        <span v-else>登录中...</span>
+                    </el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useUserStore } from '@/stores/user'
+import RPC from '@/utils/rpc';
+const router = useRouter()
+const loading = ref(false)
+const loginRef = ref(null)
+const loginForm = ref({
+    username: '',
+    password: '',
+})
+
+
+const loginRules = {
+    username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+    password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
+}
+
+const handleLogin = () => {
+    loginRef.value.validate((valid) => {
+        if (valid) {
+            loading.value = true
+            RPC.post('/account/login', { username: loginForm.value.username, password: loginForm.value.password }).then(res => {
+                useUserStore().setToken(res.token)
+                RPC.post('/account/myinfo').then(res => {
+                    useUserStore().setUserInfo(res)
+                    ElMessage.success('登录成功')
+                    router.push('/')
+                }).finally(() => {
+                    loading.value = false
+                })
+            }).catch(() => {
+                loading.value = false
+            })
+        }
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+.login {
+    height: 98vh;
+    position: relative;
+    background: center / cover url('@/assets/images/login/login_bg.jpg') no-repeat;
+
+    .container {
+        width: 380px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        .titleBox {
+            font-size: 32px;
+            font-weight: bold;
+            display: flex;
+            color: #fff;
+            align-items: center;
+
+            .col {
+                width: 1px;
+                height: 86px;
+                background-color: #fff;
+                margin-right: 38px;
+            }
+
+            .text {
+                font-size: 26px;
+                margin-top: 10px;
+            }
+        }
+
+        .login-form {
+            width: 380px;
+            margin: 60px 0;
+
+            .el-form-item {
+                margin-bottom: 25px;
+            }
+
+            .login_button {
+                margin-top: 30px;
+            }
+        }
+    }
+}
+</style>
--- a/src/views/MessageCenter/index.vue
+++ b/src/views/MessageCenter/index.vue
@ -0,0 +1,11 @@
+<template>
+    <div>
+        消息中心
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/views/WorkbenchPage/index.vue
+++ b/src/views/WorkbenchPage/index.vue
@ -0,0 +1,418 @@
+<template>
+  <div class="workbench-page">
+    <div class="title">总体情况</div>
+    <div class="content">
+      <!-- 统计卡片区域 -->
+      <div class="stats-cards">
+        <div class="stat-card">
+          <div class="stat-icon blue">
+            <el-icon><House /></el-icon>
+          </div>
+          <div class="stat-info">
+            <div class="stat-label">企业总数量</div>
+            <div class="stat-value">100</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon purple">
+            <el-icon><User /></el-icon>
+          </div>
+          <div class="stat-info">
+            <div class="stat-label">注册总数量</div>
+            <div class="stat-value">1050</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon orange">
+            <el-icon><Star /></el-icon>
+          </div>
+          <div class="stat-info">
+            <div class="stat-label">游客访问量</div>
+            <div class="stat-value">1136</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon green">
+            <el-icon><Document /></el-icon>
+          </div>
+          <div class="stat-info">
+            <div class="stat-label">最近3个月加盟</div>
+            <div class="stat-value">8</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 图表和公告区域 -->
+      <div class="chart-section">
+        <div class="chart-container">
+          <div class="chart-title">近3个月加盟量趋势</div>
+          <v-chart :style="{ height: '300px' }" class="chart" :option="chartOption" />
+        </div>
+        <div class="notice-section">
+          <div class="notice-item">
+            <div class="notice-title">公告（企业端）</div>
+            <div
+              v-if="!announcementEditing"
+              class="notice-content"
+              @dblclick="handleAnnouncementEdit"
+            >
+              {{ announcement || '暂无公告内容，双击编辑' }}
+            </div>
+            <el-input
+              v-else
+              v-model="announcement"
+              placeholder="请输入公告内容"
+              type="textarea"
+              :rows="3"
+              class="notice-input"
+              @blur="handleAnnouncementSave"
+              @keyup.enter.ctrl="handleAnnouncementSave"
+              ref="announcementInputRef"
+            />
+          </div>
+          <div class="notice-item">
+            <div class="notice-title">备忘录</div>
+            <div v-if="!memoEditing" class="notice-content" @dblclick="handleMemoEdit">
+              {{ memo || '暂无备忘录内容，双击编辑' }}
+            </div>
+            <el-input
+              v-else
+              v-model="memo"
+              placeholder="请输入备忘录内容"
+              type="textarea"
+              :rows="3"
+              class="notice-input"
+              @blur="handleMemoSave"
+              @keyup.enter.ctrl="handleMemoSave"
+              ref="memoInputRef"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { LineChart } from 'echarts/charts'
+import {
+  GridComponent,
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent,
+} from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import { House, User, Star, Document } from '@element-plus/icons-vue'
+
+use([GridComponent, TitleComponent, LegendComponent, TooltipComponent, LineChart, CanvasRenderer])
+
+const announcement = ref('这是一条企业端公告示例内容')
+const memo = ref('这是一条备忘录示例内容')
+
+// 编辑状态
+const announcementEditing = ref(false)
+const memoEditing = ref(false)
+
+// 输入框引用
+const announcementInputRef = ref(null)
+const memoInputRef = ref(null)
+
+// 模拟管理员权限检查
+const isAdmin = ref(true) // 实际项目中应该从用户状态或权限系统获取
+
+// 公告编辑处理
+const handleAnnouncementEdit = () => {
+  if (!isAdmin.value) {
+    ElMessage.warning('您没有编辑权限')
+    return
+  }
+  announcementEditing.value = true
+  nextTick(() => {
+    announcementInputRef.value?.focus()
+  })
+}
+
+const handleAnnouncementSave = () => {
+  announcementEditing.value = false
+  // 这里可以添加保存到后端的逻辑
+  ElMessage.success('公告保存成功')
+}
+
+// 备忘录编辑处理
+const handleMemoEdit = () => {
+  if (!isAdmin.value) {
+    ElMessage.warning('您没有编辑权限')
+    return
+  }
+  memoEditing.value = true
+  nextTick(() => {
+    memoInputRef.value?.focus()
+  })
+}
+
+const handleMemoSave = () => {
+  memoEditing.value = false
+  // 这里可以添加保存到后端的逻辑
+  ElMessage.success('备忘录保存成功')
+}
+
+// 图表数据
+const chartData = [
+  { name: '07-01', value: 12 },
+  { name: '07-02', value: 48 },
+  { name: '07-03', value: 46 },
+  { name: '07-04', value: 28 },
+  { name: '07-05', value: 42 },
+  { name: '07-06', value: 43 },
+  { name: '07-07', value: 27 },
+]
+
+const chartOption = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'axis',
+      //   formatter: '{b}: {c}件',
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: chartData.map((item) => item.name),
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f0f0f0',
+        },
+      },
+    },
+    series: [
+      {
+        data: chartData.map((item) => item.value),
+        type: 'line',
+        name: '加盟量',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: {
+          color: '#409EFF',
+          width: 2,
+        },
+        itemStyle: {
+          color: '#409EFF',
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(64, 158, 255, 0.3)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(64, 158, 255, 0.1)',
+              },
+            ],
+          },
+        },
+      },
+    ],
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.workbench-page {
+  padding: 20px;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+
+.content {
+  .stats-cards {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    margin-bottom: 30px;
+
+    .stat-card {
+      background: white;
+      border-radius: 8px;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+      .stat-icon {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 15px;
+
+        .el-icon {
+          font-size: 24px;
+          color: white;
+        }
+
+        &.blue {
+          background: #409eff;
+        }
+
+        &.purple {
+          background: #9c27b0;
+        }
+
+        &.orange {
+          background: #ff9800;
+        }
+
+        &.green {
+          background: #4caf50;
+        }
+      }
+
+      .stat-info {
+        .stat-label {
+          font-size: 14px;
+          color: #666;
+          margin-bottom: 5px;
+        }
+
+        .stat-value {
+          font-size: 28px;
+          font-weight: 700;
+          color: #333;
+        }
+      }
+    }
+  }
+
+  .chart-section {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 20px;
+
+    .chart-container {
+      background: white;
+      border-radius: 8px;
+      padding: 20px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+      .chart-title {
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 20px;
+        color: #333;
+      }
+
+      .chart {
+        width: 100%;
+        height: 300px;
+      }
+    }
+
+    .notice-section {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+
+      .notice-item {
+        background: white;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+        .notice-title {
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 15px;
+          color: #333;
+        }
+
+        .notice-content {
+          min-height: 80px;
+          padding: 10px;
+          border: 1px solid #e4e7ed;
+          border-radius: 4px;
+          background-color: #fafafa;
+          color: #666;
+          line-height: 1.5;
+          cursor: pointer;
+          transition: all 0.3s ease;
+
+          &:hover {
+            border-color: #409eff;
+            background-color: #f0f8ff;
+          }
+
+          &:empty::before {
+            content: attr(placeholder);
+            color: #c0c4cc;
+          }
+        }
+
+        .notice-input {
+          :deep(.el-textarea__inner) {
+            border: 1px solid #e4e7ed;
+            border-radius: 4px;
+            resize: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .content {
+    .stats-cards {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .chart-section {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .content {
+    .stats-cards {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+</style>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,75 @@
+import pathNode from 'node:path'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import path from 'path'
+import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+import Inspect from 'vite-plugin-inspect'
+const pathSrc = path.resolve(__dirname, 'src')
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+    AutoImport({
+      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
+      imports: ['vue', 'vue-router'],
+      resolvers: [
+        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
+        ElementPlusResolver(),
+        // Auto import icon components
+        // 自动导入图标组件
+        IconsResolver({
+          prefix: 'Icon',
+        }),
+      ],
+      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
+    }),
+    Components({
+      resolvers: [
+        // Auto register icon components
+        // 自动注册图标组件
+        IconsResolver({
+          enabledCollections: ['ep'],
+        }),
+        ElementPlusResolver(),
+      ],
+      dts: path.resolve(pathSrc, 'components.d.ts'),
+    }),
+    Icons({
+      autoInstall: true,
+    }),
+    Inspect(),
+  ],
+  resolve: {
+    alias: {
+      // 设置别名
+      '@': pathNode.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 8090,
+    host: true,
+    open: true,
+    proxy: {
+      // https://cn.vitejs.dev/config/#server-proxy
+      '/jsonrpc': {
+        target: 'http://10.21.77.100:5000',
+        changeOrigin: true,
+      },
+      '/dataset': {
+        target: 'http://10.21.77.100:5000',
+        changeOrigin: true,
+      },
+      '/formulaCalculation': {
+        target: 'http://10.21.77.100:5000',
+        changeOrigin: true,
+      },
+    },
+  },
+})