@done-coding/admin-core

面向多形态应用的配置化前端框架核心：表单 / 列表 / 表格 / 弹窗 / 面板 / 布局组件族 + hooks + bridge 接线中枢。既能搭后台管理台，也能搭面向终端用户的应用（AI 应用台、创作/对话类产品）。

核心范式：配置驱动——组件消费配置对象（FormItemConfig / TableColumnProps / PanelItemConfig…）而非散装 props/插槽；万物皆表单、万物皆 Nest 递归组合（嵌套子表单/子面板不手写 HTML）。

完整可运行示例见 apps/reference（范式项目）：路由与目录逐字同构（/list-page/guide ↔ pages/list-page/guide/），每个组件族都有最佳实践（guide）/ 完整功能（showcase）页面。

安装

pnpm add @done-coding/admin-core

样式必须显式引入（SFC scoped CSS 被抽取到独立 style.css，漏引会导致 scoped 选择器失效、布局塌陷）：

import "@done-coding/admin-core/style.css";

peer 依赖需消费方自装：vue / vue-router / pinia / pinia-plugin-persistedstate / element-plus / @element-plus/icons-vue / lodash / @done-coding/request-axios

快速开始（三件套）

// ① 实例化 bridge（接线中枢：认证 / 布局 / 主题 / 路由派生）
// 参考 apps/reference/src/config/bridge.ts
const appCoreBridge = createCoreBridge({ ... });

// ② 组装 AppLayout（全局布局根，provide 全部契约）
// 参考 apps/reference/src/App.vue
<AppLayout :bridge="appCoreBridge" :app-store="appStore" :user-store="userStore">
  <template #brand>...</template>
  <template #userEntry>...</template>
  <template #aside>...</template>
</AppLayout>

// ③ 页面用组件族（范式：AppPage 容器 + ListPage/FormMain/PanelMain 三主件）
// 参考 apps/reference/src/pages/list-page/guide/
<AppPage>
  <ListPage :list="searchFormList" :columns="columns" row-key="id" :api="listApi" />
</AppPage>

组件族索引

| 族 | 组件 | 文档 | | --- | --- | --- | | form 表单族 | FormMain / FormSearch / FormSubmitBtn / FormSubmitPanel / FormItemNestForm / FormItemNestFormList / FormSelect / FormRadioGroup / FormTree / FormVerifyImage / FormVerifyCode | README 等 | | list-page 列表族 | ListPage（FormSearch + TableMain 组合页） | README | | table 表格族 | TableMain | README | | modal 弹窗族 | ModalConfirm / ModalForm / ModalDetail / ModalShelf / ModalPorter | README 等 | | panel 面板族 | PanelMain / PanelItem / PanelEditSwitch / PanelItemNestPanel / PanelItemNestForm | README | | display 展示族 | TabsMain / ActionBtn / ActionBtnGroup / ActionConfirm / WatchSize / HeightProvider / BooleanTag | README 等 | | app-layout 布局族 | AppLayout / AppPage / AppBody / AppHeader / AppSidebar / AppAside / AppBreadcrumb / AppFooter / AppTheme / AppCollapseToggle | 族引导见 components/README | | menu 菜单族 | MenuTree / MenuItemSub | 同上 | | slot-layout 插槽布局族 | SlotLayoutTemplate / SlotLayoutFlowAside | 同上 | | data-view 数据视图族 | DataListView / DataListViewItem（TableMain 内部件，customView 模式） | 同上 | | misc 杂项族 | AutoRefresh / AutoRefreshGroup / SelectModule / TriggerAutoRefresh | 同上 |

模块索引

| 模块 | 说明 | 文档 | | --- | --- | --- | | bridge | createCoreBridge 接线中枢：auth / 布局 / 主题 / 路由派生 + 响应式配置视图 | README | | hooks | useActivated / useFeelSize / useBreakpoint / useCustomBreakpoint / useObserveSize / useChannelViewportHeight / useCoreThemeApply / useCoreViewportApply / useMenusDataDispatch / useTimeout | README | | store | createAppStore / createUserStore / router-permission pinia 工厂 | 见 reference src/store/ 实例化 | | inject | 跨包 Symbol 契约（SCOPE_VIEWPORT_MAX_HEIGHT / CORE_BRIDGE_KEY / FORM_NEST_REGISTRY_KEY 等） | 见各组件文档「高度链」相关段落 | | config | APP_API_LIST_MODEL_KEY_CONFIG（列表接口模型）/ ROUTE_MODULE_LEVEL / TabsMainReplaceQueryKey | — | | types / utils / router | 路由元类型 / 通用工具（time/id/dom/router/export/theme-scale）/ withGroupRedirect | — |

文档约定

• 组件文档命名 README-<PascalName>.md，位于组件族目录内；src/**/README*.md 随 npm 包发布
• 每个组件文档结构：定位 → 快速上手（最佳实践）→ API（props/emits/slots/expose）→ 反模式/注意 → 关联
• 完整可运行范式页见 apps/reference：<族>/guide（最佳实践）、<族>/showcase（完整功能）、其余功能语义名
• API 以 packages/core/src/**/types.ts 与组件源码为真相源；文档与其冲突时以源码为准