feat: add resources

anqzi · Jan 29, 2025 · 5107b63 · 5107b63
1 parent e0fd963
commit 5107b63
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/src/router.ts b/src/router.ts
@@ -4,6 +4,7 @@ import Layout from './ui/Layout.vue'
 import Settings from './ui/Settings.vue'
 import Explore from './ui/Explore.vue'
 import SignIn from './ui/SignIn.vue'
+import Resources from './ui/resources/index.vue'
 import { verify } from './api/user'
 
 async function auth() {
@@ -29,6 +30,12 @@ const routes: RouteRecordRaw[] = [
                 component: Home,
                 beforeEnter: auth
             },
+            {
+                name: 'resources',
+                path: 'resources',
+                component: Resources,
+                beforeEnter: auth
+            },
             {
                 name: 'settings',
                 path: 'settings',
@@ -53,4 +60,4 @@ const routes: RouteRecordRaw[] = [
 export default createRouter({
     history: createWebHistory(),
     routes
-})
+})
diff --git a/src/ui/resources/index.vue b/src/ui/resources/index.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import {GridIcon,ListIcon} from "lucide-vue-next"
+</script>
+
+<template>
+  <div>
+    <div>资源库</div>
+    <div class="flex items-center justify-center">
+      <div class="flex gap-8px border-1px p-4px rounded-4px">
+        <GridIcon class="cursor-pointer" :size="16" />
+        <ListIcon class="cursor-pointer" :size="16" />
+      </div>
+      <div class="ml-auto bg-green px-1em py-0.25em rounded-0.25em">上传</div>
+    </div>
+    <div class="mt-20px flex flex-wrap gap-x-8px gap-y-16px">
+      <div class="grow-1" v-for="index in 30" :key="index">
+        <img class="w-full rounded-8px" :src="`https://picsum.photos/200/120?r=${index}`" />
+        <div class="text-center">图片{{ index }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
diff --git a/src/ui/side-nav/index.vue b/src/ui/side-nav/index.vue
@@ -22,14 +22,19 @@ const activatedNames = computed(() => {
 const accessToken = useLocalStorage("access-token", () => {
     return localStorage.getItem("access-token")
 })
+
+const userInfo = useLocalStorage("user-info", () => {
+    return JSON.parse(localStorage.getItem("user-info") || "{}")
+})
 </script>
 
 <template>
     <!-- 侧边导航 -->
     <div class="pl-16px pr-32px">
         <div class="py-16px flex items-center">
-            <img class="w-48px h-48px border-2px rounded-1/2" src="https://picsum.photos/64/64" />
-            <div class="ml-8px">AI Memos</div>
+            <img v-if="userInfo.avator" class="w-48px h-48px border-2px rounded-1/2" src="https://picsum.photos/64/64" />
+            <div v-else class="w-48px h-48px border-2px rounded-1/2 text-1.5em font-600 flex items-center justify-center">M</div>
+            <div class="ml-8px">Memos</div>
         </div>
         <div class="flex flex-col gap-8px">
             <div v-if="accessToken !== null" @click="router.push('/')"
@@ -44,7 +49,8 @@ const accessToken = useLocalStorage("access-token", () => {
                 <TelescopeIcon :size="18" />
                 <div>探索</div>
             </div>
-            <div v-if="accessToken !== null"
+            <div @click="router.push('/resources')" v-if="accessToken !== null"
+                :class="{'bg-#ffffff border-1px shadow-[0_0_2px_0_#f0f0f0]': activatedNames.includes('resources') }"
                 class="flex items-center gap-4px rounded-16px px-16px py-8px cursor-pointer hover:(bg-#f0f0f0)">
                 <PackageOpenIcon :size="18" />
                 <div>资源库</div>
@@ -68,4 +74,4 @@ const accessToken = useLocalStorage("access-token", () => {
             </div>
         </div>
     </div>
-</template>
+</template>