@coffic/cosy-ui 0.7.4 → 0.8.6

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

@@ -0,0 +1,124 @@
+---
+/**
+ * @component Error404
+ *
+ * @description
+ * 404错误页面组件，用于显示页面未找到的提示信息。
+ * 提供友好的错误提示、调试信息和导航选项，帮助用户快速找到所需内容。
+ *
+ * @design
+ * 设计理念：
+ * 1. 友好提示 - 使用简洁明了的文案和图标，减少用户的挫败感
+ * 2. 有用的信息 - 显示错误路径和调试信息，帮助定位问题
+ * 3. 导航引导 - 提供返回首页的按钮，帮助用户继续浏览
+ * 4. 视觉层次 - 通过不同的字体大小和颜色建立清晰的信息层次
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Error404 />
+ * ```
+ *
+ * 带调试信息：
+ * ```astro
+ * <Error404 debugKVs={{
+ *   reason: '页面不存在',
+ *   suggestedAction: '请检查URL拼写',
+ *   timestamp: new Date().toISOString()
+ * }} />
+ * ```
+ *
+ * @props
+ * @prop {Record<string, string>} [debugKVs={}] - 调试信息键值对，用于开发和调试
+ *
+ * @slots
+ * 无插槽，所有内容都通过props传递
+ */
+
+import '../../style.ts';
+import { LinkUtil } from '../utils/link.ts';
+
+const baseUrl = LinkUtil.getBaseUrl();
+const path = Astro.url.pathname;
+
+interface Error404Props {
+  debugKVs?: Record<string, string>;
+}
+
+const { debugKVs = {} } = Astro.props as Error404Props;
+---
+
+<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-primary cosy:leading-none">
+        404
+      </h1>
+      <div
+        class="cosy:w-24 cosy:h-1 cosy:bg-primary 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-primary">{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">
+      <a href={baseUrl} class="btn btn-primary cosy:w-full cosy:no-underline">
+        返回首页
+      </a>
+      <button
+        onclick="history.back()"
+        class="btn btn-outline cosy:w-full"
+        type="button">
+        返回上一页
+      </button>
+    </div>
+
+    <!-- 帮助提示 -->
+    <div class="cosy:text-sm cosy:text-base-content/50 cosy:mt-8">
+      <p>如果您认为这是一个错误，请联系网站管理员</p>
+    </div>
+  </div>
+</div>

package/dist/src-astro/errors/404Basic.astro

@@ -0,0 +1,7 @@
+---
+import Error404 from './404.astro';
+---
+
+<Error404
+  debugKVs={{ reason: '示例：页面不存在', try: '请检查链接是否正确' }}
+/>

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

@@ -0,0 +1,165 @@
+---
+/**
+ * @component Error500
+ *
+ * @description
+ * 500服务器内部错误页面组件，用于显示服务器出现内部错误的提示信息。
+ * 提供友好的错误说明和帮助用户解决问题的操作建议。
+ *
+ * @design
+ * 设计理念：
+ * 1. 问题说明 - 清楚地说明服务器出现了内部错误
+ * 2. 用户安抚 - 让用户知道这不是他们的问题，是系统的问题
+ * 3. 解决建议 - 提供刷新页面、稍后重试等建议
+ * 4. 联系途径 - 提供联系技术支持的方式
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Error500 />
+ * ```
+ *
+ * 带错误信息：
+ * ```astro
+ * <Error500 debugKVs={{
+ *   errorId: 'ERR_2024_001',
+ *   timestamp: new Date().toISOString(),
+ *   serverInfo: 'Server-01'
+ * }} />
+ * ```
+ *
+ * @props
+ * @prop {Record<string, string>} [debugKVs={}] - 调试信息键值对，用于开发和调试
+ * @prop {string} [supportUrl] - 技术支持页面URL
+ * @prop {string} [statusPageUrl] - 系统状态页面URL
+ */
+
+import '../../style.ts';
+import { LinkUtil } from '../utils/link.ts';
+
+const baseUrl = LinkUtil.getBaseUrl();
+const path = Astro.url.pathname;
+
+interface Error500Props {
+  debugKVs?: Record<string, string>;
+  supportUrl?: string;
+  statusPageUrl?: string;
+}
+
+const {
+  debugKVs = {},
+  supportUrl,
+  statusPageUrl,
+} = Astro.props as Error500Props;
+---
+
+<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-error cosy:leading-none">
+        500
+      </h1>
+      <div
+        class="cosy:w-24 cosy:h-1 cosy:bg-error 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-error">{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:bg-info/10 cosy:border cosy:border-info/20 cosy:rounded-lg cosy:p-4">
+      <h3 class="cosy:font-medium cosy:text-base-content cosy:mb-2">
+        您可以尝试：
+      </h3>
+      <ul
+        class="cosy:text-sm cosy:text-base-content/70 cosy:space-y-1 cosy:text-left">
+        <li>• 刷新页面</li>
+        <li>• 几分钟后重试</li>
+        <li>• 检查您的网络连接</li>
+        <li>• 联系技术支持</li>
+      </ul>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="cosy:space-y-3">
+      <button
+        onclick="window.location.reload()"
+        class="btn btn-primary cosy:w-full"
+        type="button">
+        刷新页面
+      </button>
+
+      <a href={baseUrl} class="btn btn-outline cosy:w-full cosy:no-underline">
+        返回首页
+      </a>
+
+      {
+        statusPageUrl && (
+          <a
+            href={statusPageUrl}
+            class="btn btn-ghost cosy:w-full cosy:no-underline">
+            查看系统状态
+          </a>
+        )
+      }
+
+      {
+        supportUrl && (
+          <a
+            href={supportUrl}
+            class="btn btn-ghost cosy:w-full cosy:no-underline">
+            联系技术支持
+          </a>
+        )
+      }
+    </div>
+
+    <!-- 帮助提示 -->
+    <div class="cosy:text-sm cosy:text-base-content/50 cosy:mt-8">
+      <p>如果问题持续存在，请联系我们的技术支持团队</p>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,189 @@
+---
+/**
+ * @component Error503
+ *
+ * @description
+ * 503服务不可用错误页面组件，用于显示服务临时不可用的提示信息。
+ * 通常用于系统维护、升级或服务器过载等情况。
+ *
+ * @design
+ * 设计理念：
+ * 1. 临时性说明 - 明确告知用户这是临时问题，服务将恢复
+ * 2. 时间提示 - 如果可能，提供预期恢复时间
+ * 3. 维护说明 - 说明可能的维护或升级情况
+ * 4. 状态更新 - 提供获取最新状态信息的途径
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Error503 />
+ * ```
+ *
+ * 带维护信息：
+ * ```astro
+ * <Error503
+ *   maintenanceMode={true}
+ *   estimatedRecovery="2024-12-25 10:00"
+ *   debugKVs={{
+ *     reason: '系统升级',
+ *     startTime: '2024-12-25 08:00'
+ *   }}
+ * />
+ * ```
+ *
+ * @props
+ * @prop {Record<string, string>} [debugKVs={}] - 调试信息键值对
+ * @prop {boolean} [maintenanceMode=false] - 是否为维护模式
+ * @prop {string} [estimatedRecovery] - 预期恢复时间
+ * @prop {string} [statusPageUrl] - 系统状态页面URL
+ * @prop {string} [notificationUrl] - 通知订阅页面URL
+ */
+
+import '../../style.ts';
+import { LinkUtil } from '../utils/link.ts';
+
+const baseUrl = LinkUtil.getBaseUrl();
+const path = Astro.url.pathname;
+
+interface Error503Props {
+  debugKVs?: Record<string, string>;
+  maintenanceMode?: boolean;
+  estimatedRecovery?: string;
+  statusPageUrl?: string;
+  notificationUrl?: string;
+}
+
+const {
+  debugKVs = {},
+  maintenanceMode = false,
+  estimatedRecovery,
+  statusPageUrl,
+  notificationUrl,
+} = Astro.props as Error503Props;
+---
+
+<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-info cosy:leading-none">
+        503
+      </h1>
+      <div
+        class="cosy:w-24 cosy:h-1 cosy:bg-info 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">
+        {maintenanceMode ? '系统维护中' : '服务不可用'}
+      </h2>
+      <p class="cosy:text-base-content/70 cosy:text-lg">
+        {
+          maintenanceMode
+            ? '我们正在进行系统维护和升级，服务将很快恢复。'
+            : '服务器当前无法处理您的请求，请稍后重试。'
+        }
+      </p>
+    </div>
+
+    <!-- 恢复时间 -->
+    {
+      estimatedRecovery && (
+        <div class="cosy:bg-success/10 cosy:border cosy:border-success/20 cosy:rounded-lg cosy:p-4">
+          <h3 class="cosy:font-medium cosy:text-base-content cosy:mb-1">
+            预期恢复时间
+          </h3>
+          <p class="cosy:text-success cosy:font-mono">{estimatedRecovery}</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-info"
+          >{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:bg-warning/10 cosy:border cosy:border-warning/20 cosy:rounded-lg cosy:p-4">
+      <h3 class="cosy:font-medium cosy:text-base-content cosy:mb-2">
+        在等待期间：
+      </h3>
+      <ul
+        class="cosy:text-sm cosy:text-base-content/70 cosy:space-y-1 cosy:text-left">
+        <li>• 请耐心等待服务恢复</li>
+        <li>• 可以刷新页面查看最新状态</li>
+        <li>• 关注我们的状态页面获取更新</li>
+        {notificationUrl && <li>• 订阅通知获得恢复提醒</li>}
+      </ul>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="cosy:space-y-3">
+      <button
+        onclick="window.location.reload()"
+        class="btn btn-primary cosy:w-full"
+        type="button">
+        刷新页面
+      </button>
+
+      {
+        statusPageUrl && (
+          <a
+            href={statusPageUrl}
+            class="btn btn-info cosy:w-full cosy:no-underline">
+            查看系统状态
+          </a>
+        )
+      }
+
+      {
+        notificationUrl && (
+          <a
+            href={notificationUrl}
+            class="btn btn-outline cosy:w-full cosy:no-underline">
+            订阅恢复通知
+          </a>
+        )
+      }
+
+      <a href={baseUrl} class="btn btn-ghost cosy:w-full cosy:no-underline">
+        返回首页
+      </a>
+    </div>
+
+    <!-- 帮助提示 -->
+    <div class="cosy:text-sm cosy:text-base-content/50 cosy:mt-8">
+      <p>感谢您的耐心等待，我们正在努力恢复服务</p>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+---
+/**
+ * @component Error403.Basic
+ *
+ * @description
+ * 基础的403禁止访问错误页面示例。
+ */
+import Error403 from './403.astro';
+---
+
+<Error403 />

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

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

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

@@ -0,0 +1,11 @@
+---
+/**
+ * @component Error404.Basic
+ *
+ * @description
+ * 基础的404错误页面示例，展示最简单的404错误页面用法。
+ */
+import Error404 from './404.astro';
+---
+
+<Error404 />

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

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

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>