[{"data":1,"prerenderedAt":751},["ShallowReactive",2],{"\u002F2025\u002F12\u002Fbanguimpageadd":3,"index_posts":248,"surround-\u002F2025\u002F12\u002Fbanguimpageadd":746},{"id":4,"title":5,"body":6,"categories":220,"date":222,"description":223,"draft":224,"extension":225,"image":226,"meta":227,"navigation":229,"path":230,"permalink":231,"published":231,"readingTime":232,"recommend":237,"references":231,"seo":238,"sitemap":239,"stem":240,"subtitle":231,"tags":241,"type":245,"updated":246,"__hash__":247},"content\u002Fposts\u002F2025\u002F12\u002FbanguimPageAdd.md","添加追更历史",{"type":7,"value":8,"toc":205},"minimark",[9,13,17,24,30,33,49,52,87,90,94,129,132,164,167,177,180,187,190],[10,11,12],"h2",{"id":12},"前言",[14,15,16],"p",{},"鸽了这么久的时间，至于为什么鸽了这么久的原因有很多：写小说、默默对站点进行添加新的功能（没有写文）、玩游戏等等，当然这次的文章也是非常高级的。\n本教程参考了以下页面的东西",[18,19],"link-card",{"description":20,"icon":21,"link":22,"title":23},"采用该卡片的元素样式","https:\u002F\u002Fcravatar.com\u002Favatar\u002F1012bf78fb01d5b964c3a9a0f515911a?s=160","https:\u002F\u002Fblog.sotkg.com\u002Fpreviews\u002Fexample#%E8%87%AA%E5%8A%A8%E5%8A%A0%E8%BD%BD%E6%A8%A1%E5%BC%8F-%E7%95%AA%E5%89%A7%E5%8D%A1%E7%89%87","Mikuの鬆",[18,25],{"description":26,"icon":27,"link":28,"title":29},"采用该卡片的元素样式（v0版本的卡片，现已抛弃）与tab样式","https:\u002F\u002Fweavatar.com\u002Favatar\u002F6085f2ddd3c17e493dafdaeccbf2713e3f679298246f35fc7d4d248f5cea361b","https:\u002F\u002Fwww.thyuu.com\u002Fdouban\u002F","风纪星辰",[10,31,32],{"id":32},"功能解析",[34,35,36,40,43,46],"ul",{},[37,38,39],"li",{},"采用两栏菜单栏，分为追更作品类型栏（第一个tab栏）与追更作品可见范围栏（第二个tab栏）",[37,41,42],{},"使用全新加载方式（即风纪星辰豆瓣记录的loading加载）",[37,44,45],{},"修复页面打开后无法自动加载（页面3.0）",[37,47,48],{},"即将支持页面分页限制（未做好）",[10,50,51],{"id":51},"目录结构",[34,53,54,61,67,81],{},[37,55,56,60],{},[57,58,59],"code",{"code":59},"\u002Fapp\u002Fpage\u002Fbanguim.vue","：追更页面中的主界面渲染模块，传递useBangumi.ts的模块请求数据（模块来源于喵落阁，经过本人重新二开）",[37,62,63,66],{},[57,64,65],{"code":65},"\u002Fapp\u002Fcomponents\u002FBangumi\u002FbgmCard.vue","：追更页面的卡片主渲染模块（样式来自Mikuの鬆，模块来源于喵落阁，本模块经过本人重新二开）",[37,68,69,72,73,76,77,80],{},[57,70,71],{"code":71},"\u002Fapp\u002Fcomposables\u002FuseBangumi.ts","：追更页面中的api请求模块，具有",[57,74,75],{"code":75},"subject_type","与",[57,78,79],{"code":79},"type","两种请求方式（模块来源于喵落阁，经过本人重新二开）",[37,82,83,86],{},[57,84,85],{"code":85},"\u002Fapp\u002Ftypes\u002Fbangumi","：追更页面全局数据类型，本身作为数据加载以及页面引用（模块来源于喵落阁）",[10,88,89],{"id":89},"核心代码",[91,92,93],"h3",{"id":93},"追更页面渲染展示",[95,96,98,113,121],"tab",{":tabs":97},"[\"页面1.0版本\", \"页面2.0版本\", \"页面3.0版本\"]",[99,100,102],"template",{"v-slot:tab1":101},"",[103,104,111],"pre",{"className":105,"code":107,"filename":108,"language":109,"meta":110},[106],"language-vue","\u003Cscript setup lang=\"ts\">\nimport type { BangumiCollectionItem } from '~\u002Ftypes\u002Fbangumi'\nimport { getPostDate } from '~\u002Futils\u002Ftime'\n\nconst props = defineProps\u003C{\n\tbangumiCollectionItem: BangumiCollectionItem\n}>()\n\nfunction handleClick() {\n\tconst url = `https:\u002F\u002Fbgm.tv\u002Fsubject\u002F${props.bangumiCollectionItem.subject_id}`\n\twindow.open(url, '_blank')\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n\u003Cdiv class=\"banguimItem\" >\n\t\u003Cimg\n\t\tv-if=\"bangumiCollectionItem.subject.images?.common\"\n\t\t:src=\"bangumiCollectionItem.subject.images.common\"\n\t\t:alt=\"bangumiCollectionItem.subject.name\"\n\t\tclass=\"banguimImage\"\n\t>\n\t\u003Cdiv class=\"title\">\n\t\t\u003Ca :href=\"`https:\u002F\u002Fbgm.tv\u002Fsubject\u002F${props.bangumiCollectionItem.subject_id}`\">\n\t\t\t{{ bangumiCollectionItem.subject.name_cn || bangumiCollectionItem.subject.name }}\n\t\t\u003C\u002Fa>\n\t\u003C\u002Fdiv>\n\t\u003Cspan class=\"dateSignpost\">{{ getPostDate(bangumiCollectionItem.updatedd_at) }}\u003C\u002Fspan>\n\t\u003Cspan class=\"score\">\n\t\t\u003Csvg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n\t\t\t\u003Cpath d=\"M12 20.1l5.82 3.682c1.066.675 2.37-.322 2.09-1.584l-1.543-6.926 5.146-4.667c.94-.85.435-2.465-.799-2.567l-6.773-.602L13.29.89a1.38 1.38 0 0 0-2.581 0l-2.65 6.53-6.774.602C.052 8.126-.453 9.74.486 10.59l5.147 4.666-1.542 6.926c-.28 1.262 1.023 2.26 2.09 1.585L12 20.099z\">\u003C\u002Fpath>\n\t\t\u003C\u002Fsvg>\n\t  \t{{ bangumiCollectionItem.subject.score || '暂无' }}\n\t\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped lang=\"scss\">\n\u002F\u002F 变量定义\n$main-color: var(--db-main-color);\n$hover-color: var(--db-hover-color);\n$text-color: var(--db--text-color);\n$text-color-light: var(--db--text-color-light);\n$border-radius: var(--thyuu--size-radius);\n$card-normal-size: var(--thyuu--size-card-normal);\n$small-size: var(--thyuu--size-small);\n$animation: opacity .5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards, filter .7s var(--animation-in);\n\u002F\u002F 卡片样式表\n      .banguimItem {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n        align-content: flex-end;\n        align-items: center;\n        text-align: center;\n        width: 100%;\n        height: 100%;\n        padding: 1em;\n        gap: .5em;\n        margin: 0 20px 20px 0;\n        border-radius: $border-radius;\n        background: #000;\n        overflow: hidden;\n        position: relative;\n        \n        .banguimImage {\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          border-radius: 0;\n          -webkit-mask: linear-gradient(#0006, #000c, #0000);\n          transition: ease-in-out .3s;\n          object-fit: cover;\n          inset: 0;\n        }\n        \n        .title {\n          order: -1;\n          z-index: 1;\n          flex: 100%;\n          position: relative;\n          padding: .5em 1em;\n          margin: 0;\n          border-radius: 1em;\n          line-height: 1;\n          font-weight: 400;\n          color: white;\n          width: auto;\n          margin-top: 2px;\n          font-size: 14px;\n          line-height: 1.4;\n          color: $text-color;\n          \n          &::before {\n            content: \"\\e667\";\n            display: inline-block;\n            text-indent: 0;\n            margin: 0 .25em 0 0;\n            rotate: 45deg;\n            scale: .75;\n            transition: rotate .5s;\n          }\n          \n          a {\n            color: hsl(var(--thyuu--main-color));\n          }\n        }\n        \n        .dateSignpost, .score {\n          position: relative;\n          padding: .5em 1em;\n          margin: 0;\n          border-radius: 1em;\n          line-height: 1;\n          font-weight: 400;\n          color: white;\n          width: auto;\n          background: #f5c518;\n          color: #000;\n          border-radius: 4px;\n          line-height: 1;\n          padding: 3px 5px;\n          font-size: 12px;\n          display: flex;\n          margin-bottom: 2px;\n          font-weight: 900;\n          color: #ffffffb3 !important;\n          background: #ffffff1c !important;\n          -webkit-backdrop-filter: saturate(1.8) blur(20px);\n          backdrop-filter: saturate(1.8) blur(20px);\n          font-size: $small-size !important;\n        }\n        \n        .dateSignpost:after {\n          all: unset;\n          content: '标记';\n          margin: 0 0 0 .5em;\n        }\n        \n        .score {\n          svg {\n            fill: #f5c518;\n            margin-right: 5px;\n          }\n        }\n      }\n\u003C\u002Fstyle>\n","banguim.vue","vue","lang=\"vue\"",[57,112,107],{"__ignoreMap":101},[99,114,115],{"v-slot:tab2":101},[103,116,119],{"className":117,"code":118,"filename":108,"language":109,"meta":110},[106],"\u003Cscript setup lang=\"ts\">\nimport type { CollectionType, ContentType } from '..\u002Fcomposables\u002FuseBangumi'\nimport type { BangumiCollectionItem } from '~\u002Ftypes\u002Fbangumi'\nimport Pagination from '~\u002Fcomponents\u002Fpartial\u002FPagination.vue'\nimport bgmCard from '~\u002Fcomponents\u002FBangumi\u002FbgmCard.vue'\nimport useBangumi from '..\u002Fcomposables\u002FuseBangumi'\nimport { debounce } from 'radash'\n\nconst banguimCard = [{\n  name: '克喵Kemeow',\n  link: 'https:\u002F\u002Fblog-v3.kemeow.top\u002F',\n  type: '页面基础',\n}, {\n  name: '风纪星辰',\n  link: 'https:\u002F\u002Fwww.thyuu.com\u002Fdouban\u002F',\n  type: '页面样式'\n}]\n\nuseSeoMeta({\n\ttitle: '追更历史',\n})\n\nconst layoutStore = useLayoutStore()\nconst appConfig = useAppConfig()\nlayoutStore.setAside(['blog-stats', 'blog-log'])\n\n\u002F\u002F 状态管理增强\nconst route = useRoute()\nconst contentType = ref\u003CContentType>('anime')\nconst collectionType = ref\u003CCollectionType>('wish')\nconst page = ref(1)\nconst { data, error, totalPages, refresh, status } = useBangumi(contentType, collectionType, page)\n\n\u002F\u002F 加载状态控制\nconst isLoading = computed(() => status.value === 'pending')\nconst currentData = ref\u003Cany[]>([])\n\n\u002F\u002F 数据预加载控制\nconst isDataReady = ref(false)\n\n\u002F\u002F 监听数据变化\nwatch([contentType, collectionType], async () => {\n  page.value = 1\n  isDataReady.value = false\n  await refresh()\n})\n\n\u002F\u002F 数据加载完成处理\nwatch(data, (newData) => {\n  currentData.value = newData?.data || []\n  isDataReady.value = true\n}, { immediate: true })\n\n\u002F\u002F 防抖处理连续点击\nconst debouncedRefresh = debounce(refresh, 300)\n\nconst games = computed(() => data.value?.data || [])\n\nconst subjectMap = {\n  book: '书籍',\n  anime: '追番',\n  game: '游戏',\n  music: '音乐',\n}\n\nconst orderMap = {\n  wish: '想看',\n  do: '在看',\n  collect: '看过',\n  on_hold: '搁置',\n  dropped: '抛弃',\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"banguimContainer\">\n    \u003C!-- 导航栏保持原有结构 -->\n    \u003Cdiv class=\"banguimNav\">\n      \u003Cdiv \n        class=\"NavItem JiEun\" \n        v-for=\"(label, key) in subjectMap\" \n        :class=\"{active: contentType === key}\"\n        @click=\"contentType = key as ContentType\"\n      >\n        {{ key }}\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"banguimNav\">\n      \u003Cbutton \n        class=\"typeItem\" \n        v-for=\"(label, key) in orderMap\" \n        :key=\"key\" \n        @click=\"collectionType = key as CollectionType\"\n        :class=\"{active: collectionType === key}\"\n      >\n        {{ label }}\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- 增强版加载状态 -->\n    \u003CTransition name=\"fade\">\n      \u003Cdiv v-if=\"isLoading && !isDataReady\" class=\"loading\">\n        \u003Cdiv class=\"loading-ripple\">\n          \u003Cdiv>\u003C\u002Fdiv>\n          \u003Cdiv>\u003C\u002Fdiv>\n          \u003Cdiv>\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002FTransition>\n\n    \u003C!-- 数据容器优化 -->\n    \u003CTransition name=\"list\" tag=\"div\">\n      \u003Cdiv \n        class=\"banguimCard\" \n        v-show=\"isDataReady\"\n        :key=\"contentType\"\n      >\n        \u003Cdiv class=\"banguimList\" v-if=\"games.length > 0\">\n          \u003CbgmCard\n            v-for=\"game in games\"\n            :key=\"`${game.subject_id}-${contentType}`\"\n            :bangumi-collection-item=\"game\"\n          \u002F>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"banguimEmpty\" v-else-if=\"games.length === 0\">\n          \u003CIcon name=\"ri:folder-open-line\" class=\"error-icon\"\u002F>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002FTransition>\n\n    \u003C!-- 错误提示增强\n    \u003CTransition name=\"fade\">\n      \u003Cdiv v-if=\"error && isDataReady\" class=\"error-wrapper\">\n        \u003Cdiv class=\"error-icon\">⚠️\u003C\u002Fdiv>\n        \u003Cdiv class=\"error-message\">{{ error.message }}\u003C\u002Fdiv>\n        \u003Cbutton @click=\"refresh\">重试\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002FTransition> -->\n\n    \u003C!-- 分页优化 -->\n    \u003CTransition name=\"fade\">\n      \u003CPagination\n        v-if=\"totalPages > 1 && isDataReady\"\n        v-model=\"page\"\n        :total-pages=\"totalPages\"\n        @updated:model-value=\"debouncedRefresh\"\n      \u002F>\n    \u003C\u002FTransition>\n\n    \u003C!-- 版权信息保持原有结构 -->\n    \u003Cdiv class=\"banguimCopyright\">\n      \u003Cdiv class=\"card_info\" v-for=\"item in banguimCard\" :key=\"item.link\">\n        基于\n        \u003Ca class=\"copyright\" :href=\"item.link\">\n          {{ item.name }}\n        \u003C\u002Fa>\n        的{{ item.type }}\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003CPostComment herf=\"\u002Fbanguim\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n\u002F\u002F 变量定义\n$main-color: var(--db-main-color);\n$hover-color: var(--db-hover-color);\n$text-color: var(--db--text-color-light);\n$text-color-light: var(--db--text-color-light);\n$border-radius: var(--thyuu--size-radius);\n$card-normal-size: var(--thyuu--size-card-normal);\n$small-size: var(--thyuu--size-small);\n$animation: opacity .5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards, filter .7s var(--animation-in);\n\n\u002F\u002F 页面样式\n.banguimContainer {\n  margin-top: 20px;\n  margin-left: 1rem;\n  margin-right: 1rem;\n  \n  \u002F\u002F 加载样式\n  .loading {\n    display: flex;\n    justify-content: center;\n    \n    &-ripple {\n      align-items: center;\n      min-height: 50vh;\n      display: inline-flex;\n      position: relative;\n      width: 80px;\n      height: 80px;\n      \n      &:after, &:before {\n        position: absolute;\n        border: 4px solid $main-color;\n        content: \"\";\n        opacity: 1;\n        border-radius: 50%;\n        animation: lds-ripple 1s cubic-bezier(0,.2,.8,1) infinite;\n      }\n    }\n  }\n  \n  \u002F\u002F 错误样式\n  .error {\n    text-align: center;\n    padding: 40px;\n    color: #666;\n    \n    button {\n      margin-top: 10px;\n      padding: 8px 16px;\n      background-color: #00a1d6;\n      color: white;\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n    }\n  }\n  \n  \u002F\u002F 导航样式\n  .banguimNav {\n    padding: 0px 0 20px;\n    justify-self: center;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    \n    .NavItem {\n      font-size: 1em;\n      cursor: pointer;\n      border-bottom: 1px solid transparent;\n      transition: .5s border-color;\n      display: flex;\n      align-items: center;\n      text-transform: capitalize;\n      margin-right: 20px;\n      color: $text-color;\n      \n      &.active {\n        border-color: $main-color;\n      }\n    }\n    .typeItem { \n      margin-right: 10px;\n      cursor: pointer;\n      font-size: 12px;\n      font-weight: 700;\n      border: 1px solid var(--db-border-color);\n      border-radius: 999rem;\n      border-radius: 999rem;\n      padding: 7px 25px;\n      color: var(--db--text-color-light);\n      \u002F\u002F add\n      background: hsl(214deg 100% 50% \u002F 50%);\n      -webkit-backdrop-filter: saturate(1.8) blur(20px);\n      backdrop-filter: saturate(1.8) blur(20px);\n      &.active {\n        color: var(--db-hover-color);\n        border-color: var(--db-hover-color);\n        cursor: not-allowed;\n      }\n    }\n  }\n  \n  \u002F\u002F 卡片容器\n  .banguimCard {\n    .banguimList {\n      position: relative;\n      gap: .5em;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      animation: $animation;\n      transition: .1s;\n    }\n    \u002F\u002F 无数据样式\n    .banguimEmpty {\n      background-repeat: no-repeat;\n      height: 300px;\n      width: 100%;\n      font-size: 4rem;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      \n      .error-icon {\n        color: var(--c-text-secondary);\n        display: flex;\n      }\n    }\n  }\n  \n  \u002F\u002F 版权信息\n  .banguimCopyright {\n    font-size: 12px;\n    text-align: right;\n    margin-top: 20px;\n    color: $text-color-light;\n    \n    .copyright {\n      color: hsl(var(--thyuu--main-color));\n    }\n  }\n}\n\n\u002F\u002F 全局样式\n:root {\n  --banguim--edgelr: 3rem;\n  --animation: opacity .5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards, filter .7s var(--animation-in);\n  --db--text-color: hsl(var(--thyuu--color-font) \u002F var(--thyuu--alpha-font));\n  --thyuu--color-font: 0deg 0% 20%;\n  --thyuu--alpha-font: 100%;\n  --db-main-color: hsl(var(--thyuu--main-color) \u002F 70%);\n  --db-hover-color: hsl(var(--thyuu--main-color) \u002F 70%);\n  --db--text-color: hsl(var(--thyuu--color-font) \u002F var(--thyuu--alpha-font));\n  --db--text-color-light: var(--thyuu--alpha-font);\n  transition: .3s;\n}\n\n\u002F\u002F 动画定义\n@keyframes lds-ripple {\n  0% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 0;\n  }\n  4.9% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 0;\n  }\n  5% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 1;\n  }\n  100% {\n    top: 0px;\n    left: 0px;\n    width: 72px;\n    height: 72px;\n    opacity: 0;\n  }\n}\n\u003C\u002Fstyle>\n",[57,120,118],{"__ignoreMap":101},[99,122,123],{"v-slot:tab3":101},[103,124,127],{"className":125,"code":126,"filename":108,"language":109,"meta":110},[106],"\u003Cscript setup lang=\"ts\">\nimport type { CollectionType, ContentType } from '..\u002Fcomposables\u002FuseBangumi'\n\u002F\u002F import Pagination from '~\u002Fcomponents\u002Fpartial\u002FPagination.vue'\nimport bgmCard from '~\u002Fcomponents\u002FBangumi\u002FbgmCard.vue'\nimport useBangumi from '..\u002Fcomposables\u002FuseBangumi'\n\nconst banguimCard = [{\n  name: '克喵Kemeow',\n  link: 'https:\u002F\u002Fblog-v3.kemeow.top\u002F',\n  type: '页面基础',\n}, {\n  name: '风纪星辰',\n  link: 'https:\u002F\u002Fwww.thyuu.com\u002Fdouban\u002F',\n  type: '页面样式'\n}]\n\nuseSeoMeta({\n  title: '追更历史',\n})\n\nconst layoutStore = useLayoutStore()\nconst appConfig = useAppConfig()\nlayoutStore.setAside(['blog-stats', 'blog-log'])\n\n\u002F\u002F 状态管理增强\nconst route = useRoute()\nconst contentType = ref\u003CContentType>('anime')\nconst collectionType = ref\u003CCollectionType>('wish')\nconst page = ref(1)\nconst { data, error, totalPages, refresh, status } = useBangumi(contentType, collectionType, page)\n\n\u002F\u002F 加载状态控制\nconst isLoading = computed(() => status.value === 'pending')\nconst isDataReady = ref(false)\nconst showContent = ref(false)\n\n\u002F\u002F 监听数据变化\nwatch([contentType, collectionType], async () => {\n  page.value = 1\n  isDataReady.value = false\n  showContent.value = false\n  await refresh()\n})\n\n\u002F\u002F 数据加载完成处理\nwatch(status, (newStatus) => {\n  if (newStatus === 'success') {\n    isDataReady.value = true\n    \u002F\u002F 添加短暂延迟确保DOM更新\n    setTimeout(() => {\n      showContent.value = true\n    }, 100)\n  }\n}, { immediate: true })\n\n\u002F\u002F 修复防抖实现\n\u002F\u002F const debouncedRefresh = debounce((newPage: number) => {\n\u002F\u002F   page.value = newPage\n\u002F\u002F   refresh()\n\u002F\u002F }, 300, { leading: true, trailing: false }) \u002F\u002F 添加配置选项\n\nconst games = computed(() => data.value?.data || [])\n\nconst subjectMap = {\n  book: '书籍',\n  anime: '追番',\n  game: '游戏',\n  music: '音乐',\n}\n\nconst orderMap = {\n  wish: '想看',\n  do: '在看',\n  collect: '看过',\n  on_hold: '搁置',\n  dropped: '抛弃',\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"banguimContainer\">\n    \u003C!-- 导航栏保持原有结构 -->\n    \u003Cdiv class=\"banguimNav\">\n      \u003Cdiv \n        class=\"NavItem JiEun\" \n        v-for=\"(label, key) in subjectMap\" \n        :key=\"key\"\n        :class=\"{active: contentType === key}\"\n        @click=\"contentType = key as ContentType\"\n      >\n        {{ label }} \u003C!-- 显示中文标签 -->\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"banguimNav\">\n      \u003Cbutton \n        class=\"typeItem\" \n        v-for=\"(label, key) in orderMap\" \n        :key=\"key\" \n        @click=\"collectionType = key as CollectionType\"\n        :class=\"{active: collectionType === key}\"\n      >\n        {{ label }}\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- 增强版加载状态 -->\n    \u003CTransition name=\"fade\">\n      \u003Cdiv v-if=\"isLoading && !showContent\" class=\"loading\">\n        \u003Cdiv class=\"loading-ripple\">\n          \u003Cdiv>\u003C\u002Fdiv>\n          \u003Cdiv>\u003C\u002Fdiv>\n          \u003Cdiv>\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002FTransition>\n\n    \u003C!-- 数据容器优化 -->\n    \u003CTransition name=\"list\" mode=\"out-in\">\n      \u003Cdiv \n        class=\"banguimCard\" \n        v-if=\"showContent\"\n        :key=\"`${contentType}-${collectionType}-${page}`\"\n      >\n        \u003Cdiv class=\"banguimList\" v-if=\"games.length > 0\">\n          \u003CbgmCard\n            v-for=\"game in games\"\n            :key=\"`${game.subject_id}-${contentType}`\"\n            :bangumi-collection-item=\"game\"\n          \u002F>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"banguimEmpty\" v-else>\n          \u003Cp>暂无数据\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002FTransition>\n\n    \u003C!-- 错误提示增强 -->\n    \u003CTransition name=\"fade\">\n      \u003Cdiv v-if=\"error && showContent\" class=\"error-wrapper\">\n        \u003Cdiv class=\"error-icon\">⚠️\u003C\u002Fdiv>\n        \u003Cdiv class=\"error-message\">{{ error.message }}\u003C\u002Fdiv>\n        \u003CZButton @click=\"refresh\">重试\u003C\u002FZButton>\n      \u003C\u002Fdiv>\n    \u003C\u002FTransition>\n\n    \u003C!-- 版权信息保持原有结构 -->\n    \u003Cdiv class=\"banguimCopyright\">\n      \u003Cdiv class=\"card_info\" v-for=\"item in banguimCard\" :key=\"item.link\">\n        基于\n        \u003Ca class=\"copyright\" :href=\"item.link\" target=\"_blank\">\n          {{ item.name }}\n        \u003C\u002Fa>\n        的{{ item.type }}\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003CPostComment herf=\"\u002Fbanguim\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n\u002F\u002F 变量定义\n$main-color: var(--db-main-color);\n$hover-color: var(--db-hover-color);\n$text-color: var(--db--text-color-light);\n$text-color-light: var(--db--text-color-light);\n$border-radius: var(--thyuu--size-radius);\n$card-normal-size: var(--thyuu--size-card-normal);\n$small-size: var(--thyuu--size-small);\n$animation: opacity .5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards, filter .7s var(--animation-in);\n\n\u002F\u002F 页面样式\n.banguimContainer {\n  margin-top: 20px;\n  margin-left: 1rem;\n  margin-right: 1rem;\n  \n  \u002F\u002F 加载样式\n  .loading {\n    display: flex;\n    justify-content: center;\n    \n    &-ripple {\n      align-items: center;\n      min-height: 50vh;\n      display: inline-flex;\n      position: relative;\n      width: 80px;\n      height: 80px;\n      \n      &:after, &:before {\n        position: absolute;\n        border: 4px solid $main-color;\n        content: \"\";\n        opacity: 1;\n        border-radius: 50%;\n        animation: lds-ripple 1s cubic-bezier(0,.2,.8,1) infinite;\n      }\n    }\n  }\n  \n  \u002F\u002F 错误样式\n  .error {\n    text-align: center;\n    padding: 40px;\n    color: #666;\n    \n    button {\n      margin-top: 10px;\n      padding: 8px 16px;\n      background-color: #00a1d6;\n      color: white;\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n    }\n  }\n  \n  \u002F\u002F 导航样式\n  .banguimNav {\n    padding: 0px 0 20px;\n    justify-self: center;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    \n    .NavItem {\n      font-size: 1em;\n      cursor: pointer;\n      border-bottom: 1px solid transparent;\n      transition: .5s border-color;\n      display: flex;\n      align-items: center;\n      text-transform: capitalize;\n      margin-right: 20px;\n      color: $text-color;\n      \n      &.active {\n        border-color: $main-color;\n      }\n    }\n    .typeItem { \n      margin-right: 10px;\n      cursor: pointer;\n      font-size: 12px;\n      font-weight: 700;\n      border: 1px solid var(--db-border-color);\n      border-radius: 999rem;\n      border-radius: 999rem;\n      padding: 7px 25px;\n      color: var(--db--text-color-light);\n      \u002F\u002F add\n      background: hsl(214deg 100% 50% \u002F 50%);\n      -webkit-backdrop-filter: saturate(1.8) blur(20px);\n      backdrop-filter: saturate(1.8) blur(20px);\n      &.active {\n        color: var(--db-hover-color);\n        border-color: var(--db-hover-color);\n        cursor: not-allowed;\n      }\n    }\n  }\n  \n  \u002F\u002F 卡片容器\n  .banguimCard {\n    .banguimList {\n      position: relative;\n      gap: .5em;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      animation: $animation;\n      transition: .1s;\n    }\n    \u002F\u002F 无数据样式\n    .banguimEmpty {\n      background-repeat: no-repeat;\n      height: 300px;\n      width: 100%;\n      font-size: 4rem;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      \n      .error-icon {\n        color: var(--c-text-secondary);\n        display: flex;\n      }\n    }\n  }\n  \n  \u002F\u002F 版权信息\n  .banguimCopyright {\n    font-size: 12px;\n    text-align: right;\n    margin-top: 20px;\n    color: $text-color-light;\n    \n    .copyright {\n      color: hsl(var(--thyuu--main-color));\n    }\n  }\n}\n\n\u002F\u002F 全局样式\n:root {\n  --banguim--edgelr: 3rem;\n  --animation: opacity .5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards, filter .7s var(--animation-in);\n  --db--text-color: hsl(var(--thyuu--color-font) \u002F var(--thyuu--alpha-font));\n  --thyuu--color-font: 0deg 0% 20%;\n  --thyuu--alpha-font: 100%;\n  --db-main-color: hsl(var(--thyuu--main-color) \u002F 70%);\n  --db-hover-color: hsl(var(--thyuu--main-color) \u002F 70%);\n  --db--text-color: hsl(var(--thyuu--color-font) \u002F var(--thyuu--alpha-font));\n  --db--text-color-light: var(--thyuu--alpha-font);\n  transition: .3s;\n}\n\n\u002F\u002F 动画定义\n@keyframes lds-ripple {\n  0% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 0;\n  }\n  4.9% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 0;\n  }\n  5% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 1;\n  }\n  100% {\n    top: 0px;\n    left: 0px;\n    width: 72px;\n    height: 72px;\n    opacity: 0;\n  }\n}\n\u003C\u002Fstyle>\n",[57,128,126],{"__ignoreMap":101},[91,130,131],{"id":131},"追更页面主体卡片渲染展示模块",[95,133,135,156],{":tabs":134},"[\"卡片1.0版本\", \"卡片2.0版本\"]",[99,136,137,150],{"v-slot:tab1":101},[138,139,142,147],"alert",{":card":140,"type":141},"true","warning",[99,143,144],{"v-slot:title":101},[14,145,146],{},"提示",[14,148,149],{},"该版本已被弃用，不再维护",[103,151,154],{"className":152,"code":107,"filename":153,"language":109,"meta":110},[106],"bgmCard.vue",[57,155,107],{"__ignoreMap":101},[99,157,158],{"v-slot:tab2":101},[103,159,162],{"className":160,"code":161,"filename":153,"language":109,"meta":110},[106],"\u003Cscript setup lang=\"ts\">\nimport type { BangumiCollectionItem } from '~\u002Ftypes\u002Fbangumi'\nimport { getPostDate } from '~\u002Futils\u002Ftime'\n\nconst props = defineProps\u003C{\n\tbangumiCollectionItem: BangumiCollectionItem\n}>()\n\nfunction handleClick() {\n\tconst url = `https:\u002F\u002Fbgm.tv\u002Fsubject\u002F${props.bangumiCollectionItem.subject_id}`\n\twindow.open(url, '_blank')\n}\n\n\u002F\u002F 计算满星数量：score 除以 2 后向下取整\nconst fullStars = Math.floor(props.bangumiCollectionItem.subject.score \u002F 2);\n\nconst score = Math.floor(props.bangumiCollectionItem.subject.score); \u002F\u002F 动态评分(全局评分)\nconst rate = Math.floor(props.bangumiCollectionItem.rate); \u002F\u002F 动态评分(全局评分)\n\nconst scoreClass = computed(() => (index: number) => {\n  \u002F\u002F 将评分值乘以2，实现半星精度（例如3.5 * 2=7，表示3个全星+1个半星）\n  const scoreTotal = score \u002F 2;\n  const integerPartScore = Math.floor(scoreTotal); \u002F\u002F 总星数的整数部分（包含半星换算）\n  const hasHalfScore = scoreTotal % 1 !== 0; \u002F\u002F 是否存在半星\n\n  \u002F\u002F 根据索引判断星星状态\n  if (index \u003C integerPartScore) {\n    return 'ri:star-fill';     \u002F\u002F 全星\n  } else if (index === integerPartScore && hasHalfScore) {\n    return 'ri:star-half-line'; \u002F\u002F 半星（仅在有余数时显示）\n  } else {\n    return 'ri:star-line';     \u002F\u002F 空星\n  }\n});\n\nconst rateClass = computed(() => (rate: number) => {\n  const rateTotal = rate \u002F2;\n  const integerPartRate = Math.floor(rateTotal); \u002F\u002F 总星数的整数部分（包含半星换算）\n  const hasHalfRate = rateTotal % 1 !== 0; \u002F\u002F 是否存在半星\n  if (rate \u003C integerPartRate) {\n    return 'ri:star-fill';     \u002F\u002F 全星\n  } else if (rate === integerPartRate && hasHalfRate) {\n    return 'ri:star-half-line'; \u002F\u002F 半星（仅在有余数时显示）\n  } else {\n    return 'ri:star-line';     \u002F\u002F 空星\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"bgmInfoMainCard card-layout-horizontal\">\n    \u003Cdiv class=\"bgmInfoImageWarrper card-image-landscape\">\n      \u003CNuxtImg :src=\"bangumiCollectionItem.subject?.images.common\" :alt=\"bangumiCollectionItem.subject.name\" class=\"banguimImage\"\u002F>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"bgmInfoConnect\">\n      \u003Csection class=\"bgmInfoMainSection\">\n        \u003Cdiv class=\"title\">\n          \u003Ch3 class=\"fontColor\">\n            {{ bangumiCollectionItem.subject.name_cn }}\n            \u003Csup>\n              {{ bangumiCollectionItem.subject.name }}\n            \u003C\u002Fsup>\n          \u003C\u002Fh3>\n        \u003C\u002Fdiv>\n        \u003Cp class=\"desc\">\n          {{ bangumiCollectionItem.subject.short_summary }}\n        \u003C\u002Fp>\n      \u003C\u002Fsection>\n      \u003Csection class=\"bgmInfoSection\">\n        \u003Cdiv class=\"infoStars\">\n          \u003Cdiv class=\"ratingStarsIcon\">\n            \u003CIcon class=\"star-icon star-filled\" v-for=\"(_ , index) in 5\"  :key=\"index\" :name=\"scoreClass(index)\" \u002F>\n          \u003C\u002Fdiv>\n          \u003Cdiv class=\"ratingStarsNumber\">\n            {{ bangumiCollectionItem.subject.score }}\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"infoTagList\">\n          \u003Cspan class=\"infoTag\" v-for=\"tags in bangumiCollectionItem.subject.tags\">\n            {{ tags.name }}\n            \u003Csup> {{ tags.count }} \u003C\u002Fsup>\n          \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"infoCombinedList\">\n          \u003Cdiv class=\"infoCombinedCard\">\n            \u003Cdiv class=\"label\">\n              话数:\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"value\">\n              {{ bangumiCollectionItem.subject.eps }}\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n          \u003Cdiv class=\"infoDate\">\n            \u003CIcon name=\"ph:calendar-dots-bold\" \u002F>\n            {{ getPostDate(bangumiCollectionItem.updatedd_at) }}\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"footer\">\n          \u003Cdiv class=\"source-badge\">\n            \u003Cdiv class=\"source-name\">\n              \u003CIcon name=\"ri:bilibili-line\" class=\"source-icon\" \u002F>\n              Bangumi\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n          \u003Cbutton class=\"view-button\" @click=\"handleClick()\">\n            \u003Cspan>查看详情\u003C\u002Fspan>\n            \u003CIcon name=\"ri:arrow-right-line\" class=\"buttonIcon\" \u002F>\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      \u003C\u002Fsection>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n  .bgmInfoMainCard {\n    cursor: pointer;\n    display: flex;\n    background: var(--ld-bg-card);\n    border: 1px solid var(--c-border);\n    border-radius: 0.75em;\n    margin: 1.5em 0px;\n    overflow: hidden;\n    transition: border-color 0.2s;\n    @media (max-width: 480px) {\n      margin: 0.75em 0px;\n      gap: 0.5em;\n      padding: 0.25em;\n    }\n    @media (max-width: 786px) {\n      flex-direction: column;\n    }\n\n    .bgmInfoImageWarrper {\n      flex-shrink: 0;\n      position: relative;\n      background: var(--c-border);\n      border-radius: 0.5em;\n      overflow: hidden;\n      @media (max-width: 480px) {\n        height: 320px;\n        width: 100%;\n      }\n      @media (max-width: 768px) {\n        height: 360px;\n        min-width: unset;\n        width: 100%;\n      }\n\n      .banguimImage {\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n        width: 100%;\n        background: var(--ld-bg);\n      }\n    }\n    .bgmInfoConnect {\n      align-items: start;\n      display: grid;\n      grid-template-columns: 1.5fr 1fr;\n      gap: 1em;\n      @media (max-width: 768px) {\n        gap: .75em;\n        grid-template-columns: 1fr;\n      }\n\n      .bgmInfoMainSection {\n        display: flex;\n        flex-direction: column;\n        min-width: 0px;\n        gap: 0.5em;\n\n        .title {\n          display: flex;\n          flex-direction: column;\n          gap: 0.25em;\n\n          .fontColor {\n            color: var(--c-text);\n            font-family: var(--font-basic, sans-serif);\n            font-size: 1.25em;\n            font-weight: 600;\n            line-height: 1.3;\n            word-break: break-word;\n            margin: 0px;\n            sup {\n              opacity: 0.6;\n              font-size: 75%;\n              line-height: 0;\n              vertical-align: baseline;\n            }\n          }\n        }\n\n        .desc {\n          display: -webkit-box;\n          -webkit-line-clamp: 5;\n          line-height: 1.5;\n          -webkit-box-orient: vertical;\n          overflow: hidden;\n        }\n      }\n\n      .bgmInfoSection {\n        display: flex;\n        flex-direction: column;\n        font-size: 0.875em;\n        gap: 0.5em;\n\n        .infoStars {\n          align-items: center;\n          background: linear-gradient(135deg, color-mix(in srgb, #ffc107 8%, transparent), color-mix(in srgb, #ffc107 3%, transparent));\n          border: 1px solid color-mix(in srgb, #ffc107 20%, transparent);\n          border-radius: .5em;\n          display: flex;\n          gap: .5em;\n          margin-bottom: .5em;\n          padding: .25em .5em;\n          position: relative;\n          ::before {\n            background: linear-gradient(135deg, color-mix(in srgb, #ffc107 15%, transparent), transparent);\n            border-radius: .5em;\n            content: \"\";\n            inset: 0;\n            opacity: 0;\n            position: absolute;\n            transition: opacity .2s ease;\n          }\n\n          .ratingStarsIcon {\n            display: flex;\n            gap: 2px;\n\n            .star-icon.star-filled {\n              animation: star-pulse-9e9bd9dc 2s ease-in-out infinite;\n              color: #ffc107;\n            }\n            .star-icon {\n              filter: drop-shadow(0 1px 2px rgba(255, 193, 7, .3));\n              font-size: 1.1em;\n              height: 1em;\n              transition: all .2s ease;\n              width: 1em;\n            }\n          }\n\n          .ratingStarsNumber {\n            background: linear-gradient(135deg, var(--c-text), color-mix(in srgb, #ffc107 30%, var(--c-text)));\n            background-clip: text;\n            -webkit-background-clip: text;\n            color: var(--c-text);\n            font-size: .875em;\n            font-weight: 700;\n            -webkit-text-fill-color: transparent;\n            margin-left: .25em;\n            position: relative;\n            text-shadow: 0 1px 2px rgba(0, 0, 0, .1);\n\n::after {\n  background: linear-gradient(90deg, #ffc107, transparent);\n  bottom: -2px;\n  content: \"\";\n  height: 1px;\n  left: 0;\n  opacity: .6;\n  position: absolute;\n  right: 0;\n}\n}\n}\n.infoTagList {\ndisplay: flex;\nflex-wrap: wrap;\ngap: 0.25em;\nmargin: 0px;\n\n.infoTag {\ncolor: var(--c-primary);\ndisplay: inline-block;\nfont-size: 0.75em;\nfont-weight: 500;\nbackground: color-mix(in srgb, var(--c-primary) 15%, transparent);\nborder-radius: 0.25em;\npadding: 0.25em 0.5em;\nwhite-space: nowrap;\n\nsup {\n  opacity: 0.6;\n  top: -0.5em;\n  font-size: 10px;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n}\n}\n\n.infoCombinedList {\nalign-items: center;\ndisplay: flex;\nflex-wrap: wrap;\nfont-size: 0.875em;\ngap: 0.75em;\n@media (max-width: 480px) {\nalign-items: flex-start;\nflex-direction: column;\nfont-size: .75em;\ngap: .25em;\n\n>:not(.footer) {\n  margin-bottom: .25em;\n}\n}\n@media (max-width: 768px) {\ngap: .5rem;\n}\n\n.infoCombinedCard {\nalign-items: center;\ndisplay: flex;\ngap: 0.25em;\n\n.label {\n  color: var(--c-text-2);\n  font-weight: 500;\n}\n.value {\n  color: var(--c-text);\n  font-weight: 600;\n}\n}\n.infoDate {\nalign-items: center;\ncolor: var(--c-text-2);\ndisplay: flex;\ngap: 0.25em;\n}\n}\n}\n.footer {\nalign-items: center;\ndisplay: flex;\nflex-wrap: wrap;\njustify-content: space-between;\nmargin-top: auto;\npadding-top: 0.5em;\nborder-top: 1px solid var(--c-border);\ngap: 1em;\n@media (max-width: 480px) {\nalign-items: stretch;\nflex-direction: column;\ngap: .5em;\npadding-top: .25em;\n}\n@media (max-width: 768px) {\ngap: .75rem\n}\n\n.source-badge {\nalign-items: center;\ncolor: var(--c-text-2);\ndisplay: flex;\nfont-size: 0.875em;\nfont-weight: 500;\ngap: 0.25em;\n}\n.view-button {\nalign-items: center;\ncursor: pointer;\ndisplay: flex;\nfont-size: 0.875em;\nfont-weight: 500;\nbackground: var(--c-border);\nborder-width: initial;\nborder-style: none;\nborder-color: initial;\nborder-image: initial;\nborder-radius: 0.25em;\ngap: 0.25em;\npadding: 0.25em 0.5em;\ntransition: 0.2s;\n@media (max-width: 480px) {\nfont-size: .75em;\nmin-height: 36px;\npadding: .25em;\n}\n@media (max-width: 768px) {\njustify-content: center;\nwidth: 100%;\n}\n}\n}\n}\n}\n.card-layout-horizontal {\nalign-items: stretch;\ndisplay: flex;\nwidth: 100%;\ngap: 1em;\npadding: 0.75em;\n}\n.card-image-landscape {\nheight: 200px;\nmin-width: 150px;\nwidth: 150px;\n}\n.bgmInfoConnect {\ndisplay: flex;\nflex-direction: column;\njustify-content: space-between;\nmin-width: 0px;\nflex: 1 1 0%;\ngap: 0.5em;\n}\n.desc, .card-subtitle {\ncolor: var(--c-text-2);\nfont-size: 0.9375em;\nmargin: 0px;\n}\n.source-name, .view-button {\ncolor: var(--c-text);\nwhite-space: nowrap;\n}\n@media (max-width: 768px) {\n.card-layout-horizontal {\nflex-direction: column;\ngap: 0.75em;\npadding: 0.5em;\n}\n}\n\u003C\u002Fstyle>\n",[57,163,161],{"__ignoreMap":101},[91,165,166],{"id":166},"追更页面全局api加载模块",[103,168,175],{"className":169,"code":171,"filename":172,"language":173,"meta":174},[170],"language-ts","\u002F\u002F import type { BangumiApiResponse } from '..\u002Ftypes\u002Fbangumi'\n\n\u002F\u002F export type ContentType = 'anime' | 'game' | 'real' | 'book' | 'music'\n\u002F\u002F export type CollectionType = keyof typeof TYPE_ID_MAP\n\n\u002F\u002F export const ITEMS_PER_PAGE = 20\n\n\u002F\u002F const TYPE_ID_MAP = {\n\u002F\u002F \twish: 1,\n\u002F\u002F \tcollect: 2,\n\u002F\u002F \tdo: 3,\n\u002F\u002F } as const\n\n\u002F\u002F export default function useBangumiCollection(\n\u002F\u002F \tcontentType: ContentType = 'anime',\n\u002F\u002F \tcollectionType: Ref\u003CCollectionType> = ref('wish'),\n\u002F\u002F \tpage: Ref\u003Cnumber> = ref(1),\n\u002F\u002F ) {\n\u002F\u002F \tconst username = 'kemiao'\n\n\u002F\u002F \tconst subjectType = computed(() => contentType === 'anime' ? 2 : contentType === 'game' ? 4 : contentType === 'book' ? 1 : contentType === 'music' ? 3 : 6)\n\u002F\u002F \tconst typeId = computed(() => TYPE_ID_MAP[toValue(collectionType)])\n\u002F\u002F \tconst offset = computed(() => (page.value - 1) * ITEMS_PER_PAGE)\n\n\u002F\u002F \tconst { data, status, error } = useFetch\u003CBangumiApiResponse>(\n\u002F\u002F \t\t() => {\n\u002F\u002F \t\t\treturn `https:\u002F\u002Fapi.bgm.tv\u002Fv0\u002Fusers\u002F${username}\u002Fcollections?subject_type=${subjectType.value}&type=${typeId.value}&limit=${ITEMS_PER_PAGE}&offset=${offset.value}`\n\u002F\u002F \t\t},\n\u002F\u002F \t\t{\n\u002F\u002F \t\t\tkey: () =>\n\u002F\u002F \t\t\t\t`bangumi-${contentType}-${collectionType.value}-page-${page.value}`,\n\u002F\u002F \t\t},\n\u002F\u002F \t)\n\n\u002F\u002F \tconst totalPages = computed(() =>\n\u002F\u002F \t\tdata.value ? Math.ceil(data.value.total \u002F ITEMS_PER_PAGE) : 0,\n\u002F\u002F \t)\n\n\u002F\u002F \treturn {\n\u002F\u002F \t\tdata,\n\u002F\u002F \t\tstatus,\n\u002F\u002F \t\terror,\n\u002F\u002F \t\ttotalPages,\n\u002F\u002F \t}\n\u002F\u002F }\nimport type { BangumiApiResponse } from '~\u002Ftypes\u002Fbangumi'\n\nexport type ContentType = keyof typeof TYPE_SUBJECT_MAP\nexport type CollectionType = keyof typeof TYPE_ID_MAP\n\nexport const ITEMS_PER_PAGE = 20\n\nconst TYPE_SUBJECT_MAP = {\n\tbook: 1,\n\tanime: 2,\n\tmusic: 3,\n\tgame: 4,\n} as const\n\nconst TYPE_ID_MAP = {\n\twish: 1,\n\tcollect: 2,\n\tdo: 3,\n\ton_hold: 4,\n\tdropped: 5,\n} as const\n\nexport default function useBangumiCollection(\n\tcontentType: Ref\u003CContentType> = ref('anime'),\n\tcollectionType: Ref\u003CCollectionType> = ref('wish'),\n\tpage: Ref\u003Cnumber> = ref(1),\n) {\n\tconst username = '1152095'\n\n\tconst subjectType = computed(() => TYPE_SUBJECT_MAP[toValue(contentType)])\n\tconst typeId = computed(() => TYPE_ID_MAP[toValue(collectionType)])\n\tconst offset = computed(() => (page.value - 1) * ITEMS_PER_PAGE)\n\n\tconst { data, status, error, refresh } = useFetch\u003CBangumiApiResponse>(\n\t\t() => {\n\t\t\treturn `https:\u002F\u002Fapi.bgm.tv\u002Fv0\u002Fusers\u002F${username}\u002Fcollections?subject_type=${subjectType.value}&type=${typeId.value}&limit=${ITEMS_PER_PAGE}&offset=${offset.value}`\n\t\t},\n\t\t{\n\t\t\tkey: () =>\n\t\t\t\t`bangumi-${contentType}-${collectionType.value}-page-${page.value}`,\n\t\t},\n\t)\n\n\tconst totalPages = computed(() =>\n\t\tdata.value ? Math.ceil(data.value.total \u002F ITEMS_PER_PAGE) : 0,\n\t)\n\n\treturn {\n\t\tdata,\n\t\tstatus,\n\t\terror,\n\t\ttotalPages,\n\t\trefresh,\n\t}\n}\n","useBangumi.ts","ts","lang=\"ts\"",[57,176,171],{"__ignoreMap":101},[91,178,179],{"id":179},"追更页面全局数据类型及数据存储库",[103,181,185],{"className":182,"code":183,"filename":184,"language":173,"meta":174},[170],"\u002F\u002F Bangumi API 响应类型\nexport interface BangumiApiResponse {\n\tdata: BangumiCollectionItem[]\n\ttotal: number\n\tlimit: number\n\toffset: number\n}\n\n\u002F\u002F 单个收藏项\nexport interface BangumiCollectionItem {\n\tupdatedd_at: string \u002F\u002F ISO 8601 格式时间\n\tcomment: string | null\n\ttags: Tag[]\n\tsubject: Subject\n\tsubject_id: number\n\tvol_status: number\n\tep_status: number\n\tsubject_type: number \u002F\u002F 2=动画，4=游戏\n\ttype: number \u002F\u002F 收藏类型\n\trate: number \u002F\u002F 用户评分\n\tprivate: boolean\n}\n\n\u002F\u002F 作品主体信息\nexport interface Subject {\n\tdate: string \u002F\u002F YYYY-MM-DD\n\timages: {\n\t\tsmall: string\n\t\tgrid: string\n\t\tlarge: string\n\t\tmedium: string\n\t\tcommon: string\n\t}\n\tname: string\u002F\u002F 日文原名\n\tname_cn: string\u002F\u002F 中文译名\n\tshort_summary: string\n\ttags: Tag[]\n\tscore: number \u002F\u002F 社区评分\n\ttype: number \u002F\u002F 作品类型\n\tid: number \u002F\u002F 作品ID\n\teps: number \u002F\u002F 集数\n\tvolumes: number \u002F\u002F 卷数\n\tcollection_total: number \u002F\u002F 收藏人数\n\trank: number \u002F\u002F 排名\n}\n\nexport interface Tag {\n\tname: string\n\tcount: number\n\ttotal_cont: number\n}\n","bangumi.ts",[57,186,183],{"__ignoreMap":101},[10,188,189],{"id":189},"效果展示",[95,191,193,200],{":tabs":192},"[\"卡片1.0版本展示\", \"卡片2.0版本展示\"]",[99,194,195],{"v-slot:tab1":101},[196,197],"pic",{"caption":198,"src":199},"卡片1.0版本展示（已不再使用）","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpost\u002Fimg\u002FbanguimPageAddCover\u002FbanguimPageAddCover\u002Fversion1.png",[99,201,202],{"v-slot:tab2":101},[196,203],{"caption":204,"src":199},"卡片2.0版本展示",{"title":101,"searchDepth":206,"depth":206,"links":207},4,[208,210,211,212,219],{"id":12,"depth":209,"text":12},2,{"id":32,"depth":209,"text":32},{"id":51,"depth":209,"text":51},{"id":89,"depth":209,"text":89,"children":213},[214,216,217,218],{"id":93,"depth":215,"text":93},3,{"id":131,"depth":215,"text":131},{"id":166,"depth":215,"text":166},{"id":179,"depth":215,"text":179},{"id":189,"depth":209,"text":189},[221],"站点魔改","2025-12-01 10:00:00","该文章详细介绍了基于Vue3+TypeScript开发的豆瓣追更记录系统，采用组件化架构实现两栏筛选菜单、动态加载动画和卡片式作品展示，通过Pinia状态管理+Vite构建工具实现数据流管理，集成防抖加载、虚拟滚动等性能优化方案。",false,"md","\u002Fimage\u002FPostCover\u002FbanguimPage.avif",{"slots":228},{},true,"\u002F2025\u002F12\u002Fbanguimpageadd",null,{"text":233,"minutes":234,"time":235,"words":236},"23 min read",22.175,1330500,4435,9,{"title":5,"description":223},{"loc":230},"posts\u002F2025\u002F12\u002FbanguimPageAdd",[242,243,244],"Nuxt","魔改","美化","tech","2025-12-01 20:49:00","YG6d93dVLlC91H7h0YKXFo3JX7hH4xSCqZxPUYQDSo4",[249,265,280,294,308,321,334,346,360,372,383,397,411,426,438,455,459,474,489,504,519,535,552,568,580,594,608,620,634,646,656,668,680,693,704,715,728,737],{"categories":250,"date":252,"description":253,"image":231,"path":254,"readingTime":255,"recommend":231,"tags":260,"title":263,"type":245,"updated":264},[251],"技术探索","2023-12-06 12:45:00","本篇转载三种不同方案（已经放好原文章链接）","\u002F2023\u002F03\u002Fessaythree",{"text":256,"minutes":257,"time":258,"words":259},"48 min read",47.34,2840400,9468,[261,262,244],"hexo","butterfly","即刻短文的三种部署方案","2023-12-07 14:09:00",{"categories":266,"date":267,"description":268,"image":269,"path":270,"readingTime":271,"recommend":276,"tags":277,"title":278,"type":245,"updated":279},[221],"2024-04-19 10:00:00","友链页面美化以及添加功能","\u002Fimage\u002FPostCover\u002FflinkPage.avif","\u002F2024\u002F04\u002Fflinkpagemeihua",{"text":272,"minutes":273,"time":274,"words":275},"11 min read",10.8,648000,2160,1,[261,262],"友链魔改","2025-04-19 12:09:00",{"categories":281,"date":282,"description":283,"image":284,"path":285,"readingTime":286,"recommend":276,"tags":291,"title":292,"type":245,"updated":293},[221],"2025-02-05 09:00:00","这篇文章讲述在博客中对导航栏进行修改，并添加多个产品页面地址，且采用安知鱼的导航栏CSS样式表。","\u002Fimage\u002FPostCover\u002FnavMuogai.avif","\u002F2025\u002F02\u002Fbutterflynavadd",{"text":287,"minutes":288,"time":289,"words":290},"9 min read",8.585,515100,1717,[261,262],"butterfly导航栏修改方案","2025-03-05 10:00:00",{"categories":295,"date":296,"description":297,"image":298,"path":299,"readingTime":300,"recommend":276,"tags":305,"title":306,"type":245,"updated":307},[221],"2025-02-27 10:10:55","本篇文章讲述了如何在博客的底部模块进行魔改添加图标、来源图片、返回顶部以及建站时间，对建站时间进行js内联到模块中。","\u002Fimage\u002FPostCover\u002FfooterMeihua.avif","\u002F2025\u002F02\u002Ffooterqcqxstyle",{"text":301,"minutes":302,"time":303,"words":304},"4 min read",3.31,198600,662,[261,262,244],"轻笑底部美化","2025-02-28 10:00:00",{"categories":309,"date":310,"description":311,"image":312,"path":313,"readingTime":314,"recommend":231,"tags":318,"title":319,"type":245,"updated":320},[221],"2025-03-24 08:00:09","这篇简述如何给自己博客中的归档、分类、标签页三个页面的文章卡片加上所属分类和标签，并说明了具体的实践环境，以最大限度的方式进行CSS美化。但也请注意要经常备份以免出现大量错误。","\u002Fimage\u002FPostCover\u002FarchiveMougai.avif","\u002F2025\u002F03\u002Farchivemougai",{"text":301,"minutes":315,"time":316,"words":317},3.08,184800,616,[261,262],"给页面加上所属分类和标签以及美化","2025-03-24 10:56:09",{"categories":322,"date":323,"description":324,"image":325,"path":326,"readingTime":327,"recommend":231,"tags":331,"title":332,"type":245,"updated":333},[221],"2025-03-05 08:00:00","这篇文章讲述如何给自己博客中的归档、分类、标签页三个页面的文章卡片添加数字来进行编排，以及对添加的数字进行CSS美化，但也请注意要经常备份以免出现错误。","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_29.avif?v=20260104","\u002F2025\u002F03\u002Fartice-sort",{"text":301,"minutes":328,"time":329,"words":330},3.48,208800,696,[261,262],"美化文章卡片显示数字","2025-03-06 18:00:00",{"categories":335,"date":323,"description":336,"image":337,"path":338,"readingTime":339,"recommend":231,"tags":344,"title":345,"type":245,"updated":333},[221],"这篇文章讲述如何在页面中添加模块以及使用CSS添加颜色以及背景图片。","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_21.avif","\u002F2025\u002F03\u002Fbackgroud-qcqx",{"text":340,"minutes":341,"time":342,"words":343},"1 min read",0.71,42600,142,[261,262],"轻笑风格背景",{"categories":347,"date":348,"description":349,"image":350,"path":351,"readingTime":352,"recommend":231,"tags":357,"title":358,"type":245,"updated":359},[221],"2025-03-24 09:00:00","本文章以安知鱼的页面文件为模版进行大幅度修改，仿轻笑的关于页面的模块摆放以及调整CSS样式来进行细致魔改。","\u002Fimage\u002FPostCover\u002FbtfAboutPage.avif","\u002F2025\u002F03\u002Fbtfaboutpage",{"text":353,"minutes":354,"time":355,"words":356},"24 min read",23.275,1396500,4655,[261,262],"关于页面(butterfly)","2025-03-25 11:20:00",{"categories":361,"date":323,"description":362,"image":363,"path":364,"readingTime":365,"recommend":231,"tags":370,"title":371,"type":245,"updated":333},[221],"这篇文章讲述了如何美化博客侧边栏，并调整各个卡片内容的样式表。","\u002Fimage\u002FPostCover\u002FcardMeihua.avif","\u002F2025\u002F03\u002Fcardmeihua",{"text":366,"minutes":367,"time":368,"words":369},"5 min read",4.77,286200,954,[261,262],"卡片美化",{"categories":373,"date":323,"description":374,"image":375,"path":376,"readingTime":377,"recommend":231,"tags":381,"title":382,"type":245,"updated":333},[221],"从零开始魔改butterfly","\u002Fimage\u002FPostCover\u002FfunctionMeihua.avif","\u002F2025\u002F03\u002Ffunctionmeihua",{"text":340,"minutes":378,"time":379,"words":380},0.345,20700,69,[261,262],"功能美化",{"categories":384,"date":385,"description":386,"image":387,"path":388,"readingTime":389,"recommend":231,"tags":394,"title":395,"type":245,"updated":396},[221],"2025-03-01 10:00:00","本文依照轻笑的部分内容，参考首页banner写法以及对首页banner添加鼠标滚动以及移动端滑动，通过CSS样式进行美化整个首页banner，此篇文章重点讲述了如何解决轻笑给的js内容在首页会出现不断加载的问题。","\u002Fimage\u002FPostCover\u002FrandomPost.avif","\u002F2025\u002F03\u002Frandompost",{"text":390,"minutes":391,"time":392,"words":393},"6 min read",5.595,335700,1119,[261,262,244],"Banner随机文章展示(轻笑同款)","2025-03-05 12:09:00",{"categories":398,"date":399,"description":400,"image":401,"path":402,"readingTime":403,"recommend":407,"tags":408,"title":409,"type":245,"updated":410},[221],"2025-08-11 10:00:00","本篇文章讲述了添加模块代码并在博客的友情链接中添加模块，且使用css美化","\u002Fimage\u002FPostCover\u002FlinkTop.avif","\u002F2025\u002F08\u002Flinktop",{"text":287,"minutes":404,"time":405,"words":406},8.88,532800,1776,11,[242,243,244],"在友链页面添加滚动头像banner","2025-08-11 20:49:00",{"categories":412,"date":413,"description":414,"image":415,"path":416,"readingTime":417,"recommend":422,"tags":423,"title":424,"type":245,"updated":425},[221],"2025-08-22 10:00:00","近期将博客迁移至Nuxt框架时，重新搭建了「关于页面」。过程中添加了技能展示组件（skillinfo.vue），实现标签分组渲染；新建about.vue页面，整合个人信息、技能、偏好等多模块内容，并通过ts定义数据接口（about.ts\u002Fcreativity.ts）。","\u002Fimage\u002FPostCover\u002FnuxtAboutPage.avif","\u002F2025\u002F08\u002Fnuxtaboutpage",{"text":418,"minutes":419,"time":420,"words":421},"16 min read",15.92,955200,3184,10,[242,243,244],"关于页面(Nuxt)","2025-09-01 20:49:00",{"categories":427,"date":428,"description":429,"image":430,"path":431,"readingTime":432,"recommend":237,"tags":436,"title":437,"type":245,"updated":425},[221],"2025-09-02 10:00:00","本篇文章主要简述了如何给Nuxt框架添加站点详情","https:\u002F\u002Fwww.yjluo.top\u002Fimage\u002FPostCover\u002FsiteInfo.avif","\u002F2025\u002F09\u002Fsitelinkpageadd",{"text":366,"minutes":433,"time":434,"words":435},4.38,262800,876,[242,243,244],"添加站点详情页面",{"categories":439,"date":441,"description":442,"image":443,"path":444,"readingTime":445,"recommend":231,"tags":449,"title":452,"type":453,"updated":454},[440],"日志记录","2025-12-28 10:00:00","该文章详细记录了2025年中的上下半年所做的事情，并且还透露出后续计划中会干什么。而在前言中也写到此文为水字数而出，上下半年均写到更换框架与服务有关于的内容。对于未来计划中提到了要对一些网站进行恢复、以及明年将在文章中加入与自创小说有关的内容","\u002Fimage\u002FPostCover\u002FannualSummary.avif","\u002F2025\u002F12\u002Fannualsummary",{"text":301,"minutes":446,"time":447,"words":448},3.855,231300,771,[450,451],"总结",2025,"年度总结：旧去新","story","2025-12-28 20:49:00",{"categories":456,"date":222,"description":223,"image":226,"path":230,"readingTime":457,"recommend":237,"tags":458,"title":5,"type":245,"updated":246},[221],{"text":233,"minutes":234,"time":235,"words":236},[242,243,244],{"categories":460,"date":461,"description":462,"image":463,"path":464,"readingTime":465,"recommend":470,"tags":471,"title":472,"type":245,"updated":473},[221],"2025-12-23 10:00:00","该文章介绍Nuxt博客适配中评论模块的Vue组件实现与Artalk评论系统单例管理逻辑，并提供具体的适配评论表情包的Json信息，评论功能有着KaTeX数学公式渲染、图片灯箱、动态监听以及管理逻辑的初始化、计数、暗黑模式切换等方式。","\u002Fimage\u002FPostCover\u002FcommentMeihua.avif","\u002F2025\u002F12\u002Fcommentadd",{"text":466,"minutes":467,"time":468,"words":469},"32 min read",31.72,1903200,6344,8,[242,243,244],"评论优化","2026-03-01 20:49:00",{"categories":475,"date":476,"description":477,"image":478,"path":479,"readingTime":480,"recommend":485,"tags":486,"title":487,"type":245,"updated":488},[221],"2025-12-03 10:05:09","该博客持续维护Nuxt框架博客系统，新增装备页面实现硬件\u002F外设分类展示，支持动态过滤、标签筛选与规格参数渲染，通过TypeScript定义数据接口，结合Vue3响应式布局与SCSS响应式设计，完成设备卡片动态加载、悬停动效及跨端适配优化，集成评论跳转与购买信息展示功能。","\u002Fimage\u002FPostCover\u002FequipmentPage.avif","\u002F2025\u002F12\u002Fequipmentpageadd",{"text":481,"minutes":482,"time":483,"words":484},"8 min read",7.28,436800,1456,7,[242,243,244],"添加装备页面","2025-12-03 20:49:09",{"categories":490,"date":491,"description":492,"image":493,"path":494,"readingTime":495,"recommend":500,"tags":501,"title":502,"type":245,"updated":503},[221],"2025-12-09 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括增加可后期换配置且内置移动到赞赏总览触发效果的打赏弹窗、优化头部封面移动端预览、增加版权图标虚化及打赏入口、将本地desc预览改ai摘要样式、增加版权卡片及更换头部信息样式。","\u002Fimage\u002FPostCover\u002FpostMeihua.avif","\u002F2025\u002F12\u002Fpostpagexiugai",{"text":496,"minutes":497,"time":498,"words":499},"12 min read",11.165,669900,2233,6,[242,243,244],"文章美化","2025-12-09 20:49:00",{"categories":505,"date":506,"description":507,"image":508,"path":509,"readingTime":510,"recommend":515,"tags":516,"title":517,"type":245,"updated":518},[221],"2025-12-04 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括站点详情卡片组件化改造（采用Badge组件优化布局）、分类卡片新增文章数量统计功能（重新严重问题）、标签卡片新增文章标签统计功能、博主信息模块的拆分与重构，同时删除了冗余的左侧图片和完整博主卡片，最终形成模块化组件结构（涉及5个核心组件及数据调用逻辑调整）。","\u002Fimage\u002FPostCover\u002FsmallCard.avif","\u002F2025\u002F12\u002Fsmallcardadd",{"text":511,"minutes":512,"time":513,"words":514},"10 min read",9.745,584700,1949,5,[242,243,244],"侧边组件美化","2025-12-04 20:49:00",{"categories":520,"date":521,"description":522,"image":523,"path":524,"readingTime":525,"recommend":231,"tags":530,"title":533,"type":245,"updated":534},[221],"2026-01-27 10:00:00","自定义全局的样式颜色，具有对特定CSS中所具有的自定义样式颜色来进行整合，并且作者还顺便水了一篇文章","\u002Fimage\u002FPostCover\u002FcolorStyleAll.avif","\u002F2026\u002F01\u002Fcolorstyleall",{"text":526,"minutes":527,"time":528,"words":529},"14 min read",13.155,789300,2631,[531,532],"全局颜色","自定义","自定义全局颜色","2026-01-27 20:49:00",{"categories":536,"date":537,"description":538,"image":539,"path":540,"readingTime":541,"recommend":231,"tags":546,"title":550,"type":245,"updated":551},[251],"2026-01-11 10:00:00","这篇文章是一篇实战经验分享，主要讲解了如何利用腾讯云的EdgeOne边缘安全加速平台，为网站字体等静态资源搭建一个自定义的、高性能的镜像加速服务。","\u002Fimage\u002FPostCover\u002FjsdmEdge.avif","\u002F2026\u002F01\u002Fjsdmedge",{"text":542,"minutes":543,"time":544,"words":545},"3 min read",2.72,163200,544,[547,548,549],"镜像","EdgeOne","jsdmirror","使用EdgeOne CDN搭建自用Jsd镜像","2026-01-11 20:49:00",{"categories":553,"date":554,"description":555,"image":556,"path":557,"readingTime":558,"recommend":231,"tags":563,"title":566,"type":245,"updated":567},[251],"2026-01-28 19:00:00","本文是一篇关于 Komari Monitor（一款服务器监控系统）的详细介绍与实用指南。文章以作者个人经验为引，对比了哪吒监控（V0\u002FV1版本）与 Komari 在各方面的差异，并逐步演示了如何部署、配置和使用 Komari。","\u002Fimage\u002FPostCover\u002FkomariMonitor.avif","\u002F2026\u002F01\u002Fkomarimonitor",{"text":559,"minutes":560,"time":561,"words":562},"7 min read",6.86,411600,1372,[564,565],"探针","监控","komari：全新的探针站点","2026-01-29 13:00:00",{"categories":569,"date":570,"description":507,"image":571,"path":572,"readingTime":573,"recommend":206,"tags":577,"title":578,"type":245,"updated":579},[221],"2026-01-01 10:00:00","\u002Fimage\u002FPostCover\u002FNewYear.avif","\u002F2026\u002F01\u002Fnewyear",{"text":542,"minutes":574,"time":575,"words":576},2.15,129000,430,[242,243,244],"踏入2026：目标新方向","2026-01-01 20:49:00",{"categories":581,"date":582,"description":583,"image":584,"path":585,"readingTime":586,"recommend":231,"tags":591,"title":592,"type":453,"updated":593},[221],"2026-01-05 10:00:00","该文章记录了项目中对于字体、图片以及构建产物等静态资源的优化与处理，并且表示自身对于图片的存放位置进行优化。","\u002Fimage\u002FPostCover\u002FsiteAssets.avif","\u002F2026\u002F01\u002Fsiteassets",{"text":587,"minutes":588,"time":589,"words":590},"2 min read",1.82,109200,364,[242,243,244],"站点资源优化","2026-01-07 20:49:00",{"categories":595,"date":597,"description":598,"image":599,"path":600,"readingTime":601,"recommend":231,"tags":605,"title":606,"type":245,"updated":607},[596],"日常随笔","2026-01-12 10:00:00","该文章主要写了对于低价机器的试水，并提醒是超开类型的机器。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002Fimage\u002FPostCover\u002FvpsTalk.avif","\u002F2026\u002F01\u002Fvpstalk",{"text":418,"minutes":602,"time":603,"words":604},15.545,932700,3109,[242,243,244],"随笔：低价主机试水","2026-01-12 20:49:00",{"categories":609,"date":610,"description":611,"image":599,"path":612,"readingTime":613,"recommend":231,"tags":617,"title":618,"type":245,"updated":619},[596],"2026-01-30 10:00:00","该文章主要写了对于大容量硬盘主机的试水。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002F2026\u002F01\u002Fvpstalk-2",{"text":526,"minutes":614,"time":615,"words":616},13.965,837900,2793,[242,243,244],"随笔：大容量主机测试","2026-01-30 20:49:00",{"categories":621,"date":622,"description":623,"image":624,"path":625,"readingTime":626,"recommend":276,"tags":631,"title":632,"type":245,"updated":633},[221],"2026-02-20 10:00:00","该文章展示多个以鸣潮为主题的档案组件，包含具体代码、属性表格对应、预览整体组件、写法展示四种类型，并在文章末尾附加更新报告。","\u002Fimage\u002FPostCover\u002FWutheringWavesPostWidget.avif","\u002F2026\u002F02\u002Fwutheringwavespostwidget",{"text":627,"minutes":628,"time":629,"words":630},"100 min read",99.23,5953800,19846,[242,243,244],"【鸣潮】档案文章组件","2026-02-26 10:00:00",{"categories":635,"date":636,"description":598,"image":637,"path":638,"readingTime":639,"recommend":231,"tags":643,"title":644,"type":245,"updated":645},[251],"2026-02-03 10:00:00","\u002Fimage\u002FPostCover\u002FfnosInstall.avif","\u002F2026\u002F02\u002Ffnosinstall",{"text":287,"minutes":640,"time":641,"words":642},8.91,534600,1782,[242,243,244],"给老MAC升级为飞牛OS","2026-02-05 20:49:00",{"categories":647,"date":636,"description":598,"image":648,"path":649,"readingTime":650,"recommend":231,"tags":654,"title":655,"type":245,"updated":645},[221],"\u002Fimage\u002FPostCover\u002FmacBookPerformancTest.avif","\u002F2026\u002F02\u002Fmacbookperformanctest",{"text":542,"minutes":651,"time":652,"words":653},2.47,148200,494,[242,243,244],"【精简】测试老MAC性能",{"categories":657,"date":658,"description":598,"image":659,"path":660,"readingTime":661,"recommend":231,"tags":665,"title":666,"type":245,"updated":667},[221],"2026-02-04 10:00:00","\u002Fimage\u002FPostCover\u002FmusicInstall.avif","\u002F2026\u002F02\u002Fmusicinstall",{"text":287,"minutes":662,"time":663,"words":664},8.19,491400,1638,[242,243,244],"【本地+云端】搭建道理鱼音乐","2026-02-06 20:49:00",{"categories":669,"date":670,"description":598,"image":671,"path":672,"readingTime":673,"recommend":215,"tags":677,"title":678,"type":245,"updated":679},[221],"2026-03-03 10:00:00","\u002Fimage\u002FPostCover\u002FfooterNuxtMeihua.avif","\u002F2026\u002F03\u002Ffooternuxtmeihua",{"text":301,"minutes":674,"time":675,"words":676},3.235,194100,647,[242,243,244],"页脚魔改(Nuxt版本)","2026-03-06 10:00:00",{"categories":681,"date":682,"description":598,"image":671,"path":683,"readingTime":684,"recommend":209,"tags":689,"title":691,"type":245,"updated":692},[221],"2026-03-21 14:00:00","\u002F2026\u002F03\u002Fsteamgamepage",{"text":685,"minutes":686,"time":687,"words":688},"18 min read",17.265,1035900,3453,[242,690],"页面","游戏展示页面","2026-03-22 10:00:00",{"categories":694,"date":695,"description":598,"image":671,"path":696,"readingTime":697,"recommend":276,"tags":701,"title":702,"type":245,"updated":703},[221],"2026-04-11 14:00:00","\u002F2026\u002F04\u002Fessaynuxtpage",{"text":390,"minutes":698,"time":699,"words":700},5.93,355800,1186,[242,690],"说说页面（Nuxt版本）","2026-04-11 22:00:00",{"categories":705,"date":706,"description":598,"image":671,"path":707,"readingTime":708,"recommend":276,"tags":712,"title":713,"type":245,"updated":714},[221],"2026-04-13 14:00:00","\u002F2026\u002F04\u002Fhotnuxtpage",{"text":287,"minutes":709,"time":710,"words":711},8.985,539100,1797,[242,690],"热搜页面（Nuxt版本）","2026-04-13 22:00:00",{"categories":716,"date":718,"description":442,"image":719,"path":720,"readingTime":721,"recommend":231,"tags":725,"title":726,"type":453,"updated":727},[717],"自设记录","2025-12-29 10:00:00","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpost\u002Fimg\u002FannualSummary\u002Fcover.webp","\u002Fnovel\u002Fworld\u002Fharmworld",{"text":587,"minutes":722,"time":723,"words":724},1.31,78600,262,[450,451],"世界志：鸿蒙界","2025-12-29 20:49:00",{"categories":729,"date":718,"description":442,"image":719,"path":730,"readingTime":731,"recommend":231,"tags":735,"title":736,"type":453,"updated":727},[717],"\u002Fnovel\u002Fworld\u002Flmmortalgod",{"text":559,"minutes":732,"time":733,"words":734},6.295,377700,1259,[450,451],"世界志：仙神界",{"categories":738,"date":718,"description":442,"image":719,"path":739,"readingTime":740,"recommend":231,"tags":744,"title":745,"type":453,"updated":727},[717],"\u002Fnovel\u002Fworld\u002Fdh",{"text":587,"minutes":741,"time":742,"words":743},1.65,99000,330,[450,451],"世界志：大荒",[747,749],{"title":437,"path":431,"stem":748,"date":428,"type":245,"children":-1},"posts\u002F2025\u002F09\u002FsitelinkPageAdd",{"title":487,"path":479,"stem":750,"date":476,"type":245,"children":-1},"posts\u002F2025\u002F12\u002FequipmentPageAdd",1776745734585]