feat(ChatScreen): 优化聊天界面 UI 和交互体验

Made-with: Cursor

src/screens/message/components/ChatScreen/EmojiPanel.tsx

@@ -18,7 +18,7 @@ import { useAppColors, spacing } from '../../../../theme';
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window');
 
-  // 表情尺寸配置 - 固定宽度 40px，使用 flex 布局
+// 表情尺寸配置 - 固定宽度 40px，使用 flex 布局
 const EMOJI_SIZES = {
   mobile: { size: 24, itemWidth: 40, itemHeight: 40 },
   tablet: { size: 26, itemWidth: 40, itemHeight: 40 },
@@ -234,19 +234,21 @@ export const EmojiPanel: React.FC<EmojiPanelProps> = ({
     );
   };
 
-  // 渲染管理按钮（表情面板第一位）
+  // 渲染管理按钮（表情面板第一位）- 现代扁平化设计
   const renderManageButton = () => (
     <TouchableOpacity
       key="manage-button"
-      style={[styles.stickerItem, styles.stickerManageButton]}
+      style={[styles.stickerItem, stickerButtonStyles.manageButton]}
       onPress={handleOpenManage}
       activeOpacity={0.7}
     >
-      <MaterialCommunityIcons
-        name="cog-outline"
-        size={40}
-        color="#666"
-      />
+      <View style={stickerButtonStyles.iconContainer}>
+        <MaterialCommunityIcons
+          name="cog-outline"
+          size={28}
+          color={colors.chat.textSecondary}
+        />
+      </View>
     </TouchableOpacity>
   );
 
@@ -515,27 +517,30 @@ export const EmojiPanel: React.FC<EmojiPanelProps> = ({
         {activeTab === 'emoji' ? renderEmojiPanel() : renderStickerPanel()}
       </View>
 
-      {/* 底部 Tab 栏 */}
+      {/* 底部 Tab 栏 - 现代胶囊式设计 */}
       <View style={styles.panelTabBar}>
-        <TouchableOpacity
-          style={[styles.panelTab, activeTab === 'emoji' && styles.panelTabActive]}
-          onPress={() => setActiveTab('emoji')}
-        >
-          <Text style={styles.panelTabEmoji}>😊</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={[styles.panelTab, activeTab === 'sticker' && styles.panelTabActive]}
-          onPress={() => setActiveTab('sticker')}
-        >
-          <MaterialCommunityIcons
-            name="emoticon-happy-outline"
-            size={24}
-            color={activeTab === 'sticker' ? colors.primary.main : '#666'}
-          />
-        </TouchableOpacity>
-        <View style={styles.panelTabDivider} />
-        <TouchableOpacity style={styles.panelCloseButton} onPress={onClose}>
-          <MaterialCommunityIcons name="keyboard" size={24} color="#666" />
+        <View style={styles.panelTabContainer}>
+          <TouchableOpacity
+            style={[styles.panelTab, activeTab === 'emoji' && styles.panelTabActive]}
+            onPress={() => setActiveTab('emoji')}
+            activeOpacity={0.8}
+          >
+            <Text style={[styles.panelTabEmoji, activeTab === 'emoji' ? { opacity: 1 } : {}]}>😊</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.panelTab, activeTab === 'sticker' && styles.panelTabActive]}
+            onPress={() => setActiveTab('sticker')}
+            activeOpacity={0.8}
+          >
+            <MaterialCommunityIcons
+              name="emoticon-happy-outline"
+              size={22}
+              color={activeTab === 'sticker' ? colors.primary.main : colors.chat.textSecondary}
+            />
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity style={styles.panelCloseButton} onPress={onClose} activeOpacity={0.7}>
+          <MaterialCommunityIcons name="keyboard-outline" size={20} color={colors.chat.textSecondary} />
         </TouchableOpacity>
       </View>
 
@@ -546,3 +551,26 @@ export const EmojiPanel: React.FC<EmojiPanelProps> = ({
 };
 
 export default EmojiPanel;
+
+// 自定义表情按钮样式
+const stickerButtonStyles = StyleSheet.create({
+  manageButton: {
+    backgroundColor: '#F5F5F7',
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconContainer: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.06,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+});