@studio-kit/utils-browser 1.0.1 → 1.0.3

package/src/Socket.js

@@ -0,0 +1,263 @@
+import ReconnectingWebSocket from 'reconnecting-websocket'
+
+const WS_OPEN = 1
+const WS_CLOSED = 3
+const SEND_QUEUE_MAX = 50
+
+export default class Socket {
+    static createClient({
+        url,
+        debug,
+        maxRetries = 10,
+        connectionTimeout = 1000,
+        eventMap = {},
+        parseMessage,
+        onOpen,
+        onClose,
+        onError,
+    } = {}) {
+        let closed = false
+        let ws = new ReconnectingWebSocket(url, null, {
+            connectionTimeout,
+            maxRetries,
+            debug,
+        })
+        const sendQueue = []
+        let openHandler = onOpen
+        let closeHandler = onClose
+        let errorHandler = onError
+
+        ws.onopen = () => {
+            if (closed) return
+            console.log('socket opened', url)
+            flushSendQueue()
+            openHandler?.()
+        }
+        ws.onclose = function () {
+            if (closed) return
+            console.log('socket closed', url)
+            closeHandler?.()
+        }
+        ws.onmessage = function (msg) {
+            dispatchMessage(msg)
+        }
+        ws.onerror = (err) => {
+            if (closed) return
+            if (debug !== false) console.error(err)
+            errorHandler?.(err)
+        }
+
+        const result = {
+            get url() {
+                return url
+            },
+            get readyState() {
+                if (closed || !ws) return WS_CLOSED
+                return ws.readyState
+            },
+            send({ data }) {
+                if (closed || !ws) {
+                    console.warn('socket 已关闭，无法发送', url)
+                    return result
+                }
+                const payload =
+                    typeof data === 'object' && data !== null
+                        ? JSON.stringify(data)
+                        : data
+                if (ws.readyState === WS_OPEN) {
+                    ws.send(payload)
+                } else if (sendQueue.length >= SEND_QUEUE_MAX) {
+                    console.warn('socket 发送队列已满，已丢弃消息', url)
+                } else {
+                    sendQueue.push(payload)
+                }
+                return result
+            },
+            addEventListener({ messageKey, messageHandler }) {
+                if (closed) {
+                    console.warn('socket 已关闭，无法监听', url)
+                    return function unsubscribe() {}
+                }
+                assertHandler(messageHandler)
+                if (!eventMap[messageKey]) {
+                    eventMap[messageKey] = []
+                }
+                if (!eventMap[messageKey].includes(messageHandler)) {
+                    eventMap[messageKey].push(messageHandler)
+                }
+                return function unsubscribe() {
+                    result.removeEventListener({ messageKey, messageHandler })
+                }
+            },
+            addEventListeners({ configs }) {
+                const list = configs || []
+                list.forEach((config) => {
+                    result.addEventListener(config)
+                })
+                return function removeAll() {
+                    list.forEach((config) => {
+                        result.removeEventListener(config)
+                    })
+                }
+            },
+            removeEventListener({ messageKey, messageHandler }) {
+                const handlers = eventMap[messageKey]
+                if (!handlers) return
+                const next = handlers.filter((fn) => fn !== messageHandler)
+                if (next.length) {
+                    eventMap[messageKey] = next
+                } else {
+                    delete eventMap[messageKey]
+                }
+            },
+            close() {
+                destroyClient()
+            },
+            destroy() {
+                destroyClient()
+            },
+        }
+        return result
+
+        function destroyClient() {
+            if (closed) return
+            closed = true
+            sendQueue.length = 0
+            Object.keys(eventMap).forEach((key) => {
+                delete eventMap[key]
+            })
+            openHandler = null
+            closeHandler = null
+            errorHandler = null
+            if (ws) {
+                ws.onopen = null
+                ws.onmessage = null
+                ws.onerror = null
+                ws.onclose = null
+                try {
+                    ws.maxRetries = 0
+                    ws.close()
+                } catch (_) {}
+                ws = null
+            }
+        }
+
+        function flushSendQueue() {
+            if (closed || !ws) return
+            while (sendQueue.length && ws.readyState === WS_OPEN) {
+                ws.send(sendQueue.shift())
+            }
+        }
+
+        function dispatchMessage(msg) {
+            if (closed) return
+            const { data } = msg
+            if (typeof data !== 'string') return
+            const raw = data.trim()
+            if (!raw.startsWith('{')) return
+            let parsed
+            try {
+                parsed = JSON.parse(raw)
+            } catch (err) {
+                console.error('socket JSON parse error', err)
+                return
+            }
+            const resolved = resolveMessage(parsed, raw)
+            if (!resolved) return
+            const { messageKey, body } = resolved
+            const handlers = eventMap[messageKey]
+            if (handlers?.length) {
+                handlers.slice().forEach((fn) => fn(body))
+                return
+            }
+            const fallback = eventMap['*']
+            if (fallback?.length) {
+                fallback.slice().forEach((fn) => fn(body))
+            }
+        }
+
+        function resolveMessage(parsed, raw) {
+            if (typeof parseMessage === 'function') {
+                return parseMessage({ data: parsed, raw })
+            }
+            return {
+                messageKey: parsed.key ?? parsed.topic,
+                body: parsed.body ?? parsed.payload ?? parsed,
+            }
+        }
+    }
+
+    static create({ configs, isDev } = {}) {
+        const clientMap = {}
+        normalizeConfigs(configs).forEach((config) => {
+            const { key, devUrl, url } = config
+            const resolvedUrl = isDev && devUrl ? devUrl : url
+            if (!resolvedUrl) {
+                console.warn(`websocket 未配置 url，已跳过：${key}`)
+                return
+            }
+            clientMap[key] = Socket.createClient({
+                url: resolvedUrl,
+                debug: config.debug,
+                maxRetries: config.maxRetries,
+                connectionTimeout: config.connectionTimeout,
+                parseMessage: config.parseMessage,
+                onOpen: config.onOpen,
+                onClose: config.onClose,
+                onError: config.onError,
+            })
+        })
+
+        const hub = {
+            addEventListener({ socketKey, messageKey, messageHandler }) {
+                const client = getClient(socketKey)
+                return client.addEventListener({ messageKey, messageHandler })
+            },
+            removeEventListener({ socketKey, messageKey, messageHandler }) {
+                const client = getClient(socketKey)
+                client.removeEventListener({ messageKey, messageHandler })
+            },
+            send({ socketKey, data }) {
+                const client = getClient(socketKey)
+                return client.send({ data })
+            },
+            has({ socketKey }) {
+                return Boolean(clientMap[socketKey])
+            },
+            getClient({ socketKey }) {
+                return getClient(socketKey)
+            },
+            close({ socketKey }) {
+                const client = getClient(socketKey)
+                client.destroy()
+                delete clientMap[socketKey]
+            },
+            closeAll() {
+                Object.keys(clientMap).forEach((key) => {
+                    clientMap[key].destroy()
+                    delete clientMap[key]
+                })
+            },
+        }
+        return hub
+
+        function getClient(key) {
+            const client = clientMap[key]
+            if (!client) throw new Error(`对应 websocket client 不存在：${key}`)
+            return client
+        }
+    }
+}
+
+function assertHandler(messageHandler) {
+    if (typeof messageHandler !== 'function') {
+        throw new TypeError('messageHandler 必须为函数')
+    }
+}
+
+function normalizeConfigs(configs) {
+    if (!configs) return []
+    if (Array.isArray(configs)) return configs
+    if (typeof configs === 'object') return [configs]
+    return []
+}

