111

暂存更改
小小美化
2026-06-22 23:06:04 +08:00 · 2026-06-22 22:18:08 +08:00 · 2026-06-15 23:24:41 +08:00 · 2026-06-15 23:20:21 +08:00
34 changed files with 3756 additions and 3069 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,24 +1,24 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,3 +1,3 @@
-{
-  "recommendations": ["Vue.volar"]
-}
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
-# Vue 3 + Vite
-
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
--- a/index.html
+++ b/index.html
@@ -1,13 +1,13 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link href="/favicon.svg" rel="icon" type="image/svg+xml" />
-    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-    <title>backmanagerweb</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script src="/src/main.js" type="module"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link href="./public/mixue.png" rel="icon" type="image/png" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>蜜雪冰城管理系统</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/src/main.js" type="module"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,23 +1,22 @@
-{
-  "name": "backmanagerweb",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@element-plus/icons-vue": "^2.3.2",
-    "element-china-area-data": "^6.1.0",
-    "element-plus": "^2.14.1",
-    "pinia": "^3.0.4",
-    "vue": "^3.5.34",
-    "vue-router": "4"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.6",
-    "vite": "^8.0.12"
-  }
-}
+{
+  "name": "backmanagerweb",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
+    "element-china-area-data": "^5.0.2",
+    "element-plus": "^2.14.1",
+    "vue": "^3.5.34",
+    "vue-router": "4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.6",
+    "vite": "^8.0.12"
+  }
+}
--- a/public/icons.svg
+++ b/public/icons.svg
@@ -1,24 +1,24 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-  <symbol id="bluesky-icon" viewBox="0 0 16 17">
-    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
-    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
-  </symbol>
-  <symbol id="discord-icon" viewBox="0 0 20 19">
-    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
-  </symbol>
-  <symbol id="documentation-icon" viewBox="0 0 21 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
-  </symbol>
-  <symbol id="github-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
-  </symbol>
-  <symbol id="social-icon" viewBox="0 0 20 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
-  </symbol>
-  <symbol id="x-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
-  </symbol>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/public/logo.png
+++ b/public/logo.png
--- a/public/登陆界面背景.mp4
+++ b/public/登陆界面背景.mp4
--- a/public/蜜雪冰城-雪王百科.mp4
+++ b/public/蜜雪冰城-雪王百科.mp4
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,3 @@
-<template>
-  <router-view />
-</template>
+<template>
+  <router-view />
+</template>
--- a/src/api/contract.js
+++ b/src/api/contract.js
@@ -0,0 +1,41 @@
+import axios from 'axios'
+import { mockContractAPI } from './mock/contract'
+
+// 开关：true 用 mock，false 用真实接口
+const USE_MOCK = true
+
+// axios 实例
+const request = axios.create({
+  baseURL: '/api',
+  timeout: 5000
+})
+
+// 获取合同列表
+export const getContractList = (params) => {
+  if (USE_MOCK) return mockContractAPI.getList(params)
+  return request.get('/contracts', { params }).then(r => r.data)
+}
+
+// 获取合同详情
+export const getContractDetail = (id) => {
+  if (USE_MOCK) return mockContractAPI.getDetail(id)
+  return request.get(`/contracts/${id}`).then(r => r.data)
+}
+
+// 新增合同
+export const createContract = (data) => {
+  if (USE_MOCK) return mockContractAPI.create(data)
+  return request.post('/contracts', data).then(r => r.data)
+}
+
+// 更新合同
+export const updateContract = (id, data) => {
+  if (USE_MOCK) return mockContractAPI.update(id, data)
+  return request.put(`/contracts/${id}`, data).then(r => r.data)
+}
+
+// 删除合同
+export const deleteContractAPI = (id) => {
+  if (USE_MOCK) return mockContractAPI.delete(id)
+  return request.delete(`/contracts/${id}`).then(r => r.data)
+}
--- a/src/api/customer.js
+++ b/src/api/customer.js
@@ -0,0 +1,41 @@
+import axios from 'axios'
+import { mockCustomerAPI } from './mock/customer'
+
+// 开关：true 用 mock，false 用真实接口
+const USE_MOCK = true
+
+// axios 实例
+const request = axios.create({
+  baseURL: '/api',
+  timeout: 5000
+})
+
+// 获取客户列表
+export const getCustomerList = (params) => {
+  if (USE_MOCK) return mockCustomerAPI.getList(params)
+  return request.get('/customers', { params }).then(r => r.data)
+}
+
+// 获取客户详情
+export const getCustomerDetail = (id) => {
+  if (USE_MOCK) return mockCustomerAPI.getDetail(id)
+  return request.get(`/customers/${id}`).then(r => r.data)
+}
+
+// 新增客户
+export const createCustomer = (data) => {
+  if (USE_MOCK) return mockCustomerAPI.create(data)
+  return request.post('/customers', data).then(r => r.data)
+}
+
+// 更新客户
+export const updateCustomer = (id, data) => {
+  if (USE_MOCK) return mockCustomerAPI.update(id, data)
+  return request.put(`/customers/${id}`, data).then(r => r.data)
+}
+
+// 删除客户
+export const deleteCustomerAPI = (id) => {
+  if (USE_MOCK) return mockCustomerAPI.delete(id)
+  return request.delete(`/customers/${id}`).then(r => r.data)
+}
--- a/src/api/mock/contract.js
+++ b/src/api/mock/contract.js
@@ -0,0 +1,151 @@
+// 模拟合同数据
+const mockContracts = [
+  {
+    id: 1,
+    contract_no: 'HT-2025-001',
+    contract_name: '蜜雪冰城加盟合同',
+    type: '加盟合同',
+    party_a: '蜜雪冰城股份有限公司',
+    party_b: '张三',
+    sign_date: '2025-01-15',
+    start_date: '2025-02-01',
+    end_date: '2028-01-31',
+    amount: 300000,
+    status: '生效中',
+    remark: '三年期加盟合同',
+    create_time: '2025-01-15 10:30:00'
+  },
+  {
+    id: 2,
+    contract_no: 'HT-2025-002',
+    contract_name: '原材料供货合同',
+    type: '供货合同',
+    party_a: '蜜雪冰城股份有限公司',
+    party_b: '李四',
+    sign_date: '2025-03-10',
+    start_date: '2025-04-01',
+    end_date: '2026-03-31',
+    amount: 50000,
+    status: '生效中',
+    remark: '年度供货协议',
+    create_time: '2025-03-10 09:15:00'
+  },
+  {
+    id: 3,
+    contract_no: 'HT-2024-010',
+    contract_name: '门店租赁合同',
+    type: '租赁合同',
+    party_a: '蜜雪冰城股份有限公司',
+    party_b: '王五',
+    sign_date: '2024-06-20',
+    start_date: '2024-07-01',
+    end_date: '2025-06-30',
+    amount: 120000,
+    status: '已到期',
+    remark: '已续签',
+    create_time: '2024-06-20 14:20:00'
+  },
+  {
+    id: 4,
+    contract_no: 'HT-2025-003',
+    contract_name: '设备维护服务合同',
+    type: '服务合同',
+    party_a: '蜜雪冰城股份有限公司',
+    party_b: '赵六',
+    sign_date: '2025-05-01',
+    start_date: '2025-05-15',
+    end_date: '2026-05-14',
+    amount: 15000,
+    status: '待审批',
+    remark: '',
+    create_time: '2025-05-01 11:00:00'
+  }
+]
+
+// 模拟网络延迟
+const delay = (ms = 300) => new Promise(r => setTimeout(r, ms))
+
+// Mock API
+export const mockContractAPI = {
+  // 获取列表
+  async getList(params = {}) {
+    await delay()
+    let result = [...mockContracts]
+
+    // 关键词搜索
+    if (params.keyword) {
+      const keyword = params.keyword.toLowerCase()
+      result = result.filter(item =>
+        item.contract_no.toLowerCase().includes(keyword) ||
+        item.contract_name.toLowerCase().includes(keyword) ||
+        item.party_b.toLowerCase().includes(keyword)
+      )
+    }
+
+    // 合同类型筛选
+    if (params.type) {
+      result = result.filter(item => item.type === params.type)
+    }
+
+    // 日期范围筛选（按签订日期）
+    if (params.startDate && params.endDate) {
+      const start = new Date(params.startDate)
+      const end = new Date(params.endDate)
+      result = result.filter(item => {
+        const signDate = new Date(item.sign_date)
+        return signDate >= start && signDate <= end
+      })
+    }
+
+    // 状态筛选
+    if (params.status) {
+      result = result.filter(item => item.status === params.status)
+    }
+
+    return { code: 200, data: result, total: result.length }
+  },
+
+  // 获取详情
+  async getDetail(id) {
+    await delay()
+    const contract = mockContracts.find(item => item.id === id)
+    if (contract) {
+      return { code: 200, data: contract }
+    }
+    return { code: 404, message: '合同不存在' }
+  },
+
+  // 新增
+  async create(data) {
+    await delay()
+    const newContract = {
+      id: Date.now(),
+      ...data,
+      create_time: new Date().toISOString().replace('T', ' ').slice(0, 19)
+    }
+    mockContracts.push(newContract)
+    return { code: 200, data: newContract, message: '新增成功' }
+  },
+
+  // 更新
+  async update(id, data) {
+    await delay()
+    const index = mockContracts.findIndex(item => item.id === id)
+    if (index !== -1) {
+      mockContracts[index] = { ...mockContracts[index], ...data }
+      return { code: 200, data: mockContracts[index], message: '更新成功' }
+    }
+    return { code: 404, message: '合同不存在' }
+  },
+
+  // 删除
+  async delete(id) {
+    await delay()
+    const index = mockContracts.findIndex(item => item.id === id)
+    if (index !== -1) {
+      mockContracts.splice(index, 1)
+      return { code: 200, message: '删除成功' }
+    }
+    return { code: 404, message: '合同不存在' }
+  }
+}
--- a/src/api/mock/customer.js
+++ b/src/api/mock/customer.js
@@ -0,0 +1,144 @@
+// 模拟客户数据
+const mockCustomers = [
+  {
+    id: 1,
+    name: '张三',
+    phone: '13800138001',
+    province: '广东省',
+    city: '深圳市',
+    district: '南山区',
+    address: '科技园路1号',
+    email: 'zhangsan@example.com',
+    customer_type: 'VIP',
+    create_time: '2025-01-15 10:30:00'
+  },
+  {
+    id: 2,
+    name: '李四',
+    phone: '13800138002',
+    province: '浙江省',
+    city: '杭州市',
+    district: '西湖区',
+    address: '文三路100号',
+    email: 'lisi@example.com',
+    customer_type: 'Normal',
+    create_time: '2025-02-20 14:20:00'
+  },
+  {
+    id: 3,
+    name: '王五',
+    phone: '13800138003',
+    province: '四川省',
+    city: '成都市',
+    district: '武侯区',
+    address: '天府大道200号',
+    email: 'wangwu@example.com',
+    customer_type: 'VIP',
+    create_time: '2025-03-10 09:15:00'
+  },
+  {
+    id: 4,
+    name: '赵六',
+    phone: '13800138004',
+    province: '湖南省',
+    city: '长沙市',
+    district: '岳麓区',
+    address: '麓山南路100号',
+    email: 'zhaoliu@example.com',
+    customer_type: 'Normal',
+    create_time: '2025-04-05 16:45:00'
+  }
+]
+
+// 模拟网络延迟
+const delay = (ms = 300) => new Promise(r => setTimeout(r, ms))
+
+// Mock API
+export const mockCustomerAPI = {
+  // 获取列表
+  async getList(params = {}) {
+    await delay()
+    let result = [...mockCustomers]
+
+    // 关键词搜索
+    if (params.keyword) {
+      const keyword = params.keyword.toLowerCase()
+      const searchField = params.searchField || '1'
+
+      if (searchField === '2') {
+        // 编号：精确匹配
+        result = result.filter(item => String(item.id) === keyword)
+      } else if (searchField === '1') {
+        // 姓名：模糊匹配
+        result = result.filter(item => item.name.includes(keyword))
+      } else if (searchField === '3') {
+        // 电话：模糊匹配
+        result = result.filter(item => item.phone.includes(keyword))
+      } else if (searchField === '4') {
+        // 邮箱：模糊匹配
+        result = result.filter(item => item.email.includes(keyword))
+      } else {
+        // 默认：模糊匹配所有字段
+        result = result.filter(item =>
+          String(item.id).includes(keyword) ||
+          item.name.includes(keyword) ||
+          item.phone.includes(keyword) ||
+          item.email.includes(keyword)
+        )
+      }
+    }
+
+    // 客户类型筛选
+    if (params.customer_type) {
+      result = result.filter(item => item.customer_type === params.customer_type)
+    }
+
+    return { code: 200, data: result, total: result.length }
+  },
+
+  // 获取详情
+  async getDetail(id) {
+    await delay()
+    const customer = mockCustomers.find(item => item.id === id)
+    if (customer) {
+      return { code: 200, data: customer }
+    }
+    return { code: 404, message: '客户不存在' }
+  },
+
+  // 新增
+  async create(data) {
+    await delay()
+    // 生成自增 ID
+    const maxId = mockCustomers.length > 0 ? Math.max(...mockCustomers.map(item => item.id)) : 0
+    const newCustomer = {
+      id: maxId + 1,
+      ...data,
+      create_time: new Date().toISOString().replace('T', ' ').slice(0, 19)
+    }
+    mockCustomers.push(newCustomer)
+    return { code: 200, data: newCustomer, message: '新增成功' }
+  },
+
+  // 更新
+  async update(id, data) {
+    await delay()
+    const index = mockCustomers.findIndex(item => item.id === id)
+    if (index !== -1) {
+      mockCustomers[index] = { ...mockCustomers[index], ...data }
+      return { code: 200, data: mockCustomers[index], message: '更新成功' }
+    }
+    return { code: 404, message: '客户不存在' }
+  },
+
+  // 删除
+  async delete(id) {
+    await delay()
+    const index = mockCustomers.findIndex(item => item.id === id)
+    if (index !== -1) {
+      mockCustomers.splice(index, 1)
+      return { code: 200, message: '删除成功' }
+    }
+    return { code: 404, message: '客户不存在' }
+  }
+}
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -1,46 +0,0 @@
-import axios from 'axios'
-import {ElMessage} from 'element-plus'
-import {useUserStore} from '@/stores/user'
-import router from '@/router'
-
-const request = axios.create({
-    baseURL: '/api',
-    timeout: 10000,
-})
-
-// 请求拦截：自动带 token
-request.interceptors.request.use(
-    (config) => {
-        const userStore = useUserStore()
-        if (userStore.token){
-            config.headers.Authorization = `Bearer ${userStore.token}`
-        }
-        return config
-    },
-    (err) => Promise.reject(err)
-)
-
-// 响应拦截：统一处理 { code, data, message } + 401 跳登录
-request.interceptors.response.use(
-    (res) => {
-        const body = res.data
-        if (typeof body?.code === 'undefined') return res.data
-        if (body.code === 0) return body.data
-        ElMessage.error(body.message || '请求失败')
-        return Promise.reject(new Error(body.message || '请求失败'))
-    },
-    (err) => {
-        const status = err.response?.status
-        if (status === 401) {
-            const userStore = useUserStore()
-            userStore.logout()
-            ElMessage.error('登录已过期，请重新登录')
-            router.push('/login')
-        }else {
-            ElMessage.error(err.response?.data?.message || err.message || '网络异常')
-        }
-        return Promise.reject(err)
-    }
-)
-
-export default request
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,5 +0,0 @@
-import request from './request'
-
-export const login = (data) => request.post('/user/login', data)
-export const getUserInfo = () => request.get('/user/info')
-export const logout = () => request.post('/user/logout')
--- a/src/assets/vite.svg
+++ b/src/assets/vite.svg
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@@ -1,2 +1,2 @@
-<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07"
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07"
     height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,143 +1,209 @@
