@zenuml/core 3.40.1 → 3.41.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/test-chinese.html +202 -0
- package/dist/zenuml.esm.mjs +2694 -14
- package/dist/zenuml.js +2 -2
- package/docs/UNICODE_SUPPORT.md +179 -0
- package/newsletter/unicode-support-announcement.md +97 -0
- package/package.json +1 -1
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>ZenUML 中文支持测试</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
10
|
+
margin: 20px;
|
|
11
|
+
background-color: #f5f5f5;
|
|
12
|
+
}
|
|
13
|
+
h1 {
|
|
14
|
+
color: #333;
|
|
15
|
+
}
|
|
16
|
+
.test-section {
|
|
17
|
+
background: white;
|
|
18
|
+
padding: 20px;
|
|
19
|
+
margin: 20px 0;
|
|
20
|
+
border-radius: 8px;
|
|
21
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
22
|
+
}
|
|
23
|
+
.test-title {
|
|
24
|
+
font-weight: bold;
|
|
25
|
+
color: #1890ff;
|
|
26
|
+
margin-bottom: 10px;
|
|
27
|
+
}
|
|
28
|
+
.code-input {
|
|
29
|
+
width: 100%;
|
|
30
|
+
min-height: 150px;
|
|
31
|
+
font-family: 'Courier New', monospace;
|
|
32
|
+
padding: 10px;
|
|
33
|
+
border: 1px solid #d9d9d9;
|
|
34
|
+
border-radius: 4px;
|
|
35
|
+
font-size: 14px;
|
|
36
|
+
}
|
|
37
|
+
.render-button {
|
|
38
|
+
margin-top: 10px;
|
|
39
|
+
padding: 8px 16px;
|
|
40
|
+
background-color: #1890ff;
|
|
41
|
+
color: white;
|
|
42
|
+
border: none;
|
|
43
|
+
border-radius: 4px;
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
}
|
|
46
|
+
.render-button:hover {
|
|
47
|
+
background-color: #40a9ff;
|
|
48
|
+
}
|
|
49
|
+
#diagram-container {
|
|
50
|
+
min-height: 400px;
|
|
51
|
+
border: 1px solid #d9d9d9;
|
|
52
|
+
border-radius: 4px;
|
|
53
|
+
margin-top: 10px;
|
|
54
|
+
background: white;
|
|
55
|
+
}
|
|
56
|
+
.status {
|
|
57
|
+
margin-top: 10px;
|
|
58
|
+
padding: 10px;
|
|
59
|
+
border-radius: 4px;
|
|
60
|
+
}
|
|
61
|
+
.status.success {
|
|
62
|
+
background-color: #f6ffed;
|
|
63
|
+
border: 1px solid #b7eb8f;
|
|
64
|
+
color: #52c41a;
|
|
65
|
+
}
|
|
66
|
+
.status.error {
|
|
67
|
+
background-color: #fff1f0;
|
|
68
|
+
border: 1px solid #ffccc7;
|
|
69
|
+
color: #ff4d4f;
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
72
|
+
</head>
|
|
73
|
+
<body>
|
|
74
|
+
<h1>ZenUML 中文字符支持测试</h1>
|
|
75
|
+
|
|
76
|
+
<div class="test-section">
|
|
77
|
+
<div class="test-title">测试 1: 基本中文标识符（无空格）</div>
|
|
78
|
+
<textarea id="test1" class="code-input">// 中文参与者和方法名
|
|
79
|
+
用户 订单服务 支付系统
|
|
80
|
+
|
|
81
|
+
用户.登录()
|
|
82
|
+
订单服务.创建订单()
|
|
83
|
+
支付系统.处理支付()
|
|
84
|
+
return 成功</textarea>
|
|
85
|
+
<button onclick="renderDiagram('test1')" class="render-button">渲染图表</button>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div class="test-section">
|
|
89
|
+
<div class="test-title">测试 2: 包含空格的中文（使用引号）</div>
|
|
90
|
+
<textarea id="test2" class="code-input">// 使用引号处理包含空格的中文
|
|
91
|
+
"用户 服务" "订单 管理" "支付 网关"
|
|
92
|
+
|
|
93
|
+
"用户 服务"."获取 用户信息"()
|
|
94
|
+
"订单 管理"."创建 新订单"()
|
|
95
|
+
"支付 网关"."处理 支付请求"()
|
|
96
|
+
return "操作 成功"</textarea>
|
|
97
|
+
<button onclick="renderDiagram('test2')" class="render-button">渲染图表</button>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<div class="test-section">
|
|
101
|
+
<div class="test-title">测试 3: 中英文混合</div>
|
|
102
|
+
<textarea id="test3" class="code-input">// 中英文混合使用
|
|
103
|
+
UserService 数据库 CacheManager
|
|
104
|
+
|
|
105
|
+
UserService.获取用户()
|
|
106
|
+
数据库.query("SELECT * FROM users")
|
|
107
|
+
CacheManager.缓存结果()
|
|
108
|
+
return 用户数据</textarea>
|
|
109
|
+
<button onclick="renderDiagram('test3')" class="render-button">渲染图表</button>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
<div class="test-section">
|
|
113
|
+
<div class="test-title">测试 4: 复杂场景</div>
|
|
114
|
+
<textarea id="test4" class="code-input">// 复杂的中文场景
|
|
115
|
+
title "订单处理流程"
|
|
116
|
+
|
|
117
|
+
@Actor 用户
|
|
118
|
+
@Database 数据库
|
|
119
|
+
@Service 订单服务
|
|
120
|
+
|
|
121
|
+
用户->订单服务: 创建订单
|
|
122
|
+
订单服务.验证订单() {
|
|
123
|
+
if (库存充足) {
|
|
124
|
+
数据库.保存订单()
|
|
125
|
+
return "订单创建成功"
|
|
126
|
+
} else {
|
|
127
|
+
return "库存不足"
|
|
128
|
+
}
|
|
129
|
+
}</textarea>
|
|
130
|
+
<button onclick="renderDiagram('test4')" class="render-button">渲染图表</button>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div class="test-section">
|
|
134
|
+
<div class="test-title">测试 5: 其他语言支持</div>
|
|
135
|
+
<textarea id="test5" class="code-input">// 测试日文、韩文、阿拉伯文、俄文
|
|
136
|
+
ユーザー サービス データベース
|
|
137
|
+
|
|
138
|
+
// 日文
|
|
139
|
+
ユーザー.ログイン()
|
|
140
|
+
|
|
141
|
+
// 韩文
|
|
142
|
+
사용자.로그인()
|
|
143
|
+
|
|
144
|
+
// 俄文
|
|
145
|
+
Пользователь.Войти()
|
|
146
|
+
|
|
147
|
+
// 阿拉伯文（从右到左语言）
|
|
148
|
+
مستخدم.دخول()</textarea>
|
|
149
|
+
<button onclick="renderDiagram('test5')" class="render-button">渲染图表</button>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<div class="test-section">
|
|
153
|
+
<div class="test-title">自定义测试</div>
|
|
154
|
+
<textarea id="custom" class="code-input" placeholder="在这里输入您的 ZenUML 代码..."></textarea>
|
|
155
|
+
<button onclick="renderDiagram('custom')" class="render-button">渲染图表</button>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<div class="test-section">
|
|
159
|
+
<div class="test-title">渲染结果</div>
|
|
160
|
+
<div id="diagram-container"></div>
|
|
161
|
+
<div id="status"></div>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<script type="module">
|
|
165
|
+
import { ZenUml } from '/src/core.tsx';
|
|
166
|
+
|
|
167
|
+
window.zenUmlInstance = null;
|
|
168
|
+
|
|
169
|
+
window.renderDiagram = function(testId) {
|
|
170
|
+
const code = document.getElementById(testId).value;
|
|
171
|
+
const container = document.getElementById('diagram-container');
|
|
172
|
+
const statusDiv = document.getElementById('status');
|
|
173
|
+
|
|
174
|
+
try {
|
|
175
|
+
// 清空容器
|
|
176
|
+
container.innerHTML = '';
|
|
177
|
+
|
|
178
|
+
// 如果已有实例，先销毁
|
|
179
|
+
if (window.zenUmlInstance) {
|
|
180
|
+
window.zenUmlInstance.destroy();
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
// 创建新实例
|
|
184
|
+
window.zenUmlInstance = new ZenUml(container);
|
|
185
|
+
window.zenUmlInstance.render(code);
|
|
186
|
+
|
|
187
|
+
statusDiv.className = 'status success';
|
|
188
|
+
statusDiv.textContent = '✅ 渲染成功！中文支持正常工作。';
|
|
189
|
+
} catch (error) {
|
|
190
|
+
console.error('渲染错误:', error);
|
|
191
|
+
statusDiv.className = 'status error';
|
|
192
|
+
statusDiv.textContent = `❌ 渲染失败: ${error.message}`;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
// 页面加载时渲染第一个示例
|
|
197
|
+
window.addEventListener('load', () => {
|
|
198
|
+
setTimeout(() => renderDiagram('test1'), 100);
|
|
199
|
+
});
|
|
200
|
+
</script>
|
|
201
|
+
</body>
|
|
202
|
+
</html>
|