JoyD/AutoRobot/Windows/Robot/Web/src/views/HomePage.vue

<template>
  <div class="min-h-screen max-h-screen flex flex-col bg-gradient-to-br from-gray-50 via-gray-100 to-blue-50 overflow-hidden">
    <!-- 导航栏组件 -->
    <Header 
      :is-connected="isConnected" 
      :ws-url="wsUrl"
      @toggle-connection="toggleConnection"
    />

    <!-- 主内容区 -->
    <main class="flex-grow h-full container mx-auto px-4 sm:px-6 py-6">
      <!-- 移动端连接状态条 -->
      <div class="sm:hidden mb-4 p-3 rounded-xl bg-white/80 backdrop-blur-sm shadow-md border border-gray-100">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-2">
            <span :class="connectionIconClass" class="animate-pulse"></span>
            <span class="text-sm font-medium" :class="connectionTextClass">{{ connectionStatusText }}</span>
          </div>
          <div class="text-xs font-mono text-gray-500 truncate">
            {{ wsUrl }}
          </div>
        </div>
      </div>
      
      <!-- 主内容区两列布局 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 h-full w-full">
        <!-- 标签页面板 - 占据2/3宽度 -->
        <div class="lg:col-span-2 h-full">
          <div class="h-full bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg border border-gray-100">
            <TabPage :tabs="tabs">
              <template #tab-content="{ activeTab }">
                <div v-if="activeTab === 0" class="bg-transparent h-[calc(100vh-8rem-4rem-0.5rem)] flex flex-col">
                  <!-- 消息显示区域 - 8rem=导航栏+页边距, 4rem=页脚, 3.5rem=标签栏 -->
                  <MessageArea :messages="messages" class="flex-grow" />
                </div>
                <div v-else-if="activeTab === 1" class="p-4 bg-transparent h-full">
                  <div v-if="screenshots.length > 0" class="h-full">
                    <!-- 只显示最新的一张截图 -->
                    <img 
                      :src="getImageSource(screenshots[0].data)"
                      alt="手机截图"
                      class="w-full h-auto max-h-[calc(100vh-16rem)] object-contain rounded-lg shadow-md"
                      @error="handleImageError($event, screenshots[0].id)"
                    />
                  </div>
                  <div v-else class="h-full flex items-center justify-center text-gray-400">
                    <p>暂无截图数据</p>
                  </div>
                </div>
              </template>
            </TabPage>
          </div>
        </div>

        <!-- 控制面板 - 占据1/3宽度 -->
        <div class="h-full">
          <div class="h-full bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg border border-gray-100 overflow-y-auto">
            <div class="p-4 space-y-6">
              <!-- 发送消息卡片 -->
              <SendMessage 
                :is-connected="isConnected"
                @send-message="sendMessage"
              />

              <!-- 手机端地址卡片 -->
              <ConnectionInfo 
                :is-connected="isConnected"
                :ws-url="wsUrl"
              />

              <!-- 快捷操作卡片 -->
              <QuickActions 
                :is-connected="isConnected"
                @clear-messages="clearMessages"
                @show-help="showConnectionHelp"
                @take-phone-screenshot="takePhoneScreenshot"
              />
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚组件 -->
    <Footer class="mt-0" />

    <!-- WebSocket客户端组件（无UI界面）- 使用私有库组件 -->
    <component 
      :is="WebSocketClient"
      ref="wsClient"
      :url="wsUrl"
      :autoConnect="false"
      @connect="handleConnect"
      @disconnect="handleDisconnect"
      @message="handleMessage"
      @error="handleError"
      @status-change="handleStatusChange"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';

// 导入所有组件
import Header from '../components/Header.vue';
import MessageArea from '../components/MessageArea.vue';
import SendMessage from '../components/SendMessage.vue';
import ConnectionInfo from '../components/ConnectionInfo.vue';
import QuickActions from '../components/QuickActions.vue';
import Footer from '../components/Footer.vue';
import TabPage from '../components/TabPage.vue';
// 从私有库导入WebSocketClient组件
import { WebSocketClient } from 'joyd.web.vue.websocket-client';

// 全局调试模式开关
window.DEBUG = true;

// 状态管理
const messages = ref([
  {
    id: 1,
    sender: '系统',
    content: '欢迎使用WebSocket通信中心，请连接服务器开始交互',
    time: new Date().toLocaleTimeString(),
    isSystem: true
  }
]);
const wsUrl = ref('ws://localhost:8805');
const isConnected = ref(false);
// 存储截图数据
const screenshots = ref([]);

// 标签页配置
const tabs = ref([
  {
    label: '消息面板',
  },
  {
    label: '手机截图',
  }
]);

// 创建WebSocketClient组件的引用
const wsClient = ref(null);

// 计算属性
const connectionIconClass = computed(() => {
  return isConnected.value 
    ? 'rounded-full bg-green-500' 
    : 'rounded-full bg-red-500';
});

const connectionTextClass = computed(() => {
  return isConnected.value ? 'text-green-600' : 'text-red-600';
});

const connectionStatusText = computed(() => {
  return isConnected.value ? '已连接' : '未连接';
});

// 方法
const addMessage = (sender, content, isSystem = false) => {
  const now = new Date();
  const timeString = now.toLocaleTimeString();
  
  messages.value.push({
    id: Date.now(),
    sender,
    content,
    time: timeString,
    isSystem
  });
};

// WebSocket事件处理函数
const handleConnect = (url) => {
  addMessage('系统', '已成功连接到WebSocket服务器', true);
  isConnected.value = true;
};

const handleDisconnect = (code, reason) => {
  isConnected.value = false;
  let closeMessage = '连接已断开';
  if (code === 1006) {
    closeMessage = '连接异常断开';
  }
  addMessage('系统', closeMessage, true);
};

