this.containerRef = ele}>
191 |
199 |
200 |
201 |
202 | {this.loading && !this.responseData &&
}
203 | {this.error &&
}
204 | {this.responseData &&
}
205 | {this.responseData && this.responseData.total === 0 &&
}
206 | {this.responseData && (
207 |
213 | )}
214 |
8 | 
16 | 
6 |
7 | ## 后端
8 |
9 | 把数据定义在 JS 对象（与 JSON 的语法互通）中，然后放到 Serverless Function 的代码中，非常苯的方法 🥹
10 |
11 | 示例代码 [packages/api/src/mock/custom.js](/packages/api/src/mock/custom.js)
12 |
13 | 下面是 `customData` 的 ts 类型：
14 |
15 | ```ts
16 | interface CustomData {
17 | // 动画
18 | anime?: CollectionData
19 | // 游戏
20 | game?: CollectionData
21 | // 书籍
22 | book?: CollectionData
23 | }
24 | // 以动画为例：想看、在看、看过
25 | interface CollectionData {
26 | want?: ListItem[]
27 | doing?: ListItem[]
28 | done?: ListItem[]
29 | }
30 | interface ListItem {
31 | // 名称
32 | name?: string
33 | // 中文名
34 | nameCN?: string
35 | // 简介
36 | summary: string
37 | // 封面
38 | cover?: string
39 | // 链接
40 | url: string
41 | // 标签
42 | labels: LabelItem[]
43 | }
44 | interface LabelItem {
45 | // 标签名
46 | label: string
47 | // 标签值
48 | value?: string | number
49 | }
50 | ```
51 |
52 | 例如放到 `Val Town ` 中，多余的字段可以删掉
53 |
54 | 
55 |
56 | 由于 `vercel` 是通过 fork 本仓库进行部署的，因此需要把 `customData` 对象放到以下路径的代码中：[api/vercel.js](/api/vercel.js)，然后提交更改。
57 |
58 | ## 前端
59 |
60 | 启用自定义数据源
61 |
62 | ```html
63 | 
20 |
21 | 
22 |
23 | ## 文档
24 |
25 | 这里有视频教程 *⸜( •ᴗ• )⸝* [https://www.bilibili.com/video/BV1ht421W74u](https://www.bilibili.com/video/BV1ht421W74u)
26 |
27 | - 使用： [docs/usage.md](docs/usage.md)
28 | - 部署后端： [docs/backend.md](docs/backend.md)
29 | - 自定义数据源： [docs/custom.md](docs/custom.md)
30 |
31 | ## 第三方集成
32 |
33 | - Valaxy: [valaxy-addon-bangumi](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-bangumi)
34 |
35 | ## How to development
36 |
37 | 项目采用 monorepo，使用 pnpm 管理依赖，并在 `package.json` 指定了版本，版本对不上可能无法安装，可以把 `package.json` 里的限制删了
38 |
39 | ```sh
40 | pnpm i
41 | ```
42 |
43 | ### server
44 |
45 | server 用的是 vercel 的服务，在本地开发时要关联 vercel 上的一个 project
46 |
47 | ```sh
48 | pnpm run build:api
49 |
50 | # 登陆并关联 vercel
51 | pnpm run dev:vercel
52 | ```
53 |
54 | 仓库在 `./packages/api`
55 |
56 | 感觉比较麻烦可以直接改前端页面所用到的后端服务 `https://yi_xiao_jiu-bangumi.web.val.run`，文件位置在 `packages/bilibili-bangumi-component/src/index.html:60`，
57 |
58 | ### client
59 |
60 | ```sh
61 | pnpm run dev:lib
62 | ```
63 |
64 | 仓库在 `./packages/bilibili-bangumi-component`
65 |
--------------------------------------------------------------------------------
/packages/bilibili-bangumi-component/src/shared/utils.ts:
--------------------------------------------------------------------------------
1 | import type { ResponseType } from './types'
2 |
3 | export function serializeSearchParams(searchParams: object) {
4 | return Object.entries(searchParams)
5 | .filter(([, value]) => !!value)
6 | .map(([key, value]) => `${key}=${value}`)
7 | .join('&')
8 | }
9 |
10 | export function parseSearchParams(url: URL) {
11 | return Object.fromEntries(Array.from(url.searchParams.entries()).filter(([, value]) => !!value))
12 | }
13 |
14 | // 数字转中文
15 | export function numberToZh(num: number) {
16 | const numString = num.toString()
17 | if (numString.length < 5)
18 | return numString
19 |
20 | if (numString.length < 9) {
21 | const displayStr = numString.slice(0, -3)
22 | const length = displayStr.length
23 | const sub = displayStr[length - 1] === '0' ? '' : `.${displayStr[length - 1]}`
24 | return `${displayStr.slice(0, length - 1)}${sub}万`
25 | }
26 |
27 | const displayStr = numString.slice(0, -7)
28 | const length = displayStr.length
29 | const sub = displayStr[length - 1] === '0' ? '' : `.${displayStr[length - 1]}`
30 | return `${displayStr.slice(0, length - 1)}${sub}亿`
31 | }
32 |
33 | export function formatUrl(baseUrl: string) {
34 | if (!baseUrl.startsWith('http'))
35 | return baseUrl
36 |
37 | const url = new URL(baseUrl)
38 | const pathname = url.pathname === '/' ? '' : url.pathname
39 | return `${url.origin}${pathname}`
40 | }
41 |
42 | export function generateRes(params: ResponseType) {
43 | return Response.json(params, {
44 | status: params.code,
45 | })
46 | }
47 |
48 | export function thorttle