feat: 初始化前端项目基础架构

添加项目基础文件结构，包括Vue3+TypeScript配置、路由管理、状态管理和基础页面组件
2025-12-09 11:03:15 +08:00
commit 0f89705f94
30 changed files with 4669 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,36 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/Plain.text
+++ b/Plain.text
@@ -0,0 +1,43 @@
+e:\TaoTaoWang\pc-frontend\
+├── package.json                          # 项目依赖配置
+├── next.config.js                        # Next.js配置
+├── public/
+│   └── favicon.ico                       # 网站图标
+└── src/
+    ├── pages/
+    │   ├── _app.js                       # 应用入口
+    │   ├── _document.js                  # 文档模板
+    │   ├── index.js                      # 首页
+    │   ├── login.js                      # 登录页面
+    │   ├── register.js                   # 注册页面
+    │   ├── products/                     # 商品相关页面
+    │   │   ├── [id].js                   # 商品详情
+    │   │   └── list.js                   # 商品列表
+    │   ├── cart.js                       # 购物车页面
+    │   ├── checkout.js                   # 结算页面
+    │   ├── payment.js                    # 支付页面
+    │   └── user/                         # 用户中心
+    │       ├── index.js                  # 用户中心首页
+    │       ├── orders.js                 # 订单列表
+    │       └── profile.js                # 个人信息
+    ├── components/
+    │   ├── common/                       # 通用组件
+    │   ├── layout/                       # 布局组件
+    │   └── business/                     # 业务组件
+    ├── api/
+    │   ├── index.js                      # API基础配置
+    │   ├── auth.js                       # 认证相关API
+    │   ├── product.js                    # 商品相关API
+    │   └── order.js                      # 订单相关API
+    ├── store/
+    │   ├── index.js                      # Redux配置
+    │   └── slices/
+    │       ├── userSlice.js              # 用户状态切片
+    │       ├── productSlice.js           # 商品状态切片
+    │       └── cartSlice.js              # 购物车状态切片
+    ├── utils/
+    │   ├── request.js                    # 请求工具
+    │   └── auth.js                       # 认证工具
+    └── assets/
+        ├── css/                          # 样式文件
+        └── images/                       # 图片资源
--- a/README.md
+++ b/README.md
@@ -0,0 +1,42 @@
+# pc_frontend
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
--- a/doc/开发文档.md
+++ b/doc/开发文档.md
@@ -0,0 +1,85 @@
+# TaotaoWang 前端开发思路
+
+## 一、项目概述
+TaotaoWang 是一个电商前端项目，采用现代化的技术栈，实现了响应式设计，提供良好的用户体验。
+
+## 二、页面结构设计
+页面采用经典的上中下三栏布局：
+
+### 1. 顶部区域
+- **导航栏**：包含网站 logo、主导航菜单（首页、分类、品牌、活动等）
+- **搜索框**：支持商品搜索，带有搜索历史记录和自动补全功能
+- **用户中心入口**：登录/注册、购物车、个人中心等快捷入口
+
+### 2. 中部区域
+- **分类标签**：水平排列的商品分类标签，支持点击切换
+- **滚动广告**：轮播图展示热门活动、新品推荐等内容
+- **推荐模块**：根据用户行为推荐相关商品
+
+### 3. 底部区域
+- **商品列表**：
+  - 商品卡片设计：每个商品为独立小方盒，包含图片、名称、价格、销量等信息
+  - 分页加载：初始展示30个商品，下拉滚动时继续加载，最多加载至90个商品
+  - 加载机制：使用 Intersection Observer API 实现无限滚动
+- **底部信息**：
+  - ICP备案信息
+  - 版权声明
+  - 联系方式
+  - 友情链接
+
+## 三、技术栈
+- **框架**：Vue 3 + TypeScript
+- **构建工具**：Vite
+- **路由**：Vue Router
+- **状态管理**：Pinia（可选）
+- **UI组件库**：可考虑引入 Element Plus 或自定义组件
+- **HTTP请求**：Axios
+- **样式**：CSS3 + SCSS（可选）
+
+## 四、核心功能实现
+
+### 1. 无限滚动加载
+- 使用 Intersection Observer API 监听滚动事件
+- 维护商品列表状态，控制加载数量上限（90个）
+- 实现加载状态提示和空状态处理
+
+### 2. 分类标签与滚动广告
+- 分类标签支持点击切换和高亮显示
+- 轮播广告支持自动播放、手动切换和指示器
+
+### 3. 商品卡片设计
+- 响应式布局，适配不同屏幕尺寸
+- 悬停效果和交互反馈
+- 图片懒加载优化
+
+## 五、性能优化
+- 图片懒加载
+- 组件按需加载
+- 数据缓存策略
+- 减少不必要的HTTP请求
+
+## 六、开发流程
+1. 需求分析与设计
+2. 技术栈选型与搭建
+3. 基础架构开发
+4. 组件开发与测试
+5. 功能集成与联调
+6. 性能优化与测试
+7. 部署与上线
+
+## 七、项目结构
+```
+src/
+├── assets/          # 静态资源
+├── components/      # 公共组件
+│   ├── Header.vue   # 头部组件
+│   ├── Footer.vue   # 底部组件
+│   ├── GoodsCard.vue # 商品卡片组件
+│   └── Carousel.vue  # 轮播图组件
+├── views/           # 页面视图
+│   └── Home.vue     # 首页
+├── route/           # 路由配置
+├── services/        # API服务
+├── utils/           # 工具函数
+└── main.ts          # 入口文件
+```
--- a/env.d.ts
+++ b/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "pc_frontend",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build"
+  },
+  "dependencies": {
+    "ant-design-vue": "^4.2.6",
+    "axios": "^1.13.2",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.22",
+    "vue-router": "^4.6.3"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.2",
+    "@types/node": "^22.18.11",
+    "@types/react": "^19.2.7",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "npm-run-all2": "^8.0.4",
+    "typescript": "~5.9.0",
+    "vite": "^7.1.11",
+    "vite-plugin-vue-devtools": "^8.0.3",
+    "vue-tsc": "^3.1.1"
+  }
+}
--- a/public/0.png
+++ b/public/0.png
--- a/public/b1.jpeg
+++ b/public/b1.jpeg
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <RouterView />
+  </div>
+</template>
+<script setup lang="ts">
+import { RouterView } from "vue-router";
+
+</script>
+
+<style scoped></style>
--- a/src/Route/route.ts
+++ b/src/Route/route.ts
@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+// 导入组件
+import Home from '../Views/Home.vue'
+import Login from '../Views/Login.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: Home
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: Login
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+export default router
--- a/src/Service/ApiService.ts
+++ b/src/Service/ApiService.ts
@@ -0,0 +1,47 @@
+import axios from 'axios'
+
+const api = axios.create({
+  baseURL: 'http://localhost:7071/api', // 后端API基础URL
+  timeout: 10000, // 请求超时时间
+  withCredentials: true, // 跨域请求时是否需要使用凭证
+})
+// 添加请求拦截器
+api.interceptors.request.use(
+  (config) => {
+    // 获取token
+    const token = localStorage.getItem('token')
+    if (token) {
+      config.headers['Authorization'] = `Bearer ${token}`
+    }
+    return config
+  },
+  (error) => {
+    // 对请求错误做些什么
+    console.error('请求错误:', error)
+    return Promise.reject(error)
+  }
+)
+// 添加响应拦截器
+api.interceptors.response.use(
+  (response) => {
+    // 返回响应数据
+    return response.data
+  },
+  (error) => {
+    // 处理响应错误
+    if (error.response) {
+      // 服务器返回了响应，但状态码不在2xx范围内
+      console.error('响应状态码:', error.response.status)
+      console.error('响应数据:', error.response.data)
+    } else if (error.request) {
+      // 请求已发送，但没有收到响应
+      console.error('请求已发送，但没有收到响应:', error.request)
+    } else {
+      // 其他错误
+      console.error('其他错误:', error.message)
+    }
+    return Promise.reject(error)
+  }
+)
+
+export default api
--- a/src/Service/UserService.ts
+++ b/src/Service/UserService.ts
@@ -0,0 +1,12 @@
+import api from "./ApiService";
+import router from '../Route/route'
+import type { Login } from "@/Util/Type";
+class UserService {
+    login(params: Login) {
+       return api.post('/auth/login', {
+                username: params.username,
+                password: params.password
+            })
+    }
+}
+export default new UserService()
--- a/src/Util/Type.ts
+++ b/src/Util/Type.ts
@@ -0,0 +1,13 @@
+//  项目中使用的类型定义
+
+// 商品详情类型
+export type ProductDetail = {
+  id: string
+  name: string
+  price: string
+  img: string
+}
+export type Login = {
+  username: string
+  password: string
+}
--- a/src/Util/globalStore.ts
+++ b/src/Util/globalStore.ts
@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+export const useGlobalStore = defineStore('global', {
+    // 定义状态
+    state: () => ({
+        token: localStorage.getItem('token') || null,
+    }),
+    // 定义操作
+    actions: {
+        // 定义设置token的操作
+        setToken(token: string) {
+            this.token = token
+            localStorage.setItem('token', token)
+        },
+        // 定义清除token的操作
+        clearToken() {
+            this.token = null
+            localStorage.removeItem('token')
+        }
+    }
+})
--- a/src/Views/Home.vue
+++ b/src/Views/Home.vue
@@ -0,0 +1,18 @@
+<template>
+  <div id="home">
+    <Header></Header>
+    <Main></Main>
+    <Footer></Footer>
+  </div>
+</template>
+<script setup lang="ts">
+import Header from "./herde.vue";
+import Main from "./main.vue";
+import Footer from "./footer.vue";
+</script>
+<style scoped>
+#home {
+  height: 100%;
+  padding: 0 20px;
+}
+</style>
--- a/src/Views/Login.vue
+++ b/src/Views/Login.vue
@@ -0,0 +1,347 @@
+<!-- 登录页面 -->
+<template>
+  <div id="login-container-bg">
+    <div class="login-container">
+      <div class="login-card">
+        <div class="login-header">
+          <h1 class="login-title">欢迎登录</h1>
+          <p class="login-subtitle">请输入您的账号和密码</p>
+        </div>
+
+        <form class="login-form" @submit.prevent="login">
+          <div class="form-group">
+            <label class="form-label" for="username">用户名</label>
+            <input type="text" id="username" v-model="loginform.username" name="username" required class="form-input"
+              placeholder="请输入用户名" :class="{ 'input-error': errorMessage && !loginform.username }">
+          </div>
+
+          <div class="form-group">
+            <label class="form-label" for="password">密码</label>
+            <input type="password" id="password" v-model="loginform.password" name="password" required
+              class="form-input" placeholder="请输入密码" :class="{ 'input-error': errorMessage && !loginform.password }">
+          </div>
+
+          <div v-if="errorMessage" class="error-message">
+            {{ errorMessage }}
+          </div>
+
+          <button type="submit" class="login-button" :disabled="isLoading">
+            <span v-if="isLoading" class="loading-spinner"></span>
+            {{ isLoading ? '登录中...' : '登录' }}
+          </button>
+
+          <div class="login-footer">
+            <p class="register-link">
+              还没有账号？ <a href="#" @click.prevent="router.push({ name: 'register' })">立即注册</a>
+            </p>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import userService from "@/Service/UserService";
+import { useRouter } from 'vue-router'
+import type { Login } from "@/Util/Type";
+import { useGlobalStore } from "@/Util/globalStore";
+const router = useRouter()
+
+const loginform = ref<Login>({
+  username: '',
+  password: ''
+})
+
+const errorMessage = ref('')
+const isLoading = ref(false)
+
+const login = async () => {
+  // 重置错误信息
+  errorMessage.value = ''
+
+  // 简单的表单验证
+  if (!loginform.value.username || !loginform.value.password) {
+    errorMessage.value = '请输入用户名和密码'
+    return
+  }
+
+  try {
+    isLoading.value = true
+    const userLoginResponse = await userService.login(loginform.value)
+
+    // 注意：根据响应拦截器，userLoginResponse已经是response.data
+    if (userLoginResponse.data.code === 200) {
+      // 登录成功后，跳转到首页
+      router.push({ name: 'home' })
+      // 登录成功后，将token存储到全局状态管理中
+      useGlobalStore().setToken(userLoginResponse.data.token)
+    } else {
+      // 登录失败后，显示错误信息给用户
+      errorMessage.value = userLoginResponse.data.msg || '登录失败，请检查用户名和密码'
+    }
+  } catch (error: any) {
+    console.error('登录失败:', error)
+    // 登录失败后，显示错误信息给用户
+    errorMessage.value = error.response?.data?.msg || '网络错误，请稍后重试'
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<style scoped>
+
+/* 登录容器背景 */
+#login-container-bg {
+  background-image: url('/b1.jpeg');
+  background-size: 100vw 100vh; /* 与视口大小一致 */
+  background-position: center;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+
+}
+
+/* 登录容器 */
+.login-container {
+  position: absolute;
+  /* 调整定位，使其在背景中居中显示 */
+  top: 50%;
+  right: 10%; /* 调整右侧位置，避免超出屏幕 */
+  transform: translateY(-50%);
+  width: 100%;
+  max-width: 400px;
+  padding: 20px;
+  animation: fadeIn 0.5s ease-in;
+}
+
+/* 登录卡片 */
+.login-card {
+  /* 实现从父容器背景截取的效果 */
+  position: relative;
+  border-radius: 12px;
+  padding: 40px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  overflow: hidden;
+  /* 关键：使用固定背景定位，与父容器背景完全对齐 */
+  background-image: url('/b1.jpeg');
+  background-size: 100vw 100vh; /* 与视口大小一致 */
+  background-position: 82.5% 49%;
+  background-attachment: fixed;
+  /* 确保背景图片不会重复 */
+  background-repeat: no-repeat;
+}
+
+.login-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
+}
+
+/* 登录头部 */
+.login-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.login-title {
+  color: #333;
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.login-subtitle {
+  color: #666;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+/* 登录表单 */
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* 表单组 */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* 表单标签 */
+.form-label {
+  color: #333;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* 表单输入框 */
+.form-input {
+  padding: 12px 16px;
+  border: 2px solid #e1e5e9;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: all 0.3s ease;
+  outline: none;
+  background-color: #f9fafb;
+}
+
+.form-input:focus {
+  border-color: #667eea;
+  background-color: white;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-input.input-error {
+  border-color: #ef4444;
+}
+
+/* 错误信息 */
+.error-message {
+  background-color: #fee2e2;
+  color: #dc2626;
+  padding: 10px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  margin-top: -10px;
+  margin-bottom: 10px;
+  animation: shake 0.5s ease-in-out;
+}
+
+/* 登录按钮 */
+.login-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  padding: 14px 24px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.login-button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+
+.login-button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.login-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 加载状态 */
+.loading-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+/* 登录页脚 */
+.login-footer {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.register-link {
+  color: #666;
+  font-size: 14px;
+}
+
+.register-link a {
+  color: #667eea;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.3s ease;
+}
+
+.register-link a:hover {
+  color: #764ba2;
+  text-decoration: underline;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes shake {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-5px);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(5px);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+  .login-container {
+    padding: 15px;
+  }
+
+  .login-card {
+    padding: 30px 20px;
+  }
+
+  .login-title {
+    font-size: 24px;
+  }
+
+  .form-input {
+    padding: 10px 14px;
+    font-size: 14px;
+  }
+
+  .login-button {
+    padding: 12px 20px;
+    font-size: 14px;
+  }
+}
+</style>
--- a/src/Views/footer.vue
+++ b/src/Views/footer.vue
@@ -0,0 +1,61 @@
+<template>
+  <div id="footer">
+    <div id=""></div>
+    <div id="footer-contact">
+        <productList :productList="productLists" />
+    </div>
+    <div id="footer-copyright">
+      <!-- 版权信息 -->
+        <h2>Copyright @ 2023 淘淘王</h2>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import productList from './product/productList.vue'
+const router = useRouter()
+// 定义商品列表
+const productLists = ref([
+  {
+    id: '1',
+    name: '商品1',
+    price: '100',
+    img: '',
+  },
+  {
+    id: '2',
+    name: '商品2',
+    price: '200',
+    img: '',
+  },
+  {
+    id: '3',
+    name: '商品3',
+    price: '300',
+    img: '',
+  },
+  {
+    id: '4',
+    name: '商品4',
+    price: '400',
+    img: '',
+  },
+])
+</script>
+<style scoped>
+#footer {
+  width: 100%;
+  background-color: #f5f5f5;
+  padding:  0 20px;
+}
+h1 {
+  color: #42b983;
+}
+
+#footer-contact {
+  /* 高度根据内容自适应 */
+  height: initial;
+}
+</style>
--- a/src/Views/herde.vue
+++ b/src/Views/herde.vue
@@ -0,0 +1,79 @@
+<template>
+  <div id="header">
+    <div id="header-profile">
+      <div id="header-profile-left">
+        <!-- 登录 注册 -->
+        <Button type="primary" @click="router.push('/login')">登录</Button>
+        <Button type="primary" @click="router.push('/register')">注册</Button>
+      </div>
+      <div id="header-profile-right">
+        <!-- 购物车 个人中心 -->
+        <Button type="primary" @click="router.push('/cart')">购物车</Button>
+        <Button type="primary" @click="router.push('/user')">个人中心</Button>
+      </div>
+    </div>
+    <Row id="header-nav-row">
+      <Col :span="4">
+        <a href="/">TaoTaoWang</a>
+      </Col>
+      <Col :span="16">
+          <a-input-search v-model:value="value" placeholder="请输入" style="width: 200px"
+            @search="onSearch" />
+      </Col>
+      <Col :span="4">
+        <a href="/product">商品列表</a>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Button, Col, Row ,Space } from 'ant-design-vue';
+const router = useRouter()
+// 定义搜索框绑定的变量
+const value = ref('')
+// 定义搜索框的搜索事件
+const onSearch = (value: string) => {
+  console.log('搜索关键词:', value)
+}
+</script>
+<style scoped>
+#header {
+  width: 100%;
+  background-color: #f5f5f5;
+  padding: 0 20px;
+}
+
+h1 {
+  color: #42b983;
+}
+
+#header-profile {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 60px;
+}
+
+#header-profile-left {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+#header-profile-left>button {
+  margin-right: 10px;
+}
+
+#header-profile-right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+#header-profile-right>button {
+  margin-left: 10px;
+}
+</style>
--- a/src/Views/main.vue
+++ b/src/Views/main.vue
@@ -0,0 +1,69 @@
+<template>
+  <div id="main">
+    <div id="main-header">
+      <Button type="primary" @click="router.push('/')">按钮1</Button>
+      <Button type="primary" @click="router.push('/list')">按钮2</Button>
+      <Button type="primary" @click="router.push('/cart')">按钮3</Button>
+      <Button type="primary" @click="router.push('/history')">按钮4</Button>
+      <Button type="primary" @click="router.push('/user')">按钮5</Button>
+      <Button type="primary" @click="router.push('/login')">按钮6</Button>
+      <Button type="primary" @click="router.push('/register')">按钮7</Button>
+    </div>
+      <Row id="main-content">
+        <Col class="main-content-col-top" :span="6">
+          <h2>商品列表</h2>
+        </Col>
+        <Col class="main-content-col-center" :span="12">
+          <Row id="main-content-ad">
+            <Col :span="12">
+              <h2>轮动广告</h2>
+            </Col>
+            <Col :span="12">
+              <h2>百亿补贴</h2>
+            </Col>
+          </Row>
+          <Row id="main-content-hot-goods">
+            <!-- 热门商品展示 -->
+            <Col :span="6">
+              <h2>热门商品1</h2>
+            </Col>
+            <Col :span="6">
+              <h2>热门商品2</h2>
+            </Col>
+            <Col :span="6">
+              <h2>热门商品3</h2>
+            </Col>
+            <Col :span="6">
+              <h2>热门商品4</h2>
+            </Col>
+          </Row>
+        </Col>
+        <Col class="main-content-col-bottom" :span="6">
+          <h2>个人信息</h2>
+        </Col>
+      </Row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Button, Col, Row } from 'ant-design-vue';
+const router = useRouter()
+</script>
+<style scoped>
+#main {
+  width: 100%;
+  padding: 0 20px;
+}
+h1 {
+  color: #42b983;
+}
+#main-header {
+  /* 根据中心对齐 分布按钮 */
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  padding: 8px 0;
+}
+</style>
--- a/src/Views/product/productList.vue
+++ b/src/Views/product/productList.vue
@@ -0,0 +1,85 @@
+<!-- 根据父类传递的商品列表渲染商品列表 -->
+<template>
+  <div id="product-list">
+    <div id="product-list-header" v-for="product in productList" :key="product.id">
+      <!-- 这个商品的id是加密 -->
+      <a href="http://localhost:5173/product/{{ product.id }}" target="_blank">
+        <div id="product-list-header-img">
+          <img class="product-list-header-img" :src="product.img || '/0.png'" alt="商品图片">
+          <div class="product-list-header-img-mask">
+          </div>
+        </div>
+        <div id="product-list-header-content">
+          <h2>{{ product.name }}</h2>
+        </div>
+        <div id="product-list-header-price">
+          <h2>{{ product.price }}</h2>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { type PropType } from 'vue'
+import type { ProductDetail } from '@/Util/Type'
+import { useGlobalStore } from '@/Util/globalStore'
+// 接收父类传递的商品列表
+const props = defineProps({
+  productList: {
+    type: Array as PropType<ProductDetail[]>,
+    default: () => [],
+  },
+})
+
+</script>
+<style scoped>
+/* 自定义css */
+/* 商品列表 */
+#product-list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+h2 {
+  color: #42b983;
+}
+
+/* 商品 */
+#product-list-header {
+  max-width: 16.666666666666%;
+  height: initial;
+  margin: 8px;
+}
+
+#product-list-header-img {
+  position: relative;
+  width: 100%;
+  height: 180px;
+  overflow: hidden;
+}
+
+.product-list-header-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+/* 鼠标图片悬浮亮度变低 */
+.product-list-header-img-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  background-color: transparent;
+  transition: all 0.3s ease;
+  z-index: 999999;
+}
+
+#product-list-header-img:hover .product-list-header-img-mask {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+</style>
--- a/src/Views/product/productdetil.vue
+++ b/src/Views/product/productdetil.vue
@@ -0,0 +1,27 @@
+<!-- 商品详情页面 -->
+ <template>
+  <div id="product-detail">
+    <van-row id="product-detail-header">
+      <van-col :span="24">
+        <h2>商品详情</h2>
+      </van-col>
+    </van-row>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+// 根据路由获取商品id
+const productId = ref(router.currentRoute.value.params.productId)
+// 在根据service获取商品详情
+</script>
+<style scoped>
+#product-detail {
+  width: 100%;
+  padding: 0 20px;
+}
+h2 {
+  color: #42b983;
+}
+</style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './Route/route'
+import { createPinia } from 'pinia'
+// 导入正确的 Vue 版本
+import Antd from 'ant-design-vue'
+// 导入正确的样式
+import 'ant-design-vue/dist/reset.css'
+
+const app = createApp(App)
+const pinia = createPinia()
+app.use(router)
+app.use(pinia)
+app.use(Antd)
+app.mount('#app')
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})