Feat/react compiler refact

.github/workflows/deploy-static.yml

@@ -4,14 +4,30 @@ on:
   push:
     branches:
       - release
+  pull_request:
+    types:
+      - closed
+    branches:
+      - release
+  workflow_dispatch:
 
 permissions:
   contents: write
 
 jobs:
   build-and-deploy:
+    if: |
+      github.event_name == 'push' ||
+      github.event_name == 'workflow_dispatch' ||
+      (github.event_name == 'pull_request' && github.event.pull_request.merged == true)
+
     runs-on: ubuntu-latest
 
+    env:
+      DEPLOY_ENV: "CDN"
+      CDN_BASEURL: "https://cdn.jsdelivr.net/gh/scarletborder/bloggerv2@static/"
+      API_ENDPOINT: "https://blog.scarletborder.cn"
+
     steps:
       - name: Checkout release branch
         uses: actions/checkout@v5
@@ -26,8 +42,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '22'
-          cache: 'pnpm'
+          node-version: "22"
+          cache: "pnpm"
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -38,34 +54,38 @@ jobs:
       - name: Find built assets and generate report
         id: generate-report
         run: |
-          # 定义 CDN 基础路径
-          CDN_BASE="https://cdn.jsdelivr.net/gh/scarletborder/bloggerv2@static/"
-
-          # 查找带有 hash 的 JS 文件 (例如: index-xxxxxxxx.js)
-          JS_FILE=$(find dist/assets -name "index-*.js" | head -n 1)
-          # 提取文件名，例如 index-xxxxxxxx.js
-          JS_FILENAME=$(basename "$JS_FILE")
-          # 构造完整的 JS CDN URL
-          JS_CDN_URL="${CDN_BASE}assets/${JS_FILENAME}"
-
-          # 查找带有 hash 的 CSS 文件 (例如: index-xxxxxxxx.css)
-          CSS_FILE=$(find dist/assets -name "index-*.css" | head -n 1)
-          # 提取文件名，例如 index-xxxxxxxx.css
-          CSS_FILENAME=$(basename "$CSS_FILE")
-          # 构造完整的 CSS CDN URL
-          CSS_CDN_URL="${CDN_BASE}assets/${CSS_FILENAME}"
-
-          # 生成报告内容
-          REPORT_CONTENT="<script crossorigin='anonymous' src='${JS_CDN_URL}' type='module'></script>\n"
-          REPORT_CONTENT+="<link crossorigin='anonymous' href='${CSS_CDN_URL}' rel='stylesheet'/>"
-
-          # 将报告内容写入文件
-          echo -e "$REPORT_CONTENT" > build_report.txt
-
-          # 将报告内容作为工作流输出 (可选，方便其他步骤或工作流使用) [5, 7, 8, 10]
-          echo "report_content=$(echo -e "$REPORT_CONTENT" | sed 's/"/\\"/g' | sed ':a;N;s/\n/\\n/g;ba')" >> $GITHUB_OUTPUT
-          echo "js_cdn_url=${JS_CDN_URL}" >> $GITHUB_OUTPUT
-          echo "css_cdn_url=${CSS_CDN_URL}" >> $GITHUB_OUTPUT
+          CDN_BASE="${{ env.CDN_BASEURL }}"
+          REPORT_FILE="build_report.txt"
+
+          # 清空报告文件，以便重新写入
+          > "$REPORT_FILE"
+
+          echo "--- Generating CSS <link> tags ---"
+          # 查找所有 .css 文件，排序以保证顺序一致，然后生成 <link> 标签
+          for CSS_FILE in $(find dist/assets -name "*.css" | sort); do
+            CSS_FILENAME=$(basename "$CSS_FILE")
+            CSS_CDN_URL="${CDN_BASE}assets/${CSS_FILENAME}"
+            echo "Found CSS: ${CSS_FILENAME}"
+            echo "<link crossorigin='anonymous' href='${CSS_CDN_URL}' rel='stylesheet'/>" >> "$REPORT_FILE"
+          done
+
+          echo "--- Generating JS <script> tags ---"
+          # 查找所有 .js 文件，排序以保证顺序一致，然后生成 <script> 标签
+          for JS_FILE in $(find dist/assets -name "*.js" | sort); do
+            JS_FILENAME=$(basename "$JS_FILE")
+            JS_CDN_URL="${CDN_BASE}assets/${JS_FILENAME}"
+            echo "Found JS: ${JS_FILENAME}"
+            echo "<script crossorigin='anonymous' src='${JS_CDN_URL}' type='module'></script>" >> "$REPORT_FILE"
+          done
+
+          echo "--- Build Report Generated ---"
+          cat "$REPORT_FILE"
+
+          # 将完整的、多行的报告内容设置为 GitHub Actions 的输出
+          # 使用 <<EOF 语法可以安全地处理多行字符串
+          echo "report_content<<EOF" >> $GITHUB_OUTPUT
+          cat "$REPORT_FILE" >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
 
       - name: Upload Build Report as Artifact
         uses: actions/upload-artifact@v4 # 使用 v4 版本上传 Artifact [1, 4, 6, 11]
