@coffic/cosy-ui 0.7.4 → 0.8.7

package/dist/src-astro/entities/Feature.ts

@@ -0,0 +1,53 @@
+class Feature {
+  private translations: Map<string, string>;
+  public emoji: string = '';
+  public link: string = '';
+  public presetIcon: string = '';
+
+  private constructor() {
+    this.translations = new Map();
+    this.translations.set('zh-cn', '');
+    this.translations.set('en', '');
+  }
+
+  public static createWithIcon(emoji: string): Feature {
+    const feature = new Feature();
+    feature.emoji = emoji;
+    return feature;
+  }
+
+  public static createWithPresetIcon(presetIcon: string): Feature {
+    const feature = new Feature();
+    feature.presetIcon = presetIcon;
+    return feature;
+  }
+
+  public setTitle(title: string, lang: string): Feature {
+    this.translations.set(lang, title);
+    return this;
+  }
+
+  public setLink(link: string): Feature {
+    this.link = link;
+    return this;
+  }
+
+  public setPresetIcon(presetIcon: string): Feature {
+    this.presetIcon = presetIcon;
+    return this;
+  }
+
+  public setZh(title: string): Feature {
+    return this.setTitle(title, 'zh-cn');
+  }
+
+  public setEn(title: string): Feature {
+    return this.setTitle(title, 'en');
+  }
+
+  public getTitle(lang: string): string {
+    return this.translations.get(lang) || '';
+  }
+}
+
+export default Feature;

package/dist/src-astro/entities/LessonDoc.ts

@@ -0,0 +1,153 @@
+import type { LessonEntry } from '../database/LessonDB';
+import { lessonDB } from '../database/LessonDB';
+import { cosyLogger } from '../cosy';
+import { SidebarItemEntity } from './SidebarItem';
+import { LinkUtil } from '../utils/link';
+import { COLLECTION_LESSON } from '../database/LessonDB';
+import { BaseDoc } from './BaseDoc';
+import type { IHeadingType } from '../types/heading';
+
+/**
+ * 课程文档类，配合 LessonDB 使用
+ *
+ * 目录结构：
+ * ```
+ * lessons/
+ * ├── build_your_own_web_toolbox/      # 课程目录
+ * │   ├── images/                      # 课程图片资源
+ * │   ├── components/                  # 课程组件
+ * │   ├── en/                          # 英文版本
+ * │   │   ├── index.mdx                # 课程首页
+ * │   │   ├── 1.mdx                    # 第一章
+ * │   │   └── 2.mdx                    # 第二章
+ * │   └── zh-cn/                       # 中文版本
+ * │       ├── index.mdx                # 课程首页
+ * │       ├── 1.mdx                    # 第一章
+ * │       └── 2.mdx                    # 第二章
+ * └── learn_astro/                     # 另一个课程
+ *     ├── en/
+ *     │   ├── index.mdx
+ *     │   ├── 1.mdx
+ *     │   └── 2.mdx
+ *     └── zh-cn/
+ *         ├── index.mdx
+ *         ├── 1.mdx
+ *         └── 2.mdx
+ * ```
+ *
+ * 说明：
+ * - 每个课程（如 build_your_own_web_toolbox）是一个独立的目录
+ * - 课程目录可以包含多语言版本（en, zh-cn 等）
+ * - 每个语言版本包含完整的课程内容
+ * - 课程目录可以作为 git 子模块独立管理
+ */
+export default class LessonDoc extends BaseDoc<
+  typeof COLLECTION_LESSON,
+  LessonEntry
+> {
+  constructor(entry: LessonEntry) {
+    super(entry);
+  }
+
+  isBook(): boolean {
+    return this.entry.id.split('/').length === 2;
+  }
+
+  async getBookId(): Promise<string> {
+    return this.getTopDocId();
+  }
+
+  async getBook(): Promise<LessonDoc | null> {
+    const bookId = await this.getBookId();
+    return await lessonDB.find(bookId);
+  }
+
+  getLink(): string {
+    const debug = false;
+    const lang = this.getLang();
+    const link = LinkUtil.getLessonLink(lang, this.getId());
+
+    if (debug) {
+      cosyLogger.info(`获取 ${this.entry.id} 的链接: ${link}`);
+    }
+
+    return link;
+  }
+
+  /**
+   * 获取文档的语言
+   *
+   * 文档的 id 格式为 `book-id/zh-cn/chapter-id/lesson-id`
+   *
+   * @returns 语言
+   */
+  override getLang(): string {
+    const debug = false;
+
+    const parts = this.entry.id.split('/');
+    const lang = parts[1];
+
+    if (debug) {
+      cosyLogger.info(`获取 ${this.entry.id} 的语言: ${lang}`);
+    }
+
+    return lang;
+  }
+
+  getHTML(): string {
+    const debug = false;
+
+    if (debug) {
+      cosyLogger.info(`获取 ${this.entry.id} 的 HTML`);
+    }
+
+    return this.entry.rendered?.html || '';
+  }
+
+  getHeadings(): IHeadingType[] {
+    const debug = false;
+
+    if (debug) {
+      cosyLogger.info(`获取 ${this.entry.id} 的 headings`);
+    }
+
+    return (this.entry.rendered?.metadata?.headings as IHeadingType[]) || [];
+  }
+
+  async getTopDoc(): Promise<LessonDoc | null> {
+    const bookId = await this.getBookId();
+    return await lessonDB.find(bookId);
+  }
+
+  async getChildren(): Promise<LessonDoc[]> {
+    return await lessonDB.getChildren(this.entry.id);
+  }
+
+  async getDescendants(): Promise<LessonDoc[]> {
+    return await lessonDB.getDescendantDocs(this.entry.id);
+  }
+
+  override async toSidebarItem(): Promise<SidebarItemEntity> {
+    const debug = false;
+
+    const children = await this.getChildren();
+    let childItems = await Promise.all(
+      children.map((child) => child.toSidebarItem())
+    );
+
+    if (this.isBook()) {
+      childItems = [...childItems];
+    }
+
+    if (debug) {
+      cosyLogger.info(`${this.entry.id} 的侧边栏项目`);
+      console.log(childItems);
+    }
+
+    return new SidebarItemEntity({
+      text: this.getTitle(),
+      items: childItems,
+      link: this.getLink(),
+    });
+  }
+}

