文件传输6-优化样式1

web/src/components/clipboard/FileTransfer.svelte

@@ -177,139 +177,247 @@
     .file-transfer-section {
         display: flex;
         flex-direction: column;
-        gap: 2rem;
+        gap: 2.5rem;
+        padding: 1rem;
     }
 
     .send-files, .received-files {
         display: flex;
         flex-direction: column;
-        gap: 1rem;
+        gap: 1.5rem;
+        padding: 2rem;
+        background: rgba(255, 255, 255, 0.03);
+        border-radius: 16px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        backdrop-filter: blur(8px);
+        transition: all 0.3s ease;
+    }
+
+    .send-files:hover, .received-files:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+        border-color: rgba(255, 255, 255, 0.15);
+    }
+
+    .send-files h4, .received-files h4 {
+        margin: 0 0 1rem 0;
+        font-size: 1.1rem;
+        font-weight: 600;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
     }
 
     .file-drop-zone {
-        border: 2px dashed var(--border);
+        border: 2px dashed rgba(255, 255, 255, 0.2);
-        border-radius: 0.5rem;
+        border-radius: 16px;
-        padding: 2rem;
+        padding: 3rem 2rem;
         text-align: center;
-        transition: all 0.2s ease;
+        transition: all 0.3s ease;
-        background-color: var(--background);
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%);
         cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .file-drop-zone::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
+        transition: left 0.5s ease;
     }
 
     .file-drop-zone:hover {
-        border-color: var(--accent);
+        border-color: rgba(102, 126, 234, 0.4);
-        background-color: var(--accent-background);
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
     }
 