@@ -100,6 +120,6 @@ jobs:
           publish_dir: ./dist
           publish_branch: static
           force_orphan: true
-          user_name: 'github-actions[bot]'
-          user_email: 'github-actions[bot]@users.noreply.github.com'
-          commit_message: 'Deploy static assets from release branch'
+          user_name: "github-actions[bot]"
+          user_email: "github-actions[bot]@users.noreply.github.com"
+          commit_message: "Deploy static assets from release branch"

.github/workflows/manual-deploy.yml

@@ -9,8 +9,8 @@ on:
         default: 'true'
         type: choice
         options:
-        - 'true'
-        - 'false'
+          - 'true'
+          - 'false'
 
 permissions:
   contents: write

.github/workflows/purge-jsdelivr-cache.yml

@@ -28,4 +28,4 @@ jobs:
 
           # 等待所有后台 curl 进程完成
           wait
-          echo "All purge requests have been sent."
+          echo "All purge requests have been sent."

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

eslint.config.js

@@ -1,24 +1,35 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { globalIgnores, defineConfig } from 'eslint/config'
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import { globalIgnores } from 'eslint/config';
+import tencentEslintConfig from 'eslint-config-tencent/flat';
+
+const GlobalConstants = {
+  __API_ENDPOINT__: 'readonly',
+};
 
 export default tseslint.config([
-  globalIgnores(['dist']),
+  globalIgnores(['dist', 'vite.config.ts']),
+  ...tencentEslintConfig({
+    tsconfigRootDir: process.cwd(), // eslint-disable-line no-undef
+    project: './tsconfig.app.json',
+  }),
   {
-    files: ['**/*.{ts,tsx}'],
+    files: ['src/**/*.{ts,tsx}'],
     extends: [
       js.configs.recommended,
-      tseslint.configs.recommended,
       reactHooks.configs.flat.recommended,
       reactRefresh.configs.vite,
     ],
     languageOptions: {
       ecmaVersion: 2020,
-      globals: globals.browser,
+      globals: {
+        ...globals.browser,
+        ...GlobalConstants,
+      },
     },
   },
   reactHooks.configs.flat.recommended,
-])
+]);

index.html

@@ -3,14 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link href='https://s2.loli.net/2025/04/14/LnsCqG8ZVcrJN4l.png' rel='shortcut icon' type='image/vnd.microsoft.icon' />
-  <link rel="preconnect" href="https://fonts.lug.ustc.edu.cn" />
-  <link rel="preconnect" href="https://fonts-gstatic.lug.ustc.edu.cn" crossorigin />
-  <link
-    href="https://fonts.lug.ustc.edu.cn/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&display=swap"
-    rel="stylesheet" />
-  <link href="https://fonts.lug.ustc.edu.cn/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap"
-    rel="stylesheet" />
+  <link href="https://s2.loli.net/2025/04/14/LnsCqG8ZVcrJN4l.png" rel="shortcut icon" type="image/vnd.microsoft.icon" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>绯境之外~Outside of Scarlet</title>
   <style id="theme-blocking-styles">
