feat: cli添加新主题模板，修改主题切换逻辑

packages/design-core/registry.js

@@ -70,11 +70,17 @@ export default {
   themes: [
     {
       id: 'engine.theme.light',
-      title: '亮色主题'
+      text: '浅色模式',
+      label: 'light',
+      icon: 'light',
+      oppositeTheme: 'dark'
     },
     {
       id: 'engine.theme.dark',
-      title: '暗色主题'
+      text: '深色模式',
+      label: 'dark',
+      icon: 'dark',
+      oppositeTheme: 'light'
     }
   ]
 }

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

@@ -62,3 +62,13 @@ export function createPlugin(name) {
     chalk.green(`create finish, run the follow command to start project: \ncd ${name} && npm install && npm run dev`)
   )
 }
+
+export function createTheme(name) {
+  const sourcePath = path.join(__dirname, '../template/theme/')
+  const destPath = path.join(cwd(), name)
+  fs.copySync(sourcePath, destPath)
+
+  logger.log(
+    chalk.green(`create finish, run the follow command to start project: \ncd ${name} && npm install && npm run dev`)
+  )
+}

packages/engine-cli/src/index.js

@@ -11,7 +11,7 @@
  */
 import { Command, Option } from 'commander'
 import { input, select } from '@inquirer/prompts'
-import { createPlatform, createPlugin } from './commands/create.js'
+import { createPlatform, createPlugin, createTheme } from './commands/create.js'
 
 const program = new Command()
 
@@ -34,6 +34,13 @@ program
     createPlugin(name)
   })
 
+program
+  .command('create-theme <name>')
+  .description('create a new tiny-engine theme 创建一个新的 tiny-engine 主题')
+  .action((name) => {
+    createTheme(name)
+  })
+
 program
   .command('create')
   .description('create a new tiny-engine platform or plugin by prompt 根据提示创建一个新的 tiny-engine 插件')
@@ -50,6 +57,11 @@ program
           name: 'plugin',
           value: 'plugin',
           description: 'create a new tiny-engine plugin 创建一个新的 tiny-engine 插件'
+        },
+        {
+          name: 'theme',
+          value: 'theme',
+          description: 'create a new tiny-engine theme 创建一个新的 tiny-engine 主题'
         }
       ]
     })
@@ -67,7 +79,8 @@ program
 
     const typeMapper = {
       platform: createPlatform,
-      plugin: createPlugin
+      plugin: createPlugin,
+      theme: createTheme
     }
 
     typeMapper[type](projectName)

packages/engine-cli/template/theme/README.md

@@ -0,0 +1,3 @@
+# tiny-engine Theme demo
+
+

packages/engine-cli/template/theme/index.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import './src/styles/vars.less'
+import metaData from './meta.js'
+
+export default {
+  ...metaData,
+  // 插件暴露的 api，可以提供其他 api 进行调用，如果无需暴露，可为空
+  apis: {}
+}

packages/engine-cli/template/theme/meta.js

@@ -0,0 +1,7 @@
+// 描述该插件的相关元信息
+export default {
+  id: 'engine.theme.custom',
+  text: '自定义模式',
+  label: 'custom',
+  icon: 'dark'
+}

packages/engine-cli/template/theme/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@opentiny/tiny-engine-theme-custom",
+  "version": "2.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/opentiny/tiny-engine",
+    "directory": "packages/theme/custom"
+  },
+  "bugs": {
+    "url": "https://github.com/opentiny/tiny-engine/issues"
+  },
+  "author": "OpenTiny Team",
+  "license": "MIT",
+  "homepage": "https://opentiny.design/tiny-engine",
+  "devDependencies": {
+    "vite": "^5.4.2"
+  }
+}

packages/engine-cli/template/theme/src/styles/vars.less

@@ -0,0 +1,3 @@
+:root[data-theme='custom'] {
+  --te-common-text-primary: var(--te-base-red-80);
+}

packages/engine-cli/template/theme/vite.config.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import { defineConfig } from 'vite'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  publicDir: false,
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, './index.js'),
+      name: 'theme-custom',
+      fileName: () => 'index.js',
+      formats: ['es']
+    },
+    rollupOptions: {
+      output: {
+        banner: 'import "./style.css"'
+      }
+    }
+  }
+})

packages/toolbars/themeSwitch/src/Main.vue

@@ -1,27 +1,53 @@
 <template>
   <div class="toolbar-theme-switch">
-    <toolbar-base :content="baseContent" :icon="baseIcon" :options="optionsData" @click-api="toChangeTheme">
-      <template v-if="position === 'collapse'">
-        <div class="toolbar-theme-switch-radio">
-          <div class="toolbar-theme-switch-radio-title">主题</div>
-          <tiny-radio-group v-model="state.theme" :options="THEME_DATA" class="theme-radio-group" @change="themeChange">
-          </tiny-radio-group>
+    <tiny-popover
+      width="130"
+      trigger="manual"
+      v-model="showpopover"
+      :visible-arrow="false"
+      popper-class="theme-popover"
+    >
+      <div class="theme-list">
+        <div
+          v-for="item in THEME_DATA"
+          :key="item.label"
+          :class="['theme-item', { active: state.theme === item.label }]"
+          @click="themeItemChange(item.label)"
+        >
+          {{ item.text }}
         </div>
