|
|
|
|
@ -1,5 +1,6 @@
|
|
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
@ -12,6 +13,7 @@ body {
|
|
|
|
|
background-color: var(--bg-color-primary);
|
|
|
|
|
color: var(--text-color-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
@ -20,21 +22,25 @@ header {
|
|
|
|
|
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);
|
|
|
|
|
@ -44,16 +50,19 @@ h1 {
|
|
|
|
|
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;
|
|
|
|
|
@ -62,22 +71,37 @@ h1 {
|
|
|
|
|
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); }
|
|
|
|
|
|
|
|
|
|
.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);
|
|
|
|
|
@ -86,6 +110,7 @@ h1 {
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-card-footer {
|
|
|
|
|
padding: var(--spacing-md);
|
|
|
|
|
border-top: 1px solid var(--border-color);
|
|
|
|
|
@ -95,6 +120,7 @@ h1 {
|
|
|
|
|
background-color: color-mix(in srgb, var(--bg-color-secondary), black 2%);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<body layout="app">
|
|
|
|
|
<header>
|
|
|
|
|
<h1>应用中心</h1>
|
|
|
|
|
@ -105,9 +131,7 @@ h1 {
|
|
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
:variant="currentFilter === filter.value ? 'primary' : 'outline'" @click="currentFilter = filter.value" size="sm">
|
|
|
|
|
{{ filter.label }}
|
|
|
|
|
</v-btn>
|
|
|
|
|
</div>
|
|
|
|
|
@ -165,7 +189,7 @@ openApp = (app) => {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
manageApp = (app) => {
|
|
|
|
|
$router.push('/app/settings?id=' + app.id)
|
|
|
|
|
$router.push(`/app/${app.id}/settings`)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fetch apps
|
|
|
|
|
@ -188,4 +212,5 @@ $watch(() => [searchQuery, currentFilter, apps], () => {
|
|
|
|
|
$data.filteredApps = result
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|
|
|
|
|
|