diff --git a/public/article/2023.json b/public/article/2023.json
new file mode 100644
index 0000000000000000000000000000000000000000..a520b4e291cacb31cb535a91e185e129aca64fad
--- /dev/null
+++ b/public/article/2023.json
@@ -0,0 +1,962 @@
+[
+    {
+        "title": "uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)",
+        "url": "https://yma16.blog.csdn.net/article/details/135174869",
+        "viewCount": 1734,
+        "commentCount": 15,
+        "collectCount": 34,
+        "diggCount": 39,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-12-25 01:58:48",
+        "editUrl": "https://editor.csdn.net/md?articleId=135174869"
+    },
+    {
+        "title": "uniapp框架——初始化vue3项目(搭建ai项目第一步)",
+        "url": "https://yma16.blog.csdn.net/article/details/134906708",
+        "viewCount": 8291,
+        "commentCount": 32,
+        "collectCount": 20,
+        "diggCount": 22,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-12-10 20:13:26",
+        "editUrl": "https://editor.csdn.net/md?articleId=134906708"
+    },
+    {
+        "title": "前端vue3——实现二次元人物拼图校验",
+        "url": "https://yma16.blog.csdn.net/article/details/134895099",
+        "viewCount": 2612,
+        "commentCount": 10,
+        "collectCount": 9,
+        "diggCount": 13,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-12-09 22:24:19",
+        "editUrl": "https://editor.csdn.net/md?articleId=134895099"
+    },
+    {
+        "title": "前端——html拖拽原理",
+        "url": "https://yma16.blog.csdn.net/article/details/134794991",
+        "viewCount": 5513,
+        "commentCount": 6,
+        "collectCount": 7,
+        "diggCount": 5,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-12-05 01:36:46",
+        "editUrl": "https://editor.csdn.net/md?articleId=134794991"
+    },
+    {
+        "title": "前端vue3——html2canvas给网站截图生成宣传海报",
+        "url": "https://yma16.blog.csdn.net/article/details/134620137",
+        "viewCount": 5532,
+        "commentCount": 11,
+        "collectCount": 9,
+        "diggCount": 10,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-11-26 01:58:47",
+        "editUrl": "https://editor.csdn.net/md?articleId=134620137"
+    },
+    {
+        "title": "node实战——koa实现文件上传",
+        "url": "https://yma16.blog.csdn.net/article/details/134497664",
+        "viewCount": 4502,
+        "commentCount": 11,
+        "collectCount": 9,
+        "diggCount": 11,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-11-20 00:02:48",
+        "editUrl": "https://editor.csdn.net/md?articleId=134497664"
+    },
+    {
+        "title": "node实战——koa实现文件下载和图片/pdf/视频预览（node后端储备知识）",
+        "url": "https://yma16.blog.csdn.net/article/details/134367680",
+        "viewCount": 7639,
+        "commentCount": 17,
+        "collectCount": 18,
+        "diggCount": 17,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-11-12 23:59:38",
+        "editUrl": "https://editor.csdn.net/md?articleId=134367680"
+    },
+    {
+        "title": "node实战——koa给邮件发送验证码并缓存到redis服务（node后端储备知识）",
+        "url": "https://yma16.blog.csdn.net/article/details/134277390",
+        "viewCount": 9363,
+        "commentCount": 22,
+        "collectCount": 18,
+        "diggCount": 19,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-11-07 23:54:15",
+        "editUrl": "https://editor.csdn.net/md?articleId=134277390"
+    },
+    {
+        "title": "relectron框架——打包前端vue3、react为pc端exe可执行程序",
+        "url": "https://yma16.blog.csdn.net/article/details/134210786",
+        "viewCount": 8325,
+        "commentCount": 14,
+        "collectCount": 22,
+        "diggCount": 13,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-11-03 23:11:07",
+        "editUrl": "https://editor.csdn.net/md?articleId=134210786"
+    },
+    {
+        "title": "node实战——后端koa结合jwt连接mysql实现权限登录（node后端就业储备知识）",
+        "url": "https://yma16.blog.csdn.net/article/details/134090053",
+        "viewCount": 12164,
+        "commentCount": 11,
+        "collectCount": 9,
+        "diggCount": 15,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-10-28 14:37:05",
+        "editUrl": "https://editor.csdn.net/md?articleId=134090053"
+    },
+    {
+        "title": "node实战——搭建带swagger接口文档的后端koa项目（node后端就业储备知识）",
+        "url": "https://yma16.blog.csdn.net/article/details/134046367",
+        "viewCount": 10724,
+        "commentCount": 5,
+        "collectCount": 5,
+        "diggCount": 9,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-10-26 00:34:45",
+        "editUrl": "https://editor.csdn.net/md?articleId=134046367"
+    },
+    {
+        "title": "让大模型分析csdn文章质量 —— 提取csdn博客评论在文心一言分析评论区内容",
+        "url": "https://yma16.blog.csdn.net/article/details/134022655",
+        "viewCount": 11803,
+        "commentCount": 30,
+        "collectCount": 28,
+        "diggCount": 32,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-10-24 23:59:16",
+        "editUrl": "https://editor.csdn.net/md?articleId=134022655"
+    },
+    {
+        "title": "vue3 + fastapi 实现选择目录所有文件自定义上传到服务器",
+        "url": "https://yma16.blog.csdn.net/article/details/133955447",
+        "viewCount": 13067,
+        "commentCount": 23,
+        "collectCount": 32,
+        "diggCount": 25,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-10-21 14:13:54",
+        "editUrl": "https://editor.csdn.net/md?articleId=133955447"
+    },
+    {
+        "title": "前端 vite+vue3——写一个随机抽奖组件",
+        "url": "https://yma16.blog.csdn.net/article/details/133758004",
+        "viewCount": 18727,
+        "commentCount": 15,
+        "collectCount": 67,
+        "diggCount": 23,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-10-11 01:10:35",
+        "editUrl": "https://editor.csdn.net/md?articleId=133758004"
+    },
+    {
+        "title": "前端 富文本编辑器原理——从javascript、html、css开始入门",
+        "url": "https://yma16.blog.csdn.net/article/details/133579239",
+        "viewCount": 27043,
+        "commentCount": 6,
+        "collectCount": 84,
+        "diggCount": 24,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-10-05 18:17:30",
+        "editUrl": "https://editor.csdn.net/md?articleId=133579239"
+    },
+    {
+        "title": "华为云云耀云服务器L实例评测｜centos7.9 配置python虚拟环境 运行django",
+        "url": "https://yma16.blog.csdn.net/article/details/133238305",
+        "viewCount": 27079,
+        "commentCount": 4,
+        "collectCount": 7,
+        "diggCount": 7,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-09-24 17:56:24",
+        "editUrl": "https://editor.csdn.net/md?articleId=133238305"
+    },
+    {
+        "title": "华为云云耀云服务器L实例评测｜centos7.9配置java环境变量安装tomcat 部署war和jar",
+        "url": "https://yma16.blog.csdn.net/article/details/133228687",
+        "viewCount": 27004,
+        "commentCount": 7,
+        "collectCount": 6,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-09-24 12:30:00",
+        "editUrl": "https://editor.csdn.net/md?articleId=133228687"
+    },
+    {
+        "title": "前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏",
+        "url": "https://yma16.blog.csdn.net/article/details/133222458",
+        "viewCount": 26245,
+        "commentCount": 6,
+        "collectCount": 5,
+        "diggCount": 6,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-09-24 02:50:01",
+        "editUrl": "https://editor.csdn.net/md?articleId=133222458"
+    },
+    {
+        "title": "华为云云耀云服务器L实例评测｜centos7.9在线使用cloudShell下载rpm解压包安装mysql并开启远程访问",
+        "url": "https://yma16.blog.csdn.net/article/details/132956148",
+        "viewCount": 27291,
+        "commentCount": 9,
+        "collectCount": 11,
+        "diggCount": 10,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-09-18 01:05:15",
+        "editUrl": "https://editor.csdn.net/md?articleId=132956148"
+    },
+    {
+        "title": "前端vue3分享——项目封装axios、vite使用env环境变量",
+        "url": "https://yma16.blog.csdn.net/article/details/132922133",
+        "viewCount": 29850,
+        "commentCount": 9,
+        "collectCount": 12,
+        "diggCount": 13,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-09-16 20:37:01",
+        "editUrl": "https://editor.csdn.net/md?articleId=132922133"
+    },
+    {
+        "title": "华为云云耀云服务器L实例评测｜初始化centos镜像到安装nginx部署前端vue、react项目",
+        "url": "https://yma16.blog.csdn.net/article/details/132867324",
+        "viewCount": 28985,
+        "commentCount": 11,
+        "collectCount": 10,
+        "diggCount": 9,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-09-14 01:31:59",
+        "editUrl": "https://editor.csdn.net/md?articleId=132867324"
+    },
+    {
+        "title": "react-grapesjs——开源代码学习与修改（初出茅庐）",
+        "url": "https://yma16.blog.csdn.net/article/details/132702829",
+        "viewCount": 28876,
+        "commentCount": 8,
+        "collectCount": 5,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-09-06 01:34:33",
+        "editUrl": "https://editor.csdn.net/md?articleId=132702829"
+    },
+    {
+        "title": "前端vue2、vue3去掉url路由“ # ”号——nginx配置",
+        "url": "https://yma16.blog.csdn.net/article/details/132520250",
+        "viewCount": 33239,
+        "commentCount": 3,
+        "collectCount": 18,
+        "diggCount": 3,
+        "message": "文章质量良好",
+        "score": 88,
+        "postTime": "2023-08-27 10:13:14",
+        "editUrl": "https://editor.csdn.net/md?articleId=132520250"
+    },
+    {
+        "title": "vue3、react组件数据传值对比分析——父组件传递子组件，子组件传递父组件",
+        "url": "https://yma16.blog.csdn.net/article/details/132398128",
+        "viewCount": 29610,
+        "commentCount": 5,
+        "collectCount": 8,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-08-21 00:44:59",
+        "editUrl": "https://editor.csdn.net/md?articleId=132398128"
+    },
+    {
+        "title": "react搭建在线编辑html的站点——引入grapes实现在线拖拉拽编辑html",
+        "url": "https://yma16.blog.csdn.net/article/details/132136836",
+        "viewCount": 29909,
+        "commentCount": 15,
+        "collectCount": 8,
+        "diggCount": 9,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-08-06 23:23:11",
+        "editUrl": "https://editor.csdn.net/md?articleId=132136836"
+    },
+    {
+        "title": "node笔记——调用免费qq的smtp发送html格式邮箱",
+        "url": "https://yma16.blog.csdn.net/article/details/132136139",
+        "viewCount": 29218,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 1,
+        "message": "文章质量良好",
+        "score": 89,
+        "postTime": "2023-08-06 22:14:31",
+        "editUrl": "https://editor.csdn.net/md?articleId=132136139"
+    },
+    {
+        "title": "OAuth机制_web站点接入微软azure账号进行三方登录",
+        "url": "https://yma16.blog.csdn.net/article/details/131948371",
+        "viewCount": 207304,
+        "commentCount": 23,
+        "collectCount": 19,
+        "diggCount": 16,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-07-30 18:20:22",
+        "editUrl": "https://editor.csdn.net/md?articleId=131948371"
+    },
+    {
+        "title": "selenuim&echarts——可视化分析csdn新星赛道选手展示头像、展示ip城市和断言参赛信息的有效性（进阶篇）",
+        "url": "https://yma16.blog.csdn.net/article/details/131871415",
+        "viewCount": 30176,
+        "commentCount": 12,
+        "collectCount": 6,
+        "diggCount": 9,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-07-22 19:59:28",
+        "editUrl": "https://editor.csdn.net/md?articleId=131871415"
+    },
+    {
+        "title": "csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板",
+        "url": "https://yma16.blog.csdn.net/article/details/131778530",
+        "viewCount": 58556,
+        "commentCount": 9,
+        "collectCount": 14,
+        "diggCount": 11,
+        "message": "文章质量良好",
+        "score": 88,
+        "postTime": "2023-07-18 07:16:48",
+        "editUrl": "https://editor.csdn.net/md?articleId=131778530"
+    },
+    {
+        "title": "前端笔记_OAuth规则机制下实现个人站点接入qq三方登录",
+        "url": "https://yma16.blog.csdn.net/article/details/131750832",
+        "viewCount": 42535,
+        "commentCount": 36,
+        "collectCount": 77,
+        "diggCount": 40,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-07-16 16:31:09",
+        "editUrl": "https://editor.csdn.net/md?articleId=131750832"
+    },
+    {
+        "title": "python爬虫_requests获取小黄人表情保存到文件夹",
+        "url": "https://yma16.blog.csdn.net/article/details/131690031",
+        "viewCount": 29615,
+        "commentCount": 8,
+        "collectCount": 5,
+        "diggCount": 4,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-07-12 22:31:30",
+        "editUrl": "https://editor.csdn.net/md?articleId=131690031"
+    },
+    {
+        "title": "python爬虫_selenuim登录个人markdown博客站点",
+        "url": "https://yma16.blog.csdn.net/article/details/131649561",
+        "viewCount": 31242,
+        "commentCount": 16,
+        "collectCount": 8,
+        "diggCount": 10,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-07-11 00:41:22",
+        "editUrl": "https://editor.csdn.net/md?articleId=131649561"
+    },
+    {
+        "title": "python爬虫_requests获取bilibili锻刀村系列的字幕并用分词划分可视化词云图展示",
+        "url": "https://yma16.blog.csdn.net/article/details/131586067",
+        "viewCount": 29640,
+        "commentCount": 8,
+        "collectCount": 5,
+        "diggCount": 6,
+        "message": "文章质量良好",
+        "score": 87,
+        "postTime": "2023-07-07 01:24:32",
+        "editUrl": "https://editor.csdn.net/md?articleId=131586067"
+    },
+    {
+        "title": "python爬虫_正则表达式获取天气预报并用echarts折线图显示",
+        "url": "https://yma16.blog.csdn.net/article/details/131544250",
+        "viewCount": 29848,
+        "commentCount": 17,
+        "collectCount": 13,
+        "diggCount": 14,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-07-04 23:55:21",
+        "editUrl": "https://editor.csdn.net/md?articleId=131544250"
+    },
+    {
+        "title": "python爬虫_django+vue+echarts可视化查询所有CSDN用户质量分",
+        "url": "https://yma16.blog.csdn.net/article/details/131467905",
+        "viewCount": 33505,
+        "commentCount": 24,
+        "collectCount": 21,
+        "diggCount": 20,
+        "message": "文章质量良好",
+        "score": 93,
+        "postTime": "2023-06-30 07:30:00",
+        "editUrl": "https://editor.csdn.net/md?articleId=131467905"
+    },
+    {
+        "title": "python爬虫—selenium获取csdn质量分并用echarts可视化分析",
+        "url": "https://yma16.blog.csdn.net/article/details/131427987",
+        "viewCount": 32615,
+        "commentCount": 28,
+        "collectCount": 23,
+        "diggCount": 22,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-06-28 02:44:16",
+        "editUrl": "https://editor.csdn.net/md?articleId=131427987"
+    },
+    {
+        "title": "python爬虫_requests入门指引",
+        "url": "https://yma16.blog.csdn.net/article/details/131407234",
+        "viewCount": 29956,
+        "commentCount": 14,
+        "collectCount": 12,
+        "diggCount": 12,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-06-27 00:19:33",
+        "editUrl": "https://editor.csdn.net/md?articleId=131407234"
+    },
+    {
+        "title": "python爬虫_函数的使用",
+        "url": "https://yma16.blog.csdn.net/article/details/131350469",
+        "viewCount": 30213,
+        "commentCount": 30,
+        "collectCount": 13,
+        "diggCount": 18,
+        "message": "文章质量良好",
+        "score": 82,
+        "postTime": "2023-06-23 15:45:21",
+        "editUrl": "https://editor.csdn.net/md?articleId=131350469"
+    },
+    {
+        "title": "python爬虫_python基础数据类型",
+        "url": "https://yma16.blog.csdn.net/article/details/131347244",
+        "viewCount": 30191,
+        "commentCount": 21,
+        "collectCount": 14,
+        "diggCount": 15,
+        "message": "文章质量良好",
+        "score": 88,
+        "postTime": "2023-06-23 09:27:45",
+        "editUrl": "https://editor.csdn.net/md?articleId=131347244"
+    },
+    {
+        "title": "html_css模拟端午赛龙舟运动",
+        "url": "https://yma16.blog.csdn.net/article/details/131343544",
+        "viewCount": 31540,
+        "commentCount": 6,
+        "collectCount": 10,
+        "diggCount": 11,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-06-22 19:48:21",
+        "editUrl": "https://editor.csdn.net/md?articleId=131343544"
+    },
+    {
+        "title": "微信小程序_把chatgpt聊天数据复制到剪切板",
+        "url": "https://yma16.blog.csdn.net/article/details/129891852",
+        "viewCount": 33799,
+        "commentCount": 30,
+        "collectCount": 22,
+        "diggCount": 24,
+        "message": "文章质量良好",
+        "score": 85,
+        "postTime": "2023-04-01 02:48:49",
+        "editUrl": "https://editor.csdn.net/md?articleId=129891852"
+    },
+    {
+        "title": "【腾讯云 Cloud studio 实战训练营】搭建Next框架博客——抛开电脑性能在云端编程(沉浸式体验)",
+        "url": "https://yma16.blog.csdn.net/article/details/132010645",
+        "viewCount": 205003,
+        "commentCount": 9,
+        "collectCount": 5,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-07-31 00:56:55",
+        "editUrl": "https://editor.csdn.net/md?articleId=132010645"
+    },
+    {
+        "title": "原生html—摆脱ps、excel 在线绘制财务表格加水印（html绘制表格js加水印）",
+        "url": "https://yma16.blog.csdn.net/article/details/131971194",
+        "viewCount": 29746,
+        "commentCount": 9,
+        "collectCount": 6,
+        "diggCount": 7,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-07-28 00:53:26",
+        "editUrl": "https://editor.csdn.net/md?articleId=131971194"
+    },
+    {
+        "title": "python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示",
+        "url": "https://yma16.blog.csdn.net/article/details/131756726",
+        "viewCount": 30158,
+        "commentCount": 8,
+        "collectCount": 8,
+        "diggCount": 6,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-07-16 23:59:23",
+        "editUrl": "https://editor.csdn.net/md?articleId=131756726"
+    },
+    {
+        "title": "next.js博客搭建_react-markdown渲染内容（第三步）",
+        "url": "https://yma16.blog.csdn.net/article/details/131335154",
+        "viewCount": 30247,
+        "commentCount": 14,
+        "collectCount": 8,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-06-22 02:16:53",
+        "editUrl": "https://editor.csdn.net/md?articleId=131335154"
+    },
+    {
+        "title": "node笔记_读取目录的文件",
+        "url": "https://yma16.blog.csdn.net/article/details/131316417",
+        "viewCount": 29286,
+        "commentCount": 8,
+        "collectCount": 4,
+        "diggCount": 6,
+        "message": "文章质量良好",
+        "score": 82,
+        "postTime": "2023-06-20 23:42:32",
+        "editUrl": "https://editor.csdn.net/md?articleId=131316417"
+    },
+    {
+        "title": "vue2_markdown的内容目录生成",
+        "url": "https://yma16.blog.csdn.net/article/details/131278758",
+        "viewCount": 29706,
+        "commentCount": 28,
+        "collectCount": 20,
+        "diggCount": 16,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-06-19 01:45:10",
+        "editUrl": "https://editor.csdn.net/md?articleId=131278758"
+    },
+    {
+        "title": "node笔记_读写excel",
+        "url": "https://yma16.blog.csdn.net/article/details/131255680",
+        "viewCount": 32297,
+        "commentCount": 13,
+        "collectCount": 8,
+        "diggCount": 10,
+        "message": "文章质量良好",
+        "score": 84,
+        "postTime": "2023-06-17 13:43:13",
+        "editUrl": "https://editor.csdn.net/md?articleId=131255680"
+    },
+    {
+        "title": "vue2、vue3分别配置echarts多图表的同步缩放",
+        "url": "https://yma16.blog.csdn.net/article/details/131238089",
+        "viewCount": 31798,
+        "commentCount": 21,
+        "collectCount": 16,
+        "diggCount": 13,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-06-16 00:51:26",
+        "editUrl": "https://editor.csdn.net/md?articleId=131238089"
+    },
+    {
+        "title": "node笔记_生成自定义目录文件",
+        "url": "https://yma16.blog.csdn.net/article/details/131030287",
+        "viewCount": 29641,
+        "commentCount": 0,
+        "collectCount": 1,
+        "diggCount": 2,
+        "message": "文章质量良好",
+        "score": 86,
+        "postTime": "2023-06-04 13:20:13",
+        "editUrl": "https://editor.csdn.net/md?articleId=131030287"
+    },
+    {
+        "title": "6.1——我在CSDN的创作纪念日",
+        "url": "https://yma16.blog.csdn.net/article/details/130997388",
+        "viewCount": 29388,
+        "commentCount": 5,
+        "collectCount": 2,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 89,
+        "postTime": "2023-06-01 23:50:04",
+        "editUrl": "https://editor.csdn.net/md?articleId=130997388"
+    },
+    {
+        "title": "next.js博客搭建_六一卡通风格的登录注册（第二步）",
+        "url": "https://yma16.blog.csdn.net/article/details/130936156",
+        "viewCount": 29154,
+        "commentCount": 4,
+        "collectCount": 1,
+        "diggCount": 3,
+        "message": "文章质量良好",
+        "score": 85,
+        "postTime": "2023-06-01 01:31:38",
+        "editUrl": "https://editor.csdn.net/md?articleId=130936156"
+    },
+    {
+        "title": "互联网中的web3.0和gpt有何联系?",
+        "url": "https://yma16.blog.csdn.net/article/details/130957765",
+        "viewCount": 30337,
+        "commentCount": 0,
+        "collectCount": 4,
+        "diggCount": 6,
+        "message": "文章质量良好",
+        "score": 92,
+        "postTime": "2023-05-30 22:32:45",
+        "editUrl": "https://editor.csdn.net/md?articleId=130957765"
+    },
+    {
+        "title": "node笔记_koa框架的路由",
+        "url": "https://yma16.blog.csdn.net/article/details/130737052",
+        "viewCount": 29443,
+        "commentCount": 8,
+        "collectCount": 4,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 87,
+        "postTime": "2023-05-18 00:49:45",
+        "editUrl": "https://editor.csdn.net/md?articleId=130737052"
+    },
+    {
+        "title": "node笔记_koa框架是什么？",
+        "url": "https://yma16.blog.csdn.net/article/details/130715454",
+        "viewCount": 30087,
+        "commentCount": 26,
+        "collectCount": 17,
+        "diggCount": 21,
+        "message": "文章质量良好",
+        "score": 91,
+        "postTime": "2023-05-17 00:19:00",
+        "editUrl": "https://editor.csdn.net/md?articleId=130715454"
+    },
+    {
+        "title": "node笔记_express结合formidable实现前后端的文件上传",
+        "url": "https://yma16.blog.csdn.net/article/details/130672968",
+        "viewCount": 30015,
+        "commentCount": 31,
+        "collectCount": 19,
+        "diggCount": 20,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-05-14 23:56:40",
+        "editUrl": "https://editor.csdn.net/md?articleId=130672968"
+    },
+    {
+        "title": "node笔记_连接mysql编写js脚本的crud",
+        "url": "https://yma16.blog.csdn.net/article/details/130611818",
+        "viewCount": 30140,
+        "commentCount": 29,
+        "collectCount": 21,
+        "diggCount": 20,
+        "message": "文章质量良好",
+        "score": 85,
+        "postTime": "2023-05-11 02:15:11",
+        "editUrl": "https://editor.csdn.net/md?articleId=130611818"
+    },
+    {
+        "title": "node笔记_写文件（异步写入，同步写入，追加写入，流式写入）",
+        "url": "https://yma16.blog.csdn.net/article/details/130545899",
+        "viewCount": 30884,
+        "commentCount": 24,
+        "collectCount": 14,
+        "diggCount": 19,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-05-07 19:01:52",
+        "editUrl": "https://editor.csdn.net/md?articleId=130545899"
+    },
+    {
+        "title": "node笔记_读文件（异步读取、流式读取）",
+        "url": "https://yma16.blog.csdn.net/article/details/130545110",
+        "viewCount": 29695,
+        "commentCount": 0,
+        "collectCount": 1,
+        "diggCount": 2,
+        "message": "文章质量良好",
+        "score": 89,
+        "postTime": "2023-05-07 18:15:02",
+        "editUrl": "https://editor.csdn.net/md?articleId=130545110"
+    },
+    {
+        "title": "next.js博客搭建_初始化next项目（第一步）",
+        "url": "https://yma16.blog.csdn.net/article/details/130467441",
+        "viewCount": 30172,
+        "commentCount": 4,
+        "collectCount": 6,
+        "diggCount": 9,
+        "message": "文章质量良好",
+        "score": 82,
+        "postTime": "2023-05-03 15:05:34",
+        "editUrl": "https://editor.csdn.net/md?articleId=130467441"
+    },
+    {
+        "title": "node笔记_http服务搭建（渲染html、json）",
+        "url": "https://yma16.blog.csdn.net/article/details/130450397",
+        "viewCount": 30291,
+        "commentCount": 6,
+        "collectCount": 8,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-04-30 19:22:26",
+        "editUrl": "https://editor.csdn.net/md?articleId=130450397"
+    },
+    {
+        "title": "node笔记_安装nvm管理node版本",
+        "url": "https://yma16.blog.csdn.net/article/details/130445328",
+        "viewCount": 29670,
+        "commentCount": 0,
+        "collectCount": 1,
+        "diggCount": 4,
+        "message": "文章质量良好",
+        "score": 80,
+        "postTime": "2023-04-30 01:42:52",
+        "editUrl": "https://editor.csdn.net/md?articleId=130445328"
+    },
+    {
+        "title": "微信小程序_原生ui撸一个侧边栏的伸缩菜单",
+        "url": "https://yma16.blog.csdn.net/article/details/130312107",
+        "viewCount": 29224,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 4,
+        "message": "文章质量良好",
+        "score": 87,
+        "postTime": "2023-04-22 23:26:15",
+        "editUrl": "https://editor.csdn.net/md?articleId=130312107"
+    },
+    {
+        "title": "微信小程序_简易js代码编辑器设计实现",
+        "url": "https://yma16.blog.csdn.net/article/details/130311632",
+        "viewCount": 28966,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 1,
+        "message": "文章质量良好",
+        "score": 82,
+        "postTime": "2023-04-22 22:39:10",
+        "editUrl": "https://editor.csdn.net/md?articleId=130311632"
+    },
+    {
+        "title": "微信小程序_搜索图片功能实现",
+        "url": "https://yma16.blog.csdn.net/article/details/130188931",
+        "viewCount": 29416,
+        "commentCount": 2,
+        "collectCount": 1,
+        "diggCount": 5,
+        "message": "文章质量良好",
+        "score": 82,
+        "postTime": "2023-04-16 22:16:41",
+        "editUrl": "https://editor.csdn.net/md?articleId=130188931"
+    },
+    {
+        "title": "微信小程序_获取openid联动django实现",
+        "url": "https://yma16.blog.csdn.net/article/details/130161570",
+        "viewCount": 29086,
+        "commentCount": 2,
+        "collectCount": 1,
+        "diggCount": 4,
+        "message": "文章质量分 77, 还有改进空间",
+        "score": 77,
+        "postTime": "2023-04-14 22:15:36",
+        "editUrl": "https://editor.csdn.net/md?articleId=130161570"
+    },
+    {
+        "title": "微信小程序_自定义markdown的图片二维码添加识别功能",
+        "url": "https://yma16.blog.csdn.net/article/details/130041654",
+        "viewCount": 29054,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 3,
+        "message": "文章质量分 73, 还有改进空间",
+        "score": 73,
+        "postTime": "2023-04-09 15:06:56",
+        "editUrl": "https://editor.csdn.net/md?articleId=130041654"
+    },
+    {
+        "title": "微信小程序_实现markdown支持代码复制功能",
+        "url": "https://yma16.blog.csdn.net/article/details/130029118",
+        "viewCount": 30123,
+        "commentCount": 7,
+        "collectCount": 6,
+        "diggCount": 10,
+        "message": "文章质量分 78, 还有改进空间",
+        "score": 78,
+        "postTime": "2023-04-08 17:21:41",
+        "editUrl": "https://editor.csdn.net/md?articleId=130029118"
+    },
+    {
+        "title": "微信小程序_组件的引入、传值",
+        "url": "https://yma16.blog.csdn.net/article/details/129845226",
+        "viewCount": 29054,
+        "commentCount": 2,
+        "collectCount": 0,
+        "diggCount": 3,
+        "message": "文章质量分 79, 还有改进空间",
+        "score": 79,
+        "postTime": "2023-03-29 22:19:28",
+        "editUrl": "https://editor.csdn.net/md?articleId=129845226"
+    },
+    {
+        "title": "vue3_ts setup语法糖做一个登录注册",
+        "url": "https://yma16.blog.csdn.net/article/details/129785369",
+        "viewCount": 31134,
+        "commentCount": 0,
+        "collectCount": 5,
+        "diggCount": 2,
+        "message": "文章质量良好",
+        "score": 89,
+        "postTime": "2023-03-26 22:09:08",
+        "editUrl": "https://editor.csdn.net/md?articleId=129785369"
+    },
+    {
+        "title": "vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别？",
+        "url": "https://yma16.blog.csdn.net/article/details/129773471",
+        "viewCount": 30997,
+        "commentCount": 1,
+        "collectCount": 0,
+        "diggCount": 2,
+        "message": "文章质量良好",
+        "score": 81,
+        "postTime": "2023-03-25 23:32:14",
+        "editUrl": "https://editor.csdn.net/md?articleId=129773471"
+    },
+    {
+        "title": "vue2_mix混入的用法",
+        "url": "https://yma16.blog.csdn.net/article/details/129772955",
+        "viewCount": 29720,
+        "commentCount": 0,
+        "collectCount": 2,
+        "diggCount": 1,
+        "message": "文章质量良好",
+        "score": 88,
+        "postTime": "2023-03-25 22:13:33",
+        "editUrl": "https://editor.csdn.net/md?articleId=129772955"
+    },
+    {
+        "title": "canvas_html_制作三行情书的弹幕",
+        "url": "https://yma16.blog.csdn.net/article/details/129658839",
+        "viewCount": 28984,
+        "commentCount": 1,
+        "collectCount": 1,
+        "diggCount": 1,
+        "message": "文章质量良好",
+        "score": 89,
+        "postTime": "2023-03-19 23:50:15",
+        "editUrl": "https://editor.csdn.net/md?articleId=129658839"
+    },
+    {
+        "title": "vue2中$set的原理_它对object属性做了啥?",
+        "url": "https://yma16.blog.csdn.net/article/details/129654105",
+        "viewCount": 29453,
+        "commentCount": 0,
+        "collectCount": 3,
+        "diggCount": 1,
+        "message": "文章质量良好",
+        "score": 81,
+        "postTime": "2023-03-19 21:43:05",
+        "editUrl": "https://editor.csdn.net/md?articleId=129654105"
+    },
+    {
+        "title": "vue自定义指令_按钮权限设计（从0创建项目开始设计）",
+        "url": "https://yma16.blog.csdn.net/article/details/129629265",
+        "viewCount": 29230,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 0,
+        "message": "文章质量良好",
+        "score": 85,
+        "postTime": "2023-03-17 23:37:09",
+        "editUrl": "https://editor.csdn.net/md?articleId=129629265"
+    },
+    {
+        "title": "认识vite_vue3 初始化项目到打包",
+        "url": "https://yma16.blog.csdn.net/article/details/129460437",
+        "viewCount": 29334,
+        "commentCount": 0,
+        "collectCount": 1,
+        "diggCount": 0,
+        "message": "文章质量良好",
+        "score": 93,
+        "postTime": "2023-03-11 11:44:49",
+        "editUrl": "https://editor.csdn.net/md?articleId=129460437"
+    },
+    {
+        "title": "微信小程序_自定义头像和昵称",
+        "url": "https://yma16.blog.csdn.net/article/details/129108857",
+        "viewCount": 29179,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 1,
+        "message": "文章质量良好",
+        "score": 85,
+        "postTime": "2023-02-19 11:52:25",
+        "editUrl": "https://editor.csdn.net/md?articleId=129108857"
+    },
+    {
+        "title": "spring+mybatis_编写一个简单的增删改查接口",
+        "url": "https://yma16.blog.csdn.net/article/details/129106699",
+        "viewCount": 28931,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 0,
+        "message": "文章质量良好",
+        "score": 87,
+        "postTime": "2023-02-19 01:05:18",
+        "editUrl": "https://editor.csdn.net/md?articleId=129106699"
+    },
+    {
+        "title": "前后端配置动态的数据字段标签（django_vue）",
+        "url": "https://yma16.blog.csdn.net/article/details/129036251",
+        "viewCount": 29209,
+        "commentCount": 0,
+        "collectCount": 1,
+        "diggCount": 0,
+        "message": "文章质量良好",
+        "score": 86,
+        "postTime": "2023-02-15 02:10:11",
+        "editUrl": "https://editor.csdn.net/md?articleId=129036251"
+    },
+    {
+        "title": "微信小程序_调用openAi搭建虚拟伙伴聊天",
+        "url": "https://yma16.blog.csdn.net/article/details/128990718",
+        "viewCount": 34318,
+        "commentCount": 2,
+        "collectCount": 26,
+        "diggCount": 6,
+        "message": "文章质量良好",
+        "score": 81,
+        "postTime": "2023-02-12 00:22:05",
+        "editUrl": "https://editor.csdn.net/md?articleId=128990718"
+    }
+]
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index c9bc790ba5215179961b6adf8e4b3534a14363e4..273d3f9dc2ec01fbdb2ba46a127fc0d264f407af 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -9,8 +9,8 @@ body {
   background-image: linear-gradient(to bottom,
       rgba(0, 0, 0, 0.6),
       rgba(0, 0, 0, 0.8)), url("./img/previewFix.jpg");
-  background-size: cover;
-  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  /* background-repeat: no-repeat; */
   color: #fff;
 }
 .ant-radio-wrapper{
diff --git a/src/components/visual/article/index.vue b/src/components/visual/article/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..115eb44b1cfb63a7da9a366f29b946490296c9bc
--- /dev/null
+++ b/src/components/visual/article/index.vue
@@ -0,0 +1,169 @@
+<template>
+    <div id="barChartId" style="width:100vw;height:300px;margin: 0 auto"></div>
+</template>
+<script setup>
+    import * as echarts from 'echarts';
+import { defineProps, reactive, watch, nextTick, onUnmounted } from 'vue';
+const props = defineProps({
+    tableData: []
+})
+
+const state = reactive({
+    exportLoading: false,
+    dataSource: [],
+    echartInstance: undefined
+})
+watch(() => props.tableData,
+    (val) => {
+        state.dataSource = val
+        nextTick(() => {
+            renderEchartBar()
+        })
+    }, {
+    deep: true,
+    immediate: true
+})
+function renderEchartBar() {
+    // 基于准备好的dom，初始化echarts实例
+    const domInstance=document.getElementById('barChartId')
+    if(domInstance){
+        domInstance.removeAttribute('_echarts_instance_')
+    }
+    else{
+        return 
+    }
+    const myChart = echarts.init(domInstance);
+    const option = {
+        title: {
+            text: 'csdn 质量分柱状图 点击跳转到对应的文章',
+                        textStyle:{
+                color:'#ffffff'
+            }
+        },
+        toolbox: {
+            show: true,
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        dataZoom: [
+            {
+                id: 'dataZoomX',
+                type: 'slider',
+                xAxisIndex: [0],
+                filterMode: 'filter'
+            }
+        ],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        legend: {
+            
+        },
+        xAxis: {
+            type: 'category',
+            data: state.dataSource.map(item => item.postTime),
+                       axisLabel:{
+                color:'#ffffff'
+            }
+        },
+        yAxis: {
+            type: 'value',
+                       axisLabel:{
+                color:'#ffffff'
+            }
+        },
+        grid: {
+            x: 60,
+            x2: 100
+        },
+        tooltip: {
+            formatter: function (params) {
+                let findItem = state.dataSource.find(item => {
+                    return item.postTime == params.name
+                })
+                if (!findItem) {
+
+                    return ''
+                }
+                return `<span style='color:blue'>-<span> 博客标题：${findItem.title}  <br>
+                <span style='color:green'>-<span> 博客质量：${params.value} <br>
+                <span style='color:red'>-<span> 博客建议：${findItem.message}<br>
+                <span style='color:blue'>-<span> 博客地址：${findItem.url}<br>
+                <span style='color:blue'>-<span> 发文时间：${params.name}<br>
+               `
+            },
+        },
+        series: [
+            {
+                data: state.dataSource.map(item => item.score),
+                type: 'bar',
+                showBackground: true,
+                backgroundStyle: {
+                    color: 'rgba(180, 180, 180, 0.2)'
+                },
+                label: { //柱体上显示数值
+                    show: true,//开启显示
+                    position: 'center',//在上方显示
+                    textStyle: {//数值样式
+                        fontSize: '2px',
+                        color: 'blue'
+                    }
+                },
+                markPoint: {
+                    data: [
+                        { type: 'max', name: '最高分' },
+                        { type: 'min', name: '最低分' }
+                    ]
+                },
+                markLine: {
+                    itemStyle: {
+                        normal: {
+                            lineStyle:
+                            {
+                                type: 'dotted',
+                            },
+                            label:
+                            {
+                                show: true,
+                                position: 'middle',
+                                color: 'red',
+                                lineHeight: 35,
+                                backgroundColor: 'rgba(255,255,255.7)',
+                                formatter: (params) => {
+                                    return params.name + ":" + params.value
+                                }
+                            }
+                        }
+                    },
+                    data: [
+                        {
+                            type: 'average',
+                            name: '平均分'
+                        }]
+                }
+            }
+        ]
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option, true);
+    // 监听
+    state.echartInstance = myChart;
+    myChart.on('click', function (params) {
+        const findItem = state.dataSource.find(item => {
+            return item.postTime == params.name
+        })
+        if (params.name) {
+            window.open(findItem.url, '_blank')
+        }
+    });
+    window.onresize = myChart.resize;
+}
+
+onUnmounted(() => {
+    window.onresize = null
+})
+</script>
\ No newline at end of file
diff --git a/src/components/visual/data/data.js b/src/components/visual/data/data.js
new file mode 100644
index 0000000000000000000000000000000000000000..5d8afe2511efb7cfa0f8ea62fe6376dba5fefa2e
--- /dev/null
+++ b/src/components/visual/data/data.js
@@ -0,0 +1,962 @@
+export const articleData=[
+    {
+        "title": "uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)",
+        "url": "https://yma16.blog.csdn.net/article/details/135174869",
+        "viewCount": 1734,
+        "commentCount": 15,
+        "collectCount": 34,
+        "diggCount": 39,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-12-25 01:58:48",
+        "editUrl": "https://editor.csdn.net/md?articleId=135174869"
+    },
+    {
+        "title": "uniapp框架——初始化vue3项目(搭建ai项目第一步)",
+        "url": "https://yma16.blog.csdn.net/article/details/134906708",
+        "viewCount": 8291,
+        "commentCount": 32,
+        "collectCount": 20,
+        "diggCount": 22,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-12-10 20:13:26",
+        "editUrl": "https://editor.csdn.net/md?articleId=134906708"
+    },
+    {
+        "title": "前端vue3——实现二次元人物拼图校验",
+        "url": "https://yma16.blog.csdn.net/article/details/134895099",
+        "viewCount": 2612,
+        "commentCount": 10,
+        "collectCount": 9,
+        "diggCount": 13,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-12-09 22:24:19",
+        "editUrl": "https://editor.csdn.net/md?articleId=134895099"
+    },
+    {
+        "title": "前端——html拖拽原理",
+        "url": "https://yma16.blog.csdn.net/article/details/134794991",
+        "viewCount": 5513,
+        "commentCount": 6,
+        "collectCount": 7,
+        "diggCount": 5,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-12-05 01:36:46",
+        "editUrl": "https://editor.csdn.net/md?articleId=134794991"
+    },
+    {
+        "title": "前端vue3——html2canvas给网站截图生成宣传海报",
+        "url": "https://yma16.blog.csdn.net/article/details/134620137",
+        "viewCount": 5532,
+        "commentCount": 11,
+        "collectCount": 9,
+        "diggCount": 10,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-11-26 01:58:47",
+        "editUrl": "https://editor.csdn.net/md?articleId=134620137"
+    },
+    {
+        "title": "node实战——koa实现文件上传",
+        "url": "https://yma16.blog.csdn.net/article/details/134497664",
+        "viewCount": 4502,
+        "commentCount": 11,
+        "collectCount": 9,
+        "diggCount": 11,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-11-20 00:02:48",
+        "editUrl": "https://editor.csdn.net/md?articleId=134497664"
+    },
+    {
+        "title": "node实战——koa实现文件下载和图片/pdf/视频预览（node后端储备知识）",
+        "url": "https://yma16.blog.csdn.net/article/details/134367680",
+        "viewCount": 7639,
+        "commentCount": 17,
+        "collectCount": 18,
+        "diggCount": 17,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-11-12 23:59:38",
+        "editUrl": "https://editor.csdn.net/md?articleId=134367680"
+    },
+    {
+        "title": "node实战——koa给邮件发送验证码并缓存到redis服务（node后端储备知识）",
+        "url": "https://yma16.blog.csdn.net/article/details/134277390",
+        "viewCount": 9363,
+        "commentCount": 22,
+        "collectCount": 18,
+        "diggCount": 19,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-11-07 23:54:15",
+        "editUrl": "https://editor.csdn.net/md?articleId=134277390"
+    },
+    {
+        "title": "relectron框架——打包前端vue3、react为pc端exe可执行程序",
+        "url": "https://yma16.blog.csdn.net/article/details/134210786",
+        "viewCount": 8325,
+        "commentCount": 14,
+        "collectCount": 22,
+        "diggCount": 13,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-11-03 23:11:07",
+        "editUrl": "https://editor.csdn.net/md?articleId=134210786"
+    },
+    {
+        "title": "node实战——后端koa结合jwt连接mysql实现权限登录（node后端就业储备知识）",
+        "url": "https://yma16.blog.csdn.net/article/details/134090053",
+        "viewCount": 12164,
+        "commentCount": 11,
+        "collectCount": 9,
+        "diggCount": 15,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-10-28 14:37:05",
+        "editUrl": "https://editor.csdn.net/md?articleId=134090053"
+    },
+    {
+        "title": "node实战——搭建带swagger接口文档的后端koa项目（node后端就业储备知识）",
+        "url": "https://yma16.blog.csdn.net/article/details/134046367",
+        "viewCount": 10724,
+        "commentCount": 5,
+        "collectCount": 5,
+        "diggCount": 9,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-10-26 00:34:45",
+        "editUrl": "https://editor.csdn.net/md?articleId=134046367"
+    },
+    {
+        "title": "让大模型分析csdn文章质量 —— 提取csdn博客评论在文心一言分析评论区内容",
+        "url": "https://yma16.blog.csdn.net/article/details/134022655",
+        "viewCount": 11803,
+        "commentCount": 30,
+        "collectCount": 28,
+        "diggCount": 32,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-10-24 23:59:16",
+        "editUrl": "https://editor.csdn.net/md?articleId=134022655"
+    },
+    {
+        "title": "vue3 + fastapi 实现选择目录所有文件自定义上传到服务器",
+        "url": "https://yma16.blog.csdn.net/article/details/133955447",
+        "viewCount": 13067,
+        "commentCount": 23,
+        "collectCount": 32,
+        "diggCount": 25,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-10-21 14:13:54",
+        "editUrl": "https://editor.csdn.net/md?articleId=133955447"
+    },
+    {
+        "title": "前端 vite+vue3——写一个随机抽奖组件",
+        "url": "https://yma16.blog.csdn.net/article/details/133758004",
+        "viewCount": 18727,
+        "commentCount": 15,
+        "collectCount": 67,
+        "diggCount": 23,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-10-11 01:10:35",
+        "editUrl": "https://editor.csdn.net/md?articleId=133758004"
+    },
+    {
+        "title": "前端 富文本编辑器原理——从javascript、html、css开始入门",
+        "url": "https://yma16.blog.csdn.net/article/details/133579239",
+        "viewCount": 27043,
+        "commentCount": 6,
+        "collectCount": 84,
+        "diggCount": 24,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-10-05 18:17:30",
+        "editUrl": "https://editor.csdn.net/md?articleId=133579239"
+    },
+    {
+        "title": "华为云云耀云服务器L实例评测｜centos7.9 配置python虚拟环境 运行django",
+        "url": "https://yma16.blog.csdn.net/article/details/133238305",
+        "viewCount": 27079,
+        "commentCount": 4,
+        "collectCount": 7,
+        "diggCount": 7,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-09-24 17:56:24",
+        "editUrl": "https://editor.csdn.net/md?articleId=133238305"
+    },
+    {
+        "title": "华为云云耀云服务器L实例评测｜centos7.9配置java环境变量安装tomcat 部署war和jar",
+        "url": "https://yma16.blog.csdn.net/article/details/133228687",
+        "viewCount": 27004,
+        "commentCount": 7,
+        "collectCount": 6,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-09-24 12:30:00",
+        "editUrl": "https://editor.csdn.net/md?articleId=133228687"
+    },
+    {
+        "title": "前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏",
+        "url": "https://yma16.blog.csdn.net/article/details/133222458",
+        "viewCount": 26245,
+        "commentCount": 6,
+        "collectCount": 5,
+        "diggCount": 6,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-09-24 02:50:01",
+        "editUrl": "https://editor.csdn.net/md?articleId=133222458"
+    },
+    {
+        "title": "华为云云耀云服务器L实例评测｜centos7.9在线使用cloudShell下载rpm解压包安装mysql并开启远程访问",
+        "url": "https://yma16.blog.csdn.net/article/details/132956148",
+        "viewCount": 27291,
+        "commentCount": 9,
+        "collectCount": 11,
+        "diggCount": 10,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-09-18 01:05:15",
+        "editUrl": "https://editor.csdn.net/md?articleId=132956148"
+    },
+    {
+        "title": "前端vue3分享——项目封装axios、vite使用env环境变量",
+        "url": "https://yma16.blog.csdn.net/article/details/132922133",
+        "viewCount": 29850,
+        "commentCount": 9,
+        "collectCount": 12,
+        "diggCount": 13,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-09-16 20:37:01",
+        "editUrl": "https://editor.csdn.net/md?articleId=132922133"
+    },
+    {
+        "title": "华为云云耀云服务器L实例评测｜初始化centos镜像到安装nginx部署前端vue、react项目",
+        "url": "https://yma16.blog.csdn.net/article/details/132867324",
+        "viewCount": 28985,
+        "commentCount": 11,
+        "collectCount": 10,
+        "diggCount": 9,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-09-14 01:31:59",
+        "editUrl": "https://editor.csdn.net/md?articleId=132867324"
+    },
+    {
+        "title": "react-grapesjs——开源代码学习与修改（初出茅庐）",
+        "url": "https://yma16.blog.csdn.net/article/details/132702829",
+        "viewCount": 28876,
+        "commentCount": 8,
+        "collectCount": 5,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-09-06 01:34:33",
+        "editUrl": "https://editor.csdn.net/md?articleId=132702829"
+    },
+    {
+        "title": "前端vue2、vue3去掉url路由“ # ”号——nginx配置",
+        "url": "https://yma16.blog.csdn.net/article/details/132520250",
+        "viewCount": 33239,
+        "commentCount": 3,
+        "collectCount": 18,
+        "diggCount": 3,
+        "message": "文章质量良好",
+        "score": 88,
+        "postTime": "2023-08-27 10:13:14",
+        "editUrl": "https://editor.csdn.net/md?articleId=132520250"
+    },
+    {
+        "title": "vue3、react组件数据传值对比分析——父组件传递子组件，子组件传递父组件",
+        "url": "https://yma16.blog.csdn.net/article/details/132398128",
+        "viewCount": 29610,
+        "commentCount": 5,
+        "collectCount": 8,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-08-21 00:44:59",
+        "editUrl": "https://editor.csdn.net/md?articleId=132398128"
+    },
+    {
+        "title": "react搭建在线编辑html的站点——引入grapes实现在线拖拉拽编辑html",
+        "url": "https://yma16.blog.csdn.net/article/details/132136836",
+        "viewCount": 29909,
+        "commentCount": 15,
+        "collectCount": 8,
+        "diggCount": 9,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-08-06 23:23:11",
+        "editUrl": "https://editor.csdn.net/md?articleId=132136836"
+    },
+    {
+        "title": "node笔记——调用免费qq的smtp发送html格式邮箱",
+        "url": "https://yma16.blog.csdn.net/article/details/132136139",
+        "viewCount": 29218,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 1,
+        "message": "文章质量良好",
+        "score": 89,
+        "postTime": "2023-08-06 22:14:31",
+        "editUrl": "https://editor.csdn.net/md?articleId=132136139"
+    },
+    {
+        "title": "OAuth机制_web站点接入微软azure账号进行三方登录",
+        "url": "https://yma16.blog.csdn.net/article/details/131948371",
+        "viewCount": 207304,
+        "commentCount": 23,
+        "collectCount": 19,
+        "diggCount": 16,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-07-30 18:20:22",
+        "editUrl": "https://editor.csdn.net/md?articleId=131948371"
+    },
+    {
+        "title": "selenuim&echarts——可视化分析csdn新星赛道选手展示头像、展示ip城市和断言参赛信息的有效性（进阶篇）",
+        "url": "https://yma16.blog.csdn.net/article/details/131871415",
+        "viewCount": 30176,
+        "commentCount": 12,
+        "collectCount": 6,
+        "diggCount": 9,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-07-22 19:59:28",
+        "editUrl": "https://editor.csdn.net/md?articleId=131871415"
+    },
+    {
+        "title": "csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板",
+        "url": "https://yma16.blog.csdn.net/article/details/131778530",
+        "viewCount": 58556,
+        "commentCount": 9,
+        "collectCount": 14,
+        "diggCount": 11,
+        "message": "文章质量良好",
+        "score": 88,
+        "postTime": "2023-07-18 07:16:48",
+        "editUrl": "https://editor.csdn.net/md?articleId=131778530"
+    },
+    {
+        "title": "前端笔记_OAuth规则机制下实现个人站点接入qq三方登录",
+        "url": "https://yma16.blog.csdn.net/article/details/131750832",
+        "viewCount": 42535,
+        "commentCount": 36,
+        "collectCount": 77,
+        "diggCount": 40,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-07-16 16:31:09",
+        "editUrl": "https://editor.csdn.net/md?articleId=131750832"
+    },
+    {
+        "title": "python爬虫_requests获取小黄人表情保存到文件夹",
+        "url": "https://yma16.blog.csdn.net/article/details/131690031",
+        "viewCount": 29615,
+        "commentCount": 8,
+        "collectCount": 5,
+        "diggCount": 4,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-07-12 22:31:30",
+        "editUrl": "https://editor.csdn.net/md?articleId=131690031"
+    },
+    {
+        "title": "python爬虫_selenuim登录个人markdown博客站点",
+        "url": "https://yma16.blog.csdn.net/article/details/131649561",
+        "viewCount": 31242,
+        "commentCount": 16,
+        "collectCount": 8,
+        "diggCount": 10,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-07-11 00:41:22",
+        "editUrl": "https://editor.csdn.net/md?articleId=131649561"
+    },
+    {
+        "title": "python爬虫_requests获取bilibili锻刀村系列的字幕并用分词划分可视化词云图展示",
+        "url": "https://yma16.blog.csdn.net/article/details/131586067",
+        "viewCount": 29640,
+        "commentCount": 8,
+        "collectCount": 5,
+        "diggCount": 6,
+        "message": "文章质量良好",
+        "score": 87,
+        "postTime": "2023-07-07 01:24:32",
+        "editUrl": "https://editor.csdn.net/md?articleId=131586067"
+    },
+    {
+        "title": "python爬虫_正则表达式获取天气预报并用echarts折线图显示",
+        "url": "https://yma16.blog.csdn.net/article/details/131544250",
+        "viewCount": 29848,
+        "commentCount": 17,
+        "collectCount": 13,
+        "diggCount": 14,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-07-04 23:55:21",
+        "editUrl": "https://editor.csdn.net/md?articleId=131544250"
+    },
+    {
+        "title": "python爬虫_django+vue+echarts可视化查询所有CSDN用户质量分",
+        "url": "https://yma16.blog.csdn.net/article/details/131467905",
+        "viewCount": 33505,
+        "commentCount": 24,
+        "collectCount": 21,
+        "diggCount": 20,
+        "message": "文章质量良好",
+        "score": 93,
+        "postTime": "2023-06-30 07:30:00",
+        "editUrl": "https://editor.csdn.net/md?articleId=131467905"
+    },
+    {
+        "title": "python爬虫—selenium获取csdn质量分并用echarts可视化分析",
+        "url": "https://yma16.blog.csdn.net/article/details/131427987",
+        "viewCount": 32615,
+        "commentCount": 28,
+        "collectCount": 23,
+        "diggCount": 22,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-06-28 02:44:16",
+        "editUrl": "https://editor.csdn.net/md?articleId=131427987"
+    },
+    {
+        "title": "python爬虫_requests入门指引",
+        "url": "https://yma16.blog.csdn.net/article/details/131407234",
+        "viewCount": 29956,
+        "commentCount": 14,
+        "collectCount": 12,
+        "diggCount": 12,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-06-27 00:19:33",
+        "editUrl": "https://editor.csdn.net/md?articleId=131407234"
+    },
+    {
+        "title": "python爬虫_函数的使用",
+        "url": "https://yma16.blog.csdn.net/article/details/131350469",
+        "viewCount": 30213,
+        "commentCount": 30,
+        "collectCount": 13,
+        "diggCount": 18,
+        "message": "文章质量良好",
+        "score": 82,
+        "postTime": "2023-06-23 15:45:21",
+        "editUrl": "https://editor.csdn.net/md?articleId=131350469"
+    },
+    {
+        "title": "python爬虫_python基础数据类型",
+        "url": "https://yma16.blog.csdn.net/article/details/131347244",
+        "viewCount": 30191,
+        "commentCount": 21,
+        "collectCount": 14,
+        "diggCount": 15,
+        "message": "文章质量良好",
+        "score": 88,
+        "postTime": "2023-06-23 09:27:45",
+        "editUrl": "https://editor.csdn.net/md?articleId=131347244"
+    },
+    {
+        "title": "html_css模拟端午赛龙舟运动",
+        "url": "https://yma16.blog.csdn.net/article/details/131343544",
+        "viewCount": 31540,
+        "commentCount": 6,
+        "collectCount": 10,
+        "diggCount": 11,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-06-22 19:48:21",
+        "editUrl": "https://editor.csdn.net/md?articleId=131343544"
+    },
+    {
+        "title": "微信小程序_把chatgpt聊天数据复制到剪切板",
+        "url": "https://yma16.blog.csdn.net/article/details/129891852",
+        "viewCount": 33799,
+        "commentCount": 30,
+        "collectCount": 22,
+        "diggCount": 24,
+        "message": "文章质量良好",
+        "score": 85,
+        "postTime": "2023-04-01 02:48:49",
+        "editUrl": "https://editor.csdn.net/md?articleId=129891852"
+    },
+    {
+        "title": "【腾讯云 Cloud studio 实战训练营】搭建Next框架博客——抛开电脑性能在云端编程(沉浸式体验)",
+        "url": "https://yma16.blog.csdn.net/article/details/132010645",
+        "viewCount": 205003,
+        "commentCount": 9,
+        "collectCount": 5,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-07-31 00:56:55",
+        "editUrl": "https://editor.csdn.net/md?articleId=132010645"
+    },
+    {
+        "title": "原生html—摆脱ps、excel 在线绘制财务表格加水印（html绘制表格js加水印）",
+        "url": "https://yma16.blog.csdn.net/article/details/131971194",
+        "viewCount": 29746,
+        "commentCount": 9,
+        "collectCount": 6,
+        "diggCount": 7,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-07-28 00:53:26",
+        "editUrl": "https://editor.csdn.net/md?articleId=131971194"
+    },
+    {
+        "title": "python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示",
+        "url": "https://yma16.blog.csdn.net/article/details/131756726",
+        "viewCount": 30158,
+        "commentCount": 8,
+        "collectCount": 8,
+        "diggCount": 6,
+        "message": "文章质量良好",
+        "score": 97,
+        "postTime": "2023-07-16 23:59:23",
+        "editUrl": "https://editor.csdn.net/md?articleId=131756726"
+    },
+    {
+        "title": "next.js博客搭建_react-markdown渲染内容（第三步）",
+        "url": "https://yma16.blog.csdn.net/article/details/131335154",
+        "viewCount": 30247,
+        "commentCount": 14,
+        "collectCount": 8,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-06-22 02:16:53",
+        "editUrl": "https://editor.csdn.net/md?articleId=131335154"
+    },
+    {
+        "title": "node笔记_读取目录的文件",
+        "url": "https://yma16.blog.csdn.net/article/details/131316417",
+        "viewCount": 29286,
+        "commentCount": 8,
+        "collectCount": 4,
+        "diggCount": 6,
+        "message": "文章质量良好",
+        "score": 82,
+        "postTime": "2023-06-20 23:42:32",
+        "editUrl": "https://editor.csdn.net/md?articleId=131316417"
+    },
+    {
+        "title": "vue2_markdown的内容目录生成",
+        "url": "https://yma16.blog.csdn.net/article/details/131278758",
+        "viewCount": 29706,
+        "commentCount": 28,
+        "collectCount": 20,
+        "diggCount": 16,
+        "message": "文章质量良好",
+        "score": 94,
+        "postTime": "2023-06-19 01:45:10",
+        "editUrl": "https://editor.csdn.net/md?articleId=131278758"
+    },
+    {
+        "title": "node笔记_读写excel",
+        "url": "https://yma16.blog.csdn.net/article/details/131255680",
+        "viewCount": 32297,
+        "commentCount": 13,
+        "collectCount": 8,
+        "diggCount": 10,
+        "message": "文章质量良好",
+        "score": 84,
+        "postTime": "2023-06-17 13:43:13",
+        "editUrl": "https://editor.csdn.net/md?articleId=131255680"
+    },
+    {
+        "title": "vue2、vue3分别配置echarts多图表的同步缩放",
+        "url": "https://yma16.blog.csdn.net/article/details/131238089",
+        "viewCount": 31798,
+        "commentCount": 21,
+        "collectCount": 16,
+        "diggCount": 13,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-06-16 00:51:26",
+        "editUrl": "https://editor.csdn.net/md?articleId=131238089"
+    },
+    {
+        "title": "node笔记_生成自定义目录文件",
+        "url": "https://yma16.blog.csdn.net/article/details/131030287",
+        "viewCount": 29641,
+        "commentCount": 0,
+        "collectCount": 1,
+        "diggCount": 2,
+        "message": "文章质量良好",
+        "score": 86,
+        "postTime": "2023-06-04 13:20:13",
+        "editUrl": "https://editor.csdn.net/md?articleId=131030287"
+    },
+    {
+        "title": "6.1——我在CSDN的创作纪念日",
+        "url": "https://yma16.blog.csdn.net/article/details/130997388",
+        "viewCount": 29388,
+        "commentCount": 5,
+        "collectCount": 2,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 89,
+        "postTime": "2023-06-01 23:50:04",
+        "editUrl": "https://editor.csdn.net/md?articleId=130997388"
+    },
+    {
+        "title": "next.js博客搭建_六一卡通风格的登录注册（第二步）",
+        "url": "https://yma16.blog.csdn.net/article/details/130936156",
+        "viewCount": 29154,
+        "commentCount": 4,
+        "collectCount": 1,
+        "diggCount": 3,
+        "message": "文章质量良好",
+        "score": 85,
+        "postTime": "2023-06-01 01:31:38",
+        "editUrl": "https://editor.csdn.net/md?articleId=130936156"
+    },
+    {
+        "title": "互联网中的web3.0和gpt有何联系?",
+        "url": "https://yma16.blog.csdn.net/article/details/130957765",
+        "viewCount": 30337,
+        "commentCount": 0,
+        "collectCount": 4,
+        "diggCount": 6,
+        "message": "文章质量良好",
+        "score": 92,
+        "postTime": "2023-05-30 22:32:45",
+        "editUrl": "https://editor.csdn.net/md?articleId=130957765"
+    },
+    {
+        "title": "node笔记_koa框架的路由",
+        "url": "https://yma16.blog.csdn.net/article/details/130737052",
+        "viewCount": 29443,
+        "commentCount": 8,
+        "collectCount": 4,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 87,
+        "postTime": "2023-05-18 00:49:45",
+        "editUrl": "https://editor.csdn.net/md?articleId=130737052"
+    },
+    {
+        "title": "node笔记_koa框架是什么？",
+        "url": "https://yma16.blog.csdn.net/article/details/130715454",
+        "viewCount": 30087,
+        "commentCount": 26,
+        "collectCount": 17,
+        "diggCount": 21,
+        "message": "文章质量良好",
+        "score": 91,
+        "postTime": "2023-05-17 00:19:00",
+        "editUrl": "https://editor.csdn.net/md?articleId=130715454"
+    },
+    {
+        "title": "node笔记_express结合formidable实现前后端的文件上传",
+        "url": "https://yma16.blog.csdn.net/article/details/130672968",
+        "viewCount": 30015,
+        "commentCount": 31,
+        "collectCount": 19,
+        "diggCount": 20,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-05-14 23:56:40",
+        "editUrl": "https://editor.csdn.net/md?articleId=130672968"
+    },
+    {
+        "title": "node笔记_连接mysql编写js脚本的crud",
+        "url": "https://yma16.blog.csdn.net/article/details/130611818",
+        "viewCount": 30140,
+        "commentCount": 29,
+        "collectCount": 21,
+        "diggCount": 20,
+        "message": "文章质量良好",
+        "score": 85,
+        "postTime": "2023-05-11 02:15:11",
+        "editUrl": "https://editor.csdn.net/md?articleId=130611818"
+    },
+    {
+        "title": "node笔记_写文件（异步写入，同步写入，追加写入，流式写入）",
+        "url": "https://yma16.blog.csdn.net/article/details/130545899",
+        "viewCount": 30884,
+        "commentCount": 24,
+        "collectCount": 14,
+        "diggCount": 19,
+        "message": "文章质量良好",
+        "score": 95,
+        "postTime": "2023-05-07 19:01:52",
+        "editUrl": "https://editor.csdn.net/md?articleId=130545899"
+    },
+    {
+        "title": "node笔记_读文件（异步读取、流式读取）",
+        "url": "https://yma16.blog.csdn.net/article/details/130545110",
+        "viewCount": 29695,
+        "commentCount": 0,
+        "collectCount": 1,
+        "diggCount": 2,
+        "message": "文章质量良好",
+        "score": 89,
+        "postTime": "2023-05-07 18:15:02",
+        "editUrl": "https://editor.csdn.net/md?articleId=130545110"
+    },
+    {
+        "title": "next.js博客搭建_初始化next项目（第一步）",
+        "url": "https://yma16.blog.csdn.net/article/details/130467441",
+        "viewCount": 30172,
+        "commentCount": 4,
+        "collectCount": 6,
+        "diggCount": 9,
+        "message": "文章质量良好",
+        "score": 82,
+        "postTime": "2023-05-03 15:05:34",
+        "editUrl": "https://editor.csdn.net/md?articleId=130467441"
+    },
+    {
+        "title": "node笔记_http服务搭建（渲染html、json）",
+        "url": "https://yma16.blog.csdn.net/article/details/130450397",
+        "viewCount": 30291,
+        "commentCount": 6,
+        "collectCount": 8,
+        "diggCount": 8,
+        "message": "文章质量良好",
+        "score": 96,
+        "postTime": "2023-04-30 19:22:26",
+        "editUrl": "https://editor.csdn.net/md?articleId=130450397"
+    },
+    {
+        "title": "node笔记_安装nvm管理node版本",
+        "url": "https://yma16.blog.csdn.net/article/details/130445328",
+        "viewCount": 29670,
+        "commentCount": 0,
+        "collectCount": 1,
+        "diggCount": 4,
+        "message": "文章质量良好",
+        "score": 80,
+        "postTime": "2023-04-30 01:42:52",
+        "editUrl": "https://editor.csdn.net/md?articleId=130445328"
+    },
+    {
+        "title": "微信小程序_原生ui撸一个侧边栏的伸缩菜单",
+        "url": "https://yma16.blog.csdn.net/article/details/130312107",
+        "viewCount": 29224,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 4,
+        "message": "文章质量良好",
+        "score": 87,
+        "postTime": "2023-04-22 23:26:15",
+        "editUrl": "https://editor.csdn.net/md?articleId=130312107"
+    },
+    {
+        "title": "微信小程序_简易js代码编辑器设计实现",
+        "url": "https://yma16.blog.csdn.net/article/details/130311632",
+        "viewCount": 28966,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 1,
+        "message": "文章质量良好",
+        "score": 82,
+        "postTime": "2023-04-22 22:39:10",
+        "editUrl": "https://editor.csdn.net/md?articleId=130311632"
+    },
+    {
+        "title": "微信小程序_搜索图片功能实现",
+        "url": "https://yma16.blog.csdn.net/article/details/130188931",
+        "viewCount": 29416,
+        "commentCount": 2,
+        "collectCount": 1,
+        "diggCount": 5,
+        "message": "文章质量良好",
+        "score": 82,
+        "postTime": "2023-04-16 22:16:41",
+        "editUrl": "https://editor.csdn.net/md?articleId=130188931"
+    },
+    {
+        "title": "微信小程序_获取openid联动django实现",
+        "url": "https://yma16.blog.csdn.net/article/details/130161570",
+        "viewCount": 29086,
+        "commentCount": 2,
+        "collectCount": 1,
+        "diggCount": 4,
+        "message": "文章质量分 77, 还有改进空间",
+        "score": 77,
+        "postTime": "2023-04-14 22:15:36",
+        "editUrl": "https://editor.csdn.net/md?articleId=130161570"
+    },
+    {
+        "title": "微信小程序_自定义markdown的图片二维码添加识别功能",
+        "url": "https://yma16.blog.csdn.net/article/details/130041654",
+        "viewCount": 29054,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 3,
+        "message": "文章质量分 73, 还有改进空间",
+        "score": 73,
+        "postTime": "2023-04-09 15:06:56",
+        "editUrl": "https://editor.csdn.net/md?articleId=130041654"
+    },
+    {
+        "title": "微信小程序_实现markdown支持代码复制功能",
+        "url": "https://yma16.blog.csdn.net/article/details/130029118",
+        "viewCount": 30123,
+        "commentCount": 7,
+        "collectCount": 6,
+        "diggCount": 10,
+        "message": "文章质量分 78, 还有改进空间",
+        "score": 78,
+        "postTime": "2023-04-08 17:21:41",
+        "editUrl": "https://editor.csdn.net/md?articleId=130029118"
+    },
+    {
+        "title": "微信小程序_组件的引入、传值",
+        "url": "https://yma16.blog.csdn.net/article/details/129845226",
+        "viewCount": 29054,
+        "commentCount": 2,
+        "collectCount": 0,
+        "diggCount": 3,
+        "message": "文章质量分 79, 还有改进空间",
+        "score": 79,
+        "postTime": "2023-03-29 22:19:28",
+        "editUrl": "https://editor.csdn.net/md?articleId=129845226"
+    },
+    {
+        "title": "vue3_ts setup语法糖做一个登录注册",
+        "url": "https://yma16.blog.csdn.net/article/details/129785369",
+        "viewCount": 31134,
+        "commentCount": 0,
+        "collectCount": 5,
+        "diggCount": 2,
+        "message": "文章质量良好",
+        "score": 89,
+        "postTime": "2023-03-26 22:09:08",
+        "editUrl": "https://editor.csdn.net/md?articleId=129785369"
+    },
+    {
+        "title": "vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别？",
+        "url": "https://yma16.blog.csdn.net/article/details/129773471",
+        "viewCount": 30997,
+        "commentCount": 1,
+        "collectCount": 0,
+        "diggCount": 2,
+        "message": "文章质量良好",
+        "score": 81,
+        "postTime": "2023-03-25 23:32:14",
+        "editUrl": "https://editor.csdn.net/md?articleId=129773471"
+    },
+    {
+        "title": "vue2_mix混入的用法",
+        "url": "https://yma16.blog.csdn.net/article/details/129772955",
+        "viewCount": 29720,
+        "commentCount": 0,
+        "collectCount": 2,
+        "diggCount": 1,
+        "message": "文章质量良好",
+        "score": 88,
+        "postTime": "2023-03-25 22:13:33",
+        "editUrl": "https://editor.csdn.net/md?articleId=129772955"
+    },
+    {
+        "title": "canvas_html_制作三行情书的弹幕",
+        "url": "https://yma16.blog.csdn.net/article/details/129658839",
+        "viewCount": 28984,
+        "commentCount": 1,
+        "collectCount": 1,
+        "diggCount": 1,
+        "message": "文章质量良好",
+        "score": 89,
+        "postTime": "2023-03-19 23:50:15",
+        "editUrl": "https://editor.csdn.net/md?articleId=129658839"
+    },
+    {
+        "title": "vue2中$set的原理_它对object属性做了啥?",
+        "url": "https://yma16.blog.csdn.net/article/details/129654105",
+        "viewCount": 29453,
+        "commentCount": 0,
+        "collectCount": 3,
+        "diggCount": 1,
+        "message": "文章质量良好",
+        "score": 81,
+        "postTime": "2023-03-19 21:43:05",
+        "editUrl": "https://editor.csdn.net/md?articleId=129654105"
+    },
+    {
+        "title": "vue自定义指令_按钮权限设计（从0创建项目开始设计）",
+        "url": "https://yma16.blog.csdn.net/article/details/129629265",
+        "viewCount": 29230,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 0,
+        "message": "文章质量良好",
+        "score": 85,
+        "postTime": "2023-03-17 23:37:09",
+        "editUrl": "https://editor.csdn.net/md?articleId=129629265"
+    },
+    {
+        "title": "认识vite_vue3 初始化项目到打包",
+        "url": "https://yma16.blog.csdn.net/article/details/129460437",
+        "viewCount": 29334,
+        "commentCount": 0,
+        "collectCount": 1,
+        "diggCount": 0,
+        "message": "文章质量良好",
+        "score": 93,
+        "postTime": "2023-03-11 11:44:49",
+        "editUrl": "https://editor.csdn.net/md?articleId=129460437"
+    },
+    {
+        "title": "微信小程序_自定义头像和昵称",
+        "url": "https://yma16.blog.csdn.net/article/details/129108857",
+        "viewCount": 29179,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 1,
+        "message": "文章质量良好",
+        "score": 85,
+        "postTime": "2023-02-19 11:52:25",
+        "editUrl": "https://editor.csdn.net/md?articleId=129108857"
+    },
+    {
+        "title": "spring+mybatis_编写一个简单的增删改查接口",
+        "url": "https://yma16.blog.csdn.net/article/details/129106699",
+        "viewCount": 28931,
+        "commentCount": 0,
+        "collectCount": 0,
+        "diggCount": 0,
+        "message": "文章质量良好",
+        "score": 87,
+        "postTime": "2023-02-19 01:05:18",
+        "editUrl": "https://editor.csdn.net/md?articleId=129106699"
+    },
+    {
+        "title": "前后端配置动态的数据字段标签（django_vue）",
+        "url": "https://yma16.blog.csdn.net/article/details/129036251",
+        "viewCount": 29209,
+        "commentCount": 0,
+        "collectCount": 1,
+        "diggCount": 0,
+        "message": "文章质量良好",
+        "score": 86,
+        "postTime": "2023-02-15 02:10:11",
+        "editUrl": "https://editor.csdn.net/md?articleId=129036251"
+    },
+    {
+        "title": "微信小程序_调用openAi搭建虚拟伙伴聊天",
+        "url": "https://yma16.blog.csdn.net/article/details/128990718",
+        "viewCount": 34318,
+        "commentCount": 2,
+        "collectCount": 26,
+        "diggCount": 6,
+        "message": "文章质量良好",
+        "score": 81,
+        "postTime": "2023-02-12 00:22:05",
+        "editUrl": "https://editor.csdn.net/md?articleId=128990718"
+    }
+]
\ No newline at end of file
diff --git a/src/components/visual/hub/data.js b/src/components/visual/hub/data.js
new file mode 100644
index 0000000000000000000000000000000000000000..44d3cb761927c01fe25b85939c837b7dcaff9bd8
--- /dev/null
+++ b/src/components/visual/hub/data.js
@@ -0,0 +1,8 @@
+export const pieData= [
+        { value: 270, name: 'csdn博客' },
+        { value: 131, name: '掘金博客' },
+        { value: 60, name: '阿里云开发者社区' },
+        { value: 30, name: '华为云开发者社区' },
+        { value: 10, name: '腾讯云开发者社区' },
+        { value: 10, name: '51cto博客' },
+      ]
\ No newline at end of file
diff --git a/src/components/visual/hub/index.vue b/src/components/visual/hub/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..658cb6fcd63390623a03713df40f829d3f5b2e30
--- /dev/null
+++ b/src/components/visual/hub/index.vue
@@ -0,0 +1,93 @@
+<template>
+    <div id="pieChartId" style="width:800px;height:300px;margin: 0 auto"></div>
+</template>
+<script setup>
+    import * as echarts from 'echarts';
+import { defineProps, reactive, watch, nextTick, onUnmounted,onMounted } from 'vue';
+import {pieData} from './data.js'
+
+const state = reactive({
+    exportLoading: false,
+    echartInstance: undefined,
+    hubData:[],
+})
+
+function renderEchartLine() {
+    // 基于准备好的dom，初始化echarts实例
+    const domInstance=document.getElementById('pieChartId')
+    if(domInstance){
+        domInstance.removeAttribute('_echarts_instance_')
+    }
+    else{
+        return 
+    }
+    const myChart = echarts.init(domInstance);
+    const seriesItem= {
+      name: 'Access From',
+      type: 'pie',
+      radius: '50%',
+      data:state.hubData,
+      label:{
+        color:'#ffffff'
+      },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    }
+    const seriesData=[seriesItem]
+
+    const option = {
+        title: {
+            text: '社区文章数量占比',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        toolbox: {
+            show: true,
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        tooltip: {
+            trigger: 'axis',
+        },
+        xAxis: {
+            axisLabel:{
+                color:'#ffffff'
+            }
+        },
+        yAxis: {
+            axisLabel:{
+                color:'#ffffff'
+            }
+        },
+        grid: {
+            x: 60,
+            x2: 100
+        },
+        series: seriesData
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option, true);
+    // 监听
+    state.echartInstance = myChart;
+    window.onresize = myChart.resize;
+}
+
+onUnmounted(() => {
+    window.onresize = null
+})
+const getHubConfig= ()=>{
+     state.hubData=[...pieData]
+    renderEchartLine()
+}
+
+onMounted(()=>{
+    getHubConfig()
+})
+</script>
\ No newline at end of file
diff --git a/src/components/visual/index.vue b/src/components/visual/index.vue
index e2629674f53e44ed2b21221569ad7025b60848d5..d2917bac30a942069585fb4a80d2f65c54000b67 100644
--- a/src/components/visual/index.vue
+++ b/src/components/visual/index.vue
@@ -1,16 +1,30 @@
 <script setup>
-    import {reactive} from 'vue'
+    import {reactive,onMounted} from 'vue'
     import CommitLine from './commit/index.vue'
+    import ArticleBar from './article/index.vue'
+    import HubPie from './hub/index.vue'
+    import {articleData} from './data/data.js'
     const state=reactive({
-        title:''
+        title:'',
+        articleData:[]
+    })
+
+    const getRenderBarData= ()=>{
+        state.articleData=[...articleData]
+        state.articleData.sort((a,b)=>new Date(a.postTime)-new Date(b.postTime))
+    }
+    onMounted(()=>{
+        getRenderBarData()
     })
 </script>
 <template>
-    <div>
+    <div style="padding:20px;">
         <div>
             {{state.title}}
             <div>
                 <CommitLine />
+                <ArticleBar :tableData="state.articleData" />
+                <HubPie />
             </div>
         </div>
     </div>