feat: improve QQLogin interface appearance

Author: caoergou

src/apps/QQLogin.jsx

@@ -11,18 +11,60 @@ const Wrap = styled.div`
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: #dce8f7;
+  background: linear-gradient(135deg, #dce8f7 0%, #c8d8e8 100%);
   font-family: 'Microsoft YaHei', '微软雅黑', Tahoma, sans-serif;
   font-size: 12px;
   user-select: none;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+      repeating-linear-gradient(
+        45deg,
+        transparent,
+        transparent 2px,
+        rgba(255,255,255,0.1) 2px,
+        rgba(255,255,255,0.1) 4px
+      );
+    pointer-events: none;
+    opacity: 0.3;
+  }
 `;
 
 const Header = styled.div`
-  background: linear-gradient(to bottom, #4a90d9 0%, #2a6db5 100%);
+  background: linear-gradient(to bottom, #4a90d9 0%, #3a7bd5 50%, #2a6bc5 100%);
   padding: 16px 14px 12px;
   display: flex;
   align-items: flex-end;
   gap: 10px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+      repeating-linear-gradient(
+        45deg,
+        transparent,
+        transparent 3px,
+        rgba(255,255,255,0.1) 3px,
+        rgba(255,255,255,0.1) 6px
+      );
+    pointer-events: none;
+  }
 `;
 
 const Penguin = () => (
@@ -40,6 +82,9 @@ const Penguin = () => (
     <circle cx="30" cy="16" r="3" fill="white"/>
     <circle cx="22.8" cy="16.5" r="1.5" fill="#1a1a1a"/>
     <circle cx="30.8" cy="16.5" r="1.5" fill="#1a1a1a"/>
+    {/* 高光 */}
+    <circle cx="21.5" cy="15.5" r="1" fill="#ffffff"/>
+    <circle cx="29.5" cy="15.5" r="1" fill="#ffffff"/>
     {/* 嘴 */}
     <ellipse cx="26" cy="22" rx="4" ry="2.5" fill="#f0a020"/>
     {/* 翅膀 */}
@@ -50,21 +95,27 @@ const Penguin = () => (
     <ellipse cx="32" cy="58" rx="6" ry="3" fill="#f0a020"/>
     {/* 围巾/领结 */}
     <rect x="19" y="28" width="14" height="4" rx="2" fill="#e8001c"/>
+    {/* 围巾细节 */}
+    <rect x="18" y="27" width="2" height="6" fill="#c00"/>
+    <rect x="32" y="27" width="2" height="6" fill="#c00"/>
   </svg>
 );
 
 const HeaderText = styled.div`
   color: white;
   line-height: 1.4;
+  position: relative;
+  z-index: 1;
 
   .title {
     font-size: 18px;
     font-weight: bold;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.4), 0 0 3px rgba(255,255,255,0.3);
   }
   .version {
     font-size: 11px;
     color: #c8dff8;
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
   }
 `;
 
@@ -87,12 +138,13 @@ const Avatar = styled.div`
   width: 52px;
   height: 52px;
   border-radius: 6px;
-  background: linear-gradient(135deg, #b8d4f0 0%, #7fb0e0 100%);
+  background: linear-gradient(135deg, #b8d4f0 0%, #7fb0e0 50%, #9cc6e8 100%);
   border: 2px solid #aac8e8;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 28px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 `;
 
 const FieldRow = styled.div`
@@ -105,22 +157,24 @@ const FieldRow = styled.div`
     text-align: right;
     color: #444;
     flex-shrink: 0;
+    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
   }
 
   input {
     flex: 1;
     height: 22px;
     border: 1px solid #8eb4d8;
-    border-radius: 2px;
+    border-radius: 3px;
     padding: 0 6px;
     font-size: 12px;
     font-family: inherit;
     background: white;
     outline: none;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
     &:focus {
       border-color: #3a7bd5;
-      box-shadow: 0 0 3px rgba(58,123,213,0.4);
+      box-shadow: 0 0 0 2px rgba(58,123,213,0.2), inset 0 1px 2px rgba(0,0,0,0.1);
     }
   }
 `;
@@ -136,20 +190,28 @@ const CheckRow = styled.div`
     gap: 4px;
     color: #444;
     cursor: pointer;
+    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
+
+    input[type="checkbox"] {
+      width: 13px;
+      height: 13px;
+      cursor: pointer;
+    }
   }
 `;
 
 const Divider = styled.div`
   height: 1px;
-  background: #b0c8e0;
-  margin: 2px 0;
+  background: linear-gradient(to right, transparent 0%, #b0c8e0 50%, transparent 100%);
+  margin: 4px 0;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.3);
 `;
 
 const ButtonRow = styled.div`
   display: flex;
   justify-content: center;
   gap: 10px;
