song detail page is ready

web/src/assets/css/song.styl

@@ -0,0 +1,88 @@
+.page-song {
+  display: flex;
+  justify-content: center;
+  background-color: #0E0808;
+
+  .inner {
+    text-align left
+    color rgb(250 247 245)
+    padding 20px
+    max-width 600px
+    width 100%
+    font-family "Neue Montreal,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji"
+
+    .title {
+      font-size 40px
+      font-weight: 500
+      line-height 1rem
+      white-space nowrap
+      text-overflow ellipsis
+    }
+
+    .row {
+      padding 8px 0
+    }
+
+    .author {
+      display flex
+      align-items center
+      .nickname {
+        margin 0 10px
+      }
+
+      .btn {
+        margin-right 10px
+        background-color #363030
+        border none
+        border-radius 5px
+        padding 5px 10px
+        cursor pointer
+
+        &:hover {
+          background-color #5F5958
+        }
+      }
+    }
+
+    .date {
+      color #999999
+      display flex
+      align-items center
+
+      .version {
+        background-color #1C1616
+        border 1px solid #8f8f8f
+        font-weight normal
+        font-size 14px
+        padding 1px 3px
+        border-radius 5px
+        margin-left 10px
+      }
+    }
+
+    .prompt {
+      width 100%
+      height 100%
+      background-color transparent
+      white-space pre-wrap
+      overflow-y hidden
+      resize none
+      position relative
+      outline  2px solid transparent
+      outline-offset 2px
+      border none
+      font-size 100%
+      line-height 2rem
+    }
+  }
+
+
+  .music-player {
+    width 100%
+    position: fixed;
+    bottom: 0;
+    left: 50px;
+    padding 20px 0
+  }
+
+}

web/src/assets/css/suno.styl

@@ -38,6 +38,9 @@
         .text {
           margin-right 10px
         }
+        .el-icon {
+          top 2px
+        }
       }
       .item {
         margin-bottom: 20px
@@ -66,6 +69,55 @@
             opacity: 0.9;
           }
         }
+
+        .song {
+          display flex
+          padding 10px
+          background-color #252020
+          border-radius 10px
+          margin-bottom 10px
+          font-size 14px
+          position relative
+
+          .el-image {
+            width 50px
+            height 50px
+            border-radius 10px
+          }
+          .title {
+            display flex
+            margin-left 10px
+            align-items center
+          }
+
+          .el-button--info {
+            position absolute
+            right 20px
+            top 20px
+          }
+        }
+
+        .extend-secs {
+          padding 10px 0
+          font-size 14px
+
+          input {
+            width 50px
+            text-align center
+            padding 8px 10px
+            font-size 14px
+            background none
+            border 1px solid #8f8f8f
+            margin 0 10px
+            border-radius 10px
+            outline: none;
+            transition: border-color 0.5s ease, box-shadow 0.5s ease;
+            &:focus {
+              border-color: #0F7A71;
+              box-shadow: 0 0 5px #0F7A71;
+            }
+          }
+        }
       }
 
       .tag-select {
@@ -190,6 +242,10 @@
               padding 1px 3px
               border-radius 5px
               margin-left 10px
+
+              .iconfont {
+                font-size 12px
+              }
             }
           }
 
@@ -267,11 +323,22 @@
             text-overflow: ellipsis; /* 用省略号表示溢出的内容 */
           }
         }
-
-        .right {
+        .center {
           display flex
           width 100%
           justify-content center
+          .failed {
+            display flex
+            align-items center
+            color #E4696B
+            font-size 14px
+          }
+        }
+        .right {
+          display flex
+          width 100px
+          justify-content center
+          align-items center
         }
       }
     }

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1721356513025') format('woff2'),
-       url('iconfont.woff?t=1721356513025') format('woff'),
-       url('iconfont.ttf?t=1721356513025') format('truetype');
+  src: url('iconfont.woff2?t=1721896403264') format('woff2'),
+       url('iconfont.woff?t=1721896403264') format('woff'),
+       url('iconfont.ttf?t=1721896403264') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-link:before {
+  content: "\e6b4";
+}
+
 .icon-app:before {
   content: "\e64f";
 }

web/src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "880330",
+      "name": "link",
+      "font_class": "link",
+      "unicode": "e6b4",
+      "unicode_decimal": 59060
+    },
     {
       "icon_id": "1503777",
       "name": "应用",