todo: 滚动功能

nuxt.config.ts

@@ -6,7 +6,8 @@ export default defineNuxtConfig({
     },
     modules: [
         '@vite-pwa/nuxt',
-        '@nuxt/ui'
+        '@nuxt/ui',
+        '@vueuse/nuxt'
     ],
     ui: {
         icons: ['simple-icons']

package-lock.json

@@ -11,6 +11,7 @@
         "@microsoft/fetch-event-source": "^2.0.1",
         "@nuxt/ui": "^2.16.0",
         "@vite-pwa/nuxt": "^0.7.0",
+        "@vueuse/nuxt": "^10.9.0",
         "highlight.js": "^11.9.0",
         "markdown-it": "^14.1.0",
         "nuxt": "^3.11.2",
@@ -3716,6 +3717,8 @@
     },
     "node_modules/@parcel/watcher-wasm/node_modules/napi-wasm": {
       "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/napi-wasm/-/napi-wasm-1.1.0.tgz",
+      "integrity": "sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==",
       "inBundle": true,
       "license": "MIT"
     },
@@ -5512,6 +5515,43 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@vueuse/nuxt": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/nuxt/-/nuxt-10.9.0.tgz",
+      "integrity": "sha512-nC4Efg28Q6E41fUD5R+zM9uT5c+NfaDzaJCpqaEV/qHj+/BNJmkDBK8POLIUsiVOY35d0oD/YxZ+eVizqWBZow==",
+      "dependencies": {
+        "@nuxt/kit": "^3.10.2",
+        "@vueuse/core": "10.9.0",
+        "@vueuse/metadata": "10.9.0",
+        "local-pkg": "^0.5.0",
+        "vue-demi": ">=0.14.7"
+      },
+      "peerDependencies": {
+        "nuxt": "^3.0.0"
+      }
+    },
+    "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vueuse/shared": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
@@ -17740,6 +17780,8 @@
       "dependencies": {
         "napi-wasm": {
           "version": "1.1.0",
+          "resolved": "https://registry.npmmirror.com/napi-wasm/-/napi-wasm-1.1.0.tgz",
+          "integrity": "sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==",
           "bundled": true
         }
       }
@@ -18910,6 +18952,26 @@
       "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
       "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA=="
     },
+    "@vueuse/nuxt": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/nuxt/-/nuxt-10.9.0.tgz",
+      "integrity": "sha512-nC4Efg28Q6E41fUD5R+zM9uT5c+NfaDzaJCpqaEV/qHj+/BNJmkDBK8POLIUsiVOY35d0oD/YxZ+eVizqWBZow==",
+      "requires": {
+        "@nuxt/kit": "^3.10.2",
+        "@vueuse/core": "10.9.0",
+        "@vueuse/metadata": "10.9.0",
+        "local-pkg": "^0.5.0",
+        "vue-demi": ">=0.14.7"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.7",
+          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.7.tgz",
+          "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+          "requires": {}
+        }
+      }
+    },
     "@vueuse/shared": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "@microsoft/fetch-event-source": "^2.0.1",
     "@nuxt/ui": "^2.16.0",
     "@vite-pwa/nuxt": "^0.7.0",
+    "@vueuse/nuxt": "^10.9.0",
     "highlight.js": "^11.9.0",
     "markdown-it": "^14.1.0",
     "nuxt": "^3.11.2",

pages/search/[id].vue

@@ -22,7 +22,7 @@
             </div>
             <UDivider />
         </header>
-        <div class="container max-w-screen-lg flex flex-col space-y-4 mb-4 p-6">
+        <div class="container max-w-screen-lg flex flex-col space-y-4 mb-4 p-6" id="scrollElement">
             <h1 class="text-3xl truncate">{{ state.query }}</h1>
             <section class="flex items-center gap-2">
                 <UIcon name="i-simple-icons-github" />
@@ -143,11 +143,11 @@
 const toast = useToast()
 const route = useRoute()
 const { fetchRequest } = useFetchRequest()
-const repos = getMockRepo();
-const initLoading = ref(true);
-const editIndex = ref(0);
+const repos = getMockRepo()
+const initLoading = ref(true)
+const editIndex = ref(0)
 // todo mock
-const repoItem = repos.find(item => route.query.repo === item.label);
+const repoItem = repos.find(item => route.query.repo === item.label)
 const state = reactive({
     query: route.query.query || '',
     repo: route.query.repo || '',
@@ -155,6 +155,11 @@ const state = reactive({
     branch: repoItem.branch,
     gitPath: repoItem.url
 })
+const scrollToView = () => {
+    const $target = document.querySelector('#scrollElement')
+    const height = $target.clientHeight
+    window.scrollTo(0, height, { behavior: 'smooth' })
+}
 const isEditTitle = ref(false)
 const titleRef = ref(null)
 const handleFocusTitle = () => {
@@ -256,6 +261,9 @@ const handleFormFetchData = (fetchData) => {
         let source = choices[0].message.content;
         storeSource = source.split('\n');
     }
+    nextTick(() => {
+        scrollToView();
+    })
 }
 const handleUpdateSource = () => {
     const index = editIndex.value;