战争艺术3正版
180.74MB · 2025-10-18
Pixelium Design 是一个基于 Vue 3 的像素风 UI 组件库。我们从早期像素游戏的经典美学中汲取灵感，为现代 Web 应用带来复古风格的界面和体验。该项目的初衷是为开发者提供一系列可复用、高效能的像素风组件，让项目中轻松实现独特的视觉风格。
如果你对这个项目感兴趣，欢迎点个 Star⭐️。Github：https://github.com/shika-works/pixelium-design
我是一名像素游戏爱好者，被早期游戏独特的像素风格和艺术表现深深吸引。Pixelium Design 的灵感来源于我们团队（虽然只有我一个人）对像素风格游戏的热爱，例如《宝可梦 红/蓝/绿宝石》《星露谷物语》以及开罗游戏系列。这些游戏的视觉风格简洁而富有表现力，目前前端领域像素风格 UI 组件库较少，我们希望将这种经典美学引入现代 Web 开发中。
我们的目标是提供一套完整的像素风格 Vue 3 组件，让开发者能够便捷地在项目中实现一致的像素化界面。通过封装常用的 UI 元素和交互模式，降低实现特定视觉风格的技术成本。
在 Pixelium Design 之前，已有如 NES.css 这样的项目，但它们通常只提供基础的 CSS 样式，缺乏功能完备的交互组件。开发者仍需编写大量 HTML 和 JavaScript 来实现交互，不仅增加了开发负担，也提高了后期维护的复杂度。
此外，这类现有方案的样式较为固定，难以灵活调整，无法充分满足多样化的项目需求。例如，颜色、尺寸等视觉属性往往受限于预设样式，限制了设计的个性表达。
为弥补现有方案的不足，Pixelium Design 采用现代前端技术栈，基于 Vue 3 搭建项目（未来稳定后也计划开发 React 版本），提供功能完整的交互组件：
我们选择了以下技术栈，以确保组件的高性能和良好的开发体验：
Vue 3：我们选择 Vue 3 作为框架，利用其 Composition API 等新特性，提高组件的可维护性和开发效率。
TypeScript：项目完全使用 TypeScript 编写，提供了完整的类型定义文件，从而在开发过程中确保类型安全。
Canvas：大部分像素效果通过 Canvas 实现，用于绘制复杂的图形和动画，确保视觉效果的一致性。
oxlint：用 Rust 编写的超快 Lint 工具。
VitePress：展示交互式示例。
ts-morph + comment-parser: 解析 JSDoc 注释生成 API 文档。
在技术选型中，我个人对 CSS Houdini 进行了深入评估，但最终决定不将其用于本项目。核心障碍在于其浏览器兼容性尚未达到可投入生产环境的标准。
CSS Houdini 虽然通过一组底层 API 为浏览器带来了强大的 CSS 扩展能力，但其规范与实现仍处于演进阶段。目前，关键 API 在不同内核浏览器中的支持度参差不齐，这意味着依赖 Houdini 将直接导致大量用户的浏览器无法正常渲染预期效果，从而破坏体验的一致性。
为了保证 Pixelium Design 像素风格在各种环境下的稳定性和可靠性，我最终选择了支持度更广、更为成熟的 Canvas 方案作为替代实现。
在图标选型上，Pixelium Design 整合了风格契合的 @hackernoon/pixel-icon-library 和 pixelarticons 开源版本两个开源库。为确保性能与体验，我们将所有图标预处理为 SVG Vue 组件，这使得图标支持按需引入（Tree Shaking），能有效减少打包体积。开发者可以灵活地按需或全局注册使用这些图标，并通过统一的属性（如 size、color、spin）来控制其外观和交互。
近期目标（v0.0.3）
长期规划
GitHub：https://github.com/shika-works/pixelium-design
文档：https://shika-works.github.io/pixelium-design
欢迎 Star, Issue 与 Pull Request
我们欢迎所有对像素风格和开源项目感兴趣的开发者加入 Pixelium Design 的开发。如果您对项目有疑问、建议或发现任何问题，欢迎在 GitHub 上：
Star：给项目点个星，支持开源项目的发展。
Issue：提出问题或建议，我们将及时处理。
Pull Request：贡献代码，共同完善项目。
欢迎大家使用 Pixelium Design，目前组件数量较少，项目正在持续施工中......
