初始版本
This commit is contained in:
276
app/components/invite/InviteBell.vue
Normal file
276
app/components/invite/InviteBell.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import {
|
||||
listPendingInvites,
|
||||
acceptInvite,
|
||||
rejectInvite,
|
||||
type AppUser
|
||||
} from '@/api/app/appUser'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { TeamOutlined, PlusOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
const invites = ref<AppUser[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
// 待确认邀请数量
|
||||
const pendingCount = computed(() => invites.value.length)
|
||||
|
||||
// 是否有待确认邀请
|
||||
const hasPending = computed(() => pendingCount.value > 0)
|
||||
|
||||
// 加载邀请列表
|
||||
async function loadInvites() {
|
||||
try {
|
||||
loading.value = true
|
||||
invites.value = await listPendingInvites()
|
||||
} catch (error) {
|
||||
console.error('加载邀请列表失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 接受邀请
|
||||
async function handleAccept(invite: AppUser) {
|
||||
if (!invite.id) return
|
||||
try {
|
||||
await acceptInvite(invite.id)
|
||||
message.success('已接受邀请，加入应用成功')
|
||||
// 移除已处理的邀请
|
||||
invites.value = invites.value.filter(i => i.id !== invite.id)
|
||||
// 刷新页面或跳转到应用
|
||||
setTimeout(() => {
|
||||
router.push('/developer/apps')
|
||||
}, 500)
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '接受邀请失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 拒绝邀请
|
||||
async function handleReject(invite: AppUser) {
|
||||
if (!invite.id) return
|
||||
Modal.confirm({
|
||||
title: '确认拒绝邀请？',
|
||||
content: `拒绝后将无法加入应用「${invite.productName || '未知应用'}」`,
|
||||
okText: '确认拒绝',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
try {
|
||||
await rejectInvite(invite.id!)
|
||||
message.success('已拒绝邀请')
|
||||
invites.value = invites.value.filter(i => i.id !== invite.id)
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '拒绝邀请失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 查看全部邀请
|
||||
function viewAllInvites() {
|
||||
router.push('/console/invites')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadInvites()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<a-dropdown v-if="hasPending" :trigger="['hover']" placement="bottomRight">
|
||||
<a-badge :count="pendingCount" :offset="[-2, 2]">
|
||||
<a-button type="text" class="invite-bell-btn">
|
||||
<template #icon>
|
||||
<TeamOutlined style="font-size: 18px; color: #fff" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-badge>
|
||||
<template #overlay>
|
||||
<a-menu class="invite-dropdown-menu">
|
||||
<a-menu-item-group title="应用邀请">
|
||||
<a-menu-item v-for="invite in invites.slice(0, 3)" :key="invite.id" class="invite-menu-item">
|
||||
<div class="invite-item-content">
|
||||
<a-avatar
|
||||
:src="invite.icon || '/logo.png'"
|
||||
:size="32"
|
||||
class="app-icon"
|
||||
/>
|
||||
<div class="invite-info">
|
||||
<div class="app-name">{{ invite.productName || '未知应用' }}</div>
|
||||
<div class="invite-meta">
|
||||
<span class="role-tag" :class="invite.role">
|
||||
{{ invite.role === 'owner' ? '所有者' :
|
||||
invite.role === 'admin' ? '管理员' :
|
||||
invite.role === 'developer' ? '开发者' : '访客' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invite-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
shape="circle"
|
||||
class="action-btn accept"
|
||||
@click.stop="handleAccept(invite)"
|
||||
>
|
||||
<CheckOutlined />
|
||||
</a-button>
|
||||
<a-button
|
||||
size="small"
|
||||
shape="circle"
|
||||
class="action-btn reject"
|
||||
@click.stop="handleReject(invite)"
|
||||
>
|
||||
<CloseOutlined />
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
</a-menu-item-group>
|
||||
<a-menu-divider v-if="invites.length > 0" />
|
||||
<a-menu-item key="view-all" @click="viewAllInvites">
|
||||
<span style="text-align: center; display: block;">
|
||||
查看全部 {{ pendingCount }} 个邀请
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.invite-bell-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invite-bell-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 下拉菜单样式 */
|
||||
.invite-dropdown-menu {
|
||||
min-width: 280px !important;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.invite-dropdown-menu .ant-dropdown-menu-item-group-title {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.invite-menu-item {
|
||||
padding: 12px 16px !important;
|
||||
height: auto !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.invite-menu-item:hover {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
.invite-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.invite-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.invite-meta {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.role-tag {
|
||||
font-size: 11px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.role-tag.owner {
|
||||
background: #fff2e8;
|
||||
color: #fa541c;
|
||||
}
|
||||
|
||||
.role-tag.admin {
|
||||
background: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.role-tag.developer {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.role-tag.viewer {
|
||||
background: #f9f0ff;
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
.invite-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-btn.accept {
|
||||
background: #52c41a;
|
||||
border-color: #52c41a;
|
||||
}
|
||||
|
||||
.action-btn.accept:hover {
|
||||
background: #73d13d;
|
||||
border-color: #73d13d;
|
||||
}
|
||||
|
||||
.action-btn.reject {
|
||||
background: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-btn.reject:hover {
|
||||
background: #ff7875;
|
||||
border-color: #ff7875;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
335
app/components/invite/InviteNotification.vue
Normal file
335
app/components/invite/InviteNotification.vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import {
|
||||
listPendingInvites,
|
||||
acceptInvite,
|
||||
rejectInvite,
|
||||
type AppUser
|
||||
} from '@/api/app/appUser'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { TeamOutlined, ClockCircleOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
const invites = ref<AppUser[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
// 待确认邀请数量
|
||||
const pendingCount = computed(() => invites.value.length)
|
||||
|
||||
// 是否有待确认邀请
|
||||
const hasPending = computed(() => pendingCount.value > 0)
|
||||
|
||||
// 加载邀请列表
|
||||
async function loadInvites() {
|
||||
try {
|
||||
loading.value = true
|
||||
const data = await listPendingInvites()
|
||||
console.log('邀请列表数据:', data)
|
||||
invites.value = data
|
||||
} catch (error) {
|
||||
console.error('加载邀请列表失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 接受邀请
|
||||
async function handleAccept(invite: AppUser) {
|
||||
if (!invite.id) return
|
||||
try {
|
||||
await acceptInvite(invite.id)
|
||||
message.success('已接受邀请，加入应用成功')
|
||||
// 移除已处理的邀请
|
||||
invites.value = invites.value.filter(i => i.id !== invite.id)
|
||||
// 刷新页面或跳转到应用
|
||||
setTimeout(() => {
|
||||
router.push('/developer/apps')
|
||||
}, 500)
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '接受邀请失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 拒绝邀请
|
||||
async function handleReject(invite: AppUser) {
|
||||
if (!invite.id) return
|
||||
Modal.confirm({
|
||||
title: '确认拒绝邀请？',
|
||||
content: `拒绝后将无法加入应用「${invite.productName || '未知应用'}」`,
|
||||
okText: '确认拒绝',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
try {
|
||||
await rejectInvite(invite.id!)
|
||||
message.success('已拒绝邀请')
|
||||
invites.value = invites.value.filter(i => i.id !== invite.id)
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '拒绝邀请失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 查看全部邀请
|
||||
function viewAllInvites() {
|
||||
router.push('/console/invites')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadInvites()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
loadInvites,
|
||||
pendingCount,
|
||||
hasPending
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="invite-notification">
|
||||
<!-- 悬浮卡片 - 直接展示邀请列表 -->
|
||||
<div v-if="hasPending" class="invite-float-card">
|
||||
<div class="invite-card-header">
|
||||
<div class="invite-title">
|
||||
<TeamOutlined class="invite-icon" />
|
||||
应用邀请
|
||||
</div>
|
||||
<div class="invite-count">{{ pendingCount }}</div>
|
||||
</div>
|
||||
|
||||
<div class="invite-card-body">
|
||||
<a-spin :spinning="loading">
|
||||
<div
|
||||
v-for="invite in invites.slice(0, 3)"
|
||||
:key="invite.id"
|
||||
class="invite-item"
|
||||
>
|
||||
<a-avatar
|
||||
:src="invite.icon || '/logo.png'"
|
||||
:size="40"
|
||||
class="app-icon"
|
||||
/>
|
||||
<div class="invite-info">
|
||||
<div class="app-name">{{ invite.productName || '未知应用' }}</div>
|
||||
<div class="invite-meta">
|
||||
<span class="role-tag" :class="invite.role">
|
||||
{{ invite.role === 'owner' ? '所有者' :
|
||||
invite.role === 'admin' ? '管理员' :
|
||||
invite.role === 'developer' ? '开发者' : '访客' }}
|
||||
</span>
|
||||
<span class="inviter">由 {{ invite.username || '未知用户' }} 邀请</span>
|
||||
</div>
|
||||
<div v-if="invite.inviteExpireTime" class="expire-time">
|
||||
<ClockCircleOutlined />
|
||||
有效期至：{{ invite.inviteExpireTime }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="invite-actions">
|
||||
<a-button
|
||||
size="small"
|
||||
@click="handleReject(invite)"
|
||||
>
|
||||
拒绝
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleAccept(invite)"
|
||||
>
|
||||
接受
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="invites.length > 3" class="view-more" @click="viewAllInvites">
|
||||
查看全部 {{ pendingCount }} 个邀请
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.invite-notification {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 悬浮卡片 */
|
||||
.invite-float-card {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 100px;
|
||||
z-index: 100;
|
||||
width: 420px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片头部 */
|
||||
.invite-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
.invite-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.invite-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.invite-count {
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 6px rgba(255, 77, 79, 0.4);
|
||||
}
|
||||
|
||||
/* 卡片内容 */
|
||||
.invite-card-body {
|
||||
padding: 8px 0;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.invite-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.invite-item:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.invite-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.invite-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
margin-bottom: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.invite-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.role-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.role-tag.owner {
|
||||
background: #fff2e8;
|
||||
color: #fa541c;
|
||||
}
|
||||
|
||||
.role-tag.admin {
|
||||
background: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.role-tag.developer {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.role-tag.viewer {
|
||||
background: #f9f0ff;
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
.inviter {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.expire-time {
|
||||
font-size: 12px;
|
||||
color: #faad14;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.invite-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.view-more {
|
||||
text-align: center;
|
||||
padding: 12px 20px;
|
||||
color: #667eea;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.view-more:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: #764ba2;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user