mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-14 06:30:49 +08:00
🌈 style: 去除无用提交
This commit is contained in:
alger
4
.gitignore
vendored
4
.gitignore
vendored
@@ -17,4 +17,6 @@ dist.zip
|
||||
|
||||
bun.lockb
|
||||
|
||||
.env.*.local
|
||||
.env.*.local
|
||||
|
||||
out
|
||||
@@ -1,323 +0,0 @@
|
||||
"use strict";
|
||||
const utils = require("@electron-toolkit/utils");
|
||||
const electron = require("electron");
|
||||
const Store = require("electron-store");
|
||||
const path = require("path");
|
||||
const fs = require("fs");
|
||||
const os = require("os");
|
||||
const match = require("@unblockneteasemusic/server");
|
||||
const server = require("netease-cloud-music-api-alger/server");
|
||||
const isProxy = false;
|
||||
const noAnimate = false;
|
||||
const animationSpeed = 1;
|
||||
const author = "Alger";
|
||||
const authorUrl = "https://github.com/algerkong";
|
||||
const musicApiPort = 30488;
|
||||
const set = {
|
||||
isProxy,
|
||||
noAnimate,
|
||||
animationSpeed,
|
||||
author,
|
||||
authorUrl,
|
||||
musicApiPort
|
||||
};
|
||||
const store$2 = new Store();
|
||||
let lyricWindow = null;
|
||||
const createWin = () => {
|
||||
console.log("Creating lyric window");
|
||||
const windowBounds = store$2.get("lyricWindowBounds") || {};
|
||||
const { x, y, width, height } = windowBounds;
|
||||
const { width: screenWidth, height: screenHeight } = electron.screen.getPrimaryDisplay().workAreaSize;
|
||||
const validPosition = x !== void 0 && y !== void 0 && x >= 0 && y >= 0 && x < screenWidth && y < screenHeight;
|
||||
lyricWindow = new electron.BrowserWindow({
|
||||
width: width || 800,
|
||||
height: height || 200,
|
||||
x: validPosition ? x : void 0,
|
||||
y: validPosition ? y : void 0,
|
||||
frame: false,
|
||||
show: false,
|
||||
transparent: true,
|
||||
hasShadow: false,
|
||||
alwaysOnTop: true,
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, "../preload/index.js"),
|
||||
sandbox: false,
|
||||
contextIsolation: true
|
||||
}
|
||||
});
|
||||
lyricWindow.on("closed", () => {
|
||||
if (lyricWindow) {
|
||||
lyricWindow.destroy();
|
||||
lyricWindow = null;
|
||||
}
|
||||
});
|
||||
return lyricWindow;
|
||||
};
|
||||
const loadLyricWindow = (ipcMain, mainWin) => {
|
||||
const showLyricWindow = () => {
|
||||
if (lyricWindow && !lyricWindow.isDestroyed()) {
|
||||
if (lyricWindow.isMinimized()) {
|
||||
lyricWindow.restore();
|
||||
}
|
||||
lyricWindow.focus();
|
||||
lyricWindow.show();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
ipcMain.on("open-lyric", () => {
|
||||
console.log("Received open-lyric request");
|
||||
if (showLyricWindow()) {
|
||||
return;
|
||||
}
|
||||
console.log("Creating new lyric window");
|
||||
const win = createWin();
|
||||
if (!win) {
|
||||
console.error("Failed to create lyric window");
|
||||
return;
|
||||
}
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
win.webContents.openDevTools({ mode: "detach" });
|
||||
win.loadURL(`${process.env.ELECTRON_RENDERER_URL}/#/lyric`);
|
||||
} else {
|
||||
const distPath = path.resolve(__dirname, "../renderer");
|
||||
win.loadURL(`file://${distPath}/index.html#/lyric`);
|
||||
}
|
||||
win.setMinimumSize(600, 200);
|
||||
win.setSkipTaskbar(true);
|
||||
win.once("ready-to-show", () => {
|
||||
console.log("Lyric window ready to show");
|
||||
win.show();
|
||||
});
|
||||
});
|
||||
ipcMain.on("send-lyric", (_, data) => {
|
||||
if (lyricWindow && !lyricWindow.isDestroyed()) {
|
||||
try {
|
||||
lyricWindow.webContents.send("receive-lyric", data);
|
||||
} catch (error) {
|
||||
console.error("Error processing lyric data:", error);
|
||||
}
|
||||
}
|
||||
});
|
||||
ipcMain.on("top-lyric", (_, data) => {
|
||||
if (lyricWindow && !lyricWindow.isDestroyed()) {
|
||||
lyricWindow.setAlwaysOnTop(data);
|
||||
}
|
||||
});
|
||||
ipcMain.on("close-lyric", () => {
|
||||
if (lyricWindow && !lyricWindow.isDestroyed()) {
|
||||
lyricWindow.webContents.send("lyric-window-close");
|
||||
mainWin.webContents.send("lyric-control-back", "close");
|
||||
lyricWindow.destroy();
|
||||
lyricWindow = null;
|
||||
}
|
||||
});
|
||||
ipcMain.on("mouseenter-lyric", () => {
|
||||
if (lyricWindow && !lyricWindow.isDestroyed()) {
|
||||
lyricWindow.setIgnoreMouseEvents(true);
|
||||
}
|
||||
});
|
||||
ipcMain.on("mouseleave-lyric", () => {
|
||||
if (lyricWindow && !lyricWindow.isDestroyed()) {
|
||||
lyricWindow.setIgnoreMouseEvents(false);
|
||||
}
|
||||
});
|
||||
ipcMain.on("lyric-drag-move", (_, { deltaX, deltaY }) => {
|
||||
if (!lyricWindow || lyricWindow.isDestroyed()) return;
|
||||
const [currentX, currentY] = lyricWindow.getPosition();
|
||||
const { width: screenWidth, height: screenHeight } = electron.screen.getPrimaryDisplay().workAreaSize;
|
||||
const [windowWidth, windowHeight] = lyricWindow.getSize();
|
||||
const newX = Math.max(0, Math.min(currentX + deltaX, screenWidth - windowWidth));
|
||||
const newY = Math.max(0, Math.min(currentY + deltaY, screenHeight - windowHeight));
|
||||
lyricWindow.setPosition(newX, newY);
|
||||
store$2.set("lyricWindowBounds", {
|
||||
...lyricWindow.getBounds(),
|
||||
x: newX,
|
||||
y: newY
|
||||
});
|
||||
});
|
||||
ipcMain.on("set-ignore-mouse", (_, shouldIgnore) => {
|
||||
if (!lyricWindow || lyricWindow.isDestroyed()) return;
|
||||
lyricWindow.setIgnoreMouseEvents(shouldIgnore, { forward: true });
|
||||
});
|
||||
ipcMain.on("control-back", (_, command) => {
|
||||
console.log("command", command);
|
||||
if (mainWin && !mainWin.isDestroyed()) {
|
||||
console.log("Sending control-back command:", command);
|
||||
mainWin.webContents.send("lyric-control-back", command);
|
||||
}
|
||||
});
|
||||
};
|
||||
const unblockMusic = async (id) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
match(parseInt(id, 10), ["qq", "migu", "kugou", "joox"]).then((data) => {
|
||||
resolve({
|
||||
data: {
|
||||
data,
|
||||
params: {
|
||||
id,
|
||||
type: "song"
|
||||
}
|
||||
}
|
||||
});
|
||||
}).catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
};
|
||||
const store$1 = new Store();
|
||||
if (!fs.existsSync(path.resolve(os.tmpdir(), "anonymous_token"))) {
|
||||
fs.writeFileSync(path.resolve(os.tmpdir(), "anonymous_token"), "", "utf-8");
|
||||
}
|
||||
electron.ipcMain.handle("unblock-music", async (_, id) => {
|
||||
return unblockMusic(id);
|
||||
});
|
||||
async function startMusicApi() {
|
||||
console.log("MUSIC API STARTED");
|
||||
const port = store$1.get("set").musicApiPort || 30488;
|
||||
await server.serveNcmApi({
|
||||
port
|
||||
});
|
||||
}
|
||||
const iconPath = path.join(__dirname, "../../resources");
|
||||
const icon = electron.nativeImage.createFromPath(
|
||||
process.platform === "darwin" ? path.join(iconPath, "icon.icns") : process.platform === "win32" ? path.join(iconPath, "favicon.ico") : path.join(iconPath, "icon.png")
|
||||
);
|
||||
let mainWindow;
|
||||
function createWindow() {
|
||||
startMusicApi();
|
||||
mainWindow = new electron.BrowserWindow({
|
||||
width: 1200,
|
||||
height: 780,
|
||||
show: false,
|
||||
frame: false,
|
||||
autoHideMenuBar: true,
|
||||
icon,
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, "../preload/index.js"),
|
||||
sandbox: false,
|
||||
contextIsolation: true
|
||||
}
|
||||
});
|
||||
mainWindow.setMinimumSize(1200, 780);
|
||||
mainWindow.on("ready-to-show", () => {
|
||||
mainWindow.show();
|
||||
});
|
||||
mainWindow.webContents.setWindowOpenHandler((details) => {
|
||||
electron.shell.openExternal(details.url);
|
||||
return { action: "deny" };
|
||||
});
|
||||
if (utils.is.dev && process.env.ELECTRON_RENDERER_URL) {
|
||||
mainWindow.webContents.openDevTools({ mode: "detach" });
|
||||
mainWindow.loadURL(process.env.ELECTRON_RENDERER_URL);
|
||||
} else {
|
||||
mainWindow.webContents.openDevTools({ mode: "detach" });
|
||||
mainWindow.loadFile(path.join(__dirname, "../renderer/index.html"));
|
||||
}
|
||||
const trayIcon = electron.nativeImage.createFromPath(path.join(iconPath, "icon_16x16.png")).resize({ width: 16, height: 16 });
|
||||
const tray = new electron.Tray(trayIcon);
|
||||
const contextMenu = electron.Menu.buildFromTemplate([
|
||||
{
|
||||
label: "显示",
|
||||
click: () => {
|
||||
mainWindow.show();
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "退出",
|
||||
click: () => {
|
||||
mainWindow.destroy();
|
||||
electron.app.quit();
|
||||
}
|
||||
}
|
||||
]);
|
||||
tray.setContextMenu(contextMenu);
|
||||
tray.on("click", () => {
|
||||
if (mainWindow.isVisible()) {
|
||||
mainWindow.hide();
|
||||
} else {
|
||||
mainWindow.show();
|
||||
}
|
||||
});
|
||||
loadLyricWindow(electron.ipcMain, mainWindow);
|
||||
}
|
||||
electron.app.whenReady().then(() => {
|
||||
utils.electronApp.setAppUserModelId("com.alger.music");
|
||||
electron.app.on("browser-window-created", (_, window) => {
|
||||
utils.optimizer.watchWindowShortcuts(window);
|
||||
});
|
||||
electron.ipcMain.on("ping", () => console.log("pong"));
|
||||
createWindow();
|
||||
electron.app.on("activate", function() {
|
||||
if (electron.BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||
});
|
||||
});
|
||||
electron.app.on("ready", () => {
|
||||
electron.globalShortcut.register("CommandOrControl+Alt+Shift+M", () => {
|
||||
if (mainWindow.isVisible()) {
|
||||
mainWindow.hide();
|
||||
} else {
|
||||
mainWindow.show();
|
||||
}
|
||||
});
|
||||
});
|
||||
electron.app.on("window-all-closed", () => {
|
||||
if (process.platform !== "darwin") {
|
||||
electron.app.quit();
|
||||
}
|
||||
});
|
||||
electron.ipcMain.on("minimize-window", (event) => {
|
||||
const win = electron.BrowserWindow.fromWebContents(event.sender);
|
||||
if (win) {
|
||||
win.minimize();
|
||||
}
|
||||
});
|
||||
electron.ipcMain.on("maximize-window", (event) => {
|
||||
const win = electron.BrowserWindow.fromWebContents(event.sender);
|
||||
if (win) {
|
||||
if (win.isMaximized()) {
|
||||
win.unmaximize();
|
||||
} else {
|
||||
win.maximize();
|
||||
}
|
||||
}
|
||||
});
|
||||
electron.ipcMain.on("close-window", (event) => {
|
||||
const win = electron.BrowserWindow.fromWebContents(event.sender);
|
||||
if (win) {
|
||||
win.destroy();
|
||||
electron.app.quit();
|
||||
}
|
||||
});
|
||||
electron.ipcMain.on("drag-start", (event) => {
|
||||
const win = electron.BrowserWindow.fromWebContents(event.sender);
|
||||
if (win) {
|
||||
win.webContents.beginFrameSubscription((frameBuffer) => {
|
||||
event.reply("frame-buffer", frameBuffer);
|
||||
});
|
||||
}
|
||||
});
|
||||
electron.ipcMain.on("mini-tray", (event) => {
|
||||
const win = electron.BrowserWindow.fromWebContents(event.sender);
|
||||
if (win) {
|
||||
win.hide();
|
||||
}
|
||||
});
|
||||
electron.ipcMain.on("restart", () => {
|
||||
electron.app.relaunch();
|
||||
electron.app.exit(0);
|
||||
});
|
||||
const store = new Store({
|
||||
name: "config",
|
||||
// 配置文件名
|
||||
defaults: {
|
||||
set
|
||||
}
|
||||
});
|
||||
electron.ipcMain.on("set-store-value", (_, key, value) => {
|
||||
store.set(key, value);
|
||||
});
|
||||
electron.ipcMain.on("get-store-value", (_, key) => {
|
||||
const value = store.get(key);
|
||||
_.returnValue = value || "";
|
||||
});
|
||||
@@ -1,25 +0,0 @@
|
||||
"use strict";
|
||||
const preload = require("@electron-toolkit/preload");
|
||||
const electron = require("electron");
|
||||
const api = {
|
||||
minimize: () => electron.ipcRenderer.send("minimize-window"),
|
||||
maximize: () => electron.ipcRenderer.send("maximize-window"),
|
||||
close: () => electron.ipcRenderer.send("close-window"),
|
||||
dragStart: (data) => electron.ipcRenderer.send("drag-start", data),
|
||||
miniTray: () => electron.ipcRenderer.send("mini-tray"),
|
||||
restart: () => electron.ipcRenderer.send("restart"),
|
||||
openLyric: () => electron.ipcRenderer.send("open-lyric"),
|
||||
sendLyric: (data) => electron.ipcRenderer.send("send-lyric", data),
|
||||
unblockMusic: (id) => electron.ipcRenderer.invoke("unblock-music", id)
|
||||
};
|
||||
if (process.contextIsolated) {
|
||||
try {
|
||||
electron.contextBridge.exposeInMainWorld("electron", preload.electronAPI);
|
||||
electron.contextBridge.exposeInMainWorld("api", api);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
} else {
|
||||
window.electron = preload.electronAPI;
|
||||
window.api = api;
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
import { d as defineComponent, af as useRoute, r as ref, E as watch, ar as resolveComponent, j as openBlock, c as createElementBlock, b as createBaseVNode, u as unref, a3 as Fragment, a4 as renderList, e as createVNode, f as withCtx, n as normalizeClass, a2 as normalizeStyle, t as toDisplayString, T as createCommentVNode, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
const icon = "" + new URL("icon-mGmYaNg4.png", import.meta.url).href;
|
||||
const _hoisted_1 = { class: "app-menu-header" };
|
||||
const _hoisted_2 = ["src"];
|
||||
const _hoisted_3 = { class: "app-menu-list" };
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
__name: "AppMenu",
|
||||
props: {
|
||||
size: {
|
||||
type: String,
|
||||
default: "26px"
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#aaa"
|
||||
},
|
||||
selectColor: {
|
||||
type: String,
|
||||
default: "#10B981"
|
||||
},
|
||||
menus: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const route = useRoute();
|
||||
const path = ref(route.path);
|
||||
watch(
|
||||
() => route.path,
|
||||
async (newParams) => {
|
||||
path.value = newParams;
|
||||
}
|
||||
);
|
||||
const isChecked = (index) => {
|
||||
return path.value === props.menus[index].path;
|
||||
};
|
||||
const iconStyle = (index) => {
|
||||
const style = {
|
||||
fontSize: props.size,
|
||||
color: isChecked(index) ? props.selectColor : props.color
|
||||
};
|
||||
return style;
|
||||
};
|
||||
const isText = ref(false);
|
||||
return (_ctx, _cache) => {
|
||||
const _component_router_link = resolveComponent("router-link");
|
||||
return openBlock(), createElementBlock("div", null, [
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["app-menu", { "app-menu-expanded": unref(isText) }])
|
||||
}, [
|
||||
createBaseVNode("div", _hoisted_1, [
|
||||
createBaseVNode("div", {
|
||||
class: "app-menu-logo",
|
||||
onClick: _cache[0] || (_cache[0] = ($event) => isText.value = !unref(isText))
|
||||
}, [
|
||||
createBaseVNode("img", {
|
||||
src: unref(icon),
|
||||
class: "w-9 h-9",
|
||||
alt: "logo"
|
||||
}, null, 8, _hoisted_2)
|
||||
])
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_3, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.menus, (item, index) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: item.path,
|
||||
class: "app-menu-item"
|
||||
}, [
|
||||
createVNode(_component_router_link, {
|
||||
class: "app-menu-item-link",
|
||||
to: item.path
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("i", {
|
||||
class: normalizeClass(["iconfont app-menu-item-icon", item.meta.icon]),
|
||||
style: normalizeStyle(iconStyle(index))
|
||||
}, null, 6),
|
||||
unref(isText) ? (openBlock(), createElementBlock("span", {
|
||||
key: 0,
|
||||
class: normalizeClass(["app-menu-item-text ml-3", isChecked(index) ? "text-green-500" : ""])
|
||||
}, toDisplayString(item.meta.title), 3)) : createCommentVNode("", true)
|
||||
]),
|
||||
_: 2
|
||||
}, 1032, ["to"])
|
||||
]);
|
||||
}), 128))
|
||||
])
|
||||
], 2)
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const AppMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f209e92f"]]);
|
||||
export {
|
||||
AppMenu as default
|
||||
};
|
||||
Binary file not shown.
@@ -1,90 +0,0 @@
|
||||
.app-menu[data-v-f209e92f] {
|
||||
width: 100px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.app-menu-expanded[data-v-f209e92f] {
|
||||
width: 160px;
|
||||
}
|
||||
.app-menu-expanded .app-menu-item[data-v-f209e92f] {
|
||||
margin-right: 1rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.app-menu-expanded .app-menu-item[data-v-f209e92f]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.app-menu-expanded .app-menu-item[data-v-f209e92f]:hover:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.app-menu-item-link[data-v-f209e92f],
|
||||
.app-menu-header[data-v-f209e92f] {
|
||||
margin-left: 0.5rem;
|
||||
display: flex;
|
||||
width: 200px;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
.app-menu-header[data-v-f209e92f] {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
.app-menu-item-link[data-v-f209e92f] {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.app-menu-item-icon[data-v-f209e92f] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
.app-menu-item-icon[data-v-f209e92f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.app-menu-item-icon[data-v-f209e92f]:hover {
|
||||
--tw-scale-x: 1.05 !important;
|
||||
--tw-scale-y: 1.05 !important;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
|
||||
--tw-text-opacity: 1 !important;
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity, 1)) !important;
|
||||
}
|
||||
.mobile .app-menu[data-v-f209e92f] {
|
||||
max-width: 100%;
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
z-index: 999999;
|
||||
border-top-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.mobile .app-menu[data-v-f209e92f]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.mobile .app-menu-header[data-v-f209e92f] {
|
||||
display: none;
|
||||
}
|
||||
.mobile .app-menu-list[data-v-f209e92f] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.mobile .app-menu-item-link[data-v-f209e92f] {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
width: auto;
|
||||
}
|
||||
Binary file not shown.
@@ -1,319 +0,0 @@
|
||||
import { i as isImageSupportNativeLazy, o as observeIntersection } from "./Image-DXClIklC.js";
|
||||
import { t as tagInjectionKey } from "./Tag-C0oC92WF.js";
|
||||
import { aL as createInjectionKey, p as cB, aN as insideModal, m as c, aO as insidePopover, Y as cE, d as defineComponent, x as useConfig, r as ref, G as computed, q as useTheme, ap as useThemeClass, o as onMounted, a8 as watchEffect, a as onBeforeUnmount, E as watch, K as resolveSlot, I as resolveWrappedSlot, l as h, as as inject, bw as avatarLight, ao as createKey, bx as color2Class, ay as VResizeObserver } from "./index-DKaFsuse.js";
|
||||
const avatarGroupInjectionKey = createInjectionKey("n-avatar-group");
|
||||
const style = cB("avatar", `
|
||||
width: var(--n-merged-size);
|
||||
height: var(--n-merged-size);
|
||||
color: #FFF;
|
||||
font-size: var(--n-font-size);
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
border: var(--n-border);
|
||||
border-radius: var(--n-border-radius);
|
||||
--n-merged-color: var(--n-color);
|
||||
background-color: var(--n-merged-color);
|
||||
transition:
|
||||
border-color .3s var(--n-bezier),
|
||||
background-color .3s var(--n-bezier),
|
||||
color .3s var(--n-bezier);
|
||||
`, [insideModal(c("&", "--n-merged-color: var(--n-color-modal);")), insidePopover(c("&", "--n-merged-color: var(--n-color-popover);")), c("img", `
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`), cE("text", `
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
`), cB("icon", `
|
||||
vertical-align: bottom;
|
||||
font-size: calc(var(--n-merged-size) - 6px);
|
||||
`), cE("text", "line-height: 1.25")]);
|
||||
const avatarProps = Object.assign(Object.assign({}, useTheme.props), {
|
||||
size: [String, Number],
|
||||
src: String,
|
||||
circle: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
objectFit: String,
|
||||
round: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
onError: Function,
|
||||
fallbackSrc: String,
|
||||
intersectionObserverOptions: Object,
|
||||
lazy: Boolean,
|
||||
onLoad: Function,
|
||||
renderPlaceholder: Function,
|
||||
renderFallback: Function,
|
||||
imgProps: Object,
|
||||
/** @deprecated */
|
||||
color: String
|
||||
});
|
||||
const __unplugin_components_2 = defineComponent({
|
||||
name: "Avatar",
|
||||
props: avatarProps,
|
||||
setup(props) {
|
||||
const {
|
||||
mergedClsPrefixRef,
|
||||
inlineThemeDisabled
|
||||
} = useConfig(props);
|
||||
const hasLoadErrorRef = ref(false);
|
||||
let memoedTextHtml = null;
|
||||
const textRef = ref(null);
|
||||
const selfRef = ref(null);
|
||||
const fitTextTransform = () => {
|
||||
const {
|
||||
value: textEl
|
||||
} = textRef;
|
||||
if (textEl) {
|
||||
if (memoedTextHtml === null || memoedTextHtml !== textEl.innerHTML) {
|
||||
memoedTextHtml = textEl.innerHTML;
|
||||
const {
|
||||
value: selfEl
|
||||
} = selfRef;
|
||||
if (selfEl) {
|
||||
const {
|
||||
offsetWidth: elWidth,
|
||||
offsetHeight: elHeight
|
||||
} = selfEl;
|
||||
const {
|
||||
offsetWidth: textWidth,
|
||||
offsetHeight: textHeight
|
||||
} = textEl;
|
||||
const radix = 0.9;
|
||||
const ratio = Math.min(elWidth / textWidth * radix, elHeight / textHeight * radix, 1);
|
||||
textEl.style.transform = `translateX(-50%) translateY(-50%) scale(${ratio})`;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const NAvatarGroup = inject(avatarGroupInjectionKey, null);
|
||||
const mergedSizeRef = computed(() => {
|
||||
const {
|
||||
size
|
||||
} = props;
|
||||
if (size) return size;
|
||||
const {
|
||||
size: avatarGroupSize
|
||||
} = NAvatarGroup || {};
|
||||
if (avatarGroupSize) return avatarGroupSize;
|
||||
return "medium";
|
||||
});
|
||||
const themeRef = useTheme("Avatar", "-avatar", style, avatarLight, props, mergedClsPrefixRef);
|
||||
const TagInjection = inject(tagInjectionKey, null);
|
||||
const mergedRoundRef = computed(() => {
|
||||
if (NAvatarGroup) return true;
|
||||
const {
|
||||
round,
|
||||
circle
|
||||
} = props;
|
||||
if (round !== void 0 || circle !== void 0) return round || circle;
|
||||
if (TagInjection) {
|
||||
return TagInjection.roundRef.value;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
const mergedBorderedRef = computed(() => {
|
||||
if (NAvatarGroup) return true;
|
||||
return props.bordered || false;
|
||||
});
|
||||
const cssVarsRef = computed(() => {
|
||||
const size = mergedSizeRef.value;
|
||||
const round = mergedRoundRef.value;
|
||||
const bordered = mergedBorderedRef.value;
|
||||
const {
|
||||
color: propColor
|
||||
} = props;
|
||||
const {
|
||||
self: {
|
||||
borderRadius,
|
||||
fontSize,
|
||||
color,
|
||||
border,
|
||||
colorModal,
|
||||
colorPopover
|
||||
},
|
||||
common: {
|
||||
cubicBezierEaseInOut
|
||||
}
|
||||
} = themeRef.value;
|
||||
let height;
|
||||
if (typeof size === "number") {
|
||||
height = `${size}px`;
|
||||
} else {
|
||||
height = themeRef.value.self[createKey("height", size)];
|
||||
}
|
||||
return {
|
||||
"--n-font-size": fontSize,
|
||||
"--n-border": bordered ? border : "none",
|
||||
"--n-border-radius": round ? "50%" : borderRadius,
|
||||
"--n-color": propColor || color,
|
||||
"--n-color-modal": propColor || colorModal,
|
||||
"--n-color-popover": propColor || colorPopover,
|
||||
"--n-bezier": cubicBezierEaseInOut,
|
||||
"--n-merged-size": `var(--n-avatar-size-override, ${height})`
|
||||
};
|
||||
});
|
||||
const themeClassHandle = inlineThemeDisabled ? useThemeClass("avatar", computed(() => {
|
||||
const size = mergedSizeRef.value;
|
||||
const round = mergedRoundRef.value;
|
||||
const bordered = mergedBorderedRef.value;
|
||||
const {
|
||||
color
|
||||
} = props;
|
||||
let hash = "";
|
||||
if (size) {
|
||||
if (typeof size === "number") {
|
||||
hash += `a${size}`;
|
||||
} else {
|
||||
hash += size[0];
|
||||
}
|
||||
}
|
||||
if (round) {
|
||||
hash += "b";
|
||||
}
|
||||
if (bordered) {
|
||||
hash += "c";
|
||||
}
|
||||
if (color) {
|
||||
hash += color2Class(color);
|
||||
}
|
||||
return hash;
|
||||
}), cssVarsRef, props) : void 0;
|
||||
const shouldStartLoadingRef = ref(!props.lazy);
|
||||
onMounted(() => {
|
||||
if (props.lazy && props.intersectionObserverOptions) {
|
||||
let unobserve;
|
||||
const stopWatchHandle = watchEffect(() => {
|
||||
unobserve === null || unobserve === void 0 ? void 0 : unobserve();
|
||||
unobserve = void 0;
|
||||
if (props.lazy) {
|
||||
unobserve = observeIntersection(selfRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
stopWatchHandle();
|
||||
unobserve === null || unobserve === void 0 ? void 0 : unobserve();
|
||||
});
|
||||
}
|
||||
});
|
||||
watch(() => {
|
||||
var _a;
|
||||
return props.src || ((_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.src);
|
||||
}, () => {
|
||||
hasLoadErrorRef.value = false;
|
||||
});
|
||||
const loadedRef = ref(!props.lazy);
|
||||
return {
|
||||
textRef,
|
||||
selfRef,
|
||||
mergedRoundRef,
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
fitTextTransform,
|
||||
cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
|
||||
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
||||
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
|
||||
hasLoadError: hasLoadErrorRef,
|
||||
shouldStartLoading: shouldStartLoadingRef,
|
||||
loaded: loadedRef,
|
||||
mergedOnError: (e) => {
|
||||
if (!shouldStartLoadingRef.value) return;
|
||||
hasLoadErrorRef.value = true;
|
||||
const {
|
||||
onError,
|
||||
imgProps: {
|
||||
onError: imgPropsOnError
|
||||
} = {}
|
||||
} = props;
|
||||
onError === null || onError === void 0 ? void 0 : onError(e);
|
||||
imgPropsOnError === null || imgPropsOnError === void 0 ? void 0 : imgPropsOnError(e);
|
||||
},
|
||||
mergedOnLoad: (e) => {
|
||||
const {
|
||||
onLoad,
|
||||
imgProps: {
|
||||
onLoad: imgPropsOnLoad
|
||||
} = {}
|
||||
} = props;
|
||||
onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
|
||||
imgPropsOnLoad === null || imgPropsOnLoad === void 0 ? void 0 : imgPropsOnLoad(e);
|
||||
loadedRef.value = true;
|
||||
}
|
||||
};
|
||||
},
|
||||
render() {
|
||||
var _a, _b;
|
||||
const {
|
||||
$slots,
|
||||
src,
|
||||
mergedClsPrefix,
|
||||
lazy,
|
||||
onRender,
|
||||
loaded,
|
||||
hasLoadError,
|
||||
imgProps = {}
|
||||
} = this;
|
||||
onRender === null || onRender === void 0 ? void 0 : onRender();
|
||||
let img;
|
||||
const placeholderNode = !loaded && !hasLoadError && (this.renderPlaceholder ? this.renderPlaceholder() : (_b = (_a = this.$slots).placeholder) === null || _b === void 0 ? void 0 : _b.call(_a));
|
||||
if (this.hasLoadError) {
|
||||
img = this.renderFallback ? this.renderFallback() : resolveSlot($slots.fallback, () => [h("img", {
|
||||
src: this.fallbackSrc,
|
||||
style: {
|
||||
objectFit: this.objectFit
|
||||
}
|
||||
})]);
|
||||
} else {
|
||||
img = resolveWrappedSlot($slots.default, (children) => {
|
||||
if (children) {
|
||||
return h(VResizeObserver, {
|
||||
onResize: this.fitTextTransform
|
||||
}, {
|
||||
default: () => h("span", {
|
||||
ref: "textRef",
|
||||
class: `${mergedClsPrefix}-avatar__text`
|
||||
}, children)
|
||||
});
|
||||
} else if (src || imgProps.src) {
|
||||
const loadSrc = this.src || imgProps.src;
|
||||
return h("img", Object.assign(Object.assign({}, imgProps), {
|
||||
loading: (
|
||||
// If interseciton observer options is set, do not use native lazy
|
||||
isImageSupportNativeLazy && !this.intersectionObserverOptions && lazy ? "lazy" : "eager"
|
||||
),
|
||||
src: lazy && this.intersectionObserverOptions ? this.shouldStartLoading ? loadSrc : void 0 : loadSrc,
|
||||
"data-image-src": loadSrc,
|
||||
onLoad: this.mergedOnLoad,
|
||||
onError: this.mergedOnError,
|
||||
style: [imgProps.style || "", {
|
||||
objectFit: this.objectFit
|
||||
}, placeholderNode ? {
|
||||
height: "0",
|
||||
width: "0",
|
||||
visibility: "hidden",
|
||||
position: "absolute"
|
||||
} : ""]
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
return h("span", {
|
||||
ref: "selfRef",
|
||||
class: [`${mergedClsPrefix}-avatar`, this.themeClass],
|
||||
style: this.cssVars
|
||||
}, img, lazy && placeholderNode);
|
||||
}
|
||||
});
|
||||
export {
|
||||
__unplugin_components_2 as _
|
||||
};
|
||||
Binary file not shown.
@@ -1,803 +0,0 @@
|
||||
import { d as defineComponent, r as ref, as as inject, G as computed, x as useConfig, F as useRtl, a8 as watchEffect, E as watch, a as onBeforeUnmount, aT as clickoutside, aU as useLockHtmlScroll, $ as provide, w as withDirectives, a6 as vShow, l as h, aV as FocusTrap, ak as Transition, ax as mergeProps, aK as Scrollbar, aW as drawerInjectionKey, aX as drawerBodyInjectionKey, aY as popoverBodyInjectionKey, aZ as modalBodyInjectionKey, m as c, a_ as commonVariables, p as cB, W as cM, Y as cE, a$ as fadeInTransition, aR as isMounted, q as useTheme, C as useMergedState, A as toRef, b0 as useIsComposing, ap as useThemeClass, b1 as LazyTeleport, b2 as drawerLight, b3 as eventEffectNotPerformed, L as call, b4 as zindexable } from "./index-DKaFsuse.js";
|
||||
import { f as formatLength } from "./Image-DXClIklC.js";
|
||||
const NDrawerBodyWrapper = defineComponent({
|
||||
name: "NDrawerContent",
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
blockScroll: Boolean,
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
displayDirective: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
contentClass: String,
|
||||
contentStyle: [Object, String],
|
||||
nativeScrollbar: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
scrollbarProps: Object,
|
||||
trapFocus: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoFocus: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showMask: {
|
||||
type: [Boolean, String],
|
||||
required: true
|
||||
},
|
||||
maxWidth: Number,
|
||||
maxHeight: Number,
|
||||
minWidth: Number,
|
||||
minHeight: Number,
|
||||
resizable: Boolean,
|
||||
onClickoutside: Function,
|
||||
onAfterLeave: Function,
|
||||
onAfterEnter: Function,
|
||||
onEsc: Function
|
||||
},
|
||||
setup(props) {
|
||||
const displayedRef = ref(!!props.show);
|
||||
const bodyRef = ref(null);
|
||||
const NDrawer = inject(drawerInjectionKey);
|
||||
let startPosition = 0;
|
||||
let memoizedBodyStyleCursor = "";
|
||||
let hoverTimerId = null;
|
||||
const isHoverOnResizeTriggerRef = ref(false);
|
||||
const isDraggingRef = ref(false);
|
||||
const isVertical = computed(() => {
|
||||
return props.placement === "top" || props.placement === "bottom";
|
||||
});
|
||||
const {
|
||||
mergedClsPrefixRef,
|
||||
mergedRtlRef
|
||||
} = useConfig(props);
|
||||
const rtlEnabledRef = useRtl("Drawer", mergedRtlRef, mergedClsPrefixRef);
|
||||
const handleBodyMouseleave = handleBodyMouseup;
|
||||
const handleMousedownResizeTrigger = (e) => {
|
||||
isDraggingRef.value = true;
|
||||
startPosition = isVertical.value ? e.clientY : e.clientX;
|
||||
memoizedBodyStyleCursor = document.body.style.cursor;
|
||||
document.body.style.cursor = isVertical.value ? "ns-resize" : "ew-resize";
|
||||
document.body.addEventListener("mousemove", handleBodyMousemove);
|
||||
document.body.addEventListener("mouseleave", handleBodyMouseleave);
|
||||
document.body.addEventListener("mouseup", handleBodyMouseup);
|
||||
};
|
||||
const handleMouseenterResizeTrigger = () => {
|
||||
if (hoverTimerId !== null) {
|
||||
window.clearTimeout(hoverTimerId);
|
||||
hoverTimerId = null;
|
||||
}
|
||||
if (isDraggingRef.value) {
|
||||
isHoverOnResizeTriggerRef.value = true;
|
||||
} else {
|
||||
hoverTimerId = window.setTimeout(() => {
|
||||
isHoverOnResizeTriggerRef.value = true;
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
const handleMouseleaveResizeTrigger = () => {
|
||||
if (hoverTimerId !== null) {
|
||||
window.clearTimeout(hoverTimerId);
|
||||
hoverTimerId = null;
|
||||
}
|
||||
isHoverOnResizeTriggerRef.value = false;
|
||||
};
|
||||
const {
|
||||
doUpdateHeight,
|
||||
doUpdateWidth
|
||||
} = NDrawer;
|
||||
const regulateWidth = (size) => {
|
||||
const {
|
||||
maxWidth
|
||||
} = props;
|
||||
if (maxWidth && size > maxWidth) return maxWidth;
|
||||
const {
|
||||
minWidth
|
||||
} = props;
|
||||
if (minWidth && size < minWidth) return minWidth;
|
||||
return size;
|
||||
};
|
||||
const regulateHeight = (size) => {
|
||||
const {
|
||||
maxHeight
|
||||
} = props;
|
||||
if (maxHeight && size > maxHeight) return maxHeight;
|
||||
const {
|
||||
minHeight
|
||||
} = props;
|
||||
if (minHeight && size < minHeight) return minHeight;
|
||||
return size;
|
||||
};
|
||||
function handleBodyMousemove(e) {
|
||||
var _a, _b;
|
||||
if (isDraggingRef.value) {
|
||||
if (isVertical.value) {
|
||||
let height = ((_a = bodyRef.value) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
|
||||
const increment = startPosition - e.clientY;
|
||||
height += props.placement === "bottom" ? increment : -increment;
|
||||
height = regulateHeight(height);
|
||||
doUpdateHeight(height);
|
||||
startPosition = e.clientY;
|
||||
} else {
|
||||
let width = ((_b = bodyRef.value) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
|
||||
const increment = startPosition - e.clientX;
|
||||
width += props.placement === "right" ? increment : -increment;
|
||||
width = regulateWidth(width);
|
||||
doUpdateWidth(width);
|
||||
startPosition = e.clientX;
|
||||
}
|
||||
}
|
||||
}
|
||||
function handleBodyMouseup() {
|
||||
if (isDraggingRef.value) {
|
||||
startPosition = 0;
|
||||
isDraggingRef.value = false;
|
||||
document.body.style.cursor = memoizedBodyStyleCursor;
|
||||
document.body.removeEventListener("mousemove", handleBodyMousemove);
|
||||
document.body.removeEventListener("mouseup", handleBodyMouseup);
|
||||
document.body.removeEventListener("mouseleave", handleBodyMouseleave);
|
||||
}
|
||||
}
|
||||
watchEffect(() => {
|
||||
if (props.show) displayedRef.value = true;
|
||||
});
|
||||
watch(() => props.show, (value) => {
|
||||
if (!value) {
|
||||
handleBodyMouseup();
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
handleBodyMouseup();
|
||||
});
|
||||
const bodyDirectivesRef = computed(() => {
|
||||
const {
|
||||
show
|
||||
} = props;
|
||||
const directives = [[vShow, show]];
|
||||
if (!props.showMask) {
|
||||
directives.push([clickoutside, props.onClickoutside, void 0, {
|
||||
capture: true
|
||||
}]);
|
||||
}
|
||||
return directives;
|
||||
});
|
||||
function handleAfterLeave() {
|
||||
var _a;
|
||||
displayedRef.value = false;
|
||||
(_a = props.onAfterLeave) === null || _a === void 0 ? void 0 : _a.call(props);
|
||||
}
|
||||
useLockHtmlScroll(computed(() => props.blockScroll && displayedRef.value));
|
||||
provide(drawerBodyInjectionKey, bodyRef);
|
||||
provide(popoverBodyInjectionKey, null);
|
||||
provide(modalBodyInjectionKey, null);
|
||||
return {
|
||||
bodyRef,
|
||||
rtlEnabled: rtlEnabledRef,
|
||||
mergedClsPrefix: NDrawer.mergedClsPrefixRef,
|
||||
isMounted: NDrawer.isMountedRef,
|
||||
mergedTheme: NDrawer.mergedThemeRef,
|
||||
displayed: displayedRef,
|
||||
transitionName: computed(() => {
|
||||
return {
|
||||
right: "slide-in-from-right-transition",
|
||||
left: "slide-in-from-left-transition",
|
||||
top: "slide-in-from-top-transition",
|
||||
bottom: "slide-in-from-bottom-transition"
|
||||
}[props.placement];
|
||||
}),
|
||||
handleAfterLeave,
|
||||
bodyDirectives: bodyDirectivesRef,
|
||||
handleMousedownResizeTrigger,
|
||||
handleMouseenterResizeTrigger,
|
||||
handleMouseleaveResizeTrigger,
|
||||
isDragging: isDraggingRef,
|
||||
isHoverOnResizeTrigger: isHoverOnResizeTriggerRef
|
||||
};
|
||||
},
|
||||
render() {
|
||||
const {
|
||||
$slots,
|
||||
mergedClsPrefix
|
||||
} = this;
|
||||
return this.displayDirective === "show" || this.displayed || this.show ? withDirectives(
|
||||
/* Keep the wrapper dom. Make sure the drawer has a host.
|
||||
Nor the detached content will disappear without transition */
|
||||
h("div", {
|
||||
role: "none"
|
||||
}, h(FocusTrap, {
|
||||
disabled: !this.showMask || !this.trapFocus,
|
||||
active: this.show,
|
||||
autoFocus: this.autoFocus,
|
||||
onEsc: this.onEsc
|
||||
}, {
|
||||
default: () => h(Transition, {
|
||||
name: this.transitionName,
|
||||
appear: this.isMounted,
|
||||
onAfterEnter: this.onAfterEnter,
|
||||
onAfterLeave: this.handleAfterLeave
|
||||
}, {
|
||||
default: () => withDirectives(h("div", mergeProps(this.$attrs, {
|
||||
role: "dialog",
|
||||
ref: "bodyRef",
|
||||
"aria-modal": "true",
|
||||
class: [
|
||||
`${mergedClsPrefix}-drawer`,
|
||||
this.rtlEnabled && `${mergedClsPrefix}-drawer--rtl`,
|
||||
`${mergedClsPrefix}-drawer--${this.placement}-placement`,
|
||||
/**
|
||||
* When the mouse is pressed to resize the drawer,
|
||||
* disable text selection
|
||||
*/
|
||||
this.isDragging && `${mergedClsPrefix}-drawer--unselectable`,
|
||||
this.nativeScrollbar && `${mergedClsPrefix}-drawer--native-scrollbar`
|
||||
]
|
||||
}), [this.resizable ? h("div", {
|
||||
class: [`${mergedClsPrefix}-drawer__resize-trigger`, (this.isDragging || this.isHoverOnResizeTrigger) && `${mergedClsPrefix}-drawer__resize-trigger--hover`],
|
||||
onMouseenter: this.handleMouseenterResizeTrigger,
|
||||
onMouseleave: this.handleMouseleaveResizeTrigger,
|
||||
onMousedown: this.handleMousedownResizeTrigger
|
||||
}) : null, this.nativeScrollbar ? h("div", {
|
||||
class: [`${mergedClsPrefix}-drawer-content-wrapper`, this.contentClass],
|
||||
style: this.contentStyle,
|
||||
role: "none"
|
||||
}, $slots) : h(Scrollbar, Object.assign({}, this.scrollbarProps, {
|
||||
contentStyle: this.contentStyle,
|
||||
contentClass: [`${mergedClsPrefix}-drawer-content-wrapper`, this.contentClass],
|
||||
theme: this.mergedTheme.peers.Scrollbar,
|
||||
themeOverrides: this.mergedTheme.peerOverrides.Scrollbar
|
||||
}), $slots)]), this.bodyDirectives)
|
||||
})
|
||||
})),
|
||||
[[vShow, this.displayDirective === "if" || this.displayed || this.show]]
|
||||
) : null;
|
||||
}
|
||||
});
|
||||
const {
|
||||
cubicBezierEaseIn: cubicBezierEaseIn$3,
|
||||
cubicBezierEaseOut: cubicBezierEaseOut$3
|
||||
} = commonVariables;
|
||||
function slideInFromBottomTransition({
|
||||
duration = "0.3s",
|
||||
leaveDuration = "0.2s",
|
||||
name = "slide-in-from-bottom"
|
||||
} = {}) {
|
||||
return [c(`&.${name}-transition-leave-active`, {
|
||||
transition: `transform ${leaveDuration} ${cubicBezierEaseIn$3}`
|
||||
}), c(`&.${name}-transition-enter-active`, {
|
||||
transition: `transform ${duration} ${cubicBezierEaseOut$3}`
|
||||
}), c(`&.${name}-transition-enter-to`, {
|
||||
transform: "translateY(0)"
|
||||
}), c(`&.${name}-transition-enter-from`, {
|
||||
transform: "translateY(100%)"
|
||||
}), c(`&.${name}-transition-leave-from`, {
|
||||
transform: "translateY(0)"
|
||||
}), c(`&.${name}-transition-leave-to`, {
|
||||
transform: "translateY(100%)"
|
||||
})];
|
||||
}
|
||||
const {
|
||||
cubicBezierEaseIn: cubicBezierEaseIn$2,
|
||||
cubicBezierEaseOut: cubicBezierEaseOut$2
|
||||
} = commonVariables;
|
||||
function slideInFromLeftTransition({
|
||||
duration = "0.3s",
|
||||
leaveDuration = "0.2s",
|
||||
name = "slide-in-from-left"
|
||||
} = {}) {
|
||||
return [c(`&.${name}-transition-leave-active`, {
|
||||
transition: `transform ${leaveDuration} ${cubicBezierEaseIn$2}`
|
||||
}), c(`&.${name}-transition-enter-active`, {
|
||||
transition: `transform ${duration} ${cubicBezierEaseOut$2}`
|
||||
}), c(`&.${name}-transition-enter-to`, {
|
||||
transform: "translateX(0)"
|
||||
}), c(`&.${name}-transition-enter-from`, {
|
||||
transform: "translateX(-100%)"
|
||||
}), c(`&.${name}-transition-leave-from`, {
|
||||
transform: "translateX(0)"
|
||||
}), c(`&.${name}-transition-leave-to`, {
|
||||
transform: "translateX(-100%)"
|
||||
})];
|
||||
}
|
||||
const {
|
||||
cubicBezierEaseIn: cubicBezierEaseIn$1,
|
||||
cubicBezierEaseOut: cubicBezierEaseOut$1
|
||||
} = commonVariables;
|
||||
function slideInFromRightTransition({
|
||||
duration = "0.3s",
|
||||
leaveDuration = "0.2s",
|
||||
name = "slide-in-from-right"
|
||||
} = {}) {
|
||||
return [c(`&.${name}-transition-leave-active`, {
|
||||
transition: `transform ${leaveDuration} ${cubicBezierEaseIn$1}`
|
||||
}), c(`&.${name}-transition-enter-active`, {
|
||||
transition: `transform ${duration} ${cubicBezierEaseOut$1}`
|
||||
}), c(`&.${name}-transition-enter-to`, {
|
||||
transform: "translateX(0)"
|
||||
}), c(`&.${name}-transition-enter-from`, {
|
||||
transform: "translateX(100%)"
|
||||
}), c(`&.${name}-transition-leave-from`, {
|
||||
transform: "translateX(0)"
|
||||
}), c(`&.${name}-transition-leave-to`, {
|
||||
transform: "translateX(100%)"
|
||||
})];
|
||||
}
|
||||
const {
|
||||
cubicBezierEaseIn,
|
||||
cubicBezierEaseOut
|
||||
} = commonVariables;
|
||||
function slideInFromTopTransition({
|
||||
duration = "0.3s",
|
||||
leaveDuration = "0.2s",
|
||||
name = "slide-in-from-top"
|
||||
} = {}) {
|
||||
return [c(`&.${name}-transition-leave-active`, {
|
||||
transition: `transform ${leaveDuration} ${cubicBezierEaseIn}`
|
||||
}), c(`&.${name}-transition-enter-active`, {
|
||||
transition: `transform ${duration} ${cubicBezierEaseOut}`
|
||||
}), c(`&.${name}-transition-enter-to`, {
|
||||
transform: "translateY(0)"
|
||||
}), c(`&.${name}-transition-enter-from`, {
|
||||
transform: "translateY(-100%)"
|
||||
}), c(`&.${name}-transition-leave-from`, {
|
||||
transform: "translateY(0)"
|
||||
}), c(`&.${name}-transition-leave-to`, {
|
||||
transform: "translateY(-100%)"
|
||||
})];
|
||||
}
|
||||
const style = c([cB("drawer", `
|
||||
word-break: break-word;
|
||||
line-height: var(--n-line-height);
|
||||
position: absolute;
|
||||
pointer-events: all;
|
||||
box-shadow: var(--n-box-shadow);
|
||||
transition:
|
||||
background-color .3s var(--n-bezier),
|
||||
color .3s var(--n-bezier);
|
||||
background-color: var(--n-color);
|
||||
color: var(--n-text-color);
|
||||
box-sizing: border-box;
|
||||
`, [slideInFromRightTransition(), slideInFromLeftTransition(), slideInFromTopTransition(), slideInFromBottomTransition(), cM("unselectable", `
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
`), cM("native-scrollbar", [cB("drawer-content-wrapper", `
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
`)]), cE("resize-trigger", `
|
||||
position: absolute;
|
||||
background-color: #0000;
|
||||
transition: background-color .3s var(--n-bezier);
|
||||
`, [cM("hover", `
|
||||
background-color: var(--n-resize-trigger-color-hover);
|
||||
`)]), cB("drawer-content-wrapper", `
|
||||
box-sizing: border-box;
|
||||
`), cB("drawer-content", `
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`, [cM("native-scrollbar", [cB("drawer-body-content-wrapper", `
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
`)]), cB("drawer-body", `
|
||||
flex: 1 0 0;
|
||||
overflow: hidden;
|
||||
`), cB("drawer-body-content-wrapper", `
|
||||
box-sizing: border-box;
|
||||
padding: var(--n-body-padding);
|
||||
`), cB("drawer-header", `
|
||||
font-weight: var(--n-title-font-weight);
|
||||
line-height: 1;
|
||||
font-size: var(--n-title-font-size);
|
||||
color: var(--n-title-text-color);
|
||||
padding: var(--n-header-padding);
|
||||
transition: border .3s var(--n-bezier);
|
||||
border-bottom: 1px solid var(--n-divider-color);
|
||||
border-bottom: var(--n-header-border-bottom);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
`, [cE("main", `
|
||||
flex: 1;
|
||||
`), cE("close", `
|
||||
margin-left: 6px;
|
||||
transition:
|
||||
background-color .3s var(--n-bezier),
|
||||
color .3s var(--n-bezier);
|
||||
`)]), cB("drawer-footer", `
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-top: var(--n-footer-border-top);
|
||||
transition: border .3s var(--n-bezier);
|
||||
padding: var(--n-footer-padding);
|
||||
`)]), cM("right-placement", `
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-top-left-radius: var(--n-border-radius);
|
||||
border-bottom-left-radius: var(--n-border-radius);
|
||||
`, [cE("resize-trigger", `
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateX(-1.5px);
|
||||
cursor: ew-resize;
|
||||
`)]), cM("left-placement", `
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-top-right-radius: var(--n-border-radius);
|
||||
border-bottom-right-radius: var(--n-border-radius);
|
||||
`, [cE("resize-trigger", `
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translateX(1.5px);
|
||||
cursor: ew-resize;
|
||||
`)]), cM("top-placement", `
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-bottom-left-radius: var(--n-border-radius);
|
||||
border-bottom-right-radius: var(--n-border-radius);
|
||||
`, [cE("resize-trigger", `
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translateY(1.5px);
|
||||
cursor: ns-resize;
|
||||
`)]), cM("bottom-placement", `
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-top-left-radius: var(--n-border-radius);
|
||||
border-top-right-radius: var(--n-border-radius);
|
||||
`, [cE("resize-trigger", `
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateY(-1.5px);
|
||||
cursor: ns-resize;
|
||||
`)])]), c("body", [c(">", [cB("drawer-container", `
|
||||
position: fixed;
|
||||
`)])]), cB("drawer-container", `
|
||||
position: relative;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
`, [c("> *", `
|
||||
pointer-events: all;
|
||||
`)]), cB("drawer-mask", `
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
`, [cM("invisible", `
|
||||
background-color: rgba(0, 0, 0, 0)
|
||||
`), fadeInTransition({
|
||||
enterDuration: "0.2s",
|
||||
leaveDuration: "0.2s",
|
||||
enterCubicBezier: "var(--n-bezier-in)",
|
||||
leaveCubicBezier: "var(--n-bezier-out)"
|
||||
})])]);
|
||||
const drawerProps = Object.assign(Object.assign({}, useTheme.props), {
|
||||
show: Boolean,
|
||||
width: [Number, String],
|
||||
height: [Number, String],
|
||||
placement: {
|
||||
type: String,
|
||||
default: "right"
|
||||
},
|
||||
maskClosable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showMask: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
to: [String, Object],
|
||||
displayDirective: {
|
||||
type: String,
|
||||
default: "if"
|
||||
},
|
||||
nativeScrollbar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zIndex: Number,
|
||||
onMaskClick: Function,
|
||||
scrollbarProps: Object,
|
||||
contentClass: String,
|
||||
contentStyle: [Object, String],
|
||||
trapFocus: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
onEsc: Function,
|
||||
autoFocus: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
closeOnEsc: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
blockScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maxWidth: Number,
|
||||
maxHeight: Number,
|
||||
minWidth: Number,
|
||||
minHeight: Number,
|
||||
resizable: Boolean,
|
||||
defaultWidth: {
|
||||
type: [Number, String],
|
||||
default: 251
|
||||
},
|
||||
defaultHeight: {
|
||||
type: [Number, String],
|
||||
default: 251
|
||||
},
|
||||
onUpdateWidth: [Function, Array],
|
||||
onUpdateHeight: [Function, Array],
|
||||
"onUpdate:width": [Function, Array],
|
||||
"onUpdate:height": [Function, Array],
|
||||
"onUpdate:show": [Function, Array],
|
||||
onUpdateShow: [Function, Array],
|
||||
onAfterEnter: Function,
|
||||
onAfterLeave: Function,
|
||||
/** @deprecated */
|
||||
drawerStyle: [String, Object],
|
||||
drawerClass: String,
|
||||
target: null,
|
||||
onShow: Function,
|
||||
onHide: Function
|
||||
});
|
||||
const __unplugin_components_2 = defineComponent({
|
||||
name: "Drawer",
|
||||
inheritAttrs: false,
|
||||
props: drawerProps,
|
||||
setup(props) {
|
||||
const {
|
||||
mergedClsPrefixRef,
|
||||
namespaceRef,
|
||||
inlineThemeDisabled
|
||||
} = useConfig(props);
|
||||
const isMountedRef = isMounted();
|
||||
const themeRef = useTheme("Drawer", "-drawer", style, drawerLight, props, mergedClsPrefixRef);
|
||||
const uncontrolledWidthRef = ref(props.defaultWidth);
|
||||
const uncontrolledHeightRef = ref(props.defaultHeight);
|
||||
const mergedWidthRef = useMergedState(toRef(props, "width"), uncontrolledWidthRef);
|
||||
const mergedHeightRef = useMergedState(toRef(props, "height"), uncontrolledHeightRef);
|
||||
const styleWidthRef = computed(() => {
|
||||
const {
|
||||
placement
|
||||
} = props;
|
||||
if (placement === "top" || placement === "bottom") return "";
|
||||
return formatLength(mergedWidthRef.value);
|
||||
});
|
||||
const styleHeightRef = computed(() => {
|
||||
const {
|
||||
placement
|
||||
} = props;
|
||||
if (placement === "left" || placement === "right") return "";
|
||||
return formatLength(mergedHeightRef.value);
|
||||
});
|
||||
const doUpdateWidth = (value) => {
|
||||
const {
|
||||
onUpdateWidth,
|
||||
"onUpdate:width": _onUpdateWidth
|
||||
} = props;
|
||||
if (onUpdateWidth) call(onUpdateWidth, value);
|
||||
if (_onUpdateWidth) call(_onUpdateWidth, value);
|
||||
uncontrolledWidthRef.value = value;
|
||||
};
|
||||
const doUpdateHeight = (value) => {
|
||||
const {
|
||||
onUpdateHeight,
|
||||
"onUpdate:width": _onUpdateHeight
|
||||
} = props;
|
||||
if (onUpdateHeight) call(onUpdateHeight, value);
|
||||
if (_onUpdateHeight) call(_onUpdateHeight, value);
|
||||
uncontrolledHeightRef.value = value;
|
||||
};
|
||||
const mergedBodyStyleRef = computed(() => {
|
||||
return [{
|
||||
width: styleWidthRef.value,
|
||||
height: styleHeightRef.value
|
||||
}, props.drawerStyle || ""];
|
||||
});
|
||||
function handleMaskClick(e) {
|
||||
const {
|
||||
onMaskClick,
|
||||
maskClosable
|
||||
} = props;
|
||||
if (maskClosable) {
|
||||
doUpdateShow(false);
|
||||
}
|
||||
if (onMaskClick) onMaskClick(e);
|
||||
}
|
||||
function handleOutsideClick(e) {
|
||||
handleMaskClick(e);
|
||||
}
|
||||
const isComposingRef = useIsComposing();
|
||||
function handleEsc(e) {
|
||||
var _a;
|
||||
(_a = props.onEsc) === null || _a === void 0 ? void 0 : _a.call(props);
|
||||
if (props.show && props.closeOnEsc && eventEffectNotPerformed(e)) {
|
||||
if (!isComposingRef.value) {
|
||||
doUpdateShow(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
function doUpdateShow(show) {
|
||||
const {
|
||||
onHide,
|
||||
onUpdateShow,
|
||||
"onUpdate:show": _onUpdateShow
|
||||
} = props;
|
||||
if (onUpdateShow) call(onUpdateShow, show);
|
||||
if (_onUpdateShow) call(_onUpdateShow, show);
|
||||
if (onHide && !show) call(onHide, show);
|
||||
}
|
||||
provide(drawerInjectionKey, {
|
||||
isMountedRef,
|
||||
mergedThemeRef: themeRef,
|
||||
mergedClsPrefixRef,
|
||||
doUpdateShow,
|
||||
doUpdateHeight,
|
||||
doUpdateWidth
|
||||
});
|
||||
const cssVarsRef = computed(() => {
|
||||
const {
|
||||
common: {
|
||||
cubicBezierEaseInOut,
|
||||
cubicBezierEaseIn: cubicBezierEaseIn2,
|
||||
cubicBezierEaseOut: cubicBezierEaseOut2
|
||||
},
|
||||
self: {
|
||||
color,
|
||||
textColor,
|
||||
boxShadow,
|
||||
lineHeight,
|
||||
headerPadding,
|
||||
footerPadding,
|
||||
borderRadius,
|
||||
bodyPadding,
|
||||
titleFontSize,
|
||||
titleTextColor,
|
||||
titleFontWeight,
|
||||
headerBorderBottom,
|
||||
footerBorderTop,
|
||||
closeIconColor,
|
||||
closeIconColorHover,
|
||||
closeIconColorPressed,
|
||||
closeColorHover,
|
||||
closeColorPressed,
|
||||
closeIconSize,
|
||||
closeSize,
|
||||
closeBorderRadius,
|
||||
resizableTriggerColorHover
|
||||
}
|
||||
} = themeRef.value;
|
||||
return {
|
||||
"--n-line-height": lineHeight,
|
||||
"--n-color": color,
|
||||
"--n-border-radius": borderRadius,
|
||||
"--n-text-color": textColor,
|
||||
"--n-box-shadow": boxShadow,
|
||||
"--n-bezier": cubicBezierEaseInOut,
|
||||
"--n-bezier-out": cubicBezierEaseOut2,
|
||||
"--n-bezier-in": cubicBezierEaseIn2,
|
||||
"--n-header-padding": headerPadding,
|
||||
"--n-body-padding": bodyPadding,
|
||||
"--n-footer-padding": footerPadding,
|
||||
"--n-title-text-color": titleTextColor,
|
||||
"--n-title-font-size": titleFontSize,
|
||||
"--n-title-font-weight": titleFontWeight,
|
||||
"--n-header-border-bottom": headerBorderBottom,
|
||||
"--n-footer-border-top": footerBorderTop,
|
||||
"--n-close-icon-color": closeIconColor,
|
||||
"--n-close-icon-color-hover": closeIconColorHover,
|
||||
"--n-close-icon-color-pressed": closeIconColorPressed,
|
||||
"--n-close-size": closeSize,
|
||||
"--n-close-color-hover": closeColorHover,
|
||||
"--n-close-color-pressed": closeColorPressed,
|
||||
"--n-close-icon-size": closeIconSize,
|
||||
"--n-close-border-radius": closeBorderRadius,
|
||||
"--n-resize-trigger-color-hover": resizableTriggerColorHover
|
||||
};
|
||||
});
|
||||
const themeClassHandle = inlineThemeDisabled ? useThemeClass("drawer", void 0, cssVarsRef, props) : void 0;
|
||||
return {
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
namespace: namespaceRef,
|
||||
mergedBodyStyle: mergedBodyStyleRef,
|
||||
handleOutsideClick,
|
||||
handleMaskClick,
|
||||
handleEsc,
|
||||
mergedTheme: themeRef,
|
||||
cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
|
||||
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
||||
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
|
||||
isMounted: isMountedRef
|
||||
};
|
||||
},
|
||||
render() {
|
||||
const {
|
||||
mergedClsPrefix
|
||||
} = this;
|
||||
return h(LazyTeleport, {
|
||||
to: this.to,
|
||||
show: this.show
|
||||
}, {
|
||||
default: () => {
|
||||
var _a;
|
||||
(_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
|
||||
return withDirectives(h("div", {
|
||||
class: [`${mergedClsPrefix}-drawer-container`, this.namespace, this.themeClass],
|
||||
style: this.cssVars,
|
||||
role: "none"
|
||||
}, this.showMask ? h(Transition, {
|
||||
name: "fade-in-transition",
|
||||
appear: this.isMounted
|
||||
}, {
|
||||
default: () => this.show ? h("div", {
|
||||
"aria-hidden": true,
|
||||
class: [`${mergedClsPrefix}-drawer-mask`, this.showMask === "transparent" && `${mergedClsPrefix}-drawer-mask--invisible`],
|
||||
onClick: this.handleMaskClick
|
||||
}) : null
|
||||
}) : null, h(NDrawerBodyWrapper, Object.assign({}, this.$attrs, {
|
||||
class: [this.drawerClass, this.$attrs.class],
|
||||
style: [this.mergedBodyStyle, this.$attrs.style],
|
||||
blockScroll: this.blockScroll,
|
||||
contentStyle: this.contentStyle,
|
||||
contentClass: this.contentClass,
|
||||
placement: this.placement,
|
||||
scrollbarProps: this.scrollbarProps,
|
||||
show: this.show,
|
||||
displayDirective: this.displayDirective,
|
||||
nativeScrollbar: this.nativeScrollbar,
|
||||
onAfterEnter: this.onAfterEnter,
|
||||
onAfterLeave: this.onAfterLeave,
|
||||
trapFocus: this.trapFocus,
|
||||
autoFocus: this.autoFocus,
|
||||
resizable: this.resizable,
|
||||
maxHeight: this.maxHeight,
|
||||
minHeight: this.minHeight,
|
||||
maxWidth: this.maxWidth,
|
||||
minWidth: this.minWidth,
|
||||
showMask: this.showMask,
|
||||
onEsc: this.handleEsc,
|
||||
onClickoutside: this.handleOutsideClick
|
||||
}), this.$slots)), [[zindexable, {
|
||||
zIndex: this.zIndex,
|
||||
enabled: this.show
|
||||
}]]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
export {
|
||||
__unplugin_components_2 as _
|
||||
};
|
||||
Binary file not shown.
@@ -1,195 +0,0 @@
|
||||
import { p as cB, V as cNotM, W as cM, q as useTheme, d as defineComponent, b6 as useMergedClsPrefix, b7 as ellipsisLight, r as ref, G as computed, au as onDeactivated, l as h, ax as mergeProps } from "./index-DKaFsuse.js";
|
||||
import { _ as __unplugin_components_3 } from "./Image-DXClIklC.js";
|
||||
const style = cB("ellipsis", {
|
||||
overflow: "hidden"
|
||||
}, [cNotM("line-clamp", `
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
max-width: 100%;
|
||||
`), cM("line-clamp", `
|
||||
display: -webkit-inline-box;
|
||||
-webkit-box-orient: vertical;
|
||||
`), cM("cursor-pointer", `
|
||||
cursor: pointer;
|
||||
`)]);
|
||||
function createLineClampClass(clsPrefix) {
|
||||
return `${clsPrefix}-ellipsis--line-clamp`;
|
||||
}
|
||||
function createCursorClass(clsPrefix, cursor) {
|
||||
return `${clsPrefix}-ellipsis--cursor-${cursor}`;
|
||||
}
|
||||
const ellipsisProps = Object.assign(Object.assign({}, useTheme.props), {
|
||||
expandTrigger: String,
|
||||
lineClamp: [Number, String],
|
||||
tooltip: {
|
||||
type: [Boolean, Object],
|
||||
default: true
|
||||
}
|
||||
});
|
||||
const __unplugin_components_2 = defineComponent({
|
||||
name: "Ellipsis",
|
||||
inheritAttrs: false,
|
||||
props: ellipsisProps,
|
||||
setup(props, {
|
||||
slots,
|
||||
attrs
|
||||
}) {
|
||||
const mergedClsPrefixRef = useMergedClsPrefix();
|
||||
const mergedTheme = useTheme("Ellipsis", "-ellipsis", style, ellipsisLight, props, mergedClsPrefixRef);
|
||||
const triggerRef = ref(null);
|
||||
const triggerInnerRef = ref(null);
|
||||
const tooltipRef = ref(null);
|
||||
const expandedRef = ref(false);
|
||||
const ellipsisStyleRef = computed(() => {
|
||||
const {
|
||||
lineClamp
|
||||
} = props;
|
||||
const {
|
||||
value: expanded
|
||||
} = expandedRef;
|
||||
if (lineClamp !== void 0) {
|
||||
return {
|
||||
textOverflow: "",
|
||||
"-webkit-line-clamp": expanded ? "" : lineClamp
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
textOverflow: expanded ? "" : "ellipsis",
|
||||
"-webkit-line-clamp": ""
|
||||
};
|
||||
}
|
||||
});
|
||||
function getTooltipDisabled() {
|
||||
let tooltipDisabled = false;
|
||||
const {
|
||||
value: expanded
|
||||
} = expandedRef;
|
||||
if (expanded) return true;
|
||||
const {
|
||||
value: trigger
|
||||
} = triggerRef;
|
||||
if (trigger) {
|
||||
const {
|
||||
lineClamp
|
||||
} = props;
|
||||
syncEllipsisStyle(trigger);
|
||||
if (lineClamp !== void 0) {
|
||||
tooltipDisabled = trigger.scrollHeight <= trigger.offsetHeight;
|
||||
} else {
|
||||
const {
|
||||
value: triggerInner
|
||||
} = triggerInnerRef;
|
||||
if (triggerInner) {
|
||||
tooltipDisabled = triggerInner.getBoundingClientRect().width <= trigger.getBoundingClientRect().width;
|
||||
}
|
||||
}
|
||||
syncCursorStyle(trigger, tooltipDisabled);
|
||||
}
|
||||
return tooltipDisabled;
|
||||
}
|
||||
const handleClickRef = computed(() => {
|
||||
return props.expandTrigger === "click" ? () => {
|
||||
var _a;
|
||||
const {
|
||||
value: expanded
|
||||
} = expandedRef;
|
||||
if (expanded) {
|
||||
(_a = tooltipRef.value) === null || _a === void 0 ? void 0 : _a.setShow(false);
|
||||
}
|
||||
expandedRef.value = !expanded;
|
||||
} : void 0;
|
||||
});
|
||||
onDeactivated(() => {
|
||||
var _a;
|
||||
if (props.tooltip) {
|
||||
(_a = tooltipRef.value) === null || _a === void 0 ? void 0 : _a.setShow(false);
|
||||
}
|
||||
});
|
||||
const renderTrigger = () => h("span", Object.assign({}, mergeProps(attrs, {
|
||||
class: [`${mergedClsPrefixRef.value}-ellipsis`, props.lineClamp !== void 0 ? createLineClampClass(mergedClsPrefixRef.value) : void 0, props.expandTrigger === "click" ? createCursorClass(mergedClsPrefixRef.value, "pointer") : void 0],
|
||||
style: ellipsisStyleRef.value
|
||||
}), {
|
||||
ref: "triggerRef",
|
||||
onClick: handleClickRef.value,
|
||||
onMouseenter: (
|
||||
// get tooltip disabled will derive cursor style
|
||||
props.expandTrigger === "click" ? getTooltipDisabled : void 0
|
||||
)
|
||||
}), props.lineClamp ? slots : h("span", {
|
||||
ref: "triggerInnerRef"
|
||||
}, slots));
|
||||
function syncEllipsisStyle(trigger) {
|
||||
if (!trigger) return;
|
||||
const latestStyle = ellipsisStyleRef.value;
|
||||
const lineClampClass = createLineClampClass(mergedClsPrefixRef.value);
|
||||
if (props.lineClamp !== void 0) {
|
||||
syncTriggerClass(trigger, lineClampClass, "add");
|
||||
} else {
|
||||
syncTriggerClass(trigger, lineClampClass, "remove");
|
||||
}
|
||||
for (const key in latestStyle) {
|
||||
if (trigger.style[key] !== latestStyle[key]) {
|
||||
trigger.style[key] = latestStyle[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
function syncCursorStyle(trigger, tooltipDisabled) {
|
||||
const cursorClass = createCursorClass(mergedClsPrefixRef.value, "pointer");
|
||||
if (props.expandTrigger === "click" && !tooltipDisabled) {
|
||||
syncTriggerClass(trigger, cursorClass, "add");
|
||||
} else {
|
||||
syncTriggerClass(trigger, cursorClass, "remove");
|
||||
}
|
||||
}
|
||||
function syncTriggerClass(trigger, styleClass, action) {
|
||||
if (action === "add") {
|
||||
if (!trigger.classList.contains(styleClass)) {
|
||||
trigger.classList.add(styleClass);
|
||||
}
|
||||
} else {
|
||||
if (trigger.classList.contains(styleClass)) {
|
||||
trigger.classList.remove(styleClass);
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
mergedTheme,
|
||||
triggerRef,
|
||||
triggerInnerRef,
|
||||
tooltipRef,
|
||||
handleClick: handleClickRef,
|
||||
renderTrigger,
|
||||
getTooltipDisabled
|
||||
};
|
||||
},
|
||||
render() {
|
||||
var _a;
|
||||
const {
|
||||
tooltip,
|
||||
renderTrigger,
|
||||
$slots
|
||||
} = this;
|
||||
if (tooltip) {
|
||||
const {
|
||||
mergedTheme
|
||||
} = this;
|
||||
return h(__unplugin_components_3, Object.assign({
|
||||
ref: "tooltipRef",
|
||||
placement: "top"
|
||||
}, tooltip, {
|
||||
getDisabled: this.getTooltipDisabled,
|
||||
theme: mergedTheme.peers.Tooltip,
|
||||
themeOverrides: mergedTheme.peerOverrides.Tooltip
|
||||
}), {
|
||||
trigger: renderTrigger,
|
||||
default: (_a = $slots.tooltip) !== null && _a !== void 0 ? _a : $slots.default
|
||||
});
|
||||
} else {
|
||||
return renderTrigger();
|
||||
}
|
||||
}
|
||||
});
|
||||
export {
|
||||
__unplugin_components_2 as _
|
||||
};
|
||||
Binary file not shown.
Binary file not shown.
@@ -1,111 +0,0 @@
|
||||
import { p as cB, W as cM, m as c, q as useTheme, d as defineComponent, x as useConfig, bv as iconLight, G as computed, ap as useThemeClass, bd as warn, l as h, ax as mergeProps } from "./index-DKaFsuse.js";
|
||||
import { f as formatLength } from "./Image-DXClIklC.js";
|
||||
const style = cB("icon", `
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
fill: currentColor;
|
||||
transform: translateZ(0);
|
||||
`, [cM("color-transition", {
|
||||
transition: "color .3s var(--n-bezier)"
|
||||
}), cM("depth", {
|
||||
color: "var(--n-color)"
|
||||
}, [c("svg", {
|
||||
opacity: "var(--n-opacity)",
|
||||
transition: "opacity .3s var(--n-bezier)"
|
||||
})]), c("svg", {
|
||||
height: "1em",
|
||||
width: "1em"
|
||||
})]);
|
||||
const iconProps = Object.assign(Object.assign({}, useTheme.props), {
|
||||
depth: [String, Number],
|
||||
size: [Number, String],
|
||||
color: String,
|
||||
component: [Object, Function]
|
||||
});
|
||||
const NIcon = defineComponent({
|
||||
_n_icon__: true,
|
||||
name: "Icon",
|
||||
inheritAttrs: false,
|
||||
props: iconProps,
|
||||
setup(props) {
|
||||
const {
|
||||
mergedClsPrefixRef,
|
||||
inlineThemeDisabled
|
||||
} = useConfig(props);
|
||||
const themeRef = useTheme("Icon", "-icon", style, iconLight, props, mergedClsPrefixRef);
|
||||
const cssVarsRef = computed(() => {
|
||||
const {
|
||||
depth
|
||||
} = props;
|
||||
const {
|
||||
common: {
|
||||
cubicBezierEaseInOut
|
||||
},
|
||||
self
|
||||
} = themeRef.value;
|
||||
if (depth !== void 0) {
|
||||
const {
|
||||
color,
|
||||
[`opacity${depth}Depth`]: opacity
|
||||
} = self;
|
||||
return {
|
||||
"--n-bezier": cubicBezierEaseInOut,
|
||||
"--n-color": color,
|
||||
"--n-opacity": opacity
|
||||
};
|
||||
}
|
||||
return {
|
||||
"--n-bezier": cubicBezierEaseInOut,
|
||||
"--n-color": "",
|
||||
"--n-opacity": ""
|
||||
};
|
||||
});
|
||||
const themeClassHandle = inlineThemeDisabled ? useThemeClass("icon", computed(() => `${props.depth || "d"}`), cssVarsRef, props) : void 0;
|
||||
return {
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
mergedStyle: computed(() => {
|
||||
const {
|
||||
size,
|
||||
color
|
||||
} = props;
|
||||
return {
|
||||
fontSize: formatLength(size),
|
||||
color
|
||||
};
|
||||
}),
|
||||
cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
|
||||
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
||||
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
|
||||
};
|
||||
},
|
||||
render() {
|
||||
var _a;
|
||||
const {
|
||||
$parent,
|
||||
depth,
|
||||
mergedClsPrefix,
|
||||
component,
|
||||
onRender,
|
||||
themeClass
|
||||
} = this;
|
||||
if ((_a = $parent === null || $parent === void 0 ? void 0 : $parent.$options) === null || _a === void 0 ? void 0 : _a._n_icon__) {
|
||||
warn("icon", "don't wrap `n-icon` inside `n-icon`");
|
||||
}
|
||||
onRender === null || onRender === void 0 ? void 0 : onRender();
|
||||
return h("i", mergeProps(this.$attrs, {
|
||||
role: "img",
|
||||
class: [`${mergedClsPrefix}-icon`, themeClass, {
|
||||
[`${mergedClsPrefix}-icon--depth`]: depth,
|
||||
[`${mergedClsPrefix}-icon--color-transition`]: depth !== void 0
|
||||
}],
|
||||
style: [this.cssVars, this.mergedStyle]
|
||||
}), component ? h(component) : this.$slots);
|
||||
}
|
||||
});
|
||||
export {
|
||||
NIcon as N
|
||||
};
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,170 +0,0 @@
|
||||
import { p as cB, W as cM, d as defineComponent, q as useTheme, r as ref, x as useConfig, aI as layoutLight, $ as provide, aJ as useReactivated, G as computed, ap as useThemeClass, l as h, aK as Scrollbar, aL as createInjectionKey } from "./index-DKaFsuse.js";
|
||||
const positionProp = {
|
||||
type: String,
|
||||
default: "static"
|
||||
};
|
||||
const style = cB("layout", `
|
||||
color: var(--n-text-color);
|
||||
background-color: var(--n-color);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: auto;
|
||||
flex: auto;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
box-shadow .3s var(--n-bezier),
|
||||
background-color .3s var(--n-bezier),
|
||||
color .3s var(--n-bezier);
|
||||
`, [cB("layout-scroll-container", `
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
`), cM("absolute-positioned", `
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
`)]);
|
||||
const layoutProps = {
|
||||
embedded: Boolean,
|
||||
position: positionProp,
|
||||
nativeScrollbar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
scrollbarProps: Object,
|
||||
onScroll: Function,
|
||||
contentClass: String,
|
||||
contentStyle: {
|
||||
type: [String, Object],
|
||||
default: ""
|
||||
},
|
||||
hasSider: Boolean,
|
||||
siderPlacement: {
|
||||
type: String,
|
||||
default: "left"
|
||||
}
|
||||
};
|
||||
const layoutInjectionKey = createInjectionKey("n-layout");
|
||||
function createLayoutComponent(isContent) {
|
||||
return defineComponent({
|
||||
name: "Layout",
|
||||
props: Object.assign(Object.assign({}, useTheme.props), layoutProps),
|
||||
setup(props) {
|
||||
const scrollableElRef = ref(null);
|
||||
const scrollbarInstRef = ref(null);
|
||||
const {
|
||||
mergedClsPrefixRef,
|
||||
inlineThemeDisabled
|
||||
} = useConfig(props);
|
||||
const themeRef = useTheme("Layout", "-layout", style, layoutLight, props, mergedClsPrefixRef);
|
||||
function scrollTo(options, y) {
|
||||
if (props.nativeScrollbar) {
|
||||
const {
|
||||
value: scrollableEl
|
||||
} = scrollableElRef;
|
||||
if (scrollableEl) {
|
||||
if (y === void 0) {
|
||||
scrollableEl.scrollTo(options);
|
||||
} else {
|
||||
scrollableEl.scrollTo(options, y);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const {
|
||||
value: scrollbarInst
|
||||
} = scrollbarInstRef;
|
||||
if (scrollbarInst) {
|
||||
scrollbarInst.scrollTo(options, y);
|
||||
}
|
||||
}
|
||||
}
|
||||
provide(layoutInjectionKey, props);
|
||||
let scrollX = 0;
|
||||
let scrollY = 0;
|
||||
const handleNativeElScroll = (e) => {
|
||||
var _a;
|
||||
const target = e.target;
|
||||
scrollX = target.scrollLeft;
|
||||
scrollY = target.scrollTop;
|
||||
(_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
||||
};
|
||||
useReactivated(() => {
|
||||
if (props.nativeScrollbar) {
|
||||
const el = scrollableElRef.value;
|
||||
if (el) {
|
||||
el.scrollTop = scrollY;
|
||||
el.scrollLeft = scrollX;
|
||||
}
|
||||
}
|
||||
});
|
||||
const hasSiderStyle = {
|
||||
display: "flex",
|
||||
flexWrap: "nowrap",
|
||||
width: "100%",
|
||||
flexDirection: "row"
|
||||
};
|
||||
const exposedMethods = {
|
||||
scrollTo
|
||||
};
|
||||
const cssVarsRef = computed(() => {
|
||||
const {
|
||||
common: {
|
||||
cubicBezierEaseInOut
|
||||
},
|
||||
self
|
||||
} = themeRef.value;
|
||||
return {
|
||||
"--n-bezier": cubicBezierEaseInOut,
|
||||
"--n-color": props.embedded ? self.colorEmbedded : self.color,
|
||||
"--n-text-color": self.textColor
|
||||
};
|
||||
});
|
||||
const themeClassHandle = inlineThemeDisabled ? useThemeClass("layout", computed(() => {
|
||||
return props.embedded ? "e" : "";
|
||||
}), cssVarsRef, props) : void 0;
|
||||
return Object.assign({
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
scrollableElRef,
|
||||
scrollbarInstRef,
|
||||
hasSiderStyle,
|
||||
mergedTheme: themeRef,
|
||||
handleNativeElScroll,
|
||||
cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
|
||||
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
||||
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
|
||||
}, exposedMethods);
|
||||
},
|
||||
render() {
|
||||
var _a;
|
||||
const {
|
||||
mergedClsPrefix,
|
||||
hasSider
|
||||
} = this;
|
||||
(_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
|
||||
const hasSiderStyle = hasSider ? this.hasSiderStyle : void 0;
|
||||
const layoutClass = [this.themeClass, isContent, `${mergedClsPrefix}-layout`, `${mergedClsPrefix}-layout--${this.position}-positioned`];
|
||||
return h("div", {
|
||||
class: layoutClass,
|
||||
style: this.cssVars
|
||||
}, this.nativeScrollbar ? h("div", {
|
||||
ref: "scrollableElRef",
|
||||
class: [`${mergedClsPrefix}-layout-scroll-container`, this.contentClass],
|
||||
style: [this.contentStyle, hasSiderStyle],
|
||||
onScroll: this.handleNativeElScroll
|
||||
}, this.$slots) : h(Scrollbar, Object.assign({}, this.scrollbarProps, {
|
||||
onScroll: this.onScroll,
|
||||
ref: "scrollbarInstRef",
|
||||
theme: this.mergedTheme.peers.Scrollbar,
|
||||
themeOverrides: this.mergedTheme.peerOverrides.Scrollbar,
|
||||
contentClass: this.contentClass,
|
||||
contentStyle: [this.contentStyle, hasSiderStyle]
|
||||
}), this.$slots));
|
||||
}
|
||||
});
|
||||
}
|
||||
const __unplugin_components_1 = createLayoutComponent(false);
|
||||
export {
|
||||
__unplugin_components_1 as _
|
||||
};
|
||||
Binary file not shown.
@@ -1,162 +0,0 @@
|
||||
.music-title[data-v-1b137c3d] {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.music-title[data-v-1b137c3d]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.music-page[data-v-1b137c3d] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-top-left-radius: 1rem;
|
||||
border-top-right-radius: 1rem;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.75;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.music-page[data-v-1b137c3d]:is(.dark *) {
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.75;
|
||||
}
|
||||
.music-page[data-v-1b137c3d] {
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.music-close[data-v-1b137c3d] {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.music-close[data-v-1b137c3d]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.music-close .icon[data-v-1b137c3d] {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
.music-content[data-v-1b137c3d] {
|
||||
display: flex;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
.music-info[data-v-1b137c3d] {
|
||||
display: flex;
|
||||
width: 25%;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.music-info .music-cover[data-v-1b137c3d] {
|
||||
margin-bottom: 1rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
min-height: 250px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.music-info .music-cover .cover-img[data-v-1b137c3d] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
.music-info .creator-info[data-v-1b137c3d] {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.music-info .creator-info .creator-name[data-v-1b137c3d] {
|
||||
margin-left: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.music-info .creator-info .creator-name[data-v-1b137c3d]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.music-info .music-desc[data-v-1b137c3d] {
|
||||
padding-right: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
line-height: 1.625;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.music-info .music-desc[data-v-1b137c3d]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.music-list[data-v-1b137c3d] {
|
||||
min-height: 0px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.music-list-container[data-v-1b137c3d] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 0px;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
.music-list-content[data-v-1b137c3d] {
|
||||
min-height: calc(80vh - 60px);
|
||||
}
|
||||
.music-list[data-v-1b137c3d] .n-virtual-list__scroll {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.music-list[data-v-1b137c3d] .n-virtual-list__scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.mobile .music-page[data-v-1b137c3d] {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.mobile .music-content[data-v-1b137c3d] {
|
||||
flex-direction: column;
|
||||
}
|
||||
.mobile .music-info[data-v-1b137c3d] {
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.mobile .music-info .music-cover[data-v-1b137c3d] {
|
||||
margin-bottom: 1rem;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.mobile .music-info .music-detail[data-v-1b137c3d] {
|
||||
margin-left: 1rem;
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
.loading-more[data-v-1b137c3d] {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-align: center;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.loading-more[data-v-1b137c3d]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.double-item[data-v-1b137c3d] {
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 1.5rem;
|
||||
background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.2;
|
||||
}
|
||||
.double-item[data-v-1b137c3d]:is(.dark *) {
|
||||
background-color: rgb(22 22 22 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.2;
|
||||
}
|
||||
Binary file not shown.
@@ -1,258 +0,0 @@
|
||||
import { ad as request, d as defineComponent, r as ref, G as computed, E as watch, O as createBlock, f as withCtx, u as unref, g as useStore, j as openBlock, b as createBaseVNode, e as createVNode, t as toDisplayString, a7 as getImgUrl, n as normalizeClass, s as setAnimationClass, c as createElementBlock, T as createCommentVNode, U as PlayBottom, a4 as renderList, a2 as normalizeStyle, a3 as Fragment, ac as isMobile, a5 as setAnimationDelay, S as Scrollbar, aj as __unplugin_components_0, am as getMusicDetail, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
import { S as SongItem } from "./SongItem-CoswpGn6.js";
|
||||
import { _ as __unplugin_components_2 } from "./Drawer-BEJ8Ydua.js";
|
||||
import { _ as __unplugin_components_2$2 } from "./Avatar-rQ2og-6c.js";
|
||||
import { _ as __unplugin_components_2$1 } from "./Ellipsis-D4R5dIX2.js";
|
||||
import { N as NImage } from "./Image-DXClIklC.js";
|
||||
function getListByCat(params) {
|
||||
return request.get("/top/playlist", {
|
||||
params
|
||||
});
|
||||
}
|
||||
function getListDetail(id) {
|
||||
return request.get("/playlist/detail", { params: { id } });
|
||||
}
|
||||
function getAlbum(id) {
|
||||
return request.get("/album", { params: { id } });
|
||||
}
|
||||
const _hoisted_1 = { class: "music-page" };
|
||||
const _hoisted_2 = { class: "music-header h-12 flex items-center justify-between" };
|
||||
const _hoisted_3 = { class: "music-title" };
|
||||
const _hoisted_4 = { class: "music-content" };
|
||||
const _hoisted_5 = { class: "music-info" };
|
||||
const _hoisted_6 = { class: "music-cover" };
|
||||
const _hoisted_7 = {
|
||||
key: 0,
|
||||
class: "creator-info"
|
||||
};
|
||||
const _hoisted_8 = { class: "creator-name" };
|
||||
const _hoisted_9 = {
|
||||
key: 0,
|
||||
class: "music-desc"
|
||||
};
|
||||
const _hoisted_10 = { class: "music-list-container" };
|
||||
const _hoisted_11 = { class: "music-list" };
|
||||
const _hoisted_12 = { class: "music-list-content" };
|
||||
const _hoisted_13 = {
|
||||
key: 0,
|
||||
class: "loading-more"
|
||||
};
|
||||
const pageSize = 20;
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
__name: "MusicList",
|
||||
props: {
|
||||
show: { type: Boolean },
|
||||
name: {},
|
||||
songList: {},
|
||||
loading: { type: Boolean, default: false },
|
||||
listInfo: {},
|
||||
cover: { type: Boolean, default: true }
|
||||
},
|
||||
emits: ["update:show", "update:loading"],
|
||||
setup(__props, { emit: __emit }) {
|
||||
const store = useStore();
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const page = ref(0);
|
||||
const isLoadingMore = ref(false);
|
||||
const displayedSongs = ref([]);
|
||||
const loadingList = ref(false);
|
||||
const total = computed(() => {
|
||||
if (props.listInfo?.trackIds) {
|
||||
return props.listInfo.trackIds.length;
|
||||
}
|
||||
return props.songList.length;
|
||||
});
|
||||
const formatDetail = computed(() => (detail) => {
|
||||
const song = {
|
||||
artists: detail.ar,
|
||||
name: detail.al.name,
|
||||
id: detail.al.id
|
||||
};
|
||||
detail.song = song;
|
||||
detail.picUrl = detail.al.picUrl;
|
||||
return detail;
|
||||
});
|
||||
const handlePlay = () => {
|
||||
const tracks = props.songList || [];
|
||||
store.commit(
|
||||
"setPlayList",
|
||||
tracks.map((item) => ({
|
||||
...item,
|
||||
picUrl: item.al.picUrl,
|
||||
song: {
|
||||
artists: item.ar
|
||||
}
|
||||
}))
|
||||
);
|
||||
};
|
||||
const close = () => {
|
||||
emit("update:show", false);
|
||||
};
|
||||
const loadMoreSongs = async () => {
|
||||
if (isLoadingMore.value || displayedSongs.value.length >= total.value) return;
|
||||
isLoadingMore.value = true;
|
||||
try {
|
||||
if (props.listInfo?.trackIds) {
|
||||
const start = page.value * pageSize;
|
||||
const end = Math.min((page.value + 1) * pageSize, total.value);
|
||||
const trackIds = props.listInfo.trackIds.slice(start, end).map((item) => item.id);
|
||||
if (trackIds.length > 0) {
|
||||
const { data } = await getMusicDetail(trackIds);
|
||||
displayedSongs.value = [...displayedSongs.value, ...data.songs];
|
||||
page.value++;
|
||||
}
|
||||
} else {
|
||||
const start = page.value * pageSize;
|
||||
const end = Math.min((page.value + 1) * pageSize, props.songList.length);
|
||||
const newSongs = props.songList.slice(start, end);
|
||||
displayedSongs.value = [...displayedSongs.value, ...newSongs];
|
||||
page.value++;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载歌曲失败:", error);
|
||||
} finally {
|
||||
isLoadingMore.value = false;
|
||||
loadingList.value = false;
|
||||
}
|
||||
};
|
||||
const getItemAnimationDelay = (index) => {
|
||||
const currentPageIndex = index % pageSize;
|
||||
return setAnimationDelay(currentPageIndex, 20);
|
||||
};
|
||||
const handleScroll = (e) => {
|
||||
const target = e.target;
|
||||
if (!target) return;
|
||||
const { scrollTop, scrollHeight, clientHeight } = target;
|
||||
if (scrollHeight - scrollTop - clientHeight < 100 && !isLoadingMore.value) {
|
||||
loadMoreSongs();
|
||||
}
|
||||
};
|
||||
watch(
|
||||
() => props.show,
|
||||
(newVal) => {
|
||||
loadingList.value = newVal;
|
||||
if (!props.cover) {
|
||||
loadingList.value = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.songList,
|
||||
(newSongs) => {
|
||||
page.value = 0;
|
||||
displayedSongs.value = newSongs.slice(0, pageSize);
|
||||
if (newSongs.length > pageSize) {
|
||||
page.value = 1;
|
||||
}
|
||||
loadingList.value = false;
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_ellipsis = __unplugin_components_2$1;
|
||||
const _component_n_image = NImage;
|
||||
const _component_n_avatar = __unplugin_components_2$2;
|
||||
const _component_n_scrollbar = Scrollbar;
|
||||
const _component_n_spin = __unplugin_components_0;
|
||||
const _component_n_drawer = __unplugin_components_2;
|
||||
return openBlock(), createBlock(_component_n_drawer, {
|
||||
show: _ctx.show,
|
||||
height: unref(isMobile) ? "100%" : "80%",
|
||||
placement: "bottom",
|
||||
"block-scroll": "",
|
||||
"mask-closable": "",
|
||||
style: { backgroundColor: "transparent" },
|
||||
to: `#layout-main`,
|
||||
onMaskClick: close
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", _hoisted_1, [
|
||||
createBaseVNode("div", _hoisted_2, [
|
||||
createVNode(_component_n_ellipsis, { "line-clamp": 1 }, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", _hoisted_3, toDisplayString(_ctx.name), 1)
|
||||
]),
|
||||
_: 1
|
||||
}),
|
||||
createBaseVNode("div", { class: "music-close" }, [
|
||||
createBaseVNode("i", {
|
||||
class: "icon iconfont icon-icon_error",
|
||||
onClick: close
|
||||
})
|
||||
])
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_4, [
|
||||
createBaseVNode("div", _hoisted_5, [
|
||||
createBaseVNode("div", _hoisted_6, [
|
||||
createVNode(_component_n_image, {
|
||||
src: unref(getImgUrl)(_ctx.cover ? _ctx.listInfo?.coverImgUrl : unref(displayedSongs)[0]?.picUrl, "500y500"),
|
||||
class: normalizeClass(["cover-img", unref(setAnimationClass)("animate__fadeIn")]),
|
||||
"preview-disabled": "",
|
||||
"object-fit": "cover"
|
||||
}, null, 8, ["src", "class"])
|
||||
]),
|
||||
_ctx.listInfo?.creator ? (openBlock(), createElementBlock("div", _hoisted_7, [
|
||||
createVNode(_component_n_avatar, {
|
||||
round: "",
|
||||
size: 24,
|
||||
src: unref(getImgUrl)(_ctx.listInfo.creator.avatarUrl, "50y50")
|
||||
}, null, 8, ["src"]),
|
||||
createBaseVNode("span", _hoisted_8, toDisplayString(_ctx.listInfo.creator.nickname), 1)
|
||||
])) : createCommentVNode("", true),
|
||||
createVNode(_component_n_scrollbar, { style: { "max-height": "200" } }, {
|
||||
default: withCtx(() => [
|
||||
_ctx.listInfo?.description ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(_ctx.listInfo.description), 1)) : createCommentVNode("", true),
|
||||
createVNode(PlayBottom)
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_10, [
|
||||
createBaseVNode("div", _hoisted_11, [
|
||||
createVNode(_component_n_scrollbar, { onScroll: handleScroll }, {
|
||||
default: withCtx(() => [
|
||||
createVNode(_component_n_spin, {
|
||||
show: unref(loadingList) || _ctx.loading
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", _hoisted_12, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayedSongs), (item, index) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: item.id,
|
||||
class: normalizeClass(["double-item", unref(setAnimationClass)("animate__bounceInUp")]),
|
||||
style: normalizeStyle(getItemAnimationDelay(index))
|
||||
}, [
|
||||
createVNode(SongItem, {
|
||||
item: unref(formatDetail)(item),
|
||||
onPlay: handlePlay
|
||||
}, null, 8, ["item"])
|
||||
], 6);
|
||||
}), 128)),
|
||||
unref(isLoadingMore) ? (openBlock(), createElementBlock("div", _hoisted_13, "加载更多...")) : createCommentVNode("", true),
|
||||
createVNode(PlayBottom)
|
||||
])
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["show"])
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
createVNode(PlayBottom)
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["show", "height"]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const MusicList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1b137c3d"]]);
|
||||
export {
|
||||
MusicList as M,
|
||||
getListDetail as a,
|
||||
getListByCat as b,
|
||||
getAlbum as g
|
||||
};
|
||||
Binary file not shown.
@@ -1,177 +0,0 @@
|
||||
.mv-detail[data-v-f4c63e83] {
|
||||
height: 100%;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.mv-detail[data-v-f4c63e83]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.mv-detail-title[data-v-f4c63e83] {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 10;
|
||||
padding: 1rem;
|
||||
transition-property: opacity;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
|
||||
}
|
||||
.mv-detail-title .title[data-v-f4c63e83] {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.video-container[data-v-f4c63e83] {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.video-container .video-player[data-v-f4c63e83] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
}
|
||||
.video-container .play-hint[data-v-f4c63e83] {
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
.video-container .play-hint .n-button[data-v-f4c63e83] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.video-container .play-hint .n-button[data-v-f4c63e83]:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.video-container .custom-controls[data-v-f4c63e83] {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
padding: 1rem;
|
||||
transition-property: opacity;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
|
||||
}
|
||||
.video-container .custom-controls .controls-main[data-v-f4c63e83] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.video-container .custom-controls .controls-main .left-controls[data-v-f4c63e83],
|
||||
.video-container .custom-controls .controls-main .right-controls[data-v-f4c63e83] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.video-container .custom-controls .controls-main .left-controls .n-button[data-v-f4c63e83],
|
||||
.video-container .custom-controls .controls-main .right-controls .n-button[data-v-f4c63e83] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.video-container .custom-controls .controls-main .left-controls .n-button[data-v-f4c63e83]:hover,
|
||||
.video-container .custom-controls .controls-main .right-controls .n-button[data-v-f4c63e83]:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.video-container .custom-controls .controls-main .left-controls .time-display[data-v-f4c63e83],
|
||||
.video-container .custom-controls .controls-main .right-controls .time-display[data-v-f4c63e83] {
|
||||
margin-left: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mode-hint[data-v-f4c63e83] {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
--tw-translate-x: -50%;
|
||||
--tw-translate-y: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.mode-hint .mode-icon[data-v-f4c63e83] {
|
||||
margin-bottom: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mode-hint .mode-text[data-v-f4c63e83] {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.custom-slider[data-v-f4c63e83] .n-slider {
|
||||
--n-rail-height: 4px;
|
||||
--n-rail-color: rgba(255, 255, 255, 0.2);
|
||||
--n-fill-color: #10b981;
|
||||
--n-handle-size: 12px;
|
||||
--n-handle-color: #10b981;
|
||||
}
|
||||
.progress-bar[data-v-f4c63e83] {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.progress-bar .progress-rail[data-v-f4c63e83] {
|
||||
position: relative;
|
||||
height: 0.25rem;
|
||||
width: 100%;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.progress-bar .progress-rail .progress-buffer[data-v-f4c63e83] {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.volume-control[data-v-f4c63e83] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.volume-control .volume-slider[data-v-f4c63e83] {
|
||||
width: 100px;
|
||||
}
|
||||
.controls-hidden[data-v-f4c63e83] {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.cursor-hidden[data-v-f4c63e83] {
|
||||
cursor: none;
|
||||
}
|
||||
.title-hidden[data-v-f4c63e83] {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-active[data-v-f4c63e83],
|
||||
.fade-leave-active[data-v-f4c63e83] {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.fade-enter-from[data-v-f4c63e83],
|
||||
.fade-leave-to[data-v-f4c63e83] {
|
||||
opacity: 0;
|
||||
}
|
||||
Binary file not shown.
@@ -1,670 +0,0 @@
|
||||
import { ad as request, d as defineComponent, r as ref, E as watch, o as onMounted, a1 as onUnmounted, G as computed, O as createBlock, f as withCtx, g as useStore, j as openBlock, b as createBaseVNode, n as normalizeClass, c as createElementBlock, e as createVNode, u as unref, B as Button, T as createCommentVNode, a2 as normalizeStyle, k as createTextVNode, t as toDisplayString, ak as Transition, M as nextTick, aj as __unplugin_components_0$1, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
import { N as NIcon } from "./Icon-DucaliTK.js";
|
||||
import { _ as __unplugin_components_0 } from "./Slider-BA6NituQ.js";
|
||||
import { _ as __unplugin_components_3 } from "./Image-DXClIklC.js";
|
||||
import { _ as __unplugin_components_2 } from "./Drawer-BEJ8Ydua.js";
|
||||
import { _ as __unplugin_components_2$1 } from "./Ellipsis-D4R5dIX2.js";
|
||||
const getTopMv = (params) => {
|
||||
return request({
|
||||
url: "/mv/all",
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
};
|
||||
const getAllMv = (params) => {
|
||||
return request({
|
||||
url: "/mv/all",
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
};
|
||||
const getMvUrl = (id) => {
|
||||
return request.get("/mv/url", {
|
||||
params: {
|
||||
id
|
||||
}
|
||||
});
|
||||
};
|
||||
const _hoisted_1 = { class: "mv-detail" };
|
||||
const _hoisted_2 = ["src"];
|
||||
const _hoisted_3 = { class: "progress-bar custom-slider" };
|
||||
const _hoisted_4 = { class: "progress-rail" };
|
||||
const _hoisted_5 = { class: "controls-main" };
|
||||
const _hoisted_6 = { class: "left-controls" };
|
||||
const _hoisted_7 = {
|
||||
key: 1,
|
||||
class: "ri-skip-back-line"
|
||||
};
|
||||
const _hoisted_8 = {
|
||||
key: 1,
|
||||
class: "ri-skip-forward-line"
|
||||
};
|
||||
const _hoisted_9 = { class: "time-display" };
|
||||
const _hoisted_10 = { class: "right-controls" };
|
||||
const _hoisted_11 = {
|
||||
key: 0,
|
||||
class: "volume-control custom-slider"
|
||||
};
|
||||
const _hoisted_12 = {
|
||||
key: 0,
|
||||
class: "mode-hint"
|
||||
};
|
||||
const _hoisted_13 = { class: "mode-text" };
|
||||
const _hoisted_14 = { class: "title" };
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
__name: "MvPlayer",
|
||||
props: {
|
||||
show: { type: Boolean, default: false },
|
||||
currentMv: { default: void 0 },
|
||||
noList: { type: Boolean, default: false }
|
||||
},
|
||||
emits: ["update:show", "next", "prev"],
|
||||
setup(__props, { emit: __emit }) {
|
||||
const PLAY_MODE = {
|
||||
Single: "single",
|
||||
Auto: "auto"
|
||||
};
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const store = useStore();
|
||||
const mvUrl = ref();
|
||||
const playMode = ref(PLAY_MODE.Auto);
|
||||
const videoRef = ref();
|
||||
const isPlaying = ref(false);
|
||||
const currentTime = ref(0);
|
||||
const duration = ref(0);
|
||||
const progress = ref(0);
|
||||
const bufferedProgress = ref(0);
|
||||
const volume = ref(100);
|
||||
const showControls = ref(true);
|
||||
let controlsTimer = null;
|
||||
const formatTime = (seconds) => {
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = Math.floor(seconds % 60);
|
||||
return `${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
|
||||
};
|
||||
const togglePlay = () => {
|
||||
if (!videoRef.value) return;
|
||||
if (isPlaying.value) {
|
||||
videoRef.value.pause();
|
||||
} else {
|
||||
videoRef.value.play();
|
||||
}
|
||||
resetCursorTimer();
|
||||
};
|
||||
const toggleMute = () => {
|
||||
if (!videoRef.value) return;
|
||||
if (volume.value === 0) {
|
||||
volume.value = 100;
|
||||
} else {
|
||||
volume.value = 0;
|
||||
}
|
||||
};
|
||||
watch(volume, (newVolume) => {
|
||||
if (videoRef.value) {
|
||||
videoRef.value.volume = newVolume / 100;
|
||||
}
|
||||
});
|
||||
const handleProgressChange = (value) => {
|
||||
if (!videoRef.value || !duration.value) return;
|
||||
const newTime = value / 100 * duration.value;
|
||||
videoRef.value.currentTime = newTime;
|
||||
};
|
||||
const handleTimeUpdate = () => {
|
||||
if (!videoRef.value) return;
|
||||
currentTime.value = videoRef.value.currentTime;
|
||||
if (!isDragging.value) {
|
||||
progress.value = currentTime.value / duration.value * 100;
|
||||
}
|
||||
if (videoRef.value.buffered.length > 0) {
|
||||
bufferedProgress.value = videoRef.value.buffered.end(0) / duration.value * 100;
|
||||
}
|
||||
};
|
||||
const handleLoadedMetadata = () => {
|
||||
if (!videoRef.value) return;
|
||||
duration.value = videoRef.value.duration;
|
||||
};
|
||||
const resetControlsTimer = () => {
|
||||
if (controlsTimer) {
|
||||
clearTimeout(controlsTimer);
|
||||
}
|
||||
showControls.value = true;
|
||||
controlsTimer = setTimeout(() => {
|
||||
if (isPlaying.value) {
|
||||
showControls.value = false;
|
||||
}
|
||||
}, 3e3);
|
||||
};
|
||||
const handleMouseMove = () => {
|
||||
resetControlsTimer();
|
||||
resetCursorTimer();
|
||||
};
|
||||
onMounted(() => {
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
if (controlsTimer) {
|
||||
clearTimeout(controlsTimer);
|
||||
}
|
||||
if (cursorTimer) {
|
||||
clearTimeout(cursorTimer);
|
||||
}
|
||||
unlockScreenOrientation();
|
||||
});
|
||||
watch(
|
||||
() => props.currentMv,
|
||||
async (newMv) => {
|
||||
if (newMv) {
|
||||
await loadMvUrl(newMv);
|
||||
}
|
||||
}
|
||||
);
|
||||
const autoPlayBlocked = ref(false);
|
||||
const playLoading = ref(false);
|
||||
const loadMvUrl = async (mv) => {
|
||||
playLoading.value = true;
|
||||
autoPlayBlocked.value = false;
|
||||
try {
|
||||
const res = await getMvUrl(mv.id);
|
||||
mvUrl.value = res.data.data.url;
|
||||
await nextTick();
|
||||
if (videoRef.value) {
|
||||
try {
|
||||
await videoRef.value.play();
|
||||
} catch (error) {
|
||||
console.warn("自动播放失败，可能需要用户交互:", error);
|
||||
autoPlayBlocked.value = true;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载MV地址失败:", error);
|
||||
} finally {
|
||||
playLoading.value = false;
|
||||
}
|
||||
};
|
||||
const handleClose = () => {
|
||||
emit("update:show", false);
|
||||
if (store.state.playMusicUrl) {
|
||||
store.commit("setIsPlay", true);
|
||||
}
|
||||
};
|
||||
const handleEnded = () => {
|
||||
if (playMode.value === PLAY_MODE.Single) {
|
||||
if (props.currentMv) {
|
||||
loadMvUrl(props.currentMv);
|
||||
}
|
||||
} else {
|
||||
emit("next", (value) => {
|
||||
nextLoading.value = value;
|
||||
});
|
||||
}
|
||||
};
|
||||
const togglePlayMode = () => {
|
||||
playMode.value = playMode.value === PLAY_MODE.Auto ? PLAY_MODE.Single : PLAY_MODE.Auto;
|
||||
showModeHint.value = true;
|
||||
setTimeout(() => {
|
||||
showModeHint.value = false;
|
||||
}, 1500);
|
||||
};
|
||||
const isDragging = ref(false);
|
||||
const videoContainerRef = ref();
|
||||
const isFullscreen = ref(false);
|
||||
const checkFullscreenAPI = () => {
|
||||
const doc = document;
|
||||
return {
|
||||
requestFullscreen: videoContainerRef.value?.requestFullscreen || videoContainerRef.value?.webkitRequestFullscreen || videoContainerRef.value?.mozRequestFullScreen || videoContainerRef.value?.msRequestFullscreen,
|
||||
exitFullscreen: doc.exitFullscreen || doc.webkitExitFullscreen || doc.mozCancelFullScreen || doc.msExitFullscreen,
|
||||
fullscreenElement: doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement,
|
||||
fullscreenEnabled: doc.fullscreenEnabled || doc.webkitFullscreenEnabled || doc.mozFullScreenEnabled || doc.msFullscreenEnabled
|
||||
};
|
||||
};
|
||||
const lockScreenOrientation = async () => {
|
||||
try {
|
||||
if ("orientation" in screen) {
|
||||
await screen.orientation.lock("landscape");
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("无法锁定屏幕方向:", error);
|
||||
}
|
||||
};
|
||||
const unlockScreenOrientation = () => {
|
||||
try {
|
||||
if ("orientation" in screen) {
|
||||
screen.orientation.unlock();
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("无法解锁屏幕方向:", error);
|
||||
}
|
||||
};
|
||||
const toggleFullscreen = async () => {
|
||||
const api = checkFullscreenAPI();
|
||||
if (!api.fullscreenEnabled) {
|
||||
console.warn("全屏API不可用");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (!api.fullscreenElement) {
|
||||
await videoContainerRef.value?.requestFullscreen();
|
||||
isFullscreen.value = true;
|
||||
if (window.innerWidth <= 768) {
|
||||
await lockScreenOrientation();
|
||||
}
|
||||
} else {
|
||||
await document.exitFullscreen();
|
||||
isFullscreen.value = false;
|
||||
if (window.innerWidth <= 768) {
|
||||
unlockScreenOrientation();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("切换全屏失败:", error);
|
||||
}
|
||||
};
|
||||
const handleFullscreenChange = () => {
|
||||
const api = checkFullscreenAPI();
|
||||
isFullscreen.value = !!api.fullscreenElement;
|
||||
};
|
||||
onMounted(() => {
|
||||
document.addEventListener("fullscreenchange", handleFullscreenChange);
|
||||
document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
|
||||
document.addEventListener("mozfullscreenchange", handleFullscreenChange);
|
||||
document.addEventListener("MSFullscreenChange", handleFullscreenChange);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("fullscreenchange", handleFullscreenChange);
|
||||
document.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
|
||||
document.removeEventListener("mozfullscreenchange", handleFullscreenChange);
|
||||
document.removeEventListener("MSFullscreenChange", handleFullscreenChange);
|
||||
});
|
||||
const handleKeyPress = (e) => {
|
||||
if (e.key === "f" || e.key === "F") {
|
||||
toggleFullscreen();
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
document.addEventListener("keydown", handleKeyPress);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("keydown", handleKeyPress);
|
||||
});
|
||||
const showModeHint = ref(false);
|
||||
const prevLoading = ref(false);
|
||||
const nextLoading = ref(false);
|
||||
const handlePrev = () => {
|
||||
prevLoading.value = true;
|
||||
emit("prev", (value) => {
|
||||
prevLoading.value = value;
|
||||
});
|
||||
};
|
||||
const handleNext = () => {
|
||||
nextLoading.value = true;
|
||||
emit("next", (value) => {
|
||||
nextLoading.value = value;
|
||||
});
|
||||
};
|
||||
const showCursor = ref(true);
|
||||
let cursorTimer = null;
|
||||
const resetCursorTimer = () => {
|
||||
if (cursorTimer) {
|
||||
clearTimeout(cursorTimer);
|
||||
}
|
||||
showCursor.value = true;
|
||||
if (isPlaying.value && !showControls.value) {
|
||||
cursorTimer = setTimeout(() => {
|
||||
showCursor.value = false;
|
||||
}, 3e3);
|
||||
}
|
||||
};
|
||||
watch(isPlaying, (newValue) => {
|
||||
if (!newValue) {
|
||||
showCursor.value = true;
|
||||
if (cursorTimer) {
|
||||
clearTimeout(cursorTimer);
|
||||
}
|
||||
} else {
|
||||
resetCursorTimer();
|
||||
}
|
||||
});
|
||||
watch(showControls, (newValue) => {
|
||||
if (newValue) {
|
||||
showCursor.value = true;
|
||||
if (cursorTimer) {
|
||||
clearTimeout(cursorTimer);
|
||||
}
|
||||
} else {
|
||||
resetCursorTimer();
|
||||
}
|
||||
});
|
||||
const isMobile = computed(() => store.state.isMobile);
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_spin = __unplugin_components_0$1;
|
||||
const _component_n_ellipsis = __unplugin_components_2$1;
|
||||
const _component_n_drawer = __unplugin_components_2;
|
||||
return openBlock(), createBlock(_component_n_drawer, {
|
||||
show: _ctx.show,
|
||||
height: "100%",
|
||||
placement: "bottom",
|
||||
"z-index": 999999999,
|
||||
to: `#layout-main`
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", _hoisted_1, [
|
||||
createBaseVNode("div", {
|
||||
ref_key: "videoContainerRef",
|
||||
ref: videoContainerRef,
|
||||
class: normalizeClass(["video-container", { "cursor-hidden": !showCursor.value }])
|
||||
}, [
|
||||
createBaseVNode("video", {
|
||||
ref_key: "videoRef",
|
||||
ref: videoRef,
|
||||
src: mvUrl.value,
|
||||
class: "video-player",
|
||||
onEnded: handleEnded,
|
||||
onTimeupdate: handleTimeUpdate,
|
||||
onLoadedmetadata: handleLoadedMetadata,
|
||||
onPlay: _cache[0] || (_cache[0] = ($event) => isPlaying.value = true),
|
||||
onPause: _cache[1] || (_cache[1] = ($event) => isPlaying.value = false),
|
||||
onClick: togglePlay
|
||||
}, null, 40, _hoisted_2),
|
||||
autoPlayBlocked.value ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: "play-hint",
|
||||
onClick: togglePlay
|
||||
}, [
|
||||
createVNode(unref(Button), {
|
||||
quaternary: "",
|
||||
circle: "",
|
||||
size: "large"
|
||||
}, {
|
||||
icon: withCtx(() => [
|
||||
createVNode(unref(NIcon), { size: "48" }, {
|
||||
default: withCtx(() => _cache[4] || (_cache[4] = [
|
||||
createBaseVNode("i", { class: "ri-play-circle-line" }, null, -1)
|
||||
])),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
])) : createCommentVNode("", true),
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["custom-controls", { "controls-hidden": !showControls.value }])
|
||||
}, [
|
||||
createBaseVNode("div", _hoisted_3, [
|
||||
createVNode(unref(__unplugin_components_0), {
|
||||
value: progress.value,
|
||||
"onUpdate:value": [
|
||||
_cache[2] || (_cache[2] = ($event) => progress.value = $event),
|
||||
handleProgressChange
|
||||
],
|
||||
min: 0,
|
||||
max: 100,
|
||||
tooltip: false,
|
||||
step: 0.1
|
||||
}, {
|
||||
rail: withCtx(() => [
|
||||
createBaseVNode("div", _hoisted_4, [
|
||||
createBaseVNode("div", {
|
||||
class: "progress-buffer",
|
||||
style: normalizeStyle({ width: `${bufferedProgress.value}%` })
|
||||
}, null, 4)
|
||||
])
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["value"])
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_5, [
|
||||
createBaseVNode("div", _hoisted_6, [
|
||||
!props.noList ? (openBlock(), createBlock(unref(__unplugin_components_3), {
|
||||
key: 0,
|
||||
placement: "top"
|
||||
}, {
|
||||
trigger: withCtx(() => [
|
||||
createVNode(unref(Button), {
|
||||
quaternary: "",
|
||||
circle: "",
|
||||
onClick: handlePrev
|
||||
}, {
|
||||
icon: withCtx(() => [
|
||||
createVNode(unref(NIcon), { size: "24" }, {
|
||||
default: withCtx(() => [
|
||||
prevLoading.value ? (openBlock(), createBlock(_component_n_spin, {
|
||||
key: 0,
|
||||
size: "small"
|
||||
})) : (openBlock(), createElementBlock("i", _hoisted_7))
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
default: withCtx(() => [
|
||||
_cache[5] || (_cache[5] = createTextVNode(" 上一个 "))
|
||||
]),
|
||||
_: 1
|
||||
})) : createCommentVNode("", true),
|
||||
createVNode(unref(__unplugin_components_3), { placement: "top" }, {
|
||||
trigger: withCtx(() => [
|
||||
createVNode(unref(Button), {
|
||||
quaternary: "",
|
||||
circle: "",
|
||||
onClick: togglePlay
|
||||
}, {
|
||||
icon: withCtx(() => [
|
||||
createVNode(unref(NIcon), { size: "24" }, {
|
||||
default: withCtx(() => [
|
||||
playLoading.value ? (openBlock(), createBlock(_component_n_spin, {
|
||||
key: 0,
|
||||
size: "small"
|
||||
})) : (openBlock(), createElementBlock("i", {
|
||||
key: 1,
|
||||
class: normalizeClass(isPlaying.value ? "ri-pause-line" : "ri-play-line")
|
||||
}, null, 2))
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
default: withCtx(() => [
|
||||
createTextVNode(" " + toDisplayString(isPlaying.value ? "暂停" : "播放"), 1)
|
||||
]),
|
||||
_: 1
|
||||
}),
|
||||
!props.noList ? (openBlock(), createBlock(unref(__unplugin_components_3), {
|
||||
key: 1,
|
||||
placement: "top"
|
||||
}, {
|
||||
trigger: withCtx(() => [
|
||||
createVNode(unref(Button), {
|
||||
quaternary: "",
|
||||
circle: "",
|
||||
onClick: handleNext
|
||||
}, {
|
||||
icon: withCtx(() => [
|
||||
createVNode(unref(NIcon), { size: "24" }, {
|
||||
default: withCtx(() => [
|
||||
nextLoading.value ? (openBlock(), createBlock(_component_n_spin, {
|
||||
key: 0,
|
||||
size: "small"
|
||||
})) : (openBlock(), createElementBlock("i", _hoisted_8))
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
default: withCtx(() => [
|
||||
_cache[6] || (_cache[6] = createTextVNode(" 下一个 "))
|
||||
]),
|
||||
_: 1
|
||||
})) : createCommentVNode("", true),
|
||||
createBaseVNode("div", _hoisted_9, toDisplayString(formatTime(currentTime.value)) + " / " + toDisplayString(formatTime(duration.value)), 1)
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_10, [
|
||||
!isMobile.value ? (openBlock(), createElementBlock("div", _hoisted_11, [
|
||||
createVNode(unref(__unplugin_components_3), { placement: "top" }, {
|
||||
trigger: withCtx(() => [
|
||||
createVNode(unref(Button), {
|
||||
quaternary: "",
|
||||
circle: "",
|
||||
onClick: toggleMute
|
||||
}, {
|
||||
icon: withCtx(() => [
|
||||
createVNode(unref(NIcon), { size: "24" }, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("i", {
|
||||
class: normalizeClass(volume.value === 0 ? "ri-volume-mute-line" : "ri-volume-up-line")
|
||||
}, null, 2)
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
default: withCtx(() => [
|
||||
createTextVNode(" " + toDisplayString(volume.value === 0 ? "取消静音" : "静音"), 1)
|
||||
]),
|
||||
_: 1
|
||||
}),
|
||||
createVNode(unref(__unplugin_components_0), {
|
||||
value: volume.value,
|
||||
"onUpdate:value": _cache[3] || (_cache[3] = ($event) => volume.value = $event),
|
||||
min: 0,
|
||||
max: 100,
|
||||
tooltip: false,
|
||||
class: "volume-slider"
|
||||
}, null, 8, ["value"])
|
||||
])) : createCommentVNode("", true),
|
||||
!props.noList ? (openBlock(), createBlock(unref(__unplugin_components_3), {
|
||||
key: 1,
|
||||
placement: "top"
|
||||
}, {
|
||||
trigger: withCtx(() => [
|
||||
createVNode(unref(Button), {
|
||||
quaternary: "",
|
||||
circle: "",
|
||||
class: "play-mode-btn",
|
||||
onClick: togglePlayMode
|
||||
}, {
|
||||
icon: withCtx(() => [
|
||||
createVNode(unref(NIcon), { size: "24" }, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("i", {
|
||||
class: normalizeClass(
|
||||
playMode.value === "single" ? "ri-repeat-one-line" : "ri-play-list-line"
|
||||
)
|
||||
}, null, 2)
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
default: withCtx(() => [
|
||||
createTextVNode(" " + toDisplayString(playMode.value === "single" ? "单曲循环" : "列表循环"), 1)
|
||||
]),
|
||||
_: 1
|
||||
})) : createCommentVNode("", true),
|
||||
createVNode(unref(__unplugin_components_3), { placement: "top" }, {
|
||||
trigger: withCtx(() => [
|
||||
createVNode(unref(Button), {
|
||||
quaternary: "",
|
||||
circle: "",
|
||||
onClick: toggleFullscreen
|
||||
}, {
|
||||
icon: withCtx(() => [
|
||||
createVNode(unref(NIcon), { size: "24" }, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("i", {
|
||||
class: normalizeClass(isFullscreen.value ? "ri-fullscreen-exit-line" : "ri-fullscreen-line")
|
||||
}, null, 2)
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
default: withCtx(() => [
|
||||
createTextVNode(" " + toDisplayString(isFullscreen.value ? "退出全屏" : "全屏"), 1)
|
||||
]),
|
||||
_: 1
|
||||
}),
|
||||
createVNode(unref(__unplugin_components_3), { placement: "top" }, {
|
||||
trigger: withCtx(() => [
|
||||
createVNode(unref(Button), {
|
||||
quaternary: "",
|
||||
circle: "",
|
||||
onClick: handleClose
|
||||
}, {
|
||||
icon: withCtx(() => [
|
||||
createVNode(unref(NIcon), { size: "24" }, {
|
||||
default: withCtx(() => _cache[7] || (_cache[7] = [
|
||||
createBaseVNode("i", { class: "ri-close-line" }, null, -1)
|
||||
])),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
default: withCtx(() => [
|
||||
_cache[8] || (_cache[8] = createTextVNode(" 关闭 "))
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
])
|
||||
])
|
||||
], 2),
|
||||
createVNode(Transition, { name: "fade" }, {
|
||||
default: withCtx(() => [
|
||||
showModeHint.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
|
||||
createVNode(unref(NIcon), {
|
||||
size: "48",
|
||||
class: "mode-icon"
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("i", {
|
||||
class: normalizeClass(playMode.value === "single" ? "ri-repeat-one-line" : "ri-play-list-line")
|
||||
}, null, 2)
|
||||
]),
|
||||
_: 1
|
||||
}),
|
||||
createBaseVNode("div", _hoisted_13, toDisplayString(playMode.value === "single" ? "单曲循环" : "自动播放下一个"), 1)
|
||||
])) : createCommentVNode("", true)
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
], 2),
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["mv-detail-title", { "title-hidden": !showControls.value }])
|
||||
}, [
|
||||
createBaseVNode("div", _hoisted_14, [
|
||||
createVNode(_component_n_ellipsis, null, {
|
||||
default: withCtx(() => [
|
||||
createTextVNode(toDisplayString(_ctx.currentMv?.name), 1)
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
])
|
||||
], 2)
|
||||
])
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["show"]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const MvPlayer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f4c63e83"]]);
|
||||
export {
|
||||
MvPlayer as M,
|
||||
getAllMv as a,
|
||||
getTopMv as g
|
||||
};
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
@@ -1,502 +0,0 @@
|
||||
@keyframes round-03432cea {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.drawer-back[data-v-03432cea] {
|
||||
position: absolute;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
z-index: -1;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
}
|
||||
.drawer-back.paused[data-v-03432cea] {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
#drawer-target[data-v-03432cea] {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border-radius: 0.25rem;
|
||||
padding-left: 6rem;
|
||||
padding-right: 6rem;
|
||||
padding-bottom: 2rem;
|
||||
animation-duration: 300ms;
|
||||
}
|
||||
#drawer-target .music-img[data-v-03432cea] {
|
||||
margin-right: 4rem;
|
||||
display: flex;
|
||||
flex: 1 1 0%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
max-width: 360px;
|
||||
max-height: 360px;
|
||||
}
|
||||
#drawer-target .music-img .img[data-v-03432cea] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 0.75rem;
|
||||
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
#drawer-target .music-content[data-v-03432cea] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#drawer-target .music-content-name[data-v-03432cea] {
|
||||
padding-bottom: 0.25rem;
|
||||
padding-top: 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
#drawer-target .music-content-singer[data-v-03432cea] {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
#drawer-target .music-content-time[data-v-03432cea] {
|
||||
display: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#drawer-target .music-lrc[data-v-03432cea] {
|
||||
background-color: inherit;
|
||||
width: 500px;
|
||||
height: 550px;
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
|
||||
}
|
||||
#drawer-target .music-lrc-text[data-v-03432cea] {
|
||||
cursor: pointer;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s ease;
|
||||
background-color: transparent;
|
||||
}
|
||||
#drawer-target .music-lrc-text span[data-v-03432cea] {
|
||||
background-clip: text !important;
|
||||
-webkit-background-clip: text !important;
|
||||
padding-right: 30px;
|
||||
}
|
||||
#drawer-target .music-lrc-text-tr[data-v-03432cea] {
|
||||
font-weight: 400;
|
||||
opacity: 0.7;
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
#drawer-target .music-lrc .hover-text[data-v-03432cea]:hover {
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 700;
|
||||
opacity: 1;
|
||||
background-color: var(--hover-bg-color);
|
||||
}
|
||||
#drawer-target .music-lrc .hover-text:hover span[data-v-03432cea] {
|
||||
color: var(--text-color-active) !important;
|
||||
}
|
||||
.mobile #drawer-target[data-v-03432cea] {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: 1rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
.mobile #drawer-target .music-img[data-v-03432cea] {
|
||||
display: none;
|
||||
}
|
||||
.mobile #drawer-target .music-lrc[data-v-03432cea] {
|
||||
height: calc(100vh - 260px) !important;
|
||||
width: 100vw;
|
||||
}
|
||||
.mobile #drawer-target .music-lrc span[data-v-03432cea] {
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
.mobile #drawer-target .music-lrc-text[data-v-03432cea] {
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
.music-drawer[data-v-03432cea] {
|
||||
transition: none;
|
||||
}.text-ellipsis[data-v-5d6cadda] {
|
||||
width: 100%;
|
||||
}
|
||||
.music-play-bar[data-v-5d6cadda] {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
height: 5rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.75rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
--tw-shadow-color: #d1d5db;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.music-play-bar[data-v-5d6cadda]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.music-play-bar[data-v-5d6cadda] {
|
||||
z-index: 9999;
|
||||
animation-duration: 0.5s !important;
|
||||
}
|
||||
.music-play-bar .music-content[data-v-5d6cadda] {
|
||||
width: 160px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.music-play-bar .music-content-title[data-v-5d6cadda] {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.music-play-bar .music-content-name[data-v-5d6cadda] {
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.play-bar-opcity[data-v-5d6cadda] {
|
||||
background-color: transparent !important;
|
||||
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1137254902);
|
||||
}
|
||||
.play-bar-img[data-v-5d6cadda] {
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.music-buttons[data-v-5d6cadda] {
|
||||
margin-left: 1.5rem;
|
||||
margin-right: 1.5rem;
|
||||
flex: 1 1 0%;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.music-buttons .iconfont[data-v-5d6cadda] {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.music-buttons .iconfont[data-v-5d6cadda]:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.music-buttons .icon[data-v-5d6cadda] {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
.music-buttons .icon[data-v-5d6cadda]:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.music-buttons > div[data-v-5d6cadda] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.music-buttons-play[data-v-5d6cadda] {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
display: flex;
|
||||
height: 3rem;
|
||||
width: 5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 9999px;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.6;
|
||||
}
|
||||
.music-buttons-play[data-v-5d6cadda]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.audio-volume[data-v-5d6cadda] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.audio-volume:hover .volume-slider[data-v-5d6cadda] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.audio-volume .volume-icon[data-v-5d6cadda] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.audio-volume .iconfont[data-v-5d6cadda] {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.audio-volume .iconfont[data-v-5d6cadda]:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.audio-volume .volume-slider[data-v-5d6cadda] {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
height: 180px;
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.75rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
opacity: 0;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.audio-volume .volume-slider[data-v-5d6cadda]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.audio-volume .volume-slider[data-v-5d6cadda] {
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.audio-volume .volume-slider[data-v-5d6cadda]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.audio-button[data-v-5d6cadda] {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.audio-button .iconfont[data-v-5d6cadda] {
|
||||
margin: 1rem;
|
||||
cursor: pointer;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.audio-button .iconfont[data-v-5d6cadda]:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.music-play-list[data-v-5d6cadda] {
|
||||
height: 50vh;
|
||||
width: 300px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 1.5rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.music-play-list-back[data-v-5d6cadda] {
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.75;
|
||||
}
|
||||
.music-play-list-back[data-v-5d6cadda]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.music-play-list-content[data-v-5d6cadda] {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.mobile .music-play-bar[data-v-5d6cadda] {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
bottom: 70px;
|
||||
}
|
||||
.mobile .music-time[data-v-5d6cadda] {
|
||||
display: none;
|
||||
}
|
||||
.mobile .ri-netease-cloud-music-line[data-v-5d6cadda] {
|
||||
display: none;
|
||||
}
|
||||
.mobile .audio-volume[data-v-5d6cadda] {
|
||||
display: none;
|
||||
}
|
||||
.mobile .audio-button[data-v-5d6cadda] {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
.mobile .music-buttons[data-v-5d6cadda] {
|
||||
margin: 0px;
|
||||
}
|
||||
.mobile .music-buttons-prev[data-v-5d6cadda], .mobile .music-buttons-next[data-v-5d6cadda] {
|
||||
display: none;
|
||||
}
|
||||
.mobile .music-buttons-play[data-v-5d6cadda] {
|
||||
margin: 0px;
|
||||
}
|
||||
.mobile .music-content[data-v-5d6cadda] {
|
||||
flex: 1;
|
||||
}
|
||||
.custom-slider[data-v-5d6cadda] .n-slider {
|
||||
--n-rail-height: 4px;
|
||||
--n-rail-color: #e5e7eb;
|
||||
--n-rail-color-dark: #374151;
|
||||
--n-fill-color: #22c55e;
|
||||
--n-handle-size: 12px;
|
||||
--n-handle-color: #22c55e;
|
||||
}
|
||||
.custom-slider[data-v-5d6cadda] .n-slider.n-slider--vertical {
|
||||
height: 100%;
|
||||
}
|
||||
.custom-slider[data-v-5d6cadda] .n-slider.n-slider--vertical .n-slider-rail {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-slider[data-v-5d6cadda] .n-slider.n-slider--vertical:hover .n-slider-rail {
|
||||
width: 6px;
|
||||
}
|
||||
.custom-slider[data-v-5d6cadda] .n-slider.n-slider--vertical:hover .n-slider-handle {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.custom-slider[data-v-5d6cadda] .n-slider .n-slider-rail {
|
||||
overflow: hidden;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1)) !important;
|
||||
--tw-bg-opacity: 0.1 !important;
|
||||
}
|
||||
.custom-slider[data-v-5d6cadda] .n-slider .n-slider-rail:is(.dark *) {
|
||||
--tw-bg-opacity: 1 !important;
|
||||
background-color: rgb(61 61 61 / var(--tw-bg-opacity, 1)) !important;
|
||||
}
|
||||
.custom-slider[data-v-5d6cadda] .n-slider .n-slider-handle {
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
opacity: 0;
|
||||
}
|
||||
.custom-slider[data-v-5d6cadda] .n-slider:hover .n-slider-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
.play-bar-img-wrapper[data-v-5d6cadda] {
|
||||
position: relative;
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.play-bar-img-wrapper .hover-arrow[data-v-5d6cadda] {
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 1rem;
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.play-bar-img-wrapper .hover-arrow .hover-content[data-v-5d6cadda] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.play-bar-img-wrapper .hover-arrow .hover-content i[data-v-5d6cadda] {
|
||||
margin-bottom: 0.125rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.play-bar-img-wrapper .hover-arrow .hover-content .hover-text[data-v-5d6cadda] {
|
||||
--tw-scale-x: .9;
|
||||
--tw-scale-y: .9;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.play-bar-img-wrapper:hover .hover-arrow[data-v-5d6cadda] {
|
||||
opacity: 1;
|
||||
}
|
||||
.tooltip-content[data-v-5d6cadda] {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.play-bar-img[data-v-5d6cadda] {
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.like-active[data-v-5d6cadda] {
|
||||
--tw-text-opacity: 1 !important;
|
||||
color: rgb(239 68 68 / var(--tw-text-opacity, 1)) !important;
|
||||
}
|
||||
.like-active[data-v-5d6cadda]:hover {
|
||||
--tw-text-opacity: 1 !important;
|
||||
color: rgb(220 38 38 / var(--tw-text-opacity, 1)) !important;
|
||||
}
|
||||
.icon-loop[data-v-5d6cadda],
|
||||
.icon-single-loop[data-v-5d6cadda] {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.music-time .n-slider[data-v-5d6cadda] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
Binary file not shown.
@@ -1,219 +0,0 @@
|
||||
.user-box[data-v-064c45e9] {
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 9999px;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
}.user-box[data-v-064c45e9]:hover {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
|
||||
}.user-box[data-v-064c45e9]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
|
||||
}.user-box[data-v-064c45e9]:hover:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
|
||||
}.user-box[data-v-064c45e9] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}.user-box[data-v-064c45e9]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.search-box[data-v-064c45e9] {
|
||||
padding-bottom: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.search-box-input[data-v-064c45e9] {
|
||||
position: relative;
|
||||
}
|
||||
.search-box-input[data-v-064c45e9] .n-input {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.search-box-input[data-v-064c45e9] .n-input:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.search-box-input[data-v-064c45e9] .n-input .n-input__input-el {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.search-box-input[data-v-064c45e9] .n-input .n-input__input-el:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.search-box-input[data-v-064c45e9] .n-input .n-input__prefix {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.search-box-input[data-v-064c45e9] .n-input .n-input__prefix:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mobile .search-box[data-v-064c45e9] {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.github[data-v-064c45e9] {
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 9999px;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.github[data-v-064c45e9]:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.github[data-v-064c45e9]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.github[data-v-064c45e9]:hover:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.github[data-v-064c45e9] {
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.github[data-v-064c45e9]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.user-popover[data-v-064c45e9] {
|
||||
min-width: 280px;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0px;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.user-popover[data-v-064c45e9]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.user-popover[data-v-064c45e9] {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.user-popover .user-header[data-v-064c45e9] {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
border-bottom-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.user-popover .user-header[data-v-064c45e9]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.user-popover .user-header[data-v-064c45e9]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.user-popover .user-header[data-v-064c45e9]:hover:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.user-popover .user-header .username[data-v-064c45e9] {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.user-popover .user-header .username[data-v-064c45e9]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.user-popover .menu-items[data-v-064c45e9] {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
.user-popover .menu-items .menu-item[data-v-064c45e9] {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.user-popover .menu-items .menu-item[data-v-064c45e9]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.user-popover .menu-items .menu-item[data-v-064c45e9] {
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.user-popover .menu-items .menu-item[data-v-064c45e9]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.user-popover .menu-items .menu-item[data-v-064c45e9]:hover:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.user-popover .menu-items .menu-item i[data-v-064c45e9] {
|
||||
margin-right: 0.25rem;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.user-popover .menu-items .menu-item i[data-v-064c45e9]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.user-popover .menu-items .menu-item .version-info[data-v-064c45e9] {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.user-popover .menu-items .menu-item .version-info .version-number[data-v-064c45e9] {
|
||||
border-radius: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-top: 0.125rem;
|
||||
padding-bottom: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.user-popover .menu-items .menu-item .version-info .version-number[data-v-064c45e9]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
@@ -1,864 +0,0 @@
|
||||
import { m as c, p as cB, W as cM, Y as cE, aM as fadeInScaleUpTransition, aN as insideModal, aO as insidePopover, aP as onBeforeUpdate, q as useTheme, d as defineComponent, x as useConfig, aQ as sliderLight, r as ref, z as useFormItem, G as computed, A as toRef, C as useMergedState, E as watch, a as onBeforeUnmount, ap as useThemeClass, aR as isMounted, l as h, K as resolveSlot, ak as Transition, L as call, J as on, aS as off, M as nextTick } from "./index-DKaFsuse.js";
|
||||
import { d as useAdjustedTo, B as Binder, V as VTarget, e as VFollower } from "./use-locale-DLWAOXez.js";
|
||||
const style = c([cB("slider", `
|
||||
display: block;
|
||||
padding: calc((var(--n-handle-size) - var(--n-rail-height)) / 2) 0;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
`, [cM("reverse", [cB("slider-handles", [cB("slider-handle-wrapper", `
|
||||
transform: translate(50%, -50%);
|
||||
`)]), cB("slider-dots", [cB("slider-dot", `
|
||||
transform: translateX(50%, -50%);
|
||||
`)]), cM("vertical", [cB("slider-handles", [cB("slider-handle-wrapper", `
|
||||
transform: translate(-50%, -50%);
|
||||
`)]), cB("slider-marks", [cB("slider-mark", `
|
||||
transform: translateY(calc(-50% + var(--n-dot-height) / 2));
|
||||
`)]), cB("slider-dots", [cB("slider-dot", `
|
||||
transform: translateX(-50%) translateY(0);
|
||||
`)])])]), cM("vertical", `
|
||||
box-sizing: content-box;
|
||||
padding: 0 calc((var(--n-handle-size) - var(--n-rail-height)) / 2);
|
||||
width: var(--n-rail-width-vertical);
|
||||
height: 100%;
|
||||
`, [cB("slider-handles", `
|
||||
top: calc(var(--n-handle-size) / 2);
|
||||
right: 0;
|
||||
bottom: calc(var(--n-handle-size) / 2);
|
||||
left: 0;
|
||||
`, [cB("slider-handle-wrapper", `
|
||||
top: unset;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 50%);
|
||||
`)]), cB("slider-rail", `
|
||||
height: 100%;
|
||||
`, [cE("fill", `
|
||||
top: unset;
|
||||
right: 0;
|
||||
bottom: unset;
|
||||
left: 0;
|
||||
`)]), cM("with-mark", `
|
||||
width: var(--n-rail-width-vertical);
|
||||
margin: 0 32px 0 8px;
|
||||
`), cB("slider-marks", `
|
||||
top: calc(var(--n-handle-size) / 2);
|
||||
right: unset;
|
||||
bottom: calc(var(--n-handle-size) / 2);
|
||||
left: 22px;
|
||||
font-size: var(--n-mark-font-size);
|
||||
`, [cB("slider-mark", `
|
||||
transform: translateY(50%);
|
||||
white-space: nowrap;
|
||||
`)]), cB("slider-dots", `
|
||||
top: calc(var(--n-handle-size) / 2);
|
||||
right: unset;
|
||||
bottom: calc(var(--n-handle-size) / 2);
|
||||
left: 50%;
|
||||
`, [cB("slider-dot", `
|
||||
transform: translateX(-50%) translateY(50%);
|
||||
`)])]), cM("disabled", `
|
||||
cursor: not-allowed;
|
||||
opacity: var(--n-opacity-disabled);
|
||||
`, [cB("slider-handle", `
|
||||
cursor: not-allowed;
|
||||
`)]), cM("with-mark", `
|
||||
width: 100%;
|
||||
margin: 8px 0 32px 0;
|
||||
`), c("&:hover", [cB("slider-rail", {
|
||||
backgroundColor: "var(--n-rail-color-hover)"
|
||||
}, [cE("fill", {
|
||||
backgroundColor: "var(--n-fill-color-hover)"
|
||||
})]), cB("slider-handle", {
|
||||
boxShadow: "var(--n-handle-box-shadow-hover)"
|
||||
})]), cM("active", [cB("slider-rail", {
|
||||
backgroundColor: "var(--n-rail-color-hover)"
|
||||
}, [cE("fill", {
|
||||
backgroundColor: "var(--n-fill-color-hover)"
|
||||
})]), cB("slider-handle", {
|
||||
boxShadow: "var(--n-handle-box-shadow-hover)"
|
||||
})]), cB("slider-marks", `
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: calc(var(--n-handle-size) / 2);
|
||||
right: calc(var(--n-handle-size) / 2);
|
||||
`, [cB("slider-mark", `
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
`)]), cB("slider-rail", `
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: var(--n-rail-height);
|
||||
background-color: var(--n-rail-color);
|
||||
transition: background-color .3s var(--n-bezier);
|
||||
border-radius: calc(var(--n-rail-height) / 2);
|
||||
`, [cE("fill", `
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: calc(var(--n-rail-height) / 2);
|
||||
transition: background-color .3s var(--n-bezier);
|
||||
background-color: var(--n-fill-color);
|
||||
`)]), cB("slider-handles", `
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(var(--n-handle-size) / 2);
|
||||
bottom: 0;
|
||||
left: calc(var(--n-handle-size) / 2);
|
||||
`, [cB("slider-handle-wrapper", `
|
||||
outline: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
`, [cB("slider-handle", `
|
||||
height: var(--n-handle-size);
|
||||
width: var(--n-handle-size);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
transition: box-shadow .2s var(--n-bezier), background-color .3s var(--n-bezier);
|
||||
background-color: var(--n-handle-color);
|
||||
box-shadow: var(--n-handle-box-shadow);
|
||||
`, [c("&:hover", `
|
||||
box-shadow: var(--n-handle-box-shadow-hover);
|
||||
`)]), c("&:focus", [cB("slider-handle", `
|
||||
box-shadow: var(--n-handle-box-shadow-focus);
|
||||
`, [c("&:hover", `
|
||||
box-shadow: var(--n-handle-box-shadow-active);
|
||||
`)])])])]), cB("slider-dots", `
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(var(--n-handle-size) / 2);
|
||||
right: calc(var(--n-handle-size) / 2);
|
||||
`, [cM("transition-disabled", [cB("slider-dot", "transition: none;")]), cB("slider-dot", `
|
||||
transition:
|
||||
border-color .3s var(--n-bezier),
|
||||
box-shadow .3s var(--n-bezier),
|
||||
background-color .3s var(--n-bezier);
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
height: var(--n-dot-height);
|
||||
width: var(--n-dot-width);
|
||||
border-radius: var(--n-dot-border-radius);
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border: var(--n-dot-border);
|
||||
background-color: var(--n-dot-color);
|
||||
`, [cM("active", "border: var(--n-dot-border-active);")])])]), cB("slider-handle-indicator", `
|
||||
font-size: var(--n-font-size);
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--n-indicator-border-radius);
|
||||
color: var(--n-indicator-text-color);
|
||||
background-color: var(--n-indicator-color);
|
||||
box-shadow: var(--n-indicator-box-shadow);
|
||||
`, [fadeInScaleUpTransition()]), cB("slider-handle-indicator", `
|
||||
font-size: var(--n-font-size);
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--n-indicator-border-radius);
|
||||
color: var(--n-indicator-text-color);
|
||||
background-color: var(--n-indicator-color);
|
||||
box-shadow: var(--n-indicator-box-shadow);
|
||||
`, [cM("top", `
|
||||
margin-bottom: 12px;
|
||||
`), cM("right", `
|
||||
margin-left: 12px;
|
||||
`), cM("bottom", `
|
||||
margin-top: 12px;
|
||||
`), cM("left", `
|
||||
margin-right: 12px;
|
||||
`), fadeInScaleUpTransition()]), insideModal(cB("slider", [cB("slider-dot", "background-color: var(--n-dot-color-modal);")])), insidePopover(cB("slider", [cB("slider-dot", "background-color: var(--n-dot-color-popover);")]))]);
|
||||
function isTouchEvent(e) {
|
||||
return window.TouchEvent && e instanceof window.TouchEvent;
|
||||
}
|
||||
function useRefs() {
|
||||
const refs = /* @__PURE__ */ new Map();
|
||||
const setRefs = (index) => (el) => {
|
||||
refs.set(index, el);
|
||||
};
|
||||
onBeforeUpdate(() => {
|
||||
refs.clear();
|
||||
});
|
||||
return [refs, setRefs];
|
||||
}
|
||||
const eventButtonLeft = 0;
|
||||
const sliderProps = Object.assign(Object.assign({}, useTheme.props), {
|
||||
to: useAdjustedTo.propTo,
|
||||
defaultValue: {
|
||||
type: [Number, Array],
|
||||
default: 0
|
||||
},
|
||||
marks: Object,
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
formatTooltip: Function,
|
||||
keyboard: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
step: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
range: Boolean,
|
||||
value: [Number, Array],
|
||||
placement: String,
|
||||
showTooltip: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
tooltip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
vertical: Boolean,
|
||||
reverse: Boolean,
|
||||
"onUpdate:value": [Function, Array],
|
||||
onUpdateValue: [Function, Array],
|
||||
onDragstart: [Function],
|
||||
onDragend: [Function]
|
||||
});
|
||||
const __unplugin_components_0 = defineComponent({
|
||||
name: "Slider",
|
||||
props: sliderProps,
|
||||
setup(props) {
|
||||
const {
|
||||
mergedClsPrefixRef,
|
||||
namespaceRef,
|
||||
inlineThemeDisabled
|
||||
} = useConfig(props);
|
||||
const themeRef = useTheme("Slider", "-slider", style, sliderLight, props, mergedClsPrefixRef);
|
||||
const handleRailRef = ref(null);
|
||||
const [handleRefs, setHandleRefs] = useRefs();
|
||||
const [followerRefs, setFollowerRefs] = useRefs();
|
||||
const followerEnabledIndexSetRef = ref(/* @__PURE__ */ new Set());
|
||||
const formItem = useFormItem(props);
|
||||
const {
|
||||
mergedDisabledRef
|
||||
} = formItem;
|
||||
const precisionRef = computed(() => {
|
||||
const {
|
||||
step
|
||||
} = props;
|
||||
if (Number(step) <= 0 || step === "mark") return 0;
|
||||
const stepString = step.toString();
|
||||
let precision = 0;
|
||||
if (stepString.includes(".")) {
|
||||
precision = stepString.length - stepString.indexOf(".") - 1;
|
||||
}
|
||||
return precision;
|
||||
});
|
||||
const uncontrolledValueRef = ref(props.defaultValue);
|
||||
const controlledValueRef = toRef(props, "value");
|
||||
const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
|
||||
const arrifiedValueRef = computed(() => {
|
||||
const {
|
||||
value: mergedValue
|
||||
} = mergedValueRef;
|
||||
return (props.range ? mergedValue : [mergedValue]).map(clampValue);
|
||||
});
|
||||
const handleCountExceeds2Ref = computed(() => arrifiedValueRef.value.length > 2);
|
||||
const mergedPlacementRef = computed(() => {
|
||||
return props.placement === void 0 ? props.vertical ? "right" : "top" : props.placement;
|
||||
});
|
||||
const markValuesRef = computed(() => {
|
||||
const {
|
||||
marks
|
||||
} = props;
|
||||
return marks ? Object.keys(marks).map(Number.parseFloat) : null;
|
||||
});
|
||||
const activeIndexRef = ref(-1);
|
||||
const previousIndexRef = ref(-1);
|
||||
const hoverIndexRef = ref(-1);
|
||||
const draggingRef = ref(false);
|
||||
const dotTransitionDisabledRef = ref(false);
|
||||
const styleDirectionRef = computed(() => {
|
||||
const {
|
||||
vertical,
|
||||
reverse
|
||||
} = props;
|
||||
const left = reverse ? "right" : "left";
|
||||
const bottom = reverse ? "top" : "bottom";
|
||||
return vertical ? bottom : left;
|
||||
});
|
||||
const fillStyleRef = computed(() => {
|
||||
if (handleCountExceeds2Ref.value) return;
|
||||
const values = arrifiedValueRef.value;
|
||||
const start = valueToPercentage(props.range ? Math.min(...values) : props.min);
|
||||
const end = valueToPercentage(props.range ? Math.max(...values) : values[0]);
|
||||
const {
|
||||
value: styleDirection
|
||||
} = styleDirectionRef;
|
||||
return props.vertical ? {
|
||||
[styleDirection]: `${start}%`,
|
||||
height: `${end - start}%`
|
||||
} : {
|
||||
[styleDirection]: `${start}%`,
|
||||
width: `${end - start}%`
|
||||
};
|
||||
});
|
||||
const markInfosRef = computed(() => {
|
||||
const mergedMarks = [];
|
||||
const {
|
||||
marks
|
||||
} = props;
|
||||
if (marks) {
|
||||
const orderValues = arrifiedValueRef.value.slice();
|
||||
orderValues.sort((a, b) => a - b);
|
||||
const {
|
||||
value: styleDirection
|
||||
} = styleDirectionRef;
|
||||
const {
|
||||
value: handleCountExceeds2
|
||||
} = handleCountExceeds2Ref;
|
||||
const {
|
||||
range
|
||||
} = props;
|
||||
const isActive = handleCountExceeds2 ? () => false : (num) => range ? num >= orderValues[0] && num <= orderValues[orderValues.length - 1] : num <= orderValues[0];
|
||||
for (const key of Object.keys(marks)) {
|
||||
const num = Number(key);
|
||||
mergedMarks.push({
|
||||
active: isActive(num),
|
||||
key: num,
|
||||
label: marks[key],
|
||||
style: {
|
||||
[styleDirection]: `${valueToPercentage(num)}%`
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return mergedMarks;
|
||||
});
|
||||
function getHandleStyle(value, index) {
|
||||
const percentage = valueToPercentage(value);
|
||||
const {
|
||||
value: styleDirection
|
||||
} = styleDirectionRef;
|
||||
return {
|
||||
[styleDirection]: `${percentage}%`,
|
||||
zIndex: index === activeIndexRef.value ? 1 : 0
|
||||
};
|
||||
}
|
||||
function isShowTooltip(index) {
|
||||
return props.showTooltip || hoverIndexRef.value === index || activeIndexRef.value === index && draggingRef.value;
|
||||
}
|
||||
function shouldKeepTooltipTransition(index) {
|
||||
if (!draggingRef.value) return true;
|
||||
return !(activeIndexRef.value === index && previousIndexRef.value === index);
|
||||
}
|
||||
function focusActiveHandle(index) {
|
||||
var _a;
|
||||
if (~index) {
|
||||
activeIndexRef.value = index;
|
||||
(_a = handleRefs.get(index)) === null || _a === void 0 ? void 0 : _a.focus();
|
||||
}
|
||||
}
|
||||
function syncPosition() {
|
||||
followerRefs.forEach((inst, index) => {
|
||||
if (isShowTooltip(index)) inst.syncPosition();
|
||||
});
|
||||
}
|
||||
function doUpdateValue(value) {
|
||||
const {
|
||||
"onUpdate:value": _onUpdateValue,
|
||||
onUpdateValue
|
||||
} = props;
|
||||
const {
|
||||
nTriggerFormInput,
|
||||
nTriggerFormChange
|
||||
} = formItem;
|
||||
if (onUpdateValue) call(onUpdateValue, value);
|
||||
if (_onUpdateValue) call(_onUpdateValue, value);
|
||||
uncontrolledValueRef.value = value;
|
||||
nTriggerFormInput();
|
||||
nTriggerFormChange();
|
||||
}
|
||||
function dispatchValueUpdate(value) {
|
||||
const {
|
||||
range
|
||||
} = props;
|
||||
if (range) {
|
||||
if (Array.isArray(value)) {
|
||||
const {
|
||||
value: oldValues
|
||||
} = arrifiedValueRef;
|
||||
if (value.join() !== oldValues.join()) {
|
||||
doUpdateValue(value);
|
||||
}
|
||||
}
|
||||
} else if (!Array.isArray(value)) {
|
||||
const oldValue = arrifiedValueRef.value[0];
|
||||
if (oldValue !== value) {
|
||||
doUpdateValue(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
function doDispatchValue(value, index) {
|
||||
if (props.range) {
|
||||
const values = arrifiedValueRef.value.slice();
|
||||
values.splice(index, 1, value);
|
||||
dispatchValueUpdate(values);
|
||||
} else {
|
||||
dispatchValueUpdate(value);
|
||||
}
|
||||
}
|
||||
function sanitizeValue(value, currentValue, stepBuffer) {
|
||||
const stepping = stepBuffer !== void 0;
|
||||
if (!stepBuffer) {
|
||||
stepBuffer = value - currentValue > 0 ? 1 : -1;
|
||||
}
|
||||
const markValues = markValuesRef.value || [];
|
||||
const {
|
||||
step
|
||||
} = props;
|
||||
if (step === "mark") {
|
||||
const closestMark2 = getClosestMark(value, markValues.concat(currentValue), stepping ? stepBuffer : void 0);
|
||||
return closestMark2 ? closestMark2.value : currentValue;
|
||||
}
|
||||
if (step <= 0) return currentValue;
|
||||
const {
|
||||
value: precision
|
||||
} = precisionRef;
|
||||
let closestMark;
|
||||
if (stepping) {
|
||||
const currentStep = Number((currentValue / step).toFixed(precision));
|
||||
const actualStep = Math.floor(currentStep);
|
||||
const leftStep = currentStep > actualStep ? actualStep : actualStep - 1;
|
||||
const rightStep = currentStep < actualStep ? actualStep : actualStep + 1;
|
||||
closestMark = getClosestMark(currentValue, [Number((leftStep * step).toFixed(precision)), Number((rightStep * step).toFixed(precision)), ...markValues], stepBuffer);
|
||||
} else {
|
||||
const roundValue = getRoundValue(value);
|
||||
closestMark = getClosestMark(value, [...markValues, roundValue]);
|
||||
}
|
||||
return closestMark ? clampValue(closestMark.value) : currentValue;
|
||||
}
|
||||
function clampValue(value) {
|
||||
return Math.min(props.max, Math.max(props.min, value));
|
||||
}
|
||||
function valueToPercentage(value) {
|
||||
const {
|
||||
max,
|
||||
min
|
||||
} = props;
|
||||
return (value - min) / (max - min) * 100;
|
||||
}
|
||||
function percentageToValue(percentage) {
|
||||
const {
|
||||
max,
|
||||
min
|
||||
} = props;
|
||||
return min + (max - min) * percentage;
|
||||
}
|
||||
function getRoundValue(value) {
|
||||
const {
|
||||
step,
|
||||
min
|
||||
} = props;
|
||||
if (Number(step) <= 0 || step === "mark") return value;
|
||||
const newValue = Math.round((value - min) / step) * step + min;
|
||||
return Number(newValue.toFixed(precisionRef.value));
|
||||
}
|
||||
function getClosestMark(currentValue, markValues = markValuesRef.value, buffer) {
|
||||
if (!(markValues === null || markValues === void 0 ? void 0 : markValues.length)) return null;
|
||||
let closestMark = null;
|
||||
let index = -1;
|
||||
while (++index < markValues.length) {
|
||||
const diff = markValues[index] - currentValue;
|
||||
const distance = Math.abs(diff);
|
||||
if (
|
||||
// find marks in the same direction
|
||||
(buffer === void 0 || diff * buffer > 0) && (closestMark === null || distance < closestMark.distance)
|
||||
) {
|
||||
closestMark = {
|
||||
index,
|
||||
distance,
|
||||
value: markValues[index]
|
||||
};
|
||||
}
|
||||
}
|
||||
return closestMark;
|
||||
}
|
||||
function getPointValue(event) {
|
||||
const railEl = handleRailRef.value;
|
||||
if (!railEl) return;
|
||||
const touchEvent = isTouchEvent(event) ? event.touches[0] : event;
|
||||
const railRect = railEl.getBoundingClientRect();
|
||||
let percentage;
|
||||
if (props.vertical) {
|
||||
percentage = (railRect.bottom - touchEvent.clientY) / railRect.height;
|
||||
} else {
|
||||
percentage = (touchEvent.clientX - railRect.left) / railRect.width;
|
||||
}
|
||||
if (props.reverse) {
|
||||
percentage = 1 - percentage;
|
||||
}
|
||||
return percentageToValue(percentage);
|
||||
}
|
||||
function handleRailKeyDown(e) {
|
||||
if (mergedDisabledRef.value || !props.keyboard) return;
|
||||
const {
|
||||
vertical,
|
||||
reverse
|
||||
} = props;
|
||||
switch (e.key) {
|
||||
case "ArrowUp":
|
||||
e.preventDefault();
|
||||
handleStepValue(vertical && reverse ? -1 : 1);
|
||||
break;
|
||||
case "ArrowRight":
|
||||
e.preventDefault();
|
||||
handleStepValue(!vertical && reverse ? -1 : 1);
|
||||
break;
|
||||
case "ArrowDown":
|
||||
e.preventDefault();
|
||||
handleStepValue(vertical && reverse ? 1 : -1);
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
e.preventDefault();
|
||||
handleStepValue(!vertical && reverse ? 1 : -1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
function handleStepValue(ratio) {
|
||||
const activeIndex = activeIndexRef.value;
|
||||
if (activeIndex === -1) return;
|
||||
const {
|
||||
step
|
||||
} = props;
|
||||
const currentValue = arrifiedValueRef.value[activeIndex];
|
||||
const nextValue = Number(step) <= 0 || step === "mark" ? currentValue : currentValue + step * ratio;
|
||||
doDispatchValue(
|
||||
// Avoid the number of value does not change when `step` is null
|
||||
sanitizeValue(nextValue, currentValue, ratio > 0 ? 1 : -1),
|
||||
activeIndex
|
||||
);
|
||||
}
|
||||
function handleRailMouseDown(event) {
|
||||
var _a, _b;
|
||||
if (mergedDisabledRef.value) return;
|
||||
if (!isTouchEvent(event) && event.button !== eventButtonLeft) {
|
||||
return;
|
||||
}
|
||||
const pointValue = getPointValue(event);
|
||||
if (pointValue === void 0) return;
|
||||
const values = arrifiedValueRef.value.slice();
|
||||
const activeIndex = props.range ? (_b = (_a = getClosestMark(pointValue, values)) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : -1 : 0;
|
||||
if (activeIndex !== -1) {
|
||||
event.preventDefault();
|
||||
focusActiveHandle(activeIndex);
|
||||
startDragging();
|
||||
doDispatchValue(sanitizeValue(pointValue, arrifiedValueRef.value[activeIndex]), activeIndex);
|
||||
}
|
||||
}
|
||||
function startDragging() {
|
||||
if (!draggingRef.value) {
|
||||
draggingRef.value = true;
|
||||
if (props.onDragstart) call(props.onDragstart);
|
||||
on("touchend", document, handleMouseUp);
|
||||
on("mouseup", document, handleMouseUp);
|
||||
on("touchmove", document, handleMouseMove);
|
||||
on("mousemove", document, handleMouseMove);
|
||||
}
|
||||
}
|
||||
function stopDragging() {
|
||||
if (draggingRef.value) {
|
||||
draggingRef.value = false;
|
||||
if (props.onDragend) call(props.onDragend);
|
||||
off("touchend", document, handleMouseUp);
|
||||
off("mouseup", document, handleMouseUp);
|
||||
off("touchmove", document, handleMouseMove);
|
||||
off("mousemove", document, handleMouseMove);
|
||||
}
|
||||
}
|
||||
function handleMouseMove(event) {
|
||||
const {
|
||||
value: activeIndex
|
||||
} = activeIndexRef;
|
||||
if (!draggingRef.value || activeIndex === -1) {
|
||||
stopDragging();
|
||||
return;
|
||||
}
|
||||
const pointValue = getPointValue(event);
|
||||
if (pointValue === void 0) return;
|
||||
doDispatchValue(sanitizeValue(pointValue, arrifiedValueRef.value[activeIndex]), activeIndex);
|
||||
}
|
||||
function handleMouseUp() {
|
||||
stopDragging();
|
||||
}
|
||||
function handleHandleFocus(index) {
|
||||
activeIndexRef.value = index;
|
||||
if (!mergedDisabledRef.value) {
|
||||
hoverIndexRef.value = index;
|
||||
}
|
||||
}
|
||||
function handleHandleBlur(index) {
|
||||
if (activeIndexRef.value === index) {
|
||||
activeIndexRef.value = -1;
|
||||
stopDragging();
|
||||
}
|
||||
if (hoverIndexRef.value === index) {
|
||||
hoverIndexRef.value = -1;
|
||||
}
|
||||
}
|
||||
function handleHandleMouseEnter(index) {
|
||||
hoverIndexRef.value = index;
|
||||
}
|
||||
function handleHandleMouseLeave(index) {
|
||||
if (hoverIndexRef.value === index) {
|
||||
hoverIndexRef.value = -1;
|
||||
}
|
||||
}
|
||||
watch(activeIndexRef, (_, previous) => void nextTick(() => previousIndexRef.value = previous));
|
||||
watch(mergedValueRef, () => {
|
||||
if (props.marks) {
|
||||
if (dotTransitionDisabledRef.value) return;
|
||||
dotTransitionDisabledRef.value = true;
|
||||
void nextTick(() => {
|
||||
dotTransitionDisabledRef.value = false;
|
||||
});
|
||||
}
|
||||
void nextTick(syncPosition);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
stopDragging();
|
||||
});
|
||||
const cssVarsRef = computed(() => {
|
||||
const {
|
||||
self: {
|
||||
markFontSize,
|
||||
railColor,
|
||||
railColorHover,
|
||||
fillColor,
|
||||
fillColorHover,
|
||||
handleColor,
|
||||
opacityDisabled,
|
||||
dotColor,
|
||||
dotColorModal,
|
||||
handleBoxShadow,
|
||||
handleBoxShadowHover,
|
||||
handleBoxShadowActive,
|
||||
handleBoxShadowFocus,
|
||||
dotBorder,
|
||||
dotBoxShadow,
|
||||
railHeight,
|
||||
railWidthVertical,
|
||||
handleSize,
|
||||
dotHeight,
|
||||
dotWidth,
|
||||
dotBorderRadius,
|
||||
fontSize,
|
||||
dotBorderActive,
|
||||
dotColorPopover
|
||||
},
|
||||
common: {
|
||||
cubicBezierEaseInOut
|
||||
}
|
||||
} = themeRef.value;
|
||||
return {
|
||||
"--n-bezier": cubicBezierEaseInOut,
|
||||
"--n-dot-border": dotBorder,
|
||||
"--n-dot-border-active": dotBorderActive,
|
||||
"--n-dot-border-radius": dotBorderRadius,
|
||||
"--n-dot-box-shadow": dotBoxShadow,
|
||||
"--n-dot-color": dotColor,
|
||||
"--n-dot-color-modal": dotColorModal,
|
||||
"--n-dot-color-popover": dotColorPopover,
|
||||
"--n-dot-height": dotHeight,
|
||||
"--n-dot-width": dotWidth,
|
||||
"--n-fill-color": fillColor,
|
||||
"--n-fill-color-hover": fillColorHover,
|
||||
"--n-font-size": fontSize,
|
||||
"--n-handle-box-shadow": handleBoxShadow,
|
||||
"--n-handle-box-shadow-active": handleBoxShadowActive,
|
||||
"--n-handle-box-shadow-focus": handleBoxShadowFocus,
|
||||
"--n-handle-box-shadow-hover": handleBoxShadowHover,
|
||||
"--n-handle-color": handleColor,
|
||||
"--n-handle-size": handleSize,
|
||||
"--n-opacity-disabled": opacityDisabled,
|
||||
"--n-rail-color": railColor,
|
||||
"--n-rail-color-hover": railColorHover,
|
||||
"--n-rail-height": railHeight,
|
||||
"--n-rail-width-vertical": railWidthVertical,
|
||||
"--n-mark-font-size": markFontSize
|
||||
};
|
||||
});
|
||||
const themeClassHandle = inlineThemeDisabled ? useThemeClass("slider", void 0, cssVarsRef, props) : void 0;
|
||||
const indicatorCssVarsRef = computed(() => {
|
||||
const {
|
||||
self: {
|
||||
fontSize,
|
||||
indicatorColor,
|
||||
indicatorBoxShadow,
|
||||
indicatorTextColor,
|
||||
indicatorBorderRadius
|
||||
}
|
||||
} = themeRef.value;
|
||||
return {
|
||||
"--n-font-size": fontSize,
|
||||
"--n-indicator-border-radius": indicatorBorderRadius,
|
||||
"--n-indicator-box-shadow": indicatorBoxShadow,
|
||||
"--n-indicator-color": indicatorColor,
|
||||
"--n-indicator-text-color": indicatorTextColor
|
||||
};
|
||||
});
|
||||
const indicatorThemeClassHandle = inlineThemeDisabled ? useThemeClass("slider-indicator", void 0, indicatorCssVarsRef, props) : void 0;
|
||||
return {
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
namespace: namespaceRef,
|
||||
uncontrolledValue: uncontrolledValueRef,
|
||||
mergedValue: mergedValueRef,
|
||||
mergedDisabled: mergedDisabledRef,
|
||||
mergedPlacement: mergedPlacementRef,
|
||||
isMounted: isMounted(),
|
||||
adjustedTo: useAdjustedTo(props),
|
||||
dotTransitionDisabled: dotTransitionDisabledRef,
|
||||
markInfos: markInfosRef,
|
||||
isShowTooltip,
|
||||
shouldKeepTooltipTransition,
|
||||
handleRailRef,
|
||||
setHandleRefs,
|
||||
setFollowerRefs,
|
||||
fillStyle: fillStyleRef,
|
||||
getHandleStyle,
|
||||
activeIndex: activeIndexRef,
|
||||
arrifiedValues: arrifiedValueRef,
|
||||
followerEnabledIndexSet: followerEnabledIndexSetRef,
|
||||
handleRailMouseDown,
|
||||
handleHandleFocus,
|
||||
handleHandleBlur,
|
||||
handleHandleMouseEnter,
|
||||
handleHandleMouseLeave,
|
||||
handleRailKeyDown,
|
||||
indicatorCssVars: inlineThemeDisabled ? void 0 : indicatorCssVarsRef,
|
||||
indicatorThemeClass: indicatorThemeClassHandle === null || indicatorThemeClassHandle === void 0 ? void 0 : indicatorThemeClassHandle.themeClass,
|
||||
indicatorOnRender: indicatorThemeClassHandle === null || indicatorThemeClassHandle === void 0 ? void 0 : indicatorThemeClassHandle.onRender,
|
||||
cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
|
||||
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
||||
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
|
||||
};
|
||||
},
|
||||
render() {
|
||||
var _a;
|
||||
const {
|
||||
mergedClsPrefix,
|
||||
themeClass,
|
||||
formatTooltip
|
||||
} = this;
|
||||
(_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
|
||||
return h("div", {
|
||||
class: [`${mergedClsPrefix}-slider`, themeClass, {
|
||||
[`${mergedClsPrefix}-slider--disabled`]: this.mergedDisabled,
|
||||
[`${mergedClsPrefix}-slider--active`]: this.activeIndex !== -1,
|
||||
[`${mergedClsPrefix}-slider--with-mark`]: this.marks,
|
||||
[`${mergedClsPrefix}-slider--vertical`]: this.vertical,
|
||||
[`${mergedClsPrefix}-slider--reverse`]: this.reverse
|
||||
}],
|
||||
style: this.cssVars,
|
||||
onKeydown: this.handleRailKeyDown,
|
||||
onMousedown: this.handleRailMouseDown,
|
||||
onTouchstart: this.handleRailMouseDown
|
||||
}, h("div", {
|
||||
class: `${mergedClsPrefix}-slider-rail`
|
||||
}, h("div", {
|
||||
class: `${mergedClsPrefix}-slider-rail__fill`,
|
||||
style: this.fillStyle
|
||||
}), this.marks ? h("div", {
|
||||
class: [`${mergedClsPrefix}-slider-dots`, this.dotTransitionDisabled && `${mergedClsPrefix}-slider-dots--transition-disabled`]
|
||||
}, this.markInfos.map((mark) => h("div", {
|
||||
key: mark.key,
|
||||
class: [`${mergedClsPrefix}-slider-dot`, {
|
||||
[`${mergedClsPrefix}-slider-dot--active`]: mark.active
|
||||
}],
|
||||
style: mark.style
|
||||
}))) : null, h("div", {
|
||||
ref: "handleRailRef",
|
||||
class: `${mergedClsPrefix}-slider-handles`
|
||||
}, this.arrifiedValues.map((value, index) => {
|
||||
const showTooltip = this.isShowTooltip(index);
|
||||
return h(Binder, null, {
|
||||
default: () => [h(VTarget, null, {
|
||||
default: () => h("div", {
|
||||
ref: this.setHandleRefs(index),
|
||||
class: `${mergedClsPrefix}-slider-handle-wrapper`,
|
||||
tabindex: this.mergedDisabled ? -1 : 0,
|
||||
role: "slider",
|
||||
"aria-valuenow": value,
|
||||
"aria-valuemin": this.min,
|
||||
"aria-valuemax": this.max,
|
||||
"aria-orientation": this.vertical ? "vertical" : "horizontal",
|
||||
"aria-disabled": this.disabled,
|
||||
style: this.getHandleStyle(value, index),
|
||||
onFocus: () => {
|
||||
this.handleHandleFocus(index);
|
||||
},
|
||||
onBlur: () => {
|
||||
this.handleHandleBlur(index);
|
||||
},
|
||||
onMouseenter: () => {
|
||||
this.handleHandleMouseEnter(index);
|
||||
},
|
||||
onMouseleave: () => {
|
||||
this.handleHandleMouseLeave(index);
|
||||
}
|
||||
}, resolveSlot(this.$slots.thumb, () => [h("div", {
|
||||
class: `${mergedClsPrefix}-slider-handle`
|
||||
})]))
|
||||
}), this.tooltip && h(VFollower, {
|
||||
ref: this.setFollowerRefs(index),
|
||||
show: showTooltip,
|
||||
to: this.adjustedTo,
|
||||
enabled: this.showTooltip && !this.range || this.followerEnabledIndexSet.has(index),
|
||||
teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey,
|
||||
placement: this.mergedPlacement,
|
||||
containerClass: this.namespace
|
||||
}, {
|
||||
default: () => h(Transition, {
|
||||
name: "fade-in-scale-up-transition",
|
||||
appear: this.isMounted,
|
||||
css: this.shouldKeepTooltipTransition(index),
|
||||
onEnter: () => {
|
||||
this.followerEnabledIndexSet.add(index);
|
||||
},
|
||||
onAfterLeave: () => {
|
||||
this.followerEnabledIndexSet.delete(index);
|
||||
}
|
||||
}, {
|
||||
default: () => {
|
||||
var _a2;
|
||||
if (showTooltip) {
|
||||
(_a2 = this.indicatorOnRender) === null || _a2 === void 0 ? void 0 : _a2.call(this);
|
||||
return h("div", {
|
||||
class: [`${mergedClsPrefix}-slider-handle-indicator`, this.indicatorThemeClass, `${mergedClsPrefix}-slider-handle-indicator--${this.mergedPlacement}`],
|
||||
style: this.indicatorCssVars
|
||||
}, typeof formatTooltip === "function" ? formatTooltip(value) : value);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
})
|
||||
})]
|
||||
});
|
||||
})), this.marks ? h("div", {
|
||||
class: `${mergedClsPrefix}-slider-marks`
|
||||
}, this.markInfos.map((mark) => h("div", {
|
||||
key: mark.key,
|
||||
class: `${mergedClsPrefix}-slider-mark`,
|
||||
style: mark.style
|
||||
}, typeof mark.label === "function" ? mark.label() : mark.label))) : null));
|
||||
}
|
||||
});
|
||||
export {
|
||||
__unplugin_components_0 as _
|
||||
};
|
||||
Binary file not shown.
@@ -1,296 +0,0 @@
|
||||
.text-ellipsis[data-v-aae6c67f] {
|
||||
width: 100%;
|
||||
}
|
||||
.song-item[data-v-aae6c67f] {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 1.5rem;
|
||||
background-color: transparent;
|
||||
padding: 0.75rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.song-item[data-v-aae6c67f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-item[data-v-aae6c67f]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.song-item[data-v-aae6c67f]:hover:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.song-item-img[data-v-aae6c67f] {
|
||||
margin-right: 1rem;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.song-item-content[data-v-aae6c67f] {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
.song-item-content-title[data-v-aae6c67f] {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-item-content-title[data-v-aae6c67f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-item-content-name[data-v-aae6c67f] {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-item-content-name[data-v-aae6c67f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-item-operating[data-v-aae6c67f] {
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 9999px;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.song-item-operating[data-v-aae6c67f]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.song-item-operating .iconfont[data-v-aae6c67f] {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
.song-item-operating .icon-likefill[data-v-aae6c67f] {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.song-item-operating .icon-likefill[data-v-aae6c67f]:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-item-operating .icon-likefill[data-v-aae6c67f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-item-operating-like[data-v-aae6c67f] {
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.song-item-operating .like-active[data-v-aae6c67f] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-item-operating-play[data-v-aae6c67f] {
|
||||
display: flex;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 9999px;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.song-item-operating-play[data-v-aae6c67f]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-item-operating-play[data-v-aae6c67f]:hover, .song-item-operating-play.bg-green-600[data-v-aae6c67f] {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-mini[data-v-aae6c67f] {
|
||||
border-radius: 1rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.song-mini .song-item[data-v-aae6c67f] {
|
||||
padding: 0px;
|
||||
}
|
||||
.song-mini .song-item-img[data-v-aae6c67f] {
|
||||
margin-right: 0.5rem;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
}
|
||||
.song-mini .song-item-content[data-v-aae6c67f] {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
.song-mini .song-item-content-title[data-v-aae6c67f] {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.song-mini .song-item-content-name[data-v-aae6c67f] {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
.song-mini .song-item-operating[data-v-aae6c67f] {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.song-mini .song-item-operating .iconfont[data-v-aae6c67f] {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.song-mini .song-item-operating-like[data-v-aae6c67f] {
|
||||
margin-right: 0.25rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
.song-mini .song-item-operating-play[data-v-aae6c67f] {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
.song-list[data-v-aae6c67f] {
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.song-list[data-v-aae6c67f]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.song-list[data-v-aae6c67f]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.song-list[data-v-aae6c67f]:hover:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.song-list .song-item-img[data-v-aae6c67f] {
|
||||
margin-right: 0.75rem;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.song-list .song-item-content[data-v-aae6c67f] {
|
||||
display: flex;
|
||||
flex: 1 1 0%;
|
||||
align-items: center;
|
||||
}
|
||||
.song-list .song-item-content-wrapper[data-v-aae6c67f] {
|
||||
display: flex;
|
||||
flex: 1 1 0%;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.song-list .song-item-content-title[data-v-aae6c67f] {
|
||||
max-width: 45%;
|
||||
flex-shrink: 0;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-list .song-item-content-title[data-v-aae6c67f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-list .song-item-content-divider[data-v-aae6c67f] {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-list .song-item-content-divider[data-v-aae6c67f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-list .song-item-content-name[data-v-aae6c67f] {
|
||||
min-width: 0px;
|
||||
flex: 1 1 0%;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-list .song-item-content-name[data-v-aae6c67f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-list .song-item-operating[data-v-aae6c67f] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.song-list .song-item-operating-like[data-v-aae6c67f] {
|
||||
cursor: pointer;
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.song-list .song-item-operating-like[data-v-aae6c67f]:hover {
|
||||
--tw-scale-x: 1.1;
|
||||
--tw-scale-y: 1.1;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.song-list .song-item-operating-like .iconfont[data-v-aae6c67f] {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-list .song-item-operating-like .iconfont[data-v-aae6c67f]:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-list .song-item-operating-like .iconfont[data-v-aae6c67f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.song-list .song-item-operating-play[data-v-aae6c67f] {
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
cursor: pointer;
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.song-list .song-item-operating-play[data-v-aae6c67f]:hover {
|
||||
--tw-scale-x: 1.1;
|
||||
--tw-scale-y: 1.1;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.song-list .song-item-operating-play .iconfont[data-v-aae6c67f] {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
Binary file not shown.
@@ -1,170 +0,0 @@
|
||||
import { d as defineComponent, g as useStore, G as computed, aG as useTemplateRef, j as openBlock, c as createElementBlock, O as createBlock, u as unref, a7 as getImgUrl, T as createCommentVNode, b as createBaseVNode, e as createVNode, f as withCtx, k as createTextVNode, t as toDisplayString, a3 as Fragment, a4 as renderList, n as normalizeClass, ah as withModifiers, b5 as getImageBackground, ae as audioService, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
import { N as NImage } from "./Image-DXClIklC.js";
|
||||
import { _ as __unplugin_components_2 } from "./Ellipsis-D4R5dIX2.js";
|
||||
const _hoisted_1 = { class: "song-item-content" };
|
||||
const _hoisted_2 = {
|
||||
key: 0,
|
||||
class: "song-item-content-wrapper"
|
||||
};
|
||||
const _hoisted_3 = { class: "song-item-content-title" };
|
||||
const _hoisted_4 = { class: "song-item-content-name" };
|
||||
const _hoisted_5 = {
|
||||
key: 0,
|
||||
class: "song-item-operating-like"
|
||||
};
|
||||
const _hoisted_6 = {
|
||||
key: 0,
|
||||
class: "iconfont icon-stop"
|
||||
};
|
||||
const _hoisted_7 = {
|
||||
key: 1,
|
||||
class: "iconfont icon-playfill"
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
__name: "SongItem",
|
||||
props: {
|
||||
item: {},
|
||||
mini: { type: Boolean, default: false },
|
||||
list: { type: Boolean, default: false },
|
||||
favorite: { type: Boolean, default: true }
|
||||
},
|
||||
emits: ["play"],
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const store = useStore();
|
||||
const play = computed(() => store.state.play);
|
||||
const playMusic = computed(() => store.state.playMusic);
|
||||
const playLoading = computed(
|
||||
() => playMusic.value.id === props.item.id && playMusic.value.playLoading
|
||||
);
|
||||
const isPlaying = computed(() => {
|
||||
return playMusic.value.id === props.item.id;
|
||||
});
|
||||
const emits = __emit;
|
||||
const songImageRef = useTemplateRef("songImg");
|
||||
const imageLoad = async () => {
|
||||
if (!songImageRef.value) {
|
||||
return;
|
||||
}
|
||||
const { backgroundColor } = await getImageBackground(
|
||||
songImageRef.value.imageRef
|
||||
);
|
||||
props.item.backgroundColor = backgroundColor;
|
||||
};
|
||||
const playMusicEvent = async (item) => {
|
||||
if (playMusic.value.id === item.id) {
|
||||
if (play.value) {
|
||||
store.commit("setPlayMusic", false);
|
||||
audioService.getCurrentSound()?.pause();
|
||||
} else {
|
||||
store.commit("setPlayMusic", true);
|
||||
audioService.getCurrentSound()?.play();
|
||||
}
|
||||
return;
|
||||
}
|
||||
await store.commit("setPlay", item);
|
||||
store.commit("setIsPlay", true);
|
||||
emits("play", item);
|
||||
};
|
||||
const isFavorite = computed(() => {
|
||||
return store.state.favoriteList.includes(props.item.id);
|
||||
});
|
||||
const toggleFavorite = async (e) => {
|
||||
e.stopPropagation();
|
||||
if (isFavorite.value) {
|
||||
store.commit("removeFromFavorite", props.item.id);
|
||||
} else {
|
||||
store.commit("addToFavorite", props.item.id);
|
||||
}
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_image = NImage;
|
||||
const _component_n_ellipsis = __unplugin_components_2;
|
||||
return openBlock(), createElementBlock("div", {
|
||||
class: normalizeClass(["song-item", { "song-mini": _ctx.mini, "song-list": _ctx.list }])
|
||||
}, [
|
||||
_ctx.item.picUrl ? (openBlock(), createBlock(_component_n_image, {
|
||||
key: 0,
|
||||
ref: "songImg",
|
||||
src: unref(getImgUrl)(_ctx.item.picUrl, "100y100"),
|
||||
class: "song-item-img",
|
||||
"preview-disabled": "",
|
||||
"img-props": {
|
||||
crossorigin: "anonymous"
|
||||
},
|
||||
onLoad: imageLoad
|
||||
}, null, 8, ["src"])) : createCommentVNode("", true),
|
||||
createBaseVNode("div", _hoisted_1, [
|
||||
_ctx.list ? (openBlock(), createElementBlock("div", _hoisted_2, [
|
||||
createVNode(_component_n_ellipsis, {
|
||||
class: "song-item-content-title text-ellipsis",
|
||||
"line-clamp": "1"
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createTextVNode(toDisplayString(_ctx.item.name), 1)
|
||||
]),
|
||||
_: 1
|
||||
}),
|
||||
_cache[1] || (_cache[1] = createBaseVNode("div", { class: "song-item-content-divider" }, "-", -1)),
|
||||
createVNode(_component_n_ellipsis, {
|
||||
class: "song-item-content-name text-ellipsis",
|
||||
"line-clamp": "1"
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.item.ar || _ctx.item.song.artists, (artists, artistsindex) => {
|
||||
return openBlock(), createElementBlock("span", { key: artistsindex }, toDisplayString(artists.name) + toDisplayString(artistsindex < (_ctx.item.ar || _ctx.item.song.artists).length - 1 ? " / " : ""), 1);
|
||||
}), 128))
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
||||
createBaseVNode("div", _hoisted_3, [
|
||||
createVNode(_component_n_ellipsis, {
|
||||
class: "text-ellipsis",
|
||||
"line-clamp": "1"
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createTextVNode(toDisplayString(_ctx.item.name), 1)
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_4, [
|
||||
createVNode(_component_n_ellipsis, {
|
||||
class: "text-ellipsis",
|
||||
"line-clamp": "1"
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.item.ar || _ctx.item.song.artists, (artists, artistsindex) => {
|
||||
return openBlock(), createElementBlock("span", { key: artistsindex }, toDisplayString(artists.name) + toDisplayString(artistsindex < (_ctx.item.ar || _ctx.item.song.artists).length - 1 ? " / " : ""), 1);
|
||||
}), 128))
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
])
|
||||
], 64))
|
||||
]),
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["song-item-operating", { "song-item-operating-list": _ctx.list }])
|
||||
}, [
|
||||
_ctx.favorite ? (openBlock(), createElementBlock("div", _hoisted_5, [
|
||||
createBaseVNode("i", {
|
||||
class: normalizeClass(["iconfont icon-likefill", { "like-active": isFavorite.value }]),
|
||||
onClick: withModifiers(toggleFavorite, ["stop"])
|
||||
}, null, 2)
|
||||
])) : createCommentVNode("", true),
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["song-item-operating-play bg-gray-300 dark:bg-gray-800 animate__animated", { "bg-green-600": isPlaying.value, animate__flipInY: playLoading.value }]),
|
||||
onClick: _cache[0] || (_cache[0] = ($event) => playMusicEvent(_ctx.item))
|
||||
}, [
|
||||
isPlaying.value && play.value ? (openBlock(), createElementBlock("i", _hoisted_6)) : (openBlock(), createElementBlock("i", _hoisted_7))
|
||||
], 2)
|
||||
], 2)
|
||||
], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
const SongItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-aae6c67f"]]);
|
||||
export {
|
||||
SongItem as S
|
||||
};
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
@@ -1,344 +0,0 @@
|
||||
import { p as cB, W as cM, Y as cE, V as cNotM, m as c, q as useTheme, d as defineComponent, r as ref, x as useConfig, by as tagLight, $ as provide, A as toRef, F as useRtl, G as computed, ao as createKey, bs as getMargin, ap as useThemeClass, bx as color2Class, I as resolveWrappedSlot, l as h, bz as NBaseClose, aL as createInjectionKey, L as call } from "./index-DKaFsuse.js";
|
||||
const commonProps = {
|
||||
color: Object,
|
||||
type: {
|
||||
type: String,
|
||||
default: "default"
|
||||
},
|
||||
round: Boolean,
|
||||
size: {
|
||||
type: String,
|
||||
default: "medium"
|
||||
},
|
||||
closable: Boolean,
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
}
|
||||
};
|
||||
const style = cB("tag", `
|
||||
--n-close-margin: var(--n-close-margin-top) var(--n-close-margin-right) var(--n-close-margin-bottom) var(--n-close-margin-left);
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
padding: var(--n-padding);
|
||||
border-radius: var(--n-border-radius);
|
||||
color: var(--n-text-color);
|
||||
background-color: var(--n-color);
|
||||
transition:
|
||||
border-color .3s var(--n-bezier),
|
||||
background-color .3s var(--n-bezier),
|
||||
color .3s var(--n-bezier),
|
||||
box-shadow .3s var(--n-bezier),
|
||||
opacity .3s var(--n-bezier);
|
||||
line-height: 1;
|
||||
height: var(--n-height);
|
||||
font-size: var(--n-font-size);
|
||||
`, [cM("strong", `
|
||||
font-weight: var(--n-font-weight-strong);
|
||||
`), cE("border", `
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
border: var(--n-border);
|
||||
transition: border-color .3s var(--n-bezier);
|
||||
`), cE("icon", `
|
||||
display: flex;
|
||||
margin: 0 4px 0 0;
|
||||
color: var(--n-text-color);
|
||||
transition: color .3s var(--n-bezier);
|
||||
font-size: var(--n-avatar-size-override);
|
||||
`), cE("avatar", `
|
||||
display: flex;
|
||||
margin: 0 6px 0 0;
|
||||
`), cE("close", `
|
||||
margin: var(--n-close-margin);
|
||||
transition:
|
||||
background-color .3s var(--n-bezier),
|
||||
color .3s var(--n-bezier);
|
||||
`), cM("round", `
|
||||
padding: 0 calc(var(--n-height) / 3);
|
||||
border-radius: calc(var(--n-height) / 2);
|
||||
`, [cE("icon", `
|
||||
margin: 0 4px 0 calc((var(--n-height) - 8px) / -2);
|
||||
`), cE("avatar", `
|
||||
margin: 0 6px 0 calc((var(--n-height) - 8px) / -2);
|
||||
`), cM("closable", `
|
||||
padding: 0 calc(var(--n-height) / 4) 0 calc(var(--n-height) / 3);
|
||||
`)]), cM("icon, avatar", [cM("round", `
|
||||
padding: 0 calc(var(--n-height) / 3) 0 calc(var(--n-height) / 2);
|
||||
`)]), cM("disabled", `
|
||||
cursor: not-allowed !important;
|
||||
opacity: var(--n-opacity-disabled);
|
||||
`), cM("checkable", `
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
color: var(--n-text-color-checkable);
|
||||
background-color: var(--n-color-checkable);
|
||||
`, [cNotM("disabled", [c("&:hover", "background-color: var(--n-color-hover-checkable);", [cNotM("checked", "color: var(--n-text-color-hover-checkable);")]), c("&:active", "background-color: var(--n-color-pressed-checkable);", [cNotM("checked", "color: var(--n-text-color-pressed-checkable);")])]), cM("checked", `
|
||||
color: var(--n-text-color-checked);
|
||||
background-color: var(--n-color-checked);
|
||||
`, [cNotM("disabled", [c("&:hover", "background-color: var(--n-color-checked-hover);"), c("&:active", "background-color: var(--n-color-checked-pressed);")])])])]);
|
||||
const tagProps = Object.assign(Object.assign(Object.assign({}, useTheme.props), commonProps), {
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
checked: Boolean,
|
||||
checkable: Boolean,
|
||||
strong: Boolean,
|
||||
triggerClickOnClose: Boolean,
|
||||
onClose: [Array, Function],
|
||||
onMouseenter: Function,
|
||||
onMouseleave: Function,
|
||||
"onUpdate:checked": Function,
|
||||
onUpdateChecked: Function,
|
||||
// private
|
||||
internalCloseFocusable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
internalCloseIsButtonTag: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// deprecated
|
||||
onCheckedChange: Function
|
||||
});
|
||||
const tagInjectionKey = createInjectionKey("n-tag");
|
||||
const __unplugin_components_4 = defineComponent({
|
||||
name: "Tag",
|
||||
props: tagProps,
|
||||
setup(props) {
|
||||
const contentRef = ref(null);
|
||||
const {
|
||||
mergedBorderedRef,
|
||||
mergedClsPrefixRef,
|
||||
inlineThemeDisabled,
|
||||
mergedRtlRef
|
||||
} = useConfig(props);
|
||||
const themeRef = useTheme("Tag", "-tag", style, tagLight, props, mergedClsPrefixRef);
|
||||
provide(tagInjectionKey, {
|
||||
roundRef: toRef(props, "round")
|
||||
});
|
||||
function handleClick() {
|
||||
if (!props.disabled) {
|
||||
if (props.checkable) {
|
||||
const {
|
||||
checked,
|
||||
onCheckedChange,
|
||||
onUpdateChecked,
|
||||
"onUpdate:checked": _onUpdateChecked
|
||||
} = props;
|
||||
if (onUpdateChecked) onUpdateChecked(!checked);
|
||||
if (_onUpdateChecked) _onUpdateChecked(!checked);
|
||||
if (onCheckedChange) onCheckedChange(!checked);
|
||||
}
|
||||
}
|
||||
}
|
||||
function handleCloseClick(e) {
|
||||
if (!props.triggerClickOnClose) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
if (!props.disabled) {
|
||||
const {
|
||||
onClose
|
||||
} = props;
|
||||
if (onClose) call(onClose, e);
|
||||
}
|
||||
}
|
||||
const tagPublicMethods = {
|
||||
setTextContent(textContent) {
|
||||
const {
|
||||
value
|
||||
} = contentRef;
|
||||
if (value) value.textContent = textContent;
|
||||
}
|
||||
};
|
||||
const rtlEnabledRef = useRtl("Tag", mergedRtlRef, mergedClsPrefixRef);
|
||||
const cssVarsRef = computed(() => {
|
||||
const {
|
||||
type,
|
||||
size,
|
||||
color: {
|
||||
color,
|
||||
textColor
|
||||
} = {}
|
||||
} = props;
|
||||
const {
|
||||
common: {
|
||||
cubicBezierEaseInOut
|
||||
},
|
||||
self: {
|
||||
padding,
|
||||
closeMargin,
|
||||
borderRadius,
|
||||
opacityDisabled,
|
||||
textColorCheckable,
|
||||
textColorHoverCheckable,
|
||||
textColorPressedCheckable,
|
||||
textColorChecked,
|
||||
colorCheckable,
|
||||
colorHoverCheckable,
|
||||
colorPressedCheckable,
|
||||
colorChecked,
|
||||
colorCheckedHover,
|
||||
colorCheckedPressed,
|
||||
closeBorderRadius,
|
||||
fontWeightStrong,
|
||||
[createKey("colorBordered", type)]: colorBordered,
|
||||
[createKey("closeSize", size)]: closeSize,
|
||||
[createKey("closeIconSize", size)]: closeIconSize,
|
||||
[createKey("fontSize", size)]: fontSize,
|
||||
[createKey("height", size)]: height,
|
||||
[createKey("color", type)]: typedColor,
|
||||
[createKey("textColor", type)]: typeTextColor,
|
||||
[createKey("border", type)]: border,
|
||||
[createKey("closeIconColor", type)]: closeIconColor,
|
||||
[createKey("closeIconColorHover", type)]: closeIconColorHover,
|
||||
[createKey("closeIconColorPressed", type)]: closeIconColorPressed,
|
||||
[createKey("closeColorHover", type)]: closeColorHover,
|
||||
[createKey("closeColorPressed", type)]: closeColorPressed
|
||||
}
|
||||
} = themeRef.value;
|
||||
const closeMarginDiscrete = getMargin(closeMargin);
|
||||
return {
|
||||
"--n-font-weight-strong": fontWeightStrong,
|
||||
"--n-avatar-size-override": `calc(${height} - 8px)`,
|
||||
"--n-bezier": cubicBezierEaseInOut,
|
||||
"--n-border-radius": borderRadius,
|
||||
"--n-border": border,
|
||||
"--n-close-icon-size": closeIconSize,
|
||||
"--n-close-color-pressed": closeColorPressed,
|
||||
"--n-close-color-hover": closeColorHover,
|
||||
"--n-close-border-radius": closeBorderRadius,
|
||||
"--n-close-icon-color": closeIconColor,
|
||||
"--n-close-icon-color-hover": closeIconColorHover,
|
||||
"--n-close-icon-color-pressed": closeIconColorPressed,
|
||||
"--n-close-icon-color-disabled": closeIconColor,
|
||||
"--n-close-margin-top": closeMarginDiscrete.top,
|
||||
"--n-close-margin-right": closeMarginDiscrete.right,
|
||||
"--n-close-margin-bottom": closeMarginDiscrete.bottom,
|
||||
"--n-close-margin-left": closeMarginDiscrete.left,
|
||||
"--n-close-size": closeSize,
|
||||
"--n-color": color || (mergedBorderedRef.value ? colorBordered : typedColor),
|
||||
"--n-color-checkable": colorCheckable,
|
||||
"--n-color-checked": colorChecked,
|
||||
"--n-color-checked-hover": colorCheckedHover,
|
||||
"--n-color-checked-pressed": colorCheckedPressed,
|
||||
"--n-color-hover-checkable": colorHoverCheckable,
|
||||
"--n-color-pressed-checkable": colorPressedCheckable,
|
||||
"--n-font-size": fontSize,
|
||||
"--n-height": height,
|
||||
"--n-opacity-disabled": opacityDisabled,
|
||||
"--n-padding": padding,
|
||||
"--n-text-color": textColor || typeTextColor,
|
||||
"--n-text-color-checkable": textColorCheckable,
|
||||
"--n-text-color-checked": textColorChecked,
|
||||
"--n-text-color-hover-checkable": textColorHoverCheckable,
|
||||
"--n-text-color-pressed-checkable": textColorPressedCheckable
|
||||
};
|
||||
});
|
||||
const themeClassHandle = inlineThemeDisabled ? useThemeClass("tag", computed(() => {
|
||||
let hash = "";
|
||||
const {
|
||||
type,
|
||||
size,
|
||||
color: {
|
||||
color,
|
||||
textColor
|
||||
} = {}
|
||||
} = props;
|
||||
hash += type[0];
|
||||
hash += size[0];
|
||||
if (color) {
|
||||
hash += `a${color2Class(color)}`;
|
||||
}
|
||||
if (textColor) {
|
||||
hash += `b${color2Class(textColor)}`;
|
||||
}
|
||||
if (mergedBorderedRef.value) {
|
||||
hash += "c";
|
||||
}
|
||||
return hash;
|
||||
}), cssVarsRef, props) : void 0;
|
||||
return Object.assign(Object.assign({}, tagPublicMethods), {
|
||||
rtlEnabled: rtlEnabledRef,
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
contentRef,
|
||||
mergedBordered: mergedBorderedRef,
|
||||
handleClick,
|
||||
handleCloseClick,
|
||||
cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
|
||||
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
||||
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
|
||||
});
|
||||
},
|
||||
render() {
|
||||
var _a, _b;
|
||||
const {
|
||||
mergedClsPrefix,
|
||||
rtlEnabled,
|
||||
closable,
|
||||
color: {
|
||||
borderColor
|
||||
} = {},
|
||||
round,
|
||||
onRender,
|
||||
$slots
|
||||
} = this;
|
||||
onRender === null || onRender === void 0 ? void 0 : onRender();
|
||||
const avatarNode = resolveWrappedSlot($slots.avatar, (children) => children && h("div", {
|
||||
class: `${mergedClsPrefix}-tag__avatar`
|
||||
}, children));
|
||||
const iconNode = resolveWrappedSlot($slots.icon, (children) => children && h("div", {
|
||||
class: `${mergedClsPrefix}-tag__icon`
|
||||
}, children));
|
||||
return h("div", {
|
||||
class: [`${mergedClsPrefix}-tag`, this.themeClass, {
|
||||
[`${mergedClsPrefix}-tag--rtl`]: rtlEnabled,
|
||||
[`${mergedClsPrefix}-tag--strong`]: this.strong,
|
||||
[`${mergedClsPrefix}-tag--disabled`]: this.disabled,
|
||||
[`${mergedClsPrefix}-tag--checkable`]: this.checkable,
|
||||
[`${mergedClsPrefix}-tag--checked`]: this.checkable && this.checked,
|
||||
[`${mergedClsPrefix}-tag--round`]: round,
|
||||
[`${mergedClsPrefix}-tag--avatar`]: avatarNode,
|
||||
[`${mergedClsPrefix}-tag--icon`]: iconNode,
|
||||
[`${mergedClsPrefix}-tag--closable`]: closable
|
||||
}],
|
||||
style: this.cssVars,
|
||||
onClick: this.handleClick,
|
||||
onMouseenter: this.onMouseenter,
|
||||
onMouseleave: this.onMouseleave
|
||||
}, iconNode || avatarNode, h("span", {
|
||||
class: `${mergedClsPrefix}-tag__content`,
|
||||
ref: "contentRef"
|
||||
}, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a)), !this.checkable && closable ? h(NBaseClose, {
|
||||
clsPrefix: mergedClsPrefix,
|
||||
class: `${mergedClsPrefix}-tag__close`,
|
||||
disabled: this.disabled,
|
||||
onClick: this.handleCloseClick,
|
||||
focusable: this.internalCloseFocusable,
|
||||
round,
|
||||
isButtonTag: this.internalCloseIsButtonTag,
|
||||
absolute: true
|
||||
}) : null, !this.checkable && this.mergedBordered ? h("div", {
|
||||
class: `${mergedClsPrefix}-tag__border`,
|
||||
style: {
|
||||
borderColor
|
||||
}
|
||||
}) : null);
|
||||
}
|
||||
});
|
||||
export {
|
||||
__unplugin_components_4 as _,
|
||||
tagInjectionKey as t
|
||||
};
|
||||
Binary file not shown.
@@ -1,63 +0,0 @@
|
||||
import { as as inject, ce as dialogApiInjectionKey, bi as throwError, d as defineComponent, j as openBlock, c as createElementBlock, b as createBaseVNode, R as isElectron, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
function useDialog() {
|
||||
const dialog = inject(dialogApiInjectionKey, null);
|
||||
if (dialog === null) {
|
||||
throwError("use-dialog", "No outer <n-dialog-provider /> founded.");
|
||||
}
|
||||
return dialog;
|
||||
}
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
__name: "TitleBar",
|
||||
setup(__props) {
|
||||
const dialog = useDialog();
|
||||
const minimize = () => {
|
||||
if (!isElectron) {
|
||||
return;
|
||||
}
|
||||
window.api.minimize();
|
||||
};
|
||||
const close = () => {
|
||||
if (!isElectron) {
|
||||
return;
|
||||
}
|
||||
dialog.warning({
|
||||
title: "提示",
|
||||
content: "确定要退出吗？",
|
||||
positiveText: "最小化",
|
||||
negativeText: "关闭",
|
||||
onPositiveClick: () => {
|
||||
window.api.minimize();
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
window.api.close();
|
||||
}
|
||||
});
|
||||
};
|
||||
const drag = (event) => {
|
||||
if (!isElectron) {
|
||||
return;
|
||||
}
|
||||
window.api.dragStart(event);
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
id: "title-bar",
|
||||
onMousedown: drag
|
||||
}, [
|
||||
_cache[2] || (_cache[2] = createBaseVNode("div", { id: "title" }, "Alger Music", -1)),
|
||||
createBaseVNode("div", { id: "buttons" }, [
|
||||
createBaseVNode("button", { onClick: minimize }, _cache[0] || (_cache[0] = [
|
||||
createBaseVNode("i", { class: "iconfont icon-minisize" }, null, -1)
|
||||
])),
|
||||
createBaseVNode("button", { onClick: close }, _cache[1] || (_cache[1] = [
|
||||
createBaseVNode("i", { class: "iconfont icon-close" }, null, -1)
|
||||
]))
|
||||
])
|
||||
], 32);
|
||||
};
|
||||
}
|
||||
});
|
||||
const TitleBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6ad4ce60"]]);
|
||||
export {
|
||||
TitleBar as default
|
||||
};
|
||||
Binary file not shown.
@@ -1,37 +0,0 @@
|
||||
#title-bar[data-v-6ad4ce60] {
|
||||
-webkit-app-region: drag;
|
||||
position: relative;
|
||||
display: flex;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
justify-content: space-between;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity, 1));
|
||||
}#title-bar[data-v-6ad4ce60]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}#title-bar[data-v-6ad4ce60] {
|
||||
z-index: 9999999;
|
||||
}
|
||||
#buttons[data-v-6ad4ce60] {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
button[data-v-6ad4ce60] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
button[data-v-6ad4ce60]:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
button[data-v-6ad4ce60]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -1,31 +0,0 @@
|
||||
import { ad as request } from "./index-DKaFsuse.js";
|
||||
const getHotSinger = (params) => {
|
||||
return request.get("/top/artists", { params });
|
||||
};
|
||||
const getSearchKeyword = () => {
|
||||
return request.get("/search/default");
|
||||
};
|
||||
const getHotSearch = () => {
|
||||
return request.get("/search/hot/detail");
|
||||
};
|
||||
const getPlaylistCategory = () => {
|
||||
return request.get("/playlist/catlist");
|
||||
};
|
||||
const getRecommendMusic = (params) => {
|
||||
return request.get("/personalized/newsong", { params });
|
||||
};
|
||||
const getDayRecommend = () => {
|
||||
return request.get("/recommend/songs");
|
||||
};
|
||||
const getNewAlbum = () => {
|
||||
return request.get("/album/newest");
|
||||
};
|
||||
export {
|
||||
getNewAlbum as a,
|
||||
getHotSinger as b,
|
||||
getDayRecommend as c,
|
||||
getRecommendMusic as d,
|
||||
getHotSearch as e,
|
||||
getSearchKeyword as f,
|
||||
getPlaylistCategory as g
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,43 +0,0 @@
|
||||
.favorite-page[data-v-2d1a7423] {display: flex;height: 100%;flex-direction: column;padding-top: 0.5rem;--tw-bg-opacity: 1;background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
|
||||
}.favorite-page[data-v-2d1a7423]:is(.dark *) {--tw-bg-opacity: 1;background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.favorite-page .favorite-header[data-v-2d1a7423] {display: flex;flex-shrink: 0;align-items: center;justify-content: space-between;padding-left: 1rem;padding-right: 1rem
|
||||
}
|
||||
.favorite-page .favorite-header h2[data-v-2d1a7423] {padding-bottom: 0.5rem;font-size: 1.25rem;line-height: 1.75rem;font-weight: 700;--tw-text-opacity: 1;color: rgb(17 24 39 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.favorite-page .favorite-header h2[data-v-2d1a7423]:is(.dark *) {--tw-text-opacity: 1;color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.favorite-page .favorite-header .favorite-count[data-v-2d1a7423] {font-size: 0.875rem;line-height: 1.25rem;--tw-text-opacity: 1;color: rgb(107 114 128 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.favorite-page .favorite-header .favorite-count[data-v-2d1a7423]:is(.dark *) {--tw-text-opacity: 1;color: rgb(156 163 175 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.favorite-page .favorite-main[data-v-2d1a7423] {display: flex;min-height: 0px;flex-grow: 1;flex-direction: column
|
||||
}
|
||||
.favorite-page .favorite-main .favorite-content[data-v-2d1a7423] {min-height: 0px;flex-grow: 1
|
||||
}
|
||||
.favorite-page .favorite-main .favorite-content .empty-tip[data-v-2d1a7423] {display: flex;height: 100%;align-items: center;justify-content: center;--tw-text-opacity: 1;color: rgb(107 114 128 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.favorite-page .favorite-main .favorite-content .empty-tip[data-v-2d1a7423]:is(.dark *) {--tw-text-opacity: 1;color: rgb(156 163 175 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.favorite-page .favorite-main .favorite-content .favorite-list[data-v-2d1a7423] > :not([hidden]) ~ :not([hidden]) {--tw-space-y-reverse: 0;margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
|
||||
}
|
||||
.favorite-page .favorite-main .favorite-content .favorite-list[data-v-2d1a7423] {padding-left: 1rem;padding-right: 1rem;padding-bottom: 1rem
|
||||
}
|
||||
.favorite-page .favorite-main .favorite-content .favorite-list-more[data-v-2d1a7423] {margin-top: 1rem
|
||||
}
|
||||
.favorite-page .favorite-main .favorite-content .favorite-list-more .n-button[data-v-2d1a7423] {--tw-text-opacity: 1;color: rgb(34 197 94 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.favorite-page .favorite-main .favorite-content .favorite-list-more .n-button[data-v-2d1a7423]:hover {--tw-text-opacity: 1;color: rgb(22 163 74 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.loading-wrapper[data-v-2d1a7423] {display: flex;align-items: center;justify-content: center;padding-top: 5rem;padding-bottom: 5rem
|
||||
}
|
||||
.no-more-tip[data-v-2d1a7423] {padding-top: 1rem;padding-bottom: 1rem;text-align: center;font-size: 0.875rem;line-height: 1.25rem;--tw-text-opacity: 1;color: rgb(107 114 128 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.no-more-tip[data-v-2d1a7423]:is(.dark *) {--tw-text-opacity: 1;color: rgb(156 163 175 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.mobile .favorite-page[data-v-2d1a7423] {padding: 1rem
|
||||
}
|
||||
.mobile .favorite-page .favorite-header[data-v-2d1a7423] {margin-bottom: 1rem
|
||||
}
|
||||
.mobile .favorite-page .favorite-header h2[data-v-2d1a7423] {font-size: 1.25rem;line-height: 1.75rem
|
||||
}
|
||||
Binary file not shown.
@@ -1,540 +0,0 @@
|
||||
import { p as cB, V as cNotM, m as c, W as cM, Y as cE, d as defineComponent, x as useConfig, Z as useStyle, $ as provide, F as useRtl, l as h, a0 as buttonGroupInjectionKey, r as ref, G as computed, E as watch, o as onMounted, a1 as onUnmounted, c as createElementBlock, b as createBaseVNode, e as createVNode, f as withCtx, t as toDisplayString, n as normalizeClass, a2 as normalizeStyle, a3 as Fragment, a4 as renderList, j as openBlock, T as createCommentVNode, B as Button, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
const zero = "0!important";
|
||||
const n1 = "-1px!important";
|
||||
function createLeftBorderStyle(type) {
|
||||
return cM(`${type}-type`, [c("& +", [cB("button", {}, [cM(`${type}-type`, [cE("border", {
|
||||
borderLeftWidth: zero
|
||||
}), cE("state-border", {
|
||||
left: n1
|
||||
})])])])]);
|
||||
}
|
||||
function createTopBorderStyle(type) {
|
||||
return cM(`${type}-type`, [c("& +", [cB("button", [cM(`${type}-type`, [cE("border", {
|
||||
borderTopWidth: zero
|
||||
}), cE("state-border", {
|
||||
top: n1
|
||||
})])])])]);
|
||||
}
|
||||
const style = cB("button-group", `
|
||||
flex-wrap: nowrap;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
`, [cNotM("vertical", {
|
||||
flexDirection: "row"
|
||||
}, [cNotM("rtl", [cB("button", [c("&:first-child:not(:last-child)", `
|
||||
margin-right: ${zero};
|
||||
border-top-right-radius: ${zero};
|
||||
border-bottom-right-radius: ${zero};
|
||||
`), c("&:last-child:not(:first-child)", `
|
||||
margin-left: ${zero};
|
||||
border-top-left-radius: ${zero};
|
||||
border-bottom-left-radius: ${zero};
|
||||
`), c("&:not(:first-child):not(:last-child)", `
|
||||
margin-left: ${zero};
|
||||
margin-right: ${zero};
|
||||
border-radius: ${zero};
|
||||
`), createLeftBorderStyle("default"), cM("ghost", [createLeftBorderStyle("primary"), createLeftBorderStyle("info"), createLeftBorderStyle("success"), createLeftBorderStyle("warning"), createLeftBorderStyle("error")])])])]), cM("vertical", {
|
||||
flexDirection: "column"
|
||||
}, [cB("button", [c("&:first-child:not(:last-child)", `
|
||||
margin-bottom: ${zero};
|
||||
margin-left: ${zero};
|
||||
margin-right: ${zero};
|
||||
border-bottom-left-radius: ${zero};
|
||||
border-bottom-right-radius: ${zero};
|
||||
`), c("&:last-child:not(:first-child)", `
|
||||
margin-top: ${zero};
|
||||
margin-left: ${zero};
|
||||
margin-right: ${zero};
|
||||
border-top-left-radius: ${zero};
|
||||
border-top-right-radius: ${zero};
|
||||
`), c("&:not(:first-child):not(:last-child)", `
|
||||
margin: ${zero};
|
||||
border-radius: ${zero};
|
||||
`), createTopBorderStyle("default"), cM("ghost", [createTopBorderStyle("primary"), createTopBorderStyle("info"), createTopBorderStyle("success"), createTopBorderStyle("warning"), createTopBorderStyle("error")])])])]);
|
||||
const buttonGroupProps = {
|
||||
size: {
|
||||
type: String,
|
||||
default: void 0
|
||||
},
|
||||
vertical: Boolean
|
||||
};
|
||||
const __unplugin_components_1 = defineComponent({
|
||||
name: "ButtonGroup",
|
||||
props: buttonGroupProps,
|
||||
setup(props) {
|
||||
const {
|
||||
mergedClsPrefixRef,
|
||||
mergedRtlRef
|
||||
} = useConfig(props);
|
||||
useStyle("-button-group", style, mergedClsPrefixRef);
|
||||
provide(buttonGroupInjectionKey, props);
|
||||
const rtlEnabledRef = useRtl("ButtonGroup", mergedRtlRef, mergedClsPrefixRef);
|
||||
return {
|
||||
rtlEnabled: rtlEnabledRef,
|
||||
mergedClsPrefix: mergedClsPrefixRef
|
||||
};
|
||||
},
|
||||
render() {
|
||||
const {
|
||||
mergedClsPrefix
|
||||
} = this;
|
||||
return h("div", {
|
||||
class: [`${mergedClsPrefix}-button-group`, this.rtlEnabled && `${mergedClsPrefix}-button-group--rtl`, this.vertical && `${mergedClsPrefix}-button-group--vertical`],
|
||||
role: "group"
|
||||
}, this.$slots);
|
||||
}
|
||||
});
|
||||
const _hoisted_1 = { class: "font-size-controls" };
|
||||
const _hoisted_2 = { class: "play-controls" };
|
||||
const _hoisted_3 = { class: "control-buttons" };
|
||||
const _hoisted_4 = {
|
||||
key: 0,
|
||||
class: "ri-sun-line"
|
||||
};
|
||||
const _hoisted_5 = {
|
||||
key: 1,
|
||||
class: "ri-moon-line"
|
||||
};
|
||||
const _hoisted_6 = {
|
||||
key: 0,
|
||||
class: "ri-lock-line"
|
||||
};
|
||||
const _hoisted_7 = {
|
||||
key: 1,
|
||||
class: "ri-lock-unlock-line"
|
||||
};
|
||||
const _hoisted_8 = { class: "lyric-scroll" };
|
||||
const _hoisted_9 = {
|
||||
key: 1,
|
||||
class: "lyric-empty"
|
||||
};
|
||||
const fontSizeStep = 2;
|
||||
const TIME_OFFSET = 400;
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
...{
|
||||
name: "Lyric"
|
||||
},
|
||||
__name: "index",
|
||||
setup(__props) {
|
||||
const windowData = window;
|
||||
const containerRef = ref(null);
|
||||
const containerHeight = ref(0);
|
||||
const lineHeight = ref(60);
|
||||
const currentIndex = ref(0);
|
||||
const fontSize = ref(24);
|
||||
const animationFrameId = ref(null);
|
||||
const lastUpdateTime = ref(performance.now());
|
||||
const staticData = ref({
|
||||
lrcArray: [],
|
||||
lrcTimeArray: [],
|
||||
allTime: 0,
|
||||
playMusic: {}
|
||||
});
|
||||
const dynamicData = ref({
|
||||
nowTime: 0,
|
||||
startCurrentTime: 0,
|
||||
nextTime: 0,
|
||||
isPlay: true
|
||||
});
|
||||
const lyricSetting = ref({
|
||||
...localStorage.getItem("lyricData") ? JSON.parse(localStorage.getItem("lyricData") || "") : {
|
||||
isTop: false,
|
||||
theme: "dark",
|
||||
isLock: false
|
||||
}
|
||||
});
|
||||
const isHovering = ref(false);
|
||||
const showControls = computed(() => {
|
||||
if (lyricSetting.value.isLock) {
|
||||
return isHovering.value;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
const handleMouseEnter = () => {
|
||||
if (lyricSetting.value.isLock) {
|
||||
isHovering.value = true;
|
||||
windowData.electron.ipcRenderer.send("set-ignore-mouse", true);
|
||||
} else {
|
||||
windowData.electron.ipcRenderer.send("set-ignore-mouse", false);
|
||||
}
|
||||
};
|
||||
const handleMouseLeave = () => {
|
||||
if (!lyricSetting.value.isLock) return;
|
||||
isHovering.value = false;
|
||||
windowData.electron.ipcRenderer.send("set-ignore-mouse", false);
|
||||
};
|
||||
watch(
|
||||
() => lyricSetting.value.isLock,
|
||||
(newLock) => {
|
||||
if (newLock) {
|
||||
isHovering.value = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
if (lyricSetting.value.isLock) {
|
||||
isHovering.value = false;
|
||||
}
|
||||
});
|
||||
onUnmounted(() => {
|
||||
});
|
||||
const wrapperStyle = computed(() => {
|
||||
if (!containerHeight.value) {
|
||||
return {
|
||||
transform: "translateY(0)",
|
||||
transition: "none"
|
||||
};
|
||||
}
|
||||
const containerCenter = containerHeight.value / 2;
|
||||
const currentLineTop = currentIndex.value * lineHeight.value + containerHeight.value * 0.2 + lineHeight.value;
|
||||
const targetOffset = containerCenter - currentLineTop;
|
||||
const contentHeight = staticData.value.lrcArray.length * lineHeight.value + containerHeight.value * 0.4;
|
||||
const minOffset = -(contentHeight - containerHeight.value);
|
||||
const maxOffset = 0;
|
||||
const finalOffset = Math.min(maxOffset, Math.max(minOffset, targetOffset));
|
||||
return {
|
||||
transform: `translateY(${finalOffset}px)`,
|
||||
transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
|
||||
};
|
||||
});
|
||||
const lyricLineStyle = computed(() => ({
|
||||
height: `${lineHeight.value}px`
|
||||
}));
|
||||
const updateContainerHeight = () => {
|
||||
if (!containerRef.value) return;
|
||||
containerHeight.value = containerRef.value.clientHeight;
|
||||
const baseLineHeight = fontSize.value * 2.5;
|
||||
const maxAllowedHeight = containerHeight.value / 3;
|
||||
lineHeight.value = Math.min(maxAllowedHeight, Math.max(40, baseLineHeight));
|
||||
};
|
||||
const handleFontSizeChange = async () => {
|
||||
saveFontSize();
|
||||
updateContainerHeight();
|
||||
};
|
||||
const increaseFontSize = async () => {
|
||||
if (fontSize.value < 48) {
|
||||
fontSize.value += fontSizeStep;
|
||||
await handleFontSizeChange();
|
||||
}
|
||||
};
|
||||
const decreaseFontSize = async () => {
|
||||
if (fontSize.value > 12) {
|
||||
fontSize.value -= fontSizeStep;
|
||||
await handleFontSizeChange();
|
||||
}
|
||||
};
|
||||
const saveFontSize = () => {
|
||||
localStorage.setItem("lyricFontSize", fontSize.value.toString());
|
||||
};
|
||||
onMounted(() => {
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
updateContainerHeight();
|
||||
});
|
||||
if (containerRef.value) {
|
||||
resizeObserver.observe(containerRef.value);
|
||||
}
|
||||
onUnmounted(() => {
|
||||
resizeObserver.disconnect();
|
||||
});
|
||||
});
|
||||
const actualTime = ref(0);
|
||||
const currentProgress = computed(() => {
|
||||
const { startCurrentTime, nextTime } = dynamicData.value;
|
||||
if (!startCurrentTime || !nextTime) return 0;
|
||||
const duration = nextTime - startCurrentTime;
|
||||
const elapsed = actualTime.value - startCurrentTime;
|
||||
return Math.min(Math.max(elapsed / duration, 0), 1);
|
||||
});
|
||||
const getLyricStyle = (index2) => {
|
||||
if (index2 !== currentIndex.value) return {};
|
||||
const progress = currentProgress.value * 100;
|
||||
return {
|
||||
background: `linear-gradient(to right, var(--highlight-color) ${progress}%, var(--text-color) ${progress}%)`,
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
transition: "all 0.1s linear"
|
||||
};
|
||||
};
|
||||
const updateProgress = () => {
|
||||
if (!dynamicData.value.isPlay) {
|
||||
if (animationFrameId.value) {
|
||||
cancelAnimationFrame(animationFrameId.value);
|
||||
animationFrameId.value = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
const timeDiff = (performance.now() - lastUpdateTime.value) / 1e3;
|
||||
actualTime.value = dynamicData.value.nowTime + timeDiff + TIME_OFFSET / 1e3;
|
||||
animationFrameId.value = requestAnimationFrame(updateProgress);
|
||||
};
|
||||
watch(
|
||||
() => dynamicData.value,
|
||||
(newData) => {
|
||||
lastUpdateTime.value = performance.now();
|
||||
actualTime.value = newData.nowTime + TIME_OFFSET / 1e3;
|
||||
if (newData.isPlay && !animationFrameId.value) {
|
||||
updateProgress();
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
watch(
|
||||
() => dynamicData.value.isPlay,
|
||||
(isPlaying) => {
|
||||
if (isPlaying) {
|
||||
lastUpdateTime.value = performance.now();
|
||||
updateProgress();
|
||||
} else if (animationFrameId.value) {
|
||||
cancelAnimationFrame(animationFrameId.value);
|
||||
animationFrameId.value = null;
|
||||
}
|
||||
}
|
||||
);
|
||||
const handleDataUpdate = (parsedData) => {
|
||||
if (!parsedData) {
|
||||
console.error("Invalid update data received:", parsedData);
|
||||
return;
|
||||
}
|
||||
staticData.value = {
|
||||
lrcArray: parsedData.lrcArray || [],
|
||||
lrcTimeArray: parsedData.lrcTimeArray || [],
|
||||
allTime: parsedData.allTime || 0,
|
||||
playMusic: parsedData.playMusic || {}
|
||||
};
|
||||
dynamicData.value = {
|
||||
nowTime: parsedData.nowTime || 0,
|
||||
startCurrentTime: parsedData.startCurrentTime || 0,
|
||||
nextTime: parsedData.nextTime || 0,
|
||||
isPlay: parsedData.isPlay
|
||||
};
|
||||
if (typeof parsedData.nowIndex === "number") {
|
||||
currentIndex.value = parsedData.nowIndex;
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
const savedFontSize = localStorage.getItem("lyricFontSize");
|
||||
if (savedFontSize) {
|
||||
fontSize.value = Number(savedFontSize);
|
||||
lineHeight.value = fontSize.value * 2.5;
|
||||
}
|
||||
updateContainerHeight();
|
||||
window.addEventListener("resize", updateContainerHeight);
|
||||
windowData.electron.ipcRenderer.on("receive-lyric", (_, data) => {
|
||||
try {
|
||||
const parsedData = JSON.parse(data);
|
||||
handleDataUpdate(parsedData);
|
||||
} catch (error) {
|
||||
console.error("Error parsing lyric data:", error);
|
||||
}
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", updateContainerHeight);
|
||||
});
|
||||
const checkTheme = () => {
|
||||
if (lyricSetting.value.theme === "light") {
|
||||
lyricSetting.value.theme = "dark";
|
||||
} else {
|
||||
lyricSetting.value.theme = "light";
|
||||
}
|
||||
};
|
||||
const handleLock = () => {
|
||||
lyricSetting.value.isLock = !lyricSetting.value.isLock;
|
||||
windowData.electron.ipcRenderer.send("set-ignore-mouse", lyricSetting.value.isLock);
|
||||
};
|
||||
const handleClose = () => {
|
||||
windowData.electron.ipcRenderer.send("close-lyric");
|
||||
};
|
||||
watch(
|
||||
() => lyricSetting.value,
|
||||
(newValue) => {
|
||||
localStorage.setItem("lyricData", JSON.stringify(newValue));
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
const isDragging = ref(false);
|
||||
const startPosition = ref({ x: 0, y: 0 });
|
||||
const handleMouseDown = (e) => {
|
||||
if (lyricSetting.value.isLock || e.target.closest(".control-buttons") || e.target.closest(".font-size-controls")) {
|
||||
return;
|
||||
}
|
||||
if (e.button !== 0) return;
|
||||
isDragging.value = true;
|
||||
startPosition.value = { x: e.screenX, y: e.screenY };
|
||||
const handleMouseMove = (e2) => {
|
||||
if (!isDragging.value) return;
|
||||
const deltaX = e2.screenX - startPosition.value.x;
|
||||
const deltaY = e2.screenY - startPosition.value.y;
|
||||
windowData.electron.ipcRenderer.send("lyric-drag-move", { deltaX, deltaY });
|
||||
startPosition.value = { x: e2.screenX, y: e2.screenY };
|
||||
};
|
||||
const handleMouseUp = () => {
|
||||
if (!isDragging.value) return;
|
||||
isDragging.value = false;
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
document.removeEventListener("mouseup", handleMouseUp);
|
||||
};
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
};
|
||||
onUnmounted(() => {
|
||||
isDragging.value = false;
|
||||
});
|
||||
onMounted(() => {
|
||||
const lyricLock = document.getElementById("lyric-lock");
|
||||
if (lyricLock) {
|
||||
lyricLock.onmouseenter = () => {
|
||||
if (lyricSetting.value.isLock) {
|
||||
windowData.electron.ipcRenderer.send("set-ignore-mouse", false);
|
||||
}
|
||||
};
|
||||
lyricLock.onmouseleave = () => {
|
||||
if (lyricSetting.value.isLock) {
|
||||
windowData.electron.ipcRenderer.send("set-ignore-mouse", true);
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
const handlePlayPause = () => {
|
||||
windowData.electron.ipcRenderer.send("control-back", "playpause");
|
||||
};
|
||||
const handlePrev = () => {
|
||||
windowData.electron.ipcRenderer.send("control-back", "prev");
|
||||
};
|
||||
const handleNext = () => {
|
||||
windowData.electron.ipcRenderer.send("control-back", "next");
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_button = Button;
|
||||
const _component_n_button_group = __unplugin_components_1;
|
||||
return openBlock(), createElementBlock("div", {
|
||||
class: normalizeClass(["lyric-window", [lyricSetting.value.theme, { lyric_lock: lyricSetting.value.isLock }]]),
|
||||
onMousedown: handleMouseDown,
|
||||
onMouseenter: handleMouseEnter,
|
||||
onMouseleave: handleMouseLeave
|
||||
}, [
|
||||
_cache[5] || (_cache[5] = createBaseVNode("div", { class: "drag-overlay" }, null, -1)),
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["control-bar", { "control-bar-show": showControls.value }])
|
||||
}, [
|
||||
createBaseVNode("div", _hoisted_1, [
|
||||
createVNode(_component_n_button_group, null, {
|
||||
default: withCtx(() => [
|
||||
createVNode(_component_n_button, {
|
||||
quaternary: "",
|
||||
size: "small",
|
||||
disabled: fontSize.value <= 12,
|
||||
onClick: decreaseFontSize
|
||||
}, {
|
||||
default: withCtx(() => _cache[0] || (_cache[0] = [
|
||||
createBaseVNode("i", { class: "ri-subtract-line" }, null, -1)
|
||||
])),
|
||||
_: 1
|
||||
}, 8, ["disabled"]),
|
||||
createVNode(_component_n_button, {
|
||||
quaternary: "",
|
||||
size: "small",
|
||||
disabled: fontSize.value >= 48,
|
||||
onClick: increaseFontSize
|
||||
}, {
|
||||
default: withCtx(() => _cache[1] || (_cache[1] = [
|
||||
createBaseVNode("i", { class: "ri-add-line" }, null, -1)
|
||||
])),
|
||||
_: 1
|
||||
}, 8, ["disabled"])
|
||||
]),
|
||||
_: 1
|
||||
}),
|
||||
createBaseVNode("div", null, toDisplayString(staticData.value.playMusic.name), 1)
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_2, [
|
||||
createBaseVNode("div", {
|
||||
class: "control-button",
|
||||
onClick: handlePrev
|
||||
}, _cache[2] || (_cache[2] = [
|
||||
createBaseVNode("i", { class: "ri-skip-back-fill" }, null, -1)
|
||||
])),
|
||||
createBaseVNode("div", {
|
||||
class: "control-button play-button",
|
||||
onClick: handlePlayPause
|
||||
}, [
|
||||
createBaseVNode("i", {
|
||||
class: normalizeClass(dynamicData.value.isPlay ? "ri-pause-fill" : "ri-play-fill")
|
||||
}, null, 2)
|
||||
]),
|
||||
createBaseVNode("div", {
|
||||
class: "control-button",
|
||||
onClick: handleNext
|
||||
}, _cache[3] || (_cache[3] = [
|
||||
createBaseVNode("i", { class: "ri-skip-forward-fill" }, null, -1)
|
||||
]))
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_3, [
|
||||
createBaseVNode("div", {
|
||||
class: "control-button",
|
||||
onClick: checkTheme
|
||||
}, [
|
||||
lyricSetting.value.theme === "light" ? (openBlock(), createElementBlock("i", _hoisted_4)) : (openBlock(), createElementBlock("i", _hoisted_5))
|
||||
]),
|
||||
createBaseVNode("div", {
|
||||
id: "lyric-lock",
|
||||
class: "control-button",
|
||||
onClick: handleLock
|
||||
}, [
|
||||
lyricSetting.value.isLock ? (openBlock(), createElementBlock("i", _hoisted_6)) : (openBlock(), createElementBlock("i", _hoisted_7))
|
||||
]),
|
||||
createBaseVNode("div", {
|
||||
class: "control-button",
|
||||
onClick: handleClose
|
||||
}, _cache[4] || (_cache[4] = [
|
||||
createBaseVNode("i", { class: "ri-close-line" }, null, -1)
|
||||
]))
|
||||
])
|
||||
], 2),
|
||||
createBaseVNode("div", {
|
||||
ref_key: "containerRef",
|
||||
ref: containerRef,
|
||||
class: "lyric-container"
|
||||
}, [
|
||||
createBaseVNode("div", _hoisted_8, [
|
||||
createBaseVNode("div", {
|
||||
class: "lyric-wrapper",
|
||||
style: normalizeStyle(wrapperStyle.value)
|
||||
}, [
|
||||
staticData.value.lrcArray?.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(staticData.value.lrcArray, (line, index2) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: index2,
|
||||
class: normalizeClass(["lyric-line", {
|
||||
"lyric-line-current": index2 === currentIndex.value,
|
||||
"lyric-line-passed": index2 < currentIndex.value,
|
||||
"lyric-line-next": index2 === currentIndex.value + 1
|
||||
}]),
|
||||
style: normalizeStyle(lyricLineStyle.value)
|
||||
}, [
|
||||
createBaseVNode("div", {
|
||||
class: "lyric-text",
|
||||
style: normalizeStyle({ fontSize: `${fontSize.value}px` })
|
||||
}, [
|
||||
createBaseVNode("span", {
|
||||
class: "lyric-text-inner",
|
||||
style: normalizeStyle(getLyricStyle(index2))
|
||||
}, toDisplayString(line.text || ""), 5)
|
||||
], 4),
|
||||
line.trText ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: "lyric-translation",
|
||||
style: normalizeStyle({ fontSize: `${fontSize.value * 0.6}px` })
|
||||
}, toDisplayString(line.trText), 5)) : createCommentVNode("", true)
|
||||
], 6);
|
||||
}), 128)) : (openBlock(), createElementBlock("div", _hoisted_9, "无歌词"))
|
||||
], 4)
|
||||
])
|
||||
], 512)
|
||||
], 34);
|
||||
};
|
||||
}
|
||||
});
|
||||
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4abaac34"]]);
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
Binary file not shown.
@@ -1,203 +0,0 @@
|
||||
|
||||
body {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.lyric-window[data-v-4abaac34] {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
transition: background-color 0.2s ease;
|
||||
cursor: default;
|
||||
}
|
||||
.lyric-window[data-v-4abaac34]:hover {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.lyric-window:hover .control-bar-show[data-v-4abaac34] {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.lyric-window[data-v-4abaac34]:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.lyric-window.dark[data-v-4abaac34] {
|
||||
--text-color: #ffffff;
|
||||
--text-secondary: rgba(255, 255, 255, 0.6);
|
||||
--highlight-color: #1db954;
|
||||
--control-bg: rgba(124, 124, 124, 0.3);
|
||||
}
|
||||
.lyric-window.light[data-v-4abaac34] {
|
||||
--text-color: #333333;
|
||||
--text-secondary: rgba(51, 51, 51, 0.6);
|
||||
--highlight-color: #1db954;
|
||||
--control-bg: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.control-bar[data-v-4abaac34] {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
padding: 0 20px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||
z-index: 100;
|
||||
}
|
||||
.control-bar .font-size-controls[data-v-4abaac34] {
|
||||
-webkit-app-region: no-drag;
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.control-bar .play-controls[data-v-4abaac34] {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
.control-bar .play-controls .play-button[data-v-4abaac34] {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.control-bar .play-controls .play-button i[data-v-4abaac34] {
|
||||
font-size: 24px;
|
||||
}
|
||||
.control-bar .control-buttons[data-v-4abaac34] {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
.control-buttons[data-v-4abaac34] {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
.control-button[data-v-4abaac34] {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
color: var(--text-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.control-button[data-v-4abaac34]:hover {
|
||||
background: var(--control-bg);
|
||||
}
|
||||
.control-button i[data-v-4abaac34] {
|
||||
font-size: 20px;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.control-button i.active[data-v-4abaac34] {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
.lyric-container[data-v-4abaac34] {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
}
|
||||
.lyric-scroll[data-v-4abaac34] {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
|
||||
}
|
||||
.lyric-wrapper[data-v-4abaac34] {
|
||||
will-change: transform;
|
||||
padding: 20vh 0;
|
||||
transform-origin: center center;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.lyric-line[data-v-4abaac34] {
|
||||
padding: 4px 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.lyric-line.lyric-line-current[data-v-4abaac34] {
|
||||
transform: scale(1.05);
|
||||
opacity: 1;
|
||||
}
|
||||
.lyric-line.lyric-line-passed[data-v-4abaac34] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.lyric-text[data-v-4abaac34] {
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
color: var(--text-color);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.lyric-translation[data-v-4abaac34] {
|
||||
color: var(--text-secondary);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
transition: font-size 0.2s ease;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.lyric-empty[data-v-4abaac34] {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
body[data-v-4abaac34] {
|
||||
background-color: transparent !important;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
.lyric-content[data-v-4abaac34] {
|
||||
transition: font-size 0.2s ease;
|
||||
}
|
||||
.lyric-line-current[data-v-4abaac34] {
|
||||
opacity: 1;
|
||||
}
|
||||
.lyric_lock .control-bar .control-buttons .control-button[data-v-4abaac34]:not(:has(.ri-lock-line)):not(:has(.ri-lock-unlock-line)) {
|
||||
display: none;
|
||||
}
|
||||
.lyric_lock .control-bar .font-size-controls[data-v-4abaac34] {
|
||||
display: none;
|
||||
}
|
||||
.lyric_lock .control-bar .play-controls[data-v-4abaac34] {
|
||||
display: none;
|
||||
}
|
||||
.lyric_lock[data-v-4abaac34] {
|
||||
background: transparent;
|
||||
}
|
||||
.lyric_lock[data-v-4abaac34]:hover {
|
||||
background: transparent;
|
||||
}
|
||||
.lyric_lock #lyric-lock[data-v-4abaac34] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 72px;
|
||||
background: var(--control-bg);
|
||||
}
|
||||
Binary file not shown.
@@ -1,203 +0,0 @@
|
||||
import { ad as request, d as defineComponent, r as ref, G as computed, aq as onActivated, c as createElementBlock, n as normalizeClass, u as unref, a2 as normalizeStyle, b as createBaseVNode, t as toDisplayString, e as createVNode, f as withCtx, T as createCommentVNode, w as withDirectives, S as Scrollbar, ab as resolveDirective, g as useStore, h as useRouter, j as openBlock, s as setAnimationClass, a7 as getImgUrl, a3 as Fragment, a4 as renderList, U as PlayBottom, ac as isMobile, a5 as setAnimationDelay, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
import { M as MusicList, a as getListDetail } from "./MusicList-s-QHu-iA.js";
|
||||
import { S as SongItem } from "./SongItem-CoswpGn6.js";
|
||||
import { _ as __unplugin_components_2 } from "./Avatar-rQ2og-6c.js";
|
||||
import { N as NImage } from "./Image-DXClIklC.js";
|
||||
import "./Drawer-BEJ8Ydua.js";
|
||||
import "./Ellipsis-D4R5dIX2.js";
|
||||
import "./Tag-C0oC92WF.js";
|
||||
import "./use-locale-DLWAOXez.js";
|
||||
function getUserDetail(uid) {
|
||||
return request.get("/user/detail", { params: { uid } });
|
||||
}
|
||||
function getUserPlaylist(uid) {
|
||||
return request.get("/user/playlist", { params: { uid } });
|
||||
}
|
||||
function getUserRecord(uid, type = 0) {
|
||||
return request.get("/user/record", { params: { uid, type } });
|
||||
}
|
||||
const _hoisted_1 = { class: "user-page" };
|
||||
const _hoisted_2 = { class: "page" };
|
||||
const _hoisted_3 = { class: "user-name" };
|
||||
const _hoisted_4 = { class: "user-info" };
|
||||
const _hoisted_5 = { class: "user-info-list" };
|
||||
const _hoisted_6 = { class: "user-info-item" };
|
||||
const _hoisted_7 = { class: "label" };
|
||||
const _hoisted_8 = { class: "user-info-item" };
|
||||
const _hoisted_9 = { class: "label" };
|
||||
const _hoisted_10 = { class: "user-info-item" };
|
||||
const _hoisted_11 = { class: "label" };
|
||||
const _hoisted_12 = { class: "uesr-signature" };
|
||||
const _hoisted_13 = ["onClick"];
|
||||
const _hoisted_14 = { class: "play-list-item-info" };
|
||||
const _hoisted_15 = { class: "play-list-item-name" };
|
||||
const _hoisted_16 = { class: "play-list-item-count" };
|
||||
const _hoisted_17 = { class: "record-list" };
|
||||
const _hoisted_18 = { class: "play-count" };
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
...{
|
||||
name: "User"
|
||||
},
|
||||
__name: "index",
|
||||
setup(__props) {
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
const userDetail = ref();
|
||||
const playList = ref([]);
|
||||
const recordList = ref();
|
||||
const infoLoading = ref(false);
|
||||
const user = computed(() => store.state.user);
|
||||
const loadPage = async () => {
|
||||
if (!user.value) {
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
infoLoading.value = true;
|
||||
const { data: userData } = await getUserDetail(user.value.userId);
|
||||
userDetail.value = userData;
|
||||
const { data: playlistData } = await getUserPlaylist(user.value.userId);
|
||||
playList.value = playlistData.playlist;
|
||||
const { data: recordData } = await getUserRecord(user.value.userId);
|
||||
recordList.value = recordData.allData.map((item) => ({
|
||||
...item,
|
||||
...item.song,
|
||||
picUrl: item.song.al.picUrl
|
||||
}));
|
||||
infoLoading.value = false;
|
||||
};
|
||||
onActivated(() => {
|
||||
if (!user.value) {
|
||||
router.push("/login");
|
||||
} else {
|
||||
loadPage();
|
||||
}
|
||||
});
|
||||
const isShowList = ref(false);
|
||||
const list = ref();
|
||||
const listLoading = ref(false);
|
||||
const showPlaylist = async (id, name) => {
|
||||
isShowList.value = true;
|
||||
listLoading.value = true;
|
||||
list.value = {
|
||||
name
|
||||
};
|
||||
const { data } = await getListDetail(id);
|
||||
list.value = data.playlist;
|
||||
listLoading.value = false;
|
||||
};
|
||||
const handlePlay = () => {
|
||||
const tracks = recordList.value || [];
|
||||
store.commit("setPlayList", tracks);
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_avatar = __unplugin_components_2;
|
||||
const _component_n_image = NImage;
|
||||
const _component_n_scrollbar = Scrollbar;
|
||||
const _directive_loading = resolveDirective("loading");
|
||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
userDetail.value ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass(["left", unref(setAnimationClass)("animate__fadeInLeft")]),
|
||||
style: normalizeStyle({ backgroundImage: `url(${unref(getImgUrl)(user.value.backgroundUrl)})` })
|
||||
}, [
|
||||
createBaseVNode("div", _hoisted_2, [
|
||||
createBaseVNode("div", _hoisted_3, toDisplayString(user.value.nickname), 1),
|
||||
createBaseVNode("div", _hoisted_4, [
|
||||
createVNode(_component_n_avatar, {
|
||||
round: "",
|
||||
size: 50,
|
||||
src: unref(getImgUrl)(user.value.avatarUrl, "50y50")
|
||||
}, null, 8, ["src"]),
|
||||
createBaseVNode("div", _hoisted_5, [
|
||||
createBaseVNode("div", _hoisted_6, [
|
||||
createBaseVNode("div", _hoisted_7, toDisplayString(userDetail.value.profile.followeds), 1),
|
||||
_cache[1] || (_cache[1] = createBaseVNode("div", null, "粉丝", -1))
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_8, [
|
||||
createBaseVNode("div", _hoisted_9, toDisplayString(userDetail.value.profile.follows), 1),
|
||||
_cache[2] || (_cache[2] = createBaseVNode("div", null, "关注", -1))
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_10, [
|
||||
createBaseVNode("div", _hoisted_11, toDisplayString(userDetail.value.level), 1),
|
||||
_cache[3] || (_cache[3] = createBaseVNode("div", null, "等级", -1))
|
||||
])
|
||||
])
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_12, toDisplayString(userDetail.value.profile.signature), 1),
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["play-list", unref(setAnimationClass)("animate__fadeInLeft")])
|
||||
}, [
|
||||
_cache[4] || (_cache[4] = createBaseVNode("div", { class: "title" }, "创建的歌单", -1)),
|
||||
createVNode(_component_n_scrollbar, null, {
|
||||
default: withCtx(() => [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(playList.value, (item, index2) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: index2,
|
||||
class: "play-list-item",
|
||||
onClick: ($event) => showPlaylist(item.id, item.name)
|
||||
}, [
|
||||
createVNode(_component_n_image, {
|
||||
src: unref(getImgUrl)(item.coverImgUrl, "50y50"),
|
||||
class: "play-list-item-img",
|
||||
lazy: "",
|
||||
"preview-disabled": ""
|
||||
}, null, 8, ["src"]),
|
||||
createBaseVNode("div", _hoisted_14, [
|
||||
createBaseVNode("div", _hoisted_15, toDisplayString(item.name), 1),
|
||||
createBaseVNode("div", _hoisted_16, toDisplayString(item.trackCount) + "首，播放" + toDisplayString(item.playCount) + "次 ", 1)
|
||||
])
|
||||
], 8, _hoisted_13);
|
||||
}), 128)),
|
||||
createVNode(PlayBottom)
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
], 2)
|
||||
])
|
||||
], 6)) : createCommentVNode("", true),
|
||||
!unref(isMobile) ? withDirectives((openBlock(), createElementBlock("div", {
|
||||
key: 1,
|
||||
class: normalizeClass(["right", unref(setAnimationClass)("animate__fadeInRight")])
|
||||
}, [
|
||||
_cache[5] || (_cache[5] = createBaseVNode("div", { class: "title" }, "听歌排行", -1)),
|
||||
createBaseVNode("div", _hoisted_17, [
|
||||
createVNode(_component_n_scrollbar, null, {
|
||||
default: withCtx(() => [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(recordList.value, (item, index2) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: item.id,
|
||||
class: normalizeClass(["record-item", unref(setAnimationClass)("animate__bounceInUp")]),
|
||||
style: normalizeStyle(unref(setAnimationDelay)(index2, 25))
|
||||
}, [
|
||||
createVNode(SongItem, {
|
||||
class: "song-item",
|
||||
item,
|
||||
onPlay: handlePlay
|
||||
}, null, 8, ["item"]),
|
||||
createBaseVNode("div", _hoisted_18, toDisplayString(item.playCount) + "次", 1)
|
||||
], 6);
|
||||
}), 128)),
|
||||
createVNode(PlayBottom)
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
])
|
||||
], 2)), [
|
||||
[_directive_loading, infoLoading.value]
|
||||
]) : createCommentVNode("", true),
|
||||
createVNode(MusicList, {
|
||||
show: isShowList.value,
|
||||
"onUpdate:show": _cache[0] || (_cache[0] = ($event) => isShowList.value = $event),
|
||||
name: list.value?.name || "",
|
||||
"song-list": list.value?.tracks || [],
|
||||
"list-info": list.value,
|
||||
loading: listLoading.value
|
||||
}, null, 8, ["show", "name", "song-list", "list-info", "loading"])
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-be63ae6f"]]);
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
Binary file not shown.
@@ -1,233 +0,0 @@
|
||||
import { d as defineComponent, r as ref, G as computed, o as onMounted, E as watch, c as createElementBlock, b as createBaseVNode, e as createVNode, f as withCtx, u as unref, i as isRef, af as useRoute, S as Scrollbar, a5 as setAnimationDelay, ab as resolveDirective, j as openBlock, ah as withModifiers, a3 as Fragment, a4 as renderList, n as normalizeClass, s as setAnimationClass, a2 as normalizeStyle, t as toDisplayString, w as withDirectives, a7 as getImgUrl, ai as formatNumber, T as createCommentVNode, aj as __unplugin_components_0, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
import { g as getPlaylistCategory } from "./home-BXGE9AqN.js";
|
||||
import { M as MusicList, b as getListByCat, a as getListDetail } from "./MusicList-s-QHu-iA.js";
|
||||
import { N as NImage } from "./Image-DXClIklC.js";
|
||||
import "./SongItem-CoswpGn6.js";
|
||||
import "./Ellipsis-D4R5dIX2.js";
|
||||
import "./Drawer-BEJ8Ydua.js";
|
||||
import "./Avatar-rQ2og-6c.js";
|
||||
import "./Tag-C0oC92WF.js";
|
||||
import "./use-locale-DLWAOXez.js";
|
||||
const _hoisted_1 = { class: "list-page" };
|
||||
const _hoisted_2 = { class: "play-list-type" };
|
||||
const _hoisted_3 = ["onClick"];
|
||||
const _hoisted_4 = { class: "recommend-list" };
|
||||
const _hoisted_5 = ["onClick"];
|
||||
const _hoisted_6 = { class: "recommend-item-img" };
|
||||
const _hoisted_7 = { class: "top" };
|
||||
const _hoisted_8 = { class: "play-count" };
|
||||
const _hoisted_9 = { class: "recommend-item-title" };
|
||||
const _hoisted_10 = {
|
||||
key: 0,
|
||||
class: "loading-more"
|
||||
};
|
||||
const _hoisted_11 = {
|
||||
key: 1,
|
||||
class: "no-more"
|
||||
};
|
||||
const TOTAL_ITEMS = 42;
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
...{
|
||||
name: "List"
|
||||
},
|
||||
__name: "index",
|
||||
setup(__props) {
|
||||
const recommendList = ref([]);
|
||||
const showMusic = ref(false);
|
||||
const page = ref(0);
|
||||
const hasMore = ref(true);
|
||||
const isLoadingMore = ref(false);
|
||||
const getItemAnimationDelay = (index2) => {
|
||||
const currentPageIndex = index2 % TOTAL_ITEMS;
|
||||
return setAnimationDelay(currentPageIndex, 30);
|
||||
};
|
||||
const recommendItem = ref();
|
||||
const listDetail = ref();
|
||||
const listLoading = ref(true);
|
||||
const selectRecommendItem = async (item) => {
|
||||
listLoading.value = true;
|
||||
recommendItem.value = null;
|
||||
listDetail.value = null;
|
||||
showMusic.value = true;
|
||||
recommendItem.value = item;
|
||||
const { data } = await getListDetail(item.id);
|
||||
listDetail.value = data;
|
||||
listLoading.value = false;
|
||||
};
|
||||
const route = useRoute();
|
||||
const listTitle = ref(route.query.type || "歌单列表");
|
||||
const loading = ref(false);
|
||||
const loadList = async (type, isLoadMore = false) => {
|
||||
if (!hasMore.value && isLoadMore) return;
|
||||
if (isLoadMore) {
|
||||
isLoadingMore.value = true;
|
||||
} else {
|
||||
loading.value = true;
|
||||
page.value = 0;
|
||||
recommendList.value = [];
|
||||
}
|
||||
try {
|
||||
const params = {
|
||||
cat: type === "每日推荐" ? "" : type,
|
||||
limit: TOTAL_ITEMS,
|
||||
offset: page.value * TOTAL_ITEMS
|
||||
};
|
||||
const { data } = await getListByCat(params);
|
||||
if (isLoadMore) {
|
||||
recommendList.value.push(...data.playlists);
|
||||
} else {
|
||||
recommendList.value = data.playlists;
|
||||
}
|
||||
hasMore.value = data.more;
|
||||
page.value++;
|
||||
} catch (error) {
|
||||
console.error("加载歌单列表失败:", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
isLoadingMore.value = false;
|
||||
}
|
||||
};
|
||||
const handleScroll = (e) => {
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.target;
|
||||
if (scrollTop + clientHeight >= scrollHeight - 100 && !isLoadingMore.value && hasMore.value) {
|
||||
loadList(route.query.type, true);
|
||||
}
|
||||
};
|
||||
const playlistCategory = ref();
|
||||
const currentType = ref(route.query.type || "每日推荐");
|
||||
const getAnimationDelay = computed(() => {
|
||||
return (index2) => setAnimationDelay(index2, 30);
|
||||
});
|
||||
const loadPlaylistCategory = async () => {
|
||||
const { data } = await getPlaylistCategory();
|
||||
playlistCategory.value = {
|
||||
...data,
|
||||
sub: [
|
||||
{
|
||||
name: "每日推荐",
|
||||
category: 0
|
||||
},
|
||||
...data.sub
|
||||
]
|
||||
};
|
||||
};
|
||||
const handleClickPlaylistType = (type) => {
|
||||
currentType.value = type;
|
||||
listTitle.value = type;
|
||||
loading.value = true;
|
||||
loadList(type);
|
||||
};
|
||||
const scrollbarRef = ref();
|
||||
const handleWheel = (e) => {
|
||||
const scrollbar = scrollbarRef.value;
|
||||
if (scrollbar) {
|
||||
const delta = e.deltaY || e.detail;
|
||||
scrollbar.scrollBy({ left: delta });
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
loadPlaylistCategory();
|
||||
currentType.value = route.query.type || currentType.value;
|
||||
loadList(currentType.value);
|
||||
});
|
||||
watch(
|
||||
() => route.query,
|
||||
async (newParams) => {
|
||||
if (newParams.type) {
|
||||
recommendList.value = [];
|
||||
listTitle.value = newParams.type || "歌单列表";
|
||||
currentType.value = newParams.type;
|
||||
loading.value = true;
|
||||
loadList(newParams.type);
|
||||
}
|
||||
}
|
||||
);
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_scrollbar = Scrollbar;
|
||||
const _component_n_image = NImage;
|
||||
const _component_n_spin = __unplugin_components_0;
|
||||
const _directive_loading = resolveDirective("loading");
|
||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
createBaseVNode("div", _hoisted_2, [
|
||||
createVNode(_component_n_scrollbar, {
|
||||
ref_key: "scrollbarRef",
|
||||
ref: scrollbarRef,
|
||||
"x-scrollable": ""
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", {
|
||||
class: "categories-wrapper",
|
||||
onWheel: withModifiers(handleWheel, ["prevent"])
|
||||
}, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(playlistCategory)?.sub, (item, index2) => {
|
||||
return openBlock(), createElementBlock("span", {
|
||||
key: item.name,
|
||||
class: normalizeClass(["play-list-type-item", [unref(setAnimationClass)("animate__bounceIn"), { active: unref(currentType) === item.name }]]),
|
||||
style: normalizeStyle(unref(getAnimationDelay)(index2)),
|
||||
onClick: ($event) => handleClickPlaylistType(item.name)
|
||||
}, toDisplayString(item.name), 15, _hoisted_3);
|
||||
}), 128))
|
||||
], 32)
|
||||
]),
|
||||
_: 1
|
||||
}, 512)
|
||||
]),
|
||||
createVNode(_component_n_scrollbar, {
|
||||
class: "recommend",
|
||||
size: 100,
|
||||
onScroll: handleScroll
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
withDirectives((openBlock(), createElementBlock("div", _hoisted_4, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(recommendList), (item, index2) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: item.id,
|
||||
class: normalizeClass(["recommend-item", unref(setAnimationClass)("animate__bounceIn")]),
|
||||
style: normalizeStyle(getItemAnimationDelay(index2)),
|
||||
onClick: withModifiers(($event) => selectRecommendItem(item), ["stop"])
|
||||
}, [
|
||||
createBaseVNode("div", _hoisted_6, [
|
||||
createVNode(_component_n_image, {
|
||||
class: "recommend-item-img-img",
|
||||
src: unref(getImgUrl)(item.picUrl || item.coverImgUrl, "200y200"),
|
||||
width: "200",
|
||||
height: "200",
|
||||
lazy: "",
|
||||
"preview-disabled": ""
|
||||
}, null, 8, ["src"]),
|
||||
createBaseVNode("div", _hoisted_7, [
|
||||
createBaseVNode("div", _hoisted_8, toDisplayString(unref(formatNumber)(item.playCount)), 1),
|
||||
_cache[2] || (_cache[2] = createBaseVNode("i", { class: "iconfont icon-videofill" }, null, -1))
|
||||
])
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_9, toDisplayString(item.name), 1)
|
||||
], 14, _hoisted_5);
|
||||
}), 128))
|
||||
])), [
|
||||
[_directive_loading, unref(loading)]
|
||||
]),
|
||||
unref(isLoadingMore) ? (openBlock(), createElementBlock("div", _hoisted_10, [
|
||||
createVNode(_component_n_spin, { size: "small" }),
|
||||
_cache[3] || (_cache[3] = createBaseVNode("span", { class: "ml-2" }, "加载中...", -1))
|
||||
])) : createCommentVNode("", true),
|
||||
!unref(hasMore) && unref(recommendList).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_11, "没有更多了")) : createCommentVNode("", true)
|
||||
]),
|
||||
_: 1
|
||||
}),
|
||||
createVNode(MusicList, {
|
||||
show: unref(showMusic),
|
||||
"onUpdate:show": _cache[0] || (_cache[0] = ($event) => isRef(showMusic) ? showMusic.value = $event : null),
|
||||
loading: unref(listLoading),
|
||||
"onUpdate:loading": _cache[1] || (_cache[1] = ($event) => isRef(listLoading) ? listLoading.value = $event : null),
|
||||
name: unref(recommendItem)?.name || "",
|
||||
"song-list": unref(listDetail)?.playlist.tracks || [],
|
||||
"list-info": unref(listDetail)?.playlist
|
||||
}, null, 8, ["show", "loading", "name", "song-list", "list-info"])
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f9f1189c"]]);
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
Binary file not shown.
@@ -1,336 +0,0 @@
|
||||
.title[data-v-686a7f41] {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.title[data-v-686a7f41]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.play-list-type[data-v-686a7f41] {
|
||||
width: 250px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.play-list-type-item[data-v-686a7f41], .play-list-type-showall[data-v-686a7f41] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.play-list-type-item[data-v-686a7f41]:is(.dark *), .play-list-type-showall[data-v-686a7f41]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.play-list-type-item[data-v-686a7f41], .play-list-type-showall[data-v-686a7f41] {
|
||||
margin-right: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-radius: 0.75rem;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.play-list-type-item[data-v-686a7f41]:hover, .play-list-type-showall[data-v-686a7f41]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.play-list-type-item[data-v-686a7f41]:is(.dark *), .play-list-type-showall[data-v-686a7f41]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.play-list-type-showall[data-v-686a7f41] {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.mobile .play-list-type[data-v-686a7f41] {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
width: 100%;
|
||||
}.recommend-album[data-v-1df7dbee] {
|
||||
margin-left: 1.25rem;
|
||||
margin-right: 1.25rem;
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
.recommend-album .title[data-v-1df7dbee] {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.recommend-album .title[data-v-1df7dbee]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.recommend-album .recommend-album-list[data-v-1df7dbee] {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.recommend-album .recommend-album-list-item[data-v-1df7dbee] {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
.recommend-album .recommend-album-list-item-img[data-v-1df7dbee] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 0.75rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.recommend-album .recommend-album-list-item:hover img[data-v-1df7dbee] {
|
||||
filter: brightness(50%);
|
||||
}
|
||||
.recommend-album .recommend-album-list-item-content[data-v-1df7dbee] {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.6;
|
||||
padding: 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
opacity: 0;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.recommend-album .recommend-album-list-item-content[data-v-1df7dbee]:is(.dark *) {
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.6;
|
||||
}
|
||||
.recommend-album .recommend-album-list-item-content[data-v-1df7dbee]:hover {
|
||||
opacity: 1;
|
||||
}.recommend-singer-list[data-v-f8da161d] {
|
||||
display: flex;
|
||||
height: 280px;
|
||||
}
|
||||
.recommend-singer-item[data-v-f8da161d] {
|
||||
margin-right: 1.25rem;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1 1 0%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
border-radius: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.recommend-singer-item-bg[data-v-f8da161d] {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 1.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.recommend-singer-item-bg[data-v-f8da161d]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.recommend-singer-item-bg[data-v-f8da161d] {
|
||||
filter: brightness(60%);
|
||||
}
|
||||
.recommend-singer-item-info[data-v-f8da161d] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.recommend-singer-item-info-play[data-v-f8da161d] {
|
||||
display: flex;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 9999px;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.recommend-singer-item-info-play[data-v-f8da161d]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.recommend-singer-item-info-name[data-v-f8da161d] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.recommend-singer-item-info-name[data-v-f8da161d]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.recommend-singer-item-count[data-v-f8da161d] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.recommend-singer-item-count[data-v-f8da161d]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mobile .recommend-singer-list[data-v-f8da161d] {
|
||||
height: 180px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.mobile .recommend-singer-item[data-v-f8da161d] {
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
.mobile .recommend-singer-item-bg[data-v-f8da161d] {
|
||||
border-radius: 0.75rem;
|
||||
}.title[data-v-ae2da107] {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.title[data-v-ae2da107]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.recommend-music[data-v-ae2da107] {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.recommend-music .text-ellipsis[data-v-ae2da107] {
|
||||
width: 100%;
|
||||
}
|
||||
.recommend-music-list[data-v-ae2da107] {
|
||||
width: 100%;
|
||||
border-radius: 1.5rem;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.recommend-music-list[data-v-ae2da107]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}.main-page[data-v-b0ca1b97] {
|
||||
|
||||
height: 100%;
|
||||
|
||||
width: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
--tw-bg-opacity: 1;
|
||||
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.main-page[data-v-b0ca1b97]:is(.dark *) {
|
||||
|
||||
--tw-bg-opacity: 1;
|
||||
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.main-content[data-v-b0ca1b97] {
|
||||
|
||||
margin-top: 1.5rem;
|
||||
|
||||
margin-bottom: 7rem;
|
||||
|
||||
display: flex
|
||||
}
|
||||
.mobile .main-content[data-v-b0ca1b97] {
|
||||
|
||||
margin-left: 1rem;
|
||||
|
||||
margin-right: 1rem;
|
||||
|
||||
flex-direction: column
|
||||
}
|
||||
.mobile[data-v-b0ca1b97] .favorite-page {
|
||||
|
||||
margin-left: 1rem;
|
||||
|
||||
margin-right: 1rem;
|
||||
|
||||
height: 100%;
|
||||
|
||||
padding: 0px
|
||||
}
|
||||
[data-v-b0ca1b97] .favorite-page {
|
||||
|
||||
margin-left: 1rem;
|
||||
|
||||
margin-right: 1rem;
|
||||
|
||||
height: 300px;
|
||||
|
||||
padding: 0px
|
||||
}
|
||||
[data-v-b0ca1b97] .favorite-page .favorite-header {
|
||||
|
||||
margin-bottom: 0px !important;
|
||||
|
||||
padding-left: 0px !important;
|
||||
|
||||
padding-right: 0px !important
|
||||
}
|
||||
[data-v-b0ca1b97] .favorite-page .favorite-header h2 {
|
||||
|
||||
font-size: 1.125rem;
|
||||
|
||||
line-height: 1.75rem;
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
--tw-text-opacity: 1;
|
||||
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
[data-v-b0ca1b97] .favorite-page .favorite-header h2:is(.dark *) {
|
||||
|
||||
--tw-text-opacity: 1;
|
||||
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
[data-v-b0ca1b97] .favorite-page .favorite-list {
|
||||
|
||||
padding-left: 0px !important;
|
||||
|
||||
padding-right: 0px !important
|
||||
}
|
||||
Binary file not shown.
@@ -1,44 +0,0 @@
|
||||
.history-page[data-v-7e434221] {height: 100%;width: 100%;padding-top: 0.5rem;--tw-bg-opacity: 1;background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
|
||||
}.history-page[data-v-7e434221]:is(.dark *) {--tw-bg-opacity: 1;background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.history-page .title[data-v-7e434221] {padding-right: 1rem;padding-left: 1rem;padding-bottom: 0.5rem;font-size: 1.25rem;line-height: 1.75rem;font-weight: 700;--tw-text-opacity: 1;color: rgb(17 24 39 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.history-page .title[data-v-7e434221]:is(.dark *) {--tw-text-opacity: 1;color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.history-page .history-list-content[data-v-7e434221] {margin-top: 0.5rem;padding-left: 1rem;padding-right: 1rem;padding-bottom: 7rem
|
||||
}
|
||||
.history-page .history-list-content .history-item[data-v-7e434221] {display: flex;align-items: center;justify-content: space-between
|
||||
}
|
||||
.history-page .history-list-content .history-item-content[data-v-7e434221] {flex: 1 1 0%
|
||||
}
|
||||
.history-page .history-list-content .history-item-count[data-v-7e434221] {padding-left: 1rem;padding-right: 1rem;text-align: center;font-size: 1.125rem;line-height: 1.75rem;--tw-text-opacity: 1;color: rgb(75 85 99 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.history-page .history-list-content .history-item-count[data-v-7e434221]:is(.dark *) {--tw-text-opacity: 1;color: rgb(156 163 175 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.history-page .history-list-content .history-item-delete[data-v-7e434221] {display: flex;height: 2rem;width: 2rem;cursor: pointer;align-items: center;justify-content: center;border-radius: 9999px;border-width: 2px;--tw-border-opacity: 1;border-color: rgb(156 163 175 / var(--tw-border-opacity, 1))
|
||||
}
|
||||
.history-page .history-list-content .history-item-delete[data-v-7e434221]:is(.dark *) {--tw-border-opacity: 1;border-color: rgb(75 85 99 / var(--tw-border-opacity, 1))
|
||||
}
|
||||
.history-page .history-list-content .history-item-delete[data-v-7e434221] {--tw-text-opacity: 1;color: rgb(75 85 99 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.history-page .history-list-content .history-item-delete[data-v-7e434221]:is(.dark *) {--tw-text-opacity: 1;color: rgb(156 163 175 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.history-page .history-list-content .history-item-delete[data-v-7e434221]:hover {--tw-border-opacity: 1;border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color: rgb(239 68 68 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.loading-wrapper[data-v-7e434221] {display: flex;align-items: center;justify-content: center;padding-top: 2rem;padding-bottom: 2rem
|
||||
}
|
||||
.no-more-tip[data-v-7e434221] {padding-top: 1rem;padding-bottom: 1rem;text-align: center;font-size: 0.875rem;line-height: 1.25rem;--tw-text-opacity: 1;color: rgb(107 114 128 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.no-more-tip[data-v-7e434221]:is(.dark *) {--tw-text-opacity: 1;color: rgb(156 163 175 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.flex-item[data-v-36d023b3] {
|
||||
flex: 1 1 0%;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.flex-item[data-v-36d023b3]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(22 22 22 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
Binary file not shown.
@@ -1,276 +0,0 @@
|
||||
import { ad as request, d as defineComponent, r as ref, g as useStore, j as openBlock, c as createElementBlock, b as createBaseVNode, e as createVNode, u as unref, a7 as getImgUrl, T as createCommentVNode, t as toDisplayString, O as createBlock, i as isRef, n as normalizeClass, ae as audioService, _ as _export_sfc, G as computed, o as onMounted, E as watch, f as withCtx, af as useRoute, ag as useDateFormat, ab as resolveDirective, ac as isMobile, a3 as Fragment, a4 as renderList, s as setAnimationClass, a2 as normalizeStyle, a5 as setAnimationDelay, ah as withModifiers, k as createTextVNode, w as withDirectives } from "./index-DKaFsuse.js";
|
||||
import { e as getHotSearch } from "./home-BXGE9AqN.js";
|
||||
import { S as SongItem } from "./SongItem-CoswpGn6.js";
|
||||
import { M as MusicList, g as getAlbum, a as getListDetail } from "./MusicList-s-QHu-iA.js";
|
||||
import { M as MvPlayer } from "./MvPlayer-I4IDK1xL.js";
|
||||
import { N as NImage } from "./Image-DXClIklC.js";
|
||||
import { _ as __unplugin_components_1 } from "./Layout-CvYBg1vI.js";
|
||||
import "./Ellipsis-D4R5dIX2.js";
|
||||
import "./Drawer-BEJ8Ydua.js";
|
||||
import "./Avatar-rQ2og-6c.js";
|
||||
import "./Tag-C0oC92WF.js";
|
||||
import "./Icon-DucaliTK.js";
|
||||
import "./Slider-BA6NituQ.js";
|
||||
import "./use-locale-DLWAOXez.js";
|
||||
const getSearch = (params) => {
|
||||
return request.get("/cloudsearch", {
|
||||
params
|
||||
});
|
||||
};
|
||||
const _hoisted_1$1 = { class: "search-item-img" };
|
||||
const _hoisted_2$1 = {
|
||||
key: 0,
|
||||
class: "play"
|
||||
};
|
||||
const _hoisted_3$1 = { class: "search-item-info" };
|
||||
const _hoisted_4$1 = { class: "search-item-name" };
|
||||
const _hoisted_5$1 = { class: "search-item-artist" };
|
||||
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
||||
__name: "SearchItem",
|
||||
props: {
|
||||
item: {}
|
||||
},
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const songList = ref([]);
|
||||
const showPop = ref(false);
|
||||
const listInfo = ref(null);
|
||||
const getCurrentMv = () => {
|
||||
return {
|
||||
id: props.item.id,
|
||||
name: props.item.name
|
||||
};
|
||||
};
|
||||
const store = useStore();
|
||||
const handleClick = async () => {
|
||||
listInfo.value = null;
|
||||
if (props.item.type === "专辑") {
|
||||
showPop.value = true;
|
||||
const res = await getAlbum(props.item.id);
|
||||
songList.value = res.data.songs.map((song) => {
|
||||
song.al.picUrl = song.al.picUrl || props.item.picUrl;
|
||||
return song;
|
||||
});
|
||||
listInfo.value = {
|
||||
...res.data.album,
|
||||
creator: {
|
||||
avatarUrl: res.data.album.artist.img1v1Url,
|
||||
nickname: `${res.data.album.artist.name} - ${res.data.album.company}`
|
||||
},
|
||||
description: res.data.album.description
|
||||
};
|
||||
}
|
||||
if (props.item.type === "playlist") {
|
||||
showPop.value = true;
|
||||
const res = await getListDetail(props.item.id);
|
||||
songList.value = res.data.playlist.tracks;
|
||||
listInfo.value = res.data.playlist;
|
||||
}
|
||||
if (props.item.type === "mv") {
|
||||
store.commit("setIsPlay", false);
|
||||
store.commit("setPlayMusic", false);
|
||||
audioService.getCurrentSound()?.pause();
|
||||
showPop.value = true;
|
||||
}
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_image = NImage;
|
||||
return openBlock(), createElementBlock("div", {
|
||||
class: normalizeClass(["search-item", _ctx.item.type]),
|
||||
onClick: handleClick
|
||||
}, [
|
||||
createBaseVNode("div", _hoisted_1$1, [
|
||||
createVNode(_component_n_image, {
|
||||
src: unref(getImgUrl)(_ctx.item.picUrl, _ctx.item.type === "mv" ? "320y180" : "100y100"),
|
||||
lazy: "",
|
||||
"preview-disabled": ""
|
||||
}, null, 8, ["src"]),
|
||||
_ctx.item.type === "mv" ? (openBlock(), createElementBlock("div", _hoisted_2$1, _cache[2] || (_cache[2] = [
|
||||
createBaseVNode("i", { class: "iconfont icon icon-play" }, null, -1)
|
||||
]))) : createCommentVNode("", true)
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_3$1, [
|
||||
createBaseVNode("p", _hoisted_4$1, toDisplayString(_ctx.item.name), 1),
|
||||
createBaseVNode("p", _hoisted_5$1, toDisplayString(_ctx.item.desc), 1)
|
||||
]),
|
||||
["专辑", "playlist"].includes(_ctx.item.type) ? (openBlock(), createBlock(MusicList, {
|
||||
key: 0,
|
||||
show: unref(showPop),
|
||||
"onUpdate:show": _cache[0] || (_cache[0] = ($event) => isRef(showPop) ? showPop.value = $event : null),
|
||||
name: _ctx.item.name,
|
||||
"song-list": unref(songList),
|
||||
"list-info": unref(listInfo),
|
||||
cover: false
|
||||
}, null, 8, ["show", "name", "song-list", "list-info"])) : createCommentVNode("", true),
|
||||
_ctx.item.type === "mv" ? (openBlock(), createBlock(MvPlayer, {
|
||||
key: 1,
|
||||
show: unref(showPop),
|
||||
"onUpdate:show": _cache[1] || (_cache[1] = ($event) => isRef(showPop) ? showPop.value = $event : null),
|
||||
"current-mv": getCurrentMv(),
|
||||
"no-list": ""
|
||||
}, null, 8, ["show", "current-mv"])) : createCommentVNode("", true)
|
||||
], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
const SearchItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-3449f610"]]);
|
||||
const _hoisted_1 = { class: "search-page" };
|
||||
const _hoisted_2 = { class: "hot-search-list" };
|
||||
const _hoisted_3 = ["onClick"];
|
||||
const _hoisted_4 = { class: "title" };
|
||||
const _hoisted_5 = { class: "search-list-box" };
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
...{
|
||||
name: "Search"
|
||||
},
|
||||
__name: "index",
|
||||
setup(__props) {
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
const searchDetail = ref();
|
||||
const searchType = computed(() => store.state.searchType);
|
||||
const searchDetailLoading = ref(false);
|
||||
const hotSearchData = ref();
|
||||
const loadHotSearch = async () => {
|
||||
const { data } = await getHotSearch();
|
||||
hotSearchData.value = data;
|
||||
};
|
||||
onMounted(() => {
|
||||
loadHotSearch();
|
||||
loadSearch(route.query.keyword);
|
||||
});
|
||||
const hotKeyword = ref(route.query.keyword || "搜索列表");
|
||||
watch(
|
||||
() => store.state.searchValue,
|
||||
(value) => {
|
||||
loadSearch(value);
|
||||
}
|
||||
);
|
||||
const dateFormat = (time) => useDateFormat(time, "YYYY.MM.DD").value;
|
||||
const loadSearch = async (keywords, type = null) => {
|
||||
hotKeyword.value = keywords;
|
||||
searchDetail.value = void 0;
|
||||
if (!keywords) return;
|
||||
searchDetailLoading.value = true;
|
||||
const { data } = await getSearch({ keywords, type: type || searchType.value });
|
||||
const songs = data.result.songs || [];
|
||||
const albums = data.result.albums || [];
|
||||
const mvs = (data.result.mvs || []).map((item) => ({
|
||||
...item,
|
||||
picUrl: item.cover,
|
||||
playCount: item.playCount,
|
||||
desc: item.artists.map((artist) => artist.name).join("/"),
|
||||
type: "mv"
|
||||
}));
|
||||
const playlists = (data.result.playlists || []).map((item) => ({
|
||||
...item,
|
||||
picUrl: item.coverImgUrl,
|
||||
playCount: item.playCount,
|
||||
desc: item.creator.nickname,
|
||||
type: "playlist"
|
||||
}));
|
||||
songs.forEach((item) => {
|
||||
item.picUrl = item.al.picUrl;
|
||||
item.artists = item.ar;
|
||||
});
|
||||
albums.forEach((item) => {
|
||||
item.desc = `${item.artist.name} ${item.company} ${dateFormat(item.publishTime)}`;
|
||||
});
|
||||
searchDetail.value = {
|
||||
songs,
|
||||
albums,
|
||||
mvs,
|
||||
playlists
|
||||
};
|
||||
searchDetailLoading.value = false;
|
||||
};
|
||||
watch(
|
||||
() => route.path,
|
||||
async (path) => {
|
||||
if (path === "/search") {
|
||||
store.state.searchValue = route.query.keyword;
|
||||
}
|
||||
}
|
||||
);
|
||||
const handlePlay = () => {
|
||||
const tracks = searchDetail.value?.songs || [];
|
||||
store.commit("setPlayList", tracks);
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_layout = __unplugin_components_1;
|
||||
const _directive_loading = resolveDirective("loading");
|
||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
(unref(isMobile) ? !searchDetail.value : true) ? (openBlock(), createBlock(_component_n_layout, {
|
||||
key: 0,
|
||||
class: normalizeClass(["hot-search", unref(setAnimationClass)("animate__fadeInDown")]),
|
||||
"native-scrollbar": false
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
_cache[0] || (_cache[0] = createBaseVNode("div", { class: "title" }, "热搜列表", -1)),
|
||||
createBaseVNode("div", _hoisted_2, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(hotSearchData.value?.data, (item, index2) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: index2,
|
||||
class: normalizeClass([unref(setAnimationClass)("animate__bounceInLeft"), "hot-search-item"]),
|
||||
style: normalizeStyle(unref(setAnimationDelay)(index2, 10)),
|
||||
onClick: withModifiers(($event) => loadSearch(item.searchWord, 1), ["stop"])
|
||||
}, [
|
||||
createBaseVNode("span", {
|
||||
class: normalizeClass(["hot-search-item-count", { "hot-search-item-count-3": index2 < 3 }])
|
||||
}, toDisplayString(index2 + 1), 3),
|
||||
createTextVNode(" " + toDisplayString(item.searchWord), 1)
|
||||
], 14, _hoisted_3);
|
||||
}), 128))
|
||||
])
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["class"])) : createCommentVNode("", true),
|
||||
(unref(isMobile) ? searchDetail.value : true) ? (openBlock(), createBlock(_component_n_layout, {
|
||||
key: 1,
|
||||
class: normalizeClass(["search-list", unref(setAnimationClass)("animate__fadeInUp")]),
|
||||
"native-scrollbar": false
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", _hoisted_4, toDisplayString(hotKeyword.value), 1),
|
||||
withDirectives((openBlock(), createElementBlock("div", _hoisted_5, [
|
||||
searchDetail.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(searchDetail.value?.songs, (item, index2) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: item.id,
|
||||
class: normalizeClass(unref(setAnimationClass)("animate__bounceInRight")),
|
||||
style: normalizeStyle(unref(setAnimationDelay)(index2, 50))
|
||||
}, [
|
||||
createVNode(SongItem, {
|
||||
item,
|
||||
onPlay: handlePlay
|
||||
}, null, 8, ["item"])
|
||||
], 6);
|
||||
}), 128)),
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(searchDetail.value, (list, key) => {
|
||||
return openBlock(), createElementBlock(Fragment, null, [
|
||||
key.toString() !== "songs" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(list, (item, index2) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: item.id,
|
||||
class: normalizeClass(unref(setAnimationClass)("animate__bounceInRight")),
|
||||
style: normalizeStyle(unref(setAnimationDelay)(index2, 50))
|
||||
}, [
|
||||
createVNode(SearchItem, { item }, null, 8, ["item"])
|
||||
], 6);
|
||||
}), 128)) : createCommentVNode("", true)
|
||||
], 64);
|
||||
}), 256))
|
||||
], 64)) : createCommentVNode("", true)
|
||||
])), [
|
||||
[_directive_loading, searchDetailLoading.value]
|
||||
])
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["class"])) : createCommentVNode("", true)
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-254ebbc1"]]);
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
Binary file not shown.
@@ -1,197 +0,0 @@
|
||||
.user-page[data-v-be63ae6f] {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
.user-page .left[data-v-be63ae6f] {
|
||||
max-width: 600px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
flex: 1 1 0%;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.user-page .left[data-v-be63ae6f]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.user-page .left .page[data-v-be63ae6f] {
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.4;
|
||||
}
|
||||
.user-page .left .title[data-v-be63ae6f] {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.user-page .left .title[data-v-be63ae6f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.user-page .left .user-name[data-v-be63ae6f] {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
--tw-text-opacity: 0.7;
|
||||
}
|
||||
.user-page .left .uesr-signature[data-v-be63ae6f] {
|
||||
margin-top: 1rem;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
--tw-text-opacity: 0.7;
|
||||
}
|
||||
.user-page .left .user-info[data-v-be63ae6f] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.user-page .left .user-info-list[data-v-be63ae6f] {
|
||||
display: flex;
|
||||
width: 40%;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
--tw-text-opacity: 0.7;
|
||||
}
|
||||
.user-page .left .user-info-list .label[data-v-be63ae6f] {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.user-page .right[data-v-be63ae6f] {
|
||||
margin-left: 1rem;
|
||||
height: 100%;
|
||||
flex: 1 1 0%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.user-page .right .record-list[data-v-be63ae6f] {
|
||||
border-radius: 1rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.user-page .right .record-list[data-v-be63ae6f]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.user-page .right .record-list[data-v-be63ae6f] {
|
||||
height: calc(100% - 3.75rem);
|
||||
}
|
||||
.user-page .right .record-list .record-item[data-v-be63ae6f] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.user-page .right .record-list .song-item[data-v-be63ae6f] {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
.user-page .right .record-list .play-count[data-v-be63ae6f] {
|
||||
margin-left: 1rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.user-page .right .record-list .play-count[data-v-be63ae6f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.user-page .right .title[data-v-be63ae6f] {
|
||||
margin: 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.user-page .right .title[data-v-be63ae6f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.play-list[data-v-be63ae6f] {
|
||||
margin-top: 1rem;
|
||||
flex: 1 1 0%;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.play-list[data-v-be63ae6f]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.play-list-title[data-v-be63ae6f] {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.play-list-title[data-v-be63ae6f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.play-list-item[data-v-be63ae6f] {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
border-radius: 0.75rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
.play-list-item[data-v-be63ae6f]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(233 236 239 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.play-list-item[data-v-be63ae6f]:hover:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(45 45 45 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.play-list-item-img[data-v-be63ae6f] {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
.play-list-item-info[data-v-be63ae6f] {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.play-list-item-name[data-v-be63ae6f] {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.play-list-item-name[data-v-be63ae6f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.play-list-item-count[data-v-be63ae6f] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.play-list-item-count[data-v-be63ae6f]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mobile .user-page[data-v-be63ae6f] {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
@@ -1,172 +0,0 @@
|
||||
.search-item[data-v-3449f610] {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.75rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}.search-item[data-v-3449f610]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(233 236 239 / var(--tw-bg-opacity, 1));
|
||||
}.search-item[data-v-3449f610]:hover:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
|
||||
}.search-item[data-v-3449f610] {
|
||||
margin: 0 10px;
|
||||
}
|
||||
.search-item .search-item-img[data-v-3449f610] {
|
||||
margin-right: 1rem;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.search-item .search-item-info[data-v-3449f610] {
|
||||
flex: 1 1 0%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.search-item .search-item-info-name[data-v-3449f610] {
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.search-item .search-item-info-artist[data-v-3449f610] {
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mv:hover .play[data-v-3449f610] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.mv .search-item-img[data-v-3449f610] {
|
||||
width: 160px;
|
||||
height: 90px;
|
||||
position: relative;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.mv .play[data-v-3449f610] {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
--tw-translate-x: -50%;
|
||||
--tw-translate-y: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.mv .play .icon[data-v-3449f610] {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}.search-page[data-v-254ebbc1] {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
.hot-search[data-v-254ebbc1] {
|
||||
margin-right: 1rem;
|
||||
flex: 1 1 0%;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.hot-search[data-v-254ebbc1]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(22 22 22 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.hot-search[data-v-254ebbc1] {
|
||||
animation-duration: 0.2s;
|
||||
min-width: 400px;
|
||||
height: 100%;
|
||||
}
|
||||
.hot-search-list[data-v-254ebbc1] {
|
||||
padding-bottom: 7rem;
|
||||
}
|
||||
.hot-search-item[data-v-254ebbc1] {
|
||||
cursor: pointer;
|
||||
border-radius: 0.75rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.hot-search-item[data-v-254ebbc1]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.hot-search-item[data-v-254ebbc1] {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.hot-search-item[data-v-254ebbc1]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.hot-search-item[data-v-254ebbc1]:hover:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(45 45 45 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.hot-search-item-count[data-v-254ebbc1] {
|
||||
margin-left: 0.75rem;
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.hot-search-item-count-3[data-v-254ebbc1] {
|
||||
margin-left: 0.75rem;
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.search-list[data-v-254ebbc1] {
|
||||
flex: 1 1 0%;
|
||||
border-radius: 0.75rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.search-list[data-v-254ebbc1]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(22 22 22 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.search-list[data-v-254ebbc1] {
|
||||
height: 100%;
|
||||
}
|
||||
.search-list-box[data-v-254ebbc1] {
|
||||
padding-bottom: 7rem;
|
||||
}
|
||||
.title[data-v-254ebbc1] {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.title[data-v-254ebbc1]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mobile .hot-search[data-v-254ebbc1] {
|
||||
margin-right: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
@@ -1,424 +0,0 @@
|
||||
import { d as defineComponent, r as ref, G as computed, a5 as setAnimationDelay, E as watch, h as useRouter, o as onMounted, j as openBlock, c as createElementBlock, b as createBaseVNode, n as normalizeClass, u as unref, s as setAnimationClass, a3 as Fragment, a4 as renderList, w as withDirectives, a6 as vShow, a2 as normalizeStyle, t as toDisplayString, _ as _export_sfc, e as createVNode, a7 as getImgUrl, T as createCommentVNode, g as useStore, a8 as watchEffect, O as createBlock, f as withCtx, a9 as setBackgroundImg, k as createTextVNode, aa as router, S as Scrollbar, ab as resolveDirective, ac as isMobile } from "./index-DKaFsuse.js";
|
||||
import { g as getPlaylistCategory, a as getNewAlbum, b as getHotSinger, c as getDayRecommend, d as getRecommendMusic } from "./home-BXGE9AqN.js";
|
||||
import { M as MusicList, g as getAlbum } from "./MusicList-s-QHu-iA.js";
|
||||
import { N as NImage } from "./Image-DXClIklC.js";
|
||||
import { S as SongItem } from "./SongItem-CoswpGn6.js";
|
||||
import { F as Favorite } from "./index-JJypdZPY.js";
|
||||
import "./Drawer-BEJ8Ydua.js";
|
||||
import "./Avatar-rQ2og-6c.js";
|
||||
import "./Tag-C0oC92WF.js";
|
||||
import "./Ellipsis-D4R5dIX2.js";
|
||||
import "./use-locale-DLWAOXez.js";
|
||||
const _hoisted_1$4 = { class: "play-list-type" };
|
||||
const _hoisted_2$3 = ["onClick"];
|
||||
const DELAY_TIME = 40;
|
||||
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
||||
__name: "PlaylistType",
|
||||
setup(__props) {
|
||||
const playlistCategory = ref();
|
||||
const isShowAllPlaylistCategory = ref(false);
|
||||
const getAnimationDelay = computed(() => {
|
||||
return (index2) => {
|
||||
if (index2 <= 19) {
|
||||
return setAnimationDelay(index2, DELAY_TIME);
|
||||
}
|
||||
if (!isShowAllPlaylistCategory.value) {
|
||||
const nowIndex = (playlistCategory.value?.sub.length || 0) - index2;
|
||||
return setAnimationDelay(nowIndex, DELAY_TIME);
|
||||
}
|
||||
return setAnimationDelay(index2 - 19, DELAY_TIME);
|
||||
};
|
||||
});
|
||||
watch(isShowAllPlaylistCategory, (newVal) => {
|
||||
if (!newVal) {
|
||||
const elements = playlistCategory.value?.sub.map(
|
||||
(_, index2) => document.querySelector(`.type-item-${index2}`)
|
||||
);
|
||||
elements.slice(20).reverse().forEach((element, index2) => {
|
||||
if (element) {
|
||||
setTimeout(
|
||||
() => {
|
||||
element.style.position = "absolute";
|
||||
},
|
||||
index2 * DELAY_TIME + 400
|
||||
);
|
||||
}
|
||||
});
|
||||
setTimeout(
|
||||
() => {
|
||||
isHiding.value = false;
|
||||
document.querySelectorAll(".play-list-type-item").forEach((element) => {
|
||||
if (element) {
|
||||
console.log("element", element);
|
||||
element.style.position = "none";
|
||||
}
|
||||
});
|
||||
},
|
||||
(playlistCategory.value?.sub.length || 0 - 19) * DELAY_TIME
|
||||
);
|
||||
} else {
|
||||
document.querySelectorAll(".play-list-type-item").forEach((element) => {
|
||||
if (element) {
|
||||
element.style.position = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
const loadPlaylistCategory = async () => {
|
||||
const { data } = await getPlaylistCategory();
|
||||
playlistCategory.value = data;
|
||||
};
|
||||
const router2 = useRouter();
|
||||
const handleClickPlaylistType = (type) => {
|
||||
router2.push({
|
||||
path: "/list",
|
||||
query: {
|
||||
type
|
||||
}
|
||||
});
|
||||
};
|
||||
const isHiding = ref(false);
|
||||
const handleToggleShowAllPlaylistCategory = () => {
|
||||
isShowAllPlaylistCategory.value = !isShowAllPlaylistCategory.value;
|
||||
if (!isShowAllPlaylistCategory.value) {
|
||||
isHiding.value = true;
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
loadPlaylistCategory();
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", _hoisted_1$4, [
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["title", unref(setAnimationClass)("animate__fadeInLeft")])
|
||||
}, "歌单分类", 2),
|
||||
createBaseVNode("div", null, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(playlistCategory.value?.sub, (item, index2) => {
|
||||
return withDirectives((openBlock(), createElementBlock("span", {
|
||||
key: item.name,
|
||||
class: normalizeClass([
|
||||
"play-list-type-item",
|
||||
unref(setAnimationClass)(
|
||||
index2 <= 19 ? "animate__bounceIn" : !isShowAllPlaylistCategory.value ? "animate__backOutLeft" : "animate__bounceIn"
|
||||
) + " type-item-" + index2
|
||||
]),
|
||||
style: normalizeStyle(getAnimationDelay.value(index2)),
|
||||
onClick: ($event) => handleClickPlaylistType(item.name)
|
||||
}, toDisplayString(item.name), 15, _hoisted_2$3)), [
|
||||
[vShow, isShowAllPlaylistCategory.value || index2 <= 19 || isHiding.value]
|
||||
]);
|
||||
}), 128)),
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["play-list-type-showall", unref(setAnimationClass)("animate__bounceIn")]),
|
||||
style: normalizeStyle(
|
||||
unref(setAnimationDelay)(
|
||||
!isShowAllPlaylistCategory.value ? 25 : playlistCategory.value?.sub.length || 100 + 30
|
||||
)
|
||||
),
|
||||
onClick: handleToggleShowAllPlaylistCategory
|
||||
}, toDisplayString(!isShowAllPlaylistCategory.value ? "显示全部" : "隐藏一些"), 7)
|
||||
])
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const PlaylistType = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-686a7f41"]]);
|
||||
const _hoisted_1$3 = { class: "recommend-album" };
|
||||
const _hoisted_2$2 = { class: "recommend-album-list" };
|
||||
const _hoisted_3$1 = ["onClick"];
|
||||
const _hoisted_4$1 = { class: "recommend-album-list-item-content" };
|
||||
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
||||
__name: "RecommendAlbum",
|
||||
setup(__props) {
|
||||
const albumData = ref();
|
||||
const loadAlbumList = async () => {
|
||||
const { data } = await getNewAlbum();
|
||||
albumData.value = data;
|
||||
};
|
||||
const showMusic = ref(false);
|
||||
const songList = ref([]);
|
||||
const albumName = ref("");
|
||||
const loadingList = ref(false);
|
||||
const albumInfo = ref({});
|
||||
const handleClick = async (item) => {
|
||||
songList.value = [];
|
||||
albumInfo.value = {};
|
||||
albumName.value = item.name;
|
||||
loadingList.value = true;
|
||||
showMusic.value = true;
|
||||
const res = await getAlbum(item.id);
|
||||
songList.value = res.data.songs.map((song) => {
|
||||
song.al.picUrl = song.al.picUrl || item.picUrl;
|
||||
return song;
|
||||
});
|
||||
albumInfo.value = {
|
||||
...res.data.album,
|
||||
creator: {
|
||||
avatarUrl: res.data.album.artist.img1v1Url,
|
||||
nickname: `${res.data.album.artist.name} - ${res.data.album.company}`
|
||||
},
|
||||
description: res.data.album.description
|
||||
};
|
||||
loadingList.value = false;
|
||||
};
|
||||
onMounted(() => {
|
||||
loadAlbumList();
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_image = NImage;
|
||||
return openBlock(), createElementBlock("div", _hoisted_1$3, [
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["title", unref(setAnimationClass)("animate__fadeInRight")])
|
||||
}, "最新专辑", 2),
|
||||
createBaseVNode("div", _hoisted_2$2, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(albumData.value?.albums, (item, index2) => {
|
||||
return openBlock(), createElementBlock(Fragment, {
|
||||
key: item.id
|
||||
}, [
|
||||
index2 < 6 ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass(["recommend-album-list-item", unref(setAnimationClass)("animate__backInUp")]),
|
||||
style: normalizeStyle(unref(setAnimationDelay)(index2, 100)),
|
||||
onClick: ($event) => handleClick(item)
|
||||
}, [
|
||||
createVNode(_component_n_image, {
|
||||
class: "recommend-album-list-item-img",
|
||||
src: unref(getImgUrl)(item.blurPicUrl, "200y200"),
|
||||
lazy: "",
|
||||
"preview-disabled": ""
|
||||
}, null, 8, ["src"]),
|
||||
createBaseVNode("div", _hoisted_4$1, toDisplayString(item.name), 1)
|
||||
], 14, _hoisted_3$1)) : createCommentVNode("", true)
|
||||
], 64);
|
||||
}), 128))
|
||||
]),
|
||||
createVNode(MusicList, {
|
||||
show: showMusic.value,
|
||||
"onUpdate:show": _cache[0] || (_cache[0] = ($event) => showMusic.value = $event),
|
||||
name: albumName.value,
|
||||
"song-list": songList.value,
|
||||
cover: false,
|
||||
loading: loadingList.value,
|
||||
"list-info": albumInfo.value
|
||||
}, null, 8, ["show", "name", "song-list", "loading", "list-info"])
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const RecommendAlbum = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-1df7dbee"]]);
|
||||
const _hoisted_1$2 = { class: "recommend-singer" };
|
||||
const _hoisted_2$1 = { class: "recommend-singer-list" };
|
||||
const _hoisted_3 = { class: "mt-2" };
|
||||
const _hoisted_4 = { class: "recommend-singer-item-count p-2 text-base text-gray-200 z-10" };
|
||||
const _hoisted_5 = { class: "recommend-singer-item-info z-10" };
|
||||
const _hoisted_6 = ["onClick"];
|
||||
const _hoisted_7 = { class: "ml-4" };
|
||||
const _hoisted_8 = { class: "recommend-singer-item-info-name text-el" };
|
||||
const _hoisted_9 = { class: "recommend-singer-item-info-name text-el" };
|
||||
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
||||
__name: "RecommendSinger",
|
||||
setup(__props) {
|
||||
const store = useStore();
|
||||
const hotSingerData = ref();
|
||||
const dayRecommendData = ref();
|
||||
const showMusic = ref(false);
|
||||
onMounted(async () => {
|
||||
await loadData();
|
||||
});
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
|
||||
try {
|
||||
const {
|
||||
data: { data: dayRecommend }
|
||||
} = await getDayRecommend();
|
||||
if (dayRecommend) {
|
||||
singerData.artists = singerData.artists.slice(0, 4);
|
||||
}
|
||||
dayRecommendData.value = dayRecommend;
|
||||
} catch (error) {
|
||||
console.error("error", error);
|
||||
}
|
||||
hotSingerData.value = singerData;
|
||||
} catch (error) {
|
||||
console.error("error", error);
|
||||
}
|
||||
};
|
||||
const toSearchSinger = (keyword) => {
|
||||
router.push({
|
||||
path: "/search",
|
||||
query: {
|
||||
keyword
|
||||
}
|
||||
});
|
||||
};
|
||||
watchEffect(() => {
|
||||
if (store.state.user) {
|
||||
loadData();
|
||||
}
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_scrollbar = Scrollbar;
|
||||
return openBlock(), createBlock(_component_n_scrollbar, {
|
||||
size: 100,
|
||||
"x-scrollable": true
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", _hoisted_1$2, [
|
||||
createBaseVNode("div", _hoisted_2$1, [
|
||||
dayRecommendData.value ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass(["recommend-singer-item relative", unref(setAnimationClass)("animate__backInRight")]),
|
||||
style: normalizeStyle(unref(setAnimationDelay)(0, 100))
|
||||
}, [
|
||||
createBaseVNode("div", {
|
||||
style: normalizeStyle(
|
||||
unref(setBackgroundImg)(unref(getImgUrl)(dayRecommendData.value?.dailySongs[0].al.picUrl, "500y500"))
|
||||
),
|
||||
class: "recommend-singer-item-bg"
|
||||
}, null, 4),
|
||||
createBaseVNode("div", {
|
||||
class: "recommend-singer-item-count p-2 text-base text-gray-200 z-10 cursor-pointer",
|
||||
onClick: _cache[0] || (_cache[0] = ($event) => showMusic.value = true)
|
||||
}, [
|
||||
_cache[3] || (_cache[3] = createBaseVNode("div", { class: "font-bold text-xl" }, "每日推荐", -1)),
|
||||
createBaseVNode("div", _hoisted_3, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(dayRecommendData.value?.dailySongs.slice(0, 5), (item) => {
|
||||
return openBlock(), createElementBlock("p", {
|
||||
key: item.id,
|
||||
class: "text-el"
|
||||
}, [
|
||||
createTextVNode(toDisplayString(item.name) + " ", 1),
|
||||
_cache[2] || (_cache[2] = createBaseVNode("br", null, null, -1))
|
||||
]);
|
||||
}), 128))
|
||||
])
|
||||
])
|
||||
], 6)) : createCommentVNode("", true),
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(hotSingerData.value?.artists, (item, index2) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: item.id,
|
||||
class: normalizeClass(["recommend-singer-item relative", unref(setAnimationClass)("animate__backInRight")]),
|
||||
style: normalizeStyle(unref(setAnimationDelay)(index2 + 1, 100))
|
||||
}, [
|
||||
createBaseVNode("div", {
|
||||
style: normalizeStyle(unref(setBackgroundImg)(unref(getImgUrl)(item.picUrl, "500y500"))),
|
||||
class: "recommend-singer-item-bg"
|
||||
}, null, 4),
|
||||
createBaseVNode("div", _hoisted_4, toDisplayString(item.musicSize) + "首 ", 1),
|
||||
createBaseVNode("div", _hoisted_5, [
|
||||
createBaseVNode("div", {
|
||||
class: "recommend-singer-item-info-play",
|
||||
onClick: ($event) => toSearchSinger(item.name)
|
||||
}, _cache[4] || (_cache[4] = [
|
||||
createBaseVNode("i", { class: "iconfont icon-playfill text-xl" }, null, -1)
|
||||
]), 8, _hoisted_6),
|
||||
createBaseVNode("div", _hoisted_7, [
|
||||
createBaseVNode("div", _hoisted_8, toDisplayString(item.name), 1),
|
||||
createBaseVNode("div", _hoisted_9, toDisplayString(item.name), 1)
|
||||
])
|
||||
])
|
||||
], 6);
|
||||
}), 128))
|
||||
]),
|
||||
dayRecommendData.value?.dailySongs.length ? (openBlock(), createBlock(MusicList, {
|
||||
key: 0,
|
||||
show: showMusic.value,
|
||||
"onUpdate:show": _cache[1] || (_cache[1] = ($event) => showMusic.value = $event),
|
||||
name: "每日推荐列表",
|
||||
"song-list": dayRecommendData.value?.dailySongs,
|
||||
cover: false
|
||||
}, null, 8, ["show", "song-list"])) : createCommentVNode("", true)
|
||||
])
|
||||
]),
|
||||
_: 1
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
const RecommendSinger = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-f8da161d"]]);
|
||||
const _hoisted_1$1 = { class: "recommend-music" };
|
||||
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
||||
__name: "RecommendSonglist",
|
||||
setup(__props) {
|
||||
const store = useStore();
|
||||
const recommendMusic = ref();
|
||||
const loading = ref(false);
|
||||
const loadRecommendMusic = async () => {
|
||||
loading.value = true;
|
||||
const { data } = await getRecommendMusic({ limit: 10 });
|
||||
recommendMusic.value = data;
|
||||
loading.value = false;
|
||||
};
|
||||
onMounted(() => {
|
||||
loadRecommendMusic();
|
||||
});
|
||||
const handlePlay = () => {
|
||||
store.commit("setPlayList", recommendMusic.value?.result);
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
const _directive_loading = resolveDirective("loading");
|
||||
return openBlock(), createElementBlock("div", _hoisted_1$1, [
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["title", unref(setAnimationClass)("animate__fadeInLeft")])
|
||||
}, "本周最热音乐", 2),
|
||||
withDirectives((openBlock(), createElementBlock("div", {
|
||||
class: normalizeClass(["recommend-music-list", unref(setAnimationClass)("animate__bounceInUp")])
|
||||
}, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(recommendMusic)?.result, (item, index2) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: item.id,
|
||||
class: normalizeClass(unref(setAnimationClass)("animate__bounceInUp")),
|
||||
style: normalizeStyle(unref(setAnimationDelay)(index2, 100))
|
||||
}, [
|
||||
createVNode(SongItem, {
|
||||
item,
|
||||
onPlay: handlePlay
|
||||
}, null, 8, ["item"])
|
||||
], 6);
|
||||
}), 128))
|
||||
], 2)), [
|
||||
[vShow, unref(recommendMusic)?.result],
|
||||
[_directive_loading, unref(loading)]
|
||||
])
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const RecommendSonglist = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-ae2da107"]]);
|
||||
const _hoisted_1 = { class: "main-page" };
|
||||
const _hoisted_2 = { class: "main-content" };
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
...{
|
||||
name: "Home"
|
||||
},
|
||||
__name: "index",
|
||||
setup(__props) {
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_scrollbar = Scrollbar;
|
||||
return openBlock(), createBlock(_component_n_scrollbar, {
|
||||
size: 100,
|
||||
"x-scrollable": false
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", _hoisted_1, [
|
||||
createVNode(RecommendSinger),
|
||||
createBaseVNode("div", _hoisted_2, [
|
||||
!unref(isMobile) ? (openBlock(), createBlock(PlaylistType, { key: 0 })) : createCommentVNode("", true),
|
||||
createVNode(RecommendSonglist),
|
||||
createBaseVNode("div", null, [
|
||||
createVNode(Favorite, { "is-component": "" }),
|
||||
createVNode(RecommendAlbum)
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
_: 1
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b0ca1b97"]]);
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
Binary file not shown.
@@ -1,120 +0,0 @@
|
||||
.set-page[data-v-0331ad9e] {
|
||||
|
||||
--tw-bg-opacity: 1;
|
||||
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
|
||||
padding: 1rem
|
||||
}
|
||||
.set-page[data-v-0331ad9e]:is(.dark *) {
|
||||
|
||||
--tw-bg-opacity: 1;
|
||||
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.set-item[data-v-0331ad9e] {
|
||||
|
||||
margin-bottom: 1rem;
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
border-radius: 0.5rem;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
transition-property: all;
|
||||
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
transition-duration: 150ms;
|
||||
|
||||
--tw-bg-opacity: 1;
|
||||
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
|
||||
--tw-text-opacity: 1;
|
||||
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.set-item[data-v-0331ad9e]:is(.dark *) {
|
||||
|
||||
--tw-bg-opacity: 1;
|
||||
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
|
||||
--tw-text-opacity: 1;
|
||||
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.set-item[data-v-0331ad9e] {
|
||||
|
||||
border-width: 1px;
|
||||
|
||||
--tw-border-opacity: 1;
|
||||
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
|
||||
}
|
||||
.set-item[data-v-0331ad9e]:is(.dark *) {
|
||||
|
||||
--tw-border-opacity: 1;
|
||||
|
||||
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1))
|
||||
}
|
||||
.set-item-title[data-v-0331ad9e] {
|
||||
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
font-size: 1rem;
|
||||
|
||||
line-height: 1.5rem;
|
||||
|
||||
font-weight: 500
|
||||
}
|
||||
.set-item-content[data-v-0331ad9e] {
|
||||
|
||||
font-size: 0.875rem;
|
||||
|
||||
line-height: 1.25rem;
|
||||
|
||||
--tw-text-opacity: 1;
|
||||
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.set-item-content[data-v-0331ad9e]:is(.dark *) {
|
||||
|
||||
--tw-text-opacity: 1;
|
||||
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.set-item[data-v-0331ad9e]:hover {
|
||||
|
||||
--tw-bg-opacity: 1;
|
||||
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.set-item[data-v-0331ad9e]:hover:is(.dark *) {
|
||||
|
||||
--tw-bg-opacity: 1;
|
||||
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.set-item.cursor-pointer[data-v-0331ad9e]:hover {
|
||||
|
||||
--tw-bg-opacity: 1;
|
||||
|
||||
background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
|
||||
|
||||
--tw-text-opacity: 1;
|
||||
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.set-item.cursor-pointer[data-v-0331ad9e]:hover:is(.dark *) {
|
||||
|
||||
--tw-bg-opacity: 1;
|
||||
|
||||
background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
Binary file not shown.
@@ -1,189 +0,0 @@
|
||||
.login-page[data-v-baab8304] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5rem;
|
||||
padding-top: 5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}.login-page[data-v-baab8304]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.login-title[data-v-baab8304] {
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text[data-v-baab8304] {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.phone-login[data-v-baab8304] {
|
||||
width: 350px;
|
||||
height: 550px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='400' height='560' preserveAspectRatio='none' viewBox='0 0 400 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1066%26quot%3b)' fill='none'%3e%3crect width='400' height='560' x='0' y='0' fill='rgba(24%2c 106%2c 59%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c234.738C43.535%2c236.921%2c80.103%2c205.252%2c116.272%2c180.923C151.738%2c157.067%2c188.295%2c132.929%2c207.855%2c94.924C227.898%2c55.979%2c233.386%2c10.682%2c226.119%2c-32.511C218.952%2c-75.107%2c199.189%2c-115.793%2c167.469%2c-145.113C137.399%2c-172.909%2c92.499%2c-171.842%2c55.779%2c-189.967C8.719%2c-213.196%2c-28.344%2c-282.721%2c-78.217%2c-266.382C-128.725%2c-249.834%2c-111.35%2c-166.696%2c-143.781%2c-124.587C-173.232%2c-86.348%2c-244.72%2c-83.812%2c-255.129%2c-36.682C-265.368%2c9.678%2c-217.952%2c48.26%2c-190.512%2c87.004C-167.691%2c119.226%2c-140.216%2c145.431%2c-109.013%2c169.627C-74.874%2c196.1%2c-43.147%2c232.575%2c0%2c234.738' fill='%23114b2a'%3e%3c/path%3e%3cpath d='M400 800.9010000000001C443.973 795.023 480.102 765.6 513.011 735.848 541.923 709.71 561.585 676.6320000000001 577.037 640.85 592.211 605.712 606.958 568.912 601.458 531.035 595.962 493.182 568.394 464.36400000000003 546.825 432.775 522.317 396.88300000000004 507.656 347.475 466.528 333.426 425.366 319.366 384.338 352.414 342.111 362.847 297.497 373.869 242.385 362.645 211.294 396.486 180.212 430.318 192.333 483.83299999999997 188.872 529.644 185.656 572.218 178.696 614.453 191.757 655.101 205.885 699.068 227.92 742.4110000000001 265.75 768.898 304.214 795.829 353.459 807.1220000000001 400 800.9010000000001' fill='%231f894c'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1066'%3e%3crect width='400' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
|
||||
box-shadow: inset 0px 0px 20px 5px rgba(0, 0, 0, 0.37);
|
||||
}
|
||||
.phone-login .bg[data-v-baab8304] {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
|
||||
opacity: 0.2;
|
||||
}
|
||||
.phone-login .bg[data-v-baab8304]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(22 22 22 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.phone-login .bottom[data-v-baab8304] {
|
||||
width: 200%;
|
||||
height: 250px;
|
||||
bottom: -180px;
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
padding: 10px;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.phone-login .bottom[data-v-baab8304]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.phone-login .bottom[data-v-baab8304] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.phone-login .bottom[data-v-baab8304]:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.phone-login .bottom[data-v-baab8304]:is(.dark *):hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.phone-login .bottom[data-v-baab8304] {
|
||||
box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.66);
|
||||
}
|
||||
.phone-login .content[data-v-baab8304] {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
padding-bottom: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.phone-login .content .qr-img[data-v-baab8304] {
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
transition-property: opacity;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.phone-login .content .phone[data-v-baab8304] {
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
.phone-login .content .phone-page[data-v-baab8304] {
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.9;
|
||||
}
|
||||
.phone-login .content .phone-page[data-v-baab8304]:is(.dark *) {
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.9;
|
||||
}
|
||||
.phone-login .content .phone-page[data-v-baab8304] {
|
||||
width: 250px;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.phone-login .content .phone-input[data-v-baab8304] {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
background-color: transparent;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.phone-login .content .phone-input[data-v-baab8304]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.phone-login .content .phone-input[data-v-baab8304] {
|
||||
border-bottom-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.phone-login .content .phone-input[data-v-baab8304]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.phone-login .content .phone-input[data-v-baab8304]::-moz-placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
|
||||
}
|
||||
.phone-login .content .phone-input[data-v-baab8304]::placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
|
||||
}
|
||||
.phone-login .content .phone-input[data-v-baab8304]:is(.dark *)::-moz-placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
|
||||
}
|
||||
.phone-login .content .phone-input[data-v-baab8304]:is(.dark *)::placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
|
||||
}
|
||||
.phone-login .content .phone-input[data-v-baab8304]:focus {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.phone-login .content .btn-login[data-v-baab8304] {
|
||||
width: 250px;
|
||||
height: 40px;
|
||||
margin-top: 2.5rem;
|
||||
border-radius: 0.75rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.phone-login .content .btn-login[data-v-baab8304]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
Binary file not shown.
@@ -1,151 +0,0 @@
|
||||
import { F as Favorite } from "./index-JJypdZPY.js";
|
||||
import { d as defineComponent, al as useMusicHistory, r as ref, o as onMounted, c as createElementBlock, b as createBaseVNode, n as normalizeClass, u as unref, e as createVNode, f as withCtx, am as getMusicDetail, S as Scrollbar, g as useStore, j as openBlock, s as setAnimationClass, a3 as Fragment, a4 as renderList, a2 as normalizeStyle, a5 as setAnimationDelay, t as toDisplayString, T as createCommentVNode, aj as __unplugin_components_0, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
import { S as SongItem } from "./SongItem-CoswpGn6.js";
|
||||
import "./use-locale-DLWAOXez.js";
|
||||
import "./Image-DXClIklC.js";
|
||||
import "./Ellipsis-D4R5dIX2.js";
|
||||
const _hoisted_1$1 = { class: "history-page" };
|
||||
const _hoisted_2 = { class: "history-item-count min-w-[60px]" };
|
||||
const _hoisted_3 = { class: "history-item-delete" };
|
||||
const _hoisted_4 = ["onClick"];
|
||||
const _hoisted_5 = {
|
||||
key: 0,
|
||||
class: "loading-wrapper"
|
||||
};
|
||||
const _hoisted_6 = {
|
||||
key: 1,
|
||||
class: "no-more-tip"
|
||||
};
|
||||
const pageSize = 20;
|
||||
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
||||
...{
|
||||
name: "History"
|
||||
},
|
||||
__name: "index",
|
||||
setup(__props) {
|
||||
const store = useStore();
|
||||
const { delMusic, musicList } = useMusicHistory();
|
||||
const scrollbarRef = ref();
|
||||
const loading = ref(false);
|
||||
const noMore = ref(false);
|
||||
const displayList = ref([]);
|
||||
const currentPage = ref(1);
|
||||
const getHistorySongs = async () => {
|
||||
if (musicList.value.length === 0) {
|
||||
displayList.value = [];
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const startIndex = (currentPage.value - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
const currentPageItems = musicList.value.slice(startIndex, endIndex);
|
||||
const currentIds = currentPageItems.map((item) => item.id);
|
||||
const res = await getMusicDetail(currentIds);
|
||||
if (res.data.songs) {
|
||||
const newSongs = res.data.songs.map((song) => {
|
||||
const historyItem = currentPageItems.find((item) => item.id === song.id);
|
||||
return {
|
||||
...song,
|
||||
picUrl: song.al?.picUrl || "",
|
||||
count: historyItem?.count || 0
|
||||
};
|
||||
});
|
||||
if (currentPage.value === 1) {
|
||||
displayList.value = newSongs;
|
||||
} else {
|
||||
displayList.value = [...displayList.value, ...newSongs];
|
||||
}
|
||||
noMore.value = displayList.value.length >= musicList.value.length;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取历史记录失败:", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
const handleScroll = (e) => {
|
||||
const { scrollTop, scrollHeight, offsetHeight } = e.target;
|
||||
const threshold = 100;
|
||||
if (!loading.value && !noMore.value && scrollHeight - (scrollTop + offsetHeight) < threshold) {
|
||||
currentPage.value++;
|
||||
getHistorySongs();
|
||||
}
|
||||
};
|
||||
const handlePlay = () => {
|
||||
store.commit("setPlayList", displayList.value);
|
||||
};
|
||||
onMounted(() => {
|
||||
getHistorySongs();
|
||||
});
|
||||
const handleDelMusic = async (item) => {
|
||||
delMusic(item);
|
||||
musicList.value = musicList.value.filter((music) => music.id !== item.id);
|
||||
displayList.value = displayList.value.filter((music) => music.id !== item.id);
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_spin = __unplugin_components_0;
|
||||
const _component_n_scrollbar = Scrollbar;
|
||||
return openBlock(), createElementBlock("div", _hoisted_1$1, [
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["title", unref(setAnimationClass)("animate__fadeInRight")])
|
||||
}, "播放历史", 2),
|
||||
createVNode(_component_n_scrollbar, {
|
||||
ref_key: "scrollbarRef",
|
||||
ref: scrollbarRef,
|
||||
size: 100,
|
||||
onScroll: handleScroll
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["history-list-content", unref(setAnimationClass)("animate__bounceInLeft")])
|
||||
}, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(displayList.value, (item, index2) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: item.id,
|
||||
class: normalizeClass(["history-item", unref(setAnimationClass)("animate__bounceInRight")]),
|
||||
style: normalizeStyle(unref(setAnimationDelay)(index2, 30))
|
||||
}, [
|
||||
createVNode(SongItem, {
|
||||
class: "history-item-content",
|
||||
item,
|
||||
onPlay: handlePlay
|
||||
}, null, 8, ["item"]),
|
||||
createBaseVNode("div", _hoisted_2, toDisplayString(item.count), 1),
|
||||
createBaseVNode("div", _hoisted_3, [
|
||||
createBaseVNode("i", {
|
||||
class: "iconfont icon-close",
|
||||
onClick: ($event) => handleDelMusic(item)
|
||||
}, null, 8, _hoisted_4)
|
||||
])
|
||||
], 6);
|
||||
}), 128)),
|
||||
loading.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
|
||||
createVNode(_component_n_spin, { size: "large" })
|
||||
])) : createCommentVNode("", true),
|
||||
noMore.value ? (openBlock(), createElementBlock("div", _hoisted_6, "没有更多了")) : createCommentVNode("", true)
|
||||
], 2)
|
||||
]),
|
||||
_: 1
|
||||
}, 512)
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const History = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-7e434221"]]);
|
||||
const _hoisted_1 = { class: "flex gap-4 h-full pb-4" };
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
__name: "index",
|
||||
setup(__props) {
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
createVNode(Favorite, { class: "flex-item" }),
|
||||
createVNode(History, { class: "flex-item" })
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-36d023b3"]]);
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
Binary file not shown.
@@ -1,155 +0,0 @@
|
||||
import { d as defineComponent, r as ref, o as onMounted, a as onBeforeUnmount, c as createElementBlock, b as createBaseVNode, u as unref, n as normalizeClass, w as withDirectives, v as vModelText, i as isRef, e as createVNode, f as withCtx, t as toDisplayString, g as useStore, h as useRouter, B as Button, j as openBlock, s as setAnimationClass, k as createTextVNode, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
import { u as useMessage, g as getQrKey, c as createQr, a as checkQr, b as getUserDetail, l as loginByCellphone } from "./login-BsPxQYi6.js";
|
||||
const _hoisted_1 = { class: "login-page" };
|
||||
const _hoisted_2 = { class: "phone-login" };
|
||||
const _hoisted_3 = { class: "content" };
|
||||
const _hoisted_4 = ["src"];
|
||||
const _hoisted_5 = { class: "phone-page" };
|
||||
const _hoisted_6 = { class: "bottom" };
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
...{
|
||||
name: "Login"
|
||||
},
|
||||
__name: "index",
|
||||
setup(__props) {
|
||||
const message = useMessage();
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
const isQr = ref(false);
|
||||
const qrUrl = ref();
|
||||
onMounted(() => {
|
||||
loadLogin();
|
||||
});
|
||||
const timerRef = ref(null);
|
||||
const loadLogin = async () => {
|
||||
try {
|
||||
if (timerRef.value) {
|
||||
clearInterval(timerRef.value);
|
||||
timerRef.value = null;
|
||||
}
|
||||
if (!isQr.value) return;
|
||||
const qrKey = await getQrKey();
|
||||
const key = qrKey.data.data.unikey;
|
||||
const { data } = await createQr(key);
|
||||
qrUrl.value = data.data.qrimg;
|
||||
const timer = timerIsQr(key);
|
||||
timerRef.value = timer;
|
||||
} catch (error) {
|
||||
console.error("加载登录信息时出错:", error);
|
||||
}
|
||||
};
|
||||
const timerIsQr = (key) => {
|
||||
const timer = setInterval(async () => {
|
||||
try {
|
||||
const { data } = await checkQr(key);
|
||||
if (data.code === 800) {
|
||||
clearInterval(timer);
|
||||
timerRef.value = null;
|
||||
}
|
||||
if (data.code === 803) {
|
||||
localStorage.setItem("token", data.cookie);
|
||||
const user = await getUserDetail();
|
||||
store.state.user = user.data.profile;
|
||||
localStorage.setItem("user", JSON.stringify(store.state.user));
|
||||
message.success("登录成功");
|
||||
clearInterval(timer);
|
||||
timerRef.value = null;
|
||||
router.push("/user");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("检查二维码状态时出错:", error);
|
||||
clearInterval(timer);
|
||||
timerRef.value = null;
|
||||
}
|
||||
}, 3e3);
|
||||
return timer;
|
||||
};
|
||||
onBeforeUnmount(() => {
|
||||
if (timerRef.value) {
|
||||
clearInterval(timerRef.value);
|
||||
timerRef.value = null;
|
||||
}
|
||||
});
|
||||
const chooseQr = () => {
|
||||
isQr.value = !isQr.value;
|
||||
loadLogin();
|
||||
};
|
||||
const phone = ref("");
|
||||
const password = ref("");
|
||||
const loginPhone = async () => {
|
||||
const { data } = await loginByCellphone(phone.value, password.value);
|
||||
if (data.code === 200) {
|
||||
message.success("登录成功");
|
||||
store.state.user = data.profile;
|
||||
localStorage.setItem("token", data.cookie);
|
||||
setTimeout(() => {
|
||||
router.push("/user");
|
||||
}, 1e3);
|
||||
}
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_button = Button;
|
||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
createBaseVNode("div", _hoisted_2, [
|
||||
_cache[9] || (_cache[9] = createBaseVNode("div", { class: "bg" }, null, -1)),
|
||||
createBaseVNode("div", _hoisted_3, [
|
||||
unref(isQr) ? (openBlock(), createElementBlock("div", {
|
||||
key: 0,
|
||||
class: normalizeClass(["phone", unref(setAnimationClass)("animate__fadeInUp")])
|
||||
}, [
|
||||
_cache[4] || (_cache[4] = createBaseVNode("div", { class: "login-title" }, "扫码登陆", -1)),
|
||||
createBaseVNode("img", {
|
||||
class: "qr-img",
|
||||
src: unref(qrUrl)
|
||||
}, null, 8, _hoisted_4),
|
||||
_cache[5] || (_cache[5] = createBaseVNode("div", { class: "text" }, "使用网易云APP扫码登录", -1))
|
||||
], 2)) : (openBlock(), createElementBlock("div", {
|
||||
key: 1,
|
||||
class: normalizeClass(["phone", unref(setAnimationClass)("animate__fadeInUp")])
|
||||
}, [
|
||||
_cache[7] || (_cache[7] = createBaseVNode("div", { class: "login-title" }, "手机号登录", -1)),
|
||||
createBaseVNode("div", _hoisted_5, [
|
||||
withDirectives(createBaseVNode("input", {
|
||||
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(phone) ? phone.value = $event : null),
|
||||
class: "phone-input",
|
||||
type: "text",
|
||||
placeholder: "手机号"
|
||||
}, null, 512), [
|
||||
[vModelText, unref(phone)]
|
||||
]),
|
||||
withDirectives(createBaseVNode("input", {
|
||||
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(password) ? password.value = $event : null),
|
||||
class: "phone-input",
|
||||
type: "password",
|
||||
placeholder: "密码"
|
||||
}, null, 512), [
|
||||
[vModelText, unref(password)]
|
||||
])
|
||||
]),
|
||||
_cache[8] || (_cache[8] = createBaseVNode("div", { class: "text" }, "使用网易云账号登录", -1)),
|
||||
createVNode(_component_n_button, {
|
||||
class: "btn-login",
|
||||
onClick: _cache[2] || (_cache[2] = ($event) => loginPhone())
|
||||
}, {
|
||||
default: withCtx(() => _cache[6] || (_cache[6] = [
|
||||
createTextVNode("登录")
|
||||
])),
|
||||
_: 1
|
||||
})
|
||||
], 2))
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_6, [
|
||||
createBaseVNode("div", {
|
||||
class: "title",
|
||||
onClick: _cache[3] || (_cache[3] = ($event) => chooseQr())
|
||||
}, toDisplayString(unref(isQr) ? "手机号登录" : "扫码登录"), 1)
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-baab8304"]]);
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
Binary file not shown.
@@ -1,320 +0,0 @@
|
||||
import { d as defineComponent, l as h, p as cB, Y as cE, m as c, q as useTheme, x as useConfig, an as emptyLight, G as computed, ao as createKey, ap as useThemeClass, N as NBaseIcon, r as ref, o as onMounted, E as watch, c as createElementBlock, b as createBaseVNode, t as toDisplayString, n as normalizeClass, u as unref, e as createVNode, f as withCtx, T as createCommentVNode, am as getMusicDetail, S as Scrollbar, g as useStore, h as useRouter, j as openBlock, s as setAnimationClass, a3 as Fragment, a4 as renderList, O as createBlock, a2 as normalizeStyle, k as createTextVNode, a5 as setAnimationDelay, B as Button, aj as __unplugin_components_0$1, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
import { S as SongItem } from "./SongItem-CoswpGn6.js";
|
||||
import { u as useLocale } from "./use-locale-DLWAOXez.js";
|
||||
const EmptyIcon = defineComponent({
|
||||
name: "Empty",
|
||||
render() {
|
||||
return h("svg", {
|
||||
viewBox: "0 0 28 28",
|
||||
fill: "none",
|
||||
xmlns: "http://www.w3.org/2000/svg"
|
||||
}, h("path", {
|
||||
d: "M26 7.5C26 11.0899 23.0899 14 19.5 14C15.9101 14 13 11.0899 13 7.5C13 3.91015 15.9101 1 19.5 1C23.0899 1 26 3.91015 26 7.5ZM16.8536 4.14645C16.6583 3.95118 16.3417 3.95118 16.1464 4.14645C15.9512 4.34171 15.9512 4.65829 16.1464 4.85355L18.7929 7.5L16.1464 10.1464C15.9512 10.3417 15.9512 10.6583 16.1464 10.8536C16.3417 11.0488 16.6583 11.0488 16.8536 10.8536L19.5 8.20711L22.1464 10.8536C22.3417 11.0488 22.6583 11.0488 22.8536 10.8536C23.0488 10.6583 23.0488 10.3417 22.8536 10.1464L20.2071 7.5L22.8536 4.85355C23.0488 4.65829 23.0488 4.34171 22.8536 4.14645C22.6583 3.95118 22.3417 3.95118 22.1464 4.14645L19.5 6.79289L16.8536 4.14645Z",
|
||||
fill: "currentColor"
|
||||
}), h("path", {
|
||||
d: "M25 22.75V12.5991C24.5572 13.0765 24.053 13.4961 23.5 13.8454V16H17.5L17.3982 16.0068C17.0322 16.0565 16.75 16.3703 16.75 16.75C16.75 18.2688 15.5188 19.5 14 19.5C12.4812 19.5 11.25 18.2688 11.25 16.75L11.2432 16.6482C11.1935 16.2822 10.8797 16 10.5 16H4.5V7.25C4.5 6.2835 5.2835 5.5 6.25 5.5H12.2696C12.4146 4.97463 12.6153 4.47237 12.865 4H6.25C4.45507 4 3 5.45507 3 7.25V22.75C3 24.5449 4.45507 26 6.25 26H21.75C23.5449 26 25 24.5449 25 22.75ZM4.5 22.75V17.5H9.81597L9.85751 17.7041C10.2905 19.5919 11.9808 21 14 21L14.215 20.9947C16.2095 20.8953 17.842 19.4209 18.184 17.5H23.5V22.75C23.5 23.7165 22.7165 24.5 21.75 24.5H6.25C5.2835 24.5 4.5 23.7165 4.5 22.75Z",
|
||||
fill: "currentColor"
|
||||
}));
|
||||
}
|
||||
});
|
||||
const style = cB("empty", `
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: var(--n-font-size);
|
||||
`, [cE("icon", `
|
||||
width: var(--n-icon-size);
|
||||
height: var(--n-icon-size);
|
||||
font-size: var(--n-icon-size);
|
||||
line-height: var(--n-icon-size);
|
||||
color: var(--n-icon-color);
|
||||
transition:
|
||||
color .3s var(--n-bezier);
|
||||
`, [c("+", [cE("description", `
|
||||
margin-top: 8px;
|
||||
`)])]), cE("description", `
|
||||
transition: color .3s var(--n-bezier);
|
||||
color: var(--n-text-color);
|
||||
`), cE("extra", `
|
||||
text-align: center;
|
||||
transition: color .3s var(--n-bezier);
|
||||
margin-top: 12px;
|
||||
color: var(--n-extra-text-color);
|
||||
`)]);
|
||||
const emptyProps = Object.assign(Object.assign({}, useTheme.props), {
|
||||
description: String,
|
||||
showDescription: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "medium"
|
||||
},
|
||||
renderIcon: Function
|
||||
});
|
||||
const __unplugin_components_0 = defineComponent({
|
||||
name: "Empty",
|
||||
props: emptyProps,
|
||||
setup(props) {
|
||||
const {
|
||||
mergedClsPrefixRef,
|
||||
inlineThemeDisabled,
|
||||
mergedComponentPropsRef
|
||||
} = useConfig(props);
|
||||
const themeRef = useTheme("Empty", "-empty", style, emptyLight, props, mergedClsPrefixRef);
|
||||
const {
|
||||
localeRef
|
||||
} = useLocale("Empty");
|
||||
const mergedDescriptionRef = computed(() => {
|
||||
var _a, _b, _c;
|
||||
return (_a = props.description) !== null && _a !== void 0 ? _a : (_c = (_b = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _b === void 0 ? void 0 : _b.Empty) === null || _c === void 0 ? void 0 : _c.description;
|
||||
});
|
||||
const mergedRenderIconRef = computed(() => {
|
||||
var _a, _b;
|
||||
return ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Empty) === null || _b === void 0 ? void 0 : _b.renderIcon) || (() => h(EmptyIcon, null));
|
||||
});
|
||||
const cssVarsRef = computed(() => {
|
||||
const {
|
||||
size
|
||||
} = props;
|
||||
const {
|
||||
common: {
|
||||
cubicBezierEaseInOut
|
||||
},
|
||||
self: {
|
||||
[createKey("iconSize", size)]: iconSize,
|
||||
[createKey("fontSize", size)]: fontSize,
|
||||
textColor,
|
||||
iconColor,
|
||||
extraTextColor
|
||||
}
|
||||
} = themeRef.value;
|
||||
return {
|
||||
"--n-icon-size": iconSize,
|
||||
"--n-font-size": fontSize,
|
||||
"--n-bezier": cubicBezierEaseInOut,
|
||||
"--n-text-color": textColor,
|
||||
"--n-icon-color": iconColor,
|
||||
"--n-extra-text-color": extraTextColor
|
||||
};
|
||||
});
|
||||
const themeClassHandle = inlineThemeDisabled ? useThemeClass("empty", computed(() => {
|
||||
let hash = "";
|
||||
const {
|
||||
size
|
||||
} = props;
|
||||
hash += size[0];
|
||||
return hash;
|
||||
}), cssVarsRef, props) : void 0;
|
||||
return {
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
mergedRenderIcon: mergedRenderIconRef,
|
||||
localizedDescription: computed(() => {
|
||||
return mergedDescriptionRef.value || localeRef.value.description;
|
||||
}),
|
||||
cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
|
||||
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
||||
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
|
||||
};
|
||||
},
|
||||
render() {
|
||||
const {
|
||||
$slots,
|
||||
mergedClsPrefix,
|
||||
onRender
|
||||
} = this;
|
||||
onRender === null || onRender === void 0 ? void 0 : onRender();
|
||||
return h("div", {
|
||||
class: [`${mergedClsPrefix}-empty`, this.themeClass],
|
||||
style: this.cssVars
|
||||
}, this.showIcon ? h("div", {
|
||||
class: `${mergedClsPrefix}-empty__icon`
|
||||
}, $slots.icon ? $slots.icon() : h(NBaseIcon, {
|
||||
clsPrefix: mergedClsPrefix
|
||||
}, {
|
||||
default: this.mergedRenderIcon
|
||||
})) : null, this.showDescription ? h("div", {
|
||||
class: `${mergedClsPrefix}-empty__description`
|
||||
}, $slots.default ? $slots.default() : this.localizedDescription) : null, $slots.extra ? h("div", {
|
||||
class: `${mergedClsPrefix}-empty__extra`
|
||||
}, $slots.extra()) : null);
|
||||
}
|
||||
});
|
||||
const _hoisted_1 = {
|
||||
key: 0,
|
||||
class: "favorite-page"
|
||||
};
|
||||
const _hoisted_2 = { class: "favorite-count" };
|
||||
const _hoisted_3 = {
|
||||
key: 0,
|
||||
class: "empty-tip"
|
||||
};
|
||||
const _hoisted_4 = {
|
||||
key: 1,
|
||||
class: "favorite-list"
|
||||
};
|
||||
const _hoisted_5 = {
|
||||
key: 0,
|
||||
class: "favorite-list-more text-center"
|
||||
};
|
||||
const _hoisted_6 = {
|
||||
key: 1,
|
||||
class: "loading-wrapper"
|
||||
};
|
||||
const _hoisted_7 = {
|
||||
key: 2,
|
||||
class: "no-more-tip"
|
||||
};
|
||||
const pageSize = 16;
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
__name: "index",
|
||||
props: {
|
||||
isComponent: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup(__props) {
|
||||
const store = useStore();
|
||||
const favoriteList = computed(() => store.state.favoriteList);
|
||||
const favoriteSongs = ref([]);
|
||||
const loading = ref(false);
|
||||
const noMore = ref(false);
|
||||
const scrollbarRef = ref();
|
||||
const currentPage = ref(1);
|
||||
const props = __props;
|
||||
const getCurrentPageIds = () => {
|
||||
const reversedList = [...favoriteList.value];
|
||||
const startIndex = (currentPage.value - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
return reversedList.slice(startIndex, endIndex);
|
||||
};
|
||||
const getFavoriteSongs = async () => {
|
||||
if (favoriteList.value.length === 0) {
|
||||
favoriteSongs.value = [];
|
||||
return;
|
||||
}
|
||||
if (props.isComponent && favoriteSongs.value.length >= 16) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const currentIds = getCurrentPageIds();
|
||||
const res = await getMusicDetail(currentIds);
|
||||
if (res.data.songs) {
|
||||
const newSongs = res.data.songs.map((song) => ({
|
||||
...song,
|
||||
picUrl: song.al?.picUrl || ""
|
||||
}));
|
||||
if (currentPage.value === 1) {
|
||||
favoriteSongs.value = newSongs;
|
||||
} else {
|
||||
favoriteSongs.value = [...favoriteSongs.value, ...newSongs];
|
||||
}
|
||||
noMore.value = favoriteSongs.value.length >= favoriteList.value.length;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取收藏歌曲失败:", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
const handleScroll = (e) => {
|
||||
const { scrollTop, scrollHeight, offsetHeight } = e.target;
|
||||
const threshold = 100;
|
||||
if (!loading.value && !noMore.value && scrollHeight - (scrollTop + offsetHeight) < threshold) {
|
||||
currentPage.value++;
|
||||
getFavoriteSongs();
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
getFavoriteSongs();
|
||||
});
|
||||
watch(
|
||||
favoriteList,
|
||||
() => {
|
||||
currentPage.value = 1;
|
||||
noMore.value = false;
|
||||
getFavoriteSongs();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const handlePlay = () => {
|
||||
store.commit("setPlayList", favoriteSongs.value);
|
||||
};
|
||||
const getItemAnimationDelay = (index) => {
|
||||
return setAnimationDelay(index, 30);
|
||||
};
|
||||
const router = useRouter();
|
||||
const handleMore = () => {
|
||||
router.push("/favorite");
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_empty = __unplugin_components_0;
|
||||
const _component_n_button = Button;
|
||||
const _component_n_spin = __unplugin_components_0$1;
|
||||
const _component_n_scrollbar = Scrollbar;
|
||||
return (__props.isComponent ? favoriteSongs.value.length : true) ? (openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["favorite-header", unref(setAnimationClass)("animate__fadeInLeft")])
|
||||
}, [
|
||||
_cache[0] || (_cache[0] = createBaseVNode("h2", null, "我的收藏", -1)),
|
||||
createBaseVNode("div", _hoisted_2, "共 " + toDisplayString(favoriteList.value.length) + " 首", 1)
|
||||
], 2),
|
||||
createBaseVNode("div", {
|
||||
class: normalizeClass(["favorite-main", unref(setAnimationClass)("animate__bounceInRight")])
|
||||
}, [
|
||||
createVNode(_component_n_scrollbar, {
|
||||
ref_key: "scrollbarRef",
|
||||
ref: scrollbarRef,
|
||||
class: "favorite-content",
|
||||
onScroll: handleScroll
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
favoriteList.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [
|
||||
createVNode(_component_n_empty, { description: "还没有收藏歌曲" })
|
||||
])) : (openBlock(), createElementBlock("div", _hoisted_4, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(favoriteSongs.value, (song, index) => {
|
||||
return openBlock(), createBlock(SongItem, {
|
||||
key: song.id,
|
||||
item: song,
|
||||
favorite: !__props.isComponent,
|
||||
class: normalizeClass(unref(setAnimationClass)("animate__bounceInLeft")),
|
||||
style: normalizeStyle(getItemAnimationDelay(index)),
|
||||
onPlay: handlePlay
|
||||
}, null, 8, ["item", "favorite", "class", "style"]);
|
||||
}), 128)),
|
||||
__props.isComponent ? (openBlock(), createElementBlock("div", _hoisted_5, [
|
||||
createVNode(_component_n_button, {
|
||||
text: "",
|
||||
type: "primary",
|
||||
onClick: handleMore
|
||||
}, {
|
||||
default: withCtx(() => _cache[1] || (_cache[1] = [
|
||||
createTextVNode("查看更多")
|
||||
])),
|
||||
_: 1
|
||||
})
|
||||
])) : createCommentVNode("", true),
|
||||
loading.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
|
||||
createVNode(_component_n_spin, { size: "large" })
|
||||
])) : createCommentVNode("", true),
|
||||
noMore.value ? (openBlock(), createElementBlock("div", _hoisted_7, "没有更多了")) : createCommentVNode("", true)
|
||||
]))
|
||||
]),
|
||||
_: 1
|
||||
}, 512)
|
||||
], 2)
|
||||
])) : createCommentVNode("", true);
|
||||
};
|
||||
}
|
||||
});
|
||||
const Favorite = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2d1a7423"]]);
|
||||
export {
|
||||
Favorite as F
|
||||
};
|
||||
Binary file not shown.
@@ -1,944 +0,0 @@
|
||||
import { d as defineComponent, l as h, m as c, p as cB, q as useTheme, x as useConfig, y as inputNumberLight, z as useFormItem, r as ref, A as toRef, C as useMergedState, D as useMemo, E as watch, F as useRtl, G as computed, H as rgba, I as resolveWrappedSlot, J as on, K as resolveSlot, N as NBaseIcon, X as XButton, L as call, M as nextTick, o as onMounted, O as createBlock, f as withCtx, P as checkUpdate, S as Scrollbar, g as useStore, Q as config, j as openBlock, b as createBaseVNode, e as createVNode, u as unref, R as isElectron, c as createElementBlock, T as createCommentVNode, t as toDisplayString, k as createTextVNode, U as PlayBottom, B as Button, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
import { _ as __unplugin_components_1$1, a as __unplugin_components_3 } from "./Switch-D3Z_Vg3u.js";
|
||||
import { u as useLocale } from "./use-locale-DLWAOXez.js";
|
||||
import { _ as __unplugin_components_4 } from "./Tag-C0oC92WF.js";
|
||||
import { _ as __unplugin_components_0 } from "./Slider-BA6NituQ.js";
|
||||
const AddIcon = defineComponent({
|
||||
name: "Add",
|
||||
render() {
|
||||
return h("svg", {
|
||||
width: "512",
|
||||
height: "512",
|
||||
viewBox: "0 0 512 512",
|
||||
fill: "none",
|
||||
xmlns: "http://www.w3.org/2000/svg"
|
||||
}, h("path", {
|
||||
d: "M256 112V400M400 256H112",
|
||||
stroke: "currentColor",
|
||||
"stroke-width": "32",
|
||||
"stroke-linecap": "round",
|
||||
"stroke-linejoin": "round"
|
||||
}));
|
||||
}
|
||||
});
|
||||
const RemoveIcon = defineComponent({
|
||||
name: "Remove",
|
||||
render() {
|
||||
return h("svg", {
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
viewBox: "0 0 512 512"
|
||||
}, h("line", {
|
||||
x1: "400",
|
||||
y1: "256",
|
||||
x2: "112",
|
||||
y2: "256",
|
||||
style: "\n fill: none;\n stroke: currentColor;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 32px;\n "
|
||||
}));
|
||||
}
|
||||
});
|
||||
const style = c([cB("input-number-suffix", `
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
`), cB("input-number-prefix", `
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
`)]);
|
||||
function parse(value) {
|
||||
if (value === void 0 || value === null || typeof value === "string" && value.trim() === "") {
|
||||
return null;
|
||||
}
|
||||
return Number(value);
|
||||
}
|
||||
function isWipValue(value) {
|
||||
return value.includes(".") && (/^(-)?\d+.*(\.|0)$/.test(value) || /^-?\d*$/.test(value)) || value === "-" || value === "-0";
|
||||
}
|
||||
function validator(value) {
|
||||
if (value === void 0 || value === null) return true;
|
||||
if (Number.isNaN(value)) return false;
|
||||
return true;
|
||||
}
|
||||
function format(value, precision) {
|
||||
if (typeof value !== "number") return "";
|
||||
return precision === void 0 ? String(value) : value.toFixed(precision);
|
||||
}
|
||||
function parseNumber(number) {
|
||||
if (number === null) return null;
|
||||
if (typeof number === "number") {
|
||||
return number;
|
||||
} else {
|
||||
const parsedNumber = Number(number);
|
||||
if (Number.isNaN(parsedNumber)) {
|
||||
return null;
|
||||
} else {
|
||||
return parsedNumber;
|
||||
}
|
||||
}
|
||||
}
|
||||
const HOLDING_CHANGE_THRESHOLD = 800;
|
||||
const HOLDING_CHANGE_INTERVAL = 100;
|
||||
const inputNumberProps = Object.assign(Object.assign({}, useTheme.props), {
|
||||
autofocus: Boolean,
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
placeholder: String,
|
||||
defaultValue: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
value: Number,
|
||||
step: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
min: [Number, String],
|
||||
max: [Number, String],
|
||||
size: String,
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
validator: Function,
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
showButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
buttonPlacement: {
|
||||
type: String,
|
||||
default: "right"
|
||||
},
|
||||
inputProps: Object,
|
||||
readonly: Boolean,
|
||||
clearable: Boolean,
|
||||
keyboard: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
updateValueOnInput: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
round: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
parse: Function,
|
||||
format: Function,
|
||||
precision: Number,
|
||||
status: String,
|
||||
"onUpdate:value": [Function, Array],
|
||||
onUpdateValue: [Function, Array],
|
||||
onFocus: [Function, Array],
|
||||
onBlur: [Function, Array],
|
||||
onClear: [Function, Array],
|
||||
// deprecated
|
||||
onChange: [Function, Array]
|
||||
});
|
||||
const __unplugin_components_1 = defineComponent({
|
||||
name: "InputNumber",
|
||||
props: inputNumberProps,
|
||||
setup(props) {
|
||||
const {
|
||||
mergedBorderedRef,
|
||||
mergedClsPrefixRef,
|
||||
mergedRtlRef
|
||||
} = useConfig(props);
|
||||
const themeRef = useTheme("InputNumber", "-input-number", style, inputNumberLight, props, mergedClsPrefixRef);
|
||||
const {
|
||||
localeRef
|
||||
} = useLocale("InputNumber");
|
||||
const formItem = useFormItem(props);
|
||||
const {
|
||||
mergedSizeRef,
|
||||
mergedDisabledRef,
|
||||
mergedStatusRef
|
||||
} = formItem;
|
||||
const inputInstRef = ref(null);
|
||||
const minusButtonInstRef = ref(null);
|
||||
const addButtonInstRef = ref(null);
|
||||
const uncontrolledValueRef = ref(props.defaultValue);
|
||||
const controlledValueRef = toRef(props, "value");
|
||||
const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
|
||||
const displayedValueRef = ref("");
|
||||
const getPrecision = (value) => {
|
||||
const fraction = String(value).split(".")[1];
|
||||
return fraction ? fraction.length : 0;
|
||||
};
|
||||
const getMaxPrecision = (currentValue) => {
|
||||
const precisions = [props.min, props.max, props.step, currentValue].map((value) => {
|
||||
if (value === void 0) return 0;
|
||||
return getPrecision(value);
|
||||
});
|
||||
return Math.max(...precisions);
|
||||
};
|
||||
const mergedPlaceholderRef = useMemo(() => {
|
||||
const {
|
||||
placeholder
|
||||
} = props;
|
||||
if (placeholder !== void 0) return placeholder;
|
||||
return localeRef.value.placeholder;
|
||||
});
|
||||
const mergedStepRef = useMemo(() => {
|
||||
const parsedNumber = parseNumber(props.step);
|
||||
if (parsedNumber !== null) {
|
||||
return parsedNumber === 0 ? 1 : Math.abs(parsedNumber);
|
||||
}
|
||||
return 1;
|
||||
});
|
||||
const mergedMinRef = useMemo(() => {
|
||||
const parsedNumber = parseNumber(props.min);
|
||||
if (parsedNumber !== null) return parsedNumber;
|
||||
else return null;
|
||||
});
|
||||
const mergedMaxRef = useMemo(() => {
|
||||
const parsedNumber = parseNumber(props.max);
|
||||
if (parsedNumber !== null) return parsedNumber;
|
||||
else return null;
|
||||
});
|
||||
const deriveDisplayedValueFromValue = () => {
|
||||
const {
|
||||
value: mergedValue
|
||||
} = mergedValueRef;
|
||||
if (validator(mergedValue)) {
|
||||
const {
|
||||
format: formatProp,
|
||||
precision
|
||||
} = props;
|
||||
if (formatProp) {
|
||||
displayedValueRef.value = formatProp(mergedValue);
|
||||
} else {
|
||||
if (mergedValue === null || precision === void 0 || getPrecision(mergedValue) > precision) {
|
||||
displayedValueRef.value = format(mergedValue, void 0);
|
||||
} else {
|
||||
displayedValueRef.value = format(mergedValue, precision);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
displayedValueRef.value = String(mergedValue);
|
||||
}
|
||||
};
|
||||
deriveDisplayedValueFromValue();
|
||||
const doUpdateValue = (value) => {
|
||||
const {
|
||||
value: mergedValue
|
||||
} = mergedValueRef;
|
||||
if (value === mergedValue) {
|
||||
deriveDisplayedValueFromValue();
|
||||
return;
|
||||
}
|
||||
const {
|
||||
"onUpdate:value": _onUpdateValue,
|
||||
onUpdateValue,
|
||||
onChange
|
||||
} = props;
|
||||
const {
|
||||
nTriggerFormInput,
|
||||
nTriggerFormChange
|
||||
} = formItem;
|
||||
if (onChange) call(onChange, value);
|
||||
if (onUpdateValue) call(onUpdateValue, value);
|
||||
if (_onUpdateValue) call(_onUpdateValue, value);
|
||||
uncontrolledValueRef.value = value;
|
||||
nTriggerFormInput();
|
||||
nTriggerFormChange();
|
||||
};
|
||||
const deriveValueFromDisplayedValue = ({
|
||||
offset,
|
||||
doUpdateIfValid,
|
||||
fixPrecision,
|
||||
isInputing
|
||||
}) => {
|
||||
const {
|
||||
value: displayedValue
|
||||
} = displayedValueRef;
|
||||
if (isInputing && isWipValue(displayedValue)) {
|
||||
return false;
|
||||
}
|
||||
const parsedValue = (props.parse || parse)(displayedValue);
|
||||
if (parsedValue === null) {
|
||||
if (doUpdateIfValid) doUpdateValue(null);
|
||||
return null;
|
||||
}
|
||||
if (validator(parsedValue)) {
|
||||
const currentPrecision = getPrecision(parsedValue);
|
||||
const {
|
||||
precision
|
||||
} = props;
|
||||
if (precision !== void 0 && precision < currentPrecision && !fixPrecision) {
|
||||
return false;
|
||||
}
|
||||
let nextValue = Number.parseFloat((parsedValue + offset).toFixed(precision !== null && precision !== void 0 ? precision : getMaxPrecision(parsedValue)));
|
||||
if (validator(nextValue)) {
|
||||
const {
|
||||
value: mergedMax
|
||||
} = mergedMaxRef;
|
||||
const {
|
||||
value: mergedMin
|
||||
} = mergedMinRef;
|
||||
if (mergedMax !== null && nextValue > mergedMax) {
|
||||
if (!doUpdateIfValid || isInputing) return false;
|
||||
nextValue = mergedMax;
|
||||
}
|
||||
if (mergedMin !== null && nextValue < mergedMin) {
|
||||
if (!doUpdateIfValid || isInputing) return false;
|
||||
nextValue = mergedMin;
|
||||
}
|
||||
if (props.validator && !props.validator(nextValue)) return false;
|
||||
if (doUpdateIfValid) doUpdateValue(nextValue);
|
||||
return nextValue;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
const displayedValueInvalidRef = useMemo(() => {
|
||||
const derivedValue = deriveValueFromDisplayedValue({
|
||||
offset: 0,
|
||||
doUpdateIfValid: false,
|
||||
isInputing: false,
|
||||
fixPrecision: false
|
||||
});
|
||||
return derivedValue === false;
|
||||
});
|
||||
const minusableRef = useMemo(() => {
|
||||
const {
|
||||
value: mergedValue
|
||||
} = mergedValueRef;
|
||||
if (props.validator && mergedValue === null) {
|
||||
return false;
|
||||
}
|
||||
const {
|
||||
value: mergedStep
|
||||
} = mergedStepRef;
|
||||
const derivedNextValue = deriveValueFromDisplayedValue({
|
||||
offset: -mergedStep,
|
||||
doUpdateIfValid: false,
|
||||
isInputing: false,
|
||||
fixPrecision: false
|
||||
});
|
||||
return derivedNextValue !== false;
|
||||
});
|
||||
const addableRef = useMemo(() => {
|
||||
const {
|
||||
value: mergedValue
|
||||
} = mergedValueRef;
|
||||
if (props.validator && mergedValue === null) {
|
||||
return false;
|
||||
}
|
||||
const {
|
||||
value: mergedStep
|
||||
} = mergedStepRef;
|
||||
const derivedNextValue = deriveValueFromDisplayedValue({
|
||||
offset: +mergedStep,
|
||||
doUpdateIfValid: false,
|
||||
isInputing: false,
|
||||
fixPrecision: false
|
||||
});
|
||||
return derivedNextValue !== false;
|
||||
});
|
||||
function doFocus(e) {
|
||||
const {
|
||||
onFocus
|
||||
} = props;
|
||||
const {
|
||||
nTriggerFormFocus
|
||||
} = formItem;
|
||||
if (onFocus) call(onFocus, e);
|
||||
nTriggerFormFocus();
|
||||
}
|
||||
function doBlur(e) {
|
||||
var _a, _b;
|
||||
if (e.target === ((_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.wrapperElRef)) {
|
||||
return;
|
||||
}
|
||||
const value = deriveValueFromDisplayedValue({
|
||||
offset: 0,
|
||||
doUpdateIfValid: true,
|
||||
isInputing: false,
|
||||
fixPrecision: true
|
||||
});
|
||||
if (value !== false) {
|
||||
const inputElRef = (_b = inputInstRef.value) === null || _b === void 0 ? void 0 : _b.inputElRef;
|
||||
if (inputElRef) {
|
||||
inputElRef.value = String(value || "");
|
||||
}
|
||||
if (mergedValueRef.value === value) {
|
||||
deriveDisplayedValueFromValue();
|
||||
}
|
||||
} else {
|
||||
deriveDisplayedValueFromValue();
|
||||
}
|
||||
const {
|
||||
onBlur
|
||||
} = props;
|
||||
const {
|
||||
nTriggerFormBlur
|
||||
} = formItem;
|
||||
if (onBlur) call(onBlur, e);
|
||||
nTriggerFormBlur();
|
||||
void nextTick(() => {
|
||||
deriveDisplayedValueFromValue();
|
||||
});
|
||||
}
|
||||
function doClear(e) {
|
||||
const {
|
||||
onClear
|
||||
} = props;
|
||||
if (onClear) call(onClear, e);
|
||||
}
|
||||
function doAdd() {
|
||||
const {
|
||||
value: addable
|
||||
} = addableRef;
|
||||
if (!addable) {
|
||||
clearAddHoldTimeout();
|
||||
return;
|
||||
}
|
||||
const {
|
||||
value: mergedValue
|
||||
} = mergedValueRef;
|
||||
if (mergedValue === null) {
|
||||
if (!props.validator) {
|
||||
doUpdateValue(createValidValue());
|
||||
}
|
||||
} else {
|
||||
const {
|
||||
value: mergedStep
|
||||
} = mergedStepRef;
|
||||
deriveValueFromDisplayedValue({
|
||||
offset: mergedStep,
|
||||
doUpdateIfValid: true,
|
||||
isInputing: false,
|
||||
fixPrecision: true
|
||||
});
|
||||
}
|
||||
}
|
||||
function doMinus() {
|
||||
const {
|
||||
value: minusable
|
||||
} = minusableRef;
|
||||
if (!minusable) {
|
||||
clearMinusHoldTimeout();
|
||||
return;
|
||||
}
|
||||
const {
|
||||
value: mergedValue
|
||||
} = mergedValueRef;
|
||||
if (mergedValue === null) {
|
||||
if (!props.validator) {
|
||||
doUpdateValue(createValidValue());
|
||||
}
|
||||
} else {
|
||||
const {
|
||||
value: mergedStep
|
||||
} = mergedStepRef;
|
||||
deriveValueFromDisplayedValue({
|
||||
offset: -mergedStep,
|
||||
doUpdateIfValid: true,
|
||||
isInputing: false,
|
||||
fixPrecision: true
|
||||
});
|
||||
}
|
||||
}
|
||||
const handleFocus = doFocus;
|
||||
const handleBlur = doBlur;
|
||||
function createValidValue() {
|
||||
if (props.validator) return null;
|
||||
const {
|
||||
value: mergedMin
|
||||
} = mergedMinRef;
|
||||
const {
|
||||
value: mergedMax
|
||||
} = mergedMaxRef;
|
||||
if (mergedMin !== null) {
|
||||
return Math.max(0, mergedMin);
|
||||
} else if (mergedMax !== null) {
|
||||
return Math.min(0, mergedMax);
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
function handleClear(e) {
|
||||
doClear(e);
|
||||
doUpdateValue(null);
|
||||
}
|
||||
function handleMouseDown(e) {
|
||||
var _a, _b, _c;
|
||||
if ((_a = addButtonInstRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains(e.target)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
if ((_b = minusButtonInstRef.value) === null || _b === void 0 ? void 0 : _b.$el.contains(e.target)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
(_c = inputInstRef.value) === null || _c === void 0 ? void 0 : _c.activate();
|
||||
}
|
||||
let minusHoldStateIntervalId = null;
|
||||
let addHoldStateIntervalId = null;
|
||||
let firstMinusMousedownId = null;
|
||||
function clearMinusHoldTimeout() {
|
||||
if (firstMinusMousedownId) {
|
||||
window.clearTimeout(firstMinusMousedownId);
|
||||
firstMinusMousedownId = null;
|
||||
}
|
||||
if (minusHoldStateIntervalId) {
|
||||
window.clearInterval(minusHoldStateIntervalId);
|
||||
minusHoldStateIntervalId = null;
|
||||
}
|
||||
}
|
||||
let firstAddMousedownId = null;
|
||||
function clearAddHoldTimeout() {
|
||||
if (firstAddMousedownId) {
|
||||
window.clearTimeout(firstAddMousedownId);
|
||||
firstAddMousedownId = null;
|
||||
}
|
||||
if (addHoldStateIntervalId) {
|
||||
window.clearInterval(addHoldStateIntervalId);
|
||||
addHoldStateIntervalId = null;
|
||||
}
|
||||
}
|
||||
function handleMinusMousedown() {
|
||||
clearMinusHoldTimeout();
|
||||
firstMinusMousedownId = window.setTimeout(() => {
|
||||
minusHoldStateIntervalId = window.setInterval(() => {
|
||||
doMinus();
|
||||
}, HOLDING_CHANGE_INTERVAL);
|
||||
}, HOLDING_CHANGE_THRESHOLD);
|
||||
on("mouseup", document, clearMinusHoldTimeout, {
|
||||
once: true
|
||||
});
|
||||
}
|
||||
function handleAddMousedown() {
|
||||
clearAddHoldTimeout();
|
||||
firstAddMousedownId = window.setTimeout(() => {
|
||||
addHoldStateIntervalId = window.setInterval(() => {
|
||||
doAdd();
|
||||
}, HOLDING_CHANGE_INTERVAL);
|
||||
}, HOLDING_CHANGE_THRESHOLD);
|
||||
on("mouseup", document, clearAddHoldTimeout, {
|
||||
once: true
|
||||
});
|
||||
}
|
||||
const handleAddClick = () => {
|
||||
if (addHoldStateIntervalId) return;
|
||||
doAdd();
|
||||
};
|
||||
const handleMinusClick = () => {
|
||||
if (minusHoldStateIntervalId) return;
|
||||
doMinus();
|
||||
};
|
||||
function handleKeyDown(e) {
|
||||
var _a, _b;
|
||||
if (e.key === "Enter") {
|
||||
if (e.target === ((_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.wrapperElRef)) {
|
||||
return;
|
||||
}
|
||||
const value = deriveValueFromDisplayedValue({
|
||||
offset: 0,
|
||||
doUpdateIfValid: true,
|
||||
isInputing: false,
|
||||
fixPrecision: true
|
||||
});
|
||||
if (value !== false) {
|
||||
(_b = inputInstRef.value) === null || _b === void 0 ? void 0 : _b.deactivate();
|
||||
}
|
||||
} else if (e.key === "ArrowUp") {
|
||||
if (!addableRef.value) return;
|
||||
if (props.keyboard.ArrowUp === false) return;
|
||||
e.preventDefault();
|
||||
const value = deriveValueFromDisplayedValue({
|
||||
offset: 0,
|
||||
doUpdateIfValid: true,
|
||||
isInputing: false,
|
||||
fixPrecision: true
|
||||
});
|
||||
if (value !== false) {
|
||||
doAdd();
|
||||
}
|
||||
} else if (e.key === "ArrowDown") {
|
||||
if (!minusableRef.value) return;
|
||||
if (props.keyboard.ArrowDown === false) return;
|
||||
e.preventDefault();
|
||||
const value = deriveValueFromDisplayedValue({
|
||||
offset: 0,
|
||||
doUpdateIfValid: true,
|
||||
isInputing: false,
|
||||
fixPrecision: true
|
||||
});
|
||||
if (value !== false) {
|
||||
doMinus();
|
||||
}
|
||||
}
|
||||
}
|
||||
function handleUpdateDisplayedValue(value) {
|
||||
displayedValueRef.value = value;
|
||||
if (props.updateValueOnInput && !props.format && !props.parse && props.precision === void 0) {
|
||||
deriveValueFromDisplayedValue({
|
||||
offset: 0,
|
||||
doUpdateIfValid: true,
|
||||
isInputing: true,
|
||||
fixPrecision: false
|
||||
});
|
||||
}
|
||||
}
|
||||
watch(mergedValueRef, () => {
|
||||
deriveDisplayedValueFromValue();
|
||||
});
|
||||
const exposedMethods = {
|
||||
focus: () => {
|
||||
var _a;
|
||||
return (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
|
||||
},
|
||||
blur: () => {
|
||||
var _a;
|
||||
return (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.blur();
|
||||
},
|
||||
select: () => {
|
||||
var _a;
|
||||
return (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.select();
|
||||
}
|
||||
};
|
||||
const rtlEnabledRef = useRtl("InputNumber", mergedRtlRef, mergedClsPrefixRef);
|
||||
return Object.assign(Object.assign({}, exposedMethods), {
|
||||
rtlEnabled: rtlEnabledRef,
|
||||
inputInstRef,
|
||||
minusButtonInstRef,
|
||||
addButtonInstRef,
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
mergedBordered: mergedBorderedRef,
|
||||
uncontrolledValue: uncontrolledValueRef,
|
||||
mergedValue: mergedValueRef,
|
||||
mergedPlaceholder: mergedPlaceholderRef,
|
||||
displayedValueInvalid: displayedValueInvalidRef,
|
||||
mergedSize: mergedSizeRef,
|
||||
mergedDisabled: mergedDisabledRef,
|
||||
displayedValue: displayedValueRef,
|
||||
addable: addableRef,
|
||||
minusable: minusableRef,
|
||||
mergedStatus: mergedStatusRef,
|
||||
handleFocus,
|
||||
handleBlur,
|
||||
handleClear,
|
||||
handleMouseDown,
|
||||
handleAddClick,
|
||||
handleMinusClick,
|
||||
handleAddMousedown,
|
||||
handleMinusMousedown,
|
||||
handleKeyDown,
|
||||
handleUpdateDisplayedValue,
|
||||
// theme
|
||||
mergedTheme: themeRef,
|
||||
inputThemeOverrides: {
|
||||
paddingSmall: "0 8px 0 10px",
|
||||
paddingMedium: "0 8px 0 12px",
|
||||
paddingLarge: "0 8px 0 14px"
|
||||
},
|
||||
buttonThemeOverrides: computed(() => {
|
||||
const {
|
||||
self: {
|
||||
iconColorDisabled
|
||||
}
|
||||
} = themeRef.value;
|
||||
const [r, g, b, a] = rgba(iconColorDisabled);
|
||||
return {
|
||||
textColorTextDisabled: `rgb(${r}, ${g}, ${b})`,
|
||||
opacityDisabled: `${a}`
|
||||
};
|
||||
})
|
||||
});
|
||||
},
|
||||
render() {
|
||||
const {
|
||||
mergedClsPrefix,
|
||||
$slots
|
||||
} = this;
|
||||
const renderMinusButton = () => {
|
||||
return h(XButton, {
|
||||
text: true,
|
||||
disabled: !this.minusable || this.mergedDisabled || this.readonly,
|
||||
focusable: false,
|
||||
theme: this.mergedTheme.peers.Button,
|
||||
themeOverrides: this.mergedTheme.peerOverrides.Button,
|
||||
builtinThemeOverrides: this.buttonThemeOverrides,
|
||||
onClick: this.handleMinusClick,
|
||||
onMousedown: this.handleMinusMousedown,
|
||||
ref: "minusButtonInstRef"
|
||||
}, {
|
||||
icon: () => resolveSlot($slots["minus-icon"], () => [h(NBaseIcon, {
|
||||
clsPrefix: mergedClsPrefix
|
||||
}, {
|
||||
default: () => h(RemoveIcon, null)
|
||||
})])
|
||||
});
|
||||
};
|
||||
const renderAddButton = () => {
|
||||
return h(XButton, {
|
||||
text: true,
|
||||
disabled: !this.addable || this.mergedDisabled || this.readonly,
|
||||
focusable: false,
|
||||
theme: this.mergedTheme.peers.Button,
|
||||
themeOverrides: this.mergedTheme.peerOverrides.Button,
|
||||
builtinThemeOverrides: this.buttonThemeOverrides,
|
||||
onClick: this.handleAddClick,
|
||||
onMousedown: this.handleAddMousedown,
|
||||
ref: "addButtonInstRef"
|
||||
}, {
|
||||
icon: () => resolveSlot($slots["add-icon"], () => [h(NBaseIcon, {
|
||||
clsPrefix: mergedClsPrefix
|
||||
}, {
|
||||
default: () => h(AddIcon, null)
|
||||
})])
|
||||
});
|
||||
};
|
||||
return h("div", {
|
||||
class: [`${mergedClsPrefix}-input-number`, this.rtlEnabled && `${mergedClsPrefix}-input-number--rtl`]
|
||||
}, h(__unplugin_components_1$1, {
|
||||
ref: "inputInstRef",
|
||||
autofocus: this.autofocus,
|
||||
status: this.mergedStatus,
|
||||
bordered: this.mergedBordered,
|
||||
loading: this.loading,
|
||||
value: this.displayedValue,
|
||||
onUpdateValue: this.handleUpdateDisplayedValue,
|
||||
theme: this.mergedTheme.peers.Input,
|
||||
themeOverrides: this.mergedTheme.peerOverrides.Input,
|
||||
builtinThemeOverrides: this.inputThemeOverrides,
|
||||
size: this.mergedSize,
|
||||
placeholder: this.mergedPlaceholder,
|
||||
disabled: this.mergedDisabled,
|
||||
readonly: this.readonly,
|
||||
round: this.round,
|
||||
textDecoration: this.displayedValueInvalid ? "line-through" : void 0,
|
||||
onFocus: this.handleFocus,
|
||||
onBlur: this.handleBlur,
|
||||
onKeydown: this.handleKeyDown,
|
||||
onMousedown: this.handleMouseDown,
|
||||
onClear: this.handleClear,
|
||||
clearable: this.clearable,
|
||||
inputProps: this.inputProps,
|
||||
internalLoadingBeforeSuffix: true
|
||||
}, {
|
||||
prefix: () => {
|
||||
var _a;
|
||||
return this.showButton && this.buttonPlacement === "both" ? [renderMinusButton(), resolveWrappedSlot($slots.prefix, (children) => {
|
||||
if (children) {
|
||||
return h("span", {
|
||||
class: `${mergedClsPrefix}-input-number-prefix`
|
||||
}, children);
|
||||
}
|
||||
return null;
|
||||
})] : (_a = $slots.prefix) === null || _a === void 0 ? void 0 : _a.call($slots);
|
||||
},
|
||||
suffix: () => {
|
||||
var _a;
|
||||
return this.showButton ? [resolveWrappedSlot($slots.suffix, (children) => {
|
||||
if (children) {
|
||||
return h("span", {
|
||||
class: `${mergedClsPrefix}-input-number-suffix`
|
||||
}, children);
|
||||
}
|
||||
return null;
|
||||
}), this.buttonPlacement === "right" ? renderMinusButton() : null, renderAddButton()] : (_a = $slots.suffix) === null || _a === void 0 ? void 0 : _a.call($slots);
|
||||
}
|
||||
}));
|
||||
}
|
||||
});
|
||||
const _hoisted_1 = { class: "set-page" };
|
||||
const _hoisted_2 = { class: "set-item" };
|
||||
const _hoisted_3 = {
|
||||
key: 0,
|
||||
class: "set-item"
|
||||
};
|
||||
const _hoisted_4 = { class: "set-item" };
|
||||
const _hoisted_5 = { class: "flex items-center gap-2" };
|
||||
const _hoisted_6 = { class: "text-sm text-gray-400" };
|
||||
const _hoisted_7 = { class: "w-40" };
|
||||
const _hoisted_8 = { class: "set-item" };
|
||||
const _hoisted_9 = { class: "set-item-content" };
|
||||
const _hoisted_10 = { class: "flex items-center gap-2" };
|
||||
const _hoisted_11 = { class: "set-item" };
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
__name: "index",
|
||||
setup(__props) {
|
||||
const store = useStore();
|
||||
const checking = ref(false);
|
||||
const updateInfo = ref({
|
||||
hasUpdate: false,
|
||||
latestVersion: "",
|
||||
currentVersion: config.version,
|
||||
releaseInfo: null
|
||||
});
|
||||
const setData = computed(() => store.state.setData);
|
||||
watch(() => setData.value, (newVal) => {
|
||||
store.commit("setSetData", newVal);
|
||||
}, { deep: true });
|
||||
const isDarkTheme = computed({
|
||||
get: () => store.state.theme === "dark",
|
||||
set: () => store.commit("toggleTheme")
|
||||
});
|
||||
const openAuthor = () => {
|
||||
window.open(setData.value.authorUrl);
|
||||
};
|
||||
const restartApp = () => {
|
||||
window.electron.ipcRenderer.send("restart");
|
||||
};
|
||||
const checkForUpdates = async () => {
|
||||
checking.value = true;
|
||||
try {
|
||||
const result = await checkUpdate();
|
||||
updateInfo.value = result;
|
||||
} finally {
|
||||
checking.value = false;
|
||||
}
|
||||
};
|
||||
const openReleasePage = () => {
|
||||
window.open("https://github.com/algerkong/AlgerMusicPlayer/releases/latest");
|
||||
};
|
||||
onMounted(() => {
|
||||
checkForUpdates();
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_switch = __unplugin_components_3;
|
||||
const _component_n_input_number = __unplugin_components_1;
|
||||
const _component_n_slider = __unplugin_components_0;
|
||||
const _component_n_tag = __unplugin_components_4;
|
||||
const _component_n_button = Button;
|
||||
const _component_n_scrollbar = Scrollbar;
|
||||
return openBlock(), createBlock(_component_n_scrollbar, null, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", _hoisted_1, [
|
||||
createBaseVNode("div", _hoisted_2, [
|
||||
_cache[5] || (_cache[5] = createBaseVNode("div", null, [
|
||||
createBaseVNode("div", { class: "set-item-title" }, "主题模式"),
|
||||
createBaseVNode("div", { class: "set-item-content" }, "切换日间/夜间主题")
|
||||
], -1)),
|
||||
createVNode(_component_n_switch, {
|
||||
value: isDarkTheme.value,
|
||||
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => isDarkTheme.value = $event)
|
||||
}, {
|
||||
checked: withCtx(() => _cache[3] || (_cache[3] = [
|
||||
createBaseVNode("i", { class: "ri-moon-line" }, null, -1)
|
||||
])),
|
||||
unchecked: withCtx(() => _cache[4] || (_cache[4] = [
|
||||
createBaseVNode("i", { class: "ri-sun-line" }, null, -1)
|
||||
])),
|
||||
_: 1
|
||||
}, 8, ["value"])
|
||||
]),
|
||||
unref(isElectron) ? (openBlock(), createElementBlock("div", _hoisted_3, [
|
||||
_cache[6] || (_cache[6] = createBaseVNode("div", null, [
|
||||
createBaseVNode("div", { class: "set-item-title" }, "音乐API端口"),
|
||||
createBaseVNode("div", { class: "set-item-content" }, " 修改后需要重启应用 ")
|
||||
], -1)),
|
||||
createVNode(_component_n_input_number, {
|
||||
value: setData.value.musicApiPort,
|
||||
"onUpdate:value": _cache[1] || (_cache[1] = ($event) => setData.value.musicApiPort = $event)
|
||||
}, null, 8, ["value"])
|
||||
])) : createCommentVNode("", true),
|
||||
createBaseVNode("div", _hoisted_4, [
|
||||
_cache[7] || (_cache[7] = createBaseVNode("div", null, [
|
||||
createBaseVNode("div", { class: "set-item-title" }, "动画速度"),
|
||||
createBaseVNode("div", { class: "set-item-content" }, "调节动画播放速度")
|
||||
], -1)),
|
||||
createBaseVNode("div", _hoisted_5, [
|
||||
createBaseVNode("span", _hoisted_6, toDisplayString(setData.value.animationSpeed) + "x", 1),
|
||||
createBaseVNode("div", _hoisted_7, [
|
||||
createVNode(_component_n_slider, {
|
||||
value: setData.value.animationSpeed,
|
||||
"onUpdate:value": _cache[2] || (_cache[2] = ($event) => setData.value.animationSpeed = $event),
|
||||
min: 0.1,
|
||||
max: 3,
|
||||
step: 0.1,
|
||||
marks: {
|
||||
0.1: "极慢",
|
||||
1: "正常",
|
||||
3: "极快"
|
||||
},
|
||||
disabled: setData.value.noAnimate,
|
||||
class: "w-40"
|
||||
}, null, 8, ["value", "disabled"])
|
||||
])
|
||||
])
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_8, [
|
||||
createBaseVNode("div", null, [
|
||||
_cache[8] || (_cache[8] = createBaseVNode("div", { class: "set-item-title" }, "版本", -1)),
|
||||
createBaseVNode("div", _hoisted_9, [
|
||||
createTextVNode(toDisplayString(updateInfo.value.currentVersion) + " ", 1),
|
||||
updateInfo.value.hasUpdate ? (openBlock(), createBlock(_component_n_tag, {
|
||||
key: 0,
|
||||
type: "success",
|
||||
class: "ml-2"
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createTextVNode("发现新版本 " + toDisplayString(updateInfo.value.latestVersion), 1)
|
||||
]),
|
||||
_: 1
|
||||
})) : createCommentVNode("", true)
|
||||
])
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_10, [
|
||||
createVNode(_component_n_button, {
|
||||
type: updateInfo.value.hasUpdate ? "primary" : "default",
|
||||
size: "small",
|
||||
loading: checking.value,
|
||||
onClick: checkForUpdates
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
createTextVNode(toDisplayString(checking.value ? "检查中..." : "检查更新"), 1)
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["type", "loading"]),
|
||||
updateInfo.value.hasUpdate ? (openBlock(), createBlock(_component_n_button, {
|
||||
key: 0,
|
||||
type: "success",
|
||||
size: "small",
|
||||
onClick: openReleasePage
|
||||
}, {
|
||||
default: withCtx(() => _cache[9] || (_cache[9] = [
|
||||
createTextVNode(" 前往更新 ")
|
||||
])),
|
||||
_: 1
|
||||
})) : createCommentVNode("", true)
|
||||
])
|
||||
]),
|
||||
createBaseVNode("div", {
|
||||
class: "set-item cursor-pointer hover:text-green-500 hover:bg-green-950 transition-all",
|
||||
onClick: openAuthor
|
||||
}, [
|
||||
_cache[10] || (_cache[10] = createBaseVNode("div", null, [
|
||||
createBaseVNode("div", { class: "set-item-title" }, "作者"),
|
||||
createBaseVNode("div", { class: "set-item-content" }, "algerkong github")
|
||||
], -1)),
|
||||
createBaseVNode("div", null, toDisplayString(setData.value.author), 1)
|
||||
]),
|
||||
createBaseVNode("div", _hoisted_11, [
|
||||
_cache[12] || (_cache[12] = createBaseVNode("div", null, [
|
||||
createBaseVNode("div", { class: "set-item-title" }, "重启"),
|
||||
createBaseVNode("div", { class: "set-item-content" }, "重启应用")
|
||||
], -1)),
|
||||
createVNode(_component_n_button, {
|
||||
type: "primary",
|
||||
onClick: restartApp
|
||||
}, {
|
||||
default: withCtx(() => _cache[11] || (_cache[11] = [
|
||||
createTextVNode("重启")
|
||||
])),
|
||||
_: 1
|
||||
})
|
||||
])
|
||||
]),
|
||||
createVNode(PlayBottom)
|
||||
]),
|
||||
_: 1
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0331ad9e"]]);
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
Binary file not shown.
@@ -1,216 +0,0 @@
|
||||
import { d as defineComponent, r as ref, E as watch, o as onMounted, G as computed, c as createElementBlock, b as createBaseVNode, e as createVNode, f as withCtx, S as Scrollbar, g as useStore, ae as audioService, ab as resolveDirective, j as openBlock, a3 as Fragment, a4 as renderList, n as normalizeClass, u as unref, s as setAnimationClass, a2 as normalizeStyle, t as toDisplayString, w as withDirectives, a7 as getImgUrl, ai as formatNumber, T as createCommentVNode, a5 as setAnimationDelay, _ as _export_sfc } from "./index-DKaFsuse.js";
|
||||
import { g as getTopMv, a as getAllMv, M as MvPlayer } from "./MvPlayer-I4IDK1xL.js";
|
||||
import { N as NImage } from "./Image-DXClIklC.js";
|
||||
import "./Icon-DucaliTK.js";
|
||||
import "./Slider-BA6NituQ.js";
|
||||
import "./use-locale-DLWAOXez.js";
|
||||
import "./Drawer-BEJ8Ydua.js";
|
||||
import "./Ellipsis-D4R5dIX2.js";
|
||||
const _hoisted_1 = { class: "mv-list" };
|
||||
const _hoisted_2 = { class: "play-list-type" };
|
||||
const _hoisted_3 = { class: "categories-wrapper" };
|
||||
const _hoisted_4 = ["onClick"];
|
||||
const _hoisted_5 = ["onClick"];
|
||||
const _hoisted_6 = { class: "top" };
|
||||
const _hoisted_7 = { class: "play-count" };
|
||||
const _hoisted_8 = { class: "mv-item-title" };
|
||||
const _hoisted_9 = {
|
||||
key: 0,
|
||||
class: "loading-more"
|
||||
};
|
||||
const _hoisted_10 = {
|
||||
key: 1,
|
||||
class: "no-more"
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
...{
|
||||
name: "Mv"
|
||||
},
|
||||
__name: "index",
|
||||
setup(__props) {
|
||||
const showMv = ref(false);
|
||||
const mvList = ref([]);
|
||||
const playMvItem = ref();
|
||||
const store = useStore();
|
||||
const initLoading = ref(false);
|
||||
const loadingMore = ref(false);
|
||||
const currentIndex = ref(0);
|
||||
const offset = ref(0);
|
||||
const limit = ref(42);
|
||||
const hasMore = ref(true);
|
||||
const categories = [
|
||||
{ label: "全部", value: "全部" },
|
||||
{ label: "内地", value: "内地" },
|
||||
{ label: "港台", value: "港台" },
|
||||
{ label: "欧美", value: "欧美" },
|
||||
{ label: "日本", value: "日本" },
|
||||
{ label: "韩国", value: "韩国" }
|
||||
];
|
||||
const selectedCategory = ref("全部");
|
||||
watch(selectedCategory, async () => {
|
||||
offset.value = 0;
|
||||
mvList.value = [];
|
||||
hasMore.value = true;
|
||||
await loadMvList();
|
||||
});
|
||||
const getAnimationDelay = (index2) => {
|
||||
const currentPageIndex = index2 % limit.value;
|
||||
return setAnimationDelay(currentPageIndex, 30);
|
||||
};
|
||||
onMounted(async () => {
|
||||
await loadMvList();
|
||||
});
|
||||
const handleShowMv = async (item, index2) => {
|
||||
store.commit("setIsPlay", false);
|
||||
store.commit("setPlayMusic", false);
|
||||
audioService.getCurrentSound()?.pause();
|
||||
showMv.value = true;
|
||||
currentIndex.value = index2;
|
||||
playMvItem.value = item;
|
||||
};
|
||||
const playPrevMv = async (setLoading) => {
|
||||
try {
|
||||
if (currentIndex.value > 0) {
|
||||
const prevItem = mvList.value[currentIndex.value - 1];
|
||||
await handleShowMv(prevItem, currentIndex.value - 1);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const playNextMv = async (setLoading) => {
|
||||
try {
|
||||
if (currentIndex.value < mvList.value.length - 1) {
|
||||
const nextItem = mvList.value[currentIndex.value + 1];
|
||||
await handleShowMv(nextItem, currentIndex.value + 1);
|
||||
} else if (hasMore.value) {
|
||||
await loadMvList();
|
||||
if (mvList.value.length > currentIndex.value + 1) {
|
||||
const nextItem = mvList.value[currentIndex.value + 1];
|
||||
await handleShowMv(nextItem, currentIndex.value + 1);
|
||||
} else {
|
||||
showMv.value = false;
|
||||
}
|
||||
} else {
|
||||
showMv.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载更多MV失败:", error);
|
||||
showMv.value = false;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const loadMvList = async () => {
|
||||
try {
|
||||
if (!hasMore.value || loadingMore.value) return;
|
||||
if (offset.value === 0) {
|
||||
initLoading.value = true;
|
||||
} else {
|
||||
loadingMore.value = true;
|
||||
}
|
||||
const params = {
|
||||
limit: limit.value,
|
||||
offset: offset.value,
|
||||
area: selectedCategory.value === "全部" ? "" : selectedCategory.value
|
||||
};
|
||||
const res = selectedCategory.value === "全部" ? await getTopMv(params) : await getAllMv(params);
|
||||
const { data } = res.data;
|
||||
mvList.value.push(...data);
|
||||
hasMore.value = data.length === limit.value;
|
||||
offset.value += limit.value;
|
||||
} finally {
|
||||
initLoading.value = false;
|
||||
loadingMore.value = false;
|
||||
}
|
||||
};
|
||||
const handleScroll = (e) => {
|
||||
const target = e.target;
|
||||
const { scrollTop, clientHeight, scrollHeight } = target;
|
||||
const threshold = 100;
|
||||
if (scrollHeight - (scrollTop + clientHeight) < threshold) {
|
||||
loadMvList();
|
||||
}
|
||||
};
|
||||
const isPrevDisabled = computed(() => currentIndex.value === 0);
|
||||
return (_ctx, _cache) => {
|
||||
const _component_n_scrollbar = Scrollbar;
|
||||
const _component_n_image = NImage;
|
||||
const _directive_loading = resolveDirective("loading");
|
||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
createBaseVNode("div", _hoisted_2, [
|
||||
createVNode(_component_n_scrollbar, { "x-scrollable": "" }, {
|
||||
default: withCtx(() => [
|
||||
createBaseVNode("div", _hoisted_3, [
|
||||
(openBlock(), createElementBlock(Fragment, null, renderList(categories, (category, index2) => {
|
||||
return createBaseVNode("span", {
|
||||
key: category.value,
|
||||
class: normalizeClass(["play-list-type-item", [
|
||||
unref(setAnimationClass)("animate__bounceIn"),
|
||||
{ active: selectedCategory.value === category.value }
|
||||
]]),
|
||||
style: normalizeStyle(getAnimationDelay(index2)),
|
||||
onClick: ($event) => selectedCategory.value = category.value
|
||||
}, toDisplayString(category.label), 15, _hoisted_4);
|
||||
}), 64))
|
||||
])
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
createVNode(_component_n_scrollbar, {
|
||||
size: 100,
|
||||
onScroll: handleScroll
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
withDirectives((openBlock(), createElementBlock("div", {
|
||||
class: normalizeClass(["mv-list-content", unref(setAnimationClass)("animate__bounceInLeft")])
|
||||
}, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(mvList.value, (item, index2) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
key: item.id,
|
||||
class: normalizeClass(["mv-item", unref(setAnimationClass)("animate__bounceIn")]),
|
||||
style: normalizeStyle(getAnimationDelay(index2))
|
||||
}, [
|
||||
createBaseVNode("div", {
|
||||
class: "mv-item-img",
|
||||
onClick: ($event) => handleShowMv(item, index2)
|
||||
}, [
|
||||
createVNode(_component_n_image, {
|
||||
class: "mv-item-img-img",
|
||||
src: unref(getImgUrl)(item.cover, "320y180"),
|
||||
lazy: "",
|
||||
"preview-disabled": ""
|
||||
}, null, 8, ["src"]),
|
||||
createBaseVNode("div", _hoisted_6, [
|
||||
createBaseVNode("div", _hoisted_7, toDisplayString(unref(formatNumber)(item.playCount)), 1),
|
||||
_cache[1] || (_cache[1] = createBaseVNode("i", { class: "iconfont icon-videofill" }, null, -1))
|
||||
])
|
||||
], 8, _hoisted_5),
|
||||
createBaseVNode("div", _hoisted_8, toDisplayString(item.name), 1)
|
||||
], 6);
|
||||
}), 128)),
|
||||
loadingMore.value ? (openBlock(), createElementBlock("div", _hoisted_9, "加载中...")) : createCommentVNode("", true),
|
||||
!hasMore.value && !initLoading.value ? (openBlock(), createElementBlock("div", _hoisted_10, "没有更多了")) : createCommentVNode("", true)
|
||||
], 2)), [
|
||||
[_directive_loading, initLoading.value]
|
||||
])
|
||||
]),
|
||||
_: 1
|
||||
}),
|
||||
createVNode(MvPlayer, {
|
||||
show: showMv.value,
|
||||
"onUpdate:show": _cache[0] || (_cache[0] = ($event) => showMv.value = $event),
|
||||
"current-mv": playMvItem.value,
|
||||
"is-prev-disabled": isPrevDisabled.value,
|
||||
onNext: playNextMv,
|
||||
onPrev: playPrevMv
|
||||
}, null, 8, ["show", "current-mv", "is-prev-disabled"])
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7366dc5a"]]);
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
Binary file not shown.
@@ -1,214 +0,0 @@
|
||||
.mv-list[data-v-7366dc5a] {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1 1 0%;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mv-list-title[data-v-7366dc5a] {
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mv-list-title[data-v-7366dc5a]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mv-list .play-list-type .title[data-v-7366dc5a] {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mv-list .play-list-type .title[data-v-7366dc5a]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mv-list .play-list-type .categories-wrapper[data-v-7366dc5a] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mv-list .play-list-type-item[data-v-7366dc5a] {
|
||||
margin-right: 0.75rem;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-radius: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mv-list .play-list-type-item[data-v-7366dc5a]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mv-list .play-list-type-item[data-v-7366dc5a] {
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.mv-list .play-list-type-item[data-v-7366dc5a]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.mv-list .play-list-type-item[data-v-7366dc5a]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.mv-list .play-list-type-item[data-v-7366dc5a]:hover:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.mv-list .play-list-type-item.active[data-v-7366dc5a] {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mv-list-content[data-v-7366dc5a] {
|
||||
margin-top: 0.5rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding-bottom: 7rem;
|
||||
padding-right: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
}
|
||||
.mv-list .mv-item[data-v-7366dc5a] {
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.mv-list .mv-item[data-v-7366dc5a]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.mv-list .mv-item[data-v-7366dc5a] {
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.mv-list .mv-item[data-v-7366dc5a]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.mv-list .mv-item-img[data-v-7366dc5a] {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0.5rem;
|
||||
aspect-ratio: 16/9;
|
||||
line-height: 0;
|
||||
}
|
||||
.mv-list .mv-item-img:hover img[data-v-7366dc5a] {
|
||||
-o-object-position: top;
|
||||
object-position: top;
|
||||
transition-property: all;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.mv-list .mv-item-img:hover img[data-v-7366dc5a]:hover {
|
||||
--tw-scale-x: 1.1;
|
||||
--tw-scale-y: 1.1;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.mv-list .mv-item-img-img[data-v-7366dc5a] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 0.5rem;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
.mv-list .mv-item-img .top[data-v-7366dc5a] {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition-property: all;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.6;
|
||||
opacity: 0;
|
||||
}
|
||||
.mv-list .mv-item-img .top i[data-v-7366dc5a] {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mv-list .mv-item-img .top .play-count[data-v-7366dc5a] {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
--tw-text-opacity: 0.9;
|
||||
}
|
||||
.mv-list .mv-item-img .top[data-v-7366dc5a]:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.mv-list .mv-item-title[data-v-7366dc5a] {
|
||||
margin-top: 0.5rem;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.mv-list .mv-item-title[data-v-7366dc5a]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.loading-more[data-v-7366dc5a] {
|
||||
grid-column: 1 / -1;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-align: center;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.loading-more[data-v-7366dc5a]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.no-more[data-v-7366dc5a] {
|
||||
grid-column: 1 / -1;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-align: center;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.no-more[data-v-7366dc5a]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
Binary file not shown.
@@ -1,228 +0,0 @@
|
||||
.list-page[data-v-f9f1189c] {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
|
||||
}.list-page[data-v-f9f1189c]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.recommend[data-v-f9f1189c] {
|
||||
height: 100%;
|
||||
width: 100%
|
||||
}
|
||||
.recommend-title[data-v-f9f1189c] {
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.recommend-title[data-v-f9f1189c]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.recommend-list[data-v-f9f1189c] {
|
||||
display: grid;
|
||||
-moz-column-gap: 2rem;
|
||||
column-gap: 2rem;
|
||||
row-gap: 1.5rem;
|
||||
padding-bottom: 7rem;
|
||||
padding-right: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
|
||||
}
|
||||
.recommend-item[data-v-f9f1189c] {
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
.recommend-item-img[data-v-f9f1189c] {
|
||||
position: relative;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem
|
||||
}
|
||||
.recommend-item-img-img[data-v-f9f1189c] {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%
|
||||
}
|
||||
.recommend-item-img img[data-v-f9f1189c] {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 0.75rem;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover
|
||||
}
|
||||
.recommend-item-img:hover img[data-v-f9f1189c] {
|
||||
transition-property: all;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
|
||||
}
|
||||
.recommend-item-img:hover img[data-v-f9f1189c]:hover {
|
||||
--tw-scale-x: 1.1;
|
||||
--tw-scale-y: 1.1;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
|
||||
}
|
||||
.recommend-item-img .top[data-v-f9f1189c] {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition-property: all;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
--tw-bg-opacity: 0.5;
|
||||
opacity: 0
|
||||
}
|
||||
.recommend-item-img .top i[data-v-f9f1189c] {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
opacity: 0;
|
||||
transition-property: all;
|
||||
transition-duration: 500ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
|
||||
}
|
||||
.recommend-item-img .top[data-v-f9f1189c]:hover {
|
||||
opacity: 1
|
||||
}
|
||||
.recommend-item-img .top:hover i[data-v-f9f1189c] {
|
||||
--tw-scale-x: 1.5;
|
||||
--tw-scale-y: 1.5;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
opacity: 1
|
||||
}
|
||||
.recommend-item-img .top .play-count[data-v-f9f1189c] {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.recommend-item-title[data-v-f9f1189c] {
|
||||
margin-top: 0.5rem;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.recommend-item-title[data-v-f9f1189c]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.loading-more[data-v-f9f1189c] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.loading-more[data-v-f9f1189c]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.no-more[data-v-f9f1189c] {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-align: center;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.no-more[data-v-f9f1189c]:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.mobile .recommend-title[data-v-f9f1189c] {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700
|
||||
}
|
||||
.mobile .recommend-list[data-v-f9f1189c] {
|
||||
gap: 1rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
|
||||
}
|
||||
.play-list-type .categories-wrapper[data-v-f9f1189c] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
white-space: nowrap
|
||||
}
|
||||
.play-list-type-item[data-v-f9f1189c] {
|
||||
margin-right: 0.75rem;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-radius: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.play-list-type-item[data-v-f9f1189c]:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.play-list-type-item[data-v-f9f1189c] {
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
|
||||
}
|
||||
.play-list-type-item[data-v-f9f1189c]:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1))
|
||||
}
|
||||
.play-list-type-item[data-v-f9f1189c]:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.play-list-type-item[data-v-f9f1189c]:hover:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1))
|
||||
}
|
||||
.play-list-type-item.active[data-v-f9f1189c] {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
||||
}
|
||||
.mobile .play-list-type[data-v-f9f1189c] {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
width: 100%
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user