1

package.json

@@ -38,6 +38,7 @@
     "typewriter-effect": "^2.21.0",
     "ua-parser-js": "^1.0.39",
     "vue": "^3.4.31",
+    "vue-blurhash": "^0.1.4",
     "vue-instantsearch": "^4.19.4",
     "vuetify": "^3.6.11"
   },

src/components/AppHeader.vue

@@ -22,6 +22,29 @@
           </v-list-item>
         </v-list>
       </v-menu>
+      <v-menu>
+        <template v-slot:activator="{ props }">
+          <v-btn icon="mdi-account-circle" v-bind="props"></v-btn>
+        </template><v-card v-if="isLogin == true" border style="padding: 10px;">
+        <v-card :title="userInfo.display_name" :subtitle="userInfo.username" :append-avatar="'https://s4-1.wuyuan.1r.ink/user/' + userInfo.avatar">
+
+</v-card>
+        <v-list>
+          <v-list-item :to="'/user/' + userInfo.userid"  prepend-icon="mdi-account" title="个人主页" rounded="xl"  color="primary">
+          </v-list-item>
+          <v-list-item :to="'/account'" prepend-icon="mdi-cog" title="账户设置" rounded="xl" color="primary">
+          </v-list-item>
+          <v-list-item :to="'/projects/my'" prepend-icon="mdi-xml" title="项目" rounded="xl" color="primary">
+          </v-list-item>
+          <v-list-item :to="'/projectlist'" prepend-icon="mdi-xml" title="列表" rounded="xl" color="primary">
+          </v-list-item></v-list><v-divider></v-divider><v-list>
+
+          <v-list-item :to="'/account/logout'" prepend-icon="mdi-logout" title="退出" color="error" active variant="plain"
+          rounded="xl">
+          </v-list-item>
+
+        </v-list></v-card>
+      </v-menu>
     </template>
   </v-app-bar>
   <v-navigation-drawer v-model="drawer">

src/components/Projects.vue

@@ -1,5 +1,4 @@
 <template>
-  <v-container>
     <v-progress-linear
       v-if="loading"
       indeterminate
@@ -29,7 +28,6 @@
       rounded="circle"
     ></v-pagination>
     <v-btn v-else @click="loadMore" color="primary">继续加载</v-btn>
-  </v-container>
 </template>
 
 <script>

src/pages/index.vue

@@ -23,7 +23,13 @@
     </v-app-bar>
 
     <v-main :min-height="$vuetify.display.mdAndUp ? 1000 : 550">
-      <v-container class="h-100 d-flex align-center justify-center">
+      <v-container class="h-100 d-flex align-center justify-center">  <blur-hash-image
+    width="400"
+    height="300"
+    hash="LdHfL}oJR$WBKnfi%3ofT0kCM{ay"
+    src="https://images.unsplash.com/photo-1545910684-8e7c081be9b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1867&q=80"
+    alt="green lawn grass during daytime"
+  />
         <div class="w-100 w-md-50 text-center">
           <v-chip
             border="thin opacity-25"
@@ -234,9 +240,9 @@ import $vuetify from "@/plugins/vuetify";
 import { localuser } from "../stores/user";
 import Typewriter from "../components/Typewriter.vue";
 import { useHead } from "@unhead/vue";
-
+import VueBlurHash from 'vue-blurhash'
 export default {
-  components: { Typewriter },
+  components: { Typewriter,VueBlurHash },
   setup() {
     useHead({});
   },