11

src/components/workflow/Step01IpLearning.vue

@@ -184,7 +184,8 @@ function onOpenIpBrain() {
               :min="50"
               :max="1500"
               size="small"
-       
+              class="w-12 shrink-0"
+              input-class="text-center"
             />
           </div>
         </div>

src/main.js

@@ -1,7 +1,7 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import PrimeVue from "primevue/config";
-import Aura from "@primeuix/themes/aura";
+import { AiclientPreset } from "./theme/aiclient-preset.js";
 import Button from "primevue/button";
 import InputText from "primevue/inputtext";
 import Password from "primevue/password";
@@ -31,7 +31,7 @@ app.use(createPinia());
 app.use(router);
 app.use(PrimeVue, {
   theme: {
-    preset: Aura,
+    preset: AiclientPreset,
     options: {
       darkModeSelector: ".dark",
       cssLayer: false,

src/styles/main.css

@@ -4,14 +4,16 @@
   --color-bg-deep: #050810;
   --color-bg-base: #0b1220;
   --color-bg-elevated: #111827;
-  --color-accent-cyan: #00e5ff;
+  --color-accent-blue: #3b82f6;
-  --color-accent-cyan-dim: #22d3ee;
+  --color-accent-blue-dim: #60a5fa;
   --color-accent-indigo: #6366f1;
   --color-accent-violet: #8b5cf6;
-  --color-border-glow: rgba(0, 229, 255, 0.25);
+  --color-border-glow: rgba(59, 130, 246, 0.25);
   --color-text-muted: #94a3b8;
   --font-display: ui-sans-serif, system-ui, sans-serif;
   --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
+  --btn-primary-gradient: linear-gradient(135deg, #a855f7, #d946ef);
+  --btn-primary-gradient-hover: linear-gradient(135deg, #9333ea, #c026d3);
 }
 
 html,
@@ -33,7 +35,7 @@ body {
   position: relative;
   min-height: 100%;
   background:
-    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 229, 255, 0.12), transparent),
+    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.12), transparent),
     radial-gradient(ellipse 60% 40% at 100% 100%, rgba(99, 102, 241, 0.1), transparent),
     linear-gradient(180deg, var(--color-bg-deep) 0%, var(--color-bg-base) 50%, var(--color-bg-deep) 100%);
 }
@@ -43,8 +45,8 @@ body {
   position: absolute;
   inset: 0;
   background-image:
-    linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(rgba(59, 130, 246, 0.04) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px);
+    linear-gradient(90deg, rgba(59, 130, 246, 0.04) 1px, transparent 1px);
   background-size: 48px 48px;
   mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 75%);
   pointer-events: none;
@@ -58,7 +60,7 @@ body {
   width: 320px;
   height: 320px;
   transform: translateX(-50%);
-  background: radial-gradient(circle, rgba(0, 229, 255, 0.08) 0%, transparent 70%);
+  background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
   filter: blur(40px);
   pointer-events: none;
   animation: pulse-glow 6s ease-in-out infinite;
@@ -87,20 +89,20 @@ body {
 }
 
 .gradient-text {
-  background: linear-gradient(135deg, var(--color-accent-cyan) 0%, var(--color-accent-indigo) 55%, var(--color-accent-violet) 100%);
+  background: linear-gradient(135deg, var(--color-accent-blue) 0%, var(--color-accent-indigo) 55%, var(--color-accent-violet) 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }
 
 .auth-link {
-  color: var(--color-accent-cyan-dim);
+  color: var(--color-accent-blue-dim);
   text-decoration: none;
   transition: color 0.2s;
 }
 
 .auth-link:hover {
-  color: var(--color-accent-cyan);
+  color: var(--color-accent-blue);
 }
 
 .sidebar-nav {
@@ -140,9 +142,9 @@ body {
 
 .sidebar-item--active {
   color: #e2e8f0;
-  border: 1px solid rgba(0, 229, 255, 0.45);
+  border: 1px solid rgba(59, 130, 246, 0.45);
-  background: rgba(0, 229, 255, 0.06);
+  background: rgba(59, 130, 246, 0.06);
-  box-shadow: 0 0 12px rgba(0, 229, 255, 0.08);
+  box-shadow: 0 0 12px rgba(59, 130, 246, 0.08);
 }
 
 .sidebar-icon {
@@ -166,14 +168,14 @@ body {
 
 .main-content {
   background:
-    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 229, 255, 0.06), transparent),
+    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(59, 130, 246, 0.06), transparent),
     var(--color-bg-base);
 }
 
 /* 首页工作台 */
 .custom-scrollbar {
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 229, 255, 0.25) transparent;
+  scrollbar-color: rgba(59, 130, 246, 0.25) transparent;
 }
 
 .custom-scrollbar::-webkit-scrollbar {
@@ -182,7 +184,7 @@ body {
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(0, 229, 255, 0.2);
+  background: rgba(59, 130, 246, 0.2);
   border-radius: 3px;
 }
 
@@ -216,8 +218,8 @@ body {
 }
 
 .dashboard-card:hover {
-  border-color: rgba(0, 229, 255, 0.2);
+  border-color: rgba(59, 130, 246, 0.2);
-  box-shadow: 0 0 16px rgba(0, 229, 255, 0.06);
+  box-shadow: 0 0 16px rgba(59, 130, 246, 0.06);
 }
 
 .dashboard-card--grow {
@@ -255,7 +257,7 @@ body {
 .dashboard-chevron {
   width: 16px;
   height: 16px;
-  color: var(--color-accent-cyan-dim);
+  color: var(--color-accent-blue-dim);
   transition: transform 0.25s;
 }
 
@@ -325,31 +327,97 @@ body {
   background: rgba(255, 255, 255, 0.08);
 }
 
+/* PrimeVue 主要按钮（默认 primary）：紫粉渐变 */
+.p-button.p-component:not(.p-button-secondary):not(.p-button-outlined):not(
+    .p-button-text
+  ):not(.p-button-danger):not(.p-button-help):not(.p-button-warn):not(
+    .p-button-info
+  ):not(.p-button-success):not(.p-button-link):not(.p-button-plain):not(:disabled):not(
+    [data-p-disabled="true"]
+  ) {
+  background: var(--btn-primary-gradient) !important;
+  border-color: transparent !important;
+  color: #fff !important;
+}
+
+.p-button.p-component:not(.p-button-secondary):not(.p-button-outlined):not(
+    .p-button-text
+  ):not(.p-button-danger):not(.p-button-help):not(.p-button-warn):not(
+    .p-button-info
+  ):not(.p-button-success):not(.p-button-link):not(.p-button-plain):not(:disabled):not(
+    [data-p-disabled="true"]
+  ):enabled:hover {
+  background: var(--btn-primary-gradient-hover) !important;
+  border-color: transparent !important;
+  color: #fff !important;
+  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.35);
+}
+
+.p-button.p-component:not(.p-button-secondary):not(.p-button-outlined):not(
+    .p-button-text
+  ):not(.p-button-danger):not(.p-button-help):not(.p-button-warn):not(
+    .p-button-info
+  ):not(.p-button-success):not(.p-button-link):not(.p-button-plain):not(:disabled):not(
+    [data-p-disabled="true"]
+  ):enabled:active {
+  filter: brightness(0.92);
+}
+
 .dashboard-one-click {
   width: 100%;
   padding: 12px;
   border-radius: 10px;
-  border: 1px solid rgba(0, 229, 255, 0.35);
+  border: 1px solid transparent;
-  background: linear-gradient(
+  background: linear-gradient(135deg, #a855f7, #d946ef) !important;
-    135deg,
+  color: #fff;
-    rgba(0, 229, 255, 0.12) 0%,
-    rgba(99, 102, 241, 0.15) 100%
-  );
-  color: #e2e8f0;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
-  transition: box-shadow 0.2s, border-color 0.2s;
+  transition:
+    box-shadow 0.2s,
+    filter 0.2s;
 }
 
 .dashboard-one-click:hover {
-  border-color: rgba(0, 229, 255, 0.55);
+  background: linear-gradient(135deg, #9333ea, #c026d3) !important;
-  box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
+  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.35);
+}
+
+/* 复选框选中：无实心 primary 底，保持深色背景 + 蓝色描边/勾 */
+:root {
+  --p-checkbox-checked-background: rgba(255, 255, 255, 0.05);
+  --p-checkbox-checked-hover-background: rgba(255, 255, 255, 0.08);
+  --p-checkbox-checked-border-color: rgba(59, 130, 246, 0.55);
+  --p-checkbox-checked-hover-border-color: rgba(59, 130, 246, 0.75);
+  --p-checkbox-checked-focus-border-color: rgba(59, 130, 246, 0.75);
+  --p-checkbox-icon-checked-color: #60a5fa;
+  --p-checkbox-icon-checked-hover-color: #3b82f6;
+}
+
+.p-checkbox-checked .p-checkbox-box,
+.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box,
+.p-checkbox-checked.p-variant-filled .p-checkbox-box,
+.p-checkbox-checked.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover)
+  .p-checkbox-box {
+  background: rgba(255, 255, 255, 0.05) !important;
+  border-color: rgba(59, 130, 246, 0.55) !important;
+}
+
+.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box,
+.p-checkbox-checked.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover)
+  .p-checkbox-box {
+  background: rgba(255, 255, 255, 0.08) !important;
+  border-color: rgba(59, 130, 246, 0.75) !important;
+}
+
+.p-checkbox-checked .p-checkbox-icon,
+.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon {
+  color: #60a5fa !important;
 }
 
 .elegant-tip-box {
-  background: rgba(0, 229, 255, 0.06);
+  background: rgba(59, 130, 246, 0.06);
-  border: 1px solid rgba(0, 229, 255, 0.12);
+  border: 1px solid rgba(59, 130, 246, 0.12);
 }
 
 .ip-brain-dialog :deep(.p-dialog-header) {
@@ -384,8 +452,8 @@ body {
 }
 
 .benchmark-item--active {
-  border-color: rgba(0, 229, 255, 0.4);
+  border-color: rgba(59, 130, 246, 0.4);
-  background: rgba(0, 229, 255, 0.08);
+  background: rgba(59, 130, 246, 0.08);
 }
 
 .dashboard-textarea-mono :deep(textarea) {
@@ -394,3 +462,57 @@ body {
   line-height: 1.6;
   min-height: 200px;
 }
+
+/* PrimeVue InputNumber：Tailwind w-* 只作用于根节点，需同步约束内部 input */
+.p-inputnumber.w-12,
+.p-inputnumber.w-16,
+.p-inputnumber.w-20,
+.p-inputnumber.w-24,
+.p-inputnumber.w-28 {
+  display: inline-flex;
+  overflow: hidden;
+  flex: 0 0 auto;
+}
+
+.p-inputnumber.w-12 {
+  width: 3rem;
+  min-width: 3rem;
+  max-width: 3rem;
+}
+
+.p-inputnumber.w-16 {
+  width: 4rem;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+.p-inputnumber.w-20 {
+  width: 5rem;
+  min-width: 5rem;
+  max-width: 5rem;
+}
+
+.p-inputnumber.w-24 {
+  width: 6rem;
+  min-width: 6rem;
+  max-width: 6rem;
+}
+
+.p-inputnumber.w-28 {
+  width: 7rem;
+  min-width: 7rem;
+  max-width: 7rem;
+}
+
+.p-inputnumber.w-12 .p-inputnumber-input,
+.p-inputnumber.w-16 .p-inputnumber-input,
+.p-inputnumber.w-20 .p-inputnumber-input,
+.p-inputnumber.w-24 .p-inputnumber-input,
+.p-inputnumber.w-28 .p-inputnumber-input {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  flex: 1 1 0%;
+  box-sizing: border-box;
+  padding-inline: 0.25rem;
+}

src/theme/aiclient-preset.js

@@ -0,0 +1,39 @@
+import Aura from "@primeuix/themes/aura";
+import { definePreset } from "@primeuix/themes";
+
+/**
+ * Aura 默认 primary 为 emerald（绿色）。
+ * 使用科技蓝（hue ~217）色阶，区别于青色/cyan。
+ */
+export const AiclientPreset = definePreset(Aura, {
+  primitive: {
+    techblue: {
+      50: "#eff6ff",
+      100: "#dbeafe",
+      200: "#bfdbfe",
+      300: "#93c5fd",
+      400: "#60a5fa",
+      500: "#3b82f6",
+      600: "#2563eb",
+      700: "#1d4ed8",
+      800: "#1e40af",
+      900: "#1e3a8a",
+      950: "#172554",
+    },
+  },
+  semantic: {
+    primary: {
+      50: "{techblue.50}",
+      100: "{techblue.100}",
+      200: "{techblue.200}",
+      300: "{techblue.300}",
+      400: "{techblue.400}",
+      500: "{techblue.500}",
+      600: "{techblue.600}",
+      700: "{techblue.700}",
+      800: "{techblue.800}",
+      900: "{techblue.900}",
+      950: "{techblue.950}",
+    },
+  },
+});