@lark-apaas/client-toolkit 0.1.0-alpha.1

package/lib/components/theme/util.js

@@ -0,0 +1,188 @@
+import { generate } from "@ant-design/colors";
+import { defaultDarkTheme } from "./miaoDarkTheme.js";
+import { defaultLightTheme } from "./miaoLightTheme.js";
+const generateColorPalettes = (baseColor, mode)=>{
+    const colors = generate(baseColor, {
+        theme: mode
+    });
+    return {
+        1: colors[0],
+        2: colors[1],
+        3: colors[2],
+        4: colors[3],
+        5: colors[6],
+        6: colors[5],
+        7: colors[4],
+        8: colors[6],
+        9: colors[5],
+        10: colors[4]
+    };
+};
+function generateColorPrimaryToken(colorPrimary, mode = 'light') {
+    const primaryColors = generateColorPalettes(colorPrimary, 'dark' === mode ? 'dark' : 'default');
+    return {
+        colorPrimaryBg: primaryColors[1],
+        colorPrimaryBgHover: primaryColors[2],
+        colorPrimaryBorder: primaryColors[3],
+        colorPrimaryBorderHover: primaryColors[4],
+        colorPrimaryHover: primaryColors[5],
+        colorPrimary: primaryColors[6],
+        colorPrimaryActive: primaryColors[7],
+        colorPrimaryTextHover: primaryColors[8],
+        colorPrimaryText: primaryColors[9],
+        colorPrimaryTextActive: primaryColors[10]
+    };
+}
+const generateBorderRadiusTokenSyncTailwind = (radiusBase)=>({
+        borderRadius: radiusBase,
+        borderRadiusXS: radiusBase - 4,
+        borderRadiusSM: radiusBase - 2,
+        borderRadiusLG: radiusBase + 2,
+        borderRadiusOuter: radiusBase + 4
+    });
+const generateSpacingToken = (token)=>{
+    const { sizeUnit, sizeStep } = token;
+    return {
+        sizeXXL: sizeUnit * (sizeStep + 8),
+        sizeXL: sizeUnit * (sizeStep + 4),
+        sizeLG: sizeUnit * (sizeStep + 2),
+        sizeMD: sizeUnit * (sizeStep + 1),
+        sizeMS: sizeUnit * sizeStep,
+        size: sizeUnit * sizeStep,
+        sizeSM: sizeUnit * (sizeStep - 1),
+        sizeXS: sizeUnit * (sizeStep - 2),
+        sizeXXS: sizeUnit * (sizeStep - 3)
+    };
+};
+const generateTailwindRadiusToken = (radiusRemValue)=>{
+    try {
+        const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        const radiusPx = radiusRemValue * rootFontSize;
+        const tempElement = document.createElement('div');
+        tempElement.style.position = 'absolute';
+        tempElement.style.visibility = 'hidden';
+        document.body.appendChild(tempElement);
+        tempElement.style.borderRadius = `${radiusPx}px`;
+        const computed = getComputedStyle(tempElement).borderRadius;
+        document.body.removeChild(tempElement);
+        if (computed && 'auto' !== computed && 'initial' !== computed) return {
+            type: 'select',
+            options: [
+                {
+                    value: 'rounded-none',
+                    label: 'none（0px）',
+                    rawValue: '0'
+                },
+                {
+                    value: 'rounded-sm',
+                    label: `sm (${Math.max(0, radiusPx - 4)}px)`,
+                    rawValue: `${Math.max(0, radiusPx - 4)}`
+                },
+                {
+                    value: 'rounded',
+                    label: 's (4px)',
+                    rawValue: '4'
+                },
+                {
+                    value: 'rounded-md',
+                    label: `m (${Math.max(0, radiusPx - 2)}px)`,
+                    rawValue: `${Math.max(0, radiusPx - 2)}`
+                },
+                {
+                    value: 'rounded-lg',
+                    label: `l (${radiusPx}px)`,
+                    rawValue: `${radiusPx}`
+                },
+                {
+                    value: 'rounded-xl',
+                    label: `xl (${radiusPx + 4}px)`,
+                    rawValue: `${radiusPx + 4}`
+                },
+                {
+                    value: 'rounded-2xl',
+                    label: '2xl (16px)',
+                    rawValue: '16'
+                },
+                {
+                    value: 'rounded-full',
+                    label: 'Full',
+                    rawValue: '9999'
+                }
+            ]
+        };
+        throw new Error('Browser calculation validation failed');
+    } catch (error) {
+        console.warn('Failed to get computed values from browser, falling back to default calculation:', error);
+        const radiusPx = 16 * radiusRemValue;
+        return {
+            type: 'select',
+            options: [
+                {
+                    value: 'rounded-none',
+                    label: 'none（0px）',
+                    rawValue: '0'
+                },
+                {
+                    value: 'rounded-sm',
+                    label: `sm (${Math.max(0, radiusPx - 4)}px)`,
+                    rawValue: `${Math.max(0, radiusPx - 4)}`
+                },
+                {
+                    value: 'rounded',
+                    label: 's (4px)',
+                    rawValue: '4'
+                },
+                {
+                    value: 'rounded-md',
+                    label: `m (${Math.max(0, radiusPx - 2)}px)`,
+                    rawValue: `${Math.max(0, radiusPx - 2)}`
+                },
+                {
+                    value: 'rounded-lg',
+                    label: `l (${radiusPx}px)`,
+                    rawValue: `${radiusPx}`
+                },
+                {
+                    value: 'rounded-xl',
+                    label: `xl (${radiusPx + 4}px)`,
+                    rawValue: `${radiusPx + 4}`
+                },
+                {
+                    value: 'rounded-2xl',
+                    label: '2xl (16px)',
+                    rawValue: '16'
+                },
+                {
+                    value: 'rounded-full',
+                    label: 'Full',
+                    rawValue: '9999'
+                }
+            ]
+        };
+    }
+};
+const lightColorPrimary = '#1456f0';
+const darkColorPrimary = '#336df4';
+function generateLightTheme(override) {
+    return {
+        ...defaultLightTheme,
+        token: {
+            ...defaultLightTheme.token,
+            ...generateColorPrimaryToken(override?.colorPrimary || lightColorPrimary, 'light'),
+            ...generateBorderRadiusTokenSyncTailwind(override?.borderRadius),
+            ...generateSpacingToken(override)
+        }
+    };
+}
+function generateDarkTheme(override) {
+    return {
+        ...defaultDarkTheme,
+        token: {
+            ...defaultDarkTheme.token,
+            ...generateColorPrimaryToken(override?.colorPrimary || darkColorPrimary, 'dark'),
+            ...generateBorderRadiusTokenSyncTailwind(override?.borderRadius),
+            ...generateSpacingToken(override)
+        }
+    };
+}
+export { generateDarkTheme, generateLightTheme, generateTailwindRadiusToken };