-    .file-drop-zone.dragover {
+    .file-drop-zone:hover::before {
-        border-color: var(--accent);
+        left: 100%;
-        background-color: var(--accent-background);
-        transform: scale(1.02);
     }
+    .file-drop-zone.dragover {
+    border-color: rgba(102, 126, 234, 0.6);
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+    transform: scale(1.02);
+    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.25);
+}
 
     .file-drop-zone p {
         margin-bottom: 1rem;
         color: var(--secondary);
+        font-size: 1.1rem;
+        font-weight: 500;
+        position: relative;
+        z-index: 1;
     }
 
     .file-list {
         display: flex;
         flex-direction: column;
-        gap: 0.5rem;
+        gap: 0.75rem;
+        margin-top: 1rem;
+    }
+
+    .file-list h5 {
+        margin: 0 0 1rem 0;
+        font-weight: 600;
+        color: var(--text);
+        font-size: 0.95rem;
     }
 
     .file-item {
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: 1rem;
-        padding: 0.5rem;
+        padding: 1rem;
-        background-color: var(--background-alt);
+        background: rgba(255, 255, 255, 0.02);
-        border-radius: 0.25rem;
+        border-radius: 12px;
-        border: 1px solid var(--border);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        transition: all 0.3s ease;
+        backdrop-filter: blur(4px);
+    }
+
+    .file-item:hover {
+        transform: translateY(-1px);
+        border-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     }
 
     .file-name {
         flex: 1;
         font-weight: 500;
         color: var(--text);
+        word-break: break-all;
     }
 
     .file-size {
         color: var(--secondary);
         font-size: 0.9rem;
+        font-weight: 400;
     }
 
     .file-actions {
         display: flex;
-        gap: 0.5rem;
+        gap: 0.75rem;
+        align-items: center;
     }
 
     .download-btn {
-        background-color: var(--accent-background);
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
-        border: 1px solid var(--accent);
+        border: 1px solid rgba(102, 126, 234, 0.2);
-        color: var(--accent);
+        color: #667eea;
-        padding: 0.25rem 0.5rem;
+        padding: 0.5rem 1rem;
-        border-radius: 0.25rem;
+        border-radius: 8px;
         cursor: pointer;
-        font-size: 0.8rem;
+        font-size: 0.85rem;
-        transition: all 0.2s ease;
+        font-weight: 500;
+        transition: all 0.3s ease;
+        backdrop-filter: blur(4px);
     }
 
     .download-btn:hover {
-        background-color: var(--accent);
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
-        color: var(--background);
+        border-color: rgba(102, 126, 234, 0.4);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
     }
 
     .remove-file {
-        background: none;
+        background: rgba(244, 67, 54, 0.1);
-        border: none;
+        border: 1px solid rgba(244, 67, 54, 0.2);
-        color: var(--red);
+        color: #f44336;
         cursor: pointer;
-        padding: 0.25rem;
+        padding: 0.5rem;
-        border-radius: 0.25rem;
+        border-radius: 8px;
-        transition: background-color 0.2s;
+        transition: all 0.3s ease;
+        font-size: 0.9rem;
+        backdrop-filter: blur(4px);
     }
 
     .remove-file:hover {
-        background-color: var(--red-background);
+        background: rgba(244, 67, 54, 0.2);
+        border-color: rgba(244, 67, 54, 0.4);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2);
     }
 
     .progress-section {
-        margin-top: 1rem;
+        margin-top: 1.5rem;
-        padding: 1rem;
+        padding: 1.5rem;
-        background-color: var(--background-alt);
+        background: rgba(255, 255, 255, 0.02);
-        border-radius: 0.5rem;
+        border-radius: 12px;
-        border: 1px solid var(--border);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        backdrop-filter: blur(4px);
     }
 
     .progress-section h4 {
-        margin: 0 0 0.5rem 0;
+        margin: 0 0 1rem 0;
         color: var(--text);
-        font-size: 0.9rem;
+        font-size: 1rem;
+        font-weight: 600;
     }
 
     .progress-bar {
         width: 100%;
-        height: 8px;
+        height: 12px;
-        background-color: var(--border);
+        background: rgba(255, 255, 255, 0.1);
-        border-radius: 4px;
+        border-radius: 6px;
         overflow: hidden;
+        position: relative;
     }
 
     .progress-fill {
         height: 100%;
-        background-color: var(--accent);
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         transition: width 0.3s ease;
+        border-radius: 6px;
+        position: relative;
+    }
+
+    .progress-fill::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(45deg, 
+            transparent 25%, 
+            rgba(255, 255, 255, 0.2) 25%, 
+            rgba(255, 255, 255, 0.2) 50%, 
+            transparent 50%, 
+            transparent 75%, 
+            rgba(255, 255, 255, 0.2) 75%);
+        background-size: 20px 20px;
+        animation: progress-stripes 1s linear infinite;
+    }
+
+    @keyframes progress-stripes {
+        0% { background-position: 0 0; }
+        100% { background-position: 20px 0; }
     }
 
     .empty-state {
         text-align: center;
         color: var(--secondary);
         font-style: italic;
-        padding: 2rem;
+        padding: 3rem 2rem;
-        border: 1px dashed var(--border);
+        border: 2px dashed rgba(255, 255, 255, 0.1);
-        border-radius: 0.5rem;
+        border-radius: 12px;
-        background-color: var(--background-alt);
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%);
+        transition: all 0.3s ease;
+    }
+
+    .empty-state:hover {
+        border-color: rgba(255, 255, 255, 0.2);
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
     }
 
     @media (max-width: 768px) {

web/src/components/clipboard/SessionManager.svelte

@@ -104,15 +104,27 @@
     </div>
 {/if}
 
-<style>
+<style>    .connection-setup {
-    .connection-setup {
         display: flex;
         flex-direction: column;
-        gap: 2rem;
+        gap: 2.5rem;
+        padding: 1rem;
     }
 
     .setup-option {
         text-align: center;
+        padding: 2rem;
+        background: rgba(255, 255, 255, 0.03);
+        border-radius: 16px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        backdrop-filter: blur(8px);
+        transition: all 0.3s ease;
+    }
+
+    .setup-option:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+        border-color: rgba(255, 255, 255, 0.15);
     }
 
     .setup-option h3 {
@@ -155,76 +167,147 @@
         border-radius: 0.25rem;
         background-color: var(--input-background);
         color: var(--text);
-    }
+    }    .session-info {
-
-    .session-info {
         text-align: center;
+        padding: 1rem;
     }
 
     .session-details {
         display: flex;
         flex-direction: column;
-        gap: 1rem;
+        gap: 1.5rem;
         align-items: center;
     }
 
     .session-id {
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: 1rem;
+        padding: 1rem;
+        background: rgba(255, 255, 255, 0.02);
+        border-radius: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        backdrop-filter: blur(4px);
+    }
+
+    .session-id span {
+        font-weight: 500;
+        color: var(--secondary);
     }
 
     .session-id code {
-        background-color: var(--border);
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
-        padding: 0.25rem 0.5rem;
+        padding: 0.5rem 1rem;
-        border-radius: 0.25rem;
+        border-radius: 8px;
-        font-family: monospace;
+        font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+        font-weight: 600;
+        letter-spacing: 0.5px;
+        color: #667eea;
+        border: 1px solid rgba(102, 126, 234, 0.2);
     }
 
     .copy-btn {
-        background: none;
+        background: rgba(255, 255, 255, 0.03);
-        border: none;
+        border: 1px solid rgba(255, 255, 255, 0.1);
         cursor: pointer;
-        padding: 0.25rem;
+        padding: 0.5rem;
-        border-radius: 0.25rem;
+        border-radius: 8px;
+        transition: all 0.3s ease;
+        backdrop-filter: blur(4px);
+        font-size: 1rem;
     }
 
     .copy-btn:hover {
-        background-color: var(--hover-background);
+        background: rgba(102, 126, 234, 0.1);
+        border-color: rgba(102, 126, 234, 0.3);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
     }
 
     .qr-code {
         text-align: center;
+        padding: 1.5rem;
+        background: rgba(255, 255, 255, 0.02);
+        border-radius: 16px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        backdrop-filter: blur(4px);
+    }
+
+    .qr-code h4 {
+        margin: 0 0 1rem 0;
+        font-weight: 600;
+        color: var(--text);
     }
 
     .qr-code img {
         max-width: 200px;
-        border: 1px solid var(--border);
+        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: 0.5rem;
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     }
 
     .connection-status {
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: 0.75rem;
+        padding: 1rem 1.5rem;
+        background: rgba(255, 255, 255, 0.02);
+        border-radius: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        backdrop-filter: blur(4px);
     }
 
     .status-indicator {
-        width: 12px;
+        width: 16px;
-        height: 12px;
+        height: 16px;
         border-radius: 50%;
-        background-color: var(--red);
+        background-color: #f44336;
+        position: relative;
+        transition: all 0.3s ease;
+    }
+
+    .status-indicator::before {
+        content: '';
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        right: -4px;
+        bottom: -4px;
+        border-radius: 50%;
+        background-color: inherit;
+        opacity: 0.3;
+        animation: pulse 2s infinite;
     }
 
     .status-indicator.connected {
-        background-color: var(--green);
+        background-color: #4caf50;
+    }
+
+    @keyframes pulse {
+        0% {
+            transform: scale(1);
+            opacity: 0.3;
+        }
+        50% {
+            transform: scale(1.2);
+            opacity: 0.1;
+        }
+        100% {
+            transform: scale(1);
+            opacity: 0.3;
+        }
+    }
+
+    .connection-status span {
+        font-weight: 500;
+        color: var(--text);
     }
 
     .disconnect-section {
         text-align: center;
-        margin-top: 2rem;
+        margin-top: 2.5rem;
         padding-top: 2rem;
-        border-top: 1px solid var(--border);
+        border-top: 1px solid rgba(255, 255, 255, 0.08);
     }
 
     @media (min-width: 768px) {

web/src/components/clipboard/TabNavigation.svelte

@@ -29,56 +29,97 @@
     .tab-navigation {
         display: flex;
         gap: 0.5rem;
-        margin-bottom: 1.5rem;
+        margin-bottom: 2rem;
-        padding: 0.25rem;
+        padding: 0.5rem;
-        background-color: var(--button);
+        background: rgba(255, 255, 255, 0.05);
-        border-radius: 0.5rem;
+        border-radius: 16px;
         max-width: fit-content;
-        margin: 0 auto 1.5rem auto;
+        margin: 0 auto 2rem auto;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        backdrop-filter: blur(10px);
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
     }
 
     .tab-button {
-        padding: 0.75rem 1.5rem;
+        padding: 1rem 2rem;
         border: none;
-        background-color: transparent;
+        background: transparent;
-        color: var(--secondary);
+        color: var(--subtext);
-        border-radius: 0.25rem;
+        border-radius: 12px;
         cursor: pointer;
-        font-size: 0.9rem;
+        font-size: 1rem;
-        font-weight: 500;
+        font-weight: 600;
-        transition: all 0.2s ease;
+        transition: all 0.3s ease;
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: 0.75rem;
+        position: relative;
+        overflow: hidden;
+        min-width: 140px;
+        justify-content: center;
+    }
+
+    .tab-button::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+        transition: left 0.5s ease;
+    }
+
+    .tab-button:hover::before {
+        left: 100%;
     }
 
     .tab-button:hover {
-        background-color: var(--button-hover);
+        background: rgba(255, 255, 255, 0.08);
         color: var(--text);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     }
 
     .tab-button.active {
-        background-color: var(--secondary);
+        background: linear-gradient(135deg, var(--accent), var(--accent-hover));
-        color: var(--primary);
+        color: white;
         cursor: default;
+        box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.3);
+        transform: translateY(-1px);
     }
 
     .tab-button.active:hover {
-        background-color: var(--secondary);
+        background: linear-gradient(135deg, var(--accent), var(--accent-hover));
-        color: var(--primary);
+        color: white;
+        transform: translateY(-1px);
+    }
+
+    .tab-button.active::before {
+        display: none;
     }
 
     @media (max-width: 768px) {
         .tab-navigation {
             width: 100%;
             max-width: none;
+            margin: 0 0 2rem 0;
         }
         
         .tab-button {
             flex: 1;
             justify-content: center;
-            padding: 0.75rem 1rem;
+            padding: 1rem;
+            font-size: 0.9rem;
+            min-width: auto;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .tab-button {
+            padding: 0.8rem 0.5rem;
             font-size: 0.85rem;
+            gap: 0.5rem;
         }
     }
 </style>

web/src/components/clipboard/TextSharing.svelte

@@ -78,99 +78,165 @@
     .text-sharing-section {
         display: flex;
         flex-direction: column;
-        gap: 2rem;
+        gap: 2.5rem;
+        padding: 1rem;
     }
 
     .send-text, .received-text {
         display: flex;
         flex-direction: column;
-        gap: 1rem;
+        gap: 1.5rem;
+        padding: 2rem;
+        background: rgba(255, 255, 255, 0.03);
+        border-radius: 16px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        backdrop-filter: blur(8px);
+        transition: all 0.3s ease;
+    }
+
+    .send-text:hover, .received-text:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+        border-color: rgba(255, 255, 255, 0.15);
+    }
+
+    .send-text h4, .received-text h4 {
+        margin: 0 0 1rem 0;
+        font-size: 1.1rem;
+        font-weight: 600;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
     }
 
     .text-input {
         width: 100%;
-        padding: 0.75rem;
+        padding: 1rem;
-        border: 1px solid var(--border);
+        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: 0.5rem;
+        border-radius: 12px;
-        background-color: var(--input-background);
+        background: rgba(255, 255, 255, 0.02);
         color: var(--text);
         resize: vertical;
         font-family: inherit;
-        font-size: 0.9rem;
+        font-size: 0.95rem;
-        line-height: 1.5;
+        line-height: 1.6;
-        min-height: 100px;
+        min-height: 120px;
-    }
+        transition: all 0.3s ease;
-
+        backdrop-filter: blur(4px);
-    .text-input:focus {
+    }    .text-input:focus {
         outline: none;
-        border-color: var(--accent);
+        border-color: rgba(102, 126, 234, 0.5);
-        box-shadow: 0 0 0 2px var(--accent-background);
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 4px 12px rgba(0, 0, 0, 0.15);
+        transform: translateY(-1px);
     }
 
     .text-input:disabled {
-        opacity: 0.6;
+        opacity: 0.5;
         cursor: not-allowed;
+        transform: none;
     }
 
     .text-display {
-        border: 1px solid var(--border);
+        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 0.5rem;
+        border-radius: 12px;
-        background-color: var(--background-alt);
+        background: rgba(255, 255, 255, 0.02);
         overflow: hidden;
+        backdrop-filter: blur(4px);
+        transition: all 0.3s ease;
+    }
+
+    .text-display:hover {
+        border-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     }
 
     .text-content {
         white-space: pre-wrap;
         word-wrap: break-word;
-        padding: 1rem;
+        padding: 1.5rem;
         margin: 0;
-        font-family: inherit;
+        font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
         font-size: 0.9rem;
-        line-height: 1.5;
+        line-height: 1.6;
         color: var(--text);
-        max-height: 200px;
+        max-height: 250px;
         overflow-y: auto;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%);
