@_tc/template-core 0.0.1-bate.6 → 0.0.1-bate.61

package/fe/frontend/src/common/auth/index.js

@@ -0,0 +1,27 @@
+//#region frontend/src/common/auth/index.ts
+var localKeyMap = {
+	AUTH_LOCAL_KEY: "auth_token",
+	API_AUTH_LOCAL_KEY: "p_J_k"
+};
+var AUTH_HEADER_KEY = "Authorization";
+function getAuthToken() {
+	if (typeof localStorage === "undefined") return null;
+	return localStorage.getItem(localKeyMap.AUTH_LOCAL_KEY);
+}
+function setAuthToken(t) {
+	if (typeof localStorage === "undefined") return null;
+	return localStorage.setItem(localKeyMap.AUTH_LOCAL_KEY, t);
+}
+async function clearAuthToken() {
+	if (typeof localStorage === "undefined") return;
+	localStorage.removeItem(localKeyMap.AUTH_LOCAL_KEY);
+}
+var API_AUTH_HEADER_KEY = "projk";
+var getApiAuth = () => {
+	return localStorage.getItem(localKeyMap.API_AUTH_LOCAL_KEY) ?? "";
+};
+var setApiAuth = (v) => {
+	return localStorage.setItem(localKeyMap.API_AUTH_LOCAL_KEY, v);
+};
+//#endregion
+export { API_AUTH_HEADER_KEY, AUTH_HEADER_KEY, clearAuthToken, getApiAuth, getAuthToken, localKeyMap, setApiAuth, setAuthToken };

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

@@ -0,0 +1,2 @@
+import type { BaseResponse, ResponseConfig } from "./request";
+export declare const handlingRequestErrors: <D>(data: Promise<ResponseConfig<BaseResponse<D>, any>>) => Promise<ResponseConfig<BaseResponse<D>, any>>;

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

@@ -0,0 +1,11 @@
+import { getText } from "./language.js";
+import { message } from "../../../packages/react/ui/components/Message/MessageManager.js";
+import "../../../packages/react/ui/components/index.js";
+//#region frontend/src/common/fetchErrorShow.ts
+var handlingRequestErrors = async (data) => {
+	const res = await data;
+	if (res.data.code !== 0) message.error(getText(res.data.message));
+	return res;
+};
+//#endregion
+export { handlingRequestErrors };

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

@@ -0,0 +1,3 @@
+import type { ProjectInfo } from "../api/baseInfo";
+import type { MenuItemData } from "../../../packages/react/ui/components/index";
+export declare const generateMenuItemData: (data: ProjectInfo["menu"]) => MenuItemData[];

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

@@ -0,0 +1,16 @@
+import { getText } from "./language.js";
+//#region frontend/src/common/generateMenuData.ts
+var generateMenuItemData = (data) => {
+	return data.map((m) => {
+		const children = m.menuType === "group" && m.subMenu.length ? generateMenuItemData(m.subMenu) : void 0;
+		return {
+			key: m.key,
+			label: getText(m.name),
+			icon: m.icon,
+			children,
+			minWidth: 100
+		};
+	});
+};
+//#endregion
+export { generateMenuItemData };

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

@@ -0,0 +1,4 @@
+import { ComponentType, ReactNode } from "react";
+export declare const renderImportComponent: (c: Promise<{
+    default: ComponentType<any>;
+}>, fallback?: ReactNode) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { Skeleton } from "../../../packages/react/ui/components/Skeleton/Skeleton.js";
+import "../../../packages/react/ui/components/index.js";
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region frontend/src/common/importComponent.tsx
+var PageLoading = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "h-full min-h-[240px] w-full overflow-hidden bg-theme-bg",
+		children: /* @__PURE__ */ jsx(Skeleton, {
+			mode: "pageloading",
+			rows: 5
+		})
+	});
+};
+var renderImportComponent = (c, fallback) => {
+	const Component = lazy(() => c);
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: typeof fallback !== "undefined" ? fallback : /* @__PURE__ */ jsx(PageLoading, {}),
+		children: /* @__PURE__ */ jsx(Component, {})
+	});
+};
+//#endregion
+export { renderImportComponent };

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

