146 lines
4.2 KiB
Swift
146 lines
4.2 KiB
Swift
//
|
|
// LoginView.swift
|
|
// punchnet
|
|
//
|
|
// Created by 安礼成 on 2026/1/15.
|
|
//
|
|
|
|
import SwiftUI
|
|
import Observation
|
|
|
|
// 登陆页面
|
|
struct LoginView: View {
|
|
@State private var state = LoginState()
|
|
|
|
var body: some View {
|
|
VStack {
|
|
Text("PunchNet")
|
|
|
|
HStack(alignment: .center, spacing: 30) {
|
|
HStack {
|
|
Image("logo")
|
|
.resizable()
|
|
.clipped()
|
|
.frame(width: 25, height: 25)
|
|
|
|
Text("密钥登陆")
|
|
.foregroundColor(state.loginMode == .token ? .blue : .black)
|
|
}
|
|
.contentShape(Rectangle())
|
|
.onTapGesture {
|
|
self.state.loginMode = .token
|
|
}
|
|
|
|
HStack {
|
|
Image("logo")
|
|
.resizable()
|
|
.clipped()
|
|
.frame(width: 25, height: 25)
|
|
Text("账户登陆")
|
|
.foregroundColor(state.loginMode == .account ? .blue : .black)
|
|
}
|
|
.contentShape(Rectangle())
|
|
.onTapGesture {
|
|
self.state.loginMode = .account
|
|
}
|
|
}
|
|
|
|
Group {
|
|
switch state.loginMode {
|
|
case .token:
|
|
LoginTokenView(state: self.state)
|
|
case .account:
|
|
LoginAccountView(state: self.state)
|
|
}
|
|
}
|
|
|
|
Spacer()
|
|
}
|
|
.frame(width: 400, height: 400)
|
|
}
|
|
|
|
}
|
|
|
|
struct LoginTokenView: View {
|
|
@Bindable var state: LoginState
|
|
|
|
var body: some View {
|
|
TextField("认证密钥", text: self.$state.token)
|
|
.multilineTextAlignment(.leading)
|
|
.textFieldStyle(PlainTextFieldStyle())
|
|
.frame(width: 200, height: 25)
|
|
.background(Color.clear)
|
|
.foregroundColor(Color.black)
|
|
.overlay(
|
|
Rectangle()
|
|
.frame(height: 1)
|
|
.foregroundColor(.blue)
|
|
.padding(.top, 25)
|
|
, alignment: .topLeading)
|
|
|
|
Rectangle()
|
|
.overlay {
|
|
Text("登陆")
|
|
.font(.system(size: 14, weight: .regular))
|
|
.foregroundColor(.black)
|
|
}
|
|
.frame(width: 120, height: 35)
|
|
.foregroundColor(Color(red: 74 / 255, green: 207 / 255, blue: 154 / 255))
|
|
.cornerRadius(5.0)
|
|
.onTapGesture {
|
|
print("call me here")
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
struct LoginAccountView: View {
|
|
@Bindable var state: LoginState
|
|
|
|
var body: some View {
|
|
TextField("手机号/邮箱", text: $state.account)
|
|
.multilineTextAlignment(.leading)
|
|
.textFieldStyle(PlainTextFieldStyle())
|
|
.frame(width: 200, height: 25)
|
|
.background(Color.clear)
|
|
.foregroundColor(Color.black)
|
|
.overlay(
|
|
Rectangle()
|
|
.frame(height: 1)
|
|
.foregroundColor(.blue)
|
|
.padding(.top, 25)
|
|
, alignment: .topLeading)
|
|
|
|
SecureField("密码", text: $state.password)
|
|
.multilineTextAlignment(.leading)
|
|
.textFieldStyle(PlainTextFieldStyle())
|
|
.frame(width: 200, height: 25)
|
|
.background(Color.clear)
|
|
.foregroundColor(Color.black)
|
|
.overlay(
|
|
Rectangle()
|
|
.frame(height: 1)
|
|
.foregroundColor(.blue)
|
|
.padding(.top, 25)
|
|
, alignment: .topLeading)
|
|
|
|
Rectangle()
|
|
.overlay {
|
|
Text("登陆")
|
|
.font(.system(size: 14, weight: .regular))
|
|
.foregroundColor(.black)
|
|
}
|
|
.frame(width: 120, height: 35)
|
|
.foregroundColor(Color(red: 74 / 255, green: 207 / 255, blue: 154 / 255))
|
|
.cornerRadius(5.0)
|
|
.onTapGesture {
|
|
print("call me here")
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
#Preview {
|
|
LoginView()
|
|
}
|