From 076ba18859bfd53406963b93437de62ef7944da9 Mon Sep 17 00:00:00 2001 From: v504 Date: Thu, 21 Aug 2025 16:07:29 +0800 Subject: [PATCH] Refactor ContentView to improve UI layout and user experience; replace existing components with a modern design featuring gradient backgrounds, enhanced navigation links for QR code creation, scanning, and history, while removing unused state management for scanned results. --- MyQrCode/ContentView.swift | 270 +++++++++++++++++------------- MyQrCode/Views/SettingsView.swift | 240 ++++++++++++++++++++++++++ 2 files changed, 396 insertions(+), 114 deletions(-) create mode 100644 MyQrCode/Views/SettingsView.swift diff --git a/MyQrCode/ContentView.swift b/MyQrCode/ContentView.swift index 313c7c0..09e3e99 100644 --- a/MyQrCode/ContentView.swift +++ b/MyQrCode/ContentView.swift @@ -8,131 +8,173 @@ import SwiftUI struct ContentView: View { - @StateObject private var languageManager = LanguageManager.shared - @State private var scannedResult: String? - var body: some View { NavigationView { - VStack(spacing: 30) { - // 应用图标 - Image(systemName: "qrcode.viewfinder") - .font(.system(size: 100)) - .foregroundColor(.blue) + ZStack { + // 背景渐变 + LinearGradient( + gradient: Gradient(colors: [ + Color(.systemBackground), + Color(.systemGray6).opacity(0.3) + ]), + startPoint: .top, + endPoint: .bottom + ) + .ignoresSafeArea() - // 标题 - Text("app_title".localized) - .font(.largeTitle) - .fontWeight(.bold) - .multilineTextAlignment(.center) - - // 描述 - Text("app_description".localized) - .font(.body) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - .padding(.horizontal) - - // 扫描按钮 - 改为NavigationLink - NavigationLink(destination: ScannerView()) { - HStack { - Image(systemName: "camera.fill") - Text("start_scanning".localized) - } - .font(.title2) - .foregroundColor(.white) - .padding() - .frame(maxWidth: .infinity) - .background(Color.blue) - .cornerRadius(15) - } - .padding(.horizontal, 40) - - // 历史记录按钮 - NavigationLink(destination: HistoryView()) { - HStack { - Image(systemName: "clock.arrow.circlepath") - Text("历史记录") + VStack(spacing: 24) { + // 页面标题 + VStack(spacing: 12) { + Text("QR Code Creator") + .font(.system(size: 34, weight: .bold, design: .rounded)) + .foregroundColor(.primary) + + Text("快速创建和扫描二维码") + .font(.system(size: 16, weight: .medium)) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) } - .font(.title3) - .foregroundColor(.white) - .padding() - .frame(maxWidth: .infinity) - .background(Color.orange) - .cornerRadius(10) - } - .padding(.horizontal, 60) - - // 测试日志按钮 - Button(action: { - testLogging() - }) { - HStack { - Image(systemName: "doc.text.fill") - Text("测试日志系统") + .padding(.top, 0) + + // 功能卡片布局 + VStack(spacing: 18) { + // 主功能 - 创建二维码（大卡片） + NavigationLink(destination: CreateCodeView()) { + VStack(alignment: .leading, spacing: 20) { + HStack { + Image(systemName: "qrcode") + .font(.system(size: 32, weight: .bold)) + .foregroundColor(.white) + + Spacer() + + Image(systemName: "arrow.up.right") + .font(.system(size: 22, weight: .medium)) + .foregroundColor(.white.opacity(0.8)) + } + + VStack(alignment: .leading, spacing: 12) { + Text("创建二维码") + .font(.system(size: 28, weight: .bold)) + .foregroundColor(.white) + + Text("生成文本、链接、WiFi、联系人等各种二维码") + .font(.system(size: 16)) + .foregroundColor(.white.opacity(0.9)) + .lineLimit(2) + } + } + .padding(24) + .frame(maxWidth: .infinity, minHeight: 160) + .background( + LinearGradient( + gradient: Gradient(colors: [ + Color.purple, + Color.blue, + Color.purple.opacity(0.8) + ]), + startPoint: .topLeading, + endPoint: .bottomTrailing + ) + ) + .cornerRadius(24) + .shadow(color: .purple.opacity(0.4), radius: 20, x: 0, y: 10) + } + .padding(.horizontal, 20) + + // 第二行 - 两个辅助功能卡片 + HStack(spacing: 14) { + // 扫描功能卡片 + NavigationLink(destination: ScannerView()) { + VStack(alignment: .leading, spacing: 12) { + HStack { + Image(systemName: "camera.fill") + .font(.system(size: 22, weight: .medium)) + .foregroundColor(.white) + + Spacer() + } + + VStack(alignment: .leading, spacing: 6) { + Text("扫描识别") + .font(.system(size: 16, weight: .bold)) + .foregroundColor(.white) + + Text("扫描二维码") + .font(.system(size: 13)) + .foregroundColor(.white.opacity(0.9)) + } + } + .padding(16) + .frame(maxWidth: .infinity, minHeight: 100) + .background( + LinearGradient( + gradient: Gradient(colors: [ + Color.blue, + Color.blue.opacity(0.8) + ]), + startPoint: .topLeading, + endPoint: .bottomTrailing + ) + ) + .cornerRadius(16) + .shadow(color: .blue.opacity(0.25), radius: 8, x: 0, y: 4) + } + + // 历史记录卡片 + NavigationLink(destination: HistoryView()) { + VStack(alignment: .leading, spacing: 12) { + HStack { + Image(systemName: "clock.arrow.circlepath") + .font(.system(size: 22, weight: .medium)) + .foregroundColor(.white) + + Spacer() + } + + VStack(alignment: .leading, spacing: 6) { + Text("历史记录") + .font(.system(size: 16, weight: .bold)) + .foregroundColor(.white) + + Text("查看历史") + .font(.system(size: 13)) + .foregroundColor(.white.opacity(0.9)) + } + } + .padding(16) + .frame(maxWidth: .infinity, minHeight: 100) + .background( + LinearGradient( + gradient: Gradient(colors: [ + Color.orange, + Color.orange.opacity(0.8) + ]), + startPoint: .topLeading, + endPoint: .bottomTrailing + ) + ) + .cornerRadius(16) + .shadow(color: .orange.opacity(0.25), radius: 8, x: 0, y: 4) + } + } + .padding(.horizontal, 20) } - .font(.title3) - .foregroundColor(.white) - .padding() - .frame(maxWidth: .infinity) - .background(Color.green) - .cornerRadius(10) - } - .padding(.horizontal, 60) - - // 语言选择器 - HStack { - Text("language".localized) - .font(.headline) - Picker("language".localized, selection: $languageManager.currentLanguage) { - ForEach(Language.allCases, id: \.self) { language in - Text(language.displayName).tag(language) - } - } - .pickerStyle(SegmentedPickerStyle()) + Spacer(minLength: 0) } - .padding(.horizontal, 40) - - // 扫描结果显示 - if let result = scannedResult { - VStack(spacing: 10) { - Text("scan_result".localized) - .font(.headline) - .foregroundColor(.green) - - Text(result) - .font(.body) - .padding() - .background(Color.gray.opacity(0.1)) - .cornerRadius(10) - .multilineTextAlignment(.center) + .padding(.top, 0) + } + .toolbar { + ToolbarItem(placement: .navigationBarTrailing) { + NavigationLink(destination: SettingsView()) { + Image(systemName: "gearshape.fill") + .font(.system(size: 18, weight: .medium)) + .foregroundColor(.primary) } - .padding(.horizontal, 40) } - - Spacer() - } - .padding() - .navigationTitle("MyQrCode") - .navigationBarTitleDisplayMode(.inline) - } - .onReceive(NotificationCenter.default.publisher(for: .scannerDidScanCode)) { notification in - if let result = notification.object as? String { - scannedResult = result } } - .onAppear { - // 设置默认语言 - languageManager.currentLanguage = .english - } - } - - private func testLogging() { - logDebug("这是一条调试日志", className: "ContentView") - logInfo("这是一条信息日志", className: "ContentView") - logWarning("这是一条警告日志", className: "ContentView") - logError("这是一条错误日志", className: "ContentView") - logSuccess("这是一条成功日志", className: "ContentView") } } diff --git a/MyQrCode/Views/SettingsView.swift b/MyQrCode/Views/SettingsView.swift new file mode 100644 index 0000000..52e82a6 --- /dev/null +++ b/MyQrCode/Views/SettingsView.swift @@ -0,0 +1,240 @@ +import SwiftUI + +struct SettingsView: View { + @StateObject private var languageManager = LanguageManager.shared + @Environment(\.dismiss) private var dismiss + + var body: some View { + NavigationView { + ZStack { + // 背景渐变 + LinearGradient( + gradient: Gradient(colors: [ + Color(.systemBackground), + Color(.systemGray6).opacity(0.2) + ]), + startPoint: .top, + endPoint: .bottom + ) + .ignoresSafeArea() + + ScrollView { + VStack(spacing: 24) { + // 顶部图标 + VStack(spacing: 16) { + ZStack { + Circle() + .fill( + LinearGradient( + gradient: Gradient(colors: [ + Color.blue.opacity(0.1), + Color.blue.opacity(0.05) + ]), + startPoint: .topLeading, + endPoint: .bottomTrailing + ) + ) + .frame(width: 80, height: 80) + + Image(systemName: "gearshape.fill") + .font(.system(size: 36, weight: .light)) + .foregroundColor(.blue) + } + + Text("设置") + .font(.system(size: 28, weight: .bold, design: .rounded)) + .foregroundColor(.primary) + } + .padding(.top, 20) + + // 语言设置卡片 + VStack(alignment: .leading, spacing: 16) { + HStack { + Image(systemName: "globe") + .font(.system(size: 20, weight: .medium)) + .foregroundColor(.blue) + .frame(width: 32) + + VStack(alignment: .leading, spacing: 4) { + Text("语言设置") + .font(.system(size: 18, weight: .semibold)) + Text("选择应用显示语言") + .font(.system(size: 14)) + .foregroundColor(.secondary) + } + + Spacer() + } + + Picker("语言", selection: $languageManager.currentLanguage) { + ForEach(Language.allCases, id: \.self) { language in + Text(language.displayName).tag(language) + } + } + .pickerStyle(SegmentedPickerStyle()) + } + .padding(20) + .background( + RoundedRectangle(cornerRadius: 16) + .fill(Color(.systemBackground)) + .shadow(color: .black.opacity(0.05), radius: 8, x: 0, y: 2) + ) + .padding(.horizontal, 20) + + // 应用信息卡片 + VStack(alignment: .leading, spacing: 16) { + HStack { + Image(systemName: "info.circle") + .font(.system(size: 20, weight: .medium)) + .foregroundColor(.green) + .frame(width: 32) + + Text("应用信息") + .font(.system(size: 18, weight: .semibold)) + + Spacer() + } + + VStack(spacing: 12) { + HStack { + Text("版本") + .font(.system(size: 16)) + .foregroundColor(.secondary) + Spacer() + Text("1.0.0") + .font(.system(size: 16, weight: .medium)) + } + + HStack { + Text("构建版本") + .font(.system(size: 16)) + .foregroundColor(.secondary) + Spacer() + Text("1") + .font(.system(size: 16, weight: .medium)) + } + } + } + .padding(20) + .background( + RoundedRectangle(cornerRadius: 16) + .fill(Color(.systemBackground)) + .shadow(color: .black.opacity(0.05), radius: 8, x: 0, y: 2) + ) + .padding(.horizontal, 20) + + // 功能说明卡片 + VStack(alignment: .leading, spacing: 16) { + HStack { + Image(systemName: "star.fill") + .font(.system(size: 20, weight: .medium)) + .foregroundColor(.orange) + .frame(width: 32) + + Text("功能特色") + .font(.system(size: 18, weight: .semibold)) + + Spacer() + } + + VStack(spacing: 16) { + FeatureRow( + icon: "camera.fill", + iconColor: .blue, + title: "扫描功能", + description: "支持扫描二维码和条形码，自动识别类型并保存到历史记录" + ) + + FeatureRow( + icon: "plus.circle.fill", + iconColor: .green, + title: "创建功能", + description: "可以手动创建各种类型的二维码和条形码" + ) + + FeatureRow( + icon: "clock.arrow.circlepath", + iconColor: .orange, + title: "历史记录", + description: "自动保存所有扫描和创建的条码，支持收藏和管理" + ) + } + } + .padding(20) + .background( + RoundedRectangle(cornerRadius: 16) + .fill(Color(.systemBackground)) + .shadow(color: .black.opacity(0.05), radius: 8, x: 0, y: 2) + ) + .padding(.horizontal, 20) + + // 关于卡片 + VStack(alignment: .leading, spacing: 16) { + HStack { + Image(systemName: "heart.fill") + .font(.system(size: 20, weight: .medium)) + .foregroundColor(.red) + .frame(width: 32) + + Text("关于") + .font(.system(size: 18, weight: .semibold)) + + Spacer() + } + + Text("QR Scanner 是一款功能强大的二维码和条形码扫描应用，支持多种格式的条码识别和创建。") + .font(.system(size: 14)) + .foregroundColor(.secondary) + .lineLimit(nil) + } + .padding(20) + .background( + RoundedRectangle(cornerRadius: 16) + .fill(Color(.systemBackground)) + .shadow(color: .black.opacity(0.05), radius: 8, x: 0, y: 2) + ) + .padding(.horizontal, 20) + + Spacer(minLength: 30) + } + } + } + .navigationTitle("") + .navigationBarTitleDisplayMode(.inline) + .navigationBarBackButtonHidden(false) + } + } +} + +// MARK: - 功能行组件 +struct FeatureRow: View { + let icon: String + let iconColor: Color + let title: String + let description: String + + var body: some View { + HStack(alignment: .top, spacing: 12) { + Image(systemName: icon) + .font(.system(size: 16, weight: .medium)) + .foregroundColor(iconColor) + .frame(width: 20) + + VStack(alignment: .leading, spacing: 4) { + Text(title) + .font(.system(size: 16, weight: .medium)) + + Text(description) + .font(.system(size: 14)) + .foregroundColor(.secondary) + .lineLimit(3) + } + + Spacer() + } + } +} + +#Preview { + SettingsView() +} \ No newline at end of file