初始版本
This commit is contained in:
53
app/components/LangSwitch.vue
Normal file
53
app/components/LangSwitch.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<a-dropdown :trigger="['click']" placement="bottomRight">
|
||||
<a-button type="text" class="lang-btn">
|
||||
<template #icon>
|
||||
<GlobalOutlined />
|
||||
</template>
|
||||
<span class="current-lang">{{ currentLocaleName }}</span>
|
||||
<DownOutlined class="ml-1" />
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="switchLocale">
|
||||
<a-menu-item v-for="loc in availableLocales" :key="loc.code">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<span>{{ loc.name }}</span>
|
||||
<CheckOutlined v-if="loc.code === currentLocale" class="text-green-500" />
|
||||
</div>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GlobalOutlined, DownOutlined, CheckOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
const { locale: currentLocale, locales, setLocale } = useI18n()
|
||||
|
||||
const availableLocales = computed(() => {
|
||||
return (locales.value as Array<{ code: string; name: string }>).map((l) => ({
|
||||
code: l.code,
|
||||
name: l.name
|
||||
}))
|
||||
})
|
||||
|
||||
const currentLocaleName = computed(() => {
|
||||
const found = availableLocales.value.find((l) => l.code === currentLocale.value)
|
||||
return found?.name || currentLocale.value
|
||||
})
|
||||
|
||||
async function switchLocale({ key }: { key: string }) {
|
||||
await setLocale(key)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lang-btn {
|
||||
@apply text-gray-300 hover:text-white;
|
||||
}
|
||||
|
||||
.current-lang {
|
||||
@apply text-sm;
|
||||
}
|
||||
</style>
|
||||
383
app/components/NotificationBell.vue
Normal file
383
app/components/NotificationBell.vue
Normal file
@@ -0,0 +1,383 @@
|
||||
<template>
|
||||
<a-popover
|
||||
v-model:open="popoverVisible"
|
||||
trigger="click"
|
||||
placement="bottomRight"
|
||||
:overlay-class-name="`notification-popover ${theme}`"
|
||||
:arrow="true"
|
||||
@openChange="onPopoverChange"
|
||||
>
|
||||
<template #content>
|
||||
<div class="bell-dropdown">
|
||||
<!-- 头部：标题 + 全部已读 -->
|
||||
<div class="dropdown-header">
|
||||
<span class="dropdown-title">消息通知</span>
|
||||
<a-button
|
||||
v-if="unreadTotal > 0"
|
||||
type="link"
|
||||
size="small"
|
||||
class="mark-all-btn"
|
||||
:loading="markAllLoading"
|
||||
@click="handleMarkAll"
|
||||
>
|
||||
全部已读
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- Tab 过滤 -->
|
||||
<div class="dropdown-tabs">
|
||||
<a-radio-group v-model:value="activeType" size="small" button-style="solid" @change="handleTypeChange">
|
||||
<a-radio-button value="">全部</a-radio-button>
|
||||
<a-radio-button value="ticket">工单</a-radio-button>
|
||||
<a-radio-button value="system">系统</a-radio-button>
|
||||
<a-radio-button value="review">审核</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
|
||||
<!-- 通知列表 -->
|
||||
<div class="dropdown-list" @scroll="onListScroll">
|
||||
<a-spin :spinning="loading">
|
||||
<template v-if="filteredRecentList.length">
|
||||
<div
|
||||
v-for="item in filteredRecentList"
|
||||
:key="item.id"
|
||||
class="notification-item"
|
||||
:class="{ unread: !item.isRead }"
|
||||
@click="handleItemClick(item)"
|
||||
>
|
||||
<div class="item-icon">
|
||||
{{ notificationTypeMap[item.type!]?.icon || '📢' }}
|
||||
</div>
|
||||
<div class="item-body">
|
||||
<div class="item-title">{{ item.title }}</div>
|
||||
<div class="item-content">{{ item.content }}</div>
|
||||
<div class="item-meta">
|
||||
<span class="item-time">{{ formatTime(item.createTime) }}</span>
|
||||
<span v-if="item.senderName" class="item-sender">{{ item.senderName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!item.isRead" class="item-dot" />
|
||||
</div>
|
||||
</template>
|
||||
<a-empty v-else description="暂无消息" :image-style="{ height: '60px' }" />
|
||||
</a-spin>
|
||||
</div>
|
||||
|
||||
<!-- 底部：查看全部 -->
|
||||
<div class="dropdown-footer">
|
||||
<a-button type="link" block @click="goToAll">
|
||||
查看全部通知
|
||||
<RightOutlined />
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 铃铛触发器 -->
|
||||
<div class="bell-trigger" :class="[theme]" @click.stop>
|
||||
<a-badge :count="unreadTotal" :overflow-count="99" :dot="false" size="small">
|
||||
<BellOutlined class="bell-icon" />
|
||||
</a-badge>
|
||||
</div>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { BellOutlined, RightOutlined } from '@ant-design/icons-vue'
|
||||
import { useNotificationCenter, notificationTypeMap } from '@/composables/useNotificationCenter'
|
||||
import type { Notification, NotificationType } from '@/api/app/notification/model'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
/** 主题：light 用于 console 白色头部，dark 用于 SiteHeader 暗色头部 */
|
||||
theme?: 'light' | 'dark'
|
||||
}>(), {
|
||||
theme: 'light',
|
||||
})
|
||||
|
||||
const {
|
||||
unreadTotal,
|
||||
recentList,
|
||||
loading,
|
||||
fetchUnreadCount,
|
||||
fetchRecentNotifications,
|
||||
markNotificationRead,
|
||||
markAllAsRead,
|
||||
startPolling,
|
||||
stopPolling,
|
||||
formatTime,
|
||||
getNotificationLink,
|
||||
} = useNotificationCenter()
|
||||
|
||||
const popoverVisible = ref(false)
|
||||
const activeType = ref('')
|
||||
const markAllLoading = ref(false)
|
||||
|
||||
// 过滤后的最近通知
|
||||
const filteredRecentList = computed(() => {
|
||||
if (!activeType.value) return recentList.value
|
||||
return recentList.value.filter((n) => n.type === activeType.value)
|
||||
})
|
||||
|
||||
function onPopoverChange(visible: boolean) {
|
||||
if (visible) {
|
||||
fetchRecentNotifications()
|
||||
}
|
||||
}
|
||||
|
||||
function handleTypeChange() {
|
||||
// 切换类型时重新加载
|
||||
fetchRecentNotifications()
|
||||
}
|
||||
|
||||
async function handleItemClick(item: Notification) {
|
||||
// 标记已读
|
||||
if (!item.isRead && item.id) {
|
||||
await markNotificationRead(item.id)
|
||||
}
|
||||
// 关闭弹窗
|
||||
popoverVisible.value = false
|
||||
// 跳转
|
||||
const link = getNotificationLink(item)
|
||||
navigateTo(link)
|
||||
}
|
||||
|
||||
async function handleMarkAll() {
|
||||
markAllLoading.value = true
|
||||
try {
|
||||
const type = activeType.value || undefined
|
||||
await markAllAsRead(type)
|
||||
} finally {
|
||||
markAllLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goToAll() {
|
||||
popoverVisible.value = false
|
||||
navigateTo('/console/notifications')
|
||||
}
|
||||
|
||||
function onListScroll() {
|
||||
// 暂不实现无限滚动，铃铛下拉只展示最近 10 条
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
startPolling()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopPolling()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ===== 铃铛触发器 ===== */
|
||||
.bell-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bell-trigger.light {
|
||||
color: #374151;
|
||||
}
|
||||
.bell-trigger.light:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.bell-trigger.dark {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
.bell-trigger.dark:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bell-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* ===== 下拉面板 ===== */
|
||||
.bell-dropdown {
|
||||
width: 380px;
|
||||
max-height: 520px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px 8px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.dropdown-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
}
|
||||
|
||||
.mark-all-btn {
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.dropdown-tabs {
|
||||
padding: 8px 16px 4px;
|
||||
}
|
||||
|
||||
.dropdown-tabs :deep(.ant-radio-group) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropdown-tabs :deep(.ant-radio-button-wrapper) {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
height: 28px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
/* ===== 通知列表 ===== */
|
||||
.dropdown-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
max-height: 360px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.dropdown-list::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.dropdown-list::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.notification-item:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.notification-item.unread {
|
||||
background: rgba(24, 144, 255, 0.03);
|
||||
}
|
||||
|
||||
.notification-item.unread::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 24px;
|
||||
background: #1890ff;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
flex-shrink: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f7fa;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.item-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notification-item.unread .item-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.item-dot {
|
||||
flex-shrink: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #1890ff;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
/* ===== 底部 ===== */
|
||||
.dropdown-footer {
|
||||
padding: 6px 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.dropdown-footer :deep(.ant-btn-link) {
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.dropdown-footer :deep(.ant-btn-link:hover) {
|
||||
color: #1890ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 暗色主题下的 popover 适配 */
|
||||
.notification-popover.dark .ant-popover-inner {
|
||||
background: #1f2937;
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.notification-popover.dark .ant-popover-arrow::before {
|
||||
background: #1f2937;
|
||||
}
|
||||
</style>
|
||||
120
app/components/QrCodeModal.vue
Normal file
120
app/components/QrCodeModal.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:open="open"
|
||||
:footer="null"
|
||||
:width="380"
|
||||
centered
|
||||
:destroy-on-close="true"
|
||||
@cancel="$emit('update:open', false)"
|
||||
>
|
||||
<div class="qr-modal">
|
||||
<div class="qr-title">{{ title }}</div>
|
||||
<div class="qr-subtitle">{{ tip }}</div>
|
||||
|
||||
<div class="qr-image-wrap">
|
||||
<img
|
||||
v-if="qrcodeUrl"
|
||||
:src="qrcodeUrl"
|
||||
:alt="appName"
|
||||
class="qr-image"
|
||||
@error="loadError = true"
|
||||
/>
|
||||
<div v-if="loadError" class="qr-error">
|
||||
<PictureOutlined style="font-size: 40px; color: #bbb" />
|
||||
<span>图片加载失败</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="qr-app-name">{{ appName }}</div>
|
||||
|
||||
<div class="qr-actions">
|
||||
<a-button type="link" size="small" @click="downloadQr">
|
||||
<template #icon><DownloadOutlined /></template>
|
||||
保存小程序码
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DownloadOutlined, PictureOutlined } from '@ant-design/icons-vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps<{
|
||||
open: boolean
|
||||
qrcodeUrl?: string
|
||||
appName?: string
|
||||
title?: string
|
||||
tip?: string
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
'update:open': [val: boolean]
|
||||
}>()
|
||||
|
||||
const loadError = ref(false)
|
||||
|
||||
async function downloadQr() {
|
||||
// 由外部通过 ref 调用，或用简单方式下载
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.qr-modal {
|
||||
text-align: center;
|
||||
padding: 8px 0 0;
|
||||
}
|
||||
|
||||
.qr-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.qr-subtitle {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.qr-image-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
margin: 0 auto;
|
||||
background: #fafafa;
|
||||
border-radius: 12px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.qr-error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.qr-app-name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.qr-actions {
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
327
app/components/QrLogin.vue
Normal file
327
app/components/QrLogin.vue
Normal file
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<div class="qr-login">
|
||||
<div class="qr-box">
|
||||
<div v-if="status === 'loading'" class="qr-state">
|
||||
<a-spin size="large" />
|
||||
<p class="muted">正在生成二维码…</p>
|
||||
</div>
|
||||
|
||||
<!-- 微信扫码登录 -->
|
||||
<div v-else-if="status === 'active'" class="qr-state">
|
||||
<!-- 小程序码（优先展示，Base64格式） -->
|
||||
<img
|
||||
v-if="miniprogramQrCode"
|
||||
:src="miniprogramQrCode"
|
||||
class="qrcode-img"
|
||||
alt="小程序码登录"
|
||||
@click="refresh"
|
||||
/>
|
||||
<!-- 普通二维码（降级方案） -->
|
||||
<img
|
||||
v-else-if="qrCodeDataUrl"
|
||||
:src="qrCodeDataUrl"
|
||||
class="qrcode-img"
|
||||
alt="扫码登录"
|
||||
@click="refresh"
|
||||
/>
|
||||
<div v-else class="qrcode-placeholder">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<p class="tip">请使用微信扫一扫，扫码后自动登录</p>
|
||||
<p class="muted">有效期：{{ formatCountdown(expireSeconds) }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status === 'scanned'" class="qr-state">
|
||||
<CheckCircleOutlined class="icon ok" />
|
||||
<p class="ok-text">已识别扫码，请在手机上确认登录</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status === 'expired'" class="qr-state">
|
||||
<ClockCircleOutlined class="icon bad" />
|
||||
<p class="bad-text">二维码已过期</p>
|
||||
<a-button type="primary" @click="refresh">刷新二维码</a-button>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status === 'error'" class="qr-state">
|
||||
<ExclamationCircleOutlined class="icon bad" />
|
||||
<p class="bad-text">{{ errorMessage || '生成二维码失败' }}</p>
|
||||
<a-button type="primary" @click="refresh">重新生成</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="status === 'active'" class="actions">
|
||||
<a-button type="link" :loading="refreshing" @click="refresh">
|
||||
<ReloadOutlined />
|
||||
刷新二维码
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
CheckCircleOutlined,
|
||||
ClockCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
ReloadOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import {
|
||||
checkQrCodeStatus,
|
||||
generateQrCode,
|
||||
type QrCodeResponse,
|
||||
type QrCodeStatusResponse
|
||||
} from '@/api/passport/qrLogin'
|
||||
import { generateQrCodeDataUrl } from '@/composables/useQRCode'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'loginSuccess', data: QrCodeStatusResponse): void
|
||||
(e: 'loginError', error: string): void
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const qrCodeDataUrl = ref('') // 前端生成的base64二维码图片
|
||||
const miniprogramQrCode = ref('') // 后端返回的小程序码Base64图片（优先使用）
|
||||
const token = ref('')
|
||||
const status = ref<'loading' | 'active' | 'scanned' | 'expired' | 'error'>('loading')
|
||||
const expireSeconds = ref(0)
|
||||
const errorMessage = ref('')
|
||||
const refreshing = ref(false)
|
||||
|
||||
let statusTimer: ReturnType<typeof setInterval> | null = null
|
||||
let countdownTimer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
function stopTimers() {
|
||||
if (statusTimer) clearInterval(statusTimer)
|
||||
if (countdownTimer) clearInterval(countdownTimer)
|
||||
statusTimer = null
|
||||
countdownTimer = null
|
||||
}
|
||||
|
||||
// 启动轮询（小程序码和普通二维码共用）
|
||||
function startStatusPolling() {
|
||||
// 状态轮询
|
||||
statusTimer = setInterval(async () => {
|
||||
try {
|
||||
const current = await checkQrCodeStatus(token.value)
|
||||
if (current.expiresIn !== undefined) expireSeconds.value = current.expiresIn
|
||||
if (current.status === 'scanned') {
|
||||
status.value = 'scanned'
|
||||
return
|
||||
}
|
||||
if (current.status === 'bind_phone') {
|
||||
stopTimers()
|
||||
message.info(current.message || '检测到新用户，请先绑定手机号')
|
||||
await router.replace(`/bind-phone?token=${token.value}`)
|
||||
return
|
||||
}
|
||||
if (current.status === 'expired') {
|
||||
status.value = 'expired'
|
||||
stopTimers()
|
||||
return
|
||||
}
|
||||
if (current.status === 'confirmed') {
|
||||
stopTimers()
|
||||
emit('loginSuccess', current)
|
||||
}
|
||||
} catch {
|
||||
// ignore polling errors, keep polling
|
||||
}
|
||||
}, 2000)
|
||||
|
||||
// 倒计时
|
||||
countdownTimer = setInterval(() => {
|
||||
expireSeconds.value = Math.max(0, expireSeconds.value - 1)
|
||||
if (expireSeconds.value <= 0) {
|
||||
status.value = 'expired'
|
||||
stopTimers()
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
function formatCountdown(seconds: number) {
|
||||
const m = Math.floor(seconds / 60)
|
||||
const s = Math.max(0, seconds % 60)
|
||||
return `${m}:${String(s).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
function getErrorMessage(error: unknown) {
|
||||
if (error instanceof Error) return error.message
|
||||
if (typeof error === 'string') return error
|
||||
if (typeof error === 'object' && error && 'message' in error) {
|
||||
const msg = (error as { message?: unknown }).message
|
||||
if (typeof msg === 'string') return msg
|
||||
}
|
||||
try {
|
||||
return String(error)
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
async function init() {
|
||||
if (!import.meta.client) return
|
||||
stopTimers()
|
||||
status.value = 'loading'
|
||||
errorMessage.value = ''
|
||||
qrCodeDataUrl.value = ''
|
||||
try {
|
||||
const response: QrCodeResponse = await generateQrCode()
|
||||
token.value = response.token
|
||||
expireSeconds.value = response.expiresIn || 300
|
||||
|
||||
// 优先使用后端返回的小程序码Base64图片（扫码后直接打开小程序）
|
||||
if (response.miniprogramQrCode) {
|
||||
miniprogramQrCode.value = response.miniprogramQrCode
|
||||
console.info('使用小程序码（Base64，长度: {}）', miniprogramQrCode.value.length)
|
||||
status.value = 'active'
|
||||
// 小程序码模式下不需要前端生成二维码，启动轮询即可
|
||||
startStatusPolling()
|
||||
return
|
||||
}
|
||||
|
||||
// 小程序码不存在，降级到普通二维码
|
||||
miniprogramQrCode.value = ''
|
||||
console.warn('后端未返回小程序码，降级到普通二维码')
|
||||
|
||||
// 获取二维码内容
|
||||
// 优先级：wechatScanUrl（H5页面，微信能识别）> qrCodeContent（如果是http开头）> 降级URL
|
||||
// 不使用 qrCodeContent，因为它是 websopy:// 自定义协议，微信无法识别
|
||||
let qrContent = '';
|
||||
if (response.wechatScanUrl) {
|
||||
// 优先使用 wechatScanUrl（H5 扫码页面，微信能打开）
|
||||
qrContent = response.wechatScanUrl
|
||||
console.info('使用微信扫码URL:', qrContent)
|
||||
} else if (response.qrCodeContent && response.qrCodeContent.startsWith('http')) {
|
||||
// 如果 qrCodeContent 是 http 开头，也可以使用
|
||||
qrContent = response.qrCodeContent
|
||||
console.info('使用 qrCodeContent:', qrContent)
|
||||
} else {
|
||||
// 降级：使用当前域名构建扫码URL
|
||||
const currentOrigin = window.location.origin
|
||||
qrContent = `${currentOrigin}/wx-scan?token=${response.token}`
|
||||
console.info('使用降级扫码URL:', qrContent)
|
||||
}
|
||||
|
||||
// 前端直接生成base64二维码，不再依赖后端返回的图片URL
|
||||
try {
|
||||
qrCodeDataUrl.value = await generateQrCodeDataUrl(qrContent, {
|
||||
width: 280,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#000000',
|
||||
light: '#ffffff'
|
||||
}
|
||||
})
|
||||
} catch (e) {
|
||||
console.error('生成二维码失败:', e)
|
||||
throw new Error('生成二维码失败，请刷新重试')
|
||||
}
|
||||
|
||||
status.value = 'active'
|
||||
|
||||
// 启动轮询
|
||||
startStatusPolling()
|
||||
} catch (error: unknown) {
|
||||
status.value = 'error'
|
||||
errorMessage.value = getErrorMessage(error) || '生成二维码失败'
|
||||
message.error(errorMessage.value)
|
||||
emit('loginError', errorMessage.value)
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
refreshing.value = true
|
||||
try {
|
||||
await init()
|
||||
} finally {
|
||||
refreshing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopTimers()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.qr-login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 0 12px;
|
||||
}
|
||||
|
||||
.qr-box {
|
||||
width: 100%;
|
||||
min-height: 260px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.qr-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 二维码样式 */
|
||||
.qrcode-img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.qrcode-img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
.qrcode-placeholder {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: #111827;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.muted {
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.actions {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.icon {
|
||||
font-size: 48px;
|
||||
}
|
||||
.ok {
|
||||
color: #16a34a;
|
||||
}
|
||||
.bad {
|
||||
color: #ef4444;
|
||||
}
|
||||
.ok-text {
|
||||
margin: 0;
|
||||
color: #16a34a;
|
||||
}
|
||||
.bad-text {
|
||||
margin: 0;
|
||||
color: #ef4444;
|
||||
}
|
||||
</style>
|
||||
195
app/components/SiteFooter.vue
Normal file
195
app/components/SiteFooter.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<a-layout-footer class="footer">
|
||||
<div class="mx-auto max-w-screen-xl px-4 py-12">
|
||||
<!-- 主要内容区域 -->
|
||||
<a-row :gutter="[32, 40]">
|
||||
<!-- 品牌介绍 -->
|
||||
<a-col :xs="24" :md="6">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="text-2xl">🦞</span>
|
||||
<span class="text-lg font-semibold text-white">AI-Native</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-400 leading-6 mb-4">
|
||||
深度集成 OpenClaw 开源 AI Agent 框架，为企业提供智能客服、知识库问答、自动化工作流等能力。
|
||||
</p>
|
||||
<div class="flex gap-3">
|
||||
<a-tooltip title="GitHub">
|
||||
<a href="https://github.com/openclaw" target="_blank" class="text-gray-400 hover:text-white transition-colors">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /></svg>
|
||||
</a>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="微信公众号">
|
||||
<span class="text-gray-400 hover:text-white cursor-pointer transition-colors">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .186-.059l2.114-1.225a.866.866 0 0 1 .58-.091 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 3.952 6.884 3.952.526 0 1.045-.048 1.555-.133-.207-.533-.454-1.05-.768-1.532l-.15.086c-.655.373-1.546.597-2.477.597-.769 0-1.491-.183-2.143-.507a4.226 4.226 0 0 1-1.762-1.399c-.052-.059-.104-.117-.154-.175l-.001.001a4.312 4.312 0 0 1 2.824-1.127c1.513 0 2.75.707 3.534 1.606.505.759.882 1.613 1.105 2.523 1.418-1.215 2.391-2.727 2.797-4.415.458-1.193.412-2.285-.097-3.177-.538-.942-1.391-1.64-2.397-2.086zm-6.115 5.115a.683.683 0 0 0-.683.683.683.683 0 0 0 .683.683.683.683 0 0 0 .683-.683.683.683 0 0 0-.683-.683zm4.524 0a.683.683 0 0 0-.683.683.683.683 0 0 0 .683.683.683.683 0 0 0 .683-.683.683.683 0 0 0-.683-.683z" /></svg>
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 产品服务 -->
|
||||
<a-col :xs="12" :sm="6" :md="4">
|
||||
<div class="text-base font-semibold text-white mb-4">产品服务</div>
|
||||
<div class="grid gap-3 text-sm text-gray-400">
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/ai-agent">AI 智能体</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/website">云官网</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/miniapp">小程序开发</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/shop">小程序商城</NuxtLink>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 平台能力 -->
|
||||
<a-col :xs="12" :sm="6" :md="4">
|
||||
<div class="text-base font-semibold text-white mb-4">平台能力</div>
|
||||
<div class="grid gap-3 text-sm text-gray-400">
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/platform">多租户架构</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/platform">私有化部署</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/market">模板市场</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/market">插件市场</NuxtLink>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 快速入口 -->
|
||||
<a-col :xs="12" :sm="6" :md="4">
|
||||
<div class="text-base font-semibold text-white mb-4">快速入口</div>
|
||||
<div class="grid gap-3 text-sm text-gray-400">
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/flow">开通流程</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/deploy">部署方案</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/contact">联系我们</NuxtLink>
|
||||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/login">立即登录</NuxtLink>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 联系我们 -->
|
||||
<a-col :xs="12" :sm="6" :md="6">
|
||||
<div class="text-base font-semibold text-white mb-4">联系我们</div>
|
||||
<div class="grid gap-3 text-sm text-gray-400">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-500">📱</span>
|
||||
<span>0771-5386339</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="text-gray-500">📍</span>
|
||||
<span>广西·南宁·良庆区 五象大道401号五象航洋城1226</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 扫码下载 / 关注 -->
|
||||
<div class="mt-5">
|
||||
<div class="text-xs text-gray-500 mb-3">扫码下载 / 关注</div>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<!-- 微信小程序 -->
|
||||
<a-tooltip color="#1f2937" placement="top">
|
||||
<template #title>
|
||||
<div class="flex flex-col items-center gap-1 p-1">
|
||||
<img src="/images/qrcode-miniapp.jpg" alt="微信小程序" class="w-28 h-28 rounded" />
|
||||
<span class="text-xs text-gray-300">微信小程序</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col items-center gap-1 cursor-pointer group">
|
||||
<div class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 group-hover:border-green-400/60 transition-colors">
|
||||
<img src="/images/qrcode-miniapp.jpg" alt="微信小程序" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 group-hover:text-green-400 transition-colors">小程序</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
|
||||
<!-- 微信公众号 -->
|
||||
<a-tooltip color="#1f2937" placement="top">
|
||||
<template #title>
|
||||
<div class="flex flex-col items-center gap-1 p-1">
|
||||
<img src="/images/qrcode-mp-official.jpg" alt="微信公众号" class="w-28 h-28 rounded" />
|
||||
<span class="text-xs text-gray-300">微信公众号</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col items-center gap-1 cursor-pointer group">
|
||||
<div class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 group-hover:border-green-400/60 transition-colors">
|
||||
<img src="/images/qrcode-mp-official.jpg" alt="微信公众号" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 group-hover:text-green-400 transition-colors">公众号</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
|
||||
<!-- APP 下载（Android & iOS 通用） -->
|
||||
<a-tooltip color="#1f2937" placement="top">
|
||||
<template #title>
|
||||
<div class="flex flex-col items-center gap-1 p-1">
|
||||
<img src="/images/qrcode-app.jpg" alt="下载 APP" class="w-28 h-28 rounded" />
|
||||
<span class="text-xs text-gray-300">扫码下载 APP</span>
|
||||
<span class="text-xs text-gray-500">Android & iOS</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col items-center gap-1 cursor-pointer group">
|
||||
<div class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 group-hover:border-blue-400/60 transition-colors">
|
||||
<img src="/images/qrcode-app.jpg" alt="下载 APP" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 group-hover:text-blue-400 transition-colors">下载 APP</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 底部版权区域 -->
|
||||
<div class="mt-10 pt-6 border-t border-white/10">
|
||||
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between text-xs text-gray-500">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<img src="/logo.png" alt="websopy" style="height:12px;width:auto;opacity:0.4;" />
|
||||
<span>© {{ year }} Websopy. All rights reserved.</span>
|
||||
<a
|
||||
href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener"
|
||||
class="text-gray-500 hover:text-orange-400 transition-colors"
|
||||
>{{ icpText }}</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 opacity-80 hover:opacity-90 text-gray-100 text-xs">
|
||||
<!-- 切换语言 -->
|
||||
<!-- <LangSwitch />-->
|
||||
<span class="text-gray-500">Powered by</span>
|
||||
<a
|
||||
rel="nofollow"
|
||||
href="https://site.websoft.top"
|
||||
target="_blank"
|
||||
>
|
||||
<span class="text-gray-500 hover:text-gray-200">云·企业官网</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-layout-footer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getAppProductFieldByCode } from '@/api/cms/cmsWebsiteField'
|
||||
|
||||
const siteName = '桂乐淘'
|
||||
|
||||
const { data: icpField } = useAsyncData('cmsWebsite-field-icpNo', async () => {
|
||||
try {
|
||||
return await getAppProductFieldByCode('icpNo')
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
const icpNo = computed(() => {
|
||||
const v = icpField.value?.value ?? icpField.value?.defaultValue
|
||||
if (typeof v === 'string' && v.trim()) return v.trim()
|
||||
return ''
|
||||
})
|
||||
|
||||
const icpText = computed(() => (icpNo.value ? `备案号：${icpNo.value}` : '备案号：桂ICP备13003666号-12'))
|
||||
const year = new Date().getFullYear()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
background: #111827;
|
||||
padding: 0;
|
||||
}
|
||||
/* 覆盖浏览器默认蓝色链接色 */
|
||||
.footer :deep(a) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
421
app/components/SiteHeader.vue
Normal file
421
app/components/SiteHeader.vue
Normal file
@@ -0,0 +1,421 @@
|
||||
<template>
|
||||
<a-affix :offset-top="0">
|
||||
<a-layout-header class="header">
|
||||
<div class="nav-bar mx-auto max-w-screen-xl px-4 h-full">
|
||||
<!-- 左侧：Logo + 菜单 -->
|
||||
<div class="flex items-center gap-8 nav-left">
|
||||
<!-- Logo -->
|
||||
<NuxtLink to="/" class="flex items-center logo-link cursor-pointer flex-shrink-0">
|
||||
<img src="/logo.png" alt="websopy" class="logo-img" />
|
||||
<div class="site-name mx-2">{{ 'websopy' }}</div>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- PC 导航菜单 -->
|
||||
<a-menu
|
||||
mode="horizontal"
|
||||
theme="dark"
|
||||
:selected-keys="selectedKeys"
|
||||
class="menu hidden md:flex"
|
||||
>
|
||||
<template v-for="item in nav" :key="item.key">
|
||||
<a-sub-menu v-if="item.children && item.children.length" :key="item.key">
|
||||
<template #title>
|
||||
<NuxtLink :to="item.to" class="nav-item-wrapper">
|
||||
<span>{{ item.label }}</span>
|
||||
<span v-if="item.badge" :class="getBadgeClass(item.badge)">{{ item.badge }}</span>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<a-menu-item v-for="sub in item.children" :key="sub.key">
|
||||
<a v-if="sub.href" :href="sub.href" target="_blank" rel="noopener" class="nav-item-wrapper">{{ sub.label }}</a>
|
||||
<NuxtLink v-else :to="sub.to">{{ sub.label }}</NuxtLink>
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="item.to">
|
||||
<NuxtLink :to="item.to" class="nav-item-wrapper">
|
||||
<span>{{ item.label }}</span>
|
||||
<span v-if="item.badge" :class="getBadgeClass(item.badge)">{{ item.badge }}</span>
|
||||
</NuxtLink>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu>
|
||||
</div>
|
||||
|
||||
<!-- 右侧操作区 -->
|
||||
<div class="flex items-center gap-2 flex-shrink-0 nav-right">
|
||||
<!-- PC 端：登录/头像 -->
|
||||
<div class="hidden md:flex items-center gap-3">
|
||||
<template v-if="!isAuthed">
|
||||
<a-button type="primary" @click="navigateTo('/login')">{{ $t('nav.login') }}</a-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 控制台快捷按钮 -->
|
||||
<a-button class="console-btn" @click="navigateTo('/console')">{{ $t('nav.dashboard') }}</a-button>
|
||||
<!-- 消息通知铃铛仅在 /console 页面显示 -->
|
||||
<a-dropdown :trigger="['hover']" placement="bottomRight">
|
||||
<a-space>
|
||||
<a-avatar :src="userAvatar" :size="32">
|
||||
<template v-if="!userAvatar" #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<span class="text-gray-100">{{ userName }}</span>
|
||||
</a-space>
|
||||
<template #overlay>
|
||||
<a-menu @click="onUserMenuClick">
|
||||
<a-menu-item key="profile"><ProfileOutlined style="margin-right: 8px" />个人信息</a-menu-item>
|
||||
<a-menu-item key="orders"><ShoppingCartOutlined style="margin-right: 8px" />我的订单</a-menu-item>
|
||||
<a-menu-item key="account-kyc">
|
||||
<IdcardOutlined style="margin-right: 8px" />
|
||||
实名认证
|
||||
</a-menu-item>
|
||||
<template v-if="isDeveloper">
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="developer">🛠️ {{ $t('nav.developer') || '开发者中心' }}</a-menu-item>
|
||||
<a-menu-item key="env-dev" @click.stop="switchEnv('dev')">
|
||||
<span :class="{ 'font-bold': currentEnv === 'dev' }">🔧 {{ $t('common.devEnv') || '开发环境' }}</span>
|
||||
<span v-if="currentEnv === 'dev'" class="ml-2 text-green-500">✓</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="env-prod" @click.stop="switchEnv('prod')">
|
||||
<span :class="{ 'font-bold': currentEnv === 'prod' }">🚀 {{ $t('common.prodEnv') || '生产环境' }}</span>
|
||||
<span v-if="currentEnv === 'prod'" class="ml-2 text-green-500">✓</span>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
<template v-if="isSuperAdmin">
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="admin">⚙️ 平台管理</a-menu-item>
|
||||
</template>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="logout">{{ $t('nav.logout') }}</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 移动端：汉堡菜单按钮 -->
|
||||
<button class="md:hidden flex flex-col justify-center items-center w-10 h-10 gap-1.5 rounded-lg bg-white/10 hover:bg-white/20 border border-white/20 transition-colors" @click="open = true">
|
||||
<span class="block w-5 h-0.5 bg-white rounded-full"></span>
|
||||
<span class="block w-5 h-0.5 bg-white rounded-full"></span>
|
||||
<span class="block w-5 h-0.5 bg-white rounded-full"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
</a-affix>
|
||||
|
||||
<a-drawer v-model:open="open" :title="$t('nav.navigation') || '导航'" placement="right">
|
||||
<a-menu mode="inline" :selected-keys="selectedKeys">
|
||||
<template v-for="item in nav" :key="item.key">
|
||||
<a-sub-menu v-if="item.children && item.children.length" :key="item.key">
|
||||
<template #title>{{ item.label }}</template>
|
||||
<a-menu-item v-for="sub in item.children" :key="sub.key">
|
||||
<a v-if="sub.href" :href="sub.href" target="_blank" rel="noopener" @click="open = false">{{ sub.label }}</a>
|
||||
<span v-else @click="onNav(sub.to)">{{ sub.label }}</span>
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="item.to" @click="onNav(item.to)">
|
||||
<NuxtLink :to="item.to" class="nav-item-wrapper">
|
||||
<span>{{ item.label }}</span>
|
||||
<span v-if="item.badge" :class="getBadgeClass(item.badge)">{{ item.badge }}</span>
|
||||
</NuxtLink>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu>
|
||||
<div class="mt-4">
|
||||
<a-button v-if="!isAuthed" block type="primary" @click="onNav('/login')">{{ $t('nav.login') }}</a-button>
|
||||
<template v-else>
|
||||
<a-button block type="primary" class="mb-2" @click="onNav('/console')">{{ $t('nav.dashboard') }}</a-button>
|
||||
<a-button block @click="onNav('/console/account')">{{ $t('nav.userCenter') }}</a-button>
|
||||
<a-button block @click="onNav('/console/orders')">{{ $t('nav.orders') || '我的订单' }}</a-button>
|
||||
<a-button v-if="isDeveloper" block @click="onNav('/developer')">🛠️ {{ $t('nav.developer') || '开发者中心' }}</a-button>
|
||||
<a-button v-if="isSuperAdmin" block @click="onNav('/admin')">⚙️ {{ $t('nav.admin') || '平台管理' }}</a-button>
|
||||
<a-button block danger class="mt-2" @click="logout">{{ $t('nav.logout') }}</a-button>
|
||||
</template>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { mainNav } from '@/config/nav'
|
||||
import { getUserInfo } from '@/api/layout'
|
||||
import type { User } from '@/api/system/user/model'
|
||||
import { getToken, removeToken } from '@/utils/token-util'
|
||||
import { clearAuthz, setAuthzFromUser } from '@/utils/permission'
|
||||
import { UserOutlined, ProfileOutlined, IdcardOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { ENV_CONFIG, getCurrentEnv, setCurrentEnv, type EnvKey } from '@/config/setting'
|
||||
import InviteBell from './invite/InviteBell.vue'
|
||||
|
||||
const nav = computed(() => mainNav)
|
||||
const route = useRoute()
|
||||
const open = ref(false)
|
||||
|
||||
// 环境切换
|
||||
const currentEnv = ref<EnvKey>(getCurrentEnv())
|
||||
|
||||
function switchEnv(env: EnvKey) {
|
||||
setCurrentEnv(env)
|
||||
currentEnv.value = env
|
||||
|
||||
// 同时设置 Cookie，让服务器端代理也能识别环境
|
||||
const cookieValue = env === 'dev' ? 'dev' : 'prod'
|
||||
document.cookie = `websopy_api_env=${cookieValue}; path=/; max-age=31536000`
|
||||
|
||||
message.success(`已切换到 ${ENV_CONFIG[env].name}，正在刷新...`)
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const selectedKeys = computed(() => {
|
||||
const hit = nav.value.find((n) => n.to === route.path)
|
||||
if (hit) return [hit.to]
|
||||
if (route.path.startsWith('/products')) return ['/products']
|
||||
if (route.path.startsWith('/ai-agent')) return ['/ai-agent']
|
||||
return ['/']
|
||||
})
|
||||
|
||||
// 获取 badge 样式类
|
||||
function getBadgeClass(badge: string) {
|
||||
const baseClass = 'ml-1.5 px-1.5 py-0.5 text-xs font-medium rounded'
|
||||
if (badge === 'HOT') {
|
||||
return `${baseClass} bg-orange-500 text-white`
|
||||
}
|
||||
if (badge === 'NEW') {
|
||||
return `${baseClass} bg-green-500 text-white`
|
||||
}
|
||||
return `${baseClass} bg-gray-500 text-white`
|
||||
}
|
||||
|
||||
const siteName = ref('葳溯科技')
|
||||
|
||||
const token = ref('')
|
||||
const user = ref<User | null>(null)
|
||||
const isAuthed = computed(() => !!token.value)
|
||||
const userName = computed(() => String(user.value?.nickname || user.value?.username || '已登录'))
|
||||
const isSuperAdmin = computed(() => !!(user.value as any)?.isAdmin)
|
||||
const isDeveloper = computed(() => (user.value as any)?.type === 2)
|
||||
const userAvatar = computed(() => {
|
||||
const candidate =
|
||||
user.value?.avatarUrl ||
|
||||
user.value?.avatar ||
|
||||
user.value?.merchantAvatar ||
|
||||
user.value?.logo ||
|
||||
''
|
||||
if (typeof candidate !== 'string') return ''
|
||||
const normalized = candidate.trim()
|
||||
if (!normalized || normalized === 'null' || normalized === 'undefined') return ''
|
||||
return normalized
|
||||
})
|
||||
|
||||
function onNav(to: string) {
|
||||
open.value = false
|
||||
navigateTo(to)
|
||||
}
|
||||
|
||||
async function refreshAuth() {
|
||||
token.value = getToken()
|
||||
if (!token.value) {
|
||||
user.value = null
|
||||
clearAuthz()
|
||||
return
|
||||
}
|
||||
try {
|
||||
user.value = await getUserInfo()
|
||||
setAuthzFromUser(user.value)
|
||||
} catch {
|
||||
// token may be expired; keep authed UI but without profile info
|
||||
clearAuthz()
|
||||
}
|
||||
}
|
||||
|
||||
function goConsoleCenter() {
|
||||
if (!isAuthed.value) return navigateTo('/login')
|
||||
open.value = false
|
||||
navigateTo('/console')
|
||||
}
|
||||
|
||||
function goDeveloperCenter() {
|
||||
if (!isAuthed.value) return navigateTo('/login')
|
||||
open.value = false
|
||||
navigateTo('/developer')
|
||||
}
|
||||
|
||||
function logout() {
|
||||
removeToken()
|
||||
try {
|
||||
localStorage.removeItem('TenantId')
|
||||
localStorage.removeItem('UserId')
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
clearAuthz()
|
||||
user.value = null
|
||||
token.value = ''
|
||||
open.value = false
|
||||
navigateTo('/')
|
||||
}
|
||||
|
||||
function onUserMenuClick(info: { key: string }) {
|
||||
if (info.key === 'profile') return navigateTo('/console/account')
|
||||
if (info.key === 'orders') return navigateTo('/console/orders')
|
||||
if (info.key === 'account-kyc') return navigateTo('/console/account/kyc')
|
||||
if (info.key === 'developer') return navigateTo('/developer')
|
||||
if (info.key === 'admin') return navigateTo('/admin')
|
||||
if (info.key === 'logout') return logout()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
refreshAuth()
|
||||
|
||||
window.addEventListener('auth-token-changed', refreshAuth)
|
||||
window.addEventListener('storage', refreshAuth)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('auth-token-changed', refreshAuth)
|
||||
window.removeEventListener('storage', refreshAuth)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
background: #111827;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
padding: 0;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
/* 两栏布局：左侧 logo+菜单，右侧操作按钮 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5rem; /* logo 与菜单的间距 */
|
||||
}
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
background: transparent;
|
||||
border-bottom: none;
|
||||
min-width: 0;
|
||||
}
|
||||
.logo-link {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logo-img {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
display: block;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.site-name {
|
||||
color: #fff;
|
||||
font-family: 'Alimama FangYuanTi VF,sans-serif', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #a5c8ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.logo-link:hover .site-name {
|
||||
opacity: 0.85;
|
||||
}
|
||||
.logo-link:hover .logo-img {
|
||||
opacity: 0.85;
|
||||
}
|
||||
.nav-item-wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ── 统一去掉选中/展开/hover 时的蓝色，改为白色文字 + 底部橙线 ── */
|
||||
|
||||
/* 选中项背景去掉 */
|
||||
:deep(.ant-menu-dark .ant-menu-item-selected),
|
||||
:deep(.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title),
|
||||
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-selected),
|
||||
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-selected > .ant-menu-submenu-title) {
|
||||
background-color: transparent !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* 选中时底部橙线 */
|
||||
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-selected),
|
||||
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-selected) {
|
||||
background-color: transparent !important;
|
||||
border-bottom: 2px solid #f97316 !important;
|
||||
}
|
||||
|
||||
/* sub-menu 展开/hover 时标题不变蓝 */
|
||||
:deep(.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title),
|
||||
:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title),
|
||||
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-open),
|
||||
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-active) {
|
||||
background-color: transparent !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
:deep(.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-title-content),
|
||||
:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-title-content),
|
||||
:deep(.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-title-content a),
|
||||
:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-title-content a) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* 展开箭头不变蓝 */
|
||||
:deep(.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title .ant-menu-submenu-arrow),
|
||||
:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title .ant-menu-submenu-arrow) {
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
}
|
||||
|
||||
/* 所有菜单项 hover/active 时文字统一白色 */
|
||||
:deep(.ant-menu-dark .ant-menu-item-active > .ant-menu-item-content),
|
||||
:deep(.ant-menu-dark .ant-menu-item-active > .ant-menu-item-content a),
|
||||
:deep(.ant-menu-dark .ant-menu-item-open > .ant-menu-item-content),
|
||||
:deep(.ant-menu-dark .ant-menu-item-open > .ant-menu-item-content a),
|
||||
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-active),
|
||||
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-active a) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* 所有菜单项默认文字颜色（覆盖 ant-menu-item a 的蓝色） */
|
||||
:deep(.ant-menu-dark .ant-menu-item a),
|
||||
:deep(.ant-menu-dark .ant-menu-submenu-title a) {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
:deep(.ant-menu-dark .ant-menu-item a:hover),
|
||||
:deep(.ant-menu-dark .ant-menu-submenu-title a:hover) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* 选中项文字强制白色 */
|
||||
:deep(.ant-menu-dark .ant-menu-item-selected a),
|
||||
:deep(.ant-menu-dark .ant-menu-submenu-selected .ant-menu-submenu-title a) {
|
||||
color: #fff !important;
|
||||
}
|
||||
/* 控制台按钮：白色边框 + 白色文字，hover 加白色背景 */
|
||||
.console-btn {
|
||||
background: transparent !important;
|
||||
border-color: rgba(255, 255, 255, 0.45) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.console-btn:hover {
|
||||
border-color: #fff !important;
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
609
app/components/admin/MarkdownEditor.vue
Normal file
609
app/components/admin/MarkdownEditor.vue
Normal file
@@ -0,0 +1,609 @@
|
||||
<template>
|
||||
<div class="markdown-editor-wrapper" :class="{ 'fullscreen': isFullscreen }">
|
||||
<!-- 编辑器工具栏 -->
|
||||
<div class="editor-toolbar">
|
||||
<div class="toolbar-left">
|
||||
<a-space>
|
||||
<a-tooltip title="标题">
|
||||
<a-button size="small" @click="insertAtCursor('# ')">
|
||||
<template #icon><span class="toolbar-icon">H</span></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-divider type="vertical" />
|
||||
<a-tooltip title="加粗">
|
||||
<a-button size="small" @click="insertWrap('**', '**')">
|
||||
<template #icon><span class="toolbar-icon bold">B</span></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="斜体">
|
||||
<a-button size="small" @click="insertWrap('*', '*')">
|
||||
<template #icon><span class="toolbar-icon italic">I</span></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="删除线">
|
||||
<a-button size="small" @click="insertWrap('~~', '~~')">
|
||||
<template #icon><span class="toolbar-icon">S</span></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-divider type="vertical" />
|
||||
<a-tooltip title="引用">
|
||||
<a-button size="small" @click="insertAtCursor('> ')">
|
||||
<template #icon><span class="toolbar-icon">></span></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="代码块">
|
||||
<a-button size="small" @click="insertCodeBlock">
|
||||
<template #icon><span class="toolbar-icon"></></span></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="行内代码">
|
||||
<a-button size="small" @click="insertWrap('`', '`')">
|
||||
<template #icon><span class="toolbar-icon">`</span></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-divider type="vertical" />
|
||||
<a-tooltip title="链接">
|
||||
<a-button size="small" @click="insertLink">
|
||||
<template #icon><LinkOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="图片">
|
||||
<a-button size="small" @click="handleImageUpload">
|
||||
<template #icon><PictureOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-divider type="vertical" />
|
||||
<a-tooltip title="有序列表">
|
||||
<a-button size="small" @click="insertAtCursor('1. ')">
|
||||
<template #icon><UnorderedListOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="无序列表">
|
||||
<a-button size="small" @click="insertAtCursor('- ')">
|
||||
<template #icon><OrderedListOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-divider type="vertical" />
|
||||
<a-tooltip title="水平线">
|
||||
<a-button size="small" @click="insertAtCursor('\n---\n')">
|
||||
<template #icon><MinusOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<a-button size="small" @click="toggleFullscreen">
|
||||
<template #icon><FullscreenOutlined v-if="!isFullscreen" /><FullscreenExitOutlined v-else /></template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑区域 -->
|
||||
<div class="editor-body">
|
||||
<div class="editor-pane">
|
||||
<textarea
|
||||
ref="textareaRef"
|
||||
v-model="localValue"
|
||||
class="markdown-textarea"
|
||||
:placeholder="placeholder"
|
||||
:style="{ height: isFullscreen ? '100%' : 'auto' }"
|
||||
@input="handleInput"
|
||||
@keydown="handleKeydown"
|
||||
@scroll="syncScroll"
|
||||
/>
|
||||
</div>
|
||||
<div class="preview-pane" v-if="showPreview">
|
||||
<div class="preview-label">预览</div>
|
||||
<div class="markdown-preview" v-html="renderedHtml"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 隐藏的文件上传 -->
|
||||
<a-upload
|
||||
ref="uploadRef"
|
||||
accept="image/*"
|
||||
:show-upload-list="false"
|
||||
:before-upload="beforeImageUpload"
|
||||
:custom-request="handleCoverUpload"
|
||||
style="display: none"
|
||||
/>
|
||||
|
||||
<!-- 插入链接弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="showLinkModal"
|
||||
title="插入链接"
|
||||
:width="400"
|
||||
@ok="insertLinkConfirm"
|
||||
>
|
||||
<a-form :model="linkForm" layout="vertical">
|
||||
<a-form-item label="链接文本" required>
|
||||
<a-input v-model:value="linkForm.text" placeholder="显示的文本" />
|
||||
</a-form-item>
|
||||
<a-form-item label="链接地址" required>
|
||||
<a-input v-model:value="linkForm.url" placeholder="https://..." />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 字数统计 -->
|
||||
<div class="editor-footer">
|
||||
<span class="word-count">{{ wordCount }} 字</span>
|
||||
<span class="char-count">{{ charCount }} 字符</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
LinkOutlined,
|
||||
PictureOutlined,
|
||||
UnorderedListOutlined,
|
||||
OrderedListOutlined,
|
||||
MinusOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { marked } from 'marked'
|
||||
import hljs from 'highlight.js'
|
||||
import 'highlight.js/styles/github.css'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { uploadFile } from '@/api/system/file'
|
||||
|
||||
interface Props {
|
||||
modelValue: string
|
||||
placeholder?: string
|
||||
showPreview?: boolean
|
||||
minHeight?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
placeholder: '请输入 Markdown 内容...',
|
||||
showPreview: true,
|
||||
minHeight: '300px',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
}>()
|
||||
|
||||
// 配置 marked
|
||||
marked.setOptions({
|
||||
highlight: function(code: string, lang: string) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
return hljs.highlight(code, { language: lang }).value
|
||||
}
|
||||
return hljs.highlightAuto(code).value
|
||||
},
|
||||
breaks: true,
|
||||
gfm: true,
|
||||
})
|
||||
|
||||
const textareaRef = ref<HTMLTextAreaElement | null>(null)
|
||||
const uploadRef = ref<any>(null)
|
||||
const localValue = ref(props.modelValue)
|
||||
const isFullscreen = ref(false)
|
||||
const showLinkModal = ref(false)
|
||||
const linkForm = reactive({
|
||||
text: '',
|
||||
url: '',
|
||||
})
|
||||
|
||||
// 监听外部值变化
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
if (newVal !== localValue.value) {
|
||||
localValue.value = newVal
|
||||
}
|
||||
})
|
||||
|
||||
// 计算属性
|
||||
const renderedHtml = computed(() => {
|
||||
if (!localValue.value) return '<p class="placeholder-hint">预览区域</p>'
|
||||
try {
|
||||
return marked.parse(localValue.value) as string
|
||||
} catch (e) {
|
||||
return '<p class="error-hint">渲染出错</p>'
|
||||
}
|
||||
})
|
||||
|
||||
const wordCount = computed(() => {
|
||||
const text = localValue.value.trim()
|
||||
if (!text) return 0
|
||||
return text.split(/\s+/).filter(Boolean).length
|
||||
})
|
||||
|
||||
const charCount = computed(() => localValue.value.length)
|
||||
|
||||
// 方法
|
||||
function handleInput() {
|
||||
emit('update:modelValue', localValue.value)
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
// Tab 键插入空格
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault()
|
||||
insertAtCursor(' ')
|
||||
}
|
||||
// Ctrl/Cmd + B 加粗
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
|
||||
e.preventDefault()
|
||||
insertWrap('**', '**')
|
||||
}
|
||||
// Ctrl/Cmd + I 斜体
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'i') {
|
||||
e.preventDefault()
|
||||
insertWrap('*', '*')
|
||||
}
|
||||
// Ctrl/Cmd + K 链接
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault()
|
||||
insertLink()
|
||||
}
|
||||
}
|
||||
|
||||
function insertAtCursor(text: string) {
|
||||
const textarea = textareaRef.value
|
||||
if (!textarea) return
|
||||
|
||||
const start = textarea.selectionStart
|
||||
const end = textarea.selectionEnd
|
||||
const before = localValue.value.substring(0, start)
|
||||
const after = localValue.value.substring(end)
|
||||
|
||||
localValue.value = before + text + after
|
||||
emit('update:modelValue', localValue.value)
|
||||
|
||||
nextTick(() => {
|
||||
textarea.focus()
|
||||
textarea.selectionStart = textarea.selectionEnd = start + text.length
|
||||
})
|
||||
}
|
||||
|
||||
function insertWrap(before: string, after: string) {
|
||||
const textarea = textareaRef.value
|
||||
if (!textarea) return
|
||||
|
||||
const start = textarea.selectionStart
|
||||
const end = textarea.selectionEnd
|
||||
const selectedText = localValue.value.substring(start, end) || '文本'
|
||||
const text = before + selectedText + after
|
||||
|
||||
localValue.value = localValue.value.substring(0, start) + text + localValue.value.substring(end)
|
||||
emit('update:modelValue', localValue.value)
|
||||
|
||||
nextTick(() => {
|
||||
textarea.focus()
|
||||
textarea.selectionStart = start + before.length
|
||||
textarea.selectionEnd = start + before.length + selectedText.length
|
||||
})
|
||||
}
|
||||
|
||||
function insertCodeBlock() {
|
||||
const textarea = textareaRef.value
|
||||
if (!textarea) return
|
||||
|
||||
const start = textarea.selectionStart
|
||||
const end = textarea.selectionEnd
|
||||
const selectedText = localValue.value.substring(start, end) || '代码'
|
||||
const text = '\n```javascript\n' + selectedText + '\n```\n'
|
||||
|
||||
localValue.value = localValue.value.substring(0, start) + text + localValue.value.substring(end)
|
||||
emit('update:modelValue', localValue.value)
|
||||
|
||||
nextTick(() => {
|
||||
textarea.focus()
|
||||
textarea.selectionStart = start + 14 // 跳过 ```javascript\n
|
||||
textarea.selectionEnd = start + 14 + selectedText.length
|
||||
})
|
||||
}
|
||||
|
||||
function insertLink() {
|
||||
const textarea = textareaRef.value
|
||||
if (textarea) {
|
||||
const selectedText = localValue.value.substring(textarea.selectionStart, textarea.selectionEnd)
|
||||
linkForm.text = selectedText || ''
|
||||
}
|
||||
showLinkModal.value = true
|
||||
}
|
||||
|
||||
function insertLinkConfirm() {
|
||||
if (!linkForm.text.trim()) {
|
||||
message.warning('请输入链接文本')
|
||||
return
|
||||
}
|
||||
if (!linkForm.url.trim()) {
|
||||
message.warning('请输入链接地址')
|
||||
return
|
||||
}
|
||||
insertAtCursor(`[${linkForm.text}](${linkForm.url})`)
|
||||
showLinkModal.value = false
|
||||
linkForm.text = ''
|
||||
linkForm.url = ''
|
||||
}
|
||||
|
||||
function handleImageUpload() {
|
||||
const input = document.createElement('input')
|
||||
input.type = 'file'
|
||||
input.accept = 'image/*'
|
||||
input.onchange = async (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0]
|
||||
if (file) {
|
||||
await uploadAndInsertImage(file)
|
||||
}
|
||||
}
|
||||
input.click()
|
||||
}
|
||||
|
||||
function beforeImageUpload(file: File) {
|
||||
if (!file.type.startsWith('image/')) {
|
||||
message.error('只能上传图片文件')
|
||||
return false
|
||||
}
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
message.error('图片大小不能超过 5MB')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
async function uploadAndInsertImage(file: File) {
|
||||
try {
|
||||
message.loading({ content: '上传图片中...', key: 'upload' })
|
||||
const record = await uploadFile(file)
|
||||
const url = (record?.url || record?.downloadUrl || '').trim()
|
||||
if (!url) throw new Error('上传成功但未返回图片地址')
|
||||
insertAtCursor(``)
|
||||
message.success({ content: '图片上传成功', key: 'upload' })
|
||||
} catch (e: any) {
|
||||
message.error({ content: e?.message || '图片上传失败', key: 'upload' })
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCoverUpload(option: any) {
|
||||
await uploadAndInsertImage(option.file)
|
||||
option.onSuccess?.()
|
||||
}
|
||||
|
||||
function syncScroll(e: Event) {
|
||||
const textarea = e.target as HTMLTextAreaElement
|
||||
const preview = textarea.parentElement?.nextElementSibling?.querySelector('.markdown-preview') as HTMLElement
|
||||
if (preview) {
|
||||
const ratio = textarea.scrollTop / (textarea.scrollHeight - textarea.clientHeight)
|
||||
preview.scrollTop = ratio * (preview.scrollHeight - preview.clientHeight)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
isFullscreen.value = !isFullscreen.value
|
||||
}
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
focus: () => textareaRef.value?.focus(),
|
||||
insertText: insertAtCursor,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.markdown-editor-wrapper {
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.markdown-editor-wrapper.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.toolbar-icon {
|
||||
font-family: Georgia, serif;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.toolbar-icon.bold {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.toolbar-icon.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.editor-body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: v-bind(minHeight);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor-pane {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.markdown-textarea {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: #24292e;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.markdown-textarea::placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.preview-pane {
|
||||
flex: 1;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-label {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.markdown-preview {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(.placeholder-hint),
|
||||
.markdown-preview :deep(.error-hint) {
|
||||
color: #aaa;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(h1) {
|
||||
font-size: 1.8em;
|
||||
font-weight: 700;
|
||||
margin: 0.5em 0;
|
||||
padding-bottom: 0.3em;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(h2) {
|
||||
font-size: 1.5em;
|
||||
font-weight: 600;
|
||||
margin: 0.8em 0 0.4em;
|
||||
padding-bottom: 0.25em;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(h3) {
|
||||
font-size: 1.25em;
|
||||
font-weight: 600;
|
||||
margin: 0.6em 0 0.3em;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(p) {
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(code) {
|
||||
padding: 0.2em 0.4em;
|
||||
background: #f6f8fa;
|
||||
border-radius: 4px;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(pre) {
|
||||
padding: 16px;
|
||||
background: #f6f8fa;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(pre code) {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(blockquote) {
|
||||
margin: 1em 0;
|
||||
padding: 0.5em 1em;
|
||||
border-left: 4px solid #dfe2e5;
|
||||
color: #6a737d;
|
||||
background: #f6f8fa;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(ul),
|
||||
.markdown-preview :deep(ol) {
|
||||
padding-left: 2em;
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(li) {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(a) {
|
||||
color: #0366d6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(a:hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(img) {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(hr) {
|
||||
margin: 1.5em 0;
|
||||
border: none;
|
||||
border-top: 1px solid #dfe2e5;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(th),
|
||||
.markdown-preview :deep(td) {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #dfe2e5;
|
||||
}
|
||||
|
||||
.markdown-preview :deep(th) {
|
||||
background: #f6f8fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.editor-footer {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background: #fafafa;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
171
app/components/admin/MarkdownRenderer.vue
Normal file
171
app/components/admin/MarkdownRenderer.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="markdown-renderer" v-html="renderedHtml"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { marked } from 'marked'
|
||||
import hljs from 'highlight.js'
|
||||
import 'highlight.js/styles/github.css'
|
||||
|
||||
interface Props {
|
||||
content: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// 配置 marked
|
||||
marked.setOptions({
|
||||
highlight: function(code: string, lang: string) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
return hljs.highlight(code, { language: lang }).value
|
||||
}
|
||||
return hljs.highlightAuto(code).value
|
||||
},
|
||||
breaks: true,
|
||||
gfm: true,
|
||||
})
|
||||
|
||||
const renderedHtml = computed(() => {
|
||||
if (!props.content) return ''
|
||||
try {
|
||||
return marked.parse(props.content) as string
|
||||
} catch (e) {
|
||||
return '<p>渲染出错</p>'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.markdown-renderer {
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(h1) {
|
||||
font-size: 1.8em;
|
||||
font-weight: 700;
|
||||
margin: 0.5em 0;
|
||||
padding-bottom: 0.3em;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(h2) {
|
||||
font-size: 1.5em;
|
||||
font-weight: 600;
|
||||
margin: 0.8em 0 0.4em;
|
||||
padding-bottom: 0.25em;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(h3) {
|
||||
font-size: 1.25em;
|
||||
font-weight: 600;
|
||||
margin: 0.6em 0 0.3em;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(h4),
|
||||
.markdown-renderer :deep(h5),
|
||||
.markdown-renderer :deep(h6) {
|
||||
font-weight: 600;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(p) {
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(code) {
|
||||
padding: 0.2em 0.4em;
|
||||
background: #f6f8fa;
|
||||
border-radius: 4px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(pre) {
|
||||
padding: 16px;
|
||||
background: #f6f8fa;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(pre code) {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(blockquote) {
|
||||
margin: 1em 0;
|
||||
padding: 0.5em 1em;
|
||||
border-left: 4px solid #dfe2e5;
|
||||
color: #6a737d;
|
||||
background: #f6f8fa;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(blockquote p) {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(ul),
|
||||
.markdown-renderer :deep(ol) {
|
||||
padding-left: 2em;
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(li) {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(a) {
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(a:hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(img) {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
margin: 1em 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(hr) {
|
||||
margin: 1.5em 0;
|
||||
border: none;
|
||||
border-top: 1px solid #dfe2e5;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1em 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(th),
|
||||
.markdown-renderer :deep(td) {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #dfe2e5;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(th) {
|
||||
background: #f6f8fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(tr:hover) {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.markdown-renderer :deep(input[type="checkbox"]) {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
</style>
|
||||
932
app/components/console/AppsCenter.vue
Normal file
932
app/components/console/AppsCenter.vue
Normal file
@@ -0,0 +1,932 @@
|
||||
<template>
|
||||
<div class="apps-center">
|
||||
<!-- 工具栏：搜索 + 视图切换 -->
|
||||
<div class="toolbar">
|
||||
<a-input
|
||||
v-model:value="keywords"
|
||||
placeholder="搜索应用名称或标识"
|
||||
class="search-input"
|
||||
allow-clear
|
||||
@press-enter="doSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: #bbb" />
|
||||
</template>
|
||||
</a-input>
|
||||
|
||||
<div class="toolbar-right">
|
||||
<a-tooltip title="网格视图">
|
||||
<a-button
|
||||
:type="viewMode === 'grid' ? 'primary' : 'default'"
|
||||
shape="default"
|
||||
size="small"
|
||||
class="view-btn"
|
||||
@click="viewMode = 'grid'"
|
||||
>
|
||||
<template #icon><AppstoreOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="列表视图">
|
||||
<a-button
|
||||
:type="viewMode === 'list' ? 'primary' : 'default'"
|
||||
shape="default"
|
||||
size="small"
|
||||
class="view-btn"
|
||||
@click="viewMode = 'list'"
|
||||
>
|
||||
<template #icon><UnorderedListOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误提示 -->
|
||||
<a-alert v-if="error" show-icon type="error" :message="String(error)" class="mb-4" />
|
||||
|
||||
<!-- 加载中 -->
|
||||
<div v-if="pending" class="state-wrap">
|
||||
<a-spin size="large" tip="加载中..." />
|
||||
</div>
|
||||
|
||||
<!-- 应用列表 -->
|
||||
<div v-else-if="list.length > 0" class="app-list">
|
||||
<!-- 网格视图 -->
|
||||
<div v-if="viewMode === 'grid'" class="grid-view">
|
||||
<div v-for="app in list" :key="app.productId" class="app-card" @click="handleCardClick(app)">
|
||||
<div class="card-body">
|
||||
<div class="card-header">
|
||||
<div class="app-icon" :style="{ background: iconBgColor(app.productName) }">
|
||||
<img
|
||||
v-if="app.icon"
|
||||
:src="app.icon"
|
||||
:alt="app.productName"
|
||||
class="icon-img"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div v-else class="icon-placeholder">
|
||||
{{ appTypeIcon(app.appType) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">{{ app.productName }}</div>
|
||||
<div class="app-code">{{ app.productCode }}</div>
|
||||
<div class="app-type">
|
||||
<span v-if="(app as any)._isOwner" class="owner-badge">创建者</span>
|
||||
<span v-else class="member-badge">成员</span>
|
||||
<span class="app-type-tag" :class="appTypeClass(app.appType)">
|
||||
{{ appTypeName(app.type, app.appType) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="app-desc">{{ app.description || '暂无描述' }}</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="app-meta">
|
||||
<span class="meta-item">
|
||||
<UserOutlined style="color: #999; margin-right: 4px" />
|
||||
{{ app.developer }}
|
||||
</span>
|
||||
<span class="meta-item">
|
||||
<ClockCircleOutlined style="color: #999; margin-right: 4px" />
|
||||
{{ formatDateTime(app.updateTime || app.createTime) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="app-actions">
|
||||
<template v-for="entry in getAppEntries(app)" :key="entry.type">
|
||||
<a
|
||||
v-if="entry.available"
|
||||
class="enter-link"
|
||||
:class="{ 'primary-entry': entry.isPrimary }"
|
||||
@click.stop="handleEntryClick(entry, app)"
|
||||
>
|
||||
<component :is="entry.icon" style="margin-right: 3px" />
|
||||
{{ entry.label }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表视图 -->
|
||||
<div v-else class="list-view">
|
||||
<div v-for="app in list" :key="app.productId" class="app-row">
|
||||
<div class="list-left">
|
||||
<div class="list-icon" :style="{ background: iconBgColor(app.productName) }">
|
||||
<img
|
||||
v-if="app.icon"
|
||||
:src="app.icon"
|
||||
:alt="app.productName"
|
||||
class="list-icon-img"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div v-else class="list-icon-placeholder">
|
||||
{{ appTypeIcon(app.appType) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-info">
|
||||
<div class="list-name">{{ app.productName }}</div>
|
||||
<div class="list-meta">
|
||||
<span>{{ app.productCode }}</span>
|
||||
<span v-if="(app as any)._isOwner" class="owner-badge-sm">创建者</span>
|
||||
<span v-else class="member-badge-sm">成员</span>
|
||||
<span class="list-type-tag" :class="appTypeClass(app.appType)">
|
||||
{{ appTypeName(app.type, app.appType) }}
|
||||
</span>
|
||||
<span>{{ app.description || '暂无描述' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-right">
|
||||
<div class="list-time">{{ formatTime(app.createTime) }}</div>
|
||||
<div class="list-actions">
|
||||
<template v-for="entry in getAppEntries(app)" :key="entry.type">
|
||||
<a
|
||||
v-if="entry.available"
|
||||
class="enter-link-small"
|
||||
:class="{ 'primary-entry': entry.isPrimary }"
|
||||
@click.stop="handleEntryClick(entry, app)"
|
||||
>
|
||||
<component :is="entry.icon" style="margin-right: 3px" />
|
||||
{{ entry.label }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else-if="list.length === 0" class="state-wrap">
|
||||
<a-empty description="暂无应用，快来创建你的第一个应用吧">
|
||||
<template #image>
|
||||
<div class="empty-icon">📦</div>
|
||||
</template>
|
||||
<div class="empty-guide">
|
||||
<div class="empty-actions">
|
||||
<a-button type="primary" @click="goToDeveloperCenter">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
创建企业自建应用
|
||||
</a-button>
|
||||
<a-button @click="goToMarket">
|
||||
<template #icon><ShopOutlined /></template>
|
||||
浏览应用商店
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="empty-tips">
|
||||
<span class="empty-tip">🛠️ 前往开发者中心创建专属应用</span>
|
||||
<span class="empty-tip">🛒 从应用商店购买现成应用快速使用</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-empty>
|
||||
</div>
|
||||
|
||||
<!-- 应用详情抽屉（放在条件渲染链之外） -->
|
||||
<AppDetail v-model:open="detailOpen" :app="selectedApp" @deleted="handleDeletedFromDetail" @updated="handleUpdatedFromDetail" />
|
||||
|
||||
<!-- 小程序扫码弹窗 -->
|
||||
<QrCodeModal
|
||||
v-model:open="qrOpen"
|
||||
:qrcode-url="qrApp?.qrcode"
|
||||
:app-name="qrApp?.productName"
|
||||
:title="qrApp ? (APP_TYPE_NAME[qrApp.appType ?? 10] || '小程序') + '二维码' : ''"
|
||||
:tip="qrApp ? getScanTip(qrApp.appType ?? 20) : ''"
|
||||
/>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="total > limit" class="pagination-wrap">
|
||||
<a-pagination
|
||||
:current="page"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
show-size-changer
|
||||
:page-size-options="['10', '20', '50']"
|
||||
@change="onPageChange"
|
||||
@show-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
SearchOutlined,
|
||||
UnorderedListOutlined,
|
||||
DeleteOutlined,
|
||||
EllipsisOutlined,
|
||||
EyeOutlined,
|
||||
UserOutlined,
|
||||
ClockCircleOutlined,
|
||||
PlusOutlined,
|
||||
ShopOutlined,
|
||||
GlobalOutlined,
|
||||
QrcodeOutlined,
|
||||
DownloadOutlined,
|
||||
SettingOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { removeAppProduct, getMyApps, getJoinedApps } from '@/api/app/appProduct'
|
||||
import type { AppProduct } from '@/api/app/appProduct/model'
|
||||
import { APP_TYPE, APP_TYPE_NAME } from '@/api/app/appProduct/model'
|
||||
import AppDetail from '@/components/developer/AppDetail.vue'
|
||||
import QrCodeModal from '@/components/QrCodeModal.vue'
|
||||
import { getAppEntries, executeEntry, getScanTip } from '@/utils/appEntry'
|
||||
import type { AppEntry } from '@/utils/appEntry'
|
||||
|
||||
const props = defineProps<{
|
||||
userId?: number | string | null
|
||||
ownerName?: string
|
||||
}>()
|
||||
|
||||
const viewMode = ref<'grid' | 'list'>('grid')
|
||||
const page = ref(1)
|
||||
const limit = ref(10)
|
||||
const keywords = ref('')
|
||||
const total = ref(0)
|
||||
|
||||
// 详情抽屉
|
||||
const detailOpen = ref(false)
|
||||
const selectedApp = ref<AppProduct | null>(null)
|
||||
|
||||
function openDetail(app: AppProduct) {
|
||||
selectedApp.value = app
|
||||
detailOpen.value = true
|
||||
}
|
||||
|
||||
// 我的应用（创建的应用）+ 参与的应用（被邀请的）
|
||||
const myApps = ref<AppProduct[]>([])
|
||||
const joinedApps = ref<AppProduct[]>([])
|
||||
const pending = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// 计算合并后的应用列表（去重）
|
||||
const list = computed(() => {
|
||||
const map = new Map<number, AppProduct>()
|
||||
// 先加我创建的
|
||||
myApps.value.forEach(app => {
|
||||
if (app.productId) map.set(app.productId, { ...app, _isOwner: true })
|
||||
})
|
||||
// 再加我参与的（避免重复）
|
||||
joinedApps.value.forEach(app => {
|
||||
if (app.productId && !map.has(app.productId)) {
|
||||
map.set(app.productId, { ...app, _isOwner: false })
|
||||
}
|
||||
})
|
||||
return Array.from(map.values())
|
||||
})
|
||||
|
||||
async function fetchApps() {
|
||||
pending.value = true
|
||||
error.value = null
|
||||
try {
|
||||
// 并行加载：我创建的应用 + 我参与的应用
|
||||
const [myResult, joinedResult] = await Promise.all([
|
||||
getMyApps({ page: 1, limit: 100 }),
|
||||
getJoinedApps({ page: 1, limit: 100 }),
|
||||
])
|
||||
myApps.value = myResult?.list ?? []
|
||||
joinedApps.value = joinedResult?.list ?? []
|
||||
total.value = list.value.length
|
||||
} catch (e: any) {
|
||||
error.value = e.message || '加载失败'
|
||||
} finally {
|
||||
pending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function doSearch() {
|
||||
page.value = 1
|
||||
fetchApps()
|
||||
}
|
||||
|
||||
function onPageChange(nextPage: number) {
|
||||
page.value = nextPage
|
||||
fetchApps()
|
||||
}
|
||||
|
||||
function onPageSizeChange(_current: number, nextSize: number) {
|
||||
limit.value = nextSize
|
||||
page.value = 1
|
||||
fetchApps()
|
||||
}
|
||||
|
||||
function handleCardClick(app: AppProduct) {
|
||||
openDetail(app)
|
||||
}
|
||||
|
||||
// 菜单操作
|
||||
function handleMenuAction(key: string, app: AppProduct) {
|
||||
if (key === 'detail') {
|
||||
openDetail(app)
|
||||
} else if (key === 'delete') {
|
||||
handleDeleteApp(app)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除应用
|
||||
const deletingAppId = ref<number | null>(null)
|
||||
|
||||
function handleDeletedFromDetail() {
|
||||
selectedApp.value = null
|
||||
detailOpen.value = false
|
||||
refresh()
|
||||
}
|
||||
|
||||
// 更新应用后同步本地数据
|
||||
function handleUpdatedFromDetail(updatedApp: AppProduct) {
|
||||
// 更新列表中的应用数据
|
||||
const index = list.value.findIndex((app) => app.productId === updatedApp.productId)
|
||||
if (index !== -1) {
|
||||
list.value[index] = { ...list.value[index], ...updatedApp }
|
||||
}
|
||||
// 更新当前选中的应用
|
||||
if (selectedApp.value?.productId === updatedApp.productId) {
|
||||
selectedApp.value = { ...selectedApp.value, ...updatedApp }
|
||||
}
|
||||
}
|
||||
|
||||
function handleDeleteApp(app: AppProduct) {
|
||||
const name = app.productName || app.productCode || '该应用'
|
||||
Modal.confirm({
|
||||
title: '确认删除应用',
|
||||
content: `确定要删除应用「${name}」吗？删除后所有配置、成员和版本记录将被永久清除，且无法恢复。`,
|
||||
okText: '确认删除',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
async onOk() {
|
||||
deletingAppId.value = app.productId ?? null
|
||||
try {
|
||||
await removeAppProduct(app.productId)
|
||||
message.success(`应用「${name}」已删除`)
|
||||
// 如果详情抽屉打开的是当前应用，关闭它
|
||||
if (selectedApp.value?.productId === app.productId) {
|
||||
detailOpen.value = false
|
||||
selectedApp.value = null
|
||||
}
|
||||
// 刷新列表
|
||||
await refresh()
|
||||
} catch (e: any) {
|
||||
message.error(e.message || '删除失败')
|
||||
} finally {
|
||||
deletingAppId.value = null
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 外部刷新：重新查询应用列表
|
||||
async function refresh() {
|
||||
await fetchApps()
|
||||
}
|
||||
|
||||
// 暴露 refresh 方法供父组件调用
|
||||
defineExpose({ refresh })
|
||||
|
||||
function handleEntryClick(entry: AppEntry, app: AppProduct) {
|
||||
if (entry.type === 'scan-qr') {
|
||||
// 小程序扫码 → 弹出二维码弹窗
|
||||
qrApp.value = app
|
||||
qrOpen.value = true
|
||||
return
|
||||
}
|
||||
executeEntry(entry)
|
||||
}
|
||||
|
||||
// 扫码弹窗
|
||||
const qrOpen = ref(false)
|
||||
const qrApp = ref<AppProduct | null>(null)
|
||||
|
||||
// 应用类型名称（使用统一枚举）
|
||||
function appTypeName(type?: number, appType?: string): string {
|
||||
return APP_TYPE_NAME[type ?? 0] ?? 'Web 应用'
|
||||
}
|
||||
|
||||
function appTypeIcon(appType?: string | number): string {
|
||||
const numType = typeof appType === 'string' ? Number(appType) : (appType ?? 10)
|
||||
const iconMap: Record<number, string> = {
|
||||
[APP_TYPE.WEBSITE]: '🌐',
|
||||
[APP_TYPE.WECHAT_MP]: '📱',
|
||||
[APP_TYPE.DOUYIN_MP]: '🎵',
|
||||
[APP_TYPE.BAIDU_MP]: '🔍',
|
||||
[APP_TYPE.ALIPAY_MP]: '💎',
|
||||
[APP_TYPE.ANDROID]: '🤖',
|
||||
[APP_TYPE.IOS]: '🍎',
|
||||
[APP_TYPE.MACOS]: '💻',
|
||||
[APP_TYPE.WINDOWS]: '🪟',
|
||||
[APP_TYPE.PLUGIN]: '🔌',
|
||||
}
|
||||
return iconMap[numType] ?? '🌐'
|
||||
}
|
||||
|
||||
function appTypeClass(appType?: string | number): string {
|
||||
const numType = typeof appType === 'string' ? Number(appType) : (appType ?? 10)
|
||||
const classMap: Record<number, string> = {
|
||||
[APP_TYPE.WEBSITE]: 'type-10',
|
||||
[APP_TYPE.WECHAT_MP]: 'type-20',
|
||||
[APP_TYPE.DOUYIN_MP]: 'type-30',
|
||||
[APP_TYPE.BAIDU_MP]: 'type-40',
|
||||
[APP_TYPE.ALIPAY_MP]: 'type-50',
|
||||
[APP_TYPE.ANDROID]: 'type-60',
|
||||
[APP_TYPE.IOS]: 'type-70',
|
||||
[APP_TYPE.MACOS]: 'type-80',
|
||||
[APP_TYPE.WINDOWS]: 'type-90',
|
||||
[APP_TYPE.PLUGIN]: 'type-100',
|
||||
}
|
||||
return classMap[numType] ?? 'type-10'
|
||||
}
|
||||
|
||||
function formatDateTime(dateStr?: string) {
|
||||
if (!dateStr) return '-'
|
||||
// 格式化为 "2026-03-28 10:46"
|
||||
return dateStr.slice(0, 16).replace('T', ' ')
|
||||
}
|
||||
|
||||
// 图标背景色
|
||||
const PALETTE = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae', '#87d068', '#108ee9']
|
||||
|
||||
function iconBgColor(name?: string) {
|
||||
if (!name) return PALETTE[0]
|
||||
let h = 0
|
||||
for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) & 0xffffffff
|
||||
return PALETTE[Math.abs(h) % PALETTE.length]
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(timestamp?: string | number | Date) {
|
||||
if (!timestamp) return '-'
|
||||
const date = typeof timestamp === 'string' ? new Date(timestamp) : new Date(timestamp)
|
||||
return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
|
||||
}
|
||||
|
||||
// 导航函数
|
||||
function goToDeveloperCenter() {
|
||||
navigateTo('/developer/apps')
|
||||
}
|
||||
|
||||
function goToMarket() {
|
||||
navigateTo('/market')
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
fetchApps()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.apps-center {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
/* ===== 工具栏 ===== */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
/* ===== 状态容器 ===== */
|
||||
.state-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* 空状态引导 */
|
||||
.empty-guide {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* ===== 网格视图 ===== */
|
||||
.grid-view {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f0f0f0;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
.app-card:hover {
|
||||
border-color: #d6e4ff;
|
||||
box-shadow: 0 4px 12px rgba(102, 102, 102, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 10px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.icon-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.app-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.app-code {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.app-type {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.app-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.enter-link {
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: #e6f4ff;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.enter-link:hover {
|
||||
background: #bae0ff;
|
||||
color: #0958d9;
|
||||
}
|
||||
.enter-link.primary-entry {
|
||||
color: #fff;
|
||||
background: #1890ff;
|
||||
}
|
||||
.enter-link.primary-entry:hover {
|
||||
background: #0958d9;
|
||||
color: #fff;
|
||||
}
|
||||
.enter-link-disabled {
|
||||
color: #999;
|
||||
background: #f5f5f5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.enter-link-disabled:hover {
|
||||
color: #999;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* ===== 列表视图 ===== */
|
||||
.list-view {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f0f0f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: background 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.app-row:last-child { border-bottom: none; }
|
||||
.app-row:hover { background: #fafafa; }
|
||||
|
||||
.list-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-icon-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.list-icon-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.list-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.list-meta {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.list-type-tag {
|
||||
font-size: 11px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
.list-type-tag.type-10 { background: #e6f4ff; color: #0958d9; }
|
||||
.list-type-tag.type-20 { background: #f6ffed; color: #389e0d; }
|
||||
.list-type-tag.type-60 { background: #fff7e6; color: #d46b08; }
|
||||
.list-type-tag.type-100 { background: #f9f0ff; color: #722ed1; }
|
||||
|
||||
.list-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-time {
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.list-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.enter-link-small {
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: #e6f4ff;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.enter-link-small:hover {
|
||||
background: #bae0ff;
|
||||
color: #0958d9;
|
||||
}
|
||||
.enter-link-small.primary-entry {
|
||||
color: #fff;
|
||||
background: #1890ff;
|
||||
}
|
||||
.enter-link-small.primary-entry:hover {
|
||||
background: #0958d9;
|
||||
color: #fff;
|
||||
}
|
||||
.enter-link-small.enter-link-disabled {
|
||||
color: #999;
|
||||
background: #f5f5f5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.enter-link-small.enter-link-disabled:hover {
|
||||
color: #999;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* ===== 分页 ===== */
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 4px 0 0;
|
||||
}
|
||||
|
||||
/* ===== 应用类型标签 ===== */
|
||||
.app-type-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
font-size: 11px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
.app-type-tag.type-10 { background: #e6f4ff; color: #0958d9; }
|
||||
.app-type-tag.type-20 { background: #f6ffed; color: #389e0d; }
|
||||
.app-type-tag.type-60 { background: #fff7e6; color: #d46b08; }
|
||||
.app-type-tag.type-100 { background: #f9f0ff; color: #722ed1; }
|
||||
|
||||
/* ===== 创建者/成员标签 ===== */
|
||||
.owner-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #fff1f0;
|
||||
color: #cf1322;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.member-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #f6ffed;
|
||||
color: #389e0d;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.owner-badge-sm {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #fff1f0;
|
||||
color: #cf1322;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.member-badge-sm {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #f6ffed;
|
||||
color: #389e0d;
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
176
app/components/console/ConsoleHeader.vue
Normal file
176
app/components/console/ConsoleHeader.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<a-layout-header class="top-header !p-0">
|
||||
<div class="h-full px-4 flex items-center justify-between">
|
||||
<div class="logo">
|
||||
<a-space size="large">
|
||||
<div class="logo-brand" @click="navigateTo('/console')">
|
||||
<img src="/logo.png" alt="logo" class="logo-img" />
|
||||
<span class="logo-name">控制台</span>
|
||||
</div>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<a-dropdown placement="bottomRight" :trigger="['click']">
|
||||
<div class="user-trigger">
|
||||
<a-space>
|
||||
<a-avatar :size="28" :src="user?.avatar || user?.avatarUrl">
|
||||
<template #icon>
|
||||
<AppstoreOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<span class="user-name">
|
||||
{{ userDisplayName }}
|
||||
</span>
|
||||
</a-space>
|
||||
</div>
|
||||
<template #overlay>
|
||||
<a-menu @click="onUserMenuClick">
|
||||
<a-menu-item v-for="item in mergedUserMenuItems" :key="item.key">
|
||||
{{ item.label }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AppstoreOutlined } from '@ant-design/icons-vue'
|
||||
import type { MenuProps } from 'ant-design-vue'
|
||||
import type { User } from '@/api/system/user/model'
|
||||
|
||||
type ConsoleHeaderMenuItem = {
|
||||
key: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
productLabel?: string
|
||||
defaultJumpKey?: 'oa' | 'developer'
|
||||
user: User | null
|
||||
userDisplayName: string
|
||||
userMenuItems?: ConsoleHeaderMenuItem[]
|
||||
}>(),
|
||||
{
|
||||
productLabel: '云·企业官网',
|
||||
defaultJumpKey: 'developer',
|
||||
userMenuItems: () => [{ key: 'logout', label: '退出登录' }],
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'logout'): void
|
||||
(e: 'userMenuClick', key: string): void
|
||||
}>()
|
||||
|
||||
const mergedUserMenuItems = computed<ConsoleHeaderMenuItem[]>(() => {
|
||||
const items = Array.isArray(props.userMenuItems) ? props.userMenuItems.slice() : []
|
||||
if (!items.some((i) => i.key === 'account')) {
|
||||
const accountItem: ConsoleHeaderMenuItem = { key: 'account', label: '账号管理' }
|
||||
const logoutIndex = items.findIndex((i) => i.key === 'logout')
|
||||
if (logoutIndex >= 0) items.splice(logoutIndex, 0, accountItem)
|
||||
else items.push(accountItem)
|
||||
}
|
||||
return items
|
||||
})
|
||||
|
||||
const consoleJumpTargets = {
|
||||
oa: '/oa',
|
||||
developer: '/developer',
|
||||
} as const
|
||||
|
||||
function openExternal(url: string) {
|
||||
if (!import.meta.client) return
|
||||
if (url.startsWith('http://') || url.startsWith('https://')) {
|
||||
window.location.href = url
|
||||
return
|
||||
}
|
||||
void navigateTo(url)
|
||||
}
|
||||
|
||||
const handleButtonClick = () => {
|
||||
openExternal(consoleJumpTargets[props.defaultJumpKey])
|
||||
}
|
||||
|
||||
const handleProductMenuClick: MenuProps['onClick'] = (e) => {
|
||||
const key = String(e.key) as keyof typeof consoleJumpTargets
|
||||
const url = consoleJumpTargets[key]
|
||||
if (!url) return
|
||||
openExternal(url)
|
||||
}
|
||||
|
||||
function onUserMenuClick(info: { key: string }) {
|
||||
const key = String(info.key)
|
||||
emit('userMenuClick', key)
|
||||
if (key === 'account') {
|
||||
void navigateTo('/console/account')
|
||||
return
|
||||
}
|
||||
if (key === 'logout') emit('logout')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.top-header {
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
border-radius: 12px;
|
||||
background: #111827 !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.user-trigger {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.user-trigger:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.logo-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo-brand:hover .logo-img,
|
||||
.logo-brand:hover .logo-name {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-name {
|
||||
font-family: 'Alimama FangYuanTi VF, sans-serif', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #a5c8ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
</style>
|
||||
605
app/components/console/ContractManagement.vue
Normal file
605
app/components/console/ContractManagement.vue
Normal file
@@ -0,0 +1,605 @@
|
||||
<template>
|
||||
<div class="contract-management">
|
||||
<!-- 顶部操作栏 -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<a-input-search
|
||||
v-model:value="queryParam.keywords"
|
||||
placeholder="搜索合同名称/编号"
|
||||
allow-clear
|
||||
style="width: 220px"
|
||||
@search="handleSearch"
|
||||
@change="onKeywordChange"
|
||||
/>
|
||||
<a-select
|
||||
v-model:value="queryParam.contractType"
|
||||
placeholder="合同类型"
|
||||
allow-clear
|
||||
style="width: 140px"
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option v-for="opt in contractTypeOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-select
|
||||
v-model:value="queryParam.status"
|
||||
placeholder="合同状态"
|
||||
allow-clear
|
||||
style="width: 140px"
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option v-for="opt in contractStatusOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<a-button type="primary" @click="openAddModal">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
新增合同
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<a-row :gutter="[12, 12]" class="mb-4">
|
||||
<a-col :xs="12" :sm="8" :md="4" v-for="stat in statsCards" :key="stat.label">
|
||||
<div class="stat-card" :class="stat.cls">
|
||||
<div class="stat-value">{{ stat.value }}</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 表格 -->
|
||||
<a-card :bordered="false">
|
||||
<a-table
|
||||
:data-source="contracts"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
size="middle"
|
||||
:row-key="(r: Contract) => r.contractId!"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<a-table-column title="合同编号" data-index="contractNo" width="185">
|
||||
<template #default="{ record }">
|
||||
<span class="font-mono text-sm text-gray-600">{{ record.contractNo || '-' }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="合同名称" data-index="title" ellipsis>
|
||||
<template #default="{ record }">
|
||||
<span class="font-medium cursor-pointer text-blue-600 hover:text-blue-400" @click="openDetail(record)">
|
||||
{{ record.title }}
|
||||
</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="合同类型" data-index="contractType" width="110">
|
||||
<template #default="{ record }">
|
||||
{{ contractTypeText(record.contractType) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="签约方" width="230">
|
||||
<template #default="{ record }">
|
||||
<div class="text-xs leading-5">
|
||||
<div>甲方：{{ record.partyA || '-' }}</div>
|
||||
<div>乙方：{{ record.partyB || '-' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="合同金额" data-index="amount" width="120">
|
||||
<template #default="{ record }">
|
||||
<span class="text-orange-600 font-semibold">¥{{ formatAmount(record.amount) }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="有效期" width="210">
|
||||
<template #default="{ record }">
|
||||
<span v-if="record.startDate && record.endDate" class="text-sm">
|
||||
{{ record.startDate }} ~ {{ record.endDate }}
|
||||
</span>
|
||||
<span v-else class="text-gray-400 text-sm">-</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="状态" data-index="status" width="100">
|
||||
<template #default="{ record }">
|
||||
<a-tag :color="contractStatusInfo(record.status).color">
|
||||
{{ contractStatusInfo(record.status).text }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<a-table-column title="操作" width="180" fixed="right">
|
||||
<template #default="{ record }">
|
||||
<a-space>
|
||||
<a-button size="small" @click="openDetail(record)">查看</a-button>
|
||||
<a-button size="small" @click="openEdit(record)">编辑</a-button>
|
||||
<a-button danger size="small" @click="confirmRemove(record)">删除</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="formVisible"
|
||||
:title="editingId ? '编辑合同' : '新增合同'"
|
||||
:width="660"
|
||||
:confirm-loading="formSubmitting"
|
||||
@ok="handleFormSubmit"
|
||||
@cancel="closeForm"
|
||||
>
|
||||
<a-form ref="formRef" layout="vertical" :model="formData" :rules="formRules" class="mt-2">
|
||||
<a-form-item label="合同名称" name="title">
|
||||
<a-input v-model:value="formData.title" placeholder="请输入合同名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="合同类型" name="contractType">
|
||||
<a-select v-model:value="formData.contractType" placeholder="请选择合同类型" style="width:100%">
|
||||
<a-select-option v-for="opt in contractTypeOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="合同状态" name="status">
|
||||
<a-select v-model:value="formData.status" placeholder="请选择状态" style="width:100%">
|
||||
<a-select-option v-for="opt in contractStatusOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="甲方" name="partyA">
|
||||
<a-input v-model:value="formData.partyA" placeholder="请输入甲方名称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="乙方" name="partyB">
|
||||
<a-input v-model:value="formData.partyB" placeholder="请输入乙方名称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="8">
|
||||
<a-form-item label="合同金额" name="amount">
|
||||
<a-input-number
|
||||
v-model:value="formData.amount"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
placeholder="金额"
|
||||
style="width: 100%"
|
||||
>
|
||||
<template #prefix>¥</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="开始日期" name="startDate">
|
||||
<a-date-picker
|
||||
v-model:value="formData.startDate"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="开始日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="结束日期" name="endDate">
|
||||
<a-date-picker
|
||||
v-model:value="formData.endDate"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="结束日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 合同附件上传 -->
|
||||
<a-form-item label="合同附件">
|
||||
<a-upload
|
||||
:file-list="fileList"
|
||||
:max-count="1"
|
||||
:before-upload="() => false"
|
||||
accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
|
||||
@change="handleFileChange"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined /> 上传合同文件
|
||||
</a-button>
|
||||
<span class="ml-2 text-gray-400 text-xs">支持 PDF、Word、图片，最大 20MB</span>
|
||||
</a-upload>
|
||||
<div v-if="formData.fileUrl && !fileList.length" class="mt-1">
|
||||
<a :href="formData.fileUrl" target="_blank" class="text-blue-500 text-sm">
|
||||
<PaperClipOutlined /> {{ formData.fileName || '查看已上传文件' }}
|
||||
</a>
|
||||
<a-button type="link" danger size="small" class="ml-2" @click="clearFile">移除</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="备注" name="remark">
|
||||
<a-textarea v-model:value="formData.remark" :rows="3" placeholder="备注（选填）" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="detailVisible"
|
||||
title="合同详情"
|
||||
:width="700"
|
||||
:footer="null"
|
||||
>
|
||||
<a-descriptions v-if="detail" bordered size="small" :column="2" class="mt-2">
|
||||
<a-descriptions-item label="合同编号" :span="2">
|
||||
<span class="font-mono">{{ detail.contractNo || '-' }}</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="合同名称" :span="2">{{ detail.title }}</a-descriptions-item>
|
||||
<a-descriptions-item label="合同类型">{{ contractTypeText(detail.contractType) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="合同状态">
|
||||
<a-tag :color="contractStatusInfo(detail.status).color">{{ contractStatusInfo(detail.status).text }}</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="甲方">{{ detail.partyA || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="乙方">{{ detail.partyB || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="合同金额">
|
||||
<span class="text-orange-600 font-semibold">¥{{ formatAmount(detail.amount) }}</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="有效期">
|
||||
<span v-if="detail.startDate && detail.endDate">{{ detail.startDate }} ~ {{ detail.endDate }}</span>
|
||||
<span v-else class="text-gray-400">-</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建人">{{ detail.userName || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">{{ detail.createTime || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="备注" :span="2">{{ detail.remark || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item v-if="detail.fileUrl" label="合同附件" :span="2">
|
||||
<a :href="detail.fileUrl" target="_blank" class="text-blue-500">
|
||||
<PaperClipOutlined /> {{ detail.fileName || '查看附件' }}
|
||||
</a>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { PlusOutlined, UploadOutlined, PaperClipOutlined } from '@ant-design/icons-vue'
|
||||
import { uploadFile } from '@/api/system/file'
|
||||
import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
|
||||
import {
|
||||
pageContract,
|
||||
addContract,
|
||||
updateContract,
|
||||
removeContract,
|
||||
statsContract,
|
||||
contractTypeOptions,
|
||||
contractStatusOptions,
|
||||
contractTypeText,
|
||||
contractStatusInfo,
|
||||
type Contract,
|
||||
type ContractType,
|
||||
type ContractStatus,
|
||||
} from '@/api/app/contract'
|
||||
|
||||
defineOptions({ name: 'ContractManagement' })
|
||||
|
||||
// ─── 列表 & 分页 ──────────────────────────────────────────────
|
||||
const contracts = ref<Contract[]>([])
|
||||
const loading = ref(false)
|
||||
const total = ref(0)
|
||||
const queryParam = reactive<{
|
||||
keywords?: string
|
||||
contractType?: ContractType
|
||||
status?: ContractStatus
|
||||
page: number
|
||||
limit: number
|
||||
}>({
|
||||
page: 1,
|
||||
limit: 15,
|
||||
})
|
||||
|
||||
const pagination = computed(() => ({
|
||||
total: total.value,
|
||||
current: queryParam.page,
|
||||
pageSize: queryParam.limit,
|
||||
showSizeChanger: true,
|
||||
showTotal: (t: number) => `共 ${t} 条`,
|
||||
pageSizeOptions: ['10', '15', '20', '50'],
|
||||
}))
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await pageContract({
|
||||
page: queryParam.page,
|
||||
limit: queryParam.limit,
|
||||
keywords: queryParam.keywords,
|
||||
contractType: queryParam.contractType,
|
||||
status: queryParam.status,
|
||||
})
|
||||
contracts.value = res?.list ?? []
|
||||
total.value = res?.total ?? 0
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
queryParam.page = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
let keywordTimer: ReturnType<typeof setTimeout> | null = null
|
||||
function onKeywordChange() {
|
||||
if (keywordTimer) clearTimeout(keywordTimer)
|
||||
keywordTimer = setTimeout(handleSearch, 400)
|
||||
}
|
||||
|
||||
function handleTableChange(pag: { current?: number; pageSize?: number }) {
|
||||
queryParam.page = pag.current ?? 1
|
||||
queryParam.limit = pag.pageSize ?? 15
|
||||
loadData()
|
||||
}
|
||||
|
||||
// ─── 统计 ─────────────────────────────────────────────────────
|
||||
const statsData = ref<Record<string, number>>({})
|
||||
|
||||
const statsCards = computed(() => [
|
||||
{ label: '全部', value: statsData.value.total ?? 0, cls: 'blue' },
|
||||
{ label: '生效中', value: statsData.value.active ?? 0, cls: 'green' },
|
||||
{ label: '待签署', value: statsData.value.pending ?? 0, cls: 'orange' },
|
||||
{ label: '已过期', value: statsData.value.expired ?? 0, cls: 'red' },
|
||||
{ label: '草稿', value: statsData.value.draft ?? 0, cls: 'gray' },
|
||||
{ label: '已终止', value: statsData.value.terminated ?? 0, cls: 'purple' },
|
||||
])
|
||||
|
||||
async function loadStats() {
|
||||
try {
|
||||
const res = await statsContract()
|
||||
statsData.value = res ?? {}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// ─── 表单 ─────────────────────────────────────────────────────
|
||||
const formVisible = ref(false)
|
||||
const formSubmitting = ref(false)
|
||||
const editingId = ref<number | null>(null)
|
||||
const formRef = ref()
|
||||
const fileList = ref<UploadFile[]>([])
|
||||
const uploading = ref(false)
|
||||
|
||||
interface FormData {
|
||||
title: string
|
||||
contractType?: ContractType
|
||||
partyA?: string
|
||||
partyB?: string
|
||||
amount?: number
|
||||
startDate?: string
|
||||
endDate?: string
|
||||
status?: ContractStatus
|
||||
remark?: string
|
||||
fileUrl?: string
|
||||
fileName?: string
|
||||
}
|
||||
|
||||
const formData = reactive<FormData>({
|
||||
title: '',
|
||||
contractType: undefined,
|
||||
partyA: '',
|
||||
partyB: '',
|
||||
amount: undefined,
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
status: 'draft',
|
||||
remark: '',
|
||||
fileUrl: '',
|
||||
fileName: '',
|
||||
})
|
||||
|
||||
const formRules = {
|
||||
title: [{ required: true, message: '请输入合同名称' }],
|
||||
contractType: [{ required: true, message: '请选择合同类型' }],
|
||||
status: [{ required: true, message: '请选择合同状态' }],
|
||||
}
|
||||
|
||||
function resetFormData() {
|
||||
formData.title = ''
|
||||
formData.contractType = undefined
|
||||
formData.partyA = ''
|
||||
formData.partyB = ''
|
||||
formData.amount = undefined
|
||||
formData.startDate = undefined
|
||||
formData.endDate = undefined
|
||||
formData.status = 'draft'
|
||||
formData.remark = ''
|
||||
formData.fileUrl = ''
|
||||
formData.fileName = ''
|
||||
fileList.value = []
|
||||
editingId.value = null
|
||||
}
|
||||
|
||||
function openAddModal() {
|
||||
resetFormData()
|
||||
formVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(record: Contract) {
|
||||
resetFormData()
|
||||
editingId.value = record.contractId ?? null
|
||||
Object.assign(formData, {
|
||||
title: record.title,
|
||||
contractType: record.contractType,
|
||||
partyA: record.partyA ?? '',
|
||||
partyB: record.partyB ?? '',
|
||||
amount: record.amount,
|
||||
startDate: record.startDate,
|
||||
endDate: record.endDate,
|
||||
status: record.status,
|
||||
remark: record.remark ?? '',
|
||||
fileUrl: record.fileUrl ?? '',
|
||||
fileName: record.fileName ?? '',
|
||||
})
|
||||
formVisible.value = true
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
formVisible.value = false
|
||||
formRef.value?.resetFields()
|
||||
resetFormData()
|
||||
}
|
||||
|
||||
// 文件上传
|
||||
function handleFileChange({ fileList: list }: UploadChangeParam) {
|
||||
fileList.value = list.slice(-1)
|
||||
}
|
||||
|
||||
function clearFile() {
|
||||
formData.fileUrl = ''
|
||||
formData.fileName = ''
|
||||
}
|
||||
|
||||
async function uploadPendingFile(): Promise<{ url: string; name: string } | null> {
|
||||
const raw = fileList.value[0]?.originFileObj
|
||||
if (!raw) return null
|
||||
uploading.value = true
|
||||
try {
|
||||
const result = await uploadFile(raw as File)
|
||||
return { url: (result as any).url ?? (result as any).fileUrl, name: raw.name }
|
||||
} finally {
|
||||
uploading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleFormSubmit() {
|
||||
try {
|
||||
await formRef.value?.validate()
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
formSubmitting.value = true
|
||||
try {
|
||||
// 如有待上传文件先上传
|
||||
if (fileList.value.length > 0) {
|
||||
const uploaded = await uploadPendingFile()
|
||||
if (uploaded) {
|
||||
formData.fileUrl = uploaded.url
|
||||
formData.fileName = uploaded.name
|
||||
}
|
||||
}
|
||||
|
||||
const payload: Partial<Contract> = { ...formData }
|
||||
|
||||
if (editingId.value) {
|
||||
await updateContract(editingId.value, payload)
|
||||
message.success('合同已更新')
|
||||
} else {
|
||||
await addContract(payload)
|
||||
message.success('合同已创建')
|
||||
}
|
||||
closeForm()
|
||||
await loadData()
|
||||
await loadStats()
|
||||
} catch (e: any) {
|
||||
message.error(e?.message || '操作失败')
|
||||
} finally {
|
||||
formSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ─── 详情 ─────────────────────────────────────────────────────
|
||||
const detailVisible = ref(false)
|
||||
const detail = ref<Contract | null>(null)
|
||||
|
||||
function openDetail(record: Contract) {
|
||||
detail.value = record
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
// ─── 删除 ─────────────────────────────────────────────────────
|
||||
function confirmRemove(record: Contract) {
|
||||
Modal.confirm({
|
||||
title: '确认删除该合同？',
|
||||
content: '删除后不可恢复。',
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
await removeContract(record.contractId!)
|
||||
message.success('已删除')
|
||||
if (detail.value?.contractId === record.contractId) {
|
||||
detailVisible.value = false
|
||||
detail.value = null
|
||||
}
|
||||
await loadData()
|
||||
await loadStats()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// ─── 工具函数 ─────────────────────────────────────────────────
|
||||
function formatAmount(value?: number | string | null) {
|
||||
if (value === null || value === undefined) return '0.00'
|
||||
const n = typeof value === 'string' ? parseFloat(value) : value
|
||||
return Number.isFinite(n) ? n.toFixed(2) : '0.00'
|
||||
}
|
||||
|
||||
// ─── 初始化 ───────────────────────────────────────────────────
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
loadStats()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.contract-management {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
text-align: center;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.stat-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.stat-card.blue { background: #eff6ff; border-color: #dbeafe; }
|
||||
.stat-card.green { background: #f0fdf4; border-color: #bbf7d0; }
|
||||
.stat-card.orange{ background: #fff7ed; border-color: #fed7aa; }
|
||||
.stat-card.red { background: #fef2f2; border-color: #fecaca; }
|
||||
.stat-card.gray { background: #f9fafb; border-color: #e5e7eb; }
|
||||
.stat-card.purple{ background: #faf5ff; border-color: #e9d5ff; }
|
||||
|
||||
.stat-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
1993
app/components/developer/AppDetail.vue
Normal file
1993
app/components/developer/AppDetail.vue
Normal file
File diff suppressed because it is too large
Load Diff
870
app/components/developer/AppsCenter.vue
Normal file
870
app/components/developer/AppsCenter.vue
Normal file
@@ -0,0 +1,870 @@
|
||||
<template>
|
||||
<div class="apps-center">
|
||||
<!-- 统计条 -->
|
||||
<div class="app-stats-bar">
|
||||
<span class="stats-total">
|
||||
共 <b>{{ total }}</b> 个应用
|
||||
</span>
|
||||
<span v-if="ownerCount > 0" class="stats-item owner">
|
||||
<span class="stats-dot owner-dot" />我创建的 {{ ownerCount }}
|
||||
</span>
|
||||
<span v-if="memberCount > 0" class="stats-item member">
|
||||
<span class="stats-dot member-dot" />我参与的 {{ memberCount }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 工具栏：搜索 + 视图切换 -->
|
||||
<div class="toolbar">
|
||||
<a-input
|
||||
v-model:value="keywords"
|
||||
placeholder="搜索应用名称或标识"
|
||||
class="search-input"
|
||||
allow-clear
|
||||
@press-enter="doSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: #bbb" />
|
||||
</template>
|
||||
</a-input>
|
||||
|
||||
<div class="toolbar-right">
|
||||
<a-tooltip title="网格视图">
|
||||
<a-button
|
||||
:type="viewMode === 'grid' ? 'primary' : 'default'"
|
||||
shape="default"
|
||||
size="small"
|
||||
class="view-btn"
|
||||
@click="viewMode = 'grid'"
|
||||
>
|
||||
<template #icon><AppstoreOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="列表视图">
|
||||
<a-button
|
||||
:type="viewMode === 'list' ? 'primary' : 'default'"
|
||||
shape="default"
|
||||
size="small"
|
||||
class="view-btn"
|
||||
@click="viewMode = 'list'"
|
||||
>
|
||||
<template #icon><UnorderedListOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误提示 -->
|
||||
<a-alert v-if="error" show-icon type="error" :message="String(error)" class="mb-4" />
|
||||
|
||||
<!-- 加载中 -->
|
||||
<div v-if="pending" class="state-wrap">
|
||||
<a-spin size="large" tip="加载中..." />
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else-if="filteredApps.length === 0" class="state-wrap">
|
||||
<a-empty :description="keywords ? '没有匹配的应用' : '还没有应用，点击上方按钮创建第一个吧'">
|
||||
<template #image>
|
||||
<div class="empty-icon">📦</div>
|
||||
</template>
|
||||
<a-button v-if="!keywords" type="primary" @click="$emit('create')">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
创建企业自建应用
|
||||
</a-button>
|
||||
</a-empty>
|
||||
</div>
|
||||
|
||||
<!-- 网格视图 -->
|
||||
<div v-else-if="viewMode === 'grid'" class="app-grid">
|
||||
<div
|
||||
v-for="app in filteredApps"
|
||||
:key="app.productId"
|
||||
class="app-card"
|
||||
@click="handleCardClick(app)"
|
||||
>
|
||||
<!-- 右上角：状态标签 + 角色标签 -->
|
||||
<div class="card-top-actions">
|
||||
<div class="card-role-badge">
|
||||
<RoleTag :role="app.myRole || 'owner'" size="small" />
|
||||
</div>
|
||||
<div class="card-status-badge" :class="`status-${app.status}`">
|
||||
{{ statusText(app.status, app.statusText) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标 + 基本信息 -->
|
||||
<div class="card-main">
|
||||
<div class="app-icon-wrap">
|
||||
<img
|
||||
v-if="app.icon || app.logo"
|
||||
:src="app.icon || app.logo"
|
||||
:alt="app.productName"
|
||||
class="app-icon-img"
|
||||
/>
|
||||
<div v-else class="app-icon-placeholder" :style="{ background: iconBgColor(app.productName) }">
|
||||
{{ (app.productName || 'A').charAt(0).toUpperCase() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-info">
|
||||
<div class="app-name">{{ app.productName || '-' }}</div>
|
||||
|
||||
<div class="app-meta">
|
||||
<!-- 应用类型标签 -->
|
||||
<span class="app-type-tag" :class="appTypeClass(app.appType)">
|
||||
{{ appTypeIcon(app.appType) }} {{ appTypeName(app.appType) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<div class="card-divider" />
|
||||
|
||||
<!-- 最新动态 -->
|
||||
<div class="card-activity">
|
||||
<span class="activity-label">最新动态：</span>
|
||||
<span class="activity-time">{{ formatDateTime(app.updateTime || app.createTime) }}</span>
|
||||
<span class="activity-dot">·</span>
|
||||
<span class="activity-action">{{ app.domain ? '已绑域名' : '已创建' }}</span>
|
||||
<template v-for="entry in getAppEntries(app)" :key="entry.type">
|
||||
<a
|
||||
v-if="entry.available"
|
||||
class="card-enter-btn"
|
||||
:class="{ 'primary-entry': entry.isPrimary }"
|
||||
@click.stop="handleEntryClick(entry, app)"
|
||||
>{{ entry.label }} →</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表视图 -->
|
||||
<div v-else class="app-list">
|
||||
<div
|
||||
v-for="app in filteredApps"
|
||||
:key="app.productId"
|
||||
class="app-list-item"
|
||||
@click="openDetail(app)"
|
||||
>
|
||||
<div class="list-icon-wrap">
|
||||
<img
|
||||
v-if="app.icon || app.logo"
|
||||
:src="app.icon || app.logo"
|
||||
:alt="app.productName"
|
||||
class="list-icon-img"
|
||||
/>
|
||||
<div v-else class="list-icon-placeholder" :style="{ background: iconBgColor(app.productName) }">
|
||||
{{ (app.productName || 'A').charAt(0).toUpperCase() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-info">
|
||||
<div class="list-name">{{ app.productName || '-' }}</div>
|
||||
<div class="list-meta">
|
||||
<span class="app-type-tag" :class="appTypeClass(app.appType)">
|
||||
{{ appTypeIcon(app.appType) }} {{ appTypeName(app.type, app.appType) }}
|
||||
</span>
|
||||
<span class="meta-dot">·</span>
|
||||
{{ app.domain || app.productCode || '-' }}
|
||||
<span class="meta-dot">·</span>
|
||||
{{ app.username || app.companyName || '管理员' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-right">
|
||||
<div class="list-time">{{ formatDateTime(app.updateTime || app.createTime) }}</div>
|
||||
<div class="list-actions">
|
||||
<RoleTag :role="app.myRole || 'owner'" size="small" />
|
||||
<span class="list-status-badge" :class="`status-${app.status}`">
|
||||
{{ statusText(app.status, app.statusText) }}
|
||||
</span>
|
||||
<template v-for="entry in getAppEntries(app)" :key="entry.type">
|
||||
<a
|
||||
v-if="entry.available"
|
||||
class="list-enter-link"
|
||||
:class="{ 'primary-entry': entry.isPrimary }"
|
||||
@click.stop="handleEntryClick(entry, app)"
|
||||
>{{ entry.label }}</a>
|
||||
</template>
|
||||
<a-popconfirm
|
||||
v-if="app.myRole === 'owner'"
|
||||
:title="`确认删除应用「${app.productName}」？`"
|
||||
ok-text="确认删除"
|
||||
cancel-text="取消"
|
||||
ok-type="danger"
|
||||
@confirm="handleDeleteApp(app)"
|
||||
>
|
||||
<a-button type="text" danger size="small" @click.stop>
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 应用详情抽屉（放在条件渲染链之外） -->
|
||||
<AppDetail v-model:open="detailOpen" :app="selectedApp" @deleted="handleDeletedFromDetail" @updated="handleUpdatedFromDetail" />
|
||||
|
||||
<!-- 小程序扫码弹窗 -->
|
||||
<QrCodeModal
|
||||
v-model:open="qrOpen"
|
||||
:qrcode-url="qrApp?.qrcode"
|
||||
:app-name="qrApp?.productName"
|
||||
:title="qrApp ? (APP_TYPE_NAME[qrApp.appType ?? 10] || '小程序') + '二维码' : ''"
|
||||
:tip="qrApp ? getScanTip(qrApp.appType ?? 20) : ''"
|
||||
/>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="total > pageSize" class="pagination-wrap">
|
||||
<a-pagination
|
||||
:current="page"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
show-size-changer
|
||||
:page-size-options="['10', '20', '50']"
|
||||
@change="onPageChange"
|
||||
@show-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
SearchOutlined,
|
||||
UnorderedListOutlined,
|
||||
DeleteOutlined,
|
||||
PlusOutlined,
|
||||
GlobalOutlined,
|
||||
QrcodeOutlined,
|
||||
DownloadOutlined,
|
||||
SettingOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { removeAppProduct, getMyAccessibleApps } from '@/api/app/appProduct'
|
||||
import type { AppProduct } from '@/api/app/appProduct/model'
|
||||
import { APP_TYPE, APP_TYPE_NAME } from '@/api/app/appProduct/model'
|
||||
import AppDetail from '@/components/developer/AppDetail.vue'
|
||||
import RoleTag from '@/components/developer/RoleTag.vue'
|
||||
import QrCodeModal from '@/components/QrCodeModal.vue'
|
||||
import { getAppEntries, executeEntry, getScanTip } from '@/utils/appEntry'
|
||||
import type { AppEntry } from '@/utils/appEntry'
|
||||
|
||||
const props = defineProps<{
|
||||
userId?: number | string | null
|
||||
ownerName?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
create: []
|
||||
}>()
|
||||
|
||||
const viewMode = ref<'grid' | 'list'>('grid')
|
||||
const page = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const keywords = ref('')
|
||||
|
||||
// 所有应用合并列表
|
||||
const allApps = ref<AppProduct[]>([])
|
||||
const pending = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// 统计
|
||||
const total = computed(() => allApps.value.length)
|
||||
const ownerCount = computed(() => allApps.value.filter(a => a.myRole === 'owner' || !a.myRole).length)
|
||||
const memberCount = computed(() => allApps.value.filter(a => a.myRole && a.myRole !== 'owner').length)
|
||||
|
||||
// 关键词搜索过滤
|
||||
const filteredApps = computed(() => {
|
||||
let result = allApps.value
|
||||
if (keywords.value.trim()) {
|
||||
const kw = keywords.value.trim().toLowerCase()
|
||||
result = result.filter(app =>
|
||||
(app.productName || '').toLowerCase().includes(kw) ||
|
||||
(app.productCode || '').toLowerCase().includes(kw)
|
||||
)
|
||||
}
|
||||
// 前端分页
|
||||
const start = (page.value - 1) * pageSize.value
|
||||
return result.slice(start, start + pageSize.value)
|
||||
})
|
||||
|
||||
// 详情抽屉
|
||||
const detailOpen = ref(false)
|
||||
const selectedApp = ref<AppProduct | null>(null)
|
||||
|
||||
function openDetail(app: AppProduct) {
|
||||
selectedApp.value = app
|
||||
detailOpen.value = true
|
||||
}
|
||||
|
||||
// 加载所有可访问的应用（带角色信息）
|
||||
async function fetchApps() {
|
||||
pending.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const apps = await getMyAccessibleApps()
|
||||
// 排序：owner 在前，然后按更新时间倒序
|
||||
apps.sort((a, b) => {
|
||||
const aIsOwner = a.myRole === 'owner' ? 0 : 1
|
||||
const bIsOwner = b.myRole === 'owner' ? 0 : 1
|
||||
if (aIsOwner !== bIsOwner) return aIsOwner - bIsOwner
|
||||
return new Date(b.updateTime || b.createTime || 0).getTime() - new Date(a.updateTime || a.createTime || 0).getTime()
|
||||
})
|
||||
allApps.value = apps
|
||||
} catch (e: any) {
|
||||
error.value = e.message || '加载失败'
|
||||
} finally {
|
||||
pending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化时加载
|
||||
fetchApps()
|
||||
|
||||
function doSearch() {
|
||||
page.value = 1
|
||||
}
|
||||
|
||||
function onPageChange(nextPage: number) {
|
||||
page.value = nextPage
|
||||
}
|
||||
|
||||
function onPageSizeChange(_current: number, nextSize: number) {
|
||||
pageSize.value = nextSize
|
||||
page.value = 1
|
||||
}
|
||||
|
||||
function handleCardClick(app: AppProduct) {
|
||||
openDetail(app)
|
||||
}
|
||||
|
||||
// 删除应用
|
||||
const deletingAppId = ref<number | null>(null)
|
||||
|
||||
function handleDeletedFromDetail() {
|
||||
selectedApp.value = null
|
||||
detailOpen.value = false
|
||||
refresh()
|
||||
}
|
||||
|
||||
// 更新应用后同步本地数据
|
||||
function handleUpdatedFromDetail(updatedApp: AppProduct) {
|
||||
const index = allApps.value.findIndex((app) => app.productId === updatedApp.productId)
|
||||
if (index !== -1) {
|
||||
allApps.value[index] = { ...allApps.value[index], ...updatedApp }
|
||||
}
|
||||
if (selectedApp.value?.productId === updatedApp.productId) {
|
||||
selectedApp.value = { ...selectedApp.value, ...updatedApp }
|
||||
}
|
||||
}
|
||||
|
||||
function handleDeleteApp(app: AppProduct) {
|
||||
const name = app.productName || app.productCode || '该应用'
|
||||
Modal.confirm({
|
||||
title: '确认删除应用',
|
||||
content: `确定要删除应用「${name}」吗？删除后所有配置、成员和版本记录将被永久清除，且无法恢复。`,
|
||||
okText: '确认删除',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
async onOk() {
|
||||
deletingAppId.value = app.productId ?? null
|
||||
try {
|
||||
await removeAppProduct(app.productId!)
|
||||
message.success(`应用「${name}」已删除`)
|
||||
// 如果详情抽屉打开的是当前应用，关闭它
|
||||
if (selectedApp.value?.productId === app.productId) {
|
||||
detailOpen.value = false
|
||||
selectedApp.value = null
|
||||
}
|
||||
// 刷新列表
|
||||
await refresh()
|
||||
} catch (e: any) {
|
||||
message.error(e.message || '删除失败')
|
||||
} finally {
|
||||
deletingAppId.value = null
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 外部刷新：重新查询应用列表
|
||||
async function refresh() {
|
||||
await fetchApps()
|
||||
}
|
||||
|
||||
// 暴露 refresh 方法供父组件调用
|
||||
defineExpose({ refresh })
|
||||
|
||||
// 入口处理
|
||||
function handleEntryClick(entry: AppEntry, app: AppProduct) {
|
||||
if (entry.type === 'scan-qr') {
|
||||
qrApp.value = app
|
||||
qrOpen.value = true
|
||||
return
|
||||
}
|
||||
executeEntry(entry)
|
||||
}
|
||||
|
||||
// 扫码弹窗
|
||||
const qrOpen = ref(false)
|
||||
const qrApp = ref<AppProduct | null>(null)
|
||||
|
||||
// 应用类型名称（使用统一枚举）
|
||||
function appTypeName(type?: number, appType?: number): string {
|
||||
return APP_TYPE_NAME[type ?? 10] ?? 'Web 应用'
|
||||
}
|
||||
|
||||
function appTypeIcon(appType?: number): string {
|
||||
const iconMap: Record<number, string> = {
|
||||
[APP_TYPE.WEBSITE]: '🌐',
|
||||
[APP_TYPE.WECHAT_MP]: '📱',
|
||||
[APP_TYPE.DOUYIN_MP]: '🎵',
|
||||
[APP_TYPE.BAIDU_MP]: '🔍',
|
||||
[APP_TYPE.ALIPAY_MP]: '💎',
|
||||
[APP_TYPE.ANDROID]: '🤖',
|
||||
[APP_TYPE.IOS]: '🍎',
|
||||
[APP_TYPE.MACOS]: '💻',
|
||||
[APP_TYPE.WINDOWS]: '🪟',
|
||||
[APP_TYPE.PLUGIN]: '🔌',
|
||||
}
|
||||
return iconMap[appType ?? 10] ?? '🌐'
|
||||
}
|
||||
|
||||
function appTypeClass(appType?: number | string): string {
|
||||
const numType = typeof appType === 'string' ? Number(appType) : (appType ?? 10)
|
||||
const classMap: Record<number, string> = {
|
||||
[APP_TYPE.WEBSITE]: 'type-10',
|
||||
[APP_TYPE.WECHAT_MP]: 'type-20',
|
||||
[APP_TYPE.DOUYIN_MP]: 'type-30',
|
||||
[APP_TYPE.BAIDU_MP]: 'type-40',
|
||||
[APP_TYPE.ALIPAY_MP]: 'type-50',
|
||||
[APP_TYPE.ANDROID]: 'type-60',
|
||||
[APP_TYPE.IOS]: 'type-70',
|
||||
[APP_TYPE.MACOS]: 'type-80',
|
||||
[APP_TYPE.WINDOWS]: 'type-90',
|
||||
[APP_TYPE.PLUGIN]: 'type-100',
|
||||
}
|
||||
return classMap[numType] ?? 'type-10'
|
||||
}
|
||||
|
||||
function statusText(status?: number, fallback?: string) {
|
||||
if (fallback) return fallback
|
||||
const map: Record<number, string> = {
|
||||
0: '未开通',
|
||||
1: '已启用',
|
||||
2: '维护中',
|
||||
3: '已关闭',
|
||||
4: '欠费停机',
|
||||
5: '违规关停',
|
||||
}
|
||||
return typeof status === 'number' && status in map ? map[status] : '未知'
|
||||
}
|
||||
|
||||
function formatDateTime(dateStr?: string) {
|
||||
if (!dateStr) return '-'
|
||||
// 格式化为 "2026-03-28 10:46"
|
||||
return dateStr.slice(0, 16).replace('T', ' ')
|
||||
}
|
||||
|
||||
// 根据名称生成一致的背景色
|
||||
const PALETTE = [
|
||||
'#4e6ef2', '#f4a261', '#e76f51', '#2a9d8f',
|
||||
'#e9c46a', '#457b9d', '#a8dadc', '#f77f00',
|
||||
'#6d6875', '#b5838d',
|
||||
]
|
||||
function iconBgColor(name?: string) {
|
||||
if (!name) return PALETTE[0]
|
||||
let h = 0
|
||||
for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) & 0xffffffff
|
||||
return PALETTE[Math.abs(h) % PALETTE.length]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.apps-center {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ===== 统计条 ===== */
|
||||
.app-stats-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 14px;
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.stats-total b {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 16px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.stats-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.stats-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.owner-dot { background: #4f46e5; }
|
||||
.member-dot { background: #16a34a; }
|
||||
|
||||
/* ===== 工具栏 ===== */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ===== 状态/空状态 ===== */
|
||||
.state-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* ===== 网格布局 ===== */
|
||||
.app-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.app-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ===== 单张卡片 ===== */
|
||||
.app-card {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 12px;
|
||||
padding: 18px 20px 14px;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.18s, border-color 0.18s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.app-card:hover {
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
|
||||
border-color: #c5d8ff;
|
||||
}
|
||||
|
||||
/* 右上角操作区 */
|
||||
.card-top-actions {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 状态角标 */
|
||||
.card-status-badge {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* 角色角标 */
|
||||
.card-role-badge {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* 卡片更多操作按钮 */
|
||||
.card-more-btn {
|
||||
color: #999;
|
||||
}
|
||||
.card-more-btn:hover { color: #333; background: #f5f5f5; }
|
||||
|
||||
.status-1 { background: #e6f7ee; color: #389e0d; }
|
||||
.status-0 { background: #f5f5f5; color: #999; }
|
||||
.status-2 { background: #fff7e6; color: #d46b08; }
|
||||
.status-3 { background: #fff1f0; color: #cf1322; }
|
||||
.status-4 { background: #fff2e8; color: #d4380d; }
|
||||
.status-5 { background: #fff1f0; color: #cf1322; }
|
||||
|
||||
/* 卡片主体：图标 + 信息 */
|
||||
.card-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
margin-bottom: 14px;
|
||||
padding-right: 100px; /* 给右上角状态标签 + 更多按钮留空间 */
|
||||
}
|
||||
|
||||
.app-icon-wrap {
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-icon-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.app-icon-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.app-meta {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.meta-label { color: #999; }
|
||||
.meta-dot { color: #ccc; margin: 0 4px; }
|
||||
.meta-link {
|
||||
color: #1677ff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.meta-link:hover { text-decoration: underline; }
|
||||
.meta-value { color: #555; }
|
||||
|
||||
/* 分割线 */
|
||||
.card-divider {
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
/* 最新动态 */
|
||||
.card-activity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
gap: 2px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.activity-label { color: #bbb; }
|
||||
.activity-time { color: #666; }
|
||||
.activity-dot { color: #ddd; margin: 0 4px; }
|
||||
.activity-action { color: #666; }
|
||||
|
||||
.card-enter-btn {
|
||||
margin-left: auto;
|
||||
color: #1677ff;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.card-enter-btn:hover { text-decoration: underline; }
|
||||
.card-enter-btn.primary-entry {
|
||||
color: #1677ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ===== 列表视图 ===== */
|
||||
.app-list {
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.app-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
transition: background 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-list-item:last-child { border-bottom: none; }
|
||||
.app-list-item:hover { background: #fafafa; }
|
||||
|
||||
.list-icon-wrap {
|
||||
flex-shrink: 0;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.list-icon-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.list-icon-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.list-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.list-meta {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.list-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-time {
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.list-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.list-status-badge {
|
||||
font-size: 11px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.list-enter-link {
|
||||
font-size: 12px;
|
||||
color: #1677ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.list-enter-link:hover { text-decoration: underline; }
|
||||
.list-enter-link.primary-entry {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ===== 分页 ===== */
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 4px 0 0;
|
||||
}
|
||||
|
||||
/* ===== 应用类型标签 ===== */
|
||||
.app-type-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
font-size: 11px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
background: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
.app-type-tag.type-10 { background: #e6f4ff; color: #0958d9; }
|
||||
.app-type-tag.type-20 { background: #f6ffed; color: #389e0d; }
|
||||
.app-type-tag.type-60 { background: #fff7e6; color: #d46b08; }
|
||||
.app-type-tag.type-100 { background: #f9f0ff; color: #722ed1; }
|
||||
</style>
|
||||
53
app/components/developer/PermissionGuard.vue
Normal file
53
app/components/developer/PermissionGuard.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 权限守卫组件
|
||||
* 根据应用角色控制子内容的显示/隐藏
|
||||
*
|
||||
* 用法：
|
||||
* <PermissionGuard :app-id="123" permission="canManageMembers">
|
||||
* <a-button>邀请成员</a-button>
|
||||
* </PermissionGuard>
|
||||
*
|
||||
* <PermissionGuard :app-id="123" :min-role="'admin'">
|
||||
* 仅管理员和 Owner 可见
|
||||
* </PermissionGuard>
|
||||
*/
|
||||
import type { AppRole } from '@/api/app/appUser/model'
|
||||
import { useAppPermission } from '@/composables/useAppPermission'
|
||||
|
||||
const props = defineProps<{
|
||||
/** 应用 ID */
|
||||
appId?: number | null
|
||||
/** 要检查的权限字段（与 canManageMembers 等对应） */
|
||||
permission?: string
|
||||
/** 最低角色要求（优先级高于 permission） */
|
||||
minRole?: AppRole
|
||||
/** 权限不足时是否显示提示（而非隐藏） */
|
||||
showTip?: boolean
|
||||
}>()
|
||||
|
||||
const { hasPermission, hasRole, getNoPermissionTip, getAppPermission } = useAppPermission()
|
||||
|
||||
const hasAccess = computed(() => {
|
||||
if (!props.appId) return false
|
||||
if (props.minRole) return hasRole(props.appId, props.minRole)
|
||||
if (props.permission) return hasPermission(props.appId, props.permission as 'canManageMembers')
|
||||
return true
|
||||
})
|
||||
|
||||
const tipText = computed(() => {
|
||||
const perm = getAppPermission(props.appId)
|
||||
return perm ? getNoPermissionTip(perm.role) : ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<slot v-if="hasAccess" />
|
||||
<slot v-else-if="showTip" name="fallback">
|
||||
<a-tooltip :title="tipText">
|
||||
<span class="text-gray-400 cursor-not-allowed">
|
||||
<slot name="disabled-content" />
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</slot>
|
||||
</template>
|
||||
26
app/components/developer/RoleTag.vue
Normal file
26
app/components/developer/RoleTag.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 角色标签组件
|
||||
* 在应用卡片、成员列表等位置显示当前用户的角色
|
||||
*/
|
||||
import type { AppRole } from '@/api/app/appUser/model'
|
||||
import { ROLE_LABEL, ROLE_COLOR } from '@/composables/useAppPermission'
|
||||
|
||||
const props = defineProps<{
|
||||
role: AppRole
|
||||
size?: 'small' | 'default'
|
||||
}>()
|
||||
|
||||
const colorMap: Record<AppRole, string> = {
|
||||
owner: '#faad14',
|
||||
admin: '#1677ff',
|
||||
developer: '#52c41a',
|
||||
viewer: '#8c8c8c',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-tag :color="colorMap[props.role]" :size="props.size || 'default'">
|
||||
{{ ROLE_LABEL[props.role] }}
|
||||
</a-tag>
|
||||
</template>
|
||||
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>
|
||||
570
app/components/payment/PaymentModal.vue
Normal file
570
app/components/payment/PaymentModal.vue
Normal file
@@ -0,0 +1,570 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:open="visible"
|
||||
:title="title"
|
||||
:width="payMethod === 'native' ? 480 : 420"
|
||||
:footer="footerContent"
|
||||
:mask-closable="false"
|
||||
:destroy-on-close="true"
|
||||
@cancel="handleClose"
|
||||
>
|
||||
<!-- 订单信息 -->
|
||||
<div class="mb-5">
|
||||
<a-descriptions :column="1" size="small" bordered>
|
||||
<a-descriptions-item label="订单号">
|
||||
<span class="font-mono text-sm">{{ orderNo }}</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="订单金额">
|
||||
<span class="text-xl font-bold text-orange-500">¥{{ payPrice }}</span>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 支付方式选择 -->
|
||||
<div v-if="!started" class="space-y-3">
|
||||
<div class="text-sm text-gray-500 mb-2">请选择支付方式</div>
|
||||
|
||||
<!-- 微信支付 -->
|
||||
<div
|
||||
v-if="availableMethods.wechat"
|
||||
class="pay-method-item"
|
||||
:class="{ active: selectedMethod === 'wechat' }"
|
||||
@click="selectedMethod = 'wechat'"
|
||||
>
|
||||
<svg class="h-8 w-8" viewBox="0 0 24 24" fill="#07C160">
|
||||
<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.11.24-.245 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.87a5.755 5.755 0 0 0-.407-.012zm-1.155 2.26c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.857 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/>
|
||||
</svg>
|
||||
<div class="flex-1 ml-3">
|
||||
<div class="font-medium">微信支付</div>
|
||||
<div class="text-xs text-gray-400">推荐</div>
|
||||
</div>
|
||||
<a-radio :checked="selectedMethod === 'wechat'" />
|
||||
</div>
|
||||
|
||||
<!-- 支付宝 -->
|
||||
<div
|
||||
v-if="availableMethods.alipay"
|
||||
class="pay-method-item"
|
||||
:class="{ active: selectedMethod === 'alipay' }"
|
||||
@click="selectedMethod = 'alipay'"
|
||||
>
|
||||
<svg class="h-8 w-8" viewBox="0 0 24 24" fill="#1677FF">
|
||||
<path d="M21.97 11.1c-1.23-.79-2.75-1.04-4.33-.86-1.09-1.65-2.78-2.59-4.72-2.59-2.91 0-5.27 2.27-5.27 5.06 0 2.07 1.25 3.89 3.1 4.78V13.2c-.42-.11-.86-.17-1.32-.17-2.56 0-4.64 2.03-4.64 4.53 0 2.51 2.08 4.53 4.64 4.53.32 0 .63-.03.93-.08v2.58c-.31.04-.63.06-.95.06-3.45 0-6.25-2.74-6.25-6.1 0-3.36 2.8-6.1 6.25-6.1 1.01 0 1.95.24 2.78.67-.05-.32-.08-.65-.08-.99 0-2.59 2.15-4.69 4.79-4.69 1.52 0 2.88.68 3.78 1.75.19-.03.38-.05.58-.05 1.94 0 3.51 1.57 3.51 3.51 0 1.06-.48 2-1.24 2.64 1.1.4 1.83 1.47 1.83 2.67 0 1.73-1.49 3.13-3.32 3.13-.65 0-1.26-.18-1.78-.5.06.22.1.45.1.69 0 2.07-1.7 3.75-3.79 3.75-.45 0-.89-.07-1.3-.22v2.49c.45.13.92.2 1.4.2 2.97 0 5.38-2.36 5.38-5.26 0-2.22-1.32-4.15-3.22-4.93zm-8.16 2.09c-.46 0-.84-.37-.84-.83s.38-.84.84-.84.84.38.84.84-.38.83-.84.83zm5.14-.83c0-.46.38-.84.84-.84s.84.38.84.84-.38.83-.84.83-.84-.37-.84-.83zm-.87 2.49l-.69-.55c-.34-.27-.55-.67-.55-1.1 0-.74.61-1.34 1.36-1.34.46 0 .88.24 1.12.62l.77.62c.01-.35-.28-.67-.64-.8v-.06h-.09c-.54 0-.98-.44-.98-.98s.44-.98.98-.98.98.44.98.98v.03h.05l.15.12c.57.45.91 1.14.91 1.87 0 1.21-.89 2.23-2.05 2.48l-.33-.91h-.01zm-2.24-1.38h.08c.34 0 .61-.27.61-.61s-.27-.61-.61-.61h-.08v1.22zm.61 2.16c-.14.04-.29.06-.45.06h-.16v-1.16h.25c.26 0 .47.1.47.36 0 .38-.06.67-.11.74zm-.11-3.52c.18 0 .32-.14.32-.32s-.14-.32-.32-.32-.32.14-.32.32.14.32.32.32zm0 1.86c-.18 0-.32.14-.32.32s.14.32.32.32.32-.14.32-.32-.14-.32-.32-.32z"/>
|
||||
</svg>
|
||||
<div class="flex-1 ml-3">
|
||||
<div class="font-medium">支付宝</div>
|
||||
<div class="text-xs text-gray-400">安全便捷</div>
|
||||
</div>
|
||||
<a-radio :checked="selectedMethod === 'alipay'" />
|
||||
</div>
|
||||
|
||||
<!-- 余额支付 -->
|
||||
<div
|
||||
v-if="availableMethods.balance && userBalance !== undefined"
|
||||
class="pay-method-item"
|
||||
:class="{ active: selectedMethod === 'balance' }"
|
||||
@click="selectedMethod = 'balance'"
|
||||
>
|
||||
<div class="flex items-center justify-center h-8 w-8 rounded-full bg-yellow-100 text-yellow-600">
|
||||
<WalletOutlined />
|
||||
</div>
|
||||
<div class="flex-1 ml-3">
|
||||
<div class="font-medium">余额支付</div>
|
||||
<div class="text-xs text-gray-400">可用余额：¥{{ userBalance }}</div>
|
||||
</div>
|
||||
<a-radio :checked="selectedMethod === 'balance'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Native 二维码支付 -->
|
||||
<div v-else-if="payMethod === 'native' && !paid" class="text-center">
|
||||
<div v-if="loading" class="py-10">
|
||||
<a-spin size="large" />
|
||||
<div class="mt-3 text-gray-500">正在获取支付二维码...</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="codeUrl" class="py-4">
|
||||
<div class="text-sm text-gray-500 mb-4">请使用微信/支付宝扫描下方二维码完成支付</div>
|
||||
<div class="flex justify-center bg-white p-4 rounded-lg">
|
||||
<a-qrcode :value="codeUrl" :size="200" />
|
||||
</div>
|
||||
<div class="mt-4 text-sm text-gray-500">
|
||||
<template v-if="countdown > 0">
|
||||
二维码 {{ countdown }} 秒后过期，请尽快支付
|
||||
</template>
|
||||
<a-button v-else type="link" size="small" @click="rebuildQrcode">
|
||||
二维码已过期，点击重新获取
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="errorMsg" class="py-10 text-center">
|
||||
<a-result status="error" title="获取二维码失败" :sub-title="errorMsg">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="rebuildQrcode">重试</a-button>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 等待支付状态 -->
|
||||
<div v-else-if="!paid" class="text-center py-6">
|
||||
<a-spin size="large" />
|
||||
<div class="mt-4">
|
||||
<div class="text-base font-medium">等待支付中...</div>
|
||||
<div class="text-sm text-gray-500 mt-1">
|
||||
{{ selectedMethod === 'balance' ? '正在处理余额支付...' : '请在支付页面完成付款' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 支付成功 -->
|
||||
<div v-else class="text-center py-6">
|
||||
<a-result status="success" title="支付成功" sub-title="您的订单已支付成功，页面即将跳转...">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="handleSuccess">查看订单</a-button>
|
||||
<a-button @click="handleClose">继续逛逛</a-button>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
|
||||
<!-- 错误提示 -->
|
||||
<div v-if="errorMsg && !paid" class="mt-4">
|
||||
<a-alert :message="errorMsg" type="error" show-icon />
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<!-- 支付宝跳转提示 -->
|
||||
<a-modal
|
||||
v-model:open="alipayRedirectVisible"
|
||||
title="正在跳转支付宝"
|
||||
:footer="null"
|
||||
centered
|
||||
:mask-closable="false"
|
||||
>
|
||||
<div class="text-center py-6">
|
||||
<a-spin size="large" />
|
||||
<div class="mt-4 text-base">正在跳转到支付宝支付页面</div>
|
||||
<div class="text-sm text-gray-500 mt-2">
|
||||
如果支付页面没有弹出，<a :href="alipayUrl" target="_blank">点击这里</a>继续支付
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, h } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { WalletOutlined } from '@ant-design/icons-vue'
|
||||
import {
|
||||
detectPayEnvironment,
|
||||
isWechatBrowser,
|
||||
isAlipayBrowser,
|
||||
createWechatJsapiPay,
|
||||
createWechatH5Pay,
|
||||
createWechatNativePay,
|
||||
createAlipayPay,
|
||||
queryPayStatus
|
||||
} from '@/api/payment'
|
||||
import type { PayResult } from '@/api/payment'
|
||||
|
||||
/** Props */
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
orderNo: string
|
||||
orderId?: number
|
||||
payPrice: string | number
|
||||
/** 可用支付方式，默认全部 */
|
||||
availableMethods?: {
|
||||
wechat?: boolean
|
||||
alipay?: boolean
|
||||
balance?: boolean
|
||||
native?: boolean
|
||||
}
|
||||
/** 用户余额（余额支付时） */
|
||||
userBalance?: number
|
||||
/** 标题 */
|
||||
title?: string
|
||||
}>()
|
||||
|
||||
/** Emits */
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', val: boolean): void
|
||||
(e: 'success', result: PayResult): void
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
/** 状态 */
|
||||
const selectedMethod = ref<'wechat' | 'alipay' | 'balance'>('wechat')
|
||||
const started = ref(false)
|
||||
const loading = ref(false)
|
||||
const paid = ref(false)
|
||||
const errorMsg = ref('')
|
||||
const codeUrl = ref('')
|
||||
const countdown = ref(0)
|
||||
const alipayRedirectVisible = ref(false)
|
||||
const alipayUrl = ref('')
|
||||
|
||||
// 轮询定时器
|
||||
let pollTimer: ReturnType<typeof setTimeout> | null = null
|
||||
let countdownTimer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
/** 默认可用支付方式 */
|
||||
const defaultMethods = { wechat: true, alipay: true, balance: true, native: true }
|
||||
const methods = computed(() => ({ ...defaultMethods, ...props.availableMethods }))
|
||||
|
||||
/** 实际使用的支付方式 */
|
||||
const payMethod = computed(() => {
|
||||
if (!started.value) return 'select'
|
||||
|
||||
const env = detectPayEnvironment()
|
||||
|
||||
// 微信浏览器内 → JSAPI
|
||||
if (selectedMethod.value === 'wechat' && isWechatBrowser()) {
|
||||
return 'wechat_jsapi'
|
||||
}
|
||||
|
||||
// 支付宝浏览器内 → 支付宝 WAP
|
||||
if (selectedMethod.value === 'alipay' && isAlipayBrowser()) {
|
||||
return 'alipay_wap'
|
||||
}
|
||||
|
||||
// 桌面端 / 其他情况 → Native 或 H5
|
||||
if (env === 'desktop') {
|
||||
return 'native'
|
||||
}
|
||||
|
||||
return 'h5'
|
||||
})
|
||||
|
||||
/** 底部按钮 */
|
||||
const footerContent = computed(() => {
|
||||
if (paid.value || started.value) return null
|
||||
|
||||
return [
|
||||
h('a-button', { onClick: handleClose }, '取消'),
|
||||
h('a-button', {
|
||||
type: 'primary',
|
||||
loading: loading.value,
|
||||
onClick: startPay
|
||||
}, `确认支付 ¥${props.payPrice}`)
|
||||
]
|
||||
})
|
||||
|
||||
/** 关闭弹窗 */
|
||||
function handleClose() {
|
||||
stopPoll()
|
||||
emit('update:visible', false)
|
||||
emit('close')
|
||||
}
|
||||
|
||||
/** 支付成功 */
|
||||
function handleSuccess() {
|
||||
stopPoll()
|
||||
emit('success', { orderNo: props.orderNo })
|
||||
handleClose()
|
||||
}
|
||||
|
||||
/** 开始支付 */
|
||||
async function startPay() {
|
||||
errorMsg.value = ''
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const params = {
|
||||
orderNo: props.orderNo,
|
||||
subject: `订单支付-${props.orderNo}`,
|
||||
body: 'WebSoft 产品订单',
|
||||
totalAmount: Math.round(Number(props.payPrice) * 100) // 转为分
|
||||
}
|
||||
|
||||
let result: PayResult
|
||||
|
||||
switch (payMethod.value) {
|
||||
case 'wechat_jsapi':
|
||||
result = await createWechatJsapiPay({
|
||||
...params,
|
||||
openId: await getWxOpenId()
|
||||
})
|
||||
await handleWechatJsapiResult(result)
|
||||
break
|
||||
|
||||
case 'native':
|
||||
started.value = true
|
||||
result = await createWechatNativePay(params)
|
||||
handleNativeResult(result)
|
||||
break
|
||||
|
||||
case 'h5':
|
||||
if (selectedMethod.value === 'wechat') {
|
||||
result = await createWechatH5Pay({ ...params, returnUrl: window.location.href })
|
||||
handleH5Result(result, 'wechat')
|
||||
} else {
|
||||
result = await createAlipayPay({ ...params, returnUrl: window.location.href })
|
||||
handleH5Result(result, 'alipay')
|
||||
}
|
||||
break
|
||||
|
||||
case 'alipay_wap':
|
||||
result = await createAlipayPay({ ...params, returnUrl: window.location.href })
|
||||
handleH5Result(result, 'alipay')
|
||||
break
|
||||
|
||||
case 'balance':
|
||||
await handleBalancePay()
|
||||
break
|
||||
|
||||
default:
|
||||
throw new Error('不支持的支付方式')
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
const e = err as Error
|
||||
errorMsg.value = e.message || '发起支付失败'
|
||||
message.error(errorMsg.value)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 处理微信 JSAPI 支付结果 */
|
||||
async function handleWechatJsapiResult(result: PayResult) {
|
||||
// 如果返回的是跳转链接（H5支付链接），直接跳转
|
||||
if (result.mwebUrl) {
|
||||
window.location.href = result.mwebUrl
|
||||
return
|
||||
}
|
||||
|
||||
// JSAPI 调起支付
|
||||
if (result.prepayId) {
|
||||
const appId = result.codeUrl || '' // 实际应该从后端获取
|
||||
const timestamp = String(Math.floor(Date.now() / 1000))
|
||||
const nonceStr = Math.random().toString(36).slice(2)
|
||||
const pkg = `prepay_id=${result.prepayId}`
|
||||
const signType = 'MD5'
|
||||
const paySign = '' // 后端需要返回签名
|
||||
|
||||
try {
|
||||
// 动态加载微信 JSSDK
|
||||
await loadWechatJSSDK()
|
||||
|
||||
// @ts-ignore
|
||||
window.WeixinJSBridge?.invoke('getBrandWCPayRequest', {
|
||||
appId,
|
||||
timeStamp: timestamp,
|
||||
nonceStr,
|
||||
package: pkg,
|
||||
signType,
|
||||
paySign
|
||||
}, (res: { err_msg: string }) => {
|
||||
if (res.err_msg === 'get_brand_wcpay_request:ok') {
|
||||
paid.value = true
|
||||
startPoll()
|
||||
} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
|
||||
errorMsg.value = '用户取消支付'
|
||||
} else {
|
||||
errorMsg.value = res.err_msg
|
||||
}
|
||||
})
|
||||
} catch {
|
||||
// 如果 JSSDK 不可用，降级到 H5 支付
|
||||
const h5Result = await createWechatH5Pay({
|
||||
orderNo: props.orderNo,
|
||||
subject: `订单支付-${props.orderNo}`,
|
||||
totalAmount: Math.round(Number(props.payPrice) * 100)
|
||||
})
|
||||
if (h5Result.mwebUrl) {
|
||||
window.location.href = h5Result.mwebUrl
|
||||
} else {
|
||||
throw new Error('JSAPI 支付失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 处理 Native 支付结果 */
|
||||
function handleNativeResult(result: PayResult) {
|
||||
loading.value = false
|
||||
|
||||
if (result.codeUrl) {
|
||||
codeUrl.value = result.codeUrl
|
||||
// 二维码有效期 2 分钟
|
||||
countdown.value = 120
|
||||
startCountdown()
|
||||
startPoll()
|
||||
} else if (result.qrcode) {
|
||||
codeUrl.value = result.qrcode
|
||||
countdown.value = 120
|
||||
startCountdown()
|
||||
startPoll()
|
||||
} else {
|
||||
errorMsg.value = '获取支付二维码失败'
|
||||
}
|
||||
}
|
||||
|
||||
/** 处理 H5 支付结果 */
|
||||
function handleH5Result(result: PayResult, type: 'wechat' | 'alipay') {
|
||||
if (type === 'alipay' && (result.paymentUrl || result.payUrl)) {
|
||||
const url = result.paymentUrl || result.payUrl
|
||||
if (result.paymentUrl?.includes('https://openapi.alipay.com')) {
|
||||
// PC 场景：显示二维码
|
||||
alipayRedirectVisible.value = true
|
||||
alipayUrl.value = url
|
||||
} else if (result.paymentUrl?.includes('https://m.alipay.com')) {
|
||||
// H5 场景：直接跳转
|
||||
window.location.href = url
|
||||
} else {
|
||||
// 未知格式，直接跳转
|
||||
window.location.href = url
|
||||
}
|
||||
started.value = true
|
||||
startPoll()
|
||||
} else if (type === 'wechat' && result.mwebUrl) {
|
||||
window.location.href = result.mwebUrl
|
||||
}
|
||||
}
|
||||
|
||||
/** 余额支付 */
|
||||
async function handleBalancePay() {
|
||||
started.value = true
|
||||
loading.value = false
|
||||
|
||||
// 余额支付直接查询状态
|
||||
try {
|
||||
const status = await queryPayStatus(props.orderNo)
|
||||
if (status.paid || status.payStatus === 1) {
|
||||
paid.value = true
|
||||
} else {
|
||||
startPoll()
|
||||
}
|
||||
} catch {
|
||||
// 轮询查询
|
||||
startPoll()
|
||||
}
|
||||
}
|
||||
|
||||
/** 轮询支付状态 */
|
||||
async function startPoll() {
|
||||
stopPoll()
|
||||
pollTimer = setTimeout(async () => {
|
||||
try {
|
||||
const status = await queryPayStatus(props.orderNo)
|
||||
if (status.paid || status.payStatus === 1) {
|
||||
paid.value = true
|
||||
stopPoll()
|
||||
setTimeout(() => handleSuccess(), 1500)
|
||||
} else {
|
||||
startPoll()
|
||||
}
|
||||
} catch {
|
||||
startPoll()
|
||||
}
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
/** 停止轮询 */
|
||||
function stopPoll() {
|
||||
if (pollTimer) {
|
||||
clearTimeout(pollTimer)
|
||||
pollTimer = null
|
||||
}
|
||||
if (countdownTimer) {
|
||||
clearInterval(countdownTimer)
|
||||
countdownTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
/** 二维码倒计时 */
|
||||
function startCountdown() {
|
||||
countdownTimer = setInterval(() => {
|
||||
if (countdown.value > 0) {
|
||||
countdown.value--
|
||||
} else {
|
||||
stopPoll()
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
/** 重新获取二维码 */
|
||||
async function rebuildQrcode() {
|
||||
loading.value = true
|
||||
errorMsg.value = ''
|
||||
codeUrl.value = ''
|
||||
|
||||
try {
|
||||
const params = {
|
||||
orderNo: props.orderNo,
|
||||
subject: `订单支付-${props.orderNo}`,
|
||||
totalAmount: Math.round(Number(props.payPrice) * 100)
|
||||
}
|
||||
|
||||
const result = await createWechatNativePay(params)
|
||||
handleNativeResult(result)
|
||||
} catch (err: unknown) {
|
||||
const e = err as Error
|
||||
errorMsg.value = e.message || '获取二维码失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 获取微信 OpenId */
|
||||
async function getWxOpenId(): Promise<string> {
|
||||
// 从 localStorage 或 Vuex 获取已存储的 openId
|
||||
const stored = localStorage.getItem('wx_openid')
|
||||
if (stored) return stored
|
||||
|
||||
// 如果没有，需要先通过 OAuth 获取
|
||||
// 这里可以引导用户授权，或从后端获取
|
||||
throw new Error('请先在微信中打开，或联系客服获取支付方式')
|
||||
}
|
||||
|
||||
/** 动态加载微信 JSSDK */
|
||||
async function loadWechatJSSDK(): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 如果已加载
|
||||
if (window.WeixinJSBridge || window.jWeixin) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
|
||||
// 加载 JSSDK
|
||||
const script = document.createElement('script')
|
||||
script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'
|
||||
script.onload = () => resolve()
|
||||
script.onerror = () => reject(new Error('微信 JSSDK 加载失败'))
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
}
|
||||
|
||||
// 监听 visible 变化
|
||||
watch(() => props.visible, (val) => {
|
||||
if (!val) {
|
||||
stopPoll()
|
||||
started.value = false
|
||||
paid.value = false
|
||||
errorMsg.value = ''
|
||||
codeUrl.value = ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pay-method-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.pay-method-item:hover {
|
||||
border-color: #d1d5db;
|
||||
}
|
||||
|
||||
.pay-method-item.active {
|
||||
border-color: #1890ff;
|
||||
background: #f0f9ff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user