From 13b4e94b14518f6e83ece21f1cc0fb70eb244976 Mon Sep 17 00:00:00 2001
From: ChenKS12138 <chenks12138@gmail.com>
Date: Sun, 23 Jun 2024 20:28:52 +0800
Subject: [PATCH] fix: fix style

---
 src/components.d.ts               |  1 +
 src/components/ArticleWrapper.vue | 69 +++++++++---------------------
 src/components/ShadowBox.vue      | 71 +++++++++++++++++++++++++++++++
 src/layouts/default.vue           | 18 +-------
 src/pages/RSS.vue                 | 14 ------
 src/pages/about.vue               | 28 ++++++------
 src/pages/article-list.vue        | 44 ++++++++++---------
 src/pages/index.vue               | 34 ++++++++-------
 8 files changed, 149 insertions(+), 130 deletions(-)
 create mode 100644 src/components/ShadowBox.vue
 delete mode 100644 src/pages/RSS.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 6c535eae..1512efde 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -12,5 +12,6 @@ declare module '@vue/runtime-core' {
     DarkMode: typeof import('./components/DarkMode.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ShadowBox: typeof import('./components/ShadowBox.vue')['default']
   }
 }
diff --git a/src/components/ArticleWrapper.vue b/src/components/ArticleWrapper.vue
index 6c738f0f..a2e0d66d 100644
--- a/src/components/ArticleWrapper.vue
+++ b/src/components/ArticleWrapper.vue
@@ -16,8 +16,6 @@ const { frontmatter } = defineProps<{
 
 const headings = frontmatter.headings;
 
-console.log(frontmatter.headings)
-
 useHead({
     title: frontmatter.title,
     meta: [
@@ -43,36 +41,36 @@ watch(isDark, () => {
 </script>
 
 <template>
-    <div class="flex items-start wrapper">
-        <div class="headings">
-            <div class="headings-content">
-                <article-heading :headings="headings" />
-            </div>
-        </div>
-        <div class="content-wrapper">
+    <shadow-box>
+        <template #left-toc>
+            <article-heading :headings="headings" />
+        </template>
+        <template #title-content>
             <div class="h-55 -mt-55 flex flex-col items-center text-white">
                 <div class="font-bold text-3xl">{{ frontmatter.title }}</div>
                 <div class="text-lg mt-2">{{ dayjs(frontmatter.date).format('YYYY-MM-DD') }}</div>
                 <div class="mt-2 italic">{{ (frontmatter.tags || []).map(x => `#${x}`).join(' ') }}</div>
             </div>
-            <slot></slot>
-            <!-- <div class="rounded bg-gray mt-10 p-1 text-white italic indent-md text-lg">
-                CC BY-SA 3.0协议 。转载请注明出处!
-            </div> -->
-            <div class="mt-20">
-                <Giscus v-if="showGiscus" ref="giscusRef" id="comments" repo="ChenKS12138/ChenKS12138.github.io"
-                    repoId="MDEwOlJlcG9zaXRvcnkyNzA4Njc3ODM=" category="Announcements" categoryId="DIC_kwDOECUdR84Cd10_"
-                    mapping="og:title" reactionsEnabled="1" emitMetadata="0" inputPosition="bottom" :theme="discusTheme"
-                    lang="zh-CN" loading="lazy" />
+        </template>
+        <div class="flex items-start wrapper">
+            <div class="content-wrapper">
+                <slot></slot>
+                <div class="rounded bg-gray mt-10 p-1 text-white italic indent-md text-lg">
+                    CC BY-SA 3.0协议 。转载请注明出处!
+                </div>
+                <div class="mt-20">
+                    <Giscus v-if="showGiscus" ref="giscusRef" id="comments" repo="ChenKS12138/ChenKS12138.github.io"
+                        repoId="MDEwOlJlcG9zaXRvcnkyNzA4Njc3ODM=" category="Announcements"
+                        categoryId="DIC_kwDOECUdR84Cd10_" mapping="og:title" reactionsEnabled="1" emitMetadata="0"
+                        inputPosition="bottom" :theme="discusTheme" lang="zh-CN" loading="lazy" />
+                </div>
             </div>
         </div>
-    </div>
+    </shadow-box>
 </template>
 
 <style scoped>
 .wrapper {
-    margin-left: -23rem;
-
     @media screen and (max-width: 770px) {
         margin-left: 0rem;
         flex-direction: column;
@@ -80,35 +78,8 @@ watch(isDark, () => {
     }
 }
 
-.headings {
-    min-width: 23rem;
-    position: sticky;
-    top: 1rem;
-    padding-right: 1rem;
-    display: flex;
-    justify-content: flex-end;
-    width: 0;
-
-    @media screen and (max-width: 770px) {
-        justify-content: flex-start;
-
-        /* display: none; */
-    }
-}
-
-.headings-content {
-    max-width: 15rem;
-    max-height: 50rem;
-    overflow-y: scroll;
-    @apply mr-8 pr-4 mt-20;
-
-    @media screen and (max-width: 770px) {
-        display: none;
-    }
-}
-
 .content-wrapper {
-    width: calc(100% - 23rem)
+    width: 100%;
 }
 </style>
 
diff --git a/src/components/ShadowBox.vue b/src/components/ShadowBox.vue
new file mode 100644
index 00000000..d6e52397
--- /dev/null
+++ b/src/components/ShadowBox.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="title-content">
+      <slot name="title-content"></slot>
+    </div>
+    <div class="box-container">
+      <div class="left-toc">
+        <slot name="left-toc"></slot>
+      </div>
+      <div class="content-container">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.title-content {
+  position: relative;
+  z-index: 2;
+  width: 80%;
+  margin: 0 auto;
+  margin-bottom: 1rem;
+}
+
+.box-container {
+  @apply max-w-4/5;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 0 auto;
+
+
+
+  @media screen and (max-width: 1200px) {
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+}
+
+.left-toc {
+  max-width: 300px;
+
+  position: sticky;
+  top: 3rem;
+  padding-top: 1rem;
+  padding-right: 1rem;
+
+  max-height: 800px;
+  overflow-y: scroll;
+
+  @media screen and (max-width: 1200px) {
+    display: none;
+  }
+}
+
+.content-container {
+  @apply min-h-2xl p-5 relative bg-white <lg: (p-2) lg: w-4xl color-text-comm dark:(color-bg-dark text-white);
+  top: -80px;
+  z-index: 4;
+  border-radius: 8px;
+  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
+    0 17px 50px 0 rgba(0, 0, 0, 0.19);
+  /* min-width: 80%; */
+  /* width: calc(100 - 300px); */
+  max-width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 658c013e..a209ae5e 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -23,10 +23,6 @@ const links = [
         to: '/about',
         label: '关于'
     },
-    // {
-    //     to: '/RSS',
-    //     label: 'RSS'
-    // }
 ]
 
 </script>
@@ -50,9 +46,7 @@ const links = [
     <div class="flex flex-col" style="min-height: 100vh;">
         <div class="w-full header-cover-bg min-h-sm"></div>
         <div class="content-container-wrapper dark:bg-dark">
-            <div class="content-container">
-                <router-view></router-view>
-            </div>
+            <router-view />
         </div>
     </div>
 </template>
@@ -98,14 +92,4 @@ const links = [
     @apply <lg: text-sm flex-1;
     background-color: rgb(235, 235, 235);
 }
-
-.content-container {
-    @apply min-h-2xl p-5 relative max-w-4/5 bg-white <lg: (p-2) lg: w-4xl color-text-comm dark:(color-bg-dark text-white);
-    top: -80px;
-    z-index: 4;
-    margin: 0 auto;
-    border-radius: 8px;
-    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
-        0 17px 50px 0 rgba(0, 0, 0, 0.19);
-}
 </style>
diff --git a/src/pages/RSS.vue b/src/pages/RSS.vue
deleted file mode 100644
index 1820dc60..00000000
--- a/src/pages/RSS.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-useHead({
-    title: 'NotFound'
-})
-</script>
-<template>
-    <div class="hint color-text-comm dark:text-white">RSS Not Ready!</div>
-</template>
-    
-<style scoped>
-.hint {
-    @apply text-center text-3xl mt-20;
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/about.vue b/src/pages/about.vue
index b66f8208..a55c51a5 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -19,19 +19,21 @@ const config = {
 </script>
 
 <template>
-  <div class="about-container">
-    <img class="avatar mb-2" :src="config.avatar" alt="avatar">
-    <div class="text-3xl mb-2">{{ config.name }}</div>
-    <div class="leading-loose italic" v-for="item in config.intro" :key="item">{{ item }}</div>
-  </div>
-  <div class="about-icon-container mt-2">
-    <a class="block" target="_blank" href="https://github.com/ChenKS12138">
-      <div class="i-carbon-logo-github text-2xl bg-dark dark:bg-white" />
-    </a>
-    <a class="block" target="_blank" href="https://twitter.com/ChenKS12138">
-      <div class="i-carbon-logo-twitter text-2xl bg-dark dark:bg-white" />
-    </a>
-  </div>
+  <shadow-box>
+    <div class="about-container">
+      <img class="avatar mb-2" :src="config.avatar" alt="avatar">
+      <div class="text-3xl mb-2">{{ config.name }}</div>
+      <div class="leading-loose italic" v-for="item in config.intro" :key="item">{{ item }}</div>
+    </div>
+    <div class="about-icon-container mt-2">
+      <a class="block" target="_blank" href="https://github.com/ChenKS12138">
+        <div class="i-carbon-logo-github text-2xl bg-dark dark:bg-white" />
+      </a>
+      <a class="block" target="_blank" href="https://twitter.com/ChenKS12138">
+        <div class="i-carbon-logo-twitter text-2xl bg-dark dark:bg-white" />
+      </a>
+    </div>
+  </shadow-box>
 </template>
 
 <style scoped>
diff --git a/src/pages/article-list.vue b/src/pages/article-list.vue
index 230a4f7d..fbd69fe5 100644
--- a/src/pages/article-list.vue
+++ b/src/pages/article-list.vue
@@ -44,30 +44,32 @@ const groupedArticles = computed(() => Array.from(
 </script>
 
 <template>
-    <div class="tag-container">
-        <div class="tag-item" :data-selected="selectedTag === ''" @click="selectedTag = ''">
-            ALL
-        </div>
-        <div class="tag-item" :data-selected="selectedTag === tagItem ? 'true' : ''" v-for="tagItem in allTags"
-            @click="selectedTag = tagItem">
-            {{ tagItem }}
+    <shadow-box>
+        <div class="tag-container">
+            <div class="tag-item" :data-selected="selectedTag === ''" @click="selectedTag = ''">
+                ALL
+            </div>
+            <div class="tag-item" :data-selected="selectedTag === tagItem ? 'true' : ''" v-for="tagItem in allTags"
+                @click="selectedTag = tagItem">
+                {{ tagItem }}
+            </div>
         </div>
-    </div>
-    <div class="articles-container">
-        <div>Total: {{ articles.length }}</div>
-        <div class="articles-divider border-t dark:border-white"></div>
-        <div class="mt-2" v-for="[year, yearArticles] in groupedArticles" :key="year">
-            <div class="text-xl">{{ year }}</div>
-            <div class="ml-5 mt-2 mb-8">
-                <router-link class="article-link" v-for="article in yearArticles" :to="article.path">
-                    <div class="flex justify-between my-3 dark:text-white">
-                        <div>{{ article.title }}</div>
-                        <div>{{ article.monthAndDay }}</div>
-                    </div>
-                </router-link>
+        <div class="articles-container">
+            <div>Total: {{ articles.length }}</div>
+            <div class="articles-divider border-t dark:border-white"></div>
+            <div class="mt-2" v-for="[year, yearArticles] in groupedArticles" :key="year">
+                <div class="text-xl">{{ year }}</div>
+                <div class="ml-5 mt-2 mb-8">
+                    <router-link class="article-link" v-for="article in yearArticles" :to="article.path">
+                        <div class="flex justify-between my-3 dark:text-white">
+                            <div>{{ article.title }}</div>
+                            <div>{{ article.monthAndDay }}</div>
+                        </div>
+                    </router-link>
+                </div>
             </div>
         </div>
-    </div>
+    </shadow-box>
 </template>
 
 <style scoped>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 85498409..4fbae5bd 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -12,23 +12,25 @@ useHead({
 
 </script>
 <template>
-    <div v-for="(article, idx) in articles" :key="article.path" class="article-item flex-col md:(flex-row)"
-        @click="go(article.path)">
-        <div class="md:(pr-4 w-4\/5)">
-            <div class="article-item-title">{{ article.data.title }}</div>
-            <div class="article-item-brief">{{ article.brief }}</div>
-            <div class="article-item-meta">
-                <span class="mr-6 ">{{ article.data.date }}</span>
-                <span class="italic">{{ (article.data.tags).join(", ") }}</span>
+    <shadow-box>
+        <div v-for="(article, idx) in articles" :key="article.path" class="article-item flex-col md:(flex-row)"
+            @click="go(article.path)">
+            <div class="md:(pr-4 w-4\/5)">
+                <div class="article-item-title">{{ article.data.title }}</div>
+                <div class="article-item-brief">{{ article.brief }}</div>
+                <div class="article-item-meta">
+                    <span class="mr-6 ">{{ article.data.date }}</span>
+                    <span class="italic">{{ (article.data.tags).join(", ") }}</span>
+                </div>
+            </div>
+            <div class="h-40 " v-if="article.data.coverImage">
+                <img :src="article.data.coverImage" class="article-item-image" alt="">
             </div>
         </div>
-        <div class="h-40 " v-if="article.data.coverImage">
-            <img :src="article.data.coverImage" class="article-item-image" alt="">
-        </div>
-    </div>
-    <router-link class="text--link" to="/article-list">
-        <div class="dark:text-white">查看全部</div>
-    </router-link>
+        <router-link class="text--link" to="/article-list">
+            <div class="dark:text-white">查看全部</div>
+        </router-link>
+    </shadow-box>
 </template>
 
 
@@ -43,7 +45,7 @@ useHead({
         0 17px 50px 0 rgba(0, 0, 0, 0.19) !important;
 
     @media screen and (max-width: 770px) {
-        width: 100%;
+        max-width: 100%;
     }
 }