@gx-design-vue/pro-layout-components 0.1.0-alpha.0

package/dist/RightContent/props.d.ts

@@ -0,0 +1,64 @@
+import { ShortcutKeyProps } from "../PageLock/props.js";
+import { ExtractPropTypes, PropType } from "vue";
+import { CustomRender, WithFalse } from "@gx-design-vue/pro-utils";
+import { DropdownProps } from "ant-design-vue";
+import * as _gx_design_vue_pro_layout2 from "@gx-design-vue/pro-layout";
+
+//#region src/RightContent/props.d.ts
+type DropdownProps$1 = Omit<DropdownProps, 'placement' | 'overlay'>;
+interface RightContentActions {
+  lock?: boolean;
+  theme?: boolean;
+  search?: boolean;
+  themeEditor?: boolean;
+  fullScreen?: boolean;
+}
+declare function getRightContentProps(): {
+  actions: {
+    type: PropType<RightContentActions | false>;
+    default: () => {};
+  };
+  shortsKey: {
+    type: PropType<ShortcutKeyProps["search"]>;
+    default: () => ShortcutKeyProps["search"];
+  };
+  name: {
+    type: PropType<string>;
+    default: any;
+  };
+  avatar: PropType<string>;
+  actionsRender: {
+    type: PropType<WithFalse<(classNames: string[]) => CustomRender>>;
+    default: any;
+  };
+  dropdownProps: {
+    type: PropType<DropdownProps$1>;
+    default: () => {};
+  };
+  dropdownRender: {
+    type: PropType<WithFalse<CustomRender>>;
+    default: any;
+  };
+  dropdownMenuRender: {
+    type: PropType<WithFalse<CustomRender>>;
+    default: any;
+  };
+  dropdownMenuExtraItemRender: {
+    type: PropType<WithFalse<CustomRender>>;
+    default: any;
+  };
+  onLogout: PropType<(callback?: () => void) => void>;
+  onClick: PropType<(type: keyof RightContentActions) => void>;
+  dataSource: {
+    type: PropType<_gx_design_vue_pro_layout2.AppRouteModule[]>;
+    default: () => any[];
+  };
+  historyKey: PropType<string>;
+  emptyProps: {
+    type: PropType<any>;
+    default: () => {};
+  };
+};
+type RightContentProps = Partial<ExtractPropTypes<ReturnType<typeof getRightContentProps>>>;
+//#endregion
+export { RightContentActions, RightContentProps, getRightContentProps };

package/dist/RightContent/props.js

@@ -0,0 +1,63 @@
+import { commonProps } from "./Search/props.js";
+
+//#region src/RightContent/props.ts
+function getRightContentProps() {
+	return {
+		...commonProps,
+		actions: {
+			type: Object,
+			default: () => ({})
+		},
+		shortsKey: {
+			type: Object,
+			default: () => ({ disabled: false })
+		},
+		name: {
+			type: [String],
+			default: void 0
+		},
+		avatar: String,
+		actionsRender: {
+			type: [
+				Array,
+				Function,
+				Object
+			],
+			default: void 0
+		},
+		dropdownProps: {
+			type: [Object],
+			default: () => ({})
+		},
+		dropdownRender: {
+			type: [
+				Array,
+				Function,
+				Object
+			],
+			default: void 0
+		},
+		dropdownMenuRender: {
+			type: [
+				Array,
+				Function,
+				Object
+			],
+			default: void 0
+		},
+		dropdownMenuExtraItemRender: {
+			type: [
+				Array,
+				Function,
+				Object,
+				Boolean
+			],
+			default: void 0
+		},
+		onLogout: Function,
+		onClick: Function
+	};
+}
+
+//#endregion
+export { getRightContentProps };

package/dist/RightContent/style.d.ts

@@ -0,0 +1,10 @@
+import * as vue244 from "vue";
+import * as ant_design_vue_es__util_type22 from "ant-design-vue/es/_util/type";
+
+//#region src/RightContent/style.d.ts
+declare function useStyle(componentCls: string): {
+  wrapSSR: (node: ant_design_vue_es__util_type22.VueNode) => ant_design_vue_es__util_type22.VueNode;
+  hashId: vue244.ComputedRef<string>;
+};
+//#endregion
+export { useStyle };

package/dist/RightContent/style.js

