@lxzy/code-snippet 0.0.16 → 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.16",
+  "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,17 +31,15 @@
     "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-swc": "^3",
     "less": "^4.6.7",
     "prettier": "^2.2.0",
@@ -49,5 +47,11 @@
     "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>
-                {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>
+            <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 !== undefined}
+                    render={() => (
+                      <RouteWrapper componentPath={route.component} />
+                    )}
+                  />
+                ),
+              )}
+            </Switch>
+          </Suspense>
         </BasicLayout>
-      </BrowserRouter>
+      </HashRouter>
     </ConfigProvider>
   );
 };
 
 export default App;
+
+ReactDom.render(<App></App>, document.getElementById('root'));

package/src/components/ErrorBoundary/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Result } from 'antd';
 
-class ErrorBoundary extends React.Component {
+class ErrorBoundary extends React.Component<any> {
   state = { hasError: false, isChunkError: false, errorMessage: '' };
 
   static getDerivedStateFromError(error) {
@@ -21,10 +21,6 @@ class ErrorBoundary extends React.Component {
     window.location.reload();
   };
 
-  handleRetry = () => {
-    this.setState({ hasError: false, isChunkError: false });
-  };
-
   render() {
     if (this.state.hasError) {
       if (this.state.isChunkError) {
@@ -37,26 +33,10 @@ class ErrorBoundary extends React.Component {
               <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;

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/pages/home.tsx

@@ -1,13 +1,72 @@
 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) {
-  useEffect(() => {}, [a]);
-  const a = 1;
+  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/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;
+    }
+  }
+}