@pisell/materials 6.7.4 → 6.8.2

package/lowcode/pisell-tabbar/meta.ts

@@ -0,0 +1,55 @@
+import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+/**
+ * PisellSuperTabs 组件元数据
+ * @description 通用导航框架封装的全能型 Tab 组件
+ */
+const PisellSuperTabsMeta: IPublicTypeComponentMetadata = {
+  componentName: 'PisellTabbar',
+  title: 'PisellTabbar',
+  category: '导航',
+  group: 'Pro 组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'PisellTabbar',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    component: {
+      isContainer: false,
+    },
+    props: [],
+    supports: {
+      className: true,
+      style: true,
+    },
+  },
+};
+
+/**
+ * Snippets
+ */
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: 'PisellTabbar',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellTabbar',
+      props: {
+
+      },
+    },
+  },
+];
+
+export default {
+  ...PisellSuperTabsMeta,
+  snippets,
+};
+

package/lowcode/tab-card/README.md

@@ -0,0 +1,225 @@
+# TabCard LowCode Meta 配置
+
+TabCard 组件的低代码元数据配置。
+
+## 文件说明
+
+- `meta.ts` - 组件元数据配置，包含 Props 定义、Setter 配置等
+- `snippets.ts` - 组件物料片段，定义了多种预设的组件模板
+
+## 配置概览
+
+### 组件信息
+
+- **组件名称**: `PisellCards.TabCard`
+- **组件标题**: 标签卡片
+- **分类**: 基础组件
+- **包名**: `@pisell/materials`
+- **导出方式**: `PisellCards.TabCard`（命名空间导出）
+
+### Props 配置分组
+
+#### 1. 基础配置
+- `tabKey` - 标签标识（必填）
+  - 类型：string | number
+  - Setter: StringSetter, NumberSetter, VariableSetter
+  
+- `label` - 标签文本（必填）
+  - 类型：string | ReactNode
+  - Setter: PisellI18nSetter, StringSetter, SlotSetter
+  
+- `icon` - 图标
+  - 类型：ReactNode
+  - Setter: SlotSetter（默认值：Icon 组件）
+  
+- `direction` - 布局方向
+  - 类型：'horizontal' | 'vertical'
+  - Setter: RadioGroupSetter（水平/垂直）
+  - 默认值：'horizontal'
+  
+- `size` - 尺寸
+  - 类型：'small' | 'medium' | 'large'
+  - Setter: RadioGroupSetter（小/中/大）
+  - 默认值：'medium'
+  
+- `className` - 样式类名
+  - 类型：string
+  - Setter: StringSetter
+
+#### 2. 徽章配置
+- `badge` - 徽章配置对象
+  - `badge.count` - 徽章数字或文本
+  - `badge.dot` - 是否显示小红点
+  - `badge.color` - 徽章颜色
+  - `badge.offset` - 徽章偏移位置 [x, y]
+
+#### 3. 状态配置
+- `active` - 激活状态
+  - `active.value` - 是否激活
+  - `active.className` - 激活状态类名
+  - `active.style` - 激活状态样式
+  - `active.extra` - 激活状态额外内容
+  
+- `disabled` - 禁用状态
+  - `disabled.value` - 是否禁用
+  - `disabled.className` - 禁用状态类名
+  - `disabled.style` - 禁用状态样式
+  - `disabled.extra` - 禁用状态额外内容
+  
+- `loading` - 加载状态
+  - `loading.value` - 是否加载中
+  - `loading.className` - 加载状态类名
+  - `loading.style` - 加载状态样式
+  - `loading.extra` - 加载状态额外内容
+
+#### 4. 高级配置
+- `render` - 自定义渲染函数
+  - 类型：Function
+  - Setter: FunctionSetter
+  
+- `children` - 子内容
+  - 类型：ReactNode
+  - Setter: SlotSetter
+
+### 事件配置
+
+- `onClick` - 点击事件
+  - 参数：`(tabKey, event) => void`
+  - 模板：
+    ```javascript
+    onClick(tabKey, event) {
+      console.log('onClick', tabKey, event);
+    }
+    ```
+
+### 物料片段
+
+提供了 4 个预设的组件模板：
+
+1. **基础 TabCard** - 最简单的标签卡片
+2. **带图标的 TabCard** - 包含图标的标签
+3. **带徽章的 TabCard** - 包含消息数量徽章
+4. **垂直布局 TabCard** - 图标在上、文本在下的垂直布局
+
+## 使用方式
+
+在低代码编辑器中：
+
+1. 从组件面板拖拽 "标签卡片" 到画布
+2. 在属性面板配置组件属性
+3. 设置点击事件处理逻辑
+4. 配置状态绑定（active、disabled、loading）
+
+## 示例配置
+
+### 基础示例
+
+```json
+{
+  "componentName": "PisellCards.TabCard",
+  "props": {
+    "tabKey": "home",
+    "label": "首页"
+  }
+}
+```
+
+### 完整示例
+
+```json
+{
+  "componentName": "PisellCards.TabCard",
+  "props": {
+    "tabKey": "messages",
+    "label": "消息",
+    "icon": {
+      "type": "JSSlot",
+      "value": [{
+        "componentName": "Icon",
+        "props": {
+          "type": "MessageOutlined",
+          "size": 16
+        }
+      }]
+    },
+    "badge": {
+      "count": 5,
+      "color": "red"
+    },
+    "active": {
+      "value": "{{state.activeTab === 'messages'}}"
+    },
+    "onClick": {
+      "type": "JSFunction",
+      "value": "function(tabKey, event) { this.setState({ activeTab: tabKey }); }"
+    }
+  }
+}
+```
+
+## 注意事项
+
+1. **tabKey 必填**：每个 TabCard 必须有唯一的 tabKey
+2. **label 必填**：标签必须有显示文本
+3. **状态配置**：active、disabled、loading 是对象类型，需要配置 value 字段
+4. **图标配置**：使用 SlotSetter，可以插入 Icon 组件或其他 ReactNode
+5. **事件处理**：onClick 事件会传递 tabKey 和 event 两个参数
+
+## 开发建议
+
+### 状态绑定
+
+使用状态绑定实现标签切换：
+
+```javascript
+// 在页面 state 中定义 activeTab
+state = {
+  activeTab: 'home'
+}
+
+// TabCard 配置
+{
+  "active": {
+    "value": "{{state.activeTab === 'home'}}"
+  },
+  "onClick": {
+    "type": "JSFunction",
+    "value": "function(tabKey) { this.setState({ activeTab: tabKey }); }"
+  }
+}
+```
+
+### 动态徽章
+
+使用变量绑定动态更新徽章数字：
+
+```javascript
+{
+  "badge": {
+    "count": "{{state.unreadCount}}"
+  }
+}
+```
+
+### 禁用条件
+
+根据条件禁用标签：
+
+```javascript
+{
+  "disabled": {
+    "value": "{{!state.hasPermission}}",
+    "extra": "无权限"
+  }
+}
+```
+
+## 相关文档
+
+- [TabCard 使用文档](../../src/components/PisellCards/docs/PisellCards.md)
+- [TabCard 设计文档](../../src/components/PisellCards/docs/PisellCards.$tab-design.md)
+- [TabCard 开发文档](../../src/components/PisellCards/docs/PisellCards.$tab-dev.md)
+- [LowCode Engine Setter 文档](https://lowcode-engine.cn/site/docs/guide/appendix/setters)
+
+
+