@coffic/cosy-ui 0.9.39 → 0.9.40

package/dist/index-astro.ts

@@ -1,6 +1,7 @@
 // 基础组件和功能模块 (按字母顺序)
 export * from './src-astro/alert';
 export * from './src-astro/alert-dialog';
+export * from './src-astro/api-test';
 export * from './src-astro/article';
 export * from './src-astro/banner';
 export * from './src-astro/badge';
@@ -57,6 +58,7 @@ export * from './src-astro/toc';
 export * from './src-astro/toast';
 
 // 类型定义 (按字母顺序)
+export * from './src-astro/types/api-test';
 export * from './src-astro/types/article';
 export * from './src-astro/types/footer';
 export * from './src-astro/types/header';

package/dist/src-astro/api-test/ApiEndpointCard.astro

@@ -0,0 +1,254 @@
+---
+/**
+ * @component ApiEndpointCard
+ *
+ * @description
+ * ApiEndpointCard 组件用于显示单个API端点的测试界面，包括参数输入、快速测试和测试结果展示。
+ * 支持多种参数类型，提供直观的测试体验。
+ *
+ * @design
+ * 设计理念：
+ * 1. 清晰的信息层次 - 通过视觉分组和间距清晰展示API信息
+ * 2. 直观的参数输入 - 支持多种输入类型，提供验证和默认值
+ * 3. 便捷的快速测试 - 预设常用参数组合，提高测试效率
+ * 4. 详细的结果展示 - 清晰展示请求和响应信息
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ApiEndpointCard endpoint={endpoint} />
+ * ```
+ *
+ * @props
+ * @prop {IApiEndpoint} endpoint - API端点配置信息
+ * @prop {string} [class] - 自定义CSS类名
+ */
+
+import Card from '../card/Card.astro';
+import Button from '../button/Button.astro';
+import Badge from '../badge/Badge.astro';
+import type { IApiEndpoint } from '../types/api-test';
+
+interface Props {
+  endpoint: IApiEndpoint;
+  class?: string;
+}
+
+const { endpoint, class: className } = Astro.props;
+
+// 预处理数据
+const hasParams = endpoint.params && endpoint.params.length > 0;
+const hasQuickTests = endpoint.quickTests && endpoint.quickTests.length > 0;
+const hasDescription = !!endpoint.description;
+
+// 获取HTTP方法对应的颜色
+const getMethodColor = (
+  method: string
+):
+  | 'success'
+  | 'primary'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'secondary'
+  | 'accent'
+  | 'ghost' => {
+  const colors: Record<
+    string,
+    | 'success'
+    | 'primary'
+    | 'warning'
+    | 'error'
+    | 'info'
+    | 'secondary'
+    | 'accent'
+    | 'ghost'
+  > = {
+    GET: 'success',
+    POST: 'primary',
+    PUT: 'warning',
+    DELETE: 'error',
+    PATCH: 'info',
+  };
+  return colors[method] || 'neutral';
+};
+
+// 获取参数类型对应的输入元素
+const getInputElement = (param: any) => {
+  const baseAttrs = {
+    'data-param': param.name,
+    'data-endpoint': endpoint.path,
+    'data-required': param.required || false,
+    'data-validation': JSON.stringify(param.validation || {}),
+  };
+
+  return {
+    type: param.type || 'text',
+    attrs: baseAttrs,
+    options: param.options || [],
+    defaultValue: param.defaultValue,
+    placeholder: param.placeholder,
+    required: param.required,
+    validation: param.validation,
+  };
+};
+---
+
+<Card title={endpoint.name} class={className}>
+  <div class="space-y-4">
+    {/* HTTP方法和路径 */}
+    <div class="bg-base-200 p-3 rounded-lg flex items-center gap-2 flex-wrap">
+      <Badge variant={getMethodColor(endpoint.method)}>
+        {endpoint.method}
+      </Badge>
+      <code class="text-primary font-mono text-sm break-all">
+        {endpoint.path}
+      </code>
+    </div>
+
+    {/* 描述 */}
+    {
+      hasDescription && (
+        <p class="text-base-content/70">{endpoint.description}</p>
+      )
+    }
+
+    {/* 参数输入 */}
+    {
+      hasParams && (
+        <div class="space-y-3">
+          <p class="font-medium text-base-content">请求参数：</p>
+          {endpoint.params!.map((param) => {
+            const inputConfig = getInputElement(param);
+            return (
+              <div class="form-control">
+                <label class="label">
+                  <span class="label-text">
+                    {param.name}
+                    {param.required && <span class="text-error ml-1">*</span>}
+                  </span>
+                  {param.validation?.message && (
+                    <span class="label-text-alt text-warning">
+                      {param.validation.message}
+                    </span>
+                  )}
+                </label>
+
+                {inputConfig.type === 'select' ? (
+                  <select
+                    class="select select-bordered w-full"
+                    data-param={inputConfig.attrs['data-param']}
+                    data-endpoint={inputConfig.attrs['data-endpoint']}
+                    data-required={inputConfig.attrs['data-required']}
+                    data-validation={inputConfig.attrs['data-validation']}
+                    required={inputConfig.required}>
+                    <option value="">请选择</option>
+                    {inputConfig.options.map((option: string) => (
+                      <option
+                        value={option}
+                        selected={option === inputConfig.defaultValue}>
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+                ) : inputConfig.type === 'textarea' ? (
+                  <textarea
+                    class="textarea textarea-bordered w-full"
+                    placeholder={inputConfig.placeholder}
+                    rows={3}
+                    data-param={inputConfig.attrs['data-param']}
+                    data-endpoint={inputConfig.attrs['data-endpoint']}
+                    data-required={inputConfig.attrs['data-required']}
+                    data-validation={inputConfig.attrs['data-validation']}
+                    required={inputConfig.required}>
+                    {inputConfig.defaultValue || ''}
+                  </textarea>
+                ) : inputConfig.type === 'checkbox' ? (
+                  <input
+                    type="checkbox"
+                    class="checkbox checkbox-primary"
+                    data-param={inputConfig.attrs['data-param']}
+                    data-endpoint={inputConfig.attrs['data-endpoint']}
+                    data-required={inputConfig.attrs['data-required']}
+                    data-validation={inputConfig.attrs['data-validation']}
+                    checked={inputConfig.defaultValue || false}
+                  />
+                ) : inputConfig.type === 'radio' ? (
+                  <div class="flex flex-wrap gap-3">
+                    {inputConfig.options.map((option: string) => (
+                      <label class="label cursor-pointer gap-2">
+                        <input
+                          type="radio"
+                          name={`${endpoint.path}-${param.name}`}
+                          class="radio radio-primary"
+                          value={option}
+                          data-param={inputConfig.attrs['data-param']}
+                          data-endpoint={inputConfig.attrs['data-endpoint']}
+                          data-required={inputConfig.attrs['data-required']}
+                          data-validation={inputConfig.attrs['data-validation']}
+                          checked={option === inputConfig.defaultValue}
+                        />
+                        <span class="label-text">{option}</span>
+                      </label>
+                    ))}
+                  </div>
+                ) : (
+                  <input
+                    type={inputConfig.type}
+                    placeholder={inputConfig.placeholder}
+                    class="input input-bordered w-full"
+                    data-param={inputConfig.attrs['data-param']}
+                    data-endpoint={inputConfig.attrs['data-endpoint']}
+                    data-required={inputConfig.attrs['data-required']}
+                    data-validation={inputConfig.attrs['data-validation']}
+                    required={inputConfig.required}
+                    value={inputConfig.defaultValue || ''}
+                    min={inputConfig.validation?.min}
+                    max={inputConfig.validation?.max}
+                    pattern={inputConfig.validation?.pattern}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )
+    }
+
+    {/* 快速测试 */}
+    {
+      hasQuickTests && (
+        <div>
+          <p class="text-sm text-base-content/70 mb-3">快速填充参数：</p>
+          <div class="flex flex-wrap gap-2">
+            {endpoint.quickTests!.map((quickTest, index) => (
+              <Button
+                variant="outline"
+                size="sm"
+                data-quick-test={JSON.stringify(quickTest.values)}
+                data-endpoint={endpoint.path}
+                title={quickTest.description}>
+                {quickTest.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+      )
+    }
+
+    {/* 测试按钮 */}
+    <Button
+      variant="primary"
+      block
+      data-endpoint={endpoint.path}
+      data-method={endpoint.method}>
+      测试接口
+    </Button>
+
+    {/* 测试结果 */}
+    <div
+      class="hidden mt-4 p-4 bg-base-200 rounded-lg border-l-4 border-l-primary"
+      data-result={endpoint.path}>
+    </div>
+  </div>
+</Card>

package/dist/src-astro/api-test/ApiTestScript.astro

@@ -0,0 +1,357 @@
+---
+/**
+ * @component ApiTestScript
+ *
+ * @description
+ * ApiTestScript 组件提供API测试的核心JavaScript逻辑，包括请求发送、响应处理和结果展示。
+ * 支持多种HTTP方法、参数验证、请求头配置和详细的响应信息展示。
+ *
+ * @design
+ * 设计理念：
+ * 1. 健壮性 - 完善的错误处理和边界情况处理
+ * 2. 可观测性 - 详细的日志记录和状态反馈
+ * 3. 灵活性 - 支持多种请求配置和自定义选项
+ * 4. 用户体验 - 清晰的加载状态和结果展示
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ApiTestScript />
+ * ```
+ *
+ * 带配置的用法：
+ * ```astro
+ * <ApiTestScript
+ *   showResponseTime={true}
+ *   showRequestDetails={true}
+ *   defaultHeaders={{ 'Authorization': 'Bearer token' }}
+ * />
+ * ```
+ *
+ * @props
+ * @prop {boolean} [showResponseTime=true] - 是否显示响应时间
+ * @prop {boolean} [showRequestDetails=false] - 是否显示请求详情
+ * @prop {Record<string, string>} [defaultHeaders] - 默认请求头
+ */
+
+interface Props {
+  showResponseTime?: boolean;
+  showRequestDetails?: boolean;
+  defaultHeaders?: Record<string, string>;
+}
+
+const {
+  showResponseTime = true,
+  showRequestDetails = false,
+  defaultHeaders = {},
+} = Astro.props;
+---
+
+<script define:vars={{ showResponseTime, showRequestDetails, defaultHeaders }}>
+  // 格式化响应显示
+  function formatResponse(response, data, responseTime) {
+    const statusColor = response.ok ? 'success' : 'error';
+    const statusText = response.ok ? '成功' : '失败';
+
+    let result = `
+      <div class="space-y-3">
+        <div class="flex items-center gap-2">
+          <span class="font-semibold text-base-content">HTTP状态:</span> 
+          <span class="badge badge-${statusColor}">${response.status} ${response.statusText}</span>
+          <span class="text-sm text-base-content/70">(${statusText})</span>
+        </div>
+    `;
+
+    if (showResponseTime && responseTime) {
+      result += `
+        <div>
+          <span class="font-semibold text-base-content">响应时间:</span> 
+          <span class="text-success">${responseTime}ms</span>
+        </div>
+      `;
+    }
+
+    if (showRequestDetails) {
+      result += `
+        <div>
+          <span class="font-semibold text-base-content">请求URL:</span> 
+          <code class="text-primary font-mono text-sm break-all">${response.url}</code>
+        </div>
+      `;
+    }
+
+    result += `
+        <div>
+          <span class="font-semibold text-base-content">响应内容:</span>
+          <pre class="mt-2 p-3 bg-base-300 rounded-lg overflow-x-auto text-sm">${JSON.stringify(data, null, 2)}</pre>
+        </div>
+      </div>
+    `;
+
+    return result;
+  }
+
+  // 收集请求头
+  function collectHeaders() {
+    const headers = { ...defaultHeaders };
+
+    // 收集自定义请求头
+    document
+      .querySelectorAll('[data-header-key][data-header-value]')
+      .forEach((input) => {
+        const key = input.dataset.headerKey;
+        const value = input.dataset.headerValue;
+        if (key && value) {
+          headers[key] = value;
+        }
+      });
+
+    // 设置默认Content-Type
+    if (!headers['Content-Type']) {
+      headers['Content-Type'] = 'application/json';
+    }
+
+    return headers;
+  }
+
+  // 验证参数
+  function validateParams(params) {
+    const errors = [];
+
+    Object.entries(params).forEach(([key, value]) => {
+      const input = document.querySelector(
+        `[data-param="${key}"][data-endpoint]`
+      );
+      if (input) {
+        const validation = JSON.parse(input.dataset.validation || '{}');
+        const required = input.dataset.required === 'true';
+
+        if (required && (!value || value.toString().trim() === '')) {
+          errors.push(`${key} 是必填参数`);
+        }
+
+        if (validation.min && Number(value) < validation.min) {
+          errors.push(`${key} 不能小于 ${validation.min}`);
+        }
+
+        if (validation.max && Number(value) > validation.max) {
+          errors.push(`${key} 不能大于 ${validation.max}`);
+        }
+
+        if (validation.pattern && !new RegExp(validation.pattern).test(value)) {
+          errors.push(`${key} 格式不正确`);
+        }
+      }
+    });
+
+    return { isValid: errors.length === 0, errors };
+  }
+
+  // 测试API端点
+  async function testEndpoint(endpoint, method) {
+    console.log('🚀 开始测试端点:', endpoint, method);
+
+    // 找到所有匹配的结果区域和按钮
+    const resultDivs = document.querySelectorAll(`[data-result="${endpoint}"]`);
+    const testBtns = document.querySelectorAll(
+      `[data-endpoint="${endpoint}"][data-method="${method}"]`
+    );
+
+    console.log('找到结果区域数量:', resultDivs.length);
+    console.log('找到按钮数量:', testBtns.length);
+
+    // 使用第一个匹配的元素
+    const resultDiv = resultDivs[0];
+    const testBtn = testBtns[0];
+
+    if (!resultDiv || !testBtn) {
+      console.error('❌ 找不到结果区域或按钮:', { endpoint, method });
+      return;
+    }
+
+    // 显示结果区域
+    resultDiv.classList.remove('hidden');
+    resultDiv.innerHTML =
+      '<span class="text-primary italic">正在测试接口...</span>';
+
+    // 禁用按钮并显示加载状态
+    testBtn.disabled = true;
+    testBtn.innerHTML =
+      '<span class="loading loading-spinner loading-sm"></span> 测试中...';
+
+    const startTime = Date.now();
+
+    try {
+      // 构建URL和参数
+      let url = endpoint;
+      const params = {};
+
+      // 收集参数值
+      document
+        .querySelectorAll(`[data-endpoint="${endpoint}"][data-param]`)
+        .forEach((input) => {
+          const paramName = input.dataset.param;
+          if (paramName) {
+            if (input.type === 'checkbox') {
+              params[paramName] = input.checked;
+            } else if (input.type === 'radio') {
+              if (input.checked) {
+                params[paramName] = input.value;
+              }
+            } else if (input.value.trim()) {
+              params[paramName] = input.value.trim();
+            }
+          }
+        });
+
+      // 验证参数
+      const validation = validateParams(params);
+      if (!validation.isValid) {
+        resultDiv.innerHTML = `
+          <div class="text-error">
+            <span class="font-semibold">参数验证失败:</span>
+            <ul class="mt-2 list-disc list-inside">
+              ${validation.errors.map((error) => `<li>${error}</li>`).join('')}
+            </ul>
+          </div>
+        `;
+        return;
+      }
+
+      // 为GET请求添加查询参数
+      if (method === 'GET' && Object.keys(params).length > 0) {
+        const searchParams = new URLSearchParams();
+        Object.entries(params).forEach(([key, value]) => {
+          if (value !== undefined && value !== null && value !== '') {
+            searchParams.append(key, value.toString());
+          }
+        });
+        url += `?${searchParams.toString()}`;
+      }
+
+      // 收集请求头
+      const headers = collectHeaders();
+
+      console.log('📤 发送请求:', { url, method, params, headers });
+
+      // 发送请求
+      const response = await fetch(url, {
+        method: method,
+        headers,
+        body: method !== 'GET' ? JSON.stringify(params) : undefined,
+      });
+
+      const responseTime = Date.now() - startTime;
+
+      // 处理响应
+      let responseText = '';
+      try {
+        responseText = await response.text();
+        let data;
+        try {
+          data = JSON.parse(responseText);
+        } catch {
+          data = responseText;
+        }
+
+        resultDiv.innerHTML = formatResponse(response, data, responseTime);
+        console.log('✅ 请求成功:', { response, data, responseTime });
+      } catch (error) {
+        resultDiv.innerHTML = formatResponse(
+          response,
+          '[无法读取响应内容]',
+          responseTime
+        );
+        console.error('❌ 响应解析失败:', error);
+      }
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+      resultDiv.innerHTML = `
+        <div class="text-error">
+          <span class="font-semibold">请求失败:</span> ${errorMessage}
+        </div>
+      `;
+      console.error('❌ 请求失败:', error);
+    } finally {
+      // 恢复按钮状态
+      testBtn.disabled = false;
+      testBtn.innerHTML = '测试接口';
+    }
+  }
+
+  // 快速填充参数
+  function quickFill(endpoint, values) {
+    console.log('⚡ 快速填充参数:', { endpoint, values });
+
+    Object.entries(values).forEach(([key, value]) => {
+      const inputs = document.querySelectorAll(
+        `[data-endpoint="${endpoint}"][data-param="${key}"]`
+      );
+      console.log(`找到参数 ${key} 的输入框数量:`, inputs.length);
+
+      // 使用第一个匹配的输入框
+      const input = inputs[0];
+      if (input) {
+        if (input.type === 'checkbox') {
+          input.checked = Boolean(value);
+        } else if (input.type === 'radio') {
+          const radioInput = document.querySelector(
+            `[data-endpoint="${endpoint}"][data-param="${key}"][value="${value}"]`
+          );
+          if (radioInput) {
+            radioInput.checked = true;
+          }
+        } else {
+          input.value = value.toString();
+        }
+        console.log(`✅ 已填充参数 ${key}:`, value);
+      } else {
+        console.warn(`⚠️ 未找到参数 ${key} 的输入框`);
+      }
+    });
+  }
+
+  // 页面加载完成后绑定事件
+  document.addEventListener('DOMContentLoaded', () => {
+    console.log('🚀 API测试组件已加载，可以开始测试了！');
+
+    // 绑定测试按钮事件
+    document.querySelectorAll('[data-endpoint][data-method]').forEach((btn) => {
+      btn.addEventListener('click', (event) => {
+        const clickedBtn = event.currentTarget;
+        const endpoint = clickedBtn.dataset.endpoint;
+        const method = clickedBtn.dataset.method;
+        console.log('🖱️ 点击了按钮:', { endpoint, method });
+        if (endpoint && method) {
+          testEndpoint(endpoint, method);
+        }
+      });
+    });
+
+    // 绑定快速测试按钮事件
+    document.querySelectorAll('[data-quick-test]').forEach((btn) => {
+      btn.addEventListener('click', (event) => {
+        const clickedBtn = event.currentTarget;
+        const endpoint = clickedBtn.dataset.endpoint;
+        const values = JSON.parse(clickedBtn.dataset.quickTest || '{}');
+        console.log('⚡ 快速填充:', { endpoint, values });
+        if (endpoint && values) {
+          quickFill(endpoint, values);
+        }
+      });
+    });
+
+    // 绑定请求头输入框事件
+    document.querySelectorAll('[data-header-key]').forEach((input) => {
+      input.addEventListener('input', (event) => {
+        const target = event.target;
+        const key = target.dataset.headerKey;
+        const value = target.value;
+        if (key) {
+          target.dataset.headerValue = value;
+        }
+      });
+    });
+  });
+</script>

package/dist/src-astro/api-test/ApiTester.astro

@@ -0,0 +1,111 @@
+---
+/**
+ * @component ApiTester
+ *
+ * @description
+ * ApiTester 组件是一个完整的API测试工具，提供多个API端点的测试界面。
+ * 支持参数配置、快速测试、请求发送和结果展示等功能。
+ *
+ * @design
+ * 设计理念：
+ * 1. 统一管理 - 在一个界面中管理多个API端点的测试
+ * 2. 灵活配置 - 支持多种参数类型和验证规则
+ * 3. 快速测试 - 提供预设参数组合，提高测试效率
+ * 4. 清晰展示 - 直观展示测试结果和请求详情
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ApiTester endpoints={endpoints} title="用户API测试" />
+ * ```
+ *
+ * 带描述的用法：
+ * ```astro
+ * <ApiTester
+ *   endpoints={endpoints}
+ *   title="用户API测试"
+ *   description="测试用户相关的所有API接口"
+ * />
+ * ```
+ *
+ * @props
+ * @prop {IApiEndpoint[]} endpoints - API端点配置列表
+ * @prop {string} [title="API 测试"] - 组件标题
+ * @prop {string} [description] - 组件描述
+ * @prop {boolean} [showHeaders=false] - 是否显示请求头配置
+ * @prop {Record<string, string>} [defaultHeaders] - 默认请求头
+ * @prop {boolean} [showResponseTime=true] - 是否显示响应时间
+ * @prop {boolean} [showRequestDetails=false] - 是否显示请求详情
+ * @prop {string} [class] - 自定义CSS类名
+ */
+
+import Heading from '../heading/Heading.astro';
+import Grid from '../grid/Grid.astro';
+import ApiEndpointCard from './ApiEndpointCard.astro';
+import ApiTestScript from './ApiTestScript.astro';
+import type { IApiTesterProps, IApiEndpoint } from '../types/api-test';
+
+const {
+  endpoints,
+  title = 'API 测试',
+  description,
+  showHeaders = false,
+  defaultHeaders,
+  showResponseTime = true,
+  showRequestDetails = false,
+  class: className,
+} = Astro.props;
+---
+
+<div class={`space-y-8 ${className || ''}`}>
+  <div class="text-center">
+    <Heading level={1}>
+      {title}
+    </Heading>
+    {
+      description && (
+        <p class="mt-2 text-base-content/70 max-w-2xl mx-auto">{description}</p>
+      )
+    }
+  </div>
+
+  {/* 请求头配置 */}
+  {
+    showHeaders && (
+      <div class="bg-base-200 p-4 rounded-lg">
+        <h3 class="text-lg font-medium mb-3">请求头配置</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {defaultHeaders &&
+            Object.entries(defaultHeaders).map(([key, value]) => (
+              <div class="form-control">
+                <label class="label">
+                  <span class="label-text">{key}</span>
+                </label>
+                <input
+                  type="text"
+                  class="input input-bordered w-full"
+                  value={value as string}
+                  data-header-key={key}
+                  data-header-value={value as string}
+                />
+              </div>
+            ))}
+        </div>
+      </div>
+    )
+  }
+
+  <Grid cols={{ base: 1, lg: Math.min(endpoints.length, 2) }}>
+    {
+      endpoints.map((endpoint: IApiEndpoint) => (
+        <ApiEndpointCard endpoint={endpoint} />
+      ))
+    }
+  </Grid>
+</div>
+
+<ApiTestScript
+  showResponseTime={showResponseTime}
+  showRequestDetails={showRequestDetails}
+  defaultHeaders={defaultHeaders}
+/>

package/dist/src-astro/api-test/index.ts

@@ -0,0 +1,5 @@
+import ApiTester from './ApiTester.astro';
+import ApiEndpointCard from './ApiEndpointCard.astro';
+import ApiTestScript from './ApiTestScript.astro';
+
+export { ApiTester, ApiEndpointCard, ApiTestScript };

package/dist/src-astro/api-test/index_astro.ts

@@ -0,0 +1,5 @@
+import ApiTester from './ApiTester.astro';
+import ApiEndpointCard from './ApiEndpointCard.astro';
+import ApiTestScript from './ApiTestScript.astro';
+
+export { ApiTester, ApiEndpointCard, ApiTestScript };

package/dist/src-astro/layout-app/AppLayout.astro

@@ -342,8 +342,10 @@ const sidebarHeightClass = getSidebarHeightClass(headerConfig?.height);
   <Container
     flex="row"
     gap="none"
-    width="full"
     padding="none"
+    width="full"
+    centered={true}
+    aria-label="AppLayout-Container"
     class={containerMinHeightClass}>
     <!-- 侧边栏容器 -->
     {

package/dist/src-astro/mac-window/MacWindow.astro

@@ -118,9 +118,9 @@ const windowId = id || `mac-window-${Math.random().toString(36).substr(2, 9)}`;
 
 <Container
   background={bgType}
-  size="full"
   padding="none"
-  centered={false}
+  centered={true}
+  aria-label="MacWindow-Container"
   class={`cosy:flex cosy:relative cosy:rounded-2xl cosy:overflow-hidden ${height} ${withShadow ? 'cosy:shadow-lg' : ''}`}
   data-window-id={windowId}>
   <!-- 窗口控制按钮 -->

package/dist/src-astro/picture-book/PictureBookPage.astro

@@ -41,6 +41,7 @@
  * - background?: BackgroundColor | ImageMetadata - 背景配置，支持背景色或图片。背景色如：base-100、primary/20、secondary/30 等；图片直接传递 ImageMetadata 对象
  * - pageAspectRatio?: number - 页面宽高比（宽/高），默认 3/4
  * - border?: boolean - 是否在比例内容区域显示边框（由容器控制），默认 true
+ * - rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' - 页面圆角大小，默认 'xl'
  *
  * @slots
  * - overlay: 覆盖层插槽，相对安全区域进行绝对定位放置文本框/装饰
@@ -58,12 +59,14 @@ export interface IPictureBookPageProps {
   background?: BackgroundColor | ImageMetadata;
   pageAspectRatio?: number;
   border?: boolean | ContentBorderColor;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 }
 
 const {
   background,
   pageAspectRatio = 3 / 4,
   border = true,
+  rounded = 'xl',
 } = Astro.props as IPictureBookPageProps;
 
 // 判断是否为图片类型
@@ -79,20 +82,20 @@ const isImageBackground =
   background={isImageBackground ? undefined : (background as BackgroundColor)}
   padding="none"
   margin="none"
-  rounded="xl"
+  rounded={rounded}
   border={false}
   centered={true}
   aria-label="绘本页"
   class="cosy:relative cosy:overflow-hidden">
   <!-- 背景层：自动显示背景色或图片，填充比例内容区域 -->
   <div
-    class="cosy:absolute cosy:inset-0 cosy:w-full cosy:h-full cosy:rounded-xl">
+    class={`cosy:absolute cosy:inset-0 cosy:w-full cosy:h-full ${rounded !== 'none' ? `cosy:rounded-${rounded}` : ''}`}>
     {
       isImageBackground && (
         <Image
           src={background as ImageMetadata}
           alt="页面背景"
-          class="cosy:w-full cosy:h-full cosy:object-cover cosy:rounded-xl"
+          class={`cosy:w-full cosy:h-full cosy:object-cover ${rounded !== 'none' ? `cosy:rounded-${rounded}` : ''}`}
         />
       )
     }

package/dist/src-astro/types/api-test.ts

@@ -0,0 +1,138 @@
+export interface IApiEndpoint {
+    /**
+     * API端点名称
+     */
+    name: string;
+
+    /**
+     * HTTP请求方法
+     */
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+
+    /**
+     * API端点路径
+     */
+    path: string;
+
+    /**
+     * API端点描述
+     */
+    description?: string;
+
+    /**
+     * 请求参数配置
+     */
+    params?: IApiParam[];
+
+    /**
+     * 快速测试配置
+     */
+    quickTests?: IQuickTest[];
+}
+
+export interface IApiParam {
+    /**
+     * 参数名称
+     */
+    name: string;
+
+    /**
+     * 参数占位符文本
+     */
+    placeholder: string;
+
+    /**
+     * 参数类型
+     * @default "text"
+     */
+    type?: 'text' | 'number' | 'select' | 'textarea' | 'checkbox' | 'radio';
+
+    /**
+     * 选择器选项（当type为select或radio时使用）
+     */
+    options?: string[];
+
+    /**
+     * 是否为必填参数
+     * @default false
+     */
+    required?: boolean;
+
+    /**
+     * 参数默认值
+     */
+    defaultValue?: string | number | boolean;
+
+    /**
+     * 参数验证规则
+     */
+    validation?: {
+        min?: number;
+        max?: number;
+        pattern?: string;
+        message?: string;
+    };
+}
+
+export interface IQuickTest {
+    /**
+     * 快速测试标签
+     */
+    label: string;
+
+    /**
+     * 快速测试参数值
+     */
+    values: Record<string, string | number | boolean>;
+
+    /**
+     * 快速测试描述
+     */
+    description?: string;
+}
+
+export interface IApiTesterProps {
+    /**
+     * API端点配置列表
+     */
+    endpoints: IApiEndpoint[];
+
+    /**
+     * 组件标题
+     * @default "API 测试"
+     */
+    title?: string;
+
+    /**
+     * 组件描述
+     */
+    description?: string;
+
+    /**
+     * 是否显示请求头配置
+     * @default false
+     */
+    showHeaders?: boolean;
+
+    /**
+     * 默认请求头
+     */
+    defaultHeaders?: Record<string, string>;
+
+    /**
+     * 是否显示响应时间
+     * @default true
+     */
+    showResponseTime?: boolean;
+
+    /**
+     * 是否显示请求详情
+     * @default false
+     */
+    showRequestDetails?: boolean;
+
+    /**
+     * 自定义CSS类名
+     */
+    class?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.9.39",
+  "version": "0.9.40",
   "description": "An astro component library",
   "author": {
     "name": "nookery",