@coffic/cosy-ui 0.7.4 → 0.8.7

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

@@ -0,0 +1,68 @@
+---
+/**
+ * @component ErrorPage.Showcase
+ *
+ * @description
+ * 展示所有错误页面的组件示例，用于演示和测试不同类型的错误页面。
+ */
+import ErrorPage from './ErrorPage.astro';
+import { Container, Stack } from '../../index-astro';
+---
+
+<Container size="lg" padding="lg">
+  <Stack gap="xl">
+    <div class="cosy:text-center cosy:mb-8">
+      <h1 class="cosy:text-3xl cosy:font-bold cosy:mb-4">错误页面展示</h1>
+      <p class="cosy:text-base-content/70">
+        以下是不同HTTP错误状态码对应的错误页面
+      </p>
+    </div>
+
+    <!-- 404错误 -->
+    <section class="cosy:border cosy:border-base-300 cosy:rounded-lg cosy:p-6">
+      <h2 class="cosy:text-xl cosy:font-semibold cosy:mb-4">
+        404 - 页面未找到
+      </h2>
+      <ErrorPage errorCode={404} debugKVs={{ example: 'demo' }} />
+    </section>
+
+    <!-- 403错误 -->
+    <section class="cosy:border cosy:border-base-300 cosy:rounded-lg cosy:p-6">
+      <h2 class="cosy:text-xl cosy:font-semibold cosy:mb-4">403 - 禁止访问</h2>
+      <ErrorPage
+        errorCode={403}
+        loginUrl="/login"
+        contactUrl="/contact"
+        debugKVs={{ requiredRole: 'admin', currentRole: 'user' }}
+      />
+    </section>
+
+    <!-- 500错误 -->
+    <section class="cosy:border cosy:border-base-300 cosy:rounded-lg cosy:p-6">
+      <h2 class="cosy:text-xl cosy:font-semibold cosy:mb-4">
+        500 - 服务器内部错误
+      </h2>
+      <ErrorPage
+        errorCode={500}
+        supportUrl="/support"
+        statusPageUrl="/status"
+        debugKVs={{ errorId: 'ERR_2024_001', serverInfo: 'Server-01' }}
+      />
+    </section>
+
+    <!-- 503错误 -->
+    <section class="cosy:border cosy:border-base-300 cosy:rounded-lg cosy:p-6">
+      <h2 class="cosy:text-xl cosy:font-semibold cosy:mb-4">
+        503 - 服务不可用
+      </h2>
+      <ErrorPage
+        errorCode={503}
+        maintenanceMode={true}
+        estimatedRecovery="2024-12-25 10:00"
+        statusPageUrl="/status"
+        notificationUrl="/notifications"
+        debugKVs={{ reason: '系统升级', startTime: '2024-12-25 08:00' }}
+      />
+    </section>
+  </Stack>
+</Container>

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

@@ -0,0 +1,21 @@
+---
+/**
+ * @component ErrorPageShowcaseContainer
+ *
+ * @description
+ * 错误页面展示示例的容器组件，用于展示代码和预览。
+ */
+import { CodeContainer } from '../../index-astro';
+import EErrorPageShowcase from './EErrorPageShowcase.astro';
+
+import ShowcaseSourceCode from './EErrorPageShowcase.astro?raw';
+---
+
+<CodeContainer
+  titles={['错误页面展示']}
+  descriptions={['展示所有错误页面类型的综合示例']}
+  codes={[ShowcaseSourceCode]}>
+  <div id="tab-1">
+    <EErrorPageShowcase />
+  </div>
+</CodeContainer>

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

