@kine-design/crud 0.0.1-beta.7 → 0.0.1-beta.8

package/components/crudPage/KCrudPage.tsx

@@ -9,6 +9,7 @@
  * 一个配置出一整个页面：标题 + 筛选 + 表格 + 分页 + 状态标签。
  */
 import { defineComponent, type PropType } from 'vue';
+import { useRouter } from 'vue-router';
 import KTableColumn from 'kine-ui/components/tableColumn/KTableColumn.tsx';
 import KTag from 'kine-ui/components/tag/KTag.tsx';
 import KPageHeader from '../pageHeader/KPageHeader.tsx';
@@ -28,6 +29,7 @@ export default defineComponent({
   },
 
   setup(props, { slots }) {
+    const router = useRouter();
     const {
       page, pageSize, total, list, loading,
       filters, onPageChange, onSearch, onReset,
@@ -67,6 +69,28 @@ export default defineComponent({
       }
     };
 
+    /** 行点击 → 跳转详情 */
+    const onRowClick = (e: MouseEvent) => {
+      const detailPath = props.config.detailPath;
+      if (!detailPath) return;
+
+      const tr = (e.target as HTMLElement).closest?.('tr');
+      if (!tr) return;
+      const tbody = tr.closest('tbody');
+      if (!tbody || tbody.classList.contains('k-table-empty')) return;
+
+      const rows = Array.from(tbody.querySelectorAll('tr'));
+      const index = rows.indexOf(tr as HTMLTableRowElement);
+      if (index < 0 || index >= list.value.length) return;
+
+      const row = list.value[index];
+      const key = props.config.rowKey ?? 'id';
+      const id = row[key];
+      if (id != null) {
+        router.push(`${detailPath}/${id}`);
+      }
+    };
+
     /** 渲染筛选区表单项 */
     const renderFilters = () => {
       if (!props.config.filters?.length) return null;
@@ -102,47 +126,49 @@ export default defineComponent({
     };
 
     return () => (
-      <div class="k-crud-page">
+      <div class={['k-crud-page', props.config.detailPath ? 'k-crud-page--clickable' : '']}>
         <KPageHeader title={props.config.title}>
           {{ extra: slots.headerExtra }}
         </KPageHeader>
 
-        <KSearchTable
-          data={list.value}
-          loading={loading.value}
-          total={total.value}
-          page={page.value}
-          pageSize={pageSize.value}
-          searchable={!!props.config.filters?.length}
-          onUpdate:page={onPageChange}
-          onSearch={onSearch}
-          onReset={onReset}
-        >
-          {{
-            search: renderFilters,
-            toolbar: slots.toolbar,
-            default: () => props.config.columns.map(col => {
-              const customSlot = slots[`column-${col.param}`];
-              return (
-                <KTableColumn
-                  key={col.param}
-                  param={col.param}
-                  label={col.label}
-                  width={col.width ?? ''}
-                >
-                  {{
-                    default: customSlot
-                      ? (scope: { row: Record<string, unknown>; index: number }) => customSlot(scope)
-                      : col.type
-                        ? (scope: { row: Record<string, unknown> }) => renderCell(col, scope.row)
-                        : undefined,
-                  }}
-                </KTableColumn>
-              );
-            }),
-            empty: slots.empty,
-          }}
-        </KSearchTable>
+        <div onClick={onRowClick}>
+          <KSearchTable
+            data={list.value}
+            loading={loading.value}
+            total={total.value}
+            page={page.value}
+            pageSize={pageSize.value}
+            searchable={!!props.config.filters?.length}
+            onUpdate:page={onPageChange}
+            onSearch={onSearch}
+            onReset={onReset}
+          >
+            {{
+              search: renderFilters,
+              toolbar: slots.toolbar,
+              default: () => props.config.columns.map(col => {
+                const customSlot = slots[`column-${col.param}`];
+                return (
+                  <KTableColumn
+                    key={col.param}
+                    param={col.param}
+                    label={col.label}
+                    width={col.width ?? ''}
+                  >
+                    {{
+                      default: customSlot
+                        ? (scope: { row: Record<string, unknown>; index: number }) => customSlot(scope)
+                        : col.type
+                          ? (scope: { row: Record<string, unknown> }) => renderCell(col, scope.row)
+                          : undefined,
+                    }}
+                  </KTableColumn>
+                );
+              }),
+              empty: slots.empty,
+            }}
+          </KSearchTable>
+        </div>
       </div>
     );
   },

package/components/crudPage/crudPage.css

@@ -46,3 +46,8 @@
 .k-crud-page-filter-control:focus {
   border-color: var(--kine-color-accent-default);
 }
+
+/* ===== 行可点击 ===== */
+.k-crud-page--clickable .k-tbody .k-tr {
+  cursor: pointer;
+}

package/composables/page/types.ts

@@ -55,4 +55,6 @@ export interface CrudPageConfig {
   pageSize?: number;
   /** 行主键字段，默认 'id' */
   rowKey?: string;
+  /** 详情页路由前缀，设置后点击行自动跳转到 `${detailPath}/${row[rowKey]}` */
+  detailPath?: string;
 }

package/dist/composables/page/types.d.ts

@@ -54,4 +54,6 @@ export interface CrudPageConfig {
     pageSize?: number;
     /** 行主键字段，默认 'id' */
     rowKey?: string;
+    /** 详情页路由前缀，设置后点击行自动跳转到 `${detailPath}/${row[rowKey]}` */
+    detailPath?: string;
 }

package/dist/crud.css

@@ -743,6 +743,11 @@
 .k-crud-page-filter-control:focus {
   border-color: var(--kine-color-accent-default);
 }
+
+/* ===== 行可点击 ===== */
+.k-crud-page--clickable .k-tbody .k-tr {
+  cursor: pointer;
+}
 /**
  * @description KLoginPage 登录页样式 — Phosphor 主题
  * @author 阿怪

package/dist/crud.js

@@ -1,7 +1,7 @@
 import { Comment, Fragment, computed, createApp, createTextVNode, createVNode, defineComponent, h, inject, isRef, mergeProps, onBeforeUnmount, onMounted, onUnmounted, provide, reactive, ref, resolveComponent, shallowRef, toRef, triggerRef, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { QueryClient, VueQueryPlugin, useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import { createPinia, defineStore } from "pinia";
-import { useRoute, useRouter } from "vue-router";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -6527,6 +6527,7 @@ var KCrudPage_default = /* @__PURE__ */ defineComponent({
 		required: true
 	} },
 	setup(props, { slots }) {
+		const router = useRouter();
 		const { page, pageSize, total, list, loading, filters, onPageChange, onSearch, onReset } = useCrudPage(props.config);
 		/** 格式化日期 */
 		const formatDate = (val) => {
@@ -6561,6 +6562,19 @@ var KCrudPage_default = /* @__PURE__ */ defineComponent({
 				default: return val != null ? String(val) : "";
 			}
 		};
+		/** 行点击 → 跳转详情 */
+		const onRowClick = (e) => {
+			const detailPath = props.config.detailPath;
+			if (!detailPath) return;
+			const tr = e.target.closest?.("tr");
+			if (!tr) return;
+			const tbody = tr.closest("tbody");
+			if (!tbody || tbody.classList.contains("k-table-empty")) return;
+			const index = Array.from(tbody.querySelectorAll("tr")).indexOf(tr);
+			if (index < 0 || index >= list.value.length) return;
+			const id = list.value[index][props.config.rowKey ?? "id"];
+			if (id != null) router.push(`${detailPath}/${id}`);
+		};
 		/** 渲染筛选区表单项 */
 		const renderFilters = () => {
 			if (!props.config.filters?.length) return null;
@@ -6586,7 +6600,7 @@ var KCrudPage_default = /* @__PURE__ */ defineComponent({
 				}
 			}, null)]));
 		};
-		return () => createVNode("div", { "class": "k-crud-page" }, [createVNode(KPageHeader_default, { "title": props.config.title }, { extra: slots.headerExtra }), createVNode(KSearchTable_default, {
+		return () => createVNode("div", { "class": ["k-crud-page", props.config.detailPath ? "k-crud-page--clickable" : ""] }, [createVNode(KPageHeader_default, { "title": props.config.title }, { extra: slots.headerExtra }), createVNode("div", { "onClick": onRowClick }, [createVNode(KSearchTable_default, {
 			"data": list.value,
 			"loading": loading.value,
 			"total": total.value,
@@ -6609,7 +6623,7 @@ var KCrudPage_default = /* @__PURE__ */ defineComponent({
 				}, { default: customSlot ? (scope) => customSlot(scope) : col.type ? (scope) => renderCell(col, scope.row) : void 0 });
 			}),
 			empty: slots.empty
-		})]);
+		})])]);
 	}
 });
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kine-design/crud",
-  "version": "0.0.1-beta.7",
+  "version": "0.0.1-beta.8",
   "type": "module",
   "main": "./dist/crud.js",
   "types": "./dist/index.d.ts",