forked from github/dataease
refactor(仪表板): 优化公共链接下载等按钮区域显示效果 #7461
This commit is contained in:
wangjiahao
parent
a97ecb23c8
commit
487b9d5326
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
|
||||
<div
|
||||
id="fullscreenElement"
|
||||
:class="containerClass"
|
||||
>
|
||||
|
||||
@ -40,7 +39,6 @@
|
||||
/>{{ $t('panel.down') }}</span></el-button>
|
||||
<el-button
|
||||
v-if="isPcTerminal"
|
||||
id="fullscreenElement"
|
||||
size="mini"
|
||||
@click="toggleFullscreen"
|
||||
>
|
||||
|
||||
@ -1,28 +1,43 @@
|
||||
<template>
|
||||
<div
|
||||
class="link-bar-main bar-light"
|
||||
id="fullscreenElement"
|
||||
v-if="isPublicLink"
|
||||
ref="widget-div"
|
||||
:class="{'link-bar-main-active':barActive}"
|
||||
>
|
||||
<div class="bar-first">
|
||||
<i class="el-icon-d-arrow-left" />
|
||||
<el-tooltip
|
||||
:content="barActive?'收起':'展开'"
|
||||
>
|
||||
<svg-icon
|
||||
style="width: 16px;height: 16px"
|
||||
:icon-class="barActive?'icon_down-right_outlined':'icon_up-left_outlined'"
|
||||
@click="firstBarClick"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="bar-content">
|
||||
<div class="bar-diver" />
|
||||
<div class="link-icon-active">
|
||||
<svg-icon
|
||||
style="width: 16px;height: 16px"
|
||||
icon-class="icon-fanhui"
|
||||
icon-class="icon_left_outlined"
|
||||
@click="back2Last"
|
||||
/>
|
||||
</div>
|
||||
<div class="link-icon-active">
|
||||
<svg-icon
|
||||
style="width: 16px;height: 16px"
|
||||
icon-class="icon-xiazai"
|
||||
icon-class="icon_download_outlined"
|
||||
@click="exportPDF"
|
||||
/>
|
||||
</div>
|
||||
<div class="link-icon-active">
|
||||
<div class="link-icon-active" id="fullscreenElement">
|
||||
<svg-icon
|
||||
style="width: 16px;height: 16px"
|
||||
:icon-class="fullscreenState?'icon-suoxiao1':'icon_magnify_outlined'"
|
||||
:icon-class="fullscreenState?'icon_minify_outlined':'icon_magnify_outlined'"
|
||||
@click="toggleFullscreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,7 +67,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
fullscreenElement: null,
|
||||
fullscreenState: false
|
||||
fullscreenState: false,
|
||||
barActive: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -98,6 +114,9 @@ export default {
|
||||
document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
|
||||
},
|
||||
methods: {
|
||||
firstBarClick() {
|
||||
this.barActive = !this.barActive
|
||||
},
|
||||
handleFullscreenChange() {
|
||||
// 在全屏状态变化时触发此方法
|
||||
if (document.fullscreenElement) {
|
||||
@ -165,9 +184,20 @@ export default {
|
||||
height: 30px;
|
||||
width: 130px;
|
||||
bottom: 24px;
|
||||
right: 0px;
|
||||
right: -102px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
right: -96px;
|
||||
}
|
||||
|
||||
transition: 0.2s; /* 添加过渡动画 */
|
||||
}
|
||||
|
||||
.link-bar-main-active {
|
||||
right: 0px !important;
|
||||
transition: 0.2s; /* 添加过渡动画 */
|
||||
}
|
||||
|
||||
.bar-first {
|
||||
@ -179,6 +209,11 @@ export default {
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
padding: 3px 0px 4px 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.bar-diver {
|
||||
@ -190,7 +225,6 @@ export default {
|
||||
.bar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100px;
|
||||
border-top: 1px solid rgba(222, 224, 227, 1);
|
||||
border-bottom: 1px solid rgba(222, 224, 227, 1);
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
@ -203,6 +237,7 @@ export default {
|
||||
transition: .1s;
|
||||
border-radius: 3px;
|
||||
padding-left: 4px;
|
||||
margin-left: 4px;
|
||||
text-align: center;
|
||||
|
||||
&:active {
|
||||
|
||||
@ -15,6 +15,12 @@
|
||||
@link-export-pdf="downloadAsPDF"
|
||||
@back-to-top="backToTop"
|
||||
/>
|
||||
<link-opt-bar
|
||||
v-if="canvasId==='canvas-main'"
|
||||
:terminal="terminal"
|
||||
@link-export-pdf="downloadAsPDF"
|
||||
@back-to-top="backToTop"
|
||||
/>
|
||||
<div
|
||||
:id="previewDomId"
|
||||
:ref="previewRefId"
|
||||
|
||||
4
core/frontend/src/icons/svg/icon_down-right_outlined.svg
Normal file
4
core/frontend/src/icons/svg/icon_down-right_outlined.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.90488 12.7618L6.65937 8.00732L1.90488 3.25284C1.77471 3.12266 1.77471 2.9116 1.90488 2.78143L2.37629 2.31003C2.50646 2.17985 2.71752 2.17985 2.84769 2.31003L8.07358 7.53592C8.33393 7.79627 8.33393 8.21838 8.07358 8.47873L2.84769 13.7046C2.71752 13.8348 2.50646 13.8348 2.37629 13.7046L1.90488 13.2332C1.77471 13.103 1.77471 12.892 1.90488 12.7618Z" fill="#1F2329"/>
|
||||
<path d="M7.82871 12.7618L12.5832 8.00732L7.82871 3.25284C7.69854 3.12266 7.69854 2.9116 7.82871 2.78143L8.30012 2.31003C8.43029 2.17985 8.64134 2.17985 8.77152 2.31003L13.9974 7.53592C14.2578 7.79627 14.2578 8.21838 13.9974 8.47873L8.77152 13.7046C8.64134 13.8348 8.43029 13.8348 8.30012 13.7046L7.82871 13.2332C7.69854 13.103 7.69854 12.892 7.82871 12.7618Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 859 B |
3
core/frontend/src/icons/svg/icon_download_outlined.svg
Normal file
3
core/frontend/src/icons/svg/icon_download_outlined.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 12.3334V14.0001C14 14.3683 13.7015 14.6667 13.3333 14.6667H2.66667C2.29848 14.6667 2 14.3683 2 14.0001V12.3334C2 12.1493 2.14924 12.0001 2.33333 12.0001H3C3.18409 12.0001 3.33333 12.1493 3.33333 12.3334V13.3334H12.6667V12.3334C12.6667 12.1493 12.8159 12.0001 13 12.0001H13.6667C13.8508 12.0001 14 12.1493 14 12.3334ZM8.66667 9.35723L10.6736 7.35025C10.8038 7.22007 11.0149 7.22007 11.1451 7.35025L11.6165 7.82165C11.7466 7.95183 11.7466 8.16288 11.6165 8.29306L8.31663 11.5929C8.25154 11.658 8.16623 11.6905 8.08092 11.6905C7.99562 11.6905 7.91031 11.658 7.84522 11.5929L4.54539 8.29306C4.41521 8.16288 4.41521 7.95183 4.54539 7.82165L5.01679 7.35025C5.14697 7.22007 5.35802 7.22007 5.4882 7.35025L7.33334 9.19539V2.00008C7.33334 1.81599 7.48257 1.66675 7.66667 1.66675H8.33334C8.51743 1.66675 8.66667 1.81599 8.66667 2.00008V9.35723Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 969 B |
3
core/frontend/src/icons/svg/icon_minify_outlined.svg
Normal file
3
core/frontend/src/icons/svg/icon_minify_outlined.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.00555 9.33163C6.18964 9.33163 6.35631 9.40625 6.47695 9.5269C6.5976 9.64754 6.67222 9.81421 6.67222 9.9983V13.4381C6.67222 13.6222 6.52298 13.7715 6.33888 13.7715H5.67222C5.48812 13.7715 5.33888 13.6222 5.33888 13.4381V11.665L2.72855 14.2744C2.59838 14.4046 2.38732 14.4046 2.25715 14.2744L1.78574 13.803C1.65557 13.6729 1.65557 13.4618 1.78574 13.3316L4.4533 10.665H2.55702C2.37293 10.665 2.22369 10.5157 2.22369 10.3316V9.66497C2.22369 9.48087 2.37293 9.33163 2.55702 9.33163H6.00555ZM13.2793 1.7258C13.4094 1.59563 13.6205 1.59563 13.7507 1.7258L14.2221 2.19721C14.3522 2.32738 14.3522 2.53844 14.2221 2.66861L11.5545 5.33528H13.4508C13.6349 5.33528 13.7841 5.48452 13.7841 5.66861V6.33528C13.7841 6.51938 13.6349 6.66861 13.4508 6.66861H10.0023C9.81817 6.66861 9.65151 6.594 9.53086 6.47335C9.41022 6.35271 9.3356 6.18604 9.3356 6.00195V2.5621C9.3356 2.37801 9.48484 2.22877 9.66893 2.22877H10.3356C10.5197 2.22877 10.6689 2.37801 10.6689 2.5621V4.33525L13.2793 1.7258Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
4
core/frontend/src/icons/svg/icon_up-left_outlined.svg
Normal file
4
core/frontend/src/icons/svg/icon_up-left_outlined.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.16645 3.24307L3.41197 7.99755L8.16645 12.752C8.29663 12.8822 8.29663 13.0933 8.16645 13.2234L7.69505 13.6948C7.56487 13.825 7.35382 13.825 7.22364 13.6948L1.99775 8.46896C1.7374 8.20861 1.7374 7.7865 1.99775 7.52615L7.22364 2.30026C7.35382 2.17009 7.56487 2.17009 7.69505 2.30026L8.16645 2.77166C8.29663 2.90184 8.29663 3.11289 8.16645 3.24307Z" fill="#1F2329"/>
|
||||
<path d="M14.0999 3.24307L9.3454 7.99755L14.0999 12.752C14.2301 12.8822 14.2301 13.0933 14.0999 13.2234L13.6285 13.6948C13.4983 13.825 13.2872 13.825 13.1571 13.6948L7.93118 8.46896C7.67083 8.20861 7.67083 7.7865 7.93118 7.52615L13.1571 2.30026C13.2872 2.17009 13.4983 2.17009 13.6285 2.30026L14.0999 2.77166C14.2301 2.90184 14.2301 3.11289 14.0999 3.24307Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 854 B |
Loading…
Reference in New Issue
Block a user