package/lib/font-family.css

@@ -0,0 +1,40 @@
+@font-face {
+  font-family: LarkChineseQuote;
+  font-weight: 300;
+  src: local(PingFangSC-Light);
+  unicode-range: U+2018, U+2019, U+201A, U+201C, U+201D, U+201E;
+}
+
+@font-face {
+  font-family: LarkChineseQuote;
+  font-weight: 400;
+  src: local(PingFangSC-Regular);
+  unicode-range: U+2018, U+2019, U+201A, U+201C, U+201D, U+201E;
+}
+
+@font-face {
+  font-family: LarkChineseQuote;
+  font-weight: 500;
+  src: local(PingFangSC-Medium);
+  unicode-range: U+2018, U+2019, U+201A, U+201C, U+201D, U+201E;
+}
+
+@font-face {
+  font-family: LarkChineseQuote;
+  font-weight: 600;
+  src: local(PingFangSC-Semibold);
+  unicode-range: U+2018, U+2019, U+201A, U+201C, U+201D, U+201E;
+}
+
+@font-face {
+  font-family: LarkEmojiFont;
+  src: local(Apple Color Emoji), local(Noto Color Emoji);
+  unicode-range: U+1F21A, U+1F250, U+1F237, U+26A0;
+}
+
+@font-face {
+  font-family: LarkHackSafariFont;
+  src: local(Helvetica Neue);
+  unicode-range: U+0;
+}
+

package/lib/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useAppInfo';
+export * from './useCurrentUserProfile';
+export * from './useIsMobile';
+export * from './useLogout';
+export * from './useTheme';

