@lxzy/code-snippet 0.0.16 → 0.0.18

package/src/pages/ly/ProFormUpload/index.tsx

@@ -0,0 +1,276 @@
+import {
+  ProFormUploadButton,
+  type ProFormUploadButtonProps,
+} from "@ant-design/pro-components";
+import { DeleteOutlined, EyeOutlined, LoadingOutlined } from "@ant-design/icons";
+import { Image, Modal, Tooltip, type UploadFile, type UploadProps } from "antd";
+import React, { useState } from "react";
+import styles from "./index.less";
+import { mockUpload } from "./service";
+import pdfIcon from "./icons/pdf.png";
+import wordIcon from "./icons/word.png";
+import excelIcon from "./icons/excel.png";
+import pptIcon from "./icons/ppt.png";
+import txtIcon from "./icons/txt.png";
+import zipIcon from "./icons/zip.png";
+import rarIcon from "./icons/rar.png";
+import audioIcon from "./icons/audio.png";
+import videoIcon from "./icons/video.png";
+import fileIcon from "./icons/file.png";
+
+/**
+ * ProFormUploadButton 二次封装
+ * 能力：
+ * 1. 完全透传 ProFormUploadButton 的所有属性与方法；
+ * 2. 允许上传所有类型文件；图片点击放大预览，视频点击弹窗播放；
+ * 3. 常见文档类型按后缀展示不同的本地图标，文件名过长时悬停显示全名；
+ * 4. 默认卡片（picture-card）展示，可通过 listType 切换其它模式。
+ */
+
+// 文件类型图标（本地资源，来源 icons8）
+const FILE_TYPE_ICON: Record<string, string> = {
+  pdf: pdfIcon,
+  doc: wordIcon,
+  docx: wordIcon,
+  xls: excelIcon,
+  xlsx: excelIcon,
+  ppt: pptIcon,
+  pptx: pptIcon,
+  txt: txtIcon,
+  zip: zipIcon,
+  rar: rarIcon,
+  "7z": zipIcon,
+  mp3: audioIcon,
+  wav: audioIcon,
+  video: videoIcon,
+  unknown: fileIcon,
+};
+
+const getExt = (file: UploadFile) => {
+  const target = file.name || file.url || "";
+  const match = /\.([a-z0-9]+)(?:\?.*)?$/i.exec(target);
+  return match ? match[1].toLowerCase() : "";
+};
+
+const isVideoFile = (file: UploadFile) =>
+  file.type?.startsWith("video") ||
+  /\.(mp4|webm|ogg|mov|m4v)$/i.test(file.name || file.url || "");
+
+const isImageFile = (file: UploadFile) =>
+  !!file.thumbUrl ||
+  file.type?.startsWith("image") ||
+  /\.(png|jpe?g|gif|svg|webp|bmp)$/i.test(file.name || file.url || "");
+
+// 缓存本地文件生成的 blob 地址，避免重复创建
+const blobUrlCache = new WeakMap<object, string>();
+const getBlobUrl = (file: UploadFile) => {
+  const origin = file.originFileObj as unknown as File | undefined;
+  if (!origin) return "";
+  let url = blobUrlCache.get(origin);
+  if (!url) {
+    url = URL.createObjectURL(origin);
+    blobUrlCache.set(origin, url);
+  }
+  return url;
+};
+
+// 获取可预览/播放的地址：优先后端 url，其次缩略图，最后本地选择的文件
+const getFileUrl = (file: UploadFile) =>
+  file.url || file.thumbUrl || getBlobUrl(file);
+
+// 根据文件类型返回缩略图节点（图片/视频/文档图标）
+const renderThumb = (file: UploadFile) => {
+  if (isVideoFile(file)) {
+    // 视频直接用 video 元素占位（展示首帧）
+    return <video src={getFileUrl(file)} muted preload="metadata" />;
+  }
+  if (isImageFile(file)) {
+    return <img src={getFileUrl(file)} alt={file.name} />;
+  }
+  return (
+    <img
+      src={FILE_TYPE_ICON[getExt(file)] || FILE_TYPE_ICON.unknown}
+      alt={file.name}
+    />
+  );
+};
+
+const ProFormUpload: React.FC<ProFormUploadButtonProps> = (props) => {
+  const { fieldProps, listType, ...rest } = props;
+  const finalListType = listType ?? fieldProps?.listType ?? "picture-card";
+
+  // 图片放大预览
+  const [imgPreview, setImgPreview] = useState<{ visible: boolean; url: string }>(
+    { visible: false, url: "" }
+  );
+  // 视频弹窗播放
+  const [videoPreview, setVideoPreview] = useState<{
+    open: boolean;
+    url: string;
+    title: string;
+  }>({ open: false, url: "", title: "" });
+
+  // 默认预览逻辑：图片放大、视频弹窗、其它文档新窗口打开
+  const defaultPreview: UploadProps["onPreview"] = (file) => {
+    const url = getFileUrl(file);
+    if (!url) return;
+    if (isImageFile(file)) {
+      setImgPreview({ visible: true, url });
+    } else if (isVideoFile(file)) {
+      setVideoPreview({ open: true, url, title: file.name });
+    } else {
+      window.open(url, "_blank");
+    }
+  };
+
+  const handlePreview: UploadProps["onPreview"] = (file) => {
+    if (fieldProps?.onPreview) {
+      fieldProps.onPreview(file);
+      return;
+    }
+    defaultPreview(file);
+  };
+
+  // 默认上传：form-data 单文件逐个上传（选一次传一次），当前为模拟实现
+  const defaultCustomRequest: NonNullable<
+    UploadProps["customRequest"]
+  > = async ({ file, onSuccess, onError, onProgress }) => {
+    try {
+      const result = await mockUpload(file as File, (percent) =>
+        onProgress?.({ percent })
+      );
+      // 把上传结果透传给 antd，onSuccess 的响应会写入 file.response
+      onSuccess?.(result);
+    } catch (err) {
+      onError?.(err as Error);
+    }
+  };
+
+  // 卡片模式下的自定义渲染：缩略图 + 悬停操作 + 文件名 Tooltip
+  const defaultItemRender: UploadProps["itemRender"] = (
+    _originNode,
+    file,
+    _fileList,
+    actions
+  ) => {
+    // 非卡片模式（picture / text）：自定义行布局，缩略图同样按类型展示
+    if (finalListType !== "picture-card") {
+      const uploading = file.status === "uploading";
+      return (
+        <div className={styles.listItem}>
+          <div
+            className={styles.listThumb}
+            onClick={() => !uploading && handlePreview(file)}
+          >
+            {uploading ? <LoadingOutlined /> : renderThumb(file)}
+          </div>
+          <Tooltip title={file.name}>
+            <span
+              className={
+                file.status === "error"
+                  ? `${styles.listName} ${styles.error}`
+                  : styles.listName
+              }
+              onClick={() => !uploading && handlePreview(file)}
+            >
+              {file.name}
+            </span>
+          </Tooltip>
+          <span className={styles.listActions}>
+            <EyeOutlined
+              onClick={(e) => {
+                e.stopPropagation();
+                handlePreview(file);
+              }}
+            />
+            <DeleteOutlined
+              onClick={(e) => {
+                e.stopPropagation();
+                actions.remove();
+              }}
+            />
+          </span>
+        </div>
+      );
+    }
+    const uploading = file.status === "uploading";
+    return (
+      <div className={styles.card}>
+        <div className={styles.thumb} onClick={() => !uploading && handlePreview(file)}>
+          {uploading ? (
+            <LoadingOutlined style={{ fontSize: 24 }} />
+          ) : (
+            renderThumb(file)
+          )}
+          {!uploading && (
+            <div className={styles.mask}>
+              <EyeOutlined
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handlePreview(file);
+                }}
+              />
+              <DeleteOutlined
+                onClick={(e) => {
+                  e.stopPropagation();
+                  actions.remove();
+                }}
+              />
+            </div>
+          )}
+        </div>
+        <Tooltip title={file.name}>
+          <div
+            className={file.status === "error" ? `${styles.name} ${styles.error}` : styles.name}
+          >
+            {file.name}
+          </div>
+        </Tooltip>
+      </div>
+    );
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <ProFormUploadButton
+        {...rest}
+        listType={finalListType}
+        fieldProps={{
+          multiple: true,
+          // 演示默认放开所有类型，可被外部 accept 覆盖
+          accept: "*",
+          ...fieldProps,
+          onPreview: handlePreview,
+          customRequest: fieldProps?.customRequest ?? defaultCustomRequest,
+          itemRender: fieldProps?.itemRender ?? defaultItemRender,
+        }}
+      />
+
+      {/* 图片放大预览（antd Image 内置缩放/旋转） */}
+      <Image
+        style={{ display: "none" }}
+        src={imgPreview.url}
+        preview={{
+          visible: imgPreview.visible,
+          src: imgPreview.url,
+          onVisibleChange: (visible) =>
+            setImgPreview((prev) => ({ ...prev, visible })),
+        }}
+      />
+
+      {/* 视频在线播放弹窗 */}
+      <Modal
+        open={videoPreview.open}
+        title={videoPreview.title}
+        footer={null}
+        width={720}
+        destroyOnClose
+        onCancel={() => setVideoPreview((prev) => ({ ...prev, open: false }))}
+      >
+        <video src={videoPreview.url} controls autoPlay style={{ width: "100%" }} />
+      </Modal>
+    </div>
+  );
+};
+
+export default ProFormUpload;

