From d0ca341d023ca26e572f021518d10ea9b5629629 Mon Sep 17 00:00:00 2001
From: SunWuyuan <1847261658@qq.com>
Date: Sun, 6 Oct 2024 15:51:52 +0800
Subject: [PATCH] 1

---
 src/components/AddTolist.vue      |  84 +++++-----
 src/components/Comment.vue        | 175 ++++++++++++++------
 src/components/NewProjectList.vue |  91 ++++++-----
 src/components/ProjectCard.vue    |  64 ++++----
 src/components/Projects.vue       | 252 +++++++++++++++--------------
 src/components/ProjectsCards.vue  |  57 ++++---
 src/components/TimeAgo.vue        |   5 +-
 src/pages/projectlist/index.vue   |  72 +++++----
 src/pages/projects/[id]/index.vue |  69 +++++---
 src/pages/user/[...id].vue        | 258 ++++++++++++++++++------------
 10 files changed, 673 insertions(+), 454 deletions(-)

diff --git a/src/components/AddTolist.vue b/src/components/AddTolist.vue
index 0158b22..4d2c778 100644
--- a/src/components/AddTolist.vue
+++ b/src/components/AddTolist.vue
@@ -1,29 +1,38 @@
 <template>
-    <v-list>
-      <div  v-for="item in lists" :key="item.id">
-      <v-list-item :append-icon="item.include == true ? 'mdi-minus-circle' : 'mdi-plus-circle'"
-        :active="item.include == true" color="primary"
-        @click="item.include == true ? ProjectlistDelete(item.id) : ProjectlistAdd(item.id)">
-
+  <v-list>
+    <div v-for="item in lists" :key="item.id">
+      <v-list-item
+        :append-icon="
+          item.include == true ? 'mdi-minus-circle' : 'mdi-plus-circle'
+        "
+        :active="item.include == true"
+        color="primary"
+        @click="
+          item.include == true
+            ? ProjectlistDelete(item.id)
+            : ProjectlistAdd(item.id)
+        "
+      >
         <v-list-item-title> {{ item.title }}</v-list-item-title>
         <v-list-item-subtitle>{{ item.description }}</v-list-item-subtitle>
-      </v-list-item></div>
-      <v-list-item @click="NewProjectListDialog = true">新建列表</v-list-item>
-    </v-list>
-
-
+      </v-list-item>
+    </div>
+    <v-list-item @click="NewProjectListDialog = true">新建列表</v-list-item>
+  </v-list>
 
   <v-dialog v-model="NewProjectListDialog">
-    <NewProjectList :listid="editlistid" :close="() => NewProjectListDialog = false" :callback="getProjectList">
+    <NewProjectList
+      :listid="editlistid"
+      :close="() => (NewProjectListDialog = false)"
+      :callback="getProjectList"
+    >
     </NewProjectList>
   </v-dialog>
-
-
 </template>
 <script>
-import NewProjectList from '@/components/NewProjectList.vue'
+import NewProjectList from "@/components/NewProjectList.vue";
 import { localuser } from "@/stores/user";
