@robot-admin/naive-ui-components 0.6.10 → 0.6.12

package/dist/C_AudioPlayer-CXl4yP_m.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_AudioPlayer-CXl4yP_m.css","names":[],"sources":["../src/components/C_AudioPlayer/index.vue?vue&type=style&index=0&scoped=16f18960&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//**\n * C_AudioPlayer — 音频播放器样式\n */\n.c-audio-player[data-v-16f18960] {\n  --ap-bg: var(--card-color);\n  --ap-border: var(--border-color);\n  --ap-accent: var(--primary-color);\n  --ap-text: var(--text-color-1);\n  --ap-text-sub: var(--text-color-3);\n  --ap-progress-bg: color-mix(in srgb, var(--primary-color) 15%, var(--border-color));\n  --ap-progress-fill: var(--primary-color);\n  display: flex;\n  flex-direction: column;\n  border-radius: 12px;\n  border: 1px solid var(--ap-border);\n  background: var(--ap-bg);\n  overflow: hidden;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);\n  /* ======================== Now Playing ======================== */\n  /* ======================== Progress ======================== */\n  /* ======================== Controls ======================== */\n  /* ======================== Volume ======================== */\n  /* ======================== Playlist ======================== */\n  /* ======================== Minimal Theme ======================== */\n}\n.c-audio-player__now-playing[data-v-16f18960] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 20px;\n}\n.c-audio-player__cover[data-v-16f18960] {\n  flex-shrink: 0;\n  width: 72px;\n  height: 72px;\n  border-radius: 10px;\n  overflow: hidden;\n  background: color-mix(in srgb, var(--ap-accent) 10%, var(--ap-bg));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n.c-audio-player__cover img[data-v-16f18960] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.c-audio-player__cover-placeholder[data-v-16f18960] {\n  font-size: 32px;\n  color: var(--ap-accent);\n  opacity: 0.5;\n}\n.c-audio-player__info[data-v-16f18960] {\n  flex: 1;\n  min-width: 0;\n}\n.c-audio-player__title[data-v-16f18960] {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--ap-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.c-audio-player__artist[data-v-16f18960] {\n  font-size: 12px;\n  color: var(--ap-text-sub);\n  margin-top: 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.c-audio-player__progress[data-v-16f18960] {\n  padding: 0 20px;\n}\n.c-audio-player__progress-bar[data-v-16f18960] {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  border-radius: 3px;\n  background: var(--ap-progress-bg);\n  cursor: pointer;\n  transition: height 0.15s;\n}\n.c-audio-player__progress-bar[data-v-16f18960]:hover {\n  height: 8px;\n}\n.c-audio-player__progress-fill[data-v-16f18960] {\n  height: 100%;\n  border-radius: 3px;\n  background: var(--ap-progress-fill);\n  position: relative;\n  transition: width 0.1s linear;\n}\n.c-audio-player__progress-fill[data-v-16f18960]::after {\n  content: \"\";\n  position: absolute;\n  right: -5px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--ap-accent);\n  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n.c-audio-player__progress-bar:hover .c-audio-player__progress-fill[data-v-16f18960]::after {\n  opacity: 1;\n}\n.c-audio-player__time[data-v-16f18960] {\n  display: flex;\n  justify-content: space-between;\n  font-size: 11px;\n  color: var(--ap-text-sub);\n  margin-top: 4px;\n  padding-bottom: 4px;\n}\n.c-audio-player__controls[data-v-16f18960] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 20px;\n}\n.c-audio-player__ctrl-btn[data-v-16f18960] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--ap-text);\n  cursor: pointer;\n  border-radius: 50%;\n  transition: background 0.2s, color 0.2s, transform 0.15s;\n}\n.c-audio-player__ctrl-btn[data-v-16f18960]:hover {\n  color: var(--ap-accent);\n  background: color-mix(in srgb, var(--ap-accent) 10%, transparent);\n}\n.c-audio-player__ctrl-btn[data-v-16f18960]:active {\n  transform: scale(0.92);\n}\n.c-audio-player__ctrl-btn.is-mode[data-v-16f18960] {\n  font-size: 18px;\n  width: 34px;\n  height: 34px;\n}\n.c-audio-player__ctrl-btn.is-skip[data-v-16f18960] {\n  font-size: 22px;\n  width: 38px;\n  height: 38px;\n}\n.c-audio-player__ctrl-btn.is-play[data-v-16f18960] {\n  font-size: 28px;\n  width: 48px;\n  height: 48px;\n  background: var(--ap-accent);\n  color: #fff;\n}\n.c-audio-player__ctrl-btn.is-play[data-v-16f18960]:hover {\n  background: color-mix(in srgb, var(--ap-accent) 85%, #000);\n  color: #fff;\n  box-shadow: 0 2px 10px color-mix(in srgb, var(--ap-accent) 35%, transparent);\n}\n.c-audio-player__volume[data-v-16f18960] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 20px 12px;\n  justify-content: flex-end;\n}\n.c-audio-player__volume-icon[data-v-16f18960] {\n  font-size: 18px;\n  color: var(--ap-text-sub);\n  cursor: pointer;\n}\n.c-audio-player__volume-icon[data-v-16f18960]:hover {\n  color: var(--ap-accent);\n}\n.c-audio-player__volume-slider[data-v-16f18960] {\n  width: 100px;\n}\n.c-audio-player__playlist[data-v-16f18960] {\n  border-top: 1px solid var(--ap-border);\n  max-height: 260px;\n  overflow-y: auto;\n}\n.c-audio-player__playlist-header[data-v-16f18960] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 20px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--ap-text-sub);\n  background: color-mix(in srgb, var(--ap-accent) 4%, var(--ap-bg));\n  border-bottom: 1px solid var(--ap-border);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n.c-audio-player__track[data-v-16f18960] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 20px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.c-audio-player__track[data-v-16f18960]:hover {\n  background: color-mix(in srgb, var(--ap-accent) 6%, var(--ap-bg));\n}\n.c-audio-player__track.is-active[data-v-16f18960] {\n  background: color-mix(in srgb, var(--ap-accent) 10%, var(--ap-bg));\n}\n.c-audio-player__track.is-active .c-audio-player__track-title[data-v-16f18960] {\n  color: var(--ap-accent);\n  font-weight: 600;\n}\n.c-audio-player__track-index[data-v-16f18960] {\n  font-size: 12px;\n  width: 20px;\n  text-align: center;\n  color: var(--ap-text-sub);\n  flex-shrink: 0;\n}\n.c-audio-player__track-info[data-v-16f18960] {\n  flex: 1;\n  min-width: 0;\n}\n.c-audio-player__track-title[data-v-16f18960] {\n  font-size: 13px;\n  color: var(--ap-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.c-audio-player__track-artist[data-v-16f18960] {\n  font-size: 11px;\n  color: var(--ap-text-sub);\n  margin-top: 1px;\n}\n.c-audio-player__track-duration[data-v-16f18960] {\n  font-size: 11px;\n  color: var(--ap-text-sub);\n  flex-shrink: 0;\n}\n.c-audio-player.is-minimal[data-v-16f18960] {\n  border-radius: 99px;\n  padding: 6px 16px;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);\n}\n.c-audio-player.is-minimal .c-audio-player__now-playing[data-v-16f18960] {\n  padding: 0;\n  gap: 10px;\n}\n.c-audio-player.is-minimal .c-audio-player__cover[data-v-16f18960] {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n}\n.c-audio-player.is-minimal .c-audio-player__progress[data-v-16f18960],\n.c-audio-player.is-minimal .c-audio-player__playlist[data-v-16f18960],\n.c-audio-player.is-minimal .c-audio-player__volume[data-v-16f18960] {\n  display: none;\n}\n.c-audio-player.is-minimal .c-audio-player__controls[data-v-16f18960] {\n  padding: 4px 0;\n  gap: 2px;\n}\n.c-audio-player.is-minimal .c-audio-player__ctrl-btn.is-play[data-v-16f18960] {\n  width: 34px;\n  height: 34px;\n  font-size: 20px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/C_AudioPlayer-CcBtt71m.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_AudioPlayer-CcBtt71m.css","names":[],"sources":["../src/components/C_AudioPlayer/index.vue?vue&type=style&index=0&scoped=16f18960&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//**\n * C_AudioPlayer — 音频播放器样式\n */\n.c-audio-player[data-v-16f18960] {\n  --ap-bg: var(--card-color);\n  --ap-border: var(--border-color);\n  --ap-accent: var(--primary-color);\n  --ap-text: var(--text-color-1);\n  --ap-text-sub: var(--text-color-3);\n  --ap-progress-bg: color-mix(in srgb, var(--primary-color) 15%, var(--border-color));\n  --ap-progress-fill: var(--primary-color);\n  display: flex;\n  flex-direction: column;\n  border-radius: 12px;\n  border: 1px solid var(--ap-border);\n  background: var(--ap-bg);\n  overflow: hidden;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);\n  /* ======================== Now Playing ======================== */\n  /* ======================== Progress ======================== */\n  /* ======================== Controls ======================== */\n  /* ======================== Volume ======================== */\n  /* ======================== Playlist ======================== */\n  /* ======================== Minimal Theme ======================== */\n}\n.c-audio-player__now-playing[data-v-16f18960] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 20px;\n}\n.c-audio-player__cover[data-v-16f18960] {\n  flex-shrink: 0;\n  width: 72px;\n  height: 72px;\n  border-radius: 10px;\n  overflow: hidden;\n  background: color-mix(in srgb, var(--ap-accent) 10%, var(--ap-bg));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n.c-audio-player__cover img[data-v-16f18960] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.c-audio-player__cover-placeholder[data-v-16f18960] {\n  font-size: 32px;\n  color: var(--ap-accent);\n  opacity: 0.5;\n}\n.c-audio-player__info[data-v-16f18960] {\n  flex: 1;\n  min-width: 0;\n}\n.c-audio-player__title[data-v-16f18960] {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--ap-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.c-audio-player__artist[data-v-16f18960] {\n  font-size: 12px;\n  color: var(--ap-text-sub);\n  margin-top: 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.c-audio-player__progress[data-v-16f18960] {\n  padding: 0 20px;\n}\n.c-audio-player__progress-bar[data-v-16f18960] {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  border-radius: 3px;\n  background: var(--ap-progress-bg);\n  cursor: pointer;\n  transition: height 0.15s;\n}\n.c-audio-player__progress-bar[data-v-16f18960]:hover {\n  height: 8px;\n}\n.c-audio-player__progress-fill[data-v-16f18960] {\n  height: 100%;\n  border-radius: 3px;\n  background: var(--ap-progress-fill);\n  position: relative;\n  transition: width 0.1s linear;\n}\n.c-audio-player__progress-fill[data-v-16f18960]::after {\n  content: \"\";\n  position: absolute;\n  right: -5px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--ap-accent);\n  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n.c-audio-player__progress-bar:hover .c-audio-player__progress-fill[data-v-16f18960]::after {\n  opacity: 1;\n}\n.c-audio-player__time[data-v-16f18960] {\n  display: flex;\n  justify-content: space-between;\n  font-size: 11px;\n  color: var(--ap-text-sub);\n  margin-top: 4px;\n  padding-bottom: 4px;\n}\n.c-audio-player__controls[data-v-16f18960] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 20px;\n}\n.c-audio-player__ctrl-btn[data-v-16f18960] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--ap-text);\n  cursor: pointer;\n  border-radius: 50%;\n  transition: background 0.2s, color 0.2s, transform 0.15s;\n}\n.c-audio-player__ctrl-btn[data-v-16f18960]:hover {\n  color: var(--ap-accent);\n  background: color-mix(in srgb, var(--ap-accent) 10%, transparent);\n}\n.c-audio-player__ctrl-btn[data-v-16f18960]:active {\n  transform: scale(0.92);\n}\n.c-audio-player__ctrl-btn.is-mode[data-v-16f18960] {\n  font-size: 18px;\n  width: 34px;\n  height: 34px;\n}\n.c-audio-player__ctrl-btn.is-skip[data-v-16f18960] {\n  font-size: 22px;\n  width: 38px;\n  height: 38px;\n}\n.c-audio-player__ctrl-btn.is-play[data-v-16f18960] {\n  font-size: 28px;\n  width: 48px;\n  height: 48px;\n  background: var(--ap-accent);\n  color: #fff;\n}\n.c-audio-player__ctrl-btn.is-play[data-v-16f18960]:hover {\n  background: color-mix(in srgb, var(--ap-accent) 85%, #000);\n  color: #fff;\n  box-shadow: 0 2px 10px color-mix(in srgb, var(--ap-accent) 35%, transparent);\n}\n.c-audio-player__volume[data-v-16f18960] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 20px 12px;\n  justify-content: flex-end;\n}\n.c-audio-player__volume-icon[data-v-16f18960] {\n  font-size: 18px;\n  color: var(--ap-text-sub);\n  cursor: pointer;\n}\n.c-audio-player__volume-icon[data-v-16f18960]:hover {\n  color: var(--ap-accent);\n}\n.c-audio-player__volume-slider[data-v-16f18960] {\n  width: 100px;\n}\n.c-audio-player__playlist[data-v-16f18960] {\n  border-top: 1px solid var(--ap-border);\n  max-height: 260px;\n  overflow-y: auto;\n}\n.c-audio-player__playlist-header[data-v-16f18960] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 20px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--ap-text-sub);\n  background: color-mix(in srgb, var(--ap-accent) 4%, var(--ap-bg));\n  border-bottom: 1px solid var(--ap-border);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n.c-audio-player__track[data-v-16f18960] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 20px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.c-audio-player__track[data-v-16f18960]:hover {\n  background: color-mix(in srgb, var(--ap-accent) 6%, var(--ap-bg));\n}\n.c-audio-player__track.is-active[data-v-16f18960] {\n  background: color-mix(in srgb, var(--ap-accent) 10%, var(--ap-bg));\n}\n.c-audio-player__track.is-active .c-audio-player__track-title[data-v-16f18960] {\n  color: var(--ap-accent);\n  font-weight: 600;\n}\n.c-audio-player__track-index[data-v-16f18960] {\n  font-size: 12px;\n  width: 20px;\n  text-align: center;\n  color: var(--ap-text-sub);\n  flex-shrink: 0;\n}\n.c-audio-player__track-info[data-v-16f18960] {\n  flex: 1;\n  min-width: 0;\n}\n.c-audio-player__track-title[data-v-16f18960] {\n  font-size: 13px;\n  color: var(--ap-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.c-audio-player__track-artist[data-v-16f18960] {\n  font-size: 11px;\n  color: var(--ap-text-sub);\n  margin-top: 1px;\n}\n.c-audio-player__track-duration[data-v-16f18960] {\n  font-size: 11px;\n  color: var(--ap-text-sub);\n  flex-shrink: 0;\n}\n.c-audio-player.is-minimal[data-v-16f18960] {\n  border-radius: 99px;\n  padding: 6px 16px;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);\n}\n.c-audio-player.is-minimal .c-audio-player__now-playing[data-v-16f18960] {\n  padding: 0;\n  gap: 10px;\n}\n.c-audio-player.is-minimal .c-audio-player__cover[data-v-16f18960] {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n}\n.c-audio-player.is-minimal .c-audio-player__progress[data-v-16f18960],\n.c-audio-player.is-minimal .c-audio-player__playlist[data-v-16f18960],\n.c-audio-player.is-minimal .c-audio-player__volume[data-v-16f18960] {\n  display: none;\n}\n.c-audio-player.is-minimal .c-audio-player__controls[data-v-16f18960] {\n  padding: 4px 0;\n  gap: 2px;\n}\n.c-audio-player.is-minimal .c-audio-player__ctrl-btn.is-play[data-v-16f18960] {\n  width: 34px;\n  height: 34px;\n  font-size: 20px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/C_AudioPlayer.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./C_Icon.js`);const e=require(`./C_AudioPlayer.js`);exports.C_AudioPlayer=e.t,exports.DEFAULT_AUDIO_PLAYER_PROPS=e.n,exports.MODE_ICON_MAP=e.r,exports.formatTime=e.i;

package/dist/C_AudioPlayer.css

