cgi-web-quickstart/index.html at main · azzgo/cgi-web-quickstart · 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
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="CGI Quick Start - 轻量级POC和工具开发脚手架">
    <title>CGI Quick Start</title>
    <link rel="stylesheet" href="web/style.css">
</head>
<body>
    <div id="app">
        <!-- 头部 -->
        <header class="header">
            <div class="container">
                <h1 class="title">CGI Quick Start</h1>
                <p class="subtitle">轻量级POC和工具开发脚手架</p>
                <div class="controls">
                    <!-- 移除调试开关，简化界面 -->
                </div>
            </div>
        </header>

        <!-- 主要内容 -->
        <main class="main">
            <div class="container">

                <!-- 示例操作区域 -->
                <section id="example-section" class="section">
                    <h2>示例操作</h2>
                    <div class="form-group">
                        <label for="operation-select">选择操作:</label>
                        <select id="operation-select" class="form-control">
                            <option value="">请选择操作</option>
                        </select>
                    </div>

                    <!-- 动态输入字段容器 -->
                    <div id="params-container" class="params-container" style="display: none;">
                        <!-- 参数字段将在这里动态生成 -->
                    </div>

                    <!-- 保留原有的静态字段作为后备 -->
                    <div id="param1-div" class="form-group" style="display: none;">
                        <label for="param1-input">参数1:</label>
                        <input type="text" id="param1-input" class="form-control" placeholder="参数1">
                    </div>

                    <div class="form-group">
                        <button id="execute-btn" class="btn btn-primary">执行操作</button>
                    </div>
                </section>

                <!-- 结果显示区域 -->
                <section id="result-section" class="section">
                    <h2>执行结果</h2>
                    <div id="result-output" class="result-container">
                        <div class="placeholder">
                            选择操作并点击"执行操作"按钮查看结果
                        </div>
                    </div>
                </section>

            </div>
        </main>

        <!-- 状态栏 -->
        <footer id="status-bar" class="status-bar">
            <div class="container">
                <span id="status-text">正在初始化...</span>
                <div class="status-info">
                    <span>CGI Quick Start v1.0</span>
                </div>
            </div>
        </footer>
    </div>

    <!-- API 功能演示 -->
    <script>
    // 页面加载完成后的演示脚本
    document.addEventListener('DOMContentLoaded', function() {
        // 监听应用就绪事件
        window.addEventListener('app:ready', function() {
            console.log('CGI Quick Start 应用已就绪');

            // 显示使用提示（仅首次访问）
            if (!localStorage.getItem('demo-shown')) {
                setTimeout(() => {
                    alert('欢迎使用 CGI Quick Start!\n\n1. 选择一个示例操作\n2. 填写相应参数（如需要）\n3. 点击"执行操作"查看结果');
                    localStorage.setItem('demo-shown', 'true');
                }, 1000);
            }
        });

        // 操作选择改变时的处理
        const operationSelect = document.getElementById('operation-select');
        if (operationSelect) {
            operationSelect.addEventListener('change', function() {
                if (window.app && window.app.updateInputFields) {
                    window.app.updateInputFields();
                }
            });
        }
    });

    // 全局快捷键
    document.addEventListener('keydown', function(e) {
        // Ctrl + Enter 执行操作
        if (e.ctrlKey && e.key === 'Enter') {
            const executeBtn = document.getElementById('execute-btn');
            if (executeBtn && !executeBtn.disabled) {
                executeBtn.click();
            }
        }
    });
    </script>

    <!-- 加载应用脚本 -->
    <script src="web/api.js"></script>
    <script src="web/app.js"></script>
    <script src="web/operations.js"></script>
</body>
</html>