-  padding-top: 4px;
+  padding-top: 8px;
 `;
 
 const Btn = styled.button`
@@ -160,37 +222,65 @@ const Btn = styled.button`
   font-family: inherit;
   cursor: pointer;
   border: 1px solid;
+  position: relative;
+  overflow: hidden;
 
   ${p => p.$primary ? `
-    background: linear-gradient(to bottom, #5ba3e8 0%, #2878d6 100%);
+    background: linear-gradient(to bottom, #7cb3f0 0%, #5a93e0 50%, #3a7bd5 100%);
     color: white;
     border-color: #1a5cb5;
-    &:hover { filter: brightness(1.08); }
-    &:active { filter: brightness(0.92); }
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+
+    &:hover {
+      background: linear-gradient(to bottom, #8cc4f0 0%, #6ba4e0 50%, #4a8bd5 100%);
+      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    }
+    &:active {
+      background: linear-gradient(to bottom, #3a7bd5 0%, #2a6bc5 50%, #1a5cb5 100%);
+      box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
+    }
   ` : `
-    background: linear-gradient(to bottom, #f5f5f5 0%, #e0e0e0 100%);
+    background: linear-gradient(to bottom, #f5f5f5 0%, #e0e0e0 50%, #d0d0d0 100%);
     color: #333;
     border-color: #aaa;
-    &:hover { background: linear-gradient(to bottom, #fff 0%, #e8e8e8 100%); }
-    &:active { filter: brightness(0.92); }
+    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+
+    &:hover {
+      background: linear-gradient(to bottom, #ffffff 0%, #e8e8e8 50%, #d8d8d8 100%);
+      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    }
+    &:active {
+      background: linear-gradient(to bottom, #d0d0d0 0%, #c0c0c0 50%, #b0b0b0 100%);
+      box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
+    }
   `}
 `;
 
 const Footer = styled.div`
-  background: #c8daf0;
+  background: linear-gradient(to bottom, #c8daf0 0%, #b8c8d8 100%);
   border-top: 1px solid #aac0dc;
   padding: 5px 14px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 11px;
   color: #5577aa;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
 
   a {
     color: #2255aa;
     text-decoration: none;
     cursor: pointer;
-    &:hover { text-decoration: underline; }
+    text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
+    padding: 2px 4px;
+    border-radius: 2px;
+
+    &:hover {
+      text-decoration: underline;
+      background: rgba(255,255,255,0.3);
+    }
   }
 `;
 

src/components/Taskbar.jsx

@@ -660,51 +660,7 @@ const Taskbar = () => {
                     >
                         <XPIcon name="sound" size={16} color="white" />
                     </div>
-                    <div
-                        style={{ marginRight: '10px', display: 'flex', alignItems: 'center', cursor: 'pointer' }}
-                        title="QQ — 右键更多选项"
-                        onClick={(e) => { e.stopPropagation(); handleLaunch('QQ'); }}
-                        onContextMenu={handleQqContextMenu}
-                    >
-                        <XPIcon name="qq" size={16} color="white" />
-                    </div>
-                    {qqContextMenu && (
-                        <div
-                            ref={qqContextMenuRef}
-                            style={{
-                                position: 'fixed',
-                                left: qqContextMenu.x,
-                                bottom: 32,
-                                background: '#f5f5f5',
-                                border: '1px solid #999',
-                                boxShadow: '2px 2px 4px rgba(0,0,0,0.3)',
-                                zIndex: 2147483647,
-                                minWidth: '120px',
-                                padding: '2px 0',
-                                fontSize: '12px'
-                            }}
-                        >
-                            {[
-                                { label: '打开QQ', action: 'open' },
-                                { label: '打开QQ空间', action: 'space' },
-                                { label: '打开QQ邮箱', action: 'mail' },
-                                { label: null },
-                                { label: '退出QQ', action: 'exit' }
-                            ].map((item, i) => item.label === null ? (
-                                <div key={i} style={{ height: '1px', background: '#ccc', margin: '2px 0' }} />
-                            ) : (
-                                <div
-                                    key={i}
-                                    style={{ padding: '4px 16px', cursor: 'pointer', color: '#000' }}
-                                    onMouseEnter={(e) => { e.target.style.background = '#0078d7'; e.target.style.color = '#fff'; }}
-                                    onMouseLeave={(e) => { e.target.style.background = 'transparent'; e.target.style.color = '#000'; }}
-                                    onClick={() => handleQqMenuAction(item.action)}
-                                >
-                                    {item.label}
-                                </div>
-                            ))}
-                        </div>
-                    )}
+                    {/* QQ tray icon is now dynamically registered by QQLogin component */}
                     <div
                         style={{ marginRight: '10px', display: 'flex', alignItems: 'center' }}
                         title="网络已连接"