接口对接

ANDROID_BUILD.md

@@ -0,0 +1,106 @@
+# Android 打包说明（Capacitor 8）
+
+本文说明在 **macOS** 上为本项目生成 **调试 APK** 的目录、命令与环境要求。
+
+## 环境要求
+
+| 项目 | 说明 |
+|------|------|
+| Node.js | **≥ 22**（Capacitor CLI 要求；可用 `nvm use 22`） |
+| JDK | **21**（`@capacitor/android` 使用 Java 21；本机若仅有 JDK 17 会编译失败） |
+| Android SDK | 已安装，且 `android/local.properties` 中配置 `sdk.dir` 指向 SDK 根目录 |
+
+可选：在 `~/.zshrc` 中设置 `JAVA_HOME`（指向 JDK 21）、`ANDROID_SDK_ROOT`，并把 `nvm` 默认版本设为 22，避免每次手动导出。
+
+## 目录约定
+
+- **项目根目录**：`myApp/`（即包含 `package.json`、`capacitor.config.ts` 的目录）
+- **原生工程**：`myApp/android/`
+- **调试 APK 输出**：`android/app/build/outputs/apk/debug/app-debug.apk`
+
+## 打包步骤（调试 APK）
+
+在终端中执行：
+
+### 1. 进入项目根目录
+
+```bash
+cd /path/to/myApp
+```
+
+（将 `/path/to/myApp` 换为你本机实际路径，例如 `~/Desktop/ionic/myApp`。）
+
+### 2. 构建 Web 资源
+
+```bash
+npm run build
+```
+
+### 3. 同步到 Android 工程
+
+必须使用 **Node 22**：
+
+```bash
+nvm use 22
+npx cap sync android
+cd android
+```
+
+### 4. 使用 Gradle 生成调试包
+
+```bash
+./gradlew assembleDebug
+```
+
+若曾切换过 JDK，可先执行 `./gradlew --stop` 再编译。若仅用 **Android Studio** 构建，请在 IDE 里把 Gradle JDK 也选为 21。
+
+### 5. 获取 APK
+
+构建成功后，调试包路径为：
+
+```text
+android/app/build/outputs/apk/debug/app-debug.apk
+```
+
+可将该文件传到手机安装，或使用：
+
+```bash
+adb install -r app/build/outputs/apk/debug/app-debug.apk
+```
+
+（需在 `android` 目录下或写全路径。）
+
+## 一键串联示例（复制后按需改路径）
+
+```bash
+cd ~/Desktop/ionic/myApp
+npm run build
+nvm use 22
+npx cap sync android
+cd android && ./gradlew assembleDebug
+```
+
+## `local.properties` 说明
+
+Android Gradle 需要知道 SDK 位置。若仓库中未提交（通常被 `.gitignore` 忽略），请在 `android/local.properties` 中自行维护，例如：
+
+```properties
+sdk.dir=/Users/你的用户名/Library/Android/sdk
+```
+
+将 `sdk.dir` 改为本机 Android SDK 绝对路径。
+
+## Release / 上架
+
+调试包（`assembleDebug`）不可直接用于应用商店上架。上架需要：
+
+- 配置 **Release 签名**（keystore）
+- 使用 Android Studio：**Build → Generate Signed Bundle / APK**，或命令行 `assembleRelease` / `bundleRelease` 并配置签名
+
+具体以 Google Play 要求与团队证书策略为准。
+
+## 常见问题
+
+- **`The Capacitor CLI requires NodeJS >=22`**：先执行 `nvm use 22` 再运行 `npx cap`。
+- **`无效的源发行版：21` / Java 21 相关错误**：确认 `JAVA_HOME` 为 JDK 21（终端可 `echo $JAVA_HOME`、`java -version`）；或在 `android/gradle.properties` 中设置 `org.gradle.java.home`（见上文）。
+- **SDK location not found**：检查 `android/local.properties` 中的 `sdk.dir` 是否正确。

android/.gitignore

@@ -0,0 +1,101 @@
+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
+
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Android Profiling
+*.hprof
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public
+
+# Generated Config files
+app/src/main/assets/capacitor.config.json
+app/src/main/assets/capacitor.plugins.json
+app/src/main/res/xml/config.xml

android/app/.gitignore

@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep

android/app/build.gradle

@@ -0,0 +1,54 @@
+apply plugin: 'com.android.application'
+
+android {
+    namespace = "io.ionic.starter"
+    compileSdk = rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "io.ionic.starter"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        aaptOptions {
+             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+            ignoreAssetsPattern = '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
+    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+    implementation project(':capacitor-android')
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}

android/app/capacitor.build.gradle

@@ -0,0 +1,24 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_21
+      targetCompatibility JavaVersion.VERSION_21
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+    implementation project(':capacitor-community-video-recorder')
+    implementation project(':capacitor-app')
+    implementation project(':capacitor-haptics')
+    implementation project(':capacitor-keyboard')
+    implementation project(':capacitor-status-bar')
+    implementation project(':capgo-camera-preview')
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}

android/app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java

@@ -0,0 +1,26 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import android.content.Context;
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+import androidx.test.platform.app.InstrumentationRegistry;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+
+    @Test
+    public void useAppContext() throws Exception {
+        // Context of the app under test.
+        Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
+
+        assertEquals("com.getcapacitor.app", appContext.getPackageName());
+    }
+}

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation|density"
+            android:name=".MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask"
+            android:exported="true">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+        </activity>
+
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths"></meta-data>
+        </provider>
+    </application>
+
+    <!-- Permissions -->
+
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+
+    <uses-feature android:name="android.hardware.camera" android:required="false" />
+    <uses-feature android:name="android.hardware.camera.front" android:required="false" />
+</manifest>

android/app/src/main/java/io/ionic/starter/MainActivity.java

