Merge branch 'main' into release-please--branches--main--components--…

…release-please-action
IdeaLeap · Feb 1, 2023 · 2d1e4c1 · 2d1e4c1
2 parents fed3b9e + 9c06bc8
commit 2d1e4c1
Show file tree

Hide file tree

Showing 18 changed files with 363 additions and 208 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,6 +6,7 @@
   "files.associations": {
     "*.css": "postcss"
   },
+  "css.lint.unknownAtRules": "ignore",
   // "editor.formatOnSave": true,
   // "editor.defaultFormatter": "esbenp.prettier-vscode",
   // "prettier.requireConfig": true,

diff --git a/frontend/app.vue b/frontend/app.vue
@@ -58,12 +58,4 @@ body,
   margin: 0;
   padding: 0;
 }
-
-html.dark {
-  background: #18181c;
-  color: white;
-}
-html.light {
-  background-color: #F4F5F5;
-}
 </style>
diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
@@ -1,5 +1,5 @@
 :root {
-  --primary-color: #316c72;
+  --primary-color: #1e80ff;
   --dark-bg: #18181c;
   --link: #007fff;
   --jjext-color-brand: #1e80ff;
@@ -81,6 +81,194 @@
   --jjext-color-bg-gray:#27272a;
 }
 
+html.light{
+  --juejin-layer-golden-1: #faf3e5;
+  --juejin-layer-golden-2: #f6e7cb;
+  --juejin-component-hover: #e4e6eb;
+  --juejin-gradientgold_normal_start: #fde8c3;
+  --juejin-gradientgold_normal_end: #edd3a7;
+  --juejin-gradientgold_hover_start: #f1dfc0;
+  --juejin-gradientgold_hover_end: #e6c99b;
+  --juejin-gradientgold_click_start: #e9d5b3;
+  --juejin-gradientgold_click_end: #dac29a;
+  --juejin-layer_loading_start: rgba(228,230,235,0);
+  --juejin-layer_loading_end: rgba(228,230,235,0.5);
+  --juejin-layer_golden_2: #faf3e5;
+  --juejin-font_golden_4: #7e5d25;
+  --juejin-font-golden-1: #7e5d25;
+  --juejin-font-golden-2: #8a795c;
+  --juejin-font-golden-3: #d6b885;
+  --juejin-gray-0: #fff;
+  --juejin-gray-1-1: #e4e6eb;
+  --juejin-gray-1-2: rgba(228,230,235,0.5);
+  --juejin-gray-1-3: #e4e6eb;
+  --juejin-gray-2: #f2f3f5;
+  --juejin-gray-3: #f7f8fa;
+  --juejin-background: #f2f3f5;
+  --juejin-layer-1: #fff;
+  --juejin-layer-2-1: #f7f8fa;
+  --juejin-layer-2-2: rgba(247,248,250,0.7);
+  --juejin-layer-3-fill: #f2f3f5;
+  --juejin-layer-3-border: #e4e6eb;
+  --juejin-layer-4-dropdown: #fff;
+  --juejin-layer-5: #fff;
+  --juejin-brand-1-normal: #1e80ff;
+  --juejin-brand-2-hover: #1171ee;
+  --juejin-brand-3-click: #0060dd;
+  --juejin-brand-4-disable: #abcdff;
+  --juejin-brand-5-light: #eaf2ff;
+  --juejin-mask-1: rgba(0,0,0,0.4);
+  --juejin-mask-2: #fff;
+  --juejin-mask-3: none;
+  --juejin-brand-fill1-normal: rgba(30,128,255,0.05);
+  --juejin-brand-fill2-hover: rgba(30,128,255,0.1);
+  --juejin-brand-fill3-click: rgba(30,128,255,0.2);
+  --juejin-brand-stroke1-normal: rgba(30,128,255,0.3);
+  --juejin-brand-stroke2-hover: rgba(30,128,255,0.45);
+  --juejin-brand-stroke3-click: rgba(30,128,255,0.6);
+  --juejin-font_danger: #ff5132;
+  --juejin-font-1: #252933;
+  --juejin-font-2: #515767;
+  --juejin-font-3: #8a919f;
+  --juejin-font-4: #c2c8d1;
+  --juejin-font-brand1-normal: #1e80ff;
+  --juejin-font-brand2-hover: #1171ee;
+  --juejin-font-brand3-click: #0060dd;
+  --juejin-font-brand4-disable: #abcdff;
+  --juejin-font-success: #2bb91b;
+  --juejin-font-warning: #ff8412;
+  --juejin-font-danger: #ff5132;
+  --juejin-font-white-disable: #fff;
+  --juejin-font-white: #fff;
+  --juejin-success-1-normal: #00b453;
+  --juejin-success-2-deep: #00964e;
+  --juejin-success-3-light: #e2faed;
+  --juejin-warning-1-normal: #ff7426;
+  --juejin-warning-2-deep: #e05e00;
+  --juejin-warning-3-light: #fff3e5;
+  --juejin-danger-1-normal: #f64242;
+  --juejin-danger-2-deep: #cb2634;
+  --juejin-danger-3-light: #fff2ff;
+  --juejin-sub-1-purple: #9f54ff;
+  --juejin-sub-2-blue: #57a0ff;
+  --juejin-sub-3-cyan: #5ad7ff;
+  --juejin-sub-4-green: #33d790;
+  --juejin-sub-5-yellow: #ffcc15;
+  --juejin-sub-6-orange: #ff834e;
+  --juejin-sub-7-red: #ff5e54;
+  --juejin-coupon_1_button: #f64242;
+  --juejin-coupon_1_button_disable: #faa0a0;
+  --juejin-coupon_2_card: rgba(255,245,244,0.7);
+  --juejin-coupon_3_stroke: rgba(246,66,66,0.2);
+  --juejin-navigation: #fff;
+  --juejin-shade-1: rgba(0,0,0,0.4);
+  --juejin-shade-2: rgba(0,0,0,0.6);
+  --juejin-popup: #fff;
+  --juejin-popover: rgba(0,0,0,0.8);
+  --juejin-sheets: #f7f8fa;
+  --juejin-coupon-button: #f64242;
+  --juejin-coupon-button-disable: #faa0a0;
+  --juejin-coupon-card: rgba(255,245,244,0.7);
+  --juejin-layer-loading-start: #e4e6eb;
+  --juejin-layer-loading-end: rgba(228,230,235,0.5);
+  --juejin-font-priv-hint: #916be1;
+  --juejin-background-jscore-radar: #232323
+}
+
+html.dark{
+  --juejin-layer-golden-1: rgba(209,171,97,0.23);
+  --juejin-layer-golden-2: rgba(237,211,167,0.4);
+  --juejin-component-hover: hsla(0,0%,100%,0.2);
+  --juejin-gradientgold_normal_start: #fde8c3;
+  --juejin-gradientgold_normal_end: #edd3a7;
+  --juejin-gradientgold_hover_start: #f1dfc0;
+  --juejin-gradientgold_hover_end: #e6c99b;
+  --juejin-gradientgold_click_start: #e9d5b3;
+  --juejin-gradientgold_click_end: #dac29a;
+  --juejin-layer_loading_start: hsla(0,0%,100%,0);
+  --juejin-layer_loading_end: hsla(0,0%,100%,0.2);
+  --juejin-layer_golden_2: rgba(209,171,97,0.12);
+  --juejin-font_golden_4: #7e5d25;
+  --juejin-font-golden-1: #edd3a7;
+  --juejin-font-golden-2: #bea985;
+  --juejin-font-golden-3: #8e7f64;
+  --juejin-gray-0: #000;
+  --juejin-gray-1-1: hsla(0,0%,100%,0.2);
+  --juejin-gray-1-2: hsla(0,0%,100%,0.1);
+  --juejin-gray-1-3: #464646;
+  --juejin-gray-2: hsla(0,0%,100%,0.12);
+  --juejin-gray-3: hsla(0,0%,100%,0.08);
+  --juejin-background: #000;
+  --juejin-layer-1: #181818;
+  --juejin-layer-2-1: hsla(0,0%,100%,0.08);
+  --juejin-layer-2-2: hsla(0,0%,100%,0.08);
+  --juejin-layer-3-fill: hsla(0,0%,100%,0.08);
+  --juejin-layer-3-border: hsla(0,0%,100%,0.2);
+  --juejin-layer-4-dropdown: #2f2f2f;
+  --juejin-layer-5: hsla(0,0%,100%,0.12);
+  --juejin-brand-1-normal: #2986ff;
+  --juejin-brand-2-hover: #1473ed;
+  --juejin-brand-3-click: #0563dd;
+  --juejin-brand-4-disable: rgba(41,134,255,0.4);
+  --juejin-brand-5-light: rgba(30,128,255,0.2);
+  --juejin-mask-1: hsla(0,0%,100%,0.4);
+  --juejin-mask-2: #282828;
+  --juejin-mask-3: rgba(0,0,0,0.05);
+  --juejin-brand-fill1-normal: rgba(41,134,255,0.15);
+  --juejin-brand-fill2-hover: rgba(20,115,237,0.25);
+  --juejin-brand-fill3-click: rgba(5,99,221,0.35);
+  --juejin-brand-stroke1-normal: rgba(41,134,255,0.4);
+  --juejin-brand-stroke2-hover: rgba(20,115,237,0.6);
+  --juejin-brand-stroke3-click: rgba(5,99,221,0.6);
+  --juejin-font_danger: #f85959;
+  --juejin-font-1: hsla(0,0%,100%,0.9);
+  --juejin-font-2: hsla(0,0%,100%,0.7);
+  --juejin-font-3: hsla(0,0%,100%,0.55);
+  --juejin-font-4: hsla(0,0%,100%,0.45);
+  --juejin-font-brand1-normal: #4495ff;
+  --juejin-font-brand2-hover: #2b88ff;
+  --juejin-font-brand3-click: #1371ec;
+  --juejin-font-brand4-disable: rgba(19,113,236,0.4);
+  --juejin-font-success: #40c17b;
+  --juejin-font-warning: #ff8541;
+  --juejin-font-danger: #c62633;
+  --juejin-font-white-disable: hsla(0,0%,100%,0.6);
+  --juejin-font-white: #fff;
+  --juejin-success-1-normal: #40c17b;
+  --juejin-success-2-deep: #008445;
+  --juejin-success-3-light: rgba(64,193,123,0.2);
+  --juejin-warning-1-normal: #ff8541;
+  --juejin-warning-2-deep: #d85c02;
+  --juejin-warning-3-light: rgba(255,133,65,0.2);
+  --juejin-danger-1-normal: #f85959;
+  --juejin-danger-2-deep: #c62633;
+  --juejin-danger-3-light: rgba(248,89,89,0.2);
+  --juejin-sub-1-purple: #a965ff;
+  --juejin-sub-2-blue: #68a9ff;
+  --juejin-sub-3-cyan: #74f4ed;
+  --juejin-sub-4-green: #50e68c;
+  --juejin-sub-5-yellow: #ffd748;
+  --juejin-sub-6-orange: #ff8f60;
+  --juejin-sub-7-red: #ff6e65;
+  --juejin-coupon_1_button: rgba(251,86,83,0.8);
+  --juejin-coupon_1_button_disable: #782928;
+  --juejin-coupon_2_card: rgba(255,176,176,0.08);
+  --juejin-coupon_3_stroke: rgba(246,66,66,0.18);
+  --juejin-navigation: #181818;
+  --juejin-shade-1: rgba(0,0,0,0.6);
+  --juejin-shade-2: rgba(0,0,0,0.7);
+  --juejin-popup: #282828;
+  --juejin-popover: #323232;
+  --juejin-sheets: #222;
+  --juejin-coupon-button: rgba(251,86,83,0.8);
+  --juejin-coupon-button-disable: #782928;
+  --juejin-coupon-card: rgba(255,176,176,0.08);
+  --juejin-layer-loading-start: #fff;
+  --juejin-layer-loading-end: hsla(0,0%,100%,0.2);
+  --juejin-font-priv-hint: #916be1;
+  --juejin-background-jscore-radar: #232323
+}
+
 .page-enter-active,
 .page-leave-active {
   transition: all 0.3s ease-in-out;

diff --git a/...onents/ArticlesContent/SideBar/Author.vue → .../ArticlesContent/SideBar/Right/Author.vue b/...onents/ArticlesContent/SideBar/Author.vue → .../ArticlesContent/SideBar/Right/Author.vue
diff --git a/...ponents/ArticlesContent/SideBar/Right.vue → ...ticlesContent/SideBar/Right/Catalogue.vue b/...ponents/ArticlesContent/SideBar/Right.vue → ...ticlesContent/SideBar/Right/Catalogue.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable no-console -->
 <script setup>
 import { getProcessor } from 'bytemd'
 import { visit } from 'unist-util-visit'
@@ -7,9 +6,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  author: {
-    type: Object,
-  },
 })
 /**
  *  @description: 获取目录
@@ -142,42 +138,31 @@ onUnmounted(() => {
   window.removeEventListener('scroll', throttledScrollHandler)
   window.removeEventListener('scroll', scrollFixedCatalogue)
 })
-const { immerseState } = useImmerse()
 </script>
 
 <template>
-  <div class="sidebar hidden lg:block lg:w-4/12">
-    <ArticlesContentSideBarAuthor v-show="!immerseState" :author="props.author" />
-    <ArticlesContentSideBarArticleList class="sidebar-block" />
-    <div class="sticky-block-box">
-      <div class="sidebar-block catalog-block catalog-block pure isExpand" style="">
-        <nav class="article-catalog">
-          <div class="catalog-title">
-            目录
-          </div>
-          <div class="catalog-body">
-            <ul class="catalog-list" style="margin-top: 0px">
-              <li v-for="(item, index) in Catalogue" :key="index" :class="[{ active: index === isActive }, catalogueClass(item.level)]" @click="activeSelect(index)">
-                <div class="a-container">
-                  <a :href="`#heading-${index}`" :title="item.text" class="catalog-aTag hover:bg-[#F7F8FA]"> {{ item.text }} </a>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </nav>
-      </div>
+  <div class="sticky-block-box">
+    <div class="sidebar-block catalog-block catalog-block pure isExpand" style="">
+      <nav class="article-catalog">
+        <div class="catalog-title">
+          目录
+        </div>
+        <div class="catalog-body">
+          <ul class="catalog-list" style="margin-top: 0px">
+            <li v-for="(item, index) in Catalogue" :key="index" :class="[{ active: index === isActive }, catalogueClass(item.level)]" @click="activeSelect(index)">
+              <div class="a-container">
+                <a :href="`#heading-${index}`" :title="item.text" class="catalog-aTag hover:bg-[#F7F8FA]"> {{ item.text }} </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
     </div>
   </div>
 </template>
 
 <style scoped>
-.sidebar {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 25rem;
-}
-.sidebar.sticky .sticky-block-box {
+.sticky .sticky-block-box {
   position: fixed;
   top: 1.767rem;
   width: inherit;
@@ -189,7 +174,7 @@ const { immerseState } = useImmerse()
   background-color: #fff;
 }
 
-.sidebar .sidebar-block {
+ .sidebar-block {
   margin-bottom: 20px;
 }
 

diff --git a/...s/ArticlesContent/SideBar/ArticleList.vue → ...Content/SideBar/Right/RelatedArticles.vue b/...s/ArticlesContent/SideBar/ArticleList.vue → ...Content/SideBar/Right/RelatedArticles.vue
@@ -5,9 +5,6 @@ defineProps({
     required: true,
   },
 })
-const tags = ['前端']
-const authorId = '5'
-const { data: ArticleList } = await useFetch(`/api/articles/tags?tags=${JSON.stringify(tags)}&authorId=${authorId}`)
 </script>
 
 <template>
@@ -17,24 +14,25 @@ const { data: ArticleList } = await useFetch(`/api/articles/tags?tags=${JSON.str
         相关文章
       </div>
       <div class="block-body">
-        <div v-for="item in ArticleList" :key="item.name" class="entry-list">
+        <div class="entry-list">
           <nuxt-link
-            :to="`/article/${item.id}`" target="_blank" rel="" st:name="link" title="{{ item.title }}"
-            class="item"
+            v-for="item in articleList" :key="item.id" :to="`/article/${item.id}`" target="_blank" rel=""
+            st:name="link"
+            :title="item.title" class="item"
           >
             <div class="entry-title">
               {{ item.title }}
             </div>
             <div class="entry-meta-box">
-              <div class="entry-meta">
+              <!-- <div class="entry-meta">
                 {{ item.liked }}{{ item.liked > 1 ? '赞' : '赞' }}
               </div>
               <div class="entry-meta">
                 &nbsp;·&nbsp;
               </div>
               <div class="entry-meta">
                 {{ item.commented }}{{ item.commented > 1 ? '评论' : '评论' }}
-              </div>
+              </div> -->
             </div>
           </nuxt-link>
         </div>

diff --git a/frontend/components/ArticlesContent/SideBar/Right/index.vue b/frontend/components/ArticlesContent/SideBar/Right/index.vue
@@ -0,0 +1,40 @@
+<script setup>
+const props = defineProps({
+  content: {
+    type: String,
+    default: '',
+  },
+  author: {
+    type: Object,
+  },
+  relatedArticles: {
+    type: Array,
+  },
+})
+const { immerseState } = useImmerse()
+</script>
+
+<template>
+  <div class="sidebar hidden lg:block lg:w-4/12">
+    <ArticlesContentSideBarRightAuthor v-show="!immerseState" :author="props.author" />
+    <ArticlesContentSideBarRightRelatedArticles v-show="!immerseState" class="sidebar-block" :article-list="props.relatedArticles" />
+    <ArticlesContentSideBarRightCatalogue class="sidebar-block" :content="props.content" />
+  </div>
+</template>
+
+<style scoped>
+.sidebar-block {
+  position: relative;
+  margin-bottom: 1.5rem;
+  background-color: #fff;
+}
+.sidebar .sidebar-block {
+  margin-bottom: 20px;
+}
+.sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 25rem;
+}
+</style>