diff --git a/src/app/data/components/Archiving/index.tsx b/src/app/data/components/Archiving/index.tsx index 027835c..37386a5 100755 --- a/src/app/data/components/Archiving/index.tsx +++ b/src/app/data/components/Archiving/index.tsx @@ -27,16 +27,14 @@ interface YearData { const Title = ({ data }: { data: YearData }) => { return ( -
-
- {data.year} 年 {data.wordCount / 1000 > 50 && '🔥'} -
-
- 总共发布了：{data.total} 篇文章 -
-
- 总字数约：{(data.wordCount / 1000).toFixed(2)} K -
+
+ + {data.year} 年 {data.wordCount / 1000 > 50} + + + 共 {data.total} 篇 · 约{' '} + {(data.wordCount / 1000).toFixed(2)}K 字 +
); }; @@ -83,94 +81,113 @@ export default ({ list }: { list: Article[] }) => { }, [list]); return ( - <> - {/*
*/} -
-

- 归档 文章归纳 -

+
+
+
+ 归档 +
+
+

文章归纳

+

按时间线归档的文章列表

+
+
- {result.length ? ( - - {result.map((item, index) => ( - }> - {Object.keys(item.month).map((month, index) => ( -
-
-
-
-
-
-
- {month}月 {item.month[+month].wordCount / 1000 > 10 && '🔥'} -
-
{item.month[+month].total} 篇文章
-
{(item.month[+month].wordCount / 1000).toFixed(2)} K字
-
- - {item.month[+month].list.map((article: Article, index) => ( -
- - {dayjs(+article.createTime!).format('MM-DD')} {article.title} - - - + exit: { + y: -10, + opacity: 0, + height: 0, + transition: { + height: { + ease: 'easeInOut', + duration: 0.25, + }, + opacity: { + ease: 'easeInOut', + duration: 0.3, + }, + }, + }, + }, + }} + > + {result.map((item, index) => ( + }> +
+ {Object.keys(item.month).map((month, monthIdx) => ( +
+
+
+
+
+ + {month}月 {item.month[+month].wordCount / 1000 > 10} + + + {item.month[+month].total} 篇 · {(item.month[+month].wordCount / 1000).toFixed(2)}K 字 + +
+
    + {item.month[+month].list.map((article: Article, artIdx) => ( +
  • + + + + {dayjs(+article.createTime!).format('MM-DD')} + + {article.title} + + + {article.view} -
- ))} -
-
+ + + ))} +
))} - - ))} - - ) : ( -
- -
- )} -
- +
+ + ))} + + ) : ( +
+ +
+ )} +
); }; diff --git a/src/app/data/components/Statis/components/CateStatis/index.tsx b/src/app/data/components/Statis/components/CateStatis/index.tsx index eedc5e4..7eac1fb 100755 --- a/src/app/data/components/Statis/components/CateStatis/index.tsx +++ b/src/app/data/components/Statis/components/CateStatis/index.tsx @@ -32,31 +32,45 @@ export default () => { const option = { tooltip: { trigger: 'item', + backgroundColor: 'rgba(255,255,255,0.95)', + borderColor: 'rgba(0,0,0,0.08)', + borderWidth: 1, + textStyle: { color: '#1e293b' }, }, legend: { show: false, }, + color: ['#0ea5e9', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#6366f1', '#ec4899'], series: [ { name: '数量统计', type: 'pie', - radius: ['5%', '70%'], + radius: ['40%', '75%'], + center: ['50%', '50%'], avoidLabelOverlap: false, - padAngle: 5, + padAngle: 3, itemStyle: { - borderRadius: 10, + borderRadius: 8, + borderColor: 'transparent', + borderWidth: 0, }, label: { - show: false, - position: 'center', + show: true, + formatter: '{b}\n{d}%', + fontSize: 12, }, emphasis: { - label: { - show: false, + itemStyle: { + shadowBlur: 12, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.2)', }, + label: { show: true }, }, labelLine: { - show: false, + show: true, + length: 8, + length2: 6, }, data: list, }, @@ -79,12 +93,17 @@ export default () => { }, [list]); return ( -
-

- 分类一览 分类一览 -

- -
+
+
+
+ 分类一览 +
+
+

分类一览

+

文章分类占比分布

+
+
+
); }; diff --git a/src/app/data/components/Statis/components/TagStatus/index.tsx b/src/app/data/components/Statis/components/TagStatus/index.tsx index 4f285a6..67fe054 100755 --- a/src/app/data/components/Statis/components/TagStatus/index.tsx +++ b/src/app/data/components/Statis/components/TagStatus/index.tsx @@ -16,47 +16,36 @@ export default () => { getTagData(); }, []); - const colors = [ - { - color: '#0d6efd', - backgroundColor: 'rgba(13, 110, 253, .2)', - }, - { - color: '#6610f2', - backgroundColor: 'rgba(102, 16, 242, .2)', - }, - { - color: '#20c997', - backgroundColor: 'rgba(32, 201, 151, .2)', - }, - { - color: '#dc3545', - backgroundColor: 'rgba(220, 53, 69, .2)', - }, - { - color: '#fd7e14', - backgroundColor: 'rgba(253, 126, 20, .2)', - }, + const tagStyles = [ + 'bg-sky-100 text-sky-700 dark:bg-sky-500/20 dark:text-sky-300', + 'bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-300', + 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300', + 'bg-rose-100 text-rose-700 dark:bg-rose-500/20 dark:text-rose-300', + 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300', + 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300', ]; return ( - <> -
-

- 标签墙 标签墙 -

- -
- {list.map((item, index) => { - const { color, backgroundColor } = colors[getRandom(0, colors.length - 1)]; - return ( - - {item.name} - - ); - })} +
+
+
+ 标签墙 +
+
+

标签墙

+

文章标签云展示

- +
+ {list.map((item, index) => ( + + {item.name} + + ))} +
+
); }; diff --git a/src/app/data/components/Statis/index.tsx b/src/app/data/components/Statis/index.tsx index b4a7898..af0b045 100755 --- a/src/app/data/components/Statis/index.tsx +++ b/src/app/data/components/Statis/index.tsx @@ -41,56 +41,80 @@ export default ({ aTotal }: Props) => { getData(); }, []); + const statCards = [ + { + title: '文章总计', + value: aTotal, + icon: article, + gradient: 'from-sky-500 to-blue-600', + bgLight: 'bg-sky-50 dark:bg-sky-500/10', + borderColor: 'border-sky-200 dark:border-sky-500/30', + textColor: 'text-sky-600 dark:text-sky-400', + }, + { + title: '评论总计', + value: commentList.length, + icon: comment, + gradient: 'from-amber-500 to-orange-500', + bgLight: 'bg-amber-50 dark:bg-amber-500/10', + borderColor: 'border-amber-200 dark:border-amber-500/30', + textColor: 'text-amber-600 dark:text-amber-400', + }, + { + title: '分类总计', + value: cateList.length, + icon: cate, + gradient: 'from-emerald-500 to-teal-500', + bgLight: 'bg-emerald-50 dark:bg-emerald-500/10', + borderColor: 'border-emerald-200 dark:border-emerald-500/30', + textColor: 'text-emerald-600 dark:text-emerald-400', + }, + { + title: '友联总计', + value: linkList.length, + icon: friend, + gradient: 'from-rose-500 to-red-500', + bgLight: 'bg-rose-50 dark:bg-rose-500/10', + borderColor: 'border-rose-200 dark:border-rose-500/30', + textColor: 'text-rose-600 dark:text-rose-400', + }, + ]; + return ( - <> -

- 统计 数据统计 -

- -
-
-
- 文章 - -
-

{aTotal}

-

文章总计

-
-
- -
- - -
-

{commentList.length}

-

评论总计

-
-
- -
- 分类 - -
-

{cateList.length}

-

分类总计

-
-
- -
- 友联 - -
-

{linkList.length}

-

友联总计

-
-
+
+
+
+ 统计
- -
- - +
+

数据统计

+

博客核心指标概览

- + +
+ {statCards.map((card, index) => ( +
+
+
+ {card.title} +
+
+

{card.value}

+

{card.title}

+
+
+
+ ))} +
+ +
+ + +
+
); }; diff --git a/src/app/data/page.tsx b/src/app/data/page.tsx index 08745e9..a16076e 100755 --- a/src/app/data/page.tsx +++ b/src/app/data/page.tsx @@ -13,18 +13,33 @@ export default async () => { 📊 数据统计 + {/* 背景装饰 */} +
+
+
+
+
+
+ {/* 星空背景组件 */} -
-
数据统计
+
+

+ 数据统计 +

+

博客运营数据一览

-
- - +
+
+
+ + +
+
); diff --git a/src/app/wall/[cate]/page.tsx b/src/app/wall/[cate]/page.tsx index b61a507..015c37a 100755 --- a/src/app/wall/[cate]/page.tsx +++ b/src/app/wall/[cate]/page.tsx @@ -121,7 +121,7 @@ export default () => {
-
+
{/* 头部区域 */}
diff --git a/src/styles/tailwind.scss b/src/styles/tailwind.scss index 8d9ea23..bd3dc42 100755 --- a/src/styles/tailwind.scss +++ b/src/styles/tailwind.scss @@ -14,6 +14,6 @@ @apply border rounded-md box-border dark:border-black-b dark:bg-black-b hover:!border-primary outline-none transition-shadow ease-in-out; &:focus { - @apply border-2 border-primary shadow-[0_10px_20px_1px_rgb(83,157,253,.1)] + @apply border-2 border-primary shadow-[0_10px_20px_1px_rgb(83,157,253,.1)]; } } \ No newline at end of file