├── .nvmrc
├── public
    ├── favicon.ico
    ├── images
    │   └── og-media.png
    ├── robots.txt
    └── sitemap.xml
├── src
    ├── assets
    │   ├── logo.png
    │   ├── images
    │   │   └── j9rSZOk.png
    │   └── style.css
    ├── constants.js
    ├── components
    │   ├── Analysis.vue
    │   ├── GetComments.vue
    │   ├── CommentItem.vue
    │   └── MainArea.vue
    ├── main.js
    ├── App.vue
    └── store.js
├── vercel.json
├── .eslintrc.json
├── .gitignore
├── package.json
├── README.md
├── vite.config.js
└── index.html


/.nvmrc:
--------------------------------------------------------------------------------
1 | 18


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/circle-hotaru/bilibili-comment2png/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/circle-hotaru/bilibili-comment2png/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/public/images/og-media.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/circle-hotaru/bilibili-comment2png/HEAD/public/images/og-media.png


--------------------------------------------------------------------------------
/src/assets/images/j9rSZOk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/circle-hotaru/bilibili-comment2png/HEAD/src/assets/images/j9rSZOk.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # *
2 | User-agent: *
3 | Allow: /
4 | 
5 | # Sitemaps
6 | Sitemap: https://bilibili.circlehotarux.me/sitemap.xml
7 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rewrites": [
3 |     {
4 |       "source": "/bili.api/:path*",
5 |       "destination": "https://api.bilibili.com/:path*"
6 |     }
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "@babel/eslint-parser",
 3 |   "root": true,
 4 |   "env": {
 5 |     "node": true,
 6 |     "browser": true
 7 |   },
 8 |   "extends": ["eslint:recommended", "plugin:vue/essential"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
1 | export const SYSTEM_MESSAGE =
2 |   'You are a professional social media analyst. I will send you the comments from a video, please provide a brief summary and analysis of these comments, including the sentiment tendencies of the comments, as well as extract valuable suggestions from the comments. Please communicate with me in Chinese.'
3 | 


--------------------------------------------------------------------------------
/src/components/Analysis.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="mx-0 mb-3 px-3 py-3 bg-white rounded-lg"
 4 |     v-if="sharedState.analysis"
 5 |   >
 6 |     {{ sharedState.analysis }}
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { store } from '../store.js'
12 | 
13 | export default {
14 |   name: 'analysis',
15 |   data() {
16 |     return {
17 |       sharedState: store.state,
18 |     }
19 |   },
20 | }
21 | </script>
22 | 
23 | <style></style>
24 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 4 | import 'normalize.css/normalize.css'
 5 | import 'bootstrap/dist/css/bootstrap.css'
 6 | import 'bootstrap-vue/dist/bootstrap-vue.css'
 7 | import './assets/style.css'
 8 | 
 9 | Vue.use(BootstrapVue)
10 | Vue.use(IconsPlugin)
11 | 
12 | Vue.config.productionTip = false
13 | 
14 | new Vue({
15 |   render: h => h(App),
16 | }).$mount('#app')
17 | 


--------------------------------------------------------------------------------
/src/assets/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --comment-general-background: #f9f9f9;
 3 |   --comment-text-primary: #222;
 4 |   --comment-text-secondary: #aaa;
 5 |   --comment-dark-background: #181818;
 6 |   --comment-dark-text-primary: #fff;
 7 | }
 8 | 
 9 | body {
10 |   font-family: -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
11 |   font-size: 0.9rem;
12 |   font-weight: 400;
13 |   line-height: 1.6;
14 |   color: #212529;
15 |   text-align: left;
16 |   background-color: #f2f2f2;
17 | }
18 | 


