# UKCabinet

**Repository Path**: openwcs/ukcabinet

## Basic Information

- **Project Name**: UKCabinet
- **Description**: 一个炫酷的档案一体机交互界面模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-10-07
- **Last Updated**: 2025-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智能档案管理系统 - 档案一体机竖屏界面

一个炫酷的档案一体机交互界面，采用科技感十足的霓虹风格设计。


![预览](images/预览.gif)

## ✨ 特性

### 🎨 视觉特效
- 粒子系统背景（50个粒子，自动连线）
- 网格背景（50px栅格）
- 流动光晕（渐变球，慢速运动）
- 扫描线特效（全局）
- 霓虹发光效果（按钮、边框）
- 流光动画（按钮底部）
- 丰富的动画过渡效果

### 🏠 首页功能
- 实时日期时间显示（青色霓虹效果）
- 欢迎语 + 渐变文字大标题
- 取档案/还档案两个主操作按钮（霓虹发光、悬停放大、流光动画）
- 机器人状态卡片（带脉动动画）
  - 空闲（绿色）
  - 运行中（蓝色 + 加载动画）
  - 维护中（黄色）
  - 故障（红色）
- 5个格口状态竖条显示（填充动画 + 扫描线）
  - 空闲（绿色，30%高度）
  - 待取（黄色，60%高度，脉冲效果）
  - 故障（红色，90%高度，闪烁警告）
- 旋转设置按钮（悬停旋转180度）

### 📥 取档案流程
1. **身份验证** - 人脸/卡片识别，圆形识别框，扫描线动画，脉冲波纹效果
2. **档案列表** - 卡片式设计，悬停放大右移，显示档案详细信息
3. **取件进度** - 环形进度条（渐变色），实时百分比显示，旋转加载动画
4. **完成提示** - 成功图标（弹簧动画），脉冲波纹效果，显示格口位置

### 📤 还档案流程
1. **扫描识别** - 大型扫描框（600x600px），四角定位装饰，横向扫描线动画
2. **确认归还** - 显示档案详细信息卡片，重新扫描/确认归还按钮
3. **存放进度** - 环形进度条（品红到青色渐变），实时进度显示
4. **完成提示** - 成功动画，显示归还档案信息和存放位置

### ⚙️ 系统设置
- **密码锁定界面** - 锁定图标（脉冲 + 波纹效果），密码输入（默认：123456）
- **设备信息** - 设备名称、系统版本、运行时间
- **网络状态** - IP地址、连接状态（绿色指示灯 + 脉冲）
- **存储空间** - 使用量/总量、进度条可视化、百分比显示
- **系统资源** - CPU使用率、内存使用率（渐变进度条）
- **快捷操作** - 维护模式、重启系统、锁定设置
- **系统温度** - 实时温度监控，颜色脉动效果

## 🎨 配色方案

- **主色**：青色霓虹 `#00f3ff`
- **次色**：深青色 `#00d4ff`
- **强调色**：品红色 `#ff00e5`
- **背景深色**：`#050814`
- **背景浅色**：`#0a0e27`
- **卡片背景**：`#1a1f3a`

## 🛠️ 技术栈

- **Vue 3** - 现代化渐进式框架
- **TypeScript** - 类型安全
- **Vite** - 极速构建工具
- **Vue Router 4** - 路由管理
- **Tailwind CSS** - 原子化CSS框架（自定义科技主题）
- **Lucide Vue Next** - 优雅的图标库

## 📦 安装

```bash
# 安装依赖
npm install
```

## 🚀 运行

```bash
# 开发模式
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview
```

## 📱 屏幕规格

- **尺寸**：1080 x 1920 (竖屏)
- **DPI**：240
- **设备类型**：档案一体机触摸屏
- **布局优化**：已针对竖屏设备优化所有页面布局、字体大小、间距和元素尺寸

## 📁 项目结构

```
archive-kiosk/
├── src/
│   ├── components/          # 组件
│   │   └── BackgroundEffects.vue  # 背景特效
│   ├── pages/              # 页面
│   │   ├── HomePage.vue    # 首页
│   │   ├── PickupFlow.vue  # 取档案流程
│   │   ├── ReturnFlow.vue  # 还档案流程
│   │   └── SettingsPage.vue # 系统设置
│   ├── types/              # 类型定义
│   │   └── index.ts
│   ├── App.vue             # 根组件
│   ├── main.ts             # 入口文件
│   └── style.css           # 全局样式
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
├── tailwind.config.js
└── README.md
```

## 🎯 核心功能

### 动画效果
- ✅ 粒子系统（Canvas 动画）
- ✅ 霓虹发光效果
- ✅ 流光动画
- ✅ 扫描线特效
- ✅ 脉冲波纹
- ✅ 弹簧动画
- ✅ 环形进度条
- ✅ 悬停交互动画

### 页面路由
- ✅ 首页 `/`
- ✅ 取档案流程 `/pickup`
- ✅ 还档案流程 `/return`
- ✅ 系统设置 `/settings`

### 交互功能
- ✅ 实时时间显示
- ✅ 机器人状态监控
- ✅ 格口状态可视化
- ✅ 身份验证模拟
- ✅ 档案列表选择
- ✅ 进度条显示
- ✅ 扫描识别动画
- ✅ 密码锁定/解锁
- ✅ 系统信息展示

## 🔐 默认密码

系统设置页面默认密码：`123456`

## 📝 开发说明

项目采用 Vue 3 Composition API 编写，使用 TypeScript 提供类型安全。所有动画效果均通过 CSS3 和 Canvas 实现，无需额外的动画库（原计划使用 Framer Motion，但在 Vue 项目中使用原生方案更佳）。

界面针对 1080x1920 竖屏进行了优化，所有尺寸和字体大小都经过精心调整，确保在目标设备上达到最佳显示效果。

## 🎨 自定义配置

可以通过修改 `tailwind.config.js` 中的颜色配置来自定义主题：

```js
colors: {
  'neon-cyan': '#00f3ff',
  'deep-cyan': '#00d4ff',
  'neon-magenta': '#ff00e5',
  'bg-dark': '#050814',
  'bg-medium': '#0a0e27',
  'card-bg': '#1a1f3a',
}
```

## 联系人
***UKIOT.group***

## 📄 许可证

MIT License