Skip to content

Commit e6f0ffe

Browse files
juwenzhangjuwenzhang
committed
feat: 新增vue 核心包和测试demo
1 parent d0049c8 commit e6f0ffe

30 files changed

+3679
-893
lines changed

‎.eslintignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,6 @@ dist
44
commitlint.config.js
55
.eslintrc.js
66
.prettierrc.js
7+
8+
9+
*.vue

‎.eslintrc.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ module.exports = {
1010
'prettier/prettier': 'error',
1111
'@typescript-eslint/no-explicit-any': 'warn',
1212
'@typescript-eslint/no-unused-vars': 'warn',
13+
'@typescript-eslint/ban-types': 'warn',
14+
'@typescript-eslint/ban-ts-comment': 'warn',
1315
},
1416
env: {
1517
browser: true,

‎demo/vue-lyric-demo/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎demo/vue-lyric-demo/.vscode/extensions.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["Vue.volar"]
3+
}

‎demo/vue-lyric-demo/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Vue 3 + TypeScript + Vite
2+
3+
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

‎demo/vue-lyric-demo/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>vue-lyric-demo</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎demo/vue-lyric-demo/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "vue-lyric-demo",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vue-tsc -b && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"vue": "^3.5.25",
13+
"@lyric-render/vue": "workspace:*"
14+
},
15+
"devDependencies": {
16+
"@types/node": "^24.10.1",
17+
"@vitejs/plugin-vue": "^6.0.2",
18+
"@vue/tsconfig": "^0.8.1",
19+
"typescript": "~5.9.3",
20+
"vite": "^7.3.1",
21+
"vue-tsc": "^3.1.5"
22+
}
23+
}

‎demo/vue-lyric-demo/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎demo/vue-lyric-demo/src/App.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div style="padding: 20px">
3+
<LyricPlayer
4+
:audioSrc="musicMp3"
5+
:lyricSource="lyricLrc"
6+
:parseOptions="{ isWordSplit: true }"
7+
:align="'center'"
8+
:theme="customTheme"
9+
:baseTime="0.5"
10+
:height="'60vh'"
11+
:showAudioControl="true"
12+
@lyric-change="handleLyricChange"
13+
@audio-play="handleAudioPlay"
14+
/>
15+
</div>
16+
</template>
17+
18+
<script setup lang="ts">
19+
import { reactive } from 'vue'
20+
import { LyricPlayer } from '@lyric-render/vue'
21+
import lyricLrc from './lyric.lrc?raw'
22+
import musicMp3 from './music.mp3'
23+
24+
// 自定义主题
25+
const customTheme = reactive({
26+
container: { bg: '#1a1a1a', border: '1px solid #333', padding: '0 16px' },
27+
normal: { color: '#999', fontSize: '14px' },
28+
highlight: { color: '#FFD700', fontSize: '16px' },
29+
state: { color: '#666', fontSize: '14px' },
30+
})
31+
32+
// 歌词变化回调
33+
const handleLyricChange = (index: number, item: any) => {
34+
console.log('当前歌词索引:', index, '歌词内容:', item?.text)
35+
}
36+
37+
// 音频播放状态回调
38+
const handleAudioPlay = (isPlaying: boolean) => {
39+
console.log('音频播放状态:', isPlaying)
40+
}
41+
</script>
42+
43+
<style>
44+
* {
45+
margin: 0;
46+
padding: 0;
47+
box-sizing: border-box;
48+
}
49+
50+
body {
51+
font-family: Arial, sans-serif;
52+
background-color: #f5f5f5;
53+
}
54+
</style>

‎demo/vue-lyric-demo/src/assets/vue.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)