Enhance file manager UI/UX and routing.

Improve layout, styling, file type badges, accessibility, and add cross-panel transfer actions from the context menu.

src/main/java/com/sftp/manager/config/WebConfig.java

@@ -3,6 +3,7 @@ package com.sftp.manager.config;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.web.servlet.config.annotation.CorsRegistry;
 import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
+import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
 @Configuration
@@ -23,4 +24,10 @@ public class WebConfig implements WebMvcConfigurer {
         // registry.addResourceHandler("/**")
         //         .addResourceLocations("classpath:/static/");
     }
+
+    @Override
+    public void addViewControllers(ViewControllerRegistry registry) {
+        // 访问根路径时转发到静态首页 /static/index.html
+        registry.addViewController("/").setViewName("forward:/index.html");
+    }
 }

src/main/resources/static/css/style.css

@@ -6,11 +6,32 @@
     box-sizing: border-box;
 }
 
+:root {
+    /* 设计令牌（简化版） */
+    --color-primary: #0d6efd;
+    --color-success: #198754;
+    --color-warning: #ffc107;
+    --color-danger: #dc3545;
+    --color-dark: #0f172a;
+    --color-gray-700: #334155;
+    --color-gray-600: #6b7280;
+    --color-gray-200: #e5e7eb;
+    --color-gray-100: #f3f4f6;
+
+    --radius-sm: 4px;
+    --radius-md: 12px;
+    --shadow-card: 0 22px 55px rgba(15, 23, 42, 0.18);
+}
+
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     font-size: 14px;
     line-height: 1.5;
