@will-ui/vue 1.0.0

package/dist/components/audioPlayer/AudioPlayer.js

@@ -0,0 +1,375 @@
+import Layer_default from "../layer/Layer.js";
+import Virtual from "../virtual/Virtual.js";
+import { open } from "../confirm/index.js";
+import Equalizer_default from "../equalizer/Equalizer.js";
+import SvgIcon, { resolvePlayModeIconName } from "../svgIcon/SvgIcon.js";
+import Progress_default from "../progress/Progress.js";
+import useAudioPlayer from "../../use/useAudioPlayer.js";
+import { computed, createTextVNode, createVNode, defineComponent, nextTick, ref } from "vue";
+//#region components/audioPlayer/AudioPlayer.tsx
+var PLAYLIST_ITEM_HEIGHT = 48;
+var PLAY_MODE_TITLES = {
+	sequential: "顺序播放",
+	random: "随机播放",
+	"single-loop": "单曲循环",
+	"list-loop": "列表循环"
+};
+var PLAY_MODE_CYCLE = [
+	"sequential",
+	"random",
+	"single-loop",
+	"list-loop"
+];
+var AudioPlayer_default = /* @__PURE__ */ defineComponent({
+	name: "AudioPlayer",
+	props: {
+		playlists: {
+			type: Array,
+			default: () => []
+		},
+		source: {
+			type: Object,
+			default: null
+		},
+		activePlaylistId: {
+			type: [String, Number],
+			default: void 0
+		},
+		activeTrackId: {
+			type: [String, Number],
+			default: void 0
+		},
+		playMode: {
+			type: String,
+			default: "sequential"
+		},
+		autoplay: {
+			type: Boolean,
+			default: false
+		},
+		preload: {
+			type: String,
+			default: "metadata"
+		},
+		defaultVolume: {
+			type: Number,
+			default: 100
+		},
+		defaultMuted: {
+			type: Boolean,
+			default: false
+		},
+		defaultPlaylistExpanded: {
+			type: Boolean,
+			default: false
+		},
+		nearby: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"play",
+		"pause",
+		"ended",
+		"time-update",
+		"volume-change",
+		"track-change",
+		"playlist-change",
+		"playlists-change",
+		"play-mode-change",
+		"loaded",
+		"error",
+		"update:activePlaylistId",
+		"update:activeTrackId",
+		"update:playMode",
+		"track-remove"
+	],
+	setup(props, { emit, expose, slots }) {
+		const playlistExpanded = ref(props.defaultPlaylistExpanded);
+		const playlistVirtualRef = ref(null);
+		const player = useAudioPlayer({
+			playlists: () => props.playlists,
+			source: () => props.source,
+			activePlaylistId: () => props.activePlaylistId,
+			activeTrackId: () => props.activeTrackId,
+			playMode: () => props.playMode,
+			autoplay: () => props.autoplay,
+			preload: () => props.preload,
+			defaultVolume: props.defaultVolume,
+			defaultMuted: props.defaultMuted,
+			onPlay: (track) => emit("play", track),
+			onPause: (track) => emit("pause", track),
+			onEnded: (track) => emit("ended", track),
+			onTimeUpdate: (payload) => emit("time-update", payload),
+			onVolumeChange: (payload) => emit("volume-change", payload),
+			onTrackChange: (track) => emit("track-change", track),
+			onPlaylistChange: (playlist) => emit("playlist-change", playlist),
+			onPlaylistsChange: (playlists) => emit("playlists-change", playlists),
+			onPlayModeChange: (mode) => emit("play-mode-change", mode),
+			onLoaded: (track) => emit("loaded", track),
+			onError: (error) => emit("error", error),
+			onUpdateActivePlaylistId: (id) => emit("update:activePlaylistId", id),
+			onUpdateActiveTrackId: (id) => emit("update:activeTrackId", id),
+			onUpdatePlayMode: (mode) => emit("update:playMode", mode)
+		});
+		const playlistTracks = computed(() => player.currentPlaylist.value?.tracks || []);
+		const trackCount = computed(() => playlistTracks.value.length);
+		const cyclePlayMode = () => {
+			const next = PLAY_MODE_CYCLE[(PLAY_MODE_CYCLE.indexOf(player.playMode.value) + 1) % PLAY_MODE_CYCLE.length];
+			player.setPlayMode(next);
+		};
+		const togglePlaylist = () => {
+			playlistExpanded.value = !playlistExpanded.value;
+		};
+		const onSelectTrack = (trackId) => {
+			player.playTrack(trackId);
+		};
+		const getTrackTitle = (track, index) => {
+			return track.title || track.name || `音频 ${index + 1}`;
+		};
+		const onRemoveTrack = async (e, trackId) => {
+			e.stopPropagation();
+			const playlistId = player.currentPlaylistId.value;
+			if (!playlistId) return;
+			const trackIndex = playlistTracks.value.findIndex((item) => item.id === trackId);
+			const track = trackIndex >= 0 ? playlistTracks.value[trackIndex] : null;
+			const trackTitle = track ? getTrackTitle(track, trackIndex) : "该音频";
+			try {
+				await open({
+					title: "移除确认",
+					content: `确定从播放列表中移除「${trackTitle}」吗？`,
+					okText: "确认移除",
+					cancelText: "取消",
+					danger: true
+				});
+			} catch {
+				return;
+			}
+			player.removeTracksFromPlaylist(playlistId, [trackId]);
+			emit("track-remove", {
+				playlistId,
+				trackId
+			});
+		};
+		const scrollActiveTrackIntoView = async () => {
+			await nextTick();
+			requestAnimationFrame(() => {
+				playlistVirtualRef.value?.refresh?.();
+				const idx = player.currentTrackIndex.value;
+				if (idx < 0) return;
+				if (playlistVirtualRef.value?.isIndexVisible?.(idx)) return;
+				playlistVirtualRef.value?.scrollToIndex?.(idx);
+			});
+		};
+		const renderPlaylistPanel = () => {
+			return createVNode("div", { "class": "w-audio-player__playlist" }, [createVNode("div", { "class": "w-audio-player__playlist-head" }, [createVNode("div", { "class": "w-audio-player__playlist-title-wrap" }, [createVNode("span", null, [createTextVNode("播放列表")]), createVNode("span", { "class": "w-audio-player__playlist-count" }, [trackCount.value])]), createVNode("div", { "class": "w-audio-player__playlist-head-right" }, [slots["playlist-actions"]?.({
+				tracks: playlistTracks.value,
+				playlist: player.currentPlaylist.value,
+				trackCount: trackCount.value
+			}), createVNode("button", {
+				"type": "button",
+				"class": "w-audio-player__playlist-close",
+				"title": "收起",
+				"onClick": () => {
+					playlistExpanded.value = false;
+				}
+			}, [createVNode(SvgIcon, {
+				"name": "chevron-down",
+				"size": 16
+			}, null)])])]), trackCount.value === 0 ? createVNode("div", { "class": "w-audio-player__playlist-empty" }, [createTextVNode("播放列表为空，去添加几首歌吧")]) : createVNode(Virtual, {
+				ref: playlistVirtualRef,
+				class: "w-audio-player__playlist-virtual",
+				style: { height: "min(360px, calc(100vh - 180px))" },
+				sourceData: playlistTracks.value,
+				itemHeight: PLAYLIST_ITEM_HEIGHT,
+				pad: 4
+			}, { default: ({ data, index }) => createVNode("ul", { "class": "w-audio-player__playlist-list" }, [data.map((item, i) => {
+				const realIndex = index.from + i;
+				const active = item.id === player.currentTrackId.value;
+				const itemTitle = getTrackTitle(item, realIndex);
+				return createVNode("li", {
+					"key": item.id,
+					"class": ["w-audio-player__playlist-item", {
+						"w-audio-player__playlist-item--active": active,
+						"w-audio-player__playlist-item--playing": active && player.isPlaying.value
+					}],
+					"style": { height: `${PLAYLIST_ITEM_HEIGHT}px` },
+					"onClick": () => onSelectTrack(item.id)
+				}, [
+					createVNode("span", { "class": "w-audio-player__playlist-index" }, [active && player.isPlaying.value ? createVNode(Equalizer_default, {
+						"active": true,
+						"size": 12,
+						"bars": 3
+					}, null) : String(realIndex + 1).padStart(2, "0")]),
+					createVNode("div", { "class": "w-audio-player__playlist-meta" }, [createVNode("span", {
+						"class": "w-audio-player__playlist-song",
+						"title": itemTitle
+					}, [itemTitle])]),
+					createVNode("button", {
+						"type": "button",
+						"class": "w-audio-player__playlist-remove",
+						"title": "删除",
+						"onClick": (e) => onRemoveTrack(e, item.id)
+					}, [createVNode(SvgIcon, {
+						"name": "close",
+						"size": 14
+					}, null)])
+				]);
+			})]) })]);
+		};
+		expose({
+			...player,
+			playlistExpanded,
+			togglePlaylist
+		});
+		return () => {
+			const track = player.currentTrack.value;
+			const title = track ? getTrackTitle(track, Math.max(player.currentTrackIndex.value, 0)) : "暂无音频";
+			const hasTrack = player.hasTrack.value;
+			const cover = track?.cover;
+			const progress = hasTrack ? player.displayProgressPercent.value : 0;
+			const muted = player.isMuted.value || player.volumePercent.value === 0;
+			return createVNode("div", { "class": ["w-audio-player", {
+				"w-audio-player--empty": !hasTrack,
+				"w-audio-player--playing": player.isPlaying.value,
+				"w-audio-player--playlist-open": playlistExpanded.value
+			}] }, [createVNode("div", { "class": "w-audio-player__bar" }, [
+				createVNode(Progress_default, {
+					"class": ["w-audio-player__progress", { "w-audio-player__progress--seeking": player.isSeeking.value }],
+					"modelValue": progress,
+					"buffered": player.bufferedPercent.value,
+					"disabled": !hasTrack,
+					"size": 30,
+					"onDrag-start": (percent) => {
+						player.beginSeeking(percent);
+					},
+					"onDragging": (percent) => {
+						player.updateSeekingByPercent(percent);
+					},
+					"onDrag-end": (percent) => {
+						player.commitSeeking(percent);
+					}
+				}, null),
+				createVNode("div", { "class": "w-audio-player__main" }, [
+					createVNode("div", { "class": "w-audio-player__left" }, [createVNode("div", { "class": ["w-audio-player__cover", { "w-audio-player__cover--spin": player.isPlaying.value }] }, [cover ? createVNode("img", {
+						"src": cover,
+						"alt": ""
+					}, null) : createVNode("div", { "class": "w-audio-player__cover-fallback" }, [createVNode(SvgIcon, {
+						"name": "music",
+						"size": 22
+					}, null)])]), createVNode("div", { "class": "w-audio-player__info" }, [createVNode("div", {
+						"class": "w-audio-player__song",
+						"title": title
+					}, [title])])]),
+					createVNode("div", { "class": "w-audio-player__center" }, [
+						createVNode("button", {
+							"type": "button",
+							"class": "w-audio-player__icon-btn",
+							"title": PLAY_MODE_TITLES[player.playMode.value],
+							"onClick": cyclePlayMode
+						}, [createVNode(SvgIcon, {
+							"name": resolvePlayModeIconName(player.playMode.value),
+							"size": 18
+						}, null)]),
+						createVNode("button", {
+							"type": "button",
+							"class": "w-audio-player__icon-btn",
+							"disabled": !hasTrack,
+							"onClick": () => player.prev(),
+							"title": "上一首"
+						}, [createVNode(SvgIcon, {
+							"name": "prev",
+							"size": 22
+						}, null)]),
+						createVNode("button", {
+							"type": "button",
+							"class": "w-audio-player__play-btn",
+							"disabled": !hasTrack,
+							"onClick": () => player.togglePlay(),
+							"title": player.isPlaying.value ? "暂停" : "播放"
+						}, [createVNode(SvgIcon, {
+							"name": player.isPlaying.value ? "pause" : "play",
+							"size": 18
+						}, null)]),
+						createVNode("button", {
+							"type": "button",
+							"class": "w-audio-player__icon-btn",
+							"disabled": !hasTrack,
+							"onClick": () => player.next(),
+							"title": "下一首"
+						}, [createVNode(SvgIcon, {
+							"name": "next",
+							"size": 22
+						}, null)])
+					]),
+					createVNode("div", { "class": "w-audio-player__right" }, [
+						createVNode("div", { "class": "w-audio-player__time" }, [
+							createVNode("span", null, [player.formattedDisplayCurrentTime.value]),
+							createVNode("span", { "class": "w-audio-player__time-sep" }, [createTextVNode("/")]),
+							createVNode("span", null, [player.formattedDuration.value])
+						]),
+						createVNode("div", { "class": "w-audio-player__volume" }, [createVNode("button", {
+							"type": "button",
+							"class": "w-audio-player__icon-btn w-audio-player__icon-btn--sm",
+							"onClick": () => player.toggleMute(),
+							"title": player.isMuted.value ? "取消静音" : "静音"
+						}, [createVNode(SvgIcon, {
+							"name": muted ? "volume-off" : "volume",
+							"size": 16
+						}, null)]), createVNode(Progress_default, {
+							"class": "w-audio-player__volume-progress",
+							"modelValue": player.volumePercent.value,
+							"showThumb": false,
+							"size": 30,
+							"onUpdate:modelValue": (value) => {
+								player.setVolumeByPercent(value);
+							}
+						}, null)]),
+						createVNode(Layer_default, {
+							"show": playlistExpanded.value,
+							"nearby": props.nearby,
+							"placement": "top-end",
+							"trigger": "click",
+							"gap": 10,
+							"hasArrow": false,
+							"immediate": true,
+							"adjustPosition": "auto",
+							"layerClass": "w-audio-player__playlist-layer",
+							"layerCssVar": {
+								"--_layer-background-color": "#2a2a2a",
+								"--_layer-border-color": "#3a3a3a",
+								"--_layer-color": "#eaeaea"
+							},
+							"onUpdate:show": (visible) => {
+								playlistExpanded.value = visible;
+							},
+							"onAfter-enter": () => {
+								scrollActiveTrackIntoView();
+							}
+						}, {
+							trigger: () => createVNode("button", {
+								"type": "button",
+								"class": [
+									"w-audio-player__icon-btn",
+									"w-audio-player__playlist-btn",
+									{ "w-audio-player__icon-btn--active": playlistExpanded.value }
+								],
+								"title": playlistExpanded.value ? "收起播放列表" : "打开播放列表"
+							}, [createVNode(SvgIcon, {
+								"name": "playlist",
+								"size": 18
+							}, null), createVNode("span", { "class": "w-audio-player__playlist-badge" }, [trackCount.value])]),
+							default: () => renderPlaylistPanel()
+						})
+					])
+				]),
+				player.errorMessage.value && createVNode("div", { "class": "w-audio-player__error" }, [player.errorMessage.value])
+			])]);
+		};
+	}
+});
+//#endregion
+export { AudioPlayer_default as default };
+
+//# sourceMappingURL=AudioPlayer.js.map

