@seresweb/website-component 2.0.0

package/dist/types/components/swiper-normal/type.d.ts

@@ -0,0 +1,79 @@
+import { SwiperOptions } from 'swiper/types';
+import { VideoProps } from '../video/type';
+export interface SwiperNormalData {
+    title: string;
+    desc?: string;
+    type: 'img' | 'video';
+    poster?: string;
+    playable?: boolean;
+    url: string;
+    alt?: string;
+    /**
+     * 部分视频亮度太高会导致指示器不清晰，通过图片遮罩来调整亮度
+     */
+    mask?: boolean;
+}
+export interface SwiperNormalProps {
+    modelValue?: number;
+    /**
+     * 数据列表
+     */
+    dataList: SwiperNormalData[];
+    /**
+     * swiper 选项
+     */
+    swiperOptions?: SwiperOptions;
+    /**
+     * swiper常用设置：effect
+     *
+     * 它的优先级不如 swiperOptions
+     *
+     * @default 'slide'
+     */
+    effect?: 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip' | 'creative' | 'cards';
+    /**
+     * 是否显示介绍
+     */
+    showIntro?: boolean;
+    /**
+     * 视频属性
+     */
+    videoProps?: VideoProps;
+    /**
+     * 自定义指示器类名
+     */
+    indicatorClass?: string;
+    /**
+     * 指示器距离底部的距离
+     *
+     * 不设置时为relative定位
+     * 设置后为absolute定位
+     *
+     * @default undefined
+     */
+    tabIndicatorBottom?: string | number;
+    /**
+     * 内容宽度类型，居中（1400px）或全屏
+     *
+     * @default 'full'
+     */
+    widthType?: 'middle' | 'full';
+    /**
+     * 指示器类型
+     */
+    indicatorType?: 'tab' | 'image';
+    /**
+     * 是否显示指示器
+     *
+     * @default true
+     */
+    showIndicator?: boolean;
+    /**
+     * 指示器位置
+     *
+     * 设置为'absolute'时，指示器会相对于swiper的父元素定位，距离底部80px
+     *
+     * @default 'relative'
+     */
+    indicatorPosition?: 'relative' | 'absolute';
+}

package/dist/types/components/swiper-vehicle/index.d.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue';
+import { default as Component } from './swiper-vehicle.vue';
+export * from './type';
+export declare const ScSwiperVehicle: typeof Component & {
+    install: (app: App) => App;
+};

package/dist/types/components/swiper-vehicle/swiper-vehicle.vue.d.ts

@@ -0,0 +1,15 @@
+import { SwiperVehicleProps } from './type';
+declare const _default: import('vue').DefineComponent<SwiperVehicleProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    change: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<SwiperVehicleProps> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: number;
+    swiperOptions: import('swiper/types').SwiperOptions;
+    effect: "slide" | "fade" | "cube" | "coverflow" | "flip" | "creative" | "cards";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    swiperRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/types/components/swiper-vehicle/type.d.ts

@@ -0,0 +1,54 @@
+import { SwiperOptions } from 'swiper/types';
+export interface SwiperVehicleData {
+    url: string;
+    color: string;
+    text: string;
+    alt?: string;
+}
+export interface SwiperVehicleProps {
+    modelValue?: number;
+    backgroundImgUrl?: string;
+    backgroundImgAlt?: string;
+    /**
+     * 数据列表
+     */
+    dataList: SwiperVehicleData[];
+    /**
+     * 背景图的高度在移动端是否撑满
+     * 通常用于移动端想要查看局部内容时
+     *
+     * @default false
+     */
+    imgFullHeightInMobile?: boolean;
+    /**
+     * swiper 选项
+     */
+    swiperOptions?: SwiperOptions;
+    /**
+     * swiper常用设置：effect
+     *
+     * 它的优先级不如 swiperOptions
+     *
+     * @default 'fade'
+     */
+    effect?: 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip' | 'creative' | 'cards';
+    /**
+     * 自定义指示器类名
+     */
+    indicatorClass?: string;
+    /**
+     * 指示器距离底部的距离
+     *
+     * 不设置时为relative定位
+     * 设置后为absolute定位
+     *
+     * @default undefined
+     */
+    tabIndicatorBottom?: string | number;
+    /**
+     * 是否显示文字背景
+     *
+     * @default false
+     */
+    showTextBackground?: boolean;
+}

