更新

fite.config.js

@@ -25,11 +25,13 @@ 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',
+    'es.shim': '//jscdn.ink/es.shim/2.1.0/index.js',
+    vue: '//jscdn.ink/vue/latest/vue.esm-browser.prod.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'
+    fetch: '//jscdn.ink/@bytedo/fetch/latest/next.js',
+    '@bd/core': '//jscdn.ink/wkit/latest/index.js',
+    wkit: '//jscdn.ink/wkit/latest/index.js'
   }
 }

index.html

@@ -7,7 +7,7 @@
   <title>{{title}}</title>
   <meta name="keywords" content="{{keywords}}">
   <meta name="description" content="{{description}}">
-  <link rel="stylesheet" href="//jscdn.ink/@bytedo/wcui/1.0.12/css/reset-basic.css">
+  <link rel="stylesheet" href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css">
   <script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"></script>
   <script type="importmap">{{importmap}}</script>
 </head>

package.json

@@ -2,10 +2,10 @@
   "name": "jscdn.ink",
   "type": "module",
   "scripts": {
-    "start": "vue-live dev",
-    "build": "vue-live build"
+    "start": "fite dev",
+    "build": "fite build"
   },
   "devDependencies": {
-    "@bytedo/vue-live": "^0.1.4"
+    "fite": "^1.1.6"
   }
 }

src/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <Header />
+  <Header :searchInput="$store.searchInput" />
   <div class="main-body"><router-view /></div>
   <Footer />
 </template>
@@ -8,13 +8,29 @@
 import Header from './components/header.vue'
 import Footer from './components/footer.vue'
 
+import fetch from '@/lib/fetch.js'
+
 export default {
   components: { Header, Footer },
 
   mounted() {
     var user = localStorage.getItem('user')
+    var checked = sessionStorage.getItem('session_checked')
+
     if (user) {
+      if (checked) {
+        return (this.$store.user = JSON.parse(user))
+      }
+      fetch('/login/check')
+        .then(r => {
+          localStorage.setItem('token', r.data.token)
+          sessionStorage.setItem('session_checked', 1)
           this.$store.user = JSON.parse(user)
+        })
+        .catch(r => {
+          localStorage.removeItem('token')
+          localStorage.removeItem('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 dict = { versions: [], id }
+          let last = null
+          for (let it of r.data) {
+            let tmp = it.split('/')
+            let v = tmp.shift()
+            let n = tmp.join('/')
+            if (last === v) {
+              dict[last].push(n)
+            } else {
+              last = v
+              dict.versions.push(last)
+              dict[last] = [n]
+            }
+          }
+          this.$store.result = dict
+        })
+      } else {
+        this.$store.result = null
+      }
+    }
+  }
 }
 </script>
 

src/main.js

@@ -1,10 +1,15 @@
 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/button.js'
-import '//jscdn.ink/@bytedo/wcui/1.0.12/form/link.js'
-import '//jscdn.ink/@bytedo/wcui/1.0.12/layer/index.js'
+import 'es.shim'
+import '//jscdn.ink/@bd/ui/latest/form/input.js'
+import '//jscdn.ink/@bd/ui/latest/form/button.js'
+import '//jscdn.ink/@bd/ui/latest/form/checkbox.js'
+import '//jscdn.ink/@bd/ui/latest/form/switch.js'
+import '//jscdn.ink/@bd/ui/latest/form/link.js'
+import '//jscdn.ink/@bd/ui/latest/layer/index.js'
+// import 'http://127.0.0.1:8090/dist/layer/index.js'
+import '//jscdn.ink/@bd/ui/latest/pager/index.js'
+import '//jscdn.ink/@bytedo/wcui/1.0.12/form/dropdown.js'
 
 import App from './app.vue'
 

src/store.js

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

src/views/home.vue

@@ -1,10 +1,32 @@
 <template>
-  <main class="home">
-    <dl class="card" v-for="it in libs">
+  <main class="home" @click="copy">
+    <dl class="card noselect" 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/<b>{{ $store.result.id }}</b
+          >/<i>{{ version }}</i
+          >/<q>{{ f }}</q>
+        </section>
+      </dd>
+    </dl>
+    <dl class="card noselect" 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">
-          //jscdn.ink/{{ it.name }}/{{ it.version }}/{{ it.file }}
+        <section class="link" v-for="f in it.files">
+          //jscdn.ink/<b>{{ it.name }}</b
+          >/<i>{{ it.version }}</i
+          >/<q>{{ f }}</q>
         </section>
       </dd>
     </dl>
