@lxzy/code-snippet 0.0.15 → 0.0.18

package/index.html

@@ -14,6 +14,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/app-vite.tsx"></script>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lxzy/code-snippet",
-  "version": "0.0.15",
+  "version": "0.0.18",
   "files": [
     "*",
     "!dist",
@@ -17,11 +17,11 @@
     "pub": "npm publish"
   },
   "dependencies": {
-    "@ant-design/icons": "^5",
-    "@ant-design/pro-components": "^2.6.0",
+    "@ant-design/icons": "^4",
+    "@ant-design/pro-components": "^1",
     "@ice/stark-app": "^1.5.0",
     "ahooks": "^3.1.9",
-    "antd": "5.27.2",
+    "antd": "4",
     "axios": "^1.18.1",
     "classnames": "^2.3.0",
     "dayjs": "^1.11.0",
@@ -31,23 +31,27 @@
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
     "moment": "^2.29.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-router-dom": "^6",
-    "tslib": "^2.8.1",
+    "react": "^17",
+    "react-dom": "^17",
+    "react-router": "5.3.4",
+    "react-router-dom": "5.3.4",
     "unstated-next": "^1.1.0",
     "validator": "^13.7.0"
   },
   "devDependencies": {
     "@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"
+  },
+  "resolutions": {
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
+    "@types/react-router": "5.1.20",
+    "@types/react-router-dom": "5.3.3"
   }
 }

package/src/app-vite.tsx

@@ -1,20 +1,23 @@
 import { Suspense, lazy, useEffect } from 'react';
+import ReactDom from 'react-dom';
 import {
-  Routes,
+  Switch,
   Route,
-  Navigate,
+  Redirect,
   useLocation,
-  BrowserRouter,
+  HashRouter,
 } 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 'antd/es/notification/style/index.less';
 import moment from 'moment';
 import 'moment/dist/locale/zh-cn';
+import './global.less';
+
 moment.locale('zh-cn');
 
 const pageModules = import.meta.glob([
@@ -43,32 +46,34 @@ const RouteWrapper = ({ componentPath }) => {
 const App = () => {
   return (
     <ConfigProvider>
-      <BrowserRouter basename={getBasename()}>
+      <HashRouter>
         <BasicLayout>
           <Suspense fallback={<PageLoading />}>
-            <Routes>
+            <Switch>
               {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} exact>
+                    <Redirect to={route.redirect} />
+                  </Route>
                 ) : (
                   <Route
                     key={route.path || i}
                     path={route.path}
-                    element={<RouteWrapper componentPath={route.component} />}
+                    exact={route.path !== undefined}
+                    render={() => (
+                      <RouteWrapper componentPath={route.component} />
+                    )}
                   />
                 ),
               )}
-              <Route path="*" element={<Navigate to="/404" replace />} />
-            </Routes>
+            </Switch>
           </Suspense>
         </BasicLayout>
-      </BrowserRouter>
+      </HashRouter>
     </ConfigProvider>
   );
 };
 
 export default App;
+
+ReactDom.render(<App></App>, document.getElementById('root'));

package/src/components/ErrorBoundary/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Button, Result } from 'antd';
+
+class ErrorBoundary extends React.Component<any> {
+  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();
+  };
+
+  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>,
+            ]}
+          />
+        );
+      }
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/src/{global.css → global.less}

@@ -10,3 +10,11 @@ body,
 #root > div {
   height: 100%;
 }
+
+.ant-modal-content {
+  border-radius: 8px;
+}
+
+.ant-modal-header {
+  border-radius: 8px;
+}

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,11 +1,72 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import styles from './index.module.less';
-import { DatePicker } from 'antd';
+import { DatePicker, notification } from 'antd';
 
 export default function Home(props) {
+  const [duration, setDuration] = useState(null);
+
+  useEffect(() => {
+    function findBox(dataView, type, offset, end) {
+      while (offset < end) {
+        const size = dataView.getUint32(offset);
+        if (size === 0) break;
+        const boxType = String.fromCharCode(
+          dataView.getUint8(offset + 4),
+          dataView.getUint8(offset + 5),
+          dataView.getUint8(offset + 6),
+          dataView.getUint8(offset + 7),
+        );
+        if (boxType === type) return offset;
+        offset += size;
+      }
+      return null;
+    }
+
+    function getVideoDuration(buffer) {
+      const dataView = new DataView(buffer);
+      const fileEnd = buffer.byteLength;
+
+      let moovOffset = findBox(dataView, 'moov', 0, fileEnd);
+      if (moovOffset === null) return null;
+
+      const moovSize = dataView.getUint32(moovOffset);
+      const mvhdOffset = findBox(
+        dataView,
+        'mvhd',
+        moovOffset + 8,
+        moovOffset + moovSize,
+      );
+      if (mvhdOffset === null) return null;
+
+      const version = dataView.getUint8(mvhdOffset + 8);
+      let timescale, duration;
+
+      if (version === 0) {
+        timescale = dataView.getUint32(mvhdOffset + 12 + 8);
+        duration = dataView.getUint32(mvhdOffset + 12 + 12);
+      } else {
+        const view64 = new DataView(buffer);
+        timescale = view64.getUint32(mvhdOffset + 20 + 8);
+        const high = view64.getUint32(mvhdOffset + 20 + 12);
+        const low = view64.getUint32(mvhdOffset + 20 + 16);
+        duration = high * 2 ** 32 + low;
+      }
+
+      return duration / timescale;
+    }
+
+    pm.sendRequest('http://vjs.zencdn.net/v/oceans.mp4', function (err, res) {
+      const dur = getVideoDuration(res.rawBody.buffer);
+      console.log('视频时长（秒）：', dur);
+    });
+  }, []);
+
   return (
     <div>
-      <DatePicker></DatePicker>
+      <p>
+        视频时长：
+        {duration !== null ? `${duration.toFixed(2)} 秒` : '加载中...'}
+      </p>
     </div>
   );
 }

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

@@ -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: {
@@ -46,50 +37,6 @@ 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,

package/.claude/settings.local.json

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

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');