diff --git a/api/tcpConnection.js b/api/tcpConnection.js
index 6dcc539..ffe9d88 100644
--- a/api/tcpConnection.js
+++ b/api/tcpConnection.js
@@ -30,6 +30,26 @@ class TCPConnection {
      * @param {Function} callback - 连接状态回调函数
      */
     connect(config = {}, callback = null) {
+        // 如果已经连接，先断开现有连接
+        if (this.isConnected) {
+            console.log('检测到现有TCP连接，先断开...');
+            this.disconnect(config);
+            // 等待断开完成后再连接
+            setTimeout(() => {
+                this._performConnect(config, callback);
+            }, 300);
+        } else {
+            // 直接连接
+            this._performConnect(config, callback);
+        }
+    }
+
+    /**
+     * 执行TCP连接
+     * @param {Object} config - 连接配置
+     * @param {Function} callback - 连接状态回调函数
+     */
+    _performConnect(config = {}, callback = null) {
         const connectionConfig = {
             channel: config.channel || TCP_CONFIG.channel,
             ip: config.ip || TCP_CONFIG.ip,
@@ -41,6 +61,7 @@ class TCPConnection {
             connectionConfig.charsetname = config.charsetname || TCP_CONFIG.charsetname;
         }
 
+        console.log('开始建立TCP连接:', connectionConfig);
         TCPSocket.connect(
             connectionConfig,
             result => {
diff --git a/components/MarketOverview.vue b/components/MarketOverview.vue
index d04fa4a..627abae 100644
--- a/components/MarketOverview.vue
+++ b/components/MarketOverview.vue
@@ -18,20 +18,13 @@
         <view class="forex-market">
           <!-- 上部分：三个汇率容器 -->
           <view class="forex-rates">
-            <view class="forex-rate-item up">
-              <text class="forex-pair">美元/日元</text>
-              <text class="forex-value">151.13</text>
-              <text class="forex-change">+1.62%</text>
-            </view>
-            <view class="forex-rate-item down">
-              <text class="forex-pair">美元/韩元</text>
-              <text class="forex-value">1424.900</text>
-              <text class="forex-change">-2.92%</text>
-            </view>
-            <view class="forex-rate-item up">
-              <text class="forex-pair">美元/英镑</text>
-              <text class="forex-value">0.730</text>
-              <text class="forex-change">+2.92%</text>
+            <view class="forex-rate-item" 
+                  v-for="(stock, index) in stockInfoList" 
+                  :key="index"
+                  :class="stock.change_percent >= 0 ? 'up' : 'down'">
+              <text class="forex-pair">{{ stock.stock_name }}</text>
+              <text class="forex-value">{{ stock.current_price }}</text>
+              <text class="forex-change">{{ stock.change }}</text>
             </view>
           </view>
           
@@ -94,6 +87,35 @@
 <script>
 export default {
   name: 'MarketOverview',
+  props: {
+    // 接收来自父组件的3个股票数据
+    stockInfoList: {
+      type: Array,
+      default: () => ([
+        {
+          stock_name: '美元/日元',
+          current_price: '151.13',
+          change: '+1.62%',
+          change_value: 0,
+          change_percent: 0
+        },
+        {
+          stock_name: '美元/韩元',
+          current_price: '1424.900',
+          change: '-2.92%',
+          change_value: 0,
+          change_percent: 0
+        },
+        {
+          stock_name: '美元/英镑',
+          current_price: '0.730',
+          change: '+2.92%',
+          change_value: 0,
+          change_percent: 0
+        }
+      ])
+    }
+  },
   data() {
     return {
       selectedMarket: 'forex',
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 4124e11..a644625 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -17,7 +17,7 @@
 		<!-- 内容区域 - 使用滚动视图 -->
 		<scroll-view scroll-y class="content-container">
 			<!-- 1. 今日市场概览 -->
-			<market-overview></market-overview>
+			<market-overview :stock-info-list="currentStockInfoList"></market-overview>
 			
 			<!-- 间隔 -->
 			<view class="section-gap"></view>
@@ -122,7 +122,43 @@
 				</view>
 			</view>
 			
-			<!-- 5. 今日市场看点 -->
+			<!-- 5. TCP连接测试 -->
+			<!-- <view class="section tcp-test-section">
+				<view class="section-header">
+					<text class="section-title">TCP连接测试</text>
+					<view class="tcp-status" :class="{'connected': tcpConnected, 'disconnected': !tcpConnected}">
+						<text class="status-text">{{tcpConnected ? '已连接' : '未连接'}}</text>
+					</view>
+				</view> -->
+				
+				<!-- TCP控制按钮 -->
+				<!-- <view class="tcp-controls">
+					<button class="tcp-btn connect-btn" @click="connectTcp" :disabled="tcpConnected">连接</button>
+					<button class="tcp-btn disconnect-btn" @click="disconnectTcp" :disabled="!tcpConnected">断开</button>
+					<button class="tcp-btn send-btn" @click="sendTcpMessage" :disabled="!tcpConnected">发送测试消息</button>
+					<button class="tcp-btn status-btn" @click="getTcpStatus">查看状态</button>
+				</view> -->
+				
+				<!-- 消息记录 -->
+				<!-- <view class="tcp-messages" v-if="tcpMessages.length > 0">
+					<view class="messages-header">
+						<text class="messages-title">消息记录 ({{tcpMessages.length}})</text>
+						<button class="clear-btn" @click="clearTcpMessages">清空</button>
+					</view>
+					<scroll-view scroll-y class="messages-list" scroll-top="{{tcpMessages.length * 50}}">
+						<view class="message-item" v-for="(msg, index) in tcpMessages" :key="index" 
+							  :class="{'sent': msg.direction === 'sent', 'received': msg.direction === 'received'}">
+							<view class="message-info">
+								<text class="message-direction">{{msg.direction === 'sent' ? '发送' : '接收'}}</text>
+								<text class="message-time">{{msg.timestamp}}</text>
+							</view>
+							<text class="message-content">{{msg.content}}</text>
+						</view>
+					</scroll-view>
+				</view>
+			</view> -->
+			
+			<!-- 6. 今日市场看点 -->
 			<view class="section-header highlights-title-container">
 				<text class="section-title">今日市场核心看点</text>
 			</view>
@@ -143,6 +179,8 @@
 import footerBar from '../../components/footerBar.vue'
 import MarketOverview from '../../components/MarketOverview.vue'
 import DeepMate from '../../components/DeepMate.vue'
+import tcpConnection from '../../api/tcpConnection.js'
+import th from '../../static/language/th'
 
 export default {
 	components: {
@@ -178,7 +216,62 @@ export default {
 			],
 			
 			// 防抖定时器
-			debounceTimer: null
+			debounceTimer: null,
+			
+			// TCP连接相关状态
+			tcpConnected: false,
+			tcpMessages: [],
+			lastSentMessage: '',
+			
+			// TCP监听器引用，用于移除监听器
+			connectionListener: null,
+			messageListener: null,
+			
+			// TCP股票数据存储
+			tcpStockData: {
+				count: 0,
+				data: {},
+				stock_count: 0,
+				timestamp: '',
+				type: ''
+			},
+			
+			// TCP数据缓存机制，用于处理分片数据
+			tcpDataCache: {
+				isCollecting: false,  // 是否正在收集数据片段
+				expectedCount: 0,     // 期望的数据总数
+				collectedData: {},    // 已收集的数据对象（用于对象级拼接）
+				timestamp: '',        // 数据时间戳
+				type: '',            // 数据类型
+				// 新增：字符串片段缓存
+				firstPartData: '',   // 前半部分数据字符串
+				isWaitingSecondPart: false  // 是否正在等待后半部分数据
+			},
+			
+			// 当前显示的3个股票数据（用于MarketOverview组件）
+			currentStockInfoList: [
+				{
+					stock_name: '美元/日元',
+					current_price: '151.13',
+					change: '+1.62%',
+					change_value: 0,
+					change_percent: 0
+				},
+				{
+					stock_name: '美元/韩元',
+					current_price: '1424.900',
+					change: '-2.92%',
+					change_value: 0,
+					change_percent: 0
+				},
+				{
+					stock_name: '美元/英镑',
+					current_price: '0.730',
+					change: '+2.92%',
+					change_value: 0,
+					change_percent: 0
+				}
+			]
 		}
 	},
 
@@ -201,6 +294,34 @@ export default {
 				}
 			})
 		})
+		
+		// 初始化TCP连接监听器
+		this.initTcpListeners()
+		
+		// 页面渲染完成后自动连接TCP
+		this.$nextTick(() => {
+			console.log('页面渲染完成，开始自动连接TCP服务器...')
+			this.connectTcp()
+		})
+	},
+
+	// 页面销毁前的清理工作
+	onUnload() {
+		// 自动关闭TCP连接
+		if (this.tcpConnected) {
+			console.log('页面销毁，自动关闭TCP连接')
+			tcpConnection.disconnect()
+			this.tcpConnected = false
+		}
+		
+		// 清理防抖定时器
+		if (this.debounceTimer) {
+			clearTimeout(this.debounceTimer)
+			this.debounceTimer = null
+		}
+		
+		// 移除TCP监听器，防止内存泄漏
+		this.removeTcpListeners()
 	},
 	
 	methods: {
@@ -223,6 +344,433 @@ export default {
 				fn()
 				this.debounceTimer = null
 			}, delay)
+		},
+		
+		// TCP连接相关方法
+		
+		// 初始化TCP监听器
+		initTcpListeners() {
+			// 创建连接状态监听器并保存引用
+			this.connectionListener = (status, result) => {
+				this.tcpConnected = (status === 'connected')
+				console.log('TCP连接状态变化:', status, this.tcpConnected)
+				
+				// 显示连接状态提示
+				uni.showToast({
+					title: status === 'connected' ? '连接服务器成功' : '服务器连接断开',
+					icon: status === 'connected' ? 'success' : 'none',
+					duration: 1000
+				})
+				
+				// 连接成功后自动发送股票数据请求命令
+				if (status === 'connected') {
+					console.log('TCP连接成功，自动发送股票数据请求...')
+					// 延迟一小段时间确保连接稳定后再发送命令
+					setTimeout(() => {
+						this.sendTcpMessage()
+					}, 500)
+				}
+			}
+			
+			// 创建消息监听器并保存引用
+			this.messageListener = (type, message, parsedArray) => {
+				const messageObj = {
+					type: type,
+					content: message,
+					parsedArray: parsedArray,
+					timestamp: new Date().toLocaleTimeString(),
+					direction: 'received'
+				}
+				console.log("0000")
+				this.tcpMessages.push(messageObj)
+				// console.log('收到TCP消息:', messageObj)
+				console.log('home开始调用parseStockData',messageObj)
+				
+				// 解析股票数据
+				this.parseStockData(message)
+			}
+			
+			// 注册监听器
+			tcpConnection.onConnectionChange(this.connectionListener)
+			tcpConnection.onMessage(this.messageListener)
+		},
+		
+		// 连接TCP服务器
+		connectTcp() {
+			console.log('开始连接TCP服务器...')
+			
+			// 先断开现有连接（如果存在）
+			if (this.tcpConnected) {
+				console.log('检测到现有连接，先断开...')
+				this.disconnectTcp()
+				// 等待断开完成后再连接
+				setTimeout(() => {
+					this.performTcpConnect()
+				}, 500)
+			} else {
+				// 直接连接
+				this.performTcpConnect()
+			}
+		},
+		
+		// 执行TCP连接
+		performTcpConnect() {
+			console.log('执行TCP连接...')
+			tcpConnection.connect(
+				{
+					ip: '192.168.1.9',
+					port: '8080',
+					channel: '1', // 可选 1~20
+					charsetname: 'UTF-8' // 默认UTF-8，可选GBK
+				}
+			)
+		},
+		
+		// 断开TCP连接
+		disconnectTcp() {
+			console.log('断开TCP连接...')
+			tcpConnection.disconnect(
+				{
+					ip: '192.168.1.9',
+					port: '8080',
+					channel: '1', // 可选 1~20
+					charsetname: 'UTF-8' // 默认UTF-8，可选GBK
+				}
+			)
+			this.tcpConnected = false
+		},
+		
+		// 发送TCP消息
+		sendTcpMessage() {
+			// 构造要发送的消息对象
+			const messageData = 
+			// {
+			// 	command: "real_time",
+			// 	stock_code: "SH.000001"
+			// }
+			// {"command": "stock_list"}
+			// {"command": "batch_real_time", "stock_codes": ["SH.000001"]}
+			 {"command": "batch_real_time", "stock_codes": ["SH.000001","SH.000002","SH.000003"]}
+			
+			// 发送消息
+			const success = tcpConnection.send(messageData)
+			if (success) {
+				console.log('home发送TCP消息:', messageData)
+				uni.showToast({
+					title: '服务器连接成功',
+					icon: 'success',
+					duration: 1500
+				})
+			}
+		},
+		
+		
+		// 清空消息记录
+		clearTcpMessages() {    
+			this.tcpMessages = []
+			uni.showToast({
+				title: '消息记录已清空',
+				icon: 'success',
+				duration: 1500
+			})
+		},
+		
+		// 获取TCP连接状态
+		getTcpStatus() {
+			const status = tcpConnection.getConnectionStatus()
+			uni.showModal({
+				title: 'TCP连接状态',
+				content: `当前状态: ${status ? '已连接' : '未连接'}\n消息数量: ${this.tcpMessages.length}`,
+				showCancel: false
+			})
+		},
+		
+		// 验证数据完整性（检查count值与data对象个数是否相等）
+		validateDataIntegrity(parsedMessage) {
+			if (!parsedMessage.count || !parsedMessage.data) {
+				return false
+			}
+			
+			const dataObjectCount = Object.keys(parsedMessage.data).length
+			const expectedCount = parsedMessage.count
+			
+			console.log(`数据完整性验证: 期望${expectedCount}个对象，实际${dataObjectCount}个对象`)
+			return dataObjectCount === expectedCount
+		},
+		
+		// 检查数据状态（完整数据、前半部分数据、后半部分数据）
+		getDataStatus(message) {
+			if (typeof message !== 'string') {
+				return 'invalid'
+			}
+			
+			const trimmedMessage = message.trim()
+			const startsWithBrace = trimmedMessage.startsWith('{')
+			const endsWithBrace = trimmedMessage.endsWith('}')
+			
+			if (startsWithBrace && endsWithBrace) {
+				// 以{开头，以}结尾 - 完整数据
+				console.log('检测到完整数据格式')
+				return 'complete'
+			} else if (startsWithBrace && !endsWithBrace) {
+				// 以{开头，不以}结尾 - 前半部分数据
+				console.log('检测到前半部分数据')
+				return 'first_part'
+			} else if (!startsWithBrace && endsWithBrace) {
+				// 不以{开头，以}结尾 - 后半部分数据
+				console.log('检测到后半部分数据')
+				return 'second_part'
+			} else {
+				// 其他情况 - 无效数据
+				console.log('检测到无效数据格式')
+				return 'invalid'
+				
+			}
+		},
+		
+		// 缓存前半部分数据
+		cacheFirstPartData(message) {
+			this.tcpDataCache.firstPartData = message.trim()
+			this.tcpDataCache.isWaitingSecondPart = true
+			console.log('已缓存前半部分数据，长度:', this.tcpDataCache.firstPartData.length)
+		},
+		
+		// 拼接前后两部分数据
+		concatenateDataParts(secondPartMessage) {
+			const completeMessage = this.tcpDataCache.firstPartData + secondPartMessage.trim()
+			console.log('数据拼接完成，完整数据长度:', completeMessage.length)
+			
+			// 清空缓存
+			this.clearStringFragmentCache()
+			
+			return completeMessage
+		},
+		
+		// 清空字符串片段缓存
+		clearStringFragmentCache() {
+			this.tcpDataCache.firstPartData = ''
+			this.tcpDataCache.isWaitingSecondPart = false
+			console.log('字符串片段缓存已清空')
+		},
+		
+		// 合并数据到缓存中
+		mergeDataToCache(parsedMessage) {
+			// 如果是第一次收集数据，初始化缓存
+			if (!this.tcpDataCache.isCollecting) {
+				this.tcpDataCache.isCollecting = true
+				this.tcpDataCache.expectedCount = parsedMessage.count
+				this.tcpDataCache.collectedData = {}
+				this.tcpDataCache.timestamp = parsedMessage.timestamp
+				this.tcpDataCache.type = parsedMessage.type
+				console.log('开始收集数据片段，期望总数:', parsedMessage.count)
+			}
+			
+			// 合并新数据到缓存中
+			if (parsedMessage.data) {
+				Object.assign(this.tcpDataCache.collectedData, parsedMessage.data)
+				console.log('数据片段已合并，当前已收集:', Object.keys(this.tcpDataCache.collectedData).length, '个对象')
+			}
+		},
+		
+		// 检查缓存数据是否完整
+		isCacheDataComplete() {
+			const collectedCount = Object.keys(this.tcpDataCache.collectedData).length
+			const expectedCount = this.tcpDataCache.expectedCount
+			
+			console.log(`缓存数据检查: 已收集${collectedCount}个，期望${expectedCount}个`)
+			return collectedCount === expectedCount && collectedCount > 0
+		},
+		
+		// 获取完整的缓存数据并清空缓存
+		getCompleteDataFromCache() {
+			const completeData = {
+				count: this.tcpDataCache.expectedCount,
+				data: { ...this.tcpDataCache.collectedData },
+				stock_count: this.tcpDataCache.expectedCount,
+				timestamp: this.tcpDataCache.timestamp,
+				type: this.tcpDataCache.type
+			}
+			
+			// 清空缓存
+			this.tcpDataCache.isCollecting = false
+			this.tcpDataCache.expectedCount = 0
+			this.tcpDataCache.collectedData = {}
+			this.tcpDataCache.timestamp = ''
+			this.tcpDataCache.type = ''
+			
+			console.log('获取完整数据并清空缓存，数据对象数:', Object.keys(completeData.data).length)
+			return completeData
+		},
+		
+		// 解析TCP股票数据
+		parseStockData(message) {
+			try {
+				console.log('进入parseStockData, message类型:', typeof message, '长度:', message.length)
+				
+				// 第一步：检查数据状态（完整、前半部分、后半部分）
+				const dataStatus = this.getDataStatus(message)
+				
+				let completeMessage = ''
+				
+				switch (dataStatus) {
+					case 'complete':
+						// 完整数据，直接处理
+						console.log('检测到完整数据，直接处理')
+						completeMessage = message
+						break
+						
+					case 'first_part':
+						// 前半部分数据，缓存并等待后半部分
+						console.log('检测到前半部分数据，开始缓存')
+						this.cacheFirstPartData(message)
+						return // 等待后半部分数据
+						
+					case 'second_part':
+						// 后半部分数据，检查是否有缓存的前半部分
+						if (this.tcpDataCache.isWaitingSecondPart) {
+							console.log('检测到后半部分数据，开始拼接')
+							completeMessage = this.concatenateDataParts(message)
+						} else {
+							console.log('收到后半部分数据，但没有缓存的前半部分，跳过处理')
+							return
+						}
+						break
+						
+					case 'invalid':
+					default:
+						console.log('数据格式无效，跳过处理')
+						return
+				}
+				
+				// 第二步：解析完整的JSON数据
+				let parsedMessage
+				try {
+					console.log('开始解析完整JSON数据，长度:', completeMessage.length)
+					parsedMessage = JSON.parse(completeMessage)
+					console.log('JSON解析成功，解析后类型:', typeof parsedMessage, parsedMessage)
+				} catch (parseError) {
+					console.error('JSON解析失败:', parseError.message)
+					// 清空字符串片段缓存
+					this.clearStringFragmentCache()
+					return
+				}
+				
+				// 第三步：检查是否是股票数据类型
+				if (!((parsedMessage.type === 'batch_data_chunk' || parsedMessage.type === 'batch_realtime_data') && parsedMessage.data)) {
+					console.log('不是batch_data_chunk或batch_realtime_data类型的消息，跳过处理')
+					return
+				}
+				
+				console.log('开始处理股票数据')
+				
+				// 第四步：验证数据完整性（对象级别的完整性检查）
+				// 注意：batch_data_chunk类型的数据不需要验证完整性，直接处理
+				if (parsedMessage.type === 'batch_data_chunk') {
+					console.log('batch_data_chunk类型数据，跳过完整性验证，直接处理')
+					this.processCompleteStockData(parsedMessage)
+				} else {
+					const isDataComplete = this.validateDataIntegrity(parsedMessage)
+					
+					if (isDataComplete) {
+						// 数据完整，直接处理
+						console.log('对象级数据完整，直接处理')
+						this.processCompleteStockData(parsedMessage)
+					} else {
+						// 数据不完整，需要拼接（对象级别的拼接）
+						console.log('对象级数据不完整，开始拼接处理')
+						
+						// 将当前数据合并到缓存中
+						this.mergeDataToCache(parsedMessage)
+					
+						// 检查缓存中的数据是否已经完整
+						if (this.isCacheDataComplete()) {
+							console.log('缓存数据已完整，开始处理')
+							const completeData = this.getCompleteDataFromCache()
+							this.processCompleteStockData(completeData)
+						} else {
+							console.log('缓存数据仍不完整，等待更多数据片段')
+						}
+					}
+				}
+			} catch (error) {
+				console.error('解析TCP股票数据失败:', error.message)
+				console.error('错误详情:', error)
+				// 发生错误时清空所有缓存
+				this.clearStringFragmentCache()
+				if (this.tcpDataCache.isCollecting) {
+					console.log('发生错误，清空对象级数据缓存')
+					this.tcpDataCache.isCollecting = false
+					this.tcpDataCache.expectedCount = 0
+					this.tcpDataCache.collectedData = {}
+					this.tcpDataCache.timestamp = ''
+					this.tcpDataCache.type = ''
+				}
+			}
+		},
+		
+		// 处理完整的股票数据
+		processCompleteStockData(completeData) {
+			console.log("开始更新TCP股票数据存储")
+			
+			// 更新TCP股票数据存储
+			this.tcpStockData = {
+				count: completeData.count || 0,
+				data: completeData.data || {},
+				stock_count: completeData.stock_count || 0,
+				timestamp: completeData.timestamp || '',
+				type: completeData.type || ''
+			}
+			
+			// 获取所有股票的数据用于显示（最多3个）
+			const stockCodes = Object.keys(completeData.data)
+			const newStockInfoList = []
+			
+			// 处理最多3个股票数据
+			for (let i = 0; i < Math.min(stockCodes.length, 3); i++) {
+				const stockCode = stockCodes[i]
+				
+				// 检查数据结构
+				if (completeData.data[stockCode] && Array.isArray(completeData.data[stockCode]) && completeData.data[stockCode].length > 0) {
+					const stockData = completeData.data[stockCode][0] // 取第一条数据
+					
+					if (stockData && stockData.current_price !== undefined && stockData.pre_close !== undefined) {
+						// 计算涨跌幅
+						const changeValue = stockData.current_price - stockData.pre_close
+						const changePercent = ((changeValue / stockData.pre_close) * 100).toFixed(2)
+						const changeSign = changeValue >= 0 ? '+' : ''
+						
+						// 添加到股票信息列表
+						newStockInfoList.push({
+							stock_name: stockData.stock_name || '未知股票',
+							current_price: stockData.current_price ? stockData.current_price.toFixed(2) : '0.00',
+							change: `${changeSign}${changePercent}%`,
+							change_value: changeValue,
+							change_percent: parseFloat(changePercent)
+						})
+					}
+				}
+			}
+			
+			// 更新当前显示的股票信息列表
+			if (newStockInfoList.length > 0) {
+				this.currentStockInfoList = newStockInfoList
+				console.log('股票数据更新成功，共', newStockInfoList.length, '个股票:', this.currentStockInfoList)
+			}
+		},
+		
+		// 移除TCP监听器
+		removeTcpListeners() {
+			if (this.connectionListener) {
+				tcpConnection.removeConnectionListener(this.connectionListener)
+				this.connectionListener = null
+				console.log('已移除TCP连接状态监听器')
+			}
+			
+			if (this.messageListener) {
+				tcpConnection.removeMessageListener(this.messageListener)
+				this.messageListener = null
+				console.log('已移除TCP消息监听器')
+			}
 		}
 	}
 }
