feat: titleBar模块开发
JINGYJ
3 weeks ago
parent
f7b5829cd1
commit
0e12f5ce43
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
@ -1,21 +1,139 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-07-03 10:37:10
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-07-03 10:41:34
|
||||
* @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\Controls\headCtrl.vue
|
||||
* @Description: 顶部栏
|
||||
-->
|
||||
<template>
|
||||
<div class="head-controls-wrap">
|
||||
<ul class="flex">
|
||||
<li
|
||||
v-for="(v, k) in ['文件', '编辑', '视图', '工具', '窗口', '帮助']"
|
||||
:key="k"
|
||||
class="flex flex-center"
|
||||
>
|
||||
{{ v }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="titlebar-wrap" @mousedown="mousedown($event)">
|
||||
<div class="win">
|
||||
<div class="title">
|
||||
<span class="title-icon"></span>
|
||||
<div class="title-text">
|
||||
<el-dropdown placement="bottom-start" trigger="click">
|
||||
<span class="el-dropdown-link">文件</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>新建方案</el-dropdown-item>
|
||||
<el-dropdown-item>打开方案</el-dropdown-item>
|
||||
<el-dropdown-item>最近打开</el-dropdown-item>
|
||||
<el-dropdown-item>打开实例</el-dropdown-item>
|
||||
<el-dropdown-item>保存方案</el-dropdown-item>
|
||||
<el-dropdown-item>另存方案</el-dropdown-item>
|
||||
<el-dropdown-item>导入流程</el-dropdown-item>
|
||||
<el-dropdown-item>退出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<span>设置</span>
|
||||
<el-dropdown placement="bottom-start" trigger="click">
|
||||
<span class="el-dropdown-link">工具</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>创建一键标定引导</el-dropdown-item>
|
||||
<el-dropdown-item>标定板生成工具</el-dropdown-item>
|
||||
<el-dropdown-item>自定义模块生成工具</el-dropdown-item>
|
||||
<el-dropdown-item>运行异常采集机器人工具</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-dropdown placement="bottom-start" trigger="click">
|
||||
<span class="el-dropdown-link">系统</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>日志</el-dropdown-item>
|
||||
<el-dropdown-item>通信管理</el-dropdown-item>
|
||||
<el-dropdown-item>控制器管理</el-dropdown-item>
|
||||
<el-dropdown-item>相机管理</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<span>帮助</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<div class="min"></div>
|
||||
<div class="max"></div>
|
||||
<div class="close"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
const dragging = ref(false)
|
||||
const mouseX = ref(0)
|
||||
const mouseY = ref(0)
|
||||
const mousedown = (event) => {
|
||||
dragging.value = true
|
||||
mouseX.value = event.x
|
||||
mouseY.value = event.y
|
||||
document.onmousemove = (e) => {
|
||||
if (dragging.value) {
|
||||
const x = e.screenX - mouseX.value
|
||||
const y = e.screenY - mouseY.value
|
||||
let data = {
|
||||
appX: x,
|
||||
appY: y
|
||||
}
|
||||
electron.ipcRenderer.invoke('custom-adsorption', data)
|
||||
}
|
||||
}
|
||||
document.onmouseup = () => {
|
||||
dragging.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.titlebar-wrap {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
background: #373737;
|
||||
|
||||
.win {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px 0 10px;
|
||||
-webkit-app-region: drag;
|
||||
.title {
|
||||
display: flex;
|
||||
-webkit-app-region: no-drag;
|
||||
.title-icon {
|
||||
margin-right: 32px;
|
||||
width: 80px;
|
||||
height: 26px;
|
||||
background: url('@/assets/images/titleBar/logo.png');
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.title-text {
|
||||
width: 270px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.el-dropdown-link {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
/* 隐藏箭头的伪元素 */
|
||||
.el-popper__arrow,
|
||||
.el-popper__arrow::before {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue