feat(gui): 重构UI布局并全面刷新界面样式

baiheyyds · baiheyyds · commit adfc3954bb5e · 2025-10-18T01:37:33.000+08:00
本次提交对图形用户界面（GUI）进行了一次重大的视觉和结构性更新，旨在提升整体的用户体验和现代化观感。

  主要变更：

   1. 主窗口布局重构:
       * 将主窗口的 QSplitter 布局从垂直（上下）更改为水平（左右），将核心功能区（标签页）置于左侧，日志输出区置于右侧。
       * 此布局更符合桌面应用的常规使用习惯，提高了空间利用率。

   2. 全局样式表 (QSS) 刷新:
       * 全面重写 gui/style.qss，建立了一套更统一、更美观的视觉规范。
       * 引入了 #0078d4 作为主强调色，并应用于按钮、分组框标题、焦点边框和进度条，增强了视觉一致性。
       * 重新设计了 QTabWidget 的样式，使其外观更简洁、现代。
       * 统一了 QPushButton, QLineEdit, QComboBox 等常用控件的内边距、边框和圆角，使整体观感更和谐。

   3. UX 微调:
       * 为品牌合并的 QMessageBox 对话框增加了最小宽度，以防止在显示较长品牌名时出现文字截断的问题。

   4. 文档同步:
       * 更新了 gui/GEMINI.md 文档，以准确反映新的 QSplitter 布局结构。
diff --git a/gui/GEMINI.md b/gui/GEMINI.md
@@ -5,7 +5,7 @@
 ## 1. 设计理念
 
 - **组件化**: 界面被拆分为多个独立的组件（Widgets），每个组件负责一块特定的功能区域。
-- **主从结构**: `main_window.py` 是主窗口，它负责整合所有子组件，并管理应用的整体布局和生命周期。其核心布局现在基于 `QTabWidget`，将不同的功能区（如“批处理工具”和“映射编辑器”）分隔到独立的标签页中，使界面更加清晰。
+- **主从结构**: `main_window.py` 是主窗口，它负责整合所有子组件，并管理应用的整体布局和生命周期。其核心布局基于 `QSplitter` 实现左右分割：左侧是包含“批处理工具”和“映射编辑器”等功能区的 `QTabWidget`，右侧是日志输出区域。
 - **现代化主题**: 界面通过 `qdarkstyle` 库实现了现代化的暗色主题，并在此基础上通过 `gui/style.qss` 文件进行了微调和定制，以优化视觉效果和用户体验。
 - **响应式布局**: 在需要排列多个按钮或元素的场景（如 `BatchToolsWidget`），采用了自定义的 `FlowLayout`，使得元素可以根据窗口大小自动换行，提高了界面的适应性。
 - **对话框驱动**: 所有需要用户输入的交互都通过弹出的对话框（`dialogs.py`）来完成。
@@ -46,7 +46,7 @@
 
 - **`main_window.py` (`MainWindow`)**: 
     - **作用**: GUI 应用的入口和主容器。
-    - **核心职责**: 初始化并管理 Worker 线程；包含所有 `handle_*` 槽函数，作为后台请求的UI响应中心；使用 `QTabWidget` 构建主界面布局。
+    - **核心职责**: 初始化并管理 Worker 线程；包含所有 `handle_*` 槽函数，作为后台请求的UI响应中心；使用 `QSplitter` 和 `QTabWidget` 构建主界面的左右布局。
 
 - **`dialogs.py`**: 
     - **作用**: 包含了应用中所有自定义的 `QDialog` 对话框。
diff --git a/gui/main_window.py b/gui/main_window.py
@@ -49,15 +49,14 @@ def __init__(self):
         self.keyword_input.setPlaceholderText("输入游戏名/关键词...")
         self.manual_mode_checkbox = QCheckBox("手动模式")
         self.search_button = QPushButton("🔍 开始搜索")
-        self.search_button.setStyleSheet("background-color: #007BFF; color: white; padding: 5px;")
         top_layout.addWidget(QLabel("游戏名:"))
         top_layout.addWidget(self.keyword_input, 1)
         top_layout.addWidget(self.manual_mode_checkbox)
         top_layout.addWidget(self.search_button)
         main_layout.addLayout(top_layout)
 
         # Main splitter for controls and log
-        main_splitter = QSplitter(Qt.Vertical)
+        main_splitter = QSplitter(Qt.Horizontal)
 
         # --- New Tab-based layout for controls ---
         self.tab_widget = QTabWidget()
@@ -79,8 +78,8 @@ def __init__(self):
         main_splitter.addWidget(self.tab_widget) # Add tab widget instead of the old controls widget
         main_splitter.addWidget(log_widget)
 
-        # Adjust splitter ratio to give more space to the log initially (60% top, 40% bottom)
-        main_splitter.setSizes([int(self.height() * 0.6), int(self.height() * 0.4)])
+        # Adjust splitter ratio for an initial 50/50 split
+        main_splitter.setSizes([int(self.width() * 0.5), int(self.width() * 0.5)])
         main_layout.addWidget(main_splitter)
         
         # Setup logging