@@ -28,23 +21,25 @@
     }
 
     /* 暗色模式样式 */
-    html[data-theme="dark"],
-    html[data-theme="dark"] body,
-    html[data-theme="dark"] #root {
-      background-color: #101013 !important;
-      color: #ffffff !important;
+    html[theme-mode='dark'],
+    html[theme-mode='dark'] body,
+    html[theme-mode='dark'] #root {
+      background-color: #1a1a1e !important;
+      color: rgba(255, 255, 255, 0.85) !important;
     }
 
     /* 浅色模式样式 */
-    html[data-theme="light"],
-    html[data-theme="light"] body,
-    html[data-theme="light"] #root {
+    html:not([theme-mode]),
+    html[theme-mode='light'],
+    html[theme-mode='light'] body,
+    html[theme-mode='light'] #root {
       background-color: #f5f5f9 !important;
       color: #212529 !important;
     }
   </style>
   <script>
-    window.__static_url = 'https://cdn.jsdelivr.net/gh/scarletborder/bloggerv2@static';
+    window.__static_url =
+      'https://cdn.jsdelivr.net/gh/scarletborder/bloggerv2@static';
   </script>
   <script>
     (function () {
@@ -60,7 +55,8 @@
       const hasSuccessName = pathname.startsWith('new-comment-');
 
       // 如果满足URL条件，或者满足备用的 window.name 条件，就认为是成功弹窗
-      const isCommentSuccessPopup = (hasSuccessParam && hasCommentHash) || hasSuccessName; 
+      const isCommentSuccessPopup =
+        (hasSuccessParam && hasCommentHash) || hasSuccessName;
       if (isCommentSuccessPopup) {
         window.close();
       }
@@ -71,16 +67,25 @@
 
         // 如果没有手动设置主题，才使用系统偏好
         if (theme === null || theme === undefined) {
-          const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+          const prefersDark =
+            window.matchMedia &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches;
           theme = prefersDark ? 'dark' : 'light';
         }
 
         // 立即设置主题属性，让CSS立即生效
-        document.documentElement.setAttribute('data-theme', theme);
+        // TDesign 推荐使用 theme-mode 属性
+        if (theme === 'dark') {
+          document.documentElement.setAttribute('theme-mode', 'dark');
+        } else {
+          document.documentElement.removeAttribute('theme-mode');
+        }
 
         // 在页面加载完成后移除阻塞样式，让正常的CSS接管
         function enableTransitions() {
-          const blockingStyles = document.getElementById('theme-blocking-styles');
+          const blockingStyles = document.getElementById(
+            'theme-blocking-styles',
+          );
           if (blockingStyles) {
             blockingStyles.remove();
           }
@@ -93,10 +98,9 @@
         } else {
           enableTransitions();
         }
-
       } catch (e) {
         // 出现错误时，设置默认浅色主题
-        document.documentElement.setAttribute('data-theme', 'light');
+        document.documentElement.removeAttribute('theme-mode');
       }
     })();
   </script>

package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "prepare": "husky",
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
@@ -32,6 +33,8 @@
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.5",
     "swiper": "^12.0.3",
+    "tdesign-icons-react": "^0.6.1",
+    "tdesign-react": "^1.15.8",
     "vite-plugin-remove-console": "^2.2.0",
     "zod": "^4.1.12"
   },
@@ -44,9 +47,12 @@
     "@vitejs/plugin-react": "^5.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9.39.1",
+    "eslint-config-tencent": "^1.1.3",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "husky": "^9.1.7",
+    "prettier": "^3.6.2",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "npm:rolldown-vite@7.2.2",
@@ -58,5 +64,16 @@
     "overrides": {
       "vite": "npm:rolldown-vite@7.2.2"
     }
+  },
+  "lint-staged": {
+    "*.{json,md}": [
+      "prettier --write"
+    ],
+    "*.{js,ts,tsx}": [
+      "eslint --fix"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true
   }
 }