@@ -0,0 +1,2 @@
+import type { I18nInterpolationValues, I18nTranslateOptions } from "../../../packages/react/ui/i18n/index";
+export declare const getText: (key: string, fillingData?: I18nInterpolationValues, options?: I18nTranslateOptions) => string;

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

@@ -0,0 +1,12 @@
+import { frontendI18nResources, i18nKeyPrefix } from "../language/index.js";
+import { i18n, i18nStore } from "../../../packages/common/i18n/index.js";
+import "../../../packages/react/ui/i18n/index.js";
+//#region frontend/src/common/language.ts
+i18nStore.getState().addResources("zh-CN", frontendI18nResources["zh-CN"] ?? {});
+i18nStore.getState().addResources("en-US", frontendI18nResources["en-US"] ?? {});
+var getText = (key, fillingData, options) => {
+	if (key.includes("$i18n::")) return i18n(key.replace(i18nKeyPrefix, ""), fillingData, options);
+	return key;
+};
+//#endregion
+export { getText };

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

@@ -0,0 +1,4 @@
+export declare const logPageNotFound: () => void;
+export declare const logIllegalComponentCallback: (comName: string) => void;
+export declare const logSubscriptionError: () => void;
+export declare const logApiTamper: () => void;

package/fe/frontend/src/common/logFn/index.js

@@ -0,0 +1,14 @@
+import { frontendLangKeys } from "../../language/index.js";
+import { getText } from "../language.js";
+//#region frontend/src/common/logFn/index.ts
+var logJoin = (...logs) => logs.join(`
+    ---------
+    `);
+var logPageNotFound = () => {
+	console.error(logJoin(getText(frontendLangKeys.logPageNotFound), getText(frontendLangKeys.logPageNotFoundEn)));
+};
+var logIllegalComponentCallback = (comName) => console.error(logJoin(getText(frontendLangKeys.logIllegalComponentCallback, { comName }), getText(frontendLangKeys.logIllegalComponentCallbackEn, { comName })));
+var logSubscriptionError = () => console.error(logJoin(getText(frontendLangKeys.logSubscriptionError), getText(frontendLangKeys.logSubscriptionErrorEn)));
+var logApiTamper = () => console.error(logJoin(getText(frontendLangKeys.logApiTamper), getText(frontendLangKeys.logApiTamperEn)));
+//#endregion
+export { logApiTamper, logIllegalComponentCallback, logPageNotFound, logSubscriptionError };

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

@@ -0,0 +1,21 @@
+import type { ProjectInfo } from "../api/baseInfo";
+type MenuItem = {
+    key: string;
+    name: string;
+    path: Partial<{
+        pathname: string;
+        search: string;
+        hash: string;
+    }>;
+};
+export declare const enum QK {
+    pk = "projk",
+    k = "key",
+    sk = "sidek",
+    ck = "custk"
+}
+export declare const leftSidebarBasePath = "_sidebar_";
+export declare const deserializationUrlSearch: <T = Record<string, string>>(url?: string) => T;
+export declare const serializationUrl: (url: string, data: Record<string, string>) => string;
+export declare const findMenuItem: <T = Record<string, any>>(menuData: ProjectInfo["menu"], key?: string) => MenuItem & T;
+export {};

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

