@jzwd/vnd-design 0.0.0-stage → 0.2.0

package/dist/file-center/components/FcUpload/interface.d.ts

@@ -0,0 +1,65 @@
+/// <reference types="react" />
+import type { UploadFile } from 'antd';
+import type { FcCompressOptions } from '../../utils/compress';
+import type { FcFileInfo, FcUploadProgress } from '../../types';
+/**
+ * FcUpload 的文件项：在 antd UploadFile 基础上扩展文件中心元数据
+ */
+export interface FcUploadFile extends UploadFile {
+    /** 文件中心返回的文件 ID（上传成功后有值） */
+    fileId?: string;
+    /** 文件中心返回的文件元数据（上传成功后有值） */
+    fileInfo?: FcFileInfo;
+    /** 上传阶段（md5 计算 / 上传中 / 合并分片） */
+    stage?: FcUploadProgress['stage'];
+}
+export interface FcUploadProps {
+    /** 受控文件列表 */
+    value?: FcUploadFile[];
+    /** 文件列表变化回调（上传中/成功/失败/移除都会触发） */
+    onChange?: (fileList: FcUploadFile[]) => void;
+    /** 项目 AppKey（必填） */
+    appKey?: string;
+    /** 文件中心服务地址；不传则使用内置默认地址 */
+    baseUrl?: string;
+    /** 自定义令牌获取方式 */
+    getToken?: (appKey: string) => Promise<string>;
+    /** 业务类型，如 goodsImage；同时作为文件的 bizType 标签 */
+    bizType?: string;
+    /** 业务记录 ID */
+    bizId?: string;
+    /** 业务跳转链接 */
+    bizUrl?: string;
+    /** 展示形态：picture-card 图片卡片墙 / text 文件列表 / picture 带缩略图列表 */
+    listType?: 'picture-card' | 'text' | 'picture';
+    /** 是否启用拖拽上传（listType 为 text/picture 时生效） */
+    drag?: boolean;
+    /** 最多上传个数 */
+    maxCount?: number;
+    /** 单文件大小上限（MB），默认 50（与文件中心全局默认一致） */
+    maxSizeMB?: number;
+    /** 接受的文件类型（同 antd accept） */
+    accept?: string;
+    /** 支持多选 */
+    multiple?: boolean;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 图片上传前压缩；传 true 用默认配置，仅对图片生效 */
+    compress?: boolean | FcCompressOptions;
+    /** 是否启用秒传，默认 true */
+    instant?: boolean;
+    /** 移除文件时是否同步删除文件中心的文件，默认 false（仅移出列表，删除由业务方/管理端负责） */
+    deleteOnRemove?: boolean;
+    /** 单文件上传成功 */
+    onUploadSuccess?: (fileInfo: FcFileInfo, file: FcUploadFile) => void;
+    /** 单文件上传失败 */
+    onUploadError?: (error: Error, file: FcUploadFile) => void;
+    /** 点击预览：图片默认弹灯箱，其他文件默认新窗口打开；传入后完全接管 */
+    onPreview?: (file: FcUploadFile) => void;
+    /** 上传按钮文案（非卡片形态），默认「上传文件」 */
+    buttonText?: string;
+    /** 卡片形态自定义内容 */
+    cardContent?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}

package/dist/file-center/components/FcUpload/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/file-center/components/FcUpload/style.css

