@zhaoxiangjun/brand-ui 项目索引

react_componet_brandos 是 BrandOS 专用的 React 组件、模板、Hook、类型和前端工具包。它先承接 BrandOS 大型应用的组件化工作，待 API 在真实页面中稳定后，再评估是否将更底层能力迁入 @zhaoxiangjun/base44-ui。

package: @zhaoxiangjun/brand-ui
current workspace: 0.3.0 release candidate
registry: package name confirmed available on 2026-07-13
publish status: 0.2.0 published and verified on 2026-07-14

1. 先看哪份文档

| 任务 | 文档 | | --- | --- | | 查组件 import、Props 和最小示例 | docs/component-api-reference.md | | 在 BrandOS 或 Base44 App 中使用 | docs/base44-usage.md | | AI 接手开发和确认修改入口 | docs/fun/ai-development-guide.md | | AI 按任务配方实施和交付 | docs/fun/ai-task-recipes.md | | AI 按场景选择现有组件 | docs/fun/ai-component-catalog.md | | 机器校验全部公共导出 | docs/fun/public-export-manifest.md | | 判断复用、Adapter 和包边界 | docs/fun/reuse-map.md | | 执行发布前收尾审查 | docs/fun/final-review-checklist.md | | 本地运行 playground 和验收 | docs/local-display.md | | 维护版本、构建和 npm 发布 | docs/npm-package.md | | 查看当前完成状态 | docs/project-status.md | | 查看全项目组件化目标 | docs/fun/componentization-blueprint.md | | 查看媒体组件和上传模板方案 | docs/fun/media-architecture.md | | 查看包边界和迁移阶段 | docs/fun/package-boundaries.md、docs/fun/migration-roadmap.md | | 查看组件包优先的后续拆分计划 | docs/fun/package-first-completion-plan.md | | 查看修改记录 | 初始建包、API 完善与收尾审查、0.2.0 版本准备、Phase 5A、Phase 5B、Phase 5C、Phase 6、Phase 7A、Phase 7B、Phase 7C、Phase 7D、Phase 8、公共复用与 AI 文档优化、0.3.0 版本准备 |

2. 快速安装

发布后使用：

npm install @zhaoxiangjun/brand-ui

import "@zhaoxiangjun/brand-ui/styles.css";
import { FilterPills, MediaLibraryCard, SourceScopePanel } from "@zhaoxiangjun/brand-ui";

0.2.0 已发布，当前工作区已升级为待发布的 0.3.0。用户发布并验证 registry 版本后，再统一让 react_ts_brandos 切换版本并迁移页面。

3. 项目边界

可以包含：

• BrandOS 可复用展示组件和受控模板。
• Props、callbacks、children 和 render props 扩展点。
• 浏览器端 UI Hook、类型、格式化和媒体工具。
• BrandOS 视觉 Token、locale 和 playground。

不应该包含：

• Base44 SDK、Supabase、XData 或真实接口请求。
• Auth、partner、品牌、分组和角色权限查询。
• Token、密钥、用户账号和管理员凭据。
• Google Drive OAuth、设备指令和 AI 后端调用。

4. 当前能力

Feedback: ConfirmDialog / TextInputDialog
Filters: FilterPills
Scope: SourceScopePanel
Media: MediaLibraryCard / MediaLibraryGrid / MediaLibraryToolbar
       MediaPickerDialog / MediaUploadDialog / MediaUploadProgress / useUploadQueue
Projects: ProjectList / ProjectCardShell / ProjectFilterBar / ProjectSlidesStrip
          Pagination / AuditMetadata / projectTypes
Campaign: StatusTabs / PlaybackActions / ScheduleSummary / ScheduleTimeline
          ScheduleWeekGrid / BatchProgressDialog / campaignTypes
Approval: ApprovalSummary / StatFilterPills / ApprovalCardShell / ApprovalActions
          ApprovalDeviceConfirmContent / ApprovalBatchSelectionDialog
Monitoring: TrackingSummary / CampaignTrackingList / TrackingCardShell
            PlaybackControlContent / ScheduleUpdateSummary
Devices: StatusIndicator / DeviceStateSummary / DeviceCommandCard
         DeviceControlSection / BrightnessScheduleEditor / deviceTypes
Foundation: SearchField / SummaryGrid / OptionSelectionDialog / FormSection / SummaryCard
            useDebouncedValue / useMediaQuery / useViewport / useControllableSelection
AI: ChatMessage / ChatAttachmentPreview / ChatComposer / WizardSteps
    ColorPalettePicker / ImageUploadField / ReferenceImagesField
    GenerationProgressOverlay / SelectionCard / TemplateFilterBar / aiTypes
Editor: TemplateSelectionCard / TemplateCategoryFilter / EditorEmptyState
        MediaLibraryImportDialog / editorTypes
Administration: EntityListToolbar / EntityFormDialog / RolePermissionEditor
                StaffAssignmentDialog / administrationTypes
Billing: DateRangePicker / CsvExportButton / MoneyField / billingTypes
Core: BrandUiLocale / BrandUiOption / i18n / cn / formatMediaDuration
      formatFileSize / formatMessageTemplate

全部公共输入、输出、默认值和回调语义以 组件 API 参考 为准；宿主接口转换规则见 宿主集成契约。

5. 本地开发

npm install
npm run dev
npm run typecheck
npm test
npm run build
npm pack --dry-run

6. 修改记录

重要节点记录在 docs/logs/。AI 不得执行 npm publish；发布必须由用户确认并亲自运行 publish-npm.bat。