fix: material baseUrl

[hexqi]

English | 简体中文

PR

问题：
物料文件原本属于前端静态资源，当前被当做后端接口请求（因为使用axios请求该json时统一使用后端接口一致的baseURL），当前后端分离部署时（如部署到cdn）会请求错误的地址
（当前只能通过修改engine.config.js指定完整路径才能实现，但前端静态资源的路径通常是变化的，造成很大的使用麻烦）

解决方法：修正物料请求的baseURL

验证：https://hexqi.github.io/tiny-engine/?type=app&id=1&tenant=1&pageid=3

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• Built its own designer, fully self-validated

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

Background and solution

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• Chores
  • Simplified deployment workflow by removing an unnecessary URL modification step.
  • Material bundle path updated to a relative location for more reliable loading.
  • Material fetching now respects the configured environment base URL, improving resource resolution across environments.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Removed a CI sed replacement step, changed the demo material path from absolute to relative, and updated material-fetching calls to pass a dynamic baseURL derived from useEnv().BASE_URL || '' for string URLs.

Changes

Cohort / File(s)	Summary
CI Workflow \.github/workflows/deploy-gh-pages.yml	Removed the "change material url" step that performed a sed replacement to update the material bundle URL during deployment.
Demo Configuration designer-demo/engine.config.js	Updated material bundle path from '/mock/bundle.json' to './mock/bundle.json' (absolute → relative).
Material Fetching Logic packages packages/design-core/src/preview/src/preview/usePreviewData.ts, packages/plugins/materials/src/composable/useMaterial.ts	Added useEnv import and changed string-URL fetches to call `get(url, { baseURL: useEnv().BASE_URL

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I nibble paths and tidy trails,
From /mock to ./mock I hop,
CI trims a step, the bundle sails,
Env-born bases stitch the drop,
A little hop—deploys won't stop! 🚀

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: material baseUrl' clearly and concisely summarizes the main change: adjusting the baseURL configuration for material requests to resolve the issue where materials were incorrectly routed through backend APIs.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

🧹 Recent nitpick comments

packages/design-core/src/preview/src/preview/usePreviewData.ts (1)

254-260: LGTM - correctly routes material requests through frontend base URL.

The change properly addresses the issue where material files were being requested through the backend API instead of as frontend static resources.

Consider extracting useEnv().BASE_URL || '' before the map to avoid repeated calls, though this is a minor optimization since useEnv() is likely cached.

♻️ Optional: Extract baseURL before map

 const getMaterialDeps = async () => {
   const bundleUrls = getMergeMeta('engine.config')?.material || []
+  const baseURL = useEnv().BASE_URL || ''
   const materials = await Promise.allSettled(
     bundleUrls.map((url: any) =>
-      typeof url === 'string' ? getMetaApi(META_SERVICE.Http).get(url, { baseURL: useEnv().BASE_URL || '' }) : url
+      typeof url === 'string' ? getMetaApi(META_SERVICE.Http).get(url, { baseURL }) : url
     )
   )

---

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2a61b73 and a329a5b.

📒 Files selected for processing (2)

• packages/design-core/src/preview/src/preview/usePreviewData.ts
• packages/plugins/materials/src/composable/useMaterial.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/plugins/materials/src/composable/useMaterial.ts

🧰 Additional context used

🧠 Learnings (5)

📚 Learning: 2024-10-10T02:47:46.239Z

Learnt from: yy-wow
Repo: opentiny/tiny-engine PR: 850
File: packages/toolbars/preview/src/Main.vue:16-16
Timestamp: 2024-10-10T02:47:46.239Z
Learning: In `packages/toolbars/preview/src/Main.vue`, within the `preview` function, the `getMergeMeta` method is used at lines 64 and 65 to retrieve `engine.config` configurations.

Applied to files:

• packages/design-core/src/preview/src/preview/usePreviewData.ts

📚 Learning: 2025-07-03T09:22:59.512Z

Learnt from: hexqi
Repo: opentiny/tiny-engine PR: 1501
File: mockServer/src/tool/Common.js:79-82
Timestamp: 2025-07-03T09:22:59.512Z
Learning: In the tiny-engine project, the mockServer code uses ES6 import syntax but is compiled to CommonJS output. This means CommonJS globals like `__dirname` are available at runtime, while ES6 module-specific features like `import.meta` would cause runtime errors.

Applied to files:

• packages/design-core/src/preview/src/preview/usePreviewData.ts

📚 Learning: 2024-09-30T07:51:10.036Z

Learnt from: chilingling
Repo: opentiny/tiny-engine PR: 837
File: packages/vue-generator/src/plugins/genDependenciesPlugin.js:66-66
Timestamp: 2024-09-30T07:51:10.036Z
Learning: In the `tiny-engine` project, `opentiny/tiny-engine-dsl-vue` refers to the current package itself, and importing types from it may cause circular dependencies.

Applied to files:

• packages/design-core/src/preview/src/preview/usePreviewData.ts

📚 Learning: 2025-01-14T06:49:00.797Z

Learnt from: gene9831
Repo: opentiny/tiny-engine PR: 1011
File: packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue:63-73
Timestamp: 2025-01-14T06:49:00.797Z
Learning: In the tiny-engine project, the SvgIcon component is globally registered and available throughout Vue components without requiring explicit imports.

Applied to files:

• packages/design-core/src/preview/src/preview/usePreviewData.ts

📚 Learning: 2025-01-13T07:49:12.136Z

Learnt from: yy-wow
Repo: opentiny/tiny-engine PR: 940
File: packages/plugins/materials/src/composable/useMaterial.js:0-0
Timestamp: 2025-01-13T07:49:12.136Z
Learning: In the materials system, componentsDepsMap.scripts in materialState is used as a data store for tracking component dependencies and doesn't require Vue reactivity as changes are handled explicitly through updateCanvasDeps().

Applied to files:

• packages/design-core/src/preview/src/preview/usePreviewData.ts

🧬 Code graph analysis (1)

packages/design-core/src/preview/src/preview/usePreviewData.ts (2)

packages/design-core/src/preview/src/preview/importMap.js (1)

• useEnv (20-26)

packages/design-core/src/preview/src/preview/srcFiles.js (1)

• useEnv (57-57)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: push-check

🔇 Additional comments (1)

packages/design-core/src/preview/src/preview/usePreviewData.ts (1)

4-4: LGTM!

The useEnv import is correctly added and consistent with usage patterns in sibling files (srcFiles.js, importMap.js).

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[hexqi]

场景分析：

1.index路径与静态资源域名和路径都不一致
index路径： https://domain/yyyy/index.html
静态资源路径： https://domain2/xxxx/mock/bundle.json

构建命令：
npm run build -- --base=https://domain2/xxxx/

请求路径: baseURL 使用 import.meta.env.BASE_URL(https://domain2/xxxx/)

2.index路径与静态资源域名一致，但路径不一致
index路径： https://domain/yyyy/index.html
静态资源路径： https://domain/xxxx/mock/bundle.json

构建命令：
npm run build -- --base=/xxxx/

请求路径: baseURL 使用 import.meta.env.BASE_URL(/xxxx/)

3.index路径与静态资源域名和路径都一致，但有额外路径
index路径： https://domain/xxxx/index.html
静态资源路径： https://domain/xxxx/mock/bundle.json

构建命令：
npm run build

请求路径: baseURL 使用 import.meta.env.BASE_URL('./') 或者 ''

4.index路径与静态资源路径一致，且跟域名一致
index路径： https://domain/index.html
静态资源路径： https://domain/mock/bundle.json

构建命令：
npm run build

请求路径: baseURL 使用 import.meta.env.BASE_URL('./') 或者 ''

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Scenario analysis:

1. The index path is inconsistent with the static resource domain name and path.
   Index path: https://domain/yyyy/index.html
   Static resource path: https://domain2/xxxx/mock/bundle.json

Build command:
npm run build -- --base=https://domain2/xxxx/

Request path: baseURL uses import.meta.env.BASE_URL(https://domain2/xxxx/)

2. The index path is consistent with the static resource domain name, but the path is inconsistent.
   Index path: https://domain/yyyy/index.html
   Static resource path: https://domain/xxxx/mock/bundle.json

Build command:
npm run build -- --base=/xxxx/

Request path: baseURL uses import.meta.env.BASE_URL(/xxxx/)

3. The index path is consistent with the static resource domain name and path, but there are additional paths
   Index path: https://domain/xxxx/index.html
   Static resource path: https://domain/xxxx/mock/bundle.json

Build command:
npm run build

Request path: baseURL use import.meta.env.BASE_URL('./') or ''

3. The index path is consistent with the static resource path and the domain name.
   Index path: https://domain/index.html
   Static resource path: https://domain/mock/bundle.json

Build command:
npm run build

Request path: baseURL use import.meta.env.BASE_URL('./') or ''