@coffic/cosy-ui 0.8.20 → 0.8.22

package/dist/src-astro/products/ProductCard.astro

@@ -64,9 +64,32 @@
  *   />
  * </div>
  * ```
+ *
+ * 自定义阴影样式：
+ * ```astro
+ * <ProductCard
+ *   shadow="lg"
+ *   name="突出显示的产品"
+ *   image="/images/products/product1.jpg"
+ *   description="使用大阴影突出显示的产品"
+ * />
+ *
+ * <ProductCard
+ *   shadow="none"
+ *   name="简洁风格产品"
+ *   image="/images/products/product2.jpg"
+ *   description="无阴影的简洁风格"
+ * />
+ * ```
  */
 
-import { SocialIcon, Image, Link } from '../../index-astro';
+import {
+  SocialIcon,
+  Image,
+  Button,
+  LinkIcon,
+  AppStoreIcon,
+} from '../../index-astro';
 import '../../style.ts';
 import type { ImageSource } from '../types/image.ts';
 
@@ -138,6 +161,15 @@ export interface Props {
    * 自定义类名
    */
   class?: string;
+  /**
+   * 卡片阴影样式
+   * - none: 无阴影
+   * - sm: 小阴影
+   * - md: 中等阴影（默认）
+   * - lg: 大阴影
+   * - xl: 超大阴影
+   */
+  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
 }
 
 const {
@@ -155,6 +187,7 @@ const {
   equalHeight = false,
   descriptionLines,
   class: className = '',
+  shadow = 'md',
 } = Astro.props;
 
 // 尺寸样式映射
@@ -238,6 +271,15 @@ const sizeStyles = {
 
 const currentSize = sizeStyles[size];
 
+// 阴影样式映射
+const shadowStyles = {
+  none: 'cosy:shadow-none',
+  sm: 'cosy:shadow-sm cosy:hover:shadow-md',
+  md: 'cosy:shadow-md cosy:hover:shadow-lg',
+  lg: 'cosy:shadow-lg cosy:hover:shadow-xl',
+  xl: 'cosy:shadow-xl cosy:hover:shadow-2xl',
+};
+
 // 描述文本的行数限制
 const descriptionClass = descriptionLines
   ? `cosy:line-clamp-${descriptionLines}`
@@ -279,7 +321,8 @@ const buttonsContainerClass =
 
 <div
   class:list={[
-    'cosy:card cosy:bg-base-100 cosy:shadow-md cosy:hover:shadow-lg cosy:transition-shadow cosy:duration-300',
+    'cosy:card cosy:bg-base-100 cosy:transition-shadow cosy:duration-300',
+    shadowStyles[shadow],
     currentSize.card,
     equalHeight && currentSize.cardHeight,
     'cosy:flex cosy:flex-col',
@@ -319,54 +362,47 @@ const buttonsContainerClass =
     <div class={buttonsContainerClass}>
       {
         productUrl && (
-          <Link
+          <Button
             href={productUrl}
-            external
+            target="_blank"
             variant="primary"
-            class:list={[
-              'cosy:btn cosy:bg-[#4468e3] cosy:hover:bg-[#3857cc] cosy:border-0',
-              'cosy:text-white cosy:font-bold cosy:shadow-sm',
-              buttonLayoutClass,
-              currentSize.buttons,
-            ]}
+            class:list={[buttonLayoutClass, currentSize.buttons]}
             aria-label={`Visit ${name}'s website`}>
+            <span slot="icon-left">
+              <LinkIcon size="22px" />
+            </span>
             {primaryButtonText}
