adminym/dysync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成前端改造

Browse Source 
1、下一步实现各个分类下载视频中重复视频去除-可配置是否去重
This commit is contained in:
jianzhichu
2025-11-23 23:06:13 +08:00
parent e5f22e45c3
commit 73d612fe50
34 changed files with 1013 additions and 673 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/pages/workplace/statics.vue
+361 -290
View File
@@ -1,126 +1,141 @@
<template>
<div class="stats-dashboard">
<div class="dashboard-container">
<!-- 核心统计概览 - 平分宽度 -->
<!-- 核心统计概览 - 美化版 -->
<section class="stats-overview">
<div class="stat-card primary-card">
<!-- 总视频数卡片 -->
<div class="stat-card primary-card main-card">
<!-- 卡片头部 -->
<div class="stat-header">
<span class="stat-meta">总视频数</span>
<div class="header-left">
<span class="stat-meta">视频总数</span>
<div class="stat-value">{{ totalVideos }}</div>
</div>
<div class="stat-icon video-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="23 7 16 12 23 17 23 7"></polygon>
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
</svg>
</div>
</div>
<div class="stat-value">{{ totalVideos }}</div>
<div class="stat-trend"></div>
<!-- 细分项区域 -->
<div class="stat-subitems">
<div class="subitem" :title="`我喜欢的视频数: ${favoriteCount}`">
<div class="subitem-icon like-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
<span class="subitem-meta">我喜欢的</span>
<span class="subitem-value">{{ favoriteCount }}</span>
</div>
<div class="subitem" :title="`我收藏的视频数: ${collectCount}`">
<div class="subitem-icon collect-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<span class="subitem-meta">我收藏的</span>
<span class="subitem-value">{{ collectCount }}</span>
</div>
<div class="subitem" :title="`我关注的视频数: ${followCount}`">
<div class="subitem-icon follow-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
</div>
<span class="subitem-meta">我关注的</span>
<span class="subitem-value">{{ followCount }}</span>
</div>
<div class="subitem" :title="`图文视频数: ${graphicVideoCount}`">
<div class="subitem-icon graphic-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
</div>
<span class="subitem-meta">图文视频</span>
<span class="subitem-value">{{ graphicVideoCount }}</span>
</div>
</div>
</div>
<div class="stat-card secondary-card">
<!-- 总占用空间卡片 -->
<div class="stat-card secondary-card main-card">
<!-- 卡片头部 -->
<div class="stat-header">
<span class="stat-meta">总占用空间</span>
<div class="header-left">
<span class="stat-meta">空间总计</span>
<div class="stat-value">{{ fileSizeTotal }} <span class="unit">G</span></div>
</div>
<div class="stat-icon size-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 12H2v8h20v-8z" />
<path d="M6 18h.01" />
<path d="M10 18h.01" />
</svg>
</div>
</div>
<div class="stat-value">{{ fileSizeTotal }} G</div>
<div class="stat-trend"></div>
<!-- 细分项区域 -->
<div class="stat-subitems">
<div class="subitem" :title="`喜欢的视频占用: ${favoriteSize}G`">
<div class="subitem-icon like-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
<span class="subitem-meta">喜欢占用</span>
<span class="subitem-value">{{ favoriteSize }} <span class="unit">G</span></span>
</div>
<div class="subitem" :title="`收藏的视频占用: ${collectSize}G`">
<div class="subitem-icon collect-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<span class="subitem-meta">收藏占用</span>
<span class="subitem-value">{{ collectSize }} <span class="unit">G</span></span>
</div>
<div class="subitem" :title="`关注的视频占用: ${followSize}G`">
<div class="subitem-icon follow-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
</div>
<span class="subitem-meta">关注占用</span>
<span class="subitem-value">{{ followSize }} <span class="unit">G</span></span>
</div>
<div class="subitem" :title="`图文视频占用: ${graphicVideoSize}G`">
<div class="subitem-icon graphic-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
</div>
<span class="subitem-meta">图文占用</span>
<span class="subitem-value">{{ graphicVideoSize }} <span class="unit">G</span></span>
</div>
</div>
</div>
</section>
<!-- 次级统计卡片组 - 包含喜欢、收藏、关注的数量及空间统计 -->
<section class="stats-grid">
<!-- 我喜欢的数量卡片 -->
<div class="stat-card mini-card">
<div class="stat-header">
<span class="stat-meta">我喜欢的</span>
<div class="stat-icon like-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
</div>
<div class="stat-value">{{ favoriteCount }}</div>
</div>
<!-- 我收藏的数量卡片 -->
<div class="stat-card mini-card">
<div class="stat-header">
<span class="stat-meta">我收藏的</span>
<div class="stat-icon collect-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</div>
</div>
<div class="stat-value">{{ collectCount }}</div>
</div>
<!-- 我关注的数量卡片 -->
<div class="stat-card mini-card">
<div class="stat-header">
<span class="stat-meta">我关注的</span>
<div class="stat-icon follow-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
</div>
</div>
<div class="stat-value">{{ followCount }}</div>
</div>
<!-- 喜欢占用空间卡片 -->
<div class="stat-card mini-card">
<div class="stat-header">
<span class="stat-meta">喜欢占用空间</span>
<div class="stat-icon size-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
</div>
<div class="stat-value">{{ favoriteSize }} G</div>
</div>
<!-- 收藏占用空间卡片 -->
<div class="stat-card mini-card">
<div class="stat-header">
<span class="stat-meta">收藏占用空间</span>
<div class="stat-icon size-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</div>
</div>
<div class="stat-value">{{ collectSize }} G</div>
</div>
<!-- 关注占用空间卡片 -->
<div class="stat-card mini-card">
<div class="stat-header">
<span class="stat-meta">关注占用空间</span>
<div class="stat-icon size-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
</div>
</div>
<div class="stat-value">{{ followSize }} G</div>
</div>
</section>
<!-- 详细分类统计 -->
<!-- 详细分类统计（保持不变） -->
<section class="detailed-stats">
<div class="stats-header">
<div class="tab-controls">
@@ -184,7 +199,6 @@
<symbol id="cup" viewBox="0 0 12 12">
<path d="M18 4h2v16h-2zM4 4h14v2H4zM4 8h10v2H4zM4 12h10v2H4zM4 16h6v2H4zM4 20h6v2H4z" />
</symbol>
<!-- 其他图标省略，保持原样 -->
</svg>
</div>
</template>
@@ -207,7 +221,7 @@ interface Category {
icon: string;
}
// 状态管理 - 包含喜欢、收藏、关注的数量及空间统计
// 状态管理
const totalVideos = ref<number>(0);
const totalAuthors = ref<number>(0);
const categoryTotal = ref<number>(0);
@@ -216,24 +230,26 @@ const totalDiskSize = ref<string>('0.00');
const favoriteCount = ref<number>(0);
const collectCount = ref<number>(0);
const followCount = ref<number>(0); // 新增：关注的数量
const favoriteSize = ref<string>('0.00'); // 喜欢占用空间
const collectSize = ref<string>('0.00'); // 收藏占用空间
const followSize = ref<string>('0.00'); // 新增：关注占用空间
const followCount = ref<number>(0);
const graphicVideoCount = ref<number>(0);
const favoriteSize = ref<string>('0.00');
const collectSize = ref<string>('0.00');
const followSize = ref<string>('0.00');
const graphicVideoSize = ref<string>('0.00');
const categories = ref<Category[]>([]);
const authors = ref<Author[]>([]);
const currentTab = ref<string>('author');
const tabCount = ref<number>(0); // tab切换时显示数量
const tabCount = ref<number>(0);
// 组件名称
defineOptions({
name: 'StatsDashboard',
});
// 加载数据
// 加载数据和切换标签逻辑
onMounted(() => {
// const html = document.documentElement;
// html.classList.add('dark-mode');
loadDashboardData();
});
@@ -245,6 +261,7 @@ const changeTab = (e: any) => {
tabCount.value = categoryTotal.value;
}
};
const loadDashboardData = async () => {
try {
const res = await useApiStore().VideoStatics();
@@ -253,16 +270,20 @@ const loadDashboardData = async () => {
totalVideos.value = res.data.videoCount;
fileSizeTotal.value = res.data.videoSizeTotal || 0.0;
totalDiskSize.value = res.data.totalDiskSize || 0.0;
favoriteCount.value = res.data.favoriteCount;
collectCount.value = res.data.collectCount;
followCount.value = res.data.followCount || 0; // 新增：读取关注数量
followCount.value = res.data.followCount || 0;
graphicVideoCount.value = res.data.graphicVideoCount || 0;
favoriteSize.value = res.data.videoFavoriteSize || 0.0;
collectSize.value = res.data.videoCollectSize || 0.0;
followSize.value = res.data.videoFollowSize || 0.0; // 新增：读取关注占用空间
followSize.value = res.data.videoFollowSize || 0.0;
graphicVideoSize.value = res.data.graphicVideoSize || 0.0;
categories.value = res.data.categories;
authors.value = res.data.authors;
// 分类图标和颜色随机分配
const cates = getRandomElements(categoriessss.value, categories.value.length);
const colors = getRandomElements(colorArray, categories.value.length);
categories.value.forEach((item, index) => {
@@ -274,14 +295,12 @@ const loadDashboardData = async () => {
}
};
// 随机获取数组元素方法
const getRandomElements = (arr: any[], n: number) => {
if (n <= 0) return [];
if (n >= arr.length) return [...arr];
return [...arr].sort(() => Math.random() - 0.5).slice(0, n);
};
// 图标列表和颜色数组
const categoriessss = ref<any[]>([
'cup',
'spoon',
@@ -322,7 +341,7 @@ const colorArray = [
</script>
<style scoped>
/* 白天模式默认样式 */
/* 基础样式 */
.stats-dashboard {
min-height: 100vh;
background-color: #ffffff;
@@ -343,115 +362,191 @@ const colorArray = [
}
}
/* 概览区域布局 - 始终平分宽度 */
/* 核心概览区域 */
.stats-overview {
display: grid;
grid-template-columns: 1fr 1fr; /* 1:1平分宽度 */
gap: 20px;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-bottom: 30px;
}
/* 次级统计网格布局 - 适配6个卡片（喜欢、收藏、关注的数量+空间） */
.stats-grid {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
margin-bottom: 30px;
/* 主卡片样式 - 增强边框可见性 */
.main-card {
padding: 28px;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
/* 白天模式添加明显边框 */
border: 1px solid #e0e0e0;
}
@media (min-width: 576px) {
.stats-grid {
grid-template-columns: repeat(3, 1fr); /* 中等屏幕每行3个 */
}
}
@media (min-width: 768px) {
.stats-grid {
grid-template-columns: repeat(3, 1fr); /* 平板屏幕每行3个 */
}
}
@media (min-width: 992px) {
.stats-grid {
grid-template-columns: repeat(6, 1fr); /* 大屏幕每行6个，均匀分布 */
}
}
/* 其他样式保持不变 */
.stat-card {
background: #f5f5f5;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
/* 卡片hover效果 */
.main-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
/* hover时边框颜色加深 */
border-color: #d0d0d0;
}
/* 卡片头部 */
.stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
align-items: flex-start;
margin-bottom: 22px;
}
.header-left {
display: flex;
flex-direction: column;
gap: 6px;
}
/* 卡片元数据 */
.stat-meta {
font-size: 14px;
font-size: 15px;
color: #666666;
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: 0.6px;
font-weight: 500;
}
/* 卡片主数值 */
.stat-value {
font-size: 42px;
font-weight: 700;
color: #1a1a1a;
line-height: 1.1;
display: flex;
align-items: baseline;
gap: 8px;
}
/* 单位样式 */
.unit {
font-size: 22px;
color: #444444;
font-weight: 500;
}
/* 卡片图标 */
.stat-icon {
width: 40px;
height: 40px;
border-radius: 10px;
width: 60px;
height: 60px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.video-icon {
background-color: rgba(76, 175, 80, 0.2);
flex-shrink: 0;
background-color: rgba(76, 175, 80, 0.15);
color: #4caf50;
transition: all 0.3s ease;
}
.size-icon {
background-color: rgba(33, 150, 243, 0.2);
/* 空间卡片图标颜色 */
.secondary-card .stat-icon {
background-color: rgba(33, 150, 243, 0.15);
color: #2196f3;
}
.like-icon {
background-color: rgba(233, 30, 99, 0.2);
/* 卡片hover时图标缩放 */
.main-card:hover .stat-icon {
transform: scale(1.08);
}
/* 细分项容器 - 增强分隔线 */
.stat-subitems {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
padding-top: 20px;
/* 白天模式使用明显的分隔线 */
border-top: 1px solid #d0d0d0;
}
/* 细分项样式 - 增强边框和背景 */
.subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
/* 白天模式添加白色背景和明显边框 */
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
transition: all 0.2s ease;
cursor: default;
}
/* 细分项hover效果 - 增强边框和阴影 */
.subitem:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
border-color: #c0c0c0;
background: #fafafa;
}
/* 细分项图标 */
.subitem-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-color: rgba(233, 30, 99, 0.1);
color: #e91e63;
}
/* 收藏图标颜色 */
.collect-icon {
background-color: rgba(255, 152, 0, 0.2);
background-color: rgba(255, 152, 0, 0.1);
color: #ff9800;
}
/* 新增：关注图标样式 */
/* 关注图标颜色 */
.follow-icon {
background-color: rgba(156, 39, 176, 0.2);
background-color: rgba(156, 39, 176, 0.1);
color: #9c27b0;
}
.stat-value {
font-size: 32px;
font-weight: 700;
margin: 0 0 10px 0;
color: #333333;
line-height: 1;
/* 图文图标颜色 */
.graphic-icon {
background-color: rgba(255, 159, 64, 0.1);
color: #d9091a;
}
.mini-card .stat-value {
font-size: 24px;
/* 细分项元数据 */
.subitem-meta {
font-size: 13px;
color: #666666;
font-weight: 500;
letter-spacing: 0.3px;
flex: 1;
}
/* 细分项数值 */
.subitem-value {
font-size: 16px;
font-weight: 600;
color: #222222;
display: flex;
align-items: baseline;
gap: 4px;
}
/* 细分项单位 */
.subitem-value .unit {
font-size: 12px;
color: #555555;
font-weight: 500;
}
/* 卡片顶部主题边框 */
.primary-card {
border-top: 4px solid #4caf50;
}
@@ -460,7 +555,7 @@ const colorArray = [
border-top: 4px solid #2196f3;
}
/* 详细统计区域 */
/* 详细分类统计区域 */
.detailed-stats {
background: #f5f5f5;
border-radius: 12px;
@@ -475,12 +570,6 @@ const colorArray = [
margin-bottom: 25px;
}
.stats-header h2 {
margin: 0;
font-size: 20px;
color: #333333;
}
.tab-controls {
display: flex;
gap: 10px;
@@ -503,12 +592,6 @@ const colorArray = [
font-weight: 500;
}
.tab-btn:hover:not(.active) {
background: rgba(0, 0, 0, 0.05);
color: #333333;
}
/* 统计内容区域 */
.stats-content {
animation: fadeIn 0.5s ease;
}
@@ -534,19 +617,23 @@ const colorArray = [
}
}
/* 作者卡片 */
.author-card {
.author-card,
.category-card {
background: #eeeeee;
border-radius: 8px;
padding: 15px;
display: flex;
flex-direction: column;
gap: 10px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.author-card:hover {
.author-card {
display: flex;
flex-direction: column;
gap: 10px;
}
.author-card:hover,
.category-card:hover {
transform: translateX(5px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}
@@ -564,17 +651,15 @@ const colorArray = [
object-fit: cover;
}
.author-info {
flex: 1;
}
.author-name {
.author-name,
.category-name {
margin: 0 0 5px 0;
font-size: 16px;
color: #333333;
}
.author-stats {
.author-stats,
.category-stats {
margin: 0;
font-size: 13px;
color: #666666;
@@ -594,21 +679,10 @@ const colorArray = [
transition: width 0.5s ease;
}
/* 分类卡片 */
.category-card {
background: #eeeeee;
border-radius: 8px;
padding: 15px;
display: flex;
align-items: center;
gap: 15px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.category-card:hover {
transform: translateX(5px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}
.category-icon {
@@ -622,29 +696,12 @@ const colorArray = [
flex-shrink: 0;
}
.category-info {
flex: 1;
}
.category-name {
margin: 0 0 3px 0;
font-size: 16px;
color: #333333;
}
.category-stats {
margin: 0;
font-size: 13px;
color: #666666;
}
.category-percentage {
font-size: 14px;
font-weight: 500;
color: var(--category-color);
}
/* 动画效果 */
@keyframes fadeIn {
from {
opacity: 0;
@@ -667,33 +724,40 @@ const colorArray = [
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* 晚上模式样式 */
/* 夜间模式样式 - 保持原有效果 */
html.dark-mode .main-card {
border-color: rgba(255, 255, 255, 0.1);
background-color: rgba(30, 30, 50, 0.9);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
html.dark-mode .main-card:hover {
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}
html.dark-mode .stat-subitems {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
html.dark-mode .subitem {
background: rgba(40, 40, 65, 0.7);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
html.dark-mode .subitem:hover {
background: rgba(40, 40, 65, 0.9);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* 夜间模式其他样式保持不变 */
html.dark-mode .stats-dashboard {
background-color: #1a1a2e;
color: #eaeaea;
}
html.dark-mode .dashboard-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
html.dark-mode .dashboard-header h1 {
color: #ffffff;
}
html.dark-mode .header-subtitle {
color: #b0b0c3;
}
html.dark-mode .stat-card {
background: rgba(30, 30, 50, 0.8);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
html.dark-mode .stat-card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
html.dark-mode .stat-meta {
color: #b0b0c3;
}
@@ -702,51 +766,58 @@ html.dark-mode .stat-value {
color: #ffffff;
}
html.dark-mode .unit {
color: #d0d0d0;
}
html.dark-mode .stat-icon {
background-color: rgba(76, 175, 80, 0.25);
}
html.dark-mode .secondary-card .stat-icon {
background-color: rgba(33, 150, 243, 0.25);
}
html.dark-mode .subitem-meta {
color: #c0c0d3;
}
html.dark-mode .subitem-value {
color: #ffffff;
}
html.dark-mode .subitem-value .unit {
color: #b0b0c3;
}
html.dark-mode .subitem-icon {
background-color: rgba(233, 30, 99, 0.2);
}
html.dark-mode .collect-icon {
background-color: rgba(255, 152, 0, 0.2);
}
html.dark-mode .follow-icon {
background-color: rgba(156, 39, 176, 0.2);
}
html.dark-mode .graphic-icon {
background-color: rgba(255, 159, 64, 0.2);
}
html.dark-mode .detailed-stats {
background: rgba(30, 30, 50, 0.8);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
html.dark-mode .stats-header h2 {
color: #ffffff;
}
html.dark-mode .tab-btn {
color: #b0b0c3;
}
html.dark-mode .tab-btn:hover:not(.active) {
background: rgba(255, 255, 255, 0.05);
color: #ffffff;
}
html.dark-mode .author-card {
background: rgba(40, 40, 65, 0.6);
box-shadow: none;
}
html.dark-mode .author-name {
color: #ffffff;
}
html.dark-mode .author-stats {
color: #b0b0c3;
}
html.dark-mode .author-progress {
background: rgba(255, 255, 255, 0.1);
}
html.dark-mode .author-card,
html.dark-mode .category-card {
background: rgba(40, 40, 65, 0.6);
box-shadow: none;
}
html.dark-mode .author-name,
html.dark-mode .category-name {
color: #ffffff;
}
html.dark-mode .category-stats {
color: #b0b0c3;
}
</style>