@@ -0,0 +1,97 @@
+import { modeStore } from "../stores/mode.js";
+//#region frontend/src/common/menu.ts
+var QK = /* @__PURE__ */ function(QK) {
+	/**
+	* project key
+	*/
+	QK["pk"] = "projk";
+	/**
+	* key topMenu key
+	*/
+	QK["k"] = "key";
+	/**
+	* sidebar key leftMenu key
+	*/
+	QK["sk"] = "sidek";
+	/**
+	* 自定义 页面的key
+	*/
+	QK["ck"] = "custk";
+	return QK;
+}({});
+var leftSidebarBasePath = "_sidebar_";
+var deserializationUrlSearch = (url = window.location.search) => {
+	const urls = new URLSearchParams(url);
+	const data = {};
+	for (const [k, v] of urls.entries()) data[k] = v;
+	return data;
+};
+var serializationUrl = (url, data) => `${url}?${new URLSearchParams(data).toString()}`;
+var generateMenuItem = (item) => {
+	let data = void 0;
+	if (item.menuType === "module") {
+		const pk = modeStore.getState().projectInfo?.key;
+		const query = { [QK.pk]: pk };
+		switch (item.moduleType) {
+			case "custom":
+				query[QK.ck] = item.key;
+				data = {
+					...item,
+					path: {
+						pathname: item.customConfig.path,
+						search: new URLSearchParams(query).toString()
+					}
+				};
+				break;
+			case "iframe":
+			case "schema":
+			case "sidebar":
+				let path = `/${item.key}`;
+				let search = new URLSearchParams(query).toString();
+				if (item.moduleType === "sidebar") {
+					const sfMenu = findMenuItem(item.sidebarConfig.menu, item.sidebarConfig.menu[0]?.key);
+					path += `${sfMenu.path.pathname}`;
+					search = sfMenu.path.search ?? "";
+				}
+				data = {
+					...item,
+					path: {
+						pathname: path,
+						search
+					}
+				};
+				break;
+			default: break;
+		}
+	}
+	return data;
+};
+var findMenuItem = (menuData, key) => {
+	let data = void 0;
+	const useFirstAvailableMenu = typeof key === "undefined";
+	/**
+	*  url query 分为
+	*
+	*  projk 为项目key
+	*  key  当前选择的top菜单key
+	*  sidek 为侧边栏选中的key
+	*/
+	for (const item of menuData) {
+		if (item.menuType === "module") {
+			if (useFirstAvailableMenu || item.key === key) {
+				data = generateMenuItem(item);
+				break;
+			}
+		}
+		if (item.menuType === "group") {
+			const result = findMenuItem(item.subMenu, key);
+			if (result) {
+				data = { ...result };
+				break;
+			}
+		}
+	}
+	return data;
+};
+//#endregion
+export { QK, deserializationUrlSearch, findMenuItem, leftSidebarBasePath, serializationUrl };

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

@@ -0,0 +1,33 @@
+import type { AxiosError, RequestConfig, ResponseConfig } from "../../../packages/common/http/index";
+import { FetchAxios } from "../../../packages/common/http/index";
+declare const api: FetchAxios;
+export interface PageParams {
+    page?: number;
+    pageSize?: number;
+    [key: string]: string | number | boolean | undefined | null;
+}
+export type PageResponse<T> = {
+    data: T[];
+    total: number;
+    page: number;
+    pageSize: number;
+};
+export interface BaseResponse<T> {
+    data: T;
+    code: number;
+    message: string;
+}
+export declare const get: <T = unknown, D = unknown>(url: string, data?: D, config?: RequestConfig<D>) => Promise<ResponseConfig<BaseResponse<T>, D>>;
+export declare const post: <T = unknown, D = unknown>(url: string, data?: D, config?: RequestConfig<D>) => Promise<ResponseConfig<BaseResponse<T>, D>>;
+export declare const put: <T = unknown, D = unknown>(url: string, data?: D, config?: RequestConfig<D>) => Promise<ResponseConfig<BaseResponse<T>, D>>;
+export declare const patch: <T = unknown, D = unknown>(url: string, data?: D, config?: RequestConfig<D>) => Promise<ResponseConfig<BaseResponse<T>, D>>;
+export declare const del: <T = unknown, D = unknown>(url: string, data?: D, config?: RequestConfig<D>) => Promise<ResponseConfig<BaseResponse<T>, D>>;
+export { api, FetchAxios };
+export type { AxiosError, RequestConfig, ResponseConfig };
+export declare const request: {
+    get: <T = unknown, D = unknown>(url: string, data?: D, config?: RequestConfig<D>) => Promise<ResponseConfig<BaseResponse<T>, D>>;
+    put: <T = unknown, D = unknown>(url: string, data?: D, config?: RequestConfig<D>) => Promise<ResponseConfig<BaseResponse<T>, D>>;
+    post: <T = unknown, D = unknown>(url: string, data?: D, config?: RequestConfig<D>) => Promise<ResponseConfig<BaseResponse<T>, D>>;
+    del: <T = unknown, D = unknown>(url: string, data?: D, config?: RequestConfig<D>) => Promise<ResponseConfig<BaseResponse<T>, D>>;
+    patch: <T = unknown, D = unknown>(url: string, data?: D, config?: RequestConfig<D>) => Promise<ResponseConfig<BaseResponse<T>, D>>;
+};

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

