🦄 refactor: 重构整个项目 优化打包 修改后台服务为本地运行 添加更新版本检测功能

src/renderer/utils/index.ts

@@ -0,0 +1,144 @@
+import { computed } from 'vue';
+import axios from 'axios';
+import config from '../../../package.json';
+
+import store from '@/store';
+
+// 设置歌手背景图片
+export const setBackgroundImg = (url: String) => {
+  return `background-image:url(${url})`;
+};
+// 设置动画类型
+export const setAnimationClass = (type: String) => {
+  if (store.state.setData && store.state.setData.noAnimate) {
+    return '';
+  }
+  const speed = store.state.setData?.animationSpeed || 1;
+
+  let speedClass = '';
+  if (speed <= 0.3) speedClass = 'animate__slower';
+  else if (speed <= 0.8) speedClass = 'animate__slow';
+  else if (speed >= 2.5) speedClass = 'animate__faster';
+  else if (speed >= 1.5) speedClass = 'animate__fast';
+
+  return `animate__animated ${type}${speedClass ? ` ${speedClass}` : ''}`;
+};
+// 设置动画延时
+export const setAnimationDelay = (index: number = 6, time: number = 50) => {
+  const speed = store.state.setData?.animationSpeed || 1;
+  return `animation-delay:${(index * time) / (speed * 2)}ms`;
+};
+
+// 将秒转换为分钟和秒
+export const secondToMinute = (s: number) => {
+  if (!s) {
+    return '00:00';
+  }
+  const minute: number = Math.floor(s / 60);
+  const second: number = Math.floor(s % 60);
+  const minuteStr: string = minute > 9 ? minute.toString() : `0${minute.toString()}`;
+  const secondStr: string = second > 9 ? second.toString() : `0${second.toString()}`;
+  return `${minuteStr}:${secondStr}`;
+};
+
+// 格式化数字 千,万, 百万, 千万,亿
+const units = [
+  { value: 1e8, symbol: '亿' },
+  { value: 1e4, symbol: '万' }
+];
+
+export const formatNumber = (num: string | number) => {
+  num = Number(num);
+  for (let i = 0; i < units.length; i++) {
+    if (num >= units[i].value) {
+      return `${(num / units[i].value).toFixed(1)}${units[i].symbol}`;
+    }
+  }
+  return num.toString();
+};
+
+const windowData = window as any;
+export const getIsMc = () => {
+  if (!windowData.electron) {
+    return false;
+  }
+  const setData = window.electron.ipcRenderer.sendSync('get-store-value', 'set');
+  if (setData.isProxy) {
+    return true;
+  }
+  return false;
+};
+const ProxyUrl = import.meta.env.VITE_API_PROXY;
+
+export const getMusicProxyUrl = (url: string) => {
+  if (!getIsMc()) {
+    return url;
+  }
+  const PUrl = url.split('').join('+');
+  return `${ProxyUrl}/mc?url=${PUrl}`;
+};
+
+export const getImgUrl = (url: string | undefined, size: string = '') => {
+  const bdUrl = 'https://image.baidu.com/search/down?url=';
+  const imgUrl = `${url}?param=${size}`;
+  if (!getIsMc()) {
+    return imgUrl;
+  }
+  return `${bdUrl}${encodeURIComponent(imgUrl)}`;
+};
+
+export const isMobile = computed(() => {
+  const flag = navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+  );
+
+  store.state.isMobile = !!flag;
+
+  // 给html标签 添加mobile
+  if (flag) document.documentElement.classList.add('mobile');
+  return !!flag;
+});
+
+export const isElectron = (window as any).electron !== undefined;
+
+/**
+ * 检查版本更新
+ * @returns {Promise<{hasUpdate: boolean, latestVersion: string, currentVersion: string}>}
+ */
+export const checkUpdate = async () => {
+  try {
+    const response = await axios.get('https://api.github.com/repos/algerkong/AlgerMusicPlayer/releases/latest');
+    const latestVersion = response.data.tag_name.replace('v', '');
+    const currentVersion = config.version;
+    console.log(latestVersion, currentVersion);
+
+    // 版本号比较
+    const latest = latestVersion.split('.').map(Number);
+    const current = currentVersion.split('.').map(Number);
+
+    let hasUpdate = false;
+    for (let i = 0; i < 3; i++) {
+      if (latest[i] > current[i]) {
+        hasUpdate = true;
+        break;
+      } else if (latest[i] < current[i]) {
+        break;
+      }
+    }
+
+    return {
+      hasUpdate,
+      latestVersion,
+      currentVersion,
+      releaseInfo: response.data
+    };
+  } catch (error) {
+    console.error('检查更新失败:', error);
+    return {
+      hasUpdate: false,
+      latestVersion: '',
+      currentVersion: config.version,
+      releaseInfo: null
+    };
+  }
+};

