@coffic/cosy-ui 0.7.2 → 0.8.6

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

@@ -0,0 +1,18 @@
+---
+/**
+ * @component Error404.WithDebug
+ *
+ * @description
+ * 带调试信息的404错误页面示例，展示如何显示调试信息。
+ */
+import Error404 from './404.astro';
+---
+
+<Error404
+  debugKVs={{
+    reason: '页面不存在',
+    suggestedAction: '请检查URL拼写',
+    timestamp: new Date().toISOString(),
+    requestId: 'REQ_2024_001',
+  }}
+/>

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

@@ -0,0 +1,11 @@
+---
+/**
+ * @component Error500.Basic
+ *
+ * @description
+ * 基础的500服务器内部错误页面示例。
+ */
+import Error500 from './500.astro';
+---
+
+<Error500 />

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

@@ -0,0 +1,20 @@
+---
+/**
+ * @component Error500BasicContainer
+ *
+ * @description
+ * 500错误页面基础示例的容器组件，用于展示代码和预览。
+ */
+import { CodeContainer } from '../../index-astro';
+import E500Basic from './E500Basic.astro';
+import BasicSourceCode from './E500Basic.astro?raw';
+---
+
+<CodeContainer
+  titles={['500错误页面']}
+  descriptions={['基础的500服务器内部错误页面示例']}
+  codes={[BasicSourceCode]}>
+  <div id="tab-1">
+    <E500Basic />
+  </div>
+</CodeContainer>

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

@@ -0,0 +1,20 @@
+---
+/**
+ * @component Error503.Maintenance
+ *
+ * @description
+ * 503服务不可用错误页面的维护模式示例，展示系统维护时的页面。
+ */
+import Error503 from './503.astro';
+---
+
+<Error503
+  maintenanceMode={true}
+  estimatedRecovery="2024-12-25 10:00"
+  statusPageUrl="https://status.example.com"
+  debugKVs={{
+    reason: '系统升级',
+    startTime: '2024-12-25 08:00',
+    version: 'v2.1.0',
+  }}
+/>

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

@@ -0,0 +1,21 @@
+---
+/**
+ * @component Error503MaintenanceContainer
+ *
+ * @description
+ * 503错误页面维护模式示例的容器组件，用于展示代码和预览。
+ */
+import { CodeContainer } from '../../index-astro';
+import E503Maintenance from './E503Maintenance.astro';
+
+import MaintenanceSourceCode from './E503Maintenance.astro?raw';
+---
+
+<CodeContainer
+  titles={['503维护模式页面']}
+  descriptions={['503服务不可用错误页面的维护模式示例']}
+  codes={[MaintenanceSourceCode]}>
+  <div id="tab-1">
+    <E503Maintenance />
+  </div>
+</CodeContainer>

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

@@ -0,0 +1,21 @@
+---
+/**
+ * @component ErrorPage.CustomStyle
+ *
+ * @description
+ * 错误页面的自定义样式示例，展示如何通过class属性自定义错误页面的样式。
+ */
+import Error404 from './404.astro';
+---
+
+<div
+  class="cosy:bg-gradient-to-br cosy:from-purple-50 cosy:to-pink-50 cosy:dark:from-purple-900/20 cosy:dark:to-pink-900/20 cosy:p-8 cosy:rounded-xl"
+>
+  <Error404
+    debugKVs={{
+      customization: '自定义渐变背景',
+      style: '紫色到粉色渐变',
+      note: '这是一个自定义样式的示例',
+    }}
+  />
+</div>

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

@@ -0,0 +1,21 @@
+---
+/**
+ * @component ErrorPageCustomStyleContainer
+ *
+ * @description
+ * 错误页面自定义样式示例的容器组件，用于展示代码和预览。
+ */
+import { CodeContainer } from '../../index-astro';
+import EErrorPageCustomStyle from './EErrorPageCustomStyle.astro';
+
+import CustomStyleSourceCode from './EErrorPageCustomStyle.astro?raw';
+---
+
+<CodeContainer
+  titles={['自定义样式错误页面']}
+  descriptions={['展示如何自定义错误页面的样式外观']}
+  codes={[CustomStyleSourceCode]}>
+  <div id="tab-1">
+    <EErrorPageCustomStyle />
+  </div>
+</CodeContainer>

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/{flex → src-astro/flex}/Flex.astro

@@ -1,20 +1,20 @@
 ---
 /**
  * @component Flex
- * 
+ *
  * @description
  * Flex 组件是一个灵活的弹性布局组件，用于创建各种排列和对齐方式的布局。
  * 它封装了 CSS Flexbox 的常用功能，提供简单易用的接口来控制子元素的排列方式。
- * 
+ *
  * @note
  * 此组件需要在 Root 组件内使用以确保样式正确加载。
- * 
+ *
  * @usage
  * ```astro
  * ---
  * import { Root, Flex } from '@coffic/cosy-ui';
  * ---
- * 
+ *
  * <Root>
  *   <Flex>
  *     <div>默认水平排列</div>
@@ -37,36 +37,36 @@ 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;
-  
+
   /**
    * 类名列表
    */
@@ -86,39 +86,39 @@ const {
 
 // 方向映射
 const directionClasses: Record<Direction, string> = {
-  'row': 'flex-row',
+  row: 'flex-row',
   'row-reverse': 'flex-row-reverse',
-  'column': 'flex-col',
-  'column-reverse': 'flex-col-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'
+  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'
+  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'
+  none: 'gap-0',
+  xs: 'gap-2',
+  sm: 'gap-4',
+  md: 'gap-6',
+  lg: 'gap-8',
+  xl: 'gap-12',
 };
 
 // 构建最终类名
@@ -129,7 +129,7 @@ const flexClasses = [
   alignClasses[align as Align],
   wrap ? 'flex-wrap' : 'flex-nowrap',
   gapClasses[gap as Gap],
-  className
+  className,
 ].join(' ');
 ---
 

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/{flex → src-astro/flex}/index.ts

@@ -7,5 +7,5 @@ export { Flex, FlexBasic };
 
 // 导出示例源代码
 export const FlexExampleCodes = {
-	Basic: extractSimpleExample(BasicSourceCode, 'Flex'),
+  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/{footer → src-astro/footer}/EFooterBasicContainer.astro

@@ -1,11 +1,11 @@
 ---
-import { CodeContainer } from '../index';
+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>
+  <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号"
+/>