### Install Dependencies and Login
Source: https://github.com/tencentcloudbase/weda-custom-components/blob/main/README.md
Installs project dependencies, the CloudBase CLI globally, and logs in to your Tencent Cloud account. Ensure you have Node.js installed.
```bash
npm install
npm install -g @cloudbase/cli
tcb login
```
--------------------------------
### Invoke Custom Action with Parameters
Source: https://context7.com/tencentcloudbase/weda-custom-components/llms.txt
Example of passing parameters to the showToast action within the platform configuration.
```json
// 使用示例（在微搭低代码平台配置）
// 调用 showToast 动作时传入参数：
{
"title": "保存成功",
"icon": "success",
"duration": 2000
}
```
--------------------------------
### Debug Local Components
Source: https://github.com/tencentcloudbase/weda-custom-components/blob/main/README.md
Starts a local debugging server to test custom components within the Weda editor. This command allows for rapid iteration during development.
```bash
tcb lowcode debug
```
--------------------------------
### Gantt Chart Component Example
Source: https://context7.com/tencentcloudbase/weda-custom-components/llms.txt
Demonstrates how to use the Gantt component for project management and task scheduling visualization. Supports task dragging and progress updates. Requires React.
```jsx
import React from 'react';
import { Gantt } from './web/components';
// 完整甘特图示例
const GanttExample = () => {
// 任务数据定义
const tasks = [
{
start: '2023-04-01',
end: '2023-04-15',
name: '项目',
id: 'ProjectSample',
progress: 25,
type: 'project', // 项目类型
hideChildren: false,
displayOrder: 1,
},
{
start: '2023-04-01',
end: '2023-04-02',
name: '计划',
id: 'Task 0',
progress: 45,
type: 'task', // 任务类型
project: 'ProjectSample', // 所属项目
displayOrder: 2,
},
{
start: '2023-04-02',
end: '2023-04-04',
name: '调研',
id: 'Task 1',
progress: 25,
dependencies: ['Task 0'], // 依赖关系
type: 'task',
project: 'ProjectSample',
displayOrder: 3,
},
{
start: '2023-04-04',
end: '2023-04-08',
name: '研发',
id: 'Task 3',
progress: 2,
dependencies: ['Task 1'],
type: 'task',
project: 'ProjectSample',
displayOrder: 4,
},
{
start: '2023-04-15',
end: '2023-04-15',
name: '发布',
id: 'Task 6',
progress: 25,
type: 'milestone', // 里程碑类型
dependencies: ['Task 3'],
project: 'ProjectSample',
displayOrder: 5,
},
{
start: '2023-04-18',
end: '2023-04-19',
name: '团建',
id: 'Task 9',
progress: 0,
isDisabled: true, // 禁用任务（不可拖拽）
type: 'task',
},
];
// 样式配置
const stylingOption = {
listCellWidth: '155px', // 任务列表单元格宽度
columnWidth: '65', // 列宽
};
// 显示配置
const displayOption = {
viewMode: 'Day', // 视图模式：'Day' | 'Week' | 'Month'
locale: 'zh', // 语言：中文
};
// 事件处理器
const events = {
onClick: ({ task }) => {
console.log('任务点击:', task);
},
onSelect: ({ task, isSelected }) => {
console.log('任务选择:', task, isSelected);
},
onDoubleClick: ({ task }) => {
console.log('任务双击:', task);
},
onDelete: ({ task, callback }) => {
console.log('任务删除:', task);
// 调用 callback 确认删除
callback();
},
onDateChange: ({ task, children }) => {
console.log('日期变更:', task, children);
},
onProgressChange: ({ task, children }) => {
console.log('进度变更:', task, children);
},
onExpanderClick: ({ task }) => {
console.log('展开/收起:', task);
},
};
return (
);
};
export default GanttExample;
```
--------------------------------
### Configure ECharts Chart Options
Source: https://context7.com/tencentcloudbase/weda-custom-components/llms.txt
Example configurations for line and pie charts to be passed to the ECharts component.
```javascript
// 配置示例：折线图
const lineChartOption = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
smooth: true
}]
};
// 配置示例：饼状图
const pieChartOption = {
series: [{
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
]
}]
};
```
--------------------------------
### Create a New Component
Source: https://github.com/tencentcloudbase/weda-custom-components/blob/main/README.md
Generates the initial configuration and file structure for a new custom component. You will be prompted to enter the component name.
```bash
npm run new
```
--------------------------------
### Register Components and Actions
Source: https://context7.com/tencentcloudbase/weda-custom-components/llms.txt
Centralized registration file for components and actions.
```javascript
// 组件注册入口 - src/configs/index.js
import Button from './components/button';
import Gantt from './components/gantt.json';
import Chart from './components/echart.json';
import Slider from './components/slider.json';
import showToast from './actions/showToast';
export const components = {
Button,
Gantt,
Chart,
Slider,
};
export const actions = {
showToast,
};
export default { components, actions };
```
--------------------------------
### 运行组件测试
Source: https://github.com/tencentcloudbase/weda-custom-components/blob/main/src/stories/Introduction.stories.mdx
执行项目配置的测试脚本以验证组件功能。
```bash
npm test
```
--------------------------------
### Run Storybook for Gantt Chart
Source: https://github.com/tencentcloudbase/weda-custom-components/blob/main/src/web/components/gantt/README.md
Execute this command to view the component storybook locally.
```bash
npm run storybook
```
--------------------------------
### 调试与发布组件
Source: https://github.com/tencentcloudbase/weda-custom-components/blob/main/src/stories/Introduction.stories.mdx
使用云开发命令行工具进行组件的本地调试与线上发布。
```bash
tcb lowcode debug
```
```bash
tcb lowcode publish
```
--------------------------------
### Implement Custom showToast Action
Source: https://context7.com/tencentcloudbase/weda-custom-components/llms.txt
Cross-platform action implementation for displaying toast notifications.
```javascript
// 小程序端实现 - src/mp/actions/showToast/index.js
export default function showToast({ data }) {
wx.showToast(data);
}
// Web 端实现 - src/web/actions/showToast/index.js
export default function showToast({ data }) {
alert(data?.title); // 可替换为自定义 Toast 组件
}
```
--------------------------------
### Scaffold New Component
Source: https://context7.com/tencentcloudbase/weda-custom-components/llms.txt
Command to generate the boilerplate structure for a new component.
```bash
# 创建新组件
npm run new
# 输入组件名称（如：Image）
# 自动生成以下文件结构：
# src/
# configs/
# components/
# image.json # 组件配置文件
# index.js # 自动更新组件注册
# web/
# components/
# image/
# index.jsx # Web 端组件实现
```
--------------------------------
### Define Action Configuration Schema
Source: https://context7.com/tencentcloudbase/weda-custom-components/llms.txt
JSON Schema definition for the showToast action parameters and metadata.
```json
// Action 配置文件 - src/configs/actions/showToast.json
{
"data": {
"type": "object",
"properties": {
"title": {
"title": "标题",
"type": "string",
"default": "提示的内容"
},
"icon": {
"title": "图标",
"type": "string",
"default": "success",
"enum": [
{ "label": "success", "value": "success" },
{ "label": "loading", "value": "loading" },
{ "label": "none", "value": "none" }
]
},
"duration": {
"title": "提示的延迟时间",
"type": "number",
"default": 1500
}
}
},
"meta": {
"title": "自定义提示",
"description": "自定义提示"
}
}
```
--------------------------------
### 初始化与发布自定义组件
Source: https://context7.com/tencentcloudbase/weda-custom-components/llms.txt
使用 tcb-cli 工具进行项目依赖安装、登录、本地调试及组件发布。
```bash
# 克隆项目并安装依赖
git clone
cd weda_custom_components
npm install
# 安装腾讯云 CLI 工具并登录
npm install -g @cloudbase/cli
tcb login
# 启动本地调试（连接微搭编辑器）
tcb lowcode debug
# 发布组件到微搭平台
tcb lowcode publish
# 本地 Storybook 开发调试
npm run storybook
```
--------------------------------
### 实现 Web 端 Button 组件
Source: https://context7.com/tencentcloudbase/weda-custom-components/llms.txt
基于 React 实现的 Web 端按钮组件，支持多种类型、尺寸及事件处理配置。
```jsx
// Web 端使用示例 - src/web/components/button/index.jsx
import * as React from 'react';
import { Button } from './web/components';
// 基础用法 - 主要按钮