feat: support vscode i18n-ally plugin

2025-08-27 14:13:40 +08:00 · 2020-12-01 23:51:39 +08:00
parent 41a4b827a2
commit 962f90de44
39 changed files with 263 additions and 259 deletions
--- a/src/components/Drawer/src/BasicDrawer.tsx
+++ b/src/components/Drawer/src/BasicDrawer.tsx
@@ -29,7 +29,7 @@ export default defineComponent({
    const visibleRef = ref(false);
    const propsRef = ref<Partial<Nullable<DrawerProps>>>(null);

-    const { t } = useI18n('component.drawer');
+    const { t } = useI18n();

    const getMergeProps = computed(
      (): DrawerProps => {
@@ -228,7 +228,11 @@ export default defineComponent({
            default: () => (
              <>
                <div ref={scrollRef} style={unref(getScrollContentStyle)}>
-                  <Loading absolute tip={t('loadingText')} loading={unref(getLoading)} />
+                  <Loading
+                    absolute
+                    tip={t('component.drawer.loadingText')}
+                    loading={unref(getLoading)}
+                  />
                  {getSlot(slots)}
                </div>
                {renderFooter()}
--- a/src/components/Drawer/src/props.ts
+++ b/src/components/Drawer/src/props.ts
@@ -2,7 +2,7 @@ import type { PropType } from 'vue';

 import { useI18n } from '/@/hooks/web/useI18n';
 import { propTypes } from '/@/utils/propTypes';
-const { t } = useI18n('component.drawer');
+const { t } = useI18n();

 export const footerProps = {
  confirmLoading: propTypes.bool,
@@ -11,13 +11,13 @@ export const footerProps = {
   */
  showCancelBtn: propTypes.bool.def(true),
  cancelButtonProps: Object as PropType<any>,
-  cancelText: propTypes.string.def(t('cancelText')),
+  cancelText: propTypes.string.def(t('component.drawer.cancelText')),
  /**
   * @description: Show confirmation button
   */
  showOkBtn: propTypes.bool.def(true),
  okButtonProps: propTypes.any,
-  okText: propTypes.string.def(t('okText')),
+  okText: propTypes.string.def(t('component.drawer.okText')),
  okType: propTypes.string.def('primary'),
  showFooter: propTypes.bool,
  footerHeight: {
--- a/src/components/Excel/src/ExportExcelModel.vue
+++ b/src/components/Excel/src/ExportExcelModel.vue
@@ -1,7 +1,7 @@
 <template>
  <BasicModal
    v-bind="$attrs"
-    :title="t('exportModalTitle')"
+    :title="t('component.excel.exportModalTitle')"
    @ok="handleOk"
    @register="registerModal"
  >
@@ -21,19 +21,19 @@

  import { useI18n } from '/@/hooks/web/useI18n';

-  const { t } = useI18n('component.excel');
+  const { t } = useI18n();

  const schemas: FormSchema[] = [
    {
      field: 'filename',
      component: 'Input',
-      label: t('fileName'),
+      label: t('component.excel.fileName'),
      rules: [{ required: true }],
    },
    {
      field: 'bookType',
      component: 'Select',
-      label: t('fileType'),
+      label: t('component.excel.fileType'),
      defaultValue: 'xlsx',
      rules: [{ required: true }],
      componentProps: {
--- a/src/components/Form/src/FormAction.tsx
+++ b/src/components/Form/src/FormAction.tsx
@@ -9,7 +9,7 @@ import { getSlot } from '/@/utils/helper/tsxHelper';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { propTypes } from '/@/utils/propTypes';

-const { t } = useI18n('component.form');
+const { t } = useI18n();

 export default defineComponent({
  name: 'BasicFormAction',
@@ -38,14 +38,14 @@ export default defineComponent({
  setup(props, { slots, emit }) {
    const getResetBtnOptionsRef = computed(() => {
      return {
-        text: t('resetButton'),
+        text: t('component.form.resetButton'),
        ...props.resetButtonOptions,
      };
    });

    const getSubmitBtnOptionsRef = computed(() => {
      return {
-        text: t('submitButton'),
+        text: t('component.form.submitButton'),
        // htmlType: 'submit',
        ...props.submitButtonOptions,
      };
@@ -77,7 +77,7 @@ export default defineComponent({
        <Button type="default" class="mr-2" onClick={toggleAdvanced}>
          {() => (
            <>
-              {isAdvanced ? t('putAway') : t('unfold')}
+              {isAdvanced ? t('component.form.putAway') : t('component.form.unfold')}
              <BasicArrow expand={!isAdvanced} top />
            </>
          )}
--- a/src/components/Form/src/FormItem.tsx
+++ b/src/components/Form/src/FormItem.tsx
@@ -47,7 +47,7 @@ export default defineComponent({
    },
  },
  setup(props, { slots }) {
-    const { t } = useI18n('component.form');
+    const { t } = useI18n();
    // @ts-ignore
    const itemLabelWidthRef = useItemLabelWidth(toRef(props, 'schema'), toRef(props, 'formProps'));

@@ -175,7 +175,7 @@ export default defineComponent({
      const characterInx = rules.findIndex((val) => val.max);
      if (characterInx !== -1 && !rules[characterInx].validator) {
        rules[characterInx].message =
-          rules[characterInx].message || t('maxTip', [rules[characterInx].max]);
+          rules[characterInx].message || t('component.form.maxTip', [rules[characterInx].max]);
      }
      return rules;
    }
--- a/src/components/Form/src/helper.ts
+++ b/src/components/Form/src/helper.ts
@@ -1,17 +1,17 @@
 import type { ComponentType } from './types/index';
 import { useI18n } from '/@/hooks/web/useI18n';

-const { t } = useI18n('component.form');
+const { t } = useI18n();

 /**
 * @description: 生成placeholder
 */
 export function createPlaceholderMessage(component: ComponentType) {
  if (component.includes('Input') || component.includes('Complete')) {
-    return t('input');
+    return t('component.form.input');
  }
  if (component.includes('Picker')) {
-    return t('choose');
+    return t('component.form.choose');
  }
  if (
    component.includes('Select') ||
@@ -21,7 +21,7 @@ export function createPlaceholderMessage(component: ComponentType) {
    component.includes('Switch')
  ) {
    // return `请选择${label}`;
-    return t('choose');
+    return t('component.form.choose');
  }
  return '';
 }
--- a/src/components/Menu/src/SearchInput.vue
+++ b/src/components/Menu/src/SearchInput.vue
@@ -1,7 +1,7 @@
 <template>
  <section class="menu-search-input" @Click="handleClick" :class="searchClass">
    <a-input-search
-      :placeholder="t('search')"
+      :placeholder="t('component.menu.search')"
      class="menu-search-input__search"
      allowClear
      @change="handleChange"
@@ -29,7 +29,7 @@
      },
    },
    setup(props, { emit }) {
-      const { t } = useI18n('component.menu');
+      const { t } = useI18n();

      const [debounceEmitChange] = useDebounce(emitChange, 200);

--- a/src/components/Modal/src/props.ts
+++ b/src/components/Modal/src/props.ts
@@ -3,15 +3,15 @@ import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';

 import { useI18n } from '/@/hooks/web/useI18n';
 import { propTypes } from '/@/utils/propTypes';
-const { t } = useI18n('component.modal');
+const { t } = useI18n();

 export const modalProps = {
  visible: propTypes.bool,
  // open drag
  draggable: propTypes.bool.def(true),
  centered: propTypes.bool,
-  cancelText: propTypes.string.def(t('cancelText')),
-  okText: propTypes.string.def(t('okText')),
+  cancelText: propTypes.string.def(t('component.modal.cancelText')),
+  okText: propTypes.string.def(t('component.modal.okText')),

  closeFunc: Function as PropType<() => Promise<boolean>>,
 };
--- a/src/components/Table/src/components/TableSetting.vue
+++ b/src/components/Table/src/components/TableSetting.vue
@@ -4,27 +4,27 @@

    <Tooltip placement="top" v-if="getSetting.redo">
      <template #title>
-        <span>{{ t('settingRedo') }}</span>
+        <span>{{ t('component.table.settingRedo') }}</span>
      </template>
      <RedoOutlined @click="redo" />
    </Tooltip>

    <Tooltip placement="top" v-if="getSetting.size">
      <template #title>
-        <span>{{ t('settingDens') }}</span>
+        <span>{{ t('component.table.settingDens') }}</span>
      </template>
      <Dropdown placement="bottomCenter" :trigger="['click']">
        <ColumnHeightOutlined />
        <template #overlay>
          <Menu @click="handleTitleClick" selectable v-model:selectedKeys="selectedKeysRef">
            <MenuItem key="default">
-              <span>{{ t('settingDensDefault') }}</span>
+              <span>{{ t('component.table.settingDensDefault') }}</span>
            </MenuItem>
            <MenuItem key="middle">
-              <span>{{ t('settingDensMiddle') }}</span>
+              <span>{{ t('component.table.settingDensMiddle') }}</span>
            </MenuItem>
            <MenuItem key="small">
-              <span>{{ t('settingDensSmall') }}</span>
+              <span>{{ t('component.table.settingDensSmall') }}</span>
            </MenuItem>
          </Menu>
        </template>
@@ -140,7 +140,7 @@
        defaultCheckList: [],
      });

-      const { t } = useI18n('component.table');
+      const { t } = useI18n();

      watchEffect(() => {
        const columns = table.getColumns();
--- a/src/components/Table/src/hooks/useColumns.ts
+++ b/src/components/Table/src/hooks/useColumns.ts
@@ -6,7 +6,7 @@ import { PAGE_SIZE } from '../const';
 import { useProps } from './useProps';
 import { useI18n } from '/@/hooks/web/useI18n';

-const { t } = useI18n('component.table');
+const { t } = useI18n();
 export function useColumns(
  refProps: ComputedRef<BasicTableProps>,
  getPaginationRef: ComputedRef<false | PaginationProps>
@@ -44,7 +44,7 @@ export function useColumns(
      columns.unshift({
        flag: 'INDEX',
        width: 50,
-        title: t('index'),
+        title: t('component.table.index'),
        align: 'center',
        customRender: ({ index }) => {
          const getPagination = unref(getPaginationRef);
--- a/src/components/Table/src/hooks/usePagination.tsx
+++ b/src/components/Table/src/hooks/usePagination.tsx
@@ -10,7 +10,7 @@ import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const';
 import { useProps } from './useProps';
 import { useI18n } from '/@/hooks/web/useI18n';

-const { t } = useI18n('component.table');
+const { t } = useI18n();
 export function usePagination(refProps: ComputedRef<BasicTableProps>) {
  const configRef = ref<PaginationProps>({});
  const { propsRef } = useProps(refProps);
@@ -25,7 +25,7 @@ export function usePagination(refProps: ComputedRef<BasicTableProps>) {
      pageSize: PAGE_SIZE,
      size: 'small',
      defaultPageSize: PAGE_SIZE,
-      showTotal: (total) => t('total', { total }),
+      showTotal: (total) => t('component.table.total', { total }),
      showSizeChanger: true,
      pageSizeOptions: PAGE_SIZE_OPTIONS,
      itemRender: ({ page, type, originalElement }) => {
--- a/src/components/Upload/src/BasicUpload.vue
+++ b/src/components/Upload/src/BasicUpload.vue
@@ -2,11 +2,11 @@
  <div>
    <a-button-group>
      <a-button type="primary" @click="openUploadModal" preIcon="ant-design:cloud-upload-outlined">
-        {{ t('upload') }}
+        {{ t('component.upload.upload') }}
      </a-button>
      <Tooltip placement="bottom" v-if="showPreview">
        <template #title>
-          {{ t('uploaded') }}
+          {{ t('component.upload.uploaded') }}
          <template v-if="fileListRef.length">{{ fileListRef.length }}</template>
        </template>
        <a-button @click="openPreviewModal">
@@ -46,7 +46,7 @@
    components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
    props: uploadContainerProps,
    setup(props, { emit, attrs }) {
-      const { t } = useI18n('component.upload');
+      const { t } = useI18n();
      // 上传modal
      const [registerUploadModal, { openModal: openUploadModal }] = useModal();

--- a/src/components/Upload/src/UploadModal.vue
+++ b/src/components/Upload/src/UploadModal.vue
@@ -1,8 +1,8 @@
 <template>
  <BasicModal
    width="800px"
-    :title="t('upload')"
-    :okText="t('save')"
+    :title="t('component.upload.upload')"
+    :okText="t('component.upload.save')"
    v-bind="$attrs"
    @register="register"
    @ok="handleOk"
@@ -31,7 +31,7 @@
        :before-upload="beforeUpload"
        class="upload-modal-toolbar__btn"
      >
-        <a-button type="primary"> {{ t('choose') }} </a-button>
+        <a-button type="primary"> {{ t('component.upload.choose') }} </a-button>
      </Upload>
    </div>
    <FileList :dataSource="fileListRef" :columns="columns" :actionColumn="actionColumn" />
@@ -64,7 +64,7 @@
    props: basicProps,
    setup(props, { emit }) {
      //   是否正在上传
-      const { t } = useI18n('component.upload');
+      const { t } = useI18n();

      const isUploadingRef = ref(false);
      const fileListRef = ref<FileItem[]>([]);
@@ -105,10 +105,10 @@
          (item) => item.status === UploadResultStatus.ERROR
        );
        return isUploadingRef.value
-          ? t('uploading')
+          ? t('component.upload.uploading')
          : someError
-          ? t('reUploadFailed')
-          : t('startUpload');
+          ? t('component.upload.reUploadFailed')
+          : t('component.upload.startUpload');
      });

      // 上传前校验
@@ -119,13 +119,13 @@

        // 设置最大值，则判断
        if (maxSize && file.size / 1024 / 1024 >= maxSize) {
-          createMessage.error(t('maxSizeMultiple', [maxSize]));
+          createMessage.error(t('component.upload.maxSizeMultiple', [maxSize]));
          return false;
        }

        // 设置类型,则判断
        if (accept.length > 0 && !checkFileType(file, accept)) {
-          createMessage.error!(t('acceptUpload', [accept.join(',')]));
+          createMessage.error!(t('acomponent.upload.cceptUpload', [accept.join(',')]));
          return false;
        }
        const commonItem = {
@@ -206,7 +206,7 @@
      async function handleStartUpload() {
        const { maxNumber } = props;
        if (fileListRef.value.length > maxNumber) {
-          return createMessage.warning(t('maxNumber', [maxNumber]));
+          return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
        }
        try {
          isUploadingRef.value = true;
@@ -233,10 +233,10 @@
        const { maxNumber } = props;

        if (fileListRef.value.length > maxNumber) {
-          return createMessage.warning(t('maxNumber', [maxNumber]));
+          return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
        }
        if (isUploadingRef.value) {
-          return createMessage.warning(t('saveWarn'));
+          return createMessage.warning(t('component.upload.saveWarn'));
        }
        const fileList: string[] = [];

@@ -248,7 +248,7 @@
        }
        // 存在一个上传成功的即可保存
        if (fileList.length <= 0) {
-          return createMessage.warning(t('saveError'));
+          return createMessage.warning(t('component.upload.saveError'));
        }
        fileListRef.value = [];
        closeModal();
@@ -261,7 +261,7 @@
          fileListRef.value = [];
          return true;
        } else {
-          createMessage.warning(t('uploadWait'));
+          createMessage.warning(t('component.upload.uploadWait'));
          return false;
        }
      }
--- a/src/components/Upload/src/UploadPreviewModal.vue
+++ b/src/components/Upload/src/UploadPreviewModal.vue
@@ -1,7 +1,7 @@
 <template>
  <BasicModal
    width="800px"
-    :title="t('preview')"
+    :title="t('component.upload.preview')"
    wrapClassName="upload-preview-modal"
    v-bind="$attrs"
    @register="register"
@@ -30,7 +30,7 @@
    props: previewProps,
    setup(props, { emit }) {
      const [register, { closeModal }] = useModalInner();
-      const { t } = useI18n('component.upload');
+      const { t } = useI18n();

      const fileListRef = ref<PreviewFileItem[]>([]);
      watch(
--- a/src/components/Upload/src/data.tsx
+++ b/src/components/Upload/src/data.tsx
@@ -7,14 +7,14 @@ import { Progress, Tag } from 'ant-design-vue';
 import TableAction from '/@/components/Table/src/components/TableAction';

 import { useI18n } from '/@/hooks/web/useI18n';
-const { t } = useI18n('component.upload');
+const { t } = useI18n();

 // 文件上传列表
 export function createTableColumns(): BasicColumn[] {
  return [
    {
      dataIndex: 'thumbUrl',
-      title: t('legend'),
+      title: t('component.upload.legend'),
      width: 100,
      customRender: ({ record }) => {
        const { thumbUrl, type } = (record as FileItem) || {};
@@ -23,7 +23,7 @@ export function createTableColumns(): BasicColumn[] {
    },
    {
      dataIndex: 'name',
-      title: t('fileName'),
+      title: t('component.upload.fileName'),
      align: 'left',
      customRender: ({ text, record }) => {
        const { percent, status: uploadStatus } = (record as FileItem) || {};
@@ -47,7 +47,7 @@ export function createTableColumns(): BasicColumn[] {
    },
    {
      dataIndex: 'size',
-      title: t('fileSize'),
+      title: t('component.upload.fileSize'),
      width: 100,
      customRender: ({ text = 0 }) => {
        return text && (text / 1024).toFixed(2) + 'KB';
@@ -60,15 +60,15 @@ export function createTableColumns(): BasicColumn[] {
    // },
    {
      dataIndex: 'status',
-      title: t('fileStatue'),
+      title: t('component.upload.fileStatue'),
      width: 100,
      customRender: ({ text }) => {
        if (text === UploadResultStatus.SUCCESS) {
-          return <Tag color="green">{() => t('uploadSuccess')}</Tag>;
+          return <Tag color="green">{() => t('component.upload.uploadSuccess')}</Tag>;
        } else if (text === UploadResultStatus.ERROR) {
-          return <Tag color="red">{() => t('uploadError')}</Tag>;
+          return <Tag color="red">{() => t('component.upload.uploadError')}</Tag>;
        } else if (text === UploadResultStatus.UPLOADING) {
-          return <Tag color="blue">{() => t('uploading')}</Tag>;
+          return <Tag color="blue">{() => t('component.upload.uploading')}</Tag>;
        }

        return text;
@@ -79,20 +79,20 @@ export function createTableColumns(): BasicColumn[] {
 export function createActionColumn(handleRemove: Function, handlePreview: Function): BasicColumn {
  return {
    width: 120,
-    title: t('operating'),
+    title: t('component.upload.operating'),
    dataIndex: 'action',
    fixed: false,
    customRender: ({ record }) => {
      const actions: ActionItem[] = [
        {
-          label: t('del'),
+          label: t('component.upload.del'),
          color: 'error',
          onClick: handleRemove.bind(null, record),
        },
      ];
      if (checkImgType(record)) {
        actions.unshift({
-          label: t('preview'),
+          label: t('component.upload.preview'),
          onClick: handlePreview.bind(null, record),
        });
      }
@@ -105,7 +105,7 @@ export function createPreviewColumns(): BasicColumn[] {
  return [
    {
      dataIndex: 'url',
-      title: t('legend'),
+      title: t('component.upload.legend'),
      width: 100,
      customRender: ({ record }) => {
        const { url, type } = (record as PreviewFileItem) || {};
@@ -116,7 +116,7 @@ export function createPreviewColumns(): BasicColumn[] {
    },
    {
      dataIndex: 'name',
-      title: t('fileName'),
+      title: t('component.upload.fileName'),
      align: 'left',
    },
  ];
@@ -133,7 +133,7 @@ export function createPreviewActionColumn({
 }): BasicColumn {
  return {
    width: 160,
-    title: t('operating'),
+    title: t('component.upload.operating'),
    dataIndex: 'action',
    fixed: false,
    customRender: ({ record }) => {
@@ -141,18 +141,18 @@ export function createPreviewActionColumn({

      const actions: ActionItem[] = [
        {
-          label: t('del'),
+          label: t('component.upload.del'),
          color: 'error',
          onClick: handleRemove.bind(null, record),
        },
        {
-          label: t('download'),
+          label: t('component.upload.download'),
          onClick: handleDownload.bind(null, record),
        },
      ];
      if (isImgTypeByName(url)) {
        actions.unshift({
-          label: t('preview'),
+          label: t('component.upload.preview'),
          onClick: handlePreview.bind(null, record),
        });
      }
--- a/src/components/Upload/src/useUpload.ts
+++ b/src/components/Upload/src/useUpload.ts
@@ -1,6 +1,6 @@
 import { Ref, unref, computed } from 'vue';
 import { useI18n } from '/@/hooks/web/useI18n';
-const { t } = useI18n('component.upload');
+const { t } = useI18n();
 export function useUploadType({
  acceptRef,
  //   uploadTypeRef,
@@ -38,17 +38,17 @@ export function useUploadType({

    const accept = unref(acceptRef);
    if (accept.length > 0) {
-      helpTexts.push(t('accept', [accept.join(',')]));
+      helpTexts.push(t('component.upload.accept', [accept.join(',')]));
    }

    const maxSize = unref(maxSizeRef);
    if (maxSize) {
-      helpTexts.push(t('maxSize', [maxSize]));
+      helpTexts.push(t('component.upload.maxSize', [maxSize]));
    }

    const maxNumber = unref(maxNumberRef);
    if (maxNumber && maxNumber !== Infinity) {
-      helpTexts.push(t('maxNumber', [maxNumber]));
+      helpTexts.push(t('component.upload.maxNumber', [maxNumber]));
    }
    return helpTexts.join('，');
  });
--- a/src/components/Verify/src/ImgRotate.tsx
+++ b/src/components/Verify/src/ImgRotate.tsx
@@ -30,7 +30,7 @@ export default defineComponent({
      endTime: 0,
      draged: false,
    });
-    const { t } = useI18n('component.verify');
+    const { t } = useI18n();

    watch(
      () => state.isPassing,
@@ -146,7 +146,9 @@ export default defineComponent({
            />
            {state.showTip && (
              <span class={[`ir-dv-img__tip`, state.isPassing ? 'success' : 'error']}>
-                {state.isPassing ? t('time', { time: time.toFixed(1) }) : t('error')}
+                {state.isPassing
+                  ? t('component.verify.time', { time: time.toFixed(1) })
+                  : t('component.verify.error')}
              </span>
            )}
            {!state.showTip && !state.draged && (
--- a/src/components/Verify/src/props.ts
+++ b/src/components/Verify/src/props.ts
@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 import { useI18n } from '/@/hooks/web/useI18n';

-const { t } = useI18n('component.verify');
+const { t } = useI18n();
 export const basicProps = {
  value: {
    type: Boolean as PropType<boolean>,
@@ -15,11 +15,11 @@ export const basicProps = {

  text: {
    type: [String] as PropType<string>,
-    default: t('dragText'),
+    default: t('component.verify.dragText'),
  },
  successText: {
    type: [String] as PropType<string>,
-    default: t('successText'),
+    default: t('component.verify.successText'),
  },
  height: {
    type: [Number, String] as PropType<number | string>,