@@ -0,0 +1,283 @@
+/* unplugin-vue-components disabled *//**
+ * C_AudioPlayer — 音频播放器样式
+ */
+.c-audio-player[data-v-16f18960] {
+  --ap-bg: var(--card-color);
+  --ap-border: var(--border-color);
+  --ap-accent: var(--primary-color);
+  --ap-text: var(--text-color-1);
+  --ap-text-sub: var(--text-color-3);
+  --ap-progress-bg: color-mix(in srgb, var(--primary-color) 15%, var(--border-color));
+  --ap-progress-fill: var(--primary-color);
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  border: 1px solid var(--ap-border);
+  background: var(--ap-bg);
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  /* ======================== Now Playing ======================== */
+  /* ======================== Progress ======================== */
+  /* ======================== Controls ======================== */
+  /* ======================== Volume ======================== */
+  /* ======================== Playlist ======================== */
+  /* ======================== Minimal Theme ======================== */
+}
+.c-audio-player__now-playing[data-v-16f18960] {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+}
+.c-audio-player__cover[data-v-16f18960] {
+  flex-shrink: 0;
+  width: 72px;
+  height: 72px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--ap-accent) 10%, var(--ap-bg));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+.c-audio-player__cover img[data-v-16f18960] {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.c-audio-player__cover-placeholder[data-v-16f18960] {
+  font-size: 32px;
+  color: var(--ap-accent);
+  opacity: 0.5;
+}
+.c-audio-player__info[data-v-16f18960] {
+  flex: 1;
+  min-width: 0;
+}
+.c-audio-player__title[data-v-16f18960] {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--ap-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.c-audio-player__artist[data-v-16f18960] {
+  font-size: 12px;
+  color: var(--ap-text-sub);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.c-audio-player__progress[data-v-16f18960] {
+  padding: 0 20px;
+}
+.c-audio-player__progress-bar[data-v-16f18960] {
+  position: relative;
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--ap-progress-bg);
+  cursor: pointer;
+  transition: height 0.15s;
+}
+.c-audio-player__progress-bar[data-v-16f18960]:hover {
+  height: 8px;
+}
+.c-audio-player__progress-fill[data-v-16f18960] {
+  height: 100%;
+  border-radius: 3px;
+  background: var(--ap-progress-fill);
+  position: relative;
+  transition: width 0.1s linear;
+}
+.c-audio-player__progress-fill[data-v-16f18960]::after {
+  content: "";
+  position: absolute;
+  right: -5px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--ap-accent);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.c-audio-player__progress-bar:hover .c-audio-player__progress-fill[data-v-16f18960]::after {
+  opacity: 1;
+}
+.c-audio-player__time[data-v-16f18960] {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: var(--ap-text-sub);
+  margin-top: 4px;
+  padding-bottom: 4px;
+}
+.c-audio-player__controls[data-v-16f18960] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 20px;
+}
+.c-audio-player__ctrl-btn[data-v-16f18960] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--ap-text);
+  cursor: pointer;
+  border-radius: 50%;
+  transition: background 0.2s, color 0.2s, transform 0.15s;
+}
+.c-audio-player__ctrl-btn[data-v-16f18960]:hover {
+  color: var(--ap-accent);
+  background: color-mix(in srgb, var(--ap-accent) 10%, transparent);
+}
+.c-audio-player__ctrl-btn[data-v-16f18960]:active {
+  transform: scale(0.92);
+}
+.c-audio-player__ctrl-btn.is-mode[data-v-16f18960] {
+  font-size: 18px;
+  width: 34px;
+  height: 34px;
+}
+.c-audio-player__ctrl-btn.is-skip[data-v-16f18960] {
+  font-size: 22px;
+  width: 38px;
+  height: 38px;
+}
+.c-audio-player__ctrl-btn.is-play[data-v-16f18960] {
+  font-size: 28px;
+  width: 48px;
+  height: 48px;
+  background: var(--ap-accent);
+  color: #fff;
+}
+.c-audio-player__ctrl-btn.is-play[data-v-16f18960]:hover {
+  background: color-mix(in srgb, var(--ap-accent) 85%, #000);
+  color: #fff;
+  box-shadow: 0 2px 10px color-mix(in srgb, var(--ap-accent) 35%, transparent);
+}
+.c-audio-player__volume[data-v-16f18960] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 20px 12px;
+  justify-content: flex-end;
+}
+.c-audio-player__volume-icon[data-v-16f18960] {
+  font-size: 18px;
+  color: var(--ap-text-sub);
+  cursor: pointer;
+}
+.c-audio-player__volume-icon[data-v-16f18960]:hover {
+  color: var(--ap-accent);
+}
+.c-audio-player__volume-slider[data-v-16f18960] {
+  width: 100px;
+}
+.c-audio-player__playlist[data-v-16f18960] {
+  border-top: 1px solid var(--ap-border);
+  max-height: 260px;
+  overflow-y: auto;
+}
+.c-audio-player__playlist-header[data-v-16f18960] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ap-text-sub);
+  background: color-mix(in srgb, var(--ap-accent) 4%, var(--ap-bg));
+  border-bottom: 1px solid var(--ap-border);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.c-audio-player__track[data-v-16f18960] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 20px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.c-audio-player__track[data-v-16f18960]:hover {
+  background: color-mix(in srgb, var(--ap-accent) 6%, var(--ap-bg));
+}
+.c-audio-player__track.is-active[data-v-16f18960] {
+  background: color-mix(in srgb, var(--ap-accent) 10%, var(--ap-bg));
+}
+.c-audio-player__track.is-active .c-audio-player__track-title[data-v-16f18960] {
+  color: var(--ap-accent);
+  font-weight: 600;
+}
+.c-audio-player__track-index[data-v-16f18960] {
+  font-size: 12px;
+  width: 20px;
+  text-align: center;
+  color: var(--ap-text-sub);
+  flex-shrink: 0;
+}
+.c-audio-player__track-info[data-v-16f18960] {
+  flex: 1;
+  min-width: 0;
+}
+.c-audio-player__track-title[data-v-16f18960] {
+  font-size: 13px;
+  color: var(--ap-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.c-audio-player__track-artist[data-v-16f18960] {
+  font-size: 11px;
+  color: var(--ap-text-sub);
+  margin-top: 1px;
+}
+.c-audio-player__track-duration[data-v-16f18960] {
+  font-size: 11px;
+  color: var(--ap-text-sub);
+  flex-shrink: 0;
+}
+.c-audio-player.is-minimal[data-v-16f18960] {
+  border-radius: 99px;
+  padding: 6px 16px;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
+}
+.c-audio-player.is-minimal .c-audio-player__now-playing[data-v-16f18960] {
+  padding: 0;
+  gap: 10px;
+}
+.c-audio-player.is-minimal .c-audio-player__cover[data-v-16f18960] {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+}
+.c-audio-player.is-minimal .c-audio-player__progress[data-v-16f18960],
+.c-audio-player.is-minimal .c-audio-player__playlist[data-v-16f18960],
+.c-audio-player.is-minimal .c-audio-player__volume[data-v-16f18960] {
+  display: none;
+}
+.c-audio-player.is-minimal .c-audio-player__controls[data-v-16f18960] {
+  padding: 4px 0;
+  gap: 2px;
+}
+.c-audio-player.is-minimal .c-audio-player__ctrl-btn.is-play[data-v-16f18960] {
+  width: 34px;
+  height: 34px;
+  font-size: 20px;
+}
+
+/*# sourceMappingURL=C_AudioPlayer-CXl4yP_m.css.map*/

package/dist/C_AudioPlayer.d.cts

@@ -0,0 +1,2 @@
+import { a as MODE_ICON_MAP, i as DEFAULT_AUDIO_PLAYER_PROPS, n as AudioPlayerProps, o as formatTime, r as AudioTrack, t as _default } from "./index2.vue.js";
+export { type AudioPlayerProps, type AudioTrack, _default as C_AudioPlayer, DEFAULT_AUDIO_PLAYER_PROPS, MODE_ICON_MAP, formatTime };

package/dist/C_AudioPlayer.d.ts

@@ -0,0 +1,2 @@
+import { a as MODE_ICON_MAP, i as DEFAULT_AUDIO_PLAYER_PROPS, n as AudioPlayerProps, o as formatTime, r as AudioTrack, t as _default } from "./index2.vue.js";
+export { type AudioPlayerProps, type AudioTrack, _default as C_AudioPlayer, DEFAULT_AUDIO_PLAYER_PROPS, MODE_ICON_MAP, formatTime };

package/dist/C_AudioPlayer.js

@@ -0,0 +1 @@
+import"./C_Icon2.js";import{i as e,n as t,r as n,t as r}from"./C_AudioPlayer2.js";export{r as C_AudioPlayer,t as DEFAULT_AUDIO_PLAYER_PROPS,n as MODE_ICON_MAP,e as formatTime};

package/dist/C_AudioPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_AudioPlayer.js","names":["theme","showCover","showPlaylist","tracks"],"sources":["../src/components/C_AudioPlayer/types.ts","../src/components/C_AudioPlayer/index.vue","../src/components/C_AudioPlayer/index.vue","../src/components/C_AudioPlayer/index.vue"],"sourcesContent":["/**\r\n * @Description: Audio player component type definitions\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n */\r\n\r\n/** Single audio track */\r\nexport interface AudioTrack {\r\n  /** Unique identifier */\r\n  id: string | number\r\n  /** Track title */\r\n  title: string\r\n  /** Artist / author */\r\n  artist?: string\r\n  /** Audio source URL */\r\n  src: string\r\n  /** Cover image URL */\r\n  cover?: string\r\n  /** Duration in seconds (optional, for static display) */\r\n  duration?: number\r\n  /** Extra data */\r\n  extra?: Record<string, unknown>\r\n}\r\n\r\n/** Component props */\r\nexport interface AudioPlayerProps {\r\n  /** Playlist */\r\n  tracks: AudioTrack[]\r\n  /** Initial active index */\r\n  initialIndex?: number\r\n  /** Whether to show the playlist panel */\r\n  showPlaylist?: boolean\r\n  /** Whether to show the cover art */\r\n  showCover?: boolean\r\n  /** Whether to auto-play on mount */\r\n  autoplay?: boolean\r\n  /** Playback mode */\r\n  mode?: 'list' | 'loop' | 'single' | 'shuffle'\r\n  /** Theme appearance */\r\n  theme?: 'default' | 'minimal'\r\n}\r\n\r\n/** Default props */\r\nexport const DEFAULT_AUDIO_PLAYER_PROPS: Partial<AudioPlayerProps> = {\r\n  initialIndex: 0,\r\n  showPlaylist: true,\r\n  showCover: true,\r\n  autoplay: false,\r\n  mode: 'list',\r\n  theme: 'default',\r\n}\r\n\r\n/** Playback mode icon map */\r\nexport const MODE_ICON_MAP: Record<string, { icon: string; label: string }> = {\r\n  list: { icon: 'mdi:repeat', label: 'List Loop' },\r\n  loop: { icon: 'mdi:repeat-once', label: 'Single Loop' },\r\n  single: { icon: 'mdi:numeric-1-box', label: 'Play Once' },\r\n  shuffle: { icon: 'mdi:shuffle-variant', label: 'Shuffle' },\r\n}\r\n\r\n/** Format seconds to mm:ss */\r\nexport function formatTime(seconds: number): string {\r\n  if (!Number.isFinite(seconds) || seconds < 0) return '00:00'\r\n  const m = Math.floor(seconds / 60)\r\n  const s = Math.floor(seconds % 60)\r\n  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Description: 音频播放器组件\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-audio-player\"\r\n    :class=\"{ 'is-minimal': theme === 'minimal' }\"\r\n  >\r\n    <!-- ================ Now Playing ================ -->\r\n    <div class=\"c-audio-player__now-playing\">\r\n      <div\r\n        v-if=\"showCover\"\r\n        class=\"c-audio-player__cover\"\r\n      >\r\n        <img\r\n          v-if=\"currentTrack?.cover\"\r\n          :src=\"currentTrack.cover\"\r\n          :alt=\"currentTrack.title\"\r\n        />\r\n        <C_Icon\r\n          v-else\r\n          name=\"mdi:music-note\"\r\n          class=\"c-audio-player__cover-placeholder\"\r\n        />\r\n      </div>\r\n      <div class=\"c-audio-player__info\">\r\n        <div class=\"c-audio-player__title\">{{\r\n          currentTrack?.title ?? '未选择曲目'\r\n        }}</div>\r\n        <div\r\n          v-if=\"currentTrack?.artist\"\r\n          class=\"c-audio-player__artist\"\r\n        >\r\n          {{ currentTrack.artist }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ================ Progress ================ -->\r\n    <div\r\n      v-if=\"theme !== 'minimal'\"\r\n      class=\"c-audio-player__progress\"\r\n    >\r\n      <div\r\n        class=\"c-audio-player__progress-bar\"\r\n        @click=\"seekByClick\"\r\n      >\r\n        <div\r\n          class=\"c-audio-player__progress-fill\"\r\n          :style=\"{ width: `${progressPercent}%` }\"\r\n        />\r\n      </div>\r\n      <div class=\"c-audio-player__time\">\r\n        <span>{{ formatTime(currentTime) }}</span>\r\n        <span>{{ formatTime(totalDuration) }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ================ Controls ================ -->\r\n    <div class=\"c-audio-player__controls\">\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-mode\"\r\n        :title=\"currentModeLabel\"\r\n        @click=\"cycleMode\"\r\n      >\r\n        <C_Icon :name=\"currentModeIcon\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-skip\"\r\n        title=\"上一曲\"\r\n        @click=\"prev\"\r\n      >\r\n        <C_Icon name=\"mdi:skip-previous\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-play\"\r\n        :title=\"isPlaying ? '暂停' : '播放'\"\r\n        @click=\"togglePlay\"\r\n      >\r\n        <C_Icon :name=\"isPlaying ? 'mdi:pause' : 'mdi:play'\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-skip\"\r\n        title=\"下一曲\"\r\n        @click=\"next\"\r\n      >\r\n        <C_Icon name=\"mdi:skip-next\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-mode\"\r\n        title=\"播放列表\"\r\n        @click=\"playlistVisible = !playlistVisible\"\r\n      >\r\n        <C_Icon name=\"mdi:playlist-music\" />\r\n      </button>\r\n    </div>\r\n\r\n    <!-- ================ Volume ================ -->\r\n    <div\r\n      v-if=\"theme !== 'minimal'\"\r\n      class=\"c-audio-player__volume\"\r\n    >\r\n      <C_Icon\r\n        :name=\"volumeIcon\"\r\n        class=\"c-audio-player__volume-icon\"\r\n        @click=\"toggleMute\"\r\n      />\r\n      <NSlider\r\n        v-model:value=\"volume\"\r\n        :min=\"0\"\r\n        :max=\"100\"\r\n        :step=\"1\"\r\n        class=\"c-audio-player__volume-slider\"\r\n        @update:value=\"handleVolumeChange\"\r\n      />\r\n    </div>\r\n\r\n    <!-- ================ Playlist ================ -->\r\n    <div\r\n      v-if=\"showPlaylist && playlistVisible && theme !== 'minimal'\"\r\n      class=\"c-audio-player__playlist\"\r\n    >\r\n      <div class=\"c-audio-player__playlist-header\">\r\n        <span>播放列表</span>\r\n        <span>{{ tracks.length }} 首</span>\r\n      </div>\r\n      <div\r\n        v-for=\"(track, idx) in tracks\"\r\n        :key=\"track.id\"\r\n        class=\"c-audio-player__track\"\r\n        :class=\"{ 'is-active': idx === activeIndex }\"\r\n        @click=\"playTrack(idx)\"\r\n      >\r\n        <span class=\"c-audio-player__track-index\">\r\n          <C_Icon\r\n            v-if=\"idx === activeIndex && isPlaying\"\r\n            name=\"mdi:volume-high\"\r\n          />\r\n          <template v-else>{{ idx + 1 }}</template>\r\n        </span>\r\n        <div class=\"c-audio-player__track-info\">\r\n          <div class=\"c-audio-player__track-title\">{{ track.title }}</div>\r\n          <div\r\n            v-if=\"track.artist\"\r\n            class=\"c-audio-player__track-artist\"\r\n          >\r\n            {{ track.artist }}\r\n          </div>\r\n        </div>\r\n        <span\r\n          v-if=\"track.duration\"\r\n          class=\"c-audio-player__track-duration\"\r\n        >\r\n          {{ formatTime(track.duration) }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, onBeforeUnmount, ref, watch } from 'vue'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n  import {\r\n    DEFAULT_AUDIO_PLAYER_PROPS,\r\n    formatTime,\r\n    MODE_ICON_MAP,\r\n    type AudioPlayerProps,\r\n  } from './types'\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      tracks: AudioPlayerProps['tracks']\r\n      initialIndex?: number\r\n      showPlaylist?: boolean\r\n      showCover?: boolean\r\n      autoplay?: boolean\r\n      mode?: AudioPlayerProps['mode']\r\n      theme?: AudioPlayerProps['theme']\r\n    }>(),\r\n    {\r\n      initialIndex: DEFAULT_AUDIO_PLAYER_PROPS.initialIndex,\r\n      showPlaylist: DEFAULT_AUDIO_PLAYER_PROPS.showPlaylist,\r\n      showCover: true,\r\n      autoplay: DEFAULT_AUDIO_PLAYER_PROPS.autoplay,\r\n      mode: DEFAULT_AUDIO_PLAYER_PROPS.mode,\r\n      theme: DEFAULT_AUDIO_PLAYER_PROPS.theme,\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    play: [index: number]\r\n    pause: []\r\n    ended: [index: number]\r\n    modeChange: [mode: string]\r\n  }>()\r\n\r\n  // ==================== Audio Core ====================\r\n\r\n  let audio: HTMLAudioElement | null = null\r\n\r\n  const activeIndex = ref(props.initialIndex ?? 0)\r\n  const isPlaying = ref(false)\r\n  const currentTime = ref(0)\r\n  const totalDuration = ref(0)\r\n  const volume = ref(70)\r\n  const prevVolume = ref(70)\r\n  const playlistVisible = ref(props.showPlaylist)\r\n  const playMode = ref(props.mode ?? 'list')\r\n\r\n  const currentTrack = computed(() => props.tracks[activeIndex.value])\r\n\r\n  const progressPercent = computed(() => {\r\n    if (totalDuration.value === 0) return 0\r\n    return (currentTime.value / totalDuration.value) * 100\r\n  })\r\n\r\n  const volumeIcon = computed(() => {\r\n    if (volume.value === 0) return 'mdi:volume-off'\r\n    if (volume.value < 40) return 'mdi:volume-low'\r\n    if (volume.value < 70) return 'mdi:volume-medium'\r\n    return 'mdi:volume-high'\r\n  })\r\n\r\n  const currentModeIcon = computed(\r\n    () => MODE_ICON_MAP[playMode.value]?.icon ?? 'mdi:repeat'\r\n  )\r\n  const currentModeLabel = computed(\r\n    () => MODE_ICON_MAP[playMode.value]?.label ?? '循环'\r\n  )\r\n\r\n  /** 初始化音频实例 */\r\n  function initAudio() {\r\n    if (audio) {\r\n      audio.pause()\r\n      audio.removeEventListener('timeupdate', onTimeUpdate)\r\n      audio.removeEventListener('loadedmetadata', onMetaLoaded)\r\n      audio.removeEventListener('ended', onEnded)\r\n    }\r\n    const track = currentTrack.value\r\n    if (!track) return\r\n\r\n    audio = new Audio(track.src)\r\n    audio.volume = volume.value / 100\r\n    audio.addEventListener('timeupdate', onTimeUpdate)\r\n    audio.addEventListener('loadedmetadata', onMetaLoaded)\r\n    audio.addEventListener('ended', onEnded)\r\n  }\r\n\r\n  /** 播放进度更新回调 */\r\n  function onTimeUpdate() {\r\n    if (audio) currentTime.value = audio.currentTime\r\n  }\r\n\r\n  /** 音频元数据加载完成回调 */\r\n  function onMetaLoaded() {\r\n    if (audio) totalDuration.value = audio.duration\r\n  }\r\n\r\n  /** 播放结束回调，根据模式决定下一步 */\r\n  function onEnded() {\r\n    emit('ended', activeIndex.value)\r\n    switch (playMode.value) {\r\n      case 'loop':\r\n        audio?.play().catch(() => {})\r\n        break\r\n      case 'single':\r\n        isPlaying.value = false\r\n        break\r\n      case 'shuffle':\r\n        playTrack(Math.floor(Math.random() * props.tracks.length))\r\n        break\r\n      default: // list\r\n        if (activeIndex.value < props.tracks.length - 1) next()\r\n        else {\r\n          activeIndex.value = 0\r\n          initAudio()\r\n          audio?.play().catch(() => {})\r\n        }\r\n    }\r\n  }\r\n\r\n  /** 切换播放/暂停 */\r\n  function togglePlay() {\r\n    if (!audio) initAudio()\r\n    if (isPlaying.value) {\r\n      audio?.pause()\r\n      isPlaying.value = false\r\n      emit('pause')\r\n    } else {\r\n      audio?.play().catch(() => {})\r\n      isPlaying.value = true\r\n      emit('play', activeIndex.value)\r\n    }\r\n  }\r\n\r\n  /** 播放指定索引的曲目 */\r\n  function playTrack(idx: number) {\r\n    activeIndex.value = idx\r\n    initAudio()\r\n    audio?.play().catch(() => {})\r\n    isPlaying.value = true\r\n    emit('play', idx)\r\n  }\r\n\r\n  /** 上一曲 */\r\n  function prev() {\r\n    const idx =\r\n      activeIndex.value <= 0 ? props.tracks.length - 1 : activeIndex.value - 1\r\n    playTrack(idx)\r\n  }\r\n\r\n  /** 下一曲 */\r\n  function next() {\r\n    const idx =\r\n      activeIndex.value >= props.tracks.length - 1 ? 0 : activeIndex.value + 1\r\n    playTrack(idx)\r\n  }\r\n\r\n  /** 点击进度条跳转播放位置 */\r\n  function seekByClick(e: MouseEvent) {\r\n    if (!audio || !totalDuration.value) return\r\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()\r\n    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))\r\n    audio.currentTime = ratio * totalDuration.value\r\n    currentTime.value = audio.currentTime\r\n  }\r\n\r\n  /** 处理音量变更 */\r\n  function handleVolumeChange(val: number) {\r\n    volume.value = val\r\n    if (audio) audio.volume = val / 100\r\n  }\r\n\r\n  /** 切换静音状态 */\r\n  function toggleMute() {\r\n    if (volume.value > 0) {\r\n      prevVolume.value = volume.value\r\n      volume.value = 0\r\n    } else {\r\n      volume.value = prevVolume.value || 70\r\n    }\r\n    if (audio) audio.volume = volume.value / 100\r\n  }\r\n\r\n  const MODES = ['list', 'loop', 'single', 'shuffle'] as const\r\n  /** 循环切换播放模式 */\r\n  function cycleMode() {\r\n    const idx = MODES.indexOf(playMode.value as (typeof MODES)[number])\r\n    playMode.value = MODES[(idx + 1) % MODES.length]\r\n    emit('modeChange', playMode.value)\r\n  }\r\n\r\n  // ==================== Lifecycle ====================\r\n\r\n  watch(\r\n    () => props.tracks,\r\n    () => {\r\n      activeIndex.value = 0\r\n      initAudio()\r\n    }\r\n  )\r\n\r\n  watch(\r\n    () => props.initialIndex,\r\n    val => {\r\n      if (val !== undefined && val !== activeIndex.value) {\r\n        activeIndex.value = val\r\n        initAudio()\r\n      }\r\n    }\r\n  )\r\n\r\n  onBeforeUnmount(() => {\r\n    if (audio) {\r\n      audio.pause()\r\n      audio.removeEventListener('timeupdate', onTimeUpdate)\r\n      audio.removeEventListener('loadedmetadata', onMetaLoaded)\r\n      audio.removeEventListener('ended', onEnded)\r\n      audio = null\r\n    }\r\n  })\r\n\r\n  // 自动播放\r\n  if (props.autoplay && props.tracks.length > 0) {\r\n    playTrack(activeIndex.value)\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Description: 音频播放器组件\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-audio-player\"\r\n    :class=\"{ 'is-minimal': theme === 'minimal' }\"\r\n  >\r\n    <!-- ================ Now Playing ================ -->\r\n    <div class=\"c-audio-player__now-playing\">\r\n      <div\r\n        v-if=\"showCover\"\r\n        class=\"c-audio-player__cover\"\r\n      >\r\n        <img\r\n          v-if=\"currentTrack?.cover\"\r\n          :src=\"currentTrack.cover\"\r\n          :alt=\"currentTrack.title\"\r\n        />\r\n        <C_Icon\r\n          v-else\r\n          name=\"mdi:music-note\"\r\n          class=\"c-audio-player__cover-placeholder\"\r\n        />\r\n      </div>\r\n      <div class=\"c-audio-player__info\">\r\n        <div class=\"c-audio-player__title\">{{\r\n          currentTrack?.title ?? '未选择曲目'\r\n        }}</div>\r\n        <div\r\n          v-if=\"currentTrack?.artist\"\r\n          class=\"c-audio-player__artist\"\r\n        >\r\n          {{ currentTrack.artist }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ================ Progress ================ -->\r\n    <div\r\n      v-if=\"theme !== 'minimal'\"\r\n      class=\"c-audio-player__progress\"\r\n    >\r\n      <div\r\n        class=\"c-audio-player__progress-bar\"\r\n        @click=\"seekByClick\"\r\n      >\r\n        <div\r\n          class=\"c-audio-player__progress-fill\"\r\n          :style=\"{ width: `${progressPercent}%` }\"\r\n        />\r\n      </div>\r\n      <div class=\"c-audio-player__time\">\r\n        <span>{{ formatTime(currentTime) }}</span>\r\n        <span>{{ formatTime(totalDuration) }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ================ Controls ================ -->\r\n    <div class=\"c-audio-player__controls\">\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-mode\"\r\n        :title=\"currentModeLabel\"\r\n        @click=\"cycleMode\"\r\n      >\r\n        <C_Icon :name=\"currentModeIcon\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-skip\"\r\n        title=\"上一曲\"\r\n        @click=\"prev\"\r\n      >\r\n        <C_Icon name=\"mdi:skip-previous\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-play\"\r\n        :title=\"isPlaying ? '暂停' : '播放'\"\r\n        @click=\"togglePlay\"\r\n      >\r\n        <C_Icon :name=\"isPlaying ? 'mdi:pause' : 'mdi:play'\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-skip\"\r\n        title=\"下一曲\"\r\n        @click=\"next\"\r\n      >\r\n        <C_Icon name=\"mdi:skip-next\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-mode\"\r\n        title=\"播放列表\"\r\n        @click=\"playlistVisible = !playlistVisible\"\r\n      >\r\n        <C_Icon name=\"mdi:playlist-music\" />\r\n      </button>\r\n    </div>\r\n\r\n    <!-- ================ Volume ================ -->\r\n    <div\r\n      v-if=\"theme !== 'minimal'\"\r\n      class=\"c-audio-player__volume\"\r\n    >\r\n      <C_Icon\r\n        :name=\"volumeIcon\"\r\n        class=\"c-audio-player__volume-icon\"\r\n        @click=\"toggleMute\"\r\n      />\r\n      <NSlider\r\n        v-model:value=\"volume\"\r\n        :min=\"0\"\r\n        :max=\"100\"\r\n        :step=\"1\"\r\n        class=\"c-audio-player__volume-slider\"\r\n        @update:value=\"handleVolumeChange\"\r\n      />\r\n    </div>\r\n\r\n    <!-- ================ Playlist ================ -->\r\n    <div\r\n      v-if=\"showPlaylist && playlistVisible && theme !== 'minimal'\"\r\n      class=\"c-audio-player__playlist\"\r\n    >\r\n      <div class=\"c-audio-player__playlist-header\">\r\n        <span>播放列表</span>\r\n        <span>{{ tracks.length }} 首</span>\r\n      </div>\r\n      <div\r\n        v-for=\"(track, idx) in tracks\"\r\n        :key=\"track.id\"\r\n        class=\"c-audio-player__track\"\r\n        :class=\"{ 'is-active': idx === activeIndex }\"\r\n        @click=\"playTrack(idx)\"\r\n      >\r\n        <span class=\"c-audio-player__track-index\">\r\n          <C_Icon\r\n            v-if=\"idx === activeIndex && isPlaying\"\r\n            name=\"mdi:volume-high\"\r\n          />\r\n          <template v-else>{{ idx + 1 }}</template>\r\n        </span>\r\n        <div class=\"c-audio-player__track-info\">\r\n          <div class=\"c-audio-player__track-title\">{{ track.title }}</div>\r\n          <div\r\n            v-if=\"track.artist\"\r\n            class=\"c-audio-player__track-artist\"\r\n          >\r\n            {{ track.artist }}\r\n          </div>\r\n        </div>\r\n        <span\r\n          v-if=\"track.duration\"\r\n          class=\"c-audio-player__track-duration\"\r\n        >\r\n          {{ formatTime(track.duration) }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, onBeforeUnmount, ref, watch } from 'vue'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n  import {\r\n    DEFAULT_AUDIO_PLAYER_PROPS,\r\n    formatTime,\r\n    MODE_ICON_MAP,\r\n    type AudioPlayerProps,\r\n  } from './types'\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      tracks: AudioPlayerProps['tracks']\r\n      initialIndex?: number\r\n      showPlaylist?: boolean\r\n      showCover?: boolean\r\n      autoplay?: boolean\r\n      mode?: AudioPlayerProps['mode']\r\n      theme?: AudioPlayerProps['theme']\r\n    }>(),\r\n    {\r\n      initialIndex: DEFAULT_AUDIO_PLAYER_PROPS.initialIndex,\r\n      showPlaylist: DEFAULT_AUDIO_PLAYER_PROPS.showPlaylist,\r\n      showCover: true,\r\n      autoplay: DEFAULT_AUDIO_PLAYER_PROPS.autoplay,\r\n      mode: DEFAULT_AUDIO_PLAYER_PROPS.mode,\r\n      theme: DEFAULT_AUDIO_PLAYER_PROPS.theme,\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    play: [index: number]\r\n    pause: []\r\n    ended: [index: number]\r\n    modeChange: [mode: string]\r\n  }>()\r\n\r\n  // ==================== Audio Core ====================\r\n\r\n  let audio: HTMLAudioElement | null = null\r\n\r\n  const activeIndex = ref(props.initialIndex ?? 0)\r\n  const isPlaying = ref(false)\r\n  const currentTime = ref(0)\r\n  const totalDuration = ref(0)\r\n  const volume = ref(70)\r\n  const prevVolume = ref(70)\r\n  const playlistVisible = ref(props.showPlaylist)\r\n  const playMode = ref(props.mode ?? 'list')\r\n\r\n  const currentTrack = computed(() => props.tracks[activeIndex.value])\r\n\r\n  const progressPercent = computed(() => {\r\n    if (totalDuration.value === 0) return 0\r\n    return (currentTime.value / totalDuration.value) * 100\r\n  })\r\n\r\n  const volumeIcon = computed(() => {\r\n    if (volume.value === 0) return 'mdi:volume-off'\r\n    if (volume.value < 40) return 'mdi:volume-low'\r\n    if (volume.value < 70) return 'mdi:volume-medium'\r\n    return 'mdi:volume-high'\r\n  })\r\n\r\n  const currentModeIcon = computed(\r\n    () => MODE_ICON_MAP[playMode.value]?.icon ?? 'mdi:repeat'\r\n  )\r\n  const currentModeLabel = computed(\r\n    () => MODE_ICON_MAP[playMode.value]?.label ?? '循环'\r\n  )\r\n\r\n  /** 初始化音频实例 */\r\n  function initAudio() {\r\n    if (audio) {\r\n      audio.pause()\r\n      audio.removeEventListener('timeupdate', onTimeUpdate)\r\n      audio.removeEventListener('loadedmetadata', onMetaLoaded)\r\n      audio.removeEventListener('ended', onEnded)\r\n    }\r\n    const track = currentTrack.value\r\n    if (!track) return\r\n\r\n    audio = new Audio(track.src)\r\n    audio.volume = volume.value / 100\r\n    audio.addEventListener('timeupdate', onTimeUpdate)\r\n    audio.addEventListener('loadedmetadata', onMetaLoaded)\r\n    audio.addEventListener('ended', onEnded)\r\n  }\r\n\r\n  /** 播放进度更新回调 */\r\n  function onTimeUpdate() {\r\n    if (audio) currentTime.value = audio.currentTime\r\n  }\r\n\r\n  /** 音频元数据加载完成回调 */\r\n  function onMetaLoaded() {\r\n    if (audio) totalDuration.value = audio.duration\r\n  }\r\n\r\n  /** 播放结束回调，根据模式决定下一步 */\r\n  function onEnded() {\r\n    emit('ended', activeIndex.value)\r\n    switch (playMode.value) {\r\n      case 'loop':\r\n        audio?.play().catch(() => {})\r\n        break\r\n      case 'single':\r\n        isPlaying.value = false\r\n        break\r\n      case 'shuffle':\r\n        playTrack(Math.floor(Math.random() * props.tracks.length))\r\n        break\r\n      default: // list\r\n        if (activeIndex.value < props.tracks.length - 1) next()\r\n        else {\r\n          activeIndex.value = 0\r\n          initAudio()\r\n          audio?.play().catch(() => {})\r\n        }\r\n    }\r\n  }\r\n\r\n  /** 切换播放/暂停 */\r\n  function togglePlay() {\r\n    if (!audio) initAudio()\r\n    if (isPlaying.value) {\r\n      audio?.pause()\r\n      isPlaying.value = false\r\n      emit('pause')\r\n    } else {\r\n      audio?.play().catch(() => {})\r\n      isPlaying.value = true\r\n      emit('play', activeIndex.value)\r\n    }\r\n  }\r\n\r\n  /** 播放指定索引的曲目 */\r\n  function playTrack(idx: number) {\r\n    activeIndex.value = idx\r\n    initAudio()\r\n    audio?.play().catch(() => {})\r\n    isPlaying.value = true\r\n    emit('play', idx)\r\n  }\r\n\r\n  /** 上一曲 */\r\n  function prev() {\r\n    const idx =\r\n      activeIndex.value <= 0 ? props.tracks.length - 1 : activeIndex.value - 1\r\n    playTrack(idx)\r\n  }\r\n\r\n  /** 下一曲 */\r\n  function next() {\r\n    const idx =\r\n      activeIndex.value >= props.tracks.length - 1 ? 0 : activeIndex.value + 1\r\n    playTrack(idx)\r\n  }\r\n\r\n  /** 点击进度条跳转播放位置 */\r\n  function seekByClick(e: MouseEvent) {\r\n    if (!audio || !totalDuration.value) return\r\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()\r\n    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))\r\n    audio.currentTime = ratio * totalDuration.value\r\n    currentTime.value = audio.currentTime\r\n  }\r\n\r\n  /** 处理音量变更 */\r\n  function handleVolumeChange(val: number) {\r\n    volume.value = val\r\n    if (audio) audio.volume = val / 100\r\n  }\r\n\r\n  /** 切换静音状态 */\r\n  function toggleMute() {\r\n    if (volume.value > 0) {\r\n      prevVolume.value = volume.value\r\n      volume.value = 0\r\n    } else {\r\n      volume.value = prevVolume.value || 70\r\n    }\r\n    if (audio) audio.volume = volume.value / 100\r\n  }\r\n\r\n  const MODES = ['list', 'loop', 'single', 'shuffle'] as const\r\n  /** 循环切换播放模式 */\r\n  function cycleMode() {\r\n    const idx = MODES.indexOf(playMode.value as (typeof MODES)[number])\r\n    playMode.value = MODES[(idx + 1) % MODES.length]\r\n    emit('modeChange', playMode.value)\r\n  }\r\n\r\n  // ==================== Lifecycle ====================\r\n\r\n  watch(\r\n    () => props.tracks,\r\n    () => {\r\n      activeIndex.value = 0\r\n      initAudio()\r\n    }\r\n  )\r\n\r\n  watch(\r\n    () => props.initialIndex,\r\n    val => {\r\n      if (val !== undefined && val !== activeIndex.value) {\r\n        activeIndex.value = val\r\n        initAudio()\r\n      }\r\n    }\r\n  )\r\n\r\n  onBeforeUnmount(() => {\r\n    if (audio) {\r\n      audio.pause()\r\n      audio.removeEventListener('timeupdate', onTimeUpdate)\r\n      audio.removeEventListener('loadedmetadata', onMetaLoaded)\r\n      audio.removeEventListener('ended', onEnded)\r\n      audio = null\r\n    }\r\n  })\r\n\r\n  // 自动播放\r\n  if (props.autoplay && props.tracks.length > 0) {\r\n    playTrack(activeIndex.value)\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Description: 音频播放器组件\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-audio-player\"\r\n    :class=\"{ 'is-minimal': theme === 'minimal' }\"\r\n  >\r\n    <!-- ================ Now Playing ================ -->\r\n    <div class=\"c-audio-player__now-playing\">\r\n      <div\r\n        v-if=\"showCover\"\r\n        class=\"c-audio-player__cover\"\r\n      >\r\n        <img\r\n          v-if=\"currentTrack?.cover\"\r\n          :src=\"currentTrack.cover\"\r\n          :alt=\"currentTrack.title\"\r\n        />\r\n        <C_Icon\r\n          v-else\r\n          name=\"mdi:music-note\"\r\n          class=\"c-audio-player__cover-placeholder\"\r\n        />\r\n      </div>\r\n      <div class=\"c-audio-player__info\">\r\n        <div class=\"c-audio-player__title\">{{\r\n          currentTrack?.title ?? '未选择曲目'\r\n        }}</div>\r\n        <div\r\n          v-if=\"currentTrack?.artist\"\r\n          class=\"c-audio-player__artist\"\r\n        >\r\n          {{ currentTrack.artist }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ================ Progress ================ -->\r\n    <div\r\n      v-if=\"theme !== 'minimal'\"\r\n      class=\"c-audio-player__progress\"\r\n    >\r\n      <div\r\n        class=\"c-audio-player__progress-bar\"\r\n        @click=\"seekByClick\"\r\n      >\r\n        <div\r\n          class=\"c-audio-player__progress-fill\"\r\n          :style=\"{ width: `${progressPercent}%` }\"\r\n        />\r\n      </div>\r\n      <div class=\"c-audio-player__time\">\r\n        <span>{{ formatTime(currentTime) }}</span>\r\n        <span>{{ formatTime(totalDuration) }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ================ Controls ================ -->\r\n    <div class=\"c-audio-player__controls\">\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-mode\"\r\n        :title=\"currentModeLabel\"\r\n        @click=\"cycleMode\"\r\n      >\r\n        <C_Icon :name=\"currentModeIcon\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-skip\"\r\n        title=\"上一曲\"\r\n        @click=\"prev\"\r\n      >\r\n        <C_Icon name=\"mdi:skip-previous\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-play\"\r\n        :title=\"isPlaying ? '暂停' : '播放'\"\r\n        @click=\"togglePlay\"\r\n      >\r\n        <C_Icon :name=\"isPlaying ? 'mdi:pause' : 'mdi:play'\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-skip\"\r\n        title=\"下一曲\"\r\n        @click=\"next\"\r\n      >\r\n        <C_Icon name=\"mdi:skip-next\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-mode\"\r\n        title=\"播放列表\"\r\n        @click=\"playlistVisible = !playlistVisible\"\r\n      >\r\n        <C_Icon name=\"mdi:playlist-music\" />\r\n      </button>\r\n    </div>\r\n\r\n    <!-- ================ Volume ================ -->\r\n    <div\r\n      v-if=\"theme !== 'minimal'\"\r\n      class=\"c-audio-player__volume\"\r\n    >\r\n      <C_Icon\r\n        :name=\"volumeIcon\"\r\n        class=\"c-audio-player__volume-icon\"\r\n        @click=\"toggleMute\"\r\n      />\r\n      <NSlider\r\n        v-model:value=\"volume\"\r\n        :min=\"0\"\r\n        :max=\"100\"\r\n        :step=\"1\"\r\n        class=\"c-audio-player__volume-slider\"\r\n        @update:value=\"handleVolumeChange\"\r\n      />\r\n    </div>\r\n\r\n    <!-- ================ Playlist ================ -->\r\n    <div\r\n      v-if=\"showPlaylist && playlistVisible && theme !== 'minimal'\"\r\n      class=\"c-audio-player__playlist\"\r\n    >\r\n      <div class=\"c-audio-player__playlist-header\">\r\n        <span>播放列表</span>\r\n        <span>{{ tracks.length }} 首</span>\r\n      </div>\r\n      <div\r\n        v-for=\"(track, idx) in tracks\"\r\n        :key=\"track.id\"\r\n        class=\"c-audio-player__track\"\r\n        :class=\"{ 'is-active': idx === activeIndex }\"\r\n        @click=\"playTrack(idx)\"\r\n      >\r\n        <span class=\"c-audio-player__track-index\">\r\n          <C_Icon\r\n            v-if=\"idx === activeIndex && isPlaying\"\r\n            name=\"mdi:volume-high\"\r\n          />\r\n          <template v-else>{{ idx + 1 }}</template>\r\n        </span>\r\n        <div class=\"c-audio-player__track-info\">\r\n          <div class=\"c-audio-player__track-title\">{{ track.title }}</div>\r\n          <div\r\n            v-if=\"track.artist\"\r\n            class=\"c-audio-player__track-artist\"\r\n          >\r\n            {{ track.artist }}\r\n          </div>\r\n        </div>\r\n        <span\r\n          v-if=\"track.duration\"\r\n          class=\"c-audio-player__track-duration\"\r\n        >\r\n          {{ formatTime(track.duration) }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, onBeforeUnmount, ref, watch } from 'vue'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n  import {\r\n    DEFAULT_AUDIO_PLAYER_PROPS,\r\n    formatTime,\r\n    MODE_ICON_MAP,\r\n    type AudioPlayerProps,\r\n  } from './types'\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      tracks: AudioPlayerProps['tracks']\r\n      initialIndex?: number\r\n      showPlaylist?: boolean\r\n      showCover?: boolean\r\n      autoplay?: boolean\r\n      mode?: AudioPlayerProps['mode']\r\n      theme?: AudioPlayerProps['theme']\r\n    }>(),\r\n    {\r\n      initialIndex: DEFAULT_AUDIO_PLAYER_PROPS.initialIndex,\r\n      showPlaylist: DEFAULT_AUDIO_PLAYER_PROPS.showPlaylist,\r\n      showCover: true,\r\n      autoplay: DEFAULT_AUDIO_PLAYER_PROPS.autoplay,\r\n      mode: DEFAULT_AUDIO_PLAYER_PROPS.mode,\r\n      theme: DEFAULT_AUDIO_PLAYER_PROPS.theme,\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    play: [index: number]\r\n    pause: []\r\n    ended: [index: number]\r\n    modeChange: [mode: string]\r\n  }>()\r\n\r\n  // ==================== Audio Core ====================\r\n\r\n  let audio: HTMLAudioElement | null = null\r\n\r\n  const activeIndex = ref(props.initialIndex ?? 0)\r\n  const isPlaying = ref(false)\r\n  const currentTime = ref(0)\r\n  const totalDuration = ref(0)\r\n  const volume = ref(70)\r\n  const prevVolume = ref(70)\r\n  const playlistVisible = ref(props.showPlaylist)\r\n  const playMode = ref(props.mode ?? 'list')\r\n\r\n  const currentTrack = computed(() => props.tracks[activeIndex.value])\r\n\r\n  const progressPercent = computed(() => {\r\n    if (totalDuration.value === 0) return 0\r\n    return (currentTime.value / totalDuration.value) * 100\r\n  })\r\n\r\n  const volumeIcon = computed(() => {\r\n    if (volume.value === 0) return 'mdi:volume-off'\r\n    if (volume.value < 40) return 'mdi:volume-low'\r\n    if (volume.value < 70) return 'mdi:volume-medium'\r\n    return 'mdi:volume-high'\r\n  })\r\n\r\n  const currentModeIcon = computed(\r\n    () => MODE_ICON_MAP[playMode.value]?.icon ?? 'mdi:repeat'\r\n  )\r\n  const currentModeLabel = computed(\r\n    () => MODE_ICON_MAP[playMode.value]?.label ?? '循环'\r\n  )\r\n\r\n  /** 初始化音频实例 */\r\n  function initAudio() {\r\n    if (audio) {\r\n      audio.pause()\r\n      audio.removeEventListener('timeupdate', onTimeUpdate)\r\n      audio.removeEventListener('loadedmetadata', onMetaLoaded)\r\n      audio.removeEventListener('ended', onEnded)\r\n    }\r\n    const track = currentTrack.value\r\n    if (!track) return\r\n\r\n    audio = new Audio(track.src)\r\n    audio.volume = volume.value / 100\r\n    audio.addEventListener('timeupdate', onTimeUpdate)\r\n    audio.addEventListener('loadedmetadata', onMetaLoaded)\r\n    audio.addEventListener('ended', onEnded)\r\n  }\r\n\r\n  /** 播放进度更新回调 */\r\n  function onTimeUpdate() {\r\n    if (audio) currentTime.value = audio.currentTime\r\n  }\r\n\r\n  /** 音频元数据加载完成回调 */\r\n  function onMetaLoaded() {\r\n    if (audio) totalDuration.value = audio.duration\r\n  }\r\n\r\n  /** 播放结束回调，根据模式决定下一步 */\r\n  function onEnded() {\r\n    emit('ended', activeIndex.value)\r\n    switch (playMode.value) {\r\n      case 'loop':\r\n        audio?.play().catch(() => {})\r\n        break\r\n      case 'single':\r\n        isPlaying.value = false\r\n        break\r\n      case 'shuffle':\r\n        playTrack(Math.floor(Math.random() * props.tracks.length))\r\n        break\r\n      default: // list\r\n        if (activeIndex.value < props.tracks.length - 1) next()\r\n        else {\r\n          activeIndex.value = 0\r\n          initAudio()\r\n          audio?.play().catch(() => {})\r\n        }\r\n    }\r\n  }\r\n\r\n  /** 切换播放/暂停 */\r\n  function togglePlay() {\r\n    if (!audio) initAudio()\r\n    if (isPlaying.value) {\r\n      audio?.pause()\r\n      isPlaying.value = false\r\n      emit('pause')\r\n    } else {\r\n      audio?.play().catch(() => {})\r\n      isPlaying.value = true\r\n      emit('play', activeIndex.value)\r\n    }\r\n  }\r\n\r\n  /** 播放指定索引的曲目 */\r\n  function playTrack(idx: number) {\r\n    activeIndex.value = idx\r\n    initAudio()\r\n    audio?.play().catch(() => {})\r\n    isPlaying.value = true\r\n    emit('play', idx)\r\n  }\r\n\r\n  /** 上一曲 */\r\n  function prev() {\r\n    const idx =\r\n      activeIndex.value <= 0 ? props.tracks.length - 1 : activeIndex.value - 1\r\n    playTrack(idx)\r\n  }\r\n\r\n  /** 下一曲 */\r\n  function next() {\r\n    const idx =\r\n      activeIndex.value >= props.tracks.length - 1 ? 0 : activeIndex.value + 1\r\n    playTrack(idx)\r\n  }\r\n\r\n  /** 点击进度条跳转播放位置 */\r\n  function seekByClick(e: MouseEvent) {\r\n    if (!audio || !totalDuration.value) return\r\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()\r\n    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))\r\n    audio.currentTime = ratio * totalDuration.value\r\n    currentTime.value = audio.currentTime\r\n  }\r\n\r\n  /** 处理音量变更 */\r\n  function handleVolumeChange(val: number) {\r\n    volume.value = val\r\n    if (audio) audio.volume = val / 100\r\n  }\r\n\r\n  /** 切换静音状态 */\r\n  function toggleMute() {\r\n    if (volume.value > 0) {\r\n      prevVolume.value = volume.value\r\n      volume.value = 0\r\n    } else {\r\n      volume.value = prevVolume.value || 70\r\n    }\r\n    if (audio) audio.volume = volume.value / 100\r\n  }\r\n\r\n  const MODES = ['list', 'loop', 'single', 'shuffle'] as const\r\n  /** 循环切换播放模式 */\r\n  function cycleMode() {\r\n    const idx = MODES.indexOf(playMode.value as (typeof MODES)[number])\r\n    playMode.value = MODES[(idx + 1) % MODES.length]\r\n    emit('modeChange', playMode.value)\r\n  }\r\n\r\n  // ==================== Lifecycle ====================\r\n\r\n  watch(\r\n    () => props.tracks,\r\n    () => {\r\n      activeIndex.value = 0\r\n      initAudio()\r\n    }\r\n  )\r\n\r\n  watch(\r\n    () => props.initialIndex,\r\n    val => {\r\n      if (val !== undefined && val !== activeIndex.value) {\r\n        activeIndex.value = val\r\n        initAudio()\r\n      }\r\n    }\r\n  )\r\n\r\n  onBeforeUnmount(() => {\r\n    if (audio) {\r\n      audio.pause()\r\n      audio.removeEventListener('timeupdate', onTimeUpdate)\r\n      audio.removeEventListener('loadedmetadata', onMetaLoaded)\r\n      audio.removeEventListener('ended', onEnded)\r\n      audio = null\r\n    }\r\n  })\r\n\r\n  // 自动播放\r\n  if (props.autoplay && props.tracks.length > 0) {\r\n    playTrack(activeIndex.value)\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n"],"mappings":"gIA0CA,MAAa,EAAwD,CACnE,aAAc,EACd,aAAc,GACd,UAAW,GACX,SAAU,GACV,KAAM,OACN,MAAO,UACR,CAGY,EAAiE,CAC5E,KAAM,CAAE,KAAM,aAAc,MAAO,YAAa,CAChD,KAAM,CAAE,KAAM,kBAAmB,MAAO,cAAe,CACvD,OAAQ,CAAE,KAAM,oBAAqB,MAAO,YAAa,CACzD,QAAS,CAAE,KAAM,sBAAuB,MAAO,UAAW,CAC3D,CAGD,SAAgB,EAAW,EAAyB,CAClD,GAAI,CAAC,OAAO,SAAS,EAAQ,EAAI,EAAU,EAAG,MAAO,QACrD,IAAM,EAAI,KAAK,MAAM,EAAU,GAAG,CAC5B,EAAI,KAAK,MAAM,EAAU,GAAG,CAClC,MAAO,GAAG,OAAO,EAAE,CAAC,SAAS,EAAG,IAAI,CAAC,GAAG,OAAO,EAAE,CAAC,SAAS,EAAG,IAAI,shCG2GlE,IAAM,EAAQ,EAoBR,EAAO,EAST,EAAiC,KAE/B,GAAA,EAAA,EAAA,KAAkB,EAAM,cAAgB,EAAE,CAC1C,GAAA,EAAA,EAAA,KAAgB,GAAM,CACtB,GAAA,EAAA,EAAA,KAAkB,EAAE,CACpB,GAAA,EAAA,EAAA,KAAoB,EAAE,CACtB,GAAA,EAAA,EAAA,KAAa,GAAG,CAChB,GAAA,EAAA,EAAA,KAAiB,GAAG,CACpB,GAAA,EAAA,EAAA,KAAsB,EAAM,aAAa,CACzC,GAAA,EAAA,EAAA,KAAe,EAAM,MAAQ,OAAO,CAEpC,GAAA,EAAA,EAAA,cAA8B,EAAM,OAAO,EAAY,OAAO,CAE9D,GAAA,EAAA,EAAA,cACA,EAAc,QAAU,EAAU,EAC9B,EAAY,MAAQ,EAAc,MAAS,IACnD,CAEI,GAAA,EAAA,EAAA,cACA,EAAO,QAAU,EAAU,iBAC3B,EAAO,MAAQ,GAAW,iBAC1B,EAAO,MAAQ,GAAW,oBACvB,kBACP,CAEI,GAAA,EAAA,EAAA,cACE,EAAc,EAAS,QAAQ,MAAQ,aAC9C,CACK,GAAA,EAAA,EAAA,cACE,EAAc,EAAS,QAAQ,OAAS,KAC/C,CAGD,SAAS,GAAY,CACf,IACF,EAAM,OAAO,CACb,EAAM,oBAAoB,aAAc,EAAa,CACrD,EAAM,oBAAoB,iBAAkB,EAAa,CACzD,EAAM,oBAAoB,QAAS,EAAQ,EAE7C,IAAM,EAAQ,EAAa,MACtB,IAEL,EAAQ,IAAI,MAAM,EAAM,IAAI,CAC5B,EAAM,OAAS,EAAO,MAAQ,IAC9B,EAAM,iBAAiB,aAAc,EAAa,CAClD,EAAM,iBAAiB,iBAAkB,EAAa,CACtD,EAAM,iBAAiB,QAAS,EAAQ,EAI1C,SAAS,GAAe,CAClB,IAAO,EAAY,MAAQ,EAAM,aAIvC,SAAS,GAAe,CAClB,IAAO,EAAc,MAAQ,EAAM,UAIzC,SAAS,GAAU,CAEjB,OADA,EAAK,QAAS,EAAY,MAAM,CACxB,EAAS,MAAjB,CACE,IAAK,OACH,GAAO,MAAM,CAAC,UAAY,GAAG,CAC7B,MACF,IAAK,SACH,EAAU,MAAQ,GAClB,MACF,IAAK,UACH,EAAU,KAAK,MAAM,KAAK,QAAQ,CAAG,EAAM,OAAO,OAAO,CAAC,CAC1D,MACF,QACM,EAAY,MAAQ,EAAM,OAAO,OAAS,EAAG,GAAM,EAErD,EAAY,MAAQ,EACpB,GAAW,CACX,GAAO,MAAM,CAAC,UAAY,GAAG,GAMrC,SAAS,GAAa,CACf,GAAO,GAAW,CACnB,EAAU,OACZ,GAAO,OAAO,CACd,EAAU,MAAQ,GAClB,EAAK,QAAQ,GAEb,GAAO,MAAM,CAAC,UAAY,GAAG,CAC7B,EAAU,MAAQ,GAClB,EAAK,OAAQ,EAAY,MAAM,EAKnC,SAAS,EAAU,EAAa,CAC9B,EAAY,MAAQ,EACpB,GAAW,CACX,GAAO,MAAM,CAAC,UAAY,GAAG,CAC7B,EAAU,MAAQ,GAClB,EAAK,OAAQ,EAAI,CAInB,SAAS,GAAO,CAGd,EADE,EAAY,OAAS,EAAI,EAAM,OAAO,OAAS,EAAI,EAAY,MAAQ,EAC3D,CAIhB,SAAS,GAAO,CAGd,EADE,EAAY,OAAS,EAAM,OAAO,OAAS,EAAI,EAAI,EAAY,MAAQ,EAC3D,CAIhB,SAAS,EAAY,EAAe,CAClC,GAAI,CAAC,GAAS,CAAC,EAAc,MAAO,OACpC,IAAM,EAAQ,EAAE,cAA8B,uBAAuB,CAC/D,EAAQ,KAAK,IAAI,EAAG,KAAK,IAAI,GAAI,EAAE,QAAU,EAAK,MAAQ,EAAK,MAAM,CAAC,CAC5E,EAAM,YAAc,EAAQ,EAAc,MAC1C,EAAY,MAAQ,EAAM,YAI5B,SAAS,EAAmB,EAAa,CACvC,EAAO,MAAQ,EACX,IAAO,EAAM,OAAS,EAAM,KAIlC,SAAS,GAAa,CAChB,EAAO,MAAQ,GACjB,EAAW,MAAQ,EAAO,MAC1B,EAAO,MAAQ,GAEf,EAAO,MAAQ,EAAW,OAAS,GAEjC,IAAO,EAAM,OAAS,EAAO,MAAQ,KAG3C,IAAM,EAAQ,CAAC,OAAQ,OAAQ,SAAU,UAAU,CAEnD,SAAS,IAAY,CAEnB,EAAS,MAAQ,GADL,EAAM,QAAQ,EAAS,MAAgC,CACrC,GAAK,EAAM,QACzC,EAAK,aAAc,EAAS,MAAM,QAKpC,EAAA,EAAA,WACQ,EAAM,WACN,CACJ,EAAY,MAAQ,EACpB,GAAW,EAEd,EAED,EAAA,EAAA,WACQ,EAAM,aACZ,GAAO,CACD,IAAQ,IAAA,IAAa,IAAQ,EAAY,QAC3C,EAAY,MAAQ,EACpB,GAAW,GAGhB,EAED,EAAA,EAAA,qBAAsB,CACpB,AAKE,KAJA,EAAM,OAAO,CACb,EAAM,oBAAoB,aAAc,EAAa,CACrD,EAAM,oBAAoB,iBAAkB,EAAa,CACzD,EAAM,oBAAoB,QAAS,EAAQ,CACnC,OAEV,CAGE,EAAM,UAAY,EAAM,OAAO,OAAS,GAC1C,EAAU,EAAY,MAAM,0EApOxB,MAAA,CAxJJ,OAAA,EAAA,EAAA,gBAAK,CAAC,iBAAgB,CAAA,aACEA,EAAAA,QAAK,UAAA,CAAA,CAAA,CAAA,CAAA,0BAE7B,kDAAsD,0BA4BhD,MA3BN,EA2BM,CAzBIC,EAAAA,YAAAA,EAAAA,EAAAA,YAAAA,EAAAA,EAAAA,EAAAA,oBAaF,MAdN,EAcM,CATI,EAAA,OAAc,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAGpB,MAAA,OAFC,IAAK,EAAA,MAAa,MAClB,IAAK,EAAA,MAAa,uDAMnB,EAAA,EAAA,OAFA,KAAK,iBACL,MAAM,uGAaJ,MAVN,EAUM,EAAA,EAAA,EAAA,oBAPI,MAFR,GAAA,EAAA,EAAA,iBACE,EAAA,OAAc,OAAK,QAAA,CAAA,EAAA,CAGb,EAAA,OAAc,SAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAIhB,MALN,GAAA,EAAA,EAAA,iBAIK,EAAA,MAAa,OAAM,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAAA,CAAA,CAAA,CAAA,0BAK5B,+CAAmD,CAE3CD,EAAAA,QAAK,WAcwB,EAAA,EAAA,oBAAA,OAAA,GAAA,GAdxB,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAgBP,MAjBN,EAiBM,EAAA,EAAA,EAAA,oBALE,MAAA,CAPJ,MAAM,+BACL,QAAO,6BAKN,MAAA,CAFA,MAAM,gCACL,OAAA,EAAA,EAAA,gBAAK,CAAA,MAAA,GAAc,EAAA,MAAe,GAAA,CAAA,qCAMjC,MAHN,GAGM,EAAA,EAAA,EAAA,oBAFsC,OAAA,MAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,OAAjC,EAAU,CAAC,EAAA,MAAW,CAAA,CAAA,EAAA,EAAA,EAAA,EAAA,oBACa,OAAA,MAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,OAAnC,EAAU,CAAC,EAAA,MAAa,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,2BAIrC,+CAAmD,0BAqC7C,MApCN,EAoCM,0BA7BK,SAAA,CALP,MAAM,mCACL,MAAO,EAAA,MACP,QAAO,uBAE0B,EAAA,EAAA,CAAzB,KAAM,EAAA,MAAe,CAAA,KAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA,EAAA,EAAA,0BAQvB,SAAA,CALP,MAAM,mCACN,MAAM,MACL,QAAO,sBAE2B,EAAA,EAAA,CAA3B,KAAK,oBAAmB,CAAA,CAAA,CAAA,0BAQzB,SAAA,CALP,MAAM,mCACL,MAAO,EAAA,MAAS,KAAA,KAChB,QAAO,sBAE+C,EAAA,EAAA,CAA9C,KAAM,EAAA,MAAS,YAAA,WAAA,CAAA,KAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA,EAAA,EAAA,0BAQjB,SAAA,CALP,MAAM,mCACN,MAAM,MACL,QAAO,sBAEuB,EAAA,EAAA,CAAvB,KAAK,gBAAe,CAAA,CAAA,CAAA,0BAQrB,SAAA,CALP,MAAM,mCACN,MAAM,OACL,QAAK,AAAA,EAAA,KAAA,GAAE,EAAA,MAAe,CAAI,EAAA,0BAES,EAAA,EAAA,CAA5B,KAAK,qBAAoB,CAAA,CAAA,CAAA,4BAIrC,6CAAiD,CAEzCA,EAAAA,QAAK,gDAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAgBP,MAjBN,EAiBM,EAAA,EAAA,EAAA,aATF,EAAA,EAAA,CAHC,KAAM,EAAA,MACP,MAAM,8BACL,QAAO,sCASR,EAAA,CANQ,MAAO,EAAA,kCAAA,EAAM,MAAA,EAKN,EAAA,CAJd,IAAK,EACL,IAAK,IACL,KAAM,EACP,MAAM,+EAKV,+CAAmD,CAE3CE,EAAAA,cAAgB,EAAA,OAAmBF,EAAAA,QAAK,YAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAqC1C,MAtCN,EAsCM,EAAA,EAAA,EAAA,oBA/BE,MAHN,EAGM,CAAA,AAAA,EAAA,MAAA,EAAA,EAAA,oBAFa,OAAA,KAAX,OAAI,GAAA,EAAA,EAAA,EAAA,oBACwB,OAAA,MAAA,EAAA,EAAA,iBAAzBG,EAAAA,OAAO,OAAM,CAAG,KAAE,EAAA,CAAA,CAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBA+BvB,EAAA,SAAA,MAAA,EAAA,EAAA,YA5BmBA,EAAAA,QAAf,EAAO,gDA4BX,MAAA,CA3BH,IAAK,EAAM,GACZ,OAAA,EAAA,EAAA,gBAAK,CAAC,wBAAuB,CAAA,YACN,IAAQ,EAAA,MAAW,CAAA,CAAA,CACzC,QAAK,GAAE,EAAU,EAAG,4BAQd,OANP,EAMO,CAJG,IAAQ,EAAA,OAAe,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAE7B,EAAA,EAAA,OADA,KAAK,iEAEkC,EAAA,SAAA,CAAA,IAAA,EAAA,CAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAArB,EAAG,EAAA,CAAA,EAAA,CAAA,CAAA,GAAA,EAAA,CAAA,0BAUnB,MARN,EAQM,EAAA,EAAA,EAAA,oBAP4D,MAAhE,GAAA,EAAA,EAAA,iBAA4C,EAAM,MAAK,CAAA,EAAA,CAE/C,EAAM,SAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAIR,MALN,GAAA,EAAA,EAAA,iBAIK,EAAM,OAAM,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAAA,CAAA,CAIX,EAAM,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAIP,OALP,GAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,OAIK,EAAU,CAAC,EAAM,SAAQ,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA"}

package/dist/C_AudioPlayer2.js

@@ -0,0 +1,2 @@
+import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{NSlider as n}from"naive-ui";import{Fragment as r,computed as i,createBlock as a,createCommentVNode as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,createVNode as u,defineComponent as d,normalizeClass as f,normalizeStyle as p,onBeforeUnmount as m,openBlock as h,ref as g,renderList as _,toDisplayString as v,unref as y,watch as b}from"vue";const x={initialIndex:0,showPlaylist:!0,showCover:!0,autoplay:!1,mode:`list`,theme:`default`},S={list:{icon:`mdi:repeat`,label:`List Loop`},loop:{icon:`mdi:repeat-once`,label:`Single Loop`},single:{icon:`mdi:numeric-1-box`,label:`Play Once`},shuffle:{icon:`mdi:shuffle-variant`,label:`Shuffle`}};function C(e){if(!Number.isFinite(e)||e<0)return`00:00`;let t=Math.floor(e/60),n=Math.floor(e%60);return`${String(t).padStart(2,`0`)}:${String(n).padStart(2,`0`)}`}const w={class:`c-audio-player__now-playing`},T={key:0,class:`c-audio-player__cover`},E=[`src`,`alt`],D={class:`c-audio-player__info`},O={class:`c-audio-player__title`},k={key:0,class:`c-audio-player__artist`},A={key:0,class:`c-audio-player__progress`},ee={class:`c-audio-player__time`},te={class:`c-audio-player__controls`},ne=[`title`],re=[`title`],ie={key:1,class:`c-audio-player__volume`},ae={key:2,class:`c-audio-player__playlist`},oe={class:`c-audio-player__playlist-header`},se=[`onClick`],ce={class:`c-audio-player__track-index`},j={class:`c-audio-player__track-info`},M={class:`c-audio-player__track-title`},N={key:0,class:`c-audio-player__track-artist`},P={key:0,class:`c-audio-player__track-duration`};var F=t(d({__name:`index`,props:{tracks:{},initialIndex:{default:x.initialIndex},showPlaylist:{type:Boolean,default:x.showPlaylist},showCover:{type:Boolean,default:!0},autoplay:{type:Boolean,default:x.autoplay},mode:{default:x.mode},theme:{default:x.theme}},emits:[`play`,`pause`,`ended`,`modeChange`],setup(t,{emit:d}){let x=t,F=d,I=null,L=g(x.initialIndex??0),R=g(!1),z=g(0),B=g(0),V=g(70),H=g(70),U=g(x.showPlaylist),W=g(x.mode??`list`),G=i(()=>x.tracks[L.value]),le=i(()=>B.value===0?0:z.value/B.value*100),ue=i(()=>V.value===0?`mdi:volume-off`:V.value<40?`mdi:volume-low`:V.value<70?`mdi:volume-medium`:`mdi:volume-high`),de=i(()=>S[W.value]?.icon??`mdi:repeat`),fe=i(()=>S[W.value]?.label??`循环`);function K(){I&&(I.pause(),I.removeEventListener(`timeupdate`,q),I.removeEventListener(`loadedmetadata`,J),I.removeEventListener(`ended`,Y));let e=G.value;e&&(I=new Audio(e.src),I.volume=V.value/100,I.addEventListener(`timeupdate`,q),I.addEventListener(`loadedmetadata`,J),I.addEventListener(`ended`,Y))}function q(){I&&(z.value=I.currentTime)}function J(){I&&(B.value=I.duration)}function Y(){switch(F(`ended`,L.value),W.value){case`loop`:I?.play().catch(()=>{});break;case`single`:R.value=!1;break;case`shuffle`:X(Math.floor(Math.random()*x.tracks.length));break;default:L.value<x.tracks.length-1?Z():(L.value=0,K(),I?.play().catch(()=>{}))}}function pe(){I||K(),R.value?(I?.pause(),R.value=!1,F(`pause`)):(I?.play().catch(()=>{}),R.value=!0,F(`play`,L.value))}function X(e){L.value=e,K(),I?.play().catch(()=>{}),R.value=!0,F(`play`,e)}function me(){X(L.value<=0?x.tracks.length-1:L.value-1)}function Z(){X(L.value>=x.tracks.length-1?0:L.value+1)}function Q(e){if(!I||!B.value)return;let t=e.currentTarget.getBoundingClientRect(),n=Math.max(0,Math.min(1,(e.clientX-t.left)/t.width));I.currentTime=n*B.value,z.value=I.currentTime}function he(e){V.value=e,I&&(I.volume=e/100)}function ge(){V.value>0?(H.value=V.value,V.value=0):V.value=H.value||70,I&&(I.volume=V.value/100)}let $=[`list`,`loop`,`single`,`shuffle`];function _e(){W.value=$[($.indexOf(W.value)+1)%$.length],F(`modeChange`,W.value)}return b(()=>x.tracks,()=>{L.value=0,K()}),b(()=>x.initialIndex,e=>{e!==void 0&&e!==L.value&&(L.value=e,K())}),m(()=>{I&&=(I.pause(),I.removeEventListener(`timeupdate`,q),I.removeEventListener(`loadedmetadata`,J),I.removeEventListener(`ended`,Y),null)}),x.autoplay&&x.tracks.length>0&&X(L.value),(t,i)=>{let d=n;return h(),s(`div`,{class:f([`c-audio-player`,{"is-minimal":t.theme===`minimal`}])},[o(` ================ Now Playing ================ `),c(`div`,w,[t.showCover?(h(),s(`div`,T,[G.value?.cover?(h(),s(`img`,{key:0,src:G.value.cover,alt:G.value.title},null,8,E)):(h(),a(e,{key:1,name:`mdi:music-note`,class:`c-audio-player__cover-placeholder`}))])):o(`v-if`,!0),c(`div`,D,[c(`div`,O,v(G.value?.title??`未选择曲目`),1),G.value?.artist?(h(),s(`div`,k,v(G.value.artist),1)):o(`v-if`,!0)])]),o(` ================ Progress ================ `),t.theme===`minimal`?o(`v-if`,!0):(h(),s(`div`,A,[c(`div`,{class:`c-audio-player__progress-bar`,onClick:Q},[c(`div`,{class:`c-audio-player__progress-fill`,style:p({width:`${le.value}%`})},null,4)]),c(`div`,ee,[c(`span`,null,v(y(C)(z.value)),1),c(`span`,null,v(y(C)(B.value)),1)])])),o(` ================ Controls ================ `),c(`div`,te,[c(`button`,{class:`c-audio-player__ctrl-btn is-mode`,title:fe.value,onClick:_e},[u(e,{name:de.value},null,8,[`name`])],8,ne),c(`button`,{class:`c-audio-player__ctrl-btn is-skip`,title:`上一曲`,onClick:me},[u(e,{name:`mdi:skip-previous`})]),c(`button`,{class:`c-audio-player__ctrl-btn is-play`,title:R.value?`暂停`:`播放`,onClick:pe},[u(e,{name:R.value?`mdi:pause`:`mdi:play`},null,8,[`name`])],8,re),c(`button`,{class:`c-audio-player__ctrl-btn is-skip`,title:`下一曲`,onClick:Z},[u(e,{name:`mdi:skip-next`})]),c(`button`,{class:`c-audio-player__ctrl-btn is-mode`,title:`播放列表`,onClick:i[0]||=e=>U.value=!U.value},[u(e,{name:`mdi:playlist-music`})])]),o(` ================ Volume ================ `),t.theme===`minimal`?o(`v-if`,!0):(h(),s(`div`,ie,[u(e,{name:ue.value,class:`c-audio-player__volume-icon`,onClick:ge},null,8,[`name`]),u(d,{value:V.value,"onUpdate:value":[i[1]||=e=>V.value=e,he],min:0,max:100,step:1,class:`c-audio-player__volume-slider`},null,8,[`value`])])),o(` ================ Playlist ================ `),t.showPlaylist&&U.value&&t.theme!==`minimal`?(h(),s(`div`,ae,[c(`div`,oe,[i[2]||=c(`span`,null,`播放列表`,-1),c(`span`,null,v(t.tracks.length)+` 首`,1)]),(h(!0),s(r,null,_(t.tracks,(t,n)=>(h(),s(`div`,{key:t.id,class:f([`c-audio-player__track`,{"is-active":n===L.value}]),onClick:e=>X(n)},[c(`span`,ce,[n===L.value&&R.value?(h(),a(e,{key:0,name:`mdi:volume-high`})):(h(),s(r,{key:1},[l(v(n+1),1)],64))]),c(`div`,j,[c(`div`,M,v(t.title),1),t.artist?(h(),s(`div`,N,v(t.artist),1)):o(`v-if`,!0)]),t.duration?(h(),s(`span`,P,v(y(C)(t.duration)),1)):o(`v-if`,!0)],10,se))),128))])):o(`v-if`,!0)],2)}}}),[[`__scopeId`,`data-v-16f18960`]]);export{C as i,x as n,S as r,F as t};
+//# sourceMappingURL=C_AudioPlayer2.js.map

package/dist/C_AudioPlayer2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_AudioPlayer2.js","names":["theme","showCover","showPlaylist","tracks"],"sources":["../src/components/C_AudioPlayer/types.ts","../src/components/C_AudioPlayer/index.vue","../src/components/C_AudioPlayer/index.vue","../src/components/C_AudioPlayer/index.vue"],"sourcesContent":["/**\r\n * @Description: Audio player component type definitions\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n */\r\n\r\n/** Single audio track */\r\nexport interface AudioTrack {\r\n  /** Unique identifier */\r\n  id: string | number\r\n  /** Track title */\r\n  title: string\r\n  /** Artist / author */\r\n  artist?: string\r\n  /** Audio source URL */\r\n  src: string\r\n  /** Cover image URL */\r\n  cover?: string\r\n  /** Duration in seconds (optional, for static display) */\r\n  duration?: number\r\n  /** Extra data */\r\n  extra?: Record<string, unknown>\r\n}\r\n\r\n/** Component props */\r\nexport interface AudioPlayerProps {\r\n  /** Playlist */\r\n  tracks: AudioTrack[]\r\n  /** Initial active index */\r\n  initialIndex?: number\r\n  /** Whether to show the playlist panel */\r\n  showPlaylist?: boolean\r\n  /** Whether to show the cover art */\r\n  showCover?: boolean\r\n  /** Whether to auto-play on mount */\r\n  autoplay?: boolean\r\n  /** Playback mode */\r\n  mode?: 'list' | 'loop' | 'single' | 'shuffle'\r\n  /** Theme appearance */\r\n  theme?: 'default' | 'minimal'\r\n}\r\n\r\n/** Default props */\r\nexport const DEFAULT_AUDIO_PLAYER_PROPS: Partial<AudioPlayerProps> = {\r\n  initialIndex: 0,\r\n  showPlaylist: true,\r\n  showCover: true,\r\n  autoplay: false,\r\n  mode: 'list',\r\n  theme: 'default',\r\n}\r\n\r\n/** Playback mode icon map */\r\nexport const MODE_ICON_MAP: Record<string, { icon: string; label: string }> = {\r\n  list: { icon: 'mdi:repeat', label: 'List Loop' },\r\n  loop: { icon: 'mdi:repeat-once', label: 'Single Loop' },\r\n  single: { icon: 'mdi:numeric-1-box', label: 'Play Once' },\r\n  shuffle: { icon: 'mdi:shuffle-variant', label: 'Shuffle' },\r\n}\r\n\r\n/** Format seconds to mm:ss */\r\nexport function formatTime(seconds: number): string {\r\n  if (!Number.isFinite(seconds) || seconds < 0) return '00:00'\r\n  const m = Math.floor(seconds / 60)\r\n  const s = Math.floor(seconds % 60)\r\n  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Description: 音频播放器组件\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-audio-player\"\r\n    :class=\"{ 'is-minimal': theme === 'minimal' }\"\r\n  >\r\n    <!-- ================ Now Playing ================ -->\r\n    <div class=\"c-audio-player__now-playing\">\r\n      <div\r\n        v-if=\"showCover\"\r\n        class=\"c-audio-player__cover\"\r\n      >\r\n        <img\r\n          v-if=\"currentTrack?.cover\"\r\n          :src=\"currentTrack.cover\"\r\n          :alt=\"currentTrack.title\"\r\n        />\r\n        <C_Icon\r\n          v-else\r\n          name=\"mdi:music-note\"\r\n          class=\"c-audio-player__cover-placeholder\"\r\n        />\r\n      </div>\r\n      <div class=\"c-audio-player__info\">\r\n        <div class=\"c-audio-player__title\">{{\r\n          currentTrack?.title ?? '未选择曲目'\r\n        }}</div>\r\n        <div\r\n          v-if=\"currentTrack?.artist\"\r\n          class=\"c-audio-player__artist\"\r\n        >\r\n          {{ currentTrack.artist }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ================ Progress ================ -->\r\n    <div\r\n      v-if=\"theme !== 'minimal'\"\r\n      class=\"c-audio-player__progress\"\r\n    >\r\n      <div\r\n        class=\"c-audio-player__progress-bar\"\r\n        @click=\"seekByClick\"\r\n      >\r\n        <div\r\n          class=\"c-audio-player__progress-fill\"\r\n          :style=\"{ width: `${progressPercent}%` }\"\r\n        />\r\n      </div>\r\n      <div class=\"c-audio-player__time\">\r\n        <span>{{ formatTime(currentTime) }}</span>\r\n        <span>{{ formatTime(totalDuration) }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ================ Controls ================ -->\r\n    <div class=\"c-audio-player__controls\">\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-mode\"\r\n        :title=\"currentModeLabel\"\r\n        @click=\"cycleMode\"\r\n      >\r\n        <C_Icon :name=\"currentModeIcon\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-skip\"\r\n        title=\"上一曲\"\r\n        @click=\"prev\"\r\n      >\r\n        <C_Icon name=\"mdi:skip-previous\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-play\"\r\n        :title=\"isPlaying ? '暂停' : '播放'\"\r\n        @click=\"togglePlay\"\r\n      >\r\n        <C_Icon :name=\"isPlaying ? 'mdi:pause' : 'mdi:play'\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-skip\"\r\n        title=\"下一曲\"\r\n        @click=\"next\"\r\n      >\r\n        <C_Icon name=\"mdi:skip-next\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-mode\"\r\n        title=\"播放列表\"\r\n        @click=\"playlistVisible = !playlistVisible\"\r\n      >\r\n        <C_Icon name=\"mdi:playlist-music\" />\r\n      </button>\r\n    </div>\r\n\r\n    <!-- ================ Volume ================ -->\r\n    <div\r\n      v-if=\"theme !== 'minimal'\"\r\n      class=\"c-audio-player__volume\"\r\n    >\r\n      <C_Icon\r\n        :name=\"volumeIcon\"\r\n        class=\"c-audio-player__volume-icon\"\r\n        @click=\"toggleMute\"\r\n      />\r\n      <NSlider\r\n        v-model:value=\"volume\"\r\n        :min=\"0\"\r\n        :max=\"100\"\r\n        :step=\"1\"\r\n        class=\"c-audio-player__volume-slider\"\r\n        @update:value=\"handleVolumeChange\"\r\n      />\r\n    </div>\r\n\r\n    <!-- ================ Playlist ================ -->\r\n    <div\r\n      v-if=\"showPlaylist && playlistVisible && theme !== 'minimal'\"\r\n      class=\"c-audio-player__playlist\"\r\n    >\r\n      <div class=\"c-audio-player__playlist-header\">\r\n        <span>播放列表</span>\r\n        <span>{{ tracks.length }} 首</span>\r\n      </div>\r\n      <div\r\n        v-for=\"(track, idx) in tracks\"\r\n        :key=\"track.id\"\r\n        class=\"c-audio-player__track\"\r\n        :class=\"{ 'is-active': idx === activeIndex }\"\r\n        @click=\"playTrack(idx)\"\r\n      >\r\n        <span class=\"c-audio-player__track-index\">\r\n          <C_Icon\r\n            v-if=\"idx === activeIndex && isPlaying\"\r\n            name=\"mdi:volume-high\"\r\n          />\r\n          <template v-else>{{ idx + 1 }}</template>\r\n        </span>\r\n        <div class=\"c-audio-player__track-info\">\r\n          <div class=\"c-audio-player__track-title\">{{ track.title }}</div>\r\n          <div\r\n            v-if=\"track.artist\"\r\n            class=\"c-audio-player__track-artist\"\r\n          >\r\n            {{ track.artist }}\r\n          </div>\r\n        </div>\r\n        <span\r\n          v-if=\"track.duration\"\r\n          class=\"c-audio-player__track-duration\"\r\n        >\r\n          {{ formatTime(track.duration) }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, onBeforeUnmount, ref, watch } from 'vue'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n  import {\r\n    DEFAULT_AUDIO_PLAYER_PROPS,\r\n    formatTime,\r\n    MODE_ICON_MAP,\r\n    type AudioPlayerProps,\r\n  } from './types'\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      tracks: AudioPlayerProps['tracks']\r\n      initialIndex?: number\r\n      showPlaylist?: boolean\r\n      showCover?: boolean\r\n      autoplay?: boolean\r\n      mode?: AudioPlayerProps['mode']\r\n      theme?: AudioPlayerProps['theme']\r\n    }>(),\r\n    {\r\n      initialIndex: DEFAULT_AUDIO_PLAYER_PROPS.initialIndex,\r\n      showPlaylist: DEFAULT_AUDIO_PLAYER_PROPS.showPlaylist,\r\n      showCover: true,\r\n      autoplay: DEFAULT_AUDIO_PLAYER_PROPS.autoplay,\r\n      mode: DEFAULT_AUDIO_PLAYER_PROPS.mode,\r\n      theme: DEFAULT_AUDIO_PLAYER_PROPS.theme,\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    play: [index: number]\r\n    pause: []\r\n    ended: [index: number]\r\n    modeChange: [mode: string]\r\n  }>()\r\n\r\n  // ==================== Audio Core ====================\r\n\r\n  let audio: HTMLAudioElement | null = null\r\n\r\n  const activeIndex = ref(props.initialIndex ?? 0)\r\n  const isPlaying = ref(false)\r\n  const currentTime = ref(0)\r\n  const totalDuration = ref(0)\r\n  const volume = ref(70)\r\n  const prevVolume = ref(70)\r\n  const playlistVisible = ref(props.showPlaylist)\r\n  const playMode = ref(props.mode ?? 'list')\r\n\r\n  const currentTrack = computed(() => props.tracks[activeIndex.value])\r\n\r\n  const progressPercent = computed(() => {\r\n    if (totalDuration.value === 0) return 0\r\n    return (currentTime.value / totalDuration.value) * 100\r\n  })\r\n\r\n  const volumeIcon = computed(() => {\r\n    if (volume.value === 0) return 'mdi:volume-off'\r\n    if (volume.value < 40) return 'mdi:volume-low'\r\n    if (volume.value < 70) return 'mdi:volume-medium'\r\n    return 'mdi:volume-high'\r\n  })\r\n\r\n  const currentModeIcon = computed(\r\n    () => MODE_ICON_MAP[playMode.value]?.icon ?? 'mdi:repeat'\r\n  )\r\n  const currentModeLabel = computed(\r\n    () => MODE_ICON_MAP[playMode.value]?.label ?? '循环'\r\n  )\r\n\r\n  /** 初始化音频实例 */\r\n  function initAudio() {\r\n    if (audio) {\r\n      audio.pause()\r\n      audio.removeEventListener('timeupdate', onTimeUpdate)\r\n      audio.removeEventListener('loadedmetadata', onMetaLoaded)\r\n      audio.removeEventListener('ended', onEnded)\r\n    }\r\n    const track = currentTrack.value\r\n    if (!track) return\r\n\r\n    audio = new Audio(track.src)\r\n    audio.volume = volume.value / 100\r\n    audio.addEventListener('timeupdate', onTimeUpdate)\r\n    audio.addEventListener('loadedmetadata', onMetaLoaded)\r\n    audio.addEventListener('ended', onEnded)\r\n  }\r\n\r\n  /** 播放进度更新回调 */\r\n  function onTimeUpdate() {\r\n    if (audio) currentTime.value = audio.currentTime\r\n  }\r\n\r\n  /** 音频元数据加载完成回调 */\r\n  function onMetaLoaded() {\r\n    if (audio) totalDuration.value = audio.duration\r\n  }\r\n\r\n  /** 播放结束回调，根据模式决定下一步 */\r\n  function onEnded() {\r\n    emit('ended', activeIndex.value)\r\n    switch (playMode.value) {\r\n      case 'loop':\r\n        audio?.play().catch(() => {})\r\n        break\r\n      case 'single':\r\n        isPlaying.value = false\r\n        break\r\n      case 'shuffle':\r\n        playTrack(Math.floor(Math.random() * props.tracks.length))\r\n        break\r\n      default: // list\r\n        if (activeIndex.value < props.tracks.length - 1) next()\r\n        else {\r\n          activeIndex.value = 0\r\n          initAudio()\r\n          audio?.play().catch(() => {})\r\n        }\r\n    }\r\n  }\r\n\r\n  /** 切换播放/暂停 */\r\n  function togglePlay() {\r\n    if (!audio) initAudio()\r\n    if (isPlaying.value) {\r\n      audio?.pause()\r\n      isPlaying.value = false\r\n      emit('pause')\r\n    } else {\r\n      audio?.play().catch(() => {})\r\n      isPlaying.value = true\r\n      emit('play', activeIndex.value)\r\n    }\r\n  }\r\n\r\n  /** 播放指定索引的曲目 */\r\n  function playTrack(idx: number) {\r\n    activeIndex.value = idx\r\n    initAudio()\r\n    audio?.play().catch(() => {})\r\n    isPlaying.value = true\r\n    emit('play', idx)\r\n  }\r\n\r\n  /** 上一曲 */\r\n  function prev() {\r\n    const idx =\r\n      activeIndex.value <= 0 ? props.tracks.length - 1 : activeIndex.value - 1\r\n    playTrack(idx)\r\n  }\r\n\r\n  /** 下一曲 */\r\n  function next() {\r\n    const idx =\r\n      activeIndex.value >= props.tracks.length - 1 ? 0 : activeIndex.value + 1\r\n    playTrack(idx)\r\n  }\r\n\r\n  /** 点击进度条跳转播放位置 */\r\n  function seekByClick(e: MouseEvent) {\r\n    if (!audio || !totalDuration.value) return\r\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()\r\n    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))\r\n    audio.currentTime = ratio * totalDuration.value\r\n    currentTime.value = audio.currentTime\r\n  }\r\n\r\n  /** 处理音量变更 */\r\n  function handleVolumeChange(val: number) {\r\n    volume.value = val\r\n    if (audio) audio.volume = val / 100\r\n  }\r\n\r\n  /** 切换静音状态 */\r\n  function toggleMute() {\r\n    if (volume.value > 0) {\r\n      prevVolume.value = volume.value\r\n      volume.value = 0\r\n    } else {\r\n      volume.value = prevVolume.value || 70\r\n    }\r\n    if (audio) audio.volume = volume.value / 100\r\n  }\r\n\r\n  const MODES = ['list', 'loop', 'single', 'shuffle'] as const\r\n  /** 循环切换播放模式 */\r\n  function cycleMode() {\r\n    const idx = MODES.indexOf(playMode.value as (typeof MODES)[number])\r\n    playMode.value = MODES[(idx + 1) % MODES.length]\r\n    emit('modeChange', playMode.value)\r\n  }\r\n\r\n  // ==================== Lifecycle ====================\r\n\r\n  watch(\r\n    () => props.tracks,\r\n    () => {\r\n      activeIndex.value = 0\r\n      initAudio()\r\n    }\r\n  )\r\n\r\n  watch(\r\n    () => props.initialIndex,\r\n    val => {\r\n      if (val !== undefined && val !== activeIndex.value) {\r\n        activeIndex.value = val\r\n        initAudio()\r\n      }\r\n    }\r\n  )\r\n\r\n  onBeforeUnmount(() => {\r\n    if (audio) {\r\n      audio.pause()\r\n      audio.removeEventListener('timeupdate', onTimeUpdate)\r\n      audio.removeEventListener('loadedmetadata', onMetaLoaded)\r\n      audio.removeEventListener('ended', onEnded)\r\n      audio = null\r\n    }\r\n  })\r\n\r\n  // 自动播放\r\n  if (props.autoplay && props.tracks.length > 0) {\r\n    playTrack(activeIndex.value)\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Description: 音频播放器组件\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-audio-player\"\r\n    :class=\"{ 'is-minimal': theme === 'minimal' }\"\r\n  >\r\n    <!-- ================ Now Playing ================ -->\r\n    <div class=\"c-audio-player__now-playing\">\r\n      <div\r\n        v-if=\"showCover\"\r\n        class=\"c-audio-player__cover\"\r\n      >\r\n        <img\r\n          v-if=\"currentTrack?.cover\"\r\n          :src=\"currentTrack.cover\"\r\n          :alt=\"currentTrack.title\"\r\n        />\r\n        <C_Icon\r\n          v-else\r\n          name=\"mdi:music-note\"\r\n          class=\"c-audio-player__cover-placeholder\"\r\n        />\r\n      </div>\r\n      <div class=\"c-audio-player__info\">\r\n        <div class=\"c-audio-player__title\">{{\r\n          currentTrack?.title ?? '未选择曲目'\r\n        }}</div>\r\n        <div\r\n          v-if=\"currentTrack?.artist\"\r\n          class=\"c-audio-player__artist\"\r\n        >\r\n          {{ currentTrack.artist }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ================ Progress ================ -->\r\n    <div\r\n      v-if=\"theme !== 'minimal'\"\r\n      class=\"c-audio-player__progress\"\r\n    >\r\n      <div\r\n        class=\"c-audio-player__progress-bar\"\r\n        @click=\"seekByClick\"\r\n      >\r\n        <div\r\n          class=\"c-audio-player__progress-fill\"\r\n          :style=\"{ width: `${progressPercent}%` }\"\r\n        />\r\n      </div>\r\n      <div class=\"c-audio-player__time\">\r\n        <span>{{ formatTime(currentTime) }}</span>\r\n        <span>{{ formatTime(totalDuration) }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ================ Controls ================ -->\r\n    <div class=\"c-audio-player__controls\">\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-mode\"\r\n        :title=\"currentModeLabel\"\r\n        @click=\"cycleMode\"\r\n      >\r\n        <C_Icon :name=\"currentModeIcon\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-skip\"\r\n        title=\"上一曲\"\r\n        @click=\"prev\"\r\n      >\r\n        <C_Icon name=\"mdi:skip-previous\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-play\"\r\n        :title=\"isPlaying ? '暂停' : '播放'\"\r\n        @click=\"togglePlay\"\r\n      >\r\n        <C_Icon :name=\"isPlaying ? 'mdi:pause' : 'mdi:play'\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-skip\"\r\n        title=\"下一曲\"\r\n        @click=\"next\"\r\n      >\r\n        <C_Icon name=\"mdi:skip-next\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-mode\"\r\n        title=\"播放列表\"\r\n        @click=\"playlistVisible = !playlistVisible\"\r\n      >\r\n        <C_Icon name=\"mdi:playlist-music\" />\r\n      </button>\r\n    </div>\r\n\r\n    <!-- ================ Volume ================ -->\r\n    <div\r\n      v-if=\"theme !== 'minimal'\"\r\n      class=\"c-audio-player__volume\"\r\n    >\r\n      <C_Icon\r\n        :name=\"volumeIcon\"\r\n        class=\"c-audio-player__volume-icon\"\r\n        @click=\"toggleMute\"\r\n      />\r\n      <NSlider\r\n        v-model:value=\"volume\"\r\n        :min=\"0\"\r\n        :max=\"100\"\r\n        :step=\"1\"\r\n        class=\"c-audio-player__volume-slider\"\r\n        @update:value=\"handleVolumeChange\"\r\n      />\r\n    </div>\r\n\r\n    <!-- ================ Playlist ================ -->\r\n    <div\r\n      v-if=\"showPlaylist && playlistVisible && theme !== 'minimal'\"\r\n      class=\"c-audio-player__playlist\"\r\n    >\r\n      <div class=\"c-audio-player__playlist-header\">\r\n        <span>播放列表</span>\r\n        <span>{{ tracks.length }} 首</span>\r\n      </div>\r\n      <div\r\n        v-for=\"(track, idx) in tracks\"\r\n        :key=\"track.id\"\r\n        class=\"c-audio-player__track\"\r\n        :class=\"{ 'is-active': idx === activeIndex }\"\r\n        @click=\"playTrack(idx)\"\r\n      >\r\n        <span class=\"c-audio-player__track-index\">\r\n          <C_Icon\r\n            v-if=\"idx === activeIndex && isPlaying\"\r\n            name=\"mdi:volume-high\"\r\n          />\r\n          <template v-else>{{ idx + 1 }}</template>\r\n        </span>\r\n        <div class=\"c-audio-player__track-info\">\r\n          <div class=\"c-audio-player__track-title\">{{ track.title }}</div>\r\n          <div\r\n            v-if=\"track.artist\"\r\n            class=\"c-audio-player__track-artist\"\r\n          >\r\n            {{ track.artist }}\r\n          </div>\r\n        </div>\r\n        <span\r\n          v-if=\"track.duration\"\r\n          class=\"c-audio-player__track-duration\"\r\n        >\r\n          {{ formatTime(track.duration) }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, onBeforeUnmount, ref, watch } from 'vue'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n  import {\r\n    DEFAULT_AUDIO_PLAYER_PROPS,\r\n    formatTime,\r\n    MODE_ICON_MAP,\r\n    type AudioPlayerProps,\r\n  } from './types'\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      tracks: AudioPlayerProps['tracks']\r\n      initialIndex?: number\r\n      showPlaylist?: boolean\r\n      showCover?: boolean\r\n      autoplay?: boolean\r\n      mode?: AudioPlayerProps['mode']\r\n      theme?: AudioPlayerProps['theme']\r\n    }>(),\r\n    {\r\n      initialIndex: DEFAULT_AUDIO_PLAYER_PROPS.initialIndex,\r\n      showPlaylist: DEFAULT_AUDIO_PLAYER_PROPS.showPlaylist,\r\n      showCover: true,\r\n      autoplay: DEFAULT_AUDIO_PLAYER_PROPS.autoplay,\r\n      mode: DEFAULT_AUDIO_PLAYER_PROPS.mode,\r\n      theme: DEFAULT_AUDIO_PLAYER_PROPS.theme,\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    play: [index: number]\r\n    pause: []\r\n    ended: [index: number]\r\n    modeChange: [mode: string]\r\n  }>()\r\n\r\n  // ==================== Audio Core ====================\r\n\r\n  let audio: HTMLAudioElement | null = null\r\n\r\n  const activeIndex = ref(props.initialIndex ?? 0)\r\n  const isPlaying = ref(false)\r\n  const currentTime = ref(0)\r\n  const totalDuration = ref(0)\r\n  const volume = ref(70)\r\n  const prevVolume = ref(70)\r\n  const playlistVisible = ref(props.showPlaylist)\r\n  const playMode = ref(props.mode ?? 'list')\r\n\r\n  const currentTrack = computed(() => props.tracks[activeIndex.value])\r\n\r\n  const progressPercent = computed(() => {\r\n    if (totalDuration.value === 0) return 0\r\n    return (currentTime.value / totalDuration.value) * 100\r\n  })\r\n\r\n  const volumeIcon = computed(() => {\r\n    if (volume.value === 0) return 'mdi:volume-off'\r\n    if (volume.value < 40) return 'mdi:volume-low'\r\n    if (volume.value < 70) return 'mdi:volume-medium'\r\n    return 'mdi:volume-high'\r\n  })\r\n\r\n  const currentModeIcon = computed(\r\n    () => MODE_ICON_MAP[playMode.value]?.icon ?? 'mdi:repeat'\r\n  )\r\n  const currentModeLabel = computed(\r\n    () => MODE_ICON_MAP[playMode.value]?.label ?? '循环'\r\n  )\r\n\r\n  /** 初始化音频实例 */\r\n  function initAudio() {\r\n    if (audio) {\r\n      audio.pause()\r\n      audio.removeEventListener('timeupdate', onTimeUpdate)\r\n      audio.removeEventListener('loadedmetadata', onMetaLoaded)\r\n      audio.removeEventListener('ended', onEnded)\r\n    }\r\n    const track = currentTrack.value\r\n    if (!track) return\r\n\r\n    audio = new Audio(track.src)\r\n    audio.volume = volume.value / 100\r\n    audio.addEventListener('timeupdate', onTimeUpdate)\r\n    audio.addEventListener('loadedmetadata', onMetaLoaded)\r\n    audio.addEventListener('ended', onEnded)\r\n  }\r\n\r\n  /** 播放进度更新回调 */\r\n  function onTimeUpdate() {\r\n    if (audio) currentTime.value = audio.currentTime\r\n  }\r\n\r\n  /** 音频元数据加载完成回调 */\r\n  function onMetaLoaded() {\r\n    if (audio) totalDuration.value = audio.duration\r\n  }\r\n\r\n  /** 播放结束回调，根据模式决定下一步 */\r\n  function onEnded() {\r\n    emit('ended', activeIndex.value)\r\n    switch (playMode.value) {\r\n      case 'loop':\r\n        audio?.play().catch(() => {})\r\n        break\r\n      case 'single':\r\n        isPlaying.value = false\r\n        break\r\n      case 'shuffle':\r\n        playTrack(Math.floor(Math.random() * props.tracks.length))\r\n        break\r\n      default: // list\r\n        if (activeIndex.value < props.tracks.length - 1) next()\r\n        else {\r\n          activeIndex.value = 0\r\n          initAudio()\r\n          audio?.play().catch(() => {})\r\n        }\r\n    }\r\n  }\r\n\r\n  /** 切换播放/暂停 */\r\n  function togglePlay() {\r\n    if (!audio) initAudio()\r\n    if (isPlaying.value) {\r\n      audio?.pause()\r\n      isPlaying.value = false\r\n      emit('pause')\r\n    } else {\r\n      audio?.play().catch(() => {})\r\n      isPlaying.value = true\r\n      emit('play', activeIndex.value)\r\n    }\r\n  }\r\n\r\n  /** 播放指定索引的曲目 */\r\n  function playTrack(idx: number) {\r\n    activeIndex.value = idx\r\n    initAudio()\r\n    audio?.play().catch(() => {})\r\n    isPlaying.value = true\r\n    emit('play', idx)\r\n  }\r\n\r\n  /** 上一曲 */\r\n  function prev() {\r\n    const idx =\r\n      activeIndex.value <= 0 ? props.tracks.length - 1 : activeIndex.value - 1\r\n    playTrack(idx)\r\n  }\r\n\r\n  /** 下一曲 */\r\n  function next() {\r\n    const idx =\r\n      activeIndex.value >= props.tracks.length - 1 ? 0 : activeIndex.value + 1\r\n    playTrack(idx)\r\n  }\r\n\r\n  /** 点击进度条跳转播放位置 */\r\n  function seekByClick(e: MouseEvent) {\r\n    if (!audio || !totalDuration.value) return\r\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()\r\n    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))\r\n    audio.currentTime = ratio * totalDuration.value\r\n    currentTime.value = audio.currentTime\r\n  }\r\n\r\n  /** 处理音量变更 */\r\n  function handleVolumeChange(val: number) {\r\n    volume.value = val\r\n    if (audio) audio.volume = val / 100\r\n  }\r\n\r\n  /** 切换静音状态 */\r\n  function toggleMute() {\r\n    if (volume.value > 0) {\r\n      prevVolume.value = volume.value\r\n      volume.value = 0\r\n    } else {\r\n      volume.value = prevVolume.value || 70\r\n    }\r\n    if (audio) audio.volume = volume.value / 100\r\n  }\r\n\r\n  const MODES = ['list', 'loop', 'single', 'shuffle'] as const\r\n  /** 循环切换播放模式 */\r\n  function cycleMode() {\r\n    const idx = MODES.indexOf(playMode.value as (typeof MODES)[number])\r\n    playMode.value = MODES[(idx + 1) % MODES.length]\r\n    emit('modeChange', playMode.value)\r\n  }\r\n\r\n  // ==================== Lifecycle ====================\r\n\r\n  watch(\r\n    () => props.tracks,\r\n    () => {\r\n      activeIndex.value = 0\r\n      initAudio()\r\n    }\r\n  )\r\n\r\n  watch(\r\n    () => props.initialIndex,\r\n    val => {\r\n      if (val !== undefined && val !== activeIndex.value) {\r\n        activeIndex.value = val\r\n        initAudio()\r\n      }\r\n    }\r\n  )\r\n\r\n  onBeforeUnmount(() => {\r\n    if (audio) {\r\n      audio.pause()\r\n      audio.removeEventListener('timeupdate', onTimeUpdate)\r\n      audio.removeEventListener('loadedmetadata', onMetaLoaded)\r\n      audio.removeEventListener('ended', onEnded)\r\n      audio = null\r\n    }\r\n  })\r\n\r\n  // 自动播放\r\n  if (props.autoplay && props.tracks.length > 0) {\r\n    playTrack(activeIndex.value)\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Description: 音频播放器组件\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-audio-player\"\r\n    :class=\"{ 'is-minimal': theme === 'minimal' }\"\r\n  >\r\n    <!-- ================ Now Playing ================ -->\r\n    <div class=\"c-audio-player__now-playing\">\r\n      <div\r\n        v-if=\"showCover\"\r\n        class=\"c-audio-player__cover\"\r\n      >\r\n        <img\r\n          v-if=\"currentTrack?.cover\"\r\n          :src=\"currentTrack.cover\"\r\n          :alt=\"currentTrack.title\"\r\n        />\r\n        <C_Icon\r\n          v-else\r\n          name=\"mdi:music-note\"\r\n          class=\"c-audio-player__cover-placeholder\"\r\n        />\r\n      </div>\r\n      <div class=\"c-audio-player__info\">\r\n        <div class=\"c-audio-player__title\">{{\r\n          currentTrack?.title ?? '未选择曲目'\r\n        }}</div>\r\n        <div\r\n          v-if=\"currentTrack?.artist\"\r\n          class=\"c-audio-player__artist\"\r\n        >\r\n          {{ currentTrack.artist }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ================ Progress ================ -->\r\n    <div\r\n      v-if=\"theme !== 'minimal'\"\r\n      class=\"c-audio-player__progress\"\r\n    >\r\n      <div\r\n        class=\"c-audio-player__progress-bar\"\r\n        @click=\"seekByClick\"\r\n      >\r\n        <div\r\n          class=\"c-audio-player__progress-fill\"\r\n          :style=\"{ width: `${progressPercent}%` }\"\r\n        />\r\n      </div>\r\n      <div class=\"c-audio-player__time\">\r\n        <span>{{ formatTime(currentTime) }}</span>\r\n        <span>{{ formatTime(totalDuration) }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ================ Controls ================ -->\r\n    <div class=\"c-audio-player__controls\">\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-mode\"\r\n        :title=\"currentModeLabel\"\r\n        @click=\"cycleMode\"\r\n      >\r\n        <C_Icon :name=\"currentModeIcon\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-skip\"\r\n        title=\"上一曲\"\r\n        @click=\"prev\"\r\n      >\r\n        <C_Icon name=\"mdi:skip-previous\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-play\"\r\n        :title=\"isPlaying ? '暂停' : '播放'\"\r\n        @click=\"togglePlay\"\r\n      >\r\n        <C_Icon :name=\"isPlaying ? 'mdi:pause' : 'mdi:play'\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-skip\"\r\n        title=\"下一曲\"\r\n        @click=\"next\"\r\n      >\r\n        <C_Icon name=\"mdi:skip-next\" />\r\n      </button>\r\n      <button\r\n        class=\"c-audio-player__ctrl-btn is-mode\"\r\n        title=\"播放列表\"\r\n        @click=\"playlistVisible = !playlistVisible\"\r\n      >\r\n        <C_Icon name=\"mdi:playlist-music\" />\r\n      </button>\r\n    </div>\r\n\r\n    <!-- ================ Volume ================ -->\r\n    <div\r\n      v-if=\"theme !== 'minimal'\"\r\n      class=\"c-audio-player__volume\"\r\n    >\r\n      <C_Icon\r\n        :name=\"volumeIcon\"\r\n        class=\"c-audio-player__volume-icon\"\r\n        @click=\"toggleMute\"\r\n      />\r\n      <NSlider\r\n        v-model:value=\"volume\"\r\n        :min=\"0\"\r\n        :max=\"100\"\r\n        :step=\"1\"\r\n        class=\"c-audio-player__volume-slider\"\r\n        @update:value=\"handleVolumeChange\"\r\n      />\r\n    </div>\r\n\r\n    <!-- ================ Playlist ================ -->\r\n    <div\r\n      v-if=\"showPlaylist && playlistVisible && theme !== 'minimal'\"\r\n      class=\"c-audio-player__playlist\"\r\n    >\r\n      <div class=\"c-audio-player__playlist-header\">\r\n        <span>播放列表</span>\r\n        <span>{{ tracks.length }} 首</span>\r\n      </div>\r\n      <div\r\n        v-for=\"(track, idx) in tracks\"\r\n        :key=\"track.id\"\r\n        class=\"c-audio-player__track\"\r\n        :class=\"{ 'is-active': idx === activeIndex }\"\r\n        @click=\"playTrack(idx)\"\r\n      >\r\n        <span class=\"c-audio-player__track-index\">\r\n          <C_Icon\r\n            v-if=\"idx === activeIndex && isPlaying\"\r\n            name=\"mdi:volume-high\"\r\n          />\r\n          <template v-else>{{ idx + 1 }}</template>\r\n        </span>\r\n        <div class=\"c-audio-player__track-info\">\r\n          <div class=\"c-audio-player__track-title\">{{ track.title }}</div>\r\n          <div\r\n            v-if=\"track.artist\"\r\n            class=\"c-audio-player__track-artist\"\r\n          >\r\n            {{ track.artist }}\r\n          </div>\r\n        </div>\r\n        <span\r\n          v-if=\"track.duration\"\r\n          class=\"c-audio-player__track-duration\"\r\n        >\r\n          {{ formatTime(track.duration) }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, onBeforeUnmount, ref, watch } from 'vue'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n  import {\r\n    DEFAULT_AUDIO_PLAYER_PROPS,\r\n    formatTime,\r\n    MODE_ICON_MAP,\r\n    type AudioPlayerProps,\r\n  } from './types'\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      tracks: AudioPlayerProps['tracks']\r\n      initialIndex?: number\r\n      showPlaylist?: boolean\r\n      showCover?: boolean\r\n      autoplay?: boolean\r\n      mode?: AudioPlayerProps['mode']\r\n      theme?: AudioPlayerProps['theme']\r\n    }>(),\r\n    {\r\n      initialIndex: DEFAULT_AUDIO_PLAYER_PROPS.initialIndex,\r\n      showPlaylist: DEFAULT_AUDIO_PLAYER_PROPS.showPlaylist,\r\n      showCover: true,\r\n      autoplay: DEFAULT_AUDIO_PLAYER_PROPS.autoplay,\r\n      mode: DEFAULT_AUDIO_PLAYER_PROPS.mode,\r\n      theme: DEFAULT_AUDIO_PLAYER_PROPS.theme,\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    play: [index: number]\r\n    pause: []\r\n    ended: [index: number]\r\n    modeChange: [mode: string]\r\n  }>()\r\n\r\n  // ==================== Audio Core ====================\r\n\r\n  let audio: HTMLAudioElement | null = null\r\n\r\n  const activeIndex = ref(props.initialIndex ?? 0)\r\n  const isPlaying = ref(false)\r\n  const currentTime = ref(0)\r\n  const totalDuration = ref(0)\r\n  const volume = ref(70)\r\n  const prevVolume = ref(70)\r\n  const playlistVisible = ref(props.showPlaylist)\r\n  const playMode = ref(props.mode ?? 'list')\r\n\r\n  const currentTrack = computed(() => props.tracks[activeIndex.value])\r\n\r\n  const progressPercent = computed(() => {\r\n    if (totalDuration.value === 0) return 0\r\n    return (currentTime.value / totalDuration.value) * 100\r\n  })\r\n\r\n  const volumeIcon = computed(() => {\r\n    if (volume.value === 0) return 'mdi:volume-off'\r\n    if (volume.value < 40) return 'mdi:volume-low'\r\n    if (volume.value < 70) return 'mdi:volume-medium'\r\n    return 'mdi:volume-high'\r\n  })\r\n\r\n  const currentModeIcon = computed(\r\n    () => MODE_ICON_MAP[playMode.value]?.icon ?? 'mdi:repeat'\r\n  )\r\n  const currentModeLabel = computed(\r\n    () => MODE_ICON_MAP[playMode.value]?.label ?? '循环'\r\n  )\r\n\r\n  /** 初始化音频实例 */\r\n  function initAudio() {\r\n    if (audio) {\r\n      audio.pause()\r\n      audio.removeEventListener('timeupdate', onTimeUpdate)\r\n      audio.removeEventListener('loadedmetadata', onMetaLoaded)\r\n      audio.removeEventListener('ended', onEnded)\r\n    }\r\n    const track = currentTrack.value\r\n    if (!track) return\r\n\r\n    audio = new Audio(track.src)\r\n    audio.volume = volume.value / 100\r\n    audio.addEventListener('timeupdate', onTimeUpdate)\r\n    audio.addEventListener('loadedmetadata', onMetaLoaded)\r\n    audio.addEventListener('ended', onEnded)\r\n  }\r\n\r\n  /** 播放进度更新回调 */\r\n  function onTimeUpdate() {\r\n    if (audio) currentTime.value = audio.currentTime\r\n  }\r\n\r\n  /** 音频元数据加载完成回调 */\r\n  function onMetaLoaded() {\r\n    if (audio) totalDuration.value = audio.duration\r\n  }\r\n\r\n  /** 播放结束回调，根据模式决定下一步 */\r\n  function onEnded() {\r\n    emit('ended', activeIndex.value)\r\n    switch (playMode.value) {\r\n      case 'loop':\r\n        audio?.play().catch(() => {})\r\n        break\r\n      case 'single':\r\n        isPlaying.value = false\r\n        break\r\n      case 'shuffle':\r\n        playTrack(Math.floor(Math.random() * props.tracks.length))\r\n        break\r\n      default: // list\r\n        if (activeIndex.value < props.tracks.length - 1) next()\r\n        else {\r\n          activeIndex.value = 0\r\n          initAudio()\r\n          audio?.play().catch(() => {})\r\n        }\r\n    }\r\n  }\r\n\r\n  /** 切换播放/暂停 */\r\n  function togglePlay() {\r\n    if (!audio) initAudio()\r\n    if (isPlaying.value) {\r\n      audio?.pause()\r\n      isPlaying.value = false\r\n      emit('pause')\r\n    } else {\r\n      audio?.play().catch(() => {})\r\n      isPlaying.value = true\r\n      emit('play', activeIndex.value)\r\n    }\r\n  }\r\n\r\n  /** 播放指定索引的曲目 */\r\n  function playTrack(idx: number) {\r\n    activeIndex.value = idx\r\n    initAudio()\r\n    audio?.play().catch(() => {})\r\n    isPlaying.value = true\r\n    emit('play', idx)\r\n  }\r\n\r\n  /** 上一曲 */\r\n  function prev() {\r\n    const idx =\r\n      activeIndex.value <= 0 ? props.tracks.length - 1 : activeIndex.value - 1\r\n    playTrack(idx)\r\n  }\r\n\r\n  /** 下一曲 */\r\n  function next() {\r\n    const idx =\r\n      activeIndex.value >= props.tracks.length - 1 ? 0 : activeIndex.value + 1\r\n    playTrack(idx)\r\n  }\r\n\r\n  /** 点击进度条跳转播放位置 */\r\n  function seekByClick(e: MouseEvent) {\r\n    if (!audio || !totalDuration.value) return\r\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()\r\n    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))\r\n    audio.currentTime = ratio * totalDuration.value\r\n    currentTime.value = audio.currentTime\r\n  }\r\n\r\n  /** 处理音量变更 */\r\n  function handleVolumeChange(val: number) {\r\n    volume.value = val\r\n    if (audio) audio.volume = val / 100\r\n  }\r\n\r\n  /** 切换静音状态 */\r\n  function toggleMute() {\r\n    if (volume.value > 0) {\r\n      prevVolume.value = volume.value\r\n      volume.value = 0\r\n    } else {\r\n      volume.value = prevVolume.value || 70\r\n    }\r\n    if (audio) audio.volume = volume.value / 100\r\n  }\r\n\r\n  const MODES = ['list', 'loop', 'single', 'shuffle'] as const\r\n  /** 循环切换播放模式 */\r\n  function cycleMode() {\r\n    const idx = MODES.indexOf(playMode.value as (typeof MODES)[number])\r\n    playMode.value = MODES[(idx + 1) % MODES.length]\r\n    emit('modeChange', playMode.value)\r\n  }\r\n\r\n  // ==================== Lifecycle ====================\r\n\r\n  watch(\r\n    () => props.tracks,\r\n    () => {\r\n      activeIndex.value = 0\r\n      initAudio()\r\n    }\r\n  )\r\n\r\n  watch(\r\n    () => props.initialIndex,\r\n    val => {\r\n      if (val !== undefined && val !== activeIndex.value) {\r\n        activeIndex.value = val\r\n        initAudio()\r\n      }\r\n    }\r\n  )\r\n\r\n  onBeforeUnmount(() => {\r\n    if (audio) {\r\n      audio.pause()\r\n      audio.removeEventListener('timeupdate', onTimeUpdate)\r\n      audio.removeEventListener('loadedmetadata', onMetaLoaded)\r\n      audio.removeEventListener('ended', onEnded)\r\n      audio = null\r\n    }\r\n  })\r\n\r\n  // 自动播放\r\n  if (props.autoplay && props.tracks.length > 0) {\r\n    playTrack(activeIndex.value)\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n"],"mappings":"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"}

