完成登录注册模块的接口与页面

修复首页图标未能正常获取的bug

完成小程序端部分接口对接

api-interface/itmk-base-parent/itmk-base-common/pom.xml

@@ -53,6 +53,10 @@
             <groupId>org.apache.httpcomponents</groupId>
             <artifactId>httpclient</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.springframework</groupId>
+            <artifactId>spring-core</artifactId>
+        </dependency>
     </dependencies>
 
     <build>

api-interface/itmk-base-parent/itmk-base-common/src/main/java/com/itmk/utils/JwtUtils.java

@@ -0,0 +1,48 @@
+package com.itmk.utils;
+
+import io.jsonwebtoken.Claims;
+import io.jsonwebtoken.Jwts;
+import io.jsonwebtoken.SignatureAlgorithm;
+import io.jsonwebtoken.security.Keys;
+import org.springframework.util.StringUtils;
+
+import javax.crypto.SecretKey;
+import java.util.Date;
+
+public class JwtUtils {
+
+    // 使用 Keys.secretKeyFor 生成足够强的密钥（512位）
+    private static final SecretKey SECRET_KEY = Keys.secretKeyFor(SignatureAlgorithm.HS512);
+    private static final long EXPIRATION_TIME = 86400000; // 24小时
+
+    public static String generateToken(String username) {
+        return Jwts.builder()
+                .setSubject(username)
+                .setIssuedAt(new Date())
+                .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
+                .signWith(SECRET_KEY, SignatureAlgorithm.HS512)
+                .compact();
+    }
+
+    public static Claims getClaimsByToken(String token) {
+        if (StringUtils.isEmpty(token)) {
+            return null;
+        }
+
+        try {
+            return Jwts.parserBuilder()
+                    .setSigningKey(SECRET_KEY)
+                    .build()
+                    .parseClaimsJws(token)
+                    .getBody();
+        } catch (Exception e) {
+            System.out.println("validate is token error, token: " + token + ", error: " + e);
+            return null;
+        }
+    }
+
+    public static String getSubject(String token) {
+        Claims claims = getClaimsByToken(token);
+        return claims != null ? claims.getSubject() : null;
+    }
+}

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/order/controller/UserOrderController.java

@@ -7,6 +7,8 @@ import com.itmk.utils.ResultUtils;
 import com.itmk.utils.ResultVo;
 import com.itmk.web.order.entity.*;
 import com.itmk.web.order.service.UserOrderService;
+import com.itmk.web.order_detail.entity.UserOrderDetail;
+import com.itmk.web.order_detail.service.UserOrderDetailService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
 
