feat: add meta data for http/theme/svg plugin (opentiny#509)

* feat: add meta for tool

* feat:add generateComment plugin for tool

* feat: add layout

* fix: 更改写错的layout

* fix: 修改layout格式

packages/design-core/package.json

@@ -43,6 +43,8 @@
     "@babel/generator": "~7.23.2",
     "@babel/parser": "~7.23.2",
     "@babel/traverse": "~7.23.2",
+    "@opentiny/tiny-engine-layout": "workspace:~",
+    "@opentiny/vite-plugin-generate-comments": "workspace:*",
     "@opentiny/tiny-engine-entry": "workspace:*",
     "@opentiny/tiny-engine-canvas": "workspace:*",
     "@opentiny/tiny-engine-common": "workspace:*",

packages/design-core/registry.js

@@ -11,7 +11,9 @@
  */
 
 import i18nMeta from '@opentiny/tiny-engine-plugin-i18n'
+import layoutMeta from '@opentiny/tiny-engine-layout'
 
 export default {
+  layout: layoutMeta,
   plugins: [i18nMeta]
 }

packages/design-core/vite.config.js

@@ -196,7 +196,8 @@ const devAlias = {
   '@opentiny/tiny-engine-webcomponent-core': path.resolve(__dirname, '../webcomponent/src/lib.js'),
   '@opentiny/tiny-engine-i18n-host': path.resolve(__dirname, '../i18n/src/lib.js'),
   '@opentiny/tiny-engine-builtin-component': path.resolve(__dirname, '../builtinComponent/index.js'),
-  '@opentiny/tiny-engine-entry': path.resolve(__dirname, '../entry/index.js')
+  '@opentiny/tiny-engine-entry': path.resolve(__dirname, '../entry/index.js'),
+  '@opentiny/tiny-engine-layout': path.resolve(__dirname, '../layout/index.js')
 }
 
 const prodAlias = {

packages/http/index.js

@@ -0,0 +1,5 @@
+import metaData from './meta'
+
+export default {
+  ...metaData
+}

packages/http/meta.js

@@ -0,0 +1,4 @@
+export default {
+  id: 'engine.http',
+  type: 'http'
+}

packages/http/package.json

@@ -25,11 +25,13 @@
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
     "@opentiny/tiny-engine-utils": "workspace:*",
+    "@opentiny/tiny-engine-entry": "workspace:*",
     "@vueuse/core": "^9.6.0",
     "axios": "~0.28.0",
     "axios-mock-adapter": "^1.21.5"
   },
   "devDependencies": {
+    "@opentiny/vite-plugin-generate-comments": "workspace:*",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "vite": "^4.3.7"

packages/http/vite.config.js

@@ -14,10 +14,11 @@ import { defineConfig } from 'vite'
 import path from 'path'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import generateComment from '@opentiny/vite-plugin-generate-comments'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx()],
+  plugins: [generateComment(), vue(), vueJsx()],
   publicDir: false,
   resolve: {},
   build: {

packages/layout/index.js

@@ -0,0 +1,7 @@
+import component from './src/index.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  component
+}

packages/layout/meta.js

@@ -0,0 +1,4 @@
+export default {
+  id: 'engine.layout',
+  type: 'layout'
+}

packages/layout/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@opentiny/tiny-engine-layout",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "vite build"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@opentiny/tiny-engine-entry": "workspace:*",
+    "vue": "3.2.45"
+  },
+  "devDependencies": {
+    "@opentiny/vite-plugin-generate-comments": "workspace:*",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "less": "^4.2.0",
+    "vite": "^5.1.6"
+  }
+}

packages/layout/src/index.less

@@ -0,0 +1,95 @@
+.tiny-engine-layout {
+  height: 100vh;
+  display: flex;
+  flex-flow: column;
+}
+.tiny-engine-layout-header {
+  height: 48px;
+  border-bottom: 1px solid #dfe1e6;
+  text-align: center;
+  line-height: 48px;
+  background: #ecf8ff;
+  display: flex;
+  justify-content: center;
+  & > div {
+    margin: 0 10px;
+  }
+}
+.tiny-engine-layout-content {
+  display: flex;
+  max-width: 100vw;
+  flex: 1;
+  position: relative;
+  .main-content {
+    flex-grow: 1;
+    background: #fffdec;
+  }
+}
+
+.left-panel {
+  width: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: #fff;
+  box-sizing: border-box;
+  z-index: 1000;
+  border-right: 1px solid #dfe1e6;
+}
+.tiny-engine-drawer {
+  position: absolute;
+  width: 500px;
+  height: 100%;
+  left: 40px;
+  border-right: 1px solid #dfe1e6;
+  background: #fff;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+.left-panel-top {
+  padding-top: 20px;
+  .panel-item {
+    text-align: center;
+    margin-top: 16px;
+    cursor: pointer;
+    .icon-container {
+      display: inline-flex;
+      padding: 6px;
+      border-radius: 6px;
+      &:hover {
+        background: #f2f2f2;
+      }
+    }
+    &.active {
+      .icon-container {
+        background: #f2f2f2;
+      }
+      svg {
+        fill: #1476ff;
+      }
+    }
+  }
+  svg {
+    font-size: 20px;
+  }
+}
+.main-content {
+  flex-grow: 1;
+  background: #fffdec;
+  font-size: 30px;
+  text-align: center;
+}
+.right-panel {
+  width: 272px;
+  height: 100%;
+  transition: 0.3s linear;
+  position: relative;
+  border-left: 1px solid #dfe1e6;
+  background: #fff;
+  text-align: center;
+  font-size: 20px;
+  padding-top: 10px;
+  box-sizing: border-box;
+}
+.toolbar-item {
+  cursor: pointer;
+}

