@_tc/template-core 0.2.0-bate.0 → 0.2.0-bate.10

package/fe/packages/common/i18n/en-US.js

@@ -1,10 +1,11 @@
 //#region packages/common/i18n/en-US.ts
 /**
-* UI component library default English language resources.
+* UI 组件库默认英文语言资源。
 *
-* Only built-in component copy belongs here. Applications can override or extend it with I18nProvider.resources.
+* 这里只放组件内置文案，业务项目可以通过 I18nProvider.resources 覆盖或追加。
 */
 var defaultEnglishResources = {
+	/** 通用操作文案。 */
 	common: {
 		tip: "Prompt",
 		confirm: "Confirm",
@@ -13,6 +14,7 @@ var defaultEnglishResources = {
 		submit: "Submit",
 		reset: "Reset"
 	},
+	/** UI 组件内置文案，按组件名分组。 */
 	components: {
 		breadcrumb: { close: "Close" },
 		confirmDialog: {
@@ -64,6 +66,7 @@ var defaultEnglishResources = {
 			rotateRight: "Rotate right",
 			flipHorizontal: "Flip horizontal",
 			flipVertical: "Flip vertical",
+			/** {index} 会在运行时由调用方传入的插值数据替换。 */
 			previewImage: "Preview image {index}"
 		},
 		modal: {

package/fe/packages/common/i18n/index.js

@@ -2,6 +2,7 @@ import "./default.js";
 import "./en-US.js";
 import { defaultLanguage, languageLocalKey, translations } from "./locales.js";
 //#region packages/common/i18n/index.ts
+/** 判断某个消息节点是否是可继续递归访问的普通字典。 */
 var isPlainI18nDictionary = (value) => {
 	return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 };
@@ -65,6 +66,10 @@ var translate = (state, key, fillingData, options) => {
 	const value = getI18nPathValue(state.resources[language], key) ?? getI18nPathValue(state.resources[fallbackLanguage], key) ?? options?.fallback ?? key;
 	return typeof value === "string" ? interpolateI18nMessage(value, fillingData) : value;
 };
+/**
+* 获取可用于持久化语言的浏览器 window。
+* Node、SSR 或测试环境下没有 window 时返回 undefined。
+*/
 var getBrowserWindow = () => {
 	return globalThis.window;
 };
@@ -92,6 +97,11 @@ var createInitialState = () => ({
 	storageKey: languageLocalKey,
 	persist: true
 });
+/**
+* 创建模块内部使用的最小 store。
+*
+* 这里只实现 getState / setState / subscribe，避免 common 层为了 i18n 引入状态管理依赖。
+*/
 var createI18nStore = () => {
 	let state;
 	const listeners = /* @__PURE__ */ new Set();
@@ -148,6 +158,7 @@ var createI18nStore = () => {
 		}
 	};
 };
+/** 全局 i18n store，React 适配层和非 React 代码共享这一份状态。 */
 var i18nStore = createI18nStore();
 /**
 * 对外使用的 i18n 函数。
@@ -156,7 +167,9 @@ var i18nStore = createI18nStore();
 var i18n = (key, fillingData, options) => {
 	return translate(i18nStore.getState(), key, fillingData, options);
 };
+/** i18n 的简写别名。 */
 var t = i18n;
+/** 兼容历史调用的别名，行为等同于 i18n。 */
 var getLanguage = i18n;
 //#endregion
 export { getI18nPathValue, getLanguage, i18n, i18nStore, interpolateI18nMessage, isPlainI18nDictionary, mergeI18nDictionary, mergeI18nResources, t, translate };

package/fe/packages/common/i18n/locales.js

@@ -1,8 +1,15 @@
 import { defaultLanguageResources } from "./default.js";
 import { defaultEnglishResources } from "./en-US.js";
 //#region packages/common/i18n/locales.ts
+/** 默认语言，作为初始化语言和翻译兜底语言使用。 */
 var defaultLanguage = "zh-CN";
+/** 默认保存用户语言偏好的 localStorage key。 */
 var languageLocalKey = "tc_language";
+/**
+* 内置语言资源。
+*
+* 业务项目可以通过 I18nProvider.resources、setResources 或 addResources 覆盖和追加。
+*/
 var translations = {
 	"zh-CN": defaultLanguageResources,
 	"en-US": defaultEnglishResources

package/fe/packages/common/index.d.ts

@@ -6,5 +6,6 @@ export * from "./i18n";
 export * from "./log";
 export * from "./number";
 export * from "./object";
+export * from "./rafTimer";
 export * from "./string";
 export * from "./types";

package/fe/packages/common/rafTimer.d.ts

@@ -0,0 +1,7 @@
+export type RafTimerId = number;
+export type RafTimerCallback<Args extends unknown[] = []> = (...args: Args) => void;
+export declare const rafSetTimeout: <Args extends unknown[]>(callback: RafTimerCallback<Args>, delay?: number, ...args: Args) => RafTimerId;
+export declare const rafClearTimeout: (timerId: RafTimerId) => void;
+export declare const rafSetInterval: <Args extends unknown[]>(callback: RafTimerCallback<Args>, delay?: number, ...args: Args) => RafTimerId;
+export declare const rafClearInterval: (timerId: RafTimerId) => void;
+export declare const clearRafTimer: (timerId: RafTimerId) => void;

package/fe/packages/common/rafTimer.js

@@ -0,0 +1,168 @@
+//#region packages/common/rafTimer.ts
+var FRAME_FALLBACK_DELAY = 16;
+var timerHost = globalThis;
+var rafTimers = /* @__PURE__ */ new Map();
+var rafTimerSeed = 0;
+/**
+* 统一修正延迟时间，避免传入 undefined 或负数。
+*
+* @param delay 原始延迟时间。
+* @returns 不小于 0 的延迟时间。
+*/
+var normalizeDelay = (delay) => Math.max(0, delay ?? 0);
+/**
+* 获取当前时间戳。
+*/
+var getNow = () => timerHost.performance?.now?.() ?? Date.now();
+/**
+* 创建帧调度器。
+*
+* 浏览器优先使用 requestAnimationFrame；否则回退到 setTimeout。
+*/
+var createFrameScheduler = () => {
+	const requestAnimationFrameRef = timerHost.requestAnimationFrame;
+	const cancelAnimationFrameRef = timerHost.cancelAnimationFrame;
+	if (typeof requestAnimationFrameRef === "function" && typeof cancelAnimationFrameRef === "function") return {
+		scheduleFrame: (callback) => requestAnimationFrameRef.call(timerHost, callback),
+		cancelFrame: (handle) => cancelAnimationFrameRef.call(timerHost, handle)
+	};
+	const setTimeoutRef = timerHost.setTimeout;
+	const clearTimeoutRef = timerHost.clearTimeout;
+	if (typeof setTimeoutRef !== "function" || typeof clearTimeoutRef !== "function") throw new Error("raf timer requires requestAnimationFrame or setTimeout/clearTimeout.");
+	return {
+		scheduleFrame: (callback) => setTimeoutRef.call(timerHost, () => callback(getNow()), FRAME_FALLBACK_DELAY),
+		cancelFrame: (handle) => clearTimeoutRef.call(timerHost, handle)
+	};
+};
+var frameScheduler;
+var getFrameScheduler = () => {
+	frameScheduler ??= createFrameScheduler();
+	return frameScheduler;
+};
+/**
+* 创建唯一的计时器 id。
+*
+* @returns 新的计时器 id。
+*/
+var createTimerId = () => {
+	rafTimerSeed += 1;
+	return rafTimerSeed;
+};
+/**
+* 删除并取消指定计时器。
+*
+* 步骤：
+* 1. 根据 id 查找计时器状态。
+* 2. 如果计时器不存在，直接结束。
+* 3. 取消下一帧回调，并从缓存中移除计时器。
+*
+* @param timerId 要取消的计时器 id。
+*/
+var deleteTimer = (timerId) => {
+	const timer = rafTimers.get(timerId);
+	if (!timer) return;
+	getFrameScheduler().cancelFrame(timer.frameId);
+	rafTimers.delete(timerId);
+};
+/**
+* 每一帧执行一次的调度函数。
+*
+* 步骤：
+* 1. 读取当前计时器状态。
+* 2. 对比当前时间和起始时间/上次执行时间，判断是否到达延迟。
+* 3. timeout 到点后执行一次并删除计时器。
+* 4. interval 到点后执行回调，并更新上次执行时间。
+* 5. 如果计时器仍然存在，继续注册下一帧。
+*
+* @param timerId 当前计时器 id。
+* @param currentTime requestAnimationFrame 或 fallback 传入的当前时间戳。
+*/
+var tick = (timerId, currentTime) => {
+	const timer = rafTimers.get(timerId);
+	if (!timer) return;
+	if (timer.type === "timeout" ? currentTime - timer.startTime >= timer.delay : currentTime - timer.lastRunTime >= timer.delay) {
+		if (timer.type === "timeout") {
+			rafTimers.delete(timerId);
+			timer.callback();
+			return;
+		}
+		timer.lastRunTime = currentTime;
+		timer.callback();
+	}
+	if (rafTimers.has(timerId)) timer.frameId = getFrameScheduler().scheduleFrame((nextTime) => tick(timerId, nextTime));
+};
+/**
+* 创建 requestAnimationFrame 计时器。
+*
+* 步骤：
+* 1. 检查当前运行环境是否支持 requestAnimationFrame。
+* 2. 创建计时器 id，并记录起始时间。
+* 3. 保存计时器类型、延迟、回调和帧 id 等状态。
+* 4. 注册第一帧调度。
+* 5. 将计时器状态写入缓存，并返回计时器 id。
+*
+* @param type 计时器类型。
+* @param callback 到点后执行的回调函数。
+* @param delay 延迟或间隔时间，单位毫秒。
+* @param args 传给回调函数的参数。
+* @returns 计时器 id。
+*/
+var createRafTimer = (type, callback, delay, args) => {
+	const timerId = createTimerId();
+	const startTime = getNow();
+	const timer = {
+		type,
+		delay: normalizeDelay(delay),
+		callback: () => callback(...args ?? []),
+		startTime,
+		lastRunTime: startTime,
+		frameId: 0
+	};
+	rafTimers.set(timerId, timer);
+	timer.frameId = getFrameScheduler().scheduleFrame((currentTime) => tick(timerId, currentTime));
+	return timerId;
+};
+/**
+* 使用 requestAnimationFrame 驱动，在指定延迟后执行一次回调。
+*
+* @param callback 延迟结束后执行的回调函数。
+* @param delay 延迟时间，单位毫秒，默认 0。
+* @param args 传给回调函数的参数。
+* @returns 计时器 id，可通过 rafClearTimeout 或 clearRafTimer 取消。
+*/
+var rafSetTimeout = (callback, delay, ...args) => createRafTimer("timeout", callback, delay, args);
+/**
+* 取消 rafSetTimeout 创建的计时器。
+*
+* @param timerId rafSetTimeout 返回的计时器 id。
+*/
+var rafClearTimeout = (timerId) => {
+	deleteTimer(timerId);
+};
+/**
+* 使用 requestAnimationFrame 驱动，按指定间隔重复执行回调。
+*
+* @param callback 每次间隔结束后执行的回调函数。
+* @param delay 间隔时间，单位毫秒，默认 0。
+* @param args 传给回调函数的参数。
+* @returns 计时器 id，可通过 rafClearInterval 或 clearRafTimer 取消。
+*/
+var rafSetInterval = (callback, delay, ...args) => createRafTimer("interval", callback, delay, args);
+/**
+* 取消 rafSetInterval 创建的计时器。
+*
+* @param timerId rafSetInterval 返回的计时器 id。
+*/
+var rafClearInterval = (timerId) => {
+	deleteTimer(timerId);
+};
+/**
+* 取消本模块创建的任意 requestAnimationFrame 计时器。
+*
+* @param timerId rafSetTimeout 或 rafSetInterval 返回的计时器 id。
+*/
+var clearRafTimer = (timerId) => {
+	deleteTimer(timerId);
+};
+//#endregion
+export { clearRafTimer, rafClearInterval, rafClearTimeout, rafSetInterval, rafSetTimeout };

package/fe/packages/common/string/index.d.ts

@@ -1,3 +1,12 @@
 export declare const isBlank: (value: string | null | undefined) => boolean;
 export declare const capitalize: (value: string) => string;
 export declare const kebabCase: (value: string) => string;
+type JoinStrValue = string | number | boolean | null | undefined;
+type JoinStrConditionalValue = readonly [condition: unknown, value: JoinStrValue];
+type JoinStrInput = JoinStrValue | JoinStrConditionalValue;
+type JoinStrOptions = {
+    separator?: string;
+};
+type JoinStrArgs = readonly JoinStrInput[] | readonly [...JoinStrInput[], JoinStrOptions];
+export declare const joinStr: (...strings: JoinStrArgs) => string;
+export {};

package/fe/packages/react/hooks/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./useBreadcrumb";
+export { default as useExecuteOnce } from "./useExecuteOnce";
+export * from "./useExecuteOnce";
+export { default as useInit } from "./useInit";
+export * from "./useLanguage";
+export { default as usePagination } from "./usePagination";
+export { default as useRefState } from "./useRefState";
+export { default as useWatch } from "./useWatch";
+export * from "./useWatch";

package/fe/packages/react/hooks/index.js

@@ -0,0 +1,8 @@
+import { useBreadcrumb } from "./useBreadcrumb.js";
+import { useLanguage } from "./useLanguage.js";
+import useInit from "./useInit.js";
+import useExecuteOnce, { executionPhaseType } from "./useExecuteOnce.js";
+import useRefState from "./useRefState.js";
+import useWatch, { defaultCompare, identityCompare, shallowCompare } from "./useWatch.js";
+import usePagination from "./usePagination.js";
+export { defaultCompare, executionPhaseType, identityCompare, shallowCompare, useBreadcrumb, useExecuteOnce, useInit, useLanguage, usePagination, useRefState, useWatch };

package/fe/packages/react/hooks/useRefState.d.ts

@@ -1,17 +1,9 @@
 import { RefObject } from "react";
-type SetState<S> = (value: S | ((preValue: S) => S), callback?: CallBackFN<S>) => void;
-type CallBackFN<T> = (value: T) => void;
+type SetState<S> = (value: S | ((preValue: S) => S)) => void;
 type RefState<T> = RefObject<{
     data: T;
 }>;
-export default function useRefState<S>(initialState: S | (() => S)): [
-    S,
-    SetState<S>,
-    RefState<S>
-];
-export default function useRefState<S = undefined>(): [
-    S | undefined,
-    SetState<S | undefined>,
-    RefState<S | undefined>
-];
+type DelayTiming = number | undefined;
+export default function useRefState<S>(initialState: S | (() => S), delayTiming?: DelayTiming): [S, SetState<S>, RefState<S>];
+export default function useRefState<S = undefined>(): [S | undefined, SetState<S | undefined>, RefState<S | undefined>];
 export {};

package/fe/packages/react/hooks/useRefState.js

@@ -1,23 +1,33 @@
 import useInit from "./useInit.js";
+import { rafClearTimeout, rafSetTimeout } from "../../common/rafTimer.js";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 //#region packages/react/hooks/useRefState.ts
-function useRefState(initialState) {
+var delayedCall = (call, delayTiming) => {
+	if (delayTiming) return rafSetTimeout(call, delayTiming);
+	call();
+};
+function useRefState(initialState, delayTiming) {
 	const [v, setValue] = useState(initialState);
 	const data = useRef({ data: void 0 });
 	const callbackRef = useRef(null);
 	const [callbackVersion, setCallbackVersion] = useState(0);
+	const refdelayTimer = useRef(void 0);
 	useInit(() => {
 		data.current.data = v;
 	});
-	const setData = useCallback((action, callback) => {
+	const setData = useCallback((action) => {
+		if (refdelayTimer.current) {
+			rafClearTimeout(refdelayTimer.current);
+			refdelayTimer.current = void 0;
+		}
 		const value = typeof action === "function" ? action(data.current.data) : action;
-		setValue(value);
+		refdelayTimer.current = delayedCall(() => setValue(value), delayTiming);
 		data.current.data = value;
-		if (callback) {
-			callbackRef.current = callback;
-			setCallbackVersion((version) => version + 1);
-		}
-	}, [setCallbackVersion, setValue]);
+	}, [
+		setCallbackVersion,
+		setValue,
+		delayTiming
+	]);
 	useLayoutEffect(() => {
 		if (callbackRef.current) {
 			const callback = callbackRef.current;

package/fe/packages/react/ui/components/DataTable/dataTableWidth.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from "react";
+export type DataTableWidth = number | string;
+export declare const normalizeTableWidth: (value: DataTableWidth | undefined) => string | undefined;
+type TableColumnWidthLike = {
+    key?: PropertyKey;
+    width?: DataTableWidth;
+    isAction?: boolean;
+};
+export declare const getDataTableColumnWidth: <T extends TableColumnWidthLike>(column: T, defaultColumnWidth: DataTableWidth, actionColumnWidth?: number) => string;
+export declare const getDataTableColumnStyle: <T extends TableColumnWidthLike>(column: T, defaultColumnWidth: DataTableWidth, actionColumnWidth?: number) => CSSProperties;
+export declare const getDataTableFixedOffset: (widths: string[]) => string;
+export {};

package/fe/packages/react/ui/components/DataTable/dataTableWidth.js

@@ -0,0 +1,33 @@
+//#region packages/react/ui/components/DataTable/dataTableWidth.ts
+var numericWidthPattern = /^-?(?:\d+|\d*\.\d+)$/;
+var hasWidthValue = (value) => value !== void 0 && value !== null && value !== "";
+var normalizeTableWidth = (value) => {
+	if (!hasWidthValue(value)) return;
+	if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : void 0;
+	const trimmed = value.trim();
+	if (trimmed === "") return;
+	return numericWidthPattern.test(trimmed) ? `${trimmed}px` : trimmed;
+};
+var hasExplicitWidth = (value) => value !== void 0 && value !== null && value !== "";
+var getDataTableColumnWidth = (column, defaultColumnWidth, actionColumnWidth = 96) => {
+	const hasAction = column.isAction ?? column.key === "action";
+	return normalizeTableWidth(hasExplicitWidth(column.width) ? column.width : hasAction ? actionColumnWidth : defaultColumnWidth) ?? "0px";
+};
+var getDataTableColumnStyle = (column, defaultColumnWidth, actionColumnWidth = 96) => {
+	const hasAction = column.isAction ?? column.key === "action";
+	if (hasExplicitWidth(column.width) || hasAction) {
+		const width = getDataTableColumnWidth(column, defaultColumnWidth, actionColumnWidth);
+		return {
+			width,
+			minWidth: width
+		};
+	}
+	return { minWidth: normalizeTableWidth(defaultColumnWidth) ?? "0px" };
+};
+var getDataTableFixedOffset = (widths) => {
+	if (widths.length === 0) return "0px";
+	if (widths.length === 1) return widths[0];
+	return `calc(${widths.join(" + ")})`;
+};
+//#endregion
+export { getDataTableColumnStyle, getDataTableColumnWidth, getDataTableFixedOffset, normalizeTableWidth };

package/fe/packages/react/ui/components/DataTable/dataTableWidth.test.js

@@ -0,0 +1,39 @@
+import { getDataTableColumnStyle, getDataTableColumnWidth, getDataTableFixedOffset, normalizeTableWidth } from "./dataTableWidth.js";
+import assert from "node:assert/strict";
+import test from "node:test";
+//#region packages/react/ui/components/DataTable/dataTableWidth.test.ts
+test("normalizeTableWidth converts numeric widths to px", () => {
+	assert.equal(normalizeTableWidth(160), "160px");
+	assert.equal(normalizeTableWidth("160"), "160px");
+	assert.equal(normalizeTableWidth("160px"), "160px");
+	assert.equal(normalizeTableWidth("calc(100% - 20px)"), "calc(100% - 20px)");
+	assert.equal(normalizeTableWidth(""), void 0);
+});
+test("getDataTableColumnWidth falls back to default and action widths", () => {
+	assert.equal(getDataTableColumnWidth({ key: "name" }, 120), "120px");
+	assert.equal(getDataTableColumnWidth({ key: "action" }, 120), "96px");
+	assert.equal(getDataTableColumnWidth({
+		key: "name",
+		width: "180"
+	}, 120), "180px");
+	assert.equal(getDataTableColumnWidth({
+		key: "name",
+		isAction: true
+	}, 120), "96px");
+});
+test("getDataTableColumnStyle keeps width and minWidth aligned", () => {
+	assert.deepEqual(getDataTableColumnStyle({
+		key: "name",
+		width: "240"
+	}, 120), {
+		width: "240px",
+		minWidth: "240px"
+	});
+	assert.deepEqual(getDataTableColumnStyle({ key: "name" }, 120), { minWidth: "120px" });
+});
+test("getDataTableFixedOffset combines widths in order", () => {
+	assert.equal(getDataTableFixedOffset([]), "0px");
+	assert.equal(getDataTableFixedOffset(["48px"]), "48px");
+	assert.equal(getDataTableFixedOffset(["48px", "120px"]), "calc(48px + 120px)");
+});
+//#endregion

package/fe/packages/react/ui/components/DataTable/index.d.ts

@@ -24,7 +24,7 @@ interface DataTableProps<T = Record<string, unknown>> {
     rowSelection?: RowSelection<T>;
     pagination?: PaginationProps;
     loading?: boolean;
-    defaultColumnWidth?: number;
+    defaultColumnWidth?: number | string;
 }
 export declare function DataTable<T = Record<string, unknown>>({ columns, data: pData, loading, rowKey, rowSelection, defaultColumnWidth, pagination: pPagination, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 export { ActionBtn } from "./ActionBtn";

package/fe/packages/react/ui/components/DataTable/index.js

@@ -10,13 +10,14 @@ import "../table/index.js";
 import { Skeleton } from "../Skeleton/Skeleton.js";
 import "../Skeleton/index.js";
 import { ActionBtn } from "./ActionBtn.js";
+import { getDataTableColumnStyle, getDataTableColumnWidth, getDataTableFixedOffset, normalizeTableWidth } from "./dataTableWidth.js";
 import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/react/ui/components/DataTable/index.tsx
 var defaultRowKey = "id";
 var rowSelectionColumnWidth = 48;
 var actionColumnWidth = 96;
-var zeroOffset = "0px";
+var rowSelectionColumnWidthStyle = normalizeTableWidth(rowSelectionColumnWidth) ?? "48px";
 var getRowKey = (record, index, rowKey = defaultRowKey) => {
 	if (typeof rowKey === "function") return rowKey(record, index);
 	const key = record[rowKey];
@@ -32,27 +33,6 @@ var renderCellContent = (column, value, record, rowIndex, hasAction) => {
 	});
 	return column.render ? column.render(value, record, rowIndex) : value;
 };
-var getColumnWidth = (column, defaultColumnWidth) => {
-	const hasAction = column.isAction ?? column.key === "action";
-	if (column.width) return column.width;
-	return `${hasAction ? actionColumnWidth : defaultColumnWidth}px`;
-};
-var getColumnStyle = (column, defaultColumnWidth) => {
-	const hasAction = column.isAction ?? column.key === "action";
-	if (column.width || hasAction) {
-		const width = getColumnWidth(column, defaultColumnWidth);
-		return {
-			width,
-			minWidth: width
-		};
-	}
-	return { minWidth: defaultColumnWidth };
-};
-var getFixedOffset = (widths) => {
-	if (widths.length === 0) return zeroOffset;
-	if (widths.length === 1) return widths[0];
-	return `calc(${widths.join(" + ")})`;
-};
 function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowSelection, defaultColumnWidth = 100, pagination: pPagination }) {
 	const t = useI18n();
 	const getCellValue = (record, column) => record[column.dataIndex || column.key];
@@ -127,21 +107,21 @@ function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowS
 				column,
 				index,
 				fixed: column.fixed ?? (hasAction ? "right" : void 0),
-				width: getColumnWidth(column, defaultColumnWidth)
+				width: getDataTableColumnWidth(column, defaultColumnWidth, actionColumnWidth)
 			};
 		});
-		const leftOffsetWidths = rowSelection ? [`${rowSelectionColumnWidth}px`] : [];
+		const leftOffsetWidths = rowSelection ? [rowSelectionColumnWidthStyle] : [];
 		const leftOffsets = /* @__PURE__ */ new Map();
 		for (const item of columnsWithFixed) {
 			if (item.fixed !== "left") continue;
-			leftOffsets.set(item.index, getFixedOffset(leftOffsetWidths));
+			leftOffsets.set(item.index, getDataTableFixedOffset(leftOffsetWidths));
 			leftOffsetWidths.push(item.width);
 		}
 		const rightOffsetWidths = [];
 		const rightOffsets = /* @__PURE__ */ new Map();
 		for (const item of [...columnsWithFixed].reverse()) {
 			if (item.fixed !== "right") continue;
-			rightOffsets.set(item.index, getFixedOffset(rightOffsetWidths));
+			rightOffsets.set(item.index, getDataTableFixedOffset(rightOffsetWidths));
 			rightOffsetWidths.push(item.width);
 		}
 		return columnsWithFixed.map((item) => ({
@@ -162,8 +142,8 @@ function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowS
 					fixed: "left",
 					showSeparator: false,
 					style: {
-						width: "48px",
-						minWidth: "48px"
+						width: rowSelectionColumnWidthStyle,
+						minWidth: rowSelectionColumnWidthStyle
 					},
 					children: [rowSelection.beforeCheckboxNode, /* @__PURE__ */ jsx(Checkbox, {
 						checked: allChecked,
@@ -177,7 +157,7 @@ function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowS
 						fixed,
 						fixedOffset,
 						hideSeparatorWhenFixedActive: fixed === "right",
-						style: getColumnStyle(column, defaultColumnWidth),
+						style: getDataTableColumnStyle(column, defaultColumnWidth, actionColumnWidth),
 						children: column.title
 					}, column.key);
 				})] }) }), /* @__PURE__ */ jsx(TableBody, { children: data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
@@ -196,8 +176,8 @@ function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowS
 					return /* @__PURE__ */ jsxs(TableRow, { children: [rowSelection && /* @__PURE__ */ jsx(TableCell, {
 						fixed: "left",
 						style: {
-							width: "48px",
-							minWidth: "48px"
+							width: rowSelectionColumnWidthStyle,
+							minWidth: rowSelectionColumnWidthStyle
 						},
 						children: /* @__PURE__ */ jsx(Checkbox, {
 							checked: selectedKeySet.has(recordKey),
@@ -211,7 +191,7 @@ function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowS
 							isAction: hasAction,
 							fixed,
 							fixedOffset,
-							style: getColumnStyle(column, defaultColumnWidth),
+							style: getDataTableColumnStyle(column, defaultColumnWidth, actionColumnWidth),
 							children: renderCellContent(column, value, record, rowIndex, hasAction)
 						}, column.key);
 					})] }, recordKey);

package/fe/packages/react/ui/components/Textarea/Textarea.d.ts

@@ -1,5 +1,5 @@
 import type { ChangeEvent, TextareaHTMLAttributes } from "react";
-export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange" | "defaultValue"> & {
+export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'defaultValue'> & {
     value?: string;
     onChange?: (v: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
     defaultValue?: string;

package/fe/packages/react/ui/components/Textarea/Textarea.js

@@ -21,7 +21,7 @@ var Textarea = forwardRef(({ className, textareaClassName, value: controlledValu
 		setInternalValue
 	]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("tc-ui-textarea relative w-fit", className),
+		className: cn("tc-ui-textarea relative", className),
 		children: [/* @__PURE__ */ jsx("textarea", {
 			ref: setRefs,
 			value,

package/fe/packages/react/ui/components/types/baseType.d.ts

@@ -0,0 +1,21 @@
+export type ColumnDefForKey<T> = {
+    [K in keyof T]: {
+        key: K;
+        title: string;
+        dataIndex?: string;
+        width?: number | string;
+        isAction?: boolean;
+        render?: (value: T[K], record: T, index: number) => React.ReactNode;
+        renderExport?: (value: T[K], record: T, index: number) => React.ReactNode;
+    };
+}[keyof T];
+export type ColumnDefAction<T> = {
+    key: 'action';
+    title: string;
+    dataIndex?: string;
+    width?: number | string;
+    isAction?: boolean;
+    render?: (value: unknown, record: T, index: number) => React.ReactNode;
+    renderExport?: (value: unknown, record: T, index: number) => React.ReactNode;
+};
+export type ColumnDef<T = Record<string, unknown>> = ColumnDefForKey<T> | ColumnDefAction<T>;

package/model/frontend/src/common/language.d.ts

@@ -1,2 +1,13 @@
-import type { I18nInterpolationValues, I18nTranslateOptions } from "../../../../fe/packages/react/ui/i18n/index";
+import type { I18nAddResourcesOptions, I18nDictionary, I18nInterpolationValues, I18nLanguage, I18nResources, I18nSetResourcesOptions, I18nTranslateOptions } from "../../../../fe/packages/react/ui/i18n/index";
+export declare const addLanguageResources: (language: I18nLanguage, messages: I18nDictionary, options?: I18nAddResourcesOptions) => void;
+export declare const setLanguage: (language: I18nLanguage) => void;
+export declare const setFallbackLanguage: (language: I18nLanguage) => void;
+export declare const setResources: (resources: I18nResources, options?: I18nSetResourcesOptions) => void;
+export declare const getCurrentLanguage: () => string;
+export declare const getFallbackLanguage: () => string;
+export declare const getI18nResources: () => Partial<Record<string, I18nDictionary>>;
+export declare const getSupportedLanguages: () => string[];
+export declare const registerFrontendI18nResources: (resources?: I18nResources) => Promise<void>;
 export declare const getText: (key: string, fillingData?: I18nInterpolationValues, options?: I18nTranslateOptions) => string;
+export declare const t: <T = string>(key: string, fillingData?: I18nInterpolationValues, options?: I18nTranslateOptions) => string | T;
+export type { I18nAddResourcesOptions, I18nDictionary, I18nInterpolationValues, I18nLanguage, I18nResources, I18nSetResourcesOptions, I18nTranslateOptions, };

package/model/frontend/src/hooks/useText.d.ts

@@ -0,0 +1,3 @@
+import type { I18nInterpolationValues, I18nTranslateOptions } from "../../../../fe/packages/react/ui/i18n/index";
+export type TextTranslator = <T = string>(key: string, fillingData?: I18nInterpolationValues, options?: I18nTranslateOptions) => T | string;
+export declare const useText: () => TextTranslator;

package/model/frontend/src/language/index.d.ts

@@ -1,6 +1,4 @@
-import type { I18nResources } from "../../../../fe/packages/react/ui/i18n/index";
 export declare const i18nKeyPrefix = "$i18n::";
-export declare const frontendI18nResources: I18nResources;
 export declare const withI18nKey: (key: string) => string;
 export declare const frontendLangKeys: {
     readonly appTitle: string;