package/dist/src-astro/entities/MetaDoc.ts

@@ -0,0 +1,93 @@
+import { SidebarItemEntity } from './SidebarItem';
+import type { MetaEntry } from '../database/MetaDB';
+import { LinkUtil } from '../utils/link';
+import { BaseDoc } from './BaseDoc';
+import { metaDB } from '../database/MetaDB';
+import { COLLECTION_META } from '../database/MetaDB';
+
+export default class MetaDoc extends BaseDoc<
+  typeof COLLECTION_META,
+  MetaEntry
+> {
+  constructor(entry: MetaEntry) {
+    super(entry);
+  }
+
+  static fromEntry(entry: MetaEntry) {
+    return new MetaDoc(entry);
+  }
+
+  getTopDoc(): Promise<MetaDoc | null> {
+    return Promise.resolve(null);
+  }
+
+  getChildren(): Promise<MetaDoc[]> {
+    return Promise.resolve([]);
+  }
+
+  getLink(): string {
+    return LinkUtil.getMetaLink(this.getLang(), this.getSlug());
+  }
+
+  getLang(): string {
+    return this.entry.id.split('/')[0];
+  }
+
+  /**
+   * 获取元数据页面的 slug
+   * 例如：
+   *  ID: zh-cn/about 的 slug 为 about
+   *  ID: en/privacy 的 slug 为 privacy
+   */
+  override getSlug(): string {
+    // 从 ID 中获取 slug，即删除以/分割后的第一个元素
+    return this.getId().split('/').slice(1).join('/');
+  }
+
+  /**
+   * 获取兄弟文档
+   * 例如：对于 'zh-cn/about'，会返回 'zh-cn' 下的其他文档
+   */
+  async getSiblingDocs(): Promise<MetaDoc[]> {
+    return await metaDB.getSiblings(this.entry.id);
+  }
+
+  /**
+   * 获取兄弟文档的侧边栏项目
+   */
+  async getSiblingSidebarItems(): Promise<SidebarItemEntity[]> {
+    const siblings = await this.getSiblingDocs();
+    const siblingItems = await Promise.all(
+      siblings.map((sibling) => {
+        return new SidebarItemEntity({
+          text: sibling.getTitle(),
+          link: sibling.getLink(),
+        });
+      })
+    );
+    return siblingItems;
+  }
+
+  /**
+   * 重写侧边栏项目方法
+   * 对于元数据页面，我们不显示子项目
+   */
+  override async toSidebarItem(): Promise<SidebarItemEntity> {
+    return new SidebarItemEntity({
+      text: this.getTitle(),
+      link: this.getLink(),
+    });
+  }
+
+  /**
+   * 重写顶级侧边栏项目方法
+   * 对于元数据页面，我们显示所有兄弟页面作为侧边栏项目
+   */
+  async getTopSidebarItem(): Promise<SidebarItemEntity> {
+    return new SidebarItemEntity({
+      text: '了解我们',
+      items: await this.getSiblingSidebarItems(),
+      link: '',
+    });
+  }
+}

