@@ -472,145 +472,117 @@ onUnmounted(() => {
472
472
473
473
<style scoped>
474
474
.input-panel {
475
+ width : 100% ;
476
+ position : relative ;
477
+ }
478
+
479
+ .input-container {
475
480
display : flex ;
476
- flex-direction : column ;
481
+ align-items : flex-end ;
477
482
position : relative ;
478
- background-color : var (--bg-primary );
479
- border-radius : var (--radius-lg );
480
- padding : 4px ;
483
+ padding : 0 8px ;
481
484
}
482
485
483
- .toolbar {
486
+ .tools-container {
484
487
display : flex ;
485
- align-items : center ;
486
- gap : 4px ;
487
- margin-bottom : 4px ;
488
- padding : 0 4px ;
488
+ gap : 8px ;
489
+ margin-right : 8px ;
489
490
}
490
491
491
492
.tool-button {
492
493
width : 32px ;
493
494
height : 32px ;
495
+ border-radius : 50% ;
494
496
display : flex ;
495
497
align-items : center ;
496
498
justify-content : center ;
497
- border-radius : var (--radius-full );
498
499
background-color : transparent ;
500
+ color : var (--ios-text-tertiary );
499
501
border : none ;
500
- color : var (--text-secondary );
501
502
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 ;
506
505
}
507
506
508
507
.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 );
512
510
}
513
511
514
512
.tool-button :active {
515
513
transform : scale (0.95 );
516
514
}
517
515
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
-
538
516
.tool-button .icon {
539
517
width : 20px ;
540
518
height : 20px ;
541
- position : relative ;
542
- z-index : 1 ;
543
- transition : transform 0.2s var (--easing-standard );
544
519
}
545
520
546
- .tool-button :hover .icon {
547
- transform : scale (1.1 );
548
- }
549
-
550
- .input-container {
521
+ .input-wrapper {
522
+ flex : 1 ;
551
523
position : relative ;
552
- display : flex ;
524
+ min-width : 0 ;
553
525
}
554
526
555
527
.input-area {
556
- flex : 1 ;
528
+ width : 100 % ;
557
529
min-height : 40px ;
558
530
max-height : 120px ;
559
- padding : 10px 12px ;
560
- padding-right : 40 px ;
561
- border-radius : var (--radius-lg );
562
- background-color : var ( --bg-tertiary ) ;
563
- border : 1 px solid transparent ;
531
+ padding : 10px 40 px 10 px 12px ;
532
+ border-radius : 20 px ;
533
+ background-color : var (--ios-bg-tertiary );
534
+ border : none ;
535
+ outline : none ;
564
536
resize : none ;
565
- font-family : inherit ;
566
537
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 ;
571
557
}
572
558
573
559
.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 );
578
561
}
579
562
580
563
.input-area ::placeholder {
581
- color : var (--text-tertiary );
564
+ color : var (--ios-text-tertiary );
565
+ opacity : 0.7 ;
582
566
}
583
567
584
568
.send-button {
585
569
position : absolute ;
586
- right : 6 px ;
587
- bottom : 6 px ;
570
+ right : 8 px ;
571
+ bottom : 8 px ;
588
572
width : 28px ;
589
573
height : 28px ;
574
+ border-radius : 50% ;
590
575
display : flex ;
591
576
align-items : center ;
592
577
justify-content : center ;
593
- border-radius : var (--radius-full );
594
- background-color : var (--primary-color );
578
+ background-color : var (--ios-accent-color );
595
579
color : white ;
596
580
border : none ;
597
581
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 );
610
583
}
611
584
612
585
.send-button :hover {
613
- background-color : var (--primary-dark );
614
586
transform : scale (1.05 );
615
587
}
616
588
@@ -621,89 +593,68 @@ onUnmounted(() => {
621
593
.send-button .icon {
622
594
width : 16px ;
623
595
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 );
638
596
}
639
597
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 ;
646
601
}
647
602
648
603
.emoji-picker {
649
604
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 );
662
615
}
663
616
664
617
.emoji-grid {
665
618
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 ;
670
621
}
671
622
672
623
.emoji-item {
673
- width : 32 px ;
674
- height : 32 px ;
624
+ width : 36 px ;
625
+ height : 36 px ;
675
626
display : flex ;
676
627
align-items : center ;
677
628
justify-content : center ;
678
- font-size : 20 px ;
629
+ font-size : 22 px ;
679
630
cursor : pointer ;
680
- border-radius : var ( --radius-md ) ;
681
- transition : all 0.2s var ( --easing-standard );
631
+ border-radius : 8 px ;
632
+ transition : all 0.2s cubic-bezier ( 0.25 , 0.1 , 0.25 , 1 );
682
633
}
683
634
684
635
.emoji-item :hover {
685
- background-color : var (--hover-color );
636
+ background-color : var (--ios-bg-tertiary );
686
637
transform : scale (1.1 );
687
638
}
688
639
689
640
.emoji-item :active {
690
641
transform : scale (0.95 );
691
642
}
692
643
693
- /* 更多面板 */
694
644
.more-panel {
695
645
position : absolute ;
696
- bottom : 40 px ;
646
+ bottom : 100 % ;
697
647
left : 0 ;
698
648
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 );
705
656
padding : 12px ;
706
- animation : slideUp 0.3s var ( --easing-decelerate );
657
+ animation : slideUp 0.3s cubic-bezier ( 0.25 , 0.1 , 0.25 , 1 );
707
658
}
708
659
709
660
.more-grid {
@@ -717,13 +668,13 @@ onUnmounted(() => {
717
668
flex-direction : column ;
718
669
align-items : center ;
719
670
padding : 12px 8px ;
720
- border-radius : var ( --radius-lg ) ;
671
+ border-radius : 12 px ;
721
672
cursor : pointer ;
722
- transition : all 0.2s var ( --easing-standard );
673
+ transition : all 0.2s cubic-bezier ( 0.25 , 0.1 , 0.25 , 1 );
723
674
}
724
675
725
676
.more-item :hover {
726
- background-color : var (--hover-color );
677
+ background-color : var (--ios-bg-tertiary );
727
678
transform : translateY (-2px );
728
679
}
729
680
@@ -737,11 +688,11 @@ onUnmounted(() => {
737
688
display : flex ;
738
689
align-items : center ;
739
690
justify-content : center ;
740
- border-radius : var ( --radius-full ) ;
691
+ border-radius : 50 % ;
741
692
margin-bottom : 8px ;
742
693
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 );
745
696
}
746
697
747
698
.more-item :hover .more-item-icon {
@@ -750,10 +701,15 @@ onUnmounted(() => {
750
701
751
702
.more-item-text {
752
703
font-size : 12px ;
753
- color : var (--text-secondary );
704
+ color : var (--ios- text-secondary );
754
705
text-align : center ;
755
706
}
756
707
708
+ @keyframes slideUp {
709
+ from { transform : translateY (10px ); opacity : 0 ; }
710
+ to { transform : translateY (0 ); opacity : 1 ; }
711
+ }
712
+
757
713
@media screen and (max-width : 768px ) {
758
714
.input-area {
759
715
min-height : 36px ;
0 commit comments