### Component Registration and Configuration

Source: https://github.com/qhkklm/docs/blob/main/README.md

Demonstrates how to register core components (CoTable, coDetail, CoForm) and provide common configurations like dictionary loading, file uploads, and environment setup. This setup ensures a unified data handling and display experience across components.

```javascript
// src/main.js（节选）
import CoTable from '@dev-crud/co-table';
import coDetail from '@dev-crud/co-detail';
import CoForm from '@dev-crud/co-form';
import { getDicTionaryAndBackValue } from '@/api/common/dic.js';
import { waitEnvReady } from '@/hooks/useEnv';

const coCommon = {
  getDic: async (key) => {
    await waitEnvReady();
    return getDicTionaryAndBackValue(key);
  },
  dicKeys: ['label', 'value'],
  fileUpload: (file) => Promise.resolve({ id: Date.now() + '_' + file.name, name: file.name }),
  fileSrc: (idOrUrl, name) => Promise.resolve({ src: String(idOrUrl), name }),
  getFiles: (ids) => Promise.resolve({ code: 200, data: (Array.isArray(ids) ? ids : [ids]).map(id => ({ fileUrl: String(id), fileName: String(id) })) }),
};

app
  .use(CoTable, coCommon)
  .use(coDetail, coCommon)
  .use(CoForm, { ...coCommon, options: { labelWidth: '120px' } });

// Element Plus 已在模板中统一引入：src/main.js
```

--------------------------------

### Vue 3 CRUD 组件构建与发布

Source: https://github.com/qhkklm/docs/blob/main/README.md

提供了构建所有包、持续构建以及发布到 npm 的命令。发布过程基于各包的 package.json 中的 publishConfig 配置。

```bash
# 构建所有包
pnpm build

# 持续构建
pnpm build:dev

# 发布到 npm
pnpm release
```

--------------------------------

### Vue 3 CRUD 组件配置简化提案 (vNext)

Source: https://github.com/qhkklm/docs/blob/main/README.md

提出了关于简化 Schema 和 Config 的设计建议，包括扁平化 contexts、快速显隐开关、简洁类型集、去除 Schema 中的 dict、规则归拢等。

```javascript
// 关键变化概览:
// - 扁平化 contexts: 移除 contexts.{search,table,detail,form} 嵌套，统一为同名一层键。
// - 快速显隐开关: search|table|detail|form 支持 true/false | object。
// - 简洁类型集: type 限定为 text|number|date|datetime|daterange|select|switch|textarea|img|video|file|html。
// - 去除 Schema 中的 dict: 统一在页面/模块 config.dic 里配置字典。
// - 规则归拢: 校验 rules/required 统一放入字段的 form 配置里 (如: form.required)。
// - 组件注册更灵活: 页面 config.components 支持局部组件注入与覆盖。
// - 自动枚举识别: 若 config.dic[fieldName] 存在且 type 为空，默认当作 select 渲染。
// - 文档导向: 示例先行、约定优于解释，提供“最小必需字段 + 默认行为”。
```

--------------------------------

### Define Page/Module Level Configuration

Source: https://github.com/qhkklm/docs/blob/main/README.md

Sets up page or module-level configurations, including operations (buttons), dictionary mappings for dropdowns, local component registration for custom rendering, table request settings, and file upload/source handling.

```ts
export default {
  // 顶部与行内操作（保持不变，可沿用）
  operation: {
    list: [
      { mark: 'new', name: '新建申请', type: 'primary', inTable: 2 },
      { mark: 'edit', name: '编辑', type: 'text', inTable: 1, rule: 'row.approvalStatus === 0 || row.approvalStatus === 3' },
      { mark: 'view', name: '详情', type: 'text', inTable: 1 },
    ],
  },

  // 字典统一入口：字符串键/函数/数组三种
  dic: {
    applicationType: 'ApplicationTypeEnum',       // 远程键，走全局 getDic
    approvalStatus: async () => [ { label: '草稿', value: 0 }, { label: '驳回', value: 3 } ],
    projectMethod: [ { label: '公开招标', value: 1 }, { label: '邀请招标', value: 2 } ],
  },

  // 局部组件注册：优先级高于安装期 components，用于自定义渲染/编辑器
  components: {
    // 例如：为某个字段在表单里使用自定义选择器
    // UserPicker,
  },

  // 表格远程请求（保持现状）
  request: { apiName: getApplicationInfoPage, params: {} },

  // 媒体/上传能力（保持现状）
  fileUpload(file) { /* … */ },
  fileSrc(idOrUrl, name) { /* … */ },
  getFiles(ids) { /* … */ },
};
```