@@ -0,0 +1,73 @@
+import { setAlpha, unit, useStyle as useStyle$1 } from "@gx-design-vue/pro-provider";
+
+//#region src/RightContent/style.ts
+const genStyle = (token) => {
+	return { [`${token.componentCls}`]: { "&-header-actions": {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end",
+		height: "100%",
+		gap: token.paddingXS,
+		"&-item": {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			paddingBlock: 0,
+			paddingInline: 2,
+			color: token.layout?.header?.colorTextRightActionsItem,
+			fontSize: 14,
+			cursor: "pointer",
+			borderRadius: token.borderRadius,
+			[`.anticon`]: {
+				color: token.layout?.header?.colorTextRightActionsItem,
+				transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
+				"&:hover": { color: token.layout?.header?.colorTextRightActionsItemHover }
+			},
+			[`&${token.componentCls}-header-actions-theme`]: { [`${token.componentCls}-header-actions-icon`]: {
+				paddingInline: 4,
+				paddingBlock: 4,
+				fontSize: 18
+			} },
+			"> *": {
+				paddingInline: 6,
+				paddingBlock: 6,
+				borderRadius: token.borderRadius,
+				transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
+				"&:hover": {
+					color: token.layout?.header?.colorTextRightActionsItemHover,
+					backgroundColor: token.layout?.header?.colorBgRightActionsItemHover
+				}
+			}
+		},
+		[`&>${token.antCls}-dropdown-trigger`]: {
+			color: token.colorTextTertiary,
+			paddingInline: 8,
+			paddingBlock: 8,
+			cursor: "pointer",
+			display: "flex",
+			alignItems: "center",
+			height: 44,
+			lineHeight: unit(44),
+			borderRadius: token.borderRadius,
+			"&:hover": { backgroundColor: setAlpha(token.colorTextBase, .03) }
+		},
+		"&-avatar": {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: token.paddingXS,
+			paddingInlineStart: token.padding,
+			paddingInlineEnd: token.padding,
+			cursor: "pointer",
+			color: token.layout?.header?.colorTextRightActionsItem
+		}
+	} } };
+};
+function useStyle(componentCls) {
+	return useStyle$1("RightContent", (token) => {
+		return [genStyle(token)];
+	}, componentCls);
+}
+
+//#endregion
+export { useStyle };

package/dist/ThemeEditor/components/BlockCheckbox.d.ts

@@ -0,0 +1,39 @@
+import * as vue48 from "vue";
+import { PropType } from "vue";
+import { CustomRender } from "@gx-design-vue/pro-utils";
+import * as vue_jsx_runtime2 from "vue/jsx-runtime";
+
+//#region src/ThemeEditor/components/BlockCheckbox.d.ts
+declare const _default: vue48.DefineComponent<vue48.ExtractPropTypes<{
+  value: PropType<string>;
+  list: {
+    type: PropType<{
+      title: string;
+      key: string;
+      icon?: CustomRender;
+    }[]>;
+    default: () => any[];
+  };
+  configType: PropType<"menuTheme" | "layout">;
+  onChange: PropType<(value: any, event: MouseEvent) => void>;
+}>, () => vue_jsx_runtime2.JSX.Element, {}, {}, {}, vue48.ComponentOptionsMixin, vue48.ComponentOptionsMixin, {}, string, vue48.PublicProps, Readonly<vue48.ExtractPropTypes<{
+  value: PropType<string>;
+  list: {
+    type: PropType<{
+      title: string;
+      key: string;
+      icon?: CustomRender;
+    }[]>;
+    default: () => any[];
+  };
+  configType: PropType<"menuTheme" | "layout">;
+  onChange: PropType<(value: any, event: MouseEvent) => void>;
+}>> & Readonly<{}>, {
+  list: {
+    title: string;
+    key: string;
+    icon?: CustomRender;
+  }[];
+}, {}, {}, {}, string, vue48.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/ThemeEditor/components/BlockCheckbox.js

