Skip to content

Commit 7f8a0e7

Browse files
dataeaseShudataeaseShu
committed
fix(Workspace): When adding the Member-hover menu option, add the background hover interaction
1 parent 2585526 commit 7f8a0e7

File tree

8 files changed

+123
-29
lines changed

8 files changed

+123
-29
lines changed

‎frontend/src/assets/svg/icon_new-chat_outlined.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎frontend/src/style.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@
2626
--ed-border-radius-base: 6px !important;
2727
--ed-border-color: #d9dcdf !important;
2828
--ed-color-primary-light-7: #d2f1e9 !important;
29+
--ed-border-color: #d9dcdf !important;
30+
--ed-border-radius-base: 6px !important;
2931
}
3032

3133
a {

‎frontend/src/views/ds/Card.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import delIcon from '@/assets/svg/icon_delete.svg'
33
import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
44
import icon_form_outlined from '@/assets/svg/icon_form_outlined.svg'
5-
import icon_chat_outlined from '@/assets/svg/icon_chat_outlined.svg'
5+
import icon_chat_outlined from '@/assets/svg/icon_new-chat_outlined.svg'
66
import { computed, ref, unref } from 'vue'
77
import { ClickOutside as vClickOutside } from 'element-plus-secondary'
88
import { dsTypeWithImg } from './js/ds-type'
@@ -93,7 +93,7 @@ const onClickOutside = () => {
9393
<div click.stop class="methods">
9494
<el-button v-if="false" @click="runSQL">test</el-button>
9595
<el-button type="primary" style="margin-right: 8px" @click.stop="handleQuestion">
96-
<el-icon style="margin-right: 2px" size="12">
96+
<el-icon style="margin-right: 4px" size="16">
9797
<icon_chat_outlined></icon_chat_outlined>
9898
</el-icon>
9999
{{ $t('datasource.open_query') }}

‎frontend/src/views/system/appearance/LoginPreview.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -288,7 +288,7 @@ onMounted(() => {
288288
padding-top: 12px;
289289
box-shadow: 0px 4px 15px rgba(31, 35, 41, 0.08);
290290
border: 1px solid #dee0e3;
291-
border-radius: 2px;
291+
border-radius: 12px;
292292
293293
.login-form-item {
294294
margin-top: 15px;

‎frontend/src/views/system/appearance/Person.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ const account = computed(() => userStore.getAccount)
129129
position: absolute;
130130
bottom: 44px;
131131
pointer-events: none;
132+
border-radius: 6px;
132133
133134
&::after {
134135
content: '';

‎frontend/src/views/system/appearance/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -766,7 +766,7 @@ onUnmounted(() => {
766766
align-items: center;
767767
justify-content: center;
768768
background: #ffffff;
769-
border: 1px solid #bbbfc4;
769+
border: 1px solid var(--ed-border-color);
770770
border-radius: 6px;
771771
772772
.is-active {

‎frontend/src/views/system/permission/SelectPermission.vue‎

Lines changed: 66 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
v-model="search"
88
:validate-event="false"
99
:placeholder="$t('datasource.search')"
10-
style="width: 364px"
10+
style="width: 364px; margin-left: 16px"
1111
clearable
1212
>
1313
<template #prefix>
@@ -20,6 +20,7 @@
2020
<el-checkbox
2121
v-model="checkAll"
2222
class="mb-8"
23+
style="margin-left: 16px"
2324
:indeterminate="isIndeterminate"
2425
@change="handleCheckAllChange"
2526
>
@@ -35,6 +36,7 @@
3536
:key="space.id"
3637
:label="space.name"
3738
:value="space"
39+
class="hover-bg"
3840
>
3941
<div class="flex">
4042
<el-icon size="28">
@@ -52,7 +54,7 @@
5254
</div>
5355
</div>
5456
<div class="p-16 w-full">
55-
<div class="flex-between mb-16">
57+
<div class="flex-between mb-16" style="margin: 0 16px">
5658
<span class="lighter">
5759
{{ $t('workspace.selected_2_people', { msg: checkTableList.length }) }}
5860
</span>
@@ -61,7 +63,12 @@
6163
{{ $t('workspace.clear') }}
6264
</el-button>
6365
</div>
64-
<div v-for="ele in checkTableList" :key="ele.name" class="flex-between">
66+
<div
67+
v-for="ele in checkTableList"
68+
:key="ele.name"
69+
style="margin: 0 16px; position: relative"
70+
class="flex-between align-center hover-bg_select"
71+
>
6572
<div class="flex align-center ellipsis" style="width: 100%">
6673
<el-icon size="28">
6774
<avatar_personal></avatar_personal>
@@ -176,16 +183,54 @@ defineExpose({
176183
</script>
177184
<style lang="less">
178185
.select-user_permission {
186+
.lighter-bold {
187+
margin-bottom: 16px;
188+
font-weight: 500;
189+
font-size: 16px;
190+
line-height: 24px;
191+
}
192+
179193
.mb-8 {
180194
margin-bottom: 8px;
181195
}
182196
197+
.ed-checkbox {
198+
margin-right: 0;
199+
position: relative;
200+
}
201+
202+
.hover-bg,
203+
.hover-bg_select {
204+
&:hover {
205+
&::after {
206+
content: '';
207+
height: 44px;
208+
width: calc(100% + 34px);
209+
background: #1f23291a;
210+
position: absolute;
211+
border-radius: 6px;
212+
top: 50%;
213+
transform: translateY(-50%);
214+
left: -8px;
215+
z-index: 1;
216+
}
217+
}
218+
}
219+
220+
.hover-bg_select {
221+
&:hover {
222+
&::after {
223+
width: calc(100% + 16px);
224+
}
225+
}
226+
}
227+
183228
.mt-16 {
184229
margin-top: 16px;
185230
}
186231
187232
.p-16 {
188-
padding: 16px;
233+
padding: 16px 0;
189234
}
190235
191236
.lighter {
@@ -194,11 +239,8 @@ defineExpose({
194239
line-height: 22px;
195240
}
196241
197-
.lighter-bold {
198-
font-weight: 500;
199-
font-size: 16px;
200-
line-height: 24px;
201-
margin-bottom: 16px;
242+
.checkbox-group-block {
243+
margin: 0 16px;
202244
}
203245
204246
.checkbox-group-block {
@@ -217,27 +259,32 @@ defineExpose({
217259
}
218260
}
219261
262+
.close-btn {
263+
position: relative;
264+
z-index: 10;
265+
height: 24px;
266+
line-height: 24px;
267+
&:hover,
268+
&:active,
269+
&:focus {
270+
background: #1f23291a !important;
271+
}
272+
}
273+
220274
.border {
221275
border: 1px solid #dee0e3;
222276
}
223277
224278
.w-full {
225-
width: 100%;
279+
height: 100%;
280+
width: 50%;
226281
overflow-y: auto;
227282
228283
.flex-between {
229284
height: 44px;
230285
}
231286
}
232287
233-
.close-btn {
234-
&:hover,
235-
&:active,
236-
&:focus {
237-
background: #1f23291a !important;
238-
}
239-
}
240-
241288
.mt-8 {
242289
margin-top: 8px;
243290
}
@@ -263,13 +310,11 @@ defineExpose({
263310
.flex {
264311
display: flex;
265312
}
266-
.ed-checkbox {
267-
margin-right: 0 !important;
268-
}
269313
270314
.border-r {
271315
border-right: 1px solid #dee0e3;
272316
width: 50%;
317+
overflow: hidden;
273318
}
274319
}
275320
</style>

‎frontend/src/views/system/workspace/AuthorizedWorkspaceDialog.vue‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
v-model="search"
1818
:validate-event="false"
1919
:placeholder="$t('datasource.search')"
20-
style="width: 364px"
20+
style="width: 364px; margin-left: 16px"
2121
clearable
2222
>
2323
<template #prefix>
@@ -30,6 +30,7 @@
3030
<el-checkbox
3131
v-model="checkAll"
3232
class="mb-8"
33+
style="margin-left: 16px"
3334
:indeterminate="isIndeterminate"
3435
@change="handleCheckAllChange"
3536
>
@@ -45,6 +46,7 @@
4546
:key="space.id"
4647
:label="space.name"
4748
:value="space"
49+
class="hover-bg"
4850
>
4951
<div class="flex">
5052
<el-icon size="28">
@@ -62,7 +64,7 @@
6264
</div>
6365
</div>
6466
<div class="p-16 w-full">
65-
<div class="flex-between mb-16">
67+
<div class="flex-between mb-16" style="margin: 0 16px">
6668
<span class="lighter">
6769
{{ $t('workspace.selected_2_people', { msg: checkTableList.length }) }}
6870
</span>
@@ -71,7 +73,12 @@
7173
{{ $t('workspace.clear') }}
7274
</el-button>
7375
</div>
74-
<div v-for="ele in checkTableList" :key="ele.name" class="flex-between align-center">
76+
<div
77+
v-for="ele in checkTableList"
78+
:key="ele.name"
79+
style="margin: 0 16px; position: relative"
80+
class="flex-between align-center hover-bg_select"
81+
>
7582
<div
7683
:title="`${ele.name}(${ele.account})`"
7784
class="flex align-center ellipsis"
@@ -214,14 +221,41 @@ defineExpose({
214221
215222
.ed-checkbox {
216223
margin-right: 0;
224+
position: relative;
225+
}
226+
227+
.hover-bg,
228+
.hover-bg_select {
229+
&:hover {
230+
&::after {
231+
content: '';
232+
height: 44px;
233+
width: calc(100% + 34px);
234+
background: #1f23291a;
235+
position: absolute;
236+
border-radius: 6px;
237+
top: 50%;
238+
transform: translateY(-50%);
239+
left: -8px;
240+
z-index: 1;
241+
}
242+
}
243+
}
244+
245+
.hover-bg_select {
246+
&:hover {
247+
&::after {
248+
width: calc(100% + 16px);
249+
}
250+
}
217251
}
218252
219253
.mt-16 {
220254
margin-top: 16px;
221255
}
222256
223257
.p-16 {
224-
padding: 16px;
258+
padding: 16px 0;
225259
}
226260
227261
.lighter {
@@ -230,6 +264,10 @@ defineExpose({
230264
line-height: 22px;
231265
}
232266
267+
.checkbox-group-block {
268+
margin: 0 16px;
269+
}
270+
233271
.checkbox-group-block {
234272
.ed-checkbox,
235273
.ed-checkbox__label,
@@ -247,6 +285,10 @@ defineExpose({
247285
}
248286
249287
.close-btn {
288+
position: relative;
289+
z-index: 10;
290+
height: 24px;
291+
line-height: 24px;
250292
&:hover,
251293
&:active,
252294
&:focus {

0 commit comments

Comments
 (0)