# 企业文化平台前端

基于 `Vue 3 + Vite + TypeScript` 的企业文化平台前端项目，包含前台内容展示、用户中心、内容发布、积分商城、限时竞拍等，以及后台内容与配置管理。

## 项目概览

- 前台业务：
  - 首页内容流
  - YA 文化 / 问吧等频道页
  - 帖子、视频、专栏、专访、问吧、实践、案例详情
  - 用户中心、他人主页、我的互动内容
  - 视频/长文/案例发布
  - 积分商城、竞拍、私信等功能页
- 后台业务：
  - 标签、轮播图、案例库管理
  - 内容管理：专栏 / 专访 / 视频 / 问吧
  - 配置管理：商城、竞拍、每日抽奖

## 技术栈

- 框架：`Vue 3`
- 构建工具：`Vite`
- 语言：`TypeScript`
- 路由：`vue-router`
- 状态管理：`Pinia`
- UI 组件：`Element Plus`
- 原子化样式：`UnoCSS`
- 组合式工具：`VueUse`
- 富文本编辑：`WangEditor`
- HTTP 请求：`Axios`
- 提示通知：`Notivue`
- SVG 图标：`vite-plugin-svg-icons`
- 自动导入：`unplugin-auto-import`、`unplugin-vue-components`

## 运行环境

- Node.js：`^20.19.0 || >=22.12.0`
- 包管理器：推荐 `pnpm`

## 安装依赖

```bash
pnpm install
```

## 本地开发

```bash
pnpm dev
```

默认开发端口：

```bash
http://localhost:3000
```

## 常用脚本

### 启动开发环境

```bash
pnpm dev
```

### 类型检查

```bash
pnpm type-check
```

### 代码检查并自动修复

```bash
pnpm lint
```

### 代码格式化

```bash
pnpm format
```

### 本地预览构建结果

```bash
pnpm preview
```

### 默认构建

```bash
pnpm build
```

### 按环境构建

```bash
pnpm build:dev
pnpm build:test
pnpm build:prod
```

### 发布脚本

```bash
pnpm deploy:test
pnpm deploy:prod
pnpm deploy:prod:update-info
```

## 环境变量

项目使用 `.env.local` 管理本地环境变量。常见变量如下：

```bash
VITE_AI_API_URL=
MY_OPENAI_API_KEY=
MY_OPENAI_BASE_URL=
BACKEND_API_URL=

DEPLOY_PROD_HOST=
DEPLOY_PROD_PORT=
DEPLOY_PROD_USERNAME=
DEPLOY_PROD_PASSWORD=

DEPLOY_TEST_HOST=
DEPLOY_TEST_PORT=
DEPLOY_TEST_USERNAME=
DEPLOY_TEST_PASSWORD=
```

说明：

- `VITE_` 前缀变量会注入前端运行时。
- `BACKEND_API_URL` 用于业务接口请求地址。
- `MY_OPENAI_*` 用于本地 AI 代理 / OpenAI 兼容接口。
- `DEPLOY_*` 用于部署脚本连接服务器。

建议：

- 不要在 README 中记录真实密钥和密码。
- 团队协作时建议补一个 `.env.example` 作为示例模板。

## 目录结构

```text
.
├─ deploy/                # 测试 / 正式环境部署脚本
├─ public/                # 公共静态资源
├─ server/                # 本地服务或辅助服务代码
├─ src/
│  ├─ api/                # 接口定义与请求封装
│  ├─ assets/             # 图片、SVG、基础样式
│  ├─ components/         # 通用组件
│  ├─ constants/          # 常量、枚举、选项配置
│  ├─ hooks/              # 组合式 hooks
│  ├─ layoutCulture/      # 前台整体布局
│  ├─ plugins/            # Vite / 业务插件
│  ├─ router/             # 路由与守卫
│  ├─ stores/             # Pinia stores
│  ├─ style/              # 全局样式
│  ├─ utils/              # 工具函数、请求、存储、版本检测等
│  ├─ views/              # 页面级视图
│  ├─ App.vue
│  ├─ config.ts
│  └─ main.ts
├─ vite.config.ts         # Vite 配置
├─ uno.config.ts          # UnoCSS 配置
├─ tsconfig*.json         # TypeScript 配置
└─ package.json
```

## 路由结构

### 前台主路由

- `/homePage/homeTab`
- `/homePage/yaTab`
- `/homePage/askTab`
- `/userPage/*`
- `/videoDetail/:id`
- `/articleDetail/:id`
- `/questionDetail/:id`
- `/publishVideo`
- `/publishCase`
- `/publishLongArticle/:type`
- `/pointsStore`
- `/auction`

### 后台路由

- `/backend/tags`
- `/backend/carousel`
- `/backend/caseManage`
- `/backend/goodsDistribution`
- `/backend/contentsMenu/*`
- `/backend/settingsMenu/*`
- `/backend/columnsMenu/*`

## 工程特性

- 基于 `Element Plus` 组件体系构建
- 使用 `UnoCSS` 进行原子化样式开发
- 使用 `AutoImport` 与 `Components` 自动导入 Vue / Element Plus 能力
- 支持 SVG 图标自动注册
- 构建阶段按依赖进行 `manualChunks` 拆包
- 生产环境启用版本轮询更新逻辑

## 开发建议

### 推荐编辑器

- `VS Code`
- 安装插件：
  - `Vue - Official`
  - `ESLint`
  - `Prettier`
  - `UnoCSS`

### 样式建议

- 优先使用 `UnoCSS`
- 页面结构复杂时再配合少量 `scoped style`
- 公共视觉元素优先沉淀到 `src/components/common`

### 代码组织建议

- 页面接口统一放在 `src/api`
- 复用逻辑统一抽到 `src/hooks`
- 通用方法放在 `src/utils`
- 状态共享走 `Pinia`

## 构建与部署说明

- `pnpm build:*` 用于不同环境构建
- `deploy/` 目录中维护测试与正式环境发布脚本
- 发布前请确认：
  - 环境变量配置正确
  - 当前分支代码已通过基本功能验证
  - 需要的服务器连接信息已更新