--------------------------------------------------------------------------------
/public/sitemap.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
3 | <url><loc>https://bilibili.circlehotarux.me</loc><lastmod>2022-08-23</lastmod><priority>1</priority></url>
4 | </urlset>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bilibili-comment2png",
 3 |   "version": "0.1.3",
 4 |   "private": true,
 5 |   "engines": {
 6 |     "node": ">=18"
 7 |   },
 8 |   "scripts": {
 9 |     "dev": "vite",
10 |     "build": "vite build",
11 |     "serve": "vite preview"
12 |   },
13 |   "dependencies": {
14 |     "axios": "^0.28.0",
15 |     "bootstrap": "4.5.3",
16 |     "bootstrap-vue": "2.18.1",
17 |     "file-saver": "2.0.2",
18 |     "html2canvas": "1.0.0-rc.7",
19 |     "jszip": "3.5.0",
20 |     "normalize.css": "8.0.1",
21 |     "vue": "^2.6.11"
22 |   },
23 |   "devDependencies": {
24 |     "eslint": "^8.22.0",
25 |     "eslint-plugin-vue": "^8.7.1",
26 |     "vite": "^2.7.2",
27 |     "vite-plugin-env-compatible": "^1.1.1",
28 |     "vite-plugin-html": "3.2.0",
29 |     "vite-plugin-vue2": "^1.9.0"
30 |   },
31 |   "browserslist": [
32 |     "> 1%",
33 |     "last 2 versions",
34 |     "not dead"
35 |   ]
36 | }
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Bilibili 评论转图片神器
 2 | 
 3 | 供 Bilibili UP 主与观众互动，将 Bilibili 视频评论区的评论转换成 PNG，应用场景如：呈现观众评论、评论互动、频道 Q&A，将会陆续完善其他功能，敬请期待！
 4 | 
 5 | 目前功能特色：
 6 | 
 7 | - AI 总结评论
 8 | - 无评论获取数量上限
 9 | - 自由修改评论外观
10 | - ZIP 压缩包打包下载
11 | - 评论内容为文件名
12 | 
13 | ## Demo
14 | 
15 | https://bilibili.incircle.dev
16 | 
17 | ## Technology Stack
18 | 
19 | - Vue
20 | - Bootstrap
21 | - html2canvas
22 | - JSZip
23 | 
24 | ## Installation & Usage
25 | 
26 | 1. Clone or Download the repository (Depending on whether you are using HTTPS or SSH)
27 | 
28 | ```
29 | git clone https://github.com/circle-hotaru/bilibili-comment2png.git
30 | cd bilibili-comment2png
31 | ```
32 | 
33 | 2. Install dependencies
34 | 
35 | ```
36 | npm i
37 | ```
38 | 
39 | 3. Start the application
40 | 
41 | ```
42 | npm run serve
43 | ```
44 | 
45 | After the application starts visit http://localhost:8080 to view it in the browser.
46 | 
47 | ## 🙏 感谢
48 | 
49 | https://github.com/SocialSisterYi/bilibili-API-collect
50 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import path from 'path'
 3 | import { createVuePlugin } from 'vite-plugin-vue2'
 4 | import envCompatible from 'vite-plugin-env-compatible'
 5 | import { createHtmlPlugin } from 'vite-plugin-html'
 6 | 
 7 | // https://vitejs.dev/config/
 8 | export default defineConfig({
 9 |   resolve: {
10 |     alias: [
11 |       {
12 |         find: /^~/,
13 |         replacement: '',
14 |       },
15 |       {
16 |         find: '@',
17 |         replacement: path.resolve(__dirname, './src'), //eslint-disable-line
18 |       },
19 |     ],
20 |     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
21 |   },
22 |   plugins: [
23 |     createVuePlugin({ jsx: true }),
24 |     envCompatible(),
25 |     createHtmlPlugin({
26 |       inject: {
27 |         data: {
28 |           title: 'bilibili-comment2png',
29 |         },
30 |       },
31 |     }),
32 |   ],
33 |   base: './',
34 |   build: {},
35 |   server: {
36 |     proxy: {
37 |       '/bili.api': {
38 |         target: 'https://api.bilibili.com',
39 |         changeOrigin: true,
40 |         rewrite: (path) => path.replace(/^\/bili.api/, ''),
41 |       },
42 |     },
43 |   },
44 | })
45 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app" class="container">
 3 |     <div class="row mt-4">
 4 |       <div class="col-12 col-md-6 d-flex flex-column">
 5 |         <h1 class="text-primary mb-4">Bilibili 评论转图片神器</h1>
 6 |         <div class="flex-grow-1">
 7 |           <img
 8 |             class="d-none d-md-block"
 9 |             src="./assets/images/j9rSZOk.png"