package/src/pages/ly/ProFormUpload/service.ts

@@ -0,0 +1,79 @@
+import type { UploadFile } from "antd";
+
+/**
+ * ProFormUpload 默认上传实现
+ *
+ * 说明：
+ * - 采用 form-data（multipart/form-data）方式，单文件逐个上传（选一次传一次）；
+ * - 当前为「模拟实现」，不发真实请求：随机进度 + 延时后返回一个可访问地址；
+ * - 后续接真实接口时，只需把 mockUpload 里的模拟逻辑替换为下方注释的 UploadFile 调用即可，
+ *   组件层无需改动。
+ */
+
+export interface UploadResult {
+  /** 上传成功后可访问/预览的地址 */
+  url: string;
+  /** 后端返回的文件名（可选） */
+  name?: string;
+  /** 原始响应，便于业务侧扩展使用 */
+  raw?: any;
+}
+
+/** 上传接口地址（后续替换为真实地址） */
+export const UPLOAD_URL = "/api/upload";
+
+/**
+ * 模拟上传：构造 form-data，模拟上传进度与耗时，最终返回一个可预览地址。
+ * @param file       待上传文件
+ * @param onProgress 进度回调（0-100）
+ */
+export async function mockUpload(
+  file: File,
+  onProgress?: (percent: number) => void
+): Promise<UploadResult> {
+  // 与真实上传保持一致：字段以 form-data 组装
+  const formData = new FormData();
+  formData.append("file", file);
+
+  // —— 模拟进度 ——
+  await new Promise<void>((resolve) => {
+    let percent = 0;
+    const timer = setInterval(() => {
+      percent += Math.random() * 30;
+      if (percent >= 100) {
+        percent = 100;
+        onProgress?.(percent);
+        clearInterval(timer);
+        resolve();
+      } else {
+        onProgress?.(Math.floor(percent));
+      }
+    }, 200);
+  });
+
+  // —— 模拟返回：本地 blob 地址，图片/视频可直接预览 ——
+  const url = URL.createObjectURL(file);
+  return { url, name: file.name };
+
+  /**
+   * TODO: 接真实接口时，删除上面的模拟逻辑，改为如下写法：
+   *
+   * import { UploadFile as uploadRequest } from "@/utils/request";
+   * const res = await uploadRequest(UPLOAD_URL, formData);
+   * // 假设后端返回 { code: 200, data: { url, name } }
+   * if (res.code !== 200) throw new Error(res.msg || "上传失败");
+   * return { url: res.data.url, name: res.data.name, raw: res };
+   */
+}
+
+/** 上传成功后，把结果回填到 UploadFile，供列表展示/表单取值 */
+export const fillUploadedFile = (
+  file: UploadFile,
+  result: UploadResult
+): UploadFile => ({
+  ...file,
+  status: "done",
+  url: result.url,
+  name: result.name ?? file.name,
+  response: result.raw ?? result,
+});

