@coffic/cosy-ui 0.9.68 → 0.9.71

package/dist/src/components/button/buttonPropsBase.ts

@@ -11,7 +11,7 @@ export interface IButtonPropsBase {
 	/**
 	 * 自定义 CSS 类名，用于覆盖默认样式
 	 */
-	class?: string;
+	class?: string | { [key: string]: any };
 
 	/**
 	 * 是否禁用按钮，设置为 true 时按钮不可点击

package/dist/src/components/button/class-all.ts

@@ -6,6 +6,23 @@ import { getButtonShapeClass } from "./class-shape";
 import { getButtonModifierClasses } from "./class-modifiers";
 import { getButtonGradientClass } from "./class-gradient";
 
+/**
+ * 将可能的对象形式的 class 转换为字符串
+ * @param className 类名，可以是字符串或对象
+ * @returns 字符串形式的类名
+ */
+function normalizeClass(className: string | object | undefined): string {
+	if (!className) return "";
+	if (typeof className === "string") return className;
+	if (typeof className === "object") {
+		return Object.entries(className)
+			.filter(([, value]) => value)
+			.map(([key]) => key)
+			.join(" ");
+	}
+	return "";
+}
+
 /**
  * 计算 Button 组件的组合类名（用于基础接口）
  * @param props Button 组件的基础 props
@@ -22,6 +39,9 @@ export function getBaseButtonClasses(props: IButtonPropsBase): string[] {
 		class: className = "",
 	} = props;
 
+	// 规范化 class 属性
+	const normalizedClass = normalizeClass(className);
+
 	// 构建基础类名
 	const baseClasses = getButtonBaseClasses();
 
@@ -48,7 +68,7 @@ export function getBaseButtonClasses(props: IButtonPropsBase): string[] {
 		shapeClass,
 		...modifierClasses,
 		gradientClass,
-		className,
+		normalizedClass,
 	];
 
 	return classes;

package/dist/src/components/container/validate-sizing.ts

@@ -8,16 +8,15 @@ export function validateSizing(props: Record<string, unknown>): string[] {
 
 	// 检查属性是否被显式设置（不为 undefined 且不为默认值）
 	const isAspectRatioSet =
-		Object.prototype.hasOwnProperty.call(props, "aspectRatio") &&
-		props.aspectRatio !== undefined;
+		Object.hasOwn(props, "aspectRatio") && props.aspectRatio !== undefined;
 
 	const isHeightSet =
-		Object.prototype.hasOwnProperty.call(props, "height") &&
+		Object.hasOwn(props, "height") &&
 		props.height !== undefined &&
 		props.height !== "none";
 
 	const isWidthSet =
-		Object.prototype.hasOwnProperty.call(props, "width") &&
+		Object.hasOwn(props, "width") &&
 		props.width !== undefined &&
 		props.width !== "none";
 

package/dist/src/components/link/class-all.ts

@@ -34,13 +34,11 @@ export function getBaseLinkClasses(props: ILinkPropsBase): string[] {
 		active = false,
 		navigationType,
 		icon,
-		hoverImage,
-		hoverImageAlt,
 		...rest
 	} = props;
 
 	// 构建基础类名
-	const baseClasses = getLinkBaseClasses(block, icon, hoverImage);
+	const baseClasses = getLinkBaseClasses(block, icon, rest["hoverImage"]);
 
 	// 构建变体类名
 	const variantClasses = getLinkVariantClasses(

package/dist/src/components/link/linkPropsBase.ts

@@ -104,4 +104,6 @@ export interface ILinkPropsBase {
 	active?: boolean;
 	navigationType?: "previous" | "next";
 	icon?: LinkIconName;
+	hoverImage?: string;
+	hoverImageAlt?: string;
 }

package/dist/src/utils/language.ts

@@ -34,13 +34,13 @@ export class LanguageUtil {
 			return astroLang;
 		}
 		// 尝试从URL中获取语言
-		const urlLang = this.getLanguageFromURL(astro.url.pathname);
+		const urlLang = LanguageUtil.getLanguageFromURL(astro.url.pathname);
 		if (urlLang) {
 			return urlLang;
 		}
 
 		// 尝试从浏览器设置中获取语言
-		const browserLang = this.getLanguageFromBrowser();
+		const browserLang = LanguageUtil.getLanguageFromBrowser();
 		if (browserLang) {
 			return browserLang;
 		}

package/dist/src/utils/link.ts

@@ -32,7 +32,7 @@ export class LinkUtil {
 	}
 
 	static getHomeLink(lang: string): string {
-		return `${this.getBaseUrl()}/${lang}`;
+		return `${LinkUtil.getBaseUrl()}/${lang}`;
 	}
 
 	static getLessonsLink(lang: string): string {
@@ -62,10 +62,10 @@ export class LinkUtil {
 
 	static getLessonLink(lang: string, lessonId: string): string {
 		if (lessonId.endsWith(lang)) {
-			return `${this.getBaseUrl()}${lang}/lessons/${lessonId.replace(`${lang}`, "")}`;
+			return `${LinkUtil.getBaseUrl()}${lang}/lessons/${lessonId.replace(`${lang}`, "")}`;
 		} else {
 			const idWithoutLang = lessonId.replace(`${lang}/`, "");
-			return `${this.getBaseUrl()}${lang}/lessons/${idWithoutLang}`;
+			return `${LinkUtil.getBaseUrl()}${lang}/lessons/${idWithoutLang}`;
 		}
 	}
 
@@ -97,43 +97,43 @@ export class LinkUtil {
 	}
 
 	static getMetaLink(lang: string, slug: string): string {
-		return `/${this.normalizeLanguage(lang)}/meta/${slug}`;
+		return `/${LinkUtil.normalizeLanguage(lang)}/meta/${slug}`;
 	}
 
 	static getSigninLink(lang: string): string {
-		return `/${this.normalizeLanguage(lang)}/signin`;
+		return `/${LinkUtil.normalizeLanguage(lang)}/signin`;
 	}
 
 	static getAuthCallbackCookieLink(lang: string): string {
-		return `/${this.normalizeLanguage(lang)}/auth/callback_cookie`;
+		return `/${LinkUtil.normalizeLanguage(lang)}/auth/callback_cookie`;
 	}
 
 	static getAuthCallbackTokenLink(lang: string): string {
-		return `/${this.normalizeLanguage(lang)}/auth/callback_token`;
+		return `/${LinkUtil.normalizeLanguage(lang)}/auth/callback_token`;
 	}
 
 	static getAuthAccountLink(lang: string): string {
-		return `/${this.normalizeLanguage(lang)}/auth/account`;
+		return `/${LinkUtil.normalizeLanguage(lang)}/auth/account`;
 	}
 
 	static getDashboardUrl(lang: string): string {
-		return `/${this.normalizeLanguage(lang)}/auth/dashboard`;
+		return `/${LinkUtil.normalizeLanguage(lang)}/auth/dashboard`;
 	}
 
 	static getAuthErrorLink(lang: string): string {
-		return `/${this.normalizeLanguage(lang)}/auth/error`;
+		return `/${LinkUtil.normalizeLanguage(lang)}/auth/error`;
 	}
 
 	static getPrivacyLink(lang: string): string {
-		return this.getMetaLink(lang, "privacy");
+		return LinkUtil.getMetaLink(lang, "privacy");
 	}
 
 	static getTermsLink(lang: string): string {
-		return this.getMetaLink(lang, "terms");
+		return LinkUtil.getMetaLink(lang, "terms");
 	}
 
 	static getAboutLink(lang: string): string {
-		return this.getMetaLink(lang, "about");
+		return LinkUtil.getMetaLink(lang, "about");
 	}
 
 	/**

package/dist/src-astro/alert/Alert.astro

@@ -73,7 +73,6 @@ import {
 	ErrorIcon,
 	CloseIcon,
 } from "../../index-astro";
-import { marginClasses, type MarginSize } from "../../src/common/margin";
 
 // 根据类型设置图标组件
 const getIconComponent = (type: string) => {
@@ -95,8 +94,6 @@ const {
 	class: className = "",
 	closable = true,
 	showIcon = true,
-	variant = "solid",
-	marginY,
 } = props;
 
 // 获取图标组件

package/dist/src-astro/contact/Contact.astro

@@ -108,7 +108,7 @@
 import "../../style.ts";
 import Card from "../card/Card.astro";
 import Link from "../link/Link.astro";
-import { type BackgroundColor } from "../../src/common/backgrounds";
+import type { BackgroundColor } from "../../src/common/backgrounds";
 import {
 	FacebookIcon,
 	GithubIcon,

package/dist/src-astro/grid/Grid.astro

@@ -150,7 +150,7 @@ const getColsClasses = (cols: ResponsiveValue<number>) => {
 		}
 	}
 	// 响应式对象
-	let result: string[] = [];
+	const result: string[] = [];
 	const responsive = cols as any;
 	if (responsive.base) {
 		switch (responsive.base) {

package/dist/src-astro/header/Header.astro

@@ -104,7 +104,7 @@ const linkHeightClass =
 	linkHeightClasses[height as keyof typeof linkHeightClasses];
 
 // 检查 i18n 是否启用，通过 Astro.currentLocale 来判断
-let isI18nEnabled = Astro.currentLocale !== undefined;
+const isI18nEnabled = Astro.currentLocale !== undefined;
 
 const currentPath = Astro.url.pathname;
 const activeLink = LinkUtil.getActiveLink(

package/dist/src-astro/header/HeaderCenter.astro

@@ -24,7 +24,7 @@
  * - linkHeightClass - 链接高度类名
  * - gap - 导航项之间的间距，可选值：0, 1, 2, 3, 4, 6, 8, 10, 12，默认 2
  */
-import { type INavItem } from "../../index-astro";
+import type { INavItem } from "../../index-astro";
 import NavItems from "./NavItems.astro";
 
 export interface Props {

package/dist/src-astro/header/MobileNav.astro

@@ -20,7 +20,7 @@
  * - activeLink - 当前激活的链接
  * - linkHeightClass - 链接高度类名
  */
-import { type INavItem } from "../../index-astro";
+import type { INavItem } from "../../index-astro";
 import NavItems from "./NavItems.astro";
 
 export interface Props {

package/dist/src-astro/layout-basic/BaseLayout.astro

@@ -60,7 +60,7 @@
  */
 
 import "../../style.ts";
-import { type IMetaProps } from "../../src/common/meta";
+import type { IMetaProps } from "../../src/common/meta";
 import {
 	getBackgroundClass,
 	type BackgroundColor,
@@ -101,7 +101,7 @@ const {
 
 // 处理类名
 const backgroundClass = getBackgroundClass(background as BackgroundColor);
-let bodyClasses = [backgroundClass].filter(Boolean).join(" ");
+const bodyClasses = [backgroundClass].filter(Boolean).join(" ");
 ---
 
 <BaseLayoutHtml

package/dist/src-astro/layout-dashboard/DashboardLayout.astro

@@ -129,7 +129,7 @@ import DashboardSidebar from "./DashboardSidebar.astro";
 import DashboardTopNavbar from "./DashboardTopNavbar.astro";
 import { ToastContainer, ConfirmDialog } from "../../index-astro";
 import "../../style.ts";
-import { type NavItem, type SidebarSize, type UserMenuItem } from "./types";
+import type { NavItem, SidebarSize, UserMenuItem } from "./types";
 
 export interface Props {
 	/**

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

@@ -1,9 +1,7 @@
 import type { HTMLAttributes } from "astro/types";
 
-// 定义链接尺寸类型
 export type LinkSize = "sm" | "md" | "lg";
 
-// 定义链接变体类型
 export type LinkVariant =
 	| "default"
 	| "primary"
@@ -15,14 +13,12 @@ export type LinkVariant =
 	| "navigation"
 	| "github";
 
-// 定义链接动画类型
 export type LinkAnimation =
 	| "none"
 	| "hover-lift"
 	| "hover-glow"
 	| "hover-scale";
 
-// 定义图标类型（排除需要特殊属性的组件）
 export type LinkIconName =
 	| "AlertTriangle"
 	| "AppStoreIcon"
@@ -103,4 +99,6 @@ export interface LinkProps extends HTMLAttributes<"a"> {
 	active?: boolean;
 	navigationType?: "previous" | "next";
 	icon?: LinkIconName;
+	hoverImage?: string;
+	hoverImageAlt?: string;
 }

package/dist/src-vue/apple-phone/ApplePhone.vue

@@ -1,152 +1,170 @@
 <script setup lang="ts">
-import "../../style";
-import { AlertDialog, Container } from "../../index-vue";
-import { ref } from "vue";
-import type { BackgroundColor } from "../container/backgrounds";
-import iphoneFrame from "./assets/iPhone 14 Pro - Deep Purple - Portrait.png";
-import StatusBarContent from "./StatusBarContent.vue";
+  import '../../style';
+  import { AlertDialog, Container } from '../../index-vue';
+  import { ref } from 'vue';
+  import type { BackgroundColor } from '../../src/common/backgrounds';
+  import iphoneFrame from './assets/iPhone 14 Pro - Deep Purple - Portrait.png';
+  import StatusBarContent from './StatusBarContent.vue';
 
-/**
- * @component ApplePhone
- * @description ApplePhone 组件模拟 iPhone 设备的外观，包含状态栏、时间显示和设备边框。
- * 适用于创建移动应用界面原型或展示移动端设计效果。
- * @props
- * @prop {'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'|'4xl'|'5xl'} [height='lg'] - 窗口高度选项
- * - sm: 256px (h-64)
- * - md: 320px (h-80)
- * - lg: 384px (h-96) - 默认值
- * - xl: 480px
- * - 2xl: 560px
- * - 3xl: 640px
- * - 4xl: 720px
- * - 5xl: 800px
- * @prop {String} [title=''] - 窗口标题
- * @prop {Boolean} [withShadow=true] - 是否显示阴影效果
- * @prop {Boolean} [showFrame=true] - 是否显示 iPhone 边框
- * @prop {BackgroundColor} [backgroundColor=''] - 内容区域背景色，等同于为其内部的 Container 设置背景色
- * @slots
- * @slot default - 主要内容区域
- * @emits
- */
+  /**
+   * @component ApplePhone
+   * @description ApplePhone 组件模拟 iPhone 设备的外观，包含状态栏、时间显示和设备边框。
+   * 适用于创建移动应用界面原型或展示移动端设计效果。
+   * @props
+   * @prop {'sm'|'md'|'lg'|'xl'|'2xl'|'3xl'|'4xl'|'5xl'} [height='lg'] - 窗口高度选项
+   * - sm: 256px (h-64)
+   * - md: 320px (h-80)
+   * - lg: 384px (h-96) - 默认值
+   * - xl: 480px
+   * - 2xl: 560px
+   * - 3xl: 640px
+   * - 4xl: 720px
+   * - 5xl: 800px
+   * @prop {String} [title=''] - 窗口标题
+   * @prop {Boolean} [withShadow=true] - 是否显示阴影效果
+   * @prop {Boolean} [showFrame=true] - 是否显示 iPhone 边框
+   * @prop {BackgroundColor} [backgroundColor=''] - 内容区域背景色，等同于为其内部的 Container 设置背景色
+   * @slots
+   * @slot default - 主要内容区域
+   * @emits
+   */
 
-// 类型定义
-type HeightOption = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
+  // 类型定义
+  type HeightOption = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
 
-interface Props {
-	height?: HeightOption;
-	title?: string;
-	withShadow?: boolean;
-	showFrame?: boolean;
-	backgroundColor?: BackgroundColor;
-}
+  interface Props {
+    height?: HeightOption;
+    title?: string;
+    withShadow?: boolean;
+    showFrame?: boolean;
+    backgroundColor?: BackgroundColor;
+  }
 
-// Props 定义
-const props = withDefaults(defineProps<Props>(), {
-	height: "lg",
-	title: "",
-	withShadow: true,
-	showFrame: true,
-	backgroundColor: undefined,
-});
+  // Props 定义
+  const props = withDefaults(defineProps<Props>(), {
+    height: 'lg',
+    title: '',
+    withShadow: true,
+    showFrame: true,
+    backgroundColor: undefined,
+  });
 
-// iPhone边框图片-宽度
-const iphoneFrameWidth = 1339;
-// iPhone边框图片-高度
-const iphoneFrameHeight = 2716;
-// iPhone边框图片-状态栏离上边框的距离
-const iphoneFrameStatusBarTop = 115;
-// iPhone边框图片-状态栏高度
-const iphoneFrameStatusBarHeight = 110;
+  // iPhone边框图片-宽度
+  const iphoneFrameWidth = 1339;
+  // iPhone边框图片-高度
+  const iphoneFrameHeight = 2716;
+  // iPhone边框图片-状态栏离上边框的距离
+  const iphoneFrameStatusBarTop = 115;
+  // iPhone边框图片-状态栏高度
+  const iphoneFrameStatusBarHeight = 110;
 
-// 比例-总宽度
-const mainContentWidthAspectRatio = 1179 / iphoneFrameWidth;
-// 比例-总高度
-const mainContentHeightAspectRatio = 2556 / iphoneFrameHeight;
-// 比例-状态栏高度
-const iphoneFrameStatusBarHeightAspectRatio =
-	iphoneFrameStatusBarHeight / iphoneFrameHeight;
-// 比例-状态栏离上边框的距离
-const iphoneFrameStatusBarTopAspectRatio =
-	iphoneFrameStatusBarTop / iphoneFrameHeight;
+  // 比例-总宽度
+  const mainContentWidthAspectRatio = 1179 / iphoneFrameWidth;
+  // 比例-总高度
+  const mainContentHeightAspectRatio = 2556 / iphoneFrameHeight;
+  // 比例-状态栏高度
+  const iphoneFrameStatusBarHeightAspectRatio =
+    iphoneFrameStatusBarHeight / iphoneFrameHeight;
+  // 比例-状态栏离上边框的距离
+  const iphoneFrameStatusBarTopAspectRatio =
+    iphoneFrameStatusBarTop / iphoneFrameHeight;
 
-// 预定义的高度选项
-const heightClasses: Record<HeightOption, string> = {
-	sm: "cosy:h-64", // 256px
-	md: "cosy:h-80", // 320px
-	lg: "cosy:h-96", // 384px
-	xl: "cosy:h-[480px]", // 480px
-	"2xl": "cosy:h-[560px]", // 560px
-	"3xl": "cosy:h-[640px]", // 640px
-	"4xl": "cosy:h-[720px]", // 720px
-	"5xl": "cosy:h-[800px]", // 800px
-};
+  // 预定义的高度选项
+  const heightClasses: Record<HeightOption, string> = {
+    sm: 'cosy:h-64', // 256px
+    md: 'cosy:h-80', // 320px
+    lg: 'cosy:h-96', // 384px
+    xl: 'cosy:h-[480px]', // 480px
+    '2xl': 'cosy:h-[560px]', // 560px
+    '3xl': 'cosy:h-[640px]', // 640px
+    '4xl': 'cosy:h-[720px]', // 720px
+    '5xl': 'cosy:h-[800px]', // 800px
+  };
 
-// 响应式数据
-const showAlertDialog = ref(false);
-const alertMessage = ref("");
+  // 响应式数据
+  const showAlertDialog = ref(false);
+  const alertMessage = ref('');
 
-// 计算当前高度的缩放比例
-const getScaleRatio = () => {
-	const heightValues = {
-		sm: 256,
-		md: 320,
-		lg: 384,
-		xl: 480,
-		"2xl": 560,
-		"3xl": 640,
-		"4xl": 720,
-		"5xl": 800,
-	};
-	const currentHeight = heightValues[props.height];
-	// 基于特定高度计算缩放比例
-	return currentHeight / 500;
-};
+  // 计算当前高度的缩放比例
+  const getScaleRatio = () => {
+    const heightValues = {
+      sm: 256,
+      md: 320,
+      lg: 384,
+      xl: 480,
+      '2xl': 560,
+      '3xl': 640,
+      '4xl': 720,
+      '5xl': 800,
+    };
+    const currentHeight = heightValues[props.height];
+    // 基于特定高度计算缩放比例
+    return currentHeight / 500;
+  };
 
-// 计算属性
-const iphoneFrameSrc = (iphoneFrame as any).src || iphoneFrame;
+  // 计算属性
+  const iphoneFrameSrc = (iphoneFrame as any).src || iphoneFrame;
 </script>
 
 <template>
-    <div :class="['cosy:relative not-prose cosy:mx-auto', heightClasses[height]]" :style="{
-        aspectRatio: `${iphoneFrameWidth}/${iphoneFrameHeight}`,
-    }" apple-phone>
-        <!-- iPhone 边框 -->
-        <img v-if="showFrame"
-            style="max-width: 100%; max-height: 100%; position: absolute; top: 0; left: 0; z-index: 100;"
-            :src="iphoneFrameSrc" alt="iPhone frame" />
+  <div
+    :class="['cosy:relative not-prose cosy:mx-auto', heightClasses[height]]"
+    :style="{
+      aspectRatio: `${iphoneFrameWidth}/${iphoneFrameHeight}`,
+    }"
+    apple-phone>
+    <!-- iPhone 边框 -->
+    <img
+      v-if="showFrame"
+      style="
+        max-width: 100%;
+        max-height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 100;
+      "
+      :src="iphoneFrameSrc"
+      alt="iPhone frame" />
 
-        <!-- 顶部状态栏 -->
-        <div :style="{
-            position: 'absolute',
-            top: iphoneFrameStatusBarTopAspectRatio * 100 + '%',
-            height: iphoneFrameStatusBarHeightAspectRatio * 100 + '%',
-            width: mainContentWidthAspectRatio * 100 + '%',
-            left: '50%',
-            transform: 'translate(-50%, 0)',
-            paddingLeft: '5%',
-            paddingRight: '5%',
-            zIndex: 50,
-        }">
-            <StatusBarContent :scaleRatio="getScaleRatio()" />
-        </div>
+    <!-- 顶部状态栏 -->
+    <div
+      :style="{
+        position: 'absolute',
+        top: iphoneFrameStatusBarTopAspectRatio * 100 + '%',
+        height: iphoneFrameStatusBarHeightAspectRatio * 100 + '%',
+        width: mainContentWidthAspectRatio * 100 + '%',
+        left: '50%',
+        transform: 'translate(-50%, 0)',
+        paddingLeft: '5%',
+        paddingRight: '5%',
+        zIndex: 50,
+      }">
+      <StatusBarContent :scaleRatio="getScaleRatio()" />
+    </div>
 
-        <!-- 内容区域 -->
-        <div class="cosy:inset-0 cosy:h-full" :style="{
-            width: mainContentWidthAspectRatio * 100 + '%',
-            height: mainContentHeightAspectRatio * 100 + '%',
-            // 水平居中
-            left: '50%',
-            // 垂直居中
-            top: '50%',
-            transform: 'translate(-50%, -50%)',
-            position: 'absolute',
-            zIndex: 20,
-        }">
-            <Container rounded="lg" style="height: 100%;" :background="backgroundColor || 'accent/90'">
-                <slot />
-            </Container>
-        </div>
+    <!-- 内容区域 -->
+    <div
+      class="cosy:inset-0 cosy:h-full"
+      :style="{
+        width: mainContentWidthAspectRatio * 100 + '%',
+        height: mainContentHeightAspectRatio * 100 + '%',
+        // 水平居中
+        left: '50%',
+        // 垂直居中
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        position: 'absolute',
+        zIndex: 20,
+      }">
+      <Container
+        rounded="lg"
+        style="height: 100%"
+        :background="backgroundColor || 'accent/90'">
+        <slot />
+      </Container>
     </div>
+  </div>
 
-    <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
+  <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
 </template>

package/dist/src-vue/button/Button.vue

@@ -18,6 +18,7 @@ import { getButtonCombinedClassesVue } from "./class";
  * @props {string} [href] - 链接地址，设置后按钮变为链接形式
  * @props {string} [target] - 链接目标，支持 _self、_blank、_parent、_top
  * @props {Function} [onClick] - 点击事件处理函数
+ * @props {string|object} [class] - 自定义 CSS 类名，支持字符串或对象形式
  */
 
 const props = withDefaults(defineProps<IButtonProps>(), {