[重构多个UI组件并优化交互体验]: 对电池、时钟和仪表盘控件进行全面重构，改进布局设计、信号处理机制和动画系统，提升用户界面的可用性和代码质量

- **电池控件界面重构**: 重新设计电池示例应用的主窗口布局，采用网格布局替代垂直布局，增加SpinBox控件实现精确数值输入，修复信号循环问题并增强状态反馈
- **电池QML组件优化**: 重构Battery.qml的动画逻辑和状态管理，改进私有数据封装，优化计算属性和信号处理，增强代码可维护性和性能表现
- **时钟控件简化与改进**: 移除冗余的foregroundColor属性，将smoothAnimation重构为smoothSeconds，优化定时器更新逻辑，简化颜色选择代码并改进绘制性能
- **仪表盘控件代码优化**: 重构属性设置逻辑，移除animationEnabled属性简化动画控制，改进信号连接防止循环触发，优化绘制代码和数值更新机制
- **统一交互体验**: 在各组件中增加阻塞信号机制防止循环更新，改进颜色选择对话框的一致性，优化状态显示和动画反馈，提升整体用户体验

Author: RealChuan

src/Battery/batterywidget.h

@@ -33,8 +33,8 @@ class BatteryWidget : public QWidget
     void setAlarmValue(int value);
     [[nodiscard]] auto alarmValue() const -> int;
 
-    void setValue(int value);
     void setValueAnimated(int value);
+    void setValue(int value);
     [[nodiscard]] auto value() const -> int;
 
     // 动画设置

src/Battery/mainwindow.cpp

