@k3000/ce 0.1.0 → 0.2.1

package/README.md

@@ -16,12 +16,20 @@
 
 ## 🚀 快速上手
 
-### 1. 项目引入
+### 1. 全局安装
+```
+.\> npm i @k3000/ce -g #全局安装使用ce命令
+.\> cd demo #进入需要的目录
+.\demo> ce copy #复制核心框架文件可以带参数，ce copy dist.js，将ce.mjs复制到当前目录，并改名为：dist.js
+.\demo> ce demo #复制使用示例一共三个目录和一个数据文件：/app、/comm、/console、/info.json
+```
+
+### 2. 项目引入
 在 `index.html` 中通过 Script 标签引入核心框架：
 
 ```html
 <script type="module">
-    import { config } from '../index.mjs'
+    import { config } from '../ce.mjs'
 
     config({
         dir: './console/components',
@@ -30,15 +38,13 @@
 </script>
 ```
 
-### 2. 定义组件
+### 3. 定义组件
 每个组件为一个独立的 `.mjs` 文件。
 
 **示例: `my-counter.mjs`**
 
-**更多示例参照: `/app`,`/console`**
-
 ```javascript
-import { useWatch } from "../../index.mjs";
+import { useWatch } from "../../ce.mjs";
 
 // 1. 定义 HTML 结构 (支持插值 {{ }})
 export const innerHTML = `

package/app/comp/comp-test.mjs

@@ -1,4 +1,4 @@
-import {useAttr, useRef} from "../../index.mjs";
+import {useAttr, useRef} from "../../ce.mjs";
 
 export const shadowRoot = `
 <label>

package/app/comp/nav-bar.mjs

@@ -1,4 +1,4 @@
-import {useEvent} from "../../index.mjs";
+import {useEvent} from "../../ce.mjs";
 
 export const shadowRoot = `
 <style>

package/app/comp/page-container.mjs

@@ -1,4 +1,4 @@
-import {useEvent} from "../../index.mjs";
+import {useEvent} from "../../ce.mjs";
 
 export const shadowRoot = `
 <style>

package/app/comp/tab-bar.mjs

@@ -1,4 +1,4 @@
-import {useEvent} from "../../index.mjs";
+import {useEvent} from "../../ce.mjs";
 
 export const shadowRoot = `
 <style>

package/app/index.html

@@ -6,7 +6,7 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>
     <title>demo</title>
     <script type="module">
