@studio-kit/utils-browser 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-kit/utils-browser",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "type": "module",
   "main": "./src/index.js",
@@ -14,7 +14,10 @@
     "@studio-kit/utils-common": "^2.0.1",
     "axios": "^1.7.9",
     "chroma-js": "^3.1.2",
-    "nanoid": "^5.1.2"
+    "clipboardy": "^5.3.1",
+    "file-saver": "^2.0.5",
+    "nanoid": "^5.1.2",
+    "reconnecting-websocket": "^4.4.0"
   },
   "exports": {
     ".": "./src/index.js",

package/src/APP.js

@@ -0,0 +1,159 @@
+import Data from "./Data";
+import HTTP from "./HTTP.js";
+import clipboard from 'clipboardy';
+export default class APP {
+    static USER_INFO_KEY = '$userInfo'
+    static clipboard = clipboard
+    /**
+     * 以 Vue Router hash 模式在新标签页打开路由（#/path?query）
+     * @param {string} path 路由路径，如 /workflow-menu
+     * @param {Record<string, unknown>} [query] hash 查询参数
+     * @param {string} [target] window.open 的 target，默认 _blank
+     * @returns {Window | null}
+     */
+    static openHashUrl({ path, query, target = '_blank', name = '新页面' } = {}) {
+        let routePath = path || '/'
+        if (routePath.startsWith('#')) {
+            routePath = routePath.slice(1)
+        }
+        if (!routePath.startsWith('/')) {
+            routePath = `/${routePath}`
+        }
+        const queryStr = query && Object.keys(query).length
+            ? HTTP.stringifyUrlQuery({ query })
+            : ''
+        const hash = queryStr ? `${routePath}?${queryStr}` : routePath
+        const base = location.href.replace(/#.*$/, '')
+        const url = `${base}#${hash}`
+        const openPayload = {
+            target: "3",
+            id: new Date().getTime(),
+            openType: "iframe",
+            name: name,
+            accessPath: url
+        }
+        let opened = false
+        try {
+            if (window.parent && window.parent !== window && window.parent.openNewPage) {
+                window.parent.openNewPage(openPayload)
+                opened = true
+            }
+        } catch (_) {}
+        if (!opened) {
+            const openNewPage = APP.getTopProp('openNewPage')
+            if (openNewPage) {
+                openNewPage(openPayload)
+            } else {
+                window.open(url, "_blank");
+            }
+        }
+    }
+    /**
+     * 安全读取当前窗或 top 上的命名属性，跨域时返回 fallback，不抛错
+     * @param {string} key 属性名，如 'electronAPI' | 'openNewPage' | 'STD_REALTIME'
+     * @param {{ fallback?: any }} [options]
+     * @returns {any}
+     */
+    static getTopProp(key, { fallback } = {}) {
+        if (typeof window === 'undefined' || !key) {
+            return fallback
+        }
+        try {
+            const local = window[key]
+            if (local != null) {
+                return local
+            }
+        } catch (_) {}
+        try {
+            const top = window.top
+            if (top && top !== window) {
+                const value = top[key]
+                if (value != null) {
+                    return value
+                }
+            }
+        } catch (_) {
+            // Blocked a frame with origin "..." from accessing a cross-origin frame
+        }
+        return fallback
+    }
+    static openStdWin(params) {
+        APP.$bus.$emit("openStdWin", params)
+    }
+    /** 通过全局 $bus 触发 toast.loading */
+    static showLoadingToast(msg) {
+        APP.$bus?.$emit('showLoadingToast', msg)
+    }
+    /** 通过全局 $bus 触发 toast.success（字符串或参数对象） */
+    static showSuccessToast(params) {
+        APP.$bus?.$emit('showSuccessToast', params)
+    }
+    /** 通过全局 $bus 触发 toast.error（字符串或含 message 的对象） */
+    static showErrorToast(params) {
+        APP.$bus?.$emit('showErrorToast', params)
+    }
+    /** 通过全局 $bus 触发 toast.warning */
+    static showWarningToast(params) {
+        APP.$bus?.$emit('showErrorToast', params)
+        // APP.$bus?.$emit('showWarningToast', params)
+    }
+    /** 通过全局 $bus 触发 toast.confirm */
+    static showConfirm(config) {
+        APP.$bus?.$emit('showConfirm', config)
+    }
+    static async sleep(ms) {
+        return new Promise((resolve, reject) => {
+            setTimeout(resolve, ms)
+        })
+    }
+    static copyText(text) {
+        return clipboard.write(text)
+    }
+    static emitParentIframe({ data, origin = '*', topic, payload }) {
+        if (topic && payload) {
+            data = {
+                topic,
+                payload,
+            }
+        }
+        console.log('emitParentIframe', data)
+        try {
+            if (window.parent) window.parent.postMessage(data, origin);
+            else console.error('对应父级iframe不存在')
+        } catch (error) {
+            console.error(error)
+        }
+    }
+    static setUserInfo({ userInfo }) {
+        APP.userInfo = userInfo
+        Data.setCache({
+            key: APP.USER_INFO_KEY,
+            value: userInfo,
+        })
+        if (userInfo?.token) {
+            HTTP.setToken({ token: userInfo.token })
+        } else {
+            HTTP.clearToken()
+        }
+    }
+    static getUserInfo() {
+        if (APP.userInfo) {
+            return APP.userInfo
+        } else {
+            return Data.getCache({
+                key: APP.USER_INFO_KEY,
+            })
+        }
+    }
+    static getApiBaseUrl() {
+        return window.LV_API_BASE_URL || window.$std_api_base_url || '/studio-server'
+    }
+    static runCode({ code, args }) {
+        try {
+            const fn = new Function(code)
+            return fn.call(args)
+        } catch (error) {
+            console.error('run code error:', error)
+        }
+    }
+}

package/src/DOM.js

@@ -1,19 +1,36 @@
+import Perf from './Perf.js';
+
 export default class DOM {
     // 获取坐标在元素中的相对位置
     static getOffsetPositionInElement({
         targetElement, // 对应DOM元素
         absolutePosition, // 相对于屏幕左上角的坐标 { x:..., y:.. }
     }) {
-        // 获取元素在视口中的位置信息
+        // // 获取元素在视口中的位置信息
         const rect = targetElement.getBoundingClientRect();
-        // 计算坐标相对于元素左上角的位置
-        const x = absolutePosition.x - rect.left;
-        const y = absolutePosition.y - rect.top;
-        let isOutside = false
-        if (x < 0 || y < 0 || x > rect.right || y > rect.bottom) {
-            isOutside = true
-        }
-        return { x, y, isOutside };
+        // // 计算坐标相对于元素左上角的位置
+        // const x = absolutePosition.x - rect.left;
+        // const y = absolutePosition.y - rect.top;
+        // let isOutside = false
+        // if (x < 0 || y < 0 || x > rect.right || y > rect.bottom) {
+        //     isOutside = true
+        // }
+        // return { x, y, isOutside };
+        // 计算视口坐标系下的相对位置
+        const viewportX = absolutePosition.x - rect.left;
+        const viewportY = absolutePosition.y - rect.top;
+
+        // 判断是否在可视区域外（基于元素布局尺寸）
+        const isOutside = viewportX < 0 || viewportY < 0 ||
+            viewportX > rect.width ||
+            viewportY > rect.height;
+
+        // 转换为包含元素自身滚动的内容坐标系
+        return {
+            x: viewportX + targetElement.scrollLeft,
+            y: viewportY + targetElement.scrollTop,
+            isOutside
+        };
     }
     static getBoundingClientRect({ targetEl, wrapperEl, needAutoDetectParent }) {
         if (needAutoDetectParent) {
@@ -24,7 +41,8 @@ export default class DOM {
         return {
             left: left - wrapperBoundingClientRect.left,
             top: top - wrapperBoundingClientRect.top,
-            right, bottom,
+            right: right - wrapperBoundingClientRect.left,
+            bottom: bottom - wrapperBoundingClientRect.top,
             width: targetEl.offsetWidth,
             height: targetEl.offsetHeight
         }
@@ -48,9 +66,39 @@ export default class DOM {
         const style = window.getComputedStyle(element);
         return style.overflow === 'scroll' || style.overflow === 'auto';
     }
-    static watchSizeChange(element, onChange) {
-        if (window.ResizeObserver)
-            return new ResizeObserver(onChange).observe(element)
+    /**
+     * @param {Element} element
+     * @param {(entries: ResizeObserverEntry[]) => void} onChange
+     * @param {{ debounce?: boolean, debounceDelay?: number }} [options]
+     *        debounce 默认 true；为 false 时每次尺寸回调立即执行 onChange
+     */
+    static watchSizeChange(element, onChange, options = {}) {
+        if (!window.ResizeObserver || !element || typeof onChange !== 'function') {
+            return null;
+        }
+        const debounceEnabled = options.debounce !== false;
+        const debounceDelay = options.debounceDelay ?? 100;
+        let notify = onChange;
+        if (debounceEnabled) {
+            notify = Perf.debounce({ callback: onChange, delay: debounceDelay });
+        }
+        const ro = new ResizeObserver((entries) => {
+            notify(entries);
+        });
+        if (typeof notify.cancel === 'function') {
+            const disconnectOrig = ro.disconnect.bind(ro);
+            const unobserveOrig = ro.unobserve.bind(ro);
+            ro.disconnect = () => {
+                notify.cancel();
+                disconnectOrig();
+            };
+            ro.unobserve = (target) => {
+                notify.cancel();
+                unobserveOrig(target);
+            };
+        }
+        ro.observe(element);
+        return ro;
     }
     static unwatchSizeChange(watcher, element) {
         if (window.ResizeObserver) {
@@ -65,4 +113,43 @@ export default class DOM {
         styleDom.innerHTML = code
         document.head.appendChild(styleDom)
     }
+    static getSizeUnit({ size }) {
+        if (typeof size === 'string') {
+            return size[size.length - 1]
+        }
+    }
+    static getRelativePositionedParent({ element }) {
+        let parent = element.parentElement;
+        while (parent) {
+            const style = window.getComputedStyle(parent);
+            if (style.position !== 'static') {
+                return parent;
+            }
+            if (document.body === parent) {
+                return parent
+            }
+            parent = parent.parentElement;
+        }
+        return parent
+    }
+    // 去除元素flex属性
+    static removeFlexStyle({ element }) {
+        if (!element) return;
+        if (DOM.checkHasFlexStyle({ element })) {
+            element.style.flex = '';
+        }
+    }
+    static findSiblingWithFlexStyle({ element }) {
+        const siblings = Array.from(element.parentElement.children);
+        for (const sibling of siblings) {
+            if (sibling !== element && DOM.checkHasFlexStyle({ element: sibling })) {
+                return sibling;
+            }
+        }
+    }
+    static checkHasFlexStyle({ element }) {
+        const computedStyle = window.getComputedStyle(element);
+        const flexValue = computedStyle.flex;
+        return flexValue === '1 1 0%' || flexValue === '1';
+    }
 }

package/src/Data.js

@@ -1,2 +1,18 @@
-import Data from '@studio-kit/utils-common/Data.js'
-export default Data
+import CommonData from '@studio-kit/utils-common/Data.js'
+export default class Data extends CommonData {
+    static getCache({ key, defaultValue }) {
+        let value = localStorage.getItem(key)
+        value = this.maybeJSON({ value })
+        if (!value) {
+            return defaultValue
+        }
+        return value
+    }
+    static setCache({ key, value }) {
+        if (typeof value === 'object' && value) {
+            value = JSON.stringify(value)
+        }
+        localStorage.setItem(key, value)
+        return value
+    }
+}

package/src/DateConfig.js

@@ -0,0 +1,197 @@
+import DateTime from './DateTime.js'
+
+const DATE_UNIT = {
+    YEAR: 'year',
+    MONTH: 'month',
+    DAY: 'day',
+    HOUR: 'hour',
+    MINUTE: 'minute',
+    SECOND: 'second',
+}
+
+const DATE_CONFIG_TYPE = {
+    RELATIVE: 'diff',
+    FIXED: 'fixed',
+}
+
+const UNITS_ORDER = [
+    DATE_UNIT.YEAR,
+    DATE_UNIT.MONTH,
+    DATE_UNIT.DAY,
+    DATE_UNIT.HOUR,
+    DATE_UNIT.MINUTE,
+    DATE_UNIT.SECOND,
+]
+
+const MOMENT_UNIT_MAP = {
+    [DATE_UNIT.YEAR]: 'year',
+    [DATE_UNIT.MONTH]: 'month',
+    [DATE_UNIT.DAY]: 'day',
+    [DATE_UNIT.HOUR]: 'hour',
+    [DATE_UNIT.MINUTE]: 'minute',
+    [DATE_UNIT.SECOND]: 'second',
+}
+
+const DEFAULT_DATE_VALUE_FORMAT = 'YYYY-MM-DD HH:mm:ss'
+
+/** 与 editor EdtParamTypeEnum 中带 dateFormat 的项保持一致 */
+const DATE_PARAM_FORMAT_MAP = {
+    datetime: 'YYYY-MM-DD HH:mm:ss',
+    date: 'YYYY-MM-DD',
+    'year-month': 'YYYY-MM',
+    year: 'YYYY',
+    month: 'MM',
+    day: 'DD',
+    hour: 'HH',
+    minute: 'mm',
+}
+
+export function getDateParamFormatMap() {
+    return { ...DATE_PARAM_FORMAT_MAP }
+}
+
+export function getDateConfigParam({ dateConfig, paramList = [] } = {}) {
+    if (dateConfig?.baseType !== 'param') return null
+    return (paramList || []).find((item) => {
+        return item && (
+            (dateConfig.paramId && item.id === dateConfig.paramId)
+            || (dateConfig.paramKey && item.key === dateConfig.paramKey)
+        )
+    }) || null
+}
+
+export function getDateConfigParamFormat({ dateConfig, paramList = [] } = {}) {
+    const param = getDateConfigParam({ dateConfig, paramList })
+    return param ? DATE_PARAM_FORMAT_MAP[param.valueType] || null : null
+}
+
+export function getDateConfigValueFormat({
+    dateConfig,
+    paramList = [],
+    fieldType,
+    dateType,
+    defaultFormat = DEFAULT_DATE_VALUE_FORMAT,
+} = {}) {
+    return getDateConfigParamFormat({ dateConfig, paramList })
+        || (fieldType === 'date' && dateType ? DATE_PARAM_FORMAT_MAP[dateType] : null)
+        || defaultFormat
+}
+
+export function parseDateValueByFormat(value, format) {
+    if (value === undefined || value === null || value === '') return null
+    if (value instanceof Date) return value
+    const text = String(value).trim()
+    if (!text) return null
+    if (format === 'YYYY' && /^\d{4}$/.test(text)) {
+        return new Date(Number(text), 0, 1)
+    }
+    if (format === 'MM' && /^\d{1,2}$/.test(text)) {
+        return new Date(new Date().getFullYear(), Number(text) - 1, 1)
+    }
+    if (format === 'DD' && /^\d{1,2}$/.test(text)) {
+        return new Date(new Date().getFullYear(), new Date().getMonth(), Number(text))
+    }
+    if (format === 'HH' && /^\d{1,2}$/.test(text)) {
+        const date = new Date()
+        date.setHours(Number(text), 0, 0, 0)
+        return date
+    }
+    if (format === 'mm' && /^\d{1,2}$/.test(text)) {
+        const date = new Date()
+        date.setMinutes(Number(text), 0, 0)
+        return date
+    }
+    if (format === 'YYYY-MM' && /^(\d{4})-(\d{1,2})$/.test(text)) {
+        const matched = text.match(/^(\d{4})-(\d{1,2})$/)
+        if (matched) {
+            return new Date(Number(matched[1]), Number(matched[2]) - 1, 1)
+        }
+    }
+    const date = new Date(text.replace(/-/g, '/'))
+    return isNaN(date.getTime()) ? null : date
+}
+
+export function getDateConfigBaseDate({ dateConfig, paramList = [] } = {}) {
+    const param = getDateConfigParam({ dateConfig, paramList })
+    if (!param?.defaultDateConfig) return null
+    const paramFormat = getDateConfigParamFormat({ dateConfig, paramList })
+    const paramDate = computeDateFromConfig(param.defaultDateConfig)
+    if (!paramDate) return null
+    const paramValue = DateTime.format({
+        value: paramDate,
+        format: paramFormat || DEFAULT_DATE_VALUE_FORMAT,
+    })
+    return parseDateValueByFormat(paramValue, paramFormat)
+}
+
+export function getDateConfigValue({
+    dateConfig,
+    paramList = [],
+    fieldType,
+    dateType,
+    defaultFormat = DEFAULT_DATE_VALUE_FORMAT,
+} = {}) {
+    if (!dateConfig) return ''
+    const baseDate = dateConfig.baseType === 'param'
+        ? getDateConfigBaseDate({ dateConfig, paramList })
+        : null
+    if (dateConfig.baseType === 'param' && !baseDate) return ''
+    const date = computeDateFromConfig(dateConfig, baseDate || undefined)
+    if (!date) return ''
+    return DateTime.format({
+        value: date,
+        format: getDateConfigValueFormat({
+            dateConfig,
+            paramList,
+            fieldType,
+            dateType,
+            defaultFormat,
+        }),
+    }) || ''
+}
+
+/**
+ * 根据单日期配置（相对/固定）计算相对于当前时间的日期，用于展示
+ * @param {{ year?, month?, day?, hour?, minute?, second? }} config
+ * @returns {Date | null}
+ */
+export function computeDateFromConfig(config, baseDate) {
+    if (!config) return null
+    const m = baseDate ? DateTime.moment(baseDate) : DateTime.moment()
+    if (typeof m.isValid === 'function' && !m.isValid()) return null
+    for (const unitKey of UNITS_ORDER) {
+        const item = config[unitKey]
+        if (!item) continue
+        const momUnit = MOMENT_UNIT_MAP[unitKey]
+        if (item.type === DATE_CONFIG_TYPE.RELATIVE) {
+            const diff = item.diff ?? 0
+            if (diff !== 0) {
+                if (momUnit === 'day') {
+                    const before = m.clone()
+                    m.add(diff, momUnit)
+                    if (m.month() !== before.month() || m.year() !== before.year()) {
+                        // m.set(before).endOf('month');
+                    } else {
+                        const lastDay = DateTime.getLastDayOfMonth(m.toDate())
+                        m.date(Math.min(m.date(), lastDay))
+                    }
+                } else {
+                    m.add(diff, momUnit)
+                }
+            }
+        } else if (item.type === DATE_CONFIG_TYPE.FIXED) {
+            const v = item.fixed
+            if (v != null) {
+                if (momUnit === 'month') {
+                    m.month(Number(v) - 1)
+                } else if (momUnit === 'day') {
+                    const lastDay = DateTime.getLastDayOfMonth(m.toDate())
+                    m.date(Math.min(Number(v), lastDay))
+                } else {
+                    m.set(momUnit, Number(v))
+                }
+            }
+        }
+    }
+    return m.toDate()
+}

package/src/DateTime.js

@@ -0,0 +1,2 @@
+import DateTime from '@studio-kit/utils-common/DateTime.js'
+export default DateTime

package/src/Effect.js

@@ -1,6 +1,9 @@
 import cta from "./cta";
 export default class Effect {
-    static morph({ sourceEl, targetEl, duration }) {
+    static morph({ sourceEl, targetEl, duration, onFinish }) {
+        if (onFinish) {
+            setTimeout(onFinish, duration * 1e3)
+        }
         return cta(sourceEl, targetEl, {
             duration, // seconds
         });

package/src/EventBus.js

@@ -0,0 +1,2 @@
+import EventBus from '@studio-kit/utils-common/EventBus.js'
+export default EventBus