Tue May 9 14:52:00 UTC 2023 inscode

src/components/nav/index.vue

@@ -33,6 +33,7 @@
       console.log(value);
       store.sigin(userModalConfig);
       vibisible.value = false;
+      userStatus.value = store.isRejecter();
     } catch (error) {
       console.log(error);
     }
@@ -62,7 +63,7 @@
           <a-col :span="5" v-if="width > 750">
             <a-row :gutter="5">
               <a-col :span="18" class="nav-right">
-                <a-input-search :value="width"></a-input-search>
+                <a-input-search></a-input-search>
               </a-col>
               <a-col :span="5">
                 <a-dropdown>

src/router/index.js

@@ -21,6 +21,11 @@ const router = createRouter({
       path: '/newArticle',
       name:'newArticle',
       component: () => import('../views/NewArticle.vue')
+    },
+    {
+      path: '/detailsArticle',
+      name:'detailsArticle',
+      component: () => import('../views/DetailsArticle.vue')
     }
   ]
 })

src/stores/article.js

@@ -4,29 +4,39 @@ import { getStorage, setStorage } from '@/utils/storage'
 
 export const useArticleStore = defineStore('article', () => {
     const articles = reactive([])
-    const setArticle = (id, data) => {
-        let atc = getArticle(id)
-        if (atc) {
-            atc = data
-        } else {
-            articles.push(data)
+    const addAtricle = (data) => {
+        const atc = getAllArticle()
+        if (!atc) {
+            articles.unshift(data)
             console.log(articles);
-            setStorage('article', articles)
+            setStorage('article', articles) 
+        } else{
+            console.log(atc)
+            atc.unshift(data)
+            setStorage('article', atc)
         }
     }
-    const getArticle = (id) => {
-        const atc = getAllArticle() ?? false
-        if (atc) {
-            return atc.filter(item => item.id === id)
+    const setArticle = (id, data) => {
+        let atcs = getAllArticle() ?? false
+        if (atcs) {
+            atcs.forEach(item => {
+                if(item.id == id) {
+                    console.log(item)
+                    item.comment.unshift(data)
+                }
+            })
+            console.log(atcs)
+            setStorage('article', atcs)
         }
     }
+
     const getAllArticle = () => {
         return getStorage('article')
     }
     return {
         articles,
+        addAtricle,
         setArticle,
-        getArticle,
         getAllArticle,
     }
 })
\ No newline at end of file

src/utils/mockData.js

 export const mockData = [
     {
         id: '01',
-        username: 'admin',
+        username: 'justin',
         date: new Date().toLocaleString(),
         content: {
             title: '震惊！原来日记可以唱出来',
             abstract: '11月20日零点，北京，小雨，心情好平静，今天做了很多事情，回到家里有点烦心',
-            article: '',
-        }
+            article: '，今天做了很多事情，回到家里有点烦心',
+        },
+        comment: [
+            {
+                author: 'test',
+                content: '哈哈',
+                datetime: '2023/5/8 18:41:39',
+            }
+        ],
     },
     {
         id: '02',
-        username: 'admin',
+        username: 'lolita',
         date: new Date().toLocaleString(),
         content: {
-            title: '震惊！原来日记可以唱出来',
-            abstract: '11月20日零点，北京，小雨，心情好平静，今天做了很多事情，回到家里有点烦心',
-            article: '',
-        }
+            title: '忘不掉的是回忆嘛？',
+            abstract: '我多想忘掉回忆的坐标，但现实却是多么可笑，我们是从初次遇见不如不见到好久再见',
+            article: '我多想忘掉回忆的坐标，但现实却是多么可笑，我们是从初次遇见不如不见到好久再见',
+        },
+        comment: []
     },
     {
         id: '03',
-        username: 'admin',
+        username: 'angle',
         date: new Date().toLocaleString(),
         content: {
-            title: '震惊！原来日记可以唱出来',
-            abstract: '11月20日零点，北京，小雨，心情好平静，今天做了很多事情，回到家里有点烦心',
-            article: '',
-        }
+            title: '我爱你iloveyou',
+            abstract: '我以为我不会比今天更爱你了，但是我昨天也是这么想的，随时间流走在回忆里遨游',
+            article: '我以为我不会比今天更爱你了，但是我昨天也是这么想的，随时间流走在回忆里遨游',
+        },
+        comment: []
     },
     {
         id: '04',
-        username: 'admin',
+        username: 'toms',
         date: new Date().toLocaleString(),
         content: {
-            title: '震惊！原来日记可以唱出来',
-            abstract: '11月20日零点，北京，小雨，心情好平静，今天做了很多事情，回到家里有点烦心',
-            article: '',
-        }
+            title: '原来这才是爱情',
+            abstract: '如果你并不期待，那么我翻山越岭将毫无意义，细节是双向的，爱情是相互的',
+            article: '如果你并不期待，那么我翻山越岭将毫无意义，细节是双向的，爱情是相互的',
+        },
+        comment: []
     },
     {
         id: '05',
-        username: 'admin',
+        username: 'john',
         date: new Date().toLocaleString(),
         content: {
-            title: '震惊！原来日记可以唱出来',
-            abstract: '11月20日零点，北京，小雨，心情好平静，今天做了很多事情，回到家里有点烦心',
-            article: '',
-        }
+            title: '青春的真谛',
+            abstract: '生活不得万分如意，现实不过千般磨砺，趁青春时可肆意，人海中，似有意，更似无意',
+            article: '生活不得万分如意，现实不过千般磨砺，趁青春时可肆意，人海中，似有意，更似无意',
+        },
+        comment: []
     },
 ]
