@kine-design/crud 0.0.1-beta.2 → 0.0.1-beta.21

package/components/searchTable/searchTable.css

@@ -0,0 +1,121 @@
+/**
+ * @description KSearchTable 搜索表格组合组件样式 — Phosphor 主题
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.2
+ */
+
+/* ===== 根容器：flex 纵向，占满父元素高度 ===== */
+.k-search-table {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  gap: var(--kine-spacing-6);
+}
+
+/* 加载态透明度 */
+.k-search-table--loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* ===== 搜索区：固定高度，不参与 flex 伸缩 ===== */
+.k-search-table-search {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: var(--kine-spacing-6);
+  flex-shrink: 0;
+  padding: var(--kine-spacing-8);
+  background-color: var(--kine-color-bg-primary);
+  border-radius: var(--kine-radius-md);
+  border: 1px solid var(--kine-color-border-default);
+  box-sizing: border-box;
+}
+
+/* 搜索表单插槽容器 */
+.k-search-table-search-form {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--kine-spacing-6);
+  flex: 1;
+  min-width: 0;
+}
+
+/* 搜索 / 重置按钮区 */
+.k-search-table-search-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--kine-spacing-4);
+  flex-shrink: 0;
+}
+
+/* ===== 工具栏：搜索区与表格之间 ===== */
+.k-search-table-toolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--kine-spacing-4);
+  flex-shrink: 0;
+  min-height: 36px;
+}
+
+/* ===== 表格区：flex: 1 撑满剩余空间，overflow hidden 防溢出 ===== */
+.k-search-table-body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  background-color: var(--kine-color-bg-primary);
+  border-radius: var(--kine-radius-md);
+  border: 1px solid var(--kine-color-border-default);
+  box-sizing: border-box;
+}
+
+/* KTable 内部需要能撑满，设置高度 100% */
+.k-search-table-body .k-table {
+  height: 100%;
+}
+
+/* ===== 分页区：固定底部，不参与 flex 伸缩 ===== */
+.k-search-table-pagination {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  flex-shrink: 0;
+  padding: var(--kine-spacing-4) 0;
+}
+
+/* ================================================================
+   移动端（<768px）
+   ================================================================ */
+
+@media (max-width: 767px) {
+  /* 搜索区从横排改为纵排 */
+  .k-search-table-search {
+    flex-direction: column;
+    align-items: stretch;
+    padding: var(--kine-spacing-6);
+    gap: var(--kine-spacing-4);
+  }
+
+  .k-search-table-search-form {
+    flex-direction: column;
+  }
+
+  /* 搜索按钮区靠右 */
+  .k-search-table-search-actions {
+    justify-content: flex-end;
+  }
+
+  /* 表格区允许横向滚动 */
+  .k-search-table-body {
+    overflow-x: auto;
+  }
+}

package/components/upload/KFileList.tsx

@@ -0,0 +1,95 @@
+/**
+ * @description KFileList 文件列表展示组件
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { defineComponent, PropType } from 'vue';
+import type { UploadFile } from './types';
+import KButton from 'kine-ui/components/button/KButton.tsx';
+import './upload.css';
+
+const STATUS_TEXT: Record<UploadFile['status'], string> = {
+  pending: '等待中',
+  uploading: '上传中',
+  success: '已完成',
+  error: '上传失败',
+};
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export default defineComponent({
+  name: 'KFileList',
+  props: {
+    files: {
+      type: Array as PropType<UploadFile[]>,
+      default: () => [],
+    },
+    removable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['remove'],
+  setup(props, ctx) {
+    return () => {
+      if (props.files.length === 0) return null;
+
+      return (
+        <ul class="k-file-list">
+          {props.files.map(file => {
+            const statusClass = `k-file-list-item--${file.status}`;
+
+            return (
+              <li key={file.uid} class={['k-file-list-item', statusClass]}>
+                {/* 文件图标 */}
+                <span class="k-file-list-icon" aria-hidden="true">
+                  {file.status === 'success' ? '✓' : file.status === 'error' ? '✕' : '○'}
+                </span>
+
+                {/* 文件信息 */}
+                <div class="k-file-list-info">
+                  <span class="k-file-list-name" title={file.name}>
+                    {file.url
+                      ? <a class="k-file-list-link" href={file.url} target="_blank" rel="noopener noreferrer">{file.name}</a>
+                      : file.name
+                    }
+                  </span>
+                  <span class="k-file-list-meta">
+                    {formatSize(file.size)} · {STATUS_TEXT[file.status]}
+                  </span>
+                </div>
+
+                {/* 删除按钮 */}
+                {props.removable && (
+                  <KButton
+                    class="k-file-list-remove"
+                    plain
+                    text="×"
+                    onClick={() => ctx.emit('remove', file)}
+                  />
+                )}
+
+                {/* 进度条（仅上传中显示，grid 第二行跨满） */}
+                {file.status === 'uploading' && (
+                  <div class="k-file-list-progress-track">
+                    <div
+                      class="k-file-list-progress-fill"
+                      style={{ width: `${file.percent}%` }}
+                    />
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      );
+    };
+  },
+});