@@ -0,0 +1,119 @@
+---
+/**
+ * @component ErrorPage
+ *
+ * @description
+ * 通用错误页面组件，根据错误码自动选择合适的错误页面。
+ * 简化错误处理，提供统一的错误页面入口。
+ *
+ * @design
+ * 设计理念：
+ * 1. 统一入口 - 通过一个组件处理所有错误页面
+ * 2. 自动选择 - 根据错误码自动选择合适的错误页面
+ * 3. 配置灵活 - 支持自定义错误页面的各种配置
+ * 4. 后备方案 - 对于未定义的错误码，显示通用错误页面
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ErrorPage errorCode={404} />
+ * ```
+ *
+ * 带完整配置：
+ * ```astro
+ * <ErrorPage
+ *   errorCode={503}
+ *   maintenanceMode={true}
+ *   estimatedRecovery="2024-12-25 10:00"
+ *   debugKVs={{ reason: '系统升级' }}
+ * />
+ * ```
+ *
+ * @props
+ * @prop {number} errorCode - HTTP错误状态码 (404, 403, 500, 503 等)
+ * @prop {Record<string, string>} [debugKVs={}] - 调试信息键值对
+ * @prop {string} [loginUrl] - 登录页面URL (用于403错误)
+ * @prop {string} [contactUrl] - 联系页面URL
+ * @prop {string} [supportUrl] - 技术支持页面URL (用于500错误)
+ * @prop {string} [statusPageUrl] - 系统状态页面URL (用于503错误)
+ * @prop {string} [notificationUrl] - 通知订阅页面URL (用于503错误)
+ * @prop {boolean} [maintenanceMode=false] - 是否为维护模式 (用于503错误)
+ * @prop {string} [estimatedRecovery] - 预期恢复时间 (用于503错误)
+ */
+
+import '../../style.ts';
+import Error404 from './404.astro';
+import Error403 from './403.astro';
+import Error500 from './500.astro';
+import Error503 from './503.astro';
+
+interface Props {
+  errorCode: number;
+  debugKVs?: Record<string, string>;
+  loginUrl?: string;
+  contactUrl?: string;
+  supportUrl?: string;
+  statusPageUrl?: string;
+  notificationUrl?: string;
+  maintenanceMode?: boolean;
+  estimatedRecovery?: string;
+}
+
+const {
+  errorCode,
+  debugKVs = {},
+  loginUrl,
+  contactUrl,
+  supportUrl,
+  statusPageUrl,
+  notificationUrl,
+  maintenanceMode = false,
+  estimatedRecovery,
+} = Astro.props;
+
+// 根据错误码选择对应的组件
+function getErrorComponent(code: number) {
+  switch (code) {
+    case 403:
+      return Error403;
+    case 404:
+      return Error404;
+    case 500:
+      return Error500;
+    case 503:
+      return Error503;
+    default:
+      return Error404; // 默认使用404页面
+  }
+}
+
+const ErrorComponent = getErrorComponent(errorCode);
+
+// 根据错误码准备对应的props
+function getErrorProps(code: number) {
+  const baseProps = { debugKVs };
+
+  switch (code) {
+    case 403:
+      return { ...baseProps, loginUrl, contactUrl };
+    case 404:
+      return baseProps;
+    case 500:
+      return { ...baseProps, supportUrl, statusPageUrl };
+    case 503:
+      return {
+        ...baseProps,
+        maintenanceMode,
+        estimatedRecovery,
+        statusPageUrl,
+        notificationUrl,
+      };
+    default:
+      return baseProps;
+  }
+}
+
+const errorProps = getErrorProps(errorCode);
+---
+
+<ErrorComponent {...errorProps} />

package/dist/src-astro/errors/index.ts

