@qin-ui/antd-vue-pro 2.2.4 → 2.3.0

package/src/components/component-provider/components/index.vue

@@ -9,6 +9,7 @@
  *
  * @param {ComponentVars} [componentVars] - 组件全局配置变量
  * @param {Record<ComponentName, any>} [componentMap] - 自定义组件映射，用于替换或扩展内置组件
+ * @param {Partial<ProLocale>} [locale] - 内置文案覆盖，可覆盖任意 locale 文案（如查询/重置/序号/占位符等）
  *
  * @slot default - 需要应用全局配置的子组件内容
  *
@@ -29,9 +30,10 @@
  */
 import { ComponentVars } from '../types';
 import { INJECT_COMPONENTS, ensureInjectConfig } from '../constants';
-import { provide } from 'vue';
+import { computed, provide } from 'vue';
 import { getObject } from '../../../shared/core';
 import { ComponentName } from '../../form/constants';
+import { LOCALE_INJECT_KEY, type ProLocale } from '../../../locale';
 
 type ComponentMap = Partial<Record<ComponentName, any>>;
 
@@ -53,6 +55,13 @@ type Props = {
    * @example { 'input': MyCustomInput, 'select': MyCustomSelect }
    */
   componentMap?: ComponentMap;
+  /**
+   * @description 内置文案覆盖
+   * 可覆盖任意 locale 文案（如查询/重置/序号/占位符等），
+   * 未覆盖的文案默认跟随宿主组件库语言自动切换
+   * @example { 'table.query': '搜索' }
+   */
+  locale?: Partial<ProLocale>;
 };
 
 const props = defineProps<Props>();
