From e3a21a46b57ba16a9a047cb9659b9a0ba9c11983 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 16 Jun 2026 22:15:09 -0600
Subject: [PATCH] feat: add radius/spacing design tokens and apply across
 styles

---
 src/components/LoginPage.vue |  4 +--
 src/style.css                | 50 +++++++++++++++++++++---------------
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 489ae8c..e53d875 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -80,7 +80,7 @@ async function handleSubmit(): Promise<void> {
   gap: 16px;
   background: #fff;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   box-shadow: 0 4px 18px rgba(32, 42, 51, 0.12);
   padding: 24px;
 }
@@ -95,7 +95,7 @@ async function handleSubmit(): Promise<void> {
 .field {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--space-2);
 }
 
 .field label {
diff --git a/src/style.css b/src/style.css
index 7e5b742..6c2d2b0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -11,6 +11,16 @@
   --muted: #68747f;
   --paper-width: 210mm;
   --paper-min-height: 297mm;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-pill: 999px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
 }
 
 * {
@@ -69,7 +79,7 @@ input {
 .ui-button {
   border: 1px solid var(--line);
   background: #fff;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   padding: 6px 14px;
   color: var(--green-700);
   cursor: pointer;
@@ -111,7 +121,7 @@ input {
 .ui-field,
 .ui-select {
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   padding: 8px 12px;
   background: #fff;
   color: #202a33;
@@ -142,7 +152,7 @@ input {
 .ui-table th,
 .ui-table td {
   text-align: left;
-  padding: 8px 10px;
+  padding: var(--space-2) var(--space-2);
   border-bottom: 1px solid var(--line);
 }
 
@@ -183,7 +193,7 @@ input {
 .workspace-toolbar button {
   border: 1px solid var(--line);
   background: #fff;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   padding: 6px 14px;
   color: var(--green-700);
   cursor: pointer;
@@ -285,7 +295,7 @@ input {
   flex: 0 0 auto;
   background: #e67e22;
   color: #fff;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   font-size: 12px;
   line-height: 1.6;
   min-width: 1.6em;
@@ -406,7 +416,7 @@ table {
 .objective-row {
   display: flex;
   align-items: baseline;
-  gap: 6px;
+  gap: var(--space-2);
 }
 
 .objective-label {
@@ -427,7 +437,7 @@ table {
 .process-step-actions button {
   border: 1px solid var(--line);
   background: #fff;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   padding: 2px 6px;
   font-size: 12px;
   cursor: pointer;
@@ -443,7 +453,7 @@ table {
   font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
   white-space: pre-wrap;
   border: 1px solid var(--line);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   padding: 8px;
   min-height: 6em;
 }
@@ -453,7 +463,7 @@ table {
   padding: 8px 12px;
   border: 1px solid #e6c98b;
   background: #fbf3e1;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   color: #8a6116;
   font-size: 13px;
 }
@@ -469,7 +479,7 @@ table {
   display: block;
   width: 100%;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   padding: 2px 4px;
   background: transparent;
   resize: none;
@@ -504,7 +514,7 @@ table {
 .markdown-preview {
   min-height: 1.6em;
   padding: 2px 4px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   border: 1px solid transparent;
   cursor: text;
 }
@@ -529,7 +539,7 @@ table {
   display: block;
   width: 100%;
   border: 1px solid var(--green-600);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   padding: 2px 4px;
   background: #fff;
   resize: none;
@@ -548,7 +558,7 @@ table {
   max-width: 480px;
   min-height: 200px;
   border: 2px dashed var(--line);
-  border-radius: 12px;
+  border-radius: var(--radius-xl);
   background: #fff;
   color: var(--muted);
   text-align: center;
@@ -566,7 +576,7 @@ table {
   min-height: 0;
   margin: 0;
   padding: 6px 14px;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
 }
 
 .upload-dropzone-input {
@@ -600,7 +610,7 @@ table {
 
 .dialog {
   background: #fff;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   padding: 24px;
   max-width: 420px;
   box-shadow: 0 12px 32px rgba(32, 42, 51, 0.25);
@@ -622,7 +632,7 @@ table {
 .dialog-actions button {
   border: 1px solid var(--line);
   background: #fff;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   padding: 6px 14px;
   cursor: pointer;
 }
@@ -645,7 +655,7 @@ table {
 .app-notice button {
   border: 1px solid currentcolor;
   background: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   padding: 2px 8px;
   cursor: pointer;
   color: inherit;
@@ -694,7 +704,7 @@ table {
 .dialog input {
   flex: 1 1 auto;
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   padding: 8px 12px;
   width: 100%;
 }
@@ -715,7 +725,7 @@ table {
   padding: 12px 16px;
   background: #fff;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
 }
 
 .book-list-name {
@@ -738,7 +748,7 @@ table {
   display: block;
   width: 100%;
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   padding: 8px 12px;
   resize: vertical;
   margin-top: 8px;