Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# REST API origin. Do not include a trailing slash.
VITE_API_BASE_URL=http://localhost:7777

# Full endpoint used by the forum/keyword-processing feature.
VITE_FORUM_API_URL=http://localhost:5002/process_words

# WebSocket endpoint used by chat and live-class signaling.
VITE_WEBSOCKET_URL=ws://localhost:7788/websocket
45 changes: 45 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
name: CI

on:
push:
branches:
- main
pull_request:
workflow_dispatch:

permissions:
contents: read

jobs:
validate:
name: Validate
runs-on: ubuntu-latest
timeout-minutes: 15

steps:
- name: Check out repository
uses: actions/checkout@v4

- name: Set up pnpm
uses: pnpm/action-setup@v4
with:
version: 8.15.9
run_install: false

- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm

- name: Install dependencies
run: pnpm install --frozen-lockfile

- name: Lint
run: pnpm lint:check

- name: Check formatting
run: pnpm format:check

- name: Build
run: pnpm build
130 changes: 106 additions & 24 deletions README.en.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,122 @@
# International Chinese Platform

International Chinese Platform is a Vue 3 prototype for personalized Chinese-language education. It includes separate student, teacher, and administrator workspaces, making it closer to an education SaaS prototype than a simple landing page.
International Chinese Platform is a Vue 3 frontend prototype for personalized Chinese-language education. It models course, booking, homework, chat, live-class, and platform-management workflows for students, teachers, and administrators.

