优化交互; 构建工具改成fite

src/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <Header />
+  <Header :searchInput="$store.searchInput" />
   <div class="main-body"><router-view /></div>
   <Footer />
 </template>
@@ -13,6 +13,7 @@ export default {
 
   mounted() {
     var user = localStorage.getItem('user')
+
     if (user) {
       this.$store.user = JSON.parse(user)
     }

src/components/header.vue

@@ -23,13 +23,58 @@
       <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: '' }
+  },
+
+  watch: {
+    '$store.searchInput'(v) {
+      this.input = v
+      this.search()
+    }
+  },
+
+  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/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 
 import '//jscdn.ink/es.shim/2.1.0/index.js'
 import '//jscdn.ink/@bytedo/wcui/1.0.12/form/input.js'
+import '//jscdn.ink/@bytedo/wcui/1.0.12/form/dropdown.js'
 import '//jscdn.ink/@bytedo/wcui/1.0.12/form/button.js'
 import '//jscdn.ink/@bytedo/wcui/1.0.12/form/link.js'
 import '//jscdn.ink/@bytedo/wcui/1.0.12/layer/index.js'

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,24 @@
 <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="version">
+      <dt class="title">
+        {{ $store.result.id }} -
+        <wc-dropdown v-model="version">
+          <wc-option
+            v-for="v in $store.result.versions"
+            :key="v"
+            :value="v"
+            :label="v"
+          />
+        </wc-dropdown>
+      </dt>
+      <dd class="list">
+        <section class="link" v-for="f in $store.result[version]">
+          //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,34 +52,40 @@ 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',
           files: ['index.js', 'next.js']
         }
-      ]
+      ],
+      version: ''
+    }
+  },
+
+  watch: {
+    '$store.result'(val) {
+      if (val) {
+        this.version = val.versions[val.versions.length - 1]
+      } else {
+        this.version = ''
+      }
     }
   },
 
   mounted() {
     this.$store.searchShow = true
-    console.log(this.$route.query)
+    if (this.$route.query.name) {
+      this.$store.searchInput = this.$route.query.name
+    }
+  },
+
+  methods: {
+    copy(ev) {
+      if (ev.target.tagName === 'SECTION') {
+        navigator.clipboard.writeText(ev.target.textContent.trim())
+        layer.toast('复制成功', 'success')
+      }
+    }
   }
 }
 </script>
@@ -71,7 +95,7 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 16px;
+  padding: 16px 0 32px;
 
   .card {
     width: 1024px;

src/views/request.vue

@@ -25,7 +25,8 @@
         <wc-td>{{ it.remark || '-' }}</wc-td>
         <wc-td align="center">
           <wc-link
-            :disabled="loading || it.stat !== 2"
+            v-if="it.stat === 2"
+            :disabled="loading"
             @click="handlePackgae('sync', it.id)"
             type="info"
             >更新</wc-link
@@ -37,13 +38,13 @@
             >通过</wc-link
           >
           <wc-link
-            v-if="$store.user.admin"
+            v-if="$store.user.admin && it.stat !== 0"
             @click="handlePackgae('reject', it.id)"
             type="warning"
             >拒绝</wc-link
           >
           <wc-link
-            v-if="$store.user.admin"
+            v-if="$store.user.admin && it.stat !== 0"
             @click="handlePackgae('delete', it.id)"
             type="danger"
             >删除</wc-link

vue.live.js

@@ -26,10 +26,9 @@ export default {
   // 也可以在页面中直接引入完整的路径, 而不必须在这里声明
   imports: {
     vue: '//jscdn.ink/vue/3.2.47/vue.esm-browser.prod.js',
-    'vue-router': '//jscdn.ink/vue-router/4.1.6/vue-router.esm-browser.js',
+    'vue-router': '//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js',
     // 这个库被vue-router依赖, 可以注释掉vue-router代码中的 @vue/devtools-api 的引入
     // 以达到减少不必须的体积的效果
-    '@vue/devtools-api': '//jscdn.ink/@vue/devtools-api/6.5.0/esm/index.js',
     fetch: '//jscdn.ink/@bytedo/fetch/2.1.1/next.js'
   }
 }