wok-ui-ext 0.1.0

package/dist/form/form-item/index.d.ts

@@ -0,0 +1,26 @@
+import { ConvertibleModule, DivModule, SubModulesOpt } from 'wok-ui';
+import './style.less';
+/**
+ * 表单条目，水平布局，左边标题，右边是输入框
+ */
+export declare class FormItem extends DivModule {
+    private opts;
+    constructor(opts: {
+        /**
+         * 标题
+         */
+        label: ConvertibleModule;
+        /**
+         * 标题宽度，单位像素
+         */
+        labelWidth?: number;
+        /**
+         * 必填标识，如果为 true ，则会在标题上显示出一个红色星号来提示用户条目必填
+         */
+        required?: boolean;
+        /**
+         * 内容输入模块
+         */
+        input: SubModulesOpt;
+    });
+}

package/dist/form/form-item/index.js

@@ -0,0 +1,21 @@
+import { DivModule } from 'wok-ui';
+import './style.css';
+/**
+ * 表单条目，水平布局，左边标题，右边是输入框
+ */
+export class FormItem extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-form-item');
+        this.opts = opts;
+        if (typeof opts.labelWidth === 'number') {
+            this.el.style.setProperty('--form-label-width', `${opts.labelWidth}px`);
+        }
+        this.addChild({
+            classNames: ['wok-ui-ext-form-label', opts.required ? 'required' : ''],
+            children: this.opts.label
+        }, {
+            classNames: ['wok-ui-ext-form-field'],
+            children: this.opts.input
+        });
+    }
+}

package/dist/form/form-item/style.css

