Merge branch 'master' into dev

2024-12-24 12:53:49 +08:00 · 2024-12-24 12:53:49 +08:00 · 60904b752f
commit 60904b752f
parent b520d4006c 0dc65bc64a
6 changed files with 77 additions and 42 deletions
--- a/components/dashboard/Counters.vue
+++ b/components/dashboard/Counters.vue
@ -1,5 +1,6 @@
 <script setup>
 import { Flame, MousePointerClick, Users } from 'lucide-vue-next'
+import NumberFlow from '@number-flow/vue'

 const defaultData = Object.freeze({
  visits: 0,
@ -46,15 +47,7 @@ onBeforeUnmount(() => {
        <MousePointerClick class="w-4 h-4 text-muted-foreground" />
      </CardHeader>
      <CardContent>
-        <div
-          class="text-2xl font-bold"
-          :class="{ 'blur-lg': !counters.visits }"
-        >
-          {{ formatNumber(counters.visits) }}
-        </div>
-        <!-- <p class="text-xs text-muted-foreground">
-          +90
-        </p> -->
+        <NumberFlow class="text-2xl font-bold" :class="{ 'blur-md opacity-60': !counters.visits }" :value="counters.visits" />
      </CardContent>
    </Card>
    <Card>
@ -65,15 +58,7 @@ onBeforeUnmount(() => {
        <Users class="w-4 h-4 text-muted-foreground" />
      </CardHeader>
      <CardContent>
-        <div
-          class="text-2xl font-bold"
-          :class="{ 'blur-lg': !counters.visitors }"
-        >
-          {{ formatNumber(counters.visitors) }}
-        </div>
-        <!-- <p class="text-xs text-muted-foreground">
-          +90
-        </p> -->
+        <NumberFlow class="text-2xl font-bold" :class="{ 'blur-md opacity-60': !counters.visitors }" :value="counters.visitors" />
      </CardContent>
    </Card>
    <Card>
@ -84,15 +69,7 @@ onBeforeUnmount(() => {
        <Flame class="w-4 h-4 text-muted-foreground" />
      </CardHeader>
      <CardContent>
-        <div
-          class="text-2xl font-bold"
-          :class="{ 'blur-lg': !counters.referers }"
-        >
-          {{ formatNumber(counters.referers) }}
-        </div>
-        <!-- <p class="text-xs text-muted-foreground">
-          -20
-        </p> -->
+        <NumberFlow class="text-2xl font-bold" :class="{ 'blur-md opacity-60': !counters.referers }" :value="counters.referers" />
      </CardContent>
    </Card>
  </div>
--- a/components/dashboard/links/Index.vue
+++ b/components/dashboard/links/Index.vue
@ -6,23 +6,37 @@ const links = ref([])
 const limit = 24
 let cursor = ''
 let listComplete = false
+let listError = false

 async function getLinks() {
-  const data = await useAPI('/api/link/list', {
-    query: {
-      limit,
-      cursor,
-    },
-  })
-  links.value = links.value.concat(data.links).filter(Boolean) // Sometimes cloudflare will return null, filter out
-  cursor = data.cursor
-  listComplete = data.list_complete
+  try {
+    const data = await useAPI('/api/link/list', {
+      query: {
+        limit,
+        cursor,
+      },
+    })
+    links.value = links.value.concat(data.links).filter(Boolean) // Sometimes cloudflare will return null, filter out
+    cursor = data.cursor
+    listComplete = data.list_complete
+    listError = false
+  }
+  catch (error) {
+    console.error(error)
+    listError = true
+  }
 }

 const { isLoading } = useInfiniteScroll(
  document,
  getLinks,
-  { distance: 150, interval: 1000, canLoadMore: () => !listComplete },
+  {
+    distance: 150,
+    interval: 1000,
+    canLoadMore: () => {
+      return !listError && !listComplete
+    },
+  },
 )

 function updateLinkList(link, type) {
@ -46,7 +60,7 @@ function updateLinkList(link, type) {
      <DashboardNav class="flex-1">
        <DashboardLinksEditor @update:link="updateLinkList" />
      </DashboardNav>
-      <DashboardLinksSearch />
+      <LazyDashboardLinksSearch />
    </div>
    <section class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
      <DashboardLinksLink
@ -68,5 +82,14 @@ function updateLinkList(link, type) {
    >
      No more
    </div>
+    <div
+      v-if="listError"
+      class="flex items-center justify-center text-sm"
+    >
+      Loading links failed,
+      <Button variant="link" @click="getLinks">
+        Try again
+      </Button>
+    </div>
  </main>
 </template>
--- a/components/dashboard/links/Search.vue
+++ b/components/dashboard/links/Search.vue
@ -8,7 +8,7 @@ const isOpen = ref(false)
 const searchTerm = ref('')
 const selectedLink = ref(null)

-const links = await useAPI('/api/link/search')
+const links = ref([])

 const { results: filteredLinks } = useFuse(searchTerm, links, {
  fuseOptions: {
@ -37,6 +37,14 @@ function selectLink(link) {
    query: { slug: link.slug },
  })
 }
+
+async function getLinks() {
+  links.value = await useAPI('/api/link/search')
+}
+
+onMounted(() => {
+  getLinks()
+})
 </script>

 <template>
@ -73,7 +81,7 @@ function selectLink(link) {
                    </div>
                  </div>
                  <Badge v-if="link.item?.comment" variant="secondary">
-                    <div class="w-24 truncate">
+                    <div class="max-w-24 truncate">
                      {{ link.item?.comment }}
                    </div>
                  </Badge>
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "sink",
  "type": "module",
-  "version": "0.1.6",
+  "version": "0.1.7",
  "private": true,
  "packageManager": "pnpm@9.7.1",
  "engines": {
@ -21,6 +21,7 @@
    "lint-staged": "lint-staged"
  },
  "dependencies": {
+    "@number-flow/vue": "^0.3.3",
    "@unovis/ts": "^1.4.4",
    "@unovis/vue": "^1.4.4",
    "@vee-validate/zod": "^4.13.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -8,6 +8,9 @@ importers:

  .:
    dependencies:
+      '@number-flow/vue':
+        specifier: ^0.3.3
+        version: 0.3.3(vue@3.4.38(typescript@5.4.5))
      '@unovis/ts':
        specifier: ^1.4.4
        version: 1.4.4
@ -1228,6 +1231,11 @@ packages:
    resolution: {integrity: sha512-54voNDBobGdMl3BUXSu7UaDh1P85PGHWlJ5e0XhPugo1JulOyCtp2I+5ri4wplGDJ8QGwPEQW7/x3yTLU7yF1A==}
    engines: {node: '>=16.14.0'}

+  '@number-flow/vue@0.3.3':
+    resolution: {integrity: sha512-yjuTRzwBUqh4rMZYSXG3/0Bv3YuLLUD3TIh7y7qXYCtorUyYP4/fPocVfrCh2TBlAu/jgci7BtvwC0IFnbNUtw==}
+    peerDependencies:
+      vue: ^3
+
  '@nuxt/devalue@2.0.2':
    resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}

@ -3245,6 +3253,9 @@ packages:
      jiti:
        optional: true

+  esm-env@1.2.1:
+    resolution: {integrity: sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==}
+
  espree@10.1.0:
    resolution: {integrity: sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@ -4265,6 +4276,9 @@ packages:
  nth-check@2.1.1:
    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}

+  number-flow@0.4.2:
+    resolution: {integrity: sha512-YLN73/m8BUU4r/6mq9zqLdpFKt3LSPPRectOECheA9jtNWF4PP8EIz0+Z1giqu/x9nS86KnKwwouLXXiqnjhQQ==}
+
  nuxi@3.12.0:
    resolution: {integrity: sha512-6vRdiXTw9SajEQOUi6Ze/XaIXzy1q/sD5UqHQSv3yqTu7Pot5S7fEihNXV8LpcgLz+9HzjVt70r7jYe7R99c2w==}
    engines: {node: ^16.10.0 || >=18.0.0}
@ -6800,6 +6814,12 @@ snapshots:
      '@nodelib/fs.scandir': 3.0.0
      fastq: 1.17.1

+  '@number-flow/vue@0.3.3(vue@3.4.38(typescript@5.4.5))':
+    dependencies:
+      esm-env: 1.2.1
+      number-flow: 0.4.2
+      vue: 3.4.38(typescript@5.4.5)
+
  '@nuxt/devalue@2.0.2': {}

  '@nuxt/devtools-kit@1.3.9(magicast@0.3.4)(rollup@4.18.0)(vite@5.4.1(@types/node@20.12.11)(terser@5.31.0))':
@ -9364,6 +9384,8 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  esm-env@1.2.1: {}
+
  espree@10.1.0:
    dependencies:
      acorn: 8.12.1
@ -10498,6 +10520,10 @@ snapshots:
    dependencies:
      boolbase: 1.0.0

+  number-flow@0.4.2:
+    dependencies:
+      esm-env: 1.2.1
+
  nuxi@3.12.0:
    optionalDependencies:
      fsevents: 2.3.3
--- a/server/api/link/search.get.ts
+++ b/server/api/link/search.get.ts
@ -14,7 +14,7 @@ export default eventHandler(async (event) => {
    while (true) {
      const { keys, list_complete, cursor } = await KV.list({
        prefix: `link:`,
-        limit: 1,
+        limit: 1000,
        cursor: finalCursor,
      })