Refactor code structure for improved readability and maintainability

2026-01-11 15:51:22 +07:00
parent 6f8a8de9be
commit 309606565b
46 changed files with 28649 additions and 28522 deletions
--- a/APP_UPDATE.md
+++ b/APP_UPDATE.md
@@ -20,16 +20,16 @@

 ```vue
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted } from "vue";

-const { checkAndPromptUpdate } = useAppUpdate()
+const { checkAndPromptUpdate } = useAppUpdate();

 onMounted(async () => {
  // 应用启动 3 秒后检查更新
  setTimeout(() => {
-    checkAndPromptUpdate()
-  }, 3000)
-})
+    checkAndPromptUpdate();
+  }, 3000);
+});
 </script>
 ```

@@ -38,6 +38,18 @@ onMounted(async () => {
 在设置页面添加"检查更新"按钮：

 ```vue
+<script setup lang="ts">
+const {
+  isChecking,
+  currentVersion,
+  checkAndPromptUpdate,
+} = useAppUpdate();
+
+async function handleCheckUpdate() {
+  await checkAndPromptUpdate();
+}
+</script>
+
 <template>
  <ion-page>
    <ion-header>
@@ -59,18 +71,6 @@ onMounted(async () => {
    </ion-content>
  </ion-page>
 </template>
-
-<script setup lang="ts">
-const {
-  isChecking,
-  currentVersion,
-  checkAndPromptUpdate,
-} = useAppUpdate()
-
-async function handleCheckUpdate() {
-  await checkAndPromptUpdate()
-}
-</script>
 ```

 ### 3. 自定义更新提示
@@ -86,19 +86,20 @@ const {
  updateMessage,
  checkForUpdate,
  openStoreUpdate,
-} = useAppUpdate()
+} = useAppUpdate();

 async function checkUpdate() {
-  const result = await checkForUpdate()
+  const result = await checkForUpdate();

  if (result.hasUpdate) {
    // 自定义提示逻辑
    if (result.forceUpdate) {
      // 强制更新 - 阻止用户继续使用
-      showForceUpdateModal()
-    } else {
+      showForceUpdateModal();
+    }
+    else {
      // 可选更新 - 显示提示但允许跳过
-      showOptionalUpdateToast()
+      showOptionalUpdateToast();
    }
  }
 }
@@ -108,26 +109,28 @@ async function checkUpdate() {
 ### 4. 显示版本信息

 ```vue
+<script setup lang="ts">
+import { onMounted } from "vue";
+
+const { currentVersion, hasUpdate, getCurrentVersion, checkForUpdate } = useAppUpdate();
+
+onMounted(async () => {
+  await getCurrentVersion();
+  await checkForUpdate();
+});
+</script>
+
 <template>
  <ion-item>
    <ion-label>
      <h2>应用版本</h2>
      <p>{{ currentVersion || '获取中...' }}</p>
    </ion-label>
-    <ion-badge v-if="hasUpdate" color="danger">有更新</ion-badge>
+    <ion-badge v-if="hasUpdate" color="danger">
+      有更新
+    </ion-badge>
  </ion-item>
 </template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue'
-
-const { currentVersion, hasUpdate, getCurrentVersion, checkForUpdate } = useAppUpdate()
-
-onMounted(async () => {
-  await getCurrentVersion()
-  await checkForUpdate()
-})
-</script>
 ```

 ## API 参考
--- a/VERSION_MANAGEMENT.md
+++ b/VERSION_MANAGEMENT.md
@@ -51,23 +51,23 @@ curl https://your-domain.com/version.json

 ```typescript
 // Node.js / Elysia 示例
-app.get('/api/app/version', async (ctx) => {
+app.get("/api/app/version", async (ctx) => {
  // 从前端静态资源读取版本
-  const response = await fetch('https://your-frontend-domain.com/version.json')
-  const frontendVersion = await response.json()
+  const response = await fetch("https://your-frontend-domain.com/version.json");
+  const frontendVersion = await response.json();

-  const { platform, currentVersion } = ctx.query
+  const { platform, currentVersion } = ctx.query;

  return {
    version: frontendVersion.version,
    forceUpdate: compareVersion(currentVersion, frontendVersion.version) < 0,
-    updateMessage: '修复了一些问题',
-    updateUrl: platform === 'ios' 
-      ? 'https://apps.apple.com/app/xxx'
-      : 'https://play.google.com/store/apps/details?id=xxx',
-    minSupportVersion: '0.0.1',
-  }
-})
+    updateMessage: "修复了一些问题",
+    updateUrl: platform === "ios"
+      ? "https://apps.apple.com/app/xxx"
+      : "https://play.google.com/store/apps/details?id=xxx",
+    minSupportVersion: "0.0.1",
+  };
+});
 ```

 **方式 2：部署时同步到后端**
@@ -88,18 +88,18 @@ app.get('/api/app/version', async (ctx) => {
 后端直接读取本地文件：

 ```typescript
-import fs from 'fs'
+import fs from "node:fs";

-app.get('/api/app/version', async (ctx) => {
-  const versionFile = fs.readFileSync('/app/frontend-version.json', 'utf-8')
-  const { version } = JSON.parse(versionFile)
+app.get("/api/app/version", async (ctx) => {
+  const versionFile = fs.readFileSync("/app/frontend-version.json", "utf-8");
+  const { version } = JSON.parse(versionFile);

  return {
    version,
    forceUpdate: false,
    // ...
-  }
-})
+  };
+});
 ```

 ---
@@ -112,7 +112,7 @@ app.get('/api/app/version', async (ctx) => {

 ```json
 {
-  "version": "1.2.3"  // 只改这里
+  "version": "1.2.3" // 只改这里
 }
 ```

@@ -162,27 +162,27 @@ versionName "1.2.3"  // 与 package.json 保持一致

 ```javascript
 #!/usr/bin/env node
-import fs from 'fs'
-import { execSync } from 'child_process'
+import { execSync } from "node:child_process";
+import fs from "node:fs";

-const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf-8'))
-const version = packageJson.version
+const packageJson = JSON.parse(fs.readFileSync("./package.json", "utf-8"));
+const version = packageJson.version;

-console.log(`Syncing version ${version} to native projects...`)
+console.log(`Syncing version ${version} to native projects...`);

 // iOS
-const infoPlist = './ios/App/App/Info.plist'
-let plistContent = fs.readFileSync(infoPlist, 'utf-8')
+const infoPlist = "./ios/App/App/Info.plist";
+let plistContent = fs.readFileSync(infoPlist, "utf-8");
 plistContent = plistContent.replace(
  /<key>CFBundleShortVersionString<\/key>\s*<string>.*?<\/string>/,
  `<key>CFBundleShortVersionString</key>\n\t<string>${version}</string>`
-)
-fs.writeFileSync(infoPlist, plistContent)
+);
+fs.writeFileSync(infoPlist, plistContent);

 // Android (需要安装 gradle 解析库或手动更新)
-console.log('Please manually update android/app/build.gradle versionName')
+console.log("Please manually update android/app/build.gradle versionName");

-console.log('✓ Version synced!')
+console.log("✓ Version synced!");
 ```

 在 `package.json` 中添加脚本：
@@ -241,7 +241,7 @@ jobs:
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
-          node-version: '18'
+          node-version: "18"

      - name: Install dependencies
        run: pnpm install
@@ -284,107 +284,108 @@ jobs:

 **一次配置，永久受益！** 🎉

-
 ## 后端 API 实现示例 - 版本检查接口

 ```ts
-import { Elysia, t } from 'elysia'
+// 方案二：从本地文件读取（适用于前后端部署在同一服务器）
+import fs from "node:fs";
+
+import { Elysia, t } from "elysia";

 // 版本比较工具函数
 function compareVersion(version1: string, version2: string): number {
-  const v1Parts = version1.split('.').map(Number)
-  const v2Parts = version2.split('.').map(Number)
-  const maxLength = Math.max(v1Parts.length, v2Parts.length)
+  const v1Parts = version1.split(".").map(Number);
+  const v2Parts = version2.split(".").map(Number);
+  const maxLength = Math.max(v1Parts.length, v2Parts.length);

  for (let i = 0; i < maxLength; i++) {
-    const v1Part = v1Parts[i] || 0
-    const v2Part = v2Parts[i] || 0
+    const v1Part = v1Parts[i] || 0;
+    const v2Part = v2Parts[i] || 0;

-    if (v1Part < v2Part) return -1
-    if (v1Part > v2Part) return 1
+    if (v1Part < v2Part)
+      return -1;
+    if (v1Part > v2Part)
+      return 1;
  }

-  return 0
+  return 0;
 }

 // 方案一：从前端静态资源读取版本（推荐）
 async function getFrontendVersionFromURL(): Promise<{
-  version: string
-  buildTime: string
-  gitCommit: string
-  environment: string
+  version: string;
+  buildTime: string;
+  gitCommit: string;
+  environment: string;
 }> {
-  const response = await fetch('https://your-frontend-domain.com/version.json')
-  return await response.json()
+  const response = await fetch("https://your-frontend-domain.com/version.json");
+  return await response.json();
 }

-// 方案二：从本地文件读取（适用于前后端部署在同一服务器）
-import fs from 'fs'
-
 function getFrontendVersionFromFile(): {
-  version: string
-  buildTime: string
-  gitCommit: string
-  environment: string
+  version: string;
+  buildTime: string;
+  gitCommit: string;
+  environment: string;
 } {
-  const content = fs.readFileSync('/app/frontend-version.json', 'utf-8')
-  return JSON.parse(content)
+  const content = fs.readFileSync("/app/frontend-version.json", "utf-8");
+  return JSON.parse(content);
 }

 // 应用商店链接配置
 const APP_STORE_URLS = {
-  ios: 'https://apps.apple.com/app/id123456789',
-  android: 'https://play.google.com/store/apps/details?id=riwa.ionic.app',
-}
+  ios: "https://apps.apple.com/app/id123456789",
+  android: "https://play.google.com/store/apps/details?id=riwa.ionic.app",
+};

 // 版本策略配置（可存储在数据库）
 const VERSION_POLICIES = {
-  minSupportVersion: '0.0.1',  // 最低支持版本
-  forceUpdateVersions: ['0.0.1'], // 需要强制更新的版本列表
+  minSupportVersion: "0.0.1", // 最低支持版本
+  forceUpdateVersions: ["0.0.1"], // 需要强制更新的版本列表
  updateMessages: {
-    'zh-CN': '修复了一些问题并优化了性能',
-    'en-US': 'Bug fixes and performance improvements',
+    "zh-CN": "修复了一些问题并优化了性能",
+    "en-US": "Bug fixes and performance improvements",
  },
-}
+};

 // Elysia 路由定义
 const app = new Elysia()
  .get(
-    '/api/app/version',
+    "/api/app/version",
    async ({ query, headers }) => {
-      const { platform, currentVersion } = query
-      const lang = headers['accept-language']?.split(',')[0] || 'en-US'
+      const { platform, currentVersion } = query;
+      const lang = headers["accept-language"]?.split(",")[0] || "en-US";

      try {
        // 获取前端版本信息
-        const frontendVersion = await getFrontendVersionFromURL()
+        const frontendVersion = await getFrontendVersionFromURL();
        // 或使用本地文件: const frontendVersion = getFrontendVersionFromFile()

        // 判断是否需要更新
-        const hasUpdate = compareVersion(currentVersion, frontendVersion.version) < 0
+        const hasUpdate = compareVersion(currentVersion, frontendVersion.version) < 0;

        // 判断是否强制更新
-        let forceUpdate = VERSION_POLICIES.forceUpdateVersions.includes(currentVersion)
+        let forceUpdate = VERSION_POLICIES.forceUpdateVersions.includes(currentVersion);

        // 检查是否低于最低支持版本
        if (compareVersion(currentVersion, VERSION_POLICIES.minSupportVersion) < 0) {
-          forceUpdate = true
+          forceUpdate = true;
        }

        // 获取更新链接
-        const updateUrl = platform === 'ios' 
+        const updateUrl = platform === "ios"
          ? APP_STORE_URLS.ios
-          : platform === 'android'
+          : platform === "android"
            ? APP_STORE_URLS.android
-            : ''
+            : "";

        // 获取更新说明（多语言）
        const updateMessage = VERSION_POLICIES.updateMessages[lang]
-          || VERSION_POLICIES.updateMessages['en-US']
+          || VERSION_POLICIES.updateMessages["en-US"];

        return {
          version: frontendVersion.version,
-          buildNumber: parseInt(frontendVersion.version.replace(/\./g, '')),
+          buildNumber: Number.parseInt(frontendVersion.version.replace(/\./g, "")),
          buildTime: frontendVersion.buildTime,
          gitCommit: frontendVersion.gitCommit,
          forceUpdate,
@@ -392,26 +393,27 @@ const app = new Elysia()
          updateUrl,
          minSupportVersion: VERSION_POLICIES.minSupportVersion,
          releaseNotes: [
-            '修复了已知问题',
-            '优化了应用性能',
-            '改进了用户界面',
+            "修复了已知问题",
+            "优化了应用性能",
+            "改进了用户界面",
          ],
-        }
-      } catch (error) {
-        console.error('Failed to get frontend version:', error)
+        };
+      }
+      catch (error) {
+        console.error("Failed to get frontend version:", error);

        // 降级处理：返回当前版本，不强制更新
        return {
          version: currentVersion,
          forceUpdate: false,
-          updateMessage: '',
-          updateUrl: '',
-        }
+          updateMessage: "",
+          updateUrl: "",
+        };
      }
    },
    {
      query: t.Object({
-        platform: t.Union([t.Literal('ios'), t.Literal('android'), t.Literal('web')]),
+        platform: t.Union([t.Literal("ios"), t.Literal("android"), t.Literal("web")]),
        currentVersion: t.String(),
      }),
      response: t.Object({
@@ -426,9 +428,9 @@ const app = new Elysia()
        releaseNotes: t.Optional(t.Array(t.String())),
      }),
    }
-  )
+  );

-export default app
+export default app;

 /**
 * 使用示例：
@@ -470,5 +472,4 @@ export default app
 *   [platform]
 * )
 */
-
 ```
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
    "@ionic/vue-router": "^8.7.11",
    "@riwa/api-types": "http://192.168.1.7:9527/api/riwa-eden-0.0.118.tgz",
    "@tailwindcss/vite": "^4.1.18",
-    "@vee-validate/yup": "^4.15.1",
+    "@vee-validate/zod": "^4.15.1",
    "@vueuse/core": "^14.1.0",
    "@vueuse/integrations": "^14.1.0",
    "@vueuse/router": "^14.1.0",
@@ -55,7 +55,7 @@
    "vue": "^3.5.25",
    "vue-i18n": "^11.2.2",
    "vue-router": "^4.6.3",
-    "yup": "^1.7.1"
+    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^6.6.1",
--- a/packages/distribute/README.md
+++ b/packages/distribute/README.md
@@ -50,19 +50,19 @@ pnpm generate

 ```typescript
 export const currentVersion: AppVersion = {
-  version: '1.0.0',
-  buildNumber: '100',
-  releaseDate: '2025-12-30',
+  version: "1.0.0",
+  buildNumber: "100",
+  releaseDate: "2025-12-30",
  releaseNotes: {
-    'zh-CN': ['更新内容...'],
-    'en-US': ['What\'s new...'],
+    "zh-CN": ["更新内容..."],
+    "en-US": ["What's new..."],
  },
  downloads: {
-    ios: 'https://example.com/app.ipa',
-    android: 'https://example.com/app.apk',
-    h5: 'https://app.example.com',
+    ios: "https://example.com/app.ipa",
+    android: "https://example.com/app.apk",
+    h5: "https://app.example.com",
  },
-}
+};
 ```

 ### 接入真实 API
@@ -81,9 +81,9 @@ Nuxt UI 使用 TailwindCSS 4，可在 `nuxt.config.ts` 中配置：
 ```typescript
 export default defineNuxtConfig({
  colorMode: {
-    preference: 'system', // 'light' | 'dark' | 'system'
+    preference: "system", // 'light' | 'dark' | 'system'
  },
-})
+});
 ```

 ## 目录结构
--- a/packages/distribute/app.config.ts
+++ b/packages/distribute/app.config.ts
@@ -1,7 +1,7 @@
 export default defineAppConfig({
  ui: {
    colors: {
-      primary: 'blue',
+      primary: "blue",
    },
  },
-})
+});
--- a/packages/distribute/app.vue
+++ b/packages/distribute/app.vue
@@ -6,4 +6,3 @@
    <NuxtPage />
  </UApp>
 </template>
-
--- a/packages/distribute/assets/css/animations.css
+++ b/packages/distribute/assets/css/animations.css
@@ -64,7 +64,8 @@

 /* 发光脉冲效果 */
@keyframes glow-pulse {
-  0%, 100% {
+  0%,
+  100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
  }
  50% {
@@ -96,7 +97,8 @@

 /* 悬浮动画 */
@keyframes float {
-  0%, 100% {
+  0%,
+  100% {
    transform: translateY(0);
  }
  50% {
@@ -208,7 +210,8 @@

 /* 脉冲缩放动画 */
@keyframes pulse-scale {
-  0%, 100% {
+  0%,
+  100% {
    transform: scale(1);
  }
  50% {
@@ -250,7 +253,8 @@

 /* 微妙的悬浮动画 */
@keyframes float-subtle {
-  0%, 100% {
+  0%,
+  100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
@@ -284,7 +288,8 @@

 /* 发光脉冲动画 */
@keyframes pulse-glow {
-  0%, 100% {
+  0%,
+  100% {
    opacity: 0.5;
  }
  50% {
@@ -298,7 +303,8 @@

 /* 微妙的脉冲动画 */
@keyframes pulse-subtle {
-  0%, 100% {
+  0%,
+  100% {
    opacity: 1;
  }
  50% {
@@ -362,7 +368,8 @@

 /* 震动效果 */
@keyframes shake {
-  0%, 100% {
+  0%,
+  100% {
    transform: translateX(0);
  }
  25% {
@@ -401,7 +408,8 @@

 /* 呼吸灯效果 */
@keyframes breathe {
-  0%, 100% {
+  0%,
+  100% {
    opacity: 0.6;
    transform: scale(1);
  }
--- a/packages/distribute/components/PWAInstallBanner.vue
+++ b/packages/distribute/components/PWAInstallBanner.vue
@@ -1,59 +1,59 @@
 <script setup lang="ts">
-const { t } = useI18n()
-const { canInstall, isInstalled, install } = usePWAInstall()
-const installing = ref(false)
-const dismissed = ref(false)
+const { t } = useI18n();
+const { canInstall, isInstalled, install } = usePWAInstall();
+const installing = ref(false);
+const dismissed = ref(false);

 // 从 localStorage 读取是否已关闭，但只在未安装状态下有效
 onMounted(() => {
  // 如果应用未安装，检查用户是否之前关闭过横幅
  if (!isInstalled.value) {
-    dismissed.value = localStorage.getItem('pwa-banner-dismissed') === 'true'
+    dismissed.value = localStorage.getItem("pwa-banner-dismissed") === "true";
  }
  else {
    // 如果应用已安装，清除关闭记录（为了卸载后能再次提示）
-    localStorage.removeItem('pwa-banner-dismissed')
+    localStorage.removeItem("pwa-banner-dismissed");
  }
-})
+});

 // 监听安装状态变化
 watch(isInstalled, (newValue) => {
  if (newValue) {
    // 应用安装后，清除关闭记录
-    localStorage.removeItem('pwa-banner-dismissed')
-    dismissed.value = false
+    localStorage.removeItem("pwa-banner-dismissed");
+    dismissed.value = false;
  }
-})
+});

 // 监听 canInstall 变化（卸载后会重新触发 beforeinstallprompt）
 watch(canInstall, (newValue) => {
  if (newValue && !isInstalled.value) {
    // 如果可以安装且未安装，清除之前的关闭记录
    // 这样卸载后再次访问就会重新显示横幅
-    localStorage.removeItem('pwa-banner-dismissed')
-    dismissed.value = false
+    localStorage.removeItem("pwa-banner-dismissed");
+    dismissed.value = false;
  }
-})
+});

 async function handleInstall() {
-  installing.value = true
+  installing.value = true;
  try {
-    const success = await install()
+    const success = await install();
    if (success) {
-      console.log('PWA 安装成功')
+      console.log("PWA 安装成功");
    }
  }
  finally {
-    installing.value = false
+    installing.value = false;
  }
 }

 function dismissBanner() {
-  dismissed.value = true
-  localStorage.setItem('pwa-banner-dismissed', 'true')
+  dismissed.value = true;
+  localStorage.setItem("pwa-banner-dismissed", "true");
 }

-const showBanner = computed(() => canInstall.value && !isInstalled.value && !dismissed.value)
+const showBanner = computed(() => canInstall.value && !isInstalled.value && !dismissed.value);
 </script>

 <template>
--- a/packages/distribute/components/PWAInstallButton.vue
+++ b/packages/distribute/components/PWAInstallButton.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-const { t } = useI18n()
-const { canInstall, isInstalled, install } = usePWAInstall()
-const installing = ref(false)
+const { t } = useI18n();
+const { canInstall, isInstalled, install } = usePWAInstall();
+const installing = ref(false);

 async function handleInstall() {
-  installing.value = true
+  installing.value = true;
  try {
-    const success = await install()
+    const success = await install();
    if (success) {
      // 可以显示成功提示
-      console.log('PWA 安装成功')
+      console.log("PWA 安装成功");
    }
  }
  finally {
-    installing.value = false
+    installing.value = false;
  }
 }
 </script>
--- a/packages/distribute/composables/usePWAInstall.ts
+++ b/packages/distribute/composables/usePWAInstall.ts
@@ -1,52 +1,52 @@
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from "vue";

 export function usePWAInstall() {
-  const deferredPrompt = ref<any>(null)
-  const canInstall = ref(false)
-  const isInstalled = ref(false)
+  const deferredPrompt = ref<any>(null);
+  const canInstall = ref(false);
+  const isInstalled = ref(false);

  onMounted(() => {
    // 检查是否已安装
-    if (window.matchMedia('(display-mode: standalone)').matches) {
-      isInstalled.value = true
-      return
+    if (window.matchMedia("(display-mode: standalone)").matches) {
+      isInstalled.value = true;
+      return;
    }

    // 监听安装提示事件
-    window.addEventListener('beforeinstallprompt', (e) => {
-      e.preventDefault()
-      deferredPrompt.value = e
-      canInstall.value = true
-    })
+    window.addEventListener("beforeinstallprompt", (e) => {
+      e.preventDefault();
+      deferredPrompt.value = e;
+      canInstall.value = true;
+    });

    // 监听安装成功事件
-    window.addEventListener('appinstalled', () => {
-      deferredPrompt.value = null
-      canInstall.value = false
-      isInstalled.value = true
-    })
-  })
+    window.addEventListener("appinstalled", () => {
+      deferredPrompt.value = null;
+      canInstall.value = false;
+      isInstalled.value = true;
+    });
+  });

  async function install() {
    if (!deferredPrompt.value) {
-      return false
+      return false;
    }

    try {
-      await deferredPrompt.value.prompt()
-      const { outcome } = await deferredPrompt.value.userChoice
+      await deferredPrompt.value.prompt();
+      const { outcome } = await deferredPrompt.value.userChoice;

-      if (outcome === 'accepted') {
-        deferredPrompt.value = null
-        canInstall.value = false
-        return true
+      if (outcome === "accepted") {
+        deferredPrompt.value = null;
+        canInstall.value = false;
+        return true;
      }

-      return false
+      return false;
    }
    catch (error) {
-      console.error('安装失败:', error)
-      return false
+      console.error("安装失败:", error);
+      return false;
    }
  }

@@ -54,5 +54,5 @@ export function usePWAInstall() {
    canInstall,
    isInstalled,
    install,
-  }
+  };
 }
--- a/packages/distribute/composables/usePlatformDetection.ts
+++ b/packages/distribute/composables/usePlatformDetection.ts
@@ -1,32 +1,32 @@
-import type { Platform } from '~/types'
+import type { Platform } from "~/types";

 export function usePlatformDetection() {
-  const platform = useState<Platform>('platform', () => 'unknown')
+  const platform = useState<Platform>("platform", () => "unknown");

  function detectPlatform(): Platform {
    if (import.meta.server)
-      return 'unknown'
+      return "unknown";

-    const ua = navigator.userAgent.toLowerCase()
+    const ua = navigator.userAgent.toLowerCase();

    if (/iphone|ipad|ipod/.test(ua))
-      return 'ios'
+      return "ios";
    else if (/android/.test(ua))
-      return 'android'
+      return "android";
    else if (/windows|macintosh|linux/.test(ua))
-      return 'desktop'
+      return "desktop";

-    return 'unknown'
+    return "unknown";
  }

  onMounted(() => {
-    platform.value = detectPlatform()
-  })
+    platform.value = detectPlatform();
+  });

  return {
    platform: readonly(platform),
-    isIOS: computed(() => platform.value === 'ios'),
-    isAndroid: computed(() => platform.value === 'android'),
-    isDesktop: computed(() => platform.value === 'desktop'),
-  }
+    isIOS: computed(() => platform.value === "ios"),
+    isAndroid: computed(() => platform.value === "android"),
+    isDesktop: computed(() => platform.value === "desktop"),
+  };
 }
--- a/packages/distribute/data/apps.ts
+++ b/packages/distribute/data/apps.ts
--- a/packages/distribute/data/versions.ts
+++ b/packages/distribute/data/versions.ts
@@ -1,34 +1,34 @@
-import type { AppVersion, DownloadStats } from '~/types'
+import type { AppVersion, DownloadStats } from "~/types";

 // 当前版本信息
 export const currentVersion: AppVersion = {
-  version: '1.0.0',
-  buildNumber: '100',
-  releaseDate: '2025-12-30',
+  version: "1.0.0",
+  buildNumber: "100",
+  releaseDate: "2025-12-30",
  releaseNotes: {
-    'zh-CN': [
-      '🎉 首次发布',
-      '✨ 全新的用户界面设计',
-      '🔐 增强的安全特性',
-      '⚡ 性能优化，响应速度提升 30%',
-      '🌍 支持多语言切换',
-      '🌙 深色模式支持',
+    "zh-CN": [
+      "🎉 首次发布",
+      "✨ 全新的用户界面设计",
+      "🔐 增强的安全特性",
+      "⚡ 性能优化，响应速度提升 30%",
+      "🌍 支持多语言切换",
+      "🌙 深色模式支持",
    ],
-    'en-US': [
-      '🎉 Initial Release',
-      '✨ Brand new user interface',
-      '🔐 Enhanced security features',
-      '⚡ Performance optimization, 30% faster response',
-      '🌍 Multi-language support',
-      '🌙 Dark mode support',
+    "en-US": [
+      "🎉 Initial Release",
+      "✨ Brand new user interface",
+      "🔐 Enhanced security features",
+      "⚡ Performance optimization, 30% faster response",
+      "🌍 Multi-language support",
+      "🌙 Dark mode support",
    ],
  },
  downloads: {
-    ios: 'https://example.com/riwa-ios-1.0.0.ipa',
-    android: 'https://example.com/riwa-android-1.0.0.apk',
-    h5: 'http://localhost:5173',
+    ios: "https://example.com/riwa-ios-1.0.0.ipa",
+    android: "https://example.com/riwa-android-1.0.0.apk",
+    h5: "http://localhost:5173",
  },
-}
+};

 // 模拟下载统计数据
 export const mockDownloadStats: DownloadStats = {
@@ -36,4 +36,4 @@ export const mockDownloadStats: DownloadStats = {
  today: 156,
  ios: 7234,
  android: 5346,
-}
+};
--- a/packages/distribute/docker-compose.yml
+++ b/packages/distribute/docker-compose.yml
@@ -14,7 +14,6 @@ services:
      # nginx conf
      - ./nginx.conf:/etc/nginx/nginx.conf

-
 # version: '3.8'

 # services:
--- a/packages/distribute/eslint.config.mjs
+++ b/packages/distribute/eslint.config.mjs
@@ -1,8 +1,8 @@
-import antfu from '@antfu/eslint-config'
-import withNuxt from './.nuxt/eslint.config.mjs'
+import antfu from "@antfu/eslint-config";
+import withNuxt from "./.nuxt/eslint.config.mjs";

 export default withNuxt(
  antfu({
    formatters: true,
  }),
-)
+);
--- a/packages/distribute/nuxt.config.ts
+++ b/packages/distribute/nuxt.config.ts
@@ -1,49 +1,49 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
  modules: [
-    '@nuxt/ui',
-    '@nuxtjs/i18n',
-    '@nuxt/eslint',
-    '@vite-pwa/nuxt',
+    "@nuxt/ui",
+    "@nuxtjs/i18n",
+    "@nuxt/eslint",
+    "@vite-pwa/nuxt",
  ],

  devtools: { enabled: true },

  pwa: {
-    registerType: 'autoUpdate',
+    registerType: "autoUpdate",
    manifest: {
-      name: 'Riwa应用商店',
-      short_name: 'Riwa应用商店',
-      description: 'Riwa App 下载 - iOS, Android, H5',
-      theme_color: '#3b82f6',
-      background_color: '#ffffff',
-      display: 'standalone',
-      scope: '/',
-      start_url: '/',
+      name: "Riwa应用商店",
+      short_name: "Riwa应用商店",
+      description: "Riwa App 下载 - iOS, Android, H5",
+      theme_color: "#3b82f6",
+      background_color: "#ffffff",
+      display: "standalone",
+      scope: "/",
+      start_url: "/",
      icons: [
        {
-          src: '/favicon.svg',
-          sizes: '512x512',
-          type: 'image/svg+xml',
-          purpose: 'any',
+          src: "/favicon.svg",
+          sizes: "512x512",
+          type: "image/svg+xml",
+          purpose: "any",
        },
        {
-          src: '/favicon.svg',
-          sizes: '192x192',
-          type: 'image/svg+xml',
+          src: "/favicon.svg",
+          sizes: "192x192",
+          type: "image/svg+xml",
        },
      ],
    },
    workbox: {
-      navigateFallback: '/',
-      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
+      navigateFallback: "/",
+      globPatterns: ["**/*.{js,css,html,png,svg,ico}"],
      cleanupOutdatedCaches: true,
      runtimeCaching: [
        {
          urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
-          handler: 'CacheFirst',
+          handler: "CacheFirst",
          options: {
-            cacheName: 'google-fonts-cache',
+            cacheName: "google-fonts-cache",
            expiration: {
              maxEntries: 10,
              maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
@@ -55,9 +55,9 @@ export default defineNuxtConfig({
        },
        {
          urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
-          handler: 'CacheFirst',
+          handler: "CacheFirst",
          options: {
-            cacheName: 'gstatic-fonts-cache',
+            cacheName: "gstatic-fonts-cache",
            expiration: {
              maxEntries: 10,
              maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
@@ -75,81 +75,81 @@ export default defineNuxtConfig({
    },
    devOptions: {
      enabled: true,
-      type: 'module',
+      type: "module",
    },
    injectManifest: {
-      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
+      globPatterns: ["**/*.{js,css,html,png,svg,ico}"],
    },
  },

  css: [
-    '~/assets/css/main.css',
-    '~/assets/css/animations.css',
+    "~/assets/css/main.css",
+    "~/assets/css/animations.css",
  ],

  colorMode: {
-    preference: 'light',
+    preference: "light",
  },

  i18n: {
-    defaultLocale: 'zh-CN',
+    defaultLocale: "zh-CN",
    locales: [
      {
-        code: 'zh-CN',
-        name: '简体中文',
-        file: 'zh-CN.json',
+        code: "zh-CN",
+        name: "简体中文",
+        file: "zh-CN.json",
      },
      {
-        code: 'en-US',
-        name: 'English',
-        file: 'en-US.json',
+        code: "en-US",
+        name: "English",
+        file: "en-US.json",
      },
    ],
-    strategy: 'no_prefix',
+    strategy: "no_prefix",
    detectBrowserLanguage: {
      useCookie: true,
-      cookieKey: 'i18n_locale',
-      redirectOn: 'root',
+      cookieKey: "i18n_locale",
+      redirectOn: "root",
    },
  },

  app: {
    head: {
-      charset: 'utf-8',
-      viewport: 'width=device-width, initial-scale=1',
-      title: 'Riwa App 下载',
+      charset: "utf-8",
+      viewport: "width=device-width, initial-scale=1",
+      title: "Riwa App 下载",
      meta: [
-        { name: 'description', content: 'Riwa App 下载 - iOS, Android, H5' },
+        { name: "description", content: "Riwa App 下载 - iOS, Android, H5" },
      ],
      link: [
-        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
+        { rel: "icon", type: "image/svg+xml", href: "/favicon.svg" },
      ],
    },
  },

-  devServer:{
-    host: '0.0.0.0'
+  devServer: {
+    host: "0.0.0.0",
  },

  nitro: {
    prerender: {
-      routes: ['/'],
+      routes: ["/"],
      crawlLinks: true,
    },
  },

  hooks: {
-    async 'nitro:config'(nitroConfig) {
+    "nitro:config": async function (nitroConfig) {
      // 预渲染所有应用详情页
-      const { apps } = await import('./data/apps')
-      const routes = apps.map(app => `/apps/${app.id}`)
-      nitroConfig.prerender = nitroConfig.prerender || {}
+      const { apps } = await import("./data/apps");
+      const routes = apps.map(app => `/apps/${app.id}`);
+      nitroConfig.prerender = nitroConfig.prerender || {};
      nitroConfig.prerender.routes = [
        ...(nitroConfig.prerender.routes || []),
        ...routes,
-      ]
+      ];
    },
  },

-  compatibilityDate: '2025-12-30',
-})
+  compatibilityDate: "2025-12-30",
+});
--- a/packages/distribute/package.json
+++ b/packages/distribute/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@riwa/distribute",
-  "version": "1.0.0",
  "type": "module",
+  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt dev",
--- a/packages/distribute/pages/apps/[id].vue
+++ b/packages/distribute/pages/apps/[id].vue
@@ -1,72 +1,72 @@
 <script setup lang="ts">
-import type { AppInfo } from '~/types'
-import { apps } from '~/data/apps'
+import type { AppInfo } from "~/types";
+import { apps } from "~/data/apps";

-const route = useRoute()
-const router = useRouter()
-const { t, locale } = useI18n()
+const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();

 // 直接从数据文件获取应用详情
-const app = computed(() => apps.find(a => a.id === route.params.id))
+const app = computed(() => apps.find(a => a.id === route.params.id));

 // 如果应用不存在，跳转回首页
 if (!app.value) {
-  navigateTo('/')
+  navigateTo("/");
 }

 // 下载处理
-async function handleDownload(type: 'ios' | 'android' | 'h5') {
+async function handleDownload(type: "ios" | "android" | "h5") {
  if (!app.value) {
-    return
+    return;
  }

-  const url = app.value.downloads[type]
+  const url = app.value.downloads[type];

  if (!url) {
-    return
+    return;
  }

-  if (type === 'h5') {
-    navigateTo(url, { external: true, open: { target: '_blank' } })
+  if (type === "h5") {
+    navigateTo(url, { external: true, open: { target: "_blank" } });
  }
  else {
-    navigateTo(url, { external: true })
+    navigateTo(url, { external: true });
  }

  await $fetch(`/api/track/${type}`, {
-    method: 'POST',
+    method: "POST",
    body: { appId: app.value.id },
-  })
+  });
 }

 // 返回首页
 function goBack() {
-  router.back()
+  router.back();
 }

 // SEO
 useHead({
-  title: app.value ? `${app.value.name} - Riwa App Store` : 'Riwa App Store',
+  title: app.value ? `${app.value.name} - Riwa App Store` : "Riwa App Store",
  meta: [
    {
-      name: 'description',
-      content: app.value?.shortDescription[locale.value as 'zh-CN' | 'en-US'] || '',
+      name: "description",
+      content: app.value?.shortDescription[locale.value as "zh-CN" | "en-US"] || "",
    },
  ],
-})
+});
 </script>

 <template>
  <div v-if="app" class="min-h-screen relative overflow-hidden bg-gradient-to-br from-gray-50 via-blue-50/30 to-purple-50/30 dark:from-gray-950 dark:via-blue-950/20 dark:to-purple-950/20">
    <!-- 科技感网格背景 -->
    <div class="fixed inset-0 opacity-30 dark:opacity-20 pointer-events-none">
-      <div class="absolute inset-0" style="background-image: linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px); background-size: 50px 50px;"></div>
+      <div class="absolute inset-0" style="background-image: linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px); background-size: 50px 50px;" />
    </div>

    <!-- 动态发光球体背景 -->
    <div class="fixed inset-0 pointer-events-none overflow-hidden">
-      <div class="absolute top-1/4 -left-48 w-96 h-96 bg-primary-500/20 rounded-full blur-3xl animate-pulse"></div>
-      <div class="absolute bottom-1/4 -right-48 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
+      <div class="absolute top-1/4 -left-48 w-96 h-96 bg-primary-500/20 rounded-full blur-3xl animate-pulse" />
+      <div class="absolute bottom-1/4 -right-48 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;" />
    </div>

    <UContainer class="relative z-10">
@@ -91,10 +91,10 @@ useHead({
        <!-- App Header -->
        <div class="flex items-start gap-6 mb-8 group">
          <div class="relative">
-            <div class="absolute -inset-2 bg-gradient-to-r from-primary-500 via-purple-500 to-blue-500 rounded-3xl opacity-50 blur-xl group-hover:opacity-100 transition-all duration-500 animate-pulse"></div>
+            <div class="absolute -inset-2 bg-gradient-to-r from-primary-500 via-purple-500 to-blue-500 rounded-3xl opacity-50 blur-xl group-hover:opacity-100 transition-all duration-500 animate-pulse" />
            <div class="size-24 rounded-3xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-4xl shrink-0 shadow-2xl shadow-blue-500/50 relative overflow-hidden group-hover:scale-110 transition-all duration-500 p-3">
-              <div class="absolute inset-0 bg-gradient-to-tr from-white/0 via-white/30 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></div>
-              <img :src="app.icon" :alt="app.name" class="size-full object-contain relative z-10 rounded-2xl" />
+              <div class="absolute inset-0 bg-gradient-to-tr from-white/0 via-white/30 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700" />
+              <img :src="app.icon" :alt="app.name" class="size-full object-contain relative z-10 rounded-2xl">
            </div>
          </div>
          <div class="flex-1">
@@ -115,7 +115,7 @@ useHead({
        <!-- Download Buttons -->
        <div class="grid md:grid-cols-3 gap-4 mb-8">
          <div v-if="app.downloads.ios" class="relative group">
-            <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500"></div>
+            <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500" />
            <UButton
              icon="i-heroicons-device-phone-mobile"
              size="xl"
@@ -123,16 +123,18 @@ useHead({
              class="relative transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/50 hover:-translate-y-2"
              @click="handleDownload('ios')"
            >
-            <div class="text-left w-full">
-              <div class="font-semibold text-base">iOS</div>
-              <div v-if="app.size?.ios" class="text-xs opacity-80">
-                {{ app.size.ios }}
+              <div class="text-left w-full">
+                <div class="font-semibold text-base">
+                  iOS
+                </div>
+                <div v-if="app.size?.ios" class="text-xs opacity-80">
+                  {{ app.size.ios }}
+                </div>
              </div>
-            </div>
            </UButton>
          </div>
          <div v-if="app.downloads.android" class="relative group">
-            <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500"></div>
+            <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500" />
            <UButton
              icon="i-heroicons-device-tablet"
              size="xl"
@@ -140,16 +142,18 @@ useHead({
              class="relative transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/50 hover:-translate-y-2"
              @click="handleDownload('android')"
            >
-            <div class="text-left w-full">
-              <div class="font-semibold text-base">Android</div>
-              <div v-if="app.size?.android" class="text-xs opacity-80">
-                {{ app.size.android }}
+              <div class="text-left w-full">
+                <div class="font-semibold text-base">
+                  Android
+                </div>
+                <div v-if="app.size?.android" class="text-xs opacity-80">
+                  {{ app.size.android }}
+                </div>
              </div>
-            </div>
            </UButton>
          </div>
          <div v-if="app.downloads.h5" class="relative group">
-            <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500"></div>
+            <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500" />
            <UButton
              icon="i-heroicons-globe-alt"
              size="xl"
@@ -158,7 +162,9 @@ useHead({
              @click="handleDownload('h5')"
            >
              <div class="text-left w-full">
-                <div class="font-semibold text-base">Web</div>
+                <div class="font-semibold text-base">
+                  Web
+                </div>
                <div class="text-xs opacity-80">
                  PWA
                </div>
@@ -170,12 +176,12 @@ useHead({
        <!-- Stats -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
          <div class="relative group">
-            <div class="absolute -inset-0.5 bg-gradient-to-r from-primary-500 to-purple-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500"></div>
+            <div class="absolute -inset-0.5 bg-gradient-to-r from-primary-500 to-purple-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500" />
            <UCard class="relative backdrop-blur-sm bg-white/90 dark:bg-gray-900/90 border border-gray-200/50 dark:border-gray-800/50 hover:shadow-xl hover:shadow-primary-500/20 transition-all duration-500 hover:-translate-y-1">
              <div class="text-center">
                <div class="text-3xl font-bold bg-gradient-to-r from-primary-500 to-purple-500 bg-clip-text text-transparent">
                  {{ app.stats.total.toLocaleString() }}
-                  </div>
+                </div>
                <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
                  {{ locale === 'zh-CN' ? '总下载' : 'Total Downloads' }}
                </div>
@@ -183,7 +189,7 @@ useHead({
            </UCard>
          </div>
          <div class="relative group">
-            <div class="absolute -inset-0.5 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500"></div>
+            <div class="absolute -inset-0.5 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500" />
            <UCard class="relative backdrop-blur-sm bg-white/90 dark:bg-gray-900/90 border border-gray-200/50 dark:border-gray-800/50 hover:shadow-xl hover:shadow-purple-500/20 transition-all duration-500 hover:-translate-y-1">
              <div class="text-center">
                <div class="text-3xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
@@ -196,7 +202,7 @@ useHead({
            </UCard>
          </div>
          <div class="relative group">
-            <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500"></div>
+            <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500" />
            <UCard class="relative backdrop-blur-sm bg-white/90 dark:bg-gray-900/90 border border-gray-200/50 dark:border-gray-800/50 hover:shadow-xl hover:shadow-blue-500/20 transition-all duration-500 hover:-translate-y-1">
              <div class="text-center">
                <div class="text-3xl font-bold bg-gradient-to-r from-blue-500 to-cyan-500 bg-clip-text text-transparent">
@@ -209,7 +215,7 @@ useHead({
            </UCard>
          </div>
          <div class="relative group">
-            <div class="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500"></div>
+            <div class="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-xl opacity-0 group-hover:opacity-100 blur transition-all duration-500" />
            <UCard class="relative backdrop-blur-sm bg-white/90 dark:bg-gray-900/90 border border-gray-200/50 dark:border-gray-800/50 hover:shadow-xl hover:shadow-indigo-500/20 transition-all duration-500 hover:-translate-y-1">
              <div class="text-center">
                <div class="text-3xl font-bold bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent">
@@ -225,7 +231,7 @@ useHead({

        <!-- Description -->
        <div class="relative group mb-8">
-          <div class="absolute -inset-0.5 bg-gradient-to-r from-primary-500 via-purple-500 to-blue-500 rounded-xl opacity-0 group-hover:opacity-30 blur transition-all duration-500"></div>
+          <div class="absolute -inset-0.5 bg-gradient-to-r from-primary-500 via-purple-500 to-blue-500 rounded-xl opacity-0 group-hover:opacity-30 blur transition-all duration-500" />
          <UCard class="relative backdrop-blur-sm bg-white/90 dark:bg-gray-900/90 border border-gray-200/50 dark:border-gray-800/50 hover:shadow-xl hover:shadow-primary-500/10 transition-all duration-500">
            <h3 class="text-xl font-semibold bg-gradient-to-r from-gray-900 via-primary-600 to-purple-600 dark:from-white dark:via-primary-400 dark:to-purple-400 bg-clip-text text-transparent mb-4">
              {{ locale === 'zh-CN' ? '应用介绍' : 'Description' }}
@@ -238,11 +244,11 @@ useHead({

        <!-- What's New -->
        <div class="relative group">
-          <div class="absolute -inset-0.5 bg-gradient-to-r from-purple-500 via-pink-500 to-rose-500 rounded-xl opacity-0 group-hover:opacity-30 blur transition-all duration-500"></div>
+          <div class="absolute -inset-0.5 bg-gradient-to-r from-purple-500 via-pink-500 to-rose-500 rounded-xl opacity-0 group-hover:opacity-30 blur transition-all duration-500" />
          <UCard class="relative backdrop-blur-sm bg-white/90 dark:bg-gray-900/90 border border-gray-200/50 dark:border-gray-800/50 hover:shadow-xl hover:shadow-purple-500/10 transition-all duration-500">
            <h3 class="text-xl font-semibold bg-gradient-to-r from-gray-900 via-purple-600 to-pink-600 dark:from-white dark:via-purple-400 dark:to-pink-400 bg-clip-text text-transparent mb-4">
              {{ locale === 'zh-CN' ? '更新内容' : "What's New" }}
-              </h3>
+            </h3>
            <ul class="space-y-3">
              <li
                v-for="(note, index) in app.releaseNotes[locale as 'zh-CN' | 'en-US']"
--- a/packages/distribute/pages/index.vue
+++ b/packages/distribute/pages/index.vue
@@ -1,104 +1,104 @@
 <script setup lang="ts">
-import type { AppInfo } from '~/types'
+import type { AppInfo } from "~/types";

-import { apps as appsData, categories as categoriesData } from '~/data/apps'
+import { apps as appsData, categories as categoriesData } from "~/data/apps";

-const { t, locale, setLocale } = useI18n()
-const colorMode = useColorMode()
+const { t, locale, setLocale } = useI18n();
+const colorMode = useColorMode();

 // 直接使用数据文件
-const apps = computed(() => appsData)
-const categories = computed(() => categoriesData)
+const apps = computed(() => appsData);
+const categories = computed(() => categoriesData);

 // 当前选中的分类
-const selectedCategory = ref('all')
+const selectedCategory = ref("all");

 // 搜索关键词
-const searchKeyword = ref('')
+const searchKeyword = ref("");

 // 过滤后的应用列表
 const filteredApps = computed(() => {
-  let result = apps.value
+  let result = apps.value;

  // 按分类过滤
-  if (selectedCategory.value !== 'all') {
-    result = result.filter(app => app.category === selectedCategory.value)
+  if (selectedCategory.value !== "all") {
+    result = result.filter(app => app.category === selectedCategory.value);
  }

  // 按搜索关键词过滤
  if (searchKeyword.value.trim()) {
-    const keyword = searchKeyword.value.toLowerCase()
+    const keyword = searchKeyword.value.toLowerCase();
    result = result.filter(app =>
      app.name.toLowerCase().includes(keyword)
-      || app.shortDescription[locale.value as 'zh-CN' | 'en-US'].toLowerCase().includes(keyword),
-    )
+      || app.shortDescription[locale.value as "zh-CN" | "en-US"].toLowerCase().includes(keyword),
+    );
  }

-  return result
-})
+  return result;
+});

 // 切换语言
 function toggleLanguage() {
-  setLocale(locale.value === 'zh-CN' ? 'en-US' : 'zh-CN')
+  setLocale(locale.value === "zh-CN" ? "en-US" : "zh-CN");
 }

 // 打开应用详情
 function openAppDetail(app: AppInfo) {
-  navigateTo(`/apps/${app.id}`)
+  navigateTo(`/apps/${app.id}`);
 }

 // 下载处理
-async function handleDownload(app: AppInfo, type: 'ios' | 'android' | 'h5', event?: MouseEvent | TouchEvent) {
-  const url = app.downloads[type]
+async function handleDownload(app: AppInfo, type: "ios" | "android" | "h5", event?: MouseEvent | TouchEvent) {
+  const url = app.downloads[type];

  if (!url) {
-    return
+    return;
  }

-  if (type === 'h5') {
-    navigateTo(url, { external: true, open: { target: '_blank' } })
+  if (type === "h5") {
+    navigateTo(url, { external: true, open: { target: "_blank" } });
  }
  else {
-    navigateTo(url, { external: true })
+    navigateTo(url, { external: true });
  }

  await $fetch(`/api/track/${type}`, {
-    method: 'POST',
+    method: "POST",
    body: { appId: app.id },
-  })
+  });
 }

-const isDark = computed(() => colorMode.value === 'dark')
+const isDark = computed(() => colorMode.value === "dark");

 // SEO
 useHead({
-  title: locale.value === 'zh-CN' ? 'Riwa 应用商店' : 'Riwa App Store',
+  title: locale.value === "zh-CN" ? "Riwa 应用商店" : "Riwa App Store",
  meta: [
    {
-      name: 'description',
-      content: locale.value === 'zh-CN'
-        ? '下载 Riwa 系列应用，包括 Riwa 主应用、Riwa 钱包和 Riwa 聊天等'
-        : 'Download Riwa apps including Riwa main app, Riwa Wallet, and Riwa Chat',
+      name: "description",
+      content: locale.value === "zh-CN"
+        ? "下载 Riwa 系列应用，包括 Riwa 主应用、Riwa 钱包和 Riwa 聊天等"
+        : "Download Riwa apps including Riwa main app, Riwa Wallet, and Riwa Chat",
    },
  ],
-})
+});
 </script>

 <template>
  <div class="min-h-screen relative overflow-hidden bg-linear-to-br from-gray-50 via-blue-50/30 to-purple-50/30 dark:from-gray-950 dark:via-blue-950/20 dark:to-purple-950/20">
    <!-- 科技感网格背景 -->
    <div class="fixed inset-0 opacity-30 dark:opacity-20 pointer-events-none">
-      <div class="absolute inset-0 animate-pulse-subtle" style="background-image: linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px); background-size: 50px 50px;"></div>
+      <div class="absolute inset-0 animate-pulse-subtle" style="background-image: linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px); background-size: 50px 50px;" />
    </div>

    <!-- 动态发光球体背景 -->
    <div class="fixed inset-0 pointer-events-none overflow-hidden">
-      <div class="absolute top-1/4 -left-48 w-96 h-96 bg-primary-500/20 rounded-full blur-3xl animate-breathe"></div>
-      <div class="absolute bottom-1/4 -right-48 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-breathe" style="animation-delay: 1s;"></div>
-      <div class="absolute top-1/2 left-1/2 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl animate-breathe" style="animation-delay: 2s;"></div>
+      <div class="absolute top-1/4 -left-48 w-96 h-96 bg-primary-500/20 rounded-full blur-3xl animate-breathe" />
+      <div class="absolute bottom-1/4 -right-48 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-breathe" style="animation-delay: 1s;" />
+      <div class="absolute top-1/2 left-1/2 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl animate-breathe" style="animation-delay: 2s;" />
      <!-- 额外的动态光球 -->
-      <div class="absolute top-1/3 right-1/4 w-64 h-64 bg-cyan-500/15 rounded-full blur-2xl animate-float" style="animation-delay: 0.5s;"></div>
-      <div class="absolute bottom-1/3 left-1/3 w-72 h-72 bg-indigo-500/15 rounded-full blur-2xl animate-float" style="animation-delay: 1.5s;"></div>
+      <div class="absolute top-1/3 right-1/4 w-64 h-64 bg-cyan-500/15 rounded-full blur-2xl animate-float" style="animation-delay: 0.5s;" />
+      <div class="absolute bottom-1/3 left-1/3 w-72 h-72 bg-indigo-500/15 rounded-full blur-2xl animate-float" style="animation-delay: 1.5s;" />
    </div>

    <!-- Header -->
@@ -107,8 +107,8 @@ useHead({
        <div class="flex items-center justify-between py-4">
          <div class="flex items-center gap-3 group">
            <div class="size-10 rounded-xl bg-linear-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-xl relative overflow-hidden shadow-lg shadow-blue-500/50">
-              <div class="absolute inset-0 bg-linear-to-tr from-white/0 via-white/20 to-white/0 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
-              <div class="absolute -inset-1 bg-blue-400/30 rounded-xl blur-md opacity-0 group-hover:opacity-100 animate-pulse-ring"></div>
+              <div class="absolute inset-0 bg-linear-to-tr from-white/0 via-white/20 to-white/0 -translate-x-full group-hover:translate-x-full transition-transform duration-700" />
+              <div class="absolute -inset-1 bg-blue-400/30 rounded-xl blur-md opacity-0 group-hover:opacity-100 animate-pulse-ring" />
              <span class="relative z-10">R</span>
            </div>
            <h1 class="text-xl font-bold bg-linear-to-r from-gray-900 via-primary-600 to-purple-600 dark:from-white dark:via-primary-400 dark:to-purple-400 bg-clip-text text-transparent animate-gradient">
@@ -180,30 +180,30 @@ useHead({
            class="cursor-pointer backdrop-blur-sm bg-white/90 dark:bg-gray-900/90 border border-gray-200/50 dark:border-gray-800/50 duration-500 hover:shadow-2xl hover:shadow-primary-500/20 hover:-translate-y-2 hover:rotate-y-2 active:scale-95 active:shadow-lg active:shadow-primary-500/40 relative overflow-hidden"
            @click="openAppDetail(app)"
          >
-           <!-- 内部发光效果 -->
-            <div class="absolute inset-0 bg-linear-to-br from-primary-500/5 to-purple-500/5"></div>
+            <!-- 内部发光效果 -->
+            <div class="absolute inset-0 bg-linear-to-br from-primary-500/5 to-purple-500/5" />

-             <div class="flex items-start gap-4 relative z-10">
+            <div class="flex items-start gap-4 relative z-10">
              <!-- App Icon -->
              <div class="size-16 rounded-2xl bg-linear-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-2xl shrink-0 shadow-lg shadow-blue-500/50 relative overflow-hidden group-hover:shadow-2xl group-hover:shadow-blue-500/60 transition-all duration-500 group-hover:scale-110 group-hover:rotate-3 group-active:scale-105 group-active:rotate-1 p-2">
                <!-- 动态发光效果 -->
-                <div class="absolute inset-0 bg-linear-to-tr from-white/0 via-white/30 to-white/0 -translate-x-full group-hover:translate-x-full group-active:translate-x-[50%] transition-transform duration-700"></div>
-                <img :src="app.icon" :alt="app.name" class="size-full object-contain relative z-10 rounded-lg transition-all duration-300 group-active:scale-95 group-hover:-rotate-3" />
+                <div class="absolute inset-0 bg-linear-to-tr from-white/0 via-white/30 to-white/0 -translate-x-full group-hover:translate-x-full group-active:translate-x-[50%] transition-transform duration-700" />
+                <img :src="app.icon" :alt="app.name" class="size-full object-contain relative z-10 rounded-lg transition-all duration-300 group-active:scale-95 group-hover:-rotate-3">
              </div>

              <!-- App Info -->
              <div class="flex-1 min-w-0">
                <h3 class="font-bold text-lg text-gray-900 dark:text-white truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors duration-300">
-                {{ app.name }}
-              </h3>
-              <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mt-1 transition-colors duration-300 group-hover:text-gray-700 dark:group-hover:text-gray-300">
-                {{ app.shortDescription[locale as 'zh-CN' | 'en-US'] }}
-              </p>
-              <div class="flex items-center gap-3 mt-3 text-xs text-gray-500 dark:text-gray-500 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors duration-300">
-                <span class="animate-pulse-subtle">v{{ app.version }}</span>
-                <span>•</span>
-                <span class="font-medium">{{ app.stats.total.toLocaleString() }} {{ locale === 'zh-CN' ? '次下载' : 'downloads' }}</span>
-              </div>
+                  {{ app.name }}
+                </h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mt-1 transition-colors duration-300 group-hover:text-gray-700 dark:group-hover:text-gray-300">
+                  {{ app.shortDescription[locale as 'zh-CN' | 'en-US'] }}
+                </p>
+                <div class="flex items-center gap-3 mt-3 text-xs text-gray-500 dark:text-gray-500 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors duration-300">
+                  <span class="animate-pulse-subtle">v{{ app.version }}</span>
+                  <span>•</span>
+                  <span class="font-medium">{{ app.stats.total.toLocaleString() }} {{ locale === 'zh-CN' ? '次下载' : 'downloads' }}</span>
+                </div>
              </div>
            </div>

@@ -217,8 +217,7 @@ useHead({
                block
                class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1 active:scale-95 active:shadow-xl active:shadow-blue-500/60 relative overflow-hidden group/btn"
                @click.stop="(e) => handleDownload(app, 'ios', e)"
-              >
-              </UButton>
+              />
              <UButton
                v-if="app.downloads.android"
                icon="i-heroicons-device-tablet"
@@ -227,8 +226,7 @@ useHead({
                block
                class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1 active:scale-95 active:shadow-xl active:shadow-blue-500/60 relative overflow-hidden group/btn"
                @click.stop="(e) => handleDownload(app, 'android', e)"
-              >
-              </UButton>
+              />
              <UButton
                v-if="app.downloads.h5"
                icon="i-heroicons-globe-alt"
@@ -237,8 +235,7 @@ useHead({
                block
                class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1 active:scale-95 active:shadow-xl active:shadow-blue-500/60 relative overflow-hidden group/btn"
                @click.stop="(e) => handleDownload(app, 'h5', e)"
-              >
-              </UButton>
+              />
            </div>
          </UCard>
        </div>
--- a/packages/distribute/server/api/apps.get.ts
+++ b/packages/distribute/server/api/apps.get.ts
@@ -1,8 +1,8 @@
-import { getAllApps, categories } from '~/data/apps'
+import { categories, getAllApps } from "~/data/apps";

 export default defineEventHandler(() => {
  return {
    apps: getAllApps(),
    categories,
-  }
-})
+  };
+});
--- a/packages/distribute/server/api/apps/[id].get.ts
+++ b/packages/distribute/server/api/apps/[id].get.ts
@@ -1,23 +1,23 @@
-import { getAppById } from '~/data/apps'
+import { getAppById } from "~/data/apps";

 export default defineEventHandler((event) => {
-  const id = getRouterParam(event, 'id')
+  const id = getRouterParam(event, "id");

  if (!id) {
    throw createError({
      statusCode: 400,
-      message: 'App ID is required',
-    })
+      message: "App ID is required",
+    });
  }

-  const app = getAppById(id)
+  const app = getAppById(id);

  if (!app) {
    throw createError({
      statusCode: 404,
-      message: 'App not found',
-    })
+      message: "App not found",
+    });
  }

-  return app
-})
+  return app;
+});
--- a/packages/distribute/server/api/stats.get.ts
+++ b/packages/distribute/server/api/stats.get.ts
@@ -1,3 +1,3 @@
 export default defineEventHandler(async () => {
-  return await fetchDownloadStats()
-})
+  return await fetchDownloadStats();
+});
--- a/packages/distribute/server/api/track/[platform].post.ts
+++ b/packages/distribute/server/api/track/[platform].post.ts
@@ -1,16 +1,16 @@
 export default defineEventHandler(async (event) => {
-  const platform = getRouterParam(event, 'platform') as 'ios' | 'android' | 'h5'
-  const body = await readBody(event)
-  const appId = body?.appId
+  const platform = getRouterParam(event, "platform") as "ios" | "android" | "h5";
+  const body = await readBody(event);
+  const appId = body?.appId;

-  if (!['ios', 'android', 'h5'].includes(platform)) {
+  if (!["ios", "android", "h5"].includes(platform)) {
    throw createError({
      statusCode: 400,
-      message: 'Invalid platform',
-    })
+      message: "Invalid platform",
+    });
  }

-  await trackDownload(platform)
+  await trackDownload(platform);

-  return { success: true, appId, platform }
-})
+  return { success: true, appId, platform };
+});
--- a/packages/distribute/server/api/version.get.ts
+++ b/packages/distribute/server/api/version.get.ts
@@ -1,5 +1,5 @@
-import { currentVersion } from '~/data/versions'
+import { currentVersion } from "~/data/versions";

 export default defineEventHandler(() => {
-  return currentVersion
-})
+  return currentVersion;
+});
--- a/packages/distribute/server/utils/stats.ts
+++ b/packages/distribute/server/utils/stats.ts
@@ -1,16 +1,16 @@
-import type { DownloadStats } from '~/types'
-import { mockDownloadStats } from '~/data/versions'
+import type { DownloadStats } from "~/types";
+import { mockDownloadStats } from "~/data/versions";

 // 获取下载统计（可替换为真实 API）
 export async function fetchDownloadStats(): Promise<DownloadStats> {
  // 模拟 API 延迟
-  await new Promise(resolve => setTimeout(resolve, 500))
-  return mockDownloadStats
+  await new Promise(resolve => setTimeout(resolve, 500));
+  return mockDownloadStats;
 }

 // 记录下载事件（可替换为真实 API）
-export async function trackDownload(platform: 'ios' | 'android' | 'h5'): Promise<void> {
+export async function trackDownload(platform: "ios" | "android" | "h5"): Promise<void> {
  // 模拟 API 延迟
-  await new Promise(resolve => setTimeout(resolve, 200))
-  console.log(`Download tracked: ${platform}`)
+  await new Promise(resolve => setTimeout(resolve, 200));
+  console.log(`Download tracked: ${platform}`);
 }
--- a/packages/distribute/types/index.ts
+++ b/packages/distribute/types/index.ts
@@ -1,65 +1,65 @@
 export interface AppInfo {
-  id: string
-  name: string
-  icon: string
+  id: string;
+  name: string;
+  icon: string;
  shortDescription: {
-    'zh-CN': string
-    'en-US': string
-  }
+    "zh-CN": string;
+    "en-US": string;
+  };
  description: {
-    'zh-CN': string
-    'en-US': string
-  }
-  category: string
-  version: string
-  buildNumber: string
-  releaseDate: string
+    "zh-CN": string;
+    "en-US": string;
+  };
+  category: string;
+  version: string;
+  buildNumber: string;
+  releaseDate: string;
  releaseNotes: {
-    'zh-CN': string[]
-    'en-US': string[]
-  }
+    "zh-CN": string[];
+    "en-US": string[];
+  };
  downloads: {
-    ios?: string
-    android?: string
-    h5?: string
-  }
-  screenshots?: string[]
+    ios?: string;
+    android?: string;
+    h5?: string;
+  };
+  screenshots?: string[];
  size?: {
-    ios?: string
-    android?: string
-  }
-  stats: DownloadStats
+    ios?: string;
+    android?: string;
+  };
+  stats: DownloadStats;
 }

 export interface AppVersion {
-  version: string
-  buildNumber: string
-  releaseDate: string
+  version: string;
+  buildNumber: string;
+  releaseDate: string;
  releaseNotes: {
-    'zh-CN': string[]
-    'en-US': string[]
-  }
+    "zh-CN": string[];
+    "en-US": string[];
+  };
  downloads: {
-    ios: string
-    android: string
-    h5: string
-  }
+    ios: string;
+    android: string;
+    h5: string;
+  };
 }

 export interface DownloadStats {
-  total: number
-  today: number
-  ios: number
-  android: number
+  total: number;
+  today: number;
+  ios: number;
+  android: number;
 }

-export type Platform = 'ios' | 'android' | 'desktop' | 'unknown'
+export type Platform = "ios" | "android" | "desktop" | "unknown";

 export interface AppCategory {
-  id: string
+  id: string;
  name: {
-    'zh-CN': string
-    'en-US': string
-  }
-  icon?: string
+    "zh-CN": string;
+    "en-US": string;
+  };
+  icon?: string;
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,9 +62,9 @@ importers:
      '@tailwindcss/vite':
        specifier: ^4.1.18
        version: 4.1.18(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
-      '@vee-validate/yup':
+      '@vee-validate/zod':
        specifier: ^4.15.1
-        version: 4.15.1(vue@3.5.25(typescript@5.9.3))(yup@1.7.1)
+        version: 4.15.1(vue@3.5.25(typescript@5.9.3))(zod@3.25.76)
      '@vueuse/core':
        specifier: ^14.1.0
        version: 14.1.0(vue@3.5.25(typescript@5.9.3))
@@ -119,9 +119,9 @@ importers:
      vue-router:
        specifier: ^4.6.3
        version: 4.6.3(vue@3.5.25(typescript@5.9.3))
-      yup:
-        specifier: ^1.7.1
-        version: 1.7.1
+      zod:
+        specifier: ^3.24.1
+        version: 3.25.76
    devDependencies:
      '@antfu/eslint-config':
        specifier: ^6.6.1
@@ -3692,10 +3692,10 @@ packages:
    cpu: [x64]
    os: [win32]

-  '@vee-validate/yup@4.15.1':
-    resolution: {integrity: sha512-+u6lI1IZftjHphj+mTCPJRruwBBwv1IKKCI1EFm6ipQroAPibkS5M8UNX+yeVYG5++ix6m1rsv4/SJvJJQTWJg==}
+  '@vee-validate/zod@4.15.1':
+    resolution: {integrity: sha512-329Z4TDBE5Vx0FdbA8S4eR9iGCFFUNGbxjpQ20ff5b5wGueScjocUIx9JHPa79LTG06RnlUR4XogQsjN4tecKA==}
    peerDependencies:
-      yup: ^1.3.2
+      zod: ^3.24.0

  '@vercel/nft@0.30.4':
    resolution: {integrity: sha512-wE6eAGSXScra60N2l6jWvNtVK0m+sh873CpfZW4KI2v8EHuUQp+mSEi4T+IcdPCSEDgCdAS/7bizbhQlkjzrSA==}
@@ -9264,6 +9264,9 @@ packages:
  zod@3.22.3:
    resolution: {integrity: sha512-EjIevzuJRiRPbVH4mGc8nApb/lVLKVpmUhAaR5R5doKGfAnGJ6Gr3CViAVjP+4FWSxCsybeWQdcgCtbX+7oZug==}

+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
  zod@4.1.13:
    resolution: {integrity: sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==}

@@ -10036,7 +10039,7 @@ snapshots:
      '@babel/helper-string-parser': 7.27.1
      '@babel/helper-validator-identifier': 7.28.5

-  '@better-auth/core@1.4.6(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.1.5(zod@4.1.13))(jose@6.1.3)(kysely@0.28.8)(nanostores@1.1.0)':
+  '@better-auth/core@1.4.6(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.1.5(zod@3.25.76))(jose@6.1.3)(kysely@0.28.8)(nanostores@1.1.0)':
    dependencies:
      '@better-auth/utils': 0.3.0
      '@better-fetch/fetch': 1.1.18
@@ -10047,9 +10050,9 @@ snapshots:
      nanostores: 1.1.0
      zod: 4.1.13

-  '@better-auth/telemetry@1.4.6(@better-auth/core@1.4.6(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.1.5(zod@4.1.13))(jose@6.1.3)(kysely@0.28.8)(nanostores@1.1.0))':
+  '@better-auth/telemetry@1.4.6(@better-auth/core@1.4.6(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.1.5(zod@3.25.76))(jose@6.1.3)(kysely@0.28.8)(nanostores@1.1.0))':
    dependencies:
-      '@better-auth/core': 1.4.6(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.1.5(zod@4.1.13))(jose@6.1.3)(kysely@0.28.8)(nanostores@1.1.0)
+      '@better-auth/core': 1.4.6(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.1.5(zod@3.25.76))(jose@6.1.3)(kysely@0.28.8)(nanostores@1.1.0)
      '@better-auth/utils': 0.3.0
      '@better-fetch/fetch': 1.1.18

@@ -12957,11 +12960,11 @@ snapshots:
  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
    optional: true

-  '@vee-validate/yup@4.15.1(vue@3.5.25(typescript@5.9.3))(yup@1.7.1)':
+  '@vee-validate/zod@4.15.1(vue@3.5.25(typescript@5.9.3))(zod@3.25.76)':
    dependencies:
      type-fest: 4.41.0
      vee-validate: 4.15.1(vue@3.5.25(typescript@5.9.3))
-      yup: 1.7.1
+      zod: 3.25.76
    transitivePeerDependencies:
      - vue

@@ -13584,8 +13587,8 @@ snapshots:

  better-auth@1.4.6(vue@3.5.25(typescript@5.9.3)):
    dependencies:
-      '@better-auth/core': 1.4.6(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.1.5(zod@4.1.13))(jose@6.1.3)(kysely@0.28.8)(nanostores@1.1.0)
-      '@better-auth/telemetry': 1.4.6(@better-auth/core@1.4.6(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.1.5(zod@4.1.13))(jose@6.1.3)(kysely@0.28.8)(nanostores@1.1.0))
+      '@better-auth/core': 1.4.6(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.1.5(zod@3.25.76))(jose@6.1.3)(kysely@0.28.8)(nanostores@1.1.0)
+      '@better-auth/telemetry': 1.4.6(@better-auth/core@1.4.6(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.1.5(zod@3.25.76))(jose@6.1.3)(kysely@0.28.8)(nanostores@1.1.0))
      '@better-auth/utils': 0.3.0
      '@better-fetch/fetch': 1.1.18
      '@noble/ciphers': 2.1.1
@@ -17476,7 +17479,8 @@ snapshots:
      kleur: 3.0.3
      sisteransi: 1.0.5

-  property-expr@2.0.6: {}
+  property-expr@2.0.6:
+    optional: true

  prosemirror-changeset@2.3.1:
    dependencies:
@@ -18408,7 +18412,8 @@ snapshots:

  through@2.3.8: {}

-  tiny-case@1.0.3: {}
+  tiny-case@1.0.3:
+    optional: true

  tiny-inflate@1.0.3: {}

@@ -18464,7 +18469,8 @@ snapshots:
    dependencies:
      eslint-visitor-keys: 3.4.3

-  toposort@2.0.2: {}
+  toposort@2.0.2:
+    optional: true

  tosource@2.0.0-alpha.3: {}

@@ -18523,7 +18529,8 @@ snapshots:

  type-fest@0.8.1: {}

-  type-fest@2.19.0: {}
+  type-fest@2.19.0:
+    optional: true

  type-fest@4.41.0: {}

@@ -19493,6 +19500,7 @@ snapshots:
      tiny-case: 1.0.3
      toposort: 2.0.2
      type-fest: 2.19.0
+    optional: true

  zip-stream@6.0.1:
    dependencies:
@@ -19502,6 +19510,8 @@ snapshots:

  zod@3.22.3: {}

+  zod@3.25.76: {}
+
  zod@4.1.13: {}

  zwitch@2.0.4: {}
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,2 +1,6 @@
+catalogMode: prefer
+shellEmulator: true
+trustPolicy: no-downgrade
+
 packages:
  - "packages/*"
--- a/src/auth/index.ts
+++ b/src/auth/index.ts
@@ -1,8 +1,8 @@
 import type { PhoneCountry } from "./type";
-import { toTypedSchema } from "@vee-validate/yup";
+import { toTypedSchema } from "@vee-validate/zod";
 import { emailOTPClient, phoneNumberClient, usernameClient } from "better-auth/client/plugins";
 import { createAuthClient } from "better-auth/vue";
-import * as yup from "yup";
+import { z } from "zod";
 import CircleFlagsCnHk from "~icons/circle-flags/cn-hk";
 import CircleFlagsEnUs from "~icons/circle-flags/en-us";
 import CircleFlagsTw from "~icons/circle-flags/tw";
@@ -23,15 +23,15 @@ export const authClient = createAuthClient({
  plugins: [emailOTPClient(), phoneNumberClient(), usernameClient()],
 });

-export const emailSchema = toTypedSchema(yup.object({
-  email: yup
-    .string()
-    .required(i18n.global.t("auth.login.validation.emailRequired"))
+export const emailSchema = toTypedSchema(z.object({
+  email: z
+    .string({ message: i18n.global.t("auth.login.validation.emailRequired") })
+    .min(1, i18n.global.t("auth.login.validation.emailRequired"))
    .email(i18n.global.t("auth.login.validation.emailInvalid")),
-  otp: yup
-    .string()
-    .required(i18n.global.t("auth.login.validation.otpRequired"))
-    .matches(/^\d{6}$/, i18n.global.t("auth.login.validation.otpInvalid")),
+  otp: z
+    .string({ message: i18n.global.t("auth.login.validation.otpRequired") })
+    .min(1, i18n.global.t("auth.login.validation.otpRequired"))
+    .regex(/^\d{6}$/, i18n.global.t("auth.login.validation.otpInvalid")),
 }));

 export const countries: PhoneCountry[] = [
--- a/src/theme/common.css
+++ b/src/theme/common.css
@@ -1,5 +1,5 @@
 .unselectable {
-   user-select: none;
-   --moz-user-select: none;
-   -webkit-user-select: none;
+  user-select: none;
+  --moz-user-select: none;
+  -webkit-user-select: none;
 }
--- a/src/views/auth/login/components/email.vue
+++ b/src/views/auth/login/components/email.vue
@@ -3,7 +3,7 @@ import type { GenericObject } from "vee-validate";
 import type { EmailVerifyClient } from "@/api/types";
 import { toastController } from "@ionic/vue";
 import { Field, Form } from "vee-validate";
-import * as yup from "yup";
+import { z } from "zod";
 import { authClient, emailSchema } from "@/auth";

 const emit = defineEmits<{
@@ -19,7 +19,7 @@ const canResend = computed(() => countdown.value === 0 && !isSending.value);
 const email = ref("");
 const emailError = ref("");

-let timer: number | null = null;
+let timer: NodeJS.Timeout | null = null;

 function startCountdown() {
  countdown.value = 60;
@@ -42,7 +42,7 @@ async function sendOtp() {
  }

  try {
-    await yup.string().email().validate(emailValue);
+    await z.string().email().parseAsync(emailValue);
  }
  catch {
    emailError.value = t("auth.login.validation.emailInvalid");
--- a/src/views/auth/login/components/phone-number.vue
+++ b/src/views/auth/login/components/phone-number.vue
@@ -3,10 +3,10 @@ import type { GenericObject } from "vee-validate";
 import type { PhoneNumberVerifyClient } from "@/api/types";
 import type { PhoneCountry } from "@/auth/type";
 import { toastController } from "@ionic/vue";
-import { toTypedSchema } from "@vee-validate/yup";
+import { toTypedSchema } from "@vee-validate/zod";
 import { chevronDown } from "ionicons/icons";
 import { Field, Form } from "vee-validate";
-import * as yup from "yup";
+import { z } from "zod";
 import { authClient, countries } from "@/auth";
 import Country from "./country.vue";

@@ -42,19 +42,18 @@ function validatePhoneNumber(phone: string): boolean {
  return currentCountry.value.pattern.test(phone);
 }

-const schema = computed(() => toTypedSchema(yup.object({
-  phoneNumber: yup
-    .string()
-    .required(t("auth.login.validation.phoneNumberRequired"))
-    .test(
-      "phone-format",
+const schema = computed(() => toTypedSchema(z.object({
+  phoneNumber: z
+    .string({ message: t("auth.login.validation.phoneNumberRequired") })
+    .min(1, t("auth.login.validation.phoneNumberRequired"))
+    .refine(
+      value => validatePhoneNumber(value),
      t("auth.login.validation.phoneNumberInvalid"),
-      value => !value || validatePhoneNumber(value),
    ),
-  code: yup
-    .string()
-    .required(t("auth.login.validation.codeRequired"))
-    .matches(/^\d{6}$/, t("auth.login.validation.codeInvalid")),
+  code: z
+    .string({ message: t("auth.login.validation.codeRequired") })
+    .min(1, t("auth.login.validation.codeRequired"))
+    .regex(/^\d{6}$/, t("auth.login.validation.codeInvalid")),
 })));

 function startCountdown() {
--- a/src/views/issue/issuing-apply/base.vue
+++ b/src/views/issue/issuing-apply/base.vue
@@ -1,10 +1,10 @@
 <script lang='ts' setup>
 import type { GenericObject } from "vee-validate";
 import type { RwaIssuanceCategoriesData, RwaIssuanceProductBody } from "@/api/types";
-import { toTypedSchema } from "@vee-validate/yup";
+import { toTypedSchema } from "@vee-validate/zod";
 import { ErrorMessage, Field, Form } from "vee-validate";
 import { useI18n } from "vue-i18n";
-import * as yup from "yup";
+import { z } from "zod";

 const props = defineProps<{
  initialData: RwaIssuanceProductBody["product"];
@@ -16,10 +16,10 @@ const emit = defineEmits<{
 const { t } = useI18n();

 const schema = toTypedSchema(
-  yup.object({
-    name: yup.string().required(t("asset.issue.apply.validation.nameRequired")),
-    code: yup.string().required(t("asset.issue.apply.validation.codeRequired")),
-    categoryId: yup.string().required(t("asset.issue.apply.validation.categoryRequired")),
+  z.object({
+    name: z.string({ message: t("asset.issue.apply.validation.nameRequired") }).min(1, t("asset.issue.apply.validation.nameRequired")),
+    code: z.string({ message: t("asset.issue.apply.validation.codeRequired") }).min(1, t("asset.issue.apply.validation.codeRequired")),
+    categoryId: z.string({ message: t("asset.issue.apply.validation.categoryRequired") }).min(1, t("asset.issue.apply.validation.categoryRequired")),
  }),
 );

--- a/src/views/issue/issuing-apply/issue-period.vue
+++ b/src/views/issue/issuing-apply/issue-period.vue
@@ -1,11 +1,11 @@
 <script lang='ts' setup>
 import type { GenericObject } from "vee-validate";
 import type { RwaIssuanceProductBody } from "@/api/types";
-import { toTypedSchema } from "@vee-validate/yup";
+import { toTypedSchema } from "@vee-validate/zod";
 import { addOutline, removeOutline } from "ionicons/icons";
 import { ErrorMessage, Field, FieldArray, Form } from "vee-validate";
 import { useI18n } from "vue-i18n";
-import * as yup from "yup";
+import { z } from "zod";

 const props = defineProps<{
  initialData: RwaIssuanceProductBody["editions"];
@@ -35,45 +35,40 @@ const launchDate = ref(new Date().toISOString());
 const subscriptionStartDate = ref(new Date().toISOString());
 const subscriptionEndDate = ref(new Date().toISOString());

-const schema = toTypedSchema(yup.object({
-  editions: yup.array().of(
-    yup.object({
-      editionName: yup.string().required(t("asset.issue.apply.validation.editionNameRequired")),
-      launchDate: yup.string()
-        .required(t("asset.issue.apply.validation.launchDateRequired"))
-        .test("not-past", t("asset.issue.apply.validation.launchDateNotPast"), (value) => {
-          if (!value)
-            return true;
-          return new Date(value) >= new Date(now.value.toDateString());
-        })
-        .test("before-subscription", t("asset.issue.apply.validation.launchBeforeSubscription"), (value) => {
-          if (!value || !subscriptionStartDate.value)
-            return true;
-          return new Date(value) < new Date(subscriptionStartDate.value);
-        }),
-      subscriptionStartDate: yup.string()
-        .required(t("asset.issue.apply.validation.subscriptionStartDateRequired"))
-        .test("not-past", t("asset.issue.apply.validation.subscriptionStartDateNotPast"), (value) => {
-          if (!value)
-            return true;
-          return new Date(value) >= new Date(now.value.toDateString());
-        })
-        .test("after-launch", t("asset.issue.apply.validation.subscriptionAfterLaunch"), (value) => {
-          if (!value || !launchDate.value)
-            return true;
-          return new Date(value) > new Date(launchDate.value);
-        }),
-      subscriptionEndDate: yup.string()
-        .required(t("asset.issue.apply.validation.subscriptionEndDateRequired"))
-        .test("after-start", t("asset.issue.apply.validation.subscriptionEndAfterStart"), (value) => {
-          if (!value || !subscriptionStartDate.value)
-            return true;
-          return new Date(value) > new Date(subscriptionStartDate.value);
-        }),
-      perUserLimit: yup.string().required(t("asset.issue.apply.validation.perUserLimitRequired")),
-      totalSupply: yup.string().required(t("asset.issue.apply.validation.totalSupplyRequired")),
-      unitPrice: yup.string().required(t("asset.issue.apply.validation.unitPriceRequired")),
-      dividendRate: yup.string().required(t("asset.issue.apply.validation.dividendRateRequired")),
+const schema = toTypedSchema(z.object({
+  editions: z.array(
+    z.object({
+      editionName: z.string({ message: t("asset.issue.apply.validation.editionNameRequired") }).min(1, t("asset.issue.apply.validation.editionNameRequired")),
+      launchDate: z.string({ message: t("asset.issue.apply.validation.launchDateRequired") })
+        .min(1, t("asset.issue.apply.validation.launchDateRequired"))
+        .refine(
+          value => new Date(value) >= new Date(now.value.toDateString()),
+          t("asset.issue.apply.validation.launchDateNotPast"),
+        )
+        .refine(
+          value => !subscriptionStartDate.value || new Date(value) < new Date(subscriptionStartDate.value),
+          t("asset.issue.apply.validation.launchBeforeSubscription"),
+        ),
+      subscriptionStartDate: z.string({ message: t("asset.issue.apply.validation.subscriptionStartDateRequired") })
+        .min(1, t("asset.issue.apply.validation.subscriptionStartDateRequired"))
+        .refine(
+          value => new Date(value) >= new Date(now.value.toDateString()),
+          t("asset.issue.apply.validation.subscriptionStartDateNotPast"),
+        )
+        .refine(
+          value => !launchDate.value || new Date(value) > new Date(launchDate.value),
+          t("asset.issue.apply.validation.subscriptionAfterLaunch"),
+        ),
+      subscriptionEndDate: z.string({ message: t("asset.issue.apply.validation.subscriptionEndDateRequired") })
+        .min(1, t("asset.issue.apply.validation.subscriptionEndDateRequired"))
+        .refine(
+          value => !subscriptionStartDate.value || new Date(value) > new Date(subscriptionStartDate.value),
+          t("asset.issue.apply.validation.subscriptionEndAfterStart"),
+        ),
+      perUserLimit: z.string({ message: t("asset.issue.apply.validation.perUserLimitRequired") }).min(1, t("asset.issue.apply.validation.perUserLimitRequired")),
+      totalSupply: z.string({ message: t("asset.issue.apply.validation.totalSupplyRequired") }).min(1, t("asset.issue.apply.validation.totalSupplyRequired")),
+      unitPrice: z.string({ message: t("asset.issue.apply.validation.unitPriceRequired") }).min(1, t("asset.issue.apply.validation.unitPriceRequired")),
+      dividendRate: z.string({ message: t("asset.issue.apply.validation.dividendRateRequired") }).min(1, t("asset.issue.apply.validation.dividendRateRequired")),
    }),
  ),
 }));
--- a/src/views/trade-settings/bank-management/add.vue
+++ b/src/views/trade-settings/bank-management/add.vue
@@ -1,10 +1,10 @@
 <script lang='ts' setup>
 import type { GenericObject } from "vee-validate";
 import { SelectChangeEventDetail, toastController } from "@ionic/vue";
-import { toTypedSchema } from "@vee-validate/yup";
+import { toTypedSchema } from "@vee-validate/zod";
 import { informationCircle, shieldCheckmark } from "ionicons/icons";
 import { ErrorMessage, Field, Form } from "vee-validate";
-import * as yup from "yup";
+import { z } from "zod";
 import { client, safeClient } from "@/api";

 const { t } = useI18n();
@@ -17,12 +17,12 @@ const formInst = useTemplateRef<FormInstance>("formInst");

 // 表单验证 Schema
 const schema = toTypedSchema(
-  yup.object({
-    bankName: yup.string().required(t("bankCard.form.validation.bankRequired")),
-    accountNumber: yup
-      .string()
-      .required(t("bankCard.form.validation.accountNumberRequired")),
-    accountName: yup.string().required(t("bankCard.form.validation.accountNameRequired")),
+  z.object({
+    bankName: z.string({ message: t("bankCard.form.validation.bankRequired") }).min(1, t("bankCard.form.validation.bankRequired")),
+    accountNumber: z
+      .string({ message: t("bankCard.form.validation.accountNumberRequired") })
+      .min(1, t("bankCard.form.validation.accountNumberRequired")),
+    accountName: z.string({ message: t("bankCard.form.validation.accountNameRequired") }).min(1, t("bankCard.form.validation.accountNameRequired")),
  }),
 );

--- a/src/views/trade/components/confirm-order.vue
+++ b/src/views/trade/components/confirm-order.vue
@@ -1,9 +1,130 @@
 <script lang='ts' setup>
+import type { SpotOrderBody } from "@/api/types";
+import { modalController, toastController } from "@ionic/vue";
+import { closeOutline } from "ionicons/icons";
+import { client, safeClient } from "@/api";
+import { tradeWayConfig } from "../config";

+const props = defineProps<{
+  form: SpotOrderBody & { amount: string };
+}>();
+const currentTradeWay = computed(() => {
+  return tradeWayConfig.find(item => item.value === props.form.orderType);
+});
+
+function onClose() {
+  modalController.dismiss();
+}
+async function onConfirm() {
+  await safeClient(client.api.spot_order.create.post({
+    orderType: props.form.orderType,
+    quantity: props.form.quantity,
+    side: props.form.side,
+    symbol: props.form.symbol,
+    memo: props.form.memo,
+    price: props.form.price,
+  }));
+  const toast = await toastController.create({
+    message: "订单提交成功",
+    duration: 2000,
+    position: "top",
+    color: "success",
+  });
+  await toast.present();
+  modalController.dismiss();
+}
 </script>

 <template>
-  Hello world
+  <div class="ion-padding h-80">
+    <div class="flex justify-between items-center mb-5">
+      <div class="font-semibold">
+        下单确认
+      </div>
+      <ion-icon :icon="closeOutline" class="text-2xl" @click="onClose" />
+    </div>
+    <div>
+      <div class="flex items-center gap-2 mb-2">
+        <div class="text-sm">
+          {{ form.symbol }}
+        </div>
+        <ui-tag size="mini" :type="form.side === 'buy' ? 'success' : 'danger'">
+          {{ form.side === 'buy' ? '买入' : '卖出' }}
+        </ui-tag>
+      </div>
+      <template v-if="form.orderType === 'limit'">
+        <div class="cell">
+          <div class="label">
+            委托价格
+          </div>
+          <div class="value">
+            {{ form.price }} USDT
+          </div>
+        </div>
+        <div class="cell">
+          <div class="label">
+            数量
+          </div>
+          <div class="value">
+            {{ form.quantity }}
+          </div>
+        </div>
+        <div class="cell">
+          <div class="label">
+            金额
+          </div>
+          <div class="value">
+            {{ form.amount }} USDT
+          </div>
+        </div>
+        <div class="cell">
+          <div class="label">
+            类型
+          </div>
+          <div class="value">
+            {{ currentTradeWay?.name }}
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="form.orderType === 'market'">
+        <div class="cell">
+          <div class="label">
+            委托价格
+          </div>
+          <div class="value">
+            {{ form.price }} USDT
+          </div>
+        </div>
+        <div class="cell">
+          <div class="label">
+            数量
+          </div>
+          <div class="value">
+            {{ form.quantity }}
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <div class="mt-6">
+      <ion-button expand="block" color="success" @click="onConfirm">
+        确认下单
+      </ion-button>
+    </div>
+  </div>
 </template>

-<style lang='css' scoped></style>
+<style lang='css' scoped>
+@reference "tailwindcss";
+
+.cell {
+  @apply flex justify-between items-center py-1;
+}
+.label {
+  @apply text-sm text-(--ion-text-color-step-400);
+}
+.value {
+  @apply text-sm font-semibold;
+}
+</style>
--- a/src/views/trade/components/trade-way.vue
+++ b/src/views/trade/components/trade-way.vue
@@ -7,6 +7,9 @@ import { caretDownOutline } from "ionicons/icons";
 import { tradeWayConfig } from "../config";

 const model = defineModel({ type: Object as PropType<SpotOrderBody>, required: true });
+const currentTradeWay = computed(() => {
+  return tradeWayConfig.find(item => item.value === model.value.orderType);
+});

 function onSelectTradeWay(item: TradeWayConfig) {
  model.value.orderType = item.value;
@@ -17,7 +20,7 @@ function onSelectTradeWay(item: TradeWayConfig) {
 <template>
  <div id="open-modal" class="bg-faint flex items-center justify-between px-4 py-2 rounded-md">
    <div class="text-xs font-medium text-text-300">
-      市场
+      {{ currentTradeWay?.name }}
    </div>
    <ion-icon :icon="caretDownOutline" />
  </div>
--- a/src/views/trade/config.ts
+++ b/src/views/trade/config.ts
@@ -1,4 +1,4 @@
-import * as yup from "yup";
+import { z } from "zod";

 export enum TradeWayValueEnum {
  LIMIT = "limit",
@@ -21,28 +21,35 @@ export const tradeWayConfig: TradeWayConfig[] = [
    description: "以指定价格买入或卖出",
    icon: "hugeicons:trade-up",
  },
+  {
+    name: "市价委托",
+    value: "market",
+    description: "以市场价格买入或卖出",
+    icon: "hugeicons:trade-down",
+  },
 ];

-export const confirmOrderSchema = yup.object({
-  price: yup.number().when("way", {
-    is: TradeWayValueEnum.LIMIT !== undefined,
-    then: yup
-      .number()
-      .typeError("请输入有效的价格")
-      .required("价格为必填项")
-      .moreThan(0, "价格必须大于0"),
-    otherwise: yup.number().notRequired(),
-  }),
-  amount: yup
-    .number()
-    .typeError("请输入有效的数量")
-    .required("数量为必填项")
-    .moreThan(0, "数量必须大于0"),
-  way: yup
-    .mixed<TradeWayValue>()
-    .oneOf(
-      Object.values(TradeWayValueEnum),
-      "请选择有效的交易方式",
-    )
-    .required("交易方式为必填项"),
-});
+export const confirmOrderSchema = z.object({
+  quantity: z.coerce.number({ message: "请输入有效的数量" }).gt(0, "数量必须大于0"),
+  price: z.coerce.number({ message: "请输入有效的价格" }).gt(0, "价格必须大于0").optional().or(z.coerce.number().optional()),
+  orderType: z.enum([TradeWayValueEnum.LIMIT, TradeWayValueEnum.MARKET], {
+    message: "请选择有效的交易方式",
+  }) as z.ZodType<TradeWayValue>,
+}).refine(
+  (data) => {
+    if (data.orderType === TradeWayValueEnum.LIMIT) {
+      return data.price !== undefined && data.price > 0;
+    }
+    return true;
+  },
+  {
+    message: "价格为必填项",
+    path: ["price"],
+  },
+);
+
+export const confirmOrderSubmitSchema = confirmOrderSchema.transform(data => ({
+  ...data,
+  quantity: data.quantity.toString(),
+  price: data.price?.toString() ?? "",
+}));
--- a/src/views/trade/index.vue
+++ b/src/views/trade/index.vue
@@ -2,6 +2,7 @@
 import type { ChartingLibraryWidgetOptions } from "#/charting_library";
 import type { SpotOrderBody } from "@/api/types";
 import type { TradingViewInst } from "@/tradingview/index";
+import type { ModalInstance } from "@/utils";
 import { modalController } from "@ionic/vue";
 import { useRouteQuery } from "@vueuse/router";
 import { caretDownOutline, ellipsisHorizontal } from "ionicons/icons";
@@ -9,28 +10,32 @@ import MaterialSymbolsCandlestickChartOutline from "~icons/material-symbols/cand
 import { client, safeClient } from "@/api";
 import { TradeTypeEnum } from "@/api/enum";
 import { TradingViewChart } from "@/tradingview/index";
+import ConfirmOrder from "./components/confirm-order.vue";
 import OrdersPanel from "./components/orders-panel.vue";
 import TradePairsModal from "./components/trade-pairs-modal.vue";
 import TradeSwitch from "./components/trade-switch.vue";
 import TradeWay from "./components/trade-way.vue";
-import { confirmOrderSchema, TradeWayValueEnum } from "./config";
+import { confirmOrderSubmitSchema, TradeWayValueEnum } from "./config";

+const { data } = await safeClient(client.api.trading_pairs.get({ query: { limit: 1 } }));
 const mode = useRouteQuery<TradeTypeEnum>("mode", TradeTypeEnum.BUY);
-const symbol = useRouteQuery<string>("symbol", "BTCUSD");
-
+const symbol = useRouteQuery<string>("symbol", data.value?.data[0].symbol);
 const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
  disabled_features: [
    "create_volume_indicator_by_default",
  ],
 };
 const tradingViewInst = useTemplateRef<TradingViewInst>("tradingViewInst");
-const [form] = useResetRef<SpotOrderBody>({
+const confirmModalInst = useTemplateRef<ModalInstance>("confirmModalInst");
+
+const [form] = useResetRef<SpotOrderBody & { amount: string }>({
  orderType: TradeWayValueEnum.LIMIT,
  quantity: "",
  side: mode.value,
  symbol: symbol.value,
  memo: "",
  price: "",
+  amount: "",
 });

 async function openTradePairs() {
@@ -40,22 +45,38 @@ async function openTradePairs() {
    initialBreakpoint: 0.95,
    handle: true,
  });
-
  await modal.present();
-
  const { data: result } = await modal.onWillDismiss<string>();
-
-  if (result) {
-    symbol.value = result;
+  result && (symbol.value = result);
+}
+function handleChangeQuantity(event) {
+  const val = (event.target as HTMLInputElement).value;
+  if (val && form.value.price) {
+    const amount = Number(val) * Number(form.value.price);
+    form.value.amount = amount.toString();
+  }
+  else {
+    form.value.amount = "";
  }
 }
-
-function handleSubmit() {
-  confirmOrderSchema.validate(form.value).then(() => {
-    console.log("submit successfully");
-  }).catch((err) => {
-    console.log("submit failed:", err);
-  });
+function handleChangeAmount(event) {
+  const val = (event.target as HTMLInputElement).value;
+  if (val && form.value.price) {
+    const quantity = Number(val) / Number(form.value.price);
+    form.value.quantity = quantity.toString();
+  }
+  else {
+    form.value.quantity = "";
+  }
+}
+async function handleSubmit() {
+  try {
+    await confirmOrderSubmitSchema.parseAsync(form.value);
+    confirmModalInst.value?.$el.present();
+  }
+  catch (err) {
+    console.error("订单验证失败:", err);
+  }
 }
 </script>

@@ -90,21 +111,37 @@ function handleSubmit() {
          <TradeSwitch v-model:active="mode" @update:active="val => form.side = val" />
          <TradeWay v-model="form" />
          <template v-if="form.orderType === 'limit'">
-            <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格(USDT)" />
+            <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格">
+              <span slot="end">USDT</span>
+            </ion-input>
+            <ion-input v-model="form.quantity" label="数量" class="count" inputmode="decimal" type="number" placeholder="请输入交易数量" @ion-input="handleChangeQuantity">
+              <span slot="end">{{ symbol }}</span>
+            </ion-input>
+            <ion-input v-model="form.amount" label="金额" class="count" inputmode="decimal" type="number" placeholder="请输入交易金额" @ion-input="handleChangeAmount">
+              <span slot="end">USDT</span>
+            </ion-input>
          </template>
-          <ion-input v-model="form.quantity" label="数量" class="count" inputmode="decimal" type="number" placeholder="请输入交易数量">
-            <span slot="end">{{ symbol }}</span>
-          </ion-input>
-          <ion-input v-model="form.price" label="金额" class="count" inputmode="decimal" type="number" placeholder="请输入交易金额">
-            <span slot="end">USDT</span>
-          </ion-input>
+          <template v-else-if="form.orderType === 'market'">
+            <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格">
+              <span slot="end">USDT</span>
+            </ion-input>
+            <ion-input v-model="form.quantity" label="数量" class="count" inputmode="decimal" type="number" placeholder="请输入交易数量" @ion-input="handleChangeQuantity">
+              <span slot="end">{{ symbol }}</span>
+            </ion-input>
+          </template>
+
          <!-- <ion-range class="range" aria-label="Range with ticks" :pin="true" :ticks="true" :snaps="true" :min="0" :max="5" /> -->
          <ion-button expand="block" size="small" shape="round" :color="mode === TradeTypeEnum.BUY ? 'success' : 'danger'" @click="handleSubmit">
            {{ mode === TradeTypeEnum.BUY ? '买入' : '卖出' }}
          </ion-button>
+
+          <ion-modal ref="confirmModalInst" class="confirm-modal" :breakpoints="[0, 1]" :initial-breakpoint="1" :handle="false">
+            <ConfirmOrder :form="form" />
+          </ion-modal>
        </div>
        <div class="col-span-2" />
      </div>
+
      <div class="mt-6 px-4 pb-4">
        <OrdersPanel />
      </div>
@@ -145,4 +182,7 @@ ion-range.range::part(tick-active) {
  top: 18px;
  border-radius: 100%;
 }
+.confirm-modal {
+  --height: auto;
+}
 </style>
--- a/src/views/user-settings/email.vue
+++ b/src/views/user-settings/email.vue
@@ -3,7 +3,7 @@ import type { GenericObject } from "vee-validate";
 import { toastController } from "@ionic/vue";
 import { arrowBackOutline } from "ionicons/icons";
 import { Field, Form } from "vee-validate";
-import * as yup from "yup";
+import { z } from "zod";
 import { safeClient } from "@/api";
 import { authClient, emailSchema } from "@/auth";

@@ -17,7 +17,7 @@ const isSending = ref(false);
 const canResend = computed(() => countdown.value === 0 && !isSending.value);
 const emailError = ref("");

-let timer: number | null = null;
+let timer: NodeJS.Timeout | null = null;

 function startCountdown() {
  countdown.value = 60;
@@ -40,7 +40,7 @@ async function sendOtp() {
  }

  try {
-    await yup.string().email().validate(emailValue);
+    await z.string().email().parseAsync(emailValue);
  }
  catch {
    emailError.value = t("auth.login.validation.emailInvalid");
--- a/src/views/wallet/transfer.vue
+++ b/src/views/wallet/transfer.vue
@@ -4,7 +4,7 @@ import type { FormInstance } from "@/utils";
 import { loadingController, toastController } from "@ionic/vue";
 import { swapVerticalOutline } from "ionicons/icons";
 import { ErrorMessage, Field, Form } from "vee-validate";
-import * as yup from "yup";
+import { z } from "zod";
 import { client, safeClient } from "@/api";
 import { AssetCodeEnum } from "@/api/enum";
 import { getCryptoIcon } from "@/config/crypto";
@@ -43,15 +43,15 @@ const availableBalance = computed(() => {
 });

 // 验证规则
-const schema = computed(() => yup.object({
-  assetCode: yup.string().required(t("transfer.assetCodeRequired")),
-  amount: yup
-    .string()
-    .required(t("transfer.amountRequired"))
-    .test("min", t("transfer.amountMinError"), value => Number(value) > 0)
-    .test("max", t("transfer.amountMaxError", { amount: availableBalance.value }), value => Number(value) <= Number(availableBalance.value)),
-  fromAccount: yup.string().required(t("transfer.fromAccountRequired")),
-  toAccount: yup.string().required(t("transfer.toAccountRequired")),
+const schema = computed(() => z.object({
+  assetCode: z.string({ message: t("transfer.assetCodeRequired") }).min(1, t("transfer.assetCodeRequired")),
+  amount: z
+    .string({ message: t("transfer.amountRequired") })
+    .min(1, t("transfer.amountRequired"))
+    .refine(value => Number(value) > 0, t("transfer.amountMinError"))
+    .refine(value => Number(value) <= Number(availableBalance.value), t("transfer.amountMaxError", { amount: availableBalance.value })),
+  fromAccount: z.string({ message: t("transfer.fromAccountRequired") }).min(1, t("transfer.fromAccountRequired")),
+  toAccount: z.string({ message: t("transfer.toAccountRequired") }).min(1, t("transfer.toAccountRequired")),
 }));

 // 交换账户
--- a/src/views/withdraw/rules.ts
+++ b/src/views/withdraw/rules.ts
@@ -1,43 +1,70 @@
-import { toTypedSchema } from "@vee-validate/yup";
-import * as yup from "yup";
+import { toTypedSchema } from "@vee-validate/zod";
+import { z } from "zod";
 import { WithdrawMethodEnum } from "@/api/enum";

 export function createWithdrawSchema(t: (key: string, params?: any) => string, maxAmount: string) {
  return toTypedSchema(
-    yup.object({
-      assetCode: yup.string().required(t("withdraw.validation.assetCodeRequired")),
-      amount: yup
-        .string()
-        .required(t("withdraw.validation.amountRequired"))
-        .test("is-number", t("withdraw.validation.amountInvalid"), (value) => {
-          return /^\d+(?:\.\d+)?$/.test(value || "");
-        })
-        .test("max-amount", t("withdraw.validation.amountExceedsBalance"), (value) => {
-          if (!value || maxAmount === "0")
-            return false;
-          return Number.parseFloat(value) <= Number.parseFloat(maxAmount);
-        })
-        .test("min-amount", t("withdraw.validation.amountTooSmall"), (value) => {
-          if (!value)
-            return false;
-          return Number.parseFloat(value) > 0;
-        }),
-      withdrawMethod: yup.string().required(t("withdraw.validation.methodRequired")),
-      bankAccountId: yup.string().when("withdrawMethod", {
-        is: WithdrawMethodEnum.BANK,
-        then: schema => schema.required(t("withdraw.validation.bankAccountRequired")),
-        otherwise: schema => schema.optional(),
-      }),
-      chain: yup.string().when("withdrawMethod", {
-        is: WithdrawMethodEnum.CRYPTO,
-        then: schema => schema.required(t("withdraw.validation.chainRequired")),
-        otherwise: schema => schema.optional(),
-      }),
-      toAddress: yup.string().when("withdrawMethod", {
-        is: WithdrawMethodEnum.CRYPTO,
-        then: schema => schema.required(t("withdraw.validation.addressRequired")).min(10, t("withdraw.validation.addressTooShort")),
-        otherwise: schema => schema.optional(),
-      }),
-    }),
+    z.object({
+      assetCode: z.string({ message: t("withdraw.validation.assetCodeRequired") }).min(1, t("withdraw.validation.assetCodeRequired")),
+      amount: z
+        .string({ message: t("withdraw.validation.amountRequired") })
+        .min(1, t("withdraw.validation.amountRequired"))
+        .refine(
+          value => /^\d+(?:\.\d+)?$/.test(value),
+          t("withdraw.validation.amountInvalid"),
+        )
+        .refine(
+          (value) => {
+            if (maxAmount === "0")
+              return false;
+            return Number.parseFloat(value) <= Number.parseFloat(maxAmount);
+          },
+          t("withdraw.validation.amountExceedsBalance"),
+        )
+        .refine(
+          value => Number.parseFloat(value) > 0,
+          t("withdraw.validation.amountTooSmall"),
+        ),
+      withdrawMethod: z.string({ message: t("withdraw.validation.methodRequired") }).min(1, t("withdraw.validation.methodRequired")),
+      bankAccountId: z.string().optional(),
+      chain: z.string().optional(),
+      toAddress: z.string().optional(),
+    })
+      .refine(
+        (data) => {
+          if (data.withdrawMethod === WithdrawMethodEnum.BANK) {
+            return !!data.bankAccountId;
+          }
+          return true;
+        },
+        {
+          message: t("withdraw.validation.bankAccountRequired"),
+          path: ["bankAccountId"],
+        },
+      )
+      .refine(
+        (data) => {
+          if (data.withdrawMethod === WithdrawMethodEnum.CRYPTO) {
+            return !!data.chain;
+          }
+          return true;
+        },
+        {
+          message: t("withdraw.validation.chainRequired"),
+          path: ["chain"],
+        },
+      )
+      .refine(
+        (data) => {
+          if (data.withdrawMethod === WithdrawMethodEnum.CRYPTO) {
+            return !!data.toAddress && data.toAddress.length >= 10;
+          }
+          return true;
+        },
+        {
+          message: t("withdraw.validation.addressRequired"),
+          path: ["toAddress"],
+        },
+      ),
  );
 }
--- a/types/charting_library.d.ts
+++ b/types/charting_library.d.ts
--- a/types/datafeeds.d.ts
+++ b/types/datafeeds.d.ts