gemercheung 1 rok temu
rodzic
commit
784adafd44
16 zmienionych plików z 1445 dodań i 484 usunięć
  1. 2 1
      .env
  2. 2 1
      .env.development
  3. 2 1
      .env.production
  4. 2 1
      index.html
  5. 2 1
      package.json
  6. 329 0
      pnpm-lock.yaml
  7. 0 459
      src/App copy.jsx
  8. 6 3
      src/App.jsx
  9. 2 1
      src/components/Viewer.jsx
  10. 948 0
      src/heti.css
  11. 1 1
      src/index.css
  12. 1 1
      src/main.jsx
  13. 13 0
      src/style/viewer.jsx
  14. 54 0
      src/view/Closing.jsx
  15. 27 3
      src/view/Section17.jsx
  16. 54 11
      vite.config.js

+ 2 - 1
.env

@@ -1,2 +1,3 @@
 VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/nanjinbwg-demo/getty-image/
-VITE_APP_DEBUG=0
+VITE_APP_DEBUG=0
+VITE_PUBLIC_DIR="/"

+ 2 - 1
.env.development

@@ -1,2 +1,3 @@
 VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/nanjinbwg-demo/getty-image/
-VITE_APP_DEBUG=1
+VITE_APP_DEBUG=1
+VITE_PUBLIC_DIR="/"

+ 2 - 1
.env.production

@@ -1,2 +1,3 @@
 VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/nanjinbwg-demo/getty-image/
-VITE_APP_DEBUG=1
+VITE_APP_DEBUG=1
+VITE_PUBLIC_DIR="./"

+ 2 - 1
index.html

@@ -5,7 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://4dkk.4dage.com/v4-test/www/viewer/static/lib/vconsole.js"></script>
-    <title>Vite + React</title>
+    <link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css" />
+    <title>Getty Show</title>
   </head>
   <body>
     <div id="root"></div>

+ 2 - 1
package.json

@@ -29,7 +29,8 @@
     "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "vite": "^5.1.6"
+    "vite": "^5.1.6",
+    "vite-plugin-javascript-obfuscator": "^3.1.0"
   },
   "overrides": {
     "react-lazyload": {

+ 329 - 0
pnpm-lock.yaml

@@ -61,6 +61,9 @@ devDependencies:
   vite:
     specifier: ^5.1.6
     version: 5.1.6
+  vite-plugin-javascript-obfuscator:
+    specifier: ^3.1.0
+    version: 3.1.0
 
 packages:
 
@@ -702,6 +705,23 @@ packages:
     resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==}
     dev: true
 
+  /@javascript-obfuscator/escodegen@2.3.0:
+    resolution: {integrity: sha512-QVXwMIKqYMl3KwtTirYIA6gOCiJ0ZDtptXqAv/8KWLG9uQU2fZqTVy7a/A5RvcoZhbDoFfveTxuGxJ5ibzQtkw==}
+    engines: {node: '>=6.0'}
+    dependencies:
+      '@javascript-obfuscator/estraverse': 5.4.0
+      esprima: 4.0.1
+      esutils: 2.0.3
+      optionator: 0.8.3
+    optionalDependencies:
+      source-map: 0.6.1
+    dev: true
+
+  /@javascript-obfuscator/estraverse@5.4.0:
+    resolution: {integrity: sha512-CZFX7UZVN9VopGbjTx4UXaXsi9ewoM1buL0kY7j1ftYdSs7p2spv9opxFjHlQ/QGTgh4UqufYqJJ0WKLml7b6w==}
+    engines: {node: '>=4.0'}
+    dev: true
+
   /@jridgewell/gen-mapping@0.3.5:
     resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
     engines: {node: '>=6.0.0'}
@@ -1254,6 +1274,10 @@ packages:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
     dev: true
 
+  /@types/minimatch@3.0.5:
+    resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
+    dev: true
+
   /@types/parse-json@4.0.2:
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
 
@@ -1275,6 +1299,10 @@ packages:
   /@types/scheduler@0.16.8:
     resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==}
 
+  /@types/validator@13.11.9:
+    resolution: {integrity: sha512-FCTsikRozryfayPuiI46QzH3fnrOoctTjvOYZkho9BTFLCOZ2rgZJHMOVgCOfttjPJcgOx52EpkY0CMfy87MIw==}
+    dev: true
+
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
@@ -1322,6 +1350,12 @@ packages:
     hasBin: true
     dev: true
 
+  /acorn@8.8.2:
+    resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
   /ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
     dependencies:
@@ -1349,6 +1383,14 @@ packages:
       color-convert: 2.0.1
     dev: true
 
+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: true
+
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
@@ -1361,6 +1403,11 @@ packages:
       is-array-buffer: 3.0.4
     dev: true
 
+  /array-differ@3.0.0:
+    resolution: {integrity: sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==}
+    engines: {node: '>=8'}
+    dev: true
+
   /array-includes@3.1.7:
     resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
     engines: {node: '>= 0.4'}
@@ -1372,6 +1419,11 @@ packages:
       is-string: 1.0.7
     dev: true
 
+  /array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+    dev: true
+
   /array.prototype.findlast@1.2.4:
     resolution: {integrity: sha512-BMtLxpV+8BD+6ZPFIWmnUBpQoy+A+ujcg4rhp2iwCRJYA7PEh2MS4NL3lz8EiDlLrJPp2hg9qWihr5pd//jcGw==}
     engines: {node: '>= 0.4'}
@@ -1436,6 +1488,20 @@ packages:
       is-shared-array-buffer: 1.0.3
     dev: true
 
+  /arrify@2.0.1:
+    resolution: {integrity: sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /assert@2.0.0:
+    resolution: {integrity: sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==}
+    dependencies:
+      es6-object-assign: 1.1.0
+      is-nan: 1.3.2
+      object-is: 1.1.6
+      util: 0.12.5
+    dev: true
+
   /assign-symbols@1.0.0:
     resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
     engines: {node: '>=0.10.0'}
@@ -1483,6 +1549,10 @@ packages:
       update-browserslist-db: 1.0.13(browserslist@4.23.0)
     dev: true
 
+  /buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+    dev: true
+
   /call-bind@1.0.7:
     resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
     engines: {node: '>= 0.4'}
@@ -1518,6 +1588,27 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /chance@1.1.9:
+    resolution: {integrity: sha512-TfxnA/DcZXRTA4OekA2zL9GH8qscbbl6X0ZqU4tXhGveVY/mXWvEQLt5GwZcYXTEyEFflVtj+pG8nc8EwSm1RQ==}
+    dev: true
+
+  /char-regex@1.0.2:
+    resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /charenc@0.0.2:
+    resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
+    dev: true
+
+  /class-validator@0.14.0:
+    resolution: {integrity: sha512-ct3ltplN8I9fOwUd8GrP8UQixwff129BkEtuWDKL5W45cQuLd19xqmTLu5ge78YDm/fdje6FMt0hGOhl0lii3A==}
+    dependencies:
+      '@types/validator': 13.11.9
+      libphonenumber-js: 1.10.59
+      validator: 13.11.0
+    dev: true
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -1541,6 +1632,11 @@ packages:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
     dev: false
 
+  /commander@10.0.0:
+    resolution: {integrity: sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA==}
+    engines: {node: '>=14'}
+    dev: true
+
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
@@ -1571,6 +1667,10 @@ packages:
       which: 2.0.2
     dev: true
 
+  /crypt@0.0.2:
+    resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==}
+    dev: true
+
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -1825,6 +1925,10 @@ packages:
       is-symbol: 1.0.4
     dev: true
 
+  /es6-object-assign@1.1.0:
+    resolution: {integrity: sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==}
+    dev: true
+
   /esbuild@0.19.12:
     resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==}
     engines: {node: '>=12'}
@@ -1913,6 +2017,14 @@ packages:
       string.prototype.matchall: 4.0.10
     dev: true
 