@@ -726,4 +1274,155 @@ export default {
 	bottom: 0;
 	width: 100%;
 }
+
+/* TCP测试区域样式 */
+.tcp-test-section {
+	border: 1px solid #e0e0e0;
+	background-color: #f9f9f9;
+}
+
+.tcp-status {
+	padding: 4px 12px;
+	border-radius: 12px;
+	font-size: 12px;
+}
+
+.tcp-status.connected {
+	background-color: #e8f5e8;
+	color: #4caf50;
+	border: 1px solid #4caf50;
+}
+
+.tcp-status.disconnected {
+	background-color: #ffeaea;
+	color: #f44336;
+	border: 1px solid #f44336;
+}
+
+.status-text {
+	font-size: 12px;
+	font-weight: bold;
+}
+
+.tcp-controls {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	margin-bottom: 15px;
+}
+
+.tcp-btn {
+	flex: 1;
+	min-width: 80px;
+	height: 36px;
+	border-radius: 6px;
+	font-size: 12px;
+	border: none;
+	color: white;
+	font-weight: bold;
+}
+
+.connect-btn {
+	background-color: #4caf50;
+}
+
+.connect-btn:disabled {
+	background-color: #cccccc;
+}
+
+.disconnect-btn {
+	background-color: #f44336;
+}
+
+.disconnect-btn:disabled {
+	background-color: #cccccc;
+}
+
+.send-btn {
+	background-color: #2196f3;
+}
+
+.send-btn:disabled {
+	background-color: #cccccc;
+}
+
+.status-btn {
+	background-color: #ff9800;
+}
+
+.tcp-messages {
+	margin-top: 15px;
+	border-top: 1px solid #e0e0e0;
+	padding-top: 15px;
+}
+
+.messages-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 10px;
+}
+
+.messages-title {
+	font-size: 14px;
+	font-weight: bold;
+	color: #333;
+}
+
+.clear-btn {
+	padding: 4px 8px;
+	background-color: #f44336;
+	color: white;
+	border: none;
+	border-radius: 4px;
+	font-size: 10px;
+}
+
+.messages-list {
+	max-height: 200px;
+	border: 1px solid #e0e0e0;
+	border-radius: 6px;
+	padding: 8px;
+	background-color: white;
+}
+
+.message-item {
+	margin-bottom: 8px;
+	padding: 8px;
+	border-radius: 6px;
+	border-left: 3px solid #ccc;
+}
+
+.message-item.sent {
+	background-color: #e3f2fd;
+	border-left-color: #2196f3;
+}
+
+.message-item.received {
+	background-color: #f1f8e9;
+	border-left-color: #4caf50;
+}
+
+.message-info {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 4px;
+}
+
+.message-direction {
+	font-size: 10px;
+	font-weight: bold;
+	color: #666;
+}
+
+.message-time {
+	font-size: 10px;
+	color: #999;
+}
+
+.message-content {
+	font-size: 12px;
+	color: #333;
+	word-break: break-all;
+}
 </style>
\ No newline at end of file