open-index/open-npm huggingface dataset:
npm package: @ks-dbdev/template-react-db-record
Description: 多维表格记录插件开发模板
Latest version: 1.0.1

# @ks-dbdev/template-react-db-record

多维表格记录插件开发模板

[![npm version](https://img.shields.io/npm/v/@ks-dbdev/template-react-db-record.svg)](https://www.npmjs.com/package/@ks-dbdev/template-react-db-record)
[![license](https://img.shields.io/npm/l/@ks-dbdev/template-react-db-record.svg)](https://github.com/your-org/db-open-platform/blob/main/LICENSE)

## 🚀 快速开始

### 使用 CLI 创建项目（推荐）

```bash
# 使用 dbdev CLI 工具
npx @ks-dbdev/cli create template

# 或全局安装后使用
npm install -g @ks-dbdev/cli
dbdev create template
```

选择 **"记录插件"** 模板

## 📦 主要功能

本模板提供了 5 个示例功能，展示记录插件的常用能力：

### 1. Base Info（基础信息）
点击第一个按钮，可以查看当前单元格的基础信息。

### 2. Current Sheet Fields Meta（字段元数据）
点击第二个按钮，可以查看当前 Sheet 下的字段列表。

### 3. Sheets Meta List（表格列表）
点击第三个按钮，可以查看所有 Sheet 的信息。

### 4. Current Sheet View Meta（视图元数据）
点击第四个按钮，可以查看当前 Sheet 下的 View 列表信息。

### 5. Task Manager（任务管理器 Demo）
第五个按钮为一个 Demo 组件，展示如何绑定多个字段进行任务管理。当点击某一行的单元格时，可以对该行的任务进行管理。

**⚠️ 注意**：任务管理器需要绑定三个特定字段，字段 ID 必须与代码中要求的一致，否则不生效。

代码中的字段配置：

```javascript
// 任务管理器绑定三个字段：任务描述、任务执行人、任务状态
const taskDescription = 'B'    // 绑定任务描述字段
const taskUserFieldId = 'O'    // 绑定执行人
const taskFieldId = 'F'        // 绑定是否完成字段
```

## 🛠️ 开发流程

### 1. 安装依赖

```bash
npm install
```

### 2. 本地调试

**启动本地开发服务**

打开项目目录终端，执行以下命令启动本地开发服务：

```bash
npm dev
```

命令执行后，终端会显示本地服务端口号（PORT），例如：`5173`

**打开目标多维表页面**

打开需要调试的多维表页面，并在 URL 后增加查询参数：`?plugin_debug=PORT`

示例如下：

- 基础模式：`https://www.kdocs.cn/l/XXXXXXXXX?plugin_debug=5173`
- 已含其他参数模式：`https://www.kdocs.cn/l/XXXXXXXXX?R=XXXXXXXX&plugin_debug=5173`

**验证本地调试效果**

页面刷新后，点击任意单元格打开记录插件面板，即可查看本地开发的插件效果。

💡 请确保本地开发服务（`npm dev`）处于运行状态，否则无法加载本地插件。

### 3. 打包插件

执行以下命令打包插件：

```bash
npm build
```

打包完成后，将 `dist` 文件夹压缩为 `zip` 包，即可上传到 WPS 开放平台。

## 📚 相关文档

- [WPS多维表格记录卡片插件开发指南](https://365.kdocs.cn/wiki/l/0lcjdVRSH1S4Q0)