u

code/g3soft-libs/packages/ui/playground/index.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>G3 组件 playground</title>
+    <style>
+      body {
+        margin: 0;
+        background: #fff;
+        color: #18181b;
+        font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+      }
+      .page {
+        max-width: 1120px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      /* 只作用于页面自己的分区（`.page` 的直接子元素）。
+         不能用裸 `section` / `h2`：Drawer 的面板本体就是 `<section class="g3-drawer">`，
+         元素选择器会连它一起命中（曾把面板撑出 16px 的底部间距、还漏进虚线边框和 padding），
+         表现为「抽屉高度撑不满」。 */
+      .page > section {
+        margin-bottom: 16px;
+        padding: 12px 16px 16px;
+        border: 1px dashed #e5e7eb;
+        border-radius: 8px;
+      }
+      .page > section > h2 {
+        margin: 0 0 12px;
+        color: #52525b;
+        font-size: 15px;
+      }
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        align-items: center;
+        margin-bottom: 12px;
+      }
+      .box {
+        display: flex;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        background: #fafafa;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>