feat: 更新 API 地址，优化样式和组件，添加新主题变量

2025-12-13 18:50:24 +07:00
parent b86f257e38
commit 3866c85815
12 changed files with 139 additions and 30 deletions
--- a/.env
+++ b/.env
@@ -1 +1 @@
-VITE_API_URL=http://192.168.1.36:9527/api
+VITE_API_URL=http://192.168.1.36:9527
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
    "@elysiajs/eden": "^1.4.5",
    "@ionic/vue": "^8.7.11",
    "@ionic/vue-router": "^8.7.11",
-    "@riwa/api-types": "http://192.168.1.36:4873/riwa-api-types-0.0.1.tgz",
+    "@riwa/api-types": "http://192.168.1.36:9527/api/riwa-api-types-0.0.1.tgz",
    "@vueuse/core": "^14.1.0",
    "better-auth": "^1.4.6",
    "ionicons": "^8.0.13",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,8 +36,8 @@ importers:
        specifier: ^8.7.11
        version: 8.7.11(@stencil/core@4.39.0)(vue-router@4.6.3(vue@3.5.25(typescript@5.9.3)))(vue@3.5.25(typescript@5.9.3))
      '@riwa/api-types':
-        specifier: http://192.168.1.36:4873/riwa-api-types-0.0.1.tgz
-        version: http://192.168.1.36:4873/riwa-api-types-0.0.1.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))
+        specifier: http://192.168.1.36:9527/api/riwa-api-types-0.0.1.tgz
+        version: http://192.168.1.36:9527/api/riwa-api-types-0.0.1.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))
      '@vueuse/core':
        specifier: ^14.1.0
        version: 14.1.0(vue@3.5.25(typescript@5.9.3))
@@ -1223,8 +1223,8 @@ packages:
  '@quansync/fs@1.0.0':
    resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==}

-  '@riwa/api-types@http://192.168.1.36:4873/riwa-api-types-0.0.1.tgz':
-    resolution: {tarball: http://192.168.1.36:4873/riwa-api-types-0.0.1.tgz}
+  '@riwa/api-types@http://192.168.1.36:9527/api/riwa-api-types-0.0.1.tgz':
+    resolution: {tarball: http://192.168.1.36:9527/api/riwa-api-types-0.0.1.tgz}
    version: 0.0.1
    peerDependencies:
      '@elysiajs/eden': ^1.4.5
@@ -5725,7 +5725,7 @@ snapshots:
    dependencies:
      quansync: 1.0.0

-  '@riwa/api-types@http://192.168.1.36:4873/riwa-api-types-0.0.1.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
+  '@riwa/api-types@http://192.168.1.36:9527/api/riwa-api-types-0.0.1.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
    dependencies:
      '@elysiajs/eden': 1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3))

--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,8 @@

 <template>
  <IonApp>
+    <Suspense>
      <IonRouterOutlet />
+    </Suspense>
  </IonApp>
 </template>
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,6 +1,10 @@
 import type { App } from "@riwa/api-types";
 import { treaty } from "@elysiajs/eden";

-const api = treaty<App>(`${window.location.origin}/api`);
+const client = treaty<App>(`${window.location.origin}/api`, {
+  fetch: {
+    credentials: "include",
+  },
+});

-export { api };
+export { client };
--- a/src/theme/ionic.css
+++ b/src/theme/ionic.css
@@ -0,0 +1,3 @@
+.ui-toolbar {
+  --background: var(--ion-color-primary-contrast);
+}
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -64,9 +64,53 @@ http://ionicframework.com/docs/theming/ */
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #292929;
  --ion-color-dark-tint: #444444;
-}