package/dist/C_AvatarGroup-CtPhfH9h.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_AvatarGroup-CtPhfH9h.css","names":[],"sources":["../src/components/C_AvatarGroup/index.vue?vue&type=style&index=0&scoped=1b2d9e6f&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//**\n * C_AvatarGroup — 头像组组件样式\n */\n.c-avatar-group[data-v-1b2d9e6f] {\n  display: inline-flex;\n  align-items: center;\n  /* ======================== 单个头像 ======================== */\n  /* ---- 头像图片 ---- */\n  /* ---- 首字母 fallback ---- */\n  /* ---- 状态指示点 ---- */\n  /* ======================== 溢出 +N ======================== */\n}\n.c-avatar-group.is-rtl[data-v-1b2d9e6f] {\n  flex-direction: row-reverse;\n}\n.c-avatar-group__item[data-v-1b2d9e6f] {\n  position: relative;\n  flex-shrink: 0;\n  border: 2px solid var(--card-color);\n  background: var(--card-color);\n  transition: transform 0.2s, z-index 0.2s, box-shadow 0.2s;\n  cursor: default;\n  z-index: 1;\n}\n.c-avatar-group__item.is-circle[data-v-1b2d9e6f] {\n  border-radius: 50%;\n}\n.c-avatar-group__item.is-square[data-v-1b2d9e6f] {\n  border-radius: 6px;\n}\n.c-avatar-group__item.is-clickable[data-v-1b2d9e6f] {\n  cursor: pointer;\n}\n.c-avatar-group__item.is-clickable[data-v-1b2d9e6f]:hover {\n  transform: translateY(-3px) scale(1.08);\n  z-index: 10;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n.c-avatar-group__item[data-v-1b2d9e6f]:hover {\n  z-index: 10;\n}\n.c-avatar-group__img[data-v-1b2d9e6f] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.is-circle .c-avatar-group__img[data-v-1b2d9e6f] {\n  border-radius: 50%;\n}\n.is-square .c-avatar-group__img[data-v-1b2d9e6f] {\n  border-radius: 4px;\n}\n.c-avatar-group__initials[data-v-1b2d9e6f] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  font-weight: 600;\n  user-select: none;\n}\n.is-circle .c-avatar-group__initials[data-v-1b2d9e6f] {\n  border-radius: 50%;\n}\n.is-square .c-avatar-group__initials[data-v-1b2d9e6f] {\n  border-radius: 4px;\n}\n.c-avatar-group__status[data-v-1b2d9e6f] {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border-radius: 50%;\n  border: 2px solid var(--card-color);\n  z-index: 2;\n}\n.c-avatar-group__overflow[data-v-1b2d9e6f] {\n  position: relative;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid var(--card-color);\n  background: color-mix(in srgb, var(--primary-color) 12%, var(--card-color));\n  color: var(--primary-color);\n  font-weight: 700;\n  z-index: 0;\n  transition: transform 0.2s, box-shadow 0.2s;\n}\n.c-avatar-group__overflow.is-circle[data-v-1b2d9e6f] {\n  border-radius: 50%;\n}\n.c-avatar-group__overflow.is-square[data-v-1b2d9e6f] {\n  border-radius: 6px;\n}\n.c-avatar-group__overflow.is-clickable[data-v-1b2d9e6f] {\n  cursor: pointer;\n}\n.c-avatar-group__overflow.is-clickable[data-v-1b2d9e6f]:hover {\n  transform: translateY(-3px) scale(1.08);\n  z-index: 10;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n  background: color-mix(in srgb, var(--primary-color) 20%, var(--card-color));\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/C_AvatarGroup-M1dNPH3E.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_AvatarGroup-M1dNPH3E.css","names":[],"sources":["../src/components/C_AvatarGroup/index.vue?vue&type=style&index=0&scoped=1b2d9e6f&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//**\n * C_AvatarGroup — 头像组组件样式\n */\n.c-avatar-group[data-v-1b2d9e6f] {\n  display: inline-flex;\n  align-items: center;\n  /* ======================== 单个头像 ======================== */\n  /* ---- 头像图片 ---- */\n  /* ---- 首字母 fallback ---- */\n  /* ---- 状态指示点 ---- */\n  /* ======================== 溢出 +N ======================== */\n}\n.c-avatar-group.is-rtl[data-v-1b2d9e6f] {\n  flex-direction: row-reverse;\n}\n.c-avatar-group__item[data-v-1b2d9e6f] {\n  position: relative;\n  flex-shrink: 0;\n  border: 2px solid var(--card-color);\n  background: var(--card-color);\n  transition: transform 0.2s, z-index 0.2s, box-shadow 0.2s;\n  cursor: default;\n  z-index: 1;\n}\n.c-avatar-group__item.is-circle[data-v-1b2d9e6f] {\n  border-radius: 50%;\n}\n.c-avatar-group__item.is-square[data-v-1b2d9e6f] {\n  border-radius: 6px;\n}\n.c-avatar-group__item.is-clickable[data-v-1b2d9e6f] {\n  cursor: pointer;\n}\n.c-avatar-group__item.is-clickable[data-v-1b2d9e6f]:hover {\n  transform: translateY(-3px) scale(1.08);\n  z-index: 10;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n.c-avatar-group__item[data-v-1b2d9e6f]:hover {\n  z-index: 10;\n}\n.c-avatar-group__img[data-v-1b2d9e6f] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.is-circle .c-avatar-group__img[data-v-1b2d9e6f] {\n  border-radius: 50%;\n}\n.is-square .c-avatar-group__img[data-v-1b2d9e6f] {\n  border-radius: 4px;\n}\n.c-avatar-group__initials[data-v-1b2d9e6f] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  font-weight: 600;\n  user-select: none;\n}\n.is-circle .c-avatar-group__initials[data-v-1b2d9e6f] {\n  border-radius: 50%;\n}\n.is-square .c-avatar-group__initials[data-v-1b2d9e6f] {\n  border-radius: 4px;\n}\n.c-avatar-group__status[data-v-1b2d9e6f] {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border-radius: 50%;\n  border: 2px solid var(--card-color);\n  z-index: 2;\n}\n.c-avatar-group__overflow[data-v-1b2d9e6f] {\n  position: relative;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid var(--card-color);\n  background: color-mix(in srgb, var(--primary-color) 12%, var(--card-color));\n  color: var(--primary-color);\n  font-weight: 700;\n  z-index: 0;\n  transition: transform 0.2s, box-shadow 0.2s;\n}\n.c-avatar-group__overflow.is-circle[data-v-1b2d9e6f] {\n  border-radius: 50%;\n}\n.c-avatar-group__overflow.is-square[data-v-1b2d9e6f] {\n  border-radius: 6px;\n}\n.c-avatar-group__overflow.is-clickable[data-v-1b2d9e6f] {\n  cursor: pointer;\n}\n.c-avatar-group__overflow.is-clickable[data-v-1b2d9e6f]:hover {\n  transform: translateY(-3px) scale(1.08);\n  z-index: 10;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n  background: color-mix(in srgb, var(--primary-color) 20%, var(--card-color));\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/C_AvatarGroup.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./C_AvatarGroup.js`);exports.C_AvatarGroup=e.t,exports.DEFAULT_AVATAR_GROUP_PROPS=e.n,exports.STATUS_COLOR_MAP=e.r,exports.getInitials=e.i,exports.nameToColor=e.a;