{"version":3,"mappings":"qyHAWA,MAAAA,EAAAC,KACA,WAAAC,GAAAC,KACA,gBAAAC,CAAA,EAAAC,GAAAC,GAAA,GAEA,CAAM,SAAAC,EAEJ,OAAAC,EACA,OAAAC,EACA,WAAAC,EACA,SAAAC,EACA,MAAAC,EACA,UAAAC,EACA,aAAAC,EAEA,WAAAC,EACY,WAAAC,EACZ,oCAAAC,EAEA,mBAAAC,EAEA,mBAAAC,CACA,EAAAC,GAAA,EAEF,WAAAC,EAAA,aAAAC,EAAA,MAAAC,EAAA,KAAAC,CAAA,EAAAC,KAAAC,EAAAjB,EAAA,oBAAAiB,EAAA,SAEAC,EAAAC,GAAA,MACAC,EAAAC,GAAAH,CAAA,EAEA,eAAAI,EAAAC,EAAA,CACE,IAAAvB,EAAA,MACE,OACF,MAAAwB,GAAAxB,EAAA,kBAAAuB,CAAA,GAEEf,EAAAe,CAAA,CAA0C,CAuB9CE,IACEC,EAAAC,EAAAC,IAAA,EAAA5B,CAAA,EACA0B,EAAAC,EAAAE,IAAA,EAAAzB,CAAA,EACAsB,EAAAC,EAAAG,IAAA,EAAA3B,CAAA,GAEF,eAAA4B,GAAA,CACE,IACE,MAAAzB,EAAA,EACAmB,GAAAzB,EAAA,QACEI,EAAA,OAAA4B,GAAA5B,EAAA,OACAT,EAAA,OAAuB,GAAAK,EAAA,0BACa,SAAAT,EAAA,qBACD,EAErC,OAAA0C,EAAA,CAGAC,GAAAD,CAAA,CAAqB,CACvB,CAEF,OAAAE,EAAAC,CAAA,EAAAC,GAAA,IAAAN,EAAA,SAAAI,EAAAC","names":["route","useRoute","isDesktop","useDevice","currentArticle","storeToRefs","useDailyStore","isAuthor","status","detail","detailType","siteMeta","media","shareBase","commentClick","init","starHandle","mediaRecommendAttentionStatusChange","detailComponentRef","commentClickHandle","useArticleDetailPage","targetRef","containerRef","style","tips","useJump","_a","affixRef","ref","affixRefIsVisible","useElementVisibility","focusHandel","status2","LogicUserMediaAttention","isClient","provide","unref","SYMBOL_CONTENT_DETAIL","SYMBOL_SHARE_BASE","SYMBOL_SHARE_MEDIA","initHandler","useShare","error","showDialogError","__temp","__restore","_withAsyncContext"],"sources":["../../../../../src/pages/news/[articleId].vue"],"sourcesContent":["<script setup lang='ts'>\r\nimport { ARTICLE_TYPE, LOAD_STATUS, articleAuthorPath, topicDetailPath, videoHomePath } from '@qcwp/common'\r\nimport { isClient, transferStr } from '@qcwp/utils'\r\n// import { ImagePreview } from 'vant'\r\nimport { useArticleDetailPage } from './hooks/detail'\r\nimport { useJump } from './hooks/jump'\r\nimport { SYMBOL_CONTENT_DETAIL, SYMBOL_SHARE_BASE, SYMBOL_SHARE_MEDIA } from '~~/src/common/const/symbol'\r\nimport { useDailyStore } from '~~/src/store'\r\nimport { AD_KEYS } from '~~/src/server/modules/ad/types'\r\nimport { LogicUserMediaAttention } from '~~/src/logic/article/detail'\r\n\r\nconst route = useRoute()\r\nconst { isDesktop } = useDevice()\r\nconst { currentArticle } = storeToRefs(useDailyStore())\r\n\r\nconst {\r\n  // detail info\r\n  isAuthor,\r\n  status,\r\n  detail,\r\n  detailType,\r\n  siteMeta,\r\n  media,\r\n  shareBase,\r\n  // To comment list\r\n  commentClick,\r\n  initHandle: init,\r\n  starHandle,\r\n  // mediaRecommendAttention handle\r\n  mediaRecommendAttentionStatusChange,\r\n  // to comment list\r\n  detailComponentRef,\r\n  commentClickHandle,\r\n} = useArticleDetailPage()\r\nconst { targetRef, containerRef, style, tips } = useJump(detail.value?.id || '')\r\n\r\nconst affixRef = ref(null)\r\nconst affixRefIsVisible = useElementVisibility(affixRef)\r\n// 关注\r\nasync function focusHandel(status: boolean) {\r\n  if (!detail.value)\r\n    return\r\n  const result = await LogicUserMediaAttention(detail.value.mediaUserId, status)\r\n  if (result)\r\n    mediaRecommendAttentionStatusChange(status)\r\n}\r\n\r\n// 图片预览\r\n// function previewImage(event: Event) {\r\n//   const target = event.target as HTMLElement\r\n//   if (!target || target.tagName !== 'IMG' || !detail.value)\r\n//     return\r\n//   const src = target.getAttribute('src')\r\n//   const index = detail.value.contentImages?.findIndex(v => v === src)\r\n//   if (index === undefined || index === -1)\r\n//     return\r\n//   ImagePreview({\r\n//     teleport: targetRef.value,\r\n//     images: detail.value.contentImages,\r\n//     startPosition: index,\r\n//     closeable: true,\r\n//     transition: 'none',\r\n//     overlayClass: 'bg-black! bg-opacity-0!',\r\n//     className: 'bg-black! bg-opacity-30!',\r\n//   })\r\n// }\r\n\r\nif (isClient) {\r\n  provide(unref(SYMBOL_CONTENT_DETAIL()), detail)\r\n  provide(unref(SYMBOL_SHARE_BASE()), shareBase)\r\n  provide(unref(SYMBOL_SHARE_MEDIA()), media)\r\n}\r\nasync function initHandler() {\r\n  try {\r\n    await init()\r\n    if (isClient && detail.value) {\r\n      shareBase.value && useShare(shareBase.value)\r\n      currentArticle.value = {\r\n        ...detail.value.generateDailyData(),\r\n        isSwiper: route.query.swiper === 'true',\r\n      }\r\n    }\r\n  }\r\n  catch (error) {\r\n    showDialogError(error)\r\n  }\r\n}\r\nawait initHandler()\r\n</script>\r\n\r\n<template>\r\n  <div class=\"linear-gray-to-white-transition md:pb-20\">\r\n    <utils-site-head :site-meta=\"siteMeta\" />\r\n    <layout-nav-default-back :title=\"detail?.title || '资讯详情'\" />\r\n    <div ref=\"containerRef\" class=\"layout-default-container-1100 md:pt-4 relative\">\r\n      <div lt-md:hidden md:block>\r\n        <layout-breadcrumb v-if=\"detailType && detailType === ARTICLE_TYPE.VIDEO\" title=\"视频\" :title-url=\"videoHomePath()\" :sub-title=\"detail?.title || '视频详情'\" />\r\n        <layout-breadcrumb v-else sub-title=\"资讯正文\" />\r\n      </div>\r\n      <div ref=\"targetRef\">\r\n        <div ref=\"detailComponentRef\" md=\"flex mt-3 items-start\" class=\"relative overflow-hidden\">\r\n          <div v-if=\"isAuthor === '1'\" class=\"tag primary\">\r\n            预览\r\n          </div>\r\n          <div w-full lg=\"flex-grow w-0\" flex-shrink-0>\r\n            <template v-if=\"detail !== null && status === LOAD_STATUS.END\">\r\n              <div class=\"bg-white rounded-md py-4 px-4 md-px-8\">\r\n                <h1 font-bold text-center text-5 md=\"text-6 py-5\">\r\n                  {{ detail.title }}\r\n                </h1>\r\n                <!-- 作者信息 -->\r\n                <PageNewsArticleDetailAuthor\r\n                  v-if=\"detail.mediaName && detail.mediaUserId\"\r\n                  mt-4\r\n                  :ai-helper-type=\"detail.aiHelperType\"\r\n                  :media-name=\"detail.mediaName\"\r\n                  :media-id=\"detail.mediaUserId\"\r\n                  :media-type=\"detail.mediaType\"\r\n                  :media-avatar=\"detail.mediaAvatar\"\r\n                  :author-name=\"detail.authorName\"\r\n                  :sys-user-name=\"detail.sysUserName\"\r\n                  :time=\"detail.showCreateTime\"\r\n                  :look=\"detail.look\"\r\n                  :is-focus=\"detail.focus\"\r\n                  :media-grade=\"detail.mediaGrade\"\r\n                  :update-time=\"detail.updateTime\"\r\n                  @mediaRecommendAttentionStatusChange=\"mediaRecommendAttentionStatusChange\"\r\n                />\r\n                <!-- A1 -->\r\n                <ClientOnly>\r\n                  <LazyAdCommonA1 mt-3 :ad-key=\"AD_KEYS.NEWS_DETAIL\" position=\"A1\" />\r\n                </ClientOnly>\r\n                <!-- 绑定的专题 -->\r\n                <div v-if=\"detail.bindTopic\" class=\"mt-5 flex items-center flex-wrap justify-center\">\r\n                  <NuxtLink\r\n                    v-for=\"v in detail.bindTopics\" :key=\"v.id\" :to=\"topicDetailPath(v.id)\"\r\n                    class=\"text-blue-500 px-6 py-2 border-1 border-blue-600 border-rounded-full mr-3 underline\"\r\n                    target=\"_blank\"\r\n                  >\r\n                    点击进入《{{ v.title }}》专题详情\r\n                  </NuxtLink>\r\n                </div>\r\n                <!-- @click=\"previewImage\" -->\r\n\r\n                <n-card v-if=\"detail.articleDetailInfoVO.aiSummary\" class=\"rounded mt-6\" style=\"    background-image: linear-gradient(180deg, rgba(247, 232, 255, .54), rgba(191, 223, 255, .35));\">\r\n                  <n-collapse default-expanded-names=\"1\" arrow-placement=\"right\">\r\n                    <n-collapse-item title=\"989\" name=\"1\">\r\n                      <template #header>\r\n                        <div class=\"color-primary flex items-center \">\r\n                          <i class=\"i-custom:ai text-6\" />\r\n                          <span class=\"font-500 text-4\"> 导读</span>\r\n                        </div>\r\n                      </template>\r\n                      <p class=\"text-4\" v-html=\"detail.articleDetailInfoVO.aiSummary\" />\r\n                    </n-collapse-item>\r\n                  </n-collapse>\r\n                </n-card>\r\n\r\n                <div\r\n                  class=\"article-content mt-6 overflow-hidden\"\r\n                  v-html=\"detail.formatContent()\"\r\n                />\r\n                <ClientOnly>\r\n                  <div v-if=\"detail.miniQrcode\" class=\"flex-shrink-0 p-3 rounded-md grid place-items-center bg-white w-full\">\r\n                    <div class=\"w-30 h-30\">\r\n                      <base-image :src=\"detail.miniQrcode\" />\r\n                    </div>\r\n                    <p class=\"tex-center text-gray-600 mt-3 text-3\">\r\n                      小程序上浏览\r\n                    </p>\r\n                  </div>\r\n                </ClientOnly>\r\n                <div class=\"rounded-md p-4 mt-3 bg-gray-100 \">\r\n                  <p class=\"text-gray-600 text-3.5\">\r\n                    本站未标注原创的资讯均转载于互联网，版权和著作权归原作者所有。转载目的在于传递更多信息及用于网络分享，不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。对于网站原创作品，版权归作者和本站所有，转载请注明作者及出自于汽车网评，如有侵权请联系本站工作人员。（admin@qcwp.com）\r\n                  </p>\r\n                </div>\r\n                <!-- A2 -->\r\n                <ClientOnly>\r\n                  <LazyAdCommonA1 mt-3 :ad-key=\"AD_KEYS.NEWS_DETAIL\" position=\"A2\" />\r\n                </ClientOnly>\r\n              </div>\r\n              <!-- media -->\r\n              <div v-if=\"detail\" class=\"mt-3 bg-white rounded-md p-3 flex items-center\">\r\n                <NuxtLink\r\n                  class=\"flex-grow w-0 flex\" :class=\"[detail.mediaIntro ? 'items-start' : ' items-center']\"\r\n                  :to=\"articleAuthorPath(detail.mediaUserId || '')\"\r\n                >\r\n                  <utils-media-avatar\r\n                    class=\"flex-shrink-0\"\r\n                    :size=\"40\"\r\n                    :name=\"detail.mediaName\"\r\n                    :src=\"detail.mediaAvatar\"\r\n                    :type=\"detail.mediaType\"\r\n                    :media-grade=\"detail.mediaGrade\"\r\n                  />\r\n                  <div class=\"ml-3 flex-grow w-0\">\r\n                    <h3 class=\"text-3.75 truncate font-bold\">\r\n                      {{ detail.mediaName }}\r\n                    </h3>\r\n                    <p v-if=\"detail.mediaIntro\">\r\n                      <n-ellipsis line-clamp=\"2\" :tooltip=\"false\">\r\n                        {{ transferStr(detail.mediaIntro) }}\r\n                      </n-ellipsis>\r\n                    </p>\r\n                  </div>\r\n                </NuxtLink>\r\n                <div flex=\"~ shrink-0\" items-center gap-2 md:gap-4 ml-4>\r\n                  <button v-if=\"!detail.focus\" title=\"关注\" class=\"btn-primary\" lt-sm=\"text-3 px-2 py-1\" @click=\"focusHandel(true)\">\r\n                    关注\r\n                  </button>\r\n                  <button v-else title=\"取消关注\" class=\"btn-waring \" lt-sm=\"text-3 px-2 py-1\" @click=\"focusHandel(false)\">\r\n                    取消关注\r\n                  </button>\r\n                </div>\r\n              </div>\r\n              <ClientOnly>\r\n                <LayoutCarTestDrive class=\"mt-3\" :car-list=\"detail?.porArticleCarRefList\" />\r\n                <div id=\"comment-textarea\" class=\"mt-3 bg-white rounded-md py-4 px-6\" lt-md=\"hidden\">\r\n                  <layout-comment-textarea :article-id=\"detail.id\" />\r\n                </div>\r\n                <div id=\"comment-list\" mt-3 bg-white rounded-md p-4 md=\"px-6\">\r\n                  <layout-comment-list :comment-count=\"detail.commentCount\" :param=\"{ articleId: detail.id, level: 1 }\" />\r\n                </div>\r\n              </ClientOnly>\r\n            </template>\r\n            <template v-else-if=\"status === LOAD_STATUS.NULL\">\r\n              <base-empty bg-white rounded-md py-4 px-3 md=\"px-8\" text=\"未找到相关资讯\" />\r\n            </template>\r\n            <div v-else-if=\"status === LOAD_STATUS.LOADING\" class=\"bg-white rounded-md py-4 px-3 md:px-8 font-bold text-center pt-20\">\r\n              <span>数据加载中...</span>\r\n            </div>\r\n            <div v-else class=\" bg-white rounded-md py-4 px-3 md:px-8\">\r\n              <base-empty text=\"数据加载失败,请稍后重试\" />\r\n              <button class=\"text-4 px-lg py-2 rounded-md bg-blue-5 text-white mt-5 block m-auto\" @click=\"initHandler\">\r\n                重新加载\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div v-if=\"isDesktop\" ref=\"affixRef\" ml-3 hidden lg=\"block w-80\">\r\n            <ClientOnly>\r\n              <LazyAdCommonA1 :ad-key=\"AD_KEYS.NEWS_DETAIL\" position=\"A3\" />\r\n              <layout-rank-article :embedded=\"false\" />\r\n              <LazyAdCommonA1 :ad-key=\"AD_KEYS.NEWS_DETAIL\" position=\"A4\" />\r\n              <layout-rank-hot-recommend class=\"w-80\" :affix=\"!affixRefIsVisible\" />\r\n            </ClientOnly>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <ClientOnly v-if=\"detail !== null && status === LOAD_STATUS.END\">\r\n        <layout-article-jump :style=\"style\" :tips=\"tips\" />\r\n        <div v-if=\"isDesktop\" lt-md=\"hidden\" lt-xl=\"fixed left-0 bottom-10\" xl=\"absolute -left-23 top-3\" class=\"z-99 \">\r\n          <utils-affix-pc\r\n            :article-id=\"detail.id\"\r\n            :is-favor=\"false\"\r\n            :favor-count=\"10\"\r\n            :is-star=\"detail.collect\"\r\n            :comment-count=\"detail.commentCount\"\r\n            @commentClick=\"commentClick\"\r\n            @starHandle=\"starHandle\"\r\n          />\r\n        </div>\r\n        <div v-else md=\"hidden\">\r\n          <layout-tabbar-detail\r\n            :article-id=\"detail.id\"\r\n            :is-favor=\"false\"\r\n            :favor-count=\"10\"\r\n            :is-star=\"detail.collect\"\r\n            :comment-count=\"detail.commentCount\"\r\n            :param=\"{ articleId: detail.id, level: 1 }\"\r\n            :on-comment-click-handle=\"commentClickHandle\"\r\n            @starHandle=\"starHandle\"\r\n          />\r\n        </div>\r\n      </ClientOnly>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"scss\">\r\n@import \"~~/src/components/page/news/article-detail/styles/status.scss\";\r\n.n-collapse-item__header-main{\r\n  justify-content:space-between;\r\n}\r\n.article-content {\r\n  --uno: text-4.5;\r\n\r\n  img {\r\n    --uno: text-center m-auto rounded-md overflow-hidden my-1;\r\n    background: none !important;\r\n\r\n    // height: auto !important;\r\n    padding-bottom: 0 !important;\r\n  }\r\n\r\n  audio {\r\n    --uno: m-auto w-full my-1;\r\n  }\r\n\r\n  p,\r\n  div {\r\n    --uno: leading-[1.8] mb-3;\r\n  }\r\n\r\n  strong,\r\n  b {\r\n    font-weight: bold;\r\n  }\r\n\r\n  a {\r\n    --uno: text-blue-500 mx-0.25 underline underline-1 underline-offset-5 underline-dashed hover:underline-1.5;\r\n\r\n    &::after {\r\n      content: \"\";\r\n\r\n      --uno: i-mdi:link-variant text-2 mx-0.25 v-baseline -top-2 relative;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"file":"_nuxt/js/pages-_articleId_-425c615a.js"}