@k3000/ce 0.1.0 → 0.2.1

package/console/pages/demo-icon.mjs

@@ -0,0 +1,200 @@
+export const innerHTML = `
+<div class="h-full flex flex-col p-6 gap-6 overflow-y-auto custom-scrollbar">
+    <common-header title="图标展示区" description="展示 g-icon 内置的所有图标集合"></common-header>
+
+    <div class="space-y-8">
+        <!-- 内置图标合集 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4">基础图标 (点击可查看名称)</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6">
+                <!-- 图标网格布局 -->
+                <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4">
+                    <!-- 循环渲染目前已有的图标 -->
+                    <div onclick="alert('名称: system')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="system" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">system</span>
+                    </div>
+                    
+                    <div onclick="alert('名称: system_inner')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="system_inner" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">system_inner</span>
+                    </div>
+
+                    <div onclick="alert('名称: user')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="user" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">user</span>
+                    </div>
+
+                    <div onclick="alert('名称: role')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="role" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">role</span>
+                    </div>
+
+                    <div onclick="alert('名称: menu')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="menu" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">menu</span>
+                    </div>
+
+                    <div onclick="alert('名称: tools')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="tools" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">tools</span>
+                    </div>
+
+                    <div onclick="alert('名称: search')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="search" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">search</span>
+                    </div>
+
+                    <div onclick="alert('名称: button')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="button" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">button</span>
+                    </div>
+                    
+                    <div onclick="alert('名称: home')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="home" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">home</span>
+                    </div>
+
+                    <div onclick="alert('名称: edit')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="edit" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">edit</span>
+                    </div>
+
+                    <div onclick="alert('名称: delete')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="delete" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">delete</span>
+                    </div>
+
+                    <div onclick="alert('名称: add')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="add" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">add</span>
+                    </div>
+
+                    <div onclick="alert('名称: check')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="check" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">check</span>
+                    </div>
+
+                    <div onclick="alert('名称: close')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="close" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">close</span>
+                    </div>
+
+                    <div onclick="alert('名称: info')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="info" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">info</span>
+                    </div>
+
+                    <div onclick="alert('名称: warning')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="warning" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">warning</span>
+                    </div>
+
+                    <div onclick="alert('名称: view')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="view" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">view</span>
+                    </div>
+
+                    <div onclick="alert('名称: logout')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="logout" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">logout</span>
+                    </div>
+
+                    <div onclick="alert('名称: upload')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="upload" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">upload</span>
+                    </div>
+
+                    <div onclick="alert('名称: download')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="download" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">download</span>
+                    </div>
+
+                    <div onclick="alert('名称: refresh')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                        <g-icon name="refresh" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center">refresh</span>
+                    </div>
+                    
+                     <!-- Default/Unknown Icon -->
+                    <div onclick="alert('默认/未知图标表现形式')" class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/40 dark:hover:bg-white/5 cursor-pointer transition-all hover:scale-105 active:scale-95 group text-gray-400 dark:text-gray-500">
+                        <g-icon name="unknown_abcde" class="w-8 h-8 mb-2 drop-shadow-sm group-hover:drop-shadow-md transition-all"></g-icon>
+                        <span class="text-xs font-mono break-all text-center text-gray-400">未知/容错</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 徽标提示 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4">徽标提示 (dot / badge 属性)</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6 flex flex-wrap items-center gap-8">
+                <div class="flex items-center gap-6">
+                    <div class="flex flex-col items-center gap-2">
+                        <g-icon name="user" class="w-6 h-6 text-gray-600 dark:text-gray-300" dot="true"></g-icon>
+                        <span class="text-xs text-gray-500">红点 (dot)</span>
+                    </div>
+                    <div class="flex flex-col items-center gap-2">
+                        <g-icon name="system" class="w-6 h-6 text-gray-600 dark:text-gray-300" badge="5"></g-icon>
+                        <span class="text-xs text-gray-500">数字徽标</span>
+                    </div>
+                    <div class="flex flex-col items-center gap-2">
+                        <g-icon name="role" class="w-6 h-6 text-gray-600 dark:text-gray-300" badge="99+"></g-icon>
+                        <span class="text-xs text-gray-500">文本徽标</span>
+                    </div>
+                    <div class="flex flex-col items-center gap-2">
+                        <g-icon name="menu" class="w-6 h-6 text-gray-600 dark:text-gray-300" badge="新"></g-icon>
+                        <span class="text-xs text-gray-500">短文本</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 大小和颜色控制 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4">扩展控制 (class参数传入)</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6 flex flex-wrap items-center gap-6">
+                <div class="flex items-center gap-3">
+                    <span class="text-sm text-gray-500">大小(Tailwind class):</span>
+                    <g-icon name="user" class="w-4 h-4 text-gray-600 dark:text-gray-300"></g-icon>
+                    <g-icon name="user" class="w-6 h-6 text-gray-600 dark:text-gray-300"></g-icon>
+                    <g-icon name="user" class="w-10 h-10 text-gray-600 dark:text-gray-300"></g-icon>
+                </div>
+
+                <div class="w-px h-8 bg-gray-200 dark:bg-gray-700 hidden sm:block"></div>
+
+                <div class="flex items-center gap-3">
+                    <span class="text-sm text-gray-500">大小(size属性):</span>
+                    <g-icon name="user" size="1.2rem" class="text-blue-500"></g-icon>
+                    <g-icon name="user" size="30px" class="text-green-500"></g-icon>
+                    <g-icon name="user" size="2.5em" class="text-orange-500"></g-icon>
+                </div>
+                
+                <div class="w-px h-8 bg-gray-200 dark:bg-gray-700"></div>
+                
+                <div class="flex items-center gap-3">
+                    <span class="text-sm text-gray-500">颜色(Tailwind class):</span>
+                    <g-icon name="tools" class="w-6 h-6 text-blue-500"></g-icon>
+                    <g-icon name="tools" class="w-6 h-6 text-green-500"></g-icon>
+                    <g-icon name="tools" class="w-6 h-6 text-red-500"></g-icon>
+                    <g-icon name="tools" class="w-6 h-6 text-orange-500"></g-icon>
+                </div>
+
+                <div class="w-px h-8 bg-gray-200 dark:bg-gray-700 hidden sm:block"></div>
+                
+                <div class="flex items-center gap-3">
+                    <span class="text-sm text-gray-500">颜色(color属性):</span>
+                    <g-icon name="tools" class="w-6 h-6" color="#8b5cf6"></g-icon>
+                    <g-icon name="tools" class="w-6 h-6" color="rgb(236, 72, 153)"></g-icon>
+                    <g-icon name="tools" class="w-6 h-6" color="darkcyan"></g-icon>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    ready() {
+        console.log('demo-icon ready')
+    }
+}

package/console/pages/demo-image.mjs

@@ -0,0 +1,113 @@
+export const innerHTML = `
+<div class="h-full flex flex-col p-6 gap-6 overflow-y-auto custom-scrollbar">
+    <common-header title="图片展示区" description="展示 g-image 的各种类型和状态"></common-header>
+
+    <div class="space-y-8">
+        <!-- 基础用法 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4">基础用法与加载</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6">
+                <div class="flex flex-wrap gap-6 items-end">
+                    <!-- Normal Loading -->
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/400/400?random=1"></g-image>
+                        <span class="text-xs text-gray-500">默认</span>
+                    </div>
+
+                    <!-- Lazy Loading Example with random large delay image -->
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/400/400?req=${Date.now()}" lazy="true"></g-image>
+                        <span class="text-xs text-gray-500">懒加载 (lazy)</span>
+                    </div>
+
+                    <!-- Error State -->
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://invalid-image-url.com/broken.jpg"></g-image>
+                        <span class="text-xs text-gray-500">加载失败 (自带骨架)</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 填充模式 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4">填充模式 (fit)</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6">
+                <div class="flex flex-wrap gap-6 items-end">
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/800/400?random=2" fit="fill" class="w-32 h-32"></g-image>
+                        <span class="text-xs text-gray-500">fill</span>
+                    </div>
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/800/400?random=2" fit="contain" class="w-32 h-32"></g-image>
+                        <span class="text-xs text-gray-500">contain</span>
+                    </div>
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/800/400?random=2" fit="cover" class="w-32 h-32"></g-image>
+                        <span class="text-xs text-gray-500">cover</span>
+                    </div>
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/800/400?random=2" fit="none" class="w-32 h-32"></g-image>
+                        <span class="text-xs text-gray-500">none</span>
+                    </div>
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/800/400?random=2" fit="scale-down" class="w-32 h-32"></g-image>
+                        <span class="text-xs text-gray-500">scale-down</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 圆角与形状 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4">圆角与形状</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6">
+                <div class="flex flex-wrap gap-6 items-end">
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/400/400?random=3" class="w-32 h-32 rounded-lg"></g-image>
+                        <span class="text-xs text-gray-500">默认圆角</span>
+                    </div>
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/400/400?random=4" class="w-32 h-32" round="true"></g-image>
+                        <span class="text-xs text-gray-500">圆形 (round)</span>
+                    </div>
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/400/400?random=5" class="w-32 h-32" radius="2rem"></g-image>
+                        <span class="text-xs text-gray-500">指定 radius</span>
+                    </div>
+                </div>
+            </div>
+        <!-- 尺寸与裁剪 (自定义宽高和位置) -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4">尺寸控制 (width / height / position)</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6">
+                <div class="flex flex-wrap gap-6 items-end">
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/800/800?random=11" width="160px" height="80px" fit="cover"></g-image>
+                        <span class="text-xs text-gray-500">宽160px 高80px</span>
+                    </div>
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/800/800?random=11" width="5rem" height="5rem" radius="10px"></g-image>
+                        <span class="text-xs text-gray-500">宽高 5rem</span>
+                    </div>
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/800/400?random=12" width="100px" height="100px" fit="cover" position="left"></g-image>
+                        <span class="text-xs text-gray-500">position="left"</span>
+                    </div>
+                    <div class="flex flex-col gap-2 items-center">
+                        <g-image src="https://picsum.photos/800/400?random=12" width="100px" height="100px" fit="cover" position="right"></g-image>
+                        <span class="text-xs text-gray-500">position="right"</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    ready() {
+        console.log('demo-image ready')
+    }
+}