--------------------------------

### AI Prompt for Schema/Config Generation

Source: https://github.com/qhkklm/docs/blob/main/README.md

A prompt template designed for AI or scaffolding tools to generate frontend form/table configurations adhering to vNext specifications. It outlines design principles, input requirements, and expected output formats for schema.js and config.js.

```plaintext
你是前端表单/表格配置助手，请按以下要求输出 schema.js 与 config.js：

— 设计原则
1) 扁平化 contexts：字段下仅保留 `search|table|detail|form` 四键；`true/false` 控制显隐，`object` 为详细配置；默认：`table/search=false`，`form/detail=true`。
2) 简洁类型：仅使用 `text|number|date|datetime|daterange|select|switch|textarea|img|video|file|html`。
3) 去除字段级 dict：统一在 `config.dic` 声明，支持字符串键/函数/数组。
4) 规则归拢到 `form`：每个字段的校验写到 `form.required` 与 `form.rules`。
5) 组件注册：既支持安装期 `components`，也支持 `config.components` 注入局部组件。
6) 自动枚举识别：当 `config.dic[name]` 命中且未声明 type 时，按 `select` 渲染。

— 输入
请基于以下字段信息生成：
- 字段列表（含 name/label/是否搜索/是否表格展示/是否详情展示/表单校验要求/是否有字典与字典键）
- 远程请求信息（如表格分页接口与参数）

— 输出
1) schema.js：字段数组，遵循上述规则；适当使用 `group` 控制 form/detail 分区。
2) config.js：包含 `dic`、`operation`（示例即可）、`request`、必要的上传/回显函数签名。
3) 给出最小可运行片段（如何在 `index.vue` 中引入并绑定）。
```

--------------------------------

### Vue 3 CRUD 组件项目快速开始

Source: https://github.com/qhkklm/docs/blob/main/README.md

展示了如何安装依赖并启动基于 Vite 的 Vue 3 CRUD 组件示例项目。需要 Node.js >= 18 和 pnpm 包管理器。

```bash
pnpm i
pnpm dev
```

--------------------------------

### Configure Upload and Multiple Files

Source: https://github.com/qhkklm/docs/blob/main/README.md

Configures upload behavior for single and multiple files, including immediate upload upon selection and parameter settings for file type, size, and quantity limits. It supports both image and general file uploads.

```ts
export const schema = [
  {
    name: 'gallery', label: '现场照片', type: 'img',
    form: { upload: { multiple: true, upType: 'jpg,png', limit: 6 } }
  },
  {
    name: 'attachments', label: '补充材料', type: 'file', table: false,
    form: { upload: { upType: ['pdf','docx','xlsx'], limit: 5 } }
  },
];

// 页面/安装期配置（二选一位置）
export const config = {
  // 选择后立刻上传；返回 string 或 { id|url|src, name? }
  fileUpload(file){
    return api.upload(file).then(({ id, name }) => ({ id, name }))
  },
  // 服务端 ID → 可预览地址/名称（回显）
  fileSrc(idOrUrl, name){
    return api.fileSrc(idOrUrl).then(({ url, name: n }) => ({ url, name: n || name }))
  }
};
```

--------------------------------

### Configure Runtime Settings for UI Components

Source: https://github.com/qhkklm/docs/blob/main/README.md

Provides runtime configuration for UI components, including dictionaries, request parameters, and operation buttons. This configuration is shared across forms, tables, and details, enabling consistent behavior and data handling.

```javascript
export default {
  operation: {
    list: [
      { mark: 'new', name: '新建申请', type: 'primary', inTable: 2 },
      { mark: 'edit', name: '编辑', type: 'text', inTable: 1, rule: 'row.approvalStatus === 0 || row.approvalStatus === 3' },
      { mark: 'view', name: '详情', type: 'text', inTable: 1 },
    ],
  },
  dic: {
    approvalStatus: 'ApplicationStatusEnum',
    projectMethod: [ { label: '公开招标', value: 1 }, { label: '邀请招标', value: 2 } ],
  },
  request: { apiName: getApplicationInfoPage, params: {} },
};
```