package/dist/src-astro/entities/SidebarItem.ts

@@ -0,0 +1,89 @@
+import { type ISidebarItem } from '../types/sidebar';
+
+/**
+ * 侧边栏项目类
+ * 用于构建网站的侧边栏导航
+ */
+export class SidebarItemEntity implements ISidebarItem {
+  text: string;
+  href: string;
+  items: ISidebarItem[];
+
+  constructor(props: { text: string; link?: string; items?: ISidebarItem[] }) {
+    this.text = props.text;
+    this.href = props.link || '';
+    this.items = props.items || [];
+  }
+
+  /**
+   * 添加子项目
+   * @param item 要添加的子项目
+   */
+  addItem(item: SidebarItemEntity): void {
+    this.items.push(item);
+  }
+
+  /**
+   * 获取所有子项目
+   * @returns 子项目数组
+   */
+  getItems(): SidebarItemEntity[] {
+    return this.items.map((item) => new SidebarItemEntity(item));
+  }
+
+  /**
+   * 获取项目标签
+   * @returns 项目标签
+   */
+  getLabel(): string {
+    return this.text;
+  }
+
+  /**
+   * 获取项目链接
+   * @returns 项目链接
+   */
+  getLink(): string {
+    return this.href;
+  }
+
+  /**
+   * 获取包括自身在内的所有项目
+   * @returns 包括自身在内的所有项目
+   */
+  getItemsIncludingSelf(): SidebarItemEntity[] {
+    return [this, ...this.getItems()];
+  }
+
+  /**
+   * 判断是否是分组（有子项目）
+   * @returns 是否是分组
+   */
+  isGroup(): boolean {
+    return this.items.length > 0;
+  }
+
+  /**
+   * 判断是否不是分组
+   * @returns 是否不是分组
+   */
+  isNotGroup(): boolean {
+    return !this.isGroup();
+  }
+}
+
+/**
+ * 侧边栏提供者接口
+ * 实现此接口的类可以提供侧边栏项目
+ */
+export interface SidebarProvider {
+  /**
+   * 转换为侧边栏项目
+   */
+  toSidebarItem(): Promise<SidebarItemEntity>;
+
+  /**
+   * 获取顶级侧边栏项目
+   */
+  getTopSidebarItem?(): Promise<SidebarItemEntity>;
+}

package/dist/src-astro/entities/Tag.ts

@@ -0,0 +1,42 @@
+import { blogDB } from '../database/BlogDB';
+import { SidebarItemEntity } from './SidebarItem';
+import { type ITagStaticPath } from '../types/static-path';
+import { LinkUtil } from '../utils/link';
+
+export class Tag {
+  name: string;
+  lang: string;
+  count: number;
+
+  constructor(name: string, count: number, lang: string) {
+    this.name = name;
+    this.count = count;
+    this.lang = lang;
+  }
+
+  toSidebarItem(lang: string): SidebarItemEntity {
+    return new SidebarItemEntity({
+      text: this.name,
+      link: LinkUtil.getTagLink(lang, this.name),
+    });
+  }
+
+  toTagPath(): ITagStaticPath {
+    return {
+      params: { slug: this.lang + '/blogs/tag/' + this.name },
+      props: { tag: this.name },
+    };
+  }
+
+  static async makeRootSidebarItem(lang: string): Promise<SidebarItemEntity> {
+    const tags = await blogDB.getTagsByLang(lang);
+
+    return new SidebarItemEntity({
+      text: 'Tags',
+      link: LinkUtil.getTagLink(lang, ''),
+      items: tags.map((tag: Tag) => tag.toSidebarItem(lang)),
+    });
+  }
+}
+
+export default Tag;

package/dist/src-astro/env.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="astro/client" />
+/// <reference types="vite/client" />
+
+// 确保 Astro 全局类型正确加载
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      [elemName: string]: any;
+    }
+  }
+}
+
+declare module '*.vue?raw' {
+  const content: string;
+  export default content;
+}
+
+// 添加图片模块声明
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpeg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.gif' {
+  const value: string;
+  export default value;
+}

package/dist/src-astro/errors/403.astro

