the music player is ready

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
+    }
   }
 
 }

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

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",