From 2112870a8b710fc06be400ca51096ca4401c6451 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Fri, 13 Oct 2023 00:50:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8D=A2=E4=B8=8A=E4=BA=91=E6=9C=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/weigets.js | 112 +++++++++++++++++++++++++++++++++++++---------
 1 file changed, 90 insertions(+), 22 deletions(-)

diff --git a/public/weigets.js b/public/weigets.js
index 4b39fa9..65ec0f0 100644
--- a/public/weigets.js
+++ b/public/weigets.js
@@ -1,4 +1,4 @@
-export function createElement({ innerText, textContent, onclick, onchange, onkeydown, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
+export function createElement({ innerText, textContent, onclick, onchange, onkeydown, onmouseenter, onmouseleave, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
     const element = document.createElement(tagName)
     for (const key in attributes) element.setAttribute(key, attributes[key])
     if (style) Object.assign(element.style, style)
@@ -11,6 +11,8 @@ export function createElement({ innerText, textContent, onclick, onchange, onkey
     if (onclick) element.onclick = onclick
     if (dataset) Object.assign(element.dataset, dataset)
     if (children) children.forEach(child => element.appendChild(child))
+    if (onmouseenter) element.onmouseenter = onmouseenter
+    if (onmouseleave) element.onmouseleave = onmouseleave
     return element
 }
 
@@ -41,6 +43,18 @@ export function Avatar(options) {
 }
 
 export function UploadMusic(options) {
+    const text = createElement({
+        textContent: '点击或拖拽音乐到此处共享您的音乐',
+        style: {
+            width: '100%',
+            color: '#999',
+            lineHeight: '5rem',
+            textAlign: 'center',
+            position: 'absolute',
+            top: 0,
+            display: 'none'
+        }
+    })
     return createElement({
         ...options,
         style: {
@@ -72,38 +86,92 @@ export function UploadMusic(options) {
             })
             input.click()
         },
+        onmouseenter: event => {
+            text.style.display = 'block'
+        },
+        onmouseleave: event => {
+            text.style.display = 'none'
+        },
         children: [
             // 绘制一个云朵上传图标(别放弃...还有我呢!)
             createElement({
                 style: {
-                    position: 'absolute',
-                    top: '50%',
-                    left: '50%',
-                    transform: 'translate(-50%, -50%)',
-                    width: '4rem',
-                    height: '4rem',
-                    backgroundColor: '#ff1414',
-                    borderRadius: '50%',
-                    opacity: 0.2,
-                    boxShadow: '-35px 10px 0 -10px, 33px 15px 0 -15px, 0 0 0 6px #fff, -35px 10px 0 -5px #fff, 33px 15px 0 -10px #fff;',
-                    background: 'currentColor',
+                    width: '82px',
+                    height: '30px',
+                    background: '#e7f4fd',
+                    background: '-webkit-linear-gradient(top,#e7f4fd 5%,#ceedfd 100%)',
+                    borderRadius: '25px',
+                    position: 'relative',
+                    margin: '33px auto 5px'
                 },
                 children: [
                     createElement({
                         style: {
+                            width: '45px',
+                            height: '45px',
+                            top: '-22px',
+                            right: '12px',
+                            borderRadius: '50px',
+                            borderRadius: '25px',
+                            background: '#e7f4fd',
                             position: 'absolute',
-                            top: '50%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            width: '2rem',
-                            height: '2rem',
-                            backgroundColor: '#fff',
-                            borderRadius: '50%',
-                            boxShadow: '0 0 0 6px #fff, -35px 10px 0 -5px #fff, 33px 15px 0 -10px #fff;',
+                            zIndex: '-1'
                         }
+                    }),
+                    createElement({
+                        style: {
+                            width: '25px',
+                            height: '25px',
+                            top: '-12px',
+                            left: '12px',
+                            borderRadius: '25px',
+                            background: '#e7f4fd',
+                            position: 'absolute',
+                            zIndex: '-1'
+                        }
+                    }),
+                    Span({
+                        width: '87px',
+                        position: 'absolute',
+                        bottom: '-2px',
+                        background: '#000',
+                        zIndex: '-1',
+                        boxShadow: '0 0 6px 2px rgba(0,0,0,0.1)',
+                        borderRadius: '50%'
                     })
-                ],
-            })
+                ]
+            }),
+            text
+            //createElement({
+            //    style: {
+            //        position: 'absolute',
+            //        top: '50%',
+            //        left: '50%',
+            //        transform: 'translate(-50%, -50%)',
+            //        width: '4rem',
+            //        height: '4rem',
+            //        backgroundColor: '#ff1414',
+            //        borderRadius: '50%',
+            //        opacity: 0.2,
+            //        boxShadow: '-35px 10px 0 -10px, 33px 15px 0 -15px, 0 0 0 6px #fff, -35px 10px 0 -5px #fff, 33px 15px 0 -10px #fff;',
+            //        background: 'currentColor',
+            //    },
+            //    children: [
+            //        createElement({
+            //            style: {
+            //                position: 'absolute',
+            //                top: '50%',
+            //                left: '50%',
+            //                transform: 'translate(-50%, -50%)',
+            //                width: '2rem',
+            //                height: '2rem',
+            //                backgroundColor: '#fff',
+            //                borderRadius: '50%',
+            //                boxShadow: '0 0 0 6px #fff, -35px 10px 0 -5px #fff, 33px 15px 0 -10px #fff;',
+            //            }
+            //        })
+            //    ],
+            //})
         ]
     })
     //Input({