package/components/upload/KImageUpload.tsx

@@ -0,0 +1,286 @@
+/**
+ * @description KImageUpload 图片上传组件，支持预览与多图网格
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { defineComponent, ref, computed, onBeforeUnmount, PropType } from 'vue';
+import type { UploadFile, UploadRequest } from './types';
+import KButton from 'kine-ui/components/button/KButton.tsx';
+import './upload.css';
+
+let uidCounter = 0;
+function genUid(): string {
+  return `img-upload-${Date.now()}-${++uidCounter}`;
+}
+
+export default defineComponent({
+  name: 'KImageUpload',
+  props: {
+    request: {
+      type: Function as PropType<UploadRequest>,
+      required: true,
+    },
+    accept: {
+      type: String,
+      default: 'image/*',
+    },
+    multiple: {
+      type: Boolean,
+      default: true,
+    },
+    maxCount: {
+      type: Number,
+      default: Infinity,
+    },
+    maxSize: {
+      type: Number,
+      default: Infinity,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    fileList: {
+      type: Array as PropType<UploadFile[]>,
+      default: () => [],
+    },
+    drag: {
+      type: Boolean,
+      default: true,
+    },
+    previewSize: {
+      type: String,
+      default: '100px',
+    },
+  },
+  emits: ['update:fileList', 'change', 'error'],
+  setup(props, ctx) {
+    const inputRef = ref<HTMLInputElement | null>(null);
+    const isDragOver = ref(false);
+    // 本地 objectURL 缓存，组件销毁时统一释放
+    const objectUrlMap = ref<Map<string, string>>(new Map());
+
+    const getPreviewUrl = (file: UploadFile): string => {
+      if (file.thumbUrl) return file.thumbUrl;
+      if (file.url) return file.url;
+      if (file.raw) {
+        const existing = objectUrlMap.value.get(file.uid);
+        if (existing) return existing;
+        const url = URL.createObjectURL(file.raw);
+        objectUrlMap.value.set(file.uid, url);
+        return url;
+      }
+      return '';
+    };
+
+    onBeforeUnmount(() => {
+      objectUrlMap.value.forEach(url => URL.revokeObjectURL(url));
+      objectUrlMap.value.clear();
+    });
+
+    const showAddCard = computed(
+      () => !props.disabled && props.fileList.length < props.maxCount,
+    );
+
+    const openFileDialog = () => {
+      if (props.disabled) return;
+      inputRef.value?.click();
+    };
+
+    const processFiles = async (rawFiles: FileList | File[]) => {
+      const fileArray = Array.from(rawFiles);
+      const currentCount = props.fileList.length;
+      const remaining = props.maxCount - currentCount;
+      if (remaining <= 0) return;
+
+      const filesToProcess = fileArray.slice(0, remaining);
+      const newList = [...props.fileList];
+
+      for (const raw of filesToProcess) {
+        if (props.maxSize !== Infinity && raw.size > props.maxSize) {
+          ctx.emit('error', { file: raw, message: `文件 "${raw.name}" 超过大小限制` });
+          continue;
+        }
+
+        const uploadFile: UploadFile = {
+          uid: genUid(),
+          name: raw.name,
+          size: raw.size,
+          type: raw.type,
+          status: 'uploading',
+          percent: 0,
+          raw,
+        };
+
+        newList.push(uploadFile);
+        ctx.emit('update:fileList', [...newList]);
+        ctx.emit('change', uploadFile);
+
+        try {
+          const result = await props.request(raw, (percent) => {
+            const current = newList.find(f => f.uid === uploadFile.uid);
+            if (current) {
+              const i = newList.indexOf(current);
+              newList[i] = { ...current, percent };
+              ctx.emit('update:fileList', [...newList]);
+            }
+          });
+
+          const current = newList.find(f => f.uid === uploadFile.uid);
+          if (current) {
+            // 上传成功后释放 objectURL，改用远程 url
+            const localUrl = objectUrlMap.value.get(uploadFile.uid);
+            if (localUrl) {
+              URL.revokeObjectURL(localUrl);
+              objectUrlMap.value.delete(uploadFile.uid);
+            }
+            const i = newList.indexOf(current);
+            newList[i] = {
+              ...current,
+              status: 'success',
+              percent: 100,
+              url: result.url,
+            };
+            ctx.emit('update:fileList', [...newList]);
+            ctx.emit('change', newList[i]);
+          }
+        } catch (e) {
+          const current = newList.find(f => f.uid === uploadFile.uid);
+          if (current) {
+            const i = newList.indexOf(current);
+            newList[i] = { ...current, status: 'error' };
+            ctx.emit('update:fileList', [...newList]);
+            ctx.emit('error', { file: raw, message: String(e) });
+          }
+        }
+      }
+    };
+
+    const onInputChange = (e: Event) => {
+      const target = e.target as HTMLInputElement;
+      if (target.files) {
+        processFiles(target.files);
+        target.value = '';
+      }
+    };
+
+    const onDragOver = (e: DragEvent) => {
+      if (props.disabled || !props.drag) return;
+      e.preventDefault();
+      isDragOver.value = true;
+    };
+
+    const onDragLeave = () => {
+      isDragOver.value = false;
+    };
+
+    const onDrop = (e: DragEvent) => {
+      if (props.disabled || !props.drag) return;
+      e.preventDefault();
+      isDragOver.value = false;
+      if (e.dataTransfer?.files) {
+        processFiles(e.dataTransfer.files);
+      }
+    };
+
+    const removeFile = (uid: string) => {
+      const localUrl = objectUrlMap.value.get(uid);
+      if (localUrl) {
+        URL.revokeObjectURL(localUrl);
+        objectUrlMap.value.delete(uid);
+      }
+      const next = props.fileList.filter(f => f.uid !== uid);
+      ctx.emit('update:fileList', next);
+    };
+
+    return () => {
+      const cardStyle = {
+        width: props.previewSize,
+        height: props.previewSize,
+      };
+
+      const previewCards = props.fileList.map(file => {
+        const previewUrl = getPreviewUrl(file);
+        const statusClass = `k-image-upload-card--${file.status}`;
+
+        return (
+          <div
+            key={file.uid}
+            class={['k-image-upload-card', statusClass]}
+            style={cardStyle}
+          >
+            {previewUrl && (
+              <img
+                class="k-image-upload-preview"
+                src={previewUrl}
+                alt={file.name}
+              />
+            )}
+            {file.status === 'uploading' && (
+              <div class="k-image-upload-overlay">
+                <div
+                  class="k-image-upload-progress"
+                  style={{ height: `${file.percent}%` }}
+                />
+                <span class="k-image-upload-percent">{file.percent}%</span>
+              </div>
+            )}
+            {file.status === 'error' && (
+              <div class="k-image-upload-overlay k-image-upload-overlay--error">
+                <span>上传失败</span>
+              </div>
+            )}
+            {!props.disabled && (
+              <KButton
+                class="k-image-upload-remove"
+                plain
+                text="×"
+                onClick={(e: MouseEvent) => {
+                  e.stopPropagation();
+                  removeFile(file.uid);
+                }}
+              />
+            )}
+          </div>
+        );
+      });
+
+      const addCard = showAddCard.value && (
+        <div
+          class={[
+            'k-image-upload-card',
+            'k-image-upload-card--add',
+            isDragOver.value ? 'k-upload-drag-over' : '',
+          ].filter(Boolean)}
+          style={cardStyle}
+          onClick={openFileDialog}
+          onDragover={onDragOver}
+          onDragleave={onDragLeave}
+          onDrop={onDrop}
+        >
+          <span class="k-image-upload-add-icon">+</span>
+        </div>
+      );
+
+      return (
+        <div class={['k-image-upload', props.disabled ? 'k-upload-disabled' : ''].filter(Boolean)}>
+          <input
+            ref={inputRef}
+            type="file"
+            class="k-upload-input"
+            accept={props.accept}
+            multiple={props.multiple}
+            onChange={onInputChange}
+          />
+          <div class="k-image-upload-grid">
+            {previewCards}
+            {addCard}
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/components/upload/KUpload.tsx

@@ -0,0 +1,206 @@
+/**
+ * @description KUpload 基础上传组件，支持点击与拖拽
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { defineComponent, ref, PropType } from 'vue';
+import type { UploadFile, UploadRequest } from './types';
+import './upload.css';
+
+let uidCounter = 0;
+function genUid(): string {
+  return `upload-${Date.now()}-${++uidCounter}`;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export default defineComponent({
+  name: 'KUpload',
+  props: {
+    request: {
+      type: Function as PropType<UploadRequest>,
+      required: true,
+    },
+    accept: {
+      type: String,
+      default: '',
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    maxCount: {
+      type: Number,
+      default: Infinity,
+    },
+    maxSize: {
+      type: Number,
+      default: Infinity,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    fileList: {
+      type: Array as PropType<UploadFile[]>,
+      default: () => [],
+    },
+    drag: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['update:fileList', 'change', 'error'],
+  setup(props, ctx) {
+    const inputRef = ref<HTMLInputElement | null>(null);
+    const isDragOver = ref(false);
+
+    const openFileDialog = () => {
+      if (props.disabled) return;
+      inputRef.value?.click();
+    };
+
+    const validateFile = (file: File): string | null => {
+      if (props.maxSize !== Infinity && file.size > props.maxSize) {
+        return `文件 "${file.name}" 超过大小限制（最大 ${formatSize(props.maxSize)}）`;
+      }
+      return null;
+    };
+
+    const processFiles = async (rawFiles: FileList | File[]) => {
+      const fileArray = Array.from(rawFiles);
+      const currentCount = props.fileList.length;
+      const remaining = props.maxCount - currentCount;
+
+      if (remaining <= 0) return;
+
+      const filesToProcess = fileArray.slice(0, remaining);
+      const newList = [...props.fileList];
+
+      for (const raw of filesToProcess) {
+        const err = validateFile(raw);
+        if (err) {
+          ctx.emit('error', { file: raw, message: err });
+          continue;
+        }
+
+        const uploadFile: UploadFile = {
+          uid: genUid(),
+          name: raw.name,
+          size: raw.size,
+          type: raw.type,
+          status: 'pending',
+          percent: 0,
+          raw,
+        };
+
+        newList.push(uploadFile);
+        ctx.emit('update:fileList', [...newList]);
+        ctx.emit('change', uploadFile);
+
+        // 启动上传
+        const idx = newList.indexOf(uploadFile);
+        newList[idx] = { ...uploadFile, status: 'uploading' };
+        ctx.emit('update:fileList', [...newList]);
+
+        try {
+          const result = await props.request(raw, (percent) => {
+            const current = newList.find(f => f.uid === uploadFile.uid);
+            if (current) {
+              const i = newList.indexOf(current);
+              newList[i] = { ...current, percent };
+              ctx.emit('update:fileList', [...newList]);
+            }
+          });
+
+          const current = newList.find(f => f.uid === uploadFile.uid);
+          if (current) {
+            const i = newList.indexOf(current);
+            newList[i] = { ...current, status: 'success', percent: 100, url: result.url };
+            ctx.emit('update:fileList', [...newList]);
+            ctx.emit('change', newList[i]);
+          }
+        } catch (e) {
+          const current = newList.find(f => f.uid === uploadFile.uid);
+          if (current) {
+            const i = newList.indexOf(current);
+            newList[i] = { ...current, status: 'error' };
+            ctx.emit('update:fileList', [...newList]);
+            ctx.emit('error', { file: raw, message: String(e) });
+          }
+        }
+      }
+    };
+
+    const onInputChange = (e: Event) => {
+      const target = e.target as HTMLInputElement;
+      if (target.files) {
+        processFiles(target.files);
+        // 清空 input，允许重复选同一文件
+        target.value = '';
+      }
+    };
+
+    const onDragOver = (e: DragEvent) => {
+      if (props.disabled || !props.drag) return;
+      e.preventDefault();
+      isDragOver.value = true;
+    };
+
+    const onDragLeave = () => {
+      isDragOver.value = false;
+    };
+
+    const onDrop = (e: DragEvent) => {
+      if (props.disabled || !props.drag) return;
+      e.preventDefault();
+      isDragOver.value = false;
+      if (e.dataTransfer?.files) {
+        processFiles(e.dataTransfer.files);
+      }
+    };
+
+    return () => {
+      const classes = [
+        'k-upload',
+        props.drag ? 'k-upload-drag' : '',
+        props.disabled ? 'k-upload-disabled' : '',
+        isDragOver.value ? 'k-upload-drag-over' : '',
+      ].filter(Boolean);
+
+      return (
+        <div
+          class={classes}
+          onClick={openFileDialog}
+          onDragover={onDragOver}
+          onDragleave={onDragLeave}
+          onDrop={onDrop}
+        >
+          <input
+            ref={inputRef}
+            type="file"
+            class="k-upload-input"
+            accept={props.accept}
+            multiple={props.multiple}
+            onChange={onInputChange}
+          />
+          {ctx.slots.default?.() ?? (
+            <div class="k-upload-placeholder">
+              <span class="k-upload-icon">↑</span>
+              <span class="k-upload-text">
+                {props.drag ? '点击或拖拽文件到此处上传' : '点击上传文件'}
+              </span>
+            </div>
+          )}
+        </div>
+      );
+    };
+  },
+});