Refactor: Improve API endpoint URLs

Use consistent forward slashes in API endpoint URLs for
better readability and maintainability.  Also updated some
import paths to use single quotes for consistency.

.github/workflows/deploy.yml

@@ -0,0 +1,45 @@
+name: Deploy to Server
+
+on:
+  push:
+    branches: [app]
+  workflow_dispatch:
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          ref: app
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16.16.0"
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build project
+        run: yarn build
+
+      - name: Clear destination directory
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USERNAME }}
+          key: ${{ secrets.SERVER_SSH_KEY }}
+          script: |
+            rm -rf /usr/share/nginx/html/163-music
+
+      - name: Deploy to server
+        uses: appleboy/scp-action@master
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USERNAME }}
+          key: ${{ secrets.SERVER_SSH_KEY }}
+          source: "dist/*"
+          target: "/usr/share/nginx/html/163-music"
+          strip_components: 1

DirectoryV3.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?> 
+ <trees>
+     <tree path="/public/index.html" title="骨架屏生成会覆盖它"/>
+ </trees>

README.md

@@ -200,7 +200,7 @@
      // 先设置播放列表
      commit(types.SET_SEQUENCE_LIST, list);
      // 如果是随机
-     if (state.mode == playMode.random) {
+     if (state.mode === playMode.random) {
        // 那么就打乱数组
        let randomList = shuffle(list);
        // 设置当前播放列表：随机，顺序
@@ -233,4 +233,4 @@
 
 ## :rainbow: 参考
 
-1. 借鉴了[黄轶](https://github.com/ustbhuangyi)的[Vue2.0 开发企业级移动端音乐 Web App](https://coding.imooc.com/class/107.html)中全屏播放器和 mini 播放器的实现思路
+1. 借鉴了[黄轶](https://github.com/ustbhuangyi)的[Vue2.0 开发企业级移动端音乐 Web App](https://coding.imooc.com/class/107.html)中全屏播放器和 mini 播放器的实现思路

build/skeleton/skeleton.client.js

@@ -1,32 +1,32 @@
-const fs = require("fs");
-const { resolve } = require("path");
-const htmlMinifier = require("html-minifier");
-const chalk = require("chalk");
+const fs = require('fs');
+const { resolve } = require('path');
+const htmlMinifier = require('html-minifier');
+const chalk = require('chalk');
 
 // 创建一个 renderer 实例
-const { createBundleRenderer } = require("vue-server-renderer");
+const { createBundleRenderer } = require('vue-server-renderer');
 
 // 依赖的文件
-const publicHtml = resolve(__dirname, "../../public/index.html");
-const skeletonJson = resolve(__dirname, "./skeleton.json");
-const skeletonTemplate = resolve(__dirname, "./skeleton.template.html");
+const publicHtml = resolve(__dirname, '../../public/index.html');
+const skeletonJson = resolve(__dirname, './skeleton.json');
+const skeletonTemplate = resolve(__dirname, './skeleton.template.html');
 
 // https://ssr.vuejs.org/zh/api/#createrenderer
 // 创建一个 BundleRenderer 实例
 const renderer = createBundleRenderer(skeletonJson, {
-  template: fs.readFileSync(skeletonTemplate, "utf-8")
+  template: fs.readFileSync(skeletonTemplate, 'utf-8'),
 });
 renderer.renderToString({}, (err, html) => {
   // 压缩html
   html = htmlMinifier.minify(html, {
     collapseInlineTagWhitespace: true,
-    minifyCSS: true
+    minifyCSS: true,
   });
   // 重写public/index.html
-  fs.writeFileSync(publicHtml, html, "utf-8");
+  fs.writeFileSync(publicHtml, html, 'utf-8');
   if (err) {
-    console.log(chalk.red("骨架屏生成失败！错误：" + err));
+    console.log(chalk.red('骨架屏生成失败！错误：' + err));
     process.exit(1);
   }
-  console.log(chalk.green("骨架屏生成成功！"));
-});
+  console.log(chalk.green('骨架屏生成成功！'));
+});

build/skeleton/skeleton.config.js

@@ -1,66 +1,67 @@
-const { resolve } = require("path");
-const nodeExternals = require("webpack-node-externals");
+const { resolve } = require('path');
+const nodeExternals = require('webpack-node-externals');
 // webpack中读取bundle对象
-const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
-const autoprefixer = require("autoprefixer");
-const { VueLoaderPlugin } = require("vue-loader");
+const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');
+const autoprefixer = require('autoprefixer');
+const { VueLoaderPlugin } = require('vue-loader');
 
 // 依赖的文件
-const skeletonEntry = resolve(__dirname, "skeleton.entry.js");
+const skeletonEntry = resolve(__dirname, 'skeleton.entry.js');
 
 module.exports = {
-  mode: "production",
-  target: "node",
+  mode: 'production',
+  target: 'node',
   entry: {
-    skeleton: skeletonEntry
+    skeleton: skeletonEntry,
   },
   output: {
-    path: resolve(__dirname, "."),
-    filename: "[name].js",
-    libraryTarget: "commonjs2"
+    path: resolve(__dirname, '.'),
+    filename: '[name].js',
+    libraryTarget: 'commonjs2',
   },
   module: {
     rules: [
       {
         test: /\.css$/,
-        use: ["vue-style-loader", "css-loader", "postcss-loader"]
+        use: ['vue-style-loader', 'css-loader', 'postcss-loader'],
       },
+      // scss
       {
-        test: /\.less$/,
-        use: ["vue-style-loader", "css-loader", "less-loader", "postcss-loader"]
+        test: /\.scss$/,
+        use: ['vue-style-loader', 'css-loader', 'sass-loader'],
       },
       {
         test: /\.vue$/,
         use: [
           {
-            loader: "vue-loader",
+            loader: 'vue-loader',
             options: {
               loaders: {
-                scss: ["vue-style-loader", "css-loader", "less-loader"]
+                scss: ['vue-style-loader', 'css-loader', 'less-loader'],
               },
-              postcss: [autoprefixer()]
-            }
-          }
-        ]
-      }
-    ]
+              postcss: [autoprefixer()],
+            },
+          },
+        ],
+      },
+    ],
   },
   // 防止将某些 import 的包打包到 bundle 中，只在运行时从外部获取这些扩展依赖
   externals: nodeExternals({
-    whilelist: /\.css$/
+    whilelist: /\.css$/,
   }),
   resolve: {
-    extensions: [".js", ".vue", ".json"],
-    alias:{
-      'components': resolve('src/components'),
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      components: resolve('src/components'),
     },
   },
   plugins: [
     new VueLoaderPlugin(),
     // 指定输出的json文件名，执行构建过程中，生成了一个skeleton.json文件，
     // 这个文件存储着骨架屏的样式与内容，在创建BundleRenderer 实例，会读取到
     new VueSSRServerPlugin({
-      filename: "skeleton.json"
-    })
-  ]
-};
+      filename: 'skeleton.json',
+    }),
+  ],
+};

