diff --git a/frontend/src/components/List.vue b/frontend/src/components/List.vue
new file mode 100644
index 0000000..aefbe93
--- /dev/null
+++ b/frontend/src/components/List.vue
@@ -0,0 +1,79 @@
+<template>
+  <van-search v-model="search" placeholder="请输入搜索关键词" />
+
+  <van-back-top bottom="80" />
+
+
+  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" offset="100" @load="loadData">
+    <list-item-card v-for="item in items" :key="item" :item="item" :bought="bought" />
+  </van-list>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import ListItemCard from "@/components/ListItemCard.vue";
+import request from "@/utils/request";
+
+export default defineComponent({
+  props: {
+    bought: Boolean,
+  },
+  setup(props) {
+    const search = ref("");
+    const items = ref([]);
+    const loading = ref(false);
+    const finished = ref(false);
+    const pageLimit = ref(10);
+    const offset = ref("");
+
+    const loadData = () => {
+      // request /v1/medias
+      const data = {
+        offset: offset.value,
+        action: 0,
+        limit: pageLimit.value,
+        bought: props.bought,
+      };
+      console.log("loadData, data: ", data);
+
+      request
+        .post("/medias", data)
+        .then((res) => {
+          console.log("response: ", res);
+          if (res === undefined) {
+            console.error("response error with undefined");
+            return;
+          }
+
+          if (offset.value == "") {
+            items.value = res.data;
+          } else {
+            items.value = items.value.concat(res.data);
+          }
+          offset.value = res.data[res.data.length - 1].hash;
+          console.log("offset: ", offset.value);
+
+          if (res.data.length < pageLimit.value) {
+            console.log("finished");
+            finished.value = true;
+          }
+        })
+        .catch((err) => {
+          console.error("ERROR", err);
+        })
+        .finally(() => {
+          loading.value = false;
+          console.log("finally: ", loading.value, finished.value);
+        });
+    };
+
+    return {
+      search,
+      items,
+      loading,
+      finished,
+      loadData,
+    };
+  },
+});
+</script>
diff --git a/frontend/src/components/ListItemCard.vue b/frontend/src/components/ListItemCard.vue
index 02d682e..24e637e 100644
--- a/frontend/src/components/ListItemCard.vue
+++ b/frontend/src/components/ListItemCard.vue
@@ -1,30 +1,53 @@
 <template>
-  <van-card
-    v-for="item in list"
-    :key="item.Hash"
-    price="2.00"
-    desc="描述信息"
-    title="商品标题"
-    thumb="https://fastly.jsdelivr.net/van-listt/assets/ipad.jpeg"
-    lazy-load="true"
-    @click="play(item)"
-  >
+  <van-card :thumb="item.poster" @click="play(item)">
+    <template #title>
+      <div class="van-card__title" style="margin-bottom: 0.5em;">
+        <strong style="font-size: 1.5em">{{ item.title }}</strong>
+      </div>
+    </template>
+
+    <template #price v-if="!bought">
+      <div v-if="!item.bought">
+        <template v-if="item.discount == 100"> 价格：{{ item.price }} 点 </template>
+
+        <template v-else>
+          <del>{{ item.price }}</del>
+          <span>{{ (item.price * item.discount) / 100 }}</span>
+        </template>
+      </div>
+      <van-tag v-else type="success" size="large">已购买</van-tag>
+    </template>
+
     <template #tags>
       <van-space>
-        <van-tag plain type="primary">视频</van-tag>
-        <van-tag plain type="primary">音频</van-tag>
-        <van-tag plain type="primary">PDF</van-tag>
+        <van-tag v-for="resource in item.resources" plain type="primary">
+          <template v-if="resource == 'video'">视频</template>
+          <template v-if="resource == 'audio'">音频</template>
+        </van-tag>
       </van-space>
     </template>
   </van-card>
 </template>
 
-<script setup>
+<script>
 import { defineProps } from "vue";
