优雅草正版授权系统 - 前端 / Youyacao Official License Verification System - Frontend
一、关于优雅草科技 2026 战略升级 / About Youyacao Technology 2026 Strategic Upgrade
中文
2026 年，是优雅草科技全面转型与彻底放开的一年。
过去，我们坚持技术为本；
现在，我们选择更开放、更透明、更长期主义的发展路线。
经优雅草科技核心团队决议，自 2026 年 2 月 20 日 起，公司整体战略正式升级，具体公告如下：
1. 2025 开源计划正式全面落地
优雅草科技在 2025 年提出的「产品开源计划」，将于 2026 年 2 月 20 日 起陆续正式发布与兑现。
除涉及企业级客户运营安全、核心商业机密与高安全业务系统外，其余产品将逐步：
- 全面开源
- 开放代码
- 提供学习与测试使用
- 支持技术交流与研究
我们坚定认为：真正的技术企业，不怕被看见。
2. 正版授权系统正式上线（唯一官方验证）
优雅草科技自研正版授权系统已正式上线：
👉 官方地址： https://zhengban.youyacao.com
该系统为优雅草科技今后唯一官方正版验证渠道。
未来所有商业授权产品：
- 均通过该系统验证
- 均由官方统一管理
- 均长期持续更新
本正版授权系统同样作为开源项目之一，将持续迭代与完善。
我们不再依赖第三方授权系统，所有授权体系完全自主可控。
English
2026 marks a year of comprehensive transformation and full openness for Youyacao Technology.
In the past, we adhered to technology as our foundation;
Now, we choose a development path that is more open, transparent, and long-term oriented.
As resolved by the core team of Youyacao Technology, the company's overall strategy has been officially upgraded as of February 20, 2026. The announcement is as follows:
1. 2025 Open Source Plan Officially Fully Implemented
Youyacao Technology's "Product Open Source Plan" proposed in 2025 will be officially released and delivered starting February 20, 2026.
Except for systems involving enterprise-level customer operational security, core business secrets, and high-security business systems, other products will gradually:
- Be fully open sourced
- Have their code opened
- Be available for learning and testing
- Support technical exchange and research
We firmly believe: A true technology company is not afraid of being seen.
2. Official License Verification System Launched (Sole Official Verification)
The self-developed official license verification system of Youyacao Technology has been officially launched:
👉 Official URL: https://zhengban.youyacao.com
This system is the sole official license verification channel for Youyacao Technology going forward.
All future commercial licensed products will:
- Be verified through this system
- Be managed uniformly by the official team
- Receive long-term continuous updates
This license verification system is also one of the open source projects and will continue to iterate and improve.
We no longer rely on third-party license systems. All authorization systems are fully self-controlled.
二、系统截图 / System Screenshots
中文
以下是正版授权系统的前端界面截图，展示主要功能模块与用户体验。
English
The following are screenshots of the frontend interface of the official license verification system, demonstrating the main feature modules and user experience.
|---------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| | |
| 
| 
|
| 
| 
|
| 
| 
|
| 
| 
|
| 
| 
|
三、项目介绍 / Project Introduction
中文
优雅草正版查询系统前端代码，提供用户查询授权、购买产品、查看订单等功能的用户界面。
- 技术栈: Vue 3 + TypeScript + Vite + Tailwind CSS
- 后端仓库 : https://gitee.com/youyacao/zhengban.youyacao.com
English
Frontend code of Youyacao Official License Verification System, providing user interface for license verification, product purchase, order viewing, and related functions.
- Tech Stack: Vue 3 + TypeScript + Vite + Tailwind CSS
- Backend Repository : https://gitee.com/youyacao/zhengban.youyacao.com
四、技术栈 / Tech Stack
|-------------------------|------------------------------------|
| 类别 | 技术 |
| 框架 / Framework | Vue 3.5 |
| 语言 / Language | TypeScript 5.7 |
| 构建工具 / Build Tool | Vite 6.1 |
| 路由 / Router | Vue Router 4.5 |
| 状态管理 / State Management | Pinia 2.3 |
| UI 组件 / UI Components | Headless UI、Heroicons、Tailwind CSS |
| HTTP 客户端 / HTTP Client | Axios 1.7 |
| 其他 / Others | html2canvas（截图功能） |
五、环境要求 / Environment Requirements
- Node.js >= 16.x
- npm 或 pnpm / npm or pnpm
六、快速开始 / Quick Start
1. 克隆项目 / Clone the Project
git clone https://gitee.com/youyacao/zhengban-front.git
cd zhengban-front2. 安装依赖 / Install Dependencies
npm install
# or
pnpm install3. 配置开发环境 / Configure Development Environment
编辑 vite.config.ts 文件，修改代理配置 / Edit vite.config.ts and modify the proxy configuration:
server: {
host: 'localhost',
port: 8080,
proxy: {
'/api': {
target: 'http://your-backend-domain.com', // 修改为你的后端地址 / Change to your backend URL
changeOrigin: true
}
}
}4. 启动开发服务器 / Start Development Server
npm run dev访问 http://localhost:8080 查看项目 / Visit http://localhost:8080 to view the project.
5. 构建生产版本 / Build for Production
npm run build构建完成后，文件将输出到 ../server/public/pc 目录（根据 vite.config.ts 配置）。
After build, files will be output to ../server/public/pc directory (per vite.config.ts).
七、项目结构 / Project Structure
verify-front/
├── src/
│ ├── api/ # API 接口 / API interfaces
│ │ ├── announcement.ts # 公告接口 / Announcement API
│ │ ├── config.ts # 配置接口 / Config API
│ │ ├── order.ts # 订单接口 / Order API
│ │ ├── product.ts # 产品接口 / Product API
│ │ └── query.ts # 查询接口 / Query API
│ ├── components/ # 公共组件 / Shared components
│ │ ├── AppFooter.vue # 页脚组件 / Footer
│ │ ├── AppHeader.vue # 页头组件 / Header
│ │ ├── AuthorizationCard.vue # 授权卡片 / Authorization card
│ │ ├── AuthorizationCertificate.vue # 授权证书 / Authorization certificate
│ │ └── ProductCard.vue # 产品卡片 / Product card
│ ├── layouts/ # 布局组件 / Layout components
│ │ └── DefaultLayout.vue # 默认布局 / Default layout
│ ├── router/ # 路由配置 / Router config
│ │ └── index.ts
│ ├── styles/ # 样式文件 / Style files
│ │ └── main.css
│ ├── types/ # TypeScript 类型定义 / Type definitions
│ │ └── html2canvas.d.ts
│ ├── utils/ # 工具函数 / Utilities
│ │ └── request.ts # HTTP 请求封装 / HTTP request wrapper
│ ├── views/ # 页面组件 / Page components
│ │ ├── announcement/ # 公告页面 / Announcement
│ │ ├── home/ # 首页 / Home
│ │ ├── order/ # 订单页面 / Order
│ │ ├── policy/ # 政策页面 / Policy
│ │ ├── product/ # 产品页面 / Product
│ │ └── query/ # 查询页面 / Query
│ ├── App.vue # 根组件 / Root component
│ └── main.ts # 入口文件 / Entry file
├── index.html
├── package.json
├── vite.config.ts
├── tailwind.config.js
├── postcss.config.js
└── tsconfig.json八、主要功能 / Main Features
|----------------------------|--------------------------------------------------------|
| 功能 | 描述 |
| 授权查询 / License Query | 用户可查询授权信息 / Users can query license information |
| 产品展示 / Product Display | 展示可购买的产品列表 / Display purchasable products |
| 订单管理 / Order Management | 查看和管理订单 / View and manage orders |
| 公告系统 / Announcement | 展示系统公告 / Display system announcements |
| 授权证书 / License Certificate | 生成和下载授权证书 / Generate and download license certificates |
九、开发说明 / Development Guide
API 请求 / API Requests
所有 API 请求都通过 src/utils/request.ts 封装的 axios 实例进行，统一处理请求拦截、响应拦截和错误处理。
All API requests go through the axios instance in src/utils/request.ts, with unified request/response interceptors and error handling.
import request from '@/utils/request'
// 示例 / Example
export const getProductList = () => {
return request.get('/api/product/list')
}路由配置 / Router Configuration
路由配置在 src/router/index.ts 中，使用 Vue Router 4 的 API。
Router is configured in src/router/index.ts using Vue Router 4 API.
状态管理 / State Management
使用 Pinia 进行状态管理，store 文件可以根据需要在 src/stores 目录下创建。
Uses Pinia for state management; store files can be created in src/stores as needed.
样式开发 / Styling
项目使用 Tailwind CSS，可以直接在组件中使用原子化类名。
The project uses Tailwind CSS; utility classes can be used directly in components.
<template>
<div class="flex items-center justify-center p-4 bg-gray-100">
<!-- 内容 / Content -->
</div>
</template>十、部署说明 / Deployment
方式一：构建到后端项目 / Method 1: Build into Backend Project
默认配置会将构建文件输出到 ../server/public/pc 目录，适合前后端在同一服务器部署。
Default config outputs build files to ../server/public/pc, suitable for co-located frontend and backend deployment.
npm run build方式二：独立部署 / Method 2: Standalone Deployment
-
修改
vite.config.ts中的base和outDir配置 / ModifybaseandoutDirinvite.config.ts:export default defineConfig({
base: '/', // 修改为根路径或 CDN 路径 / Root path or CDN path
build: {
outDir: 'dist',
emptyOutDir: true
}
}) -
构建项目 / Build:
npm run build
-
将
dist目录上传到服务器或 CDN / Uploaddistto server or CDN. -
配置 Nginx / Configure Nginx:
server {
listen 80;
server_name yourdomain.com;
root /path/to/dist;
index index.html;location / { try_files $uri $uri/ /index.html; } location /api { proxy_pass http://your-backend-domain.com; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }}
十一、常见问题 / FAQ
|------------------------------------------|--------------------------------------------------------------------------------------------------------------|
| 问题 | 解决方案 |
| 开发环境 API 请求失败 / API requests fail in dev | 检查 vite.config.ts 中的代理配置，确保后端服务已启动 / Check proxy in vite.config.ts and ensure backend is running |
| 构建后页面空白 / Blank page after build | 检查 base 配置是否与部署路径一致 / Check if base matches deployment path |
| 样式不生效 / Styles not applied | 确保 Tailwind 依赖已安装，postcss.config.js 配置正确 / Ensure Tailwind is installed and postcss.config.js is correct |
十二、相关链接 / Links
|---------------------------------------------------------------------|----------------------------|
| 链接 | 说明 |
| 正版授权系统 - 官方地址 | 优雅草科技唯一官方正版验证渠道 |
| 后端代码仓库 | Backend repository |
| 优雅草官网 | Youyacao official website |
| Vue 3 文档 | Vue 3 documentation |
| Vite 文档 | Vite documentation |
| Tailwind CSS 文档 | Tailwind CSS documentation |
十三、开源协议 / License
本项目遵循相应的开源协议。
This project is licensed under the applicable open source license.
十四、技术支持 / Technical Support
如有问题，请访问优雅草论坛获取支持。
For support, please visit the Youyacao forum.