timi/git
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Loading placeholder

Browse Source
This commit is contained in:
Timi
2025-07-12 10:36:33 +08:00
parent bc9dd34425
commit 70111ce18b
11 changed files with 370 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/FileViewer.vue
View File

@ -264,7 +264,7 @@ const mediaComponent = computed(() => {
height: 100%;
.tabs {
top: calc(50px + 49px + 30px);
top: calc(96px + 30px);
position: sticky;
z-index: 9;
border-top: var(--tui-border);

10
src/components/PushLogTimeline.vue
View File

@ -26,8 +26,8 @@
<span class="selectable" v-text="action.refName"></span>
</div>
<template v-if="action.commitList">
<h4 v-if="showRepo || showBranch">提交记录：</h4>
<div class="commits">
<h4 v-if="showRepo || showBranch" class="title">提交记录：</h4>
<div
class="commit"
v-for="(commit, commitIndex) in action.commitList"
@ -103,9 +103,17 @@ const { items } = toRefs(props);
.commits {
.title {
margin: .5rem 0;
}
.commit {
display: flex;
&:first-child {
margin-top: .5rem;
}
&:nth-last-child(n + 2) {
margin-bottom: .5rem;
}

140
src/layout/RepositoryLayout.vue
View File

@ -1,14 +1,12 @@
<template>
<div class="repository-layout" v-if="repositoryStore.value">
<t-layout class="header">
<t-content>
<t-space class="title" align="center">
<h3 class="title" v-text="repositoryStore.value.name"></h3>
<p class="light-gray" v-text="repositoryStore.value.description"></p>
<div class="header">
<section class="top">
<t-space class="left" align="center">
<h4 class="title" v-text="repositoryStore.value.name"></h4>
<p class="description light-gray" v-text="repositoryStore.value.description"></p>
</t-space>
</t-content>
<t-aside class="aside" width="auto">
<t-space align="center">
<t-space class="right" align="center">
<t-button class="repository-list" theme="default" variant="text" @click="backRepositoryList">
<template #icon>
<icon class="icon" name="LIST" />
@ -17,40 +15,40 @@
</t-button>
<login-menu />
</t-space>
</t-aside>
</t-layout>
<t-head-menu class="menu" v-model="menuValue">
<t-menu-item
:to="`/${repositoryStore.value.name}/${repositoryStore.value.defaultBranch}`"
:value="Menu.FILE"
>
项目文件
</t-menu-item>
<t-menu-item
:to="`/${repositoryStore.value.name}/commits`"
:value="Menu.COMMIT_LOG"
>
更新记录
</t-menu-item>
<t-menu-item
:to="`/${repositoryStore.value.name}/issues`"
:value="Menu.ISSUE"
>
问题反馈
</t-menu-item>
<t-menu-item
:to="`/${repositoryStore.value.name}/merges`"
:value="Menu.MERGE"
>
合并请求
</t-menu-item>
<t-menu-item
:to="`/${repositoryStore.value.name}/releases`"
:value="Menu.RELEASE"
>
版本发布
</t-menu-item>
</t-head-menu>
</section>
<t-head-menu class="menu" v-model="menuValue">
<t-menu-item
:to="`/${repositoryStore.value.name}/${repositoryStore.value.defaultBranch}`"
:value="Menu.FILE"
>
项目文件
</t-menu-item>
<t-menu-item
:to="`/${repositoryStore.value.name}/commits`"
:value="Menu.COMMIT_LOG"
>
更新记录
</t-menu-item>
<t-menu-item
:to="`/${repositoryStore.value.name}/issues`"
:value="Menu.ISSUE"
>
问题反馈
</t-menu-item>
<t-menu-item
:to="`/${repositoryStore.value.name}/merges`"
:value="Menu.MERGE"
>
合并请求
</t-menu-item>
<t-menu-item
:to="`/${repositoryStore.value.name}/releases`"
:value="Menu.RELEASE"
>
版本发布
</t-menu-item>
</t-head-menu>
</div>
<div class="content">
<router-view v-slot="{ Component }">
<keep-alive>
@ -119,11 +117,12 @@ onMounted(async () => repositoryStore.value = await RepositoryAPI.view(route.par
<style lang="less" scoped>
.repository-layout {
display: flex;
border-bottom: var(--tui-border);
flex-direction: column;
.header {
top: 0;
height: 50px;
z-index: 3;
position: sticky;
background: rgba(231, 234, 239, .8);
@ -131,36 +130,49 @@ onMounted(async () => repositoryStore.value = await RepositoryAPI.view(route.par
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
.title {
padding-left: .5rem;
.top {
display: flex;
padding: .5rem 1rem;
border-bottom: var(--tui-border);
justify-content: space-between;
.left {
.title {
margin: 0;
padding-left: .5rem;
}
.description {
margin: 0;
font-size: 13px;
}
}
}
.aside {
display: flex;
align-items: center;
padding-right: 1rem;
.menu {
.repository-list {
.icon {
margin-right: .5rem;
}
:deep(.t-menu) {
margin: 0;
}
}
}
.menu {
top: 50px;
z-index: 3;
position: sticky;
background: rgba(255, 255, 255, .8);
border-bottom: var(--tui-border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
.content {
flex: 1;
display: flex;
min-height: 520px;
flex-direction: column;
:deep(.t-menu) {
margin: 0;
> * {
flex: 1;
}
}
}
@media screen and (max-width: 1200px) {
.repository-layout {
// - 底部
min-height: calc(100% - 110px);
}
}
</style>

1
src/types/Repository.ts
View File

@ -60,6 +60,7 @@ export type File = {
lastCommitterDate: number;
children: boolean;
isLoading: boolean;
}
export enum FileViewerType {

66
src/views/index/RepositoryList.vue
View File

@ -1,30 +1,23 @@
<template>
<div class="repository-list">
<loading :showOn="isLoading" margin="1rem" />
<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>
<icon name="DUPLICATE" :scale="2" />
<div class="content">
<div class="header">
<h3 class="name">
<router-link class="link black" :to="`/${item.name}/${item.defaultBranch}`">
{{ item.name }}
</router-link>
</h3>
<div class="time light-gray"
v-text="`最近推送 ${Time.toPassedDate(item.updatedAt)}`"
v-popup="Time.toDateTime(item.updatedAt)"
></div>
</div>
<div class="description gray" v-text="item.description"></div>
</div>
</t-list-item>
</t-list>
<footer class="footer">
@ -44,7 +37,7 @@
<script lang="ts" setup>
import RepositoryAPI from "@/api/RepositoryAPI";
import { Repository } from "@/types/Repository";
import { Icon, Page, PageResult, Time } from "timi-web";
import { Icon, Loading, Page, PageResult, Time } from "timi-web";
const page = ref<Page>({
index: 0,
@ -54,11 +47,13 @@ const pageResult = reactive<PageResult<Repository>>({
total: 0,
list: []
});
const isLoading = ref(false);
onMounted(async () => {
isLoading.value = true;
const result = await RepositoryAPI.page(page.value);
pageResult.total = result.total;
pageResult.list = result.list;
isLoading.value = false;
});
</script>
@ -71,25 +66,22 @@ onMounted(async () => {
min-height: 520px;
.item {
.icon {
padding: .5rem;
}
display: flex;
padding: 16px;
.content {
padding-left: .5rem;
flex: 1;
display: flex;
margin-left: 16px;
flex-direction: column;
.header {
display: flex;
justify-content: space-between;
.name {
flex: 1;
display: block;
.link {
font-size: 16px;
font-weight: bold;
}
margin: 0;
font-size: 16px;
}
}
}

6
src/views/index/RepositoryLog.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="repository-log">
<push-log-timeline :items="list"/>
<push-log-timeline :items="list" />
<div class="bottom">
<loading :showOn="isLoading"/>
<empty-tips :showOn="isFinished && !isLoading"/>
<loading :showOn="isLoading" />
<empty-tips :showOn="isFinished && !isLoading" />
<t-button v-show="!isFinished && !isLoading" @click="doFetchEvent">加载更多</t-button>
</div>
</div>

80
src/views/repository/CommitLog.vue
View File

@ -1,30 +1,27 @@
<template>
<div v-if="repositoryStore.value" class="commit-log">
<t-layout>
<t-header class="header">
<div>
<t-select class="branch" v-model="branch" label="分支：" placeholder="全部" clearable>
<t-option
v-for="item in repositoryStore.value.branchList"
:key="item.name"
:value="item.name"
:label="item.name"
/>
</t-select>
</div>
</t-header>
<t-content class="content">
<push-log-timeline :items="commits" :show-repo="false" :show-branch="!branch" />
<div class="more">
<empty-tips :showOn="isFinished" />
<t-button v-if="!isFinished" @click="doFetchEvent">加载更多</t-button>
</div>
</t-content>
</t-layout>
<div class="header">
<t-select class="branch" v-model="branch" label="分支：" placeholder="全部" clearable>
<t-option
v-for="item in repositoryStore.value.branchList"
:key="item.name"
:value="item.name"
:label="item.name"
/>
</t-select>
</div>
<div class="content">
<loading :showOn="isLoading" margin="0 0 1rem 0" />
<push-log-timeline :items="commits" :show-repo="false" :show-branch="!branch" />
<div class="more">
<empty-tips :showOn="isFinished" />
<t-button v-if="!isLoading && !isFinished" @click="doFetchEvent">加载更多</t-button>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { EmptyTips, Page } from "timi-web";
import { EmptyTips, Loading, Page } from "timi-web";
import RepositoryAPI from "@/api/RepositoryAPI";
import { useRepositoryStore } from "@/store/repository.ts";
import { ActionLogView } from "@/types/Common.ts";
@ -32,33 +29,32 @@ import PushLogTimeline from "@/components/PushLogTimeline.vue";
const repositoryStore = useRepositoryStore();
const branch = ref();
const page = ref<Page>({
index: 0,
size: 12
});
const branch = ref();
const commits = reactive<ActionLogView[]>([]);
const isLoading = ref(false);
const isFinished = ref(false);
const doFetchEvent = async () => {
if (repositoryStore.value) {
const result = await RepositoryAPI.pagePush(repositoryStore.value.name, branch.value ?? "all", page.value);
const list = result.list;
commits.push(...list);
page.value.index++;
if (result.list.length < page.value.size) {
isFinished.value = true;
}
isLoading.value = true;
const result = await RepositoryAPI.pagePush(repositoryStore.value!.name, branch.value ?? "all", page.value);
const list = result.list;
commits.push(...list);
page.value.index++;
if (result.list.length < page.value.size) {
isFinished.value = true;
}
isLoading.value = false;
};
watch(branch, () => {
if (repositoryStore.value) {
page.value.index = 0;
commits.length = 0;
isFinished.value = false;
doFetchEvent();
}
page.value.index = 0;
commits.length = 0;
isFinished.value = false;
doFetchEvent();
});
onMounted(doFetchEvent);
</script>
@ -66,7 +62,8 @@ onMounted(doFetchEvent);
.commit-log {
.header {
top: calc(50px + 49px);
top: 96px;
height: 50px;
padding: 0 20px;
display: flex;
z-index: 3;
@ -76,10 +73,15 @@ onMounted(doFetchEvent);
border-bottom: var(--tui-border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
.branch {
width: 12rem;
}
}
.content {
padding: 1rem 2rem 1rem 1rem;
min-height: 520px;
.more {
display: flex;

26
src/views/repository/FileDetail.vue
View File

@ -14,6 +14,7 @@
></t-option>
</t-select>
<div class="tree-container">
<loading :showOn="treeLoading" margin="1rem" />
<t-tree
ref="tree"
class="tree"
@ -28,6 +29,7 @@
:expand-parent="true"
value-mode="all"
expand-all
:empty="() => ''"
:load="treeLoad"
:onActive="onTreeActivated"
>
@ -35,6 +37,9 @@
<icon name="FILE" fill="GRAY" v-if="node.data.type === FileType.FILE" />
<icon name="FOLDER" v-if="node.data.type === FileType.DIRECTORY" />
</template>
<template #operations="{ node }">
<loading v-if="node.data.isLoading" :size="14" :tips="false" margin="0 .5rem 0 0" />
</template>
</t-tree>
</div>
</pane>
@ -69,7 +74,7 @@
</split-pane>
</template>
<script lang="ts" setup>
import { Icon } from "timi-web";
import { Icon, Loading } from "timi-web";
import type { TreeInstanceFunctions, TreeProps } from "tdesign-vue-next";
import RepositoryAPI from "@/api/RepositoryAPI";
import { File, FileType } from "@/types/Repository";
@ -100,6 +105,7 @@ onMounted(async () => {
// ---------- 文件树 ----------
const tree = ref<TreeInstanceFunctions>();
const treeLoading = ref(false);
const treeItems = ref<File[]>([]);
const treeMap = {
value: "path",
@ -110,9 +116,14 @@ watch(branch, async () => {
if (!repositoryStore.value || !branch.value) {
return;
}
treeLoading.value = true;
treeItems.value = await RepositoryAPI.listFile(repositoryStore.value!.name, branch.value, "/");
treeItems.value.forEach((item) => item.children = item.type === FileType.DIRECTORY);
treeItems.value.forEach((item) => {
item.isLoading = false;
item.children = item.type === FileType.DIRECTORY;
});
await nextTick();
treeLoading.value = false;
// 文件树
if (tree.value) {
const items = treeItems.value;
@ -127,6 +138,7 @@ watch(branch, async () => {
const treeLabel: TreeProps["label"] = (_h, node) => node.data.name;
const treeLoad: TreeProps["load"] = async (node) => {
const file = node.data;
file.isLoading = true;
const result = await RepositoryAPI.listFile(
repositoryStore.value!.name,
branch.value,
@ -138,7 +150,11 @@ const treeLoad: TreeProps["load"] = async (node) => {
file.path = `${file.path}/${deep.name}`;
return await treeLoad!(node);
}
result.forEach((item) => item.children = item.type === FileType.DIRECTORY);
result.forEach((item) => {
item.isLoading = false;
item.children = item.type === FileType.DIRECTORY;
});
file.isLoading = false;
return result;
};
@ -192,7 +208,7 @@ const onTreeActivated = (_value: any, context: { node: any }) => {
flex-direction: column;
.branch {
top: calc(50px + 49px);
top: 96px;
z-index: 1;
position: sticky;
border-bottom: var(--tui-border);
@ -246,7 +262,7 @@ const onTreeActivated = (_value: any, context: { node: any }) => {
flex-direction: column;
.header {
top: calc(50px + 49px);
top: 96px;
z-index: 4;
display: flex;
position: sticky;

190
src/views/repository/IssueList.vue
View File

@ -1,75 +1,65 @@
<template>
<t-layout class="issue-list" v-if="repositoryStore.value">
<t-header class="header">
<t-row justify="space-between">
<t-col flex="auto">
<t-input-adornment prepend="搜索">
<t-input v-model="page.keyword" placeholder="请输入关键字" />
</t-input-adornment>
</t-col>
<t-col class="right">
<t-space>
<t-select v-model="page.type" label="类型" placeholder="全部" autoWidth clearable>
<t-option v-for="(value, key) in Type" :key="key" :value="key" :label="value" />
</t-select>
<t-select v-model="page.status" label="状态" placeholder="全部" autoWidth clearable>
<t-option v-for="(value, key) in Status" :key="key" :value="key" :label="value" />
</t-select>
<router-link :to="`/${repositoryStore.value.name}/issues/edit`">
<t-button theme="success">新建反馈</t-button>
</router-link>
</t-space>
</t-col>
</t-row>
</t-header>
<t-content class="list">
<t-list v-if="pageResult" :split="true">
<t-list-item class="action" v-for="item in pageResult.list" :key="item.id">
<t-layout>
<t-aside width="auto">
<t-space class="tags" :size="4">
<div
v-if="item.type"
class="tag type"
:class="colorType[(<any>Type)[item.type]]"
v-text="(<any>Type)[item.type]"
></div>
<div
v-if="item.status"
class="tag status"
:class="colorStatus[(<any>Status)[item.status]]"
v-text="(<any>Status)[item.status]"
></div>
</t-space>
</t-aside>
<t-content class="content">
<router-link :to="`/${repositoryStore.value.name}/issues/${item.id}`">
<t-link theme="default" size="large" hover="color" :content="item.title" />
</router-link>
<p class="time gray">
<span v-if="item.closedAt" v-text="`关闭于 ${Time.toPassedDateTime(item.closedAt)}`"></span>
<span v-else v-text="`创建于 ${Time.toPassedDateTime(item.createdAt)}`"></span>
</p>
</t-content>
</t-layout>
</t-list-item>
</t-list>
<empty-tips :showOn="pageResult?.total === 0" />
</t-content>
<t-footer class="footer" height="auto">
<div class="issue-list" v-if="repositoryStore.value">
<header class="header">
<div class="search">
<t-input-adornment prepend="搜索">
<t-input v-model="page.keyword" placeholder="请输入关键字" />
</t-input-adornment>
</div>
<t-space class="filter">
<t-select v-model="page.type" label="类型" placeholder="全部" autoWidth clearable>
<t-option v-for="(value, key) in Type" :key="key" :value="key" :label="value" />
</t-select>
<t-select v-model="page.status" label="状态" placeholder="全部" autoWidth clearable>
<t-option v-for="(value, key) in Status" :key="key" :value="key" :label="value" />
</t-select>
<router-link :to="`/${repositoryStore.value.name}/issues/edit`">
<t-button theme="success">新建反馈</t-button>
</router-link>
</t-space>
</header>
<t-list class="issues" :split="true">
<loading :showOn="isLoading" margin="1rem 0" />
<empty-tips v-if="!isLoading && pageResult?.total === 0" />
<t-list-item class="issue" v-for="item in pageResult?.list" :key="item.id">
<t-space class="tags" :size="4">
<div
v-if="item.type"
class="tag type"
:class="colorType[(<any>Type)[item.type]]"
v-text="(<any>Type)[item.type]"
></div>
<div
v-if="item.status"
class="tag status"
:class="colorStatus[(<any>Status)[item.status]]"
v-text="(<any>Status)[item.status]"
></div>
</t-space>
<div class="content">
<router-link :to="`/${repositoryStore.value.name}/issues/${item.id}`">
<t-link theme="default" size="large" hover="color" :content="item.title" />
</router-link>
<p class="time gray">
<span v-if="item.closedAt" v-text="`关闭于 ${Time.toPassedDateTime(item.closedAt)}`"></span>
<span v-else v-text="`创建于 ${Time.toPassedDateTime(item.createdAt)}`"></span>
</p>
</div>
</t-list-item>
</t-list>
<footer v-if="pageResult" class="footer">
<t-pagination
v-if="pageResult"
:total="pageResult.total"
:pageSize="16"
:showPageSize="false"
:onCurrentChange="(current: number) => page.index = current - 1"
/>
</t-footer>
</t-layout>
</footer>
</div>
</template>
<script lang="ts" setup>
import { EmptyTips, PageResult, Time, Toolkit } from "timi-web";
import { EmptyTips, Loading, PageResult, Time, Toolkit } from "timi-web";
import IssueAPI from "@/api/IssueAPI";
import { Issue, Page, Status, Type } from "@/types/Issue";
import { useRepositoryStore } from "@/store/repository.ts";
@ -96,10 +86,13 @@ const page = reactive<Page>({
index: 0,
size: 12
});
const isLoading = ref(false);
const pageResult = ref<PageResult<Issue>>();
const fetchList = Toolkit.debounce(async () => pageResult.value = await IssueAPI.page(page));
const fetchList = Toolkit.debounce(async () => {
isLoading.value = true;
pageResult.value = await IssueAPI.page(page);
isLoading.value = false;
});
watch(page, fetchList);
onMounted(async () => {
if (repositoryStore.value) {
@ -111,12 +104,15 @@ onMounted(async () => {
<style lang="less" scoped>
.issue-list {
min-height: 480px;
display: flex;
flex-direction: column;
justify-content: space-between;
.header {
top: calc(50px + 49px);
z-index: 3;
top: 96px;
height: 50px;
padding: 0 20px;
z-index: 3;
display: flex;
position: sticky;
background: rgba(231, 234, 239, .8);
@ -125,43 +121,49 @@ onMounted(async () => {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
.t-row {
width: 100%;
}
.right {
margin-left: 1rem;
.search {
flex: 1;
}
.filter {
padding: 0 1rem;
margin-left: 1rem;
}
}
.list {
.issues {
flex: 1;
.tags {
display: flex;
padding-top: 1px;
.issue {
.tag {
padding: 1px 5px;
:deep(.t-list-item-main) {
align-items: start;
}
&.type {
color: #FFF;
.tags {
height: 100%;
display: flex;
padding-top: 1px;
.tag {
padding: 1px 5px;
&.type {
color: #FFF;
}
}
}
}
.content {
padding-left: .5rem;
.content {
flex: 1;
padding-left: .5rem;
.title {
margin: 0;
}
.title {
margin: 0;
}
.time {
margin: 0;
.time {
margin: 0;
}
}
}
}
@ -176,10 +178,4 @@ onMounted(async () => {
-webkit-backdrop-filter: blur(10px);
}
}
@media screen and (max-width: 992px) {
.issue-list {
min-height: calc(100vh - 100px);
}
}
</style>

198
src/views/repository/MergeList.vue
View File

@ -1,90 +1,65 @@
<template>
<t-layout v-if="repositoryStore.value" class="merge-list">
<t-header class="header">
<t-row justify="space-between">
<t-col flex="auto">
<t-input-adornment prepend="搜索">
<t-input v-model="page.keyword" placeholder="请输入关键字" />
</t-input-adornment>
</t-col>
<t-col class="right">
<t-space>
<t-select
v-model="page.type"
label="类型"
placeholder="全部"
autoWidth
clearable
>
<t-option v-for="(value, key) in Type" :key="key" :value="key" :label="value" />
</t-select>
<t-select
v-model="page.status"
label="状态"
placeholder="全部"
autoWidth
clearable
>
<t-option v-for="(value, key) in Status" :key="key" :value="key" :label="value" />
</t-select>
<router-link :to="`/${repositoryStore.value.name}/merges/edit`">
<t-button theme="success">申请合并</t-button>
</router-link>
</t-space>
</t-col>
</t-row>
</t-header>
<t-content class="list">
<t-list v-if="pageResult" :split="true">
<t-list-item class="action" v-for="item in pageResult.list" :key="item.id">
<t-layout>
<t-aside width="auto">
<t-space class="tags" :size="4">
<div
v-if="item.type"
class="tag type"
:class="colorType[(<any>Type)[item.type]]"
v-text="(<any>Type)[item.type]"
></div>
<div
v-if="item.status"
class="tag status"
:class="colorStatus[(<any>Status)[item.status]]"
v-text="(<any>Status)[item.status]"
></div>
</t-space>
</t-aside>
<t-content class="content">
<router-link :to="`/${repositoryStore.value.name}/merges/${item.id}`">
<t-link theme="default" size="large" hover="color" :content="item.title" />
</router-link>
<p class="time gray">
<span
v-if="item.rejectedAt"
v-text="`拒绝于 ${Time.toPassedDateTime(item.rejectedAt)}`"
></span>
<span v-else v-text="`申请于 ${Time.toPassedDateTime(item.createdAt)}`"></span>
</p>
</t-content>
</t-layout>
</t-list-item>
</t-list>
<empty-tips :showOn="pageResult?.total === 0" />
</t-content>
<t-footer class="footer" height="auto">
<div v-if="repositoryStore.value" class="merge-list">
<header class="header">
<div class="search">
<t-input-adornment prepend="搜索">
<t-input v-model="page.keyword" placeholder="请输入关键字" />
</t-input-adornment>
</div>
<t-space class="filter">
<t-select v-model="page.type" label="类型" placeholder="全部" autoWidth clearable>
<t-option v-for="(value, key) in Type" :key="key" :value="key" :label="value" />
</t-select>
<t-select v-model="page.status" label="状态" placeholder="全部" autoWidth clearable>
<t-option v-for="(value, key) in Status" :key="key" :value="key" :label="value" />
</t-select>
<router-link :to="`/${repositoryStore.value.name}/merges/edit`">
<t-button theme="success">申请合并</t-button>
</router-link>
</t-space>
</header>
<t-list class="merges" v-if="pageResult" :split="true">
<loading :showOn="isLoading" margin="1rem 0" />
<empty-tips v-if="!isLoading && pageResult?.total === 0" />
<t-list-item class="merge" v-for="item in pageResult.list" :key="item.id">
<t-space class="tags" :size="4">
<div
v-if="item.type"
class="tag type"
:class="colorType[(<any>Type)[item.type]]"
v-text="(<any>Type)[item.type]"
></div>
<div
v-if="item.status"
class="tag status"
:class="colorStatus[(<any>Status)[item.status]]"
v-text="(<any>Status)[item.status]"
></div>
</t-space>
<div class="content">
<router-link :to="`/${repositoryStore.value.name}/merges/${item.id}`">
<t-link theme="default" size="large" hover="color" :content="item.title" />
</router-link>
<p class="time gray">
<span v-if="item.rejectedAt" v-text="`拒绝于 ${Time.toPassedDateTime(item.rejectedAt)}`"></span>
<span v-else v-text="`申请于 ${Time.toPassedDateTime(item.createdAt)}`"></span>
</p>
</div>
</t-list-item>
</t-list>
<footer v-if="pageResult" class="footer">
<t-pagination
v-if="pageResult"
:total="pageResult.total"
:pageSize="16"
:showPageSize="false"
:onCurrentChange="(current: number) => page.index = current - 1"
/>
</t-footer>
</t-layout>
</footer>
</div>
</template>
<script lang="ts" setup>
import { EmptyTips, PageResult, Time, Toolkit } from "timi-web";
import { EmptyTips, Loading, PageResult, Time, Toolkit } from "timi-web";
import MergeAPI from "@/api/MergeAPI";
import { Merge, Page, Status, Type } from "@/types/Merge";
import { useRepositoryStore } from "@/store/repository.ts";
@ -105,11 +80,13 @@ const colorStatus = {
};
const repositoryStore = useRepositoryStore();
const page = reactive<Page>({
repositoryId: undefined,
index: 0,
size: 12
});
const isLoading = ref(false);
const pageResult = ref<PageResult<Merge>>();
const fetchList = Toolkit.debounce(async () => pageResult.value = await MergeAPI.page(page));
@ -124,11 +101,13 @@ onMounted(async () => {
<style lang="less" scoped>
.merge-list {
min-height: 480px;
display: flex;
flex-direction: column;
justify-content: space-between;
.header {
top: calc(50px + 49px);
z-index: 3;
top: 96px;
height: 50px;
padding: 0 20px;
display: flex;
position: sticky;
@ -138,43 +117,49 @@ onMounted(async () => {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
.t-row {
width: 100%;
}
.right {
margin-left: 1rem;
.search {
flex: 1;
}
.filter {
padding: 0 1rem;
margin-left: 1rem;
}
}
.list {
.merges {
flex: 1;
.tags {
display: flex;
padding-top: 1px;
.merge {
.tag {
padding: 1px 5px;
:deep(.t-list-item-main) {
align-items: start;
}
&.type {
color: #FFF;
.tags {
height: 100%;
display: flex;
padding-top: 1px;
.tag {
padding: 1px 5px;
&.type {
color: #FFF;
}
}
}
}
.content {
padding-left: .5rem;
.content {
flex: 1;
padding-left: .5rem;
.title {
margin: 0;
}
.title {
margin: 0;
}
.time {
margin: 0;
.time {
margin: 0;
}
}
}
}
@ -185,15 +170,8 @@ onMounted(async () => {
position: sticky;
background: rgba(255, 255, 255, .8);
border-top: var(--tui-border);
border-top: var(--tui-border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
@media screen and (max-width: 992px) {
.merge-list {
min-height: calc(100vh - 100px);
}
}
</style>

20
src/views/repository/ReleaseList.vue
View File

@ -37,14 +37,15 @@
</div>
</div>
</t-timeline-item>
<loading :showOn="isLoading" />
<empty-tips v-if="!isLoading && Toolkit.isEmpty(pageResult?.list)" />
</t-timeline>
<empty-tips :showOn="Toolkit.isEmpty(pageResult?.list)" />
</div>
</template>
<script lang="ts" setup>
import ReleaseAPI from "@/api/ReleaseAPI";
import { Page, Release } from "@/types/Release";
import { CommonAPI, EmptyTips, Icon, IOSize, MarkdownView, PageResult, Time, Toolkit } from "timi-web";
import { CommonAPI, EmptyTips, Icon, IOSize, Loading, MarkdownView, PageResult, Time, Toolkit } from "timi-web";
import { useRepositoryStore } from "@/store/repository.ts";
const repositoryStore = useRepositoryStore();
@ -54,13 +55,14 @@ const page = reactive<Page>({
index: 0,
size: 12
});
const isLoading = ref(false);
const pageResult = ref<PageResult<Release>>();
onMounted(async () => {
if (repositoryStore.value) {
page.repositoryId = repositoryStore.value.id;
pageResult.value = await ReleaseAPI.page(page);
}
isLoading.value = true;
page.repositoryId = repositoryStore.value!.id;
pageResult.value = await ReleaseAPI.page(page);
isLoading.value = false;
});
</script>
<style lang="less" scoped>
@ -121,10 +123,4 @@ onMounted(async () => {
}
}
}
@media screen and (max-width: 992px) {
.release-list {
min-height: calc(100vh - 98px);
}
}
</style>