opentiny
/
tiny-engine
2
0
Fork 9
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

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

* feat: add meta for tool

* feat:add generateComment plugin for tool

* feat: add layout

* fix: 更改写错的layout

* fix: 修改layout格式
This commit is contained in:
lichunn 2024-05-25 02:15:12 -07:00 committed by GitHub
parent cdba368bc5
commit 153fbd36a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
33 changed files with 365 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/design-core/package.json
View File

@ -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:*",

2
packages/design-core/registry.js
View File

@ -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]
}

3
packages/design-core/vite.config.js
View File

@ -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 = {

5
packages/http/index.js Normal file
View File

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

4
packages/http/meta.js Normal file
View File

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

2
packages/http/package.json
View File

@ -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"

3
packages/http/vite.config.js
View File

@ -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: {

7
packages/layout/index.js Normal file
View File

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

4
packages/layout/meta.js Normal file
View File

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

23
packages/layout/package.json Normal file
View File

@ -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"
}
}

95
packages/layout/src/index.less Normal file
View File

@ -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;
}

93
packages/layout/src/index.vue Normal file
View File

@ -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>

32
packages/layout/vite.config.js Normal file
View File

@ -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']
}
}
})

3
packages/svgs/index.js
View File

@ -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 })
}

4
packages/svgs/meta.js Normal file
View File

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

5
packages/svgs/package.json
View File

@ -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"

3
packages/svgs/vite.config.js
View File

@ -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: {

5
packages/theme/dark/index.js Normal file
View File

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

5
packages/theme/dark/meta.js Normal file
View File

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

4
packages/theme/dark/package.json
View File

@ -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"
}

22
packages/theme/dark/vite.config.js
View File

@ -1,20 +1,22 @@
/**
* 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.
*
*/
* 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 generateComment from '@opentiny/vite-plugin-generate-comments'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [generateComment()],
publicDir: false,
build: {
lib: {

5
packages/theme/light/index.js Normal file
View File

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

5
packages/theme/light/meta.js Normal file
View File

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

4
packages/theme/light/package.json
View File

@ -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"
}

22
packages/theme/light/vite.config.js
View File

@ -1,20 +1,22 @@
/**
* 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.
*
*/
* 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 generateComment from '@opentiny/vite-plugin-generate-comments'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [generateComment()],
publicDir: false,
build: {
lib: {

5
packages/utils/index.js Normal file
View File

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

4
packages/utils/meta.js Normal file
View File

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

5
packages/utils/package.json
View File

@ -27,10 +27,13 @@
"license": "MIT",
"homepage": "https://opentiny.design/tiny-engine",
"devDependencies": {
"@opentiny/vite-plugin-generate-comments": "workspace:*",
"vite": "^4.3.7",
"vitest": "^1.4.0"
},
"dependencies": {},
"dependencies": {
"@opentiny/tiny-engine-entry": "workspace:*"
},
"peerDependencies": {
"@opentiny/vue-renderless": "^3.14.0",
"vue": "^3.4.15"

3
packages/utils/vite.config.js
View File

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

5
packages/vue-generator/index.js Normal file
View File

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

4
packages/vue-generator/meta.js Normal file
View File

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

2
packages/vue-generator/package.json
View File

@ -30,6 +30,7 @@
"license": "MIT",
"homepage": "https://opentiny.design/tiny-engine",
"dependencies": {
"@opentiny/tiny-engine-entry": "workspace:*",
"@opentiny/tiny-engine-builtin-component": "workspace:*",
"@opentiny/tiny-engine-controller": "workspace:*",
"@vue/compiler-sfc": "3.2.45",
@ -38,6 +39,7 @@
"vue-eslint-parser": "8.3.0"
},
"devDependencies": {
"@opentiny/vite-plugin-generate-comments": "workspace:*",
"@rushstack/eslint-patch": "^1.1.1",
"@vitest/coverage-v8": "^1.4.0",
"@vue/eslint-config-prettier": "^7.0.0",

2
packages/vue-generator/vite.config.mjs
View File

@ -13,6 +13,7 @@
import { defineConfig } from 'vite'
import path from 'path'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import generateComment from '@opentiny/vite-plugin-generate-comments'
// https://vitejs.dev/config/
export default defineConfig({
@ -26,6 +27,7 @@ export default defineConfig({
}
},
plugins: [
generateComment(),
viteStaticCopy({
targets: [
{