feat(ios): refine adaptive theme and unified controls
This commit is contained in:
chick
@@ -22,7 +22,7 @@ public struct AIButtonStyle: ButtonStyle {
|
||||
func backgroundColor(isEnabled: Bool) -> Color {
|
||||
switch self {
|
||||
case .primary: return isEnabled ? AITheme.primary : AITheme.primary.opacity(0.35)
|
||||
case .secondary: return isEnabled ? AITheme.surface : AITheme.canvas
|
||||
case .secondary: return isEnabled ? AITheme.control : AITheme.canvas
|
||||
case .danger: return isEnabled ? AITheme.danger : AITheme.danger.opacity(0.30)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,445 +1,550 @@
|
||||
import SwiftUI
|
||||
|
||||
public struct AICard<Content: View>: View {
|
||||
private let content: Content
|
||||
private let padding: CGFloat
|
||||
private let content: Content
|
||||
private let padding: CGFloat
|
||||
|
||||
public init(padding: CGFloat = 16, @ViewBuilder content: () -> Content) {
|
||||
self.padding = padding
|
||||
self.content = content()
|
||||
}
|
||||
public init(padding: CGFloat = 16, @ViewBuilder content: () -> Content) {
|
||||
self.padding = padding
|
||||
self.content = content()
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
content
|
||||
.padding(padding)
|
||||
.background(AITheme.surface)
|
||||
.clipShape(RoundedRectangle(cornerRadius: AITheme.cardRadius))
|
||||
.shadow(color: .black.opacity(0.045), radius: 8, x: 0, y: 3)
|
||||
.overlay {
|
||||
RoundedRectangle(cornerRadius: AITheme.cardRadius)
|
||||
.strokeBorder(AITheme.line)
|
||||
}
|
||||
}
|
||||
public var body: some View {
|
||||
content
|
||||
.padding(padding)
|
||||
.background(AITheme.surface)
|
||||
.clipShape(RoundedRectangle(cornerRadius: AITheme.cardRadius))
|
||||
.shadow(color: .black.opacity(0.045), radius: 8, x: 0, y: 3)
|
||||
.overlay {
|
||||
RoundedRectangle(cornerRadius: AITheme.cardRadius)
|
||||
.strokeBorder(AITheme.line)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public struct AITag: View {
|
||||
private let text: String
|
||||
private let tint: Color
|
||||
private let text: String
|
||||
private let tint: Color
|
||||
|
||||
public init(_ text: String, tint: Color = AITheme.primary) {
|
||||
self.text = text
|
||||
self.tint = tint
|
||||
}
|
||||
public init(_ text: String, tint: Color = AITheme.primary) {
|
||||
self.text = text
|
||||
self.tint = tint
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
Text(text)
|
||||
.font(.system(size: 12, weight: .semibold))
|
||||
.foregroundStyle(tint)
|
||||
.lineLimit(1)
|
||||
.fixedSize(horizontal: true, vertical: false)
|
||||
.padding(.horizontal, 9)
|
||||
.frame(minHeight: 26)
|
||||
.background(tint.opacity(0.10))
|
||||
.clipShape(Capsule())
|
||||
}
|
||||
public var body: some View {
|
||||
Text(text)
|
||||
.font(.system(size: 12, weight: .semibold))
|
||||
.foregroundStyle(tint)
|
||||
.lineLimit(1)
|
||||
.truncationMode(.middle)
|
||||
.padding(.horizontal, 9)
|
||||
.frame(minHeight: 26)
|
||||
.background(tint.opacity(0.10))
|
||||
.clipShape(Capsule())
|
||||
}
|
||||
}
|
||||
|
||||
public struct AISectionTitle: View {
|
||||
private let title: String
|
||||
private let systemImage: String
|
||||
private let detail: String?
|
||||
private let title: String
|
||||
private let systemImage: String
|
||||
private let detail: String?
|
||||
private let footer: Footer
|
||||
public init(
|
||||
_ title: String,
|
||||
systemImage: String,
|
||||
detail: String? = nil,
|
||||
actionTitle: String? = nil,
|
||||
actionSystemImage: String? = nil,
|
||||
actionKind: AIButtonStyle.Kind = .secondary,
|
||||
action: (() -> Void)? = nil
|
||||
) {
|
||||
self.title = title
|
||||
self.systemImage = systemImage
|
||||
self.detail = detail
|
||||
self.footer = Footer(
|
||||
title: actionTitle,
|
||||
systemImage: actionSystemImage,
|
||||
kind: actionKind,
|
||||
action: action
|
||||
)
|
||||
}
|
||||
|
||||
public init(_ title: String, systemImage: String, detail: String? = nil) {
|
||||
self.title = title
|
||||
self.systemImage = systemImage
|
||||
self.detail = detail
|
||||
}
|
||||
private struct Footer: View {
|
||||
let title: String?
|
||||
let systemImage: String?
|
||||
let kind: AIButtonStyle.Kind
|
||||
let action: (() -> Void)?
|
||||
|
||||
public var body: some View {
|
||||
HStack(spacing: 8) {
|
||||
Image(systemName: systemImage)
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundStyle(AITheme.primary)
|
||||
Text(title)
|
||||
.font(.headline.weight(.bold))
|
||||
.foregroundStyle(AITheme.ink)
|
||||
.lineLimit(1)
|
||||
Spacer(minLength: 8)
|
||||
if let detail {
|
||||
Text(detail)
|
||||
.font(.caption.weight(.medium))
|
||||
.foregroundStyle(AITheme.muted)
|
||||
.lineLimit(1)
|
||||
}
|
||||
var body: some View {
|
||||
if let title, let action {
|
||||
Button {
|
||||
action()
|
||||
} label: {
|
||||
if let systemImage {
|
||||
Label(title, systemImage: systemImage)
|
||||
} else {
|
||||
Text(title)
|
||||
}
|
||||
}
|
||||
.buttonStyle(AIButtonStyle(kind: kind, size: .compact))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
HStack(spacing: 8) {
|
||||
Image(systemName: systemImage)
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundStyle(AITheme.primary)
|
||||
Text(title)
|
||||
.font(.headline.weight(.bold))
|
||||
.foregroundStyle(AITheme.ink)
|
||||
.lineLimit(1)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
if let detail {
|
||||
Text(detail)
|
||||
.font(.caption.weight(.medium))
|
||||
.foregroundStyle(AITheme.muted)
|
||||
.lineLimit(1)
|
||||
}
|
||||
if Footer.self != EmptyView.self {
|
||||
footer
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public struct AIFieldLabel: View {
|
||||
private let title: String
|
||||
|
||||
public init(_ title: String) {
|
||||
self.title = title
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
Text(title)
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundStyle(AITheme.ink)
|
||||
}
|
||||
}
|
||||
|
||||
public struct AIStatCard: View {
|
||||
private let title: String
|
||||
private let value: String
|
||||
private let detail: String?
|
||||
private let tint: Color
|
||||
private let title: String
|
||||
private let value: String
|
||||
private let detail: String?
|
||||
private let tint: Color
|
||||
|
||||
public init(title: String, value: String, detail: String? = nil, tint: Color) {
|
||||
self.title = title
|
||||
self.value = value
|
||||
self.detail = detail
|
||||
self.tint = tint
|
||||
}
|
||||
public init(title: String, value: String, detail: String? = nil, tint: Color) {
|
||||
self.title = title
|
||||
self.value = value
|
||||
self.detail = detail
|
||||
self.tint = tint
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
AICard(padding: 14) {
|
||||
VStack(alignment: .leading, spacing: 5) {
|
||||
Text(title)
|
||||
.font(.caption.weight(.semibold))
|
||||
.foregroundStyle(AITheme.muted)
|
||||
Text(value)
|
||||
.font(.title3.weight(.bold))
|
||||
.foregroundStyle(tint)
|
||||
.lineLimit(1)
|
||||
.minimumScaleFactor(0.75)
|
||||
if let detail {
|
||||
Text(detail)
|
||||
.font(.caption)
|
||||
.foregroundStyle(AITheme.muted)
|
||||
.lineLimit(2)
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
public var body: some View {
|
||||
AICard(padding: 14) {
|
||||
VStack(alignment: .leading, spacing: 5) {
|
||||
Text(title)
|
||||
.font(.caption.weight(.semibold))
|
||||
.foregroundStyle(AITheme.muted)
|
||||
Text(value)
|
||||
.font(.title3.weight(.bold))
|
||||
.foregroundStyle(tint)
|
||||
.lineLimit(1)
|
||||
.minimumScaleFactor(0.75)
|
||||
if let detail {
|
||||
Text(detail)
|
||||
.font(.caption)
|
||||
.foregroundStyle(AITheme.muted)
|
||||
.lineLimit(2)
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public struct AIStatusBanner: View {
|
||||
private let message: String
|
||||
private let tint: Color
|
||||
private let systemImage: String
|
||||
private let message: String
|
||||
private let tint: Color
|
||||
private let systemImage: String
|
||||
|
||||
public init(_ message: String, tint: Color, systemImage: String) {
|
||||
self.message = message
|
||||
self.tint = tint
|
||||
self.systemImage = systemImage
|
||||
}
|
||||
public init(_ message: String, tint: Color, systemImage: String) {
|
||||
self.message = message
|
||||
self.tint = tint
|
||||
self.systemImage = systemImage
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
HStack(alignment: .top, spacing: 10) {
|
||||
Image(systemName: systemImage)
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundStyle(tint)
|
||||
Text(message)
|
||||
.font(.subheadline.weight(.medium))
|
||||
.foregroundStyle(tint)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
}
|
||||
.padding(14)
|
||||
.background(tint.opacity(0.10))
|
||||
.clipShape(RoundedRectangle(cornerRadius: AITheme.cardRadius))
|
||||
.overlay {
|
||||
RoundedRectangle(cornerRadius: AITheme.cardRadius)
|
||||
.strokeBorder(tint.opacity(0.22))
|
||||
}
|
||||
.accessibilityElement(children: .combine)
|
||||
public var body: some View {
|
||||
HStack(alignment: .top, spacing: 10) {
|
||||
Image(systemName: systemImage)
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundStyle(tint)
|
||||
Text(message)
|
||||
.font(.subheadline.weight(.medium))
|
||||
.foregroundStyle(tint)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
}
|
||||
.padding(14)
|
||||
.background(tint.opacity(0.10))
|
||||
.clipShape(RoundedRectangle(cornerRadius: AITheme.cardRadius))
|
||||
.overlay {
|
||||
RoundedRectangle(cornerRadius: AITheme.cardRadius)
|
||||
.strokeBorder(tint.opacity(0.22))
|
||||
}
|
||||
.accessibilityElement(children: .combine)
|
||||
}
|
||||
}
|
||||
|
||||
public struct AIEmptyState: View {
|
||||
private let systemImage: String
|
||||
private let title: String
|
||||
private let message: String
|
||||
private let systemImage: String
|
||||
private let title: String
|
||||
private let message: String
|
||||
|
||||
public init(systemImage: String, title: String, message: String) {
|
||||
self.systemImage = systemImage
|
||||
self.title = title
|
||||
self.message = message
|
||||
}
|
||||
public init(systemImage: String, title: String, message: String) {
|
||||
self.systemImage = systemImage
|
||||
self.title = title
|
||||
self.message = message
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
VStack(spacing: 10) {
|
||||
Image(systemName: systemImage)
|
||||
.font(.system(size: 28))
|
||||
.foregroundStyle(AITheme.muted)
|
||||
Text(title)
|
||||
.font(.headline.weight(.bold))
|
||||
.foregroundStyle(AITheme.ink)
|
||||
Text(message)
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(AITheme.muted)
|
||||
.multilineTextAlignment(.center)
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 18)
|
||||
.accessibilityElement(children: .combine)
|
||||
public var body: some View {
|
||||
VStack(spacing: 10) {
|
||||
Image(systemName: systemImage)
|
||||
.font(.system(size: 26))
|
||||
.foregroundStyle(AITheme.primary)
|
||||
.frame(width: 54, height: 54)
|
||||
.background(AITheme.primary.opacity(0.10))
|
||||
.clipShape(Circle())
|
||||
Text(title)
|
||||
.font(.headline.weight(.bold))
|
||||
.foregroundStyle(AITheme.ink)
|
||||
Text(message)
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(AITheme.muted)
|
||||
.multilineTextAlignment(.center)
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 18)
|
||||
.accessibilityElement(children: .combine)
|
||||
}
|
||||
}
|
||||
|
||||
public struct AIListCard<Footer: View>: View {
|
||||
private let title: String
|
||||
private let subtitle: String?
|
||||
private let status: String?
|
||||
private let statusTint: Color?
|
||||
private let details: [String]
|
||||
private let footer: Footer
|
||||
private let title: String
|
||||
private let subtitle: String?
|
||||
private let status: String?
|
||||
private let statusTint: Color?
|
||||
private let details: [String]
|
||||
private let footer: Footer
|
||||
|
||||
public init(
|
||||
title: String,
|
||||
subtitle: String? = nil,
|
||||
status: String? = nil,
|
||||
statusTint: Color? = nil,
|
||||
details: [String] = [],
|
||||
@ViewBuilder footer: () -> Footer = { EmptyView() }
|
||||
) {
|
||||
self.title = title
|
||||
self.subtitle = subtitle
|
||||
self.status = status
|
||||
self.statusTint = statusTint
|
||||
self.details = details
|
||||
self.footer = footer()
|
||||
}
|
||||
public init(
|
||||
title: String,
|
||||
subtitle: String? = nil,
|
||||
status: String? = nil,
|
||||
statusTint: Color? = nil,
|
||||
details: [String] = [],
|
||||
@ViewBuilder footer: () -> Footer = { EmptyView() }
|
||||
) {
|
||||
self.title = title
|
||||
self.subtitle = subtitle
|
||||
self.status = status
|
||||
self.statusTint = statusTint
|
||||
self.details = details
|
||||
self.footer = footer()
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
HStack(alignment: .firstTextBaseline, spacing: 10) {
|
||||
Text(title)
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundStyle(AITheme.ink)
|
||||
.lineLimit(2)
|
||||
.truncationMode(.middle)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
public var body: some View {
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
HStack(alignment: .firstTextBaseline, spacing: 10) {
|
||||
Text(title)
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundStyle(AITheme.ink)
|
||||
.lineLimit(2)
|
||||
.truncationMode(.middle)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
|
||||
if let status {
|
||||
AITag(status, tint: statusTint ?? AITheme.muted)
|
||||
}
|
||||
}
|
||||
|
||||
if let subtitle {
|
||||
Text(subtitle)
|
||||
.font(.caption)
|
||||
.foregroundStyle(AITheme.muted)
|
||||
.lineLimit(1)
|
||||
.truncationMode(.middle)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
}
|
||||
|
||||
if !details.isEmpty {
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
ForEach(details, id: \.self) { detail in
|
||||
Text(detail)
|
||||
.font(.caption)
|
||||
.foregroundStyle(AITheme.muted)
|
||||
.lineLimit(2)
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if Footer.self != EmptyView.self {
|
||||
footer
|
||||
}
|
||||
if let status {
|
||||
AITag(status, tint: statusTint ?? AITheme.muted)
|
||||
}
|
||||
.accessibilityElement(children: .combine)
|
||||
}
|
||||
|
||||
if let subtitle {
|
||||
Text(subtitle)
|
||||
.font(.caption)
|
||||
.foregroundStyle(AITheme.muted)
|
||||
.lineLimit(1)
|
||||
.truncationMode(.middle)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
}
|
||||
|
||||
if !details.isEmpty {
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
ForEach(details, id: \.self) { detail in
|
||||
Text(detail)
|
||||
.font(.caption)
|
||||
.foregroundStyle(AITheme.muted)
|
||||
.lineLimit(2)
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if Footer.self != EmptyView.self {
|
||||
footer
|
||||
}
|
||||
}
|
||||
.accessibilityElement(children: .combine)
|
||||
}
|
||||
}
|
||||
|
||||
public struct AILoadingCard: View {
|
||||
private let message: String
|
||||
private let message: String
|
||||
|
||||
public init(_ message: String) {
|
||||
self.message = message
|
||||
}
|
||||
public init(_ message: String) {
|
||||
self.message = message
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
AICard {
|
||||
VStack(spacing: 10) {
|
||||
ProgressView()
|
||||
.controlSize(.regular)
|
||||
Text(message)
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(AITheme.muted)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 18)
|
||||
.accessibilityElement(children: .combine)
|
||||
}
|
||||
public var body: some View {
|
||||
VStack(spacing: 10) {
|
||||
ProgressView()
|
||||
.controlSize(.regular)
|
||||
Text(message)
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(AITheme.muted)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 18)
|
||||
.accessibilityElement(children: .combine)
|
||||
}
|
||||
}
|
||||
|
||||
public struct AIKeyValueRow: View {
|
||||
private let title: String
|
||||
private let value: String
|
||||
private let valueTint: Color
|
||||
private let title: String
|
||||
private let value: String
|
||||
private let valueTint: Color
|
||||
|
||||
public init(_ title: String, value: String, tint: Color = AITheme.ink) {
|
||||
self.title = title
|
||||
self.value = value
|
||||
self.valueTint = tint
|
||||
public init(_ title: String, value: String, tint: Color = AITheme.ink) {
|
||||
self.title = title
|
||||
self.value = value
|
||||
self.valueTint = tint
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
HStack(alignment: .firstTextBaseline, spacing: 12) {
|
||||
Text(title)
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(AITheme.muted)
|
||||
.lineLimit(2)
|
||||
Spacer(minLength: 12)
|
||||
Text(value)
|
||||
.font(.subheadline.weight(.medium))
|
||||
.foregroundStyle(valueTint)
|
||||
.multilineTextAlignment(.trailing)
|
||||
.lineLimit(2)
|
||||
.truncationMode(.middle)
|
||||
.minimumScaleFactor(0.85)
|
||||
.textSelection(.enabled)
|
||||
}
|
||||
.accessibilityElement(children: .combine)
|
||||
}
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
HStack(alignment: .firstTextBaseline, spacing: 12) {
|
||||
Text(title)
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(AITheme.muted)
|
||||
.lineLimit(2)
|
||||
Spacer(minLength: 12)
|
||||
Text(value)
|
||||
.font(.subheadline.weight(.medium))
|
||||
.foregroundStyle(valueTint)
|
||||
.multilineTextAlignment(.trailing)
|
||||
.lineLimit(2)
|
||||
.minimumScaleFactor(0.85)
|
||||
.textSelection(.enabled)
|
||||
public struct AISegmentedControl<Value: Hashable>: View {
|
||||
private let title: String
|
||||
private let options: [(value: Value, title: String)]
|
||||
@Binding private var selection: Value
|
||||
|
||||
public init(
|
||||
_ title: String,
|
||||
selection: Binding<Value>,
|
||||
options: [(value: Value, title: String)]
|
||||
) {
|
||||
self.title = title
|
||||
self._selection = selection
|
||||
self.options = options
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
HStack(spacing: 4) {
|
||||
ForEach(options, id: \.value) { option in
|
||||
let isSelected = selection == option.value
|
||||
|
||||
Button {
|
||||
selection = option.value
|
||||
} label: {
|
||||
Text(option.title)
|
||||
.font(.subheadline.weight(isSelected ? .semibold : .medium))
|
||||
.lineLimit(1)
|
||||
.minimumScaleFactor(0.75)
|
||||
.foregroundStyle(isSelected ? .white : AITheme.muted)
|
||||
.frame(maxWidth: .infinity, minHeight: 34)
|
||||
.background {
|
||||
if isSelected {
|
||||
RoundedRectangle(cornerRadius: 9)
|
||||
.fill(AITheme.primary)
|
||||
}
|
||||
}
|
||||
}
|
||||
.accessibilityElement(children: .combine)
|
||||
.buttonStyle(.plain)
|
||||
.accessibilityLabel(option.title)
|
||||
.accessibilityAddTraits(isSelected ? .isSelected : [])
|
||||
}
|
||||
}
|
||||
.padding(4)
|
||||
.background(AITheme.control)
|
||||
.clipShape(RoundedRectangle(cornerRadius: AITheme.buttonRadius))
|
||||
.overlay {
|
||||
RoundedRectangle(cornerRadius: AITheme.buttonRadius)
|
||||
.strokeBorder(AITheme.line)
|
||||
}
|
||||
.animation(.easeOut(duration: 0.16), value: selection)
|
||||
.accessibilityElement(children: .contain)
|
||||
.accessibilityLabel(title)
|
||||
}
|
||||
}
|
||||
|
||||
public struct AIFieldStyle: TextFieldStyle {
|
||||
public init() {}
|
||||
public init() {}
|
||||
|
||||
public func _body(configuration: TextField<Self._Label>) -> some View {
|
||||
configuration
|
||||
.padding(.horizontal, 12)
|
||||
.frame(minHeight: AITheme.buttonHeight)
|
||||
.background(AITheme.canvas)
|
||||
.clipShape(RoundedRectangle(cornerRadius: AITheme.buttonRadius))
|
||||
.overlay {
|
||||
RoundedRectangle(cornerRadius: AITheme.buttonRadius)
|
||||
.strokeBorder(AITheme.line)
|
||||
}
|
||||
}
|
||||
public func _body(configuration: TextField<Self._Label>) -> some View {
|
||||
configuration
|
||||
.aiInputSurface()
|
||||
}
|
||||
}
|
||||
|
||||
public struct AISearchField: View {
|
||||
private let placeholder: String
|
||||
@Binding private var text: String
|
||||
private var onSubmit: (() -> Void)?
|
||||
private let placeholder: String
|
||||
@Binding private var text: String
|
||||
private var onSubmit: (() -> Void)?
|
||||
|
||||
public init(
|
||||
_ placeholder: String,
|
||||
text: Binding<String>,
|
||||
onSubmit: (() -> Void)? = nil
|
||||
) {
|
||||
self.placeholder = placeholder
|
||||
self._text = text
|
||||
self.onSubmit = onSubmit
|
||||
}
|
||||
public init(
|
||||
_ placeholder: String,
|
||||
text: Binding<String>,
|
||||
onSubmit: (() -> Void)? = nil
|
||||
) {
|
||||
self.placeholder = placeholder
|
||||
self._text = text
|
||||
self.onSubmit = onSubmit
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
HStack(spacing: 8) {
|
||||
Image(systemName: "magnifyingglass")
|
||||
.foregroundStyle(AITheme.muted)
|
||||
TextField(placeholder, text: $text)
|
||||
.textFieldStyle(.plain)
|
||||
.submitLabel(.search)
|
||||
.onSubmit {
|
||||
onSubmit?()
|
||||
}
|
||||
if !text.isEmpty {
|
||||
Button {
|
||||
text = ""
|
||||
onSubmit?()
|
||||
} label: {
|
||||
Image(systemName: "xmark.circle.fill")
|
||||
.foregroundStyle(AITheme.muted)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.accessibilityLabel("清除搜索")
|
||||
}
|
||||
public var body: some View {
|
||||
HStack(spacing: 6) {
|
||||
Image(systemName: "magnifyingglass")
|
||||
.foregroundStyle(AITheme.muted)
|
||||
TextField(placeholder, text: $text)
|
||||
.textFieldStyle(.plain)
|
||||
.submitLabel(.search)
|
||||
.onSubmit {
|
||||
onSubmit?()
|
||||
}
|
||||
.padding(.horizontal, 12)
|
||||
.frame(minHeight: AITheme.buttonHeight)
|
||||
.background(AITheme.canvas)
|
||||
.clipShape(RoundedRectangle(cornerRadius: AITheme.buttonRadius))
|
||||
.overlay {
|
||||
RoundedRectangle(cornerRadius: AITheme.buttonRadius)
|
||||
.strokeBorder(AITheme.line)
|
||||
if !text.isEmpty {
|
||||
Button {
|
||||
text = ""
|
||||
onSubmit?()
|
||||
} label: {
|
||||
Image(systemName: "xmark.circle.fill")
|
||||
.foregroundStyle(AITheme.muted)
|
||||
.font(.system(size: 16, weight: .medium))
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.frame(width: 28, height: 28)
|
||||
.contentShape(Rectangle())
|
||||
.accessibilityLabel("清除搜索")
|
||||
}
|
||||
}
|
||||
.aiInputSurface(minHeight: AITheme.buttonHeight)
|
||||
}
|
||||
}
|
||||
|
||||
public struct AIBrandBar: View {
|
||||
public init() {}
|
||||
public init() {}
|
||||
|
||||
public var body: some View {
|
||||
HStack(spacing: 10) {
|
||||
Image(systemName: "antenna.radiowaves.left.and.right")
|
||||
Text(AppMetadata.name)
|
||||
.font(.headline)
|
||||
Spacer()
|
||||
}
|
||||
.foregroundStyle(.white)
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 12)
|
||||
.background(Color(red: 0.075, green: 0.118, blue: 0.188))
|
||||
public var body: some View {
|
||||
HStack(spacing: 10) {
|
||||
Image(systemName: "antenna.radiowaves.left.and.right")
|
||||
Text(AppMetadata.name)
|
||||
.font(.headline)
|
||||
Spacer()
|
||||
}
|
||||
.foregroundStyle(.white)
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 12)
|
||||
.background(AITheme.brand)
|
||||
}
|
||||
}
|
||||
|
||||
extension View {
|
||||
func aiBottomActionBar<Content: View>(@ViewBuilder content: () -> Content) -> some View {
|
||||
safeAreaInset(edge: .bottom) {
|
||||
content()
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.top, 10)
|
||||
.padding(.bottom, 12)
|
||||
.background(AITheme.canvas)
|
||||
.overlay(alignment: .top) {
|
||||
Rectangle()
|
||||
.fill(AITheme.line)
|
||||
.frame(height: 1)
|
||||
}
|
||||
func aiInputSurface(minHeight: CGFloat = AITheme.buttonHeight) -> some View {
|
||||
self
|
||||
.padding(.horizontal, 12)
|
||||
.frame(minHeight: minHeight, alignment: .leading)
|
||||
.background(AITheme.control)
|
||||
.clipShape(RoundedRectangle(cornerRadius: AITheme.buttonRadius))
|
||||
.overlay {
|
||||
RoundedRectangle(cornerRadius: AITheme.buttonRadius)
|
||||
.strokeBorder(AITheme.line)
|
||||
}
|
||||
}
|
||||
|
||||
func aiBottomActionBar<Content: View>(@ViewBuilder content: () -> Content) -> some View {
|
||||
safeAreaInset(edge: .bottom) {
|
||||
content()
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.top, 10)
|
||||
.padding(.bottom, 8)
|
||||
.background(AITheme.canvas)
|
||||
.overlay(alignment: .top) {
|
||||
Rectangle()
|
||||
.fill(AITheme.line)
|
||||
.frame(height: 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func aiSelectSurface() -> some View {
|
||||
self
|
||||
.tint(AITheme.ink)
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundStyle(AITheme.ink)
|
||||
.frame(maxWidth: .infinity, minHeight: AITheme.buttonHeight, alignment: .leading)
|
||||
.padding(.horizontal, 12)
|
||||
.background(AITheme.canvas)
|
||||
.clipShape(RoundedRectangle(cornerRadius: AITheme.buttonRadius))
|
||||
.overlay {
|
||||
RoundedRectangle(cornerRadius: AITheme.buttonRadius)
|
||||
.strokeBorder(AITheme.line)
|
||||
}
|
||||
}
|
||||
func aiSelectSurface() -> some View {
|
||||
self
|
||||
.tint(AITheme.ink)
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundStyle(AITheme.ink)
|
||||
.labelsHidden()
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.aiInputSurface()
|
||||
}
|
||||
}
|
||||
|
||||
public struct AIToolbarButton: View {
|
||||
private let title: String
|
||||
private let systemImage: String?
|
||||
private let kind: AIButtonStyle.Kind
|
||||
private let action: () -> Void
|
||||
private let title: String
|
||||
private let systemImage: String?
|
||||
private let kind: AIButtonStyle.Kind
|
||||
private let action: () -> Void
|
||||
|
||||
public init(
|
||||
_ title: String,
|
||||
systemImage: String? = nil,
|
||||
kind: AIButtonStyle.Kind = .secondary,
|
||||
action: @escaping () -> Void
|
||||
) {
|
||||
self.title = title
|
||||
self.systemImage = systemImage
|
||||
self.kind = kind
|
||||
self.action = action
|
||||
}
|
||||
public init(
|
||||
_ title: String,
|
||||
systemImage: String? = nil,
|
||||
kind: AIButtonStyle.Kind = .secondary,
|
||||
action: @escaping () -> Void
|
||||
) {
|
||||
self.title = title
|
||||
self.systemImage = systemImage
|
||||
self.kind = kind
|
||||
self.action = action
|
||||
}
|
||||
|
||||
public var body: some View {
|
||||
Button {
|
||||
action()
|
||||
} label: {
|
||||
if let systemImage {
|
||||
Label(title, systemImage: systemImage)
|
||||
.labelStyle(.titleAndIcon)
|
||||
.font(.system(size: 15, weight: .semibold))
|
||||
} else {
|
||||
Text(title)
|
||||
.font(.system(size: 15, weight: .semibold))
|
||||
}
|
||||
}
|
||||
.buttonStyle(AIButtonStyle(kind: kind, size: .toolbar))
|
||||
.accessibilityLabel(title)
|
||||
public var body: some View {
|
||||
Button {
|
||||
action()
|
||||
} label: {
|
||||
if let systemImage {
|
||||
Label(title, systemImage: systemImage)
|
||||
.labelStyle(.titleAndIcon)
|
||||
.font(.system(size: 15, weight: .semibold))
|
||||
} else {
|
||||
Text(title)
|
||||
.font(.system(size: 15, weight: .semibold))
|
||||
}
|
||||
}
|
||||
.buttonStyle(AIButtonStyle(kind: kind, size: .toolbar))
|
||||
.accessibilityLabel(title)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,86 @@
|
||||
import SwiftUI
|
||||
|
||||
public enum AITheme {
|
||||
public static let canvas = Color(red: 0.953, green: 0.961, blue: 0.973)
|
||||
public static let surface = Color.white
|
||||
public static let ink = Color(red: 0.110, green: 0.153, blue: 0.220)
|
||||
public static let muted = Color(red: 0.435, green: 0.486, blue: 0.561)
|
||||
public static let line = Color(red: 0.878, green: 0.898, blue: 0.922)
|
||||
#if canImport(UIKit)
|
||||
import UIKit
|
||||
#elseif canImport(AppKit)
|
||||
import AppKit
|
||||
#endif
|
||||
|
||||
public static let primary = Color(red: 0.067, green: 0.467, blue: 0.431)
|
||||
public static let danger = Color(red: 0.714, green: 0.302, blue: 0.282)
|
||||
public static let warning = Color(red: 0.722, green: 0.471, blue: 0.067)
|
||||
public static let success = Color(red: 0.082, green: 0.584, blue: 0.439)
|
||||
private enum AIPalette {
|
||||
#if canImport(UIKit)
|
||||
private static func dynamicColor(light: UIColor, dark: UIColor) -> Color {
|
||||
Color(UIColor { traits in
|
||||
traits.userInterfaceStyle == .dark ? dark : light
|
||||
})
|
||||
}
|
||||
|
||||
private static func rgba(
|
||||
_ red: CGFloat,
|
||||
_ green: CGFloat,
|
||||
_ blue: CGFloat,
|
||||
_ alpha: CGFloat
|
||||
) -> UIColor {
|
||||
UIColor(red: red / 255, green: green / 255, blue: blue / 255, alpha: alpha)
|
||||
}
|
||||
|
||||
private static func color(light: UIColor, dark: UIColor) -> Color {
|
||||
dynamicColor(light: light, dark: dark)
|
||||
}
|
||||
|
||||
static let canvas = color(light: rgba(243, 245, 248, 1), dark: rgba(19, 22, 28, 1))
|
||||
static let surface = color(light: rgba(255, 255, 255, 1), dark: rgba(27, 31, 39, 1))
|
||||
static let control = color(light: rgba(247, 249, 251, 1), dark: rgba(37, 44, 56, 1))
|
||||
static let ink = color(light: rgba(28, 39, 56, 1), dark: rgba(235, 242, 247, 1))
|
||||
static let muted = color(light: rgba(111, 124, 143, 1), dark: rgba(173, 183, 199, 1))
|
||||
static let line = color(light: rgba(224, 229, 235, 1), dark: rgba(56, 63, 74, 1))
|
||||
static let brand = color(light: rgba(19, 30, 48, 1), dark: rgba(14, 22, 35, 1))
|
||||
static let primary = color(light: rgba(17, 119, 110, 1), dark: rgba(20, 142, 126, 1))
|
||||
static let danger = color(light: rgba(182, 77, 72, 1), dark: rgba(193, 79, 71, 1))
|
||||
static let warning = color(light: rgba(184, 120, 17, 1), dark: rgba(209, 141, 39, 1))
|
||||
static let success = color(light: rgba(21, 149, 112, 1), dark: rgba(32, 161, 119, 1))
|
||||
#elseif canImport(AppKit)
|
||||
static let canvas = Color(red: 0.953, green: 0.961, blue: 0.973)
|
||||
static let surface = Color.white
|
||||
static let control = Color(red: 0.969, green: 0.976, blue: 0.984)
|
||||
static let ink = Color(red: 0.110, green: 0.153, blue: 0.220)
|
||||
static let muted = Color(red: 0.435, green: 0.486, blue: 0.561)
|
||||
static let line = Color(red: 0.878, green: 0.898, blue: 0.922)
|
||||
static let brand = Color(red: 0.075, green: 0.118, blue: 0.188)
|
||||
static let primary = Color(red: 0.067, green: 0.467, blue: 0.431)
|
||||
static let danger = Color(red: 0.714, green: 0.302, blue: 0.282)
|
||||
static let warning = Color(red: 0.722, green: 0.471, blue: 0.067)
|
||||
static let success = Color(red: 0.082, green: 0.584, blue: 0.439)
|
||||
#else
|
||||
private static func color(_ red: CGFloat, _ green: CGFloat, _ blue: CGFloat) -> Color {
|
||||
Color(red: red / 255, green: green / 255, blue: blue / 255)
|
||||
}
|
||||
|
||||
static let canvas = color(243, 245, 248)
|
||||
static let surface = color(255, 255, 255)
|
||||
static let control = color(247, 249, 251)
|
||||
static let ink = color(28, 39, 56)
|
||||
static let muted = color(111, 124, 143)
|
||||
static let line = color(224, 229, 235)
|
||||
static let brand = color(19, 30, 48)
|
||||
static let primary = color(17, 119, 110)
|
||||
static let danger = color(182, 77, 72)
|
||||
static let warning = color(184, 120, 17)
|
||||
static let success = color(21, 149, 112)
|
||||
#endif
|
||||
}
|
||||
|
||||
public enum AITheme {
|
||||
public static let canvas = AIPalette.canvas
|
||||
public static let surface = AIPalette.surface
|
||||
public static let control = AIPalette.control
|
||||
public static let ink = AIPalette.ink
|
||||
public static let muted = AIPalette.muted
|
||||
public static let line = AIPalette.line
|
||||
public static let brand = AIPalette.brand
|
||||
public static let primary = AIPalette.primary
|
||||
public static let danger = AIPalette.danger
|
||||
public static let warning = AIPalette.warning
|
||||
public static let success = AIPalette.success
|
||||
|
||||
public static let buttonHeight: CGFloat = 44
|
||||
public static let compactButtonHeight: CGFloat = 40
|
||||
|
||||
Reference in New Issue
Block a user