add Loading placeholder
This commit is contained in:
Timi
@ -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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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,8 +15,7 @@
|
||||
</t-button>
|
||||
<login-menu />
|
||||
</t-space>
|
||||
</t-aside>
|
||||
</t-layout>
|
||||
</section>
|
||||
<t-head-menu class="menu" v-model="menuValue">
|
||||
<t-menu-item
|
||||
:to="`/${repositoryStore.value.name}/${repositoryStore.value.defaultBranch}`"
|
||||
@ -51,6 +48,7 @@
|
||||
版本发布
|
||||
</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);
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
padding: .5rem 1rem;
|
||||
border-bottom: var(--tui-border);
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
.aside {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 1rem;
|
||||
|
||||
.repository-list {
|
||||
|
||||
.icon {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
.description {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
:deep(.t-menu) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 520px;
|
||||
flex-direction: column;
|
||||
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.repository-layout {
|
||||
// - 底部
|
||||
min-height: calc(100% - 110px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -60,6 +60,7 @@ export type File = {
|
||||
lastCommitterDate: number;
|
||||
|
||||
children: boolean;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export enum FileViewerType {
|
||||
|
||||
@ -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">
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<h3 class="name">
|
||||
<router-link class="link black" :to="`/${item.name}/${item.defaultBranch}`">
|
||||
{{ item.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
</h3>
|
||||
<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>
|
||||
</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 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<div v-if="repositoryStore.value" class="commit-log">
|
||||
<t-layout>
|
||||
<t-header class="header">
|
||||
<div>
|
||||
<div class="header">
|
||||
<t-select class="branch" v-model="branch" label="分支：" placeholder="全部" clearable>
|
||||
<t-option
|
||||
v-for="item in repositoryStore.value.branchList"
|
||||
@ -12,19 +10,18 @@
|
||||
/>
|
||||
</t-select>
|
||||
</div>
|
||||
</t-header>
|
||||
<t-content class="content">
|
||||
<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="!isFinished" @click="doFetchEvent">加载更多</t-button>
|
||||
<t-button v-if="!isLoading && !isFinished" @click="doFetchEvent">加载更多</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</t-content>
|
||||
</t-layout>
|
||||
</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);
|
||||
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();
|
||||
}
|
||||
});
|
||||
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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,14 +1,12 @@
|
||||
<template>
|
||||
<t-layout class="issue-list" v-if="repositoryStore.value">
|
||||
<t-header class="header">
|
||||
<t-row justify="space-between">
|
||||
<t-col flex="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>
|
||||
</t-col>
|
||||
<t-col class="right">
|
||||
<t-space>
|
||||
</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>
|
||||
@ -19,14 +17,11 @@
|
||||
<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">
|
||||
</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"
|
||||
@ -41,8 +36,7 @@
|
||||
v-text="(<any>Status)[item.status]"
|
||||
></div>
|
||||
</t-space>
|
||||
</t-aside>
|
||||
<t-content class="content">
|
||||
<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>
|
||||
@ -50,26 +44,22 @@
|
||||
<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>
|
||||
</div>
|
||||
</t-list-item>
|
||||
</t-list>
|
||||
<empty-tips :showOn="pageResult?.total === 0" />
|
||||
</t-content>
|
||||
<t-footer class="footer" height="auto">
|
||||
<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,22 +121,26 @@ 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;
|
||||
|
||||
.issue {
|
||||
|
||||
:deep(.t-list-item-main) {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.tags {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding-top: 1px;
|
||||
|
||||
@ -154,6 +154,7 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding-left: .5rem;
|
||||
|
||||
.title {
|
||||
@ -165,6 +166,7 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 8px 16px;
|
||||
@ -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>
|
||||
|
||||
@ -1,44 +1,27 @@
|
||||
<template>
|
||||
<t-layout v-if="repositoryStore.value" class="merge-list">
|
||||
<t-header class="header">
|
||||
<t-row justify="space-between">
|
||||
<t-col flex="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>
|
||||
</t-col>
|
||||
<t-col class="right">
|
||||
<t-space>
|
||||
<t-select
|
||||
v-model="page.type"
|
||||
label="类型"
|
||||
placeholder="全部"
|
||||
autoWidth
|
||||
clearable
|
||||
>
|
||||
</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-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">
|
||||
</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"
|
||||
@ -53,38 +36,30 @@
|
||||
v-text="(<any>Status)[item.status]"
|
||||
></div>
|
||||
</t-space>
|
||||
</t-aside>
|
||||
<t-content class="content">
|
||||
<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-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>
|
||||
</div>
|
||||
</t-list-item>
|
||||
</t-list>
|
||||
<empty-tips :showOn="pageResult?.total === 0" />
|
||||
</t-content>
|
||||
<t-footer class="footer" height="auto">
|
||||
<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,22 +117,26 @@ 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;
|
||||
|
||||
.merge {
|
||||
|
||||
:deep(.t-list-item-main) {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.tags {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding-top: 1px;
|
||||
|
||||
@ -167,6 +150,7 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding-left: .5rem;
|
||||
|
||||
.title {
|
||||
@ -178,6 +162,7 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 8px 16px;
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user