jojotaoo_preview 0.0.1-beta.0

package/dist/composables/usePreviewScale.d.ts

@@ -0,0 +1,5 @@
+import { type Ref } from 'vue';
+export declare function usePreviewScale(designWidth: Ref<number>, designHeight: Ref<number>, containerRef: Ref<HTMLElement | undefined>): {
+    scale: Ref<number, number>;
+};
+//# sourceMappingURL=usePreviewScale.d.ts.map

package/dist/composables/usePreviewScale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewScale.d.ts","sourceRoot":"","sources":["../../src/composables/usePreviewScale.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAE3D,wBAAgB,eAAe,CAC7B,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,EACxB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,EACzB,YAAY,EAAE,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC;;EAuB3C"}

package/dist/composables/usePreviewScale.js

@@ -0,0 +1,18 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+export function usePreviewScale(designWidth, designHeight, containerRef) {
+    const scale = ref(1);
+    function updateScale() {
+        if (!containerRef.value)
+            return;
+        const { clientWidth, clientHeight } = containerRef.value;
+        scale.value = Math.min(clientWidth / designWidth.value, clientHeight / designHeight.value);
+    }
+    onMounted(() => {
+        updateScale();
+        window.addEventListener('resize', updateScale);
+    });
+    onUnmounted(() => {
+        window.removeEventListener('resize', updateScale);
+    });
+    return { scale };
+}

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue"),t=require("@demo/components");function n(t,n,r){let i=(0,e.ref)(1);function a(){if(!r.value)return;let{clientWidth:e,clientHeight:a}=r.value;i.value=Math.min(e/t.value,a/n.value)}return(0,e.onMounted)(()=>{a(),window.addEventListener(`resize`,a)}),(0,e.onUnmounted)(()=>{window.removeEventListener(`resize`,a)}),{scale:i}}var r={class:`preview-overlay`},i={key:0,class:`preview-empty`},a=`preview_schema`,o=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,e.defineComponent)({__name:`PreviewPage`,setup(o){let s=(0,t.useDashboardStore)(),c=(0,e.ref)(null);function l(){localStorage.removeItem(a)}function u(){}function d(e){e.key===`Escape`&&document.fullscreenElement&&(e.preventDefault(),document.exitFullscreen()),e.key===`F11`&&(e.preventDefault(),document.fullscreenElement||document.documentElement.requestFullscreen().catch(()=>{}))}(0,e.onMounted)(()=>{let e=localStorage.getItem(a);if(!e){window.close();return}c.value=JSON.parse(e),localStorage.removeItem(a),c.value&&(s.editCanvasConfig={...s.editCanvasConfig,...c.value.editCanvasConfig},s.requestGlobalConfig={...s.requestGlobalConfig,...c.value.requestGlobalConfig},s.components=c.value.componentList??[]),s.setPreviewMode(!0),document.documentElement.requestFullscreen().catch(()=>{}),document.addEventListener(`fullscreenchange`,u),window.addEventListener(`keydown`,d),window.addEventListener(`beforeunload`,l)}),(0,e.onUnmounted)(()=>{s.setPreviewMode(!1),document.removeEventListener(`fullscreenchange`,u),window.removeEventListener(`keydown`,d),window.removeEventListener(`beforeunload`,l)});let f=(0,e.ref)(),p=(0,e.computed)(()=>({backgroundColor:c.value?.editCanvasConfig?.background||`#11111b`})),{scale:m}=n((0,e.computed)(()=>c.value?.editCanvasConfig.width??1920),(0,e.computed)(()=>c.value?.editCanvasConfig.height??1080),f),h=(0,e.computed)(()=>{if(!c.value)return{};let e=c.value.editCanvasConfig;return{width:e.width+`px`,height:e.height+`px`,backgroundColor:e.background,backgroundImage:e.backgroundImage?`url(${e.backgroundImage})`:void 0,backgroundSize:e.backgroundImage?`cover`:void 0,backgroundPosition:`center`,backgroundRepeat:`no-repeat`,filter:e.filterShow?`opacity(${e.opacity}) saturate(${e.saturate}) contrast(${e.contrast}) hue-rotate(${e.hueRotate}deg) brightness(${e.brightness})`:void 0,transform:`scale(${m.value})`,transformOrigin:`center center`,flexShrink:0,mixBlendMode:e.blendMode===`normal`?void 0:e.blendMode}});function g(e){return{left:e.attr.x+`px`,top:e.attr.y+`px`,width:e.attr.w+`px`,height:e.attr.h+`px`,opacity:e.styles.opacity,filter:e.styles.filterShow?`saturate(${e.styles.saturate}) contrast(${e.styles.contrast}) hue-rotate(${e.styles.hueRotate}deg) brightness(${e.styles.brightness})`:void 0,transform:`rotateZ(${e.styles.rotateZ}deg) rotateX(${e.styles.rotateX}deg) rotateY(${e.styles.rotateY}deg) skewX(${e.styles.skewX}deg) skewY(${e.styles.skewY}deg)`,mixBlendMode:e.styles.blendMode===`normal`?void 0:e.styles.blendMode,overflow:e.preview.overFlowHidden?`hidden`:void 0}}let _=(0,e.computed)(()=>c.value?.componentList??[]);return(n,a)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,r,[(0,e.createElementVNode)(`div`,{class:`preview-wrap`,ref_key:`wrapRef`,ref:f,style:(0,e.normalizeStyle)(p.value)},[(0,e.createElementVNode)(`div`,{class:`preview-stage`,style:(0,e.normalizeStyle)(h.value)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(_.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n.id,class:(0,e.normalizeClass)([`preview-component`,{hidden:n.status.hide}]),style:(0,e.normalizeStyle)(g(n))},[n.key===`group`?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.GroupPreview),{key:0,component:n},null,8,[`component`])):((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)((0,e.unref)(t.componentMap)[n.key]),(0,e.mergeProps)({key:1,ref_for:!0},(0,e.unref)(t.getComponentProps)(n)),null,16)),(0,e.createVNode)((0,e.unref)(t.DataFetchManager),{"component-id":n.id,mode:`preview`},null,8,[`component-id`])],6))),128)),_.value.length===0?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,i,` 暂无组件 `)):(0,e.createCommentVNode)(``,!0)],4)],4)]))}}),[[`__scopeId`,`data-v-3afe6fa0`]]);exports.PreviewPage=o,exports.usePreviewScale=n;

