@tnotesjs/core 0.1.21 → 0.1.23

package/vitepress/components/NotesTable/NotesTable.vue

@@ -1,99 +1,175 @@
-<template>
-  <div v-if="errorMessage" :class="$style.error">
-    {{ errorMessage }}
-  </div>
-
-  <div v-else-if="notFoundIds.length > 0" :class="$style.warning">
-    以下笔记 ID 未找到配置: {{ notFoundIds.join(', ') }}
-  </div>
-
-  <table v-if="tableData.length > 0" :class="$style.notesTable">
-    <thead>
-      <tr>
-        <th>笔记</th>
-        <th>简介</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="note in tableData" :key="note.id">
-        <td>
-          <a :href="note.url" :class="$style.noteLink">
-            <span :class="$style.noteId">{{ note.id }}.</span>
-            <span>{{ note.title }}</span>
-          </a>
-        </td>
-        <td>
-          <span
-            :class="[$style.description, { [$style.empty]: !note.description }]"
-          >
-            {{ note.description || '暂无简介' }}
-          </span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script setup lang="ts">
-import { useData } from 'vitepress'
+<template>
+  <div v-if="errorMessage" class="error">
+    {{ errorMessage }}
+  </div>
+
+  <div v-else-if="notFoundIds.length > 0" class="warning">
+    以下笔记 ID 未找到配置: {{ notFoundIds.join(', ') }}
+  </div>
+
+  <table v-if="tableData.length > 0" class="notesTable">
+    <thead>
+      <tr>
+        <th>笔记</th>
+        <th>简介</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="note in tableData" :key="note.id">
+        <td>
+          <a :href="note.url" class="noteLink">
+            <span class="noteId">{{ note.id }}.</span>
+            <span>{{ note.title }}</span>
+          </a>
+        </td>
+        <td>
+          <span class="description" :class="{ empty: !note.description }">
+            {{ note.description || '暂无简介' }}
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
 import { computed } from 'vue'
-
-// @ts-expect-error - VitePress data loader exports data at runtime
-import { data as allNotesConfig } from '../notesConfig.data.ts'
-
-interface Props {
-  ids: string[]
-}
-
-const props = defineProps<Props>()
-const vpData = useData()
-
-// 错误消息
-const errorMessage = computed(() => {
-  if (!props.ids || !Array.isArray(props.ids)) {
-    return '错误: ids 属性必须是一个数组'
-  }
-  if (props.ids.length === 0) {
-    return '错误: ids 数组不能为空'
-  }
-  return null
-})
-
-// 未找到的笔记 ID
-const notFoundIds = computed(() => {
-  if (errorMessage.value) return []
-
-  return props.ids.filter((id) => !allNotesConfig[id])
-})
-
-// 表格数据
-const tableData = computed(() => {
-  if (errorMessage.value) return []
-
-  return props.ids
-    .filter((id) => allNotesConfig[id]) // 只保留存在的笔记
-    .map((id) => {
-      const config = allNotesConfig[id]
-      const base = vpData.site.value.base || '/'
-
-      // 从 redirect 路径中提取笔记标题
-      // redirect 格式: notes/0001. 标题/README
-      let title = id
-      if (config.redirect) {
-        const match = config.redirect.match(/notes\/\d{4}\.\s*([^/]+)\/README/)
-        if (match) {
-          title = match[1]
-        }
-      }
-
-      return {
-        id,
-        title,
-        description: config.description || '',
-        url: config.redirect ? `${base}${config.redirect}` : '#',
-      }
-    })
-})
-</script>
-
-<style module src="./NotesTable.module.scss"></style>
+
+// @ts-expect-error - VitePress data loader exports data at runtime
+import { data as allNotesConfig } from '../notesConfig.data.ts'
+
+interface Props {
+  ids: string[]
+}
+
+const props = defineProps<Props>()
+const vpData = useData()
+
+// 错误消息
+const errorMessage = computed(() => {
+  if (!props.ids || !Array.isArray(props.ids)) {
+    return '错误: ids 属性必须是一个数组'
+  }
+  if (props.ids.length === 0) {
+    return '错误: ids 数组不能为空'
+  }
+  return null
+})
+
+// 未找到的笔记 ID
+const notFoundIds = computed(() => {
+  if (errorMessage.value) return []
+
+  return props.ids.filter((id) => !allNotesConfig[id])
+})
+
+// 表格数据
+const tableData = computed(() => {
+  if (errorMessage.value) return []
+
+  return props.ids
+    .filter((id) => allNotesConfig[id]) // 只保留存在的笔记
+    .map((id) => {
+      const config = allNotesConfig[id]
+      const base = vpData.site.value.base || '/'
+
+      // 从 redirect 路径中提取笔记标题
+      // redirect 格式: notes/0001. 标题/README
+      let title = id
+      if (config.redirect) {
+        const match = config.redirect.match(/notes\/\d{4}\.\s*([^/]+)\/README/)
+        if (match) {
+          title = match[1]
+        }
+      }
+
+      return {
+        id,
+        title,
+        description: config.description || '',
+        url: config.redirect ? `${base}${config.redirect}` : '#',
+      }
+    })
+})
+</script>
+
+<style scoped lang="scss">
+.notesTable {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  font-size: 0.95rem;
+
+  th,
+  td {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border: 1px solid var(--vp-c-divider);
+  }
+
+  th {
+    background-color: var(--vp-c-bg-soft);
+    font-weight: 600;
+    color: var(--vp-c-text-1);
+  }
+
+  tbody tr {
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: var(--vp-c-bg-soft);
+    }
+  }
+
+  td {
+    color: var(--vp-c-text-2);
+  }
+
+  .noteLink {
+    color: var(--vp-c-brand-1);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--vp-c-brand-2);
+      text-decoration: underline;
+    }
+  }
+
+  .noteId {
+    font-family: var(--vp-font-family-mono);
+    font-size: 0.9em;
+    color: var(--vp-c-text-3);
+    margin-right: 0.5rem;
+  }
+
+  .description {
+    line-height: 1.6;
+
+    &.empty {
+      color: var(--vp-c-text-3);
+      font-style: italic;
+    }
+  }
+}
+
+.error {
+  padding: 1rem;
+  margin: 1rem 0;
+  border-left: 4px solid var(--vp-c-danger-1);
+  background-color: var(--vp-c-danger-soft);
+  color: var(--vp-c-danger-1);
+  border-radius: 4px;
+}
+
+.warning {
+  padding: 1rem;
+  margin: 1rem 0;
+  border-left: 4px solid var(--vp-c-warning-1);
+  background-color: var(--vp-c-warning-soft);
+  color: var(--vp-c-warning-1);
+  border-radius: 4px;
+}
+</style>

