@lark-apaas/client-toolkit 1.1.36 → 1.1.37-alpha.31

package/README.md

@@ -6,3 +6,71 @@
 
 * 导出所有对外暴露的 API 和组件，并通过 npm exports 来控制
 * 其他目录作为 internal 实现，不对外暴露
+
+### auth 目录
+
+* 包含与权限相关的 API 和组件
+
+
+### 开发组件 - 使用 CanRole 组件 (推荐)
+
+```tsx
+import { CanRole } from '@lark-apaas/client-toolkit/auth';
+
+function Home() {
+  return (
+    <div>
+      <CanRole roles={['role_admin']}>
+        <div>管理员按钮</div>
+      </CanRole>
+      <CanRole roles={['role_admin', 'role_editor']}>
+        <div>编辑按钮</div>
+      </CanRole>
+    </div>
+  );
+}
+```
+
+### 开发组件 - 使用 AbilityContext 处理复杂场景
+
+```tsx
+import { useContext } from 'react';
+import { AbilityContext, ROLE_SUBJECT } from '@lark-apaas/client-toolkit/auth';
+
+function Home() {
+  const ability = useContext(AbilityContext);
+  return (
+    <div>
+      {ability.can('role_admin', ROLE_SUBJECT) || ability.can('role_editor', ROLE_SUBJECT) ? (
+        <div>可见的仪表盘</div>
+      ) : null}
+    </div>
+  );
+}
+```
+
+### 开发组件 - 进阶示例
+
+### 菜单按权限过滤
+
+```tsx
+import { useContext } from 'react';
+import { AbilityContext, ROLE_SUBJECT } from '@lark-apaas/client-toolkit/auth';
+
+const menus = [
+  { name: 'Dashboard', path: '/dashboard', p: { action: 'role_admin', subject: ROLE_SUBJECT } },
+  { name: 'Users', path: '/users', p: { action: 'role_editor', subject: ROLE_SUBJECT } },
+  { name: 'Settings', path: '/settings', p: { action: 'role_admin', subject: ROLE_SUBJECT } },
+];
+
+function Nav() {
+  const ability = useContext(AbilityContext);
+  return (
+    <nav>
+      {menus.map(m => ability.can(m.p.action, m.p.subject) && (
+        <a key={m.path} href={m.path}>{m.name}</a>
+      ))}
+    </nav>
+  );
+} 
+```

package/lib/apis/components/Avatar.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Avatar components re-exported from ui/avatar for public API.
+ */
+export { Avatar, AvatarImage, AvatarFallback } from '../../components/ui/avatar';

package/lib/apis/components/Avatar.js

@@ -0,0 +1,2 @@
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/ui/avatar.js";
+export { Avatar, AvatarFallback, AvatarImage };

package/lib/apis/components/NavLink.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { type NavLinkProps } from 'react-router-dom';
+/**
+ * Enhanced NavLink component that extends react-router-dom's NavLink
+ * with support for hash links (anchor navigation) and smooth scrolling.
+ */
+declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export { NavLink };
+export type { NavLinkProps };

package/lib/apis/components/NavLink.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { NavLink, useLocation, useNavigate } from "react-router-dom";
+const NavLink_NavLink = /*#__PURE__*/ forwardRef(({ to, children, className, style, ...props }, ref)=>{
+    const isHashLink = 'string' == typeof to && to.startsWith('#');
+    const location = useLocation();
+    const navigate = useNavigate();
+    if (isHashLink) {
+        const handleClick = (e)=>{
+            e.preventDefault();
+            const element = document.querySelector(to);
+            if (element) element.scrollIntoView({
+                behavior: 'smooth'
+            });
+            navigate(to);
+        };
+        const isActive = location.hash === to;
+        const renderProps = {
+            isActive,
+            isPending: false,
+            isTransitioning: false
+        };
+        const resolvedClassName = 'function' == typeof className ? className(renderProps) : className;
+        const resolvedStyle = 'function' == typeof style ? style(renderProps) : style;
+        const { caseSensitive, end, replace, state, preventScrollReset, relative, viewTransition, ...restProps } = props;
+        return /*#__PURE__*/ jsx("a", {
+            href: to,
+            onClick: handleClick,
+            ref: ref,
+            className: resolvedClassName,
+            style: resolvedStyle,
+            ...restProps,
+            children: 'function' == typeof children ? children(renderProps) : children
+        });
+    }
+    return /*#__PURE__*/ jsx(NavLink, {
+        to: to,
+        ref: ref,
+        className: className,
+        style: style,
+        onClick: ()=>(document.getElementById('rootContainer') || window)?.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            }),
+        ...props,
+        children: children
+    });
+});
+NavLink_NavLink.displayName = 'NavLink';
+export { NavLink_NavLink as NavLink };