@@ -0,0 +1,279 @@
+/* FcUpload 样式：前缀 bc-fc-upload */
+
+.bc-fc-upload-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* ---- 卡片形态 ---- */
+
+.bc-fc-upload-item-card .bc-fc-upload-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 102px;
+  height: 102px;
+  overflow: hidden;
+  background: #fafafa;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+}
+
+.bc-fc-upload-item-error .bc-fc-upload-card {
+  border-color: #ff4d4f;
+}
+
+.bc-fc-upload-card-add {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  width: 102px;
+  height: 102px;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+  background: #fafafa;
+  border: 1px dashed #d9d9d9;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.bc-fc-upload-card-add:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+}
+
+.bc-fc-upload-add-text {
+  font-size: 12px;
+}
+
+.bc-fc-upload-thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.bc-fc-upload-fileicon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: rgba(0, 0, 0, 0.35);
+  font-size: 26px;
+}
+
+.bc-fc-upload-card-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 12px;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.bc-fc-upload-card-mask-error {
+  background: rgba(255, 77, 79, 0.65);
+  font-size: 13px;
+}
+
+.bc-fc-upload-card-hover {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.bc-fc-upload-card:hover .bc-fc-upload-card-hover {
+  opacity: 1;
+}
+
+.bc-fc-upload-actions {
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.bc-fc-upload-actions .anticon:hover {
+  color: #1677ff;
+}
+
+.bc-fc-upload-card-hover .bc-fc-upload-actions,
+.bc-fc-upload-card-hover .bc-fc-upload-actions .anticon:hover {
+  color: #fff;
+}
+
+.bc-fc-upload-size {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+}
+
+.bc-fc-upload-card-hover .bc-fc-upload-size {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+/* ---- 列表形态 ---- */
+
+.bc-fc-upload-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.bc-fc-upload-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 8px;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.bc-fc-upload-row:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.bc-fc-upload-row .bc-fc-upload-thumb {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  flex: none;
+}
+
+.bc-fc-upload-row .bc-fc-upload-fileicon {
+  width: 36px;
+  height: 36px;
+  font-size: 18px;
+  flex: none;
+}
+
+.bc-fc-upload-row-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.bc-fc-upload-name {
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.88);
+  font-size: 13px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.bc-fc-upload-name-link {
+  cursor: pointer;
+}
+
+.bc-fc-upload-name-link:hover {
+  color: #1677ff;
+}
+
+.bc-fc-upload-item-error .bc-fc-upload-name {
+  color: #ff4d4f;
+}
+
+.bc-fc-upload-progress {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.bc-fc-upload-progress .ant-progress {
+  flex: 1;
+  margin: 0;
+}
+
+.bc-fc-upload-stage {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+  flex: none;
+}
+
+.bc-fc-upload-error {
+  overflow: hidden;
+  color: #ff4d4f;
+  font-size: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ---- 拖拽区 ---- */
+
+.bc-fc-upload-dragger {
+  padding: 16px;
+  text-align: center;
+  background: #fafafa;
+  border: 1px dashed #d9d9d9;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.bc-fc-upload-dragger:hover,
+.bc-fc-upload-dragger-over {
+  border-color: #1677ff;
+}
+
+.bc-fc-upload-dragger-icon {
+  margin: 0 0 8px;
+  color: #1677ff;
+  font-size: 28px;
+}
+
+.bc-fc-upload-dragger p {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 13px;
+}
+
+.bc-fc-upload-dragger-tip {
+  margin-top: 4px !important;
+  color: rgba(0, 0, 0, 0.45) !important;
+  font-size: 12px !important;
+}
+
+/* ---- 引用列表（删除确认弹窗） ---- */
+
+.bc-fc-upload-refs ul {
+  max-height: 200px;
+  margin: 8px 0;
+  padding-left: 18px;
+  overflow-y: auto;
+}
+
+.bc-fc-upload-refs li {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 3px 0;
+  font-size: 13px;
+}
+
+.bc-fc-upload-refs-project {
+  color: rgba(0, 0, 0, 0.88);
+  font-weight: 500;
+}
+
+.bc-fc-upload-refs-biz {
+  color: rgba(0, 0, 0, 0.55);
+}

package/dist/file-center/context.d.ts

@@ -0,0 +1,22 @@
+import type { FcGetToken } from './types';
+import type { FcRequestContext } from './api/request';
+/** 文件中心默认服务地址（内置，无需配置；特殊环境可通过组件 props 覆盖） */
+export declare const FC_DEFAULT_BASE_URL = "https://upload.yydslgd.cn";
+/** 组件级文件中心配置 props：所有组件统一直接传参，无需任何 Provider 包裹 */
+export interface FcComponentConfigProps {
+    /** 项目 AppKey（必填，项目注册后获得的唯一标识） */
+    appKey?: string;
+    /** 文件中心服务地址；不传则使用内置默认地址 */
+    baseUrl?: string;
+    /** 自定义令牌获取方式；不传则默认调 OPEN-1 用 appKey 换令牌 */
+    getToken?: FcGetToken;
+    /** 大文件分片阈值（字节），默认 10MB */
+    chunkThreshold?: number;
+    /** 分片大小（字节），默认 5MB */
+    chunkSize?: number;
+}
+/**
+ * 由组件 props 解析出最终请求上下文。
+ * baseUrl 缺省时取内置默认地址；缺少 appKey 时抛错，提醒接入方配置。
+ */
+export declare function resolveFcContext(props: FcComponentConfigProps): FcRequestContext;

package/dist/file-center/context.js

@@ -0,0 +1,22 @@
+/** 文件中心默认服务地址（内置，无需配置；特殊环境可通过组件 props 覆盖） */
+export var FC_DEFAULT_BASE_URL = 'https://upload.yydslgd.cn';
+
+/** 组件级文件中心配置 props：所有组件统一直接传参，无需任何 Provider 包裹 */
+
+/**
+ * 由组件 props 解析出最终请求上下文。
+ * baseUrl 缺省时取内置默认地址；缺少 appKey 时抛错，提醒接入方配置。
+ */
+export function resolveFcContext(props) {
+  var _props$baseUrl;
+  if (!props.appKey) {
+    throw new Error('[vnd-design] 缺少 appKey：请在组件 props 中传入项目 AppKey');
+  }
+  return {
+    baseUrl: (_props$baseUrl = props.baseUrl) !== null && _props$baseUrl !== void 0 ? _props$baseUrl : FC_DEFAULT_BASE_URL,
+    appKey: props.appKey,
+    getToken: props.getToken,
+    chunkThreshold: props.chunkThreshold,
+    chunkSize: props.chunkSize
+  };
+}

package/dist/file-center/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 文件中心（FileCenter）业务组件模块
+ *
+ * 对外导出：
+ * - FcUpload：上传组件（图片卡片墙 / 文件列表 / 拖拽三种形态）
+ * - FcImage：图片回显组件（按文件 ID 取 URL，私有签名过期自动刷新）
+ * - FcFileList：文件列表组件（表格 / 宫格双视图，筛选、复制、预览、下载、删除含引用溯源）
+ * - uploadFile：不带 UI 的上传函数（供业务方自行定制 UI 时使用）
+ * - 开放接口函数与类型（供高级场景直接调用）
+ */
+export { FC_DEFAULT_BASE_URL, resolveFcContext } from './context';
+export type { FcComponentConfigProps } from './context';
+export { FcUpload } from './components/FcUpload';
+export type { FcUploadProps, FcUploadFile } from './components/FcUpload/interface';
+export { FcImage } from './components/FcImage';
+export type { FcImageProps } from './components/FcImage';
+export { FcFileList } from './components/FcFileList';
+export type { FcFileListProps } from './components/FcFileList';
+export { uploadFile } from './upload';
+export type { FcUploadOptions } from './upload';
+export { compressImage } from './utils/compress';
+export type { FcCompressOptions } from './utils/compress';
+export { calcFileMd5 } from './utils/md5';
+export { copyText, downloadFile, formatFileSize, getFileCategory } from './utils/common';
+export * from './api';
+export * from './types';

package/dist/file-center/index.js

@@ -0,0 +1,21 @@
+/**
+ * 文件中心（FileCenter）业务组件模块
+ *
+ * 对外导出：
+ * - FcUpload：上传组件（图片卡片墙 / 文件列表 / 拖拽三种形态）
+ * - FcImage：图片回显组件（按文件 ID 取 URL，私有签名过期自动刷新）
+ * - FcFileList：文件列表组件（表格 / 宫格双视图，筛选、复制、预览、下载、删除含引用溯源）
+ * - uploadFile：不带 UI 的上传函数（供业务方自行定制 UI 时使用）
+ * - 开放接口函数与类型（供高级场景直接调用）
+ */
+
+export { FC_DEFAULT_BASE_URL, resolveFcContext } from "./context";
+export { FcUpload } from "./components/FcUpload";
+export { FcImage } from "./components/FcImage";
+export { FcFileList } from "./components/FcFileList";
+export { uploadFile } from "./upload";
+export { compressImage } from "./utils/compress";
+export { calcFileMd5 } from "./utils/md5";
+export { copyText, downloadFile, formatFileSize, getFileCategory } from "./utils/common";
+export * from "./api";
+export * from "./types";

package/dist/file-center/types.d.ts

@@ -0,0 +1,144 @@
+/**
+ * 文件中心（FileCenter）类型契约
+ *
+ * 说明：文件中心服务端尚在开发中，本文件按需求文档 v1.1 预先定义
+ * 「组件可直接消费」的入参/出参标准。服务端落地后若有出入，
+ * 只需调整本目录（api）内的少量代码，业务方无感知。
+ */
+/** 文件访问类型：公开读 / 私有读 */
+export type FcAccessType = 'public' | 'private';
+/** 文件上传来源 */
+export type FcFileSource = 'api' | 'admin' | 'direct';
+/** 文件中心返回的文件元数据 */
+export interface FcFileInfo {
+    /** 文件 ID（雪花 ID，字符串形式，防精度丢失） */
+    id: string;
+    /** 文件名（含扩展名） */
+    name: string;
+    /** 扩展名，如 png */
+    ext: string;
+    /** MIME 类型，如 image/png */
+    mime: string;
+    /** 文件大小（字节） */
+    size: number;
+    /** 文件 MD5 */
+    md5: string;
+    /** 可访问 URL（公开文件为永久地址；私有文件为带签名的临时地址） */
+    url: string;
+    /** 访问类型 */
+    accessType: FcAccessType;
+    /** 业务标签 */
+    bizType?: string;
+    /** 上传来源 */
+    source: FcFileSource;
+    /** 上传时间（ISO 字符串） */
+    createdAt: string;
+}
+/** 文件引用记录（引用溯源） */
+export interface FcFileReference {
+    id: string;
+    fileId: string;
+    /** 引用方项目 ID */
+    projectId: string;
+    /** 引用方项目名称 */
+    projectName?: string;
+    /** 业务类型，如「商品图」 */
+    bizType: string;
+    /** 业务记录 ID */
+    bizId: string;
+    /** 业务跳转链接（管理端可直达业务页面） */
+    bizUrl?: string;
+    createdAt: string;
+}
+/** 业务引用信息：上传成功后组件自动登记（OPEN-12） */
+export interface FcBizInfo {
+    /** 业务类型，如 goodsImage */
+    bizType: string;
+    /** 业务记录 ID */
+    bizId: string;
+    /** 业务跳转链接 */
+    bizUrl?: string;
+}
+/** 服务端统一响应包裹 */
+export interface FcResponse<T> {
+    /** 0 表示成功，其余为业务错误码 */
+    code: number;
+    message: string;
+    data: T;
+}
+/** 认证结果（OPEN-1） */
+export interface FcAuthResult {
+    accessToken: string;
+    /** 过期秒数（默认 7200） */
+    expiresIn: number;
+}
+/** 文件列表查询参数（OPEN-7） */
+export interface FcFileListQuery {
+    page?: number;
+    pageSize?: number;
+    /** 文件名模糊搜索 */
+    name?: string;
+    /** 业务标签 */
+    bizType?: string;
+    /** MIME 大类，如 image / video / application */
+    type?: string;
+    /** 起始时间（ISO 字符串） */
+    startTime?: string;
+    /** 截止时间（ISO 字符串） */
+    endTime?: string;
+}
+/** 分页结果 */
+export interface FcPageResult<T> {
+    list: T[];
+    total: number;
+    page: number;
+    pageSize: number;
+}
+/** 秒传校验结果（OPEN-4） */
+export interface FcInstantUploadResult {
+    /** 是否命中秒传（同 MD5 文件已存在） */
+    uploaded: boolean;
+    /** 命中时直接返回文件信息 */
+    file?: FcFileInfo;
+}
+/** 分片上传初始化结果（OPEN-5） */
+export interface FcChunkInitResult {
+    uploadId: string;
+    /** 服务端建议的分片大小（字节） */
+    chunkSize?: number;
+    /** 已完成分片序号（断点续传时跳过） */
+    doneParts?: number[];
+}
+/** 删除文件结果（OPEN-10）：存在业务引用时返回引用列表要求二次确认 */
+export interface FcDeleteResult {
+    /** 是否已删除 */
+    deleted: boolean;
+    /** 需要二次确认时为 true */
+    needConfirm?: boolean;
+    /** 该文件的全部引用记录 */
+    references?: FcFileReference[];
+}
+/** 令牌获取函数：传入项目 AppKey，返回访问令牌。
+ *  默认实现走 OPEN-1（appKey 换令牌）；业务方可通过组件 props 覆盖
+ *  （如改为自己服务端用 AppKey + AppSecret 换令牌后下发） */
+export type FcGetToken = (appKey: string) => Promise<string>;
+/** 组件库通用配置（各组件的文件中心 props 即此结构） */
+export interface FcConfig {
+    /** 项目 AppKey（必填，项目注册后获得的唯一标识） */
+    appKey: string;
+    /** 文件中心服务地址；不传则使用内置默认地址 https://upload.yydslgd.cn */
+    baseUrl?: string;
+    /** 自定义令牌获取方式 */
+    getToken?: FcGetToken;
+    /** 大文件分片阈值（字节），默认 10MB，超过走分片上传 */
+    chunkThreshold?: number;
+    /** 分片大小（字节），默认 5MB */
+    chunkSize?: number;
+}
+/** 上传进度回调参数 */
+export interface FcUploadProgress {
+    /** 0-100 */
+    percent: number;
+    /** 当前阶段：计算 MD5 / 上传中 / 合并分片 */
+    stage?: 'md5' | 'uploading' | 'merging';
+}

package/dist/file-center/types.js

@@ -0,0 +1 @@
+export {};

package/dist/file-center/upload.d.ts

@@ -0,0 +1,35 @@
+import type { FcComponentConfigProps } from './context';
+import type { FcBizInfo, FcFileInfo, FcUploadProgress } from './types';
+import type { FcCompressOptions } from './utils/compress';
+/** 上传参数 */
+export interface FcUploadOptions extends FcComponentConfigProps {
+    /** 待上传文件 */
+    file: File;
+    /** 业务标签（存入文件元数据，便于筛选） */
+    bizType?: string;
+    /** 业务引用信息：上传成功后自动调 OPEN-12 登记，业务方无感 */
+    bizInfo?: FcBizInfo;
+    /** 图片上传前压缩配置，传 true 用默认配置；仅对图片生效 */
+    compress?: boolean | FcCompressOptions;
+    /** 大文件分片阈值（字节），默认 10MB；设为 Infinity 可禁用分片 */
+    chunkThreshold?: number;
+    /** 分片大小（字节），默认 5MB */
+    chunkSize?: number;
+    /** 是否启用秒传（同 MD5 文件已存在时直接登记归属），默认 true */
+    instant?: boolean;
+    /** 进度回调 */
+    onProgress?: (progress: FcUploadProgress) => void;
+    /** 取消信号 */
+    signal?: AbortSignal;
+}
+/**
+ * 上传文件到文件中心（组件库上传能力总入口）
+ *
+ * 完整流程：
+ * 1. 图片按配置压缩（可选）；
+ * 2. 分片读取计算 MD5（进度 0-10%）；
+ * 3. 秒传校验：同 MD5 已存在则直接返回（OPEN-4）；
+ * 4. 大文件走分片上传（OPEN-5），小文件走普通上传（OPEN-2），均自动重试；
+ * 5. 传入 bizInfo 时自动登记业务引用（OPEN-12），失败不影响上传结果。
+ */
+export declare function uploadFile(options: FcUploadOptions): Promise<FcFileInfo>;