用途:为 Elixir/Phoenix LiveView 应用提供 UI 组件库,组件以 HEEX 函数形式使用,最终渲染为 HTML 自定义元素(<el-dm-*>),样式由 @duskmoon-dev/core 提供。
主要能力:包含 80+ 组件,覆盖操作(按钮、链接、下拉、菜单、切换组)、数据展示(卡片、表格、聊天、Markdown、分页、骨架屏、时间线等)、数据录入(表单、输入、选择、开关、滑块、评分、文件上传、代码编辑器等)、反馈(模态、加载、Toast、Snackbar)、导航(导航栏、面包屑、侧边菜单、步骤条、标签页)、布局(抽屉、底部面板、主题切换)、图标(MDI 7000+、Bootstrap Icons 2000+)以及 CSS 装饰艺术组件。聊天组件面向 LLM 场景,含消息、气泡、输入、推理、工具、输入指示等。
使用方式:在 mix.exs 添加 {:phoenix_duskmoon, "~> 9.4"},并用 bun add @duskmoon-dev/core @duskmoon-dev/elements @duskmoon-dev/css-art @duskmoon-dev/art-elements 安装前端依赖。在 app_web.ex 中 use PhoenixDuskmoon.Component 与 use PhoenixDuskmoon.ArtComponent;在 app.css 中导入 tailwindcss、core 插件、主题与组件样式;在 app.js 中引入 phoenix_duskmoon/hooks 并合并到 LiveSocket hooks;按需 import 各 el-* 的 register 模块注册自定义元素,未注册则内容不可见。
限制:部分组件依赖对应 Hook(如主题切换、页面头部滚动导航、表单反馈、聊天事件桥接);CSS 艺术效果需单独导入对应样式表;自定义元素需注册后才能显示。完整组件属性与插槽见 references/components.md。