@@ -0,0 +1,33 @@
+.wok-ui-ext-form-item {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+.wok-ui-ext-form-item > .wok-ui-ext-form-label {
+  width: var(--form-label-width, 120px);
+  flex-shrink: 0;
+  color: var(--text-secondary);
+  text-align: right;
+}
+.wok-ui-ext-form-item > .wok-ui-ext-form-label.required ::before {
+  content: "*";
+  color: var(--color-danger);
+  margin-right: 8px;
+  vertical-align: middle;
+  display: inline-block;
+}
+.wok-ui-ext-form-item > .wok-ui-ext-form-field {
+  flex-grow: 1;
+  max-width: 800px;
+}
+form.wok-ui-ext-form-label-top .wok-ui-ext-form-item {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+form.wok-ui-ext-form-label-top .wok-ui-ext-form-item > .wok-ui-ext-form-label {
+  text-align: left;
+}
+form.wok-ui-ext-form-label-bold .wok-ui-ext-form-item > .wok-ui-ext-form-label {
+  font-weight: var(--font-weight-semibold);
+}

package/dist/form/form-modal/index.d.ts

@@ -0,0 +1,18 @@
+import { SubModulesOpt } from 'wok-ui';
+/**
+ * 显示带表单的模态框，如果是只有一个文本框的表单，请使用 quickInput 函数，更简洁高效
+ * @param opts
+ * @param opts.width 模态框宽度，默认500px
+ * @param opts.title 模态框标题
+ * @param opts.formContent 表单内容配置
+ * @param opts.handleSubmit 提交处理函数，如果没有异常，将会自动关闭模态框
+ * @param opts.confirmButtonText 确认按钮文本，默认为"确定"
+ */
+export declare function showFormModal(opts: {
+    width?: number;
+    title: string;
+    formContent: SubModulesOpt;
+    handleSubmit: () => Promise<void>;
+    onShown?: () => void;
+    confirmButtonText?: string;
+}): void;

package/dist/form/form-modal/index.js

@@ -0,0 +1,38 @@
+import { getWokUiExtI18n } from '../../i18n';
+import { showModal } from '../../modal';
+import { showWarning } from '../../toast';
+import { Form } from '../form';
+/**
+ * 显示带表单的模态框，如果是只有一个文本框的表单，请使用 quickInput 函数，更简洁高效
+ * @param opts
+ * @param opts.width 模态框宽度，默认500px
+ * @param opts.title 模态框标题
+ * @param opts.formContent 表单内容配置
+ * @param opts.handleSubmit 提交处理函数，如果没有异常，将会自动关闭模态框
+ * @param opts.confirmButtonText 确认按钮文本，默认为"确定"
+ */
+export function showFormModal(opts) {
+    let form;
+    const modal = showModal({
+        title: opts.title,
+        width: opts.width,
+        body: (form = new Form({
+            labelPosition: 'top',
+            children: opts.formContent,
+            onSubmit: () => {
+                opts
+                    .handleSubmit()
+                    .then(() => {
+                    modal.close();
+                })
+                    .catch(showWarning);
+            }
+        })),
+        buttons: {
+            confirm: opts.confirmButtonText || getWokUiExtI18n().buildMsg('form-modal-confirm'),
+            cancel: true
+        },
+        onShown: opts.onShown,
+        onConfirm: () => form.submit()
+    });
+}

package/dist/form/form.d.ts

@@ -0,0 +1,21 @@
+import { Form as WokUIForm, FormOpts as WokUIFormOpts } from 'wok-ui';
+export interface FormOpts extends WokUIFormOpts {
+    /**
+     * 输入框标题的宽度
+     */
+    labelWidth?: string | number;
+    /**
+     * 输入框标题在上还是在左，默认在左
+     */
+    labelPosition?: 'top' | 'left';
+    /**
+     * label 是否加粗，默认false
+     */
+    labelBold?: boolean;
+}
+/**
+ * 表单，在原 wok-ui 表单的基础上增加了输入框标题相关的选项，配合 FormItem 使用
+ */
+export declare class Form extends WokUIForm {
+    constructor(opt: FormOpts);
+}

package/dist/form/form.js

@@ -0,0 +1,28 @@
+import { Form as WokUIForm } from 'wok-ui';
+/**
+ * 表单，在原 wok-ui 表单的基础上增加了输入框标题相关的选项，配合 FormItem 使用
+ */
+export class Form extends WokUIForm {
+    constructor(opt) {
+        super(opt);
+        let labelWidth = '120px';
+        if (opt.labelPosition === 'top') {
+            labelWidth = '100%';
+        }
+        else if (opt.labelWidth) {
+            if (typeof opt.labelWidth === 'number') {
+                labelWidth = `${opt.labelWidth}px`;
+            }
+            else {
+                labelWidth = opt.labelWidth;
+            }
+        }
+        this.el.style.setProperty('--form-label-width', labelWidth);
+        if (opt.labelPosition === 'top') {
+            this.el.classList.add('wok-ui-ext-form-label-top');
+        }
+        if (opt.labelBold) {
+            this.el.classList.add('wok-ui-ext-form-label-bold');
+        }
+    }
+}

package/dist/form/index.d.ts

@@ -0,0 +1,4 @@
+export * from './form';
+export * from './form-item';
+export * from './form-modal';
+export * from './select';

package/dist/form/index.js

@@ -0,0 +1,4 @@
+export * from './form';
+export * from './form-item';
+export * from './form-modal';
+export * from './select';

package/dist/form/select/index.d.ts

@@ -0,0 +1,48 @@
+import { FormInput } from 'wok-ui';
+import './style.less';
+export interface SelectOpts {
+    /**
+     * 尺寸
+     */
+    size?: 'sm' | 'default' | 'lg';
+    /**
+     * 必填
+     */
+    required?: boolean | string;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 默认值
+     */
+    value?: string;
+    /**
+     * 选项
+     */
+    options: Array<{
+        label: string;
+        value: string;
+    } | string>;
+    /**
+     * 变化监听
+     * @param val
+     */
+    onChange?: (val: string) => void;
+}
+/**
+ * 下拉选择，用法与 wok-ui 的 Select 完全一致，可无缝替换。
+ *
+ * 与 wok-ui Select 的区别：
+ * 1. 下拉箭头使用主题色（跟随 --color-primary），而不是 wok-ui 的固定灰色箭头
+ * 2. 内部用一层 wrapper 只包裹原生 select，主题色箭头挂在 wrapper 上，
+ *    因此校验反馈（invalid-feedback）出现时，箭头不会因为容器被撑高而偏移
+ */
+export declare class Select extends FormInput {
+    private readonly opts;
+    private select;
+    constructor(opts: SelectOpts);
+    private __validate;
+    validate(): boolean;
+    setDisabled(disabled: boolean): void;
+}

package/dist/form/select/index.js

@@ -0,0 +1,94 @@
+import { FormInput, getI18n, getSize } from 'wok-ui';
+import './style.css';
+/**
+ * 下拉选择，用法与 wok-ui 的 Select 完全一致，可无缝替换。
+ *
+ * 与 wok-ui Select 的区别：
+ * 1. 下拉箭头使用主题色（跟随 --color-primary），而不是 wok-ui 的固定灰色箭头
+ * 2. 内部用一层 wrapper 只包裹原生 select，主题色箭头挂在 wrapper 上，
+ *    因此校验反馈（invalid-feedback）出现时，箭头不会因为容器被撑高而偏移
+ */
+export class Select extends FormInput {
+    constructor(opts) {
+        super('wok-ui-ext-select');
+        this.opts = opts;
+        this.addChild({
+            classNames: ['wok-ui-ext-select-wrap'],
+            children: {
+                tag: 'select',
+                classNames: ['wok-ui-select'],
+                attrs: { disabled: !!opts.disabled },
+                postHandle: el => {
+                    this.select = el;
+                    if (opts.value) {
+                        this.select.value = opts.value;
+                    }
+                    this.select.addEventListener('change', () => {
+                        if (this.opts.onChange) {
+                            this.opts.onChange(this.select.value);
+                        }
+                        this.validate();
+                    });
+                },
+                children: opts.options.map(opt => {
+                    if (typeof opt === 'string') {
+                        return {
+                            tag: 'option',
+                            innerText: opt,
+                            attrs: { value: opt }
+                        };
+                    }
+                    else {
+                        return {
+                            tag: 'option',
+                            innerText: opt.label,
+                            attrs: { value: opt.value }
+                        };
+                    }
+                })
+            }
+        });
+        // 尺寸
+        const size = getSize();
+        switch (opts.size) {
+            case 'lg':
+                this.select.style.setProperty('--select-font-size', `${size.textLg}px`);
+                break;
+            case 'sm':
+                this.select.style.setProperty('--select-font-size', `${size.textSm}px`);
+                break;
+            default:
+                this.select.style.setProperty('--select-font-size', `${size.text}px`);
+                break;
+        }
+    }
+    __validate(val) {
+        if (this.opts.required) {
+            if (!val) {
+                return {
+                    valid: false,
+                    msg: typeof this.opts.required === 'string'
+                        ? this.opts.required
+                        : getI18n().buildMsg('form-err-required')
+                };
+            }
+        }
+        return { valid: true };
+    }
+    validate() {
+        const validateRes = this.__validate(this.select.value);
+        // 根据是否有效，显示反馈信息
+        if (validateRes.valid) {
+            this.select.classList.remove('invalid');
+            this.hideInvalidFeedback();
+        }
+        else {
+            this.select.classList.add('invalid');
+            this.showInvalidFeedback(validateRes.msg);
+        }
+        return validateRes.valid;
+    }
+    setDisabled(disabled) {
+        this.select.disabled = disabled;
+    }
+}

package/dist/form/select/style.css

@@ -0,0 +1,29 @@
+.wok-ui-ext-select-wrap {
+  position: relative;
+}
+.wok-ui-ext-select-wrap > select.wok-ui-select {
+  background-image: none;
+}
+.wok-ui-ext-select-wrap > select.wok-ui-select > option,
+.wok-ui-ext-select-wrap > select.wok-ui-select > optgroup {
+  color: var(--text-primary);
+}
+.wok-ui-ext-select-wrap::after {
+  content: '';
+  position: absolute;
+  right: 18px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 10px;
+  height: 10px;
+  background-color: var(--color-primary);
+  pointer-events: none;
+  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3,5 L8,11 L13,5' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3e%3c/svg%3e");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3,5 L8,11 L13,5' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3e%3c/svg%3e");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+}

package/dist/global.css

@@ -0,0 +1,71 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: var(--font-family);
+}
+*:focus-visible {
+  outline: var(--shadow-sm);
+}
+*:focus {
+  outline: none;
+}
+body,
+html {
+  height: 100%;
+  width: 100%;
+  background: var(--bg-body);
+  font-size: var(--font-size-body);
+}
+.wok-ui-input,
+select.wok-ui-select {
+  width: 100% !important;
+  padding: 9px 36px 9px 18px !important;
+  border: 1px solid var(--border-medium) !important;
+  border-radius: var(--radius-xl) !important;
+  font-size: var(--font-size-body) !important;
+  background-color: var(--bg-content) !important;
+  outline: none;
+  /* 对webkit内核浏览器设置placeholder颜色 */
+  /* 对Gecko内核浏览器（例如Firefox设置placeholder颜色 */
+  /* 对Webkit内核和Gecko内核浏览器设置placeholder颜色 */
+  /* 对所有浏览器设置placeholder颜色 */
+}
+.wok-ui-input:focus-visible,
+select.wok-ui-select:focus-visible,
+.wok-ui-input.focused,
+select.wok-ui-select.focused {
+  border-color: var(--color-primary) !important;
+  box-shadow: var(--shadow-sm);
+  outline: none;
+}
+.wok-ui-input::-webkit-input-placeholder,
+select.wok-ui-select::-webkit-input-placeholder {
+  color: var(--text-placeholder);
+}
+.wok-ui-input::-moz-placeholder,
+select.wok-ui-select::-moz-placeholder {
+  color: var(--text-placeholder);
+}
+.wok-ui-input:-ms-input-placeholder,
+select.wok-ui-select:-ms-input-placeholder {
+  color: var(--text-placeholder);
+}
+.wok-ui-input::placeholder,
+select.wok-ui-select::placeholder {
+  color: var(--text-placeholder);
+}
+.wok-ui-link {
+  text-decoration: none;
+  color: var(--text-primary);
+}
+.wok-ui-link:hover {
+  color: var(--text-secondary);
+  text-decoration: underline;
+}
+.wok-ui-link:visited {
+  color: var(--color-primary) !important;
+}
+.wok-ui-radio:disabled {
+  opacity: 1 !important;
+}

package/dist/i18n/de-DE.d.ts

@@ -0,0 +1,2 @@
+import { WokUiExtI18nMessages } from './messages';
+export declare const deDE: WokUiExtI18nMessages;

package/dist/i18n/de-DE.js

@@ -0,0 +1,36 @@
+export const deDE = {
+    'alert-warning': 'Warnung',
+    'alert-ok': 'OK',
+    'empty-text': 'Keine Daten',
+    'file-picker-max-size': 'Datei {} überschreitet {}',
+    'form-modal-confirm': 'Bestätigen',
+    'img-picker-crop': 'Bild zuschneiden',
+    'img-picker-cancel': 'Abbrechen',
+    'img-picker-confirm': 'Bestätigen',
+    'img-picker-format-error': 'Nur Bilddateien sind erlaubt',
+    'img-picker-crop-failed': 'Zuschneiden fehlgeschlagen',
+    'loading-text': 'Laden...',
+    'modal-confirm': 'Bestätigen',
+    'modal-cancel': 'Abbrechen',
+    'modal-warning': 'Warnung',
+    'modal-close': 'Schließen',
+    'pagination-total': 'Insgesamt {} Einträge',
+    'pagination-prev-page': 'Vorherige Seite',
+    'pagination-next-page': 'Nächste Seite',
+    'pagination-page': 'Seite {}',
+    'pagination-simple-format': '{} / {}',
+    'search-box-placeholder': 'Suche',
+    'table-empty': 'Kein Inhalt',
+    'toast-close': 'Schließen',
+    'tree-max-selected': 'Sie können maximal {} Elemente auswählen',
+    'tree-max-level': 'Die Ebene darf {} nicht überschreiten',
+    'upload-hint': 'Klicken oder Dateien ziehen zum Hochladen',
+    'upload-hint-secondary': '',
+    'upload-max-size': 'Datei {} überschreitet {}',
+    'upload-max-count': 'Sie können maximal {} Dateien auswählen',
+    'upload-before-upload-rejected': 'Validierung vor dem Hochladen fehlgeschlagen',
+    'upload-type-not-allowed': 'Der Dateityp von {} wird nicht unterstützt',
+    'upload-size-b': '{} B',
+    'upload-size-kb': '{} KB',
+    'upload-size-mb': '{} MB'
+};

package/dist/i18n/en-US.d.ts

@@ -0,0 +1,2 @@
+import { WokUiExtI18nMessages } from './messages';
+export declare const enUS: WokUiExtI18nMessages;

package/dist/i18n/en-US.js

@@ -0,0 +1,36 @@
+export const enUS = {
+    'alert-warning': 'Warning',
+    'alert-ok': 'OK',
+    'empty-text': 'No data',
+    'file-picker-max-size': 'File {} exceeds {}',
+    'form-modal-confirm': 'Confirm',
+    'img-picker-crop': 'Crop image',
+    'img-picker-cancel': 'Cancel',
+    'img-picker-confirm': 'Confirm',
+    'img-picker-format-error': 'Only image files are allowed',
+    'img-picker-crop-failed': 'Crop failed',
+    'loading-text': 'Loading...',
+    'modal-confirm': 'Confirm',
+    'modal-cancel': 'Cancel',
+    'modal-warning': 'Warning',
+    'modal-close': 'Close',
+    'pagination-total': 'Total {} items',
+    'pagination-prev-page': 'Previous page',
+    'pagination-next-page': 'Next page',
+    'pagination-page': 'Page {}',
+    'pagination-simple-format': '{} / {}',
+    'search-box-placeholder': 'Search',
+    'table-empty': 'No data',
+    'toast-close': 'Close',
+    'tree-max-selected': 'You can select at most {} items',
+    'tree-max-level': 'Level cannot exceed {}',
+    'upload-hint': 'Click or drag files to upload',
+    'upload-hint-secondary': '',
+    'upload-max-size': 'File {} exceeds {}',
+    'upload-max-count': 'You can select at most {} files',
+    'upload-before-upload-rejected': 'Before upload validation failed',
+    'upload-type-not-allowed': 'File {} type is not supported',
+    'upload-size-b': '{} B',
+    'upload-size-kb': '{} KB',
+    'upload-size-mb': '{} MB'
+};

package/dist/i18n/es-ES.d.ts

@@ -0,0 +1,2 @@
+import { WokUiExtI18nMessages } from './messages';
+export declare const esES: WokUiExtI18nMessages;

package/dist/i18n/es-ES.js

@@ -0,0 +1,36 @@
+export const esES = {
+    'alert-warning': 'Advertencia',
+    'alert-ok': 'Aceptar',
+    'empty-text': 'Sin datos',
+    'file-picker-max-size': 'El archivo {} supera {}',
+    'form-modal-confirm': 'Confirmar',
+    'img-picker-crop': 'Recortar imagen',
+    'img-picker-cancel': 'Cancelar',
+    'img-picker-confirm': 'Confirmar',
+    'img-picker-format-error': 'Solo se permiten archivos de imagen',
+    'img-picker-crop-failed': 'Error al recortar',
+    'loading-text': 'Cargando...',
+    'modal-confirm': 'Confirmar',
+    'modal-cancel': 'Cancelar',
+    'modal-warning': 'Advertencia',
+    'modal-close': 'Cerrar',
+    'pagination-total': 'Total {} elementos',
+    'pagination-prev-page': 'Página anterior',
+    'pagination-next-page': 'Página siguiente',
+    'pagination-page': 'Página {}',
+    'pagination-simple-format': '{} / {}',
+    'search-box-placeholder': 'Buscar',
+    'table-empty': 'Sin contenido',
+    'toast-close': 'Cerrar',
+    'tree-max-selected': 'Puede seleccionar como máximo {} elementos',
+    'tree-max-level': 'El nivel no puede exceder {}',
+    'upload-hint': 'Haga clic o arrastre archivos para subir',
+    'upload-hint-secondary': '',
+    'upload-max-size': 'El archivo {} supera {}',
+    'upload-max-count': 'Puede seleccionar como máximo {} archivos',
+    'upload-before-upload-rejected': 'La validación previa a la subida falló',
+    'upload-type-not-allowed': 'El tipo del archivo {} no es compatible',
+    'upload-size-b': '{} B',
+    'upload-size-kb': '{} KB',
+    'upload-size-mb': '{} MB'
+};

package/dist/i18n/fr-FR.d.ts

@@ -0,0 +1,2 @@
+import { WokUiExtI18nMessages } from './messages';
+export declare const frFR: WokUiExtI18nMessages;

package/dist/i18n/fr-FR.js

@@ -0,0 +1,36 @@
+export const frFR = {
+    'alert-warning': 'Avertissement',
+    'alert-ok': 'OK',
+    'empty-text': 'Aucune donnée',
+    'file-picker-max-size': 'Le fichier {} dépasse {}',
+    'form-modal-confirm': 'Confirmer',
+    'img-picker-crop': 'Recadrer l\'image',
+    'img-picker-cancel': 'Annuler',
+    'img-picker-confirm': 'Confirmer',
+    'img-picker-format-error': 'Seuls les fichiers image sont autorisés',
+    'img-picker-crop-failed': 'Échec du recadrage',
+    'loading-text': 'Chargement...',
+    'modal-confirm': 'Confirmer',
+    'modal-cancel': 'Annuler',
+    'modal-warning': 'Avertissement',
+    'modal-close': 'Fermer',
+    'pagination-total': 'Total {} éléments',
+    'pagination-prev-page': 'Page précédente',
+    'pagination-next-page': 'Page suivante',
+    'pagination-page': 'Page {}',
+    'pagination-simple-format': '{} / {}',
+    'search-box-placeholder': 'Rechercher',
+    'table-empty': 'Aucun contenu',
+    'toast-close': 'Fermer',
+    'tree-max-selected': 'Vous pouvez sélectionner au maximum {} éléments',
+    'tree-max-level': 'Le niveau ne peut pas dépasser {}',
+    'upload-hint': 'Cliquez ou glissez-déposez des fichiers pour uploader',
+    'upload-hint-secondary': '',
+    'upload-max-size': 'Le fichier {} dépasse {}',
+    'upload-max-count': 'Vous pouvez sélectionner au maximum {} fichiers',
+    'upload-before-upload-rejected': 'La validation avant upload a échoué',
+    'upload-type-not-allowed': "Le type du fichier {} n'est pas pris en charge",
+    'upload-size-b': '{} o',
+    'upload-size-kb': '{} Ko',
+    'upload-size-mb': '{} Mo'
+};

package/dist/i18n/index.d.ts

@@ -0,0 +1,12 @@
+import { I18n } from 'wok-ui';
+import { WokUiExtI18nMessages } from './messages';
+/**
+ * 获取 wok-ui-ext 的 i18n 实例。
+ */
+export declare function getWokUiExtI18n(): I18n<WokUiExtI18nMessages>;
+/**
+ * 初始化 wok-ui-ext 的 i18n 实例，并切换到指定语言。
+ * @param lang 语言，可选值为 'zh-CN'、'en-US'、'ja-JP'、'ko-KR'、'fr-FR'、'de-DE'、'es-ES' 或 'zh-TW'。
+ */
+export declare function initWokUiExtI18n(lang?: string): Promise<void>;
+export * from './messages';

package/dist/i18n/index.js

@@ -0,0 +1,39 @@
+import { getI18n } from 'wok-ui';
+import { enUS } from './en-US';
+import { zhCN } from './zh-CN';
+let wokUiExtI18n;
+/**
+ * 获取 wok-ui-ext 的 i18n 实例。
+ */
+export function getWokUiExtI18n() {
+    if (wokUiExtI18n) {
+        return wokUiExtI18n;
+    }
+    const i18n = getI18n();
+    wokUiExtI18n = i18n.extend(enUS);
+    wokUiExtI18n.setMsgs('zh-CN', zhCN);
+    // wok-ui 基础语言扩展（异步加载）
+    i18n.setMsgs('zh-TW', () => import('./wok-ui/zh-TW').then(d => d.zhTW));
+    i18n.setMsgs('ja-JP', () => import('./wok-ui/ja-JP').then(d => d.jaJP));
+    i18n.setMsgs('ko-KR', () => import('./wok-ui/ko-KR').then(d => d.koKR));
+    i18n.setMsgs('fr-FR', () => import('./wok-ui/fr-FR').then(d => d.frFR));
+    i18n.setMsgs('de-DE', () => import('./wok-ui/de-DE').then(d => d.deDE));
+    i18n.setMsgs('es-ES', () => import('./wok-ui/es-ES').then(d => d.esES));
+    // wok-ui-ext 语言扩展（异步加载）
+    wokUiExtI18n.setMsgs('zh-TW', () => import('./zh-TW').then(d => d.zhTW));
+    wokUiExtI18n.setMsgs('ja-JP', () => import('./ja-JP').then(d => d.jaJP));
+    wokUiExtI18n.setMsgs('ko-KR', () => import('./ko-KR').then(d => d.koKR));
+    wokUiExtI18n.setMsgs('fr-FR', () => import('./fr-FR').then(d => d.frFR));
+    wokUiExtI18n.setMsgs('de-DE', () => import('./de-DE').then(d => d.deDE));
+    wokUiExtI18n.setMsgs('es-ES', () => import('./es-ES').then(d => d.esES));
+    return wokUiExtI18n;
+}
+/**
+ * 初始化 wok-ui-ext 的 i18n 实例，并切换到指定语言。
+ * @param lang 语言，可选值为 'zh-CN'、'en-US'、'ja-JP'、'ko-KR'、'fr-FR'、'de-DE'、'es-ES' 或 'zh-TW'。
+ */
+export async function initWokUiExtI18n(lang) {
+    getWokUiExtI18n();
+    await getI18n().setLang(lang || 'en-US');
+}
+export * from './messages';