新增书架区

Author: CatCodeMe

packages/pure/components/user/MdxRepl.astro

@@ -7,7 +7,7 @@ const { width } = Astro.props
 ---
 
 <div class='mdx-repl overflow-hidden rounded-xl border'>
-  <div class='mdx-repl-container flex flex-col items-center justify-center p-4'>
+  <div class='mdx-repl-container not-prose flex flex-col items-center justify-center p-4'>
     <slot />
   </div>
   <div class='bg-muted'>

public/bookshelf.json

@@ -0,0 +1 @@
+[{}]

public/clouds/mountain.jpg

@@ -1,7 +1,6 @@
 // Import all cat images
 import _1h1 from '@/assets/cats/1-h-1.jpg';
 import _1h2 from '@/assets/cats/1-h-2.jpg';
-import _1h3 from '@/assets/cats/1-h-3.jpg';
 import _1h from '@/assets/cats/1-h.jpg';
 import _1m1 from '@/assets/cats/1-m-1.jpg';
 import _1m2 from '@/assets/cats/1-m-2.png';
@@ -93,31 +92,21 @@ export const photos: Photo[] = [
   {
     subjects: ['小花'],
     image: _1h1,
-    tags: ['三花', '田园猫', '可爱', 'Queen'],
   },
   {
     subjects: ['小花'],
     image: _1h2,
     capturedAt: '2025-04-03',
-    tags: ['三花', '田园猫', '可爱', 'Queen'],
-  },
-  {
-    subjects: ['小花'],
-    image: _1h3,
-    capturedAt: '2025-04-03',
-    caption: '小花的第三张照片'
   },
   {
     subjects: ['小花'],
     image: _1h,
     capturedAt: '2025-04-03',
-    tags: ['花猫'],
   },
   {
     subjects: ['月亮'],
     image: _1m1,
     capturedAt: '2025-04-03',
-    tags: ['金吉拉','可爱']
   },
   {
     subjects: ['月亮'],
@@ -142,7 +131,6 @@ export const photos: Photo[] = [
     subjects: ['大姐'],
     image: _211,
     capturedAt: '2025-04-03',
-    tags: ['大姐猫']
   },
   {
     subjects: ['大头'],
@@ -159,7 +147,6 @@ export const photos: Photo[] = [
     subjects: ['老三'],
     image: _223,
     capturedAt: '2025-04-03',
-    tags: ['老三猫']
   },
   {
     subjects: ['老四'],
@@ -181,19 +168,16 @@ export const photos: Photo[] = [
     subjects: ['老四'],
     image: _224,
     capturedAt: '2025-04-03',
-    tags: ['老四猫', '主图']
   },
   {
     subjects: ['老六'],
     image: _2261,
     capturedAt: '2025-04-03',
-    tags: ['老六猫', '建筑']
   },
   {
     subjects: ['老六'],
     image: _226,
     capturedAt: '2025-04-03',
-    caption: '老六的主要照片'
   },
   {
     subjects: ['小六'],

src/assets/cats/1-h-3.jpg

@@ -0,0 +1,127 @@
+---
+import { Icon } from '@/custom/components/user';
+import type { IconName } from 'packages/pure/libs/icons';
+
+interface Props {
+  item: {
+    title: string;
+    type: 'book' | 'paper' | 'article';
+    status: 'read' | 'reading' | 'to-read';
+    description?: string;
+    rating?: number;
+    identifier?: string;
+    sourceUrl?: string;
+    links?: string[];
+    tags?: string[];
+  };
+  postsMap: Map<string, { title: string; }>;
+  index: number;
+}
+
+const { item, postsMap, index } = Astro.props;
+
+const typeIcons: { [key: string]: IconName } = {
+  book: 'book',
+  paper: 'document',
+  article: 'link'
+};
+
+const identifierIcon = item.type === 'book' ? 'hashtag' : 'doi';
+
+const linkedPosts = item.links?.map(slug => ({
+  slug,
+  title: postsMap.get(slug)?.title || slug
+})) || [];
+
+let sourceHostname = '';
+if (item.type === 'article' && item.sourceUrl) {
+  try {
+    sourceHostname = new URL(item.sourceUrl).hostname;
+  } catch (e) {
+    // Invalid URL, ignore.
+  }
+}
+---
+
+<div
+  class="reading-card group relative flex flex-col overflow-hidden rounded-lg border bg-background/60 p-4 transition-all duration-300 hover:border-primary/50 hover:shadow-lg hover:bg-background/90"
+>
+  <!-- Index Number -->
+  <span class="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-full bg-muted/60 text-xs font-bold text-muted-foreground transition-colors duration-300 group-hover:bg-muted/90">
+    {index}
+  </span>
+
+  <div class="relative z-10 flex flex-col h-full">
+    <!-- Card Header: Type Icon + Title -->
+    <div class="flex items-start gap-2">
+      <Icon name={typeIcons[item.type]} class="size-5 flex-shrink-0 text-muted-foreground" />
+      <h3 class="text-base font-semibold text-foreground">{item.title}</h3>
+    </div>
+
+    <!-- Attributes Section: Badges -->
+    <div class="mt-2 flex flex-wrap items-center gap-2">
+      {item.rating && (
+        <div class="flex items-center gap-1 rounded-full bg-muted/80 px-2 py-0.5 text-xs font-medium text-muted-foreground">
+          <Icon name="star" class="size-3.5 text-yellow-400" />
+          <span>{item.rating.toFixed(1)}</span>
+        </div>
+      )}
+      {item.identifier && (
+        <div class="flex items-center gap-1 rounded-full bg-muted/80 px-2 py-0.5 text-xs font-medium text-muted-foreground">
+          <Icon name={identifierIcon} class="size-3.5" />
+          <span>{item.identifier}</span>
+        </div>
+      )}
+    </div>
+
+    <!-- Description -->
+    {item.description && (
+      <p class="mt-3 border-l-2 border-border pl-3 text-sm text-muted-foreground">
+        {item.description}
+      </p>
+    )}
+
+    <!-- Tags -->
+    {item.tags && item.tags.length > 0 && (
+      <div class="mt-3 flex flex-wrap gap-1.5">
+        {item.tags.map(tag => (
+          <span class="rounded bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary/80">
+            {tag}
+          </span>
+        ))}
+      </div>
+    )}
+
+    <!-- Spacer to push content to bottom -->
+    <div class="flex-grow"></div>
+
+    <!-- Linked Notes -->
+    {linkedPosts.length > 0 && (
+      <div class="mt-3 border-t pt-3">
+        <h4 class="mb-1.5 text-xs font-semibold text-muted-foreground">相关笔记:</h4>
+        <ul class="flex flex-col gap-1">
+          {linkedPosts.map((post) => (
+            <li>
+              <a
+                href={`/blog/${post.slug}`}
+                class="text-sm text-primary/80 hover:text-primary hover:underline underline-offset-2"
+              >
+                {post.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )}
+
+    <!-- Source URL (New Position & Style) -->
+    {sourceHostname && (
+       <div class="mt-3 border-t pt-3">
+         <a href={item.sourceUrl} target="_blank" rel="nofollow noopener noreferrer" class="flex items-center gap-2 text-sm font-medium text-primary hover:underline">
+           <img src={`https://favicon.im/${sourceHostname}`} alt={`Favicon for ${sourceHostname}`} class="size-4" />
+           <span>阅读原文</span>
+         </a>
+       </div>
+    )}
+  </div>
+</div>

src/assets/cats/config/data.ts

@@ -0,0 +1,148 @@
+---
+title: 书架功能配置指南
+description: '如何配置和使用书架页面'
+publishDate: 2025-10-15 22:00:00
+slug: shelf-config
+tags: ['建站', '功能说明']
+---
+
+import { MdxRepl, Aside } from '@/custom/components/user';
+import { TabItem, Tabs } from 'astro-pure/user';
+import ReadingCard from '@/components/reading/ReadingCard.astro';
+
+"书架"页面是一个独立的看板, 用于展示您的阅读轨迹. 其所有内容都通过一个单独的 JSON 文件进行管理, 不依赖于任何文章的 frontmatter.
+
+## 1. 核心配置文件
+
+您需要维护的唯一文件是位于项目根目录下 `public/` 文件夹中的 `bookshelf.json`。
+
+## 2. 数据结构详解
+
+该 JSON 文件是一个包含多个“阅读条目”对象的数组. 每个对象代表一张卡片, 其结构如下:
+
+<Aside type="note" title="字段说明">
+| 字段 | 类型 | 是否必需 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `title` | `string` | 必需 | 书籍, 论文或文章的标题. |
+| `type` | `string` | 必需 | `'book' \| 'paper' \| 'article'`, 决定了卡片上显示的图标. |
+| `status` | `string` | 必需 | `'to-read' \| 'reading' \| 'read'`, 决定了卡片出现在看板的哪一列. |
+| `description` | `string` | 可选 | 一句简短的描述, 会显示在标题下方. |
+| `rating` | `number` | 可选 | 评分, 1-5 的数字, 会以星星形式展示. |
+| `identifier` | `string` | 可选 | 唯一标识符. 对于书籍是 ISBN, 对于论文是 DOI. |
+| `sourceUrl` | `string` | 可选 | **仅用于 `article` 类型**, 指向原文的链接. |
+| `tags` | `string[]` | 可选 | 标签数组, 会在卡片底部显示为彩色徽章. |
+| `links` | `string[]` | 可选 | 关联的博客笔记. 只填写笔记的 `slug`. |
+</Aside>
+
+## 3. 工作流程
+
+假设您读完一本书,并为它写了一篇读后感, 如何将它们添加到书架呢?
+
+1.  **撰写笔记**: 像往常一样, 在 `src/content/blog/` 目录下创建您的 `.mdx` 笔记文件. 完成文章后, 记下您在 frontmatter 中为它设置的 `slug`.
+
+2.  **打开配置文件**: 打开 `public/bookshelf.json` 文件.
+
+3.  **添加新条目**: 在 JSON 数组中添加一个新的对象, 代表您读完的这本书. 填写 `title`, `type`, `status` 等信息.
+
+4.  **关联笔记**: 在该对象的 `links` 数组中, 添加您刚刚记下的笔记 `slug` 字符串.
+
+5.  **保存**: 保存文件. 网站下次构建时, 书架页面就会自动更新.
+
+## 4. 卡片效果预览
+
+下面是不同类型卡片的渲染效果和对应的 JSON 数据结构。
+
+### 书籍 (Book) 示例
+
+<MdxRepl>
+  <ReadingCard
+    item={{
+      title: "人类简史",
+      type: "book",
+      status: "read",
+      description: "从石器时代到人工智能, 一部宏大的人类历史.",
+      rating: 5,
+      identifier: "978-7-5086-6074-3",
+      tags: ["历史", "人类学"],
+      links: ["sapiens-note-1"]
+    }}
+    postsMap={new Map()}
+    index={1}
+  />
+  <Fragment slot="desc">
+  ````json
+  {
+    "title": "人类简史",
+    "type": "book",
+    "status": "read",
+    "description": "从石器时代到人工智能, 一部宏大的人类历史.",
+    "rating": 5,
+    "identifier": "978-7-5086-6074-3",
+    "tags": ["历史", "人类学"],
+    "links": ["sapiens-note-1"]
+  }
+  ````
+  </Fragment>
+</MdxRepl>
+
+### 论文 (Paper) 示例
+
+<MdxRepl>
+  <ReadingCard
+    item={{
+      title: "Attention Is All You Need",
+      type: "paper",
+      status: "read",
+      description: "Transformer 架构的开山之作, 奠定了现代大语言模型的基础.",
+      rating: 5,
+      identifier: "10.48550/arXiv.1706.03762",
+      tags: ["NLP", "Transformer"],
+      links: ["transformer-explained"]
+    }}
+    postsMap={new Map([['transformer-explained', {title: 'Transformer 架构解析'}]])}
+    index={2}
+  />
+  <Fragment slot="desc">
+  ````json
+  {
+    "title": "Attention Is All You Need",
+    "type": "paper",
+    "status": "read",
+    "description": "Transformer 架构的开山之作, 奠定了现代大语言模型的基础.",
+    "rating": 5,
+    "identifier": "10.48550/arXiv.1706.03762",
+    "tags": ["NLP", "Transformer"],
+    "links": ["transformer-explained"]
+  }
+  ````
+  </Fragment>
+</MdxRepl>
+
+### 文章 (Article) 示例
+
+<MdxRepl>
+  <ReadingCard
+    item={{
+      title: "Working with TCP Sockets",
+      type: "article",
+      status: "reading",
+      description: "一篇关于 TCP Socket 编程的优秀文章.",
+      sourceUrl: "https://www.google.com",
+      tags: ["Network", "Socket"]
+    }}
+    postsMap={new Map()}
+    index={3}
+  />
+  <Fragment slot="desc">
+  ````json
+  {
+    "title": "Working with TCP Sockets",
+    "type": "article",
+    "status": "reading",
+    "description": "一篇关于 TCP Socket 编程的优秀文章.",
+    "sourceUrl": "https://www.google.com",
+    "tags": ["Network", "Socket"]
+  }
+  ````
+  </Fragment>
+</MdxRepl>