重构 ObjectQL 引擎以优化插件注册逻辑，添加 UI 协议 API，更新 DataEngine 启动流程，新增 ObjectUI 渲染器示例

hotlong · hotlong · commit 93f45a2712a4 · 2026-01-20T23:00:41.000+08:00
diff --git a/examples/client-lite/index.html b/examples/client-lite/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>ObjectUI Generic Renderer</title>
+    <style>
+        body { font-family: -apple-system, sans-serif; padding: 20px; background: #f4f6f8; }
+        .ui-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        h2 { margin-top: 0; }
+        table { width: 100%; border-collapse: collapse; margin-top: 15px; }
+        th, td { text-align: left; padding: 12px; border-bottom: 1px solid #eee; }
+        th { background: #fafafa; color: #666; font-weight: 600; }
+        .badge { padding: 4px 8px; border-radius: 12px; font-size: 12px; }
+        .badge-done { background: #e3fcef; color: #0d7f56; }
+        .badge-todo { background: #fff8c5; color: #9a6700; }
+    </style>
+</head>
+<body>
+
+    <div id="app" class="ui-card">
+        <div>Loading ObjectUI...</div>
+    </div>
+
+    <!-- 模拟 ObjectUI SDK -->
+    <script>
+        // 模拟 API Client (在真实场景中调用实际 Server 端口)
+        const mockApi = {
+            // 1. 获取对象的定义 (Schema)
+            getMeta: async (object) => {
+                // 模拟 Server 返回 (对应 DataEngine.getMetadata)
+                return {
+                    name: 'todo',
+                    label: 'Task Manager',
+                    fields: {
+                        title: { type: 'text', label: 'Task Name' },
+                        status: { type: 'select', label: 'Current Status', options: ['Todo', 'Done'] },
+                        priority: { type: 'number', label: 'Priority Level' }
+                    }
+                };
+            },
+            // 2. 获取视图配置 (View Protocol)
+            getView: async (object) => {
+                // 模拟 Server 返回 (对应 DataEngine.getView)
+                return {
+                    type: 'datagrid',
+                    columns: [
+                        { field: 'title', width: 200 },
+                        { field: 'status', widget: 'badge' }, 
+                        { field: 'priority' }
+                    ]
+                };
+            },
+            // 3. 获取数据
+            getData: async (object) => {
+                // 模拟 ObjectQL 查询结果
+                return [
+                    { id: 1, title: 'Refactor DataEngine', status: 'Done', priority: 1 },
+                    { id: 2, title: 'Implement ObjectUI', status: 'Todo', priority: 2 },
+                    { id: 3, title: 'Write Documentation', status: 'Todo', priority: 3 }
+                ];
+            }
+        };
+
+        // ObjectUI 核心渲染器
+        class ObjectUIRenderer {
+            constructor(containerId) {
+                this.container = document.getElementById(containerId);
+            }
+
+            async renderList(objectName) {
+                this.container.innerHTML = 'Fetching Protocol & Data...';
+
+                // 并行加载：元数据 + 视图定义 + 实际数据
+                const [meta, view, data] = await Promise.all([
+                    mockApi.getMeta(objectName),
+                    mockApi.getView(objectName),
+                    mockApi.getData(objectName)
+                ]);
+
+                // 渲染逻辑
+                let html = `<h2>${meta.label || objectName}</h2>`;
+                html += `<table><thead><tr>`;
+                
+                // 1. 动态生成表头 (根据 View Protocol)
+                view.columns.forEach(col => {
+                    // 如果 View 没通过 label，就去 Schema 里找
+                    const fieldConfig = meta.fields[col.field] || {};
+                    const label = col.label || fieldConfig.label || col.field;
+                    html += `<th>${label}</th>`;
+                });
+                html += `</tr></thead><tbody>`;
+
+                // 2. 动态生成数据行
+                data.forEach(row => {
+                    html += `<tr>`;
+                    view.columns.forEach(col => {
+                        const val = row[col.field];
+                        const fieldConfig = meta.fields[col.field] || {};
+                        
+                        // 3. 智能组件渲染 (Widget System)
+                        let cellContent = val;
+                        
+                        // 根据 Schema 类型或 View 组件进行特殊渲染
+                        if (col.widget === 'badge' || fieldConfig.type === 'select') {
+                            const badgeClass = `badge-${String(val).toLowerCase()}`;
+                            cellContent = `<span class="badge ${badgeClass}">${val}</span>`;
+                        }
+                        
+                        html += `<td>${cellContent}</td>`;
+                    });
+                    html += `</tr>`;
+                });
+
+                html += `</tbody></table>`;
+                this.container.innerHTML = html;
+            }
+        }
+
+        // 启动应用
+        const ui = new ObjectUIRenderer('app');
+        ui.renderList('todo'); // 只需要名字，剩下的全靠元数据驱动
+
+    </script>
+</body>
+</html>
diff --git a/examples/objectql/src/engine.ts b/examples/objectql/src/engine.ts
@@ -60,7 +60,9 @@ export class ObjectQL {
             ql: this,
             logger: console,
             // Expose the driver registry helper explicitly if needed
-            drivers: this, // Since `registerDriver` is on `this`, we can alias it or expose `this`
+            drivers: {
+                register: (driver: DriverInterface) => this.registerDriver(driver)
+            },
             ...this.hostContext
           };
           
diff --git a/examples/server/public/index.html b/examples/server/public/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>ObjectUI Generic Renderer</title>
+    <style>
+        body { font-family: -apple-system, sans-serif; padding: 20px; background: #f4f6f8; }
+        .ui-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        h2 { margin-top: 0; }
+        table { width: 100%; border-collapse: collapse; margin-top: 15px; }
+        th, td { text-align: left; padding: 12px; border-bottom: 1px solid #eee; }
+        th { background: #fafafa; color: #666; font-weight: 600; }
+        .badge { padding: 4px 8px; border-radius: 12px; font-size: 12px; }
+        .badge-done { background: #e3fcef; color: #0d7f56; }
+        .badge-todo { background: #fff8c5; color: #9a6700; }
+    </style>
+</head>
+<body>
+
+    <div id="app" class="ui-card">
+        <div>Loading ObjectUI...</div>
+    </div>
+
+    <!-- 模拟 ObjectUI SDK -->
+    <script>
+        // 真实 API Client
+        const mockApi = {
+            // 1. 获取对象的定义 (Schema)
+            getMeta: async (object) => {
+                const res = await fetch(`/api/v1/meta/object/${object}`);
+                return res.json();
+            },
+            // 2. 获取视图配置 (View Protocol)
+            getView: async (object) => {
+                const res = await fetch(`/api/v1/ui/view/${object}`);
+                return res.json();
+            },
+            // 3. 获取数据
+            getData: async (object) => {
+                const res = await fetch(`/api/v1/data/${object}`);
+                const json = await res.json();
+                return json.value || []; 
+            }
+        };
+
+        // ObjectUI 核心渲染器
+        class ObjectUIRenderer {
+            constructor(containerId) {
+                this.container = document.getElementById(containerId);
+            }
+
+            async renderList(objectName) {
+                this.container.innerHTML = 'Fetching Protocol & Data...';
+
+                // 并行加载：元数据 + 视图定义 + 实际数据
+                const [meta, view, data] = await Promise.all([
+                    mockApi.getMeta(objectName),
+                    mockApi.getView(objectName),
+                    mockApi.getData(objectName)
+                ]);
+
+                // 渲染逻辑
+                let html = `<h2>${meta.label || objectName}</h2>`;
+                html += `<table><thead><tr>`;
+                
+                // 1. 动态生成表头 (根据 View Protocol)
+                view.columns.forEach(col => {
+                    // 如果 View 没通过 label，就去 Schema 里找
+                    const fieldConfig = meta.fields[col.field] || {};
+                    const label = col.label || fieldConfig.label || col.field;
+                    html += `<th>${label}</th>`;
+                });
+                html += `</tr></thead><tbody>`;
+
+                // 2. 动态生成数据行
+                data.forEach(row => {
+                    html += `<tr>`;
+                    view.columns.forEach(col => {
+                        const val = row[col.field];
+                        const fieldConfig = meta.fields[col.field] || {};
+                        
+                        // 3. 智能组件渲染 (Widget System)
+                        let cellContent = val;
+                        
+                        // 根据 Schema 类型或 View 组件进行特殊渲染
+                        if ((col.widget === 'badge' || fieldConfig.type === 'select') && val) {
+                            const badgeClass = `badge-${String(val).toLowerCase()}`;
+                            cellContent = `<span class="badge ${badgeClass}">${val}</span>`;
+                        }
+                        
+                        html += `<td>${cellContent}</td>`;
+                    });
+                    html += `</tr>`;
+                });
+
+                html += `</tbody></table>`;
+                this.container.innerHTML = html;
+            }
+        }
+
+        // 启动应用
+        const ui = new ObjectUIRenderer('app');
+        // 'Todo' 是 TodoApp 里的对象名 (注意大小写，SchemaRegistry 也许是敏感的，取决于 TodoApp 定义)
+        // 假设 TodoApp 定义的是 'Todo'
+        ui.renderList('Todo'); 
+
+    </script>
+</body>
+</html>
diff --git a/examples/server/src/index.ts b/examples/server/src/index.ts
@@ -1,4 +1,5 @@
 import { serve } from '@hono/node-server';
+import { serveStatic } from '@hono/node-server/serve-static';
 import { Hono } from 'hono';
 import { logger } from 'hono/logger';
 import { cors } from 'hono/cors';
@@ -9,9 +10,6 @@ import { DataEngine } from './kernel/engine';
 const app = new Hono();
 const dataEngine = new DataEngine(); // Engine loads plugins internally now
 
-app.use('*', logger());
-app.use('*', cors());
-
 // 3. Define Unified Routes
 
 /**
@@ -104,6 +102,22 @@ app.get('/api/v1/meta/:type/:name', (c) => {
   return c.json(item);
 });
 
+/**
+ * UI Protocol API: Get View Definition
+ * GET /api/v1/ui/view/:object
+ */
+app.get('/api/v1/ui/view/:object', (c) => {
+  const objectName = c.req.param('object');
+  const type = (c.req.query('type') as 'list' | 'form') || 'list';
+  try {
+    const view = dataEngine.getView(objectName, type);
+    if (!view) return c.json({ error: 'View not generated' }, 404);
+    return c.json(view);
+  } catch (e: any) {
+    return c.json({ error: e.message }, 400);
+  }
+});
+
 /**
  * Data API: Find
  */
@@ -185,7 +199,8 @@ const port = 3004;
 
 (async () => {
   console.log('--- Starting ObjectStack Server ---');
-  // Plugin loading is now handled by DataEngine constructor/init
+  // Start Data Engine (Load Plugins -> Init Drivers -> Seed)
+  await dataEngine.start();
   
   console.log(`Server is running on http://localhost:${port}`);
 
diff --git a/examples/server/src/kernel/engine.ts b/examples/server/src/kernel/engine.ts
@@ -28,20 +28,26 @@ export class DataEngine {
   constructor() {
     // 1. Initialize Engine with Host Context (Simulated OS services)
     this.ql = new ObjectQL({
-        os: { registerService: () => console.log('OS Service Registered') },
+        os: { 
+          registerService: () => console.log('OS Service Registered'),
+          getConfig: async (key: string) => ({}) // Mock Config
+        },
         app: { router: { get: () => {} } }, 
         storage: { set: () => {} },
         services: { register: () => {} },
         i18n: {}
     });
+  }
 
+  async start() {
     // 2. Load Plugins (Declarative)
-    this.loadPlugins();
+    await this.loadPlugins();
 
     // 3. Start Engine
-    this.ql.init().then(() => {
-        this.seed();
-    }).catch(console.error);
+    await this.ql.init();
+    
+    // 4. Seed Data
+    await this.seed();
   }
 
   async loadPlugins() {
@@ -95,6 +101,30 @@ export class DataEngine {
     return this.ql.delete(objectName, id);
   }
 
+  // [New Methods for ObjectUI]
+  getMetadata(objectName: string) {
+    return this.ensureSchema(objectName);
+  }
+  
+  getView(objectName: string, viewType: 'list' | 'form' = 'list') {
+    const schema = this.ensureSchema(objectName);
+
+    // Auto-Scaffold Default View
+    if (viewType === 'list') {
+      return {
+        type: 'datagrid',
+        title: `${schema.label || objectName} List`,
+        columns: Object.keys(schema.fields || {}).map(key => ({
+            field: key,
+            label: schema.fields?.[key]?.label || key,
+            width: 150
+        })),
+        actions: ['create', 'edit', 'delete']
+      };
+    }
+    return null;
+  }
+
   private ensureSchema(name: string): ServiceObject {
     const schema = SchemaRegistry.getObject(name);
     if (!schema) throw new Error(`Unknown object: ${name}`);