@@ -18,98 +20,127 @@ public class UserOrderController {
     @Autowired
     private UserOrderService userOrderService;
 
-    //下的
+    @Autowired
+    private UserOrderDetailService userOrderDetailService;
+
+    //下单
     @PostMapping("/splaceOrder")
-    public ResultVo splaceOrder(@RequestBody OrderParm parm){
+    public ResultVo splaceOrder(@RequestBody OrderParm parm) {
         userOrderService.splaceOrder(parm);
         return ResultUtils.success("提交成功!");
     }
 
     //查询订单
     @GetMapping("/getOrderList")
-    public ResultVo getOrderList(WxOrderParm parm){
+    public ResultVo getOrderList(WxOrderParm parm) {
         IPage<UserOrder> orderList = userOrderService.getOrderList(parm);
-        return ResultUtils.success("查询成功!",orderList);
+        return ResultUtils.success("查询成功!", orderList);
     }
 
     //查询pc订单
     @GetMapping("/getPcOrderList")
-    public ResultVo getPcOrderList(WxOrderParm parm){
+    public ResultVo getPcOrderList(WxOrderParm parm) {
         IPage<UserOrder> orderList = userOrderService.getPcOrderList(parm);
-        return ResultUtils.success("查询成功!",orderList);
+        return ResultUtils.success("查询成功!", orderList);
     }
 
     //发货
     @PutMapping("/sendOrder")
-    public ResultVo sendOrder(@RequestBody SendParm parm){
+    public ResultVo sendOrder(@RequestBody SendParm parm) {
         //判断订单是否被取消
         QueryWrapper<UserOrder> queryWrapper = new QueryWrapper<>();
-        queryWrapper.lambda().eq(UserOrder::getOrderId,parm.getOrderId()).eq(UserOrder::getStatus,"3");
+        queryWrapper.lambda().eq(UserOrder::getOrderId, parm.getOrderId()).eq(UserOrder::getStatus, "3");
         UserOrder one = userOrderService.getOne(queryWrapper);
-        if(one != null){
+        if (one != null) {
             return ResultUtils.error("订单已被取消，不能发货!");
         }
         //更新条件
         LambdaUpdateWrapper<UserOrder> query = new LambdaUpdateWrapper<>();
-        query.eq(UserOrder::getOrderId,parm.getOrderId())
+        query.eq(UserOrder::getOrderId, parm.getOrderId())
-                .set(UserOrder::getStatus,"1");
+                .set(UserOrder::getStatus, "1");
-        if(userOrderService.update(query)){
+        if (userOrderService.update(query)) {
             return ResultUtils.success("更新成功!");
         }
         return ResultUtils.error("更新失败!");
     }
+
     //取消订单
     @PostMapping("/cancelOrder")
-    public ResultVo cancelOrder(@RequestBody SendParm parm){
+    public ResultVo cancelOrder(@RequestBody SendParm parm) {
         //如果已发货，不能取消
         QueryWrapper<UserOrder> queryWrapper = new QueryWrapper<>();
-        queryWrapper.lambda().eq(UserOrder::getOrderId,parm.getOrderId()).eq(UserOrder::getStatus,"1");
+        queryWrapper.lambda().eq(UserOrder::getOrderId, parm.getOrderId()).eq(UserOrder::getStatus, "1");
         UserOrder one = userOrderService.getOne(queryWrapper);
-        if(one != null){
+        if (one != null) {
             return ResultUtils.error("订单已发货，不能取消!");
         }
         //更新条件
         LambdaUpdateWrapper<UserOrder> query = new LambdaUpdateWrapper<>();
-        query.eq(UserOrder::getOrderId,parm.getOrderId())
+        query.eq(UserOrder::getOrderId, parm.getOrderId())
-                .set(UserOrder::getStatus,"3");
+                .set(UserOrder::getStatus, "3");
-        if(userOrderService.update(query)){
+        if (userOrderService.update(query)) {
             return ResultUtils.success("取消成功!");
         }
         return ResultUtils.error("取消失败!");
     }
+
     //确定收货
     @PostMapping("/confirmOrder")
-    public ResultVo confirmOrder(@RequestBody SendParm parm){
+    public ResultVo confirmOrder(@RequestBody SendParm parm) {
         //更新条件
         LambdaUpdateWrapper<UserOrder> query = new LambdaUpdateWrapper<>();
-        query.eq(UserOrder::getOrderId,parm.getOrderId())
+        query.eq(UserOrder::getOrderId, parm.getOrderId())
-                .set(UserOrder::getStatus,"2");
+                .set(UserOrder::getStatus, "2");
-        if(userOrderService.update(query)){
+        if (userOrderService.update(query)) {
             return ResultUtils.success("收货成功!");
         }
         return ResultUtils.error("收货失败!");
     }
+
+    // 在 UserOrderController 中添加删除订单接口
+    @DeleteMapping("/{orderId}")
+    public ResultVo deleteOrder(@PathVariable Long orderId) {
+        // 先删除订单详情
+        QueryWrapper<UserOrderDetail> detailQuery = new QueryWrapper<>();
+        detailQuery.lambda().eq(UserOrderDetail::getOrderId, orderId);
+        userOrderDetailService.remove(detailQuery);
+
+        // 再删除订单
+        if (userOrderService.removeById(orderId)) {
+            return ResultUtils.success("删除成功!");
+        }
+        return ResultUtils.error("删除失败!");
+    }
+
     //首页统计 0:日 1：月 2：年
     @GetMapping("/getTotal")
-    public ResultVo getTotal(String type){
+    public ResultVo getTotal(String type) {
-        List<SunList> list = null;
+        try {
-        switch (type){
+            List<SunList> list = null;
-            case "1":
+            switch (type) {
-                list = userOrderService.getMonths();
+                case "1":
-                break;
+                    list = userOrderService.getMonths();
-            case "2":
+                    break;
-                list = userOrderService.getYears();
+                case "2":
-                break;
+                    list = userOrderService.getYears();
-            default:
+                    break;
-                list = userOrderService.getDays();
+                default:
-        }
+                    list = userOrderService.getDays();
-        Echarts echarts = new Echarts();
+            }
-        if(list!= null && list.size() >0){
+            Echarts echarts = new Echarts();
-            for (int i=0;i<list.size();i++){
+            if (list != null && list.size() > 0) {
-                echarts.getNames().add(list.get(i).getDays());
+                for (SunList sun : list) {
-                echarts.getValues().add(list.get(i).getPrice());
+                    // 添加空值检查
+                    if (sun.getDays() != null && sun.getPrice() != null) {
+                        echarts.getNames().add(sun.getDays());
+                        echarts.getValues().add(sun.getPrice());
+                    }
+                }
             }
+            return ResultUtils.success("查询成功", echarts);
+        } catch (Exception e) {
+            e.printStackTrace();
+            return ResultUtils.error("统计查询失败: " + e.getMessage());
         }
-        return ResultUtils.success("查询成功",echarts);
     }
 }

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/user/controller/SysUserController.java

@@ -5,22 +5,27 @@ import com.alibaba.druid.util.StringUtils;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.itmk.utils.JwtUtils;
 import com.itmk.utils.ResultUtils;
 import com.itmk.utils.ResultVo;
 import com.itmk.web.user.entity.SysUser;
 import com.itmk.web.user.entity.UserPageParm;
 import com.itmk.web.user.service.SysUserService;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.util.DigestUtils;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.HashMap;
+import java.util.Map;
+
 @RestController
 @RequestMapping("/api/user")//所有含有/api/user的请求都交给这个控制器处理
 public class SysUserController {
-//    注入服务类
+    //    注入服务类
     @Autowired
     private SysUserService sysUserService;
 
-//    新增用户
+    //    新增用户
     @PostMapping//使用post请求
     public ResultVo addUser(@RequestBody SysUser sysUser) {
         // 1. 单独检查用户名
@@ -43,41 +48,110 @@ public class SysUserController {
                 : ResultUtils.error("新增用户失败！");
     }
 
-//    编辑用户
+    //    编辑用户
     @PutMapping
-    public ResultVo editUser(@RequestBody SysUser sysUser){
+    public ResultVo editUser(@RequestBody SysUser sysUser) {
-        if(sysUserService.updateById(sysUser)){
+        if (sysUserService.updateById(sysUser)) {
             return ResultUtils.success("编辑用户成功！", sysUser);
         }
         return ResultUtils.error("编辑用户失败！");
     }
 
-//    删除用户
+    //    删除用户
     @DeleteMapping("/{userId}")//delete请求时需要指定参数，传递参数用户id
 //    接收参数
-    public ResultVo deleteUser(@PathVariable Long userId){
+    public ResultVo deleteUser(@PathVariable Long userId) {
-        if(sysUserService.removeById(userId)){
+        if (sysUserService.removeById(userId)) {
             return ResultUtils.success("删除用户成功！");
         }
         return ResultUtils.error("删除用户失败！");
     }
 
-//    列表查询
+    //    列表查询
 //    列表查询需要分页
     @GetMapping("/list")
-    public ResultVo getList(UserPageParm parm){
+    public ResultVo getList(UserPageParm parm) {
 //        构造分页对象
-        IPage<SysUser> page = new Page<>(parm.getCurrentPage(),parm.getPageSize());
+        IPage<SysUser> page = new Page<>(parm.getCurrentPage(), parm.getPageSize());
 //        构造查询条件
         QueryWrapper<SysUser> queryWrapper = new QueryWrapper<>();
 //        当parm.getName()或parm.getPhone()不为空时，设置查询条件，根据姓名和手机号模糊查询
-        queryWrapper.lambda().like(!StringUtils.isEmpty(parm.getName()),SysUser::getName,parm.getName())
+        queryWrapper.lambda().like(!StringUtils.isEmpty(parm.getName()), SysUser::getName, parm.getName())
-                .like(!StringUtils.isEmpty(parm.getPhone()),SysUser::getPhone,parm.getPhone())
+                .like(!StringUtils.isEmpty(parm.getPhone()), SysUser::getPhone, parm.getPhone())
 //                根据姓名升序排序
                 .orderByAsc(SysUser::getName);
-        IPage<SysUser> list = sysUserService.page(page,queryWrapper);
+        IPage<SysUser> list = sysUserService.page(page, queryWrapper);
+
+        return ResultUtils.success("查询成功！", list);
+
+    }
 
-        return ResultUtils.success("查询成功！",list);
+    // 用户注册接口
+    @PostMapping("/register")
+    public ResultVo register(@RequestBody SysUser sysUser) {
+        // 检查用户名是否已存在
+        if (sysUserService.lambdaQuery()
+                .eq(SysUser::getUsername, sysUser.getUsername())
+                .exists()) {
+            return ResultUtils.error("用户名已存在！");
+        }
 
+        // 检查手机号是否已存在
+        if (sysUserService.lambdaQuery()
+                .eq(SysUser::getPhone, sysUser.getPhone())
+                .exists()) {
+            return ResultUtils.error("手机号已被使用！");
+        }
+
+        // 对密码进行MD5加密
+        String md5Password = DigestUtils.md5DigestAsHex(sysUser.getPassword().getBytes());
+        sysUser.setPassword(md5Password);
+
+        // 保存用户
+        if (sysUserService.save(sysUser)) {
+            return ResultUtils.success("注册成功！");
+        }
+        return ResultUtils.error("注册失败！");
+    }
+
+    // 用户登录接口
+    @PostMapping("/login")
+    public ResultVo login(@RequestBody SysUser sysUser) {
+        // 对密码进行MD5加密
+        String md5Password = DigestUtils.md5DigestAsHex(sysUser.getPassword().getBytes());
+
+        // 查询用户
+        QueryWrapper<SysUser> query = new QueryWrapper<>();
+        query.lambda().eq(SysUser::getUsername, sysUser.getUsername())
+                .eq(SysUser::getPassword, md5Password);
+
+        SysUser user = sysUserService.getOne(query);
+        if (user != null) {
+            // 生成token
+            String token = JwtUtils.generateToken(user.getUsername());
+
+            // 返回用户信息和token
+            Map<String, Object> result = new HashMap<>();
+            result.put("user", user);
+            result.put("token", token);
+
+            return ResultUtils.success("登录成功！", result);
+        }
+        return ResultUtils.error("用户名或密码错误！");
+    }
+
+    // 根据token获取用户信息
+    @GetMapping("/getUserInfo")
+    public ResultVo getUserInfo(@RequestHeader("token") String token) {
+        String username = JwtUtils.getClaimsByToken(token).getSubject();
+        SysUser user = sysUserService.lambdaQuery()
+                .eq(SysUser::getUsername, username)
+                .one();
+        if (user != null) {
+            // 不返回密码
+            user.setPassword(null);
+            return ResultUtils.success("查询成功", user);
+        }
+        return ResultUtils.error("用户不存在");
     }
 }

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/wx_user/controller/WxUserController.java

@@ -15,14 +15,19 @@ public class WxUserController {
 
     @PostMapping("/saveOrUpdate")
     public ResultVo saveOrUpdate(@RequestBody WxUser wxUser){
-        wxUserService.saveOrUpdate(wxUser);
+        // 使用 MyBatis Plus 自带的 saveOrUpdate 方法
-        return ResultUtils.success("更新成功!");
+        boolean result = wxUserService.saveOrUpdate(wxUser);
+        if(result) {
+            return ResultUtils.success("更新成功!");
+        } else {
+            return ResultUtils.error("更新失败!");
+        }
     }
 
     //查询头像昵称
     @GetMapping("/getUserInfo")
     public ResultVo getUserInfo(String openid) {
         WxUser user = wxUserService.getById(openid);
-        return ResultUtils.error("查询成功!",user);
+        return ResultUtils.success("查询成功!",user);
     }
 }

api-interface/itmk-base-parent/itmk-base-web/src/main/resources/mapper/UserOrderMapper.xml

@@ -4,12 +4,25 @@
 
 <mapper namespace="com.itmk.web.order.mapper.UserOrderMapper">
     <select id="getDays" resultType="com.itmk.web.order.entity.SunList">
-        select DATE_FORMAT(create_time,'%Y-%m-%d')days,sum(price)price  from order where `status` = '2' group by days order by days asc
+        select DATE_FORMAT(create_time, '%Y-%m-%d') days, sum(price) price
+        from `user_order`
+        where `status` = '2'
+        group by days
+        order by days asc
     </select>
     <select id="getMonths" resultType="com.itmk.web.order.entity.SunList">
-        select DATE_FORMAT(create_time,'%Y-%m')days,sum(price)price  from order where `status` = '2' group by days order by days asc
+        select DATE_FORMAT(create_time, '%Y-%m') days, sum(price) price
-    </select><select id="getYears" resultType="com.itmk.web.order.entity.SunList">
+        from `user_order`
-    select DATE_FORMAT(create_time,'%Y')days,sum(price)price  from order where `status` = '2' group by days order by days asc
+        where `status` = '2'
-</select>
+        group by days
+        order by days asc
+    </select>
+    <select id="getYears" resultType="com.itmk.web.order.entity.SunList">
+        select DATE_FORMAT(create_time, '%Y') days, sum(price) price
+        from `user_order`
+        where `status` = '2'
+        group by days
+        order by days asc
+    </select>
 
 </mapper>

api-interface/itmk-base-parent/itmk-base-web/src/main/resources/mapper/WxUserMapper.xml

@@ -0,0 +1,41 @@
+<!DOCTYPE mapper
+        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+
+<mapper namespace="com.itmk.web.wx_user.mapper.WxUserMapper">
+    <insert id="saveOrUpdateInfo" parameterType="com.itmk.web.wx_user.entity.WxUser">
+        insert into wx_user
+        <trim prefix="(" suffix=")" suffixOverrides=",">
+            <if test="user.openid != null and user.openid !=''">
+                openid,
+            </if>
+            <if test="user.nickName != null and user.nickName !=''">
+                nick_name,
+            </if>
+            <if test="user.avatarUrl != null and user.avatarUrl !=''">
+                avatar_url,
+            </if>
+        </trim>
+        <trim prefix="values (" suffix=")" suffixOverrides=",">
+            <if test="user.openid != null and user.openid !=''">
+                #{user.openid},
+            </if>
+            <if test="user.nickName != null and user.nickName !=''">
+                #{user.nickName},
+            </if>
+            <if test="user.avatarUrl != null and user.avatarUrl !=''">
+                #{user.avatarUrl},
+            </if>
+        </trim>
+        on duplicate key update
+        <trim>
+            <if test="user.nickName != null and user.nickName !=''">
+                nick_name = #{user.nickName},
+            </if>
+            <if test="user.avatarUrl != null and user.avatarUrl !=''">
+                avatar_url = #{user.avatarUrl},
+            </if>
+        </trim>
+    </insert>
+
+</mapper>

order-app/src/pages/car/car.vue

@@ -50,6 +50,9 @@
 	import {
 		carStore
 	} from '../../store/car.js'
+	import {
+		orderStore
+	} from '../../store/order.js'
 	//获取store
 	const store = carStore();
 	const show = ref(true);
@@ -140,6 +143,22 @@
 	})
 	//跳转确认订单
 	const confirm = (item) => {
+		// 获取选中的商品
+		const selectedGoods = store.carList.filter(item => item.flag);
+
+		// 如果没有选中商品，提示用户
+		if (selectedGoods.length === 0) {
+			uni.showToast({
+				title: '请选择商品',
+				icon: 'none'
+			});
+			return;
+		}
+
+		// 将选中的商品设置到 orderStore 中
+		const ostore = orderStore();
+		ostore.addOrderList(selectedGoods);
+
 		uni.navigateTo({
 			url: '../confirm/confirm'
 		});

order-app/src/pages/collect/collect.vue

@@ -91,6 +91,19 @@
 		margin: 5px 10px 5px 0px;
 	}
 
+	.collect-container {
+		height: 100vh;
+		background-color: #f8f8f8;
+
+		.scroll-view {
+			height: 100%;
+
+			.empty-tip {
+				padding-top: 200rpx;
+			}
+		}
+	}
+
 	.item {
 		padding: 40rpx 20rpx;
 		display: flex;

order-app/src/pages/detail/detail.vue

@@ -273,7 +273,25 @@
 
 	onLoad((options) => {
 		userLogin()
-		const goods = JSON.parse(options.goods)
+		// 解码参数
+		let goodsParam = options.goods;
+		try {
+			// 先尝试直接解析（处理来自index.vue的参数）
+			goodsParam = JSON.parse(goodsParam);
+		} catch (e) {
+			// 如果直接解析失败，尝试先解码再解析（处理来自category.vue的参数）
+			try {
+				goodsParam = JSON.parse(decodeURIComponent(goodsParam));
+			} catch (e2) {
+				uni.showToast({
+					title: '参数错误',
+					icon: 'none'
+				});
+				return;
+			}
+		}
+
+		const goods = goodsParam;
 		swipperList.value = goods.goodsImage.split(',')
 		console.log(goods)
 		goodsUnit.value = goods.goodsUnit

order-app/src/pages/mine/mine.vue

@@ -18,7 +18,7 @@
 		<view class="u-m-t-20">
 			<u-cell-group>
 				<u-cell-item @click="toOrder" icon="star" title="我的订单"></u-cell-item>
-				<u-cell-item icon="photo" title="我的收藏"></u-cell-item>
+				<u-cell-item @click="toCollect" icon="photo" title="我的收藏"></u-cell-item>
 				<u-cell-item icon="coupon" title="我的地址"></u-cell-item>
 			</u-cell-group>
 		</view>
@@ -102,7 +102,7 @@
 	}
 	const onNickName = (e) => {
 		console.log(e)
-		uni.createSelectorQuery().in(instance) // 注意这里要加上 in(this)  
+		uni.createSelectorQuery().in(instance)
 			.select("#nickname-input")
 			.fields({
 				properties: ["value"],
@@ -233,6 +233,14 @@
 			url: '../order/order'
 		});
 	}
+
+	//跳转收藏
+	const toCollect = () => {
+		uni.navigateTo({
+			url: '../collect/collect'
+		});
+	}
+
 	onShow(() => {
 		userLogin()
 		// getUserInfo()

order-system/src/api/order/index.ts

@@ -10,6 +10,11 @@ export const sendOrderApi = (orderId: string) => {
   return http.put("/wxapi/order/sendOrder", { orderId: orderId })
 }
 
+// 删除订单
+export const deleteOrderApi = (orderId: string) => {
+  return http.delete(`/wxapi/order/${orderId}`);
+};
+
 //统计
 export const getTotalApi = (type:string)=>{
     return http.get("/wxapi/order/getTotal",{type:type})

order-system/src/api/user/index.ts

@@ -1,5 +1,5 @@
 import http from "../../http";
-import type { ListUserParm, UserModel } from "./userModel";
+import type { ListUserParm, UserModel, RegisterModel } from "./userModel";
 
 // 新增接口
 export const addUserApi = (parm:UserModel)=>{
@@ -19,4 +19,19 @@ export const editUserApi = (parm:UserModel)=>{
 // 删除接口
 export const deleteUserApi = (userId:string)=>{
   return http.delete(`/api/user/${userId}`)
+}
+
+// 用户登录
+export const loginApi = (parm: { username: string; password: string }) => {
+  return http.post('/api/user/login', parm)
+}
+
+// 用户注册
+export const registerApi = (parm: RegisterModel) => {
+  return http.post('/api/user/register', parm)
+}
+
+// 获取用户信息
+export const getUserInfoApi = () => {
+  return http.get('/api/user/getUserInfo')
 }

order-system/src/api/user/userModel.ts

@@ -17,4 +17,15 @@ export type UserModel = {
   email: string;
   sex: string;
   name: string;
+}
+
+// 注册表单类型
+export type RegisterModel = {
+  username: string;
+  password: string;
+  phone: string;
+  email: string;
+  sex: string;
+  name: string;
+  confirmPassword?: string;
 }

order-system/src/compositions/order/useOrderTable.ts

@@ -1,6 +1,6 @@
 import type { OrderListParm } from '../../api/order/OrderModel'
 import { nextTick, onMounted, reactive, ref } from 'vue'
-import { gePcOrdertListApi, sendOrderApi } from '../../api/order'
+import { gePcOrdertListApi, sendOrderApi, deleteOrderApi } from '../../api/order' // 导入 deleteOrderApi
 import useInstance from '@/hooks/useInstance'
 export default function useOrderTable() {
   const { global } = useInstance()
@@ -34,6 +34,7 @@ export default function useOrderTable() {
   const resetBtn = () => {
     listParm.currentPage = 1;
     listParm.type = ''
+    listParm.userName = '' // 重置搜索条件
     getList()
   }
   //页容量改变触发
@@ -52,7 +53,29 @@ export default function useOrderTable() {
     if (confirm) {
       let res = await sendOrderApi(orderId)
       if (res && res.code == 200) {
+        global.$message({ type: 'success', message: '发货成功!' })
         getList()
+      } else {
+        global.$message({ type: 'error', message: res?.msg || '发货失败!' })
+      }
+    }
+  }
+  
+  // 删除订单
+  const deleteOrder = async (orderId: string) => {
+    let confirm = await global.$myconfirm('确定删除该订单吗?此操作不可恢复。')
+    if (confirm) {
+      try {
+        let res = await deleteOrderApi(orderId)
+        if (res && res.code == 200) {
+          global.$message({ type: 'success', message: '删除成功!' })
+          getList()
+        } else {
+          global.$message({ type: 'error', message: res?.msg || '删除失败!' })
+        }
+      } catch (error) {
+        console.error('删除订单失败:', error)
+        global.$message({ type: 'error', message: '删除失败!' })
       }
     }
   }
@@ -66,6 +89,7 @@ export default function useOrderTable() {
   return {
     tableList,
     sendOrder,
+    deleteOrder, // 返回删除订单方法
     listParm,
     getList,
     searchBtn,

order-system/src/http/index.ts

@@ -33,10 +33,10 @@ class Http {
   private interceptors() {
     // 请求发送之前的拦截器，通常用来配置、携带token
     this.instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
-      // 设置token到请求头部
+      // 从localStorage获取token
-      let token = "";
+      const token = localStorage.getItem('token');
       if (token) {
-        config.headers!['token'] = token;
+        config.headers!['Authorization'] = `Bearer ${token}`;
       }
       return config;
     }, (error: any) => {
@@ -59,58 +59,64 @@ class Http {
       console.log('进入错误')
       error.data = {}
       if (error && error.response) {
-        switch (error.response.status) {
+        if (error.response.status === 401) {
-          case 400:
+          error.data.msg = '未授权，请重新登录'
-            error.data.msg = '错误请求'
+          ElMessage.error(error.data.msg)
-            ElMessage.error(error.data.msg)
+          // 清除本地存储的token和用户信息
-            break
+          localStorage.removeItem('token')
-          case 401:
+          localStorage.removeItem('user')
-            error.data.msg = '未授权，请重新登录'
+          // 跳转到登录页
-            ElMessage.error(error.data.msg)
+          window.location.href = '/login'
-            break
+        } else {
-          case 403:
+          switch (error.response.status) {
-            error.data.msg = '拒绝访问'
+            case 400:
-            ElMessage.error(error.data.msg)
+              error.data.msg = '错误请求'
-            break
+              ElMessage.error(error.data.msg)
-          case 404:
+              break
-            error.data.msg = '请求错误，未找到该资源'
+            case 403:
-            ElMessage.error(error.data.msg)
+              error.data.msg = '拒绝访问'
-            break
+              ElMessage.error(error.data.msg)
-          case 405:
+              break
-            error.data.msg = '请求方法未允许'
+            case 404:
-            ElMessage.error(error.data.msg)
+              error.data.msg = '请求错误，未找到该资源'
-            break
+              ElMessage.error(error.data.msg)
-          case 408:
+              break
-            error.data.msg = '请求超时'
+            case 405:
-            ElMessage.error(error.data.msg)
+              error.data.msg = '请求方法未允许'
-            break
+              ElMessage.error(error.data.msg)
-          case 500:
+              break
-            error.data.msg = '服务器端出错'
+            case 408:
-            ElMessage.error(error.data.msg)
+              error.data.msg = '请求超时'
-            break
+              ElMessage.error(error.data.msg)
-          case 501:
+              break
-            error.data.msg = '网络未实现'
+            case 500:
-            ElMessage.error(error.data.msg)
+              error.data.msg = '服务器端出错'
-            break
+              ElMessage.error(error.data.msg)
-          case 502:
+              break
-            error.data.msg = '网络错误'
+            case 501:
-            ElMessage.error(error.data.msg)
+              error.data.msg = '网络未实现'
-            break
+              ElMessage.error(error.data.msg)
-          case 503:
+              break
-            error.data.msg = '服务不可用'
+            case 502:
-            ElMessage.error(error.data.msg)
+              error.data.msg = '网络错误'
-            break
+              ElMessage.error(error.data.msg)
-          case 504:
+              break
-            error.data.msg = '网络超时'
+            case 503:
-            ElMessage.error(error.data.msg)
+              error.data.msg = '服务不可用'
-            break
+              ElMessage.error(error.data.msg)
-          case 505:
+              break
-            error.data.msg = 'http版本不支持该请求'
+            case 504:
-            ElMessage.error(error.data.msg)
+              error.data.msg = '网络超时'
-            break
+              ElMessage.error(error.data.msg)
-          default:
+              break
-            error.data.msg = `连接错误${error.response.status}`
+            case 505:
-            ElMessage.error(error.data.msg)
+              error.data.msg = 'http版本不支持该请求'
+              ElMessage.error(error.data.msg)
+              break
+            default:
+              error.data.msg = `连接错误${error.response.status}`
+              ElMessage.error(error.data.msg)
+          }
         }
       } else {
         error.data.msg = "连接到服务器失败"

order-system/src/layout/header/LoginOut.vue

@@ -1,36 +1,80 @@
 <template>
-
+  <div class="user-info">
-  <!-- 添加下拉菜单组件 -->
+    <span class="username">{{ userName }}</span>
-  <el-dropdown>
+    <el-dropdown>
-    <span class="el-dropdown-link">
+      <span class="el-dropdown-link">
-      <!-- <img src="../../assets/user.png" alt=""> -->
+        <img class="uimage" src="@/assets/user.png" alt="">
-      <!-- 将下拉菜单文字替换为用户头像 -->
+      </span>
-      <img class="uimage" src="@/assets/user.png" alt="">
+      <template #dropdown>
-    </span>
+        <el-dropdown-menu>
-    <template #dropdown>
+          <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
-      <el-dropdown-menu>
+        </el-dropdown-menu>
-        <el-dropdown-item>退出登录</el-dropdown-item>
+      </template>
-
+    </el-dropdown>
-        <!-- 目前只需要退出登录功能，注释掉多余action -->
+  </div>
-        <!-- <el-dropdown-item>Action 2</el-dropdown-item>
-        <el-dropdown-item>Action 3</el-dropdown-item>
-        <el-dropdown-item disabled>Action 4</el-dropdown-item>
-        <el-dropdown-item divided>Action 5</el-dropdown-item> -->
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const router = useRouter()
+const userName = ref('')
+
+// 获取当前用户信息
+onMounted(() => {
+  const userStr = localStorage.getItem('user')
+  if (userStr) {
+    try {
+      const user = JSON.parse(userStr)
+      userName.value = user.name || user.username
+    } catch (e) {
+      console.error('解析用户信息失败', e)
+    }
+  }
+})
 
+// 退出登录处理函数
+const handleLogout = () => {
+  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    // 清除本地存储的用户信息和token
+    localStorage.removeItem('token')
+    localStorage.removeItem('user')
+    
+    // 显示退出成功消息
+    ElMessage.success('退出登录成功')
+    
+    // 跳转到登录页面
+    router.push('/login')
+  }).catch(() => {
+    // 用户点击取消，不做任何操作
+    ElMessage.info('已取消退出')
+  })
+}
 </script>
 
 <style scoped lang="scss">
-  // 为下拉菜单的图片添加样式
+.user-info {
-  .uimage{
+  display: flex;
-    height: 45px;
+  align-items: center;
-    width: 45px;
+  gap: 10px;
-    border-radius: 50%;
+}
-    cursor: pointer;
+
-  }
+.username {
+  font-size: 14px;
+  color: #606266;
+}
+
+// 为下拉菜单的图片添加样式
+.uimage{
+  height: 45px;
+  width: 45px;
+  border-radius: 50%;
+  cursor: pointer;
+}
 </style>

order-system/src/router/index.ts

@@ -26,7 +26,8 @@ const routes: Array<RouteRecordRaw> = [
         name: 'dashboard',
         component: () => import('@/views/dashboard/Index.vue'),
         meta: {
-          title: '首页'
+          title: '首页',
+          requiresAuth: true // 添加认证要求
         },
       },
       {
@@ -34,7 +35,8 @@ const routes: Array<RouteRecordRaw> = [
         name: 'banner',
         component: () => import('@/views/banner/Index.vue'),
         meta: {
-          title: '广告管理'
+          title: '广告管理',
+          requiresAuth: true // 添加认证要求
         },
       },
       {
@@ -42,7 +44,8 @@ const routes: Array<RouteRecordRaw> = [
         name: 'category',
         component: () => import('@/views/category/Index.vue'),
         meta: {
-          title: '菜品分类'
+          title: '菜品分类',
+          requiresAuth: true // 添加认证要求
         },
       },
       {
@@ -50,7 +53,8 @@ const routes: Array<RouteRecordRaw> = [
         name: 'comment',
         component: () => import('@/views/comment/Index.vue'),
         meta: {
-          title: '评论管理'
+          title: '评论管理',
+          requiresAuth: true // 添加认证要求
         },
       },
       {
@@ -58,7 +62,8 @@ const routes: Array<RouteRecordRaw> = [
         name: 'goods',
         component: () => import('@/views/goods/Index.vue'),
         meta: {
-          title: '菜品管理'
+          title: '菜品管理',
+          requiresAuth: true // 添加认证要求
         },
       },
       {
@@ -66,7 +71,8 @@ const routes: Array<RouteRecordRaw> = [
         name: 'order',
         component: () => import('@/views/order/Index.vue'),
         meta: {
-          title: '订单管理'
+          title: '订单管理',
+          requiresAuth: true // 添加认证要求
         },
       },
       {
@@ -74,10 +80,25 @@ const routes: Array<RouteRecordRaw> = [
         name: 'user',
         component: () => import('@/views/user/Index.vue'),
         meta: {
-          title: '用户管理'
+          title: '用户管理',
+          requiresAuth: true // 添加认证要求
         },
-      },
+      }
     ]
+  },
+
+  // 登录和注册作为独立路由，不在Layout中
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/login/Index.vue'),
+    meta: { title: '登录' }
+  },
+  {
+    path: '/register',
+    name: 'Register',
+    component: () => import('@/views/register/Index.vue'),
+    meta: { title: '注册' }
   }
 ]
 
@@ -86,4 +107,23 @@ const router = createRouter({
   routes
 })
 
+// 路由守卫
+router.beforeEach((to, from, next) => {
+  const token = localStorage.getItem('token')
+  
+  // 检查路由是否需要认证
+  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
+  
+  if (requiresAuth && !token) {
+    // 如果需要认证但没有token，跳转到登录页
+    next('/login')
+  } else if ((to.path === '/login' || to.path === '/register') && token) {
+    // 如果已登录但尝试访问登录/注册页，跳转到首页
+    next('/dashboard')
+  } else {
+    // 否则继续导航
+    next()
+  }
+})
+
 export default router

order-system/src/views/dashboard/Index.vue

@@ -1,165 +1,332 @@
 <template>
   <el-form style="margin: 20px 0px" label-width="80px" size="default">
     <el-form-item>
-      <el-button style="padding: 0px 50px" @click="charts('0')">日统计</el-button>
+      <el-button style="padding: 0px 50px" @click="charts('0')" :type="activeChart === '0' ? 'primary' : ''">
-      <el-button @click="charts('1')" style="padding: 0px 50px" type="primary" plain>月统计</el-button>
+        日统计
-      <el-button @click="charts('2')" style="padding: 0px 50px" type="success" plain>年统计</el-button>
+      </el-button>
+      <el-button @click="charts('1')" style="padding: 0px 50px" :type="activeChart === '1' ? 'primary' : ''">
+        月统计
+      </el-button>
+      <el-button @click="charts('2')" style="padding: 0px 50px" :type="activeChart === '2' ? 'primary' : ''">
+        年统计
+      </el-button>
     </el-form-item>
   </el-form>
-  <div ref="myChart" :style="{ width: '100%', height: '400px' }"></div>
+
-  <div ref="myChart1" :style="{ width: '100%', height: '350px' }"></div>
+  <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon style="margin-bottom: 20px;"
+    @close="errorMessage = ''" />
+
+  <el-skeleton :rows="5" animated v-if="loading" />
+
+  <!-- 确保图表容器始终存在，使用v-show -->
+  <div v-show="!loading" style="min-height: 800px;">
+    <div ref="myChart" :style="{ width: '100%', height: '400px' }"></div>
+    <div ref="myChart1" :style="{ width: '100%', height: '350px' }"></div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, nextTick, onUnmounted } from "vue";
 import useInstance from "@/hooks/useInstance";
 import { getTotalApi } from '../../api/order/index'
+
+// 定义API响应类型
+interface ApiResponse {
+  code: number;
+  data: {
+    names: string[];
+    values: number[];
+  };
+  message?: string;
+}
+
 const { global } = useInstance();
-const myChart = ref<HTMLElement>();
+const myChart = ref<HTMLElement | null>(null);
-const myChart1 = ref<HTMLElement>();
+const myChart1 = ref<HTMLElement | null>(null);
+const loading = ref(false);
+const errorMessage = ref("");
+const activeChart = ref("0");
+
+// 清理图表实例
+let echartInstance: any = null;
+let echartInstance1: any = null;
+let resizeObserver: ResizeObserver | null = null;
+
+// 完全避免使用 Promise 构造函数
+// 使用回调函数替代 Promise
+const wait = (ms: number, callback: () => void): void => {
+  setTimeout(callback, ms);
+};
+
+// 确保DOM元素存在的函数 - 使用回调而不是 Promise
+const ensureElementExists = (callback: () => void): void => {
+  let attempts = 0;
+
+  const checkElement = () => {
+    attempts++;
+    if (myChart.value && myChart1.value) {
+      callback();
+    } else if (attempts < 20) {
+      wait(50, checkElement);
+    } else {
+      console.warn("图表容器未找到，但继续执行");
+      callback();
+    }
+  };
+
+  checkElement();
+};
 
 //柱状图
 const charts = async (type: string) => {
-  const echartInstance = global.$echarts.init(myChart.value);
+  try {
-  const echartInstance1 = global.$echarts.init(myChart1.value);
+    activeChart.value = type;
-  let option = reactive({
+    loading.value = true;
-    title: {
+    errorMessage.value = "";
-      text: "直方图",
+
-    },
+    // 先等待数据获取
-    xAxis: {
+    const res = await getTotalApi(type) as ApiResponse;
-      type: "category",
+
-      data: [],
+    if (!res || res.code !== 200) {
-      axisLabel: {
+      throw new Error(res?.message || "获取数据失败");
-        //x轴文字的配置
+    }
-        show: true,
+
-        interval: 0, //使x轴文字显示全
+    // 数据获取成功后，再等待DOM更新
+    await nextTick();
+
+    // 使用回调方式确保DOM元素存在
+    ensureElementExists(() => {
+      // 如果元素仍然不存在，抛出错误
+      if (!myChart.value || !myChart1.value) {
+        throw new Error("图表容器未找到");
+      }
+
+      initCharts(res, type);
+    });
+  } catch (error: any) {
+    console.error("图表渲染错误:", error);
+    errorMessage.value = "加载图表数据失败: " + (error.message || "未知错误");
+    loading.value = false;
+  }
+};
+
+// 初始化图表的独立函数
+const initCharts = (res: ApiResponse, type: string) => {
+  try {
+    // 清理现有图表
+    if (echartInstance) {
+      echartInstance.dispose();
+    }
+    if (echartInstance1) {
+      echartInstance1.dispose();
+    }
+
+    echartInstance = global.$echarts.init(myChart.value!);
+    echartInstance1 = global.$echarts.init(myChart1.value!);
+
+    let option = {
+      title: {
+        text: type === '0' ? "日统计直方图" : type === '1' ? "月统计直方图" : "年统计直方图",
+        left: 'center'
+      },
+      xAxis: {
+        type: "category",
+        data: res.data.names || [],
+        axisLabel: {
+          show: true,
+          interval: 0,
+          rotate: 30 // 添加旋转防止文字重叠
+        },
+      },
+      yAxis: {
+        type: "value",
+        name: '金额'
       },
-    },
+      series: [
-    yAxis: {
+        {
-      type: "value",
+          data: res.data.values || [],
-    },
+          type: "bar",
-    series: [
+          itemStyle: {
-      {
-        data: [],
-        type: "bar",
-        itemStyle: {
-          normal: {
-            //这里是颜色
             color: function (params: any) {
-              //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
               var colorList = [
-                "#00A3E0",
+                "#00A3E0", "#FFA100", "#ffc0cb", "#CCCCCC", "#BBFFAA",
-                "#FFA100",
+                "#749f83", "#ca8622", "#00A3E0", "#FFA100", "#ffc0cb"
-                "#ffc0cb",
-                "#CCCCCC",
-                "#BBFFAA",
-                "#749f83",
-                "#ca8622",
-                "#00A3E0",
-                "#FFA100",
-                "#ffc0cb",
-                "#CCCCCC",
-                "#BBFFAA",
-                "#749f83",
-                "#ca8622",
-                "#00A3E0",
-                "#FFA100",
-                "#ffc0cb",
-                "#CCCCCC",
-                "#BBFFAA",
-                "#749f83",
-                "#ca8622",
-                "#00A3E0",
-                "#FFA100",
-                "#ffc0cb",
-                "#CCCCCC",
-                "#BBFFAA",
-                "#749f83",
-                "#ca8622",
-                "#00A3E0",
-                "#FFA100",
-                "#ffc0cb",
-                "#CCCCCC",
-                "#BBFFAA",
-                "#749f83",
-                "#ca8622",
-                "#00A3E0",
-                "#FFA100",
-                "#ffc0cb",
-                "#CCCCCC",
-                "#BBFFAA",
-                "#749f83",
-                "#ca8622",
               ];
-              return colorList[params.dataIndex];
+              return colorList[params.dataIndex % colorList.length];
             },
           },
         },
+      ],
+      tooltip: {
+        trigger: "axis",
+        backgroundColor: "rgba(32, 33, 36,.7)",
+        borderColor: "rgba(32, 33, 36,0.20)",
+        borderWidth: 1,
+        textStyle: {
+          color: "#fff",
+          fontSize: "12",
+        },
+        formatter: function (params: any) {
+          return `${params[0].name}<br/>金额: ${params[0].value}`;
+        }
       },
-    ],
+      grid: {
-    tooltip: {
+        left: '3%',
-      // 鼠标悬浮提示框显示 X和Y 轴数据
+        right: '4%',
-      trigger: "axis",
+        bottom: '10%',
-      backgroundColor: "rgba(32, 33, 36,.7)",
+        containLabel: true
-      borderColor: "rgba(32, 33, 36,0.20)",
+      }
-      borderWidth: 1,
+    };
-      textStyle: {
+
-        // 文字提示样式
+    let option1 = {
-        color: "#fff",
+      title: {
-        fontSize: "12",
+        text: type === '0' ? "日统计折线图" : type === '1' ? "月统计折线图" : "年统计折线图",
+        left: 'center'
       },
-    },
+      xAxis: {
-  });
+        type: "category",
-  let option1 = reactive({
+        data: res.data.names || [],
-    title: {
+        axisLabel: {
-      text: "折线图",
+          show: true,
-    },
+          interval: 0,
-    xAxis: {
+          rotate: 30
-      type: "category",
+        },
-      data: [],
-      axisLabel: {
-        //x轴文字的配置
-        show: true,
-        interval: 0, //使x轴文字显示全
       },
-    },
+      yAxis: {
-    yAxis: {
+        type: "value",
-      type: "value",
+        name: '金额'
-    },
-    series: [
-      {
-        data: [],
-        type: "line",
       },
-    ],
+      series: [
-    tooltip: {
+        {
-      // 鼠标悬浮提示框显示 X和Y 轴数据
+          data: res.data.values || [],
-      trigger: "axis",
+          type: "line",
-      backgroundColor: "rgba(32, 33, 36,.7)",
+          smooth: true,
-      borderColor: "rgba(32, 33, 36,0.20)",
+          itemStyle: {
-      borderWidth: 1,
+            color: '#00A3E0'
-      textStyle: {
+          },
-        // 文字提示样式
+          lineStyle: {
-        color: "#fff",
+            width: 3
-        fontSize: "12",
+          }
+        },
+      ],
+      tooltip: {
+        trigger: "axis",
+        backgroundColor: "rgba(32, 33, 36,.7)",
+        borderColor: "rgba(32, 33, 36,0.20)",
+        borderWidth: 1,
+        textStyle: {
+          color: "#fff",
+          fontSize: "12",
+        },
+        formatter: function (params: any) {
+          return `${params[0].name}<br/>金额: ${params[0].value}`;
+        }
       },
-    },
+      grid: {
-  });
+        left: '3%',
-  //动态获取数据
+        right: '4%',
-  let res = await getTotalApi(type)
+        bottom: '10%',
-  if (res && res.data) {
+        containLabel: true
-    console.log(res)
+      }
-    option.xAxis.data = res.data.names
+    };
-    option.series[0].data = res.data.values
+
-    option1.xAxis.data = res.data.names
+    echartInstance.setOption(option);
-    option1.series[0].data = res.data.values
+    echartInstance1.setOption(option1);
+
+    // 监听容器大小变化
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+    }
+    
+    resizeObserver = new ResizeObserver(() => {
+      if (echartInstance) {
+        echartInstance.resize();
+      }
+      if (echartInstance1) {
+        echartInstance1.resize();
+      }
+    });
+
+    if (myChart.value) {
+      resizeObserver.observe(myChart.value);
+    }
+    if (myChart1.value) {
+      resizeObserver.observe(myChart1.value);
+    }
+
+    // 添加窗口调整大小时重绘图表
+    const resizeHandler = function () {
+      if (echartInstance) {
+        echartInstance.resize();
+      }
+      if (echartInstance1) {
+        echartInstance1.resize();
+      }
+    };
+    window.addEventListener('resize', resizeHandler);
+
+    // 保存resizeHandler以便卸载时移除
+    (window as any).__chartResizeHandler = resizeHandler;
+  } catch (error: any) {
+    console.error("图表初始化错误:", error);
+    errorMessage.value = "图表初始化失败: " + (error.message || "未知错误");
+  } finally {
+    loading.value = false;
   }
-  echartInstance.setOption(option);
-  echartInstance1.setOption(option1);
 };
+
 onMounted(() => {
-  charts('0');
+  // 使用setTimeout确保DOM完全加载
+  setTimeout(() => {
+    charts('0');
+  }, 300); // 增加延迟时间
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  if (echartInstance) {
+    echartInstance.dispose();
+  }
+  if (echartInstance1) {
+    echartInstance1.dispose();
+  }
+
+  // 移除窗口调整事件监听器
+  if ((window as any).__chartResizeHandler) {
+    window.removeEventListener('resize', (window as any).__chartResizeHandler);
+  }
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.chart-container {
+  padding: 20px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.charts-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 20px;
+}
+
+.chart-item {
+  width: 100%;
+  flex: 1;
+  min-height: 300px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .chart-container {
+    padding: 10px;
+  }
+
+  .charts-wrapper {
+    gap: 15px;
+  }
+}
+</style>

order-system/src/views/login/Index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="login-container">
+    <el-card class="login-card">
+      <h2 class="login-title">用户登录</h2>
+      <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" class="login-form">
+        <el-form-item prop="username">
+          <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User"></el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" 
+                   prefix-icon="Lock" show-password></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="login-btn" @click="handleLogin" :loading="loading">登录</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="login-footer">
+        <span>还没有账号？</span>
+        <el-link type="primary" @click="goRegister">立即注册</el-link>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage, type FormInstance } from 'element-plus'
+import { useRouter } from 'vue-router'
+import { loginApi } from '../../api/user'
+
+const router = useRouter()
+const loading = ref(false)
+const loginFormRef = ref<FormInstance>()
+
+const loginForm = reactive({
+  username: '',
+  password: ''
+})
+
+const loginRules = reactive({
+  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+})
+
+const handleLogin = () => {
+  loginFormRef.value?.validate(async (valid) => {
+    if (valid) {
+      loading.value = true
+      try {
+        const res = await loginApi(loginForm)
+        if (res && res.code === 200) {
+          ElMessage.success('登录成功')
+          // 存储token和用户信息
+          localStorage.setItem('token', res.data.token)
+          localStorage.setItem('user', JSON.stringify(res.data.user))
+          
+          // 跳转到首页
+          router.push('/dashboard')
+        } else {
+          ElMessage.error(res.msg || '登录失败')
+        }
+      } catch (error) {
+        ElMessage.error('登录失败，请稍后重试')
+      } finally {
+        loading.value = false
+      }
+    }
+  })
+}
+
+const goRegister = () => {
+  router.push('/register')
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f5f7fa;
+}
+
+.login-card {
+  width: 400px;
+  padding: 20px;
+}
+
+.login-title {
+  text-align: center;
+  margin-bottom: 30px;
+  color: #409EFF;
+}
+
+.login-form {
+  margin-top: 20px;
+}
+
+.login-btn {
+  width: 100%;
+}
+
+.login-footer {
+  text-align: center;
+  margin-top: 20px;
+}
+</style>

order-system/src/views/order/Index.vue

@@ -60,11 +60,15 @@
             <el-tag v-if="scope.row.status == '2'" size="default" effect="dark"
               >已收货</el-tag
             >
+            <el-tag v-if="scope.row.status == '3'" size="default" effect="light"
+              >已取消</el-tag
+            >
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="200" align="center">
+        <el-table-column label="操作" width="250" align="center">
           <template #default="scope">
             <el-button type="primary" @click="sendOrder(scope.row.orderId)" :icon="Edit" size="default">发货</el-button>
+            <el-button type="danger" @click="deleteOrder(scope.row.orderId)" :icon="Delete" size="default">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -90,6 +94,7 @@
   const {
     tableList,
     sendOrder,
+    deleteOrder, // 添加删除订单方法
     listParm,
     resetBtn,
     searchBtn,
@@ -99,5 +104,4 @@
   } = useOrderTable();
   </script>
   
-  <style scoped></style>
+  <style scoped></style>
-  

order-system/src/views/register/Index.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="register-container">
+    <el-card class="register-card">
+      <h2 class="register-title">用户注册</h2>
+      <el-form :model="registerForm" :rules="registerRules" ref="registerFormRef" class="register-form">
+        <el-form-item prop="name" label="姓名">
+          <el-input v-model="registerForm.name" placeholder="请输入真实姓名"></el-input>
+        </el-form-item>
+
+        <el-form-item prop="sex" label="性别">
+          <el-radio-group v-model="registerForm.sex">
+            <el-radio label="0">男</el-radio>
+            <el-radio label="1">女</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item prop="phone" label="手机号">
+          <el-input v-model="registerForm.phone" placeholder="请输入手机号"></el-input>
+        </el-form-item>
+
+        <el-form-item prop="email" label="邮箱">
+          <el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
+        </el-form-item>
+
+        <el-form-item prop="username" label="用户名">
+          <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
+        </el-form-item>
+
+        <el-form-item prop="password" label="密码">
+          <el-input v-model="registerForm.password" type="password" placeholder="请输入密码" show-password></el-input>
+        </el-form-item>
+
+        <el-form-item prop="confirmPassword" label="确认密码">
+          <el-input v-model="registerForm.confirmPassword" type="password" placeholder="请再次输入密码"
+            show-password></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" class="register-btn" @click="handleRegister" :loading="loading">注册</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="register-footer">
+        <span>已有账号？</span>
+        <el-link type="primary" @click="goLogin">立即登录</el-link>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage, type FormInstance } from 'element-plus'
+import { useRouter } from 'vue-router'
+import { registerApi } from '../../api/user'
+import type { FormRules } from 'element-plus'
+import type { RegisterModel } from '../../api/user/userModel'
+
+
+const router = useRouter()
+const loading = ref(false)
+const registerFormRef = ref<FormInstance>()
+
+const registerForm = reactive<RegisterModel>({
+  name: '',
+  sex: '',
+  phone: '',
+  email: '',
+  username: '',
+  password: '',
+  confirmPassword: ''
+})
+
+const validatePass2 = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('请再次输入密码'))
+  } else if (value !== registerForm.password) {
+    callback(new Error('两次输入密码不一致!'))
+  } else {
+    callback()
+  }
+}
+
+const registerRules = reactive<FormRules>({
+  name: [
+    { required: true, message: '请输入姓名', trigger: 'blur' }
+  ],
+  sex: [
+    { required: true, message: '请选择性别', trigger: 'change' }
+  ],
+  phone: [
+    { required: true, message: '请输入电话', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email' as any, message: '请输入正确的邮箱地址', trigger: 'blur' }
+  ],
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, message: '请确认密码', trigger: 'blur' },
+    { validator: validatePass2, trigger: 'blur' }
+  ]
+})
+
+const handleRegister = () => {
+  registerFormRef.value?.validate(async (valid) => {
+    if (valid) {
+      loading.value = true
+      try {
+        const res = await registerApi(registerForm)
+        if (res && res.code === 200) {
+          ElMessage.success('注册成功')
+          // 跳转到登录页面
+          router.push('/login')
+        } else {
+          ElMessage.error(res.msg || '注册失败')
+        }
+      } catch (error) {
+        ElMessage.error('注册失败，请稍后重试')
+      } finally {
+        loading.value = false
+      }
+    }
+  })
+}
+
+const goLogin = () => {
+  router.push('/login')
+}
+</script>
+
+<style scoped>
+.register-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding: 20px 0;
+}
+
+.register-card {
+  width: 500px;
+  padding: 20px;
+}
+
+.register-title {
+  text-align: center;
+  margin-bottom: 30px;
+  color: #409EFF;
+}
+
+.register-form {
+  margin-top: 20px;
+}
+
+.register-btn {
+  width: 100%;
+}
+
+.register-footer {
+  text-align: center;
+  margin-top: 20px;
+}
+</style>

order-system/tsconfig.app.json

@@ -2,42 +2,29 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    // 添加以下路径配置
     "baseUrl": ".",
     "paths": {
-      "@/*": [
+      "@/*": ["src/*"],
-        "src/*"
+      "@/api/*": ["src/api/*"]
-      ],
-      "@/api/*": [
-        "src/api/*"
-      ]
     },
-    // 添加必要的库支持
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "lib": [
+    "types": ["vite/client"],
-      "ESNext",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "types": [
-      "vite/client"
-    ],
-    // 添加模块解析配置
     "module": "ESNext",
     "moduleResolution": "bundler",
-    // 确保包含以下选项
     "target": "ESNext",
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "strict": true,
     "jsx": "preserve",
     "downlevelIteration": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true
   },
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
     "vite-env.d.ts",
-    "vite.config.ts",
     "src/api/**/*.ts"
   ]
 }

order-system/vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig(({ mode }) => {
   return {
     define: {
       // 替换为全局变量
-      __APP_BASE_URL__: JSON.stringify("http://localhost:8089")
+      __APP_BASE_URL__: JSON.stringify("http://localhost:8089"),
     },
     plugins: [vue()],
     server: {
@@ -50,6 +50,4 @@ export default defineConfig(({ mode }) => {
       chunkSizeWarningLimit: 1500
     }
   }
-
+})
-
-})