feat: 添加IonFab和IonFabButton组件，更新聊天功能按钮样式

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']

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>