+    }
+
+    .text-content::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    .text-content::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 3px;
+    }
+
+    .text-content::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 3px;
+    }
+
+    .text-content::-webkit-scrollbar-thumb:hover {
+        background: rgba(255, 255, 255, 0.3);
     }
 
     .text-actions {
         display: flex;
-        gap: 0.5rem;
+        gap: 0.75rem;
-        padding: 0.75rem;
+        padding: 1.25rem;
-        background-color: var(--background);
+        background: rgba(255, 255, 255, 0.02);
-        border-top: 1px solid var(--border);
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
     }
 
     .copy-btn, .clear-btn {
-        padding: 0.5rem 1rem;
+        padding: 0.75rem 1.5rem;
-        border: 1px solid var(--border);
+        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: 0.25rem;
+        border-radius: 8px;
-        background-color: var(--button);
+        background: rgba(255, 255, 255, 0.03);
         color: var(--text);
         cursor: pointer;
-        font-size: 0.85rem;
+        font-size: 0.9rem;
-        transition: all 0.2s ease;
+        font-weight: 500;
+        transition: all 0.3s ease;
+        backdrop-filter: blur(4px);
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
     }
 
     .copy-btn:hover {
-        background-color: var(--accent-background);
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
-        border-color: var(--accent);
+        border-color: rgba(102, 126, 234, 0.3);
-        color: var(--accent);
+        color: #667eea;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
     }
 
     .clear-btn:hover {
-        background-color: var(--red-background);
+        background: linear-gradient(135deg, rgba(244, 67, 54, 0.2) 0%, rgba(233, 30, 99, 0.2) 100%);
-        border-color: var(--red);
+        border-color: rgba(244, 67, 54, 0.3);
-        color: var(--red);
+        color: #f44336;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2);
     }
 
     .empty-state {
         text-align: center;
         color: var(--secondary);
         font-style: italic;
-        padding: 2rem;
+        padding: 3rem 2rem;
-        border: 1px dashed var(--border);
+        border: 2px dashed rgba(255, 255, 255, 0.1);
-        border-radius: 0.5rem;
+        border-radius: 12px;
-        background-color: var(--background-alt);
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%);
+        transition: all 0.3s ease;
+    }
+
+    .empty-state:hover {
+        border-color: rgba(255, 255, 255, 0.2);
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
     }
 
     @media (max-width: 768px) {

web/src/routes/clipboard/+page.svelte

@@ -5,13 +5,11 @@
     import ActionButton from '$components/buttons/ActionButton.svelte';
     import QRCode from 'qrcode';
     import { currentApiURL } from '$lib/api/api-url';
-    
+      // Import clipboard components
-    // Import clipboard components
     import SessionManager from '$components/clipboard/SessionManager.svelte';
     import TabNavigation from '$components/clipboard/TabNavigation.svelte';
     import FileTransfer from '$components/clipboard/FileTransfer.svelte';
     import TextSharing from '$components/clipboard/TextSharing.svelte';
-    import DebugPanel from '$components/clipboard/DebugPanel.svelte';
       // Import clipboard manager
     import { ClipboardManager, clipboardState, type FileItem } from '$lib/clipboard/clipboard-manager';    // Types
     interface ReceivingFile {
@@ -146,22 +144,9 @@
         } else {
             console.log('No text to send');
         }
-    }
+    }    function handleClearText() {
-
-    function handleClearText() {
         clipboardState.update(state => ({ ...state, receivedText: '' }));
-    }
+    }// Lifecycle functions
-
-    // Debug handlers
-    function handleRestartWebRTC() {
-        // Implementation would be in clipboard manager
-        console.log('Restart WebRTC');
-    }
-
-    function handleForceConnection() {
-        // Implementation would be in clipboard manager
-        console.log('Force connection');
-    }    // Lifecycle functions
     onMount(async () => {
         clipboardManager = new ClipboardManager();
         
@@ -204,53 +189,54 @@
         on:shareSession={handleShareSession}
         on:cleanup={handleCleanup}
         bind:joinCode
-    />
+    />    {#if isConnected && peerConnected}        <!-- Connection Status Indicator -->
+        <div class="session-status">
+            <div class="status-badge">
+                <div class="status-dot connected"></div>
+                <span class="status-text">已连接到会话</span>
+            </div>
+        </div>
 
-    {#if isConnected && peerConnected}
         <!-- Tab Navigation Component -->
         <TabNavigation
             {activeTab}
             on:tabChange={handleTabChange}
         />
 
-        <!-- File Transfer Component -->        {#if activeTab === 'files'}
+        <!-- Content Area -->
-            <FileTransfer
+        <div class="tab-content">
-                {files}
+            <!-- File Transfer Component -->
-                {receivedFiles}
+            {#if activeTab === 'files'}
-                {sendingFiles}
+                <FileTransfer
-                {receivingFiles}
+                    {files}
-                {transferProgress}
+                    {receivedFiles}
-                {dragover}
+                    {sendingFiles}
-                {peerConnected}
+                    {receivingFiles}
-                on:filesSelected={handleFilesSelected}
+                    {transferProgress}
-                on:removeFile={handleRemoveFile}
+                    {dragover}
-                on:sendFiles={handleSendFiles}
+                    {peerConnected}
-                on:downloadFile={handleDownloadFile}
+                    on:filesSelected={handleFilesSelected}
-                on:removeReceivedFile={handleRemoveReceivedFile}
+                    on:removeFile={handleRemoveFile}
-            />
+                    on:sendFiles={handleSendFiles}
-        {/if}
+                    on:downloadFile={handleDownloadFile}
+                    on:removeReceivedFile={handleRemoveReceivedFile}
+                />
+            {/if}
 
-        <!-- Text Sharing Component -->        {#if activeTab === 'text'}
+            <!-- Text Sharing Component -->
-            <TextSharing
+            {#if activeTab === 'text'}
-                {receivedText}
+                <TextSharing
-                {peerConnected}
+                    {receivedText}
-                on:sendText={handleSendText}
+                    {peerConnected}
-                on:clearText={handleClearText}
+                    on:sendText={handleSendText}
-                bind:textContent
+                    on:clearText={handleClearText}
-            />
+                    bind:textContent
-        {/if}
+                />
-    {/if}    <!-- Debug Panel Component -->    {#if isConnected}
+            {/if}
-        <DebugPanel
+        </div>
-            {isConnected}
+    {/if}
-            {sessionId}
-            {isCreator}
-            {peerConnected}
-            {dataChannel}
-            {peerConnection}
-            on:restartWebRTC={handleRestartWebRTC}
-            on:forceConnection={handleForceConnection}
-        />
 
+    {#if isConnected}
         <!-- Disconnect Section -->
         <div class="disconnect-section">
             <ActionButton id="cleanup" click={handleCleanup}>
@@ -263,31 +249,298 @@
 <style>
     /* Main container styles */
     .clipboard-container {
-        max-width: 800px;
+        max-width: 900px;
         margin: 0 auto;
         padding: 2rem;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
+        border-radius: 20px;
+        backdrop-filter: blur(10px);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        min-height: 70vh;
     }
 
     .clipboard-header {
         text-align: center;
-        margin-bottom: 2rem;
+        margin-bottom: 3rem;
+        padding: 2rem 0;
+        position: relative;
+    }
+
+    .clipboard-header::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 60px;
+        height: 4px;
+        background: linear-gradient(90deg, var(--accent), var(--accent-hover));
+        border-radius: 2px;
+        margin-bottom: 1rem;
     }
 
     .clipboard-header h1 {
-        margin-bottom: 0.5rem;
+        margin-bottom: 0.8rem;
+        font-size: 2.5rem;
+        font-weight: 700;
+        background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin-top: 1rem;
+    }
+
+    .clipboard-header p {
+        color: var(--subtext);
+        font-size: 1.1rem;
+        font-weight: 400;
+        opacity: 0.8;
+    }
+
+    /* Enhanced session status */
+    .session-status {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 1.5rem 0;
+        padding: 1rem;
+        background: rgba(34, 197, 94, 0.1);
+        border: 1px solid rgba(34, 197, 94, 0.2);
+        border-radius: 12px;
+        backdrop-filter: blur(8px);
+    }
+
+    .status-badge {
+        display: flex;
+        align-items: center;
+        gap: 0.8rem;
+    }
+
+    .status-dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: #22c55e;
+        box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
+        animation: pulse 2s infinite;
+    }
+
+    .status-text {
+        font-weight: 500;
+        color: #22c55e;
+        font-size: 0.95rem;
+    }
+
+    @keyframes pulse {
+        0%, 100% {
+            opacity: 1;
+            transform: scale(1);
+        }
+        50% {
+            opacity: 0.7;
+            transform: scale(1.1);
+        }
+    }
+
+    /* Tab content styling */
+    .tab-content {
+        background: rgba(255, 255, 255, 0.03);
+        border-radius: 15px;
+        padding: 2rem;
+        margin-top: 1.5rem;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        backdrop-filter: blur(8px);
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+        transition: all 0.3s ease;
+    }
+
+    .tab-content:hover {
+        box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
+        border-color: rgba(255, 255, 255, 0.12);
     }
 
     .disconnect-section {
         text-align: center;
-        margin-top: 2rem;
+        margin-top: 3rem;
-        padding-top: 2rem;
+        padding: 2rem;
-        border-top: 1px solid var(--border);
+        background: rgba(255, 255, 255, 0.03);
+        border-radius: 15px;
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(5px);
+    }
+
+    /* Enhanced card-like sections */
+    :global(.card) {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 16px;
+        padding: 1.5rem;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        backdrop-filter: blur(10px);
+        transition: all 0.3s ease;
+        margin-bottom: 1.5rem;
+    }
+
+    :global(.card:hover) {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+        border-color: rgba(255, 255, 255, 0.15);
+    }
+
+    /* Progress indicators */
+    :global(.progress-container) {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 10px;
+        padding: 1rem;
+        margin: 1rem 0;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    /* File drop zone enhancements */
+    :global(.drop-zone) {
+        border: 2px dashed rgba(255, 255, 255, 0.2);
+        border-radius: 16px;
+        padding: 3rem 2rem;
+        text-align: center;
+        transition: all 0.3s ease;
+        background: rgba(255, 255, 255, 0.02);
+        position: relative;
+        overflow: hidden;
+    }
+
+    :global(.drop-zone::before) {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
+        transition: left 0.6s ease;
+    }
+
+    :global(.drop-zone:hover::before) {
+        left: 100%;
+    }
+
+    :global(.drop-zone.dragover) {
+        border-color: var(--accent);
+        background: rgba(var(--accent-rgb), 0.05);
+        transform: scale(1.02);
+    }
+
+    /* Button enhancements */
+    :global(.btn-primary) {
+        background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+        border: none;
+        border-radius: 12px;
+        padding: 0.8rem 2rem;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
+        position: relative;
+        overflow: hidden;
+    }
+
+    :global(.btn-primary:hover) {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 25px rgba(var(--accent-rgb), 0.4);
+    }
+
+    :global(.btn-primary::before) {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+        transition: left 0.5s ease;
+    }
+
+    :global(.btn-primary:hover::before) {
+        left: 100%;
+    }
+
+    /* Text areas and inputs */
+    :global(.text-input, .textarea) {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 12px;
+        padding: 1rem;
+        transition: all 0.3s ease;
+        backdrop-filter: blur(5px);
+    }
+
+    :global(.text-input:focus, .textarea:focus) {
+        outline: none;
+        border-color: var(--accent);
+        box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
+        background: rgba(255, 255, 255, 0.08);
+    }
+
+    /* Enhanced spacing and layout */
+    :global(.section-spacing) {
+        margin: 2rem 0;
+    }
+
+    :global(.content-spacing) {
+        margin: 1.5rem 0;
+    }
+
+    /* Loading states */
+    :global(.loading-shimmer) {
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);
+        background-size: 200% 100%;
+        animation: shimmer 1.5s infinite;
+    }
+
+    @keyframes shimmer {
+        0% {
+            background-position: -200% 0;
+        }
+        100% {
+            background-position: 200% 0;
+        }
     }
 
     /* Responsive Design */
     @media (max-width: 768px) {
         .clipboard-container {
             padding: 1rem;
+            margin: 1rem;
+            border-radius: 16px;
+        }
+
+        .clipboard-header h1 {
+            font-size: 2rem;
+        }
+
+        .clipboard-header {
+            padding: 1.5rem 0;
+            margin-bottom: 2rem;
+        }
+
+        :global(.card) {
+            padding: 1rem;
+        }
+
+        :global(.tab-content) {
+            padding: 1.5rem;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .clipboard-container {
+            margin: 0.5rem;
+        }
+
+        .clipboard-header h1 {
+            font-size: 1.8rem;
+        }
+
+        :global(.drop-zone) {
+            padding: 2rem 1rem;
         }
     }
 </style>