@qin-ui/element-plus-pro 1.1.3 → 1.2.0

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

@@ -55,19 +55,28 @@ import type { ContainerComponent } from '../../form/types';
 import SearchForm from './SearchForm.vue';
 import type { SearchFormProps } from './SearchForm.vue';
 import type { Table } from '../useTable';
-import { camelizeProperties, getObject, pick } from '../../../shared/core';
+import { useLocale } from '../../../locale';
+import {
+  camelizeProperties,
+  getObject,
+  pick,
+  Path,
+} from '../../../shared/core';
 import {
   DefaultSearchFormContainer,
   DefaultTableContainer,
   SizeControl,
   ColumnControl,
 } from '.';
-import type { Columns } from '../types';
+import type { Columns, ColumnControlConfig } from '../types';
 import TableColumnRenderer from './TableColumnRenderer.vue';
 
 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'> & {
   // 是否隐藏搜索表单
@@ -112,6 +121,8 @@ const {
   pagination = undefined,
 } = defineProps<Props>();
 
+const { t } = useLocale();
+
 const config = INJECT_CONFIG['pro-table'];
 const injectProps = inject(config.injectionKey, config.default) as any;
 
@@ -235,7 +246,7 @@ const normalizedRawColumns = computed(() => {
       {
         key: '_index',
         type: 'index',
-        label: '序号',
+        label: t('table.index'),
         width: 80,
       },
       ...normalized,
@@ -295,12 +306,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: !!sizeControl, columnControl: !!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;
 });
 
 const resolvedSize = computed(() => {
@@ -357,7 +379,11 @@ onMounted(() => {
           v-if="computedControl.columnControl"
           class="pro-table_header_column-control"
         >
-          <ColumnControl :columns="normalizedRawColumns" :table="table" />
+          <ColumnControl
+            :columns="normalizedRawColumns"
+            :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,
@@ -236,7 +239,7 @@ const onSearch = () => {
             v-else
             class="pro-table_search-form_reset-button"
             @click="onReset"
-            >重置</Button
+            >{{ t('table.reset') }}</Button
           >
         </template>
       </slot>
@@ -250,7 +253,7 @@ const onSearch = () => {
             native-type="submit"
             @click="onSearch"
           >
-            查询
+            {{ t('table.query') }}
           </Button>
         </template>
       </slot>
@@ -268,7 +271,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

@@ -7,18 +7,22 @@ import {
   type TableProps,
 } 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 size = defineModel<Size>('size');
 
 size.value = size.value ?? 'default';
 
-const items: Array<{ label: string; key: NonNullable<Size> }> = [
-  { label: '默认', key: 'default' },
-  { label: '中等', key: 'large' },
-  { label: '紧凑', key: 'small' },
-];
+const items = computed<Array<{ label: string; key: NonNullable<Size> }>>(() => [
+  { label: t('table.sizeDefault'), key: 'default' },
+  { label: t('table.sizeMiddle'), key: 'large' },
+  { label: t('table.sizeCompact'), key: 'small' },
+]);
 </script>
 
 <template>

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

@@ -75,3 +75,26 @@ export type Column<D extends Data = Data> = Partial<
  * @public
  */
 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'> = {
+ *   excludedKeys: [],
+ *   disabledKeys: ['name'],
+ *   disableCheckAll: false,
+ * }
+ * ```
+ */
+export type ColumnControlConfig<K extends string | number = string | number> = {
+  /** 不在下拉中出现的列 keys（始终展示，不参与勾选） */
+  excludedKeys?: K[];
+  /** 在下拉中显示但不可取消勾选的列 keys（始终展示，始终勾选） */
+  disabledKeys?: K[];
+  /** 禁用全选/取消全选 */
+  disableCheckAll?: boolean;
+};

package/src/components/table/useTable.ts

@@ -128,10 +128,22 @@ export function useTable<
   D extends Data = Data,
   T extends Data = ExtendWithAny<D>,
 >(params: UseTableParams<D, T> = {}): Table<D, T> {
-  const { data, ...rest } = params;
+  const { data, columns, ...rest } = params;
   const coreTable = (coreUseTable as any)({
     ...rest,
     dataSource: data,
+    // 补齐列 key（key ?? prop ?? columnKey），
+    // 使 setColumn 等按 key 匹配的 API 对 Element Plus 的 prop 列生效
+    columns: columns?.map(column => {
+      if (column.key !== undefined && column.key !== null) return column;
+      const prop = Array.isArray(column.prop)
+        ? column.prop.join('.')
+        : column.prop;
+      const fallback =
+        prop ??
+        (typeof column.columnKey === 'string' ? column.columnKey : undefined);
+      return { ...column, key: fallback };
+    }),
   }) as _Table<D, T, Column<T>>;
 
   const { dataSource, ...tableWithoutDataSource } = coreTable as any;

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 驱动的表单组件，基于 element-plus Form 封装

package/src/locale/en-US.ts

@@ -0,0 +1,21 @@
+/**
+ * element-plus-pro language pack (English)
+ *
+ * @description Extends the core language pack with element-plus specific
+ * date/time picker placeholder texts.
+ */
+import { enUS } from '@qin-ui/pro-components-core';
+
+export default {
+  ...enUS,
+  // Date/time picker placeholders (defaults of date-picker.* in INJECT_CONFIG)
+  'date-picker.placeholder': 'Please select',
+  'date-picker.start': 'Start date',
+  'date-picker.end': 'End date',
+  'date-picker.startMonth': 'Start month',
+  'date-picker.endMonth': 'End month',
+  'date-picker.startYear': 'Start year',
+  'date-picker.endYear': 'End year',
+  'date-picker.startTime': 'Start time',
+  'date-picker.endTime': 'End time',
+} as const;

package/src/locale/index.ts

@@ -0,0 +1,68 @@
+/**
+ * element-plus-pro locale 模块
+ *
+ * @description 提供 useLocale 组合式函数与语言包。
+ * 语言自动跟随宿主应用的 element-plus `el-config-provider` locale 切换，
+ * 也可通过 ProComponentProvider 的 `locale` prop 覆盖任意文案。
+ */
+import {
+  computed,
+  inject,
+  toValue,
+  type InjectionKey,
+  type MaybeRef,
+} from 'vue';
+import { useLocale as useElLocale } from 'element-plus';
+import {
+  format,
+  resolveLocaleName,
+  type ProLocaleName,
+} from '@qin-ui/pro-components-core';
+import zhCN from './zh-CN';
+import zhTW from './zh-TW';
+import enUS from './en-US';
+
+export { zhCN, zhTW, enUS };
+
+export type ProLocale = typeof zhCN;
+
+/** 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 { lang: elLang } = useElLocale();
+  const override = inject(LOCALE_INJECT_KEY, undefined);
+
+  const lang = computed<ProLocaleName>(() => resolveLocaleName(elLang.value));
+  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 };
+};

package/src/locale/zh-CN.ts

@@ -0,0 +1,21 @@
+/**
+ * element-plus-pro 语言包（简体中文）
+ *
+ * @description 在 core 通用语言包基础上，扩展 element-plus 特有的
+ * 日期/时间组件占位符文案。
+ */
+import { zhCN } from '@qin-ui/pro-components-core';
+
+export default {
+  ...zhCN,
+  // 日期/时间选择器占位符（对应 INJECT_CONFIG 中 date-picker.* 的占位默认值）
+  'date-picker.placeholder': '请选择',
+  'date-picker.start': '开始日期',
+  'date-picker.end': '结束日期',
+  'date-picker.startMonth': '开始月份',
+  'date-picker.endMonth': '结束月份',
+  'date-picker.startYear': '开始年份',
+  'date-picker.endYear': '结束年份',
+  'date-picker.startTime': '开始时间',
+  'date-picker.endTime': '结束时间',
+} as const;

package/src/locale/zh-TW.ts

@@ -0,0 +1,21 @@
+/**
+ * element-plus-pro 语言包（繁體中文）
+ *
+ * @description 在 core 通用語言包基礎上，擴展 element-plus 特有的
+ * 日期/時間元件佔位符文案。
+ */
+import { zhTW } from '@qin-ui/pro-components-core';
+
+export default {
+  ...zhTW,
+  // 日期/時間選擇器佔位符（對應 INJECT_CONFIG 中 date-picker.* 的佔位預設值）
+  'date-picker.placeholder': '請選擇',
+  'date-picker.start': '開始日期',
+  'date-picker.end': '結束日期',
+  'date-picker.startMonth': '開始月份',
+  'date-picker.endMonth': '結束月份',
+  'date-picker.startYear': '開始年份',
+  'date-picker.endYear': '結束年份',
+  'date-picker.startTime': '開始時間',
+  'date-picker.endTime': '結束時間',
+} as const;