-const props = defineProps({
-  list: {
-    type: Array,
-    required: true,
+import { useRouter } from "vue-router";
+
+
+export default defineComponent({
+  props: {
+    item: Object,
+    bought: Boolean,
   },
-});
+  setup(props) {
+    const router = useRouter();
+
+    const play = (item) => {
+      router.push({ name: "play", params: { hash: item.hash } });
+    };
+    return {
+      play,
+    };
+  },
+})
 </script>
diff --git a/frontend/src/views/TabView.vue b/frontend/src/views/TabView.vue
index e15792a..1fa9b8a 100644
--- a/frontend/src/views/TabView.vue
+++ b/frontend/src/views/TabView.vue
@@ -2,14 +2,23 @@
   <RouterView />
 
   <van-tabbar route v-model="active">
-    <van-tabbar-item replace name="home" icon="home-o" to="/tab/home">主页
+    <van-tabbar-item replace name="home" icon="home-o"
+      :to="{ name: 'tab.home', params: { tenant: route.params.tenant } }">主页
     </van-tabbar-item>
-    <van-tabbar-item replace name="bought" icon="like-o" to="/tab/bought">已购</van-tabbar-item>
-    <van-tabbar-item replace name="me" icon="contact-o" to="/tab/me">我</van-tabbar-item>
+    <van-tabbar-item replace name="bought" icon="like-o"
+      :to="{ name: 'tab.bought', params: { tenant: route.params.tenant } }">已购</van-tabbar-item>
+    <van-tabbar-item replace name="user" icon="contact-o"
+      :to="{ name: 'tab.user', params: { tenant: route.params.tenant } }">我</van-tabbar-item>
   </van-tabbar>
 </template>
 
 <script setup>
 import { RouterView } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 const active = ref("home");
+
+const router = useRouter();
+const route = useRoute();
+console.log("router: ", router.params);
+console.log("route: ", route.params);
 </script>
diff --git a/frontend/src/views/tabs/BoughtView.vue b/frontend/src/views/tabs/BoughtView.vue
index b239044..d3c93bc 100644
--- a/frontend/src/views/tabs/BoughtView.vue
+++ b/frontend/src/views/tabs/BoughtView.vue
@@ -1,3 +1,7 @@
 <template>
-  <h1>Bought</h1>
-</template>
\ No newline at end of file
+  <list :bought=true />
+</template>
+
+<script setup>
+import List from "@/components/List.vue";
+</script>
diff --git a/frontend/src/views/tabs/HomeView.vue b/frontend/src/views/tabs/HomeView.vue
index d8f03dd..82cad7a 100644
--- a/frontend/src/views/tabs/HomeView.vue
+++ b/frontend/src/views/tabs/HomeView.vue
@@ -1,105 +1,7 @@
 <template>
-  <van-search v-model="search" placeholder="请输入搜索关键词" />
-
-  <van-back-top bottom="80" />
-
-  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" offset="100" @load="loadData">
-    <van-card v-for="item in items" :key="item" :thumb="item.poster" @click="play(item)">
-      <template #title>
-        <div class="van-card__title" style="margin-bottom: 0.5em;">
-          <strong style="font-size: 1.5em">{{ item.title }}</strong>
-        </div>
-      </template>
-
-      <template #price v-if="!item.bought">
-        <template v-if="item.discount == 100"> 价格：{{ item.price }} 点 </template>
-
-        <template v-else>
-          <del>{{ item.price }}</del>
-          <span>{{ (item.price * item.discount) / 100 }}</span>
-        </template>
-      </template>
-
-      <template #price v-else>
-        <van-tag type="success" size="large">已购买</van-tag>
-      </template>
-
-
-      <template #tags>
-        <van-space>
-          <van-tag v-for="resource in item.resources" plain type="primary">
-            <template v-if="resource == 'video'">视频</template>
-            <template v-if="resource == 'audio'">音频</template>
-          </van-tag>
-        </van-space>
-      </template>
-    </van-card>
-  </van-list>
+  <list :bought=false />
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { useRouter } from "vue-router";
-import request from "@/utils/request";
-
-const router = useRouter();
-
-const search = ref("");
-const items = ref([]);
-const loading = ref(false);
-const finished = ref(false);
-const pageLimit = ref(10);
-
-const offset = ref("");
-
-const play = (item) => {
-  // vue router goto play view
-  console.log("play -", item);
-  router.push({ name: "play", params: { hash: item.hash } });
-};
-
-const loadData = () => {
-  // request /v1/medias
-  const data = {
-    offset: offset.value,
-    action: 0,
-    limit: pageLimit.value,
-  };
-  console.log("loadData, data: ", data);
-
-  request
-    .post("/medias", data)
-    .then((res) => {
-      console.log("response: ", res);
-      if (res === undefined) {
-        console.error("response error with undefined");
-        return;
-      }
-
-      if (offset.value == "") {
-        items.value = res.data;
-      } else {
-        items.value = items.value.concat(res.data);
-      }
-      offset.value = res.data[res.data.length - 1].hash;
-      console.log("offset: ", offset.value);
-
-      if (res.data.length < pageLimit.value) {
-        console.log("finished");
-        finished.value = true;
-      }
-    })
-    .catch((err) => {
-      console.error("ERROR", err);
-    })
-    .finally(() => {
-      loading.value = false;
-      console.log("finally: ", loading.value, finished.value);
-    });
-};
-
-onMounted(() => {
-  loadData();
-});
-
+import List from "@/components/List.vue";
 </script>