diff --git a/src/components/workflow/Step01IpLearning.vue b/src/components/workflow/Step01IpLearning.vue index b91d7db..4d2b904 100644 --- a/src/components/workflow/Step01IpLearning.vue +++ b/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" /> diff --git a/src/main.js b/src/main.js index 26d7142..1ddbf27 100644 --- a/src/main.js +++ b/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, diff --git a/src/styles/main.css b/src/styles/main.css index b81d032..8fa525c 100644 --- a/src/styles/main.css +++ b/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-cyan-dim: #22d3ee; + --color-accent-blue: #3b82f6; + --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(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px); + linear-gradient(rgba(59, 130, 246, 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); - background: rgba(0, 229, 255, 0.06); - box-shadow: 0 0 12px rgba(0, 229, 255, 0.08); + border: 1px solid rgba(59, 130, 246, 0.45); + background: rgba(59, 130, 246, 0.06); + 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); - box-shadow: 0 0 16px rgba(0, 229, 255, 0.06); + border-color: rgba(59, 130, 246, 0.2); + 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); - background: linear-gradient( - 135deg, - rgba(0, 229, 255, 0.12) 0%, - rgba(99, 102, 241, 0.15) 100% - ); - color: #e2e8f0; + border: 1px solid transparent; + background: linear-gradient(135deg, #a855f7, #d946ef) !important; + color: #fff; 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); - box-shadow: 0 0 20px rgba(0, 229, 255, 0.15); + background: linear-gradient(135deg, #9333ea, #c026d3) !important; + 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); - border: 1px solid rgba(0, 229, 255, 0.12); + background: rgba(59, 130, 246, 0.06); + 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); - background: rgba(0, 229, 255, 0.08); + border-color: rgba(59, 130, 246, 0.4); + 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; +} diff --git a/src/theme/aiclient-preset.js b/src/theme/aiclient-preset.js new file mode 100644 index 0000000..0f354c3 --- /dev/null +++ b/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}", + }, + }, +});