src/renderer/utils/linearColor.ts

@@ -0,0 +1,277 @@
+interface IColor {
+  backgroundColor: string;
+  primaryColor: string;
+}
+
+export const getImageLinearBackground = async (imageSrc: string): Promise<IColor> => {
+  try {
+    const primaryColor = await getImagePrimaryColor(imageSrc);
+    return {
+      backgroundColor: generateGradientBackground(primaryColor),
+      primaryColor
+    };
+  } catch (error) {
+    console.error('error', error);
+    return {
+      backgroundColor: '',
+      primaryColor: ''
+    };
+  }
+};
+
+export const getImageBackground = async (img: HTMLImageElement): Promise<IColor> => {
+  try {
+    const primaryColor = await getImageColor(img);
+    return {
+      backgroundColor: generateGradientBackground(primaryColor),
+      primaryColor
+    };
+  } catch (error) {
+    console.error('error', error);
+    return {
+      backgroundColor: '',
+      primaryColor: ''
+    };
+  }
+};
+
+const getImageColor = (img: HTMLImageElement): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      reject(new Error('无法获取canvas上下文'));
+      return;
+    }
+
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const color = getAverageColor(imageData.data);
+    resolve(`rgb(${color.join(',')})`);
+  });
+};
+
+const getImagePrimaryColor = (imageSrc: string): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+    img.src = imageSrc;
+
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        reject(new Error('无法获取canvas上下文'));
+        return;
+      }
+
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const color = getAverageColor(imageData.data);
+      resolve(`rgb(${color.join(',')})`);
+    };
+
+    img.onerror = () => reject(new Error('图片加载失败'));
+  });
+};
+
+const getAverageColor = (data: Uint8ClampedArray): number[] => {
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let count = 0;
+  for (let i = 0; i < data.length; i += 4) {
+    r += data[i];
+    g += data[i + 1];
+    b += data[i + 2];
+    count++;
+  }
+  return [Math.round(r / count), Math.round(g / count), Math.round(b / count)];
+};
+
+const generateGradientBackground = (color: string): string => {
+  const [r, g, b] = color.match(/\d+/g)?.map(Number) || [0, 0, 0];
+  const [h, s, l] = rgbToHsl(r, g, b);
+
+  // 增加亮度和暗度的差异
+  const lightL = Math.min(l + 0.2, 0.95);
+  const darkL = Math.max(l - 0.3, 0.05);
+  const midL = (lightL + darkL) / 2;
+
+  // 调整饱和度以增强效果
+  const lightS = Math.min(s * 0.8, 1);
+  const darkS = Math.min(s * 1.2, 1);
+
+  const [lightR, lightG, lightB] = hslToRgb(h, lightS, lightL);
+  const [midR, midG, midB] = hslToRgb(h, s, midL);
+  const [darkR, darkG, darkB] = hslToRgb(h, darkS, darkL);
+
+  const lightColor = `rgb(${lightR}, ${lightG}, ${lightB})`;
+  const midColor = `rgb(${midR}, ${midG}, ${midB})`;
+  const darkColor = `rgb(${darkR}, ${darkG}, ${darkB})`;
+
+  // 使用三个颜色点创建更丰富的渐变
+  return `linear-gradient(to bottom, ${lightColor} 0%, ${midColor} 50%, ${darkColor} 100%)`;
+};
+
+// Helper functions (unchanged)
+function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s;
+  const l = (max + min) / 2;
+
+  if (max === min) {
+    h = s = 0;
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+      default:
+        break;
+    }
+    h /= 6;
+  }
+
+  return [h, s, l];
+}
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  let r;
+  let g;
+  let b;
+
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+// 添加新的接口
+interface ITextColors {
+  primary: string;
+  active: string;
+  theme: string;
+}
+
+// 添加新的函数
+export const calculateBrightness = (r: number, g: number, b: number): number => {
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+};
+
+export const parseGradient = (gradientStr: string) => {
+  const matches = gradientStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/g);
+  if (!matches) return [];
+  return matches.map((rgb) => {
+    const [r, g, b] = rgb.match(/\d+/g)!.map(Number);
+    return { r, g, b };
+  });
+};
+
+export const interpolateRGB = (start: number, end: number, progress: number) => {
+  return Math.round(start + (end - start) * progress);
+};
+
+export const createGradientString = (
+  colors: { r: number; g: number; b: number }[],
+  percentages = [0, 50, 100]
+) => {
+  return `linear-gradient(to bottom, ${colors
+    .map((color, i) => `rgb(${color.r}, ${color.g}, ${color.b}) ${percentages[i]}%`)
+    .join(', ')})`;
+};
+
+export const getTextColors = (gradient: string = ''): ITextColors => {
+  const defaultColors = {
+    primary: 'rgba(255, 255, 255, 0.54)',
+    active: '#ffffff',
+    theme: 'light'
+  };
+
+  if (!gradient) return defaultColors;
+
+  const colors = parseGradient(gradient);
+  if (!colors.length) return defaultColors;
+
+  const mainColor = colors[1] || colors[0];
+  const brightness = calculateBrightness(mainColor.r, mainColor.g, mainColor.b);
+  const isDark = brightness > 0.6;
+
+  return {
+    primary: isDark ? 'rgba(0, 0, 0, 0.54)' : 'rgba(255, 255, 255, 0.54)',
+    active: isDark ? '#000000' : '#ffffff',
+    theme: isDark ? 'dark' : 'light'
+  };
+};
+
+export const getHoverBackgroundColor = (isDark: boolean): string => {
+  return isDark ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.08)';
+};
+
+export const animateGradient = (
+  oldGradient: string,
+  newGradient: string,
+  onUpdate: (gradient: string) => void,
+  duration = 1000
+) => {
+  const startColors = parseGradient(oldGradient);
+  const endColors = parseGradient(newGradient);
+  if (startColors.length !== endColors.length) return null;
+
+  const startTime = performance.now();
+
+  const animate = (currentTime: number) => {
+    const elapsed = currentTime - startTime;
+    const progress = Math.min(elapsed / duration, 1);
+
+    const currentColors = startColors.map((startColor, i) => ({
+      r: interpolateRGB(startColor.r, endColors[i].r, progress),
+      g: interpolateRGB(startColor.g, endColors[i].g, progress),
+      b: interpolateRGB(startColor.b, endColors[i].b, progress)
+    }));
+
+    onUpdate(createGradientString(currentColors));
+
+    if (progress < 1) {
+      return requestAnimationFrame(animate);
+    }
+    return null;
+  };
+
+  return requestAnimationFrame(animate);
+};

