[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-105445":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":8,"htmlUrl":8,"language":9,"languages":8,"totalLinesOfCode":8,"stars":10,"forks":11,"watchers":12,"openIssues":11,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":14,"stars7d":14,"stars30d":14,"stars90d":13,"forks30d":13,"starsTrendScore":15,"compositeScore":16,"rankGlobal":8,"rankLanguage":8,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":8,"pushedAt":8,"updatedAt":22,"readmeContent":23,"aiSummary":8,"trendingCount":13,"starSnapshotCount":13,"syncStatus":24,"lastSyncTime":25,"discoverSource":26},105445,"auric-ui","Secretmakewomenwomen\u002Fauric-ui","Secretmakewomenwomen",null,"TypeScript",102,1,53,0,49,147,77.9,"MIT License",false,"main",true,[],"2026-11-01 00:16:57","# AuricUI\n\n**面向 AI 应用的 React 组件库，从基础交互到聊天与编辑工作台。**\n\nAuricUI 将表单、消息、工具调用、项目管理和媒体编辑组件放在统一的视觉系统中。以深色界面为起点，支持浅色主题，帮助你搭建 AI 助手、Agent 工作台和内容创作工具。\n\n![AuricUI 文档站预览：深色主题、组件导航与快速开始](.\u002Fdocs\u002Fimages\u002Fimage1.png)\n\n[在线文档与演示](https:\u002F\u002Fcoderclouds.com:8443\u002F#\u002Fstart) · [快速开始](#快速开始) · [组件入口](#组件入口) · [运行文档](#运行文档) · [参与贡献](.\u002FCONTRIBUTING.md)\n\n## 特性\n\n- **覆盖日常交互与 AI 场景**：从按钮、表格和弹窗，到消息、引用、工具执行、操作确认与记忆展示。\n- **支持复杂工作台**：提供富文本输入、模型菜单、时间轴、图层、素材和属性面板，可按业务需要组合。\n- **主题与动效随包提供**：深浅主题、CSS 变量、Inter 字体和过渡动画，无需额外配置 Tailwind 即可使用组件样式。\n- **示例与实际组件一致**：文档中的预览和可复制代码共用示例源，属性信息从 TypeScript 提取，并通过包消费检查。\n\n## 快速开始\n\n### 1. 安装组件库\n\n在已有 **React 19 + React DOM 19** 项目中安装：\n\n```bash\nnpm install auricui@next\n```\n\n### 2. 安装 Skill，让 AI 帮你搭建界面\n\nAuricUI 配套提供编程 Agent Skill，包含组件选择、API 查询、主题配置、业务接入指南和可编译示例。安装后，可以直接描述你想要的页面，让 Agent 按组件库的实际接口实现。\n\nSkill 采用按需读取：入口保留关键约束，Agent 先搜索组件，再查询单个组件的参数，需要时才加载一个示例或对应的业务指南。参数优先来自项目实际安装的版本，避免一次把整个组件索引和全部示例放入上下文。\n\n在你的应用项目根目录执行：\n\n```bash\nnpx auricui-skill@latest\n```\n\n默认安装到当前项目的 `.agents\u002Fskills\u002Fauricui`。如果希望在 Codex 的多个项目中使用，可以选择全局安装：\n\n```bash\nnpx auricui-skill@latest --global\n```\n\n安装后刷新 Agent 的技能列表或新开会话，在对话中使用 `$auricui` 并说明需求，例如：\n\n```text\n使用 $auricui，为当前项目搭建一个 AI 助手工作台：\n左侧是会话列表，中间是聊天内容，底部是消息输入区。\n支持深浅主题切换、流式回复和工具调用状态。\n先检查项目中安装的组件版本与 API，再实现页面；业务请求通过回调接入。\n```\n\nSkill 安装器只安装指南和工具，组件库仍通过上面的 `npm install` 安装。其他支持 `SKILL.md` 的 Agent 可通过 `--dir \u003C技能父目录>` 指定位置；不自动发现技能的工具，可让它读取安装目录中的 `SKILL.md`。更新已有安装时，在原安装命令后加 `--update`，安装器会先备份旧版本。更多选项见 [Skill 使用说明](.\u002Fpackages\u002Fauricui-skill\u002FREADME.md)。\n\n#### 第一次使用：让 Agent 先了解项目\n\n在编程工具中打开你的应用项目，再把需求发送到对话框。`$auricui` 写在给 Agent 的消息里，无需在终端执行。第一次接入时，可以先让它检查项目结构和依赖，再实现一个小页面：\n\n```text\n使用 $auricui，先检查当前项目的框架、React 版本和已安装的 AuricUI 导出。\n沿用现有路由和包管理器，接入全局样式与主题，避免重复挂载 Provider。\n然后实现一个应用设置页，包含主题切换、通知开关和保存反馈。\n```\n\n如果 Agent 没有识别技能，项目内安装的用户可以告诉它：“请先读取 `.agents\u002Fskills\u002Fauricui\u002FSKILL.md`，按其中的指南完成任务。”全局或自定义安装则使用安装器输出的实际路径。Skill 附带的依赖与 API 查询脚本需要 Python 3，可由 Agent 按指南运行。\n\n#### 描述需求：说明布局、交互和数据来源\n\n不需要提前列出每个组件名。告诉 Agent 页面给谁用、有哪些区域、点击后应发生什么，并提供已有接口或数据类型，它就能据此选择组件。尚未接入后端时，明确要求使用本地示例数据，并保留业务回调：\n\n```text\n使用 $auricui，搭建一个任务管理页面。\n顶部放搜索和状态筛选，中间用表格展示任务，点击任务后在右侧抽屉查看详情。\n支持加载中、空列表和请求失败状态，窄屏下也要可用。\n先用本地示例数据，搜索、保存和删除通过回调接入，方便以后替换成真实接口。\n```\n\n#### 改造已有页面：指出范围和需要保留的行为\n\nSkill 也适合渐进替换现有界面。附上目标文件或让 Agent 定位页面，说明要保留的业务逻辑、需要调整的视觉细节，以及允许修改的范围：\n\n```text\n使用 $auricui，改造现有的用户设置页面。\n保留当前表单字段、校验规则、接口调用和路由，仅替换界面组件并统一样式。\n按钮圆角设为 6px，使用克制的聚焦样式，补充保存中的禁用状态和结果反馈。\n先核对已安装组件支持的 props，不支持的部分用应用层组合实现。\n```\n\n#### 继续迭代：把反馈变成可验证的要求\n\n页面生成后，可以继续用自然语言调整：“缩小侧栏宽度”“增加空状态”“让抽屉支持键盘关闭”。涉及 bug 时，提供触发步骤、实际表现与期望结果；例如“切换到工作台后滚动到底部出现空白，期望页面固定一屏，各面板内部滚动”。\n\n完成前，可以让 Agent 做一次验收：\n\n```text\n请按 AuricUI Skill 检查这次改动：\n确认使用的是已安装版本的公开组件和 props，样式与 Provider 已正确接入。\n运行项目现有的类型检查和构建，在可用的浏览器环境中验证键盘操作、\n深浅主题、窄屏布局，以及加载、空数据和错误状态。\n最后列出已验证的结果、仍使用模拟数据的功能和未能验证的部分。\n```\n\n### 3. 最小接入示例\n\nAuricUI 提供 ESM 和 TypeScript 类型声明，也可在 JavaScript 项目中使用。`next` 为 npm 预览渠道，可能落后于仓库源码；安装版本以项目锁文件为准。\n\n在应用入口导入样式，并在根部挂载一次 `AuricUIProvider`：\n\n```tsx\nimport { useState } from 'react';\nimport { AuricUIProvider, CardButton } from 'auricui';\nimport 'auricui\u002Fstyles.css';\n\nexport default function App() {\n  const [theme, setTheme] = useState\u003C'dark' | 'light'>('dark');\n\n  return (\n    \u003CAuricUIProvider theme={theme}>\n      \u003Cmain\n        style={{\n          minHeight: '100vh',\n          padding: 24,\n          background: 'var(--bg)',\n          color: 'var(--text)',\n        }}\n      >\n        \u003CCardButton\n          weight=\"primary\"\n          onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}\n        >\n          切换到{theme === 'dark' ? '浅色' : '深色'}主题\n        \u003C\u002FCardButton>\n      \u003C\u002Fmain>\n    \u003C\u002FAuricUIProvider>\n  );\n}\n```\n\n在初始 HTML 中设置 `\u003Chtml data-theme=\"dark\">`，让首屏与默认主题保持一致。使用 Chat 组件时，将对应内容放入 `.auricui-chat` 容器。自定义配色、Portal 和服务接入说明见 [组件包文档](.\u002Fpackages\u002Fauricui\u002FREADME.md)。\n\n## 组件入口\n\n按使用场景选择入口：\n\n| 入口 | 提供的能力 |\n| --- | --- |\n| `auricui` | 按钮、表单、Table、Drawer、Tree、Tabs、主题 Provider 等基础组件 |\n| `auricui\u002Fagent` | 消息、引用、工具执行、操作确认、记忆、目标和简报 |\n| `auricui\u002Fchat` | 富文本输入、Markdown、模型菜单和聊天组件 |\n| `auricui\u002Fstudio` | 时间轴、图层、素材、项目和编辑器组件 |\n| `auricui\u002Fdemo` | 浏览器内的本地演示数据、模拟宿主与素材 |\n| `auricui\u002Fstyles.css` | 编译好的组件样式、字体与动画 |\n\n基础组件与 Agent 组件通过 props 和回调连接业务。部分 Chat \u002F Studio 组合组件需要配置服务适配器，由应用提供模型调用、项目持久化和媒体处理等能力。文档中的完整场景用于展示组合效果，这些服务行为使用本地模拟。\n\n## 运行文档\n\n文档站提供组件预览、可复制示例、属性说明和主题配置，以及聊天工作台、专业编辑器、项目管理、应用设置、模板与技能库五个完整场景。\n\n克隆仓库后，在根目录执行：\n\n```bash\nnpm ci\nnpm run build\nnpm run dev\n```\n\n打开 **\u003Chttp:\u002F\u002F127.0.0.1:5178\u002F#\u002Fstart>**。\n\n源码开发需要 Node.js 22.12+、npm 和 `tar`；完整验证还需要 Python 3。推荐使用 `.nvmrc` 指定的 Node.js 22。首次构建会自动生成组件库、Skill 安装包及文档下载资源，无需 npm 登录或 Docker。\n\n后续开发可直接运行 `npm run dev`。修改公开 API 或文档示例后，执行 `npm run docs:generate` 更新文档数据。\n\n## 开发与验证\n\n| 命令 | 用途 |\n| --- | --- |\n| `npm run dev` | 启动文档开发服务器 |\n| `npm run prepare:docs` | 生成本地安装包、API 文档和下载资源 |\n| `npm run pack:lib` | 构建并打包当前组件库 |\n| `npm run build` | 构建组件库、Skill 与静态文档站 |\n| `npm run check` | 执行组件测试、包消费、文档示例和 Skill 安装器检查 |\n\n提交前执行 `npm run build` 和 `npm run check`。检查覆盖类型声明、ESM 导入、SSR、浏览器构建与文档示例编译；界面交互还需在浏览器中验证，具体要求见 [贡献指南](.\u002FCONTRIBUTING.md)。\n\n需要在其他项目中试用尚未发布的修改时，运行 `npm run pack:lib`，将 `artifacts\u002F` 中生成的组件库 tgz 复制到目标项目，再通过 `npm install .\u002Fvendor\u002F实际文件名.tgz` 安装。\n\n\u003Cdetails>\n\u003Csummary>源码目录\u003C\u002Fsummary>\n\n| 目录 | 内容 |\n| --- | --- |\n| `src\u002Fcomponents\u002Fprimitives\u002F`、`src\u002Fagent\u002F` | 基础与 Agent 组件 |\n| `src\u002Fchat\u002F`、`src\u002Fstudio\u002F`、`src\u002Fengine\u002F` | 聊天、编辑器与浏览器算法 |\n| `src\u002Flibrary\u002F`、`src\u002Fstyles\u002F` | 公开入口、Provider 与样式 |\n| `src\u002Fdocs\u002F`、`src\u002Fdemo\u002F` | 文档、组件示例和场景预览 |\n| `public\u002Fdemo-film\u002F` | 本地演示素材 |\n| `packages\u002F` | npm 包配置与安装器源码 |\n| `skills\u002Fauricui\u002F` | Skill 指南、示例、工具与上游参考快照 |\n| `scripts\u002F` | 构建、检查与发布脚本 |\n\n构建产物位于 `dist\u002F`、`artifacts\u002F` 等目录，由脚本生成，不提交到 Git。\n\n\u003C\u002Fdetails>\n\n## 部署与发布\n\n文档站构建产物位于 `dist\u002F`，可使用仓库中的 [Dockerfile](.\u002FDockerfile) 制作静态站点镜像。镜像构建、推送与服务器更新步骤见 [部署说明](.\u002Fdeploy\u002FREADME.md)。\n\n\u003Cdetails>\n\u003Csummary>维护者：发布 npm 包\u003C\u002Fsummary>\n\n修改完 `skills\u002Fauricui\u002F` 中的指南和示例后，可使用 Skill 维护工作流：\n\n```bash\n# 同步组件索引和示例、构建安装包与文档、执行全部检查\nbash scripts\u002Fmaintain-skill.sh\n\n# 检查通过后递增 Skill 版本、发布 npm，并更新本机 Codex Skill\nbash scripts\u002Fmaintain-skill.sh --publish --install-global\n```\n\n仅在本机试用时使用 `--install-global`，不加 `--publish`。脚本不会自动编写缺失的组件教程；可用参数和失败恢复方式见 [Skill 维护流程](.\u002FCONTRIBUTING.md#skill-维护流程)。\n\n组件库及组合发布命令：\n\n```bash\nnpm run release -- --dry-run # 校验组件库发布流程，不上传\nnpm run release             # 递增版本并发布组件库\nnpm run release:skill       # 递增版本并发布 Skill\nnpm run release:all         # 发布两者\n```\n\n单独发布 Skill 前先执行 `npm run prepare:docs`。实际发布需要对应的 npm 权限；组件库预览版本使用 `next` 标签，Skill 使用 `latest` 标签。日常构建和 CI 只生成产物并运行检查。\n\n\u003C\u002Fdetails>\n\n## 参与贡献\n\n欢迎反馈使用问题、改进文档与可访问性，或提交组件修复。开始前请阅读 [贡献指南](.\u002FCONTRIBUTING.md)，了解开发流程、验证要求和提交范围。\n\n## 许可与致谢\n\nAuricUI 采用 [MIT License](.\u002FLICENSE)。部分 Chat \u002F Studio UI 与浏览器算法来自 OpenFilm，保留其 [原始 MIT 许可证](.\u002FOPENFILM-LICENSE)。感谢 OpenFilm 及相关开源项目的贡献。\n\n字体、服务商图标及其他依赖的来源和许可见 [第三方声明](.\u002FTHIRD-PARTY-NOTICES.md)。\n",2,"2026-10-31 04:26:48","CREATED_QUERY"]