sincos.cc-website/website/static/tool-sequence-diagram.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sequence-Diagram 时序图设计器 | Easy Data Collection</title>
<meta name="description" content="Sequence Diagram Studio —— 面向 PLC 流程节拍与相位角设计的 Flutter 桌面软件：条形节拍与圆周节拍双视图、FS/SS 依赖、关键路径、SVG/PNG 导出。">
<meta name="keywords" content="Sequence-Diagram, 时序图设计器, PLC 节拍, 相位角, 甘特图, Flutter">
<link rel="stylesheet" href="/static/css/style.css">
<link rel="icon" href="/static/img/logo.svg" type="image/svg+xml">
<script src="/static/js/nav.js"></script>
</head>
<body>

<header class="site-header">
  <div class="container header-inner">
    <a class="brand" href="/">
      <img src="/static/img/logo.svg" alt="Easy Data Collection">
      <span class="brand-name">Easy Data Collection</span>
    </a>
    <nav class="main-nav" id="mainNav">
      <div class="nav-item has-dropdown">
        <a class="nav-link" href="/research/">前沿技术研究</a>
        <button class="nav-caret" type="button" aria-label="展开前沿技术研究">▾</button>
        <div class="dropdown">
          <a href="http://124.220.63.9:25000">Research Digest</a>
          <a href="/research/neural/">Neural Research</a>
          <a href="/research/reslib/">ResLib</a>
        </div>
      </div>
      <div class="nav-item has-dropdown">
        <a class="nav-link active" href="/tools/">工具开发</a>
        <button class="nav-caret" type="button" aria-label="展开工具开发">▾</button>
        <div class="dropdown">
          <a class="active" href="/tools/sequence-diagram/">Sequence-Diagram</a>
          <a href="/tools/uni-viewer/">Uni-Viewer</a>
          <a href="/tools/engineer-craft/">Engineer Craft</a>
          <a href="/tools/five-phases-observer/">The Five Phases Observer</a>
          <a href="/tools/unitouch/">UniTouch Interface</a>
          <a href="/tools/edc-lite-erp/">EDC Lite ERP</a>
        </div>
      </div>
      <a class="nav-link" href="/resources/">资源中心</a>
      <div class="nav-item has-dropdown">
        <a class="nav-link" href="/license/">License</a>
        <button class="nav-caret" type="button" aria-label="展开 License">▾</button>
        <div class="dropdown">
          <a href="/license/apply">申请 License</a>
          <a href="/license/status">查询 / 下载</a>
          <a href="/license/package">资源包获取</a>
        </div>
      </div>
      <a class="nav-link" href="/blog/">博客</a>
    </nav>
    <button class="nav-toggle" id="navToggle" aria-label="菜单">☰</button>
  </div>
</header>

