Skip to content

Commit 2baf9fc

Browse files
author
Taois
committed
feat: 重构前端
1 parent a355030 commit 2baf9fc

42 files changed

Lines changed: 6895 additions & 1565 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,3 +129,4 @@ dist
129129
.yarn/install-state.gz
130130
.pnp.*
131131
/dashboard/apps/drplayer/
132+
/.playwright-mcp/

‎dashboard/src/assets/logo-mobile.png‎

1.71 MB
Loading

‎dashboard/src/assets/logo-pc.png‎

803 KB
Loading

dashboard/src/assets/logo.png renamed to dashboard/src/assets/logo1.png

File renamed without changes.

‎dashboard/src/components/ActionDocCard.vue‎

Lines changed: 57 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -426,7 +426,8 @@ const multiInputExample = ref(`{
426426
}
427427
428428
.card-container {
429-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
429+
background: var(--dp-bg-surface);
430+
border: 1px solid var(--dp-border-subtle);
430431
border-radius: 12px;
431432
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
432433
transition: all 0.3s ease;
@@ -440,7 +441,7 @@ const multiInputExample = ref(`{
440441
.card-title {
441442
display: flex;
442443
align-items: center;
443-
color: white;
444+
color: var(--dp-text-primary);
444445
font-weight: 600;
445446
font-size: 16px;
446447
}
@@ -451,19 +452,19 @@ const multiInputExample = ref(`{
451452
}
452453
453454
.expand-btn {
454-
color: white !important;
455-
border: 1px solid rgba(255, 255, 255, 0.3) !important;
456-
background: rgba(255, 255, 255, 0.1) !important;
455+
color: var(--dp-primary-readable) !important;
456+
border: 1px solid color-mix(in srgb, var(--dp-primary-readable) 30%, transparent) !important;
457+
background: var(--dp-bg-hover) !important;
457458
transition: all 0.3s ease;
458459
}
459460
460461
.expand-btn:hover {
461-
background: rgba(255, 255, 255, 0.2) !important;
462-
border-color: rgba(255, 255, 255, 0.5) !important;
462+
background: color-mix(in srgb, var(--dp-primary-readable) 12%, transparent) !important;
463+
border-color: color-mix(in srgb, var(--dp-primary-readable) 45%, transparent) !important;
463464
}
464465
465466
.card-content {
466-
color: white;
467+
color: var(--dp-text-primary);
467468
}
468469
469470
.overview-section {
@@ -476,7 +477,7 @@ const multiInputExample = ref(`{
476477
.overview-item {
477478
text-align: center;
478479
padding: 15px;
479-
background: rgba(255, 255, 255, 0.1);
480+
background: var(--dp-bg-surface-muted);
480481
border-radius: 8px;
481482
backdrop-filter: blur(10px);
482483
}
@@ -502,6 +503,9 @@ const multiInputExample = ref(`{
502503
.nav-tag {
503504
cursor: pointer;
504505
transition: all 0.3s ease;
506+
color: var(--dp-text-primary) !important;
507+
background: var(--dp-bg-surface-muted) !important;
508+
border: 1px solid var(--dp-border) !important;
505509
}
506510
507511
.nav-tag:hover {
@@ -515,7 +519,7 @@ const multiInputExample = ref(`{
515519
.section {
516520
margin-bottom: 30px;
517521
padding: 20px;
518-
background: rgba(255, 255, 255, 0.05);
522+
background: var(--dp-bg-hover);
519523
border-radius: 8px;
520524
backdrop-filter: blur(10px);
521525
}
@@ -524,7 +528,7 @@ const multiInputExample = ref(`{
524528
display: flex;
525529
align-items: center;
526530
margin-bottom: 15px;
527-
color: white;
531+
color: var(--dp-text-primary);
528532
font-size: 18px;
529533
font-weight: 600;
530534
}
@@ -542,14 +546,14 @@ const multiInputExample = ref(`{
542546
543547
.concept-item {
544548
padding: 15px;
545-
background: rgba(255, 255, 255, 0.1);
549+
background: var(--dp-bg-surface-muted);
546550
border-radius: 6px;
547551
}
548552
549553
.concept-title {
550554
font-weight: 600;
551555
margin-bottom: 8px;
552-
color: #ffd700;
556+
color: var(--dp-primary-readable);
553557
}
554558
555559
.concept-desc {
@@ -565,8 +569,8 @@ const multiInputExample = ref(`{
565569
}
566570
567571
.action-type-card {
568-
background: rgba(255, 255, 255, 0.1) !important;
569-
border: 1px solid rgba(255, 255, 255, 0.2) !important;
572+
background: var(--dp-bg-surface) !important;
573+
border: 1px solid var(--dp-border-subtle) !important;
570574
}
571575
572576
.action-type-header {
@@ -578,21 +582,21 @@ const multiInputExample = ref(`{
578582
579583
.action-type-code {
580584
font-family: 'Courier New', monospace;
581-
background: rgba(0, 0, 0, 0.3);
585+
background: var(--dp-bg-surface);
582586
padding: 2px 6px;
583587
border-radius: 4px;
584588
font-size: 12px;
585-
color: #ffd700;
589+
color: var(--dp-primary-readable);
586590
}
587591
588592
.action-type-desc {
589-
color: white;
593+
color: var(--dp-text-primary);
590594
margin-bottom: 8px;
591595
font-size: 14px;
592596
}
593597
594598
.action-type-usage {
595-
color: rgba(255, 255, 255, 0.8);
599+
color: var(--dp-text-secondary);
596600
font-size: 12px;
597601
}
598602
@@ -604,9 +608,9 @@ const multiInputExample = ref(`{
604608
605609
.special-action-item {
606610
padding: 15px;
607-
background: rgba(255, 255, 255, 0.1);
611+
background: var(--dp-bg-surface-muted);
608612
border-radius: 6px;
609-
border-left: 4px solid #ffd700;
613+
border-left: 4px solid var(--dp-primary-readable);
610614
}
611615
612616
.special-action-header {
@@ -617,17 +621,17 @@ const multiInputExample = ref(`{
617621
}
618622
619623
.action-id {
620-
background: rgba(0, 0, 0, 0.3);
624+
background: var(--dp-bg-surface);
621625
padding: 4px 8px;
622626
border-radius: 4px;
623627
font-family: 'Courier New', monospace;
624-
color: #ffd700;
628+
color: var(--dp-primary-readable);
625629
font-size: 12px;
626630
}
627631
628632
.action-name {
629633
font-weight: 600;
630-
color: white;
634+
color: var(--dp-text-primary);
631635
}
632636
633637
.special-action-desc {
@@ -643,7 +647,7 @@ const multiInputExample = ref(`{
643647
644648
.param-tag {
645649
display: inline-block;
646-
background: rgba(255, 255, 255, 0.2);
650+
background: color-mix(in srgb, var(--dp-primary-readable) 12%, var(--dp-bg-surface));
647651
padding: 2px 6px;
648652
margin: 0 4px 4px 0;
649653
border-radius: 3px;
@@ -658,7 +662,7 @@ const multiInputExample = ref(`{
658662
659663
.param-item {
660664
padding: 12px;
661-
background: rgba(255, 255, 255, 0.1);
665+
background: var(--dp-bg-surface-muted);
662666
border-radius: 6px;
663667
}
664668
@@ -671,10 +675,10 @@ const multiInputExample = ref(`{
671675
672676
.param-name {
673677
font-family: 'Courier New', monospace;
674-
background: rgba(0, 0, 0, 0.3);
678+
background: var(--dp-bg-surface);
675679
padding: 2px 6px;
676680
border-radius: 4px;
677-
color: #ffd700;
681+
color: var(--dp-primary-readable);
678682
font-size: 12px;
679683
}
680684
@@ -684,46 +688,63 @@ const multiInputExample = ref(`{
684688
}
685689
686690
.example-tabs {
687-
background: rgba(255, 255, 255, 0.1);
691+
background: var(--dp-bg-surface-muted);
688692
border-radius: 6px;
689693
padding: 15px;
690694
}
691695
692696
.code-block {
693-
background: rgba(0, 0, 0, 0.3);
697+
background: var(--dp-bg-surface);
694698
padding: 15px;
695699
border-radius: 6px;
696-
color: #ffd700;
700+
color: var(--dp-primary-readable);
697701
font-family: 'Courier New', monospace;
698702
font-size: 12px;
699703
line-height: 1.5;
700704
overflow-x: auto;
701705
white-space: pre-wrap;
702706
}
703707
704-
/* 深色主题适配 */
708+
/* 主题适配 */
705709
:deep(.arco-card-header) {
706710
background: transparent !important;
707-
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
711+
border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent) !important;
708712
}
709713
710714
:deep(.arco-card-body) {
711715
background: transparent !important;
712716
}
713717
714718
:deep(.arco-tabs-nav) {
715-
background: rgba(255, 255, 255, 0.1) !important;
719+
background: color-mix(in srgb, var(--dp-bg-surface-muted) 92%, transparent) !important;
720+
border: 1px solid var(--dp-border-subtle);
721+
border-radius: 10px;
716722
}
717723
718724
:deep(.arco-tabs-tab) {
719-
color: rgba(255, 255, 255, 0.8) !important;
725+
color: var(--dp-text-secondary) !important;
726+
font-weight: 600;
720727
}
721728
722729
:deep(.arco-tabs-tab-active) {
723-
color: white !important;
730+
color: var(--dp-primary-readable) !important;
724731
}
725732
726733
:deep(.arco-tabs-content) {
727734
background: transparent !important;
728735
}
736+
737+
@media (prefers-color-scheme: dark) {
738+
:deep(.arco-tabs-nav) {
739+
background: rgba(255, 255, 255, 0.1) !important;
740+
}
741+
742+
:deep(.arco-tabs-tab) {
743+
color: rgba(255, 255, 255, 0.82) !important;
744+
}
745+
746+
:deep(.arco-tabs-tab-active) {
747+
color: #fff !important;
748+
}
749+
}
729750
</style>

‎dashboard/src/components/BackupRestoreDialog.vue‎

Lines changed: 99 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<a-modal
33
v-model:visible="visible"
44
title="数据备份还原"
5-
width="520px"
5+
width="min(520px, calc(100vw - 24px))"
66
:footer="false"
77
@cancel="handleCancel"
88
>
@@ -596,4 +596,102 @@ onMounted(() => {
596596
grid-template-columns: repeat(2, 1fr);
597597
}
598598
}
599+
600+
.backup-restore-container {
601+
min-width: 0;
602+
}
603+
604+
.stats-section,
605+
.operation-section {
606+
padding: 12px;
607+
border: 1px solid var(--dp-border-subtle);
608+
border-radius: var(--dp-radius-md);
609+
background: var(--dp-bg-surface-muted);
610+
}
611+
612+
.section-title {
613+
margin: 0 0 10px;
614+
color: var(--dp-text-primary);
615+
}
616+
617+
.stats-grid {
618+
gap: 6px;
619+
}
620+
621+
.stat-item {
622+
background: var(--dp-bg-surface);
623+
border-color: var(--dp-border-subtle);
624+
}
625+
626+
.data-size,
627+
.operation-content {
628+
background: var(--dp-bg-surface);
629+
border-color: var(--dp-border-subtle);
630+
}
631+
632+
.operation-section {
633+
margin-bottom: 12px;
634+
}
635+
636+
.operation-content {
637+
padding: 10px;
638+
}
639+
640+
.restore-actions {
641+
width: 100%;
642+
align-items: stretch;
643+
}
644+
645+
.restore-actions :deep(.arco-upload),
646+
.restore-actions :deep(.arco-upload-trigger) {
647+
width: 100%;
648+
}
649+
650+
.restore-actions :deep(.arco-btn) {
651+
justify-content: center;
652+
}
653+
654+
.custom-file-list {
655+
width: 100%;
656+
min-width: 0;
657+
}
658+
659+
.custom-upload-item {
660+
min-width: 0;
661+
background: var(--dp-bg-surface);
662+
border: 1px solid var(--dp-border-subtle);
663+
}
664+
665+
.file-info {
666+
min-width: 0;
667+
}
668+
669+
.file-name {
670+
overflow: hidden;
671+
text-overflow: ellipsis;
672+
white-space: nowrap;
673+
}
674+
675+
.warning-section :deep(.arco-alert) {
676+
border-radius: var(--dp-radius-md);
677+
}
678+
679+
@media (max-width: 560px) {
680+
.stats-section,
681+
.operation-section {
682+
padding: 10px;
683+
}
684+
685+
.stats-grid {
686+
grid-template-columns: repeat(2, minmax(0, 1fr));
687+
}
688+
689+
.section-title {
690+
font-size: 15px;
691+
}
692+
693+
.operation-desc {
694+
font-size: 12px;
695+
}
696+
}
599697
</style>

0 commit comments

Comments
 (0)