-        import { config } from '../index.mjs'
+        import { config } from '../ce.mjs'
 
         config({
             dir: './app/comp',

package/bin.mjs

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+import {cpSync, existsSync, mkdirSync} from "node:fs";
+import {resolve, dirname} from "node:path";
+
+const [, , key, value] = process.argv
+
+const path = import.meta.url.substring(process.platform === 'win32' ? 8 : 7)
+
+const getDir = path => decodeURI(dirname(path));
+/**
+ * 将本目录下的文件或者文件夹复制到项目运行目录
+ * @param {string} source 自动加上'/'
+ * @param {string} destination
+ * @param {boolean} force
+ * @example
+ * myCopyFn('source', 'destination')
+ */
+const myCopyFn = (source, destination = source, force = false) => {
+
+    return cpSync( `${getDir(path)}/${source}`, destination, {recursive: true, force})
+}
+
+// console.log(`key: ${key}, value: ${value}, path: ${path}, getDir: ${getDir(path)}`);
+
+switch (key) {
+
+    case 'copy':
+
+        let target = value || 'ce.mjs'
+
+        if (!target.endsWith('.mjs') && !target.endsWith('.js')) {
+
+            target += '.js'
+        }
+
+        myCopyFn('index.mjs', target, true)
+
+        break
+
+    case 'demo':
+
+        myCopyFn('app', 'app', !!value)
+        myCopyFn('comm', 'comm', !!value)
+        myCopyFn('console', 'console', !!value)
+        myCopyFn('info.json', 'info.json', !!value)
+
+        break
+}

package/ce.mjs

@@ -0,0 +1 @@
+let dir="./comp",ext="mjs",getVariables=e=>{const t=e.match(/\{\{.+?}}/g);if(!t)return new Set;const o=new Set,n=new Set(["true","false","null","undefined","this","new","typeof","in","instanceof"]);return t.forEach((e=>{const t=e.slice(2,-2).match(/\b[a-zA-Z_$][\w$]*(?:\s*\.\s*[a-zA-Z_$][\w$]*)*(?!\s*\()/g);t&&t.forEach((e=>{n.has(e)||o.add(e)}))})),o},createTmpNode=(e="")=>document.createTextNode(""),literalsCode=e=>`with (scope) {\n\treturn \`${e.replace(/{{(.*?)}}/g,((e,t)=>`\${${t}}`))}\` \n}`,functionCode=e=>`with (scope) {\n\treturn ${e} \n}`,handleArray=(e,t)=>{const o=e.ownerElement;if(e.nodeMap||(e.nodeMap=[],e.mark=createTmpNode("数组结束标记"),o.parentNode.replaceChild(e.mark,o),e.ownerElement=o.cloneNode(!0)),!Array.isArray(t))return e;const n=e.mark.parentNode;let r=0;for(;r<t.length;r++)if(void 0!==e.nodeMap[r]){if(e.nodeMap[r][0]!==t[r]){const s=o.cloneNode(!0);try{t[r]._=e.scope}catch(e){}bindNode(t[r],s,!0),n.replaceChild(s,e.nodeMap[r][1]),e.nodeMap[r]=[t[r],s]}}else{const s=o.cloneNode(!0);try{t[r]._=e.scope}catch(e){}bindNode(t[r],s,!0),n.insertBefore(s,e.mark),e.nodeMap[r]=[t[r],s]}const s=r;for(;r<e.nodeMap.length;r++)n.removeChild(e.nodeMap[r][1]);return e.nodeMap.splice(s,e.nodeMap.length-s),e};export const config=e=>{e.dir&&(dir=e.dir),e.ext&&(ext=e.ext),"function"==typeof e.getVariables&&(getVariables=e.getVariables),"function"==typeof e.createTmpNode&&(createTmpNode=e.createTmpNode),"function"==typeof e.literalsCode&&(literalsCode=e.literalsCode),"function"==typeof e.functionCode&&(functionCode=e.functionCode),"function"==typeof e.handleArray&&(handleArray=e.handleArray)};const getCEName=e=>e.tagName.includes("-")?e.tagName.toLowerCase():e.hasAttribute("is")?e.getAttribute("is"):void 0;export const throttle=(e,t=41)=>{let o;return(...n)=>{clearTimeout(o),o=setTimeout((()=>e(...n)),t)}};const objectPool=new WeakMap,importPool=new WeakSet,addListener=(e,t,o)=>{getVariables(t).forEach((t=>{let n="",r=e,s=0,a=t.split(".");for([s,n]of a.entries()){if(s===a.length-1)break;if(null===r||"object"!=typeof r||!Reflect.has(r,n))return;if(Array.isArray(r[n])&&s===a.length-2)break;r=r[n]}if(null!==r&&"object"==typeof r&&(!Object.getOwnPropertyDescriptor(r,n)||Object.getOwnPropertyDescriptor(r,n).configurable))if(objectPool.has(r)){const e=objectPool.get(r);if(e.has(n))e.get(n).add(o);else{const t=new Set([o]);e.set(n,t);let s=r[n];Object.defineProperty(r,n,{get:()=>s,set:e=>{s!==e&&(s=e,t.forEach((e=>e())))}})}}else{const e=new Set([o]);objectPool.set(r,new Map([[n,e]]));let t=r[n];Object.defineProperty(r,n,{get:()=>t,set:o=>{t!==o&&(t=o,e.forEach((e=>e())))}})}}))},ceMap=Object.create(null),disposeCE=(e,t)=>{if(e.querySelectorAll("*:not(:defined)").forEach((e=>importCE(e))),ceMap[t].shadowRoot&&(e.attachShadow({mode:"open"}),e.shadowRoot.appendChild(ceMap[t].shadowRoot.create(e))),ceMap[t].innerHTML||ceMap[t].outerHTML){const o=(ceMap[t].innerHTML||ceMap[t].outerHTML).create(e);if(!ceMap[t].shadowRoot){const t=Array.from(o.querySelectorAll("slot")),n=t.reduce(((e,t)=>(e[t.getAttribute("name")||""]=t,e)),{}),r=Array.from(e.childNodes);for(const e of r){const t="function"==typeof e.getAttribute&&e.getAttribute("slot")||"";n[t]&&n[t].parentNode.insertBefore(e,n[t])}for(const e of t)e.parentNode.removeChild(e)}if(ceMap[t].outerHTML){for(;o.firstChild;)e.parentElement.insertBefore(o.firstChild,e);e.parentElement.removeChild(e)}else e.appendChild(o)}"function"==typeof e.ready&&e.ready()};let tmp=null;const importCE=(e,t=void 0)=>{if(t=t??getCEName(e),importPool.has(e))return;if(importPool.add(e),void 0!==customElements.get(t))return void disposeCE(e,t);const o=e.nodeName.includes("-");let n=dir;if(e.attributes.dir&&e.attributes.dir.nodeValue){const t=e.attributes.dir.nodeValue;e.removeAttribute("dir"),n=t.startsWith("/")||t.startsWith("./")?t:`${n}/${t}`}import(`${n}/${t}.${ext}`).then((n=>{void 0===customElements.get(t)&&(ceMap[t]=Object.create(null),"string"==typeof n.innerHTML&&(ceMap[t].innerHTML=bind(n.innerHTML)),"string"==typeof n.outerHTML&&(ceMap[t].outerHTML=bind(n.outerHTML)),"string"==typeof n.shadowRoot&&(ceMap[t].shadowRoot=bind(n.shadowRoot)),o?customElements.define(t,n.default):customElements.define(t,n.default,{extends:e.nodeName.toLowerCase()})),disposeCE(e,t)})).catch((e=>{console.error(e)}))},disposeNode=(e,t)=>{const o=t.nodeValue;if(null===o.match(/{{(.*?)}}/))return;const n=new Function("scope",literalsCode(o));addListener(e,o,throttle((()=>t.nodeValue=n.call(t,e)))),t.nodeValue=n.call(t,e)},disposeAttrValue=(e,t,o,n)=>{if(!n.startsWith("{{")||!n.endsWith("}}")||n.slice(2).includes("{{")){const r=new Function("scope",literalsCode(n));return()=>o.nodeValue=r.call(t,e)}const r=new Function("scope",functionCode(n.slice(2,-2)));return()=>{const n=r.call(t,e);switch(n){case!0:o.nodeValue="",t.attributes.setNamedItem(o);break;case!1:t.removeAttribute(o.nodeName);break;default:o.nodeValue=n,t.attributes.setNamedItem(o)}}},disposeSpecialAttr=(e,t,o,n)=>{const r=t.ownerElement;let s=t.nodeName;if(s.startsWith("on")){if(r.removeAttribute(s),!o.includes("(")){const t=o.split(".");let n="",a=e,i=0;for([i,n]of t.entries()){if(i===t.length-1)break;if(null===a||"object"!=typeof a||!Reflect.has(a,n)){a={};break}a=a[n]}if("function"==typeof a[n])return r[s]=e=>a[n](e),!0}const t=new Function("scope","event",functionCode(o));return r[s]=o=>t.call(r,e,o),!0}if("connect"===s){r.removeAttribute(s);const n=new Function("scope",functionCode(o)),a=createTmpNode("节点断开重连的标记"),i=()=>{n(e)?a.parentNode?.replaceChild(r,a):r.parentNode?.replaceChild(a,r)};return addListener(e,t.nodeValue,throttle((()=>i()))),i(),!0}if("each"===s){r.removeAttribute(s);let n={ownerElement:r,scope:e};if(Reflect.has(e,o)){const r=()=>n=handleArray(n,e[o]);return addListener(e,t.nodeValue,throttle((()=>r()))),r(),!0}const a=new Function("scope",functionCode(o));return handleArray(n,a(e)),!0}if(n){r.removeAttribute(s);const n=new Function("scope",functionCode(o));s.includes("-")&&(s=s.split("-").map(((e,t)=>e&&t?e[0].toUpperCase()+e.slice(1):e)).join(""));const a=()=>{const t=n(e);r[s]="function"==typeof t?t.bind(e):t};return addListener(e,t.nodeValue,throttle((()=>a()))),a(),!0}return!1},disposeAttr=(e,t,o)=>{const n=t.nodeValue;if(null===n.match(/{{(.*?)}}/))return;if(n.startsWith("{{")&&n.endsWith("}}")&&disposeSpecialAttr(e,t,n.slice(2,-2),o))return;const r=disposeAttrValue(e,t.ownerElement,t,n);addListener(e,n,throttle((()=>r()))),r()};export const bindNode=(e,t,o)=>{const n=o?[t]:Array.from(t.childNodes);for(const o of n){if(o.attributes)for(const n of Array.from(o.attributes))if(disposeAttr(e,n,getCEName(o)),"each"===n.nodeName&&n.nodeValue.startsWith("{{")&&n.nodeValue.endsWith("}}"))return t;if(o.childNodes&&bindNode(e,o),3===o.nodeType&&null!==o.nodeValue&&disposeNode(e,o),1===o.nodeType){const e=getCEName(o);e&&importCE(o,e)}}return t};export const bind=e=>{const t=document.createElement("template");return t.innerHTML=e,{create:e=>bindNode(e,document.importNode(t.content,!0))}};const style=document.createElement("style");style.innerHTML="\n*:not(:defined) {\n    display: none\n}\n",document.head.appendChild(style),addEventListener("DOMContentLoaded",(()=>document.querySelectorAll("*:not(:defined)").forEach((e=>importCE(e)))));class EventBus{value=void 0;targets=new Map;add(e,t=Object.create(null)){this.targets.set(e,t),t.preValue&&void 0!==this.value&&e(...this.value)}remove(e){this.targets.delete(e)}dispatch(...e){return this.value=e,Promise.allSettled(this.targets.entries().map((([t,{once:o}])=>(o&&this.targets.delete(t),t(...e)))))}}const eventBusObj=Object.create(null),eventBus=Object.defineProperties(Object.create(null),{add:{value:(e,t,o)=>{Reflect.has(eventBusObj,e)||(eventBusObj[e]=new EventBus),eventBusObj[e].add(t,o)}},remove:{value:(e,t)=>{Reflect.has(eventBusObj,e)&&eventBusObj[e].remove(t)}},dispatch:{value:(e,...t)=>(Reflect.has(eventBusObj,e)||(eventBusObj[e]=new EventBus),eventBusObj[e].dispatch(...t))}});export const useEvent=()=>eventBus;export const useRef=e=>{const t=Object.create(null);for(const o of e.querySelectorAll("[ref]"))t[o.attributes.ref.nodeValue]=o;return t};export const useAttr=e=>{const t=Object.create(null);for(const o of e.attributes)o.nodeName.includes("-")&&(t[o.nodeName.split("-").map(((e,t)=>e&&t?e[0].toUpperCase()+e.slice(1):e)).join("")]=o.nodeValue),t[o.nodeName]=o.nodeValue;return t};export const useWatch=e=>(t,o=!1)=>{for(const[n,r]of Object.entries(t)){if("function"!=typeof r)continue;let t=e[n];Object.defineProperty(e,n,{get:()=>t,set:e=>{if(!1!==r(e,t))return t=e}}),o&&r(t,t)}};

package/comm/router-view.mjs

@@ -1,4 +1,4 @@
-import {bindNode, useEvent} from "../index.mjs";
+import {bindNode, useEvent} from "../ce.mjs";
 
 export default class RouterView extends HTMLElement {
 

package/console/components/common-action-button.mjs

@@ -1,4 +1,4 @@
-import {useAttr, useRef} from "../../index.mjs";
+import {useAttr, useRef} from "../../ce.mjs";
 
 export const innerHTML = `
 <button data-action="{{action}}" data-id="{{id}}" class="p-2 text-gray-400 {{typeClass}} rounded-lg transition-colors" title="{{title}}">

package/console/components/common-header.mjs

@@ -1,4 +1,4 @@
-import {useAttr} from "../../index.mjs";
+import {useAttr} from "../../ce.mjs";
 
 export const innerHTML = `
 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">

package/console/components/common-input.mjs

@@ -1,4 +1,4 @@
-import { useAttr, useWatch } from "../../index.mjs";
+import { useAttr, useWatch } from "../../ce.mjs";
 
 export const innerHTML = `
 <div class="space-y-1.5">

package/console/components/common-modal.mjs

@@ -1,4 +1,4 @@
-import { useAttr } from "../../index.mjs";
+import { useAttr } from "../../ce.mjs";
 
 export const innerHTML = `
 <style>

package/console/components/common-pagination.mjs

@@ -1,4 +1,4 @@
-import {throttle, useWatch} from "../../index.mjs";
+import {throttle, useWatch} from "../../ce.mjs";
 
 export const innerHTML = `
 <div class="px-6 py-4 border-t border-white/20 dark:border-white/5 bg-white/30 dark:bg-white/5 backdrop-blur-md flex items-center justify-between">

package/console/components/common-toolbar.mjs

@@ -1,4 +1,4 @@
-import { useAttr } from "../../index.mjs";
+import { useAttr } from "../../ce.mjs";
 
 export const outerHTML = `
 <div class="relative group">

package/console/components/div-test.mjs

@@ -0,0 +1,11 @@
+export const innerHTML = `
+<g-popup qwe="{{true}}">
+    <div>123123</div>
+</g-popup>
+`
+
+export default class extends HTMLElement {
+    test() {
+        console.log('test')
+    }
+}

package/console/components/g-button.mjs

@@ -0,0 +1,79 @@
+import { useAttr, bind, useRef } from "../../ce.mjs";
+
+export const innerHTML = `
+<button disabled="{{!!(isDisabled || loading)}}" class="cursor-pointer relative inline-flex items-center justify-center {{sizeClass}} rounded-full backdrop-blur-2xl border shadow-[inset_0_1px_1px_rgba(255,255,255,0.8),0_4px_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.1),0_4px_12px_rgba(0,0,0,0.2)] font-medium transition-all {{(isDisabled || loading) ? 'opacity-50 cursor-not-allowed' : 'hover:-translate-y-0.5 active:translate-y-0 active:shadow-inner group'}} overflow-hidden {{typeClass}} {{classStr}}">
+    <!-- Highlight overlay for glass effect -->
+    <div class="absolute inset-0 rounded-full bg-gradient-to-b from-white/40 to-transparent dark:from-white/5 opacity-0 {{(isDisabled || loading) ? '' : 'group-hover:opacity-100'}} transition-opacity pointer-events-none"></div>
+    <div class="relative z-10 flex items-center justify-center gap-2">
+        <svg class="animate-spin h-4 w-4 text-current {{loading ? '' : 'hidden'}}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <slot name="prefix"></slot>
+        <slot name="icon"></slot>
+        <div connect="{{loading && loadingText}}" style="display: contents">{{loadingText}}</div>
+        <div style="display: {{loading && loadingText ? 'none' : 'contents'}}">
+            <g-icon connect="{{icon && !isIconUrl}}" name="{{icon}}" class="w-4 h-4"></g-icon>
+            <img connect="{{isIconUrl}}" src="{{isIconUrl ? icon : false}}" class="w-4 h-4" />
+            <slot></slot>
+        </div>
+        <slot name="suffix"></slot>
+    </div>
+</button>
+`
+
+const typeStyles = {
+    default: 'bg-white/40 dark:bg-gray-800/40 border-white/60 dark:border-white/10 text-gray-800 dark:text-gray-100 hover:bg-white/60 dark:hover:bg-gray-700/60',
+    primary: 'bg-blue-500/10 dark:bg-blue-500/20 border-blue-500/20 dark:border-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-500/20 dark:hover:bg-blue-500/30',
+    success: 'bg-green-500/10 dark:bg-green-500/20 border-green-500/20 dark:border-green-500/10 text-green-600 dark:text-green-400 hover:bg-green-500/20 dark:hover:bg-green-500/30',
+    warning: 'bg-orange-500/10 dark:bg-orange-500/20 border-orange-500/20 dark:border-orange-500/10 text-orange-600 dark:text-orange-400 hover:bg-orange-500/20 dark:hover:bg-orange-500/30',
+    danger: 'bg-red-500/10 dark:bg-red-500/20 border-red-500/20 dark:border-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 dark:hover:bg-red-500/30'
+}
+
+const plainTypeStyles = {
+    default: 'bg-transparent border-white/60 dark:border-white/10 text-gray-800 dark:text-gray-100 hover:bg-white/10 dark:hover:bg-gray-700/20',
+    primary: 'bg-transparent border-blue-500/20 dark:border-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-500/10 dark:hover:bg-blue-500/20',
+    success: 'bg-transparent border-green-500/20 dark:border-green-500/10 text-green-600 dark:text-green-400 hover:bg-green-500/10 dark:hover:bg-green-500/20',
+    warning: 'bg-transparent border-orange-500/20 dark:border-orange-500/10 text-orange-600 dark:text-orange-400 hover:bg-orange-500/10 dark:hover:bg-orange-500/20',
+    danger: 'bg-transparent border-red-500/20 dark:border-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/10 dark:hover:bg-red-500/20'
+}
+
+const sizeStyles = {
+    large: 'px-6 py-2.5 text-base',
+    normal: 'px-4 py-2 text-sm',
+    small: 'px-3 py-1.5 text-xs',
+    mini: 'px-2.5 py-1 text-[11px]'
+}
+
+export default class extends HTMLElement {
+    text = ''
+    icon = ''
+    isIconUrl = false
+    classStr = ''
+    typeClass = ''
+    sizeClass = ''
+    isDisabled = false
+    loadingText = ''
+
+    constructor() {
+        super()
+        this.style.display = 'inline-block'
+        const attr = useAttr(this)
+        this.text = attr.text || ''
+        this.icon = attr.icon || ''
+        this.isIconUrl = this.icon.startsWith('http') || this.icon.startsWith('/') || this.icon.startsWith('data:')
+        this.classStr = attr.class || ''
+        this.isDisabled = attr.disabled !== undefined && attr.disabled !== 'false'
+        this.loadingText = attr.loadingText || ''
+
+        const type = attr.type || 'default'
+        const isPlain = attr.plain !== undefined && attr.plain !== 'false'
+        const size = attr.size || 'normal'
+
+        this.typeClass = isPlain
+            ? (plainTypeStyles[type] || plainTypeStyles.default)
+            : (typeStyles[type] || typeStyles.default)
+
+        this.sizeClass = sizeStyles[size] || sizeStyles.normal
+    }
+}

package/console/components/g-cell.mjs

@@ -0,0 +1,129 @@
+import { useAttr, bind, useRef } from "../../ce.mjs";
+
+export const innerHTML = `
+<!-- Main Cell Container -->
+<div class="group relative flex items-center justify-between p-4 bg-white/40 dark:bg-gray-800/40 backdrop-blur-2xl border-b border-white/60 dark:border-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.8),0_4px_12px_rgba(0,0,0,0.02)] dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.1),0_4px_12px_rgba(0,0,0,0.1)] transition-all hover:bg-white/60 dark:hover:bg-gray-700/60 {{clickable ? 'cursor-pointer active:bg-white/30 dark:active:bg-gray-800/80 active:translate-y-[1px]' : ''}} {{classStr}}">
+    <!-- Highlight overlay for glass effect on hover -->
+    <div class="absolute inset-0 bg-gradient-to-b from-white/40 to-transparent dark:from-white/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none {{isLast ? 'rounded-b-2xl' : ''}} {{isFirst ? 'rounded-t-2xl' : ''}}"></div>
+    
+    <!-- Left Section: Icon + Title + Label -->
+    <div class="relative z-10 flex items-center gap-3 flex-1 min-w-0">
+        <!-- Icon Slot -->
+        <div class="flex-shrink-0 text-gray-500 dark:text-gray-400 {{icon ? '' : 'hidden'}}">
+            <span ref="iconMark"></span>
+        </div>
+        
+        <!-- Text Content -->
+        <div class="flex flex-col flex-1 min-w-0">
+            <div class="text-[15px] font-medium text-gray-800 dark:text-gray-100 truncate">{{title}}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5 {{label ? '' : 'hidden'}}">{{label}}</div>
+        </div>
+    </div>
+
+    <!-- Right Section: Value + Arrow Slot -->
+    <div class="relative z-10 flex items-center gap-2 pl-4 flex-shrink-0">
+        <!-- Value Content -->
+        <div class="text-[14px] text-gray-500 dark:text-gray-400 text-right">{{value}}</div>
+        
+        <!-- Arrow / Right Icon Slot -->
+        <div class="flex-shrink-0 text-gray-400 dark:text-gray-500 {{showArrow ? '' : 'hidden'}}">
+            <span ref="arrowMark"></span>
+        </div>
+        
+        <slot name="right-icon"></slot>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    title = ''
+    value = ''
+    label = ''
+    icon = ''
+    isIconUrl = false
+    arrowDirection = ''
+    showArrow = false
+    clickable = false
+    isClickableHover = false
+    classStr = ''
+
+    // For grouped rounded corners if we support cell-group later
+    isFirst = false
+    isLast = false
+
+    constructor() {
+        super()
+        this.style.display = 'block'
+        const attr = useAttr(this)
+
+        this.title = attr.title || ''
+        this.value = attr.value || ''
+        this.label = attr.label || ''
+
+        this.icon = attr.icon || ''
+        this.isIconUrl = this.icon.startsWith('http') || this.icon.startsWith('/') || this.icon.startsWith('data:')
+
+        // Arrow direction: 'right', 'down', 'up', 'left'. Default is empty (no arrow)
+        // If is-link is present, implicitly show right arrow unless specified
+        const isLink = attr['is-link'] !== undefined && attr['is-link'] !== 'false'
+        this.arrowDirection = attr['arrow-direction'] || (isLink ? 'right' : '')
+        this.showArrow = !!this.arrowDirection
+
+        // Clickable implies hover effect and pointer cursor
+        this.clickable = this.showArrow || (attr.clickable !== undefined && attr.clickable !== 'false')
+
+        this.classStr = attr.class || ''
+
+        // Helper classes for borderline and border-radius rounding (handled externally via cell-group usually, but allowing override)
+        this.isFirst = attr['round-top'] !== undefined && attr['round-top'] !== 'false'
+        this.isLast = attr['border'] === 'false' || (attr['round-bottom'] !== undefined && attr['round-bottom'] !== 'false')
+
+        // Adjust border logic
+        if (this.isLast || attr.border === 'false') {
+            this.classStr = this.classStr.replace('border-b', '') + ' border-transparent'
+        }
+        if (this.isFirst) {
+            this.classStr += ' rounded-t-2xl'
+        }
+        if (this.isLast) {
+            this.classStr += ' rounded-b-2xl'
+        }
+        if (!this.isFirst && !this.isLast && attr.round === 'true') {
+            this.classStr += ' rounded-2xl border-transparent'
+            this.isFirst = true
+            this.isLast = true
+        }
+    }
+
+    ready() {
+        const { iconMark, arrowMark } = useRef(this)
+
+        // Handle Left Icon
+        if (this.icon) {
+            const iconHtml = this.isIconUrl
+                ? `<img src="${this.icon}" class="w-5 h-5" />`
+                : `<g-icon name="${this.icon}" class="w-5 h-5"></g-icon>`
+            const iconNode = bind(iconHtml).create(this)
+            iconMark.parentElement.insertBefore(iconNode, iconMark)
+        }
+        iconMark.parentElement.removeChild(iconMark)
+
+        // Handle Right Arrow
+        if (this.showArrow) {
+            // Map direction to standard icons if we had them or just use svg path directly
+            // M9 5l7 7-7 7 (right)
+            // M19 9l-7 7-7-7 (down)
+            // M5 15l7-7 7 7 (up)
+            // M15 19l-7-7 7-7 (left)
+            let pathD = 'M9 5l7 7-7 7' // default right
+            if (this.arrowDirection === 'down') pathD = 'M19 9l-7 7-7-7'
+            else if (this.arrowDirection === 'up') pathD = 'M5 15l7-7 7 7'
+            else if (this.arrowDirection === 'left') pathD = 'M15 19l-7-7 7-7'
+
+            const arrowHtml = `<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="${pathD}"></path></svg>`
+            const arrowNode = bind(arrowHtml).create(this)
+            arrowMark.parentElement.insertBefore(arrowNode, arrowMark)
+        }
+        arrowMark.parentElement.removeChild(arrowMark)
+    }
+}

package/console/components/g-col.mjs

@@ -0,0 +1,38 @@
+import { useAttr } from "../../ce.mjs";
+
+export default class extends HTMLElement {
+    constructor() {
+        super()
+        this.style.display = 'block'
+        this.style.boxSizing = 'border-box'
+
+        const attr = useAttr(this)
+
+        const span = attr.span ? Number(attr.span) : 24
+        const offset = attr.offset ? Number(attr.offset) : 0
+        const classStr = attr.class || ''
+
+        // Convert span 1-24 to basis/% widths directly on host element
+        if (span) {
+            const percentage = (span / 24) * 100
+            this.style.width = `${percentage}%`
+            this.style.flex = `0 0 ${percentage}%`
+            this.style.maxWidth = `${percentage}%`
+        } else {
+            this.style.width = '0'
+            this.style.flex = '0 0 0'
+            this.style.maxWidth = '0'
+            this.style.overflow = 'hidden'
+        }
+
+        // Convert offset 1-24 to margin-left natively
+        if (offset) {
+            const offsetPerc = (offset / 24) * 100
+            this.style.marginLeft = `${offsetPerc}%`
+        }
+
+        if (classStr) {
+            this.className = this.className ? this.className + ' ' + classStr : classStr
+        }
+    }
+}

package/console/components/g-field.mjs

@@ -0,0 +1,162 @@
+import { useAttr, useWatch } from "../../ce.mjs";
+
+export const innerHTML = `
+<div class="flex items-center w-full min-h-[44px] px-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-2xl rounded-xl border border-gray-200 dark:border-gray-700 transition-all duration-300 {{focusClass}} {{disabledClass}} {{readonlyClass}}">
+    <!-- Prefix Icon Option (e.g. search icon) -->
+    <div class="mr-2 text-gray-400 dark:text-gray-500 flex items-center justify-center {{leftIcon ? '' : 'hidden'}}">
+        <g-icon name="{{leftIcon}}" class="w-4 h-4"></g-icon>
+    </div>
+
+    <!-- Label Option -->
+    <div class="mr-4 text-sm whitespace-nowrap text-gray-700 dark:text-gray-300 font-medium select-none {{label ? '' : 'hidden'}}">
+        {{label}}
+    </div>
+
+    <!-- Input Area -->
+    <div class="flex-1 relative flex items-center h-full">
+        <input 
+            type="{{type}}" 
+            class="w-full h-full bg-transparent border-none outline-none text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 {{disabled || readonly ? 'cursor-not-allowed text-gray-500 dark:text-gray-400' : ''}}"
+            placeholder="{{placeholder}}"
+            value="{{value}}"
+            {{disabled ? 'disabled' : ''}}
+            {{readonly ? 'readonly' : ''}}
+            oninput="{{handleInput}}"
+            onfocus="{{handleFocus}}"
+            onblur="{{handleBlur}}"
+            onchange="{{handleChange}}"
+            onkeydown="{{handleKeyDown}}"
+        />
+        
+        <!-- Clear Icon -->
+        <div class="ml-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer transition-colors flex items-center justify-center {{clearable && value && !disabled && !readonly ? '' : 'hidden'}}" onclick="{{clear}}">
+            <g-icon name="close" class="w-4 h-4 bg-gray-200/50 dark:bg-gray-700/50 rounded-full p-0.5 hover:bg-gray-300 dark:hover:bg-gray-600"></g-icon>
+        </div>
+
+        <!-- Right Icon Option -->
+        <div class="ml-2 text-gray-400 dark:text-gray-500 flex items-center justify-center cursor-pointer {{rightIcon ? '' : 'hidden'}}" onclick="{{onRightIconClick}}">
+            <g-icon name="{{rightIcon}}" class="w-4 h-4"></g-icon>
+        </div>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    value = ''
+    type = 'text'
+    placeholder = '请输入内容'
+    label = ''
+    leftIcon = ''
+    rightIcon = ''
+
+    // Using string boolean values from attributes
+    disabled = false
+    readonly = false
+    clearable = false
+
+    focusClass = 'hover:border-gray-300 dark:hover:border-gray-600'
+    disabledClass = ''
+    readonlyClass = ''
+    form = null
+    name = ''
+
+    constructor() {
+        super()
+        this.style.display = 'block'
+        this.style.width = '100%'
+
+        const attr = useAttr(this)
+
+        this.value = attr.value || ''
+        this.type = attr.type || 'text'
+        this.placeholder = attr.placeholder || '请输入内容'
+        this.label = attr.label || ''
+        this.leftIcon = attr['left-icon'] || ''
+        this.rightIcon = attr['right-icon'] || ''
+        this.name = this.name || attr.name || ''
+
+        this.disabled = attr.disabled === 'true' || attr.disabled === ''
+        this.readonly = attr.readonly === 'true' || attr.readonly === ''
+        this.clearable = attr.clearable === 'true' || attr.clearable === ''
+
+        this._updateClasses()
+
+        const watch = useWatch(this)
+        // Ensure changing disabled/readonly state dynamically also acts
+        watch({
+            disabled: () => this._updateClasses(),
+            readonly: () => this._updateClasses()
+        })
+
+        this.form = this.closest('g-form')
+
+        this.updateFormValue()
+    }
+
+    updateFormValue() {
+
+        if (this.form && this.name) {
+
+            this.form.data[this.name] = this.value
+        }
+    }
+
+    _updateClasses() {
+        if (this.disabled) {
+            this.disabledClass = 'opacity-60 bg-gray-50 dark:bg-gray-900/40 border-gray-100 dark:border-gray-800'
+            this.focusClass = ''
+        } else if (this.readonly) {
+            this.readonlyClass = 'bg-gray-50 dark:bg-gray-900/40'
+            this.focusClass = ''
+        } else {
+            this.disabledClass = ''
+            this.readonlyClass = ''
+            this.focusClass = 'hover:border-gray-300 dark:hover:border-gray-600 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20 dark:focus-within:border-blue-400'
+        }
+        if (this.update) this.update()
+    }
+
+    handleInput(e) {
+        this.value = e.target.value
+        if (this.update) this.update()
+        if (this.oninput) this.oninput(e)
+        this.updateFormValue()
+    }
+
+    handleChange(e) {
+        if (this.onchange) this.onchange(e)
+    }
+
+    handleFocus(e) {
+        if (this.onfocus) this.onfocus(e)
+    }
+
+    handleBlur(e) {
+        // Small delay so clear button click can register before focus is lost entirely if we base logic on focus
+        if (this.onblur) this.onblur(e)
+    }
+
+    handleKeyDown(e) {
+        if (e.key === 'Enter' && this.onenter) {
+            this.onenter(e)
+        }
+    }
+
+    clear() {
+        if (this.disabled || this.readonly) return
+        this.value = ''
+        const input = this.querySelector('input')
+        if (input) {
+            input.value = ''
+            input.focus()
+            // Dispatch input event artificially for watchers
+            input.dispatchEvent(new Event('input', { bubbles: true }))
+        }
+        if (this.update) this.update()
+        if (this.onclear) this.onclear()
+    }
+
+    onRightIconClick(e) {
+        if (this.onrightclick) this.onrightclick(e)
+    }
+}

package/console/components/g-form.mjs

@@ -0,0 +1,11 @@
+
+export default class extends HTMLElement {
+
+    constructor() {
+
+        super()
+
+        this.data = this.data || {}
+        this.onsubmit = this.onsubmit || (() => 1)
+    }
+}