package/dist/components/audioPlayer/AudioPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayer.js","names":["computed","defineComponent","nextTick","ref","createTextVNode","_createTextVNode","createVNode","_createVNode","Layer","Virtual","Progress","SvgIcon","resolvePlayModeIconName","Equalizer","open","openConfirm","useAudioPlayer","PLAYLIST_ITEM_HEIGHT","PLAY_MODE_TITLES","sequential","random","PLAY_MODE_CYCLE","name","props","playlists","type","Array","default","source","Object","activePlaylistId","String","Number","undefined","activeTrackId","playMode","autoplay","Boolean","preload","defaultVolume","defaultMuted","defaultPlaylistExpanded","nearby","emits","setup","emit","expose","slots","playlistExpanded","playlistVirtualRef","player","onPlay","track","onPause","onEnded","onTimeUpdate","payload","onVolumeChange","onTrackChange","onPlaylistChange","playlist","onPlaylistsChange","onPlayModeChange","mode","onLoaded","onError","error","onUpdateActivePlaylistId","id","onUpdateActiveTrackId","onUpdatePlayMode","playlistTracks","currentPlaylist","value","tracks","trackCount","length","cyclePlayMode","idx","indexOf","next","setPlayMode","togglePlaylist","onSelectTrack","trackId","playTrack","getTrackTitle","index","title","onRemoveTrack","e","stopPropagation","playlistId","currentPlaylistId","trackIndex","findIndex","item","trackTitle","content","okText","cancelText","danger","removeTracksFromPlaylist","scrollActiveTrackIntoView","requestAnimationFrame","refresh","currentTrackIndex","isIndexVisible","scrollToIndex","renderPlaylistPanel","onClick","class","style","height","sourceData","itemHeight","pad","data","map","i","realIndex","from","active","currentTrackId","itemTitle","isPlaying","padStart","currentTrack","Math","max","hasTrack","cover","progress","displayProgressPercent","muted","isMuted","volumePercent","isSeeking","bufferedPercent","percent","beginSeeking","updateSeekingByPercent","commitSeeking","prev","togglePlay","formattedDisplayCurrentTime","formattedDuration","toggleMute","setVolumeByPercent","visible","onAfter-enter","trigger","errorMessage"],"sources":["../../../components/audioPlayer/AudioPlayer.tsx"],"sourcesContent":["import { computed, defineComponent, nextTick, ref } from 'vue'\r\nimport type { PropType } from 'vue'\r\nimport Layer from '../layer'\r\nimport Virtual from '../virtual'\r\nimport Progress from '../progress'\r\nimport SvgIcon, { resolvePlayModeIconName } from '../svgIcon'\r\nimport Equalizer from '../equalizer'\r\nimport type { DataListOptions } from '../virtual/Virtual'\r\nimport { open as openConfirm } from '../confirm'\r\nimport useAudioPlayer from '../../use/useAudioPlayer'\r\nimport type {\r\n  AudioPlayMode,\r\n  AudioPlaylist,\r\n  AudioTrack,\r\n  InternalAudioTrack,\r\n} from '../../use/useAudioPlayer'\r\n\r\nconst PLAYLIST_ITEM_HEIGHT = 48\r\n\r\nconst PLAY_MODE_TITLES: Record<AudioPlayMode, string> = {\r\n  sequential: '顺序播放',\r\n  random: '随机播放',\r\n  'single-loop': '单曲循环',\r\n  'list-loop': '列表循环',\r\n}\r\n\r\nconst PLAY_MODE_CYCLE: AudioPlayMode[] = [\r\n  'sequential',\r\n  'random',\r\n  'single-loop',\r\n  'list-loop',\r\n]\r\n\r\nexport type { AudioPlayMode, AudioPlaylist, AudioTrack }\r\n\r\nexport default defineComponent({\r\n  name: 'AudioPlayer',\r\n  props: {\r\n    playlists: {\r\n      type: Array as PropType<AudioPlaylist[]>,\r\n      default: () => [],\r\n    },\r\n    source: {\r\n      type: Object as PropType<AudioTrack | null>,\r\n      default: null,\r\n    },\r\n    activePlaylistId: {\r\n      type: [String, Number],\r\n      default: undefined,\r\n    },\r\n    activeTrackId: {\r\n      type: [String, Number],\r\n      default: undefined,\r\n    },\r\n    playMode: {\r\n      type: String as PropType<AudioPlayMode>,\r\n      default: 'sequential',\r\n    },\r\n    autoplay: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    preload: {\r\n      type: String as PropType<'none' | 'metadata' | 'auto'>,\r\n      default: 'metadata',\r\n    },\r\n    defaultVolume: {\r\n      type: Number,\r\n      default: 100,\r\n    },\r\n    defaultMuted: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    defaultPlaylistExpanded: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    nearby: { type: Boolean, default: false },\r\n  },\r\n  emits: [\r\n    'play',\r\n    'pause',\r\n    'ended',\r\n    'time-update',\r\n    'volume-change',\r\n    'track-change',\r\n    'playlist-change',\r\n    'playlists-change',\r\n    'play-mode-change',\r\n    'loaded',\r\n    'error',\r\n    'update:activePlaylistId',\r\n    'update:activeTrackId',\r\n    'update:playMode',\r\n    'track-remove',\r\n  ],\r\n  setup(props, { emit, expose, slots }) {\r\n    const playlistExpanded = ref(props.defaultPlaylistExpanded)\r\n    const playlistVirtualRef = ref<{\r\n      scrollToIndex?: (index: number) => void\r\n      refresh?: () => void\r\n      isIndexVisible?: (index: number) => boolean\r\n    } | null>(null)\r\n\r\n    const player = useAudioPlayer({\r\n      playlists: () => props.playlists,\r\n      source: () => props.source,\r\n      activePlaylistId: () => props.activePlaylistId,\r\n      activeTrackId: () => props.activeTrackId,\r\n      playMode: () => props.playMode,\r\n      autoplay: () => props.autoplay,\r\n      preload: () => props.preload,\r\n      defaultVolume: props.defaultVolume,\r\n      defaultMuted: props.defaultMuted,\r\n      onPlay: (track) => emit('play', track),\r\n      onPause: (track) => emit('pause', track),\r\n      onEnded: (track) => emit('ended', track),\r\n      onTimeUpdate: (payload) => emit('time-update', payload),\r\n      onVolumeChange: (payload) => emit('volume-change', payload),\r\n      onTrackChange: (track) => emit('track-change', track),\r\n      onPlaylistChange: (playlist) => emit('playlist-change', playlist),\r\n      onPlaylistsChange: (playlists) => emit('playlists-change', playlists),\r\n      onPlayModeChange: (mode) => emit('play-mode-change', mode),\r\n      onLoaded: (track) => emit('loaded', track),\r\n      onError: (error) => emit('error', error),\r\n      onUpdateActivePlaylistId: (id) => emit('update:activePlaylistId', id),\r\n      onUpdateActiveTrackId: (id) => emit('update:activeTrackId', id),\r\n      onUpdatePlayMode: (mode) => emit('update:playMode', mode),\r\n    })\r\n\r\n    const playlistTracks = computed(\r\n      () => player.currentPlaylist.value?.tracks || [],\r\n    )\r\n    const trackCount = computed(() => playlistTracks.value.length)\r\n\r\n    const cyclePlayMode = () => {\r\n      const idx = PLAY_MODE_CYCLE.indexOf(player.playMode.value)\r\n      const next = PLAY_MODE_CYCLE[(idx + 1) % PLAY_MODE_CYCLE.length]\r\n      player.setPlayMode(next)\r\n    }\r\n\r\n    const togglePlaylist = () => {\r\n      playlistExpanded.value = !playlistExpanded.value\r\n    }\r\n\r\n    const onSelectTrack = (trackId: string) => {\r\n      player.playTrack(trackId)\r\n    }\r\n\r\n    const getTrackTitle = (track: InternalAudioTrack, index: number) => {\r\n      return track.title || track.name || `音频 ${index + 1}`\r\n    }\r\n\r\n    const onRemoveTrack = async (e: MouseEvent, trackId: string) => {\r\n      e.stopPropagation()\r\n      const playlistId = player.currentPlaylistId.value\r\n      if (!playlistId) return\r\n\r\n      const trackIndex = playlistTracks.value.findIndex(\r\n        (item) => item.id === trackId,\r\n      )\r\n      const track = trackIndex >= 0 ? playlistTracks.value[trackIndex] : null\r\n      const trackTitle = track ? getTrackTitle(track, trackIndex) : '该音频'\r\n\r\n      try {\r\n        await openConfirm({\r\n          title: '移除确认',\r\n          content: `确定从播放列表中移除「${trackTitle}」吗？`,\r\n          okText: '确认移除',\r\n          cancelText: '取消',\r\n          danger: true,\r\n        })\r\n      } catch {\r\n        return\r\n      }\r\n\r\n      player.removeTracksFromPlaylist(playlistId, [trackId])\r\n      emit('track-remove', { playlistId, trackId })\r\n    }\r\n\r\n    const scrollActiveTrackIntoView = async () => {\r\n      await nextTick()\r\n      requestAnimationFrame(() => {\r\n        playlistVirtualRef.value?.refresh?.()\r\n        const idx = player.currentTrackIndex.value\r\n        if (idx < 0) return\r\n        // 已在可视区内则不滚动，避免打断用户浏览\r\n        if (playlistVirtualRef.value?.isIndexVisible?.(idx)) return\r\n        playlistVirtualRef.value?.scrollToIndex?.(idx)\r\n      })\r\n    }\r\n\r\n    const renderPlaylistPanel = () => {\r\n      return (\r\n        <div class=\"w-audio-player__playlist\">\r\n          <div class=\"w-audio-player__playlist-head\">\r\n            <div class=\"w-audio-player__playlist-title-wrap\">\r\n              <span>播放列表</span>\r\n              <span class=\"w-audio-player__playlist-count\">\r\n                {trackCount.value}\r\n              </span>\r\n            </div>\r\n            <div class=\"w-audio-player__playlist-head-right\">\r\n              {slots['playlist-actions']?.({\r\n                tracks: playlistTracks.value,\r\n                playlist: player.currentPlaylist.value,\r\n                trackCount: trackCount.value,\r\n              })}\r\n              <button\r\n                type=\"button\"\r\n                class=\"w-audio-player__playlist-close\"\r\n                title=\"收起\"\r\n                onClick={() => {\r\n                  playlistExpanded.value = false\r\n                }}>\r\n                <SvgIcon name=\"chevron-down\" size={16} />\r\n              </button>\r\n            </div>\r\n          </div>\r\n          {trackCount.value === 0 ? (\r\n            <div class=\"w-audio-player__playlist-empty\">\r\n              播放列表为空，去添加几首歌吧\r\n            </div>\r\n          ) : (\r\n            <Virtual\r\n              {...({\r\n                ref: playlistVirtualRef,\r\n                class: 'w-audio-player__playlist-virtual',\r\n                style: {\r\n                  height: 'min(360px, calc(100vh - 180px))',\r\n                },\r\n                sourceData: playlistTracks.value,\r\n                itemHeight: PLAYLIST_ITEM_HEIGHT,\r\n                pad: 4,\r\n              } as any)}\r\n              v-slots={{\r\n                default: ({\r\n                  data,\r\n                  index,\r\n                }: DataListOptions<InternalAudioTrack>) => (\r\n                  <ul class=\"w-audio-player__playlist-list\">\r\n                    {data.map((item, i) => {\r\n                      const realIndex = index.from + i\r\n                      const active = item.id === player.currentTrackId.value\r\n                      const itemTitle = getTrackTitle(item, realIndex)\r\n                      return (\r\n                        <li\r\n                          key={item.id}\r\n                          class={[\r\n                            'w-audio-player__playlist-item',\r\n                            {\r\n                              'w-audio-player__playlist-item--active': active,\r\n                              'w-audio-player__playlist-item--playing':\r\n                                active && player.isPlaying.value,\r\n                            },\r\n                          ]}\r\n                          style={{ height: `${PLAYLIST_ITEM_HEIGHT}px` }}\r\n                          onClick={() => onSelectTrack(item.id)}>\r\n                          <span class=\"w-audio-player__playlist-index\">\r\n                            {active && player.isPlaying.value ? (\r\n                              <Equalizer active size={12} bars={3} />\r\n                            ) : (\r\n                              String(realIndex + 1).padStart(2, '0')\r\n                            )}\r\n                          </span>\r\n                          <div class=\"w-audio-player__playlist-meta\">\r\n                            <span\r\n                              class=\"w-audio-player__playlist-song\"\r\n                              title={itemTitle}>\r\n                              {itemTitle}\r\n                            </span>\r\n                          </div>\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"w-audio-player__playlist-remove\"\r\n                            title=\"删除\"\r\n                            onClick={(e: MouseEvent) =>\r\n                              onRemoveTrack(e, item.id)\r\n                            }>\r\n                            <SvgIcon name=\"close\" size={14} />\r\n                          </button>\r\n                        </li>\r\n                      )\r\n                    })}\r\n                  </ul>\r\n                ),\r\n              }}\r\n            />\r\n          )}\r\n        </div>\r\n      )\r\n    }\r\n\r\n    expose({\r\n      ...player,\r\n      playlistExpanded,\r\n      togglePlaylist,\r\n    })\r\n\r\n    return () => {\r\n      const track = player.currentTrack.value\r\n      const title = track\r\n        ? getTrackTitle(track, Math.max(player.currentTrackIndex.value, 0))\r\n        : '暂无音频'\r\n      const hasTrack = player.hasTrack.value\r\n      const cover = track?.cover\r\n      const progress = hasTrack ? player.displayProgressPercent.value : 0\r\n      const muted = player.isMuted.value || player.volumePercent.value === 0\r\n\r\n      return (\r\n        <div\r\n          class={[\r\n            'w-audio-player',\r\n            {\r\n              'w-audio-player--empty': !hasTrack,\r\n              'w-audio-player--playing': player.isPlaying.value,\r\n              'w-audio-player--playlist-open': playlistExpanded.value,\r\n            },\r\n          ]}>\r\n          <div class=\"w-audio-player__bar\">\r\n            <Progress\r\n              class={[\r\n                'w-audio-player__progress',\r\n                {\r\n                  'w-audio-player__progress--seeking': player.isSeeking.value,\r\n                },\r\n              ]}\r\n              modelValue={progress}\r\n              buffered={player.bufferedPercent.value}\r\n              disabled={!hasTrack}\r\n              size={30}\r\n              onDrag-start={(percent: number) => {\r\n                player.beginSeeking(percent)\r\n              }}\r\n              onDragging={(percent: number) => {\r\n                player.updateSeekingByPercent(percent)\r\n              }}\r\n              onDrag-end={(percent: number) => {\r\n                player.commitSeeking(percent)\r\n              }}\r\n            />\r\n\r\n            <div class=\"w-audio-player__main\">\r\n              <div class=\"w-audio-player__left\">\r\n                <div\r\n                  class={[\r\n                    'w-audio-player__cover',\r\n                    {\r\n                      'w-audio-player__cover--spin': player.isPlaying.value,\r\n                    },\r\n                  ]}>\r\n                  {cover ? (\r\n                    <img src={cover} alt=\"\" />\r\n                  ) : (\r\n                    <div class=\"w-audio-player__cover-fallback\">\r\n                      <SvgIcon name=\"music\" size={22} />\r\n                    </div>\r\n                  )}\r\n                </div>\r\n                <div class=\"w-audio-player__info\">\r\n                  <div class=\"w-audio-player__song\" title={title}>\r\n                    {title}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"w-audio-player__center\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"w-audio-player__icon-btn\"\r\n                  title={PLAY_MODE_TITLES[player.playMode.value]}\r\n                  onClick={cyclePlayMode}>\r\n                  <SvgIcon\r\n                    name={resolvePlayModeIconName(player.playMode.value)}\r\n                    size={18}\r\n                  />\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"w-audio-player__icon-btn\"\r\n                  disabled={!hasTrack}\r\n                  onClick={() => player.prev()}\r\n                  title=\"上一首\">\r\n                  <SvgIcon name=\"prev\" size={22} />\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"w-audio-player__play-btn\"\r\n                  disabled={!hasTrack}\r\n                  onClick={() => player.togglePlay()}\r\n                  title={player.isPlaying.value ? '暂停' : '播放'}>\r\n                  <SvgIcon\r\n                    name={player.isPlaying.value ? 'pause' : 'play'}\r\n                    size={18}\r\n                  />\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"w-audio-player__icon-btn\"\r\n                  disabled={!hasTrack}\r\n                  onClick={() => player.next()}\r\n                  title=\"下一首\">\r\n                  <SvgIcon name=\"next\" size={22} />\r\n                </button>\r\n              </div>\r\n\r\n              <div class=\"w-audio-player__right\">\r\n                <div class=\"w-audio-player__time\">\r\n                  <span>{player.formattedDisplayCurrentTime.value}</span>\r\n                  <span class=\"w-audio-player__time-sep\">/</span>\r\n                  <span>{player.formattedDuration.value}</span>\r\n                </div>\r\n                <div class=\"w-audio-player__volume\">\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"w-audio-player__icon-btn w-audio-player__icon-btn--sm\"\r\n                    onClick={() => player.toggleMute()}\r\n                    title={player.isMuted.value ? '取消静音' : '静音'}>\r\n                    <SvgIcon name={muted ? 'volume-off' : 'volume'} size={16} />\r\n                  </button>\r\n                  <Progress\r\n                    class=\"w-audio-player__volume-progress\"\r\n                    modelValue={player.volumePercent.value}\r\n                    showThumb={false}\r\n                    size={30}\r\n                    onUpdate:modelValue={(value: number) => {\r\n                      player.setVolumeByPercent(value)\r\n                    }}\r\n                  />\r\n                </div>\r\n\r\n                <Layer\r\n                  show={playlistExpanded.value}\r\n                  nearby={props.nearby}\r\n                  placement=\"top-end\"\r\n                  trigger=\"click\"\r\n                  gap={10}\r\n                  hasArrow={false}\r\n                  immediate\r\n                  adjustPosition=\"auto\"\r\n                  layerClass=\"w-audio-player__playlist-layer\"\r\n                  layerCssVar={{\r\n                    '--_layer-background-color': '#2a2a2a',\r\n                    '--_layer-border-color': '#3a3a3a',\r\n                    '--_layer-color': '#eaeaea',\r\n                  }}\r\n                  onUpdate:show={(visible: boolean) => {\r\n                    playlistExpanded.value = visible\r\n                  }}\r\n                  onAfter-enter={() => {\r\n                    scrollActiveTrackIntoView()\r\n                  }}\r\n                  v-slots={{\r\n                    trigger: () => (\r\n                      <button\r\n                        type=\"button\"\r\n                        class={[\r\n                          'w-audio-player__icon-btn',\r\n                          'w-audio-player__playlist-btn',\r\n                          {\r\n                            'w-audio-player__icon-btn--active':\r\n                              playlistExpanded.value,\r\n                          },\r\n                        ]}\r\n                        title={\r\n                          playlistExpanded.value\r\n                            ? '收起播放列表'\r\n                            : '打开播放列表'\r\n                        }>\r\n                        <SvgIcon name=\"playlist\" size={18} />\r\n                        <span class=\"w-audio-player__playlist-badge\">\r\n                          {trackCount.value}\r\n                        </span>\r\n                      </button>\r\n                    ),\r\n                    default: () => renderPlaylistPanel(),\r\n                  }}\r\n                />\r\n              </div>\r\n            </div>\r\n\r\n            {player.errorMessage.value && (\r\n              <div class=\"w-audio-player__error\">\r\n                {player.errorMessage.value}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      )\r\n    }\r\n  },\r\n})\r\n"],"mappings":"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"}

package/dist/components/audioPlayer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './AudioPlayer';
+export type { AudioPlayMode, AudioPlaylist, AudioTrack, } from './AudioPlayer';

package/dist/components/audioPlayer/style/index.css

@@ -0,0 +1 @@
+@import '../../../theme/tokens/components/audioPlayer.css';

package/dist/components/btn/Btn.d.ts

@@ -0,0 +1,45 @@
+import { BtnMode, BtnType } from '../../config/types';
+import { CssVars } from '../../util';
+import { BtnHtmlType, BtnSize } from './context';
+export type { BtnSize, BtnHtmlType, BtnGroupContext } from './context';
+export type { BtnGlobalConfig } from './config';
+export { BTN_GROUP_KEY } from './context';
+export { BTN_FALLBACK } from './config';
+export type BtnSlots = {
+    default?: () => any;
+    /** loading 时左侧指示器，默认内置转圈 */
+    loading?: () => any;
+};
+export type BtnProps = {
+    tag?: keyof HTMLElementTagNameMap;
+    htmlType?: BtnHtmlType;
+    type?: BtnType;
+    mode?: BtnMode;
+    size?: BtnSize;
+    color?: string;
+    block?: boolean;
+    capsule?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    text?: string | number;
+    sleep?: boolean | number;
+    /** 实例 CSS 变量（如 `--w-prop-btn-bg-color`） */
+    cssVars?: CssVars;
+};
+/**
+ * 运行时靠 attrs 透传到根节点；不声明 click emit，onClick 等走原生 fallthrough。
+ * TSX 需在 $props 上并上原生属性，否则 onClick / class 等会在类型上被判为不存在。
+ * tag 可为 a 等，故并上常用锚点属性（href / target / rel）。
+ */
+export type BtnJSXProps = BtnProps & Omit<JSX.IntrinsicElements['button'], keyof BtnProps | 'ref'> & Partial<Pick<JSX.IntrinsicElements['a'], 'href' | 'target' | 'rel' | 'download'>> & {
+    'v-slots'?: BtnSlots;
+    vSlots?: BtnSlots;
+};
+export type BtnComponent = {
+    new (): {
+        $props: BtnJSXProps;
+    };
+};
+declare const Btn: BtnComponent;
+export type BtnInstance = InstanceType<BtnComponent>;
+export default Btn;

package/dist/components/btn/Btn.js

@@ -0,0 +1,165 @@
+import useComponentConfig from "../../use/useComponentConfig.js";
+import { isBoolean, isNumber } from "../../util/tools.js";
+import { propColorToCssVars, propSizeToCssVars, toCssVarsStyle } from "../../util/cssVars.js";
+import { BTN_GROUP_KEY } from "./context.js";
+import { BTN_FALLBACK } from "./config.js";
+import { Transition, computed, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, onUnmounted, ref } from "vue";
+//#region components/btn/Btn.tsx
+var Btn = /* @__PURE__ */ defineComponent({
+	name: "Btn",
+	inheritAttrs: false,
+	props: {
+		tag: {
+			type: String,
+			default: void 0
+		},
+		htmlType: {
+			type: String,
+			default: void 0
+		},
+		type: {
+			type: String,
+			default: void 0
+		},
+		mode: {
+			type: String,
+			default: void 0
+		},
+		size: {
+			type: Number,
+			default: void 0
+		},
+		/** 品牌主色 → `--w-prop-btn-color`（prop > `--w-btn-color` > `--w-color`） */
+		color: {
+			type: String,
+			default: void 0
+		},
+		/** 实例 CSS 变量（如 `--w-prop-btn-bg-color`） */
+		cssVars: {
+			type: Object,
+			default: void 0
+		},
+		block: {
+			type: Boolean,
+			default: void 0
+		},
+		capsule: {
+			type: Boolean,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			default: void 0
+		},
+		text: {
+			type: [String, Number],
+			default: void 0
+		},
+		sleep: {
+			type: [Boolean, Number],
+			default: void 0
+		}
+	},
+	slots: Object,
+	setup(props, { slots, attrs }) {
+		const group = inject(BTN_GROUP_KEY, void 0);
+		const cfg = useComponentConfig("Btn", props, BTN_FALLBACK);
+		const cooling = ref(false);
+		let sleepTimer;
+		const btnType = computed(() => props.type ?? group?.type ?? cfg.value.type);
+		const btnMode = computed(() => props.mode ?? group?.mode ?? cfg.value.mode);
+		const btnSize = computed(() => props.size ?? group?.size ?? cfg.value.size);
+		const btnColor = computed(() => props.color ?? group?.color ?? cfg.value.color);
+		const block = computed(() => props.block ?? cfg.value.block);
+		const capsule = computed(() => props.capsule ?? cfg.value.capsule);
+		const disabled = computed(() => props.disabled ?? cfg.value.disabled);
+		const loading = computed(() => props.loading ?? cfg.value.loading);
+		const htmlType = computed(() => props.htmlType ?? cfg.value.htmlType);
+		const tagName = computed(() => props.tag ?? cfg.value.tag);
+		const sleep = computed(() => props.sleep ?? cfg.value.sleep);
+		const text = computed(() => props.text ?? cfg.value.text);
+		const sleepMs = computed(() => {
+			const s = sleep.value;
+			if (!s) return 0;
+			if (isBoolean(s)) return 500;
+			if (isNumber(s)) return Math.max(0, s);
+			return 0;
+		});
+		const inactive = computed(() => disabled.value || loading.value || cooling.value);
+		const klass = computed(() => ["w-btn", {
+			"w-btn-gap": !group,
+			"w-btn-capsule": capsule.value,
+			"w-btn-block": block.value,
+			"w-btn-disabled": disabled.value,
+			"w-btn-loading": loading.value,
+			"w-btn-cooling": cooling.value,
+			[`w-btn-${btnType.value}`]: !!btnType.value,
+			[`w-btn-mode-${btnMode.value}`]: !!btnMode.value
+		}]);
+		const tokenStyle = computed(() => toCssVarsStyle({
+			...propSizeToCssVars("btn", btnSize.value),
+			...propColorToCssVars("btn", btnColor.value),
+			...props.cssVars
+		}));
+		function clearSleep() {
+			if (sleepTimer !== void 0) {
+				clearTimeout(sleepTimer);
+				sleepTimer = void 0;
+			}
+			cooling.value = false;
+		}
+		function invokeAttrClick(handler, e) {
+			if (!handler) return;
+			if (Array.isArray(handler)) for (const fn of handler) fn(e);
+			else handler(e);
+		}
+		function onClick(e) {
+			if (inactive.value) {
+				e.preventDefault();
+				e.stopPropagation();
+				return;
+			}
+			invokeAttrClick(attrs.onClick, e);
+			const ms = sleepMs.value;
+			if (ms > 0) {
+				cooling.value = true;
+				sleepTimer = setTimeout(() => {
+					cooling.value = false;
+					sleepTimer = void 0;
+				}, ms);
+			}
+		}
+		onUnmounted(clearSleep);
+		return () => {
+			const Tag = tagName.value;
+			const { onClick: _attrsClick, ...restAttrs } = attrs;
+			const rootProps = mergeProps({
+				class: normalizeClass([klass.value, attrs.class]),
+				style: normalizeStyle([tokenStyle.value, attrs.style]),
+				disabled: Tag === "button" ? disabled.value || loading.value : void 0,
+				type: Tag === "button" ? htmlType.value : void 0,
+				"aria-disabled": inactive.value || void 0,
+				"aria-busy": loading.value || void 0,
+				onClick
+			}, restAttrs);
+			return createVNode(Tag, rootProps, { default: () => [createVNode(Transition, {
+				"name": "w-btn-loading",
+				"appear": true
+			}, { default: () => [loading.value ? createVNode("span", {
+				"class": "w-btn-loading-wrap",
+				"key": "loading"
+			}, [slots.loading?.() || createVNode("span", {
+				"class": "w-btn-spinner",
+				"aria-hidden": "true"
+			}, null)]) : null] }), createVNode("span", { "class": "w-btn-content" }, [slots.default?.() || text.value])] });
+		};
+	}
+});
+//#endregion
+export { Btn as default };
+
+//# sourceMappingURL=Btn.js.map