--------------------------------

### Configurable Table Columns with Persistence

Source: https://github.com/qhkklm/docs/blob/main/README.md

Enables users to customize column visibility, order, and width, with local persistence. Uses the `config.tableUserColumns` for configuration and provides events like `@columns-change` and slots like `#columnSetting` for integration.

```vue
<template>
  <co-table :schema="schema" :config="tableConfig" @columns-change="saveColumns"
    #columnSetting="{ state, fields, setState, reset }" >
    <el-popover placement="bottom" trigger="click">
      <template #reference><el-button>列设置</el-button></template>
      <div v-for="prop in state.order" :key="prop" style="display:flex;gap:8px;align-items:center">
        <el-checkbox v-model="state.visibleMap[prop]">{{ fields[prop]?.label || prop }}</el-checkbox>
        <el-input-number v-model="state.widths[prop]" :min="60" :max="600" size="small" />
      </div>
      <div style="margin-top:8px;display:flex;gap:8px">
        <el-button size="small" @click="reset()">还原默认</el-button>
        <el-button size="small" type="primary" @click="setState(state)">保存</el-button>
      </div>
    </el-popover>
  </co-table>
</template>

<script setup>
const persistKey = 'table:applicationInfo';
const storage = {
  get: (k) => JSON.parse(localStorage.getItem(k) || 'null'),
  set: (k, v) => localStorage.setItem(k, JSON.stringify(v)),
};

const tableConfig = {
  tableUserColumns: {
    enabled: true,
    persistKey,
    defaultState: { order: [], visible: [], widths: {} },
    storage,
  },
};

function saveColumns(state){ storage.set(persistKey, state); }
</script>
```

--------------------------------

### Vue 3 co-detail 组件 API 摘要

Source: https://github.com/qhkklm/docs/blob/main/README.md

概述了 co-detail 组件的 props 和行为，包括分组渲染、字典展示、日期格式化和媒体回显。支持通过插槽自定义渲染和控制显隐。

```javascript
// props:
// schema, data, config, border

// 行为:
// 分组渲染、字典展示（多选支持数组或 ','/' ' 字符串）、日期/区间格式化、type: 'img'|'video'|'file' 回显（依赖 config.getFiles）

// 插槽:
// #<field> (值)
// #<field>_label (标签)
// 支持 detail.vif 控制显隐
```

--------------------------------

### Implement Field-Level Formatters and Parsers

Source: https://github.com/qhkklm/docs/blob/main/README.md

Applies field-level formatting for display and parsing for data normalization before submission or input. These functions can be used across table, detail, and form views for consistent data handling.

```ts
// config.js（节选）
export default {
  formatters: {
    winningAmount: (v) => (v == null ? '-' : `${v} 万元`),
    approvalStatus: (v, rec) => ({ 0: '草稿', 1: '审批中', 3: '驳回' }[v] ?? v),
  },
  parsers: {
    registrationTime: (v) => (v ? new Date(v).toISOString() : null),
  },
};
```

--------------------------------

### Vue 3 co-form 组件 API 摘要

Source: https://github.com/qhkklm/docs/blob/main/README.md

展示了 co-form 组件在统一 Schema + Config 模式下的 props、事件和 ref 方法。支持动态表单、上传和验证，并提供了文件上传的配置说明。

```javascript
// props:
// schema | formList, v-model:form-data, dictConfig, config, labelWidth 等

// 事件:
// event(item, value, newFormData, newFormList) // 值变化回调

// 方法 (ref):
// getFormData(opt)
// getFormDataKey(id,opt)
// getNewFormData()
// setFormDataKey(id,val)
// setFormListData(id,list)
// setValidateField(id)

// 上传配置:
// config.fileUpload(file) // 即选即传
// form.upload 透传上传参数 (upType/sizeMax/limit/tips/isOriginValue 等)
```

--------------------------------

### Vue 3 co-table 组件 API 摘要

Source: https://github.com/qhkklm/docs/blob/main/README.md

列出了 co-table 组件在统一 Schema + Config 模式下的常用 props、事件和插槽。当传入 schema 时，表头、搜索和字典可自动映射。

