update:优化样式代码顺序

main/xiaozhi-server/test/css/test_page.css

@@ -1,3 +1,4 @@
+/* ==================== 全局样式 ==================== */
 * {
     box-sizing: border-box;
 }
@@ -9,6 +10,7 @@ body {
     background-image: url('bg.png');
 }
 
+/* ==================== 容器布局 ==================== */
 .container {
     max-width: 1400px;
     margin: 0 auto;
@@ -16,29 +18,23 @@ body {
     padding: 0px;
 }
 
-/* 大屏幕 (宽度 > 1200px) */
+/* 两栏布局 */
-@media (min-width: 1201px) {
+.two-column-layout {
-    .container {
+    display: flex;
-        max-width: 80%;
+    gap: 20px;
-    }
+    align-items: stretch;
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 
-/* 中等屏幕 (宽度 <= 1200px) */
+.two-column-layout>.section {
-@media (max-width: 1200px) {
+    flex: 1;
-    .container {
+    margin-top: 0;
-        max-width: 95%;
+    margin-bottom: 0;
-        padding: 10px;
+    min-width: 0;
-    }
-}
-
-/* 响应式布局 - 移动设备 */
-@media (max-width: 768px) {
-    .container {
-        max-width: 100%;
-        padding: 5px;
-    }
 }
 
+/* ==================== 通用区块样式 ==================== */
 .section {
     margin-top: 10px;
     margin-bottom: 10px;
@@ -59,6 +55,23 @@ body {
     gap: 10px;
 }
 
+/* ==================== 通用按钮样式 ==================== */
+button {
+    padding: 8px 15px;
+    border: none;
+    border-radius: 5px;
+    background-color: #007aff;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+button:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+}
+
+/* 切换按钮和连接按钮 */
 .toggle-button,
 .connect-button {
     margin-left: auto;
@@ -80,12 +93,13 @@ body {
     box-shadow: 0px 0px 10px 2px rgba(0, 122, 255, 0.28);
 }
 
+/* ==================== 设备配置面板 ==================== */
 .config-panel {
     display: block;
     transition: all 0.3s ease;
 }
 
-/* 只为MCP工具面板设置默认隐藏 */
+/* MCP工具面板默认隐藏 */
 #mcpToolsPanel {
     display: none;
 }
@@ -101,39 +115,75 @@ body {
     margin-top: 10px;
 }
 
+/* 配置行 */
 .config-row {
     display: flex;
     gap: 10px;
     width: 100%;
 }
 
+/* 配置项 */
 .config-item {
     flex: 1;
     display: flex;
     align-items: center;
     gap: 10px;
     min-width: 0;
+    margin-bottom: 8px;
+    width: 100%;
+}
+
+.config-item label {
+    white-space: nowrap;
+    min-width: 70px;
+    text-align: left;
+    color: #666;
+    font-size: 12px;
 }
 
 .config-item input {
     flex: 1;
     width: 0;
-    /* 确保input能自动填充剩余空间 */
+    flex-grow: 1;
-}
+    padding: 6px;
-
+    font-size: 12px;
-button {
+    border: 1px solid #b1c9f8;
-    padding: 8px 15px;
-    border: none;
     border-radius: 5px;
-    background-color: #007aff;
-    color: white;
-    cursor: pointer;
-    transition: background-color 0.2s;
 }
 
-button:disabled {
+.config-item input:disabled {
-    background-color: #cccccc;
+    background-color: #fff;
-    cursor: not-allowed;
+    border-color: #fff;
+    cursor: default;
+}
+
+/* ==================== 连接信息面板 ==================== */
+.connection-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    margin-top: 10px;
+}
+
+.connection-controls input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+.connection-controls button {
+    white-space: nowrap;
+    padding: 8px 15px;
+}
+
+#serverUrl,
+#otaUrl {
+    flex-grow: 1;
+    padding: 8px;
+    border-radius: 5px;
 }
 
 #otaUrl {
@@ -145,63 +195,67 @@ button:disabled {
     background-color: #fafafa;
 }
 
-#serverUrl,
+/* 连接状态 */
-#otaUrl {
+.connection-status {
-    flex-grow: 1;
-    padding: 8px;
-    border-radius: 5px;
-}
-
-.message-input {
     display: flex;
-    gap: 10px;
+    align-items: center;
-    margin-bottom: 20px;
+    gap: 20px;
+    margin-left: 0px;
+    padding: 0 15px;
+    height: 28px;
+    line-height: 28px;
 }
 
-#messageInput {
+.connection-status span {
-    flex-grow: 1;
+    font-size: 13px;
-    padding: 8px 20px 8px 20px;
-    border: 1px solid #b1c9f8;
-    border-radius: 10px;
 }
 
-#messageInput:disabled {
+.connection-status .status {
-    border: 1px solid #fafafa;
+    background-color: #fef2f2;
-    background-color: #fafafa;
+    color: #b91c1c;
-}
+    font-size: 12px;
-
+    padding: 0px 8px;
-#sendTextButton,
-#recordButton {
     border-radius: 20px;
+    transition: all 0.3s ease;
 }
 
-.conversation {
+/* 已连接状态 */
-    max-height: 300px;
+.connection-status .status.connected {
-    overflow-y: auto;
+    background-color: #ecfdf3;
-    border: 1px solid #ddd;
+    color: #15803d;
-    border-right: none;
-    border-radius: 5px 0px 0px 5px;
-    padding: 10px;
-    flex: 1;
 }
 
-.message {
+/* 会话状态 - 离线中 */
-    margin-bottom: 10px;
+.connection-status .status.offline {
-    padding: 8px 12px;
+    background-color: #fef2f2;
-    border-radius: 8px;
+    color: #b91c1c;
-    width: fit-content;
-    max-width: 80%;
 }
 
-.user {
+/* 会话状态 - 聆听中 */
-    background-color: #fff;
+.connection-status .status.listening {
-    margin-left: auto;
+    background-color: #ecfdf3;
-    margin-right: 10px;
+    color: #15803d;
-    text-align: right;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
+/* 会话状态 - 说话中 */
+.connection-status .status.speaking {
+    background-color: #fff7ed;
+    color: #c2410c;
+    animation: pulse-speaking 1.5s infinite;
+}
 
+@keyframes pulse-speaking {
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.7;
+    }
+}
+
+/* LLM状态emoji样式 */
 span.connection-status.llm-emoji {
     display: block !important;
     text-align: center !important;
@@ -214,131 +268,14 @@ span.connection-status.llm-emoji {
     padding: 8px 20px !important;
 }
 
-.server {
+.emoji-large {
-    background-color: #95ec69;
+    font-size: 2em !important;
-    margin-right: auto;
+    vertical-align: middle;
-    margin-left: 10px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-.audio-controls {
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-    margin-top: 20px;
-}
-
-.audio-visualizer {
-    height: 60px;
-    width: 100%;
-    margin-top: 10px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    background-color: #fafafa;
-}
-
-.record-button {
-    background-color: #db4437;
-}
-
-.record-button:hover {
-    background-color: #c53929;
-}
-
-.record-button.recording {
-    animation: pulse 1.5s infinite;
-}
-
-@keyframes pulse {
-    0% {
-        background-color: #db4437;
-    }
-
-    50% {
-        background-color: #ff6659;
-    }
-
-    100% {
-        background-color: #db4437;
-    }
-}
-
-#logContainer {
-    margin-top: 0;
-    padding: 10px;
-    border-radius: 0px 5px 5px 0px;
-    font-family: monospace;
-    height: 300px;
-    overflow-y: auto;
-    flex: 1;
-    border: 1px solid #ddd;
-}
-
-.log-entry {
-    margin: 5px 0;
-    font-size: 12px;
-}
-
-.log-info {
-    color: #333;
-}
-
-.log-error {
-    color: #db4437;
-}
-
-.log-success {
-    color: #0f9d58;
-}
-
-.script-status {
     display: inline-block;
-    width: 10px;
+    line-height: 1;
-    height: 10px;
-    border-radius: 50%;
-    margin-right: 5px;
 }
 
-.script-loaded {
+/* ==================== 标签页样式 ==================== */
-    background-color: #0f9d58;
-}
-
-.script-loading {
-    background-color: #f4b400;
-}
-
-.script-error {
-    background-color: #db4437;
-}
-
-.script-list {
-    margin: 10px 0;
-    padding: 10px;
-    background-color: #f9f9f9;
-    border-radius: 5px;
-    font-family: monospace;
-    font-size: 11px;
-}
-
-#scriptStatus.success {
-    background-color: #e6f4ea;
-    color: #0f9d58;
-    border-left: 4px solid #0f9d58;
-}
-
-#scriptStatus.error {
-    background-color: #fce8e6;
-    color: #db4437;
-    border-left: 4px solid #db4437;
-}
-
-#scriptStatus.warning {
-    background-color: #fef7e0;
-    color: #f4b400;
-    border-left: 4px solid #f4b400;
-}
-
-/* 标签页样式 */
 .tabs {
     display: flex;
     margin-bottom: 20px;
@@ -384,208 +321,145 @@ span.connection-status.llm-emoji {
     display: block;
 }
 
+/* ==================== 文本消息输入 ==================== */
+.message-input {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+#messageInput {
+    flex-grow: 1;
+    padding: 8px 20px 8px 20px;
+    border: 1px solid #b1c9f8;
+    border-radius: 10px;
+}
+
+#messageInput:disabled {
+    border: 1px solid #fafafa;
+    background-color: #fafafa;
+}
+
+#sendTextButton,
+#recordButton {
+    border-radius: 20px;
+}
+
+/* ==================== 语音消息控制 ==================== */
+.audio-controls {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.audio-visualizer {
+    height: 60px;
+    width: 100%;
+    margin-top: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #fafafa;
+}
+
+.record-button {
+    background-color: #db4437;
+}
+
+.record-button:hover {
+    background-color: #c53929;
+}
+
+.record-button.recording {
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        background-color: #db4437;
+    }
+
+    50% {
+        background-color: #ff6659;
+    }
+
+    100% {
+        background-color: #db4437;
+    }
+}
+
+/* ==================== 会话记录和日志 ==================== */
 .flex-container {
     display: flex;
     margin-top: 10px;
     background-color: #f9fafb;
 }
 
-.config-item {
+/* 会话记录容器 */
-    display: flex;
+.conversation {
-    align-items: center;
+    max-height: 300px;
-    margin-bottom: 8px;
+    overflow-y: auto;
-    width: 100%;
-}
-
-.config-item label {
-    white-space: nowrap;
-    min-width: 70px;
-    text-align: left;
-    color: #666;
-    font-size: 12px;
-}
-
-.config-item input {
-    flex-grow: 1;
-    padding: 6px;
-    font-size: 12px;
-    border: 1px solid #b1c9f8;
-    border-radius: 5px;
-}
-
-.config-item input:disabled {
-    background-color: #fff;
-    border-color: #fff;
-    cursor: default;
-}
-
-/* 两栏布局样式 */
-.two-column-layout {
-    display: flex;
-    gap: 20px;
-    /* 两栏之间的间距 */
-    align-items: stretch;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.two-column-layout>.section {
-    flex: 1;
-    margin-top: 0;
-    /* 在两栏布局时不需要额外的上下margin */
-    margin-bottom: 0;
-    min-width: 0;
-    /* 防止flex子元素溢出 */
-}
-
-.control-panel {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    margin-top: 10px;
-}
-
-.connection-controls {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    width: 100%;
-    margin-top: 10px;
-}
-
-.connection-controls input {
-    width: 100%;
-    padding: 8px;
     border: 1px solid #ddd;
-    border-radius: 5px;
+    border-right: none;
-    box-sizing: border-box;
+    border-radius: 5px 0px 0px 5px;
+    padding: 10px;
+    flex: 1;
 }
 
-.connection-controls button {
+/* 消息气泡 */
-    white-space: nowrap;
+.message {
-    padding: 8px 15px;
+    margin-bottom: 10px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    width: fit-content;
+    max-width: 80%;
 }
 
-.connection-status {
+.user {
-    display: flex;
+    background-color: #fff;
-    align-items: center;
+    margin-left: auto;
-    gap: 20px;
+    margin-right: 10px;
-    margin-left: 0px;
+    text-align: right;
-    padding: 0 15px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    height: 28px;
-    line-height: 28px;
 }
 
-.connection-status span {
+.server {
-    font-size: 13px;
+    background-color: #95ec69;
+    margin-right: auto;
+    margin-left: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
-.connection-status .status {
+/* 日志容器 */
-    /* 默认未连接状态 */
+#logContainer {
-    background-color: #fef2f2;
+    margin-top: 0;
-    color: #b91c1c;
+    padding: 10px;
-    font-size: 12px;
+    border-radius: 0px 5px 5px 0px;
-    padding: 0px 8px;
-    border-radius: 20px;
-    transition: all 0.3s ease;
-}
-
-/* 已连接状态样式 */
-.connection-status .status.connected {
-    background-color: #ecfdf3;
-    color: #15803d;
-}
-
-/* 会话状态样式 - 离线中 */
-.connection-status .status.offline {
-    background-color: #fef2f2;
-    color: #b91c1c;
-}
-
-/* 会话状态样式 - 聆听中 */
-.connection-status .status.listening {
-    background-color: #ecfdf3;
-    color: #15803d;
-}
-
-/* 会话状态样式 - 说话中 */
-.connection-status .status.speaking {
-    background-color: #fff7ed;
-    color: #c2410c;
-    animation: pulse-speaking 1.5s infinite;
-}
-
-@keyframes pulse-speaking {
-
-    0%,
-    100% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.7;
-    }
-}
-
-/* 表情符号放大样式 */
-.emoji-large {
-    font-size: 2em !important;
-    vertical-align: middle;
-    display: inline-block;
-    line-height: 1;
-}
-
-#fileProtocolWarning {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.8);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    z-index: 9999;
-    color: white;
-    padding: 20px;
-    box-sizing: border-box;
-}
-
-#fileProtocolWarning h2 {
-    color: #ff4d4d;
-    margin-bottom: 20px;
-}
-
-#fileProtocolWarning pre {
-    background-color: green;
-    font-size: 18px;
-    padding: 15px;
-    border-radius: 5px;
     font-family: monospace;
-    overflow-x: auto;
+    height: 300px;
-    margin: 15px 0;
+    overflow-y: auto;
+    flex: 1;
+    border: 1px solid #ddd;
 }
 
-#fileProtocolWarning button {
+.log-entry {
-    background-color: #4CAF50;
+    margin: 5px 0;
-    color: white;
+    font-size: 12px;
-    border: none;
-    padding: 10px 20px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin: 10px 2px;
-    cursor: pointer;
-    border-radius: 4px;
 }
 
-#fileProtocolWarning button:hover {
+.log-info {
-    background-color: #45a049;
+    color: #333;
 }
 
-/* MCP 工具管理样式 */
+.log-error {
+    color: #db4437;
+}
+
+.log-success {
+    color: #0f9d58;
+}
+
+/* ==================== MCP 工具管理 ==================== */
 .mcp-tools-container {
     display: grid;
     gap: 12px;
@@ -659,6 +533,7 @@ span.connection-status.llm-emoji {
     font-family: 'Courier New', monospace;
 }
 
+/* MCP 属性项 */
 .mcp-property-item {
     background-color: white;
     border: 1px solid #e0e0e0;
@@ -742,7 +617,121 @@ span.connection-status.llm-emoji {
     color: #1976d2;
 }
 
-/* ==================== 响应式媒体查询 ==================== */
+/* ==================== 脚本加载状态 ==================== */
+.script-status {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 5px;
+}
+
+.script-loaded {
+    background-color: #0f9d58;
+}
+
+.script-loading {
+    background-color: #f4b400;
+}
+
+.script-error {
+    background-color: #db4437;
+}
+
+.script-list {
+    margin: 10px 0;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-radius: 5px;
+    font-family: monospace;
+    font-size: 11px;
+}
+
+#scriptStatus.success {
+    background-color: #e6f4ea;
+    color: #0f9d58;
+    border-left: 4px solid #0f9d58;
+}
+
+#scriptStatus.error {
+    background-color: #fce8e6;
+    color: #db4437;
+    border-left: 4px solid #db4437;
+}
+
+#scriptStatus.warning {
+    background-color: #fef7e0;
+    color: #f4b400;
+    border-left: 4px solid #f4b400;
+}
+
+/* ==================== File协议警告 ==================== */
+#fileProtocolWarning {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    color: white;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+#fileProtocolWarning h2 {
+    color: #ff4d4d;
+    margin-bottom: 20px;
+}
+
+#fileProtocolWarning pre {
+    background-color: green;
+    font-size: 18px;
+    padding: 15px;
+    border-radius: 5px;
+    font-family: monospace;
+    overflow-x: auto;
+    margin: 15px 0;
+}
+
+#fileProtocolWarning button {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 10px 2px;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+#fileProtocolWarning button:hover {
+    background-color: #45a049;
+}
+
+/* ==================== 响应式布局 ==================== */
+
+/* 大屏幕 (宽度 > 1200px) */
+@media (min-width: 1201px) {
+    .container {
+        max-width: 80%;
+    }
+}
+
+/* 中等屏幕 (宽度 <= 1200px) */
+@media (max-width: 1200px) {
+    .container {
+        max-width: 95%;
+        padding: 10px;
+    }
+}
 
 /* 平板设备 (宽度 <= 1060px) */
 @media (max-width: 1060px) {
@@ -751,13 +740,11 @@ span.connection-status.llm-emoji {
     .two-column-layout {
         flex-direction: column;
         gap: 0;
-        /* 移除gap，使用section自己的margin控制间距 */
     }
 
     .two-column-layout>.section {
         width: 100%;
         margin-top: 10px;
-        /* 恢复正常的margin */
         margin-bottom: 10px;
     }
 
@@ -797,6 +784,11 @@ span.connection-status.llm-emoji {
         padding: 0;
     }
 
+    .container {
+        max-width: 100%;
+        padding: 5px;
+    }
+
     /* 调整区块内边距 */
     .section {
         padding: 8px;
@@ -826,12 +818,12 @@ span.connection-status.llm-emoji {
         line-height: 18px;
     }
 
-    /* 输入框和按钮 */
     button {
         padding: 6px 12px;
         font-size: 13px;
     }
 
+    /* 输入框 */
     #serverUrl,
     #otaUrl,
     #messageInput {
@@ -1001,4 +993,4 @@ span.connection-status.llm-emoji {
     .mcp-tool-description {
         font-size: 11px;
     }
-}
+}