feat: add visible

packages/dooringx-example/src/layouts/index.tsx

@@ -50,6 +50,15 @@ const ContextMenu = () => {
 			>
 				<Button>自定义</Button>
 			</div>
+			<div
+				style={{ width: '100%' }}
+				onClick={() => {
+					commander.exec('hide');
+					handleclick();
+				}}
+			>
+				<Button style={{ width: '100%' }}>隐藏</Button>
+			</div>
 			<div
 				style={{ width: '100%' }}
 				onClick={() => {

packages/dooringx-example/src/plugin/commands/hide.ts

@@ -0,0 +1,20 @@
+import deepcopy from 'deepcopy';
+import { CommanderItemFactory } from 'dooringx-lib';
+import { IStoreData } from 'dooringx-lib/dist/core/store/storetype';
+
+const hide = new CommanderItemFactory(
+	'hide',
+	'',
+	(store) => {
+		const clonedata: IStoreData = deepcopy(store.getData());
+		clonedata.block.forEach((v) => {
+			if (v.focus) {
+				v.canSee = false;
+			}
+		});
+		store.setData(clonedata);
+	},
+	'隐藏'
+);
+
+export default hide;

packages/dooringx-lib/src/components/blocks.tsx

@@ -146,7 +146,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 						width: props.data.width,
 						height: props.data.height,
 						zIndex: props.data.zIndex,
-						display: props.data.display,
+						display: props.data.canSee ? props.data.display : 'none',
 						opacity: props.iframe ? 0 : 1,
 						transform: `rotate(${props.data.rotate.value}deg)`,
 					}}

packages/dooringx-lib/src/components/timeLine/timeline.tsx

@@ -11,7 +11,13 @@ import { SortableContainer, SortableElement, SortableHandle, SortEnd } from 'rea
 import UserConfig from '../../config';
 import { IBlockType, IStoreData } from '../../core/store/storetype';
 import { arrayMove } from '../../core/utils';
-import { DeleteOutlined, MenuOutlined, PlayCircleOutlined } from '@ant-design/icons';
+import {
+	DeleteOutlined,
+	EyeInvisibleOutlined,
+	EyeOutlined,
+	MenuOutlined,
+	PlayCircleOutlined,
+} from '@ant-design/icons';
 import {
 	TimeLineItem,
 	itemHeight,
@@ -83,7 +89,24 @@ const SortableItem = SortableElement(
 				</div>
 				<div>{value.config.getComponentRegister().getMap()[value.value.name].display}</div>
 				<div>{value.value.id.slice(-6)}</div>
-				<div style={{ marginLeft: 5 }}>
+				<div style={{ marginLeft: 5, flex: 1, textAlign: 'right', paddingRight: 5 }}>
+					<span
+						style={{ marginRight: 5 }}
+						onClick={() => {
+							const store = value.config.getStore();
+							const clone = deepcopy(store.getData());
+							clone.block = clone.block.map((v) => {
+								if (v.id === value.value.id && !specialCoList.includes(value.value.name)) {
+									v.canSee = !v.canSee;
+									return v;
+								}
+								return v;
+							});
+							store.setData(clone);
+						}}
+					>
+						{value.value.canSee ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+					</span>
 					<Popconfirm
 						title={replaceLocale('control.popup.delete', '确认删除么', value.config)}
 						onConfirm={() => {

packages/dooringx-lib/src/core/components/createBlock.ts

@@ -34,6 +34,7 @@ export function createBlock(
 		height: ComponentItem.initData.height,
 		syncList: ComponentItem.initData.syncList || [],
 		canDrag: ComponentItem.initData.canDrag ?? true,
+		canSee: ComponentItem.initData.canSee ?? true,
 		eventMap: ComponentItem.initData.eventMap || {},
 		functionList: ComponentItem.initData.functionList || [],
 		animate: ComponentItem.initData.animate || [],

packages/dooringx-lib/src/core/store/storetype.ts

@@ -41,6 +41,7 @@ export interface IBlockType {
 	focus: boolean;
 	resize: boolean;
 	canDrag: boolean;
+	canSee: boolean;
 	props: Record<string, any>;
 	syncList: Array<string>;
 	eventMap: EventCenterMapType; //调用的event 与对应的函数名 如果要增加参数，则类型不能是Array<string>,需要[{name:string,...args}]

packages/dooringx-lib/src/core/storeChanger/index.ts

@@ -33,6 +33,7 @@ function createDefaultModalBlock(): IStoreData['block'] {
 			props: {},
 			resize: true,
 			focus: false,
+			canSee: true,
 			position: 'absolute',
 			display: 'block',
 			syncList: [],