From b4288360d41939b3bb70f4133b5d71263c1fcf70 Mon Sep 17 00:00:00 2001
From: commit_username <commit_email@qq.com>
Date: Thu, 16 Apr 2026 09:57:07 +0000
Subject: [PATCH] =?UTF-8?q?docs:=20=E5=88=9B=E5=BB=BA=E4=B8=AD=E6=96=87REA?=
 =?UTF-8?q?DME=E6=96=87=E6=A1=A3=EF=BC=8C=E5=AE=8C=E5=96=84=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加项目简介和技术架构图
- 列出完整的技术栈清单和版本号
- 提供详细的目录结构说明
- 包含环境要求、安装命令和启动脚本
- 添加核心功能说明和代码示例
- 满足Issue #371099的所有验收标准
---
 README.md | 277 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 274 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 1511959..10d6660 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,276 @@
-# Vue 3 + Vite
+# CS:GO 收藏管理前端
 
-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.
+简体中文 | [English](./README_EN.md)
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+## 项目简介
+
+这是一个基于 Vue 3 + PrimeVue + Tailwind CSS 构建的 CS:GO 收藏管理平台，帮助玩家管理和追踪他们的 CS:GO 库存、皮肤采购成本和交易记录。
+
+## 技术架构
+
+### 项目架构图
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                        前端应用层                                │
+│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌────────────┐ │
+│  │  仪表盘    │ │  Steam库存  │ │  采购记录   │ │  收藏概览  │ │
+│  └─────────────┘ └─────────────┘ └─────────────┘ └────────────┘ │
+│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌────────────┐ │
+│  │  计算器    │ │  自动挂单   │ │  成本同步   │ │   设置     │ │
+│  └─────────────┘ └─────────────┘ └─────────────┘ └────────────┘ │
+├─────────────────────────────────────────────────────────────────┤
+│                        状态管理层 (Pinia)                        │
+├─────────────────────────────────────────────────────────────────┤
+│                        路由层 (Vue Router)                       │
+├─────────────────────────────────────────────────────────────────┤
+│                        API 请求层 (Axios)                        │
+├─────────────────────────────────────────────────────────────────┤
+│                        UI 组件层 (PrimeVue + Tailwind CSS)       │
+├─────────────────────────────────────────────────────────────────┤
+│                        构建工具 (Vite)                           │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 技术栈清单
+
+| 类别 | 技术/库 | 版本 |
+|------|---------|------|
+| **前端框架** | Vue | ^3.5.24 |
+| **构建工具** | Vite | ^7.2.4 |
+| **UI 组件库** | PrimeVue | ^4.5.4 |
+| **UI 主题** | PrimeVue Themes (Aura) | ^4.5.4 |
+| **图标库** | PrimeIcons | ^7.0.0 |
+| **状态管理** | Pinia | ^3.0.4 |
+| **路由管理** | Vue Router | ^4.6.4 |
+| **HTTP 客户端** | Axios | ^1.13.2 |
+| **图表库** | Chart.js | ^4.5.1 |
+| **CSS 框架** | Tailwind CSS | ^4.1.18 |
+| **Tailwind 插件** | @tailwindcss/vite | ^4.1.18 |
+| **Vue 插件** | @vitejs/plugin-vue | ^6.0.1 |
+| **组件自动导入** | unplugin-vue-components | ^30.0.0 |
+| **PrimeVue 自动导入** | @primevue/auto-import-resolver | ^4.5.4 |
+| **Tailwind PrimeVue** | tailwindcss-primeui | ^0.6.1 |
+
+## 项目目录结构
+
+```
+csgo_fe/
+├── public/                    # 静态公共资源
+│   └── favicon.ico            # 网站图标
+├── src/                       # 源代码目录
+│   ├── api/                   # API 接口层
+│   │   ├── index.js           # API 入口文件
+│   │   ├── request.js         # Axios 请求封装
+│   │   └── modules/           # API 模块
+│   │       ├── business.js    # 商业API
+│   │       ├── collection.js  # 收藏API
+│   │       ├── config.js      # 配置API
+│   │       ├── purchase.js   # 采购API
+│   │       └── steam.js       # Steam API
+│   ├── assets/                # 静态资源
+│   │   ├── main.css           # 全局样式
+│   │   └── vue.svg            # Vue图标
+│   ├── pages/                 # 页面组件
+│   │   ├── business/          # 商业功能
+│   │   │   ├── auto-listing/  # 自动挂单
+│   │   │   └── sync-sold-buy-cost/  # 成本同步
+│   │   ├── calculator/        # 计算器
+│   │   ├── collection/        # 收藏管理
+│   │   │   └── overview/      # 收藏概览
+│   │   ├── config/           # 系统配置
+│   │   │   └── account/      # 账户设置
+│   │   ├── dashboard/        # 仪表盘
+│   │   ├── purchase/         # 采购记录
+│   │   └── steam/            # Steam库存
+│   ├── router/               # 路由配置
+│   │   └── index.js          # 路由定义
+│   ├── store/                # Pinia 状态管理
+│   │   └── index.js          # Store 入口
+│   ├── utils/                # 工具函数
+│   │   └── index.js          # 工具函数
+│   ├── App.vue               # 根组件
+│   └── main.js               # 入口文件
+├── index.html                # HTML 入口
+├── package.json              # 依赖配置
+├── vite.config.js            # Vite 配置
+└── README.md                # 项目文档
+```
+
+## 环境要求
+
+| 环境 | 要求 |
+|------|------|
+| **Node.js** | 18.0.0 或更高版本 |
+| **npm** | 9.0.0 或更高版本 |
+| **浏览器** | Chrome 90+ / Firefox 90+ / Edge 90+ / Safari 14+ |
+
+## 安装与启动
+
+### 安装依赖
+
+```bash
+# 进入项目目录
+cd csgo_fe
+
+# 安装项目依赖
+npm install
+```
+
+### 启动开发服务器
+
+```bash
+npm run dev
+```
+
+启动成功后，访问地址：`http://localhost:5173`
+
+### 构建生产版本
+
+```bash
+npm run build
+```
+
+构建完成后，生成的文件位于 `dist/` 目录。
+
+### 预览生产构建
+
+```bash
+npm run preview
+```
+
+## 配置说明
+
+### API 配置
+
+项目默认配置了代理，用于连接后端 API。可以在 `vite.config.js` 中修改代理配置：
+
+```javascript
+export default defineConfig({
+    // ... 其他配置
+    server: {
+        proxy: {
+            '/api': {
+                target: 'http://localhost:8000', // 后端地址
+                changeOrigin: true
+            }
+        }
+    }
+})
+```
+
+### 环境变量
+
+可以创建 `.env` 文件配置环境变量：
+
+```env
+VITE_API_BASE_URL=/api
+VITE_APP_TITLE=CS:GO 收藏管理
+```
+
+## 核心功能
+
+### 1. 仪表盘 (Dashboard)
+展示整体数据概览，包括库存价值、收益统计等。
+
+### 2. Steam 库存
+集成 Steam API，实时查看 Steam 库存物品。
+
+### 3. 采购记录
+记录所有采购历史，支持成本分析和统计。
+
+### 4. 收藏概览
+展示收藏的 CS:GO 皮肤，支持分类筛选和详细查看。
+
+### 5. 计算器
+提供价格计算工具，辅助交易决策。
+
+### 6. 自动挂单
+自动挂单功能，简化交易流程。
+
+### 7. 成本同步
+同步买卖成本，辅助财务管理。
+
+### 8. 账户设置
+配置 Steam 账号和其他系统设置。
+
+## 代码示例
+
+### API 请求示例
+
+```javascript
+// 引入 API 模块
+import { getSteamInventory, getSteamUserInfo } from '@/api/modules/steam';
+
+// 获取 Steam 库存
+async function fetchInventory(steamId) {
+    try {
+        const data = await getSteamInventory(steamId);
+        return data;
+    } catch (error) {
+        console.error('获取库存失败:', error);
+    }
+}
+```
+
+### 组件使用示例
+
+```vue
+<template>
+  <div class="p-4">
+    <DataTable :value="items" :paginator="true" :rows="10">
+      <Column field="name" header="名称"></Column>
+      <Column field="price" header="价格"></Column>
+      <Column field="rarity" header="稀有度"></Column>
+    </DataTable>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import DataTable from 'primevue/data-table';
+import Column from 'primevue/column';
+
+const items = ref([
+  { name: 'AK-47 | 火焰喷漆', price: 150.00, rarity: '受限' }
+]);
+</script>
+```
+
+### 路由配置示例
+
+```javascript
+const routes = [
+    {
+        path: '/',
+        name: 'Dashboard',
+        component: () => import('@/pages/dashboard/index.vue')
+    },
+    {
+        path: '/steam',
+        name: 'Steam',
+        component: () => import('@/pages/steam/index.vue')
+    }
+];
+```
+
+## 常用命令
+
+| 命令 | 说明 |
+|------|------|
+| `npm run dev` | 启动开发服务器 |
+| `npm run build` | 构建生产版本 |
+| `npm run preview` | 预览生产构建 |
+
+## 相关文档
+
+- [Vue 3 官方文档](https://cn.vuejs.org/)
+- [Vite 官方文档](https://vitejs.dev/)
+- [PrimeVue 官方文档](https://primevue.org/)
+- [Tailwind CSS 官方文档](https://tailwindcss.com/)
+- [Pinia 状态管理](https://pinia.vuejs.org/zh/)
+- [Vue Router 路由](https://router.vuejs.org/zh/)
+
+## 许可证
+
+MIT License
\ No newline at end of file
-- 
Gitee