@_tc/template-core 0.2.0-bate.7 → 0.2.0-bate.9

package/AGENT_README.md

@@ -19,9 +19,11 @@ TemplateCore 是一个 TypeScript + Koa + React 的后台框架包。它提供
 | --- | --- |
 | `@_tc/template-core` | `serverStart`、`baseFn`、Koa/Controller/Service 类型。 |
 | `@_tc/template-core/bundler` | `buildFE()`、`buildBE()`。 |
-| `@_tc/template-core/fe` | 前端初始化、动态组件渲染辅助、请求方法、Dashboard/Schema 类型、token 工具、共享状态、业务前端组件。 |
+| `@_tc/template-core/fe` | 前端初始化、动态组件渲染辅助、请求方法、Dashboard/Schema 类型、token 工具、RAF 计时器、共享状态、业务前端组件。 |
+| `@_tc/template-core/fe/main` | 前端初始化入口。 |
 | `@_tc/template-core/fe/common/request` | 请求实例、请求方法和请求类型的显式子路径。 |
 | `@_tc/template-core/fe/rc` | React UI 组件和 SchemaForm 组件。 |
+| `@_tc/template-core/fe/rc/hooks` | React hooks 汇总入口。 |
 | `@_tc/template-core/fe/tailwind_ui.css` | 内置前端/UI 全局样式。 |
 | `@_tc/template-core/model` | `ModelDataType` 等 model 配置类型。 |
 
@@ -412,7 +414,7 @@ import { Button, DataTable, Form, Input, Modal, Select } from '@_tc/template-cor
 常用前端能力：
 
 - 请求方法：`api`、`request`、`get`、`post`、`put`、`patch`、`del`。
-- RAF 计时器：`rafSetTimeout`、`rafSetInterval`、`rafClearTimeout`、`rafClearInterval`、`clearRafTimer`。
+- RAF 风格计时器：`rafSetTimeout`、`rafSetInterval`、`rafClearTimeout`、`rafClearInterval`、`clearRafTimer`，缺少 RAF 时自动降级到 `setTimeout`。
 - 请求类型：`BaseResponse`、`PageParams`、`PageResponse`、`RequestConfig`、`ResponseConfig`、`AxiosError`。
 - 请求 header：自动添加 `s_t`、`s_sign`、`projk`；存在短 token 时添加 `Authorization: Bearer ${token}`。
 - 默认会先设置 `Content-Type: application/json`；如果是上传文件、`FormData` 或其他内容类型，请在请求配置里显式覆盖。
@@ -424,7 +426,7 @@ import { Button, DataTable, Form, Input, Modal, Select } from '@_tc/template-cor
 - 多语言：`addLanguageResources()` / `addResources()` 追加某语种文案，`addLanguage()` 新增语种，`setLanguage()` 切换语言，配置文案可写 `$i18n::...`。
 - 主题：`ThemeSwitch` 会同步根节点 `dark` class 和 `localStorage`。
 - `Input type="password"` 会自动显示密码显隐按钮；`allowClear` 不作用于密码输入。
-- RAF 计时器只在浏览器环境可用，不适合 Node 侧调用。
+- RAF 风格计时器由 `@tc/common/rafTimer` 提供，浏览器优先使用 RAF，Node/SSR 自动降级到 `setTimeout`。
 
 不要直接依赖 `frontend/src/...`、`packages/react/ui/...` 这类包内部路径。
 

package/README.md

@@ -176,13 +176,15 @@ http://localhost:9000/dash?projk=demo
 
 ## 常用公开入口
 
-完整 exports 以发布包内 `package.json` 为准，除下表外还包含 `./fe/main`、`./fe/*`、`./fe/rc/*`、`./fe/rc/hooks` 等子路径。
+完整 exports 以发布包内 `package.json` 为准，除下表外还包含 `./fe/main`、`./fe/common/request`、`./fe/*`、`./fe/rc/*`、`./fe/rc/hooks` 等子路径。
 
 | 入口 | 用途 |
 | --- | --- |
 | `@_tc/template-core` | 服务启动、基础 Controller/Service、Koa 类型 |
 | `@_tc/template-core/bundler` | 构建入口，提供前端资源构建 `buildFE` 和消费方 Node/backend 构建 `buildBE` |
 | `@_tc/template-core/fe` | 前端初始化、动态组件渲染辅助、Dash 路由扩展、请求方法、SchemaPage 事件、token 工具、共享状态和内置前端组件 |