package/src/umi/index.ts

@@ -1,7 +1,7 @@
-import { createBrowserHistory } from 'history-with-query';
+import { createHashHistory } from 'history-with-query';
 import { useModel, ModelProvider } from './useModel';
 
-const history = createBrowserHistory();
+const history = createHashHistory();
 
 export { history, useModel, ModelProvider };
 export default history;

package/tsconfig.json

@@ -1,9 +1,8 @@
 {
   "compilerOptions": {
-    "module": "ESNext",
-    "target": "ESNext",
-    "lib": ["DOM", "ESNext", "DOM.Iterable"],
-    "moduleResolution": "bundler",
+    "module": "esnext",
+    "target": "esnext",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "importHelpers": true,
     "jsx": "react-jsx",
@@ -21,5 +20,11 @@
     "emitDecoratorMetadata": true,
     "skipLibCheck": true
   },
-  "include": ["mock/**/*", "src/**/*", "routes/**/*", "typings.d.ts", "vite.*.ts"]
+  "include": [
+    "mock/**/*",
+    "src/**/*",
+    "routes/**/*",
+    "typings.d.ts",
+    "vite.*.ts"
+  ]
 }

package/vite.config.ts

@@ -37,50 +37,6 @@ export default defineConfig(({ command }) => ({
   },
   build: {
     outDir: 'build',
-    lib: {
-      entry: path.resolve(__dirname, 'src/main.tsx'),
-      name: 'CodeSnippet',
-      formats: ['umd'],
-      // fileName: (format) => `code-snippet.${format}.js`,
-    },
-    // rollupOptions: {
-    //   external: [
-    //     'react',
-    //     'react-dom',
-    //     'antd',
-    //     // 'moment',
-    //     // 'react-router-dom',
-    //     // '@ant-design/pro-layout',
-    //     // '@ant-design/pro-table',
-    //     // '@ant-design/pro-form',
-    //     // '@ant-design/pro-descriptions',
-    //     // '@ant-design/pro-list',
-    //     // '@ant-design/icons',
-    //     // '@ice/stark-app',
-    //     // 'ahooks',
-    //     // 'axios',
-    //   ],
-    //   output: {
-    //     globals: {
-    //       react: 'React',
-    //       'react-dom': 'ReactDOM',
-    //       antd: 'antd',
-    //       // moment: 'moment',
-    //       // 'react-router-dom': 'ReactRouterDOM',
-    //       // '@ant-design/pro-layout': 'AntDesignProLayout',
-    //       // '@ant-design/pro-table': 'AntDesignProTable',
-    //       // '@ant-design/pro-form': 'AntDesignProForm',
-    //       // '@ant-design/pro-descriptions': 'AntDesignProDescriptions',
-    //       // '@ant-design/pro-list': 'AntDesignProList',
-    //       // '@ant-design/icons': 'AntDesignIcons',
-    //       // '@ice/stark-app': 'IceStarkApp',
-    //       // ahooks: 'ahooks',
-    //       // axios: 'axios',
-    //       // classnames: 'classNames',
-    //       // dayjs: 'dayjs',
-    //     },
-    //   },
-    // },
   },
   server: {
     port: 8000,

package/src/main.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app-vite';
-import './global.css';
-import { setLibraryName, isInIcestark } from '@ice/stark-app';
-
-let root;
-
-if (!isInIcestark()) {
-  root = createRoot(document.getElementById('root'));
-  root.render(<App />);
-}
-
-export function mount(props) {
-  root = createRoot(props.container);
-  root.render(<App />);
-}
-
-export function unmount(props) {
-  root?.unmount();
-}
-
-// 注意：`setLibraryName` 的入参需要与工程配置的 output.library 保持一致
-setLibraryName('CodeSnippet');