@xilonglab/vue-main 1.2.17 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
defineOptions({ name: "XlJumpButton" })
|
|
3
|
+
|
|
4
|
+
const emits = defineEmits('click')
|
|
5
|
+
|
|
6
|
+
const props = defineProps({
|
|
7
|
+
type: {},
|
|
8
|
+
disabled: {},
|
|
9
|
+
loading: {},
|
|
10
|
+
size: {},
|
|
11
|
+
icon: {},
|
|
12
|
+
l: {},
|
|
13
|
+
url: {},
|
|
14
|
+
newTab: {
|
|
15
|
+
type: Boolean,
|
|
16
|
+
default: false
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
function handleClick() {
|
|
22
|
+
if (props.newTab) {
|
|
23
|
+
window.open(props.url, '_blank');
|
|
24
|
+
} else {
|
|
25
|
+
window.open(props.url)
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<template>
|
|
31
|
+
<xl-button v-bind="$props" @click="handleClick">
|
|
32
|
+
<slot />
|
|
33
|
+
</xl-button>
|
|
34
|
+
</template>
|
|
35
|
+
|
|
36
|
+
<style lang="less"></style>
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
defineOptions({
|
|
3
|
+
name: 'XlTopBar',
|
|
4
|
+
});
|
|
5
|
+
|
|
6
|
+
const props = defineProps({
|
|
7
|
+
realName: {
|
|
8
|
+
type: String,
|
|
9
|
+
default: '',
|
|
10
|
+
},
|
|
11
|
+
roleName: {
|
|
12
|
+
type: String,
|
|
13
|
+
default: '',
|
|
14
|
+
},
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
const emits = defineEmits(['logout']);
|
|
18
|
+
|
|
19
|
+
const handlers = {
|
|
20
|
+
logout() {
|
|
21
|
+
emits('logout');
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<template>
|
|
27
|
+
<div class="xl-top-bar">
|
|
28
|
+
<div class="menu-item">
|
|
29
|
+
<slot />
|
|
30
|
+
</div>
|
|
31
|
+
<div class="menu-item user-menu">
|
|
32
|
+
<div class="user-info">
|
|
33
|
+
<div class="user-avatar">
|
|
34
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
35
|
+
<path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
36
|
+
<path d="M20.5901 22C20.5901 18.13 16.7402 15 12.0002 15C7.26015 15 3.41016 18.13 3.41016 22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
37
|
+
</svg>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="user-details">
|
|
40
|
+
<div class="realName">{{ realName }}</div>
|
|
41
|
+
<div class="username">{{ roleName }}</div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="divider"></div>
|
|
45
|
+
<button class="logout-btn" @click="handlers.logout()">
|
|
46
|
+
<svg class="logout-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
47
|
+
<path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
48
|
+
<path d="M16 17L21 12L16 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
49
|
+
<path d="M21 12H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
50
|
+
</svg>
|
|
51
|
+
<span class="logout-text">退出</span>
|
|
52
|
+
</button>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<style lang="less">
|
|
58
|
+
@topbar-background: rgb(0 0 0 / 40%);
|
|
59
|
+
@topbar-active-background: rgb(0 0 0 / 30%);
|
|
60
|
+
@topbar-color: #f0f0f0;
|
|
61
|
+
|
|
62
|
+
.el-breadcrumb__inner {
|
|
63
|
+
color: #fff !important;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.xl-top-bar {
|
|
67
|
+
height: 55px;
|
|
68
|
+
text-align: right;
|
|
69
|
+
display: flex;
|
|
70
|
+
justify-content: right;
|
|
71
|
+
background: rgb(0 0 0 / 40%) !important;
|
|
72
|
+
border-radius: 5px;
|
|
73
|
+
border: 0 !important;
|
|
74
|
+
margin-bottom: 5px;
|
|
75
|
+
overflow: hidden;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.menu-item {
|
|
79
|
+
padding-right:20px;
|
|
80
|
+
height: 100%;
|
|
81
|
+
display: flex;
|
|
82
|
+
align-items: center;
|
|
83
|
+
color: @topbar-color;
|
|
84
|
+
|
|
85
|
+
&:last-of-type {
|
|
86
|
+
margin-left: auto;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.user-menu {
|
|
91
|
+
padding: 0 20px;
|
|
92
|
+
gap: 16px;
|
|
93
|
+
|
|
94
|
+
.user-info {
|
|
95
|
+
display: flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
gap: 12px;
|
|
98
|
+
padding: 8px 0;
|
|
99
|
+
|
|
100
|
+
.user-avatar {
|
|
101
|
+
width: 36px;
|
|
102
|
+
height: 36px;
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
justify-content: center;
|
|
106
|
+
background: rgba(255, 255, 255, 0.1);
|
|
107
|
+
border-radius: 50%;
|
|
108
|
+
color: @topbar-color;
|
|
109
|
+
flex-shrink: 0;
|
|
110
|
+
|
|
111
|
+
svg {
|
|
112
|
+
width: 20px;
|
|
113
|
+
height: 20px;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.user-details {
|
|
118
|
+
display: flex;
|
|
119
|
+
flex-direction: column;
|
|
120
|
+
gap: 2px;
|
|
121
|
+
|
|
122
|
+
.realName {
|
|
123
|
+
font-size: 14px;
|
|
124
|
+
font-weight: 500;
|
|
125
|
+
color: @topbar-color;
|
|
126
|
+
line-height: 1.2;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.username {
|
|
130
|
+
font-size: 12px;
|
|
131
|
+
color: rgba(255, 255, 255, 0.7);
|
|
132
|
+
line-height: 1.2;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.divider {
|
|
138
|
+
width: 1px;
|
|
139
|
+
height: 32px;
|
|
140
|
+
background: rgba(255, 255, 255, 0.2);
|
|
141
|
+
margin: 0 4px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.logout-btn {
|
|
145
|
+
display: flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
gap: 6px;
|
|
148
|
+
padding: 8px 16px;
|
|
149
|
+
background: rgba(255, 255, 255, 0.08);
|
|
150
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
151
|
+
border-radius: 6px;
|
|
152
|
+
color: @topbar-color;
|
|
153
|
+
font-size: 14px;
|
|
154
|
+
font-weight: 500;
|
|
155
|
+
cursor: pointer;
|
|
156
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
157
|
+
position: relative;
|
|
158
|
+
overflow: hidden;
|
|
159
|
+
|
|
160
|
+
&::before {
|
|
161
|
+
content: '';
|
|
162
|
+
position: absolute;
|
|
163
|
+
top: 0;
|
|
164
|
+
left: -100%;
|
|
165
|
+
width: 100%;
|
|
166
|
+
height: 100%;
|
|
167
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
168
|
+
transition: left 0.5s ease;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
&:hover {
|
|
172
|
+
background: rgba(255, 255, 255, 0.12);
|
|
173
|
+
border-color: rgba(255, 255, 255, 0.25);
|
|
174
|
+
transform: translateY(-1px);
|
|
175
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
176
|
+
|
|
177
|
+
&::before {
|
|
178
|
+
left: 100%;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.logout-icon {
|
|
182
|
+
transform: translateX(2px);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
&:active {
|
|
187
|
+
transform: translateY(0);
|
|
188
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.logout-icon {
|
|
192
|
+
width: 16px;
|
|
193
|
+
height: 16px;
|
|
194
|
+
transition: transform 0.3s ease;
|
|
195
|
+
flex-shrink: 0;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.logout-text {
|
|
199
|
+
white-space: nowrap;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
</style>
|
|
204
|
+
|