初始版本
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user