鸿蒙 PC Markdown 编辑器桌面信息架构文件树、标签、编辑器与大纲PC编辑器的界面不是卡片集合而是高频工作面。用户视线需要在文件树、标签、源码、预览、大纲和状态之间快速移动同时窗口可以自由缩放。信息架构如果层级过多、控件尺寸漂移或侧栏挤压正文再多功能也会降低效率。本文基于 OhMarkdown分析活动栏、上下文侧栏、标签工具栏、编辑器和状态栏五层结构以及900vp、760px和640vp边界。代码位于 https://gitcode.com/VON-/codex_md_oh工作台是水平主结构build(){Row(){this.activityRail()if(this.shouldShowSidebar()){this.contextualPanel()}this.editorWorkspace()}.width(100%).height(100%).constraintSize({minWidth:640,minHeight:480})}最左活动栏固定窄宽中央上下文面板264vp右侧编辑工作区layoutWeight(1)占剩余。页面不是多个浮动卡片分隔线建立连续工作面适合扫描和拖动窗口。最小640×480保证核心工具栏和编辑区仍可操作。真正窗口管理还应在系统层设置最小尺寸组件 constraint是内部防线。活动栏只负责切换上下文活动栏入口包括文件、搜索、大纲和更多/导出。按钮使用系统 symbol、固定尺寸、选择态背景和 accessibilityText不用大段文字。同一个 panel再次点击切换侧栏开关点击另一个 panel打开并切换privateselectPanel(panel:string):void{if(this.activePanelpanel){this.sidebarOpen!this.sidebarOpen;return;}this.activePanelpanel;this.sidebarOpentrue;// 搜索和大纲额外处理}活动栏不承载业务内容只决定264vp区域显示什么。文件树、查找、大纲和导出互斥避免四个侧栏同时挤压正文。上下文面板共享骨架每个面板宽264、高100%背景和右边框一致顶部42vp标题行下面内容列表或表单。共享稳定尺寸让切换不造成编辑区水平跳动。文件面板顶部提供打开文件夹和文档的图标命令无工作区时中部显示空状态与两个清晰动作有工作区时显示根名称、截断提示和 List。搜索面板需要输入和选项大纲使用 List导出使用两个按钮。功能形态不同但标题和边界一致。侧栏在窄窗口自动隐藏privateshouldShowSidebar():boolean{returnthis.sidebarOpenthis.windowWidth900;}onAreaChange更新 windowWidth。低于900时隐藏264vp面板保留活动栏和编辑器防止正文变成过窄条。用户回到宽窗口时sidebarOpen意图仍在面板可恢复。隐藏不等于功能消失活动栏仍可表达入口当前低于900时即使点击也因条件隐藏后续可改为覆盖式抽屉。PC优先不代表窄窗口不用设计。编辑工作区的垂直结构Column(){this.tabBar()this.editorSurface()this.statusBar()}.layoutWeight(1).height(100%)顶部42vp标签工具栏中间 Web填满底部26vp状态栏。固定上下高度让动态字数、dirty和标签不会推挤编辑区。编辑器是主要任务面不放在装饰卡片里。Web宽高100%、layoutWeight 1窗口变化直接传给 CodeMirror布局。标签与命令共用顶栏标签区水平滚动并占可用空间Scroll(){Row(){ForEach(this.documentSessions,...)this.iconButton($r(sys.symbol.plus),$r(app.string.new_document),()this.requestEditorCommand(new))}}.layoutWeight(1).scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)右侧 Open、Save、Source/Split/Preview、Sync和侧栏切换保持固定。标签多时只滚动标签区不把命令挤出。单标签宽156标题省略关闭按钮22×22。模式使用分段控件表达互斥选择Sync使用 Toggle表达二元状态。Open/Save是明确命令使用文字按钮。控件语义与交互类型一致。状态栏只放可扫描事实左侧操作状态右侧字数/大文件、Markdown、UTF-8/BOM、LF/CRLF/Mixed。文本11vp、单行操作状态可省略右侧使用固定间距。Text(this.largeDocumentMode?$r(app.string.large_file_mode):${this.wordCount}words)Text($r(app.string.markdown_label))Text(this.documentFormat.hasUtf8Bom?$r(app.string.encoding_utf8_bom):$r(app.string.encoding_utf8))状态栏不显示教程只反馈当前文档事实。将 BOM和换行可视化让无损保存不再是隐藏实现。窄窗口右侧文本可能拥挤后续应按优先级隐藏低价值项或进入菜单不能允许重叠。文件树是导航不是项目管理器根目录名称单行省略目录和 Markdown文件列表使用稳定 URI key。节点行按 depth缩进目录图标/展开箭头与文件图标区分。点击目录展开点击文件进入会话。当前不显示图片、Git状态、右键重命名和复杂资源操作保持 Alpha范围。信息架构为未来增加功能留入口但不提前塞占位控件。搜索面板面向键盘查询框第一替换框第二Case/Whole/Regex同一行Replace/Replace All同一行。向前向后使用箭头图标匹配数放标题行。CtrlF后输入框自动聚焦。面板宽264标签短小长本地化文字可能换行需要后续国际化测试。当前英文按钮与中文应用目标还需统一资源化。大纲表达层级每项显示 H级别、标题和行号缩进.padding({left:8(entry.level-1)*10,right:10})标题单行省略行号弱化。点击整行跳转不放额外“前往”按钮。层级通过缩进与 H数字双重表达不只靠颜色。Web 内部分栏响应宽窗口 Source/Split/Preview由 CSS Grid控制。Split两列各minmax(0,1fr)避免长代码撑破。低于760px改为上下两行media(max-width:760px){#workspace[data-modesplit]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)minmax(0,1fr);}}ArkUI在900隐藏侧栏Web在760重排分栏两层断点职责不同。需要跨断点连续缩放验证避免外壳和 Web各自判断造成中间拥挤。主题保持层级亮暗资源为 background、surface、subtle surface、rail、control、selected和多级 text提供语义色。深色不是整页单一黑色侧栏、活动栏和编辑区仍有边界。强调绿色只用于活动、主操作和链接不让界面成为单一绿色主题。危险放弃使用红色格式警告使用琥珀色语义颜色分工明确。鸿蒙 PC 完整工作台下图展示活动栏、Documents面板、标签、工具栏、源码编辑器和状态栏下一屏功能不依赖营销首页。模拟器还保存搜索、大纲、工作区、分栏和深色专项图。完整工作台图适合检查总体层级专项图检查交互状态。自由窗口测试矩阵至少验证640、720、900、1280、1440vp。每档检查侧栏可见规则标签滚动Open/Save与模式不溢出状态栏不重叠Web分栏方向长文件名和长错误文案。还要测试系统字体缩放、中文/英文资源、最大化、分屏和前后台。不能用 viewport字体缩放做响应式字体遵循系统设置。焦点顺序键盘顺序应从活动栏到侧栏控件、标签、工具栏、编辑器和状态栏可交互项。当前核心依赖鼠标与快捷键完整 Tab遍历和焦点环仍需补齐。关闭、同步和活动按钮有 accessibilityTextdirty标签还需要把“未保存”加入读屏名称。状态不能只靠星号和颜色。当前边界低于900没有覆盖式侧栏状态栏窄屏优先级未完善标签虽可水平滚动但无溢出菜单拖放、右键、多窗口和命令面板未实现部分英文文案未本地化真机多窗口待验证。信息密度如何继续增长后续加入图片、链接、Front Matter、Git和历史时不能为每项再添加一条永久侧栏。新能力应先判断属于文档导航、编辑命令、文档属性还是全局设置再进入现有上下文面板、命令面板或非阻断弹层。活动栏只保留高频一级任务避免图标不断增长。文件树行不应同时塞入 Git徽标、字数、更新时间和同步状态这些信息可在悬停、右键或详情面板按需出现。标签只保留名称、dirty和关闭编码与换行继续放状态栏。每项事实有唯一主要位置减少重复和冲突。新增工具栏命令要做宽度预算最小窗口下高频命令仍可见低频命令进入菜单熟悉动作使用图标和 tooltip危险动作保留文字确认。UI增长以工作流次数和错误成本排序不以功能清单逐项占位。视觉回归与布局断言人工截图适合观察整体但还应自动读取关键元素尺寸活动栏和侧栏宽度、顶栏和状态栏高度、编辑器可用宽度、标签/命令是否超出容器、窄窗口 Grid行列数。最长文件名、最长错误消息和十二标签作为压力数据。每次资源本地化后跑同一矩阵中文、英文和未来德文长度差异可能让按钮溢出。断言不要求每个像素固定要求没有重叠、不可见命令和负尺寸。设计系统的稳定性应由响应约束证明而不是只选一张最好看的截图。结语OhMarkdown桌面信息架构把高频路径压缩在连续工作面活动栏选择上下文264vp侧栏承载文件/搜索/大纲顶部标签与命令中央编辑器底部显示文档事实。900和760两个断点分别保护原生侧栏与 Web分栏。鸿蒙 PC生产力界面不需要用大卡片解释功能。稳定尺寸、明确层级、键盘焦点和自由窗口下不重叠才是用户每天愿意停留的工作台。
