11
This commit is contained in:
fengchuanhn@gmail.com
@@ -184,7 +184,8 @@ function onOpenIpBrain() {
|
||||
:min="50"
|
||||
:max="1500"
|
||||
size="small"
|
||||
|
||||
class="w-12 shrink-0"
|
||||
input-class="text-center"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
39
src/theme/aiclient-preset.js
Normal file
39
src/theme/aiclient-preset.js
Normal file
@@ -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}",
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user