@k3000/ce 0.0.1 → 0.1.0

package/console/components/layout-header.mjs

@@ -0,0 +1,179 @@
+
+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

@@ -0,0 +1,221 @@
+import { useEvent, bind } from "../../index.mjs";
+
+export default class extends HTMLElement {
+
+    template = null
+
+    menu = [
+        {
+            title: '系统管理',
+            icon: 'system',
+            path: '/system',
+            children: [
+                {
+                    title: '用户管理',
+                    icon: 'user',
+                    path: '/user',
+                },
+                {
+                    title: '角色管理',
+                    icon: 'role',
+                    path: '/role',
+                },
+                {
+                    title: '菜单管理',
+                    icon: 'menu',
+                    path: '/menu',
+                },
+            ]
+        },
+        {
+            title: '系统工具',
+            icon: 'tools',
+            path: '/tools',
+            children: [
+                {
+                    title: '表单生成',
+                    icon: 'form',
+                    path: '/form',
+                },
+                {
+                    title: '代码生成',
+                    icon: 'code',
+                    path: '/code',
+                },
+            ]
+        },
+    ]
+
+    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)]">
+            <!-- Menu Control Bar -->
+            <div class="mb-4 flex items-center gap-2 group-[.collapsed]:justify-center group-[.collapsed]:px-0">
+                <!-- Toggle Button -->
+                <div onclick="{{toggleMenu}}" class="cursor-pointer text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors">
+                     <div class="w-9 h-9 rounded-xl bg-gray-100 dark:bg-gray-800/50 flex items-center justify-center hover:bg-white dark:hover:bg-white/10 hover:shadow-sm transition-all duration-300">
+                        <!-- Expanded Icon (Collapse) -->
+                        <svg class="w-5 h-5 group-[.collapsed]:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7"></path></svg>
+                        <!-- Collapsed Icon (Expand) -->
+                        <svg class="w-5 h-5 hidden group-[.collapsed]:block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
+                     </div>
+                </div>
+
+                <!-- Search Input -->
+                <div class="flex-1 relative group-[.collapsed]:hidden">
+                     <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+                     <input type="text" oninput="{{onInput}}" placeholder="搜索" class="w-full h-9 pl-9 pr-3 text-sm bg-gray-100 dark:bg-gray-800/50 border-none rounded-xl focus:ring-2 focus:ring-blue-500/20 text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 transition-all outline-none" />
+                </div>
+            </div>
+
+            <ul class="space-y-2 flex-1">
+                ${this.menu.map(item => `
+                <li>
+                    ${item?.children ? `
+                        <details open class="group/menu" ontoggle="{{onToggle}}">
+                            <summary class="menu-header flex items-center justify-between px-4 py-3 rounded-2xl hover:bg-white/40 dark:hover:bg-white/10 hover:backdrop-blur-md hover:shadow-sm cursor-pointer select-none transition-all duration-300 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 mb-1 group-open/menu:text-blue-600 dark:group-open/menu:text-blue-400 group-open/menu:font-semibold group-[.collapsed]:justify-center group-[.collapsed]:px-0 group-[.collapsed]:gap-0 border border-transparent hover:border-white/20">
+                                <div class="flex items-center gap-3">
+                                    <div class="menu-icon w-8 h-8 rounded-xl bg-gray-100 dark:bg-gray-800/50 flex items-center justify-center group-hover/menu:bg-white dark:group-hover/menu:bg-white/10 group-hover/menu:shadow-sm group-open/menu:bg-blue-100 dark:group-open/menu:bg-blue-500/20 group-open/menu:text-blue-600 dark:group-open/menu:text-blue-400 transition-all duration-300 group-[.collapsed]:mr-0 group-[.collapsed]:bg-transparent group-open/menu:group-[.collapsed]:bg-blue-500/10 group-open/menu:group-[.collapsed]:text-blue-600">
+                                        <!-- You can switch icons based on item.icon -->
+                                        <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="M4 6h16M4 12h16M4 18h16"></path></svg>
+                                    </div>
+                                    <span class="menu-text group-[.collapsed]:hidden">${item.title}</span>
+                                </div>
+                                <svg class="menu-arrow w-4 h-4 text-gray-400 dark:text-gray-600 transition-transform duration-300 group-open/menu:rotate-180 group-[.collapsed]:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                                </svg>
+                            </summary>
+                            <div class="overflow-hidden transition-all duration-300 group-[.collapsed]:hidden">
+                                <ul class="pl-4 mt-1 space-y-1 border-l-2 border-dashed border-gray-200 dark:border-gray-700 ml-6 pb-2">
+                                    ${item.children.map(child => `
+                                        <li>
+                                            <span onclick="{{navigate}}" data-path="${item.path}${child.path}" data-key="${child.title}" class="flex items-center gap-3 px-4 py-2.5 text-sm rounded-xl hover:bg-blue-50/80 dark:hover:bg-blue-500/10 hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer text-gray-500 dark:text-gray-500 transition-all duration-200 group/item hover:translate-x-1">
+                                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 group-hover/item:bg-blue-500 dark:group-hover/item:bg-blue-400 transition-colors"></div>
+                                                ${child.title}
+                                            </span>
+                                        </li>
+                                    `).join('')}
+                                </ul>
+                            </div>
+                        </details>
+                    ` : `
+                        <span onclick="{{navigate}}" data-path="${item.path}" class="menu-header flex items-center gap-3 px-4 py-3 rounded-2xl hover:bg-white/40 dark:hover:bg-white/10 hover:backdrop-blur-md hover:shadow-sm cursor-pointer text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-300 group/item group-[.collapsed]:justify-center group-[.collapsed]:px-0 border border-transparent hover:border-white/20">
+                            <div class="menu-icon w-8 h-8 rounded-xl bg-gray-100 dark:bg-gray-800/50 flex items-center justify-center group-hover/item:bg-white dark:group-hover/item:bg-white/10 group-hover/item:shadow-sm group-hover/item:text-blue-600 dark:group-hover/item:text-blue-400 transition-all duration-300 group-[.collapsed]:mr-0">
+                                <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="M4 6h16M4 12h16M4 18h16"></path></svg>
+                            </div>
+                            <span class="menu-text font-medium group-[.collapsed]:hidden">${item.title}</span>
+                        </span>
+                    `}
+                </li>
+            `).join('')}
+            </ul>
+        </div>`)
+        this.render()
+        const event = useEvent()
+        event.dispatch('init routers', [
+            {
+                path: '/',
+                dir: './console/pages',
+                component: 'page-dashboard',
+            },
+            {
+                path: '/system/user',
+                dir: './console/pages',
+                component: 'system-user'
+            },
+            {
+                path: '/system/role',
+                dir: './console/pages',
+                component: 'system-role'
+            },
+            {
+                path: '/system/menu',
+                dir: './console/pages',
+                component: 'system-menu'
+            },
+        ])
+    }
+
+    toggleMenu() {
+        const container = this.firstElementChild
+        container.classList.toggle('collapsed')
+    }
+
+    navigate(e) {
+        location.hash = '#' + e.target.dataset.path
+    }
+
+    onToggle(e) {
+        if (e.target.open) {
+            this.querySelectorAll('details').forEach(details => {
+                if (details !== e.target && details.open) {
+                    details.open = false
+                }
+            })
+        }
+    }
+
+    onInput(event) {
+        const keyword = event.target.value.toLowerCase().trim()
+
+        // Helper to handle visibility
+        const setVisible = (el, visible) => {
+            if (visible) el.style.removeProperty('display')
+            else el.style.display = 'none'
+        }
+
+        // Loop through all top-level list items
+        const topItems = this.querySelectorAll('ul.space-y-2 > li')
+
+        topItems.forEach(item => {
+            const details = item.querySelector('details')
+
+            if (details) {
+                // It is a group
+                const groupTitle = details.querySelector('.menu-text')?.textContent?.toLowerCase().trim() || ''
+                const childItems = details.querySelectorAll('ul > li')
+                let hasVisibleChild = false
+
+                // Check if group title matches
+                const groupMatches = groupTitle.includes(keyword)
+
+                childItems.forEach(child => {
+                    const span = child.querySelector('span')
+                    const childTitle = span?.dataset.key?.toLowerCase() || span?.textContent?.toLowerCase().trim()
+                    const isMatch = childTitle?.includes(keyword)
+
+                    if (groupMatches || isMatch || !keyword) {
+                        setVisible(child, true)
+                        hasVisibleChild = true
+                    } else {
+                        setVisible(child, false)
+                    }
+                })
+
+                if (hasVisibleChild || groupMatches) {
+                    setVisible(item, true)
+                    // Expand if searching and matches found
+                    if (keyword) details.open = true
+                } else {
+                    setVisible(item, false)
+                }
+            } else {
+                // It is a single leaf item
+                const span = item.querySelector('span[data-path]')
+                const title = span?.querySelector('.menu-text')?.textContent?.toLowerCase().trim() || ''
+
+                if (title.includes(keyword) || !keyword) {
+                    setVisible(item, true)
+                } else {
+                    setVisible(item, false)
+                }
+            }
+        })
+    }
+
+    render() {
+        this.innerHTML = ''
+        this.appendChild(this.template.create(this))
+    }
+}

package/console/index.html

@@ -0,0 +1,50 @@
+<!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">
+    <layout-container>
+        <layout-header slot="header"></layout-header>
+        <layout-menu slot="menu"></layout-menu>
+        <router-view dir="../../comm" slot="main"></router-view>
+    </layout-container>
+</body>
+
+</html>

package/console/pages/page-dashboard.mjs

@@ -0,0 +1,15 @@
+
+export const shadowRoot = `
+<div class="p-6">
+    <div class="h-64 rounded-3xl bg-white/60 dark:bg-gray-800/60 backdrop-blur-3xl border border-white/40 dark:border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.1)] flex items-center justify-center">
+        <div class="text-center">
+            <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 mb-4">Liquid Glass UI</h1>
+            <p class="text-gray-600 dark:text-gray-300">Welcome to the new console experience.</p>
+        </div>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+
+}