fix(vue-generator): 优化区块引用路径，解决多层级路由问题 #1414 (#1415)

* fix(vue-generator): 优化区块引用路径，解决多层级路由问题

将 vue-generator 包中区块的相对路径从 '../components/' 统一修改为 '@/components/'，
解决了多层级路由场景下区块引用路径不一致的问题。这个改动确保了在不同层级的页面中，
区块组件都能被正确引用和加载。

* test(vue-generator): Add test cases to verify the use of block-relative paths

添加新的测试用例 `case07`，用于验证在 Vue SFC 生成器中区块的相对路径是否正确解析为 `@/components/`。测试用例包括组件映射、页面 schema 和预期输出文件。

Author: 0x7A7A6572

packages/vue-generator/src/generator/page.js

@@ -329,7 +329,7 @@ const generateImports = (description, moduleName, type, componentsMap) => {
       blocks.push(`import ${block} from '${depPath}/${block}.vue'`)
     } else {
       const blockDefaultPath =
-        type === 'Block' ? `import ${block} from './${block}.vue'` : `import ${block} from '../components/${block}.vue'`
+        type === 'Block' ? `import ${block} from './${block}.vue'` : `import ${block} from '@/components/${block}.vue'`
 
       blocks.push(blockDefaultPath)
     }

packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js

@@ -42,7 +42,7 @@ import {
 
 const parseConfig = (config = {}) => {
   const {
-    blockRelativePath = '../components/',
+    blockRelativePath = '@/components/',
     blockSuffix = '.vue',
     scriptConfig = {},
     styleConfig = {}

packages/vue-generator/src/generator/vue/sfc/parseImport.js

@@ -42,7 +42,7 @@ export const getImportMap = (schema, componentsMap, config) => {
     pkgMap[key].push(item)
   })
 
-  const { blockRelativePath = '../components', blockSuffix = '.vue' } = config
+  const { blockRelativePath = '@/components', blockSuffix = '.vue' } = config
   const blockPkgMap = {}
   const relativePath = blockRelativePath.endsWith('/') ? blockRelativePath.slice(0, -1) : blockRelativePath
 
@@ -67,7 +67,7 @@ export const getImportMap = (schema, componentsMap, config) => {
 export const genCompImport = (schema, componentsMap, config = {}) => {
   const { components, blocks } = parseImport(schema.children)
   const pkgMap = {}
-  const { blockRelativePath = '../components/', blockSuffix = '.vue' } = config
+  const { blockRelativePath = '@/components/', blockSuffix = '.vue' } = config
 
   const importComps = componentsMap.filter(({ componentName }) => components.includes(componentName))
 

packages/vue-generator/test/testcases/sfc/case07/case07.test.js

@@ -0,0 +1,12 @@
+import { expect, test } from 'vitest'
+import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc'
+import schema from './page.schema.json'
+import componentsMap from './components-map.json'
+import { formatCode } from '@/utils/formatCode'
+
+test('should use @/components/ as block relative path', async () => {
+  const res = genSFCWithDefaultPlugin(schema, componentsMap)
+  const formattedCode = formatCode(res, 'vue')
+
+  await expect(formattedCode).toMatchFileSnapshot('./expected/BlockPath.vue')
+})

packages/vue-generator/test/testcases/sfc/case07/components-map.json

@@ -0,0 +1,6 @@
+[
+  {
+    "componentName": "BlockTest1a",
+    "main": "./components"
+  }
+]

packages/vue-generator/test/testcases/sfc/case07/expected/BlockPath.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="page-base-style">
+    <span style="display: inline-block" class="component-base-style">测试二级页面使用区块</span>
+    <block-test1a class="block-base-style"></block-test1a>
+  </div>
+</template>
+
+<script setup>
+import * as vue from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import { I18nInjectionKey } from 'vue-i18n'
+import BlockTest1a from '@/components/BlockTest1a.vue'
+
+const props = defineProps({})
+
+const emit = defineEmits([])
+const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
+const wrap = lowcodeWrap(props, { emit })
+wrap({ stores })
+
+const state = vue.reactive({})
+wrap({ state })
+</script>
+<style scoped>
+.page-base-style {
+  padding: 24px;
+  background: #ffffff;
+}
+
+.block-base-style {
+  margin: 16px;
+}
+
+.component-base-style {
+  margin: 8px;
+}
+</style>

packages/vue-generator/test/testcases/sfc/case07/page.schema.json

@@ -0,0 +1,40 @@
+{
+  "componentName": "Page",
+  "css": ".page-base-style {\n  padding: 24px;background: #FFFFFF;\n}\n\n.block-base-style {\n  margin: 16px;\n}\n\n.component-base-style {\n  margin: 8px;\n}\n",
+  "props": {
+    "className": "page-base-style"
+  },
+  "lifeCycles": {},
+  "children": [
+    {
+      "componentName": "Text",
+      "props": {
+        "style": "display: inline-block;",
+        "className": "component-base-style",
+        "text": "测试二级页面使用区块"
+      },
+      "children": [],
+      "id": "66c62533"
+    },
+    {
+      "componentName": "BlockTest1a",
+      "props": {
+        "className": "block-base-style"
+      },
+      "componentType": "Block",
+      "children": [],
+      "id": "75e25225"
+    }
+  ],
+  "dataSource": {
+    "list": []
+  },
+  "state": {},
+  "methods": {},
+  "utils": [],
+  "bridge": [],
+  "inputs": [],
+  "outputs": [],
+  "fileName": "BlockPath",
+  "id": "body"
+}