Initial project

src/views/index/RepositoryList.vue

@@ -0,0 +1,117 @@
+<template>
+	<div class="repository-list">
+		<t-list class="items" v-if="page" :split="true">
+			<t-list-item class="item" v-for="item in pageResult.list" :key="item.id">
+				<t-layout>
+					<t-aside class="icon" width="auto">
+						<icon name="DUPLICATE" :scale="2" />
+					</t-aside>
+					<t-content class="content">
+						<t-layout>
+							<t-header class="header" height="auto">
+								<div class="name">
+									<router-link class="link black" :to="`/${item.name}/${item.defaultBranch}`">
+										{{ item.name }}
+									</router-link>
+								</div>
+								<div class="time light-gray"
+									 v-text="`最近推送 ${Time.toPassedDate(item.updatedAt)}`"
+									 v-popup="Time.toDateTime(item.updatedAt)"
+								></div>
+							</t-header>
+							<t-content>
+								<span class="gray" v-text="item.description"></span>
+							</t-content>
+						</t-layout>
+					</t-content>
+				</t-layout>
+			</t-list-item>
+		</t-list>
+		<footer class="footer">
+			<t-pagination
+				class="pagination"
+				:total="pageResult.total"
+				:pageSize="16"
+				:showPageSize="false"
+			>
+				<template #totalContent>
+					<div class="total" v-text="`共 ${pageResult.total} 个项目`"></div>
+				</template>
+			</t-pagination>
+		</footer>
+	</div>
+</template>
+<script lang="ts" setup>
+import RepositoryAPI from "@/api/RepositoryAPI";
+import { Repository } from "@/types/Repository";
+import { Icon, Page, PageResult, Time } from "timi-web";
+
+const page = ref<Page>({
+	index: 0,
+	size: 12
+});
+const pageResult = reactive<PageResult<Repository>>({
+	total: 0,
+	list: []
+});
+
+onMounted(async () => {
+	const result = await RepositoryAPI.page(page.value);
+	pageResult.total = result.total;
+	pageResult.list = result.list;
+});
+</script>
+
+<style lang="less" scoped>
+.repository-list {
+	width: 100%;
+
+	.items {
+		height: 100%;
+		min-height: 520px;
+
+		.item {
+
+			.icon {
+				padding: .5rem;
+			}
+
+			.content {
+				padding-left: .5rem;
+
+				.header {
+					display: flex;
+
+					.name {
+						flex: 1;
+						display: block;
+
+						.link {
+							font-size: 16px;
+							font-weight: bold;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.footer {
+		bottom: -1px;
+		padding: 8px 16px;
+		position: sticky;
+		background: rgba(255, 255, 255, .8);
+		border-top: var(--tui-border);
+		border-bottom: var(--tui-border);
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+
+		.pagination {
+
+			.total {
+				flex: 1;
+			}
+		}
+	}
+}
+</style>