首页增加搜索功能

src/components/header.vue

@@ -23,13 +23,50 @@
       <p>同时我们也提供自主提交开源库的收录(前提是在npm上发布的)</p>
     </cite>
 
-    <wc-input class="search" no-border placeholder="请输入开源库的名字~~" />
+    <wc-input
+      class="search"
+      no-border
+      placeholder="请输入开源库的名字~~"
+      clearable
+      v-model="input"
+      @submit="search"
+    />
   </div>
 </template>
 
 <script>
+import fetch from '@/lib/fetch'
+
 export default {
-  props: {}
+  data() {
+    return { input: '' }
+  },
+  methods: {
+    search() {
+      let id = this.input.trim()
+      if (id) {
+        fetch('/package/search/' + encodeURIComponent(id)).then(r => {
+          // let list = r.data.map(it => it.split('/'))
+          let dict = { versions: [], id }
+          let last = null
+          for (let it of r.data) {
+            let tmp = it.split('/')
+            if (tmp.length === 1) {
+              last = it
+              dict.versions.push(last)
+              dict[last] = []
+            } else {
+              dict[last].push(it)
+            }
+          }
+          console.log(dict)
+          this.$store.result = dict
+        })
+      } else {
+        this.$store.result = null
+      }
+    }
+  }
 }
 </script>
 

src/store.js

@@ -7,7 +7,8 @@ const store = reactive({
     1: '🕒待审核中',
     2: '✅正常',
     9: '🙅🏻拒绝收录'
-  }
+  },
+  result: null // 搜索结果
 })
 
 export default function (app) {

src/views/home.vue

@@ -1,6 +1,19 @@
 <template>
-  <main class="home">
+  <main class="home" @click="copy">
-    <dl class="card" v-for="it in libs" :key="it.name">
+    <dl class="card" v-if="$store.result">
+      <dt class="title">
+        {{ $store.result.id }} - v{{ $store.result.versions[0] }}
+      </dt>
+      <dd class="list">
+        <section
+          class="link"
+          v-for="f in $store.result[$store.result.versions[0]]"
+        >
+          //jscdn.ink/{{ $store.result.id }}/{{ f }}
+        </section>
+      </dd>
+    </dl>
+    <dl class="card" v-else v-for="it in libs" :key="it.name">
       <dt class="title">{{ it.name }} - v{{ it.version }}</dt>
       <dd class="list">
         <section class="link" v-for="f in it.files">
@@ -34,22 +47,6 @@ export default {
             'vue.runtime.global.prod.js'
           ]
         },
-        {
-          name: 'vue-router',
-          version: '4.1.6',
-          files: [
-            'vue-router.cjs',
-            'vue-router.cjs.js',
-            'vue-router.cjs.prod.js',
-            'vue-router.esm-browser.js',
-            'vue-router.esm-bundler.js',
-            'vue-router.global.js',
-            'vue-router.global.prod.js',
-            'vue-router.mjs',
-            'vue-router.node.mjs',
-            'vue-router.prod.cjs'
-          ]
-        },
         {
           name: '@bytedo/fetch',
           version: '2.1.1',
@@ -61,6 +58,15 @@ export default {
 
   mounted() {
     this.$store.searchShow = true
+  },
+
+  methods: {
+    copy(ev) {
+      if (ev.target.tagName === 'SECTION') {
+        navigator.clipboard.writeText(ev.target.textContent.trim())
+        layer.toast('复制成功', 'success')
+      }
+    }
   }
 }
 </script>
@@ -70,7 +76,7 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 16px;
+  padding: 16px 0 32px;
 
   .card {
     width: 1024px;