# xpen

**Repository Path**: keman5/xpen

## Basic Information

- **Project Name**: xpen
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-03
- **Last Updated**: 2025-04-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# xppen-shop-web

XP-PEN 官方商城网站前端项目。

## 项目介绍

本项目是 XP-PEN 官方商城的前端代码仓库，基于 Vue3 构建，采用模块化设计，支持多语言和多货币。

## 技术栈

- 框架：Vue3、Vue Router 4
- SSR:  Nuxt3、Node.js
- 语言：TypeScript、ESNext
- CSS：Tailwind CSS 4.0、shadcn-vue、SASS
- HTTP：fetch
- 状态管理库：pinia
- 工具：dayjs、 es-toolkit、 pnpm、 eslint、 prettier

## 安装与运行

### 环境要求

- Node.js >= 22.0.0
- pnpm >= 10.0.0

### 安装依赖

**在项目根目录下运行以下命令：**

```bash
pnpm install
```

### 运行开发环境

**在项目根目录下运行以下命令：**

```bash
pnpm run dev
```
### 构建生产环境

**在项目根目录下运行以下命令：**

```bash
pnpm run build
```

## 项目结构

```plaintext
xppen-shop-web/
├── packages/            # 项目包
│   ├── shop/            # 商城主体
│   │   ├── components/  # 组件
│   │   ├── pages/       # 页面
│   │   ├── stores/      # 状态管理
│   │   └── ...
│   └── ...
├── public/              # 静态资源
├── .eslintrc.js         # ESLint 配置
├── .gitignore           # Git 忽略文件
├── package.json         # 项目配置
└── README.md            # 项目说明
```

## 开发规范

### 命名规范
- 组件名：使用 PascalCase 命名法，如 NavbarLogo.vue
- 文件名：使用 kebab-case 命名法，如 nav-menu.scss
- CSS 类名：使用 snake_case 命名法，如 .navbar_header
### 代码风格
- 使用 ESLint 进行代码检查
- 使用 Prettier 进行代码格式化
- 提交前运行 npm run lint 确保代码质量
### 提交规范
提交信息格式： type(scope): subject

类型（type）:

- feat: 新功能
- fix: 修复 bug
- docs: 文档更新
- style: 代码格式调整
- refactor: 重构
- test: 测试相关
- chore: 构建过程或辅助工具的变动

## 国际化
**目前多语言同步线上环境的，不要手工新增新语言**

项目支持多语言，语言文件位于 `packages/shop/i18n/locales` 目录下。

添加新语言支持：

1. 在 locales 目录下创建新的语言文件
2. 在配置中注册新语言
3. 确保所有翻译字符串都已添加

## 常见问题
### 1. 开发环境启动失败
检查 Node.js 版本是否符合要求，并确保所有依赖已正确安装。

### 2. 样式不生效
确保 SCSS 文件正确导入，并检查类名是否正确。

## 联系方式
如有问题，请联系项目负责人或提交 Issue。


## 通用类名
``` css
.class container-wrapper  #主内容区域
--primary #主色调
--price-color #价格颜色
```

## 接口文档

- 首页接口文档：
https://documenter.getpostman.com/view/7109597/2sB2cPhPwb

- 商品详情页面接口文档：
https://documenter.getpostman.com/view/7109597/2sB2cYbzuA

## 如何将公网仓库的代码合并到内网仓库

```shell

# 添加远程仓库并拉取代码
git remote add other-repo http://172.16.1.33:8081/fe/xppen-shop-web.git
git fetch other-repo

# 找到提交哈希并应用
git log other-repo/master
git cherry-pick xxx

# 解决冲突后提交
git add .
git cherry-pick --continue

# 清理不再需要的远程
git remote remove other-repo

```

## TODO

- 完善移动端适配
- 优化页面加载性能
- 增加更多支付方式
- 完善用户体验