@@ -0,0 +1,135 @@
+---
+/**
+ * @component Error403
+ *
+ * @description
+ * 403禁止访问错误页面组件，用于显示用户无权限访问页面的提示信息。
+ * 提供清晰的权限说明和相关的操作建议。
+ *
+ * @design
+ * 设计理念：
+ * 1. 权限说明 - 清楚地说明用户当前无权限访问该资源
+ * 2. 操作引导 - 提供登录、联系管理员等有用的操作选项
+ * 3. 专业外观 - 保持与网站整体设计风格一致
+ * 4. 用户友好 - 避免让用户感到困惑或挫败
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Error403 />
+ * ```
+ *
+ * 带调试信息：
+ * ```astro
+ * <Error403 debugKVs={{
+ *   requiredRole: 'admin',
+ *   currentRole: 'user',
+ *   resource: '/admin/dashboard'
+ * }} />
+ * ```
+ *
+ * @props
+ * @prop {Record<string, string>} [debugKVs={}] - 调试信息键值对，用于开发和调试
+ * @prop {string} [loginUrl] - 登录页面URL，如果提供将显示登录按钮
+ * @prop {string} [contactUrl] - 联系我们页面URL，如果提供将显示联系按钮
+ */
+
+import '../../style.ts';
+import { LinkUtil } from '../utils/link.ts';
+
+const baseUrl = LinkUtil.getBaseUrl();
+const path = Astro.url.pathname;
+
+interface Error403Props {
+  debugKVs?: Record<string, string>;
+  loginUrl?: string;
+  contactUrl?: string;
+}
+
+const { debugKVs = {}, loginUrl, contactUrl } = Astro.props as Error403Props;
+---
+
+<div
+  class="cosy:min-h-screen cosy:flex cosy:flex-col cosy:items-center cosy:justify-center cosy:bg-base-100 cosy:p-4">
+  <div class="cosy:max-w-md cosy:w-full cosy:text-center cosy:space-y-6">
+    <!-- 错误代码 -->
+    <div class="cosy:mb-8">
+      <h1
+        class="cosy:text-9xl cosy:font-bold cosy:text-warning cosy:leading-none cosy:no-underline">
+        403
+      </h1>
+      <div
+        class="cosy:w-24 cosy:h-1 cosy:bg-warning cosy:mx-auto cosy:mt-4 cosy:rounded-full">
+      </div>
+    </div>
+
+    <!-- 错误信息 -->
+    <div class="cosy:space-y-4">
+      <h2 class="cosy:text-2xl cosy:font-semibold cosy:text-base-content">
+        禁止访问
+      </h2>
+      <p class="cosy:text-base-content/70 cosy:text-lg">
+        抱歉，您没有权限访问此页面。
+      </p>
+    </div>
+
+    <!-- 路径信息 -->
+    <div
+      class="cosy:bg-base-200 cosy:rounded-lg cosy:p-4 cosy:text-sm cosy:text-base-content/60">
+      <p>
+        <span class="cosy:font-medium">路径：</span><code
+          class="cosy:text-warning">{path}</code
+        >
+      </p>
+    </div>
+
+    <!-- 调试信息 -->
+    {
+      Object.keys(debugKVs).length > 0 && (
+        <details class="cosy:bg-base-200 cosy:rounded-lg cosy:p-4 cosy:text-left">
+          <summary class="cosy:cursor-pointer cosy:font-medium cosy:text-base-content">
+            权限信息
+          </summary>
+          <div class="cosy:mt-3 cosy:space-y-2">
+            {Object.entries(debugKVs).map(([key, value]) => (
+              <div class="cosy:text-sm">
+                <span class="cosy:font-medium cosy:text-base-content">
+                  {key}:
+                </span>
+                <span class="cosy:text-base-content/70 cosy:ml-2">{value}</span>
+              </div>
+            ))}
+          </div>
+        </details>
+      )
+    }
+
+    <!-- 操作按钮 -->
+    <div class="cosy:space-y-3">
+      {
+        loginUrl && (
+          <a href={loginUrl} class="btn btn-primary cosy:w-full">
+            登录账户
+          </a>
+        )
+      }
+
+      <a href={baseUrl} class="btn btn-outline cosy:w-full cosy:no-underline">
+        返回首页
+      </a>
+
+      {
+        contactUrl && (
+          <a href={contactUrl} class="btn btn-ghost cosy:w-full">
+            联系管理员
+          </a>
+        )
+      }
+    </div>
+
+    <!-- 帮助提示 -->
+    <div class="cosy:text-sm cosy:text-base-content/50 cosy:mt-8">
+      <p>如需访问权限，请联系系统管理员</p>
+    </div>
+  </div>
+</div>