@@ -239,6 +238,8 @@ def handle_brand_merge_requested(self, new_brand_name, suggested_brand):
         msg_box.setWindowTitle("品牌查重")
         msg_box.setText(f"新品牌 '<b>{new_brand_name}</b>' 与已存在的品牌 '<b>{suggested_brand}</b>' 高度相似。")
         msg_box.setInformativeText("您希望如何处理？")
+        # Set a minimum width to prevent text truncation
+        msg_box.setStyleSheet("QMessageBox { min-width: 600px; }")
         merge_button = msg_box.addButton("合并为 ‘" + suggested_brand + "’ (推荐)", QMessageBox.AcceptRole)
         create_button = msg_box.addButton("创建新品牌 ‘" + new_brand_name + "’", QMessageBox.ActionRole)
         msg_box.addButton("取消操作", QMessageBox.RejectRole)
diff --git a/gui/style.qss b/gui/style.qss
@@ -1,47 +1,81 @@
-/* Otaku-Sync Custom Stylesheet */
+/* Otaku-Sync Custom Stylesheet v2 */
 
 /* --- General --- */
 QWidget {
-    /* A cleaner, modern font stack for cross-platform compatibility. Segoe UI is preferred on Windows. */
     font-family: "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
-    font-size: 14px;
+    font-size: 15px;
+    /* A slightly lighter base text color for better overall contrast */
+    color: #E0E0E0; 
 }
 
-/* --- Widgets --- */
-QPushButton, QLineEdit, QComboBox {
-    padding: 8px;
-    border-radius: 5px; /* Slightly rounded corners for a modern feel */
+/* --- Key Widgets --- */
+QPushButton, QLineEdit, QComboBox, QPlainTextEdit, QTextEdit {
+    /* Unified padding and border-radius */
+    padding: 9px;
+    border-radius: 5px;
+    /* A slightly lighter background to distinguish from the window */
+    background-color: #333; 
+    border: 1px solid #444;
+}
+
+/* Provide visual feedback on focus */
+QLineEdit:focus, QPlainTextEdit:focus, QTextEdit:focus, QComboBox:focus {
+    border: 1px solid #0078d4; /* Use accent color for focus */
 }
 
 QPushButton {
     font-weight: bold;
+    color: #fff;
+    background-color: #0078d4; /* Main accent color for primary actions */
 }
 
-QTextEdit {
-    border: 1px solid #444; /* A subtle border to define the log area */
-    border-radius: 5px;
-    padding: 5px;
+QPushButton:hover {
+    background-color: #008dfa; /* Lighter blue on hover */
 }
 
-/* --- Layout Sections (QGroupBox) --- */
+/* --- Tab Widget --- */
+QTabWidget::pane {
+    /* The area where tab content is shown */
+    border-top: 2px solid #444;
+    margin-top: -2px; /* Align with the tab bar bottom border */
+}
+
+QTabBar::tab {
+    /* Style for individual tabs */
+    padding: 10px 20px;
+    background-color: transparent;
+    color: #aaa; /* Dim unselected tabs */
+    border: none; /* Remove default borders */
+    font-weight: bold;
+}
+
+QTabBar::tab:hover {
+    color: #fff; /* Highlight on hover */
+}
+
+QTabBar::tab:selected {
+    /* Style for the active tab */
+    color: #fff;
+    background-color: #444; /* Lighter background for the tab itself */
+    border-bottom: 2px solid #0078d4; /* Accent color line */
+}
+
+
+/* --- GroupBox --- */
 QGroupBox {
-    /* Adds breathing room around the entire section */
     margin-top: 12px; 
-    border: 1px solid #555; /* A subtle border to frame the section */
+    border: 1px solid #444; /* Match other borders */
     border-radius: 8px;
-    padding-top: 25px; /* Pushes content down to make space for the title */
+    padding-top: 25px;
 }
 
 QGroupBox::title {
-    /* Positions the title inside the top border */
     subcontrol-origin: margin;
     subcontrol-position: top left;
-    
-    /* Style for the title itself */
-    padding: 4px 10px;
+    padding: 4px 12px;
     margin-left: 10px;
-    background-color: #666; /* A distinct but harmonious background for the title */
-    color: #eee;
+    background-color: #0078d4; /* Use accent color for titles */
+    color: #fff;
     border-radius: 5px;
     font-weight: bold;
 }
@@ -52,9 +86,11 @@ QProgressBar {
     border-radius: 5px;
     text-align: center;
     font-weight: bold;
+    background-color: #333;
+    border: 1px solid #444;
 }
 
 QProgressBar::chunk {
-    background-color: #0078d4; /* A pleasant blue for progress */
+    background-color: #0078d4;
     border-radius: 3px;
-}
+}
