✨ feat: 支持 Docker 部署 #82

.dockerignore

@@ -0,0 +1,12 @@
+node_modules
+npm-debug.log
+Dockerfile*
+docker-compose*
+.dockerignore
+.git
+.github
+.gitignore
+README.md
+LICENSE
+.vscode
+dist

.npmrc

@@ -1,2 +1,5 @@
-ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
+registry=https://registry.npmmirror.com
+disturl=https://registry.npmmirror.com/-/binary/node
+# ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
+ELECTRON_MIRROR=https://registry.npmmirror.com/-/binary/electron/
 shamefully-hoist=true

Dockerfile

@@ -0,0 +1,29 @@
+# build
+FROM node:18-alpine as builder
+
+RUN apk update && apk add --no-cache git
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN [ ! -e ".env" ] && cp .env.example .env || true
+
+RUN npm run build
+
+# nginx
+FROM nginx:1.20.2-alpine as app
+
+COPY --from=builder /app/out/renderer /usr/share/nginx/html
+
+COPY --from=builder /app/nginx.conf /etc/nginx/conf.d/default.conf
+
+RUN apk add --no-cache npm
+
+RUN npm install -g NeteaseCloudMusicApi
+
+CMD nginx && npx NeteaseCloudMusicApi

README.md

@@ -120,6 +120,33 @@
 
 [Dev Workflow](https://github.com/imsyy/SPlayer/actions/workflows/build.yml)
 
+## ⚙️ Docker 部署
+
+> 安装及配置 `Docker` 将不在此处说明，请自行解决
+
+### 本地构建
+
+```bash
+# 构建
+docker build -t splayer .
+
+# 运行
+docker run -d --name SPlayer -p 7899:7899 splayer
+# 或使用 Docker Compose
+docker-compose up -d
+```
+
+### 在线部署
+
+```bash
+# 拉取
+docker pull imsyy/splayer:2.0.0-beta.5
+# 运行
+docker run -d --name SPlayer -p 7899:7899 imsyy/splayer:2.0.0-beta.5
+```
+
+以上步骤成功后，将会在本地 [localhost:7899](http://localhost:7899/) 启动，如需更换端口，请自行修改命令行中的端口号
+
 ## ⚙️ Vercel 部署
 
 > 其他部署平台大致相同，在此不做说明

auto-imports.d.ts

@@ -5,74 +5,65 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: (typeof import("vue"))["EffectScope"];
+  const EffectScope: typeof import('vue')['EffectScope']
-  const computed: (typeof import("vue"))["computed"];
+  const computed: typeof import('vue')['computed']
-  const createApp: (typeof import("vue"))["createApp"];
+  const createApp: typeof import('vue')['createApp']
-  const customRef: (typeof import("vue"))["customRef"];
+  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"];
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: (typeof import("vue"))["defineComponent"];
+  const defineComponent: typeof import('vue')['defineComponent']
-  const effectScope: (typeof import("vue"))["effectScope"];
+  const effectScope: typeof import('vue')['effectScope']
-  const getCurrentInstance: (typeof import("vue"))["getCurrentInstance"];
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: (typeof import("vue"))["getCurrentScope"];
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: (typeof import("vue"))["h"];
+  const h: typeof import('vue')['h']
-  const inject: (typeof import("vue"))["inject"];
+  const inject: typeof import('vue')['inject']
-  const isProxy: (typeof import("vue"))["isProxy"];
+  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: (typeof import("vue"))["isReactive"];
+  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: (typeof import("vue"))["isReadonly"];
+  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: (typeof import("vue"))["isRef"];
+  const isRef: typeof import('vue')['isRef']
-  const markRaw: (typeof import("vue"))["markRaw"];
+  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: (typeof import("vue"))["nextTick"];
+  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: (typeof import("vue"))["onActivated"];
+  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: (typeof import("vue"))["onBeforeMount"];
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"];
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"];
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: (typeof import("vue"))["onDeactivated"];
+  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"];
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: (typeof import("vue"))["onMounted"];
+  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: (typeof import("vue"))["onRenderTracked"];
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"];
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: (typeof import("vue"))["onScopeDispose"];
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"];
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: (typeof import("vue"))["onUnmounted"];
+  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: (typeof import("vue"))["onUpdated"];
+  const onUpdated: typeof import('vue')['onUpdated']
-  const provide: (typeof import("vue"))["provide"];
+  const provide: typeof import('vue')['provide']
-  const reactive: (typeof import("vue"))["reactive"];
+  const reactive: typeof import('vue')['reactive']
-  const readonly: (typeof import("vue"))["readonly"];
+  const readonly: typeof import('vue')['readonly']
-  const ref: (typeof import("vue"))["ref"];
+  const ref: typeof import('vue')['ref']
-  const resolveComponent: (typeof import("vue"))["resolveComponent"];
+  const resolveComponent: typeof import('vue')['resolveComponent']
-  const shallowReactive: (typeof import("vue"))["shallowReactive"];
+  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: (typeof import("vue"))["shallowReadonly"];
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: (typeof import("vue"))["shallowRef"];
+  const shallowRef: typeof import('vue')['shallowRef']
-  const toRaw: (typeof import("vue"))["toRaw"];
+  const toRaw: typeof import('vue')['toRaw']
-  const toRef: (typeof import("vue"))["toRef"];
+  const toRef: typeof import('vue')['toRef']
-  const toRefs: (typeof import("vue"))["toRefs"];
+  const toRefs: typeof import('vue')['toRefs']
-  const toValue: (typeof import("vue"))["toValue"];
+  const toValue: typeof import('vue')['toValue']
-  const triggerRef: (typeof import("vue"))["triggerRef"];
+  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: (typeof import("vue"))["unref"];
+  const unref: typeof import('vue')['unref']
-  const useAttrs: (typeof import("vue"))["useAttrs"];
+  const useAttrs: typeof import('vue')['useAttrs']
-  const useCssModule: (typeof import("vue"))["useCssModule"];
+  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: (typeof import("vue"))["useCssVars"];
+  const useCssVars: typeof import('vue')['useCssVars']
-  const useDialog: (typeof import("naive-ui"))["useDialog"];
+  const useDialog: typeof import('naive-ui')['useDialog']
-  const useLoadingBar: (typeof import("naive-ui"))["useLoadingBar"];
+  const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
-  const useMessage: (typeof import("naive-ui"))["useMessage"];
+  const useMessage: typeof import('naive-ui')['useMessage']
-  const useNotification: (typeof import("naive-ui"))["useNotification"];
+  const useNotification: typeof import('naive-ui')['useNotification']
-  const useSlots: (typeof import("vue"))["useSlots"];
+  const useSlots: typeof import('vue')['useSlots']
-  const watch: (typeof import("vue"))["watch"];
+  const watch: typeof import('vue')['watch']
-  const watchEffect: (typeof import("vue"))["watchEffect"];
+  const watchEffect: typeof import('vue')['watchEffect']
-  const watchPostEffect: (typeof import("vue"))["watchPostEffect"];
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: (typeof import("vue"))["watchSyncEffect"];
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
 // for type re-export
 declare global {
   // @ts-ignore
-  export type {
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
-    Component,
-    ComponentPublicInstance,
-    ComputedRef,
-    InjectionKey,
-    PropType,
-    Ref,
-    VNode,
-    WritableComputedRef,
-  } from "vue";
 }

docker-compose.yml

@@ -0,0 +1,12 @@
+services:
+  SPlayer:
+    build:
+      context: .
+    image: splayer
+    container_name: SPlayer
+    volumes:
+      - /etc/localtime:/etc/localtime:ro
+      - /etc/timezone:/etc/timezone:ro
+    ports:
+      - 7899:7899
+    restart: always

nginx.conf

@@ -0,0 +1,28 @@
+server {
+  gzip on;
+  listen       7899;
+  listen  [::]:7899;
+  server_name  localhost;
+
+  location / {
+    root      /usr/share/nginx/html;
+    index     index.html;
+    try_files $uri $uri/ /index.html;
+  }
+
+  location @rewrites {
+    rewrite ^(.*)$ /index.html last;
+  }
+
+  location /api/ {
+    proxy_buffers           16 32k;
+    proxy_buffer_size       128k;
+    proxy_busy_buffers_size 128k;
+    proxy_set_header        Host $host;
+    proxy_set_header        X-Real-IP $remote_addr;
+    proxy_set_header        X-Forwarded-For $remote_addr;
+    proxy_set_header        X-Forwarded-Host $remote_addr;
+    proxy_set_header        X-NginX-Proxy true;
+    proxy_pass              http://localhost:3000/;
+  }
+}

src/views/Like/index.vue

@@ -1,6 +1,41 @@
 <template>
   <div class="like">
     <n-h1 class="title">我的收藏</n-h1>
+    <!-- 数据统计 -->
+    <div class="num">
+      <!-- 专辑 -->
+      <div class="num-item">
+        <n-icon size="18">
+          <SvgIcon icon="album" />
+        </n-icon>
+        <n-number-animation :from="0" :to="userLikeData.albums?.length ?? 0" />
+        张专辑
+      </div>
+      <!-- 歌单 -->
+      <div class="num-item">
+        <n-icon size="18">
+          <SvgIcon icon="queue-music-rounded" />
+        </n-icon>
+        <n-number-animation :from="0" :to="userLikeData.playlists?.length ?? 0" />
+        个歌单
+      </div>
+      <!-- 歌手 -->
+      <div class="num-item">
+        <n-icon size="18">
+          <SvgIcon icon="account-music" />
+        </n-icon>
+        <n-number-animation :from="0" :to="userLikeData.artists?.length ?? 0" />
+        位歌手
+      </div>
+      <!-- 视频 -->
+      <div class="num-item">
+        <n-icon size="18">
+          <SvgIcon icon="video" />
+        </n-icon>
+        <n-number-animation :from="0" :to="userLikeData.mvs?.length ?? 0" />
+        个视频
+      </div>
+    </div>
     <!-- 标签页 -->
     <n-tabs v-model:value="tabValue" class="tabs" type="segment" @update:value="tabChange">
       <n-tab name="like-albums"> 专辑 </n-tab>
@@ -20,9 +55,13 @@
 </template>
 
 <script setup>
+import { storeToRefs } from "pinia";
+import { siteData } from "@/stores";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
+const data = siteData();
+const { userLikeData } = storeToRefs(data);
 
 // 默认选中
 const tabValue = ref(router.currentRoute.value?.name ?? "like-albums");
@@ -49,6 +88,30 @@ watch(
     font-size: 36px;
     font-weight: bold;
   }
+  .num {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 20px;
+    .num-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      &::after {
+        content: "/";
+        margin: 0 8px;
+        opacity: 0.6;
+      }
+      &:last-child {
+        &::after {
+          display: none;
+        }
+      }
+      .n-icon {
+        margin-right: 4px;
+      }
+    }
+  }
   .tabs {
     margin-bottom: 20px;
   }

src/views/Setting/index.vue

@@ -415,7 +415,7 @@
                 </template>
               </n-tag>
             </div>
-            <n-text class="tip">可能会造成卡顿等性能问题，请确保显卡为 GTX 2060 及以上</n-text>
+            <n-text class="tip">可能会造成卡顿等性能问题，建议显卡为 GTX 2060 及以上</n-text>
           </div>
           <n-switch v-model:value="showYrcAnimation" :disabled="!showYrc" :round="false" />
         </n-card>