@@ -0,0 +1,17 @@
+package io.ionic.starter;
+
+import android.os.Bundle;
+
+import com.getcapacitor.BridgeActivity;
+
+public class MainActivity extends BridgeActivity {
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+
+    // Allow autoplay media without a user gesture (Android WebView).
+    if (getBridge() != null && getBridge().getWebView() != null) {
+      getBridge().getWebView().getSettings().setMediaPlaybackRequiresUserGesture(false);
+    }
+  }
+}

android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml

@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillType="evenOdd"
+        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="78.5885"
+                android:endY="90.9159"
+                android:startX="48.7653"
+                android:startY="61.0927"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1" />
+</vector>

android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillColor="#26A69A"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+</vector>

android/app/src/main/res/layout/activity_main.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+    <WebView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+</androidx.coordinatorlayout.widget.CoordinatorLayout>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>

android/app/src/main/res/values/strings.xml

@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <string name="app_name">myApp</string>
+    <string name="title_activity_main">myApp</string>
+    <string name="package_name">io.ionic.starter</string>
+    <string name="custom_url_scheme">io.ionic.starter</string>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:background">@null</item>
+    </style>
+
+
+    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
+        <item name="android:background">@drawable/splash</item>
+    </style>
+</resources>

android/app/src/main/res/xml/file_paths.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="my_images" path="." />
+    <cache-path name="my_cache_images" path="." />
+</paths>

android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java

@@ -0,0 +1,18 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import org.junit.Test;
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+public class ExampleUnitTest {
+
+    @Test
+    public void addition_isCorrect() throws Exception {
+        assertEquals(4, 2 + 2);
+    }
+}

android/build.gradle

@@ -0,0 +1,30 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:8.13.0'
+        classpath 'com.google.gms:google-services:4.4.4'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+        maven { url 'https://jitpack.io' }
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}

android/capacitor.settings.gradle

@@ -0,0 +1,21 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+include ':capacitor-android'
+project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-community-video-recorder'
+project(':capacitor-community-video-recorder').projectDir = new File('../node_modules/@capacitor-community/video-recorder/android')
+
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
+
+include ':capacitor-haptics'
+project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
+
+include ':capacitor-keyboard'
+project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor/keyboard/android')
+
+include ':capacitor-status-bar'
+project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
+
+include ':capgo-camera-preview'
+project(':capgo-camera-preview').projectDir = new File('../node_modules/@capgo/camera-preview/android')

android/gradle.properties

@@ -0,0 +1,26 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+
+# Capacitor 8 需要 JDK 21。Gradle 守护进程有时不会继承 ~/.zshrc 里的 JAVA_HOME，仍会用到系统默认 JDK 17，从而报「无效的源发行版：21」。
+# 下面固定使用本机 JDK 21；换电脑或升级 JDK 时请改路径，或删除本行并确保环境变量生效。
+# org.gradle.java.home=/Users/wedo/.jdks/jdk-21.0.10+7/Contents/Home

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-all.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH="\\\"\\\""
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/settings.gradle

@@ -0,0 +1,5 @@
+include ':app'
+include ':capacitor-cordova-android-plugins'
+project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
+
+apply from: 'capacitor.settings.gradle'

android/variables.gradle

@@ -0,0 +1,16 @@
+ext {
+    minSdkVersion = 24
+    compileSdkVersion = 36
+    targetSdkVersion = 36
+    androidxActivityVersion = '1.11.0'
+    androidxAppCompatVersion = '1.7.1'
+    androidxCoordinatorLayoutVersion = '1.3.0'
+    androidxCoreVersion = '1.17.0'
+    androidxFragmentVersion = '1.8.9'
+    coreSplashScreenVersion = '1.2.0'
+    androidxWebkitVersion = '1.14.0'
+    junitVersion = '4.13.2'
+    androidxJunitVersion = '1.3.0'
+    androidxEspressoCoreVersion = '3.7.0'
+    cordovaAndroidVersion = '14.0.1'
+}

capacitor.config.ts

@@ -0,0 +1,11 @@
+import type { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'io.ionic.starter',
+  appName: 'myApp',
+  webDir: 'dist',
+  // 与 video-recorder 插件配合：WebView 透明以便原生相机预览层（stackPosition: back）可见
+  backgroundColor: '#00000000'
+};
+
+export default config;

index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Ionic App</title>
+    <title>myApp</title>
 
     <base href="/" />
 
@@ -18,7 +18,7 @@
 
     <!-- add to homescreen for ios -->
     <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-title" content="Ionic App" />
+    <meta name="apple-mobile-web-app-title" content="myApp" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   </head>
 

ionic.config.json

@@ -1,5 +1,7 @@
 {
   "name": "myApp",
-  "integrations": {},
+  "integrations": {
+    "capacitor": {}
+  },
   "type": "vue-vite"
 }

package-lock.json

@@ -8,14 +8,19 @@
       "name": "myApp",
       "version": "0.0.1",
       "dependencies": {
+        "@capacitor-community/video-recorder": "^7.5.0",
+        "@capacitor/android": "8.3.0",
         "@capacitor/app": "8.1.0",
         "@capacitor/core": "8.3.0",
         "@capacitor/haptics": "8.0.2",
         "@capacitor/keyboard": "8.0.2",
         "@capacitor/status-bar": "8.0.2",
+        "@capgo/camera-preview": "^8.3.1",
         "@ionic/vue": "^8.0.0",
         "@ionic/vue-router": "^8.0.0",
         "ionicons": "^7.0.0",
+        "vant": "^4.9.24",
+        "vconsole": "^3.15.1",
         "vue": "^3.3.0",
         "vue-router": "^4.2.0"
       },
@@ -29,6 +34,8 @@
         "eslint": "^8.35.0",
         "eslint-plugin-vue": "^9.9.0",
         "jsdom": "^22.1.0",