@@ -0,0 +1,77 @@
+import Error404 from './404.astro';
+import Error403 from './403.astro';
+import Error500 from './500.astro';
+import Error503 from './503.astro';
+import ErrorPage from './ErrorPage.astro';
+
+import Error404Basic from './404Basic.astro';
+import E404Basic from './E404Basic.astro';
+import E404WithDebug from './E404WithDebug.astro';
+import E403Basic from './E403Basic.astro';
+import E500Basic from './E500Basic.astro';
+import E503Maintenance from './E503Maintenance.astro';
+
+import E404BasicContainer from './E404BasicContainer.astro';
+import E403BasicContainer from './E403BasicContainer.astro';
+import E500BasicContainer from './E500BasicContainer.astro';
+import E503MaintenanceContainer from './E503MaintenanceContainer.astro';
+import EErrorPageShowcase from './EErrorPageShowcase.astro';
+import EErrorPageShowcaseContainer from './EErrorPageShowcaseContainer.astro';
+import EErrorPageCustomStyle from './EErrorPageCustomStyle.astro';
+import EErrorPageCustomStyleContainer from './EErrorPageCustomStyleContainer.astro';
+
+import BasicSourceCode from './E404Basic.astro?raw';
+import WithDebugSourceCode from './E404WithDebug.astro?raw';
+import Error403SourceCode from './E403Basic.astro?raw';
+import Error500SourceCode from './E500Basic.astro?raw';
+import Error503SourceCode from './E503Maintenance.astro?raw';
+
+import { extractSimpleExample } from '../utils/component';
+
+export {
+  Error404,
+  Error403,
+  Error500,
+  Error503,
+  ErrorPage,
+  Error404Basic,
+  E404Basic,
+  E404WithDebug,
+  E403Basic,
+  E500Basic,
+  E503Maintenance,
+  E404BasicContainer,
+  E403BasicContainer,
+  E500BasicContainer,
+  E503MaintenanceContainer,
+  EErrorPageShowcase,
+  EErrorPageShowcaseContainer,
+  EErrorPageCustomStyle,
+  EErrorPageCustomStyleContainer,
+};
+
+// 错误页面组件包
+export const ErrorPackage = {
+  ErrorPage,
+  Error404,
+  Error403,
+  Error500,
+  Error503,
+  ErrorContainers: {
+    Basic404: E404BasicContainer,
+    Basic403: E403BasicContainer,
+    Basic500: E500BasicContainer,
+    Maintenance503: E503MaintenanceContainer,
+    Showcase: EErrorPageShowcaseContainer,
+    CustomStyle: EErrorPageCustomStyleContainer,
+  },
+};
+
+// 导出示例源代码
+export const ErrorExampleCodes = {
+  Basic404: extractSimpleExample(BasicSourceCode, 'Error404'),
+  WithDebug404: extractSimpleExample(WithDebugSourceCode, 'Error404'),
+  Basic403: extractSimpleExample(Error403SourceCode, 'Error403'),
+  Basic500: extractSimpleExample(Error500SourceCode, 'Error500'),
+  Maintenance503: extractSimpleExample(Error503SourceCode, 'Error503'),
+};

package/dist/src-astro/flex/Flex.astro

@@ -0,0 +1,138 @@
+---
+/**
+ * @component Flex
+ *
+ * @description
+ * Flex 组件是一个灵活的弹性布局组件，用于创建各种排列和对齐方式的布局。
+ * 它封装了 CSS Flexbox 的常用功能，提供简单易用的接口来控制子元素的排列方式。
+ *
+ * @note
+ * 此组件需要在 Root 组件内使用以确保样式正确加载。
+ *
+ * @usage
+ * ```astro
+ * ---
+ * import { Root, Flex } from '@coffic/cosy-ui';
+ * ---
+ *
+ * <Root>
+ *   <Flex>
+ *     <div>默认水平排列</div>
+ *     <div>居中对齐</div>
+ *   </Flex>
+ * </Root>
+ * ```
+ */
+
+import type { HTMLAttributes } from 'astro/types';
+
+type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type Justify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+type Align = 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+type Gap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+interface Props extends HTMLAttributes<'div'> {
+  /**
+   * 排列方向
+   * @default "row"
+   */
+  direction?: Direction;
+
+  /**
+   * 水平对齐方式
+   * @default "center"
+   */
+  justify?: Justify;
+
+  /**
+   * 垂直对齐方式
+   * @default "center"
+   */
+  align?: Align;
+
+  /**
+   * 是否允许换行
+   * @default false
+   */
+  wrap?: boolean;
+
+  /**
+   * 元素间距
+   * @default "md"
+   */
+  gap?: Gap;
+
+  /**
+   * 自定义类名
+   */
+  class?: string;
+
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
+}
+
+const {
+  direction = 'row',
+  justify = 'center',
+  align = 'center',
+  wrap = false,
+  gap = 'md',
+  class: className = '',
+  'class:list': classList,
+  ...rest
+} = Astro.props;
+
+// 方向映射
+const directionClasses: Record<Direction, string> = {
+  row: 'flex-row',
+  'row-reverse': 'flex-row-reverse',
+  column: 'flex-col',
+  'column-reverse': 'flex-col-reverse',
+};
+
+// 水平对齐映射
+const justifyClasses: Record<Justify, string> = {
+  start: 'justify-start',
+  end: 'justify-end',
+  center: 'justify-center',
+  between: 'justify-between',
+  around: 'justify-around',
+  evenly: 'justify-evenly',
+};
+
+// 垂直对齐映射
+const alignClasses: Record<Align, string> = {
+  start: 'items-start',
+  end: 'items-end',
+  center: 'items-center',
+  stretch: 'items-stretch',
+  baseline: 'items-baseline',
+};
+
+// 间距映射
+const gapClasses: Record<Gap, string> = {
+  none: 'gap-0',
+  xs: 'gap-2',
+  sm: 'gap-4',
+  md: 'gap-6',
+  lg: 'gap-8',
+  xl: 'gap-12',
+};
+
+// 构建最终类名
+const flexClasses = [
+  'flex',
+  directionClasses[direction as Direction],
+  justifyClasses[justify as Justify],
+  alignClasses[align as Align],
+  wrap ? 'flex-wrap' : 'flex-nowrap',
+  gapClasses[gap as Gap],
+  className,
+].join(' ');
+---
+
+<div class:list={[flexClasses, classList]} {...rest}>
+  <slot />
+</div>