@@ -0,0 +1,42 @@
+import { useThemeEditorContext } from "../context.js";
+import { createVNode, defineComponent } from "vue";
+import { classNames } from "@gx-design-vue/pro-utils";
+import { Tooltip } from "ant-design-vue";
+import { CheckOutlined } from "@ant-design/icons-vue";
+
+//#region src/ThemeEditor/components/BlockCheckbox.tsx
+var BlockCheckbox_default = /* @__PURE__ */ defineComponent({
+	name: "BlockCheckbox",
+	props: {
+		value: String,
+		list: {
+			type: Array,
+			default: () => []
+		},
+		configType: String,
+		onChange: Function
+	},
+	setup(props) {
+		const { hashId, prefixCls } = useThemeEditorContext();
+		return () => {
+			const baseClassName = `${prefixCls}-block-checkbox`;
+			return createVNode("div", { "class": [baseClassName, hashId.value] }, [props.list.map((item) => createVNode(Tooltip, {
+				"title": item.title,
+				"key": item.key
+			}, { default: () => [createVNode("div", {
+				"class": classNames(hashId.value, `${baseClassName}-item`, `${baseClassName}-item-${item.key}`, `${baseClassName}-${props.configType}-item`),
+				"onClick": (e) => props.onChange?.(item.key, e)
+			}, [
+				item.key === "wide" && createVNode("div", { "class": [`${baseClassName}-item-${item.key}-content`, hashId.value] }, null),
+				createVNode(CheckOutlined, {
+					"class": `${baseClassName}-selectIcon ${hashId.value}`.trim(),
+					"style": { display: props.value === item.key ? "block" : "none" }
+				}, null),
+				item?.icon ? createVNode("div", { "class": `${baseClassName}-icon ${hashId.value}`.trim() }, [item.icon]) : null
+			])] }))]);
+		};
+	}
+});
+
+//#endregion
+export { BlockCheckbox_default as default };

package/dist/ThemeEditor/components/RegionalChange.d.ts

