zmdms-utils 0.0.79 → 0.0.80
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/dist/es/file.d.ts +1 -0
- package/dist/es/file.js +7 -4
- package/package.json +1 -1
- package/src/file.ts +8 -3
- package/src/locales/i18n.ts +18 -18
- package/src/locales/index.ts +8 -8
- package/src/locales/t-in-non-react.ts +65 -65
- package/src/locales/t-options.ts +24 -24
- package/src/locales/use-translation.ts +76 -76
package/dist/es/file.d.ts
CHANGED
package/dist/es/file.js
CHANGED
|
@@ -272,8 +272,8 @@ function createDownloadLink(fileId, options) {
|
|
|
272
272
|
*/
|
|
273
273
|
function createOriginalLink(fileId, fileName, options) {
|
|
274
274
|
if (options === void 0) { options = {}; }
|
|
275
|
-
var API_BASEURL = options.API_BASEURL, authToken = options.authToken;
|
|
276
|
-
var
|
|
275
|
+
var API_BASEURL = options.API_BASEURL, authToken = options.authToken, _a = options.encodeNum, encodeNum = _a === void 0 ? 1 : _a;
|
|
276
|
+
var _b = getBasicInfo(FILE_PRVIEW_SERVICE_URL || API_BASEURL || "", authToken), token = _b.token, apiBaseURL = _b.apiBaseURL;
|
|
277
277
|
// 处理附件名中的一些特殊字符
|
|
278
278
|
var previewFileName = dangerouslyXss(fileName);
|
|
279
279
|
try {
|
|
@@ -283,7 +283,7 @@ function createOriginalLink(fileId, fileName, options) {
|
|
|
283
283
|
console.log(err);
|
|
284
284
|
}
|
|
285
285
|
// 获取文件后缀
|
|
286
|
-
var
|
|
286
|
+
var _c = getFileExtension(previewFileName), filePreName = _c[0], fileExtension = _c[1];
|
|
287
287
|
// 由于预览使用了文件名地址作为iframe的路径
|
|
288
288
|
// 如果文件名没变,文件内容改变。这样就会导致再次预览时 内容不会更新
|
|
289
289
|
// 所以将文件名 与 文件id组合来生成不同的文件名
|
|
@@ -293,7 +293,7 @@ function createOriginalLink(fileId, fileName, options) {
|
|
|
293
293
|
return "".concat(apiBaseURL, "/api/").concat(BASIC_KEY, "-resource/attach/filePreview?attachId=").concat(fileId, "&").concat(TOKEN_KEY, "=").concat(token);
|
|
294
294
|
}
|
|
295
295
|
if (isZmdmsFileService) {
|
|
296
|
-
fileId = encodeFileId(fileId,
|
|
296
|
+
fileId = encodeFileId(fileId, encodeNum);
|
|
297
297
|
}
|
|
298
298
|
return ("".concat(apiBaseURL, "/attchPreview?attachId=").concat(fileId, "&").concat(TOKEN_KEY, "=").concat(token, "&officePreviewType=pdf") +
|
|
299
299
|
(fileName ? "&titleName=".concat(encodeURIComponent(previewFileName)) : ""));
|
|
@@ -364,6 +364,9 @@ function getBasicInfo(baseURL, token) {
|
|
|
364
364
|
function encodeFileId(fileId, encodeNum) {
|
|
365
365
|
if (encodeNum === void 0) { encodeNum = 1; }
|
|
366
366
|
var crypto = new Crypto(window.__CRYPTO_AES_KEY__, window.__CRYPTO_DES_KEY__);
|
|
367
|
+
if (encodeNum === 0) {
|
|
368
|
+
return crypto.encrypt(fileId);
|
|
369
|
+
}
|
|
367
370
|
if (encodeNum === 1) {
|
|
368
371
|
return encodeURIComponent(crypto.encrypt(fileId));
|
|
369
372
|
}
|
package/package.json
CHANGED
package/src/file.ts
CHANGED
|
@@ -337,7 +337,7 @@ export function createOriginalLink(
|
|
|
337
337
|
fileName: string,
|
|
338
338
|
options: IOriginLinkOptions = {}
|
|
339
339
|
) {
|
|
340
|
-
const { API_BASEURL, authToken } = options;
|
|
340
|
+
const { API_BASEURL, authToken, encodeNum = 1 } = options;
|
|
341
341
|
const { token, apiBaseURL } = getBasicInfo(
|
|
342
342
|
FILE_PRVIEW_SERVICE_URL || API_BASEURL || "",
|
|
343
343
|
authToken
|
|
@@ -360,7 +360,7 @@ export function createOriginalLink(
|
|
|
360
360
|
return `${apiBaseURL}/api/${BASIC_KEY}-resource/attach/filePreview?attachId=${fileId}&${TOKEN_KEY}=${token}`;
|
|
361
361
|
}
|
|
362
362
|
if (isZmdmsFileService) {
|
|
363
|
-
fileId = encodeFileId(fileId,
|
|
363
|
+
fileId = encodeFileId(fileId, encodeNum);
|
|
364
364
|
}
|
|
365
365
|
return (
|
|
366
366
|
`${apiBaseURL}/attchPreview?attachId=${fileId}&${TOKEN_KEY}=${token}&officePreviewType=pdf` +
|
|
@@ -456,7 +456,9 @@ interface IPreviewOptions extends IOptions {
|
|
|
456
456
|
[props: string]: string;
|
|
457
457
|
}[];
|
|
458
458
|
}
|
|
459
|
-
interface IOriginLinkOptions extends Partial<IOptions> {
|
|
459
|
+
interface IOriginLinkOptions extends Partial<IOptions> {
|
|
460
|
+
encodeNum?: number;
|
|
461
|
+
}
|
|
460
462
|
interface IThumbnailLinkOptions extends Partial<IOptions> {
|
|
461
463
|
/** 缩放比例 */
|
|
462
464
|
scale?: number;
|
|
@@ -475,6 +477,9 @@ export function encodeFileId(fileId: string, encodeNum: number = 1) {
|
|
|
475
477
|
(window as any).__CRYPTO_AES_KEY__,
|
|
476
478
|
(window as any).__CRYPTO_DES_KEY__
|
|
477
479
|
);
|
|
480
|
+
if (encodeNum === 0) {
|
|
481
|
+
return crypto.encrypt(fileId);
|
|
482
|
+
}
|
|
478
483
|
if (encodeNum === 1) {
|
|
479
484
|
return encodeURIComponent(crypto.encrypt(fileId));
|
|
480
485
|
}
|
package/src/locales/i18n.ts
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import i18next from "i18next";
|
|
2
|
-
import { initReactI18next } from "react-i18next";
|
|
3
|
-
|
|
4
|
-
type InitOptions = Parameters<typeof i18next.init>;
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* 初始化逻辑
|
|
8
|
-
* - 本函数主要用于初始化 i18next 实例,同时使用 react-i18next 插件进行 react 组件的支持
|
|
9
|
-
* - 本函数的调用时机,一般是在项目的入口文件中进行调用,如 src/main.tsx 中
|
|
10
|
-
* @param options 参数 同i18next.init 第一个参数
|
|
11
|
-
* @param callback 参数 同i18next.init 第二个参数
|
|
12
|
-
* @returns
|
|
13
|
-
*/
|
|
14
|
-
function initLocale(options: InitOptions[0], callback?: InitOptions[1]) {
|
|
15
|
-
return i18next.use(initReactI18next).init(options, callback);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export { initLocale, i18next as i18n };
|
|
1
|
+
import i18next from "i18next";
|
|
2
|
+
import { initReactI18next } from "react-i18next";
|
|
3
|
+
|
|
4
|
+
type InitOptions = Parameters<typeof i18next.init>;
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* 初始化逻辑
|
|
8
|
+
* - 本函数主要用于初始化 i18next 实例,同时使用 react-i18next 插件进行 react 组件的支持
|
|
9
|
+
* - 本函数的调用时机,一般是在项目的入口文件中进行调用,如 src/main.tsx 中
|
|
10
|
+
* @param options 参数 同i18next.init 第一个参数
|
|
11
|
+
* @param callback 参数 同i18next.init 第二个参数
|
|
12
|
+
* @returns
|
|
13
|
+
*/
|
|
14
|
+
function initLocale(options: InitOptions[0], callback?: InitOptions[1]) {
|
|
15
|
+
return i18next.use(initReactI18next).init(options, callback);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { initLocale, i18next as i18n };
|
package/src/locales/index.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
// i18n实例 及 初始化方法
|
|
2
|
-
export { i18n, initLocale } from "./i18n";
|
|
3
|
-
|
|
4
|
-
// 代理的 useTranslation 函数
|
|
5
|
-
export { useTranslation, Trans } from "./use-translation";
|
|
6
|
-
|
|
7
|
-
// 导出 t 函数(应对在非 react 组件环境下进行使用的场景)
|
|
8
|
-
export { safeT } from "./t-in-non-react";
|
|
1
|
+
// i18n实例 及 初始化方法
|
|
2
|
+
export { i18n, initLocale } from "./i18n";
|
|
3
|
+
|
|
4
|
+
// 代理的 useTranslation 函数
|
|
5
|
+
export { useTranslation, Trans } from "./use-translation";
|
|
6
|
+
|
|
7
|
+
// 导出 t 函数(应对在非 react 组件环境下进行使用的场景)
|
|
8
|
+
export { safeT } from "./t-in-non-react";
|
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* t 函数封装:
|
|
3
|
-
* - 本文件的几个 t 函数,主要用于弥补一些在 React 组件之外使用的场景
|
|
4
|
-
* - 常规情况下,在 react 组件中,更加推荐的是使用 react-i18next 包中的 t 函数,即 const { t } = useTranslate(); 形式
|
|
5
|
-
*/
|
|
6
|
-
import { i18n } from "./i18n";
|
|
7
|
-
import type { TOpionsEx } from "./t-options";
|
|
8
|
-
import { getTFuncArgs } from "./t-options";
|
|
9
|
-
|
|
10
|
-
/** 包裹一层 try-catch 的 t 函数 */
|
|
11
|
-
const tryT = (
|
|
12
|
-
key: string,
|
|
13
|
-
defaultValueOrOptions: string | TOpionsEx
|
|
14
|
-
): string => {
|
|
15
|
-
const { defaultValue, options } = getTFuncArgs(defaultValueOrOptions);
|
|
16
|
-
if (!key) {
|
|
17
|
-
// 情况1:键名为空,返回默认值或键名
|
|
18
|
-
console.error(
|
|
19
|
-
`tryT: 请不要传入空 key 值进行 i18n.t 函数执行,这将会导致直接返回空字符串!`
|
|
20
|
-
);
|
|
21
|
-
return defaultValue || key;
|
|
22
|
-
}
|
|
23
|
-
if (!i18n.exists(key)) {
|
|
24
|
-
// 情况2:键名不存在,返回默认值或键名
|
|
25
|
-
console.error(
|
|
26
|
-
`tryT: i18n-key '${key}' 不存在,请检查对应的 @/locales/resources/locales/xx.json 中是否存在对应值`
|
|
27
|
-
);
|
|
28
|
-
return defaultValue || key;
|
|
29
|
-
}
|
|
30
|
-
try {
|
|
31
|
-
// 情况3:尝试执行 i18n.t 函数
|
|
32
|
-
return i18n.t(key, options);
|
|
33
|
-
} catch (err) {
|
|
34
|
-
// 情况4:执行 i18n.t 函数异常,返回默认值或键名
|
|
35
|
-
console.error(`tryT: i18n.t key=${key} 函数执行异常:err=`, err);
|
|
36
|
-
return defaultValue || key;
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* 同步版本的 i18n.t 函数(应对在 react 组件外使用的翻译函数)
|
|
42
|
-
* - 如果 i18n 未初始化,则返回默认值或键名
|
|
43
|
-
* - 如果 i18n 初始化后,键名不存在,则返回默认值或键名
|
|
44
|
-
* - 其他正常情况(已经初始化+键名存在),则返回翻译值
|
|
45
|
-
* @description 本函数为在非 react 组件中使用的翻译函数;(在react中请求使用 useTranslate() 返回的 t 函数)
|
|
46
|
-
* @param {string} key
|
|
47
|
-
* @param {TOpionsEx|string} defaultValue 必填值
|
|
48
|
-
* @returns {string}
|
|
49
|
-
* @example
|
|
50
|
-
* const txt = t('someLocaleKey', '兜底默认值');
|
|
51
|
-
*/
|
|
52
|
-
export function safeT(
|
|
53
|
-
key: string,
|
|
54
|
-
defaultValueOrOptions: string | TOpionsEx
|
|
55
|
-
): string {
|
|
56
|
-
if (i18n.isInitialized) {
|
|
57
|
-
return tryT(key, defaultValueOrOptions);
|
|
58
|
-
}
|
|
59
|
-
// 异常情况:没有初始化完成时,返回默认值
|
|
60
|
-
const { defaultValue } = getTFuncArgs(defaultValueOrOptions);
|
|
61
|
-
console.warn(
|
|
62
|
-
`safeT: i18n is not initialized. Returning defaultValue(${defaultValue}) or origin key (${key}).`
|
|
63
|
-
);
|
|
64
|
-
return defaultValue || key;
|
|
65
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* t 函数封装:
|
|
3
|
+
* - 本文件的几个 t 函数,主要用于弥补一些在 React 组件之外使用的场景
|
|
4
|
+
* - 常规情况下,在 react 组件中,更加推荐的是使用 react-i18next 包中的 t 函数,即 const { t } = useTranslate(); 形式
|
|
5
|
+
*/
|
|
6
|
+
import { i18n } from "./i18n";
|
|
7
|
+
import type { TOpionsEx } from "./t-options";
|
|
8
|
+
import { getTFuncArgs } from "./t-options";
|
|
9
|
+
|
|
10
|
+
/** 包裹一层 try-catch 的 t 函数 */
|
|
11
|
+
const tryT = (
|
|
12
|
+
key: string,
|
|
13
|
+
defaultValueOrOptions: string | TOpionsEx
|
|
14
|
+
): string => {
|
|
15
|
+
const { defaultValue, options } = getTFuncArgs(defaultValueOrOptions);
|
|
16
|
+
if (!key) {
|
|
17
|
+
// 情况1:键名为空,返回默认值或键名
|
|
18
|
+
console.error(
|
|
19
|
+
`tryT: 请不要传入空 key 值进行 i18n.t 函数执行,这将会导致直接返回空字符串!`
|
|
20
|
+
);
|
|
21
|
+
return defaultValue || key;
|
|
22
|
+
}
|
|
23
|
+
if (!i18n.exists(key)) {
|
|
24
|
+
// 情况2:键名不存在,返回默认值或键名
|
|
25
|
+
console.error(
|
|
26
|
+
`tryT: i18n-key '${key}' 不存在,请检查对应的 @/locales/resources/locales/xx.json 中是否存在对应值`
|
|
27
|
+
);
|
|
28
|
+
return defaultValue || key;
|
|
29
|
+
}
|
|
30
|
+
try {
|
|
31
|
+
// 情况3:尝试执行 i18n.t 函数
|
|
32
|
+
return i18n.t(key, options);
|
|
33
|
+
} catch (err) {
|
|
34
|
+
// 情况4:执行 i18n.t 函数异常,返回默认值或键名
|
|
35
|
+
console.error(`tryT: i18n.t key=${key} 函数执行异常:err=`, err);
|
|
36
|
+
return defaultValue || key;
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* 同步版本的 i18n.t 函数(应对在 react 组件外使用的翻译函数)
|
|
42
|
+
* - 如果 i18n 未初始化,则返回默认值或键名
|
|
43
|
+
* - 如果 i18n 初始化后,键名不存在,则返回默认值或键名
|
|
44
|
+
* - 其他正常情况(已经初始化+键名存在),则返回翻译值
|
|
45
|
+
* @description 本函数为在非 react 组件中使用的翻译函数;(在react中请求使用 useTranslate() 返回的 t 函数)
|
|
46
|
+
* @param {string} key
|
|
47
|
+
* @param {TOpionsEx|string} defaultValue 必填值
|
|
48
|
+
* @returns {string}
|
|
49
|
+
* @example
|
|
50
|
+
* const txt = t('someLocaleKey', '兜底默认值');
|
|
51
|
+
*/
|
|
52
|
+
export function safeT(
|
|
53
|
+
key: string,
|
|
54
|
+
defaultValueOrOptions: string | TOpionsEx
|
|
55
|
+
): string {
|
|
56
|
+
if (i18n.isInitialized) {
|
|
57
|
+
return tryT(key, defaultValueOrOptions);
|
|
58
|
+
}
|
|
59
|
+
// 异常情况:没有初始化完成时,返回默认值
|
|
60
|
+
const { defaultValue } = getTFuncArgs(defaultValueOrOptions);
|
|
61
|
+
console.warn(
|
|
62
|
+
`safeT: i18n is not initialized. Returning defaultValue(${defaultValue}) or origin key (${key}).`
|
|
63
|
+
);
|
|
64
|
+
return defaultValue || key;
|
|
65
|
+
}
|
package/src/locales/t-options.ts
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
import type { TOptions } from "i18next";
|
|
3
|
-
|
|
4
|
-
export interface TOpionsEx extends TOptions {
|
|
5
|
-
defaultValue: string; // 必须填值
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* 获取 t 函数的参数
|
|
10
|
-
* @param {string | TOpionsEx} defaultValueOrOptions 默认值或者选项
|
|
11
|
-
* @returns { {defaultValue: string, options: TOpionsEx} } 默认值和选项
|
|
12
|
-
*/
|
|
13
|
-
export function getTFuncArgs(defaultValueOrOptions: string | TOpionsEx) {
|
|
14
|
-
let options: TOpionsEx | null = null;
|
|
15
|
-
let defaultValue = "";
|
|
16
|
-
if (typeof defaultValueOrOptions === "string") {
|
|
17
|
-
defaultValue = defaultValueOrOptions;
|
|
18
|
-
options = { defaultValue };
|
|
19
|
-
} else {
|
|
20
|
-
options = defaultValueOrOptions;
|
|
21
|
-
defaultValue = options.defaultValue;
|
|
22
|
-
}
|
|
23
|
-
return { defaultValue, options };
|
|
24
|
-
}
|
|
1
|
+
"use strict";
|
|
2
|
+
import type { TOptions } from "i18next";
|
|
3
|
+
|
|
4
|
+
export interface TOpionsEx extends TOptions {
|
|
5
|
+
defaultValue: string; // 必须填值
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* 获取 t 函数的参数
|
|
10
|
+
* @param {string | TOpionsEx} defaultValueOrOptions 默认值或者选项
|
|
11
|
+
* @returns { {defaultValue: string, options: TOpionsEx} } 默认值和选项
|
|
12
|
+
*/
|
|
13
|
+
export function getTFuncArgs(defaultValueOrOptions: string | TOpionsEx) {
|
|
14
|
+
let options: TOpionsEx | null = null;
|
|
15
|
+
let defaultValue = "";
|
|
16
|
+
if (typeof defaultValueOrOptions === "string") {
|
|
17
|
+
defaultValue = defaultValueOrOptions;
|
|
18
|
+
options = { defaultValue };
|
|
19
|
+
} else {
|
|
20
|
+
options = defaultValueOrOptions;
|
|
21
|
+
defaultValue = options.defaultValue;
|
|
22
|
+
}
|
|
23
|
+
return { defaultValue, options };
|
|
24
|
+
}
|
|
@@ -1,76 +1,76 @@
|
|
|
1
|
-
import { useTranslation, Trans } from "react-i18next";
|
|
2
|
-
import type { TOpionsEx } from "./t-options";
|
|
3
|
-
import { getTFuncArgs } from "./t-options";
|
|
4
|
-
|
|
5
|
-
type Prams = Parameters<typeof useTranslation>;
|
|
6
|
-
type NS = Prams[0];
|
|
7
|
-
type Options = Prams[1];
|
|
8
|
-
|
|
9
|
-
type EnhanceTFunc = (
|
|
10
|
-
key: string,
|
|
11
|
-
defaultValueOrOptions: string | TOpionsEx
|
|
12
|
-
) => string;
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* 这里只是简单代理一下useTranslation,方便后续扩展或添加其他逻辑
|
|
16
|
-
* @param ns 命名空间 大多数情况下都不需要传入这个参数,除非你用到了命名空间。
|
|
17
|
-
* @param options 其他参数 大多数情况下,都不需要关注这个参数。
|
|
18
|
-
* options.keyPrefix 为所有翻译键添加前缀
|
|
19
|
-
* // JSON 文件:{ "greeting": { "welcome": "Welcome" } }
|
|
20
|
-
* const { t } = useTranslation('common', { keyPrefix: 'greeting' });
|
|
21
|
-
* // 使用时省略前缀
|
|
22
|
-
* t('welcome'); // 等价于 t('greeting:welcome')
|
|
23
|
-
* @returns { t, i18n, ready }
|
|
24
|
-
* t: 翻译方法
|
|
25
|
-
* i18n: i18next实例 访问 i18next 的完整 API(如切换语言、加载命名空间)
|
|
26
|
-
* i18n.changeLanguage('zh-CN'); 使用它切换语言,可以触发组件渲染。但是当前项目中是使用全局刷新的模式,来更新语言的。
|
|
27
|
-
* ready: 是否加载完成
|
|
28
|
-
*/
|
|
29
|
-
function useZtTranslation(ns?: NS, options?: Options) {
|
|
30
|
-
const { t: _tOld, i18n, ready } = useTranslation(ns, options);
|
|
31
|
-
|
|
32
|
-
// 扩展t方法,用于处理嵌套的翻译键
|
|
33
|
-
const tEnhance: EnhanceTFunc = (key, defaultValueOrOptions) => {
|
|
34
|
-
const { defaultValue, options } = getTFuncArgs(defaultValueOrOptions);
|
|
35
|
-
|
|
36
|
-
if (!key) {
|
|
37
|
-
// 情况1:键名为空,返回默认值或键名
|
|
38
|
-
console.error(
|
|
39
|
-
`tEnhance: 请不要传入空 key 值进行 t 函数执行,这将会导致直接返回空字符串!`
|
|
40
|
-
);
|
|
41
|
-
return defaultValue || key;
|
|
42
|
-
}
|
|
43
|
-
if (!i18n.exists(key)) {
|
|
44
|
-
// 情况2:键名不存在,返回默认值或键名
|
|
45
|
-
console.error(
|
|
46
|
-
`tEnhance: i18n-key '${key}' 不存在,请检查对应的 @/locales/resources/locales/xx.json 中是否存在对应值`
|
|
47
|
-
);
|
|
48
|
-
return defaultValue || key;
|
|
49
|
-
}
|
|
50
|
-
try {
|
|
51
|
-
return _tOld(key, options);
|
|
52
|
-
} catch (error) {
|
|
53
|
-
console.warn(`tEnhance: t 函数执行异常,请检查! key=${key}, err=`, error);
|
|
54
|
-
return defaultValue || key || "unknown";
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
return {
|
|
59
|
-
/**
|
|
60
|
-
* t函数的使用方式:基本上使用1、2两种方式就可以了。
|
|
61
|
-
* 1、t('key') // 基础用法
|
|
62
|
-
* 2、t('greeting', { name: 'John' }); // 对应 JSON: "greeting": "Hello {{name}}"
|
|
63
|
-
* 3、t('auth:login'); // 显式指定命名空间
|
|
64
|
-
*
|
|
65
|
-
* 关于t函数的第二个参数的说明。
|
|
66
|
-
* 为了防止一些异常情况,翻译失败。可以传入一个默认值。这个默认值就是原本的中文就行。
|
|
67
|
-
* 1、t('key', '默认值');
|
|
68
|
-
* 2、t('key', { defaultValue: '默认值', ...otherOptions });
|
|
69
|
-
*/
|
|
70
|
-
t: tEnhance,
|
|
71
|
-
i18n,
|
|
72
|
-
ready,
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
export { useZtTranslation as useTranslation, Trans };
|
|
1
|
+
import { useTranslation, Trans } from "react-i18next";
|
|
2
|
+
import type { TOpionsEx } from "./t-options";
|
|
3
|
+
import { getTFuncArgs } from "./t-options";
|
|
4
|
+
|
|
5
|
+
type Prams = Parameters<typeof useTranslation>;
|
|
6
|
+
type NS = Prams[0];
|
|
7
|
+
type Options = Prams[1];
|
|
8
|
+
|
|
9
|
+
type EnhanceTFunc = (
|
|
10
|
+
key: string,
|
|
11
|
+
defaultValueOrOptions: string | TOpionsEx
|
|
12
|
+
) => string;
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* 这里只是简单代理一下useTranslation,方便后续扩展或添加其他逻辑
|
|
16
|
+
* @param ns 命名空间 大多数情况下都不需要传入这个参数,除非你用到了命名空间。
|
|
17
|
+
* @param options 其他参数 大多数情况下,都不需要关注这个参数。
|
|
18
|
+
* options.keyPrefix 为所有翻译键添加前缀
|
|
19
|
+
* // JSON 文件:{ "greeting": { "welcome": "Welcome" } }
|
|
20
|
+
* const { t } = useTranslation('common', { keyPrefix: 'greeting' });
|
|
21
|
+
* // 使用时省略前缀
|
|
22
|
+
* t('welcome'); // 等价于 t('greeting:welcome')
|
|
23
|
+
* @returns { t, i18n, ready }
|
|
24
|
+
* t: 翻译方法
|
|
25
|
+
* i18n: i18next实例 访问 i18next 的完整 API(如切换语言、加载命名空间)
|
|
26
|
+
* i18n.changeLanguage('zh-CN'); 使用它切换语言,可以触发组件渲染。但是当前项目中是使用全局刷新的模式,来更新语言的。
|
|
27
|
+
* ready: 是否加载完成
|
|
28
|
+
*/
|
|
29
|
+
function useZtTranslation(ns?: NS, options?: Options) {
|
|
30
|
+
const { t: _tOld, i18n, ready } = useTranslation(ns, options);
|
|
31
|
+
|
|
32
|
+
// 扩展t方法,用于处理嵌套的翻译键
|
|
33
|
+
const tEnhance: EnhanceTFunc = (key, defaultValueOrOptions) => {
|
|
34
|
+
const { defaultValue, options } = getTFuncArgs(defaultValueOrOptions);
|
|
35
|
+
|
|
36
|
+
if (!key) {
|
|
37
|
+
// 情况1:键名为空,返回默认值或键名
|
|
38
|
+
console.error(
|
|
39
|
+
`tEnhance: 请不要传入空 key 值进行 t 函数执行,这将会导致直接返回空字符串!`
|
|
40
|
+
);
|
|
41
|
+
return defaultValue || key;
|
|
42
|
+
}
|
|
43
|
+
if (!i18n.exists(key)) {
|
|
44
|
+
// 情况2:键名不存在,返回默认值或键名
|
|
45
|
+
console.error(
|
|
46
|
+
`tEnhance: i18n-key '${key}' 不存在,请检查对应的 @/locales/resources/locales/xx.json 中是否存在对应值`
|
|
47
|
+
);
|
|
48
|
+
return defaultValue || key;
|
|
49
|
+
}
|
|
50
|
+
try {
|
|
51
|
+
return _tOld(key, options);
|
|
52
|
+
} catch (error) {
|
|
53
|
+
console.warn(`tEnhance: t 函数执行异常,请检查! key=${key}, err=`, error);
|
|
54
|
+
return defaultValue || key || "unknown";
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
return {
|
|
59
|
+
/**
|
|
60
|
+
* t函数的使用方式:基本上使用1、2两种方式就可以了。
|
|
61
|
+
* 1、t('key') // 基础用法
|
|
62
|
+
* 2、t('greeting', { name: 'John' }); // 对应 JSON: "greeting": "Hello {{name}}"
|
|
63
|
+
* 3、t('auth:login'); // 显式指定命名空间
|
|
64
|
+
*
|
|
65
|
+
* 关于t函数的第二个参数的说明。
|
|
66
|
+
* 为了防止一些异常情况,翻译失败。可以传入一个默认值。这个默认值就是原本的中文就行。
|
|
67
|
+
* 1、t('key', '默认值');
|
|
68
|
+
* 2、t('key', { defaultValue: '默认值', ...otherOptions });
|
|
69
|
+
*/
|
|
70
|
+
t: tEnhance,
|
|
71
|
+
i18n,
|
|
72
|
+
ready,
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export { useZtTranslation as useTranslation, Trans };
|