package/lib/hooks/index.js

@@ -0,0 +1,5 @@
+export * from "./useAppInfo.js";
+export * from "./useCurrentUserProfile.js";
+export * from "./useIsMobile.js";
+export * from "./useLogout.js";
+export * from "./useTheme.js";

package/lib/hooks/useAppInfo.d.ts

@@ -0,0 +1,6 @@
+export declare const useAppInfo: () => {
+    appName: string;
+    appLogo: string;
+    name?: string;
+    avatar?: string;
+};

package/lib/hooks/useAppInfo.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import { getAppInfo } from "../integrations/getAppInfo.js";
+const useAppInfo = ()=>{
+    const [appInfo, setAppInfo] = useState({});
+    useEffect(()=>{
+        const handleMetaInfoChanged = async ()=>{
+            setAppInfo(await getAppInfo());
+        };
+        handleMetaInfoChanged();
+        window.addEventListener('MiaoDaMetaInfoChanged', handleMetaInfoChanged);
+        return ()=>{
+            window.removeEventListener('MiaoDaMetaInfoChanged', handleMetaInfoChanged);
+        };
+    }, []);
+    return {
+        ...appInfo,
+        appName: appInfo.name,
+        appLogo: appInfo.avatar
+    };
+};
+export { useAppInfo };

package/lib/hooks/useCurrentUserProfile.d.ts

@@ -0,0 +1,12 @@
+import { IUserProfile } from '../apis/udt-types';
+export interface ICompatibilityUserProfile extends IUserProfile {
+    /**
+     * @deprecated please use `name`
+     */
+    userName: string;
+    /**
+     * @deprecated please use `avatar`
+     */
+    userAvatar: string;
+}
+export declare const useCurrentUserProfile: () => ICompatibilityUserProfile;

package/lib/hooks/useCurrentUserProfile.js

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { logger } from "../logger/index.js";
+import { getCurrentUserProfile } from "../integrations/getCurrentUserProfile.js";
+import { getDataloom } from "../integrations/dataloom.js";
+import { isSparkRuntime } from "../utils/utils.js";
+function getCompatibilityUserProfile() {
+    const userInfo = getCurrentUserProfile();
+    return {
+        ...userInfo,
+        userName: userInfo.name,
+        userAvatar: userInfo.avatar
+    };
+}
+const useCurrentUserProfile = ()=>{
+    const [userInfo, setUserInfo] = useState(()=>getCompatibilityUserProfile());
+    useEffect(()=>{
+        let handleMetaInfoChanged;
+        if (isSparkRuntime()) {
+            (async ()=>{
+                const dataloom = await getDataloom();
+                const result = await dataloom.service.session.getUserInfo();
+                const userInfo = result?.data?.user_info;
+                setUserInfo({
+                    user_id: userInfo?.user_id?.toString(),
+                    email: userInfo?.email,
+                    name: userInfo?.name?.[0]?.text,
+                    avatar: userInfo?.avatar?.image?.large,
+                    userName: userInfo?.name?.[0]?.text,
+                    userAvatar: userInfo?.avatar?.image?.large
+                });
+            })();
+            handleMetaInfoChanged = async ()=>{
+                const dataloom = await getDataloom();
+                const result = await dataloom.service.session.getUserInfo();
+                const userInfo = result?.data?.user_info;
+                const newUserInfo = {
+                    user_id: userInfo?.user_id?.toString(),
+                    email: userInfo?.email,
+                    name: userInfo?.name?.[0]?.text,
+                    avatar: userInfo?.avatar?.image?.large,
+                    userName: userInfo?.name?.[0]?.text,
+                    userAvatar: userInfo?.avatar?.image?.large
+                };
+                logger.info('MiaoDaMetaInfoChanged', newUserInfo);
+                setUserInfo(newUserInfo);
+            };
+        } else handleMetaInfoChanged = ()=>{
+            logger.info('MiaoDaMetaInfoChanged', getCompatibilityUserProfile());
+            setUserInfo(getCompatibilityUserProfile());
+        };
+        window.addEventListener('MiaoDaMetaInfoChanged', handleMetaInfoChanged);
+        return ()=>{
+            window.removeEventListener('MiaoDaMetaInfoChanged', handleMetaInfoChanged);
+        };
+    }, []);
+    return userInfo;
+};
+export { useCurrentUserProfile };

