build: minify final mjs

.drone.yml

@@ -27,7 +27,9 @@ steps:
       NETLIFY_API_KEY:
         from_secret: NETLIFY_API_KEY
     commands:
-      # - git config --global --add safe.directory "/drone/src"
-      - python3 -m zipfile -c um-react.zip dist/.
+      - |
+        python3 -m zipfile -c um-react.zip dist/.
+        cp um-react.zip dist/release-"${DRONE_COMMIT_SHA}".zip
+        python3 -m zipfile -c um-react-site.zip dist/.
       # - ./scripts/publish.sh
       - ./scripts/deploy.sh

.gitignore

@@ -27,3 +27,8 @@ dist-ssr
 # Files created when running "drone exec" locally
 /.pnpm-store/
 /*.zip
+
+/um-react-wry-*
+/um-react*.exe
+
+/win64/

README.MD

@@ -73,12 +73,25 @@
 
 满足上述条件后发起 Pull Request，仓库管理员审阅后将合并到主分支。
 
+## 相关项目
+
+- [Unlock Music (Web)](https://git.unlock-music.dev/um/web) - 原始项目
+- [Unlock Music (Cli)](https://git.unlock-music.dev/um/cli) - 命令行批量处理版
+- [um-react (Electron 前端)](https://github.com/CarlGao4/um-react-electron) - 使用 Electron 框架封装的本地可执行文件。
+  - [GitHub 下载](https://github.com/CarlGao4/um-react-electron/releases/latest) | [仓库镜像](https://git.unlock-music.dev/CarlGao4/um-react-electron)
+- [um-react-wry](https://git.unlock-music.dev/um/um-react-wry) - 使用 WRY 框架封装的 Win64 单文件 (需要[安装 Edge WebView2 运行时][webview2_redist]，Win10+ 操作系统自带)
+  - [本地下载](https://git.unlock-music.dev/um/um-react/releases/latest) | 寻找文件名为 `um-react-win64-` 开头的附件
+
+[webview2_redist]: https://go.microsoft.com/fwlink/p/?LinkId=2124703
+
+有新的项目提交？欢迎[提交 issue][project-issues]，请带上项目名称和链接。
+
 ## TODO
 
 - 待定
   - [ ] 各类算法 [追踪 `crypto` 标签](https://git.unlock-music.dev/um/um-react/issues?labels=67)
-  - [ ] #7 简易元数据编辑器
 - 完成
+  - [x] #7 ~~简易元数据编辑器~~ 放弃
   - [x] #8 ~~添加单元测试~~ 框架加上了，以后慢慢添加更多测试即可。
   - [x] #2 解密内容探测 (解密过程)
   - [x] #6 文件拖放 (利用 `react-dropzone`?)

docs/faq_zh-hans.md

@@ -63,6 +63,8 @@
 
 如果希望不破坏系统完整性，你可以考虑使用模拟器。
 
+※ **注意**：根据应用厂商的风控策略，使用模拟器登录的账号**有可能会被封锁**；使用前请自行评估风险。
+
 目前常见的带有 root 特权支持的的安卓模拟器方案，分别是雷电模拟器（※ 官方版有内置广告）和微软在 Windows 11 开始支援的适用于 Android™ 的 Windows 子系统 (WSA)。
 
 - WSA 可以参考 [MagiskOnWSALocal](https://github.com/LSPosed/MagiskOnWSALocal) 的说明操作。

docs/getting-started.zh.md

@@ -33,3 +33,31 @@ pnpm build
 如果需要预览构建版本，运行 `pnpm preview` 然后打开[项目预览页面][vite-preview-url]即可。
 
 [vite-preview-url]: http://localhost:4173/
+
+## 打包 `.zip`
+
+建议在 Linux 环境下执行，可参考 `.drone.yml` CI 文件。
+
+1. 确保上述的构建步骤已完成。
+2. 确保 `python3` 已安装。
+3. 执行下述代码
+   ```sh
+   python3 -m zipfile -c um-react.zip dist/.
+   ```
+
+## 打包 win64 单文件
+
+利用 Windows 系统自带的 [Edge WebView2 组件](https://learn.microsoft.com/zh-cn/microsoft-edge/webview2/)
+和 [wry](https://github.com/tauri-apps/wry) 进行一个单文件的打包。
+
+大部分 Windows 10 或以上版本的操作系统已经集成了 WebView2 运行时。若无法正常启动，请[下载并安装 Edge WebView2 运行时](https://go.microsoft.com/fwlink/p/?LinkId=2124703)。
+
+其它系统兼容性未知。
+
+1. 确保你现在在 `linux-amd64` 环境下。
+2. 确保上述的 `um-react.zip` 构建已完成。
+3. 执行下述代码
+   ```sh
+   ./scripts/make-win64.sh
+   ```
+4. 等待提示 `[Build OK]` 即可。

package.json

@@ -1,11 +1,12 @@
 {
   "name": "um-react",
   "private": true,
-  "version": "0.2.5",
+  "version": "0.2.7",
   "type": "module",
   "scripts": {
     "start": "vite",
-    "build": "tsc -p tsconfig.prod.json && vite build",
+    "build": "tsc -p tsconfig.prod.json && vite build && pnpm build:finalize",
+    "build:finalize": "node scripts/write-version.mjs && node scripts/minify-mjs.mjs",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier -w .",
     "test": "vitest run",
@@ -59,6 +60,7 @@
     "jsdom": "^23.0.1",
     "lint-staged": "^15.2.0",
     "prettier": "^3.1.1",
+    "terser": "^5.27.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.10",
     "vite-plugin-pwa": "^0.17.4",

pnpm-lock.yaml

@@ -142,12 +142,15 @@ devDependencies:
   prettier:
     specifier: ^3.1.1
     version: 3.1.1
+  terser:
+    specifier: ^5.27.0
+    version: 5.27.0
   typescript:
     specifier: ^5.3.3
     version: 5.3.3
   vite:
     specifier: ^5.0.10
-    version: 5.0.10(@types/node@20.10.5)(sass@1.69.5)
+    version: 5.0.10(@types/node@20.10.5)(sass@1.69.5)(terser@5.27.0)
   vite-plugin-pwa:
     specifier: ^0.17.4
     version: 0.17.4(vite@5.0.10)(workbox-build@7.0.0)(workbox-window@7.0.0)
@@ -159,7 +162,7 @@ devDependencies:
     version: 3.3.0(vite@5.0.10)
   vitest:
     specifier: ^1.1.0
-    version: 1.1.0(@types/node@20.10.5)(@vitest/ui@1.1.0)(jsdom@23.0.1)(sass@1.69.5)
+    version: 1.1.0(@types/node@20.10.5)(@vitest/ui@1.1.0)(jsdom@23.0.1)(sass@1.69.5)(terser@5.27.0)
   workbox-window:
     specifier: ^7.0.0
     version: 7.0.0
@@ -3362,7 +3365,7 @@ packages:
       dom-accessibility-api: 0.5.16
       lodash: 4.17.21
       redent: 3.0.0
-      vitest: 1.1.0(@types/node@20.10.5)(@vitest/ui@1.1.0)(jsdom@23.0.1)(sass@1.69.5)
+      vitest: 1.1.0(@types/node@20.10.5)(@vitest/ui@1.1.0)(jsdom@23.0.1)(sass@1.69.5)(terser@5.27.0)
     dev: true
 
   /@testing-library/react@14.1.2(react-dom@18.2.0)(react@18.2.0):
@@ -3667,7 +3670,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.6)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.0
-      vite: 5.0.10(@types/node@20.10.5)(sass@1.69.5)
+      vite: 5.0.10(@types/node@20.10.5)(sass@1.69.5)(terser@5.27.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3690,7 +3693,7 @@ packages:
       std-env: 3.6.0
       test-exclude: 6.0.0
       v8-to-istanbul: 9.2.0
-      vitest: 1.1.0(@types/node@20.10.5)(@vitest/ui@1.1.0)(jsdom@23.0.1)(sass@1.69.5)
+      vitest: 1.1.0(@types/node@20.10.5)(@vitest/ui@1.1.0)(jsdom@23.0.1)(sass@1.69.5)(terser@5.27.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3737,7 +3740,7 @@ packages:
       pathe: 1.1.1
       picocolors: 1.0.0
       sirv: 2.0.4
-      vitest: 1.1.0(@types/node@20.10.5)(@vitest/ui@1.1.0)(jsdom@23.0.1)(sass@1.69.5)
+      vitest: 1.1.0(@types/node@20.10.5)(@vitest/ui@1.1.0)(jsdom@23.0.1)(sass@1.69.5)(terser@5.27.0)
     dev: true
 
   /@vitest/utils@1.1.0:
@@ -6765,6 +6768,17 @@ packages:
       source-map-support: 0.5.21
     dev: true
 
+  /terser@5.27.0:
+    resolution: {integrity: sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/source-map': 0.3.5
+      acorn: 8.11.2
+      commander: 2.20.3
+      source-map-support: 0.5.21
+    dev: true
+
   /test-exclude@6.0.0:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
@@ -7065,7 +7079,7 @@ packages:
       convert-source-map: 2.0.0
     dev: true
 
-  /vite-node@1.1.0(@types/node@20.10.5)(sass@1.69.5):
+  /vite-node@1.1.0(@types/node@20.10.5)(sass@1.69.5)(terser@5.27.0):
     resolution: {integrity: sha512-jV48DDUxGLEBdHCQvxL1mEh7+naVy+nhUUUaPAZLd3FJgXuxQiewHcfeZebbJ6onDqNGkP4r3MhQ342PRlG81Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -7074,7 +7088,7 @@ packages:
       debug: 4.3.4
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 5.0.10(@types/node@20.10.5)(sass@1.69.5)
+      vite: 5.0.10(@types/node@20.10.5)(sass@1.69.5)(terser@5.27.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -7097,7 +7111,7 @@ packages:
       debug: 4.3.4
       fast-glob: 3.3.2
       pretty-bytes: 6.1.1
-      vite: 5.0.10(@types/node@20.10.5)(sass@1.69.5)
+      vite: 5.0.10(@types/node@20.10.5)(sass@1.69.5)(terser@5.27.0)
       workbox-build: 7.0.0
       workbox-window: 7.0.0
     transitivePeerDependencies:
@@ -7112,7 +7126,7 @@ packages:
       '@rollup/plugin-virtual': 3.0.2(rollup@2.79.1)
       '@swc/core': 1.3.101
       uuid: 9.0.1
-      vite: 5.0.10(@types/node@20.10.5)(sass@1.69.5)
+      vite: 5.0.10(@types/node@20.10.5)(sass@1.69.5)(terser@5.27.0)
     transitivePeerDependencies:
       - '@swc/helpers'
       - rollup
@@ -7123,10 +7137,10 @@ packages:
     peerDependencies:
       vite: ^2 || ^3 || ^4 || ^5
     dependencies:
-      vite: 5.0.10(@types/node@20.10.5)(sass@1.69.5)
+      vite: 5.0.10(@types/node@20.10.5)(sass@1.69.5)(terser@5.27.0)
     dev: true
 
-  /vite@5.0.10(@types/node@20.10.5)(sass@1.69.5):
+  /vite@5.0.10(@types/node@20.10.5)(sass@1.69.5)(terser@5.27.0):
     resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -7159,11 +7173,12 @@ packages:
       postcss: 8.4.32
       rollup: 4.9.1
       sass: 1.69.5
+      terser: 5.27.0
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
 
-  /vitest@1.1.0(@types/node@20.10.5)(@vitest/ui@1.1.0)(jsdom@23.0.1)(sass@1.69.5):
+  /vitest@1.1.0(@types/node@20.10.5)(@vitest/ui@1.1.0)(jsdom@23.0.1)(sass@1.69.5)(terser@5.27.0):
     resolution: {integrity: sha512-oDFiCrw7dd3Jf06HoMtSRARivvyjHJaTxikFxuqJjO76U436PqlVw1uLn7a8OSPrhSfMGVaRakKpA2lePdw79A==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -7209,8 +7224,8 @@ packages:
       strip-literal: 1.3.0
       tinybench: 2.5.1
       tinypool: 0.8.1
-      vite: 5.0.10(@types/node@20.10.5)(sass@1.69.5)
-      vite-node: 1.1.0(@types/node@20.10.5)(sass@1.69.5)
+      vite: 5.0.10(@types/node@20.10.5)(sass@1.69.5)(terser@5.27.0)
+      vite-node: 1.1.0(@types/node@20.10.5)(sass@1.69.5)(terser@5.27.0)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less

scripts/deploy.sh

@@ -104,7 +104,7 @@ deploy_netlify() {
 # For deployment, we care a bit less
 if [[ -n "${NETLIFY_API_KEY}" && -n "${NETLIFY_SITE_ID}" ]]; then
     echo "Deploy to netlify..."
-    deploy_netlify um-react.zip
+    deploy_netlify um-react-site.zip
 else
     echo "skip netlify deployment."
 fi

scripts/make-win64.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+
+# sudo apt install -y jq zip
+
+pushd "$(dirname "${BASH_SOURCE[0]}")/../"
+
+WRY_VER="0.1.1"
+
+mkdir -p win64/{deps,dist}
+dl_file() {
+    local FILE="$1"
+    if [[ ! -f "win64/deps/$FILE" ]]; then
+        curl -fsL "https://um-react.app/files/${FILE}.gz" | gzip -d >"win64/deps/${FILE}"
+    fi
+}
+
+dl_file "um-react-wry-builder-${WRY_VER}-linux-amd64"
+dl_file "um-react-wry-stub-${WRY_VER}-win64.exe"
+chmod a+x win64/deps/um-react-wry-builder-${WRY_VER}-linux-amd64
+
+APP_VERSION="$(jq -r '.version' <package.json)"
+EXE_NAME="um-react-win64-${APP_VERSION}.exe"
+ZIP_NAME="um-react-win64-${APP_VERSION}.zip"
+"./win64/deps/um-react-wry-builder-${WRY_VER}-linux-amd64" \
+    -t "win64/deps/um-react-wry-stub-${WRY_VER}-win64.exe" \
+    -r um-react.zip \
+    -o "win64/dist/${EXE_NAME}"
+
+touch -d 1970-01-01T00:00:00Z "win64/dist/${EXE_NAME}"
+zip -9oX "win64/dist/${ZIP_NAME}" -- "win64/dist/${EXE_NAME}"
+echo "[Build OK] 'win64/dist/${ZIP_NAME}'."
+
+popd

scripts/minify-mjs.mjs

@@ -0,0 +1,19 @@
+import { minify } from 'terser';
+import { readFileSync, writeFileSync, readdirSync } from 'fs';
+
+for (const file of readdirSync('dist/assets')) {
+  if (!/\.(mjs|js)$/.test(file)) {
+    continue;
+  }
+
+  console.log(`minifying ${file}...`);
+  const isModule = /\.mjs$/.test(file);
+
+  const output = await minify(readFileSync(`dist/assets/${file}`, 'utf-8'), {
+    compress: true,
+    mangle: true,
+    module: isModule,
+  });
+
+  writeFileSync(`dist/assets/${file}`, output.code);
+}

scripts/write-version.mjs

@@ -0,0 +1,14 @@
+/* eslint-env node */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import { execSync } from 'node:child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const commitHash = execSync('git rev-parse --short HEAD').toString('utf-8').trim();
+
+const pkgJson = JSON.parse(readFileSync(__dirname + '/../package.json', 'utf-8'));
+const pkgVer = `${pkgJson.version ?? 'unknown'}-${commitHash ?? 'unknown'}` + '\n';
+writeFileSync(__dirname + '/../dist/version.txt', pkgVer, 'utf-8');

