[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-pMdPrVeH":3,"public-project-articles-pMdPrVeH":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},768,"pMdPrVeH",49,"02. 使用Vue3集成Element-Plus快速搭建一个管理系统的页面框架","## Elemen-Plus 简介\n\nElement-Plus 是一套前端 UI 框架，非常适合前端基础比较差的同学，可以通过它快速实现精美的页面样式\n\n官网：[https:\u002F\u002Felement-plus.org](https:\u002F\u002Felement-plus.org\u002F)\n\n国内镜像网站（访问速度快）：[https:\u002F\u002Fcn.element-plus.org\u002F](https:\u002F\u002Fcn.element-plus.org\u002F)\n\n## Vue3 集成 Element-Plus\n\n安装依赖\n\n```vue\nnpm i element-plus -S\n```\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1739497470731-ab62101f-b8bd-435f-9d49-3e2aad993e07.png)\n\nnode_modules \n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1739497511567-43aaa109-3db8-46a4-89e6-6a8b03db16ab.png)\n\n卸载 element-plus\n\n```vue\n npm uninstall element-plus\n```\n\n\n\n在 main.js 里面引入\n\n```vue\nimport ElementPlus from 'element-plus'\nimport 'element-plus\u002Fdist\u002Findex.css'\nimport zhCn from 'element-plus\u002Fes\u002Flocale\u002Flang\u002Fzh-cn'\n\napp.use(ElementPlus, {\n  locale: zhCn,\n})  \n```\n\n\n\n## 测试使用 Element-plus 组件\n\n使用官方的 按钮组件\n\n```vue\n\u003Cel-button>Default\u003C\u002Fel-button>\n\u003Cel-button type=\"primary\">青哥哥\u003C\u002Fel-button>\n\u003Cel-button type=\"success\">小武哥哥\u003C\u002Fel-button>\n\u003Cel-button type=\"info\">Info\u003C\u002Fel-button>\n\u003Cel-button type=\"warning\">Warning\u003C\u002Fel-button>\n\u003Cel-button type=\"danger\">Danger\u003C\u002Fel-button>\n```\n\nHome.vue 测试内容\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cel-button>Default\u003C\u002Fel-button>\n    \u003Cel-button type=\"primary\">青哥哥\u003C\u002Fel-button>\n    \u003Cel-button type=\"primary\">青哥哥\u003C\u002Fel-button>\n    \u003Cel-button type=\"primary\">青哥哥\u003C\u002Fel-button>\n    \u003Cel-button type=\"primary\">青哥哥\u003C\u002Fel-button>\n    \u003Cel-button type=\"success\">小武哥哥\u003C\u002Fel-button>\n    \u003Cel-button type=\"info\">Info\u003C\u002Fel-button>\n    \u003Cel-button type=\"info\">Info\u003C\u002Fel-button>\n    \u003Cel-button type=\"info\">Info\u003C\u002Fel-button>\n    \u003Cel-button type=\"info\">Info\u003C\u002Fel-button>\n    \u003Cel-button type=\"warning\">Warning\u003C\u002Fel-button>\n    \u003Cel-button type=\"danger\">Danger\u003C\u002Fel-button>\n\n\n    \u003Cdiv style=\"padding: 50px\">\n      \u003Cel-icon size=\"25\" color=\"green\">\u003CChatDotRound \u002F>\u003C\u002Fel-icon>\n      \u003Cel-button type=\"primary\" icon=\"Search\">按钮\u003C\u002Fel-button>\n\n      \u003Cel-input placeholder=\"placeholder\" :suffix-icon=\"Calendar\" :prefix-icon=\"Search\">\u003C\u002Fel-input>\n      \n\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport {Calendar, Search} from \"@element-plus\u002Ficons-vue\";\n\u003C\u002Fscript>\n\n\n```\n\n## 全局使用 icon\n\n安装依赖，注册所有图标\n\n```vue\nnpm install @element-plus\u002Ficons-vue\n```\n\n\u003Cscript setup>\n\n\n\u003C\u002Fscript>\n\n\n\n在 main.js 里引入\n\n```vue\nimport * as ElementPlusIconsVue from '@element-plus\u002Ficons-vue'\n\nfor (const [key, component] of Object.entries(ElementPlusIconsVue)) {\n  app.component(key, component)\n}\n```\n\n使用图标：el-icon、el-input、el-button\n\nel-input：当你在输入框组件里面使用图标，**你需要单独导入图标**\n\nel-icon、el-button：按钮或者图标组件里面，**不需要单独导入图标**\n\n## Element-Plus 主题色设置\n\n安装依赖  sass、unplugin-vue-components、unplugin-auto-import\n\n```vue\nnpm install -D sass unplugin-vue-components unplugin-auto-import\n```\n\n配置 index.scss 放在  src\u002Fassets\u002Fcss 目录下\n\n```css\n@forward \"element-plus\u002Ftheme-chalk\u002Fsrc\u002Fcommon\u002Fvar.scss\" with (\n  $colors: (\n    \"primary\": (\"base\": #2c82ff),\n    \"success\": (\"base\": #31bf00),\n    \"warning\": (\"base\": #ffad00),\n    \"danger\": (\"base\": #e52f2f),\n    \"info\": (\"base\": #8055ff),\n  )\n);\n```\n\n配置 vite.config.js\n\n```vue\nimport AutoImport from 'unplugin-auto-import\u002Fvite' \u002F\u002F 自动导入vue中的组件\nimport Components from 'unplugin-vue-components\u002Fvite' \u002F\u002F自动导入ui-组件 比如 element-plus等\nimport { ElementPlusResolver } from 'unplugin-vue-components\u002Fresolvers' \u002F\u002F 对应组件库引入 ，AntDesignVueResolver\n\nplugins: [\n  vue(),\n \u002F\u002Felement-plus按需导入\n  AutoImport({\n    resolvers: [ElementPlusResolver()],\n  }),\n  Components({\n    resolvers: [\n      \u002F\u002F 配置elementPlus采用sass样式配置系统\n      ElementPlusResolver({importStyle:\"sass\"})\n    ],\n  }),\n],  \ncss: {\n  preprocessorOptions: {\n    scss: {\n      additionalData: `@use \"@\u002Fassets\u002Fcss\u002Findex.scss\" as *;`,\n    },\n  },\n},\n```\n\n## 安装 element 插件\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1739498926389-bc0d19d5-a93f-4427-9320-29d1f96af159.png)\n\n## 搭建后台基本框架\n\n框架布局分析\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1739499371631-66e9f58a-5806-43ea-90c5-2f359157ddae.png)\n\n## 配置头部区域\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1739499640623-a1f26c34-e72c-4694-a006-31e7c1baf748.png)\n\n## 配置导航菜单\n\n菜单主体颜色：#3a456b\n\n高亮颜色：#537bee\n\n\n\n点击 menu 里面的某一项 跳转页面怎么做？\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728891026302-dc657419-8510-45cd-8ba7-8f9882aa2052.png)\n\n高亮显示当前展示的路由\n\n可以通过 **router.currentRoute.value.path** 获取当前展示的路由\n\n```vue\n:default-active=\"router.currentRoute.value.path\"\n```\n\n\n\n图片取色器\n\n[https:\u002F\u002Fwww.jyshare.com\u002Ffront-end\u002F6214\u002F#65ae8f](https:\u002F\u002Fwww.jyshare.com\u002Ffront-end\u002F6214\u002F#65ae8f)\n\n#e6ecf7\n\n## 主体区域\n\n配置一个 card 卡片样式\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728890394675-36b32b00-dd74-4bbd-9107-9079d036db88.png)\n\n```vue\n.card {\n    background-color: white;\n    padding: 10px;\n    border-radius: 5px;\n    box-shadow: 0 0 8px rgba(0, 0, 0, .12);\n}\n```\n\n\n\n## 本节课笔记内容\n\n### Manager.vue\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- 头部区域开始 -->\n    \u003Cdiv style=\"height: 60px; display: flex;\">\n      \u003Cdiv style=\"width: 240px; display: flex; align-items: center; padding-left: 20px; background-color: #3a456b\">\n        \u003Cimg style=\"width: 40px; height: 40px; border-radius: 50%\" src=\"@\u002Fassets\u002Fimgs\u002Flogo.png\" alt=\"\">\n        \u003Cspan style=\"font-size: 20px; font-weight: bold; color: #f1f1f1; margin-left: 5px\">小白做毕设2025\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"flex: 1; display: flex; align-items: center; padding-left: 20px; border-bottom: 1px solid #ddd\">\n        首页 \u002F 数据分析\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"width: fit-content; padding-right: 20px; display: flex; align-items: center; border-bottom: 1px solid #ddd\">\n        \u003Cel-dropdown>\n          \u003Cdiv style=\"display: flex; align-items: center\">\n            \u003Cimg style=\"width: 40px; height: 40px; border-radius: 50%\" src=\"https:\u002F\u002Fcube.elemecdn.com\u002F3\u002F7c\u002F3ea6beec64369c2642b92c6726f1epng.png\" alt=\"\">\n            \u003Cspan style=\"margin-left: 5px\">管理员\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n          \u003Ctemplate #dropdown>\n            \u003Cel-dropdown-menu>\n              \u003Cel-dropdown-item>个人信息\u003C\u002Fel-dropdown-item>\n              \u003Cel-dropdown-item>修改密码\u003C\u002Fel-dropdown-item>\n              \u003Cel-dropdown-item>退出登录\u003C\u002Fel-dropdown-item>\n            \u003C\u002Fel-dropdown-menu>\n          \u003C\u002Ftemplate>\n        \u003C\u002Fel-dropdown>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003C!--  头部区域结束 -->\n\n    \u003C!--  下方区域开始 -->\n    \u003Cdiv style=\"display: flex\">\n      \u003C!--  菜单区域开始 -->\n      \u003Cdiv style=\"width: 240px;\">\n        \u003Cel-menu router :default-openeds=\"['1']\" :default-active=\"router.currentRoute.value.path\" style=\"min-height: calc(100vh - 60px)\">\n          \u003Cel-menu-item index=\"\u002Fmanager\u002Fhome\">\n            \u003Cel-icon>\u003CHouse \u002F>\u003C\u002Fel-icon>\n            \u003Cspan>首页\u003C\u002Fspan>\n          \u003C\u002Fel-menu-item>\n          \u003Cel-sub-menu index=\"1\">\n            \u003Ctemplate #title>\n              \u003Cel-icon>\u003Clocation \u002F>\u003C\u002Fel-icon>\n              \u003Cspan>数据管理\u003C\u002Fspan>\n            \u003C\u002Ftemplate>\n            \u003Cel-menu-item index=\"\u002Fmanager\u002Fabout\">关于数据\u003C\u002Fel-menu-item>\n          \u003C\u002Fel-sub-menu>\n        \u003C\u002Fel-menu>\n      \u003C\u002Fdiv>\n      \u003C!--  菜单区域结束 -->\n\n      \u003C!--  数据渲染区域开始 -->\n      \u003Cdiv style=\"flex: 1; width: 0; padding: 10px; background-color: #f2f4ff\">\n        \u003CRouterView \u002F>\n      \u003C\u002Fdiv>\n      \u003C!--  数据渲染区域结束 -->\n\n    \u003C\u002Fdiv>\n    \u003C!--  下方区域结束 -->\n\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\n\nimport router from \"@\u002Frouter\u002Findex.js\";\n\u003C\u002Fscript>\n\n\u003Cstyle>\n.el-menu {\n  background-color: #3a456b;\n  border: none;\n}\n.el-sub-menu__title {\n  background-color: #3a456b;\n  color: #ddd;\n}\n.el-menu-item {\n  height: 50px;\n  color: #ddd;\n}\n.el-menu .is-active {\n  background-color: #537bee;\n  color: #fff;\n}\n.el-sub-menu__title:hover {\n  background-color: #3a456b;\n}\n.el-menu-item:not(.is-active):hover {\n  background-color: #7a9fff;\n  color: #333;\n}\n.el-dropdown {\n  cursor: pointer;\n}\n.el-tooltip__trigger {\n  outline: none;\n}\n.el-menu--inline .el-menu-item {\n  padding-left: 48px !important;\n}\n\u003C\u002Fstyle>\n```\n\n### Home.vue\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-input style=\"width: 260px; margin-right: 5px\" v-model=\"data.name\" placeholder=\"请输入名称查询\" :prefix-icon=\"Search\">\u003C\u002Fel-input>\n      \u003Cel-button type=\"primary\">查 询\u003C\u002Fel-button>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-button type=\"danger\">批量删除\u003C\u002Fel-button>\n      \u003Cel-button type=\"primary\">新 增\u003C\u002Fel-button>\n      \u003Cel-button type=\"success\">批量导入\u003C\u002Fel-button>\n      \u003Cel-button type=\"info\">批量导出\u003C\u002Fel-button>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-table :data=\"data.tableData\" style=\"width: 100%\" :header-cell-style=\"{ color: '#333', backgroundColor: '#eaf4ff' }\">\n        \u003Cel-table-column type=\"selection\" width=\"55\" \u002F>\n        \u003Cel-table-column prop=\"name\" label=\"名称\" width=\"180\" \u002F>\n        \u003Cel-table-column prop=\"phone\" label=\"电话\" \u002F>\n        \u003Cel-table-column prop=\"address\" label=\"地址\" width=\"180\" \u002F>\n      \u003C\u002Fel-table>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cel-pagination\n          v-model:current-page=\"data.pageNum\"\n          :page-size=\"data.pageSize\"\n          layout=\"total, prev, pager, next\"\n          :total=\"data.total\"\n      \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { reactive } from \"vue\";\nimport {Search} from \"@element-plus\u002Ficons-vue\";\n\nconst data = reactive({\n  name: null,\n  pageNum: 1,\n  pageSize: 5,\n  total: 6,\n  tableData: [\n    { name: '青哥哥', phone: '13877886677', address: '北京市朝阳区' },\n    { name: '小武哥哥', phone: '13988997788', address: '上海市徐汇区' },\n    { name: '小张', phone: '138776554466', address: '安徽省合肥市' },\n    { name: '小李', phone: '138799882566', address: '安徽省合肥市' },\n    { name: '小王', phone: '13987622566', address: '安徽省合肥市' },\n    { name: '小周', phone: '13487772266', address: '安徽省合肥市' },\n  ]\n})\n\u003C\u002Fscript>\n\n\n```\n\n### global.css\n\n```css\n:root {\n    --el-color-primary: green;\n}\n\n* {\n    box-sizing: border-box;\n}\n\nbody {\n    margin: 0;\n    padding: 0;\n    color: #333;\n    font-size: 14px;\n}\n\na {\n    text-decoration: none;\n}\n\n.card {\n    background-color: white;\n    padding: 10px;\n    border-radius: 5px;\n    box-shadow: 0 0 8px rgba(0, 0, 0, .12);\n}\n\n```\n\n","coding",1,15959,1514,"2025-02-14 11:25:07","2026-05-03 22:49:02","带小白做毕设2025系列课程","graduation-project-2025",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,28,35,36,43,50,57,64,71,78,85,92,99,106,113,120,127,134,141,148,155],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":27,"project_title":15,"project_slug":16},766,"XmlcAcY0","00. 带小白做毕设2025课程介绍",19012,1512,"2025-02-22 15:29:01","2026-05-07 15:33:28.189425+00",{"id":29,"uuid":30,"project_id":6,"title":31,"type":9,"status":10,"public_enabled":10,"views":32,"sort":33,"created_at":34,"updated_at":14,"project_title":15,"project_slug":16},767,"nmjXCdVH","01. 前端Vue3 框架的快速搭建以及项目工程的讲解",15797,1513,"2025-02-13 17:13:40",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":37,"uuid":38,"project_id":6,"title":39,"type":9,"status":10,"public_enabled":10,"views":40,"sort":41,"created_at":42,"updated_at":14,"project_title":15,"project_slug":16},771,"8PikYMQU","03. Springboot3框架的快速搭建以及项目工程的讲解",12768,1517,"2025-02-21 17:21:51",{"id":44,"uuid":45,"project_id":6,"title":46,"type":9,"status":10,"public_enabled":10,"views":47,"sort":48,"created_at":49,"updated_at":14,"project_title":15,"project_slug":16},772,"Q1TCG9Jj","04. Springboot3整合MyBatis实现数据库操作",11144,1518,"2025-03-07 15:50:30",{"id":51,"uuid":52,"project_id":6,"title":53,"type":9,"status":10,"public_enabled":10,"views":54,"sort":55,"created_at":56,"updated_at":14,"project_title":15,"project_slug":16},773,"De7YPnEc","05. Springboot3+vue3实现增删改查、分页查询、批量删除（上）",10827,1519,"2025-02-22 15:09:19",{"id":58,"uuid":59,"project_id":6,"title":60,"type":9,"status":10,"public_enabled":10,"views":61,"sort":62,"created_at":63,"updated_at":14,"project_title":15,"project_slug":16},774,"YKEHfsPd","06. Springboot3+vue3实现增删改查、分页查询、批量删除（下）",7760,1520,"2025-02-22 22:00:02",{"id":65,"uuid":66,"project_id":6,"title":67,"type":9,"status":10,"public_enabled":10,"views":68,"sort":69,"created_at":70,"updated_at":14,"project_title":15,"project_slug":16},775,"sNDKpWVJ","07. Springboot3+Vue3实现excel批量导入导出",6552,1521,"2025-02-23 10:49:24",{"id":72,"uuid":73,"project_id":6,"title":74,"type":9,"status":10,"public_enabled":10,"views":75,"sort":76,"created_at":77,"updated_at":14,"project_title":15,"project_slug":16},776,"1uMP9O6C","08. Springboot3+vue3实现登录注册功能",7964,1522,"2025-02-23 18:14:13",{"id":79,"uuid":80,"project_id":6,"title":81,"type":9,"status":10,"public_enabled":10,"views":82,"sort":83,"created_at":84,"updated_at":14,"project_title":15,"project_slug":16},777,"WahvQp1v","09. Springboot3+vue3实现JWT登录鉴权",7151,1523,"2025-02-23 21:58:00",{"id":86,"uuid":87,"project_id":6,"title":88,"type":9,"status":10,"public_enabled":10,"views":89,"sort":90,"created_at":91,"updated_at":14,"project_title":15,"project_slug":16},778,"QFFAqZh1","10. Springboot3+vue3实现文件上传和下载",6171,1524,"2025-02-24 14:16:27",{"id":93,"uuid":94,"project_id":6,"title":95,"type":9,"status":10,"public_enabled":10,"views":96,"sort":97,"created_at":98,"updated_at":14,"project_title":15,"project_slug":16},1278,"S2eL2g5L","11. Springboot3+vue3实现个人中心、修改密码",5945,1525,"2025-02-24 18:10:59",{"id":100,"uuid":101,"project_id":6,"title":102,"type":9,"status":10,"public_enabled":10,"views":103,"sort":104,"created_at":105,"updated_at":14,"project_title":15,"project_slug":16},1279,"LkN8Mmsn","12. Springboot3+Vue3实现系统公告功能",4967,1526,"2025-02-25 11:50:13",{"id":107,"uuid":108,"project_id":6,"title":109,"type":9,"status":10,"public_enabled":10,"views":110,"sort":111,"created_at":112,"updated_at":14,"project_title":15,"project_slug":16},1280,"i7wziuEN","13. Springboot3+Vue3实现角色权限控制",4446,1527,"2025-02-25 11:51:38",{"id":114,"uuid":115,"project_id":6,"title":116,"type":9,"status":10,"public_enabled":10,"views":117,"sort":118,"created_at":119,"updated_at":14,"project_title":15,"project_slug":16},1281,"pGwiTCRn","14. Springboot3+Vue3实现富文本编辑器功能",4578,1528,"2025-02-26 16:04:58",{"id":121,"uuid":122,"project_id":6,"title":123,"type":9,"status":10,"public_enabled":10,"views":124,"sort":125,"created_at":126,"updated_at":14,"project_title":15,"project_slug":16},1282,"tZ8iDql5","15. Springboot3+Vue3实现模块之间的关联",4454,1529,"2025-02-26 18:28:55",{"id":128,"uuid":129,"project_id":6,"title":130,"type":9,"status":10,"public_enabled":10,"views":131,"sort":132,"created_at":133,"updated_at":14,"project_title":15,"project_slug":16},1283,"gb01JPC2","16. Springboot3+Vue3实现echarts数据统计",4307,1530,"2025-03-03 16:58:21",{"id":135,"uuid":136,"project_id":6,"title":137,"type":9,"status":10,"public_enabled":10,"views":138,"sort":139,"created_at":140,"updated_at":14,"project_title":15,"project_slug":16},1284,"59bDkSFf","17. Springboot3+Vue3实现提交审核业务功能",3793,1531,"2025-03-04 11:58:16",{"id":142,"uuid":143,"project_id":6,"title":144,"type":9,"status":10,"public_enabled":10,"views":145,"sort":146,"created_at":147,"updated_at":14,"project_title":15,"project_slug":16},1285,"gApyb58X","18. Springboot3+Vue3实现预约审核业务功能",3332,1532,"2025-03-05 20:07:24",{"id":149,"uuid":150,"project_id":6,"title":151,"type":9,"status":10,"public_enabled":10,"views":152,"sort":153,"created_at":154,"updated_at":14,"project_title":15,"project_slug":16},1286,"XfpY5re0","19. Springboot3+Vue3实现前台首页的设计",3508,1533,"2025-03-05 20:08:12",{"id":156,"uuid":157,"project_id":6,"title":158,"type":9,"status":10,"public_enabled":10,"views":159,"sort":160,"created_at":161,"updated_at":14,"project_title":15,"project_slug":16},1287,"BnSPRBOc","20. Springboot3+Vue3实现前台轮播图和详情页的设计",4062,1534,"2025-03-17 17:13:36"]