Skip to content

Commit a01ecc0

Browse files
HiCodeHCHiCodeHC
committed
feat: 移动端 IDE 设备分流 + 导出可选去除顶部题目标识
- ide/ 改为「UA 检测入口页」：安卓/手机窄屏自动进入 /android/，电脑进入 /windows/，支持手动切换 - 新增 /windows/ 桌面版：更高分辨率、更广显示、更全功能（更宽侧栏 / 更高底部面板 / 大字号） - 新增 /android/ 移动版：响应式特调防挤压，侧栏改为汉堡抽屉、大触控目标、全屏导出下拉 - 导出新增「不包含顶部题目标识」勾选项：individual .html / .zip / 合并 .html 均可纯导出用户编写内容 - 离线单文件版改源桌面版 windows/，单元测试增至 111 项 - 同步归档 old/v2.00
1 parent ccc44bf commit a01ecc0

51 files changed

Lines changed: 14211 additions & 457 deletions

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: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ HiCode（简称 **HC**）的诞生源于一个朴素的愿望：**让编程真
3636
- ⬇️ **可下载文件变量**：`it 名 app` 上传任意文件 + `名 in d` 渲染下载按钮，用户点击浏览器弹出下载；使用下载功能时导出仅支持 **.zip 打包**。
3737
- 🔌 **Python 标准库导入**：`use os, sys, math, json, sqlite3, urllib, threading…` 声明式白名单导入常用标准库（系统 / 数学数据 / 时间文件 / 存储 / 网络并发）。
3838
- 🎨 **图形化编程界面**：创建色块、配置触发区域，所见即所得；学习中心扩充至 15 章。
39+
- 📱 **设备分流 IDE**：访问入口自动根据设备跳转 —— 手机 / 安卓走 `/android/`（触控特调、抽屉侧栏防挤压），电脑访问 `/windows/`（更高分辨率、更广显示、功能更全）；亦可手动切换。
40+
- 🏷️ **导出可选顶部题目标识**：导出单个 `.html` / 打包 `.zip` / 合并 `.html` 时，可勾选「不包含顶部题目标识」从而**纯导出用户自己编写的页面内容**。
3941
- **v1.03（控制台面板）**：新增「控制台」终端风格活动日志面板（全部 / 输出 / 错误 / 警告四档过滤与一键清空）与状态指示点。
4042
- **v1.02（界面优化）**：编程界面升级为专业 IDE 布局：问题 / 输出 / 变量三大底部面板、文件名显示、增强状态栏。
4143
- **v1.01（开发体验升级）**：新增专业状态栏、问题诊断面板、`for` 循环与 `{变量}` 字符串插值。

‎android/css/style.css‎

Lines changed: 450 additions & 0 deletions
Large diffs are not rendered by default.

