feat:register

myapp/src/app/tab4/tab4-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { Tab4Page } from './tab4.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: Tab4Page
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class Tab4PageRoutingModule {}

myapp/src/app/tab4/tab4.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { Tab4PageRoutingModule } from './tab4-routing.module';
+
+import { Tab4Page } from './tab4.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    Tab4PageRoutingModule
+  ],
+  declarations: [Tab4Page]
+})
+export class Tab4PageModule {}

myapp/src/app/tab4/tab4.page.html

@@ -0,0 +1,128 @@
+<ion-header [translucent]="true">
+  <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>明律通 - AI法律顾问</title>
+    <!-- 引入国内CDN资源 -->
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <div class="container">
+        <!-- 我的页面 -->
+        <div class="page" id="profile-page">
+            <!-- 个人资料区域 -->
+            <div class="profile-section">
+                <div class="profile-bg"></div>
+                <div class="profile-avatar">U</div>
+                <div class="profile-name">用户名</div>
+                <div class="profile-email">user&#64;example.com</div>
+            </div>
+            
+            <!-- 功能入口网格 -->
+            <div class="features-section">
+                <div class="section-title">
+                    常用功能
+                    <a href="#">管理</a>
+                </div>
+                <div class="features-grid">
+                    <div class="feature-card">
+                        <div class="feature-icon">
+                            <i class="fas fa-file-alt"></i>
+                        </div>
+                        <div class="feature-title">我的文书</div>
+                        <div class="feature-desc">查看和管理您的法律文书</div>
+                    </div>                   
+                    <div class="feature-card">
+                        <div class="feature-icon">
+                            <i class="fas fa-star"></i>
+                        </div>
+                        <div class="feature-title">收藏夹</div>
+                        <div class="feature-desc">您收藏的法律知识和案例</div>
+                    </div>
+                </div>
+            </div>
+            
+            
+            
+            <!-- 律师入驻区域 -->
+            <div class="lawyer-section">
+                <div class="lawyer-header">
+                    <div class="lawyer-title">律师入驻</div>
+                    <div class="lawyer-status" id="lawyer-status">未入驻</div>
+                </div>
+                <button class="lawyer-btn" id="apply-lawyer">
+                    立即申请入驻
+                </button>
+            </div>
+            
+            <!-- 设置区域 -->
+            <div class="settings-section">
+                <ul class="settings-list">
+                    <li class="setting-item">
+                        <div class="setting-icon">
+                            <i class="fas fa-user-shield"></i>
+                        </div>
+                        <div class="setting-content">
+                            <div class="setting-title">账户安全</div>
+                            <div class="setting-desc">修改密码、设置密保</div>
+                        </div>
+                        <div class="setting-arrow">
+                            <i class="fas fa-chevron-right"></i>
+                        </div>
+                    </li>
+                    <li class="setting-item">
+                        <div class="setting-icon">
+                            <i class="fas fa-bell"></i>
+                        </div>
+                        <div class="setting-content">
+                            <div class="setting-title">消息通知</div>
+                            <div class="setting-desc">设置接收通知类型</div>
+                        </div>
+                        <div class="setting-arrow">
+                            <i class="fas fa-chevron-right"></i>
+                        </div>
+                    </li>
+                    <li class="setting-item">
+                        <div class="setting-icon">
+                            <i class="fas fa-cog"></i>
+                        </div>
+                        <div class="setting-content">
+                            <div class="setting-title">通用设置</div>
+                            <div class="setting-desc">消息提醒、隐私设置</div>
+                        </div>
+                        <div class="setting-arrow">
+                            <i class="fas fa-chevron-right"></i>
+                        </div>
+                    </li>
+                    <li class="setting-item">
+                        <div class="setting-icon">
+                            <i class="fas fa-question-circle"></i>
+                        </div>
+                        <div class="setting-content">
+                            <div class="setting-title">帮助中心</div>
+                            <div class="setting-desc">常见问题与解答</div>
+                        </div>
+                        <div class="setting-arrow">
+                            <i class="fas fa-chevron-right"></i>
+                        </div>
+                    </li>
+                    <li class="setting-item">
+                        <div class="setting-icon">
+                            <i class="fas fa-sign-out-alt"></i>
+                        </div>
+                        <div class="setting-content">
+                            <div class="setting-title">退出登录</div>
+                            <div class="setting-desc">安全退出当前账号</div>
+                        </div>
+                        <div class="setting-arrow">
+                            <i class="fas fa-chevron-right"></i>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        
+        
+    </div>
+</ion-content>

myapp/src/app/tab4/tab4.page.scss