build/skeleton/skeleton.entry.js

@@ -1,10 +1,11 @@
-import Vue from "vue";
-import Skeleton from "./skeleton.home.vue";
-import SkeletonComponents from "components/skeleton/install";
+import SkeletonComponents from 'components/skeleton/install';
+import Vue from 'vue';
+import Skeleton from './skeleton.home.vue';
+
 Vue.use(SkeletonComponents);
 export default new Vue({
   components: {
-    Skeleton
+    Skeleton,
   },
-  template: "<skeleton />"
-});
+  template: '<skeleton />',
+});

build/skeleton/skeleton.home.vue

@@ -18,7 +18,7 @@
 <script>
 export default {};
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .banner {
   width: 100%;
   box-sizing: border-box;
@@ -27,4 +27,4 @@ export default {};
 .margin {
   margin-left: 20px;
 }
-</style>
+</style>

build/skeleton/skeleton.server.js

@@ -1,9 +1,9 @@
-"use strict";
-const webpack = require("webpack");
-const chalk = require("chalk");
-const webpackSkeletonConfig = require("./skeleton.config.js");
+'use strict';
+const webpack = require('webpack');
+const chalk = require('chalk');
+const webpackSkeletonConfig = require('./skeleton.config.js');
 
-webpack(webpackSkeletonConfig, function(err, stats) {
+webpack(webpackSkeletonConfig, function (err, stats) {
   if (err) throw err;
   // http://javascript.ruanyifeng.com/nodejs/process.html
   // 等同于console.log，可用在标准输出向用户显示内容
@@ -14,13 +14,13 @@ webpack(webpackSkeletonConfig, function(err, stats) {
       modules: false,
       children: false,
       chunks: false,
-      chunkModules: false
-    }) + "\n"
+      chunkModules: false,
+    }) + '\n'
   );
 
   if (stats.hasErrors()) {
-    console.error(chalk.magenta("skeleton.json生成失败！错误：", err));
+    console.error(chalk.magenta('skeleton.json生成失败！错误：', err));
     process.exit(1);
   }
-  console.log(chalk.green("skeleton.json生成成功！"));
-});
+  console.log(chalk.green('skeleton.json生成成功！'));
+});