package/dist/src-astro/flex/FlexBasic.astro

@@ -0,0 +1,26 @@
+---
+import Flex from './Flex.astro';
+---
+
+<Flex
+  gap="md"
+  justify="center"
+  align="center"
+  style="height: 200px; background: #f3f4f6;"
+>
+  <div
+    style="background: #60a5fa; color: white; padding: 16px; border-radius: 8px;"
+  >
+    元素 1
+  </div>
+  <div
+    style="background: #34d399; color: white; padding: 16px; border-radius: 8px;"
+  >
+    元素 2
+  </div>
+  <div
+    style="background: #f59e42; color: white; padding: 16px; border-radius: 8px;"
+  >
+    元素 3
+  </div>
+</Flex>

package/dist/src-astro/flex/index.ts

@@ -0,0 +1,11 @@
+import Flex from './Flex.astro';
+import FlexBasic from './FlexBasic.astro';
+import BasicSourceCode from './FlexBasic.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { Flex, FlexBasic };
+
+// 导出示例源代码
+export const FlexExampleCodes = {
+  Basic: extractSimpleExample(BasicSourceCode, 'Flex'),
+};

package/dist/src-astro/footer/EFooterBasic.astro

@@ -0,0 +1,18 @@
+---
+/**
+ * @component Footer.Basic
+ *
+ * @description
+ * 基础Footer组件示例，展示最简单的页脚用法。
+ */
+import { Footer } from '../../index-astro';
+---
+
+<Footer
+  siteName="我的网站"
+  homeLink="/"
+  slogan="简单而强大"
+  company="我的公司"
+  copyright="保留所有权利"
+  inspirationalSlogan="构建美好的数字体验"
+/>

package/dist/src-astro/footer/EFooterBasicContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import FooterBasic from './EFooterBasic.astro';
+import FooterBasicSourceCode from './EFooterBasic.astro?raw';
+---
+
+<CodeContainer codes={[FooterBasicSourceCode]}>
+  <div id="tab-1">
+    <FooterBasic />
+  </div>
+</CodeContainer>

package/dist/src-astro/footer/EFooterComplete.astro

@@ -0,0 +1,50 @@
+---
+/**
+ * @component Footer.Complete
+ *
+ * @description
+ * 展示完整功能的页脚示例，包含所有主要属性。
+ */
+import { Footer } from '../../index-astro';
+import { getExampleImage } from '../utils/image';
+---
+
+<Footer
+  siteName="我的网站"
+  homeLink="/"
+  slogan="简单而强大"
+  company="我的公司"
+  copyright="保留所有权利"
+  inspirationalSlogan="构建美好的数字体验"
+  logo={{
+    src: getExampleImage({
+      width: 100,
+      height: 100,
+      provider: 'robohash',
+      tag: 'logo',
+    }),
+    alt: '网站Logo',
+  }}
+  products={[
+    { name: '产品A', href: '/products/a' },
+    { name: '产品B', href: '/products/b' },
+    { name: '产品C', href: '/products/c' },
+    { name: '外部产品', href: 'https://example.com', external: true },
+  ]}
+  socialLinks={[
+    'https://github.com/myusername',
+    'https://twitter.com/myusername',
+    'https://linkedin.com/in/myusername',
+    'https://facebook.com/myusername',
+  ]}
+  aboutLink="/about"
+  contactLink="/contact"
+  termsLink="/terms"
+  privacyLink="/privacy"
+  teamLink="/team"
+  careersLink="/careers"
+  newsLink="/news"
+  blogLink="/blog"
+  faqLink="/faq"
+  icp="京ICP备12345678号"
+/>

