cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

搜索结果列表页面开发

Browse Source
This commit is contained in:
付民康
2025-03-12 18:41:20 +08:00
commit 7cebe8fc00
739 changed files with 88149 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/ReleaseCard/README.md Normal file
View File

@@ -0,0 +1,73 @@
TS接口文档可以查看同文件夹下的types.ts, demo可以访问/demo777进行查看
```vue
<release-card :data="releaseData" simple>
<template #detail>
hello, world
</template>
</release-card>
// script
const releaseData: ReleaseCardData = {
title: '4.1.0',
version: '4.1.0',
userInfo: {
nickname: 'username',
imgSrc: '',
path: '/sasad'
},
createdTime: '2023-07-08',
tag: '3.3.3',
commit: '233de2',
validated: true,
attachments: [
{
filename: 'openharmony-4.1.0-android-sdk.zip',
size: '189 MB',
updatedTime: '2023-03-05',
link: 'https://github.com/mrdoob/three.js/archive/refs/tags/r154.tar.gz'
},
{
filename: '下载Source Code（tar.gz）',
type: 'zip',
updatedTime: '2023-03-05',
link: 'https://github.com/mrdoob/three.js/archive/refs/tags/r154.tar.gz'
}
]
};
```
### Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|----------------|----------|-----------------|-----------|-------|
| data | release数据 | ReleaseCardData | — | {} |
| simple? | 是否开启简易显示 | boolean | — | false |
### Emits
注意：以下事件都是组件内部对应的按钮点击触发，如果用插槽自定义对应区域的内容的话，事件自行监听即可
| 方法 | 说明 | 返回值 |
|--------------|-------|-----------------------|
| compare | 对比tag | ReleaseCardData |
| edit | 编辑 | ReleaseCardData |
| delete | 删除 | ReleaseCardData |
### Slots
| 名称 | 说明 |
|---------------------|------------------|
| header | 组件头部区域插槽 |
| title | 组件标题区域插槽 |
| avatar | 组件头部头像区域插槽 |
| created-time | 组件头部时间区域插槽 |
| tag | 组件头部标签区域插槽 |
| commit | 组件头部commit信息区域插槽 |
| actions | 组件操作区域插槽 |
| detail | 组件详细信息区域插槽 |
| attachments-header | 组件附件信息头部区域插槽 |
| attachments-content | 组件附件信息内容区域插槽 |
| attachment | 组件附件行区域插槽 |
| attachment-name | 组件附件行名称区域插槽 |
| attachment-size | 组件附件行文件大小区域插槽 |
| attachment-time | 组件附件行文件更新时间区域插槽 |

320
src/components/ReleaseCard/index.vue Normal file
View File