package/lib/apis/components/TruncatedTitle.d.ts

@@ -0,0 +1,5 @@
+/**
+ * TruncatedTitle component - displays truncated text with a tooltip when overflowed.
+ * This is an alias for OverflowTooltipText for semantic naming in layout components.
+ */
+export { OverflowTooltipText, OverflowTooltipText as TruncatedTitle, type OverflowTooltipTextProps, type OverflowTooltipTextProps as TruncatedTitleProps, } from '../../components/ui/overflow-tooltip-text';

package/lib/apis/components/TruncatedTitle.js

@@ -0,0 +1,2 @@
+import { OverflowTooltipText } from "../../components/ui/overflow-tooltip-text.js";
+export { OverflowTooltipText, OverflowTooltipText as TruncatedTitle };

package/lib/auth.d.ts

@@ -0,0 +1 @@
+export { CanRole, AbilityContext, ROLE_SUBJECT } from '@lark-apaas/auth-sdk';

package/lib/auth.js

@@ -0,0 +1,2 @@
+import { AbilityContext, CanRole, ROLE_SUBJECT } from "@lark-apaas/auth-sdk";
+export { AbilityContext, CanRole, ROLE_SUBJECT };

package/lib/components/AppContainer/index.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 import { IBaseThemeProviderProps } from '../theme';
 import '../../index.css';
+interface IBaseAuthProviderProps {
+    enableAuth?: boolean;
+}
 declare const AppContainer: React.FC<{
     children: React.ReactNode;
-} & IBaseThemeProviderProps>;
+} & IBaseThemeProviderProps & IBaseAuthProviderProps>;
 export default AppContainer;

package/lib/components/AppContainer/index.js

@@ -17,8 +17,11 @@ import safety from "./safety.js";
 import { getAppId } from "../../utils/getAppId.js";
 import { ServerLogPoller } from "../../server-log/index.js";
 import QueryProvider from "../QueryProvider/index.js";
+import { initObservable } from "./utils/observable.js";
+import { AuthProvider } from "@lark-apaas/auth-sdk";
 registerDayjsPlugins();
 initAxiosConfig();
+initObservable();
 const isMiaodaPreview = window.IS_MIAODA_PREVIEW;
 const readCssVarColor = (varName, fallback)=>{
     try {
@@ -30,7 +33,7 @@ const readCssVarColor = (varName, fallback)=>{
     }
 };
 const App = (props)=>{
-    const { themeMeta = {} } = props;
+    const { themeMeta = {}, enableAuth } = props;
     useAppInfo();
     const serverLogPollerRef = useRef(null);
     const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
@@ -86,7 +89,10 @@ const App = (props)=>{
             }
         });
     }, []);
