yuliang
/
yvan-rcs-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

菜单定义，widgetview 挂件视图定义

master
修宁 7 months ago
parent
a2a0e46823
commit
704f1e4d1d
9 changed files with 114 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 10
      src/components/icons/SvgCode.js
  3. 7
      src/components/split/split.vue
  4. 13
      src/components/viewMenus/editMenu/EditMenu.ts
  5. 6
      src/components/viewMenus/fileMenu/FileMenu.ts
  6. 3
      src/main.less
  7. 2
      src/runtime/DefineMenu.ts
  8. 85
      src/views/ModelMain.vue
  9. 2
      yarn.lock

2
package.json
View File

@ -21,7 +21,7 @@
"vue": "^3.5.13",
"vue-router": "^4.5.0",
"less": "^4.2.1",
"split.js": "^1.6.5",
"split.js": "^1.6.4",
"localforage": "^1.10.0",
"rimraf": "^3.0.2",
"vue-i18n": "9.2.2",

10
src/components/icons/SvgCode.js
View File

@ -0,0 +1,10 @@
export default {
find: `<svg t="1747727915932" class="icon" width="1em" height="1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1478"><path d="M948.032 902.784l-206.976-206.976C797.696 628.928 832 542.528 832 448c0-212.064-171.936-384-384-384S64 235.936 64 448s171.936 384 384 384c94.528 0 180.928-34.304 247.808-90.912l206.976 206.976c14.016 14.016 35.488 15.232 48 2.72C963.264 938.272 962.048 916.8 948.032 902.784zM448 768C271.264 768 128 624.736 128 448S271.264 128 448 128s320 143.264 320 320S624.736 768 448 768z" fill="#272636" p-id="1479"></path></svg>`,
redo: `<svg t="1747727915932" class="icon" width="1em" height="1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1478"><path d="M512 128c-211.2 0-384 172.8-384 384s172.8 384 384 384c211.2 0 384-172.8 384-384S723.2 128 512 128z m0 704c-176.64 0-320-143.36-320-320s143.36-320 320-320 320 143.36 320 320S688.64 832 512 832z" fill="#272636" p-id="1479"></path><path d="M512 256c-17.92 0-32 14.08-32 32v192H288c-17.92 0-32 14.08-32 32s14.08 32 32 32h192v192c0 17.92 14.08 32 32 32s32-14.08 32-32V512h192c17.92 0 32-14.08 32-32s-14.08-32-32-32H544V288c0-17.92-14.08-32-32-32z" fill="#272636" p-id="1480"></path></svg>`,
undo: `<svg t="1747727915932" class="icon" width="1em" height="1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1478"><path d="M512 128c211.2 0 384 172.8 384 384s-172.8 384-384 384c-211.2 0-384-172.8-384-384S300.8 128 512 128z m0 704c176.64 0 320-143.36 320-320s-143.36-320-320-320-320 143.36-320 320S335.36 832 512 832z" fill="#272636" p-id="1479"></path><path d="M512 256c17.92 0 32 14.08 32 32v192h192c17.92 0 32 14.08 32 32s-14.08 32-32 32H544v192c0 17.92-14.08 32-32 32s-32-14.08-32-32V512H288c-17.92 0-32-14.08-32-32s14.08-32 32-32h192V288c0-17.92 14.08-32 32-32z" fill="#272636" p-id="1480"></path></svg>`,
copy: `<svg t="1747727915932" class="icon" width="1em" height="1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1478"><path d="M768 128H256c-17.92 0-32 14.08-32 32v704c0 17.92 14.08 32 32 32h512c17.92 0 32-14.08 32-32V160c0-17.92-14.08-32-32-32z m0 736H256V192h512v672zM192 128c-17.92 0-32 14.08-32 32v704c0 17.92 14.08 32 32 32h64c17.92 0 32-14.08 32-32V160c0-17.92-14.08-32-32-32H192z" fill="#272636" p-id="1479"></path></svg>`,
paste: `<svg t="1747727915932" class="icon" width="1em" height="1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1478"><path d="M768 128H256c-17.92 0-32 14.08-32 32v704c0 17.92 14.08 32 32 32h512c17.92 0 32-14.08 32-32V160c0-17.92-14.08-32-32-32z m0 736H256V192h512v672zM192 128c-17.92 0-32 14.08-32 32v704c0 17.92 14.08 32 32 32h64c17.92 0 32-14.08 32-32V160c0-17.92-14.08-32-32-32H192z" fill="#272636" p-id="1479"></path></svg>`,
cut: `<svg t="1747727915932" class="icon" width="1em" height="1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1478"><path d="M768 128H256c-17.92 0-32 14.08-32 32v704c0 17.92 14.08 32 32 32h512c17.92 0 32-14.08 32-32V160c0-17.92-14.08-32-32-32z m0 736H256V192h512v672zM192 128c-17.92 0-32 14.08-32 32v704c0 17.92 14.08 32 32 32h64c17.92 0 32-14.08 32-32V160c0-17.92-14.08-32-32-32H192z" fill="#272636" p-id="1479"></path></svg>`,
open: `<svg t="1747728449111" class="icon" width="1em" height="1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2475"><path d="M921.6 450.133333c-6.4-8.533333-14.933333-12.8-25.6-12.8h-10.666667V341.333333c0-40.533333-34.133333-74.666667-74.666666-74.666666H514.133333c-4.266667 0-6.4-2.133333-8.533333-4.266667l-38.4-66.133333c-12.8-21.333333-38.4-36.266667-64-36.266667H170.666667c-40.533333 0-74.666667 34.133333-74.666667 74.666667v597.333333c0 6.4 2.133333 12.8 6.4 19.2 6.4 8.533333 14.933333 12.8 25.6 12.8h640c12.8 0 25.6-8.533333 29.866667-21.333333l128-362.666667c4.266667-10.666667 2.133333-21.333333-4.266667-29.866667zM170.666667 224h232.533333c4.266667 0 6.4 2.133333 8.533333 4.266667l38.4 66.133333c12.8 21.333333 38.4 36.266667 64 36.266667H810.666667c6.4 0 10.666667 4.266667 10.666666 10.666666v96H256c-12.8 0-25.6 8.533333-29.866667 21.333334l-66.133333 185.6V234.666667c0-6.4 4.266667-10.666667 10.666667-10.666667z m573.866666 576H172.8l104.533333-298.666667h571.733334l-104.533334 298.666667z" fill="#666666" p-id="2476"></path></svg>`,
save: `<svg t="1747728552182" class="icon" width="1em" height="1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3756" ><path d="M906.666667 298.666667L725.333333 117.333333c-14.933333-14.933333-32-21.333333-53.333333-21.333333H170.666667C130.133333 96 96 130.133333 96 170.666667v682.666666c0 40.533333 34.133333 74.666667 74.666667 74.666667h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V349.866667c0-19.2-8.533333-38.4-21.333333-51.2zM652.8 864H371.2V648.533333h281.6v215.466667z m211.2-10.666667c0 6.4-4.266667 10.666667-10.666667 10.666667h-140.8V618.666667c0-17.066667-12.8-29.866667-29.866666-29.866667H341.333333c-17.066667 0-29.866667 12.8-29.866666 29.866667v245.333333H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666667V170.666667c0-6.4 4.266667-10.666667 10.666667-10.666667h140.8V320c0 17.066667 12.8 29.866667 29.866666 29.866667h277.333334c17.066667 0 29.866667-12.8 29.866666-29.866667s-12.8-29.866667-29.866666-29.866667H371.2V160h302.933333c2.133333 0 6.4 2.133333 8.533334 2.133333l179.2 179.2c2.133333 2.133333 2.133333 4.266667 2.133333 8.533334V853.333333z" fill="#666666" p-id="3757"></path></svg>`
}