@@ -0,0 +1,320 @@
<template>
<section class="g-release-card">
<div v-if="!simple" class="g-release-card-header">
<slot name="header">
<div class="g-release-card-base-info flex-wrap">
<div class="g-release-card-title inline-block truncate ellipsis-pre">
<slot name="title">{{ data.title || data.version }}</slot>
</div>
<div class="g-release-card-info">
<slot name="info">
<div class="g-release-card-avatar">
<slot name="avatar">
<user-avatar size="16" :user-info="data.userInfo" />
</slot>
</div>
<div class="g-release-card-created-time">
<slot name="created-time">
于 {{ formatTimeFromNow(data.createdTime) }}创建
</slot>
</div>
<div class="g-release-card-tag">
<slot name="tag">
<d-icon name="tag" size="20px"></d-icon>
<span>{{ data.tag }}</span>
</slot>
</div>
<div class="g-release-card-commit">
<slot name="commit">
<d-icon name="commit" size="20px"></d-icon>
<span>{{ data.commit }}</span>
</slot>
</div>
<slot name="validated">
<custom-tag border-color="#333" color="#333">
{{ data.validated ? '已验证' : '未验证' }}
</custom-tag>
</slot>
</slot>
<slot name="info-extra"></slot>
</div>
</div>
<div class="g-release-card-actions">
<slot name="actions">
<div class="g-release-card-action">
<d-button variant="text" @click="emits('compare', data)">
<div class="g-release-card-custom-btn">
<d-icon name="tag" size="16px"></d-icon>
<span>对比 Tag</span>
</div>
</d-button>
</div>
<div class="g-release-card-action">
<d-button variant="text" @click="emits('edit', data)">
<d-icon name="edit" size="16px"></d-icon>
</d-button>
</div>
<div class="g-release-card-action">
<d-button variant="text" @click="emits('delete', data)">
<d-icon name="delete" size="16px"></d-icon>
</d-button>
</div>
</slot>
</div>
</slot>
<div class="g-release-card-header-divide" />
</div>
<div class="g-release-card-detail-info ellipsis-pre">
<div v-if="simple" class="g-release-card-detail-header">
<slot name="header">
<div class="g-release-card-title">
<slot name="title">{{ data.title || data.version }}</slot>
</div>
<div class="g-release-card-actions">
<slot name="actions">
<div class="g-release-card-action">
<d-button variant="text" @click="emits('edit', data)">
<d-icon name="edit" size="16px"></d-icon>
</d-button>
</div>
<div class="g-release-card-action">
<d-button variant="text" @click="emits('delete', data)">
<d-icon name="delete" size="16px"></d-icon>
</d-button>
</div>
</slot>
</div>
</slot>
</div>
<slot name="detail">{{ data.message }}</slot>
</div>
<div class="g-release-card-attachments">
<div class="g-release-card-attachments-header pl-[6px] pt-[6px] pb-[6px]">
<!-- <d-icon
:name="open ? 'chevron-down' : 'chevron-up'"
size="20px"
/> -->
<slot name="attachments-header">
<span class="g-release-card-attachments-title">下载</span>
<!-- <custom-tag border-color="transparent" bg-color="#EAEAEA" color="#606060">
{{ data.attachments?.length || 0 }}
</custom-tag> -->
</slot>
</div>
<div v-show="open" class="g-release-card-attachments-content">
<slot name="attachments-content">
<template v-if="data.attachments && data.attachments.length">
<div
v-for="(item, index) in data.attachments"
:key="`${item.id}_${index}`"
class="g-release-card-attachment pt-[6px] pb-[6px]"
>
<slot name="attachment" :data="item" :index="index">
<div class="g-release-card-attachment-name pl-[6px]">
<a :href="item.link ?? 'javascript:void(0);'" class="g-release-card-attachment-name">
<slot name="attachment-name" :data="item" :index="index">
<Icon name="gt-file-zip-c" size="14px" />
<span class="text-[#2562C4] font-semibold">{{ item.filename }}</span>
</slot>
</a>
</div>
<div class="g-release-card-attachment-size">
<slot name="attachment-size" :data="item" :index="index">
{{ item.size }}
</slot>
</div>
<div class="g-release-card-attachment-time">
<slot name="attachment-time" :data="item" :index="index">
{{ formatTimeFromNow(item.updatedTime) }}
</slot>
</div>
</slot>
</div>
</template>
<div v-else class="g-release-card-empty">暂无附件数据</div>
</slot>
</div>
</div>
</section>
</template>
<script lang="ts">
export default {
name: 'release-card'
};
</script>
<script setup lang="ts">
import { ref } from 'vue';
import type { ReleaseCardData } from '@/components/ReleaseCard/types';
import UserAvatar from '@/components/UserAvatar/index.vue';
import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
import CustomTag from '@/components/CustomTag/index.vue';
withDefaults(defineProps<{
data: ReleaseCardData;
simple?: boolean;
}>(), {
data: () => ({
version: '',
title: '',
userInfo: {
imgSrc: ''
},
createdTime: '',
commit: '',
tag: ''
}),
simple: false
});
const emits = defineEmits<{(e: 'compare', data: ReleaseCardData): void;
(e: 'edit', data: ReleaseCardData): void;
(e: 'delete', data: ReleaseCardData): void;
}>();
const { formatTimeFromNow } = useTimeFormat();
const open = ref<boolean>(true);
</script>
<style scoped lang="scss">
$g-release-card-border-color: #e5e4e4;
$g-release-card-bg-color: #F5F7F9;
$g-release-card-border-radius: 4px;
$g-release-card-color: #000000;
$g-release-card-color-second: #606060;
.g-release-card {
border-radius: $g-release-card-border-radius;
&-header {
position: relative;
display: flex;
justify-content: space-between;
&-divide {
position: absolute;
// left: 20px;
width: 100%;
height: 1px;
bottom: 0;
background-color: $g-release-card-border-color;
}
}
&-title {
font-size: 36px;
font-weight: 500;
color: $g-release-card-color;
}
&-info {
margin-top: 16px;
display: flex;
align-items: center;
}
&-created-time {
margin-left: 8px;
color: $g-release-card-color-second;
}
&-tag, &-commit {
margin-left: 20px;
color: $g-release-card-color-second;
display: flex;
align-items: center;
> span {
margin-left: 8px;
}
}
&-commit {
margin-right: 8px;
}
&-actions {
display: flex;
align-items: center;
}
&-action {
padding: 8px;
border: 1px solid $g-release-card-border-color;
border-radius: $g-release-card-border-radius;
line-height: 1;
margin-left: 16px;
:deep(.button-content) {
line-height: 10px;
}
&:hover {
cursor: pointer;
background-color: $g-release-card-bg-color;
}
&:active {
background-color: #f2f4f6;
}
}
&-custom-btn {
display: inline-flex;
align-items: center;
> span {
margin-left: 8px;
}
}
&-detail-info {
padding: 24px 16px 32px 0;
// border-bottom: 1px solid $g-release-card-border-color;
}
&-detail-header {
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
&-attachments {
// padding: 16px;
border: 1px solid #F0F1F2;
&-header {
display: flex;
align-items: center;
// margin-bottom: 16px;
background: #FBFBFB;
&:hover {
cursor: pointer;
}
}
&-title {
// padding: 0 8px;
font-size: 14px;
font-weight: 500;
color: $g-release-card-color;
}
&-content {
// border: 1px solid $g-release-card-border-color;
border-radius: $g-release-card-border-radius;
}
}
&-attachment {
display: flex;
align-items: center;
border-top: 1px solid $g-release-card-border-color;
font-size: 14px;
color: $g-release-card-color-second;
&-name {
flex: 1;
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
> span {
padding-left: 8px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
}
&-size, &-time {
min-width: 84px;
padding: 0 8px;
}
&-time {
text-align: right;
}
}
&-empty {
padding: 32px;
font-size: 24px;
text-align: center;
}
}
</style>

292
src/components/ReleaseCard/releaseCard.vue Normal file
View File

@@ -0,0 +1,292 @@
<template>
<section class="g-release-card">
<d-row type="flex" class="docs-devui-row bg-white mb-[12px]"
style="border: 1px solid rgba(228, 233, 240, 1);border-radius: 10px;">
<d-col :flex="1" class="ml-[20px] max-w-[120px] release-left">
<div class="g-release-card-header flex-col">
<slot name="header">
<div class="cursor-pointer mt-[14px] text-[28px] truncate" :title="data?.title || data?.version">
<!-- <d-popover trigger="hover" :content="data?.title || data?.version"> -->
<span @click="releaseDetail(data?.tag)">{{ data?.title || data?.version }}</span>
<!-- </d-popover> -->
</div>
<div class="text-[14px] mt-4 text-[#707A87]">
<UserAvatar :src="data?.userInfo?.imgSrc" :size="14" :userInfo="data?.userInfo" />
</div>
<div class="text-[14px] mt-1 text-[#707A87]">
<Icon name="gt-date" size="14px" />
{{ formatTimeFromNow(data?.createdTime) }}
</div>
<div class="cursor-pointer max-w-[100px] truncate text-[14px] mt-1 text-[#707A87]" @click="toTag(data?.tag)">
<Icon name="gt-tag" size="14px" />
{{ data?.tag }}
</div>
<div class="text-[14px] mt-1 text-[#707A87] cursor-pointer" @click="toCommit(data.commit?.id)">
<Icon name="gt-commit" size="14px" />
{{ data.commit?.short_id }}
</div>
<div class="mt-4 mb-4">
<d-select class="mb-2 h-[28px] w-[90px]"
placeholder="比较"
v-model="data.tag_name"
@value-change="tagCompare(data?.tag, data?.tag_name)"
>
<gc-option v-for="item in tagOptions" :key="item.value" :value="item.value" :name="item.name">
<span :title="item.name">{{ item.name }}</span>
</gc-option>
</d-select>
</div>
</slot>
</div>
</d-col>
<d-col :flex="4" class="ml-[80px] max-w-[1056px]">
<div class="g-release-card-title mt-[20px] pl-[16px]">
<slot name="title" class="text-[28px]">
<MdRender v-model="data.description"></MdRender>
</slot>
</div>
<div class="g-release-card-attachments mt-4 ml-4 mb-4">
<div class="flex items-center pt-1 pb-1 hover:cursor-pointer bg-gray-50">
<!-- <d-icon :name="open ? 'chevron-down' : 'chevron-up'" size="20px" /> -->
<slot name="attachments-header">
<span class="text-[14px] pl-3 font-semibold">下载</span>
</slot>
</div>
<div class="g-release-card-attachments-content">
<slot name="attachments-content">
<template v-if="data.attachments && data.attachments.length">
<div v-for="(item, index) in data.attachments" :key="`${item.id}_${index}`"
class="g-release-card-attachment flex text-center text-[14px] text-[#606060]">
<slot name="attachment" :data="item" :index="index">
<div class="g-release-card-attachment-name">
<a :href="item.link ?? 'javascript:void(0);'" class="g-release-card-attachment-name">
<slot name="attachment-name" :data="item" :index="index">
<!-- <d-icon :name="item.type ? 'go-document' : 'release-set'" size="24px"></d-icon> -->
<Icon :name="item.isSource ? 'gt-file-zip-c' : 'gt-package-c'" size="14px" />
<span class="text-[#2562C4] font-semibold ellipsis-pre text-left flex-1">{{ item.filename }}</span>
</slot>
</a>
</div>
<div class="g-release-card-attachment-size">
<slot name="attachment-size" :data="item" :index="index">
{{ item.size?`${item.size}KB`: '' }}
</slot>
</div>
<div class="text-right">
<slot name="attachment-time" :data="item" :index="index">
{{ formatTimeFromNow(item.updatedTime) }}
</slot>
</div>
</slot>
</div>
</template>
<div v-else class="p-[32px] text-[24px] text-center">暂无附件数据</div>
</slot>
</div>
</div>
</d-col>
</d-row>
</section>
</template>
<script lang="ts">
import MdRender from '@/components/MdRender/index.vue';
export default {
name: 'release-card'
};
</script>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import type { ReleaseCardData } from '@/components/ReleaseCard/types';
import UserAvatar from '@/components/UserAvatar/index.vue';
import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
import CustomTag from '@/components/CustomTag/index.vue';
import { reqCatch } from '@/utils/catch';
import { getTags } from '@/api/tags';
import { useRouter } from 'vue-router';
import { useRepoId } from '@/utils/hooks/useRepoId';
const { repoId } = useRepoId();
const router = useRouter();
withDefaults(defineProps<{
data: ReleaseCardData;
tagOptions: Array<string>;
simple?: boolean;
}>(), {
data: () => ({
version: '',
title: '',
description: '',
userInfo: {
imgSrc: ''
},
createdTime: '',
commit: '',
tag: ''
}),
simple: false
});
const emits = defineEmits<{(e: 'compare', data: ReleaseCardData): void;
(e: 'edit', data: ReleaseCardData): void;
(e: 'delete', data: ReleaseCardData): void;
}>();
const { formatTimeFromNow } = useTimeFormat();
const open = ref<boolean>(true);
const mdRules = reactive({
linkify: {
fuzzyLink: false
}
});
const releaseDetail = async(tagName: any) => {
router.push({
name: 'repoReleaseDetail',
params: { tagName }
});
};
const toCommit = async(id) => {
router.push({
name: 'repoCommitDetail',
params: {
commitId: id
}
});
};
const toTag = async(tag) => {
router.push({
name: 'repoTagsDetail',
params: {
tagName: tag
}
});
};
const tagCompare = (tag: any, compareTag: any) => {
router.push({
name: 'repoCompare',
params: {
fromId: compareTag,
toId: tag
}
});
};
</script>
<style scoped lang="scss">
$g-release-card-border-color: #e5e4e4;
$g-release-card-bg-color: #F5F7F9;
$g-release-card-border-radius: 4px;
$g-release-card-color: #000000;
$g-release-card-color-second: #606060;
.g-release-card {
.release-left {
max-width: 120px;
}
&-header {
position: relative;
display: flex;
justify-content: space-between;
&-divide {
position: absolute;
left: 16px;
width: calc(100% - 32px);
height: 1px;
bottom: 0;
background-color: $g-release-card-border-color;
}
}
&-tag,
&-commit {
margin-left: 20px;
color: $g-release-card-color-second;
display: flex;
align-items: center;
>span {
margin-left: 8px;
}
}
&-action {
border: 1px solid $g-release-card-border-color;
:deep(.button-content) {
line-height: 10px;
}
&:hover {
cursor: pointer;
background-color: $g-release-card-bg-color;
}
&:active {
background-color: #f2f4f6;
}
}
&-custom-btn {
display: inline-flex;
align-items: center;
>span {
margin-left: 8px;
}
}
&-detail-info {
padding: 24px 16px 32px 16px;
}
&-detail-header {
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
&-attachments {
border: 1px solid $g-release-card-border-color;
border-bottom: none;
&-title {
padding: 0 8px;
font-size: 20px;
font-weight: 500;
color: $g-release-card-color;
}
&-content {
border-top: 1px solid $g-release-card-border-color;
}
}
&-attachment {
border-bottom: 1px solid $g-release-card-border-color;
padding: 8px;
&-name {
flex: 1;
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
>span {
padding-left: 8px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
}
&-size,
&-time {
min-width: 84px;
padding: 0 8px;
}
}
}
</style>

24
src/components/ReleaseCard/types.ts Normal file
View File

@@ -0,0 +1,24 @@
export type ReleaseCardData = {
version: string;
title: string;
userInfo: {
nickname?: string;
name?: string;
imgSrc: string;
path?: string;
};
createdTime: string;
tag: string;
commit: string;
validated?: boolean;
attachments?: {
filename: string;
type?: string;
size?: number;
updatedTime: string;
id?: number | string;
link: string;
isSource:boolean;
}[];
[propName: string]: any;
}