feat: update frontend

frontend/src/App.vue

@@ -1,10 +1,51 @@
 <script setup>
-import { NMessageProvider } from 'naive-ui'
+import { NMessageProvider, NGrid, NGi, NSpace, NButton } from 'naive-ui'
 import Content from './Content.vue';
 </script>
 
 <template>
   <n-message-provider>
-    <Content />
+    <n-grid x-gap="12" :cols="8">
+      <n-gi span="1"></n-gi>
+      <n-gi span="6">
+        <div class="main">
+          <n-space vertical>
+            <h2>Cloudflare Temp Email <n-button tag="a" target="_blank" tertiary type="primary" round class="button-left"
+                href="https://github.com/dreamhunter2333/cloudflare_temp_email">Star Github</n-button>
+            </h2>
+            <Content />
+          </n-space>
+        </div>
+      </n-gi>
+      <n-gi span="1"></n-gi>
+    </n-grid>
   </n-message-provider>
 </template>
+
+
+<style scoped>
+.side {
+  height: 100vh;
+}
+
+.main {
+  height: 100vh;
+  text-align: center;
+}
+
+.n-grid {
+  height: 100%;
+}
+
+.n-gi {
+  height: 100%;
+}
+
+.n-space {
+  height: 100%;
+}
+
+.button-left {
+  margin-left: 10px;
+}
+</style>

frontend/src/Content.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { NGrid, NGi, NSpace, NAlert, NMessageProvider } from 'naive-ui'
-import { NSpin, NButton, NCard, NLayout, NPopconfirm } from 'naive-ui'
+import { NSpace, NAlert } from 'naive-ui'
+import { NSpin, NButton, NLayout, NPopconfirm } from 'naive-ui'
+import { NList, NListItem, NThing, NTag, NNumberAnimation } from 'naive-ui'
 import { watch, onMounted, ref } from "vue";
 import { useStorage } from '@vueuse/core'
 import useClipboard from 'vue-clipboard3'
@@ -11,7 +12,6 @@ const message = useMessage()
 
 const jwt = useStorage('jwt')
 const address = ref("")
-const result = ref("")
 const loading = ref(false)
 const data = ref([])
 const API_BASE = import.meta.env.VITE_API_BASE || "";
@@ -36,11 +36,9 @@ const refresh = async () => {
     }
     let res = await response.json();
     data.value = res;
-    result.value = "";
   } catch (error) {
     message.error(error.message || "error");
     console.error(error);
-    result.value = error.message || "error";
   } finally {
     loading.value = false;
   }
@@ -77,7 +75,6 @@ const newEmail = async () => {
     jwt.value = "";
     message.error(error.message || "error");
     console.error(error);
-    result.value = error.message || "error";
   } finally {
     loading.value = false;
   }
@@ -124,80 +121,60 @@ onMounted(async () => {
 
 <template>
   <n-spin size="large" description="loading..." :show="loading">
-    <n-grid x-gap="12" :cols="6">
-      <n-gi span="6">
-        <div class="main">
-          <n-space vertical>
-            <h2>Temp Email</h2>
-            <n-layout>
-              <n-layout>
-                <n-card>
-                  <n-alert type="info" show-icon>
-                    <span v-if="address">
-                      Your email address is <b>{{ address }}</b>
-                      <n-button style="margin-left: 10px;" @click="copy" size="small" tertiary round
-                        type="primary">Copy</n-button>
-                    </span>
-                    <span v-else>
-                      Please click <b>Get New Email</b> button to get a new email address
-                    </span>
-                  </n-alert>
-                </n-card>
-                <n-popconfirm @positive-click="newEmail" :show-icon="false">
-                  <template #trigger>
-                    <n-button class="center" tertiary round type="primary">
-                      Get New Email
-                    </n-button>
-                  </template>
-                  Get New Email?
-                </n-popconfirm>
-                <n-button class="center" @click="refresh" tertiary round type="primary">
-                  Refresh
-                </n-button>
-                <n-card>
-                  <n-alert type="" show-icon v-if="result">
-                    <span>
-                      <pre>{{ result }}</pre>
-                    </span>
-                  </n-alert>
-                  <n-alert v-for="row in data" v-bind:key="row.id" :title="`FROM: ${row.source} ID: ${row.id}`"
-                    type="default">
-                    <p>{{ row.subject }}</p>
-                    <div v-html="row.message"></div>
-                  </n-alert>
-                </n-card>
-              </n-layout>
-            </n-layout>
-          </n-space>
-        </div>
-      </n-gi>
-    </n-grid>
+    <n-layout>
+      <n-alert :type='address ? "info" : "warning"' show-icon>
+        <span v-if="address">
+          Your email address is <b>{{ address }}</b>
+          <n-button class="button-left" @click="copy" size="small" tertiary round type="primary">Copy</n-button>
+        </span>
+        <span v-else>
+          Please click <b>Get New Email</b> button to get a new email address
+        </span>
+      </n-alert>
+      <n-popconfirm @positive-click="newEmail" :show-icon="false">
+        <template #trigger>
+          <n-button class="center" tertiary round type="primary">
+            Get New Email
+          </n-button>
+        </template>
+        Get New Email?
+      </n-popconfirm>
+      <n-button class="center button-left" @click="refresh" round type="primary">
+        Refresh
+      </n-button>
+      <n-list hoverable clickable>
+        <n-list-item v-for="row in data" v-bind:key="row.id">
+          <n-thing class="center" :title="row.subject">
+            <template #description>
+              <n-space>
+                <n-tag type="info">
+                  FROM: {{ row.source }}
+                </n-tag>
+                <n-tag type="info">
+                  ID: {{ row.id }}
+                </n-tag>
+              </n-space>
+            </template>
+            <div v-html="row.message"></div>
+          </n-thing>
+        </n-list-item>
+      </n-list>
+    </n-layout>
   </n-spin>
 </template>
 
 <style scoped>
-.side {
-  height: 100vh;
-}
-
-.main {
-  height: 100vh;
-  text-align: center;
-}
-
-.n-grid {
-  height: 100%;
-}
-
-.n-gi {
-  height: 100%;
-}
-
-.n-space {
-  height: 100%;
-}
-
 .n-alert {
+  margin-bottom: 10px;
   text-align: center;
 }
+
+.n-list {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.button-left {
+  margin-left: 10px;
+}
 </style>