@sugarat/theme 0.2.30 → 0.3.1

package/node.d.ts

@@ -93,7 +93,8 @@ declare namespace Theme {
         label: string;
         type: string;
     }
-    interface CommentConfig extends GiscusConfig {
+    type CommentConfig = ((GiscusOption & CommentCommonConfig) | GiscusConfig | ArtalkConfig);
+    interface CommentCommonConfig {
         /**
          * @default '评论'
          */
@@ -109,7 +110,15 @@ declare namespace Theme {
          */
         mobileMinify?: boolean;
     }
-    interface GiscusConfig {
+    interface GiscusConfig extends CommentCommonConfig {
+        type: 'giscus';
+        options: GiscusOption;
+    }
+    interface ArtalkConfig extends CommentCommonConfig {
+        type: 'artalk';
+        options: ArtalkOption;
+    }
+    interface GiscusOption {
         repo: Repo;
         repoId: string;
         category: string;
@@ -119,6 +128,10 @@ declare namespace Theme {
         lang?: string;
         loading?: 'lazy' | 'eager';
     }
+    interface ArtalkOption {
+        site: string;
+        server: string;
+    }
     interface HotArticle {
         title?: string;
         pageSize?: number;
@@ -319,7 +332,8 @@ declare namespace Theme {
         search?: SearchConfig;
         /**
          * 配置评论
-         * power by https://giscus.app/zh-CN
+         * giscus: https://giscus.app/zh-CN
+         * artalk: https://artalk.js.org/
          */
         comment?: CommentConfig | false;
         /**
@@ -391,6 +405,13 @@ declare namespace Theme {
          */
         oml2d?: Options;
         homeTags?: boolean;
+        buttonAfterArticle?: ButtonAfterArticleConfig | false;
+        /**
+         * 是否开启深色模式过渡动画
+         * @reference https://vitepress.dev/zh/guide/extending-default-theme#on-appearance-toggle
+         * @default true
+         */
+        darkTransition?: boolean;
     }
     interface BackToTop {
         /**
@@ -470,6 +491,22 @@ declare namespace Theme {
          */
         handleChangeSlogan?: (oldSlogan: string) => string | Promise<string>;
     }
+    interface ButtonAfterArticleConfig {
+        openTitle?: string;
+        closeTitle?: string;
+        content?: string;
+        icon?: 'aliPay' | 'wechatPay' | string;
+        /**
+         * 按钮尺寸
+         * @default 'default'
+         */
+        size?: 'small' | 'default' | 'large';
+        /**
+         * 默认展开
+         * @default false
+         */
+        expand?: boolean;
+    }
 }
 
 /**

package/node.js

@@ -40,7 +40,7 @@ module.exports = __toCommonJS(node_exports);
 // src/utils/node/mdPlugins.ts
 var import_module = require("module");
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.1_vue@3.4.21/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.1.4_@algolia+client-search@4.19.1_@types+node@20.6.3__ee2wap4ljxfukruj47sfuqlmqq/node_modules/vitepress-plugin-tabs/dist/index.js
 var tabsMarker = "=tabs";
 var tabsMarkerLen = tabsMarker.length;
 var ruleBlockTabs = (state, startLine, endLine, silent) => {
@@ -210,69 +210,9 @@ var import_vitepress_markdown_timeline = __toESM(require("vitepress-markdown-tim
 // src/utils/node/index.ts
 var import_node_child_process = require("child_process");
 var import_node_path = __toESM(require("path"));
-
-// src/utils/client/index.ts
-function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
-  if (!(d instanceof Date)) {
-    d = new Date(d);
-  }
-  const o = {
-    "M+": d.getMonth() + 1,
-    // 月份
-    "d+": d.getDate(),
-    // 日
-    "h+": d.getHours(),
-    // 小时
-    "m+": d.getMinutes(),
-    // 分
-    "s+": d.getSeconds(),
-    // 秒
-    "q+": Math.floor((d.getMonth() + 3) / 3),
-    // 季度
-    "S": d.getMilliseconds()
-    // 毫秒
-  };
-  if (/(y+)/.test(fmt)) {
-    fmt = fmt.replace(
-      RegExp.$1,
-      `${d.getFullYear()}`.substr(4 - RegExp.$1.length)
-    );
-  }
-  for (const k in o) {
-    if (new RegExp(`(${k})`).test(fmt))
-      fmt = fmt.replace(
-        RegExp.$1,
-        RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
-      );
-  }
-  return fmt;
-}
-
-// src/utils/node/index.ts
-function clearMatterContent(content) {
-  let first___;
-  let second___;
-  const lines = content.split("\n").reduce((pre, line) => {
-    if (!line.trim() && pre.length === 0) {
-      return pre;
-    }
-    if (line.trim() === "---") {
-      if (first___ === void 0) {
-        first___ = pre.length;
-      } else if (second___ === void 0) {
-        second___ = pre.length;
-      }
-    }
-    pre.push(line);
-    return pre;
-  }, []);
-  return lines.slice(second___ || 0).join("\n");
-}
 function getDefaultTitle(content) {
-  const title = clearMatterContent(content).split("\n")?.find((str) => {
-    return str.startsWith("# ");
-  })?.slice(2).replace(/^\s+|\s+$/g, "") || "";
-  return title;
+  const match = content.match(/^(#+)\s+(.+)/m);
+  return match?.[2] || "";
 }
 function getFileBirthTime(url) {
   let date = /* @__PURE__ */ new Date();
@@ -282,12 +222,12 @@ function getFileBirthTime(url) {
       date = new Date(infoStr);
     }
   } catch (error) {
-    return formatDate(date);
+    return date;
   }
-  return formatDate(date);
+  return date;
 }
 function getTextSummary(text, count = 100) {
-  return clearMatterContent(text).match(/^# ([\s\S]+)/m)?.[1]?.replace(/#/g, "")?.replace(/!\[.*?\]\(.*?\)/g, "")?.replace(/\[(.*?)\]\(.*?\)/g, "$1")?.replace(/\*\*(.*?)\*\*/g, "$1")?.split("\n")?.filter((v) => !!v)?.slice(1)?.join("\n")?.replace(/>(.*)/, "")?.slice(0, count);
+  return text?.replace(/^#+\s+.*/, "")?.replace(/#/g, "")?.replace(/!\[.*?\]\(.*?\)/g, "")?.replace(/\[(.*?)\]\(.*?\)/g, "$1")?.replace(/\*\*(.*?)\*\*/g, "$1")?.split("\n")?.filter((v) => !!v)?.join("\n")?.replace(/>(.*)/, "")?.trim()?.slice(0, count);
 }
 function aliasObjectToArray(obj) {
   return Object.entries(obj).map(([find, replacement]) => ({
@@ -317,6 +257,37 @@ function getFirstImagURLFromMD(content, route) {
   const relativePath = url.startsWith("/") ? url : import_node_path.default.join(paths.join("/") || "", url);
   return joinPath("/", relativePath);
 }
+function debounce(func, delay = 1e3) {
+  let timeoutId;
+  return (...rest) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func(...rest);
+    }, delay);
+  };
+}
+function isEqual(obj1, obj2, excludeKeys = []) {
+  const keys1 = Object.keys(obj1).filter((key) => !excludeKeys.includes(key));
+  const keys2 = Object.keys(obj2).filter((key) => !excludeKeys.includes(key));
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  for (const key of keys1) {
+    if (!keys2.includes(key)) {
+      return false;
+    }
+    const val1 = obj1[key];
+    const val2 = obj2[key];
+    const areObjects = isObject(val1) && isObject(val2);
+    if (areObjects && !isEqual(val1, val2, excludeKeys) || !areObjects && val1 !== val2) {
+      return false;
+    }
+  }
+  return true;
+}
+function isObject(obj) {
+  return obj != null && typeof obj === "object";
+}
 
 // src/utils/node/mdPlugins.ts
 var import_meta = {};
@@ -384,6 +355,45 @@ var import_node_path2 = __toESM(require("path"));
 var import_node_process = __toESM(require("process"));
 var import_fast_glob = __toESM(require("fast-glob"));
 var import_gray_matter = __toESM(require("gray-matter"));
+
+// src/utils/client/index.ts
+function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
+  if (!(d instanceof Date)) {
+    d = new Date(d);
+  }
+  const o = {
+    "M+": d.getMonth() + 1,
+    // 月份
+    "d+": d.getDate(),
+    // 日
+    "h+": d.getHours(),
+    // 小时
+    "m+": d.getMinutes(),
+    // 分
+    "s+": d.getSeconds(),
+    // 秒
+    "q+": Math.floor((d.getMonth() + 3) / 3),
+    // 季度
+    "S": d.getMilliseconds()
+    // 毫秒
+  };
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(
+      RegExp.$1,
+      `${d.getFullYear()}`.substr(4 - RegExp.$1.length)
+    );
+  }
+  for (const k in o) {
+    if (new RegExp(`(${k})`).test(fmt))
+      fmt = fmt.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
+      );
+  }
+  return fmt;
+}
+
+// src/utils/node/theme.ts
 function patchDefaultThemeSideBar(cfg) {
   return cfg?.blog !== false && cfg?.recommend !== false ? {
     sidebar: [
@@ -394,64 +404,79 @@ function patchDefaultThemeSideBar(cfg) {
     ]
   } : void 0;
 }
-var pageMap = /* @__PURE__ */ new Map();
+function getPageRoute(filepath, srcDir) {
+  let route = filepath.replace(".md", "");
+  if (route.startsWith("./")) {
+    route = route.replace(
+      new RegExp(
+        `^\\.\\/${import_node_path2.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path2.default.sep}`, "g"), "/")}`
+      ),
+      ""
+    );
+  } else {
+    route = route.replace(
+      new RegExp(
+        `^${import_node_path2.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path2.default.sep}`, "g"), "/")}`
+      ),
+      ""
+    );
+  }
+  return `/${route}`;
+}
+var defaultTimeZoneOffset = (/* @__PURE__ */ new Date()).getTimezoneOffset() / -60;
+function getArticleMeta(filepath, route, timeZone = defaultTimeZoneOffset) {
+  const fileContent = import_node_fs.default.readFileSync(filepath, "utf-8");
+  const { data: frontmatter, excerpt, content } = (0, import_gray_matter.default)(fileContent, {
+    excerpt: true
+  });
+  const meta = {
+    ...frontmatter
+  };
+  if (!meta.title) {
+    meta.title = getDefaultTitle(content);
+  }
+  if (!meta.date) {
+    meta.date = formatDate(getFileBirthTime(filepath));
+  } else {
+    meta.date = formatDate(
+      /* @__PURE__ */ new Date(`${new Date(meta.date).toUTCString()}+${timeZone}`)
+    );
+  }
+  meta.categories = typeof meta.categories === "string" ? [meta.categories] : meta.categories;
+  meta.tags = typeof meta.tags === "string" ? [meta.tags] : meta.tags;
+  meta.tag = [meta.tag || []].flat().concat([
+    .../* @__PURE__ */ new Set([...meta.categories || [], ...meta.tags || []])
+  ]);
+  meta.description = meta.description || getTextSummary(content, 100) || excerpt;
+  meta.cover = meta.cover ?? getFirstImagURLFromMD(fileContent, route);
+  if (meta.publish === false) {
+    meta.hidden = true;
+    meta.recommend = false;
+  }
+  return meta;
+}
 function getArticles(cfg) {
   const srcDir = cfg?.srcDir || import_node_process.default.argv.slice(2)?.[1] || ".";
   const files = import_fast_glob.default.sync(`${srcDir}/**/*.md`, { ignore: ["node_modules"] });
-  const data = files.map((v) => {
-    let route = v.replace(".md", "");
-    if (route.startsWith("./")) {
-      route = route.replace(
-        new RegExp(
-          `^\\.\\/${import_node_path2.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path2.default.sep}`, "g"), "/")}`
-        ),
-        ""
-      );
-    } else {
-      route = route.replace(
-        new RegExp(
-          `^${import_node_path2.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path2.default.sep}`, "g"), "/")}`
-        ),
-        ""
-      );
-    }
-    pageMap.set(`/${route}`, v);
-    const fileContent = import_node_fs.default.readFileSync(v, "utf-8");
-    const { data: frontmatter, excerpt } = (0, import_gray_matter.default)(fileContent, {
-      excerpt: true
-    });
-    const meta = {
-      ...frontmatter
-    };
-    if (!meta.title) {
-      meta.title = getDefaultTitle(fileContent);
-    }
-    if (!meta.date) {
-      meta.date = getFileBirthTime(v);
-    } else {
-      const timeZone = cfg?.timeZone ?? 8;
-      meta.date = formatDate(
-        /* @__PURE__ */ new Date(`${new Date(meta.date).toUTCString()}+${timeZone}`)
-      );
-    }
-    meta.categories = typeof meta.categories === "string" ? [meta.categories] : meta.categories;
-    meta.tags = typeof meta.tags === "string" ? [meta.tags] : meta.tags;
-    meta.tag = [meta.tag || []].flat().concat([
-      .../* @__PURE__ */ new Set([...meta.categories || [], ...meta.tags || []])
-    ]);
-    const wordCount = 100;
-    meta.description = meta.description || getTextSummary(fileContent, wordCount);
-    meta.cover = meta.cover ?? getFirstImagURLFromMD(fileContent, `/${route}`);
-    if (meta.publish === false) {
-      meta.hidden = true;
-      meta.recommend = false;
-    }
+  const pageData = files.map((filepath) => {
+    const route = getPageRoute(filepath, srcDir);
+    const meta = getArticleMeta(filepath, route, cfg?.timeZone);
     return {
-      route: `/${route}`,
+      route,
       meta
     };
   }).filter((v) => v.meta.layout !== "home");
