From deba5e65cd358e16f91b2f3c03c25ce0fd9f1ddb Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Thu, 15 Jan 2026 01:02:27 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0IonFab=E5=92=8CIonFab?=
 =?UTF-8?q?Button=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=9B=B4=E6=96=B0=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9=E5=8A=9F=E8=83=BD=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts          |  4 ++++
 src/views/riwa/index.vue | 26 +++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/components.d.ts b/components.d.ts
index 064a367..bb648da 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -29,6 +29,8 @@ declare module 'vue' {
     IonContent: typeof import('@ionic/vue')['IonContent']
     IonDatetime: typeof import('@ionic/vue')['IonDatetime']
     IonDatetimeButton: typeof import('@ionic/vue')['IonDatetimeButton']
+    IonFab: typeof import('@ionic/vue')['IonFab']
+    IonFabButton: typeof import('@ionic/vue')['IonFabButton']
     IonFooter: typeof import('@ionic/vue')['IonFooter']
     IonGrid: typeof import('@ionic/vue')['IonGrid']
     IonHeader: typeof import('@ionic/vue')['IonHeader']
@@ -89,6 +91,8 @@ declare global {
   const IonContent: typeof import('@ionic/vue')['IonContent']
   const IonDatetime: typeof import('@ionic/vue')['IonDatetime']
   const IonDatetimeButton: typeof import('@ionic/vue')['IonDatetimeButton']
+  const IonFab: typeof import('@ionic/vue')['IonFab']
+  const IonFabButton: typeof import('@ionic/vue')['IonFabButton']
   const IonFooter: typeof import('@ionic/vue')['IonFooter']
   const IonGrid: typeof import('@ionic/vue')['IonGrid']
   const IonHeader: typeof import('@ionic/vue')['IonHeader']
diff --git a/src/views/riwa/index.vue b/src/views/riwa/index.vue
index 65b7973..aa7dc7d 100644
--- a/src/views/riwa/index.vue
+++ b/src/views/riwa/index.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
+import { chatbubbleOutline } from "ionicons/icons";
 import IconParkOutlineApplicationMenu from "~icons/icon-park-outline/application-menu";
-import IconParkOutlineScanCode from "~icons/icon-park-outline/scan-code";
 import News from "./components/news.vue";
 import Rwa from "./components/rwa.vue";
+
+function openChat() {
+  window.open("https://chat.riwsan.com/", "_blank");
+}
 </script>
 
 <template>
@@ -15,10 +19,30 @@ import Rwa from "./components/rwa.vue";
         <ion-title>{{ $t('home.title') }}</ion-title>
       </ion-toolbar>
     </ion-header>
+
     <ion-content :fullscreen="true" class="ion-padding">
       <!-- <pwa-install-button class="mb-4" /> -->
       <Rwa />
       <News />
     </ion-content>
+    <ion-fab horizontal="end" vertical="bottom" @click="openChat">
+      <ion-fab-button>
+        <ion-icon :icon="chatbubbleOutline" />
+      </ion-fab-button>
+    </ion-fab>
   </ion-page>
 </template>
+
+<style lang="css" scoped>
+ion-fab {
+  margin-bottom: var(--ion-safe-area-bottom, 0);
+}
+ion-fab-button::part(native) {
+  background: linear-gradient(to right, rgb(93, 230, 83), rgb(22, 119, 255));
+  border-radius: 20px;
+  box-shadow:
+    0px 1px 2px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  color: white;
+}
+</style>