lianfang_admin_ui

联方后管 UI 框架：在 Element Plus 上做二次封装。组件名统一 Lf 前缀（如 LfProTable），样式 class 用 lf-。

目标：后管常见页面「传配置就能跑」，少拼子组件。列表 CRUD 主路径是 LfProTable（一张 columns 同时驱动搜索、表格、新建/编辑/详情表单）。

• 详细：docs/pro-table.md（必读）／ docs/form.md／ docs/upload.md／ docs/other.md
• 改包约定（给 AI / 维护者）：AGENTS.md

安装与引入

peer 依赖

• vue ^3.5
• element-plus ^2.9
• qrcode ^1.5（仅用 LfQrCode / LfQrCodeDialog 时需要）
• @vue-office/docx @vue-office/excel @vue-office/pptx + vue-demi（LfFileViewer 在线预览 Word/Excel/PPTX）

消费方必须自己引入 Element Plus 样式；本包只提供增量样式 lianfang_admin_ui/style.css。

monorepo（本仓库）

根 package.json 写 semver（不要 workspace: / file:）：

{ "dependencies": { "lianfang_admin_ui": "^0.3.0" } }

本地 packages/lianfang_admin_ui 版本匹配时，pnpm 会链到源码。

按需使用（本仓库主项目推荐）

// main.ts
import 'element-plus/dist/index.css'
import 'lianfang_admin_ui/style.css'
import { setTheme } from 'lianfang_admin_ui'

setTheme('gold') // 或 green / purple / ...

// 页面里
import { LfProTable, type LfProTableColumn } from 'lianfang_admin_ui'

全量注册（可选）

import LianFangAdminUI from 'lianfang_admin_ui'
import 'lianfang_admin_ui/style.css'

app.use(LianFangAdminUI, { theme: 'green' })

组件一览

| 组件 | 干什么 | 文档 | |------|--------|------| | LfProTable | 搜索 + 表格 + 弹窗 CRUD + 导入导出批量 | pro-table.md | | LfOrgTree | 侧栏组织树（搜索 + 选中）；可单独用 | other.md | | LfOrgProTable | 左树右表组合（OrgTree + ProTable） | other.md | | LfForm / LfSearchForm | 配置化表单 / 筛选表单 | form.md | | LfTable | 纯表格（列配置、valueEnum、操作列） | other.md | | LfEditTable | 可编辑明细表（常嵌在表单里） | form.md | | LfUpload / LfFileViewer | 上传回显、系统内预览 | upload.md | | LfRichText / LfArticleViewer | 富文本编辑（wangEditor）/ 文章阅读壳 | form.md / other.md | | LfQrCode / LfQrCodeDialog | 二维码图 / 弹窗（复制载荷+下载 PNG，依赖 peer qrcode） | other.md | | LfModal | 新建/编辑/详情弹窗壳（含 layout="workspace"） | other.md | | LfContextMenu | 右键 / 浮动菜单 | other.md | | LfEmpty / LfDescriptions | 空态、详情描述列表 | other.md | | LfStatCards | 统计指标卡片组（单/次/多指标 + 升降） | other.md | | LfMetricStrip | 紧凑可点指标条（状态色，弹窗/回执） | other.md | | LfProgressRing | 环形完成率 | other.md | | LfPersonList | 人员名单（头像字 + 徽标） | other.md | | LfSegmented | 分段 chip 切换 | other.md | | LfPanel 等 | 工作台模块（欢迎/快捷入口/待办/公告/…） | other.md | | LfCascader / LfTreeSelect / LfTimePicker | 级联、树选、时间 | form.md | | LfButton / Input / Select / DatePicker / … | 基础控件 | 薄封装，API 贴近 EP | | setTheme / LfConfigProvider | 一键换肤 | 见下方 |

30 秒上手：最小 ProTable

<script setup lang="ts">
import { reactive } from 'vue'
import { LfProTable, type LfProTableColumn, type LfProTableRequestParams } from 'lianfang_admin_ui'

const query = reactive({ name: '' })

const columns: LfProTableColumn[] = [
  { prop: 'name', label: '姓名', search: true, form: { required: true } },
  { prop: 'status', label: '状态', search: { type: 'select', options: [{ label: '启用', value: '启用' }] } },
  {
    prop: 'action',
    label: '操作',
    width: 180,
    fixed: 'right',
    actions: [
      { key: 'detail', label: '详情' },
      { key: 'edit', label: '编辑' },
      { key: 'delete', label: '删除', type: 'danger' },
    ],
  },
]

async function fetchPage(params: LfProTableRequestParams) {
  // 返回 { list, total } 或 { data, total } 或直接数组
  return getUserPage(params)
}
</script>

<template>
  <LfProTable
    v-model:search="query"
    :columns="columns"
    :request="fetchPage"
    :on-create="async (v) => createUser(v)"
    :on-update="async (v, row) => updateUser(row.id, v)"
    :on-delete="async (row) => deleteUser(row.id)"
    row-key="id"
  />
</template>

要点：

1. 一张 columns：search → 筛选项；form → 弹窗字段；其余 → 表格列。
2. 操作列要自己声明 actions，并写上 key: 'detail' | 'edit' | 'delete'，ProTable 才会自动接线。
3. request 入参固定带 page（从 1 起）和 pageSize，外加搜索字段。

更完整的能力（多步表单、导入导出、批量删除、远程 options）见 docs/pro-table.md。

主题

import { setTheme } from 'lianfang_admin_ui'

setTheme('green')
setTheme({ primary: '#0ea5e9' })

预设：default / green / purple / orange / red / cyan / dark / gold。

也可：app.use(LianFangAdminUI, { theme: 'green' }) 或 <LfConfigProvider theme="purple">。

本地开发 / 发布

pnpm install
pnpm --filter lianfang_admin_ui typecheck
pnpm --filter lianfang_admin_ui build
# 发布
pnpm --filter lianfang_admin_ui publish --access public --registry https://registry.npmjs.org/

命名约定：组件 LfXxx，目录 src/<kebab>/，class lf-xxx。

Demo（消费方仓库）

本 monorepo 主项目里有可点页面（需起后端）：

| 路由 | 内容 | |------|------| | /ui-demo/pro-table | ProTable 全能力对照 | | /ui-demo/org-tree | 左树右表（LfOrgTree + LfProTable） | | /ui-demo/stat-cards | 统计指标卡片（LfStatCards） | | /ui-demo/form | 表单字段类型 + Empty/Descriptions | | /ui-demo/upload | Upload 图片模式 + FileViewer | | /ui-demo/search-form / table / edit-table / modal / theme | 其它 |

优先对照 src/views/ui-demo/pro-table.vue 写业务页。