# NICHST-InnovationPlatformWebsite

**Repository Path**: l-maverick/nichst-innovation-platform-website

## Basic Information

- **Project Name**: NICHST-InnovationPlatformWebsite
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-21
- **Last Updated**: 2025-08-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 互联网创新平台前端 | Internet Innovation Platform Frontend

<div align="center">

**基于 Vue 3 + TypeScript 的互联网创新平台前端应用**

*An Internet Innovation Platform frontend built with Vue 3 + TypeScript*

</div>

## 📋 项目概述 | Project Overview

互联网创新平台是一个综合性的全栈应用平台，集成了多个业务模块和创新功能。本项目为平台前端部分，采用现代化技术栈构建，实现基于角色的访问控制和模块化架构设计，为各类创新业务提供统一的数字化解决方案。

*The Internet Innovation Platform is a comprehensive full-stack application platform that integrates multiple business modules and innovative features. This frontend is built with modern technology stack, supports bilingual (Chinese/English) interface, and implements role-based access control with modular architecture, providing unified digital solutions for various innovative businesses.*

### 🎯 核心功能 | Key Features

- 🔐 **统一身份认证** - Casdoor OAuth 集成和 JWT 令牌管理
- 👥 **多角色权限管理** - 灵活的基于角色的访问控制系统
- 📋 **业务流程管理** - 支持多种业务工作流和审批流程
- 🏭 **模块化业务组织** - 可插拔的业务模块架构设计
- 🎨 **现代化 UI 体验** - Element Plus 组件库，响应式设计
- 🌐 **国际化支持** - 中英文双语界面切换
- 🔄 **实时数据同步** - 基于现代前端技术的数据管理
- 📊 **数据可视化** - 丰富的图表和报表功能

## 🛠 技术栈 | Tech Stack

### 前端框架 | Frontend Framework
- **Vue 3.4+** - 组合式 API | Composition API
- **TypeScript 5.4+** - 严格模式类型检查 | Strict mode type checking
- **Vite 5.2+** - 快速构建工具 | Fast build tool

### UI 组件 | UI Components  
- **Element Plus 2.7+** - UI 组件库 | UI component library
- **SCSS** - CSS 预处理器 | CSS preprocessor
- **BEM 方法论** - CSS 命名规范 | CSS naming convention

### 状态管理 | State Management
- **Pinia 2.1+** - 状态管理 | State management
- **Vue Router 4.3+** - 路由管理 | Route management
- **Axios 1.7+** - HTTP 客户端 | HTTP client

## 🚀 快速开始 | Quick Start

### 环境要求 | Prerequisites

- Node.js >= 18.0.0
- npm >= 8.0.0
- Go 后端服务 (端口 8080) | Go backend service (port 8080)

### 安装与运行 | Installation & Running

```bash
# 1. 克隆项目 | Clone repository
git clone <repository-url>
cd nichst/frontend

# 2. 安装依赖 | Install dependencies
npm install

# 3. 启动开发服务器 | Start development server
npm run dev
```

开发服务器将在 `http://localhost:3000` 启动，API 请求会代理到 `http://localhost:8080`

*Development server will start at `http://localhost:3000`, API requests are proxied to `http://localhost:8080`*

### 可用命令 | Available Scripts

```bash
# 开发模式 | Development mode
npm run dev

# 生产构建 | Production build
npm run build

# 预览构建结果 | Preview build
npm run preview

# 类型检查 | Type checking
npm run type-check

# 代码格式化和检查 | Lint and format
npm run lint
```

## 📁 项目结构 | Project Structure

```
src/
├── core/                   # 核心应用逻辑 | Core application logic
│   ├── router/            # 主路由配置 | Main router configuration
│   └── stores/            # 核心状态存储 | Core state stores
├── layouts/               # 布局组件 | Layout components
│   ├── AuthLayout.vue     # 认证页面布局 | Authentication layout
│   ├── DefaultLayout.vue  # 默认页面布局 | Default layout
│   └── ModuleLayout.vue   # 模块页面布局 | Module layout
├── modules/               # 业务模块 | Business modules
│   └── certification/     # 认证模块 | Certification module
│       ├── api/          # API 客户端 | API clients
│       ├── components/   # 业务组件 | Domain components
│       ├── router/       # 模块路由 | Module routes
│       ├── stores/       # 模块状态 | Module stores
│       ├── styles/       # 模块样式 | Module styles
│       ├── types/        # 类型定义 | Type definitions
│       └── views/        # 页面组件 | Page components
├── shared/               # 共享工具 | Shared utilities
│   ├── api/             # API 基础配置 | API base configuration
│   ├── components/      # 共享组件 | Shared components
│   └── utils/           # 工具函数 | Utility functions
├── styles/              # 全局样式 | Global styles
│   ├── index.css        # 样式入口 | Style entry point
│   ├── variables.css    # CSS 变量 | CSS variables
│   └── base.css         # 基础样式 | Base styles
└── views/               # 通用页面 | Common pages
    ├── HomePage.vue     # 首页 | Home page
    └── auth/           # 认证相关页面 | Auth pages
```