package/lib/hooks/useIsMobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/lib/hooks/useIsMobile.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { debounce } from "lodash";
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+    const [isMobile, setIsMobile] = react.useState(window.innerWidth < MOBILE_BREAKPOINT);
+    react.useEffect(()=>{
+        const handleResize = ()=>{
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        const debouncedHandleResize = debounce(handleResize, 200);
+        window.addEventListener('resize', debouncedHandleResize);
+        handleResize();
+        return ()=>{
+            window.removeEventListener('resize', debouncedHandleResize);
+            debouncedHandleResize.cancel();
+        };
+    }, []);
+    return isMobile;
+}
+export { useIsMobile };

package/lib/hooks/useLogout.d.ts

@@ -0,0 +1,4 @@
+export declare function useLogout(): {
+    handlerLogout: () => Promise<void>;
+    isLoading: boolean;
+};

package/lib/hooks/useLogout.js

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { getDataloom } from "../integrations/dataloom.js";
+import { isSparkRuntime } from "../utils/utils.js";
+function useLogout() {
+    const [isLoading, setIsLoading] = useState(false);
+    async function handlerLogout() {
+        if ('production' !== process.env.NODE_ENV) return void console.log('只有生产环境才执行登出');
+        if (isSparkRuntime()) {
+            setIsLoading(true);
+            try {
+                const dataloom = await getDataloom();
+                await dataloom.service.session.signOut();
+            } catch (error) {
+                console.error('登出失败', error);
+            } finally{
+                setIsLoading(false);
+            }
+            return;
+        }
+        setIsLoading(true);
+        try {
+            await fetch('/ai/api/ui/page/logout', {
+                method: 'GET'
+            });
+            window.location.reload();
+        } catch (error) {
+            console.error('登出失败', error);
+        } finally{
+            setIsLoading(false);
+        }
+    }
+    return {
+        handlerLogout,
+        isLoading
+    };
+}
+export { useLogout };

package/lib/hooks/useTheme.d.ts

@@ -0,0 +1,4 @@
+export declare const useTheme: () => {
+    theme: import("../types").ITheme;
+    setTheme: (theme: import("../types").ITheme) => void;
+};

package/lib/hooks/useTheme.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ThemeProviderContext } from "../components/theme/index.js";
+const useTheme = ()=>{
+    const context = useContext(ThemeProviderContext);
+    if (void 0 === context) throw new Error('useTheme 必须在 ThemeProvider 内使用');
+    return context;
+};
+export { useTheme };

package/lib/hooks/useUpdatingRef.d.ts

@@ -0,0 +1 @@
+export declare function useUpdatingRef<T>(value: T): import("react").MutableRefObject<T>;

package/lib/hooks/useUpdatingRef.js

@@ -0,0 +1,7 @@
+import { useRef } from "react";
+function useUpdatingRef(value) {
+    const ref = useRef(value);
+    ref.current = value;
+    return ref;
+}
+export { useUpdatingRef };

package/lib/index.css

@@ -0,0 +1,5 @@
+@import "./theme-layer.css";
+@import "./tailwind-theme.css";
+@import "./override.css";
+@import "./font-family.css";
+

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    version: string;
+};
+export default _default;

package/lib/index.js

@@ -0,0 +1,5 @@
+import { version } from "../package.json";
+const src = {
+    version: version
+};
+export { src as default };

package/lib/inspector.dev.css

@@ -0,0 +1,10 @@
+@source inline("text-{xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl,9xl}");
+
+@source inline("{bg,text,border}-{blue,pink,neutral,red,orange,violet,lime,yellow,green,teal,cyan,indigo,purple,amber,emerald,slate}-{50,{100..900..100},950}");
+
+@source inline("{bg,text,border}-{blue,pink,neutral,red,orange,violet,lime,yellow,green,teal,cyan,indigo,purple,amber,emerald,slate}");
+
+@source inline("{bg,text,border}-neutral-{00,1000}");
+
+@source inline("rounded-{none,sm,md,lg,xl,full}");
+

package/lib/integrations/dataloom.d.ts

@@ -0,0 +1,2 @@
+/** 获取dataloom实例 */
+export declare function getDataloom(): Promise<import("@data-loom/js").DataloomClient<any, "public", any>>;

