0.0.8.5

2025-11-24 14:02:34 +08:00
parent b7a8c9ee6e
commit 3d075c6076
941 changed files with 25613 additions and 27641 deletions
@@ -0,0 +1,98 @@
+"use client"
+
+import { MemberNameWithStatus } from "./member-name-with-status"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+
+export function MemberNameWithStatusDemo() {
+  return (
+    <div className="space-y-6 p-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>成员状态显示方案</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* 方案1: 左上角圆点 */}
+          <div>
+            <h3 className="text-sm font-semibold mb-3">方案1: 左上角圆点（推荐）</h3>
+            <div className="space-y-2">
+              <div className="flex items-center gap-4">
+                <MemberNameWithStatus name="虞雨欣" isDead={false} dotPosition="top-left" />
+                <span className="text-xs text-muted-foreground">在世 - 绿色圆点</span>
+              </div>
+              <div className="flex items-center gap-4">
+                <MemberNameWithStatus name="虞文昌" isDead={true} dotPosition="top-left" />
+                <span className="text-xs text-muted-foreground">已故 - 灰色圆点 + 浅色文字</span>
+              </div>
+            </div>
+          </div>
+
+          {/* 方案2: 左侧圆点 */}
+          <div>
+            <h3 className="text-sm font-semibold mb-3">方案2: 左侧圆点</h3>
+            <div className="space-y-2">
+              <div className="flex items-center gap-4">
+                <MemberNameWithStatus name="虞雨欣" isDead={false} dotPosition="left" />
+                <span className="text-xs text-muted-foreground">在世 - 绿色圆点</span>
+              </div>
+              <div className="flex items-center gap-4">
+                <MemberNameWithStatus name="虞文昌" isDead={true} dotPosition="left" />
+                <span className="text-xs text-muted-foreground">已故 - 灰色圆点 + 浅色文字</span>
+              </div>
+            </div>
+          </div>
+
+          {/* 方案3: 仅文字颜色 */}
+          <div>
+            <h3 className="text-sm font-semibold mb-3">方案3: 仅文字颜色</h3>
+            <div className="space-y-2">
+              <div className="flex items-center gap-4">
+                <MemberNameWithStatus name="虞雨欣" isDead={false} showDot={false} />
+                <span className="text-xs text-muted-foreground">在世 - 正常颜色</span>
+              </div>
+              <div className="flex items-center gap-4">
+                <MemberNameWithStatus name="虞文昌" isDead={true} showDot={false} />
+                <span className="text-xs text-muted-foreground">已故 - 浅色文字</span>
+              </div>
+            </div>
+          </div>
+
+          {/* 实际应用示例 */}
+          <div>
+            <h3 className="text-sm font-semibold mb-3">实际应用示例</h3>
+            <div className="space-y-3">
+              <Card className="p-3">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center">
+                    <span className="text-xs">12月</span>
+                    <span className="font-bold">5</span>
+                  </div>
+                  <div>
+                    <p className="font-medium">
+                      <MemberNameWithStatus name="虞国英" isDead={false} /> 诞辰
+                    </p>
+                    <p className="text-xs text-muted-foreground">第 2 世 · 100 年</p>
+                  </div>
+                </div>
+              </Card>
+
+              <Card className="p-3">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center">
+                    <span className="text-xs">12月</span>
+                    <span className="font-bold">8</span>
+                  </div>
+                  <div>
+                    <p className="font-medium">
+                      <MemberNameWithStatus name="林雅芳" isDead={true} /> 忌日
+                    </p>
+                    <p className="text-xs text-muted-foreground">第 2 世 · 33 年 · 已故</p>
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}