+| `@_tc/template-core/fe/main` | 前端初始化入口 |
+| `@_tc/template-core/fe/common/request` | 请求实例、请求方法和请求类型的显式子路径 |
 | `@_tc/template-core/fe/rc` | UI/SchemaForm 组件和类型 |
 | `@_tc/template-core/fe/rc/hooks` | React hooks 汇总入口 |
 | `@_tc/template-core/fe/tailwind_ui.css` | 前端全局样式入口，源码对应 `frontend/src/main.css` |
@@ -376,6 +378,7 @@ import type {
 | SchemaForm 类型 | `FormFieldSchema`、`SchemaFormComponentsMap`、`SchemaFormNamespace`、`SelectProps` |
 | 请求方法 | `api`、`request`、`get`、`post`、`put`、`patch`、`del` |
 | 请求类型 | `BaseResponse`、`PageParams`、`PageResponse`、`RequestConfig`、`ResponseConfig`、`AxiosError` |
+| RAF 风格计时器 | `rafSetTimeout`、`rafSetInterval`、`rafClearTimeout`、`rafClearInterval`、`clearRafTimer`、`RafTimerId`、`RafTimerCallback` |
 | Token 工具 | `getAuthToken`、`setAuthToken`、`clearAuthToken`、`localKeyMap` |
 | 多语言工具 | `getText`、`t`、`addLanguage`、`addLanguageResources`、`addResources`、`setLanguage`、`setFallbackLanguage`、`setResources`、`getCurrentLanguage`、`getFallbackLanguage`、`getSupportedLanguages` |
 | 请求冻结 | `apiFreezerStore`、`useApiFreezer`、`FreezeState`、`ApiFreezerRequestMatcher` |
@@ -564,8 +567,12 @@ initThemeMode()
 applyThemeMode('dark', true)
 ```
 
+RAF 风格计时器由 `@tc/common/rafTimer` 提供，浏览器优先使用 `requestAnimationFrame`，缺少 RAF 时自动降级到 `setTimeout`。
+
 `@_tc/template-core/fe/rc` 和 `@_tc/template-core/fe/rc/hooks` 也会随发布包提供对应 UI 与 hooks 入口；hooks 汇总入口包含 `useBreadcrumb`、`useExecuteOnce`、`useInit`、`useLanguage`、`usePagination`、`useRefState`、`useWatch`。
 
+`useRefState` 支持可选的 `delayTiming` 参数，传入大于 0 的值时会延迟 state 提交，并复用 `@tc/common/rafTimer` 的浏览器优先、Node/SSR 自动降级计时器实现。
+
 ### 前端请求封装详解
 
 框架内置的请求封装基于 `@tc/common/http`，底层使用原生 `fetch` API，实现了类似 Axios 的接口和拦截器机制，提供了签名、鉴权、错误处理等能力。

package/cjs/packages/common/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./guards/index.js`),t=require(`./array/index.js`),n=require(`./cache/LRUCache.js`),r=require(`./http/index.js`),i=require(`./i18n/default.js`),a=require(`./i18n/en-US.js`),o=require(`./i18n/locales.js`),s=require(`./i18n/index.js`),c=require(`./log/index.js`),l=require(`./number/index.js`),u=require(`./object/filterEmpty.js`),d=require(`./object/index.js`),f=require(`./string/index.js`);exports.ANSI_RESET=c.ANSI_RESET,exports.FetchAxios=r.FetchAxios,exports.LRUCache=n.LRUCache,exports.ansiColors=c.ansiColors,exports.axios=r.axios,exports.capitalize=f.capitalize,exports.chunk=t.chunk,exports.clamp=l.clamp,exports.colorLog=c.colorLog,exports.colorize=c.colorize,exports.compact=t.compact,exports.createInstance=r.createInstance,exports.defaultEnglishResources=a.defaultEnglishResources,exports.defaultLanguage=o.defaultLanguage,exports.defaultLanguageResources=i.defaultLanguageResources,exports.filterEmpty=u.filterEmpty,exports.filtereEmpty=u.filtereEmpty,exports.getI18nPathValue=s.getI18nPathValue,exports.getLanguage=s.getLanguage,exports.groupBy=t.groupBy,exports.i18n=s.i18n,exports.i18nStore=s.i18nStore,exports.interpolateI18nMessage=s.interpolateI18nMessage,exports.isBlank=f.isBlank,exports.isBoolean=e.isBoolean,exports.isFunction=e.isFunction,exports.isNil=e.isNil,exports.isNonNullable=e.isNonNullable,exports.isNumber=e.isNumber,exports.isPlainI18nDictionary=s.isPlainI18nDictionary,exports.isPlainObject=e.isPlainObject,exports.isString=e.isString,exports.joinColorized=c.joinColorized,exports.joinStr=f.joinStr,exports.kebabCase=f.kebabCase,exports.languageLocalKey=o.languageLocalKey,exports.logColor=c.logColor,exports.logColorized=c.logColorized,exports.logGreen=c.logGreen,exports.logJoinColorized=c.logJoinColorized,exports.logPink=c.logPink,exports.logRed=c.logRed,exports.logWhite=c.logWhite,exports.logYellow=c.logYellow,exports.mapValues=d.mapValues,exports.mergeI18nDictionary=s.mergeI18nDictionary,exports.mergeI18nResources=s.mergeI18nResources,exports.omit=d.omit,exports.pick=d.pick,exports.t=s.t,exports.toArray=t.toArray,exports.toFiniteNumber=l.toFiniteNumber,exports.translate=s.translate,exports.translations=o.translations,exports.uniqueBy=t.uniqueBy;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./guards/index.js`),t=require(`./array/index.js`),n=require(`./cache/LRUCache.js`),r=require(`./http/index.js`),i=require(`./i18n/default.js`),a=require(`./i18n/en-US.js`),o=require(`./i18n/locales.js`),s=require(`./i18n/index.js`),c=require(`./log/index.js`),l=require(`./number/index.js`),u=require(`./object/filterEmpty.js`),d=require(`./object/index.js`),f=require(`./rafTimer.js`),p=require(`./string/index.js`);exports.ANSI_RESET=c.ANSI_RESET,exports.FetchAxios=r.FetchAxios,exports.LRUCache=n.LRUCache,exports.ansiColors=c.ansiColors,exports.axios=r.axios,exports.capitalize=p.capitalize,exports.chunk=t.chunk,exports.clamp=l.clamp,exports.clearRafTimer=f.clearRafTimer,exports.colorLog=c.colorLog,exports.colorize=c.colorize,exports.compact=t.compact,exports.createInstance=r.createInstance,exports.defaultEnglishResources=a.defaultEnglishResources,exports.defaultLanguage=o.defaultLanguage,exports.defaultLanguageResources=i.defaultLanguageResources,exports.filterEmpty=u.filterEmpty,exports.filtereEmpty=u.filtereEmpty,exports.getI18nPathValue=s.getI18nPathValue,exports.getLanguage=s.getLanguage,exports.groupBy=t.groupBy,exports.i18n=s.i18n,exports.i18nStore=s.i18nStore,exports.interpolateI18nMessage=s.interpolateI18nMessage,exports.isBlank=p.isBlank,exports.isBoolean=e.isBoolean,exports.isFunction=e.isFunction,exports.isNil=e.isNil,exports.isNonNullable=e.isNonNullable,exports.isNumber=e.isNumber,exports.isPlainI18nDictionary=s.isPlainI18nDictionary,exports.isPlainObject=e.isPlainObject,exports.isString=e.isString,exports.joinColorized=c.joinColorized,exports.joinStr=p.joinStr,exports.kebabCase=p.kebabCase,exports.languageLocalKey=o.languageLocalKey,exports.logColor=c.logColor,exports.logColorized=c.logColorized,exports.logGreen=c.logGreen,exports.logJoinColorized=c.logJoinColorized,exports.logPink=c.logPink,exports.logRed=c.logRed,exports.logWhite=c.logWhite,exports.logYellow=c.logYellow,exports.mapValues=d.mapValues,exports.mergeI18nDictionary=s.mergeI18nDictionary,exports.mergeI18nResources=s.mergeI18nResources,exports.omit=d.omit,exports.pick=d.pick,exports.rafClearInterval=f.rafClearInterval,exports.rafClearTimeout=f.rafClearTimeout,exports.rafSetInterval=f.rafSetInterval,exports.rafSetTimeout=f.rafSetTimeout,exports.t=s.t,exports.toArray=t.toArray,exports.toFiniteNumber=l.toFiniteNumber,exports.translate=s.translate,exports.translations=o.translations,exports.uniqueBy=t.uniqueBy;

package/cjs/packages/common/rafTimer.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=16,t=globalThis,n=new Map,r=0,i=e=>Math.max(0,e??0),a=()=>t.performance?.now?.()??Date.now(),o=()=>{let n=t.requestAnimationFrame,r=t.cancelAnimationFrame;if(typeof n==`function`&&typeof r==`function`)return{scheduleFrame:e=>n.call(t,e),cancelFrame:e=>r.call(t,e)};let i=t.setTimeout,o=t.clearTimeout;if(typeof i!=`function`||typeof o!=`function`)throw Error(`raf timer requires requestAnimationFrame or setTimeout/clearTimeout.`);return{scheduleFrame:n=>i.call(t,()=>n(a()),e),cancelFrame:e=>o.call(t,e)}},s,c=()=>(s??=o(),s),l=()=>(r+=1,r),u=e=>{let t=n.get(e);t&&(c().cancelFrame(t.frameId),n.delete(e))},d=(e,t)=>{let r=n.get(e);if(r){if(r.type===`timeout`?t-r.startTime>=r.delay:t-r.lastRunTime>=r.delay){if(r.type===`timeout`){n.delete(e),r.callback();return}r.lastRunTime=t,r.callback()}n.has(e)&&(r.frameId=c().scheduleFrame(t=>d(e,t)))}},f=(e,t,r,o)=>{let s=l(),u=a(),f={type:e,delay:i(r),callback:()=>t(...o??[]),startTime:u,lastRunTime:u,frameId:0};return n.set(s,f),f.frameId=c().scheduleFrame(e=>d(s,e)),s},p=(e,t,...n)=>f(`timeout`,e,t,n),m=e=>{u(e)},h=(e,t,...n)=>f(`interval`,e,t,n),g=e=>{u(e)},_=e=>{u(e)};exports.clearRafTimer=_,exports.rafClearInterval=g,exports.rafClearTimeout=m,exports.rafSetInterval=h,exports.rafSetTimeout=p;

package/esm/packages/common/index.js

@@ -10,5 +10,6 @@ import { ANSI_RESET as j, ansiColors as M, colorLog as N, colorize as P, joinCol
 import { clamp as W, toFiniteNumber as G } from "./number/index.js";
 import { filterEmpty as K, filtereEmpty as q } from "./object/filterEmpty.js";
 import { mapValues as J, omit as Y, pick as X } from "./object/index.js";
-import { capitalize as Z, isBlank as Q, joinStr as $, kebabCase as ee } from "./string/index.js";
-export { j as ANSI_RESET, p as FetchAxios, f as LRUCache, M as ansiColors, m as axios, Z as capitalize, s as chunk, W as clamp, N as colorLog, P as colorize, c as compact, h as createInstance, _ as defaultEnglishResources, v as defaultLanguage, g as defaultLanguageResources, K as filterEmpty, q as filtereEmpty, x as getI18nPathValue, S as getLanguage, l as groupBy, C as i18n, w as i18nStore, T as interpolateI18nMessage, Q as isBlank, e as isBoolean, t as isFunction, n as isNil, r as isNonNullable, i as isNumber, E as isPlainI18nDictionary, a as isPlainObject, o as isString, F as joinColorized, $ as joinStr, ee as kebabCase, y as languageLocalKey, I as logColor, L as logColorized, R as logGreen, z as logJoinColorized, B as logPink, V as logRed, H as logWhite, U as logYellow, J as mapValues, D as mergeI18nDictionary, O as mergeI18nResources, Y as omit, X as pick, k as t, u as toArray, G as toFiniteNumber, A as translate, b as translations, d as uniqueBy };
+import { clearRafTimer as Z, rafClearInterval as Q, rafClearTimeout as $, rafSetInterval as ee, rafSetTimeout as te } from "./rafTimer.js";
+import { capitalize as ne, isBlank as re, joinStr as ie, kebabCase as ae } from "./string/index.js";
+export { j as ANSI_RESET, p as FetchAxios, f as LRUCache, M as ansiColors, m as axios, ne as capitalize, s as chunk, W as clamp, Z as clearRafTimer, N as colorLog, P as colorize, c as compact, h as createInstance, _ as defaultEnglishResources, v as defaultLanguage, g as defaultLanguageResources, K as filterEmpty, q as filtereEmpty, x as getI18nPathValue, S as getLanguage, l as groupBy, C as i18n, w as i18nStore, T as interpolateI18nMessage, re as isBlank, e as isBoolean, t as isFunction, n as isNil, r as isNonNullable, i as isNumber, E as isPlainI18nDictionary, a as isPlainObject, o as isString, F as joinColorized, ie as joinStr, ae as kebabCase, y as languageLocalKey, I as logColor, L as logColorized, R as logGreen, z as logJoinColorized, B as logPink, V as logRed, H as logWhite, U as logYellow, J as mapValues, D as mergeI18nDictionary, O as mergeI18nResources, Y as omit, X as pick, Q as rafClearInterval, $ as rafClearTimeout, ee as rafSetInterval, te as rafSetTimeout, k as t, u as toArray, G as toFiniteNumber, A as translate, b as translations, d as uniqueBy };

package/esm/packages/common/rafTimer.js

@@ -0,0 +1,47 @@
+//#region packages/common/rafTimer.ts
+var e = 16, t = globalThis, n = /* @__PURE__ */ new Map(), r = 0, i = (e) => Math.max(0, e ?? 0), a = () => t.performance?.now?.() ?? Date.now(), o = () => {
+	let n = t.requestAnimationFrame, r = t.cancelAnimationFrame;
+	if (typeof n == "function" && typeof r == "function") return {
+		scheduleFrame: (e) => n.call(t, e),
+		cancelFrame: (e) => r.call(t, e)
+	};
+	let i = t.setTimeout, o = t.clearTimeout;
+	if (typeof i != "function" || typeof o != "function") throw Error("raf timer requires requestAnimationFrame or setTimeout/clearTimeout.");
+	return {
+		scheduleFrame: (n) => i.call(t, () => n(a()), e),
+		cancelFrame: (e) => o.call(t, e)
+	};
+}, s, c = () => (s ??= o(), s), l = () => (r += 1, r), u = (e) => {
+	let t = n.get(e);
+	t && (c().cancelFrame(t.frameId), n.delete(e));
+}, d = (e, t) => {
+	let r = n.get(e);
+	if (r) {
+		if (r.type === "timeout" ? t - r.startTime >= r.delay : t - r.lastRunTime >= r.delay) {
+			if (r.type === "timeout") {
+				n.delete(e), r.callback();
+				return;
+			}
+			r.lastRunTime = t, r.callback();
+		}
+		n.has(e) && (r.frameId = c().scheduleFrame((t) => d(e, t)));
+	}
+}, f = (e, t, r, o) => {
+	let s = l(), u = a(), f = {
+		type: e,
+		delay: i(r),
+		callback: () => t(...o ?? []),
+		startTime: u,
+		lastRunTime: u,
+		frameId: 0
+	};
+	return n.set(s, f), f.frameId = c().scheduleFrame((e) => d(s, e)), s;
+}, p = (e, t, ...n) => f("timeout", e, t, n), m = (e) => {
+	u(e);
+}, h = (e, t, ...n) => f("interval", e, t, n), g = (e) => {
+	u(e);
+}, _ = (e) => {
+	u(e);
+};
+//#endregion
+export { _ as clearRafTimer, g as rafClearInterval, m as rafClearTimeout, h as rafSetInterval, p as rafSetTimeout };

package/fe/frontend/src/common/rafTimer.d.ts

@@ -1,7 +1 @@
-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;
+export * from "../../../packages/common/rafTimer";

package/fe/frontend/src/common/rafTimer.js

@@ -1,144 +1,2 @@
-//#region frontend/src/common/rafTimer.ts
-var rafTimers = /* @__PURE__ */ new Map();
-var rafTimerSeed = 0;
-/**
-* 统一修正延迟时间，避免传入 undefined 或负数。
-*
-* @param delay 原始延迟时间。
-* @returns 不小于 0 的延迟时间。
-*/
-var normalizeDelay = (delay) => Math.max(0, delay ?? 0);
-/**
-* 确认当前环境支持 requestAnimationFrame。
-*/
-var assertRafAvailable = () => {
-	if (typeof requestAnimationFrame === "undefined" || typeof cancelAnimationFrame === "undefined") throw new Error("raf timer requires requestAnimationFrame and can only run in a browser environment.");
-};
-/**
-* 创建唯一的计时器 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;
-	cancelAnimationFrame(timer.frameId);
-	rafTimers.delete(timerId);
-};
-/**
-* 每一帧执行一次的调度函数。
-*
-* 步骤：
-* 1. 读取当前计时器状态。
-* 2. 对比当前时间和起始时间/上次执行时间，判断是否到达延迟。
-* 3. timeout 到点后执行一次并删除计时器。
-* 4. interval 到点后执行回调，并更新上次执行时间。
-* 5. 如果计时器仍然存在，继续注册下一帧。
-*
-* @param timerId 当前计时器 id。
-* @param currentTime requestAnimationFrame 传入的当前时间戳。
-*/
-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 = requestAnimationFrame((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) => {
-	assertRafAvailable();
-	const timerId = createTimerId();
-	const startTime = performance.now();
-	const timer = {
-		type,
-		delay: normalizeDelay(delay),
-		callback: () => callback(...args ?? []),
-		startTime,
-		lastRunTime: startTime,
-		frameId: 0
-	};
-	timer.frameId = requestAnimationFrame((currentTime) => tick(timerId, currentTime));
-	rafTimers.set(timerId, timer);
-	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
+import { clearRafTimer, rafClearInterval, rafClearTimeout, rafSetInterval, rafSetTimeout } from "../../../packages/common/rafTimer.js";
 export { clearRafTimer, rafClearInterval, rafClearTimeout, rafSetInterval, rafSetTimeout };

package/fe/frontend/src/defaultPages/SchemaPage/components/SchemaSearch/index.js

@@ -42,19 +42,21 @@ var SchemaSearch = memo(() => {
 		setSchemas(schemas);
 		setSchemaDefaultValue(defaultValue);
 	});
+	const tsProps = {
+		schemas,
+		defaultValue,
+		onSearch(values) {
+			schemaEventBus.getState().emitSearch(filterEmpty(values));
+		},
+		onReset() {
+			schemaEventBus.getState().emitSearch(void 0);
+		},
+		renderActionBtnArea: () => {}
+	};
 	return /* @__PURE__ */ jsx("div", {
-		className: "schema-search",
-		children: /* @__PURE__ */ jsx(TableSearch, {
-			schemas,
-			defaultValue,
-			onSearch(values) {
-				schemaEventBus.getState().emitSearch(filterEmpty(values));
-			},
-			onReset() {
-				schemaEventBus.getState().emitSearch(void 0);
-			},
-			renderActionBtnArea: () => {}
-		})
+		className: "schema-search pb-2",
+		style: { display: schemas.length ? "block" : "none" },
+		children: /* @__PURE__ */ jsx(TableSearch, { ...tsProps })
 	});
 });
 SchemaSearch.displayName = "SchemaSearch";

package/fe/frontend/src/defaultPages/SchemaPage/components/SchemaTable/index.js

@@ -15,7 +15,7 @@ import { merge } from "../../utils/permissions.js";
 import { schemaTableRenderComponentMap } from "./data.js";
 import useRefState from "../../../../../../packages/react/hooks/useRefState.js";
 import useWatch from "../../../../../../packages/react/hooks/useWatch.js";
-import { Suspense, memo, useCallback, useImperativeHandle, useMemo, useState, useTransition } from "react";
+import { Suspense, memo, useCallback, useImperativeHandle, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useShallow } from "zustand/react/shallow";
 import { produce } from "immer";
@@ -109,19 +109,16 @@ var SchemaTable = memo(({ ref }) => {
 	})));
 	const [data, uData] = useState([]);
 	const [columns, uColumns] = useState([]);
-	const [loading, uLoading, loadingRef] = useRefState(false);
+	const [loading, uLoading, loadingRef] = useRefState(false, 25);
 	const [pagination, setPagination, paginationRef] = useRefState({
 		current: 1,
 		pageSize: 10,
 		total: 0
 	});
-	const [lazyLoading, startTransition] = useTransition();
 	const [handleBtn, setHandleBtn] = useState([]);
 	const init = useCallback(async (query) => {
 		if (loadingRef.current.data) return;
-		startTransition(async () => {
-			uLoading(true);
-		});
+		uLoading(true);
 		try {
 			const res = await handlingRequestErrors(get(params.api ? `${params.api}/list` : "", {
 				...query,
@@ -134,9 +131,7 @@ var SchemaTable = memo(({ ref }) => {
 				}));
 			}
 		} finally {
-			startTransition(async () => {
-				uLoading(false);
-			});
+			uLoading(false);
 		}
 	}, [
 		loadingRef,
@@ -178,7 +173,7 @@ var SchemaTable = memo(({ ref }) => {
 		return {
 			columns,
 			data,
-			loading: lazyLoading || loading,
+			loading,
 			pagination: {
 				...pagination,
 				onPageSizeChange(pageSize) {
@@ -197,7 +192,6 @@ var SchemaTable = memo(({ ref }) => {
 		columns,
 		data,
 		loading,
-		lazyLoading,
 		pagination,
 		setPagination
 	]);

package/fe/frontend/src/defaultPages/SchemaPage/index.css

@@ -8,10 +8,6 @@
         linear-gradient(180deg, hsl(var(--background) / 0.62), hsl(var(--background) / 0.3)), hsl(var(--theme-bg));
 }
 
-.schema-search-region {
-    padding-bottom: 12px;
-}
-
 .schema-search .tc-ui-search {
     align-items: flex-end;
     gap: 10px 16px;

package/fe/frontend/src/defaultPages/SlotPage/index.js

@@ -4,18 +4,21 @@ import Iframe from "../Iframe/index.js";
 import NotFoundPage from "../NotFoundPage/index.js";
 import Schema from "../SchemaPage/index.js";
 import { memo, useMemo } from "react";
+import { useParams } from "react-router-dom";
 import { jsx } from "react/jsx-runtime";
 //#region frontend/src/defaultPages/SlotPage/index.tsx
 var SlotPage = memo(() => {
 	const { menu } = useCurrentMenuData(true);
+	const params = useParams();
+	const sidek = params.sidek;
 	return useMemo(() => {
-		if (menu?.moduleType === "iframe") return /* @__PURE__ */ jsx(Iframe, {});
-		else if (menu?.moduleType === "schema") return /* @__PURE__ */ jsx(Schema, {});
+		if (menu?.moduleType === "iframe") return /* @__PURE__ */ jsx(Iframe, {}, sidek);
+		else if (menu?.moduleType === "schema") return /* @__PURE__ */ jsx(Schema, {}, sidek);
 		else {
 			logPageNotFound();
 			return /* @__PURE__ */ jsx(NotFoundPage, {});
 		}
-	}, [menu?.moduleType]);
+	}, [menu?.moduleType, params.sidek]);
 });
 SlotPage.displayName = "SlotPage";
 //#endregion

package/fe/frontend/src/index.d.ts

@@ -6,8 +6,8 @@ export type { SchemaTableRenderComponent, SchemaTableRenderComponentsMap, } from
 export * from "./components/index";
 export type { FormFieldSchema, SchemaFormComponentsMap, SchemaFormNamespace, SelectProps } from "../../packages/react/ui/index";
 export { renderImportComponent } from "./common/importComponent";
-export { clearRafTimer, rafClearInterval, rafClearTimeout, rafSetInterval, rafSetTimeout } from "./common/rafTimer";
-export type { RafTimerCallback, RafTimerId } from "./common/rafTimer";
+export { clearRafTimer, rafClearInterval, rafClearTimeout, rafSetInterval, rafSetTimeout } from "../../packages/common/rafTimer";
+export type { RafTimerCallback, RafTimerId } from "../../packages/common/rafTimer";
 export { api, del, FetchAxios, get, patch, post, put, request } from "./common/request";
 export type { AxiosError, BaseResponse, PageParams, PageResponse, RequestConfig, ResponseConfig, } from "./common/request";
 export { applyThemeMode, getCurrentThemeMode, getStoredThemeMode, initThemeMode, persistThemeMode, themeSwitchStorageKey, } from "./common/theme";

package/fe/frontend/src/index.js

@@ -11,10 +11,10 @@ import { renderImportComponent } from "./common/importComponent.js";
 import { applyThemeMode, getCurrentThemeMode, getStoredThemeMode, initThemeMode, persistThemeMode, themeSwitchStorageKey } from "./common/theme.js";
 import { generateRouter } from "./components/Router/index.js";
 import { schemaEventBus } from "./stores/schemaEventBus.js";
+import { clearRafTimer, rafClearInterval, rafClearTimeout, rafSetInterval, rafSetTimeout } from "../../packages/common/rafTimer.js";
 import { schemaStore, useSchemaStore } from "./stores/schemaStore.js";
 import "./exportStore.js";
 import { initApp } from "./main.js";
-import { clearRafTimer, rafClearInterval, rafClearTimeout, rafSetInterval, rafSetTimeout } from "./common/rafTimer.js";
 import AsyncSelect_default from "./components/AsyncSelect/index.js";
 import LanguageSwitch_default from "./components/LanguageSwitch/index.js";
 import ThemeSwitch_default from "./components/ThemeSwitch/index.js";

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

@@ -3,7 +3,7 @@ export type ColumnDefForKey<T> = {
         key: K;
         title: string;
         dataIndex?: string;
-        width?: 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;
@@ -13,7 +13,7 @@ export type ColumnDefAction<T> = {
     key: 'action';
     title: string;
     dataIndex?: string;
-    width?: string;
+    width?: number | string;
     isAction?: boolean;
     render?: (value: unknown, record: T, index: number) => React.ReactNode;
     renderExport?: (value: unknown, record: T, index: number) => React.ReactNode;

package/model/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/model/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/model/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/model/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/model/packages/react/ui/components/types/baseType.d.ts

@@ -3,7 +3,7 @@ export type ColumnDefForKey<T> = {
         key: K;
         title: string;
         dataIndex?: string;
-        width?: 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;
@@ -13,7 +13,7 @@ export type ColumnDefAction<T> = {
     key: 'action';
     title: string;
     dataIndex?: string;
-    width?: string;
+    width?: number | string;
     isAction?: boolean;
     render?: (value: unknown, record: T, index: number) => React.ReactNode;
     renderExport?: (value: unknown, record: T, index: number) => React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@_tc/template-core",
-  "version": "0.2.0-bate.7",
+  "version": "0.2.0-bate.9",
   "description": "A full-stack TypeScript admin framework powered by Koa, React, and Vite - monorepo root",
   "types": "./types/index.d.ts",
   "exports": {

package/types/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/types/packages/common/rafTimer.d.ts

@@ -0,0 +1,44 @@
+/**
+ * rafSetTimeout 和 rafSetInterval 返回的计时器 id。
+ */
+export type RafTimerId = number;
+/**
+ * 基于 requestAnimationFrame 的计时器回调类型。
+ */
+export type RafTimerCallback<Args extends unknown[] = []> = (...args: Args) => void;
+/**
+ * 使用 requestAnimationFrame 驱动，在指定延迟后执行一次回调。
+ *
+ * @param callback 延迟结束后执行的回调函数。
+ * @param delay 延迟时间，单位毫秒，默认 0。
+ * @param args 传给回调函数的参数。
+ * @returns 计时器 id，可通过 rafClearTimeout 或 clearRafTimer 取消。
+ */
+export declare const rafSetTimeout: <Args extends unknown[]>(callback: RafTimerCallback<Args>, delay?: number, ...args: Args) => RafTimerId;
+/**
+ * 取消 rafSetTimeout 创建的计时器。
+ *
+ * @param timerId rafSetTimeout 返回的计时器 id。
+ */
+export declare const rafClearTimeout: (timerId: RafTimerId) => void;
+/**
+ * 使用 requestAnimationFrame 驱动，按指定间隔重复执行回调。
+ *
+ * @param callback 每次间隔结束后执行的回调函数。
+ * @param delay 间隔时间，单位毫秒，默认 0。
+ * @param args 传给回调函数的参数。
+ * @returns 计时器 id，可通过 rafClearInterval 或 clearRafTimer 取消。
+ */
+export declare const rafSetInterval: <Args extends unknown[]>(callback: RafTimerCallback<Args>, delay?: number, ...args: Args) => RafTimerId;
+/**
+ * 取消 rafSetInterval 创建的计时器。
+ *
+ * @param timerId rafSetInterval 返回的计时器 id。
+ */
+export declare const rafClearInterval: (timerId: RafTimerId) => void;
+/**
+ * 取消本模块创建的任意 requestAnimationFrame 计时器。
+ *
+ * @param timerId rafSetTimeout 或 rafSetInterval 返回的计时器 id。
+ */
+export declare const clearRafTimer: (timerId: RafTimerId) => void;