@gct-paas/render-web 0.1.6-dev.2 → 0.1.6-dev.20

package/es/Event/Events.mjs

@@ -4,9 +4,13 @@ import { inject, provide } from "vue";
 var PAGE_EVENT = Symbol("PAGE_EVENT");
 var setupPageEvent = (event) => provide(PAGE_EVENT, event);
 var usePageEvent = () => {
-	const event = inject(PAGE_EVENT);
-	if (!event) throw new Error("PAGE_EVENT not provided");
-	return event;
+	try {
+		const event = inject(PAGE_EVENT);
+		if (!event) throw new Error("PAGE_EVENT not provided");
+		return event;
+	} catch {
+		return {};
+	}
 };
 //#endregion
 export { setupPageEvent, usePageEvent };

package/es/components/card-view-render/card-view-render.css

@@ -0,0 +1,71 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-card-view-render {
+  position: relative;
+}
+.gct-card-view-render .gct-design-render {
+  width: auto;
+  height: auto;
+}

package/es/components/card-view-render/card-view-render.d.ts

@@ -0,0 +1,38 @@
+import { PropType } from 'vue';
+export declare const CardViewRender: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    modelKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    fetch: {
+        type: PropType<() => Promise<IObject>>;
+    };
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "mounted"[], "mounted", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    modelKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    fetch: {
+        type: PropType<() => Promise<IObject>>;
+    };
+    preview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onMounted?: ((...args: any[]) => any) | undefined;
+}>, {
+    preview: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/card-view-render/card-view-render.mjs

@@ -0,0 +1,84 @@
+import './card-view-render.css';/* empty css                       */
+import { DesignRender, DesignRenderViewPrefix } from "@gct-paas/render";
+import { computed, createVNode, defineComponent, nextTick, ref } from "vue";
+import { gctMemoizeAsync, useNamespace } from "@gct-paas/core";
+//#region src/components/card-view-render/card-view-render.tsx
+var loadModelAsync = gctMemoizeAsync(_api.apaas.commonInfoCard.getGetById);
+var CardViewRender = /* @__PURE__ */ defineComponent({
+	name: "CardViewRender",
+	props: {
+		id: {
+			type: String,
+			required: true
+		},
+		modelKey: {
+			type: String,
+			required: true
+		},
+		fetch: { type: Function },
+		preview: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["mounted"],
+	setup(props, { emit, slots }) {
+		const ns = useNamespace("card-view-render");
+		const isLoading = ref(false);
+		const isLoaded = ref(false);
+		const json = ref(null);
+		const data = ref({});
+		const style = computed(() => {
+			if (json.value) return { width: json.value.pageNode?.data.width ? `${json.value.pageNode.data.width}px` : "" };
+			return {};
+		});
+		async function loadModel() {
+			const res = await loadModelAsync({
+				id: props.id,
+				modelKey: props.modelKey,
+				type: "CARD"
+			});
+			if (res && res.designerJson) json.value = JSON.parse(decodeURIComponent(res.designerJson));
+		}
+		async function onInit() {
+			if (!props.id) return;
+			try {
+				isLoading.value = true;
+				await loadModel();
+				if (props.preview !== true && props.fetch) data.value = await props.fetch() || {};
+			} catch (error) {
+				console.error(error);
+			} finally {
+				isLoading.value = false;
+			}
+			isLoaded.value = true;
+			await nextTick();
+			setTimeout(() => {
+				emit("mounted", json.value?.pageNode?.data);
+			});
+		}
+		onInit();
+		return () => {
+			return createVNode("div", {
+				"class": ns.b(),
+				"style": style.value
+			}, [isLoading.value && slots.loading ? slots.loading?.() : null, !json.value || !isLoaded.value ? null : createVNode(DesignRender, {
+				"context": {
+					data: data.value,
+					id: props.id,
+					modelKey: props.modelKey
+				},
+				"model": {
+					nodes: json.value.nodes,
+					pageNode: json.value.pageNode,
+					tree: json.value.tree,
+					type: DesignRenderViewPrefix.CARD_VIEW
+				},
+				"prefix": DesignRenderViewPrefix.CARD_VIEW,
+				"preview": props.preview
+			}, null)]);
+		};
+	}
+});
+//#endregion
+export { CardViewRender };

package/es/components/collapse-detail/components/collapse-list.vue.d.ts

@@ -0,0 +1,24 @@
+import { CollapseItem } from '../typing';
+type __VLS_Props = {
+    descData: CollapseItem[];
+    isHead?: boolean;
+    column?: number;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Partial<Record<string, (_: {
+        item: CollapseItem;
+        slotData: IObject | undefined;
+    }) => any>>;
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/components/collapse-detail/components/collapse-list.vue.mjs

@@ -0,0 +1,5 @@
+import collapse_list_vue_vue_type_script_setup_true_lang_default from "./collapse-list.vue_vue_type_script_setup_true_lang.mjs";
+//#region src/components/collapse-detail/components/collapse-list.vue
+var collapse_list_default = collapse_list_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { collapse_list_default as default };

package/es/components/collapse-detail/components/collapse-list.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,103 @@
+import instance_status_label_default from "./instance-status-label.vue.mjs";
+import label_tag_default from "./label-tag.vue.mjs";
+import enum_tag_label_default from "./enum-tag-label.vue.mjs";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, resolveComponent, toDisplayString, unref, withCtx } from "vue";
+import { CopyModuleKey } from "@gct-paas/core-web";
+//#region src/components/collapse-detail/components/collapse-list.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["title"];
+var _hoisted_2 = ["title"];
+var collapse_list_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "collapse-list",
+	props: {
+		descData: {},
+		isHead: { type: Boolean },
+		column: {}
+	},
+	setup(__props) {
+		const getSpan = (span = 1) => {
+			if (span > 3) return 3;
+			return span;
+		};
+		const ellipsisStyle = (item) => {
+			if (!item.ellipsis) return {};
+			return {
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap",
+				display: "inline-block"
+			};
+		};
+		return (_ctx, _cache) => {
+			const _component_a_tag = resolveComponent("a-tag");
+			const _component_a_descriptions_item = resolveComponent("a-descriptions-item");
+			const _component_a_descriptions = resolveComponent("a-descriptions");
+			return openBlock(), createBlock(_component_a_descriptions, {
+				class: normalizeClass(__props.isHead ? "item" : "desc-area"),
+				column: __props.column || 3
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.descData, (item, _index) => {
+					return openBlock(), createBlock(_component_a_descriptions_item, {
+						key: _index,
+						label: item.label,
+						span: getSpan(item.span),
+						"content-style": ellipsisStyle(item)
+					}, {
+						default: withCtx(() => [item.useSlot && item.slotName && _ctx.$slots[item.slotName] ? renderSlot(_ctx.$slots, item.slotName, {
+							key: 0,
+							item,
+							slotData: item.slotData
+						}) : item.render ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+							item.render === "link_render" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [item.name ? (openBlock(), createElementBlock("span", {
+								key: 0,
+								title: item.name
+							}, toDisplayString(item.name), 9, _hoisted_1)) : (openBlock(), createBlock(_component_a_tag, {
+								key: 1,
+								color: "error"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(_ctx.$t("sys.onlineForm.noAssociation")), 1)]),
+								_: 1
+							}))], 64)) : createCommentVNode("", true),
+							item.render === "status_render" ? (openBlock(), createBlock(instance_status_label_default, {
+								key: 1,
+								"instance-status": item.name
+							}, null, 8, ["instance-status"])) : createCommentVNode("", true),
+							item.render === "change_status_render" ? (openBlock(), createBlock(enum_tag_label_default, {
+								key: 2,
+								value: item.name,
+								model: item.model
+							}, null, 8, ["value", "model"])) : createCommentVNode("", true),
+							item.render === "label_tag_render" ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(item.tagList, (tag, i) => {
+								return openBlock(), createBlock(label_tag_default, {
+									key: i,
+									data: tag
+								}, null, 8, ["data"]);
+							}), 128)) : createCommentVNode("", true)
+						], 64)) : item.isCopy ? (openBlock(), createBlock(unref(CopyModuleKey), {
+							key: 2,
+							"module-key": item.key
+						}, null, 8, ["module-key"])) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [createElementVNode("span", {
+							title: item.name,
+							class: normalizeClass({ "mr-4px": item.hasTag })
+						}, toDisplayString(item.name), 11, _hoisted_2), item.hasTag ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(item.tagList, (tag) => {
+							return openBlock(), createBlock(_component_a_tag, {
+								key: tag.key,
+								color: tag?.color
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(tag.name), 1)]),
+								_: 2
+							}, 1032, ["color"]);
+						}), 128)) : createCommentVNode("", true)], 64))]),
+						_: 2
+					}, 1032, [
+						"label",
+						"span",
+						"content-style"
+					]);
+				}), 128))]),
+				_: 3
+			}, 8, ["class", "column"]);
+		};
+	}
+});
+//#endregion
+export { collapse_list_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/collapse-detail/components/enum-tag-label.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    model: string;
+    value: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/components/collapse-detail/components/enum-tag-label.vue.mjs

@@ -0,0 +1,5 @@
+import enum_tag_label_vue_vue_type_script_setup_true_lang_default from "./enum-tag-label.vue_vue_type_script_setup_true_lang.mjs";
+//#region src/components/collapse-detail/components/enum-tag-label.vue
+var enum_tag_label_default = enum_tag_label_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { enum_tag_label_default as default };

package/es/components/collapse-detail/components/enum-tag-label.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,61 @@
+import tag_label_default from "../../form-component/field-label/tag-label.vue.mjs";
+import "../../form-component/index.mjs";
+import { createBlock, defineComponent, openBlock, ref, unref, watch } from "vue";
+import { FIELD_TYPE, gctMemoizeAsync } from "@gct-paas/core";
+import { pick } from "lodash-es";
+//#region src/components/collapse-detail/components/enum-tag-label.vue?vue&type=script&setup=true&lang.ts
+var enum_tag_label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "enum-tag-label",
+	props: {
+		model: {},
+		value: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const enumInfo = ref({});
+		const iconProps = ref();
+		const iconExtraProps = ref();
+		const loadData = gctMemoizeAsync(getEnumConfig);
+		watch(() => props.model, async () => {
+			if (!props.model) return;
+			const { list, tagProps } = await loadData({ id: props.model });
+			enumInfo.value = list.find((e) => e.value === props.value);
+			iconExtraProps.value = tagProps;
+		}, { immediate: true });
+		async function getEnumConfig({ id }) {
+			return await getEnumData(await _api.apaas.enumModel.getInfoId({ id }) || {});
+		}
+		async function getEnumData({ iconState, textState }) {
+			const res = await _api.apaas.enumModelField.getPageList({
+				enumModelId: props.model,
+				enumModelKey: props.model
+			});
+			const keys = iconState ? ["icon", "iconColor"] : [];
+			if (textState) keys.push("textColor");
+			return {
+				list: res?.data || [],
+				tagProps: res?.data?.reduce((map, e) => {
+					map[e.text] = pick(e, keys);
+					return map;
+				}, {})
+			};
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(tag_label_default), {
+				type: unref(FIELD_TYPE).ENUM,
+				label: enumInfo.value.text,
+				"tag-widget-style": { tagStyleOpen: true },
+				"is-design": false,
+				"icon-extra-props": iconExtraProps.value,
+				"icon-props": iconProps.value
+			}, null, 8, [
+				"type",
+				"label",
+				"icon-extra-props",
+				"icon-props"
+			]);
+		};
+	}
+});
+//#endregion
+export { enum_tag_label_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/collapse-detail/components/instance-status-label.vue.d.ts

@@ -0,0 +1,34 @@
+import { InstanceStatusValue } from '../constants/status';
+import { FormTypeEnum } from '../typing';
+type __VLS_Props = {
+    formType?: FormTypeEnum;
+    dataStatus?: string;
+    instanceStatus: InstanceStatusValue;
+    statusType?: string;
+    useDynamicColor?: boolean;
+    showIcon?: boolean;
+    needCustomClass?: boolean;
+    isFormSummary?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        instanceTitle?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    useDynamicColor: boolean;
+    showIcon: boolean;
+    needCustomClass: boolean;
+    isFormSummary: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/components/collapse-detail/components/instance-status-label.vue.mjs

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import instance_status_label_vue_vue_type_script_setup_true_lang_default from "./instance-status-label.vue_vue_type_script_setup_true_lang.mjs";
+import './instance-status-label.vue_vue_type_style_index_0_scoped_610b0bb3_lang.css';/* empty css                                                                            */
+//#region src/components/collapse-detail/components/instance-status-label.vue
+var instance_status_label_default = /* @__PURE__ */ _plugin_vue_export_helper_default(instance_status_label_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-610b0bb3"]]);
+//#endregion
+export { instance_status_label_default as default };

package/es/components/collapse-detail/components/instance-status-label.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,76 @@
+import { useInstanceThemeConfig } from "../constants/instance-theme-config.mjs";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString } from "vue";
+import { t } from "@gct-paas/core";
+//#region src/components/collapse-detail/components/instance-status-label.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "instance-status-icon"
+};
+var instance_status_label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "instance-status-label",
+	props: {
+		formType: {},
+		dataStatus: {},
+		instanceStatus: {},
+		statusType: {},
+		useDynamicColor: {
+			type: Boolean,
+			default: false
+		},
+		showIcon: {
+			type: Boolean,
+			default: false
+		},
+		needCustomClass: {
+			type: Boolean,
+			default: false
+		},
+		isFormSummary: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const themeConfig = computed(() => {
+			const base = "instance-status-label";
+			if (props.useDynamicColor) {
+				const config = useInstanceThemeConfig({
+					formType: props.formType,
+					dataStatus: props.dataStatus,
+					instanceStatus: props.instanceStatus,
+					statusType: props.statusType,
+					isFormSummary: props.isFormSummary
+				});
+				return {
+					baseClass: [base, `${base}--dynamic`],
+					...config
+				};
+			}
+			return {
+				placeholder: props.instanceStatus ? t(`sys.edhr.instanceStatus2FormEnum.${props.instanceStatus}`) : "",
+				baseClass: [
+					base,
+					`${base}--static`,
+					`${base}--${props.instanceStatus}`
+				]
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["instance-status-wrapper", themeConfig.value.baseClass]),
+				style: normalizeStyle({
+					"--nocode-iconBgColor": themeConfig.value?.iconBackground,
+					"--nocode-textColor": themeConfig.value?.textColor,
+					"--nocode-bgColor": themeConfig.value?.background
+				})
+			}, [
+				__props.showIcon ? (openBlock(), createElementBlock("span", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("i", { class: "iconfont icon-a-biaodan2" }, null, -1)])])) : createCommentVNode("", true),
+				renderSlot(_ctx.$slots, "instanceTitle", {}, void 0, true),
+				createElementVNode("span", { class: normalizeClass(["instance-title", __props.needCustomClass ? "is-custom-class" : ""]) }, toDisplayString(themeConfig.value?.placeholder), 3)
+			], 6);
+		};
+	}
+});
+//#endregion
+export { instance_status_label_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/collapse-detail/components/instance-status-label.vue_vue_type_style_index_0_scoped_610b0bb3_lang.css

@@ -0,0 +1,77 @@
+.instance-status-wrapper[data-v-610b0bb3] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+.instance-status-wrapper.instance-status-label--UNFILLED[data-v-610b0bb3],
+.instance-status-wrapper.instance-status-label--UNRELEASED[data-v-610b0bb3] {
+  --color: #de5e5f;
+}
+.instance-status-wrapper.instance-status-label--RUNNING[data-v-610b0bb3],
+.instance-status-wrapper.instance-status-label--running[data-v-610b0bb3],
+.instance-status-wrapper.instance-status-label--RELEASE[data-v-610b0bb3] {
+  --color: #026ac8;
+}
+.instance-status-wrapper.instance-status-label--COMPLETED[data-v-610b0bb3],
+.instance-status-wrapper.instance-status-label--finished[data-v-610b0bb3] {
+  --color: #309c41;
+}
+.instance-status-wrapper.instance-status-label--ARCHIVED[data-v-610b0bb3],
+.instance-status-wrapper.instance-status-label--IN_AUDIT[data-v-610b0bb3] {
+  --color: #dda200;
+}
+.instance-status-wrapper.instance-status-label--EXCEPTION[data-v-610b0bb3] {
+  --color: var(--ant-warning-color);
+}
+.instance-status-wrapper.instance-status-label--IN_SUMMARY[data-v-610b0bb3] {
+  --color: #ff9442;
+}
+.instance-status-wrapper.instance-status-label--SUMMARIZED[data-v-610b0bb3] {
+  --color: #aa78ff;
+}
+.instance-status-wrapper.instance-status-label--static .instance-title[data-v-610b0bb3] {
+  color: var(--color, #606266);
+  padding: 0;
+}
+.instance-status-wrapper .icon-dot[data-v-610b0bb3] {
+  width: 4px;
+  height: 4px;
+  margin-right: 4px;
+  border-radius: 50%;
+  background-color: var(--color, transparent);
+}
+.instance-status-wrapper .instance-status-icon[data-v-610b0bb3] {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  width: 32px;
+  justify-content: center;
+  color: #fff;
+  background: var(--nocode-iconBgColor);
+  border-radius: 2px;
+}
+.instance-status-wrapper .instance-status-icon .iconfont[data-v-610b0bb3] {
+  font-size: 18px;
+}
+.instance-status-wrapper .instance-title[data-v-610b0bb3] {
+  display: inline-block;
+  line-height: 22px;
+  font-size: 14px;
+  color: var(--nocode-textColor);
+  background: var(--nocode-bgColor);
+  border-radius: 4px;
+  padding: 0 6px;
+}
+.instance-status-wrapper .instance-title.is-custom-class[data-v-610b0bb3] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 18px;
+  font-size: 12px;
+  line-height: 18px;
+  border-radius: 0 0 4px 4px;
+}

package/es/components/collapse-detail/components/label-tag.vue.d.ts

@@ -0,0 +1,6 @@
+import { LabelTagItem } from '../typing';
+type __VLS_Props = {
+    data: LabelTagItem;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/es/components/collapse-detail/components/label-tag.vue.mjs

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import label_tag_vue_vue_type_script_setup_true_lang_default from "./label-tag.vue_vue_type_script_setup_true_lang.mjs";
+import './label-tag.vue_vue_type_style_index_0_scoped_b25afce5_lang.css';/* empty css                                                                */
+//#region src/components/collapse-detail/components/label-tag.vue
+var label_tag_default = /* @__PURE__ */ _plugin_vue_export_helper_default(label_tag_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b25afce5"]]);
+//#endregion
+export { label_tag_default as default };

package/es/components/collapse-detail/components/label-tag.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,34 @@
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, toDisplayString, toRef, useCssVars } from "vue";
+import { TagTypeEnum } from "@gct-paas/core";
+//#region src/components/collapse-detail/components/label-tag.vue?vue&type=script&setup=true&lang.ts
+var label_tag_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "label-tag",
+	props: { data: {} },
+	setup(__props) {
+		useCssVars((_ctx) => ({ "v218ac50d": tagStyleColor.value }));
+		const props = __props;
+		const showLabel = toRef(() => {
+			return props.data.label + "";
+		});
+		const tagType = toRef(() => {
+			return props.data.labelStyle || TagTypeEnum.RADIUS;
+		});
+		const tagStyleColor = toRef(() => {
+			return props.data.labelColor || "#026ac8";
+		});
+		const getTagClass = toRef(() => {
+			return `tag-${tagType.value}`;
+		});
+		const msgColor = toRef(() => {
+			return { color: props.data.valueColor || "#fff" };
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(["tag label-ellipsis", getTagClass.value]) }, [createElementVNode("span", {
+				class: "select-text",
+				style: normalizeStyle(msgColor.value)
+			}, toDisplayString(showLabel.value || "\xA0"), 5)], 2);
+		};
+	}
+});
+//#endregion
+export { label_tag_vue_vue_type_script_setup_true_lang_default as default };