# hanggold-management-web

**Repository Path**: hanggold/hanggold-management-web

## Basic Information

- **Project Name**: hanggold-management-web
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-28
- **Last Updated**: 2025-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">

# 🛍️ HangGold 商城后台管理系统

基于 Vue 3 + Vite + TypeScript + Element Plus 构建的企业级商城后台管理解决方案

[![Vue](https://img.shields.io/badge/Vue-3.x-4FC08D?style=flat-square&logo=vue.js)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
[![Vite](https://img.shields.io/badge/Vite-Latest-646CFF?style=flat-square&logo=vite)](https://vitejs.dev/)
[![Element Plus](https://img.shields.io/badge/Element%20Plus-Latest-409EFF?style=flat-square&logo=element)](https://element-plus.org/)

**面向商城管理人员，提供商品、订单、营销活动、权限系统等完整的后台管理能力**

[在线演示](#-演示地址) • [快速开始](#-安装与启动) • [功能特性](#-功能特性) • [文档](#-目录结构)

</div>

---

## 📚 相关项目

|     项目      | 描述              | 地址                                                                          |
|:-----------:|:----------------|:----------------------------------------------------------------------------|
| 🔧 **后端服务** | 后端接口服务项目        | [hanggold-management](https://gitee.com/hanggold/hanggold-management.git)   |
| 📱 **小程序端** | 微信小程序（uni-app）端 | [hanggold-shop-uniapp](https://gitee.com/hanggold/hanggold-shop-uniapp.git) |
| 🙏 **致谢项目** | 基于的开源模板         | [vue-next-admin](https://gitee.com/lyt-top/vue-next-admin)                  |

---

## 🌐 演示地址

<div align="center">

**🔗 [https://shop.hanggold.com/](https://shop.hanggold.com/)**

|     项目     | 信息       |
|:----------:|:---------|
| 👤 **用户名** | `test`    |
| 🔑 **密码**  | `123456` |

> ⚠️ **提示**：演示环境仅支持**查询**和**新增**操作，不支持删除和更新操作，请各位操作时注意！

</div>

## 📸 主要功能

<div align="center">

|             功能概览             |            活动管理             |            页面装修             |           商品管理           |
|:----------------------------:|:---------------------------:|:---------------------------:|:------------------------:|
| ![主要功能](image/main_tool.png) | ![活动管理](image/activity.png) | ![页面装修](image/decorate.png) | ![商品管理](image/goods.png) |

</div>

---

## ✨ 功能特性

### 🛒 商品中心

- 📂 商品类目管理
- 📦 商品信息管理
- 📊 库存与预警
- ⭐ 评价管理
- 🔧 服务与售后

### 💰 交易中心

- 📋 订单管理
- 🚚 发货与配送
- 🎫 优惠券管理
- 🎁 积分系统
- 👥 拼团活动
- ⚡ 秒杀活动

### 📢 内容运营

- 🎨 页面装修
- 📺 广告管理
- 📢 公告栏
- 📈 数据看板与可视化

### ⚙️ 系统管理

- 👤 用户管理
- 🎭 角色管理
- 📑 菜单管理
- 🔐 权限管理
- 🔘 按钮权限
- 📝 操作日志
- 📖 字典管理

### 📁 文件管理

- 🖼️ 素材中心
- 🎬 音视频管理
- 📂 目录管理
- 📤 分片上传与断点续传

### 🎨 体验增强

- 🎯 多布局切换
- 🌙 暗黑模式
- 🌍 国际化支持
- 🏷️ 标签页管理
- 🔒 组件级与指令级鉴权

### 🏗️ 平台能力

- 🎨 动态装修生成不同类型的展示模版

### 🛠️ 工程化

- ⚡ Vite 极速开发
- 📘 TypeScript 类型约束
- ✅ ESLint + Prettier
- 📦 按需组件与自动导入

---

## 🛠️ 技术栈

<div align="center">

|      分类      | 技术选型                    |
|:------------:|:------------------------|
|    **框架**    | Vue 3 (Composition API) |
|   **构建工具**   | Vite                    |
|   **开发语言**   | TypeScript              |
|  **UI 框架**   | Element Plus            |
|   **路由管理**   | Vue Router 4            |
|   **状态管理**   | Pinia                   |
| **HTTP 客户端** | Axios                   |
|  **样式预处理**   | Sass                    |
|   **图表库**    | ECharts                 |
|    **其他**    | ESLint、Prettier 等       |

</div>

---

## 💻 运行环境

|     项目      | 要求                             |
|:-----------:|:-------------------------------|
| **Node.js** | ≥ 16.x（推荐 LTS 版本）              |
|  **包管理器**   | pnpm（推荐）/ yarn / npm           |
|  **操作系统**   | macOS / Windows / Linux（跨平台支持） |

---

## 🚀 安装与启动

### 1️⃣ 克隆项目

```bash
git clone https://gitee.com/hanggold/hanggold-management-web.git
cd hanggold-management-web
```

### 2️⃣ 安装依赖

```bash
# 使用 pnpm（推荐）
pnpm install

# 或使用 yarn
yarn install

# 或使用 npm
npm install
```

### 3️⃣ 启动开发服务器

```bash
# 使用 pnpm
pnpm dev

# 或使用 yarn
yarn dev

# 或使用 npm
npm run dev
```

> ✅ 启动成功后，浏览器访问控制台提示的本地地址（通常为 `http://localhost:5173/`）

---

## 🔗 与后端联动

> ⚠️ **重要**：请先启动后端接口服务（按其 README 配置并运行）

- 📦 后端接口服务项目：[hanggold-management](https://gitee.com/hanggold/hanggold-management.git)

前端通过环境变量配置后端网关地址（见下方"环境变量"章节）。请确保跨域、鉴权等策略与后端一致。

---

## ⚙️ 环境变量

项目在根目录下使用 `.env*` 文件管理环境变量，例如：

- `.env` - 默认环境变量
- `.env.development` - 开发环境
- `.env.production` - 生产环境

### 常见变量配置

```env
# 接口基础地址
VITE_BASE_URL=https://your-backend-api.example.com

# 是否开启调试日志
VITE_APP_DEBUG=true

# 路由基础路径（如部署在子路径）
VITE_APP_BASE=/
```

> 💡 **提示**：不同环境修改 `VITE_BASE_URL` 指向对应后端地址。修改后请重启本地服务生效。

---

## 📝 常用命令

|       命令        | 说明                 |
|:---------------:|:-------------------|
|   `pnpm dev`    | 启动开发服务器            |
|  `pnpm build`   | 构建生产包              |
| `pnpm preview`  | 预览本地构建产物（需先 build） |
|   `pnpm lint`   | 代码检查               |
| `pnpm lint:fix` | 代码检查并自动修复          |

> 💡 也可使用 `yarn` 或 `npm` 替代 `pnpm`

---

## 📂 目录结构

```
hanggold-management-web/
├── src/
│   ├── api/              # 🔌 后端接口模块（按业务划分）
│   ├── assets/           # 🖼️ 静态资源（图片、图标、样式等）
│   ├── components/       # 🧩 通用组件（表格、上传、图标、弹窗等）
│   ├── directive/        # 📜 自定义指令与权限指令
│   ├── i18n/             # 🌍 国际化配置
│   ├── layout/           # 🎨 布局与导航相关
│   ├── router/           # 🛣️ 路由配置（前后端菜单模式）
│   ├── stores/           # 📦 Pinia 状态管理
│   ├── theme/            # 🎨 全局样式与主题（含暗黑模式）
│   ├── types/            # 📘 TypeScript 类型声明
│   ├── utils/            # 🔧 工具方法与封装（请求、格式化、校验等）
│   └── views/            # 📄 页面视图（按业务模块划分）
├── index.html            # 📄 入口 HTML
├── README.md             # 📖 项目说明文档
└── ...
```

---

## 📦 构建与部署

### 1️⃣ 生产构建

```bash
pnpm build
```

> 📁 构建产物默认输出至 `dist/` 目录

### 2️⃣ 部署到静态服务器

将 `dist/` 目录内容上传至以下任一静态站点服务：

- 🌐 Nginx
- 🌐 Apache
- ☁️ OSS（阿里云/腾讯云等）
- 🚀 CDN

> ⚠️ **注意**：若非根路径部署，确保 `VITE_APP_BASE`、路由 `base` 与服务器配置一致

### 3️⃣ Nginx 配置示例

```nginx
server {
    listen 80;
    server_name your.domain.com;

    root /var/www/hanggold-management-web/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理后端接口
    location /api/ {
        proxy_pass http://your-backend:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
```

## 🔐 权限与菜单

- ✅ 支持**前端路由模式**与**后端动态路由模式**（参考 `src/router/` 与后端返回）
- ✅ 通过自定义指令与组件封装实现**按钮级权限控制**（参考 `src/directive/`、`src/components/auth/`）

---

## 🌍 国际化与主题

- 🌐 **国际化**：语言包位于 `src/i18n/lang/`，可按需扩展
- 🎨 **主题管理**：主题与暗黑模式由 `src/theme/` 统一管理

---

## ❓ 常见问题（FAQ）

<details>
<summary><b>启动后白屏或 404？</b></summary>

- ✅ 确认 Node 版本是否满足要求（≥ 16.x）
- ✅ 删除 `node_modules` 与锁文件后重新安装依赖
- ✅ 检查环境变量与路由 `base` 是否与部署路径一致

</details>

<details>
<summary><b>无法请求后端接口？</b></summary>

- ✅ 检查 `VITE_BASE_URL` 是否正确配置
- ✅ 本地跨域可通过 Vite 代理或 Nginx 反向代理解决

</details>

<details>
<summary><b>图标不显示或样式错乱？</b></summary>

- ✅ 确认静态资源路径与构建资源前缀是否一致

</details>

## 🤝 参与贡献

欢迎提交 Issue 与 Pull Request！

### 贡献指南

- 📝 遵循通用的 Git 提交规范（如 `feat`/`fix`/`docs`/`chore`）
- ✅ 提交前执行 `pnpm lint` 确保无明显规范问题
- 📖 代码风格需符合项目规范

---

## 🔗 相关项目

|     项目      | 描述              | 链接                                                                          |
|:-----------:|:----------------|:----------------------------------------------------------------------------|
| 🔧 **后端服务** | 后端接口服务项目        | [hanggold-management](https://gitee.com/hanggold/hanggold-management.git)   |
| 📱 **小程序端** | 微信小程序（uni-app）端 | [hanggold-shop-uniapp](https://gitee.com/hanggold/hanggold-shop-uniapp.git) |
| 🙏 **致谢项目** | 基于的开源模板         | [vue-next-admin](https://gitee.com/lyt-top/vue-next-admin)                  |

---

## 📄 许可证

请参考仓库根目录的 `LICENSE` 文件；若与上游模板一致，则遵循相同或兼容的开源许可证。

---

<div align="center">

**⭐ 如果这个项目对你有帮助，欢迎 Star！**

如有问题或建议，欢迎反馈交流！

Made with ❤️ by HangGold Team

</div>