From 4760bf3fd980f9c41a38b1453f94e8629fcee3bf Mon Sep 17 00:00:00 2001
From: gct <184852591@qq.com>
Date: Thu, 21 Nov 2024 18:38:14 +0800
Subject: [PATCH] version2

---
 README.md                             |   5 +-
 _1.gitignore                          |  24 --
 index_1.html                          |  13 -
 package.json                          |   2 +-
 public/logo.png                       | Bin 2316 -> 0 bytes
 src/assets/user.png                   | Bin 0 -> 2882 bytes
 src/components/HelloWorld.vue         |  43 ---
 src/main.js                           |   6 +-
 src/router.js                         | 161 ++++++++---
 src/store/index.js                    |  29 +-
 src/store/user.js                     |  26 ++
 src/stores/ageStore.js                |  19 --
 src/view/Login.vue                    | 255 ++++++++++++------
 src/view/Register.vue                 | 178 +++++++++++++
 src/view/Regiter.vue                  |  88 ------
 src/view/courier/DeliveryTracking.vue | 162 ++++++++++++
 src/view/courier/Feedback.vue         |  78 ++++++
 src/view/courier/Home.vue             | 111 ++++++++
 src/view/courier/Index.vue            | 183 +++++++++++++
 src/view/courier/OrderHistory.vue     | 283 ++++++++++++++++++++
 src/view/courier/OrderProcessing.vue  | 192 ++++++++++++++
 src/view/user/Address.vue             | 193 ++++++++++++++
 src/view/user/CourierComplaint.vue    | 105 ++++++++
 src/view/user/ExpressForm.vue         | 368 ++++++++++++++------------
 src/view/user/ExpressList.vue         | 153 -----------
 src/view/user/Home.vue                | 142 ++++++++++
 src/view/user/Index.vue               | 229 +++++++++-------
 src/view/user/MyInfo.vue              | 143 ----------
 src/view/user/OrderManagement.vue     | 240 +++++++++++++++++
 src/view/user/ShipmentQuery.vue       | 100 +++++++
 src/view/user/userProfile.vue         | 176 ++++++++++++
 yarn.lock                             |   4 +-
 32 files changed, 2826 insertions(+), 885 deletions(-)
 delete mode 100644 _1.gitignore
 delete mode 100644 index_1.html
 delete mode 100644 public/logo.png
 create mode 100644 src/assets/user.png
 delete mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/store/user.js
 delete mode 100644 src/stores/ageStore.js
 create mode 100644 src/view/Register.vue
 delete mode 100644 src/view/Regiter.vue
 create mode 100644 src/view/courier/DeliveryTracking.vue
 create mode 100644 src/view/courier/Feedback.vue
 create mode 100644 src/view/courier/Home.vue
 create mode 100644 src/view/courier/Index.vue
 create mode 100644 src/view/courier/OrderHistory.vue
 create mode 100644 src/view/courier/OrderProcessing.vue
 create mode 100644 src/view/user/Address.vue
 create mode 100644 src/view/user/CourierComplaint.vue
 delete mode 100644 src/view/user/ExpressList.vue
 create mode 100644 src/view/user/Home.vue
 delete mode 100644 src/view/user/MyInfo.vue
 create mode 100644 src/view/user/OrderManagement.vue
 create mode 100644 src/view/user/ShipmentQuery.vue
 create mode 100644 src/view/user/userProfile.vue

diff --git a/README.md b/README.md
index fe09ed1..1511959 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,5 @@
-# uml
+# 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).
diff --git a/_1.gitignore b/_1.gitignore
deleted file mode 100644
index a547bf3..0000000
--- a/_1.gitignore
+++ /dev/null
@@ -1,24 +0,0 @@
-# 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?
diff --git a/index_1.html b/index_1.html
deleted file mode 100644
index 8388c4b..0000000
--- a/index_1.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
diff --git a/package.json b/package.json
index 699536d..a48a135 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "axios": "1.2.1",
     "element-plus": "2.2.19",
     "pinia": "2.0.27",
-    "pinia-plugin-persist": "1.0.0",
+    "pinia-plugin-persist": "^1.0.0",
     "vant": "4.0.0",
     "vue": "^3.4.37",
     "vue-router": "4"
diff --git a/public/logo.png b/public/logo.png
deleted file mode 100644
index 20a2c5700aa2e82d8061b5749a72422ad9973004..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2316
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

diff --git a/src/assets/user.png b/src/assets/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..610886b98e27746c459ae67e82d5b95d4c19e01c
GIT binary patch
literal 2882
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

literal 0
HcmV?d00001

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 546ebbc..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/src/main.js b/src/main.js
index a8fb35a..8dd3a1f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,13 +2,15 @@ import { createApp } from 'vue'
 import './style.css'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-//import App from './view/Regiter.vue'
+//import App from './components/App.vue'
 import App from './App.vue'
 import router from './router'
-import { PiniaVuePlugin, createPinia } from 'pinia'
+import { PiniaVuePlugin,createPinia } from 'pinia'
+import piniaPluginPersist from 'pinia-plugin-persist'
 const app=createApp(App)
 app.use(ElementPlus)
 app.use(router)
 const pinia=createPinia()
+pinia.use(piniaPluginPersist)
 app.use(pinia)
 app.mount('#app')
diff --git a/src/router.js b/src/router.js
index 65ea83c..9e421c3 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,54 +1,133 @@
-import { createRouter,createWebHashHistory } from "vue-router";
+import { createRouter, createWebHashHistory } from "vue-router";
 import { userStore } from "./store";
 import { storeToRefs } from "pinia";
 
 const router = createRouter({
-	history:createWebHashHistory(),
-	routes:[{
-		path:'/',
-		redirect:'login'
-	},
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/',
+      redirect: 'login'
+    },
+    {
+      path: '/login',
+      name: 'Login',
+      component: () => import('./view/Login.vue'),
+      meta: { requiresAuth: false } // 不需要登录
+    },
+    {
+      path: '/register',
+      name: 'Register',
+      component: () => import('./view/Register.vue'),
+      meta: { requiresAuth: false } // 不需要登录
+    },
+    {
+      path: '/User',
+      name: 'User',
+      component: () => import("./view/user/Index.vue"),
+      redirect: "/User/Head",
+      children: [
+        {
+          path: 'Head',
+          name: 'Head',
+          component: () => import("./view/user/Home.vue"),
+          meta: { requiresAuth: true }
+        },
+        {
+          path: 'userProfile',
+          name: 'userProfile',
+          component: () => import("./view/user/userProfile.vue"),
+          meta: { requiresAuth: true }
+        },
+        {
+          path: 'OrderManagement',
+          name: 'OrderManagement',
+          component: () => import("./view/user/OrderManagement.vue"),
+          meta: { requiresAuth: true }
+        },
+        {
+          path: 'ExpressForm',
+          name: 'ExpressForm',
+          component: () => import("./view/user/ExpressForm.vue"),
+          meta: { requiresAuth: true }
+        },
+        {
+          path: 'Address',
+          name: 'Address',
+          component: () => import("./view/user/Address.vue"),
+          meta: { requiresAuth: true }
+        },
+		{
+		  path: 'ShipmentQuery',
+		  name: 'ShipmentQuery',
+		  component: () => import("./view/user/ShipmentQuery.vue"),
+		  meta: { requiresAuth: true }
+		},
+		{
+		  path: 'CourierComplaint',
+		  name: 'CourierComplaint',
+		  component: () => import("./view/user/CourierComplaint.vue"),
+		  meta: { requiresAuth: true }
+		},
+      ]
+    },
 	{
-		path:'/login',
-		name:'Login',
-		component:()=>import('./view/Login.vue')
-	},
-	{
-		path:'/User',
-		name:'User',
-		component:()=>import("./view/user/index.vue"),
-		redirect:"/User/myInfo",
-		children:[
+		path: '/Courier',
+		name: 'Courier',
+		component: () => import("./view/courier/index.vue"),
+		redirect: "/Courier/Home",
+		children: [
+			{
+			path: 'Home',
+			name: 'Home',
+			component: () => import("./view/courier/Home.vue"),
+			meta: { requiresAuth: true },
+			},
+			{
+			path: 'orderProcessing',
+			name: 'orderProcessing',
+			component: () => import("./view/courier/OrderProcessing.vue"),
+			meta: { requiresAuth: true },
+			},
 			{
-				path:'myInfo',
-				component:()=>import('./view/user/MyInfo.vue')
+			path: 'deliveryTracking',
+			name: 'deliveryTracking',
+			component: () => import("./view/courier/DeliveryTracking.vue"),
+			meta: { requiresAuth: true },
 			},
 			{
-				path:"expressList",
-				component:()=>import('./view/user/ExpressList.vue')
+			path: 'orderHistory',
+			name: 'orderHistory',
+			component: () => import("./view/courier/OrderHistory.vue"),
+			meta: { requiresAuth: true },
 			},
 			{
-				path:"expressForm",
-				component:()=>import('./view/user/ExpressForm.vue')
+			path: 'feedback',
+			name: 'feedback',
+			component: () => import("./view/courier/Feedback.vue"),
+			meta: { requiresAuth: true },
 			}
 		]
 	}
-	]
-})
-router.beforeEach((to,from,next)=>{
-	const store=userStore()
-	const {loginState}=storeToRefs(store)
-	console.log("路由守卫：",loginState.value)
-	if(to.name=="Login"){
-		next()
-	}else{
-		if(loginState.value){
-			next()
-		}else{
-			next({
-				name:"Login"
-			})
-		}
-	}
-})
-export default router
\ No newline at end of file
+  ]
+});
+
+router.beforeEach((to, from, next) => {
+  const store = userStore();
+  const { loginState } = storeToRefs(store);
+  console.log("路由守卫：", loginState.value);
+
+  // 如果路由的 meta.requiresAuth 为 false，直接允许访问
+  if (to.meta.requiresAuth === false) {
+    next();
+  } else {
+    // 否则检查登录状态
+    if (loginState.value) {
+      next();
+    } else {
+      next({ name: "Login" });
+    }
+  }
+});
+
+export default router;
diff --git a/src/store/index.js b/src/store/index.js
index 9c32866..10b8319 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,15 +1,26 @@
-import { defineStore } from "pinia";
+import {
+	defineStore
+} from "pinia";
 