+  /eslint-scope@7.1.1:
+    resolution: {integrity: sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+    dev: true
+
   /eslint-scope@7.2.2:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1921,6 +2033,11 @@ packages:
       estraverse: 5.3.0
     dev: true
 
+  /eslint-visitor-keys@3.3.0:
+    resolution: {integrity: sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
   /eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1982,6 +2099,12 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
+  /esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
   /esquery@1.5.0:
     resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
     engines: {node: '>=0.10'}
@@ -2283,6 +2406,18 @@ packages:
       side-channel: 1.0.6
     dev: true
 
+  /inversify@6.0.1:
+    resolution: {integrity: sha512-B3ex30927698TJENHR++8FfEaJGqoWOgI6ZY5Ht/nLUsFCwHn6akbwtnUAPCgUepAnTpe2qHxhDNjoKLyz6rgQ==}
+    dev: true
+
+  /is-arguments@1.1.1:
+    resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      has-tostringtag: 1.0.2
+    dev: true
+
   /is-array-buffer@3.0.4:
     resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
     engines: {node: '>= 0.4'}
@@ -2315,6 +2450,10 @@ packages:
       has-tostringtag: 1.0.2
     dev: true
 
+  /is-buffer@1.1.6:
+    resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
+    dev: true
+
   /is-callable@1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
@@ -2381,6 +2520,14 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /is-nan@1.3.2:
+    resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+    dev: true
+
   /is-negative-zero@2.0.3:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
@@ -2488,6 +2635,42 @@ packages:
       set-function-name: 2.0.2
     dev: true
 
+  /javascript-obfuscator@4.1.0:
+    resolution: {integrity: sha512-ckC0VFKQ0/sFtLH9apW/ZLfsP8LuZqZhVEM4VTJ5KLzyLaodW6C1lTU8808eboDmddKyvd2uyRx5bzc0Me0GYg==}
+    engines: {node: ^12.22.0 || ^14.0.0 || ^16.0.0 || ^17.0.0 || >=18.0.0}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      '@javascript-obfuscator/escodegen': 2.3.0
+      '@javascript-obfuscator/estraverse': 5.4.0
+      acorn: 8.8.2
+      assert: 2.0.0
+      chalk: 4.1.2
+      chance: 1.1.9
+      class-validator: 0.14.0
+      commander: 10.0.0
+      eslint-scope: 7.1.1
+      eslint-visitor-keys: 3.3.0
+      fast-deep-equal: 3.1.3
+      inversify: 6.0.1
+      js-string-escape: 1.0.1
+      md5: 2.3.0
+      mkdirp: 2.1.3
+      multimatch: 5.0.0
+      opencollective-postinstall: 2.0.3
+      process: 0.11.10
+      reflect-metadata: 0.1.13
+      source-map-support: 0.5.21
+      string-template: 1.0.0
+      stringz: 2.1.0
+      tslib: 2.5.0
+    dev: true
+
+  /js-string-escape@1.0.1:
+    resolution: {integrity: sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -2565,6 +2748,14 @@ packages:
       - '@types/react-dom'
     dev: false
 
+  /levn@0.3.0:
+    resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.1.2
+      type-check: 0.3.2
+    dev: true
+
   /levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -2573,6 +2764,10 @@ packages:
       type-check: 0.4.0
     dev: true
 
+  /libphonenumber-js@1.10.59:
+    resolution: {integrity: sha512-HeTsOrDF/hWhEiKqZVwg9Cqlep5x2T+IYDENvT2VRj3iX8JQ7Y+omENv+AIn0vC8m6GYhivfCed5Cgfw27r5SA==}
+    dev: true
+
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
@@ -2599,6 +2794,14 @@ packages:
       yallist: 3.1.1
     dev: true
 
+  /md5@2.3.0:
+    resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
+    dependencies:
+      charenc: 0.0.2
+      crypt: 0.0.2
+      is-buffer: 1.1.6
+    dev: true
+
   /merge-value@1.0.0:
     resolution: {integrity: sha512-fJMmvat4NeKz63Uv9iHWcPDjCWcCkoiRoajRTEO8hlhUC6rwaHg0QCF9hBOTjZmm4JuglPckPSTtcuJL5kp0TQ==}
     engines: {node: '>=0.10.0'}
@@ -2623,10 +2826,27 @@ packages:
       is-extendable: 1.0.1
     dev: false
 
+  /mkdirp@2.1.3:
+    resolution: {integrity: sha512-sjAkg21peAG9HS+Dkx7hlG9Ztx7HLeKnvB3NQRcu/mltCVmvkF0pisbiTSfDVYTT86XEfZrTUosLdZLStquZUw==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dev: true
+
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true
 
+  /multimatch@5.0.0:
+    resolution: {integrity: sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@types/minimatch': 3.0.5
+      array-differ: 3.0.0
+      array-union: 2.1.0
+      arrify: 2.0.1
+      minimatch: 3.1.2
+    dev: true
+
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -2641,6 +2861,11 @@ packages:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
     dev: true
 
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -2649,6 +2874,14 @@ packages:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
     dev: true
 
+  /object-is@1.1.6:
+    resolution: {integrity: sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+    dev: true
+
   /object-keys@1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
@@ -2705,6 +2938,23 @@ packages:
       wrappy: 1.0.2
     dev: true
 
+  /opencollective-postinstall@2.0.3:
+    resolution: {integrity: sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==}
+    hasBin: true
+    dev: true
+
+  /optionator@0.8.3:
+    resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.3.0
+      prelude-ls: 1.1.2
+      type-check: 0.3.2
+      word-wrap: 1.2.5
+    dev: true
+
   /optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
@@ -2772,6 +3022,11 @@ packages:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
     dev: true
 
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+    dev: true
+
   /possible-typed-array-names@1.0.0:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
@@ -2786,11 +3041,21 @@ packages:
       source-map-js: 1.1.0
     dev: true
 
+  /prelude-ls@1.1.2:
+    resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
+
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
     dev: true
 
+  /process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+    dev: true
+
   /prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:
@@ -2864,6 +3129,10 @@ packages:
       loose-envify: 1.4.0
     dev: false
 
+  /reflect-metadata@0.1.13:
+    resolution: {integrity: sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==}
+    dev: true
+
   /reflect.getprototypeof@1.0.6:
     resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==}
     engines: {node: '>= 0.4'}
@@ -3041,10 +3310,22 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+    dev: true
+
   /source-map@0.5.7:
     resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
     engines: {node: '>=0.10.0'}
 
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /split-string@3.1.0:
     resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
     engines: {node: '>=0.10.0'}
@@ -3052,6 +3333,10 @@ packages:
       extend-shallow: 3.0.2
     dev: false
 
+  /string-template@1.0.0:
+    resolution: {integrity: sha512-SLqR3GBUXuoPP5MmYtD7ompvXiG87QjT6lzOszyXjTM86Uu7At7vNnt2xgyTLq5o9T4IxTYFyGxcULqpsmsfdg==}
+    dev: true
+
   /string.prototype.matchall@4.0.10:
     resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==}
     dependencies:
@@ -3092,6 +3377,12 @@ packages:
       es-abstract: 1.22.5
     dev: true
 
+  /stringz@2.1.0:
+    resolution: {integrity: sha512-KlywLT+MZ+v0IRepfMxRtnSvDCMc3nR1qqCs3m/qIbSOWkNZYT8XHQA31rS3TnKp0c5xjZu3M4GY/2aRKSi/6A==}
+    dependencies:
+      char-regex: 1.0.2
+    dev: true
+
   /strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -3132,10 +3423,21 @@ packages:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
 
+  /tslib@2.5.0:
+    resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
+    dev: true
+
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
     dev: false
 
+  /type-check@0.3.2:
+    resolution: {integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.1.2
+    dev: true
+
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -3218,10 +3520,32 @@ packages:
       punycode: 2.3.1
     dev: true
 
+  /util@0.12.5:
+    resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
+    dependencies:
+      inherits: 2.0.4
+      is-arguments: 1.1.1
+      is-generator-function: 1.0.10
+      is-typed-array: 1.1.13
+      which-typed-array: 1.1.15
+    dev: true
+
   /v8n@1.5.1:
     resolution: {integrity: sha512-LdabyT4OffkyXFCe9UT+uMkxNBs5rcTVuZClvxQr08D5TUgo1OFKkoT65qYRCsiKBl/usHjpXvP4hHMzzDRj3A==}
     dev: false
 
+  /validator@13.11.0:
+    resolution: {integrity: sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
+  /vite-plugin-javascript-obfuscator@3.1.0:
+    resolution: {integrity: sha512-sf4JFlG1iUPl7bLXHGOy+bKWOQUFyXzJFWa+n2S2xMMvyfM+V9R40HhpZoIF1eAjifArM1SF7fbSFIaTuUIbPA==}
+    dependencies:
+      anymatch: 3.1.3
+      javascript-obfuscator: 4.1.0
+    dev: true
+
   /vite@5.1.6:
     resolution: {integrity: sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -3314,6 +3638,11 @@ packages:
       isexe: 2.0.0
     dev: true
 
+  /word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true

+ 0 - 459
src/App copy.jsx

@@ -1,459 +0,0 @@
-import { useRef, useEffect } from "react";
-import { gsap, ScrollTrigger } from "gsap/all";
-import { Action } from "./action";
-import Opening from "./components/Opening";
-import Viewer from "./components/Viewer";
-import RichText from "./components/RichText";
-import mapJpg from "./assets/meso-map-chinese-simplified.jpg";
-import {
-  TimeLineTitleText,
-  TimeLineLabelText,
-  TimeLineWallText,
-  ButtonText,
-  TimeLineTransText,
-} from "./components/TimeLineText";
-
-import { css } from "@emotion/react";
-
-import { useControls } from "leva";
-
-gsap.registerPlugin(ScrollTrigger);
-
-ScrollTrigger.config({
-  autoRefreshEvents: "visibilitychange,DOMContentLoaded,load",
-  // limitCallbacks: true,
-});
-
-let resizeTimer = null;
-
-function App() {
-  const container = useRef();
-  const { debug } = useControls({ debug: false });
-  const handlerResize = () => {
-    clearTimeout(resizeTimer);
-    resizeTimer = setTimeout(function () {
-      let height = 0.01 * window.innerHeight;
-      let sHeight = ((16 * window.innerHeight) / 9) * 0.01;
-      let cHeight = 0;
-
-      if (100 * sHeight < window.innerWidth) {
-        cHeight = 0.5 * (window.innerWidth - 100 * sHeight);
-      }
-
-      document.documentElement.style.setProperty(
-        "--vh",
-        "".concat(height, "px")
-      ),
-        document.documentElement.style.setProperty(
-          "--cw",
-          "".concat(sHeight, "px")
-        ),
-        document.documentElement.style.setProperty(
-          "--cl",
-          "".concat(cHeight, "px")
-        );
-      console.log("fresh");
-      // ScrollTrigger.refresh();
-      ScrollTrigger.getAll().forEach((ST) => ST.refresh(true));
-    }, 100);
-  };
-  useEffect(() => {
-    window.addEventListener("resize", handlerResize, false);
-    handlerResize();
-    document.documentElement.style.overflow = "auto";
-  });
-
-  return (
-    <div ref={container}>
-      <Opening></Opening>
-
-      <Viewer
-        name="Lion Render"
-        path="lion-render-10fps-873-rev1"
-        height={"1300vh"}
-        frameCount={300}
-        debug={debug}
-        pause={{
-          298: 40,
-        }}
-      >
-        <TimeLineTitleText
-          trigger={Action.scrubPin}
-          verticalOffset={"33vh"}
-          keyframes={[
-            Object.assign({}, Action.visible, {
-              start: 0,
-              end: 0,
-            }),
-            Object.assign({}, Action.fadeDown, {
-              start: 0.02,
-              end: 0.03,
-            }),
-          ]}
-        >
-          <div
-            css={css`
-              font-weight: 300;
-              font-size: 2.75vw;
-              width: 100%;
-              text-align: center;
-            `}
-          >
-            对古代美索不达米亚人来说,礼拜是日常生活的一部分。
-          </div>
-        </TimeLineTitleText>
-
-        <TimeLineLabelText
-          duration={0.0325}
-          fade={0.01}
-          progressPosition={0.03}
-        >
-          <div
-            css={css`
-              font-weight: 300;
-              font-size: 18px;
-              width: 50%;
-              max-width: 600px;
-              padding: 8px 12px;
-              margin-right: 20px;
-              margin-left: auto;
-              background: rgba(0, 0, 0, 0.7);
-              border-radius: 2px;
-            `}
-          >
-            各城邦的城市建筑甚至被赋予象征及宗教意义。巴比伦古城的建筑装饰即是一个鲜明例子。
-          </div>
-        </TimeLineLabelText>
-
-        <TimeLineWallText className={"wall-text"} progressPosition={0.125}>
-          <div
-            css={css`
-              width: 35%;
-              padding-left: 32px;
-              padding-right: 32px;
-              z-index: 25;
-              font-size: 24px;
-              line-height: 1.66;
-              text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
-            `}
-          >
-            <div
-              css={css`
-                font-size: 30px;
-              `}
-            >
-              迈步狮纹镶板
-            </div>
-            <div>公元前605-562年</div>
-            <div>涂釉陶瓷</div>
-            <ButtonText>
-              <i>迈步狮纹镶板</i>
-              ,新巴比伦时期,公元前605-562年,涂釉陶瓷。大都会艺术博物馆,Fletcher
-              Fund,1931 (31.13.1)。©大都会艺术博物馆版权所有{" "}
-            </ButtonText>
-          </div>
-        </TimeLineWallText>
-
-        <TimeLineLabelText
-          fade={0.01}
-          verticalOffset={"63vh"}
-          progressPosition={0.25}
-        >
-          <div
-            css={css`
-              font-weight: 300;
-              font-size: 18px;
-              width: 50%;
-              max-width: 600px;
-              padding: 8px 12px;
-              margin-right: 20px;
-              margin-left: auto;
-              background: rgba(0, 0, 0, 0.7);
-              border-radius: 2px;
-            `}
-          >
-            <div>
-              在巴比伦最重要的街道Processional
-              Way两侧,排列着一百多块狮子釉砖,迈步狮纹镶板便是其中之一。这条路穿过伊什塔尔城门(Ishtar
-              Gate),连接这座城市的宫殿及主要神庙。
-            </div>
-          </div>
-        </TimeLineLabelText>
-
-        <TimeLineLabelText
-          fade={0.01}
-          verticalOffset={"63vh"}
-          progressPosition={0.45}
-        >
-          <div
-            css={css`
-              font-weight: 300;
-              font-size: 18px;
-              width: 50%;
-              max-width: 600px;
-              padding: 8px 12px;
-              margin-right: 20px;
-              margin-left: auto;
-              background: rgba(0, 0, 0, 0.7);
-              border-radius: 2px;
-            `}
-          >
-            <div>
-              四维时代致力于人工智能三维数字化技术的.
-              研究与应用,以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。
-            </div>
-          </div>
-        </TimeLineLabelText>
-        <TimeLineTitleText
-          trigger={Action.scrubPin}
-          verticalOffset={"0vh"}
-          keyframes={[
-            Object.assign({}, Action.fadeUp, {
-              start: 0.72,
-              end: 0.77,
-            }),
-            Object.assign({}, Action.visible, {
-              start: 0.9,
-              end: 1,
-            }),
-          ]}
-        >
-          <div
-            css={css`
-              display: flex;
-              min-height: calc(var(--vh, 1vh) * 100);
-              justify-content: center;
-              position: relative;
-              z-index: 10;
-              margin-top: -40px;
-              padding: 100px 40px;
-              align-items: center;
-              direction: var(--text-direction);
-              text-align: var(--alignment);
-            `}
-          >
-            <div
-              css={css`
-                font-size: 25px;
-                font-weight: 300;
-                line-height: 2;
-                max-width: 750px;
-                margin: -20px auto 100px;
-              `}
-            >
-              这是盖蒂别墅博物馆在2021年与卢浮宫博物馆合作举办的关于古美索不达米亚的大型展览中展出的130多件展品之一。这些展品囊括了美索不达米亚城邦、文字及王国于约三千年的发展。
-            </div>
-          </div>
-        </TimeLineTitleText>
-      </Viewer>
-
-      <RichText height={1276}>
-        <div
-          css={css`
-            display: flex;
-            min-height: calc(var(--vh, 1vh) * 100);
-            justify-content: center;
-            position: relative;
-            z-index: 10;
-            padding: 100px 40px;
-            align-items: center;
-            direction: var(--text-direction);
-            text-align: var(--alignment);
-            flex-direction: column;
-            height: 1276px;
-            margin-top: -40vh;
-          `}
-        >
-          <TimeLineTransText>
-            <div
-              css={css`
-                width: 750px;
-                margin: 0 auto;
-              `}
-            >
-              <img
-                src={mapJpg}
-                css={css`
-                  width: 750px;
-                  height: 600px;
-                `}
-              />
-              <br />
-              <ButtonText>
-                <div>
-                  地图由FNSP根据原作改编,© FNSP版权所有。Sciences Po–Atelier de
-                  cartographie,2016年,由Martin
-                  Sauvage指导(法国国家科学研究中心,USR 3225,Nanterre)
-                </div>
-              </ButtonText>
-            </div>
-          </TimeLineTransText>
-          <TimeLineTransText>
-            <div
-              css={css`
-                font-size: 25px;
-                font-weight: 300;
-                line-height: 2;
-                max-width: 750px;
-                margin: 20px auto 100px;
-              `}
-            >
-              约公元前4000年,古美索不达米亚(即如今的伊拉克)是城市生活最早形成的发源地。美索不达米亚人在数学、科学及法律方面取得了进步;创作文学、建筑及艺术作品;以及发明了世界上第一个文字系统。
-            </div>
-          </TimeLineTransText>
-        </div>
-      </RichText>
-      <Viewer
-        height={"400vh"}
-        name="Vessel Steadicam"
-        path="vessel-steadi-10fps-873-rev1"
-        frameCount={64}
-        debug={debug}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      >
-        <TimeLineLabelText
-          verticalOffset={"70vh"}
-          duration={0.15}
-          fade={0.1}
-          progressPosition={0}
-        >
-          <div
-            css={css`
-              font-weight: 300;
-              font-size: 18px;
-              width: 50%;
-              max-width: 380px;
-              padding: 8px 12px;
-              margin-right: 20px;
-              margin-left: auto;
-              background: rgba(0, 0, 0, 0.7);
-              border-radius: 2px;
-            `}
-          >
-            美索不达米亚人认为,人乃为服务于神而造。
-          </div>
-        </TimeLineLabelText>
-      </Viewer>
-
-      <Viewer
-        height={"800vh"}
-        name="Vessel Render"
-        path="vessel-render-10fps-873-rev1"
-        frameCount={125}
-        debug={debug}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"400vh"}
-        name="Michaux Steadicam"
-        path="michaux-steadi-10fps-873-rev1"
-        frameCount={98}
-        debug={debug}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      ></Viewer>
-
-      <Viewer
-        height={"800vh"}
-        name="Michaux Render"
-        path="michaux-render-10fps-873-rev1"
-        frameCount={158}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"400vh"}
-        name="Gudea Architect Steadi"
-        path="gudea-architect-steadi-10fps-873-rev1"
-        frameCount={84}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-      <Viewer
-        height={"800vh"}
-        name="Gudea Architect Render"
-        path="gudea-architect-render-10fps-873-rev1"
-        frameCount={201}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"800vh"}
-        name="Dictionary Steadi"
-        path="dictionary-steadi-10fps-873-rev1"
-        frameCount={258}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"300vh"}
-        name="Dictionary Render"
-        path="dictionary-steadi-10fps-873-rev1"
-        frameCount={45}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"200h"}
-        name="Enheduanna Steadi"
-        path="enheduanna-steadi-10fps-873-rev1"
-        frameCount={40}
-        pause={{
-          1: 80,
-        }}
-        enterTween={{
-          from: {
-            autoAlpha: 0,
-            y: 500,
-          },
-        }}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"800vh"}
-        name="Cone Steadi"
-        path="cone-steadi-10fps-873-rev1"
-        frameCount={256}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"600vh"}
-        name="Cone Render"
-        path="cone-render-10fps-873-rev1"
-        frameCount={50}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"280vh"}
-        name="Gudea Steadi"
-        path="gudea-steadi-10fps-873-rev1"
-        frameCount={50}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"900vh"}
-        name="Gudea Render"
-        path="gudea-render-10fps-873-rev1"
-        frameCount={184}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-    </div>
-  );
-}
-
-export default App;