@@ -8,116 +8,128 @@ MainWindow::MainWindow(QWidget *parent)
 {
     // 创建电池控件
     auto *battery = new BatteryWidget(this);
-    battery->setValue(75); // 设置初始电量
 
-    // 创建滑动条控制电量
-    auto *slider = new QSlider(Qt::Vertical, this);
-    slider->setRange(0, 100);
-    slider->setValue(75);
+    // 创建数值控制
+    auto *valueLabel = new QLabel(tr("Current value:"), this);
 
-    // 创建充电控制复选框
-    auto *chargingCheckbox = new QCheckBox(tr("Charging state"), this);
-    chargingCheckbox->setChecked(false);
+    auto *valueSlider = new QSlider(Qt::Horizontal, this);
+    valueSlider->setRange(0, 100);
+    valueSlider->setValue(75);
+
+    auto *valueSpinBox = new QSpinBox(this);
+    valueSpinBox->setRange(0, 100);
+    valueSpinBox->setValue(75);
+    valueSpinBox->setSuffix("%");
 
-    // 创建报警阈值设置
+    // 创建报警阈值控制
+    auto *alarmLabel = new QLabel(tr("Alarm threshold:"), this);
     auto *alarmSlider = new QSlider(Qt::Horizontal, this);
     alarmSlider->setRange(0, 50);
     alarmSlider->setValue(20);
-    auto *alarmLabel = new QLabel(tr("Alarm threshold: 20%"), this);
+    auto *alarmSpinBox = new QSpinBox(this);
+    alarmSpinBox->setRange(0, 50);
+    alarmSpinBox->setValue(20);
+    alarmSpinBox->setSuffix("%");
+
+    // 创建充电状态控制
+    auto *chargingCheckbox = new QCheckBox(tr("Charging state"), this);
+    chargingCheckbox->setChecked(false);
 
-    // 创建颜色选择控件 - 使用颜色预览按钮
+    // 创建颜色选择控件
     auto *powerColorButton = new QPushButton(this);
     auto *alarmColorButton = new QPushButton(this);
     auto *borderColorButton = new QPushButton(this);
 
     // 创建动画控制
-    auto *animationCheckbox = new QCheckBox(tr("Enable animation"), this);
-    animationCheckbox->setChecked(true);
     auto *animationDurationSlider = new QSlider(Qt::Horizontal, this);
     animationDurationSlider->setRange(100, 2000);
     animationDurationSlider->setValue(500);
     auto *durationLabel = new QLabel(tr("Animation duration: 500ms"), this);
 
-    // 创建快速操作按钮
-    auto *increaseButton = new QPushButton("+10%", this);
-    auto *decreaseButton = new QPushButton("-10%", this);
+    // 创建操作按钮
+    auto *increaseButton = new QPushButton(tr("+10"), this);
+    auto *decreaseButton = new QPushButton(tr("-10"), this);
     auto *resetButton = new QPushButton(tr("Reset"), this);
+    auto *animateToButton = new QPushButton(tr("Animate to 50"), this);
 
     // 创建状态显示标签
     auto *statusLabel = new QLabel(tr("Status: Normal"), this);
     statusLabel->setAlignment(Qt::AlignCenter);
     statusLabel->setFrameStyle(QFrame::Box);
+    statusLabel->setMinimumHeight(30);
 
-    // 布局设置
+    // 布局设置 - 针对横向电池优化
     auto *mainWidget = new QWidget(this);
     auto *mainLayout = new QVBoxLayout(mainWidget);
 
-    // 电池和滑动条布局
-    auto *batteryLayout = new QHBoxLayout();
+    // 顶部：电池显示区域
+    auto *batteryContainer = new QWidget(this);
+    auto *batteryLayout = new QHBoxLayout(batteryContainer);
+    batteryLayout->addStretch();
     batteryLayout->addWidget(battery);
-    batteryLayout->addWidget(slider);
-
-    // 充电和动画控制布局
-    auto *gridLayout = new QGridLayout;
-    gridLayout->addWidget(chargingCheckbox, 0, 0);
-    gridLayout->addWidget(animationCheckbox, 0, 1);
-    gridLayout->addWidget(new QLabel(tr("Battery color:"), this), 1, 0);
-    gridLayout->addWidget(powerColorButton, 1, 1);
-    gridLayout->addWidget(new QLabel(tr("Alarm color:"), this), 2, 0);
-    gridLayout->addWidget(alarmColorButton, 2, 1);
-    gridLayout->addWidget(new QLabel(tr("Border color:"), this), 3, 0);
-    gridLayout->addWidget(borderColorButton, 3, 1);
-    gridLayout->addWidget(alarmLabel, 4, 0);
-    gridLayout->addWidget(alarmSlider, 4, 1);
-    gridLayout->addWidget(durationLabel, 5, 0);
-    gridLayout->addWidget(animationDurationSlider, 5, 1);
-
-    // 快速操作布局
-    auto *quickActionsLayout = new QHBoxLayout();
-    quickActionsLayout->addWidget(increaseButton);
-    quickActionsLayout->addWidget(decreaseButton);
-    quickActionsLayout->addWidget(resetButton);
+    batteryLayout->addStretch();
+
+    // 控制面板区域
+    auto *controlPanel = new QWidget(this);
+    auto *controlLayout = new QGridLayout(controlPanel);
+
+    // 第一行：数值控制
+    int row = 0;
+    controlLayout->addWidget(valueLabel, row, 0);
+    controlLayout->addWidget(valueSlider, row, 1);
+    controlLayout->addWidget(valueSpinBox, row, 2);
+
+    // 第二行：报警阈值
+    row++;
+    controlLayout->addWidget(alarmLabel, row, 0);
+    controlLayout->addWidget(alarmSlider, row, 1);
+    controlLayout->addWidget(alarmSpinBox, row, 2);
+
+    // 第三行：颜色控制
+    row++;
+    controlLayout->addWidget(new QLabel(tr("Power color:"), this), row, 0);
+    controlLayout->addWidget(powerColorButton, row, 1);
+
+    row++;
+    controlLayout->addWidget(new QLabel(tr("Alarm color:"), this), row, 0);
+    controlLayout->addWidget(alarmColorButton, row, 1);
+
+    row++;
+    controlLayout->addWidget(new QLabel(tr("Border color:"), this), row, 0);
+    controlLayout->addWidget(borderColorButton, row, 1);
+
+    // 第四行：动画控制
+    row++;
+    controlLayout->addWidget(durationLabel, row, 0);
+    controlLayout->addWidget(animationDurationSlider, row, 1);
+
+    // 第五行：操作按钮
+    row++;
+    controlLayout->addWidget(new QLabel(tr("Actions:"), this), row, 0);
+    controlLayout->addWidget(increaseButton, row, 1);
+    controlLayout->addWidget(animateToButton, row, 2);
+
+    row++;
+    controlLayout->addWidget(decreaseButton, row, 1);
+    controlLayout->addWidget(resetButton, row, 2);
+
+    // 第六行：充电控制
+    row++;
+    controlLayout->addWidget(new QLabel(tr("Charging:"), this), row, 0);
+    controlLayout->addWidget(chargingCheckbox, row, 1);
 
     // 主布局组装
-    mainLayout->addLayout(batteryLayout);
-    mainLayout->addLayout(gridLayout);
-    mainLayout->addLayout(quickActionsLayout);
+    mainLayout->addWidget(batteryContainer);
+    mainLayout->addWidget(controlPanel);
     mainLayout->addWidget(statusLabel);
 
     setCentralWidget(mainWidget);
-    resize(300, 350);
+    resize(600, 450); // 更适合横向电池的窗口大小
     setWindowTitle(tr("Battery Widget Example"));
 
-    // 连接信号和槽
-
-    // 电量控制
-    connect(slider, &QSlider::valueChanged, battery, [battery, animationCheckbox](int value) {
-        if (animationCheckbox->isChecked()) {
-            battery->setValueAnimated(value);
-        } else {
-            battery->setValue(value);
-        }
-    });
-
-    // 充电状态
-    connect(chargingCheckbox, &QCheckBox::toggled, battery, &BatteryWidget::setCharging);
-
-    // 报警阈值
-    connect(alarmSlider, &QSlider::valueChanged, battery, [battery, alarmLabel](int value) {
-        battery->setAlarmValue(value);
-        alarmLabel->setText(tr("Alarm threshold: %1%").arg(value));
-    });
+    // ========== 颜色设置部分 ==========
 
-    // 动画控制
-    connect(animationDurationSlider,
-            &QSlider::valueChanged,
-            battery,
-            [battery, durationLabel](int value) {
-                battery->setAnimationDuration(value);
-                durationLabel->setText(tr("Animation duration: %1ms").arg(value));
-            });
-
-    // 颜色选择 - 更新按钮颜色预览
+    // 统一的颜色按钮更新函数
     auto updateColorButton = [](QPushButton *button, const QColor &color) {
         auto colorName = color.name(QColor::HexArgb).toUpper();
 
@@ -142,17 +154,62 @@ MainWindow::MainWindow(QWidget *parent)
         button->setText(colorName);
     };
 
+    // 初始化颜色按钮
     updateColorButton(powerColorButton, battery->powerColor());
     updateColorButton(alarmColorButton, battery->alarmColor());
     updateColorButton(borderColorButton, battery->borderColor());
 
+    // ========== 信号连接 ==========
+
+    // 数值控制 - 避免循环信号
+    connect(valueSlider, &QSlider::valueChanged, this, [battery, valueSpinBox](int value) {
+        // 阻塞spinbox信号，避免循环
+        valueSpinBox->blockSignals(true);
+        battery->setValue(value);
+        valueSpinBox->setValue(value);
+        valueSpinBox->blockSignals(false);
+    });
+
+    connect(valueSpinBox,
+            QOverload<int>::of(&QSpinBox::valueChanged),
+            this,
+            [battery, valueSlider](int value) {
+                // 阻塞slider信号，避免循环
+                valueSlider->blockSignals(true);
+                battery->setValue(value);
+                valueSlider->setValue(value);
+                valueSlider->blockSignals(false);
+            });
+
+    // 报警阈值控制 - 避免循环信号
+    connect(alarmSlider, &QSlider::valueChanged, this, [battery, alarmSpinBox](int value) {
+        alarmSpinBox->blockSignals(true);
+        battery->setAlarmValue(value);
+        alarmSpinBox->setValue(value);
+        alarmSpinBox->blockSignals(false);
+    });
+
+    connect(alarmSpinBox,
+            QOverload<int>::of(&QSpinBox::valueChanged),
+            this,
+            [battery, alarmSlider](int value) {
+                alarmSlider->blockSignals(true);
+                battery->setAlarmValue(value);
+                alarmSlider->setValue(value);
+                alarmSlider->blockSignals(false);
+            });
+
+    // 充电状态
+    connect(chargingCheckbox, &QCheckBox::toggled, battery, &BatteryWidget::setCharging);
+
+    // 颜色设置
     connect(powerColorButton,
             &QPushButton::clicked,
             this,
             [this, battery, powerColorButton, updateColorButton]() {
                 QColor color = QColorDialog::getColor(battery->powerColor(),
                                                       this,
-                                                      tr("Select the battery color"));
+                                                      tr("Select Power Color"));
                 if (color.isValid()) {
                     battery->setPowerColor(color);
                     updateColorButton(powerColorButton, color);
@@ -165,7 +222,7 @@ MainWindow::MainWindow(QWidget *parent)
             [this, battery, alarmColorButton, updateColorButton]() {
                 QColor color = QColorDialog::getColor(battery->alarmColor(),
                                                       this,
-                                                      tr("Select the alarm color"));
+                                                      tr("Select Alarm Color"));
                 if (color.isValid()) {
                     battery->setAlarmColor(color);
                     updateColorButton(alarmColorButton, color);
@@ -178,24 +235,77 @@ MainWindow::MainWindow(QWidget *parent)
             [this, battery, borderColorButton, updateColorButton]() {
                 QColor color = QColorDialog::getColor(battery->borderColor(),
                                                       this,
-                                                      tr("Select the border color"));
+                                                      tr("Select Border Color"));
                 if (color.isValid()) {
                     battery->setBorderColor(color);
                     updateColorButton(borderColorButton, color);
                 }
             });
 
-    // 快速操作
-    connect(increaseButton, &QPushButton::clicked, battery, [battery]() {
+    // 动画设置
+    connect(animationDurationSlider,
+            &QSlider::valueChanged,
+            this,
+            [battery, durationLabel](int value) {
+                battery->setAnimationDuration(value);
+                durationLabel->setText(tr("Animation duration: %1ms").arg(value));
+            });
+
+    // 操作按钮
+    connect(increaseButton, &QPushButton::clicked, this, [battery]() {
         battery->increaseValue(10);
     });
 
-    connect(decreaseButton, &QPushButton::clicked, battery, [battery]() {
+    connect(decreaseButton, &QPushButton::clicked, this, [battery]() {
         battery->decreaseValue(10);
     });
 
     connect(resetButton, &QPushButton::clicked, battery, &BatteryWidget::reset);
 
+    connect(animateToButton, &QPushButton::clicked, this, [battery]() {
+        battery->setValueAnimated(50);
+    });
+
+    // 电池信号连接 - 更新UI状态
+    connect(battery,
+            &BatteryWidget::valueChanged,
+            this,
+            [valueLabel, valueSlider, valueSpinBox](int value) {
+                valueLabel->setText(tr("Current value: %1%").arg(value));
+
+                // 阻塞信号避免循环
+                valueSlider->blockSignals(true);
+                valueSlider->setValue(value);
+                valueSlider->blockSignals(false);
+
+                valueSpinBox->blockSignals(true);
+                valueSpinBox->setValue(value);
+                valueSpinBox->blockSignals(false);
+            });
+
+    connect(battery, &BatteryWidget::valueIncreased, this, [](int newValue) {
+        qDebug() << "Value increased to:" << newValue;
+    });
+
+    connect(battery, &BatteryWidget::valueDecreased, this, [](int newValue) {
+        qDebug() << "Value decreased to:" << newValue;
+    });
+
+    connect(battery, &BatteryWidget::valueReset, this, []() { qDebug() << "Value reset"; });
+
+    connect(battery,
+            &BatteryWidget::animationStarted,
+            this,
+            [statusLabel](int oldValue, int newValue) {
+                statusLabel->setText(tr("Animating: %1% → %2%").arg(oldValue).arg(newValue));
+                statusLabel->setStyleSheet("color: orange;");
+            });
+
+    connect(battery, &BatteryWidget::animationFinished, this, [statusLabel](int value) {
+        statusLabel->setText(tr("Animation finished: %1%").arg(value));
+        statusLabel->setStyleSheet("color: green;");
+    });
+
     connect(battery, &BatteryWidget::alarmStateChanged, this, [statusLabel](bool isAlarm) {
         if (isAlarm) {
             statusLabel->setText(tr("Status: Low battery alarm!"));
@@ -210,26 +320,19 @@ MainWindow::MainWindow(QWidget *parent)
             &BatteryWidget::chargingChanged,
             this,
             [statusLabel, chargingCheckbox](bool charging) {
+                chargingCheckbox->blockSignals(true);
                 chargingCheckbox->setChecked(charging);
+                chargingCheckbox->blockSignals(false);
+
                 if (charging) {
                     statusLabel->setText(tr("Status: Charging..."));
                     statusLabel->setStyleSheet("color: blue;");
                 }
             });
 
-    connect(battery,
-            &BatteryWidget::animationStarted,
-            this,
-            [statusLabel](int oldValue, int newValue) {
-                statusLabel->setText(tr("Animation: %1% → %2%").arg(oldValue).arg(newValue));
-            });
-
-    connect(battery, &BatteryWidget::animationFinished, this, [statusLabel](int value) {
-        statusLabel->setText(tr("The animation is completed: %1%").arg(value));
-    });
-
     // 初始化状态
     battery->setValue(75);
+    valueLabel->setText(tr("Current value: 75%"));
 }
 
 MainWindow::~MainWindow() {}