Skip to content

Commit aabf46c

Browse files
committed
新版本UI-V3
1 parent 082a1e1 commit aabf46c

File tree

6 files changed

+394
-397
lines changed

6 files changed

+394
-397
lines changed

src/components/chat/InputPanel.vue

Lines changed: 94 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -472,145 +472,117 @@ onUnmounted(() => {
472472

473473
<style scoped>
474474
.input-panel {
475+
width: 100%;
476+
position: relative;
477+
}
478+
479+
.input-container {
475480
display: flex;
476-
flex-direction: column;
481+
align-items: flex-end;
477482
position: relative;
478-
background-color: var(--bg-primary);
479-
border-radius: var(--radius-lg);
480-
padding: 4px;
483+
padding: 0 8px;
481484
}
482485
483-
.toolbar {
486+
.tools-container {
484487
display: flex;
485-
align-items: center;
486-
gap: 4px;
487-
margin-bottom: 4px;
488-
padding: 0 4px;
488+
gap: 8px;
489+
margin-right: 8px;
489490
}
490491
491492
.tool-button {
492493
width: 32px;
493494
height: 32px;
495+
border-radius: 50%;
494496
display: flex;
495497
align-items: center;
496498
justify-content: center;
497-
border-radius: var(--radius-full);
498499
background-color: transparent;
500+
color: var(--ios-text-tertiary);
499501
border: none;
500-
color: var(--text-secondary);
501502
cursor: pointer;
502-
transition: all 0.2s var(--easing-standard);
503-
padding: 0;
504-
position: relative;
505-
overflow: hidden;
503+
transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
504+
flex-shrink: 0;
506505
}
507506
508507
.tool-button:hover {
509-
background-color: var(--hover-color);
510-
color: var(--text-primary);
511-
transform: translateZ(0);
508+
background-color: var(--ios-bg-tertiary);
509+
color: var(--ios-text-secondary);
512510
}
513511
514512
.tool-button:active {
515513
transform: scale(0.95);
516514
}
517515
518-
.tool-button::before {
519-
content: '';
520-
position: absolute;
521-
top: 50%;
522-
left: 50%;
523-
width: 0;
524-
height: 0;
525-
background-color: var(--hover-color);
526-
border-radius: 50%;
527-
transform: translate(-50%, -50%);
528-
opacity: 0;
529-
transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
530-
}
531-
532-
.tool-button:hover::before {
533-
width: 120%;
534-
height: 120%;
535-
opacity: 0.15;
536-
}
537-
538516
.tool-button .icon {
539517
width: 20px;
540518
height: 20px;
541-
position: relative;
542-
z-index: 1;
543-
transition: transform 0.2s var(--easing-standard);
544519
}
545520
546-
.tool-button:hover .icon {
547-
transform: scale(1.1);
548-
}
549-
550-
.input-container {
521+
.input-wrapper {
522+
flex: 1;
551523
position: relative;
552-
display: flex;
524+
min-width: 0;
553525
}
554526
555527
.input-area {
556-
flex: 1;
528+
width: 100%;
557529
min-height: 40px;
558530
max-height: 120px;
559-
padding: 10px 12px;
560-
padding-right: 40px;
561-
border-radius: var(--radius-lg);
562-
background-color: var(--bg-tertiary);
563-
border: 1px solid transparent;
531+
padding: 10px 40px 10px 12px;
532+
border-radius: 20px;
533+
background-color: var(--ios-bg-tertiary);
534+
border: none;
535+
outline: none;
564536
resize: none;
565-
font-family: inherit;
566537
font-size: 14px;
567-
line-height: 1.5;
568-
color: var(--text-primary);
569-
transition: all 0.2s var(--easing-standard);
570-
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset;
538+
line-height: 1.4;
539+
color: var(--ios-text-primary);
540+
transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
541+
overflow-y: auto;
542+
scrollbar-width: thin;
543+
scrollbar-color: var(--ios-text-quaternary) transparent;
544+
}
545+
546+
.input-area::-webkit-scrollbar {
547+
width: 4px;
548+
}
549+
550+
.input-area::-webkit-scrollbar-track {
551+
background: transparent;
552+
}
553+
554+
.input-area::-webkit-scrollbar-thumb {
555+
background-color: var(--ios-text-quaternary);
556+
border-radius: 2px;
571557
}
572558
573559
.input-area:focus {
574-
background-color: var(--bg-quaternary);
575-
border-color: var(--primary-color);
576-
outline: none;
577-
box-shadow: 0 0 0 1px rgba(0, 113, 227, 0.2), 0 1px 3px rgba(0, 0, 0, 0.05) inset;
560+
background-color: var(--ios-bg-tertiary);
578561
}
579562
580563
.input-area::placeholder {
581-
color: var(--text-tertiary);
564+
color: var(--ios-text-tertiary);
565+
opacity: 0.7;
582566
}
583567
584568
.send-button {
585569
position: absolute;
586-
right: 6px;
587-
bottom: 6px;
570+
right: 8px;
571+
bottom: 8px;
588572
width: 28px;
589573
height: 28px;
574+
border-radius: 50%;
590575
display: flex;
591576
align-items: center;
592577
justify-content: center;
593-
border-radius: var(--radius-full);
594-
background-color: var(--primary-color);
578+
background-color: var(--ios-accent-color);
595579
color: white;
596580
border: none;
597581
cursor: pointer;
598-
padding: 0;
599-
transition: all 0.2s var(--easing-standard);
600-
transform-origin: center;
601-
opacity: 0;
602-
transform: scale(0.8);
603-
pointer-events: none;
604-
}
605-
606-
.send-button.active {
607-
opacity: 1;
608-
transform: scale(1);
609-
pointer-events: auto;
582+
transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
610583
}
611584
612585
.send-button:hover {
613-
background-color: var(--primary-dark);
614586
transform: scale(1.05);
615587
}
616588
@@ -621,89 +593,68 @@ onUnmounted(() => {
621593
.send-button .icon {
622594
width: 16px;
623595
height: 16px;
624-
transition: transform 0.2s var(--easing-standard);
625-
}
626-
627-
.send-button:hover .icon {
628-
transform: translateX(1px);
629-
}
630-
631-
.character-counter {
632-
position: absolute;
633-
right: 10px;
634-
bottom: -20px;
635-
font-size: 12px;
636-
color: var(--text-tertiary);
637-
transition: color 0.2s var(--easing-standard);
638596
}
639597
640-
.character-counter.warning {
641-
color: var(--warning-color);
642-
}
643-
644-
.character-counter.error {
645-
color: var(--error-color);
598+
.send-button.disabled {
599+
background-color: var(--ios-text-quaternary);
600+
cursor: not-allowed;
646601
}
647602
648603
.emoji-picker {
649604
position: absolute;
650-
bottom: 38px;
651-
right: 0;
652-
z-index: 10;
653-
background-color: var(--bg-glass-primary);
654-
backdrop-filter: blur(var(--blur-md));
655-
-webkit-backdrop-filter: blur(var(--blur-md));
656-
border-radius: var(--radius-lg);
657-
border: 1px solid var(--border-color);
658-
padding: 8px;
659-
box-shadow: var(--shadow-lg);
660-
animation: scaleIn 0.2s var(--easing-standard);
661-
transform-origin: bottom right;
605+
bottom: 100%;
606+
left: 0;
607+
margin-bottom: 8px;
608+
background-color: var(--ios-bg-primary);
609+
border-radius: 16px;
610+
border: 0.5px solid var(--ios-border-color);
611+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
612+
padding: 12px;
613+
z-index: 100;
614+
animation: slideUp 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
662615
}
663616
664617
.emoji-grid {
665618
display: grid;
666-
grid-template-columns: repeat(7, 1fr);
667-
gap: 5px;
668-
max-height: 200px;
669-
overflow-y: auto;
619+
grid-template-columns: repeat(8, 1fr);
620+
gap: 8px;
670621
}
671622
672623
.emoji-item {
673-
width: 32px;
674-
height: 32px;
624+
width: 36px;
625+
height: 36px;
675626
display: flex;
676627
align-items: center;
677628
justify-content: center;
678-
font-size: 20px;
629+
font-size: 22px;
679630
cursor: pointer;
680-
border-radius: var(--radius-md);
681-
transition: all 0.2s var(--easing-standard);
631+
border-radius: 8px;
632+
transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
682633
}
683634
684635
.emoji-item:hover {
685-
background-color: var(--hover-color);
636+
background-color: var(--ios-bg-tertiary);
686637
transform: scale(1.1);
687638
}
688639
689640
.emoji-item:active {
690641
transform: scale(0.95);
691642
}
692643
693-
/* 更多面板 */
694644
.more-panel {
695645
position: absolute;
696-
bottom: 40px;
646+
bottom: 100%;
697647
left: 0;
698648
right: 0;
699-
background-color: var(--bg-glass-primary);
700-
backdrop-filter: blur(var(--blur-md));
701-
-webkit-backdrop-filter: blur(var(--blur-md));
702-
border-radius: var(--radius-lg);
703-
border: 1px solid var(--border-color);
704-
box-shadow: var(--shadow-lg);
649+
margin-bottom: 8px;
650+
background-color: var(--ios-bg-primary);
651+
backdrop-filter: blur(10px);
652+
-webkit-backdrop-filter: blur(10px);
653+
border-radius: 16px;
654+
border: 0.5px solid var(--ios-border-color);
655+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
705656
padding: 12px;
706-
animation: slideUp 0.3s var(--easing-decelerate);
657+
animation: slideUp 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
707658
}
708659
709660
.more-grid {
@@ -717,13 +668,13 @@ onUnmounted(() => {
717668
flex-direction: column;
718669
align-items: center;
719670
padding: 12px 8px;
720-
border-radius: var(--radius-lg);
671+
border-radius: 12px;
721672
cursor: pointer;
722-
transition: all 0.2s var(--easing-standard);
673+
transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
723674
}
724675
725676
.more-item:hover {
726-
background-color: var(--hover-color);
677+
background-color: var(--ios-bg-tertiary);
727678
transform: translateY(-2px);
728679
}
729680
@@ -737,11 +688,11 @@ onUnmounted(() => {
737688
display: flex;
738689
align-items: center;
739690
justify-content: center;
740-
border-radius: var(--radius-full);
691+
border-radius: 50%;
741692
margin-bottom: 8px;
742693
color: white;
743-
background: linear-gradient(120deg, var(--primary-color), var(--primary-dark));
744-
transition: transform 0.2s var(--easing-standard);
694+
background: linear-gradient(120deg, var(--ios-accent-color), #34C759);
695+
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
745696
}
746697
747698
.more-item:hover .more-item-icon {
@@ -750,10 +701,15 @@ onUnmounted(() => {
750701
751702
.more-item-text {
752703
font-size: 12px;
753-
color: var(--text-secondary);
704+
color: var(--ios-text-secondary);
754705
text-align: center;
755706
}
756707
708+
@keyframes slideUp {
709+
from { transform: translateY(10px); opacity: 0; }
710+
to { transform: translateY(0); opacity: 1; }
711+
}
712+
757713
@media screen and (max-width: 768px) {
758714
.input-area {
759715
min-height: 36px;

0 commit comments

Comments
 (0)