@coffic/cosy-ui 0.1.28 → 0.2.0

package/dist/components/typography/Heading.astro

@@ -0,0 +1,205 @@
+---
+/**
+ * @component Heading
+ * 
+ * @description
+ * Heading 组件用于创建各级标题，提供一致的排版样式和灵活的定制选项。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 层次清晰 - 通过不同级别的标题建立内容的视觉层次结构
+ * 2. 一致性 - 确保整个应用中标题样式的一致性
+ * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
+ * 4. 无障碍性 - 遵循语义化HTML标准，确保屏幕阅读器可以正确解析内容结构
+ * 
+ * 视觉特点：
+ * - 字体大小和粗细随级别变化
+ * - 可选的下划线或底部边框
+ * - 可定制的颜色和间距
+ * - 响应式设计，在不同屏幕尺寸下保持良好的可读性
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Heading level={1}>这是一个一级标题</Heading>
+ * <Heading level={2}>这是一个二级标题</Heading>
+ * <Heading level={3}>这是一个三级标题</Heading>
+ * ```
+ * 
+ * 自定义样式：
+ * ```astro
+ * <Heading level={2} color="primary" underline>带下划线的二级标题</Heading>
+ * ```
+ * 
+ * 带锚点链接：
+ * ```astro
+ * <Heading level={2} id="section-1" anchor>带锚点的标题</Heading>
+ * ```
+ * 
+ * 自定义间距：
+ * ```astro
+ * <Heading level={1} class="mb-8">自定义底部间距的标题</Heading>
+ * ```
+ * 
+ * @props
+ * @prop {1|2|3|4|5|6} [level=2] - 标题级别，对应 h1-h6 标签
+ * @prop {string} [id] - 标题的 ID，用于锚点链接
+ * @prop {boolean} [anchor=false] - 是否显示锚点链接图标
+ * @prop {boolean} [underline=false] - 是否显示下划线
+ * @prop {string} [align='left'] - 文本对齐方式：'left', 'center', 'right'
+ * @prop {'default'|'primary'|'secondary'|'accent'|'muted'} [color='default'] - 标题颜色
+ * @prop {string} [class] - 自定义 CSS 类名
+ * 
+ * @slots
+ * @slot default - 标题内容
+ * 
+ * @accessibility
+ * - 使用语义化的 h1-h6 标签
+ * - 锚点链接带有描述性 aria-label
+ * - 遵循标题层次结构的最佳实践
+ * 
+ * @dependencies
+ * 依赖于以下图标组件：
+ * - LinkIcon (用于锚点链接)
+ */
+
+import LinkIcon from '../icons/LinkIcon.astro';
+
+interface Props {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  id?: string;
+  anchor?: boolean;
+  underline?: boolean;
+  align?: 'left' | 'center' | 'right';
+  color?: 'default' | 'primary' | 'secondary' | 'accent' | 'muted';
+  class?: string;
+}
+
+const {
+  level = 2,
+  id,
+  anchor = false,
+  underline = false,
+  align = 'left',
+  color = 'default',
+  class: className = '',
+} = Astro.props;
+
+// 根据级别和颜色设置样式
+const headingClass = {
+  1: 'text-4xl font-bold',
+  2: 'text-3xl font-semibold',
+  3: 'text-2xl font-semibold',
+  4: 'text-xl font-medium',
+  5: 'text-lg font-medium',
+  6: 'text-base font-medium',
+}[(level ?? 2) as 1|2|3|4|5|6];
+
+const colorClass = {
+  default: 'text-gray-900 dark:text-gray-100',
+  primary: 'text-primary-600 dark:text-primary-400',
+  secondary: 'text-secondary-600 dark:text-secondary-400',
+  accent: 'text-accent-600 dark:text-accent-400',
+  muted: 'text-gray-600 dark:text-gray-400',
+}[(color ?? 'default') as 'default'|'primary'|'secondary'|'accent'|'muted'];
+
+const alignClass = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+}[(align ?? 'left') as 'left'|'center'|'right'];
+
+const underlineClass = underline ? 'border-b pb-2 border-gray-200 dark:border-gray-700' : '';
+
+// 组合所有类名
+const combinedClass = `heading ${headingClass} ${colorClass} ${alignClass} ${underlineClass} ${className}`;
+---
+
+{level === 1 && (
+  <h1 id={id} class={combinedClass}>
+    <slot />
+    {anchor && id && (
+      <a href={`#${id}`} class="heading-anchor ml-2 opacity-0 hover:opacity-100 transition-opacity" aria-label={`链接到 ${id} 部分`}>
+        <LinkIcon class="w-4 h-4 inline-block" />
+      </a>
+    )}
+  </h1>
+)}
+
+{level === 2 && (
+  <h2 id={id} class={combinedClass}>
+    <slot />
+    {anchor && id && (
+      <a href={`#${id}`} class="heading-anchor ml-2 opacity-0 hover:opacity-100 transition-opacity" aria-label={`链接到 ${id} 部分`}>
+        <LinkIcon class="w-4 h-4 inline-block" />
+      </a>
+    )}
+  </h2>
+)}
+
+{level === 3 && (
+  <h3 id={id} class={combinedClass}>
+    <slot />
+    {anchor && id && (
+      <a href={`#${id}`} class="heading-anchor ml-2 opacity-0 hover:opacity-100 transition-opacity" aria-label={`链接到 ${id} 部分`}>
+        <LinkIcon class="w-4 h-4 inline-block" />
+      </a>
+    )}
+  </h3>
+)}
+
+{level === 4 && (
+  <h4 id={id} class={combinedClass}>
+    <slot />
+    {anchor && id && (
+      <a href={`#${id}`} class="heading-anchor ml-2 opacity-0 hover:opacity-100 transition-opacity" aria-label={`链接到 ${id} 部分`}>
+        <LinkIcon class="w-4 h-4 inline-block" />
+      </a>
+    )}
+  </h4>
+)}
+
+{level === 5 && (
+  <h5 id={id} class={combinedClass}>
+    <slot />
+    {anchor && id && (
+      <a href={`#${id}`} class="heading-anchor ml-2 opacity-0 hover:opacity-100 transition-opacity" aria-label={`链接到 ${id} 部分`}>
+        <LinkIcon class="w-4 h-4 inline-block" />
+      </a>
+    )}
+  </h5>
+)}
+
+{level === 6 && (
+  <h6 id={id} class={combinedClass}>
+    <slot />
+    {anchor && id && (
+      <a href={`#${id}`} class="heading-anchor ml-2 opacity-0 hover:opacity-100 transition-opacity" aria-label={`链接到 ${id} 部分`}>
+        <LinkIcon class="w-4 h-4 inline-block" />
+      </a>
+    )}
+  </h6>
+)}
+
+<style>
+  .heading {
+    margin-bottom: 0.5em;
+    line-height: 1.2;
+    scroll-margin-top: 100px;
+  }
+  
+  .heading-anchor {
+    color: inherit;
+    text-decoration: none;
+    vertical-align: middle;
+  }
+  
+  /* 悬停效果 */
+  .heading:hover .heading-anchor {
+    opacity: 0.7 !important;
+  }
+  
+  .heading-anchor:hover {
+    opacity: 1 !important;
+  }
+</style> 

