xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成全站深色主题改造

Browse Source
This commit is contained in:
ccnetcore
2026-01-24 17:28:12 +08:00
parent 9a87b41027
commit 21b7ef4d74
10 changed files with 222 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Yi.Ai.Vue3/index.html
View File

@@ -112,7 +112,7 @@
<body> <body>
<!-- 加载动画容器 --> <!-- 加载动画容器 -->
<div id="yixinai-loader" class="loader-container"> <div id="yixinai-loader" class="loader-container">
<div class="loader-title">意心Ai 3.3</div> <div class="loader-title">意心Ai 3.4</div>
<div class="loader-subtitle">海外地址，仅首次访问预计加载约10秒，无需梯子</div> <div class="loader-subtitle">海外地址，仅首次访问预计加载约10秒，无需梯子</div>
<div class="loader-logo"> <div class="loader-logo">
<div class="pulse-box"></div> <div class="pulse-box"></div>

BIN
Yi.Ai.Vue3/src/assets/images/api_usage_instructions.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 51 KiB

BIN
Yi.Ai.Vue3/src/assets/images/logo-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

8
Yi.Ai.Vue3/src/components/SystemAnnouncementDialog/index.vue
View File

@@ -444,7 +444,7 @@ watch(isDialogVisible, async (newValue) => {
:deep(.el-tabs__header) { :deep(.el-tabs__header) {
flex-shrink: 0; flex-shrink: 0;
margin: 0 20px; margin: 0 20px;
padding-top: 16px; //padding-top: 16px;
background-color: #f8f9fa; background-color: #f8f9fa;
} }
@@ -518,7 +518,7 @@ watch(isDialogVisible, async (newValue) => {
.activity-list { .activity-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 12px;
} }
.activity-item { .activity-item {
@@ -923,11 +923,11 @@ watch(isDialogVisible, async (newValue) => {
.announcement-item { .announcement-item {
position: relative; position: relative;
padding: 24px; padding: 20px;
background: #fff; background: #fff;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
margin-bottom: 16px; margin-bottom: 10px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid #e8e9eb; border: 1px solid #e8e9eb;

4
Yi.Ai.Vue3/src/components/userPersonalCenter/components/UsageStatistics.vue
View File

@@ -1166,7 +1166,7 @@ onBeforeUnmount(() => {
<el-card v-loading="loading" class="chart-card today-model-card"> <el-card v-loading="loading" class="chart-card today-model-card">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span class="card-title">📋 今日各模型使用量统计</span> <span class="card-title">📋 今日各模型使用量统计(凌晨零点至现在)</span>
<el-tag v-if="todayModelUsageData.length > 0" type="success" effect="plain"> <el-tag v-if="todayModelUsageData.length > 0" type="success" effect="plain">
共 {{ todayModelUsageData.length }} 个模型 共 {{ todayModelUsageData.length }} 个模型
</el-tag> </el-tag>
@@ -1469,7 +1469,7 @@ onBeforeUnmount(() => {
.model-cards-grid { .model-cards-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(4, 1fr);
gap: 14px; gap: 14px;
} }

2
Yi.Ai.Vue3/src/layouts/components/ChatAside/index.vue
View File

@@ -626,7 +626,7 @@ function toggleSidebar() {
.conversation-item { .conversation-item {
transition: all 0.3s ease; transition: all 0.3s ease;
width: 100% !important; //width: 100% !important;
max-width: 100% !important; max-width: 100% !important;
box-sizing: border-box !important; box-sizing: border-box !important;

2
Yi.Ai.Vue3/src/layouts/components/Header/components/Avatar.vue
View File

@@ -170,7 +170,7 @@ function openVipGuide() {
<el-avatar :src="getUserProfilePicture()" :size="28" fit="fit" shape="circle" /> <el-avatar :src="getUserProfilePicture()" :size="28" fit="fit" shape="circle" />
</template> </template>
<div class="popover-content-box shadow-lg"> <div class="popover-content-box shadow-lg popover-box-item">
<!-- 用户信息 --> <!-- 用户信息 -->
<div class="user-info-box flex items-center gap-8px p-8px rounded-lg mb-2"> <div class="user-info-box flex items-center gap-8px p-8px rounded-lg mb-2">
<el-avatar :src="getUserProfilePicture()" :size="32" fit="fit" shape="circle" /> <el-avatar :src="getUserProfilePicture()" :size="32" fit="fit" shape="circle" />

22
Yi.Ai.Vue3/src/layouts/components/Header/index.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { useColorMode } from '@vueuse/core';
import logoDark from '@/assets/images/logo-dark.png';
import logo from '@/assets/images/logo.png'; import logo from '@/assets/images/logo.png';
import ConsoleBtn from '@/layouts/components/Header/components/ConsoleBtn.vue'; import ConsoleBtn from '@/layouts/components/Header/components/ConsoleBtn.vue';
import { useUserStore } from '@/stores'; import { useUserStore } from '@/stores';
@@ -17,6 +19,22 @@ const router = useRouter();
const route = useRoute(); const route = useRoute();
const userStore = useUserStore(); const userStore = useUserStore();
// 使用 VueUse 的 useColorMode 获取主题状态
const mode = useColorMode({
attribute: 'data-theme',
modes: {
light: 'light',
dark: 'dark',
},
storageKey: 'yi-theme',
initialValue: 'light',
});
// 根据主题切换 logo
const currentLogo = computed(() => {
return mode.value === 'dark' ? logoDark : logo;
});
// 移动端菜单抽屉状态 // 移动端菜单抽屉状态
const mobileMenuVisible = ref(false); const mobileMenuVisible = ref(false);
@@ -73,7 +91,7 @@ function toggleMobileMenu() {
<!-- 左侧品牌区域 --> <!-- 左侧品牌区域 -->
<div class="menu-left"> <div class="menu-left">
<div class="brand-container" @click="router.push('/')"> <div class="brand-container" @click="router.push('/')">
<el-image :src="logo" alt="logo" fit="contain" class="logo-img" /> <el-image :src="currentLogo" alt="logo" fit="contain" class="logo-img" />
<span class="brand-text">意心AI</span> <span class="brand-text">意心AI</span>
</div> </div>
</div> </div>
@@ -175,7 +193,7 @@ function toggleMobileMenu() {
<!-- 移动端头部 --> <!-- 移动端头部 -->
<div class="mobile-header"> <div class="mobile-header">
<div class="mobile-brand" @click="router.push('/')"> <div class="mobile-brand" @click="router.push('/')">
<el-image :src="logo" alt="logo" fit="contain" class="mobile-logo" /> <el-image :src="currentLogo" alt="logo" fit="contain" class="mobile-logo" />
<span class="mobile-brand-text">意心AI</span> <span class="mobile-brand-text">意心AI</span>
</div> </div>

5
Yi.Ai.Vue3/src/pages/console/channel/index.vue
View File

@@ -512,6 +512,7 @@ onUnmounted(() => {
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="!isMobile" prop="multiplierShow" label="显示倍率" width="90" />
<el-table-column v-if="!isMobile" prop="multiplier" label="倍率" width="80" /> <el-table-column v-if="!isMobile" prop="multiplier" label="倍率" width="80" />
<el-table-column v-if="!isMobile" prop="orderNum" label="排序" width="70" /> <el-table-column v-if="!isMobile" prop="orderNum" label="排序" width="70" />
<el-table-column label="操作" :width="isMobile ? 120 : 150" fixed="right"> <el-table-column label="操作" :width="isMobile ? 120 : 150" fixed="right">
@@ -724,10 +725,10 @@ onUnmounted(() => {
<el-switch v-model="modelForm.isEnabled" /> <el-switch v-model="modelForm.isEnabled" />
</el-form-item> </el-form-item>
<el-form-item label="模型倍率"> <el-form-item label="模型倍率">
<el-input-number v-model="modelForm.multiplier" :min="0.01" :step="0.1" /> <el-input-number v-model="modelForm.multiplier" :min="0" :step="0.1" />
</el-form-item> </el-form-item>
<el-form-item label="显示倍率"> <el-form-item label="显示倍率">
<el-input-number v-model="modelForm.multiplierShow" :min="0.01" :step="0.1" /> <el-input-number v-model="modelForm.multiplierShow" :min="0" :step="0.1" />
</el-form-item> </el-form-item>
<el-form-item label="模型类型" required> <el-form-item label="模型类型" required>
<el-select v-model="modelForm.modelType" placeholder="请选择模型类型"> <el-select v-model="modelForm.modelType" placeholder="请选择模型类型">

284
Yi.Ai.Vue3/src/styles/dark-theme.scss
View File

@@ -1,5 +1,13 @@
/* ========== 深色主题 Element Plus 覆盖样式 ========== */ /* ========== 深色主题 Element Plus 覆盖样式 ========== */
/* 深色主题通用 Div 样式 Mixin */
@mixin dark-theme-div {
border-radius: 0 !important;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
}
/* 全局基础样式 */ /* 全局基础样式 */
[data-theme="dark"] { [data-theme="dark"] {
background: background:
@@ -124,7 +132,7 @@
} }
.logo-text { .logo-text {
color: var(--text-color-primary) !important; color: #fff !important;
} }
/* 聊天区域 */ /* 聊天区域 */
@@ -332,10 +340,7 @@
/* 表格 */ /* 表格 */
.el-table { .el-table {
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
.cell{ .cell{
color: #ffffff !important; color: #ffffff !important;
} }
@@ -866,42 +871,29 @@
/* 大标题样式 */ /* 大标题样式 */
h1 { h1 {
color: #ffffff !important; color: #ffffff !important;
font-size: 68px !important;
line-height: 74px !important;
} }
h2 { h2 {
color: #ffffff !important; color: #ffffff !important;
font-size: 24px !important;
line-height: 62px !important;
} }
h3 { h3 {
color: #ffffff !important; color: #ffffff !important;
font-size: 22px !important;
line-height: 54px !important;
} }
/* 正文标题 */ /* 正文标题 */
h4, h5, h6 { h4, h5, h6 {
color: #ffffff !important; color: #ffffff !important;
font-size: 28px !important;
line-height: 30px !important;
} }
/* 正文 */ /* 正文 */
p { p {
color: #a0a0a0 !important; color: #a0a0a0 !important;
line-height: 22px !important;
font-size: 16px !important;
font-weight: 400 !important;
} }
/* 备注内容 */ /* 备注内容 */
small, .note, .hint, .tip { small, .note, .hint, .tip {
color: #666 !important; color: #666 !important;
font-size: 12px !important;
line-height: 18px !important;
} }
/* 链接 */ /* 链接 */
@@ -1518,9 +1510,7 @@
background: transparent !important; background: transparent !important;
} }
.info-item{ .info-item{
border-radius: 0 !important; @include dark-theme-div;
background-color: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
} }
.info-value{ .info-value{
color: #fff !important; color: #fff !important;
@@ -1529,9 +1519,7 @@
background: transparent !important; background: transparent !important;
} }
.filter-toolbar{ .filter-toolbar{
background: transparent !important; @include dark-theme-div;
border-radius: 0 !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
} }
.el-select__wrapper{ .el-select__wrapper{
border-radius: 0 !important; border-radius: 0 !important;
@@ -1542,25 +1530,16 @@
border: 1px solid rgba(0, 255, 136, .2) !important; border: 1px solid rgba(0, 255, 136, .2) !important;
} }
.toolbar{ .toolbar{
border-radius: 0 !important; @include dark-theme-div;
background-color: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.el-card__header{ .el-card__header{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.header-title{ .header-title{
color: #fff !important; color: #fff !important;
} }
.token-table-wrapper{ .token-table-wrapper{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.guide-title{ .guide-title{
color: #fff !important; color: #fff !important;
@@ -1574,40 +1553,22 @@
color: #fff !important; color: #fff !important;
} }
.chart-container{ .chart-container{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.stat-item{ .stat-item{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.progress-section{ .progress-section{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.el-alert{ .el-alert{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.chart-container-wrapper{ .chart-container-wrapper{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.token-stat-item{ .token-stat-item{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.token-value{ .token-value{
color: #fff !important; color: #fff !important;
@@ -1619,16 +1580,10 @@
color: #fff !important; color: #fff !important;
} }
.consumption-card{ .consumption-card{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.task-item{ .task-item{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.task-name{ .task-name{
color: #fff !important; color: #fff !important;
@@ -1650,27 +1605,16 @@
border-radius: 0; border-radius: 0;
} }
.tip-item{ .tip-item{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.tools-panel{ .tools-panel{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.tool-item { .tool-item {
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.el-tabs--border-card{ .el-tabs--border-card{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
} }
.el-tabs--border-card>.el-tabs__header{ .el-tabs--border-card>.el-tabs__header{
border-radius: 0 !important; border-radius: 0 !important;
@@ -1681,23 +1625,175 @@
background-color: rgba(0, 255, 136, 0.15) !important; background-color: rgba(0, 255, 136, 0.15) !important;
} }
.channel-management{ .channel-management{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.model-list-panel{ .model-list-panel{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important;
border: 1px solid rgba(0, 255, 136, .2) !important;
color: #fff !important;
} }
.app-list-panel{ .app-list-panel{
border-radius: 0 !important; @include dark-theme-div;
background: transparent !important; }
border: 1px solid rgba(0, 255, 136, .2) !important; .bg-green-50{
@include dark-theme-div;
}
.el-upload--picture-card{
@include dark-theme-div;
}
.brand-container:hover{
color: #00ff88 !important;
background-color: rgba(0, 255, 136, 0.15) !important;
}
.announcement-tabs .el-tabs__header{
@include dark-theme-div;
}
.activity-content .activity-item{
@include dark-theme-div;
}
.activity-title h3{
color: #fff !important; color: #fff !important;
} }
.activity-content .activity-title{
-webkit-text-fill-color: #fff !important;
}
.announcement-content .announcement-item{
@include dark-theme-div;
}
.popover-content{
@include dark-theme-div;
background-color: #04080b !important;
}
.popover-box-item{
background: transparent !important;
color: #fff !important;
border: none !important;
}
.text-gray-800{
color: #fff !important;
}
.popover-content-box-items:hover{
border: 1px solid rgba(0, 255, 136, 0.4);
border-radius: 0;
}
.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-sub-menu__title{
@include dark-theme-div;
}
.el-table tbody tr:hover{
transition: none;
}
.footer-wrapper{
color: #fff !important;
}
.el-bubble-content-wrapper .el-bubble-content{
@include dark-theme-div;
}
.markdown-body p{
color: #fff !important;
}
.footer-time .el-button{
margin-left: 10px;
}
.desktop-layout .package-card{
@include dark-theme-div;
}
.contact-service-card{
@include dark-theme-div;
}
.model-library-card-mobile{
@include dark-theme-div;
}
.desktop-layout .right-panel .benefits-list .benefit-item{
color: #fff !important;
}
.section-title{
color: #fff !important;
}
.el-dialog .el-dialog__body{
color: #fff !important;
}
.desktop-layout .package-card.selected{
border: 1px solid rgba(0, 255, 136, 0.4) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.newbie-guide-container{
@include dark-theme-div;
}
.newbie-header{
@include dark-theme-div;
}
.purchase-card{
@include dark-theme-div;
}
.taobao-code-box{
@include dark-theme-div;
}
.code-text{
@include dark-theme-div;
}
.tips-box{
@include dark-theme-div;
}
.activation-guide-container{
@include dark-theme-div;
}
.contact-section{
@include dark-theme-div;
}
.model-library-card{
@include dark-theme-div;
}
.model-library-container{
background: transparent !important;
}
.filter-section{
@include dark-theme-div;
}
.model-card{
@include dark-theme-div;
}
.el-check-tag.el-check-tag--primary.is-checked{
color: #00ff88 !important;
}
.el-check-tag{
@include dark-theme-div;
}
.model-id{
@include dark-theme-div;
}
.model-id-label{
color: #fff !important;
}
.model-id-value{
color: #fff !important;
}
.model-library-container .main-content .content-wrapper .model-list-section .model-grid .model-card .model-card-header .model-icon .icon-img{
@include dark-theme-div;
}
.model-library-container .main-content .content-wrapper .model-list-section .model-grid .model-card .model-description:hover
{
background: transparent !important;
border: 1px solid rgba(0, 255, 136, 0.4) !important;
border-radius: 0 !important;
}
.theme-btn-container .theme-btn[data-v-20012115]:hover{
background-color: transparent !important;
}
.loading-wrapper{
@include dark-theme-div;
}
.empty-wrapper{
@include dark-theme-div;
}
.session-sidebar .session-item{
color: #CFD3DC !important;
}
.model-name{
color: #fff !important;
}
.model-logo{
border-radius: 0 !important;
}
} }