we-tool/tools/opencc.html at main · imwarn/we-tool · 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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!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="中文简繁转换工具 - 支持简体中文、繁体中文、台湾正体、香港繁体等多种转换模式">
    <meta name="keywords" content="中文转换,简繁转换,OpenCC,简体繁体,中文翻译">
    <title>中文简繁转换 - 开发者工具箱</title>

    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🈯</text></svg>">

    <!-- 公共样式 -->
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/tool.css">

    <style>
        .conversion-direction {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }

        .direction-arrow {
            font-size: 2em;
            color: var(--color-button);
        }

        .text-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="../index.html" class="logo">
                <div class="logo-icon">🛠️</div>
                <span data-i18n="nav.home">开发者工具箱</span>
            </a>
            <a href="../index.html" class="back-btn">
                <span>←</span>
                <span data-i18n="common.back">返回首页</span>
            </a>
        </div>
    </nav>

    <!-- 主容器 -->
    <div class="container">
        <div class="page-header">
            <h1 class="page-title">🈯 中文简繁转换</h1>
            <p class="page-subtitle">支持简体中文、繁体中文、台湾正体、香港繁体等多种转换模式</p>
        </div>

        <!-- 转换面板 -->
        <div class="tool-panel">
            <h2 class="section-title">转换设置</h2>

            <div class="form-group">
                <label class="form-label">转换模式</label>
                <select class="form-select" id="conversionMode">
                    <option value="s2t">简体 → 繁体（OpenCC 标准）</option>
                    <option value="t2s">繁体 → 简体</option>
                    <option value="s2tw">简体 → 台湾正体</option>
                    <option value="tw2s">台湾正体 → 简体</option>
                    <option value="s2hk">简体 → 香港繁体</option>
                    <option value="hk2s">香港繁体 → 简体</option>
                    <option value="t2tw">繁体 → 台湾正体</option>
                    <option value="t2hk">繁体 → 香港繁体</option>
                </select>
            </div>

            <div class="conversion-direction">
                <div>
                    <strong id="fromLang">简体中文</strong>
                </div>
                <div class="direction-arrow">→</div>
                <div>
                    <strong id="toLang">繁体中文</strong>
                </div>
            </div>
        </div>

        <!-- 输入输出面板 -->
        <div class="tool-panel">
            <h2 class="section-title">文本转换</h2>

            <div class="grid-2">
                <div class="form-group">
                    <label class="form-label">输入文本</label>
                    <textarea
                        class="form-textarea"
                        id="inputText"
                        placeholder="请输入需要转换的中文文本..."
                        style="min-height: 300px;"
                    ></textarea>
                    <div class="text-stats">
                        <div class="stat-item">
                            <div class="stat-value" id="inputChars">0</div>
                            <div class="stat-label">字符数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value" id="inputWords">0</div>
                            <div class="stat-label">词语数</div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">转换结果</label>
                    <textarea
                        class="form-textarea"
                        id="outputText"
                        readonly
                        placeholder="转换结果将显示在这里..."
                        style="min-height: 300px;"
                    ></textarea>
                    <div class="text-stats">
                        <div class="stat-item">
                            <div class="stat-value" id="outputChars">0</div>
                            <div class="stat-label">字符数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value" id="outputWords">0</div>
                            <div class="stat-label">词语数</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="btn-group">
                <button class="btn btn-primary" onclick="convertText()">
                    <span>🔄</span>
                    <span>转换</span>
                </button>
                <button class="btn btn-success" onclick="copyResult()">
                    <span>📋</span>
                    <span>复制结果</span>
                </button>
                <button class="btn btn-secondary" onclick="clearAll()">
                    <span>🗑️</span>
                    <span>清空</span>
                </button>
            </div>
        </div>

        <!-- 使用说明 -->
        <div class="info-box">
            <h4>💡 使用说明</h4>
            <ul>
                <li><strong>简体 → 繁体</strong>：标准的 OpenCC 简繁转换</li>
                <li><strong>台湾正体</strong>：符合台湾地区用词习惯的繁体中文</li>
                <li><strong>香港繁体</strong>：符合香港地区用词习惯的繁体中文</li>
                <li><strong>实时统计</strong>：自动统计字符数和词语数</li>
                <li><strong>隐私保护</strong>：所有转换在本地完成，不上传服务器</li>
            </ul>
        </div>

        <div class="info-box warning">
            <h4>⚠️ 注意事项</h4>
            <ul>
                <li>当前版本使用简化的转换规则，可能与 OpenCC 标准有细微差异</li>
                <li>建议用于一般性文本转换，专业术语可能需要人工校对</li>
                <li>转换结果仅供参考，重要内容请人工审核</li>
            </ul>
        </div>
    </div>

    <!-- 公共脚本 -->
    <script src="../assets/js/common.js"></script>

    <script>
        // 简化版中文转换映射表（实际项目建议使用完整的 OpenCC 库）
        const conversionMaps = {
            s2t: {
                '为': '爲', '无': '無', '开': '開', '关': '關', '发': '發',
                '国': '國', '学': '學', '会': '會', '经': '經', '过': '過',
                '这': '這', '样': '樣', '来': '來', '对': '對', '时': '時',
                '个': '個', '两': '兩', '没': '沒', '说': '說', '认': '認',
                '从': '從', '还': '還', '电': '電', '应': '應', '当': '當',
                '习': '習', '实': '實', '体': '體', '现': '現', '长': '長'
            },
            t2s: {
                '爲': '为', '無': '无', '開': '开', '關': '关', '發': '发',
                '國': '国', '學': '学', '會': '会', '經': '经', '過': '过',
                '這': '这', '樣': '样', '來': '来', '對': '对', '時': '时',
                '個': '个', '兩': '两', '沒': '没', '說': '说', '認': '认',
                '從': '从', '還': '还', '電': '电', '應': '应', '當': '当',
                '習': '习', '實': '实', '體': '体', '現': '现', '長': '长'
            }
        };

        const langNames = {
            's2t': { from: '简体中文', to: '繁体中文' },
            't2s': { from: '繁体中文', to: '简体中文' },
            's2tw': { from: '简体中文', to: '台湾正体' },
            'tw2s': { from: '台湾正体', to: '简体中文' },
            's2hk': { from: '简体中文', to: '香港繁体' },
            'hk2s': { from: '香港繁体', to: '简体中文' },
            't2tw': { from: '繁体中文', to: '台湾正体' },
            't2hk': { from: '繁体中文', to: '香港繁体' }
        };

        // 更新转换方向显示
        document.getElementById('conversionMode').addEventListener('change', function() {
            const mode = this.value;
            const names = langNames[mode];
            document.getElementById('fromLang').textContent = names.from;
            document.getElementById('toLang').textContent = names.to;
        });

        // 实时统计
        document.getElementById('inputText').addEventListener('input', function() {
            updateStats('input', this.value);
        });

        function updateStats(type, text) {
            const chars = text.length;
            const words = text.trim() ? text.match(/[\u4e00-\u9fa5]+/g)?.length || 0 : 0;

            document.getElementById(`${type}Chars`).textContent = chars;
            document.getElementById(`${type}Words`).textContent = words;
        }

        function convertText() {
            const mode = document.getElementById('conversionMode').value;
            const input = document.getElementById('inputText').value;

            if (!input.trim()) {
                DevToolkit.Toast.warning('请输入要转换的文本');
                return;
            }

            let output = input;

            // 简化转换逻辑
            if (mode === 's2t' || mode.startsWith('s2')) {
                const map = conversionMaps.s2t;
                output = input.split('').map(char => map[char] || char).join('');
            } else if (mode === 't2s' || mode.endsWith('2s')) {
                const map = conversionMaps.t2s;
                output = input.split('').map(char => map[char] || char).join('');
            }

            document.getElementById('outputText').value = output;
            updateStats('output', output);
            DevToolkit.Toast.success('转换完成！');
        }

        function copyResult() {
            const output = document.getElementById('outputText').value;
            if (!output) {
                DevToolkit.Toast.warning('没有可复制的内容');
                return;
            }
            DevToolkit.copyToClipboard(output);
        }

        function clearAll() {
            document.getElementById('inputText').value = '';
            document.getElementById('outputText').value = '';
            updateStats('input', '');
            updateStats('output', '');
            DevToolkit.Toast.info('已清空');
        }

        // 示例文本
        const exampleText = '这是一个简体中文转换工具，支持多种转换模式。欢迎使用开发者工具箱！';
        document.getElementById('inputText').value = exampleText;
        updateStats('input', exampleText);
    </script>
</body>
</html>