```javascript
// props:
// schema, header, data, search, params, config, row-key, loading, isValidate, align, singleMode, currentRow

// 事件:
// loaded({ elTableRef, getDataList, setRow, setHeader, setData, setPage, setParams })
// operation(payload)
// row-click({ row,index,tableId })
// search({ params, type })
// search-change(prop, value)
// data(list)
// dicLoaded(dicMap)
// columns-change(state)

// 插槽:
// #<prop>_header (列头)
// #<prop> (单元格)
// #<prop>_form-item (行内编辑项)
// #topOperation
// #columnSetting
```

--------------------------------

### Define Unified Schema for UI Components

Source: https://github.com/qhkklm/docs/blob/main/README.md

Defines a unified schema for UI components, driving forms, tables, and details. The schema includes field properties like name, label, type, validation rules, and context-specific configurations for different scenarios.

```typescript
export default [
  { group: { title: '申请信息', column: 1 } },
  { name: 'applicationName', label: '申请名称', search: true, type: 'text', contexts: { form: { required: true } } },
  { name: 'applicationReason', label: '申请原由', type: 'textarea', contexts: { table: { hidden: true }, form: { columns: 1 } } },
  { group: { title: '项目信息', column: 2 } },
  { name: 'projectName', label: '项目名称', type: 'text', contexts: { table: { hidden: true }, form: { columns: 2 } } },
  { name: 'applicationType', label: '申请类型', search: true, type: 'select' },
  { name: 'biddingDocumentId', label: '招标文件', type: 'file', contexts: { table: { hidden: true } } },
];
```

--------------------------------

### Define Field-Level Schema

Source: https://github.com/qhkklm/docs/blob/main/README.md

Defines the schema for individual fields, specifying properties like name, label, type, and configurations for search, table, and form displays. It supports optional grouping and detailed configuration for each scenario.

```ts
export default [
  // 分组（可选）
  { group: { title: '申请信息', column: 1 } },

  // 基础文本：如需出现在表格/搜索，请显式开启 table/search
  { name: 'applicationName', label: '申请名称', type: 'text' },

  // 搜索项开关（bool），表格隐藏（bool），表单详细配置（object）
  {
    name: 'applicationReason', label: '申请原由', type: 'textarea',
    search: false,
    table: false,
    form: { span: 24, placeholder: '请输入申请原由', rules: [{ required: true, message: '必填' }] },
  },

  // 字典来源在 config.dic 中，未显式声明 type 时自动按 select 渲染
  { name: 'applicationType', label: '申请类型', search: true },

  // 媒体与文件
  { name: 'biddingDocumentId', label: '招标文件', type: 'file', table: false },

  // 日期/范围等
  { name: 'registrationTime', label: '报名时间', type: 'datetime', table: false },
  { name: 'range', label: '时间范围', type: 'daterange', table: false, search: true },
];
```

--------------------------------

### Dynamic Field Visibility with v-if Function

Source: https://github.com/qhkklm/docs/blob/main/README.md

Allows dynamic display of detail fields based on business conditions. Configure the 'vif' property within the 'detail' object of a field, accepting a boolean or a function that receives the current record and returns a boolean.

```typescript
export default [
  { name: 'approvalStatus', label: '审批状态' },
  { name: 'rejectionReason', label: '驳回原因', type: 'textarea', detail: { vif: (rec) => rec.approvalStatus === 3 } },
];
```

--------------------------------

### Implement Cross-Component Interaction in Vue

Source: https://github.com/qhkklm/docs/blob/main/README.md

Demonstrates how to manage interactions between UI components like forms and tables in a Vue.js application. It covers emitting events from forms to update table rows and handling row clicks or operations in tables to load details.

```vue
<co-table ref="tableRef" :schema="schema" row-key="id" :config="config"
  @loaded="({ getDataList, setRow }) => (load = getDataList, set = setRow)"
  @row-click="({ row, index }) => (model = { ...row }, loadDetail(row.id))"
  @operation="({ field, row, refresh }) => field==='edit' && (model={...row}, loadDetail(row.id)) || (field==='new' && (model={ id:Date.now() })) || (field==='reSubmit' && refresh && refresh())" />
<co-form v-model:form-data="model" :schema="schema" :config="config"
  @event="(item, value) => tableRef?.setRow?.(/* index */ 0, { [item.id]: value })" />
<co-detail :data="model" :schema="schema" :config="config" />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.