-export const userStore = defineStore('storeId',{
-	state:()=>{
-		return{
-			loginState:false
+export const userStore = defineStore('storeId', {
+	state: () => {
+		return {
+			loginState: false
 		}
 	},
-	getters:{},
-	actions:{
-		setLoginState(state){
-			this.loginState=state
+	getters: {},
+	actions: {
+		setLoginState(state) {
+			this.loginState = state
 		}
+	},
+	persist: {
+		enabled: true, // 开启数据缓存
+		strategies: [{
+			key: 'storeId', // 当前store的id
+			storage: localStorage, // 存储方式
+			paths: ['loginState'] // 指定要持久化的字段
+		}]
 	}
+
 })
\ No newline at end of file
diff --git a/src/store/user.js b/src/store/user.js
new file mode 100644
index 0000000..2dbc061
--- /dev/null
+++ b/src/store/user.js
@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia';
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    username: '用户',
+    email: 'user@example.com',
+    gender: '',
+    birthdate: new Date(),
+    phone: '',
+    selectedRegion: [],
+  }),
+  actions: {
+    updateProfile(profile) {
+      this.username = profile.username;
+      this.email = profile.email;
+      this.gender = profile.gender;
+      this.birthdate = profile.birthdate;
+      this.phone = profile.phone;
+      this.selectedRegion = profile.selectedRegion;
+    },
+  },
+  persist: {
+    key: 'user-profile', // 存储的键名
+    storage: localStorage, // 使用 localStorage 持久化
+  },
+});
diff --git a/src/stores/ageStore.js b/src/stores/ageStore.js
deleted file mode 100644
index c3c2b2d..0000000
--- a/src/stores/ageStore.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// stores/ageStore.js
-import { defineStore } from 'pinia'
-
-export const useAgeStore = defineStore('ageStore', {
-  state: () => ({
-    age: 20  // 设置初始年龄为20
-  }),
-  actions: {
-    incrementAge() {
-      this.age++
-    }
-  },
-  persist: {
-    enabled: true,
-    strategies: [
-      { storage: localStorage, paths: ['age'] }  // 将age字段持久化到localStorage
-    ]
-  }
-})
diff --git a/src/view/Login.vue b/src/view/Login.vue
index 703b1e0..ba73efc 100644
--- a/src/view/Login.vue
+++ b/src/view/Login.vue
@@ -1,102 +1,191 @@
 <template>
-	<div class="body-view">
-		<el-text class="mx-1">卓越快递</el-text>
-		<el-text>登录状态{{loginState}}</el-text>
-		<el-form class="form-view">
-			<el-form-item label="账号:">
-				<el-input class="ipt" v-model="form.account"></el-input>
-			</el-form-item>
-			<el-form-item label="密码:" style="margin-bottom: 40px;">
-				<el-input class="ipt" v-model="form.password"></el-input>
-			</el-form-item>
-			<el-form-item class="btn-view">
-				<el-button class="btn" type="primary" @click="login">确定</el-button>
-				<el-button class="btn cancel-btn" type="primary" >取消</el-button>
-			</el-form-item>
-		</el-form>
+	<div class="login-container">
+		<div class="login-box">
+			<div class="logo-container">
+				<img src="../assets/logo.png" alt="Logo" class="logo">
+				<h2 class="login-title">旭日快递</h2>
+			</div>
+
+			<el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" label-width="80px" class="login-form">
+				<el-form-item label="用户名" prop="username">
+					<el-input v-model="loginForm.username" placeholder="请输入用户名" clearable></el-input>
+				</el-form-item>
+
+				<el-form-item label="密码" prop="password">
+					<el-input v-model="loginForm.password" type="password" placeholder="请输入密码" clearable></el-input>
+				</el-form-item>
+				<el-form-item label="登录身份" prop="role" >
+					<el-select v-model="loginForm.role" placeholder="请选择登录身份" clearable>
+						<el-option label="普通用户" value="user"></el-option>
+						<el-option label="管理员" value="admin"></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="onSubmit" class="login-button">登录</el-button>
+				</el-form-item>
+			</el-form>
+			<router-link to="/register">没有账号？去注册</router-link>
+		</div>
 	</div>
 </template>
 
 <script setup>
-import request from '../request';
-import { reactive,ref } from 'vue';
-import { ElMessage } from 'element-plus';
-import { useRouter } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { userStore } from '../store';
-const store=userStore()
-const {loginState}=storeToRefs(store)
-// // 模拟的用户数据
-// const userStore = ref([
-//   { username: 'test', password: '123' },
-//   { username: 'gct', password: '123' },
-//   { username: 'admin', password: 'admin' },
-// ]);
-
-// 表单数据
-const form = reactive({
-  account: "",
-  password: ""
-});
-const router=useRouter()
-
-const login=()=>{
-	console.log(form.account,form.password)
-	request({
-		url:"http://www.fj84.site/login",
-		method:"get",
-		params:{
-			account:form.account,
-			password:form.password
-		}
-	}).then(res=>{
-		let myType="error"
-		if(res.data.code==1){
-			myType="success"
-			store.setLoginState(true)
-			router.push({
-				name:"User"
-			})
-		}else{
-			myType="error"
-		}
-		ElMessage({
-			message:res.data.message,
-			type:myType
-		})
-		}).catch(error=>{
-			console.log(error)
-	})
-}
+	import {
+		ref
+	} from 'vue';
+	import {
+		ElMessage
+	} from 'element-plus';
+	import {
+		useRouter
+	} from 'vue-router';
+	import {
+		storeToRefs
+	} from 'pinia';
+	import {
+		userStore
+	} from '../store';
+	// 模拟的用户数据
+	const userData = ref([
+	  { username: 'test', password: '123', role: 'user' },
+	  { username: 'admin', password: 'admin', role: 'admin' }
+	]);
+
+
+	// 表单数据
+	const loginForm = ref({
+	  username: '',
+	  password: '',
+	  role: '' 
+	});
+
+	// 表单验证规则
+	const loginRules = ref({
+	  username: [
+	    { required: true, message: '请输入用户名', trigger: 'blur' }
+	  ],
+	  password: [
+	    { required: true, message: '请输入密码', trigger: 'blur' }
+	  ],
+	  role: [
+	    { required: true, message: '请选择登录身份', trigger: 'change' }
+	  ]
+	});
+
+	// 表单引用
+	const loginFormRef = ref(null);
+	const router = useRouter();
+	const store = userStore()
+	const {
+		loginState
+	} = storeToRefs(store)
+	// 提交表单
+
+	const onSubmit = () => {
+	  if (loginFormRef.value) {
+	    loginFormRef.value.validate((valid) => {
+	      if (valid) {
+	        const user = userData.value.find(u => 
+	          u.username === loginForm.value.username && 
+	          u.password === loginForm.value.password && 
+	          u.role === loginForm.value.role
+	        );
+	        if (user) {
+	          ElMessage({
+	            message: '登录成功！',
+	            type: 'success',
+	            duration: 3000
+	          });
+	          store.setLoginState(true);
+	          if (loginForm.value.role === 'admin') {
+	            router.push('/Courier'); // 管理员登录跳转
+	          } else {
+	            router.push('/User'); // 普通用户登录跳转
+	          }
+	        } else {
+	          ElMessage.error('用户名、密码或登录身份错误');
+	        }
+	      } else {
+	        ElMessage.error('请检查输入信息是否正确');
+	      }
+	    });
+	  }
+	};
+
 </script>
 
 <style scoped>
-	.body-view{
-		border:1px solid black;
-		width:500px;
-		height: 435px;
+	/* 整体容器，居中显示，背景渐变 */
+	.login-container {
 		display: flex;
-		flex-direction: column;
 		justify-content: center;
 		align-items: center;
+		height: 100vh;
+		background: linear-gradient(135deg, #6ab7ff, #ece9e6);
+		font-family: 'Arial', sans-serif;
+	}
+
+	/* 登录框样式 */
+	.login-box {
+		width: 400px;
+		padding: 40px;
+		background-color: white;
+		border-radius: 10px;
+		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+		text-align: center;
 	}
-	.mx-1{
-		font-size: 25px;
+
+	/* Logo 区域 */
+	.logo-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 		margin-bottom: 20px;
 	}
-	.ipt{
-		border: 1.5px solid black;
-		height: 50px;
+
+	.logo {
+		width: 100px;
+		margin-bottom: 10px;
 	}
-	.btn-view{
-		margin-left: 10px;
+
+	.login-title {
+		font-size: 24px;
+		color: #333;
+		font-weight: 600;
+		margin: 0;
 	}
-	.btn{
-		background-color: #0f63fe;
-		width: 90px;
-		height: 40px;
+
+	/* 输入框和表单样式 */
+	.el-input {
+		border-radius: 8px;
+		border: 1px solid #dcdfe6;
+	}
+
+	.el-input:focus-within {
+		border-color: #409eff;
 	}
-	.cancel-btn{
-		margin-left: 70px !important;
+
+	/* 按钮美化 */
+	.login-button {
+		width: 100%;
+		height: 45px;
+		font-size: 16px;
+		border-radius: 25px;
+		background-color: #409eff;
+		border-color: #409eff;
+		color: white;
+		box-shadow: 0 4px 10px rgba(64, 158, 255, 0.2);
+		transition: all 0.3s ease;
+	}
+
+	.login-button:hover {
+		background-color: #66b1ff;
+		border-color: #66b1ff;
+		box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+	}
+
+	/* 输入框外间距 */
+	.el-form-item {
+		margin-bottom: 20px;
 	}
 </style>
\ No newline at end of file
diff --git a/src/view/Register.vue b/src/view/Register.vue
new file mode 100644
index 0000000..5647a47
--- /dev/null
+++ b/src/view/Register.vue
@@ -0,0 +1,178 @@
+<template>
+  <div class="register-container">
+    <div class="register-box">
+      <!-- Logo 区域 -->
+      <div class="logo-container">
+        <img src="../assets/logo.png" alt="Logo" class="logo">
+        <h2 class="register-title">用户注册</h2>
+      </div>
+
+      <!-- 注册表单 -->
+      <el-form :model="registerForm" :rules="registerRules" ref="registerFormRef" label-width="100px" class="register-form">
+        <!-- 用户名 -->
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="registerForm.username" placeholder="请输入用户名" clearable></el-input>
+        </el-form-item>
+		<!-- 账号 -->
+        <el-form-item label="账号" prop="account">
+          <el-input v-model="registerForm.account" placeholder="请输入账号" clearable></el-input>
+        </el-form-item>
+        <!-- 密码 -->
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="registerForm.password" type="password" placeholder="请输入密码" clearable></el-input>
+        </el-form-item>
+
+        <!-- 确认密码 -->
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input v-model="registerForm.confirmPassword" type="password" placeholder="请再次输入密码" clearable></el-input>
+        </el-form-item>
+        <!-- 注册按钮 -->
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit" class="register-button">注册</el-button>
+        </el-form-item>
+			
+		<router-link to="/Login">已有账号？去登录</router-link>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 表单数据
+const registerForm = ref({
+  username: '',
+  password: '',
+  confirmPassword: '',
+  account: ''
+});
+
+// 自定义账号校验规则
+const validateAccount = (rule, value, callback) => {
+  const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
+  if (!value) {
+    callback(new Error('请输入账号'));
+  } else if (!regex.test(value)) {
+    callback(new Error('账号必须包含字母和数字，并且不少于8个字符'));
+  } else {
+    callback();
+  }
+};
+
+// 自定义确认密码校验规则
+const validateConfirmPassword = (rule, value, callback) => {
+  if (value !== registerForm.value.password) {
+    callback(new Error('两次输入的密码不一致'));
+  } else {
+    callback();
+  }
+};
+
+// 表单校验规则
+const registerRules = ref({
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, message: '请确认密码', trigger: 'blur' },
+    { validator: validateConfirmPassword, trigger: 'blur' }
+  ],
+  account: [
+    { required: true, message: '请输入账号', trigger: 'blur' },
+    { validator: validateAccount, trigger: 'blur' }
+  ]
+});
+const registerFormRef = ref(null); 
+// 提交表单
+const onSubmit = () => {
+  registerFormRef.value.validate((valid) => {
+    if (valid) {
+      ElMessage.success('注册成功！');
+    } else {
+      ElMessage.error('请检查输入信息是否正确');
+      return false;
+    }
+  });
+};
+</script>
+
+<style scoped>
+/* 整体容器，居中显示，背景渐变 */
+.register-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: linear-gradient(135deg, #6ab7ff, #ece9e6);
+  font-family: 'Arial', sans-serif;
+}
+
+/* 注册框样式 */
+.register-box {
+  width: 400px;
+  padding: 40px;
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+/* Logo 区域 */
+.logo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.logo {
+  width: 100px;
+  margin-bottom: 10px;
+}
+
+.register-title {
+  font-size: 24px;
+  color: #333;
+  font-weight: 600;
+  margin: 0;
+}
+
+/* 输入框和表单样式 */
+.el-input {
+  border-radius: 8px;
+  border: 1px solid #dcdfe6;
+}
+
+.el-input:focus-within {
+  border-color: #409eff;
+}
+
+/* 按钮美化 */
+.register-button {
+  width: 100%;
+  height: 45px;
+  font-size: 16px;
+  border-radius: 25px;
+  background-color: #409eff;
+  border-color: #409eff;
+  color: white;
+  box-shadow: 0 4px 10px rgba(64, 158, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.register-button:hover {
+  background-color: #66b1ff;
+  border-color: #66b1ff;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+}
+
+/* 输入框外间距 */
+.el-form-item {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/view/Regiter.vue b/src/view/Regiter.vue
deleted file mode 100644
index a46f092..0000000
--- a/src/view/Regiter.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" label-width="auto"
-		class="demo-ruleForm">
-		<el-form-item label="账号" prop="account">
-			<el-input v-model.number="ruleForm.account" />
-		</el-form-item>
-		<el-form-item label="密码" prop="pass">
-			<el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
-		</el-form-item>
-		<el-form-item label="确认密码" prop="checkPass">
-			<el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
-		</el-form-item>
-		<el-form-item>
-			<el-button type="primary" @click="submitForm(ruleFormRef)">
-				Submit
-			</el-button>
-			<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
-		</el-form-item>
-	</el-form>
-</template>
-
-<script lang="ts" setup>
-	import { reactive, ref } from 'vue'
-	import type { FormInstance, FormRules } from 'element-plus'
-
-	const ruleFormRef = ref<FormInstance>()
-
-	const checkAccount = (rule : any, value : any, callback : any) => {
-		if (!value) {
-			return callback(new Error('请输入账号'))
-		}else{
-			let value1=value+""
-			if(value1.length<8){
-				return callback(new Error('账号长度不能小于8'))
-			}
-			callback()
-		}
-	}
-
-	const validatePass = (rule : any, value : any, callback : any) => {
-		if (value === '') {
-			callback(new Error('请输入密码'))
-		} else {
-			if (ruleForm.checkPass !== '') {
-				if (!ruleFormRef.value) return
-				ruleFormRef.value.validateField('checkPass')
-			}
-			callback()
-		}
-	}
-	const validatePass2 = (rule : any, value : any, callback : any) => {
-		if (value === '') {
-			callback(new Error('请再次输入密码'))
-		} else if (value !== ruleForm.pass) {
-			callback(new Error("两次密码不一致"))
-		} else {
-			callback()
-		}
-	}
-
-	const ruleForm = reactive({
-		pass: '',
-		checkPass: '',
-		account: '',
-	})
-
-	const rules = reactive<FormRules<typeof ruleForm>>({
-		pass: [{ validator: validatePass, trigger: 'blur' }],
-		checkPass: [{ validator: validatePass2, trigger: 'blur' }],
-		account: [{ validator: checkAccount, trigger: 'blur' }],
-	})
-
-	const submitForm = (formEl : FormInstance | undefined) => {
-		if (!formEl) return
-		formEl.validate((valid) => {
-			if (valid) {
-				console.log('submit!')
-			} else {
-				console.log('error submit!')
-			}
-		})
-	}
-
-	const resetForm = (formEl : FormInstance | undefined) => {
-		if (!formEl) return
-		formEl.resetFields()
-	}
-</script>
\ No newline at end of file
diff --git a/src/view/courier/DeliveryTracking.vue b/src/view/courier/DeliveryTracking.vue
new file mode 100644
index 0000000..f855e10
--- /dev/null
+++ b/src/view/courier/DeliveryTracking.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="container">
+    <!-- 页面标题 -->
+    <el-row class="title-row">
+      <el-col :span="24">
+        <h2 class="title">配送状态查询</h2>
+      </el-col>
+    </el-row>
+
+    <!-- 查询条件 -->
+    <el-row :gutter="20" class="query-row">
+      <el-col :span="8">
+        <el-input
+          v-model="searchText"
+          placeholder="请输入订单编号或客户姓名"
+          @input="filterOrders"
+          clearable
+          class="custom-input"
+        >
+          <template #prepend>
+            <el-icon><search /></el-icon>
+          </template>
+        </el-input>
+      </el-col>
+      <el-col :span="8">
+        <el-select
+          v-model="selectedStatus"
+          placeholder="选择订单状态"
+          @change="filterOrders"
+          clearable
+          class="custom-select"
+        >
+          <el-option label="待接收" value="待接收" />
+          <el-option label="待配送" value="待配送" />
+          <el-option label="配送中" value="配送中" />
+          <el-option label="已完成" value="已完成" />
+        </el-select>
+      </el-col>
+    </el-row>
+
+    <!-- 订单列表 -->
+    <el-table :data="filteredOrders" class="custom-table" stripe>
+      <el-table-column prop="orderId" label="订单编号" width="150" />
+      <el-table-column prop="customerName" label="客户姓名" width="150" />
+      <el-table-column prop="pickupAddress" label="取件地址" width="250" />
+      <el-table-column prop="deliveryAddress" label="送达地址" width="250" />
+      <el-table-column prop="status" label="订单状态" width="150" />
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Search } from "@element-plus/icons-vue";
+
+// 模拟订单数据
+const orders = ref([
+  {
+    orderId: "123456",
+    customerName: "张三",
+    pickupAddress: "北京市朝阳区",
+    deliveryAddress: "北京市海淀区",
+    status: "待接收",
+  },
+  {
+    orderId: "123457",
+    customerName: "李四",
+    pickupAddress: "上海市浦东新区",
+    deliveryAddress: "上海市静安区",
+    status: "待配送",
+  },
+  {
+    orderId: "123458",
+    customerName: "王五",
+    pickupAddress: "广州市天河区",
+    deliveryAddress: "广州市越秀区",
+    status: "配送中",
+  },
+  {
+    orderId: "123459",
+    customerName: "赵六",
+    pickupAddress: "深圳市南山区",
+    deliveryAddress: "深圳市福田区",
+    status: "已完成",
+  },
+]);
+
+// 搜索框内容
+const searchText = ref("");
+// 选中的状态
+const selectedStatus = ref(null);
+// 筛选后的订单
+const filteredOrders = ref([...orders.value]);
+
+// 过滤订单的方法
+const filterOrders = () => {
+  filteredOrders.value = orders.value.filter((order) => {
+    const matchesText =
+      !searchText.value ||
+      order.orderId.includes(searchText.value) ||
+      order.customerName.includes(searchText.value);
+    const matchesStatus =
+      !selectedStatus.value || order.status === selectedStatus.value;
+
+    return matchesText && matchesStatus;
+  });
+};
+</script>
+
+<style scoped>
+/* 容器样式 */
+.container {
+  background-color: #f9f9f9;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* 标题样式 */
+.title-row {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+  margin: 0;
+}
+
+/* 查询行样式 */
+.query-row {
+  margin-bottom: 20px;
+}
+
+.custom-input {
+  border-radius: 5px;
+}
+
+.custom-select {
+  border-radius: 5px;
+}
+
+/* 表格样式 */
+.custom-table {
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
+}
+
+.custom-table .el-table__header {
+  background-color: #f5f5f5;
+  font-weight: bold;
+}
+
+.custom-table .el-table__row:hover {
+  background-color: #f0f9ff;
+  transition: background-color 0.3s;
+}
+</style>
diff --git a/src/view/courier/Feedback.vue b/src/view/courier/Feedback.vue
new file mode 100644
index 0000000..806ff60
--- /dev/null
+++ b/src/view/courier/Feedback.vue
@@ -0,0 +1,78 @@
+<template>
+  <el-container>
+    <el-header>
+      <h2 class="title">客户反馈</h2>
+    </el-header>
+    <el-main>
+      <el-row class="feedback-list">
+        <el-col :span="24">
+          <h2>客户反馈列表</h2>
+          <el-table :data="feedbacks" style="width: 100%">
+            <el-table-column label="主题" prop="subject" width="150"></el-table-column>
+            <el-table-column label="反馈内容" prop="content" width="300" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column label="提交日期" prop="date" width="180"></el-table-column>
+            <el-table-column label="联系方式" prop="contact" width="150"></el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const feedbacks = ref([
+  {
+    subject: '物流问题',
+    content: '我的包裹在运输过程中丢失了，请尽快处理。',
+    date: '2024-11-01',
+    contact: '12345678901'
+  },
+  {
+    subject: '服务建议',
+    content: '希望能增加实时物流跟踪功能。',
+    date: '2024-11-05',
+    contact: ''
+  }
+]);
+</script>
+
+<style scoped>
+/* 顶部标题样式 */
+.title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #2c3e50;
+  text-align: center;
+  padding: 15px 0;
+  background-color: #f5f7fa;
+  margin: 0;
+}
+
+/* 客户反馈列表容器 */
+.feedback-list {
+  padding: 20px;
+  background: #f9f9f9;
+}
+
+/* 分区标题样式 */
+.section-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+  text-align: left;
+}
+
+/* 表格样式 */
+.el-table {
+  margin-top: 20px;
+  border-radius: 8px;
+}
+
+/* 表格行的 hover 效果 */
+.el-table .el-table__row:hover {
+  background-color: #e8f0fe;
+}
+</style>
diff --git a/src/view/courier/Home.vue b/src/view/courier/Home.vue
new file mode 100644
index 0000000..dfdd6e0
--- /dev/null
+++ b/src/view/courier/Home.vue
@@ -0,0 +1,111 @@
+<template>
+	<div class="home-page">
+		<!-- 欢迎横幅 -->
+		<section class="welcome-banner">
+			<h1>欢迎使用旭日快递管理系统</h1>
+			<p>在这里您可以管理快递、用户和系统设置。</p>
+		</section>
+
+		<!-- 统计信息卡片 -->
+		<section class="statistics">
+			<el-row :gutter="20">
+				<el-col :span="8">
+					<el-card class="stat-card">
+						<div class="stat-title">用户总数</div>
+						<div class="stat-value">{{ userCount }}</div>
+					</el-card>
+				</el-col>
+				<el-col :span="8">
+					<el-card class="stat-card">
+						<div class="stat-title">快递总数</div>
+						<div class="stat-value">{{ expressCount }}</div>
+					</el-card>
+				</el-col>
+				<el-col :span="8">
+					<el-card class="stat-card">
+						<div class="stat-title">进行中的订单</div>
+						<div class="stat-value">{{ ongoingOrders }}</div>
+					</el-card>
+				</el-col>
+			</el-row>
+		</section>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+// 模拟统计数据
+const userCount = ref(1024);
+const expressCount = ref(5678);
+const ongoingOrders = ref(321);
+
+// 跳转到指定页面
+const router = useRouter();
+const goToPage = (path) => {
+	router.push(path);
+};
+
+// 页面加载时可以更新统计数据
+onMounted(() => {
+	// 可以在此处调用 API 更新统计数据
+});
+</script>
+
+<style scoped>
+.home-page {
+	padding: 20px;
+	background-color: #f9f9f9;
+}
+
+.welcome-banner {
+	text-align: center;
+	padding: 20px;
+	background-color: #409EFF;
+	color: white;
+	border-radius: 8px;
+	margin-bottom: 30px;
+}
+
+.welcome-banner h1 {
+	font-size: 24px;
+	margin: 0;
+}
+
+.welcome-banner p {
+	font-size: 16px;
+	margin: 5px 0 0;
+}
+
+.statistics {
+	margin-bottom: 30px;
+}
+
+.stat-card {
+	text-align: center;
+	padding: 20px;
+}
+
+.stat-title {
+	font-size: 18px;
+	color: #606266;
+	margin-bottom: 10px;
+}
+
+.stat-value {
+	font-size: 24px;
+	font-weight: bold;
+	color: #409EFF;
+}
+
+.quick-actions {
+	margin-top: 30px;
+	text-align: center;
+}
+
+.el-button {
+	width: 100%;
+	padding: 15px 0;
+}
+</style>
diff --git a/src/view/courier/Index.vue b/src/view/courier/Index.vue
new file mode 100644
index 0000000..18e4600
--- /dev/null
+++ b/src/view/courier/Index.vue
@@ -0,0 +1,183 @@
+<template>
+  <div id="app">
+    <!-- Top Navigation Bar -->
+    <el-header class="top-nav">
+      <div class="logo">
+        <img src="../../assets/logo.png" alt="Logo" class="logo-image" />
+        <span class="title">旭日快递管理系统</span>
+      </div>
+      <div class="user-controls">
+        <span class="welcome-message">欢迎您，管理员！</span>
+        <el-button type="text" class="logout-button" @click="logout">退出</el-button>
+      </div>
+    </el-header>
+
+    <!-- Main Container -->
+    <el-container>
+      <!-- Sidebar -->
+      <el-aside width="220px" class="sidebar">
+        <el-menu
+          :default-active="activeSidebarMenu"
+          class="side-menu"
+          @select="handleSidebarMenuSelect"
+          router
+        >
+          <el-menu-item index="Home">
+            <el-icon><HomeFilled /></el-icon>
+            <span>首页</span>
+          </el-menu-item>
+          <el-submenu index="1">
+            <template #title>
+              <el-icon><Document /></el-icon>
+              <span>订单管理</span>
+            </template>
+            <el-menu-item index="orderProcessing">订单处理</el-menu-item>
+            <el-menu-item index="deliveryTracking">配送状态查询</el-menu-item>
+            <el-menu-item index="orderHistory">历史订单</el-menu-item>
+          </el-submenu>
+          <el-menu-item index="feedback">
+            <el-icon><message /></el-icon>
+            <span>客户反馈</span>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+
+      <!-- Content Area -->
+      <el-main class="content-area">
+        <router-view></router-view>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { HomeFilled, Document, Message } from '@element-plus/icons-vue';
+
+// Define active sidebar menu
+const activeSidebarMenu = ref('Home');
+const router = useRouter();
+
+// Handle sidebar menu item selectionH
+const handleSidebarMenuSelect = (index) => {
+  activeSidebarMenu.value = index;
+  router.push(index); // Navigate to selected route
+};
+
+// Logout function
+const logout = () => {
+  // Clear user session or token (if any)
+  localStorage.removeItem('userToken'); // Example: Remove stored token
+
+  // Redirect to login page
+  router.push('/login');
+};
+</script>
+
+<style scoped>
+#app {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  font-family: 'Arial', sans-serif;
+}
+
+.top-nav {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 30px;
+  background-color: #3b82f6;
+  color: white;
+  align-items: center;
+  height: 80px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+}
+
+.logo-image {
+  width: 50px;
+  margin-right: 15px;
+}
+
+.title {
+  font-size: 1.8em;
+  font-weight: bold;
+}
+
+.logout-button {
+  color: white;
+  font-size: 1em;
+  margin-left: 20px;
+}
+
+.sidebar {
+  background: linear-gradient(180deg, #e0f7fa, #ffffff);
+  padding-top: 20px;
+  border-right: 1px solid #ddd;
+}
+
+.side-menu {
+  height: 100%;
+  border-right: none;
+}
+
+.side-menu .el-menu-item,
+.side-menu .el-submenu__title {
+  font-size: 16px;
+  padding: 15px 20px;
+}
+
+.side-menu .el-menu-item:hover,
+.side-menu .el-submenu__title:hover {
+  background-color: #f0f9ff;
+  color: #3b82f6;
+}
+
+.content-area {
+  padding: 25px 35px;
+  background-color: #ffffff;
+  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  margin: 20px;
+  overflow-y: auto;
+}
+
+.el-menu-item.is-active {
+  color: #3b82f6 !important;
+  background-color: #f0f9ff;
+}
+
+.user-controls {
+  display: flex;
+  align-items: center;
+}
+
+.welcome-message {
+  margin-right: 15px;
+  font-size: 1.1em;
+}
+
+@media (max-width: 768px) {
+  .top-nav {
+    flex-direction: column;
+    height: auto;
+    text-align: center;
+  }
+
+  .sidebar {
+    display: none;
+  }
+
+  .content-area {
+    margin: 10px;
+    padding: 15px;
+  }
+}
+</style>
diff --git a/src/view/courier/OrderHistory.vue b/src/view/courier/OrderHistory.vue
new file mode 100644
index 0000000..2e3593b
--- /dev/null
+++ b/src/view/courier/OrderHistory.vue
@@ -0,0 +1,283 @@
+<template>
+  <el-container>
+    <el-header>
+      <h1 class="title">历史订单管理</h1>
+    </el-header>
+    <el-main>
+      <el-row class="history-orders">
+        <!-- 标题 -->
+        <el-col :span="24">
+          <el-row class="title">
+            <span class="history-label">历史订单</span>
+          </el-row>
+        </el-col>
+
+        <!-- 搜索和筛选 -->
+       <el-col :span="24">
+                 <el-row :gutter="10" class="search-filter-row">
+                   <el-col :span="10">
+                     <el-input v-model="searchQuery" placeholder="搜索订单编号或收件人" @keyup.enter="searchOrders"></el-input>
+                   </el-col>
+                   <el-col :span="2">
+                     <el-button type="primary" @click="searchOrders">搜索</el-button>
+                   </el-col>
+                   <el-col :span="10">
+                     <el-select v-model="statusFilter" placeholder="选择订单状态" @change="filterOrders">
+                       <el-option label="全部" value=""></el-option>
+                       <el-option label="已完成" value="已完成"></el-option>
+                       <el-option label="运输中" value="运输中"></el-option>
+                       <el-option label="已取消" value="已取消"></el-option>
+                     </el-select>
+                   </el-col>
+                 </el-row>
+               </el-col>
+
+        <!-- 订单列表 -->
+        <el-col :span="24">
+          <el-table :data="filteredOrders" style="width: 100%">
+            <el-table-column label="订单编号" prop="orderId" width="150"></el-table-column>
+            <el-table-column label="寄件人" prop="sender" width="200"></el-table-column>
+            <el-table-column label="收件人" prop="receiver" width="200"></el-table-column>
+            <el-table-column label="下单日期" prop="orderDate" width="180"></el-table-column>
+            <el-table-column label="订单状态" prop="status" width="120">
+              <template #default="scope">
+                <el-tag :type="getStatusType(scope.row.status)" disable-transitions>
+                  {{ scope.row.status }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="150">
+              <template #default="scope">
+                <el-button size="mini" @click="viewOrder(scope.row)">查看</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+
+        <!-- 订单详情弹框 -->
+        <el-dialog v-model="dialogVisible" title="订单详情" width="40%">
+          <el-form :model="selectedOrder" label-width="100px">
+            <el-form-item label="订单编号">
+              <el-input v-model="selectedOrder.orderId" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="寄件人">
+              <el-input v-model="selectedOrder.sender" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="收件人">
+              <el-input v-model="selectedOrder.receiver" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="下单日期">
+              <el-input v-model="selectedOrder.orderDate" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="订单状态">
+              <el-input v-model="selectedOrder.status" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="寄件地址">
+              <el-input v-model="selectedOrder.senderAddress" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="收件地址">
+              <el-input v-model="selectedOrder.receiverAddress" disabled></el-input>
+            </el-form-item>
+          </el-form>
+
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">关闭</el-button>
+          </span>
+        </el-dialog>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const dialogVisible = ref(false);
+const selectedOrder = ref(null);
+const searchQuery = ref('');
+const statusFilter = ref('');
+
+// 模拟的历史订单数据
+const orders = ref([
+  {
+    orderId: 'ORD001',
+    sender: '张三',
+    receiver: '李四',
+    orderDate: '2024-11-01',
+    status: '已完成',
+    senderAddress: '北京朝阳区',
+    receiverAddress: '上海浦东新区'
+  },
+  {
+    orderId: 'ORD002',
+    sender: '王五',
+    receiver: '赵六',
+    orderDate: '2024-11-05',
+    status: '运输中',
+    senderAddress: '广州天河区',
+    receiverAddress: '深圳南山区'
+  },
+  {
+    orderId: 'ORD003',
+    sender: '周七',
+    receiver: '孙八',
+    orderDate: '2024-10-28',
+    status: '已取消',
+    senderAddress: '成都武侯区',
+    receiverAddress: '杭州西湖区'
+  },
+]);
+
+// 计算属性，根据搜索和筛选条件过滤订单
+const filteredOrders = computed(() => {
+  let result = orders.value;
+  if (searchQuery.value) {
+    result = result.filter(order => 
+      order.orderId.includes(searchQuery.value) || 
+      order.receiver.includes(searchQuery.value)
+    );
+  }
+  if (statusFilter.value) {
+    result = result.filter(order => order.status === statusFilter.value);
+  }
+  return result;
+});
+
+// 获取订单状态标签类型
+const getStatusType = (status) => {
+  switch (status) {
+    case '已完成':
+      return 'success';
+    case '运输中':
+      return 'info';
+    case '已取消':
+      return 'danger';
+    default:
+      return 'default';
+  }
+};
+
+// 搜索订单
+const searchOrders = () => {
+  // 这里可以添加额外的搜索逻辑，如果需要
+};
+
+// 筛选订单
+const filterOrders = () => {
+  // 这里可以添加额外的筛选逻辑，如果需要
+};
+
+// 查看订单详情
+const viewOrder = (order) => {
+  selectedOrder.value = { ...order }; // 复制选中的订单
+  dialogVisible.value = true;
+};
+</script>
+
+<style scoped>
+/* 页面整体布局调整 */
+.history-orders {
+  padding: 20px;
+  background-color: #f9f9f9; /* 设置页面背景颜色 */
+  border-radius: 8px; /* 圆角效果 */
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
+}
+
+/* 标题样式 */
+.title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #3a3a3a;
+  text-align: center; /* 居中标题 */
+  margin: 20px 0;
+}
+
+/* 历史订单标题 */
+.history-label {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+}
+
+/* 表格样式 */
+.el-table {
+  margin-top: 20px;
+  background-color: #ffffff; /* 表格背景颜色 */
+  border-radius: 8px;
+  overflow: hidden; /* 隐藏多余部分 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 表头样式 */
+.el-table th {
+  background-color: #f5f7fa;
+  color: #606266;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+/* 表格行样式 */
+.el-table .el-table__body tr:hover {
+  background-color: #eef5ff; /* 鼠标悬停效果 */
+}
+
+/* 标签样式 */
+.el-tag {
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 5px 10px;
+}
+
+/* 按钮样式 */
+.el-button {
+  margin-left: 10px;
+  border-radius: 20px; /* 圆角按钮 */
+}
+
+/* 搜索框容器 */
+.search-container {
+  margin-bottom: 20px;
+}
+
+/* 搜索和筛选区域样式 */
+.search-filter-row {
+  margin-top: 20px;
+}
+
+.el-input, .el-button, .el-select {
+  margin-right: 10px;
+  border-radius: 4px; /* 统一圆角 */
+}
+
+/* 弹窗样式 */
+.el-dialog {
+  border-radius: 10px;
+}
+
+.dialog-footer {
+  text-align: right;
+}
+
+.dialog-footer .el-button {
+  border-radius: 20px; /* 圆角关闭按钮 */
+}
+
+/* 响应式布局 */
+@media (max-width: 768px) {
+  .search-filter-row {
+    flex-direction: column;
+  }
+
+  .el-col {
+    margin-bottom: 10px;
+  }
+
+  .title {
+    font-size: 22px;
+  }
+
+  .history-label {
+    font-size: 16px;
+  }
+}
+</style>
diff --git a/src/view/courier/OrderProcessing.vue b/src/view/courier/OrderProcessing.vue
new file mode 100644
index 0000000..2a48644
--- /dev/null
+++ b/src/view/courier/OrderProcessing.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="container">
+    <!-- 页面标题 -->
+    <el-row class="title-row">
+      <el-col :span="24">
+        <h2 class="title">订单处理</h2>
+      </el-col>
+    </el-row>
+
+    <!-- 订单列表 -->
+    <el-table :data="orders" class="custom-table" stripe>
+      <el-table-column prop="orderId" label="订单编号" width="150" />
+      <el-table-column prop="customerName" label="客户姓名" width="150" />
+      <el-table-column prop="pickupAddress" label="取件地址" width="250" />
+      <el-table-column prop="deliveryAddress" label="送达地址" width="250" />
+      <el-table-column prop="status" label="订单状态" width="150">
+        <template #default="{ row }">
+          <el-select v-model="row.status" @change="handleStatusChange(row)" placeholder="请选择状态">
+            <el-option label="待接收" value="待接收" />
+            <el-option label="待配送" value="待配送" />
+            <el-option label="配送中" value="配送中" />
+            <el-option label="已完成" value="已完成" />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="200">
+        <template #default="{ row }">
+          <el-button type="link" @click="handleEditCustomer(row)">
+            修改顾客信息
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 修改顾客信息对话框 -->
+    <el-dialog v-model="dialogVisible" width="50%" title="修改顾客信息" class="custom-dialog">
+      <el-form :model="orderDetail" label-width="120px">
+        <el-form-item label="订单编号">
+          <el-input v-model="orderDetail.orderId" disabled />
+        </el-form-item>
+        <el-form-item label="客户姓名">
+          <el-input v-model="orderDetail.customerName" placeholder="请输入客户姓名" />
+        </el-form-item>
+        <el-form-item label="取件地址">
+          <el-input v-model="orderDetail.pickupAddress" placeholder="请输入取件地址" />
+        </el-form-item>
+        <el-form-item label="送达地址">
+          <el-input v-model="orderDetail.deliveryAddress" placeholder="请输入送达地址" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveCustomerInfo">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+// 订单数据
+const orders = ref([
+  {
+    orderId: "123456",
+    customerName: "张三",
+    pickupAddress: "北京市朝阳区",
+    deliveryAddress: "北京市海淀区",
+    status: "待接收",
+  },
+  {
+    orderId: "123457",
+    customerName: "李四",
+    pickupAddress: "上海市浦东新区",
+    deliveryAddress: "上海市静安区",
+    status: "待配送",
+  },
+  {
+    orderId: "123458",
+    customerName: "王五",
+    pickupAddress: "广州市天河区",
+    deliveryAddress: "广州市越秀区",
+    status: "配送中",
+  },
+]);
+
+// 订单详情
+const orderDetail = ref({
+  orderId: "",
+  customerName: "",
+  pickupAddress: "",
+  deliveryAddress: "",
+  status: "",
+});
+
+// 对话框控制
+const dialogVisible = ref(false);
+
+// 点击修改顾客信息
+const handleEditCustomer = (row) => {
+  orderDetail.value = { ...row }; // 克隆当前行数据到 orderDetail
+  dialogVisible.value = true; // 显示对话框
+};
+
+// 保存顾客信息
+const saveCustomerInfo = () => {
+  const index = orders.value.findIndex((order) => order.orderId === orderDetail.value.orderId);
+  if (index !== -1) {
+    orders.value[index] = { ...orderDetail.value }; // 更新订单数据
+    alert("顾客信息已更新！");
+    dialogVisible.value = false; // 关闭对话框
+  }
+};
+
+// 处理状态变更
+const handleStatusChange = (order) => {
+  alert(`订单 ${order.orderId} 状态已更改为：${order.status}`);
+};
+</script>
+
+<style scoped>
+/* 页面整体样式 */
+.container {
+  background-color: #f9f9f9;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* 标题样式 */
+.title-row {
+  margin-bottom: 20px;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+}
+
+/* 表格样式 */
+.custom-table {
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
+}
+
+.custom-table .el-table__header {
+  background-color: #f5f5f5;
+  font-weight: bold;
+}
+
+.custom-table .el-table__row {
+  transition: background-color 0.3s;
+}
+
+.custom-table .el-table__row:hover {
+  background-color: #f0f9ff;
+}
+
+/* 对话框样式 */
+.custom-dialog {
+  border-radius: 10px;
+}
+
+.dialog-footer {
+  text-align: right;
+  border-top: 1px solid #f0f0f0;
+  padding-top: 10px;
+}
+
+/* 按钮样式 */
+.el-button {
+  border-radius: 5px;
+}
+
+.el-button--primary {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+
+.el-button--primary:hover {
+  background-color: #66b1ff;
+}
+
+/* 表单输入框样式 */
+.el-form-item {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/view/user/Address.vue b/src/view/user/Address.vue
new file mode 100644
index 0000000..03a50c9
--- /dev/null
+++ b/src/view/user/Address.vue
@@ -0,0 +1,193 @@
+<template>
+	<el-row class="page">
+		<el-row class="header">
+			<h2>地址簿</h2>
+			<el-button type="primary" @click="openAddDialog">新增联系人</el-button>
+		</el-row>
+		<!-- 遍历显示 contactList 中的每个联系人信息 -->
+		<el-row class="block-view" v-for="(item, index) in contactList" :key="index">
+			<!-- 联系人信息 -->
+			<el-row class="contact-view">
+				<el-row>
+					<span class="name">{{ item.name }}</span>
+					<span class="phone">{{ item.phone }}</span>
+				</el-row>
+				<el-row class="address">{{ item.address }}</el-row>
+				<!-- 操作图标（删除和编辑） -->
+				<el-row class="contact-icon-view">
+					<el-icon @click="deleteByIndex(index)">
+						<Delete />
+					</el-icon>
+					<el-icon @click="modify(item, index)">
+						<Edit />
+					</el-icon>
+				</el-row>
+			</el-row>
+			<!-- 分割线 -->
+			<el-row class="line-view"></el-row>
+		</el-row>
+
+		<!-- 删除确认对话框 -->
+		<el-dialog v-model="dialogVisible" title="警告" width="500">
+			<span>确定要删除此联系人吗？</span>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="dialogVisible = false">取消</el-button>
+					<el-button type="primary" @click="deleteByIndexConfirm()">
+						确定
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+
+		<!-- 添加或编辑联系人对话框 -->
+		<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500">
+			<el-form :model="form">
+				<el-form-item label="姓名" :label-width="formLabelWidth">
+					<el-input v-model="form.name" autocomplete="off" />
+				</el-form-item>
+				<el-form-item label="电话号码" :label-width="formLabelWidth">
+					<el-input v-model="form.phone" autocomplete="off" />
+				</el-form-item>
+				<el-form-item label="地址" :label-width="formLabelWidth">
+					<el-input v-model="form.address" autocomplete="off" />
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="dialogFormVisible = false">取消</el-button>
+					<el-button type="primary" @click="confirmDialog">
+						确认
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</el-row>
+</template>
+
+<script setup>
+import { Delete, Edit } from '@element-plus/icons-vue';
+import { reactive, ref } from 'vue';
+
+// 联系人列表
+const contactList = reactive([
+	{ name: "张三", phone: "12345678901", address: "福建省福州市鼓楼区洪山镇杨桥西路50号" },
+	{ name: "李四", phone: "23456789012", address: "海南省海口市龙华区金垦路世代雅居二期清泉居A5028" },
+]);
+
+const dialogVisible = ref(false);
+const dialogFormVisible = ref(false);
+const dialogTitle = ref("新增联系人");
+let formIndex = -1;
+
+// 表单模型
+const form = reactive({
+	name: "",
+	phone: "",
+	email: "",
+	address: "",
+});
+const formLabelWidth = '100px';
+
+// 打开新增联系人对话框
+const openAddDialog = () => {
+	dialogTitle.value = "新增联系人";
+	dialogFormVisible.value = true;
+	Object.assign(form, { name: "", phone: "", email: "", address: "" });
+	formIndex = -1;
+};
+
+// 打开编辑对话框
+const modify = (item, index) => {
+	dialogTitle.value = "编辑联系人";
+	dialogFormVisible.value = true;
+	Object.assign(form, item);
+	formIndex = index;
+};
+
+// 确认添加或编辑
+const confirmDialog = () => {
+	if (formIndex === -1) {
+		contactList.push({ ...form });
+	} else {
+		contactList[formIndex] = { ...form };
+	}
+	dialogFormVisible.value = false;
+};
+
+// 删除联系人
+const deleteByIndex = (index) => {
+	dialogVisible.value = true;
+	formIndex = index;
+};
+
+const deleteByIndexConfirm = () => {
+	contactList.splice(formIndex, 1);
+	dialogVisible.value = false;
+};
+</script>
+
+<style scoped>
+.page {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	background-color: white;
+	padding: 20px;
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+}
+
+.block-view {
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 20px;
+	border-bottom: 1px solid #ebebeb;
+}
+
+.contact-view {
+	display: flex;
+	flex-direction: column;
+	padding: 10px 0;
+}
+
+.name {
+	font-size: large;
+	font-weight: 500;
+}
+
+.phone {
+	color: gray;
+	margin-left: 10px;
+}
+
+.email {
+	color: gray;
+	font-size: small;
+	margin-top: 5px;
+}
+
+.address {
+	color: darkgray;
+	font-size: small;
+	margin-top: 5px;
+}
+
+.contact-icon-view {
+	margin-top: 10px;
+	display: flex;
+	justify-content: space-around;
+}
+
+.line-view {
+	height: 0.5px;
+	width: 95%;
+	background-color: lightgray;
+	margin-top: 10px;
+}
+</style>
diff --git a/src/view/user/CourierComplaint.vue b/src/view/user/CourierComplaint.vue
new file mode 100644
index 0000000..d9736f8
--- /dev/null
+++ b/src/view/user/CourierComplaint.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="complaint-form">
+    <h2>快递投诉</h2>
+    <el-form :model="form" :rules="formRules" label-width="120px" class="form-container">
+      <!-- 运单号输入框 -->
+      <el-form-item label="运单号" prop="trackingNumber">
+        <el-input v-model="form.trackingNumber" placeholder="请输入运单号" clearable></el-input>
+      </el-form-item>
+      
+      <!-- 投诉内容输入框 -->
+      <el-form-item label="投诉内容" prop="complaintContent">
+        <el-input v-model="form.complaintContent" type="textarea" placeholder="请输入投诉内容" rows="4"></el-input>
+      </el-form-item>
+      
+      <!-- 联系方式输入框 -->
+      <el-form-item label="联系方式" prop="contact">
+        <el-input v-model="form.contact" placeholder="请输入联系方式" clearable></el-input>
+      </el-form-item>
+
+      <!-- 提交按钮 -->
+      <el-form-item>
+        <el-button type="primary" @click="handleSubmit">提交投诉</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 提交成功提示 -->
+    <el-alert v-if="submitSuccess" type="success" title="投诉提交成功！" show-icon></el-alert>
+
+    <!-- 错误提示 -->
+    <el-alert v-if="error" type="error" :title="error" show-icon></el-alert>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ElForm, ElFormItem, ElInput, ElButton, ElAlert } from 'element-plus';
+
+// 定义表单数据
+const form = ref({
+  trackingNumber: '',
+  complaintContent: '',
+  contact: ''
+});
+
+// 提交成功与否
+const submitSuccess = ref(false);
+const error = ref(null);
+
+// 表单验证规则
+const formRules = {
+  trackingNumber: [{ required: true, message: '请输入运单号', trigger: 'blur' }],
+  complaintContent: [{ required: true, message: '请输入投诉内容', trigger: 'blur' }],
+  contact: [
+    { required: true, message: '请输入联系方式', trigger: 'blur' },
+    { pattern: /^[0-9]{11}$/, message: '请输入有效的电话号码', trigger: 'blur' }
+  ]
+};
+
+// 提交投诉
+const handleSubmit = () => {
+  error.value = null;  // 清除之前的错误
+
+  // 验证表单
+  const formRef = ref(null);
+  formRef.value.validate((valid) => {
+    if (valid) {
+      // 在此处发送请求到后端接口提交投诉数据
+      // 例如：axios.post('/api/complaint', form.value)
+
+      // 模拟提交成功
+      submitSuccess.value = true;
+      setTimeout(() => {
+        submitSuccess.value = false; // 3秒后隐藏提交成功提示
+        form.value = { trackingNumber: '', complaintContent: '', contact: '' }; // 清空表单
+      }, 3000);
+    } else {
+      error.value = '请填写所有必填项';
+    }
+  });
+};
+</script>
+
+<style scoped>
+.complaint-form {
+  max-width: 600px;
+  margin: 50px auto;
+  padding: 20px;
+  background: #fff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  text-align: center;
+}
+
+.form-container {
+  margin-bottom: 20px;
+}
+
+.el-alert {
+  margin-top: 20px;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/view/user/ExpressForm.vue b/src/view/user/ExpressForm.vue
index a911e4b..29c01fe 100644
--- a/src/view/user/ExpressForm.vue
+++ b/src/view/user/ExpressForm.vue
@@ -1,203 +1,241 @@
 <template>
-  <el-row class="main">
-    <!-- 寄件人面板 -->
-    <el-row class="panel send-panel send-panel1">
-      <el-row class="send-container">
-        <el-button class="send-btn">寄</el-button>
-        <el-row>
-          <el-button class="btn" @click="openAddressBook('sender')">地址簿</el-button>
-          <el-button class="btn" @click="autoFill('sender')">智能填写</el-button>
-        </el-row>
-      </el-row>
-      <el-form ref="formSender" label-width="auto" class="form" :model="sender" :rules="senderRules">
-        <el-form-item label="姓名" prop="name">
-          <el-input v-model="sender.name" placeholder="请填写发件人姓名"></el-input>
-        </el-form-item>
-        <el-form-item label="联系电话" prop="phone">
-          <el-input v-model="sender.phone" placeholder="请填写发件人联系电话"></el-input>
-        </el-form-item>
-        <el-form-item label="省市区" prop="region">
-          <el-input v-model="sender.address.region" placeholder="请填写发件人省市区"></el-input>
-        </el-form-item>
-        <el-form-item label="详细地址" prop="detail">
-          <el-input v-model="sender.address.detail" placeholder="请填写发件人详细地址"></el-input>
-        </el-form-item>
-        <el-form-item label="公司名称">
-          <el-input v-model="sender.company" placeholder="请填写发件人公司名称"></el-input>
-        </el-form-item>
-      </el-form>
-    </el-row>
-
-    <!-- 箭头图标 -->
-    <el-image class="arrow" src="/arrow.png"></el-image>
-
-    <!-- 收件人面板 -->
-    <el-row class="panel send-panel send-panel1">
-      <el-row class="send-container">
-        <el-button class="send-btn receive-btn">收</el-button>
-        <el-row>
-          <el-button class="btn" @click="openAddressBook('receiver')">地址簿</el-button>
-          <el-button class="btn" @click="autoFill('receiver')">智能填写</el-button>
-        </el-row>
-      </el-row>
-      <el-form ref="formReceiver" label-width="auto" class="form" :model="receiver" :rules="receiverRules">
-        <el-form-item label="姓名" prop="name">
-          <el-input v-model="receiver.name" placeholder="请填写收件人姓名"></el-input>
-        </el-form-item>
-        <el-form-item label="联系电话" prop="phone">
-          <el-input v-model="receiver.phone" placeholder="请填写收件人联系电话"></el-input>
-        </el-form-item>
-        <el-form-item label="省市区" prop="region">
-          <el-input v-model="receiver.address.region" placeholder="请填写收件人省市区"></el-input>
-        </el-form-item>
-        <el-form-item label="详细地址" prop="detail">
-          <el-input v-model="receiver.address.detail" placeholder="请填写收件人详细地址"></el-input>
-        </el-form-item>
-        <el-form-item label="公司名称">
-          <el-input v-model="receiver.company" placeholder="请填写收件人公司名称"></el-input>
-        </el-form-item>
-      </el-form>
-    </el-row>
-
-    <!-- 寄件方式 -->
-    <el-row class="panel send-panel">
-      <el-text class="send-label">寄件方式</el-text>
-      <el-row>
-        <el-radio-group v-model="shippingMethod">
-          <el-radio :label="1">预约上门取件</el-radio>
-          <el-radio :label="0">自行联系快递员</el-radio>
-        </el-radio-group>
-      </el-row>
-    </el-row>
-
-    <!-- 下单按钮 -->
-    <el-row class="panel send-panel">
-      <el-button class="confirm-btn" @click="submitOrder">下单</el-button>
-    </el-row>
-  </el-row>
+	<el-row class="main">
+		<!-- 发件人面板 -->
+		<el-row class="send-container">
+			<el-row class="panel send-panel send-panel1">
+				<el-row class="send-container">
+					<el-button class="send-btn">寄</el-button>
+					<el-row>
+						<el-button class="btn" @click="openAddressBook('sender')">地址簿</el-button>
+						<el-button class="btn" @click="autoFill('sender')">智能填写</el-button>
+					</el-row>
+				</el-row>
+				<el-form ref="formSender" label-width="auto" class="form" :model="sender" :rules="senderRules">
+					<el-form-item label="姓名" prop="name">
+						<el-input v-model="sender.name" placeholder="请填写发件人姓名"></el-input>
+					</el-form-item>
+					<el-form-item label="联系电话" prop="phone">
+						<el-input v-model="sender.phone" placeholder="请填写发件人联系电话"></el-input>
+					</el-form-item>
+					<el-form-item label="省市区" prop="region">
+						<el-input v-model="sender.region" placeholder="请填写发件人省市区"></el-input>
+					</el-form-item>
+					<el-form-item label="详细地址" prop="detail">
+						<el-input v-model="sender.detail" placeholder="请填写发件人详细地址"></el-input>
+					</el-form-item>
+					<el-form-item label="公司名称">
+						<el-input v-model="sender.company" placeholder="请填写发件人公司名称"></el-input>
+					</el-form-item>
+				</el-form>
+			</el-row>
+
+			<!-- 箭头图标 -->
+			<el-image class="arrow" src="/arrow.png"></el-image>
+
+			<!-- 收件人面板 -->
+			<el-row class="panel send-panel send-panel1">
+				<el-row class="send-container">
+					<el-button class="send-btn receive-btn">收</el-button>
+					<el-row>
+						<el-button class="btn" @click="openAddressBook('receiver')">地址簿</el-button>
+						<el-button class="btn" @click="autoFill('receiver')">智能填写</el-button>
+					</el-row>
+				</el-row>
+				<el-form ref="formReceiver" label-width="auto" class="form" :model="receiver" :rules="receiverRules">
+					<el-form-item label="姓名" prop="name">
+						<el-input v-model="receiver.name" placeholder="请填写收件人姓名"></el-input>
+					</el-form-item>
+					<el-form-item label="联系电话" prop="phone">
+						<el-input v-model="receiver.phone" placeholder="请填写收件人联系电话"></el-input>
+					</el-form-item>
+					<el-form-item label="省市区" prop="region">
+						<el-input v-model="receiver.region" placeholder="请填写收件人省市区"></el-input>
+					</el-form-item>
+					<el-form-item label="详细地址" prop="detail">
+						<el-input v-model="receiver.detail" placeholder="请填写收件人详细地址"></el-input>
+					</el-form-item>
+					<el-form-item label="公司名称">
+						<el-input v-model="receiver.company" placeholder="请填写收件人公司名称"></el-input>
+					</el-form-item>
+				</el-form>
+			</el-row>
+		</el-row>
+
+		<!-- 寄件方式 -->
+		<el-row class="panel send-panel">
+			<el-text class="send-label">寄件方式</el-text>
+			<el-row>
+				<el-radio-group v-model="shippingMethod">
+					<el-radio :label="1">预约上门取件</el-radio>
+					<el-radio :label="0">自行联系快递员</el-radio>
+				</el-radio-group>
+			</el-row>
+		</el-row>
+
+		<!-- 下单按钮 -->
+		<el-row class="panel send-panel">
+			<el-button class="confirm-btn" @click="submitOrder">下单</el-button>
+		</el-row>
+	</el-row>
 </template>
 
 <script setup>
 import { ref } from 'vue';
+import { ElMessage } from 'element-plus'; // 引入提示组件
 
+const formSender = ref(null);
+const formReceiver = ref(null);
 // 定义寄件人和收件人的数据
 const sender = ref({
-  name: '',
-  phone: '',
-  address: {
-    region: '',
-    detail: ''
-  },
-  company: ''
+	name: '',
+	phone: '',
+	region: '',
+	detail: '',
+	company: ''
 });
 
 const receiver = ref({
-  name: '',
-  phone: '',
-  address: {
-    region: '',
-    detail: ''
-  },
-  company: ''
+	name: '',
+	phone: '',
+	region: '',
+	detail: '',
+	company: ''
 });
 
 const shippingMethod = ref(1); // 默认选择预约上门取件
 
 // 表单验证规则
 const senderRules = {
-  name: [{ required: true, message: '请输入发件人姓名', trigger: 'blur' }],
-  phone: [{ required: true, message: '请输入发件人联系电话', trigger: 'blur' }],
-  region: [{ required: true, message: '请输入发件人省市区', trigger: 'blur' }],
-  detail: [{ required: true, message: '请输入发件人详细地址', trigger: 'blur' }]
+	name: [{ required: true, message: '请输入发件人姓名', trigger: 'blur' }],
+	phone: [{ required: true, message: '请输入发件人联系电话', trigger: 'blur' }],
+	region: [{ required: true, message: '请输入发件人省市区', trigger: 'blur' }],
+	detail: [{ required: true, message: '请输入发件人详细地址', trigger: 'blur' }]
 };
 
 const receiverRules = {
-  name: [{ required: true, message: '请输入收件人姓名', trigger: 'blur' }],
-  phone: [{ required: true, message: '请输入收件人联系电话', trigger: 'blur' }],
-  region: [{ required: true, message: '请输入收件人省市区', trigger: 'blur' }],
-  detail: [{ required: true, message: '请输入收件人详细地址', trigger: 'blur' }]
+	name: [{ required: true, message: '请输入收件人姓名', trigger: 'blur' }],
+	phone: [{ required: true, message: '请输入收件人联系电话', trigger: 'blur' }],
+	region: [{ required: true, message: '请输入收件人省市区', trigger: 'blur' }],
+	detail: [{ required: true, message: '请输入收件人详细地址', trigger: 'blur' }]
 };
 
 // 地址簿和智能填写的处理方法
 const openAddressBook = (type) => {
-  console.log(`${type} 地址簿点击`);
+	console.log(`${type} 地址簿点击`);
 };
 
 const autoFill = (type) => {
-  console.log(`${type} 智能填写点击`);
+	console.log(`${type} 智能填写点击`);
 };
 
 // 提交订单的处理函数
 const submitOrder = () => {
-  // 获取表单实例
-  const formSender = document.querySelector('#formSender');
-  const formReceiver = document.querySelector('#formReceiver');
-
-  // 校验发件人和收件人的表单
-  formSender.validate((valid) => {
-    if (!valid) return;
-  });
-  
-  formReceiver.validate((valid) => {
-    if (!valid) return;
+  formSender.value.validate((senderValid) => {
+    if (!senderValid) {
+      ElMessage.error('请完整填写寄件人信息！');
+      return;
+    }
+
+    formReceiver.value.validate((receiverValid) => {
+      if (!receiverValid) {
+        ElMessage.error('请完整填写收件人信息！');
+        return;
+      }
+
+      ElMessage.success('下单成功！');
+      resetForm();
+    });
   });
+};
 
-  // 提交订单信息
-  console.log('订单提交:', sender.value, receiver.value, shippingMethod.value);
+// 清空表单
+const resetForm = () => {
+	sender.value = {
+		name: '',
+		phone: '',
+		address: {
+			region: '',
+			detail: ''
+		},
+		company: ''
+	};
+
+	receiver.value = {
+		name: '',
+		phone: '',
+		address: {
+			region: '',
+			detail: ''
+		},
+		company: ''
+	};
+
+	shippingMethod.value = 1;
 };
 </script>
 
+
 <style scoped>
-  .send-btn {
-    border-radius: 100%;
-    padding: 10px;
-    background-color: black;
-    color: white;
-  }
-  .receive-btn {
-    background-color: red;
-    color: white;
-  }
-  .btn {
-    background-color: white;
-  }
-  .send-container {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .panel {
-    display: flex;
-    flex-direction: column;
-    background-color: white;
-    justify-content: center;
-    align-items: flex-start;
-  }
-  .send-panel {
-    margin-top: 10px;
-    padding: 10px;
-    width: 100%;
-    line-height: 40px;
-  }
-  .send-panel1 {
-    width: 40%;
-    align-items: center;
-  }
-  .form {
-    width: 80%;
-    margin-top: 10px;
-  }
-  .arrow {
-    width: 40px;
-    height: 10px;
-  }
-  .send-label {
-    font-weight: 600;
-  }
-  .confirm-btn {
-    background-color: royalblue;
-    color: white;
-  }
+.send-btn {
+	border-radius: 100%;
+	padding: 10px;
+	background-color: black;
+	color: white;
+}
+
+.receive-btn {
+	background-color: red;
+	color: white;
+}
+
+.btn {
+	background-color: white;
+}
+
+.send-container {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.panel {
+	display: flex;
+	flex-direction: column;
+	background-color: white;
+	justify-content: center;
+	align-items: flex-start;
+}
+
+.send-panel {
+	margin-top: 10px;
+	padding: 10px;
+	width: 100%;
+	line-height: 40px;
+}
+
+.send-panel1 {
+	width: 40%;
+	align-items: center;
+}
+
+.form {
+	width: 80%;
+	margin-top: 10px;
+}
+
+.arrow {
+	width: 40px;
+	height: 10px;
+}
+
+.send-label {
+	font-weight: 600;
+}
+
+.confirm-btn {
+	background-color: royalblue;
+	color: white;
+}
 </style>
diff --git a/src/view/user/ExpressList.vue b/src/view/user/ExpressList.vue
deleted file mode 100644
index 6b16741..0000000
--- a/src/view/user/ExpressList.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-	<el-row class="page">
-		<el-row class="block-view" v-for="(item,index) in expressList">
-			<el-row class="top">
-				<el-row>运单号：{{item.express_no}}</el-row>
-				<el-row class="top-time">签收时间：{{item.s_datetime}}</el-row>
-			</el-row>
-			<el-row class="express-view">
-				<el-row class="express-no-view">
-					<el-text class="city">{{item.senderCity}}</el-text>
-					<el-text class="user">{{item.senderName}}</el-text>
-				</el-row>
-				<el-row class="express-no-view">
-					<el-image class="arrow" src="/arrow.png"></el-image>
-					<el-text class="sign">已签收</el-text>
-				</el-row>
-				<el-row class="express-no-view">
-					<el-text class="city">{{item.receiveCity}}</el-text>
-					<el-text class="user">{{item.receiveName}}</el-text>
-				</el-row>
-				<el-row class="express-icon-view">
-					<el-icon>
-						<Delete />
-					</el-icon>
-					<el-icon>
-						<Edit />
-					</el-icon>
-				</el-row>
-				<el-row class="Line-view"></el-row>
-			</el-row>
-		</el-row>
-	</el-row>
-</template>
-
-<script setup>
-	import {
-		Delete,
-		Edit
-	} from '@element-plus/icons-vue'
-	import {
-		reactive
-	} from 'vue';
-	const expressList = reactive([
-		{
-			"express_no":"SF12313123123",
-			"senderCity":"深圳市",
-			"senderName":"高先生1",
-			"receiveCity":"福州市",
-			"receiveName":"叶先生",
-			"s_datetime":"2024-11-11 11:11:11"
-		},
-		{
-			"express_no":"SF12313123123",
-			"senderCity":"深圳市",
-			"senderName":"高先生2",
-			"receiveCity":"福州市",
-			"receiveName":"叶先生",
-			"s_datetime":"2024-11-11 11:11:11"
-		},
-		{
-			"express_no":"SF12313123123",
-			"senderCity":"深圳市",
-			"senderName":"高先生3",
-			"receiveCity":"福州市",
-			"receiveName":"叶先生",
-			"s_datetime":"2024-11-11 11:11:11"
-		},
-		{
-			"express_no":"SF12313123123",
-			"senderCity":"深圳市",
-			"senderName":"高先生4",
-			"receiveCity":"福州市",
-			"receiveName":"叶先生",
-			"s_datetime":"2024-11-11 11:11:11"
-		}
-	])
-</script>
-
-<style>
-	.page {
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		background-color: white;
-		line-height: 20px;
-	}
-
-	.block-view {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.top {
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-start;
-		padding: 20px;
-		color: gray;
-	}
-
-	.top-time {
-		margin-left: 180px;
-	}
-
-	.express-view {
-		display: flex;
-		width: 100%;
-		justify-content: space-around;
-	}
-
-	.express-no-view {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.city {
-		font-size: large;
-		font-weight: 500;
-	}
-
-	.user {
-		margin-top: 10px;
-		font-size: small;
-		color: gray;
-	}
-
-	.arrow {
-		width: 40px;
-		height: 10px;
-	}
-
-	.sign {
-		font-size: small;
-		margin-top: 10px;
-		color: red;
-		font-weight: 100;
-	}
-
-	.express-icon-view {
-		width: 10%;
-		display: flex;
-		justify-content: space-around;
-	}
-
-	.Line-view {
-		height: 0.5px;
-		width: 95%;
-		background-color: lightgray;
-		margin-top: 20px;
-		margin-bottom: 20px;
-	}
-</style>
\ No newline at end of file
diff --git a/src/view/user/Home.vue b/src/view/user/Home.vue
new file mode 100644
index 0000000..e3b5270
--- /dev/null
+++ b/src/view/user/Home.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="user-home-page">
+	  <section class="welcome-banner">
+	  	<h1>欢迎使用旭日快递用户系统</h1>
+	  	<p>在这里您可以查看快递状况、下单快递。</p>
+	  </section>
+    <!-- 用户信息部分 -->
+    <section class="user-info">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-card class="user-card">
+            <div class="user-title">用户名</div>
+            <div class="user-value">{{ username }}</div>
+          </el-card>
+        </el-col>
+        <el-col :span="8">
+          <el-card class="user-card">
+            <div class="user-title">账户余额</div>
+            <div class="user-value">{{ balance }} 元</div>
+          </el-card>
+        </el-col>
+        <el-col :span="8">
+          <el-card class="user-card">
+            <div class="user-title">最近登录</div>
+            <div class="user-value">{{ lastLogin }}</div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </section>
+
+    <!-- 快递状态部分 -->
+    <section class="express-status">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-card class="status-card">
+            <div class="status-title">最新快递</div>
+            <div class="status-value">{{ latestExpress }}</div>
+            <el-button type="text" @click="goToPage('/express/detail')">查看详情</el-button>
+          </el-card>
+        </el-col>
+        <el-col :span="8">
+          <el-card class="status-card">
+            <div class="status-title">当前订单</div>
+            <div class="status-value">{{ currentOrderStatus }}</div>
+            <el-button type="text" @click="goToPage('/express/ongoing')">查看详情</el-button>
+          </el-card>
+        </el-col>
+        <el-col :span="8">
+          <el-card class="status-card">
+            <div class="status-title">已完成订单</div>
+            <div class="status-value">{{ completedOrders }}</div>
+            <el-button type="text" @click="goToPage('/express/completed')">查看详情</el-button>
+          </el-card>
+        </el-col>
+      </el-row>
+    </section>
+
+    <!-- 常用功能区 -->
+    
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+// 用户信息
+const username = ref('张三');
+const balance = ref(100.5); // 账户余额
+const lastLogin = ref('2024年11月19日 10:00');
+
+// 快递状态
+const latestExpress = ref('快递001：正在运输中');
+const currentOrderStatus = ref('快递002：待取件');
+const completedOrders = ref(25);
+
+// 跳转到指定页面
+const router = useRouter();
+const goToPage = (path) => {
+  router.push(path);
+};
+</script>
+
+<style scoped>
+.user-home-page {
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.user-info,
+.express-status {
+  margin-bottom: 30px;
+}
+
+.user-card,
+.status-card {
+  text-align: center;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.user-title,
+.status-title {
+  font-size: 18px;
+  color: #606266;
+  margin-bottom: 10px;
+}
+
+.user-value,
+.status-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #409EFF;
+}
+
+.quick-actions {
+  margin-top: 30px;
+  text-align: center;
+}
+
+.el-button {
+  width: 100%;
+  padding: 15px 0;
+}
+
+.el-row {
+  margin-top: 10px;
+}
+
+.el-card {
+  cursor: pointer;
+}
+
+.el-card:hover {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+.welcome-banner h1 {
+	font-size: 24px;
+	margin: 0;
+}
+</style>
diff --git a/src/view/user/Index.vue b/src/view/user/Index.vue
index 57d1223..8094f7b 100644
--- a/src/view/user/Index.vue
+++ b/src/view/user/Index.vue
@@ -1,82 +1,77 @@
 <template>
-	<div class="common-layout">
+	<div id="app">
+		<!-- Top Navigation Bar -->
+		<el-header class="top-nav" mode="horizontal">
+			<div class="logo">
+				<img src="../../assets/logo.png" alt="Logo" class="logo-image">
+				<span class="title">旭日快递</span>
+			</div>
+						<div class="user-controls">
+							<span class="welcome-message">欢迎您！158****1626</span>
+							<el-button type="text" class="logout-button" @click="logout">退出</el-button>
+						</div>
+		</el-header>
+
+		<!-- Main Container -->
 		<el-container>
-			<el-header>
-				<el-menu class="el-menu-demo" mode="horizontal">
-					<el-menu-item index="1">
-						<el-image class="logo" src="/logo.png"></el-image>
-					</el-menu-item>
-					<el-menu-item index="2">
-						<el-text>首页</el-text>
-					</el-menu-item>
-					<el-menu-item index="3">
-						<el-sub-menu index="2">
-							<template #title>物流服务</template>
-							<el-menu-item index="2-1">即时服务</el-menu-item>
-							<el-menu-item index="2-2">快递服务</el-menu-item>
-						</el-sub-menu>
-					</el-menu-item>
-					<el-menu-item index="4">欢迎您：158****1626 我的顺丰</el-menu-item>
+			<!-- Sidebar -->
+			<el-aside width="200px" class="sidebar">
+				<el-menu :default-active="activeSidebarMenu" class="side-menu" @select="handleSidebarMenuSelect" router>
+					<el-menu-item index="Head">首页</el-menu-item>
+					<el-submenu index="1">
+						<template #title>快递管理</template>
+						<el-menu-item index="ExpressForm">寄快递</el-menu-item>
+						<el-menu-item index="OrderManagement">快递列表</el-menu-item>
+						<el-menu-item index="ShipmentQuery">运单查询</el-menu-item>
+					</el-submenu>
+					<el-submenu index="2">
+						<template #title>用户管理</template>
+						<el-menu-item index="userProfile">用户资料</el-menu-item>
+						<el-menu-item index="Address">地址簿</el-menu-item>
+					</el-submenu>
+					<el-menu-item index="CourierComplaint">快递投诉</el-menu-item>
 				</el-menu>
-			</el-header>
-			<el-container>
-				<el-aside width="200px">
-					<el-row class="tac">
-						<el-col>
-							<el-menu default-active="2" class="el-menu-vertical-demo">
-								<el-sub-menu index="1">
-									<template #title>
-										<el-icon>
-											<location />
-										</el-icon>
-										<span>我要寄件</span>
-									</template>
-									<el-menu-item-group>
-										<router-link to="/user/expressForm">
-										<el-menu-item index="1-1">寄快递</el-menu-item>
-										</router-link>
-										<el-menu-item index="1-2">批量寄</el-menu-item>
-									</el-menu-item-group>
-								</el-sub-menu>
-								<el-menu-item index="2">
-									<router-link to="/user/expressList">
-										<el-icon><icon-menu /></el-icon>
-										<span>运单查询</span>
-									</router-link>
-								</el-menu-item>
-								<el-menu-item index="3">
-									<router-link to="/user/myInfo">
-										<el-icon>
-											<setting />
-										</el-icon>
-										<span>我的资料</span>
-									</router-link>
-								</el-menu-item>
-							</el-menu>
-						</el-col>
-					</el-row>
-				</el-aside>
-				<el-main>
-					<router-view></router-view>
-				</el-main>
-			</el-container>
+			</el-aside>
+
+			<!-- Content Area -->
+			<el-main class="content-area">
+				<router-view></router-view>
+			</el-main>
 		</el-container>
 	</div>
-
 </template>
 
-<script lang="ts" setup>
-	import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'
-	const handleOpen = (key : string, keyPath : string[]) => {
-		console.log(key, keyPath)
-	}
-	const handleClose = (key : string, keyPath : string[]) => {
-		console.log(key, keyPath)
-	}
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const activeTopMenu = ref('dashboard');
+const activeSidebarMenu = ref('/home');
+const router = useRouter();
+
+// Top menu item selection handler
+const handleTopMenuSelect = (index) => {
+	activeTopMenu.value = index;
+};
+
+// Sidebar menu item selection handler
+const handleSidebarMenuSelect = (index) => {
+	activeSidebarMenu.value = index;
+	router.push(index); // Navigate to selected route
+};
+
+// Logout function
+const logout = () => {
+	// Clear user session or token (if any)
+	localStorage.removeItem('userToken'); // Example: Remove stored token
+
+	// Redirect to login page
+	router.push('/login');
+};
 </script>
 
-<style>
-	.common-layout {
+<style scoped>
+	#app {
 		position: absolute;
 		top: 0;
 		right: 0;
@@ -84,46 +79,84 @@
 		left: 0;
 	}
 
-	.el-header,
-	.el-footer {
-		background-color: white;
-		color: #333;
-		text-align: center;
-		line-height: 60px;
+	.top-nav {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 30px;
+		background-color: #409EFF;
+		color: white;
+		align-items: center;
+		height: 80px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	}
+
+	.logo {
+		display: flex;
+		align-items: center;
 	}
 
-	.el-aside {
-		background-color: #d9ecff;
-		color: #333;
-		text-align: center;
-		line-height: 200px;
+	.logo-image {
+		width: 40px;
+		margin-right: 10px;
 	}
 
-	.el-main {
-		background-color: #ecf5ff;
-		color: #333;
-		text-align: center;
-		line-height: 160px;
+	.title {
+		font-size: 1.5em;
+		font-weight: bold;
 	}
 
-	body>.el-container {
-		marigin-bottom: 40px;
+	.top-menu {
+		color: white;
 	}
 
-	.el-container:nth-child(5).elaside,
-	.el-container:nth-child(6).el-side {
-		line-height: 260px;
+	.el-menu-item {
+		padding: 0 20px;
 	}
 
-	.el-container:nth-child(7).el-side {
-		line-height: 320px;
+	.logout-button {
+		color: white;
+		font-size: 1em;
+		margin-left: 20px;
 	}
 
-	.el-menu--horizontal>.el-menu-item:nth-child(3) {
-		margin-right: auto;
+	.sidebar {
+		background-color: #f5f7fa;
+		padding: 20px 0;
+		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
 	}
 
-	.logo {
-		height: 55px
+	.side-menu {
+		height: 100%;
+		border-right: none;
+	}
+
+	.side-menu .el-menu-item,
+	.side-menu .el-submenu__title {
+		font-size: 16px;
+		padding: 15px 20px;
+	}
+
+	.side-menu .el-menu-item:hover,
+	.side-menu .el-submenu__title:hover {
+		background-color: #e5f1fb;
+		color: #409EFF;
+	}
+
+	.content-area {
+		padding: 20px 30px;
+		background-color: #ffffff;
+		box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.05);
+		border-radius: 6px;
+		margin: 20px;
+		overflow-y: auto;
+	}
+
+	.el-menu-item.is-active {
+		color: #409EFF !important;
+		background-color: #e5f1fb;
 	}
-</style>
\ No newline at end of file
+	.user-controls {
+			display: flex;
+			align-items: center;
+		}
+</style>
diff --git a/src/view/user/MyInfo.vue b/src/view/user/MyInfo.vue
deleted file mode 100644
index 16b9e89..0000000
--- a/src/view/user/MyInfo.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-	<el-row class="top">
-		<el-col :span="6" class="col">个人信息</el-col>
-		<el-col :span="6" class="col-exit">注销账号</el-col>
-	</el-row>
-	<el-row class="body">
-		<el-image class="user-img" src="/user.png"></el-image>
-		<e-text class="phone">158XXXXXXXX</e-text>
-		<el-form label-width="auto" style="max-width:600px">
-			<el-form-item label="性别">
-				<el-select placeholder="请选择性别"  v-model="value">
-					 <el-option
-					        v-for="item in options"
-					        :key="item.value"
-					        :label="item.label"
-					        :value="item.value"
-					      />
-				</el-select>
-			</el-form-item>
-			<el-form-item label="生日">
-				<el-date-picker
-				         v-model="value1"
-						 type="date"
-						 placeholder="请选择一个日期"
-						 :size="20"
-				/>
-			</el-form-item>
-			<el-form-item label="地区">
-				<el-cascader
-				    v-model="selectedRegion"
-				    :options="optionRegion"
-				    placeholder="请选择地区"
-				  ></el-cascader>
-			</el-form-item>
-			<el-form-item label="绑定电话">
-				<el-input v-model="phone"/>
-			</el-form-item>
-		</el-form>
-	</el-row>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-	const value1=ref(new Date())
-	const value =ref('')
-	const phone=ref('')
-	const options = [
-	  {
-	    value: '男',
-	    label: '男',
-	  },
-	  {
-	    value: '女',
-	    label: '女',
-	  },
-	  ]
-	  // 选中地区的值
-	  const selectedRegion = ref([]);
-	  
-	  // 级联选择器的数据，包含省、市、区三级数据结构
-	  const optionRegion = ref([
-	    {
-	      value: 'beijing',
-	      label: '北京',
-	      children: [
-	        {
-	          value: 'chaoyang',
-	          label: '朝阳区',
-	          children: [
-	            { value: 'subdistrict1', label: '某街道1' },
-	            { value: 'subdistrict2', label: '某街道2' }
-	          ]
-	        },
-	        {
-	          value: 'haidian',
-	          label: '海淀区',
-	          children: [
-	            { value: 'subdistrict3', label: '某街道3' },
-	            { value: 'subdistrict4', label: '某街道4' }
-	          ]
-	        }
-	      ]
-	    },
-	    {
-	      value: 'shanghai',
-	      label: '上海',
-	      children: [
-	        {
-	          value: 'pudong',
-	          label: '浦东新区',
-	          children: [
-	            { value: 'subdistrict5', label: '某街道5' },
-	            { value: 'subdistrict6', label: '某街道6' }
-	          ]
-	        }
-	      ]
-	    }
-	  ]);
-</script>
-
-<style>
-	.top{
-		background-color: white;
-		height: 50px;
-		flex-wrap: nowrap;
-		justify-content: space-between;
-		align-items:center;
-		border-radius: 10px;
-	}
-	.col{
-		font-size: 20px;
-		padding-left: 20px;
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-start;
-	}
-	.col-exit{
-		font-size: 12px;
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-end;
-		padding-right: 20px;
-	}
-	.body{
-		margin-top: 20px;
-		background-color: white;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		line-height: 0px;
-		height: 78vh;
-	}
-	.user-img{
-		width: 100px;
-		height: 100px;
-	}
-	.phone{
-		margin-top: 20px;
-		font-size: 14px;
-		margin-bottom: 20px;
-	}
-</style>
\ No newline at end of file
diff --git a/src/view/user/OrderManagement.vue b/src/view/user/OrderManagement.vue
new file mode 100644
index 0000000..ef9c162
--- /dev/null
+++ b/src/view/user/OrderManagement.vue
@@ -0,0 +1,240 @@
+<template>
+	<el-row class="page">
+		<el-row class="header">
+			<h2>快递列表</h2>
+		</el-row>
+		<!-- 遍历显示 expressList 中的每个快递信息 -->
+		<el-row class="block-view" v-for="(item, index) in expressList" :key="index">
+			<!-- 顶部信息，包括运单号和签收时间 -->
+			<el-row class="top">
+				<el-row>运单号：{{ item.express_no }}</el-row>
+				<el-row class="top-time">签收时间：{{ item.s_datetime }}</el-row>
+			</el-row>
+			<!-- 快递信息区域 -->
+			<el-row class="express-view">
+				<!-- 寄件人信息 -->
+				<el-row class="express-no-view">
+					<el-text class="city">{{ item.senderCity }}</el-text>
+					<el-text class="user">{{ item.senderName }}</el-text>
+				</el-row>
+				<!-- 箭头及签收状态 -->
+				<el-row class="express-no-view">
+					<el-image class="arrow" src="/arrow.png"></el-image>
+					<el-text class="sign">已签收</el-text>
+				</el-row>
+				<!-- 收件人信息 -->
+				<el-row class="express-no-view">
+					<el-text class="city">{{ item.receiveCity }}</el-text>
+					<el-text class="user">{{ item.receiveName }}</el-text>
+				</el-row>
+				<!-- 操作图标（删除和编辑） -->
+				<el-row class="express-icon-view">
+					<el-icon @click="deleteByIndex(index)">
+						<Delete />
+					</el-icon>
+					<el-icon @click="modify(item,index)">
+						<Edit />
+					</el-icon>
+				</el-row>
+			</el-row>
+			<!-- 分割线 -->
+			<el-row class="line-view"></el-row>
+		</el-row>
+		<el-dialog v-model="dialogVisible" title="警告" width="500">
+			<span>确定要删除此条快递信息吗？</span>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="dialogVisible = false">取消</el-button>
+					<el-button type="primary" @click="deleteByIndexConfirm()">
+						确定
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+		
+		<el-dialog v-model="dialogFormVisible" title="编辑快件表单" width="500">
+			<el-form :model="form">
+				<el-form-item label="寄件城市" :label-width="formLabelWidth">
+					<el-input v-model="form.senderCity" autocomplete="off" />
+				</el-form-item>
+				<el-form-item label="寄件人" :label-width="formLabelWidth">
+					<el-input v-model="form.senderName" autocomplete="off" />
+				</el-form-item>
+				<el-form-item label="收件城市" :label-width="formLabelWidth">
+					<el-input v-model="form.receiveCity" autocomplete="off" />
+				</el-form-item>
+				<el-form-item label="收件人" :label-width="formLabelWidth">
+					<el-input v-model="form.receiveName" autocomplete="off" />
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="dialogFormVisible = false">取消</el-button>
+					<el-button type="primary" @click="modifyConfirm()">
+						确认
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</el-row>
+</template>
+
+<script setup>
+	import {
+		Delete,
+		Edit
+	} from '@element-plus/icons-vue';
+	import {
+		reactive,ref
+	} from 'vue';
+
+	// 定义快递列表数据
+	const expressList = reactive([{
+			express_no: "SF12313123123",
+			senderCity: "深圳市",
+			senderName: "高先生1",
+			receiveCity: "福州市",
+			receiveName: "叶先生",
+			s_datetime: "2024-11-11 11:11:11"
+		},
+		{
+			express_no: "SF22313123124",
+			senderCity: "广州市",
+			senderName: "王小姐",
+			receiveCity: "上海市",
+			receiveName: "张先生",
+			s_datetime: "2024-11-11 14:15:00"
+		},
+		{
+			express_no: "SF32313123125",
+			senderCity: "杭州市",
+			senderName: "李女士",
+			receiveCity: "北京市",
+			receiveName: "周女士",
+			s_datetime: "2024-11-12 09:30:00"
+		}
+	]);
+	const dialogVisible = ref(false)
+	let formIndex = -1
+	const deleteByIndex = index => {
+		dialogVisible.value = true
+		formIndex = index
+	}
+	const deleteByIndexConfirm = () => {
+		dialogVisible.value = false
+		expressList.splice(formIndex, 1)
+	}
+	const dialogFormVisible= ref(false)
+	const formLabelWidth = '140px'
+	const form = reactive({
+		"express_no": "",
+		"senderCity": "",
+		"senderName": "",
+		"receiveCity": "",
+		"receiveName": "",
+		"s_datetime": ""
+	})
+	const modify= (item,index)=>{
+		dialogFormVisible.value = true
+		form.senderCity = item.senderCity
+		form.senderName = item.senderName
+		form.receiveCity = item.receiveCity
+		form.receiveName = item.receiveName
+		formIndex = index
+	}
+	const modifyConfirm = ()=>{
+		dialogFormVisible.value = false
+		const item = expressList[formIndex]
+		item.senderCity = form.senderCity
+		item.senderName = form.senderName
+		item.receiveCity = form.receiveCity
+		item.receiveName = form.receiveName
+	}
+</script>
+
+<style scoped>
+	.page {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		background-color: white;
+		padding: 20px;
+		line-height: 20px;
+	}
+
+	.header {
+		text-align: center;
+		margin-bottom: 20px;
+	}
+
+	.block-view {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 20px;
+		border-bottom: 1px solid #ebebeb;
+	}
+
+	.top {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		padding: 10px;
+		color: gray;
+	}
+
+	.top-time {
+		margin-left: 180px;
+	}
+
+	.express-view {
+		display: flex;
+		width: 100%;
+		justify-content: space-around;
+		padding: 10px 0;
+	}
+
+	.express-no-view {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+	}
+
+	.city {
+		font-size: large;
+		font-weight: 500;
+	}
+
+	.user {
+		margin-top: 5px;
+		font-size: small;
+		color: gray;
+	}
+
+	.arrow {
+		width: 40px;
+		height: 10px;
+	}
+
+	.sign {
+		font-size: small;
+		margin-top: 5px;
+		color: red;
+		font-weight: bold;
+	}
+
+	.express-icon-view {
+		width: 10%;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+	}
+
+	.line-view {
+		height: 0.5px;
+		width: 95%;
+		background-color: lightgray;
+		margin-top: 10px;
+	}
+</style>
\ No newline at end of file
diff --git a/src/view/user/ShipmentQuery.vue b/src/view/user/ShipmentQuery.vue
new file mode 100644
index 0000000..c4dae5c
--- /dev/null
+++ b/src/view/user/ShipmentQuery.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="shipment-query">
+    <h2>运单查询</h2>
+    <el-form :model="form" label-width="120px" class="query-form">
+      <!-- 运单号输入框 -->
+      <el-form-item label="运单号" prop="trackingNumber">
+        <el-input v-model="form.trackingNumber" placeholder="请输入运单号" clearable></el-input>
+      </el-form-item>
+      <!-- 查询按钮 -->
+      <el-form-item>
+        <el-button type="primary" @click="handleQuery">查询</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 查询结果展示 -->
+    <el-card v-if="shipment" class="shipment-info">
+      <p><strong>运单号：</strong>{{ shipment.trackingNumber }}</p>
+      <p><strong>发货人：</strong>{{ shipment.sender }}</p>
+      <p><strong>收货人：</strong>{{ shipment.receiver }}</p>
+      <p><strong>当前状态：</strong>{{ shipment.status }}</p>
+      <p><strong>预计到达：</strong>{{ shipment.estimatedArrival }}</p>
+    </el-card>
+
+    <!-- 错误提示 -->
+    <el-alert v-if="error" type="error" :title="error" show-icon></el-alert>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ElForm, ElFormItem, ElInput, ElButton, ElCard, ElAlert } from 'element-plus';
+
+// 定义响应式数据
+const form = ref({
+  trackingNumber: ''
+});
+
+const shipment = ref(null);
+const error = ref(null);
+
+// 模拟的运单数据
+const mockShipments = [
+  {
+    trackingNumber: 'SF12313123123',
+    sender: '高先生',
+    receiver: '叶先生',
+    status: '运输中',
+    estimatedArrival: '2024-11-18'
+  },
+  {
+    trackingNumber: 'SF45645645656',
+    sender: '陈先生',
+    receiver: '叶先生',
+    status: '运输中',
+    estimatedArrival: '2024-11-16'
+  }
+];
+
+// 查询函数
+const handleQuery = () => {
+  error.value = null;  // 清除之前的错误
+  const trackingNumber = form.value.trackingNumber.trim();
+  if (!trackingNumber) {
+    error.value = '请输入有效的运单号';
+    shipment.value = null;
+    return;
+  }
+
+  // 查找运单
+  const foundShipment = mockShipments.find(shipment => shipment.trackingNumber === trackingNumber);
+  
+  if (foundShipment) {
+    shipment.value = foundShipment;
+  } else {
+    error.value = '未找到该运单号的信息';
+    shipment.value = null;
+  }
+};
+</script>
+
+<style scoped>
+.shipment-query {
+  max-width: 600px;
+  margin: 50px auto;
+  text-align: center;
+}
+
+.query-form {
+  margin-bottom: 20px;
+}
+
+.shipment-info {
+  margin-top: 20px;
+  text-align: left;
+}
+
+.el-alert {
+  margin-top: 20px;
+}
+</style>
diff --git a/src/view/user/userProfile.vue b/src/view/user/userProfile.vue
new file mode 100644
index 0000000..2c6389d
--- /dev/null
+++ b/src/view/user/userProfile.vue
@@ -0,0 +1,176 @@
+<template>
+	<el-row class="top">
+		<el-col :span="6" class="col">用户资料</el-col>
+		<el-col :span="6" class="col-exit">
+			<el-button type="text" @click="logout">注销账号</el-button>
+		</el-col>
+	</el-row>
+	<el-row class="body">
+		<el-image class="user-img" src="/user.png"></el-image>
+		<div class="user-info">
+			<e-text class="username">{{ username }}</e-text>
+			<e-text class="email">{{ email }}</e-text>
+		</div>
+		<el-form label-width="auto" style="max-width:600px">
+			<el-form-item label="性别">
+				<el-select placeholder="请选择性别" v-model="gender">
+					<el-option v-for="item in genderOptions" :key="item.value" :label="item.label"
+						:value="item.value" />
+				</el-select>
+			</el-form-item>
+			<el-form-item label="生日">
+				<el-date-picker v-model="birthdate" type="date" placeholder="请选择生日" :size="20" />
+			</el-form-item>
+			<el-form-item label="地区">
+				<el-cascader v-model="selectedRegion" :options="optionRegion" placeholder="请选择地区"></el-cascader>
+			</el-form-item>
+			<el-form-item label="电话">
+				<el-input v-model="phone" />
+			</el-form-item>
+			<el-form-item>
+				<el-button type="primary" @click="updateProfile">保存修改</el-button>
+			</el-form-item>
+		</el-form>
+	</el-row>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue';
+	import { useUserStore } from '../../store/user';
+	const userStore = useUserStore();
+	const username = userStore.username;
+	const email = userStore.email;
+	const gender = ref(userStore.gender);
+	const birthdate = ref(userStore.birthdate);
+	const phone = ref(userStore.phone);
+	const selectedRegion = ref(userStore.selectedRegion);
+	const genderOptions = [{
+			value: '男',
+			label: '男'
+		},
+		{
+			value: '女',
+			label: '女'
+		},
+	];
+
+	const optionRegion = ref([{
+			value: 'beijing',
+			label: '北京',
+			children: [{
+					value: 'chaoyang',
+					label: '朝阳区',
+					children: [{
+							value: 'subdistrict1',
+							label: '某街道1'
+						},
+						{
+							value: 'subdistrict2',
+							label: '某街道2'
+						},
+					],
+				},
+				{
+					value: 'haidian',
+					label: '海淀区',
+					children: [{
+							value: 'subdistrict3',
+							label: '某街道3'
+						},
+						{
+							value: 'subdistrict4',
+							label: '某街道4'
+						},
+					],
+				},
+			],
+		},
+		{
+			value: 'shanghai',
+			label: '上海',
+			children: [{
+				value: 'pudong',
+				label: '浦东新区',
+				children: [{
+						value: 'subdistrict5',
+						label: '某街道5'
+					},
+					{
+						value: 'subdistrict6',
+						label: '某街道6'
+					},
+				],
+			}, ],
+		},
+	]);
+
+	const logout = () => {
+		// 注销逻辑
+		console.log("已注销");
+	};
+
+	const updateProfile = () => {
+	  userStore.updateProfile({
+	    username: userStore.username,
+	    email: userStore.email,
+	    gender: gender.value,
+	    birthdate: birthdate.value,
+	    phone: phone.value,
+	    selectedRegion: selectedRegion.value,
+	  });
+	  console.log('用户资料已更新');
+	};
+</script>
+
+<style>
+	.top {
+		background-color: white;
+		height: 50px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-radius: 10px;
+	}
+
+	.col {
+		font-size: 20px;
+		padding-left: 20px;
+	}
+
+	.col-exit {
+		font-size: 12px;
+		padding-right: 20px;
+		text-align: right;
+	}
+
+	.body {
+		margin-top: 20px;
+		background-color: white;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 20px;
+		border-radius: 10px;
+	}
+
+	.user-img {
+		width: 100px;
+		height: 100px;
+		border-radius: 50%;
+		margin-bottom: 20px;
+	}
+
+	.user-info {
+		margin-bottom: 20px;
+		text-align: center;
+	}
+
+	.username,
+	.email {
+		display: block;
+		font-size: 16px;
+		margin: 5px 0;
+	}
+</style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index dacd5b9..bfc8dd1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -691,9 +691,9 @@ picocolors@^1.0.1:
   resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
-pinia-plugin-persist@1.0.0:
+pinia-plugin-persist@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmmirror.com/pinia-plugin-persist/-/pinia-plugin-persist-1.0.0.tgz#fc696f225527f30bd5955109fafadd43c725e888"
+  resolved "https://registry.yarnpkg.com/pinia-plugin-persist/-/pinia-plugin-persist-1.0.0.tgz#fc696f225527f30bd5955109fafadd43c725e888"
   integrity sha512-M4hBBd8fz/GgNmUPaaUsC29y1M09lqbXrMAHcusVoU8xlQi1TqgkWnnhvMikZwr7Le/hVyMx8KUcumGGrR6GVw==
   dependencies:
     vue-demi "^0.12.1"