1

electron-vue-template/src/renderer/components/auth/LoginDialog.vue

@@ -63,21 +63,24 @@ function showRegister() {
 
 <template>
   <el-dialog
-    title="用户登录"
+    title=""
     v-model="visible"
     :close-on-click-modal="false"
-    width="400px"
-    center>
-    <div style="text-align: center; padding: 20px 0;">
-      <div style="margin-bottom: 30px; color: #666;">
-        <el-icon size="48" color="#409EFF"><User /></el-icon>
-        <p style="margin-top: 15px; font-size: 16px;">请登录以使用系统功能</p>
+    width="360px"
+    center
+    class="auth-dialog">
+    <div style="padding: 20px 0;">
+      <div style="text-align: center; margin-bottom: 16px; color: #666;">
+        <img src="/icon/image.png" alt="logo" class="auth-logo" />
+      </div>
+      <div class="auth-title-wrap">
+        <h3 class="auth-title">账号登录</h3>
+        <p class="auth-subtitle">登录账户以获取完整服务体验</p>
       </div>
 
       <el-input
         v-model="authForm.username"
         placeholder="请输入用户名"
-        prefix-icon="User"
         size="large"
         style="margin-bottom: 15px;"
         :disabled="authLoading"
@@ -101,16 +104,9 @@ function showRegister() {
           :loading="authLoading"
           :disabled="!authForm.username || !authForm.password || authLoading"
           @click="handleAuth"
-          style="width: 120px; margin-right: 10px;">
+          style="width: 100%;">
           登录
         </el-button>
-        <el-button
-          size="large"
-          :disabled="authLoading"
-          @click="cancelAuth"
-          style="width: 120px;">
-          取消
-        </el-button>
       </div>
 
       <div style="margin-top: 20px; text-align: center;">
@@ -120,4 +116,39 @@ function showRegister() {
       </div>
     </div>
   </el-dialog>
-</template>
+</template>
+
+<style scoped>
+.auth-logo {
+  width: 160px;
+  height: auto;
+}
+
+.auth-dialog {
+  --el-color-primary: #1677FF;
+}
+
+.auth-dialog :deep(.el-button--primary) {
+  background-color: #1677FF;
+  border-color: #1677FF;
+}
+
+.auth-title-wrap {
+  margin-bottom: 12px;
+}
+
+.auth-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #1f1f1f;
+  text-align: left;
+}
+
+.auth-subtitle {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: #8c8c8c;
+  text-align: left;
+}
+</style>

electron-vue-template/src/renderer/components/auth/RegisterDialog.vue

@@ -85,21 +85,24 @@ function backToLogin() {
 
 <template>
   <el-dialog
-    title="账号注册"
+    title=""
     v-model="visible"
     :close-on-click-modal="false"
-    width="450px"
-    center>
-    <div style="text-align: center; padding: 20px 0;">
-      <div style="margin-bottom: 20px; color: #666;">
-        <el-icon size="48" color="#67C23A"><User /></el-icon>
-        <p style="margin-top: 15px; font-size: 16px;">创建新账号</p>
+    width="380px"
+    center
+    class="auth-dialog">
+    <div style="padding: 20px 0;">
+      <div style="text-align: center; margin-bottom: 16px; color: #666;">
+        <img src="/icon/image.png" alt="logo" class="auth-logo" />
+      </div>
+      <div class="auth-title-wrap">
+        <h3 class="auth-title">创建账号</h3>
+        <p class="auth-subtitle">创建账号以获取完整服务体验</p>
       </div>
 
       <el-input
         v-model="registerForm.username"
         placeholder="请输入用户名"
-        prefix-icon="User"
         size="large"
         style="margin-bottom: 15px;"
         :disabled="registerLoading"
@@ -135,21 +138,14 @@ function backToLogin() {
 
       <div>
         <el-button
-          type="success"
+          type="primary"
           size="large"
           :loading="registerLoading"
           :disabled="!canRegister || registerLoading"
           @click="handleRegister"
-          style="width: 120px; margin-right: 10px;">
+          style="width: 100%;">
           注册
         </el-button>
-        <el-button
-          size="large"
-          :disabled="registerLoading"
-          @click="cancelRegister"
-          style="width: 120px;">
-          取消
-        </el-button>
       </div>
 
       <div style="margin-top: 20px; text-align: center;">
@@ -159,4 +155,38 @@ function backToLogin() {
       </div>
     </div>
   </el-dialog>
-</template>
+</template>
+<style scoped>
+.auth-logo {
+  width: 160px;
+  height: auto;
+}
+
+.auth-dialog {
+  --el-color-primary: #1677FF;
+}
+
+.auth-dialog :deep(.el-button--primary) {
+  background-color: #1677FF;
+  border-color: #1677FF;
+}
+
+.auth-title-wrap {
+  margin-bottom: 12px;
+}
+
+.auth-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #1f1f1f;
+  text-align: left;
+}
+
+.auth-subtitle {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: #8c8c8c;
+  text-align: left;
+}
+</style>