# zhora-admin

**Repository Path**: coding_13/zhora-admin

## Basic Information

- **Project Name**: zhora-admin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-08
- **Last Updated**: 2026-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# zhora-admin

基于 **Vue 3**、**Vite 6**、**Element Plus** 与 **TypeScript** 的后台管理前端，提供系统管理、定时任务、OSS 等常见业务能力，接口通过环境变量对接后端服务。

## 技术栈

| 类别 | 技术 |
|------|------|
| 框架 | Vue 3、Vue Router 4 |
| 构建 | Vite 6 |
| UI | Element Plus、@element-plus/icons-vue |
| 状态 | Pinia |
| 请求 | Axios |
| 图表 | ECharts、vue-echarts |
| 富文本 | wangEditor 5 |
| 工具 | @vueuse/core、lodash、mitt、nprogress |
| 语言与规范 | TypeScript、ESLint、Prettier |

## 环境要求

- **Node.js** ≥ 18（推荐 20 LTS）
- **npm** ≥ 9（或兼容的 pnpm / yarn）

## 快速开始

```bash
# 安装依赖
npm install

# 本地开发（默认 http://0.0.0.0:8001）
npm run dev

# 生产构建，产物在 dist/
npm run build

# 先构建再本地预览 dist
npm run serve
```

开发前请根据实际后端地址修改环境文件（见下节）。

## 环境变量

使用 Vite 约定：仅 `VITE_` 前缀变量会注入到前端代码；`index.html` 中通过 `vite-plugin-html` 注入 `VITE_APP_API` 到 `window.SITE_CONFIG.apiURL`。

| 文件 | 说明 |
|------|------|
| `.env.development` | 开发环境（`npm run dev`） |
| `.env.production` | 生产构建（`npm run build`） |

示例（请按环境改成你的网关地址）：

```env
VITE_APP_API=http://localhost:19001/admin
```

> **注意**：仓库中的 `.env.*` 仅为示例。生产环境务必使用真实 HTTPS 域名，且不要将含密钥的配置提交到版本库。

## 常用脚本

| 命令 | 作用 |
|------|------|
| `npm run dev` | 启动开发服务器 |
| `npm run build` | 生产构建（等同 `build:prod`） |
| `npm run build:prod` | `vite build --mode production` |
| `npm run serve` | 构建后以 `vite preview` 预览 |
| `npm run lint` | 对 `src` 下 `.vue` / `.ts` 执行 ESLint 并尝试自动修复 |

提交前若配置了 git hooks，会通过 `lint-staged` 对暂存文件执行 ESLint。

## 目录结构（简要）

```
├── public/              # 静态资源（原样拷贝到站点根路径，如 favicon.ico）
├── src/
│   ├── assets/          # 样式、图片、主题、图标（含 SVG 雪碧图源文件）
│   ├── components/      # 业务与基础组件（如 ren-*、wang-editor）
│   ├── constants/       # 常量
│   ├── hooks/           # 组合式函数
│   ├── layout/          # 布局（侧栏、顶栏等）
│   ├── router/          # 路由
│   ├── service/         # 接口封装
│   ├── store/           # Pinia
│   ├── types/           # TS 类型
│   ├── utils/           # 工具方法
│   ├── views/           # 页面（sys、job、oss 等）
│   ├── App.vue
│   └── main.ts
├── index.html           # 入口 HTML（含 favicon、全局 SITE_CONFIG 占位）
├── vite.config.ts       # Vite 配置（别名 @、端口、分包等）
└── tsconfig.json        # TypeScript 配置
```

## 构建与部署

- **`base`** 在 `vite.config.ts` 中设为 `./`，便于将 `dist/` 部署到任意子路径或静态托管（相对路径资源）。
- 将 `npm run build` 生成的 **`dist`** 目录上传到 Nginx、OSS 静态站点或 CDN 即可；需保证前端能访问到配置的后端 `VITE_APP_API`（注意跨域与反向代理）。

## 开发说明

- **路径别名**：`@` 指向 `src/`，与 `tsconfig.json` 中 `paths` 一致。
- **SVG 图标**：`src/assets/icons/svg` 由 `vite-plugin-svg-icons` 注册为 symbol，需在组件中配合项目既有用法引用。
- **开发服务器**：默认端口 **8001**，`host` 为 `0.0.0.0`，便于局域网调试。

## 版本

当前 `package.json` 中版本号为 **5.5.0**（`name`: `zhora-admin`）。

---

如有后端仓库或接口文档，建议在本 README 中补充链接，便于新人联调。