修改

public/css/style.css

@@ -57,12 +57,106 @@ body {
   gap: 8px;
 }
 
+.toolbar-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-top: 10px;
+}
+
+.row-label {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  min-width: 4.5em;
+}
+
 .toolbar-hint {
   margin-top: 8px;
   font-size: 0.8rem;
   color: var(--text-muted);
 }
 
+.zoom-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 2px 4px;
+}
+
+.zoom-label {
+  min-width: 3.2em;
+  text-align: center;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.btn-icon {
+  min-width: 32px;
+  padding: 7px 10px;
+  font-size: 1rem;
+  line-height: 1;
+}
+
+.direction-pad {
+  display: grid;
+  grid-template-columns: repeat(3, 36px);
+  grid-template-rows: repeat(3, 32px);
+  gap: 4px;
+}
+
+.dir-btn {
+  min-width: 0;
+  padding: 4px;
+  font-size: 0.95rem;
+}
+
+.dir-btn.active {
+  background: rgba(74, 158, 255, 0.25);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.dir-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  background: var(--bg);
+  border-radius: 4px;
+  border: 1px dashed var(--border);
+}
+
+.angle-slider-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.angle-slider-wrap input[type="range"] {
+  width: 120px;
+  accent-color: var(--accent);
+}
+
+.angle-input {
+  width: 52px;
+  padding: 4px 6px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 0.8rem;
+}
+
+.angle-unit {
+  color: var(--text-muted);
+}
+
 .btn {
   display: inline-flex;
   align-items: center;
@@ -146,25 +240,35 @@ body {
 .workspace {
   flex: 1;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
   padding: 16px;
-  overflow: auto;
   min-height: 0;
+  overflow: hidden;
 }
 
 .drop-zone {
   width: 100%;
   max-width: 1400px;
+  margin: 0 auto;
+  flex: 1;
   min-height: 400px;
   border: 2px dashed var(--border);
   border-radius: 8px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   transition: border-color 0.2s, background 0.2s;
 }
 
+.drop-zone:has(.viewport:not(.hidden)) {
+  border-style: solid;
+  border-color: var(--border);
+  background: #111;
+  padding: 0;
+  align-items: stretch;
+}
+
 .drop-zone.drag-over {
   border-color: var(--accent);
   background: rgba(74, 158, 255, 0.06);
@@ -187,24 +291,32 @@ body {
   font-size: 0.8rem;
 }
 
-.canvas-wrap {
-  position: relative;
-  line-height: 0;
-  max-width: 100%;
-}
-
 .hidden {
   display: none !important;
 }
 
-.canvas-wrap.hidden {
-  display: none;
+.viewport {
+  flex: 1;
+  width: 100%;
+  min-height: 420px;
+  max-height: calc(100vh - 240px);
+  overflow: auto;
+  background: #111;
+  cursor: default;
+}
+
+.viewport.is-panning {
+  cursor: grabbing;
+}
+
+.stage {
+  position: relative;
+  line-height: 0;
+  margin: 0 auto;
 }
 
 #chart-image {
   display: block;
-  max-width: 100%;
-  height: auto;
   pointer-events: none;
   user-select: none;
 }