diff --git a/.prettierrc.yaml b/.prettierrc.yaml
index 8c33f1a..6734234 100644
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@@ -3,7 +3,7 @@ jsxBracketSameLine: true
 jsxSingleQuote: true
 semi: false
 singleQuote: true
-printWidth: 100
+printWidth: 80
 useTabs: false
 tabWidth: 2
 trailingComma: none
diff --git a/src/main.js b/src/main.js
index 7cd6487..162ab45 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,7 @@ import store from './store'
 
 import '//jscdn.ink/@bytedo/wcui/dist/form/input.js'
 import '//jscdn.ink/@bytedo/wcui/dist/form/button.js'
+import '//jscdn.ink/@bytedo/wcui/dist/form/link.js'
 import '//jscdn.ink/@bytedo/wcui/dist/layer/index.js'
 
 const app = createApp(App)
diff --git a/src/store.js b/src/store.js
index c96d5e2..9b79883 100644
--- a/src/store.js
+++ b/src/store.js
@@ -3,10 +3,10 @@ import { reactive } from 'vue'
 const store = reactive({
   user: {},
   stats: {
-    0: '已删除',
-    1: '待审核中',
-    2: '正常收录',
-    9: '拒绝收录'
+    0: '❌已删除',
+    1: '🕒待审核中',
+    2: '✅正常',
+    9: '🙅🏻拒绝收录'
   }
 })
 
diff --git a/src/views/request.vue b/src/views/request.vue
index 028afbc..7a7bd86 100644
--- a/src/views/request.vue
+++ b/src/views/request.vue
@@ -1,45 +1,327 @@
+<template>
+  <main class="packages">
+    <div class="toolbar">
+      <wc-input
+        v-model="filter"
+        placeholder="请输入开源库的名字"
+        @submit="search"
+      />
+      <wc-switch v-model="onlyShowWaited" @input="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">{{ it.author }}</wc-td>
+        <wc-td>{{ it.description }}</wc-td>
+        <wc-td>{{ it.sync_date }}</wc-td>
+        <wc-td align="center">{{ $store.stats[it.stat] }}</wc-td>
+        <wc-td>{{ it.remark }}</wc-td>
+        <wc-td v-if="$store.user.admin" align="center">
+          <wc-link @click="handlePackgae('sync', it.id)" type="info"
+            >通过</wc-link
+          >
+          <wc-link @click="handlePackgae('reject', it.id)" type="warning"
+            >拒绝</wc-link
+          >
+          <wc-link @click="handlePackgae('delete', it.id)" type="danger"
+            >删除</wc-link
+          >
+        </wc-td>
+      </wc-tr>
+    </wc-table>
+
+    <wc-pager
+      class="pager"
+      layout="prev,pages,next"
+      red
+      :total="total"
+      :page="page"
+    />
+  </main>
+
+  <wc-layer ref="form" mask mask-close>
+    <div class="request-form">
+      <header class="title">申请收录开源库</header>
+      <content class="content">
+        <section class="field">
+          <span class="label">开源库名称:</span>
+          <wc-input v-model="lib.name" @input="autoUpdateInfo" />
+        </section>
+        <section class="field">
+          <span class="label">作者:</span>
+          <span class="value">{{ lib.author }}</span>
+        </section>
+        <section class="field">
+          <span class="label">简介:</span>
+          <span class="value">{{ lib.description }}</span>
+        </section>
+        <section class="field">
+          <span class="label">最新版本:</span>
+          <span class="value">{{ lib.latest }}</span>
+        </section>
+        <section class="field center">
+          <wc-button
+            type="danger"
+            :disabled="disabled"
+            :loading="loading"
+            @click="submit"
+            >提交申请</wc-button
+          >
+        </section>
+      </content>
+    </div>
+  </wc-layer>
+</template>
+
 <script>
