Complete the basic UI

2026-02-13 16:41:48 +08:00 · 2025-06-07 11:42:23 +08:00
parent 0811720e4d
commit 44a1452251
10 changed files with 406 additions and 3 deletions
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@ -32,8 +32,9 @@ if(ANDROID)
        MANUAL_FINALIZATION
        ${PROJECT_SOURCES}
    )
+
    # 指定自定义的 Android 部署目录
-    set_property(TARGET ClientChat APPEND PROPERTY QT_ANDROID_PACKAGE_SOURCE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/android")
+    # set_property(TARGET ClientChat APPEND PROPERTY QT_ANDROID_PACKAGE_SOURCE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/android")
 else()
    if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)
        qt_add_executable(ClientChat
--- a/debug.h
+++ b/debug.h
@ -3,6 +3,8 @@

 #define TEST_UI 1

+#define TEST_SKIP_LOGIN 1
+
 #define TEST_GROUP_SESSION_DETAIL 1

 #endif // DEBUG_H
--- a/loginwidget.cpp
+++ b/loginwidget.cpp
@ -0,0 +1,123 @@
+#include "loginwidget.h"
+
+LoginWidget::LoginWidget(QWidget *parent)
+	: QWidget(parent)
+{
+	//设置本窗口的基本属性
+	this->setFixedSize(400, 350);
+	this->setWindowTitle("登录");
+	this->setWindowIcon(QIcon(":/resource/image/logo.png"));
+	this->setStyleSheet("QWidget { background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); }");
+	this->setAttribute(Qt::WA_DeleteOnClose);
+
+	//创建布局管理器
+    QGridLayout* layout = new QGridLayout();
+    layout->setSpacing(0);
+    layout->setContentsMargins(50, 0, 50, 0);
+    this->setLayout(layout);
+
+    // 创建标题
+    titleLabel = new QLabel();
+    titleLabel->setText("登录");
+    titleLabel->setAlignment(Qt::AlignCenter);
+    titleLabel->setFixedHeight(50);
+    titleLabel->setStyleSheet("QLabel { font-size: 40px; font-weight: 600; }");
+
+    // 创建用户名输入框
+    QString editStyle = "QLineEdit { border: none; border-radius: 10px; font-size: 20px; background-color: rgb(240, 240, 240); padding-left:5px; }";
+    usernameEdit = new QLineEdit();
+    usernameEdit->setFixedHeight(40);
+    usernameEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
+    usernameEdit->setPlaceholderText("输入用户名");
+    usernameEdit->setStyleSheet(editStyle);
+
+    // 创建密码输入框
+    passwordEdit = new QLineEdit();
+    passwordEdit->setFixedHeight(40);
+    passwordEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
+    passwordEdit->setPlaceholderText("输入密码");
+    passwordEdit->setStyleSheet(editStyle);
+    passwordEdit->setEchoMode(QLineEdit::Password);
+
+    // 创建验证码输入框
+    verifyCodeEdit = new QLineEdit();
+    verifyCodeEdit->setFixedHeight(40);
+    verifyCodeEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
+    verifyCodeEdit->setPlaceholderText("输入验证码");
+    verifyCodeEdit->setStyleSheet(editStyle);
+
+    // 7. 创建显示验证码图片的控件 (此处先用 QPushButton 来表示一下, 后续进一步编写这里的逻辑)
+    //    后续会自定义 QWidget, 通过画图 api 来实现这里的验证码功能.
+     QPushButton* verifyCodeWidget = new QPushButton();
+     verifyCodeWidget->setText("验证码");
+     verifyCodeWidget->setStyleSheet("QWidget { border: none; }");
+     //verifyCodeWidget = new VerifyCodeWidget(this);
+
+    // 创建登录按钮
+    submitBtn = new QPushButton();
+    submitBtn->setText("登录");
+    submitBtn->setFixedHeight(40);
+    submitBtn->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
+    QString btnGreenStyle = "QPushButton { border: none; border-radius: 10px; background-color: rgb(44, 182, 61); color: rgb(255, 255, 255); }";
+    btnGreenStyle += "QPushButton:pressed { background-color: rgb(240, 240, 240); }";
+    submitBtn->setStyleSheet(btnGreenStyle);
+
+    // 创建切换到手机号登录按钮
+    phoneModeBtn = new QPushButton();
+    phoneModeBtn->setFixedSize(100, 40);
+    phoneModeBtn->setText("手机号登录");
+    QString btnWhiteStyle = "QPushButton { border: none; border-radius: 10px; background-color: transparent; }";
+    btnWhiteStyle += "QPushButton:pressed { background-color: rgb(240, 240, 240); }";
+    phoneModeBtn->setStyleSheet(btnWhiteStyle);
+
+    //  创建切换模式(登录和注册)按钮
+    switchModeBtn = new QPushButton();
+    switchModeBtn->setFixedSize(100, 40);
+    switchModeBtn->setText("注册");
+    switchModeBtn->setStyleSheet(btnWhiteStyle);
+
+    // 添加到布局管理器中
+    layout->addWidget(titleLabel, 0, 0, 1, 5);
+    layout->addWidget(usernameEdit, 1, 0, 1, 5);
+    layout->addWidget(passwordEdit, 2, 0, 1, 5);
+    layout->addWidget(verifyCodeEdit, 3, 0, 1, 4);
+    layout->addWidget(verifyCodeWidget, 3, 4, 1, 1);
+    layout->addWidget(submitBtn, 4, 0, 1, 5);
+    layout->addWidget(phoneModeBtn, 5, 0, 1, 1);
+    layout->addWidget(switchModeBtn, 5, 4, 1, 1);
+
+
+    // 处理信号槽
+    //connect(switchModeBtn, &QPushButton::clicked, this, &LoginWidget::switchMode);
+    connect(switchModeBtn, &QPushButton::clicked, this, [=]() {
+        if (isLoginMode) {
+            //切换到注册模式
+            this->setWindowTitle("注册");
+            titleLabel->setText("注册");
+            submitBtn->setText("注册");
+            switchModeBtn->setText("登录");
+        }
+        else {
+            //切换到登录模式
+            this->setWindowTitle("登录");
+            titleLabel->setText("登录");
+            submitBtn->setText("登录");
+            switchModeBtn->setText("注册");
+        }
+        isLoginMode = !isLoginMode;
+        });
+
+    connect(phoneModeBtn, &QPushButton::clicked, this, [=]() {
+        // 此处还可以把 isLoginMode 这个值传到新的窗口中, 让新的窗口决定自己是登录状态还是注册状态. 大家自行尝试实现.
+        PhoneLoginWidget* phoneLoginWidget = new PhoneLoginWidget(nullptr);
+        phoneLoginWidget->show();
+
+        // 关闭当前窗口
+        this->close();
+        });
+
+    //connect(submitBtn, &QPushButton::clicked, this, &LoginWidget::clickSubmitBtn);
+    connect(submitBtn, &QPushButton::clicked, this, [=]() {
+        Toast::showMessage("Just a test message...");
+        });
+}
--- a/loginwidget.h
+++ b/loginwidget.h
@ -0,0 +1,37 @@
+#pragma once
+
+#include <QWidget>
+#include <QGridLayout>
+#include <QLabel>
+#include <QLineEdit>
+#include <QPushButton>
+
+#include "phoneloginwidget.h"
+#include "toast.h"
+
+class LoginWidget : public QWidget
+{
+	Q_OBJECT
+
+public:
+	explicit LoginWidget(QWidget *parent);
+
+	/*void switchMode();
+
+	void clickSubmitBtn();
+	void userLoginDone(bool ok, const QString& reason);
+	void userRegisterDone(bool ok, const QString& reason);*/
+
+private:
+	bool isLoginMode = true;
+	QLabel* titleLabel;
+
+	QLineEdit* usernameEdit;
+	QLineEdit* passwordEdit;
+	QLineEdit* verifyCodeEdit;
+	//VerifyCodeWidget* verifyCodeWidget;
+
+	QPushButton* submitBtn;
+	QPushButton* phoneModeBtn;
+	QPushButton* switchModeBtn;
+};
--- a/main.cpp
+++ b/main.cpp
@ -3,6 +3,7 @@
 #include <QStyleFactory>

 #include "model/data.h"
+#include "loginwidget.h" 

 int main(int argc, char *argv[])
 {
@ -10,7 +11,7 @@ int main(int argc, char *argv[])

    qputenv("QT_QPA_PLATFORM", "windows:darkmode=0");

-    LOG() << "Hello";
+#if TEST_SKIP_LOGIN

    QPalette palette;
    palette.setColor(QPalette::WindowText, Qt::black);// 窗口文字颜色
@ -18,5 +19,14 @@ int main(int argc, char *argv[])

    MainWidget* w = MainWidget::getInstance();
    w->show();
+#else
+    LoginWidget* loginWidget = new LoginWidget(nullptr);
+    loginWidget->show();
+#endif
+
+    LOG() << "Hello";
+
+    /*MainWidget* w = MainWidget::getInstance();
+    w->show();*/
    return a.exec();
 }
--- a/mainwidget.cpp
+++ b/mainwidget.cpp
@ -63,7 +63,7 @@ void MainWidget::initMainWindow()

    windowLeft->setFixedWidth(70);
    windowMid->setFixedWidth(320);
-    windowRight->setMinimumWidth(900);
+    windowRight->setMinimumWidth(600);

    windowLeft->setStyleSheet("QWidget { background-color: rgb(46, 46, 46); }");
    windowMid->setStyleSheet("QWidget { background-color: rgb(247, 247, 247); }");
--- a/phoneloginwidget.cpp
+++ b/phoneloginwidget.cpp
@ -0,0 +1,116 @@
+#include "phoneloginwidget.h"
+
+PhoneLoginWidget::PhoneLoginWidget(QWidget *parent)
+	: QWidget(parent)
+{
+    // 1. 设置窗口的基本属性
+    this->setFixedSize(400, 350);
+    this->setWindowTitle("登录");
+    this->setWindowIcon(QIcon(":/resource/image/logo.png"));
+    this->setStyleSheet("QWidget { background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); }");
+    this->setAttribute(Qt::WA_DeleteOnClose);
+
+    // 2. 创建核心布局管理器
+    QGridLayout* layout = new QGridLayout();
+    layout->setSpacing(10);
+    layout->setContentsMargins(50, 0, 50, 0);
+    this->setLayout(layout);
+
+    // 3. 创建标题
+    titleLabel = new QLabel();
+    titleLabel->setText("登录");
+    titleLabel->setFixedHeight(50);
+    titleLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
+    titleLabel->setStyleSheet("QLabel { font-size: 40px; font-weight: 600; }");
+    titleLabel->setAlignment(Qt::AlignCenter);
+
+    // 4. 创建手机号输入框
+    QString editStyle = "QLineEdit { border: none; background-color: rgb(240, 240, 240); font-size: 20px; border-radius: 10px; padding-left: 5px;}";
+    phoneEdit = new QLineEdit();
+    phoneEdit->setPlaceholderText("输入手机号");
+    phoneEdit->setFixedHeight(40);
+    phoneEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
+    phoneEdit->setStyleSheet(editStyle);
+
+    // 5. 创建验证码输入框
+    verifyCodeEdit = new QLineEdit();
+    verifyCodeEdit->setPlaceholderText("输入验证码");
+    verifyCodeEdit->setFixedHeight(40);
+    verifyCodeEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
+    verifyCodeEdit->setStyleSheet(editStyle);
+
+    // 6. 创建发送验证码按钮
+    QString btnWhiteStyle = "QPushButton { border: none; border-radius: 10px; background-color: transparent; }";
+    btnWhiteStyle += "QPushButton:pressed { background-color: rgb(240, 240, 240); }";
+    sendVerifyCodeBtn = new QPushButton();
+    sendVerifyCodeBtn->setFixedSize(100, 40);
+    sendVerifyCodeBtn->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
+    sendVerifyCodeBtn->setText("发送验证码");
+    sendVerifyCodeBtn->setStyleSheet(btnWhiteStyle);
+
+    // 7. 创建提交按钮
+    submitBtn = new QPushButton();
+    submitBtn->setFixedHeight(40);
+    submitBtn->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
+    submitBtn->setText("登录");
+    QString btnGreenStyle = "QPushButton { border: none; border-radius: 10px; background-color: rgb(44, 182, 61); color: rgb(255, 255, 255); }";
+    btnGreenStyle += "QPushButton:pressed { background-color: rgb(240, 240, 240); }";
+    submitBtn->setStyleSheet(btnGreenStyle);
+
+    // 8. 创建 "切换到用户名" 模式按钮
+    QPushButton* userModeBtn = new QPushButton();
+    userModeBtn->setFixedSize(100, 40);
+    userModeBtn->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
+    userModeBtn->setText("切换到用户名");
+    userModeBtn->setStyleSheet(btnWhiteStyle);
+
+    // 9. 切换登录注册模式
+    switchModeBtn = new QPushButton();
+    switchModeBtn->setFixedSize(100, 40);
+    switchModeBtn->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
+    switchModeBtn->setText("注册");
+    switchModeBtn->setStyleSheet(btnWhiteStyle);
+
+    // 10. 添加到布局管理器
+    layout->addWidget(titleLabel, 0, 0, 1, 5);
+    layout->addWidget(phoneEdit, 1, 0, 1, 5);
+    layout->addWidget(verifyCodeEdit, 2, 0, 1, 4);
+    layout->addWidget(sendVerifyCodeBtn, 2, 4, 1, 1);
+    layout->addWidget(submitBtn, 3, 0, 1, 5);
+    layout->addWidget(userModeBtn, 4, 0, 1, 1);
+    layout->addWidget(switchModeBtn, 4, 4, 1, 1);
+
+    // 11. 添加信号槽
+    //connect(switchModeBtn, &QPushButton::clicked, this, &PhoneLoginWidget::switchMode);
+    connect(switchModeBtn, &QPushButton::clicked, this, [=]() {
+        if (isLoginMode) {
+            //切换到注册模式
+            this->setWindowTitle("注册");
+            titleLabel->setText("注册");
+            submitBtn->setText("注册");
+            switchModeBtn->setText("登录");
+        }
+        else {
+            //切换到登录模式
+            this->setWindowTitle("登录");
+            titleLabel->setText("登录");
+            submitBtn->setText("登录");
+            switchModeBtn->setText("注册");
+        }
+        isLoginMode = !isLoginMode;
+        });
+
+    connect(userModeBtn, &QPushButton::clicked, this, [=]() {
+        LoginWidget* loginWidget = new LoginWidget(nullptr);
+        loginWidget->show();
+        this->close();
+        });
+
+    //connect(sendVerifyCodeBtn, &QPushButton::clicked, this, &PhoneLoginWidget::sendVerifyCode);
+
+    //timer = new QTimer(this);
+    //connect(timer, &QTimer::timeout, this, &PhoneLoginWidget::countDown);
+
+    //connect(submitBtn, &QPushButton::clicked, this, &PhoneLoginWidget::clickSubmitBtn);
+
+}
--- a/phoneloginwidget.h
+++ b/phoneloginwidget.h
@ -0,0 +1,40 @@
+#pragma once
+
+#include <QWidget>
+#include <QGridLayout>
+#include <QLabel>
+#include <QLineEdit>
+#include <QPushButton>
+
+#include "loginwidget.h"
+
+class PhoneLoginWidget : public QWidget
+{
+	Q_OBJECT
+
+public:
+	PhoneLoginWidget(QWidget *parent);
+
+    //void sendVerifyCode();
+    //void sendVerifyCodeDone();
+
+    //void clickSubmitBtn();
+    //void phoneLoginDone(bool ok, const QString& reason);
+    //void phoneRegisterDone(bool ok, const QString& reason);
+
+    //void countDown();
+    //void switchMode();
+
+private:
+    QLineEdit* phoneEdit;
+    QPushButton* sendVerifyCodeBtn;
+    QLineEdit* verifyCodeEdit;
+    QLabel* titleLabel;
+    QPushButton* submitBtn;
+    QPushButton* switchModeBtn;
+
+    bool isLoginMode = true;
+    QString currentPhone = "";    // 记录是使用哪个手机号发送的验证码
+    QTimer* timer;
+    int leftTime = 30;
+};
--- a/toast.cpp
+++ b/toast.cpp
@ -0,0 +1,52 @@
+#include "toast.h"
+
+Toast::Toast(const QString& text)
+{
+    // 1. 设置窗口的基本参数
+    this->setFixedSize(600, 120);
+    this->setWindowTitle("消息通知");
+    this->setWindowIcon(QIcon(":/resource/image/logo.png"));
+    this->setAttribute(Qt::WA_DeleteOnClose);
+    this->setStyleSheet("QDialog { background-color: rgb(255, 255, 255); }");
+    // 去掉窗口的标题栏
+    this->setWindowFlags(Qt::FramelessWindowHint);
+
+    // 2. 先考虑一下窗口的位置.
+    // 获取到整个屏幕的尺寸, 通过 primaryScreen 来获取.
+    QScreen* screen = QApplication::primaryScreen();
+    int width = screen->size().width();
+    int height = screen->size().height();
+    int x = (width - this->width()) / 2;
+    int y = height - this->height() - 100;	// 此处的 100 是窗口底边距离屏幕底边的间隔
+    this->move(x, y);
+
+    // 3. 添加一个布局管理器
+    QVBoxLayout* layout = new QVBoxLayout();
+    layout->setSpacing(0);
+    layout->setContentsMargins(0, 0, 0, 0);
+    this->setLayout(layout);
+
+    // 4. 创建显示文本的 Label
+    QLabel* label = new QLabel();
+    label->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
+    label->setAlignment(Qt::AlignCenter);
+    label->setStyleSheet("QLabel { font-size: 25px; color: rgb(0, 0, 0); }");
+    label->setText(text);
+    layout->addWidget(label);
+
+    // 5. 实现 2s 之后自动关闭.
+    QTimer* timer = new QTimer(this);
+    connect(timer, &QTimer::timeout, this, [=]() {
+        timer->stop();
+        // 核心代码, 关闭当前窗口
+        this->close();
+        });
+    timer->start(2000);
+
+}
+
+void Toast::showMessage(const QString& text)
+{
+    Toast* toast = new Toast(text);
+    toast->show();
+}
--- a/toast.h
+++ b/toast.h
@ -0,0 +1,22 @@
+#pragma once
+
+#include <QDialog>
+#include <QWidget>
+#include <QApplication>
+#include <QScreen>
+#include <QVBoxLayout>
+#include <QLabel>
+#include <QTimer>
+
+class Toast : public QDialog
+{
+	Q_OBJECT
+
+public:
+	//此处并不需要指定父窗口，全局通知的父窗口就是桌面
+	Toast(const QString& text);
+
+	//并不需要手动的来new这个对象，而是通过showMessage来弹出
+	static void showMessage(const QString& text);
+	
+};