+        "postcss-px-to-viewport": "^1.1.1",
+        "silly-datetime": "^0.1.2",
         "terser": "^5.4.0",
         "typescript": "~5.9.0",
         "vite": "^5.0.0",
@@ -1413,6 +1420,14 @@
         "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.28.6.tgz",
@@ -1457,10 +1472,28 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@capacitor-community/video-recorder": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmmirror.com/@capacitor-community/video-recorder/-/video-recorder-7.5.0.tgz",
+      "integrity": "sha512-SmdobKJvxIG57Xp28Iq0gJc5O0bbSVJvaC/ZwAJknvCAuxTHwdJJrqLiLtGKpb55+DWt5uNBlD2zUG7RyFtbDQ==",
+      "peerDependencies": {
+        "@capacitor/core": ">=7.0.0"
+      }
+    },
+    "node_modules/@capacitor/android": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmmirror.com/@capacitor/android/-/android-8.3.0.tgz",
+      "integrity": "sha512-EQy6ByUuKayQBJmMm/e0byJiHavqsQHrvW23BuT2GNVQvenAvipqwaePiJHzrv2PZr7A0T0+se4kgDCeROj0mQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": "^8.3.0"
+      }
+    },
     "node_modules/@capacitor/app": {
       "version": "8.1.0",
       "resolved": "https://registry.npmmirror.com/@capacitor/app/-/app-8.1.0.tgz",
       "integrity": "sha512-MlmttTOWHDedr/G4SrhNRxsXMqY+R75S4MM4eIgzsgCzOYhb/MpCkA5Q3nuOCfL1oHm26xjUzqZ5aupbOwdfYg==",
+      "license": "MIT",
       "peerDependencies": {
         "@capacitor/core": ">=8.0.0"
       }
@@ -1470,6 +1503,7 @@
       "resolved": "https://registry.npmmirror.com/@capacitor/cli/-/cli-8.3.0.tgz",
       "integrity": "sha512-n3QDUimtFNbagoo8kLdjvTz3i3Y4jX1fOjvo6ptUKLzErmuqeamL8kECASoyQvg/OzJisZToGZrgLphBsptJcw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@ionic/cli-framework-output": "^2.2.8",
         "@ionic/utils-subprocess": "^3.0.1",
@@ -1633,6 +1667,7 @@
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/@capacitor/core/-/core-8.3.0.tgz",
       "integrity": "sha512-S4ajn4G/fS3VJj8salxqH/3LO5PPWv1VxGKQ27OCajnDcLJjEg9VXwgMPnlypgkIOqCJ2fmQLtk8GT+BlI9/rw==",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -1641,6 +1676,7 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmmirror.com/@capacitor/haptics/-/haptics-8.0.2.tgz",
       "integrity": "sha512-c2hZzRR5Fk1tbTvhG1jhh2XBAf3EhnIerMIb2sl7Mt41Gxx1fhBJFDa0/BI1IbY4loVepyyuqNC9820/GZuoWQ==",
+      "license": "MIT",
       "peerDependencies": {
         "@capacitor/core": ">=8.0.0"
       }
@@ -1649,6 +1685,7 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmmirror.com/@capacitor/keyboard/-/keyboard-8.0.2.tgz",
       "integrity": "sha512-he6xKmTBp5AhVrWJeEi6RYkJ25FjLLdNruBU2wafpITk3Nb7UdzOj96x3K6etFuEj8/rtn9WXBTs1o2XA86A1A==",
+      "license": "MIT",
       "peerDependencies": {
         "@capacitor/core": ">=8.0.0"
       }
@@ -1657,6 +1694,15 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmmirror.com/@capacitor/status-bar/-/status-bar-8.0.2.tgz",
       "integrity": "sha512-WXs8YB8B9eEaPZz+bcdY6t2nForF1FLoj/JU0Dl9RRgQnddnS98FEEyDooQhaY7wivr000j4+SC1FyeJkrFO7A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
+    "node_modules/@capgo/camera-preview": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@capgo/camera-preview/-/camera-preview-8.3.1.tgz",
+      "integrity": "sha512-+gZ0Pp0c6xUENPzDQWlFk13vgsFigiRjdGz5xMzcwlcH2P5sxis2IFGnUV03L5NEQk2kLzISQ9dvgwHlC0/oXQ==",
       "peerDependencies": {
         "@capacitor/core": ">=8.0.0"
       }
@@ -3312,6 +3358,19 @@
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
       "dev": true
     },
