@lark-apaas/client-toolkit 1.2.6 → 1.2.7-alpha.0

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/trace.d.ts

@@ -0,0 +1 @@
+export * from '../trace';

package/lib/apis/trace.js

@@ -0,0 +1 @@
+export * from "../trace/index.js";

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

@@ -1,12 +1,15 @@
 import { AppEnv, observable } from "@lark-apaas/observable-web";
 const initObservable = ()=>{
     try {
+        const appId = window.appId;
         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`
+                log: `/spark/app/${appId}/runtime/api/v1/observability/logs/collect`,
+                trace: `/spark/app/${appId}/runtime/api/v1/observability/traces/collect`,
+                metric: `/spark/app/${appId}/runtime/api/v1/observability/metrics/collect`,
+                time: `/spark/api/v1/observability/app/${appId}/current_server_timestamp`
             }
         });
     } catch (error) {

package/lib/trace/index.d.ts

@@ -0,0 +1,13 @@
+import { observable } from "@lark-apaas/observable-web";
+/**
+ * 核心 Trace 方法：用于执行并追踪异步函数
+ * 使用代理模式而非直接 bind，确保在调用时获取最新的 observable 实例状态
+ */
+export declare const trace: (...args: Parameters<typeof observable.trace>) => Promise<unknown>;
+/**
+ * 默认导出追踪套件
+ */
+declare const _default: {
+    trace: (name: string, fn: (span: import("@opentelemetry/api").Span) => Promise<unknown>, options?: import("@opentelemetry/api").SpanOptions, span?: import("@opentelemetry/api").Span) => Promise<unknown>;
+};
+export default _default;

package/lib/trace/index.js

@@ -0,0 +1,6 @@
+import { observable } from "@lark-apaas/observable-web";
+const trace = (...args)=>observable.trace(...args);
+const src_trace = {
+    trace
+};
+export { src_trace as default, trace };

package/lib/utils/axiosConfig.d.ts

@@ -1,5 +1,12 @@
 import { AxiosInstance } from 'axios';
-/**
- * axios配置内容：拦截器、日志等
- */
+declare module 'axios' {
+    interface AxiosRequestConfig {
+        /** @internal 存储 Span 实例 */
+        __span?: any;
+        /** @internal 请求开始时间 */
+        _startTime?: number;
+        /** @internal 请求唯一标识 */
+        _requestUUID?: string;
+    }
+}
 export declare function initAxiosConfig(axiosInstance?: AxiosInstance): void;

package/lib/utils/axiosConfig.js

@@ -1,6 +1,8 @@
 import axios from "axios";
+import { observable } from "@lark-apaas/observable-web";
 import { logger } from "../apis/logger.js";
 import { getStacktrace } from "../logger/selected-logs.js";
+import { safeStringify } from "./safeStringify.js";
 const isValidResponse = (resp)=>null != resp && 'object' == typeof resp && 'config' in resp && null !== resp.config && void 0 !== resp.config && 'object' == typeof resp.config && 'status' in resp && 'number' == typeof resp.status && 'data' in resp;
 async function logResponse(ok, responseOrError) {
     if (isValidResponse(responseOrError)) {
@@ -52,7 +54,7 @@ async function logResponse(ok, responseOrError) {
             logTraceID
         };
         if (stacktrace) logMeta.stacktrace = stacktrace;
-        if ('development' === process.env.NODE_ENV) logger.log({
+        logger.debug({
             level: ok,
             args: [
                 parts.join(''),
@@ -108,7 +110,7 @@ async function logResponse(ok, responseOrError) {
         const stacktrace = await requestStacktraceMap.get(requestUUID);
         const logMeta = {};
         if (stacktrace) logMeta.stacktrace = stacktrace;
-        logger.log({
+        logger.debug({
             level: 'error',
             args: [
                 parts.join(''),
@@ -118,7 +120,7 @@ async function logResponse(ok, responseOrError) {
         });
         return;
     }
-    logger.log({
+    logger.debug({
         level: 'error',
         args: [
             '请求失败：无响应对象或配置信息'
@@ -127,21 +129,114 @@ async function logResponse(ok, responseOrError) {
     });
 }
 const requestStacktraceMap = new Map();
+function handleSpanEnd(cfg, response, error) {
+    try {
+        const currentSpan = cfg?.__span;
+        if (!currentSpan) return;
+        const startTime = cfg._startTime;
+        const errorResponse = error?.response || {};
+        const errorMessage = error?.message || '未知错误';
+        const url = response?.request?.responseURL || errorResponse?.request?.responseURL || cfg.url || "";
+        const method = (cfg.method || 'GET').toUpperCase();
+        const path = url.split('?')[0].replace(/^https?:\/\/[^/]+/, '') || '/';
+        const logData = {
+            method,
+            path,
+            url,
+            duration_ms: startTime ? Date.now() - startTime : void 0,
+            status: response ? response.status : errorResponse.status || 0
+        };
+        if (error) logData.error_message = errorMessage;
+        if ('undefined' != typeof navigator) logData.user_agent = navigator.userAgent;
+        if (cfg.data) if ('string' == typeof cfg.data) try {
+            logData.request_body = JSON.parse(cfg.data);
+        } catch  {
+            logData.request_body = cfg.data;
+        }
+        else cfg.data, logData.request_body = cfg.data;
+        const responseData = response?.data || errorResponse?.data;
+        if (responseData) logData.response = responseData;
+        const level = error ? 'ERROR' : 'INFO';
+        observable.log(level, safeStringify(logData), {}, currentSpan);
+        'function' == typeof currentSpan.end && currentSpan.end();
+    } catch (e) {
+        console.error('[AxiosTrace] Log span failed:', e);
+    }
+}
+const AxiosProto = axios.Axios.prototype;
+const originalAxiosRequest = AxiosProto.request;
+AxiosProto.request = function(configOrUrl, config) {
+    let finalConfig;
+    if ('string' == typeof configOrUrl) {
+        finalConfig = config || {};
+        finalConfig.url = configOrUrl;
+    } else finalConfig = configOrUrl || {};
+    if (finalConfig.__span) return originalAxiosRequest.call(this, finalConfig);
+    const fullUrl = this.getUri ? this.getUri(finalConfig) : finalConfig.url || "";
+    const actualMethod = (finalConfig.method || 'GET').toUpperCase();
+    const cleanedPath = fullUrl.split('?')[0].replace(/^https?:\/\/[^/]+/, '') || '/';
+    const span = observable.startSpan(`${actualMethod} ${cleanedPath}`);
+    if (span) try {
+        const spanContext = span.spanContext();
+        if (spanContext && spanContext.traceId) {
+            const traceInfo = `${spanContext.traceId}-${spanContext.spanId}`;
+            if (!finalConfig.headers) finalConfig.headers = {};
+            finalConfig.headers['X-Tt-TraceInfo'] = traceInfo;
+            finalConfig.__span = span;
+            finalConfig._startTime = finalConfig._startTime || Date.now();
+        }
+    } catch (e) {
+        console.error('[AxiosTrace] Setup trace info failed:', e);
+    }
+    return originalAxiosRequest.call(this, finalConfig).then((response)=>{
+        handleSpanEnd(response.config || finalConfig, response, null);
+        return response;
+    }, (error)=>{
+        handleSpanEnd(error.config || finalConfig, null, error);
+        throw error;
+    });
+};
+const originalCreate = axios.create;
+axios.create = function(config) {
+    const instance = originalCreate.apply(axios, [
+        config
+    ]);
+    return instance;
+};
+const methods = [
+    'request',
+    'get',
+    'post',
+    'put',
+    'delete',
+    'patch',
+    'head',
+    'options',
+    'postForm',
+    'putForm',
+    'patchForm'
+];
+methods.forEach((method)=>{
+    const originalMethod = axios[method];
+    if ('function' == typeof originalMethod) axios[method] = function(...args) {
+        return AxiosProto.request.apply(axios, args);
+    };
+});
 function initAxiosConfig(axiosInstance) {
-    if (!axiosInstance) axiosInstance = axios;
-    axiosInstance.interceptors.request.use((config)=>{
+    const instance = axiosInstance || axios;
+    instance.interceptors.request.use((config)=>{
         const requestUUID = crypto.randomUUID();
         if ('production' !== process.env.NODE_ENV) {
             const stacktrace = getStacktrace();
             requestStacktraceMap.set(requestUUID, stacktrace);
         }
         config._requestUUID = requestUUID;
-        config._startTime = Date.now();
+        config._startTime = config._startTime || Date.now();
         const csrfToken = window.csrfToken;
         if (csrfToken) config.headers['X-Suda-Csrf-Token'] = csrfToken;
         return config;
     }, (error)=>Promise.reject(error));
-    'production' !== process.env.NODE_ENV && axiosInstance.interceptors.response.use((response)=>{
+    'production' !== process.env.NODE_ENV && instance.interceptors.response.use((response)=>{
         logResponse('success', response);
         return response;
     }, (error)=>{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.2.6",
+  "version": "1.2.7-alpha.0",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -31,6 +31,11 @@
       "require": "./lib/apis/logger.js",
       "types": "./lib/apis/logger.d.ts"
     },
+    "./trace": {
+      "import": "./lib/apis/trace.js",
+      "require": "./lib/apis/trace.js",
+      "types": "./lib/apis/trace.d.ts"
+    },
     "./udt-types": {
       "import": "./lib/apis/udt-types.js",
       "require": "./lib/apis/udt-types.js",
@@ -60,6 +65,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,9 +91,10 @@
     "@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",
     "@lark-apaas/client-capability": "^0.1.2",
-    "@lark-apaas/miaoda-inspector": "^1.0.12",
-    "@lark-apaas/observable-web": "^1.0.0",
+    "@lark-apaas/miaoda-inspector": "^1.0.13",
+    "@lark-apaas/observable-web": "1.0.2-alpha.0",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.3",
@@ -156,6 +167,5 @@
     "react-dom": ">=16.14.0",
     "react-router-dom": ">=6.26.2",
     "styled-jsx": ">=5.0.0"
-  },
-  "gitHead": "10f20a5f5cd6b6fa12524008f8c68c82bc729cc7"
-}
+  }
+}