@lxzy/code-snippet 0.0.13 → 0.0.15

package/.claude/settings.local.json

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

package/.gitignore

@@ -9,9 +9,16 @@
 
 # production
 /dist
+/build
 
 # misc
 .DS_Store
 
 # vite
 /vite.config.ts.timestamp-*
+
+.omo/run-continuation/
+.omo/plans/
+.omo/notepads/
+.omo/boulder.json
+.codegraph

package/index.html

@@ -4,6 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Code Snippet</title>
+    <link
+      rel="stylesheet"
+      href="https://g.alicdn.com/code/lib/antd/5.27.2/reset.min.css"
+    />
+    <script src="https://g.alicdn.com/code/lib/react/18.2.0/umd/react.%MODE%.min.js"></script>
+    <script src="https://g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.%MODE%.min.js"></script>
+    <script src="https://g.alicdn.com/code/lib/??dayjs/1.11.10/dayjs.min.js,antd/5.27.2/antd.min.js"></script>
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lxzy/code-snippet",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "files": [
     "*",
     "!dist",
@@ -17,66 +17,37 @@
     "pub": "npm publish"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
-    "@ant-design/pro-descriptions": "^1.10.0",
-    "@ant-design/pro-form": "^1.52.0",
-    "@ant-design/pro-layout": "^6.32.0",
-    "@ant-design/pro-list": "^1.21.44",
-    "@ant-design/pro-table": "^2.61.0",
-    "@wangeditor/editor": "^5.1.23",
-    "@wangeditor/editor-for-react": "^1.0.6",
+    "@ant-design/icons": "^5",
+    "@ant-design/pro-components": "^2.6.0",
+    "@ice/stark-app": "^1.5.0",
     "ahooks": "^3.1.9",
-    "ali-oss": "^6.16.0",
-    "antd": "^4.22.7",
+    "antd": "5.27.2",
     "axios": "^1.18.1",
     "classnames": "^2.3.0",
-    "clipboard": "^2.0.8",
-    "core-decorators": "^0.20.0",
-    "crypto-js": "^4.1.1",
     "dayjs": "^1.11.0",
     "echarts": "^5.4.3",
-    "eta": "^1.12.3",
-    "exceljs": "^4.3.0",
-    "fs-extra": "^10.0.0",
-    "got": "^11.8.2",
+    "esbuild": "^0.28.1",
     "history-with-query": "^4.10.4",
-    "jotai": "^1.6.1",
-    "lodash": "^4.17.0",
     "lodash-es": "^4.17.21",
+    "mockjs": "^1.1.0",
     "moment": "^2.29.0",
-    "number-precision": "^1.5.2",
-    "omit.js": "^2.0.2",
-    "rc-menu": "^9.1.0",
-    "rc-util": "^5.16.0",
-    "react": "^17.0.0",
-    "react-avatar-editor": "^13.0.2",
-    "react-beautiful-dnd": "^13.1.0",
-    "react-color": "^2.19.3",
-    "react-dev-inspector": "^1.7.0",
-    "react-dom": "^17.0.0",
-    "react-helmet-async": "^1.2.0",
-    "react-infinite-scroll-component": "^6.1.0",
-    "react-router-dom": "5",
-    "swagger-typescript-api": "10.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6",
     "tslib": "^2.8.1",
     "unstated-next": "^1.1.0",
-    "validator": "^13.7.0",
-    "wangeditor": "^4.7.11"
+    "validator": "^13.7.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.29.7",
     "@types/node": "^22.1.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-router-dom": "5",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^6.0.0",
     "less": "^4.6.7",
-    "lint-staged": "^10.0.7",
     "prettier": "^2.2.0",
     "typescript": "^5.0.0",
     "vite": "^8.1.4",
-    "vite-plugin-mock": "^3.0.2",
-    "yorkie": "^2.0.0"
+    "vite-plugin-external": "^6.2.2",
+    "vite-plugin-mock": "^3.0.2"
   }
 }

package/routes/index.ts

