@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/audio-player/AudioSlider.svelte

@@ -0,0 +1,162 @@
+<!--
+  AudioSlider — AudioPlayer 自建滑块（严格镜像 Semi audioSlider.tsx，不复用通用 Slider）。
+  支持横向(进度)/纵向(音量)，hover 轨道变粗 4→8px、拖拽圆点 hover 显现、可选 Tooltip 时间预览。
+  交互：mousedown 即定位(点击 seek)，move 仅 dragging 中写值(拖拽)，enter 仅更新预览不写值。
+  纯自建 DOM + 鼠标事件，onChange 回调透传给父。类名前缀 cd-audio-player。
+-->
+<script lang="ts">
+  import Tooltip from '../tooltip/Tooltip.svelte';
+
+  interface Props {
+    value: number;
+    onChange?: (value: number) => void;
+    class?: string;
+    max?: number;
+    vertical?: boolean;
+    /** 横向宽度（px 或 CSS 值，如 "100%"）；纵向忽略。 */
+    width?: number | string;
+    /** 纵向高度（px）；横向忽略。 */
+    height?: number;
+    showTooltip?: boolean;
+    disabled?: boolean;
+    theme?: 'dark' | 'light';
+    /** 无障碍名（role=slider 的 accessible name）。 */
+    ariaLabel?: string;
+  }
+
+  let {
+    value = 0,
+    onChange = () => {},
+    class: className,
+    max = 100,
+    vertical = false,
+    width = '100%',
+    height = 4,
+    showTooltip = true,
+    disabled = false,
+    theme = 'dark',
+    ariaLabel,
+  }: Props = $props();
+
+  let sliderEl = $state<HTMLDivElement | null>(null);
+  let isDragging = $state(false);
+  let isHovering = $state(false);
+  let movingInfo = $state<{ progress: number; offset: number } | null>(null);
+
+  // 核心：算出百分比与值，按条件写回（对齐 Semi handleMouseEvent）。
+  function handleMouseEvent(e: MouseEvent, shouldSetValue = true): void {
+    if (!sliderEl || disabled) return;
+    const rect = sliderEl.getBoundingClientRect();
+    const offset = vertical ? rect.bottom - e.clientY : e.clientX - rect.left;
+    const total = vertical ? rect.height : rect.width;
+    const percentage = Math.min(Math.max(offset / total, 0), 1);
+    const nextValue = percentage * max;
+    // mousedown 即定位；move 仅 dragging 中写值（对齐 Semi shouldSetValue 条件）。
+    if (shouldSetValue && (isDragging || e.type === 'mousedown')) {
+      onChange(nextValue);
+    }
+    movingInfo = {
+      progress: percentage,
+      offset: vertical ? offset - rect.height / 2 : offset - rect.width / 2,
+    };
+  }
+
+  function onMouseDown(e: MouseEvent): void {
+    isDragging = true;
+    handleMouseEvent(e, true);
+  }
+  function onMouseUp(): void {
+    if (isDragging) isDragging = false;
+  }
+  function onMouseEnter(e: MouseEvent): void {
+    isHovering = true;
+    handleMouseEvent(e, false); // 仅更新预览，不写值
+  }
+  function onMouseMove(e: MouseEvent): void {
+    handleMouseEvent(e, true); // 拖拽中才生效
+  }
+  function onMouseLeave(): void {
+    isHovering = false;
+    isDragging = false;
+  }
+
+  const percent = $derived(max > 0 ? (value / max) * 100 : 0);
+
+  // 秒 → m:ss（对齐 Semi utils.formatTime，无小时/NaN 保护——严格照搬）。
+  function formatTime(time: number): string {
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  }
+
+  // Tooltip 预览内容（movingInfo 为 null 时 undefined*max=NaN → 显示 NaN:NaN，严格照搬 Semi 缺陷）。
+  const tooltipContent = $derived(formatTime((movingInfo?.progress as number) * max));
+  // 轨道厚度：hover 时 4→8px（对齐 Semi）。
+  const sliderStyle = $derived(
+    vertical
+      ? `width:${isHovering ? 8 : 4}px;height:${height}px`
+      : `width:${typeof width === 'number' ? width + 'px' : width};height:${isHovering ? 8 : 4}px`,
+  );
+  const progressStyle = $derived(
+    vertical ? `height:${percent}%;width:100%` : `width:${percent}%;height:100%`,
+  );
+  const dotStyle = $derived(
+    vertical
+      ? `left:50%;bottom:calc(${percent}% - 8px);transform:translateX(-50%);opacity:${isHovering ? 1 : 0}`
+      : `left:calc(${percent}% - 8px);top:50%;transform:translateY(-50%);opacity:${isHovering ? 1 : 0}`,
+  );
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+{#snippet sliderContent()}
+  <div
+    role="slider"
+    tabindex="-1"
+    aria-valuemin={0}
+    aria-valuemax={max}
+    aria-valuenow={value}
+    aria-orientation={vertical ? 'vertical' : 'horizontal'}
+    aria-label={ariaLabel}
+    class={[
+      'cd-audio-player-slider-wrapper',
+      vertical ? 'cd-audio-player-slider-wrapper-vertical' : 'cd-audio-player-slider-wrapper-horizontal',
+    ].join(' ')}
+    onmousedown={onMouseDown}
+    onmouseup={onMouseUp}
+    onmouseenter={onMouseEnter}
+    onmouseleave={onMouseLeave}
+    onmousemove={onMouseMove}
+  >
+    <div
+      bind:this={sliderEl}
+      class={[
+        'cd-audio-player-slider',
+        `cd-audio-player-slider-${theme}`,
+        vertical ? 'cd-audio-player-slider-vertical' : 'cd-audio-player-slider-horizontal',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={sliderStyle}
+    >
+      <div
+        class={[
+          'cd-audio-player-slider-progress',
+          vertical
+            ? 'cd-audio-player-slider-progress-vertical'
+            : 'cd-audio-player-slider-progress-horizontal',
+        ].join(' ')}
+        style={progressStyle}
+      ></div>
+      <div class="cd-audio-player-slider-dot" style={dotStyle}></div>
+    </div>
+  </div>
+{/snippet}
+
+{#if showTooltip}
+  <Tooltip position={vertical ? 'right' : 'top'} content={tooltipContent}>
+    {@render sliderContent()}
+  </Tooltip>
+{:else}
+  {@render sliderContent()}
+{/if}

package/dist/audio-player/AudioSlider.svelte.d.ts

@@ -0,0 +1,20 @@
+interface Props {
+    value: number;
+    onChange?: (value: number) => void;
+    class?: string;
+    max?: number;
+    vertical?: boolean;
+    /** 横向宽度（px 或 CSS 值，如 "100%"）；纵向忽略。 */
+    width?: number | string;
+    /** 纵向高度（px）；横向忽略。 */
+    height?: number;
+    showTooltip?: boolean;
+    disabled?: boolean;
+    theme?: 'dark' | 'light';
+    /** 无障碍名（role=slider 的 accessible name）。 */
+    ariaLabel?: string;
+}
+declare const AudioSlider: import("svelte").Component<Props, {}, "">;
+type AudioSlider = ReturnType<typeof AudioSlider>;
+export default AudioSlider;
+//# sourceMappingURL=AudioSlider.svelte.d.ts.map

package/dist/audio-player/AudioSlider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioSlider.svelte.d.ts","sourceRoot":"","sources":["../../src/audio-player/AudioSlider.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,qBAAqB;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4HH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/audio-player/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AudioPlayer } from './AudioPlayer.svelte';
+export { meta as audioPlayerMeta } from './meta.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/audio-player/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/audio-player/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,WAAW,CAAC"}

package/dist/audio-player/index.js

@@ -0,0 +1,2 @@
+export { default as AudioPlayer } from './AudioPlayer.svelte';
+export { meta as audioPlayerMeta } from './meta.js';

package/dist/audio-player/meta.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * AudioPlayer — 严格对齐 Semi AudioPlayer（semi-ui/audioPlayer）。基于原生 <audio>，无第三方媒体库。
+ * DOM 单行布局镜像 Semi；复用 Button/Dropdown/Popover/Tooltip/Image + 具名图标；40 token 镜像 Semi variables.scss。
+ */
+export declare const meta: {
+    readonly name: "AudioPlayer";
+    readonly category: "plus";
+    readonly stage: "M6";
+    readonly semiEquivalent: "AudioPlayer";
+    readonly description: "基于原生 <audio> 的音频播放器（严格对齐 Semi，无第三方媒体库）。audioUrl 接受 string | AudioInfo | (string|AudioInfo)[] 四形态；数组时启用播放列表（上/下曲、ended 自动切下一曲、取模循环连播）。工具栏含音量(Popover 竖向 slider)、快退/快进(按 skipDuration)、倍速(Dropdown 5 档 0.5/0.75/1/1.5/2)、刷新；播放控制含上/下曲(多曲)+播放/暂停(圆形)。进度/音量用自建 AudioSlider(hover 变粗+拖拽圆点+Tooltip 时间预览)。深/浅双主题(默认 dark)。静音切换 0↔50%(照搬 Semi)。";
+    readonly exports: readonly ["AudioPlayer"];
+    readonly props: readonly [{
+        readonly name: "audioUrl";
+        readonly type: "string | AudioInfo | (string | AudioInfo)[]";
+        readonly default: "—";
+        readonly desc: "音频地址（四形态，AudioInfo = { src; title?; cover? }）；数组启用播放列表";
+    }, {
+        readonly name: "autoPlay";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "自动播放（对齐 Semi）";
+    }, {
+        readonly name: "showToolbar";
+        readonly type: "boolean";
+        readonly default: "true";
+        readonly desc: "是否显示工具栏（音量/快退/快进/倍速/刷新）";
+    }, {
+        readonly name: "skipDuration";
+        readonly type: "number";
+        readonly default: "10";
+        readonly desc: "快进/快退步长（秒），注入 backward/forward Tooltip 文案";
+    }, {
+        readonly name: "theme";
+        readonly type: "'dark' | 'light'";
+        readonly default: "'dark'";
+        readonly desc: "主题（对齐 Semi 默认 dark）";
+    }, {
+        readonly name: "class";
+        readonly type: "string";
+        readonly default: "''";
+        readonly desc: "根节点类名（对齐 Semi className）";
+    }, {
+        readonly name: "style";
+        readonly type: "string";
+        readonly default: "''";
+        readonly desc: "根节点内联样式（对齐 Semi style）";
+    }];
+    readonly events: readonly [];
+    readonly slots: readonly [];
+    readonly a11y: {
+        readonly role: "group";
+        readonly focusable: false;
+        readonly notes: readonly ["各控制按钮为本库 Button，外包 Tooltip（走 i18n 文案：prev/next/backward/forward/volume）", "倍速触发器 role=button + tabindex=0（Dropdown 附加 aria-haspopup/expanded，补 role 使其合法可键盘聚焦）", "自建 AudioSlider role=slider + aria-valuemin/max/now + aria-orientation + aria-label（进度/音量）", "多曲取模循环（对齐 Semi，无边界 disabled；末曲 next 绕回首曲）", "播放出错时工具栏仅保留刷新按钮（对齐 Semi error 分支）；错误块图标 + 硬编码文案(照搬 Semi)"];
+    };
+    readonly tokens: readonly ["--cd-color-audio-player-background", "--cd-color-audio-player-control-icon", "--cd-color-audio-player-control-icon-play", "--cd-color-audio-player-font-color", "--cd-color-audio-player-font-color-speed", "--cd-color-audio-player-background-light", "--cd-color-audio-player-control-icon-light", "--cd-color-audio-player-control-icon-play-light", "--cd-color-audio-player-font-color-light", "--cd-font-size-audio-player-text", "--cd-gap-audio-player-small", "--cd-gap-audio-player-medium", "--cd-gap-audio-player-large", "--cd-width-audio-player-max", "--cd-height-audio-player", "--cd-width-audio-player-slider", "--cd-width-audio-player-speed", "--cd-height-audio-player-speed", "--cd-width-audio-player-speed-menu", "--cd-width-audio-player-volume", "--cd-height-audio-player-volume", "--cd-height-audio-player-time", "--cd-border-radius-audio-player-speed", "--cd-border-radius-audio-player-volume", "--cd-border-radius-audio-player-slider", "--cd-font-size-audio-player-small", "--cd-line-height-audio-player-small", "--cd-width-audio-player-slider-bar", "--cd-size-audio-player-slider-dot", "--cd-color-audio-player-disabled-bg", "--cd-color-audio-player-slider-bg", "--cd-color-audio-player-slider-bg-light", "--cd-color-audio-player-slider-progress", "--cd-color-audio-player-slider-dot-bg", "--cd-color-audio-player-disabled-text", "--cd-color-audio-player-text-default", "--cd-color-audio-player-light-disabled-bg", "--cd-color-audio-player-light-disabled-text", "--cd-color-audio-player-light-text", "--cd-color-audio-player-light-hover-bg"];
+    readonly examples: readonly [{
+        readonly title: "基本用法(字符串)";
+        readonly code: "<AudioPlayer audioUrl=\"/audio/song.mp3\" />";
+    }, {
+        readonly title: "带封面/标题";
+        readonly code: "<AudioPlayer audioUrl={{ src: \"/a.mp3\", title: \"标题\", cover: \"/cover.png\" }} />";
+    }, {
+        readonly title: "播放列表(数组)";
+        readonly code: "<AudioPlayer audioUrl={[{ src: \"/a.mp3\", title: \"A\" }, { src: \"/b.mp3\", title: \"B\" }]} />";
+    }, {
+        readonly title: "隐藏工具栏";
+        readonly code: "<AudioPlayer audioUrl=\"/a.mp3\" showToolbar={false} />";
+    }, {
+        readonly title: "浅色主题";
+        readonly code: "<AudioPlayer audioUrl=\"/a.mp3\" theme=\"light\" />";
+    }];
+};
+//# sourceMappingURL=meta.d.ts.map

package/dist/audio-player/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/audio-player/meta.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FP,CAAC"}

package/dist/audio-player/meta.js

@@ -0,0 +1,96 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * AudioPlayer — 严格对齐 Semi AudioPlayer（semi-ui/audioPlayer）。基于原生 <audio>，无第三方媒体库。
+ * DOM 单行布局镜像 Semi；复用 Button/Dropdown/Popover/Tooltip/Image + 具名图标；40 token 镜像 Semi variables.scss。
+ */
+export const meta = {
+    name: 'AudioPlayer',
+    category: 'plus',
+    stage: 'M6',
+    semiEquivalent: 'AudioPlayer',
+    description: '基于原生 <audio> 的音频播放器（严格对齐 Semi，无第三方媒体库）。audioUrl 接受 string | AudioInfo | (string|AudioInfo)[] 四形态；数组时启用播放列表（上/下曲、ended 自动切下一曲、取模循环连播）。工具栏含音量(Popover 竖向 slider)、快退/快进(按 skipDuration)、倍速(Dropdown 5 档 0.5/0.75/1/1.5/2)、刷新；播放控制含上/下曲(多曲)+播放/暂停(圆形)。进度/音量用自建 AudioSlider(hover 变粗+拖拽圆点+Tooltip 时间预览)。深/浅双主题(默认 dark)。静音切换 0↔50%(照搬 Semi)。',
+    exports: ['AudioPlayer'],
+    props: [
+        {
+            name: 'audioUrl',
+            type: 'string | AudioInfo | (string | AudioInfo)[]',
+            default: '—',
+            desc: '音频地址（四形态，AudioInfo = { src; title?; cover? }）；数组启用播放列表',
+        },
+        { name: 'autoPlay', type: 'boolean', default: 'false', desc: '自动播放（对齐 Semi）' },
+        { name: 'showToolbar', type: 'boolean', default: 'true', desc: '是否显示工具栏（音量/快退/快进/倍速/刷新）' },
+        { name: 'skipDuration', type: 'number', default: '10', desc: '快进/快退步长（秒），注入 backward/forward Tooltip 文案' },
+        { name: 'theme', type: "'dark' | 'light'", default: "'dark'", desc: '主题（对齐 Semi 默认 dark）' },
+        { name: 'class', type: 'string', default: "''", desc: '根节点类名（对齐 Semi className）' },
+        { name: 'style', type: 'string', default: "''", desc: '根节点内联样式（对齐 Semi style）' },
+    ],
+    events: [],
+    slots: [],
+    a11y: {
+        role: 'group',
+        focusable: false,
+        notes: [
+            '各控制按钮为本库 Button，外包 Tooltip（走 i18n 文案：prev/next/backward/forward/volume）',
+            '倍速触发器 role=button + tabindex=0（Dropdown 附加 aria-haspopup/expanded，补 role 使其合法可键盘聚焦）',
+            '自建 AudioSlider role=slider + aria-valuemin/max/now + aria-orientation + aria-label（进度/音量）',
+            '多曲取模循环（对齐 Semi，无边界 disabled；末曲 next 绕回首曲）',
+            '播放出错时工具栏仅保留刷新按钮（对齐 Semi error 分支）；错误块图标 + 硬编码文案(照搬 Semi)',
+        ],
+    },
+    // 40 token 严格镜像 Semi variables.scss（深/浅双主题各一套色 + 尺寸/间距/圆角）。
+    tokens: [
+        '--cd-color-audio-player-background',
+        '--cd-color-audio-player-control-icon',
+        '--cd-color-audio-player-control-icon-play',
+        '--cd-color-audio-player-font-color',
+        '--cd-color-audio-player-font-color-speed',
+        '--cd-color-audio-player-background-light',
+        '--cd-color-audio-player-control-icon-light',
+        '--cd-color-audio-player-control-icon-play-light',
+        '--cd-color-audio-player-font-color-light',
+        '--cd-font-size-audio-player-text',
+        '--cd-gap-audio-player-small',
+        '--cd-gap-audio-player-medium',
+        '--cd-gap-audio-player-large',
+        '--cd-width-audio-player-max',
+        '--cd-height-audio-player',
+        '--cd-width-audio-player-slider',
+        '--cd-width-audio-player-speed',
+        '--cd-height-audio-player-speed',
+        '--cd-width-audio-player-speed-menu',
+        '--cd-width-audio-player-volume',
+        '--cd-height-audio-player-volume',
+        '--cd-height-audio-player-time',
+        '--cd-border-radius-audio-player-speed',
+        '--cd-border-radius-audio-player-volume',
+        '--cd-border-radius-audio-player-slider',
+        '--cd-font-size-audio-player-small',
+        '--cd-line-height-audio-player-small',
+        '--cd-width-audio-player-slider-bar',
+        '--cd-size-audio-player-slider-dot',
+        '--cd-color-audio-player-disabled-bg',
+        '--cd-color-audio-player-slider-bg',
+        '--cd-color-audio-player-slider-bg-light',
+        '--cd-color-audio-player-slider-progress',
+        '--cd-color-audio-player-slider-dot-bg',
+        '--cd-color-audio-player-disabled-text',
+        '--cd-color-audio-player-text-default',
+        '--cd-color-audio-player-light-disabled-bg',
+        '--cd-color-audio-player-light-disabled-text',
+        '--cd-color-audio-player-light-text',
+        '--cd-color-audio-player-light-hover-bg',
+    ],
+    examples: [
+        { title: '基本用法(字符串)', code: '<AudioPlayer audioUrl="/audio/song.mp3" />' },
+        {
+            title: '带封面/标题',
+            code: '<AudioPlayer audioUrl={{ src: "/a.mp3", title: "标题", cover: "/cover.png" }} />',
+        },
+        {
+            title: '播放列表(数组)',
+            code: '<AudioPlayer audioUrl={[{ src: "/a.mp3", title: "A" }, { src: "/b.mp3", title: "B" }]} />',
+        },
+        { title: '隐藏工具栏', code: '<AudioPlayer audioUrl="/a.mp3" showToolbar={false} />' },
+        { title: '浅色主题', code: '<AudioPlayer audioUrl="/a.mp3" theme="light" />' },
+    ],
+};