package/lib/integrations/dataloom.js

@@ -0,0 +1,32 @@
+import { splitWorkspaceUrl } from "../utils/url.js";
+import { createClient } from "@data-loom/js";
+import { getAppId } from "../utils/getAppId.js";
+import { getInitialInfo } from "../utils/getInitialInfo.js";
+const createDataLoomClient = (url, pat)=>{
+    if (!url) return null;
+    const { baseUrl, workspace } = splitWorkspaceUrl(url);
+    const appId = getAppId(window.location.pathname);
+    return createClient(baseUrl, pat, workspace, {
+        global: {
+            enablePostgresBuilderLog: 'production' !== process.env.NODE_ENV,
+            requestRateLimit: 'production' !== process.env.NODE_ENV ? 100 : void 0,
+            brandName: 'miaoda',
+            appId,
+            onError: (error, dataloomInstance)=>{
+                if (error?.status === 401) {
+                    if (error?.code === 'k_ident_013001') dataloomInstance.service.session.redirectToLogin();
+                }
+            }
+        }
+    });
+};
+let dataloom = null;
+async function getDataloom() {
+    if (dataloom) return dataloom;
+    const info = await getInitialInfo();
+    const DATALOOM_CLIENT_URL = info?.app_runtime_extra?.url;
+    const DATALOOM_PAT = info?.app_runtime_extra?.token;
+    dataloom = createDataLoomClient(DATALOOM_CLIENT_URL, DATALOOM_PAT);
+    return dataloom;
+}
+export { getDataloom };

package/lib/integrations/generateImage.d.ts

@@ -0,0 +1 @@
+export declare function generateImage(prompt: string, size?: string, headers?: Record<string, string>): Promise<any>;

package/lib/integrations/generateImage.js

@@ -0,0 +1,47 @@
+import { getAppId } from "../utils/getAppId.js";
+import { getCsrfToken } from "../utils/getCsrfToken.js";
+import { getEnvPath } from "../utils/getEnvPath.js";
+import { isSparkRuntime } from "../utils/utils.js";
+async function generateImage(prompt, size = '1024x1024', headers = {}) {
+    const appId = getAppId(window.location.pathname);
+    if (!appId) return {
+        code: 1,
+        msg: 'appId is required',
+        data: {}
+    };
+    const defaultHeaders = {
+        'Content-Type': 'application/json'
+    };
+    const mergedHeaders = {
+        ...defaultHeaders,
+        ...headers,
+        'X-Kunlun-Token': window.token,
+        'x-miaoda-token': window.MIAODA_BUILTIN_TTT,
+        'x-lgw-csrf-token': window.lgw_csrf_token,
+        ...window.CSRF_HEADERS || {}
+    };
+    if (isSparkRuntime()) {
+        mergedHeaders['X-Suda-Csrf-Token'] = getCsrfToken();
+        const response = await fetch(`${window.location.origin}/spark/b/${appId}/text2image`, {
+            method: 'POST',
+            headers: mergedHeaders,
+            credentials: 'include',
+            body: JSON.stringify({
+                prompt,
+                size
+            })
+        });
+        return await response.json();
+    }
+    const response = await fetch(`${window.location.origin}/ai/api/${getEnvPath()}/v1/apps/${appId}/text2image`, {
+        method: 'POST',
+        headers: mergedHeaders,
+        credentials: 'include',
+        body: JSON.stringify({
+            prompt,
+            size
+        })
+    });
+    return await response.json();
+}
+export { generateImage };

package/lib/integrations/generateTextStream.d.ts

@@ -0,0 +1,21 @@
+interface GenerateTextOptions {
+    text: string;
+    thinking_type?: 'enabled' | 'disabled';
+    headers?: Record<string, string>;
+}
+interface GenerateTextResult {
+    content: string;
+    reasoning_content: string;
+    success: boolean;
+    error?: string;
+}
+/**
+ * 文生文 - 流式版本
+ * 支持实时接收生成内容的回调
+ */
+export declare function generateTextStream(options: GenerateTextOptions, onChunk?: (chunk: {
+    content: string;
+    reasoning_content: string;
+    finished: boolean;
+}) => void): Promise<GenerateTextResult>;
+export {};