package/dist/index.css

@@ -0,0 +1,2 @@
+.preview-overlay[data-v-3afe6fa0]{z-index:1000;background:#11111b;display:flex;position:fixed;inset:0}.preview-stage[data-v-3afe6fa0]{position:relative}.preview-wrap[data-v-3afe6fa0]{flex:1;justify-content:center;align-items:center;display:flex;overflow:hidden}.preview-component[data-v-3afe6fa0]{border-radius:6px;position:absolute;overflow:hidden}.preview-component.hidden[data-v-3afe6fa0]{display:none}.preview-empty[data-v-3afe6fa0]{color:#6c7086;-webkit-user-select:none;user-select:none;font-size:16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
+/*$vite$:1*/

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as PreviewPage } from './pages/PreviewPage.vue';
+export { usePreviewScale } from './composables/usePreviewScale';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA"}

package/dist/index.js

@@ -0,0 +1,3 @@
+// jojotaoo_preview - 预览容器入口
+export { default as PreviewPage } from './pages/PreviewPage.vue';
+export { usePreviewScale } from './composables/usePreviewScale';

package/dist/pages/PreviewPage.vue.d.ts

@@ -0,0 +1,4 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=PreviewPage.vue.d.ts.map

package/dist/pages/PreviewPage.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewPage.vue.d.ts","sourceRoot":"","sources":["../../src/pages/PreviewPage.vue"],"names":[],"mappings":"AAiaA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/pages/PreviewPage.vue.js

