新增桌面歌词
This commit is contained in:
lyswhut
@@ -0,0 +1,324 @@
|
||||
<template lang="pug">
|
||||
#container(:class="[theme, lrcConfig.isLock ? 'lock' : null]")
|
||||
#main
|
||||
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
|
||||
.control-bar(v-show="!lrcConfig.isLock")
|
||||
core-control-bar(:lrcConfig="lrcConfig" :themes="themeList")
|
||||
core-lyric(:lrcConfig="lrcConfig")
|
||||
div.resize-left(@mousedown.self="handleMouseDown('left', $event)")
|
||||
div.resize-top(@mousedown.self="handleMouseDown('top', $event)")
|
||||
div.resize-right(@mousedown.self="handleMouseDown('right', $event)")
|
||||
div.resize-bottom(@mousedown.self="handleMouseDown('bottom', $event)")
|
||||
div.resize-top-left(@mousedown.self="handleMouseDown('top-left', $event)")
|
||||
div.resize-top-right(@mousedown.self="handleMouseDown('top-right', $event)")
|
||||
div.resize-bottom-left(@mousedown.self="handleMouseDown('bottom-left', $event)")
|
||||
div.resize-bottom-right(@mousedown.self="handleMouseDown('bottom-right', $event)")
|
||||
core-icons
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { rendererOn, rendererInvoke, rendererSend, NAMES } from '../common/ipc'
|
||||
|
||||
window.ELECTRON_DISABLE_SECURITY_WARNINGS = process.env.ELECTRON_DISABLE_SECURITY_WARNINGS
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
resize: {
|
||||
origin: null,
|
||||
msDownX: 0,
|
||||
msDownY: 0,
|
||||
},
|
||||
lrcConfig: {
|
||||
enable: false,
|
||||
isLock: false,
|
||||
isAlwaysOnTop: false,
|
||||
width: 600,
|
||||
height: 700,
|
||||
x: -1,
|
||||
y: -1,
|
||||
theme: 0,
|
||||
style: {
|
||||
fontSize: 125,
|
||||
opacity: 80,
|
||||
isZoomActiveLrc: true,
|
||||
},
|
||||
},
|
||||
themeList: [
|
||||
{
|
||||
id: 0,
|
||||
name: '绿意盎然',
|
||||
className: 'green',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '绿意盎然',
|
||||
className: 'yellow',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '绿意盎然',
|
||||
className: 'blue',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '绿意盎然',
|
||||
className: 'red',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '绿意盎然',
|
||||
className: 'pink',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '绿意盎然',
|
||||
className: 'purple',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '绿意盎然',
|
||||
className: 'orange',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '绿意盎然',
|
||||
className: 'grey',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '绿意盎然',
|
||||
className: 'ming',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: '绿意盎然',
|
||||
className: 'blue2',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
let theme = this.themeList.find(t => t.id == this.lrcConfig.theme) || this.themeList[0]
|
||||
return theme.className
|
||||
},
|
||||
},
|
||||
created() {
|
||||
rendererOn(NAMES.winLyric.set_lyric_config, (event, config) => this.lrcConfig = config)
|
||||
rendererInvoke(NAMES.winLyric.get_lyric_config).then(config => this.lrcConfig = config)
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener('mousemove', this.handleMouseMove)
|
||||
document.addEventListener('mouseup', this.handleMouseUp)
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('mousemove', this.handleMouseMove)
|
||||
document.removeEventListener('mouseup', this.handleMouseUp)
|
||||
},
|
||||
methods: {
|
||||
handleMouseDown(origin, event) {
|
||||
this.handleMouseUp()
|
||||
this.resize.origin = origin
|
||||
this.resize.msDownX = event.clientX
|
||||
this.resize.msDownY = event.clientY
|
||||
},
|
||||
handleMouseUp() {
|
||||
this.resize.origin = null
|
||||
},
|
||||
handleMouseMove(event) {
|
||||
if (!this.resize.origin) return
|
||||
// if (!event.target.classList.contains('resize-' + this.resize.origin)) return
|
||||
// console.log(event.target)
|
||||
let bounds = {}
|
||||
let temp
|
||||
switch (this.resize.origin) {
|
||||
case 'left':
|
||||
temp = event.clientX - this.resize.msDownX
|
||||
bounds.w = -temp
|
||||
bounds.x = temp
|
||||
break
|
||||
case 'right':
|
||||
bounds.w = event.clientX - this.resize.msDownX
|
||||
this.resize.msDownX += bounds.w
|
||||
break
|
||||
case 'top':
|
||||
temp = event.clientY - this.resize.msDownY
|
||||
bounds.y = temp
|
||||
bounds.h = -temp
|
||||
break
|
||||
case 'bottom':
|
||||
bounds.h = event.clientY - this.resize.msDownY
|
||||
this.resize.msDownY += bounds.h
|
||||
break
|
||||
case 'top-left':
|
||||
temp = event.clientX - this.resize.msDownX
|
||||
bounds.w = -temp
|
||||
bounds.x = temp
|
||||
temp = event.clientY - this.resize.msDownY
|
||||
bounds.y = temp
|
||||
bounds.h = -temp
|
||||
break
|
||||
case 'top-right':
|
||||
temp = event.clientY - this.resize.msDownY
|
||||
bounds.y = temp
|
||||
bounds.h = -temp
|
||||
bounds.w = event.clientX - this.resize.msDownX
|
||||
this.resize.msDownX += bounds.w
|
||||
break
|
||||
case 'bottom-left':
|
||||
temp = event.clientX - this.resize.msDownX
|
||||
bounds.w = -temp
|
||||
bounds.x = temp
|
||||
bounds.h = event.clientY - this.resize.msDownY
|
||||
this.resize.msDownY += bounds.h
|
||||
break
|
||||
case 'bottom-right':
|
||||
bounds.w = event.clientX - this.resize.msDownX
|
||||
this.resize.msDownX += bounds.w
|
||||
bounds.h = event.clientY - this.resize.msDownY
|
||||
this.resize.msDownY += bounds.h
|
||||
break
|
||||
}
|
||||
// console.log(bounds)
|
||||
rendererSend(NAMES.winLyric.set_win_bounds, bounds)
|
||||
},
|
||||
handleMouseOver() {
|
||||
// this.handleMouseUp()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import './assets/styles/index.less';
|
||||
@import './assets/styles/layout.less';
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
#container {
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
&.lock {
|
||||
#main {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resize-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
cursor: ew-resize;
|
||||
// background-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
.resize-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.resize-top {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.resize-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.resize-top-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: nwse-resize;
|
||||
// background-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
.resize-top-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: nesw-resize;
|
||||
// background-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
.resize-top-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: nwse-resize;
|
||||
// background-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
.resize-bottom-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: nesw-resize;
|
||||
// background-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
.resize-bottom-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: nwse-resize;
|
||||
// background-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
transition: background-color @transition-theme;
|
||||
min-height: 0;
|
||||
border-radius: @radius-border;
|
||||
overflow: hidden;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
|
||||
&:hover {
|
||||
.control-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-bar {
|
||||
position: absolute;
|
||||
border-top-left-radius: @radius-border;
|
||||
border-top-right-radius: @radius-border;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity @transition-theme;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
+1071
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,325 @@
|
||||
@red-50: #ffebee;
|
||||
@red-100: #ffcdd2;
|
||||
@red-200: #ef9a9a;
|
||||
@red-300: #e57373;
|
||||
@red-400: #ef5350;
|
||||
@red-500: #f44336;
|
||||
@red-600: #e53935;
|
||||
@red-700: #d32f2f;
|
||||
@red-800: #c62828;
|
||||
@red-900: #b71c1c;
|
||||
@red-A100: #ff8a80;
|
||||
@red-A200: #ff5252;
|
||||
@red-A400: #ff1744;
|
||||
@red-A700: #d50000;
|
||||
@red: @red-500;
|
||||
|
||||
|
||||
@pink-50: #fce4ec;
|
||||
@pink-100: #f8bbd0;
|
||||
@pink-200: #f48fb1;
|
||||
@pink-300: #f06292;
|
||||
@pink-400: #ec407a;
|
||||
@pink-500: #e91e63;
|
||||
@pink-600: #d81b60;
|
||||
@pink-700: #c2185b;
|
||||
@pink-800: #ad1457;
|
||||
@pink-900: #880e4f;
|
||||
@pink-A100: #ff80ab;
|
||||
@pink-A200: #ff4081;
|
||||
@pink-A400: #f50057;
|
||||
@pink-A700: #c51162;
|
||||
@pink: @pink-500;
|
||||
|
||||
|
||||
@purple-50: #f3e5f5;
|
||||
@purple-100: #e1bee7;
|
||||
@purple-200: #ce93d8;
|
||||
@purple-300: #ba68c8;
|
||||
@purple-400: #ab47bc;
|
||||
@purple-500: #9c27b0;
|
||||
@purple-600: #8e24aa;
|
||||
@purple-700: #7b1fa2;
|
||||
@purple-800: #6a1b9a;
|
||||
@purple-900: #4a148c;
|
||||
@purple-A100: #ea80fc;
|
||||
@purple-A200: #e040fb;
|
||||
@purple-A400: #d500f9;
|
||||
@purple-A700: #aa00ff;
|
||||
@purple: @purple-500;
|
||||
|
||||
|
||||
@deep-purple-50: #ede7f6;
|
||||
@deep-purple-100: #d1c4e9;
|
||||
@deep-purple-200: #b39ddb;
|
||||
@deep-purple-300: #9575cd;
|
||||
@deep-purple-400: #7e57c2;
|
||||
@deep-purple-500: #673ab7;
|
||||
@deep-purple-600: #5e35b1;
|
||||
@deep-purple-700: #512da8;
|
||||
@deep-purple-800: #4527a0;
|
||||
@deep-purple-900: #311b92;
|
||||
@deep-purple-A100: #b388ff;
|
||||
@deep-purple-A200: #7c4dff;
|
||||
@deep-purple-A400: #651fff;
|
||||
@deep-purple-A700: #6200ea;
|
||||
@deep-purple: @deep-purple-500;
|
||||
|
||||
|
||||
@indigo-50: #e8eaf6;
|
||||
@indigo-100: #c5cae9;
|
||||
@indigo-200: #9fa8da;
|
||||
@indigo-300: #7986cb;
|
||||
@indigo-400: #5c6bc0;
|
||||
@indigo-500: #3f51b5;
|
||||
@indigo-600: #3949ab;
|
||||
@indigo-700: #303f9f;
|
||||
@indigo-800: #283593;
|
||||
@indigo-900: #1a237e;
|
||||
@indigo-A100: #8c9eff;
|
||||
@indigo-A200: #536dfe;
|
||||
@indigo-A400: #3d5afe;
|
||||
@indigo-A700: #304ffe;
|
||||
@indigo: @indigo-500;
|
||||
|
||||
|
||||
@blue-50: #e3f2fd;
|
||||
@blue-100: #bbdefb;
|
||||
@blue-200: #90caf9;
|
||||
@blue-300: #64b5f6;
|
||||
@blue-400: #42a5f5;
|
||||
@blue-500: #2196f3;
|
||||
@blue-600: #1e88e5;
|
||||
@blue-700: #1976d2;
|
||||
@blue-800: #1565c0;
|
||||
@blue-900: #0d47a1;
|
||||
@blue-A100: #82b1ff;
|
||||
@blue-A200: #448aff;
|
||||
@blue-A400: #2979ff;
|
||||
@blue-A700: #2962ff;
|
||||
@blue: @blue-500;
|
||||
|
||||
|
||||
@light-blue-50: #e1f5fe;
|
||||
@light-blue-100: #b3e5fc;
|
||||
@light-blue-200: #81d4fa;
|
||||
@light-blue-300: #4fc3f7;
|
||||
@light-blue-400: #29b6f6;
|
||||
@light-blue-500: #03a9f4;
|
||||
@light-blue-600: #039be5;
|
||||
@light-blue-700: #0288d1;
|
||||
@light-blue-800: #0277bd;
|
||||
@light-blue-900: #01579b;
|
||||
@light-blue-A100: #80d8ff;
|
||||
@light-blue-A200: #40c4ff;
|
||||
@light-blue-A400: #00b0ff;
|
||||
@light-blue-A700: #0091ea;
|
||||
@light-blue: @light-blue-500;
|
||||
|
||||
|
||||
@cyan-50: #e0f7fa;
|
||||
@cyan-100: #b2ebf2;
|
||||
@cyan-200: #80deea;
|
||||
@cyan-300: #4dd0e1;
|
||||
@cyan-400: #26c6da;
|
||||
@cyan-500: #00bcd4;
|
||||
@cyan-600: #00acc1;
|
||||
@cyan-700: #0097a7;
|
||||
@cyan-800: #00838f;
|
||||
@cyan-900: #006064;
|
||||
@cyan-A100: #84ffff;
|
||||
@cyan-A200: #18ffff;
|
||||
@cyan-A400: #00e5ff;
|
||||
@cyan-A700: #00b8d4;
|
||||
@cyan: @cyan-500;
|
||||
|
||||
|
||||
@teal-50: #e0f2f1;
|
||||
@teal-100: #b2dfdb;
|
||||
@teal-200: #80cbc4;
|
||||
@teal-300: #4db6ac;
|
||||
@teal-400: #26a69a;
|
||||
@teal-500: #009688;
|
||||
@teal-600: #00897b;
|
||||
@teal-700: #00796b;
|
||||
@teal-800: #00695c;
|
||||
@teal-900: #004d40;
|
||||
@teal-A100: #a7ffeb;
|
||||
@teal-A200: #64ffda;
|
||||
@teal-A400: #1de9b6;
|
||||
@teal-A700: #00bfa5;
|
||||
@teal: @teal-500;
|
||||
|
||||
|
||||
@green-50: #e8f5e9;
|
||||
@green-100: #c8e6c9;
|
||||
@green-200: #a5d6a7;
|
||||
@green-300: #81c784;
|
||||
@green-400: #66bb6a;
|
||||
@green-500: #4caf50;
|
||||
@green-600: #43a047;
|
||||
@green-700: #388e3c;
|
||||
@green-800: #2e7d32;
|
||||
@green-900: #1b5e20;
|
||||
@green-A100: #b9f6ca;
|
||||
@green-A200: #69f0ae;
|
||||
@green-A400: #00e676;
|
||||
@green-A700: #00c853;
|
||||
@green: @green-500;
|
||||
|
||||
|
||||
@light-green-50: #f1f8e9;
|
||||
@light-green-100: #dcedc8;
|
||||
@light-green-200: #c5e1a5;
|
||||
@light-green-300: #aed581;
|
||||
@light-green-400: #9ccc65;
|
||||
@light-green-500: #8bc34a;
|
||||
@light-green-600: #7cb342;
|
||||
@light-green-700: #689f38;
|
||||
@light-green-800: #558b2f;
|
||||
@light-green-900: #33691e;
|
||||
@light-green-A100: #ccff90;
|
||||
@light-green-A200: #b2ff59;
|
||||
@light-green-A400: #76ff03;
|
||||
@light-green-A700: #64dd17;
|
||||
@light-green: @light-green-500;
|
||||
|
||||
|
||||
@lime-50: #f9fbe7;
|
||||
@lime-100: #f0f4c3;
|
||||
@lime-200: #e6ee9c;
|
||||
@lime-300: #dce775;
|
||||
@lime-400: #d4e157;
|
||||
@lime-500: #cddc39;
|
||||
@lime-600: #c0ca33;
|
||||
@lime-700: #afb42b;
|
||||
@lime-800: #9e9d24;
|
||||
@lime-900: #827717;
|
||||
@lime-A100: #f4ff81;
|
||||
@lime-A200: #eeff41;
|
||||
@lime-A400: #c6ff00;
|
||||
@lime-A700: #aeea00;
|
||||
@lime: @lime-500;
|
||||
|
||||
|
||||
@yellow-50: #fffde7;
|
||||
@yellow-100: #fff9c4;
|
||||
@yellow-200: #fff59d;
|
||||
@yellow-300: #fff176;
|
||||
@yellow-400: #ffee58;
|
||||
@yellow-500: #fec60a;
|
||||
@yellow-600: #fdd835;
|
||||
@yellow-700: #fbc02d;
|
||||
@yellow-800: #f9a825;
|
||||
@yellow-900: #f57f17;
|
||||
@yellow-A100: #ffff8d;
|
||||
@yellow-A200: #ffff00;
|
||||
@yellow-A400: #ffea00;
|
||||
@yellow-A700: #ffd600;
|
||||
@yellow: @yellow-700;
|
||||
|
||||
|
||||
@amber-50: #fff8e1;
|
||||
@amber-100: #ffecb3;
|
||||
@amber-200: #ffe082;
|
||||
@amber-300: #ffd54f;
|
||||
@amber-400: #ffca28;
|
||||
@amber-500: #ffc107;
|
||||
@amber-600: #ffb300;
|
||||
@amber-700: #ffa000;
|
||||
@amber-800: #ff8f00;
|
||||
@amber-900: #ff6f00;
|
||||
@amber-A100: #ffe57f;
|
||||
@amber-A200: #ffd740;
|
||||
@amber-A400: #ffc400;
|
||||
@amber-A700: #ffab00;
|
||||
@amber: @amber-500;
|
||||
|
||||
|
||||
@orange-50: #fff3e0;
|
||||
@orange-100: #ffe0b2;
|
||||
@orange-200: #ffcc80;
|
||||
@orange-300: #ffb74d;
|
||||
@orange-400: #ffa726;
|
||||
@orange-500: #ff9800;
|
||||
@orange-600: #fb8c00;
|
||||
@orange-700: #f57c00;
|
||||
@orange-800: #ef6c00;
|
||||
@orange-900: #e65100;
|
||||
@orange-A100: #ffd180;
|
||||
@orange-A200: #ffab40;
|
||||
@orange-A400: #ff9100;
|
||||
@orange-A700: #ff6d00;
|
||||
@orange: @orange-500;
|
||||
|
||||
|
||||
@deep-orange-50: #fbe9e7;
|
||||
@deep-orange-100: #ffccbc;
|
||||
@deep-orange-200: #ffab91;
|
||||
@deep-orange-300: #ff8a65;
|
||||
@deep-orange-400: #ff7043;
|
||||
@deep-orange-500: #ff5722;
|
||||
@deep-orange-600: #f4511e;
|
||||
@deep-orange-700: #e64a19;
|
||||
@deep-orange-800: #d84315;
|
||||
@deep-orange-900: #bf360c;
|
||||
@deep-orange-A100: #ff9e80;
|
||||
@deep-orange-A200: #ff6e40;
|
||||
@deep-orange-A400: #ff3d00;
|
||||
@deep-orange-A700: #dd2c00;
|
||||
@deep-orange: @deep-orange-500;
|
||||
|
||||
|
||||
@brown-50: #efebe9;
|
||||
@brown-100: #d7ccc8;
|
||||
@brown-200: #bcaaa4;
|
||||
@brown-300: #a1887f;
|
||||
@brown-400: #8d6e63;
|
||||
@brown-500: #795548;
|
||||
@brown-600: #6d4c41;
|
||||
@brown-700: #5d4037;
|
||||
@brown-800: #4e342e;
|
||||
@brown-900: #3e2723;
|
||||
@brown-A100: #d7ccc8;
|
||||
@brown-A200: #bcaaa4;
|
||||
@brown-A400: #8d6e63;
|
||||
@brown-A700: #5d4037;
|
||||
@brown: @brown-500;
|
||||
|
||||
|
||||
@grey-50: #fafafa;
|
||||
@grey-100: #f5f5f5;
|
||||
@grey-200: #eeeeee;
|
||||
@grey-300: #e0e0e0;
|
||||
@grey-400: #bdbdbd;
|
||||
@grey-500: #9e9e9e; @rgb-grey-500: "158, 158, 158";
|
||||
@grey-600: #757575;
|
||||
@grey-700: #616161;
|
||||
@grey-800: #424242;
|
||||
@grey-900: #212121;
|
||||
@grey-A100: #f5f5f5;
|
||||
@grey-A200: #eeeeee;
|
||||
@grey-A400: #bdbdbd;
|
||||
@grey-A700: #616161;
|
||||
@grey: @grey-500;
|
||||
|
||||
|
||||
@blue-grey-50: #eceff1;
|
||||
@blue-grey-100: #cfd8dc;
|
||||
@blue-grey-200: #b0bec5;
|
||||
@blue-grey-300: #90a4ae;
|
||||
@blue-grey-400: #78909c;
|
||||
@blue-grey-500: #607d8b;
|
||||
@blue-grey-600: #546e7a;
|
||||
@blue-grey-700: #455a64;
|
||||
@blue-grey-800: #37474f;
|
||||
@blue-grey-900: #263238;
|
||||
@blue-grey-A100: #cfd8dc;
|
||||
@blue-grey-A200: #b0bec5;
|
||||
@blue-grey-A400: #78909c;
|
||||
@blue-grey-A700: #455a64;
|
||||
@blue-grey: @blue-grey-500;
|
||||
|
||||
|
||||
@black: #000000; @rgb-black: "0,0,0";
|
||||
@white: #ffffff; @rgb-white: "255,255,255";
|
||||
@@ -0,0 +1,56 @@
|
||||
@import './reset.less';
|
||||
@import './animate.less';
|
||||
*, *::after, *::before {
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nobreak {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.auto-hidden {
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.break {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.select {
|
||||
user-select: text;
|
||||
}
|
||||
.no-select {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
small {
|
||||
font-size: .8em;
|
||||
}
|
||||
.small {
|
||||
font-size: .9em;
|
||||
}
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
svg {
|
||||
transition: @transition-theme;
|
||||
transition-property: fill;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
@import './variables.less';
|
||||
|
||||
|
||||
/*自动隐藏文字*/
|
||||
.mixin-ellipsis-1() {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.mixin-ellipsis() {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: normal !important;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.mixin-ellipsis-2() {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: normal !important;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
@import './colors.less';
|
||||
|
||||
@themes: green, yellow, blue, red, pink, purple, orange, grey, ming, blue2;
|
||||
|
||||
|
||||
// Colors
|
||||
// @color-theme: #03a678;
|
||||
@color-theme: #07c556;
|
||||
@color-theme_2: rgba(255, 255, 255, 1);
|
||||
@color-theme-lyric: @color-theme_2;
|
||||
@color-theme-lyric_2:@color-theme;
|
||||
|
||||
@color-green-theme: #07c556;
|
||||
@color-green-theme_2: rgba(255, 255, 255, 1);
|
||||
@color-green-theme-lyric: @color-green-theme_2;
|
||||
@color-green-theme-lyric_2: @color-green-theme;
|
||||
|
||||
@color-yellow-theme: #fffa12;
|
||||
@color-yellow-theme_2: rgba(255, 255, 255, 1);
|
||||
@color-yellow-theme-lyric: @color-yellow-theme_2;
|
||||
@color-yellow-theme-lyric_2: @color-yellow-theme;
|
||||
|
||||
@color-blue-theme: #19b5fe;
|
||||
@color-blue-theme_2: rgba(255, 255, 255, 1);
|
||||
@color-blue-theme-lyric: @color-blue-theme_2;
|
||||
@color-blue-theme-lyric_2: @color-blue-theme;
|
||||
|
||||
@color-red-theme: #ff1222;
|
||||
@color-red-theme_2: rgba(255, 255, 255, 1);
|
||||
@color-red-theme-lyric: @color-red-theme_2;
|
||||
@color-red-theme-lyric_2: @color-red-theme;
|
||||
|
||||
@color-pink-theme: #f1828d;
|
||||
@color-pink-theme_2: rgba(255, 255, 255, 1);
|
||||
@color-pink-theme-lyric: @color-pink-theme_2;
|
||||
@color-pink-theme-lyric_2: @color-pink-theme;
|
||||
|
||||
@color-purple-theme: #c851d4;
|
||||
@color-purple-theme_2: rgba(255, 255, 255, 1);
|
||||
@color-purple-theme-lyric: @color-purple-theme_2;
|
||||
@color-purple-theme-lyric_2: @color-purple-theme;
|
||||
|
||||
@color-orange-theme: #ffad12;
|
||||
@color-orange-theme_2: rgba(255, 255, 255, 1);
|
||||
@color-orange-theme-lyric: @color-orange-theme_2;
|
||||
@color-orange-theme-lyric_2: @color-orange-theme;
|
||||
|
||||
@color-grey-theme: #bdc3c7;
|
||||
@color-grey-theme_2: rgba(255, 255, 255, 1);
|
||||
@color-grey-theme-lyric: @color-grey-theme_2;
|
||||
@color-grey-theme-lyric_2: @color-grey-theme;
|
||||
|
||||
@color-ming-theme: #336e7b;
|
||||
@color-ming-theme_2: rgba(255, 255, 255, 1);
|
||||
@color-ming-theme-lyric: @color-ming-theme_2;
|
||||
@color-ming-theme-lyric_2: @color-ming-theme;
|
||||
|
||||
@color-blue2-theme: #6b7bd8;
|
||||
@color-blue2-theme_2: rgba(255, 255, 255, 1);
|
||||
@color-blue2-theme-lyric: @color-blue2-theme_2;
|
||||
@color-blue2-theme-lyric_2: @color-blue2-theme;
|
||||
|
||||
|
||||
// Width
|
||||
@width-app-left: 6.6%;
|
||||
|
||||
// Height
|
||||
@height-toolbar: 54px;
|
||||
@height-player: 60px;
|
||||
|
||||
|
||||
// Shadow
|
||||
@shadow-app: 8px;
|
||||
|
||||
|
||||
// Radius
|
||||
@radius-progress-border: 5px;
|
||||
@radius-border: 4px;
|
||||
|
||||
@transition-theme: .4s ease;
|
||||
|
||||
@form-radius: 3px;
|
||||
@@ -0,0 +1,62 @@
|
||||
<template lang="pug">
|
||||
input(:class="$style.input" :type="type" :placeholder="placeholder" v-model.trim="text" :disabled="disabled"
|
||||
@focus="$emit('focus', $event)" @blur="$emit('blur', $event)" @input="$emit('input', text)" @change="$emit('change', text)"
|
||||
@keyup.enter="submit")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(n) {
|
||||
this.text = n
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleInput() {
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" module>
|
||||
@import '../../assets/styles/layout.less';
|
||||
|
||||
.input {
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .7);
|
||||
outline: none;
|
||||
color: #fff;
|
||||
// height: 28px;
|
||||
box-sizing: border-box;
|
||||
transition: border-color @transition-theme;
|
||||
&:focus {
|
||||
border-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template lang="pug">
|
||||
div(:class="$style.quantity")
|
||||
button(:class="[$style.btn, $style.minus]" @click="handleMinusClick") -
|
||||
input(:class="$style.input" ref="dom_input" :value="text" :disabled="disabled" @focus="$emit('focus', $event)" @blur="$emit('blur', $event)" @input="handleInput"
|
||||
@change="$emit('change', text)" @keyup.enter="submit" type="number" :min="min" :max="max")
|
||||
button(:class="[$style.btn, $style.add]" @click="handleAddClick") +
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
min: {
|
||||
type: Number,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(n) {
|
||||
this.text = n
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.text = this.value
|
||||
},
|
||||
methods: {
|
||||
handleInput() {
|
||||
let num = parseInt(this.$refs.dom_input.value)
|
||||
console.log(this.$refs.dom_input.value)
|
||||
if (Number.isNaN(num)) num = this.text
|
||||
if (this.min != null && this.min > num) {
|
||||
num = this.min
|
||||
} else if (this.max != null && this.max < num) {
|
||||
num = this.max
|
||||
}
|
||||
this.text = this.$refs.dom_input.value = num
|
||||
this.$emit('input', this.text)
|
||||
},
|
||||
handleMinusClick() {
|
||||
let num = this.text - this.step
|
||||
this.$refs.dom_input.value = this.min == null ? num : Math.max(num, this.min)
|
||||
this.handleInput()
|
||||
},
|
||||
handleAddClick() {
|
||||
let num = this.text + this.step
|
||||
this.$refs.dom_input.value = this.max == null ? num : Math.min(num, this.max)
|
||||
this.handleInput()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" module>
|
||||
@import '../../assets/styles/layout.less';
|
||||
.quantity {
|
||||
display: flex;
|
||||
width: 160px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.input::-webkit-inner-spin-button,
|
||||
.input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.input,
|
||||
.btn {
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: 1px solid #fff;
|
||||
color: #fff;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
width: 60px;
|
||||
position: relative;
|
||||
// font-weight: 900;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.minus {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.add {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,277 @@
|
||||
<template lang="pug">
|
||||
div(:class="$style.container")
|
||||
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated fadeOut")
|
||||
div(:class="$style.btns" v-show="!isShowThemeList")
|
||||
button(:class="$style.btn" @click="handleClose" :title="$t('desktopLyric.close')")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-close')
|
||||
button(:class="$style.btn" @click="handleLock" :title="$t('desktopLyric.' + (lrcConfig.isLock ? 'unlock' : 'lock'))")
|
||||
svg(v-if="config.isLock" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-unlock')
|
||||
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-lock')
|
||||
button(:class="$style.btn" :title="$t('desktopLyric.theme')" @click="isShowThemeList = true")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-theme')
|
||||
button(:class="$style.btn" @click="handleFontChange('increase', 10)" @contextmenu="handleFontChange('increase', 1)" :title="$t('desktopLyric.font_increase')")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-font-increase')
|
||||
button(:class="$style.btn" @click="handleFontChange('decrease', 10)" @contextmenu="handleFontChange('decrease', 1)" :title="$t('desktopLyric.font_decrease')")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-font-decrease')
|
||||
button(:class="$style.btn" @click="handleOpactiyChange('increase', 10)" @contextmenu="handleOpactiyChange('increase', 2)" :title="$t('desktopLyric.opactiy_increase')")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-opactiy-increase')
|
||||
button(:class="$style.btn" @click="handleOpactiyChange('decrease', 10)" @contextmenu="handleOpactiyChange('decrease', 2)" :title="$t('desktopLyric.opactiy_decrease')")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-opactiy-decrease')
|
||||
|
||||
//- button(:class="$style.btn" v-text="lrcConfig.style.isZoomActiveLrc ? '取消缩放' : '缩放歌词'" @click="handleZoomLrc")
|
||||
button(:class="$style.btn" @click="handleZoomLrc" :title="$t('desktopLyric.' + (lrcConfig.style.isZoomActiveLrc ? 'lrc_active_zoom_off' : 'lrc_active_zoom_on'))")
|
||||
svg(v-if="config.style.isZoomActiveLrc" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-vibrate-off')
|
||||
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-vibrate')
|
||||
|
||||
button(:class="$style.btn" @click="handleAlwaysOnTop" :title="$t('desktopLyric.' + (lrcConfig.isAlwaysOnTop ? 'win_top_off' : 'win_top_on'))")
|
||||
svg(v-if="config.isAlwaysOnTop" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-top-off')
|
||||
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-top-on')
|
||||
//- base-quantity(v-model="config.style.fontSize" :min="30" :step="2" :max="1000" @input="sendEvent")
|
||||
//- base-quantity(v-model="config.style.opacity" :min="5" :step="5" :max="100" @input="sendEvent")
|
||||
transition(enter-active-class="animated slideInDown" leave-active-class="animated-fast slideOutUp")
|
||||
div(:class="$style.themes" v-show="isShowThemeList")
|
||||
ul(:class="$style.themeList")
|
||||
li(:class="$style.btnBack")
|
||||
button(:class="$style.btn" @click="isShowThemeList = false" :title="$t('desktopLyric.back')")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 512 512' space='preserve')
|
||||
use(xlink:href='#icon-back')
|
||||
li(:class="[$style.themeItem, theme.className, lrcConfig.theme == theme.id ? $style.active : null]" v-for="theme in themes" @click="handleToggleTheme(theme)")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { rendererSend, NAMES } from '../../../common/ipc'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
lrcConfig: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
enable: false,
|
||||
isLock: false,
|
||||
isAlwaysOnTop: false,
|
||||
width: 600,
|
||||
height: 700,
|
||||
x: -1,
|
||||
y: -1,
|
||||
theme: '',
|
||||
style: {
|
||||
fontSize: 125,
|
||||
opacity: 80,
|
||||
isZoomActiveLrc: true,
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
themes: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
enable: false,
|
||||
isLock: false,
|
||||
isAlwaysOnTop: false,
|
||||
theme: 0,
|
||||
style: {
|
||||
fontSize: 125,
|
||||
opacity: 80,
|
||||
isZoomActiveLrc: true,
|
||||
},
|
||||
},
|
||||
isShowThemeList: false,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
lrcConfig: {
|
||||
handler(n) {
|
||||
this.config = JSON.parse(JSON.stringify(n))
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.config = JSON.parse(JSON.stringify(this.lrcConfig))
|
||||
},
|
||||
methods: {
|
||||
sendEvent() {
|
||||
rendererSend(NAMES.winLyric.set_lyric_config, this.config)
|
||||
},
|
||||
handleClose() {
|
||||
this.config.enable = false
|
||||
this.sendEvent()
|
||||
},
|
||||
handleLock() {
|
||||
this.config.isLock = true
|
||||
this.sendEvent()
|
||||
},
|
||||
handleAlwaysOnTop() {
|
||||
this.config.isAlwaysOnTop = !this.config.isAlwaysOnTop
|
||||
this.sendEvent()
|
||||
},
|
||||
handleZoomLrc() {
|
||||
this.config.style.isZoomActiveLrc = !this.config.style.isZoomActiveLrc
|
||||
this.sendEvent()
|
||||
},
|
||||
handleFontChange(action, step) {
|
||||
let num
|
||||
switch (action) {
|
||||
case 'increase':
|
||||
num = Math.min(this.config.style.fontSize + step, 1000)
|
||||
break
|
||||
case 'decrease':
|
||||
num = Math.max(this.config.style.fontSize - step, 30)
|
||||
break
|
||||
}
|
||||
if (this.config.style.fontSize == num) return
|
||||
this.config.style.fontSize = num
|
||||
this.sendEvent()
|
||||
},
|
||||
handleOpactiyChange(action, step) {
|
||||
let num
|
||||
switch (action) {
|
||||
case 'increase':
|
||||
num = Math.min(this.config.style.opacity + step, 100)
|
||||
break
|
||||
case 'decrease':
|
||||
num = Math.max(this.config.style.opacity - step, 6)
|
||||
break
|
||||
}
|
||||
if (this.config.style.opacity == num) return
|
||||
this.config.style.opacity = num
|
||||
this.sendEvent()
|
||||
},
|
||||
handleToggleTheme(theme) {
|
||||
this.config.theme = theme.id
|
||||
this.sendEvent()
|
||||
},
|
||||
// handleUpdateSetting() {
|
||||
// this.sendEvent()
|
||||
// },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" module>
|
||||
@import '../../assets/styles/layout.less';
|
||||
|
||||
@bar-height: 38px;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
// height: 50px;
|
||||
transition: opacity @transition-theme;
|
||||
// opacity: 0;
|
||||
// &:hover {
|
||||
// opacity: 1;
|
||||
// }
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-height: @bar-height;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
color: #fff;
|
||||
transition: color @transition-theme;
|
||||
&:hover {
|
||||
color: @color-theme;
|
||||
}
|
||||
}
|
||||
|
||||
.themes {
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
|
||||
&:global(.slideInDown), &:global(.slideOutUp) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
min-height: @bar-height;
|
||||
padding-top: (@bar-height - 24px) / 2;
|
||||
padding-left: (@bar-height - 24px) / 2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btnBack {
|
||||
margin-top: -(@bar-height - 24px) / 2;
|
||||
margin-left: -(@bar-height - 24px) / 2;
|
||||
}
|
||||
|
||||
.theme-item {
|
||||
display: block;
|
||||
margin-bottom: (@bar-height - 24px) / 2;
|
||||
margin-right: (@bar-height - 24px) / 2;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: @radius-border;
|
||||
border: 2px solid transparent;
|
||||
box-sizing: border-box;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
transition: border-color @transition-theme;
|
||||
&.active {
|
||||
border-color: @color-theme;
|
||||
}
|
||||
&:after {
|
||||
display: block;
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: @radius-border;
|
||||
}
|
||||
each(@themes, {
|
||||
&:global(.@{value}) {
|
||||
&:after {
|
||||
background-color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.btn {
|
||||
&:hover {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
}
|
||||
.theme-item {
|
||||
&.active {
|
||||
border-color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template lang="pug">
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' style="display: none;")
|
||||
defs
|
||||
g#icon-close(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z')
|
||||
|
||||
g#icon-unlock(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d='M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10A2,2 0 0,1 6,8H15V6A3,3 0 0,0 12,3A3,3 0 0,0 9,6H7A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,17A2,2 0 0,1 10,15A2,2 0 0,1 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17Z')
|
||||
|
||||
g#icon-lock(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d='M12,17C10.89,17 10,16.1 10,15C10,13.89 10.89,13 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z')
|
||||
|
||||
g#icon-font-decrease(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d='M5.12,14L7.5,7.67L9.87,14M6.5,5L1,19H3.25L4.37,16H10.62L11.75,19H14L8.5,5H6.5M18,17L23,11.93L21.59,10.5L19,13.1V7H17V13.1L14.41,10.5L13,11.93L18,17Z')
|
||||
|
||||
g#icon-font-increase(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d='M5.12,14L7.5,7.67L9.87,14M6.5,5L1,19H3.25L4.37,16H10.62L11.75,19H14L8.5,5H6.5M18,7L13,12.07L14.41,13.5L17,10.9V17H19V10.9L21.59,13.5L23,12.07L18,7Z')
|
||||
|
||||
g#icon-opactiy-increase(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z")
|
||||
//- path(d='M17.66,8L12,2.35L6.34,8C4.78,9.56 4,11.64 4,13.64C4,15.64 4.78,17.75 6.34,19.31C7.9,20.87 9.95,21.66 12,21.66C14.05,21.66 16.1,20.87 17.66,19.31C19.22,17.75 20,15.64 20,13.64C20,11.64 19.22,9.56 17.66,8M6,14C6,12 6.62,10.73 7.76,9.6L12,5.27L16.24,9.65C17.38,10.77 18,12 18,14H6Z')
|
||||
|
||||
g#icon-opactiy-decrease(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d="M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z")
|
||||
|
||||
g#icon-top-on(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z")
|
||||
//- path(d='M17.66,8L12,2.35L6.34,8C4.78,9.56 4,11.64 4,13.64C4,15.64 4.78,17.75 6.34,19.31C7.9,20.87 9.95,21.66 12,21.66C14.05,21.66 16.1,20.87 17.66,19.31C19.22,17.75 20,15.64 20,13.64C20,11.64 19.22,9.56 17.66,8M6,14C6,12 6.62,10.73 7.76,9.6L12,5.27L16.24,9.65C17.38,10.77 18,12 18,14H6Z')
|
||||
|
||||
g#icon-top-off(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z")
|
||||
|
||||
g#icon-theme(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d='M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z')
|
||||
|
||||
g#icon-vibrate(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d="M16,19H8V5H16M16.5,3H7.5A1.5,1.5 0 0,0 6,4.5V19.5A1.5,1.5 0 0,0 7.5,21H16.5A1.5,1.5 0 0,0 18,19.5V4.5A1.5,1.5 0 0,0 16.5,3M19,17H21V7H19M22,9V15H24V9M3,17H5V7H3M0,15H2V9H0V15Z")
|
||||
|
||||
g#icon-vibrate-off(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
path(d="M8.2,5L6.55,3.35C6.81,3.12 7.15,3 7.5,3H16.5A1.5,1.5 0 0,1 18,4.5V14.8L16,12.8V5H8.2M0,15H2V9H0V15M21,17V7H19V15.8L20.2,17H21M3,17H5V7H3V17M18,17.35L22.11,21.46L20.84,22.73L18,19.85C17.83,20.54 17.21,21 16.5,21H7.5A1.5,1.5 0 0,1 6,19.5V7.89L1.11,3L2.39,1.73L6.09,5.44L8,7.34L16,15.34L18,17.34V17.35M16,17.89L8,9.89V19H16V17.89M22,9V15H24V9H22Z")
|
||||
|
||||
|
||||
g#icon-back(fill='currentColor')
|
||||
// 0 0 512 512
|
||||
path(d='M511.563,434.259c-1.728-142.329-124.42-258.242-277.087-263.419V95.999c0-17.645-14.342-31.999-31.974-31.999 c-7.931,0-15.591,3.042-21.524,8.562c0,0-134.828,124.829-173.609,163.755C2.623,241.109,0,248.088,0,255.994 c0,7.906,2.623,14.885,7.369,19.687c38.781,38.915,173.609,163.745,173.609,163.745c5.933,5.521,13.593,8.562,21.524,8.562 c17.631,0,31.974-14.354,31.974-31.999v-74.591c153.479,2.156,255.792,50.603,255.792,95.924c0,5.896,4.767,10.666,10.658,10.666 c0.167,0.021,0.333,0.01,0.416,0c5.891,0,10.658-4.771,10.658-10.666C512,436.259,511.854,435.228,511.563,434.259z')
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,327 @@
|
||||
<template lang="pug">
|
||||
div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" :style="lrcStyles" @mousedown="handleLyricMouseDown" ref="dom_lyric")
|
||||
div(:class="$style.lyricSpace")
|
||||
div(v-for="(info, index) in lyricLines" :key="index" :class="[$style.lineContent, lyric.line == index ? (lrcConfig.style.isZoomActiveLrc ? $style.lrcActiveZoom : $style.lrcActive) : null]")
|
||||
p(:class="$style.lrcLine") {{info.text}}
|
||||
div(:class="$style.lyricSpace")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { rendererOn, rendererSend, NAMES } from '../../../common/ipc'
|
||||
import { scrollTo } from '../../../renderer/utils'
|
||||
import Lyric from 'lrc-file-parser'
|
||||
|
||||
let cancelScrollFn = null
|
||||
|
||||
export default {
|
||||
props: {
|
||||
lrcConfig: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
style: {
|
||||
fontSize: 125,
|
||||
opacity: 80,
|
||||
isZoomActiveLrc: true,
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
musicInfo: {
|
||||
songmid: null,
|
||||
name: '^',
|
||||
singer: '^',
|
||||
album: null,
|
||||
},
|
||||
lyric: {
|
||||
line: 0,
|
||||
lines: [],
|
||||
},
|
||||
dom_lines: [],
|
||||
clickTime: 0,
|
||||
lyricEvent: {
|
||||
isMsDown: false,
|
||||
msDownY: 0,
|
||||
msDownScrollY: 0,
|
||||
isStopScroll: false,
|
||||
timeout: null,
|
||||
},
|
||||
winEvent: {
|
||||
isMsDown: false,
|
||||
msDownX: 0,
|
||||
msDownY: 0,
|
||||
},
|
||||
_lyricLines: [],
|
||||
lyricLines: [],
|
||||
isSetedLines: false,
|
||||
isPlay: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lrcStyles() {
|
||||
return {
|
||||
fontSize: this.lrcConfig.style.fontSize / 100 + 'rem',
|
||||
opacity: this.lrcConfig.style.opacity / 100,
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'lyric.lines': {
|
||||
handler(n, o) {
|
||||
this.isSetedLines = true
|
||||
if (o) {
|
||||
this._lyricLines = n
|
||||
if (n.length) {
|
||||
this.lyricLines = n
|
||||
this.$nextTick(() => {
|
||||
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
|
||||
this.handleScrollLrc()
|
||||
})
|
||||
} else {
|
||||
if (cancelScrollFn) {
|
||||
cancelScrollFn()
|
||||
cancelScrollFn = null
|
||||
}
|
||||
cancelScrollFn = scrollTo(this.$refs.dom_lyric, 0, 300, () => {
|
||||
if (this.lyricLines === this._lyricLines && this._lyricLines.length) return
|
||||
this.lyricLines = this._lyricLines
|
||||
this.$nextTick(() => {
|
||||
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
|
||||
this.handleScrollLrc()
|
||||
})
|
||||
}, 50)
|
||||
}
|
||||
} else {
|
||||
this.lyricLines = n
|
||||
this.$nextTick(() => {
|
||||
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
|
||||
this.handleScrollLrc()
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
'lyric.line': {
|
||||
handler(n) {
|
||||
if (n < 0) return
|
||||
if (n == 0 && this.isSetedLines) return this.isSetedLines = false
|
||||
this.handleScrollLrc()
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
rendererOn(NAMES.winLyric.set_lyric_info, (event, data) => this.handleSetInfo(data))
|
||||
window.lrc = new Lyric({
|
||||
onPlay: (line, text) => {
|
||||
this.lyric.text = text
|
||||
this.lyric.line = line
|
||||
// console.log(line, text)
|
||||
},
|
||||
onSetLyric: lines => { // listening lyrics seting event
|
||||
// console.log(lines) // lines is array of all lyric text
|
||||
this.lyric.lines = lines
|
||||
this.lyric.line = 0
|
||||
},
|
||||
offset: 100,
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener('mousemove', this.handleMouseMsMove)
|
||||
document.addEventListener('mouseup', this.handleMouseMsUp)
|
||||
rendererSend(NAMES.winLyric.get_lyric_info, 'info')
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearLyricScrollTimeout()
|
||||
document.removeEventListener('mousemove', this.handleMouseMsMove)
|
||||
document.removeEventListener('mouseup', this.handleMouseMsUp)
|
||||
},
|
||||
methods: {
|
||||
handleSetInfo({ type, data }) {
|
||||
// console.log(type, data)
|
||||
switch (type) {
|
||||
case 'lyric':
|
||||
window.lrc.setLyric(data)
|
||||
break
|
||||
case 'play':
|
||||
this.isPlay = true
|
||||
window.lrc.play(data)
|
||||
break
|
||||
case 'pause':
|
||||
this.isPlay = false
|
||||
window.lrc.pause()
|
||||
break
|
||||
case 'info':
|
||||
// console.log('info', data)
|
||||
window.lrc.setLyric(data.lyric)
|
||||
this.$nextTick(() => {
|
||||
this.lyric.line = data.line
|
||||
rendererSend(NAMES.winLyric.get_lyric_info, 'status')
|
||||
})
|
||||
case 'music_info':
|
||||
this.musicInfo.name = data.name
|
||||
this.musicInfo.songmid = data.songmid
|
||||
this.musicInfo.singer = data.singer
|
||||
this.musicInfo.album = data.album
|
||||
break
|
||||
|
||||
case 'status':
|
||||
// console.log('status', data)
|
||||
this.isPlay = data.isPlay
|
||||
this.lyric.line = data.line
|
||||
if (data.isPlay) window.lrc.play(data.played_time)
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
// console.log(data)
|
||||
},
|
||||
handleResize() {
|
||||
this.setProgressWidth()
|
||||
},
|
||||
handleScrollLrc() {
|
||||
if (!this.dom_lines.length) return
|
||||
if (cancelScrollFn) {
|
||||
cancelScrollFn()
|
||||
cancelScrollFn = null
|
||||
}
|
||||
if (this.lyricEvent.isStopScroll) return
|
||||
let dom_p = this.dom_lines[this.lyric.line]
|
||||
cancelScrollFn = scrollTo(this.$refs.dom_lyric, dom_p ? (dom_p.offsetTop - this.$refs.dom_lyric.clientHeight * 0.38) : 0)
|
||||
},
|
||||
handleLyricMouseDown(e) {
|
||||
if (e.target.classList.contains(this.$style.lrcLine)) {
|
||||
this.lyricEvent.isMsDown = true
|
||||
this.lyricEvent.msDownY = e.clientY
|
||||
this.lyricEvent.msDownScrollY = this.$refs.dom_lyric.scrollTop
|
||||
} else {
|
||||
this.winEvent.isMsDown = true
|
||||
this.winEvent.msDownX = e.clientX
|
||||
this.winEvent.msDownY = e.clientY
|
||||
}
|
||||
},
|
||||
handleMouseMsUp(e) {
|
||||
this.lyricEvent.isMsDown = false
|
||||
this.winEvent.isMsDown = false
|
||||
},
|
||||
handleMouseMsMove(e) {
|
||||
if (this.lyricEvent.isMsDown) {
|
||||
if (!this.lyricEvent.isStopScroll) this.lyricEvent.isStopScroll = true
|
||||
if (cancelScrollFn) {
|
||||
cancelScrollFn()
|
||||
cancelScrollFn = null
|
||||
}
|
||||
this.$refs.dom_lyric.scrollTop = this.lyricEvent.msDownScrollY + this.lyricEvent.msDownY - e.clientY
|
||||
this.startLyricScrollTimeout()
|
||||
} else if (this.winEvent.isMsDown) {
|
||||
rendererSend(NAMES.winLyric.set_win_bounds, { x: e.clientX - this.winEvent.msDownX, y: e.clientY - this.winEvent.msDownY })
|
||||
}
|
||||
|
||||
// if (this.volumeEvent.isMsDown) {
|
||||
// let val = this.volumeEvent.msDownValue + (e.clientX - this.volumeEvent.msDownX) / 70
|
||||
// this.volume = val < 0 ? 0 : val > 1 ? 1 : val
|
||||
// if (this.audio) this.audio.volume = this.volume
|
||||
// }
|
||||
|
||||
// console.log(val)
|
||||
},
|
||||
startLyricScrollTimeout() {
|
||||
this.clearLyricScrollTimeout()
|
||||
this.lyricEvent.timeout = setTimeout(() => {
|
||||
this.lyricEvent.timeout = null
|
||||
this.lyricEvent.isStopScroll = false
|
||||
if (!this.isPlay) return
|
||||
this.handleScrollLrc()
|
||||
}, 3000)
|
||||
},
|
||||
clearLyricScrollTimeout() {
|
||||
if (!this.lyricEvent.timeout) return
|
||||
clearTimeout(this.lyricEvent.timeout)
|
||||
this.lyricEvent.timeout = null
|
||||
},
|
||||
close() {
|
||||
rendererSend(NAMES.winLyric.close)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" module>
|
||||
@import '../../assets/styles/layout.less';
|
||||
|
||||
.lyric {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 68px;
|
||||
padding: 0 5px;
|
||||
opacity: .6;
|
||||
transition: opacity @transition-theme;
|
||||
&.draging {
|
||||
.lrc-line {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lrc-line {
|
||||
display: inline-block;
|
||||
padding: 8px 0;
|
||||
line-height: 1.2;
|
||||
overflow-wrap: break-word;
|
||||
transition: @transition-theme;
|
||||
transition-property: color, font-size, text-shadow;
|
||||
cursor: grab;
|
||||
// font-weight: bold;
|
||||
// background-clip: text;
|
||||
color: @color-theme-lyric;
|
||||
text-shadow: 1px 1px 2px #000;
|
||||
// background: linear-gradient(@color-theme-lyric, @color-theme-lyric);
|
||||
// background-clip: text;
|
||||
// -webkit-background-clip: text;
|
||||
// -webkit-text-fill-color: #fff;
|
||||
// -webkit-text-stroke: thin #124628;
|
||||
}
|
||||
.lyric-space {
|
||||
height: 70%;
|
||||
}
|
||||
.lrc-active {
|
||||
|
||||
.lrc-line {
|
||||
color: @color-theme-lyric_2;
|
||||
// background: linear-gradient(@color-theme-lyric, @color-theme-lyric_2);
|
||||
// background-clip: text;
|
||||
// -webkit-background-clip: text;
|
||||
// -webkit-text-fill-color: @color-theme-lyric_2;
|
||||
// -webkit-text-stroke: thin #124628;
|
||||
}
|
||||
}
|
||||
.lrc-active-zoom {
|
||||
.lrc-active;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.footer {
|
||||
flex: 0 0 100px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.lrc-line {
|
||||
color: ~'@{color-@{value}-theme-lyric}';
|
||||
}
|
||||
.lrc-active, .lrc-active-zoom {
|
||||
.lrc-line {
|
||||
color: ~'@{color-@{value}-theme-lyric_2}';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
import Vue from 'vue'
|
||||
import upperFirst from 'lodash/upperFirst'
|
||||
import camelCase from 'lodash/camelCase'
|
||||
|
||||
const requireComponent = require.context('./', true, /\.vue$/)
|
||||
|
||||
requireComponent.keys().forEach(fileName => {
|
||||
const componentConfig = requireComponent(fileName)
|
||||
|
||||
const componentName = upperFirst(camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')))
|
||||
|
||||
Vue.component(componentName, componentConfig.default || componentConfig)
|
||||
})
|
||||
@@ -0,0 +1,10 @@
|
||||
html(lang="cn")
|
||||
head
|
||||
meta(charset="UTF-8")
|
||||
meta(name="viewport" content="width=device-width, initial-scale=1.0")
|
||||
meta(http-equiv="X-UA-Compatible" content="ie=edge")
|
||||
title 桌面歌词-洛雪音乐助手
|
||||
|
||||
body
|
||||
#root
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
import i18n from './plugins/i18n'
|
||||
|
||||
import './components'
|
||||
|
||||
import App from './App'
|
||||
|
||||
import '../common/error'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
i18n,
|
||||
el: '#root',
|
||||
render: h => h(App),
|
||||
})
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Vue i18n
|
||||
*
|
||||
* @library
|
||||
*
|
||||
* http://kazupon.github.io/vue-i18n/en/
|
||||
*/
|
||||
|
||||
// Lib imports
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import messages from '../../renderer/lang'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
const i18n = window.i18n = new VueI18n({
|
||||
locale: 'cns',
|
||||
fallbackLocale: 'cns',
|
||||
messages,
|
||||
})
|
||||
|
||||
export default i18n
|
||||
Reference in New Issue
Block a user