鸿蒙 PC Markdown 编辑器桌面工作台：ArkUI 自由窗口布局与状态设计

鸿蒙 PC Markdown 编辑器桌面工作台ArkUI 自由窗口布局与状态设计本文聚焦鸿蒙 PC 自由窗口、桌面信息密度、ArkUI 与 ArkWeb 状态边界以及键鼠、触控板和触控共同存在时的交互约束。完整示例代码https://gitcode.com/VON-/codex_md_oh。PC 工作台不是放大的手机页面桌面端 Markdown 编辑器是一个长时间、高频率操作的工具。用户会反复切换文件、查看大纲、编辑源码、对照预览并确认保存状态。因此 OhMarkdown 在鸿蒙 PC 上采用紧凑工作台而不是手机式的大留白和卡片堆叠。工作台从左到右包含52vp 活动栏承载文件、搜索、大纲和更多功能入口。264vp 上下文侧栏根据活动栏当前项切换。自适应编辑区内含标签栏、编辑表面和状态栏。用窗口宽度驱动响应式布局仓库中WorkspaceShell.ets的核心响应式代码如下privateshouldShowSidebar():boolean{returnthis.sidebarOpenthis.windowWidth900;}build(){Row(){this.activityRail()if(this.shouldShowSidebar()){this.contextualPanel()}this.editorWorkspace()}.width(100%).height(100%).constraintSize({minWidth:640,minHeight:480}).backgroundColor(#FFFFFF).onAreaChange((_oldArea:Area,newArea:Area){this.windowWidthnewArea.widthasnumber;})}代码来源entry/src/main/ets/shared/ui/WorkspaceShell.ets这里没有根据固定设备型号判断布局而是直接观测窗口实际宽度。当窗口宽度低于 900vp 时上下文侧栏自动收起活动栏和核心编辑面保留。工作台的最小约束是 640×480vp避免窗口继续缩小后主要操作变得不可用。控件尺寸与交互稳定性桌面工具的按钮不应因文本变化反复跳动。活动栏使用固定 36×36vp 的图标按钮编辑模式使用 Source、Split、Preview 分段控件状态栏固定为 26vp。稳定尺寸能让指针路径可预期也避免加载文字、字数或文件名改变整个布局。侧栏的打开和收起属于布局状态不改变编辑器文档状态。这种分离使窗口缩放不会重建文档或丢失撤销栈。鸿蒙 PC 模拟器截图下图可以看到活动栏、文件侧栏、文档标签、模式切换、编辑区和状态栏在同一桌面窗口中的实际组合。当前验证边界当前已在鸿蒙 2in1 模拟器中完成工作台初验Web 侧也已自动化检查 720px 窄窗口的分栏布局。但阶段状态仍不能标记为完全验收因为 640、900、1280、1440vp 的多窗口连续缩放、物理键鼠焦点和真实鸿蒙 PC 桌面行为还需要在真机上补测。从高频任务反推信息架构桌面编辑器的第一屏不需要解释产品理念而要让用户立即看到文档、编辑表面和当前状态。OhMarkdown 把工作台划分为活动栏、上下文侧栏和编辑工作区是因为这三部分分别对应三个频率不同的问题我现在使用哪一类工具、这一类工具有哪些对象、我正在编辑什么。活动栏只保留稳定入口不随文件名和加载状态改变尺寸上下文侧栏用于文件、搜索结果和大纲等列表编辑工作区承载标签、源码、预览和状态栏。把这些职责分开后打开搜索不会重建编辑器收起侧栏不会清空文档切换 Source/Split/Preview 也不会改变文件列表。这种布局看起来接近成熟桌面编辑器但不能机械照搬。鸿蒙 PC 同时存在触控、鼠标和触控板按钮既要足够稳定也不能为了触控把整个界面放大成平板页面。活动栏采用固定图标尺寸上下文区保持较高信息密度核心编辑区则把尽可能多的宽度留给文本。响应式的对象是窗口不是设备名称同一台鸿蒙 PC 上应用可能最大化、左右分屏、悬浮或被用户连续拖动边缘。用“PC 型号”判断布局会把同一设备上的不同窗口状态误认为相同。onAreaChange直接获得工作台实际宽度因此侧栏是否显示由可用空间决定。当前 900vp 是上下文侧栏的收缩阈值640×480vp 是工作台最低约束。阈值的含义不是“900 以下就是手机”而是低于这个宽度时同时保留 52vp 活动栏、264vp 侧栏和可用编辑区会使正文过窄。隐藏侧栏后用户仍能通过活动栏重新打开相关工具文档和光标状态不受影响。响应式验收不能只截取两个静态尺寸。更有价值的测试是从宽到窄连续拖动窗口观察阈值附近是否频繁抖动、工具栏是否换行、编辑器是否出现零宽、状态栏文本是否覆盖。还要从窄窗口恢复到宽窗口确认侧栏状态和文档状态符合预期。工作台状态和文档状态要分开ArkUI 页面中存在多类状态窗口宽度、侧栏是否打开、当前活动工具、文档名称、URI、保存状态、字数、视图模式和 ArkWeb 就绪状态。如果把它们放在同一个“刷新页面”逻辑里窗口变化就可能触发文档重新载入进而丢失撤销栈。合理的边界是布局状态只决定组件是否显示和占用多少空间。文档元数据由原生侧持有包括文件名、URI、编码、换行和操作状态。编辑期文本、选区、撤销栈由 CodeMirror 持有。预览内容由当前 Markdown 派生不成为第二份可写文档。Bridge 只同步必要事件不通过重建 Web 组件完成普通布局切换。这套边界也解释了为什么 Source、Split、Preview 应做成分段控件。它们是同一文档的互斥视图模式不是三个独立页面。模式切换只改变编辑和预览区域的可见性及布局不能新建文档状态。稳定尺寸为什么影响专业感桌面工具需要支持大量重复操作。按钮悬停时变大、状态文字变长后挤动编辑区、标签出现星号时宽度跳变单次看都很轻微连续使用却会让指针目标不稳定。OhMarkdown 对活动栏按钮、标签栏、模式控件和状态栏设置稳定尺寸就是为了让动态内容只在预留区域内变化。文件名可能很长不能无限推开右侧模式控件。合理策略是给标签区可伸缩宽度对文件名做单行截断并通过悬停提示或后续标签菜单展示全名。状态栏同样要决定优先级保存状态、编码和换行对数据安全更重要字数在大文档模式下可以降级或隐藏不能为了计算字数阻塞输入。键盘、指针和触控的统一交互鸿蒙 PC 优先并不意味着只支持鼠标。一个成熟工作台至少要同时考虑键盘可以到达主要命令焦点轮廓清晰系统快捷键不被页面无条件吞掉。鼠标悬停提供工具提示图标按钮的可点击区域固定禁用状态可辨认。触控目标不能小到难以命中但列表密度仍应适合长时间浏览。触控板滚动在文件列表、编辑器和预览区内有明确归属不造成整个窗口意外滚动。焦点管理尤其容易被混合架构放大。用户从 ArkUI 侧栏点击文件后焦点最终应回到 ArkWeb 中的 CodeMirror打开系统选择器再返回时编辑器也应能继续输入。反过来快捷键触发原生命令时不能破坏输入法组合态。模拟器可以验证基本路径但物理键盘、中文 IME 候选窗和触控板惯性仍需要真机记录。自由窗口下的编辑与预览Split 模式在宽窗口中适合左右对照但在窄窗口继续左右分栏会让源码和预览都不可读。Web 编辑器为窄视口设置垂直分栏让两个区域上下排列。ArkUI 外壳与 Web 内核分别响应自己的实际尺寸外壳决定侧栏Web 页面决定编辑/预览排布二者不需要互相猜测设备型号。这类双层响应式需要避免临界点冲突。比如外壳刚隐藏侧栏时Web 区域突然变宽如果 Web 又在相邻阈值切换分栏用户会看到明显跳动。因此验收时要记录外壳和 Web 的阈值在常见窗口宽度上观察组合结果而不是单独验证每一层。大文件模式又是另一种约束。达到阈值后 Split 和 Preview 被禁用工作台必须保持按钮尺寸不变只改变可用状态并显示明确的状态信息。禁用控件不能消失否则模式区宽度变化会带动标签和标题跳动。文件侧栏不应伪装成装饰列表文件侧栏的价值是支持真实工作流打开文件、打开文件夹、展开目录、定位当前文档、处理未保存切换。即使初始版本只有单文件布局也要为工作区保留合理位置但不能提前展示无法操作的假按钮。当文件夹能力加入后目录节点需要稳定的展开图标、层级缩进和当前项高亮长目录要独立滚动不拖动整个工作台点击另一个文件前要处理当前文档的未保存状态。空目录、授权取消、目录读取失败和条目过多也需要真实状态不能都显示为空白。这一原则可以概括为工作台上的每个可见入口都应有完整状态机。按钮至少要有可用、悬停、按下、禁用和执行中状态列表至少要有加载、空、正常、截断和错误状态。专业感主要来自这些重复使用时的确定性而不是一次性的视觉装饰。用视觉证据检查什么模拟器截图不能证明所有交互但可以快速发现布局级问题。评审一张工作台截图时应检查应用和文档是否是首屏主信号而不是大段介绍文字。活动栏、侧栏、标签、编辑区和状态栏的层级是否清楚。文件名、状态和按钮文字有没有互相覆盖。模式控件、工具按钮和列表行是否保持稳定尺寸。编辑区是否获得最大空间侧栏是否过度卡片化。当前文档、修改状态、编码和换行信息是否可扫描。禁用能力是否仍能辨认原因空状态是否提供有效动作。还应分别截取宽窗口、阈值附近、最小窗口和大文件模式。单张最大化截图容易掩盖所有响应式问题。自动化截图适合比较 Web 内部布局鸿蒙模拟器和真机截图负责系统窗口、原生控件与 ArkWeb 的完整组合。后续工作台演进的边界多标签、命令面板、全局搜索、设置和插件都会增加工作台复杂度。扩展时应尽量沿现有区域生长全局工具进入活动栏当前工具内容进入上下文侧栏文档进入标签和编辑区短暂命令反馈进入状态栏或对话框。不要为每个新功能增加一张独立浮动卡片也不要让设置项混进编辑主路径。多标签实现还要明确“一个标签对应一个编辑状态”还是切换时重新加载内容。前者内存更高但能保留撤销栈和选区后者必须可靠保存每个会话状态。这个决定会影响 ArkWeb 生命周期和大文档内存不能只在 UI 层复制几个标签按钮。鸿蒙 PC 工作台验收清单在 640、900、1280、1440vp 及阈值附近连续缩放没有重叠和抖动。侧栏隐藏和恢复不重建文档不丢失光标、选区和撤销历史。Source、Split、Preview 的语义互斥窄窗口分栏仍可阅读。长文件名、中文名、超长单词和修改星号不挤压核心命令。文件列表、编辑器、预览区分别滚动触控板行为可预测。键盘焦点能够在原生控件和 ArkWeb 之间正确转移。系统文件选择器返回后可以继续输入IME 组合文本不被快捷键破坏。大文件模式下控件不跳位禁用状态和原因清楚。空状态、错误状态、加载状态和执行中状态都可以辨认。模拟器证据与鸿蒙 PC 真机证据分开记录不用前者替代后者。鸿蒙 PC 工作台的质量并不取决于侧栏数量而取决于状态是否稳定、空间是否让给内容、输入设备是否被认真对待。ArkUI 外壳负责系统能力和桌面结构ArkWeb 负责成熟文本编辑两者在清楚的状态边界内协作才能让一个混合应用表现得像完整的桌面工具。无障碍不是移动端专属要求桌面用户可能依赖键盘导航、屏幕阅读器、高对比度或系统缩放。图标按钮不能只有视觉形状应提供可访问名称当前文档、修改状态和禁用原因需要被辅助技术感知焦点顺序应与视觉顺序一致。颜色不能成为唯一状态信号。当前文件除了背景变化还可以结合文字权重或语义标记保存失败除了红色状态还要有明确文本模式按钮的选中状态要通过组件语义暴露。触控目标和键盘焦点区域应保持一致避免用户看到焦点却无法按 Enter 触发。系统字体缩放下要检查工具栏、标签和对话框。桌面界面可以保持紧凑但文字不能被固定高度裁掉超长中文和英文单词需要截断、换行或动态约束。无障碍验收应在应用内部完成而不是只看 Web 编辑区。中英文与本地化会改变布局当前界面存在 Source、Split、Preview、Open Folder 等英文命令。未来中文本地化后文本长度和断行会变化固定宽度按钮必须提前验证最长语言。图标工具适合使用熟悉符号并配工具提示明确命令可以使用图标加文字不要为了省空间用用户无法理解的自绘符号。文件名、目录名和正文天然支持 Unicode。排序、大小写和截断不能只按 ASCII从右到左语言、组合字符和 emoji 可能让字符数量与视觉宽度不一致。布局层应依赖系统文本测量和弹性容器不用文件名长度乘固定字符宽度。日期、时间、字数和文件大小也应通过本地化格式输出。状态栏空间不足时按信息优先级降级而不是强制缩小字体。状态更新要避免整棵工作台重建编辑过程中字数、脏状态和恢复状态会频繁变化。如果每条 Bridge 消息都导致整个 ArkUI 树和 ArkWeb 组件重建光标、选区、滚动和 IME 都会受影响。高频状态应局部更新Web 组件身份保持稳定。列表展开、当前文件高亮和操作状态同样要控制粒度。文件夹含大量条目时展开一个目录不应重新 stat 所有已展开目录状态栏字数更新不应重排标签窗口onAreaChange只改变必要布局。性能分析可以通过日志或工具观察 ArkUI 重建次数和 ArkWeb 生命周期避免把卡顿错误归因于 CodeMirror。对话框是数据状态机的一部分未保存切换、Mixed EOL、恢复草稿和保存中断都需要用户决策。对话框不能只作为视觉覆盖层它必须与后台任务有确定关系显示期间暂停会覆盖数据的动作用户取消后恢复原状态重复点击不能启动多个保存窗口关闭不能被当作默认确认。多个启动异常同时存在时要定义顺序例如先处理可能受损的保存备份再询问未保存草稿。对话框文字应说明将保留或替换哪一份内容但不展示过长路径导致窗口溢出。键盘默认按钮也要谨慎涉及覆盖和丢弃时不应让 Enter 轻易执行破坏性动作。工作区树的桌面交互细节目录树是高频区域需要支持展开、折叠、当前项、空目录、截断和错误。目录在文件之前排序层级缩进稳定点击展开图标只改变目录状态点击文件才替换编辑会话。未保存文档切换前必须确认选择取消后当前高亮和正文保持不变。大型工作区不应一次递归扫描。首层读取后按需展开子目录设置条目上限并在截断时显示状态。目录监听、刷新和索引可以后续加入但刷新不能让已打开文档突然失去身份。符号链接与授权根边界需要安全策略不能仅靠视觉层级判断真实路径。键盘体验应包括上下移动、左右展开折叠、Enter 打开、焦点回到编辑器。拖拽、重命名、删除属于高风险后续能力应在文件保护和撤销策略明确后再加入。多窗口与多标签不是同一个概念标签是在一个应用窗口内管理多个文档会话多窗口是系统级窗口和生命周期。一个窗口可以有多个标签同一文档也可能在两个窗口打开。两者都涉及并发保存、外部修改和内存却不能用同一个布尔状态解决。多标签需要每个文档的 URI、格式、持久化基线、脏状态、撤销和恢复身份多窗口还要决定会话是否共享、关闭最后窗口是否退出、系统恢复窗口时加载什么。若两个窗口编辑同一 URI保存冲突检测必须工作不能因为都来自本应用就互相覆盖。在实现前先测单个 ArkWeb 会话内存和文档切换成本再决定一个窗口创建多个 Web 组件还是复用活动组件。UI 标签数量不能先于会话模型无限扩展。视觉回归与交互回归如何分工视觉截图适合发现重叠、裁剪、间距和状态缺失交互自动化适合验证点击、焦点、窗口缩放和文档保持。两者都要使用稳定夹具超长中文文件名、长英文单词、空目录、多级目录、大文档和错误状态。截图比较要容忍系统字体渲染和模拟器细微差异但对结构变化设置明确阈值。关键尺寸建议至少保留宽、窄和最小窗口。应用内部图片应同时显示工作台和相关结果例如恢复对话框、格式状态或展开目录而不是只截桌面背景。真机交互录屏可以补充触控板惯性、拖动窗口和 IME 候选等难以自动断言的行为。报告中明确哪些是视觉通过、哪些是操作通过。