@@ -0,0 +1,183 @@
+import { API_AUTH_HEADER_KEY, AUTH_HEADER_KEY, clearAuthToken, getApiAuth, getAuthToken } from "./auth/index.js";
+import { frontendLangKeys } from "../language/index.js";
+import { getText } from "./language.js";
+import { FreezeState, apiFreezerStore } from "../stores/apiFreezer.js";
+import FetchAxios from "../../../packages/common/http/index.js";
+import md5 from "md5";
+//#region frontend/src/common/request.ts
+var BASE_URL = "/api";
+var NumberConcurrentCalls = 4;
+var isRequestWhitelisted = (api, params) => {
+	const { requestWhitelist } = apiFreezerStore.getState();
+	return requestWhitelist.some((matcher) => {
+		if (typeof matcher === "string") return matcher === api;
+		if (matcher instanceof RegExp) return matcher.test(api);
+		return matcher(api, params);
+	});
+};
+/**
+* 处理解冻
+* 冻结流程  4～9
+*/
+apiFreezerStore.subscribe((newState) => {
+	if (newState.state === FreezeState.Thawing) {
+		console.time("Thawing");
+		const { freezeQueue } = newState;
+		const queues = [...freezeQueue.values()];
+		freezeQueue.clear();
+		(async () => {
+			/**
+			*  生成 并发队列
+			*  每个队列从头取一个任务
+			*  当所有任务执行完后 这个 Promise.all 才会结束
+			*/
+			await Promise.all(Array.from({ length: Math.min(NumberConcurrentCalls, queues.length) }, async () => {
+				while (queues.length) {
+					const task = queues.shift();
+					if (!task) continue;
+					const { originFn, callBackFns } = task;
+					try {
+						const res = await originFn();
+						callBackFns.forEach(({ resolve }) => {
+							resolve(res);
+						});
+					} catch (error) {
+						callBackFns.forEach(({ reject }) => {
+							reject(error);
+						});
+					}
+				}
+			}));
+			apiFreezerStore.setState({ state: FreezeState.Hibernation });
+			console.timeEnd("Thawing");
+		})();
+	}
+});
+/**
+* 冻结流程 1～3
+*/
+function hijackingFn(fn) {
+	return function(...params) {
+		const { state, freezeQueue } = apiFreezerStore.getState();
+		const [api] = params;
+		if (state !== FreezeState.Freeze || isRequestWhitelisted(api, params)) return fn(...params);
+		else {
+			const key = md5(JSON.stringify(params));
+			if (!freezeQueue.has(key)) freezeQueue.set(key, {
+				originFn: () => fn(...params),
+				callBackFns: []
+			});
+			const { callBackFns } = freezeQueue.get(key);
+			return new Promise((resolve, reject) => {
+				callBackFns.push({
+					reject,
+					resolve
+				});
+			});
+		}
+	};
+}
+var api = new FetchAxios({
+	baseURL: BASE_URL,
+	timeout: 15e3,
+	credentials: "include",
+	validateStatus: (status) => status >= 200 && status < 300
+});
+var removeBaseurlFromURL = (config) => {
+	const { baseURL, url } = config;
+	if (!baseURL || !url) return;
+	const origin = typeof window === "undefined" ? "http://localhost" : window.location.origin;
+	const baseURLObject = new URL(baseURL, origin);
+	const basePath = baseURLObject.pathname.replace(/\/+$/, "");
+	const requestURL = new URL(url, baseURLObject.origin);
+	if (requestURL.origin !== baseURLObject.origin || !basePath) return;
+	if (requestURL.pathname.replace(/\/+$/, "") !== basePath && !requestURL.pathname.startsWith(`${basePath}/`)) return;
+	config.url = `${requestURL.pathname.slice(basePath.length) || "/"}${requestURL.search}${requestURL.hash}`;
+};
+api.interceptors.request.use(async (config) => {
+	removeBaseurlFromURL(config);
+	const token = getAuthToken();
+	const aauto = getApiAuth();
+	const time = (/* @__PURE__ */ new Date()).getTime();
+	config.headers = {
+		...config.headers,
+		s_t: time + "",
+		s_sign: md5(`${window["_signKey"]}_${time}`),
+		[API_AUTH_HEADER_KEY]: aauto
+	};
+	if (token) config.headers = {
+		...config.headers,
+		[AUTH_HEADER_KEY]: `Bearer ${token}`
+	};
+	return config;
+});
+api.interceptors.request.use((config) => {
+	console.debug(`[API] ${config.method?.toUpperCase()} ${config.url}`);
+	return config;
+});
+api.interceptors.response.use((res) => res, async (err) => {
+	if (err.response?.status === 401) {
+		await clearAuthToken();
+		if (typeof window !== "undefined") window.location.href = "/login";
+	}
+	const message = extractErrorMessage(err);
+	console.error(`[API Error] ${message}`, {
+		url: err.config?.url,
+		status: err.response?.status
+	});
+	return Promise.reject(err);
+});
+function extractErrorMessage(err) {
+	if (!(err instanceof Error)) return getText(frontendLangKeys.unknownError);
+	const axiosErr = err;
+	if (axiosErr.response?.data && typeof axiosErr.response.data === "object" && axiosErr.response.data !== null) {
+		const data = axiosErr.response.data;
+		if (typeof data.message === "string") return data.message;
+		if (typeof data.msg === "string") return data.msg;
+		if (Array.isArray(data.errors) && data.errors.length > 0) return String(data.errors[0]);
+	}
+	if (axiosErr.message) return axiosErr.message;
+	if (axiosErr.code === "ECONNABORTED") return getText(frontendLangKeys.requestTimedOut);
+	return getText(frontendLangKeys.networkError);
+}
+/**
+* GET/DELETE 不发送 body；统一把 data 转到 params。
+*  */
+var get = hijackingFn((url, data, config) => {
+	const getConfig = data !== void 0 && data !== null && typeof data === "object" ? {
+		...config,
+		params: {
+			...config?.params,
+			...data
+		}
+	} : config;
+	return api.get(url, getConfig);
+});
+var post = hijackingFn((url, data, config) => {
+	return api.post(url, data, config);
+});
+var put = hijackingFn((url, data, config) => {
+	return api.put(url, data, config);
+});
+var patch = hijackingFn((url, data, config) => {
+	return api.patch(url, data, config);
+});
+var del = hijackingFn((url, data, config) => {
+	const delConfig = data !== void 0 && data !== null && typeof data === "object" ? {
+		...config,
+		params: {
+			...config?.params,
+			...data
+		}
+	} : config;
+	return api.delete(url, delConfig);
+});
+var request = {
+	get,
+	put,
+	post,
+	del,
+	patch
+};
+//#endregion
+export { FetchAxios, api, del, get, patch, post, put, request };