@@ -0,0 +1,21 @@
+import { SettingsState } from "../utils/config.js";
+import * as vue166 from "vue";
+import { PropType } from "vue";
+import * as vue_jsx_runtime4 from "vue/jsx-runtime";
+
+//#region src/ThemeEditor/components/RegionalChange.d.ts
+declare const _default: vue166.DefineComponent<vue166.ExtractPropTypes<{
+  label: PropType<string>;
+  value: PropType<boolean>;
+  valueKey: PropType<keyof SettingsState>;
+  disabled: PropType<boolean>;
+  onChange: PropType<(key: keyof SettingsState, value: boolean) => void>;
+}>, () => vue_jsx_runtime4.JSX.Element, {}, {}, {}, vue166.ComponentOptionsMixin, vue166.ComponentOptionsMixin, {}, string, vue166.PublicProps, Readonly<vue166.ExtractPropTypes<{
+  label: PropType<string>;
+  value: PropType<boolean>;
+  valueKey: PropType<keyof SettingsState>;
+  disabled: PropType<boolean>;
+  onChange: PropType<(key: keyof SettingsState, value: boolean) => void>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue166.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/ThemeEditor/components/RegionalChange.js

@@ -0,0 +1,43 @@
+import { useThemeEditorContext } from "../context.js";
+import { createVNode, defineComponent } from "vue";
+import { List, Switch, Tooltip } from "ant-design-vue";
+
+//#region src/ThemeEditor/components/RegionalChange.tsx
+var RegionalChange_default = /* @__PURE__ */ defineComponent({
+	name: "RegionalChange",
+	props: {
+		label: String,
+		value: Boolean,
+		valueKey: String,
+		disabled: Boolean,
+		onChange: Function
+	},
+	setup(props) {
+		const { hashId, prefixCls } = useThemeEditorContext();
+		return () => {
+			return createVNode(List, {
+				"class": `${prefixCls}-list ${hashId.value}`.trim(),
+				"split": false,
+				"size": "small",
+				"renderItem": ({ item }) => createVNode(Tooltip, {
+					"title": item.disabled ? item.disabledReason : "",
+					"placement": "left"
+				}, { default: () => [createVNode(List.Item, { "actions": [item.action] }, { default: () => [createVNode("span", { "style": { opacity: item.disabled ? .5 : 1 } }, [item.title])] })] }),
+				"dataSource": [{
+					title: props.label,
+					action: createVNode(Switch, {
+						"size": "small",
+						"disabled": props.disabled,
+						"checked": !!props.value,
+						"onChange": (checked) => {
+							props.onChange && props.onChange(props.valueKey, checked);
+						}
+					}, null)
+				}]
+			}, null);
+		};
+	}
+});
+
+//#endregion
+export { RegionalChange_default as default };

package/dist/ThemeEditor/components/Setting/index.d.ts

@@ -0,0 +1,52 @@
+import { LayoutConfig } from "../../props.js";
+import * as vue278 from "vue";
+import { PropType } from "vue";
+import { ThemeValue } from "@gx-design-vue/context";
+import * as vue_jsx_runtime13 from "vue/jsx-runtime";
+
+//#region src/ThemeEditor/components/Setting/index.d.ts
+declare const _default: vue278.DefineComponent<vue278.ExtractPropTypes<{
+  theme: PropType<ThemeValue>;
+  onChange: PropType<(value: Partial<LayoutConfig>) => void>;
+  onChangeColorScheme: PropType<(value: ThemeValue) => void>;
+  copyButton: {
+    type: PropType<boolean>;
+    default: boolean;
+  };
+  width: PropType<number>;
+  isEqual: PropType<boolean>;
+  open: {
+    type: PropType<boolean>;
+    default: any;
+  };
+  onSync: PropType<() => void>;
+  onOpenChange: {
+    type: PropType<(val: boolean | undefined) => void>;
+    default: any;
+  };
+}>, () => vue_jsx_runtime13.JSX.Element, {}, {}, {}, vue278.ComponentOptionsMixin, vue278.ComponentOptionsMixin, {}, string, vue278.PublicProps, Readonly<vue278.ExtractPropTypes<{
+  theme: PropType<ThemeValue>;
+  onChange: PropType<(value: Partial<LayoutConfig>) => void>;
+  onChangeColorScheme: PropType<(value: ThemeValue) => void>;
+  copyButton: {
+    type: PropType<boolean>;
+    default: boolean;
+  };
+  width: PropType<number>;
+  isEqual: PropType<boolean>;
+  open: {
+    type: PropType<boolean>;
+    default: any;
+  };
+  onSync: PropType<() => void>;
+  onOpenChange: {
+    type: PropType<(val: boolean | undefined) => void>;
+    default: any;
+  };
+}>> & Readonly<{}>, {
+  open: boolean;
+  onOpenChange: (val: boolean | undefined) => void;
+  copyButton: boolean;
+}, {}, {}, {}, string, vue278.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/ThemeEditor/components/Setting/index.js

@@ -0,0 +1,125 @@
+import Icon_default from "../../../Icon/index.js";
+import { layout, layoutLabelRadioList, othersLabelRadioList, systemTheme } from "../../utils/config.js";
+import { useThemeEditorContext } from "../../context.js";
+import props_default, { commonProps } from "../../props.js";
+import { handleSettingsDisabled } from "../../utils/index.js";
+import BlockCheckbox_default from "../BlockCheckbox.js";
+import RegionalChange_default from "../RegionalChange.js";
+import { Body } from "../../index.js";
+import { computed, createTextVNode, createVNode, defineComponent, watch } from "vue";
+import { classNames } from "@gx-design-vue/pro-utils";
+import { Badge, Button, Divider, Drawer, Segmented, Tooltip, message } from "ant-design-vue";
+import { ClearOutlined, CopyOutlined } from "@ant-design/icons-vue";
+import { useClipboard } from "@vueuse/core";
+import { pick } from "es-toolkit";
+import { GScrollbars } from "@gx-design-vue/scrollbar";
+
+//#region src/ThemeEditor/components/Setting/index.tsx
+var Setting_default = /* @__PURE__ */ defineComponent({
+	props: {
+		...commonProps,
+		...pick(props_default, ["copyButton"]),
+		theme: [Boolean, String],
+		onChange: Function,
+		onChangeColorScheme: Function
+	},
+	setup(props) {
+		const { hashId, drawerClass, prefixCls, config } = useThemeEditorContext();
+		const { copy, copied, isSupported } = useClipboard();
+		const disabled = computed(() => {
+			return handleSettingsDisabled(config.value);
+		});
+		watch(copied, (val) => {
+			if (val) message.success("拷贝成功，请到 /src/store/modules/layout.ts 文件中替换 layoutConfig 默认配置");
+		});
+		const handleCopySettings = () => {
+			if (isSupported.value) copy(JSON.stringify(config.value));
+		};
+		return () => {
+			return createVNode(Drawer, {
+				"width": props.width,
+				"closable": false,
+				"placement": "right",
+				"open": props.open,
+				"bodyStyle": {
+					padding: 0,
+					overflow: "hidden"
+				},
+				"maskStyle": { background: "transparent" },
+				"onClose": () => props.onOpenChange?.(false)
+			}, { default: () => [createVNode("div", { "class": classNames([`${drawerClass}-wrapper`, hashId.value]) }, [createVNode(GScrollbars, null, { default: () => [createVNode("div", { "class": classNames([`${drawerClass}-content`, hashId.value]) }, [createVNode("div", { "class": classNames([`${prefixCls}-card`, hashId.value]) }, [createVNode("div", { "class": classNames(`${prefixCls}-card-header`, hashId.value) }, [createVNode("div", { "class": classNames(`${prefixCls}-card-header-title`, hashId.value) }, [createVNode("span", null, [createTextVNode("系统配置")]), createVNode(Tooltip, {
+				"title": !props.isEqual && "数据有变化，点击可进行重置",
+				"placement": "left"
+			}, { default: () => [createVNode(Badge, { "dot": !props.isEqual }, { default: () => [createVNode("div", {
+				"class": classNames(`${prefixCls}-card-header-action`, hashId.value),
+				"onClick": () => !props.isEqual && props.onSync?.()
+			}, [createVNode(Icon_default, { "type": "reload" }, null)])] })] })]), createVNode("div", { "class": classNames(`${prefixCls}-card-header-subtitle`, hashId.value) }, [config.value.title])]), createVNode("div", { "class": classNames(`${prefixCls}-card-content`, hashId.value) }, [
+				createVNode(Body, {
+					"prefixCls": `${prefixCls}`,
+					"hashId": hashId.value,
+					"title": "整体风格"
+				}, { default: () => [createVNode(Segmented, {
+					"value": props.theme,
+					"options": systemTheme,
+					"onChange": (value) => props.onChangeColorScheme?.(value)
+				}, null)] }),
+				createVNode(Divider, null, null),
+				createVNode(Body, {
+					"hashId": hashId.value,
+					"prefixCls": prefixCls,
+					"title": "导航模式"
+				}, { default: () => [createVNode(BlockCheckbox_default, {
+					"value": config.value.layout,
+					"key": "layout",
+					"configType": "layout",
+					"list": layout,
+					"onChange": (val) => props.onChange?.({ layout: val })
+				}, null)] }),
+				layoutLabelRadioList.map(({ label, title }) => createVNode(RegionalChange_default, {
+					"label": title,
+					"valueKey": label,
+					"value": config.value[label],
+					"disabled": disabled.value?.[label],
+					"onChange": (key, value) => props.onChange?.({ [key]: value })
+				}, null)),
+				createVNode(Divider, null, null),
+				createVNode(Body, {
+					"hashId": hashId.value,
+					"prefixCls": prefixCls,
+					"title": "其他设置"
+				}, { default: () => [
+					othersLabelRadioList.map(({ label, title }) => createVNode(RegionalChange_default, {
+						"label": title,
+						"valueKey": label,
+						"value": config.value[label],
+						"disabled": disabled.value[label],
+						"onChange": (key, value) => props.onChange?.({ [key]: value })
+					}, null)),
+					createVNode(RegionalChange_default, {
+						"label": "色弱模式",
+						"valueKey": "colorWeak",
+						"value": config.value?.colorWeak,
+						"onChange": (key, value) => props.onChange?.({ [key]: value })
+					}, null),
+					createVNode(RegionalChange_default, {
+						"label": "顶部进度条",
+						"valueKey": "progress",
+						"value": config.value?.progress,
+						"onChange": (key, value) => props.onChange?.({ [key]: value })
+					}, null)
+				] }),
+				props.copyButton && createVNode(Divider, null, null),
+				createVNode("div", { "style": {
+					display: "flex",
+					gap: "10px"
+				} }, [props.copyButton && createVNode(Button, {
+					"onClick": () => handleCopySettings(),
+					"block": true
+				}, { default: () => [createVNode(CopyOutlined, null, null), createTextVNode("拷贝设置")] }), createVNode(Button, { "block": true }, { default: () => [createVNode(ClearOutlined, null, null), createTextVNode("清空缓存")] })])
+			])])])] })])] });
+		};
+	}
+});
+
+//#endregion
+export { Setting_default as default };

package/dist/ThemeEditor/components/SwitchTab/index.d.ts

@@ -0,0 +1,51 @@
+import * as vue173 from "vue";
+import { PropType } from "vue";
+import * as ant_design_vue_es__util_type20 from "ant-design-vue/es/_util/type";
+
+//#region src/ThemeEditor/components/SwitchTab/index.d.ts
+interface SwitchTabItem {
+  label: string;
+  value: string;
+}
+declare const _default: vue173.DefineComponent<vue173.ExtractPropTypes<{
+  activeKey: {
+    type: PropType<string>;
+    default: string;
+  };
+  dataSource: {
+    type: PropType<SwitchTabItem[]>;
+    default: () => any[];
+  };
+  renderItem: {
+    type: PropType<(item: any) => any>;
+  };
+  renderContent: {
+    type: PropType<(item: any) => any>;
+  };
+  onChange: {
+    type: PropType<(val: any) => void>;
+  };
+}>, () => ant_design_vue_es__util_type20.VueNode, {}, {}, {}, vue173.ComponentOptionsMixin, vue173.ComponentOptionsMixin, {}, string, vue173.PublicProps, Readonly<vue173.ExtractPropTypes<{
+  activeKey: {
+    type: PropType<string>;
+    default: string;
+  };
+  dataSource: {
+    type: PropType<SwitchTabItem[]>;
+    default: () => any[];
+  };
+  renderItem: {
+    type: PropType<(item: any) => any>;
+  };
+  renderContent: {
+    type: PropType<(item: any) => any>;
+  };
+  onChange: {
+    type: PropType<(val: any) => void>;
+  };
+}>> & Readonly<{}>, {
+  activeKey: string;
+  dataSource: SwitchTabItem[];
+}, {}, {}, {}, string, vue173.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { SwitchTabItem, _default as default };

package/dist/ThemeEditor/components/SwitchTab/index.js

@@ -0,0 +1,52 @@
+import { switchTabStyleToken } from "./style.js";
+import { createVNode, defineComponent, ref, watch } from "vue";
+import { useProStyle } from "@gx-design-vue/pro-provider";
+import { classNames, getPrefixCls } from "@gx-design-vue/pro-utils";
+import { GScrollbars } from "@gx-design-vue/scrollbar";
+
+//#region src/ThemeEditor/components/SwitchTab/index.tsx
+var SwitchTab_default = /* @__PURE__ */ defineComponent({
+	props: {
+		activeKey: {
+			type: String,
+			default: ""
+		},
+		dataSource: {
+			type: Array,
+			default: () => []
+		},
+		renderItem: { type: Function },
+		renderContent: { type: Function },
+		onChange: { type: Function }
+	},
+	setup(props) {
+		const baseClassName = getPrefixCls({
+			suffixCls: "switch-tab",
+			isPor: true
+		});
+		const { wrapSSR, hashId } = useProStyle("SwitchTab", [switchTabStyleToken], baseClassName);
+		const activeKey = ref(props.activeKey);
+		watch(() => props.activeKey, (val) => {
+			activeKey.value = val;
+		});
+		function onChange(val) {
+			activeKey.value = val;
+			props.onChange?.(val);
+		}
+		return () => {
+			return wrapSSR(createVNode("div", { "class": classNames(`${baseClassName}`, hashId.value) }, [createVNode("div", { "class": classNames(`${baseClassName}-nav`, hashId.value) }, [props.dataSource.map((item) => {
+				return createVNode("div", {
+					"key": item.value,
+					"class": classNames(`${baseClassName}-panel`, hashId.value, activeKey.value === item.value && `${baseClassName}-panel-active`),
+					"onClick": () => onChange(item.value)
+				}, [props.renderItem?.(item), createVNode("div", { "class": classNames(`${baseClassName}-panel-title`, hashId.value) }, [item.label])]);
+			}), createVNode("div", {
+				"class": classNames(`${baseClassName}-line`, hashId.value),
+				"style": { top: `${88 * props.dataSource.findIndex((item) => item.value === activeKey.value)}px` }
+			}, null)]), createVNode("div", { "class": classNames(`${baseClassName}-content`, hashId.value) }, [createVNode(GScrollbars, null, { default: () => [props.renderContent?.(activeKey.value)] })])]));
+		};
+	}
+});
+
+//#endregion
+export { SwitchTab_default as default };

package/dist/ThemeEditor/components/SwitchTab/style.d.ts

@@ -0,0 +1,6 @@
+import { GenerateStyle } from "@gx-design-vue/pro-provider";
+
+//#region src/ThemeEditor/components/SwitchTab/style.d.ts
+declare const switchTabStyleToken: GenerateStyle;
+//#endregion
+export { switchTabStyleToken };