Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/houxiaozhao/studentid

Last synced: 23 days ago
JSON representation

Host: GitHub
URL: https://github.com/houxiaozhao/studentid
Owner: houxiaozhao
Created: 2024-11-18T10:02:35.000Z (about 2 months ago)
Default Branch: main
Last Pushed: 2024-11-18T10:56:41.000Z (about 2 months ago)
Last Synced: 2024-11-18T12:07:00.419Z (about 2 months ago)
Language: Vue
Size: 344 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# 学生证生成器

本项目是一个基于 Vue 3 的在线学生证生成应用，使用 Three.js 提供实时 3D 预览功能。用户可以自定义学生证信息，并通过交互式界面实时预览效果。

> 🤖 本项目代码完全由 AI 自动生成

## ✨ 功能特点

- 📝 完全可自定义的学生信息
- 姓名、学号、学校名称
- 院系和专业信息
- 个人照片上传
- 学校标志上传
- 🎨 多种精美背景模板可选
- 🔄 实时 3D 预览
- 支持旋转、缩放和平移操作
- 高质量渲染效果
- 🌍 多语言支持
- 中文界面
- English interface
- 📸 支持导出高清学生证图片

## 🛠️ 技术栈

- **前端框架**: Vue 3
- **3D 渲染**: Three.js ^0.170.0
- **国际化**: Vue I18n ^9.14.1
- **构建工具**: Vite ^5.4.10
- **CSS 框架**: WindiCSS ^3.5.6

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装步骤

1. 克隆项目

```bash
git clone [email protected]:houxiaozhao/studentID.git
cd studentID
```

2. 安装依赖

```bash
npm install
```

3. 启动开发服务器

```bash
npm run dev
```

4. 构建生产版本

```bash
npm run build
```

## 💡 使用指南

1. 打开应用后，在左侧面板填写学生信息
2. 上传个人照片和学校标志
3. 选择喜欢的背景模板
4. 在右侧预览区域可以：
- 使用鼠标拖拽旋转视角
- 使用滚轮缩放
- 点击截图按钮导出成品

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进项目！