mirror of
https://gitee.com/ccnetcore/Yi
synced 2026-04-22 09:26:36 +08:00
1208 lines
25 KiB
SCSS
1208 lines
25 KiB
SCSS
|
/* ========== 深色主题 Element Plus 覆盖样式 ========== */
|
||
|
|
|
||
|
|
/* 全局基础样式 */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
background-color: #111827;
|
||
|
|
color: #f3f4f6;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme="dark"] body {
|
||
|
|
background-color: #111827;
|
||
|
|
color: #f3f4f6;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme="dark"] {
|
||
|
|
/* ========== Element Plus 核心变量 ========== */
|
||
|
|
--el-color-primary: #60a5fa;
|
||
|
|
--el-color-primary-light-3: #93c5fd;
|
||
|
|
--el-color-primary-light-5: #bfdbfe;
|
||
|
|
--el-color-primary-light-7: #dbeafe;
|
||
|
|
--el-color-primary-light-8: #1e3a5f;
|
||
|
|
--el-color-primary-light-9: #172554;
|
||
|
|
--el-color-primary-dark-2: #3b82f6;
|
||
|
|
|
||
|
|
--el-color-success: #34d399;
|
||
|
|
--el-color-warning: #fbbf24;
|
||
|
|
--el-color-danger: #f87171;
|
||
|
|
--el-color-error: #f87171;
|
||
|
|
--el-color-info: #9ca3af;
|
||
|
|
|
||
|
|
/* 背景色 */
|
||
|
|
--el-bg-color: #111827;
|
||
|
|
--el-bg-color-page: #0f172a;
|
||
|
|
--el-bg-color-overlay: #1f2937;
|
||
|
|
|
||
|
|
/* 文字颜色 */
|
||
|
|
--el-text-color-primary: #f9fafb;
|
||
|
|
--el-text-color-regular: #e5e7eb;
|
||
|
|
--el-text-color-secondary: #9ca3af;
|
||
|
|
--el-text-color-placeholder: #6b7280;
|
||
|
|
--el-text-color-disabled: #4b5563;
|
||
|
|
|
||
|
|
/* 边框颜色 */
|
||
|
|
--el-border-color: #374151;
|
||
|
|
--el-border-color-light: #4b5563;
|
||
|
|
--el-border-color-lighter: #374151;
|
||
|
|
--el-border-color-extra-light: #1f2937;
|
||
|
|
--el-border-color-dark: #6b7280;
|
||
|
|
--el-border-color-darker: #9ca3af;
|
||
|
|
|
||
|
|
/* 填充色 */
|
||
|
|
--el-fill-color: #374151;
|
||
|
|
--el-fill-color-light: #1f2937;
|
||
|
|
--el-fill-color-lighter: #111827;
|
||
|
|
--el-fill-color-extra-light: #0f172a;
|
||
|
|
--el-fill-color-dark: #4b5563;
|
||
|
|
--el-fill-color-darker: #6b7280;
|
||
|
|
--el-fill-color-blank: #1f2937;
|
||
|
|
|
||
|
|
/* 遮罩层 */
|
||
|
|
--el-mask-color: rgba(0, 0, 0, 0.7);
|
||
|
|
--el-mask-color-extra-light: rgba(0, 0, 0, 0.4);
|
||
|
|
|
||
|
|
/* 阴影 */
|
||
|
|
--el-box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.36), 0 8px 20px rgba(0, 0, 0, 0.72);
|
||
|
|
--el-box-shadow-light: 0 0 12px rgba(0, 0, 0, 0.48);
|
||
|
|
--el-box-shadow-lighter: 0 0 6px rgba(0, 0, 0, 0.36);
|
||
|
|
--el-box-shadow-dark: 0 16px 48px 16px rgba(0, 0, 0, 0.72), 0 12px 32px rgba(0, 0, 0, 0.64);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 深色主题组件样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
/* 页面背景 */
|
||
|
|
background-color: var(--bg-color-primary);
|
||
|
|
color: var(--text-color-primary);
|
||
|
|
|
||
|
|
/* 头部导航 */
|
||
|
|
.header-container,
|
||
|
|
.el-header {
|
||
|
|
background-color: var(--header-background-color) !important;
|
||
|
|
box-shadow: var(--header-box-shadow);
|
||
|
|
border-bottom: var(--header-border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-menu,
|
||
|
|
.el-menu--horizontal {
|
||
|
|
background-color: var(--header-background-color) !important;
|
||
|
|
border-bottom: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.brand-text,
|
||
|
|
.mobile-brand-text {
|
||
|
|
color: var(--text-color-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu-title {
|
||
|
|
color: var(--text-color-secondary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 侧边栏 */
|
||
|
|
.aside-container,
|
||
|
|
.aside-wrapper {
|
||
|
|
background-color: var(--sidebar-background-color) !important;
|
||
|
|
border-color: var(--sidebar-border-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.aside-header {
|
||
|
|
border-bottom-color: var(--sidebar-border-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo-text {
|
||
|
|
color: var(--text-color-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 聊天区域 */
|
||
|
|
.chat-with-id-container,
|
||
|
|
.chat-default-container,
|
||
|
|
.conversation-page {
|
||
|
|
background-color: var(--content-background-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-warp {
|
||
|
|
background-color: var(--chat-container-bg) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 气泡样式 */
|
||
|
|
.el-bubble {
|
||
|
|
&[data-placement="start"] {
|
||
|
|
.el-bubble-content {
|
||
|
|
background-color: var(--chat-bubble-ai-bg) !important;
|
||
|
|
color: var(--chat-bubble-ai-text) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 输入框 */
|
||
|
|
.el-input__wrapper,
|
||
|
|
.el-textarea__inner {
|
||
|
|
background-color: var(--bg-color-secondary) !important;
|
||
|
|
box-shadow: 0 0 0 1px var(--border-color-light) inset !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-input__inner {
|
||
|
|
color: var(--text-color-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 按钮 */
|
||
|
|
.el-button--default {
|
||
|
|
background-color: var(--bg-color-secondary) !important;
|
||
|
|
border-color: var(--border-color-light) !important;
|
||
|
|
color: var(--text-color-primary) !important;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: var(--bg-color-tertiary) !important;
|
||
|
|
border-color: var(--el-color-primary) !important;
|
||
|
|
color: var(--el-color-primary) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 卡片 */
|
||
|
|
.el-card {
|
||
|
|
background-color: var(--bg-color-secondary) !important;
|
||
|
|
border-color: var(--border-color-light) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 弹窗 */
|
||
|
|
.el-dialog {
|
||
|
|
background-color: var(--bg-color-secondary) !important;
|
||
|
|
|
||
|
|
.el-dialog__header {
|
||
|
|
border-bottom-color: var(--border-color-light) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-dialog__title {
|
||
|
|
color: var(--text-color-primary) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 抽屉 */
|
||
|
|
.el-drawer {
|
||
|
|
background-color: var(--bg-color-secondary) !important;
|
||
|
|
|
||
|
|
.el-drawer__header {
|
||
|
|
color: var(--text-color-primary) !important;
|
||
|
|
border-bottom-color: var(--border-color-light) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 下拉菜单 */
|
||
|
|
.el-dropdown-menu,
|
||
|
|
.el-select-dropdown,
|
||
|
|
.el-popper {
|
||
|
|
background-color: var(--bg-color-secondary) !important;
|
||
|
|
border-color: var(--border-color-light) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-dropdown-menu__item,
|
||
|
|
.el-select-dropdown__item {
|
||
|
|
color: var(--text-color-primary) !important;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: var(--bg-color-tertiary) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 表格 */
|
||
|
|
.el-table {
|
||
|
|
background-color: var(--bg-color-secondary) !important;
|
||
|
|
color: var(--text-color-primary) !important;
|
||
|
|
|
||
|
|
th.el-table__cell {
|
||
|
|
background-color: var(--bg-color-tertiary) !important;
|
||
|
|
color: var(--text-color-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr {
|
||
|
|
background-color: var(--bg-color-secondary) !important;
|
||
|
|
|
||
|
|
&:hover > td.el-table__cell {
|
||
|
|
background-color: var(--bg-color-tertiary) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 分页 */
|
||
|
|
.el-pagination {
|
||
|
|
button,
|
||
|
|
.el-pager li {
|
||
|
|
background-color: var(--bg-color-secondary) !important;
|
||
|
|
color: var(--text-color-primary) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 消息框 */
|
||
|
|
.el-message-box {
|
||
|
|
background-color: var(--bg-color-secondary) !important;
|
||
|
|
border-color: var(--border-color-light) !important;
|
||
|
|
|
||
|
|
.el-message-box__title {
|
||
|
|
color: var(--text-color-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-message-box__message {
|
||
|
|
color: var(--text-color-secondary) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 标签页 */
|
||
|
|
.el-tabs__item {
|
||
|
|
color: var(--text-color-secondary) !important;
|
||
|
|
|
||
|
|
&.is-active {
|
||
|
|
color: var(--el-color-primary) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 空状态 */
|
||
|
|
.el-empty__description {
|
||
|
|
color: var(--text-color-tertiary) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== View Transitions 主题切换动画 ========== */
|
||
|
|
::view-transition-old(root),
|
||
|
|
::view-transition-new(root) {
|
||
|
|
animation: none;
|
||
|
|
mix-blend-mode: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
::view-transition-old(root) {
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
::view-transition-new(root) {
|
||
|
|
z-index: 9999;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 圆形扩散动画 */
|
||
|
|
::view-transition-new(root) {
|
||
|
|
animation: theme-circle-clip 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes theme-circle-clip {
|
||
|
|
from {
|
||
|
|
clip-path: circle(0% at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
clip-path: circle(var(--theme-transition-radius, 100%) at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 深色模式切换时反向动画 */
|
||
|
|
[data-theme="dark"]::view-transition-old(root) {
|
||
|
|
z-index: 9999;
|
||
|
|
animation: theme-circle-clip-reverse 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme="dark"]::view-transition-new(root) {
|
||
|
|
z-index: 1;
|
||
|
|
animation: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes theme-circle-clip-reverse {
|
||
|
|
from {
|
||
|
|
clip-path: circle(var(--theme-transition-radius, 100%) at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
clip-path: circle(0% at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 深色主题额外组件样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
/* Sender 组件 */
|
||
|
|
.el-sender {
|
||
|
|
background-color: var(--bg-color-secondary) !important;
|
||
|
|
border-color: var(--border-color-light) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 会话列表 */
|
||
|
|
.conversations-wrap {
|
||
|
|
.conversation-item {
|
||
|
|
&:hover {
|
||
|
|
background-color: var(--bg-color-tertiary) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 创建对话按钮 */
|
||
|
|
.creat-chat-btn {
|
||
|
|
background-color: rgba(96, 165, 250, 0.1) !important;
|
||
|
|
border-color: rgba(96, 165, 250, 0.2) !important;
|
||
|
|
color: #60a5fa !important;
|
||
|
|
|
||
|
|
&:hover:not(.is-disabled) {
|
||
|
|
background-color: rgba(96, 165, 250, 0.2) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 滚动条 */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 6px;
|
||
|
|
height: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: var(--bg-color-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: var(--border-color-default);
|
||
|
|
border-radius: 3px;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: var(--border-color-dark);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 代码块 */
|
||
|
|
pre, code {
|
||
|
|
background-color: var(--bg-color-tertiary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Markdown 样式 */
|
||
|
|
.markdown-body {
|
||
|
|
color: var(--text-color-primary) !important;
|
||
|
|
background-color: transparent !important;
|
||
|
|
|
||
|
|
h1, h2, h3, h4, h5, h6 {
|
||
|
|
color: var(--text-color-primary) !important;
|
||
|
|
border-bottom-color: var(--border-color-light) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: var(--el-color-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
blockquote {
|
||
|
|
border-left-color: var(--border-color-default) !important;
|
||
|
|
color: var(--text-color-secondary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
th, td {
|
||
|
|
border-color: var(--border-color-light) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr {
|
||
|
|
background-color: var(--bg-color-secondary) !important;
|
||
|
|
|
||
|
|
&:nth-child(2n) {
|
||
|
|
background-color: var(--bg-color-tertiary) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
hr {
|
||
|
|
background-color: var(--border-color-light) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 登录弹窗深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
/* 登录弹窗 */
|
||
|
|
.glass-dialog {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left-section {
|
||
|
|
background: linear-gradient(
|
||
|
|
233deg,
|
||
|
|
rgba(59, 130, 246, 0.3) 17.67%,
|
||
|
|
rgba(96, 165, 250, 0.3) 70.4%
|
||
|
|
) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right-section {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
|
||
|
|
.content-title {
|
||
|
|
color: #f3f4f6 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mode-toggle {
|
||
|
|
color: #60a5fa !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-container,
|
||
|
|
.qr-container {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 第三方登录按钮 */
|
||
|
|
.third-party-btn {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: #4b5563 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 分割线 */
|
||
|
|
.el-divider__text {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
color: #9ca3af !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 聊天页面深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
/* 聊天默认页 */
|
||
|
|
.chat-default {
|
||
|
|
background-color: #111827 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-default-wrap {
|
||
|
|
background-color: #111827 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 欢迎文字 */
|
||
|
|
.welcome-text {
|
||
|
|
color: #f3f4f6 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 打字机效果背景 */
|
||
|
|
.typer-container {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-typewriter__fog {
|
||
|
|
background: linear-gradient(to right, transparent, #111827) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 滚动按钮 */
|
||
|
|
.scroll-btn {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
||
|
|
color: #9ca3af !important;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: #4b5563 !important;
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== Sender 输入框深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.el-sender,
|
||
|
|
.chat-defaul-sender,
|
||
|
|
.chat-default-sender {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-sender__inner {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-sender__header {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-bottom-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-sender__footer {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-top-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 文本域 */
|
||
|
|
.el-sender textarea,
|
||
|
|
.el-sender .el-textarea__inner {
|
||
|
|
background-color: transparent !important;
|
||
|
|
color: #f3f4f6 !important;
|
||
|
|
|
||
|
|
&::placeholder {
|
||
|
|
color: #6b7280 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 菜单深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.el-menu {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-menu-item,
|
||
|
|
.el-sub-menu__title {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-active {
|
||
|
|
color: #60a5fa !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-sub-menu .el-menu {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 气泡和消息深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
/* 气泡列表 */
|
||
|
|
.el-bubble-list {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* AI 气泡 */
|
||
|
|
.el-bubble[data-placement="start"] .el-bubble-content,
|
||
|
|
.el-bubble--start .el-bubble-content {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 用户气泡 */
|
||
|
|
.el-bubble[data-placement="end"] .el-bubble-content,
|
||
|
|
.el-bubble--end .el-bubble-content {
|
||
|
|
background-color: #3b82f6 !important;
|
||
|
|
color: #ffffff !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 用户文件项 */
|
||
|
|
.user-file-item {
|
||
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 思考链 */
|
||
|
|
.el-thinking,
|
||
|
|
.thinking-chain-warp {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
color: #9ca3af !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 附件和文件卡片深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.el-attachments,
|
||
|
|
.el-files-card {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-files-card__name {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-files-card__size {
|
||
|
|
color: #9ca3af !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 模型选择深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.model-select-trigger {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
border-color: #4b5563 !important;
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.model-select-dropdown {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.model-item {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-active {
|
||
|
|
background-color: rgba(96, 165, 250, 0.2) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 会话列表深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.conversations-list {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.conversation-item {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.conversation-item-active {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.conversation-title {
|
||
|
|
color: #f3f4f6 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.conversation-preview {
|
||
|
|
color: #9ca3af !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-circle {
|
||
|
|
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== Tooltip 和 Popover 深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.el-tooltip__popper,
|
||
|
|
.el-popover {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-tooltip__popper.is-dark {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 通用文字和链接深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
/* 链接 */
|
||
|
|
a {
|
||
|
|
color: #60a5fa;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: #93c5fd;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 标题 */
|
||
|
|
h1, h2, h3, h4, h5, h6 {
|
||
|
|
color: #f3f4f6;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 段落 */
|
||
|
|
p {
|
||
|
|
color: #e5e7eb;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 标签 */
|
||
|
|
.el-tag {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
border-color: #4b5563 !important;
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 徽章 */
|
||
|
|
.el-badge__content {
|
||
|
|
background-color: #ef4444 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 布局容器深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.el-container {
|
||
|
|
background-color: #111827 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-main {
|
||
|
|
background-color: #111827 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-aside {
|
||
|
|
background-color: #111827 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 自定义弹出框深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.custom-popover .el-menu {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
|
||
|
|
|
||
|
|
.el-menu-item {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
color: #60a5fa !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-active {
|
||
|
|
color: #60a5fa !important;
|
||
|
|
background-color: rgba(96, 165, 250, 0.15) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 移动端抽屉深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.mobile-drawer .el-drawer {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer-title {
|
||
|
|
color: #f3f4f6 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mobile-menu {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mobile-menu-actions {
|
||
|
|
border-top-color: #374151 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 二维码登录深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.qr-code-container {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.qr-code-tip {
|
||
|
|
color: #9ca3af !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 控制台页面深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.console-container,
|
||
|
|
.console-page {
|
||
|
|
background-color: #111827 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.console-card {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.console-title {
|
||
|
|
color: #f3f4f6 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.console-desc {
|
||
|
|
color: #9ca3af !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 产品/定价页面深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.products-container,
|
||
|
|
.pricing-container {
|
||
|
|
background-color: #111827 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-card {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
border-color: #60a5fa !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-title {
|
||
|
|
color: #f3f4f6 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-price {
|
||
|
|
color: #60a5fa !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-desc {
|
||
|
|
color: #9ca3af !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== Select 选择器深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.el-select {
|
||
|
|
.el-input__wrapper {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
box-shadow: 0 0 0 1px #374151 inset !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-input__inner {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-select-dropdown {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
|
||
|
|
.el-select-dropdown__item {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.selected {
|
||
|
|
color: #60a5fa !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 复选框和单选框深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.el-checkbox__inner,
|
||
|
|
.el-radio__inner {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
border-color: #4b5563 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-checkbox__label,
|
||
|
|
.el-radio__label {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== Switch 开关深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.el-switch__core {
|
||
|
|
background-color: #4b5563 !important;
|
||
|
|
border-color: #4b5563 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-switch.is-checked .el-switch__core {
|
||
|
|
background-color: #60a5fa !important;
|
||
|
|
border-color: #60a5fa !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== Loading 加载深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.el-loading-mask {
|
||
|
|
background-color: rgba(17, 24, 39, 0.9) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-loading-text {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== Message 消息深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.el-message {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
|
||
|
|
.el-message__content {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== Notification 通知深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.el-notification {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
|
||
|
|
.el-notification__title {
|
||
|
|
color: #f3f4f6 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-notification__content {
|
||
|
|
color: #9ca3af !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 日期选择器深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.el-date-picker,
|
||
|
|
.el-picker-panel {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-date-picker__header-label,
|
||
|
|
.el-picker-panel__icon-btn {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-date-table td.available:hover,
|
||
|
|
.el-date-table td.current:not(.disabled) {
|
||
|
|
color: #60a5fa !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 模型选择弹窗深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.model-select-dialog {
|
||
|
|
.el-dialog {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-dialog__header {
|
||
|
|
border-bottom-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-dialog__title {
|
||
|
|
color: #f3f4f6 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-dialog__body {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.model-list-container {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 侧边导航 */
|
||
|
|
.border-gray-100 {
|
||
|
|
border-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 分组标题 */
|
||
|
|
.group-title,
|
||
|
|
.text-gray-500 {
|
||
|
|
color: #9ca3af !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-gray-600 {
|
||
|
|
color: #d1d5db !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-gray-700 {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-gray-400 {
|
||
|
|
color: #9ca3af !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 背景色 */
|
||
|
|
.bg-gray-50 {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-gray-100 {
|
||
|
|
background-color: #4b5563 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hover\:bg-gray-50:hover {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-blue-50 {
|
||
|
|
background-color: rgba(96, 165, 250, 0.2) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 边框 */
|
||
|
|
.border-gray-200 {
|
||
|
|
border-color: #4b5563 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 模型 Logo 背景 */
|
||
|
|
.bg-white {
|
||
|
|
background-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 更多 Tailwind 背景色 */
|
||
|
|
.bg-green-100 {
|
||
|
|
background-color: rgba(52, 211, 153, 0.2) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-orange-100 {
|
||
|
|
background-color: rgba(251, 191, 36, 0.2) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-yellow-100 {
|
||
|
|
background-color: rgba(251, 191, 36, 0.2) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 更多 Tailwind 文字色 */
|
||
|
|
.text-green-600 {
|
||
|
|
color: #34d399 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-orange-600 {
|
||
|
|
color: #fbbf24 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-yellow-600 {
|
||
|
|
color: #fbbf24 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-blue-600 {
|
||
|
|
color: #60a5fa !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-gray-600 {
|
||
|
|
color: #d1d5db !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 欢迎文字打字机效果深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.welcome-text {
|
||
|
|
color: #f3f4f6 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-typewriter__fog {
|
||
|
|
background: linear-gradient(to right, transparent, #111827) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.typer-container {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 产品套餐弹窗深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.product-package-dialog {
|
||
|
|
.el-dialog {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.package-card {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
border-color: #60a5fa !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.package-title {
|
||
|
|
color: #f3f4f6 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.package-price {
|
||
|
|
color: #60a5fa !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.package-desc {
|
||
|
|
color: #9ca3af !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 用户中心深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.user-center-card {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-info-item {
|
||
|
|
color: #e5e7eb !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-info-label {
|
||
|
|
color: #9ca3af !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 尊享过滤标签深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.premium-filter-tag {
|
||
|
|
background: linear-gradient(#1f2937, #1f2937) padding-box,
|
||
|
|
linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd) border-box !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 更多 Tailwind 工具类深色覆盖 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
/* 边框颜色 */
|
||
|
|
.border-gray-100 {
|
||
|
|
border-color: #374151 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 文字颜色 */
|
||
|
|
.text-lg,
|
||
|
|
.text-base,
|
||
|
|
.text-sm,
|
||
|
|
.text-xs {
|
||
|
|
color: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 字体粗细保持不变 */
|
||
|
|
.font-bold,
|
||
|
|
.font-semibold,
|
||
|
|
.font-medium {
|
||
|
|
font-weight: inherit;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 联系我们弹窗深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.wechat-message-box {
|
||
|
|
.el-message-box {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-blue-600 {
|
||
|
|
color: #60a5fa !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-gray-600 {
|
||
|
|
color: #9ca3af !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-yellow-100 {
|
||
|
|
background-color: rgba(251, 191, 36, 0.2) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-yellow-800 {
|
||
|
|
color: #fbbf24 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 模型库页面深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.model-library-container {
|
||
|
|
background-color: #111827 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.model-library-card {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
border-color: #60a5fa !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 深度思考组件深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.deep-thinking-container {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 文件选择组件深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.files-select-container {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
border-color: #374151 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 系统公告弹窗深色样式 ========== */
|
||
|
|
[data-theme="dark"] {
|
||
|
|
.system-announcement-dialog {
|
||
|
|
.el-dialog {
|
||
|
|
background-color: #1f2937 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