@@ -0,0 +1,251 @@
+ion-content {
+    --background: linear-gradient(135deg, #F8F9FF, #E6F7FF);
+    background-size: cover;   
+    --padding-start: 16px;  
+    --padding-end: 16px; 
+     
+}
+
+        :root {
+            --primary: #3A5FE5;
+            --secondary: #00C4A1;
+            --danger: #FF4D4F;
+            --bg: #F8F9FF;
+            --text: #2D3748;
+            --card: #FFFFFF;
+            --border: #E2E8F0;
+            --gray: #94A3B8;
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+        }
+        
+        .container {
+            width: 100%;
+            max-width: 480px;
+            margin: 0 auto;
+            padding: 15px;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        /* 顶部区域 */
+        .profile-section {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 30px 0 20px;
+            background: linear-gradient(135deg, #6A8EFF, #3A5FE5);
+            border-radius: 0 0 30px 30px;
+            margin-bottom: 20px;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .profile-bg {
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="2"/></svg>');
+            background-size: 100px 100px;
+            animation: rotate 60s linear infinite;
+            z-index: 0;
+        }
+        
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        
+        .profile-avatar {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            background-color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color:#3A5FE5;
+            font-size: 32px;
+            margin-bottom: 10px;
+            position: relative;
+            z-index: 1;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        
+        .profile-name {
+            color: white;
+            font-size: 18px;
+            font-weight: bold;
+            margin-bottom: 5px;
+            z-index: 1;
+        }
+        
+        .profile-email {
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 14px;
+            z-index: 1;
+        }
+        
+        /* 功能卡片区域 */
+        .features-section {
+            margin-bottom: 20px;
+        }
+        
+        .section-title {
+            font-size: 18px;
+            font-weight: bold;
+            margin-bottom: 15px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: var(--text);
+        }
+        
+        .section-title a {
+            font-size: 14px;
+            font-weight: normal;
+            color:#3A5FE5;
+            text-decoration: none;
+        }
+        
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 15px;
+        }
+        
+        .feature-card {
+            background: white;
+            border-radius: 12px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+        
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+        }
+        
+        .feature-icon {
+            font-size: 28px;
+            color: #3A5FE5;
+            margin-bottom: 10px;
+        }
+        
+        .feature-title {
+            font-size: 14px;
+            color: var(--text);
+            text-align: center;
+            margin-bottom: 8px;
+        }
+        
+        .feature-desc {
+            font-size: 12px;
+            color: var(--gray);
+            text-align: center;
+            line-height: 1.4;
+        }
+        
+        /* 律师入驻区域 */
+        .lawyer-section {
+            background: white;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        }
+        
+        .lawyer-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        
+        .lawyer-title {
+            font-size: 16px;
+            font-weight: bold;
+            color: var(--text);
+        }
+        
+        .lawyer-status {
+            font-size: 12px;
+            color: #3A5FE5;
+            padding: 3px 8px;
+            border-radius: 12px;
+            background: rgba(58, 95, 229, 0.1);
+        }
+        
+        .lawyer-btn {
+            width: 100%;
+            background: #3A5FE5;
+            color: white;
+            border: none;
+            padding: 12px;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+        
+        .lawyer-btn:hover {
+            background: #2A4BCF;
+        }
+        
+        /* 设置区域 */
+        .settings-section {
+            margin-bottom: 20px;
+        }
+        
+        .settings-list {
+            list-style: none;
+        }
+        
+        .setting-item {
+            display: flex;
+            align-items: center;
+            padding: 15px;
+            background: white;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        }
+        
+        .setting-icon {
+            font-size: 20px;
+            color: #3A5FE5;
+            margin-right: 15px;
+        }
+        
+        .setting-content {
+            flex: 1;
+        }
+        
+        .setting-title {
+            font-size: 16px;
+            color: var(--text);
+            margin-bottom: 4px;
+        }
+        
+        .setting-desc {
+            font-size: 12px;
+            color: #94A3B8;
+        }
+        
+        .setting-arrow {
+            font-size: 16px;
+            color: #94A3B8;
+        }

myapp/src/app/tab4/tab4.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Tab4Page } from './tab4.page';
+
+describe('Tab4Page', () => {
+  let component: Tab4Page;
+  let fixture: ComponentFixture<Tab4Page>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Tab4Page);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

myapp/src/app/tab4/tab4.page.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tab4',
+  templateUrl: 'tab4.page.html',
+  styleUrls: ['tab4.page.scss'],
+  standalone: false,
+})
+export class Tab4Page {
+
+  constructor() {}
+
+}
+

myapp/src/lib/user/page-mine/page-mine.component.html

@@ -34,9 +34,27 @@
       
       <!-- 未登录状态显示 -->
       @if(!currentUser?.id) {
-      <ion-button class="btn-primary" (click)="login()">
-        登入用户 abc 1234
-      </ion-button>
+      <div class="login-form">
+        <ion-item class="login-input">
+          <ion-input 
+            type="text" 
+            placeholder="用户名" 
+            [(ngModel)]="username"
+          ></ion-input>
+        </ion-item>
+        
+        <ion-item class="login-input">
+          <ion-input 
+            type="password" 
+            placeholder="密码" 
+            [(ngModel)]="password"
+          ></ion-input>
+        </ion-item>
+        
+        <ion-button class="btn-primary" expand="block" (click)="login()">
+          登录
+        </ion-button>
+      </div>
       }
     </div>
     
@@ -132,4 +150,4 @@
       <ion-text>© 2023 明律通 - AI法律顾问平台</ion-text>
     </div>
   </div>
-</ion-content>
+</ion-content>

myapp/src/lib/user/page-mine/page-mine.component.scss

@@ -1,4 +1,3 @@
-/* 在对应的SCSS文件中添加以下样式 */
 .profile-content {
   --background: linear-gradient(135deg, #F8F9FF, #E6F7FF);
   
@@ -77,6 +76,46 @@
     margin-bottom: 15px;
   }
   
+  /* 登录表单样式 */
+  .login-form {
+    width: 100%;
+    max-width: 300px;
+    margin-top: 20px;
+    z-index: 1;
+    position: relative;
+    
+    ion-item {
+      --background: rgba(255, 255, 255, 0.2);
+      --border-radius: 8px;
+      --padding-start: 15px;
+      --padding-end: 15px;
+      margin-bottom: 15px;
+      --highlight-color-focused: white;
+      
+      ion-input {
+        --color: white;
+        --placeholder-color: rgba(255, 255, 255, 0.7);
+        --placeholder-opacity: 1;
+        --padding-top: 12px;
+        --padding-bottom: 12px;
+      }
+    }
+    
+    ion-button {
+      --background: white;
+      --color: #3A5FE5;
+      --border-radius: 8px;
+      height: 48px;
+      font-weight: bold;
+      margin-top: 10px;
+      --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      
+      &:hover {
+        --background: #f0f0f0;
+      }
+    }
+  }
+  
   /* 按钮样式 */
   .btn-primary {
     --background: white;
@@ -215,20 +254,17 @@
   }
   
   .lawyer-btn {
-            width: 100%;
-            color: white;
-            border: none;           
-            border-radius: 8px;
-            font-size: 16px;
-            font-weight: bold;
-            cursor: pointer;
-        }
-        
-        .lawyer-btn:hover {
-            background: #2A4BCF;
-        }
-
-  
+    --background: #3A5FE5;
+    --color: white;
+    --border-radius: 8px;
+    height: 48px;
+    font-weight: bold;
+    width: 100%;
+    
+    &:hover {
+      --background: #2A4BCF;
+    }
+  }
   
   /* 设置区域 */
   .settings-section {

myapp/src/lib/user/page-mine/page-mine.component.ts

@@ -7,7 +7,11 @@ import { IonAvatar,
   IonList, 
   IonItem, 
   IonLabel, 
-  IonBadge ,IonContent, AlertController,ModalController } from '@ionic/angular/standalone';
+  IonBadge,
+  IonContent, 
+  IonInput,
+  AlertController,
+  ModalController } from '@ionic/angular/standalone';
 import { ModalUserEditComponent } from '../modal-user-edit/modal-user-edit.component';
 import { FormsModule } from '@angular/forms';
 import { CloudUser } from 'src/lib/ncloud';
@@ -19,23 +23,27 @@ import { CloudUser } from 'src/lib/ncloud';
   standalone: true,
   imports: [
     IonContent, 
-  IonAvatar, 
-  IonText, 
-  IonButton, 
-  IonIcon, 
-  IonCard, 
-  IonList, 
-  IonItem, 
-  IonLabel, 
-  IonBadge,
+    IonAvatar, 
+    IonText, 
+    IonButton, 
+    IonIcon, 
+    IonCard, 
+    IonList, 
+    IonItem, 
+    IonLabel, 
+    IonBadge,
+    IonInput,
+    FormsModule
   ]
-  
 })
-export class PageMineComponent  implements OnInit {
+export class PageMineComponent implements OnInit {
   currentUser: CloudUser | undefined;
+  username: string = '';
+  password: string = '';
 
   constructor(
-    private modalCtrl: ModalController
+    private modalCtrl: ModalController,
+    private alertCtrl: AlertController
   ) {
     this.currentUser = new CloudUser();
   }
@@ -49,20 +57,46 @@ export class PageMineComponent  implements OnInit {
     const { data, role } = await modal.onWillDismiss();
   }
 
-
   async login() {
-    let user: any = new CloudUser();
-    user = await user?.login("Stan", "1234");
-    if (user?.id) {
-      this.currentUser = user;
+    if (!this.username || !this.password) {
+      const alert = await this.alertCtrl.create({
+        header: '错误',
+        message: '请输入用户名和密码',
+        buttons: ['确定']
+      });
+      await alert.present();
+      return;
+    }
+
+    try {
+      let user: any = new CloudUser();
+      user = await user?.login(this.username, this.password);
+      if (user?.id) {
+        this.currentUser = user;
+      } else {
+        const alert = await this.alertCtrl.create({
+          header: '登录失败',
+          message: '用户名或密码错误',
+          buttons: ['确定']
+        });
+        await alert.present();
+      }
+    } catch (error) {
+      const alert = await this.alertCtrl.create({
+        header: '登录错误',
+        message: '登录过程中发生错误，请重试',
+        buttons: ['确定']
+      });
+      await alert.present();
     }
   }
 
   logout() {
     this.currentUser?.logout();
     this.currentUser = undefined;
+    this.username = '';
+    this.password = '';
   }
 
   ngOnInit() {}
-
-}
+}