Skip to content

Commit 1bb282b

Browse files
zxwk1998zxwk1998
committed
♻️ refactor: code
1 parent 8135fca commit 1bb282b

File tree

3 files changed

+62
-69
lines changed

3 files changed

+62
-69
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"jsencrypt": "^3.3.2",
3939
"layouts": "file:layouts",
4040
"lodash": "^4.17.21",
41-
"marked": "^16.1.1",
41+
"marked": "^16.1.2",
4242
"mockjs": "^1.1.0",
4343
"nprogress": "^0.2.0",
4444
"qrcode": "^1.5.4",
@@ -68,7 +68,7 @@
6868
"eslint-plugin-vue": "^9.1.1",
6969
"fs-extra": "^11.3.0",
7070
"html-rspack-plugin": "^6.1.2",
71-
"lint-staged": "^16.1.2",
71+
"lint-staged": "^16.1.4",
7272
"path-browserify": "^1.0.1",
7373
"prettier": "^2.8.8",
7474
"sass": "~1.32.13",

‎pnpm-lock.yaml

Lines changed: 15 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/layouts/components/VabNav/index.vue

Lines changed: 45 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,11 @@
7979
padding-left: $base-padding;
8080
overflow: hidden;
8181
user-select: none;
82-
background: rgba(255, 255, 255, 0.8);
82+
background: rgba(255, 255, 255, 0.85);
8383
backdrop-filter: blur(20px) saturate(180%);
8484
-webkit-backdrop-filter: blur(20px) saturate(180%);
85-
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
86-
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
85+
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
86+
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
8787
8888
&::before {
8989
content: '';
@@ -92,7 +92,7 @@
9292
left: 0;
9393
right: 0;
9494
bottom: 0;
95-
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.2) 100%);
95+
background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.3) 100%);
9696
pointer-events: none;
9797
}
9898
@@ -107,22 +107,24 @@
107107
display: flex;
108108
align-items: center;
109109
justify-content: center;
110-
width: 36px;
111-
height: 36px;
110+
width: 38px;
111+
height: 38px;
112112
color: rgba(0, 0, 0, 0.7);
113-
background: rgba(255, 255, 255, 0.6);
114-
border: 1px solid rgba(255, 255, 255, 0.8);
113+
background: rgba(255, 255, 255, 0.7);
114+
border: 1px solid rgba(0, 0, 0, 0.08);
115115
border-radius: 50%;
116116
cursor: pointer;
117117
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
118118
backdrop-filter: blur(10px);
119119
-webkit-backdrop-filter: blur(10px);
120+
margin-right: $base-padding;
120121
121122
&:hover {
122-
background: rgba(255, 255, 255, 0.8);
123-
border-color: rgba(255, 255, 255, 1);
123+
color: rgba(0, 0, 0, 0.9);
124+
background: rgba(255, 255, 255, 0.9);
125+
border-color: rgba(0, 0, 0, 0.15);
124126
transform: translateY(-1px);
125-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
127+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
126128
}
127129
128130
&:active {
@@ -139,16 +141,16 @@
139141
align-items: center;
140142
justify-content: flex-end;
141143
height: $base-nav-bar-height;
142-
gap: 8px;
144+
gap: 12px;
143145
144146
::v-deep {
145147
svg {
146-
width: 1.2em;
147-
height: 1.2em;
148-
padding: 8px;
148+
width: 1.25em;
149+
height: 1.25em;
150+
padding: 9px;
149151
color: rgba(0, 0, 0, 0.7);
150-
background: rgba(255, 255, 255, 0.6);
151-
border: 1px solid rgba(255, 255, 255, 0.8);
152+
background: rgba(255, 255, 255, 0.7);
153+
border: 1px solid rgba(0, 0, 0, 0.08);
152154
border-radius: 50%;
153155
cursor: pointer;
154156
fill: rgba(0, 0, 0, 0.7);
@@ -157,10 +159,11 @@
157159
-webkit-backdrop-filter: blur(10px);
158160
159161
&:hover {
160-
background: rgba(255, 255, 255, 0.8);
161-
border-color: rgba(255, 255, 255, 1);
162+
color: rgba(0, 0, 0, 0.9);
163+
background: rgba(255, 255, 255, 0.9);
164+
border-color: rgba(0, 0, 0, 0.15);
162165
transform: translateY(-1px);
163-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
166+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
164167
}
165168
166169
&:active {
@@ -172,15 +175,16 @@
172175
button {
173176
svg {
174177
margin-right: 0;
175-
color: rgba(255, 255, 255, 0.9);
176-
background: rgba(0, 122, 255, 0.8);
177-
border-color: rgba(0, 122, 255, 0.9);
178+
color: rgba(255, 255, 255, 0.95);
179+
background: linear-gradient(135deg, rgba(77, 138, 240, 0.9) 0%, rgba(52, 120, 246, 0.95) 100%);
180+
border-color: rgba(77, 138, 240, 0.8);
178181
cursor: pointer;
179-
fill: rgba(255, 255, 255, 0.9);
182+
fill: rgba(255, 255, 255, 0.95);
180183
181184
&:hover {
182-
background: rgba(0, 122, 255, 0.9);
183-
border-color: rgba(0, 122, 255, 1);
185+
background: linear-gradient(135deg, rgba(77, 138, 240, 1) 0%, rgba(52, 120, 246, 1) 100%);
186+
border-color: rgba(77, 138, 240, 1);
187+
box-shadow: 0 4px 12px rgba(77, 138, 240, 0.3), 0 2px 4px rgba(77, 138, 240, 0.2);
184188
}
185189
}
186190
}
@@ -189,45 +193,34 @@
189193
margin-right: 0;
190194
191195
.el-button {
192-
background: rgba(255, 255, 255, 0.6);
193-
border: 1px solid rgba(255, 255, 255, 0.8);
196+
background: rgba(255, 255, 255, 0.7);
197+
border: 1px solid rgba(0, 0, 0, 0.08);
194198
border-radius: 12px;
195199
backdrop-filter: blur(10px);
196200
-webkit-backdrop-filter: blur(10px);
197201
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
198202
199203
&:hover {
200-
background: rgba(255, 255, 255, 0.8);
201-
border-color: rgba(255, 255, 255, 1);
202-
transform: translateY(-1px);
203-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
204+
background: rgba(255, 255, 255, 0.9);
205+
border-color: rgba(0, 0, 0, 0.15);
206+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
204207
}
205208
}
206209
}
207-
}
208-
}
209-
}
210210
211-
// 响应式设计
212-
@media (max-width: 768px) {
213-
.nav-container {
214-
padding: 0 12px;
215-
216-
.left-panel {
217-
.fold-unfold {
218-
width: 32px;
219-
height: 32px;
211+
.user-name {
212+
color: rgba(0, 0, 0, 0.8);
213+
font-weight: 500;
220214
}
221-
}
222215
223-
.right-panel {
224-
gap: 4px;
216+
.user-avatar {
217+
border: 2px solid rgba(255, 255, 255, 0.8);
218+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
219+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
225220
226-
::v-deep {
227-
svg {
228-
padding: 6px;
229-
width: 1em;
230-
height: 1em;
221+
&:hover {
222+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
223+
transform: translateY(-1px);
231224
}
232225
}
233226
}

0 commit comments

Comments
 (0)