🦄 refactor: 拆分公共组件

MaLuns · Nov 4, 2023 · b4bc31c · b4bc31c
1 parent 1345792
commit b4bc31c
Show file tree

Hide file tree

Showing 24 changed files with 181 additions and 142 deletions.
diff --git a/demo/.vitepress/config.ts b/demo/.vitepress/config.ts
@@ -19,6 +19,7 @@ export default defineConfig({
 	},
 	titleTemplate: ':title | Async',
 	themeConfig: {
+		globalComponents: ['TrmDividerTitle'],
 		topBars: [
 			{ title: 'Home', url: '/' },
 			{
@@ -109,5 +110,11 @@ export default defineConfig({
 			tags: '/tags',
 			categorys: '/categories',
 		},
+		noticeOutdate: {
+			enable: true,
+			limitDay: 1,
+			style: 'flat',
+			position: 'bottom',
+		},
 	},
 });
diff --git a/demo/.vitepress/theme/index.ts b/demo/.vitepress/theme/index.ts
@@ -4,8 +4,10 @@
 // };
 
 import { defineTheme } from 'vitepress-theme-async';
+import layout from './layout.vue';
 
 export default defineTheme({
+	Layout: layout,
 	enhanceApp(_ctx) {
 		//
 	},

diff --git a/demo/.vitepress/theme/layout.vue b/demo/.vitepress/theme/layout.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Theme from "vitepress-theme-async";
+const { Layout } = Theme;
+</script>
+<template>
+	<Layout>
+		<template #links-after>
+			<TrmDividerTitle title="asdasd" index="01" />
+		</template>
+	</Layout>
+</template>
diff --git a/packages/vitepress-theme-async/components/TrmPageAbout.vue b/packages/vitepress-theme-async/components/TrmPageAbout.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTheme } from "../composables";
-import TrmDividerTitle from "./TrmDividerTitle.vue";
+import TrmDividerTitle from "./global/TrmDividerTitle.vue";
 let i = 0;
 const theme = useTheme();
 </script>

diff --git a/packages/vitepress-theme-async/components/TrmPageArchive.vue b/packages/vitepress-theme-async/components/TrmPageArchive.vue
@@ -2,9 +2,9 @@
 import { computed, onMounted, ref } from "vue";
 import { useTags, useArchives, useCategories, useAllPosts, useTheme } from "../composables";
 
+import TrmTimeline from "./global/TrmTimeline.vue";
+import TrmDividerTitle from "./global/TrmDividerTitle.vue";
 import TrmPagination from "./TrmPagination.vue";
-import TrmTimeLine from "./TrmTimeline.vue";
-import TrmDividerTitle from "./TrmDividerTitle.vue";
 import { formatDate } from "../utils/client";
 import { useCurrentPageIndex } from "../blog";
 
@@ -80,7 +80,7 @@ onMounted(() => {
 			<TrmDividerTitle :title="filter || 'All'" index="01" />
 		</div>
 		<div class="col-lg-12">
-			<TrmTimeLine :list="pageList" />
+			<TrmTimeline :list="pageList" />
 		</div>
 	</div>
 	<TrmPagination :total="filterList.length" :size="pageSize" />

diff --git a/packages/vitepress-theme-async/components/TrmPageIndex.vue b/packages/vitepress-theme-async/components/TrmPageIndex.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { useAllPosts, useCategories, useTheme } from "../composables";
+import { useData } from "vitepress";
+import { AsyncThemeConfig } from "types";
+import { useAllPosts, useCategories, usePageUrl } from "../composables";
 import { useCurrentPageIndex } from "../blog";
 
-import TrmCardCategorie from "./TrmCardCategorie.vue";
-import TrmCardPost from "./TrmCardPost.vue";
+import TrmCardCategorie from "./global/TrmCardCategorie.vue";
+import TrmCardPost from "./global/TrmCardPost.vue";
 import TrmPagination from "./TrmPagination.vue";
-import TrmDividerTitle from "./TrmDividerTitle.vue";
+import TrmDividerTitle from "./global/TrmDividerTitle.vue";
 
-const theme = useTheme();
+const { page, theme } = useData<AsyncThemeConfig>();
+const pageUrl = usePageUrl();
 const currentPageIndex = useCurrentPageIndex();
-const pageSize = theme.value.indexGenerator?.perPage || 10;
 const allPosts = useAllPosts();
+const pageSize = theme.value.indexGenerator?.perPage || 10;
 
 const categories = useCategories()
 	.sort((a, b) => b[1] - a[1])
@@ -26,15 +29,15 @@ const pageList = computed(() => {
 <template>
 	<div v-if="categories.length > 0" class="row hidden-sm">
 		<div v-for="(item, index) in categories" class="col-lg-6" :key="index">
-			<TrmCardCategorie :name="item[0]" :length="item[1]" />
+			<TrmCardCategorie :name="item[0]" :length="item[1]" :category-url="pageUrl.categorys + '?q=' + item[0]" />
 		</div>
 	</div>
 	<div class="row">
 		<div class="col-lg-12" v-if="categories.length > 0">
 			<TrmDividerTitle :title="$t('title.newPublish')" index="01" />
 		</div>
 		<div class="col-lg-6" v-for="item in pageList" :key="item.url">
-			<TrmCardPost :post="item" />
+			<TrmCardPost :post="item" :category-url="pageUrl.categorys" :sticky="page.frontmatter.index && item.sticky && item.sticky > 0" />
 		</div>
 	</div>
 	<TrmPagination :total="allPosts.length" :size="pageSize" />

diff --git a/packages/vitepress-theme-async/components/TrmPageLinks.vue b/packages/vitepress-theme-async/components/TrmPageLinks.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import TrmDividerTitle from "./global/TrmDividerTitle.vue";
+import TrmCardLink from "./global/TrmCardLink.vue";
 import { useTheme } from "../composables";
-import TrmDividerTitle from "./TrmDividerTitle.vue";
-import { truncate } from "../utils/shared";
+
 let i = 0;
 const theme = useTheme();
 </script>
@@ -38,17 +39,7 @@ const theme = useTheme();
 			<TrmDividerTitle :title="$t('title.links')" :index="`0${++i}`" />
 		</div>
 		<div v-for="item in theme.links" :key="item.url" class="col-lg-6">
-			<a :href="item.url" target="_blank" rel="nofollow">
-				<div class="trm-link-box trm-scroll-animation">
-					<div class="trm-link-avatar">
-						<img draggable="false" :alt="item.name" :src="item.image" />
-					</div>
-					<div class="trm-link-text">
-						<h6 class="trm-mb-10">{{ item.name }}</h6>
-						<div>{{ item.desc ? truncate(item.desc, { length: 32 }) : "" }}</div>
-					</div>
-				</div>
-			</a>
+			<TrmCardLink v-bind="item" />
 		</div>
 	</div>
 	<slot name="links-after" />

diff --git a/packages/vitepress-theme-async/components/TrmPagePost.vue b/packages/vitepress-theme-async/components/TrmPagePost.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { formatDate } from "../utils/client";
-import { usePrevNext, useTheme } from "../composables";
+import { usePageUrl, usePrevNext, useTheme } from "../composables";
 
-import TrmDividerTitle from "./TrmDividerTitle.vue";
-import TrmCardPost from "./TrmCardPost.vue";
-import TrmCardPostMini from "./TrmCardPostMini.vue";
+import TrmDividerTitle from "./global/TrmDividerTitle.vue";
+import TrmCardPost from "./global/TrmCardPost.vue";
+import TrmCardPostMini from "./global/TrmCardPostMini.vue";
 import TrmReward from "./TrmReward.vue";
 import TrmPostCopyright from "./TrmPostCopyright.vue";
 import TrmOutdateNotice from "./TrmOutdateNotice.vue";
@@ -14,6 +14,7 @@ import TrmIconUser from "./icons/TrmIconUser.vue";
 
 const control = usePrevNext();
 const theme = useTheme();
+const pageUrl = usePageUrl();
 </script>
 <template>
 	<slot name="post-before" />
@@ -59,11 +60,11 @@ const theme = useTheme();
 			<TrmDividerTitle :title="$t('title.otherArticles')" index="01" />
 		</div>
 		<div class="col-lg-6" v-if="control.prev">
-			<TrmCardPost v-if="theme.postPagination?.type === 'large'" :post="control.prev" />
+			<TrmCardPost v-if="theme.postPagination?.type === 'large'" :post="control.prev" :category-url="pageUrl.categorys" :sticky="false" />
 			<TrmCardPostMini v-else :post="control.prev" />
 		</div>
 		<div class="col-lg-6" v-if="control.next">
-			<TrmCardPost v-if="theme.postPagination?.type === 'large'" :post="control.next" />
+			<TrmCardPost v-if="theme.postPagination?.type === 'large'" :post="control.next" :category-url="pageUrl.categorys" :sticky="false" />
 			<TrmCardPostMini v-else :post="control.next" />
 		</div>
 	</div>

diff --git a/packages/vitepress-theme-async/components/TrmSidebarUser.vue b/packages/vitepress-theme-async/components/TrmSidebarUser.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTheme } from "../composables/index";
-import TrmSwichImgs from "./TrmSwichImgs.vue";
+import TrmSwichImgs from "./global/TrmSwichImgs.vue";
 import avatarImg from "../assets/avatar.jpg";
 import { onMounted, ref } from "vue";
 

diff --git a/packages/vitepress-theme-async/components/TrmTopBarLogo.vue b/packages/vitepress-theme-async/components/TrmTopBarLogo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTheme } from "../composables/index";
-import TrmSwichImgs from "./TrmSwichImgs.vue";
+import TrmSwichImgs from "./global/TrmSwichImgs.vue";
 
 const theme = useTheme();
 </script>

diff --git a/...eme-async/components/TrmCardCategorie.vue → ...nc/components/global/TrmCardCategorie.vue b/...eme-async/components/TrmCardCategorie.vue → ...nc/components/global/TrmCardCategorie.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { usePageUrl } from "../composables";
-import TrmIconNext from "./icons/TrmIconNext.vue";
+import TrmIconNext from "../icons/TrmIconNext.vue";
 
 defineProps<{
 	name: string;
+	categoryUrl: string;
 	length: number;
 }>();
-
-const pageUrl = usePageUrl();
 </script>
 
 <template>
@@ -17,7 +15,7 @@ const pageUrl = usePageUrl();
 			<span class="trm-number">{{ length }}</span>
 		</h6>
 		<div class="trm-divider trm-mb-20 trm-mt-20"></div>
-		<a :href="pageUrl.categorys + '?q=' + name" class="trm-label">
+		<a :href="categoryUrl" class="trm-label">
 			{{ $t("title.more") }}
 			<TrmIconNext class="arrow-right" />
 		</a>

diff --git a/packages/vitepress-theme-async/components/global/TrmCardLink.vue b/packages/vitepress-theme-async/components/global/TrmCardLink.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { truncate } from "../../utils/shared";
+defineProps<{
+	url?: string;
+	name?: string;
+	image?: string;
+	desc?: string;
+}>();
+</script>
+<template>
+	<a :href="url" target="_blank" rel="nofollow">
+		<div class="trm-link-box trm-scroll-animation">
+			<div class="trm-link-avatar">
+				<img draggable="false" :alt="name" :src="image" />
+			</div>
+			<div class="trm-link-text">
+				<h6 class="trm-mb-10">{{ name }}</h6>
+				<div>{{ desc ? truncate(desc, { length: 32 }) : "" }}</div>
+			</div>
+		</div>
+	</a>
+</template>
+<style lang="less">
+.trm-link-box {
+	display: flex;
+	padding: 20px;
+	border-radius: var(--card-border-radius, 10px);
+	background-color: var(--theme-bg-color, #fcfcfe);
+	box-shadow: var(--box-shadow2, 0 2px 4px -2px rgba(0, 0, 0, 0.15));
+	margin-bottom: var(--card-bottom-card, 40px);
+
+	.trm-link-avatar {
+		width: 50px;
+		height: 50px;
+		margin-right: 20px;
+		flex-shrink: 0;
+
+		img {
+			width: 100%;
+			height: 100%;
+			border-radius: 50%;
+			box-shadow: none !important;
+			padding: 2px;
+		}
+	}
+
+	.trm-link-text {
+		div {
+			height: 2.6em;
+			line-height: 1.3em;
+			overflow: hidden;
+		}
+	}
+}
+</style>
diff --git a/...ss-theme-async/components/TrmCardPost.vue → ...e-async/components/global/TrmCardPost.vue b/...ss-theme-async/components/TrmCardPost.vue → ...e-async/components/global/TrmCardPost.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { useData } from "vitepress";
-import { formatDate } from "../utils/client";
-import { usePageUrl } from "../composables";
+import { formatDate } from "../../utils/client";
+import defImage from "../../assets/block.jpg";
 import TrmSwichImgs from "./TrmSwichImgs.vue";
-import defImage from "../assets/block.jpg";
 
-defineProps<{
-	post: AsyncTheme.PostData;
-}>();
-
-const { page } = useData();
-const pageUrl = usePageUrl();
+withDefaults(
+	defineProps<{
+		post: AsyncTheme.PostData;
+		categoryUrl: string;
+		sticky?: boolean;
+	}>(),
+	{
+		sticky: false,
+	},
+);
 </script>
 
 <template>
@@ -29,12 +31,12 @@ const pageUrl = usePageUrl();
 				<TrmSwichImgs :src="post.cover.default || defImage" :attrs="{ alt: 'cover', class: 'no-fancybox' }" />
 			</template>
 		</a>
-		<div v-if="page.frontmatter.index && post.sticky && post.sticky > 0" class="trm-top">
+		<div v-if="sticky" class="trm-top">
 			{{ $t("post.sticky") }}
 		</div>
 		<div class="trm-card-descr">
 			<div class="trm-label trm-category trm-mb-20">
-				<a :href="post.categories?.length ? pageUrl.categorys + '?q=' + post.categories[0] : '#.'">
+				<a :href="post.categories?.length ? categoryUrl + '?q=' + post.categories[0] : '#.'">
 					{{ post.categories?.length ? post.categories[0] : $t("title.unclassified") }}
 				</a>
 			</div>

diff --git a/...heme-async/components/TrmCardPostMini.vue → ...ync/components/global/TrmCardPostMini.vue b/...heme-async/components/TrmCardPostMini.vue → ...ync/components/global/TrmCardPostMini.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { formatDate } from "../utils/client";
+import { formatDate } from "../../utils/client";
 import TrmSwichImgs from "./TrmSwichImgs.vue";
-import defImage from "../assets/block.jpg";
+import defImage from "../../assets/block.jpg";
 
 defineProps<{
 	post: AsyncTheme.PostData;

diff --git a/...heme-async/components/TrmDividerTitle.vue → ...ync/components/global/TrmDividerTitle.vue b/...heme-async/components/TrmDividerTitle.vue → ...ync/components/global/TrmDividerTitle.vue
diff --git a/...s-theme-async/components/TrmSwichImgs.vue → ...-async/components/global/TrmSwichImgs.vue b/...s-theme-async/components/TrmSwichImgs.vue → ...-async/components/global/TrmSwichImgs.vue
diff --git a/...ss-theme-async/components/TrmTimeline.vue → ...e-async/components/global/TrmTimeline.vue b/...ss-theme-async/components/TrmTimeline.vue → ...e-async/components/global/TrmTimeline.vue
@@ -1,33 +1,41 @@
 <script setup lang="ts">
-import { formatDate } from "../utils/client";
-defineProps<{ list: AsyncTheme.PostData[] }>();
+import { formatDate } from "../../utils/client";
+
+type DataItem = {
+	url: string;
+	title: string;
+	date?: string | number;
+	excerpt?: string;
+};
+
+defineProps<{ list: DataItem[] }>();
 </script>
 <template>
 	<div class="trm-timeline">
-		<div v-for="post in list" class="trm-timeline-item trm-scroll-animation" :key="post.url">
+		<div v-for="item in list" class="trm-timeline-item trm-scroll-animation" :key="item.url">
 			<div class="trm-timeline-mark-light"></div>
 			<div class="trm-timeline-mark"></div>
 			<div class="trm-a trm-timeline-content">
 				<div class="trm-card-header">
 					<div class="trm-left-side">
 						<h6>
-							<a :href="post.url" class="trm-anima-link">
-								{{ post.title }}
+							<a :href="item.url" class="trm-anima-link">
+								{{ item.title }}
 							</a>
 						</h6>
-						<div class="trm-text-sm trm-accent-color trm-mt-15">
+						<div v-if="item.date" class="trm-text-sm trm-accent-color trm-mt-15">
 							<ul class="trm-card-data trm-label">
 								<li class="trm-accent-color">
-									{{ formatDate(post.date, "YY-MM-DD") }}
+									{{ formatDate(item.date, "YY-MM-DD") }}
 								</li>
 								<li class="trm-accent-color">
-									{{ formatDate(post.date, "HH:mm") }}
+									{{ formatDate(item.date, "HH:mm") }}
 								</li>
 							</ul>
 						</div>
 					</div>
 				</div>
-				<div v-if="post.excerpt" class="trm-publication trm-mt-15" v-html="post.excerpt"></div>
+				<div v-if="item.excerpt" class="trm-publication trm-mt-15" v-html="item.excerpt"></div>
 			</div>
 		</div>
 	</div>