package/fe/frontend/src/components/AsyncSelect/AsyncSelect.d.ts

@@ -0,0 +1,7 @@
+import type { MergeType, MOmit } from "../../../../typings/type";
+import { FetchInfo } from "../../../../model/types/data/fetchInfo";
+import { SelectProps } from "../../../../packages/react/ui/index";
+export interface AsyncSelectProps extends MergeType<[MOmit<FetchInfo, 'fetchKey'>, MOmit<SelectProps, 'options'>]> {
+}
+declare const AsyncSelect: (props: AsyncSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default AsyncSelect;

package/fe/frontend/src/components/AsyncSelect/AsyncSelect.js

@@ -0,0 +1,36 @@
+import { Select } from "../../../../packages/react/ui/components/Select/Select.js";
+import "../../../../packages/react/ui/index.js";
+import { request } from "../../common/request.js";
+import { handlingRequestErrors } from "../../common/fetchErrorShow.js";
+import useExecuteOnce from "../../../../packages/react/hooks/useExecuteOnce.js";
+import { useState, useTransition } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region frontend/src/components/AsyncSelect/AsyncSelect.tsx
+var AsyncSelect = (props) => {
+	const { fetchConfig, ...params } = props;
+	const [options, setOptions] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [lzayLoading, startTranstion] = useTransition();
+	useExecuteOnce(async () => {
+		if (fetchConfig) startTranstion(async () => {
+			setLoading(true);
+			const { method = "get", url } = fetchConfig;
+			try {
+				const res = await handlingRequestErrors(request[method](url));
+				if (res.data.code === 0) setOptions(res.data.data.map((i) => {
+					i.searchText = i.label;
+					return i;
+				}));
+			} finally {
+				setLoading(false);
+			}
+		});
+	}, { executionPhase: "mount" });
+	return /* @__PURE__ */ jsx(Select, {
+		loading: lzayLoading || loading,
+		options,
+		...params
+	});
+};
+//#endregion
+export { AsyncSelect as default };

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

@@ -0,0 +1,3 @@
+import AsyncSelect from "./AsyncSelect";
+export * from "./AsyncSelect";
+export default AsyncSelect;

package/fe/frontend/src/components/AsyncSelect/index.js

@@ -0,0 +1,5 @@
+import AsyncSelect from "./AsyncSelect.js";
+//#region frontend/src/components/AsyncSelect/index.ts
+var AsyncSelect_default = AsyncSelect;
+//#endregion
+export { AsyncSelect_default as default };

package/fe/frontend/src/components/BasePage/HeaderView.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren, ReactNode } from "react";
+export interface HeaderViewProps extends PropsWithChildren {
+    icon?: ReactNode;
+    menu?: ReactNode;
+    title?: ReactNode;
+    userArea?: ReactNode;
+}
+declare const HeaderView: (props?: HeaderViewProps) => import("react/jsx-runtime").JSX.Element;
+export default HeaderView;