## Highlights
> This is the canonical repository for ongoing development:
> [computersciencefreshmen/International_Chinese_Platform](https://github.com/computersciencefreshmen/International_Chinese_Platform)

- Student dashboard for teacher booking, learning requests, courses, chat, homework, live classes, and personal settings.
- Teacher dashboard for teaching docking, online courses, course uploads, and user information.
- Administrator dashboard for course docking, audit center, data center, and account-center workflows.
- Vue Router nested routing with role-based page groups.
- Pinia state management, Element Plus UI, Axios integration, and Vite build tooling.
[中文说明](README.md)

## Stack
## Repository consolidation

- Vue 3
- Vite
- Vue Router
- Pinia
- Element Plus
- Tailwind CSS
- Axios
- ESLint and Prettier
Early versions of the project were spread across:

## Development
- [vue3-project-initialization](https://github.com/computersciencefreshmen/vue3-project-initialization)
- [project](https://github.com/computersciencefreshmen/project)

Development is now consolidated in International_Chinese_Platform. New code, issues, documentation, and releases should use this repository; the older repositories should be treated as historical references to avoid further divergence.

## Current features

- Student workspace for courses, teacher booking, learning requests, chats, homework, live classes, a digital-human classroom, and personal settings.
- Teacher workspace for teaching coordination, online courses, course uploads, user information, and course details.
- Administrator workspace for course coordination, audits, analytics, and account-center workflows.
- Shared infrastructure using nested Vue Router routes, persisted Pinia state, Element Plus, Tailwind CSS, Axios, and Vue i18n.

This repository is currently a frontend prototype and does not include backend services. Authentication, real-time communication, media signaling, and some business workflows depend on external APIs and require security review and end-to-end integration before production use.

## Technology

| Layer | Technology |
| ------------------- | ---------------------------------- |
| Framework | Vue 3 |
| Build | Vite 6 |
| Routing | Vue Router |
| State | Pinia, pinia-plugin-persistedstate |
| UI and styling | Element Plus, Tailwind CSS, Sass |
| Networking and i18n | Axios, Vue i18n |
| Quality | ESLint, Prettier, GitHub Actions |

## Requirements

- Node.js 18 or newer
- pnpm 8.15.9

The pnpm version is pinned in package.json. Use Corepack so a different local pnpm version does not rewrite the lockfile.

## Local development

```bash
npm install
npm run dev
git clone https://github.com/computersciencefreshmen/International_Chinese_Platform.git
cd International_Chinese_Platform

corepack enable
corepack prepare pnpm@8.15.9 --activate
pnpm install --frozen-lockfile

cp .env.example .env.local
pnpm dev
```

## Production Build
On Windows PowerShell, copy the environment file with:

```powershell
Copy-Item .env.example .env.local
```

## Environment variables

| Variable | Purpose | Example |
| ------------------ | ------------------------------------------ | ----------------------------------- |
| VITE_API_BASE_URL | REST API base URL | http://localhost:7777 |
| VITE_FORUM_API_URL | Full forum/keyword-processing endpoint | http://localhost:5002/process_words |
| VITE_WEBSOCKET_URL | Chat and live-signaling WebSocket endpoint | ws://localhost:7788/websocket |

Copy .env.example to .env.local and replace the values for your backend. Variables prefixed with VITE\_ are exposed to the browser; never store passwords, private keys, or long-lived access tokens in them.

The application reads these variables as its shared endpoint contract, avoiding committed environment-specific URLs.

## Commands

| Command | Description |
| ----------------- | ------------------------------------------------- |
| pnpm dev | Start the development server |
| pnpm build | Create a production build |
| pnpm preview | Preview the production build locally |
| pnpm lint | Apply auto-fixable ESLint changes |
| pnpm lint:check | Run ESLint without modifying files |
| pnpm format | Format the src directory |
| pnpm format:check | Check src formatting without modifying files |
| pnpm check | Run lint, formatting, and production-build checks |

Before committing, run:

```bash
npm run build
npm run preview
pnpm check
```

GitHub Actions runs the same quality gate for pushes to main and pull requests. Automated unit and end-to-end tests are not configured yet, so the critical role-based paths still require browser smoke testing.

## Project structure

```text
International_Chinese_Platform/
├── .github/workflows/ # Continuous integration
├── public/ # Public static assets
├── src/
│ ├── api/ # API wrappers
│ ├── assets/ # Styles and media
│ ├── components/ # Shared and domain components
│ ├── i18n/ # Locale setup and messages
│ ├── router/ # Role-based routes
│ ├── stores/ # Pinia stores
│ ├── utils/ # HTTP and WebSocket utilities
│ └── views/ # Student, teacher, admin, and login pages
├── .env.example
├── package.json
└── vite.config.js
```

## Why This Project Matters
## Deployment

The repository demonstrates how to structure a multi-role frontend application for an education platform. It can be extended with authentication, backend APIs, course scheduling, homework submission, live-class integration, and analytics dashboards.
Use HTTPS/WSS service endpoints in production and inject environment variables through the deployment platform. Because the application uses Vue Router history mode, configure the static host to fall back unknown routes to index.html.
147 changes: 101 additions & 46 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,67 +1,122 @@
# International Chinese Platform
# 国际中文平台

An international Chinese education platform prototype built with Vue 3. It models the main workflows for students, teachers, and administrators in a personalized online learning environment.
国际中文平台是一个基于 Vue 3 的国际中文教育前端原型,围绕学生、教师和管理员三类角色组织课程、预约、作业、聊天、直播课堂与平台管理流程。

## Overview
> 当前仓库是项目的唯一主维护仓库:
> [computersciencefreshmen/International_Chinese_Platform](https://github.com/computersciencefreshmen/International_Chinese_Platform)

The project is designed around three user roles:
[English](README.en.md)

- **Students** can browse courses, book teachers, publish learning requests, join chats, view homework, attend live classes, and manage their personal center.
- **Teachers** can manage teaching docking, online courses, course uploads, user information, and course details.
- **Administrators** can review courses, manage platform data, audit content, and handle account-center tasks.
## 仓库整合

The goal is to show a role-based education platform rather than a static website demo.
项目早期代码曾分散在以下仓库:

## Features
- [vue3-project-initialization](https://github.com/computersciencefreshmen/vue3-project-initialization)
- [project](https://github.com/computersciencefreshmen/project)

- Role-based routing for student, teacher, and administrator dashboards.
- Vue Router page structure with nested layouts.
- Pinia state management with persisted state support.
- Element Plus UI components and icon set.
- Axios-ready frontend architecture for API integration.
- Vue i18n dependency included for multilingual expansion.
- Vite development and production build pipeline.
现已统一到 International_Chinese_Platform。后续代码、Issue、文档和发布均应以本仓库为准;旧仓库仅作为历史参考,避免继续产生分叉。

## Tech Stack
## 当前功能

| Layer | Technology |
|---|---|
| Framework | Vue 3 |
| Build Tool | Vite |
| State | Pinia, pinia-plugin-persistedstate |
| Routing | Vue Router |
| UI | Element Plus, Tailwind CSS |
| HTTP | Axios |
| Tooling | ESLint, Prettier |
- 学生端:课程浏览、教师预约、学习需求发布、话轮聊天、作业、直播课堂、数字人课堂和个人中心。
- 教师端:授课对接、网络课程、课程上传、用户信息和课程详情。
- 管理员端:课程对接、审核中心、数据中心和账户中心。
- 公共能力:Vue Router 嵌套路由、Pinia 持久化状态、Element Plus 组件、Tailwind CSS、Axios 接口层和 Vue i18n 基础设施。

## Project Structure
本仓库目前是前端原型,不包含后端服务。登录鉴权、实时通信、媒体信令和部分业务流程仍依赖外部接口,部署前应完成安全审查和端到端联调。

```text
International_Chinese_Platform/
├── public/ # Static assets
├── src/
│ ├── router/ # Role-based route definitions
│ ├── views/ # Student, teacher, admin, login pages
│ └── ... # Shared app source
├── index.html
├── vite.config.js
└── package.json
```
## 技术栈

| 层级 | 技术 |
| ------------ | ---------------------------------- |
| 前端框架 | Vue 3 |
| 构建工具 | Vite 6 |
| 路由 | Vue Router |
| 状态管理 | Pinia、pinia-plugin-persistedstate |
| UI 与样式 | Element Plus、Tailwind CSS、Sass |
| 网络与国际化 | Axios、Vue i18n |
| 工程质量 | ESLint、Prettier、GitHub Actions |

## 环境要求

- Node.js 18 或更高版本
- pnpm 8.15.9

## Local Development
package.json 已固定 pnpm 版本。建议通过 Corepack 使用项目声明的版本,避免 pnpm 版本差异改写锁文件。

## 本地开发

```bash
npm install
npm run dev
git clone https://github.com/computersciencefreshmen/International_Chinese_Platform.git
cd International_Chinese_Platform

corepack enable
corepack prepare pnpm@8.15.9 --activate
pnpm install --frozen-lockfile

cp .env.example .env.local
pnpm dev
```

Windows PowerShell 可使用以下命令复制环境文件:

```powershell
Copy-Item .env.example .env.local
```

## Build
## 环境变量

| 变量 | 用途 | 示例 |
| ------------------ | ----------------------------- | ----------------------------------- |
| VITE_API_BASE_URL | REST API 基础地址 | http://localhost:7777 |
| VITE_FORUM_API_URL | 话轮/关键词处理接口完整地址 | http://localhost:5002/process_words |
| VITE_WEBSOCKET_URL | 聊天和直播信令 WebSocket 地址 | ws://localhost:7788/websocket |

复制 .env.example 为 .env.local 后,根据实际后端修改地址。所有以 VITE\_ 开头的变量都会暴露给浏览器,禁止写入密码、私钥或长期有效的访问令牌。

业务代码统一读取这些变量作为服务地址契约,避免提交环境相关的硬编码地址。

## 常用命令

| 命令 | 说明 |
| ----------------- | --------------------------------- |
| pnpm dev | 启动开发服务器 |
| pnpm build | 构建生产版本 |
| pnpm preview | 本地预览生产构建 |
| pnpm lint | 自动修复可修复的 ESLint 问题 |
| pnpm lint:check | 只读检查 ESLint |
| pnpm format | 格式化 src 目录 |
| pnpm format:check | 只读检查 src 目录格式 |
| pnpm check | 依次执行 lint、格式检查和生产构建 |

提交前建议执行:

```bash
npm run build
npm run preview
pnpm check
```

GitHub Actions 会在推送到 main 以及 Pull Request 时执行同样的质量门禁。当前项目尚未配置自动化单元测试或端到端测试,关键角色路径仍需进行浏览器冒烟测试。

## 项目结构

```text
International_Chinese_Platform/
├── .github/workflows/ # 持续集成
├── public/ # 公共静态资源
├── src/
│ ├── api/ # API 封装
│ ├── assets/ # 样式与媒体资源
│ ├── components/ # 通用与业务组件
│ ├── i18n/ # 国际化配置和词条
│ ├── router/ # 多角色路由
│ ├── stores/ # Pinia 状态
│ ├── utils/ # HTTP、WebSocket 等工具
│ └── views/ # 学生、教师、管理员和登录页面
├── .env.example
├── package.json
└── vite.config.js
```

## Portfolio Value
## 部署说明

This repository demonstrates Vue 3 application structure, multi-role routing, dashboard-style UI planning, and education-platform product modeling. It is a good base for further backend integration, authentication, course management APIs, and live-class features.
生产环境应使用 HTTPS/WSS 服务地址,并由部署平台注入环境变量。由于项目采用 Vue Router history 模式,静态服务器还需将未知路由回退到 index.html。
Loading
Loading