-    return /*#__PURE__*/ jsxs(Fragment, {
+    return /*#__PURE__*/ jsxs(AuthProvider, {
+        config: {
+            enable: enableAuth
+        },
         children: [
             /*#__PURE__*/ jsx(Toaster, {}),
             'production' !== process.env.NODE_ENV && /*#__PURE__*/ jsx(MiaodaInspector, {
@@ -233,6 +239,7 @@ const AppContainer_AppContainer = (props)=>{
                     },
                     children: /*#__PURE__*/ jsx(App, {
                         themeMeta: props.themeMeta,
+                        enableAuth: props.enableAuth,
                         children: children
                     })
                 })

package/lib/components/AppContainer/utils/observable.d.ts

@@ -0,0 +1 @@
+export declare const initObservable: () => void;

package/lib/components/AppContainer/utils/observable.js

@@ -0,0 +1,16 @@
+import { AppEnv, observable } from "@lark-apaas/observable-web";
+const initObservable = ()=>{
+    try {
+        observable.start({
+            serviceName: "app",
+            env: 'development' === process.env.NODE_ENV ? AppEnv.Dev : AppEnv.Prod,
+            collectorUrl: {
+                log: `/spark/app/${window.appId}/runtime/api/v1/observability/logs/collect`,
+                metric: `/spark/app/${window.appId}/runtime/api/v1/observability/metrics/collect`
+            }
+        });
+    } catch (error) {
+        console.error('Failed to start WebObservableSdk:', error);
+    }
+};
+export { initObservable };

package/lib/hooks/useCurrentUserProfile.js

@@ -3,6 +3,11 @@ 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 getNameFromArray(nameArray) {
+    if (!nameArray || 0 === nameArray.length) return;
+    const chineseName = nameArray.find((item)=>2052 === item.language_code);
+    return chineseName?.text ?? nameArray[0]?.text;
+}
 function getCompatibilityUserProfile() {
     const userInfo = getCurrentUserProfile();
     return {
@@ -18,34 +23,36 @@ const useCurrentUserProfile = ()=>{
         if (isSparkRuntime()) {
             (async ()=>{
                 const dataloom = await getDataloom();
-                const result = await dataloom.service.session.getUserInfo();
+                const result = await dataloom?.service?.session?.getUserInfo();
                 const userInfo = result?.data?.user_info;
+                const userName = getNameFromArray(userInfo?.name);
                 setUserInfo({
                     user_id: userInfo?.user_id?.toString(),
                     email: userInfo?.email,
-                    name: userInfo?.name?.[0]?.text,
+                    name: userName,
                     avatar: userInfo?.avatar?.image?.large,
-                    userName: userInfo?.name?.[0]?.text,
+                    userName: userName,
                     userAvatar: userInfo?.avatar?.image?.large
                 });
             })();
             handleMetaInfoChanged = async ()=>{
                 const dataloom = await getDataloom();
-                const result = await dataloom.service.session.getUserInfo();
+                const result = await dataloom?.service?.session?.getUserInfo();
                 const userInfo = result?.data?.user_info;
+                const userName = getNameFromArray(userInfo?.name);
                 const newUserInfo = {
                     user_id: userInfo?.user_id?.toString(),
                     email: userInfo?.email,
-                    name: userInfo?.name?.[0]?.text,
+                    name: userName,
                     avatar: userInfo?.avatar?.image?.large,
-                    userName: userInfo?.name?.[0]?.text,
+                    userName: userName,
                     userAvatar: userInfo?.avatar?.image?.large
                 };
-                logger.info('MiaoDaMetaInfoChanged', newUserInfo);
+                if ('development' === process.env.NODE_ENV) logger.info('MiaoDaMetaInfoChanged', newUserInfo);
                 setUserInfo(newUserInfo);
             };
         } else handleMetaInfoChanged = ()=>{
-            logger.info('MiaoDaMetaInfoChanged', getCompatibilityUserProfile());
+            if ('development' === process.env.NODE_ENV) logger.info('MiaoDaMetaInfoChanged', getCompatibilityUserProfile());
             setUserInfo(getCompatibilityUserProfile());
         };
         window.addEventListener('MiaoDaMetaInfoChanged', handleMetaInfoChanged);

package/lib/logger/logger.js

@@ -1,5 +1,8 @@
+import { observable } from "@lark-apaas/observable-web";
 import { interceptors } from "./selected-logs.js";
 import { interceptErrors } from "./intercept-global-error.js";
+import { mapLogLevel, processLogParams } from "../utils/safeStringify.js";
+const shouldReportToObservable = 'production' === process.env.NODE_ENV;
 const LOG_LEVELS = [
     'debug',
     'info',
@@ -45,18 +48,35 @@ let logger = {
     },
     info (message, ...args) {
         if (shouldLog('info')) console.log(...getFormattedPrefix('info'), message, ...args);
+        if (shouldReportToObservable) observable.log('INFO', processLogParams([
+            message,
+            ...args
+        ]));
     },
     warn (message, ...args) {
         if (shouldLog('warn')) console.log(...getFormattedPrefix('warn'), message, ...args);
+        if (shouldReportToObservable) observable.log('WARN', processLogParams([
+            message,
+            ...args
+        ]));
     },
     error (message, ...args) {
         if (shouldLog('error')) console.error(...getFormattedPrefix('error'), message, ...args);
+        if (shouldReportToObservable) observable.log('ERROR', processLogParams([
+            message,
+            ...args
+        ]));
     },
     success (message, ...args) {
         if (shouldLog('success')) console.log(...getFormattedPrefix('success'), message, ...args);
+        if (shouldReportToObservable) observable.log('INFO', processLogParams([
+            message,
+            ...args
+        ]));
     },
     log ({ level, args }) {
         if (shouldLog(level)) console.log(...getFormattedPrefix(level), ...args);
+        if (shouldReportToObservable && "debug" !== level) observable.log(mapLogLevel(level), processLogParams(args));
     }
 };
 if ('production' !== process.env.NODE_ENV) window.__RUNTIME_LOGGER__ = {

package/lib/utils/axiosConfig.js

@@ -52,7 +52,7 @@ async function logResponse(ok, responseOrError) {
             logTraceID
         };
         if (stacktrace) logMeta.stacktrace = stacktrace;
-        logger.log({
+        if ('development' === process.env.NODE_ENV) logger.log({
             level: ok,
             args: [
                 parts.join(''),

package/lib/utils/safeStringify.d.ts

@@ -0,0 +1,4 @@
+import { LogLevel } from "../logger/log-types";
+export declare function safeStringify(obj: unknown): string;
+export declare function processLogParams(args: unknown[]): string;
+export declare function mapLogLevel(level: LogLevel): "INFO" | "WARN" | "ERROR";

package/lib/utils/safeStringify.js

@@ -0,0 +1,42 @@
+function safeStringify(obj) {
+    const seen = new Set();
+    try {
+        return JSON.stringify(obj, (key, value)=>{
+            if ('object' == typeof value && null !== value) {
+                if (seen.has(value)) return '[Circular]';
+                seen.add(value);
+            }
+            if ('bigint' == typeof value) return value.toString();
+            if (value instanceof Date) return value.toISOString();
+            if (value instanceof Map) return Object.fromEntries(value);
+            if (value instanceof Set) return Array.from(value);
+            if (void 0 === value) return 'undefined';
+            if ('symbol' == typeof value) return value.toString();
+            return value;
+        });
+    } catch  {
+        return '';
+    } finally{
+        seen.clear();
+    }
+}
+function processLogParams(args) {
+    if (1 === args.length) return safeStringify(args[0]);
+    const obj = {};
+    for(let i = 0; i < args.length; i++)obj[i.toString()] = args[i];
+    return safeStringify(obj);
+}
+function mapLogLevel(level) {
+    switch(level){
+        case "error":
+            return "ERROR";
+        case "info":
+        case "success":
+            return "INFO";
+        case "warn":
+            return "WARN";
+        default:
+            return "INFO";
+    }
+}
+export { mapLogLevel, processLogParams, safeStringify };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.1.36",
+  "version": "1.1.37-alpha.31",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -60,6 +60,11 @@
       "import": "./lib/apis/utils/*.js",
       "require": "./lib/apis/utils/*.js",
       "types": "./lib/apis/utils/*.d.ts"
+    },
+    "./auth": {
+      "import": "./lib/auth.js",
+      "require": "./lib/auth.js",
+      "types": "./lib/auth.d.ts"
     }
   },
   "scripts": {
@@ -81,7 +86,9 @@
     "@ant-design/colors": "^7.2.1",
     "@ant-design/cssinjs": "^1.24.0",
     "@data-loom/js": "^0.4.3",
+    "@lark-apaas/auth-sdk": "0.1.0-alpha.31",
     "@lark-apaas/miaoda-inspector": "^1.0.9",
+    "@lark-apaas/observable-web": "^1.0.0",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.3",