@@ -4,7 +4,7 @@ const flattenRoutes = (routes) => {
   const result = [];
   routes.forEach((route) => {
     if (route.component) {
-      result.push({ path: route.path, component: route.component });
+      result.push(route);
     }
     if (route.routes) {
       result.push(...flattenRoutes(route.routes));

package/routes/menu.ts

@@ -1,4 +1,9 @@
 export default [
+  {
+    path: '/',
+    component: 'home',
+    redirect: '/home',
+  },
   {
     path: '/home',
     name: '首页',
@@ -9,6 +14,7 @@ export default [
     path: '/login',
     name: '登录',
     component: 'login',
+    hideInMenu: true,
     layout: false,
   },
   {

package/src/app-vite.tsx

@@ -0,0 +1,74 @@
+import { Suspense, lazy, useEffect } from 'react';
+import {
+  Routes,
+  Route,
+  Navigate,
+  useLocation,
+  BrowserRouter,
+} from 'react-router-dom';
+
+import history from '@/umi';
+import BasicLayout from '@/layouts/index';
+import { getBasename } from '@ice/stark-app';
+import routes from '../routes';
+import { PageLoading } from '@ant-design/pro-components';
+import { ConfigProvider } from 'antd';
+import moment from 'moment';
+import 'moment/dist/locale/zh-cn';
+moment.locale('zh-cn');
+
+const pageModules = import.meta.glob([
+  './pages/**/*.tsx',
+  '!./pages/**/component/**',
+  '!./pages/**/components/**',
+]);
+
+const componentCache = {};
+const loadComponent = (path) => {
+  if (!componentCache[path]) {
+    const factory: any =
+      pageModules[`./pages/${path}.tsx`] ||
+      pageModules[`./pages/${path}/index.tsx`];
+    componentCache[path] = lazy(factory);
+  }
+  return componentCache[path];
+};
+
+const RouteWrapper = ({ componentPath }) => {
+  const location = useLocation();
+  const Component = loadComponent(componentPath);
+  return <Component history={history} location={location} />;
+};
+
+const App = () => {
+  return (
+    <ConfigProvider>
+      <BrowserRouter basename={getBasename()}>
+        <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>
+        </BasicLayout>
+      </BrowserRouter>
+    </ConfigProvider>
+  );
+};
+
+export default App;

package/src/layouts/index.tsx

@@ -1,8 +1,9 @@
-import ProLayout from '@ant-design/pro-layout';
+import { ProLayout } from '@ant-design/pro-components';
 import history from '@/umi';
 import menuRoutes from '../../routes/menu';
 import getIcon from '@/utils/getIcon';
-import { useLocation } from 'react-router-dom';
+import { useLocation, Link } from 'react-router-dom';
+import { isInIcestark } from '@ice/stark-app';
 
 const menuDataRender = (menuList) => {
   return menuList.map((item) => {
@@ -19,38 +20,19 @@ const BasicLayout = (props) => {
   const { children } = props;
   const location = useLocation();
 
-  const isLayoutFalse = (routes, pathname) => {
-    for (const route of routes) {
-      if (pathname === route.path || pathname.startsWith(route.path + '/')) {
-        if (route.layout === false) return true;
-      }
-      if (route.routes) {
-        if (isLayoutFalse(route.routes, pathname)) return true;
-      }
-    }
-    return false;
-  };
-
-  if (isLayoutFalse(menuRoutes, location.pathname)) {
-    return <>{children}</>;
-  }
-
   return (
     <ProLayout
       title="管理平台"
-      // pure
+      pure={isInIcestark()}
       logo={false}
       layout="mix"
-      fixSiderbar={false}
-      fixedHeader
       location={location}
       route={{
         path: '/',
         routes: menuDataRender(menuRoutes),
       }}
-      menuItemRender={(item, dom) => (
-        <a onClick={() => history.push(item.path || '/')}>{dom}</a>
-      )}
+      menuItemRender={(item, dom) => <Link to={item.path}>{dom}</Link>}
+      locale="zh-CN"
     >
       {children}
     </ProLayout>

package/src/main.tsx

@@ -1,12 +1,24 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-import 'antd/es/notification/style';
+import { createRoot } from 'react-dom/client';
+import App from './app-vite';
 import './global.css';
+import { setLibraryName, isInIcestark } from '@ice/stark-app';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root'),
-);
+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');

package/src/pages/activityCenter/activitySystemManagement/add.tsx

@@ -8,7 +8,7 @@ import {
   ProFormRadio,
   ProFormDependency,
   ProFormDateTimeRangePicker,
-} from '@ant-design/pro-form';
+} from '@ant-design/pro-components';
 import moment from 'moment';
 import axios from 'axios';
 

package/src/pages/activityCenter/activitySystemManagement/addPages/components/ChannelLinkModal.tsx

@@ -1,8 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { Modal, Button, Input, message } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import ProTable from '@ant-design/pro-table';
-import { ModalForm, ProFormText } from '@ant-design/pro-form';
+import { ProTable, ModalForm, ProFormText } from '@ant-design/pro-components';
 import axios from 'axios';
 
 const ChannelLinkModal = (props) => {

package/src/pages/activityCenter/activitySystemManagement/addPages/components/CustomLink.tsx

@@ -1,8 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { Button, Modal, Radio, Input, message, Space } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import ProTable from '@ant-design/pro-table';
-import { ModalForm } from '@ant-design/pro-form';
+import { ProTable, ModalForm } from '@ant-design/pro-components';
 import axios from 'axios';
 
 const CustomLink = () => {

package/src/pages/activityCenter/activitySystemManagement/addPages/components/CustomPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Button } from 'antd';
-import ProTable from '@ant-design/pro-table';
+import { ProTable } from '@ant-design/pro-components';
 import axios from 'axios';
 import ChannelLinkModal from './ChannelLinkModal';
 

package/src/pages/activityCenter/activitySystemManagement/addPages/components/SystemPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from 'antd';
-import ProTable from '@ant-design/pro-table';
+import { ProTable } from '@ant-design/pro-components';
 import axios from 'axios';
 
 const SystemPage = () => {

package/src/pages/activityCenter/activitySystemManagement/addPages/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { PageContainer } from '@ant-design/pro-layout';
+import { PageContainer } from '@ant-design/pro-components';
 import SystemPage from './components/SystemPage';
 import CustomPage from './components/CustomPage';
 import CustomLink from './components/CustomLink';

package/src/pages/activityCenter/activitySystemManagement/index.tsx

@@ -8,7 +8,8 @@ import {
   Select,
   Space,
 } from 'antd';
-import ProTable, { ActionType } from '@ant-design/pro-table';
+import { ProTable } from '@ant-design/pro-components';
+import type { ActionType } from '@ant-design/pro-components';
 import axios from 'axios';
 import AddDrawer from './add';
 import history from '@/umi';

package/src/pages/home.tsx

@@ -1,7 +1,11 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
+import styles from './index.module.less';
+import { DatePicker } from 'antd';
 
 export default function Home(props) {
-  console.log(props);
-  const { history, location } = props;
-  return <div>home</div>;
+  return (
+    <div>
+      <DatePicker></DatePicker>
+    </div>
+  );
 }

package/src/pages/index.module.less

@@ -0,0 +1,5 @@
+a {
+}
+
+b {
+}

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

@@ -0,0 +1,158 @@
+// 包裹容器：卡片模式下自定义卡片因多了文件名而高于 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

@@ -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/pages/style.less

@@ -0,0 +1,2 @@
+b {
+}

package/src/umi/index.ts

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

package/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { viteMockServe } from 'vite-plugin-mock';
+import pluginExternal from 'vite-plugin-external';
 import path from 'path';
 
 export default defineConfig(({ command }) => ({
@@ -16,6 +17,13 @@ export default defineConfig(({ command }) => ({
       mockPath: 'mock',
       enable: command === 'serve',
     }),
+    pluginExternal({
+      externals: {
+        react: 'React',
+        'react-dom': 'ReactDOM',
+        antd: 'antd',
+      },
+    }),
   ],
   resolve: {
     alias: {
@@ -36,6 +44,53 @@ export default defineConfig(({ command }) => ({
       },
     },
   },
+  build: {
+    outDir: 'build',
+    lib: {
+      entry: path.resolve(__dirname, 'src/main.tsx'),
+      name: 'CodeSnippet',
+      formats: ['iife'],
+      // 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,
     open: true,

package/src/App.tsx

@@ -1,74 +0,0 @@
-import React, { Suspense, lazy } from 'react';
-import { Switch, Route, Redirect, useHistory, useLocation } from 'react-router-dom';
-import { Router } from 'react-router-dom';
-import history from '@/umi';
-import BasicLayout from '@/layouts/index';
-import routes from '../routes';
-
-const pageModules = import.meta.glob('./pages/**/*.tsx');
-
-const componentCache = {};
-const loadComponent = (path) => {
-  if (!componentCache[path]) {
-    const factory: any =
-      pageModules[`./pages/${path}.tsx`] ||
-      pageModules[`./pages/${path}/index.tsx`];
-    if (!factory) {
-      throw new Error(`Page component not found: ${path}`);
-    }
-    componentCache[path] = lazy(factory);
-  }
-  return componentCache[path];
-};
-
-const parseQuery = (search) => {
-  if (!search) return {};
-  const params = new URLSearchParams(search);
-  const query = {};
-  for (const [key, value] of params) {
-    query[key] = value;
-  }
-  return query;
-};
-
-const RouteWrapper = ({ componentPath }) => {
-  const routeHistory = useHistory();
-  const routeLocation = useLocation();
-  const Component = loadComponent(componentPath);
-  return (
-    <Component
-      history={routeHistory}
-      location={{ ...routeLocation, query: parseQuery(routeLocation.search) }}
-    />
-  );
-};
-
-const App = () => {
-  return (
-    <Router history={history}>
-      <BasicLayout>
-        <Suspense fallback={null}>
-          <Switch>
-            {routes.map((route, i) =>
-              route.redirect ? (
-                <Route key={route.path || i} path={route.path} exact>
-                  <Redirect to={route.redirect} />
-                </Route>
-              ) : (
-                <Route
-                  key={route.path || i}
-                  path={route.path}
-                  exact={route.path !== '/404'}
-                  render={() => <RouteWrapper componentPath={route.component} />}
-                />
-              ),
-            )}
-            <Redirect to="/404" />
-          </Switch>
-        </Suspense>
-      </BasicLayout>
-    </Router>
-  );
-};
-
-export default App;