injectlib/SPlayer
1
0
Fork 0
mirror of https://github.com/imsyy/SPlayer.git synced 2025-11-24 19:13:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: 支持 Docker 部署 #82

Browse Source
This commit is contained in:
imsyy
2023-12-20 14:40:39 +08:00
parent 461f216cab
commit 4cb8eb0213
9 changed files with 233 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.dockerignore Normal file
View File

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

5
.npmrc
View File

@@ -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

29
Dockerfile Normal file
View File

@@ -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

27
README.md
View File

@@ -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 部署
> 其他部署平台大致相同，在此不做说明

123
auto-imports.d.ts vendored
View File

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

12
docker-compose.yml Normal file
View File

@@ -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

28
nginx.conf Normal file
View File

@@ -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/;
}
}

63
src/views/Like/index.vue
View File

@@ -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;
}

2
src/views/Setting/index.vue
View File

@@ -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>