mirror of
https://github.com/kunkundi/crossdesk.git
synced 2026-10-19 18:33:00 +08:00
1614 lines
66 KiB
Swift
1614 lines
66 KiB
Swift
import SwiftUI
|
||
import UIKit
|
||
import UniformTypeIdentifiers
|
||
|
||
private enum RemoteKeyboardPalette {
|
||
static let background = adaptive(light: .systemGray4,
|
||
dark: .secondarySystemBackground)
|
||
static let characterKey = adaptive(light: .white,
|
||
dark: UIColor(white: 0.36, alpha: 1))
|
||
static let specialKey = adaptive(light: .systemGray2,
|
||
dark: UIColor(white: 0.22, alpha: 1))
|
||
static let pressedKey = adaptive(light: .systemGray3,
|
||
dark: UIColor(white: 0.48, alpha: 1))
|
||
static let keyText = Color(uiColor: .label)
|
||
static let keyShadow = Color.black.opacity(0.3)
|
||
|
||
private static func adaptive(light: UIColor, dark: UIColor) -> Color {
|
||
Color(uiColor: UIColor { traits in
|
||
traits.userInterfaceStyle == .dark ? dark : light
|
||
})
|
||
}
|
||
}
|
||
|
||
private enum RemoteKeyboardMetrics {
|
||
static let keySpacing: CGFloat = 5
|
||
static let rowSpacing: CGFloat = 6
|
||
static let cornerRadius: CGFloat = 7
|
||
static let panelPadding: CGFloat = 6
|
||
}
|
||
|
||
private enum RemoteKeyboardMode: String {
|
||
case system
|
||
case computer
|
||
}
|
||
|
||
private struct RemoteViewportState: Equatable {
|
||
var scale: CGFloat = 1
|
||
var offset = CGSize.zero
|
||
}
|
||
|
||
struct RemoteSessionView: View {
|
||
@ObservedObject var session: RemoteSessionModel
|
||
@Environment(\.scenePhase) private var scenePhase
|
||
@State private var mouseInput = RemoteMouseInput()
|
||
@State private var virtualMouseVisible = false
|
||
@StateObject private var systemKeyboardContext = RemoteKeyboardInputContext()
|
||
@StateObject private var keyboardGeometry = RemoteKeyboardGeometry()
|
||
@State private var keyboardInputVisible = false
|
||
@State private var keyboardMode: RemoteKeyboardMode = .system
|
||
@State private var animateSystemKeyboardPresentation = true
|
||
@State private var waitingForSystemKeyboard = false
|
||
@State private var viewport = RemoteViewportState()
|
||
@State private var showingFileImporter = false
|
||
@State private var disconnectConfirmationVisible = false
|
||
@State private var cursorPosition: CGPoint?
|
||
@State private var statusMenuVisible = false
|
||
@State private var statusOrbCenter: CGPoint?
|
||
@GestureState private var statusOrbDragTranslation = CGSize.zero
|
||
|
||
var body: some View {
|
||
ZStack {
|
||
Color.black.ignoresSafeArea()
|
||
GeometryReader { proxy in
|
||
ZStack(alignment: .topLeading) {
|
||
if let videoRect = RemoteVideoGeometry.aspectFitRect(
|
||
containerSize: proxy.size,
|
||
videoSize: session.displayGeometrySize
|
||
) {
|
||
ZStack(alignment: .topLeading) {
|
||
NativeVideoView(
|
||
pixelBuffer: session.pixelBuffer,
|
||
frameID: session.currentVideoFrameID,
|
||
captureUptime: session.frameCaptureUptime,
|
||
onFrameSubmitted: session.recordVideoFrameSubmission,
|
||
pictureInPicture: session.pictureInPicture
|
||
)
|
||
|
||
if let cursorPosition,
|
||
session.pixelBuffer != nil {
|
||
RemoteCursorOverlay(
|
||
normalizedPosition: cursorPosition,
|
||
normalizedVisualOffset:
|
||
session.remoteCursorVisualOffset,
|
||
contentSize: videoRect.size,
|
||
viewportScale: viewport.scale,
|
||
shape: visibleCursorShape
|
||
)
|
||
.allowsHitTesting(false)
|
||
}
|
||
}
|
||
.frame(width: videoRect.width,
|
||
height: videoRect.height)
|
||
.position(x: videoRect.midX, y: videoRect.midY)
|
||
.scaleEffect(viewport.scale, anchor: .center)
|
||
.offset(viewport.offset)
|
||
}
|
||
|
||
RemoteTouchInputView(
|
||
mouseInput: mouseInput,
|
||
videoSize: session.displayGeometrySize,
|
||
controlMode: session.mouseControlMode,
|
||
remoteCursorPosition: session.remoteCursorPosition,
|
||
remoteCursorPositionRevision: session.remoteCursorPositionRevision,
|
||
viewportScale: viewport.scale,
|
||
viewportOffset: viewport.offset,
|
||
viewportChanged: { scale, offset in
|
||
// Scale and offset describe one affine transform.
|
||
// Publish them atomically so all layers observe the
|
||
// same viewport.
|
||
viewport = RemoteViewportState(scale: scale,
|
||
offset: offset)
|
||
},
|
||
move: { x, y in
|
||
mouseInput.position(x: x, y: y)
|
||
cursorPosition = CGPoint(x: CGFloat(x), y: CGFloat(y))
|
||
session.bridge.sendPointer(x: x, y: y, action: .move)
|
||
},
|
||
leftDown: { x, y in
|
||
mouseInput.position(x: x, y: y)
|
||
mouseInput.setGestureLeft(true)
|
||
},
|
||
leftUp: { x, y in
|
||
mouseInput.position(x: x, y: y)
|
||
mouseInput.setGestureLeft(false)
|
||
},
|
||
rightClick: { x, y in
|
||
systemKeyboardContext.remoteFocusWillChange()
|
||
session.bridge.sendPointer(x: x, y: y, action: .rightDown)
|
||
session.bridge.sendPointer(x: x, y: y, action: .rightUp)
|
||
},
|
||
scroll: { x, y, dx, dy in
|
||
mouseInput.position(x: x, y: y)
|
||
cursorPosition = CGPoint(x: CGFloat(x), y: CGFloat(y))
|
||
session.bridge.sendScrollX(x, y: y,
|
||
deltaX: dx, deltaY: dy)
|
||
}
|
||
)
|
||
.frame(width: proxy.size.width, height: proxy.size.height)
|
||
.allowsHitTesting(session.pixelBuffer != nil)
|
||
|
||
}
|
||
.frame(width: proxy.size.width, height: proxy.size.height)
|
||
}
|
||
.ignoresSafeArea()
|
||
.transaction { transaction in
|
||
transaction.animation = nil
|
||
transaction.disablesAnimations = true
|
||
}
|
||
|
||
if session.pixelBuffer == nil {
|
||
VStack(spacing: 12) {
|
||
ProgressView()
|
||
.tint(.white)
|
||
Text(session.videoStatus)
|
||
.font(.callout.monospacedDigit())
|
||
.foregroundStyle(.white)
|
||
}
|
||
.padding(20)
|
||
.background(.black.opacity(0.55), in: RoundedRectangle(cornerRadius: 14))
|
||
.allowsHitTesting(true)
|
||
}
|
||
|
||
if keyboardInputVisible {
|
||
ZStack {
|
||
if keyboardMode == .system {
|
||
RemoteSystemKeyboard(session: session,
|
||
inputContext: systemKeyboardContext,
|
||
geometry: keyboardGeometry,
|
||
animatePresentation: animateSystemKeyboardPresentation,
|
||
didPresent: { waitingForSystemKeyboard = false },
|
||
switchKeyboard: { keyboardMode = .computer },
|
||
dismiss: { keyboardInputVisible = false })
|
||
}
|
||
if keyboardMode == .computer || waitingForSystemKeyboard {
|
||
dockedKeyboard
|
||
}
|
||
}
|
||
.zIndex(20)
|
||
}
|
||
|
||
floatingStatusControls
|
||
.zIndex(30)
|
||
|
||
if disconnectConfirmationVisible {
|
||
disconnectConfirmationOverlay
|
||
.zIndex(50)
|
||
}
|
||
}
|
||
.alert("升级提示", isPresented: Binding(
|
||
get: { session.remoteUpdateMessage != nil },
|
||
set: { if !$0 { session.dismissRemoteUpdate() } }
|
||
)) {
|
||
Button("知道了", role: .cancel) { session.dismissRemoteUpdate() }
|
||
} message: {
|
||
Text(session.remoteUpdateMessage ?? "")
|
||
}
|
||
.onAppear {
|
||
mouseInput.send = { x, y, flag, wheel in
|
||
cursorPosition = CGPoint(x: CGFloat(x), y: CGFloat(y))
|
||
if flag == 1 || flag == 3 { systemKeyboardContext.remoteFocusWillChange() }
|
||
switch flag {
|
||
case 0: session.bridge.sendPointer(x: x, y: y, action: .move)
|
||
case 1: session.bridge.sendPointer(x: x, y: y, action: .leftDown)
|
||
case 2: session.bridge.sendPointer(x: x, y: y, action: .leftUp)
|
||
case 3: session.bridge.sendPointer(x: x, y: y, action: .rightDown)
|
||
case 4: session.bridge.sendPointer(x: x, y: y, action: .rightUp)
|
||
case 7: session.bridge.sendScrollX(x, y: y, deltaX: 0, deltaY: wheel)
|
||
default: break
|
||
}
|
||
}
|
||
if let point = session.remoteCursorPosition {
|
||
mouseInput.position(x: Float(point.x), y: Float(point.y))
|
||
}
|
||
}
|
||
.onDisappear {
|
||
mouseInput.releaseAll()
|
||
mouseInput.send = nil
|
||
virtualMouseVisible = false
|
||
keyboardInputVisible = false
|
||
viewport = RemoteViewportState()
|
||
cursorPosition = nil
|
||
statusMenuVisible = false
|
||
statusOrbCenter = nil
|
||
}
|
||
.onChange(of: session.selectedDisplay) { _ in
|
||
systemKeyboardContext.remoteFocusWillChange()
|
||
mouseInput.releaseAll()
|
||
mouseInput.position(x: 0.5, y: 0.5)
|
||
cursorPosition = nil
|
||
viewport = RemoteViewportState()
|
||
}
|
||
.onChange(of: session.mouseControlMode) { _ in
|
||
mouseInput.releaseAll()
|
||
cursorPosition = session.remoteCursorPosition
|
||
if let point = cursorPosition {
|
||
mouseInput.position(x: Float(point.x), y: Float(point.y))
|
||
}
|
||
}
|
||
.onChange(of: scenePhase) { phase in
|
||
if phase != .active { mouseInput.releaseAll() }
|
||
if phase == .background { keyboardInputVisible = false }
|
||
}
|
||
.onChange(of: keyboardInputVisible) { visible in
|
||
if !visible {
|
||
animateSystemKeyboardPresentation = true
|
||
waitingForSystemKeyboard = false
|
||
}
|
||
}
|
||
.onChange(of: session.isConnected) { connected in
|
||
if !connected {
|
||
mouseInput.releaseAll()
|
||
keyboardInputVisible = false
|
||
}
|
||
}
|
||
.onChange(of: session.remoteCursorPositionRevision) { _ in
|
||
guard !mouseInput.hasVirtualButton, let position = session.remoteCursorPosition else { return }
|
||
mouseInput.position(x: Float(position.x), y: Float(position.y))
|
||
cursorPosition = position
|
||
}
|
||
.fileImporter(isPresented: $showingFileImporter,
|
||
allowedContentTypes: [.item],
|
||
allowsMultipleSelection: false) { result in
|
||
if case let .success(urls) = result, let url = urls.first {
|
||
session.sendFile(url)
|
||
} else if case .failure = result {
|
||
session.fileImportFailed()
|
||
}
|
||
}
|
||
}
|
||
|
||
private var disconnectConfirmationOverlay: some View {
|
||
GeometryReader { proxy in
|
||
ZStack {
|
||
Color.black.opacity(0.28)
|
||
.ignoresSafeArea()
|
||
.contentShape(Rectangle())
|
||
.onTapGesture {
|
||
withAnimation(.easeOut(duration: 0.16)) {
|
||
disconnectConfirmationVisible = false
|
||
}
|
||
}
|
||
|
||
VStack(spacing: 0) {
|
||
VStack(spacing: 4) {
|
||
Text("断开远程连接？")
|
||
.font(.headline)
|
||
.foregroundStyle(Color.black.opacity(0.9))
|
||
|
||
Text("断开后将返回首页")
|
||
.font(.subheadline)
|
||
.foregroundStyle(Color.black.opacity(0.55))
|
||
}
|
||
.frame(maxWidth: .infinity)
|
||
.padding(.vertical, 14)
|
||
|
||
Divider()
|
||
|
||
Button {
|
||
disconnectConfirmationVisible = false
|
||
session.disconnect()
|
||
} label: {
|
||
Text("断开连接")
|
||
.font(.body.weight(.semibold))
|
||
.foregroundStyle(Color.red)
|
||
.frame(maxWidth: .infinity)
|
||
.frame(height: 45)
|
||
}
|
||
|
||
Divider()
|
||
|
||
Button {
|
||
withAnimation(.easeOut(duration: 0.16)) {
|
||
disconnectConfirmationVisible = false
|
||
}
|
||
} label: {
|
||
Text("取消")
|
||
.font(.body.weight(.semibold))
|
||
.foregroundStyle(Color.blue)
|
||
.frame(maxWidth: .infinity)
|
||
.frame(height: 45)
|
||
}
|
||
}
|
||
.background(
|
||
Color.white,
|
||
in: RoundedRectangle(cornerRadius: 16,
|
||
style: .continuous)
|
||
)
|
||
.clipShape(RoundedRectangle(cornerRadius: 16,
|
||
style: .continuous))
|
||
.shadow(color: .black.opacity(0.2), radius: 18, y: 7)
|
||
.frame(width: min(250, max(220, proxy.size.width - 32)))
|
||
.position(x: proxy.size.width / 2,
|
||
y: proxy.size.height / 2)
|
||
.transition(.scale(scale: 0.96).combined(with: .opacity))
|
||
}
|
||
.frame(width: proxy.size.width, height: proxy.size.height)
|
||
}
|
||
.ignoresSafeArea()
|
||
}
|
||
|
||
private var floatingStatusControls: some View {
|
||
// Keep the orb and expanded menu inside the safe area so their initial
|
||
// positions and drag bounds clear the Dynamic Island in either orientation.
|
||
GeometryReader { proxy in
|
||
let containerSize = proxy.size
|
||
let restingOrbCenter = boundedOrbCenter(in: containerSize)
|
||
let orbCenter = constrainedOrbCenter(
|
||
CGPoint(x: restingOrbCenter.x + statusOrbDragTranslation.width,
|
||
y: restingOrbCenter.y + statusOrbDragTranslation.height),
|
||
in: containerSize
|
||
)
|
||
let menuColumns = containerSize.height < 400 && containerSize.width >= 400 ? 4 : 3
|
||
let panelWidth = min(max(1, containerSize.width - 16), menuColumns == 4
|
||
? 380 : min(340, max(280, containerSize.width - 160)))
|
||
|
||
ZStack(alignment: .topLeading) {
|
||
if virtualMouseVisible && !statusMenuVisible && session.pixelBuffer != nil {
|
||
VirtualMouseBar(input: mouseInput)
|
||
.frame(width: 140, height: 48)
|
||
.position(virtualMouseCenter(orbCenter: orbCenter, in: containerSize))
|
||
}
|
||
if statusMenuVisible {
|
||
Color.clear
|
||
.contentShape(Rectangle())
|
||
.onTapGesture {
|
||
withAnimation(.easeOut(duration: 0.14)) {
|
||
statusMenuVisible = false
|
||
}
|
||
}
|
||
}
|
||
|
||
FloatingMenuLayout(orbCenter: orbCenter, panelWidth: panelWidth) {
|
||
if statusMenuVisible {
|
||
FloatingSessionMenu(
|
||
session: session,
|
||
columnCount: menuColumns,
|
||
virtualMouseVisible: virtualMouseVisible,
|
||
toggleMouse: {
|
||
mouseInput.releaseAll()
|
||
virtualMouseVisible.toggle()
|
||
statusMenuVisible = false
|
||
},
|
||
releaseMouse: mouseInput.releaseAll,
|
||
showKeyboard: {
|
||
statusMenuVisible = false
|
||
keyboardInputVisible.toggle()
|
||
},
|
||
chooseFile: {
|
||
statusMenuVisible = false
|
||
keyboardInputVisible = false
|
||
showingFileImporter = true
|
||
},
|
||
close: {
|
||
withAnimation(.easeOut(duration: 0.14)) {
|
||
statusMenuVisible = false
|
||
}
|
||
},
|
||
disconnect: {
|
||
mouseInput.releaseAll()
|
||
statusMenuVisible = false
|
||
keyboardInputVisible = false
|
||
withAnimation(.easeOut(duration: 0.18)) {
|
||
disconnectConfirmationVisible = true
|
||
}
|
||
}
|
||
)
|
||
.transition(.scale(scale: 0.94, anchor: .topTrailing)
|
||
.combined(with: .opacity))
|
||
}
|
||
}
|
||
.frame(width: containerSize.width, height: containerSize.height)
|
||
.allowsHitTesting(statusMenuVisible)
|
||
|
||
CrossDeskStatusOrb(isExpanded: statusMenuVisible)
|
||
.frame(width: 54, height: 54)
|
||
.contentShape(Circle())
|
||
.position(orbCenter)
|
||
.onTapGesture {
|
||
mouseInput.releaseAll()
|
||
withAnimation(.spring(response: 0.24,
|
||
dampingFraction: 0.84)) {
|
||
statusMenuVisible.toggle()
|
||
}
|
||
}
|
||
.gesture(
|
||
DragGesture(minimumDistance: 1)
|
||
.updating($statusOrbDragTranslation) { value, state, _ in
|
||
state = value.translation
|
||
}
|
||
.onChanged { _ in
|
||
mouseInput.releaseAll()
|
||
if statusMenuVisible {
|
||
statusMenuVisible = false
|
||
}
|
||
}
|
||
.onEnded { value in
|
||
statusOrbCenter = constrainedOrbCenter(
|
||
CGPoint(x: restingOrbCenter.x + value.translation.width,
|
||
y: restingOrbCenter.y + value.translation.height),
|
||
in: containerSize
|
||
)
|
||
}
|
||
)
|
||
}
|
||
.frame(width: containerSize.width, height: containerSize.height)
|
||
.onChange(of: containerSize) { _ in mouseInput.releaseAll() }
|
||
}
|
||
}
|
||
|
||
private func virtualMouseCenter(orbCenter: CGPoint, in size: CGSize) -> CGPoint {
|
||
let halfWidth: CGFloat = 70
|
||
let halfHeight: CGFloat = 24
|
||
let reach: CGFloat = 27 + 6 + halfWidth
|
||
var x = orbCenter.x - reach
|
||
var y = orbCenter.y
|
||
if x - halfWidth < 8 {
|
||
x = orbCenter.x + reach
|
||
if x + halfWidth > size.width - 8 {
|
||
x = orbCenter.x
|
||
y = orbCenter.y + 27 + 6 + halfHeight
|
||
if y + halfHeight > size.height - 8 {
|
||
y = orbCenter.y - 27 - 6 - halfHeight
|
||
}
|
||
}
|
||
}
|
||
x = min(max(x, halfWidth + 8), max(halfWidth + 8, size.width - halfWidth - 8))
|
||
if keyboardInputVisible && keyboardMode == .computer {
|
||
let keyboardSize = keyboardPanelSize(in: size)
|
||
let center = keyboardCenter(in: size, panelSize: keyboardSize)
|
||
let keyboardRect = CGRect(x: center.x - keyboardSize.width / 2, y: center.y - keyboardSize.height / 2, width: keyboardSize.width, height: keyboardSize.height)
|
||
if keyboardRect.intersects(CGRect(x: x - halfWidth, y: y - halfHeight, width: 140, height: 48)) {
|
||
y = keyboardRect.minY - 6 - halfHeight
|
||
if y - halfHeight < 8 { y = keyboardRect.maxY + 6 + halfHeight }
|
||
}
|
||
}
|
||
return CGPoint(x: x, y: min(max(y, halfHeight + 8), max(halfHeight + 8, size.height - halfHeight - 8)))
|
||
}
|
||
|
||
private var dockedKeyboard: some View {
|
||
GeometryReader { proxy in
|
||
let containerSize = CGSize(width: proxy.size.width,
|
||
height: proxy.size.height + proxy.safeAreaInsets.bottom)
|
||
let windowSize = CGSize(
|
||
width: proxy.size.width + proxy.safeAreaInsets.leading + proxy.safeAreaInsets.trailing,
|
||
height: containerSize.height + proxy.safeAreaInsets.top)
|
||
let panelSize = keyboardPanelSize(in: containerSize,
|
||
bottomInset: proxy.safeAreaInsets.bottom,
|
||
windowSize: windowSize)
|
||
remoteKeyboardPanel(bottomInset: proxy.safeAreaInsets.bottom)
|
||
.frame(width: panelSize.width, height: panelSize.height)
|
||
.position(keyboardCenter(in: containerSize, panelSize: panelSize))
|
||
.transaction { transaction in
|
||
transaction.animation = nil
|
||
}
|
||
}
|
||
.ignoresSafeArea(.keyboard)
|
||
}
|
||
|
||
private func remoteKeyboardPanel(bottomInset: CGFloat) -> some View {
|
||
RemoteComputerKeyboard(
|
||
session: session,
|
||
switchKeyboard: {
|
||
animateSystemKeyboardPresentation = false
|
||
waitingForSystemKeyboard = true
|
||
keyboardMode = .system
|
||
},
|
||
dismiss: { keyboardInputVisible = false }
|
||
)
|
||
.padding(.bottom, bottomInset)
|
||
.background(RemoteKeyboardPalette.background)
|
||
}
|
||
|
||
private func keyboardPanelSize(in containerSize: CGSize,
|
||
bottomInset: CGFloat = 0,
|
||
windowSize: CGSize? = nil) -> CGSize {
|
||
CGSize(width: min(780, max(0, containerSize.width)),
|
||
height: min(containerSize.height,
|
||
keyboardGeometry.panelHeight(in: windowSize ?? containerSize,
|
||
bottomInset: bottomInset)))
|
||
}
|
||
|
||
private func keyboardCenter(in containerSize: CGSize,
|
||
panelSize: CGSize) -> CGPoint {
|
||
CGPoint(x: containerSize.width / 2,
|
||
y: containerSize.height - panelSize.height / 2)
|
||
}
|
||
|
||
private func boundedOrbCenter(in size: CGSize) -> CGPoint {
|
||
let initial = statusOrbCenter ?? CGPoint(x: size.width - 39, y: 44)
|
||
return constrainedOrbCenter(initial, in: size)
|
||
}
|
||
|
||
private func constrainedOrbCenter(_ point: CGPoint, in size: CGSize) -> CGPoint {
|
||
let horizontalMargin: CGFloat = 39
|
||
let verticalMargin: CGFloat = 39
|
||
return CGPoint(
|
||
x: min(max(point.x, horizontalMargin),
|
||
max(horizontalMargin, size.width - horizontalMargin)),
|
||
y: min(max(point.y, verticalMargin),
|
||
max(verticalMargin, size.height - verticalMargin))
|
||
)
|
||
}
|
||
|
||
private var visibleCursorShape: Int {
|
||
guard session.hasRemoteCursorState,
|
||
session.remoteCursorVisible,
|
||
session.remoteCursorShape != 1 else {
|
||
// The desktop hides its native cursor from the captured frame and
|
||
// can therefore report a hidden cursor while remote input is
|
||
// active. Keep the iOS-side touch cursor visible in that state.
|
||
return 0
|
||
}
|
||
return session.remoteCursorShape
|
||
}
|
||
|
||
}
|
||
|
||
private enum RemoteKeyboardKeyStyle {
|
||
case character
|
||
case special
|
||
}
|
||
|
||
private struct RemoteKeyboardKeyCap: View {
|
||
@Environment(\.verticalSizeClass) private var verticalSizeClass
|
||
let title: String?
|
||
let symbol: String?
|
||
let style: RemoteKeyboardKeyStyle
|
||
let active: Bool
|
||
let action: () -> Void
|
||
|
||
var body: some View {
|
||
Button(action: action) {
|
||
Group {
|
||
if let symbol {
|
||
Image(systemName: symbol)
|
||
.font(.system(size: 17, weight: .regular))
|
||
} else if let title, title.contains("\n") {
|
||
let legends = title.components(separatedBy: "\n")
|
||
if verticalSizeClass == .compact {
|
||
HStack(spacing: 3) {
|
||
Text(legends[1]).font(.system(size: 17))
|
||
Text(legends[0]).font(.system(size: 10))
|
||
.foregroundStyle(.secondary)
|
||
}
|
||
} else {
|
||
VStack(spacing: 0) {
|
||
Text(legends[0])
|
||
.font(.system(size: 10))
|
||
.foregroundStyle(.secondary)
|
||
Text(legends[1])
|
||
.font(.system(size: 18))
|
||
}
|
||
}
|
||
} else {
|
||
Text(title ?? "")
|
||
.font(.system(size: labelFontSize,
|
||
weight: .regular))
|
||
.multilineTextAlignment(.center)
|
||
.lineLimit(1)
|
||
.minimumScaleFactor(0.62)
|
||
}
|
||
}
|
||
.foregroundStyle(active ? Color.black : RemoteKeyboardPalette.keyText)
|
||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||
.contentShape(Rectangle())
|
||
}
|
||
.buttonStyle(RemoteKeyboardPressStyle(backgroundColor: backgroundColor))
|
||
.accessibilityAddTraits(active ? .isSelected : [])
|
||
}
|
||
|
||
private var labelFontSize: CGFloat {
|
||
guard let title else { return 14 }
|
||
switch title.count {
|
||
case 0...1: return 20
|
||
case 2...3: return 14
|
||
default: return 14
|
||
}
|
||
}
|
||
|
||
private var backgroundColor: Color {
|
||
// Match the system keyboard's latched Shift appearance.
|
||
if active { return .white }
|
||
switch style {
|
||
case .character: return RemoteKeyboardPalette.characterKey
|
||
case .special: return RemoteKeyboardPalette.specialKey
|
||
}
|
||
}
|
||
}
|
||
|
||
private struct RemoteKeyboardPressStyle: ButtonStyle {
|
||
let backgroundColor: Color
|
||
|
||
func makeBody(configuration: Configuration) -> some View {
|
||
configuration.label
|
||
.background {
|
||
RoundedRectangle(cornerRadius: RemoteKeyboardMetrics.cornerRadius,
|
||
style: .continuous)
|
||
.fill(configuration.isPressed
|
||
? RemoteKeyboardPalette.pressedKey : backgroundColor)
|
||
.shadow(color: RemoteKeyboardPalette.keyShadow, radius: 0, y: 1)
|
||
}
|
||
}
|
||
}
|
||
|
||
private final class RemoteKeyboardFeedback: ObservableObject {
|
||
private var generator: UIImpactFeedbackGenerator?
|
||
|
||
func prepare() {
|
||
if generator == nil { generator = UIImpactFeedbackGenerator(style: .light) }
|
||
generator?.prepare()
|
||
}
|
||
|
||
func keyPressed() {
|
||
let generator = generator ?? UIImpactFeedbackGenerator(style: .light)
|
||
self.generator = generator
|
||
generator.impactOccurred(intensity: 1.0)
|
||
// Keep rapid typing responsive without repeatedly allocating generators.
|
||
generator.prepare()
|
||
}
|
||
|
||
func stop() {
|
||
generator = nil
|
||
}
|
||
}
|
||
|
||
private enum RemoteComputerKeyAction {
|
||
case stroke(UInt)
|
||
case modifier(UInt)
|
||
case switchKeyboard
|
||
case dismiss
|
||
}
|
||
|
||
private struct RemoteComputerKey {
|
||
let title: String?
|
||
let symbol: String?
|
||
let width: CGFloat
|
||
let style: RemoteKeyboardKeyStyle
|
||
let action: RemoteComputerKeyAction
|
||
|
||
init(_ title: String,
|
||
_ keyCode: UInt,
|
||
width: CGFloat = 1,
|
||
isModifier: Bool = false,
|
||
style: RemoteKeyboardKeyStyle? = nil) {
|
||
self.title = title
|
||
self.symbol = nil
|
||
self.width = width
|
||
self.style = style ?? (isModifier ? .special : .character)
|
||
self.action = isModifier ? .modifier(keyCode) : .stroke(keyCode)
|
||
}
|
||
|
||
init(_ title: String,
|
||
width: CGFloat = 1,
|
||
style: RemoteKeyboardKeyStyle = .special,
|
||
action: RemoteComputerKeyAction) {
|
||
self.title = title
|
||
self.symbol = nil
|
||
self.width = width
|
||
self.style = style
|
||
self.action = action
|
||
}
|
||
|
||
init(symbol: String,
|
||
_ keyCode: UInt,
|
||
width: CGFloat = 1,
|
||
isModifier: Bool = false,
|
||
style: RemoteKeyboardKeyStyle? = nil) {
|
||
self.title = nil
|
||
self.symbol = symbol
|
||
self.width = width
|
||
self.style = style ?? (isModifier ? .special : .character)
|
||
self.action = isModifier ? .modifier(keyCode) : .stroke(keyCode)
|
||
}
|
||
|
||
init(symbol: String,
|
||
width: CGFloat = 1,
|
||
style: RemoteKeyboardKeyStyle = .special,
|
||
action: RemoteComputerKeyAction) {
|
||
self.title = nil
|
||
self.symbol = symbol
|
||
self.width = width
|
||
self.style = style
|
||
self.action = action
|
||
}
|
||
|
||
var accessibilityLabel: String {
|
||
if let title { return title.replacingOccurrences(of: "\n", with: " ") }
|
||
switch symbol {
|
||
case "shift": return "Shift"
|
||
case "delete.left": return "退格"
|
||
default: return "键盘操作"
|
||
}
|
||
}
|
||
|
||
var modifierCode: UInt? {
|
||
if case let .modifier(keyCode) = action { return keyCode }
|
||
return nil
|
||
}
|
||
}
|
||
|
||
private enum RemoteComputerKeyboardPage: String, CaseIterable {
|
||
case input = "字母数字"
|
||
case controls = "符号功能"
|
||
|
||
var rows: [[RemoteComputerKey]] {
|
||
let shift = RemoteComputerKey(symbol: "shift", 0x10, isModifier: true)
|
||
let backspace = RemoteComputerKey(symbol: "delete.left", 0x08, style: .special)
|
||
switch self {
|
||
case .input:
|
||
return [
|
||
[.init("!\n1", 0x31), .init("@\n2", 0x32), .init("#\n3", 0x33),
|
||
.init("$\n4", 0x34), .init("%\n5", 0x35), .init("^\n6", 0x36),
|
||
.init("&\n7", 0x37), .init("*\n8", 0x38), .init("(\n9", 0x39),
|
||
.init(")\n0", 0x30)],
|
||
[.init("Q", 0x51), .init("W", 0x57), .init("E", 0x45),
|
||
.init("R", 0x52), .init("T", 0x54), .init("Y", 0x59),
|
||
.init("U", 0x55), .init("I", 0x49), .init("O", 0x4F),
|
||
.init("P", 0x50)],
|
||
[.init("A", 0x41), .init("S", 0x53), .init("D", 0x44),
|
||
.init("F", 0x46), .init("G", 0x47), .init("H", 0x48),
|
||
.init("J", 0x4A), .init("K", 0x4B), .init("L", 0x4C)],
|
||
[shift, .init("Z", 0x5A), .init("X", 0x58), .init("C", 0x43),
|
||
.init("V", 0x56), .init("B", 0x42), .init("N", 0x4E),
|
||
.init("M", 0x4D), backspace]
|
||
]
|
||
case .controls:
|
||
return [
|
||
[.init("~\n`", 0xC0), .init("_\n-", 0xBD), .init("+\n=", 0xBB),
|
||
.init("{\n[", 0xDB), .init("}\n]", 0xDD), .init("|\n\\", 0xDC),
|
||
.init(":\n;", 0xBA), .init("\"\n'", 0xDE),
|
||
.init("<\n,", 0xBC), .init(">\n.", 0xBE), .init("?\n/", 0xBF)],
|
||
[.init("F1", 0x70), .init("F2", 0x71), .init("F3", 0x72),
|
||
.init("F4", 0x73), .init("F5", 0x74), .init("F6", 0x75)],
|
||
[.init("F7", 0x76), .init("F8", 0x77), .init("F9", 0x78),
|
||
.init("F10", 0x79), .init("F11", 0x7A), .init("F12", 0x7B)],
|
||
[.init("Esc", 0x1B, style: .special), .init("Tab", 0x09, style: .special),
|
||
.init("Caps", 0x14), .init("Ins", 0x2D), .init("Del", 0x2E),
|
||
.init("Home", 0x24), .init("End", 0x23)],
|
||
[shift, .init("←", 0x25), .init("↑", 0x26), .init("↓", 0x28),
|
||
.init("→", 0x27), .init("PgUp", 0x21), .init("PgDn", 0x22), backspace]
|
||
]
|
||
}
|
||
}
|
||
|
||
func rows(compact: Bool) -> [[RemoteComputerKey]] {
|
||
let rows = self.rows
|
||
guard compact, self == .controls else { return rows }
|
||
// Landscape has room for one full function-key row, leaving the same
|
||
// five-row height budget as the input page (including common keys).
|
||
return [rows[0], rows[1] + rows[2], rows[3], rows[4]]
|
||
}
|
||
}
|
||
|
||
private struct RemoteComputerKeyboard: View {
|
||
@ObservedObject var session: RemoteSessionModel
|
||
@Environment(\.verticalSizeClass) private var verticalSizeClass
|
||
@StateObject private var feedback = RemoteKeyboardFeedback()
|
||
let switchKeyboard: () -> Void
|
||
let dismiss: () -> Void
|
||
@State private var activeModifiers: Set<UInt> = []
|
||
@State private var page: RemoteComputerKeyboardPage = .input
|
||
|
||
private static let commonRow: [RemoteComputerKey] = [
|
||
.init("Ctrl", 0x11, isModifier: true),
|
||
.init("Win", 0x5B, isModifier: true),
|
||
.init("Alt", 0x12, isModifier: true),
|
||
.init("空格", 0x20, width: 2.6),
|
||
.init("回车", 0x0D, width: 1.4, style: .special)
|
||
]
|
||
|
||
var body: some View {
|
||
VStack(spacing: 0) {
|
||
HStack(spacing: 4) {
|
||
Button("系统键盘") {
|
||
feedback.keyPressed()
|
||
releaseModifiers()
|
||
switchKeyboard()
|
||
}
|
||
.font(.system(size: 15, weight: .medium))
|
||
.frame(width: 80, height: 44)
|
||
.accessibilityLabel("切换到系统键盘")
|
||
if verticalSizeClass == .compact {
|
||
pageTabs
|
||
} else {
|
||
Spacer(minLength: 0)
|
||
}
|
||
RemoteKeyboardDismissButton(accessibilityLabel: "收起电脑键盘") {
|
||
feedback.keyPressed()
|
||
releaseModifiers()
|
||
dismiss()
|
||
}
|
||
.frame(width: RemoteKeyboardDismissButton.sideLength,
|
||
height: RemoteKeyboardDismissButton.sideLength)
|
||
}
|
||
.padding(.horizontal, 4)
|
||
.frame(height: 44)
|
||
|
||
if verticalSizeClass != .compact {
|
||
pageTabs
|
||
.padding(.horizontal, RemoteKeyboardMetrics.panelPadding)
|
||
}
|
||
|
||
GeometryReader { proxy in
|
||
// Anchor both bottom rows to the input page's dimensions so
|
||
// shared controls keep their size and position across pages.
|
||
let inputRows = RemoteComputerKeyboardPage.input
|
||
.rows(compact: verticalSizeClass == .compact)
|
||
let rows = page.rows(compact: verticalSizeClass == .compact)
|
||
let inputRowCount = CGFloat(inputRows.count)
|
||
let sharedRowHeight = max(0, (proxy.size.height -
|
||
inputRowCount * RemoteKeyboardMetrics.rowSpacing) / (inputRowCount + 1))
|
||
let inputEdgeRow = inputRows.last ?? []
|
||
let edgeKeyWidth = max(0, proxy.size.width -
|
||
CGFloat(max(0, inputEdgeRow.count - 1)) * RemoteKeyboardMetrics.keySpacing) /
|
||
max(1, inputEdgeRow.reduce(CGFloat.zero) { $0 + $1.width })
|
||
|
||
VStack(spacing: RemoteKeyboardMetrics.rowSpacing) {
|
||
VStack(spacing: RemoteKeyboardMetrics.rowSpacing) {
|
||
ForEach(Array(rows.dropLast().enumerated()), id: \.offset) { _, row in
|
||
RemoteComputerKeyboardRow(
|
||
keys: row,
|
||
activeModifiers: activeModifiers,
|
||
action: handleKey
|
||
)
|
||
}
|
||
}
|
||
.frame(maxHeight: .infinity)
|
||
|
||
if let row = rows.last {
|
||
RemoteComputerKeyboardRow(
|
||
keys: row,
|
||
activeModifiers: activeModifiers,
|
||
action: handleKey,
|
||
fixedEdgeWidth: edgeKeyWidth
|
||
)
|
||
.frame(height: sharedRowHeight)
|
||
}
|
||
|
||
RemoteComputerKeyboardRow(
|
||
keys: Self.commonRow,
|
||
activeModifiers: activeModifiers,
|
||
action: handleKey
|
||
)
|
||
.frame(height: sharedRowHeight)
|
||
}
|
||
.frame(width: proxy.size.width, height: proxy.size.height)
|
||
}
|
||
.padding(RemoteKeyboardMetrics.panelPadding)
|
||
}
|
||
.foregroundStyle(RemoteKeyboardPalette.keyText)
|
||
.buttonStyle(.plain)
|
||
.background(RemoteKeyboardPalette.background)
|
||
.onAppear { feedback.prepare() }
|
||
.onDisappear {
|
||
releaseModifiers()
|
||
feedback.stop()
|
||
}
|
||
}
|
||
|
||
private var pageTabs: some View {
|
||
HStack(spacing: 6) {
|
||
ForEach(RemoteComputerKeyboardPage.allCases, id: \.self) { item in
|
||
Button {
|
||
guard page != item else { return }
|
||
feedback.keyPressed()
|
||
page = item
|
||
} label: {
|
||
Text(item.rawValue)
|
||
.font(.system(size: 14, weight: page == item ? .semibold : .regular))
|
||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||
.background(page == item ? RemoteKeyboardPalette.specialKey : .clear,
|
||
in: RoundedRectangle(cornerRadius: 6))
|
||
.contentShape(Rectangle())
|
||
}
|
||
.accessibilityLabel("\(item.rawValue)键盘页")
|
||
.accessibilityAddTraits(page == item ? .isSelected : [])
|
||
}
|
||
}
|
||
.frame(height: 36)
|
||
}
|
||
|
||
private func handleKey(_ key: RemoteComputerKey) {
|
||
feedback.keyPressed()
|
||
switch key.action {
|
||
case let .modifier(keyCode):
|
||
if activeModifiers.contains(keyCode) {
|
||
session.sendKeyState(keyCode, isDown: false)
|
||
activeModifiers.remove(keyCode)
|
||
} else {
|
||
session.sendKeyState(keyCode, isDown: true)
|
||
activeModifiers.insert(keyCode)
|
||
}
|
||
case let .stroke(keyCode):
|
||
session.sendKeyStroke(keyCode)
|
||
case .switchKeyboard:
|
||
releaseModifiers()
|
||
switchKeyboard()
|
||
case .dismiss:
|
||
releaseModifiers()
|
||
dismiss()
|
||
}
|
||
}
|
||
|
||
private func releaseModifiers() {
|
||
for keyCode in activeModifiers {
|
||
session.sendKeyState(keyCode, isDown: false)
|
||
}
|
||
activeModifiers.removeAll()
|
||
}
|
||
}
|
||
|
||
private struct RemoteComputerKeyboardRow: View {
|
||
let keys: [RemoteComputerKey]
|
||
let activeModifiers: Set<UInt>
|
||
let action: (RemoteComputerKey) -> Void
|
||
var fixedEdgeWidth: CGFloat? = nil
|
||
|
||
var body: some View {
|
||
GeometryReader { proxy in
|
||
let spacing = RemoteKeyboardMetrics.keySpacing
|
||
let edgeWidth = keys.count > 2 ? fixedEdgeWidth : nil
|
||
let flexibleKeys = edgeWidth == nil ? keys[...] : keys.dropFirst().dropLast()
|
||
let totalWidth = flexibleKeys.reduce(CGFloat.zero) { $0 + $1.width }
|
||
let keySpace = max(0, proxy.size.width -
|
||
2 * (edgeWidth ?? 0) -
|
||
CGFloat(max(0, keys.count - 1)) * spacing)
|
||
let unitWidth = keySpace / totalWidth
|
||
|
||
HStack(spacing: spacing) {
|
||
ForEach(Array(keys.enumerated()), id: \.offset) { index, key in
|
||
let width = index == 0 || index == keys.count - 1
|
||
? (edgeWidth ?? unitWidth * key.width) : unitWidth * key.width
|
||
let isActive = key.modifierCode.map(activeModifiers.contains) ?? false
|
||
let visibleSymbol = isActive && key.symbol == "shift"
|
||
? "shift.fill" : key.symbol
|
||
RemoteKeyboardKeyCap(
|
||
title: key.title,
|
||
symbol: visibleSymbol,
|
||
style: key.style,
|
||
active: isActive
|
||
) {
|
||
action(key)
|
||
}
|
||
.frame(width: width)
|
||
.accessibilityLabel(key.accessibilityLabel)
|
||
}
|
||
}
|
||
.frame(width: proxy.size.width, height: proxy.size.height)
|
||
}
|
||
.frame(maxHeight: .infinity)
|
||
}
|
||
}
|
||
|
||
private struct CrossDeskStatusOrb: View {
|
||
let isExpanded: Bool
|
||
|
||
private static let appIcon: UIImage? = {
|
||
let primaryIcon = (Bundle.main.infoDictionary?["CFBundleIcons"]
|
||
as? [String: Any])?["CFBundlePrimaryIcon"] as? [String: Any]
|
||
let iconName = primaryIcon?["CFBundleIconName"] as? String
|
||
let iconFiles = primaryIcon?["CFBundleIconFiles"] as? [String]
|
||
return iconName.flatMap(UIImage.init(named:))
|
||
?? iconFiles?.last.flatMap(UIImage.init(named:))
|
||
?? UIImage(named: "AppIcon")
|
||
}()
|
||
|
||
var body: some View {
|
||
ZStack(alignment: .bottomTrailing) {
|
||
Circle()
|
||
.fill(Color(.secondarySystemBackground).opacity(0.96))
|
||
|
||
if let icon = Self.appIcon {
|
||
Image(uiImage: icon)
|
||
.resizable()
|
||
.scaledToFill()
|
||
.clipShape(Circle())
|
||
.padding(4)
|
||
} else {
|
||
Image(systemName: "desktopcomputer")
|
||
.font(.system(size: 22, weight: .semibold))
|
||
.foregroundStyle(.blue)
|
||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||
}
|
||
}
|
||
.overlay {
|
||
Circle()
|
||
.stroke(Color.white.opacity(isExpanded ? 0.95 : 0.65),
|
||
lineWidth: isExpanded ? 2 : 1)
|
||
}
|
||
.compositingGroup()
|
||
.accessibilityLabel(isExpanded ? "收起远程控制菜单" : "展开远程控制菜单")
|
||
}
|
||
}
|
||
|
||
/// Measure the menu before positioning it; no fixed height or later-frame
|
||
/// preference update is needed when changing pages, text size or orientation.
|
||
private struct FloatingMenuLayout: Layout {
|
||
let orbCenter: CGPoint
|
||
let panelWidth: CGFloat
|
||
|
||
func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews,
|
||
cache: inout ()) -> CGSize {
|
||
proposal.replacingUnspecifiedDimensions()
|
||
}
|
||
|
||
func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize,
|
||
subviews: Subviews, cache: inout ()) {
|
||
guard let menu = subviews.first else { return }
|
||
let size = menu.sizeThatFits(ProposedViewSize(
|
||
width: panelWidth, height: max(0, bounds.height - 16)))
|
||
let preferredX = orbCenter.x > bounds.width / 2
|
||
? orbCenter.x - 39 - size.width / 2
|
||
: orbCenter.x + 39 + size.width / 2
|
||
let center = CGPoint(
|
||
x: bounds.minX + min(max(preferredX, size.width / 2 + 8),
|
||
bounds.width - size.width / 2 - 8),
|
||
y: bounds.minY + min(max(orbCenter.y, size.height / 2 + 8),
|
||
bounds.height - size.height / 2 - 8))
|
||
menu.place(at: center, anchor: .center, proposal: ProposedViewSize(size))
|
||
}
|
||
}
|
||
|
||
private struct FloatingSessionMenu: View {
|
||
@ObservedObject var session: RemoteSessionModel
|
||
let virtualMouseVisible: Bool
|
||
let toggleMouse: () -> Void
|
||
let releaseMouse: () -> Void
|
||
private enum Page { case controls, videoSettings, networkStats }
|
||
@State private var page: Page = .controls
|
||
@State private var displayedNetworkSnapshot: RemoteNetworkSnapshot
|
||
@State private var displayedFrameSize: CGSize
|
||
let showKeyboard: () -> Void
|
||
let chooseFile: () -> Void
|
||
let close: () -> Void
|
||
let disconnect: () -> Void
|
||
|
||
let columnCount: Int
|
||
private var columns: [GridItem] {
|
||
Array(repeating: GridItem(.flexible(), spacing: 7), count: columnCount)
|
||
}
|
||
|
||
init(session: RemoteSessionModel,
|
||
columnCount: Int,
|
||
virtualMouseVisible: Bool,
|
||
toggleMouse: @escaping () -> Void,
|
||
releaseMouse: @escaping () -> Void,
|
||
showKeyboard: @escaping () -> Void,
|
||
chooseFile: @escaping () -> Void,
|
||
close: @escaping () -> Void,
|
||
disconnect: @escaping () -> Void) {
|
||
self.session = session
|
||
self.columnCount = columnCount
|
||
self.virtualMouseVisible = virtualMouseVisible
|
||
self.toggleMouse = toggleMouse
|
||
self.releaseMouse = releaseMouse
|
||
self.showKeyboard = showKeyboard
|
||
self.chooseFile = chooseFile
|
||
self.close = close
|
||
self.disconnect = disconnect
|
||
// Render the first frame with real values instead of replacing empty
|
||
// placeholders while the panel's insertion animation is running.
|
||
_displayedNetworkSnapshot = State(initialValue: session.networkSnapshot)
|
||
_displayedFrameSize = State(initialValue: session.frameSize)
|
||
}
|
||
|
||
var body: some View {
|
||
// Prefer the full natural-height panel. Only use a scrolling body when
|
||
// the available safe-area height cannot contain all of its content.
|
||
ViewThatFits(in: .vertical) {
|
||
panel(scrolls: false).fixedSize(horizontal: false, vertical: true)
|
||
panel(scrolls: true)
|
||
}
|
||
.padding(12)
|
||
.background(Color.white,
|
||
in: RoundedRectangle(cornerRadius: 18, style: .continuous))
|
||
.overlay {
|
||
RoundedRectangle(cornerRadius: 18, style: .continuous)
|
||
.stroke(Color(.separator).opacity(0.24), lineWidth: 1)
|
||
}
|
||
.shadow(color: .black.opacity(0.34), radius: 18, y: 7)
|
||
.environment(\.colorScheme, .light)
|
||
.task(id: session.selectedDisplay) {
|
||
// This task survives ordinary video-frame redraws and is cancelled
|
||
// when the menu closes. Rendering only reads the sampled values.
|
||
while !Task.isCancelled {
|
||
displayedNetworkSnapshot = session.networkSnapshot
|
||
displayedFrameSize = session.frameSize
|
||
do {
|
||
try await Task.sleep(nanoseconds: 1_000_000_000)
|
||
} catch {
|
||
return
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
private func panel(scrolls: Bool) -> some View {
|
||
VStack(spacing: 9) {
|
||
menuHeader
|
||
if scrolls {
|
||
ScrollView { menuContent }
|
||
} else {
|
||
menuContent
|
||
}
|
||
disconnectButton
|
||
}
|
||
}
|
||
|
||
@ViewBuilder private var menuHeader: some View {
|
||
HStack(spacing: 8) {
|
||
if page != .controls {
|
||
Button {
|
||
page = .controls
|
||
} label: {
|
||
Image(systemName: "chevron.left")
|
||
.frame(width: 28, height: 32)
|
||
}
|
||
.buttonStyle(.plain)
|
||
.accessibilityLabel("返回控制栏")
|
||
Text(page == .videoSettings ? "画面设置" : "网络状态")
|
||
.font(.subheadline.weight(.semibold))
|
||
} else {
|
||
Circle()
|
||
.fill(session.isConnected ? Color.green : Color.orange)
|
||
.frame(width: 9, height: 9)
|
||
VStack(alignment: .leading, spacing: 1) {
|
||
Text(session.connectionStatus)
|
||
.font(.subheadline.weight(.semibold))
|
||
.lineLimit(1)
|
||
Text(statusDetail)
|
||
.font(.caption2.monospacedDigit())
|
||
.foregroundStyle(.secondary)
|
||
.lineLimit(1)
|
||
}
|
||
}
|
||
Spacer()
|
||
Button(action: close) {
|
||
Image(systemName: "xmark.circle.fill")
|
||
.font(.title3)
|
||
.foregroundStyle(.secondary)
|
||
}
|
||
.buttonStyle(.plain)
|
||
.accessibilityLabel("关闭控制栏")
|
||
}
|
||
|
||
if page == .videoSettings, !session.videoSettingsFeedback.isEmpty {
|
||
Text(session.videoSettingsFeedback)
|
||
.font(.caption)
|
||
.foregroundStyle(.secondary)
|
||
.frame(maxWidth: .infinity, alignment: .leading)
|
||
}
|
||
}
|
||
|
||
@ViewBuilder private var menuContent: some View {
|
||
if page == .videoSettings {
|
||
FloatingVideoSettings(session: session)
|
||
} else if page == .networkStats {
|
||
FloatingNetworkStatistics(snapshot: displayedNetworkSnapshot,
|
||
frameSize: displayedFrameSize)
|
||
} else {
|
||
VStack(spacing: 9) {
|
||
LazyVGrid(columns: columns, spacing: 7) {
|
||
FloatingControlButton(title: "键盘", symbol: "keyboard",
|
||
action: showKeyboard)
|
||
FloatingControlButton(
|
||
title: session.mouseControlMode == .relative ? "相对鼠标" : "绝对鼠标",
|
||
symbol: "computermouse",
|
||
action: {
|
||
session.mouseControlMode = session.mouseControlMode == .relative
|
||
? .absolute : .relative
|
||
}
|
||
)
|
||
FloatingControlButton(title: virtualMouseVisible ? "收起鼠标" : "虚拟鼠标",
|
||
symbol: "computermouse", action: toggleMouse)
|
||
|
||
Menu {
|
||
ForEach(Array(session.displays.enumerated()), id: \.offset) { index, name in
|
||
Button {
|
||
releaseMouse()
|
||
session.selectDisplay(index)
|
||
} label: {
|
||
if index == session.selectedDisplay {
|
||
Label(name, systemImage: "checkmark")
|
||
} else {
|
||
Text(name)
|
||
}
|
||
}
|
||
}
|
||
} label: {
|
||
FloatingControlLabel(title: "显示器", symbol: "display")
|
||
}
|
||
.buttonStyle(.plain)
|
||
|
||
FloatingControlButton(title: "画面设置", symbol: "slider.horizontal.3") {
|
||
page = .videoSettings
|
||
}
|
||
FloatingControlButton(
|
||
title: session.audioEnabled ? "声音" : "静音",
|
||
symbol: session.audioEnabled ? "speaker.wave.2" : "speaker.slash",
|
||
action: session.toggleAudio
|
||
)
|
||
FloatingControlButton(title: "发送文件",
|
||
symbol: "folder.badge.plus",
|
||
action: chooseFile)
|
||
FloatingControlButton(title: "网络状态", symbol: "chart.bar.xaxis") {
|
||
page = .networkStats
|
||
}
|
||
FloatingControlButton(title: "Ctrl+Alt+Del",
|
||
symbol: "lock.trianglebadge.exclamationmark",
|
||
action: session.sendSecureAttention)
|
||
FloatingControlButton(title: "剪贴板", symbol: "doc.on.clipboard",
|
||
action: session.sendClipboard)
|
||
}
|
||
|
||
if !session.controlStatus.isEmpty {
|
||
Text(session.controlStatus).font(.caption2).foregroundStyle(.secondary)
|
||
}
|
||
if !session.clipboardStatus.isEmpty {
|
||
Text(session.clipboardStatus).font(.caption2).foregroundStyle(.secondary)
|
||
}
|
||
|
||
if !session.transferStatus.isEmpty {
|
||
HStack(spacing: 8) {
|
||
Text(session.transferStatus)
|
||
.font(.caption2)
|
||
.foregroundStyle(.secondary)
|
||
.lineLimit(1)
|
||
Spacer(minLength: 0)
|
||
if session.transferProgress > 0 && session.transferProgress < 1 {
|
||
ProgressView(value: session.transferProgress)
|
||
.frame(width: 60)
|
||
}
|
||
if let file = session.receivedFileURL {
|
||
ShareLink(item: file) {
|
||
Image(systemName: "square.and.arrow.up")
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
private var disconnectButton: some View {
|
||
Button(role: .destructive, action: disconnect) {
|
||
Text("断开连接")
|
||
.font(.subheadline.weight(.semibold))
|
||
.frame(maxWidth: .infinity)
|
||
.frame(height: 34)
|
||
}
|
||
.buttonStyle(.borderedProminent)
|
||
.tint(.red)
|
||
}
|
||
|
||
private var statusDetail: String {
|
||
let snapshot = displayedNetworkSnapshot
|
||
var components = [snapshot.connectionMode]
|
||
let frameSize = displayedFrameSize
|
||
if frameSize.width > 0 && frameSize.height > 0 {
|
||
components.append("\(Int(frameSize.width))×\(Int(frameSize.height))")
|
||
}
|
||
components.append(RemoteNetworkSnapshot.bitrate(snapshot.report?.total.inboundBitrate))
|
||
if let loss = snapshot.report?.video.lossRate, loss > 0 {
|
||
components.append("丢包 \(RemoteNetworkSnapshot.lossRate(loss))")
|
||
}
|
||
return components.joined(separator: " · ")
|
||
}
|
||
}
|
||
|
||
private struct FloatingNetworkStatistics: View {
|
||
let snapshot: RemoteNetworkSnapshot
|
||
let frameSize: CGSize
|
||
|
||
var body: some View {
|
||
VStack(spacing: 10) {
|
||
VStack(spacing: 0) {
|
||
trafficRow("", inbound: "接收", outbound: "发送", loss: "丢包率")
|
||
.foregroundStyle(.secondary)
|
||
trafficRow("视频", statistics: snapshot.report?.video)
|
||
trafficRow("音频", statistics: snapshot.report?.audio)
|
||
trafficRow("数据", statistics: snapshot.report?.data)
|
||
trafficRow("合计", statistics: snapshot.report?.total)
|
||
.fontWeight(.semibold)
|
||
.background(Color.blue.opacity(0.07), in: RoundedRectangle(cornerRadius: 5))
|
||
}
|
||
.font(.caption2.monospacedDigit())
|
||
|
||
Divider()
|
||
|
||
VStack(spacing: 7) {
|
||
detail("帧率", value: "\(snapshot.framesPerSecond) FPS")
|
||
detail("分辨率", value: resolution)
|
||
detail("画面延时", value: RemoteNetworkSnapshot.latency(snapshot.videoLatencyMilliseconds))
|
||
detail("连接延时（RTT）", value: RemoteNetworkSnapshot.latency(snapshot.rttMilliseconds))
|
||
detail("连接方式", value: snapshot.connectionMode)
|
||
HStack {
|
||
Text("媒体加密")
|
||
.foregroundStyle(.secondary)
|
||
Spacer(minLength: 8)
|
||
if let report = snapshot.report {
|
||
Label(report.srtpActive ? "SRTP 已启用" : "未启用",
|
||
systemImage: report.srtpActive ? "lock.shield" : "lock.open")
|
||
.foregroundStyle(report.srtpActive ? Color.green : Color.secondary)
|
||
} else {
|
||
Text("—")
|
||
}
|
||
}
|
||
.accessibilityElement(children: .combine)
|
||
}
|
||
.font(.caption.monospacedDigit())
|
||
}
|
||
.padding(.vertical, 2)
|
||
}
|
||
|
||
private var resolution: String {
|
||
guard frameSize.width > 0, frameSize.height > 0 else { return "—" }
|
||
return "\(Int(frameSize.width)) × \(Int(frameSize.height))"
|
||
}
|
||
|
||
private func detail(_ title: String, value: String) -> some View {
|
||
HStack {
|
||
Text(title).foregroundStyle(.secondary)
|
||
Spacer(minLength: 8)
|
||
Text(value)
|
||
}
|
||
.accessibilityElement(children: .combine)
|
||
}
|
||
|
||
private func trafficRow(_ title: String, statistics: RemoteTrafficStatistics?) -> some View {
|
||
trafficRow(title,
|
||
inbound: RemoteNetworkSnapshot.bitrate(statistics?.inboundBitrate),
|
||
outbound: RemoteNetworkSnapshot.bitrate(statistics?.outboundBitrate),
|
||
loss: RemoteNetworkSnapshot.lossRate(statistics?.lossRate))
|
||
.accessibilityLabel("\(title)，接收 \(RemoteNetworkSnapshot.bitrate(statistics?.inboundBitrate))，发送 \(RemoteNetworkSnapshot.bitrate(statistics?.outboundBitrate))，丢包率 \(RemoteNetworkSnapshot.lossRate(statistics?.lossRate))")
|
||
}
|
||
|
||
private func trafficRow(_ title: String, inbound: String,
|
||
outbound: String, loss: String) -> some View {
|
||
HStack(spacing: 4) {
|
||
Text(title).frame(width: 28, alignment: .leading)
|
||
Text(inbound).frame(maxWidth: .infinity, alignment: .trailing)
|
||
Text(outbound).frame(maxWidth: .infinity, alignment: .trailing)
|
||
Text(loss).frame(width: 46, alignment: .trailing)
|
||
}
|
||
.lineLimit(1)
|
||
.minimumScaleFactor(0.75)
|
||
.padding(.horizontal, 4)
|
||
.padding(.vertical, 5)
|
||
.accessibilityElement(children: .combine)
|
||
}
|
||
}
|
||
|
||
private struct FloatingVideoSettings: View {
|
||
@ObservedObject var session: RemoteSessionModel
|
||
|
||
var body: some View {
|
||
VStack(alignment: .leading, spacing: 12) {
|
||
settingRow("画面质量", options: ["低", "中", "高"],
|
||
values: [0, 1, 2], selection: Binding(
|
||
get: { session.videoSettings.selection.quality },
|
||
set: { session.updateVideoSettings(quality: $0) }
|
||
))
|
||
settingRow("画面采集帧率", options: ["30 fps", "60 fps"],
|
||
values: [30, 60], selection: Binding(
|
||
get: { session.videoSettings.selection.frameRate },
|
||
set: { session.updateVideoSettings(frameRate: $0) }
|
||
))
|
||
settingRow("画面偏好", options: VideoAdaptationPolicy.allCases.map(\.title),
|
||
values: VideoAdaptationPolicy.allCases.map { $0.bridgeValue.rawValue },
|
||
selection: Binding(
|
||
get: { session.videoSettings.selection.preference },
|
||
set: { session.updateVideoSettings(preference: $0) }
|
||
))
|
||
}
|
||
.padding(.vertical, 2)
|
||
}
|
||
|
||
private func settingRow(_ title: String, options: [String], values: [Int],
|
||
selection: Binding<Int>) -> some View {
|
||
VStack(alignment: .leading, spacing: 5) {
|
||
Text(title)
|
||
.font(.caption)
|
||
.foregroundStyle(.secondary)
|
||
Picker(title, selection: selection) {
|
||
ForEach(options.indices, id: \.self) { index in
|
||
Text(options[index]).tag(values[index])
|
||
}
|
||
}
|
||
.pickerStyle(.segmented)
|
||
.disabled(!session.canChangeVideoSettings)
|
||
}
|
||
}
|
||
}
|
||
|
||
private struct FloatingControlButton: View {
|
||
let title: String
|
||
let symbol: String
|
||
let action: () -> Void
|
||
|
||
var body: some View {
|
||
Button(action: action) {
|
||
FloatingControlLabel(title: title, symbol: symbol)
|
||
}
|
||
.buttonStyle(.plain)
|
||
}
|
||
}
|
||
|
||
private struct FloatingControlLabel: View {
|
||
let title: String
|
||
let symbol: String
|
||
|
||
var body: some View {
|
||
VStack(spacing: 4) {
|
||
Image(systemName: symbol)
|
||
.font(.system(size: 16, weight: .semibold))
|
||
Text(title)
|
||
.font(.system(size: 9.5, weight: .medium))
|
||
.lineLimit(1)
|
||
.minimumScaleFactor(0.72)
|
||
}
|
||
.foregroundStyle(.primary)
|
||
.frame(maxWidth: .infinity)
|
||
.frame(height: 52)
|
||
.background(Color.primary.opacity(0.07),
|
||
in: RoundedRectangle(cornerRadius: 10, style: .continuous))
|
||
}
|
||
}
|
||
|
||
private struct RemoteCursorOverlay: View {
|
||
let normalizedPosition: CGPoint
|
||
let normalizedVisualOffset: CGPoint
|
||
let contentSize: CGSize
|
||
let viewportScale: CGFloat
|
||
let shape: Int
|
||
|
||
var body: some View {
|
||
let scale = max(viewportScale, 0.0001)
|
||
let x = min(max(normalizedPosition.x + normalizedVisualOffset.x, 0), 1) *
|
||
contentSize.width
|
||
let y = min(max(normalizedPosition.y + normalizedVisualOffset.y, 0), 1) *
|
||
contentSize.height
|
||
let offset = RemoteCursorGlyph.hotspotOffset(for: shape)
|
||
|
||
ZStack(alignment: .topLeading) {
|
||
RemoteCursorGlyph(shape: shape)
|
||
// The cursor lives inside the exact same transformed view as
|
||
// the decoded frame, so its anchor cannot drift from video
|
||
// because of an independently reconstructed transform. Undo
|
||
// the outer zoom for the glyph itself and pre-divide the
|
||
// hotspot offset so the cursor remains a constant screen size.
|
||
.scaleEffect(1 / scale, anchor: .center)
|
||
.position(x: x + offset.x / scale,
|
||
y: y + offset.y / scale)
|
||
}
|
||
.frame(width: contentSize.width, height: contentSize.height,
|
||
alignment: .topLeading)
|
||
}
|
||
}
|
||
|
||
private struct RemoteCursorGlyph: View {
|
||
let shape: Int
|
||
|
||
var body: some View {
|
||
Group {
|
||
if shape == 0 {
|
||
ZStack {
|
||
RemoteCursorArrowShape()
|
||
.stroke(Color.black, lineWidth: 1.75)
|
||
RemoteCursorArrowShape()
|
||
.fill(Color.white)
|
||
}
|
||
.frame(width: 12, height: 15)
|
||
} else if shape == 7 {
|
||
ZStack {
|
||
RemoteIBeamShape()
|
||
.stroke(Color.black, lineWidth: 2.5)
|
||
RemoteIBeamShape()
|
||
.stroke(Color.white, lineWidth: 1)
|
||
}
|
||
.frame(width: 12, height: 15)
|
||
} else {
|
||
Image(systemName: availableSymbolName)
|
||
.font(.system(size: 10.5, weight: .black))
|
||
.symbolRenderingMode(.monochrome)
|
||
.foregroundStyle(.white)
|
||
.shadow(color: .black, radius: 0.75)
|
||
}
|
||
}
|
||
.frame(width: 15, height: 15)
|
||
.accessibilityHidden(true)
|
||
}
|
||
|
||
static func hotspotOffset(for shape: Int) -> CGPoint {
|
||
switch shape {
|
||
case 0:
|
||
// The arrow path's visual tip is near (2.5, 0.6) inside its
|
||
// 15-point container, rather than at the container origin.
|
||
return CGPoint(x: 5, y: 7)
|
||
case 3:
|
||
return CGPoint(x: 4.5, y: 4.5)
|
||
default:
|
||
return .zero
|
||
}
|
||
}
|
||
|
||
private var availableSymbolName: String {
|
||
let desired: String
|
||
switch shape {
|
||
case 2: desired = "questionmark.circle.fill"
|
||
case 3: desired = "hand.point.up.left.fill"
|
||
case 4: desired = "arrow.triangle.2.circlepath"
|
||
case 5: desired = "hourglass"
|
||
case 6: desired = "scope"
|
||
case 8: desired = "arrow.turn.up.right"
|
||
case 9: desired = "plus.square.on.square"
|
||
case 10: desired = "arrow.up.and.down.and.arrow.left.and.right"
|
||
case 11, 12: desired = "nosign"
|
||
case 13, 14: desired = "hand.raised.fill"
|
||
case 15, 25: desired = "arrow.left.and.right"
|
||
case 16, 26: desired = "arrow.up.and.down"
|
||
case 17: desired = "arrow.up"
|
||
case 18: desired = "arrow.right"
|
||
case 19: desired = "arrow.down"
|
||
case 20: desired = "arrow.left"
|
||
case 21: desired = "arrow.up.right"
|
||
case 22: desired = "arrow.up.left"
|
||
case 23: desired = "arrow.down.right"
|
||
case 24: desired = "arrow.down.left"
|
||
case 27: desired = "arrow.up.right.and.arrow.down.left"
|
||
case 28: desired = "arrow.up.left.and.arrow.down.right"
|
||
default: desired = "arrow.up.left"
|
||
}
|
||
return UIImage(systemName: desired) == nil ? "arrow.up.left" : desired
|
||
}
|
||
}
|
||
|
||
private struct RemoteCursorArrowShape: Shape {
|
||
func path(in rect: CGRect) -> Path {
|
||
var path = Path()
|
||
path.move(to: CGPoint(x: rect.minX + rect.width * 0.08,
|
||
y: rect.minY + rect.height * 0.04))
|
||
path.addLine(to: CGPoint(x: rect.minX + rect.width * 0.08,
|
||
y: rect.minY + rect.height * 0.78))
|
||
path.addLine(to: CGPoint(x: rect.minX + rect.width * 0.34,
|
||
y: rect.minY + rect.height * 0.60))
|
||
path.addLine(to: CGPoint(x: rect.minX + rect.width * 0.55,
|
||
y: rect.minY + rect.height * 0.94))
|
||
path.addLine(to: CGPoint(x: rect.minX + rect.width * 0.73,
|
||
y: rect.minY + rect.height * 0.84))
|
||
path.addLine(to: CGPoint(x: rect.minX + rect.width * 0.52,
|
||
y: rect.minY + rect.height * 0.51))
|
||
path.addLine(to: CGPoint(x: rect.minX + rect.width * 0.88,
|
||
y: rect.minY + rect.height * 0.49))
|
||
path.closeSubpath()
|
||
return path
|
||
}
|
||
}
|
||
|
||
private struct RemoteIBeamShape: Shape {
|
||
func path(in rect: CGRect) -> Path {
|
||
var path = Path()
|
||
let centerX = rect.midX
|
||
let top = rect.minY + 2
|
||
let bottom = rect.maxY - 2
|
||
path.move(to: CGPoint(x: centerX, y: top))
|
||
path.addLine(to: CGPoint(x: centerX, y: bottom))
|
||
path.move(to: CGPoint(x: rect.minX + 5, y: top))
|
||
path.addLine(to: CGPoint(x: rect.maxX - 5, y: top))
|
||
path.move(to: CGPoint(x: rect.minX + 5, y: bottom))
|
||
path.addLine(to: CGPoint(x: rect.maxX - 5, y: bottom))
|
||
return path
|
||
}
|
||
}
|