newui: saber

src/components/ImageContainer.vue

@@ -19,8 +19,9 @@ defineProps<{
     </Badge>
     <div v-if="imageResult.result === 'pending'" class="flex flex-1 items-center justify-center text-xl">
       <Icon icon="akar-icons:loading" class="mr-2 animate-spin" />
+      <span>正在加载图片</span>
     </div>
-    <Image v-else-if="imageResult.result === 'success'" :image-url="imageResult.imageUrl" />
+    <Image v-else-if="imageResult.result === 'success'" class="flex flex-1 items-center justify-center text-xl" :image-url="imageResult.imageUrl" />
     <div v-else class="flex flex-1 items-center justify-center text-xl">
       {{ imageResult.message }}
     </div>

src/pages/radar/v1.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ImageResult } from '~/components/ImageContainer.vue'
 import { API_BASE_URL } from '~/CONSTANT'
 
 const selectedMode = ref('潮汐波')
@@ -6,7 +7,12 @@ const selectedStation = ref('武汉左岭镇站')
 const selectedYear = ref('2017')
 const selectedWindType = ref('uwind')
 const selectedH = ref(90000)
-const imageUrl = ref('')
+
+const imageResult = reactive<ImageResult>({
+  result: 'idle',
+  imageUrl: '',
+  message: '请你选择一个模式和日期',
+})
 
 const modes = [
   '潮汐波',
@@ -35,7 +41,14 @@ const { onFetchResponse, isFetching } = useFetch(queryUrl, { refetch: true })
 onFetchResponse(async (resp) => {
   const blob = await resp.blob()
   const url = URL.createObjectURL(blob)
-  imageUrl.value = url
+  imageResult.result = 'success'
+  imageResult.imageUrl = url
+})
+
+watch(isFetching, (fetching) => {
+  if (fetching) {
+    imageResult.result = 'pending'
+  }
 })
 
 onMounted(async () => {
@@ -63,9 +76,9 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div flex="~ col items-center">
+  <DenseFramework :image-result="imageResult">
     <div>
-      <div flex="~ row items-center gap-3" py-3>
+      <div flex="~ col gap-3" py-3>
         <Select v-model="selectedMode">
           <SelectTrigger class="w-[180px]">
             <SelectValue placeholder="Select a fruit" />
@@ -107,19 +120,7 @@ onMounted(async () => {
         </Select>
       </div>
     </div>
-    <div>
+  </Denseframework>
-      {{ selectedMode }}
-      {{ selectedYear }}
-    </div>
-    <div>
-      <div v-if="!isFetching && imageUrl !== ''">
-        <Image :image-url="imageUrl" />
-      </div>
-      <div v-else h-40 flex="~ col items-center justify-center" text-xl>
-        loading...
-      </div>
-    </div>
-  </div>
 </template>
 
 <style lang="scss" scoped>

src/pages/saber/day_cycle_power_wave_plot.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ImageResult } from '~/components/ImageContainer.vue'
 import { API_BASE_URL } from '~/CONSTANT'
 import { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'
 
@@ -8,7 +9,11 @@ const selected = reactive({
   cycle_no: 1,
 })
 
-const imageUrl = ref('')
+const imageResult = reactive<ImageResult>({
+  result: 'idle',
+  imageUrl: '',
+  message: '请你选择一个模式和日期',
+})
 
 const urll = computed(() => {
   const path = encodeURIComponent(selected.path)
@@ -21,10 +26,17 @@ const { onFetchResponse, isFetching } = useFetch(
   { refetch: true },
 )
 
+watch(isFetching, (fetching) => {
+  if (fetching) {
+    imageResult.result = 'pending'
+  }
+})
+
 onFetchResponse(async (resp) => {
   const blob = await resp.blob()
   const url = URL.createObjectURL(blob)
-  imageUrl.value = url
+  imageResult.result = 'success'
+  imageResult.imageUrl = url
 })
 
 onMounted(() => {
@@ -49,12 +61,12 @@ function renderPath(path: string) {
 </script>
 
 <template>
-  <div flex="~ col items-center" w-full>
+  <DenseFramework :image-result="imageResult">
     <div>
-      <div flex="~ row items-center gap-3" py-3>
+      <div flex="~ col items-stretch gap-3" py-3>
         <Label for="day">年月</Label>
         <Select v-model="selected.path">
-          <SelectTrigger class="w-[180px]">
+          <SelectTrigger>
             <SelectValue placeholder="选择日期" />
           </SelectTrigger>
           <SelectContent>
@@ -68,7 +80,7 @@ function renderPath(path: string) {
         </Select>
         <Label for="day">天数</Label>
         <Select id="day" v-model="selected.day">
-          <SelectTrigger class="w-[180px]">
+          <SelectTrigger>
             <SelectValue placeholder="选择日期" />
           </SelectTrigger>
           <SelectContent>
@@ -90,19 +102,7 @@ function renderPath(path: string) {
         </NumberField>
       </div>
     </div>
-    <div>
+  </DenseFramework>
-      {{ selected.day }}
-      {{ selected.path }}
-    </div>
-    <div w-full>
-      <div v-if="!isFetching && imageUrl !== ''">
-        <Image :image-url="imageUrl" />
-      </div>
-      <div v-else flex="~ col items-center justify-center" h-40 w-full text-xl>
-        <Loading />
-      </div>
-    </div>
-  </div>
 </template>
 
 <style scoped>

src/pages/saber/day_fft_ifft_plot.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ImageResult } from '~/components/ImageContainer.vue'
 import { API_BASE_URL } from '~/CONSTANT'
 import { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'
 
@@ -8,7 +9,11 @@ const selected = reactive({
   cycle_no: 1,
 })
 
-const imageUrl = ref('')
+const imageResult = reactive<ImageResult>({
+  result: 'idle',
+  imageUrl: '',
+  message: '请你选择一个模式和日期',
+})
 
 const urll = computed(() => {
   const path = encodeURIComponent(selected.path)
@@ -21,10 +26,17 @@ const { onFetchResponse, isFetching } = useFetch(
   { refetch: true },
 )
 
+watch(isFetching, (fetching) => {
+  if (fetching) {
+    imageResult.result = 'pending'
+  }
+})
+
 onFetchResponse(async (resp) => {
   const blob = await resp.blob()
   const url = URL.createObjectURL(blob)
-  imageUrl.value = url
+  imageResult.result = 'success'
+  imageResult.imageUrl = url
 })
 
 onMounted(() => {
@@ -49,12 +61,12 @@ function renderPath(path: string) {
 </script>
 
 <template>
-  <div flex="~ col items-center" w-full>
+  <DenseFramework :image-result="imageResult">
     <div>
-      <div flex="~ row items-center gap-3" py-3>
+      <div flex="~ col items-stretch gap-3" py-3>
         <Label for="day">年月</Label>
         <Select v-model="selected.path">
-          <SelectTrigger class="w-[180px]">
+          <SelectTrigger>
             <SelectValue placeholder="选择日期" />
           </SelectTrigger>
           <SelectContent>
@@ -68,7 +80,7 @@ function renderPath(path: string) {
         </Select>
         <Label for="day">天数</Label>
         <Select id="day" v-model="selected.day">
-          <SelectTrigger class="w-[180px]">
+          <SelectTrigger>
             <SelectValue placeholder="选择日期" />
           </SelectTrigger>
           <SelectContent>
@@ -90,19 +102,7 @@ function renderPath(path: string) {
         </NumberField>
       </div>
     </div>
-    <div>
+  </DenseFramework>
-      {{ selected.day }}
-      {{ selected.path }}
-    </div>
-    <div w-full>
-      <div v-if="!isFetching && imageUrl !== ''">
-        <Image :image-url="imageUrl" />
-      </div>
-      <div v-else flex="~ col items-center justify-center" h-40 w-full text-xl>
-        <Loading />
-      </div>
-    </div>
-  </div>
 </template>
 
 <style scoped>

src/pages/saber/month_power_wave_plot.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ImageResult } from '~/components/ImageContainer.vue'
 import { API_BASE_URL } from '~/CONSTANT'
 import { refreshPath, saberPaths } from './utils'
 
@@ -6,7 +7,11 @@ const selected = reactive({
   path: '',
 })
 
-const imageUrl = ref('')
+const imageResult = reactive<ImageResult>({
+  result: 'idle',
+  imageUrl: '',
+  message: '请你选择一个模式和日期',
+})
 
 const urll = computed(() => {
   const path = encodeURIComponent(selected.path)
@@ -18,10 +23,17 @@ const { onFetchResponse, isFetching } = useFetch(
   { refetch: true },
 )
 
+watch(isFetching, (fetching) => {
+  if (fetching) {
+    imageResult.result = 'pending'
+  }
+})
+
 onFetchResponse(async (resp) => {
   const blob = await resp.blob()
   const url = URL.createObjectURL(blob)
-  imageUrl.value = url
+  imageResult.result = 'success'
+  imageResult.imageUrl = url
 })
 
 onMounted(() => {
@@ -39,12 +51,12 @@ function renderPath(path: string) {
 </script>
 
 <template>
-  <div flex="~ col items-center" w-full>
+  <DenseFramework :image-result="imageResult">
     <div>
       <div flex="~ row items-center gap-3" py-3>
         <Label for="day">年月</Label>
         <Select v-model="selected.path">
-          <SelectTrigger class="w-[180px]">
+          <SelectTrigger>
             <SelectValue placeholder="选择日期" />
           </SelectTrigger>
           <SelectContent>
@@ -58,18 +70,7 @@ function renderPath(path: string) {
         </Select>
       </div>
     </div>
-    <div>
+  </DenseFramework>
-      {{ selected.path }}
-    </div>
-    <div w-full>
-      <div v-if="!isFetching && imageUrl !== ''">
-        <Image :image-url="imageUrl" />
-      </div>
-      <div v-else flex="~ col items-center justify-center" h-40 w-full text-xl>
-        <Loading />
-      </div>
-    </div>
-  </div>
 </template>
 
 <style scoped>

src/pages/saber/plot_wave_fitting.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ImageResult } from '~/components/ImageContainer.vue'
 import { API_BASE_URL } from '~/CONSTANT'
 import { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'
 
@@ -8,7 +9,11 @@ const selected = reactive({
   height_no: 1,
 })
 
-const imageUrl = ref('')
+const imageResult = reactive<ImageResult>({
+  result: 'idle',
+  imageUrl: '',
+  message: '请你选择一个模式和日期',
+})
 
 const urll = computed(() => {
   const path = encodeURIComponent(selected.path)
@@ -21,10 +26,17 @@ const { onFetchResponse, isFetching } = useFetch(
   { refetch: true },
 )
 
+watch(isFetching, (fetching) => {
+  if (fetching) {
+    imageResult.result = 'pending'
+  }
+})
+
 onFetchResponse(async (resp) => {
   const blob = await resp.blob()
   const url = URL.createObjectURL(blob)
-  imageUrl.value = url
+  imageResult.result = 'success'
+  imageResult.imageUrl = url
 })
 
 onMounted(() => {
@@ -49,12 +61,12 @@ function renderPath(path: string) {
 </script>
 
 <template>
-  <div flex="~ col items-center" w-full>
+  <DenseFramework :image-result="imageResult">
     <div>
-      <div flex="~ row items-center gap-3" py-3>
+      <div flex="~ col justify-stretch   gap-3" py-3>
         <Label for="day">年月</Label>
         <Select v-model="selected.path">
-          <SelectTrigger class="w-[180px]">
+          <SelectTrigger>
             <SelectValue placeholder="选择日期" />
           </SelectTrigger>
           <SelectContent>
@@ -68,7 +80,7 @@ function renderPath(path: string) {
         </Select>
         <Label for="day">天数</Label>
         <Select id="day" v-model="selected.day">
-          <SelectTrigger class="w-[180px]">
+          <SelectTrigger>
             <SelectValue placeholder="选择日期" />
           </SelectTrigger>
           <SelectContent>
@@ -90,19 +102,7 @@ function renderPath(path: string) {
         </NumberField>
       </div>
     </div>
-    <div>
+  </DenseFramework>
-      {{ selected.day }}
-      {{ selected.path }}
-    </div>
-    <div w-full>
-      <div v-if="!isFetching && imageUrl !== ''">
-        <Image :image-url="imageUrl" />
-      </div>
-      <div v-else flex="~ col items-center justify-center" h-40 w-full text-xl>
-        <Loading />
-      </div>
-    </div>
-  </div>
 </template>
 
 <style scoped>