<main>
  <section class="page-hero">
    <div class="container">
      <p class="hero-eyebrow">工具开发 · FLUTTER DESKTOP</p>
      <h1>时序图设计器<br>Sequence Diagram Studio</h1>
      <p class="page-hero-sub">面向 PLC 流程节拍设计 / 相位角设计的桌面设计软件。条形节拍与圆周节拍两种视图共享同一份数据，让动作顺序、依赖关系与关键路径一目了然。</p>
      <div class="hero-actions">
        <a href="http://124.220.63.9:30000/admin/Sequence-Diagram" class="btn btn-light">项目主页（Gitea）</a>
        <a href="/tools/" class="btn btn-outline-light">返回工具开发</a>
      </div>
      <div class="hero-stats">
        <div class="hero-stat"><b>双视图</b><span>条形节拍 ⇄ 圆周节拍</span></div>
        <div class="hero-stat"><b>1000+</b><span>动作仍保持 60 fps</span></div>
        <div class="hero-stat"><b>V1.1.1</b><span>Flutter Windows 正式版</span></div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="section-head">
        <h2 class="section-title">已实现功能</h2>
        <p class="section-desc">从节拍建模、拖拽编辑到导出交付，覆盖 PLC 工艺设计的完整工作流。</p>
      </div>
      <div class="grid">
        <div class="card"><div class="icon">⇄</div><h3>两种视图，一份数据</h3><p>条形节拍（甘特 / 流程图 + 依赖箭头）与圆周节拍（同心圆相位图，12 点钟起始，一圈 = 一个循环）顶部一键切换。</p></div>
        <div class="card"><div class="icon">↦</div><h3>顺序一目了然</h3><p>绿色实线箭头 = FS 严格顺序（完成后启动），琥珀虚线 = SS 并行重叠（可提前启动），关键路径带 ★ 高亮。</p></div>
        <div class="card"><div class="icon">◷</div><h3>专业单位体系</h3><p>时间 ms / s / min、相位 ° / %、显示精度可配，工艺参数面板（F2）统一管理并内置换算表。</p></div>
        <div class="card"><div class="icon">⚡</div><h3>响应快</h3><p>自研 Canvas 渲染，双层缓存 + 脏区重绘 + 空间索引，1000 个动作仍保持 60 fps。</p></div>
        <div class="card"><div class="icon">✎</div><h3>拖拽编辑与工位管理</h3><p>拖拽编辑相位、拖端点改持续角、Shift + 拖拽改层、双击空白新建动作；工位可增删、改名、调色、排序。</p></div>
        <div class="card"><div class="icon">▦</div><h3>节拍统计</h3><p>循环周期 / 动作数 / 关键路径 / 最大并行度 / 相位覆盖率 / 瓶颈工位，只展示可由项目数据推导的指标。</p></div>
        <div class="card"><div class="icon">☀</div><h3>深色 / 浅色双主题</h3><p>右上角一键切换（F3），语义颜色不变，导出 SVG 与屏幕一致。</p></div>
        <div class="card"><div class="icon">⤓</div><h3>导出 SVG / PNG</h3><p>SVG 矢量、分层、带语义 id 与 data-* 元数据，可直接进工艺卡与 MES；PNG 按 2 倍像素比导出。</p></div>
        <div class="card"><div class="icon">⛨</div><h3>可靠性与帮助</h3><p>自动定时快照 + 启动崩溃恢复 + .bak 备份；应用内帮助中心（F1）与完整使用文档。</p></div>
      </div>
    </div>
  </section>

  <section class="section section-alt">
    <div class="container narrow">
      <h2 class="section-title">技术栈</h2>
      <p class="section-desc">Flutter 3.29+（Desktop） · CustomPainter 自绘 · Riverpod · 不可变模型 + Command 撤销栈 · 纯 Dart 几何算法 · 自研 SVG 序列化器 · JSON（.seq.json）持久化 · 主题 Token 化</p>
      <div class="pill-row">
        <span class="pill">Flutter 3.29+</span>
        <span class="pill">CustomPainter</span>
        <span class="pill">Riverpod</span>
        <span class="pill">Command 撤销栈</span>
        <span class="pill">SVG 序列化</span>
        <span class="pill">JSON 持久化</span>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <h2 class="section-title">路线图</h2>
      <div class="grid">
        <div class="card"><h3>M1 · 基础建模</h3><p>数据模型 + 单位体系 + JSON 存取 + 条形视图（渲染 / 缩放 / 平移）。</p></div>
        <div class="card"><h3>M2 · 双视图交互</h3><p>圆周视图 + 双视图切换动画 + 拖拽吸附 + 属性面板 + 撤销重做。</p></div>
        <div class="card"><h3>M3 · 导出与统计</h3><p>SVG / PNG 导出 + 依赖编辑 + 关键路径与统计 + 深浅主题 + Golden 测试。</p></div>
        <div class="card"><h3>M4 · 产线对接</h3><p>PLC 点位对接（OPC UA / 三菱 MC / Modbus）+ 工艺卡 PDF + 自动节拍优化。</p></div>
      </div>
      <p class="section-desc mt-32">设计人：呆头鹅 · 版本 V1.1.1 · Copyright © 2026 呆头鹅。保留所有权利。</p>
    </div>
  </section>
</main>

<footer class="site-footer">
  <div class="container footer-inner">
    <div class="footer-brand">
      <img src="/static/img/logo.svg" alt="">
      <span>Easy Data Collection</span>
    </div>
    <span>Copyright &copy; 2026 Easy Data Collection. All rights reserved.</span>
    <span class="footer-links">
      <a href="/resources/">资源中心</a><span class="sep">·</span>
      <a href="/license/">License</a><span class="sep">·</span>
      <a href="/admin">管理页面</a><span class="sep">·</span>
      <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">苏ICP备2026056863号</a>
    </span>
  </div>
</footer>

</body>
</html>