Add web map editor prototype

2026-06-10 00:12:17 +08:00
parent fb54c9f207
commit 759abfd527
5 changed files with 1311 additions and 8 deletions
@@ -0,0 +1,231 @@
+:root {
+  color-scheme: dark;
+  --bg: #101214;
+  --panel: #181b1f;
+  --panel-2: #20242a;
+  --line: #343a42;
+  --text: #e8edf2;
+  --muted: #9aa4af;
+  --accent: #54a8ff;
+  --accent-2: #9ed06a;
+  --danger: #ff6868;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: "Segoe UI", system-ui, sans-serif;
+  overflow: hidden;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+button,
+.file-button {
+  border: 1px solid var(--line);
+  background: var(--panel-2);
+  color: var(--text);
+  padding: 8px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+button:hover,
+.file-button:hover {
+  border-color: var(--accent);
+}
+
+.app-header {
+  height: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--line);
+  background: #0d0f12;
+}
+
+.app-header h1 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.app-header p {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.file-button input {
+  display: none;
+}
+
+.editor-shell {
+  height: calc(100vh - 72px);
+  display: grid;
+  grid-template-columns: 300px minmax(420px, 1fr) 340px;
+}
+
+.panel {
+  background: var(--panel);
+  border-right: 1px solid var(--line);
+  overflow: auto;
+  padding: 14px;
+}
+
+.right-panel {
+  border-right: 0;
+  border-left: 1px solid var(--line);
+}
+
+section + section {
+  margin-top: 18px;
+}
+
+h2 {
+  margin: 0 0 10px;
+  font-size: 13px;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.field-grid,
+.property-panel {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+label {
+  display: grid;
+  gap: 4px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--line);
+  background: #0f1114;
+  color: var(--text);
+  border-radius: 5px;
+  padding: 7px 8px;
+}
+
+.button-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.object-section {
+  min-height: 0;
+}
+
+.object-list,
+.tileset-list {
+  display: grid;
+  gap: 6px;
+}
+
+.object-item,
+.tileset-item {
+  border: 1px solid var(--line);
+  background: #111418;
+  border-radius: 6px;
+  padding: 8px;
+  cursor: pointer;
+}
+
+.object-item:hover {
+  border-color: var(--accent);
+}
+
+.object-item.active {
+  border-color: var(--accent);
+  background: #122236;
+}
+
+.object-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.object-meta {
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.canvas-panel {
+  min-width: 0;
+  display: grid;
+  grid-template-rows: 40px 1fr;
+  background: #0b0d10;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 13px;
+}
+
+#mapCanvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: #0e1115;
+  cursor: crosshair;
+}
+
+.selection-summary {
+  min-height: 34px;
+  color: var(--muted);
+  font-size: 13px;
+  margin-bottom: 10px;
+}
+
+.danger-button {
+  width: 100%;
+  margin-top: 10px;
+  color: #ffd8d8;
+  border-color: #633;
+}
+
+.danger-button:hover {
+  border-color: var(--danger);
+}
+
+#outputText {
+  height: 220px;
+  resize: vertical;
+  white-space: pre;
+  font-family: Consolas, "Cascadia Mono", monospace;
+  font-size: 12px;
+}