企业官网建设流程全解析

鸿蒙 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.activePanel===panel){this.sidebarOpen=!this.sidebarOpen;return;}this.activePanel=panel;this.sidebarOpen=true;// 搜索和大纲额外处理}

活动栏不承载业务内容，只决定264vp区域显示什么。文件树、查找、大纲和导出互斥，避免四个侧栏同时挤压正文。

上下文面板共享骨架

每个面板宽264、高100%，背景和右边框一致；顶部42vp标题行，下面内容列表或表单。共享稳定尺寸让切换不造成编辑区水平跳动。

文件面板顶部提供打开文件夹和文档的图标命令；无工作区时中部显示空状态与两个清晰动作；有工作区时显示根名称、截断提示和 List。

搜索面板需要输入和选项，大纲使用 List，导出使用两个按钮。功能形态不同，但标题和边界一致。

侧栏在窄窗口自动隐藏

privateshouldShowSidebar():boolean{returnthis.sidebarOpen&&this.windowWidth>=900;}

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同一行。向前向后使用箭头图标，匹配数放标题行。Ctrl+F后输入框自动聚焦。

面板宽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-mode='split']{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遍历和焦点环仍需补齐。

关闭、同步和活动按钮有 accessibilityText；dirty标签还需要把“未保存”加入读屏名称。状态不能只靠星号和颜色。

当前边界

低于900没有覆盖式侧栏；状态栏窄屏优先级未完善；标签虽可水平滚动但无溢出菜单；拖放、右键、多窗口和命令面板未实现；部分英文文案未本地化；真机多窗口待验证。

信息密度如何继续增长

后续加入图片、链接、Front Matter、Git和历史时，不能为每项再添加一条永久侧栏。新能力应先判断属于文档导航、编辑命令、文档属性还是全局设置，再进入现有上下文面板、命令面板或非阻断弹层。活动栏只保留高频一级任务，避免图标不断增长。

文件树行不应同时塞入 Git徽标、字数、更新时间和同步状态；这些信息可在悬停、右键或详情面板按需出现。标签只保留名称、dirty和关闭，编码与换行继续放状态栏。每项事实有唯一主要位置，减少重复和冲突。

新增工具栏命令要做宽度预算：最小窗口下高频命令仍可见，低频命令进入菜单；熟悉动作使用图标和 tooltip，危险动作保留文字确认。UI增长以工作流次数和错误成本排序，不以功能清单逐项占位。

视觉回归与布局断言

人工截图适合观察整体，但还应自动读取关键元素尺寸：活动栏和侧栏宽度、顶栏和状态栏高度、编辑器可用宽度、标签/命令是否超出容器、窄窗口 Grid行列数。最长文件名、最长错误消息和十二标签作为压力数据。

每次资源本地化后跑同一矩阵，中文、英文和未来德文长度差异可能让按钮溢出。断言不要求每个像素固定，要求没有重叠、不可见命令和负尺寸。设计系统的稳定性应由响应约束证明，而不是只选一张最好看的截图。

结语

OhMarkdown桌面信息架构把高频路径压缩在连续工作面：活动栏选择上下文，264vp侧栏承载文件/搜索/大纲，顶部标签与命令，中央编辑器，底部显示文档事实。900和760两个断点分别保护原生侧栏与 Web分栏。

鸿蒙 PC生产力界面不需要用大卡片解释功能。稳定尺寸、明确层级、键盘焦点和自由窗口下不重叠，才是用户每天愿意停留的工作台。