10 |             alt=""
11 |           />
12 |         </div>
13 |       </div>
14 |       <div class="col-12 col-md-6 d-flex flex-column">
15 |         <p>
16 |           此工具由
17 |           <a href="https://github.com/circle-hotaru" target="_blank"
18 |             >circlehotarux</a
19 |           >
20 |           开发可以将 Bilibili
21 |           视频评论区里的评论转换成图片。应用场景如：呈现观众评论、评论互动、频道Q&A，将会陆续完善其他功能，敬请期待。
22 |         </p>
23 |         <h5>目前功能特色：</h5>
24 |         <ul>
25 |           <li>AI总结评论</li>
26 |           <li>无评论获取数量上限</li>
27 |           <li>自由修改评论外观</li>
28 |           <li>ZIP压缩包打包下载</li>
29 |           <li>评论内容为文件名</li>
30 |         </ul>
31 |       </div>
32 |     </div>
33 |     <hr />
34 |     <div>
35 |       <get-comments />
36 |       <analysis />
37 |       <main-area />
38 |     </div>
39 |   </div>
40 | </template>
41 | 
42 | <script>
43 | import GetComments from '@/components/GetComments.vue'
44 | import MainArea from '@/components/MainArea.vue'
45 | import Analysis from '@/components/Analysis.vue'
46 | 
47 | export default {
48 |   name: 'App',
49 |   components: {
50 |     GetComments,
51 |     MainArea,
52 |     Analysis,
53 |   },
54 | }
55 | </script>
56 | 
57 | <style>
58 | .img-rounded-corners {
59 |   border: 1px solid #00a1d6;
60 |   border-radius: 10px;
61 |   margin: 0.625rem 0;
62 |   opacity: 0.5;
63 |   width: 100%;
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/src/components/GetComments.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <form class="form-inline mb-3">
 4 |       <input
 5 |         type="text"
 6 |         class="form-control"
 7 |         placeholder="请粘贴 bilibili 视频链接"
 8 |         v-model="sharedState.BVId"
 9 |         :readonly="sharedState.fetching || sharedState.pending"
10 |       />
11 |       <button
12 |         type="button"
13 |         class="btn btn-outline-secondary ml-sm-2 mt-2 mt-sm-0"
14 |         @click="getId()"
15 |         :disabled="sharedState.fetching || sharedState.pending"
16 |         v-if="sharedState.BVId"
17 |       >
18 |         <span class="align-middle">步骤2：获取</span>
19 |         <div
20 |           class="spinner-border spinner-border-sm"
21 |           role="status"
22 |           v-if="sharedState.fetching"
23 |         >
24 |           <span class="sr-only">处理中...</span>
25 |         </div>
26 |       </button>
27 |       <button
28 |         type="button"
29 |         class="btn btn-primary ml-sm-2 mt-2 mt-sm-0"
30 |         @click="getAnalysis()"
31 |         :disabled="sharedState.fetchingAnalysis"
32 |         v-if="sharedState.comments.length > 0"
33 |       >
34 |         <span class="align-middle">🤖 一键分析</span>
35 |         <div
36 |           class="spinner-border spinner-border-sm"
37 |           role="status"
38 |           v-if="sharedState.fetchingAnalysis"
39 |         >
40 |           <span class="sr-only">处理中...</span>
41 |         </div>
42 |       </button>
43 |     </form>
44 |   </div>
45 | </template>
46 | 
47 | <script>
48 | import { store } from '../store.js'
49 | 
50 | export default {
51 |   name: 'get-comments',
52 |   data() {
53 |     return {
54 |       sharedState: store.state,
55 |     }
56 |   },
57 |   methods: {
58 |     getId() {
59 |       store.getId()
60 |     },
61 |     getAnalysis() {
62 |       store.getAnalysis()
63 |     },
64 |   },
65 | }
66 | </script>
67 | 
68 | <style></style>
69 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-cn">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <meta name="referrer" content="no-referrer" />
 8 |     <meta
 9 |       name="description"
10 |       content="Bilibili 评论转图片神器可以将 Bilibili 视频评论区里的评论转换成图片"
11 |     />
12 |     <meta
13 |       name="keywords"
14 |       content="Bilibili,哔哩哔哩,视频,评论,Up主,观众,互动"
15 |     />
16 |     <meta property="og:site_name" content="Bilibili 评论转图片神器" />
17 |     <meta property="og:title" content="Bilibili 评论转图片神器" />
18 |     <meta property="og:url" content="https://bilibili.circlehotarux.me/" />
19 |     <meta
20 |       property="og:description"
21 |       content="Bilibili 评论转图片神器可以将 Bilibili 视频评论区里的评论转换成图片"
22 |     />
23 |     <meta property="og:type" content="website" />
24 |     <meta
25 |       property="og:image"
26 |       content="https://bilibili.circlehotarux.me/images/og-media.png"
27 |     />
28 |     <!-- twitter card -->
29 |     <meta name="twitter:card" content="summary_large_image" />
30 |     <meta name="twitter:site" content="@circlehotarux" />
31 |     <meta name="twitter:url" content="https://bilibili.circlehotarux.me/" />
32 |     <meta name="twitter:creator" content="@circlehotarux" />
33 |     <meta name="twitter:title" content="Bilibili 评论转图片神器" />
34 |     <meta
35 |       name="twitter:description"
36 |       content="Bilibili 评论转图片神器可以将 Bilibili 视频评论区里的评论转换成图片"
37 |     />
38 |     <meta
39 |       name="twitter:image"
40 |       content="https://bilibili.circlehotarux.me/images/og-media.png"
41 |     />
42 |     <link rel="icon" href="/favicon.ico" />
43 |     <title>Bilibili 评论转图片神器</title>
44 |   </head>
45 | 
46 |   <body>
47 |     <noscript>
48 |       <strong
49 |         >We're sorry but Bilibili 评论转图片神器 doesn't work properly without
50 |         JavaScript enabled. Please enable it to continue.</strong
51 |       >
52 |     </noscript>
53 |     <div id="app"></div>
54 |     <!-- built files will be auto injected -->
55 |     <script type="module" src="/src/main.js"></script>
56 |   </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
  1 | import axios from 'axios'
  2 | import { SYSTEM_MESSAGE } from './constants'
  3 | 
  4 | export const store = {
  5 |   state: {
  6 |     AVId: '',
  7 |     BVId: '',
  8 |     title: '',
  9 |     fetching: false,
 10 |     pending: false,
 11 |     comments: [],
 12 |     // 排序模式 0按时间，2按热度
 13 |     mode: 2,
 14 |     // 调整评论样式圆角
 15 |     borderRadius: 10,
 16 |     displayTime: true,
 17 |     darkTheme: false,
 18 |     // 评论数
 19 |     count: 0,
 20 |     // 当前页
 21 |     currentPage: 1,
 22 |     // 页面尺寸
 23 |     perPage: 20,
 24 |     // 下载评论开关
 25 |     download: false,
 26 |     fetchingAnalysis: false,
 27 |     analysis: undefined,
 28 |   },
 29 |   getId() {
 30 |     this.state.fetching = true
 31 | 
 32 |     const rawBVID = this.state.BVId
 33 |     const regex = /BV[0-9A-Z]+/i
 34 |     const matches = rawBVID.match(regex)
 35 |     const realBVID = matches ? matches[0].replace(/^BV/, '') : rawBVID
 36 | 
 37 |     const url = `/bili.api/x/web-interface/view?bvid=${realBVID}`
 38 |     axios
 39 |       .get(url)
 40 |       .then((response) => {
 41 |         const { data } = response
 42 |         this.state.AVId = data.data.aid
 43 |         this.state.title = data.data.title
 44 |         this.getComments()
 45 |       })
 46 |       .catch((error) => console.error(error))
 47 |   },
 48 |   getComments() {
 49 |     const url = `/bili.api/x/v2/reply?type=1&oid=${this.state.AVId}&sort=${this.state.mode}&pn=${this.state.currentPage}&ps=${this.state.perPage}&nohot=1`
 50 |     axios
 51 |       .get(url)
 52 |       .then((response) => {
 53 |         const { data } = response
 54 |         if (data.code === 0) {
 55 |           this.state.comments = data.data.replies
 56 |           this.state.count = data.data.page.count
 57 |           this.state.fetching = false
 58 |         } else {
 59 |           this.state.fetching = false
 60 |           console.log(data.message)
 61 |         }
 62 |       })
 63 |       .catch((error) => {
 64 |         this.state.fetching = false
 65 |         console.error(error)
 66 |       })
 67 |   },
 68 |   downloadComments() {
 69 |     this.state.download = true
 70 |   },
 71 |   getAnalysis() {
 72 |     this.state.fetchingAnalysis = true
 73 |     const comments = this.state.comments
 74 |       .map((comment) => comment.content.message)
 75 |       .join(';')
 76 |     const apiURL = `${process.env.VUE_APP_OPENAI_API_URL}/v1/chat/completions`
 77 |     const messages = [
 78 |       {
 79 |         role: 'system',
 80 |         content: SYSTEM_MESSAGE,
 81 |       },
 82 |       {
 83 |         role: 'user',
 84 |         content: comments,
 85 |       },
 86 |     ]
 87 |     axios
 88 |       .post(
 89 |         apiURL,
 90 |         {
 91 |           model: 'gpt-4o-2024-05-13',
 92 |           messages: messages,
 93 |         },
 94 |         {
 95 |           headers: {
 96 |             'Content-Type': 'application/json',
 97 |             Authorization: `Bearer ${process.env.VUE_APP_OPENAI_API_KEY}`,
 98 |           },
 99 |         }
100 |       )
101 |       .then(({ data }) => {
102 |         this.state.fetchingAnalysis = false
103 |         this.state.analysis = data.choices[0].message.content
104 |       })
105 |       .catch((error) => {
106 |         this.state.fetchingAnalysis = false
107 |         console.error(error)
108 |       })
109 |   },
110 | }
111 | 


--------------------------------------------------------------------------------
/src/components/CommentItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="comment"
  4 |     :class="{ 'comment-dark': sharedState.darkTheme }"
  5 |     :style="{ 'border-radius': sharedState.borderRadius + 'px' }"
  6 |   >
  7 |     <img class="author-thumbnail" :src="comment.member.avatar" alt="头像" />
  8 |     <div class="comment-main">
  9 |       <div
 10 |         class="user-name"
 11 |         :class="{ 'user-name-dark': sharedState.darkTheme }"
 12 |       >
 13 |         {{ comment.member.uname }}
 14 |       </div>
 15 |       <div
 16 |         class="content"
 17 |         :class="{ 'content-dark': sharedState.darkTheme }"
 18 |         v-html="message"
 19 |       ></div>
 20 |       <div class="published-time" v-if="sharedState.displayTime">
 21 |         {{ timestampFormat(comment.ctime) }}
 22 |       </div>
 23 |     </div>
 24 |   </div>
 25 | </template>
 26 | 
 27 | <script>
 28 | import { store } from '../store.js'
 29 | 
 30 | export default {
 31 |   name: 'comment-item',
 32 |   props: {
 33 |     comment: Object,
 34 |   },
 35 |   data() {
 36 |     return {
 37 |       sharedState: store.state,
 38 |     }
 39 |   },
 40 |   computed: {
 41 |     message() {
 42 |       const { message, emote } = this.comment?.content
 43 |       let _message = message
 44 |       if (emote) {
 45 |         Object.keys(emote).map((item) => {
 46 |           const regex = new RegExp(`\\${item}`, 'g')
 47 |           _message = _message.replace(
 48 |             regex,
 49 |             `<img src="${emote[item].url}" style="width: 20px; height: 20px" />`
 50 |           )
 51 |         })
 52 |         return _message
 53 |       }
 54 |       return _message
 55 |     },
 56 |   },
 57 |   methods: {
 58 |     // 时间戳转化
 59 |     timestampFormat: function (timestamp) {
 60 |       function zeroize(num) {
 61 |         return (String(num).length == 1 ? '0' : '') + num
 62 |       }
 63 | 
 64 |       var curTimestamp = parseInt(new Date().getTime() / 1000) //当前时间戳
 65 |       var timestampDiff = curTimestamp - timestamp // 参数时间戳与当前时间戳相差秒数
 66 | 
 67 |       var curDate = new Date(curTimestamp * 1000) // 当前时间日期对象
 68 |       var tmDate = new Date(timestamp * 1000) // 参数时间戳转换成的日期对象
 69 | 
 70 |       var Y = tmDate.getFullYear(),
 71 |         m = tmDate.getMonth() + 1,
 72 |         d = tmDate.getDate()
 73 |       var H = tmDate.getHours(),
 74 |         i = tmDate.getMinutes()
 75 | 
 76 |       if (timestampDiff < 60) {
 77 |         // 一分钟以内
 78 |         return '刚刚'
 79 |       } else if (timestampDiff < 3600) {
 80 |         // 一小时前之内
 81 |         return Math.floor(timestampDiff / 60) + '分钟前'
 82 |       } else if (
 83 |         curDate.getFullYear() == Y &&
 84 |         curDate.getMonth() + 1 == m &&
 85 |         curDate.getDate() == d
 86 |       ) {
 87 |         return '今天' + zeroize(H) + ':' + zeroize(i)
 88 |       } else {
 89 |         var newDate = new Date((curTimestamp - 86400) * 1000) // 参数中的时间戳加一天转换成的日期对象
 90 |         if (
 91 |           newDate.getFullYear() == Y &&
 92 |           newDate.getMonth() + 1 == m &&
 93 |           newDate.getDate() == d
 94 |         ) {
 95 |           return '昨天' + zeroize(H) + ':' + zeroize(i)
 96 |         } else if (curDate.getFullYear() == Y) {
 97 |           return (
 98 |             zeroize(m) +
 99 |             '月' +
100 |             zeroize(d) +
101 |             '日 ' +
102 |             zeroize(H) +
103 |             ':' +
104 |             zeroize(i)
105 |           )
106 |         } else {
107 |           return (
108 |             Y +
109 |             '年' +
110 |             zeroize(m) +
111 |             '月' +
112 |             zeroize(d) +
113 |             '日 ' +
114 |             zeroize(H) +
115 |             ':' +
116 |             zeroize(i)
117 |           )
118 |         }
119 |       }
120 |     },
121 |   },
122 | }
123 | </script>
124 | 
125 | <style>
126 | .comment {
127 |   background-color: var(--comment-general-background);
128 |   display: flex;
129 |   border-radius: 10px;
130 |   margin: 4px;
131 |   padding: 16px;
132 |   width: 360px;
133 | }
134 | 
135 | .comment-dark {
136 |   background-color: var(--comment-dark-background);
137 | }
138 | 
139 | .comment .author-thumbnail {
140 |   border-radius: 50%;
141 |   flex-shrink: 0;
142 |   height: 40px;
143 |   margin-right: 16px;
144 |   width: 40px;
145 | }
146 | 
147 | .comment .comment-main .user-name {
148 |   color: var(--comment-text-primary);
149 |   display: inline-block;
150 |   font-size: 12px;
151 |   font-weight: 700;
152 |   line-height: 18px;
153 |   display: block;
154 | }
155 | 
156 | .comment .comment-main .user-name-dark {
157 |   color: var(--comment-dark-text-primary);
158 | }
159 | 
160 | .comment .comment-main .content {
161 |   color: var(--comment-text-primary);
162 |   line-height: 24px;
163 |   padding: 2px 0;
164 |   font-size: 14px;
165 |   overflow: hidden;
166 | }
167 | 
168 | .comment .comment-main .content-dark {
169 |   color: var(--comment-dark-text-primary);
170 | }
171 | 
172 | .comment .comment-main .published-time {
173 |   color: var(--comment-text-secondary);
174 |   line-height: 26px;
175 |   font-size: 12px;
176 | }
177 | </style>
178 | 


--------------------------------------------------------------------------------
/src/components/MainArea.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div
  4 |       class="form-row justify-content-around align-items-center mx-0 mb-3 px-3 pt-3 pb-2 bg-white rounded-lg"
  5 |       v-if="!sharedState.fetching && sharedState.count > 0"
  6 |     >
  7 |       <div class="col-auto pb-2">
  8 |         <label class="mb-0" for="border-radius">调整圆角</label>
  9 |         <input
 10 |           type="range"
 11 |           id="border-radius"
 12 |           min="0"
 13 |           max="50"
 14 |           v-model="sharedState.borderRadius"
 15 |           :disabled="sharedState.pending"
 16 |         />
 17 |       </div>
 18 |       <div class="col-auto pb-2">
 19 |         <b-form-checkbox v-model="sharedState.displayTime" switch
 20 |           >显示时间</b-form-checkbox
 21 |         >
 22 |       </div>
 23 |       <div class="col-auto pb-2">
 24 |         <b-form-checkbox v-model="sharedState.darkTheme" switch
 25 |           >深色主题</b-form-checkbox
 26 |         >
 27 |       </div>
 28 |       <div class="col-auto pb-2">
 29 |         <select
 30 |           class="custom-select"
 31 |           v-model="sharedState.perPage"
 32 |           @change="getComments()"
 33 |           :disabled="sharedState.pending"
 34 |         >
 35 |           <option value="20">20人</option>
 36 |           <option value="40">40人</option>
 37 |         </select>
 38 |       </div>
 39 |       <div class="col-auto pb-2">
 40 |         <select
 41 |           class="custom-select"
 42 |           v-model="sharedState.mode"
 43 |           @change="getComments()"
 44 |           :disabled="sharedState.pending"
 45 |         >
 46 |           <option value="2">热度排序</option>
 47 |           <option value="0">时间排序</option>
 48 |         </select>
 49 |       </div>
 50 |       <div class="col-auto pb-2">
 51 |         <button
 52 |           type="button"
 53 |           class="btn btn-outline-primary"
 54 |           @click="downloadComments()"
 55 |           :disabled="sharedState.pending"
 56 |         >
 57 |           <span class="align-middle">步骤3：下载图片(.zip)</span>
 58 |           <div
 59 |             class="spinner-border spinner-border-sm"
 60 |             role="status"
 61 |             v-if="sharedState.pending"
 62 |           >
 63 |             <span class="sr-only">处理中...</span>
 64 |           </div>
 65 |         </button>
 66 |       </div>
 67 |     </div>
 68 |     <b-pagination
 69 |       v-model="sharedState.currentPage"
 70 |       :total-rows="sharedState.count"
 71 |       :per-page="sharedState.perPage"
 72 |       prev-text="上一頁"
 73 |       next-text="下一頁"
 74 |       @change="getComments()"
 75 |       size="sm"
 76 |       v-if="sharedState.count > sharedState.perPage"
 77 |     >
 78 |     </b-pagination>
 79 |     <div class="d-flex flex-wrap align-items-start justify-content-center">
 80 |       <comment-item
 81 |         v-for="(comment, index) in sharedState.comments"
 82 |         :key="index"
 83 |         :comment="comment"
 84 |         ref="comment"
 85 |       />
 86 |     </div>
 87 |   </div>
 88 | </template>
 89 | 
 90 | <script>
 91 | import { store } from '../store.js'
 92 | import CommentItem from '@/components/CommentItem.vue'
 93 | import JSZip from 'jszip'
 94 | import { saveAs } from 'file-saver'
 95 | import html2canvas from 'html2canvas'
 96 | 
 97 | export default {
 98 |   name: 'main-area',
 99 |   data() {
100 |     return {
101 |       sharedState: store.state,
102 |     }
103 |   },
104 |   components: {
105 |     CommentItem,
106 |   },
107 |   methods: {
108 |     getComments() {
109 |       store.getComments()
110 |     },
111 |     downloadComments() {
112 |       this.$nextTick(() => {
113 |         store.state.pending = true
114 |         let done = 0
115 |         // 初始化一个zip打包对象
116 |         var zip = new JSZip()
117 |         // 创建images文件夹用于存放图片
118 |         var img = zip.folder(store.state.title)
119 |         // 获取需要绘制的元素
120 |         let comments = this.$refs.comment
121 |         for (let i = 0; i < comments.length; i++) {
122 |           // 评论内容做图片名
123 |           let imgName = comments[i].$el.innerText.split('\n')[1]
124 |           // 返回元素的大小及其相对于视口的位置
125 |           let rect = comments[i].$el.getBoundingClientRect()
126 |           rect.x += 8.5
127 |           // 获取滚动轴滚动的长度
128 |           let scrollTop =
129 |             document.documentElement.scrollTop || document.body.scrollTop
130 |           html2canvas(comments[i].$el, {
131 |             // 允许跨域（图片相关）
132 |             allowTaint: true,
133 |             // 允许跨域（图片相关）
134 |             useCORS: true,
135 |             // 截图的背景颜色
136 |             backgroundColor: 'transparent',
137 |             // 图片x轴偏移量
138 |             x: rect.x,
139 |             scrollY: -scrollTop,
140 |             // 放大2倍
141 |             scale: 2,
142 |             // 关闭日志
143 |             logging: false,
144 |           })
145 |             .then(
146 |               (canvas) => {
147 |                 let imgData = canvas
148 |                   .toDataURL()
149 |                   .split('data:image/png;base64,')[1]
150 |                 //这个images文件目录中创建一个base64数据为imgData的图像，图像名是上面获取的imaName
151 |                 img.file(imgName + '.png', imgData, { base64: true })
152 |                 done += 1
153 |               },
154 |               function (error) {
155 |                 console.log(error)
156 |                 store.state.pending = false
157 |                 alert('抱歉！出错啦w(ﾟДﾟ)w\n请重试(ノへ￣、)')
158 |                 return
159 |               }
160 |             )
161 |             .then(function () {
162 |               // 把打包内容异步转成blob二进制格式
163 |               // 判断循环结束，则开始下载压缩
164 |               if (done === comments.length) {
165 |                 zip.generateAsync({ type: 'blob' }).then(function (content) {
166 |                   saveAs(content, store.state.title + '.zip')
167 |                 })
168 |               } else return
169 |               store.state.pending = false
170 |             })
171 |         }
172 |       })
173 |     },
174 |   },
175 | }
176 | </script>
177 | 
178 | <style></style>
179 | 


--------------------------------------------------------------------------------