workspace/code/container-ocr/ocr-vue/test.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>多空间 App 原型</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100">

<div class="max-w-md mx-auto h-screen flex flex-col bg-gray-100">

  <!-- 顶部 -->
  <div class="bg-white shadow px-4 py-3 flex justify-between items-center">
    <div id="pageTitle" class="font-semibold text-lg">首页</div>

    <button onclick="openSpaceModal()"
      class="text-sm bg-gray-100 px-3 py-1 rounded-lg">
      <span id="currentSpace">空间A</span>
    </button>
  </div>

  <!-- 内容 -->
  <div class="flex-1 overflow-auto p-4" id="content">

    <!-- 首页 -->
    <div id="homePage">
      <div class="h-32 bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl mb-4"></div>

      <!-- 功能 -->
      <div class="grid grid-cols-4 gap-4 mb-4">
        <div class="bg-white p-3 rounded-xl shadow text-center">任务</div>
        <div class="bg-white p-3 rounded-xl shadow text-center">聊天</div>
        <div class="bg-white p-3 rounded-xl shadow text-center">文件</div>
        <div class="bg-white p-3 rounded-xl shadow text-center">报表</div>
      </div>

      <!-- 最近 -->
      <div class="bg-white p-4 rounded-xl shadow">
        <div class="font-semibold mb-2">最近内容</div>
        <div class="text-sm text-gray-500">任务：优化UI设计</div>
        <div class="text-sm text-gray-500">消息：项目讨论</div>
      </div>
    </div>

    <!-- 消息 -->
    <div id="messagePage" class="hidden space-y-3">
      <div class="bg-white p-4 rounded-xl shadow">用户1：你好</div>
      <div class="bg-white p-4 rounded-xl shadow">用户2：项目OK</div>
      <div class="bg-white p-4 rounded-xl shadow">用户3：收到</div>
    </div>

    <!-- 我的 -->
    <div id="minePage" class="hidden space-y-4">

      <div class="bg-white p-4 rounded-xl shadow flex items-center gap-3">
        <div class="w-12 h-12 bg-gray-300 rounded-full"></div>
        <div>
          <div class="font-semibold">张三</div>
          <div class="text-xs text-gray-400">ID: 10001</div>
        </div>
      </div>

      <div class="bg-white p-4 rounded-xl shadow">
        <div class="font-semibold mb-2">当前空间</div>
        <div class="flex justify-between items-center">
          <span id="currentSpace2">空间A</span>
          <button onclick="openSpaceModal()" class="text-blue-500 text-sm">切换</button>
        </div>
      </div>

      <div class="bg-white p-4 rounded-xl shadow space-y-2">
        <div class="font-semibold">空间操作</div>
        <button class="w-full bg-blue-500 text-white py-2 rounded-lg">创建空间</button>
        <button class="w-full bg-green-500 text-white py-2 rounded-lg">加入空间</button>
      </div>

    </div>

  </div>

  <!-- 底部导航 -->
  <div class="bg-white border-t flex justify-around py-3">
    <button onclick="switchPage('home')" id="navHome" class="text-blue-500">首页</button>
    <button onclick="switchPage('message')" id="navMessage" class="text-gray-500">消息</button>
    <button onclick="switchPage('mine')" id="navMine" class="text-gray-500">我的</button>
  </div>

</div>

<!-- 空间弹层 -->
<div id="spaceModal"
     class="fixed inset-0 bg-black/40 hidden flex items-end">

  <div class="bg-white w-full rounded-t-2xl p-4">

    <div class="text-center font-semibold mb-4">选择空间</div>

    <div class="space-y-2">
      <div onclick="switchSpace('空间A')" class="p-3 bg-gray-100 rounded-lg cursor-pointer">空间A</div>
      <div onclick="switchSpace('空间B')" class="p-3 bg-gray-100 rounded-lg cursor-pointer">空间B</div>
      <div onclick="switchSpace('空间C')" class="p-3 bg-gray-100 rounded-lg cursor-pointer">空间C</div>
    </div>

    <div class="mt-4 space-y-2">
      <button class="w-full bg-blue-500 text-white py-2 rounded-lg">创建空间</button>
      <button class="w-full bg-green-500 text-white py-2 rounded-lg">加入空间</button>
    </div>

    <button onclick="closeSpaceModal()" class="w-full mt-3 text-gray-500">关闭</button>

  </div>
</div>

<script>
  let currentPage = "home";
  let currentSpace = "空间A";

  function switchPage(page) {
    currentPage = page;

    document.getElementById("homePage").classList.add("hidden");
    document.getElementById("messagePage").classList.add("hidden");
    document.getElementById("minePage").classList.add("hidden");

    document.getElementById(page + "Page").classList.remove("hidden");

    document.getElementById("pageTitle").innerText =
      page === "home" ? "首页" :
      page === "message" ? "消息" : "我的";

    // 导航高亮
    ["navHome","navMessage","navMine"].forEach(id=>{
      document.getElementById(id).classList.remove("text-blue-500");
      document.getElementById(id).classList.add("text-gray-500");
    });

    document.getElementById("nav" + page.charAt(0).toUpperCase() + page.slice(1))
      .classList.add("text-blue-500");
  }

  function openSpaceModal() {
    document.getElementById("spaceModal").classList.remove("hidden");
  }

  function closeSpaceModal() {
    document.getElementById("spaceModal").classList.add("hidden");
  }

  function switchSpace(space) {
    currentSpace = space;
    document.getElementById("currentSpace").innerText = space;
    document.getElementById("currentSpace2").innerText = space;
    closeSpaceModal();
  }
</script>

</body>
</html>