package/dist/src-astro/footer/EFooterCompleteContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import FooterComplete from './EFooterComplete.astro';
+import FooterCompleteSourceCode from './EFooterComplete.astro?raw';
+---
+
+<CodeContainer codes={[FooterCompleteSourceCode]}>
+  <div id="tab-1">
+    <FooterComplete />
+  </div>
+</CodeContainer>

package/dist/src-astro/footer/EFooterFeaturesContainer.astro

@@ -0,0 +1,40 @@
+---
+import { CodeContainer } from '../../index-astro';
+import FooterBasic from './EFooterBasic.astro';
+import FooterWithSocial from './EFooterWithSocial.astro';
+import FooterWithProducts from './EFooterWithProducts.astro';
+import FooterWithLogo from './EFooterWithLogo.astro';
+import FooterWithNavigation from './EFooterWithNavigation.astro';
+
+import FooterBasicSourceCode from './EFooterBasic.astro?raw';
+import FooterWithSocialSourceCode from './EFooterWithSocial.astro?raw';
+import FooterWithProductsSourceCode from './EFooterWithProducts.astro?raw';
+import FooterWithLogoSourceCode from './EFooterWithLogo.astro?raw';
+import FooterWithNavigationSourceCode from './EFooterWithNavigation.astro?raw';
+---
+
+<CodeContainer
+  titles={['基础', '社交媒体', '产品链接', 'Logo', '导航链接']}
+  codes={[
+    FooterBasicSourceCode,
+    FooterWithSocialSourceCode,
+    FooterWithProductsSourceCode,
+    FooterWithLogoSourceCode,
+    FooterWithNavigationSourceCode,
+  ]}>
+  <div id="tab-1">
+    <FooterBasic />
+  </div>
+  <div id="tab-2">
+    <FooterWithSocial />
+  </div>
+  <div id="tab-3">
+    <FooterWithProducts />
+  </div>
+  <div id="tab-4">
+    <FooterWithLogo />
+  </div>
+  <div id="tab-5">
+    <FooterWithNavigation />
+  </div>
+</CodeContainer>

package/dist/src-astro/footer/EFooterWithLogo.astro

@@ -0,0 +1,28 @@
+---
+/**
+ * @component Footer.WithLogo
+ *
+ * @description
+ * 展示带有Logo的页脚示例。
+ */
+import { Footer } from '../../index-astro';
+import { getExampleImage } from '../utils/image';
+---
+
+<Footer
+  siteName="我的网站"
+  homeLink="/"
+  slogan="简单而强大"
+  company="我的公司"
+  copyright="保留所有权利"
+  inspirationalSlogan="构建美好的数字体验"
+  logo={{
+    src: getExampleImage({
+      width: 100,
+      height: 100,
+      provider: 'robohash',
+      tag: 'logo',
+    }),
+    alt: '网站Logo',
+  }}
+/>

package/dist/src-astro/footer/EFooterWithLogoContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import FooterWithLogo from './EFooterWithLogo.astro';
+import FooterWithLogoSourceCode from './EFooterWithLogo.astro?raw';
+---
+
+<CodeContainer codes={[FooterWithLogoSourceCode]}>
+  <div id="tab-1">
+    <FooterWithLogo />
+  </div>
+</CodeContainer>

package/dist/src-astro/footer/EFooterWithNavigation.astro

@@ -0,0 +1,24 @@
+---
+/**
+ * @component Footer.WithNavigation
+ *
+ * @description
+ * 展示带有导航链接的页脚示例。
+ */
+import { Footer } from '../../index-astro';
+---
+
+<Footer
+  siteName="我的网站"
+  homeLink="/"
+  slogan="简单而强大"
+  company="我的公司"
+  copyright="保留所有权利"
+  inspirationalSlogan="构建美好的数字体验"
+  aboutLink="/about"
+  contactLink="/contact"
+  termsLink="/terms"
+  privacyLink="/privacy"
+  blogLink="/blog"
+  faqLink="/faq"
+/>

package/dist/src-astro/footer/EFooterWithNavigationContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import FooterWithNavigation from './EFooterWithNavigation.astro';
+import FooterWithNavigationSourceCode from './EFooterWithNavigation.astro?raw';
+---
+
+<CodeContainer codes={[FooterWithNavigationSourceCode]}>
+  <div id="tab-1">
+    <FooterWithNavigation />
+  </div>
+</CodeContainer>