package/dist/types/components/tab-indicator/index.d.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue';
+import { default as Component } from './tab-indicator.vue';
+export * from './type';
+export declare const ScTabIndicator: typeof Component & {
+    install: (app: App) => App;
+};

package/dist/types/components/tab-indicator/tab-indicator.vue.d.ts

@@ -0,0 +1,15 @@
+import { TabIndicatorProps } from './type';
+declare const _default: import('vue').DefineComponent<TabIndicatorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    change: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<TabIndicatorProps> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    scrollRef: HTMLDivElement;
+    indicatorItemRef: HTMLDivElement[];
+    introItemRef: HTMLParagraphElement[];
+}, HTMLDivElement>;
+export default _default;

package/dist/types/components/tab-indicator/type.d.ts

@@ -0,0 +1,28 @@
+export interface TabIndicatorData {
+    title: string;
+    desc?: string;
+}
+export interface TabIndicatorProps {
+    modelValue?: number;
+    /**
+     * 数据列表
+     */
+    dataList: TabIndicatorData[];
+    /**
+     * 是否显示介绍
+     */
+    showIntro?: boolean;
+    /**
+     * 是否是独立的，没有和其他组件一起使用
+     * 独立的颜色是金色
+     * @default false
+     */
+    isSeparate?: boolean;
+    /**
+     * 是否适配文字宽度
+     * true时下方的滚动条会只有文字的宽度
+     *
+     * @default false
+     */
+    adapt2TextWidth?: boolean;
+}

package/dist/types/components/video/index.d.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue';
+import { default as Component } from './video.vue';
+export * from './type';
+export declare const ScVideo: typeof Component & {
+    install: (app: App) => App;
+};

package/dist/types/components/video/type.d.ts

@@ -0,0 +1,38 @@
+import { CSSProperties } from 'vue';
+export interface VideoProps {
+    /**
+     * 组件类名
+     */
+    class?: string;
+    /**
+     * 组件样式
+     */
+    style?: string | CSSProperties;
+    /**
+     * 播放器按钮类名
+     */
+    playerButtonClass?: string;
+    /**
+     * 播放器按钮文字
+     */
+    playerButtonText?: string;
+    /**
+     * 播放器封面图
+     */
+    poster?: string;
+    /**
+     * 视频地址
+     */
+    url?: string;
+    /**
+     * 自动播放
+     */
+    autoPlay?: boolean;
+    /**
+     * 是否可播放
+     */
+    playable?: boolean;
+}
+export interface VideoExpose {
+    play: () => void;
+}

package/dist/types/components/video/video-wrapper.vue.d.ts