-          </Link>
+          </Button>
         )
       }
       {
         appStoreUrl && (
-          <Link
+          <Button
             href={appStoreUrl}
-            external
+            target="_blank"
             variant="secondary"
-            class:list={[
-              'cosy:btn cosy:bg-[#161616] cosy:hover:bg-black cosy:border-0',
-              'cosy:text-white cosy:font-bold cosy:shadow-sm',
-              buttonLayoutClass,
-              currentSize.buttons,
-            ]}
+            class:list={[buttonLayoutClass, currentSize.buttons]}
             aria-label={`Download ${name} on App Store`}>
+            <span slot="icon-left">
+              <AppStoreIcon size="22px" />
+            </span>
             {secondaryButtonText}
-          </Link>
+          </Button>
         )
       }
       {
         githubUrl && (
-          <Link
+          <Button
             href={githubUrl}
-            external
-            variant="ghost"
-            class:list={[
-              'cosy:btn cosy:bg-[#f0f0f0] cosy:hover:bg-[#e0e0e0] cosy:border-0',
-              'cosy:text-[#24292f] cosy:font-bold cosy:shadow-sm',
-              buttonLayoutClass,
-              currentSize.buttons,
-            ]}
+            target="_blank"
+            variant="info"
+            class:list={[buttonLayoutClass, currentSize.buttons]}
             aria-label={`View ${name}'s GitHub repository`}>
-            <SocialIcon platform="github" size="18px" />
-            <span class="cosy:inline-block">{githubButtonText}</span>
-          </Link>
+            <span slot="icon-left">
+              <SocialIcon platform="github" size="22px" />
+            </span>
+            {githubButtonText}
+          </Button>
         )
       }
     </div>

package/dist/src-astro/types/footer.ts

@@ -1,129 +1,134 @@
 import type { ILogo, IProduct } from './product';
 
 export interface IFooterProps {
-  /**
-   * 关于链接
-   */
-  aboutLink?: string;
-
-  /**
-   * 博客链接
-   */
-  blogLink?: string;
-
-  /**
-   * 职业链接
-   */
-  careersLink?: string;
-
-  /**
-   * 公司名称
-   */
-  company: string;
-
-  /**
-   * 联系链接
-   */
-  contactLink?: string;
-
-  /**
-   * 版权信息
-   */
-  copyright: string;
-
-  /**
-   * 调试模式
-   */
-  debug?: boolean;
-
-  /**
-   * 是否启用日志输出
-   * @default false
-   */
-  enableLogging?: boolean;
-
-  /**
-   * 常见问题链接
-   */
-  faqLink?: string;
-
-  /**
-   * 历史链接
-   */
-  historyLink?: string;
-
-  /**
-   * 首页链接
-   */
-  homeLink: string;
-
-  /**
-   * ICP备案号
-   */
-  icp?: string;
-
-  /**
-   * 激励标语
-   */
-  inspirationalSlogan: string;
-
-  /**
-   * 徽标
-   */
-  logo?: ILogo;
-
-  /**
-   * 媒体链接
-   */
-  mediaLink?: string;
-
-  /**
-   * 新闻链接
-   */
-  newsLink?: string;
-
-  /**
-   * 合作伙伴链接
-   */
-  partnersLink?: string;
-
-  /**
-   * 隐私链接
-   */
-  privacyLink?: string;
-
-  /**
-   * 产品
-   */
-  products?: IProduct[];
-
-  /**
-   * 站点名称
-   */
-  siteName: string;
-
-  /**
-   * 标语
-   */
-  slogan: string;
-
-  /**
-   * 社交链接
-   */
-  socialLinks?: string[];
-
-  /**
-   * 团队链接
-   */
-  teamLink?: string;
-
-  /**
-   * 技术栈链接
-   */
-  techStackLink?: string;
-
-  /**
-   * 条款链接
-   */
-  termsLink?: string;
+    /**
+     * 关于链接
+     */
+    aboutLink?: string;
+
+    /**
+     * 博客链接
+     */
+    blogLink?: string;
+
+    /**
+     * 职业链接
+     */
+    careersLink?: string;
+
+    /**
+     * 公司名称
+     */
+    company: string;
+
+    /**
+     * 联系链接
+     */
+    contactLink?: string;
+
+    /**
+     * 版权信息
+     */
+    copyright: string;
+
+    /**
+     * 调试模式
+     */
+    debug?: boolean;
+
+    /**
+     * 是否启用日志输出
+     * @default false
+     */
+    enableLogging?: boolean;
+
+    /**
+     * 常见问题链接
+     */
+    faqLink?: string;
+
+    /**
+     * 友情链接
+     */
+    friendlyLinks?: IProduct[];
+
+    /**
+     * 历史链接
+     */
+    historyLink?: string;
+
+    /**
+     * 首页链接
+     */
+    homeLink: string;
+
+    /**
+     * ICP备案号
+     */
+    icp?: string;
+
+    /**
+     * 激励标语
+     */
+    inspirationalSlogan: string;
+
+    /**
+     * 徽标
+     */
+    logo?: ILogo;
+
+    /**
+     * 媒体链接
+     */
+    mediaLink?: string;
+
+    /**
+     * 新闻链接
+     */
+    newsLink?: string;
+
+    /**
+     * 合作伙伴链接
+     */
+    partnersLink?: string;
+
+    /**
+     * 隐私链接
+     */
+    privacyLink?: string;
+
+    /**
+     * 产品
+     */
+    products?: IProduct[];
+
+    /**
+     * 站点名称
+     */
+    siteName: string;
+
+    /**
+     * 标语
+     */
+    slogan: string;
+
+    /**
+     * 社交链接
+     */
+    socialLinks?: string[];
+
+    /**
+     * 团队链接
+     */
+    teamLink?: string;
+
+    /**
+     * 技术栈链接
+     */
+    techStackLink?: string;
+
+    /**
+     * 条款链接
+     */
+    termsLink?: string;
 }

