u

code/allapp/allapp-rn/test.html

@@ -1,82 +1,121 @@
 <!DOCTYPE html>
-<html>
+<html lang="zh-CN">
+
 <head>
-<meta charset="UTF-8"/>
-<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-<title>空间状态演示</title>
-<style>
-body{margin:0;font-family:-apple-system;background:#fff;padding:20px;}
-.space{
-  background:#f8f8f8;
-  border-radius:12px;
-  padding:16px;
-  margin-bottom:12px;
-  display:flex;
-  justify-content:space-between;
-  align-items:center;
-  border:2px solid transparent;
-}
-.space.selected{
-  border:2px solid #111;
-}
-.name{
-  font-weight:600;
-}
-.meta{font-size:12px;color:#666;margin-top:4px;}
-.tag{
-  font-size:10px;
-  padding:2px 6px;
-  border-radius:6px;
-  margin-left:6px;
-}
-.tag-default{
-  background:#e5e7eb;
-  color:#555;
-}
-.tag-current{
-  background:#111;
-  color:#fff;
-}
-.more{font-size:18px;color:#999;}
-</style>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Space Card</title>
+
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    body {
+      background: #f4f6f8;
+      padding: 40px;
+    }
+
+    .space-card {
+      width: 380px;
+      background: #fff;
+      border-radius: 16px;
+      padding: 18px;
+      border: 1px solid #eee;
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
+      transition: all 0.25s ease;
+      cursor: pointer;
+    }
+
+    .space-card:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
+      border-color: #ddd;
+    }
+
+    .space-card.selected {
+      border: 1px solid #111;
+      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
+    }
+
+    .space-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 12px;
+    }
+
+    .space-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      background: linear-gradient(135deg, #667eea, #764ba2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-weight: 600;
+      font-size: 16px;
+    }
+
+    .space-name {
+      font-size: 16px;
+      font-weight: 600;
+      color: #111;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 200px;
+    }
+
+    .badge {
+      font-size: 11px;
+      padding: 3px 8px;
+      border-radius: 999px;
+      background: #f0f2f5;
+      color: #555;
+    }
+
+    .badge.primary {
+      background: #e8f0ff;
+      color: #3b6cff;
+    }
+
+    .space-info {
+      display: flex;
+      justify-content: space-between;
+      font-size: 13px;
+      color: #666;
+    }
+  </style>
 </head>
+
 <body>
 
-<!-- 当前正在使用 -->
-<div class="space">
-  <div>
-    <div class="name">
-      工作空间
-      <span class="tag tag-current">当前</span>
-      <span class="tag tag-default">默认</span>
-    </div>
-    <div class="meta">张三 · 5人</div>
-  </div>
-  <div class="more">⋯</div>
-</div>
+  <div class="space-card selected">
+    <div class="space-header">
+      <div class="space-avatar">工</div>
 
-<!-- 只是默认 -->
-<div class="space">
-  <div>
-    <div class="name">
-      家庭账本
-      <span class="tag tag-default">默认</span>
+      <div>
+        <div style="display:flex; align-items:center; gap:6px;">
+          <div class="space-name">
+            我的超级长长长长长长工作空间
+          </div>
+          <span class="badge">创建者</span>
+          <span class="badge primary">默认</span>
+        </div>
+      </div>
     </div>
-    <div class="meta">张三 · 3人</div>
-  </div>
-  <div class="more">⋯</div>
-</div>
 
-<!-- 被选中但未进入 -->
-<div class="space selected">
-  <div>
-    <div class="name">
-      副业空间
+    <div class="space-info">
+      <div>昵称：张三</div>
+      <div>成员：8人</div>
     </div>
-    <div class="meta">张三 · 2人</div>
   </div>
-  <div class="more">⋯</div>
-</div>
 
 </body>
+
 </html>