Skip to content

Commit ccc44bf

Browse files
HiCodeHCHiCodeHC
committed
feat: 发布 v2.00 图形化前端开发版本
- 触发区域色块：cf 区域名 … cf 区域名 stop，点击或长按约 0.6 秒触发/展开该段代码 - 图片变量支持直接填写 URL（http(s)/data: 自动按网络图片引用） - 可下载文件变量：it 名 app + 名 in d，渲染下载按钮；使用下载功能导出仅支持 .zip - Python 标准库导入：use os, sys, subprocess, math, json, sqlite3, urllib, threading… - 网页端升级 v2.00，学习中心扩充至 15 章，新增第 15 章练习 - 归档 v2.00 至 old/，全库版本号与离线单文件版同步
1 parent f422d24 commit ccc44bf

132 files changed

Lines changed: 22793 additions & 129 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,17 @@ HiCode（简称 **HC**）的诞生源于一个朴素的愿望：**让编程真
3030

3131
## 当前版本
3232

33-
- **v1.00（正式版本）**：HiCode 正式版本，面向「真正可用、可信赖」的完整开发体验。在 v0.026 已有能力（`it` 变量含中文名、`in t/s/b/link/p` 分级展示、`if/orif/noif` 条件、四则/比较/逻辑表达式、`to/fr` 页面跳转、单等号比较、全角/数学运算符、`#` 注释、实时转译与 `.hc/.html/.zip` 导出）的基础上，正式版新增：
34-
- 🖱️ **图形化编程界面**：内置画布，点击即可确定「点」的运作定位坐标，一键生成 `变量名 in point x y` 代码，所见即所得。
35-
- 🖼️ **图片上传修复**：修复使用定义变量时 `p` 图片无法上传的问题，图片上传 / 更换 / 删除更加稳定。
36-
- 📚 **教学中心升级**：课程扩充至 14 章，新增「图形化定位」章节，配套可下载的 `.hc` 练习文件。
37-
- 📦 **多平台打包**：提供 **安卓端（.apk）与 Windows 电脑端（.exe）** 的本地运行形态，并保留网页端在线体验。下载页可选安卓端 / 电脑端 / 网页端。
38-
- **历史版本**：v0.01、v0.02、v0.026 均已归档至 `old/`，可在 [历史版本索引](https://HiCodeHC.github.io/old/) 中集中访问。
33+
- **v2.00（图形化前端开发）**：HiCode 当前版本，为 HIC 增加图形化前端开发能力。在 v1.0x 已有能力（`it` 变量、`in t/s/b/link/p` 展示、`if/orif/noif` 条件、表达式、`to/fr` 跳转、`for` 循环、`{变量}` 插值、实时转译与导出）的基础上新增：
34+
- 🧩 **触发区域色块**：`cf 区域名 … cf 区域名 stop` 标记一段代码，网页转译成彩色色块，**点击或长按约 0.6 秒** 即触发 / 展开该段内容，让"简单点击也能带动一段逻辑"。
35+
- 🖼️ **图片变量支持 URL**：`it 名 p 图片地址` 直接引用网络图片，无需上传。
36+
- ⬇️ **可下载文件变量**：`it 名 app` 上传任意文件 + `名 in d` 渲染下载按钮，用户点击浏览器弹出下载；使用下载功能时导出仅支持 **.zip 打包**。
37+
- 🔌 **Python 标准库导入**：`use os, sys, math, json, sqlite3, urllib, threading…` 声明式白名单导入常用标准库（系统 / 数学数据 / 时间文件 / 存储 / 网络并发）。
38+
- 🎨 **图形化编程界面**：创建色块、配置触发区域，所见即所得；学习中心扩充至 15 章。
39+
- **v1.03（控制台面板）**：新增「控制台」终端风格活动日志面板（全部 / 输出 / 错误 / 警告四档过滤与一键清空）与状态指示点。
40+
- **v1.02（界面优化）**：编程界面升级为专业 IDE 布局：问题 / 输出 / 变量三大底部面板、文件名显示、增强状态栏。
41+
- **v1.01（开发体验升级）**：新增专业状态栏、问题诊断面板、`for` 循环与 `{变量}` 字符串插值。
42+
- **v1.00（正式版本）**：图形化定位、图片上传修复、14 章学习中心与多平台打包（安卓 .apk / Windows .exe / 网页端）。
43+
- **历史版本**：v0.01、v0.02、v0.026、v1.00、v1.01、v1.02、v1.03 均已归档至 `old/`，可在 [历史版本索引](https://HiCodeHC.github.io/old/) 中集中访问。
3944

4045
## 下载
4146

‎download/HiCode-ide-offline.html‎

Lines changed: 1078 additions & 54 deletions
Large diffs are not rendered by default.

‎download/build/build-offline.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ html = html.replace(
3333
function () { return "<style>\n" + css + "\n</style>"; }
3434
);
3535

36-
/* 3) 脚本内联（顺序：store → hic → app）
36+
/* 3) 脚本内联（顺序：store → hic → editor → app）
3737
注意：用「函数替换」而非字符串替换，避免源码中的 $& 等被当作
3838
正则在替换串中的特殊模式（app.js 的 \"\\$&\" 会触发此问题）。 */
3939
function inlineFile(src) {
@@ -42,14 +42,15 @@ function inlineFile(src) {
4242
html = html
4343
.replace('<script src="js/store.js"></script>', function () { return inlineFile("store.js"); })
4444
.replace('<script src="js/hic.js"></script>', function () { return inlineFile("hic.js"); })
45+
.replace('<script src="js/editor.js"></script>', function () { return inlineFile("editor.js"); })
4546
.replace('<script src="js/app.js"></script>', function () { return inlineFile("app.js"); });
4647

4748
/* 4) 文案标记为「本地版」 */
4849
html = html.replace(
49-
"<title>HiCode · 在线开发环境 v1.00</title>",
50-
"<title>HiCode · 本地开发环境 v1.00</title>"
50+
"<title>HiCode · 在线开发环境 v2.00</title>",
51+
"<title>HiCode · 本地开发环境 v2.00</title>"
5152
);
52-
html = html.replace("v1.00 · 网页端", "v1.00 · 本地版");
53+
html = html.replace("v2.00 · 网页端", "v2.00 · 本地版");
5354
html = html.replace("HIC 语言在线开发", "HIC 语言本地开发");
5455
html = html.replace("网页端在线开发", "本地离线开发");
5556

‎download/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<meta name="description" content="下载 HiCode（HC）v1.00 —— 可选安卓端（.apk）、电脑端（.exe）与网页端（在线）三种形态。" />
7-
<title>下载 HiCode · v1.00</title>
6+
<meta name="description" content="下载 HiCode（HC）v2.00 —— 可选安卓端（.apk）、电脑端（.exe）与网页端（在线）三种形态。" />
7+
<title>下载 HiCode · v2.00</title>
88
<link rel="icon" href="../assets/hicode-logo.jpg" type="image/jpeg" />
99
<style>
1010
:root {
@@ -109,7 +109,7 @@
109109
<body>
110110
<header>
111111
<div class="container nav">
112-
<a class="brand" href="../"><img src="../assets/hicode-logo.jpg" alt="HiCode" /><span>HiCode</span><span class="ver">v1.00</span></a>
112+
<a class="brand" href="../"><img src="../assets/hicode-logo.jpg" alt="HiCode" /><span>HiCode</span><span class="ver">v2.00</span></a>
113113
<nav class="nav-links">
114114
<a href="../">官网首页</a>
115115
<a href="../ide/">网页端体验</a>
@@ -122,7 +122,7 @@
122122
<main>
123123
<div class="hero container">
124124
<div class="badge"><span class="dot"></span> HiCode · 多端下载</div>
125-
<h1>下载 <span class="accent">HiCode</span> v1.00</h1>
125+
<h1>下载 <span class="accent">HiCode</span> v2.00</h1>
126126
<p>选择你的平台。安卓端与电脑端均以<b>离线单文件版</b>为运行内核，<b>断网也能编译</b>；网页端可直接在线体验。</p>
127127
</div>
128128

‎ide/css/style.css‎

Lines changed: 147 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,16 +110,160 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
110110
.pane { display: none; flex: 1; min-height: 0; padding: 12px 14px 14px; flex-direction: column; }
111111
.pane.on { display: flex; }
112112
.editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
113-
.hint { font-size: 12.5px; color: var(--muted); }
113+
.file-name { font-weight: 700; color: var(--accent-strong); font-size: 13px; }
114+
.file-name::before { content: "▤ "; opacity: .55; font-weight: 400; }
114115
.shortcut { font-size: 12px; color: var(--dim); }
116+
.editor-snippets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
117+
.editor-snippets .snippet {
118+
padding: 6px 12px; border-radius: 999px; font-size: 12px; cursor: pointer; color: var(--muted);
119+
border: 1px dashed var(--accent); background: var(--accent-soft, rgba(255,255,255,.03));
120+
}
121+
.editor-snippets .snippet:hover { color: var(--accent-strong); border-style: solid; }
115122
.codearea {
116123
flex: 1; min-height: 0; resize: none; border: 1px solid var(--line); border-radius: var(--radius);
117124
padding: 16px; font-family: "Cascadia Code", Consolas, "Courier New", monospace; font-size: 14px; line-height: 1.65;
118125
background: rgba(255,255,255,.6); color: #2d2416; outline: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
119126
}
120127
.codearea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
121-
.codearea.src { flex: none; height: 100%; white-space: pre; }
122-
.statusbar { margin-top: 8px; font-size: 12.5px; color: var(--dim); }
128+
.codearea.src { flex: none; height: 100%; white-space: pre; width: 100%; font-family: "Cascadia Code", Consolas, "Courier New", monospace; font-size: 12.5px; line-height: 1.6; color: #cfd6dd; background: #1b1f27; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
129+
.preview-tools { display: inline-flex; gap: 8px; }
130+
131+
/* ---- 轻量编辑器：高亮层 + 行号 ---- */
132+
.editor-wrap { --gutter: 52px; position: relative; flex: 1; min-height: 0; }
133+
.editor-wrap textarea.codearea {
134+
position: relative; z-index: 4; width: 100%; height: 100%;
135+
padding-left: calc(var(--gutter) + 13px);
136+
background: transparent; color: transparent; caret-color: #2d2416;
137+
-webkit-text-fill-color: transparent; white-space: pre; overflow: auto; tab-size: 4;
138+
}
139+
.editor-highlight {
140+
position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1;
141+
margin: 0; padding: 16px 16px 16px calc(var(--gutter) + 13px);
142+
pointer-events: none; overflow: hidden; white-space: pre; tab-size: 4;
143+
font-family: "Cascadia Code", Consolas, "Courier New", monospace; font-size: 14px; line-height: 1.65;
144+
color: #2d2416;
145+
}
146+
.editor-gutter {
147+
position: absolute; left: 0; top: 0; bottom: 0; width: var(--gutter); z-index: 3;
148+
overflow: hidden; padding: 16px 10px 16px 0; text-align: right; user-select: none;
149+
font-family: "Cascadia Code", Consolas, "Courier New", monospace; font-size: 14px; line-height: 1.65;
150+
color: rgba(120,90,50,.32); border-right: 1px solid var(--line); background: rgba(120,90,50,.04);
151+
}
152+
.editor-mark { position: absolute; left: var(--gutter); top: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; overflow: hidden; }
153+
.ed-diag { position: absolute; height: 0; border-bottom: 2px solid transparent; border-radius: 2px; }
154+
.ed-diag-err { border-color: #d9534f; animation: diaFade .3s; }
155+
.ed-diag-warn { border-bottom-style: dashed; border-color: #d9a632; }
156+
@keyframes diaFade { from { opacity: 0; } to { opacity: 1; } }
157+
/* 高亮配色 */
158+
.editor-highlight .tk.kw { color: #8a5a2b; font-weight: 700; }
159+
.editor-highlight .tk.interp { color: #b0572d; font-weight: 700; }
160+
.editor-highlight .tk.ty { color: #2d6a8a; }
161+
.editor-highlight .tk.id { color: #2d2416; }
162+
.editor-highlight .tk.str { color: #2e7d4f; }
163+
.editor-highlight .tk.num { color: #b0572d; }
164+
.editor-highlight .tk.op { color: #8a8a7a; }
165+
.editor-highlight .tk.cm { color: rgba(120,90,50,.5); font-style: italic; }
166+
/* ---- 状态栏（专业 IDE 风格：左右分段） ---- */
167+
.statusbar {
168+
display: flex; align-items: center; justify-content: space-between; gap: 16px;
169+
padding: 5px 12px; margin: 8px 14px 12px; min-height: 26px; flex: 0 0 auto;
170+
font-size: 12px; color: var(--muted);
171+
background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
172+
}
173+
.statusbar.err .sb-left { color: #d9534f; }
174+
.statusbar.warn .sb-left { color: #d9a632; }
175+
.sb-left { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
176+
.sb-left::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px rgba(76,154,106,.5); }
177+
.statusbar.err .sb-left::before { background: #d9534f; box-shadow: 0 0 6px rgba(217,83,79,.5); }
178+
.statusbar.warn .sb-left::before { background: #d9a632; box-shadow: 0 0 6px rgba(217,166,50,.5); }
179+
.sb-right { flex: 0 0 auto; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
180+
.statusbar .errcount { color: #d9534f; font-weight: 700; cursor: pointer; }
181+
.statusbar .warncount { color: #d9a632; font-weight: 700; cursor: pointer; }
182+
183+
/* ---- tab 徽标（问题数量） ---- */
184+
.tab-badge {
185+
display: inline-flex; align-items: center; justify-content: center;
186+
min-width: 16px; height: 16px; margin-left: 5px; padding: 0 4px;
187+
font-size: 10.5px; font-weight: 700; border-radius: 999px;
188+
background: #c05a5a; color: #fff; vertical-align: middle;
189+
}
190+
191+
/* ---- 底部面板（专业 IDE：问题 / 输出 / 变量 停靠区） ---- */
192+
.bottom-panel {
193+
flex: 0 0 220px; margin: 10px 14px 0; display: flex; flex-direction: column; overflow: hidden;
194+
background: var(--panel); border: 1px solid var(--line);
195+
border-radius: var(--radius) var(--radius) 0 0; border-bottom: none;
196+
}
197+
.bottom-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
198+
.btab { padding: 7px 14px; border-radius: 8px 8px 0 0; font-size: 12.5px; color: var(--muted); background: transparent; }
199+
.btab:hover { color: var(--accent); }
200+
.btab.on { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
201+
.bottom-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 12px; overflow: hidden; }
202+
.bpane { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
203+
.bpane.on { display: flex; }
204+
205+
/* ---- 输出面板 ---- */
206+
.output-list { flex: 1; overflow-y: auto; font-family: "Cascadia Code", Consolas, "Courier New", monospace; font-size: 12.5px; line-height: 1.8; color: var(--text); }
207+
.output-row { display: flex; gap: 12px; padding: 2px 0; white-space: nowrap; }
208+
.output-row .k { flex: 0 0 auto; min-width: 74px; color: var(--dim); }
209+
.output-row .ok { color: var(--good); font-weight: 700; }
210+
.output-row .err { color: #c05a5a; font-weight: 700; }
211+
.output-row .warn { color: #d9a632; font-weight: 700; }
212+
213+
/* ---- 控制台面板（终端风格活动日志） ---- */
214+
.console-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
215+
.console-clear { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); background: transparent; transition: border-color .15s, color .15s; }
216+
.console-clear:hover { border-color: var(--bad); color: var(--bad); }
217+
.console-filter { display: flex; gap: 6px; margin-left: auto; }
218+
.console-filter button {
219+
padding: 5px 12px; border-radius: 999px; font-size: 12.5px; color: var(--muted);
220+
border: 1px solid var(--line); background: transparent; transition: background .15s, color .15s, border-color .15s;
221+
}
222+
.console-filter button.on { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); font-weight: 700; }
223+
.console-output { flex: 1; min-height: 0; overflow-y: auto; font-family: "Cascadia Code", Consolas, "Courier New", monospace; font-size: 12.5px; line-height: 1.7; }
224+
.console-welcome { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--line); }
225+
.cw-logo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(140deg, #e2b878, #b38545); box-shadow: 0 4px 12px rgba(179,133,69,.4); }
226+
.cw-title { display: block; font-weight: 700; color: var(--text); font-size: 13px; }
227+
.cw-sub { display: block; font-size: 12px; color: var(--dim); }
228+
.console-log { display: flex; flex-direction: column; gap: 2px; }
229+
.console-line { display: flex; gap: 10px; align-items: baseline; word-break: break-all; }
230+
.console-line .cl-time { flex: 0 0 auto; color: var(--dim); font-variant-numeric: tabular-nums; }
231+
.console-line .cl-tag { flex: 0 0 auto; width: 40px; font-weight: 700; font-size: 11px; }
232+
.console-line.output .cl-tag { color: var(--good); }
233+
.console-line.warning .cl-tag { color: #d9a632; }
234+
.console-line.error .cl-tag { color: #c05a5a; }
235+
.console-line .cl-text { color: var(--text); }
236+
.console-line.error .cl-text { color: #c05a5a; }
237+
.console-empty { color: var(--dim); text-align: center; margin-top: 18px; }
238+
.console-status-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); }
239+
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px rgba(76,154,106,.55); }
240+
.status-dot.idle { background: var(--good); }
241+
.status-dot.busy { background: var(--accent); }
242+
.console-ver { margin-left: auto; }
243+
244+
/* ---- 问题面板 ---- */
245+
.prob-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
246+
.prob-filter { display: flex; gap: 6px; }
247+
.prob-filter button {
248+
padding: 5px 12px; border-radius: 999px; font-size: 12.5px; color: var(--muted);
249+
border: 1px solid var(--line); background: transparent; transition: background .15s, color .15s, border-color .15s;
250+
}
251+
.prob-filter button.on { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); font-weight: 700; }
252+
.prob-filter button span { opacity: .7; margin-left: 3px; }
253+
.prob-hint { font-size: 12px; color: var(--dim); }
254+
.prob-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
255+
.prob-item {
256+
display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
257+
background: var(--panel); border: 1px solid var(--line); cursor: pointer;
258+
transition: border-color .15s, background .15s;
259+
}
260+
.prob-item:hover { border-color: var(--accent); background: var(--accent-soft); }
261+
.prob-item .pi-icon { width: 18px; text-align: center; font-weight: 800; }
262+
.prob-item.err .pi-icon { color: #c05a5a; }
263+
.prob-item.warn .pi-icon { color: #d9a632; }
264+
.prob-item .pi-msg { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
265+
.prob-item .pi-line { flex: 0 0 auto; font-size: 12px; color: var(--dim); }
266+
.prob-empty { text-align: center; color: var(--dim); margin-top: 30px; font-size: 13px; }
123267
.preview-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
124268
.preview-frame { flex: 1; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
125269

0 commit comments

Comments
 (0)