package/console/pages/demo-layout.mjs

@@ -0,0 +1,141 @@
+export const innerHTML = `
+<div class="h-full flex flex-col p-6 gap-6 overflow-y-auto custom-scrollbar">
+    <common-header title="布局展示区" description="展示 g-row 和 g-col 的 24 栅格行列布局"></common-header>
+
+    <div class="space-y-8">
+        <style>
+            /* 仅用于演示块的高亮样式 */
+            .demo-col {
+                border-radius: 4px;
+                min-height: 36px;
+                display: flex;
+                align-items: center;
+                justify-center;
+                color: #fff;
+                font-size: 13px;
+                text-align: center;
+            }
+            .demo-col-dark {
+                background: rgba(139, 92, 246, 0.4);
+                backdrop-filter: blur(10px);
+                border: 1px solid rgba(255, 255, 255, 0.2);
+            }
+            .demo-col-light {
+                background: rgba(139, 92, 246, 0.2);
+                backdrop-filter: blur(10px);
+                border: 1px solid rgba(255, 255, 255, 0.1);
+            }
+        </style>
+
+        <!-- 基础布局 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4 shadow-sm">基础布局 (24格)</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6 space-y-4">
+                <g-row>
+                    <g-col span="24">
+                        <div class="demo-col demo-col-dark flex justify-center h-full">span: 24</div>
+                    </g-col>
+                </g-row>
+                
+                <g-row>
+                    <g-col span="12"><div class="demo-col demo-col-light flex justify-center h-full">span: 12</div></g-col>
+                    <g-col span="12"><div class="demo-col demo-col-dark flex justify-center h-full">span: 12</div></g-col>
+                </g-row>
+                
+                <g-row>
+                    <g-col span="8"><div class="demo-col demo-col-dark flex justify-center h-full">span: 8</div></g-col>
+                    <g-col span="8"><div class="demo-col demo-col-light flex justify-center h-full">span: 8</div></g-col>
+                    <g-col span="8"><div class="demo-col demo-col-dark flex justify-center h-full">span: 8</div></g-col>
+                </g-row>
+                
+                <g-row>
+                    <g-col span="6"><div class="demo-col demo-col-light flex justify-center h-full">span: 6</div></g-col>
+                    <g-col span="6"><div class="demo-col demo-col-dark flex justify-center h-full">span: 6</div></g-col>
+                    <g-col span="6"><div class="demo-col demo-col-light flex justify-center h-full">span: 6</div></g-col>
+                    <g-col span="6"><div class="demo-col demo-col-dark flex justify-center h-full">span: 6</div></g-col>
+                </g-row>
+            </div>
+        </div>
+
+        <!-- 栅格间距 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4 shadow-sm">分栏隔离 (gutter)</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6 space-y-6">
+                <p class="text-xs text-gray-500 mb-2">水平间距 gutter="20"</p>
+                <g-row gutter="20">
+                    <g-col span="8"><div class="demo-col demo-col-dark flex justify-center h-full">span: 8</div></g-col>
+                    <g-col span="8"><div class="demo-col demo-col-light flex justify-center h-full">span: 8</div></g-col>
+                    <g-col span="8"><div class="demo-col demo-col-dark flex justify-center h-full">span: 8</div></g-col>
+                </g-row>
+
+                <p class="text-xs text-gray-500 mb-2 mt-4">水平+垂直间距 gutter="[20, 20]" (多行折叠适用)</p>
+                <g-row gutter="[20, 20]">
+                    <g-col span="8"><div class="demo-col demo-col-light flex justify-center h-full">span: 8</div></g-col>
+                    <g-col span="8"><div class="demo-col demo-col-dark flex justify-center h-full">span: 8</div></g-col>
+                    <g-col span="8"><div class="demo-col demo-col-light flex justify-center h-full">span: 8</div></g-col>
+                    <g-col span="8"><div class="demo-col demo-col-dark flex justify-center h-full">span: 8</div></g-col>
+                    <g-col span="8"><div class="demo-col demo-col-light flex justify-center h-full">span: 8</div></g-col>
+                </g-row>
+            </div>
+        </div>
+
+        <!-- 栅格偏移 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4 shadow-sm">分栏偏移 (offset)</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6 space-y-4">
+                <g-row gutter="10">
+                    <g-col span="4"><div class="demo-col demo-col-dark flex justify-center h-full">span: 4</div></g-col>
+                    <g-col span="10" offset="4"><div class="demo-col demo-col-light flex justify-center h-full">span: 10, offset: 4</div></g-col>
+                </g-row>
+                
+                <g-row gutter="10">
+                    <g-col span="12" offset="12"><div class="demo-col demo-col-dark flex justify-center h-full">span: 12, offset: 12</div></g-col>
+                </g-row>
+            </div>
+        </div>
+
+        <!-- 对齐方式 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4 shadow-sm">对齐方式 (justify / align)</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6 space-y-6">
+                <!-- 居中对齐 -->
+                <p class="text-xs text-gray-500 mb-2">justify="center"</p>
+                <div class="bg-black/5 dark:bg-white/5 rounded-lg p-2">
+                     <g-row justify="center">
+                         <g-col span="6"><div class="demo-col demo-col-light flex justify-center h-full">span: 6</div></g-col>
+                         <g-col span="6"><div class="demo-col demo-col-dark flex justify-center h-full">span: 6</div></g-col>
+                         <g-col span="6"><div class="demo-col demo-col-light flex justify-center h-full">span: 6</div></g-col>
+                     </g-row>
+                </div>
+
+                <!-- 两端对齐 -->
+                <p class="text-xs text-gray-500 mb-2">justify="space-between"</p>
+                <div class="bg-black/5 dark:bg-white/5 rounded-lg p-2">
+                     <g-row justify="space-between">
+                         <g-col span="4"><div class="demo-col demo-col-dark flex justify-center h-full">span: 4</div></g-col>
+                         <g-col span="4"><div class="demo-col demo-col-light flex justify-center h-full">span: 4</div></g-col>
+                         <g-col span="4"><div class="demo-col demo-col-dark flex justify-center h-full">span: 4</div></g-col>
+                     </g-row>
+                </div>
+                
+                <!-- 垂直到底部 -->
+                <p class="text-xs text-gray-500 mb-2">align="bottom"</p>
+                <div class="bg-black/5 dark:bg-white/5 rounded-lg p-2 h-24">
+                     <g-row align="bottom" class="h-full">
+                         <g-col span="6"><div class="demo-col demo-col-light flex justify-center h-[20px]">h:20</div></g-col>
+                         <g-col span="6"><div class="demo-col demo-col-dark flex justify-center h-[50px]">h:50</div></g-col>
+                         <g-col span="8"><div class="demo-col demo-col-light flex justify-center h-[30px]">h:30</div></g-col>
+                     </g-row>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    ready() {
+        console.log('demo-layout ready')
+    }
+}

package/console/pages/demo-popup.mjs

@@ -0,0 +1,158 @@
+export const innerHTML = `
+<div class="h-full flex flex-col p-6 gap-6 overflow-y-auto custom-scrollbar">
+    <common-header title="弹出层部件" description="展示 g-popup 的基础用法、各个方向及其多层管理能力"></common-header>
+
+    <div class="space-y-8 pb-10">
+        <!-- 基础用法与位置 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4 shadow-sm">基础用法与位置 (position)</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6 flex flex-wrap gap-4">
+                <g-button onclick="{{open}}">居中弹出</g-button>
+                <g-button onclick="document.getElementById('pop-bottom').open()">底部弹出</g-button>
+                <g-button onclick="document.getElementById('pop-top').open()">顶部弹出</g-button>
+                <g-button onclick="document.getElementById('pop-left').open()">左侧弹出</g-button>
+                <g-button onclick="document.getElementById('pop-right').open()">右侧弹出</g-button>
+            </div>
+        </div>
+        
+        <!-- 遮罩与圆角控制 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4 shadow-sm">特殊修饰 (overlay / round)</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6 flex flex-wrap gap-4">
+                <g-button onclick="document.getElementById('pop-no-round').open()">不带圆角直角(默认)</g-button>
+                <g-button plain="true" onclick="document.getElementById('pop-no-overlay').open()">透明无遮罩层 (overlay=false)</g-button>
+            </div>
+        </div>
+
+        <!-- 多层叠加弹窗 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4 shadow-sm">多层堆叠管理 (自动递增 z-index)</h3>
+            <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-2xl shadow-lg shadow-gray-200/20 dark:shadow-black/20 border border-white/40 dark:border-white/10 p-6 flex flex-wrap gap-4">
+                <g-button type="primary" onclick="document.getElementById('pop-multi-1').open()">打开第一层 (滑出抽屉)</g-button>
+            </div>
+        </div>
+    </div>
+    
+    <!-- ================= 弹窗实例区域 ================= -->
+    
+    <!-- Center -->
+    <g-popup id="pop-center" round="true" position="center" status="{{popupStatus}}" onclose="{{close}}">
+        <div class="w-80 p-8 flex flex-col items-center gap-4">
+            <g-icon name="check" class="w-12 h-12 text-green-500"></g-icon>
+            <h4 class="text-lg font-bold">居中弹窗</h4>
+            <p class="text-gray-500 text-sm text-center">这是一个经典的居中显示弹出层，附带轻柔的面包缩放缓冲动画。</p>
+            <g-button class="mt-4 w-full" type="primary" onclick="{{close}}">稍后再说</g-button>
+        </div>
+    </g-popup>
+    
+    <!-- Bottom -->
+    <g-popup id="pop-bottom" round="true" position="bottom">
+        <div class="w-full sm:w-[500px] p-6 mx-auto h-64 bg-white/50 dark:bg-gray-800/50">
+            <h4 class="text-lg font-bold mb-4 border-b border-gray-100 dark:border-gray-700 pb-2">底部弹窗面板</h4>
+            <p class="text-gray-500 text-sm">从底部平滑移出的面板通常用于选择项、评论列表或是分享屏幕操作等。</p>
+            <div class="mt-8 flex gap-4">
+               <g-button class="flex-1" onclick="document.getElementById('pop-bottom').close()">取消</g-button>
+               <g-button type="primary" class="flex-1" onclick="document.getElementById('pop-bottom').close()">确认</g-button>
+            </div>
+        </div>
+    </g-popup>
+    
+    <!-- Top -->
+    <g-popup id="pop-top" round="true" position="top" close-on-click-overlay="false">
+        <div class="w-full p-4 bg-orange-500/10 backdrop-blur-xl text-orange-600 dark:text-orange-400 flex items-center justify-between shadow-xl shadow-orange-500/10 border-b border-orange-500/20">
+            <div class="flex items-center gap-2">
+                <g-icon name="warning" class="w-5 h-5"></g-icon>
+                <span class="text-sm font-medium">这是一条顶部的警告消息！设置了不允许点击遮罩层关闭。</span>
+            </div>
+            <g-icon name="close" class="w-5 h-5 cursor-pointer hover:opacity-70 transition-opacity" onclick="document.getElementById('pop-top').close()"></g-icon>
+        </div>
+    </g-popup>
+
+    <!-- Left -->
+    <g-popup id="pop-left" position="left" round="true">
+        <div class="w-64 h-full p-6 flex flex-col border-r border-white/20">
+            <h4 class="text-lg font-bold mb-6">系统菜单抽屉</h4>
+            <div class="space-y-4 flex-1">
+                <div class="h-10 bg-gray-100 dark:bg-gray-700/50 rounded-lg animate-pulse w-full"></div>
+                <div class="h-10 bg-gray-100 dark:bg-gray-700/50 rounded-lg animate-pulse w-2/3"></div>
+                <div class="h-10 bg-gray-100 dark:bg-gray-700/50 rounded-lg animate-pulse w-4/5"></div>
+            </div>
+            <g-button onclick="document.getElementById('pop-left').close()">关闭</g-button>
+        </div>
+    </g-popup>
+    
+    <!-- Right -->
+    <g-popup id="pop-right" position="right">
+        <div class="w-80 h-full p-6 flex flex-col border-l border-white/20">
+            <h4 class="text-lg font-bold mb-6">侧边栏详情</h4>
+            <div class="space-y-4 flex-1">
+                <p class="text-sm text-gray-500">从右侧滑出的面板，通常用于后台系统的全局设置或者某一行的详情表单页。</p>
+            </div>
+            <g-button type="primary" onclick="document.getElementById('pop-right').close()">完成</g-button>
+        </div>
+    </g-popup>
+
+    <!-- No Round Center -->
+    <g-popup id="pop-no-round" position="center">
+        <div class="w-80 p-6 flex flex-col gap-4 bg-blue-50 dark:bg-blue-900/30">
+            <h4 class="text-lg font-bold">直角弹窗</h4>
+            <p class="text-gray-500 text-sm">这是一个没有提供圆角修饰的极度硬朗的弹出框容器示例。</p>
+            <g-button onclick="document.getElementById('pop-no-round').close()">阅毕</g-button>
+        </div>
+    </g-popup>
+
+    <!-- No Overlay Center -->
+    <g-popup id="pop-no-overlay" position="center" overlay="false" round="true">
+        <div class="w-72 p-6 flex flex-col gap-4 shadow-[0_20px_50px_rgba(0,0,0,0.15)] bg-white dark:bg-gray-800">
+            <h4 class="text-md font-bold text-center">透明无遮罩模式</h4>
+            <p class="text-gray-500 text-xs text-center border-b border-gray-100 dark:border-gray-700 pb-2">此时您可以看到背后没有变暗。点击由于没遮罩所以需要按钮关闭：）</p>
+            <g-button onclick="document.getElementById('pop-no-overlay').close()">关闭这个透明框</g-button>
+        </div>
+    </g-popup>
+
+    
+    <!-- Multi 1 -->
+    <g-popup id="pop-multi-1" position="right" round="true">
+        <div class="w-[350px] sm:w-[450px] h-full p-6 flex flex-col shadow-[-10px_0_30px_rgba(0,0,0,0.1)]">
+            <div class="flex items-center justify-between mb-6 border-b border-gray-100 dark:border-gray-700 pb-4">
+                <h4 class="text-lg font-bold">第一层弹窗</h4>
+                <g-icon name="close" class="w-5 h-5 cursor-pointer text-gray-400 hover:text-red-500" onclick="document.getElementById('pop-multi-1').close()"></g-icon>
+            </div>
+            
+            <p class="text-gray-500 mb-6 flex-1">
+                目前的 z-index 是 <code>window.__g_popup_z_index</code> 的分配结果（通常是2000）。<br/><br/>
+                你可以随时在页面中任意点击下方按钮，我们在这一层之上继续利用 g-popup 打开一个新的层级。由于 z-index 自增，新的层次会永远在最顶端。
+            </p>
+            
+            <g-button type="warning" onclick="document.getElementById('pop-multi-2').open()">在其上方打开第二层</g-button>
+        </div>
+    </g-popup>
+    
+    <!-- Multi 2 -->
+    <g-popup id="pop-multi-2" position="center" round="true" close-on-click-overlay="false">
+        <div class="w-80 p-8 flex flex-col items-center">
+             <div class="w-12 h-12 rounded-full bg-orange-100 dark:bg-orange-900/40 flex items-center justify-center mb-4 text-orange-500">
+                  <g-icon name="warning" class="w-6 h-6"></g-icon>
+             </div>
+             
+             <h4 class="text-lg font-bold mb-2 text-center">第二层强制确认</h4>
+             <p class="text-sm text-gray-500 text-center mb-6">此时 z-index 自动 +1。它不仅覆盖在第一层之上，还阻止了点击遮罩层关闭（防乱点击退出）。</p>
+             <div class="flex gap-4 w-full">
+                 <g-button class="flex-1" onclick="document.getElementById('pop-multi-2').close()">明白，关闭本层</g-button>
+             </div>
+        </div>
+    </g-popup>
+
+</div>
+`
+export default class extends HTMLElement {
+    popupStatus = false
+
+    open() {
+        this.popupStatus = true
+    }
+
+    close() {
+        this.popupStatus = false
+    }
+}