### 🧩 模块化架构 | Modular Architecture

平台采用**模块化架构**，支持多种业务模块的灵活组合：

*The platform uses a **modular architecture** that supports flexible combination of various business modules:*

- **独立开发部署** - 模块间松耦合，便于团队协作和扩展
- **清晰的领域边界** - 业务逻辑按领域组织，易于维护
- **基于角色的视图组织** - 不同角色用户看到专属界面
- **可配置的模块启用** - 通过配置文件控制模块的加载和启用
- **业务模块可插拔** - 支持动态添加和移除业务功能模块

## 👥 角色权限系统 | Role-Based Access Control

### 用户角色 | User Roles

| 角色 Role | 权限描述 Permissions |
|----------|-------------------|
| `user` | 普通用户 - 基础功能访问权限 \| Basic user access |
| `staff` | 工作人员 - 业务处理和任务管理 \| Business processing and task management |
| `leader` | 部门负责人 - 工作人员权限 + 审批权限 \| Staff permissions + approval authority |
| `expert` | 专业人员 - 专业评估和技术服务 \| Professional assessment and technical services |
| `approver` | 审批人员 - 最终决策和审批权限 \| Final decisions and approval authority |
| `admin` | 系统管理员 - 完整平台管理权限 \| Full platform administration |

### 权限实现 | Permission Implementation

- **路由级守卫** - 检查认证和角色权限
- **组件级条件渲染** - 基于用户角色显示内容
- **JWT 令牌管理** - 自动刷新和错误处理
- **OAuth 集成** - Casdoor 认证提供商

## 🔄 业务工作流 | Business Workflows

### 平台业务流程 | Platform Business Process

1. **用户** 提交各类业务申请 | **Users** submit various applications
2. **工作人员** 审核并分配相关任务 | **Staff** reviews and assigns tasks
3. **专业人员** 进行评估和业务处理 | **Professionals** conduct assessments and processing
4. **决策人员** 做出最终业务决策 | **Decision makers** make final business decisions
5. **平台系统** 全程跟踪和管理业务生命周期 | **Platform** tracks and manages complete lifecycle

### 业务模块特性 | Business Module Features

- **流程管理** - 支持各类业务流程的配置和管理
- **任务分配** - 灵活的任务分配和跟踪系统
- **审批工作流** - 多层级可配置的审批流程
- **数据管理** - 完整的数据存储、查询和分析
- **报表系统** - 丰富的数据统计和报表功能
- **文档协作** - 文档管理和团队协作功能

## 🔧 开发指南 | Development Guidelines

### 代码规范 | Code Standards

- **组合式 API** - 所有 Vue 组件使用 Composition API
- **TypeScript 严格模式** - 全项目强制类型检查
- **BEM 命名规范** - CSS 类名使用 BEM 方法论
- **模块优先组织** - 相关代码保持在同一模块内

### API 集成 | API Integration

```typescript
// API 基础配置 | API base configuration
const apiClient = axios.create({
  baseURL: '/api/v1',
  timeout: 10000,
});

// 请求拦截器 - 自动附加 JWT 令牌
// Request interceptor - Auto-attach JWT tokens
apiClient.interceptors.request.use((config) => {
  const token = localStorage.getItem('access_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});
```

### 环境配置 | Environment Configuration

```bash
# 开发环境 | Development
VITE_API_BASE_URL=http://localhost:8080/api/v1

# 生产环境 | Production  
VITE_API_BASE_URL=/api/v1
```

## 🚀 部署 | Deployment

### 构建生产版本 | Build for Production

```bash
# 构建应用 | Build application
npm run build

# 预览构建结果 | Preview build
npm run preview
```

构建产物将输出到 `dist/` 目录，可以部署到任何静态文件服务器。

*Build artifacts will be output to `dist/` directory, ready for deployment to any static file server.*

### 生产环境配置 | Production Configuration

- **API 代理设置** - 配置 Nginx 或其他反向代理
- **静态资源优化** - 启用 gzip 压缩和缓存
- **环境变量配置** - 设置正确的 API 基础 URL

## 🤝 贡献 | Contributing

1. Fork 本仓库 | Fork the repository
2. 创建功能分支 | Create feature branch (`git checkout -b feature/AmazingFeature`)
3. 提交更改 | Commit changes (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 | Push to branch (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request | Open a Pull Request

### 开发约定 | Development Conventions

- 遵循现有代码风格和架构模式
- 编写类型安全的 TypeScript 代码
- 为新功能添加适当的注释和文档
- 确保代码通过 ESLint 和类型检查

## 📄 许可证 | License

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

*This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.*

---

<div align="center">

**🏗️ 架构设计合理 | Well-Architected** • **🔒 安全可靠 | Secure & Reliable** • **📱 响应式设计 | Responsive Design**

Made with ❤️ for Internet Innovation Platform

</div>