@k3000/ce 0.2.0 → 0.2.1

package/console/components/layout-header.mjs

@@ -1,179 +0,0 @@
-
-export const innerHTML = `
-<div class="h-20 w-full flex justify-between items-center relative z-30">
-    <!-- Floating Glass Container -->
-    <div class="absolute inset-x-2 top-2 bottom-2 rounded-2xl bg-white/60 dark:bg-gray-900/60 backdrop-blur-2xl border border-white/50 dark:border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.04)] ring-1 ring-black/5 flex justify-between items-center px-6 transition-all duration-300 hover:shadow-[0_12px_40px_rgba(0,0,0,0.06)] hover:bg-white/70 dark:hover:bg-gray-900/70">
-        
-        <div class="flex items-center gap-6">
-            <!-- Logo -->
-            <div class="flex items-center gap-3 font-bold text-xl tracking-tight text-gray-900">
-                <div class="w-9 h-9 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/30 text-white">
-                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5"></path></svg>
-                </div>
-                
-                <span class="bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-300">Console</span>
-            </div>
-
-            <!-- Separator -->
-            <div class="h-4 w-px bg-gray-300/50 rounded-full"></div>
-
-            <!-- Breadcrumbs -->
-            <div class="flex items-center text-sm font-medium">
-               <span class="text-gray-400 hover:text-blue-600 cursor-pointer transition-colors duration-200">Start</span>
-               <svg class="w-3 h-3 mx-2 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
-               <span class="text-gray-800 dark:text-gray-100 bg-gray-100/50 dark:bg-gray-800/50 px-2 py-0.5 rounded-md">Dashboard</span>
-            </div>
-        </div>
-
-        <!-- Right: User Actions -->
-        <div class="flex items-center gap-3">
-             <!-- Theme Dropdown -->
-             <div class="relative group" tabindex="0">
-                 <button class="w-9 h-9 flex items-center justify-center text-gray-500 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400 transition-all duration-200 rounded-xl hover:bg-purple-50/50 dark:hover:bg-purple-500/10 active:scale-95 border border-transparent hover:border-purple-100 dark:hover:border-purple-500/20">
-                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
-                 </button>
-
-                 <!-- Dropdown Menu -->
-                 <div class="absolute right-0 top-full mt-2 w-56 bg-white/70 dark:bg-gray-800/80 backdrop-blur-3xl border border-white/50 dark:border-white/10 rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.15)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top-right z-50 scale-95 group-hover:scale-100 translate-y-2 group-hover:translate-y-0 filter backdrop-brightness-110 dark:backdrop-brightness-90">
-                    <div class="p-2 space-y-1">
-                        <!-- Light Mode -->
-                        <div onclick="{{setTheme}}" data-theme="light" class="flex items-center justify-between px-3 py-2.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 cursor-pointer group/item transition-colors theme-option">
-                            <div class="flex items-center gap-3 text-sm font-medium text-gray-700 dark:text-gray-200">
-                                <div class="w-8 h-8 rounded-lg bg-orange-50 dark:bg-orange-500/10 text-orange-500 flex items-center justify-center">
-                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
-                                </div>
-                                Day Mode
-                            </div>
-                            <!-- Checkmark for active state -->
-                            <svg class="w-4 h-4 text-orange-500 opacity-0 group-[.active]:opacity-100 transition-opacity check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
-                        </div>
-
-                        <!-- Dark Mode -->
-                        <div onclick="{{setTheme}}" data-theme="dark" class="flex items-center justify-between px-3 py-2.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 cursor-pointer group/item transition-colors theme-option">
-                            <div class="flex items-center gap-3 text-sm font-medium text-gray-700 dark:text-gray-200">
-                                <div class="w-8 h-8 rounded-lg bg-indigo-50 dark:bg-indigo-500/10 text-indigo-500 dark:text-indigo-400 flex items-center justify-center">
-                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
-                                </div>
-                                Night Mode
-                            </div>
-                            <svg class="w-4 h-4 text-indigo-500 dark:text-indigo-400 opacity-0 group-[.active]:opacity-100 transition-opacity check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
-                        </div>
-
-                        <!-- Eye Protection -->
-                        <div onclick="{{setTheme}}" data-theme="eye-protection" class="flex items-center justify-between px-3 py-2.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 cursor-pointer group/item transition-colors theme-option">
-                            <div class="flex items-center gap-3 text-sm font-medium text-gray-700 dark:text-gray-200">
-                                <div class="w-8 h-8 rounded-lg bg-green-50 dark:bg-green-500/10 text-green-600 dark:text-green-400 flex items-center justify-center">
-                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
-                                </div>
-                                Eye Protect
-                            </div>
-                           <svg class="w-4 h-4 text-green-600 dark:text-green-400 opacity-0 group-[.active]:opacity-100 transition-opacity check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
-                        </div>
-                    </div>
-                 </div>
-             </div>
-
-             <!-- Notifications -->
-             <button class="w-9 h-9 flex items-center justify-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-200 rounded-xl hover:bg-blue-50/50 dark:hover:bg-blue-500/10 active:scale-95">
-                <div class="relative">
-                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
-                    <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full border border-white"></span>
-                </div>
-             </button>
-
-             <!-- User Profile -->
-             <div class="relative group" tabindex="0">
-                <div class="flex items-center gap-3 pl-2 pr-1 py-1 rounded-full hover:bg-gray-100/50 transition-all duration-200 cursor-pointer border border-transparent hover:border-white/50">
-                    <div class="hidden md:block text-right">
-                        <div class="text-[10px] uppercase tracking-wider text-gray-400 font-bold">Admin</div>
-                        <div class="text-sm font-bold text-gray-800 dark:text-gray-200 leading-none">{{user.name}}</div>
-                    </div>
-                    <img src="{{user.avatar}}" class="w-9 h-9 rounded-full shadow-md ring-2 ring-white object-cover" />
-                </div>
-
-                <!-- Glass Dropdown Menu -->
-                <div class="absolute right-0 top-full mt-2 w-64 bg-white/70 dark:bg-gray-800/80 backdrop-blur-3xl border border-white/50 dark:border-white/10 rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.15)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top-right z-50 scale-95 group-hover:scale-100 translate-y-2 group-hover:translate-y-0 filter backdrop-brightness-110 dark:backdrop-brightness-90">
-                    <div class="p-2">
-                        <div class="p-3 bg-gradient-to-br from-gray-50 to-white dark:from-gray-700 dark:to-gray-800 rounded-xl border border-white/50 dark:border-white/10 mb-1">
-                            <p class="text-sm font-bold text-gray-900 dark:text-white">{{user.name}}</p>
-                            <p class="text-xs text-gray-500 truncate mt-0.5">admin@example.com</p>
-                        </div>
-                        
-                        <div class="space-y-1">
-                            <a href="#profile" class="flex items-center px-3 py-2.5 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-xl hover:bg-blue-50/80 dark:hover:bg-blue-500/20 hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-200 group/item">
-                                <div class="w-8 h-8 rounded-lg bg-blue-100/50 text-blue-600 flex items-center justify-center mr-3 group-hover/item:bg-blue-500 group-hover/item:text-white transition-colors duration-200">
-                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
-                                </div>
-                                Profile
-                            </a>
-                            <a href="#settings" class="flex items-center px-3 py-2.5 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-xl hover:bg-indigo-50/80 dark:hover:bg-indigo-500/20 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all duration-200 group/item">
-                                <div class="w-8 h-8 rounded-lg bg-indigo-100/50 text-indigo-600 flex items-center justify-center mr-3 group-hover/item:bg-indigo-500 group-hover/item:text-white transition-colors duration-200">
-                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
-                                </div>
-                                Settings
-                            </a>
-                            <div class="h-px bg-gray-100 dark:bg-gray-700 my-1"></div>
-                            <div class="flex items-center px-3 py-2.5 text-sm font-medium text-red-600 rounded-xl hover:bg-red-50/80 transition-all duration-200 cursor-pointer btn-logout group/item">
-                                <div class="w-8 h-8 rounded-lg bg-red-100/50 text-red-500 flex items-center justify-center mr-3 group-hover/item:bg-red-500 group-hover/item:text-white transition-colors duration-200">
-                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
-                                </div>
-                                Logout
-                            </div>
-                        </div>
-                    </div>
-                </div>
-             </div>
-        </div>
-    </div>
-</div>
-`
-
-export default class extends HTMLElement {
-
-    user = {
-        name: 'Admin',
-        avatar: 'https://ui-avatars.com/api/?name=Admin&background=0D8ABC&color=fff'
-    }
-
-    constructor() {
-
-        super()
-    }
-
-    ready() {
-        this.updateThemeUI()
-    }
-
-    setTheme(e) {
-        const target = e.currentTarget
-        const theme = target.dataset.theme
-
-        localStorage.theme = theme
-
-        if (theme === 'dark') {
-            document.documentElement.classList.add('dark')
-            document.documentElement.classList.remove('eye-protection')
-        } else if (theme === 'eye-protection') {
-            document.documentElement.classList.add('eye-protection')
-            document.documentElement.classList.remove('dark')
-        } else {
-            document.documentElement.classList.remove('dark')
-            document.documentElement.classList.remove('eye-protection')
-        }
-
-        this.updateThemeUI()
-    }
-
-    updateThemeUI() {
-        const currentTheme = localStorage.theme || 'light'
-        const options = this.querySelectorAll('.theme-option')
-
-        options.forEach(option => {
-            if (option.dataset.theme === currentTheme) {
-                option.classList.add('active', 'bg-gray-100', 'dark:bg-white/10')
-            } else {
-                option.classList.remove('active', 'bg-gray-100', 'dark:bg-white/10')
-            }
-        })
-    }
-}

