- vzUit是专门为VZService所定制的一套UI
- 版本号 1.0.0
- 此UI可能会被非VZService所用，这是正常的，但是不能用“VZService”的标志
vzUit 是一套面向现代 Web 应用的设计系统，专为 VZService 打造，但在设计之初就保持了高度的通用性与可扩展性。它融合了极简主义美学与功能主义，以深邃的暗色背景为基底，搭配细腻的渐变光晕和微交互动效，营造出沉浸、专注且富有科技感的视觉体验。
- 专注内容：低干扰的视觉层级，让数据和操作核心始终处于视觉中心。
- 温暖而克制：紫蓝渐变品牌色贯穿始终，配合柔和的发光与悬停反馈，既有个性又不张扬。
- 响应式优先：从桌面到移动端，所有组件均针对不同屏幕尺寸优化，确保一致的使用体验。
vzUit 提供了一套完整的 UI 元件库，涵盖基础元素（按钮、表单、标签、徽章）、进阶组件（头像与状态、评分、工具提示）、布局模块（时间线、定价卡片）以及动态交互组件（手风琴、开关、模态框）。所有组件均采用语义化 HTML 与 CSS 编写，易于理解和二次开发。
默认采用深色背景搭配渐变高光，有效减少视觉疲劳，同时突出内容。组件悬停、点击、切换等状态均配有平滑的过渡动效，反馈清晰自然，提升操作手感。
内置全局 Toast 消息提示系统，无论是按钮点击、标签选择、分页跳转还是开关切换，都会给予即时且优雅的反馈。模态框、工具提示、折叠面板等组件均提供完整的交互示例，便于快速集成到实际项目中。
包含骨架屏、进度条、空状态等加载与占位组件，帮助开发者优雅地处理数据加载、等待和异常状态，提升用户感知性能。
所有样式均基于 CSS 变量和类名构建，你可以轻松覆盖主题色、间距、圆角等设计令牌，以适配不同品牌需求。同时，所有 JavaScript 交互逻辑均为独立函数，方便按需裁剪或改造。
整个设计系统仅依赖原生 HTML、CSS 和 JavaScript，无任何第三方库。体积小巧，加载迅速，尤其适合追求性能的现代 Web 应用。
将 index.html 中的 <style> 样式和 <script> 交互代码复制到你的项目中，即可使用所有组件。推荐作为原型或小型项目的基础模板。
你可以仅提取需要的组件样式和交互代码，例如单独使用按钮组、表单或卡片模块，无需引入全套样式。
通过修改 :root 中的 CSS 变量（如 --primary-color、--bg-base）可快速调整主题；通过覆盖 .btn、.card 等类名可局部修改样式。
| 类别 | 组件 | 说明 |
|---|---|---|
| 基础 | 按钮变体 | 主要、次要、成功、文本，支持小尺寸 |
| 基础 | 表单输入 | 文本框、下拉选择、文本域，带焦点状态 |
| 基础 | 标签与徽章 | 多种颜色分类，悬停反馈 |
| 进阶 | 头像与状态 | 在线、离线、忙碌指示，含工具提示 |
| 进阶 | 评分组件 | 交互式星级评分，可实时反馈 |
| 进阶 | 工具提示 | 支持下方向，悬停显示 |
| 布局 | 活动时间线 | 动态事件列表，带颜色标记 |
| 布局 | 定价卡片 | 双列套餐展示，按钮操作 |
| 交互 | 手风琴折叠 | 原生 details 实现，展开/收起动画 |
| 交互 | 开关与模态框 | 切换控件，模态弹窗（含确认/取消） |
| 交互 | 分页控件 | 数字按钮，支持跳转 |
| 状态 | 骨架屏 | 加载占位，模拟文本和头像 |
| 状态 | 进度指示 | 进度条，可显示百分比 |
| 状态 | 空状态 | 无数据占位，带图标与提示 |
所有可交互元素均绑定了演示反馈：
- 点击按钮、标签、头像 → 触发 Toast 提示，显示操作内容。
- 切换开关 → 显示当前状态变化。
- 评分星标 → 显示评分值及对应评语。
- 折叠面板 → 展开/收起时提示标题状态。
- 模态框 → 打开/关闭，确认删除操作。
- 分页 → 点击页码模拟跳转。
- 表单输入 → 输入后提交或失焦触发提示。
这些交互仅用于演示目的，实际项目中你可完全替换或移除。
vzUit 使用现代 CSS（Flexbox、Grid、CSS 变量、backdrop-filter）和 ES6 语法，兼容以下浏览器：
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
对于更旧的浏览器，建议使用 Polyfill 或降级方案。
- 本设计系统遵循 MIT 许可证，允许自由使用、修改和分发。
- 特别声明：若你将此 UI 用于非 VZService 的项目，请勿在界面中使用“VZService”的品牌标志、名称或相关商标，以避免混淆。你可以保留“vzUit”名称作为设计系统的引用，但不代表官方认可。
vzUit 由 VZService 团队维护，欢迎提交 Issue 或 Pull Request 至 GitHub 仓库。你的建议和贡献将帮助这套设计系统不断进化。
- v1.0.0 (2026-07-04)
- 初始版本发布
- 包含完整组件库、交互示例、响应式布局和深色主题
vzUit 不仅仅是一套 UI 规范，更是 VZService 对设计品质与开发效率的追求体现。无论你是构建管理后台、数据仪表盘还是企业级应用，vzUit 都能为你提供坚实且优雅的基础。现在就开始使用吧，让设计为你的产品注入更多可能性。