feat:设计器支持上传到obs桶 (#170)

Author: discreted66

.github/workflows/deploy-obs.yml

@@ -62,6 +62,23 @@ jobs:
           VITE_CONTEXT: /vue-pro/pages/
           VITE_BASE_API: /tiny-pro-vue/api
           VITE_MOCK_SERVER_HOST: /tiny-pro-vue/api/mock
+          # 是否启用设计器
+          VITE_LOWCODE_DESIGNER_ENABLED: true
+          # 配置设计器链接，部署后使用相对路径 /designer
+          VITE_LOWCODE_DESIGNER_URL: https://ai.opentiny.design/designer/
+      - name: Build lowcode-designer
+        run: |
+          export NODE_OPTIONS="--max-old-space-size=8192"
+          cd template/lowcode-designer
+          pnpm build
+        env:
+          # 配置设计器的 base 路径，部署到 /designer/ 目录下
+          VITE_DESIGNER_BASE: /designer/
+      - name: Copy lowcode-designer to vue-pro/designer
+        run: |
+          # 将 lowcode-designer 的构建产物放入 vue-pro/designer 目录下
+          mkdir -p ./template/tinyvue/dist/vue-pro/designer
+          cp -r ./template/lowcode-designer/dist/* ./template/tinyvue/dist/vue-pro/designer/
       - name: Copy files
         run: |
           cp ./template/tinyvue/dist/vue-pro/pages/index.html ./template/tinyvue/dist/vue-pro/pages/404.html

package.json

@@ -31,6 +31,18 @@
   ],
   "repository": "https://github.com/opentiny/tiny-pro",
   "homepage": "https://opentiny.design/pro/",
+  "pnpm": {
+    "overrides": {
+      "@opentiny/tiny-engine-common>@opentiny/vue-renderless": "~3.20.0",
+      "@opentiny/tiny-engine-plugin-datasource>@opentiny/vue-renderless": "~3.20.0",
+      "@opentiny/tiny-engine-plugin-block>@opentiny/vue-renderless": "~3.20.0",
+      "@opentiny/tiny-engine-plugin-canvas>@opentiny/vue-renderless": "~3.20.0",
+      "@opentiny/tiny-engine-plugin-tree>@opentiny/vue-renderless": "~3.20.0",
+      "@opentiny/tiny-engine-setting-styles>@opentiny/vue-renderless": "~3.20.0",
+      "@opentiny/tiny-engine-plugin-materials>@opentiny/vue-renderless": "~3.20.0",
+      "@opentiny/tiny-engine-plugin-page>@opentiny/vue-renderless": "~3.20.0"
+    }
+  },
   "scripts": {
     "dev": "pnpm -F tiny-pro-vue start",
     "dev:backend": "pnpm -F tinyui-nestjs-server start",
@@ -153,4 +165,4 @@
       ]
     }
   ]
-}
+}

template/lowcode-designer/package.json

@@ -16,12 +16,12 @@
     "@opentiny/tiny-engine-generate-code-tinypro": "^0.1.0",
     "@opentiny/tiny-engine-meta-register": "^2.7.0",
     "@opentiny/tiny-engine-utils": "^2.7.0",
-    "@opentiny/vue": "^3.27.0",
-    "@opentiny/vue-design-smb": "^3.27.0",
-    "@opentiny/vue-icon": "^3.27.0",
-    "@opentiny/vue-locale": "^3.27.0",
-    "@opentiny/vue-renderless": "^3.27.0",
-    "@opentiny/vue-theme": "^3.27.0",
+    "@opentiny/vue": "~3.20.0",
+    "@opentiny/vue-design-smb": "~3.20.0",
+    "@opentiny/vue-icon": "~3.20.0",
+    "@opentiny/vue-locale": "~3.20.0",
+    "@opentiny/vue-renderless": "~3.20.0",
+    "@opentiny/vue-theme": "~3.20.0",
     "@vueuse/core": "^9.6.0",
     "vue": "^3.4.21"
   },
@@ -33,4 +33,4 @@
     "cross-env": "^7.0.3",
     "vite": "^5.4.2"
   }
-}
+}

template/lowcode-designer/vite.config.js

@@ -1,8 +1,15 @@
 import path from 'node:path';
-import { defineConfig, mergeConfig } from 'vite';
+import { defineConfig, mergeConfig, loadEnv } from 'vite';
 import { useTinyEngineBaseConfig } from '@opentiny/tiny-engine-vite-config';
 
 export default defineConfig((configEnv) => {
+  // 加载环境变量（从 env 目录加载）
+  const env = loadEnv(configEnv.mode, path.resolve(__dirname, './env'), '');
+
+  // 获取 base 路径，默认为 '/'，可通过 VITE_DESIGNER_BASE 环境变量配置
+  // 例如：VITE_DESIGNER_BASE=/designer/ 用于部署到 /designer/ 路径下
+  const base = env.VITE_DESIGNER_BASE || '/';
+
   const baseConfig = useTinyEngineBaseConfig({
     viteConfigEnv: configEnv,
     root: __dirname,
@@ -15,6 +22,7 @@ export default defineConfig((configEnv) => {
   });
 
   const customConfig = {
+    base, // 配置静态资源前缀
     envDir: './env',
     publicDir: path.resolve(__dirname, './public'),
     server: {
@@ -27,6 +35,11 @@ export default defineConfig((configEnv) => {
         },
       },
     },
+    build: {
+      // 确保构建时使用正确的 base 路径
+      outDir: 'dist',
+      assetsDir: 'assets',
+    },
   };
 
   return mergeConfig(baseConfig, customConfig);

template/tinyvue/config/vite.config.base.ts

@@ -40,14 +40,24 @@ const config = {
       },
       {
         find: '@opentiny/vue-icon',
-        replacement: resolve('node_modules/@opentiny/vue-icon'), // compile template
+        replacement: resolve(__dirname, '../node_modules/@opentiny/vue-icon'), // compile template
+      },
+      {
+        find: '@opentiny/vue-theme',
+        replacement: resolve(__dirname, '../node_modules/@opentiny/vue-theme'),
       },
     ],
-    extensions: ['.ts', '.js'],
+    extensions: ['.ts', '.js', '.css'],
+    preserveSymlinks: false,
   },
   define: {
     'BUILD_TOOLS': "'VITE'",
   },
+  optimizeDeps: {
+    esbuildOptions: {
+      resolveExtensions: ['.ts', '.js', '.css'],
+    },
+  },
   css: {
     preprocessorOptions: {
       less: {

template/tinyvue/config/vite.config.dev.ts

@@ -1,24 +1,34 @@
 import { mergeConfig, loadEnv } from 'vite';
 import eslint from 'vite-plugin-eslint';
 import baseConfig from './vite.config.base';
+import { resolve } from 'path';
+import { configDotenv } from 'dotenv';
+
+// 加载 dev.env 文件
+configDotenv({
+  path: resolve(__dirname, '../dev.env'),
+});
+
+// 加载环境变量（development 模式会读取 .env.development 和 .env）
+const env = loadEnv('development', process.cwd());
 
 const proxyConfig = {
-  [loadEnv('', process.cwd()).VITE_BASE_API]: {
-    target: loadEnv('', process.cwd()).VITE_SERVER_HOST,
+  [env.VITE_BASE_API]: {
+    target: env.VITE_SERVER_HOST,
     changeOrigin: true,
     logLevel: 'debug',
     rewrite: (path: string) =>
       path.replace(
-        new RegExp(`${loadEnv('', process.cwd()).VITE_BASE_API}`),
+        new RegExp(`${env.VITE_BASE_API}`),
         '',
       ),
   },
-  [loadEnv('', process.cwd()).VITE_MOCK_SERVER_HOST]: {
-    target: loadEnv('', process.cwd()).VITE_SERVER_HOST,
+  [env.VITE_MOCK_SERVER_HOST]: {
+    target: env.VITE_SERVER_HOST,
     changeOrigin: true,
     rewrite: (path: string) => {
 
-      return path.replace(new RegExp(`${loadEnv('', process.cwd()).VITE_MOCK_SERVER_HOST}`), '/mock')
+      return path.replace(new RegExp(`${env.VITE_MOCK_SERVER_HOST}`), '/mock')
     },
   },
 };
@@ -34,6 +44,16 @@ export default mergeConfig(
         ...proxyConfig,
       },
     },
+    define: {
+      // 确保 VITE_LOWCODE_DESIGNER_ENABLED 被注入到客户端代码
+      'import.meta.env.VITE_LOWCODE_DESIGNER_ENABLED': JSON.stringify(
+        process.env.VITE_LOWCODE_DESIGNER_ENABLED || 'false'
+      ),
+      // 确保 VITE_LOWCODE_DESIGNER_URL 被注入到客户端代码
+      'import.meta.env.VITE_LOWCODE_DESIGNER_URL': JSON.stringify(
+        process.env.VITE_LOWCODE_DESIGNER_URL || 'http://localhost:8090'
+      ),
+    },
     plugins: [
       eslint({
         include: ['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue'],

template/tinyvue/config/vite.config.prod.ts

@@ -8,6 +8,15 @@ export default mergeConfig(
     mode: 'production',
     base: loadEnv('', process.cwd()).VITE_BASE || '/',
     plugins: [configCompressPlugin('gzip'), configVisualizerPlugin()],
+    define: {
+      // 确保环境变量被注入到客户端代码
+      'import.meta.env.VITE_LOWCODE_DESIGNER_ENABLED': JSON.stringify(
+        process.env.VITE_LOWCODE_DESIGNER_ENABLED || 'false'
+      ),
+      'import.meta.env.VITE_LOWCODE_DESIGNER_URL': JSON.stringify(
+        process.env.VITE_LOWCODE_DESIGNER_URL || '/designer'
+      ),
+    },
     build: {
       rollupOptions: {
         output: {

template/tinyvue/dev.env

@@ -6,4 +6,6 @@ VITE_USE_MOCK= false
 VITE_MOCK_IGNORE= /api/user/userInfo,/api/user/login,/api/user/register,/api/employee/getEmployee
 
 VITE_MOCK_SERVER_HOST=/mock
-VITE_LOWCODE_DESIGNER_ENABLED=false
+VITE_LOWCODE_DESIGNER_ENABLED=true
+# 设计器链接配置，开发环境默认为 http://localhost:8090，生产环境可配置为 /designer 或完整 URL
+VITE_LOWCODE_DESIGNER_URL=http://localhost:8090

template/tinyvue/package.json

@@ -39,12 +39,12 @@
     "@babel/core": "^7.25.2",
     "@gaonengwww/mock-server": "^1.0.5",
     "@opentiny/icons": "^0.1.3",
-    "@opentiny/vue": "^3.27.0",
-    "@opentiny/vue-huicharts": "^3.27.0",
-    "@opentiny/vue-icon": "^3.27.0",
-    "@opentiny/vue-locale": "^3.27.0",
+    "@opentiny/vue": "^3.28.0",
+    "@opentiny/vue-huicharts": "~3.28.0",
+    "@opentiny/vue-icon": "~3.28.0",
+    "@opentiny/vue-locale": "~3.28.0",
     "@opentiny/vue-search-box": "^0.1.3",
-    "@opentiny/vue-theme": "^3.27.0",
+    "@opentiny/vue-theme": "~3.28.0",
     "@types/mockjs": "^1.0.10",
     "@types/node": "^22.7.4",
     "@vueuse/core": "^10.11.1",
@@ -136,4 +136,4 @@
     "bin-wrapper": "npm:bin-wrapper-china",
     "gifsicle": "5.2.0"
   }
-}
+}

template/tinyvue/src/components/navbar/index.vue

@@ -246,7 +246,9 @@
 
   // 设计器
   const openLowCodeDesigner = () => {
-    window.open(`http://localhost:8090/?type=app&id=1&tenant=1&pageid=1`, '_blank');
+    // 支持通过环境变量配置设计器链接，默认为开发环境地址
+    const designerUrl = import.meta.env.VITE_LOWCODE_DESIGNER_URL || 'http://localhost:8090';
+    window.open(`${designerUrl}/?type=app&id=1&tenant=1&pageid=1`, '_blank');
   };
 
   // 用户设置