@kine-design/crud 0.0.1-beta.10 → 0.0.1-beta.13

package/components/crudPage/KCrudPage.tsx

@@ -9,9 +9,9 @@
  * 一个配置出一整个页面：标题 + 筛选 + 表格 + 分页 + 状态标签。
  */
 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 KImage from 'kine-ui/components/image/KImage.tsx';
 import KInput from 'kine-ui/components/input/KInput.tsx';
 import KSelect from 'kine-ui/components/select/KSelect.tsx';
 import KPageHeader from '../pageHeader/KPageHeader.tsx';
@@ -31,7 +31,6 @@ export default defineComponent({
   },
 
   setup(props, { slots }) {
-    const router = useRouter();
     const {
       page, pageSize, total, list, loading,
       filters, onPageChange, onSearch, onReset,
@@ -67,32 +66,26 @@ export default defineComponent({
         case 'status': return renderStatus(val);
         case 'date': return formatDate(val);
         case 'datetime': return formatDateTime(val);
+        case 'image': {
+          if (!val) return '';
+          const raw = String(val);
+          const resolver = props.config.imageResolver;
+          const src = resolver ? resolver(raw) : raw;
+          return (
+            <KImage
+              src={src}
+              previewSrcList={[src]}
+              width={40}
+              height={40}
+              fit="cover"
+              lazy
+            />
+          );
+        }
         default: return val != null ? String(val) : '';
       }
     };
 
-    /** 行点击 → 跳转详情 */
-    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;
@@ -126,13 +119,12 @@ export default defineComponent({
     };
 
     return () => (
-      <div class={['k-crud-page', props.config.detailPath ? 'k-crud-page--clickable' : '']}>
+      <div class="k-crud-page">
         <KPageHeader title={props.config.title}>
           {{ extra: slots.headerExtra }}
         </KPageHeader>
 
-        <div onClick={onRowClick}>
-          <KSearchTable
+        <KSearchTable
             data={list.value}
             loading={loading.value}
             total={total.value}
@@ -168,7 +160,6 @@ export default defineComponent({
               empty: slots.empty,
             }}
           </KSearchTable>
-        </div>
       </div>
     );
   },

package/components/crudPage/crudPage.css

@@ -34,7 +34,3 @@
   width: 100%;
 }
 
-/* ===== 行可点击 ===== */
-.k-crud-page--clickable .k-tbody .k-tr {
-  cursor: pointer;
-}

package/components/formPage/KFormPage.tsx

@@ -52,50 +52,52 @@ export default defineComponent({
       const title = isEdit.value ? `编辑${props.config.title}` : `新建${props.config.title}`;
 
       return (
-        <div class="k-form-page">
-          {/* 页头 */}
-          <div class="k-fp-header">
-            <div class="k-fp-header-left">
-              <KButton text="←" onClick={goBack} />
-              <h1 class="k-fp-title">{title}</h1>
+        <div class="k-form-page-wrapper">
+          <div class="k-form-page">
+            {/* 页头 */}
+            <div class="k-fp-header">
+              <div class="k-fp-header-left">
+                <KButton text="←" onClick={goBack} />
+                <h1 class="k-fp-title">{title}</h1>
+              </div>
+              <div class="k-fp-header-right">
+                {slots.headerExtra?.()}
+              </div>
             </div>
-            <div class="k-fp-header-right">
-              {slots.headerExtra?.()}
-            </div>
-          </div>
 
-          {/* 表单 */}
-          <KFormCard>
-            {slots.beforeFields?.({ formData })}
+            {/* 表单 */}
+            <KFormCard>
+              {slots.beforeFields?.({ formData })}
 
-            <div class={`k-fp-grid k-fp-grid--${cols}`}>
-              {props.config.fields.map(field => {
-                const span = field.span === 'full' ? cols : (field.span ?? 1);
-                return (
-                  <div
-                    key={field.param}
-                    class="k-fp-field"
-                    style={span > 1 ? { gridColumn: `span ${span}` } : undefined}
-                  >
-                    <label class="k-fp-label">
-                      {field.label}
-                      {field.required && <span class="k-fp-required">*</span>}
-                    </label>
-                    {renderFormField(field, formData, errors.value, validateField, slots)}
-                    {errors.value[field.param] && (
-                      <span class="k-fp-error">{errors.value[field.param]}</span>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
+              <div class={`k-fp-grid k-fp-grid--${cols}`}>
+                {props.config.fields.map(field => {
+                  const span = field.span === 'full' ? cols : (field.span ?? 1);
+                  return (
+                    <div
+                      key={field.param}
+                      class="k-fp-field"
+                      style={span > 1 ? { gridColumn: `span ${span}` } : undefined}
+                    >
+                      <label class="k-fp-label">
+                        {field.label}
+                        {field.required && <span class="k-fp-required">*</span>}
+                      </label>
+                      {renderFormField(field, formData, errors.value, validateField, slots)}
+                      {errors.value[field.param] && (
+                        <span class="k-fp-error">{errors.value[field.param]}</span>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
 
-            {slots.afterFields?.({ formData })}
-          </KFormCard>
+              {slots.afterFields?.({ formData })}
+            </KFormCard>
 
-          {slots.default?.({ formData })}
+            {slots.default?.({ formData })}
+          </div>
 
-          {/* 底部操作栏 */}
+          {/* 底部操作栏 — 在 max-width 容器外，撑满内容区 */}
           <KStickyActionBar>
             {{
               default: () => slots.actions?.({ formData, submit, saveDraft, submitting }) ?? (

package/components/formPage/formPage.css

@@ -79,10 +79,10 @@
 }
 
 .k-form-card-body {
-  padding: 0 var(--kine-spacing-10) var(--kine-spacing-10);
+  padding: var(--kine-spacing-10);
 }
 
-/* 当有 header 时，body 顶部加分割线 */
+/* 有 header 时，body 顶部不需要额外间距（header 自带 padding-bottom） */
 .k-form-card-header + .k-form-card-body {
   padding-top: 0;
 }
@@ -97,7 +97,7 @@
   z-index: 10;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   padding: var(--kine-spacing-6) var(--kine-spacing-12);
   background: var(--kine-color-bg-tertiary, #fff);
   border-top: 1px solid var(--kine-color-border-default, #e5e7eb);
@@ -247,9 +247,19 @@
    KFormPage / KMasterDetailPage — 表单页布局
    ================================================================ */
 
+/* wrapper: 全宽容器，承载 sticky bar 出血 */
+.k-form-page-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
 .k-form-page {
   max-width: 960px;
-  padding: 0 0 80px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 0 var(--kine-spacing-10);
+  flex: 1;
 }
 
 .k-master-detail-page {

package/composables/page/types.ts

@@ -16,7 +16,7 @@ export interface CrudColumnConfig {
   /** 列宽 */
   width?: string;
   /** 列类型，影响渲染方式 */
-  type?: 'text' | 'status' | 'date' | 'datetime';
+  type?: 'text' | 'status' | 'date' | 'datetime' | 'image';
 }
 
 /** 筛选项配置 */
@@ -55,6 +55,8 @@ export interface CrudPageConfig {
   pageSize?: number;
   /** 行主键字段，默认 'id' */
   rowKey?: string;
-  /** 详情页路由前缀，设置后点击行自动跳转到 `${detailPath}/${row[rowKey]}` */
+  /** 详情页路由前缀，用于构建查看/编辑路由：`${detailPath}/${row[rowKey]}` */
   detailPath?: string;
+  /** 图片列 src 转换函数，将原始值转为可访问 URL */
+  imageResolver?: (raw: string) => string;
 }

package/composables/request/createRequest.ts

@@ -17,6 +17,8 @@ import { RequestBuilder, type RequestBuilderContext } from './requestBuilder';
 // ────────────────────────────────────────────────────────────────────────────
 
 export interface RequestClient {
+  /** 请求基础 URL */
+  readonly baseURL: string;
   /** 简便方法，直接返回 Promise<T> */
   send<T>(method: RequestMethod, url: string, body?: unknown): Promise<T>;
   /** GET 请求 */
@@ -85,6 +87,8 @@ export function createRequest(options: RequestOptions = {}): RequestClient {
   }
 
   const client: RequestClient = {
+    baseURL: context.baseURL,
+
     send: <T>(method: RequestMethod, url: string, body?: unknown) =>
       createBuilder(method, url, body).execute<T>(),
 

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

@@ -15,7 +15,7 @@ export interface CrudColumnConfig {
     /** 列宽 */
     width?: string;
     /** 列类型，影响渲染方式 */
-    type?: 'text' | 'status' | 'date' | 'datetime';
+    type?: 'text' | 'status' | 'date' | 'datetime' | 'image';
 }
 /** 筛选项配置 */
 export interface CrudFilterConfig {
@@ -54,6 +54,8 @@ export interface CrudPageConfig {
     pageSize?: number;
     /** 行主键字段，默认 'id' */
     rowKey?: string;
-    /** 详情页路由前缀，设置后点击行自动跳转到 `${detailPath}/${row[rowKey]}` */
+    /** 详情页路由前缀，用于构建查看/编辑路由：`${detailPath}/${row[rowKey]}` */
     detailPath?: string;
+    /** 图片列 src 转换函数，将原始值转为可访问 URL */
+    imageResolver?: (raw: string) => string;
 }

package/dist/composables/request/createRequest.d.ts

@@ -1,6 +1,8 @@
 import { RequestMethod, RequestOptions } from './types';
 import { RequestBuilder } from './requestBuilder';
 export interface RequestClient {
+    /** 请求基础 URL */
+    readonly baseURL: string;
     /** 简便方法，直接返回 Promise<T> */
     send<T>(method: RequestMethod, url: string, body?: unknown): Promise<T>;
     /** GET 请求 */

package/dist/crud.css

@@ -737,6 +737,213 @@
   pointer-events: none;
   cursor: not-allowed;
 }
+/**
+ * @description kine-ui image 样式 — Phosphor 主题
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+/* === 图片容器 === */
+.k-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  background: var(--kine-color-bg-secondary);
+  border-radius: var(--kine-radius-xs);
+}
+
+/* 有预览时鼠标变指针 */
+.k-image-previewable {
+  cursor: zoom-in;
+}
+
+/* === 实际图片元素 === */
+.k-image-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transition: opacity var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-image-inner-hidden {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+/* === 占位容器（loading / error 共用） === */
+.k-image-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kine-spacing-4);
+  min-width: 100px;
+  min-height: 100px;
+  width: 100%;
+  height: 100%;
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-sm);
+}
+
+.k-image-placeholder-icon {
+  width: 40px;
+  height: 40px;
+}
+
+/* loading 状态：accent 微光 + 动画 */
+.k-image-loading {
+  color: var(--kine-color-text-muted);
+}
+
+.k-image-loading .k-image-placeholder-icon {
+  animation: k-image-pulse 1.6s ease-in-out infinite;
+  color: var(--kine-color-accent-default);
+}
+
+@keyframes k-image-pulse {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+}
+
+/* error 状态 */
+.k-image-error {
+  color: var(--kine-color-semantic-error);
+}
+
+.k-image-error-text {
+  color: var(--kine-color-text-muted);
+}
+
+/* === 全屏预览遮罩层 === */
+.k-image-preview-mask {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, var(--kine-color-bg-primary) 90%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* === 预览图片本体 === */
+.k-image-preview-img {
+  max-width: 90vw;
+  max-height: 85vh;
+  object-fit: contain;
+  border-radius: var(--kine-radius-xs);
+  box-shadow: 0 0 40px color-mix(in srgb, var(--kine-color-accent-default) 20%, transparent);
+  transition: transform var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  user-select: none;
+}
+
+/* === 工具栏 === */
+.k-image-preview-toolbar {
+  position: absolute;
+  top: var(--kine-spacing-8);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-2);
+  background: var(--kine-color-bg-secondary);
+  border: 1px solid var(--kine-color-border-default);
+  border-radius: var(--kine-radius-xs);
+  padding: var(--kine-spacing-2) var(--kine-spacing-4);
+  font-family: var(--kine-font-family-mono);
+}
+
+/* === 工具按钮 === */
+.k-image-preview-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--kine-radius-xs);
+  background: transparent;
+  color: var(--kine-color-text-secondary);
+  font-size: 16px;
+  cursor: pointer;
+  transition:
+    color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
+    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-image-preview-btn:hover {
+  color: var(--kine-color-text-primary);
+  background: color-mix(in srgb, var(--kine-color-accent-default) 15%, transparent);
+}
+
+.k-image-preview-close:hover {
+  color: var(--kine-color-semantic-error);
+  background: color-mix(in srgb, var(--kine-color-semantic-error) 15%, transparent);
+}
+
+/* 当前缩放比例显示 */
+.k-image-preview-scale {
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-text-muted);
+  min-width: 40px;
+  text-align: center;
+}
+
+/* === 预览切换箭头 === */
+.k-image-preview-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: 1px solid var(--kine-color-border-default);
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--kine-color-bg-secondary) 80%, transparent);
+  color: var(--kine-color-text-primary);
+  font-size: 26px;
+  cursor: pointer;
+  transition:
+    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
+    border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-image-preview-arrow:hover {
+  background: var(--kine-color-bg-secondary);
+  border-color: var(--kine-color-accent-default);
+  color: var(--kine-color-accent-default);
+}
+
+.k-image-preview-arrow-prev {
+  left: 20px;
+}
+
+.k-image-preview-arrow-next {
+  right: 20px;
+}
+
+/* === 图片计数 === */
+.k-image-preview-counter {
+  position: absolute;
+  bottom: var(--kine-spacing-8);
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-font-size-sm);
+  color: var(--kine-color-text-muted);
+  background: var(--kine-color-bg-secondary);
+  border: 1px solid var(--kine-color-border-default);
+  border-radius: var(--kine-radius-xs);
+  padding: var(--kine-spacing-1) var(--kine-spacing-5);
+}
 /**
  * @description kine-ui input 样式
  * @author 阿怪
@@ -1101,10 +1308,6 @@ textarea.k-input {
   width: 100%;
 }
 
-/* ===== 行可点击 ===== */
-.k-crud-page--clickable .k-tbody .k-tr {
-  cursor: pointer;
-}
 /**
  * @description KLoginPage 登录页样式 — Phosphor 主题
  * @author 阿怪
@@ -1846,10 +2049,10 @@ textarea.k-input {
 }
 
 .k-form-card-body {
-  padding: 0 var(--kine-spacing-10) var(--kine-spacing-10);
+  padding: var(--kine-spacing-10);
 }
 
-/* 当有 header 时，body 顶部加分割线 */
+/* 有 header 时，body 顶部不需要额外间距（header 自带 padding-bottom） */
 .k-form-card-header + .k-form-card-body {
   padding-top: 0;
 }
@@ -1864,7 +2067,7 @@ textarea.k-input {
   z-index: 10;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   padding: var(--kine-spacing-6) var(--kine-spacing-12);
   background: var(--kine-color-bg-tertiary, #fff);
   border-top: 1px solid var(--kine-color-border-default, #e5e7eb);
@@ -2014,9 +2217,19 @@ textarea.k-input {
    KFormPage / KMasterDetailPage — 表单页布局
    ================================================================ */
 
+/* wrapper: 全宽容器，承载 sticky bar 出血 */
+.k-form-page-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
 .k-form-page {
   max-width: 960px;
-  padding: 0 0 80px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 0 var(--kine-spacing-10);
+  flex: 1;
 }
 
 .k-master-detail-page {

package/dist/crud.js

@@ -1,7 +1,7 @@
 import { Comment, Fragment, Teleport, computed, createApp, createTextVNode, createVNode, defineComponent, h, inject, isRef, mergeProps, nextTick, 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;
@@ -153,7 +153,7 @@ var KContent_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region ../core/components/template/table/api.ts
-var props$8 = {
+var props$10 = {
 	data: {
 		type: Array,
 		default: () => []
@@ -268,8 +268,8 @@ function useTable() {
 *
 * 江湖的业务千篇一律，复杂的代码好几百行。
 */
-var { props: props$7 } = {
-	props: props$8,
+var { props: props$9 } = {
+	props: props$10,
 	useTable
 };
 var KTable_default = /* @__PURE__ */ defineComponent((_props, { slots }) => {
@@ -336,11 +336,11 @@ var KTable_default = /* @__PURE__ */ defineComponent((_props, { slots }) => {
 	};
 }, {
 	name: "KTable",
-	props: props$7
+	props: props$9
 });
 //#endregion
 //#region ../core/components/base/input/api.ts
-var props$6 = {
+var props$8 = {
 	type: {
 		type: String,
 		default: "text"
@@ -412,12 +412,12 @@ function useInput(props, ctx) {
 * 江湖的业务千篇一律，复杂的代码好几百行。
 */
 var InputCore = {
-	props: props$6,
+	props: props$8,
 	useInput
 };
 //#endregion
 //#region ../core/components/base/button/api.ts
-var props$5 = {
+var props$7 = {
 	text: {
 		type: String,
 		default: ""
@@ -494,12 +494,12 @@ function useButton(props, { slots }) {
 * 江湖的业务千篇一律，复杂的代码好几百行。
 */
 var ButtonCore = {
-	props: props$5,
+	props: props$7,
 	useButton
 };
 //#endregion
 //#region ../core/components/base/select/api.ts
-var props$4 = {
+var props$6 = {
 	modelValue: {
 		type: void 0,
 		default: ""
@@ -809,7 +809,7 @@ function useSelect$1(props, ctx) {
 * 江湖的业务千篇一律，复杂的代码好几百行。
 */
 var SelectCore = {
-	props: props$4,
+	props: props$6,
 	useSelect: useSelect$1
 };
 //#endregion
@@ -6159,7 +6159,7 @@ var computePosition = (reference, floating, options) => {
 };
 //#endregion
 //#region ../core/components/template/pagination/api.ts
-var props$2 = {
+var props$4 = {
 	total: {
 		type: Number,
 		default: 0
@@ -6318,7 +6318,7 @@ function usePagination(props, currentValue) {
 * 江湖的业务千篇一律，复杂的代码好几百行。
 */
 var PaginationCore = {
-	props: props$2,
+	props: props$4,
 	usePagination
 };
 //#endregion
@@ -6761,6 +6761,154 @@ var TableColumnCore = { props: {
 	}
 } };
 //#endregion
+//#region ../core/components/base/image/api.ts
+var props$2 = {
+	src: {
+		type: String,
+		required: true
+	},
+	alt: {
+		type: String,
+		default: ""
+	},
+	fit: {
+		type: String,
+		default: "cover",
+		enum: [
+			"contain",
+			"cover",
+			"fill",
+			"none",
+			"scale-down"
+		]
+	},
+	width: {
+		type: [String, Number],
+		default: void 0
+	},
+	height: {
+		type: [String, Number],
+		default: void 0
+	},
+	lazy: {
+		type: Boolean,
+		default: false
+	},
+	previewSrcList: {
+		type: Array,
+		default: () => []
+	},
+	zIndex: {
+		type: Number,
+		default: 2e3
+	}
+};
+//#endregion
+//#region ../core/components/base/image/useImage.ts
+/**
+* @description image hook
+* @author 阿怪
+* @date 2026/2/26
+* @version v1.0.0
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*/
+function useImage(props, emit) {
+	const status = ref("loading");
+	const previewVisible = ref(false);
+	const previewIndex = ref(0);
+	const previewScale = ref(1);
+	const previewRotate = ref(0);
+	/** 重置加载状态（src 变化时调用） */
+	const reset = () => {
+		status.value = "loading";
+	};
+	const handleLoad = (e) => {
+		status.value = "loaded";
+		emit("load", e);
+	};
+	const handleError = (e) => {
+		status.value = "error";
+		emit("error", e);
+	};
+	/** 打开全屏预览，定位到 src 在 previewSrcList 中的位置 */
+	const openPreview = () => {
+		if (!props.previewSrcList || props.previewSrcList.length === 0) return;
+		const idx = props.previewSrcList.indexOf(props.src);
+		previewIndex.value = idx >= 0 ? idx : 0;
+		previewScale.value = 1;
+		previewRotate.value = 0;
+		previewVisible.value = true;
+	};
+	const closePreview = () => {
+		previewVisible.value = false;
+	};
+	/** 预览切换到上一张 */
+	const previewPrev = () => {
+		const total = props.previewSrcList.length;
+		if (total === 0) return;
+		previewIndex.value = (previewIndex.value - 1 + total) % total;
+		previewScale.value = 1;
+		previewRotate.value = 0;
+		emit("switch", previewIndex.value);
+	};
+	/** 预览切换到下一张 */
+	const previewNext = () => {
+		const total = props.previewSrcList.length;
+		if (total === 0) return;
+		previewIndex.value = (previewIndex.value + 1) % total;
+		previewScale.value = 1;
+		previewRotate.value = 0;
+		emit("switch", previewIndex.value);
+	};
+	/** 预览放大 */
+	const zoomIn = () => {
+		previewScale.value = Math.min(previewScale.value + .25, 5);
+	};
+	/** 预览缩小 */
+	const zoomOut = () => {
+		previewScale.value = Math.max(previewScale.value - .25, .25);
+	};
+	/** 顺时针旋转 90° */
+	const rotate = () => {
+		previewRotate.value = (previewRotate.value + 90) % 360;
+	};
+	watch(() => props.src, reset);
+	onMounted(() => {
+		if (props.lazy) status.value = "loading";
+	});
+	return {
+		status,
+		previewVisible,
+		previewIndex,
+		previewScale,
+		previewRotate,
+		handleLoad,
+		handleError,
+		openPreview,
+		closePreview,
+		previewPrev,
+		previewNext,
+		zoomIn,
+		zoomOut,
+		rotate
+	};
+}
+//#endregion
+//#region ../core/components/base/image/index.ts
+/**
+* @description image core 导出
+* @author 阿怪
+* @date 2026/2/26
+* @version v1.0.0
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*/
+var ImageCore = {
+	props: props$2,
+	useImage
+};
+//#endregion
 //#region ../ui/components/pagination/KPagination.tsx
 /**
 * @description kine-ui pagination 组件
@@ -6986,7 +7134,7 @@ var KTableColumn_default = /* @__PURE__ */ defineComponent({
 *
 * 江湖的业务千篇一律，复杂的代码好几百行。
 */
-var { props } = TagCore;
+var { props: props$1 } = TagCore;
 var KTag_default = /* @__PURE__ */ defineComponent((_props, { slots, emit }) => {
 	const props = _props;
 	return () => {
@@ -7020,10 +7168,153 @@ var KTag_default = /* @__PURE__ */ defineComponent((_props, { slots, emit }) =>
 	};
 }, {
 	name: "KTag",
-	props,
+	props: props$1,
 	emits: ["close", "click"]
 });
 //#endregion
+//#region ../ui/components/image/KImage.tsx
+/**
+* @description kine-ui image 图片组件
+* @author 阿怪
+* @date 2026/2/26
+* @version v1.0.0
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*/
+var { props } = ImageCore;
+/** 加载中占位图标（sci-fi 风格） */
+var LoadingPlaceholder = () => createVNode("div", { "class": "k-image-placeholder k-image-loading" }, [createVNode("svg", {
+	"viewBox": "0 0 24 24",
+	"fill": "none",
+	"class": "k-image-placeholder-icon"
+}, [
+	createVNode("rect", {
+		"x": "3",
+		"y": "3",
+		"width": "18",
+		"height": "18",
+		"rx": "2",
+		"stroke": "currentColor",
+		"stroke-width": "1.5"
+	}, null),
+	createVNode("circle", {
+		"cx": "8.5",
+		"cy": "8.5",
+		"r": "1.5",
+		"fill": "currentColor",
+		"opacity": "0.5"
+	}, null),
+	createVNode("path", {
+		"d": "M3 15l5-5 4 4 3-3 6 6",
+		"stroke": "currentColor",
+		"stroke-width": "1.5",
+		"stroke-linecap": "round"
+	}, null)
+])]);
+/** 加载失败占位图标 */
+var ErrorPlaceholder = () => createVNode("div", { "class": "k-image-placeholder k-image-error" }, [createVNode("svg", {
+	"viewBox": "0 0 24 24",
+	"fill": "none",
+	"class": "k-image-placeholder-icon"
+}, [createVNode("rect", {
+	"x": "3",
+	"y": "3",
+	"width": "18",
+	"height": "18",
+	"rx": "2",
+	"stroke": "currentColor",
+	"stroke-width": "1.5"
+}, null), createVNode("path", {
+	"d": "M9 9l6 6M15 9l-6 6",
+	"stroke": "currentColor",
+	"stroke-width": "1.5",
+	"stroke-linecap": "round"
+}, null)]), createVNode("span", { "class": "k-image-error-text" }, [createTextVNode("加载失败")])]);
+var KImage_default = /* @__PURE__ */ defineComponent((_props, { slots, emit }) => {
+	const cProps = _props;
+	const { status, previewVisible, previewIndex, previewScale, previewRotate, handleLoad, handleError, openPreview, closePreview, previewPrev, previewNext, zoomIn, zoomOut, rotate } = useImage(cProps, (event, payload) => emit(event, payload));
+	const hasPreview = computed(() => cProps.previewSrcList && cProps.previewSrcList.length > 0);
+	return () => {
+		const currentPreviewSrc = hasPreview.value ? cProps.previewSrcList[previewIndex.value] : cProps.src;
+		return createVNode(Fragment, null, [createVNode("div", {
+			"class": ["k-image", status.value === "loaded" && hasPreview.value ? "k-image-previewable" : ""],
+			"style": {
+				width: cProps.width != null ? typeof cProps.width === "number" ? `${cProps.width}px` : cProps.width : void 0,
+				height: cProps.height != null ? typeof cProps.height === "number" ? `${cProps.height}px` : cProps.height : void 0
+			},
+			"onClick": hasPreview.value ? openPreview : void 0
+		}, [
+			status.value === "loading" && (slots.placeholder ? slots.placeholder() : createVNode(LoadingPlaceholder, null, null)),
+			status.value === "error" && (slots.error ? slots.error() : createVNode(ErrorPlaceholder, null, null)),
+			createVNode("img", {
+				"class": ["k-image-inner", status.value !== "loaded" ? "k-image-inner-hidden" : ""],
+				"src": cProps.src,
+				"alt": cProps.alt,
+				"loading": cProps.lazy ? "lazy" : "eager",
+				"style": { objectFit: cProps.fit },
+				"onLoad": handleLoad,
+				"onError": handleError
+			}, null)
+		]), hasPreview.value && previewVisible.value && createVNode(Teleport, { "to": "body" }, { default: () => [createVNode("div", {
+			"class": "k-image-preview-mask",
+			"style": { zIndex: cProps.zIndex },
+			"onClick": (e) => {
+				if (e.target === e.currentTarget) closePreview();
+			}
+		}, [
+			createVNode("div", { "class": "k-image-preview-toolbar" }, [
+				createVNode("button", {
+					"class": "k-image-preview-btn",
+					"onClick": zoomOut,
+					"title": "缩小"
+				}, [createTextVNode("－")]),
+				createVNode("span", { "class": "k-image-preview-scale" }, [Math.round(previewScale.value * 100), createTextVNode("%")]),
+				createVNode("button", {
+					"class": "k-image-preview-btn",
+					"onClick": zoomIn,
+					"title": "放大"
+				}, [createTextVNode("＋")]),
+				createVNode("button", {
+					"class": "k-image-preview-btn",
+					"onClick": rotate,
+					"title": "旋转"
+				}, [createTextVNode("↻")]),
+				createVNode("button", {
+					"class": "k-image-preview-btn k-image-preview-close",
+					"onClick": closePreview,
+					"title": "关闭"
+				}, [createTextVNode("✕")])
+			]),
+			createVNode("img", {
+				"class": "k-image-preview-img",
+				"src": currentPreviewSrc,
+				"style": { transform: `scale(${previewScale.value}) rotate(${previewRotate.value}deg)` },
+				"alt": ""
+			}, null),
+			cProps.previewSrcList.length > 1 && createVNode(Fragment, null, [createVNode("button", {
+				"class": "k-image-preview-arrow k-image-preview-arrow-prev",
+				"onClick": previewPrev
+			}, [createTextVNode("‹")]), createVNode("button", {
+				"class": "k-image-preview-arrow k-image-preview-arrow-next",
+				"onClick": previewNext
+			}, [createTextVNode("›")])]),
+			cProps.previewSrcList.length > 1 && createVNode("div", { "class": "k-image-preview-counter" }, [
+				previewIndex.value + 1,
+				createTextVNode(" / "),
+				cProps.previewSrcList.length
+			])
+		])] })]);
+	};
+}, {
+	name: "KImage",
+	props,
+	emits: [
+		"load",
+		"error",
+		"switch"
+	]
+});
+//#endregion
 //#region ../ui/components/input/KInput.tsx
 /**
 * @description kine-ui input 组件
@@ -8002,6 +8293,7 @@ function createRequest(options = {}) {
 		return builder;
 	}
 	const client = {
+		baseURL: context.baseURL,
 		send: (method, url, body) => createBuilder(method, url, body).execute(),
 		get: (url, params) => createBuilder("GET", url, params).execute(),
 		post: (url, body) => createBuilder("POST", url, body).execute(),
@@ -8387,7 +8679,6 @@ 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) => {
@@ -8419,22 +8710,23 @@ var KCrudPage_default = /* @__PURE__ */ defineComponent({
 				case "status": return renderStatus(val);
 				case "date": return formatDate(val);
 				case "datetime": return formatDateTime(val);
+				case "image": {
+					if (!val) return "";
+					const raw = String(val);
+					const resolver = props.config.imageResolver;
+					const src = resolver ? resolver(raw) : raw;
+					return createVNode(KImage_default, {
+						"src": src,
+						"previewSrcList": [src],
+						"width": 40,
+						"height": 40,
+						"fit": "cover",
+						"lazy": true
+					}, null);
+				}
 				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;
@@ -8460,7 +8752,7 @@ var KCrudPage_default = /* @__PURE__ */ defineComponent({
 				}
 			}, null)]));
 		};
-		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, {
+		return () => createVNode("div", { "class": "k-crud-page" }, [createVNode(KPageHeader_default, { "title": props.config.title }, { extra: slots.headerExtra }), createVNode(KSearchTable_default, {
 			"data": list.value,
 			"loading": loading.value,
 			"total": total.value,
@@ -8483,7 +8775,7 @@ var KCrudPage_default = /* @__PURE__ */ defineComponent({
 				}, { default: customSlot ? (scope) => customSlot(scope) : col.type ? (scope) => renderCell(col, scope.row) : void 0 });
 			}),
 			empty: slots.empty
-		})])]);
+		})]);
 	}
 });
 //#endregion
@@ -10688,7 +10980,7 @@ var KFormPage_default = /* @__PURE__ */ defineComponent({
 		return () => {
 			if (loading.value) return createVNode("div", { "class": "k-fp-loading" }, [createTextVNode("加载中...")]);
 			const title = isEdit.value ? `编辑${props.config.title}` : `新建${props.config.title}`;
-			return createVNode("div", { "class": "k-form-page" }, [
+			return createVNode("div", { "class": "k-form-page-wrapper" }, [createVNode("div", { "class": "k-form-page" }, [
 				createVNode("div", { "class": "k-fp-header" }, [createVNode("div", { "class": "k-fp-header-left" }, [createVNode(KButton_default, {
 					"text": "←",
 					"onClick": goBack
@@ -10709,31 +11001,30 @@ var KFormPage_default = /* @__PURE__ */ defineComponent({
 					})]),
 					slots.afterFields?.({ formData })
 				] }),
-				slots.default?.({ formData }),
-				createVNode(KStickyActionBar_default, null, { default: () => slots.actions?.({
-					formData,
-					submit,
-					saveDraft,
-					submitting
-				}) ?? createVNode(Fragment, null, [
-					createVNode(KButton_default, {
-						"text": "取消",
-						"onClick": goBack
-					}, null),
-					props.config.showDraft && createVNode(KButton_default, {
-						"text": "保存草稿",
-						"disabled": submitting.value,
-						"onClick": () => saveDraft()
-					}, null),
-					createVNode(KButton_default, {
-						"type": "primary",
-						"text": submitting.value ? "保存中..." : props.config.submitText ?? "保存",
-						"disabled": submitting.value,
-						"loading": submitting.value,
-						"onClick": () => submit()
-					}, null)
-				]) })
-			]);
+				slots.default?.({ formData })
+			]), createVNode(KStickyActionBar_default, null, { default: () => slots.actions?.({
+				formData,
+				submit,
+				saveDraft,
+				submitting
+			}) ?? createVNode(Fragment, null, [
+				createVNode(KButton_default, {
+					"text": "取消",
+					"onClick": goBack
+				}, null),
+				props.config.showDraft && createVNode(KButton_default, {
+					"text": "保存草稿",
+					"disabled": submitting.value,
+					"onClick": () => saveDraft()
+				}, null),
+				createVNode(KButton_default, {
+					"type": "primary",
+					"text": submitting.value ? "保存中..." : props.config.submitText ?? "保存",
+					"disabled": submitting.value,
+					"loading": submitting.value,
+					"onClick": () => submit()
+				}, null)
+			]) })]);
 		};
 	}
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kine-design/crud",
-  "version": "0.0.1-beta.10",
+  "version": "0.0.1-beta.13",
   "type": "module",
   "main": "./dist/crud.js",
   "types": "./dist/index.d.ts",
@@ -9,8 +9,8 @@
     "pinia": "^3.0.3",
     "vue": "^3.5.30",
     "vue-router": "^5.0.3",
-    "@kine-design/core": "0.0.1-beta.3",
-    "kine-ui": "0.0.1-beta.4"
+    "kine-ui": "0.0.1-beta.6",
+    "@kine-design/core": "0.0.1-beta.3"
   },
   "publishConfig": {
     "access": "public",