package/dist/components/typography/README.md

@@ -0,0 +1,29 @@
+# 排版组件 (Typography Components)
+
+这个目录包含了用于文本排版和内容展示的基础组件。
+
+## 设计原则
+
+1. **可读性**：确保文本清晰易读
+2. **层次感**：通过不同的文本样式创建视觉层次
+3. **一致性**：保持文本样式的一致性
+
+## 包含的组件
+
+- `Heading.astro`: 标题组件，用于各级标题
+- `Article.astro`: 文章组件，用于文章内容的排版
+- `Text.astro`: 文本组件，用于普通段落文本
+
+## 使用指南
+
+排版组件用于构建结构化的文本内容：
+
+```astro
+<Heading level={1}>主标题</Heading>
+<Heading level={2}>副标题</Heading>
+
+<Article>
+  <Text>这是一段普通的文本内容</Text>
+  <Text variant="lead">这是一段引导文本</Text>
+</Article>
+```

package/dist/components/typography/Text.astro

@@ -0,0 +1,187 @@
+---
+/**
+ * @component Text
+ * 
+ * @description
+ * Text 组件用于创建各种文本元素，提供一致的排版样式和灵活的定制选项。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 一致性 - 确保整个应用中文本样式的一致性
+ * 2. 可读性 - 优化文本的可读性和舒适度
+ * 3. 可定制性 - 支持多种配置选项，适应不同场景需求
+ * 4. 无障碍性 - 遵循语义化HTML标准，确保屏幕阅读器可以正确解析内容
+ * 
+ * 视觉特点：
+ * - 不同的字体大小和行高
+ * - 可选的字体粗细和样式
+ * - 可定制的颜色和对齐方式
+ * - 支持截断和省略号
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Text>这是一段普通文本</Text>
+ * ```
+ * 
+ * 不同大小：
+ * ```astro
+ * <Text size="xs">超小文本</Text>
+ * <Text size="sm">小文本</Text>
+ * <Text size="md">中等文本</Text>
+ * <Text size="lg">大文本</Text>
+ * <Text size="xl">超大文本</Text>
+ * ```
+ * 
+ * 不同颜色：
+ * ```astro
+ * <Text color="primary">主要颜色文本</Text>
+ * <Text color="secondary">次要颜色文本</Text>
+ * <Text color="accent">强调色文本</Text>
+ * <Text color="muted">柔和色文本</Text>
+ * ```
+ * 
+ * 字体粗细：
+ * ```astro
+ * <Text weight="light">细体文本</Text>
+ * <Text weight="normal">常规文本</Text>
+ * <Text weight="medium">中等粗文本</Text>
+ * <Text weight="semibold">半粗体文本</Text>
+ * <Text weight="bold">粗体文本</Text>
+ * ```
+ * 
+ * 文本对齐：
+ * ```astro
+ * <Text align="left">左对齐文本</Text>
+ * <Text align="center">居中对齐文本</Text>
+ * <Text align="right">右对齐文本</Text>
+ * <Text align="justify">两端对齐文本</Text>
+ * ```
+ * 
+ * 文本截断：
+ * ```astro
+ * <Text truncate>这是一段很长的文本，将会被截断并显示省略号...</Text>
+ * ```
+ * 
+ * 组合使用：
+ * ```astro
+ * <Text 
+ *   size="lg" 
+ *   color="primary" 
+ *   weight="bold" 
+ *   align="center"
+ *   class="my-4"
+ * >
+ *   这是一段重要的提示文本
+ * </Text>
+ * ```
+ * 
+ * @props
+ * @prop {string} [as='p'] - 要渲染的HTML元素，如 'p', 'span', 'div' 等
+ * @prop {'xs'|'sm'|'md'|'lg'|'xl'} [size='md'] - 文本大小
+ * @prop {'light'|'normal'|'medium'|'semibold'|'bold'} [weight='normal'] - 字体粗细
+ * @prop {'default'|'primary'|'secondary'|'accent'|'muted'} [color='default'] - 文本颜色
+ * @prop {'left'|'center'|'right'|'justify'} [align='left'] - 文本对齐方式
+ * @prop {boolean} [italic=false] - 是否使用斜体
+ * @prop {boolean} [underline=false] - 是否添加下划线
+ * @prop {boolean} [truncate=false] - 是否截断文本并显示省略号
+ * @prop {string} [class] - 自定义 CSS 类名
+ * 
+ * @slots
+ * @slot default - 文本内容
+ * 
+ * @accessibility
+ * - 使用语义化的HTML元素
+ * - 确保文本颜色与背景色的对比度符合WCAG标准
+ */
+
+interface Props {
+  as?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+  color?: 'default' | 'primary' | 'secondary' | 'accent' | 'muted';
+  align?: 'left' | 'center' | 'right' | 'justify';
+  italic?: boolean;
+  underline?: boolean;
+  truncate?: boolean;
+  class?: string;
+}
+
+const {
+  as: Element = 'p',
+  size = 'md',
+  weight = 'normal',
+  color = 'default',
+  align = 'left',
+  italic = false,
+  underline = false,
+  truncate = false,
+  class: className = '',
+} = Astro.props;
+
+// 根据大小设置样式
+const sizeClasses = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+};
+const sizeClass = sizeClasses[size as keyof typeof sizeClasses];
+
+// 根据粗细设置样式
+const weightClasses = {
+  light: 'font-light',
+  normal: 'font-normal',
+  medium: 'font-medium',
+  semibold: 'font-semibold',
+  bold: 'font-bold',
+};
+const weightClass = weightClasses[weight as keyof typeof weightClasses];
+
+// 根据颜色设置样式
+const colorClasses = {
+  default: 'text-gray-900 dark:text-gray-100',
+  primary: 'text-primary-600 dark:text-primary-400',
+  secondary: 'text-secondary-600 dark:text-secondary-400',
+  accent: 'text-accent-600 dark:text-accent-400',
+  muted: 'text-gray-600 dark:text-gray-400',
+};
+const colorClass = colorClasses[color as keyof typeof colorClasses];
+
+// 根据对齐方式设置样式
+const alignClasses = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+  justify: 'text-justify',
+};
+const alignClass = alignClasses[align as keyof typeof alignClasses];
+
+// 其他样式
+const italicClass = italic ? 'italic' : '';
+const underlineClass = underline ? 'underline' : '';
+const truncateClass = truncate ? 'truncate' : '';
+
+// 组合所有类名
+const combinedClass = `text ${sizeClass} ${weightClass} ${colorClass} ${alignClass} ${italicClass} ${underlineClass} ${truncateClass} ${className}`;
+---
+
+<Element class={combinedClass}>
+  <slot />
+</Element>
+
+<style>
+  .text {
+    margin-bottom: 1em;
+    line-height: 1.5;
+  }
+  
+  /* 确保截断文本正常工作 */
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+</style> 

