Skip to content

Commit b13f2ca

Browse files
Charles7cCharles7c
committed
feat: 工作台新增最新动态
1 parent c6daf41 commit b13f2ca

File tree

2 files changed

+168
-0
lines changed

2 files changed

+168
-0
lines changed

‎src/views/dashboard/workplace/components/LatestActivity.vue‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<template>
2+
<a-card class="general-card" title="最新动态" style="margin-bottom: 14px">
3+
<template #extra>
4+
<a-link href="https://gitee.com/organizations/continew/events" target="_blank" rel="noopener">更多</a-link>
5+
</template>
6+
<a-empty v-if="dataList.length === 0">暂无动态</a-empty>
7+
<a-comment
8+
v-for="(item, index) in dataList"
9+
v-else
10+
:key="index"
11+
:author="item.actor.nickname"
12+
align="right"
13+
:class="`animated-fade-up-${index}`"
14+
>
15+
<template #avatar>
16+
<a :href="item.actor.url" target="_blank" rel="noopener">
17+
<a-avatar :size="30">
18+
<img :src="item.actor.avatar" alt="avatar" />
19+
</a-avatar>
20+
</a>
21+
</template>
22+
<template #datetime><span :title="item.createTime">{{ item.createTimeString }}</span></template>
23+
<template #content>
24+
<div class="content">
25+
<p v-if="item.type === 'PUSH'">
26+
推送到了 <a-link :href="item.repo.url" target="_blank" rel="noopener">{{ item.repo.alias }}</a-link>
27+
{{ `的 ${item.payload.branch} 分支 ${item.payload.commits.length} 个提交` }}
28+
<a-comment
29+
v-for="(commit, idx) in item.payload.commits"
30+
:key="idx"
31+
class="commit"
32+
>
33+
<template #content>
34+
<a-link :href="`${item.repo.url}${commit.url}`" target="_blank" rel="noopener" style="font-size: 12px">{{ commit.sha.substring(0, 7) }}</a-link>
35+
<a :href="`${item.repo.url}${commit.url}`" target="_blank" rel="noopener">{{ commit.message }}</a>
36+
</template>
37+
</a-comment>
38+
</p>
39+
<p v-else-if="item.type === 'ISSUE_OPEN'">
40+
在 <a-link :href="item.repo.url" target="_blank" rel="noopener">{{ item.repo.alias }}</a-link>
41+
创建了任务 <a-link :href="item.payload.url" target="_blank" rel="noopener">{{ item.payload.title }}</a-link>
42+
</p>
43+
<p v-else-if="item.type === 'ISSUE_CLOSE'">
44+
更改了 <a-link :href="item.repo.url" target="_blank" rel="noopener">{{ item.repo.alias }}</a-link>
45+
的任务 <a-link :href="item.payload.url" target="_blank" rel="noopener">{{ item.payload.title }}</a-link>
46+
状态为 {{ item.payload.action === 'rejected' ? '已关闭' : '已完成' }}
47+
</p>
48+
<p v-else-if="item.type === 'ISSUE_COMMENT'">
49+
评论了 <a-link :href="item.repo.url" target="_blank" rel="noopener">{{ item.repo.alias }}</a-link>
50+
的任务 <a-link :href="item.payload.url" target="_blank" rel="noopener">{{ item.payload.title }}</a-link>
51+
</p>
52+
<p v-else-if="item.type === 'PULL_REQUEST'">
53+
在 <a-link :href="item.repo.url" target="_blank" rel="noopener">{{ item.repo.alias }}</a-link>
54+
创建了 Pull Request <a-link :href="item.payload.url" target="_blank" rel="noopener">{{ item.payload.title }}</a-link>
55+
</p>
56+
<p v-else-if="item.type === 'CREATE'">
57+
推送了新的 {{ item.payload.refType }}
58+
<a-link :href="item.payload.url" target="_blank" rel="noopener">{{ item.payload.ref }}</a-link>
59+
到 <a-link :href="item.repo.url" target="_blank" rel="noopener">{{ item.repo.alias }}</a-link>
60+
</p>
61+
<p v-else-if="item.type === 'DELETE'">
62+
删除了 <a-link :href="item.repo.url" target="_blank" rel="noopener">{{ item.repo.alias }}</a-link>
63+
的 {{ item.payload.ref }} {{ item.payload.refType }}
64+
</p>
65+
<p v-else>暂无</p>
66+
</div>
67+
</template>
68+
</a-comment>
69+
</a-card>
70+
</template>
71+
72+
<script lang="ts" setup>
73+
import dayjs from 'dayjs'
74+
import relativeTime from 'dayjs/plugin/relativeTime'
75+
import axios, { type AxiosRequestConfig, type AxiosResponse } from 'axios'
76+
import qs from 'query-string'
77+
78+
dayjs.extend(relativeTime)
79+
dayjs.locale('zh-cn')
80+
export interface DataItem {
81+
type: string
82+
actor: {
83+
username: string
84+
nickname: string
85+
avatar: string
86+
url: string
87+
}
88+
repo: {
89+
name: string
90+
alias: string
91+
url: string
92+
}
93+
payload: object
94+
createTime: string
95+
createTimeString: string
96+
}
97+
98+
const get = <T = unknown>(url: string, params?: object, config?: AxiosRequestConfig): Promise<ApiRes<T>> => {
99+
return new Promise((resolve, reject) => {
100+
axios
101+
.request<T>({
102+
method: 'get',
103+
url,
104+
params,
105+
paramsSerializer: (obj) => {
106+
return qs.stringify(obj)
107+
},
108+
...config
109+
})
110+
.then((res: AxiosResponse) => resolve(res.data))
111+
.catch((err: { msg: string }) => reject(err))
112+
})
113+
}
114+
115+
const dataList = ref<DataItem[]>([])
116+
const loading = ref(false)
117+
// 查询列表数据
118+
const getDataList = async () => {
119+
try {
120+
loading.value = true
121+
const { data } = await get('https://api.charles7c.top/git/orgs/continew/events?limit=10')
122+
data.forEach((item) => {
123+
dataList.value.push({
124+
...item,
125+
createTimeString: dayjs(new Date(item.createTime)).fromNow()
126+
})
127+
})
128+
} catch (err) {
129+
// console.log(err)
130+
} finally {
131+
loading.value = false
132+
}
133+
}
134+
135+
onMounted(() => {
136+
getDataList()
137+
})
138+
</script>
139+
140+
<style scoped lang="scss">
141+
:deep(.arco-comment:not(:first-of-type), .arco-comment-inner-comment) {
142+
margin-top: 10px;
143+
}
144+
145+
:deep(.arco-comment:not(:last-of-type)) {
146+
border-bottom: 1px solid var(--color-border-1);
147+
padding-bottom: 10px;
148+
}
149+
150+
:deep(.arco-comment-content) {
151+
color: var(--color-text-2);
152+
}
153+
154+
:deep(.arco-comment-datetime) {
155+
color: var(--color-text-4);
156+
}
157+
158+
.commit.arco-comment {
159+
margin-top: 10px;
160+
font-size: 12px;
161+
border-bottom: none;
162+
padding-bottom: 0;
163+
}
164+
</style>

‎src/views/dashboard/workplace/index.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
<a-grid-item :span="24">
1010
<Project />
1111
</a-grid-item>
12+
<a-grid-item :span="24">
13+
<LatestActivity />
14+
</a-grid-item>
1215
</a-grid>
1316
</div>
1417
</div>
@@ -36,6 +39,7 @@
3639
<script setup lang="ts">
3740
import Welcome from './components/Welcome.vue'
3841
import Project from './components/Project.vue'
42+
import LatestActivity from './components/LatestActivity.vue'
3943
import QuickOperation from './components/QuickOperation.vue'
4044
import Carousel from './components/Carousel.vue'
4145
import Notice from './components/Notice.vue'

0 commit comments

Comments
 (0)