zestack
1 year ago
commit
ddf6148d14
@ -0,0 +1 @@ |
|||||||
|
* text=auto eol=lf |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
# Logs |
||||||
|
logs |
||||||
|
*.log |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
pnpm-debug.log* |
||||||
|
lerna-debug.log* |
||||||
|
|
||||||
|
node_modules |
||||||
|
dist |
||||||
|
dist-ssr |
||||||
|
*.local |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.vscode/* |
||||||
|
!.vscode/extensions.json |
||||||
|
.idea |
||||||
|
.DS_Store |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
|
*.sw? |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
{ |
||||||
|
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
# Vue 3 + TypeScript + Vite |
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
||||||
|
|
||||||
|
## Recommended IDE Setup |
||||||
|
|
||||||
|
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). |
||||||
|
|
||||||
|
## Type Support For `.vue` Imports in TS |
||||||
|
|
||||||
|
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. |
||||||
|
|
||||||
|
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: |
||||||
|
|
||||||
|
1. Disable the built-in TypeScript Extension |
||||||
|
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette |
||||||
|
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` |
||||||
|
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import antfu from '@antfu/eslint-config' |
||||||
|
|
||||||
|
export default await antfu({ |
||||||
|
stylistic: { |
||||||
|
indent: 2, |
||||||
|
quotes: 'single', |
||||||
|
}, |
||||||
|
typescript: true, |
||||||
|
vue: true, |
||||||
|
rules: { |
||||||
|
'vue/singleline-html-element-content-newline': 'off', |
||||||
|
'vue/html-self-closing': ['error', { |
||||||
|
html: { |
||||||
|
void: 'always', |
||||||
|
normal: 'always', |
||||||
|
component: 'always', |
||||||
|
}, |
||||||
|
svg: 'always', |
||||||
|
math: 'always', |
||||||
|
}], |
||||||
|
}, |
||||||
|
}) |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
<!doctype html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8" /> |
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
|
<title>Vite + Vue + TS</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="app"></div> |
||||||
|
<script type="module" src="/src/main.ts"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,27 @@ |
|||||||
|
{ |
||||||
|
"name": "data-driven-design", |
||||||
|
"type": "module", |
||||||
|
"version": "0.0.1", |
||||||
|
"private": true, |
||||||
|
"scripts": { |
||||||
|
"dev": "vite", |
||||||
|
"build": "vue-tsc && vite build", |
||||||
|
"preview": "vite preview", |
||||||
|
"lint": "eslint .", |
||||||
|
"lint:fix": "eslint . --fix" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"vue": "^3.3.8", |
||||||
|
"vuedraggable": "^4.1.0" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@antfu/eslint-config": "^2.1.1", |
||||||
|
"@types/node": "^20.9.4", |
||||||
|
"@vitejs/plugin-vue": "^4.5.0", |
||||||
|
"eslint": "^8.54.0", |
||||||
|
"less": "^4.2.0", |
||||||
|
"typescript": "^5.2.2", |
||||||
|
"vite": "^5.0.0", |
||||||
|
"vue-tsc": "^1.8.22" |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,296 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { ref } from 'vue' |
||||||
|
import type { Block, Module } from './engineer' |
||||||
|
import DddBuilder, { hash } from './engineer' |
||||||
|
|
||||||
|
let nextId = Date.now() |
||||||
|
|
||||||
|
const blocks = ref<Block[]>([ |
||||||
|
{ |
||||||
|
vid: hash(`${++nextId}`), |
||||||
|
mid: '', |
||||||
|
theme: { |
||||||
|
radius: 24, |
||||||
|
color: 'yellow', |
||||||
|
}, |
||||||
|
children: { |
||||||
|
type: 'text', |
||||||
|
key: 'textName', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
vid: hash(`${++nextId}`), |
||||||
|
mid: '', |
||||||
|
theme: { |
||||||
|
color: 'pink', |
||||||
|
margin: 12, |
||||||
|
flexible: true, |
||||||
|
}, |
||||||
|
children: { |
||||||
|
type: 'image', |
||||||
|
key: 'imageKey', |
||||||
|
link: 'linkKey', |
||||||
|
radius: 24, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
vid: hash(`${++nextId}`), |
||||||
|
mid: '', |
||||||
|
theme: { |
||||||
|
color: '#fafbfc', |
||||||
|
margin: 12, |
||||||
|
padding: 24, |
||||||
|
mainAlign: 'center', |
||||||
|
crossAlign: 'center', |
||||||
|
flexible: true, |
||||||
|
}, |
||||||
|
children: { |
||||||
|
type: 'audio', |
||||||
|
key: 'audioKey', |
||||||
|
title: 'title', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
vid: hash(`${++nextId}`), |
||||||
|
mid: '', |
||||||
|
theme: { |
||||||
|
radius: 24, |
||||||
|
color: 'teal', |
||||||
|
}, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
theme: { |
||||||
|
flexible: true, |
||||||
|
gap: 12, |
||||||
|
crossAlign: 'center', |
||||||
|
}, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
theme: { |
||||||
|
padding: 12, |
||||||
|
margin: 12, |
||||||
|
grow: 1, |
||||||
|
}, |
||||||
|
children: { |
||||||
|
vid: hash(`${++nextId}`), |
||||||
|
theme: { |
||||||
|
fontSize: 32, |
||||||
|
}, |
||||||
|
children: 'left', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
vid: hash(`${++nextId}`), |
||||||
|
theme: { |
||||||
|
width: 'auto', |
||||||
|
padding: { |
||||||
|
vertical: 4, |
||||||
|
horizontal: 12, |
||||||
|
}, |
||||||
|
color: 'pink', |
||||||
|
radius: 16, |
||||||
|
}, |
||||||
|
children: 'right222', |
||||||
|
}, |
||||||
|
{ |
||||||
|
theme: { |
||||||
|
width: 48, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
...Array.from(Array.from({ length: 3 })).map<Block>((_, i) => ({ |
||||||
|
vid: hash(`${++nextId}`), |
||||||
|
mid: '', |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
vid: hash(`${++nextId}`), |
||||||
|
theme: { |
||||||
|
fontSize: 22, |
||||||
|
}, |
||||||
|
children: `测试${i}`, |
||||||
|
}, |
||||||
|
], |
||||||
|
})), |
||||||
|
]) |
||||||
|
|
||||||
|
const categories = ref([ |
||||||
|
{ icon: 'trash', text: '媒体' }, |
||||||
|
{ icon: 'trash', text: '图表' }, |
||||||
|
{ icon: 'trash', text: '商品' }, |
||||||
|
{ icon: 'trash', text: '功能' }, |
||||||
|
{ icon: 'trash', text: '素材' }, |
||||||
|
].map(c => ({ |
||||||
|
...c, |
||||||
|
modules: Array.from(Array.from({ length: 102 })).map<Module>((_, i) => ({ |
||||||
|
vid: hash(`${++nextId}`), |
||||||
|
mid: hash(`${++nextId}`), |
||||||
|
title: `${c.text}${i + 1}`, |
||||||
|
maxReferenceCount: -1, |
||||||
|
referenceCount: 0, |
||||||
|
image: undefined, |
||||||
|
configs: [], |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
vid: hash(`${++nextId}`), |
||||||
|
theme: { |
||||||
|
height: 68, |
||||||
|
width: 375, |
||||||
|
border: { color: '#eee' }, |
||||||
|
}, |
||||||
|
children: [ |
||||||
|
String(`${c.text}${i + 1}`), |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
})), |
||||||
|
}))) |
||||||
|
|
||||||
|
categories.value.unshift({ |
||||||
|
icon: 'trash', |
||||||
|
text: '基础', |
||||||
|
modules: [ |
||||||
|
{ |
||||||
|
vid: hash(`${++nextId}`), |
||||||
|
mid: hash(`${++nextId}`), |
||||||
|
title: '轮播图', |
||||||
|
maxReferenceCount: -1, |
||||||
|
referenceCount: 0, |
||||||
|
image: undefined, |
||||||
|
configs: [ |
||||||
|
{ |
||||||
|
type: 'list', |
||||||
|
field: 'items', |
||||||
|
label: '', |
||||||
|
help: '最多可添加10张图片，建议宽度750px；鼠标拖拽左侧圆点可调整图片顺序', |
||||||
|
addable: true, |
||||||
|
configs: [ |
||||||
|
{ |
||||||
|
type: 'image', |
||||||
|
field: 'image', |
||||||
|
// 表示内联数据 |
||||||
|
inlines: [ |
||||||
|
{ |
||||||
|
type: 'text', |
||||||
|
field: 'title', |
||||||
|
label: '标题', |
||||||
|
help: '选填，不超过 4 个字', |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'text', |
||||||
|
field: 'link', |
||||||
|
label: '链接', |
||||||
|
// help: '请输入链接', // 自动生成："请输入${label}" |
||||||
|
}, |
||||||
|
], |
||||||
|
label: '图片', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'object', |
||||||
|
field: 'indicator', |
||||||
|
label: '指示器', |
||||||
|
configs: [ |
||||||
|
{ |
||||||
|
type: 'mark', |
||||||
|
field: 'style', |
||||||
|
label: '指示器样式', |
||||||
|
values: [ |
||||||
|
{ label: '圆形', value: 'circle' }, |
||||||
|
{ label: '直线', value: 'line' }, |
||||||
|
{ label: '数字', value: 'number' }, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'mark', |
||||||
|
field: 'position', |
||||||
|
label: '指示器位置', |
||||||
|
values: [ |
||||||
|
{ label: '居左', value: 'left' }, |
||||||
|
{ label: '居中', value: 'center' }, |
||||||
|
{ label: '居右', value: 'right' }, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'color', |
||||||
|
field: 'color', |
||||||
|
label: '指示器颜色', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'object', |
||||||
|
field: 'background', |
||||||
|
label: '背景', |
||||||
|
configs: [ |
||||||
|
{ |
||||||
|
type: 'bool', |
||||||
|
field: 'enabled', |
||||||
|
label: '是否显示背景色', |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'background', |
||||||
|
field: 'value', |
||||||
|
// 背景的不同实现方式，可以在里面添加 image 选项来支持图片 |
||||||
|
// 这里只能支持颜色和渐变， |
||||||
|
features: ['color', 'gradient'], |
||||||
|
label: '背景', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
theme: { |
||||||
|
height: 200, |
||||||
|
padding: { |
||||||
|
horizontal: 12.0, |
||||||
|
}, |
||||||
|
color: 'cyan', |
||||||
|
}, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
vid: hash(`${++nextId}`), |
||||||
|
theme: { |
||||||
|
width: '100%', |
||||||
|
height: '100%', |
||||||
|
color: 'white', |
||||||
|
radius: 12.0, |
||||||
|
textAlign: 'center', |
||||||
|
}, |
||||||
|
children: '内容', |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}) |
||||||
|
|
||||||
|
const data = ref<Record<string, Record<string, unknown>>>({ |
||||||
|
[blocks.value[0].vid]: { |
||||||
|
textName: '测试 2222', |
||||||
|
}, |
||||||
|
[blocks.value[1].vid]: { |
||||||
|
imageKey: 'https://www.w3schools.com/css/paris.jpg', |
||||||
|
linkKey: 'https://docs.taro.zone/canIUse/', |
||||||
|
}, |
||||||
|
[blocks.value[2].vid]: { |
||||||
|
audioKey: 'https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3', |
||||||
|
title: '啊哈哈', |
||||||
|
}, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<DddBuilder |
||||||
|
:categories="categories" |
||||||
|
:blocks="blocks" |
||||||
|
:sequence="nextId" |
||||||
|
:sources="data" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 496 B |
@ -0,0 +1,229 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { ref, unref } from 'vue' |
||||||
|
import Draggable from 'vuedraggable' |
||||||
|
import type { Block, Module } from '../types' |
||||||
|
import { useContext } from '../context' |
||||||
|
import { hash } from '../utils' |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'DddActivity', |
||||||
|
}) |
||||||
|
|
||||||
|
const currentTab = ref(0) |
||||||
|
const ctx = useContext() |
||||||
|
|
||||||
|
// 递归重建所有 ID |
||||||
|
function clone(v: any): any { |
||||||
|
if (v == null || typeof v != 'object') |
||||||
|
return v |
||||||
|
|
||||||
|
if (Array.isArray(v)) |
||||||
|
return v.slice().map(clone) |
||||||
|
|
||||||
|
const s = Object.create(null) |
||||||
|
for (const [key, val] of Object.entries(v)) { |
||||||
|
if (key === 'vid' && typeof val === 'string' && val.length === 8) |
||||||
|
s[key] = hash(`${++ctx.nextId}`) |
||||||
|
else |
||||||
|
s[key] = clone(val) |
||||||
|
} |
||||||
|
return s |
||||||
|
} |
||||||
|
|
||||||
|
function cloneModule(src: Module): Block { |
||||||
|
// eslint-disable-next-line unused-imports/no-unused-vars |
||||||
|
const { maxReferenceCount, referenceCount, image, configs, ...attrs } = unref(src) |
||||||
|
return clone(attrs) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="ddd-activity"> |
||||||
|
<div class="ddd-activity-header"> |
||||||
|
<slot name="header" /> |
||||||
|
</div> |
||||||
|
<div class="ddd-activity-content"> |
||||||
|
<div class="ddd-activity-tabs"> |
||||||
|
<div |
||||||
|
v-for="(c, i) in ctx.categories" |
||||||
|
:key="i" |
||||||
|
class="ddd-activity-tabs-item" |
||||||
|
:class="{ 'is-active': currentTab === i }" |
||||||
|
@click.stop="currentTab = i" |
||||||
|
> |
||||||
|
<!-- <Icon :name="c.icon" /> --> |
||||||
|
<span>{{ c.text }}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<template v-for="(cat, idx) in ctx.categories" :key="idx"> |
||||||
|
<Draggable |
||||||
|
v-show="currentTab === idx" |
||||||
|
class="ddd-activity-tabs-content" |
||||||
|
:list="cat.modules" |
||||||
|
:group="{ name: 'modules', pull: 'clone' }" |
||||||
|
:clone="cloneModule" |
||||||
|
:component-dat="{ sort: false }" |
||||||
|
:sort="false" |
||||||
|
item-key="id" |
||||||
|
> |
||||||
|
<template #item="{ element }"> |
||||||
|
<div class="ddd-activity-module"> |
||||||
|
<img v-if="element.image" class="ddd-activity-module-image" :src="element.image" /> |
||||||
|
<div v-else class="ddd-activity-module-image">{{ element.title }}</div> |
||||||
|
<div class="ddd-activity-module-title">{{ element.title }}</div> |
||||||
|
<span class="ddd-activity-module-tips">释放鼠标将组件添加到此处</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</Draggable> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
<div class="ddd-activity-footer"> |
||||||
|
<slot name="footer" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.ddd-activity { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: stretch; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
font-size: 13px; |
||||||
|
|
||||||
|
&-header, |
||||||
|
&-footer { |
||||||
|
width: 100%; |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&-content { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: stretch; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
&-tabs { |
||||||
|
position: relative; |
||||||
|
flex-shrink: 0; |
||||||
|
width: 64px; |
||||||
|
padding: 12px 0; |
||||||
|
|
||||||
|
&::after { |
||||||
|
z-index: 0; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
content: ""; |
||||||
|
border-right: 1px solid #ddd; |
||||||
|
} |
||||||
|
|
||||||
|
&-item { |
||||||
|
z-index: 1; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 64px; |
||||||
|
height: 64px; |
||||||
|
user-select: none; |
||||||
|
position: relative; |
||||||
|
cursor: pointer; |
||||||
|
gap: 2px; |
||||||
|
transition: all 200ms; |
||||||
|
|
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
content: ""; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
width: 2px; |
||||||
|
background: transparent; |
||||||
|
transition: all 200ms; |
||||||
|
} |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background: rgba(#000, 0.08); |
||||||
|
} |
||||||
|
|
||||||
|
&.is-active { |
||||||
|
color: blue; |
||||||
|
background: rgba(2, 86, 255, 0.1); |
||||||
|
|
||||||
|
&::after { |
||||||
|
background: blue; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-content { |
||||||
|
padding: 12px; |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
gap: 12px; |
||||||
|
justify-items: flex-start; |
||||||
|
align-content: flex-start; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-module { |
||||||
|
// 在左边预览图时的样式 |
||||||
|
&:not(.is-ghost) { |
||||||
|
width: 100px; |
||||||
|
border: 1px solid #eee; |
||||||
|
user-select: none; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
text-align: center; |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
&-image { |
||||||
|
height: 68px; |
||||||
|
width: 98px; |
||||||
|
line-height: 68px; |
||||||
|
color: #eee; |
||||||
|
font-size: 24px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
&-title { |
||||||
|
height: 24px; |
||||||
|
line-height: 24px; |
||||||
|
background: #eee; |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
&-tips { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
// 拖拽到模拟器上的样式 |
||||||
|
// 此时，内部内容会变成字符串 “释放鼠标讲组件添加到此处”。 |
||||||
|
&.is-ghost { |
||||||
|
background: rgba(0, 0, 255, 0.1); |
||||||
|
color: blue; |
||||||
|
padding: 8px; |
||||||
|
text-align: center; |
||||||
|
border: 1px dashed blue; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
&.is-ghost &-image, |
||||||
|
&.is-ghost &-title { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
&.is-ghost &-tips { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import type { UnwrapNestedRefs } from 'vue' |
||||||
|
import { provide, reactive, unref } from 'vue' |
||||||
|
import type { Block, Category } from '../types' |
||||||
|
import type { EngineContext, Exported, PageConfig } from '../context' |
||||||
|
import { contextKey, parentViewIdKey, provideBlockId } from '../context' |
||||||
|
import DddEngineer from './Engineer.vue' |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'DddBuilder', |
||||||
|
}) |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
page?: PageConfig |
||||||
|
categories: Category[] |
||||||
|
blocks: Block[] |
||||||
|
sequence?: number |
||||||
|
sources?: Record<string, Record<string, unknown>> |
||||||
|
}>() |
||||||
|
|
||||||
|
let ctx: UnwrapNestedRefs<EngineContext> |
||||||
|
|
||||||
|
// eslint-disable-next-line prefer-const |
||||||
|
ctx = reactive<EngineContext>({ |
||||||
|
target: 'routine', |
||||||
|
activeBlockId: undefined, |
||||||
|
activeViewId: undefined, |
||||||
|
draggingViewId: undefined, |
||||||
|
page: props.page ?? { |
||||||
|
fullscreen: false, |
||||||
|
brightness: 'light', |
||||||
|
safeAreaInsetTop: true, |
||||||
|
safeAreaInsetBottom: true, |
||||||
|
backgroundColor: '#f1f1f1', |
||||||
|
header: { |
||||||
|
enabled: true, |
||||||
|
custom: undefined, |
||||||
|
title: 'PageTitle', |
||||||
|
centerTitle: false, |
||||||
|
height: 44, |
||||||
|
color: '#ffffff', |
||||||
|
textColor: '#000000', |
||||||
|
bordered: true, |
||||||
|
borderColor: '#ddd', |
||||||
|
}, |
||||||
|
footer: { |
||||||
|
enabled: false, |
||||||
|
height: 44, |
||||||
|
color: '#ffffff', |
||||||
|
textColor: '#000000', |
||||||
|
bordered: true, |
||||||
|
borderColor: '#ddd', // 'rgba(51,51,51,.1)', |
||||||
|
view: undefined, |
||||||
|
}, |
||||||
|
}, |
||||||
|
canvas: { |
||||||
|
focused: false, |
||||||
|
scale: 1, |
||||||
|
}, |
||||||
|
categories: props.categories!, |
||||||
|
blocks: props.blocks, |
||||||
|
nextId: props.sequence ?? Date.now(), |
||||||
|
sources: props.sources ?? Object.create(null), |
||||||
|
export(): Exported { |
||||||
|
const attrs = unref(ctx.page) |
||||||
|
const data = unref(ctx.sources) |
||||||
|
return { attrs, data } |
||||||
|
}, |
||||||
|
}) |
||||||
|
provideBlockId('') |
||||||
|
provide(parentViewIdKey, '') |
||||||
|
provide(contextKey, ctx) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<DddEngineer /> |
||||||
|
</template> |
||||||
@ -0,0 +1,335 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { computed, ref } from 'vue' |
||||||
|
import Draggable from 'vuedraggable' |
||||||
|
import { useContext } from '../context' |
||||||
|
import { RenderBlock } from '../render' |
||||||
|
import { DddView } from '../views' |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'DddCanvas', |
||||||
|
}) |
||||||
|
|
||||||
|
// const emit = defineEmits<{ |
||||||
|
// (event: 'add', data: AddEventInfo): void |
||||||
|
// (event: 'swap', data: SwapEventInfo): void |
||||||
|
// }>() |
||||||
|
|
||||||
|
// FIXME: 暂时使用 key 强制更新 |
||||||
|
const key = ref(0) |
||||||
|
|
||||||
|
const ctx = useContext() |
||||||
|
|
||||||
|
const headerColor = computed(() => ctx.page.header.color ?? '#fff') |
||||||
|
const headerTextColor = computed(() => ctx.page.header.textColor ?? '#000') |
||||||
|
const headerBorderColor = computed(() => ctx.page.header.borderColor ?? 'rgba(51,51,51,.1)') |
||||||
|
const headerHeight = computed(() => `${ctx.page.header.height ?? 44}px`) |
||||||
|
|
||||||
|
const footerColor = computed(() => ctx.page.footer.color ?? '#fff') |
||||||
|
const footerTextColor = computed(() => ctx.page.footer.textColor ?? '#000') |
||||||
|
const footerBorderColor = computed(() => ctx.page.footer.borderColor ?? 'rgba(51,51,51,.1)') |
||||||
|
const footerHeight = computed(() => `${ctx.page.footer.height ?? 44}px`) |
||||||
|
|
||||||
|
const backgroundColor = computed(() => { |
||||||
|
return ctx.page.backgroundColor |
||||||
|
}) |
||||||
|
|
||||||
|
const measureLine = computed(() => { |
||||||
|
return `${1 / ctx.canvas.scale}px` |
||||||
|
}) |
||||||
|
|
||||||
|
// interface EmulatorChangedEvent { |
||||||
|
// added?: AddEventInfo |
||||||
|
// moved?: SwapEventInfo |
||||||
|
// } |
||||||
|
// |
||||||
|
// const handleDraggingOver = (e: EmulatorChangedEvent): void => { |
||||||
|
// if (e.moved) { |
||||||
|
// const {oldIndex, newIndex, element} = e.moved |
||||||
|
// emit('swap', {oldIndex, newIndex, element}) |
||||||
|
// } |
||||||
|
// if (e.added) { |
||||||
|
// const {newIndex, element} = e.added |
||||||
|
// emit('add', {newIndex, element}) |
||||||
|
// } |
||||||
|
// } |
||||||
|
|
||||||
|
interface DraggableEvent { |
||||||
|
oldDraggableIndex: number |
||||||
|
newDraggableIndex: number |
||||||
|
} |
||||||
|
|
||||||
|
function handleDragStart(e: DraggableEvent): void { |
||||||
|
ctx.draggingViewId = ctx.blocks[e.oldDraggableIndex].vid |
||||||
|
} |
||||||
|
|
||||||
|
function handleDragEnd(): void { |
||||||
|
ctx.draggingViewId = undefined |
||||||
|
} |
||||||
|
|
||||||
|
function handleDragAdd(e: DraggableEvent): void { |
||||||
|
const block = ctx.blocks[e.newDraggableIndex] |
||||||
|
ctx.activeViewId = block.vid |
||||||
|
ctx.activeBlockId = block.vid |
||||||
|
ctx.hoverViewId = '#canvas' |
||||||
|
ctx.configurator = 'block' |
||||||
|
key.value++ |
||||||
|
} |
||||||
|
|
||||||
|
function handleCanvasClick(e: MouseEvent): void { |
||||||
|
if ((e.target as HTMLElement).classList.contains('ddd-canvas')) { |
||||||
|
ctx.canvas.focused = true |
||||||
|
ctx.activeViewId = undefined |
||||||
|
ctx.activeBlockId = undefined |
||||||
|
ctx.configurator = 'page' |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div |
||||||
|
class="ddd-canvas" |
||||||
|
:class="{ |
||||||
|
'is-focused': ctx.canvas.focused, |
||||||
|
'is-active': ctx.activeViewId === '#canvas', |
||||||
|
'is-hover': ctx.hoverViewId === '#canvas', |
||||||
|
}" |
||||||
|
> |
||||||
|
<!-- 中间自定义内容 --> |
||||||
|
<!-- @change="handleDraggingOver" --> |
||||||
|
<Draggable |
||||||
|
:key="key" |
||||||
|
v-model="ctx.blocks" |
||||||
|
class="ddd-canvas-viewer" |
||||||
|
:animation="200" |
||||||
|
:disabled="false" |
||||||
|
:component-data="{ |
||||||
|
tag: 'div', |
||||||
|
type: 'transition-group', |
||||||
|
}" |
||||||
|
:group="{ |
||||||
|
name: 'emulator', |
||||||
|
put: 'modules', |
||||||
|
}" |
||||||
|
ghost-class="is-ghost" |
||||||
|
item-key="id" |
||||||
|
@click="handleCanvasClick" |
||||||
|
@start="handleDragStart" |
||||||
|
@end="handleDragEnd" |
||||||
|
@add="handleDragAdd" |
||||||
|
@change="key++" |
||||||
|
> |
||||||
|
<template #header> |
||||||
|
<div v-show="ctx.page.safeAreaInsetTop && !ctx.page.fullscreen" class="ddd-canvas-safe-area-inset-top" /> |
||||||
|
<div v-show="ctx.page.header.enabled" class="ddd-canvas-safe-area-inset-header" /> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template #footer> |
||||||
|
<div v-show="ctx.page.footer.enabled" class="ddd-canvas-safe-area-inset-footer" /> |
||||||
|
<div v-show="ctx.page.safeAreaInsetBottom && !ctx.page.fullscreen" class="ddd-canvas-safe-area-inset-bottom" /> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template #item="{ element }"> |
||||||
|
<RenderBlock class="ddd-view" :block="element" /> |
||||||
|
</template> |
||||||
|
</Draggable> |
||||||
|
|
||||||
|
<!-- 页面头部 --> |
||||||
|
<DddView |
||||||
|
v-show="ctx.page.header.enabled" |
||||||
|
vid="#header" |
||||||
|
class="ddd-canvas-header" |
||||||
|
:class="{ 'is-bordered': ctx.page.header.bordered ?? true }" |
||||||
|
> |
||||||
|
<div v-show="ctx.page.safeAreaInsetTop && !ctx.page.fullscreen" class="ddd-canvas-safe-area-inset-top" /> |
||||||
|
<div |
||||||
|
class="ddd-canvas-header-title" |
||||||
|
:style="{ textAlign: ctx.page.header.centerTitle ? 'center' : undefined }" |
||||||
|
v-text="ctx.page.header.title" |
||||||
|
/> |
||||||
|
</DddView> |
||||||
|
|
||||||
|
<!-- 页面底部 --> |
||||||
|
<DddView |
||||||
|
v-show="ctx.page.footer.enabled" |
||||||
|
vid="#footer" |
||||||
|
class="ddd-canvas-footer" |
||||||
|
:class="{ 'is-bordered': ctx.page.footer.bordered ?? true }" |
||||||
|
> |
||||||
|
<div class="ddd-canvas-footer-content" /> |
||||||
|
<div v-show="ctx.page.safeAreaInsetBottom && !ctx.page.fullscreen" class="ddd-canvas-safe-area-inset-bottom" /> |
||||||
|
</DddView> |
||||||
|
|
||||||
|
<!-- 顶部状态栏、小程序胶囊按钮、底部操作指示器 --> |
||||||
|
<template v-if="!ctx.page.fullscreen"> |
||||||
|
<div class="ddd-canvas-statusbar"> |
||||||
|
<img style="height:20px" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAAUCAYAAAB2132+AAAAAXNSR0IArs4c6QAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAABd6ADAAQAAAABAAAAFAAAAABeOGisAAAGY0lEQVR4Ae2ZCWwVVRSGX6VaRItogShW8xCsilZwQ8QqQRQjilaLEhG1uEWIS9QgrmlFUYILwaIxRuKCCrhgVcANbIjGqMiSWGrSsFTEJSgYLUtww+9v58ab6fS9tjxbXt75k6/33jMz9837e++ZM20sZjIHzAFzwBwwB8wBc8AcMAfMAXPAHDAHzAFzwBwwB8wBc8AcMAfMgVQ4kJWKSWwOc8AcMAfMgUgHehItiDzS9mAtl25KdvleyU5o5fFizt8VoH5z6sWB+2Ax/A7rgnYJbRkcCiZzIAcLepgN5sBuODCBa68OXa9kOwMWwUTw8+DZjGfD63AxOB1C5yYY5AJBeyttbijmhoV0Stwgha3m1NwJ5X+phCe28OAA7zy/74VjMxlUw4MwDPQw6Az/wFlQDt/A02DKTAey+dpPwTZQhbIGToJE0lvoAqj3TtL6vgF2wGgvHtWdS1Br8cLQQRePWs9jgmtUkJj2LAdO5HbK4VGIg9P+dN6BTnAvnAFTQeoPr8AyeBymwQXQBRaC1uLtMAokFaH54K85xZ2U314FrWf1U0H3YM4i2v9Vq5hdG2Jl8CnlwVgx9X3dxWAzaMP+DFUgcy+D00Gb735QXCbKsC2gX4IpsxyYxNfdCefBwfAwbARV8s1pIgf0Fug2mtbNBlgNWo+JkntXjm+HtaCKzZdL7s/6waD/Ca3mLos4ZqGOdUB5ZTrUgP/7KWH8OTgNoaO8pEKgAlyip9twXSWtis4nFUADYVZDLxZ7glbrszkp50laI6ni14YZYzE3dzBs2ugL7Y70pJOiqprGI//93EpX1ZUqdG20obACjoQR0AdkuuKXg879O4DGlEEOnMl3rYL34CfQJlWVNBwOhCWgdeI0mM7N8JALBO0dtC2pcFSJ7QBVZSOhG/jShlKVfoAXLKSvjb7di1l3z3HgNW7lNvgydEt9GasoddID/SBQRRx1rID4pzAMxsMj8BYoXymnaX22p8JrUw+rSLUmuRczg3v6qN9azeQCGZUL6+FreAm0Ie+BKTAHlPD1Gq7Xp6PAlHkO6LW4H+gBL53a2MQOp9XfPlVJnRLE8mi1bq4DvRE6qTBQFa41m0xXcsJ8WARK1peCLyUDrdmrvKA2eiXUezHr7vkOxLlFveE5fU9Ha2Q/iMNv4PQdHcX/gHOhB0yGBaAHh4oO5SkVp/tAR0hFzqCoD06U3JXAy8Al8gHeBH7fCyft/hKc8QHtcSBT9eRUZaRWVf0J8CFIWxob+5lhDrzJ9z0MPgJtJhUG2mDZUANxeAyU/F8EJWa3Zui2SnpgDIF58CdUgpJ9WLMIKKFLKlDGgmKm9HJAD28VBE770tHvXYlcx7qDkxK7Ck1pI2gtLgXlLj0UtA6+glGwHDpDR0hvHk2UKLnr1aMc1KZaquC1KdX2hf5BewztC2AVOyZksPRWVwpd4RyYBFqrP4D0LagQuBZUDLwM2nD5oPPU16Ztia7gpCy4CKaD5iiCOPiazaAPDAVdo8JjMZjSywGtnbh3y+rXwl8QdUzFRFi3EKgAFQEPwDXwBoyE9pb+nPhF1IcmSu5R56cyVspk2jDayKrkq0GvPePAlNkOHM3X10YbCKeB/q6ZDSvAV28GvUDVk9bRZOgS9FUwtETaoGtABcWxwQWq4MYGfddspqOqfgKMh+dBDxhTejnwLrc7GFRYaq3oH5OfgfQ26MGdA/lwPbhjdBukNbkatkIdHA97Qz+og/bWVD5Qa7OJOjK562ZcxaWKXfyooCnjHcjDgY9hBOg1+W6ogrXQE5TIVSVNAR13qKLaFoyV8JPpZE7QursRhnvMo6+kH9ZzBEpAbwZK7qb0c2A9t3wnLAetp8JgTNNQbK6k3QA1sArmgC+tlWeCwHxaFaTVsA6WQZSWRgXbGAvPFZnYk82tL7YL1ErFoLFQX2rJOY1nNv9TDxgZbTIHfAcqGGjhar0pUatCl+KwCUohrHEE6kPBbow1x+hQXMMZoLeCThp4UqLXNfpH7lzQg0bSWq2D98FJ15e5gbVp40Aud3pEM3ertaYiIiytk97hYILxGI4VJTje1kOa85JkF2clO8GOmwMd6IA2Ux4omZvMgXRzIIcbPh8KUnzjtcy3EHameF6bzhwwB8wBc8AcMAfMAXPAHDAHzAFzwBwwB8wBc8AcMAfMAXPAHDAHIhz4FwO/QgbhZ4FRAAAAAElFTkSuQmCC" /> |
||||||
|
</div> |
||||||
|
<div v-if="ctx.target === 'routine'" class="ddd-canvas-routine-button"> |
||||||
|
<svg width="87" height="32" viewBox="0 0 87 32" xmlns="http://www.w3.org/2000/svg"> |
||||||
|
<rect width="87" height="32" rx="16" x="0" y="0" fill="rgba(0,0,0,0.3)" /> |
||||||
|
<rect id="rect5" width="0.5" height="18.5" fill="rgba(255,255,255,0.6)" x="43.5" y="6.5" /> |
||||||
|
<path d="M 19.5,16.25 A 3.25,3.25 0 1 1 22.75,19.5 3.25,3.25 0 0 1 19.5,16.25 Z M 28,16.5 a 2,2 0 1 1 2,2 2,2 0 0 1 -2,-2 z m -14.5,0 a 2,2 0 1 1 2,2 2,2 0 0 1 -2,-2 z" fill="#ffffff" /> |
||||||
|
<path d="m 59.187,21.813 a 8.716,8.716 0 0 1 -2.52,-6.222 8,8 0 0 1 2.52,-5.8 8.915,8.915 0 0 1 6.223,-2.458 8.288,8.288 0 0 1 5.8,2.459 8.18,8.18 0 0 1 2.457,5.799 8.918,8.918 0 0 1 -2.46,6.223 8,8 0 0 1 -5.797,2.519 8.714,8.714 0 0 1 -6.223,-2.52 z m -0.52,-5.739 a 6.521,6.521 0 0 0 6.741,6.259 6.423,6.423 0 0 0 6.259,-6.259 6.521,6.521 0 0 0 -6.259,-6.741 6.593,6.593 0 0 0 -6.741,6.741 z m 3.5,-0.241 a 3,3 0 1 1 3,3 3,3 0 0 1 -3,-3 z" fill="#ffffff" /> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
<div class="ddd-canvas-indicator" /> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
.ddd-canvas { |
||||||
|
--canvas-measure-line: v-bind(measureLine); |
||||||
|
|
||||||
|
z-index: var(--emulator-z-index); |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
width: 375px; |
||||||
|
min-height: var(--canvas-min-height); |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: stretch; |
||||||
|
background-color: v-bind(backgroundColor); |
||||||
|
opacity: var(--emulator-opacity, 1); |
||||||
|
user-select: none; |
||||||
|
box-shadow: 0 2px 4px 1px rgba(40, 120, 255, 0.08), 0 0 6px 1px rgba(0, 0, 0, 0.08); |
||||||
|
|
||||||
|
&.is-focused, |
||||||
|
&.is-active { |
||||||
|
outline: var(--canvas-measure-line) solid var(--canvas-active-highlight-color); |
||||||
|
} |
||||||
|
|
||||||
|
&.is-hover { |
||||||
|
outline: var(--canvas-measure-line) solid var(--canvas-hover-highlight-color); |
||||||
|
} |
||||||
|
|
||||||
|
&-viewer { |
||||||
|
z-index: 1; |
||||||
|
position: relative; |
||||||
|
min-height: var(--canvas-min-height); |
||||||
|
//outline: 1px dashed red; |
||||||
|
} |
||||||
|
|
||||||
|
&-header, |
||||||
|
&-footer { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&.is-bordered::after { |
||||||
|
z-index: 2; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
content: ""; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-header { |
||||||
|
z-index: 2; |
||||||
|
top: 0; |
||||||
|
background-color: v-bind(headerColor); |
||||||
|
color: v-bind(headerTextColor); |
||||||
|
|
||||||
|
&.is-bordered::after { |
||||||
|
bottom: 0; |
||||||
|
border-bottom-style: solid; |
||||||
|
border-bottom-width: 1px; |
||||||
|
border-bottom-color: v-bind(headerBorderColor); |
||||||
|
} |
||||||
|
|
||||||
|
&-title { |
||||||
|
line-height: v-bind(headerHeight); |
||||||
|
height: v-bind(headerHeight); |
||||||
|
text-align: left; |
||||||
|
font-weight: bold; |
||||||
|
padding-left: 12px; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-footer { |
||||||
|
z-index: 3; |
||||||
|
bottom: 0; |
||||||
|
background-color: v-bind(footerColor); |
||||||
|
color: v-bind(footerTextColor); |
||||||
|
|
||||||
|
&-content { |
||||||
|
height: v-bind(footerHeight); |
||||||
|
} |
||||||
|
|
||||||
|
&.is-bordered::after { |
||||||
|
top: 0; |
||||||
|
border-top-style: solid; |
||||||
|
border-top-width: 1px; |
||||||
|
border-top-color: v-bind(footerBorderColor); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-statusbar, |
||||||
|
&-indicator, |
||||||
|
&-routine-button { |
||||||
|
z-index: 3; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
pointer-events: none; |
||||||
|
//outline: 1px dashed #0256FF; |
||||||
|
} |
||||||
|
|
||||||
|
&-statusbar { |
||||||
|
height: var(--canvas-safe-area-inset-top); |
||||||
|
padding: 0 12px; |
||||||
|
top: 0; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-routine-button { |
||||||
|
top: var(--canvas-safe-area-inset-top); |
||||||
|
height: 44px; |
||||||
|
width: 100%; |
||||||
|
align-items: flex-end; |
||||||
|
padding-right: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
&-indicator { |
||||||
|
bottom: 0; |
||||||
|
height: var(--canvas-safe-area-inset-bottom); |
||||||
|
//outline: 1px dashed green; |
||||||
|
|
||||||
|
&::after { |
||||||
|
display: block; |
||||||
|
content: ""; |
||||||
|
width: 100px; |
||||||
|
height: 4px; |
||||||
|
margin: 0 auto; |
||||||
|
border-radius: 2px; |
||||||
|
background: #242424; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-safe-area-inset-top { |
||||||
|
height: var(--canvas-safe-area-inset-top); |
||||||
|
} |
||||||
|
|
||||||
|
&-safe-area-inset-header { |
||||||
|
height: v-bind(headerHeight); |
||||||
|
} |
||||||
|
|
||||||
|
&-safe-area-inset-bottom { |
||||||
|
height: var(--canvas-safe-area-inset-bottom); |
||||||
|
} |
||||||
|
|
||||||
|
&-safe-area-inset-footer { |
||||||
|
height: v-bind(footerHeight); |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,257 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { ref, watch } from 'vue' |
||||||
|
import type { ConfiguratorType } from '../context' |
||||||
|
import { useContext, useModule } from '../context' |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'DddConfigurator', |
||||||
|
}) |
||||||
|
|
||||||
|
interface Tab { |
||||||
|
key: ConfiguratorType |
||||||
|
text: string |
||||||
|
} |
||||||
|
|
||||||
|
const tabs: Tab[] = [ |
||||||
|
{ key: 'page', text: '页面' }, |
||||||
|
{ key: 'block', text: '内容' }, |
||||||
|
{ key: 'view', text: '样式' }, |
||||||
|
] |
||||||
|
|
||||||
|
const currentTab = ref<Tab['key']>() |
||||||
|
const ctx = useContext() |
||||||
|
const module = useModule() |
||||||
|
|
||||||
|
watch(() => ctx.configurator, (v) => { |
||||||
|
currentTab.value = tabs.find(i => i.key === (v ?? 'page'))?.key ?? 'page' |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="ddd-configurator"> |
||||||
|
<div class="ddd-configurator-header"> |
||||||
|
<button |
||||||
|
v-for="(t) in tabs" |
||||||
|
:key="t.key" |
||||||
|
type="button" |
||||||
|
:class="{ 'is-active': currentTab === t.key }" |
||||||
|
@click="currentTab = t.key" |
||||||
|
v-text="t.text" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div v-show="currentTab === 'page' " class="ddd-configurator-content"> |
||||||
|
<fieldset> |
||||||
|
<legend>应用</legend> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<input v-model="ctx.target" type="radio" name="ctx.target" value="routine" /> |
||||||
|
<span>微信小程序</span> |
||||||
|
</label> |
||||||
|
<label> |
||||||
|
<input v-model="ctx.target" type="radio" name="ctx.target" value="app" /> |
||||||
|
<span>手机APP</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<input v-model="ctx.page.fullscreen" type="checkbox" /> |
||||||
|
<span>全屏模式</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<input v-model="ctx.page.safeAreaInsetTop" type="checkbox" /> |
||||||
|
<span>开启顶部安全区域</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<input v-model="ctx.page.safeAreaInsetBottom" type="checkbox" /> |
||||||
|
<span>开启底部安全区域</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<span>页面背景颜色</span> |
||||||
|
<input v-model="ctx.page.backgroundColor" type="color" /> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</fieldset> |
||||||
|
|
||||||
|
<fieldset> |
||||||
|
<legend>头部</legend> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<input v-model="ctx.page.header.enabled" type="checkbox" /> |
||||||
|
<span>开启头部功能</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<span>页面标题</span> |
||||||
|
<input v-model="ctx.page.header.title" type="text" placeholder="页面标题" /> |
||||||
|
</label> |
||||||
|
<label> |
||||||
|
<input v-model="ctx.page.header.centerTitle" type="checkbox" /> |
||||||
|
<span>标题居中</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<input v-model="ctx.page.header.custom" type="checkbox" /> |
||||||
|
<span>内容自定义</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<span>高度</span> |
||||||
|
<input v-model="ctx.page.header.height" type="number" min="0" placeholder="头部高度，不包括状态栏" /> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<span>背景颜色</span> |
||||||
|
<input v-model="ctx.page.header.color" type="color" /> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<span>文字颜色</span> |
||||||
|
<input v-model="ctx.page.header.textColor" type="color" /> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<input v-model="ctx.page.header.bordered" type="checkbox" /> |
||||||
|
<span>开启下边边框</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<span>下边边框颜色</span> |
||||||
|
<input v-model="ctx.page.header.borderColor" type="color" /> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</fieldset> |
||||||
|
|
||||||
|
<fieldset> |
||||||
|
<legend>底部</legend> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<input v-model="ctx.page.footer.enabled" type="checkbox" /> |
||||||
|
<span>开启底部功能</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<span>高度</span> |
||||||
|
<input v-model="ctx.page.footer.height" type="number" min="0" placeholder="头部高度，不包括状态栏" /> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<span>背景颜色</span> |
||||||
|
<input v-model="ctx.page.footer.color" type="color" /> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<span>文字颜色</span> |
||||||
|
<input v-model="ctx.page.footer.textColor" type="color" /> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<input v-model="ctx.page.footer.bordered" type="checkbox" /> |
||||||
|
<span>开启上边框</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<label> |
||||||
|
<span>上边框颜色</span> |
||||||
|
<input v-model="ctx.page.footer.borderColor" type="color" /> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</fieldset> |
||||||
|
</div> |
||||||
|
<div v-show="currentTab === 'block'" class="ddd-configurator-content"> |
||||||
|
<div> |
||||||
|
<pre><code>{{ module }}</code></pre> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-show="currentTab === 'view'" class="ddd-configurator-content"> |
||||||
|
<div> |
||||||
|
<pre><code>{{ ctx.blocks }}</code></pre> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.ddd-configurator { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
// fixme: 如果是不使用 fieldset 标签 |
||||||
|
// 记得删除这里的代码 |
||||||
|
fieldset { |
||||||
|
background: transparent; |
||||||
|
border-color: #eee; |
||||||
|
border-radius: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
&-header { |
||||||
|
z-index: 2; |
||||||
|
position: sticky; |
||||||
|
display: flex; |
||||||
|
top: 0; |
||||||
|
width: 100%; |
||||||
|
height: 44px; |
||||||
|
line-height: 44px; |
||||||
|
padding: 0 12px; |
||||||
|
flex-shrink: 0; |
||||||
|
background: #fff; |
||||||
|
border-bottom: 1px solid #ddd; |
||||||
|
|
||||||
|
button { |
||||||
|
position: relative; |
||||||
|
height: 44px; |
||||||
|
padding: 0 16px; |
||||||
|
border: none; |
||||||
|
background: transparent; |
||||||
|
appearance: none; |
||||||
|
box-sizing: border-box; |
||||||
|
transition: all 200ms; |
||||||
|
|
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
content: ""; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
height: 2px; |
||||||
|
transition: all 200ms; |
||||||
|
} |
||||||
|
|
||||||
|
&.is-active { |
||||||
|
background: rgba(#0256FF, 0.1); |
||||||
|
color: #0256FF; |
||||||
|
|
||||||
|
&::after { |
||||||
|
background-color: #0256FF; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-content { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
flex: 1; |
||||||
|
padding: 12px; |
||||||
|
overflow: auto; |
||||||
|
//background-color: #eee; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,101 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { ref } from 'vue' |
||||||
|
import { useContext, useScale } from '../context' |
||||||
|
import { DddView } from '../views' |
||||||
|
import DddCanvas from './Canvas.vue' |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'DddDesigner', |
||||||
|
}) |
||||||
|
|
||||||
|
const ctx = useContext() |
||||||
|
const scale = useScale() |
||||||
|
|
||||||
|
let pageX = 0 |
||||||
|
let pageY = 0 |
||||||
|
|
||||||
|
const canMove = ref(false) |
||||||
|
const x = ref((window.innerWidth - 375 - 324) / 2 + 324) |
||||||
|
const y = ref(24) |
||||||
|
|
||||||
|
function onMousedown(e: MouseEvent): void { |
||||||
|
canMove.value = true |
||||||
|
pageX = e.pageX - x.value |
||||||
|
pageY = e.pageY - y.value |
||||||
|
|
||||||
|
ctx.activeBlockId = undefined |
||||||
|
ctx.activeViewId = undefined |
||||||
|
ctx.configurator = undefined |
||||||
|
ctx.canvas.focused = true |
||||||
|
} |
||||||
|
|
||||||
|
function onMousemove(e: MouseEvent): void { |
||||||
|
if (canMove.value) { |
||||||
|
x.value = e.pageX - pageX! |
||||||
|
y.value = e.pageY - pageY! |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function onMouseup(): void { |
||||||
|
canMove.value = false |
||||||
|
} |
||||||
|
|
||||||
|
function onMousewheel(e: WheelEvent): void { |
||||||
|
if (e.ctrlKey || e.metaKey) { |
||||||
|
if (e.deltaY < 0) |
||||||
|
scale.incr() |
||||||
|
else |
||||||
|
scale.decr() |
||||||
|
} |
||||||
|
else { |
||||||
|
x.value -= e.deltaX |
||||||
|
y.value -= e.deltaY |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// TODO(hupeh): 不使用 Vue 更新相关鼠标移入移出的效果，防止频繁更新视图 |
||||||
|
function onMouseover(e: MouseEvent): void { |
||||||
|
if (!ctx.draggingViewId) { |
||||||
|
let el = e.target as HTMLElement | null | undefined |
||||||
|
while (el) { |
||||||
|
const widgetId = (el as HTMLElement)?.dataset?.viewId |
||||||
|
if (widgetId && widgetId !== ctx.activeViewId) { |
||||||
|
ctx.hoverViewId = widgetId |
||||||
|
return |
||||||
|
} |
||||||
|
el = el?.parentNode as HTMLElement |
||||||
|
} |
||||||
|
ctx.hoverViewId = '#canvas' |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div |
||||||
|
class="ddd-designer" |
||||||
|
@mousedown.left="onMousedown" |
||||||
|
@mousemove="onMousemove" |
||||||
|
@mouseup="onMouseup" |
||||||
|
@mouseleave="onMouseup" |
||||||
|
@wheel.passive="onMousewheel" |
||||||
|
> |
||||||
|
<DddView |
||||||
|
:is="DddCanvas" |
||||||
|
:style="`transform: translate(${x}px,${y}px) scale(${ctx.canvas.scale})`" |
||||||
|
vid="#canvas" |
||||||
|
@mouseover="onMouseover" |
||||||
|
@mousedown.stop |
||||||
|
@mousemove.stop |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.ddd-designer { |
||||||
|
z-index: 1; |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #eee; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,126 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { useContext, useScale } from '../context' |
||||||
|
import Activity from './Activity.vue' |
||||||
|
import Configurator from './Configurator.vue' |
||||||
|
import Designer from './Designer.vue' |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'DddEngineer', |
||||||
|
}) |
||||||
|
|
||||||
|
const ctx = useContext() |
||||||
|
const scale = useScale() |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="ddd-engineer"> |
||||||
|
<div class="ddd-engineer-header"> |
||||||
|
<div> |
||||||
|
<div /> |
||||||
|
</div> |
||||||
|
<div style="display: flex;align-items: center"> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
:disabled="ctx.canvas.scale <= scale.min" |
||||||
|
@click="scale.decr()" |
||||||
|
v-text="'-'" |
||||||
|
/> |
||||||
|
<span |
||||||
|
style="display: inline-block;width: 5em;text-align: center" |
||||||
|
>{{ Math.ceil(ctx.canvas.scale * 100) }}%</span> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
:disabled="ctx.canvas.scale >= scale.max" |
||||||
|
@click="scale.incr()" |
||||||
|
v-text="'+'" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<button type="button" @click="ctx.configurator = 'page'"> |
||||||
|
页面配置 |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="ddd-engineer-activity"> |
||||||
|
<Activity /> |
||||||
|
</div> |
||||||
|
<transition name="ddd-engineer-configurator"> |
||||||
|
<div v-show="ctx.configurator" class="ddd-engineer-configurator"> |
||||||
|
<Configurator /> |
||||||
|
</div> |
||||||
|
</transition> |
||||||
|
<Designer class="ddd-engineer-body" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
.ddd-engineer { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
&-header { |
||||||
|
z-index: 2; |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 44px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
background: #fff; |
||||||
|
padding: 0 12px; |
||||||
|
box-sizing: border-box; |
||||||
|
|
||||||
|
&::after { |
||||||
|
z-index: 10; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
content: ""; |
||||||
|
border-bottom: 1px solid #ddd; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-body { |
||||||
|
z-index: 1; |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: calc(100% - 44px); |
||||||
|
background: #eee; |
||||||
|
} |
||||||
|
|
||||||
|
&-activity { |
||||||
|
z-index: 3; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 44px; |
||||||
|
width: 324px; |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
&-configurator { |
||||||
|
z-index: 3; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 44px; |
||||||
|
width: 324px; |
||||||
|
background-color: #fff; |
||||||
|
opacity: 1; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&-enter-from, |
||||||
|
&-leave-to { |
||||||
|
opacity: 0; |
||||||
|
transform: translateX(100%); |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
|
||||||
|
&-enter-active, |
||||||
|
&-leave-active { |
||||||
|
transition: opacity 200ms ease-out, transform 200ms ease-out; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,138 @@ |
|||||||
|
import type { ComputedRef, InjectionKey, UnwrapNestedRefs } from 'vue' |
||||||
|
import { computed, inject, provide } from 'vue' |
||||||
|
import type { Block, Category, Module, Page } from './types' |
||||||
|
import { valueOf } from './utils' |
||||||
|
|
||||||
|
/** 画布配置 */ |
||||||
|
export interface CanvasConfig { |
||||||
|
/** 画布是否聚焦 */ |
||||||
|
focused: boolean |
||||||
|
/** 画布缩放比例 */ |
||||||
|
scale: number |
||||||
|
} |
||||||
|
|
||||||
|
export interface PageConfig extends Omit<Page, 'body'> {} |
||||||
|
|
||||||
|
export type ConfiguratorType = |
||||||
|
| 'page' |
||||||
|
| 'block' |
||||||
|
| 'view' |
||||||
|
|
||||||
|
export interface Exported { |
||||||
|
attrs: PageConfig |
||||||
|
data: Record<string, Record<string, unknown>> |
||||||
|
} |
||||||
|
|
||||||
|
export interface EngineContext { |
||||||
|
/** 目标 */ |
||||||
|
target?: 'app' | 'routine' |
||||||
|
/** 当前选中的模板 */ |
||||||
|
activeBlockId?: string |
||||||
|
/** 当前选中的可编辑组件 */ |
||||||
|
activeViewId?: string |
||||||
|
/** 鼠标进入的可编辑组件 */ |
||||||
|
hoverViewId?: string |
||||||
|
/** 正在被拖拽的模板 */ |
||||||
|
draggingViewId?: string |
||||||
|
/** 当前配置 */ |
||||||
|
configurator?: ConfiguratorType |
||||||
|
/** 页面配置 */ |
||||||
|
page: PageConfig |
||||||
|
/** 画布配置 */ |
||||||
|
canvas: CanvasConfig |
||||||
|
/** 可以分类 */ |
||||||
|
categories: Category[] |
||||||
|
/** 布局视图列表 */ |
||||||
|
blocks: Block[] |
||||||
|
/** 内部唯一标识 */ |
||||||
|
nextId: number |
||||||
|
/** 数据源 */ |
||||||
|
sources: Record<string, Record<string, unknown>> |
||||||
|
/** 到处数据 */ |
||||||
|
export: () => Exported |
||||||
|
} |
||||||
|
|
||||||
|
export const contextKey: InjectionKey<UnwrapNestedRefs<EngineContext>> = Symbol.for('ddd:engine') |
||||||
|
export const parentViewIdKey: InjectionKey<string> = Symbol.for('ddd:view:parent:id') |
||||||
|
const blockIdKey: InjectionKey<string> = Symbol.for('ddd:block:id') |
||||||
|
|
||||||
|
export function useContext(): UnwrapNestedRefs<EngineContext> { |
||||||
|
const config = inject(contextKey) |
||||||
|
if (config == null) |
||||||
|
throw new Error('no config found') |
||||||
|
|
||||||
|
return config |
||||||
|
} |
||||||
|
|
||||||
|
export function useParentViewId(): string | undefined { |
||||||
|
return inject(parentViewIdKey) |
||||||
|
} |
||||||
|
|
||||||
|
export function provideParentViewId(id: string | undefined): void { |
||||||
|
if (id) |
||||||
|
provide(parentViewIdKey, id) |
||||||
|
} |
||||||
|
|
||||||
|
export function useBlockId(): string | undefined { |
||||||
|
return inject(blockIdKey) |
||||||
|
} |
||||||
|
|
||||||
|
export function provideBlockId(id: string): void { |
||||||
|
provide(blockIdKey, id) |
||||||
|
} |
||||||
|
|
||||||
|
export function useModule() { |
||||||
|
const ctx = useContext() |
||||||
|
return computed((): Module | undefined => { |
||||||
|
for (const block of ctx.blocks) { |
||||||
|
if (block.vid !== ctx.activeBlockId) |
||||||
|
continue |
||||||
|
|
||||||
|
for (const category of ctx.categories) { |
||||||
|
for (const module of category.modules) { |
||||||
|
if (module.mid === block.mid) |
||||||
|
return module |
||||||
|
} |
||||||
|
} |
||||||
|
break |
||||||
|
} |
||||||
|
return undefined |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function useScale() { |
||||||
|
const ctx = useContext() |
||||||
|
|
||||||
|
const minScaleValue = 0.6 |
||||||
|
const maxScaleValue = 3.0 |
||||||
|
const scaleStep = 0.2 |
||||||
|
const setScale = (delta: number): void => { |
||||||
|
ctx.canvas.scale = Math.max( |
||||||
|
Math.min( |
||||||
|
ctx.canvas.scale + scaleStep * delta, |
||||||
|
maxScaleValue, |
||||||
|
), |
||||||
|
minScaleValue, |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
min: minScaleValue, |
||||||
|
max: maxScaleValue, |
||||||
|
step: scaleStep, |
||||||
|
incr: () => setScale(1), |
||||||
|
decr: () => setScale(-1), |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function useSource<T = unknown>(source: string | undefined, fallback?: T): ComputedRef<T | undefined> { |
||||||
|
const ctx = useContext() |
||||||
|
const blockId = useBlockId() |
||||||
|
return computed<T | undefined>(() => { |
||||||
|
if (!blockId) |
||||||
|
throw new Error('without block') |
||||||
|
if (!source) |
||||||
|
return fallback |
||||||
|
return valueOf(ctx.sources[blockId], source) ?? fallback |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
import DddBuilder from './components/Builder.vue' |
||||||
|
|
||||||
|
export type { WidgetRenderFunction } from './render' |
||||||
|
export type { |
||||||
|
CanvasConfig, |
||||||
|
PageConfig, |
||||||
|
ConfiguratorType, |
||||||
|
EngineContext, |
||||||
|
Exported, |
||||||
|
} from './context' |
||||||
|
|
||||||
|
export { registerWidget, render } from './render' |
||||||
|
export { |
||||||
|
useContext, |
||||||
|
useBlockId, |
||||||
|
useSource, |
||||||
|
useModule, |
||||||
|
useParentViewId, |
||||||
|
} from './context' |
||||||
|
export { hash, valueOf } from './utils' |
||||||
|
export * from './types' |
||||||
|
|
||||||
|
export default DddBuilder |
||||||
@ -0,0 +1,175 @@ |
|||||||
|
import type { |
||||||
|
CSSProperties, |
||||||
|
Component, |
||||||
|
Prop, |
||||||
|
VNodeChild, |
||||||
|
} from 'vue' |
||||||
|
import { defineComponent, h } from 'vue' |
||||||
|
import type { |
||||||
|
Axis, |
||||||
|
Block, |
||||||
|
DataRefer, |
||||||
|
View, |
||||||
|
ViewChildren, |
||||||
|
Widget, |
||||||
|
} from './types' |
||||||
|
import { provideBlockId } from './context' |
||||||
|
import { |
||||||
|
align, |
||||||
|
background, |
||||||
|
bordering, |
||||||
|
gap, |
||||||
|
insets, |
||||||
|
radii, |
||||||
|
shadowing, |
||||||
|
size, |
||||||
|
unit, |
||||||
|
} from './utils' |
||||||
|
import DddView from './views/View.vue' |
||||||
|
import DddTextView from './views/TextView.vue' |
||||||
|
import DddImageView from './views/ImageView.vue' |
||||||
|
import DddAudioView from './views/AudioView.vue' |
||||||
|
|
||||||
|
/** |
||||||
|
* 相关框架组件渲染函数 |
||||||
|
*/ |
||||||
|
export type WidgetRenderFunction = (widget: Widget, view: View, axis?: Axis) => VNodeChild |
||||||
|
|
||||||
|
/** |
||||||
|
* 注册的外部组件渲染函数 |
||||||
|
*/ |
||||||
|
const widgets: Record<string, WidgetRenderFunction> = {} |
||||||
|
|
||||||
|
export function registerWidget(some: Record<string, WidgetRenderFunction>): void { |
||||||
|
for (const [key, func] of Object.entries(some)) |
||||||
|
widgets[key] = func |
||||||
|
} |
||||||
|
|
||||||
|
const isWidget = (s: any): s is Widget => s != null && 'name' in s |
||||||
|
|
||||||
|
function isRefer(s: any): s is DataRefer { |
||||||
|
return s != null |
||||||
|
&& 'type' in s |
||||||
|
&& 'key' in s |
||||||
|
&& typeof s.type === 'string' |
||||||
|
&& typeof s.key === 'string' |
||||||
|
} |
||||||
|
|
||||||
|
export function render(view?: ViewChildren, axis?: Axis): VNodeChild { |
||||||
|
if (view == null) |
||||||
|
return null |
||||||
|
|
||||||
|
if (typeof view === 'string' || typeof view === 'number') |
||||||
|
return view |
||||||
|
|
||||||
|
if (Array.isArray(view)) |
||||||
|
return view.map(v => render(v, axis)) |
||||||
|
|
||||||
|
if (isRefer(view)) { |
||||||
|
const { key, ...attrs } = view |
||||||
|
let component: Component | undefined |
||||||
|
switch (view.type) { |
||||||
|
case 'text': |
||||||
|
component = DddTextView |
||||||
|
return h(DddTextView, { |
||||||
|
source: view.key, |
||||||
|
}) |
||||||
|
case 'image': |
||||||
|
component = DddImageView |
||||||
|
return h(DddImageView, { |
||||||
|
source: key, |
||||||
|
...attrs, |
||||||
|
}) |
||||||
|
case 'audio': |
||||||
|
component = DddAudioView |
||||||
|
return h(DddAudioView, { |
||||||
|
source: view.key, |
||||||
|
title: view.title, |
||||||
|
}) |
||||||
|
case 'video': |
||||||
|
// todo ...
|
||||||
|
} |
||||||
|
if (component) { |
||||||
|
return h(component, { |
||||||
|
source: key, |
||||||
|
...attrs, |
||||||
|
}) |
||||||
|
} |
||||||
|
return h('b', { |
||||||
|
style: { |
||||||
|
color: 'red', |
||||||
|
fontSize: '36px', |
||||||
|
}, |
||||||
|
}, 'unimplemented') |
||||||
|
} |
||||||
|
if (isWidget(view.theme)) { |
||||||
|
const func = widgets[view.theme.name] |
||||||
|
if (typeof func !== 'function') |
||||||
|
throw new Error(`unknown widget: ${view.theme.name}`) |
||||||
|
|
||||||
|
const widget = view.theme |
||||||
|
return func(widget, view, axis) |
||||||
|
} |
||||||
|
|
||||||
|
const theme = view.theme |
||||||
|
const css: CSSProperties = { |
||||||
|
// boxed & spatial
|
||||||
|
...insets('padding', theme?.padding), |
||||||
|
...insets('margin', theme?.margin), |
||||||
|
...size(axis, theme), |
||||||
|
// decoration
|
||||||
|
...background(theme?.color, theme?.image, theme?.gradient), |
||||||
|
...bordering(theme?.border), |
||||||
|
...radii(theme?.radius), |
||||||
|
...shadowing(theme?.shadow), |
||||||
|
// textual
|
||||||
|
color: theme?.textColor, |
||||||
|
fontSize: unit(theme?.fontSize), |
||||||
|
textAlign: theme?.textAlign, |
||||||
|
lineHeight: theme?.lineHeight, |
||||||
|
// clip
|
||||||
|
overflow: theme?.clip, |
||||||
|
} |
||||||
|
|
||||||
|
// note: 在前面初始化 css 时使用了参数 axis，
|
||||||
|
// 所以在这里复用它用于子视图构建
|
||||||
|
axis = theme?.axis |
||||||
|
|
||||||
|
if (theme?.flexible) { |
||||||
|
Object.assign(css, { |
||||||
|
display: 'flex', |
||||||
|
flexDirection: axis === 'y' ? 'column' : undefined, |
||||||
|
justifyContent: align(theme?.mainAlign), |
||||||
|
alignItems: align(theme?.crossAlign), |
||||||
|
flexWrap: theme?.wrap ? 'wrap' : undefined, |
||||||
|
...gap(theme?.gap), |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return h(DddView, { |
||||||
|
vid: view.vid, |
||||||
|
class: 'ddd-view', |
||||||
|
style: css, |
||||||
|
}, () => render(view.children, axis)) |
||||||
|
} |
||||||
|
|
||||||
|
export const RenderBlock = defineComponent({ |
||||||
|
name: 'RenderWidget', |
||||||
|
|
||||||
|
props: { |
||||||
|
block: { |
||||||
|
type: Object, |
||||||
|
required: true, |
||||||
|
} as Prop<Block>, |
||||||
|
}, |
||||||
|
|
||||||
|
setup(props) { |
||||||
|
provideBlockId(props.block!.vid) |
||||||
|
return () => { |
||||||
|
if (props.block == null) |
||||||
|
return null |
||||||
|
|
||||||
|
return render(props.block) |
||||||
|
} |
||||||
|
}, |
||||||
|
}) |
||||||
@ -0,0 +1,558 @@ |
|||||||
|
import type { Slots } from 'vue' |
||||||
|
|
||||||
|
/** 百分比 */ |
||||||
|
export type Percentage = `${number}%` |
||||||
|
|
||||||
|
/** 计量原语 */ |
||||||
|
export type Unit = |
||||||
|
| number // 根据情况，大多数情况下被作为逻辑像素使用
|
||||||
|
| Percentage |
||||||
|
|
||||||
|
/** 对称策略 */ |
||||||
|
export interface Symmetric<T> { |
||||||
|
vertical?: T |
||||||
|
horizontal?: T |
||||||
|
} |
||||||
|
|
||||||
|
/** 四边策略 */ |
||||||
|
export interface Direction<T> { |
||||||
|
left?: T |
||||||
|
right?: T |
||||||
|
top?: T |
||||||
|
bottom?: T |
||||||
|
} |
||||||
|
|
||||||
|
/** 四角策略 */ |
||||||
|
export interface Corners<T> { |
||||||
|
topLeft?: T // 左上角
|
||||||
|
topRight?: T // 右上角
|
||||||
|
bottomLeft?: T // 左下角
|
||||||
|
bottomRight?: T // 右下角
|
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 线性渐变 |
||||||
|
* |
||||||
|
* 不支持 sweep 和 radial 风格。 |
||||||
|
* |
||||||
|
* 属性 stops 要么不设置，要么其数量必须与 colors 的数量一致。 |
||||||
|
*/ |
||||||
|
export interface Gradient { |
||||||
|
/** 渐变角度 */ |
||||||
|
angle?: string |
||||||
|
/** 颜色组，至少 2 个颜色值 */ |
||||||
|
colors: string[] |
||||||
|
/** 颜色停顿位置组 */ |
||||||
|
stops?: number[] |
||||||
|
/** 是否重复渲染 */ |
||||||
|
repeatable?: boolean |
||||||
|
} |
||||||
|
|
||||||
|
/** 边距，用于内外边距 */ |
||||||
|
export type EdgeInsets = |
||||||
|
| Direction<Unit> // 四边
|
||||||
|
| Symmetric<Unit> // 对称
|
||||||
|
| Unit // 原语
|
||||||
|
|
||||||
|
/** 边框样式 */ |
||||||
|
export type BorderStyle = |
||||||
|
| 'solid' |
||||||
|
| 'dashed' |
||||||
|
| 'dotted' |
||||||
|
| 'double' |
||||||
|
| 'groove' |
||||||
|
| 'ridge' |
||||||
|
| 'outset' |
||||||
|
| 'inset' |
||||||
|
| 'none' |
||||||
|
|
||||||
|
/** 边框的边 */ |
||||||
|
export interface BorderSide { |
||||||
|
color?: string |
||||||
|
style?: BorderStyle |
||||||
|
width?: number |
||||||
|
} |
||||||
|
|
||||||
|
/** 边框 */ |
||||||
|
export type Border = |
||||||
|
| Direction<BorderSide> // 四边
|
||||||
|
| Symmetric<BorderSide> // 对称
|
||||||
|
| BorderSide // 统一设置
|
||||||
|
|
||||||
|
/** 圆角原语 */ |
||||||
|
export type RadiusPrimitive = |
||||||
|
| number |
||||||
|
| [number, number] |
||||||
|
|
||||||
|
/** 圆角双值 */ |
||||||
|
export type RadiusDouble = [ |
||||||
|
RadiusPrimitive, |
||||||
|
RadiusPrimitive, |
||||||
|
] |
||||||
|
|
||||||
|
/** 圆角 */ |
||||||
|
export type Radius = |
||||||
|
| Corners<RadiusPrimitive | RadiusDouble> |
||||||
|
| RadiusPrimitive |
||||||
|
| RadiusDouble |
||||||
|
|
||||||
|
/** 阴影 */ |
||||||
|
export interface Shadow { |
||||||
|
x: number |
||||||
|
y: number |
||||||
|
blur?: number |
||||||
|
spread?: number |
||||||
|
color: string |
||||||
|
inset?: boolean |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 主轴对齐方式(子元素布局方向) |
||||||
|
* |
||||||
|
* 用于 Flex 布局，对应 CSS 属性 justify-content 的值。 |
||||||
|
*/ |
||||||
|
export type MainAlign = |
||||||
|
| 'start' // 左对齐，默认值
|
||||||
|
| 'end' // 右对齐
|
||||||
|
| 'center' // 居中
|
||||||
|
| 'between' // 两端对齐，项目之间的间隔都相等。
|
||||||
|
| 'around' // 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
|
||||||
|
|
||||||
|
/** |
||||||
|
* 交叉轴对齐方式（与主轴垂直的方向） |
||||||
|
* |
||||||
|
* 用于 Flex 布局，对应 CSS 属性 align-items 的值。 |
||||||
|
*/ |
||||||
|
export type CrossAlign = |
||||||
|
| 'start' // 交叉轴的起点对齐。
|
||||||
|
| 'end' // 交叉轴的终点对齐。
|
||||||
|
| 'center' // 交叉轴的中点对齐。
|
||||||
|
| 'baseline' // 项目的第一行文字的基线对齐。
|
||||||
|
| 'stretch' // 默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
|
||||||
|
|
||||||
|
/** 文本方向 */ |
||||||
|
export type TextAlign = |
||||||
|
| 'left' |
||||||
|
| 'center' |
||||||
|
| 'right' |
||||||
|
|
||||||
|
/** |
||||||
|
* 描述主轴方向 |
||||||
|
* |
||||||
|
* x - 横轴 |
||||||
|
* y - 纵轴 |
||||||
|
*/ |
||||||
|
export type Axis = 'x' | 'y' |
||||||
|
|
||||||
|
/** |
||||||
|
* 文本 |
||||||
|
* |
||||||
|
* 描述与文本外观相关的属性 |
||||||
|
*/ |
||||||
|
export interface Textual { |
||||||
|
/** 文本颜色 */ |
||||||
|
textColor?: string |
||||||
|
/** 字体大小 */ |
||||||
|
fontSize?: number |
||||||
|
/** 文本方向 */ |
||||||
|
textAlign?: TextAlign |
||||||
|
/** 行高，行高比较特殊，需要转换单位 */ |
||||||
|
lineHeight?: number | Percentage | string |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 弹性布局策略 |
||||||
|
* |
||||||
|
* 描述与弹性布局相关的属性 |
||||||
|
*/ |
||||||
|
export interface Flexible { |
||||||
|
/** |
||||||
|
* 主轴方向，对应 CSS 属性 flex-direction。 |
||||||
|
* 如果值为 'x' 表示 `row`；值为 'y' 表示 `column`。 |
||||||
|
*/ |
||||||
|
axis?: Axis |
||||||
|
/** 主轴对齐方式 */ |
||||||
|
mainAlign?: MainAlign |
||||||
|
/** 交叉轴对齐方式 */ |
||||||
|
crossAlign?: CrossAlign |
||||||
|
/** 是否自动换行 */ |
||||||
|
wrap?: boolean |
||||||
|
/** |
||||||
|
* 子组件间隔 |
||||||
|
* |
||||||
|
* 当值未数组时： |
||||||
|
* |
||||||
|
* - 第一个值表示水平方向上子视图的间隔； |
||||||
|
* - 第二个值表示垂直方向上的子视图间隔。 |
||||||
|
*/ |
||||||
|
gap?: number | [number, number] |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 装饰策略 |
||||||
|
* |
||||||
|
* 描述与视图外观相关的属性 |
||||||
|
*/ |
||||||
|
export interface Decoration { |
||||||
|
/** 组件颜色，背景颜色 */ |
||||||
|
color?: string |
||||||
|
/** 组件图片，背景图片 */ |
||||||
|
image?: string |
||||||
|
/** 组件边框 */ |
||||||
|
border?: Border |
||||||
|
/** 组件圆角 */ |
||||||
|
radius?: Radius |
||||||
|
/** 组件阴影效果 */ |
||||||
|
shadow?: Shadow | Shadow[] |
||||||
|
/** 组件渐变，背景渐变 */ |
||||||
|
gradient?: Gradient |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 空间分配策略 |
||||||
|
* |
||||||
|
* 能够用在弹性布局子视图上的属性 |
||||||
|
*/ |
||||||
|
export interface Spatial { |
||||||
|
/** 当组件作为 Flex 的子组件时，视图在主轴方向上的初始大小 */ |
||||||
|
basis?: number |
||||||
|
/** 在 Flex 布局下的增长系数，对应 flex-grow */ |
||||||
|
grow?: number |
||||||
|
/** 在 Flex 布局下的收缩规则 */ |
||||||
|
shrink?: number |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 盒子策略 |
||||||
|
* |
||||||
|
* 描述与盒子模型相关的属性 |
||||||
|
*/ |
||||||
|
export interface Boxed { |
||||||
|
/** 组件内边距 */ |
||||||
|
padding?: EdgeInsets |
||||||
|
/** 组件外边距 */ |
||||||
|
margin?: EdgeInsets |
||||||
|
/** 组件宽度，若在 Flex 布局下可能会被作为主轴方向上的初始大小 */ |
||||||
|
width?: number | Percentage | 'auto' |
||||||
|
/** 组件高度，若在 Flex 布局下可能会被作为主轴方向上的初始大小 */ |
||||||
|
height?: number | Percentage | 'auto' |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 相关框架组件 |
||||||
|
* |
||||||
|
* 建议尽量使用业务组件。 |
||||||
|
*/ |
||||||
|
export interface Widget { |
||||||
|
/** 组件名称 */ |
||||||
|
name: string |
||||||
|
/** 组件属性 */ |
||||||
|
props?: Record<string, unknown> |
||||||
|
/** 相关插槽，不包括默认插槽 */ |
||||||
|
slots?: Omit<Slots, 'default'> |
||||||
|
} |
||||||
|
|
||||||
|
export type ClipBehavior = |
||||||
|
| 'hidden' |
||||||
|
| 'visible' |
||||||
|
| 'scroll' |
||||||
|
| 'auto' |
||||||
|
|
||||||
|
/** |
||||||
|
* 视图数据 |
||||||
|
* |
||||||
|
* 描述了视图的基本布局和外观表现。 |
||||||
|
*/ |
||||||
|
export interface Theme extends Textual, Flexible, Boxed, Decoration, Spatial, Flexible { |
||||||
|
/** 是否开启弹性布局,todo 删除改属性，根据属性判断是否启用 flex 布局 */ |
||||||
|
flexible?: boolean |
||||||
|
/** 超出视图剪切方式，对应 overflow 属性 */ |
||||||
|
clip?: ClipBehavior |
||||||
|
} |
||||||
|
|
||||||
|
/** 文本配置引用 */ |
||||||
|
export interface TextRefer { |
||||||
|
/** 标识为文本专用类型 */ |
||||||
|
type: 'text' |
||||||
|
/** 对应的数据键名称 */ |
||||||
|
key: string |
||||||
|
} |
||||||
|
|
||||||
|
// https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
|
||||||
|
export type ObjectFit = |
||||||
|
| 'fill' |
||||||
|
| 'contain' |
||||||
|
| 'cover' |
||||||
|
| 'none' |
||||||
|
| 'scale-down' |
||||||
|
|
||||||
|
/** 图片配置引用 */ |
||||||
|
export interface ImageRefer { |
||||||
|
/** 图片引用类型专用类型 */ |
||||||
|
type: 'image' |
||||||
|
/** 图片地址键 */ |
||||||
|
key: string |
||||||
|
/** 图片标题键 */ |
||||||
|
title?: string |
||||||
|
/** 图片跳转链接键 */ |
||||||
|
link?: string |
||||||
|
/** 图片填充方式 */ |
||||||
|
fit?: ObjectFit |
||||||
|
/** 图片圆角 */ |
||||||
|
radius?: Radius |
||||||
|
} |
||||||
|
|
||||||
|
/** 视频配置引用 */ |
||||||
|
export interface VideoRefer { |
||||||
|
/** 视频引用类型专用类型 */ |
||||||
|
type: 'video' |
||||||
|
/** 视频地址键 */ |
||||||
|
key: string |
||||||
|
/** 视频封片图片键 */ |
||||||
|
poster?: string |
||||||
|
/** 视频标题键 */ |
||||||
|
title?: string |
||||||
|
/** 视频填充方式 */ |
||||||
|
fit?: ObjectFit |
||||||
|
// todo 其它配置实现，比如自动播放、控件配置等
|
||||||
|
} |
||||||
|
|
||||||
|
/** 音频配置引用 */ |
||||||
|
export interface AudioRefer { |
||||||
|
/** 音频引用类型专用 */ |
||||||
|
type: 'audio' |
||||||
|
/** 音频地址键 */ |
||||||
|
key: string |
||||||
|
/** 音频标题键，todo 是否需要显示？如何显示？ */ |
||||||
|
title: string |
||||||
|
// todo 其它配置实现，比如自动播放、控件配置等
|
||||||
|
} |
||||||
|
|
||||||
|
/** 目前支持的 4 中配置引用 */ |
||||||
|
export type DataRefer = |
||||||
|
| TextRefer |
||||||
|
| ImageRefer |
||||||
|
| VideoRefer |
||||||
|
| AudioRefer |
||||||
|
|
||||||
|
export type ViewChild = |
||||||
|
| string |
||||||
|
| number |
||||||
|
| DataRefer |
||||||
|
| View |
||||||
|
|
||||||
|
export type ViewChildren = ViewChild | Array<ViewChild> |
||||||
|
|
||||||
|
/** |
||||||
|
* 视图 |
||||||
|
* |
||||||
|
* 用于构建页面的基本元素 |
||||||
|
*/ |
||||||
|
export interface View { |
||||||
|
/** 视图唯一标识 */ |
||||||
|
vid?: string |
||||||
|
/** |
||||||
|
* 视图数据列表 |
||||||
|
* |
||||||
|
* 如果存在同类型的，属性会根据顺序被覆盖。 |
||||||
|
*/ |
||||||
|
theme?: Theme | Widget |
||||||
|
/** |
||||||
|
* 关联数据源 |
||||||
|
*/ |
||||||
|
source?: string |
||||||
|
/** 子视图 */ |
||||||
|
children?: ViewChildren |
||||||
|
} |
||||||
|
|
||||||
|
/** 装修视图块 */ |
||||||
|
export interface Block extends View { |
||||||
|
/** 视图唯一标识 */ |
||||||
|
vid: string |
||||||
|
/** 模块唯一标识 */ |
||||||
|
mid: string |
||||||
|
} |
||||||
|
|
||||||
|
/** 装修模块 */ |
||||||
|
export interface Module extends Block { |
||||||
|
/** 标题 */ |
||||||
|
title: string |
||||||
|
/** 组件预览图 */ |
||||||
|
image?: string |
||||||
|
/** 允许最大引用次数，如果值为负数则表示没有限制 */ |
||||||
|
maxReferenceCount?: number |
||||||
|
/** 被引用次数，运行时属性 */ |
||||||
|
referenceCount?: number |
||||||
|
/** 模块配置 */ |
||||||
|
configs: ModuleConfig[] |
||||||
|
} |
||||||
|
|
||||||
|
export type ModuleConfig = |
||||||
|
| ListConfig |
||||||
|
| ObjectConfig |
||||||
|
| BackgroundConfig |
||||||
|
| BooleanConfig |
||||||
|
| MarkConfig |
||||||
|
| ImageConfig |
||||||
|
| BaseConfig |
||||||
|
|
||||||
|
export interface BaseConfig { |
||||||
|
type: string |
||||||
|
field: string |
||||||
|
label: string |
||||||
|
help?: string |
||||||
|
required?: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export interface ListConfig extends BaseConfig { |
||||||
|
type: 'list' |
||||||
|
addable: boolean |
||||||
|
min?: number |
||||||
|
max?: number |
||||||
|
configs: ModuleConfig[] |
||||||
|
} |
||||||
|
|
||||||
|
export interface ObjectConfig extends BaseConfig { |
||||||
|
type: 'object' |
||||||
|
configs: ModuleConfig[] |
||||||
|
} |
||||||
|
|
||||||
|
export interface BackgroundConfig extends BaseConfig { |
||||||
|
type: 'background' |
||||||
|
features: Array<'color' | 'gradient' | 'image'> |
||||||
|
} |
||||||
|
|
||||||
|
export interface ConfigValue<T = unknown> { |
||||||
|
label: string |
||||||
|
value: T |
||||||
|
/** 帮助信息 */ |
||||||
|
help?: string |
||||||
|
/** 以图标形式渲染 */ |
||||||
|
icon?: string |
||||||
|
} |
||||||
|
|
||||||
|
/** 针对单选或多选 */ |
||||||
|
export interface MarkConfig extends BaseConfig { |
||||||
|
type: 'mark' |
||||||
|
multiple?: boolean |
||||||
|
values: ConfigValue[] |
||||||
|
} |
||||||
|
|
||||||
|
export interface BooleanConfig extends BaseConfig { |
||||||
|
type: 'bool' |
||||||
|
} |
||||||
|
|
||||||
|
export interface ImageConfig extends BaseConfig { |
||||||
|
type: 'image' |
||||||
|
/** 内联，表示相关联的数据 */ |
||||||
|
inlines?: ModuleConfig[] |
||||||
|
} |
||||||
|
|
||||||
|
/** 模块分类 */ |
||||||
|
export interface Category { |
||||||
|
/** 分类图标 */ |
||||||
|
icon: string |
||||||
|
/** 分类名称 */ |
||||||
|
text: string |
||||||
|
/** 模块列表 */ |
||||||
|
modules: Module[] |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 亮度模式 |
||||||
|
* |
||||||
|
* todo 考虑对比模式 contrast |
||||||
|
*/ |
||||||
|
export type Brightness = |
||||||
|
| 'dark' |
||||||
|
| 'light' |
||||||
|
|
||||||
|
/** 页面头尾固定区域配置 */ |
||||||
|
export interface StickyConfig { |
||||||
|
/** 是否开启 */ |
||||||
|
enabled: boolean |
||||||
|
/** 高度 */ |
||||||
|
height: number |
||||||
|
/** 背景颜色 */ |
||||||
|
color: string |
||||||
|
/** 文本颜色 */ |
||||||
|
textColor: string |
||||||
|
/** 是否开启边框 */ |
||||||
|
bordered: boolean |
||||||
|
/** 边框颜色 */ |
||||||
|
borderColor: string |
||||||
|
} |
||||||
|
|
||||||
|
/** 页面头部配置 */ |
||||||
|
export interface PageHeader extends StickyConfig { |
||||||
|
/** 页面标题 */ |
||||||
|
title?: string |
||||||
|
/** 页面标题是否居中显示，在小程序上非自定义头部时无效 */ |
||||||
|
centerTitle?: boolean |
||||||
|
/** 自定义视图 */ |
||||||
|
custom?: View |
||||||
|
} |
||||||
|
|
||||||
|
/** 页面底部配置 */ |
||||||
|
export interface PageFooter extends StickyConfig { |
||||||
|
/** 自定义视图，todo 小程序底部怎么弄？使用额外配置？ */ |
||||||
|
view?: View |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 页面配置 |
||||||
|
* |
||||||
|
* 包含组成页面的视图树和API接口 |
||||||
|
*/ |
||||||
|
export interface Page { |
||||||
|
/** 亮度模式，支持暗模式和亮模式 */ |
||||||
|
brightness?: Brightness |
||||||
|
/** 是否全屏模式 */ |
||||||
|
fullscreen?: boolean |
||||||
|
/** 是否开启顶部安全区域（屏幕状态栏） */ |
||||||
|
safeAreaInsetTop?: boolean |
||||||
|
/** 是否开启底部安全区域（底部操作条） */ |
||||||
|
safeAreaInsetBottom?: boolean |
||||||
|
/** 页面背景颜色 */ |
||||||
|
backgroundColor?: string |
||||||
|
/** 页面头部配置 */ |
||||||
|
header: PageHeader |
||||||
|
/** 页面主体部分 */ |
||||||
|
body: Block[] |
||||||
|
/** 页面底部配置 */ |
||||||
|
footer: PageFooter |
||||||
|
} |
||||||
|
|
||||||
|
// /** 交互类型 */
|
||||||
|
// export type Interaction =
|
||||||
|
// | 'carousel' // 轮播图
|
||||||
|
// | 'collapse' // 折叠面板
|
||||||
|
// | 'dialog' // 弹出层
|
||||||
|
// | 'drawer' // 抽屉
|
||||||
|
// | 'marquee' // 跑马灯（比如滚动通知）
|
||||||
|
// | 'count' // 计数（比如秒杀倒计时、短信验证码倒计时、数字滚动等）
|
||||||
|
// | 'keyboard' // 打开虚拟键盘
|
||||||
|
// | 'picker' // 打开 picker 面板
|
||||||
|
// | 'gesture' // 手势（长按、点击、双击、滑动等）
|
||||||
|
// | 'sticky' // 吸顶
|
||||||
|
//
|
||||||
|
// export interface Interop {
|
||||||
|
// /** 交互方式 */
|
||||||
|
// type: Interaction
|
||||||
|
// /**
|
||||||
|
// * 交互视图数据列表
|
||||||
|
// */
|
||||||
|
// effect?: ViewData[]
|
||||||
|
// /**
|
||||||
|
// * 交互关联视图列表
|
||||||
|
// *
|
||||||
|
// * 如果存在同类型的，属性会根据顺序被覆盖。
|
||||||
|
// */
|
||||||
|
// attach?: ViewData[]
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// /** 描述视图动画 */
|
||||||
|
// export interface Motion {
|
||||||
|
// /** 动画类型 */
|
||||||
|
// type: string
|
||||||
|
// }
|
||||||
@ -0,0 +1,14 @@ |
|||||||
|
import type { CrossAlign, MainAlign } from '../types' |
||||||
|
|
||||||
|
export function align(s: MainAlign | CrossAlign | undefined): string | undefined { |
||||||
|
switch (s) { |
||||||
|
case 'start': |
||||||
|
case 'end': |
||||||
|
return `flex-${s}` |
||||||
|
case 'between': |
||||||
|
case 'around': |
||||||
|
return `space-${s}` |
||||||
|
default: |
||||||
|
return s |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
import type { CSSProperties } from 'vue' |
||||||
|
import type { Gradient } from '../types' |
||||||
|
|
||||||
|
function image(img: string | undefined, g: Gradient | undefined): string | undefined { |
||||||
|
if (img == null && g == null) |
||||||
|
return undefined |
||||||
|
|
||||||
|
if (img != null) |
||||||
|
return `url(${img})` |
||||||
|
|
||||||
|
if (g == null) |
||||||
|
return undefined |
||||||
|
|
||||||
|
const prefix = g.repeatable ? 'repeating-' : '' |
||||||
|
if (g.stops?.length === g.colors.length) { |
||||||
|
const colors = g.colors.map((c, i) => `${c} ${g.stops![i]}`).join(', ') |
||||||
|
return `${prefix}linear-gradient(${g?.angle ?? '0deg'}, ${colors})` |
||||||
|
} |
||||||
|
return `${prefix}linear-gradient(${g?.angle ?? '0deg'}, ${g.colors.join(', ')})` |
||||||
|
} |
||||||
|
|
||||||
|
export function background(color: string | undefined, img: string | undefined, g: Gradient | undefined): CSSProperties { |
||||||
|
return { |
||||||
|
backgroundColor: color, |
||||||
|
backgroundImage: image(img, g), |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
import type { CSSProperties } from 'vue' |
||||||
|
import type { Border, BorderSide } from '../types' |
||||||
|
import { unit } from './unit' |
||||||
|
import { isBorderSide, isSymmetric } from './is' |
||||||
|
|
||||||
|
function borderSide(name: string, s: BorderSide | undefined): CSSProperties | undefined { |
||||||
|
if (s == null) |
||||||
|
return undefined |
||||||
|
|
||||||
|
const hasWidth = s.width != null |
||||||
|
const hasColor = s.color != null |
||||||
|
const hasStyle = s.style != null |
||||||
|
const r: Record<string, string | undefined> = {} |
||||||
|
if (hasColor) |
||||||
|
r[`${name}Color`] = s.color |
||||||
|
|
||||||
|
if (hasWidth) |
||||||
|
r[`${name}Width`] = unit(s.width) |
||||||
|
else if (hasColor) |
||||||
|
r[`${name}Width`] = '1px' |
||||||
|
|
||||||
|
if (hasStyle) |
||||||
|
r[`${name}Style`] = s.style |
||||||
|
else if (hasWidth || hasColor) |
||||||
|
r[`${name}Style`] = 'solid' |
||||||
|
|
||||||
|
return r |
||||||
|
} |
||||||
|
|
||||||
|
export function bordering(b: Border | undefined): CSSProperties | undefined { |
||||||
|
if (b == null) |
||||||
|
return undefined |
||||||
|
|
||||||
|
if (isBorderSide(b)) |
||||||
|
return borderSide('border', b) |
||||||
|
|
||||||
|
if (isSymmetric(b)) { |
||||||
|
return { |
||||||
|
...borderSide('borderBlock', b.vertical), |
||||||
|
...borderSide('borderInline', b.horizontal), |
||||||
|
} |
||||||
|
} |
||||||
|
return { |
||||||
|
...borderSide('borderTop', b.top), |
||||||
|
...borderSide('borderBottom', b.bottom), |
||||||
|
...borderSide('borderLeft', b.left), |
||||||
|
...borderSide('borderRight', b.right), |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
import type { CSSProperties } from 'vue' |
||||||
|
import { unit } from './unit' |
||||||
|
|
||||||
|
export function gap(gap: number | [number, number] | undefined): CSSProperties | undefined { |
||||||
|
if (!gap) { |
||||||
|
return undefined |
||||||
|
} |
||||||
|
else if (Array.isArray(gap)) { |
||||||
|
return { |
||||||
|
rowGap: unit(gap[0]), |
||||||
|
columnGap: unit(gap[1]), |
||||||
|
} |
||||||
|
} |
||||||
|
else { |
||||||
|
return { |
||||||
|
gap: unit(gap), |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
/** |
||||||
|
* Calculate a 32 bit FNV-1a hash |
||||||
|
* Found here: https://gist.github.com/vaiorabbit/5657561
|
||||||
|
* Ref.: http://isthe.com/chongo/tech/comp/fnv/
|
||||||
|
* |
||||||
|
* @param {string} str the input value |
||||||
|
* @returns {string} return the 8-digit hex string |
||||||
|
*/ |
||||||
|
export function hash(str: string): string { |
||||||
|
let hval = 0x811C9DC5 |
||||||
|
for (let i = 0, l = str.length; i < l; i++) { |
||||||
|
hval ^= str.charCodeAt(i) |
||||||
|
hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24) |
||||||
|
} |
||||||
|
// Convert to 8 digit hex string
|
||||||
|
return (`0000000${(hval >>> 0).toString(16)}`).slice(-8) |
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
export * from './align' |
||||||
|
export * from './background' |
||||||
|
export * from './border' |
||||||
|
export * from './gap' |
||||||
|
export * from './hash' |
||||||
|
export * from './insets' |
||||||
|
export * from './is' |
||||||
|
export * from './object' |
||||||
|
export * from './radii' |
||||||
|
export * from './shadow' |
||||||
|
export * from './size' |
||||||
|
export * from './unit' |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
import type { CSSProperties } from 'vue' |
||||||
|
import type { EdgeInsets } from '../types' |
||||||
|
import { isSymmetric } from './is' |
||||||
|
import { unit } from './unit' |
||||||
|
|
||||||
|
export function insets(name: string, i: EdgeInsets | undefined): CSSProperties | undefined { |
||||||
|
if (i == null) |
||||||
|
return undefined |
||||||
|
|
||||||
|
if (typeof i === 'number') |
||||||
|
return { [name]: `${i}px` } |
||||||
|
|
||||||
|
if (typeof i === 'string') |
||||||
|
return { [name]: i } |
||||||
|
|
||||||
|
if (isSymmetric(i)) { |
||||||
|
return { |
||||||
|
[name]: [unit(i.vertical), unit(i.horizontal)].join(' '), |
||||||
|
} |
||||||
|
} |
||||||
|
return { |
||||||
|
[`${name}Top`]: unit(i.top), |
||||||
|
[`${name}Bottom`]: unit(i.bottom), |
||||||
|
[`${name}Left`]: unit(i.left), |
||||||
|
[`${name}Right`]: unit(i.right), |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import type { BorderSide, Corners, Symmetric } from '../types' |
||||||
|
|
||||||
|
export function isSymmetric(a: any): a is Symmetric<any> { |
||||||
|
return a != null |
||||||
|
&& !Array.isArray(a) |
||||||
|
&& typeof a === 'object' |
||||||
|
&& ('vertical' in a || 'horizontal' in a) |
||||||
|
} |
||||||
|
|
||||||
|
export function isBorderSide(a: any): a is BorderSide { |
||||||
|
return a != null |
||||||
|
&& !Array.isArray(a) |
||||||
|
&& typeof a === 'object' |
||||||
|
&& ('color' in a || 'style' in a || 'width' in a) |
||||||
|
} |
||||||
|
|
||||||
|
export function isCorners(a: any): a is Corners<any> { |
||||||
|
return a != null |
||||||
|
&& !Array.isArray(a) |
||||||
|
&& typeof a === 'object' |
||||||
|
&& ('topLeft' in a |
||||||
|
|| 'topRight' in a |
||||||
|
|| 'bottomLeft' in a |
||||||
|
|| 'bottomRight' in a) |
||||||
|
} |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
function find(obj: any, keys: string[]) { |
||||||
|
if (!keys.length) |
||||||
|
return obj |
||||||
|
|
||||||
|
if (obj == null || typeof obj !== 'object') |
||||||
|
return undefined |
||||||
|
|
||||||
|
const key = keys.shift()! |
||||||
|
if (!Array.isArray(obj)) |
||||||
|
return find(obj[key], keys) |
||||||
|
|
||||||
|
const index = Number.parseInt(key) |
||||||
|
if (Number.isNaN(index)) |
||||||
|
return undefined |
||||||
|
|
||||||
|
return find(obj[index], keys) |
||||||
|
} |
||||||
|
|
||||||
|
export function valueOf(obj: any, key: string) { |
||||||
|
if (!key) |
||||||
|
return undefined |
||||||
|
return find(obj, key.split('.')) |
||||||
|
} |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
import type { CSSProperties } from 'vue' |
||||||
|
import type { Radius, RadiusDouble, RadiusPrimitive } from '../types' |
||||||
|
import { isCorners } from './is' |
||||||
|
|
||||||
|
function stringify(radius: RadiusPrimitive | RadiusDouble | undefined): string | undefined { |
||||||
|
if (radius == null) |
||||||
|
return undefined |
||||||
|
|
||||||
|
if (Array.isArray(radius)) |
||||||
|
return radius.map(stringify).join(' ') |
||||||
|
|
||||||
|
return `${radius}px` |
||||||
|
} |
||||||
|
|
||||||
|
export function radii(radius: Radius | undefined): CSSProperties | undefined { |
||||||
|
if (radius == null) |
||||||
|
return undefined |
||||||
|
|
||||||
|
if (isCorners(radius)) { |
||||||
|
return { |
||||||
|
borderTopLeftRadius: stringify(radius.topLeft), |
||||||
|
borderTopRightRadius: stringify(radius.topRight), |
||||||
|
borderBottomLeftRadius: stringify(radius.bottomLeft), |
||||||
|
borderBottomRightRadius: stringify(radius.bottomRight), |
||||||
|
} |
||||||
|
} |
||||||
|
return { |
||||||
|
borderRadius: stringify(radius), |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,37 @@ |
|||||||
|
import type { CSSProperties } from 'vue' |
||||||
|
import type { Shadow } from '../types' |
||||||
|
|
||||||
|
const unit = (n: number | undefined): string | undefined => n == null ? undefined : n === 0 ? n.toString() : `${n}px` |
||||||
|
|
||||||
|
function stringify(s: Shadow | undefined): string | undefined { |
||||||
|
if (s == null) |
||||||
|
return undefined |
||||||
|
|
||||||
|
return [ |
||||||
|
s.inset ? 'inset' : undefined, |
||||||
|
unit(s.x), |
||||||
|
unit(s.y), |
||||||
|
s.blur != null ? unit(s.blur) : s.spread != null ? '0' : undefined, |
||||||
|
unit(s.spread), |
||||||
|
s.color, |
||||||
|
] |
||||||
|
.filter(n => n != null) |
||||||
|
.join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
export function shadowing(ss: Shadow | Shadow[] | undefined): CSSProperties | undefined { |
||||||
|
if (ss == null) |
||||||
|
return undefined |
||||||
|
|
||||||
|
if (!Array.isArray(ss)) { |
||||||
|
return { |
||||||
|
boxShadow: stringify(ss), |
||||||
|
} |
||||||
|
} |
||||||
|
return { |
||||||
|
boxShadow: ss |
||||||
|
.map(stringify) |
||||||
|
.filter(Boolean) |
||||||
|
.join(', '), |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
import type { CSSProperties } from 'vue' |
||||||
|
import type { Axis, Theme } from '../types' |
||||||
|
import { unit } from './unit' |
||||||
|
|
||||||
|
export function size( |
||||||
|
axis: Axis | undefined, |
||||||
|
theme: Theme | undefined, |
||||||
|
): CSSProperties { |
||||||
|
const width = unit(theme?.width) |
||||||
|
const height = unit(theme?.height) |
||||||
|
return { |
||||||
|
width, |
||||||
|
height, |
||||||
|
flexBasis: theme?.basis ?? (axis === 'x' ? width : axis === 'y' ? height : undefined), |
||||||
|
flexGrow: theme?.grow != null ? `${theme.grow}` : undefined, |
||||||
|
flexShrink: theme?.shrink != null ? `${theme.shrink}` : undefined, |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
export function unit(n: number | undefined | string) { |
||||||
|
if (n == null) |
||||||
|
return undefined |
||||||
|
if (typeof n !== 'number') |
||||||
|
return n |
||||||
|
return `${n}px` |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { useSource } from '../context' |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'DddAudioView', |
||||||
|
}) |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
source: string |
||||||
|
title?: string |
||||||
|
}>() |
||||||
|
|
||||||
|
const src = useSource<string>(props.source) |
||||||
|
const title = useSource<string>(props.title) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div style="display:inline-block"> |
||||||
|
<div>{{ title }}</div> |
||||||
|
<audio v-if="src" :src="src" controls /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import type { ObjectFit, Radius } from '../types' |
||||||
|
import { useSource } from '../context' |
||||||
|
import { radii } from '../utils' |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'DddImageView', |
||||||
|
}) |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
source: string |
||||||
|
title?: string |
||||||
|
link?: string |
||||||
|
fit?: ObjectFit |
||||||
|
radius?: Radius |
||||||
|
}>() |
||||||
|
|
||||||
|
// todo 默认图片 |
||||||
|
const src = useSource<string>(props.source, '') |
||||||
|
const title = useSource<string>(props.title) |
||||||
|
// const link = useSource<string>(props.link) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<img |
||||||
|
:src="src" |
||||||
|
:alt="title" |
||||||
|
:style="{ |
||||||
|
objectFit: fit ?? 'contain', |
||||||
|
maxWidth: '100%', |
||||||
|
...radii(radius), |
||||||
|
}" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { useSource } from '../context' |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'DddTextView', |
||||||
|
}) |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
source: string |
||||||
|
}>() |
||||||
|
|
||||||
|
const text = useSource<string>(props.source) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
{{ text }} |
||||||
|
</template> |
||||||
@ -0,0 +1,116 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import type { Component } from 'vue' |
||||||
|
import { |
||||||
|
provideParentViewId, |
||||||
|
useBlockId, |
||||||
|
useContext, |
||||||
|
useParentViewId, |
||||||
|
} from '../context' |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'DddView', |
||||||
|
}) |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
is?: string | Component |
||||||
|
vid?: string |
||||||
|
}>() |
||||||
|
|
||||||
|
const ctx = useContext() |
||||||
|
const parentId = useParentViewId() |
||||||
|
const blockId = useBlockId() |
||||||
|
|
||||||
|
function handleMousedown(e: Event, id: string | undefined): void { |
||||||
|
ctx.activeBlockId = blockId |
||||||
|
ctx.hoverViewId = parentId |
||||||
|
ctx.canvas.focused = false |
||||||
|
if (blockId) |
||||||
|
ctx.configurator = 'block' |
||||||
|
|
||||||
|
if (id) { |
||||||
|
e.stopPropagation() |
||||||
|
ctx!.activeViewId = id |
||||||
|
if (blockId !== id) { |
||||||
|
switch (id) { |
||||||
|
case '#canvas': |
||||||
|
ctx.configurator = 'page' |
||||||
|
break |
||||||
|
case '#header': |
||||||
|
case '#footer': |
||||||
|
ctx.configurator = 'block' |
||||||
|
break |
||||||
|
default: |
||||||
|
ctx.configurator = 'view' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function handleMouseleave(id: string | undefined): void { |
||||||
|
if (id && ctx.hoverViewId === id && !ctx.draggingViewId) |
||||||
|
ctx.hoverViewId = undefined |
||||||
|
} |
||||||
|
|
||||||
|
provideParentViewId(props.vid) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<component |
||||||
|
:is="is ?? 'div'" |
||||||
|
class="ddd-view" |
||||||
|
:class="{ |
||||||
|
'is-active': vid && ctx.activeViewId === vid, |
||||||
|
'is-hover': vid && ctx.hoverViewId === vid, |
||||||
|
}" |
||||||
|
:data-view-id="vid" |
||||||
|
@mouseleave="handleMouseleave(vid)" |
||||||
|
@mousedown.left="handleMousedown($event, vid)" |
||||||
|
> |
||||||
|
<slot /> |
||||||
|
<!-- 使用全局单例，利用 absolute 固定位置 --> |
||||||
|
<div class="ddd-view-highlight" /> |
||||||
|
</component> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.ddd-view { |
||||||
|
z-index: 1; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
> .ddd-view-highlight { |
||||||
|
z-index: 10; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
content: ""; |
||||||
|
border: var(--canvas-measure-line) solid transparent; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
&.is-hover { |
||||||
|
z-index: 3; |
||||||
|
|
||||||
|
> .ddd-view-highlight { |
||||||
|
border-color: var(--canvas-hover-highlight-color); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.is-active { |
||||||
|
z-index: 2; |
||||||
|
|
||||||
|
> .ddd-view-highlight { |
||||||
|
border-color: var(--canvas-active-highlight-color); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.is-ghost { |
||||||
|
opacity: 0.3; |
||||||
|
|
||||||
|
> .ddd-view-highlight { |
||||||
|
border-style: dashed; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export { default as DddAudioView } from './AudioView.vue' |
||||||
|
export { default as DddImageView } from './ImageView.vue' |
||||||
|
export { default as DddTextView } from './TextView.vue' |
||||||
|
export { default as DddView } from './View.vue' |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
import { createApp } from 'vue' |
||||||
|
import './style.less' |
||||||
|
import App from './App.vue' |
||||||
|
|
||||||
|
createApp(App).mount('#app') |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
:root { |
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; |
||||||
|
line-height: 1.5; |
||||||
|
font-weight: 400; |
||||||
|
|
||||||
|
color-scheme: light; |
||||||
|
//color: rgba(255, 255, 255, 0.87); |
||||||
|
//background-color: #242424; |
||||||
|
|
||||||
|
font-synthesis: none; |
||||||
|
text-rendering: optimizeLegibility; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
|
||||||
|
|
||||||
|
--canvas-safe-area-inset-top: 36px; |
||||||
|
--canvas-safe-area-inset-bottom: 18px; |
||||||
|
--canvas-min-height: 736px; // 812px; |
||||||
|
--canvas-hover-highlight-color: #0256FF; |
||||||
|
--canvas-active-highlight-color: red; |
||||||
|
} |
||||||
|
|
||||||
|
*, |
||||||
|
*::before, |
||||||
|
*::after { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
min-width: 320px; |
||||||
|
min-height: 100vh; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
#app { |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
/*background: #eee;*/ |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
type Tuple<Len, Elm = unknown, Arr extends Elm[] = Elm[]> = |
||||||
|
Arr['length'] extends Len |
||||||
|
? Arr |
||||||
|
: never |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"target": "ES2020", |
||||||
|
"jsx": "preserve", |
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"], |
||||||
|
"useDefineForClassFields": true, |
||||||
|
"module": "ESNext", |
||||||
|
|
||||||
|
/* Bundler mode */ |
||||||
|
"moduleResolution": "bundler", |
||||||
|
"resolveJsonModule": true, |
||||||
|
"allowImportingTsExtensions": true, |
||||||
|
|
||||||
|
/* Linting */ |
||||||
|
"strict": true, |
||||||
|
"noFallthroughCasesInSwitch": true, |
||||||
|
"noUnusedLocals": true, |
||||||
|
"noUnusedParameters": true, |
||||||
|
"noEmit": true, |
||||||
|
"isolatedModules": true, |
||||||
|
"skipLibCheck": true |
||||||
|
}, |
||||||
|
"references": [{ "path": "./tsconfig.node.json" }], |
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] |
||||||
|
} |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"composite": true, |
||||||
|
"module": "ESNext", |
||||||
|
"moduleResolution": "bundler", |
||||||
|
"allowSyntheticDefaultImports": true, |
||||||
|
"skipLibCheck": true |
||||||
|
}, |
||||||
|
"include": ["vite.config.ts"] |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
import { defineConfig } from 'vite' |
||||||
|
import vue from '@vitejs/plugin-vue' |
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({ |
||||||
|
plugins: [vue()], |
||||||
|
}) |
||||||
Loading…
Reference in new issue