+import '//unpkg.com/@bytedo/wcui/dist/table/index.js'
+import '//unpkg.com/@bytedo/wcui/dist/form/switch.js'
+import '//unpkg.com/@bytedo/wcui/dist/pager/index.js'
 import fetch from '@/lib/fetch.js'
 
 export default {
   data() {
     return {
       content: '这是关于我们页面',
-      list: []
+      list: [],
+      thead: JSON.stringify([
+        '开源库',
+        '作者',
+        '介绍',
+        '最后同步日期',
+        '收录状态',
+        '备注'
+      ]),
+      page: 1,
+      total: 0,
+      filter: '',
+      onlyShowWaited: false,
+      loading: false,
+      disabled: true,
+      lib: {
+        name: '',
+        author: '-',
+        description: '-',
+        latest: '-'
+      }
     }
   },
   mounted() {
     this.$store.searchShow = false
 
-    fetch('/package/list').then(r => {
-      console.log(r)
-      this.list = r.data
-    })
+    if (this.$store.user.admin) {
+      this.thead = JSON.stringify([
+        '开源库',
+        '作者',
+        '介绍',
+        '最后同步日期',
+        '收录状态',
+        '备注',
+        '操作'
+      ])
+    }
+
+    this.fetchList()
+  },
+  methods: {
+    fetchList() {
+      fetch('/package/list').then(r => {
+        this.$list = r.data
+        this.list = r.data.filter(it =>
+          this.onlyShowWaited ? it.stat === 1 : true
+        )
+        this.total = this.list.length
+      })
+    },
+
+    search() {
+      let filter = this.filter.trim()
+      let onlyShowWaited = this.onlyShowWaited
+
+      if (filter) {
+        this.list = this.$list.filter(
+          it =>
+            it.id.indexOf(filter) > -1 &&
+            (onlyShowWaited ? it.stat === 1 : true)
+        )
+      } else {
+        this.list = this.$list.filter(it =>
+          onlyShowWaited ? it.stat === 1 : true
+        )
+      }
+      this.total = this.list.length
+    },
+
+    openDialog() {
+      this.$refs.form.show()
+    },
+
+    resetForm(force) {
+      force && (this.lib.name = '')
+      this.lib.author = '-'
+      this.lib.description = '-'
+      this.lib.latest = '-'
+      this.disabled = true
+    },
+
+    autoUpdateInfo() {
+      let name = this.lib.name.trim()
+      clearTimeout(this.$timer)
+      if (name) {
+        if (name.startsWith('@') && name.indexOf('/') === -1) {
+          return
+        }
+
+        this.$timer = setTimeout(_ => {
+          this.getPackageInfo(name)
+        }, 800)
+      }
+    },
+
+    getPackageInfo(name) {
+      return fetch('https://registry.npmmirror.com/' + name)
+        .then(r => {
+          let author = r.author
+            ? r.author.name
+            : r.maintainers
+            ? r.maintainers[0].name
+            : 'unknow'
+
+          this.lib.author = author
+          this.lib.description = r.description
+          this.lib.latest = r['dist-tags'].latest
+
+          this.disabled = false
+          return {
+            author,
+            description: r.description,
+            latest: r['dist-tags'].latest
+          }
+        })
+        .catch(_ => {
+          this.resetForm()
+          layer.toast(
+            `开源库【${name}】在npm上找不到, 请确认名称是否正确`,
+            'error'
+          )
+        })
+    },
+
+    uploadPackge(body) {
+      fetch('/package/upload', { method: 'post', body })
+        .then(r => {
+          layer.toast('提交成功,等待审核', 'success')
+          this.resetForm(true)
+          this.fetchList()
+          this.$refs.form.close()
+        })
+        .catch(e => {
+          layer.toast(e.msg, 'error')
+        })
+    },
+
+    submit() {
+      let name = this.lib.name.trim()
+      if (name) {
+        if (name.startsWith('@') && name.indexOf('/') === -1) {
+          return
+        }
+        this.loading = true
+        this.getPackageInfo(name)
+          .then(({ author, description, latest }) => {
+            //
+            this.uploadPackge({ name, author, description, latest })
+          })
+
+          .finally(_ => (this.loading = false))
+      } else {
+        layer.toast(`请填写正确的名称`, 'warning')
+      }
+    },
+
+    handlePackgae(act, id) {
+      fetch(`/package/${act}/${encodeURIComponent(id)}`)
+        .then(r => {
+          layer.toast('操作成功', 'success')
+          this.fetchList()
+        })
+        .catch(r => {
+          layer.toast(r.msg, 'error')
+        })
+    }
   }
 }
 </script>
 
-<template>
-  <main>
-    <table>
-      <thead>
-        <tr>
-          <th>开源库</th>
-          <th>作者</th>
-          <th>介绍</th>
-          <th>最后同步日期</th>
-          <th>收录状态</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="it of list" :key="it.id">
-          <td>{{ it.id }}</td>
-          <td>{{ it.author }}</td>
-          <td>{{ it.description }}</td>
-          <td>{{ it.sync_date }}</td>
-          <td>{{ $store.stats[it.stat] }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </main>
-</template>
+<style lang="scss" scoped>
+.packages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 16px;
+
+  .toolbar,
+  .list {
+    width: 1024px;
+  }
+
+  .toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 16px 0;
+
+    wc-input {
+      width: 480px;
+    }
+    wc-link {
+      height: 20px;
+    }
+  }
+
+  .pager {
+    margin-top: 16px;
+  }
+}
+
+.request-form {
+  width: 640px;
+
+  .title {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    padding: 0 16px;
+    font-size: 20px;
+    color: var(--color-grey-3);
+  }
+
+  .content {
+    padding: 16px 16px 32px;
+
+    .field {
+      display: flex;
+      align-items: center;
+      margin-top: 12px;
+
+      &.center {
+        margin-top: 16px;
+        justify-content: center;
+      }
+
+      .label {
+        width: 120px;
+      }
+      wc-input,
+      .value {
+        flex: 1;
+      }
+    }
+  }
+}
+</style>