package/console/components/layout-menu.mjs

@@ -44,12 +44,64 @@ export default class extends HTMLElement {
                 },
             ]
         },
+        {
+            title: '组件示例',
+            icon: 'tools',
+            path: '/demo',
+            children: [
+                {
+                    title: '按钮',
+                    icon: 'button',
+                    path: '/button',
+                },
+                {
+                    title: '单元格',
+                    icon: 'menu',
+                    path: '/cell',
+                },
+                {
+                    title: '输入框',
+                    icon: 'menu',
+                    path: '/field',
+                },
+                {
+                    title: '图标',
+                    icon: 'search',
+                    path: '/icon',
+                },
+                {
+                    title: '图片',
+                    icon: 'view',
+                    path: '/image',
+                },
+                {
+                    title: '布局',
+                    icon: 'menu',
+                    path: '/layout',
+                },
+                {
+                    title: '弹出层',
+                    icon: 'role',
+                    path: '/popup',
+                },
+                {
+                    title: '间距',
+                    icon: 'menu',
+                    path: '/space',
+                },
+                {
+                    title: '轻提示',
+                    icon: 'menu',
+                    path: '/toast',
+                },
+            ]
+        },
     ]
 
     constructor() {
         super()
         this.template = bind(`
-        <div class="group h-full flex flex-col p-4 bg-white/30 dark:bg-gray-900/40 backdrop-blur-3xl border-r border-white/20 dark:border-white/5 transition-all duration-300 group-[.collapsed]:w-20 shadow-[20px_0_40px_rgba(0,0,0,0.02)]">
+        <div class="group min-h-full flex flex-col p-4 bg-white/30 dark:bg-gray-900/40 backdrop-blur-3xl border-r border-white/20 dark:border-white/5 transition-all duration-300 group-[.collapsed]:w-20 shadow-[20px_0_40px_rgba(0,0,0,0.02)]">
             <!-- Menu Control Bar -->
             <div class="mb-4 flex items-center gap-2 group-[.collapsed]:justify-center group-[.collapsed]:px-0">
                 <!-- Toggle Button -->
@@ -134,6 +186,51 @@ export default class extends HTMLElement {
                 dir: './console/pages',
                 component: 'system-menu'
             },
+            {
+                path: '/demo/button',
+                dir: './console/pages',
+                component: 'demo-button'
+            },
+            {
+                path: '/demo/cell',
+                dir: './console/pages',
+                component: 'demo-cell'
+            },
+            {
+                path: '/demo/field',
+                dir: './console/pages',
+                component: 'demo-field'
+            },
+            {
+                path: '/demo/icon',
+                dir: './console/pages',
+                component: 'demo-icon'
+            },
+            {
+                path: '/demo/image',
+                dir: './console/pages',
+                component: 'demo-image'
+            },
+            {
+                path: '/demo/layout',
+                dir: './console/pages',
+                component: 'demo-layout'
+            },
+            {
+                path: '/demo/popup',
+                dir: './console/pages',
+                component: 'demo-popup'
+            },
+            {
+                path: '/demo/space',
+                dir: './console/pages',
+                component: 'demo-space'
+            },
+            {
+                path: '/demo/toast',
+                dir: './console/pages',
+                component: 'demo-toast'
+            },
         ])
     }
 

package/console/index.html

@@ -45,6 +45,7 @@
         <layout-menu slot="menu"></layout-menu>
         <router-view dir="../../comm" slot="main"></router-view>
     </layout-container>
+    <g-toast id="global-toast"></g-toast>
 </body>
 
 </html>

package/console/index2.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
+    <title>Console Management</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .eye-protection {
+            filter: sepia(0.3) contrast(0.9) brightness(0.95);
+            -webkit-filter: sepia(0.3) contrast(0.9) brightness(0.95);
+        }
+    </style>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+        }
+        // Initialize Theme
+        const theme = localStorage.theme || 'light'
+        if (theme === 'dark') {
+            document.documentElement.classList.add('dark')
+            document.documentElement.classList.remove('eye-protection')
+        } else if (theme === 'eye-protection') {
+            document.documentElement.classList.add('eye-protection')
+            document.documentElement.classList.remove('dark')
+        } else {
+            document.documentElement.classList.remove('dark')
+            document.documentElement.classList.remove('eye-protection')
+        }
+    </script>
+    <script type="module">
+        import { config } from '../index.mjs'
+
+        config({
+            dir: './console/components',
+            ext: 'mjs'
+        })
+    </script>
+</head>
+
+<body class="bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 min-h-screen text-gray-800 dark:text-gray-100 transition-colors duration-300">
+<div-test></div-test>
+</body>
+
+</html>

package/console/pages/demo-button.mjs

@@ -0,0 +1,116 @@
+export const innerHTML = `
+<div class="h-full flex flex-col p-6 gap-6 overflow-y-auto custom-scrollbar">
+    <common-header title="按钮展示区" description="展示 g-button 的各种类型和状态"></common-header>
+
+    <div class="space-y-8">
+        <!-- 基础用法 -->
+        <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">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">基础用法</h3>
+            <div class="flex flex-wrap items-center gap-4">
+                <g-button>默认按钮</g-button>
+                <g-button type="primary">主要按钮</g-button>
+                <g-button type="success">成功按钮</g-button>
+                <g-button type="warning">警告按钮</g-button>
+                <g-button type="danger">危险按钮</g-button>
+            </div>
+        </div>
+
+        <!-- 朴素按钮 -->
+        <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">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">朴素按钮 (plain)</h3>
+            <div class="flex flex-wrap items-center gap-4">
+                <g-button plain>朴素默认</g-button>
+                <g-button plain type="primary">朴素主要</g-button>
+                <g-button plain type="success">朴素成功</g-button>
+                <g-button plain type="warning">朴素警告</g-button>
+                <g-button plain type="danger">朴素危险</g-button>
+            </div>
+        </div>
+        
+        <!-- 禁用状态 -->
+        <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">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">禁用状态 (disabled)</h3>
+            <div class="flex flex-wrap items-center gap-4 mb-4">
+                <g-button disabled>禁用默认</g-button>
+                <g-button disabled type="primary">禁用主要</g-button>
+                <g-button disabled type="success">禁用成功</g-button>
+                <g-button disabled type="warning">禁用警告</g-button>
+                <g-button disabled type="danger">禁用危险</g-button>
+            </div>
+            <div class="flex flex-wrap items-center gap-4">
+                <g-button disabled plain>禁用朴素默认</g-button>
+                <g-button disabled plain type="primary">禁用朴素主要</g-button>
+                <g-button disabled plain type="success">禁用朴素成功</g-button>
+                <g-button disabled plain type="warning">禁用朴素警告</g-button>
+                <g-button disabled plain type="danger">禁用朴素危险</g-button>
+            </div>
+        </div>
+
+        <!-- 加载状态 -->
+        <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">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">
+                加载状态 (loading)
+                <g-button onclick="{{loaded}}" qwe>加载完成</g-button>
+            </h3>
+            <div class="flex flex-wrap items-center gap-4 mb-4">
+                <g-button loading="{{loading}}">加载默认</g-button>
+                <g-button loading="{{loading}}" type="primary">加载主要</g-button>
+                <g-button loading="{{loading}}" type="success" loading-text="处理中...">加载成功</g-button>
+                <g-button loading="{{loading}}" type="warning" loading-text="正在提交">加载警告</g-button>
+                <g-button loading="{{loading}}" type="danger" loading-text="删除中">加载危险</g-button>
+            </div>
+            <div class="flex flex-wrap items-center gap-4">
+                <g-button loading="{{loading}}" plain>朴素加载</g-button>
+                <g-button loading="{{loading}}" plain type="primary" loading-text="请稍候...">朴素加载</g-button>
+            </div>
+        </div>
+
+        <!-- 图标按钮 -->
+        <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">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">图标按钮 (icon)</h3>
+            <div class="flex flex-wrap items-center gap-4 mb-4">
+                <!-- 使用内置 common-icon 的名称 -->
+                <g-button icon="system">系统管理</g-button>
+                <g-button type="primary" icon="user">用户中心</g-button>
+                <g-button type="success" icon="role">角色配置</g-button>
+                <g-button type="warning" icon="menu">菜单设置</g-button>
+                <g-button type="danger" icon="tools">系统工具</g-button>
+            </div>
+            <div class="flex flex-wrap items-center gap-4">
+                <!-- 纯图标按钮 (不带文字) -->
+                <g-button icon="system" class="!!p-3 !rounded-full"></g-button>
+                <g-button type="primary" icon="user" class="!px-3 !py-3 !rounded-full"></g-button>
+                
+                <!-- 使用 URL 作为图标 -->
+                <g-button type="success" icon="https://www.google.com/favicon.ico">外部链接(URL 图标)</g-button>
+            </div>
+        </div>
+        <!-- 尺寸大小 -->
+        <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">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">尺寸大小 (size)</h3>
+            <div class="flex flex-wrap items-end gap-4 mb-4">
+                <g-button size="large">大型按钮</g-button>
+                <g-button size="normal">默认按钮</g-button>
+                <g-button size="small">小型按钮</g-button>
+                <g-button size="mini">迷你按钮</g-button>
+            </div>
+            <div class="flex flex-wrap items-end gap-4">
+                <g-button size="large" type="primary" plain>大型朴素</g-button>
+                <g-button size="normal" type="primary" plain>默认朴素</g-button>
+                <g-button size="small" type="primary" plain>小型朴素</g-button>
+                <g-button size="mini" type="primary" plain>迷你朴素</g-button>
+            </div>
+        </div>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    loading = true
+    ready() {
+        console.log('demo-button ready')
+    }
+    loaded() {
+        this.loading = false
+    }
+}

package/console/pages/demo-cell.mjs

@@ -0,0 +1,59 @@
+export const innerHTML = `
+<div class="h-full flex flex-col p-6 gap-6 overflow-y-auto custom-scrollbar">
+    <common-header title="单元格展示区" description="展示 g-cell 的各种类型和状态"></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 overflow-hidden text-gray-800 dark:text-gray-100">
+                <!-- Group of cells -->
+                <g-cell title="单元格" value="内容"></g-cell>
+                <g-cell title="单元格" value="内容" label="描述信息" border="false"></g-cell>
+            </div>
+        </div>
+
+        <!-- 卡片风格 -->
+        <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 px-4">卡片风格</h3>
+            <div class="space-y-4">
+                <g-cell title="独立卡片单元格" value="内容" round="true"></g-cell>
+                <g-cell title="带描述的独立卡片" value="详细信息" label="底部辅助描述" round="true"></g-cell>
+            </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 overflow-hidden text-gray-800 dark:text-gray-100">
+                <g-cell title="系统管理" icon="system" value="内容"></g-cell>
+                <g-cell title="用户中心" icon="user" value="内容"></g-cell>
+                <g-cell title="URL图标" icon="https://www.google.com/favicon.ico" value="内容" border="false"></g-cell>
+            </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 overflow-hidden text-gray-800 dark:text-gray-100">
+                <g-cell title="可点击的单元格" is-link="true" clickable="true" onclick="{{click}}"></g-cell>
+                <g-cell title="带内容的跳转" value="前往设置" is-link="true"></g-cell>
+                <g-cell title="向下箭头" value="展开详情" is-link="true" arrow-direction="down"></g-cell>
+                <g-cell title="自定义插槽" border="false">
+                    <g-button slot="right-icon" size="mini" type="primary" class="!ml-2">操作按钮</g-button>
+                </g-cell>
+            </div>
+        </div>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    ready() {
+        console.log('demo-cell ready')
+    }
+
+    click() {
+        alert('点击了单元格')
+    }
+}

package/console/pages/demo-field.mjs

@@ -0,0 +1,67 @@
+export const innerHTML = `
+<div class="h-full flex flex-col p-6 gap-6 overflow-y-auto custom-scrollbar">
+    <common-header title="输入框 (Field)" description="表单中的单行输入域，支持带标签、清空、图标和各类状态限制。"></common-header>
+
+    <div class="space-y-8 pb-10">
+        <!-- 基础用法 -->
+        <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">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">基础用法</h3>
+            <g-form data="{{data}}" onsubmit="{{onsubmit}}" class="space-y-4 max-w-md">
+                <g-field placeholder="请输入文本..." name="text"></g-field>
+                <g-field label="用户名" placeholder="请输入用户名" name="username"></g-field>
+                <g-field label="密码" type="password" placeholder="请输入密码" name="password"></g-field>
+                <g-button type="button" onclick={{onsubmit}}>提交</g-button>
+            </g-form>
+        </div>
+
+        <!-- 带有清空按钮 -->
+        <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">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">可清空 (clearable)</h3>
+            <div class="space-y-4 max-w-md">
+                <g-field value="一旦输入内容就可以清空" clearable label="搜索词" placeholder="输入搜索词"></g-field>
+            </div>
+        </div>
+
+        <!-- 自定义图标 -->
+        <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">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">前后缀图标 (left-icon / right-icon)</h3>
+            <div class="space-y-4 max-w-md">
+                <g-field left-icon="search" placeholder="全局搜索"></g-field>
+                <g-field left-icon="user" label="账号" placeholder="请输入账号"></g-field>
+                <g-field right-icon="menu" placeholder="更多设置 (点击图标)" onrightclick="{{handleRightClick}}"></g-field>
+            </div>
+        </div>
+
+        <!-- 禁用与只读 -->
+        <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">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">只读与禁用状态 (readonly / disabled)</h3>
+            <div class="space-y-4 max-w-md">
+                <g-field label="只读属性" value="我是只读的内容，无法修改" readonly clearable></g-field>
+                <g-field label="禁用状态" placeholder="该输入框被禁用" disabled clearable></g-field>
+                <g-field label="禁用状态" value="带固定值的禁用" disabled></g-field>
+            </div>
+        </div>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+
+    data = {}
+
+    ready() {
+        console.log('demo-field ready')
+    }
+
+    onsubmit() {
+        console.log(this.data)
+    }
+
+    handleRightClick() {
+        if (window.$toast) {
+            window.$toast.show('由右侧图标触发的点击事件');
+        } else {
+            console.log('Right icon clicked');
+        }
+    }
+}