package/fe/frontend/src/components/BasePage/HeaderView.js

@@ -0,0 +1,55 @@
+import { frontendLangKeys } from "../../language/index.js";
+import { getText } from "../../common/language.js";
+import { cn } from "../../../../packages/react/ui/lib/utils.js";
+import "../../../../packages/react/ui/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Boxes } from "lucide-react";
+//#region frontend/src/components/BasePage/HeaderView.tsx
+var defaultProps = {};
+var headerThemeStyle = {
+	"--header-fg": "hsl(var(--theme-text))",
+	"--header-bg": "hsl(var(--theme-bg))",
+	"--header-shadow": "hsl(var(--foreground) / 0.08)"
+};
+var imageLogoPattern = /^(https?:\/\/|data:image\/|\/|\.\/|\.\.\/|.*\.(svg|png|jpe?g|webp|gif)$)/i;
+var HeaderView = (props) => {
+	const { icon, title, menu, userArea, children } = props ?? defaultProps;
+	const defaultTitle = getText(frontendLangKeys.appTitle);
+	const brandLogo = icon ? typeof icon === "string" ? imageLogoPattern.test(icon) ? /* @__PURE__ */ jsx("img", {
+		className: "h-full max-w-[112px] object-contain",
+		src: icon,
+		alt: ""
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "max-w-[112px] truncate text-[13px] font-semibold leading-none",
+		children: icon
+	}) : icon : /* @__PURE__ */ jsx(Boxes, { className: "h-4 w-4" });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "header-view",
+		style: headerThemeStyle,
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: cn("header flex h-14 shrink-0 items-center border-b border-border/70 bg-background/95 text-(--header-fg)", "shadow-[0_1px_0_var(--header-shadow)]"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "brand flex w-64 min-w-0 items-center gap-3 px-5 text-foreground",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn("brand-logo h-8 min-w-12 max-w-32 shrink-0 ", "flex items-center justify-center overflow-hidden ", "rounded-md bg-foreground/7", "text-foreground shadow-[inset_0_0_0_1px_hsl(var(--border)/0.9)]"),
+						children: brandLogo
+					}), /* @__PURE__ */ jsx("span", {
+						className: "brand-title min-w-0 truncate text-sm font-semibold leading-5 tracking-normal",
+						children: title ?? defaultTitle
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "top-menu flex min-w-0 flex-1 items-center px-3 text-(--header-fg)",
+					children: menu
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "user-area flex min-w-0 items-center justify-end px-5 text-(--header-fg)",
+					children: userArea
+				})
+			]
+		}), children]
+	});
+};
+//#endregion
+export { HeaderView as default };