-    background-color: #f5f5f5;
+    color: var(--color-dark);
+    background:
+        radial-gradient(circle at top left, #e0f2fe 0, transparent 55%),
+        radial-gradient(circle at bottom right, #e9d5ff 0, transparent 55%),
+        #f3f4f6;
     overflow: hidden;
 }
 
@@ -18,8 +39,13 @@ body {
 .app-container {
     display: flex;
     flex-direction: column;
-    height: 100vh;
+    height: calc(100vh - 32px);
-    background-color: #fff;
+    max-width: 1220px;
+    margin: 16px auto;
+    background-color: #ffffff;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-card);
+    overflow: hidden;
 }
 
 /* 导航栏 */
@@ -42,6 +68,8 @@ body {
     align-items: center;
     gap: 8px;
     min-height: 44px;
+    background-color: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
 }
 
 /* 传输进度（上传/下载/跨面板传输） */
@@ -89,6 +117,7 @@ body {
     flex-direction: column;
     border-right: 1px solid #dee2e6;
     overflow: hidden;
+    background-color: #ffffff;
     min-width: 0;
 }
 
@@ -96,6 +125,11 @@ body {
     border-right: none;
 }
 
+/* 当前活动面板高亮 */
+.panel.active-panel {
+    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.4);
+}
+
 /* 拖拽上传效果 */
 .panel.drag-over {
     background-color: #e7f3ff;
@@ -233,14 +267,45 @@ body {
     color: white;
 }
 
+.file-item.selected .file-name {
+    color: #ffffff;
+}
+
 .file-icon {
     margin-right: 10px;
-    width: 24px;
+    width: 40px;
     text-align: center;
     font-size: 16px;
     flex-shrink: 0;
 }
 
+/* 文件类型徽标（替代 emoji 图标） */
+.file-type {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 34px;
+    padding: 2px 8px;
+    border-radius: 999px;
+    background-color: rgba(15, 23, 42, 0.06);
+    color: #0f172a;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.file-type-dir {
+    background-color: rgba(37, 99, 235, 0.15);
+    color: #1d4ed8;
+}
+
+.file-item.selected .file-type,
+.file-item.selected .file-type-dir {
+    background-color: rgba(15, 23, 42, 0.32);
+    color: #ffffff;
+}
+
 .file-name {
     flex: 1;
     white-space: nowrap;
@@ -278,6 +343,8 @@ body {
     padding: 4px 16px;
     font-size: 12px;
     color: #666;
+    background-color: #f9fafb;
+    border-top: 1px solid #e5e7eb;
 }
 
 /* 上下文菜单 */
@@ -346,6 +413,57 @@ body {
     font-size: 14px;
 }
 
+/* 页面头部信息区域 */
+.app-header {
+    padding: 12px 20px 4px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    background: linear-gradient(120deg, rgba(37, 99, 235, 0.07), rgba(56, 189, 248, 0.04));
+    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
+}
+
+.app-header-main {
+    max-width: 70%;
+}
+
+.app-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #0f172a;
+    margin-bottom: 4px;
+}
+
+.app-subtitle {
+    font-size: 13px;
+    color: #6b7280;
+    margin-bottom: 0;
+}
+
+.app-header-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    justify-content: flex-end;
+}
+
+.header-tag {
+    padding: 3px 10px;
+    border-radius: 999px;
+    font-size: 11px;
+    color: #1e40af;
+    background-color: rgba(59, 130, 246, 0.08);
+    border: 1px solid rgba(59, 130, 246, 0.18);
+    white-space: nowrap;
+}
+
+/* 全局聚焦可见样式（键盘导航） */
+*:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
     .panels-container {
@@ -382,3 +500,200 @@ body {
         padding: 6px 8px;
     }
 }
+
+/* ============================
+   ui-ux-pro-max 主题覆盖样式
+   ============================ */
+
+/* 设计令牌（Minimal + Gold） */
+:root {
+    --color-primary: #171717;
+    --color-secondary: #404040;
+    --color-cta: #D4AF37;
+
+    --color-text: #171717;
+    --color-bg: #ffffff;
+
+    --radius-sm: 4px;
+    --radius-md: 14px;
+    --shadow-card: 0 24px 60px rgba(15, 23, 42, 0.18);
+
+    --transition-base: 150ms ease;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    color: var(--color-text, #171717);
+    background-color: var(--color-bg, #ffffff);
+    background-image:
+        radial-gradient(circle at top left, rgba(23, 23, 23, 0.04) 0, transparent 55%),
+        radial-gradient(circle at bottom right, rgba(64, 64, 64, 0.04) 0, transparent 55%);
+    -webkit-font-smoothing: antialiased;
+}
+
+.app-container {
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-card);
+    border: 1px solid rgba(15, 23, 42, 0.06);
+}
+
+.navbar {
+    background-color: #171717 !important;
+    border-bottom: 1px solid #27272a;
+}
+
+.navbar-brand {
+    letter-spacing: 0.02em;
+}
+
+.navbar .btn-primary.btn-sm {
+    background-color: var(--color-cta, #D4AF37);
+    border-color: var(--color-cta, #D4AF37);
+    color: #171717;
+    font-weight: 500;
+    padding-inline: 14px;
+    border-radius: 999px;
+    transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
+}
+
+.navbar .btn-primary.btn-sm:hover {
+    background-color: #b48b1f;
+    border-color: #b48b1f;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+}
+
+.navbar .btn-primary.btn-sm:active {
+    transform: translateY(0);
+    box-shadow: none;
+}
+
+.toolbar {
+    background-color: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.toolbar .btn-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.toolbar .btn {
+    border-radius: 999px;
+    padding: 4px 14px;
+    font-size: 13px;
+    font-weight: 500;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(148, 163, 184, 0.55);
+    background-color: #ffffff;
+    color: var(--color-secondary, #404040);
+    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
+}
+
+.toolbar .btn-outline-primary {
+    border-color: rgba(148, 163, 184, 0.7);
+}
+
+.toolbar .btn-outline-primary:hover {
+    background-color: var(--color-primary);
+    color: #ffffff;
+    border-color: var(--color-primary);
+    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
+}
+
+.toolbar .btn-outline-secondary {
+    border-color: rgba(148, 163, 184, 0.55);
+    color: var(--color-secondary);
+    background-color: #f9fafb;
+}
+
+.toolbar .btn-outline-secondary:hover {
+    background-color: #e5e7eb;
+    border-color: #9ca3af;
+}
+
+.toolbar .btn-outline-danger {
+    border-color: rgba(220, 38, 38, 0.35);
+    color: #b91c1c;
+    background-color: #fef2f2;
+}
+
+.toolbar .btn-outline-danger:hover {
+    background-color: #dc2626;
+    border-color: #b91c1c;
+    color: #ffffff;
+}
+
+.toolbar .btn:active {
+    transform: scale(0.97);
+    box-shadow: none;
+}
+
+.panel {
+    border-right: 1px solid #e5e7eb;
+}
+
+.panel.active-panel {
+    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.65);
+}
+
+.panel-header {
+    background-color: #f3f4f6;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.path-bar {
+    background-color: #ffffff;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.file-item {
+    transition: background-color var(--transition-base), color var(--transition-base);
+}
+
+.app-header {
+    background: linear-gradient(120deg, rgba(23, 23, 23, 0.03), rgba(64, 64, 64, 0.02));
+}
+
+.app-title {
+    font-size: 20px;
+}
+
+.header-tag {
+    color: #404040;
+    background-color: #f4f4f5;
+    border: 1px solid #e4e4e7;
+}
+
+/* 主按钮：统一金色 CTA 风格 */
+.btn-primary {
+    background-color: var(--color-cta, #D4AF37);
+    border-color: var(--color-cta, #D4AF37);
+    color: #171717;
+    font-weight: 500;
+    transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
+}
+
+.btn-primary:hover {
+    background-color: #b48b1f;
+    border-color: #b48b1f;
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
+    transform: translateY(-1px);
+}
+
+.btn-primary:active {
+    transform: translateY(0);
+    box-shadow: none;
+}
+
+/* 尊重用户的「减少动态效果」系统设置 */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}

src/main/resources/static/index.html

@@ -19,6 +19,19 @@
             </div>
         </nav>
 
+        <!-- 页面头部信息 -->
+        <header class="app-header">
+            <div class="app-header-main">
+                <h1 class="app-title">文件工作台</h1>
+                <p class="app-subtitle">双面板本地 / SFTP 文件管理器，支持拖拽、键盘快捷键与批量操作。</p>
+            </div>
+            <div class="app-header-tags">
+                <span class="header-tag">双面板布局</span>
+                <span class="header-tag">SFTP / 本地</span>
+                <span class="header-tag">拖拽上传</span>
+            </div>
+        </header>
+
         <!-- 工具栏 -->
         <div class="toolbar bg-light border-bottom">
             <div class="btn-group" role="group">
@@ -96,7 +109,7 @@
 
         <!-- 状态栏 -->
         <div class="status-bar bg-light border-top">
-            <span id="status-text">就绪</span>
+            <span id="status-text" aria-live="polite">就绪</span>
         </div>
     </div>
 

src/main/resources/static/js/app.js

@@ -45,12 +45,22 @@ function initApp() {
     // 绑定键盘事件
     bindKeyboardEvents();
 
+    // 默认高亮左侧面板
+    setActivePanel('left');
+
     // 文件项拖拽（跨面板传输）
     initDragAndDrop();
 
     // 面板点击切换活动面板
-    $('#left-panel').on('click', function() { activePanelId = 'left'; });
+    $('#left-panel').on('click', function() { setActivePanel('left'); });
-    $('#right-panel').on('click', function() { activePanelId = 'right'; });
+    $('#right-panel').on('click', function() { setActivePanel('right'); });
+}
+
+// 设置当前活动面板并应用高亮样式
+function setActivePanel(panelId) {
+    activePanelId = panelId;
+    $('#left-panel, #right-panel').removeClass('active-panel');
+    $('#' + panelId + '-panel').addClass('active-panel');
 }
 
 // 初始化面板路径
@@ -188,11 +198,12 @@ function renderFileList(panelId, files) {
             }
         });
 
-        // 右键菜单：删除
+        // 右键菜单
         item.on('contextmenu', function(e) {
             e.preventDefault();
             const itemPath = $(this).data('path');
-            if (itemPath) showContextMenu(e, panelId, itemPath);
+            const itemIsDir = $(this).data('is-dir');
+            if (itemPath) showContextMenu(e, panelId, itemPath, itemIsDir);
         });
 
         item.attr('draggable', true);
@@ -202,21 +213,27 @@ function renderFileList(panelId, files) {
 
 // 获取文件图标
 function getFileIcon(fileName, isDirectory) {
-    if (isDirectory) return '📁';
+    if (isDirectory) {
+        return '<span class="file-type file-type-dir">DIR</span>';
+    }
 
     const ext = (fileName.substring(fileName.lastIndexOf('.') + 1) || '').toLowerCase();
-    const iconMap = {
+    const typeMap = {
-        'txt': '📄', 'doc': '📄', 'docx': '📄',
+        'txt': 'TXT', 'md': 'TXT',
-        'xls': '📊', 'xlsx': '📊', 'ppt': '📊', 'pptx': '📊',
+        'doc': 'DOC', 'docx': 'DOC',
-        'pdf': '📕',
+        'xls': 'XLS', 'xlsx': 'XLS',
-        'jpg': '🖼️', 'jpeg': '🖼️', 'png': '🖼️', 'gif': '🖼️',
+        'ppt': 'PPT', 'pptx': 'PPT',
-        'mp4': '🎬', 'avi': '🎬', 'mkv': '🎬',
+        'pdf': 'PDF',
-        'mp3': '🎵', 'wav': '🎵',
+        'jpg': 'IMG', 'jpeg': 'IMG', 'png': 'IMG', 'gif': 'IMG', 'webp': 'IMG',
-        'zip': '📦', 'rar': '📦', '7z': '📦',
+        'mp4': 'VID', 'avi': 'VID', 'mkv': 'VID', 'mov': 'VID',
-        'java': '☕', 'js': '💻', 'py': '🐍', 'php': '🐘',
+        'mp3': 'AUD', 'wav': 'AUD', 'flac': 'AUD',
-        'html': '🌐', 'css': '🎨', 'json': '📋'
+        'zip': 'ZIP', 'rar': 'ZIP', '7z': 'ZIP',
+        'java': 'CODE', 'js': 'CODE', 'ts': 'CODE', 'py': 'CODE', 'php': 'CODE', 'go': 'CODE',
+        'html': 'WEB', 'css': 'WEB',
+        'json': 'JSON', 'yml': 'YML', 'yaml': 'YML'
     };
-    return iconMap[ext] || '📄';
+    const label = typeMap[ext] || (ext ? ext.toUpperCase().slice(0, 4) : 'FILE');
+    return '<span class="file-type">' + label + '</span>';
 }
 
 // 格式化文件大小
@@ -515,7 +532,22 @@ function updateConnectionSelect(panelId) {
 
     select.empty().append('<option value="">选择连接</option>');
 
+    // 为避免同一主机/端口/用户名的连接在下拉框中重复显示，
+    // 这里按「username@host:port」进行去重，只保留第一条会话记录
+    const seenKeys = new Set();
+
     $.each(activeConnections, function(sessionId, conn) {
+        if (!conn) {
+            return;
+        }
+
+        const dedupKey = (conn.username || '') + '@' +
+            (conn.host || '') + ':' + (conn.port || 22);
+        if (seenKeys.has(dedupKey)) {
+            return; // 已有同一连接信息，跳过重复项
+        }
+        seenKeys.add(dedupKey);
+
         const name = (conn && (conn.name || conn.host)) ? (conn.name || conn.host) : ('会话 ' + (sessionId || '').substring(0, 13));
         select.append('<option value="' + sessionId + '">' + $('<div>').text(name).html() + '</option>');
     });
@@ -1255,7 +1287,7 @@ function performDelete(sessionId, paths, panelId) {
 }
 
 // 文件列表右键菜单
-function showContextMenu(event, panelId, path) {
+function showContextMenu(event, panelId, path, isDirectory) {
     $('.context-menu').remove();
     const menu = $('<div class="context-menu dropdown-menu show"></div>');
     menu.css({
@@ -1264,6 +1296,29 @@ function showContextMenu(event, panelId, path) {
         top: event.clientY + 'px',
         zIndex: 1050
     });
+    
+    // 跨面板传输（根据当前面板添加对应方向的菜单项）
+    if (panelId === 'left') {
+        const transferRightItem = $('<a class="dropdown-item" href="#">传输到右侧</a>');
+        transferRightItem.on('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            menu.remove();
+            transferSingleBetweenPanels('left', 'right', path, isDirectory);
+        });
+        menu.append(transferRightItem);
+    } else if (panelId === 'right') {
+        const transferLeftItem = $('<a class="dropdown-item" href="#">传输到左侧</a>');
+        transferLeftItem.on('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            menu.remove();
+            transferSingleBetweenPanels('right', 'left', path, isDirectory);
+        });
+        menu.append(transferLeftItem);
+    }
+
+    menu.append('<div class="dropdown-divider"></div>');
     const deleteItem = $('<a class="dropdown-item text-danger" href="#">删除</a>');
     deleteItem.on('click', function(e) {
         e.preventDefault();
@@ -1297,6 +1352,60 @@ function showContextMenu(event, panelId, path) {
     });
 }
 
+// 右键菜单：单个文件跨面板传输
+function transferSingleBetweenPanels(sourcePanelId, targetPanelId, path, isDirectory) {
+    if (!path) {
+        return;
+    }
+
+    const sourceSessionId = panelState[sourcePanelId].sessionId;
+    const targetSessionId = panelState[targetPanelId].sessionId;
+    const targetPath = panelState[targetPanelId].currentPath;
+
+    if (!targetPath) {
+        alert('目标面板路径无效，请先选择目标目录');
+        return;
+    }
+
+    const fileName = getFileNameFromPath(path);
+    const isDir = isDirectory === true || isDirectory === 'true' || isDirectory === 'True';
+    const recursive = isDir; // 若为目录，则递归传输
+
+    showTransferCountProgress(0, 1, fileName);
+    updateTransferProgress(0, '传输中 ' + (fileName || ''), true); // 无流式进度，使用动画条
+
+    $.ajax({
+        url: API_BASE + 'api/files/transfer',
+        method: 'POST',
+        contentType: 'application/json',
+        data: JSON.stringify({
+            sourceSessionId: sourceSessionId,
+            sourcePaths: [path],
+            targetSessionId: targetSessionId,
+            targetPath: targetPath,
+            recursive: recursive
+        }),
+        success: function(response) {
+            showTransferProgress(false);
+            if (response.success) {
+                updateStatus('传输成功');
+            } else {
+                alert('传输失败: ' + (response.message || '未知错误'));
+                updateStatus('传输失败');
+            }
+            loadFiles(targetPanelId);
+        },
+        error: function(xhr, status, error) {
+            showTransferProgress(false);
+            const errMsg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : error;
+            alert('传输失败: ' + errMsg);
+            updateStatus('传输失败');
+        }
+    });
+
+    updateStatus('正在传输 "' + (fileName || path) + '" ...');
+}
+
 // 右键菜单：删除单个文件
 function deleteFileByPath(panelId, path) {
     const sessionId = panelState[panelId].sessionId;

src/main/resources/templates/index.html

@@ -19,6 +19,19 @@
             </div>
         </nav>
 
+        <!-- 页面头部信息 -->
+        <header class="app-header">
+            <div class="app-header-main">
+                <h1 class="app-title">文件工作台</h1>
+                <p class="app-subtitle">双面板本地 / SFTP 文件管理器，支持拖拽、键盘快捷键与批量操作。</p>
+            </div>
+            <div class="app-header-tags">
+                <span class="header-tag">双面板布局</span>
+                <span class="header-tag">SFTP / 本地</span>
+                <span class="header-tag">拖拽上传</span>
+            </div>
+        </header>
+
         <!-- 工具栏 -->
         <div class="toolbar bg-light border-bottom">
             <div class="btn-group" role="group">
@@ -32,10 +45,13 @@
                 <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-show-hidden" onclick="toggleShowHidden()" title="切换是否显示隐藏文件">显示隐藏文件</button>
                 <button type="button" class="btn btn-sm btn-outline-secondary" onclick="refreshPanels()">刷新</button>
             </div>
+            <!-- 文件上传输入框（隐藏） -->
             <input type="file" id="file-input" multiple style="display:none">
-            <div class="upload-progress" id="upload-progress" style="display:none;">
+            <!-- 传输进度（上传/下载/跨面板传输） -->
-                <div class="progress" style="height: 20px; margin-left: 10px; width: 200px;">
+            <div class="transfer-progress" id="transfer-progress" style="display:none;">
-                    <div class="progress-bar" role="progressbar" style="width: 0%">0%</div>
+                <span class="transfer-progress-label" id="transfer-progress-label"></span>
+                <div class="progress transfer-progress-bar" style="height: 20px; margin-left: 10px; width: 220px;">
+                    <div class="progress-bar" id="transfer-progress-bar" role="progressbar" style="width: 0%">0%</div>
                 </div>
             </div>
         </div>
@@ -49,6 +65,10 @@
                         <option value="local">本地文件</option>
                         <option value="sftp">SFTP服务器</option>
                     </select>
+                    <div class="connection-status" id="left-status" style="display:none;">
+                        <span class="status-dot" data-status="disconnected"></span>
+                        <span class="status-text">未连接</span>
+                    </div>
                     <select class="form-select form-select-sm connection-select" id="left-connection" style="display:none;" onchange="onConnectionChange('left')">
                         <option value="">选择连接</option>
                     </select>
@@ -69,6 +89,10 @@
                         <option value="local">本地文件</option>
                         <option value="sftp">SFTP服务器</option>
                     </select>
+                    <div class="connection-status" id="right-status" style="display:none;">
+                        <span class="status-dot" data-status="disconnected"></span>
+                        <span class="status-text">未连接</span>
+                    </div>
                     <select class="form-select form-select-sm connection-select" id="right-connection" style="display:none;" onchange="onConnectionChange('right')">
                         <option value="">选择连接</option>
                     </select>
@@ -85,7 +109,7 @@
 
         <!-- 状态栏 -->
         <div class="status-bar bg-light border-top">
-            <span id="status-text">就绪</span>
+            <span id="status-text" aria-live="polite">就绪</span>
         </div>
     </div>