feat: 添加VNDB页面 - #542
Open
lizzzhh wants to merge 5 commits into
Open
Conversation
✅ Deploy Preview for demo-firefly ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
审阅者指南实现了一个新的 VNDB 视觉小说列表页面，支持静态（构建时）和动态（客户端）两种数据模式，包括 VNDB 专用配置、API 集成、构建时本地封面下载/压缩、用于标签/筛选/卡片的 Svelte UI 组件，以及完整的 i18n 国际化支持。 VNDB 页面静态 vs 动态数据流时序图sequenceDiagram
actor User
participant VndbPage as vndb.astro
participant VndbGrid as VndbGrid
participant VndbUtils as fetchVndbUlist
User->>VndbPage: HTTP GET /vndb/
VndbPage->>VndbPage: read siteConfig.vndb
alt static mode
VndbPage->>VndbUtils: fetchVndbUlist(apiUrl, userId, apiToken, results, page)
VndbUtils-->>VndbPage: VndbUlistResponse
VndbPage->>VndbPage: buildVndbTabs(allItems)
VndbPage->>VndbGrid: VndbGrid(tabs, vndbData, vnBaseUrl, blurNsfw)
Note right of VndbGrid: client:load
VndbGrid->>VndbGrid: getVndbItemsForTab(all, activeTab)
else dynamic mode
VndbPage->>VndbGrid: VndbGrid(fetchConfig)
Note right of VndbGrid: client:load
VndbGrid->>VndbGrid: onMount
VndbGrid->>VndbUtils: fetchVndbUlist(apiUrl, userId, apiToken, results, page)
VndbUtils-->>VndbGrid: VndbUlistResponse
VndbGrid->>VndbGrid: buildVndbTabs(allItems)
VndbGrid->>VndbGrid: getVndbItemsForTab(all, activeTab)
end
VndbGrid-->>User: Render VN cards with Card
文件级改动
可能关联的 Issue
提示与命令与 Sourcery 交互
自定义你的体验访问你的 dashboard 以：
获取帮助Original review guide in EnglishReviewer's GuideImplements a new VNDB visual novel list page with both static (build-time) and dynamic (client-side) data modes, including VNDB-specific config, API integration, local cover download/compression at build, Svelte UI components for tabs/filters/cards, and full i18n support. Sequence diagram for VNDB page static vs dynamic data flowsequenceDiagram
actor User
participant VndbPage as vndb.astro
participant VndbGrid as VndbGrid
participant VndbUtils as fetchVndbUlist
User->>VndbPage: HTTP GET /vndb/
VndbPage->>VndbPage: read siteConfig.vndb
alt static mode
VndbPage->>VndbUtils: fetchVndbUlist(apiUrl, userId, apiToken, results, page)
VndbUtils-->>VndbPage: VndbUlistResponse
VndbPage->>VndbPage: buildVndbTabs(allItems)
VndbPage->>VndbGrid: VndbGrid(tabs, vndbData, vnBaseUrl, blurNsfw)
Note right of VndbGrid: client:load
VndbGrid->>VndbGrid: getVndbItemsForTab(all, activeTab)
else dynamic mode
VndbPage->>VndbGrid: VndbGrid(fetchConfig)
Note right of VndbGrid: client:load
VndbGrid->>VndbGrid: onMount
VndbGrid->>VndbUtils: fetchVndbUlist(apiUrl, userId, apiToken, results, page)
VndbUtils-->>VndbGrid: VndbUlistResponse
VndbGrid->>VndbGrid: buildVndbTabs(allItems)
VndbGrid->>VndbGrid: getVndbItemsForTab(all, activeTab)
end
VndbGrid-->>User: Render VN cards with Card
File-Level Changes
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - 我发现了两个问题，并给出了一些整体性的反馈：
- TabNav.svelte 在一个 $effect 中注册了 hashchange 监听器并访问 window，但没有任何运行时保护，这在 SSR 时可能会抛错；建议用
typeof window !== 'undefined'来包裹这些引用，或者把它们移动到 onMount 中。 - line-clamp 样式在 Card.svelte 和 vndb.astro 中被重复定义；建议将这部分样式集中管理（例如通过共享的 CSS 工具类，或使用现有的 Tailwind line-clamp 工具类），以避免不同实现之间出现偏差。
- vndb.astro 同时使用了硬编码的中文字符串（例如「未配置 VNDB 用户ID」）和基于 i18n 的消息；建议为这些文本添加对应的 i18n key，这样 VNDB 页面文案在不同语言中都可以一致地本地化。
给 AI Agent 的提示
请根据这次代码评审中的评论进行修改：
## 总体评论
- TabNav.svelte 在一个 $effect 中注册了 hashchange 监听器并访问 window，但没有任何运行时保护，这在 SSR 时可能会抛错；建议用 `typeof window !== 'undefined'` 来包裹这些引用，或者把它们移动到 onMount 中。
- line-clamp 样式在 Card.svelte 和 vndb.astro 中被重复定义；建议将这部分样式集中管理（例如通过共享的 CSS 工具类，或使用现有的 Tailwind line-clamp 工具类），以避免不同实现之间出现偏差。
- vndb.astro 同时使用了硬编码的中文字符串（例如「未配置 VNDB 用户ID」）和基于 i18n 的消息；建议为这些文本添加对应的 i18n key，这样 VNDB 页面文案在不同语言中都可以一致地本地化。
## 单独评论
### 评论 1
<location path="src/components/pages/vndb/VndbSection.svelte" line_range="27-36" />
<code_context>
const filterCounts = $derived(() => {
</code_context>
<issue_to_address>
**issue (bug_risk):** 派生值被当作函数来使用，这会在运行时出错。
在这个 runes 文件中，`filterCounts`、`filters`、`filteredItems`、`totalPages` 和 `pagedItems` 都是通过 `$derived` 创建的，而 `$derived` 返回的是值而不是可调用函数。后续却将它们当作函数来调用（例如 `filters()`、`filteredItems().length`），这会在运行时抛出错误。请将它们作为普通值来使用（例如 `filters`、`filteredItems.length`），包括在分页逻辑和模板绑定中。
</issue_to_address>
### 评论 2
<location path="src/components/pages/vndb/Card.svelte" line_range="232-240" />
<code_context>
+</a>
+
+<style>
+ .line-clamp-2 {
+ display: -webkit-box;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+ .line-clamp-1 {
+ display: -webkit-box;
+ line-clamp: 1;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
</code_context>
<issue_to_address>
**issue (bug_risk):** 自定义的 line-clamp CSS 使用了非标准的 `line-clamp` 属性，因此可能无法生效。
`.line-clamp-1` 和 `.line-clamp-2` 使用的是 `line-clamp` 而不是 `-webkit-line-clamp`，所以在大多数浏览器中不会起到截断效果。请对齐 `src/pages/vndb.astro` 中的实现（使用 `-webkit-line-clamp`，并配合 `display: -webkit-box` 和 `-webkit-box-orient: vertical`），或者抽取成一个共享工具类，以保持行为一致。
</issue_to_address>帮我变得更有用！请对每条评论点击 👍 或 👎，我会根据你的反馈持续改进评审质量。
Original comment in English
Hey - I've found 2 issues, and left some high level feedback:
- TabNav.svelte attaches a hashchange listener and accesses window in a $effect without any runtime guard, which can throw during SSR; consider wrapping those references in a typeof window !== 'undefined' check or moving them into onMount.
- Line-clamp styles are duplicated in Card.svelte and vndb.astro; consider centralizing this styling (e.g., via a shared CSS utility or existing Tailwind line-clamp utilities) to avoid drift between implementations.
- vndb.astro mixes hardcoded Chinese strings (e.g. 未配置 VNDB 用户ID) with i18n-based messages; it may be clearer to add corresponding i18n keys so that the VNDB page text is consistently localizable across languages.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- TabNav.svelte attaches a hashchange listener and accesses window in a $effect without any runtime guard, which can throw during SSR; consider wrapping those references in a typeof window !== 'undefined' check or moving them into onMount.
- Line-clamp styles are duplicated in Card.svelte and vndb.astro; consider centralizing this styling (e.g., via a shared CSS utility or existing Tailwind line-clamp utilities) to avoid drift between implementations.
- vndb.astro mixes hardcoded Chinese strings (e.g. 未配置 VNDB 用户ID) with i18n-based messages; it may be clearer to add corresponding i18n keys so that the VNDB page text is consistently localizable across languages.
## Individual Comments
### Comment 1
<location path="src/components/pages/vndb/VndbSection.svelte" line_range="27-36" />
<code_context>
const filterCounts = $derived(() => {
</code_context>
<issue_to_address>
**issue (bug_risk):** Derived values are being used as functions, which will break at runtime.
In this runes file, `filterCounts`, `filters`, `filteredItems`, `totalPages`, and `pagedItems` are all created with `$derived`, which returns values, not callables. Later they’re invoked like functions (e.g. `filters()`, `filteredItems().length`), which will throw at runtime. Use them as plain values instead (e.g. `filters`, `filteredItems.length`), including in the pagination logic and template bindings.
</issue_to_address>
### Comment 2
<location path="src/components/pages/vndb/Card.svelte" line_range="232-240" />
<code_context>
+</a>
+
+<style>
+ .line-clamp-2 {
+ display: -webkit-box;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+ .line-clamp-1 {
+ display: -webkit-box;
+ line-clamp: 1;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
</code_context>
<issue_to_address>
**issue (bug_risk):** Custom line-clamp CSS uses the nonstandard `line-clamp` property, so clamping may not work.
`.line-clamp-1` and `.line-clamp-2` use `line-clamp` instead of `-webkit-line-clamp`, so they won’t clamp in most browsers. Please match the implementation in `src/pages/vndb.astro` (use `-webkit-line-clamp` plus `display: -webkit-box` and `-webkit-box-orient: vertical`), or extract a shared utility so the behavior stays consistent.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Type of change
Checklist
Related Issue
#540
Changes
How To Test
Screenshots (if applicable)
Additional Notes
Summary by Sourcery
添加一个带有静态和动态模式的 VNDB 视觉小说列表页面，包括本地封面处理和导航集成。
New Features:
/vndb/页面，以静态或动态模式显示用户的 VNDB 视觉小说列表，并支持状态标签页、过滤器和分页。Enhancements:
Build:
Original summary in English
Summary by Sourcery
Add a VNDB visual novel list page with static and dynamic modes, including local cover handling and navigation integration.
New Features:
Enhancements:
Build: