初始提交：OCI 面板前端（含 GenAI 网关一期）
This commit is contained in:
Wang Defa
@@ -0,0 +1,260 @@
|
||||
/* 设计 token 唯一 JS 来源在 src/theme/tokens.ts，两处取值保持同步 */
|
||||
@import 'tailwindcss';
|
||||
|
||||
@theme {
|
||||
--color-bg: #f5f4ed;
|
||||
--color-card: #faf9f5;
|
||||
--color-white: #ffffff; /* 语义：输入 / 嵌入面，暗色下为深灰而非纯白 */
|
||||
--color-ink: #141413;
|
||||
--color-ink-2: #5e5d59;
|
||||
--color-ink-3: #87867f;
|
||||
--color-line: #e8e6dc;
|
||||
--color-line-soft: #f0eee6;
|
||||
--color-row-hover: #f1efe8;
|
||||
--color-wash: #efede4; /* 侧栏 / 图标按钮悬浮底 */
|
||||
--color-wash-deep: #ece9df; /* 侧栏激活 / 头像底 */
|
||||
--color-accent: #c96442;
|
||||
--color-accent-hover: #ad4f2e;
|
||||
--color-chart: #c15f3c;
|
||||
--color-ok: #788c5d;
|
||||
--color-err: #b53333;
|
||||
--color-info: #6a9bcc;
|
||||
--color-warn: #a87514;
|
||||
|
||||
--font-sans:
|
||||
-apple-system, 'SF Pro Text', 'Helvetica Neue', 'PingFang SC', 'Noto Sans SC', sans-serif;
|
||||
--font-serif: Georgia, 'Times New Roman', 'Songti SC', serif;
|
||||
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
/* 暗色主题：html.dark 由 stores/app.ts 挂载，色值与 tokens.ts 的 darkTokens 同步 */
|
||||
html.dark {
|
||||
--color-bg: #191817;
|
||||
--color-card: #201f1e;
|
||||
--color-white: #262524;
|
||||
--color-ink: #eceae4;
|
||||
--color-ink-2: #a8a69e;
|
||||
--color-ink-3: #807e76;
|
||||
--color-line: #3a3835;
|
||||
--color-line-soft: #2c2b29;
|
||||
--color-row-hover: #292825;
|
||||
--color-wash: #2b2a27;
|
||||
--color-wash-deep: #33312d;
|
||||
--color-accent: #d97757;
|
||||
--color-accent-hover: #e08b6d;
|
||||
--color-chart: #d97757;
|
||||
--color-ok: #8fa574;
|
||||
--color-err: #d06060;
|
||||
--color-info: #7fabd6;
|
||||
--color-warn: #c29135;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* 全局滚动条瘦身：透明轨道 + 细圆角滑块，明暗主题跟随 ink 变量 */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: color-mix(in srgb, var(--color-ink) 22%, transparent) transparent;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: color-mix(in srgb, var(--color-ink) 22%, transparent);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: color-mix(in srgb, var(--color-ink) 38%, transparent);
|
||||
}
|
||||
|
||||
/* 页面标题统一 serif */
|
||||
.page-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 卡片：圆角 8、细边框、whisper 阴影，无渐变；
|
||||
overflow hidden 防止内部表格等方角内容溢出圆角 */
|
||||
.panel {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px rgba(20, 20, 19, 0.04);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12.5px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
/* NDataTable 分页器默认贴表格底边，补出与卡片底部的间隔 */
|
||||
.n-data-table .n-data-table__pagination {
|
||||
padding: 4px 18px 14px;
|
||||
}
|
||||
|
||||
/* 租户下拉双行选项：菜单项上下留白拉开行距，避免相邻两租户挤在一起 */
|
||||
.n-base-select-option .cfg-tenancy-sub {
|
||||
margin-top: 1px;
|
||||
}
|
||||
.n-base-select-option__content:has(.cfg-tenancy-sub) {
|
||||
padding: 6px 0;
|
||||
}
|
||||
/* NSelect 选中框（收起态）只显示别名单行，租户名辅行隐藏 */
|
||||
.n-base-selection-label .cfg-tenancy-sub {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* AppInputNumber(方案 B 内嵌步进):上下箭头收进右侧独立竖栏——
|
||||
竖栏占满框高、border-left 与框体结构化分隔,上下两格中缝分隔线,
|
||||
悬停格底 wash;suffix 内 minus / add 恒为最后两个子元素(add 上 minus 下)。 */
|
||||
.app-input-number .n-input .n-input-wrapper {
|
||||
padding-right: 34px; /* 26px 竖栏 + 文本安全间距 */
|
||||
}
|
||||
.app-input-number .n-input__suffix {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 26px;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
border-left: 1px solid var(--color-line-soft);
|
||||
}
|
||||
.app-input-number .n-input__suffix > :last-child {
|
||||
grid-row: 1; /* add 在上 */
|
||||
border-bottom: 1px solid var(--color-line-soft);
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
.app-input-number .n-input__suffix > :nth-last-child(2) {
|
||||
grid-row: 2; /* minus 在下 */
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
.app-input-number .n-input__suffix .n-button {
|
||||
/* 箭头颜色跟随文本弱色而非按钮主题色:NButton 自带 --n-text-color
|
||||
内联声明会盖过外层 color,必须直接覆盖变量 */
|
||||
--n-icon-size: 9px;
|
||||
--n-text-color: var(--color-ink-3);
|
||||
--n-text-color-hover: var(--color-ink);
|
||||
--n-text-color-pressed: var(--color-ink);
|
||||
--n-text-color-focus: var(--color-ink);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
.app-input-number .n-input__suffix .n-button:not(.n-button--disabled):hover {
|
||||
background: var(--color-wash);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
/* useToast 可展开详情:toast 内嵌代码块(标签 + 复制 + 内滚 pre)。
|
||||
message 经 teleport 渲染于 body,组件 scoped 样式不可达,故置于全局。 */
|
||||
.toast-body {
|
||||
max-width: 420px;
|
||||
}
|
||||
.toast-line {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
}
|
||||
.toast-toggle {
|
||||
flex: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: var(--color-accent);
|
||||
user-select: none;
|
||||
}
|
||||
.toast-toggle:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.toast-code {
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 8px;
|
||||
background: var(--color-wash);
|
||||
}
|
||||
.toast-code-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--color-line-soft);
|
||||
padding: 4px 8px 4px 10px;
|
||||
}
|
||||
.toast-tag {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.toast-tag-error {
|
||||
color: var(--color-err);
|
||||
}
|
||||
.toast-tag-warning {
|
||||
color: var(--color-warn);
|
||||
}
|
||||
.toast-copy {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 2px 4px;
|
||||
font-size: 11px;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
.toast-copy:hover {
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.toast-code-pre {
|
||||
margin: 0;
|
||||
max-height: 180px;
|
||||
overflow: auto;
|
||||
padding: 8px 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11.5px;
|
||||
line-height: 1.55;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
|
||||
/* 全屏页轨道环(FullPageBackdrop 与登录页品牌区共用):
|
||||
spin 动画占用 transform,环定位只能用 left/top(calc 同心),不能用 translate。 */
|
||||
.fpb-ring {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid var(--color-line);
|
||||
pointer-events: none;
|
||||
}
|
||||
.fpb-ring-dash {
|
||||
border-style: dashed;
|
||||
border-color: color-mix(in srgb, var(--color-line) 70%, var(--color-accent) 30%);
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.fpb-spin {
|
||||
animation: fpb-spin 52s linear infinite;
|
||||
}
|
||||
@keyframes fpb-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user