feat：add theme switching plugin

designer-demo/engine.config.js

@@ -1,6 +1,6 @@
 export default {
   id: 'engine.config',
-  theme: import.meta.env.VITE_THEME || 'light',
+  theme: 'light',
   material: ['/mock/bundle.json'],
   scripts: [],
   styles: []

designer-demo/registry.js

@@ -21,6 +21,7 @@ import {
   Redoundo,
   Save,
   Clean,
+  Theme,
   Preview,
   GenerateCode,
   Refresh,
@@ -64,15 +65,16 @@ export default {
         left: ['engine.toolbars.breadcrumb', 'engine.toolbars.lock', 'engine.toolbars.logo'],
         center: ['engine.toolbars.media'],
         right: [
-          ['engine.toolbars.redoundo', 'engine.toolbars.clean'],
+          ['engine.toolbars.theme', 'engine.toolbars.redoundo', 'engine.toolbars.clean'],
           ['engine.toolbars.preview'],
           ['engine.toolbars.generate-code', 'engine.toolbars.save']
         ],
         collapse: [
           ['engine.toolbars.collaboration'],
           ['engine.toolbars.refresh', 'engine.toolbars.fullscreen'],
           ['engine.toolbars.lang'],
-          ['engine.toolbars.viewSetting']
+          ['engine.toolbars.viewSetting'],
+          ['engine.toolbars.theme']
         ]
       }
     }
@@ -86,6 +88,7 @@ export default {
     }
   ],
   toolbars: [
+    Theme,
     Logo,
     Breadcrumb,
     Lock,

jsconfig.json

@@ -31,6 +31,7 @@
       "@opentiny/tiny-engine-toolbar-preview": ["packages/toolbars/preview/index"],
       "@opentiny/tiny-engine-toolbar-generate-code": ["packages/toolbars/generate-code/index"],
       "@opentiny/tiny-engine-toolbar-clean": ["packages/toolbars/clean/index"],
+      "@opentiny/tiny-engine-toolbar-theme": ["packages/toolbars/theme/index"],
       "@opentiny/tiny-engine-toolbar-save": ["packages/toolbars/save/index"],
       "tiny-engine-canvas": ["packages/canvas/index"],
       "@opentiny/tiny-engine-theme-dark": ["packages/theme/dark/index.less"],
@@ -59,6 +60,7 @@
       "@opentiny/tiny-engine-toolbar-media/*": ["packages/toolbars/media/*"],
       "@opentiny/tiny-engine-toolbar-preview/*": ["packages/toolbars/preview/*"],
       "@opentiny/tiny-engine-toolbar-clean/*": ["packages/toolbars/clean/*"],
+      "@opentiny/tiny-engine-toolbar-theme/*": ["packages/toolbars/theme/*"],
       "@opentiny/tiny-engine-toolbar-save/*": ["packages/toolbars/save/*"],
       "@opentiny/tiny-engine-theme-dark/*": ["packages/theme/dark/*"],
       "@opentiny/tiny-engine-theme-light/*": ["packages/theme/light/*"],

packages/build/vite-config/src/vite-plugins/devAliasPlugin.js

@@ -47,6 +47,7 @@ const getDevAlias = (useSourceAlias) => {
     '@opentiny/tiny-engine-toolbar-refresh': path.resolve(basePath, 'packages/toolbars/refresh/index.js'),
     '@opentiny/tiny-engine-toolbar-redoundo': path.resolve(basePath, 'packages/toolbars/redoundo/index.js'),
     '@opentiny/tiny-engine-toolbar-clean': path.resolve(basePath, 'packages/toolbars/clean/index.js'),
+    '@opentiny/tiny-engine-toolbar-theme': path.resolve(basePath, 'packages/toolbars/theme/index.js'),
     '@opentiny/tiny-engine-toolbar-save': path.resolve(basePath, 'packages/toolbars/save/index.js'),
     '@opentiny/tiny-engine-toolbar-setting': path.resolve(basePath, 'packages/toolbars/setting/index.js'),
     '@opentiny/tiny-engine-toolbar-collaboration': path.resolve(basePath, 'packages/toolbars/collaboration/index.js'),

packages/common/component/ToolbarBase.vue

@@ -6,8 +6,10 @@
       </template>
     </component>
     <slot></slot>
-    <span v-if="state.options?.collapsed">{{ state.content }}</span>
+    <span v-if="isHideMulti()">{{ state.content }}</span>
   </span>
+  <span> </span>
+  <slot name="radio"></slot>
 </template>
 
 <script>
@@ -32,6 +34,10 @@ export default {
     options: {
       type: Object,
       default: () => {}
+    },
+    position: {
+      type: String,
+      default: 'right'
     }
   },
   emits: ['click-api'],
@@ -46,21 +52,28 @@ export default {
       emit('click-api')
     }
 
+    const isShowMulti = () => (state.options?.collapsed || props.position === 'collapse') && state.options?.multiType
+    const isHideMulti = () => (state.options?.collapsed || props.position === 'collapse') && !state.options?.multiType
+
     const getRender = () => {
-      switch (props.options.renderType) {
-        case 'button':
-          return ToolbarBaseButton
-        case 'icon':
-          return ToolbarBaseIcon
-        default:
-          return false
+      if (isShowMulti()) {
+        return false
+      }
+      if (props.options.renderType === 'button') {
+        return ToolbarBaseButton
+      }
+      if (props.options.renderType === 'icon') {
+        return ToolbarBaseIcon
       }
+      return false
     }
 
     return {
       state,
       click,
-      getRender
+      getRender,
+      isShowMulti,
+      isHideMulti
     }
   }
 }

packages/design-core/index.js

@@ -11,6 +11,7 @@ export { default as Media } from '@opentiny/tiny-engine-toolbar-media'
 export { default as Redoundo, HistoryService } from '@opentiny/tiny-engine-toolbar-redoundo'
 export { default as Save } from '@opentiny/tiny-engine-toolbar-save'
 export { default as Clean } from '@opentiny/tiny-engine-toolbar-clean'
+export { default as Theme } from '@opentiny/tiny-engine-toolbar-theme'
 export { default as Preview } from '@opentiny/tiny-engine-toolbar-preview'
 export { default as GenerateCode, SaveLocalService } from '@opentiny/tiny-engine-toolbar-generate-code'
 export { default as Refresh } from '@opentiny/tiny-engine-toolbar-refresh'

packages/design-core/package.json

@@ -72,6 +72,7 @@
     "@opentiny/tiny-engine-theme-light": "workspace:*",
     "@opentiny/tiny-engine-toolbar-breadcrumb": "workspace:*",
     "@opentiny/tiny-engine-toolbar-clean": "workspace:*",
+    "@opentiny/tiny-engine-toolbar-theme": "workspace:*",
     "@opentiny/tiny-engine-toolbar-collaboration": "workspace:*",
     "@opentiny/tiny-engine-toolbar-fullscreen": "workspace:*",
     "@opentiny/tiny-engine-toolbar-generate-code": "workspace:*",

packages/design-core/src/init.js

@@ -21,6 +21,8 @@ import {
   defineEntry,
   mergeRegistry,
   getMergeMeta,
+  getMetaApi,
+  META_SERVICE,
   initServices,
   initHook,
   HOOK_NAME,
@@ -37,6 +39,7 @@ const defaultLifeCycles = {
   beforeAppCreate: ({ registry }) => {
     // 合并用户自定义注册表
     const newRegistry = mergeRegistry(registry, defaultRegistry)
+    const appId = getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id
     if (process.env.NODE_ENV === 'development') {
       console.log('default registry:', defaultRegistry) // eslint-disable-line
       console.log('merged registry:', registry) // eslint-disable-line
@@ -55,7 +58,7 @@ const defaultLifeCycles = {
     // 加载主题样式，尽早加载
     // import(`./theme/${newRegistry.config.theme}.js`)
 
-    const theme = newRegistry.config.theme || 'light'
+    const theme = localStorage.getItem(`tiny-engine-theme-${appId}`) || newRegistry.config.theme || 'light'
     // eslint-disable-next-line no-new
     new TinyThemeTool(defaultThemeList[theme], defaultThemeList[theme]?.id)
     document.documentElement?.setAttribute?.('data-theme', theme)
@@ -72,8 +75,10 @@ const defaultLifeCycles = {
     window.lowcodeI18n = i18n
     app.use(i18n).use(injectGlobalComponents)
 
-    const theme = getMergeMeta('engine.config').theme?.includes('dark') ? 'vs-dark' : 'vs'
-    setGlobalMonacoEditorTheme(theme)
+    const appId = getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id
+    const theme = localStorage.getItem(`tiny-engine-theme-${appId}`) || getMergeMeta('engine.config').theme
+    const editorTheme = theme?.includes('dark') ? 'vs-dark' : 'vs'
+    setGlobalMonacoEditorTheme(editorTheme)
   }
 }
 

packages/engine-cli/src/commands/generateConfig.js

@@ -8,7 +8,7 @@ export const generateConfig = (options = {}) => {
   const configContent = `
 export default {
   id: 'engine.config',
-  theme: import.meta.env.VITE_THEME || '${theme}',
+  theme: '${theme}',
   material: ${JSON.stringify(material)},
   scripts: ${JSON.stringify(scripts)},
   styles: ${JSON.stringify(styles)},

packages/engine-cli/template/designer/engine.config.js

@@ -1,6 +1,6 @@
 export default {
   id: 'engine.config',
-  theme: import.meta.env.VITE_THEME || 'light',
+  theme: 'light',
   material: ['/mock/bundle.json'],
   scripts: [],
   styles: []

packages/engine-cli/template/designer/registry.js

@@ -21,6 +21,7 @@ import {
   Redoundo,
   Save,
   Clean,
+  Theme,
   Preview,
   GenerateCode,
   Refresh,
@@ -64,15 +65,16 @@ export default {
         left: ['engine.toolbars.breadcrumb', 'engine.toolbars.lock', 'engine.toolbars.logo'],
         center: ['engine.toolbars.media'],
         right: [
-          ['engine.toolbars.redoundo', 'engine.toolbars.clean'],
+          ['engine.toolbars.theme', 'engine.toolbars.redoundo', 'engine.toolbars.clean'],
           ['engine.toolbars.preview'],
           ['engine.toolbars.generate-code', 'engine.toolbars.save']
         ],
         collapse: [
           ['engine.toolbars.collaboration'],
           ['engine.toolbars.refresh', 'engine.toolbars.fullscreen'],
           ['engine.toolbars.lang'],
-          ['engine.toolbars.viewSetting']
+          ['engine.toolbars.viewSetting'],
+          ['engine.toolbars.theme']
         ]
       }
     }
@@ -86,6 +88,7 @@ export default {
     }
   ],
   toolbars: [
+    Theme,
     Logo,
     Breadcrumb,
     Lock,

packages/layout/index.js

@@ -16,15 +16,16 @@ export default {
       left: ['engine.toolbars.breadcrumb', 'engine.toolbars.lock', 'engine.toolbars.logo'],
       center: ['engine.toolbars.media'],
       right: [
-        ['engine.toolbars.redoundo', 'engine.toolbars.clean'],
+        ['engine.toolbars.theme', 'engine.toolbars.redoundo', 'engine.toolbars.clean'],
         ['engine.toolbars.preview'],
         ['engine.toolbars.generate-code', 'engine.toolbars.save']
       ],
       collapse: [
         ['engine.toolbars.collaboration'],
         ['engine.toolbars.refresh', 'engine.toolbars.fullscreen'],
         ['engine.toolbars.lang'],
-        ['engine.toolbars.viewSetting']
+        ['engine.toolbars.viewSetting'],
+        ['engine.toolbars.theme']
       ]
     }
   },