@cloudbase/weda-ui 3.5.2 → 3.6.0

package/dist/configs/components/wd-switch.js

@@ -1,5 +1,7 @@
 import { defineConfig, Tuple, Type } from '../type-utils';
 import { FORM_ITEM_DATA_TITLE, FORM_ITEM_METHODS, FORM_ITEM_META, ItemData, } from '../type-utils/type-form';
+import { getClasses } from '../type-utils/classes';
+import { templateInitNameWithId } from './common/init-name-with-id';
 // 属性分类
 const X_CATEGORY = {
     COMMON: '通用',
@@ -135,15 +137,81 @@ const data = Type.Object({
         'x-category': X_CATEGORY.VERIFY,
     }),
 });
-const properties = Type.Pick(ItemData, [
-    'name',
-    'value',
-    'label',
-    'required',
-    'visible',
-    'disabled',
-    'readOnly',
+const properties = Type.Composite([
+    Type.Pick(data, ['name', 'value', 'label', 'required']),
+    Type.Pick(ItemData, ['visible', 'disabled', 'readOnly']),
 ]);
+const CLASSES = getClasses('switch');
+const classes = [
+    CLASSES.root,
+    CLASSES.root_h5,
+    CLASSES.root_pc,
+    CLASSES.root_mp,
+    CLASSES.item_label,
+    CLASSES.item_control,
+    {
+        name: '编辑态-按钮选中样式',
+        selector: `${CLASSES.root.selector} .is-checked .wd-switch__box::before`,
+        description: '编辑态-按钮选中样式',
+        code: `
+      :scope .is-checked .wd-switch__box::before {
+        background-color: red;
+      }
+    `,
+    },
+    {
+        name: '编辑态-按钮未选中样式',
+        selector: `${CLASSES.root.selector} .wd-switch__box::before`,
+        description: '编辑态-按钮未选中样式',
+        code: `
+      :scope .wd-switch__box::before {
+        background-color: gray;
+      }
+    `,
+    },
+    CLASSES.item_error,
+    CLASSES.item_help,
+    {
+        name: '禁用态-按钮选中样式',
+        selector: `${CLASSES.root.selector} .is-disabled.is-checked .wd-switch__box::before`,
+        description: '禁用态-按钮选中样式',
+        code: `
+      :scope .is-disabled.is-checked .wd-switch__box::before {
+        background-color: red;
+      }
+    `,
+    },
+    {
+        name: '禁用态-按钮未选中样式',
+        selector: `${CLASSES.root.selector} .is-disabled .wd-switch__box::before`,
+        description: '禁用态-按钮未选中样式',
+        code: `
+      :scope .is-disabled .wd-switch__box::before {
+        background-color: gray;
+      }
+    `,
+    },
+    {
+        name: '只读态-按钮选中样式',
+        selector: `${CLASSES.root.selector} .is-readonly.is-checked .wd-switch__box::before`,
+        description: '只读态-按钮选中样式',
+        code: `
+      :scope .is-readonly.is-checked .wd-switch__box::before {
+        background-color: red;
+      }
+    `,
+    },
+    {
+        name: '只读态-按钮未选中样式',
+        selector: `${CLASSES.root.selector} .is-readonly .wd-switch__box::before`,
+        description: '只读态-按钮未选中样式',
+        code: `
+      :scope .is-readonly .wd-switch__box::before {
+        background-color: gray;
+      }
+    `,
+    },
+];
 // export default
 const config = defineConfig({
     $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
@@ -152,111 +220,11 @@ const config = defineConfig({
     // 只读属性定义
     properties,
     // 样式API
-    classes: [
-        {
-            name: '根元素',
-            selector: `.wd-switch-root`,
-            description: '组件最外层元素',
-        },
-        {
-            name: 'H5 端根元素',
-            selector: `.wd-h5-switch-root`,
-            description: '可设定 H5 端的根元素样式',
-        },
-        {
-            name: 'PC 端根元素',
-            selector: `.wd-pc-switch-root`,
-            description: '可设定 PC 端的根元素样式',
-        },
-        {
-            name: '小程序端根元素',
-            selector: `.wd-mp-switch-root`,
-            description: '可设定小程序端的根元素样式',
-        },
-        {
-            name: '无边框状态',
-            selector: `.wd-switch-root.is-borderless`,
-            description: '设置组件无边框状态样式',
-        },
-        {
-            name: '必填状态',
-            selector: `.wd-switch-root.is-required`,
-            description: '设置组件必填状态样式',
-        },
-        {
-            name: '标题',
-            selector: `.wd-switch__label`,
-            description: '组件标题元素',
-        },
-        {
-            name: '标题禁用状态',
-            selector: `.wd-switch__label.is-disabled`,
-            description: '设置组件标题禁用状态样式',
-        },
-        {
-            name: '标题不换行',
-            selector: `.wd-switch__label.is-nowrap`,
-            description: '设置组件标题不换行时状态样式',
-        },
-        {
-            name: '提示文字',
-            selector: `.wd-switch__help`,
-            description: '设置组件提示文字样式',
-        },
-        {
-            name: '校验信息',
-            selector: `.wd-switch__error`,
-            description: '设置组件校验信息样式',
-        },
-        {
-            name: '组件本身',
-            selector: '.wd-switch',
-            description: '组件本身元素',
-        },
-        {
-            name: '禁用状态',
-            selector: '.wd-switch.is-disabled',
-            description: '组件禁用状态',
-        },
-        {
-            name: '只读状态',
-            selector: '.wd-switch.is-disabled',
-            description: '组件只读状态',
-        },
-        {
-            name: '勾选状态',
-            selector: '.wd-switch.is-checked',
-            description: '勾选状态',
-        },
-        {
-            name: '小尺寸',
-            selector: '.wd-switch.size-sm',
-            description: '小尺寸样式（仅PC端有效）',
-        },
-        {
-            name: '默认尺寸',
-            selector: '.wd-switch.size-md',
-            description: '默认、中尺寸样式（仅PC端有效）',
-        },
-        {
-            name: '大尺寸',
-            selector: '.wd-switch.size-lg',
-            description: '大尺寸样式',
-        },
-        {
-            name: '开关背景',
-            selector: '.wd-switch__box',
-            description: '开关内部背景元素',
-        },
-        {
-            name: '开关按钮',
-            selector: '.wd-switch__box::before',
-            description: '开关内部按钮元素',
-        },
-    ],
+    classes,
     // 组件方法
     methods: [
         {
+            ...{},
             ...FORM_ITEM_METHODS.setValue,
             params: {
                 properties: {
@@ -293,7 +261,8 @@ const config = defineConfig({
         // 组件别名，用于生成组件 id，例如 Icon1
         componentName: 'Switch',
         description: '用于控制打开/关闭',
-        icon: '../../icons/Switch.svg',
+        figureIcon: '../figureIcons/WdSwitch.svg',
+        icon: '../icons/Switch.svg',
         categoryOrder: 500,
         componentOrder: 440,
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/WdSwitch',
@@ -301,6 +270,8 @@ const config = defineConfig({
         shortcut: FORM_ITEM_META.shortcut,
         group: FORM_ITEM_META.group,
         visible: FORM_ITEM_META.visible,
+        inlineStyleForm: FORM_ITEM_META.inlineStyleForm,
+        templates: [templateInitNameWithId],
     },
     compConfig: {
         componentType: 'formField',

package/dist/configs/components/wd-tabbar.d.ts

@@ -0,0 +1,220 @@
+import { Static } from '../type-utils';
+import type { Simplify } from 'type-fest';
+export declare const tabs: {
+    isMultiTerminal: boolean;
+    menuData: {
+        title: string;
+        key: string;
+        iconUrl: string;
+    }[];
+    mobileMenuData: any[];
+};
+export declare const Node: import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TObject<{
+    children: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>>;
+    title: import("@sinclair/typebox").TString;
+    key: import("@sinclair/typebox").TString;
+    iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    disabled: import("@sinclair/typebox").TBoolean;
+    visible: import("@sinclair/typebox").TBoolean;
+    type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+    path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+}>>;
+declare const data: import("@sinclair/typebox").TObject<{
+    tabs: import("@sinclair/typebox").TObject<{
+        isMultiTerminal: import("@sinclair/typebox").TBoolean;
+        menuData: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TObject<{
+            children: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>>;
+            title: import("@sinclair/typebox").TString;
+            key: import("@sinclair/typebox").TString;
+            iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            disabled: import("@sinclair/typebox").TBoolean;
+            visible: import("@sinclair/typebox").TBoolean;
+            type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+            path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+            subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        }>>>;
+        mobileMenuData: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TObject<{
+            children: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>>;
+            title: import("@sinclair/typebox").TString;
+            key: import("@sinclair/typebox").TString;
+            iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            disabled: import("@sinclair/typebox").TBoolean;
+            visible: import("@sinclair/typebox").TBoolean;
+            type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+            path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+            subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        }>>>;
+    }>;
+    routeType: import("@sinclair/typebox").TUnsafe<"navigateTo" | "redirectTo">;
+}>;
+declare const config: {
+    readonly $schema: "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json";
+    readonly data: import("@sinclair/typebox").TObject<{
+        tabs: import("@sinclair/typebox").TObject<{
+            isMultiTerminal: import("@sinclair/typebox").TBoolean;
+            menuData: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TObject<{
+                children: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>>;
+                title: import("@sinclair/typebox").TString;
+                key: import("@sinclair/typebox").TString;
+                iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                disabled: import("@sinclair/typebox").TBoolean;
+                visible: import("@sinclair/typebox").TBoolean;
+                type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+                path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            }>>>;
+            mobileMenuData: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TObject<{
+                children: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>>;
+                title: import("@sinclair/typebox").TString;
+                key: import("@sinclair/typebox").TString;
+                iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                disabled: import("@sinclair/typebox").TBoolean;
+                visible: import("@sinclair/typebox").TBoolean;
+                type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+                path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            }>>>;
+        }>;
+        routeType: import("@sinclair/typebox").TUnsafe<"navigateTo" | "redirectTo">;
+    }>;
+    readonly properties: import("@sinclair/typebox").TObject<{
+        tabs: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TObject<{
+            children: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>>;
+            title: import("@sinclair/typebox").TString;
+            key: import("@sinclair/typebox").TString;
+            iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            disabled: import("@sinclair/typebox").TBoolean;
+            visible: import("@sinclair/typebox").TBoolean;
+            type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+            path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+            subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        }>>>;
+        selectedTab: import("@sinclair/typebox").TObject<{
+            title: import("@sinclair/typebox").TString;
+            key: import("@sinclair/typebox").TString;
+            iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            disabled: import("@sinclair/typebox").TBoolean;
+            visible: import("@sinclair/typebox").TBoolean;
+            type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+            path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+            subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        }>;
+    }>;
+    readonly classes: readonly [{
+        readonly name: "根元素";
+        readonly selector: ".wd-tabbar";
+        readonly description: "组件根元素";
+    }, {
+        readonly name: "PC 端根元素";
+        readonly selector: ".wd-pc-tabbar";
+        readonly description: "可以为 PC 端的编写样式";
+    }, {
+        readonly name: "H5 端根元素";
+        readonly selector: ".wd-h5-tabbar";
+        readonly description: "可以为 H5 端的编写样式";
+    }, {
+        readonly name: "小程序 端根元素";
+        readonly selector: ".wd-mp-tabbar";
+        readonly description: "可以为 小程序 端的编写样式";
+    }, {
+        readonly name: "单个选项区域";
+        readonly selector: ".wd-tabbar__item";
+        readonly description: "可以为选项区设置样式";
+    }, {
+        readonly name: "选中选项区域";
+        readonly selector: ".wd-tabbar__item.is-selected";
+        readonly description: "可以为选中选项区域设置样式";
+    }, {
+        readonly name: "选项文本标签";
+        readonly selector: ".wd-tabbar__item-text";
+        readonly description: "可以为选项文本标签设置样式";
+    }];
+    readonly methods: readonly [{
+        readonly name: "setSelectTab";
+        readonly label: "设置选中标签";
+        readonly params: import("@sinclair/typebox").TObject<{
+            key: import("@sinclair/typebox").TString;
+            isNavigate: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        }>;
+        readonly description: "设置选中标签";
+    }];
+    readonly events: readonly [{
+        readonly name: "tap";
+        readonly title: "点击";
+    }, {
+        readonly name: "change";
+        readonly title: "选项卡切换";
+        readonly detail: import("@sinclair/typebox").TObject<{
+            tab: import("@sinclair/typebox").TObject<{
+                title: import("@sinclair/typebox").TString;
+                key: import("@sinclair/typebox").TString;
+                iconUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                iconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                selectedIconPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                disabled: import("@sinclair/typebox").TBoolean;
+                visible: import("@sinclair/typebox").TBoolean;
+                type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+                path: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                linkUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                linkTargetBlank: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                subPackageName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            }>;
+        }>;
+    }];
+    readonly meta: {
+        readonly name: "WdTabBar";
+        readonly componentName: "TabBar";
+        readonly title: "Tab栏";
+        readonly description: "用于实现基本的tab栏交互效果，可自定义Tab栏内容、样式及页面跳转";
+        readonly figureIcon: "../figureIcons/WdTabBar.svg";
+        readonly icon: "../icons/WdTabBar.svg";
+        readonly propertyPanelTips: "使用Tab栏导航布局可实现Tab固定到页面底部效果，[详见文档](https://cloud.tencent.com/document/product/1301/98679)";
+        readonly categoryOrder: 300;
+        readonly componentOrder: 150;
+        readonly category: "导航";
+        readonly visible: readonly ["APP"];
+        readonly inlineStyleForm: {
+            readonly justifyContent: {
+                readonly visible: false;
+            };
+            readonly flexDirection: {
+                readonly visible: false;
+            };
+            readonly alignItems: {
+                readonly visible: false;
+            };
+        };
+        readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/navmenu/WdTabBar";
+    };
+};
+export type DataType = Simplify<Static<typeof data>>;
+export default config;

package/dist/configs/components/wd-tabbar.js

@@ -0,0 +1,212 @@
+import { defineConfig, Type, Tuple } from '../type-utils';
+export const tabs = {
+    isMultiTerminal: false,
+    menuData: [
+        {
+            title: '标签1',
+            key: '1',
+            iconUrl: 'td:home',
+        },
+        {
+            title: '标签2',
+            iconUrl: 'td:app',
+            key: '2',
+        },
+        {
+            title: '标签3',
+            iconUrl: 'td:user',
+            key: '3',
+        },
+    ],
+    mobileMenuData: [],
+};
+const Tab = {
+    title: Type.String({ title: '名称' }),
+    key: Type.String({ title: 'key值' }),
+    iconUrl: Type.Optional(Type.String({ title: '图标' })),
+    iconPath: Type.Optional(Type.String({ title: '自定义未选中图标' })),
+    selectedIconPath: Type.Optional(Type.String({ title: '自定义选中图标' })),
+    disabled: Type.Boolean({ title: '禁用菜单' }),
+    visible: Type.Boolean({ title: '显示菜单' }),
+    type: Type.Optional(Type.StringEnum({
+        title: '链接类型',
+        enum: [
+            {
+                label: '外部链接',
+                value: 'link',
+            },
+            {
+                label: '内部链接',
+                value: 'route',
+            },
+        ],
+    })),
+    path: Type.Optional(Type.String({ title: '跳转内部链接' })),
+    linkUrl: Type.Optional(Type.String({ title: '跳转外部链接' })),
+    linkTargetBlank: Type.Optional(Type.Boolean({ title: '跳转开启新窗口' })),
+    subPackageName: Type.Optional(Type.String({ title: '子包名称' })),
+};
+export const Node = Type.Recursive((Node) => Type.Object({
+    ...Tab,
+    children: Type.Optional(Type.Array(Node)),
+}), {
+    $id: 'Node',
+});
+const data = Type.Object({
+    tabs: Type.Object({
+        isMultiTerminal: Type.Boolean({
+            title: '是否开启多端独立标签',
+            default: false,
+        }),
+        menuData: Type.Array(Node, {
+            title: 'PC 端标签',
+            default: [],
+        }),
+        mobileMenuData: Type.Array(Node, {
+            title: '移动端标签',
+            default: [],
+        }),
+    }, {
+        title: '标签列表',
+        description: '标签列表',
+        default: tabs,
+        'x-index': 10,
+        'x-component': 'menu-config',
+        'x-component-props': {
+            maxDepth: 1,
+            enableNavigateToSubPackage: true,
+            enableConfigSelectedIcon: true,
+            generateMenuConfig: {
+                flattenPageTree: true,
+                defaultItemPart: { iconUrl: 'td:app' },
+            },
+        },
+        'x-category': '基础属性',
+    }),
+    routeType: Type.StringEnum({
+        title: '路由方式',
+        description: '路由跳转方式，当启用路由时生效',
+        enum: Tuple([
+            {
+                label: '跳转(navigate)',
+                value: 'navigateTo',
+            },
+            {
+                label: '重定向(redirect)',
+                value: 'redirectTo',
+            },
+        ]),
+        default: 'redirectTo',
+        'x-index': 20,
+        'x-category': '基础属性',
+    }),
+});
+const properties = Type.Object({
+    tabs: Type.Array(Node, {
+        title: '标签列表',
+        default: [],
+    }),
+    selectedTab: Type.Object(Tab, {
+        description: '当前选中标签',
+    }),
+});
+const config = defineConfig({
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    data,
+    properties,
+    classes: [
+        {
+            name: '根元素',
+            selector: '.wd-tabbar',
+            description: '组件根元素',
+        },
+        {
+            name: 'PC 端根元素',
+            selector: '.wd-pc-tabbar',
+            description: '可以为 PC 端的编写样式',
+        },
+        {
+            name: 'H5 端根元素',
+            selector: '.wd-h5-tabbar',
+            description: '可以为 H5 端的编写样式',
+        },
+        {
+            name: '小程序 端根元素',
+            selector: '.wd-mp-tabbar',
+            description: '可以为 小程序 端的编写样式',
+        },
+        {
+            name: '单个选项区域',
+            selector: '.wd-tabbar__item',
+            description: '可以为选项区设置样式',
+        },
+        {
+            name: '选中选项区域',
+            selector: '.wd-tabbar__item.is-selected',
+            description: '可以为选中选项区域设置样式',
+        },
+        {
+            name: '选项文本标签',
+            selector: '.wd-tabbar__item-text',
+            description: '可以为选项文本标签设置样式',
+        },
+    ],
+    methods: [
+        {
+            name: 'setSelectTab',
+            label: '设置选中标签',
+            params: Type.Object({
+                key: Type.String({
+                    title: '选中标签的Key值',
+                    default: '',
+                }),
+                isNavigate: Type.Optional(Type.Boolean({
+                    title: '设置项为跳转类型时是否跳转',
+                    default: true,
+                })),
+            }),
+            description: '设置选中标签',
+        },
+    ],
+    events: [
+        {
+            name: 'tap',
+            title: '点击',
+        },
+        {
+            name: 'change',
+            title: '选项卡切换',
+            detail: Type.Object({
+                tab: Type.Object(Tab, {
+                    description: '当前选中标签',
+                }),
+            }),
+        },
+    ],
+    meta: {
+        name: 'WdTabBar',
+        componentName: 'TabBar',
+        title: 'Tab栏',
+        description: '用于实现基本的tab栏交互效果，可自定义Tab栏内容、样式及页面跳转',
+        figureIcon: '../figureIcons/WdTabBar.svg',
+        icon: '../icons/WdTabBar.svg',
+        propertyPanelTips: '使用Tab栏导航布局可实现Tab固定到页面底部效果，[详见文档](https://cloud.tencent.com/document/product/1301/98679)',
+        categoryOrder: 300,
+        componentOrder: 150,
+        category: '导航',
+        visible: ['APP'],
+        inlineStyleForm: {
+            justifyContent: {
+                visible: false,
+            },
+            flexDirection: {
+                visible: false,
+            },
+            alignItems: {
+                visible: false,
+            },
+        },
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/navmenu/WdTabBar',
+    },
+});
+export default config;