{"remainingRequest":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/views/communtiy/Article.vue?vue&type=script&lang=js","dependencies":[{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/views/communtiy/Article.vue","mtime":1743941101859},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/cache-loader/dist/cjs.js","mtime":1743264595665},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/babel-loader/lib/index.js","mtime":1743264596348},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/cache-loader/dist/cjs.js","mtime":1743264595665},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js","mtime":1743264596512}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CmltcG9ydCBUYWdTZWxlY3QgZnJvbSAiLi4vLi4vY29tcG9uZW50cy9UYWdTZWxlY3QiOwppbXBvcnQgU3RhbmRhcmRGb3JtUm93IGZyb20gIi4uLy4uL2NvbXBvbmVudHMvU3RhbmRhcmRGb3JtUm93IjsKaW1wb3J0IEFydGljbGVMaXN0Q29udGVudCBmcm9tICIuLi8uLi9jb21wb25lbnRzL0FydGljbGVMaXN0Q29udGVudCI7CmltcG9ydCBJY29uVGV4dCBmcm9tICIuL2NvbXBvbmVudHMvSWNvblRleHQiOwpjb25zdCBUYWdTZWxlY3RPcHRpb24gPSBUYWdTZWxlY3QuT3B0aW9uOwpleHBvcnQgZGVmYXVsdCB7CiAgY29tcG9uZW50czogewogICAgVGFnU2VsZWN0LAogICAgVGFnU2VsZWN0T3B0aW9uLAogICAgU3RhbmRhcmRGb3JtUm93LAogICAgQXJ0aWNsZUxpc3RDb250ZW50LAogICAgSWNvblRleHQsCiAgfSwKICBkYXRhKCkgewogICAgcmV0dXJuIHsKICAgICAgdXNlckRhdGE6IFtdLAogICAgICBpbWFnZVVybFJlZ2V4OiAvKGh0dHBbc10/OlwvXC9bXihcc3wiKV0rXC4ocG5nfGpwZ3xqcGVnfGdpZnx3ZWJwKSkvZ2ksCiAgICAgIGN1cnJlbnQ6IDEsCiAgICAgIHBhZ2VTaXplOiA4LAogICAgICBsb2FkaW5nOiB0cnVlLAogICAgICBsb2FkaW5nTW9yZTogZmFsc2UsCiAgICAgIGRhdGE6IFtdLAogICAgICBvcmlnaW5hbFVzZXJzOiBbXSwKICAgICAgdG90YWw6IDAsCiAgICAgIGZvcm06IHRoaXMuJGZvcm0uY3JlYXRlRm9ybSh0aGlzKSwKICAgIH07CiAgfSwKICBtb3VudGVkKCkgewogICAgdGhpcy5nZXRVc2VyKCk7CiAgICB0aGlzLiR3YXRjaCgoKSA9PiBbdGhpcy5wYWdlU2l6ZSwgdGhpcy5jdXJyZW50XSwgdGhpcy5nZXRMaXN0LCB7CiAgICAgIGltbWVkaWF0ZTogdHJ1ZSwKICAgIH0pOwogIH0sCiAgZmlsdGVyczogewogICAgZm9ybWF0VGltZTogZnVuY3Rpb24gKHZhbHVlKSB7CiAgICAgIC8vIOWcqOi/memHjOe8luWGmeaXtumXtOagvOW8j+WMlumAu+i+ke+8jOS+i+Wmgu+8mgogICAgICBjb25zdCBwYXJzZWRUaW1lID0gbmV3IERhdGUodmFsdWUpOwogICAgICBjb25zdCB5ZWFyID0gcGFyc2VkVGltZS5nZXRGdWxsWWVhcigpOwogICAgICBjb25zdCBtb250aCA9IFN0cmluZyhwYXJzZWRUaW1lLmdldE1vbnRoKCkgKyAxKS5wYWRTdGFydCgyLCAiMCIpOwogICAgICBjb25zdCBkYXkgPSBTdHJpbmcocGFyc2VkVGltZS5nZXREYXRlKCkpLnBhZFN0YXJ0KDIsICIwIik7CiAgICAgIHJldHVybiBgJHt5ZWFyfS0ke21vbnRofS0ke2RheX1gOwogICAgfSwKICB9LAogIGNvbXB1dGVkOiB7CiAgICBzZWFyY2hPcHRpb25zKCkgewogICAgICByZXR1cm4gY3JlYXRlU2VhcmNoT3B0aW9ucy5jYWxsKHRoaXMpOwogICAgfSwKICAgIHBhZ2luYXRpb24oKSB7CiAgICAgIHJldHVybiB7CiAgICAgICAgY3VycmVudDogdGhpcy5jdXJyZW50LAogICAgICAgIHBhZ2VTaXplOiB0aGlzLnBhZ2VTaXplLAogICAgICAgIHRvdGFsOiB0aGlzLnRvdGFsLAogICAgICAgIHNob3dTaXplQ2hhbmdlcjogdHJ1ZSwKICAgICAgICBwYWdlU2l6ZU9wdGlvbnM6IFsiOCIsICI5IiwgIjEwIiwgIjIwIl0sCiAgICAgICAgc2hvd1F1aWNrSnVtcGVyOiB0cnVlLAogICAgICAgIHNob3dUb3RhbDogKHRvdGFsKSA9PiBgVG90YWwgJHt0b3RhbH0gaXRlbXNgLAogICAgICAgIG9uQ2hhbmdlOiB0aGlzLmNoYW5nZVBhZ2UsCiAgICAgICAgb25TaG93U2l6ZUNoYW5nZTogdGhpcy5jaGFuZ2VQYWdlLAogICAgICB9OwogICAgfSwKICB9LAogIG1ldGhvZHM6IHsKICAgIGV4dHJhY3RJbWFnZVVybChjb250ZW50KSB7CiAgICAgIC8vIOWumuS5ieWMuemFjeWbvueJh1VSTOeahOato+WImeihqOi+vuW8jwogICAgICBjb25zdCBpbWFnZVVybFJlZ2V4ID0KICAgICAgICAvKGh0dHBbc10/OlwvXC9bXihcc3wiKV0rXC4ocG5nfGpwZ3xqcGVnfGdpZnx3ZWJwKSkvZ2k7CiAgICAgIC8vIOS9v+eUqOato+WImeihqOi+vuW8j+WMuemFjeWGheWuueS4reeahOWbvueJh1VSTAogICAgICBjb25zdCBtYXRjaGVzID0gY29udGVudC5tYXRjaChpbWFnZVVybFJlZ2V4KTsKICAgICAgLy8g5aaC5p6c5om+5Yiw5Yy56YWN6aG577yM6L+U5Zue56ys5LiA5byg5Zu+54mH55qEVVJMCiAgICAgIGlmIChtYXRjaGVzICYmIG1hdGNoZXMubGVuZ3RoID4gMCkgewogICAgICAgIHJldHVybiBtYXRjaGVzWzBdOwogICAgICB9CiAgICAgIC8vIOmBv+WFjea1j+iniOWZqOe8k+WtmAogICAgICBjb25zdCByYW5kb21TZWVkID0gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogMTAwMDApOyAvLyDnlJ/miJDkuIDkuKow5YiwOTk5OeS5i+mXtOeahOmaj+acuuaVsAogICAgICAvLyDlpoLmnpzmsqHmnInmib7liLDljLnphY3nmoTlm77niYfvvIzlj6/ku6Xkvb/nlKjpmo/mnLrlm77niYcKICAgICAgcmV0dXJuICJodHRwczovL2FwaS43NTg1Lm5ldC5jbi9iaW5nL2FwaS5waHA/cmFuZD0xPyIgKyByYW5kb21TZWVkOwogICAgfSwKICAgIGFzeW5jIGdldEltYWdlKGFydGljbGVJZCkgewogICAgICB0cnkgewogICAgICAgIGNvbnN0IHJlcyA9IGF3YWl0IHRoaXMuJGFwaS5BbGxBcnRpY2xlKCk7CiAgICAgICAgbGV0IGNvbnRlbnQgPSByZXMuZGF0YS5maWx0ZXIoKGl0ZW0pID0+IGl0ZW0uYXJ0aWNsZUlkID09PSBhcnRpY2xlSWQpOwoKICAgICAgICBpZiAoY29udGVudC5sZW5ndGggPT09IDApIHsKICAgICAgICAgIGNvbnNvbGUubG9nKCLmnKrmib7liLDlr7nlupTmlofnq6DlhoXlrrkiKTsKICAgICAgICAgIHJldHVybiBudWxsOyAvLyDov5Tlm57nqbrlgLzvvIzooajnpLrmnKrmib7liLDlsIHpnaLlm77niYcKICAgICAgICB9CgogICAgICAgIGNvbnN0IGltYWdlVXJsUmVnZXggPQogICAgICAgICAgLyhodHRwW3NdPzpcL1wvW14oXHN8IildK1wuKHBuZ3xqcGd8anBlZ3xnaWZ8d2VicCkpL2dpOwogICAgICAgIGNvbnN0IGltYWdlcyA9IGNvbnRlbnRbMF0uYXJ0aWNsZUNvbnRlbnQubWF0Y2goaW1hZ2VVcmxSZWdleCk7CgogICAgICAgIGlmIChpbWFnZXMgJiYgaW1hZ2VzLmxlbmd0aCA+IDApIHsKICAgICAgICAgIGNvbnNvbGUubG9nKCLmib7liLDlsIHpnaLlm77niYfpk77mjqU6IiwgaW1hZ2VzWzBdKTsKICAgICAgICAgIHJldHVybiBpbWFnZXNbMF07IC8vIOi/lOWbnuesrOS4gOW8oOWMuemFjeWIsOeahOWbvueJh+mTvuaOpQogICAgICAgIH0gZWxzZSB7CiAgICAgICAgICBjb25zb2xlLmxvZygi5pyq5om+5Yiw5Zu+54mH6ZO+5o6lIik7CiAgICAgICAgICByZXR1cm4gbnVsbDsgLy8g6L+U5Zue56m65YC877yM6KGo56S65pyq5om+5Yiw5bCB6Z2i5Zu+54mHCiAgICAgICAgfQogICAgICB9IGNhdGNoIChlcnJvcikgewogICAgICAgIGNvbnNvbGUuZXJyb3IoIuiOt+WPluaWh+eroOWGheWuueWksei0pToiLCBlcnJvcik7CiAgICAgICAgcmV0dXJuIG51bGw7IC8vIOi/lOWbnuepuuWAvO+8jOihqOekuuacquaJvuWIsOWwgemdouWbvueJhwogICAgICB9CiAgICB9LAogICAgLy8g5pCc57SiCiAgICBzZWFyY2goKSB7CiAgICAgIHRoaXMuY3VycmVudCA9IDE7CiAgICAgIHRoaXMuZ2V0TGlzdCgpOwogICAgfSwKICAgIC8vIOWIhumhteWIh+aNogogICAgY2hhbmdlUGFnZShjdXJyZW50LCBwYWdlU2l6ZSkgewogICAgICB0aGlzLmN1cnJlbnQgPSBjdXJyZW50OwogICAgICB0aGlzLnBhZ2VTaXplID0gcGFnZVNpemU7CiAgICAgIHRoaXMuZ2V0TGlzdCgpOwogICAgfSwKICAgIGhhbmRsZUNoYW5nZSh2YWx1ZSkgewogICAgICBjb25zb2xlLmxvZyhgc2VsZWN0ZWQgJHt2YWx1ZX1gKTsKICAgIH0sCiAgICBnZXRVc2VyKCkgewogICAgICB0aGlzLiRhcGkKICAgICAgICAuQWxsVXNlcigpCiAgICAgICAgLnRoZW4oKHJlcykgPT4gewogICAgICAgICAgY29uc3QgdXNlcnMgPSByZXMuZGF0YTsKICAgICAgICAgIGNvbnN0IHVzZXJNYXAgPSB7fTsKICAgICAgICAgIHVzZXJzLmZvckVhY2goKHVzZXIpID0+IHsKICAgICAgICAgICAgdXNlck1hcFt1c2VyLnVzZXJJZF0gPSB1c2VyLnVzZXJOYW1lOwogICAgICAgICAgfSk7CiAgICAgICAgICB0aGlzLnVzZXJEYXRhID0gdXNlck1hcDsKICAgICAgICAgIGNvbnNvbGUubG9nKHRoaXMudXNlckRhdGEpOwogICAgICAgIH0pCiAgICAgICAgLmNhdGNoKChlcnJvcikgPT4gewogICAgICAgICAgY29uc29sZS5lcnJvcihlcnJvcik7CiAgICAgICAgfSk7CiAgICB9LAogICAgYXN5bmMgZ2V0TGlzdCgpIHsKICAgICAgdHJ5IHsKICAgICAgICAvLyDlvIDlp4vliqDovb3vvIzmmL7npLrliqDovb3mjIfnpLrlmagKICAgICAgICB0aGlzLmxvYWRpbmcgPSB0cnVlOwogICAgICAgIHRoaXMucXVlcnkgPSB0aGlzLiRyZWZzLnNlYXJjaEZvcm0uZ2V0UmVzdWx0KCk7CiAgICAgICAgLy8g5L2/55SoIGF3YWl0IOebtOaOpeetieW+heW8guatpeaTjeS9nOeahOe7k+aenAogICAgICAgIGNvbnN0IHJlcyA9IGF3YWl0IHRoaXMuJGFwaS5BbGxBcnRpY2xlKCk7CiAgICAgICAgLy8g5omT5Y2w5ZON5bqU57uT5p6cCiAgICAgICAgdGhpcy5vcmlnaW5hbFVzZXJzID0gcmVzLmRhdGE7CiAgICAgICAgdGhpcy5maWx0ZXJVc2VycygpOyAvLyDosIPnlKjov4fmu6TnlKjmiLfmlrnms5UKICAgICAgICBjb25zb2xlLmxvZygicmVzIiwgcmVzLmRhdGEpOwogICAgICAgIC8vIOS9v+eUqOWTjeW6lOe7k+aenOabtOaWsOaVsOaNrgogICAgICAgIHRoaXMudG90YWwgPSByZXMuZGF0YS5sZW5ndGg7CiAgICAgIH0gY2F0Y2ggKGVycm9yKSB7CiAgICAgICAgLy8g5aSE55CG5Y+v6IO95Ye6546w55qE6ZSZ6K+vCiAgICAgICAgY29uc29sZS5lcnJvcigi6I635Y+W5paH56ug5YiX6KGo5aSx6LSlOiIsIGVycm9yKTsKICAgICAgfSBmaW5hbGx5IHsKICAgICAgICAvLyDml6DorrrmiJDlip/ov5jmmK/lpLHotKXvvIzmnIDlkI7pg73kvJrmiafooYzvvIzpmpDol4/liqDovb3mjIfnpLrlmagKICAgICAgICB0aGlzLmxvYWRpbmcgPSBmYWxzZTsKICAgICAgfQogICAgfSwKICAgIC8vIOaQnOe0ogogICAgZmlsdGVyVXNlcnMoKSB7CiAgICAgIGxldCBmaWx0ZXJlZFVzZXJzID0gdGhpcy5vcmlnaW5hbFVzZXJzLnNsaWNlKCk7IC8vIOWkjeWItuWOn+Wni+eUqOaIt+aVsOaNrgogICAgICBjb25zb2xlLmxvZyh0aGlzLnF1ZXJ5KTsKICAgICAgaWYgKHRoaXMucXVlcnkuYXJ0aWNsZVRpdGxlKSB7CiAgICAgICAgZmlsdGVyZWRVc2VycyA9IGZpbHRlcmVkVXNlcnMuZmlsdGVyKCh1c2VyKSA9PgogICAgICAgICAgdXNlci5hcnRpY2xlVGl0bGUuaW5jbHVkZXModGhpcy5xdWVyeS5hcnRpY2xlVGl0bGUpCiAgICAgICAgKTsKICAgICAgfQoKICAgICAgaWYgKHRoaXMucXVlcnkudXNlck5hbWUpIHsKICAgICAgICBmaWx0ZXJlZFVzZXJzID0gZmlsdGVyZWRVc2Vycy5maWx0ZXIoKHVzZXIpID0+CiAgICAgICAgICB1c2VyLnVzZXJJZC5pbmNsdWRlcyh0aGlzLnF1ZXJ5LnVzZXJOYW1lKQogICAgICAgICk7CiAgICAgIH0KICAgICAgaWYgKHRoaXMucXVlcnkuYXJ0aWNsZUNvbnRlbnQpIHsKICAgICAgICBmaWx0ZXJlZFVzZXJzID0gZmlsdGVyZWRVc2Vycy5maWx0ZXIoKHVzZXIpID0+CiAgICAgICAgICB1c2VyLmFydGljbGVDb250ZW50LmluY2x1ZGVzKHRoaXMucXVlcnkuYXJ0aWNsZUNvbnRlbnQpCiAgICAgICAgKTsKICAgICAgfQogICAgICBjb25zdCBzdGFydCA9ICh0aGlzLmN1cnJlbnQgLSAxKSAqIHRoaXMucGFnZVNpemU7CiAgICAgIGNvbnN0IGVuZCA9IHN0YXJ0ICsgdGhpcy5wYWdlU2l6ZTsKICAgICAgdGhpcy5kYXRhID0gZmlsdGVyZWRVc2Vycy5zbGljZShzdGFydCwgZW5kKTsKICAgIH0sCiAgfSwKfTsKLy8g5Yib5bu65pCc57Si6YCJ6aG5CmZ1bmN0aW9uIGNyZWF0ZVNlYXJjaE9wdGlvbnMoKSB7CiAgcmV0dXJuIFsKICAgIHsKICAgICAgbGFiZWw6ICLmoIfpopgiLAogICAgICBrZXk6ICJhcnRpY2xlVGl0bGUiLAogICAgICBkZWZhdWx0OiAiIiwKICAgICAgY29tcG9uZW50OiAiaW5wdXQiLAogICAgfSwKICAgIHsKICAgICAgbGFiZWw6ICLkvZzogIUiLAogICAgICBrZXk6ICJ1c2VyTmFtZSIsCiAgICAgIGRlZmF1bHQ6ICIiLAogICAgICBjb21wb25lbnQ6ICJpbnB1dCIsCiAgICB9LAogICAgewogICAgICBsYWJlbDogIuWGheWuuSIsCiAgICAgIGtleTogImFydGljbGVDb250ZW50IiwKICAgICAgZGVmYXVsdDogIiIsCiAgICAgIGNvbXBvbmVudDogImlucHV0IiwKICAgIH0sCiAgICB7CiAgICAgIGxhYmVsOiAi5pe26Ze0IiwKICAgICAga2V5OiAicHVibGlzaFRpbWUiLAogICAgICBkZWZhdWx0OiAoKSA9PiBbXSwKICAgICAgbWFwcGVyOiAoeyBwdWJsaXNoVGltZSB9KSA9PiBwdWJsaXNoVGltZS5qb2luKCJ+IiksCiAgICAgIGNvbXBvbmVudDogInJhbmdlLXBpY2tlciIsCiAgICB9LAogIF07Cn0K"},{"version":3,"sources":["Article.vue"],"names":[],"mappings":";AA+FA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Article.vue","sourceRoot":"src/views/communtiy","sourcesContent":["<template>\n  <!-- 主容器 -->\n  <div>\n    <!-- 搜索表单 -->\n    <SearchForm\n      ref=\"searchForm\"\n      :loading=\"loading\"\n      :options=\"searchOptions\"\n      @search=\"search\"\n      @reset=\"search\"\n    />\n    <!-- 标签选择器 -->\n    <a-card\n      :bordered=\"false\"\n      class=\"ant-pro-components-tag-select\"\n      style=\"margin-bottom: -82px\"\n    >\n      <a-form :form=\"form\" layout=\"inline\">\n        <!-- 类目选择 -->\n        <standard-form-row title=\"所属类目\" block style=\"padding-bottom: 11px\">\n          <a-form-item>\n            <!-- 标签选择器组件 -->\n            <tag-select>\n              <!-- 类目选项 -->\n              <!-- 全部选项 -->\n              <tag-select-option value=\"全部\" @click.native=\"getList\"\n                ><h3><a-icon type=\"audit\" />全部</h3></tag-select-option\n              >\n              <tag-select-option value=\"公告\" @click.native=\"search('公告')\"\n                ><h3><a-icon type=\"audit\" />公告</h3></tag-select-option\n              >\n              <tag-select-option value=\"交流\" @click.native=\"search('交流')\"\n                ><h3><a-icon type=\"audit\" />交流</h3></tag-select-option\n              >\n              <tag-select-option value=\"讨论\" @click.native=\"search('讨论')\"\n                ><h3><a-icon type=\"audit\" />讨论</h3></tag-select-option\n              >\n            </tag-select>\n          </a-form-item>\n        </standard-form-row>\n      </a-form>\n    </a-card>\n    <!-- 文章列表 -->\n    <a-card style=\"margin-top: 24px\" :bordered=\"false\">\n      <a-list\n        size=\"large\"\n        rowKey=\"id\"\n        :loading=\"loading\"\n        itemLayout=\"vertical\"\n        :dataSource=\"data\"\n        :pagination=\"pagination\"\n        @change=\"changePage\"\n      >\n        <div class=\"side-brick\">\n          <ul class=\"brick-box\">\n            <li class=\"brick-list\" v-for=\"item in data\" key=\"item.id\">\n              <router-link :to=\"'/community/pages?id=' + item.articleId\">\n                <a class=\"item-box-retina\">\n                  <figure class=\"item-box-img\">\n                    <!-- 文章图片 -->\n                    <!-- 调用extractImageUrl方法并传递文章内容 -->\n                    <img\n                      class=\"lazy\"\n                      :src=\"extractImageUrl(item.articleContent)\"\n                      alt=\"Article Cover\"\n                    />\n                    <!-- <img class=\"lazy\" :src=\"item.articleContent.match(imageUrlRegex)\" > -->\n                    <!-- 文章标题 -->\n                    <h3>{{ item.articleTitle }}</h3>\n                  </figure>\n                  <!-- 文章内容 -->\n                  <p class=\"item-user-info\" v-html=\"item.articleContent\"></p>\n                  <p class=\"item-user-author\">\n                    <img src=\"/logo.png\" :alt=\"userData[item.userId]\" />\n                    <!-- 文章作者 -->\n                    <span class=\"comment-username\"\n                      >{{ userData[item.userId]\n                      }}<span class=\"autlv aut-5 vs-level\">V</span></span\n                    >\n                    <span class=\"comment-tip\"\n                      ><i class=\"icon font-time\"></i\n                      >{{ item.publishTime | formatTime }}</span\n                    >\n                  </p>\n                </a>\n              </router-link>\n            </li>\n          </ul>\n        </div>\n      </a-list>\n    </a-card>\n  </div>\n</template>\n\n<script>\nimport TagSelect from \"../../components/TagSelect\";\nimport StandardFormRow from \"../../components/StandardFormRow\";\nimport ArticleListContent from \"../../components/ArticleListContent\";\nimport IconText from \"./components/IconText\";\nconst TagSelectOption = TagSelect.Option;\nexport default {\n  components: {\n    TagSelect,\n    TagSelectOption,\n    StandardFormRow,\n    ArticleListContent,\n    IconText,\n  },\n  data() {\n    return {\n      userData: [],\n      imageUrlRegex: /(http[s]?:\\/\\/[^(\\s|\")]+\\.(png|jpg|jpeg|gif|webp))/gi,\n      current: 1,\n      pageSize: 8,\n      loading: true,\n      loadingMore: false,\n      data: [],\n      originalUsers: [],\n      total: 0,\n      form: this.$form.createForm(this),\n    };\n  },\n  mounted() {\n    this.getUser();\n    this.$watch(() => [this.pageSize, this.current], this.getList, {\n      immediate: true,\n    });\n  },\n  filters: {\n    formatTime: function (value) {\n      // 在这里编写时间格式化逻辑，例如：\n      const parsedTime = new Date(value);\n      const year = parsedTime.getFullYear();\n      const month = String(parsedTime.getMonth() + 1).padStart(2, \"0\");\n      const day = String(parsedTime.getDate()).padStart(2, \"0\");\n      return `${year}-${month}-${day}`;\n    },\n  },\n  computed: {\n    searchOptions() {\n      return createSearchOptions.call(this);\n    },\n    pagination() {\n      return {\n        current: this.current,\n        pageSize: this.pageSize,\n        total: this.total,\n        showSizeChanger: true,\n        pageSizeOptions: [\"8\", \"9\", \"10\", \"20\"],\n        showQuickJumper: true,\n        showTotal: (total) => `Total ${total} items`,\n        onChange: this.changePage,\n        onShowSizeChange: this.changePage,\n      };\n    },\n  },\n  methods: {\n    extractImageUrl(content) {\n      // 定义匹配图片URL的正则表达式\n      const imageUrlRegex =\n        /(http[s]?:\\/\\/[^(\\s|\")]+\\.(png|jpg|jpeg|gif|webp))/gi;\n      // 使用正则表达式匹配内容中的图片URL\n      const matches = content.match(imageUrlRegex);\n      // 如果找到匹配项，返回第一张图片的URL\n      if (matches && matches.length > 0) {\n        return matches[0];\n      }\n      // 避免浏览器缓存\n      const randomSeed = Math.floor(Math.random() * 10000); // 生成一个0到9999之间的随机数\n      // 如果没有找到匹配的图片，可以使用随机图片\n      return \"https://api.7585.net.cn/bing/api.php?rand=1?\" + randomSeed;\n    },\n    async getImage(articleId) {\n      try {\n        const res = await this.$api.AllArticle();\n        let content = res.data.filter((item) => item.articleId === articleId);\n\n        if (content.length === 0) {\n          console.log(\"未找到对应文章内容\");\n          return null; // 返回空值，表示未找到封面图片\n        }\n\n        const imageUrlRegex =\n          /(http[s]?:\\/\\/[^(\\s|\")]+\\.(png|jpg|jpeg|gif|webp))/gi;\n        const images = content[0].articleContent.match(imageUrlRegex);\n\n        if (images && images.length > 0) {\n          console.log(\"找到封面图片链接:\", images[0]);\n          return images[0]; // 返回第一张匹配到的图片链接\n        } else {\n          console.log(\"未找到图片链接\");\n          return null; // 返回空值，表示未找到封面图片\n        }\n      } catch (error) {\n        console.error(\"获取文章内容失败:\", error);\n        return null; // 返回空值，表示未找到封面图片\n      }\n    },\n    // 搜索\n    search() {\n      this.current = 1;\n      this.getList();\n    },\n    // 分页切换\n    changePage(current, pageSize) {\n      this.current = current;\n      this.pageSize = pageSize;\n      this.getList();\n    },\n    handleChange(value) {\n      console.log(`selected ${value}`);\n    },\n    getUser() {\n      this.$api\n        .AllUser()\n        .then((res) => {\n          const users = res.data;\n          const userMap = {};\n          users.forEach((user) => {\n            userMap[user.userId] = user.userName;\n          });\n          this.userData = userMap;\n          console.log(this.userData);\n        })\n        .catch((error) => {\n          console.error(error);\n        });\n    },\n    async getList() {\n      try {\n        // 开始加载，显示加载指示器\n        this.loading = true;\n        this.query = this.$refs.searchForm.getResult();\n        // 使用 await 直接等待异步操作的结果\n        const res = await this.$api.AllArticle();\n        // 打印响应结果\n        this.originalUsers = res.data;\n        this.filterUsers(); // 调用过滤用户方法\n        console.log(\"res\", res.data);\n        // 使用响应结果更新数据\n        this.total = res.data.length;\n      } catch (error) {\n        // 处理可能出现的错误\n        console.error(\"获取文章列表失败:\", error);\n      } finally {\n        // 无论成功还是失败，最后都会执行，隐藏加载指示器\n        this.loading = false;\n      }\n    },\n    // 搜索\n    filterUsers() {\n      let filteredUsers = this.originalUsers.slice(); // 复制原始用户数据\n      console.log(this.query);\n      if (this.query.articleTitle) {\n        filteredUsers = filteredUsers.filter((user) =>\n          user.articleTitle.includes(this.query.articleTitle)\n        );\n      }\n\n      if (this.query.userName) {\n        filteredUsers = filteredUsers.filter((user) =>\n          user.userId.includes(this.query.userName)\n        );\n      }\n      if (this.query.articleContent) {\n        filteredUsers = filteredUsers.filter((user) =>\n          user.articleContent.includes(this.query.articleContent)\n        );\n      }\n      const start = (this.current - 1) * this.pageSize;\n      const end = start + this.pageSize;\n      this.data = filteredUsers.slice(start, end);\n    },\n  },\n};\n// 创建搜索选项\nfunction createSearchOptions() {\n  return [\n    {\n      label: \"标题\",\n      key: \"articleTitle\",\n      default: \"\",\n      component: \"input\",\n    },\n    {\n      label: \"作者\",\n      key: \"userName\",\n      default: \"\",\n      component: \"input\",\n    },\n    {\n      label: \"内容\",\n      key: \"articleContent\",\n      default: \"\",\n      component: \"input\",\n    },\n    {\n      label: \"时间\",\n      key: \"publishTime\",\n      default: () => [],\n      mapper: ({ publishTime }) => publishTime.join(\"~\"),\n      component: \"range-picker\",\n    },\n  ];\n}\n</script>\n\n<style lang=\"less\" scoped>\n/* 帖子详情页美化样式 */\n\n/* 页面背景与整体布局 */\n.post-detail-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 24px;\n  background-color: transparent;\n}\n\n.post-detail-wrapper {\n  background: rgba(255, 255, 255, 0.95);\n  border-radius: 16px;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  transition: all 0.4s ease;\n  position: relative;\n}\n\n/* 炫酷背景渐变 */\n.page-background {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(120deg, #f6f8fa 0%, #e8f4fc 50%, #edf7ff 100%);\n  background-size: 400% 400%;\n  animation: gradientBG 15s ease infinite;\n  z-index: -1;\n}\n\n@keyframes gradientBG {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n\n/* 帖子标题区域 */\n.post-header {\n  position: relative;\n  padding: 40px 32px 24px;\n  background: linear-gradient(135deg, #3690cf, #2a78b8);\n  color: white;\n  overflow: hidden;\n}\n\n.post-header:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9InBhdHRlcm4iIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+CiAgICAgIDxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjEuNSIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjEiIC8+CiAgICA8L3BhdHRlcm4+CiAgPC9kZWZzPgogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiIC8+Cjwvc3ZnPg==');\n  opacity: 0.4;\n}\n\n.post-title {\n  font-size: 28px;\n  font-weight: 600;\n  margin-bottom: 16px;\n  position: relative;\n  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.post-meta {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 20px;\n  position: relative;\n  font-size: 14px;\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.post-meta-item {\n  display: flex;\n  align-items: center;\n}\n\n.post-meta-item .anticon {\n  margin-right: 6px;\n  font-size: 16px;\n}\n\n.post-category {\n  display: inline-block;\n  padding: 4px 12px;\n  border-radius: 20px;\n  background: rgba(255, 255, 255, 0.2);\n  backdrop-filter: blur(5px);\n  margin-right: 8px;\n  font-size: 13px;\n  font-weight: 500;\n}\n\n/* 作者信息卡片 */\n.author-card {\n  display: flex;\n  align-items: center;\n  margin-top: -40px;\n  margin-left: 32px;\n  margin-bottom: 16px;\n  z-index: 10;\n  position: relative;\n}\n\n.author-avatar {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  border: 4px solid white;\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n  object-fit: cover;\n  background-color: #f0f0f0;\n}\n\n.author-info {\n  margin-left: 16px;\n}\n\n.author-name {\n  font-size: 18px;\n  font-weight: 600;\n  color: #333;\n  display: flex;\n  align-items: center;\n}\n\n.author-level {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 6px;\n  background: linear-gradient(135deg, #ff9800, #ff5722);\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 8px;\n  box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);\n}\n\n.author-status {\n  font-size: 13px;\n  color: #666;\n  margin-top: 4px;\n}\n\n/* 帖子内容区域 */\n.post-content {\n  padding: 60px 32px 40px;\n  font-size: 16px;\n  line-height: 1.8;\n  color: #333;\n}\n\n.post-content img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n  margin: 24px 0;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.post-content img:hover {\n  transform: scale(1.01);\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);\n}\n\n.post-content p {\n  margin-bottom: 20px;\n}\n\n.post-content h1, \n.post-content h2, \n.post-content h3 {\n  margin-top: 32px;\n  margin-bottom: 16px;\n  font-weight: 600;\n  color: #222;\n}\n\n.post-content h1 {\n  font-size: 26px;\n  border-bottom: 1px solid #eee;\n  padding-bottom: 12px;\n}\n\n.post-content h2 {\n  font-size: 22px;\n}\n\n.post-content h3 {\n  font-size: 18px;\n}\n\n.post-content blockquote {\n  border-left: 4px solid #3690cf;\n  padding: 12px 20px;\n  margin: 20px 0;\n  background-color: #f8f9fb;\n  border-radius: 0 8px 8px 0;\n  color: #555;\n  font-style: italic;\n}\n\n.post-content a {\n  color: #3690cf;\n  text-decoration: none;\n  border-bottom: 1px dashed rgba(54, 144, 207, 0.5);\n  transition: all 0.2s;\n}\n\n.post-content a:hover {\n  color: #2a78b8;\n  border-bottom: 1px solid #2a78b8;\n}\n\n.post-content pre {\n  background-color: #282c34;\n  border-radius: 8px;\n  padding: 16px;\n  overflow-x: auto;\n  margin: 20px 0;\n  position: relative;\n}\n\n.post-content pre code {\n  color: #abb2bf;\n  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n.post-content code {\n  background-color: #f6f8fa;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;\n  font-size: 0.9em;\n  color: #e83e8c;\n}\n\n.post-content pre code {\n  background-color: transparent;\n  padding: 0;\n  color: inherit;\n}\n\n/* 高亮代码块标题 */\n.code-block-header {\n  position: absolute;\n  top: 0;\n  right: 0;\n  background: rgba(255, 255, 255, 0.1);\n  padding: 4px 12px;\n  border-radius: 0 8px 0 8px;\n  font-size: 12px;\n  color: #aaa;\n}\n\n/* 帖子操作区域 */\n.post-actions {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 20px 32px;\n  border-top: 1px solid #f0f0f0;\n  background-color: #f9fafc;\n}\n\n.post-action-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 8px 16px;\n  border-radius: 20px;\n  font-size: 14px;\n  color: #666;\n  background-color: white;\n  border: 1px solid #e8e8e8;\n  transition: all 0.25s;\n  cursor: pointer;\n}\n\n.post-action-btn:hover {\n  color: #3690cf;\n  border-color: #3690cf;\n  background-color: rgba(54, 144, 207, 0.05);\n}\n\n.post-action-btn .anticon {\n  margin-right: 6px;\n  font-size: 16px;\n}\n\n.post-action-btn.liked {\n  color: #ff4d4f;\n  border-color: #ff4d4f;\n  background-color: rgba(255, 77, 79, 0.05);\n}\n\n.post-action-btn.saved {\n  color: #faad14;\n  border-color: #faad14;\n  background-color: rgba(250, 173, 20, 0.05);\n}\n\n.post-action-group {\n  display: flex;\n  gap: 12px;\n}\n\n/* 评论区域 */\n.comments-section {\n  padding: 32px;\n  background-color: #f9fafc;\n  border-top: 1px solid #f0f0f0;\n}\n\n.comments-header {\n  font-size: 20px;\n  font-weight: 600;\n  margin-bottom: 24px;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.comments-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: #3690cf;\n  color: white;\n  height: 24px;\n  padding: 0 10px;\n  border-radius: 12px;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.comment-form {\n  margin-bottom: 32px;\n}\n\n.comment-textarea {\n  width: 100%;\n  border: 1px solid #e8e8e8;\n  border-radius: 12px;\n  padding: 16px;\n  min-height: 120px;\n  resize: none;\n  font-size: 14px;\n  transition: all 0.3s;\n  background-color: white;\n}\n\n.comment-textarea:focus {\n  outline: none;\n  border-color: #3690cf;\n  box-shadow: 0 0 0 2px rgba(54, 144, 207, 0.2);\n}\n\n.comment-form-actions {\n  display: flex;\n  justify-content: flex-end;\n  margin-top: 16px;\n}\n\n.comment-submit {\n  padding: 8px 24px;\n  border-radius: 20px;\n  background: linear-gradient(135deg, #3690cf, #2a78b8);\n  color: white;\n  font-size: 14px;\n  font-weight: 500;\n  border: none;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n\n.comment-submit:hover {\n  background: linear-gradient(135deg, #2a78b8, #1e5c8e);\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(42, 120, 184, 0.3);\n}\n\n/* 单个评论样式 */\n.comment-item {\n  margin-bottom: 24px;\n  padding-bottom: 24px;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.comment-item:last-child {\n  border-bottom: none;\n  margin-bottom: 0;\n  padding-bottom: 0;\n}\n\n.comment-header {\n  display: flex;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.comment-avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  object-fit: cover;\n  background-color: #f0f0f0;\n  margin-right: 12px;\n}\n\n.comment-info {\n  flex: 1;\n}\n\n.comment-author {\n  font-weight: 500;\n  margin-right: 8px;\n  color: #333;\n}\n\n.comment-meta {\n  font-size: 12px;\n  color: #999;\n}\n\n.comment-body {\n  font-size: 14px;\n  line-height: 1.6;\n  color: #444;\n  margin-left: 52px;\n}\n\n.comment-actions {\n  display: flex;\n  gap: 16px;\n  margin-top: 12px;\n  margin-left: 52px;\n}\n\n.comment-action {\n  font-size: 12px;\n  color: #999;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n\n.comment-action .anticon {\n  margin-right: 4px;\n  font-size: 14px;\n}\n\n.comment-action:hover {\n  color: #3690cf;\n}\n\n/* 相关帖子 */\n.related-posts {\n  padding: 32px;\n  background-color: white;\n  border-top: 1px solid #f0f0f0;\n}\n\n.related-posts-header {\n  font-size: 20px;\n  font-weight: 600;\n  margin-bottom: 24px;\n  color: #333;\n}\n\n.related-posts-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 24px;\n}\n\n.related-post-card {\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);\n  transition: all 0.3s ease;\n  background-color: white;\n}\n\n.related-post-card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\n}\n\n.related-post-image {\n  height: 160px;\n  overflow: hidden;\n  position: relative;\n}\n\n.related-post-image img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.5s ease;\n}\n\n.related-post-card:hover .related-post-image img {\n  transform: scale(1.05);\n}\n\n.related-post-content {\n  padding: 16px;\n}\n\n.related-post-title {\n  font-size: 16px;\n  font-weight: 500;\n  margin-bottom: 8px;\n  color: #333;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  line-height: 1.4;\n  height: 44.8px;\n}\n\n.related-post-meta {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  color: #999;\n}\n\n/* 回到顶部按钮 */\n.back-to-top {\n  position: fixed;\n  bottom: 40px;\n  right: 40px;\n  width: 50px;\n  height: 50px;\n  border-radius: 50%;\n  background: white;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #555;\n  font-size: 20px;\n  cursor: pointer;\n  transition: all 0.3s;\n  z-index: 100;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.back-to-top.visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.back-to-top:hover {\n  background: #3690cf;\n  color: white;\n  box-shadow: 0 6px 16px rgba(54, 144, 207, 0.4);\n  transform: translateY(-5px);\n}\n\n/* 炫酷粒子效果 */\n.particles {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  z-index: 0;\n}\n\n.particle {\n  position: absolute;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.3);\n  animation: float 3s infinite;\n}\n\n@keyframes float {\n  0%, 100% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(-20px);\n  }\n}\n\n/* 内容区域美化 */\n.content-area {\n  position: relative;\n  z-index: 1;\n}\n\n/* 响应式布局 */\n@media (max-width: 768px) {\n  .post-header {\n    padding: 30px 20px 20px;\n  }\n  \n  .post-title {\n    font-size: 22px;\n  }\n  \n  .author-card {\n    margin-left: 20px;\n  }\n  \n  .author-avatar {\n    width: 60px;\n    height: 60px;\n  }\n  \n  .post-content,\n  .post-actions,\n  .comments-section,\n  .related-posts {\n    padding: 20px;\n  }\n  \n  .related-posts-grid {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n  \n  .back-to-top {\n    bottom: 20px;\n    right: 20px;\n    width: 40px;\n    height: 40px;\n  }\n}\n\n/* 动画效果 */\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.fade-in {\n  animation: fadeIn 0.6s ease forwards;\n}\n\n.fade-in-delay-1 {\n  animation: fadeIn 0.6s ease 0.1s forwards;\n  opacity: 0;\n}\n\n.fade-in-delay-2 {\n  animation: fadeIn 0.6s ease 0.2s forwards;\n  opacity: 0;\n}\n\n.fade-in-delay-3 {\n  animation: fadeIn 0.6s ease 0.3s forwards;\n  opacity: 0;\n}\n\n/* 阅读进度条 */\n.reading-progress {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 4px;\n  background: linear-gradient(90deg, #3690cf, #6dc6ff);\n  z-index: 1000;\n  transition: width 0.1s;\n}\n\n/* 自定义滚动条 */\n::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 10px;\n}\n\n::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 10px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background: #3690cf;\n}\n</style>\n"]}]}