package/fe/frontend/src/components/LanguageSwitch/LanguageSwitch.d.ts

@@ -0,0 +1,13 @@
+import { type SelectProps } from "../../../../packages/react/ui/index";
+export type LanguageSwitchValue = 'zh-CN' | 'en-US' | (string & {});
+export type LanguageSwitchOption = Omit<NonNullable<SelectProps['options']>[number], 'value'> & {
+    value: LanguageSwitchValue;
+};
+export interface LanguageSwitchProps extends Omit<SelectProps, 'options' | 'value' | 'defaultValue' | 'onChange'> {
+    value?: LanguageSwitchValue;
+    defaultValue?: LanguageSwitchValue;
+    options?: LanguageSwitchOption[];
+    onChange?: (language: LanguageSwitchValue) => void;
+}
+declare const LanguageSwitch: ({ value, defaultValue, options, onChange, className, placeholder, clearable, searchable, getPopupContainer, ...props }: LanguageSwitchProps) => import("react/jsx-runtime").JSX.Element;
+export default LanguageSwitch;

package/fe/frontend/src/components/LanguageSwitch/LanguageSwitch.js

@@ -0,0 +1,44 @@
+import { frontendLangKeys } from "../../language/index.js";
+import { i18nStore } from "../../../../packages/common/i18n/index.js";
+import { useI18nStore } from "../../../../packages/react/ui/i18n/useI18n.js";
+import "../../../../packages/react/ui/i18n/index.js";
+import { getText } from "../../common/language.js";
+import { cn } from "../../../../packages/react/ui/lib/utils.js";
+import { Select } from "../../../../packages/react/ui/components/Select/Select.js";
+import "../../../../packages/react/ui/index.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region frontend/src/components/LanguageSwitch/LanguageSwitch.tsx
+var getDefaultLanguageOptions = () => [{
+	label: getText(frontendLangKeys.languageSwitchZhCN),
+	value: "zh-CN",
+	searchText: "zh-CN 中文 简体中文"
+}, {
+	label: getText(frontendLangKeys.languageSwitchEnUS),
+	value: "en-US",
+	searchText: "en-US English"
+}];
+var LanguageSwitch = ({ value, defaultValue, options, onChange, className, placeholder, clearable = false, searchable = false, getPopupContainer = "parent", ...props }) => {
+	const currentLanguage = useI18nStore((state) => state.language);
+	const mergedOptions = useMemo(() => options ?? getDefaultLanguageOptions(), [currentLanguage, options]);
+	const selectedLanguage = value ?? currentLanguage ?? defaultValue;
+	const handleChange = (language) => {
+		if (!language) return;
+		const nextLanguage = String(language);
+		i18nStore.getState().setLanguage(nextLanguage);
+		onChange?.(nextLanguage);
+	};
+	return /* @__PURE__ */ jsx(Select, {
+		...props,
+		className: cn("w-32 shrink-0", className),
+		clearable,
+		getPopupContainer,
+		options: mergedOptions,
+		placeholder: placeholder ?? getText(frontendLangKeys.languageSwitchPlaceholder),
+		searchable,
+		value: selectedLanguage ?? defaultValue,
+		onChange: handleChange
+	});
+};
+//#endregion
+export { LanguageSwitch as default };

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

@@ -0,0 +1,3 @@
+import LanguageSwitch from "./LanguageSwitch";
+export * from "./LanguageSwitch";
+export default LanguageSwitch;