-  return data;
+  return pageData;
+}
+function patchVPConfig(vpConfig, cfg) {
+  vpConfig.head = vpConfig.head || [];
+  if (cfg?.comment && "type" in cfg.comment && cfg?.comment?.type === "artalk") {
+    const server = cfg.comment?.options?.server;
+    if (server) {
+      vpConfig.head.push(["link", { href: `${server}/dist/Artalk.css`, rel: "stylesheet" }]);
+      vpConfig.head.push(["script", { src: `${server}/dist/Artalk.js`, id: "artalk-script" }]);
+    }
+  }
 }
 function patchVPThemeConfig(cfg, vpThemeConfig = {}) {
   vpThemeConfig.sidebar = patchDefaultThemeSideBar(cfg)?.sidebar;
@@ -468,11 +493,64 @@ var import_node_fs2 = require("fs");
 var import_node_buffer = require("buffer");
 var import_vitepress_plugin_pagefind = require("vitepress-plugin-pagefind");
 var import_vitepress_plugin_rss = require("vitepress-plugin-rss");
+
+// src/utils/node/hot-reload-plugin.ts
+function themeReloadPlugin() {
+  let blogConfig;
+  let vitepressConfig;
+  let docsDir;
+  const generateRoute = (filepath) => {
+    return filepath.replace(docsDir, "").replace(".md", "");
+  };
+  return {
+    name: "@sugarat/theme-reload",
+    apply: "serve",
+    configureServer(server) {
+      const restart = debounce(() => {
+        server.restart();
+      }, 500);
+      server.watcher.on("add", (path4) => {
+        const route = generateRoute(path4);
+        const meta = getArticleMeta(path4, route, blogConfig?.timeZone);
+        blogConfig.pagesData.push({
+          route,
+          meta
+        });
+        restart();
+      });
+      server.watcher.on("change", (path4) => {
+        const route = generateRoute(path4);
+        const meta = getArticleMeta(path4, route, blogConfig?.timeZone);
+        const matched = blogConfig.pagesData.find((v) => v.route === route);
+        if (matched && !isEqual(matched.meta, meta, ["date", "description"])) {
+          matched.meta = meta;
+          restart();
+        }
+      });
+      server.watcher.on("unlink", (path4) => {
+        const route = generateRoute(path4);
+        const idx = blogConfig.pagesData.findIndex((v) => v.route === route);
+        if (idx >= 0) {
+          blogConfig.pagesData.splice(idx, 1);
+          restart();
+        }
+      });
+    },
+    configResolved(config) {
+      vitepressConfig = config.vitepress;
+      docsDir = vitepressConfig.srcDir;
+      blogConfig = config.vitepress.site.themeConfig.blog;
+    }
+  };
+}
+
+// src/utils/node/vitePlugins.ts
 function getVitePlugins(cfg) {
   const plugins = [];
   const buildEndFn = [];
   plugins.push(inlineBuildEndPlugin(buildEndFn));
   plugins.push(coverImgTransform());
+  plugins.push(themeReloadPlugin());
   if (cfg && cfg.search !== false) {
     const ops = cfg.search instanceof Object ? cfg.search : {};
     plugins.push(
@@ -574,6 +652,7 @@ function getThemeConfig(cfg) {
   registerMdPlugins(extraVPConfig, markdownPlugin);
   patchMermaidPluginCfg(extraVPConfig);
   patchOptimizeDeps(extraVPConfig);
+  patchVPConfig(extraVPConfig, cfg);
   return {
     themeConfig: {
       blog: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.2.30",
+  "version": "0.3.1",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -52,12 +52,14 @@
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.1.0",
+    "artalk": "^2.8.3",
     "element-plus": "^2.3.4",
     "javascript-stringify": "^2.1.0",
     "pagefind": "1.0.3",
     "sass": "^1.56.1",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.1",
+    "vite": "^5",
+    "vitepress": "1.1.4",
     "vue": "^3.4.21"
   },
   "scripts": {

package/src/components/BlogApp.vue

@@ -2,13 +2,12 @@
 import Theme from 'vitepress/theme'
 import { useData } from 'vitepress'
 import { computed } from 'vue'
+import { useDarkTransition } from '../hooks/useDarkTransition'
 import { useOml2d } from '../hooks/useOml2d'
-import { useBlogThemeMode } from '../composables/config/blog'
+import { useBlogThemeMode, useDarkTransitionConfig } from '../composables/config/blog'
 import BlogHomeInfo from './BlogHomeInfo.vue'
 import BlogHomeBanner from './BlogHomeBanner.vue'
 import BlogList from './BlogList.vue'
-import BlogComment from './BlogComment.vue'
-
 import BlogSidebar from './BlogSidebar.vue'
 import BlogImagePreview from './BlogImagePreview.vue'
 import BlogArticleAnalyze from './BlogArticleAnalyze.vue'
@@ -17,6 +16,11 @@ import BlogPopover from './BlogPopover.vue'
 import BlogFooter from './BlogFooter.vue'
 import BlogHomeHeaderAvatar from './BlogHomeHeaderAvatar.vue'
 import BlogBackToTop from './BlogBackToTop.vue'
+import CommentGiscus from './CommentGiscus.vue'
+
+import CommentArtalk from './CommentArtalk.vue'
+import BlogButtonAfterArticle from './BlogButtonAfterArticle.vue'
+import BlogCommentWrapper from './BlogCommentWrapper.vue'
 
 const { frontmatter } = useData()
 const layout = computed(() => frontmatter.value.layout)
@@ -25,14 +29,20 @@ const { Layout } = Theme
 
 // oh-my-live2d 扩展
 useOml2d()
+// 切换深色模式过渡
+// https://vitepress.dev/zh/guide/extending-default-theme#on-appearance-toggle
+useDarkTransition()
+const openTransition = useDarkTransitionConfig()
 </script>
 
 <template>
-  <Layout>
+  <Layout :class="{ 'blog-theme-layout': openTransition }">
     <template #layout-top>
       <slot name="layout-top" />
-      <BlogAlert />
-      <BlogPopover />
+      <ClientOnly>
+        <BlogAlert />
+        <BlogPopover />
+      </ClientOnly>
     </template>
 
     <template #doc-before>
@@ -74,8 +84,12 @@ useOml2d()
       <slot name="doc-after" />
       <!-- 评论 -->
       <ClientOnly>
+        <BlogButtonAfterArticle />
         <BlogBackToTop />
-        <BlogComment />
+        <BlogCommentWrapper>
+          <CommentArtalk />
+          <CommentGiscus />
+        </BlogCommentWrapper>
       </ClientOnly>
     </template>
     <template #layout-bottom>
@@ -191,6 +205,7 @@ useOml2d()
 .blog-list-wrapper {
   width: 100%;
 }
+
 .blog-info-wrapper {
   margin-left: 16px;
   position: sticky;
@@ -216,3 +231,7 @@ useOml2d()
   }
 }
 </style>
+
+<style>
+@import url(./../styles/dark-transition.css);
+</style>

package/src/components/BlogButtonAfterArticle.vue

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import { ElButton } from 'element-plus'
+import { computed, ref, watch } from 'vue'
+import { useData } from 'vitepress'
+import { useBlogConfig } from '../composables/config/blog'
+import { aliPaySVG, weChatPaySVG } from '../constants/svg'
+
+const { buttonAfterArticle: _buttonAfterArticle } = useBlogConfig()
+const { frontmatter } = useData()
+const frontmatterConfig = computed(() => frontmatter.value.buttonAfterArticle)
+
+const buttonAfterArticleConfig = computed(() => {
+  if (frontmatterConfig.value === false || (!frontmatterConfig.value && !_buttonAfterArticle)) {
+    return false
+  }
+
+  return { ..._buttonAfterArticle, ...frontmatterConfig.value }
+})
+
+const showContent = ref(false)
+
+watch(buttonAfterArticleConfig, () => {
+  showContent.value = !!buttonAfterArticleConfig.value?.expand
+}, {
+  immediate: true
+})
+
+const svg = computed(() => {
+  const icon = buttonAfterArticleConfig.value?.icon
+  if (icon === 'aliPay') {
+    return aliPaySVG
+  }
+  else if (icon === 'wechatPay') {
+    return weChatPaySVG
+  }
+  else {
+    return icon as string
+  }
+})
+
+function toggleContent() {
+  showContent.value = !showContent.value
+}
+</script>
+
+<template>
+  <div v-if="buttonAfterArticleConfig" class="appreciation-container">
+    <ElButton :size="buttonAfterArticleConfig.size || 'default'" class="content-button" :type="showContent ? 'danger' : 'primary'" @click="toggleContent">
+      <span class="content-icon" v-html="svg" />
+      {{ showContent ? buttonAfterArticleConfig.closeTitle : buttonAfterArticleConfig.openTitle }}
+    </ElButton>
+    <transition name="content">
+      <div v-if="showContent" class="content-container" v-html="buttonAfterArticleConfig.content" />
+    </transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.appreciation-container {
+  text-align: center;
+  padding: 20px;
+  font-size: 14px;
+  color: #606266;
+
+  :deep(.el-button.el-button--primary){
+    background-color: var(--vp-c-brand-2);
+    border-color: var(--vp-c-brand-2);
+  }
+}
+
+.content-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+  :deep(img){
+    height: 260px;
+  }
+}
+
+.content-icon {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  margin-right: 8px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 进入动画 */
+.content-enter-active {
+  animation: fadeIn 0.5s ease forwards;
+}
+
+/* 离开动画 */
+.content-leave-active {
+  animation: fadeOut 0.3s ease forwards;
+}
+
+/* 淡入 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+/* 淡出 */
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+</style>