@@ -0,0 +1,173 @@
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useDashboardStore, GroupPreview, DataFetchManager, componentMap, getComponentProps } from 'jojotaoo_components';
+import { usePreviewScale } from '../composables/usePreviewScale';
+const STORAGE_KEY = 'preview_schema';
+const store = useDashboardStore();
+const schema = ref(null);
+function handleBeforeUnload() {
+    localStorage.removeItem(STORAGE_KEY);
+}
+function handleFullscreenChange() {
+}
+function handleKeydown(e) {
+    if (e.key === 'Escape' && document.fullscreenElement) {
+        e.preventDefault();
+        document.exitFullscreen();
+    }
+    if (e.key === 'F11') {
+        e.preventDefault();
+        if (!document.fullscreenElement) {
+            document.documentElement.requestFullscreen().catch(() => { });
+        }
+    }
+}
+onMounted(() => {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+        window.close();
+        return;
+    }
+    schema.value = JSON.parse(raw);
+    localStorage.removeItem(STORAGE_KEY);
+    if (schema.value) {
+        store.editCanvasConfig = { ...store.editCanvasConfig, ...schema.value.editCanvasConfig };
+        store.requestGlobalConfig = { ...store.requestGlobalConfig, ...schema.value.requestGlobalConfig };
+        store.components = (schema.value.componentList ?? []);
+    }
+    store.setPreviewMode(true);
+    document.documentElement.requestFullscreen().catch(() => { });
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    window.addEventListener('keydown', handleKeydown);
+    window.addEventListener('beforeunload', handleBeforeUnload);
+});
+onUnmounted(() => {
+    store.setPreviewMode(false);
+    document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    window.removeEventListener('keydown', handleKeydown);
+    window.removeEventListener('beforeunload', handleBeforeUnload);
+});
+const wrapRef = ref();
+const wrapStyle = computed(() => ({
+    backgroundColor: schema.value?.editCanvasConfig?.background || '#11111b',
+}));
+const { scale } = usePreviewScale(computed(() => schema.value?.editCanvasConfig.width ?? 1920), computed(() => schema.value?.editCanvasConfig.height ?? 1080), wrapRef);
+const stageStyle = computed(() => {
+    if (!schema.value)
+        return {};
+    const c = schema.value.editCanvasConfig;
+    return {
+        width: c.width + 'px',
+        height: c.height + 'px',
+        backgroundColor: c.background,
+        backgroundImage: c.backgroundImage ? `url(${c.backgroundImage})` : undefined,
+        backgroundSize: c.backgroundImage ? 'cover' : undefined,
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        filter: c.filterShow
+            ? `opacity(${c.opacity}) saturate(${c.saturate}) contrast(${c.contrast}) hue-rotate(${c.hueRotate}deg) brightness(${c.brightness})`
+            : undefined,
+        transform: `scale(${scale.value})`,
+        transformOrigin: 'center center',
+        flexShrink: 0,
+        mixBlendMode: c.blendMode !== 'normal'
+            ? c.blendMode
+            : undefined,
+    };
+});
+function componentStyle(comp) {
+    return {
+        left: comp.attr.x + 'px',
+        top: comp.attr.y + 'px',
+        width: comp.attr.w + 'px',
+        height: comp.attr.h + 'px',
+        opacity: comp.styles.opacity,
+        filter: comp.styles.filterShow
+            ? `saturate(${comp.styles.saturate}) contrast(${comp.styles.contrast}) hue-rotate(${comp.styles.hueRotate}deg) brightness(${comp.styles.brightness})`
+            : undefined,
+        transform: `rotateZ(${comp.styles.rotateZ}deg) rotateX(${comp.styles.rotateX}deg) rotateY(${comp.styles.rotateY}deg) skewX(${comp.styles.skewX}deg) skewY(${comp.styles.skewY}deg)`,
+        mixBlendMode: comp.styles.blendMode !== 'normal'
+            ? comp.styles.blendMode
+            : undefined,
+        overflow: comp.preview.overFlowHidden ? 'hidden' : undefined,
+    };
+}
+const rootComponents = computed(() => schema.value?.componentList ?? []);
+const __VLS_ctx = {
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+/** @type {__VLS_StyleScopedClasses['preview-component']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "preview-overlay" },
+});
+/** @type {__VLS_StyleScopedClasses['preview-overlay']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "preview-wrap" },
+    ref: "wrapRef",
+    ...{ style: (__VLS_ctx.wrapStyle) },
+});
+/** @type {__VLS_StyleScopedClasses['preview-wrap']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "preview-stage" },
+    ...{ style: (__VLS_ctx.stageStyle) },
+});
+/** @type {__VLS_StyleScopedClasses['preview-stage']} */ ;
+for (const [comp] of __VLS_vFor((__VLS_ctx.rootComponents))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        key: (comp.id),
+        ...{ class: "preview-component" },
+        ...{ class: ({ hidden: comp.status.hide }) },
+        ...{ style: (__VLS_ctx.componentStyle(comp)) },
+    });
+    /** @type {__VLS_StyleScopedClasses['preview-component']} */ ;
+    /** @type {__VLS_StyleScopedClasses['hidden']} */ ;
+    if (comp.key === 'group') {
+        let __VLS_0;
+        /** @ts-ignore @type { | typeof __VLS_components.GroupPreview} */
+        GroupPreview;
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+            component: (comp),
+        }));
+        const __VLS_2 = __VLS_1({
+            component: (comp),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    }
+    else {
+        const __VLS_5 = (__VLS_ctx.componentMap[comp.key]);
+        // @ts-ignore
+        const __VLS_6 = __VLS_asFunctionalComponent1(__VLS_5, new __VLS_5({
+            ...(__VLS_ctx.getComponentProps(comp)),
+        }));
+        const __VLS_7 = __VLS_6({
+            ...(__VLS_ctx.getComponentProps(comp)),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_6));
+    }
+    let __VLS_10;
+    /** @ts-ignore @type { | typeof __VLS_components.DataFetchManager} */
+    DataFetchManager;
+    // @ts-ignore
+    const __VLS_11 = __VLS_asFunctionalComponent1(__VLS_10, new __VLS_10({
+        componentId: (comp.id),
+        mode: "preview",
+    }));
+    const __VLS_12 = __VLS_11({
+        componentId: (comp.id),
+        mode: "preview",
+    }, ...__VLS_functionalComponentArgsRest(__VLS_11));
+    // @ts-ignore
+    [wrapStyle, stageStyle, rootComponents, componentStyle, componentMap, getComponentProps,];
+}
+if (__VLS_ctx.rootComponents.length === 0) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "preview-empty" },
+    });
+    /** @type {__VLS_StyleScopedClasses['preview-empty']} */ ;
+}
+// @ts-ignore
+[rootComponents,];
+const __VLS_export = (await import('vue')).defineComponent({});
+export default {};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "jojotaoo_preview",
+  "version": "0.0.1-beta.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "jojotaoo_components": "0.0.1-beta.0"
+  },
+  "devDependencies": {
+    "vue": "^3.5.35",
+    "typescript": "~6.0.2",
+    "jojotaoo_components": "0.0.1-beta.0"
+  },
+  "module": "./dist/index.js"
+}