|
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<meta name="description" content="App List Page">
|
|
|
|
|
<title>应用列表</title>
|
|
|
|
|
</head>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
padding: var(--spacing-lg);
|
|
|
|
|
background-color: var(--bg-color-primary);
|
|
|
|
|
color: var(--text-color-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: var(--spacing-xl);
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: var(--spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
color: var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.filters {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: var(--spacing-sm);
|
|
|
|
|
margin-bottom: var(--spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
|
|
|
gap: var(--spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-card {
|
|
|
|
|
background-color: var(--bg-color-secondary);
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
box-shadow: var(--shadow-sm);
|
|
|
|
|
transition: var(--transition-base);
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-card:hover {
|
|
|
|
|
transform: translateY(-5px);
|
|
|
|
|
box-shadow: var(--shadow-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-card-header {
|
|
|
|
|
padding: var(--spacing-md);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-bottom: 1px solid var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-icon {
|
|
|
|
|
width: 48px;
|
|
|
|
|
height: 48px;
|
|
|
|
|
border-radius: var(--radius-sm);
|
|
|
|
|
margin-right: var(--spacing-md);
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
background-color: var(--bg-color-tertiary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-info {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-title {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
margin-bottom: var(--spacing-xs);
|
|
|
|
|
color: var(--text-color-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-status {
|
|
|
|
|
font-size: 0.8rem;
|
|
|
|
|
padding: 2px 8px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-active {
|
|
|
|
|
background-color: color-mix(in srgb, var(--color-success), transparent 90%);
|
|
|
|
|
color: var(--color-success);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-pending {
|
|
|
|
|
background-color: color-mix(in srgb, var(--color-warning), transparent 90%);
|
|
|
|
|
color: var(--color-warning);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-inactive {
|
|
|
|
|
background-color: color-mix(in srgb, var(--color-danger), transparent 90%);
|
|
|
|
|
color: var(--color-danger);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-card-body {
|
|
|
|
|
padding: var(--spacing-md);
|
|
|
|
|
flex: 1;
|
|
|
|
|
color: var(--text-color-secondary);
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-card-footer {
|
|
|
|
|
padding: var(--spacing-md);
|
|
|
|
|
border-top: 1px solid var(--border-color);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
gap: var(--spacing-sm);
|
|
|
|
|
background-color: color-mix(in srgb, var(--bg-color-secondary), black 2%);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<body layout="app">
|
|
|
|
|
<header>
|
|
|
|
|
<h1>应用中心</h1>
|
|
|
|
|
<div style="width: 300px;">
|
|
|
|
|
<v-input v:value="searchQuery" placeholder="搜索应用..." prefix="search"></v-input>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div class="filters">
|
|
|
|
|
<v-btn v-for="filter in filters" :key="filter.value"
|
|
|
|
|
:variant="currentFilter === filter.value ? 'primary' : 'outline'" @click="currentFilter = filter.value" size="sm">
|
|
|
|
|
{{ filter.label }}
|
|
|
|
|
</v-btn>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="app-grid">
|
|
|
|
|
<div class="app-card" v-for="app in filteredApps" :key="app.id">
|
|
|
|
|
<div class="app-card-header">
|
|
|
|
|
<img :src="app.icon" class="app-icon" alt="icon">
|
|
|
|
|
<div class="app-info">
|
|
|
|
|
<div class="app-title">{{ app.name }}</div>
|
|
|
|
|
<span class="app-status" :class="getStatusClass(app.status)">
|
|
|
|
|
{{ getStatusLabel(app.status) }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="app-card-body">
|
|
|
|
|
{{ app.des || '暂无描述' }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="app-card-footer">
|
|
|
|
|
<v-btn size="sm" variant="text" @click="openApp(app)">访问</v-btn>
|
|
|
|
|
<v-btn size="sm" variant="outline" @click="manageApp(app)">管理</v-btn>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
<script setup>
|
|
|
|
|
searchQuery = ''
|
|
|
|
|
currentFilter = 'all'
|
|
|
|
|
filters = [
|
|
|
|
|
{label: '全部', value: 'all'},
|
|
|
|
|
{label: '我的应用', value: 'my'},
|
|
|
|
|
{label: '最近使用', value: 'recent'}
|
|
|
|
|
]
|
|
|
|
|
apps = []
|
|
|
|
|
filteredApps = []
|
|
|
|
|
|
|
|
|
|
getStatusClass = (status) => {
|
|
|
|
|
if (status === 'ok') return 'status-active'
|
|
|
|
|
if (status === 'pending') return 'status-pending'
|
|
|
|
|
return 'status-inactive'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getStatusLabel = (status) => {
|
|
|
|
|
if (status === 'ok') return '运行中'
|
|
|
|
|
if (status === 'pending') return '审核中'
|
|
|
|
|
return '已停止'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
openApp = (app) => {
|
|
|
|
|
if (app.init_url) {
|
|
|
|
|
window.open(app.init_url, '_blank')
|
|
|
|
|
} else {
|
|
|
|
|
$message.info('该应用暂无入口')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
manageApp = (app) => {
|
|
|
|
|
$router.push(`/app/${app.id}/settings`)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fetch apps
|
|
|
|
|
$axios.get('/api/app').then(res => {
|
|
|
|
|
apps = res || []
|
|
|
|
|
$data.filteredApps = apps
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
$watch(() => [searchQuery, currentFilter, apps], () => {
|
|
|
|
|
let result = $data.apps
|
|
|
|
|
if ($data.searchQuery) {
|
|
|
|
|
const q = $data.searchQuery.toLowerCase()
|
|
|
|
|
result = result.filter(app => app.name.toLowerCase().includes(q) || (app.des && app.des.toLowerCase().includes(q)))
|
|
|
|
|
}
|
|
|
|
|
// Filter logic for 'my' and 'recent' would go here, simplified for now
|
|
|
|
|
if ($data.currentFilter === 'my') {
|
|
|
|
|
// Mock logic
|
|
|
|
|
}
|
|
|
|
|
$data.filteredApps = result
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|
