feat:使用trae美化UI

chat-gwng/chat-client/src/main/java/space/anyi/chatClient/ui/ClientApplication.java

@@ -36,6 +36,8 @@ public class ClientApplication extends Application{
         startController.setStage(primaryStage);
         //创建场景
         Scene startScene = new Scene(pane);
+        //加载CSS样式
+        startScene.getStylesheets().add(getClass().getResource("/styles/alert.css").toExternalForm());
         primaryStage.setScene(startScene);
         primaryStage.setTitle("聊天室 Client");
         primaryStage.setOnCloseRequest(event -> {

chat-gwng/chat-client/src/main/java/space/anyi/chatClient/ui/controller/ClientController.java

@@ -1,7 +1,6 @@
 package space.anyi.chatClient.ui.controller;
 
 import javafx.application.Platform;
-import javafx.collections.FXCollections;
 import javafx.collections.ObservableList;
 import javafx.event.ActionEvent;
 import javafx.fxml.FXML;
@@ -97,11 +96,15 @@ public class ClientController implements Initializable {
         if (message.getType() == Message.MessageType.USER) {
             messageUI.setOnContextMenuRequested(event->{
                 ContextMenu contextMenu = new ContextMenu();
+                contextMenu.setStyle("-fx-background-color: linear-gradient(to bottom, #667eea 0%, #764ba2 100%); -fx-background-radius: 10; -fx-border-radius: 10; -fx-border-color: rgba(255,255,255,0.2); -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 10, 0.5, 0, 2);");
                 //自己的可以触发撤回
                 //别人的可以私聊
                 MenuItem item = null;
                 if (message.getSource().equals(Client.name)) {
                     item = new MenuItem("撤回");
+                    item.setStyle("-fx-text-fill: white; -fx-font-weight: bold; -fx-background-color: transparent; -fx-padding: 8 15 8 15;");
+                    //item.setOnMouseEntered(e -> item.setStyle("-fx-text-fill: white; -fx-font-weight: bold; -fx-background-color: rgba(255,255,255,0.2); -fx-padding: 8 15 8 15;"));
+                    //item.setOnMouseExited(e -> item.setStyle("-fx-text-fill: white; -fx-font-weight: bold; -fx-background-color: transparent; -fx-padding: 8 15 8 15;"));
                     item.setOnAction(e->{
                         Alert alert = new Alert(Alert.AlertType.WARNING);
                         alert.setTitle("警告");
@@ -117,6 +120,9 @@ public class ClientController implements Initializable {
                     });
                 }else{
                     item = new MenuItem("私聊");
+                    item.setStyle("-fx-text-fill: white; -fx-font-weight: bold; -fx-background-color: transparent; -fx-padding: 8 15 8 15;");
+                    //item.setOnMouseEntered(e -> item.setStyle("-fx-text-fill: white; -fx-font-weight: bold; -fx-background-color: rgba(255,255,255,0.2); -fx-padding: 8 15 8 15;"));
+                    //item.setOnMouseExited(e -> item.setStyle("-fx-text-fill: white; -fx-font-weight: bold; -fx-background-color: transparent; -fx-padding: 8 15 8 15;"));
                     item.setOnAction(actionEvent->{
                         //创建私聊场景
                         FXMLLoader fxmlLoader = new FXMLLoader();
@@ -168,10 +174,10 @@ public class ClientController implements Initializable {
         //用背景颜色区分自己的消息
         if (Client.name.equals(message.getSource())){
             //自己的
-            result.setStyle("-fx-background-radius: 100;-fx-background-color:  #3EB575");
+            result.setStyle("-fx-background-radius: 15;-fx-background-color: linear-gradient(to right, #667eea 0%, #764ba2 100%); -fx-padding: 10; -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 10, 0.5, 0, 2);");
         }else{
             //别人的
-            result.setStyle("-fx-background-radius: 100;-fx-background-color:  #2E2E2E");
+            result.setStyle("-fx-background-radius: 15;-fx-background-color: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); -fx-padding: 10; -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 10, 0.5, 0, 2);");
         }
         head.setPrefWidth(width);
         head.setPrefHeight(height-15);
@@ -180,16 +186,18 @@ public class ClientController implements Initializable {
         name.setPrefHeight(height - 15);
         name.setTextFill(Color.WHITE);
         name.setAlignment(Pos.CENTER);
+        name.setStyle("-fx-font-weight: bold; -fx-font-size: 12;");
 
         content.setPrefWidth(width - 100);
         content.setPrefHeight(height - 15);
         content.setTextFill(Color.WHITE);
+        content.setStyle("-fx-font-size: 12; -fx-wrap-text: true;");
 
         time.setPrefWidth(width);
         time.setPrefHeight(15);
         time.setTextFill(Color.GRAY);
         time.setAlignment(Pos.CENTER);
-
+        time.setStyle("-fx-font-size: 10;");
 
         //组装
         head.getChildren().addAll(name, content);
@@ -228,8 +236,7 @@ public class ClientController implements Initializable {
         label.setMinHeight(30);
         label.prefHeight(30);
         label.setAlignment(Pos.CENTER);
-        label.setStyle("-fx-background-color: #363636; -fx-background-radius: 50;");
-        label.setTextFill(Color.WHITE);
+        label.setStyle("-fx-background-color: linear-gradient(to bottom, #667eea 0%, #764ba2 100%); -fx-background-radius: 15; -fx-text-fill: white; -fx-font-weight: bold; -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 5, 0.3, 0, 1);");
         return label;
     }
 

chat-gwng/chat-client/src/main/java/space/anyi/chatClient/ui/controller/PrivateChatController.java

@@ -98,10 +98,10 @@ public class PrivateChatController implements Initializable {
         //用背景颜色区分自己的消息
         if (Client.name.equals(message.getSource())){
             //自己的
-            result.setStyle("-fx-background-radius: 100;-fx-background-color:  #3EB575");
+            result.setStyle("-fx-background-radius: 15;-fx-background-color: linear-gradient(to right, #667eea 0%, #764ba2 100%); -fx-padding: 10; -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 10, 0.5, 0, 2);");
         }else{
             //别人的
-            result.setStyle("-fx-background-radius: 100;-fx-background-color:  #2E2E2E");
+            result.setStyle("-fx-background-radius: 15;-fx-background-color: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); -fx-padding: 10; -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 10, 0.5, 0, 2);");
         }
         head.setPrefWidth(width);
         head.setPrefHeight(height-15);
@@ -110,15 +110,18 @@ public class PrivateChatController implements Initializable {
         name.setPrefHeight(height - 15);
         name.setTextFill(Color.WHITE);
         name.setAlignment(Pos.CENTER);
+        name.setStyle("-fx-font-weight: bold; -fx-font-size: 12;");
 
         content.setPrefWidth(width - 100);
         content.setPrefHeight(height - 15);
         content.setTextFill(Color.WHITE);
+        content.setStyle("-fx-font-size: 12; -fx-wrap-text: true;");
 
         time.setPrefWidth(width);
         time.setPrefHeight(15);
         time.setTextFill(Color.GRAY);
         time.setAlignment(Pos.CENTER);
+        time.setStyle("-fx-font-size: 10;");
         //组装
         head.getChildren().addAll(name, content);
         result.getChildren().addAll(head,time);

chat-gwng/chat-client/src/main/resources/fxml/client.fxml

@@ -1,80 +1,78 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.ScrollPane?>
 <?import javafx.scene.control.TextArea?>
-<?import javafx.scene.layout.ColumnConstraints?>
-<?import javafx.scene.layout.GridPane?>
-<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.BorderPane?>
+<?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
+<?import javafx.scene.effect.DropShadow?>
 
-<GridPane alignment="CENTER" maxHeight="300.0" maxWidth="600.0" minHeight="400.0" minWidth="600.0" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="space.anyi.chatClient.ui.controller.ClientController">
-   <columnConstraints>
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-   </columnConstraints>
-   <rowConstraints>
-      <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-   </rowConstraints>
-   <children>
-      <Label alignment="CENTER" maxHeight="80.0" maxWidth="600.0" minHeight="80.0" minWidth="600.0" prefHeight="80.0" prefWidth="600.0" text="聊天室 Client" GridPane.columnIndex="14" GridPane.columnSpan="12" GridPane.rowSpan="2">
-         <font>
-            <Font size="48.0" />
-         </font>
-      </Label>
-      <ScrollPane fx:id="messagePane" prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="14" GridPane.columnSpan="9" GridPane.rowIndex="2" GridPane.rowSpan="4">
-         <content>
-            <VBox prefHeight="200.0" prefWidth="450.0" />
-         </content>
-      </ScrollPane>
-      <ScrollPane prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="23" GridPane.columnSpan="3" GridPane.rowIndex="3" GridPane.rowSpan="5">
-         <content>
-            <VBox fx:id="userList" alignment="TOP_CENTER" prefHeight="250.0" prefWidth="150.0" />
-         </content>
-      </ScrollPane>
-      <TextArea fx:id="inputMessage" maxWidth="400.0" minHeight="100.0" minWidth="400.0" prefColumnCount="1" prefHeight="200.0" prefRowCount="1" prefWidth="200.0" promptText="输入信息" GridPane.columnIndex="14" GridPane.columnSpan="8" GridPane.rowIndex="6" GridPane.rowSpan="2">
-         <font>
-            <Font size="14.0" />
-         </font>
-      </TextArea>
-      <Button fx:id="bu" alignment="CENTER" maxHeight="100.0" maxWidth="50.0" minHeight="100.0" minWidth="50.0" mnemonicParsing="false" onAction="#sendMessage" prefHeight="100.0" prefWidth="50.0" text="发送" GridPane.columnIndex="22" GridPane.rowIndex="6" GridPane.rowSpan="2" />
-      <Label fx:id="onlineLabel" alignment="CENTER" maxHeight="50.0" maxWidth="150.0" minHeight="50.0" minWidth="150.0" prefHeight="50.0" prefWidth="150.0" style="-fx-border-color: #fff;" text="在线人数:0" GridPane.columnIndex="23" GridPane.columnSpan="3" GridPane.rowIndex="2">
-         <font>
-            <Font size="14.0" />
-         </font>
-      </Label>
-   </children>
-</GridPane>
+<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" style="-fx-background-color: linear-gradient(to bottom right, #667eea 0%, #764ba2 100%);" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="space.anyi.chatClient.ui.controller.ClientController">
+   <top>
+      <VBox alignment="CENTER" spacing="10" style="-fx-background-color: rgba(255,255,255,0.1); -fx-background-radius: 0 0 10 10;" BorderPane.alignment="CENTER">
+         <padding>
+            <Insets top="20" right="20" bottom="20" left="20" />
+         </padding>
+         <Label text="聊天室客户端" textFill="WHITE">
+            <font>
+               <Font name="System Bold" size="32.0" />
+            </font>
+            <effect>
+               <DropShadow radius="5.0" color="rgba(0,0,0,0.3)" />
+            </effect>
+         </Label>
+         <Label fx:id="onlineLabel" text="在线人数: 0" textFill="WHITE" style="-fx-background-color: rgba(255,255,255,0.2); -fx-background-radius: 15; -fx-padding: 5 15 5 15;">
+            <font>
+               <Font name="System" size="14.0" />
+            </font>
+         </Label>
+      </VBox>
+   </top>
+   <center>
+      <HBox spacing="20" BorderPane.alignment="CENTER">
+         <padding>
+            <Insets top="10" right="20" bottom="10" left="20" />
+         </padding>
+         <VBox spacing="10" prefWidth="600" maxWidth="600">
+            <Label text="聊天消息" textFill="WHITE">
+               <font>
+                  <Font name="System Bold" size="16.0" />
+               </font>
+            </Label>
+            <ScrollPane fx:id="messagePane" style="-fx-background-color: rgba(255,255,255,0.9); -fx-background-radius: 10;" prefHeight="350" prefWidth="580">
+               <content>
+                  <VBox alignment="TOP_LEFT" spacing="5" style="-fx-padding: 10;" />
+               </content>
+            </ScrollPane>
+            <HBox spacing="10" alignment="CENTER_LEFT">
+               <TextArea fx:id="inputMessage" promptText="输入聊天消息..." style="-fx-background-color: rgba(255,255,255,0.9); -fx-background-radius: 10; -fx-border-color: rgba(255,255,255,0.3); -fx-border-radius: 10;" prefHeight="60" prefWidth="500" wrapText="true">
+                  <font>
+                     <Font size="14.0" />
+                  </font>
+               </TextArea>
+               <Button fx:id="bu" mnemonicParsing="false" onAction="#sendMessage" text="发送" style="-fx-background-color: #2196F3; -fx-text-fill: white; -fx-background-radius: 10; -fx-font-weight: bold;" prefHeight="60" prefWidth="70">
+                  <font>
+                     <Font size="14.0" />
+                  </font>
+               </Button>
+            </HBox>
+         </VBox>
+         <VBox spacing="10" prefWidth="150" maxWidth="150">
+            <Label text="在线用户" textFill="WHITE">
+               <font>
+                  <Font name="System Bold" size="16.0" />
+               </font>
+            </Label>
+            <ScrollPane style="-fx-background-color: rgba(255,255,255,0.9); -fx-background-radius: 10;" prefHeight="350" prefWidth="140">
+               <content>
+                  <VBox fx:id="userList" alignment="TOP_CENTER" spacing="5" style="-fx-padding: 10;" />
+               </content>
+            </ScrollPane>
+         </VBox>
+      </HBox>
+   </center>
+</BorderPane>

chat-gwng/chat-client/src/main/resources/fxml/index.fxml

@@ -1,96 +1,69 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.TextField?>
-<?import javafx.scene.layout.ColumnConstraints?>
-<?import javafx.scene.layout.GridPane?>
-<?import javafx.scene.layout.HBox?>
-<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
+<?import javafx.scene.effect.DropShadow?>
 
-<GridPane alignment="CENTER" maxHeight="300.0" maxWidth="600.0" minHeight="400.0" minWidth="600.0" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="space.anyi.chatClient.ui.controller.StartController">
-   <columnConstraints>
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-   </columnConstraints>
-   <rowConstraints>
-      <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-   </rowConstraints>
-   <children>
-      <Label alignment="CENTER" maxHeight="80.0" maxWidth="600.0" minHeight="80.0" minWidth="600.0" prefHeight="80.0" prefWidth="600.0" text="聊天室 Client" GridPane.columnIndex="14" GridPane.columnSpan="12" GridPane.rowSpan="2">
-         <font>
-            <Font size="48.0" />
-         </font>
-      </Label>
-      <Label alignment="BOTTOM_CENTER" prefHeight="50.0" prefWidth="600.0" text="25计科4(专升本)-2520601429-黄略" GridPane.columnIndex="14" GridPane.columnSpan="12" GridPane.rowIndex="7">
-         <font>
-            <Font size="14.0" />
-         </font>
-      </Label>
-      <HBox prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="18" GridPane.columnSpan="4" GridPane.rowIndex="2">
-         <children>
-            <Label alignment="CENTER" prefHeight="50.0" prefWidth="100.0" text="服务器端口:">
+<VBox alignment="CENTER" spacing="30" style="-fx-background-color: linear-gradient(to bottom right, #667eea 0%, #764ba2 100%);" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="space.anyi.chatClient.ui.controller.StartController">
+   <padding>
+      <Insets top="60" right="40" bottom="40" left="40" />
+   </padding>
+   <Label text="聊天室客户端" textFill="WHITE" style="-fx-background-color: rgba(255,255,255,0.2); -fx-background-radius: 20; -fx-padding: 15 30 15 30;">
+      <font>
+         <Font name="System Bold" size="28.0" />
+      </font>
+      <effect>
+         <DropShadow radius="8.0" color="rgba(0,0,0,0.3)" />
+      </effect>
+   </Label>
+   <VBox spacing="20" alignment="CENTER" style="-fx-background-color: rgba(255,255,255,0.1); -fx-background-radius: 15; -fx-padding: 20;">
+      <VBox spacing="15" alignment="CENTER_LEFT">
+         <Label text="服务器配置" textFill="WHITE">
+            <font>
+               <Font name="System Bold" size="18.0" />
+            </font>
+         </Label>
+         <VBox spacing="10" alignment="CENTER_LEFT">
+            <Label text="服务器地址:" textFill="WHITE">
                <font>
-                  <Font size="16.0" />
+                  <Font name="System" size="14.0" />
                </font>
             </Label>
-            <TextField fx:id="portField" prefHeight="50.0" prefWidth="100.0" promptText="端口" text="8000">
+            <TextField fx:id="hostField" promptText="请输入服务器IP地址" text="localhost" style="-fx-background-color: rgba(255,255,255,0.9); -fx-background-radius: 10; -fx-border-color: rgba(255,255,255,0.3); -fx-border-radius: 10; -fx-padding: 10;" prefHeight="40.0" prefWidth="280.0">
                <font>
                   <Font size="14.0" />
                </font>
             </TextField>
-         </children>
-      </HBox>
-      <HBox prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="18" GridPane.columnSpan="4" GridPane.rowIndex="3">
-         <children>
-            <Label alignment="CENTER" prefHeight="50.0" prefWidth="100.0" text="服务器HOST:">
+         </VBox>
+         <VBox spacing="10" alignment="CENTER_LEFT">
+            <Label text="服务器端口:" textFill="WHITE">
                <font>
-                  <Font size="16.0" />
+                  <Font name="System" size="14.0" />
                </font>
             </Label>
-            <TextField fx:id="hostField" prefHeight="50.0" prefWidth="100.0" promptText="IP" text="localhost">
+            <TextField fx:id="portField" promptText="请输入服务器端口" text="8000" style="-fx-background-color: rgba(255,255,255,0.9); -fx-background-radius: 10; -fx-border-color: rgba(255,255,255,0.3); -fx-border-radius: 10; -fx-padding: 10;" prefHeight="40.0" prefWidth="280.0">
                <font>
                   <Font size="14.0" />
                </font>
             </TextField>
-         </children>
-      </HBox>
-      <Button fx:id="bu" mnemonicParsing="false" onAction="#startHandler" prefHeight="50.0" prefWidth="100.0" text="连接" GridPane.columnIndex="19" GridPane.columnSpan="2" GridPane.rowIndex="5">
+         </VBox>
+      </VBox>
+      <Button fx:id="bu" mnemonicParsing="false" onAction="#startHandler" text="连接服务器" style="-fx-background-color: #2196F3; -fx-text-fill: white; -fx-background-radius: 10; -fx-font-weight: bold; -fx-padding: 12 30 12 30;" prefHeight="45.0" prefWidth="200.0">
          <font>
-            <Font size="24.0" />
+            <Font size="16.0" />
          </font>
+         <effect>
+            <DropShadow radius="4.0" color="rgba(0,0,0,0.2)" />
+         </effect>
       </Button>
-   </children>
-</GridPane>
+   </VBox>
+   <Label text="25计科4(专升本)-2520601429-黄略" textFill="WHITE" style="-fx-background-color: rgba(255,255,255,0.1); -fx-background-radius: 10; -fx-padding: 5 15 5 15;">
+      <font>
+         <Font name="System" size="12.0" />
+      </font>
+   </Label>
+</VBox>

chat-gwng/chat-client/src/main/resources/fxml/loginScene.fxml

@@ -1,20 +1,43 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.TextField?>
-<?import javafx.scene.layout.Pane?>
+<?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
+<?import javafx.scene.effect.DropShadow?>
 
-
-<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="space.anyi.chatClient.ui.controller.LoginController">
-   <children>
-      <Label alignment="CENTER" prefHeight="100.0" prefWidth="300.0" text="设置名字">
+<VBox alignment="CENTER" spacing="30" style="-fx-background-color: linear-gradient(to bottom right, #4facfe 0%, #00f2fe 100%);" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="space.anyi.chatClient.ui.controller.LoginController">
+   <padding>
+      <Insets top="60" right="40" bottom="60" left="40" />
+   </padding>
+   <Label text="加入聊天室" textFill="WHITE" style="-fx-background-color: rgba(255,255,255,0.2); -fx-background-radius: 20; -fx-padding: 15 30 15 30;">
+      <font>
+         <Font name="System Bold" size="28.0" />
+      </font>
+      <effect>
+         <DropShadow radius="8.0" color="rgba(0,0,0,0.3)" />
+      </effect>
+   </Label>
+   <VBox spacing="15" alignment="CENTER">
+      <Label text="请输入您的昵称" textFill="WHITE">
          <font>
-            <Font size="24.0" />
+            <Font name="System" size="16.0" />
          </font>
       </Label>
-      <TextField fx:id="name" alignment="CENTER" layoutX="74.0" layoutY="187.0" promptText="名字" />
-      <Button fx:id="bu" layoutX="123.0" layoutY="265.0" mnemonicParsing="false" onAction="#loginHandler" text="确认" />
-   </children>
-</Pane>
+      <TextField fx:id="name" promptText="请输入名字" style="-fx-background-color: rgba(255,255,255,0.9); -fx-background-radius: 10; -fx-border-color: rgba(255,255,255,0.3); -fx-border-radius: 10; -fx-padding: 10;" prefHeight="45.0" prefWidth="280.0">
+         <font>
+            <Font size="14.0" />
+         </font>
+      </TextField>
+      <Button fx:id="bu" mnemonicParsing="false" onAction="#loginHandler" text="进入聊天室" style="-fx-background-color: #2196F3; -fx-text-fill: white; -fx-background-radius: 10; -fx-font-weight: bold; -fx-padding: 12 30 12 30;" prefHeight="45.0" prefWidth="200.0">
+         <font>
+            <Font size="16.0" />
+         </font>
+         <effect>
+            <DropShadow radius="4.0" color="rgba(0,0,0,0.2)" />
+         </effect>
+      </Button>
+   </VBox>
+</VBox>

chat-gwng/chat-client/src/main/resources/fxml/privateChatScene.fxml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.ScrollPane?>
@@ -7,23 +8,35 @@
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
+<?import javafx.scene.effect.DropShadow?>
 
-<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="space.anyi.chatClient.ui.controller.PrivateChatController">
-   <children>
-      <Label fx:id="nameLabel" alignment="CENTER" prefHeight="50.0" prefWidth="300.0" text="name">
+<VBox alignment="CENTER" spacing="20" style="-fx-background-color: linear-gradient(to bottom right, #667eea 0%, #764ba2 100%);" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="space.anyi.chatClient.ui.controller.PrivateChatController">
+   <padding>
+      <Insets top="20" right="20" bottom="20" left="20" />
+   </padding>
+   <Label fx:id="nameLabel" text="私聊窗口" textFill="WHITE" style="-fx-background-color: rgba(255,255,255,0.2); -fx-background-radius: 20; -fx-padding: 15 30 15 30;">
+      <font>
+         <Font name="System Bold" size="24.0" />
+      </font>
+      <effect>
+         <DropShadow radius="5.0" color="rgba(0,0,0,0.3)" />
+      </effect>
+   </Label>
+   <ScrollPane fx:id="messagePane" style="-fx-background-color: rgba(255,255,255,0.9); -fx-background-radius: 10;" prefHeight="300.0" prefWidth="560.0">
+      <content>
+         <VBox alignment="TOP_LEFT" spacing="5" style="-fx-padding: 10;" />
+      </content>
+   </ScrollPane>
+   <HBox spacing="10" alignment="CENTER">
+      <TextArea fx:id="inputMessage" promptText="输入私聊消息..." style="-fx-background-color: rgba(255,255,255,0.9); -fx-background-radius: 10; -fx-border-color: rgba(255,255,255,0.3); -fx-border-radius: 10;" prefHeight="60.0" prefWidth="450.0" wrapText="true">
          <font>
-            <Font size="18.0" />
+            <Font size="14.0" />
          </font>
-      </Label>
-      <ScrollPane fx:id="messagePane" prefHeight="250.0" prefWidth="300.0">
-         <content>
-            <VBox prefHeight="250.0" prefWidth="300.0" />
-         </content></ScrollPane>
-      <HBox prefHeight="100.0" prefWidth="300.0">
-         <children>
-            <TextArea fx:id="inputMessage" prefHeight="70.0" prefWidth="250.0" promptText="信息" />
-            <Button fx:id="bu" alignment="CENTER" mnemonicParsing="false" onAction="#sendMessage" prefHeight="100.0" prefWidth="50.0" text="发送" />
-         </children>
-      </HBox>
-   </children>
+      </TextArea>
+      <Button fx:id="bu" mnemonicParsing="false" onAction="#sendMessage" text="发送" style="-fx-background-color: #2196F3; -fx-text-fill: white; -fx-background-radius: 10; -fx-font-weight: bold;" prefHeight="60.0" prefWidth="100.0">
+         <font>
+            <Font size="14.0" />
+         </font>
+      </Button>
+   </HBox>
 </VBox>

chat-gwng/chat-client/src/main/resources/styles/alert.css

@@ -0,0 +1,75 @@
+/* Alert对话框美化样式 */
+.alert {
+    -fx-background-color: linear-gradient(to bottom, #667eea 0%, #764ba2 100%);
+    -fx-background-radius: 15;
+    -fx-border-radius: 15;
+    -fx-border-color: rgba(255,255,255,0.2);
+    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 15, 0.5, 0, 3);
+}
+
+.alert > .dialog-pane {
+    -fx-background-color: transparent;
+}
+
+.alert .header-panel {
+    -fx-background-color: transparent;
+    -fx-background-radius: 15 15 0 0;
+}
+
+.alert .header-panel .label {
+    -fx-text-fill: white;
+    -fx-font-weight: bold;
+    -fx-font-size: 16;
+}
+
+.alert .content {
+    -fx-background-color: transparent;
+    -fx-text-fill: white;
+    -fx-font-size: 14;
+}
+
+.alert .content .label {
+    -fx-text-fill: white;
+}
+
+.alert .button-bar {
+    -fx-background-color: transparent;
+}
+
+.alert .button-bar .button {
+    -fx-background-color: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
+    -fx-background-radius: 10;
+    -fx-border-radius: 10;
+    -fx-text-fill: white;
+    -fx-font-weight: bold;
+    -fx-padding: 8 15 8 15;
+    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 5, 0.3, 0, 1);
+}
+
+.alert .button-bar .button:hover {
+    -fx-background-color: linear-gradient(to bottom, #667eea 0%, #764ba2 100%);
+    -fx-scale-x: 1.05;
+    -fx-scale-y: 1.05;
+}
+
+.alert .button-bar .button:pressed {
+    -fx-scale-x: 0.95;
+    -fx-scale-y: 0.95;
+}
+
+/* 不同类型的Alert样式 */
+.alert:warning .header-panel {
+    -fx-background-color: linear-gradient(to bottom, #ff9966 0%, #ff5e62 100%);
+}
+
+.alert:error .header-panel {
+    -fx-background-color: linear-gradient(to bottom, #ff416c 0%, #ff4b2b 100%);
+}
+
+.alert:information .header-panel {
+    -fx-background-color: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
+}
+
+.alert:confirmation .header-panel {
+    -fx-background-color: linear-gradient(to bottom, #56ab2f 0%, #a8e6cf 100%);
+}

chat-gwng/chat-server/src/main/java/space/anyi/chatServer/ui/ServerApplication.java

@@ -35,6 +35,8 @@ public class ServerApplication extends Application {
         startController.setLoader(fxmlLoader);
         //创建场景
         Scene startScene = new Scene(pane);
+        //加载CSS样式
+        startScene.getStylesheets().add(getClass().getResource("/styles/alert.css").toExternalForm());
         primaryStage.setScene(startScene);
         primaryStage.setTitle("聊天室 Server");
         primaryStage.setOnCloseRequest(event -> {

chat-gwng/chat-server/src/main/java/space/anyi/chatServer/ui/controller/ServerController.java

@@ -9,10 +9,7 @@ import javafx.scene.control.*;
 import javafx.scene.input.MouseEvent;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.VBox;
-import javafx.scene.paint.Color;
-import javafx.scene.paint.Paint;
 import javafx.stage.Stage;
-import javafx.util.Callback;
 import lombok.Data;
 import space.anyi.chatCommom.Message;
 import space.anyi.chatServer.core.ChatServer;
@@ -21,8 +18,6 @@ import java.time.Instant;
 import java.time.LocalDateTime;
 import java.time.ZoneId;
 import java.time.format.DateTimeFormatter;
-import java.util.List;
-import java.util.Objects;
 
 
 /**
@@ -135,21 +130,24 @@ public class ServerController {
         double height = 50;
         result.setPrefWidth(width);
         result.setPrefHeight(height);
-        result.setStyle("-fx-background-color: #3C3F41;-fx-background-radius: 100;");
+        result.setStyle("-fx-background-color: linear-gradient(to right, #667eea 0%, #764ba2 100%); -fx-background-radius: 15; -fx-padding: 10; -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 10, 0.5, 0, 2);");
         head.setPrefWidth(width);
         head.setPrefHeight(height-15);
         username.setPrefWidth(100);
         username.setPrefHeight(height-35);
         username.setAlignment(Pos.CENTER);
-        username.setTextFill(Paint.valueOf("#FFFFFF"));
+        username.setTextFill(javafx.scene.paint.Paint.valueOf("#FFFFFF"));
+        username.setStyle("-fx-font-weight: bold; -fx-font-size: 12;");
         mes.setPrefWidth(width-100);
         mes.setPrefHeight(height-35);
         mes.setAlignment(Pos.CENTER_LEFT);
-        mes.setTextFill(Paint.valueOf("#FFFFFF"));
+        mes.setTextFill(javafx.scene.paint.Paint.valueOf("#FFFFFF"));
+        mes.setStyle("-fx-font-size: 12; -fx-wrap-text: true;");
         time.setPrefWidth(width);
         time.setPrefHeight(15);
         time.setAlignment(Pos.CENTER);
-        time.setTextFill(Paint.valueOf("#FFFFFF"));
+        time.setTextFill(javafx.scene.paint.Paint.valueOf("#FFFFFF"));
+        time.setStyle("-fx-font-size: 10;");
         //组装
         head.getChildren().add(username);
         head.getChildren().add(mes);
@@ -189,12 +187,15 @@ public class ServerController {
         label.setMinHeight(30);
         label.prefHeight(30);
         label.setAlignment(Pos.CENTER);
-        label.setStyle("-fx-background-color: #363636; -fx-background-radius: 50;");
-        label.setTextFill(Color.WHITE);
+        label.setStyle("-fx-background-color: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%); -fx-background-radius: 15; -fx-text-fill: white; -fx-font-weight: bold; -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 5, 0.3, 0, 1);");
         //给单元格添加右键菜单
         label.setOnContextMenuRequested(event->{
             ContextMenu contextMenu = new ContextMenu();
+            contextMenu.setStyle("-fx-background-color: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%); -fx-background-radius: 10; -fx-border-radius: 10; -fx-border-color: rgba(255,255,255,0.2); -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 10, 0.5, 0, 2);");
             MenuItem item = new MenuItem("下线");
+            item.setStyle("-fx-text-fill: white; -fx-font-weight: bold; -fx-background-color: transparent; -fx-padding: 8 15 8 15;");
+            //item.setOnMouseEntered(e -> item.setStyle("-fx-text-fill: white; -fx-font-weight: bold; -fx-background-color: rgba(255,255,255,0.2); -fx-padding: 8 15 8 15;"));
+            //item.setOnMouseExited(e -> item.setStyle("-fx-text-fill: white; -fx-font-weight: bold; -fx-background-color: transparent; -fx-padding: 8 15 8 15;"));
             contextMenu.getItems().add(item);
             contextMenu.show(label,event.getScreenX(),event.getScreenY());
             item.setOnAction(event1->{

chat-gwng/chat-server/src/main/resources/fxml/index.fxml

@@ -1,25 +1,57 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.TextField?>
-<?import javafx.scene.layout.Pane?>
+<?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
+<?import javafx.scene.effect.DropShadow?>
 
-<Pane fx:id="startPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="space.anyi.chatServer.ui.controller.StartController">
-   <children>
-      <Label alignment="CENTER" contentDisplay="CENTER" layoutX="-1.0" prefHeight="79.0" prefWidth="600.0" text="聊天室 Server" textAlignment="CENTER" textOverrun="CENTER_ELLIPSIS">
+<VBox fx:id="startPane" alignment="CENTER" spacing="30" style="-fx-background-color: linear-gradient(to bottom right, #667eea 0%, #764ba2 100%);" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="space.anyi.chatServer.ui.controller.StartController">
+   <padding>
+      <Insets top="60" right="40" bottom="40" left="40" />
+   </padding>
+   <Label text="聊天室服务器" textFill="WHITE" style="-fx-background-color: rgba(255,255,255,0.2); -fx-background-radius: 20; -fx-padding: 15 30 15 30;">
+      <font>
+         <Font name="System Bold" size="28.0" />
+      </font>
+      <effect>
+         <DropShadow radius="8.0" color="rgba(0,0,0,0.3)" />
+      </effect>
+   </Label>
+   <VBox spacing="20" alignment="CENTER" style="-fx-background-color: rgba(255,255,255,0.1); -fx-background-radius: 15; -fx-padding: 20;">
+      <VBox spacing="15" alignment="CENTER">
+         <Label text="服务器配置" textFill="WHITE">
+            <font>
+               <Font name="System Bold" size="18.0" />
+            </font>
+         </Label>
+         <VBox spacing="10" alignment="CENTER">
+            <Label text="监听端口:" textFill="WHITE">
+               <font>
+                  <Font name="System" size="14.0" />
+               </font>
+            </Label>
+            <TextField fx:id="serverPort" promptText="请输入服务器端口" text="8000" style="-fx-background-color: rgba(255,255,255,0.9); -fx-background-radius: 10; -fx-border-color: rgba(255,255,255,0.3); -fx-border-radius: 10; -fx-padding: 10;" prefHeight="40.0" prefWidth="200.0">
+               <font>
+                  <Font size="14.0" />
+               </font>
+            </TextField>
+         </VBox>
+      </VBox>
+      <Button fx:id="startBu" mnemonicParsing="false" onAction="#startServerHandler" text="启动服务器" style="-fx-background-color: #4CAF50; -fx-text-fill: white; -fx-background-radius: 10; -fx-font-weight: bold; -fx-padding: 12 30 12 30;" prefHeight="45.0" prefWidth="200.0">
          <font>
-            <Font size="28.0" />
+            <Font size="16.0" />
          </font>
-      </Label>
-      <TextField fx:id="serverPort" alignment="CENTER" layoutX="284.0" layoutY="187.0" prefHeight="30.0" prefWidth="81.0" promptText="设置服务端监听的端口" text="8000" />
-      <Button fx:id="startBu" layoutX="218.0" layoutY="233.0" mnemonicParsing="false" onAction="#startServerHandler" prefHeight="71.0" prefWidth="162.0" text="启动服务器" />
-      <Label alignment="BOTTOM_CENTER" layoutX="-1.0" layoutY="304.0" prefHeight="96.0" prefWidth="600.0" text="25计科4(专升本)-2520601429-黄略">
-         <font>
-            <Font size="14.0" />
-         </font>
-      </Label>
-      <Label layoutX="245.0" layoutY="187.0" prefHeight="30.0" prefWidth="39.0" text="端口:" />
-   </children>
-</Pane>
+         <effect>
+            <DropShadow radius="4.0" color="rgba(0,0,0,0.2)" />
+         </effect>
+      </Button>
+   </VBox>
+   <Label text="25计科4(专升本)-2520601429-黄略" textFill="WHITE" style="-fx-background-color: rgba(255,255,255,0.1); -fx-background-radius: 10; -fx-padding: 5 15 5 15;">
+      <font>
+         <Font name="System" size="12.0" />
+      </font>
+   </Label>
+</VBox>

chat-gwng/chat-server/src/main/resources/fxml/server.fxml

@@ -1,80 +1,78 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.ScrollPane?>
 <?import javafx.scene.control.TextArea?>
-<?import javafx.scene.layout.ColumnConstraints?>
-<?import javafx.scene.layout.GridPane?>
-<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.BorderPane?>
+<?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
+<?import javafx.scene.effect.DropShadow?>
 
-<GridPane alignment="CENTER" maxHeight="300.0" maxWidth="600.0" minHeight="400.0" minWidth="600.0" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="space.anyi.chatServer.ui.controller.ServerController">
-  <columnConstraints>
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-    <ColumnConstraints />
-    <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-      <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
-  </columnConstraints>
-  <rowConstraints>
-    <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
-    <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-    <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-  </rowConstraints>
-   <children>
-      <Label alignment="CENTER" maxHeight="80.0" maxWidth="600.0" minHeight="80.0" minWidth="600.0" prefHeight="80.0" prefWidth="600.0" text="聊天室 Server" GridPane.columnIndex="14" GridPane.columnSpan="12" GridPane.rowSpan="2">
-         <font>
-            <Font size="48.0" />
-         </font>
-      </Label>
-      <ScrollPane fx:id="messagePane" prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="14" GridPane.columnSpan="9" GridPane.rowIndex="2" GridPane.rowSpan="4">
-         <content>
-            <VBox alignment="TOP_CENTER" maxWidth="450.0" minHeight="200.0" minWidth="430.0" prefHeight="200.0" prefWidth="400.0" />
-         </content>
-      </ScrollPane>
-      <ScrollPane prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="23" GridPane.columnSpan="3" GridPane.rowIndex="3" GridPane.rowSpan="5">
-         <content>
-            <VBox fx:id="userList" alignment="TOP_CENTER" prefHeight="250.0" prefWidth="150.0" />
-         </content>
-      </ScrollPane>
-      <TextArea fx:id="inputMessage" maxWidth="400.0" minHeight="100.0" minWidth="400.0" prefColumnCount="1" prefHeight="200.0" prefRowCount="1" prefWidth="200.0" promptText="服务器广播信息" GridPane.columnIndex="14" GridPane.columnSpan="8" GridPane.rowIndex="6" GridPane.rowSpan="2">
-         <font>
-            <Font size="14.0" />
-         </font>
-      </TextArea>
-      <Button fx:id="bu" alignment="CENTER" maxHeight="100.0" maxWidth="50.0" minHeight="100.0" minWidth="50.0" mnemonicParsing="false" onMouseClicked="#sendMessage" prefHeight="100.0" prefWidth="50.0" text="发送" GridPane.columnIndex="22" GridPane.rowIndex="6" GridPane.rowSpan="2" />
-      <Label fx:id="onlineLabel" alignment="CENTER" maxHeight="50.0" maxWidth="150.0" minHeight="50.0" minWidth="150.0" prefHeight="50.0" prefWidth="150.0" style="-fx-border-color: #fff;" text="在线人数:0" GridPane.columnIndex="23" GridPane.columnSpan="3" GridPane.rowIndex="2">
-         <font>
-            <Font size="14.0" />
-         </font>
-      </Label>
-   </children>
-</GridPane>
+<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" style="-fx-background-color: linear-gradient(to bottom right, #667eea 0%, #764ba2 100%);" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="space.anyi.chatServer.ui.controller.ServerController">
+   <top>
+      <VBox alignment="CENTER" spacing="10" style="-fx-background-color: rgba(255,255,255,0.1); -fx-background-radius: 0 0 10 10;" BorderPane.alignment="CENTER">
+         <padding>
+            <Insets top="20" right="20" bottom="20" left="20" />
+         </padding>
+         <Label text="聊天室服务器" textFill="WHITE">
+            <font>
+               <Font name="System Bold" size="32.0" />
+            </font>
+            <effect>
+               <DropShadow radius="5.0" color="rgba(0,0,0,0.3)" />
+            </effect>
+         </Label>
+         <Label fx:id="onlineLabel" text="在线人数: 0" textFill="WHITE" style="-fx-background-color: rgba(255,255,255,0.2); -fx-background-radius: 15; -fx-padding: 5 15 5 15;">
+            <font>
+               <Font name="System" size="14.0" />
+            </font>
+         </Label>
+      </VBox>
+   </top>
+   <center>
+      <HBox spacing="20" BorderPane.alignment="CENTER">
+         <padding>
+            <Insets top="10" right="20" bottom="10" left="20" />
+         </padding>
+         <VBox spacing="10" prefWidth="600" maxWidth="600">
+            <Label text="系统消息" textFill="WHITE">
+               <font>
+                  <Font name="System Bold" size="16.0" />
+               </font>
+            </Label>
+            <ScrollPane fx:id="messagePane" style="-fx-background-color: rgba(255,255,255,0.9); -fx-background-radius: 10;" prefHeight="350" prefWidth="580">
+               <content>
+                  <VBox alignment="TOP_LEFT" spacing="5" style="-fx-padding: 10;" />
+               </content>
+            </ScrollPane>
+            <HBox spacing="10" alignment="CENTER_LEFT">
+               <TextArea fx:id="inputMessage" promptText="输入广播消息..." style="-fx-background-color: rgba(255,255,255,0.9); -fx-background-radius: 10; -fx-border-color: rgba(255,255,255,0.3); -fx-border-radius: 10;" prefHeight="60" prefWidth="500" wrapText="true">
+                  <font>
+                     <Font size="14.0" />
+                  </font>
+               </TextArea>
+               <Button fx:id="bu" mnemonicParsing="false" onMouseClicked="#sendMessage" text="发送" style="-fx-background-color: #4CAF50; -fx-text-fill: white; -fx-background-radius: 10; -fx-font-weight: bold;" prefHeight="60" prefWidth="70">
+                  <font>
+                     <Font size="14.0" />
+                  </font>
+               </Button>
+            </HBox>
+         </VBox>
+         <VBox spacing="10" prefWidth="150" maxWidth="150">
+            <Label text="在线用户" textFill="WHITE">
+               <font>
+                  <Font name="System Bold" size="16.0" />
+               </font>
+            </Label>
+            <ScrollPane style="-fx-background-color: rgba(255,255,255,0.9); -fx-background-radius: 10;" prefHeight="350" prefWidth="140">
+               <content>
+                  <VBox fx:id="userList" alignment="TOP_CENTER" spacing="5" style="-fx-padding: 10;" />
+               </content>
+            </ScrollPane>
+         </VBox>
+      </HBox>
+   </center>
+</BorderPane>

chat-gwng/chat-server/src/main/resources/styles/alert.css

@@ -0,0 +1,75 @@
+/* Alert对话框美化样式 */
+.alert {
+    -fx-background-color: linear-gradient(to bottom, #667eea 0%, #764ba2 100%);
+    -fx-background-radius: 15;
+    -fx-border-radius: 15;
+    -fx-border-color: rgba(255,255,255,0.2);
+    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 15, 0.5, 0, 3);
+}
+
+.alert > .dialog-pane {
+    -fx-background-color: transparent;
+}
+
+.alert .header-panel {
+    -fx-background-color: transparent;
+    -fx-background-radius: 15 15 0 0;
+}
+
+.alert .header-panel .label {
+    -fx-text-fill: white;
+    -fx-font-weight: bold;
+    -fx-font-size: 16;
+}
+
+.alert .content {
+    -fx-background-color: transparent;
+    -fx-text-fill: white;
+    -fx-font-size: 14;
+}
+
+.alert .content .label {
+    -fx-text-fill: white;
+}
+
+.alert .button-bar {
+    -fx-background-color: transparent;
+}
+
+.alert .button-bar .button {
+    -fx-background-color: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
+    -fx-background-radius: 10;
+    -fx-border-radius: 10;
+    -fx-text-fill: white;
+    -fx-font-weight: bold;
+    -fx-padding: 8 15 8 15;
+    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 5, 0.3, 0, 1);
+}
+
+.alert .button-bar .button:hover {
+    -fx-background-color: linear-gradient(to bottom, #667eea 0%, #764ba2 100%);
+    -fx-scale-x: 1.05;
+    -fx-scale-y: 1.05;
+}
+
+.alert .button-bar .button:pressed {
+    -fx-scale-x: 0.95;
+    -fx-scale-y: 0.95;
+}
+
+/* 不同类型的Alert样式 */
+.alert:warning .header-panel {
+    -fx-background-color: linear-gradient(to bottom, #ff9966 0%, #ff5e62 100%);
+}
+
+.alert:error .header-panel {
+    -fx-background-color: linear-gradient(to bottom, #ff416c 0%, #ff4b2b 100%);
+}
+
+.alert:information .header-panel {
+    -fx-background-color: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
+}
+
+.alert:confirmation .header-panel {
+    -fx-background-color: linear-gradient(to bottom, #56ab2f 0%, #a8e6cf 100%);
+}