+ 6 - 3
src/App.jsx

@@ -22,6 +22,9 @@ import Section14 from "./view/Section14";
 import Section15 from "./view/Section15";
 import Section16 from "./view/Section16";
 import Section17 from "./view/Section17";
+
+import Closing from "./view/Closing";
+
 import { useControls } from "leva";
 
 gsap.registerPlugin(ScrollTrigger);
@@ -72,10 +75,9 @@ function App() {
     document.documentElement.style.overflow = "auto";
     var vConsole = new window.VConsole();
     if (debug) {
-      vConsole.showSwitch()
+      vConsole.showSwitch();
     } else {
-
-      vConsole.hideSwitch()
+      vConsole.hideSwitch();
     }
   });
   const props = {
@@ -104,6 +106,7 @@ function App() {
       <Section15 {...props} />
       <Section16 {...props} />
       <Section17 {...props} />
+      <Closing {...props} />
     </div>
   );
 }

+ 2 - 1
src/components/Viewer.jsx

@@ -9,7 +9,7 @@ import PropTypes from "prop-types";
 import { gsap, ScrollTrigger } from "gsap/all";
 import LazyLoad from "react-lazyload";
 import { css } from "@emotion/react";
-
+// import { Style } from "../style/viewer";
 export default function Viewer(props) {
   const lazyHeight = 0.01 * parseFloat(props.height) * window.innerHeight;
   // offset={1e4}
@@ -60,6 +60,7 @@ class ViewerInner extends Component {
     this.processingRef = createRef(null);
     this.preProcessingRef = createRef(null);
     this.processBarRef = createRef(null);
+
     this.sequence = [];
     this.loadedRenderPool = [];
     this.enterTimeline = false;

+ 948 - 0
src/heti.css

@@ -0,0 +1,948 @@
+*/@font-face {
+  font-family: "Heti Hei";
+  src: "Heti Hei SC", "Heti Hei TC", "Heti Hei JP", "Heti Hei KR";
+}
+@font-face {
+  font-family: "Heti Hei SC";
+  src: local("PingFang SC Regular"), local("Heiti SC Regular"),
+    local("Microsoft YaHei"), local("Source Han Sans CN Regular"),
+    local("Noto Sans CJK SC Regular"), local("WenQuanYi Micro Hei"),
+    local("Droid Sans Fallback");
+}
+@font-face {
+  font-family: "Heti Hei TC";
+  src: local("PingFang TC Regular"), local("Heiti TC Regular"),
+    local("Microsoft Jhenghei"), local("Source Han Sans HK Regular"),
+    local("Source Han Sans TW Regular"), local("Noto Sans CJK TC Regular"),
+    local("WenQuanYi Micro Hei"), local("Droid Sans Fallback");
+}
+@font-face {
+  font-family: "Heti Hei JP";
+  src: local("Hiragino Sans GB W3"), local("Source Han Sans JP Regular"),
+    local("Noto Sans CJK JP Regular"), local("Droid Sans Fallback");
+}
+@font-face {
+  font-family: "Heti Hei KR";
+  src: local("Source Han Sans KR Regular"), local("Noto Sans CJK KR Regular"),
+    local("Droid Sans Fallback");
+}
+@font-face {
+  font-family: "Heti Hei";
+  font-weight: 200;
+  src: "Heti Hei SC Light", "Heti Hei TC Light", "Heti Hei JP Light",
+    "Heti Hei KR Light";
+}
+@font-face {
+  font-family: "Heti Hei SC Light";
+  font-weight: 200;
+  src: local("PingFang SC Light"), local("Heiti SC Light"),
+    "Heti Hei SC Light Fallback", local("Source Han Sans CN Light"),
+    local("Noto Sans CJK SC Light");
+}
+@font-face {
+  font-family: "Heti Hei TC Light";
+  font-weight: 200;
+  src: local("PingFang TC Light"), local("Heiti TC Light"),
+    local("Microsoft Jhenghei Light"), local("Source Han Sans HK Light"),
+    local("Source Han Sans TW Light"), local("Noto Sans CJK TC Light");
+}
+@font-face {
+  font-family: "Heti Hei JP Light";
+  font-weight: 200;
+  src: local("Source Han Sans JP Light"), local("Noto Sans CJK JP Light");
+}
+@font-face {
+  font-family: "Heti Hei KR Light";
+  font-weight: 200;
+  src: local("Source Han Sans KR Light"), local("Noto Sans CJK KR Light");
+}
+@font-face {
+  font-family: "Heti Hei SC Light Fallback";
+  font-weight: 200;
+  src: local("Microsoft YaHei"), local("Droid Sans Fallback");
+}
+@font-face {
+  font-family: "Heti Hei";
+  font-weight: 600;
+  src: "Heti Hei SC Bold", "Heti Hei TC Bold", "Heti Hei JP Bold",
+    "Heti Hei KR Bold";
+}
+@font-face {
+  font-family: "Heti Hei SC Bold";
+  font-weight: 600;
+  src: local("PingFang SC Medium"), local("Heiti SC Medium"),
+    "Heti Hei SC Bold Fallback", local("Source Han Sans CN Bold"),
+    local("Noto Sans CJK SC Bold");
+}
+@font-face {
+  font-family: "Heti Hei TC Bold";
+  font-weight: 600;
+  src: local("PingFang TC Medium"), local("Heiti TC Medium"),
+    local("Microsoft Jhenghei Bold"), local("Source Han Sans HK Bold"),
+    local("Source Han Sans TW Bold"), local("Noto Sans CJK TC Bold");
+}
+@font-face {
+  font-family: "Heti Hei JP Bold";
+  font-weight: 600;
+  src: local("Hiragino Sans GB W6"), local("Source Han Sans JP Bold"),
+    local("Noto Sans CJK JP Bold");
+}
+@font-face {
+  font-family: "Heti Hei KR Bold";
+  font-weight: 600;
+  src: local("Source Han Sans KR Bold"), local("Noto Sans CJK KR Bold");
+}
+@font-face {
+  font-family: "Heti Hei SC Bold Fallback";
+  font-weight: 600;
+  src: local("Microsoft YaHei"), local("Droid Sans Fallback");
+}
+@font-face {
+  font-family: "Heti Hei Black";
+  font-weight: 800;
+  src: "Heti Hei SC Black", "Heti Hei TC Black", "Heti Hei JP Black",
+    "Heti Hei KR Black";
+}
+@font-face {
+  font-family: "Heti Hei SC Black";
+  font-weight: 800;
+  src: local("Lantinghei SC Heavy"), local("PingFang SC Semibold"),
+    local("Heiti SC Medium"), "Heti Hei SC Black Fallback",
+    local("Source Han Sans CN Heavy"), local("Noto Sans CJK SC Heavy");
+}
+@font-face {
+  font-family: "Heti Hei TC Black";
+  font-weight: 800;
+  src: local("Lantinghei TC Heavy"), local("PingFang TC Semibold"),
+    local("Heiti TC Medium"), local("Microsoft Jhenghei Bold"),
+    local("Source Han Sans HK Heavy"), local("Source Han Sans TW Heavy"),
+    local("Noto Sans CJK TC Heavy");
+}
+@font-face {
+  font-family: "Heti Hei JP Black";
+  font-weight: 800;
+  src: local("Hiragino Sans GB W6"), local("Source Han Sans JP Heavy"),
+    local("Noto Sans CJK JP Heavy");
+}
+@font-face {
+  font-family: "Heti Hei KR Black";
+  font-weight: 800;
+  src: local("Source Han Sans KR Heavy"), local("Noto Sans CJK KR Heavy");
+}
+@font-face {
+  font-family: "Heti Hei SC Black Fallback";
+  font-weight: 800;
+  src: local("Microsoft YaHei"), local("Droid Sans Fallback");
+}
+@font-face {
+  font-family: "Heti Song";
+  src: local("Songti SC Regular"), local("Songti TC Regular"), local("SimSun");
+}
+@font-face {
+  font-family: "Heti Song";
+  font-weight: 200;
+  src: local("Songti SC Light"), local("Songti TC Light"),
+    "Heti Song Light Fallback";
+}
+@font-face {
+  font-family: "Heti Song Light Fallback";
+  font-weight: 200;
+  src: local("SimSun");
+}
+@font-face {
+  font-family: "Heti Song";
+  font-weight: 600;
+  src: local("Songti SC Bold"), local("Songti TC Bold"),
+    "Heti Song Bold Fallback";
+}
+@font-face {
+  font-family: "Heti Song Bold Fallback";
+  font-weight: 600;
+  src: local("SimSun");
+}
+@font-face {
+  font-family: "Heti Song Black";
+  font-weight: 800;
+  src: local("Songti SC Black"), local("SimSun");
+}
+@font-face {
+  font-family: "Heti Kai";
+  src: local("Kaiti SC Regular"), local("Kaiti TC Regular"), local("STKaiti"),
+    local("Kaiti"), local("BiauKai");
+}
+@font-face {
+  font-family: "Heti Kai";
+  font-weight: 600;
+  src: local("Kaiti SC Bold"), local("Kaiti TC Bold");
+}
+@font-face {
+  font-family: "Heti Kai Bold Fallback";
+  font-weight: 600;
+  src: local("STKaiti"), local("Kaiti") local("BiauKai");
+}
+@font-face {
+  font-family: "Heti Kai Black";
+  font-weight: 800;
+  src: local("Kaiti SC Black"), local("Kaiti TC Black"), local("STKaiti"),
+    local("Kaiti");
+}
+.heti {
+  max-width: 42em;
+  font-size: 16px;
+  font-weight: 400;
+  -webkit-font-smoothing: subpixel-antialiased;
+  line-height: 1.5;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  hyphens: auto;
+  letter-spacing: 0.02em;
+}
+.heti::before,
+.heti::after {
+  content: "";
+  display: table;
+}
+.heti::after {
+  clear: both;
+}
+.heti > *:first-child,
+.heti section > *:first-child,
+.heti td > *:first-child {
+  margin-block-start: 0 !important;
+}
+.heti > *:last-child,
+.heti section > *:last-child,
+.heti td > *:last-child {
+  margin-block-end: 0 !important;
+}
+.heti blockquote {
+  margin-block-start: 12px;
+  margin-block-end: 24px;
+  margin-inline-start: 32px;
+  margin-inline-end: 32px;
+  padding-block-start: 12px;
+  padding-block-end: 12px;
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+  background-color: rgba(0, 0, 0, 0.054);
+}
+@media (prefers-color-scheme: dark) {
+  .heti blockquote {
+    background-color: rgba(255, 255, 255, 0.054);
+  }
+}
+.heti figure {
+  display: block;
+  text-align: center;
+}
+.heti figure > img {
+  display: block;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+}
+.heti hr {
+  width: 30%;
+  height: 1px;
+  margin-block-start: 48px;
+  margin-block-end: 47px;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  border: 0;
+  background-color: #ccc;
+}
+@media (prefers-color-scheme: dark) {
+  .heti hr {
+    background-color: #404040;
+  }
+}
+.heti p {
+  margin-block-start: 12px;
+  margin-block-end: 24px;
+  text-align: justify;
+}
+.heti p:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti p:not(:lang(zh)) {
+  text-align: start;
+}
+.heti pre {
+  margin-block-start: 12px;
+  margin-block-end: 12px;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block-start: 12px;
+  padding-block-end: 12px;
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+  overflow: auto;
+  font-family: "SFMono-Regular", consolas, "Liberation Mono", menlo, courier,
+    monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  white-space: pre;
+  word-wrap: normal;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.054);
+}
+@media (prefers-color-scheme: dark) {
+  .heti pre {
+    background-color: rgba(255, 255, 255, 0.054);
+  }
+}
+.heti pre code {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background-color: rgba(0, 0, 0, 0);
+  color: inherit;
+}
+.heti:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti:not(:lang(zh)) {
+  letter-spacing: 0;
+}
+.heti a,
+.heti abbr,
+.heti code,
+.heti heti-spacing,
+.heti [lang="en-US"] {
+  letter-spacing: normal;
+}
+.heti h1,
+.heti h2,
+.heti h3,
+.heti h4,
+.heti h5,
+.heti h6 {
+  position: relative;
+  margin: 0;
+  margin-block-start: 24px;
+  margin-block-end: 12px;
+  font-weight: 600;
+}
+.heti h1 {
+  margin-block-end: 24px;
+  font-size: 32px;
+  line-height: 48px;
+}
+.heti h2 {
+  font-size: 24px;
+  line-height: 36px;
+}
+.heti h3 {
+  font-size: 20px;
+  line-height: 36px;
+}
+.heti h4 {
+  font-size: 18px;
+  line-height: 24px;
+}
+.heti h5 {
+  font-size: 16px;
+  line-height: 24px;
+}
+.heti h6 {
+  font-size: 14px;
+  line-height: 24px;
+}
+.heti h1,
+.heti h2,
+.heti h3 {
+  letter-spacing: 0.05em;
+}
+.heti h1:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti h1:not(:lang(zh)),
+.heti h2:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti h2:not(:lang(zh)),
+.heti h3:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti h3:not(:lang(zh)) {
+  letter-spacing: 0;
+}
+.heti h1 + h2,
+.heti h2 + h3,
+.heti h3 + h4,
+.heti h4 + h5,
+.heti h5 + h6 {
+  margin-block-start: 12px;
+}
+.heti ul,
+.heti ol,
+.heti dl {
+  margin-block-start: 12px;
+  margin-block-end: 24px;
+}
+.heti ul,
+.heti ol {
+  padding-inline-start: 32px;
+}
+.heti ul ul,
+.heti ul ol,
+.heti ol ul,
+.heti ol ol {
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+.heti ul {
+  list-style-type: disc;
+}
+.heti ol {
+  list-style-type: decimal;
+}
+.heti ul ul,
+.heti ol ul {
+  list-style-type: circle;
+}
+.heti ul ul ul,
+.heti ul ol ul,
+.heti ol ul ul,
+.heti ol ol ul {
+  list-style-type: square;
+}
+.heti li {
+  list-style-type: unset;
+}
+.heti table {
+  box-sizing: border-box;
+  table-layout: fixed;
+  margin-block-start: 12px;
+  margin-block-end: 24px;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  border-collapse: collapse;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #ccc;
+  word-break: break-word;
+}
+@media (prefers-color-scheme: dark) {
+  .heti table {
+    border-color: #404040;
+  }
+}
+.heti th,
+.heti td {
+  padding-block-start: 6px;
+  padding-block-end: 6px;
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #ccc;
+}
+@media (prefers-color-scheme: dark) {
+  .heti th,
+  .heti td {
+    border-color: #404040;
+  }
+}
+.heti caption {
+  caption-side: bottom;
+  margin-block-start: 2px;
+  margin-block-end: -4px;
+  font-size: 14px;
+  line-height: 24px;
+}
+.heti a {
+  text-decoration: none;
+}
+.heti a:hover {
+  padding-block-end: 1px;
+  border-block-end: 1px solid currentColor;
+  text-decoration: none;
+}
+.heti abbr[title] {
+  padding-block-end: 1px;
+  border-block-end: 1px dotted;
+  text-decoration: none;
+  cursor: help;
+}
+.heti b,
+.heti strong {
+  font-weight: 600;
+}
+.heti code {
+  margin-inline-start: 0.25em;
+  margin-inline-end: 0.25em;
+  font-family: "SFMono-Regular", consolas, "Liberation Mono", menlo, courier,
+    monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 0.875em;
+}
+.heti dfn {
+  font-weight: 600;
+}
+.heti dfn:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti dfn:not(:lang(zh)) {
+  font-weight: 400;
+}
+.heti em {
+  font-weight: 600;
+}
+.heti figcaption {
+  display: inline-block;
+  vertical-align: top;
+  font-size: 14px;
+  text-align: start;
+}
+.heti i {
+  font-style: italic;
+}
+.heti ins,
+.heti u {
+  padding-block-end: 1px;
+  border-block-end: 1px solid;
+  text-decoration: none;
+}
+.heti mark {
+  padding-block-start: 2px;
+  padding-block-end: 2px;
+  padding-inline-start: 1px;
+  padding-inline-end: 1px;
+  margin-inline-start: 1px;
+  margin-inline-end: 1px;
+  background-color: rgba(255, 247, 0, 0.88);
+  color: inherit;
+}
+@media (prefers-color-scheme: dark) {
+  .heti mark {
+    background-color: rgba(77, 74, 0, 0.88);
+  }
+}
+.heti q {
+  quotes: "「" "」" "『" "』";
+}
+.heti q:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti q:not(:lang(zh)) {
+  quotes: initial;
+  quotes: auto;
+}
+.heti rt {
+  font-size: 0.875em;
+  font-weight: 400;
+}
+.heti small {
+  font-size: 0.875em;
+}
+.heti strong {
+  font-weight: 600;
+}
+.heti sub,
+.heti sup {
+  position: relative;
+  margin-inline-start: 0.25em;
+  margin-inline-end: 0.25em;
+  font-size: 0.75em;
+  font-family: "Helvetica Neue", helvetica, arial, "Heti Hei", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-style: normal;
+  line-height: 1;
+  vertical-align: baseline;
+}
+.heti sub {
+  bottom: -0.25em;
+}
+.heti sup {
+  top: -0.5em;
+}
+.heti sup:target,
+.heti sup a:target {
+  background-color: #dbedff;
+}
+@media (prefers-color-scheme: dark) {
+  .heti sup:target,
+  .heti sup a:target {
+    background-color: #3a6188;
+  }
+}
+.heti summary {
+  padding-inline-start: 1em;
+  outline: 0;
+  cursor: pointer;
+}
+.heti summary::-webkit-details-marker {
+  width: 0.6em;
+  margin-inline-end: 0.4em;
+}
+.heti u[title] {
+  cursor: help;
+  border-block-end-width: 3px;
+  border-block-end-style: double;
+  border-block-end-color: rgba(0, 0, 0, 0.54);
+}
+@media (prefers-color-scheme: dark) {
+  .heti u[title] {
+    border-block-end-color: rgba(255, 255, 255, 0.54);
+  }
+}
+.heti address,
+.heti cite,
+.heti dfn,
+.heti dt,
+.heti em {
+  font-style: normal;
+}
+.heti address:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti address:not(:lang(zh)),
+.heti cite:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti cite:not(:lang(zh)),
+.heti dfn:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti dfn:not(:lang(zh)),
+.heti dt:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti dt:not(:lang(zh)),
+.heti em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti em:not(:lang(zh)) {
+  font-style: italic;
+}
+.heti abbr[title],
+.heti del,
+.heti ins,
+.heti s,
+.heti u {
+  margin-inline-start: 1px;
+  margin-inline-end: 1px;
+}
+.heti,
+.heti--sans {
+  font-family: "Helvetica Neue", helvetica, arial, "Heti Hei", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.heti--serif {
+  font-family: "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.heti--classic {
+  font-family: "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.heti--classic h1,
+.heti--classic h2,
+.heti--classic h3,
+.heti--classic h4,
+.heti--classic h5,
+.heti--classic h6 {
+  font-family: "Times New Roman", times, "Heti Kai Black", serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-weight: 800;
+}
+.heti--classic blockquote,
+.heti--classic cite,
+.heti--classic q {
+  font-family: "Times New Roman", times, "Heti Kai", serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.heti--classic figcaption,
+.heti--classic caption,
+.heti--classic th {
+  font-family: "Helvetica Neue", helvetica, arial, "Heti Hei", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.heti--hei {
+  font-family: "Helvetica Neue", helvetica, arial, "Heti Hei", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.heti--song {
+  font-family: "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.heti--kai {
+  font-family: "Times New Roman", times, "Heti Kai", serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.heti--columns-1,
+.heti--columns-2,
+.heti--columns-3,
+.heti--columns-4,
+.heti--columns-16em,
+.heti--columns-20em,
+.heti--columns-24em,
+.heti--columns-28em,
+.heti--columns-32em,
+.heti--columns-36em,
+.heti--columns-40em,
+.heti--columns-44em,
+.heti--columns-48em,
+.heti comma {
+  max-width: none;
+  column-gap: 2em;
+}
+.heti--columns-1 p,
+.heti--columns-2 p,
+.heti--columns-3 p,
+.heti--columns-4 p,
+.heti--columns-16em p,
+.heti--columns-20em p,
+.heti--columns-24em p,
+.heti--columns-28em p,
+.heti--columns-32em p,
+.heti--columns-36em p,
+.heti--columns-40em p,
+.heti--columns-44em p,
+.heti--columns-48em p,
+.heti comma p {
+  margin-block-start: 6px;
+  margin-block-end: 12px;
+  text-indent: 2em;
+}
+.heti--columns-1 {
+  column-count: 1;
+}
+.heti--columns-2 {
+  column-count: 2;
+}
+.heti--columns-3 {
+  column-count: 3;
+}
+.heti--columns-4 {
+  column-count: 4;
+}
+.heti--columns-16em {
+  column-width: 16em;
+}
+.heti--columns-20em {
+  column-width: 20em;
+}
+.heti--columns-24em {
+  column-width: 24em;
+}
+.heti--columns-28em {
+  column-width: 28em;
+}
+.heti--columns-32em {
+  column-width: 32em;
+}
+.heti--columns-36em {
+  column-width: 36em;
+}
+.heti--columns-40em {
+  column-width: 40em;
+}
+.heti--columns-44em {
+  column-width: 44em;
+}
+.heti--columns-48em {
+  column-width: 48em;
+}
+.heti--vertical {
+  max-width: none;
+  max-height: 42em;
+  writing-mode: vertical-rl;
+  letter-spacing: 0.125em;
+}
+.heti--vertical h1,
+.heti--vertical h2,
+.heti--vertical h3,
+.heti--vertical h4,
+.heti--vertical h5,
+.heti--vertical h6 {
+  text-align: start;
+}
+.heti--vertical q {
+  quotes: "「" "」" "『" "』";
+}
+.heti--ancient,
+.heti--poetry {
+  font-family: "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.heti--ancient h1,
+.heti--ancient h2,
+.heti--ancient h3,
+.heti--ancient h4,
+.heti--ancient h5,
+.heti--ancient h6,
+.heti--poetry h1,
+.heti--poetry h2,
+.heti--poetry h3,
+.heti--poetry h4,
+.heti--poetry h5,
+.heti--poetry h6 {
+  font-family: "Times New Roman", times, "Heti Kai Black", serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-weight: 800;
+  text-align: center;
+}
+.heti--ancient h1 .heti-meta,
+.heti--ancient h2 .heti-meta,
+.heti--ancient h3 .heti-meta,
+.heti--ancient h4 .heti-meta,
+.heti--ancient h5 .heti-meta,
+.heti--ancient h6 .heti-meta,
+.heti--poetry h1 .heti-meta,
+.heti--poetry h2 .heti-meta,
+.heti--poetry h3 .heti-meta,
+.heti--poetry h4 .heti-meta,
+.heti--poetry h5 .heti-meta,
+.heti--poetry h6 .heti-meta {
+  font-weight: 400;
+}
+@media screen and (min-width: 640px) {
+  .heti--ancient h1 .heti-meta,
+  .heti--ancient h2 .heti-meta,
+  .heti--ancient h3 .heti-meta,
+  .heti--ancient h4 .heti-meta,
+  .heti--ancient h5 .heti-meta,
+  .heti--ancient h6 .heti-meta,
+  .heti--poetry h1 .heti-meta,
+  .heti--poetry h2 .heti-meta,
+  .heti--poetry h3 .heti-meta,
+  .heti--poetry h4 .heti-meta,
+  .heti--poetry h5 .heti-meta,
+  .heti--poetry h6 .heti-meta {
+    position: absolute;
+    line-height: inherit;
+    text-indent: 0;
+    display: inline;
+    margin-block-start: 4px;
+    margin-inline-start: 8px;
+  }
+}
+.heti--ancient .heti-meta,
+.heti--poetry .heti-meta {
+  line-height: 24px;
+  text-align: center;
+  text-indent: 0;
+}
+.heti--ancient p {
+  text-indent: 2em;
+}
+.heti--poetry p {
+  text-align: center;
+  text-indent: 0;
+}
+.heti--annotation p {
+  margin-block-start: 0;
+  margin-block-end: 0;
+  line-height: 2.25;
+  text-indent: 2em;
+}
+.heti--annotation em {
+  -webkit-text-emphasis: filled circle;
+  -webkit-text-emphasis-position: under;
+  text-emphasis: filled circle;
+  text-emphasis-position: under right;
+  font-weight: 400;
+}
+.heti--annotation em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti--annotation em:not(:lang(zh)) {
+  -webkit-text-emphasis: none;
+  text-emphasis: none;
+}
+.heti--annotation .heti-meta {
+  margin-block-start: 12px;
+  margin-block-end: 24px;
+}
+.heti .heti-meta {
+  display: block;
+  text-indent: 0;
+}
+.heti .heti-verse {
+  text-align: center;
+  text-indent: 0;
+}
+.heti .heti-large {
+  font-size: 18px;
+  line-height: 24px;
+}
+.heti .heti-x-large {
+  font-size: 20px;
+  line-height: 30px;
+  letter-spacing: 0.05em;
+}
+.heti .heti-small {
+  font-size: 14px;
+  line-height: 24px;
+}
+.heti .heti-x-small {
+  font-size: 12px;
+  line-height: 18px;
+}
+.heti .heti-list-latin {
+  list-style-type: upper-latin;
+}
+.heti .heti-list-latin ol {
+  list-style-type: lower-roman;
+}
+.heti .heti-list-latin ol ol {
+  list-style-type: lower-latin;
+}
+.heti .heti-list-han {
+  list-style-type: cjk-ideographic;
+}
+.heti .heti-list-han ol {
+  list-style-type: decimal;
+}
+.heti .heti-list-han ol ol {
+  list-style-type: decimal-leading-zero;
+}
+.heti .heti-fn {
+  margin-block-start: 59px;
+  border-block-start: 1px solid;
+  border-block-start-color: #ccc;
+  font-size: 14px;
+  font-family: "Helvetica Neue", helvetica, arial, "Heti Hei", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  line-height: 24px;
+}
+@media (prefers-color-scheme: dark) {
+  .heti .heti-fn {
+    border-block-start-color: #404040;
+  }
+}
+.heti .heti-fn ol {
+  margin-block-start: 12px;
+  margin-block-end: 0;
+}
+.heti .heti-fn li:target {
+  background-color: #dbedff;
+}
+@media (prefers-color-scheme: dark) {
+  .heti .heti-fn li:target {
+    background-color: #3a6188;
+  }
+}
+.heti .heti-hang {
+  position: absolute;
+  line-height: inherit;
+  text-indent: 0;
+}
+.heti .heti-em {
+  -webkit-text-emphasis: filled circle;
+  -webkit-text-emphasis-position: under;
+  text-emphasis: filled circle;
+  text-emphasis-position: under right;
+}
+.heti .heti-em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
+.heti .heti-em:not(:lang(zh)) {
+  -webkit-text-emphasis: none;
+  text-emphasis: none;
+}
+.heti .heti-ruby--inline {
+  display: inline-flex;
+  flex-direction: column-reverse;
+  height: 1.5em;
+  vertical-align: top;
+}
+.heti .heti-ruby--inline rt {
+  display: inline;
+  margin-bottom: -0.25em;
+  line-height: 1;
+  text-align: center;
+}
+.heti heti-spacing {
+  display: inline;
+}
+.heti heti-spacing + sup,
+.heti heti-spacing + sub {
+  margin-inline-start: 0;
+}
+.heti .heti-spacing-start {
+  margin-inline-end: 0.25em;
+}
+.heti .heti-spacing-end {
+  margin-inline-start: 0.25em;
+}
+.heti heti-adjacent {
+  display: inline;
+}
+.heti .heti-adjacent-half {
+  margin-inline-end: -0.5em;
+}
+.heti .heti-adjacent-quarter {
+  margin-inline-end: -0.25em;
+}

+ 1 - 1
src/index.css

@@ -10,7 +10,7 @@
   font-synthesis: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  /* color-scheme: light dark; */
+  color-scheme: light dark;
   /* font-synthesis: none;
   text-rendering: optimizeLegibility;
 

+ 1 - 1
src/main.jsx

@@ -2,7 +2,7 @@
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
 import "./index.css";
-
+import "./heti.css";
 ReactDOM.createRoot(document.getElementById("root")).render(
   // <React.StrictMode>
     <App />

+ 13 - 0
src/style/viewer.jsx

@@ -0,0 +1,13 @@
+import { css } from "@emotion/react";
+
+export const Style = {
+  loadingWrapper: css`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100%;
+    background-color: rgba(51, 51, 68, 0.6);
+    z-index: 100;
+  `,
+};

+ 54 - 0
src/view/Closing.jsx

@@ -0,0 +1,54 @@
+import LazyLoad from "react-lazyload";
+import RichText from "../components/RichText";
+
+import { TimeLineTransText } from "../components/TimeLineText";
+import { css } from "@emotion/react";
+
+export default function Closing() {
+  // eslint-disable-next-line react/prop-types
+
+  return (
+    <LazyLoad height={1325}>
+      <div
+        css={css`
+          width: 100%;
+          display: flex;
+          min-height: 1325px;
+          text-align: center;
+          justify-content: center;
+          flex-direction: column;
+        `}
+      >
+        <TimeLineTransText>
+          <div
+            css={css`
+              font-size: 30px;
+              padding: 80px;
+            `}
+          >
+            中华文明持续到现在,从不中断,它们深深影响了其他文化的世界观、科学及文学。
+          </div>
+        </TimeLineTransText>
+        <TimeLineTransText>
+          <div
+            
+            css={css`
+              font-size: 25px;
+              width: 225px;
+              margin: 0 auto;
+            `}
+          >
+            <p>南有喬木,不可休息</p>
+            <p>漢有游女,不可求思</p>
+            <p>漢之廣矣,不可泳思</p>
+            <p>江之永矣,不可方思</p>
+
+            <p style={{textAlign:'center'}}>结束</p>
+          </div>
+        </TimeLineTransText>
+
+
+      </div>
+    </LazyLoad>
+  );
+}

+ 27 - 3
src/view/Section17.jsx

@@ -1,7 +1,11 @@
 import { Action } from "../action";
 import Viewer from "../components/Viewer";
+import { Style } from "../style/section";
 
-import { TimeLineLabelText } from "../components/TimeLineText";
+import {
+  TimeLineTitleText,
+  TimeLineLabelText,
+} from "../components/TimeLineText";
 
 export default function Section4(props) {
   // eslint-disable-next-line react/prop-types
@@ -16,11 +20,31 @@ export default function Section4(props) {
       enterTween={Action.crossFadeIn}
       exitTween={Action.pinForExit}
     >
+      <TimeLineTitleText
+        trigger={Action.scrubPin}
+        verticalOffset={"33vh"}
+        duration={0.5}
+        keyframes={[
+          Object.assign({}, Action.visible, {
+            start: 0,
+            end: 0,
+          }),
+          Object.assign({}, Action.fadeDown, {
+            start: 0.22,
+            end: 0.32,
+          }),
+        ]}
+      >
+        <div css={Style.StartTitleStyle}>
+          <div className="title">测试文案: 植入南京文案RSY片段</div>
+        </div>
+      </TimeLineTitleText>
+
       <TimeLineLabelText
         fade={0.01}
         verticalOffset={"23vh"}
-        duration={0.3}
-        progressPosition={0.09}
+        duration={0.5}
+        progressPosition={0.39}
       >
         <div>
           测试文案: 四维时代致力于人工智能三维数字化技术的.

+ 54 - 11
vite.config.js

@@ -1,14 +1,57 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv, splitVendorChunkPlugin } from "vite";
 import react from "@vitejs/plugin-react";
+import obfuscatorPlugin from "vite-plugin-javascript-obfuscator";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    react({
-      jsxImportSource: "@emotion/react",
-      babel: {
-        plugins: ["@emotion/babel-plugin"],
-      },
-    }),
-  ],
-});
+export default ({ mode }) =>
+  defineConfig({
+    // eslint-disable-next-line no-undef
+    base: loadEnv(mode, process.cwd()).VITE_PUBLIC_DIR,
+    server: {
+      port: 3888,
+    },
+    plugins: [
+      react({
+        jsxImportSource: "@emotion/react",
+        babel: {
+          plugins: ["@emotion/babel-plugin"],
+        },
+      }),
+      splitVendorChunkPlugin(),
+      obfuscatorPlugin({
+        apply: "build",
+        options: {
+          debugProtection: false,
+          compact: true,
+          controlFlowFlattening: true,
+          controlFlowFlatteningThreshold: 0.75,
+          deadCodeInjection: true,
+          deadCodeInjectionThreshold: 0.4,
+          debugProtectionInterval: 0,
+          disableConsoleOutput: true,
+          identifierNamesGenerator: "hexadecimal",
+          log: false,
+          numbersToExpressions: true,
+          renameGlobals: false,
+          selfDefending: true,
+          simplify: true,
+          splitStrings: true,
+          splitStringsChunkLength: 10,
+          stringArray: true,
+          stringArrayCallsTransform: true,
+          stringArrayCallsTransformThreshold: 0.75,
+          stringArrayEncoding: ["base64"],
+          stringArrayIndexShift: true,
+          stringArrayRotate: true,
+          stringArrayShuffle: true,
+          stringArrayWrappersCount: 2,
+          stringArrayWrappersChainedCalls: true,
+          stringArrayWrappersParametersMaxCount: 4,
+          stringArrayWrappersType: "function",
+          stringArrayThreshold: 0.75,
+          transformObjectKeys: true,
+          unicodeEscapeSequence: false,
+        },
+      }),
+    ],
+  });