@@ -16,19 +38,62 @@ export default {
   data() {
     return {
       libs: [
-        { name: 'vue', version: '2.3.2', file: 'vue.esm-browser.js' },
         {
-          name: 'vue-router',
-          version: '4.1.2',
-          file: 'vue-router.esm-browser.js'
-        },
-        { name: '@bytedo/fetch', version: '2.1.2', file: 'index.js' }
+          name: 'vue',
+          version: '3.2.47',
+          files: [
+            'vue.cjs.js',
+            'vue.cjs.prod.js',
+            'vue.esm-browser.js',
+            'vue.esm-browser.prod.js',
+            'vue.esm-bundler.js',
+            'vue.global.js',
+            'vue.global.prod.js',
+            'vue.runtime.esm-browser.js',
+            'vue.runtime.esm-browser.prod.js',
+            'vue.runtime.esm-bundler.js',
+            'vue.runtime.global.js',
+            'vue.runtime.global.prod.js'
           ]
+        },
+        {
+          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
+    if (this.$route.query.name) {
+      this.$store.searchInput = this.$route.query.name
+    }
+  },
+
+  methods: {
+    copy(ev) {
+      let elem = ev.target
+      if (elem.tagName === 'SECTION' || elem.parentNode.tagName === 'SECTION') {
+        if (elem.parentNode.tagName === 'SECTION') {
+          elem = elem.parentNode
+        }
+        navigator.clipboard.writeText(elem.textContent.trim())
+        layer.toast('复制成功', 'success')
+      }
+    }
   }
 }
 </script>
@@ -38,7 +103,7 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 16px;
+  padding: 16px 0 32px;
 
   .card {
     width: 1024px;
@@ -57,9 +122,25 @@ export default {
     }
 
     .link {
+      padding: 0 6px;
+      border-radius: 4px;
       transition: background 0.1s ease;
+
+      b,
+      i,
+      q {
+        padding: 0 2px;
+      }
+      b {
+        color: var(--color-teal-1);
+      }
+      i {
+        color: var(--color-blue-1);
+      }
+      q {
+      }
       &:hover {
-        text-decoration: underline;
+        background: var(--color-plain-1);
       }
       &:active {
         background: var(--color-plain-a);

src/views/request.vue

@@ -6,16 +6,20 @@
         placeholder="请输入开源库的名字"
         @submit="search"
       />
-      <wc-switch v-model="onlyShowWaited" @input="search"
+
+      <wc-switch v-model="onlyShowWaited" @change="search"
         >只显示待审核</wc-switch
       >
       <wc-link type="info" @click="openDialog">
         没找到你想的库?点击申请收录
       </wc-link>
     </div>
+
     <wc-table class="list" :thead="thead">
       <wc-tr v-for="it of list" :key="it.id">
-        <wc-td align="center">{{ it.id }}</wc-td>
+        <wc-td align="center">
+          <router-link :to="'/?name=' + it.id">{{ it.id }}</router-link>
+        </wc-td>
         <wc-td align="center">{{ it.author }}</wc-td>
         <wc-td align="center">{{ it.latest || '-' }}</wc-td>
         <wc-td align="center">{{ it.latest ? it.sync_date : '-' }}</wc-td>
@@ -23,7 +27,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
@@ -35,13 +40,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
@@ -52,8 +57,9 @@
 
     <wc-pager
       class="pager"
-      layout="prev,pages,next"
+      layout="prev,pages,next,info"
       red
+      @page-changed="pageChanged"
       :total="total"
       :page="page"
     />
@@ -95,8 +101,6 @@
 
 <script>
 import '//jscdn.ink/@bytedo/wcui/1.0.12/table/index.js'
-import '//jscdn.ink/@bytedo/wcui/1.0.12/form/switch.js'
-import '//jscdn.ink/@bytedo/wcui/1.0.12/pager/index.js'
 import fetch from '@/lib/fetch.js'
 
 export default {
@@ -138,13 +142,25 @@ export default {
         this.$list = r.data.map(
           it => ((it.sync_date = new Date(it.sync_date).format('Y/m/d')), it)
         )
-        this.list = this.$list.filter(it =>
-          this.onlyShowWaited ? it.stat === 1 : true
-        )
-        this.total = this.list.length
+        this.fetchPage()
+        this.total = this.$list.length
       })
     },
 
+    fetchPage() {
+      let start = (this.page - 1) * 20
+      let end = start + 20
+      this.list = this.$list
+        .filter(it => (this.onlyShowWaited ? it.stat === 1 : true))
+        .slice(start, end)
+    },
+
+    pageChanged(ev) {
+      this.page = ev.data
+      console.log('<><><>', this.page)
+      this.fetchPage()
+    },
+
     search() {
       let filter = this.filter.trim()
       let onlyShowWaited = this.onlyShowWaited
@@ -329,6 +345,7 @@ export default {
 
 .request-form {
   width: 640px;
+  background: #fff;
 
   .title {
     display: flex;