smartserver/test_decision_tree.html at server · janu17th/smartserver · 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>决策树可视化系统测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }

        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .test-result {
            margin: 10px 0;
            padding: 10px;
            background: #f0f0f0;
            border-radius: 3px;
        }

        .success {
            background: #d4edda;
            color: #155724;
        }

        .info {
            background: #d1ecf1;
            color: #0c5460;
        }

        .warning {
            background: #fff3cd;
            color: #856404;
        }

        code {
            background: #f8f9fa;
            padding: 2px 4px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }

        .code-block {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid #007bff;
            margin: 10px 0;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
        }
    </style>
</head>

<body>
    <h1>决策树可视化系统测试</h1>

    <div class="test-section">
        <h2>系统概述</h2>
        <p>这是一个基于 Vue 3 的决策树可视化系统，支持三种节点类型：</p>
        <ul>
            <li><strong>决策节点 (Decision Node)</strong>：用户可以选择不同分支的决策点</li>
            <li><strong>机会节点 (Chance Node)</strong>：表示随机事件，包含概率信息</li>
            <li><strong>结束节点 (Terminal Node)</strong>：决策树的叶子节点，包含收益值</li>
        </ul>
    </div>

    <div class="test-section">
        <h2>分支格式说明</h2>

        <h3>决策节点分支格式</h3>
        <div class="code-block">("low", 300, "competitor_bid") # (标签, 值, 目标节点名称)
            ("medium", 500, "competitor_bid")
            ("high", 700, "competitor_bid")
            ("no-bid", 0, "profit")</div>

        <h3>机会节点分支格式</h3>
        <div class="code-block">("low", 0.35, 400, "cost") # (标签, 概率, 值, 目标节点名称)
            ("medium", 0.50, 600, "cost")
            ("high", 0.15, 800, "cost")</div>
    </div>

    <div class="test-section">
        <h2>功能测试步骤</h2>
        <ol>
            <li><strong>启动应用</strong>：<code>npm run dev</code></li>
            <li><strong>创建节点</strong>：
                <ul>
                    <li>点击"添加节点"按钮</li>
                    <li>输入节点名称（如：bid, competitor_bid, cost, profit）</li>
                    <li>选择节点类型</li>
                </ul>
            </li>
            <li><strong>配置分支</strong>：
                <ul>
                    <li>双击节点进行编辑</li>
                    <li>添加分支信息</li>
                    <li>设置分支标签、值、概率（机会节点）</li>
                    <li>输入目标节点名称</li>
                </ul>
            </li>
            <li><strong>手动连接</strong>：
                <ul>
                    <li>点击"连接节点"按钮</li>
                    <li>选择源节点和目标节点</li>
                    <li>设置连接标签、分支值、概率</li>
                </ul>
            </li>
            <li><strong>编辑连接</strong>：
                <ul>
                    <li>在连接列表中点击"编辑"按钮</li>
                    <li>修改连接属性</li>
                    <li>保存修改</li>
                </ul>
            </li>
            <li><strong>导出/导入</strong>：
                <ul>
                    <li>测试导出功能</li>
                    <li>测试导入功能</li>
                </ul>
            </li>
        </ol>
    </div>

    <div class="test-section">
        <h2>预期功能</h2>
        <div class="test-result success">
            ✅ 支持三种节点类型：决策节点、机会节点、结束节点
        </div>
        <div class="test-result success">
            ✅ 决策节点支持最大化/最小化设置
        </div>
        <div class="test-result success">
            ✅ 机会节点支持概率和值的设置
        </div>
        <div class="test-result success">
            ✅ 结束节点支持收益值设置
        </div>
        <div class="test-result success">
            ✅ 支持分支格式：决策节点 (标签, 值, 目标节点)，机会节点 (标签, 概率, 值, 目标节点)
        </div>
        <div class="test-result success">
            ✅ 可视化功能：拖拽节点、双击编辑、实时连接线
        </div>
        <div class="test-result success">
            ✅ 数据管理：导出/导入 JSON 格式
        </div>
        <div class="test-result success">
            ✅ 连接管理：手动连接、编辑连接、删除连接
        </div>
    </div>

    <div class="test-section">
        <h2>示例决策树</h2>
        <div class="test-result info">
            <strong>示例结构：</strong>
            <ul>
                <li><strong>bid</strong> (决策节点) → competitor_bid</li>
                <li><strong>competitor_bid</strong> (机会节点) → cost</li>
                <li><strong>cost</strong> (机会节点) → profit</li>
                <li><strong>profit</strong> (结束节点)</li>
            </ul>
        </div>

        <h3>分支配置示例</h3>
        <div class="code-block"># bid 节点分支
            ("low", 300, "competitor_bid")
            ("medium", 500, "competitor_bid")
            ("high", 700, "competitor_bid")
            ("no-bid", 0, "profit")

            # competitor_bid 节点分支
            ("low", 0.35, 400, "cost")
            ("medium", 0.50, 600, "cost")
            ("high", 0.15, 800, "cost")

            # cost 节点分支
            ("low", 0.25, 200, "profit")
            ("medium", 0.50, 400, "profit")
            ("high", 0.25, 600, "profit")</div>
    </div>

    <div class="test-section">
        <h2>技术特点</h2>
        <ul>
            <li><strong>Vue 3 Composition API</strong>：现代化的响应式开发</li>
            <li><strong>Element Plus</strong>：丰富的 UI 组件库</li>
            <li><strong>D3.js</strong>：强大的数据可视化能力</li>
            <li><strong>拖拽交互</strong>：直观的节点位置调整</li>
            <li><strong>实时编辑</strong>：双击节点快速编辑</li>
            <li><strong>数据同步</strong>：节点和连接信息实时同步</li>
        </ul>
    </div>

    <div class="test-section">
        <h2>使用提示</h2>
        <div class="test-result warning">
            💡 <strong>提示：</strong>
            <ul>
                <li>双击节点进行编辑</li>
                <li>拖拽节点调整位置</li>
                <li>手动连接节点</li>
                <li>在连接列表中编辑连接属性</li>
                <li>使用导出/导入功能保存和恢复决策树</li>
            </ul>
        </div>
    </div>
</body>

</html>