refactor(项目结构): 重构前端项目结构并优化功能

重构项目目录结构，将Views重命名为views，统一命名规范
新增多个服务类(ProductService, ShopService等)实现API调用
优化路由配置，添加404页面和路由守卫
完善类型定义(Type.ts)，增加详细接口类型
修复登录逻辑，正确处理API响应
优化商品详情页，对接后端API获取真实数据
重构用户中心页面，对接订单和用户信息接口
统一CSS文件位置，修复样式问题

Plain.text

@@ -5,39 +5,39 @@ e:\TaoTaoWang\pc-frontend\
 │   └── favicon.ico                       # 网站图标
 └── src/
     ├── pages/
-    │   ├── _app.js                       # 应用入口
-    │   ├── _document.js                  # 文档模板
-    │   ├── index.js                      # 首页
-    │   ├── login.js                      # 登录页面
-    │   ├── register.js                   # 注册页面
+    │   ├── _app.ts                       # 应用入口
+    │   ├── _document.ts                  # 文档模板
+    │   ├── index.ts                      # 首页
+    │   ├── login.ts                      # 登录页面
+    │   ├── register.ts                   # 注册页面
     │   ├── products/                     # 商品相关页面
-    │   │   ├── [id].js                   # 商品详情
-    │   │   └── list.js                   # 商品列表
-    │   ├── cart.js                       # 购物车页面
-    │   ├── checkout.js                   # 结算页面
-    │   ├── payment.js                    # 支付页面
+    │   │   ├── [id].ts                   # 商品详情
+    │   │   └── list.ts                   # 商品列表
+    │   ├── cart.ts                       # 购物车页面
+    │   ├── checkout.ts                   # 结算页面
+    │   ├── payment.ts                    # 支付页面
     │   └── user/                         # 用户中心
-    │       ├── index.js                  # 用户中心首页
-    │       ├── orders.js                 # 订单列表
-    │       └── profile.js                # 个人信息
+    │       ├── index.ts                  # 用户中心首页
+    │       ├── orders.ts                 # 订单列表
+    │       └── profile.ts                # 个人信息
     ├── components/
     │   ├── common/                       # 通用组件
     │   ├── layout/                       # 布局组件
     │   └── business/                     # 业务组件
-    ├── api/
-    │   ├── index.js                      # API基础配置
-    │   ├── auth.js                       # 认证相关API
-    │   ├── product.js                    # 商品相关API
-    │   └── order.js                      # 订单相关API
+    ├── service/
+    │   ├── api.ts                      # API基础配置
+    │   ├── auth.ts                       # 认证相关API
+    │   ├── product.ts                    # 商品相关API
+    │   └── order.ts                      # 订单相关API
     ├── store/
-    │   ├── index.js                      # Redux配置
+    │   ├── index.ts                      # Redux配置
     │   └── slices/
-    │       ├── userSlice.js              # 用户状态切片
-    │       ├── productSlice.js           # 商品状态切片
-    │       └── cartSlice.js              # 购物车状态切片
+    │       ├── userSlice.ts              # 用户状态切片
+    │       ├── productSlice.ts           # 商品状态切片
+    │       └── cartSlice.ts              # 购物车状态切片
     ├── utils/
-    │   ├── request.js                    # 请求工具
-    │   └── auth.js                       # 认证工具
+    │   ├── request.ts                    # 请求工具
+    │   └── auth.ts                       # 认证工具
     └── assets/
         ├── css/                          # 样式文件
         └── images/                       # 图片资源