commit

Author: hibichann

components.d.ts

@@ -26,6 +26,7 @@ declare module '@vue/runtime-core' {
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     MenuItem: typeof import('./src/components/MenuItem.vue')['default']
     PlainCard: typeof import('./src/components/PlainCard.vue')['default']

public/index.html

@@ -14,11 +14,6 @@
       rel="icon"
       href="<%= BASE_URL %>favicon.ico"
     />
-    <link
-      rel="stylesheet"
-      href="./gitalk/gitalk.css"
-    />
-    <script src="./gitalk/gitalk.min.js"></script>
     <title>Hibichann</title>
   </head>
 

src/App.vue

@@ -1,28 +1,27 @@
 <template>
   <div>
     <layout-body-vue>
-      <router-view v-slot="{ Component }">
-        <transition
-          name="slide-fade"
-          appear
-        >
-          <keep-alive>
-            <component :is="Component"></component>
-          </keep-alive>
-        </transition>
-      </router-view>
+      <transition name="slide-fade">
+        <router-view v-slot="{ Component }">
+          <component
+            :is="Component"
+            :key="route.fullPath"
+          ></component>
+        </router-view>
+      </transition>
     </layout-body-vue>
   </div>
 </template>
 <script lang="ts" setup>
 import layoutBodyVue from './views/layout/layout-body.vue'
-import { onMounted, ref } from 'vue'
+import { onMounted } from 'vue'
 import store from '@/store'
+import { useRoute } from 'vue-router'
+const route = useRoute()
 const isMobile = () => {
   let flag = navigator.userAgent.match(/(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
   return flag
 }
-let a = ref(true)
 onMounted(() => {
   store.commit('isMobile', isMobile())
 })
@@ -33,16 +32,18 @@ onMounted(() => {
   font-weight: 500 !important;
 }
 .slide-fade-enter-active {
-  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
 }
 
-.slide-fade-leave-active {
-  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+// .slide-fade-leave-active {
+//   // transition: all 0 cubic-bezier(1, 0.5, 0.8, 1);
+// }
+.slide-fade-enter-to,
+.slide-fade-leave-from {
+  opacity: 1;
 }
-
 .slide-fade-enter-from,
 .slide-fade-leave-to {
-  transform: translateY(30px);
   opacity: 0;
 }
 </style>

public/gitalk/gitalk.css renamed to src/assets/gitalk/gitalk.css

@@ -6,7 +6,7 @@
       class="left-body"
       @click="toArticleDetail"
     >
-      <img src="https://blog.chevereto.com/photos/2022/pexels-prakash-aryal-38326.jpg" />
+      <img :src="imgUrl || backImg" />
     </div>
     <div class="right-body">
       <div class="article-body">
@@ -31,14 +31,16 @@
         </div>
         <div
           class="detail"
-          v-html="marked(article?.content.toString())"
+          v-html="marked(article?.content)"
         ></div>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+//@ts-ignore
+import backImg from '@/assets/thinking.png'
 import { onMounted, ref } from 'vue'
 import { marked } from 'marked'
 import router from '@/router'
@@ -55,12 +57,22 @@ const handleClick = (name, query?) => {
     query
   })
 }
+let imgUrl = ref('')
+const getImgUrl = () => {
+  const regex = /!\[.*\]\((.*?)\)/g
+  let match
+  while ((match = regex.exec(article.value!.content))) {
+    imgUrl.value = match[1]
+    console.log('Found image URL:', imgUrl.value)
+  }
+}
 const article = ref(props.article)
 const toArticleDetail = () => {
   console.log(123, article.value!.id)
-  router.push({ name: 'articleDetail', query: { id: article.value!.id || 1 } })
+  router.push({ name: 'articleDetail', params: { id: article.value!.id || 1 } })
 }
 onMounted(async () => {
+  getImgUrl()
   // article?.value = (await getarticle?({ id: props.id || 1 })) as any
 })
 </script>
@@ -82,13 +94,15 @@ onMounted(async () => {
     overflow: hidden;
     img {
       width: 100%;
+      filter: brightness(0.95);
       // height: 150px;
       object-fit: cover;
       transition: all 0.5s;
     }
     img:hover {
       object-fit: cover;
       cursor: pointer;
+      filter: brightness(1);
       transform: scale(1.2);
       transition: all 0.5s;
     }
@@ -147,6 +161,9 @@ onMounted(async () => {
         transition: color 0.3s;
       }
       .detail {
+        :deep(img) {
+          display: none;
+        }
         position: relative;
         // white-space: pre;
         width: 100%;

public/gitalk/gitalk.min.js renamed to src/assets/gitalk/gitalk.min.js

@@ -1,6 +1,8 @@
 <template>
   <!-- 文章列表页 -->
   <div class="Home">
+    <!-- <div style="height: 50px; background-color: transparent"></div> -->
+    <div class="shadow"></div>
     <el-row>
       <el-col :span="spanWidth[0]"></el-col>
       <el-col :span="spanWidth[1]">
@@ -144,6 +146,10 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
+.shadow {
+  width: 100%;
+  box-shadow: 0 0 20px 20px lightslategray;
+}
 .title {
   width: 30%;
   color: rgb(97, 97, 97);

src/assets/thinking.png

@@ -98,7 +98,7 @@ const handleClick = (name, query?) => {
   })
 }
 const toArticleDetail = (id) => {
-  router.push({ name: 'articleDetail', query: { id } })
+  router.push({ name: 'articleDetail', params: { id } })
 }
 </script>
 

src/components/CardMD.vue

@@ -23,6 +23,9 @@ import VMdEditor from '@kangc/v-md-editor';
 import '@kangc/v-md-editor/lib/style/base-editor.css';
 import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
 import '@kangc/v-md-editor/lib/theme/style/github.css';
+//gitalk
+// import '@/assets/gitalk/gitalk.css'
+// import '@/assets/gitalk/gitalk.min.js'
 VMdEditor.use(githubTheme, {
   Hljs: hljs,
 });