@@ -74,6 +83,12 @@ if (props.componentVars) {
 if (props.componentMap) {
   provide(INJECT_COMPONENTS, props.componentMap);
 }
+
+// 注入内置文案覆盖，useLocale 在解析文案时会优先使用
+provide(
+  LOCALE_INJECT_KEY,
+  computed(() => props.locale)
+);
 </script>
 
 <template>

package/src/components/component-provider/constants/index.ts

@@ -23,7 +23,6 @@ export const INJECT_CONFIG: {
     injectionKey: Symbol(''),
     default: {
       pagination: {
-        showTotal: total => `共 ${total} 条`,
         showSizeChanger: true,
         pageSizeOptions: ['10', '20', '30', '40', '50', '100'],
         showQuickJumper: true,
@@ -47,7 +46,7 @@ export const INJECT_CONFIG: {
   // field
   input: {
     injectionKey: Symbol(''),
-    default: { maxlength: 100, allowClear: true, placeholder: '请输入' },
+    default: { maxlength: 100, allowClear: true },
   },
   textarea: {
     injectionKey: Symbol(''),
@@ -56,12 +55,11 @@ export const INJECT_CONFIG: {
       autoSize: { minRows: 3, maxRows: 6 },
       showCount: true,
       allowClear: true,
-      placeholder: '请输入',
     },
   },
   'input-password': {
     injectionKey: Symbol(''),
-    default: { maxlength: 100, allowClear: true, placeholder: '请输入' },
+    default: { maxlength: 100, allowClear: true },
   },
   'input-search': {
     injectionKey: Symbol(''),
@@ -73,17 +71,16 @@ export const INJECT_CONFIG: {
       max: 10 ** 15 - 1,
       min: -(10 ** 15 + 1),
       controls: false,
-      placeholder: '请输入',
       style: { width: '100%' },
     },
   },
   select: {
     injectionKey: Symbol(''),
-    default: { allowClear: true, placeholder: '请选择', getPopupContainer },
+    default: { allowClear: true, getPopupContainer },
   },
   cascader: {
     injectionKey: Symbol(''),
-    default: { allowClear: true, placeholder: '请选择', getPopupContainer },
+    default: { allowClear: true, getPopupContainer },
   },
   'date-picker': {
     injectionKey: Symbol(''),

package/src/components/form/components/BaseField/index.vue

@@ -46,6 +46,7 @@ import { componentMap, TeleportComponentNamePrefix } from '../../constants';
 import { INJECT_COMPONENTS } from '../../../component-provider/constants';
 import { useForm } from '../../hooks/useForm';
 import { getInitProps } from './utils';
+import { useLocale } from '../../../../locale';
 
 defineOptions({ name: 'BaseField', inheritAttrs: false });
 
@@ -55,6 +56,8 @@ type Props = {
 };
 const { component = undefined, path = '' } = defineProps<Props>();
 
+const { t } = useLocale();
+
 const form = useForm(false);
 const { getFormData, setFormData } = form;
 
@@ -106,10 +109,13 @@ const parentDisabled = useInjectDisabled();
  * 属性分为三类：绑定属性（v-model）、组件属性（传递给组件）、插槽（动态渲染）
  */
 const groupedAttrs = computed(() => {
-  const initProps = getInitProps({
-    component: component,
-    picker: attrs.picker,
-  } as Field);
+  const initProps = getInitProps(
+    {
+      component: component,
+      picker: attrs.picker,
+    } as Field,
+    t
+  );
   const mergedProps = mergeProps(
     initProps,
     attrs,

package/src/components/form/components/BaseField/utils/index.ts

@@ -2,15 +2,45 @@ import { Field } from '../../../types';
 import { getInjectConfig } from '../../../../component-provider/constants';
 import { inject } from 'vue';
 
-export const getInitProps = (field: Field): Record<string, any> => {
+type LocaleT = (
+  key: string,
+  params?: Record<string, string | number>
+) => string;
+
+/** 组件的占位符对应的 locale key */
+const PLACEHOLDER_KEYS: Record<string, string> = {
+  input: 'input.placeholder',
+  textarea: 'input.placeholder',
+  'input-password': 'input.placeholder',
+  'input-number': 'input.placeholder',
+  select: 'select.placeholder',
+  cascader: 'select.placeholder',
+};
+
+/**
+ * 根据组件 key 兜底生成 locale 占位符
+ *
+ * @description 用户通过 componentVars 或字段属性显式设置了占位符时不再兜底。
+ */
+const getPlaceholderProps = (
+  key: string,
+  injectProps: Record<string, any>,
+  t: LocaleT
+): Record<string, string> => {
+  const placeholderKey = PLACEHOLDER_KEYS[key];
+  if (!placeholderKey || injectProps.placeholder !== undefined) return {};
+  return { placeholder: t(placeholderKey) };
+};
+
+export const getInitProps = (field: Field, t: LocaleT): Record<string, any> => {
   const { component } = field as any;
   const picker = component === 'date-picker' ? '' : (field as any).picker;
   if (typeof component === 'string') {
     const k = [component, picker].filter(Boolean).join('.');
     const config = getInjectConfig(k);
-    if (!config) return {};
+    if (!config) return getPlaceholderProps(k, {}, t);
     const injectProps = inject(config.injectionKey, config.default);
-    return injectProps;
+    return { ...injectProps, ...getPlaceholderProps(k, injectProps, t) };
   }
   return {};
 };

package/src/components/table/components/ColumnControl.vue

@@ -7,16 +7,24 @@ import {
   MenuItem,
   Checkbox,
 } from '../../../shared/ui';
-import { computed, ref, watch } from 'vue';
-import type { Columns } from '../types';
+import { computed, onMounted, ref, watch } from 'vue';
+import type { Columns, ColumnControlConfig } from '../types';
 import { type Table } from '../hooks/useTable';
 import FilterOutlined from './icons/FilterOutlined.vue';
+import { useLocale } from '../../../locale';
 
 type Props = {
   columns: Columns;
   table?: Table;
+  columnControl?: ColumnControlConfig;
 };
-const { columns, table = undefined } = defineProps<Props>();
+const {
+  columns,
+  table = undefined,
+  columnControl = undefined,
+} = defineProps<Props>();
+
+const { t } = useLocale();
 
 const open = ref(false);
 
@@ -24,29 +32,46 @@ const checkAll = ref(false);
 const indeterminate = ref(false);
 
 const checkedColumnsOptions = computed<
-  Array<{ label: string; value: string; checked: boolean }>
+  Array<{
+    label: string;
+    value: string;
+    checked: boolean;
+    disabled: boolean;
+  }>
 >(() =>
-  columns.flatMap(item =>
-    item.key && item.title
-      ? {
-          label: item.title as string,
-          value: item.key,
-          checked: !item.hidden,
-        }
-      : []
-  )
+  columns.flatMap(item => {
+    if (!item.key || !item.title) return [];
+    const key = item.key as string;
+    if (columnControl?.excludedKeys?.some(ek => String(ek) === key)) return [];
+    const disabled =
+      columnControl?.disabledKeys?.some(dk => String(dk) === key) ?? false;
+    // labels 优先；title 为字符串时直接使用；vnode 等其他类型降级为 key，避免渲染异常
+    const label =
+      (columnControl?.labels?.[key] as string) ??
+      (typeof item.title === 'string' ? item.title : key);
+    return {
+      label,
+      value: key,
+      checked: !item.hidden || disabled,
+      disabled,
+    };
+  })
+);
+
+/** 可被用户勾选/取消的列（非 disabled） */
+const controllableOptions = computed(() =>
+  checkedColumnsOptions.value.filter(item => !item.disabled)
 );
 
 const checkedColumnKeys = computed({
   get() {
-    return (
-      checkedColumnsOptions.value.flatMap(item =>
-        item.checked ? item.value : []
-      ) || []
+    return checkedColumnsOptions.value.flatMap(item =>
+      item.checked ? item.value : []
     );
   },
   set(val) {
-    checkedColumnsOptions.value?.forEach(item => {
+    checkedColumnsOptions.value.forEach(item => {
+      if (item.disabled) return;
       table?.setColumn?.(item.value, {
         hidden: !val.includes(item.value),
       });
@@ -54,14 +79,17 @@ const checkedColumnKeys = computed({
   },
 });
 
-const onCheckAllChange = (e: any) => {
-  checkedColumnKeys.value = e.target.checked
-    ? checkedColumnsOptions.value.map(item => item.value)
-    : [];
+const onCheckAllChange = () => {
+  // 整行点击触发：当前全选则取消全选，否则全选可控列
+  checkedColumnKeys.value = checkAll.value
+    ? []
+    : controllableOptions.value.map(item => item.value);
   indeterminate.value = false;
 };
 
 const checkColumnsMenuItemClick = (val: string) => {
+  const item = checkedColumnsOptions.value.find(o => o.value === val);
+  if (item?.disabled) return;
   if (checkedColumnKeys.value.includes(val)) {
     checkedColumnKeys.value = checkedColumnKeys.value.filter(
       item => item !== val
@@ -73,13 +101,36 @@ const checkColumnsMenuItemClick = (val: string) => {
 
 watch(
   checkedColumnKeys,
-  val => {
+  () => {
+    const controllableChecked = controllableOptions.value.filter(
+      item => item.checked
+    );
     indeterminate.value =
-      !!val.length && val.length < checkedColumnsOptions.value.length;
-    checkAll.value = val.length === checkedColumnsOptions.value.length;
+      !!controllableChecked.length &&
+      controllableChecked.length < controllableOptions.value.length;
+    checkAll.value =
+      controllableChecked.length === controllableOptions.value.length &&
+      controllableOptions.value.length > 0;
   },
   { immediate: true }
 );
+
+// 强制 disabledKeys 列始终展示
+onMounted(() => {
+  columnControl?.disabledKeys?.forEach(key => {
+    table?.setColumn?.(String(key), { hidden: false });
+  });
+});
+
+watch(
+  () => columnControl?.disabledKeys,
+  keys => {
+    keys?.forEach(key => {
+      table?.setColumn?.(String(key), { hidden: false });
+    });
+  },
+  { deep: true }
+);
 </script>
 
 <template>
@@ -92,25 +143,27 @@ watch(
         style="min-width: 100px; max-height: 500px; overflow-y: scroll"
         :selectable="false"
       >
-        <MenuItem :key="0">
-          <div>
-            <Checkbox
-              :checked="checkAll"
-              :indeterminate="indeterminate"
-              @change="onCheckAllChange"
-            >
-              全选
-            </Checkbox>
-          </div>
+        <MenuItem
+          v-if="!columnControl?.disableCheckAll"
+          :key="0"
+          @click="onCheckAllChange"
+        >
+          <Checkbox
+            :checked="checkAll"
+            :indeterminate="indeterminate"
+            style="width: 100%"
+          >
+            {{ t('table.selectAll') }}
+          </Checkbox>
         </MenuItem>
-        <MenuDivider />
+        <MenuDivider v-if="!columnControl?.disableCheckAll" />
         <MenuItem
           v-for="item of checkedColumnsOptions"
           :key="item.value"
           @click="checkColumnsMenuItemClick(item.value)"
         >
-          <Checkbox :checked="checkedColumnKeys.includes(item.value)">
-            <div @click.stop>{{ item.label }}</div>
+          <Checkbox :checked="item.checked" :disabled="item.disabled">
+            <div>{{ item.label }}</div>
           </Checkbox>
         </MenuItem>
       </Menu>

package/src/components/table/components/ProTable.vue

@@ -53,7 +53,13 @@ import type { ContainerComponent } from '../../form/types';
 import SearchForm from './SearchForm.vue';
 import { SearchFormProps } from './SearchForm.vue';
 import type { Table } from '../hooks/useTable';
-import { camelizeProperties, getObject, pick } from '../../../shared/core';
+import { useLocale } from '../../../locale';
+import {
+  camelizeProperties,
+  getObject,
+  pick,
+  Path,
+} from '../../../shared/core';
 import { ComponentSlots } from 'vue-component-type-helpers';
 import {
   DefaultSearchFormContainer,
@@ -61,11 +67,14 @@ import {
   SizeControl,
   ColumnControl,
 } from '.';
-import { Column, Columns } from '../types';
+import { Column, Columns, ColumnControlConfig } from '../types';
 
 defineOptions({ name: 'ProTable', inheritAttrs: false });
 
-type Control = { sizeControl: boolean; columnControl: boolean };
+type Control = {
+  sizeControl: boolean;
+  columnControl: boolean | ColumnControlConfig<Path<RecordType>>;
+};
 
 type SearchFormConfig = Omit<SearchFormProps, 'form'> & {
   // 是否隐藏搜索表单
@@ -101,6 +110,8 @@ const {
   searchFormConfig = undefined,
 } = defineProps<Props>();
 
+const { t } = useLocale();
+
 const config = INJECT_CONFIG['pro-table'];
 const injectProps = inject(config.injectionKey, config.default);
 
@@ -197,17 +208,19 @@ const computedTableContainer = computed(() => {
 type ReturnGenericParameterTypes<V> = V extends Table<any, infer R> ? R : never;
 type RecordType = ReturnGenericParameterTypes<T>;
 
-const indexColumn: ColumnType = {
-  title: '序号',
+const indexColumn = (): ColumnType => ({
+  title: t('table.index'),
   dataIndex: '_index',
   width: 80,
   customRender: ({ index }) => index + 1,
-};
+});
 
 const computedColumns = computed(
   () =>
     [
-      ...((addIndexColumn ?? injectProps.addIndexColumn) ? [indexColumn] : []),
+      ...((addIndexColumn ?? injectProps.addIndexColumn)
+        ? [indexColumn()]
+        : []),
       ...(tableAttrs.value.columns ?? columns?.value ?? ([] as any)).flatMap(
         (item: ColumnType<RecordType>, index: number) => {
           if (item.key) return [{ ...item, key: item.key }];
@@ -237,6 +250,12 @@ const computedPagination = computed<PaginationProps | false>(() => {
     ...injectAttrs.pagination,
     ...pageParam,
     ...tableAttrs.value.pagination,
+    showTotal:
+      tableAttrs.value.pagination?.showTotal ??
+      (injectAttrs.pagination === false
+        ? undefined
+        : injectAttrs.pagination?.showTotal) ??
+      ((total: number) => t('pagination.total', { total })),
   };
 });
 
@@ -255,12 +274,23 @@ const showSearch = computed(() => {
   );
 });
 
-const computedControl = computed<Control>(() => {
+const computedControl = computed<{
+  sizeControl: boolean;
+  columnControl: boolean | ColumnControlConfig<Path<RecordType>>;
+}>(() => {
   const mergedControl = control ?? injectProps.control;
-  const sizeControl = (mergedControl as Control)?.sizeControl ?? mergedControl;
-  const columnControl =
-    (mergedControl as Control)?.columnControl ?? mergedControl;
-  return { sizeControl, columnControl };
+  if (typeof mergedControl === 'boolean') {
+    return { sizeControl: mergedControl, columnControl: mergedControl };
+  }
+  const c = mergedControl as Control;
+  const sizeControl = c.sizeControl ?? true;
+  const columnControl = c.columnControl ?? true;
+  return { sizeControl: !!sizeControl, columnControl };
+});
+
+const columnControlConfig = computed(() => {
+  const cc = computedControl.value.columnControl;
+  return typeof cc === 'object' ? cc : undefined;
 });
 
 onMounted(() => {
@@ -305,7 +335,11 @@ onMounted(() => {
           v-if="computedControl.columnControl"
           class="pro-table_header_column-control"
         >
-          <ColumnControl :columns="computedColumns as any" :table="table" />
+          <ColumnControl
+            :columns="computedColumns as any"
+            :table="table"
+            :column-control="columnControlConfig"
+          />
         </div>
       </div>
 

package/src/components/table/components/SearchForm.vue

@@ -69,9 +69,12 @@ import {
 import ProForm from '../../form';
 import { type Form } from '../../form';
 import DownOutlined from './icons/DownOutlined.vue';
+import { useLocale } from '../../../locale';
 
 defineOptions({ name: 'SearchForm' });
 
+const { t } = useLocale();
+
 const {
   layout = 'grid',
   expand = true,
@@ -230,7 +233,7 @@ const onSearch = () => {
             v-else
             class="pro-table_search-form_reset-button"
             @click="onReset"
-            >重置</Button
+            >{{ t('table.reset') }}</Button
           >
         </template>
       </slot>
@@ -243,7 +246,7 @@ const onSearch = () => {
             type="primary"
             html-type="submit"
             @click="onSearch"
-            >查询
+            >{{ t('table.query') }}
           </Button>
         </template>
       </slot>
@@ -261,7 +264,7 @@ const onSearch = () => {
             class="pro-table_search-form_expand-toggle-button"
             @click="changeExpandStatus"
           >
-            {{ expandStatus ? '收起' : '展开' }}
+            {{ expandStatus ? t('table.collapse') : t('table.expand') }}
             <DownOutlined
               class="transition"
               style="margin-left: 4px"

package/src/components/table/components/SizeControl.vue

@@ -8,9 +8,13 @@ import {
   useConfigContextInject,
 } from '../../../shared/ui';
 import ColumnHeightOutlined from './icons/ColumnHeightOutlined.vue';
+import { computed } from 'vue';
+import { useLocale } from '../../../locale';
 
 type Size = TableProps['size'];
 
+const { t } = useLocale();
+
 const configContext = useConfigContextInject();
 
 const size = defineModel<Size>('size');
@@ -21,11 +25,11 @@ const onSizeChange = (val: any) => {
   size.value = val.key;
 };
 
-const sizeOptions: Array<MenuItemType> = [
-  { label: '默认', key: 'large' },
-  { label: '中等', key: 'middle' },
-  { label: '紧凑', key: 'small' },
-];
+const sizeOptions = computed<Array<MenuItemType>>(() => [
+  { label: t('table.sizeDefault'), key: 'large' },
+  { label: t('table.sizeMiddle'), key: 'middle' },
+  { label: t('table.sizeCompact'), key: 'small' },
+]);
 </script>
 
 <template>

package/src/components/table/types/index.ts

@@ -72,3 +72,29 @@ export type Column<D extends Data = Data> = Omit<
  * ```
  */
 export type Columns<D extends Data = Data> = Array<Column<D>>;
+
+/**
+ * 列控制配置（用于 control.columnControl）
+ *
+ * @template K - 列 key 类型，ProTable 中传入 Path<RecordType> 获得自动补全
+ *
+ * @example
+ * ```ts
+ * const config: ColumnControlConfig<'name' | 'age'> = {
+ *   labels: { name: '姓名', age: '年龄' },
+ *   excludedKeys: [],
+ *   disabledKeys: ['name'],
+ *   disableCheckAll: false,
+ * }
+ * ```
+ */
+export type ColumnControlConfig<K extends string | number = string | number> = {
+  /** 列在下拉中的显示名称映射，key 为列 key/dataIndex，用于 title 为 vnode 时无法正常渲染 */
+  labels?: Partial<Record<K, string>>;
+  /** 不在下拉中出现的列 keys（始终展示，不参与勾选） */
+  excludedKeys?: K[];
+  /** 在下拉中显示但不可取消勾选的列 keys（始终展示，始终勾选） */
+  disabledKeys?: K[];
+  /** 禁用全选/取消全选 */
+  disableCheckAll?: boolean;
+};

package/src/index.ts

@@ -6,6 +6,7 @@ import ProComponentProvider from './components/component-provider';
 export * from './components/form';
 export * from './components/table';
 export * from './components/component-provider';
+export * from './locale';
 
 /**
  * Schema 驱动的表单组件，基于 antd-vue Form 封装

package/src/locale/index.ts

@@ -0,0 +1,71 @@
+/**
+ * antd-vue-pro locale 模块
+ *
+ * @description 提供 useLocale 组合式函数与语言包。
+ * 语言自动跟随宿主应用的 ant-design-vue `a-config-provider` locale 切换，
+ * 也可通过 ProComponentProvider 的 `locale` prop 覆盖任意文案。
+ */
+import {
+  computed,
+  inject,
+  toValue,
+  type InjectionKey,
+  type MaybeRef,
+} from 'vue';
+import {
+  zhCN,
+  zhTW,
+  enUS,
+  format,
+  resolveLocaleName,
+  type ProLocale,
+  type ProLocaleName,
+} from '@qin-ui/pro-components-core';
+import { useConfigContextInject } from '../shared/ui';
+
+export { zhCN, zhTW, enUS };
+
+export type { ProLocale };
+
+/** ProComponentProvider 通过该 key 注入局部覆盖文案 */
+export const LOCALE_INJECT_KEY: InjectionKey<
+  MaybeRef<Partial<ProLocale> | undefined>
+> = Symbol('pro-locale');
+
+/**
+ * 获取响应式 locale 文案
+ *
+ * @description 返回 `t` 翻译函数与当前语言名。
+ * `t` 在 computed / 模板中调用时会随宿主语言切换自动更新。
+ *
+ * @returns
+ * - `t(key, params?)` - 翻译函数，支持 `{placeholder}` 参数
+ * - `lang` - 当前解析出的语言名（'zh-CN' | 'zh-TW' | 'en-US'）
+ *
+ * @example
+ * ```ts
+ * const { t } = useLocale();
+ * t('table.query') // '查询' / '查詢' / 'Search'
+ * t('pagination.total', { total: 100 }) // '共 100 条'
+ * ```
+ */
+export const useLocale = () => {
+  const config = useConfigContextInject();
+  const override = inject(LOCALE_INJECT_KEY, undefined);
+
+  const lang = computed<ProLocaleName>(() =>
+    resolveLocaleName(config.locale?.value?.locale)
+  );
+  const pack = computed<Record<string, string>>(() =>
+    lang.value === 'zh-TW' ? zhTW : lang.value === 'en-US' ? enUS : zhCN
+  );
+
+  const t = (key: string, params?: Record<string, string | number>): string => {
+    const overrides = toValue(override) as Record<string, string> | undefined;
+    const text =
+      overrides?.[key] ?? (pack.value as Record<string, string>)[key] ?? key;
+    return format(text, params);
+  };
+
+  return { t, lang };
+};