ProcessForge™ 企业级流程设计平台

<!-- 添加元素工具箱侧边面板 -->
<div class="tools-panel-container">
    <div class="tools-panel-header">
        <span>元素工具箱</span>
        <button id="tools-panel-toggle" class="tools-toggle-btn" title="收起/展开工具箱">
            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
        </button>
    </div>
    <div class="tools-panel-content" id="tools-panel-content">
        <!-- 工具面板内容会动态生成 -->
    </div>
</div>

<div class="bpmn-side-toolbar" id="bpmn-side-toolbar">
    <button class="toolbar-toggle" id="toggle-toolbar" title="展开/收起工具栏">
        <span id="toolbar-toggle-icon"><svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></span>
    </button>
</div>

<div id="loading-indicator" class="loading-indicator">
    <div class="spinner-container">
        <div class="spinner"></div>
    </div>
    <span class="loading-text">加载中...</span>
</div>

<div class="bpmn-editor-container">
    <div class="bpmn-editor-main-area"> <!-- NEW: Wrapper for canvas and properties panel -->
        <div id="bpmn-canvas" class="bpmn-canvas"></div>
        <div id="properties-panel-parent" class="properties-panel-container"></div> <!-- NEW: Properties Panel Container -->
    </div>
    
    <div id="status-bar" class="status-bar">
        <span id="status-message">准备就绪</span>
        <div class="status-actions">
            <div class="zoom-controls">
                <button id="zoom-out" class="zoom-btn" title="缩小"><svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19 13H5v-2h14v2z"/></svg></button>
                <span id="zoom-level">100%</span>
                <button id="zoom-in" class="zoom-btn" title="放大"><svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"/></svg></button>
                <button id="zoom-fit" class="zoom-btn" title="适应窗口"><svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3h-6zM3 9l2.3-2.3 2.87 2.89 1.42-1.42L5.3 5.3 9 3H3v6zm6 12l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3 3 15v6h6zm12-6l-2.3 2.3-2.87-2.89-1.42 1.42 2.89 2.87L15 21h6v-6z"/></svg></button>
            </div>
            <button id="resize-toggle" class="size-toggle-btn" title="调整编辑器高度">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
            </button>
        </div>
    </div>
</div>