@lark-apaas/client-toolkit 1.2.24-alpha.4 → 1.2.24-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/AppContainer/api-proxy/core.js +2 -1
- package/lib/components/ui/badge.d.ts +1 -1
- package/lib/components/ui/button.d.ts +2 -2
- package/lib/components/ui/confirm.d.ts +28 -0
- package/lib/components/ui/confirm.js +82 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.js +2 -1
- package/lib/utils/axiosConfig.js +5 -36
- package/package.json +5 -5
|
@@ -139,7 +139,8 @@ class ApiProxy {
|
|
|
139
139
|
...config,
|
|
140
140
|
headers: {
|
|
141
141
|
...this.defaultConfig.headers,
|
|
142
|
-
...config.headers
|
|
142
|
+
...config.headers,
|
|
143
|
+
'X-Page-Route': 'undefined' != typeof window ? window.location?.pathname || '/' : '/'
|
|
143
144
|
}
|
|
144
145
|
};
|
|
145
146
|
const requestKey = this.generateRequestKey(mergedConfig);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
3
|
declare const badgeVariants: (props?: {
|
|
4
|
-
variant?: "default" | "destructive" | "
|
|
4
|
+
variant?: "default" | "destructive" | "outline" | "secondary";
|
|
5
5
|
} & import("class-variance-authority/dist/types").ClassProp) => string;
|
|
6
6
|
declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
|
|
7
7
|
asChild?: boolean;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
3
|
declare const buttonVariants: (props?: {
|
|
4
|
-
variant?: "default" | "link" | "destructive" | "
|
|
5
|
-
size?: "default" | "
|
|
4
|
+
variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost";
|
|
5
|
+
size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg";
|
|
6
6
|
} & import("class-variance-authority/dist/types").ClassProp) => string;
|
|
7
7
|
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
8
8
|
asChild?: boolean;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export interface ConfirmOptions {
|
|
2
|
+
/** 标题,默认 "提示" */
|
|
3
|
+
title?: string;
|
|
4
|
+
/** 内容描述 */
|
|
5
|
+
message: string;
|
|
6
|
+
/** 确认按钮文案,默认 "确认" */
|
|
7
|
+
confirmText?: string;
|
|
8
|
+
/** 取消按钮文案,默认 "取消" */
|
|
9
|
+
cancelText?: string;
|
|
10
|
+
/** 确认按钮样式变体 */
|
|
11
|
+
variant?: 'default' | 'destructive';
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* 函数式确认弹窗,作为 window.confirm 的直接平替。
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* // 简单用法(兼容 window.confirm 传参)
|
|
18
|
+
* const ok = await showConfirm('确定删除吗?');
|
|
19
|
+
*
|
|
20
|
+
* // 完整用法
|
|
21
|
+
* const ok = await showConfirm({
|
|
22
|
+
* title: '确认删除',
|
|
23
|
+
* message: '删除后不可恢复',
|
|
24
|
+
* confirmText: '删除',
|
|
25
|
+
* variant: 'destructive',
|
|
26
|
+
* });
|
|
27
|
+
*/
|
|
28
|
+
export declare function showConfirm(options: string | ConfirmOptions): Promise<boolean>;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import { createRoot } from "react-dom/client";
|
|
4
|
+
import { Content, Description, Overlay, Portal, Root, Title } from "@radix-ui/react-dialog";
|
|
5
|
+
import { Button } from "./button.js";
|
|
6
|
+
import { clsxWithTw } from "../../utils/utils.js";
|
|
7
|
+
function showConfirm(options) {
|
|
8
|
+
const opts = 'string' == typeof options ? {
|
|
9
|
+
message: options
|
|
10
|
+
} : options;
|
|
11
|
+
const { title = '提示', message, confirmText = '确认', cancelText = '取消', variant = 'default' } = opts;
|
|
12
|
+
return new Promise((resolve)=>{
|
|
13
|
+
const container = document.createElement('div');
|
|
14
|
+
document.body.appendChild(container);
|
|
15
|
+
const root = createRoot(container);
|
|
16
|
+
function cleanup() {
|
|
17
|
+
root.unmount();
|
|
18
|
+
container.remove();
|
|
19
|
+
}
|
|
20
|
+
function handleConfirm() {
|
|
21
|
+
cleanup();
|
|
22
|
+
resolve(true);
|
|
23
|
+
}
|
|
24
|
+
function handleCancel() {
|
|
25
|
+
cleanup();
|
|
26
|
+
resolve(false);
|
|
27
|
+
}
|
|
28
|
+
root.render(/*#__PURE__*/ jsx(ConfirmDialog, {
|
|
29
|
+
title: title,
|
|
30
|
+
message: message,
|
|
31
|
+
confirmText: confirmText,
|
|
32
|
+
cancelText: cancelText,
|
|
33
|
+
variant: variant,
|
|
34
|
+
onConfirm: handleConfirm,
|
|
35
|
+
onCancel: handleCancel
|
|
36
|
+
}));
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
function ConfirmDialog({ title, message, confirmText, cancelText, variant, onConfirm, onCancel }) {
|
|
40
|
+
return /*#__PURE__*/ jsx(Root, {
|
|
41
|
+
defaultOpen: true,
|
|
42
|
+
onOpenChange: (open)=>{
|
|
43
|
+
if (!open) onCancel();
|
|
44
|
+
},
|
|
45
|
+
children: /*#__PURE__*/ jsxs(Portal, {
|
|
46
|
+
children: [
|
|
47
|
+
/*#__PURE__*/ jsx(Overlay, {
|
|
48
|
+
className: clsxWithTw('fixed inset-0 z-[99999] bg-black/40', 'data-[state=open]:animate-in data-[state=open]:fade-in-0', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0')
|
|
49
|
+
}),
|
|
50
|
+
/*#__PURE__*/ jsxs(Content, {
|
|
51
|
+
className: clsxWithTw('fixed left-1/2 top-1/2 z-[99999] -translate-x-1/2 -translate-y-1/2', 'w-[90vw] max-w-[400px] rounded-lg', 'bg-[var(--color-neutral-00,#fff)] text-[var(--color-neutral-950,#1f2329)]', 'border border-[var(--color-neutral-300,#dee0e3)]', 'shadow-lg p-6', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95'),
|
|
52
|
+
children: [
|
|
53
|
+
/*#__PURE__*/ jsx(Title, {
|
|
54
|
+
className: clsxWithTw('text-base font-medium leading-6', 'text-[var(--color-neutral-950,#1f2329)]'),
|
|
55
|
+
children: title
|
|
56
|
+
}),
|
|
57
|
+
/*#__PURE__*/ jsx(Description, {
|
|
58
|
+
className: clsxWithTw('mt-2 text-sm leading-5', 'text-[var(--color-neutral-700,#646a73)]'),
|
|
59
|
+
children: message
|
|
60
|
+
}),
|
|
61
|
+
/*#__PURE__*/ jsxs("div", {
|
|
62
|
+
className: clsxWithTw('mt-6 flex justify-end gap-2'),
|
|
63
|
+
children: [
|
|
64
|
+
/*#__PURE__*/ jsx(Button, {
|
|
65
|
+
variant: "outline",
|
|
66
|
+
onClick: onCancel,
|
|
67
|
+
children: cancelText
|
|
68
|
+
}),
|
|
69
|
+
/*#__PURE__*/ jsx(Button, {
|
|
70
|
+
variant: variant,
|
|
71
|
+
onClick: onConfirm,
|
|
72
|
+
children: confirmText
|
|
73
|
+
})
|
|
74
|
+
]
|
|
75
|
+
})
|
|
76
|
+
]
|
|
77
|
+
})
|
|
78
|
+
]
|
|
79
|
+
})
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
export { showConfirm };
|
package/lib/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export declare const capabilityClient: import("@lark-apaas/client-capability").CapabilityClient;
|
|
2
|
+
export { showConfirm } from './components/ui/confirm';
|
|
3
|
+
export type { ConfirmOptions } from './components/ui/confirm';
|
|
2
4
|
declare const _default: {
|
|
3
5
|
version: string;
|
|
4
6
|
};
|
package/lib/index.js
CHANGED
|
@@ -5,6 +5,7 @@ import { isNewPathEnabled } from "./utils/apiPath.js";
|
|
|
5
5
|
import { logger } from "./logger/index.js";
|
|
6
6
|
import { showToast } from "./components/ui/toast.js";
|
|
7
7
|
import { version } from "../package.json";
|
|
8
|
+
import { showConfirm } from "./components/ui/confirm.js";
|
|
8
9
|
const _appId = getAppId();
|
|
9
10
|
const _acquireUploadUrl = isNewPathEnabled() ? `/app/${_appId}/__runtime__/api/v1/studio/plugins/tmp_files/acquire_upload_url` : "/af/api/v1/studio/plugins/tmp_files/acquire_upload_url";
|
|
10
11
|
const _acquireDownloadUrl = isNewPathEnabled() ? `/app/${_appId}/__runtime__/api/v1/studio/plugins/tmp_files/acquire_download_url` : "/af/api/v1/studio/plugins/tmp_files/acquire_download_url";
|
|
@@ -25,4 +26,4 @@ const capabilityClient = createClient({
|
|
|
25
26
|
const src = {
|
|
26
27
|
version: version
|
|
27
28
|
};
|
|
28
|
-
export { capabilityClient, src as default };
|
|
29
|
+
export { capabilityClient, src as default, showConfirm };
|
package/lib/utils/axiosConfig.js
CHANGED
|
@@ -4,21 +4,6 @@ import { logger } from "../apis/logger.js";
|
|
|
4
4
|
import { getStacktrace } from "../logger/selected-logs.js";
|
|
5
5
|
import { safeStringify } from "./safeStringify.js";
|
|
6
6
|
import { slardar } from "@lark-apaas/internal-slardar";
|
|
7
|
-
import { normalizeBasePath } from "./utils.js";
|
|
8
|
-
const APP_CLIENT_API_LOG_TYPE = 'app_client_api_log';
|
|
9
|
-
function getRefererPath() {
|
|
10
|
-
try {
|
|
11
|
-
if ('undefined' != typeof window && window.location?.pathname) return stripBasePath(window.location.pathname);
|
|
12
|
-
return '/';
|
|
13
|
-
} catch {
|
|
14
|
-
return '/';
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
function stripBasePath(urlPath) {
|
|
18
|
-
const base = normalizeBasePath(process.env.CLIENT_BASE_PATH);
|
|
19
|
-
if (base && urlPath.startsWith(base)) return urlPath.slice(base.length) || '/';
|
|
20
|
-
return urlPath;
|
|
21
|
-
}
|
|
22
7
|
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;
|
|
23
8
|
async function logResponse(ok, responseOrError) {
|
|
24
9
|
if (isValidResponse(responseOrError)) {
|
|
@@ -154,20 +139,13 @@ function handleSpanEnd(cfg, response, error) {
|
|
|
154
139
|
const errorMessage = error?.message || '未知错误';
|
|
155
140
|
const url = response?.request?.responseURL || errorResponse?.request?.responseURL || cfg.url || "";
|
|
156
141
|
const method = (cfg.method || 'GET').toUpperCase();
|
|
157
|
-
const
|
|
158
|
-
const path = stripBasePath(rawPath);
|
|
159
|
-
const durationMs = startTime ? Date.now() - startTime : void 0;
|
|
160
|
-
const referer_path = getRefererPath();
|
|
161
|
-
const api = `${method} ${path}`;
|
|
162
|
-
const type = APP_CLIENT_API_LOG_TYPE;
|
|
142
|
+
const path = url.split('?')[0].replace(/^https?:\/\/[^/]+/, '') || '/';
|
|
163
143
|
const logData = {
|
|
164
144
|
method,
|
|
165
145
|
path,
|
|
166
146
|
url,
|
|
167
|
-
duration_ms:
|
|
168
|
-
status: response ? response.status : errorResponse.status || 0
|
|
169
|
-
referer_path,
|
|
170
|
-
type
|
|
147
|
+
duration_ms: startTime ? Date.now() - startTime : void 0,
|
|
148
|
+
status: response ? response.status : errorResponse.status || 0
|
|
171
149
|
};
|
|
172
150
|
if (error) logData.error_message = errorMessage;
|
|
173
151
|
if ('undefined' != typeof navigator) logData.user_agent = navigator.userAgent;
|
|
@@ -180,12 +158,7 @@ function handleSpanEnd(cfg, response, error) {
|
|
|
180
158
|
const responseData = response?.data || errorResponse?.data;
|
|
181
159
|
if (responseData) logData.response = responseData;
|
|
182
160
|
const level = error ? 'ERROR' : 'INFO';
|
|
183
|
-
observable.log(level, safeStringify(logData), {
|
|
184
|
-
referer_path,
|
|
185
|
-
api,
|
|
186
|
-
type,
|
|
187
|
-
duration_ms: durationMs
|
|
188
|
-
}, currentSpan);
|
|
161
|
+
observable.log(level, safeStringify(logData), {}, currentSpan);
|
|
189
162
|
'function' == typeof currentSpan.end && currentSpan.end();
|
|
190
163
|
} catch (e) {
|
|
191
164
|
console.error('[AxiosTrace] Log span failed:', e);
|
|
@@ -266,11 +239,7 @@ function initAxiosConfig(axiosInstance) {
|
|
|
266
239
|
config._startTime = config._startTime || Date.now();
|
|
267
240
|
const csrfToken = window.csrfToken;
|
|
268
241
|
if (csrfToken) config.headers['X-Suda-Csrf-Token'] = csrfToken;
|
|
269
|
-
|
|
270
|
-
config.headers['Rpc-Persist-Apaas-Observability-Referer-Path'] = refererPath;
|
|
271
|
-
const reqMethod = (config.method || 'GET').toUpperCase();
|
|
272
|
-
const requestPath = stripBasePath((config.url || '').split('?')[0]);
|
|
273
|
-
config.headers['Rpc-Persist-Apaas-Observability-Api'] = `${reqMethod} ${requestPath}`;
|
|
242
|
+
if ('undefined' != typeof window && window.location?.pathname) config.headers['X-Page-Route'] = window.location.pathname;
|
|
274
243
|
return config;
|
|
275
244
|
}, (error)=>Promise.reject(error));
|
|
276
245
|
instance.interceptors.response.use((response)=>response, (error)=>{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lark-apaas/client-toolkit",
|
|
3
|
-
"version": "1.2.24-alpha.
|
|
3
|
+
"version": "1.2.24-alpha.6",
|
|
4
4
|
"types": "./lib/index.d.ts",
|
|
5
5
|
"main": "./lib/index.js",
|
|
6
6
|
"files": [
|
|
@@ -99,10 +99,10 @@
|
|
|
99
99
|
"@ant-design/colors": "^7.2.1",
|
|
100
100
|
"@ant-design/cssinjs": "^1.24.0",
|
|
101
101
|
"@data-loom/js": "0.4.9",
|
|
102
|
-
"@lark-apaas/aily-web-sdk": "^0.0.
|
|
103
|
-
"@lark-apaas/auth-sdk": "^0.1.
|
|
104
|
-
"@lark-apaas/client-capability": "^0.1.
|
|
105
|
-
"@lark-apaas/internal-slardar": "
|
|
102
|
+
"@lark-apaas/aily-web-sdk": "^0.0.7",
|
|
103
|
+
"@lark-apaas/auth-sdk": "^0.1.2",
|
|
104
|
+
"@lark-apaas/client-capability": "^0.1.6",
|
|
105
|
+
"@lark-apaas/internal-slardar": "^0.0.3",
|
|
106
106
|
"@lark-apaas/miaoda-inspector": "^1.0.20",
|
|
107
107
|
"@lark-apaas/observable-web": "^1.0.4",
|
|
108
108
|
"@radix-ui/react-avatar": "^1.1.10",
|