packages/layout/src/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="tiny-engine-layout">
+    <div class="tiny-engine-layout-header">
+      <div v-for="(item, index) in state.toolbars" :key="index" class="toolbar-item">
+        <component :is="item.component"></component>
+      </div>
+    </div>
+  </div>
+  <div class="tiny-engine-layout-content">
+    <div class="left-panel">
+      <div class="left-panel-top">
+        <div
+          v-for="(item, index) in state.plugins"
+          :key="index"
+          class="panel-item"
+          :class="{ active: state.active === index }"
+          @click="clickPanelItem(item, index)"
+        >
+          <div class="icon-container">
+            <component :is="item.icon"></component>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="tiny-engine-drawer" v-if="state.showDrawer">
+    <component :is="state.showComponent"></component>
+  </div>
+  <div class="main-content">
+    <div>canvas</div>
+  </div>
+  <div class="right-panel">
+    <div>settings</div>
+  </div>
+</template>
+
+<script lang="jsx">
+/* metaService */
+import './index.less'
+import { shallowRef, ref, reactive } from 'vue'
+
+export default {
+  props: {
+    plugins: {
+      type: Array,
+      default: () => []
+    },
+    toolbars: {
+      type: Array,
+      default: () => []
+    },
+    settings: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props) {
+    const showDrawer = ref(false)
+    const showComponent = shallowRef(null)
+    const active = ref(null)
+
+    const state = reactive({
+      plugins: props.plugins,
+      toolbars: props.toolbars,
+      settings: props.settings,
+      showComponent,
+      active,
+      showDrawer,
+      drawerWidth: null
+    })
+
+    const clickPanelItem = (item, index) => {
+      if (active.value === index) {
+        showDrawer.value = false
+        active.value = null
+      } else {
+        showDrawer.value = true
+        showComponent.value = item.component
+        state.drawerWidth = item.span ? (item.span * 100) / 24 + '%' : null
+        active.value = index
+        if (item.click) {
+          item.click()
+        }
+      }
+    }
+
+    return {
+      state,
+      clickPanelItem
+    }
+  }
+}
+</script>

packages/layout/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'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import generateComment from '@opentiny/vite-plugin-generate-comments'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [generateComment(), vue(), vueJsx()],
+  publicDir: false,
+  resolve: {},
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, './index.js'),
+      name: 'layout',
+      fileName: () => 'index.js',
+      formats: ['es']
+    }
+  }
+})

packages/svgs/index.js

@@ -11,7 +11,8 @@
  */
 
 import SvgIcon from './src/Main.vue'
+import metaData from './meta.js'
 
 export default (app) => {
-  app.component('SvgIcon', SvgIcon)
+  app.component('SvgIcon', { ...metaData, SvgIcon })
 }

packages/svgs/meta.js

@@ -0,0 +1,4 @@
+export default {
+  id: 'engine.svgs',
+  type: 'svgs'
+}

packages/svgs/package.json

@@ -23,8 +23,11 @@
   "author": "OpenTiny Team",
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
-  "dependencies": {},
+  "dependencies": {
+    "@opentiny/tiny-engine-entry": "workspace:*"
+  },
   "devDependencies": {
+    "@opentiny/vite-plugin-generate-comments": "workspace:*",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "vite": "^4.3.7"

packages/svgs/vite.config.js

@@ -14,10 +14,11 @@ import { defineConfig } from 'vite'
 import path from 'path'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import generateComment from '@opentiny/vite-plugin-generate-comments'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx()],
+  plugins: [generateComment(), vue(), vueJsx()],
   publicDir: false,
   resolve: {},
   build: {

packages/theme/dark/index.js

@@ -0,0 +1,5 @@
+import metaData from './meta'
+
+export default {
+  ...metaData
+}

packages/theme/dark/meta.js

@@ -0,0 +1,5 @@
+export default {
+  id: 'engine.theme.dark',
+  title: '主题',
+  type: 'theme'
+}

packages/theme/dark/package.json

@@ -22,7 +22,11 @@
   "author": "OpenTiny Team",
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
+  "dependencies": {
+    "@opentiny/tiny-engine-entry": "workspace:*"
+  },
   "devDependencies": {
+    "@opentiny/vite-plugin-generate-comments": "workspace:*",
     "rimraf": "^3.0.2",
     "vite": "^4.3.7"
   }