\ No newline at end of file

src/views/DetailsArticle.vue

+<script setup>
+  import { useRouter, useRoute } from "vue-router";
+  import { useArticleStore } from "@/stores/article.js";
+  import { getStorage, setStorage } from "@/utils/storage";
+  import dayjs from "dayjs";
+  import {
+    LikeFilled,
+    LikeOutlined,
+    DislikeFilled,
+    DislikeOutlined,
+  } from "@ant-design/icons-vue";
+  import { ref } from "vue";
+  import relativeTime from "dayjs/plugin/relativeTime";
+
+  dayjs.extend(relativeTime);
+  const route = useRoute();
+  const { id, username, content, date, comment } = route.query;
+  const { title, abstract, article } = JSON.parse(content);
+  const store = useArticleStore();
+  const token = getStorage("token");
+  console.log(token);
+  const comments = ref([]);
+  if (JSON.parse(comment).length > 0) {
+    console.log(JSON.parse(comment));
+    comments.value = JSON.parse(comment);
+  }
+  const submitting = ref(false);
+  const value = ref("");
+  const handleSubmit = () => {
+    if (!value.value || !token) {
+      return;
+    }
+
+    submitting.value = true;
+
+    setTimeout(() => {
+      submitting.value = false;
+      comments.value = [
+        {
+          author: token.username,
+          content: value.value,
+          datetime: dayjs().fromNow(),
+        },
+        ...comments.value,
+      ];
+      console.log(comments.value);
+      store.setArticle(id, {
+        author: token.username,
+        content: value.value,
+        datetime: new Date().toLocaleString(),
+      });
+      value.value = "";
+    }, 1000);
+  };
+  const likes = ref(0);
+  const dislikes = ref(0);
+  const action = ref();
+
+  const like = () => {
+    likes.value = 1;
+    dislikes.value = 0;
+    action.value = "liked";
+  };
+
+  const dislike = () => {
+    likes.value = 0;
+    dislikes.value = 1;
+    action.value = "disliked";
+  };
+  const imgReg = /<img.*?src=['"](.*?)['"]/gi;
+  const videoReg = /<source.*?src=['"](.*?)['"]/gi;
+  const imgSrc = ref();
+  const videoSrc = ref();
+  if (imgReg.exec(article)) {
+    imgReg.lastIndex = 0;
+    imgSrc.value = imgReg.exec(article)[1];
+    console.log(imgSrc.value);
+  }
+  if (videoReg.exec(article)) {
+    videoReg.lastIndex = 0;
+    videoSrc.value = videoReg.exec(article)[1];
+    console.log(videoSrc.value);
+  }
+</script>
+
+<template>
+  <a-card>
+    <h2>{{ title }}</h2>
+    <div class="article-header">
+      <a-avatar></a-avatar>
+      <div>
+        <div>
+          <span class="username">{{ username }}</span>
+        </div>
+        <span style="color: #515767"
+          >{{ date }} 阅读: {{ Math.floor(Math.random()) }}</span
+        >
+      </div>
+    </div>
+    <div>{{ abstract }}</div>
+    <div v-if="imgSrc">
+      <img :src="imgSrc" />
+    </div>
+    <div v-if="videoSrc">
+      <video controls>
+        <source :src="videoSrc" />
+      </video>
+    </div>
+  </a-card>
+  <a-card>
+    <h3>评论</h3>
+    <a-comment>
+      <template #avatar>
+        <a-avatar />
+      </template>
+      <template #content>
+        <a-form-item>
+          <a-textarea v-model:value="value" />
+        </a-form-item>
+        <a-form-item>
+          <a-button
+            html-type="submit"
+            :loading="submitting"
+            type="primary"
+            @click="handleSubmit"
+          >
+            Add Comment
+          </a-button>
+        </a-form-item>
+      </template>
+    </a-comment>
+    <a-list
+      v-if="comments.length"
+      :data-source="comments"
+      :header="`${comments.length} ${
+        comments.length > 1 ? 'replies' : 'reply'
+      }`"
+      item-layout="horizontal"
+    >
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <a-comment
+            :author="item.author"
+            :content="item.content"
+            :datetime="item.datetime"
+          >
+            <template #avatar>
+              <a-avatar />
+            </template>
+            <template #actions>
+              <span key="comment-basic-like">
+                <a-tooltip title="Like">
+                  <template v-if="action === 'liked'">
+                    <LikeFilled @click="like" />
+                  </template>
+                  <template v-else>
+                    <LikeOutlined @click="like" />
+                  </template>
+                </a-tooltip>
+                <span style="padding-left: 8px; cursor: auto">
+                  {{ likes }}
+                </span>
+              </span>
+              <span key="comment-basic-dislike">
+                <a-tooltip title="Dislike">
+                  <template v-if="action === 'disliked'">
+                    <DislikeFilled @click="dislike" />
+                  </template>
+                  <template v-else>
+                    <DislikeOutlined @click="dislike" />
+                  </template>
+                </a-tooltip>
+                <span style="padding-left: 8px; cursor: auto">
+                  {{ dislikes }}
+                </span>
+              </span>
+              <span key="comment-basic-reply-to">Reply to</span>
+            </template>
+          </a-comment>
+        </a-list-item>
+      </template>
+    </a-list>
+  </a-card>
+</template>
+
+<style scoped>
+  .article-header {
+    display: flex;
+    align-items: center;
+  }
+  .article-header > :nth-child(2) {
+    margin-left: 10px;
+  }
+  .username {
+    font-size: 1.333rem;
+    font-weight: 500;
+    line-height: 2rem;
+  }
+</style>

src/views/HomeView.vue

 <script setup>
-  import { ref, computed } from "vue";
+  import { ref, computed, reactive } from "vue";
   import { useRoute, useRouter } from "vue-router";
   import Nav from "../components/nav/index.vue";
   import { mockData } from "@/utils/mockData.js";
   import { useArticleStore } from "@/stores/article";
+  import { getStorage, setStorage } from "@/utils/storage";
   const activeKey = ref("1");
   const router = useRouter();
   const store = useArticleStore();
-  const article = store.getAllArticle();
-  console.log(article);
-  if (article) {
-    article.forEach((item) => {
-      mockData.unshift(item);
+  const articles = reactive([]);
+  const atc = store.getAllArticle();
+  console.log(articles);
+  if (!atc) {
+    mockData.forEach((element) => {
+      articles.push(element);
+    });
+    setStorage("article", articles);
+  } else {
+    atc.forEach((element) => {
+      articles.push(element);
     });
   }
   const goToArticle = () => {
@@ -21,6 +28,12 @@
   window.onresize = () => {
     width.value = window.innerWidth;
   };
+  const viewArticle = (id) => {
+    console.log(id);
+    id.content = JSON.stringify(id.content);
+    id.comment = JSON.stringify(id.comment);
+    router.push({ path: "/detailsArticle", query: id });
+  };
 </script>
 
 <template>
@@ -36,8 +49,8 @@
           >
             <a-tab-pane key="1" tab="最新">
               <a-row :gutter="[, { xs: 8, sm: 16, md: 24, lg: 32 }]">
-                <a-col :span="24" v-for="item in mockData" :key="item.id">
-                  <a-card>
+                <a-col :span="24" v-for="item in articles" :key="item.id">
+                  <a-card @click="viewArticle(item)">
                     <div class="content">
                       <a-avatar size="large" v-if="width > 750"> </a-avatar>
                       <div>

src/views/NewArticle.vue

@@ -5,6 +5,10 @@
   import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
   import { useArticleStore } from "@/stores/article.js";
   import { useUserStore } from "@/stores/user.js";
+  import { nanoid } from "nanoid";
+  import { setStorage, getStorage } from "@/utils/storage.js";
+
+  const nano = nanoid();
   const title = ref();
   // 编辑器实例，必须用 shallowRef
   const editorRef = shallowRef();
@@ -16,6 +20,35 @@
   const toolbarConfig = {};
   const editorConfig = {
     placeholder: "请输入内容...",
+    MENU_CONF: {
+      uploadImage: {
+        server: "/api/upload",
+        base64LimitSize: 5 * 1024,
+        async customUpload(file, insertFn) {
+          console.log(file);
+          const blob = new Blob([file]);
+          let reader = new FileReader();
+          reader.readAsDataURL(blob);
+          reader.onload = () => {
+            console.log("reader", reader.result);
+            insertFn(reader.result, "image", "href");
+          };
+        },
+      },
+      uploadVideo: {
+        server: "/api/upload",
+        async customUpload(file, insertFn) {
+          console.log(file);
+          const blob = new Blob([file]);
+          const reader = new FileReader();
+          reader.readAsDataURL(blob);
+          reader.onload = () => {
+            console.log("reader", reader.result);
+            insertFn(reader.result, "video");
+          };
+        },
+      },
+    },
   };
 
   // 组件销毁时，也及时销毁编辑器
@@ -31,7 +64,7 @@
   const handleChange = (editor) => {
     const html = editor.getHtml();
     valueText.value = editor.getText();
-    console.log(html);
+    console.log(html, valueText.value);
   };
   const mode = "deafult";
   const store = useArticleStore();
@@ -40,7 +73,7 @@
   const router = useRouter();
   const publishArticle = () => {
     const data = {
-      id: Math.floor(Math.random() * Math.floor(Math.random())),
+      id: nano,
       username: user.username,
       date: new Date().toLocaleString(),
       content: {
@@ -48,9 +81,10 @@
         abstract: valueText.value,
         article: valueHtml.value,
       },
+      comment: [],
     };
     console.log(data);
-    store.setArticle(4, data);
+    store.addAtricle(data);
     console.log(store.articles);
     router.push("/");
   };