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

259
src/components/ToolsFloat/index.vue Normal file
View File

@@ -0,0 +1,259 @@
<template>
<div class="home-nav-right">
<!-- <d-tooltip position="left">
<a :href="gitcodeNet" target="_blank">
<div class="home-nav-item text-CG700">旧版</div>
</a>
<template #content>
<div class="home-nav-tooltip-wrapper">
<div class="home-nav-text">
如需访问旧版与项目仓库，可
<a class="home-nav-link" :href="gitcodeNet" target="_blank">返回旧版查看 >></a>
</div>
</div>
</template>
</d-tooltip> -->
<!-- <d-tooltip position="left">
<a class="home-nav-link" :href="helpDoc" target="_blank">
<div class="home-nav-item">
<Icon name="gt-ask" class="home-nav-icon" size="20px" />
</div>
</a>
<template #content>
<div class="home-nav-tooltip-wrapper">
<div class="home-nav-text">
查看使用
<a class="home-nav-link" :href="helpDoc" target="_blank">帮助文档</a>
</div>
</div>
</template>
</d-tooltip> -->
<!-- <d-tooltip position="left">
<a class="home-nav-link" :href="reportBug" target="_blank">
<div class="home-nav-item">
<Icon name="gt-file-code" class="home-nav-icon" size="20px" />
</div>
</a>
<template #content>
<div class="home-nav-tooltip-wrapper">
<div class="home-nav-text">产品使用相关的bug都可以</div>
<a class="home-nav-link" :href="reportBug" target="_blank">戳此提交>>></a>
</div>
</template>
</d-tooltip> -->
<d-tooltip position="left">
<a class="home-nav-link" :href="`mailto:${contact}`">
<div class="home-nav-item">
<Icon name="gt-organizations" class="home-nav-icon" size="20px" />
</div>
</a>
<template #content>
<div class="home-nav-tooltip-wrapper">
<div class="home-nav-text">
如需组织入驻支持可邮件联系：<a class="home-nav-link devui-link-light" :href="`mailto:${contact}`">{{ contact }}</a>
，请在正文附带组织介绍及联系方式哦~
</div>
</div>
</template>
</d-tooltip>
<!-- <d-tooltip position="left"><a class="home-nav-link" href="https://www.wjx.cn/vm/ey1fzaK.aspx" target="_blank" rel="noopener noreferrer"><div class="home-nav-item"><Icon name="gt-nps" class="home-nav-icon" size="20px" /></div></a><template #content><div class="home-nav-tooltip-wrapper"><div class="home-nav-text">在线参与 GitCode 用户调查</div></div></template></d-tooltip> -->
<d-popover v-if="popVisible" :offset="OffsetOptions" :position="['left']" class="no-arrow" :is-open="popVisible">
<div class="home-nav-link">
<div class="home-nav-item">
<Icon name="gt-nps" class="home-nav-icon" size="20px" />
</div>
</div>
<template #content>
<div class="g-card px-5 pt-4 pb-5 w-[410px]" >
<div class="opinion-box" v-if="process">
<div class="tab-step">
<div
v-for="item in opinionStep"
:key="item.index"
class="tab-item w-8 h-1 mr-1 cursor-pointer"
:class="opStep===item.index?'bg-G900':'bg-G400'"
@click="swTab(item)"
><span class="cursor-pointer"></span></div>
</div>
<div class="">
<div v-if="opStep === 0" class="rate relative overflow-hidden">
<div v-if="rateActive!==null || rateNow!==null" class="absolute top-0 right-0 text-G900"><span>{{ rateIcon[rateActive === null?rateNow:rateActive].title }}</span></div>
<div class="font-[600] text-G900 mt-3 text-sm leading-[20px]"><span>评价您对我们产品的体验</span></div>
<div class="flex gap-1 items-center mt-3">
<div
v-for="ico in rateIcon"
:key="ico.name"
class="opinion-item cursor-pointer border border-G300 rounded-[3px] px-2 py-1.5"
:class="{active:rateNow===ico.index}"
@mouseover="activeOp(ico.index)"
@mouseleave="activeOp(null)"
@click="selOpini(ico)"
><Icon :name="ico.name" size="24px"/></div>
</div>
</div>
<div v-if="opStep === 1" class="Opinion relative overflow-hidden">
<div v-if="rateNow!==null" class="absolute top-0 right-0 text-G900"><span>{{ rateIcon[rateNow].title }}</span></div>
<div class="font-[600] text-G900 mt-3 text-sm leading-[20px]"><span>有什么可以改进的吗？</span></div>
<div class="mt-3">
<d-textarea v-model="opinionText" :rows="4" placeholder="请输入反馈（可选）" show-count maxlength="200"></d-textarea>
</div>
<div>
<d-button color="primary" variant="solid" @click="handleSubmit">提交</d-button>
</div>
</div>
</div>
</div>
<div class="finish flex items-center" v-else>
<div class="flex justify-center items-center w-[30px] h-[30px] rounded-[50%] bg-[#0EB07B]">
<Icon name="gt-success" size="14px" color="#fff"/>
</div>
<div class="ml-2 font-[600] text-G900 text-sm leading-[20px]"><span>谢谢您的反馈！</span></div>
</div>
</div>
</template>
</d-popover>
</div>
</template>
<script setup lang="ts">
import { nextTick, reactive, ref } from 'vue';
import { useReport } from '@/utils/hooks/useReport';
const gitcodeNet = 'https://gitcode.net';
const helpDoc = 'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/wiki';
const reportBug = 'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/issues';
const contact = 'kefu@gitcode.com';
const opinionStep = [{ index: 0, offset_x: -30 }, { index: 1, offset_x: -80 }];
const opStep = ref<number>(0);
const rateNow = ref(null);
const rateActive = ref(null);
const process = ref(true);
const popVisible = ref(true);
const opinionText = ref<string>('');
const rateIcon = [
{ name: 'gt-nps-1', title: '非常好', index: 0 },
{ name: 'gt-nps-2', title: '好', index: 1 },
{ name: 'gt-nps-3', title: '一般', index: 2 },
{ name: 'gt-nps-4', title: '不好', index: 3 },
{ name: 'gt-nps-5', title: '非常不好', index: 4 }
];
const store:any = localStorage.getItem('spmStatus');
const status = store ? JSON.parse(store) : null;
if (status !== null) {
const { nps_global } = status;
popVisible.value = nps_global.expire && nps_global.expire < Date.now();// 过期后才能重新展示
}
const swTab = (item:any) => { // 切换步骤
if (rateNow.value === null && item.index === 1) return;
OffsetOptions.crossAxis = item.offset_x;
opStep.value = item.index;
window.dispatchEvent(new Event('resize'));// 触发更新位置
};
const activeOp = (index:any) => { // hover等级
rateActive.value = index;
};
const selOpini = (item:any) => { // 设置等级
rateNow.value = item.index;
swTab(opinionStep[1]);
};
const OffsetOptions = reactive({ mainAxis: 10, crossAxis: -30 });
const handleSubmit = () => { // 提交意见
useReport('nps_global', {
nps_score: rateNow.value as any + 1,
nps_comment: opinionText.value
}).then(res => {
process.value = false;
OffsetOptions.crossAxis = 0;
window.dispatchEvent(new Event('resize'));// 触发更新位置
const nextStatus = status || {};
nextStatus.nps_global = { expire: Date.now() + 86400000 * 15 };// 记录提交的过期时间
localStorage.setItem('spmStatus', JSON.stringify(nextStatus));
setTimeout(() => { popVisible.value = false; }, 500);
});
};
</script>
<style scoped lang="scss">
.home-nav-right {
position: fixed;
right: 16px;
bottom: 120px;
z-index: 20;
@media screen and (max-width: 768px) { // 小屏不显示工具栏
display: none;
}
.home-nav-item {
margin-top: 12px;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: #fff;
text-align: center;
line-height: 44px;
box-shadow: 0 2px 6px 0 rgba(37, 43, 58, 0.12);
.home-nav-icon {
color: rgba(0, 0, 0, 0.5) !important;
}
&:hover {
cursor: pointer;
.home-nav-icon {
color: rgba(0, 0, 0, 1) !important;
}
}
}
}
.home-nav-tooltip-wrapper {
padding: 6px 12px;
max-width: 190px;
font-size: 12px;
line-height: 18px;
@apply whitespace-normal break-all;
}
.home-nav-link {
color: rgba(59, 130, 246, 1);
cursor: pointer;
}
.opinion-box{
display: flex;
flex-direction: column;
.tab-step{
display: flex;
.tab-item{
border-radius: 2px;
position: relative;
span{
width: 100%;
height: 12px;
position: absolute;
top: -4px;
left: 0;
z-index: 1;
}
}
}
.rate{
.opinion-item{
width: 40px;
height: 36px;
&:hover,&.active{
background:var(--color-B500);
border-color: transparent;
.icon{color: #fff !important;}
}
}
}
}
</style>
<style lang="scss">
.no-arrow{
&.devui-popover__content.devui-flexible-overlay{
background: transparent;
padding: 0;
border:none;
box-shadow: none;
}
.devui-flexible-overlay__arrow{
display: none !important;
}
}
</style>