refactor(ui): modernize components with flat design and UX refinements

- Redesign chat screen header with improved layout and panel styling
- Update emoji panel tab bar from emoji to icon-based navigation
- Simplify trade detail view with inline content attributes
- Add masonry layout support to market view grid
- Refactor privacy settings from card-based to list-based dropdown UI
- Improve comment item actions layout and styling
- Update trade creation flow with buy/sell specific text
- Adjust padding, gaps, and font sizes across multiple components
- Clean up unused code and imports

src/screens/trade/TradeDetailScreen.tsx

@@ -120,6 +120,11 @@ function createStyles(colors: AppColors) {
       fontWeight: '700',
       color: '#FF4D4F',
     },
+    priceSymbol: {
+      fontSize: fontSizes.md,
+      fontWeight: '700',
+      color: '#FF4D4F',
+    },
 
     titleRow: {
       flexDirection: 'row',
@@ -330,6 +335,17 @@ function createStyles(colors: AppColors) {
       color: colors.text.primary,
       fontWeight: '600',
     },
+    contentAttrs: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      alignItems: 'center',
+      gap: spacing.md,
+      flexWrap: 'wrap',
+    },
+    contentAttrText: {
+      fontSize: fontSizes.sm,
+      color: colors.text.secondary,
+    },
   });
 }
 
@@ -496,7 +512,7 @@ export function TradeDetailScreen({ tradeId }: TradeDetailScreenProps) {
                 </View>
                 {item.price != null ? (
                   <Text style={styles.priceInHeader}>
-                    价格：¥{item.price % 1 === 0 ? item.price.toFixed(0) : item.price.toFixed(2)}
+                    价格：<Text style={styles.priceSymbol}>¥</Text>{item.price % 1 === 0 ? item.price.toFixed(0) : item.price.toFixed(2)}
                   </Text>
                 ) : (
                   <Text style={styles.priceInHeader}>价格：面议</Text>
@@ -509,41 +525,12 @@ export function TradeDetailScreen({ tradeId }: TradeDetailScreenProps) {
           {/* 标题 */}
           <View style={styles.titleRow}>
             <Text style={styles.title} numberOfLines={2}>{item.title}</Text>
-            {item.condition && item.trade_type === 'sell' && (
-              <View style={{ flexShrink: 0, marginTop: 7, marginLeft: 'auto' }}>
-                <View style={styles.conditionBadge}>
-                  <Text style={styles.conditionBadgeText} numberOfLines={1}>
-                    {TRADE_CONDITION_MAP[item.condition as keyof typeof TRADE_CONDITION_MAP] || item.condition}
-                  </Text>
-                </View>
-              </View>
-            )}
-          </View>
-
-          {/* 商品属性 */}
-          <View style={styles.attrGrid}>
-            <View style={styles.attrItem}>
-              <Text style={styles.attrLabel}>品牌</Text>
-              <Text style={styles.attrValue}>{item.brand || '其他'}</Text>
-            </View>
-            <View style={styles.attrItem}>
-              <Text style={styles.attrLabel}>成色</Text>
-              <Text style={styles.attrValue}>
-                {TRADE_CONDITION_MAP[item.condition as keyof typeof TRADE_CONDITION_MAP] || item.condition || '未知'}
-              </Text>
-            </View>
-            <View style={styles.attrItem}>
-              <Text style={styles.attrLabel}>功能状态</Text>
-              <Text style={styles.attrValue}>{item.function_status || '正常使用'}</Text>
-            </View>
           </View>
 
           {/* 商品描述 */}
           {item.content && (
             <Text style={styles.contentText}>{item.content}</Text>
           )}
-
-          <View style={styles.divider} />
         </View>
 
         {/* 图片放在文字下方 */}
@@ -555,11 +542,23 @@ export function TradeDetailScreen({ tradeId }: TradeDetailScreenProps) {
                   source={{ uri: img.url || img.preview_url_large || img.preview_url || '' }}
                   style={styles.image}
                 />
-
               </View>
             ))}
           </View>
         )}
+
+        {/* 内容区右下角属性文字（仅出售商品显示） */}
+        {item.trade_type === 'sell' && (
+          <View style={{ paddingHorizontal: spacing.md, paddingBottom: spacing.md }}>
+            <View style={styles.contentAttrs}>
+              <Text style={styles.contentAttrText}>品牌：{item.brand || '其他'}</Text>
+              <Text style={styles.contentAttrText}>
+                成色：{TRADE_CONDITION_MAP[item.condition as keyof typeof TRADE_CONDITION_MAP] || item.condition || '未知'}
+              </Text>
+              <Text style={styles.contentAttrText}>功能状态：{item.function_status || '正常使用'}</Text>
+            </View>
+          </View>
+        )}
       </ScrollView>
 
       {/* 底部操作栏 */}