system-design-workbench/index.html at main · estelledc/system-design-workbench · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Agent-first 多文档阅读包转换，以及离线系统设计练习、确定性分析与证据导出工具。"
    />
    <title>System Design Workbench</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <a class="skip-link" href="#graph-surface">跳到架构画布</a>
    <header class="topbar">
      <div class="brand-block">
        <p class="eyebrow">SYSTEM DESIGN WORKBENCH · v1.0.0</p>
        <h1>把文档与架构判断变成可检查的证据</h1>
      </div>
      <div class="topbar-actions" aria-label="方案操作">
        <label class="field compact-field">
          <span>练习场景</span>
          <select id="scenario-select"></select>
        </label>
        <label class="field title-field">
          <span>方案名称</span>
          <input id="design-title" maxlength="120" />
        </label>
        <button id="undo-button" class="button subtle" type="button">撤销</button>
        <button id="redo-button" class="button subtle" type="button">重做</button>
        <button id="reset-button" class="button danger-quiet" type="button">重置</button>
      </div>
    </header>

    <div class="heuristic-banner" role="note">
      Agent 批量转换由 <code>sdw transform</code> 提供；本页是人工架构练习台。模拟与评分不是压测、SLA 或生产认证。
      <span id="save-status" role="status" aria-live="polite">本地自动保存</span>
    </div>

    <main class="workspace">
      <aside class="left-panel panel" aria-label="场景与组件">
        <section class="panel-section scenario-card" aria-labelledby="scenario-heading">
          <p class="section-kicker">当前问题</p>
          <h2 id="scenario-heading"></h2>
          <p id="scenario-summary" class="muted"></p>
          <dl id="scenario-targets" class="target-grid"></dl>
          <h3>必须解释</h3>
          <ul id="scenario-requirements" class="compact-list"></ul>
        </section>

        <section class="panel-section" aria-labelledby="palette-heading">
          <div class="section-heading-row">
            <div>
              <p class="section-kicker">构件</p>
              <h2 id="palette-heading">点击加入画布</h2>
            </div>
          </div>
          <div id="component-palette" class="component-palette"></div>
        </section>

        <section class="panel-section" aria-labelledby="checklist-heading">
          <p class="section-kicker">面试控制流</p>
          <h2 id="checklist-heading">阶段证据</h2>
          <div id="interview-checklist" class="checklist"></div>
        </section>
      </aside>

      <section class="canvas-panel" aria-labelledby="canvas-heading">
        <div class="canvas-toolbar">
          <div>
            <p class="section-kicker">架构模型</p>
            <h2 id="canvas-heading">数据流画布</h2>
          </div>
          <div class="toolbar-actions">
            <button id="connect-button" class="button" type="button">连接所选节点</button>
            <button id="delete-button" class="button danger-quiet" type="button">删除所选</button>
            <button id="incident-button" class="button accent" type="button">运行故障推演</button>
          </div>
        </div>
        <div id="connection-hint" class="connection-hint" hidden></div>
        <div class="graph-viewport">
          <div
            id="graph-surface"
            class="graph-surface"
            role="application"
            aria-label="系统设计架构画布。节点可拖动，选中节点后可连接。"
            tabindex="0"
          >
            <svg id="edge-layer" class="edge-layer" aria-hidden="true"></svg>
            <div id="node-layer" class="node-layer"></div>
            <div id="empty-canvas" class="empty-canvas" hidden>
              <strong>从左侧加入第一个组件</strong>
              <span>建议先放客户端入口，再沿数据流逐步展开。</span>
            </div>
          </div>
        </div>
        <footer class="canvas-legend" aria-label="画布图例">
          <span><i class="legend-dot healthy"></i>余量充足</span>
          <span><i class="legend-dot hot"></i>利用率 ≥ 80%</span>
          <span><i class="legend-dot overloaded"></i>超过配置容量</span>
          <span>拖动节点调整位置；Delete 删除；⌘/Ctrl+Z 撤销</span>
        </footer>
      </section>

      <aside class="right-panel panel" aria-label="检查、评分与导出">
        <section class="score-hero" aria-labelledby="score-heading">
          <div>
            <p class="section-kicker">透明评分</p>
            <h2 id="score-heading">当前方案</h2>
          </div>
          <div class="score-number"><strong id="score-value">0</strong><span>/100</span></div>
          <p id="score-disclaimer" class="muted"></p>
        </section>

        <section class="panel-section" aria-labelledby="analysis-heading">
          <div class="section-heading-row">
            <div>
              <p class="section-kicker">确定性分析</p>
              <h2 id="analysis-heading">估算结果</h2>
            </div>
          </div>
          <div id="metric-grid" class="metric-grid"></div>
          <div id="analysis-warnings" class="warning-list"></div>
          <div id="score-dimensions" class="dimension-list"></div>
        </section>

        <section id="incident-section" class="panel-section incident-section" hidden aria-labelledby="incident-heading">
          <p class="section-kicker">故障推演</p>
          <h2 id="incident-heading">退化结果</h2>
          <div id="incident-result"></div>
        </section>

        <section class="panel-section" aria-labelledby="inspector-heading">
          <p class="section-kicker">属性</p>
          <h2 id="inspector-heading">节点检查器</h2>
          <div id="node-inspector" class="inspector-empty muted">选择一个节点后编辑容量、延迟、副本和成本。</div>
          <div id="edge-list" class="edge-list"></div>
        </section>

        <section class="panel-section" aria-labelledby="tradeoff-heading">
          <p class="section-kicker">设计证据</p>
          <h2 id="tradeoff-heading">权衡记录</h2>
          <div id="tradeoff-list" class="tradeoff-list"></div>
          <form id="tradeoff-form" class="tradeoff-form">
            <label class="field">
              <span>选择</span>
              <input name="decision" required maxlength="200" placeholder="例如：加入异步队列" />
            </label>
            <label class="field">
              <span>备选</span>
              <input name="alternative" required maxlength="200" placeholder="例如：同步调用下游" />
            </label>
            <label class="field">
              <span>理由与代价</span>
              <textarea name="rationale" required maxlength="500" rows="3"></textarea>
            </label>
            <button class="button" type="submit">记录权衡</button>
          </form>
        </section>

        <section class="panel-section" aria-labelledby="thinking-heading">
          <p class="section-kicker">留给后续提问</p>
          <h2 id="thinking-heading">关键思考点</h2>
          <ol id="thinking-questions" class="compact-list numbered"></ol>
        </section>

        <section class="panel-section" aria-labelledby="export-heading">
          <p class="section-kicker">可复用工件</p>
          <h2 id="export-heading">导入与导出</h2>
          <div class="export-grid">
            <button id="export-json-button" class="button" type="button">下载 JSON</button>
            <button id="export-markdown-button" class="button" type="button">下载 Markdown</button>
            <button id="copy-mermaid-button" class="button" type="button">复制 Mermaid</button>
            <label class="button file-button">
              导入 JSON
              <input id="import-input" type="file" accept="application/json,.json" />
            </label>
          </div>
          <p id="action-status" class="action-status" role="status" aria-live="polite"></p>
        </section>
      </aside>
    </main>

    <script type="module" src="./src/app.js"></script>
  </body>
</html>