package/dist/src-vue/iPhone/iPhoneWindow.vue

@@ -144,10 +144,6 @@ export default defineComponent({
         const showAlertDialog = ref(false);
         const alertMessage = ref('');
 
-        // 获取图片URL
-        const frameSrc =
-            typeof iphoneFrame === 'string' ? iphoneFrame : iphoneFrame.src;
-
         // 计算当前高度的缩放比例
         const getScaleRatio = () => {
             const heightValues = {
@@ -168,7 +164,7 @@ export default defineComponent({
         return {
             showAlertDialog,
             alertMessage,
-            frameSrc,
+            iphoneFrame: (iphoneFrame as any).src || iphoneFrame,
             heightClasses,
             mainContentWidthAspectRatio,
             mainContentHeightAspectRatio,
@@ -191,7 +187,7 @@ export default defineComponent({
         backgroundColor: debug ? 'rgba(255, 255, 0, 0.3)' : 'transparent',
     }">
         <!-- iPhone 边框 -->
-        <img v-if="showFrame" style="max-width: 100%; max-height: 100%;" :src="frameSrc" alt="iPhone frame" />
+        <img v-if="showFrame" style="max-width: 100%; max-height: 100%;" :src="iphoneFrame" alt="iPhone frame" />
 
         <!-- 顶部状态栏 -->
         <div :style="{

package/dist/src-vue/utils/i18n.ts

@@ -9,56 +9,58 @@ type TextContent = Record<string, Record<string, string>>;
 
 // 多语言文本内容
 export const texts: Record<string, TextContent> = {
-  en: {
-    tableOfContents: {
-      title: 'Table of Contents',
-      loading: 'Loading...',
+    en: {
+        tableOfContents: {
+            title: 'Table of Contents',
+            loading: 'Loading...',
+        },
+        footer: {
+            products: 'Products',
+            about: 'About',
+            aboutUs: 'About Us',
+            team: 'Our Team',
+            careers: 'Careers',
+            contactUs: 'Contact Us',
+            resources: 'Resources',
+            news: 'News',
+            blog: 'Blog',
+            faq: 'FAQ',
+            history: 'History',
+            techStack: 'Tech Stack',
+            legal: 'Legal',
+            terms: 'Terms of Service',
+            privacy: 'Privacy Policy',
+            slogan: 'Build a beautiful digital experience',
+            allRightsReserved: 'All Rights Reserved',
+            friendlyLinks: 'Friendly Links',
+        },
     },
-    footer: {
-      products: 'Products',
-      about: 'About',
-      aboutUs: 'About Us',
-      team: 'Our Team',
-      careers: 'Careers',
-      contactUs: 'Contact Us',
-      resources: 'Resources',
-      news: 'News',
-      blog: 'Blog',
-      faq: 'FAQ',
-      history: 'History',
-      techStack: 'Tech Stack',
-      legal: 'Legal',
-      terms: 'Terms of Service',
-      privacy: 'Privacy Policy',
-      slogan: 'Build a beautiful digital experience',
-      allRightsReserved: 'All Rights Reserved',
+    'zh-cn': {
+        tableOfContents: {
+            title: '目录',
+            loading: '加载中...',
+        },
+        footer: {
+            products: '产品',
+            about: '关于',
+            aboutUs: '关于我们',
+            team: '团队介绍',
+            careers: '加入我们',
+            contactUs: '联系我们',
+            defaultSlogan: '优雅、高效的组件库',
+            resources: '资源',
+            news: '新闻动态',
+            blog: '技术博客',
+            faq: '常见问题',
+            history: '发展历程',
+            techStack: '技术栈',
+            legal: '法律',
+            terms: '服务条款',
+            privacy: '隐私政策',
+            allRightsReserved: '保留所有权利',
+            friendlyLinks: '友情链接',
+        },
     },
-  },
-  'zh-cn': {
-    tableOfContents: {
-      title: '目录',
-      loading: '加载中...',
-    },
-    footer: {
-      products: '产品',
-      about: '关于',
-      aboutUs: '关于我们',
-      team: '团队介绍',
-      careers: '加入我们',
-      contactUs: '联系我们',
-      defaultSlogan: '优雅、高效的组件库',
-      resources: '资源',
-      news: '新闻动态',
-      blog: '技术博客',
-      faq: '常见问题',
-      history: '发展历程',
-      techStack: '技术栈',
-      legal: '法律',
-      terms: '服务条款',
-      privacy: '隐私政策',
-      allRightsReserved: '保留所有权利',
-    },
-  },
 };
 
 /**
@@ -69,7 +71,7 @@ export const texts: Record<string, TextContent> = {
  * @returns 对应的文本内容
  */
 export function getText(lang: string, component: string, key: string): string {
-  return texts[lang]?.[component]?.[key] || texts['en'][component]?.[key] || '';
+    return texts[lang]?.[component]?.[key] || texts['en'][component]?.[key] || '';
 }
 
 /**
@@ -79,5 +81,5 @@ export function getText(lang: string, component: string, key: string): string {
  * @returns 文本获取函数
  */
 export function createTextGetter(langInfo: string, component: string) {
-  return (key: string): string => getText(langInfo, component, key);
+    return (key: string): string => getText(langInfo, component, key);
 }

package/package.json

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

package/dist/src-astro/banner/BannerAllAnimations.astro

@@ -1,10 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<div class="flex flex-col gap-4">
-  <Banner animation="none">这是一个没有动画的横幅</Banner>
-  <Banner animation="fade">这是一个只有淡入动画的横幅</Banner>
-  <Banner animation="slide">这是一个只有上滑动画的横幅</Banner>
-  <Banner animation="both">这是一个同时有淡入和上滑动画的横幅</Banner>
-</div>

package/dist/src-astro/banner/BannerBasic.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner>欢迎使用我们的服务</Banner>

package/dist/src-astro/banner/BannerCustomStyle.astro

@@ -1,8 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner
-  class="bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold">
-  这是一个自定义样式的横幅
-</Banner>

package/dist/src-astro/banner/BannerDanger.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner bgColor="error">这是一个危险颜色的横幅</Banner>

package/dist/src-astro/banner/BannerFadeIn.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner animation="fade"> 这是一个只有淡入动画的横幅 </Banner>

package/dist/src-astro/banner/BannerInfo.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner bgColor="info">这是一个信息颜色的横幅</Banner>

package/dist/src-astro/banner/BannerPrimary.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner bgColor="primary">这是一个主要颜色的横幅</Banner>

package/dist/src-astro/banner/BannerSecondary.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner bgColor="secondary">这是一个次要颜色的横幅</Banner>

package/dist/src-astro/banner/BannerSlideUp.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner animation="slide"> 这是一个只有上滑动画的横幅 </Banner>

package/dist/src-astro/banner/BannerSuccess.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner bgColor="success">这是一个成功颜色的横幅</Banner>

package/dist/src-astro/banner/BannerWarning.astro

@@ -1,5 +0,0 @@
----
-import { Banner } from '../../index-astro';
----
-
-<Banner bgColor="warning">这是一个警告颜色的横幅</Banner>