src/faq/OtherFAQ.tsx

@@ -1,4 +1,4 @@
-import { Img, ListItem, Text, UnorderedList } from '@chakra-ui/react';
+import { Alert, AlertIcon, Code, Container, Flex, Img, ListItem, Text, UnorderedList } from '@chakra-ui/react';
 import { ExtLink } from '~/components/ExtLink';
 import { Header4 } from '~/components/HelpText/Header4';
 import { VQuote } from '~/components/HelpText/VQuote';
@@ -57,6 +57,19 @@ export function OtherFAQ() {
         </ExtLink>
         。
       </Text>
+
+      <Container p={2}>
+        <Alert status="warning" borderRadius={5}>
+          <AlertIcon />
+          <Flex flexDir="column">
+            <Text>
+              <strong>注意</strong>：根据应用厂商的风控策略，使用模拟器登录的账号<strong>有可能会被封锁</strong>
+              {'；使用前请自行评估风险。'}
+            </Text>
+          </Flex>
+        </Alert>
+      </Container>
+
       <UnorderedList>
         <ListItem>
           <Text>
@@ -73,6 +86,48 @@ export function OtherFAQ() {
         </ListItem>
       </UnorderedList>
 
+      <Header4>相关项目</Header4>
+      <UnorderedList>
+        <ListItem>
+          <Text>
+            <ExtLink href="https://github.com/CarlGao4/um-react-electron">
+              <strong>
+                <Code>um-react-electron</Code>
+              </strong>
+            </ExtLink>
+            ：利用 Electron 框架打包的本地版，提供适用于 Windows、Linux 和 Mac 平台的可执行文件。
+          </Text>
+          <UnorderedList>
+            <ListItem>
+              <Text>
+                <ExtLink href="https://github.com/CarlGao4/um-react-electron/releases/latest">GitHub 下载</ExtLink>
+              </Text>
+            </ListItem>
+          </UnorderedList>
+        </ListItem>
+        <ListItem>
+          <Text>
+            <ExtLink href="https://git.unlock-music.dev/um/um-react-wry">
+              <strong>
+                <Code>um-react-wry</Code>
+              </strong>
+            </ExtLink>
+            : 使用 WRY 框架封装的 Win64 单文件（需要
+            <ExtLink href="https://go.microsoft.com/fwlink/p/?LinkId=2124703">安装 Edge WebView2 运行时</ExtLink>
+            {'，Win10+ 操作系统自带）'}
+          </Text>
+          <UnorderedList>
+            <ListItem>
+              <Text>
+                <ExtLink href="https://git.unlock-music.dev/um/um-react/releases/latest">仓库下载</ExtLink>
+                {' | 寻找文件名为 '}
+                <Code>um-react-win64-</Code> 开头的附件
+              </Text>
+            </ListItem>
+          </UnorderedList>
+        </ListItem>
+      </UnorderedList>
+
       <Header4>有更多问题？</Header4>
       <Text>
         {'欢迎进入 '}