@lxzy/code-snippet 0.0.15 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lxzy/code-snippet",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "files": [
     "*",
     "!dist",
@@ -42,11 +42,11 @@
     "@types/node": "^22.1.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3",
     "less": "^4.6.7",
     "prettier": "^2.2.0",
     "typescript": "^5.0.0",
-    "vite": "^8.1.4",
+    "vite": "^6.0.0",
     "vite-plugin-external": "^6.2.2",
     "vite-plugin-mock": "^3.0.2"
   }

package/src/app-vite.tsx

@@ -47,24 +47,24 @@ const App = () => {
         <BasicLayout>
           <Suspense fallback={<PageLoading />}>
             <Routes>
-              {routes.map((route, i) =>
-                route.redirect ? (
-                  <Route
-                    key={route.path || i}
-                    path={route.path}
-                    element={<Navigate to={route.redirect} replace />}
-                  />
-                ) : (
-                  <Route
-                    key={route.path || i}
-                    path={route.path}
-                    element={<RouteWrapper componentPath={route.component} />}
-                  />
-                ),
-              )}
-              <Route path="*" element={<Navigate to="/404" replace />} />
-            </Routes>
-          </Suspense>
+                {routes.map((route, i) =>
+                  route.redirect ? (
+                    <Route
+                      key={route.path || i}
+                      path={route.path}
+                      element={<Navigate to={route.redirect} replace />}
+                    />
+                  ) : (
+                    <Route
+                      key={route.path || i}
+                      path={route.path}
+                      element={<RouteWrapper componentPath={route.component} />}
+                    />
+                  ),
+                )}
+                <Route path="*" element={<Navigate to="/404" replace />} />
+              </Routes>
+            </Suspense>
         </BasicLayout>
       </BrowserRouter>
     </ConfigProvider>

package/src/components/ErrorBoundary/index.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Button, Result } from 'antd';
+
+class ErrorBoundary extends React.Component {
+  state = { hasError: false, isChunkError: false, errorMessage: '' };
+
+  static getDerivedStateFromError(error) {
+    const isChunkError =
+      error?.name === 'ChunkLoadError' ||
+      error?.message?.includes('Loading chunk') ||
+      error?.message?.includes('Failed to fetch dynamically imported module');
+
+    return { hasError: true, isChunkError, errorMessage: error.message };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('ErrorBoundary caught:', error, errorInfo);
+  }
+
+  handleRefresh = () => {
+    window.location.reload();
+  };
+
+  handleRetry = () => {
+    this.setState({ hasError: false, isChunkError: false });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.state.isChunkError) {
+        return (
+          <Result
+            status="warning"
+            title="资源加载失败"
+            subTitle="页面资源加载异常，可能是网络问题或版本更新导致"
+            extra={[
+              <Button type="primary" key="refresh" onClick={this.handleRefresh}>
+                刷新浏览器
+              </Button>,
+              <Button key="retry" onClick={this.handleRetry}>
+                重试
+              </Button>,
+            ]}
+          />
+        );
+      }
+
+      return (
+        <Result
+          status="error"
+          title="页面出错了"
+          subTitle={this.state.errorMessage}
+          extra={
+            <Button type="primary" onClick={this.handleRefresh}>
+              刷新浏览器
+            </Button>
+          }
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/src/layouts/index.tsx

@@ -4,6 +4,7 @@ import menuRoutes from '../../routes/menu';
 import getIcon from '@/utils/getIcon';
 import { useLocation, Link } from 'react-router-dom';
 import { isInIcestark } from '@ice/stark-app';
+import ErrorBoundary from '@/components/ErrorBoundary';
 
 const menuDataRender = (menuList) => {
   return menuList.map((item) => {
@@ -33,6 +34,7 @@ const BasicLayout = (props) => {
       }}
       menuItemRender={(item, dom) => <Link to={item.path}>{dom}</Link>}
       locale="zh-CN"
+      ErrorBoundary={ErrorBoundary}
     >
       {children}
     </ProLayout>

package/src/pages/home.tsx

@@ -1,8 +1,10 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import styles from './index.module.less';
 import { DatePicker } from 'antd';
 
 export default function Home(props) {
+  useEffect(() => {}, [a]);
+  const a = 1;
   return (
     <div>
       <DatePicker></DatePicker>

package/vite.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
 import { viteMockServe } from 'vite-plugin-mock';
-import pluginExternal from 'vite-plugin-external';
 import path from 'path';
 
 export default defineConfig(({ command }) => ({
@@ -17,13 +16,6 @@ export default defineConfig(({ command }) => ({
       mockPath: 'mock',
       enable: command === 'serve',
     }),
-    pluginExternal({
-      externals: {
-        react: 'React',
-        'react-dom': 'ReactDOM',
-        antd: 'antd',
-      },
-    }),
   ],
   resolve: {
     alias: {
@@ -31,7 +23,6 @@ export default defineConfig(({ command }) => ({
       umi: path.resolve(__dirname, './src/umi'),
       '~antd': path.resolve(__dirname, './node_modules/antd'),
     },
-    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
   },
   css: {
     preprocessorOptions: {
@@ -49,7 +40,7 @@ export default defineConfig(({ command }) => ({
     lib: {
       entry: path.resolve(__dirname, 'src/main.tsx'),
       name: 'CodeSnippet',
-      formats: ['iife'],
+      formats: ['umd'],
       // fileName: (format) => `code-snippet.${format}.js`,
     },
     // rollupOptions: {

package/.claude/settings.local.json

@@ -1,9 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(pnpm pub *)",
-      "Bash(git add *)",
-      "Bash(git commit *)"
-    ]
-  }
-}

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

@@ -1,158 +0,0 @@
-// 包裹容器：卡片模式下自定义卡片因多了文件名而高于 antd 默认项高，
-// 需把列表项容器高度改为自适应，否则换行后会与下一行重叠。
-// antd v5 用 cssinjs 运行时注入样式，与本地选择器特异性相同时会覆盖本地样式，故用 !important 提升优先级。
-.wrapper {
-  :global {
-    .ant-upload-list-picture-card {
-      align-items: flex-start;
-    }
-
-    .ant-upload-list-picture-card .ant-upload-list-item-container {
-      height: auto !important;
-    }
-  }
-}
-
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 104px;
-}
-
-.thumb {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 104px;
-  height: 104px;
-  padding: 8px;
-  overflow: hidden;
-  background-color: #fafafa;
-  border: 1px solid #d9d9d9;
-  border-radius: 8px;
-  cursor: pointer;
-
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-  }
-
-  video {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-  }
-}
-
-.mask {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  color: #fff;
-  font-size: 16px;
-  background-color: rgba(0, 0, 0, 0.45);
-  opacity: 0;
-  transition: opacity 0.2s;
-
-  span {
-    cursor: pointer;
-
-    &:hover {
-      color: #40a9ff;
-    }
-  }
-}
-
-.thumb:hover .mask {
-  opacity: 1;
-}
-
-.name {
-  width: 104px;
-  margin-top: 4px;
-  overflow: hidden;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 12px;
-  line-height: 18px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.error {
-  color: #ff4d4f;
-}
-
-// 列表模式（picture / text）
-.listItem {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 8px;
-  border-radius: 6px;
-
-  &:hover {
-    background-color: #f5f5f5;
-
-    .listActions {
-      opacity: 1;
-    }
-  }
-}
-
-.listThumb {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 40px;
-  height: 40px;
-  overflow: hidden;
-  cursor: pointer;
-
-  img,
-  video {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-  }
-}
-
-.listName {
-  flex: auto;
-  overflow: hidden;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 14px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  cursor: pointer;
-
-  &:hover {
-    color: #40a9ff;
-  }
-}
-
-.listActions {
-  display: flex;
-  flex: none;
-  gap: 12px;
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 14px;
-  opacity: 0;
-  transition: opacity 0.2s;
-
-  span {
-    cursor: pointer;
-
-    &:hover {
-      color: #40a9ff;
-    }
-  }
-}

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

@@ -1,276 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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,
-});