+      </div>
+      <template #reference>
+        <toolbar-base :content="baseContent" :icon="baseIcon" :options="optionsData" @click-api="changeThemeType">
+          <template v-if="position === 'collapse'">
+            <div class="toolbar-theme-switch-radio">
+              <div class="toolbar-theme-switch-radio-title">主题</div>
+              <tiny-radio-group
+                v-model="state.theme"
+                :options="THEME_DATA"
+                class="theme-radio-group"
+                @change="themeChange"
+              >
+              </tiny-radio-group>
+            </div>
+          </template>
+        </toolbar-base>
       </template>
-    </toolbar-base>
+    </tiny-popover>
   </div>
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
-import { RadioGroup } from '@opentiny/vue'
+import { RadioGroup, Popover } from '@opentiny/vue'
 import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 
 export default {
   components: {
     ToolbarBase,
-    TinyRadioGroup: RadioGroup
+    TinyRadioGroup: RadioGroup,
+    TinyPopover: Popover
   },
   props: {
     options: {
@@ -47,7 +73,17 @@ export default {
       return options
     })
     const baseContent = computed(() => (props.position === COLLAPSE ? '' : state.themeLabel))
-    const baseIcon = computed(() => (props.position === COLLAPSE ? '' : state.theme))
+    const baseIcon = computed(() => (props.position === COLLAPSE ? '' : state.themeIcon))
+    const showpopover = ref(false)
+
+    const themeShowType = computed(() => {
+      let filterList = THEME_DATA.filter((item) => item.label === 'light' || item.label === 'dark') || []
+      if (THEME_DATA.length === filterList.length) {
+        return true
+      } else {
+        return false
+      }
+    })
 
     const toChangeTheme = () => {
       if (props.position === COLLAPSE) {
@@ -58,15 +94,46 @@ export default {
       themeChange(theme)
     }
 
+    const changeThemeType = () => {
+      if (themeShowType.value) {
+        toChangeTheme()
+      } else {
+        showpopover.value = true
+      }
+    }
+
+    const themeItemChange = (theme) => {
+      themeChange(theme)
+      showpopover.value = false
+    }
+
     return {
       THEME_DATA,
       state,
       optionsData,
       baseContent,
       baseIcon,
       toChangeTheme,
-      themeChange
+      themeChange,
+      showpopover,
+      themeShowType,
+      themeItemChange,
+      changeThemeType
     }
   }
 }
 </script>
+<style lang="less" scoped>
+.theme-list {
+  .theme-item {
+    padding: 4px 16px;
+    margin: 0 -16px;
+    &:hover {
+      background-color: var(--te-toolbar-theme-popover-list-item-bg-color-hover);
+    }
+  }
+  .active {
+    background-color: var(--te-toolbar-theme-popover-list-item-bg-color-hover);
+  }
+}
+</style>

packages/toolbars/themeSwitch/src/composable/index.js

@@ -1,26 +1,18 @@
 import { reactive } from 'vue'
-import { defineService, getMetaApi, getMergeMeta, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import {
+  defineService,
+  getMetaApi,
+  getMergeMeta,
+  META_SERVICE,
+  getMergeRegistry
+} from '@opentiny/tiny-engine-meta-register'
 import { setGlobalMonacoEditorTheme } from '@opentiny/tiny-engine-common'
 
-const THEME_DATA = [
-  {
-    text: '浅色模式',
-    label: 'light',
-    oppositeTheme: 'dark'
-  },
-  {
-    text: '深色模式',
-    label: 'dark',
-    oppositeTheme: 'light'
-  }
-]
-
-const DEFAULT_THEME = THEME_DATA[0]
-
-const themeState = reactive({
-  theme: DEFAULT_THEME.label,
-  themeLabel: DEFAULT_THEME.text
-})
+let THEME_DATA = []
+
+let DEFAULT_THEME = null
+
+const themeState = reactive({})
 
 const getThemeData = () => THEME_DATA
 const getThemeState = () => themeState
@@ -32,6 +24,7 @@ const getTheme = (theme) => {
 const themeChange = (theme) => {
   themeState.theme = getTheme(theme).label
   themeState.themeLabel = getTheme(themeState.theme).text
+  themeState.themeIcon = getTheme(themeState.theme).icon
   document.documentElement.setAttribute('data-theme', themeState.theme)
 
   const appId = getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id
@@ -47,6 +40,13 @@ export default defineService({
     const appId = getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id
     const theme =
       localStorage.getItem(`tiny-engine-theme-${appId}`) || getMergeMeta('engine.config').theme || DEFAULT_THEME.label
+    THEME_DATA = getMergeRegistry('themes')
+    DEFAULT_THEME = THEME_DATA[0]
+    themeState.value = {
+      theme: DEFAULT_THEME.label,
+      themeIcon: DEFAULT_THEME.icon,
+      themeLabel: DEFAULT_THEME.text
+    }
 
     themeChange(theme)
   },

packages/toolbars/themeSwitch/src/styles/vars.less

@@ -1,3 +1,6 @@
 .toolbar-theme-switch {
   --te-toolbar-theme-switch-radio-title: var(--te-common-text-secondary);
 }
+.theme-list {
+  --te-toolbar-theme-popover-list-item-bg-color-hover: var(--te-common-bg-container);
+}

packages/toolbars/themeSwitch/vite.config.js

@@ -29,6 +29,9 @@ export default defineConfig({
       formats: ['es']
     },
     rollupOptions: {
+      output: {
+        banner: 'import "./style.css"'
+      },
       external: ['vue', /@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/]
     }
   }