@ysgroup/ui 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ysgroup/ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -20,4 +20,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/YsCrudTable.vue

@@ -1,7 +1,8 @@
 <!-- YsCrudTable —— 只读表格 + 行"编辑"按钮呼出 YsFormDialog。
-  规范：表格上不挂载任何行内编辑组件（体验与性能）。 -->
+  规范：表格上不挂载任何行内编辑组件（体验与性能）。
+  超过 20 条自动显示分页器（20 / 50 / 100 档，默认每页 20 条）。 -->
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { ElMessageBox } from "element-plus";
 import { FIELD_SPECS, ENUM_META } from "@ysgroup/contracts";
 import { enumLabel } from "../tokens-runtime";
@@ -64,6 +65,7 @@ const props = defineProps<{
   rowDisplay?: (row: Record<string, unknown>, field: string, value: unknown) => unknown;
   saving?: boolean;
   externalEditor?: boolean;
+  actionWidth?: number;
 }>();
 
 const emit = defineEmits<{
@@ -76,6 +78,9 @@ const emit = defineEmits<{
 const keyword = ref("");
 const dialogOpen = ref(false);
 const editing = ref<Record<string, unknown> | null>(null);
+const currentPage = ref(1);
+const pageSize = ref(20);
+const PAGE_SIZES = [20, 50, 100];
 
 const allSpecs = computed<FieldSpec[]>(
   () => (FIELD_SPECS as unknown as Record<string, FieldSpec[]>)[props.table] ?? [],
@@ -100,6 +105,21 @@ const filtered = computed(() => {
   );
 });
 
+// 搜索词变化时重置到第一页
+watch(keyword, () => { currentPage.value = 1; });
+// 行数变化（外部数据更新）时若当前页超出则回到第一页
+watch(() => filtered.value.length, (len) => {
+  const maxPage = Math.max(1, Math.ceil(len / pageSize.value));
+  if (currentPage.value > maxPage) currentPage.value = 1;
+});
+
+const paged = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value;
+  return filtered.value.slice(start, start + pageSize.value);
+});
+
+const showPagination = computed(() => filtered.value.length > 20);
+
 function display(row: Record<string, unknown>, f: FieldSpec): string {
   const v = props.rowDisplay ? props.rowDisplay(row, f.key, row[f.key]) : row[f.key];
   if (f.widget === "switch") return v ? "是" : "否";
@@ -149,7 +169,7 @@ function onSubmit(payload: Record<string, unknown>) {
       <el-button v-if="!readonly" type="primary" @click="onCreate">{{ createLabel || "新建" }}</el-button>
     </div>
 
-    <el-table :data="filtered" v-loading="loading" stripe border size="small" table-layout="fixed" row-key="_id">
+    <el-table :data="paged" v-loading="loading" stripe border size="small" table-layout="fixed" row-key="_id">
       <el-table-column
         v-for="c in displayColumns"
         :key="c.key"
@@ -159,7 +179,7 @@ function onSubmit(payload: Record<string, unknown>) {
       >
         <template #default="{ row }">{{ display(row, c) }}</template>
       </el-table-column>
-      <el-table-column v-if="!readonly" label="操作" width="260">
+      <el-table-column v-if="!readonly" label="操作" :width="actionWidth ?? 260">
         <template #default="{ row }">
           <el-button size="small" @click="onEdit(row)">编辑</el-button>
           <slot name="row-actions" :row="row" />
@@ -170,6 +190,17 @@ function onSubmit(payload: Record<string, unknown>) {
       </el-table-column>
     </el-table>
 
+    <el-pagination
+      v-if="showPagination"
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="PAGE_SIZES"
+      :total="filtered.length"
+      layout="total, sizes, prev, pager, next"
+      class="ys-crud__pagination"
+      @size-change="currentPage = 1"
+    />
+
     <YsFormDialog
       v-if="!externalEditor"
       v-model="dialogOpen"
@@ -191,4 +222,8 @@ function onSubmit(payload: Record<string, unknown>) {
 .ys-crud__spacer {
   flex: 1;
 }
+.ys-crud__pagination {
+  margin-top: 12px;
+  justify-content: flex-end;
+}
 </style>

package/src/index.ts

@@ -7,5 +7,3 @@ export { default as YsLoginPage } from "./components/YsLoginPage.vue";
 export { default as YsSettingsCenterDialog } from "./components/YsSettingsCenterDialog.vue";
 export { default as YsPortalGrid } from "./components/YsPortalGrid.vue";
 export { enumOptions, enumLabel, type EnumOption } from "./tokens-runtime";
-
-export const YS_UI_VERSION = "0.1.4";