befly-admin 3.4.37 → 3.4.38
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/.env.development +2 -2
- package/.env.production +2 -2
- package/package.json +10 -9
- package/src/App.vue +12 -5
- package/src/layouts/default.vue +67 -57
- package/src/main.js +38 -0
- package/src/plugins/http.js +13 -5
- package/src/styles/global.scss +139 -37
- package/src/types/auto-imports.d.ts +0 -2
- package/src/types/components.d.ts +15 -0
- package/src/types/typed-router.d.ts +26 -0
- package/src/views/index2.vue +448 -0
- package/src/views/index3.vue +707 -0
- package/vite.config.js +5 -2
- package/src/styles/variables.scss +0 -75
- package/src/views/index.vue +0 -18
|
@@ -72,6 +72,20 @@ declare module 'vue-router/auto-routes' {
|
|
|
72
72
|
Record<never, never>,
|
|
73
73
|
| never
|
|
74
74
|
>,
|
|
75
|
+
'/index2': RouteRecordInfo<
|
|
76
|
+
'/index2',
|
|
77
|
+
'/index2',
|
|
78
|
+
Record<never, never>,
|
|
79
|
+
Record<never, never>,
|
|
80
|
+
| never
|
|
81
|
+
>,
|
|
82
|
+
'/index3': RouteRecordInfo<
|
|
83
|
+
'/index3',
|
|
84
|
+
'/index3',
|
|
85
|
+
Record<never, never>,
|
|
86
|
+
Record<never, never>,
|
|
87
|
+
| never
|
|
88
|
+
>,
|
|
75
89
|
}
|
|
76
90
|
|
|
77
91
|
/**
|
|
@@ -127,6 +141,18 @@ declare module 'vue-router/auto-routes' {
|
|
|
127
141
|
views:
|
|
128
142
|
| never
|
|
129
143
|
}
|
|
144
|
+
'src/views/index2.vue': {
|
|
145
|
+
routes:
|
|
146
|
+
| '/index2'
|
|
147
|
+
views:
|
|
148
|
+
| never
|
|
149
|
+
}
|
|
150
|
+
'src/views/index3.vue': {
|
|
151
|
+
routes:
|
|
152
|
+
| '/index3'
|
|
153
|
+
views:
|
|
154
|
+
| never
|
|
155
|
+
}
|
|
130
156
|
}
|
|
131
157
|
|
|
132
158
|
/**
|
|
@@ -0,0 +1,448 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="dashboard">
|
|
3
|
+
<h1>后台数据面板</h1>
|
|
4
|
+
|
|
5
|
+
<!-- Stats Cards -->
|
|
6
|
+
<div class="stats-grid">
|
|
7
|
+
<div class="stat-card">
|
|
8
|
+
<div class="stat-icon blue">
|
|
9
|
+
<i class="icon-users"></i>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="stat-content">
|
|
12
|
+
<div class="stat-number">12,345</div>
|
|
13
|
+
<div class="stat-label">总用户数</div>
|
|
14
|
+
<div class="stat-change positive">+5.2% 本月</div>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
<div class="stat-card">
|
|
19
|
+
<div class="stat-icon green">
|
|
20
|
+
<i class="icon-dollar"></i>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="stat-content">
|
|
23
|
+
<div class="stat-number">$45,678</div>
|
|
24
|
+
<div class="stat-label">总收入</div>
|
|
25
|
+
<div class="stat-change positive">+8.9% 本月</div>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div class="stat-card">
|
|
30
|
+
<div class="stat-icon purple">
|
|
31
|
+
<i class="icon-shopping-cart"></i>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="stat-content">
|
|
34
|
+
<div class="stat-number">789</div>
|
|
35
|
+
<div class="stat-label">总订单数</div>
|
|
36
|
+
<div class="stat-change positive">+12.5% 本月</div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="stat-card">
|
|
41
|
+
<div class="stat-icon orange">
|
|
42
|
+
<i class="icon-eye"></i>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="stat-content">
|
|
45
|
+
<div class="stat-number">98,765</div>
|
|
46
|
+
<div class="stat-label">访问量</div>
|
|
47
|
+
<div class="stat-change negative">-2.1% 本月</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<!-- Charts Section -->
|
|
53
|
+
<div class="charts-section">
|
|
54
|
+
<div class="chart-card">
|
|
55
|
+
<h3>月度收入趋势</h3>
|
|
56
|
+
<div class="chart-container">
|
|
57
|
+
<div class="line-chart">
|
|
58
|
+
<div class="chart-line"></div>
|
|
59
|
+
<div class="chart-grid"></div>
|
|
60
|
+
<div class="chart-labels"><span>1月</span><span>2月</span><span>3月</span><span>4月</span><span>5月</span><span>6月</span><span>7月</span><span>8月</span><span>9月</span><span>10月</span><span>11月</span><span>12月</span></div>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<div class="chart-card">
|
|
66
|
+
<h3>订单类型分布</h3>
|
|
67
|
+
<div class="chart-container">
|
|
68
|
+
<div class="bar-chart">
|
|
69
|
+
<div class="bar-group">
|
|
70
|
+
<div class="bar" style="height: 65%; background: #3498db">
|
|
71
|
+
<div class="bar-label">实物商品</div>
|
|
72
|
+
<div class="bar-value">65%</div>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="bar" style="height: 25%; background: #e74c3c">
|
|
75
|
+
<div class="bar-label">虚拟商品</div>
|
|
76
|
+
<div class="bar-value">25%</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="bar" style="height: 10%; background: #9b59b6">
|
|
79
|
+
<div class="bar-label">服务</div>
|
|
80
|
+
<div class="bar-value">10%</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<!-- Recent Orders -->
|
|
89
|
+
<div class="orders-table-card">
|
|
90
|
+
<h3>最新订单</h3>
|
|
91
|
+
<div class="table-container">
|
|
92
|
+
<table class="orders-table">
|
|
93
|
+
<thead>
|
|
94
|
+
<tr>
|
|
95
|
+
<th>订单号</th>
|
|
96
|
+
<th>用户</th>
|
|
97
|
+
<th>金额</th>
|
|
98
|
+
<th>状态</th>
|
|
99
|
+
<th>时间</th>
|
|
100
|
+
</tr>
|
|
101
|
+
</thead>
|
|
102
|
+
<tbody>
|
|
103
|
+
<tr>
|
|
104
|
+
<td>ORDER-001</td>
|
|
105
|
+
<td>张三</td>
|
|
106
|
+
<td>$123.45</td>
|
|
107
|
+
<td><span class="status completed">已完成</span></td>
|
|
108
|
+
<td>2023-11-18 14:30</td>
|
|
109
|
+
</tr>
|
|
110
|
+
<tr>
|
|
111
|
+
<td>ORDER-002</td>
|
|
112
|
+
<td>李四</td>
|
|
113
|
+
<td>$67.89</td>
|
|
114
|
+
<td><span class="status pending">待处理</span></td>
|
|
115
|
+
<td>2023-11-18 14:25</td>
|
|
116
|
+
</tr>
|
|
117
|
+
<tr>
|
|
118
|
+
<td>ORDER-003</td>
|
|
119
|
+
<td>王五</td>
|
|
120
|
+
<td>$234.56</td>
|
|
121
|
+
<td><span class="status shipping">配送中</span></td>
|
|
122
|
+
<td>2023-11-18 14:20</td>
|
|
123
|
+
</tr>
|
|
124
|
+
<tr>
|
|
125
|
+
<td>ORDER-004</td>
|
|
126
|
+
<td>赵六</td>
|
|
127
|
+
<td>$89.01</td>
|
|
128
|
+
<td><span class="status cancelled">已取消</span></td>
|
|
129
|
+
<td>2023-11-18 14:15</td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr>
|
|
132
|
+
<td>ORDER-005</td>
|
|
133
|
+
<td>孙七</td>
|
|
134
|
+
<td>$56.78</td>
|
|
135
|
+
<td><span class="status completed">已完成</span></td>
|
|
136
|
+
<td>2023-11-18 14:10</td>
|
|
137
|
+
</tr>
|
|
138
|
+
</tbody>
|
|
139
|
+
</table>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</template>
|
|
144
|
+
|
|
145
|
+
<route lang="yaml">
|
|
146
|
+
meta:
|
|
147
|
+
layout: default
|
|
148
|
+
title: 数据面板
|
|
149
|
+
</route>
|
|
150
|
+
|
|
151
|
+
<style lang="scss" scoped>
|
|
152
|
+
.dashboard {
|
|
153
|
+
padding: 20px;
|
|
154
|
+
min-height: 100vh;
|
|
155
|
+
background-color: #f5f7fa;
|
|
156
|
+
font-family: 'Arial', sans-serif;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
h1 {
|
|
160
|
+
color: #2c3e50;
|
|
161
|
+
font-size: 24px;
|
|
162
|
+
margin-bottom: 20px;
|
|
163
|
+
font-weight: 600;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.stats-grid {
|
|
167
|
+
display: grid;
|
|
168
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
169
|
+
gap: 20px;
|
|
170
|
+
margin-bottom: 20px;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.stat-card {
|
|
174
|
+
background-color: #fff;
|
|
175
|
+
border-radius: 12px;
|
|
176
|
+
padding: 20px;
|
|
177
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
178
|
+
display: flex;
|
|
179
|
+
align-items: center;
|
|
180
|
+
transition:
|
|
181
|
+
transform 0.2s,
|
|
182
|
+
box-shadow 0.2s;
|
|
183
|
+
|
|
184
|
+
&:hover {
|
|
185
|
+
transform: translateY(-5px);
|
|
186
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.stat-icon {
|
|
191
|
+
width: 60px;
|
|
192
|
+
height: 60px;
|
|
193
|
+
border-radius: 12px;
|
|
194
|
+
display: flex;
|
|
195
|
+
align-items: center;
|
|
196
|
+
justify-content: center;
|
|
197
|
+
font-size: 24px;
|
|
198
|
+
margin-right: 20px;
|
|
199
|
+
color: #fff;
|
|
200
|
+
|
|
201
|
+
&.blue {
|
|
202
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
&.green {
|
|
206
|
+
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
&.purple {
|
|
210
|
+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
&.orange {
|
|
214
|
+
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.stat-content {
|
|
219
|
+
flex: 1;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.stat-number {
|
|
223
|
+
font-size: 24px;
|
|
224
|
+
font-weight: 700;
|
|
225
|
+
color: #2c3e50;
|
|
226
|
+
margin-bottom: 4px;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.stat-label {
|
|
230
|
+
font-size: 14px;
|
|
231
|
+
color: #90a4ae;
|
|
232
|
+
margin-bottom: 4px;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.stat-change {
|
|
236
|
+
font-size: 12px;
|
|
237
|
+
font-weight: 600;
|
|
238
|
+
|
|
239
|
+
&.positive {
|
|
240
|
+
color: #4caf50;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
&.negative {
|
|
244
|
+
color: #f44336;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.charts-section {
|
|
249
|
+
display: grid;
|
|
250
|
+
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
|
251
|
+
gap: 20px;
|
|
252
|
+
margin-bottom: 20px;
|
|
253
|
+
|
|
254
|
+
@media (max-width: 768px) {
|
|
255
|
+
grid-template-columns: 1fr;
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.chart-card {
|
|
260
|
+
background-color: #fff;
|
|
261
|
+
border-radius: 12px;
|
|
262
|
+
padding: 20px;
|
|
263
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.chart-card h3 {
|
|
267
|
+
color: #2c3e50;
|
|
268
|
+
font-size: 18px;
|
|
269
|
+
margin-bottom: 20px;
|
|
270
|
+
font-weight: 600;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.chart-container {
|
|
274
|
+
height: 250px;
|
|
275
|
+
background-color: #fafafa;
|
|
276
|
+
border-radius: 8px;
|
|
277
|
+
padding: 20px;
|
|
278
|
+
display: flex;
|
|
279
|
+
align-items: center;
|
|
280
|
+
justify-content: center;
|
|
281
|
+
position: relative;
|
|
282
|
+
overflow: hidden;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.line-chart {
|
|
286
|
+
width: 100%;
|
|
287
|
+
height: 100%;
|
|
288
|
+
position: relative;
|
|
289
|
+
|
|
290
|
+
.chart-grid {
|
|
291
|
+
position: absolute;
|
|
292
|
+
top: 0;
|
|
293
|
+
left: 0;
|
|
294
|
+
right: 0;
|
|
295
|
+
bottom: 0;
|
|
296
|
+
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
|
|
297
|
+
background-size: 40px 40px;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.chart-line {
|
|
301
|
+
position: absolute;
|
|
302
|
+
top: 50%;
|
|
303
|
+
left: 0;
|
|
304
|
+
right: 0;
|
|
305
|
+
height: 2px;
|
|
306
|
+
background: linear-gradient(to right, #3498db, #9b59b6);
|
|
307
|
+
animation: lineMove 3s ease-in-out infinite;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.chart-labels {
|
|
311
|
+
position: absolute;
|
|
312
|
+
bottom: 0;
|
|
313
|
+
left: 0;
|
|
314
|
+
right: 0;
|
|
315
|
+
display: flex;
|
|
316
|
+
justify-content: space-between;
|
|
317
|
+
font-size: 11px;
|
|
318
|
+
color: #90a4ae;
|
|
319
|
+
padding: 0 10px;
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
@keyframes lineMove {
|
|
324
|
+
0%,
|
|
325
|
+
100% {
|
|
326
|
+
transform: translateY(0);
|
|
327
|
+
}
|
|
328
|
+
50% {
|
|
329
|
+
transform: translateY(-50px);
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.bar-chart {
|
|
334
|
+
width: 100%;
|
|
335
|
+
height: 100%;
|
|
336
|
+
display: flex;
|
|
337
|
+
align-items: flex-end;
|
|
338
|
+
justify-content: center;
|
|
339
|
+
gap: 40px;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.bar-group {
|
|
343
|
+
display: flex;
|
|
344
|
+
align-items: flex-end;
|
|
345
|
+
gap: 20px;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.bar {
|
|
349
|
+
width: 80px;
|
|
350
|
+
border-radius: 4px 4px 0 0;
|
|
351
|
+
display: flex;
|
|
352
|
+
flex-direction: column;
|
|
353
|
+
align-items: center;
|
|
354
|
+
justify-content: flex-end;
|
|
355
|
+
padding: 10px 0;
|
|
356
|
+
position: relative;
|
|
357
|
+
transition: transform 0.3s ease;
|
|
358
|
+
|
|
359
|
+
&:hover {
|
|
360
|
+
transform: scaleY(1.05);
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.bar-label {
|
|
364
|
+
font-size: 12px;
|
|
365
|
+
color: #2c3e50;
|
|
366
|
+
margin-bottom: 4px;
|
|
367
|
+
font-weight: 600;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.bar-value {
|
|
371
|
+
font-size: 14px;
|
|
372
|
+
color: #fff;
|
|
373
|
+
font-weight: 700;
|
|
374
|
+
margin-bottom: 4px;
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.orders-table-card {
|
|
379
|
+
background-color: #fff;
|
|
380
|
+
border-radius: 12px;
|
|
381
|
+
padding: 20px;
|
|
382
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.orders-table-card h3 {
|
|
386
|
+
color: #2c3e50;
|
|
387
|
+
font-size: 18px;
|
|
388
|
+
margin-bottom: 20px;
|
|
389
|
+
font-weight: 600;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.table-container {
|
|
393
|
+
overflow-x: auto;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.orders-table {
|
|
397
|
+
width: 100%;
|
|
398
|
+
border-collapse: collapse;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.orders-table th {
|
|
402
|
+
background-color: #f5f7fa;
|
|
403
|
+
color: #2c3e50;
|
|
404
|
+
text-align: left;
|
|
405
|
+
padding: 12px;
|
|
406
|
+
font-weight: 600;
|
|
407
|
+
font-size: 14px;
|
|
408
|
+
border-bottom: 2px solid #e0e0e0;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.orders-table td {
|
|
412
|
+
padding: 12px;
|
|
413
|
+
font-size: 14px;
|
|
414
|
+
color: #455a64;
|
|
415
|
+
border-bottom: 1px solid #e0e0e0;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.orders-table tbody tr:hover {
|
|
419
|
+
background-color: #fafafa;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.status {
|
|
423
|
+
padding: 4px 12px;
|
|
424
|
+
border-radius: 12px;
|
|
425
|
+
font-size: 12px;
|
|
426
|
+
font-weight: 600;
|
|
427
|
+
|
|
428
|
+
&.completed {
|
|
429
|
+
background-color: #e8f5e9;
|
|
430
|
+
color: #4caf50;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
&.pending {
|
|
434
|
+
background-color: #fff3e0;
|
|
435
|
+
color: #ff9800;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
&.shipping {
|
|
439
|
+
background-color: #e3f2fd;
|
|
440
|
+
color: #2196f3;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
&.cancelled {
|
|
444
|
+
background-color: #ffebee;
|
|
445
|
+
color: #f44336;
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
</style>
|