style(page): 调整数据抓取页面UI布局和样式

- 增大主容器间距和内边距,提升视觉层次感
- 扩大标题字体大小,增强可读性
- 调整表单网格间距和内边距,优化布局紧凑度
- 增加平台选择下拉框宽度,改善用户体验
- 修改日期选择器默认值和宽度,便于操作
- 增大按钮间距和内边距,提升触控友好性
- 扩大场景窗口尺寸,提供更宽敞的操作空间
This commit is contained in:
2025-12-11 18:00:41 +08:00
parent ad3380c979
commit d118b84750

View File

@@ -1,5 +1,6 @@
package com.fantaibao.page; package com.fantaibao.page;
import com.fantaibao.page.PlatformSelectionView;
import javafx.geometry.Insets; import javafx.geometry.Insets;
import javafx.geometry.Pos; import javafx.geometry.Pos;
import javafx.scene.Scene; import javafx.scene.Scene;
@@ -32,20 +33,20 @@ public class DataCrawlView {
// 创建主容器 // 创建主容器
VBox root = new VBox(); VBox root = new VBox();
root.setAlignment(Pos.CENTER); root.setAlignment(Pos.CENTER);
root.setSpacing(20); root.setSpacing(30);
root.setPadding(new Insets(30)); root.setPadding(new Insets(40));
root.setStyle("-fx-background-color: #f5f5f5;"); root.setStyle("-fx-background-color: #f5f5f5;");
// 标题 // 标题
Label titleLabel = new Label("数据抓取配置"); Label titleLabel = new Label("数据抓取配置");
titleLabel.setStyle("-fx-font-size: 24px; -fx-font-weight: bold; -fx-text-fill: #333333;"); titleLabel.setStyle("-fx-font-size: 28px; -fx-font-weight: bold; -fx-text-fill: #333333;");
// 创建表单容器 // 创建表单容器
GridPane formPane = new GridPane(); GridPane formPane = new GridPane();
formPane.setAlignment(Pos.CENTER); formPane.setAlignment(Pos.CENTER);
formPane.setHgap(15); formPane.setHgap(20);
formPane.setVgap(20); formPane.setVgap(25);
formPane.setPadding(new Insets(20)); formPane.setPadding(new Insets(30));
formPane.setStyle("-fx-background-color: white; -fx-border-radius: 10px; -fx-background-radius: 10px; " + formPane.setStyle("-fx-background-color: white; -fx-border-radius: 10px; -fx-background-radius: 10px; " +
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 10, 0, 0, 0);"); "-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 10, 0, 0, 0);");
@@ -56,7 +57,7 @@ public class DataCrawlView {
platformComboBox = new ComboBox<>(); platformComboBox = new ComboBox<>();
platformComboBox.getItems().addAll("美团", "大众点评"); platformComboBox.getItems().addAll("美团", "大众点评");
platformComboBox.setValue("美团"); platformComboBox.setValue("美团");
platformComboBox.setPrefWidth(200); platformComboBox.setPrefWidth(250);
platformComboBox.setStyle("-fx-font-size: 14px;"); platformComboBox.setStyle("-fx-font-size: 14px;");
// 开始时间选择 // 开始时间选择
@@ -64,8 +65,8 @@ public class DataCrawlView {
startDateLabel.setStyle("-fx-font-size: 14px; -fx-text-fill: #333333;"); startDateLabel.setStyle("-fx-font-size: 14px; -fx-text-fill: #333333;");
startDatePicker = new DatePicker(); startDatePicker = new DatePicker();
startDatePicker.setValue(LocalDate.now().minusDays(7)); // 默认一周 startDatePicker.setValue(LocalDate.now().minusDays(10)); // 默认10天
startDatePicker.setPrefWidth(200); startDatePicker.setPrefWidth(250);
startDatePicker.setStyle("-fx-font-size: 14px;"); startDatePicker.setStyle("-fx-font-size: 14px;");
// 结束时间选择 // 结束时间选择
@@ -73,8 +74,8 @@ public class DataCrawlView {
endDateLabel.setStyle("-fx-font-size: 14px; -fx-text-fill: #333333;"); endDateLabel.setStyle("-fx-font-size: 14px; -fx-text-fill: #333333;");
endDatePicker = new DatePicker(); endDatePicker = new DatePicker();
endDatePicker.setValue(LocalDate.now()); // 默认 endDatePicker.setValue(LocalDate.now().minusDays(1)); // 默认
endDatePicker.setPrefWidth(200); endDatePicker.setPrefWidth(250);
endDatePicker.setStyle("-fx-font-size: 14px;"); endDatePicker.setStyle("-fx-font-size: 14px;");
// 添加到表单 // 添加到表单
@@ -88,39 +89,39 @@ public class DataCrawlView {
// 按钮区域 // 按钮区域
HBox buttonBox = new HBox(); HBox buttonBox = new HBox();
buttonBox.setAlignment(Pos.CENTER); buttonBox.setAlignment(Pos.CENTER);
buttonBox.setSpacing(20); buttonBox.setSpacing(30);
// 返回按钮 // 返回按钮
Button backButton = new Button("返回"); Button backButton = new Button("返回");
backButton.setStyle("-fx-background-color: #cccccc; -fx-text-fill: #333333; " + backButton.setStyle("-fx-background-color: #cccccc; -fx-text-fill: #333333; " +
"-fx-font-size: 16px; -fx-font-weight: bold; -fx-padding: 12px 36px; " + "-fx-font-size: 16px; -fx-font-weight: bold; -fx-padding: 15px 40px; " +
"-fx-border-radius: 30px; -fx-background-radius: 30px; " + "-fx-border-radius: 30px; -fx-background-radius: 30px; " +
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);"); "-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);");
backButton.setCursor(javafx.scene.Cursor.HAND); backButton.setCursor(javafx.scene.Cursor.HAND);
backButton.setOnMouseEntered(e -> backButton.setStyle("-fx-background-color: #bbbbbb; " + backButton.setOnMouseEntered(e -> backButton.setStyle("-fx-background-color: #bbbbbb; " +
"-fx-text-fill: #333333; -fx-font-size: 16px; -fx-font-weight: bold; " + "-fx-text-fill: #333333; -fx-font-size: 16px; -fx-font-weight: bold; " +
"-fx-padding: 12px 36px; -fx-border-radius: 30px; -fx-background-radius: 30px; " + "-fx-padding: 15px 40px; -fx-border-radius: 30px; -fx-background-radius: 30px; " +
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 15, 0, 0, 0);")); "-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 15, 0, 0, 0);"));
backButton.setOnMouseExited(e -> backButton.setStyle("-fx-background-color: #cccccc; " + backButton.setOnMouseExited(e -> backButton.setStyle("-fx-background-color: #cccccc; " +
"-fx-text-fill: #333333; -fx-font-size: 16px; -fx-font-weight: bold; " + "-fx-text-fill: #333333; -fx-font-size: 16px; -fx-font-weight: bold; " +
"-fx-padding: 12px 36px; -fx-border-radius: 30px; -fx-background-radius: 30px; " + "-fx-padding: 15px 40px; -fx-border-radius: 30px; -fx-background-radius: 30px; " +
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);")); "-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);"));
backButton.setOnAction(e -> handleBackAction()); backButton.setOnAction(e -> handleBackAction());
// 开始抓取按钮 // 开始抓取按钮
crawlButton = new Button("开始抓取"); crawlButton = new Button("开始抓取");
crawlButton.setStyle("-fx-background-color: #4CAF50; -fx-text-fill: white; " + crawlButton.setStyle("-fx-background-color: #4CAF50; -fx-text-fill: white; " +
"-fx-font-size: 16px; -fx-font-weight: bold; -fx-padding: 12px 36px; " + "-fx-font-size: 16px; -fx-font-weight: bold; -fx-padding: 15px 40px; " +
"-fx-border-radius: 30px; -fx-background-radius: 30px; " + "-fx-border-radius: 30px; -fx-background-radius: 30px; " +
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);"); "-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);");
crawlButton.setCursor(javafx.scene.Cursor.HAND); crawlButton.setCursor(javafx.scene.Cursor.HAND);
crawlButton.setOnMouseEntered(e -> crawlButton.setStyle("-fx-background-color: #45a049; " + crawlButton.setOnMouseEntered(e -> crawlButton.setStyle("-fx-background-color: #45a049; " +
"-fx-text-fill: white; -fx-font-size: 16px; -fx-font-weight: bold; " + "-fx-text-fill: white; -fx-font-size: 16px; -fx-font-weight: bold; " +
"-fx-padding: 12px 36px; -fx-border-radius: 30px; -fx-background-radius: 30px; " + "-fx-padding: 15px 40px; -fx-border-radius: 30px; -fx-background-radius: 30px; " +
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 15, 0, 0, 0);")); "-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 15, 0, 0, 0);"));
crawlButton.setOnMouseExited(e -> crawlButton.setStyle("-fx-background-color: #4CAF50; " + crawlButton.setOnMouseExited(e -> crawlButton.setStyle("-fx-background-color: #4CAF50; " +
"-fx-text-fill: white; -fx-font-size: 16px; -fx-font-weight: bold; " + "-fx-text-fill: white; -fx-font-size: 16px; -fx-font-weight: bold; " +
"-fx-padding: 12px 36px; -fx-border-radius: 30px; -fx-background-radius: 30px; " + "-fx-padding: 15px 40px; -fx-border-radius: 30px; -fx-background-radius: 30px; " +
"-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);")); "-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 0);"));
// 为按钮添加点击事件 // 为按钮添加点击事件
@@ -133,7 +134,7 @@ public class DataCrawlView {
root.getChildren().addAll(titleLabel, formPane, buttonBox); root.getChildren().addAll(titleLabel, formPane, buttonBox);
// 设置场景并显示窗口 // 设置场景并显示窗口
Scene scene = new Scene(root, 500, 450); Scene scene = new Scene(root, 800, 600);
primaryStage.setScene(scene); primaryStage.setScene(scene);
primaryStage.show(); primaryStage.show();
} }