-:root {
+  --ion-background-color: #ffffff;
+  --ion-background-color-rgb: 255, 255, 255;
+
+  --ion-text-color: #000000;
+  --ion-text-color-rgb: 0, 0, 0;
+
+  --ion-text-color-step-50: #0d0d0d;
+  --ion-text-color-step-100: #1a1a1a;
+  --ion-text-color-step-150: #262626;
+  --ion-text-color-step-200: #333333;
+  --ion-text-color-step-250: #404040;
+  --ion-text-color-step-300: #4d4d4d;
+  --ion-text-color-step-350: #595959;
+  --ion-text-color-step-400: #666666;
+  --ion-text-color-step-450: #737373;
+  --ion-text-color-step-500: #808080;
+  --ion-text-color-step-550: #8c8c8c;
+  --ion-text-color-step-600: #999999;
+  --ion-text-color-step-650: #a6a6a6;
+  --ion-text-color-step-700: #b3b3b3;
+  --ion-text-color-step-750: #bfbfbf;
+  --ion-text-color-step-800: #cccccc;
+  --ion-text-color-step-850: #d9d9d9;
+  --ion-text-color-step-900: #e6e6e6;
+  --ion-text-color-step-950: #f2f2f2;
+
+  --ion-background-color-step-50: #f2f2f2;
+  --ion-background-color-step-100: #e6e6e6;
+  --ion-background-color-step-150: #d9d9d9;
+  --ion-background-color-step-200: #cccccc;
+  --ion-background-color-step-250: #bfbfbf;
+  --ion-background-color-step-300: #b3b3b3;
+  --ion-background-color-step-350: #a6a6a6;
+  --ion-background-color-step-400: #999999;
+  --ion-background-color-step-450: #8c8c8c;
+  --ion-background-color-step-500: #808080;
+  --ion-background-color-step-550: #737373;
+  --ion-background-color-step-600: #666666;
+  --ion-background-color-step-650: #595959;
+  --ion-background-color-step-700: #4d4d4d;
+  --ion-background-color-step-750: #404040;
+  --ion-background-color-step-800: #333333;
+  --ion-background-color-step-850: #262626;
+  --ion-background-color-step-900: #191919;
+  --ion-background-color-step-950: #0d0d0d;
+
  --ion-font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -77,11 +121,70 @@ http://ionicframework.com/docs/theming/ */

@media (prefers-color-scheme: dark) {
  :root {
+    --ion-color-primary: #ffffff;
+    --ion-color-primary-rgb: 255, 255, 255;
+    --ion-color-primary-contrast: #000000;
+    --ion-color-primary-contrast-rgb: 0, 0, 0;
+    --ion-color-primary-shade: #e0e0e0;
+    --ion-color-primary-tint: #ffffff;
+
+    --ion-color-secondary: #ededed;
+    --ion-color-secondary-rgb: 237, 237, 237;
+    --ion-color-secondary-contrast: #000000;
+    --ion-color-secondary-contrast-rgb: 0, 0, 0;
+    --ion-color-secondary-shade: #d1d1d1;
+    --ion-color-secondary-tint: #efefef;
+
+    --ion-color-tertiary: #d6d6d6;
+    --ion-color-tertiary-rgb: 214, 214, 214;
+    --ion-color-tertiary-contrast: #000000;
+    --ion-color-tertiary-contrast-rgb: 0, 0, 0;
+    --ion-color-tertiary-shade: #bcbcbc;
+    --ion-color-tertiary-tint: #dadada;
+
+    --ion-color-success: #2dd55b;
+    --ion-color-success-rgb: 45, 213, 91;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0, 0, 0;
+    --ion-color-success-shade: #28bb50;
+    --ion-color-success-tint: #42d96b;
+
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    --ion-color-danger: #c5000f;
+    --ion-color-danger-rgb: 197, 0, 15;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #ad000d;
+    --ion-color-danger-tint: #cb1a27;
+
+    --ion-color-light: #f6f8fc;
+    --ion-color-light-rgb: 246, 248, 252;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d8dade;
+    --ion-color-light-tint: #f7f9fc;
+
+    --ion-color-medium: #5f5f5f;
+    --ion-color-medium-rgb: 95, 95, 95;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #545454;
+    --ion-color-medium-tint: #6f6f6f;
+
+    --ion-color-dark: #2f2f2f;
+    --ion-color-dark-rgb: 47, 47, 47;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #292929;
+    --ion-color-dark-tint: #444444;
+
    --ui-input-background: #1e1e1e;
    --ui-input-color: #ffffff;
  }
 }
-
-.ui-toolbar {
-  --background: var(--ion-color-primary-contrast);
-}
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -7,10 +7,10 @@ import IcOutlineCleaningServices from "~icons/ic/outline-cleaning-services";
  <IonPage>
    <IonHeader>
      <ion-toolbar class="ui-toolbar">
-        <ion-button slot="start" fill="clear" color="dark">
+        <ion-button slot="start" fill="clear">
          <IcOutlineCleaningServices slot="icon-only" />
        </ion-button>
-        <ion-button slot="end" fill="clear" color="dark">
+        <ion-button slot="end" fill="clear">
          <IcBaselinePermContactCalendar slot="icon-only" />
        </ion-button>
        <ion-title>Chat</ion-title>
--- a/src/views/onchain-address/index.vue
+++ b/src/views/onchain-address/index.vue
@@ -9,7 +9,7 @@ const { user } = useAuth();
    <IonHeader>
      <IonToolbar class="ui-toolbar">
        <ion-buttons slot="start">
-          <ion-back-button default-href="/layout/user" />
+          <ion-back-button />
        </ion-buttons>
        <ion-title>My Onchain Address</ion-title>
      </IonToolbar>
@@ -19,7 +19,7 @@ const { user } = useAuth();
        <div class="container">
          <div class="user-info">
            <div class="avatar-wrapper">
-              <ion-avatar class="avatar">
+              <ion-avatar class="avatar size-16">
                <img alt="User avatar" :src="user?.image || 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'">
              </ion-avatar>
            </div>
--- a/src/views/riwa/index.vue
+++ b/src/views/riwa/index.vue
@@ -20,17 +20,11 @@ async function handleLogout() {
 <template>
  <IonPage ref="page">
    <IonHeader>
-      <IonToolbar>
+      <IonToolbar class="ui-tabbar">
        <IonTitle>Home</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent :fullscreen="true">
-      <IonHeader collapse="condense">
-        <IonToolbar>
-          <IonTitle>Home</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-
      <IonButton @click="openSignin">
        Log in
      </IonButton>
--- a/src/views/user/components/wallet-card.vue
+++ b/src/views/user/components/wallet-card.vue
@@ -1,7 +1,10 @@
 <script lang='ts' setup>
+import { client } from "@/api";
+
 const balance = ref(9999999.00);

 const formattedBalance = formatBalance(balance);
+const { data } = await client.asset.balances.get();
 </script>

 <template>
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -9,13 +9,13 @@ import WalletCard from "./components/wallet-card.vue";
    <ion-header>
      <ion-toolbar class="ui-toolbar">
        <div slot="end">
-          <ion-button fill="clear" color="dark">
+          <ion-button fill="clear">
            <ion-icon slot="icon-only" :icon="scanOutline" />
          </ion-button>
-          <ion-button fill="clear" color="dark">
+          <ion-button fill="clear">
            <ion-icon slot="icon-only" :icon="notificationsOutline" />
          </ion-button>
-          <ion-button fill="clear" color="dark">
+          <ion-button fill="clear">
            <ion-icon slot="icon-only" :icon="settingsOutline" />
          </ion-button>
        </div>