@done-coding/admin-core

@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>

组件族索引

模块索引

文档约定

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