‎android/index.html‎

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
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>HiCode · 手机开发环境 v2.00（安卓端）</title>
7+
<link rel="icon" href="../assets/hicode-logo.jpg" type="image/jpeg" />
8+
<meta name="theme-color" content="#f3eee6" />
9+
<link rel="stylesheet" href="css/style.css" />
10+
</head>
11+
<body>
12+
<!-- ===== 顶部导航 ===== -->
13+
<header class="topbar">
14+
<button type="button" id="btnTreeToggle" class="btn-tree" title="展开 / 收起项目侧栏">☰</button>
15+
<div class="brand" id="btnHome" title="返回首页">
16+
<span class="logo-dot"></span>
17+
<span class="brand-name">HiCode</span>
18+
<span class="ver">v2.00 · 手机端</span>
19+
</div>
20+
<div class="crumb" id="crumb" title="当前文件">—</div>
21+
<div class="actions">
22+
<button id="btnLive" class="btn ghost live" title="观看实时转译：立即把当前页面 HIC 代码转译为 HTML">✓ 实时转译</button>
23+
<div class="menu-wrap">
24+
<button id="btnExport" class="btn solid">导出 ▾</button>
25+
<div class="menu" id="exportMenu">
26+
<div class="menu-title">导出当前项目</div>
27+
<button data-act="hc">导出 .hc（可导入继续开发）</button>
28+
<button data-act="single">导出单个 .html</button>
29+
<button data-act="zip">导出全部页面 · 打包 .zip</button>
30+
<button data-act="merge">导出全部页面 · 合并成 1 个 .html</button>
31+
<label class="export-opt" title="勾选后，导出的页面不添加顶部“项目名 · 页面名”题目标识，仅保留你自己编写的页面内容">
32+
<input type="checkbox" id="optNoBar" /> 不包含顶部题目标识（纯内容导出）
33+
</label>
34+
</div>
35+
</div>
36+
</div>
37+
</header>
38+
39+
<div class="layout">
40+
<!-- ===== 移动端侧栏抽屉遮罩 ===== -->
41+
<div class="drawer-scrim" id="drawerScrim" hidden></div>
42+
<!-- ===== 左侧：项目 + 页面 ===== -->
43+
<aside class="tree" id="tree">
44+
<div class="tree-sec">
45+
<div class="tree-head">
46+
<span>项目</span>
47+
<button class="mini" id="addProject" title="新建项目">+</button>
48+
</div>
49+
<ul class="tree-list" id="projList"></ul>
50+
</div>
51+
<div class="tree-sec" id="pageSec" hidden>
52+
<div class="tree-head">
53+
<span>页面</span>
54+
<button class="mini" id="addPage" title="新建页面">+</button>
55+
</div>
56+
<ul class="tree-list" id="pageList"></ul>
57+
</div>
58+
<div class="tree-empty" id="treeHint">创建或导入一个项目后开始开发</div>
59+
</aside>
60+
61+
<!-- ===== 右侧：工作区 ===== -->
62+
<main class="workspace">
63+
<div class="tabs" id="workTabs">
64+
<button class="tab on" data-tab="editor">代码</button>
65+
<button class="tab" data-tab="preview">转译预览</button>
66+
<button class="tab" data-tab="graph">图形画布</button>
67+
</div>
68+
69+
<section class="pane on" id="pane-editor">
70+
<div class="editor-head">
71+
<span class="file-name" id="fileName">未打开文件</span>
72+
<span class="shortcut">it 变量 · in t/s/b/link/p 展示 / in d 下载 · if/orif/noif 判断 · for 循环 · cf 触发区域 · use 标准库 · 图片可写 URL · {变量} 插值 · to/fr 导向</span>
73+
</div>
74+
<div class="editor-snippets">
75+
<button type="button" class="snippet" data-snip="region" title="插入一个可点击/长按触发的区域色块">+ 触发区域</button>
76+
<button type="button" class="snippet" data-snip="use" title="导入 Python 标准库模块（网页输出为标识占位，打包/原生运行时可用）">+ 标准库 use</button>
77+
<button type="button" class="snippet" data-snip="app" title="声明一个可上传文件、供用户下载的变量">+ 下载文件</button>
78+
</div>
79+
<textarea id="code" class="codearea" spellcheck="false"
80+
placeholder="在这里编写 HIC 代码…&#10;&#10;it 标题 t Hello HiCode&#10;标题 in t&#10;it 分数 int 85&#10;if 分数 &gt;= 60:&#10; 标题 in s"
81+
></textarea>
82+
</section>
83+
84+
<section class="pane" id="pane-preview">
85+
<div class="preview-bar">
86+
<span>实时转译结果（HIC → HTML）</span>
87+
<span class="preview-tools">
88+
<button class="mini" id="btnToggleSrc" title="预览与源码对照">查看源码</button>
89+
<button class="mini" id="openPreview" title="在独立标签页打开预览">↗ 新标签打开</button>
90+
</span>
91+
</div>
92+
<iframe id="previewFrame" class="preview-frame" sandbox="allow-scripts allow-same-origin"></iframe>
93+
<textarea id="previewSrc" class="codearea src" spellcheck="false" hidden readonly></textarea>
94+
</section>
95+
96+
<section class="pane" id="pane-graph">
97+
<div class="graph-help">
98+
<p><b>图形化定位</b>：在下方画布<b>点击</b>确定一个点的运作定位坐标 <code>(x, y)</code>，点击「插入坐标点」即生成 HIC 代码。</p>
99+
<p>文字点会生成 <code>it 变量名 t 内容</code>；图片点会生成 <code>it 变量名 p</code>（图片请到「变量」面板上传）。两个都会生成 <code>变量名 in point x y</code>。</p>
100+
</div>
101+
<div class="graph-tools">
102+
<label>变量名 <input id="graphVarName" type="text" value="点A" placeholder="点A" /></label>
103+
<label>内容 <input id="graphContent" type="text" placeholder="文字点的内容" /></label>
104+
<label>类型
105+
<select id="graphType">
106+
<option value="text">文字 t</option>
107+
<option value="img">图片 p</option>
108+
</select>
109+
</label>
110+
<button id="btnInsertPoint" class="btn solid">插入坐标点</button>
111+
<button id="btnClearGraph" class="btn ghost">清除标记</button>
112+
</div>
113+
<div class="graph-stage">
114+
<div class="graph-canvas" id="graphCanvas">
115+
<span class="graph-gridhint">点击画布任意位置放置坐标点</span>
116+
<span class="graph-dot" id="graphDot" hidden></span>
117+
</div>
118+
<div class="graph-coord" id="graphCoord">坐标：未选择（请在画布上点击）</div>
119+
</div>
120+
</section>
121+
122+
<!-- ===== 底部面板（专业 IDE：控制台 / 输出 / 问题 / 变量 停靠区） ===== -->
123+
<div class="bottom-panel" id="bottomPanel">
124+
<div class="bottom-tabs" id="bottomTabs">
125+
<button class="btab on" data-btab="console">控制台</button>
126+
<button class="btab" data-btab="output">输出</button>
127+
<button class="btab" data-btab="problems">问题<span class="tab-badge" id="probBadge" hidden>0</span></button>
128+
<button class="btab" data-btab="vars">变量</button>
129+
</div>
130+
<div class="bottom-body">
131+
<div class="bpane on" id="bp-console">
132+
<div class="console-toolbar">
133+
<button class="console-clear" id="btnClearConsole" title="清空控制台">🗑 清空</button>
134+
<div class="console-filter" id="consoleFilter">
135+
<button data-cf="all" class="on">全部</button>
136+
<button data-cf="output">输出</button>
137+
<button data-cf="error">错误</button>
138+
<button data-cf="warning">警告</button>
139+
</div>
140+
</div>
141+
<div class="console-output" id="consoleOutput">
142+
<div class="console-welcome">
143+
<span class="cw-logo">H</span>
144+
<div class="cw-text">
145+
<span class="cw-title">HiCode · HIC 手机开发环境 v2.00（安卓端）</span>
146+
<span class="cw-sub">HIC 引擎已就绪 · 正在加载编辑器…</span>
147+
</div>
148+
</div>
149+
<div class="console-log" id="consoleLog"></div>
150+
</div>
151+
<div class="console-status-line">
152+
<span class="status-dot idle"></span>
153+
<span>空闲中</span>
154+
<span class="console-ver">HIC 引擎就绪</span>
155+
</div>
156+
</div>
157+
<div class="bpane" id="bp-problems">
158+
<div class="prob-bar">
159+
<div class="prob-filter" id="probFilter">
160+
<button data-f="all" class="on">全部 <span id="cntAll">0</span></button>
161+
<button data-f="error">错误 <span id="cntErr">0</span></button>
162+
<button data-f="warn">警告 <span id="cntWarn">0</span></button>
163+
</div>
164+
<span class="prob-hint">点击条目跳转到对应代码行</span>
165+
</div>
166+
<div class="prob-list" id="probList"></div>
167+
<div class="prob-empty" id="probEmpty">未发现错误或警告，代码运行良好 ✓</div>
168+
</div>
169+
<div class="bpane" id="bp-output">
170+
<div class="output-list" id="outputList"></div>
171+
</div>
172+
<div class="bpane" id="bp-vars">
173+
<div class="var-help">图片条目可<b>上传</b>或填<b>URL</b>直接引用 · <code>it 名 t/p/app</code> 声明 · <code>名 in t/s/b/link/p/d</code> 展示/下载</div>
174+
<div id="varList" class="var-list"></div>
175+
<div class="var-empty" id="varEmpty">当前页面没有声明变量</div>
176+
</div>
177+
</div>
178+
</div>
179+
180+
<div class="statusbar" id="statusbar">
181+
<span class="sb-left" id="sbLeft">就绪</span>
182+
<span class="sb-right" id="sbRight">行 1, 列 1 · UTF-8 · LF · HIC</span>
183+
</div>
184+
</main>
185+
186+
<!-- 空窗口占位 -->
187+
</div>
188+
189+
<!-- ===== 首页引导 ===== -->
190+
<div id="home" class="home hidden">
191+
<div class="home-card">
192+
<div class="home-logo"><span class="logo-dot lg"></span></div>
193+
<h1>HiCode <span class="dim">· HIC 语言在线开发</span></h1>
194+
<p class="home-sub">自研 HIC 语言一键转译为 HTML，零基础也能搭建网页项目。</p>
195+
<div class="home-sub small">v2.00：图形化前端开发 —— 触发区域色块（<code>cf 名 … cf 名 stop</code>，点击/长按即触发执行该段代码）、图片变量支持从 URL 直接获取、可下载文件变量（<code>it 名 app</code> + <code>名 in d</code>）、Python 标准库导入（<code>use os, sys, math, json, sqlite3…</code>）；兼容 for 循环、{变量} 插值、中文变量名、实时转译与任意页面导出。</p>
196+
<div class="home-actions">
197+
<button id="homeNew" class="btn solid big">新建项目</button>
198+
<button id="homeImport" class="btn ghost big">导入项目 .hc</button>
199+
</div>
200+
<div class="home-recent" id="homeRecent" hidden>
201+
<div class="recent-title">继续上次开发</div>
202+
<button id="homeResume" class="btn soft big">恢复最近项目 →</button>
203+
</div>
204+
</div>
205+
</div>
206+
207+
<!-- ===== 通用弹窗 ===== -->
208+
<div id="modal" class="modal hidden">
209+
<div class="modal-card">
210+
<div class="modal-title" id="modalTitle">标题</div>
211+
<div class="modal-body" id="modalBody"></div>
212+
<div class="modal-actions">
213+
<button id="modalCancel" class="btn ghost">取消</button>
214+
<button id="modalOk" class="btn solid">确定</button>
215+
</div>
216+
</div>
217+
</div>
218+
219+
<!-- 图片导入用隐藏 input -->
220+
<input type="file" id="fileImg" accept="image/*" hidden />
221+
<input type="file" id="fileApp" hidden />
222+
<input type="file" id="fileHc" accept=".hc,application/json" hidden />
223+
224+
<script src="js/store.js"></script>
225+
<script src="js/hic.js"></script>
226+
<script src="js/editor.js"></script>
227+
<script src="js/app.js"></script>
228+
<script>
229+
// 移动端侧栏抽屉开关：汉堡按钮展开，遮罩或树内任意点击收起
230+
(function () {
231+
var btn = document.getElementById('btnTreeToggle');
232+
var tree = document.getElementById('tree');
233+
var scrim = document.getElementById('drawerScrim');
234+
var layout = document.querySelector('.layout');
235+
function open() { tree.classList.add('open'); scrim.hidden = false; layout.classList.add('drawer-open'); document.body.classList.add('drawer-open'); }
236+
function close() { tree.classList.remove('open'); scrim.hidden = true; layout.classList.remove('drawer-open'); document.body.classList.remove('drawer-open'); }
237+
if (btn) btn.addEventListener('click', function () { tree.classList.contains('open') ? close() : open(); });
238+
if (scrim) scrim.addEventListener('click', close);
239+
if (tree) tree.addEventListener('click', function (e) {
240+
// 点树内任意可点元素（项目/页面项）后自动收起，避免挡住代码区
241+
if (e.target.closest('.tree-item') || e.target.closest('.mini') || e.target.closest('.tree-head')) close();
242+
});
243+
})();
244+
</script>
245+
</body>
246+
</html>

0 commit comments

Comments
 (0)