7
src/components/split/split.vue
View File

@ -46,6 +46,11 @@ export default defineComponent({
let useFirstDefaultSize = props.firstAreaDefaultSize && props.firstAreaDefaultSize > 0
let useLastDefaultSize = props.lastAreaDefaultSize && props.lastAreaDefaultSize > 0
let splitSumCount = 0
const refreshSize = (value) => {
if (data.value.instance) {
data.value.instance?.setSizes(value)
}
}
const init = () => {
if (data.value.instance !== null) {
data.value.instance?.destroy()
@ -148,7 +153,7 @@ export default defineComponent({
return data.value.instance?.getSizes() || 0
}
return { data, init, parent, reset, getSizes }
return { data, init, parent, reset, getSizes, refreshSize }
}
})
</script>

13
src/components/viewMenus/editMenu/EditMenu.ts
View File

@ -1,5 +1,6 @@
import { renderIcon } from '@/utils/webutils.ts'
import { defineMenu } from '@/runtime/DefineMenu.ts'
import SvgCode from '@/components/icons/SvgCode'
export default defineMenu((menus) => {
menus.insertChildren('modelFile',
@ -11,19 +12,19 @@ export default defineMenu((menus) => {
},
[
{
name: 'find', label: '查找', icon: renderIcon('ModelFile'), order: 1, tip: 'Ctrl+F', divided: true,
name: 'find', label: '查找', icon: SvgCode.find, order: 1, tip: 'Ctrl+F', divided: true,
click: () => {
system.msg('查找')
}
},
{
name: 'undo', label: '撤销', icon: renderIcon('ModelFile'), order: 2, tip: 'Ctrl+Z', disabled: true,
name: 'undo', label: '撤销', icon: SvgCode.undo, order: 2, tip: 'Ctrl+Z', disabled: true,
click: () => {
system.msg('撤销')
}
},
{
name: 'redo', label: '重做', icon: renderIcon('ModelFile'), order: 3, tip: 'Ctrl+Y', divided: true,
name: 'redo', label: '重做', icon: SvgCode.redo, order: 3, tip: 'Ctrl+Y', divided: true,
disabled() {
return true
},
@ -32,7 +33,7 @@ export default defineMenu((menus) => {
}
},
{
name: 'copy', label: '复制', icon: renderIcon('ModelFile'), order: 4, tip: 'Ctrl+C',
name: 'copy', label: '复制', icon: SvgCode.copy, order: 4, tip: 'Ctrl+C',
disabled() {
return true
},
@ -41,7 +42,7 @@ export default defineMenu((menus) => {
}
},
{
name: 'cut', label: '剪切', icon: renderIcon('ModelFile'), order: 5, tip: 'Ctrl+X',
name: 'cut', label: '剪切', icon: SvgCode.cut, order: 5, tip: 'Ctrl+X',
disabled() {
return true
},
@ -50,7 +51,7 @@ export default defineMenu((menus) => {
}
},
{
name: 'paste', label: '粘贴', icon: renderIcon('ModelFile'), order: 6, tip: 'Ctrl+V',
name: 'paste', label: '粘贴', icon: SvgCode.paste, order: 6, tip: 'Ctrl+V',
disabled() {
return true
},

6
src/components/viewMenus/fileMenu/FileMenu.ts
View File

@ -1,5 +1,7 @@
import { renderIcon } from '@/utils/webutils.ts'
import { defineMenu } from '@/runtime/DefineMenu.ts'
import SvgCode from '@/components/icons/SvgCode'
import { Open } from '@element-plus/icons-vue'
export default defineMenu((menus) => {
menus.insertChildren('file',
@ -8,13 +10,13 @@ export default defineMenu((menus) => {
},
[
{
name: 'open', label: '打开', icon: renderIcon('ModelFile'), order: 1, tip: 'Ctrl+O',
name: 'open', label: '打开', icon: SvgCode.open, order: 1, tip: 'Ctrl+O',
click: () => {
system.msg('打开模型文件')
}
},
{
name: 'save', label: '保存', icon: renderIcon('ModelFile'), order: 2, tip: 'Ctrl+S',
name: 'save', label: '保存', icon: SvgCode.save, order: 2, tip: 'Ctrl+S',
click: () => {
system.msg('保存模型文件')
}

3
src/main.less
View File

@ -25,3 +25,6 @@
overflow: hidden;
}
.hidden-split.split + .gutter {
display: none;
}

2
src/runtime/DefineMenu.ts
View File

@ -3,7 +3,7 @@ import type { Component } from 'vue'
export interface MenuOption {
name: string
label?: string
icon?: Component
icon?: string
order?: number
tip?: string
disabled?: boolean | (() => boolean)

85
src/views/ModelMain.vue
View File

@ -64,19 +64,21 @@
</div>
<div class="btns btns-bottom">
<div :class="['item',sectionBottomTitle==='任务'?'selected':'']" @click="btnBottomMe('任务')">任务</div>
<div :class="['item',sectionBottomTitle==='日志'?'selected':'']" @click="btnBottomMe('控制')">日志</div>
<div :class="['item',sectionBottomTitle==='脚本'?'selected':'']" @click="btnBottomMe('监控')">脚本</div>
<div :class="['item',sectionBottomTitle==='日志'?'selected':'']" @click="btnBottomMe('日志')">日志</div>
<div :class="['item',sectionBottomTitle==='脚本'?'selected':'']" @click="btnBottomMe('脚本')">脚本</div>
</div>
</div>
<Split class="section" :direction="'vertical'" style="flex-shrink: 0;flex-grow:1;">
<SplitArea :class="['section-top']" :size="100 - defaultSize">
<Split class="section" :direction="'horizontal'" style="flex-shrink: 0;flex-grow:1;">
<SplitArea :class="['section-left']" :style="{width:sectionLeft}" :size="sectionLeftSize">
<Split class="section" :direction="'vertical'" style="flex-shrink: 0;flex-grow:1;" ref="mainSplit">
<SplitArea class="section-top" :size="hideBottom ? 100 : (100 - bottomSize)" :min-size="50"
:class="{'hidden-split':hideBottom}">
<Split class="section" :direction="'horizontal'" style="flex-shrink: 0;flex-grow:1;" ref="centerSplit">
<SplitArea v-show="!hideLeft" class="section-left" :class="{'hidden-split':hideLeft}"
:size="hideLeft ? 0 : sectionLeftSize">
<div class="section-item-wrap">
<div class="title">{{ sectionLeftTitle }}</div>
</div>
</SplitArea>
<SplitArea :class="['section-center']" :size="100 - sectionLeftSize - sectionRightSize">
<SplitArea class="section-center" :class="{'hidden-split':hideRight}" :size="calcCenterSize">
<el-tabs type="card" class="section-tabs">
<el-tab-pane label="标签1">
<div class="section-canvas">
@ -122,14 +124,14 @@
<el-tab-pane label="标签8">标签8</el-tab-pane>
</el-tabs>
</SplitArea>
<SplitArea :class="['section-right']" :style="{width:sectionRight}" :size="sectionRightSize">
<SplitArea v-show="!hideRight" class="section-right" :size="hideRight ? 0 : sectionRightSize">
<div class="section-item-wrap">
<div class="title">{{ sectionRightTitle }}</div>
</div>
</SplitArea>
</Split>
</SplitArea>
<SplitArea :class="['section-bottom']" :style="{height:appMenuHeight}" :size="defaultSize">
<SplitArea v-show="!hideBottom" :class="['section-bottom']" :size="hideBottom ? 0 : bottomSize" :min-size="0">
<div class="section-item-wrap">
<div class="title">{{ sectionBottomTitle }}</div>
</div>
@ -169,10 +171,10 @@ export default {
Logo,
calcRootMenu: getRootMenu(),
activeIndex: '',
defaultSize: 30,
appMenuHeight: '300px',
sectionLeft: '300px',
sectionRight: '300px',
bottomSize: 30,
hideBottom: false,
hideLeft: false,
hideRight: false,
sectionLeftSize: 20,
sectionRightSize: 20,
sectionLeftTitle: '模型',
@ -180,9 +182,49 @@ export default {
sectionBottomTitle: '任务'
}
},
computed: {},
computed: {
calcCenterSize() {
if (this.hideLeft && this.hideRight) {
return 100
} else if (this.hideLeft) {
return 100 - this.sectionRightSize
} else if (this.hideRight) {
return 100 - this.sectionLeftSize
}
return 100 - this.sectionLeftSize - this.sectionRightSize
}
},
watch: {
hideBottom(value) {
if (value) {
this.$refs.mainSplit.refreshSize([100, 0])
} else {
this.$refs.mainSplit.refreshSize([100 - this.bottomSize, this.bottomSize])
}
},
hideLeft() {
this.recalcCenterSize()
},
hideRight() {
this.recalcCenterSize()
}
},
methods: {
renderIcon,
recalcCenterSize() {
if (this.hideLeft && this.hideRight) {
this.$refs.centerSplit.refreshSize([0, 100, 0])
} else if (this.hideLeft) {
this.$refs.centerSplit.refreshSize([0, 100 - this.sectionRightSize, this.sectionRightSize])
} else if (this.hideRight) {
this.$refs.centerSplit.refreshSize([this.sectionLeftSize, 100 - this.sectionLeftSize, 0])
} else {
this.$refs.centerSplit.refreshSize([this.sectionLeftSize, 100 - this.sectionLeftSize - this.sectionRightSize, this.sectionRightSize])
}
},
clickRootMenu() {
},
@ -191,29 +233,32 @@ export default {
},
btnLeftMe(name) {
if (this.sectionLeftTitle === name) {
this.sectionLeft = '0'
this.hideLeft = true
this.sectionLeftTitle = ''
} else {
this.hideLeft = false
this.sectionLeftTitle = name
this.sectionLeft = '300px'
}
},
btnRightMe(name) {
if (this.sectionRightTitle === name) {
this.sectionRight = '0'
this.hideRight = true
this.sectionRightTitle = ''
} else {
this.hideRight = false
this.sectionRightTitle = name
this.sectionRight = '300px'
}
},
btnBottomMe(name) {
if (this.sectionBottomTitle === name) {
this.appMenuHeight = '0'
this.hideBottom = true
this.sectionBottomTitle = ''
} else {
this.hideBottom = false
this.sectionBottomTitle = name
this.appMenuHeight = '300px'
}
}
}

2
yarn.lock
View File

@ -1999,7 +1999,7 @@ speakingurl@^14.0.1:
resolved "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz#f37ec8ddc4ab98e9600c1c9ec324a8c48d772a53"
integrity sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==
split.js@^1.6.5:
split.js@^1.6.4:
version "1.6.5"
resolved "http://mirrors.cloud.tencent.com/npm/split.js/-/split.js-1.6.5.tgz#f7f61da1044c9984cb42947df4de4fadb5a3f300"
integrity sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw==

Write Preview
Loading…
Cancel
Save