package/src/Style.js

@@ -1,12 +1,38 @@
 import chroma from 'chroma-js';
-export default class Style {
-    static getCssVar({ varKey }) {
+import Data from './Data.js'
+import CommonStyle from '@studio-kit/utils-common/Style.js'
+export default class Style extends CommonStyle {
+    static getCssVar({ key, varKey }) {
+        if (!varKey) {
+            varKey = key
+        }
         const root = document.documentElement;
         const computedStyle = window.getComputedStyle(root);
         // 获取CSS变量的值
         const varValue = computedStyle.getPropertyValue(varKey);
         return varValue
     }
+    static setCssVar({ key, value }) {
+        // 获取:root元素（即document.documentElement）
+        const root = document.documentElement;
+
+        // 设置CSS变量
+        if (!/^\-\-/.test(key)) {
+            key = `--${key}`
+        }
+        root.style.setProperty(key, value);
+    }
+    static color(value) {
+        if (value) {
+            value = value.replace(/[\s\t\n]/g, '')
+        }
+        if (/^rgb/.test(value)) {
+            const numList = value.matchAll(/\d+/g)
+            value = [...numList];
+            console.log('value', value)
+        }
+        return chroma(value)
+    }
     static getThemeImageFilter({ themeColor, imageColor = '#000000' }) {
         const hue2 = this.createColor(themeColor).hsl()[0]
         let hue1 = this.createColor(imageColor).hsl()[0]
@@ -18,4 +44,49 @@ export default class Style {
         cssColorString = cssColorString.replace(/\s/g, '')
         return chroma(cssColorString)
     }
-}
+    static setGlobalStyle({ cssText, id }) {
+        if (!id) {
+            id = 'style-' + Data.createId()
+        }
+        // 查找是否已存在相同id的style元素
+        let style = document.getElementById(id);
+        if (style) {
+            // 如果存在，直接替换内容
+            style.textContent = cssText;
+        } else {
+            // 如果不存在，创建新的style元素
+            style = document.createElement('style');
+            style.id = id;
+            style.textContent = cssText;
+            document.head.appendChild(style);
+        }
+        return style;
+    }
+    static getSize({ value }) {
+        if (Data.isNumberOrStringNumber(value)) {
+            return value + 'px'
+        } else {
+            return value
+        }
+    }
+    static measureText({ text, style, className }) {
+        const el = document.createElement('span')
+        el.textContent = text
+        el.style.position = 'absolute'
+        el.style.visibility = 'hidden'
+        el.style.whiteSpace = 'nowrap'
+        if (className) {
+            el.className = className
+        }
+        if (style) {
+            Object.assign(el.style, style)
+        }
+        document.body.appendChild(el)
+        const rect = el.getBoundingClientRect()
+        document.body.removeChild(el)
+        return {
+            width: rect.width,
+            height: rect.height
+        }
+    }
+}

package/src/UserInput.js

@@ -1,7 +1,6 @@
 const defaultWindow = window
 const useEventListener = (target, type, listener, options) => {
     target = target || defaultWindow
-    console.log('target', target)
     target.addEventListener(type, listener, options)
     return () => target.removeEventListener(type, listener, options)
 }

package/src/cta.js

@@ -138,7 +138,7 @@ function cta(trigger, target, options, callback) {
 	dummy.style.setProperty('position', (options.relativeToWindow ? 'fixed' : 'absolute'), 'important');
 	dummy.style.setProperty('-webkit-transform-origin', 'top left', 'important');
 	dummy.style.setProperty('transform-origin', 'top left', 'important');
-	dummy.style.setProperty('transition', options.duration + 's ease');
+	dummy.style.setProperty('transition', 'transform ' + options.duration + 's ease, background .3s ease-in');
 
 	// Set dummy element's dimensions to final state.
 	dummy.style.setProperty('width', targetBounds.width + 'px', 'important');
@@ -146,7 +146,8 @@ function cta(trigger, target, options, callback) {
 	dummy.style.setProperty('left', (targetBounds.left + (options.relativeToWindow ? 0 : window.pageXOffset)) + 'px', 'important');
 	dummy.style.setProperty('top', (targetBounds.top + (options.relativeToWindow ? 0 : window.pageYOffset)) + 'px', 'important');
 	dummy.style.setProperty('background', triggerBackground, 'important');
-	dummy.style.setProperty('z-index', 1, 'important');
+	dummy.style.setProperty('z-index', 1e5, 'important');
+	dummy.style.setProperty('border-radius', getComputedStyle(trigger).borderRadius);
 
 	// Apply a reverse transform to bring back dummy element to the dimensions of the trigger/starting element.
 	// Credits: This technique is inspired by Paul Lewis: http://aerotwist.com/blog/flip-your-animations/ He is amazing!

package/src/methods/dom.js

@@ -1,13 +1,9 @@
-export function watchSizeChange(element, onChange) {
-    if (window.ResizeObserver)
-        return new ResizeObserver(onChange).observe(element)
+import DOM from '../DOM.js';
+
+export function watchSizeChange(element, onChange, options) {
+    return DOM.watchSizeChange(element, onChange, options);
 }
 
 export function unwatchSizeChange(watcher, element) {
-    if (window.ResizeObserver) {
-        if (watcher instanceof window.ResizeObserver) {
-            if (element) watcher.unobserve(element);
-            else watcher.disconnect();
-        }
-    }
-}
+    return DOM.unwatchSizeChange(watcher, element);
+}

package/src/methods/loadLib.js

@@ -1,9 +1,12 @@
 const loadingMap = {};
 const loadedMap = {};
 export default function (src, key, type) {
-    if (key && window[key]) return Promise.resolve(window['key']);
-    if (loadedMap[src]) return Promise.resolve();
+    if (key && window[key]) return Promise.resolve(window[key]);
     if (loadingMap[src]) return loadingMap[src];
+    if (Object.prototype.hasOwnProperty.call(loadedMap, src)) {
+        const cached = loadedMap[src];
+        return Promise.resolve(cached === true ? undefined : cached);
+    }
     if (/\.js$/.test(src) || type === 'js')
         return loadingMap[src] = new Promise((resolve, reject) => {
             const script = document.createElement('script');
@@ -38,4 +41,23 @@ export default function (src, key, type) {
             document.head.appendChild(link);
         });
     }
+    if (/\.json$/.test(src) || type === 'json') {
+        return loadingMap[src] = fetch(src)
+            .then((res) => {
+                if (!res.ok) {
+                    throw new Error(`加载json文件错误(src: ${src})(status: ${res.status})`);
+                }
+                return res.json();
+            })
+            .then((data) => {
+                delete loadingMap[src];
+                loadedMap[src] = data;
+                return data;
+            })
+            .catch((err) => {
+                delete loadingMap[src];
+                console.error(err);
+                throw err;
+            });
+    }
 }

package/src/types/app.d.ts

@@ -0,0 +1,67 @@
+/** 标准弹窗相对触发元素或视口的位置 */
+export type AppOpenStdWinPosition = 'center' | 'near-source';
+
+/** 标准弹窗类型 */
+export type AppOpenStdWinType = 'confirm';
+
+/**
+ * Vue 内容组件：SFC 默认导出、全局组件名或懒加载函数。
+ * 未使用 `component` 时可改用 `pageKey`（运行时映射为 component）。
+ */
+export type AppOpenStdWinComponent =
+    | string
+    | Record<string, unknown>
+    | (() => Promise<unknown>);
+
+/** 确认弹窗内组件实例（$refs 上的窗口组件） */
+export interface AppOpenStdWinConfirmComponent<TResult = unknown> {
+    getResult?: () => TResult;
+    data?: unknown;
+    [key: string]: unknown;
+}
+
+/** `APP.openStdWin` 参数（经 $bus 传给 std-wins，`props` 会映射为 `componentProps`） */
+export interface AppOpenStdWinParams<
+    TProps extends Record<string, unknown> = Record<string, unknown>,
+    TResult = unknown,
+> {
+    /** 鼠标事件，用于 `near-source` 时取 `currentTarget` 作为锚点 */
+    mouseEvent?: MouseEvent;
+    /** 锚点元素；未传且提供 `mouseEvent` 时使用 `mouseEvent.currentTarget` */
+    sourceEl?: Element;
+    /** 窗口位置 */
+    position?: AppOpenStdWinPosition;
+    /** 窗口标题 */
+    title: string;
+    /** 宽度（px 数字或如 `'60%'` 的字符串） */
+    width?: number | string;
+    /** 高度 */
+    height?: number | string;
+    /** 内容组件 */
+    component?: AppOpenStdWinComponent;
+    /** 页面/全局组件 key，与 `component` 二选一 */
+    pageKey?: string;
+    /** 传给内容组件的 props */
+    props?: TProps;
+    /** 窗口类型 */
+    type?: AppOpenStdWinType;
+    /** 确定按钮文案 */
+    confirmText?: string;
+    /** 是否显示遮罩 */
+    hasMask?: boolean;
+    /** 窗口 id；已存在则 focus 而非新建 */
+    id?: string;
+    /** 确认回调；`close` 由调用方在逻辑结束后执行 */
+    afterConfirm?: (
+        compo: AppOpenStdWinConfirmComponent<TResult>,
+        close: () => void,
+    ) => void | Promise<void>;
+    /** WinBox 挂载完成后的钩子 */
+    afterWinMounted?: (ctx: { winbox: unknown }) => void;
+}
+
+/** @alias AppOpenStdWinParams */
+export type StdAppOpenStdWinParams<
+    TProps extends Record<string, unknown> = Record<string, unknown>,
+    TResult = unknown,
+> = AppOpenStdWinParams<TProps, TResult>;

package/src/vue2-plugin.js

@@ -7,10 +7,6 @@ import {
     unwatchSizeChange,
 } from './methods/dom'
 
-import {
-    emitParentIframe
-} from './methods/message'
-
 import {
     debounce
 } from './methods/perfomance'
@@ -28,6 +24,7 @@ export default function (Vue, config = {}) {
         debounce,
     }
     const { getUserInfo, clientType, isDev } = config
+    
     const $api = {
         runtimeBaseURL: '/studio-server',
         getUserInfo,
@@ -77,7 +74,7 @@ export default function (Vue, config = {}) {
             })
         }
     })
-    Vue.prototype.$api = $api
+    Vue.prototype.$api = $api    
     Vue.prototype.$app = {
         baseUrl: '/studio-server',
         $compoPrefix: 'studio-',

package/src/methods/message.js

@@ -1,5 +0,0 @@
-export function emitParentIframe({ data, origin = '*' }) {
-    console.log('emitParentIframe', data)
-    if (window.parent) window.parent.postMessage(data, origin);
-    else console.error('对应父级iframe不存在')
-}