package/vitepress/components/NotesTable/README.md

@@ -1,67 +1,67 @@
-# NotesTable 组件
-
-## 功能说明
-
-`NotesTable` 组件用于在 Markdown 文件中渲染笔记列表表格,支持笔记链接跳转和简介显示。
-
-## 使用方法
-
-### 基础用法
-
-```html
-<NotesTable :ids="['0001', '0002', '0054', '0039']" />
-```
-
-### 简写形式
-
-```html
-<N :ids="['0001', '0002', '0054', '0039']" />
-```
-
-## Props
-
-| 属性 | 类型     | 必填 | 说明                                   |
-| ---- | -------- | ---- | -------------------------------------- |
-| ids  | string[] | 是   | 笔记 ID 数组,每个 ID 为 4 位数字字符串 |
-
-## 示例效果
-
-渲染后的表格包含两列:
-
-1. 笔记列: 显示笔记 ID 和标题,支持点击跳转
-2. 简介列: 显示笔记配置中的 `description` 字段内容
-
-## 错误处理
-
-### 1. ids 属性验证
-
-- 如果 `ids` 不是数组,显示错误提示
-- 如果 `ids` 为空数组,显示错误提示
-
-### 2. 笔记不存在
-
-- 如果某些 ID 在配置中找不到,会显示警告信息
-- 表格只渲染存在的笔记
-
-## 数据来源
-
-组件从 `notesConfig.data.ts` 中读取笔记配置信息,包括:
-
-- 笔记标题 (从 redirect 路径解析)
-- 笔记简介 (description 字段)
-- 笔记链接 (redirect 字段)
-
-## 样式特性
-
-- 响应式表格设计
-- 悬停高亮效果
-- 支持暗色/亮色主题
-- 笔记链接带品牌色
-- 空简介显示占位文本
-
-## 注意事项
-
-1. 笔记 ID 必须是 4 位数字字符串 (如 "0001", "0054")
-2. 组件会自动过滤不存在的笔记 ID
-3. 简介为空时显示 "暂无简介"
-4. 链接会自动添加网站 base 路径
+# NotesTable 组件
+
+## 功能说明
+
+`NotesTable` 组件用于在 Markdown 文件中渲染笔记列表表格,支持笔记链接跳转和简介显示。
+
+## 使用方法
+
+### 基础用法
+
+```html
+<NotesTable :ids="['0001', '0002', '0054', '0039']" />
+```
+
+### 简写形式
+
+```html
+<N :ids="['0001', '0002', '0054', '0039']" />
+```
+
+## Props
+
+| 属性 | 类型     | 必填 | 说明                                   |
+| ---- | -------- | ---- | -------------------------------------- |
+| ids  | string[] | 是   | 笔记 ID 数组,每个 ID 为 4 位数字字符串 |
+
+## 示例效果
+
+渲染后的表格包含两列:
+
+1. 笔记列: 显示笔记 ID 和标题,支持点击跳转
+2. 简介列: 显示笔记配置中的 `description` 字段内容
+
+## 错误处理
+
+### 1. ids 属性验证
+
+- 如果 `ids` 不是数组,显示错误提示
+- 如果 `ids` 为空数组,显示错误提示
+
+### 2. 笔记不存在
+
+- 如果某些 ID 在配置中找不到,会显示警告信息
+- 表格只渲染存在的笔记
+
+## 数据来源
+
+组件从 `notesConfig.data.ts` 中读取笔记配置信息,包括:
+
+- 笔记标题 (从 redirect 路径解析)
+- 笔记简介 (description 字段)
+- 笔记链接 (redirect 字段)
+
+## 样式特性
+
+- 响应式表格设计
+- 悬停高亮效果
+- 支持暗色/亮色主题
+- 笔记链接带品牌色
+- 空简介显示占位文本
+
+## 注意事项
+
+1. 笔记 ID 必须是 4 位数字字符串 (如 "0001", "0054")
+2. 组件会自动过滤不存在的笔记 ID
+3. 简介为空时显示 "暂无简介"
+4. 链接会自动添加网站 base 路径