优雅草正版授权系统 - 优雅草科技开源2月20日正式发布 - 文章 - 开发者社区

优雅草正版授权系统 - 前端 / 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.

picture.image

三、项目介绍 / 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-front

2. 安装依赖 / Install Dependencies

npm install
# or
pnpm install

3. 配置开发环境 / 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 配置 / Modify base and outDir in vite.config.ts:

export default defineConfig({
  base: '/',  // 修改为根路径或 CDN 路径 / Root path or CDN path
  build: {
    outDir: 'dist',
    emptyOutDir: true
  }
})

构建项目 / Build:

npm run build

将 dist 目录上传到服务器或 CDN / Upload dist to 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.