const handleMessage = (data) => {
  // 检查是否为二进制数据（截图）
  if (data instanceof Blob) {
    
    addMessage('系统', '收到手机截图', true);
    
    // 将二进制数据添加到列表中
    screenshots.value.unshift({
      id: Date.now(),
      data: data,
      timestamp: new Date().toLocaleString()
    });
  } else {
    // 处理文本消息
    addMessage('服务器', data);
  }
};

const handleError = (errorMessage) => {
  addMessage('系统', errorMessage, true);
};

const handleStatusChange = (connected) => {
  isConnected.value = connected;
};

// 切换连接状态
const toggleConnection = () => {
  if (wsClient.value) {
    wsClient.value.toggleConnection();
  }
};

// 发送消息
const sendMessage = (message) => {
  if (!message || !wsClient.value || !isConnected.value) {
    return;
  }
  
  try {
    // 显示发送中状态
    const sendingMessage = {
      id: Date.now(),
      sender: 'me',
      content: message + ' <span class="text-xs text-gray-400">发送中...</span>',
      time: new Date().toLocaleTimeString(),
      isSystem: false,
      sending: true
    };
    messages.value.push(sendingMessage);
    
    // 发送消息
    const success = wsClient.value.send(message);
    
    // 更新消息状态
    setTimeout(() => {
      const index = messages.value.findIndex(m => m.id === sendingMessage.id);
      if (index !== -1) {
        messages.value.splice(index, 1);
        addMessage('me', message);
      }
    }, 300);
  } catch (error) {
    addMessage('系统', '消息发送失败', true);
    
    // 移除发送中状态的消息
    const index = messages.value.findIndex(m => m.sending);
    if (index !== -1) {
      messages.value.splice(index, 1);
    }
  }
}

// 发送手机截屏命令
const takePhoneScreenshot = () => {
  if (!wsClient.value || !isConnected.value) {
    return;
  }
  
  try {
    // 显示命令发送状态
    addMessage('me', '发送手机截屏命令', true);
    
    // 生成唯一的消息ID
    const messageId = Date.now().toString();
    // 发送符合 messageId:content 格式的消息
    const screenshotCommand = messageId + ':screenshot';
    const success = wsClient.value.send(screenshotCommand);
    
    // 记录命令发送状态
    if (success) {
      addMessage('系统', '手机截屏命令已发送', true);
    } else {
      addMessage('系统', '手机截屏命令发送失败', true);
    }
  } catch (error) {
    addMessage('系统', '手机截屏命令发送失败', true);
  }
};

// 事件处理方法
const clearMessages = () => {
  if (confirm('确定要清空所有消息吗？')) {
    messages.value = [
      {
        id: Date.now(),
        sender: '系统',
        content: '消息已清空',
        time: new Date().toLocaleTimeString(),
        isSystem: true
      }
    ];
  }
};

// 获取图片源，处理二进制Blob数据
const getImageSource = (data) => {
  if (data instanceof Blob) {
    // 为二进制数据创建一个临时的URL
    return URL.createObjectURL(data);
  } else {
    // 向后兼容：如果数据是字符串，继续处理base64编码
    // 清理Base64数据，移除可能的无效字符和换行符
    let cleanedData = data.replace(/[\r\n\s]/g, '');
    
    // 检查是否已经包含了data:image前缀
    if (cleanedData.startsWith('data:image')) {
      return cleanedData;
    }
    
    // 尝试添加不同的MIME类型
    // 首先尝试标准的JPEG
    return 'data:image/jpeg;base64,' + cleanedData;
  }
};

// 处理图片加载错误
const handleImageError = (event, screenshotId) => {
  
  // 显示错误提示
  event.target.alt = '图片加载失败';
  event.target.src = '';
};

// 组件卸载时清理创建的object URLs
onBeforeUnmount(() => {
  // 清理所有创建的object URLs
  screenshots.value.forEach(screenshot => {
    if (screenshot.data instanceof Blob) {
      // 注意：我们无法直接访问已创建的URL，所以这里不做清理
      // 在实际项目中，应该在创建URL时保存它的引用
    }
  });
  
  // 关闭WebSocket连接
  if (wsClient.value) {
    wsClient.value.disconnect();
  }
});

// 保存截图到本地
const saveScreenshot = (screenshotData) => {
  try {
    // 创建一个临时的下载链接
    const link = document.createElement('a');
    
    if (screenshotData instanceof Blob) {
      // 对于二进制数据，使用URL.createObjectURL
      link.href = URL.createObjectURL(screenshotData);
      // 设置合适的文件名和扩展名
      link.download = `screenshot_${new Date().toISOString().replace(/:/g, '-')}.jpg`;
    } else {
      // 对于字符串数据（向后兼容），使用getImageSource
      link.href = getImageSource(screenshotData);
      link.download = `screenshot_${new Date().toISOString().replace(/:/g, '-')}.jpg`;
    }
    
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    // 保存完成后清理URL对象（仅针对Blob）
    if (screenshotData instanceof Blob) {
      URL.revokeObjectURL(link.href);
    }
    
  } catch (error) {
    addMessage('系统', '保存截图失败', true);
  }
};

const showConnectionHelp = () => {
  alert('WebSocket连接帮助:\n\n1. 点击"连接服务器"按钮建立连接\n2. 连接成功后可以发送和接收消息\n3. 确保服务器正在运行并且端口8805可访问\n\n如有问题，请检查网络连接和服务器状态。');
};

// 生命周期钩子
onMounted(() => {
  // 组件挂载时尝试自动连接服务器
  toggleConnection();
});

onBeforeUnmount(() => {
  // 组件卸载时关闭WebSocket连接
  if (wsClient.value) {
    wsClient.value.disconnect();
  }
});
</script>