@@ -0,0 +1,33 @@
+import { VideoProps } from './type';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        close?(_: {}): any;
+    };
+    refs: {
+        videoRef: HTMLVideoElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<VideoProps, {
+    play: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<VideoProps> & Readonly<{}>, {
+    style: string | import('vue').CSSProperties;
+    class: string;
+    url: string;
+    playerButtonClass: string;
+    playerButtonText: string;
+    poster: string;
+    autoPlay: boolean;
+    playable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    videoRef: HTMLVideoElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/video/video.vue.d.ts

@@ -0,0 +1,183 @@
+import { VideoProps } from './type';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        play?(_: {}): any;
+    };
+    refs: {
+        btnRef: HTMLButtonElement;
+        vwRef: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly class?: string | undefined;
+                readonly style?: (string | import('vue').CSSProperties) | undefined;
+                readonly playerButtonClass?: string | undefined;
+                readonly playerButtonText?: string | undefined;
+                readonly poster?: string | undefined;
+                readonly url?: string | undefined;
+                readonly autoPlay?: boolean | undefined;
+                readonly playable?: boolean | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            } & {
+                videoRef: HTMLVideoElement;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: HTMLDivElement;
+            $options: import('vue').ComponentOptionsBase<Readonly<VideoProps> & Readonly<{}>, {
+                play: () => void;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                style: string | import('vue').CSSProperties;
+                class: string;
+                url: string;
+                playerButtonClass: string;
+                playerButtonText: string;
+                poster: string;
+                autoPlay: boolean;
+                playable: boolean;
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            style: string | import('vue').CSSProperties;
+            class: string;
+            url: string;
+            playerButtonClass: string;
+            playerButtonText: string;
+            poster: string;
+            autoPlay: boolean;
+            playable: boolean;
+        }> & Omit<Readonly<VideoProps> & Readonly<{}>, "play" | ("style" | "class" | "url" | "playerButtonClass" | "playerButtonText" | "poster" | "autoPlay" | "playable")> & import('vue').ShallowUnwrapRef<{
+            play: () => void;
+        }> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                close?(_: {}): any;
+            };
+        }) | null;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<VideoProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<VideoProps> & Readonly<{}>, {
+    style: string | import('vue').CSSProperties;
+    class: string;
+    url: string;
+    playerButtonClass: string;
+    playerButtonText: string;
+    poster: string;
+    autoPlay: boolean;
+    playable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    btnRef: HTMLButtonElement;
+    vwRef: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly class?: string | undefined;
+            readonly style?: (string | import('vue').CSSProperties) | undefined;
+            readonly playerButtonClass?: string | undefined;
+            readonly playerButtonText?: string | undefined;
+            readonly poster?: string | undefined;
+            readonly url?: string | undefined;
+            readonly autoPlay?: boolean | undefined;
+            readonly playable?: boolean | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            videoRef: HTMLVideoElement;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: HTMLDivElement;
+        $options: import('vue').ComponentOptionsBase<Readonly<VideoProps> & Readonly<{}>, {
+            play: () => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+            style: string | import('vue').CSSProperties;
+            class: string;
+            url: string;
+            playerButtonClass: string;
+            playerButtonText: string;
+            poster: string;
+            autoPlay: boolean;
+            playable: boolean;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        style: string | import('vue').CSSProperties;
+        class: string;
+        url: string;
+        playerButtonClass: string;
+        playerButtonText: string;
+        poster: string;
+        autoPlay: boolean;
+        playable: boolean;
+    }> & Omit<Readonly<VideoProps> & Readonly<{}>, "play" | ("style" | "class" | "url" | "playerButtonClass" | "playerButtonText" | "poster" | "autoPlay" | "playable")> & import('vue').ShallowUnwrapRef<{
+        play: () => void;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            close?(_: {}): any;
+        };
+    }) | null;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@seresweb/website-component",
+  "version": "2.0.0",
+  "author": "Seres",
+  "license": "UNLICENSED",
+  "description": "官方网站类的组件",
+  "scripts": {
+    "dev": "tsx ./scripts/dev",
+    "build": "tsx ./scripts/build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.seres.cn/lib/website-component.git"
+  },
+  "bugs": {
+    "url": "https://gitlab.seres.cn/lib/website-component/-/issues"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "types": "./dist/types/components/index.d.ts",
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/es/index.mjs",
+  "devDependencies": {
+    "@types/node": "^22.9.1",
+    "@types/postcss-pxtorem": "^6.1.0",
+    "@vavt/vite-plugin-auto-export-components": "^2.0.0",
+    "@vavt/vite-plugin-generate-global-types": "^2.0.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "glob": "^11.0.2",
+    "postcss-pxtorem": "^6.1.0",
+    "sass": "^1.87.0",
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3",
+    "unplugin-vue-components": "^28.5.0",
+    "vite": "^6.3.3",
+    "vite-plugin-dts": "^4.5.3",
+    "vue": "^3.5.13"
+  },
+  "peerDependencies": {
+    "vue": ">=3.5.3"
+  },
+  "dependencies": {
+    "@vavt/util": "^2.1.0",
+    "swiper": "^11.2.6"
+  }
+}