战争背包战区
212.01MB · 2025-12-09
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 组件，内置交互状态管理；
支持灵活的样式定制和主题配置；
完整的 TypeScript 类型支持，提升开发体验；
采用现代前端开发模式，注重代码质量和可维护性。
我们选择了以下技术栈，以确保组件的高性能和良好的开发体验：
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）来控制其外观和交互。
? 像素美学
严格采用硬边缘像素绘制技术，注重每一像素的精确排布，形成独特的数字艺术风格，还原早期数码界面的纯粹质感与视觉魅力。
? 自定义主题
提供了高度灵活的主题定制能力，您不仅可以自由定义全局色彩方案，还能调整像素颗粒的基础尺寸，轻松打造独一无二的个性化像素风界面。
? 深色模式
完整支持浅色与深色主题切换，既可设置为自动跟随系统外观，也能在应用内手动控制，确保在任何光线下都能获得舒适的视觉体验。
? OKlab 色域
核心渐变算法基于感知均匀的 OKlab 色彩空间，有效解决了传统色域中亮度不均的问题，确保了色彩在任何明度下过渡都平滑且自然。
? 响应式布局
采用现代 CSS Grid 与 Flexbox 布局技术，结合断点系统，确保所有组件与布局都能在各种屏幕尺寸和设备上自适应显示。
? Tree-shaking
项目构建时支持先进的 Tree-shaking 优化，所有组件均可独立导入，最终打包产物将自动剔除所有未使用的代码，极致优化项目体积。
✅ 类型安全
项目 100% 由 TypeScript 构建，提供了完整、精确的类型定义文件，在开发阶段即可捕获潜在类型错误，极大提升代码的健壮性和可维护性。
? 文档全面
使用 VitePress 构建了交互式文档站，结合标准化的 JSDoc 注释，能够自动生成实时可用的组件示例和详尽的 API 接口文档。
近期目标（v0.0.3）
支持切换像素宽度，支持 2px 和 4px。
完善表单组件：radio、checkbox、range、switch、form。
图片展示组件和图片像素化功能。
虚拟列表组件。
完善测试用例。
长期规划
持续增加新组件
我们将持续增加新的组件，以满足更多的应用场景。我们欢迎社区的建议和贡献，共同打造更加完善的组件库。
性能优化与社区共建
我们将持续优化组件的性能，并积极与社区互动，收集用户的反馈，不断改进。
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，目前组件数量较少，项目正在持续施工中......