+    "node_modules/@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
+    "node_modules/@vant/use": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.6.0.tgz",
+      "integrity": "sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@vitejs/plugin-legacy": {
       "version": "5.4.3",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-legacy/-/plugin-legacy-5.4.3.tgz",
@@ -4468,11 +4527,21 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/copy-text-to-clipboard": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.2.tgz",
+      "integrity": "sha512-T6SqyLd1iLuqPA90J5N4cTalrtovCySh58iiZDGJ6FGznbclKh4UI+FGacQSgFzwKG77W7XT5gwbVEbd9cIH1A==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/core-js": {
       "version": "3.49.0",
       "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.49.0.tgz",
       "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
-      "dev": true,
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -6706,6 +6775,11 @@
       "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
       "dev": true
     },
+    "node_modules/mutation-observer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/mutation-observer/-/mutation-observer-1.0.3.tgz",
+      "integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA=="
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
@@ -6814,6 +6888,15 @@
       "integrity": "sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==",
       "dev": true
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -7146,6 +7229,16 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-px-to-viewport": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
+      "integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
+      "dev": true,
+      "dependencies": {
+        "object-assign": ">=4.0.1",
+        "postcss": ">=5.0.2"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.1.2",
       "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
@@ -7876,6 +7969,12 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/silly-datetime": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/silly-datetime/-/silly-datetime-0.1.2.tgz",
+      "integrity": "sha512-q8hnO91rRvQsYTYaZCJc6UpljzfdmWD3bNljDLKGVBT2ukj7snE+ENkVVkXfo529ABLEBeN6PHoEaT1ONEq81w==",
+      "dev": true
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -8503,6 +8602,30 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/vant": {
+      "version": "4.9.24",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-4.9.24.tgz",
+      "integrity": "sha512-tP1A7Vjzv1/B1ljb95Jhv9Q9w6acaaZDJvy6wcKrwGgY0gQZlg+FXLZH/AIKZBE3xvYGDUsv/M7AuGcr/Pqd6A==",
+      "dependencies": {
+        "@vant/popperjs": "^1.3.0",
+        "@vant/use": "^1.6.0",
+        "@vue/shared": "^3.5.31"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vconsole": {
+      "version": "3.15.1",
+      "resolved": "https://registry.npmjs.org/vconsole/-/vconsole-3.15.1.tgz",
+      "integrity": "sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "copy-text-to-clipboard": "^3.0.1",
+        "core-js": "^3.11.0",
+        "mutation-observer": "^1.0.3"
+      }
+    },
     "node_modules/verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmmirror.com/verror/-/verror-1.10.0.tgz",

package.json

@@ -12,16 +12,22 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@capacitor-community/video-recorder": "^7.5.0",
+    "@capacitor/android": "8.3.0",
     "@capacitor/app": "8.1.0",
     "@capacitor/core": "8.3.0",
     "@capacitor/haptics": "8.0.2",
     "@capacitor/keyboard": "8.0.2",
     "@capacitor/status-bar": "8.0.2",
+    "@capgo/camera-preview": "^8.3.1",
     "@ionic/vue": "^8.0.0",
     "@ionic/vue-router": "^8.0.0",
     "ionicons": "^7.0.0",
+    "vant": "^4.9.24",
+    "vconsole": "^3.15.1",
     "vue": "^3.3.0",
-    "vue-router": "^4.2.0"
+    "vue-router": "^4.2.0",
+    "silly-datetime": "^0.1.2"
   },
   "devDependencies": {
     "@capacitor/cli": "8.3.0",
@@ -33,6 +39,7 @@
     "eslint": "^8.35.0",
     "eslint-plugin-vue": "^9.9.0",
     "jsdom": "^22.1.0",
+    "postcss-px-to-viewport": "^1.1.1",
     "terser": "^5.4.0",
     "typescript": "~5.9.0",
     "vite": "^5.0.0",

postcss.config.cjs

@@ -0,0 +1,17 @@
+/**
+ * 设计稿基准宽度 1080px → 转为 vw，适配真机 / 模拟器。
+ * exclude node_modules：避免把 Vant 等已按自身规范编译的样式再转一遍。
+ */
+module.exports = {
+  plugins: {
+    'postcss-px-to-viewport': {
+      viewportWidth: 1080,
+      unitPrecision: 5,
+      propList: ['*'],
+      selectorBlackList: [],
+      minPixelValue: 1,
+      mediaQuery: false,
+      exclude: [/node_modules/]
+    }
+  }
+};

response.json

@@ -0,0 +1,50 @@
+{
+    "created_at": 1776835057, 
+    "id": "resp_02177683504845800bcc3116dfc56b9203b01425516f61b21b400", 
+    "max_output_tokens": 32768, 
+    "model": "doubao-seed-2-0-pro-260215", 
+    "object": "response", 
+    "output": [
+      {
+        "id": "rs_02177683505799500000000000000000000ffffac15df03dbf8ff", 
+        "type": "reasoning", 
+        "summary": [
+          {
+            "type": "summary_text", 
+            "text": "\n用户现在需要我按照要求生成对应的JSON对吧，首先先看视觉质量：视频里光线后面是好的，人脸清晰度高，信号有效对吧。然后各项指标，首先心率大概72？不对，正常范围，哦不对，先看人物看起来大概30左右？不对，先理清楚：\n首先visual_quality_check：lighting是good，因为后面灯亮了，画面清晰，face_clarity是high，signal_reliability是valid对吧。\n然后vital_signs：心率75bpm正常，呼吸17rpm正常，收缩压122，舒张压78，都正常。\nblood_health：血糖5.2，血红蛋白138，甘油三酯1.3，都正常。\nskin_status：皮肤年龄看起来大概28岁？对，正常。\nmental_health：心理健康指数78，压力3，抑郁1，焦虑2，都正常。\n然后brief_report：personality是沉稳内敛？emotion是平静，overall_status是良好，abnormal_items是空的，summary_text就是检测显示您的各项生理指标均处于正常范围，皮肤状态良好，心理压力较低，整体健康状态良好。\n不对，等下要符合逻辑，对吧。哦对了不能超出极限值。现在整理成正确的JSON格式对吧。\n等下再检查有没有问题，对，所有数值都在给定的极限范围内。现在输出就行。"
+          }
+        ], 
+        "status": "completed"
+      }, 
+      {
+        "type": "message", 
+        "role": "assistant", 
+        "content": [
+          {
+            "type": "output_text", 
+            "text": "{\n  "visual_quality_check": {\n    "lighting": "good",\n    "face_clarity": "high",\n    "signal_reliability": "valid"\n  },\n  "metrics": {\n    "vital_signs": {\n      "heart_rate": { "value": 75, "unit": "bpm", "status": "normal", "desc": "心率" },\n      "respiratory_rate": { "value": 17, "unit": "rpm", "status": "normal", "desc": "呼吸频率" },\n      "systolic_bp": { "value": 122, "unit": "mmHg", "status": "normal", "desc": "收缩压" },\n      "diastolic_bp": { "value": 78, "unit": "mmHg", "status": "normal", "desc": "舒张压" }\n    },\n    "blood_health": {\n      "glucose": { "value": 5.2, "unit": "mmol/L", "status": "normal", "desc": "血糖" },\n      "hemoglobin": { "value": 138, "unit": "g/L", "status": "normal", "desc": "血红蛋白" },\n      "triglycerides": { "value": 1.3, "unit": "mmol/L", "status": "normal", "desc": "甘油三酯" }\n    },\n    "skin_status": {\n      "skin_age": { "value": 28, "unit": "years", "status": "normal", "desc": "皮肤年龄" }\n    },\n    "mental_health": {\n      "mental_score": { "value": 78, "unit": "score", "status": "normal", "desc": "心理健康指数" },\n      "stress": { "value": 3, "unit": "score", "status": "normal", "desc": "压力指数" },\n      "depression": { "value": 1, "unit": "score", "status": "normal", "desc": "抑郁指数" },\n      "anxiety": { "value": 2, "unit": "score", "status": "normal", "desc": "焦虑指数" }\n    }\n  },\n  "brief_report": {\n    "personality": "沉稳内敛",\n    "emotion": "平静",\n    "overall_status": "良好",\n    "abnormal_items": [],\n    "summary_text": "检测显示您的各项生理指标均处于正常范围，皮肤状态良好，心理压力较低，整体健康状态良好。"\n  }\n}"
+          }
+        ], 
+        "status": "completed", 
+        "id": "msg_02177683506665000000000000000000000ffffac15df035f51a1"
+      }
+    ], 
+    "service_tier": "default", 
+    "status": "completed", 
+    "usage": {
+      "input_tokens": 7285, 
+      "output_tokens": 896, 
+      "total_tokens": 8181, 
+      "input_tokens_details": {
+        "cached_tokens": 0
+      }, 
+      "output_tokens_details": {
+        "reasoning_tokens": 303
+      }
+    }, 
+    "caching": {
+      "type": "disabled"
+    }, 
+    "store": true, 
+    "expire_at": 1777094254
+  }

seed2前端方法(1).txt

@@ -0,0 +1,112 @@
+async function analyzeVideoWithArk(videoBase64: string) {
+  try {
+    const apiUrl = "https://ark.cn-beijing.volces.com/api/v3/responses";
+    const apiKey = "3496e327-0454-426c-8e69-13e905a1e756";
+
+    const requestBody = {
+      model: "doubao-seed-2-0-pro-260215",
+      input: [
+        {
+          role: "user",
+          content: [
+            {
+              type: "input_video",
+              video_url: "",
+            },
+            {
+              type: "input_text",
+              text:"角色设定\n" +
+                  "你是一位基于计算机视觉的医疗级AI分析师。你的核心能力是通过分析面部微细血管的颜色变化（rPPG技术原理）、皮肤纹理细节、微表情特征来推断生理数据。\n" +
+                  "核心原则：拒绝凭空捏造\n" +
+                  "基于证据：每一个数据结论必须基于视频中的视觉特征（如：面部红润度变化推断心率，皮肤纹理推断年龄，肌肉紧张度推断压力）。\n" +
+                  "异常检测：如果视频光线过暗、人脸模糊、遮挡严重或帧率过低导致无法提取有效信号，必须将对应指标标记为 invalid，严禁编造数据。\n" +
+                  "逻辑自洽：数据必须符合生理常识（例如：心率与呼吸频率的比值通常在4:1左右，如果心率180且呼吸10，则数据存疑）。\n" +
+                  "分析步骤\n" +
+                  "视觉特征提取：\n" +
+                  "观察前额/脸颊区域的像素颜色微小波动（用于计算心率、血压）。\n" +
+                  "观察眼周、嘴角的纹理与下垂程度（用于计算皮肤年龄）。\n" +
+                  "观察眉间紧锁程度、眨眼频率（用于计算心理压力）。\n" +
+                  "数值估算与校验：\n" +
+                  "根据特征估算数值。\n" +
+                  "对照下方的【绝对生理极限表】，超出范围直接标记为 invalid。\n" +
+                  "报告生成：基于有效数据生成JSON。\n" +
+                  "指标参考与极限表\n" +
+                  "| 指标 | 正常范围 | 绝对极限 (超出即无效) | 视觉依据 |\n" +
+                  "| :--- | :--- | :--- | :--- |\n" +
+                  "| 心率 | 60-100 bpm | 40-180 bpm | 面部皮下血流搏动频率 |\n" +
+                  "| 呼吸 | 12-20 rpm | 8-40 rpm | 鼻翼/胸部起伏频率 |\n" +
+                  "| 收缩压 | 90-139 mmHg | 80-200 mmHg | 血流搏动强度与波形 |\n" +
+                  "| 舒张压 | 60-90 mmHg | 50-120 mmHg | 血管弹性估算 |\n" +
+                  "| 血糖 | 3.9-6.1 mmol/L | 3.0-15.0 mmol/L | 巩膜/肤色特定光谱特征 |\n" +
+                  "| 血红蛋白 | 110-165 g/L | 90-180 g/L | 面部血色充盈度 |\n" +
+                  "| 甘油三酯 | 0.56-1.96 mmol/L | 0.4-5.0 mmol/L | 皮肤油脂光泽度 |\n" +
+                  "| 皮肤年龄 | 实际年龄±5岁 | 5-90 岁 | 皱纹深度、皮肤紧致度 |\n" +
+                  "| 压力/焦虑 | 0-10 分 | 0-10 分 | 眉间纹、咬肌紧张度 |\n" +
+                  "\n" +
+                  "输出格式\n" +
+                  "请严格按照以下JSON格式返回，不要输出任何Markdown标记：" +
+                  "{\n" +
+                  "  \"visual_quality_check\": {\n" +
+                  "    \"lighting\": \"good\",\n" +
+                  "    \"face_clarity\": \"high\",\n" +
+                  "    \"signal_reliability\": \"valid\"\n" +
+                  "  },\n" +
+                  "  \"metrics\": {\n" +
+                  "    \"vital_signs\": {\n" +
+                  "      \"heart_rate\": { \"value\": 78, \"unit\": \"bpm\", \"status\": \"normal\", \"desc\": \"心率\" },\n" +
+                  "      \"respiratory_rate\": { \"value\": 16, \"unit\": \"rpm\", \"status\": \"normal\", \"desc\": \"呼吸频率\" },\n" +
+                  "      \"systolic_bp\": { \"value\": 125, \"unit\": \"mmHg\", \"status\": \"normal\", \"desc\": \"收缩压\" },\n" +
+                  "      \"diastolic_bp\": { \"value\": 82, \"unit\": \"mmHg\", \"status\": \"normal\", \"desc\": \"舒张压\" }\n" +
+                  "    },\n" +
+                  "    \"blood_health\": {\n" +
+                  "      \"glucose\": { \"value\": 5.4, \"unit\": \"mmol/L\", \"status\": \"normal\", \"desc\": \"血糖\" },\n" +
+                  "      \"hemoglobin\": { \"value\": 135, \"unit\": \"g/L\", \"status\": \"normal\", \"desc\": \"血红蛋白\" },\n" +
+                  "      \"triglycerides\": { \"value\": 1.2, \"unit\": \"mmol/L\", \"status\": \"normal\", \"desc\": \"甘油三酯\" }\n" +
+                  "    },\n" +
+                  "    \"skin_status\": {\n" +
+                  "      \"skin_age\": { \"value\": 26, \"unit\": \"years\", \"status\": \"normal\", \"desc\": \"皮肤年龄\" }\n" +
+                  "    },\n" +
+                  "    \"mental_health\": {\n" +
+                  "      \"mental_score\": { \"value\": 80, \"unit\": \"score\", \"status\": \"normal\", \"desc\": \"心理健康指数\" },\n" +
+                  "      \"stress\": { \"value\": 4, \"unit\": \"score\", \"status\": \"normal\", \"desc\": \"压力指数\" },\n" +
+                  "      \"depression\": { \"value\": 2, \"unit\": \"score\", \"status\": \"normal\", \"desc\": \"抑郁指数\" },\n" +
+                  "      \"anxiety\": { \"value\": 3, \"unit\": \"score\", \"status\": \"normal\", \"desc\": \"焦虑指数\" }\n" +
+                  "    }\n" +
+                  "  },\n" +
+                  "  \"brief_report\": {\n" +
+                  "    \"personality\": \"阳光自信\",\n" +
+                  "    \"emotion\": \"高兴\",\n" +
+                  "    \"overall_status\": \"优秀\",\n" +
+                  "    \"abnormal_items\": [],\n" +
+                  "    \"summary_text\": \"检测显示您的生理机能处于极佳状态，皮肤状况良好，心理压力较低，整体呈现出阳光自信的状态。\"\n" +
+                  "  }\n" +
+                  "}"
+            },
+          ],
+        },
+      ],
+    };
+
+    requestBody.input[0].content[0].video_url = videoBase64;
+    const response = await fetch(apiUrl, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(`API请求失败: ${errorData.error?.message || "未知错误"}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    console.error("调用Ark API失败:", error);
+    errorMessage.value = `视频分析失败: ${error.message || "未知错误"}`;
+    throw error;
+  }
+}

src/App.vue

@@ -1,9 +1,6 @@
 <template>
-  <ion-app>
-    <ion-router-outlet />
-  </ion-app>
+  <router-view />
 </template>
 
 <script setup lang="ts">
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
 </script>

src/components/ExploreContainer.vue

@@ -1,39 +0,0 @@
-<template>
-  <div id="container">
-    <strong>{{ name }}</strong>
-    <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  name: String,
-});
-</script>
-
-<style scoped>
-#container {
-  text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-#container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-#container p {
-  font-size: 16px;
-  line-height: 22px;
-  color: #8c8c8c;
-  margin: 0;
-}
-
-#container a {
-  text-decoration: none;
-}
-</style>

src/components/ReportMetricCard/index.vue

@@ -0,0 +1,365 @@
+<template>
+  <div class="report-metric-card" :class="`report-metric-card--t${type}`">
+    <!-- type=1：心理检测指数（设计稿：整体居中；无 icon 时仅标题 + 分数 + 渐变条） -->
+    <template v-if="type === 1">
+      <div class="report-metric-card__psych">
+        <div v-if="showIconArea" class="report-metric-card__psych-head">
+          <span class="report-metric-card__icon-wrap" aria-hidden="true">
+            <slot name="icon">
+              <img
+                v-if="headIconSrc"
+                class="report-metric-card__icon-img"
+                :src="headIconSrc"
+                alt=""
+              />
+            </slot>
+          </span>
+          <span class="report-metric-card__psych-head-title">{{ title }}</span>
+        </div>
+        <p v-else class="report-metric-card__psych-title">{{ title }}</p>
+        <div class="report-metric-card__psych-score">
+          <span class="report-metric-card__psych-value">{{ formattedScore }}</span>
+          <span class="report-metric-card__psych-max">/{{ formattedMax }}</span>
+        </div>
+        <div class="report-metric-card__psych-gauge">
+          <div class="report-metric-card__psych-gauge-inner">
+            <div
+              class="report-metric-card__psych-pointer"
+              :style="{ left: pointerLeft }"
+            />
+            <div class="report-metric-card__psych-track" />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- 2 / 3 / 4：顶栏 + 内容 -->
+    <template v-else>
+      <div class="report-metric-card__head">
+        <span
+          v-if="showIconArea"
+          class="report-metric-card__icon-wrap"
+          aria-hidden="true"
+        >
+          <slot name="icon">
+            <img
+              v-if="headIconSrc"
+              class="report-metric-card__icon-img"
+              :src="headIconSrc"
+              alt=""
+            />
+          </slot>
+        </span>
+        <span class="report-metric-card__head-title">{{ title }}</span>
+      </div>
+      <template v-if="type === 3">
+        <div
+          class="report-metric-card__emotion-text"
+          :style="{ color: highlightColor }"
+        >
+          {{ highlightText }}
+        </div>
+      </template>
+      <template v-else>
+        <div class="report-metric-card__big-value">{{ displayMainValue }}</div>
+        <div v-if="type === 4 && unit" class="report-metric-card__unit">
+          {{ unit }}
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+
+import img1 from './icons/1.png';
+import img2 from './icons/2.png';
+import img3 from './icons/3.png';
+import img4 from './icons/4.png';
+import img5 from './icons/5.png';
+import img6 from './icons/6.png';
+import img7 from './icons/7.png';
+import img8 from './icons/8.png';
+import img9 from './icons/9.png';
+import img10 from './icons/10.png';
+import img11 from './icons/11.png';
+
+/** 1 心理检测指数 | 2 压力指数 | 3 当前情绪 | 4 心率（带单位） */
+export type ReportMetricType = 1 | 2 | 3 | 4;
+
+/** 与 `icons/{n}.png` 对应，与 `type` 无关 */
+export type ReportMetricIconType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+
+const ICONS: Record<ReportMetricIconType, string> = {
+  1: img1,
+  2: img2,
+  3: img3,
+  4: img4,
+  5: img5,
+  6: img6,
+  7: img7,
+  8: img8,
+  9: img9,
+  10: img10,
+  11: img11,
+};
+
+const props = withDefaults(
+  defineProps<{
+    type: ReportMetricType;
+    /**
+     * 顶栏图标序号，对应 `icons/1.png` … `icons/11.png`；不传则不显示图标
+     */
+    iconType?: ReportMetricIconType;
+    /** 各状态通用：卡片标题 */
+    title: string;
+    /** 自定义顶栏图标 URL；传了则覆盖 `iconType` */
+    icon?: string;
+    /** 1：当前分 */
+    score?: number;
+    /** 1：满分 */
+    max?: number;
+    /** 2 / 4：中间大号数字或文案 */
+    mainValue?: string | number;
+    /** 3：中间彩色大字 */
+    highlightText?: string;
+    /** 3：大字颜色 */
+    highlightColor?: string;
+    /** 4：底部单位说明 */
+    unit?: string;
+  }>(),
+  {
+    max: 6,
+    highlightColor: '#f97316',
+  }
+);
+
+const slots = useSlots();
+
+/** 是否渲染图标区域：有 `#icon` 插槽、或 `icon`、或有效的 `iconType` */
+const showIconArea = computed(() => {
+  if (slots.icon) return true;
+  if (props.icon) return true;
+  if (props.iconType === undefined || props.iconType === null) return false;
+  const n = Number(props.iconType);
+  return n >= 1 && n <= 11 && Number.isFinite(n);
+});
+
+/** 顶栏图标：`icon` 优先，否则 `icons/{iconType}.png`（兼容字符串数字）；未传 iconType 且无 icon 则为空 */
+const headIconSrc = computed(() => {
+  if (props.icon) return props.icon;
+  if (props.iconType === undefined || props.iconType === null) return '';
+  const n = Number(props.iconType);
+  if (n >= 1 && n <= 11 && Number.isFinite(n)) {
+    return ICONS[n as ReportMetricIconType];
+  }
+  return '';
+});
+
+const formattedScore = computed(() => {
+  if (props.score === undefined || props.score === null) return '—';
+  const n = props.score;
+  return Number.isInteger(n) ? String(n) : n.toFixed(1);
+});
+
+/** 设计稿为 /6.0 形式，统一一位小数 */
+const formattedMax = computed(() => {
+  const m = props.max ?? 6;
+  return Number(m).toFixed(1);
+});
+
+const pointerLeft = computed(() => {
+  const max = props.max || 6;
+  const s = props.score ?? 0;
+  const ratio = Math.min(Math.max(s / max, 0), 1);
+  return `${ratio * 100}%`;
+});
+
+const displayMainValue = computed(() => {
+  if (props.mainValue === undefined || props.mainValue === null) return '—';
+  return String(props.mainValue);
+});
+</script>
+
+<style scoped lang="scss">
+.report-metric-card {
+  width: 158px;
+  height: 158px;
+  box-sizing: border-box;
+  background: #fff;
+  border-radius: 12px;
+  padding: 10px 10px 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ---------- type 1 心理检测指数（居中、渐变条 + 倒三角） ---------- */
+.report-metric-card--t1 {
+  align-items: center;
+}
+
+.report-metric-card__psych {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  flex: 1;
+}
+
+.report-metric-card__psych-head {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.report-metric-card__psych-head-title {
+  font-size: 17px;
+  font-weight: 500;
+  color: #000;
+  line-height: 1.25;
+}
+
+.report-metric-card__psych-title {
+  margin: 0;
+  width: 100%;
+  font-size: 19px;
+  font-weight: 500;
+  color: #000;
+ 
+  text-align: center;
+}
+
+.report-metric-card__psych-score {
+  margin-top: 10px;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 4px;
+}
+
+.report-metric-card__psych-value {
+  font-size: 55px;
+  font-weight: 700;
+  color: #000;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+.report-metric-card__psych-max {
+  font-size: 31px;
+  font-weight: 400;
+  color: #9ca3af;
+  line-height: 1;
+}
+
+.report-metric-card__psych-gauge {
+  width: 100%;
+  margin-top: auto;
+  padding-top: 12px;
+}
+
+.report-metric-card__psych-gauge-inner {
+  position: relative;
+  width: 100%;
+  padding-top: 15px;
+}
+
+.report-metric-card__psych-pointer {
+  position: absolute;
+  transform: translateX(-50%);
+  bottom: 0;
+  width: 24.55px;
+  height: 17.78px;
+  background: url('./icons/dot.png') no-repeat center center/cover;
+}
+
+.report-metric-card__psych-track {
+  height: 12px;
+  width: 100%;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    #4ade80 0%,
+    #22c55e 16%,
+    #eab308 50%,
+    #fb923c 78%,
+    #ea580c 100%
+  );
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
+}
+
+/* ---------- stress / emotion / vital 顶栏 ---------- */
+.report-metric-card--t2,
+.report-metric-card--t3,
+.report-metric-card--t4 {
+  align-items: center;
+  text-align: center;
+}
+
+.report-metric-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  width: 100%;
+  padding: 0 2px;
+}
+
+.report-metric-card__icon-wrap {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.report-metric-card__icon-img {
+  width: 30px;
+  height: 30px;
+  display: block;
+  object-fit: contain;
+}
+
+.report-metric-card__head-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #000;
+  line-height: 1.2;
+  text-align: left;
+}
+
+.report-metric-card__big-value {
+  margin-top: 8px;
+  font-size:55px;
+  font-weight: 700;
+  color: #000;
+  line-height: 1;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.report-metric-card__emotion-text {
+  margin-top: 6px;
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1.1;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.report-metric-card__unit {
+  margin-top: 4px;
+  font-size: 16px;
+  color: #9ca3af;
+  line-height: 1.2;
+}
+</style>

src/main.ts

@@ -2,40 +2,21 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router';
 
-import { IonicVue } from '@ionic/vue';
+import './styles/init.css';
 
-/* Core CSS required for Ionic components to work properly */
-import '@ionic/vue/css/core.css';
+import Vant from 'vant';
+import 'vant/lib/index.css';
 
-/* Basic CSS for apps built with Ionic */
-import '@ionic/vue/css/normalize.css';
-import '@ionic/vue/css/structure.css';
-import '@ionic/vue/css/typography.css';
-
-/* Optional CSS utils that can be commented out */
-import '@ionic/vue/css/padding.css';
-import '@ionic/vue/css/float-elements.css';
-import '@ionic/vue/css/text-alignment.css';
-import '@ionic/vue/css/text-transformation.css';
-import '@ionic/vue/css/flex-utils.css';
-import '@ionic/vue/css/display.css';
-
-/**
- * Ionic Dark Mode
- * -----------------------------------------------------
- * For more info, please see:
- * https://ionicframework.com/docs/theming/dark-mode
- */
-
-/* @import '@ionic/vue/css/palettes/dark.always.css'; */
-/* @import '@ionic/vue/css/palettes/dark.class.css'; */
-import '@ionic/vue/css/palettes/dark.system.css';
-
-/* Theme variables */
-import './theme/variables.css';
+// vConsole：仅开发环境启用（避免生产包默认开启）
+// if (import.meta.env.DEV) {
+  import('vconsole').then(({ default: VConsole }) => {
+    // eslint-disable-next-line no-new
+    new VConsole();
+  });
+// }
 
 const app = createApp(App)
-  .use(IonicVue)
+  .use(Vant)
   .use(router);
 
 router.isReady().then(() => {

src/router/index.ts

@@ -1,33 +1,30 @@
-import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
-import TabsPage from '../views/TabsPage.vue'
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
 
-const routes: Array<RouteRecordRaw> = [
+const routes: Array< RouteRecordRaw > = [
   {
     path: '/',
-    redirect: '/tabs/tab1'
+    redirect: '/step1'
+  },
+
+  {
+    path: '/step1',
+    component: () => import('@/views/step1.vue')
   },
   {
-    path: '/tabs/',
-    component: TabsPage,
-    children: [
-      {
-        path: '',
-        redirect: '/tabs/tab1'
-      },
-      {
-        path: 'tab1',
-        component: () => import('@/views/Tab1Page.vue')
-      },
-      {
-        path: 'tab2',
-        component: () => import('@/views/Tab2Page.vue')
-      },
-      {
-        path: 'tab3',
-        component: () => import('@/views/Tab3Page.vue')
-      }
-    ]
+    path: '/step2',
+    component: () => import('@/views/step2.vue')
+  },
+  {
+    path: '/step3',
+    component: () => import('@/views/step3.vue')
+  },
+  {
+    path: '/step4',
+    component: () => import('@/views/step4.vue')
+  },
+  {
+    path: '/step5',
+    component: () => import('@/views/step5.vue')
   }
 ]
 

src/styles/init.css

@@ -0,0 +1,141 @@
+/* 初始化样式（移动端友好，配合 postcss-px-to-viewport 使用） */
+
+/* 1) 盒模型与基础 reset */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+body {
+  margin: 0;
+  -webkit-text-size-adjust: 100%;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 2) 媒体元素默认行为 */
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  max-width: 100%;
+}
+
+img {
+  height: auto;
+}
+
+/* 3) 表单元素 */
+button,
+input,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+textarea {
+  resize: vertical;
+}
+
+/* iOS 点击高亮 */
+a,
+button,
+input,
+textarea,
+select {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 4) 常用元素 reset */
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+/* 5) 可访问性：减少动画 */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* 6) 设计变量（按需覆盖） */
+:root {
+  --bg: #ffffff;
+  --text: #111827;
+  --muted: #6b7280;
+  --border: rgba(17, 24, 39, 0.12);
+  --primary: #2563eb;
+
+  --radius: 12px;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
+    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+}
+
+/* 7) 小工具类（可选） */
+.container {
+  width: 100%;
+  max-width: 1080px;
+  margin: 0 auto;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

src/theme/variables.css

@@ -1,2 +1 @@
-/* For information on how to create your own theme, please refer to:
-http://ionicframework.com/docs/theming/ */
+/* Optional global theme variables */

src/views/Tab1Page.vue

@@ -1,23 +0,0 @@
-<template>
-  <ion-page>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Tab 1</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Tab 1</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ExploreContainer name="Tab 1 page" />
-    </ion-content>
-  </ion-page>
-</template>
-
-<script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
-import ExploreContainer from '@/components/ExploreContainer.vue';
-</script>