From b61d54ca0ef5b3e27f9c0293e5f131aead2faf35 Mon Sep 17 00:00:00 2001
From: hsueh chiahao <hsuehchiahao@gmail.com>
Date: Thu, 25 Sep 2025 17:47:46 +0800
Subject: [PATCH] update readme

---
 README.md | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 61 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index d062a9b..fe9c2e4 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,19 @@
 # website-products
 
-官网产品页面的代码（目前尚未实际使用，仅仅用于留档）
+官网产品页面的代码，基本思路是：
+
+1. 创建一个空白的 template `page-react-template.php`，不使用当前的模板
+2. 使用 plugin 的短代码方式，动态配置产品名称，来定位到指定目录下的文件
+
+> 目前都使用 coze 生成页面，但是 coze 的代码几乎都是 react 的，目前只有 react app 的操作事项
 
 
 
+# 文件说明
+
 ## 基本配置
 
-`react-product-loader`
+`/react-product-loader`
 - 用于在 wordpress 中引入 react 页面的 pluigin
 	- 因为使用 coze 生成的代码几乎都是 react 的
 - 放置在 plugin 文件夹下
@@ -20,6 +27,55 @@
 ## 产品页面
 
 - 产品的页面放在 `wp-content/products/react-apps` 下
-- 在 `固定ページ` 中创建页面，使用 `ショートコード` 引入
-	- `[react_app app_name="alisurvey"]`
-	- 其中 `app_name` 是文件夹的名字
\ No newline at end of file
+
+### 流程
+
+1. 运行 `npm run build`
+2. 将生成的 `dist/static/assets` 下的 `index-....js` 和 `index-....css` 放到 wordpress 中  
+    - 放在 `wp-content/products/react-apps` 目录下
+3. 在 `固定ページ` 中创建页面，使用 `ショートコード` 引入  
+    - 输入 `[react_app app_name="alisurvey"]`  
+        - 其中 `app_name` （这里是 `alisurvey`）是项目文件夹名字（与下面开发事项提到的 `baseUrl` 也一样）
+
+
+
+# 开发事项
+
+当 coze 生成了 react 代码之后，需要做一些修改：
+
+## 1. 修改 baseUrl
+
+> 参考这个 commit： https://git.alicorns.co.jp/xuejiahao/website-products/commit/98dac11ece9c262b24376a3ff1227731b0ff96fd
+
+1. `main.tsx`
+```diff
+createRoot(document.getElementById("root")!).render(  # <---- 检查必须是 #root
+  <StrictMode>
+-    <BrowserRouter>
++    <BrowserRouter basename={import.meta.env.BASE_URL}>
+      <App />
+      <Toaster />
+    </BrowserRouter>
+```
+
+2. `vite.config.ts`
+```diff
+export default defineConfig({
+  plugins: getPlugins()
++  base: '/alisurvey',    # <---- 需要和项目文件夹名一致
+});
+```
+
+## 2. 修改 pnpm 为 npm [可选]
+
+- `package.json`
+```diff
+  "scripts": {
+    "dev:client": "vite --host --port 3000",
+-    "dev": "pnpm dev:client",
++    "dev": "npm run dev:client",
+    "build:client": "vite build --outDir dist/static",
+-    "build": "rm -rf dist && pnpm build:client && cp package.json dist && touch dist/build.flag"
++    "build": "rm -rf dist && npm run build:client && cp package.json dist && touch dist/build.flag"
+  },
+```
\ No newline at end of file