-import request from '../axios/axios'
+import request from "../axios/axios";
 export default {
   components: { NewProjectList },
 
@@ -33,31 +42,31 @@ export default {
       localuser: localuser,
       userinfo: localuser.user,
       NewProjectListDialog: false,
-      lists: [
-
-      ],
+      lists: [],
     };
   },
   methods: {
     async getProjectList() {
-      this.lists = (await request({
-        url: '/projectlist/check?projectid=' + this.$route.params.id,
-        data: {
-          userid: this.userinfo.id,
-          projectid: this.$route.params.id,
-        },
-        method: 'get',
-      })).data
+      this.lists = (
+        await request({
+          url: "/projectlist/check?projectid=" + this.$route.params.id,
+          data: {
+            userid: this.userinfo.id,
+            projectid: this.$route.params.id,
+          },
+          method: "get",
+        })
+      ).data;
     },
     async ProjectlistAdd(id) {
       await request({
-        url: '/projectlist/add',
+        url: "/projectlist/add",
         data: {
           userid: this.userinfo.id,
           projectid: this.$route.params.id,
           listid: id,
         },
-        method: 'post',
+        method: "post",
       }).then((res) => {
         this.$toast.add({
           severity: "info",
@@ -65,19 +74,18 @@ export default {
           detail: res.message,
           life: 3000,
         });
-        this.getProjectList()
-
-      })
+        this.getProjectList();
+      });
     },
     async ProjectlistDelete(id) {
       await request({
-        url: '/projectlist/delete',
+        url: "/projectlist/delete",
         data: {
           userid: this.userinfo.id,
           projectid: this.$route.params.id,
           listid: id,
         },
-        method: 'post',
+        method: "post",
       }).then((res) => {
         this.$toast.add({
           severity: "info",
@@ -85,11 +93,9 @@ export default {
           detail: res.message,
           life: 3000,
         });
-        this.getProjectList()
-
-      })
-
-    }
+        this.getProjectList();
+      });
+    },
   },
   mounted() {
     this.getProjectList();
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index f0e05af..7ac807c 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -1,17 +1,31 @@
 <template>
   <v-container>
-    <v-card class="mb-2" elevation hover v-for="comment in comments" :key="comment.id" @click="showMore(comment)">
+    <v-card
+      class="mb-2"
+      elevation
+      hover
+      v-for="comment in comments"
+      :key="comment.id"
+      @click="showMore(comment)"
+    >
       <v-card-item>
         <template v-slot:prepend>
           <v-avatar color="blue-darken-2">
-            <v-img :src="'https://s4-1.wuyuan.1r.ink/user/' +
-              users[comment.user_id].images
-              "></v-img>
+            <v-img
+              :src="
+                'https://s4-1.wuyuan.1r.ink/user/' +
+                users[comment.user_id].images
+              "
+            ></v-img>
           </v-avatar>
         </template>
         <template v-slot:append>
-          <v-btn icon="mdi-reply"> </v-btn><v-btn icon="mdi-delete" @click="deleteCommnet({ id: comment.id })"
-            v-if="comment.user_id == localuser.user.id">
+          <v-btn icon="mdi-reply"> </v-btn
+          ><v-btn
+            icon="mdi-delete"
+            @click="deleteCommnet({ id: comment.id })"
+            v-if="comment.user_id == localuser.user.id"
+          >
           </v-btn>
         </template>
         <v-card-title :to="'/user/' + comment.user_id">{{
@@ -30,14 +44,24 @@
         </v-card-subtitle>
       </v-card-item>
       <v-card-text>{{ comment.text }}</v-card-text>
-      <v-card class="pb-3 pl-10 pr-3" v-if="comment.children && comment.children.length">
+      <v-card
+        class="pb-3 pl-10 pr-3"
+        v-if="comment.children && comment.children.length"
+      >
         <v-list density="default">
-          <v-list-item v-for="children in comment.children.slice(0, 2)" :key="children.id" link
-            @click="showMore(comment)">
+          <v-list-item
+            v-for="children in comment.children.slice(0, 2)"
+            :key="children.id"
+            link
+            @click="showMore(comment)"
+          >
             <template v-slot:prepend>
-              <v-img :src="'https://s4-1.wuyuan.1r.ink/user/' +
-                users[children.user_id].images
-                "></v-img>
+              <v-img
+                :src="
+                  'https://s4-1.wuyuan.1r.ink/user/' +
+                  users[children.user_id].images
+                "
+              ></v-img>
             </template>
 
             <v-list-item-title>{{
@@ -46,8 +70,14 @@
             <v-list-item-subtitle>{{ children.text }}</v-list-item-subtitle>
           </v-list-item>
 
-          <v-list-item v-if="comment.children.length > 2" link @click="viewAllComments">
-            <v-list-item-title class="text-blue" @click="showMore(comment)">查看全部</v-list-item-title>
+          <v-list-item
+            v-if="comment.children.length > 2"
+            link
+            @click="viewAllComments"
+          >
+            <v-list-item-title class="text-blue" @click="showMore(comment)"
+              >查看全部</v-list-item-title
+            >
           </v-list-item>
         </v-list>
       </v-card>
@@ -57,28 +87,45 @@
     <v-btn @click="changesort">{{ sort }}</v-btn>
 
     <v-card class="mt-8 mb-8" elevation hover>
-      <v-card-title class="headline">为项目评论</v-card-title>
+      <v-card-title class="headline">为{{ name }}评论</v-card-title>
       <v-card-text>
         <v-form @submit.prevent>
-          <v-textarea v-model="comment" label="评论" dense auto-grow :rules="commentrules" required></v-textarea>
+          <v-textarea
+            v-model="comment"
+            label="评论"
+            dense
+            auto-grow
+            :rules="commentrules"
+            required
+          ></v-textarea>
           <v-btn color="primary" @click="addComment({ pid: null, rid: null })">
-            评论 </v-btn><v-btn variant="text">{{ info }}</v-btn></v-form>
+            评论 </v-btn
+          ><v-btn variant="text">{{ info }}</v-btn></v-form
+        >
       </v-card-text>
     </v-card>
 
-    <v-dialog v-model="moredialog" width="auto"><v-card><v-container>
+    <v-dialog v-model="moredialog" width="auto"
+      ><v-card
+        ><v-container>
           <v-card variant="tonal" class="mb-2" elevation hover>
             <v-card-item>
               <template v-slot:prepend>
                 <v-avatar color="blue-darken-2">
-                  <v-img :src="'https://s4-1.wuyuan.1r.ink/user/' +
-                    users[morecommnets.user_id].images
-                    "></v-img>
+                  <v-img
+                    :src="
+                      'https://s4-1.wuyuan.1r.ink/user/' +
+                      users[morecommnets.user_id].images
+                    "
+                  ></v-img>
                 </v-avatar>
               </template>
               <template v-slot:append>
-                <v-btn icon="mdi-delete" @click="deleteCommnet({ id: morecommnets.id })"
-                  v-if="morecommnets.user_id == localuser.user.id">
+                <v-btn
+                  icon="mdi-delete"
+                  @click="deleteCommnet({ id: morecommnets.id })"
+                  v-if="morecommnets.user_id == localuser.user.id"
+                >
                 </v-btn>
               </template>
               <v-card-title :to="'/user/' + morecommnets.user_id">{{
@@ -98,52 +145,85 @@
             </v-card-item>
             <v-card-text>{{ morecommnets.text }}</v-card-text>
           </v-card>
-          <v-card class="mb-2" v-for="comment in morecommnets.children" :key="comment.id" elevation hover>
+          <v-card
+            class="mb-2"
+            v-for="comment in morecommnets.children"
+            :key="comment.id"
+            elevation
+            hover
+          >
             <v-card-item>
               <template v-slot:prepend>
                 <v-avatar color="blue-darken-2">
-                  <v-img :src="'https://s4-1.wuyuan.1r.ink/user/' +
-                    users[comment.user_id].images
-                    "></v-img>
+                  <v-img
+                    :src="
+                      'https://s4-1.wuyuan.1r.ink/user/' +
+                      users[comment.user_id].images
+                    "
+                  ></v-img>
                 </v-avatar>
               </template>
               <template v-slot:append>
-                <v-btn icon="mdi-reply" @click="replyid = comment.id"> </v-btn><v-btn icon="mdi-delete"
-                  @click="deleteCommnet({ id: comment.id })" v-if="comment.user_id == localuser.user.id">
+                <v-btn icon="mdi-reply" @click="replyid = comment.id"> </v-btn
+                ><v-btn
+                  icon="mdi-delete"
+                  @click="deleteCommnet({ id: comment.id })"
+                  v-if="comment.user_id == localuser.user.id"
+                >
                 </v-btn>
               </template>
               <v-card-title :to="'/user/' + comment.user_id">{{
                 users[comment.user_id].display_name
               }}</v-card-title>
 
-              <v-card-subtitle><TimeAgo :date="comment.insertedAt" /> - ({{
+              <v-card-subtitle
+                ><TimeAgo :date="comment.insertedAt" /> - ({{
                   UAParser(comment.user_ua).browser.name
                 }}
                 -
                 {{
                   UAParser(comment.user_ua).os.name +
                   UAParser(comment.user_ua).os.version
-                }}) - {{ comment.insertedAt }}</v-card-subtitle>
+                }}) - {{ comment.insertedAt }}</v-card-subtitle
+              >
             </v-card-item>
             <v-card-text>{{ comment.text }}</v-card-text>
           </v-card>
 
           <v-card class="mt-4" elevation hover>
-            <v-card-title class="headline">回复评论{{ replyid
-              }}<v-btn @click="replyid = null" v-if="replyid != null">取消</v-btn></v-card-title>
+            <v-card-title class="headline"
+              >回复评论{{ replyid
+              }}<v-btn @click="replyid = null" v-if="replyid != null"
+                >取消</v-btn
+              ></v-card-title
+            >
             <v-card-text>
               <v-form @submit.prevent>
-                <v-textarea v-model="comment" label="评论" dense auto-grow :rules="commentrules" required></v-textarea>
-                <v-btn color="primary" @click="
-                  addComment({
-                    pid: replyid,
-                    rid: morecommnets.id,
-                    commnet: comment,
-                  })
-                  ">
-                  评论 </v-btn><v-btn variant="text">{{ info }}</v-btn></v-form>
+                <v-textarea
+                  v-model="comment"
+                  label="评论"
+                  dense
+                  auto-grow
+                  :rules="commentrules"
+                  required
+                ></v-textarea>
+                <v-btn
+                  color="primary"
+                  @click="
+                    addComment({
+                      pid: replyid,
+                      rid: morecommnets.id,
+                      commnet: comment,
+                    })
+                  "
+                >
+                  评论 </v-btn
+                ><v-btn variant="text">{{ info }}</v-btn></v-form
+              >
             </v-card-text>
-          </v-card></v-container></v-card>
+          </v-card></v-container
+        ></v-card
+      >
     </v-dialog>
   </v-container>
 </template>
@@ -164,6 +244,10 @@ export default {
       type: String,
       required: true,
     },
+    name: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -203,8 +287,9 @@ export default {
       }
       // 获取评论列表
       request({
-        url: `/comment/api/comment?path=${this.url}&page=${this.page + 1
-          }&pageSize=${this.pageSize}&sortBy=${this.sorttext}`,
+        url: `/comment/api/comment?path=${this.url}&page=${
+          this.page + 1
+        }&pageSize=${this.pageSize}&sortBy=${this.sorttext}`,
 
         method: "get",
       }).then((res) => {
diff --git a/src/components/NewProjectList.vue b/src/components/NewProjectList.vue
index b14889b..f478783 100644
--- a/src/components/NewProjectList.vue
+++ b/src/components/NewProjectList.vue
@@ -1,28 +1,38 @@
 <template>
+  <v-card prepend-icon="mdi-xml" title="新建列表">
+    <v-card-text>
+      <v-row dense>
+        <v-col cols="12" md="12" sm="12">
+          <v-text-field
+            label="标题"
+            required
+            hint="将便于查找"
+            v-model="projectinfo.title"
+            disabled
+          ></v-text-field>
+        </v-col>
+      </v-row>
+    </v-card-text>
+    <v-divider></v-divider>
+    <v-card-actions>
+      <v-spacer></v-spacer>
 
+      <v-btn text="关闭" variant="plain" @click="close()"></v-btn>
 
-    <v-card prepend-icon="mdi-xml" title="新建列表">
-      <v-card-text>
-        <v-row dense>
-          <v-col cols="12" md="12" sm="12">
-            <v-text-field label="标题" required hint="将便于查找" v-model="projectinfo.title" disabled></v-text-field>
-          </v-col>
-        </v-row>
-
-      </v-card-text>
-      <v-divider></v-divider>
-      <v-card-actions>
-
-        <v-spacer></v-spacer>
-
-        <v-btn text="关闭" variant="plain" @click="close()"></v-btn>
-
-        <v-btn color="primary" text="创建" variant="tonal" @click="newProjectList();close()" :disabled="created"></v-btn>
-      </v-card-actions>
-    </v-card>
+      <v-btn
+        color="primary"
+        text="创建"
+        variant="tonal"
+        @click="
+          newProjectList();
+          close();
+        "
+        :disabled="created"
+      ></v-btn>
+    </v-card-actions>
+  </v-card>
 </template>
 
-
 <script>
 import openEdit from "../stores/openEdit";
 import request from "../axios/axios";
@@ -30,44 +40,49 @@ export default {
   data() {
     return {
       projectinfo: {
-        title: '新建项目列表',
+        title: "新建项目列表",
       },
       created: false,
       newid: 0,
       isVisible: false,
-      openEdit
+      openEdit,
     };
   },
   props: {
     callback: {
       type: Function,
       required: false, // 可以根据需要设置为 true
-    }, close: {
+    },
+    close: {
       type: Function,
       required: false, // 可以根据需要设置为 true
     },
   },
   methods: {
     show() {
-      this.projectinfo = {
-        title: '新建项目列表',
-      },
-        this.created = false
-      this.newid = 0
-      this.isVisible = true
+      (this.projectinfo = {
+        title: "新建项目列表",
+      }),
+        (this.created = false);
+      this.newid = 0;
+      this.isVisible = true;
     },
     async newProjectList() {
-      await request.post('/projectlist/', this.projectinfo).then((res) => {
-        console.log(res)
-        this.$toast.add({ severity: 'info', summary: 'info', detail: res, life: 3000 });
-        if (res.status == '1') {
+      await request.post("/projectlist/", this.projectinfo).then((res) => {
+        console.log(res);
+        this.$toast.add({
+          severity: "info",
+          summary: "info",
+          detail: res,
+          life: 3000,
+        });
+        if (res.status == "1") {
           //this.created = true
-          this.newid = res.id
-
+          this.newid = res.id;
         }
-      })
-      this.callback()
-    }
+      });
+      this.callback();
+    },
   },
 };
 </script>
diff --git a/src/components/ProjectCard.vue b/src/components/ProjectCard.vue
index ebf920b..540e0bd 100644
--- a/src/components/ProjectCard.vue
+++ b/src/components/ProjectCard.vue
@@ -1,24 +1,24 @@
 <template>
   <v-card rounded="lg">
-    <v-card :to="'/projects/' + info.id" style="aspect-ratio: 4/3;" rounded="lg">
+    <v-card :to="'/projects/' + info.id" style="aspect-ratio: 4/3" rounded="lg">
       <v-img
-                  :src="'https://s4-1.wuyuan.1r.ink/scratch_slt/' + info.id" class="align-end"
-                  lazy-src="../assets/43-lazyload.png" height="100%"
-                  gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)" cover>
-
-                  <v-card-item>
-                    <v-card-title>{{ info.title }} </v-card-title>
-                    <v-card-subtitle>{{ info.description }}    </v-card-subtitle>
-                  </v-card-item>
-                  <!--<v-card-text>
+        :src="'https://s4-1.wuyuan.1r.ink/scratch_slt/' + info.id"
+        class="align-end"
+        lazy-src="../assets/43-lazyload.png"
+        height="100%"
+        gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+        cover
+      >
+        <v-card-item>
+          <v-card-title>{{ info.title }} </v-card-title>
+          <v-card-subtitle>{{ info.description }} </v-card-subtitle>
+        </v-card-item>
+        <!--<v-card-text>
                     <v-chip size="small">{{ item.type }}</v-chip>
-                  </v-card-text>--> </v-img>
-                <!-- v-img 高度与 v-card-item 一致 -->
-
-
-
-              </v-card>
-
+                  </v-card-text>-->
+      </v-img>
+      <!-- v-img 高度与 v-card-item 一致 -->
+    </v-card>
 
     <!--<v-card flat :to="'/user/' + info.authorid">
 
@@ -36,7 +36,7 @@
 
       </v-card-item></v-card>-->
 
-    <v-card-actions v-if="actions" >
+    <v-card-actions v-if="actions">
       <div v-for="action in actions" :key="action.name">
         <v-btn @click="action.function(info.id, info)">{{ action.name }}</v-btn>
       </div>
@@ -48,43 +48,41 @@ export default {
   data() {
     return {
       tags: [],
-    }
+    };
   },
 
-
-  props:
-  {
+  props: {
     info: {
       type: Object,
-      default: ''
+      default: "",
     },
 
     user: {
       type: Object,
-      default: '{ "id": 1, "username": "yxhyh", "display_name": "已销号用户", "motto": "已销号用户", "images": "0ec4beb623e3bcdbe0f207c9804f0bc2" }'
+      default:
+        '{ "id": 1, "username": "yxhyh", "display_name": "已销号用户", "motto": "已销号用户", "images": "0ec4beb623e3bcdbe0f207c9804f0bc2" }',
     },
     actions: {
       type: Array,
       required: false,
-    }
+    },
   },
   watch: {
     info: {
       immediate: true,
       handler(newVal) {
         if (newVal.tags) {
-          this.tags = newVal.tags.split(',')
+          this.tags = newVal.tags.split(",");
         } else {
-          this.tags = []
+          this.tags = [];
         }
-      }
-    }
+      },
+    },
   },
   methods: {
     callFunction(action) {
       action(this.info.id, this.info);
-    }
-  }
-
-}
+    },
+  },
+};
 </script>
diff --git a/src/components/Projects.vue b/src/components/Projects.vue
index 3e866ad..849a15f 100644
--- a/src/components/Projects.vue
+++ b/src/components/Projects.vue
@@ -1,133 +1,149 @@
-<template><v-progress-linear :active="ProjectsLoading" height="4" indeterminate></v-progress-linear>
-    <div class="mb-2" v-if="showinfo == true || showinfo == 'true'">
-        <v-chip><v-icon icon="mdi-counter" start></v-icon>共{{
-            this.projectscount
-        }}个作品
-        </v-chip>
-        <v-chip><v-icon icon="mdi-clock" start></v-icon>本页加载用时{{
-            Math.abs(usetime / 1000)
-        }}秒
-        </v-chip>
-    </div>
-    <ProjectsCards :projects="projects" :actions='actions'></ProjectsCards>
+<template>
+  <v-progress-linear
+    :active="ProjectsLoading"
+    height="4"
+    indeterminate
+  ></v-progress-linear>
+  <div class="mb-2" v-if="showinfo == true || showinfo == 'true'">
+    <v-chip
+      ><v-icon icon="mdi-counter" start></v-icon>共{{
+        this.projectscount
+      }}个作品
+    </v-chip>
+    <v-chip
+      ><v-icon icon="mdi-clock" start></v-icon>本页加载用时{{
+        Math.abs(usetime / 1000)
+      }}秒
+    </v-chip>
+  </div>
+  <ProjectsCards :projects="projects" :actions="actions"></ProjectsCards>
 
-    <v-pagination v-model="curPage" :length="totalPage" rounded="circle" :v-model="curPage"
-        @update:model-value="onPageChange(curPage)" @input="onPageChange(curPage)"></v-pagination>
+  <v-pagination
+    v-model="curPage"
+    :length="totalPage"
+    rounded="circle"
+    :v-model="curPage"
+    @update:model-value="onPageChange(curPage)"
+    @input="onPageChange(curPage)"
+  ></v-pagination>
 </template>
 
 <script>
 import request from "../axios/axios";
 import ProjectsCards from "./ProjectsCards.vue";
 export default {
-    components: { ProjectsCards },
-    props: {
-        authorid: {
-            type: String,
-            default: "",
-        },
-        title: {
-            type: String,
-            default: "",
-        },
-        type: {
-            type: String,
-            default: "",
-        },
-        description: {
-            type: String,
-            default: "",
-        },
-        order: {
-            type: String,
-            default: "view_down",
-        },
-        source: {
-            type: String,
-            default: "",
-        },
-        state: {
-            type: String,
-            default: "",
-        },
-        tag: {
-            type: String,
-            default: '',
-        },
-        showinfo: {
-            type: String,
-            default: false,
-        },
-        actions: {
-            type: Array,
-            required: false
-        }
+  components: { ProjectsCards },
+  props: {
+    authorid: {
+      type: String,
+      default: "",
     },
-
-    data() {
-        return {
-            ProjectsLoading: false,
-            projects: [],
-            curPage: 1,
-            totalPage: 1,
-            limit: 20,
-            typeitems: { all: "", scratch: "scratch", python: "python" },
-            usetime: 0,
-            projectscount: 0,
-            search: {
-                title: "",
-                type: "",
-                description: "",
-                source: "",
-                order: { name: "观看量升序", type: "view_up" },
-                authorid: "",
-                type: { name: "所有", type: "" },
-                typeitems: [
-                    { name: "所有", type: "" },
-                    { name: "Scratch", type: "scratch" },
-                    { name: "Python", type: "python" },
-                ],
-                orderitems: [
-                    { name: "观看量升序", type: "view_up" },
-                    { name: "观看量降序", type: "view_down" },
-                    { name: "时间升序", type: "time_up" },
-                    { name: "时间降序", type: "time_down" },
-                    { name: "序号升序", type: "id_up" },
-                    { name: "序号降序", type: "id_down" },
-                ],
-                state: ''
-            },
-        };
+    title: {
+      type: String,
+      default: "",
     },
-    async created() {
-        await this.getprojects();
-
+    type: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+    order: {
+      type: String,
+      default: "view_down",
+    },
+    source: {
+      type: String,
+      default: "",
+    },
+    state: {
+      type: String,
+      default: "",
+    },
+    tag: {
+      type: String,
+      default: "",
+    },
+    showinfo: {
+      type: String,
+      default: false,
+    },
+    actions: {
+      type: Array,
+      required: false,
+    },
+  },
 
+  data() {
+    return {
+      ProjectsLoading: false,
+      projects: [],
+      curPage: 1,
+      totalPage: 1,
+      limit: 20,
+      typeitems: { all: "", scratch: "scratch", python: "python" },
+      usetime: 0,
+      projectscount: 0,
+      search: {
+        title: "",
+        type: "",
+        description: "",
+        source: "",
+        order: { name: "观看量升序", type: "view_up" },
+        authorid: "",
+        type: { name: "所有", type: "" },
+        typeitems: [
+          { name: "所有", type: "" },
+          { name: "Scratch", type: "scratch" },
+          { name: "Python", type: "python" },
+        ],
+        orderitems: [
+          { name: "观看量升序", type: "view_up" },
+          { name: "观看量降序", type: "view_down" },
+          { name: "时间升序", type: "time_up" },
+          { name: "时间降序", type: "time_down" },
+          { name: "序号升序", type: "id_up" },
+          { name: "序号降序", type: "id_down" },
+        ],
+        state: "",
+      },
+    };
+  },
+  async created() {
+    await this.getprojects();
+  },
+  methods: {
+    async getprojects() {
+      this.onPageChange(1);
     },
-    methods: {
-        async getprojects() {
-            this.onPageChange(1);
-        },
-        async onPageChange(page) {
-            this.usetime = Date.now();
-            this.ProjectsLoading = true
+    async onPageChange(page) {
+      this.usetime = Date.now();
+      this.ProjectsLoading = true;
 
-            this.projects = await request({
-                url: `/searchapi?search_userid=${this.authorid}&search_type=${this.type == "all" ? "" : this.type
-                    }&search_title=${this.title}&search_source=${this.source
-                    }&search_description=${this.description}&search_orderby=${this.order
-                    }&search_state=${this.state}&search_tag=${this.tag}&curr=${page}&limit=${this.limit}`,
-                method: "get",
-            });
-            this.totalPage = Math.ceil(
-                this.projects.totalCount[0].totalCount / this.limit
-            );
-            this.projectscount = this.projects.totalCount[0].totalCount;
-            this.curPage = page;
-            console.log(this.projects);
-            console.log(this.totalPage);
-            this.ProjectsLoading = false
-            this.usetime = Date.now() - this.usetime;
-        },
+      this.projects = await request({
+        url: `/searchapi?search_userid=${this.authorid}&search_type=${
+          this.type == "all" ? "" : this.type
+        }&search_title=${this.title}&search_source=${
+          this.source
+        }&search_description=${this.description}&search_orderby=${
+          this.order
+        }&search_state=${this.state}&search_tag=${
+          this.tag
+        }&curr=${page}&limit=${this.limit}`,
+        method: "get",
+      });
+      this.totalPage = Math.ceil(
+        this.projects.totalCount[0].totalCount / this.limit
+      );
+      this.projectscount = this.projects.totalCount[0].totalCount;
+      this.curPage = page;
+      console.log(this.projects);
+      console.log(this.totalPage);
+      this.ProjectsLoading = false;
+      this.usetime = Date.now() - this.usetime;
     },
+  },
 };
 </script>
diff --git a/src/components/ProjectsCards.vue b/src/components/ProjectsCards.vue
index d916b94..c367ade 100644
--- a/src/components/ProjectsCards.vue
+++ b/src/components/ProjectsCards.vue
@@ -1,27 +1,38 @@
 <template>
-          <v-row>
-        <v-col cols="12" xs="12" sm="6" md="4" lg="3" xl="2" xxl="2" v-for="info in projects.projects" :key="info">
-        <ProjectCard :info="info" :user="projects.users.find((u) => u.id === info.authorid)" :actions="actions"></ProjectCard>
-        </v-col></v-row>
-  </template>
+  <v-row>
+    <v-col
+      cols="12"
+      xs="12"
+      sm="6"
+      md="4"
+      lg="3"
+      xl="2"
+      xxl="2"
+      v-for="info in projects.projects"
+      :key="info"
+    >
+      <ProjectCard
+        :info="info"
+        :user="projects.users.find((u) => u.id === info.authorid)"
+        :actions="actions"
+      ></ProjectCard> </v-col
+  ></v-row>
+</template>
 
-  <script>
-  import ProjectCard from "./ProjectCard.vue";
-  export default {
-    components: { ProjectCard },
-
-
-    props: {
-        projects: {
-            type: Object,
-            default: 'text',
-        },
-        actions:{
-            type: Array,
-            required: false,
-        }
+<script>
+import ProjectCard from "./ProjectCard.vue";
+export default {
+  components: { ProjectCard },
 
+  props: {
+    projects: {
+      type: Object,
+      default: "text",
     },
-
-  };
-  </script>
+    actions: {
+      type: Array,
+      required: false,
+    },
+  },
+};
+</script>
diff --git a/src/components/TimeAgo.vue b/src/components/TimeAgo.vue
index c77b8c6..2a841f8 100644
--- a/src/components/TimeAgo.vue
+++ b/src/components/TimeAgo.vue
@@ -1,7 +1,6 @@
 <template>
-
-    <!-- 显示格式化的相对时间 -->
-    {{ timeAgo }}
+  <!-- 显示格式化的相对时间 -->
+  {{ timeAgo }}
 </template>
 
 <script>
diff --git a/src/pages/projectlist/index.vue b/src/pages/projectlist/index.vue
index 59eea71..70792f4 100644
--- a/src/pages/projectlist/index.vue
+++ b/src/pages/projectlist/index.vue
@@ -1,41 +1,57 @@
-<template> <v-container>
-    <h1>列表</h1><v-btn @click="NewProjectListDialog = true">创建</v-btn>
+<template>
+  <v-container>
+    <h1>列表</h1>
+    <v-btn @click="NewProjectListDialog = true">创建</v-btn><br /><br />
     <div v-for="item in lists" :key="item.id">
       <v-card>
         <v-card-item>
-          <v-card-title>{{ item.title }}<v-chip :color="item.state == 'private' ? 'primary' : 'green'">
-              {{ item.state == 'private' ? '私密' : '公开' }}
-            </v-chip></v-card-title>
+          <v-card-title
+            >{{ item.title
+            }}<v-chip :color="item.state == 'private' ? 'primary' : 'green'">
+              {{ item.state == "private" ? "私密" : "公开" }}
+            </v-chip></v-card-title
+          >
 
-          <v-card-subtitle>{{ item.createTime + '创建，' + item.updateTime + '更新' }}</v-card-subtitle>
+          <v-card-subtitle>{{
+            item.createTime + "创建，" + item.updateTime + "更新"
+          }}</v-card-subtitle>
         </v-card-item>
 
-        <v-card-text>
-          {{ item.description }} </v-card-text>
-        <v-card-actions><v-btn @click="editlistid = item.id; EditProjectListConfigDialog = true">编辑</v-btn><v-btn
-            :to="`/projectlist/+${item.id}`">打开</v-btn>
+        <v-card-text> {{ item.description }} </v-card-text>
+        <v-card-actions
+          ><v-btn
+            @click="
+              editlistid = item.id;
+              EditProjectListConfigDialog = true;
+            "
+            >编辑</v-btn
+          ><v-btn :to="`/projectlist/${item.id}`">打开</v-btn>
         </v-card-actions>
       </v-card>
       <br />
-
     </div>
   </v-container>
   <v-dialog v-model="EditProjectListConfigDialog">
-    <EditProjectListConfig :listid="editlistid" :close="() => EditProjectListConfigDialog = false"
-      :callback="getProjectList"></EditProjectListConfig>
-
-  </v-dialog> <v-dialog v-model="NewProjectListDialog">
-    <NewProjectList :listid="editlistid" :close="() => NewProjectListDialog = false" :callback="getProjectList">
+    <EditProjectListConfig
+      :listid="editlistid"
+      :close="() => (EditProjectListConfigDialog = false)"
+      :callback="getProjectList"
+    ></EditProjectListConfig>
+  </v-dialog>
+  <v-dialog v-model="NewProjectListDialog">
+    <NewProjectList
+      :listid="editlistid"
+      :close="() => (NewProjectListDialog = false)"
+      :callback="getProjectList"
+    >
     </NewProjectList>
-
   </v-dialog>
-
 </template>
 <script>
-import NewProjectList from '@/components/NewProjectList.vue'
-import EditProjectListConfig from '@/components/EditProjectListConfig.vue'
+import NewProjectList from "@/components/NewProjectList.vue";
+import EditProjectListConfig from "@/components/EditProjectListConfig.vue";
 import { localuser } from "@/stores/user";
-import request from '../../axios/axios'
+import request from "../../axios/axios";
 export default {
   components: { NewProjectList, EditProjectListConfig },
 
@@ -47,17 +63,17 @@ export default {
       editlistid: 0,
       EditProjectListConfigDialog: false,
       NewProjectListDialog: false,
-      lists: [
-
-      ],
+      lists: [],
     };
   },
   methods: {
     async getProjectList() {
-      this.lists = (await request({
-        url: '/projectlist/user/' + this.userinfo.userid,
-        method: 'get',
-      })).data
+      this.lists = (
+        await request({
+          url: "/projectlist/user/" + this.userinfo.userid,
+          method: "get",
+        })
+      ).data;
     },
   },
   mounted() {
diff --git a/src/pages/projects/[id]/index.vue b/src/pages/projects/[id]/index.vue
index a6e6fd2..0beccad 100644
--- a/src/pages/projects/[id]/index.vue
+++ b/src/pages/projects/[id]/index.vue
@@ -1,28 +1,44 @@
 <template>
   <v-container>
-    <v-row><v-col cols="8" md="8" lg="8" xl="8" sm="8" xs="8">
+    <v-row
+      ><v-col cols="8" md="8" lg="8" xl="8" sm="8" xs="8">
         <ProjectRunner :type="project.type" :id="project.id" />
-        <br/><Comment :url="'project-'+$route.params.id"></Comment>
+        <br /><Comment :url="'project-' + $route.params.id"></Comment>
       </v-col>
 
       <v-col cols="4">
-        <v-card hover><v-card-item>
+        <v-card hover
+          ><v-card-item>
             <v-card-title>{{ project.title }}</v-card-title>
             <v-card-subtitle>{{ project.description }}</v-card-subtitle>
           </v-card-item>
           <div class="px-4 d-flex ga-2 mb-2">
             <v-chip pill>
               <v-avatar start>
-                <v-img :src="'https://s4-1.wuyuan.1r.ink/user/' + project.author.images
-                  "></v-img> </v-avatar>{{ project.author.display_name }}</v-chip>
+                <v-img
+                  :src="
+                    'https://s4-1.wuyuan.1r.ink/user/' + project.author.images
+                  "
+                ></v-img> </v-avatar
+              >{{ project.author.display_name }}</v-chip
+            >
           </div>
           <div class="px-4 d-flex ga-2 mb-2">
-            <v-chip pill prepend-icon="mdi-eye">{{ project.view_count }}浏览</v-chip>
+            <v-chip pill prepend-icon="mdi-eye"
+              >{{ project.view_count }}浏览</v-chip
+            >
             <v-chip pill prepend-icon="mdi-clock">{{ project.time }}</v-chip>
           </div>
           <div class="px-4 d-flex ga-2 mb-2">
-            <v-chip pill prepend-icon="mdi-xml" v-if="project.state == 'public'">开源作品</v-chip>
-            <v-chip pill prepend-icon="mdi-xml" v-if="project.state == 'private'">私密作品</v-chip>
+            <v-chip pill prepend-icon="mdi-xml" v-if="project.state == 'public'"
+              >开源作品</v-chip
+            >
+            <v-chip
+              pill
+              prepend-icon="mdi-xml"
+              v-if="project.state == 'private'"
+              >私密作品</v-chip
+            >
 
             <v-chip pill prepend-icon="mdi-application">{{
               project.type
@@ -34,9 +50,15 @@
             </div>
           </div>
           <div class="px-4 d-flex ga-2 mb-2">
-            <v-btn @click="openEditor(project.id, project.type)" variant="text">打开创造页</v-btn>
-            <v-btn v-if="project.authorid != localuser.user.id" :to="'/projects/' + project.id + '/fork'"
-              variant="text">改编</v-btn>
+            <v-btn @click="openEditor(project.id, project.type)" variant="text"
+              >打开创造页</v-btn
+            >
+            <v-btn
+              v-if="project.authorid != localuser.user.id"
+              :to="'/projects/' + project.id + '/fork'"
+              variant="text"
+              >改编</v-btn
+            >
           </div>
 
           <div class="px-4">
@@ -44,9 +66,13 @@
               <v-card-item>
                 <template v-slot:prepend>
                   <v-avatar>
-                    <v-img :alt="project.author.display_name" :src="'https://s4-1.wuyuan.1r.ink/user/' +
-                      project.author.images
-                      "></v-img>
+                    <v-img
+                      :alt="project.author.display_name"
+                      :src="
+                        'https://s4-1.wuyuan.1r.ink/user/' +
+                        project.author.images
+                      "
+                    ></v-img>
                   </v-avatar>
                 </template>
                 <v-card-title class="text-white">
@@ -55,16 +81,16 @@
                 <v-card-subtitle class="text-white">
                   {{ project.author.motto }}
                 </v-card-subtitle>
-              </v-card-item></v-card>
+              </v-card-item></v-card
+            >
           </div>
 
           <br />
-        </v-card> <br/>    <v-card hover><AddTolist></AddTolist></v-card>
-
+        </v-card>
+        <br />
+        <v-card hover><AddTolist></AddTolist></v-card>
       </v-col>
     </v-row>
-
-    <div id="waline"></div>
   </v-container>
 </template>
 
@@ -72,9 +98,7 @@
 import openEditor from "../../../stores/openEdit";
 
 import request from "../../../axios/axios";
-import { init } from "@waline/client";
 import ProjectRunner from "../../../components/ProjectRunner.vue";
-import "@waline/client/style";
 import { localuser } from "@/stores/user";
 import AddTolist from "../../../components/AddTolist.vue";
 import Comment from "../../../components/Comment.vue";
@@ -101,8 +125,7 @@ export default {
           id: 1,
           display_name: "加载中",
           images: "加载中",
-        }
-
+        },
       },
       openEditor: openEditor,
       localuser: localuser,
diff --git a/src/pages/user/[...id].vue b/src/pages/user/[...id].vue
index e0dbd92..d687b06 100644
--- a/src/pages/user/[...id].vue
+++ b/src/pages/user/[...id].vue
@@ -1,115 +1,165 @@
 <template>
-    <v-container>
-        <div class="mb-2">
-
-            <v-card class="mx-auto" :disabled="UserCardLoading" :loading="UserCardLoading">
-                <template v-slot:prepend>
-
-
-                    <v-avatar class=" mb-2">
-                        <v-img :alt="userinfo.info.user.display_name"
-                            :src="'https://s4-1.wuyuan.1r.ink/user/' + userinfo.info.user.images"></v-img>
-                    </v-avatar>
-                </template>
-                <template v-slot:title>
-                    <span class="font-weight-black">{{ userinfo.info.user.display_name }}</span>
-                </template>
-                <template v-slot:loader="{ isActive }">
-                    <v-progress-linear :active="isActive" height="4" indeterminate></v-progress-linear>
-                </template>
-                <template v-slot:subtitle>
-                    <v-chip> <v-icon icon="mdi-account-circle" start></v-icon>
-
-                        ID:{{ userinfo.info.user.id }}
-                    </v-chip> <v-chip> <v-icon icon="mdi-clock" start></v-icon>
-
-                        {{ userinfo.info.user.regTime }}注册
-
-                    </v-chip> <v-chip> <v-icon icon="mdi-tag" start></v-icon>
-
-                        创作者</v-chip>
-                    <span class=""></span>
-                </template>
-
-                <v-card-text class="bg-surface-light pt-4">
-                    {{ userinfo.info.user.motto }} </v-card-text>
-            </v-card>
-        </div>
-        <Projects :authorid='userid' ref="Projects" showinfo='true'></Projects>
-
-
-        <div id="waline"></div>
-
-    </v-container>
+  <v-container>
+    <div class="mb-2">
+      <v-card
+        class="mx-auto"
+        :disabled="UserCardLoading"
+        :loading="UserCardLoading"
+      >
+        <template v-slot:prepend>
+          <v-avatar class="mb-2">
+            <v-img
+              :alt="userinfo.info.user.display_name"
+              :src="
+                'https://s4-1.wuyuan.1r.ink/user/' + userinfo.info.user.images
+              "
+            ></v-img>
+          </v-avatar>
+        </template>
+        <template v-slot:title>
+          <span class="font-weight-black">{{
+            userinfo.info.user.display_name
+          }}</span>
+        </template>
+        <template v-slot:loader="{ isActive }">
+          <v-progress-linear
+            :active="isActive"
+            height="4"
+            indeterminate
+          ></v-progress-linear>
+        </template>
+        <template v-slot:subtitle>
+          <v-chip>
+            <v-icon icon="mdi-account-circle" start></v-icon>
+
+            ID:{{ userinfo.info.user.id }}
+          </v-chip>
+          <v-chip>
+            <v-icon icon="mdi-clock" start></v-icon>
+
+            {{ userinfo.info.user.regTime }}注册
+          </v-chip>
+          <v-chip>
+            <v-icon icon="mdi-tag" start></v-icon>
+
+            创作者</v-chip
+          >
+          <span class=""></span>
+        </template>
+
+        <v-card-text class="bg-surface-light pt-4">
+          {{ userinfo.info.user.motto }}
+        </v-card-text>
+      </v-card>
+    </div>
+    <Projects :authorid="userid" ref="Projects" showinfo="true"></Projects>
+    <v-row>
+      <v-col
+        cols="12"
+        xs="12"
+        sm="6"
+        md="4"
+        lg="3"
+        xl="2"
+        xxl="2"
+        v-for="item in lists"
+        :key="item.id"
+      >
+        <v-card rounded="lg">
+          <v-card
+            :to="'/projectlist/' + item.id"
+            style="aspect-ratio: 4/3"
+            rounded="lg"
+          >
+            <v-img
+              class="align-end"
+              lazy-src="../../assets/43-lazyload.png"
+              height="100%"
+              gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+              cover
+            >
+              <v-card-item>
+                <v-card-title>{{ item.title }} </v-card-title>
+                <v-card-subtitle>{{ item.title }} </v-card-subtitle>
+              </v-card-item>
+              <!--<v-card-text>
+                    <v-chip size="small">{{ item.type }}</v-chip>
+                  </v-card-text>-->
+            </v-img>
+            <!-- v-img 高度与 v-card-item 一致 -->
+          </v-card>
+        </v-card>
+      </v-col></v-row
+    >
+    <Comment :url="'user-' + $route.params.id" name="用户"></Comment>
+  </v-container>
 </template>
 
 <script>
-import request from '../../axios/axios'
-import { init } from '@waline/client';
+import Comment from "../../components/Comment.vue";
+
+import request from "../../axios/axios";
 import Projects from "../../components/Projects.vue";
 
-import '@waline/client/style';
 export default {
-    components: { Projects },
-
-    data() {
-        return {
-            UserCardLoading: true,
-            userid: this.$route.params.id,
-            userinfo: { "status": "ok", "info": { "user": { "id": 0, "display_name": "加载中", "motto": "加载中", "images": "0ec4beb623e3bcdbe0f207c9804f0bc2", "regTime": "0000-00-00T00:00:00.000Z", "sex": 0, "username": "loading" }, "count": { "pythoncount": 0, "scratchcount": 0 } } }
-            ,
-            projects: [],
-            scratchcount: 0,
-            curPage: 1,
-            totalPage: 1,
-            limit: 20,
-
+  components: { Projects, Comment },
+
+  data() {
+    return {
+      UserCardLoading: true,
+      userid: this.$route.params.id,
+      userinfo: {
+        status: "ok",
+        info: {
+          user: {
+            id: 0,
+            display_name: "加载中",
+            motto: "加载中",
+            images: "0ec4beb623e3bcdbe0f207c9804f0bc2",
+            regTime: "0000-00-00T00:00:00.000Z",
+            sex: 0,
+            username: "loading",
+          },
+          count: { pythoncount: 0, scratchcount: 0 },
+        },
+      },
+      projects: [],
+      scratchcount: 0,
+      curPage: 1,
+      totalPage: 1,
+      limit: 20,
+      lists: [],
+    };
+  },
+
+  async created() {
+    await this.getuserinfo();
+    await this.getProjectList();
+  },
+  methods: {
+    async getuserinfo() {
+      if (
+        Number(this.$route.params.id) &&
+        Number(this.$route.params.id) !== 0
+      ) {
+        this.userinfo = await request({
+          url: "/api/getuserinfo?id=" + this.$route.params.id,
+          method: "get",
+        });
+        this.$refs.Projects.onPageChange(1);
 
-        }
+        this.UserCardLoading = false;
+        console.log(this.userinfo);
+      }
     },
-
-    async created() {
-
-        await this.getuserinfo()
-        init({
-            el: '#waline',
-            serverURL: 'https://zerocat-waline.190823.xyz',
-            path: 'user-' + this.$route.params.id || 'undefined',
-            copyright: false,
-            reaction: true,
-            pageview: true,
-            locale: {
-                reactionTitle: "这个作品怎么样？"
-            },
-            emoji: [
-                '//unpkg.com/@waline/emojis@1.1.0/weibo',
-                '//unpkg.com/@waline/emojis@1.1.0/bilibili',
-            ],
-            dark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
-        });
-        this.$message({
-	message: 'Hello',
-	color: 'success',
-})
+    async getProjectList() {
+      this.lists = (
+        await request({
+          url: `/projectlist/user/${this.userinfo.info.user.id}/public`,
+          method: "get",
+        })
+      ).data;
     },
-    methods: {
-
-
-        async getuserinfo() {
-
-            if (Number(this.$route.params.id) && Number(this.$route.params.id) !== 0) {
-                this.userinfo = await request({
-                    url: '/api/getuserinfo?id=' + this.$route.params.id,
-                    method: 'get',
-                })
-                this.$refs.Projects.onPageChange(1);
-
-                this.UserCardLoading = false
-                console.log(this.userinfo)
-            }
-        },
-    }
-}
-
-
+  },
+};
 </script>