fix: support importmap styles

Author: chilingling

packages/build/vite-config/src/localCdnFile/importMapLocalPlugin.js

@@ -189,10 +189,14 @@ export function importMapLocalPlugin({
   const parsedImportMapConfig = Object.values(parsedImportMapLocalConfig.importMap.imports)
     .map((item) => extractInfo(item))
     .filter(Boolean)
+  // 处理内置的物料样式，后续不再内置物料后，需要用户自行引入，相关逻辑也需要同步删除
+  const parsedImportMapStylesConfig = Object.values(defaultImportMapConfig.importStyles || {})
+    .map((item) => extractInfo(item))
+    .filter(Boolean)
   const overriddenImportMap = parsedDefaultImportMapConfig.filter((item) => {
     return !parsedImportMapConfig.find((parsedItem) => parsedItem.packageName === item.packageName)
   })
-  const combinedImportMapConfig = [...overriddenImportMap, ...parsedImportMapConfig]
+  const combinedImportMapConfig = [...overriddenImportMap, ...parsedImportMapConfig, ...parsedImportMapStylesConfig]
 
   if (combinedImportMapConfig.length === 0) {
     logger.warn('[import-map-local-plugin]: No CDN dependencies found or configured')

packages/canvas/DesignCanvas/src/importMap.ts

@@ -23,6 +23,20 @@ const getImportUrl = (pkgName: string) => {
   }
 }
 
+// 获取样式文件的URL，后续去除物料内置逻辑之后，需要用户自行引入，相关逻辑也需要同步删除
+const getImportStyleUrl = (pkgName: string) => {
+  const { VITE_CDN_TYPE, VITE_CDN_DOMAIN, VITE_LOCAL_CDN_PATH } = useEnv()
+  const versionDelimiter = VITE_CDN_TYPE === 'npmmirror' && !VITE_LOCAL_CDN_PATH ? '/' : '@'
+  const fileDelimiter = VITE_CDN_TYPE === 'npmmirror' && !VITE_LOCAL_CDN_PATH ? '/files' : ''
+
+  if (importMapConfig.importStyles[pkgName]) {
+    return importMapConfig.importStyles[pkgName]
+      .replace('${VITE_CDN_DOMAIN}', VITE_LOCAL_CDN_PATH || VITE_CDN_DOMAIN)
+      .replace('${versionDelimiter}', versionDelimiter)
+      .replace('${fileDelimiter}', fileDelimiter)
+  }
+}
+
 export function getImportMapData(canvasDeps = { scripts: [], styles: [] }) {
   // 以下内容由于区块WebComponent加载需要补充
   const blockRequire = {
@@ -32,7 +46,7 @@ export function getImportMapData(canvasDeps = { scripts: [], styles: [] }) {
       '@opentiny/vue-icon': getImportUrl('@opentiny/vue-icon'),
       '@opentiny/tiny-engine-builtin-component': getImportUrl('@opentiny/tiny-engine-builtin-component')
     },
-    importStyles: []
+    importStyles: [getImportStyleUrl('@opentiny/vue-theme')]
   }
 
   // 以下内容由于物料协议不支持声明子依赖而@opentiny/vue需要依赖所以需要补充

packages/common/js/import-map.json

@@ -19,5 +19,8 @@
     "@opentiny/vue-locale": "${VITE_CDN_DOMAIN}/@opentiny/vue-runtime${versionDelimiter}~3.20${fileDelimiter}/dist3/tiny-vue-locale.mjs",
     "@opentiny/vue-renderless/": "${VITE_CDN_DOMAIN}/@opentiny/vue-renderless${versionDelimiter}~3.20${fileDelimiter}/",
     "echarts": "${VITE_CDN_DOMAIN}/echarts${versionDelimiter}5.4.1${fileDelimiter}/dist/echarts.esm.js"
+  },
+  "importStyles": {
+    "@opentiny/vue-theme": "${VITE_CDN_DOMAIN}/@opentiny/vue-theme${versionDelimiter}~3.20${fileDelimiter}/index.css"
   }
 }