framework/apps/server/public/index.html at 56f68aff1fa69e0a0b36475c706a638e35fd975a · objectstack-ai/framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!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; }
        .badge-true { background: #e3fcef; color: #0d7f56; }
        .badge-false { 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.records || [];
            }
        };

        // 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' || typeof val === 'boolean') && val !== undefined) {
                            const badgeClass = `badge-${String(val).toLowerCase()}`;
                            cellContent = `<span class="badge ${badgeClass}">${val}</span>`;
                        } else if (fieldConfig.type === 'date' && val) {
                             cellContent = new Date(val).toLocaleDateString();
                        } else if (fieldConfig.type === 'rating') {
                             cellContent = '★'.repeat(Number(val)) + '☆'.repeat(3 - Number(val));
                        }

                        html += `<td>${cellContent}</td>`;
                    });
                    html += `</tr>`;
                });

                html += `</tbody></table>`;
                this.container.innerHTML = html;
            }
        }

        // 启动应用
        const ui = new ObjectUIRenderer('app');
        // 'Todo' 是 TodoApp 里的对象名 (注意大小写，SchemaRegistry 也许是敏感的，取决于 TodoApp 定义)
        // TodoApp 定义的是 'todo_task'
        ui.renderList('todo_task');

    </script>
</body>
</html>