Browse Source

style(ui): 更新按钮样式并添加调试日志

- 为“新任务”和“经验”按钮分别添加 success 和 warning 样式类,使其具有轮廓化外观
- 调整 primary 按钮样式,改为浅色背景与彩色边框
- 在 useFlowChartData 中添加 console.log 以调试消息列表
max_liu 1 week ago
parent
commit
ad5fc03efc

+ 1 - 0
frontend/react-template/src/components/FlowChart/hooks/useFlowChartData.ts

@@ -146,6 +146,7 @@ export const useFlowChartData = (traceId: string | null, refreshTrigger?: number
         const json = (await messagesRes.json()) as unknown;
         const root = isRecord(json) ? json : {};
         const list = Array.isArray(root.messages) ? (root.messages as Message[]) : [];
+        console.log("%c [ list ]-149", "font-size:13px; background:pink; color:#bf2c9f;", list);
 
         const filtered = list.filter((message) => (message as { status?: string }).status !== "abandoned");
         const nextMessages = [...filtered].sort(messageComparator);

+ 33 - 3
frontend/react-template/src/components/TopBar/TopBar.module.css

@@ -69,9 +69,9 @@
 
 /* Primary Button */
 .button.primary {
-  background: var(--color-primary);
-  color: var(--text-inverse);
-  border-color: transparent;
+  background: var(--bg-surface);
+  color: var(--color-primary);
+  border-color: var(--color-primary);
 }
 
 .button.primary:hover:not(:disabled) {
@@ -97,6 +97,36 @@
   background: #fee2e2; /* Red 100 */
 }
 
+/* Success Button */
+.button.success {
+  background: var(--bg-surface);
+  color: var(--color-success);
+  border-color: var(--color-success);
+}
+
+.button.success:hover:not(:disabled) {
+  background: #ecfdf5; /* Emerald 50 */
+}
+
+.button.success:active:not(:disabled) {
+  background: #d1fae5; /* Emerald 100 */
+}
+
+/* Warning Button */
+.button.warning {
+  background: var(--bg-surface);
+  color: var(--color-warning);
+  border-color: var(--color-warning);
+}
+
+.button.warning:hover:not(:disabled) {
+  background: #fffbeb; /* Amber 50 */
+}
+
+.button.warning:active:not(:disabled) {
+  background: #fef3c7; /* Amber 100 */
+}
+
 .button:disabled {
   opacity: 0.5;
   cursor: not-allowed;

+ 2 - 2
frontend/react-template/src/components/TopBar/TopBar.tsx

@@ -230,7 +230,7 @@ export const TopBar: FC<TopBarProps> = ({
       </div>
       <div className={styles.actions}>
         <button
-          className={styles.button}
+          className={`${styles.button} ${styles.success}`}
           onClick={handleNewTask}
         >
           新任务
@@ -254,7 +254,7 @@ export const TopBar: FC<TopBarProps> = ({
           反思
         </button>
         <button
-          className={styles.button}
+          className={`${styles.button} ${styles.warning}`}
           onClick={handleExperience}
         >
           经验