-<template>
-  <div class="login-container">
-    <el-card class="login-card" shadow="always">
-      <template #header>
-        <div class="card-header">
-          <h2>欢迎登录</h2>
-          <p class="subtitle">请输入您的账号信息</p>
-        </div>
-      </template>
-
-      <el-form
-        ref="loginFormRef"
-        :model="loginForm"
-        :rules="rules"
-        label-position="top"
-        @keyup.enter="handleLogin"
-      >
-        <el-form-item label="用户名" prop="username">
-          <el-input
-            v-model="loginForm.username"
-            :prefix-icon="User"
-            clearable
-            placeholder="请输入用户名"
-          />
-        </el-form-item>
-
-        <el-form-item label="密码" prop="password">
-          <el-input
-            v-model="loginForm.password"
-            :prefix-icon="Lock"
-            clearable
-            placeholder="请输入密码"
-            show-password
-            type="password"
-          />
-        </el-form-item>
-
-        <el-form-item>
-          <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
-        </el-form-item>
-
-        <el-form-item class="login-form-button">
-          <el-button
-            :loading="loading"
-            class="login-btn"
-            type="primary"
-            @click="handleLogin"
-          >
-            登 录
-          </el-button>
-        </el-form-item>
-
-      </el-form>
-
-    </el-card>
-  </div>
-</template>
-
-<script setup>
-import {reactive, ref} from 'vue'
-import {ElMessage} from 'element-plus'
-import {Lock, User} from '@element-plus/icons-vue'
-import {useRouter} from 'vue-router'
-import {useUserStore} from "@/stores/user.js";
-
-const router = useRouter()
-const userStore = useUserStore()
-
-const loginFormRef = ref(null)
-const loading = ref(false)
-
-const loginForm = reactive({
-  username: '',
-  password: '',
-  remember: false,
-})
-
-const rules = {
-  username: [
-    { required: true, message: '请输入用户名', trigger: 'blur' },
-  ],
-  password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-  ],
-}
-
-const handleLogin = async () => {
-  if (!loginFormRef.value) return
-  try {
-    await loginFormRef.value.validate()
-    loading.value = true
-    await userStore.login({
-      username: loginForm.username,
-      password: loginForm.password,
-    })
-    ElMessage.success('登录成功')
-    router.push('/panel')
-  } catch(e) {
-    // 校验失败，element-plus 会自动显示红色提示
-    console.warn('login failed',e?.message)
-  } finally {
-    loading.value = false
-  }
-}
-</script>
-
-<style scoped>
-.login-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  padding: 20px;
-}
-
-.login-card {
-  width: 420px;
-  border-radius: 12px;
-  border: none;
-}
-
-.card-header {
-  text-align: center;
-}
-
-.card-header h2 {
-  margin: 0 0 8px;
-  color: #303133;
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 14px;
-  color: #909399;
-}
-
-.login-btn {
-  display: block;
-  margin: 0 auto;
-  text-align: center;
-  width: 75%;
-}
-</style>
+<template>
+  <div class="login-container">
+    <!-- 背景视频 -->
+    <video src="../../public/登陆界面背景.mp4" autoplay muted loop class="bg-video"></video>
+    <div class="video-overlay"></div>
+
+    <!-- 登录卡片 -->
+    <el-card class="login-card" shadow="always">
+      <template #header>
+        <div class="card-header">
+          <img src="../../public/logo.png" alt="logo" class="login-logo">
+          <h2>蜜雪冰城管理系统</h2>
+          <p class="subtitle">请输入您的账号信息</p>
+        </div>
+      </template>
+
+      <el-form
+        ref="loginFormRef"
+        :model="loginForm"
+        :rules="rules"
+        label-position="top"
+        @keyup.enter="handleLogin"
+      >
+        <el-form-item label="用户名" prop="username">
+          <el-input
+            v-model="loginForm.username"
+            :prefix-icon="User"
+            clearable
+            placeholder="请输入用户名"
+          />
+        </el-form-item>
+
+        <el-form-item label="密码" prop="password">
+          <el-input
+            v-model="loginForm.password"
+            :prefix-icon="Lock"
+            clearable
+            placeholder="请输入密码"
+            show-password
+            type="password"
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
+        </el-form-item>
+
+        <el-form-item class="login-form-button">
+          <el-button
+            :loading="loading"
+            class="login-btn"
+            type="primary"
+            @click="handleLogin"
+          >
+            登 录
+          </el-button>
+        </el-form-item>
+
+      </el-form>
+
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import {reactive, ref} from 'vue'
+import {ElMessage} from 'element-plus'
+import {Lock, User} from '@element-plus/icons-vue'
+import {useRouter} from 'vue-router'
+
+const router = useRouter()
+
+const loginFormRef = ref(null)
+const loading = ref(false)
+
+const loginForm = reactive({
+  username: '',
+  password: '',
+  remember: false,
+})
+
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+  ],
+}
+
+const handleLogin = async () => {
+  if (!loginFormRef.value) return
+  try {
+    await loginFormRef.value.validate()
+    loading.value = true
+    await new Promise((r) => setTimeout(r, 800))
+    ElMessage.success('登录成功（模拟）')
+    router.push('/panel')
+  } catch {
+    // 校验失败，element-plus 会自动显示红色提示
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  min-height: 100vh;
+  padding: 20px 60px 20px 20px;
+  overflow: hidden;
+}
+
+/* 背景视频 */
+.bg-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}
+
+.video-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 1;
+}
+
+/* 登录卡片 */
+.login-card {
+  position: relative;
+  z-index: 2;
+  width: 420px;
+  border-radius: 16px;
+  border: none;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+}
+
+.login-card :deep(.el-card__header) {
+  border-bottom: 2px solid #E60012;
+  padding: 20px;
+}
+
+.login-logo {
+  display: block;
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 12px;
+  object-fit: contain;
+}
+
+.card-header {
+  text-align: center;
+}
+
+.card-header h2 {
+  margin: 0 0 8px;
+  color: #E60012;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 14px;
+  color: #909399;
+}
+
+/* 输入框聚焦时红色边框 */
+.login-card :deep(.el-input__wrapper:focus-within) {
+  box-shadow: 0 0 0 1px #E60012 inset;
+}
+
+/* 登录按钮 */
+.login-btn {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+  width: 75%;
+  background: #E60012;
+  border-color: #E60012;
+}
+
+.login-btn:hover {
+  background: #d50010;
+  border-color: #d50010;
+}
+
+/* 记住我复选框 */
+.login-card :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+  background-color: #E60012;
+  border-color: #E60012;
+}
+
+.login-card :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
+  color: #E60012;
+}
+</style>
--- a/src/components/contract.vue
+++ b/src/components/contract.vue
@@ -0,0 +1,492 @@
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search } from '@element-plus/icons-vue'
+import {
+  getContractList,
+  createContract,
+  updateContract,
+  deleteContractAPI
+} from '../api/contract'
+
+const search = ref('')
+const select = ref('1')
+const dateRange = ref([])
+const loading = ref(false)
+const searchResults = ref([])
+const showSearchResults = ref(false)
+const showAddForm = ref(false)
+const isEditMode = ref(false)
+const currentContractId = ref(null)
+const showDetailDialog = ref(false)
+const currentDetail = ref(null)
+
+const form = reactive({
+  contract_no: '',
+  contract_name: '',
+  customer_id: '',
+  contract_content: '',
+  employee_id: '',
+  effective_date: '',
+  expiry_date: '',
+  amount: 0,
+  status: '待审批',
+  remark: ''
+})
+
+onMounted(() => {
+  fetchData()
+})
+
+// 获取合同列表
+const fetchData = async () => {
+  loading.value = true
+  const res = await getContractList()
+  searchResults.value = res.data
+  showSearchResults.value = true
+  loading.value = false
+}
+
+// 处理搜索
+const handleSearch = async () => {
+  // 如果在表单页面，先关闭表单
+  if (showAddForm.value) {
+    cancelAdd()
+  }
+
+  loading.value = true
+
+  let keyword = search.value
+  if (select.value === '1' && keyword && !keyword.startsWith('HT')) {
+    keyword = 'HT' + keyword
+  }
+
+  const params = {
+    keyword,
+    searchField: select.value,
+    startDate: dateRange.value?.[0],
+    endDate: dateRange.value?.[1]
+  }
+
+  const res = await getContractList(params)
+  searchResults.value = res.data
+  showSearchResults.value = true
+  loading.value = false
+}
+
+// 日期变更处理
+const handleDateChange = () => {
+  handleSearch()
+}
+
+// 重置搜索
+const resetSearch = () => {
+  search.value = ''
+  select.value = '1'
+  dateRange.value = []
+  fetchData()
+}
+
+// 新增合同
+const addContract = () => {
+  resetForm()
+  showAddForm.value = true
+  showSearchResults.value = false
+}
+
+// 编辑合同
+const editContract = (row) => {
+  isEditMode.value = true
+  currentContractId.value = row.id
+  Object.assign(form, {
+    contract_no: row.contract_no,
+    contract_name: row.contract_name,
+    customer_id: row.customer_id,
+    contract_content: row.contract_content,
+    employee_id: row.employee_id,
+    effective_date: row.effective_date,
+    expiry_date: row.expiry_date,
+    amount: row.amount,
+    status: row.status,
+    remark: row.remark
+  })
+  showAddForm.value = true
+  showSearchResults.value = false
+}
+
+// 保存合同
+const saveContract = async () => {
+  if (isEditMode.value) {
+    await updateContract(currentContractId.value, { ...form })
+    ElMessage.success('更新成功')
+  } else {
+    await createContract({ ...form })
+    ElMessage.success('新增成功')
+  }
+  cancelAdd()
+  fetchData()
+}
+
+// 删除合同
+const deleteContract = (id) => {
+  ElMessageBox.confirm('确定删除该合同吗？', '提示', {
+    type: 'warning'
+  }).then(async () => {
+    await deleteContractAPI(id)
+    ElMessage.success('删除成功')
+    fetchData()
+  })
+}
+
+// 取消
+const cancelAdd = () => {
+  resetForm()
+  showAddForm.value = false
+  showSearchResults.value = true
+}
+
+// 重置表单
+const resetForm = () => {
+  Object.assign(form, {
+    contract_no: '',
+    contract_name: '',
+    customer_id: '',
+    contract_content: '',
+    employee_id: '',
+    effective_date: '',
+    expiry_date: '',
+    amount: 0,
+    status: '待审批',
+    remark: ''
+  })
+  isEditMode.value = false
+  currentContractId.value = null
+}
+
+// 双击查看详情
+const showDetail = (row) => {
+  currentDetail.value = row
+  showDetailDialog.value = true
+}
+
+// 关闭详情弹窗
+const closeDetail = () => {
+  showDetailDialog.value = false
+  currentDetail.value = null
+}
+
+// 状态样式
+const getStatusType = (status) => {
+  const map = {
+    '生效中': 'success',
+    '已到期': 'danger',
+    '待审批': 'warning',
+    '已终止': 'info'
+  }
+  return map[status] || 'info'
+}
+
+// 日期快捷选项
+const dateShortcuts = [
+  {
+    text: '最近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 7 * 24 * 3600 * 1000)
+      return [start, end]
+    }
+  },
+  {
+    text: '最近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 30 * 24 * 3600 * 1000)
+      return [start, end]
+    }
+  },
+  {
+    text: '最近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 90 * 24 * 3600 * 1000)
+      return [start, end]
+    }
+  }
+]
+
+// 格式化日期
+const formatDate = (date) => {
+  if (!date) return ''
+  return date
+}
+</script>
+
+<template>
+  <div class="contract-container">
+    <!-- 搜索栏区域 -->
+    <div class="contract-search">
+      <!-- 第一行：搜索框 + 按钮 -->
+      <div class="search-row">
+        <el-input v-model="search" style="max-width: 500px" placeholder="请输入搜索关键词"
+            class="contract-search-with-select" @keyup.enter="handleSearch">
+            <template #prepend>
+                <el-select v-model="select" placeholder="请选择" style="width: 115px">
+                    <el-option label="编号" value="1" />
+                    <el-option label="名称" value="2" />
+                </el-select>
+            </template>
+            <template #append>
+                <el-button :icon="Search" @click="handleSearch" />
+            </template>
+        </el-input>
+
+        <div class="search-buttons">
+          <el-button type="success" @click="addContract">新增合同</el-button>
+          <el-button type="default" @click="resetSearch">重置</el-button>
+        </div>
+      </div>
+
+      <!-- 第二行：筛选条件 -->
+      <div class="filter-row">
+        <span class="filter-label">筛选条件：</span>
+
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="生效日期"
+          end-placeholder="到期日期"
+          style="margin-left: 10px;"
+          @change="handleDateChange"
+        />
+      </div>
+    </div>
+
+    <!-- 合同列表 -->
+    <div v-if="showSearchResults" class="contract-list">
+      <div v-if="loading" class="loading-container">
+        <el-skeleton :rows="5" animated />
+      </div>
+
+      <div v-else-if="searchResults.length === 0" class="empty-container">
+        <el-empty description="暂无合同数据" />
+      </div>
+
+      <div v-else>
+        <div class="list-header">
+          <span class="total-count">共找到 {{ searchResults.length }} 条合同</span>
+        </div>
+
+        <el-table :data="searchResults" border style="width: 100%" @row-dblclick="showDetail" row-class-name="clickable-row">
+          <el-table-column prop="id" label="ID" width="60" />
+          <el-table-column prop="contract_no" label="合同编号" width="130" />
+          <el-table-column prop="contract_name" label="合同名称" min-width="180" />
+          <el-table-column prop="customer_id" label="客户ID" width="80" />
+          <el-table-column prop="employee_id" label="业务员ID" width="90" />
+          <el-table-column prop="amount" label="金额" width="110">
+            <template #default="{ row }">
+              ¥{{ row.amount?.toLocaleString() }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="状态" width="80">
+            <template #default="{ row }">
+              <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="effective_date" label="生效日期" width="110" />
+          <el-table-column prop="expiry_date" label="到期日期" width="110" />
+          <el-table-column label="操作" width="140" fixed="right">
+            <template #default="{ row }">
+              <el-button link type="primary" @click="editContract(row)">编辑</el-button>
+              <el-button link type="danger" @click="deleteContract(row.id)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <!-- 新增/编辑表单 -->
+    <div v-if="showAddForm" class="contract-form" style="margin-top: 20px;">
+      <el-divider content-position="left">{{ isEditMode ? '编辑合同' : '新增合同' }}</el-divider>
+      <el-form :model="form" label-width="auto" style="max-width: 700px;" label-position="top">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="合同编号">
+              <el-input v-model="form.contract_no" placeholder="如: HT-001" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="合同名称">
+              <el-input v-model="form.contract_name" placeholder="请输入合同名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="客户ID">
+              <el-input v-model="form.customer_id"  style="width: 100%;" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="业务员ID">
+              <el-input v-model="form.employee_id"  style="width: 100%;" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="生效日期">
+              <el-date-picker v-model="form.effective_date" type="date" style="width: 100%;" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="到期日期">
+              <el-date-picker v-model="form.expiry_date" type="date" style="width: 100%;" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="合同金额">
+              <el-input-number v-model="form.amount" :min="0" :step="1000" style="width: 100%;" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态">
+              <el-select v-model="form.status" style="width: 100%;">
+                <el-option label="待审批" value="待审批" />
+                <el-option label="生效中" value="生效中" />
+                <el-option label="已到期" value="已到期" />
+                <el-option label="已终止" value="已终止" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item label="合同内容/条款">
+          <el-input v-model="form.contract_content" type="textarea" :rows="4" placeholder="请输入合同内容" />
+        </el-form-item>
+
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" :rows="2" />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="saveContract">保存</el-button>
+          <el-button @click="cancelAdd">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 合同详情弹窗 -->
+    <el-dialog v-model="showDetailDialog" title="合同详情" width="650px" @close="closeDetail">
+      <div v-if="currentDetail" class="detail-content">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="合同编号">{{ currentDetail.contract_no }}</el-descriptions-item>
+          <el-descriptions-item label="合同名称" :span="2">{{ currentDetail.contract_name }}</el-descriptions-item>
+          <el-descriptions-item label="客户ID">{{ currentDetail.customer_id }}</el-descriptions-item>
+          <el-descriptions-item label="业务员ID">{{ currentDetail.employee_id }}</el-descriptions-item>
+          <el-descriptions-item label="合同金额" :span="2">
+            <span class="amount-text">¥{{ currentDetail.amount?.toLocaleString() }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="getStatusType(currentDetail.status)">{{ currentDetail.status }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="生效日期">{{ currentDetail.effective_date }}</el-descriptions-item>
+          <el-descriptions-item label="到期日期" :span="2">{{ currentDetail.expiry_date }}</el-descriptions-item>
+          <el-descriptions-item label="合同内容" :span="2">
+            <div class="content-text">{{ currentDetail.contract_content || '无' }}</div>
+          </el-descriptions-item>
+          <el-descriptions-item label="备注" :span="2">
+            {{ currentDetail.remark || '无' }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <template #footer>
+        <el-button @click="closeDetail">关闭</el-button>
+        <el-button type="primary" @click="closeDetail(); editContract(currentDetail)">编辑</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.contract-container {
+  padding: 20px;
+}
+
+.contract-search {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.search-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.search-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+}
+
+.filter-label {
+  color: #606266;
+  font-size: 14px;
+  margin-right: 10px;
+}
+
+.list-header {
+  margin-bottom: 15px;
+}
+
+.total-count {
+  color: #909399;
+  font-size: 14px;
+}
+
+.loading-container, .empty-container {
+  padding: 40px 0;
+}
+
+.clickable-row {
+  cursor: pointer;
+}
+
+.detail-content {
+  padding: 10px 0;
+}
+
+.amount-text {
+  font-weight: 600;
+  color: #e6a23c;
+  font-size: 16px;
+}
+
+.content-text {
+  white-space: pre-wrap;
+  line-height: 1.6;
+  max-height: 120px;
+  overflow-y: auto;
+}
+</style>
--- a/src/components/customer.vue
+++ b/src/components/customer.vue
@@ -0,0 +1,261 @@
+<script setup>
+
+import { Search } from '@element-plus/icons-vue'
+import { ref, onMounted, reactive } from 'vue'
+import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
+import { ElMessage } from 'element-plus'
+import {
+    getCustomerList,
+    createCustomer,
+    updateCustomer,
+    deleteCustomerAPI
+} from '../api/customer'
+
+const form = reactive({
+    id: '',
+    name: '',           // 姓名，默认为空字符串
+    phone: '',          // 电话，默认为空字符串
+    region: [],         // 地区，默认为空数组（省市区三级代码）
+    address: '',        // 详细地址，默认为空字符串
+    email: '',          // 电子邮箱，默认为空字符串
+    customer_type: 'Normal'  // 客户类型，默认选中"普通客户"
+})
+
+const search = ref('')
+const select = ref('1')
+const searchResults = ref([])
+const showSearchResults = ref(false) //是否显示搜索结果
+const showAddForm = ref(false) //是否显示新增表单
+const isEditMode = ref(false)   //是否为编辑模式
+const currentCustomerId = ref(null)  //当前编辑的客户的ID
+const loading = ref(false)
+
+onMounted(() => {
+    fetchData()
+})
+
+//获取用户列表
+const fetchData = async () => {
+    loading.value = true;
+    const res = await getCustomerList()
+    searchResults.value = res.data
+    showSearchResults.value = true
+    loading.value = false
+}
+
+//搜索
+const handleSearch = async () => {
+    loading.value = true
+    const res = await getCustomerList({ keyword: search.value, searchField: select.value })
+    searchResults.value = res.data
+    showSearchResults.value = true
+    loading.value = false
+}
+
+// 清空表单
+const resetForm = () => {
+    form.id = ''
+    form.name = ''
+    form.phone = ''
+    form.region = []
+    form.address = ''
+    form.email = ''
+    form.customer_type = 'Normal'
+    isEditMode.value = false
+    currentCustomerId.value = null
+}
+
+// 显示新增表单
+const addCustomer = () => {
+    resetForm()
+    showAddForm.value = true
+    showSearchResults.value = false
+}
+
+//编辑
+const editCustomer = (row) => {
+    isEditMode.value = true
+    currentCustomerId.value = row.id
+    form.name = row.name
+    form.phone = row.phone
+    // 名称转回代码，让级联选择器显示
+    form.region = [
+        TextToCode[row.province]?.code || '',
+        TextToCode[row.province]?.[row.city]?.code || '',
+        TextToCode[row.province]?.[row.city]?.[row.district]?.code || ''
+    ]
+    form.address = row.address
+    form.email = row.email
+    form.customer_type = row.customer_type
+    showAddForm.value = true
+    showSearchResults.value = false
+}
+
+const saveCustomer = async () => {
+    const formData = {
+        name: form.name,
+        phone: form.phone,
+        province: CodeToText[form.region[0]] || '',
+        city: CodeToText[form.region[1]] || '',
+        district: CodeToText[form.region[2]] || '',
+        address: form.address,
+        email: form.email,
+        customer_type: form.customer_type
+    }
+    if (isEditMode.value) {
+        await updateCustomer(currentCustomerId.value, formData)
+        ElMessage.success('更新成功')
+    } else {
+        await createCustomer(formData)
+        ElMessage.success('新增成功')
+    }
+
+    cancelAdd()
+    fetchData()
+}
+
+// 删除
+const deleteCustomer = async (id) => {
+    ElMessageBox.confirm('确定删除该客户吗？', '提示', {
+        type: 'warning'
+    }).then(async () => {
+        await deleteCustomerAPI(id)
+        ElMessage.success('删除成功')
+        fetchData()
+    })
+}
+
+// 取消
+const cancelAdd = () => {
+    resetForm()
+    showAddForm.value = false
+    showSearchResults.value = true
+}
+
+// 清空搜索
+const clearSearch = () => {
+    search.value = ''
+    showSearchResults.value = false
+    showAddForm.value = false
+    fetchData()
+}
+
+</script>
+
+<template>
+    <div class="customer-container">
+        <!-- 搜索栏区域 -->
+        <div class="customer-search">
+            <el-input v-model="search" style="max-width: 600px" placeholder="Please input"
+                class="customer-search-with-select" @keyup.enter="handleSearch">
+                <template #prepend>
+                    <el-select v-model="select" placeholder="Select" style="width: 115px">
+                        <el-option label="姓名" value="1" />
+                        <el-option label="编号" value="2" />
+                        <el-option label="电话" value="3" />
+                        <el-option label="邮箱" value="4" />
+                    </el-select>
+                </template>
+                <template #append>
+                    <el-button :icon="Search" @click="handleSearch" />
+                </template>
+            </el-input>
+
+            <el-button type="default" @click="clearSearch" style="margin-left:20px">
+                重置
+            </el-button>
+            <el-button color="#E60012" @click="addCustomer" style="margin-left: 20px">
+                新增客户
+            </el-button>
+
+        </div>
+
+        <div v-if="showSearchResults" class="customer-list">
+             <div v-if="loading" class="loading-container">
+                <el-skeleton :rows="5" animated />
+            </div>
+
+            <div v-else-if="searchResults.length === 0" class="empty-container">
+                <el-empty description="暂无数据" />
+            </div>
+
+
+            <div v-else class="customer-table">
+                <el-table :data="searchResults" v-loading="loading" border style="width: 100%">
+                    <el-table-column prop="id" label="编号" width="80" />
+                    <el-table-column prop="name" label="姓名" width="120" />
+                    <el-table-column prop="phone" label="电话" width="150" />
+                    <el-table-column label="地区" width="200">
+                        <template #default="{ row }">
+                            {{ [row.province, row.city, row.district].filter(Boolean).join(' ') }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="address" label="详细地址" width="200" />
+                    <el-table-column prop="email" label="电子邮箱" width="200" />
+                    <el-table-column prop="remark" label="备注" width=""200 />
+                    <el-table-column prop="customer_type" label="代理商类型" width="120">
+                        <template #default="{ row }">
+                            <el-tag :type="row.customer_type === 'VIP' ? 'danger' : 'info'">
+                                {{ row.customer_type === 'VIP' ? '地区总代理' : '加盟商' }}
+                            </el-tag>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="150" fixed="right">
+                        <template #default="{ row }">
+                            <el-button link type="primary" @click="editCustomer(row)">编辑</el-button>
+                            <el-button link type="danger" @click="deleteCustomer(row.id)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+
+                <div style="margin-top: 10px; color: #909399; font-size: 14px;">
+                    找到 {{ searchResults.length }} 条结果
+                    <el-button link type="primary" @click="clearSearch">清空搜索</el-button>
+                </div>
+            </div>
+        </div>
+       
+
+        <!-- 新增客户表单 -->
+        <div v-if="showAddForm" class="customer-info-label">
+            <el-divider content-position="left">{{ isEditMode ? '编辑客户信息' : '新增客户' }}</el-divider>
+            <el-form :model="form" label-width="auto" style="max-width: 600px" label-position="top">
+                <el-form-item label="姓名">
+                    <el-input v-model="form.name" placeholder="请输入姓名" />
+                </el-form-item>
+
+                <el-form-item label="电话">
+                    <el-input v-model="form.phone" :controls="false" :min="0" :max="99999999999" :precision="0"
+                        placeholder="请输入11位手机号" style="width: 100%" />
+                </el-form-item>
+
+                <el-form-item label="地区">
+                    <el-cascader v-model="form.region" :options="regionData" :props="{ expandTrigger: 'hover' }"
+                        placeholder="请选择省/市/区" clearable style="width: 100%" />
+                </el-form-item>
+
+                <el-form-item label="详细地址">
+                    <el-input v-model="form.address" placeholder=" 请输入详细地址" />
+                </el-form-item>
+
+                <el-form-item label="电子邮箱">
+                    <el-input v-model="form.email" placeholder=" 请输入邮箱地址" />
+                </el-form-item>
+
+                <el-form-item label="代理商类型">
+                    <el-radio-group v-model="form.customer_type">
+                        <el-radio value="VIP">地区总代理</el-radio>
+                        <el-radio value="Normal">加盟商</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="saveCustomer">保存</el-button>
+                    <el-button type="danger" @click="cancelAdd">取消</el-button>
+                </el-form-item>
+            </el-form>
+
+        </div>
+    </div>
+</template>
+
+<style scoped></style>
--- a/src/components/employee.vue
+++ b/src/components/employee.vue
@@ -1,11 +1,11 @@
-<script setup>
-
-</script>
-
-<template>
-<h1>hello ,im 3</h1>
-</template>
-
-<style scoped>
-
+<script setup>
+
+</script>
+
+<template>
+<h1>hello ,im 3</h1>
+</template>
+
+<style scoped>
+
 </style>
--- a/src/components/home.vue
+++ b/src/components/home.vue
@@ -1,194 +1,234 @@
-<template>
-  <div class="home-container">
-    <div class="banner">
-      <video src="../../public/蜜雪冰城-雪王百科.mp4" autoplay muted loop></video>
-    </div>
-  </div>
-
-  <div class="home-body">
-    <div class="first-head">雪王简介</div>
-    <div class="intro-content">
-      <div class="pic">
-        <img src="../../public/mixue.png" alt="雪王">
-      </div>
-      <div class="txt">
-        <div class="second-head">
-          "我是手拿冰淇凌权杖的雪王"
-          <br>
-          "一生只爱冰淇凌与茶"
-        </div>
-        <ul class="xuewang-list">
-          <li v-for="(item, index) in snowKingInfo" :key="index">
-            <span class="label">{{ item.label }}</span>
-            <span class="divider"></span>
-            <span class="value">{{ item.value }}</span>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const snowKingInfo = ref([
-  { label: '生日', value: '11月22日' },
-  { label: '性格', value: '正直、友善、热情、进取' },
-  { label: '职位', value: '蜜雪冰城首席品控官兼全球品牌代言人' },
-  { label: '口头禅', value: '你爱我，我爱你，蜜雪冰城甜蜜蜜' },
-  { label: '爱好', value: '唱歌跳舞，研究冰淇淋与茶的新奇吃法' }
-])
-</script>
-
-<style scoped>
-.home-container {
-  padding: 0;
-  text-align: center;
-}
-
-.banner {
-  width: 100%;
-  height: 90vh;
-  min-height: 500px;
-}
-
-.banner video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.home-body {
-  padding: 100px 80px;
-  background: linear-gradient(180deg, #FEF7F7 0%, rgba(254, 247, 247, 0.00) 64.96%);
-}
-
-.first-head {
-  text-align: center;
-  font-size: 58px;
-  font-weight: 700;
-  color: #2E2F30;
-  margin-bottom: 68px;
-  line-height: 1.17;
-}
-
-.intro-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.pic {
-  width: 750px;
-  height: 660px;
-  border-radius: 30px;
-  overflow: hidden;
-}
-
-.pic img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.5s;
-}
-
-.pic:hover img {
-  transform: scale(1.05);
-}
-
-.txt {
-  width: 676px;
-}
-
-.second-head {
-  font-size: 46px;
-  font-weight: 700;
-  color: #E60012;
-  line-height: 1.33;
-  margin-bottom: 67px;
-}
-
-.xuewang-list {
-  list-style: none;
-  padding: 0;
-}
-
-.xuewang-list li {
-  display: flex;
-  align-items: center;
-  margin-bottom: 18px;
-  color: #666;
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 1.5;
-}
-
-.xuewang-list li:last-child {
-  margin-bottom: 0;
-}
-
-.xuewang-list .label {
-  color: #2E2F30;
-  font-weight: 700;
-  min-width: 80px;
-}
-
-.xuewang-list .divider {
-  width: 1px;
-  height: 18px;
-  background-color: #999;
-  margin: 0 15px;
-}
-
-.xuewang-list .value {
-  display: flex;
-  align-items: center;
-}
-
-/* 响应式适配 */
-@media (max-width: 1200px) {
-  .intro-content {
-    flex-direction: column;
-  }
-
-  .pic {
-    width: 100%;
-    height: auto;
-    aspect-ratio: 750/660;
-  }
-
-  .txt {
-    width: 100%;
-    margin-top: 48px;
-  }
-}
-
-@media (max-width: 768px) {
-  .home-body {
-    padding: 50px 20px;
-  }
-
-  .first-head {
-    font-size: 36px;
-    margin-bottom: 40px;
-  }
-
-  .second-head {
-    font-size: 28px;
-    margin-bottom: 40px;
-  }
-
-  .xuewang-list li {
-    font-size: 18px;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .xuewang-list .divider {
-    display: none;
-  }
-}
-</style>
+<template>
+  <div class="home-container">
+    <!-- 顶部视频横幅 -->
+    <div class="video-banner">
+      <video src="../../public/首页顶图.mp4" autoplay muted loop class="bg-video"></video>
+      <div class="video-overlay">
+        <h2 class="banner-title">欢迎使用蜜雪冰城管理系统</h2>
+      </div>
+    </div>
+
+    <!-- 雪王简介 -->
+    <div class="intro-section">
+      <div class="section-header">
+        <div class="header-line"></div>
+        <h2 class="section-title">雪王简介</h2>
+        <div class="header-line"></div>
+      </div>
+
+      <div class="intro-content">
+        <div class="pic-wrapper">
+          <img src="../../public/mixue.png" alt="雪王" class="xuewang-img">
+        </div>
+        <div class="txt-wrapper">
+          <div class="quote">
+            "我是手拿冰淇凌权杖的雪王"
+            <br>
+            "一生只爱冰淇凌与茶"
+          </div>
+          <ul class="info-list">
+            <li v-for="(item, index) in snowKingInfo" :key="index">
+              <span class="info-label">{{ item.label }}</span>
+              <span class="info-divider"></span>
+              <span class="info-value">{{ item.value }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const snowKingInfo = ref([
+  { label: '生日', value: '11月22日' },
+  { label: '性格', value: '正直、友善、热情、进取' },
+  { label: '职位', value: '蜜雪冰城首席品控官兼全球品牌代言人' },
+  { label: '口头禅', value: '你爱我，我爱你，蜜雪冰城甜蜜蜜' },
+  { label: '爱好', value: '唱歌跳舞，研究冰淇淋与茶的新奇吃法' }
+])
+</script>
+
+<style scoped>
+.home-container {
+  min-height: 100%;
+}
+
+/* ========== 视频横幅 ========== */
+.video-banner {
+  position: relative;
+  width: calc(100% + 40px);
+  margin: -20px -20px 0 -20px;
+  height: 300px;
+  overflow: hidden;
+}
+
+.bg-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.video-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    to bottom,
+    rgba(230, 0, 18, 0.3) 0%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.banner-title {
+  color: #fff;
+  font-size: 32px;
+  font-weight: 600;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  margin: 0;
+}
+
+/* ========== 简介区域 ========== */
+.intro-section {
+  padding: 40px 20px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.header-line {
+  flex: 1;
+  max-width: 200px;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #E60012, transparent);
+}
+
+.section-title {
+  font-size: 32px;
+  font-weight: 700;
+  color: #E60012;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.intro-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 60px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* 雪王图片 */
+.pic-wrapper {
+  flex-shrink: 0;
+  width: 400px;
+  height: 400px;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 8px 30px rgba(230, 0, 18, 0.15);
+  transition: transform 0.3s;
+}
+
+.pic-wrapper:hover {
+  transform: translateY(-5px);
+}
+
+.xuewang-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 文字内容 */
+.txt-wrapper {
+  flex: 1;
+  max-width: 500px;
+}
+
+.quote {
+  font-size: 28px;
+  font-weight: 700;
+  color: #E60012;
+  line-height: 1.5;
+  margin-bottom: 40px;
+  padding-left: 20px;
+  border-left: 4px solid #E60012;
+}
+
+.info-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.info-list li {
+  display: flex;
+  align-items: center;
+  padding: 14px 0;
+  border-bottom: 1px dashed #eee;
+  font-size: 16px;
+}
+
+.info-list li:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-weight: 600;
+  color: #303133;
+  min-width: 70px;
+}
+
+.info-divider {
+  width: 1px;
+  height: 16px;
+  background: #E60012;
+  margin: 0 16px;
+}
+
+.info-value {
+  color: #606266;
+  flex: 1;
+}
+
+/* ========== 响应式适配 ========== */
+@media (max-width: 900px) {
+  .intro-content {
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  .pic-wrapper {
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+    aspect-ratio: 1;
+  }
+
+  .txt-wrapper {
+    width: 100%;
+  }
+
+  .banner-title {
+    font-size: 24px;
+  }
+
+  .video-banner {
+    height: 200px;
+  }
+}
+</style>
--- a/src/components/page1.vue
+++ b/src/components/page1.vue
@@ -1,148 +0,0 @@
-<script setup>
-
-import { Search } from '@element-plus/icons-vue'
-import { ref,reactive } from 'vue'
-import { regionData } from 'element-china-area-data'
-import { ElMessage } from 'element-plus'
-
-const form = reactive({
-  name: '',           // 姓名，默认为空字符串
-  phone: '',          // 电话，默认为空字符串
-  region: [],         // 地区，默认为空数组（省市区三级代码）
-  address: '',        // 详细地址，默认为空字符串
-  email: '',          // 电子邮箱，默认为空字符串
-  customer_type: 'Normal'  // 客户类型，默认选中"普通客户"
-})
-
-const search = ref('')
-const select = ref('1')
-
-const searchResults=ref([])
-
-const showSearchResults=ref(false) //是否显示搜索结果
-const showAddForm=ref(false) //是否显示新增表单
-const isEditMode = ref(false)   //是否为编辑模式
-const currentCustomerId = ref(null)  //当前编辑的客户的ID
-
-// 清空表单
-const resetForm = () => {
-  form.name = ''
-  form.phone = ''
-  form.region = []
-  form.address = ''
-  form.email = ''
-  form.customer_type = 'Normal'
-  isEditMode.value = false
-  currentCustomerId.value = null
-}
-
-// 显示新增表单
-const addCustomer = () => {
-  resetForm()
-  showAddForm.value = true
-  showSearchResults.value = false
-}
-
-// 清空搜索
-const clearSearch = () => {
-  search.value = ''
-  showSearchResults.value = false
-  showAddForm.value = false
-}
-
-</script>
-
-<template>
-      <div class="customer-container">
-        <!-- 搜索栏区域 -->
-        <div class="customer-search">
-            <el-input v-model="search" style="max-width: 600px" placeholder="Please input"
-                class="customer-search-with-select">
-                <template #prepend>
-                    <el-select v-model="select" placeholder="Select" style="width: 115px">
-                        <el-option label="姓名" value="1" />
-                        <el-option label="电话" value="2" />
-                        <el-option label="邮箱" value="3" />
-                    </el-select>
-                </template>
-                <template #append>
-                    <el-button :icon="Search" />
-                </template>
-            </el-input>
-
-            <el-button type="primary" @click="addCustomer" style="margin-left: 20px">
-                新增用户
-            </el-button>
-        </div>
-
-        <div v-if="showSearchResults" class="customer-table">
-           <el-table :data="searchResults" border style="width: 100%">
-                <el-table-column prop="name" label="姓名" width="120" />
-                <el-table-column prop="phone" label="电话" width="150" />
-                <el-table-column prop="regionText" label="地区" width="200" />
-                <el-table-column prop="address" label="详细地址" width="200" />
-                <el-table-column prop="email" label="电子邮箱" width="200" />
-                <el-table-column prop="customer_type" label="代理商类型" width="120">
-                    <template #default="{ row }">
-                        <el-tag :type="row.customer_type === 'VIP' ? 'danger' : 'info'">
-                            {{ row.customer_type === 'VIP' ? '地区总代理' : '普通代理' }}
-                        </el-tag>
-                    </template>
-                </el-table-column>
-                <el-table-column label="操作" width="150" fixed="right">
-                    <template #default="{ row }">
-                        <el-button link type="primary" @click="editCustomer(row)">编辑</el-button>
-                        <el-button link type="danger" @click="deleteCustomer(row.id)">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-           <div style="margin-top: 10px; color: #909399; font-size: 14px;">
-                找到 {{ searchResults.length }} 条结果
-                <el-button link type="primary" @click="clearSearch">清空搜索</el-button>
-            </div>
-        </div>
-
-        <!-- 新增客户表单 -->
-        <div v-if="showAddForm" class="customer-info-label">
-            <el-form :model="form" label-width="auto" style="max-width: 600px" label-position="top">
-                <el-form-item label="姓名">
-                    <el-input v-model="form.name" placeholder="请输入姓名" />
-                </el-form-item>
-
-                <el-form-item label="电话">
-                    <el-input v-model="form.phone" :controls="false" :min="0" :max="99999999999" :precision="0"
-                        placeholder="请输入11位手机号" style="width: 100%" />
-                </el-form-item>
-
-                <el-form-item label="地区">
-                    <el-cascader v-model="form.region" :options="regionData" :props="{ expandTrigger: 'hover' }"
-                        placeholder="请选择省/市/区" clearable style="width: 100%" />
-                </el-form-item>
-
-                <el-form-item label="详细地址">
-                    <el-input v-model="form.address" placeholder=" 请输入详细地址" />
-                </el-form-item>
-
-                <el-form-item label="电子邮箱">
-                    <el-input v-model="form.email" placeholder=" 请输入邮箱地址" />
-                </el-form-item>
-
-                <el-form-item label="代理商类型">
-                    <el-radio-group v-model="form.customer_type">
-                        <el-radio value="VIP">地区总代理</el-radio>
-                        <el-radio value="Normal">普通代理</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="saveCustomer">保存</el-button>
-                    <el-button type="danger" @click="cancelAdd">取消</el-button>
-                </el-form-item>
-            </el-form>
-
-        </div>
-    </div>
-</template>
-
-<style scoped>
-
-</style>
--- a/src/components/panel.vue
+++ b/src/components/panel.vue
@@ -1,129 +1,226 @@
-<script setup>
-import {ref} from 'vue'
-import {useRoute} from 'vue-router'
-
-const route = useRoute()
-
-const isCollapse = ref(false)
-const switchFold = () => {
-  isCollapse.value = !isCollapse.value
-}
-
-
-</script>
-
-<template>
-  <el-container style="height: 100vh">
-    <el-header style="display: flex; align-items: center;">
-      <el-menu
-        :ellipsis="false"
-        mode="horizontal"
-        router
-        style="flex: 1;"
-      >
-        <!-- 左侧 -->
-        <el-menu-item index="">
-          <h1 style="margin: 0;">信息管理系统</h1>
-        </el-menu-item>
-
-        <!-- 右侧：margin-left: auto 把它推到底部 -->
-        <el-menu-item index="/login" style="margin-left: auto">
-          <el-icon><SwitchButton/></el-icon>
-          <template #title>LogOut</template>
-        </el-menu-item>
-      </el-menu>
-    </el-header>
-
-    <el-container>
-      <el-aside style="display: flex; flex-direction: column" width="200px">
-        <el-menu
-          :collapse="isCollapse"
-          :default-active="route.path"
-          router
-          style="flex: 1; display: flex; flex-direction: column"
-        >
-          <!-- <el-sub-menu index="1">
-            <template #title>
-              <el-icon><IconMenu/></el-icon>
-              <span>一号栏</span>
-            </template>
-          </el-sub-menu> -->
-
-           <el-menu-item index="/panel/home">
-              <el-icon><House /></el-icon>
-              <template #title>首页</template>
-            </el-menu-item>
-
-          <el-menu-item index="/panel/page1">
-              <el-icon><Avatar /></el-icon>
-              <template #title>客户管理</template>
-            </el-menu-item>
-
-          <el-menu-item index="/panel/page2">
-            <el-icon><Document /></el-icon>
-            <template #title>合同管理</template>
-          </el-menu-item>
-          <el-menu-item index="/panel/page3">
-            <el-icon><Service /></el-icon>
-            <template #title>售后管理</template>
-          </el-menu-item>
-          <el-menu-item index="/panel/page3">
-            <el-icon><IceTea /></el-icon>
-            <template #title>产品管理</template>
-          </el-menu-item>
-          <el-menu-item index="/panel/page3">
-            <el-icon><User /></el-icon>
-            <template #title>员工管理</template>
-          </el-menu-item>
-
-          <!-- ⭐ 关键：margin-top: auto 把它推到最底部 -->
-          <el-menu-item style="margin-top: auto" @click="switchFold">
-            <el-icon :class="{'rotate-180-animation':!isCollapse,'rotate-180-animation-reverse':isCollapse}" ><ArrowLeft /></el-icon>
-            <template #title>收缩</template>
-          </el-menu-item>
-        </el-menu>
-      </el-aside>
-
-      <el-main>
-        <!-- ⭐ 这个 router-view 渲染嵌套的子路由（page1/page2/page3） -->
-        <router-view />
-      </el-main>
-    </el-container>
-  </el-container>
-</template>
-
-<style scoped>
-
-.rotate-180-animation {
-  /* 修改为你想要的动画：旋转180度，执行一次，持续0.5秒 */
-  animation: rotate-180 0.3s ease-in-out;
-  animation-fill-mode:forwards;
-}
-
-.rotate-180-animation-reverse {
-  /* 修改为你想要的动画：旋转180度，执行一次，持续0.5秒 */
-  animation: rotate-180-reverse 0.3s ease-in-out;
-  animation-fill-mode:forwards;
-}
-
-@keyframes rotate-180 {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(180deg);
-  }
-}
-
-@keyframes rotate-180-reverse {
-  from {
-    transform: rotate(180deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}
-
-
-</style>
-
+<script setup>
+import {ref} from 'vue'
+import {useRoute} from 'vue-router'
+
+const route = useRoute()
+
+const isCollapse = ref(false)
+const switchFold = () => {
+  isCollapse.value = !isCollapse.value
+}
+</script>
+
+<template>
+  <el-container style="height: 100vh">
+    <!-- 顶部导航栏 -->
+    <el-header class="app-header">
+      <el-menu
+        :ellipsis="false"
+        mode="horizontal"
+        router
+        class="header-menu"
+      >
+        <!-- 左侧 Logo -->
+        <el-menu-item index="" class="logo-item">
+          <img src="../../public/logo.png" alt="logo" class="logo-img">
+          <h1 class="logo-title">蜜雪冰城管理系统</h1>
+        </el-menu-item>
+
+        <!-- 右侧退出 -->
+        <el-menu-item index="/login" class="logout-item">
+          <el-icon><SwitchButton/></el-icon>
+          <template #title>退出登录</template>
+        </el-menu-item>
+      </el-menu>
+    </el-header>
+
+    <el-container>
+      <!-- 侧边栏 -->
+      <el-aside class="app-aside" :width="isCollapse ? '64px' : '200px'">
+        <el-menu
+          :collapse="isCollapse"
+          :default-active="route.path"
+          router
+          class="aside-menu"
+        >
+          <el-menu-item index="/panel/home">
+            <el-icon><House /></el-icon>
+            <template #title>首页</template>
+          </el-menu-item>
+
+          <el-menu-item index="/panel/customer">
+            <el-icon><Avatar /></el-icon>
+            <template #title>客户管理</template>
+          </el-menu-item>
+
+          <el-menu-item index="/panel/contract">
+            <el-icon><Document /></el-icon>
+            <template #title>合同管理</template>
+          </el-menu-item>
+
+          <el-menu-item index="/panel/service">
+            <el-icon><Service /></el-icon>
+            <template #title>售后管理</template>
+          </el-menu-item>
+
+          <el-menu-item index="/panel/products">
+            <el-icon><IceTea /></el-icon>
+            <template #title>产品管理</template>
+          </el-menu-item>
+
+          <el-menu-item index="/panel/employee">
+            <el-icon><User /></el-icon>
+            <template #title>员工管理</template>
+          </el-menu-item>
+
+            <el-menu-item index="/panel/user">
+            <el-icon><User /></el-icon>
+            <template #title>用户管理</template>
+          </el-menu-item>
+
+          <!-- 底部收缩按钮 -->
+          <el-menu-item index="" class="collapse-btn" @click="switchFold">
+            <el-icon :class="{'rotate-180-animation':!isCollapse,'rotate-180-animation-reverse':isCollapse}">
+              <ArrowLeft />
+            </el-icon>
+            <template #title>收缩</template>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+
+      <!-- 主内容区 -->
+      <el-main class="app-main">
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<style scoped>
+/* ========== 顶部导航栏 ========== */
+.app-header {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border-bottom: 2px solid #E60012;
+  padding: 0;
+  height: 60px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.header-menu {
+  flex: 1;
+  border-bottom: none !important;
+}
+
+.logo-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: none !important;
+}
+
+.logo-item.is-active {
+  border-bottom: none !important;
+}
+
+.logo-item.is-active::after {
+  display: none !important;
+}
+
+.logo-img {
+  width: 36px;
+  height: 36px;
+  object-fit: contain;
+}
+
+.logo-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #E60012;
+  white-space: nowrap;
+}
+
+.logout-item {
+  margin-left: auto !important;
+  color: #909399;
+}
+
+.logout-item:hover {
+  color: #E60012 !important;
+}
+
+/* ========== 侧边栏 ========== */
+.app-aside {
+  transition: width 0.3s ease;
+  background: #fff;
+  border-right: 1px solid #eee;
+}
+
+.aside-menu {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-right: none;
+}
+
+.aside-menu:not(.el-menu--collapse) {
+  width: 200px;
+}
+
+/* 菜单项样式 */
+.aside-menu .el-menu-item {
+  height: 50px;
+  line-height: 50px;
+  margin: 4px 8px;
+  border-radius: 8px;
+  color: #606266;
+  transition: all 0.3s;
+}
+
+.aside-menu .el-menu-item:hover {
+  background: #FEF0F0;
+  color: #E60012;
+}
+
+.aside-menu .el-menu-item.is-active {
+  background: #E60012;
+  color: #fff;
+}
+
+.aside-menu .el-menu-item.is-active .el-icon {
+  color: #fff;
+}
+
+/* 底部收缩按钮 */
+.collapse-btn {
+  margin-top: auto !important;
+}
+
+/* ========== 主内容区 ========== */
+.app-main {
+  padding: 20px;
+  background: #f5f7fa;
+  overflow-y: auto;
+}
+
+/* ========== 收缩动画 ========== */
+.rotate-180-animation {
+  animation: rotate-180 0.3s ease-in-out forwards;
+}
+
+.rotate-180-animation-reverse {
+  animation: rotate-180-reverse 0.3s ease-in-out forwards;
+}
+
+@keyframes rotate-180 {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(180deg); }
+}
+
+@keyframes rotate-180-reverse {
+  from { transform: rotate(180deg); }
+  to { transform: rotate(0deg); }
+}
+</style>
--- a/src/components/products.vue
+++ b/src/components/products.vue
@@ -1,11 +1,11 @@
-<script setup>
-
-</script>
-
-<template>
-<h1>hello ,im 2</h1>
-</template>
-
-<style scoped>
-
+<script setup>
+
+</script>
+
+<template>
+<h1>hello ,im 3</h1>
+</template>
+
+<style scoped>
+
 </style>
--- a/src/components/service.vue
+++ b/src/components/service.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+<h1>hello ,im 3</h1>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/components/user.vue
+++ b/src/components/user.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+<h1>hello ,im 3</h1>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/main.js
+++ b/src/main.js
@@ -1,18 +1,17 @@
-import { createPinia } from 'pinia'
-import {createApp} from 'vue'
-import './style.css'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import App from './App.vue'
-import router from './router'
-
-const app = createApp(App)
-
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-
-app.use(ElementPlus)
-app.use(router)
-router.isReady().then(() => app.mount('#app'))
+import {createApp} from 'vue'
+import './style.css'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+app.use(ElementPlus)
+app.use(router)
+app.mount('#app')
--- a/src/router.js
+++ b/src/router.js
@@ -1,43 +1,35 @@
-import {createRouter, createWebHistory} from "vue-router";
-import Login from "./components/Login.vue";
-import Home from "./components/home.vue"
-import Panel from "./components/panel.vue";
-import Page1 from "./components/page1.vue";
-import Page2 from "./components/page2.vue";
-import Page3 from "./components/page3.vue";
-
-const routes = [
-    { path: "/", redirect: "/login" },
-    { path: "/login", component: Login },
-    {
-        path: "/panel",
-        component: Panel,
-        redirect: "/panel/home",
-        children: [
-            { path: "home", component:Home},
-            { path: "page1", component: Page1 },
-            { path: "page2", component: Page2 },
-            { path: "page3", component: Page3 },
-        ],
-    },
-]
-
-const router = createRouter({
-    history: createWebHistory(),
-    routes,
-})
-
-router.beforeEach((to, from, next) => {
-    const token = localStorage.getItem("bm_token");
-    if (to.meta['requiresAuth'] && !token) {
-        return next('/login');
-    }
-    if (to.path === "/login" && token) {
-        return next('/panel');
-    }
-    next()
-})
-
-
-
+import {createRouter, createWebHistory} from "vue-router";
+import Login from "./components/Login.vue";
+import Home from "./components/home.vue"
+import Panel from "./components/panel.vue";
+import Customer from "./components/customer.vue";
+import Contract from "./components/contract.vue";
+import Service from "./components/service.vue";
+import Products from "./components/products.vue";
+import Employee from "./components/employee.vue";
+import User from "./components/user.vue";
+
+const routes = [
+    { path: "/", redirect: "/login" },
+    { path: "/login", component: Login },
+    {
+        path: "/panel",
+        component: Panel,
+        redirect: "/panel/home",
+        children: [
+            { path: "home", component:Home},
+            { path: "customer", component: Customer },
+            { path: "contract", component: Contract },
+            { path: "service", component: Service },
+            { path: "products", component: Products  },
+            { path: "employee", component: Employee },
+            { path: "user", component: User }
+        ],
+    },
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+})
 export default router;
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -1,38 +0,0 @@
-import {defineStore} from "pinia";
-import {ref} from "vue";
-import {login as loginApi, getUserInfo, logout as logoutApi} from "@/api/user.js";
-
-const TOKEN_KEY = 'bm_token'
-
-export const useUserStore = defineStore('user', () => {
-    const token = ref(localStorage.getItem(TOKEN_KEY) || '')
-    const userInfo = ref({})
-
-    async function login(form) {
-        const data = await loginApi(form)
-        token.value = data.token
-        userInfo.value = data.user
-        localStorage.setItem(TOKEN_KEY, data.token)
-        return data
-    }
-
-    async function fetchUserInfo() {
-        const data = await getUserInfo()
-        userInfo.value = data
-        return data
-    }
-
-    async function logout() {
-        try {
-            await logoutApi()
-        } catch (_) {
-
-        }
-        token.value = ''
-        userInfo.value = {}
-        localStorage.removeItem(TOKEN_KEY)
-    }
-
-    return {token, userInfo, logout, login, fetchUserInfo}
-
-})
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,22 +1,7 @@
-import {defineConfig} from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { fileURLToPath, URL } from 'node:url'
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)), //代码里写 @/api/user 时，自动当成 ./src/api/user 来找文件
-    },
-  },
-  server: {
-    port: 5173,
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3000',
-        changeOrigin: true,
-      }
-    }
-  }
-})
+import {defineConfig} from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
ChoChoX	cc36e9fede	111	2026-06-22 23:06:04 +08:00
ChoChoX	5f67bf9122	暂存更改	2026-06-22 22:18:08 +08:00
ChoChoX	c0b84b9ea4	小小美化	2026-06-15 23:24:41 +08:00
ChoChoX	e5a0753e58	小小美化	2026-06-15 23:20:21 +08:00