From ffa0f38180b95e0c8e86bc4a9c3fd8979d1b3a65 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 5 Jul 2023 20:23:48 +0800
Subject: [PATCH] fix ui

---
 src/components/cards/SiteCard.vue            | 66 +++++++++++---------
 src/styles/styles.scss                       |  8 +++
 src/views/discover/MediaCardListView.vue     |  6 --
 src/views/reorganize/DownloadingListView.vue |  6 --
 src/views/site/SiteCardListView.vue          |  6 ++
 src/views/subscribe/SubscribeListView.vue    |  6 ++
 6 files changed, 58 insertions(+), 40 deletions(-)

diff --git a/src/components/cards/SiteCard.vue b/src/components/cards/SiteCard.vue
index dceca706..9a2b9d4d 100644
--- a/src/components/cards/SiteCard.vue
+++ b/src/components/cards/SiteCard.vue
@@ -86,29 +86,32 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard
-    :height="props.height"
-    :width="props.width"
-    :flat="!props.site?.is_active"
-    class="overflow-hidden"
-  >
+  <VCard :height="props.height" :width="props.width" :flat="!props.site?.is_active" class="overflow-hidden">
     <template #image>
       <VAvatar class="absolute right-2 bottom-2" variant="flat" rounded="0">
         <VImg :src="siteIcon" />
       </VAvatar>
     </template>
     <VCardItem>
-      <VCardTitle>{{ props.site?.name }}</VCardTitle>
+      <VCardTitle class="font-bold">{{ props.site?.name }}</VCardTitle>
       <VCardSubtitle>{{ props.site?.url }}</VCardSubtitle>
     </VCardItem>
 
-    <VIcon
-      v-if="props.site?.is_active"
-      icon="mdi-check-circle"
-      color="success"
-      class="absolute right-2 top-2"
-    >
-    </VIcon>
+    <div class="absolute top-0 right-0 flex items-center justify-between p-2" v-if="props.site?.is_active">
+      <div class="pointer-events-none z-40 flex items-center">
+        <div
+          class="relative inline-flex whitespace-nowrap rounded-full border-gray-700 font-semibold leading-5 ring-gray-700 ">
+          <div
+            class="rounded-full bg-opacity-80 shadow-md w-5 border p-0 bg-green-500 border-green-400 ring-green-400 text-green-100">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                clip-rule="evenodd"></path>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
 
     <VCardText class="py-2">
       <VTooltip text="浏览器仿真" v-if="props.site?.render">
@@ -131,22 +134,29 @@ onMounted(() => {
 
       <VTooltip text="过滤" v-if="props.site?.filter">
         <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-filter-cog-outline"
-          />
+          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-filter-cog-outline" />
         </template>
       </VTooltip>
     </VCardText>
 
     <VCardActions>
-      <VBtn @click="updateSite" :disabled="updateButtonDisable">{{
-        updateButtonText
-      }}</VBtn>
-      <VBtn>编辑</VBtn>
-      <VBtn @click="testSite" :disabled="testButtonDisable">{{ testButtonText }}</VBtn>
-    </VCardActions>
-  </VCard>
-</template>
+      <VBtn @click="updateSite" :disabled="updateButtonDisable">
+        <template #prepend>
+          <VIcon icon="mdi-refresh"></VIcon>
+        </template>
+        {{ updateButtonText }}
+      </VBtn>
+      <VBtn>
+        <template #prepend>
+          <VIcon icon="mdi-square-edit-outline"></VIcon>
+        </template>
+        编辑
+      </VBtn>
+      <VBtn @click="testSite" :disabled="testButtonDisable">
+        <template #prepend>
+          <VIcon icon="mdi-network-outline"></VIcon>
+      </template>
+      {{ testButtonText }}
+    </VBtn>
+  </VCardActions>
+</VCard></template>
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index ebfc0c6e..10475c71 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -19,3 +19,11 @@
 .v-toast--bottom {
   margin-bottom: env(safe-area-inset-top);
 }
+
+
+.centered {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/src/views/discover/MediaCardListView.vue b/src/views/discover/MediaCardListView.vue
index 7184e50c..8ff3aeb1 100644
--- a/src/views/discover/MediaCardListView.vue
+++ b/src/views/discover/MediaCardListView.vue
@@ -136,10 +136,4 @@ const fetchData = async ({ done }) => {
   grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
 }
 
-.centered {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
-}
 </style>
diff --git a/src/views/reorganize/DownloadingListView.vue b/src/views/reorganize/DownloadingListView.vue
index 84f6d244..b6538430 100644
--- a/src/views/reorganize/DownloadingListView.vue
+++ b/src/views/reorganize/DownloadingListView.vue
@@ -79,10 +79,4 @@ onUnmounted(() => {
   padding-block-end: 1rem;
 }
 
-.centered {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
-}
 </style>
diff --git a/src/views/site/SiteCardListView.vue b/src/views/site/SiteCardListView.vue
index ae8d15a4..e77cf454 100644
--- a/src/views/site/SiteCardListView.vue
+++ b/src/views/site/SiteCardListView.vue
@@ -24,6 +24,12 @@ onBeforeMount(fetchData)
 </script>
 
 <template>
+  <VProgressCircular
+    class="centered"
+    v-if="!isRefreshed"
+    indeterminate
+    color="primary"
+  ></VProgressCircular>
   <div
     class="grid gap-3 grid-site-card"
     v-if="dataList.length > 0"
diff --git a/src/views/subscribe/SubscribeListView.vue b/src/views/subscribe/SubscribeListView.vue
index 2be84002..c558e264 100644
--- a/src/views/subscribe/SubscribeListView.vue
+++ b/src/views/subscribe/SubscribeListView.vue
@@ -46,6 +46,12 @@ const filteredDataList = computed(() => {
 </script>
 
 <template>
+  <VProgressCircular
+    class="centered"
+    v-if="!isRefreshed"
+    indeterminate
+    color="primary"
+  ></VProgressCircular>
   <PullRefresh v-model="loading" @refresh="onRefresh">
     <div class="grid gap-3 grid-subscribe-card" 
       v-if="filteredDataList.length > 0">