build/skeleton/skeleton.template.html

@@ -1,18 +1,22 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
-    <title>vue仿网易云音乐🎵</title>
-    <script src="https://cdn.bootcss.com/sprint/0.9.2/sprint.min.js"></script>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but vue2.6 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app">
-      <!--vue-ssr-outlet-->
-    </div>
-  </body>
-</html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+  <title>vue仿网易云音乐🎵</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-JobWAqYk5CSjWuVV3mxgS+MmccJqkrBaDhk8SKS1BW+71dJ9gzascwzW85UwGhxiSyR7Pxhu50k+Nl3+o5I49A=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/sprint/0.9.2/sprint.min.js" integrity="sha512-9Q1nzQJpWCxGgXr/9KKV2uTzYoHBcBOCySfj34xzPzTPGNZOp1qu9LwL+mXHvcIdx+oOxou1qZEGFPknqxwT1Q=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+</head>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+<body>
+<noscript>
+  <strong>We're sorry but vue2.6 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+</noscript>
+<div id="app">
+  <!--vue-ssr-outlet-->
+</div>
+</body>
+</html>

check-version.js

@@ -0,0 +1,59 @@
+/* eslint-disable */
+const execSync = require('child_process').execSync;
+let nodeVersion = require('./package.json').itemVersion.node;
+let yarnVersion = require('./package.json').itemVersion.yarn;
+function consoleError(msg) {
+  console.error(`\x1b[31m%s\x1b[0m`, msg);
+}
+function consoleInfo(msg) {
+  console.info(`\x1b[36m%s\x1b[0m`, msg);
+}
+// 获取yarn版本
+function getYarnVersion() {
+  try {
+    return execSync('yarn --version', { encoding: 'utf8' }).replace(/v/i, '').trim();
+  } catch (error) {
+    consoleError('Yarn is not installed.');
+    process.exit(1);
+  }
+}
+// 获取node版本
+function getNodeVersion() {
+  try {
+    return execSync('node --version', { encoding: 'utf8' }).replace(/v/i, '').trim();
+  } catch (error) {
+    consoleError('Node is not installed.');
+    process.exit(1);
+  }
+}
+// yarn.lock 文件是否存在
+function haveYarnLock() {
+  const fs = require('fs');
+  return fs.existsSync('yarn.lock');
+}
+
+// 1. yarn.lock 文件是否存在
+if (!haveYarnLock()) {
+  consoleError('yarn.lock file does not exist.');
+  process.exit(1);
+}
+// 2. yarn 是否安装
+const currentYarnversion = getYarnVersion().replace(/\./g, '');
+const currentNodeVersion = getNodeVersion().replace(/\./g, '');
+const _nodeVersion = nodeVersion.replace(/\./g, '').split(' ')[1];
+const _yarnVersion = yarnVersion.replace(/\./g, '').split(' ')[1];
+
+// 3. node版本是否符合
+
+if (currentNodeVersion !== _nodeVersion) {
+  consoleError(`Current node version is ${getNodeVersion()}, the required version is ${nodeVersion}`);
+  consoleInfo(`Please use nvm to switch the node version, https://github.com/coreybutler/nvm-windows`);
+  process.exit(1);
+}
+
+// 4. yarn版本是否符合
+if (currentYarnversion < _yarnVersion) {
+  consoleError(`Current yarn version is ${getYarnVersion()}, the required version is ${yarnVersion}`);
+  consoleInfo(`Please upgrade yarn to the required version, https://github.com/yarnpkg/yarn/releases`);
+  process.exit(1);
+}