src/renderer/utils/request.ts

@@ -0,0 +1,77 @@
+import axios, { InternalAxiosRequestConfig } from 'axios';
+
+const setData = window.electron.ipcRenderer.sendSync('get-store-value', 'set')
+
+// 扩展请求配置接口
+interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
+  retryCount?: number;
+}
+
+const baseURL = window.electron ? `http://127.0.0.1:${setData.musicApiPort}` : import.meta.env.VITE_API;
+
+const request = axios.create({
+  baseURL,
+  timeout: 5000
+});
+
+// 最大重试次数
+const MAX_RETRIES = 3;
+// 重试延迟（毫秒）
+const RETRY_DELAY = 500;
+
+// 请求拦截器
+request.interceptors.request.use(
+  (config: CustomAxiosRequestConfig) => {
+    // 初始化重试次数
+    config.retryCount = 0;
+
+    // 在请求发送之前做一些处理
+    // 在get请求params中添加timestamp
+    if (config.method === 'get') {
+      config.params = {
+        ...config.params,
+        timestamp: Date.now()
+      };
+      const token = localStorage.getItem('token');
+      if (token) {
+        config.params.cookie = token;
+      }
+    }
+
+    return config;
+  },
+  (error) => {
+    // 当请求异常时做一些处理
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+request.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  async (error) => {
+    const config = error.config as CustomAxiosRequestConfig;
+
+    // 如果没有配置重试次数，则初始化为0
+    if (!config || !config.retryCount) {
+      config.retryCount = 0;
+    }
+
+    // 检查是否还可以重试
+    if (config.retryCount < MAX_RETRIES) {
+      config.retryCount++;
+
+      // 延迟重试
+      await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
+
+      // 重新发起请求
+      return request(config);
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default request;

src/renderer/utils/request_music.ts

@@ -0,0 +1,20 @@
+import axios from 'axios';
+
+const baseURL = `${import.meta.env.VITE_API_MUSIC}`;
+const request = axios.create({
+  baseURL,
+  timeout: 10000
+});
+
+// 请求拦截器
+request.interceptors.request.use(
+  (config) => {
+    return config;
+  },
+  (error) => {
+    // 当请求异常时做一些处理
+    return Promise.reject(error);
+  }
+);
+
+export default request;

src/renderer/utils/theme.ts

@@ -0,0 +1,19 @@
+export type ThemeType = 'dark' | 'light';
+
+// 应用主题
+export const applyTheme = (theme: ThemeType) => {
+  // 使用 Tailwind 的暗色主题类
+  if (theme === 'dark') {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+
+  // 保存主题到本地存储
+  localStorage.setItem('theme', theme);
+};
+
+// 获取当前主题
+export const getCurrentTheme = (): ThemeType => {
+  return (localStorage.getItem('theme') as ThemeType) || 'light';
+};