diff --git a/web/package-lock.json b/web/package-lock.json
index 91d5209d..92bf98f4 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -26,6 +26,7 @@
"markmap-toolbar": "^0.17.0",
"markmap-view": "^0.16.0",
"md-editor-v3": "^2.2.1",
+ "memfs": "^4.9.3",
"mitt": "^3.0.1",
"pinia": "^2.1.4",
"qrcode": "^1.5.3",
@@ -1917,6 +1918,57 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
+ "node_modules/@jsonjoy.com/base64": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmmirror.com/@jsonjoy.com/base64/-/base64-1.1.2.tgz",
+ "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==",
+ "engines": {
+ "node": ">=10.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/streamich"
+ },
+ "peerDependencies": {
+ "tslib": "2"
+ }
+ },
+ "node_modules/@jsonjoy.com/json-pack": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmmirror.com/@jsonjoy.com/json-pack/-/json-pack-1.0.4.tgz",
+ "integrity": "sha512-aOcSN4MeAtFROysrbqG137b7gaDDSmVrl5mpo6sT/w+kcXpWnzhMjmY/Fh/sDx26NBxyIE7MB1seqLeCAzy9Sg==",
+ "dependencies": {
+ "@jsonjoy.com/base64": "^1.1.1",
+ "@jsonjoy.com/util": "^1.1.2",
+ "hyperdyperid": "^1.2.0",
+ "thingies": "^1.20.0"
+ },
+ "engines": {
+ "node": ">=10.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/streamich"
+ },
+ "peerDependencies": {
+ "tslib": "2"
+ }
+ },
+ "node_modules/@jsonjoy.com/util": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmmirror.com/@jsonjoy.com/util/-/util-1.2.0.tgz",
+ "integrity": "sha512-4B8B+3vFsY4eo33DMKyJPlQ3sBMpPFUZK2dr3O3rXrOGKKbYG44J0XSFkDo1VOQiri5HFEhIeVvItjR2xcazmg==",
+ "engines": {
+ "node": ">=10.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/streamich"
+ },
+ "peerDependencies": {
+ "tslib": "2"
+ }
+ },
"node_modules/@leichtgewicht/ip-codec": {
"version": "2.0.3",
"resolved": "https://registry.npmmirror.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz",
@@ -6965,9 +7017,9 @@
}
},
"node_modules/fs-monkey": {
- "version": "1.0.3",
- "resolved": "https://registry.npmmirror.com/fs-monkey/-/fs-monkey-1.0.3.tgz",
- "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
+ "version": "1.0.6",
+ "resolved": "https://registry.npmmirror.com/fs-monkey/-/fs-monkey-1.0.6.tgz",
+ "integrity": "sha512-b1FMfwetIKymC0eioW7mTywihSQE4oLzQn1dB6rZB5fx/3NpNEdAWeCSMB+60/AeT0TCXsxzAlcYVEFCTAksWg==",
"dev": true
},
"node_modules/fs.realpath": {
@@ -7381,6 +7433,14 @@
"node": ">=10.17.0"
}
},
+ "node_modules/hyperdyperid": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmmirror.com/hyperdyperid/-/hyperdyperid-1.2.0.tgz",
+ "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==",
+ "engines": {
+ "node": ">=10.18"
+ }
+ },
"node_modules/iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -8480,15 +8540,21 @@
}
},
"node_modules/memfs": {
- "version": "3.4.1",
- "resolved": "https://registry.npmmirror.com/memfs/-/memfs-3.4.1.tgz",
- "integrity": "sha512-1c9VPVvW5P7I85c35zAdEr1TD5+F11IToIHIlrVIcflfnzPkJa0ZoYEoEdYDP8KgPFoSZ/opDrUsAoZWym3mtw==",
- "dev": true,
+ "version": "4.9.3",
+ "resolved": "https://registry.npmmirror.com/memfs/-/memfs-4.9.3.tgz",
+ "integrity": "sha512-bsYSSnirtYTWi1+OPMFb0M048evMKyUYe0EbtuGQgq6BVQM1g1W8/KIUJCCvjgI/El0j6Q4WsmMiBwLUBSw8LA==",
"dependencies": {
- "fs-monkey": "1.0.3"
+ "@jsonjoy.com/json-pack": "^1.0.3",
+ "@jsonjoy.com/util": "^1.1.2",
+ "tree-dump": "^1.0.1",
+ "tslib": "^2.0.0"
},
"engines": {
"node": ">= 4.0.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/streamich"
}
},
"node_modules/memoize-one": {
@@ -11394,6 +11460,17 @@
"node": ">=0.8"
}
},
+ "node_modules/thingies": {
+ "version": "1.21.0",
+ "resolved": "https://registry.npmmirror.com/thingies/-/thingies-1.21.0.tgz",
+ "integrity": "sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==",
+ "engines": {
+ "node": ">=10.18"
+ },
+ "peerDependencies": {
+ "tslib": "^2"
+ }
+ },
"node_modules/thread-loader": {
"version": "3.0.4",
"resolved": "https://registry.npmmirror.com/thread-loader/-/thread-loader-3.0.4.tgz",
@@ -11501,6 +11578,21 @@
"resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz",
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
},
+ "node_modules/tree-dump": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmmirror.com/tree-dump/-/tree-dump-1.0.2.tgz",
+ "integrity": "sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==",
+ "engines": {
+ "node": ">=10.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/streamich"
+ },
+ "peerDependencies": {
+ "tslib": "2"
+ }
+ },
"node_modules/tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz",
@@ -12225,6 +12317,18 @@
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
"dev": true
},
+ "node_modules/webpack-dev-middleware/node_modules/memfs": {
+ "version": "3.5.3",
+ "resolved": "https://registry.npmmirror.com/memfs/-/memfs-3.5.3.tgz",
+ "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
+ "dev": true,
+ "dependencies": {
+ "fs-monkey": "^1.0.4"
+ },
+ "engines": {
+ "node": ">= 4.0.0"
+ }
+ },
"node_modules/webpack-dev-middleware/node_modules/schema-utils": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -14028,6 +14132,29 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
+ "@jsonjoy.com/base64": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmmirror.com/@jsonjoy.com/base64/-/base64-1.1.2.tgz",
+ "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==",
+ "requires": {}
+ },
+ "@jsonjoy.com/json-pack": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmmirror.com/@jsonjoy.com/json-pack/-/json-pack-1.0.4.tgz",
+ "integrity": "sha512-aOcSN4MeAtFROysrbqG137b7gaDDSmVrl5mpo6sT/w+kcXpWnzhMjmY/Fh/sDx26NBxyIE7MB1seqLeCAzy9Sg==",
+ "requires": {
+ "@jsonjoy.com/base64": "^1.1.1",
+ "@jsonjoy.com/util": "^1.1.2",
+ "hyperdyperid": "^1.2.0",
+ "thingies": "^1.20.0"
+ }
+ },
+ "@jsonjoy.com/util": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmmirror.com/@jsonjoy.com/util/-/util-1.2.0.tgz",
+ "integrity": "sha512-4B8B+3vFsY4eo33DMKyJPlQ3sBMpPFUZK2dr3O3rXrOGKKbYG44J0XSFkDo1VOQiri5HFEhIeVvItjR2xcazmg==",
+ "requires": {}
+ },
"@leichtgewicht/ip-codec": {
"version": "2.0.3",
"resolved": "https://registry.npmmirror.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz",
@@ -18175,9 +18302,9 @@
}
},
"fs-monkey": {
- "version": "1.0.3",
- "resolved": "https://registry.npmmirror.com/fs-monkey/-/fs-monkey-1.0.3.tgz",
- "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
+ "version": "1.0.6",
+ "resolved": "https://registry.npmmirror.com/fs-monkey/-/fs-monkey-1.0.6.tgz",
+ "integrity": "sha512-b1FMfwetIKymC0eioW7mTywihSQE4oLzQn1dB6rZB5fx/3NpNEdAWeCSMB+60/AeT0TCXsxzAlcYVEFCTAksWg==",
"dev": true
},
"fs.realpath": {
@@ -18512,6 +18639,11 @@
"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
"dev": true
},
+ "hyperdyperid": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmmirror.com/hyperdyperid/-/hyperdyperid-1.2.0.tgz",
+ "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A=="
+ },
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -19387,12 +19519,14 @@
"dev": true
},
"memfs": {
- "version": "3.4.1",
- "resolved": "https://registry.npmmirror.com/memfs/-/memfs-3.4.1.tgz",
- "integrity": "sha512-1c9VPVvW5P7I85c35zAdEr1TD5+F11IToIHIlrVIcflfnzPkJa0ZoYEoEdYDP8KgPFoSZ/opDrUsAoZWym3mtw==",
- "dev": true,
+ "version": "4.9.3",
+ "resolved": "https://registry.npmmirror.com/memfs/-/memfs-4.9.3.tgz",
+ "integrity": "sha512-bsYSSnirtYTWi1+OPMFb0M048evMKyUYe0EbtuGQgq6BVQM1g1W8/KIUJCCvjgI/El0j6Q4WsmMiBwLUBSw8LA==",
"requires": {
- "fs-monkey": "1.0.3"
+ "@jsonjoy.com/json-pack": "^1.0.3",
+ "@jsonjoy.com/util": "^1.1.2",
+ "tree-dump": "^1.0.1",
+ "tslib": "^2.0.0"
}
},
"memoize-one": {
@@ -21633,6 +21767,12 @@
"thenify": ">= 3.1.0 < 4"
}
},
+ "thingies": {
+ "version": "1.21.0",
+ "resolved": "https://registry.npmmirror.com/thingies/-/thingies-1.21.0.tgz",
+ "integrity": "sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==",
+ "requires": {}
+ },
"thread-loader": {
"version": "3.0.4",
"resolved": "https://registry.npmmirror.com/thread-loader/-/thread-loader-3.0.4.tgz",
@@ -21718,6 +21858,12 @@
"resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz",
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
},
+ "tree-dump": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmmirror.com/tree-dump/-/tree-dump-1.0.2.tgz",
+ "integrity": "sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==",
+ "requires": {}
+ },
"tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz",
@@ -22301,6 +22447,15 @@
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
"dev": true
},
+ "memfs": {
+ "version": "3.5.3",
+ "resolved": "https://registry.npmmirror.com/memfs/-/memfs-3.5.3.tgz",
+ "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
+ "dev": true,
+ "requires": {
+ "fs-monkey": "^1.0.4"
+ }
+ },
"schema-utils": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.0.0.tgz",
diff --git a/web/package.json b/web/package.json
index e9969bba..46943877 100644
--- a/web/package.json
+++ b/web/package.json
@@ -26,6 +26,7 @@
"markmap-toolbar": "^0.17.0",
"markmap-view": "^0.16.0",
"md-editor-v3": "^2.2.1",
+ "memfs": "^4.9.3",
"mitt": "^3.0.1",
"pinia": "^2.1.4",
"qrcode": "^1.5.3",
diff --git a/web/public/files/test.mp3 b/web/public/files/test.mp3
new file mode 100644
index 00000000..2a518c05
Binary files /dev/null and b/web/public/files/test.mp3 differ
diff --git a/web/public/images/play.svg b/web/public/images/play.svg
new file mode 100644
index 00000000..970646c9
--- /dev/null
+++ b/web/public/images/play.svg
@@ -0,0 +1,3 @@
+
diff --git a/web/src/assets/css/suno.styl b/web/src/assets/css/suno.styl
index de27936a..0976ac63 100644
--- a/web/src/assets/css/suno.styl
+++ b/web/src/assets/css/suno.styl
@@ -101,12 +101,35 @@
bottom 0
right 0
background-color rgba(14,8,8,.7)
- padding 0 2px
+ padding 0 3px
font-family 'Input Sans'
font-size 14px
font-weight 700
border-radius .125rem
}
+
+ .play {
+ position absolute
+ width: 56px;
+ height 100%
+ top: 0;
+ left: 50%;
+ border none
+ border-radius 5px
+ background rgba(100, 100, 100, 0.3)
+ cursor pointer
+ color #ffffff
+ opacity 0
+ transform: translate(-50%, 0px);
+ transition opacity 0.3s ease 0s
+ }
+
+ &:hover {
+ .play {
+ opacity 1
+ //display block
+ }
+ }
}
}
@@ -125,6 +148,13 @@
font-size 16px
font-weight 700
+ a {
+ color rgb(250 247 245)
+ &:hover {
+ text-decoration underline
+ }
+ }
+
.model {
color #E2E8F0
background-color #1C1616
@@ -145,7 +175,7 @@
}
.right {
- width 200px;
+ min-width 320px;
font-size 14px
padding 0 15px
@@ -157,6 +187,7 @@
height 90px
.btn {
+ margin-right 10px
background-color #363030
border none
border-radius 5px
@@ -167,6 +198,25 @@
background-color #5F5958
}
}
+
+ .btn-publish {
+ padding 2px 10px
+
+ .text {
+ margin-right 10px
+ }
+ }
+
+ .btn-icon {
+ background none
+ padding 6px
+ transition background 0.6s ease 0s
+ color #726E6C
+
+ &:hover {
+ background #3C3737
+ }
+ }
}
}
}
@@ -175,6 +225,14 @@
background-color #2A2525
}
}
+
+ .music-player {
+ width 100%
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ padding 20px 0
+ }
}
}
\ No newline at end of file
diff --git a/web/src/assets/iconfont/iconfont.css b/web/src/assets/iconfont/iconfont.css
index 387f2cc0..ef2d1a57 100644
--- a/web/src/assets/iconfont/iconfont.css
+++ b/web/src/assets/iconfont/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4125778 */
- src: url('iconfont.woff2?t=1715987806624') format('woff2'),
- url('iconfont.woff?t=1715987806624') format('woff'),
- url('iconfont.ttf?t=1715987806624') format('truetype');
+ src: url('iconfont.woff2?t=1721292490257') format('woff2'),
+ url('iconfont.woff?t=1721292490257') format('woff'),
+ url('iconfont.ttf?t=1721292490257') format('truetype');
}
.iconfont {
@@ -13,6 +13,54 @@
-moz-osx-font-smoothing: grayscale;
}
+.icon-pause:before {
+ content: "\e693";
+}
+
+.icon-prev:before {
+ content: "\e6a5";
+}
+
+.icon-next:before {
+ content: "\e6a7";
+}
+
+.icon-play:before {
+ content: "\e6a8";
+}
+
+.icon-remove:before {
+ content: "\e82b";
+}
+
+.icon-edit:before {
+ content: "\e61d";
+}
+
+.icon-download:before {
+ content: "\e83a";
+}
+
+.icon-more-vertical:before {
+ content: "\e8cb";
+}
+
+.icon-share1:before {
+ content: "\e661";
+}
+
+.icon-suno:before {
+ content: "\e608";
+}
+
+.icon-mp:before {
+ content: "\e6c4";
+}
+
+.icon-mp1:before {
+ content: "\e647";
+}
+
.icon-control-simple:before {
content: "\e624";
}
diff --git a/web/src/assets/iconfont/iconfont.js b/web/src/assets/iconfont/iconfont.js
index 1a71104c..25288e87 100644
--- a/web/src/assets/iconfont/iconfont.js
+++ b/web/src/assets/iconfont/iconfont.js
@@ -1 +1 @@
-window._iconfont_svg_string_4125778='',function(a){var l=(l=document.getElementsByTagName("script"))[l.length-1],c=l.getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var t,h,i,o,z,s=function(l,c){c.parentNode.insertBefore(l,c)};if(c&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(l){console&&console.log(l)}}t=function(){var l,c=document.createElement("div");c.innerHTML=a._iconfont_svg_string_4125778,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(l=document.body).firstChild?s(c,l.firstChild):l.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),t()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(i=t,o=a.document,z=!1,p(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,m())})}function m(){z||(z=!0,i())}function p(){try{o.documentElement.doScroll("left")}catch(l){return void setTimeout(p,50)}m()}}(window);
\ No newline at end of file
+window._iconfont_svg_string_4125778='',function(a){var l=(l=document.getElementsByTagName("script"))[l.length-1],c=l.getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var t,h,i,o,z,m=function(l,c){c.parentNode.insertBefore(l,c)};if(c&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(l){console&&console.log(l)}}t=function(){var l,c=document.createElement("div");c.innerHTML=a._iconfont_svg_string_4125778,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(l=document.body).firstChild?m(c,l.firstChild):l.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),t()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(i=t,o=a.document,z=!1,p(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,s())})}function s(){z||(z=!0,i())}function p(){try{o.documentElement.doScroll("left")}catch(l){return void setTimeout(p,50)}s()}}(window);
\ No newline at end of file
diff --git a/web/src/assets/iconfont/iconfont.json b/web/src/assets/iconfont/iconfont.json
index d1cd109e..c48278e4 100644
--- a/web/src/assets/iconfont/iconfont.json
+++ b/web/src/assets/iconfont/iconfont.json
@@ -5,6 +5,90 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
+ {
+ "icon_id": "7156146",
+ "name": "暂停",
+ "font_class": "pause",
+ "unicode": "e693",
+ "unicode_decimal": 59027
+ },
+ {
+ "icon_id": "14929909",
+ "name": "多媒体控件Multimedia Controls (12)",
+ "font_class": "prev",
+ "unicode": "e6a5",
+ "unicode_decimal": 59045
+ },
+ {
+ "icon_id": "14929910",
+ "name": "多媒体控件Multimedia Controls (11)",
+ "font_class": "next",
+ "unicode": "e6a7",
+ "unicode_decimal": 59047
+ },
+ {
+ "icon_id": "14929913",
+ "name": "多媒体控件Multimedia Controls (13)",
+ "font_class": "play",
+ "unicode": "e6a8",
+ "unicode_decimal": 59048
+ },
+ {
+ "icon_id": "401063",
+ "name": "remove",
+ "font_class": "remove",
+ "unicode": "e82b",
+ "unicode_decimal": 59435
+ },
+ {
+ "icon_id": "968465",
+ "name": "编辑",
+ "font_class": "edit",
+ "unicode": "e61d",
+ "unicode_decimal": 58909
+ },
+ {
+ "icon_id": "6151351",
+ "name": "download",
+ "font_class": "download",
+ "unicode": "e83a",
+ "unicode_decimal": 59450
+ },
+ {
+ "icon_id": "18986714",
+ "name": "more",
+ "font_class": "more-vertical",
+ "unicode": "e8cb",
+ "unicode_decimal": 59595
+ },
+ {
+ "icon_id": "11903724",
+ "name": "share",
+ "font_class": "share1",
+ "unicode": "e661",
+ "unicode_decimal": 58977
+ },
+ {
+ "icon_id": "40001359",
+ "name": "suno",
+ "font_class": "suno",
+ "unicode": "e608",
+ "unicode_decimal": 58888
+ },
+ {
+ "icon_id": "4318807",
+ "name": "mp3",
+ "font_class": "mp",
+ "unicode": "e6c4",
+ "unicode_decimal": 59076
+ },
+ {
+ "icon_id": "12600802",
+ "name": "mp4",
+ "font_class": "mp1",
+ "unicode": "e647",
+ "unicode_decimal": 58951
+ },
{
"icon_id": "12243734",
"name": "control",
diff --git a/web/src/assets/iconfont/iconfont.ttf b/web/src/assets/iconfont/iconfont.ttf
index 33495382..5e3d71bc 100644
Binary files a/web/src/assets/iconfont/iconfont.ttf and b/web/src/assets/iconfont/iconfont.ttf differ
diff --git a/web/src/assets/iconfont/iconfont.woff b/web/src/assets/iconfont/iconfont.woff
index 4d646f56..5156107d 100644
Binary files a/web/src/assets/iconfont/iconfont.woff and b/web/src/assets/iconfont/iconfont.woff differ
diff --git a/web/src/assets/iconfont/iconfont.woff2 b/web/src/assets/iconfont/iconfont.woff2
index 25f324cf..d2db2973 100644
Binary files a/web/src/assets/iconfont/iconfont.woff2 and b/web/src/assets/iconfont/iconfont.woff2 differ
diff --git a/web/src/components/MusicPlayer.vue b/web/src/components/MusicPlayer.vue
new file mode 100644
index 00000000..a3e38071
--- /dev/null
+++ b/web/src/components/MusicPlayer.vue
@@ -0,0 +1,243 @@
+
+