package/dist/components/typography/index.ts

@@ -0,0 +1,3 @@
+export { default as Heading } from './Heading.astro';
+export { default as Article } from './Article.astro';
+export { default as Text } from './Text.astro'; 

package/dist/index.ts

@@ -0,0 +1,9 @@
+export * from './components/base';
+export * from './components/navigation';
+export * from './components/display';
+export * from './components/data-display';
+export * from './components/layouts';
+export * from './components/typography';
+export * from './components/icons';
+export * from './components/containers';
+

package/dist/integration.ts

@@ -0,0 +1,14 @@
+import { defineIntegration } from "astro-integration-kit";
+
+export const integration = defineIntegration({
+	name: "astro-cosy",
+	setup() {
+		return {
+			hooks: {
+				"astro:config:setup": ({ logger }) => {
+					logger.info("astro-cosy integration setup");
+				},
+			},
+		};
+	},
+});

package/dist/style.ts

@@ -0,0 +1 @@
+import './app.css'; 

package/{src → dist}/types/footer.ts

@@ -9,12 +9,6 @@ export interface Product {
     external?: boolean;
 }
 
-export interface SocialLink {
-    name: string;
-    url: string;
-    platform: string;
-}
-
 export interface FooterProps {
     siteName: string;
     homeLink: string;
@@ -22,6 +16,7 @@ export interface FooterProps {
     company: string;
     copyright: string;
     inspirationalSlogan: string;
+    debug?: boolean;
     icp?: string;
     logo?: Logo;
     products?: Product[];
@@ -29,5 +24,14 @@ export interface FooterProps {
     contactLink?: string;
     termsLink?: string;
     privacyLink?: string;
-    socialLinks?: SocialLink[];
+    socialLinks?: string[];
+    teamLink?: string;
+    careersLink?: string;
+    newsLink?: string;
+    historyLink?: string;
+    partnersLink?: string;
+    blogLink?: string;
+    faqLink?: string;
+    mediaLink?: string;
+    techStackLink?: string;
 } 

package/{src → dist}/utils/social.ts

@@ -4,13 +4,6 @@ interface PlatformConfig {
 	domains: string[];
 }
 
-// 社交链接类型
-export interface SocialLink {
-	name: string;
-	url: string;
-	platform: string;
-}
-
 // 处理后的社交链接类型
 export interface ProcessedSocialLink {
 	url: string;
@@ -76,21 +69,21 @@ function detectPlatform(url: string): [string, PlatformConfig] | null {
 }
 
 // 处理社交链接
-export function processSocialLink(link: SocialLink): ProcessedSocialLink {
-	const platformInfo = detectPlatform(link.url);
+export function processSocialLink(url: string): ProcessedSocialLink {
+	const platformInfo = detectPlatform(url);
 
 	if (!platformInfo) {
 		// 如果无法识别平台，返回默认值
 		return {
-			url: link.url,
-			name: link.name,
+			url: url,
+			name: '社交链接',
 			platform: 'default',
 		};
 	}
 
 	const [platform, config] = platformInfo;
 	return {
-		url: link.url,
+		url: url,
 		name: config.name,
 		platform,
 	};

package/dist/utils/theme.ts

@@ -0,0 +1,55 @@
+interface ThemeManager {
+    updateActiveTheme: (currentTheme: string) => void;
+    handleThemeClick: (this: HTMLElement) => void;
+    initialize: () => void;
+    setTheme: (theme: string) => void;
+}
+
+export function createThemeManager(): ThemeManager {
+    const getThemeItems = () => document.querySelectorAll<HTMLElement>('[data-set-theme]');
+
+    const updateActiveTheme = (currentTheme: string) => {
+        const themeItems = getThemeItems();
+        themeItems.forEach((item) => {
+            const themeId = item.getAttribute('data-set-theme');
+            const isActive = themeId === currentTheme;
+            item.classList.toggle('bg-primary', isActive);
+            item.classList.toggle('text-primary-content', isActive);
+        });
+    };
+
+    function handleThemeClick(this: HTMLElement) {
+        const theme = this.getAttribute('data-set-theme');
+        document.documentElement.setAttribute('data-theme', theme ?? 'default');
+        localStorage.setItem('theme', theme ?? 'default');
+        updateActiveTheme(theme ?? 'default');
+    }
+
+    const setTheme = (theme: string) => {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+        updateActiveTheme(theme);
+    };
+
+    const initialize = () => {
+        const themeItems = getThemeItems();
+
+        // 移除旧的事件监听器并添加新的
+        themeItems.forEach((item) => {
+            item.removeEventListener('click', handleThemeClick);
+            item.addEventListener('click', handleThemeClick);
+        });
+
+        // 从本地存储中获取主题并更新激活状态
+        const savedTheme = localStorage.getItem('theme') || 'default';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        updateActiveTheme(savedTheme);
+    };
+
+    return {
+        updateActiveTheme,
+        handleThemeClick,
+        initialize,
+        setTheme,
+    };
+}