OptimusX
/
OneAuth
mirror of https://github.com/veypi/OneAuth.git
3
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 优化组织管理页面交互

Browse Source
v3
veypi 1 week ago
parent 800d7fd4fd
commit dce36cb65f
2 changed files with 157 additions and 80 deletions
Show Stats Download Patch File Download Diff File

231
ui/page/sys/org/index.html
Unescape Escape View File

@ -10,9 +10,9 @@
flex-direction: column;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
height: 100vh;
box-sizing: border-box;
overflow: hidden;
background-color: var(--bg-color);
}
.page-header {
@ -21,6 +21,17 @@
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-md);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--border-color);
}
.page-title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--text-color);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.search-box {
@ -28,10 +39,17 @@
align-items: center;
gap: var(--spacing-sm);
background: var(--bg-color-secondary);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
padding: 0 var(--spacing-md);
border-radius: var(--radius-full);
border: 1px solid var(--border-color);
min-width: 280px;
min-width: 320px;
height: 40px;
transition: all var(--transition-base);
}
.search-box:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 85%);
}
.search-box input {
@ -41,6 +59,7 @@
font-size: var(--font-size-md);
color: var(--text-color);
width: 100%;
height: 100%;
}
.search-box input::placeholder {
@ -49,10 +68,10 @@
.org-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--spacing-lg);
overflow-y: auto;
padding-bottom: var(--spacing-lg);
padding: 4px; /* Prevent shadow clipping */
flex: 1;
}
@ -67,11 +86,13 @@
cursor: pointer;
transition: all var(--transition-base);
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.org-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
@ -79,13 +100,13 @@
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--spacing-sm);
gap: var(--spacing-md);
}
.org-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
display: flex;
align-items: center;
@ -93,56 +114,108 @@
color: var(--color-primary-text);
font-size: var(--font-size-xl);
font-weight: bold;
flex-shrink: 0;
overflow: hidden;
}
.org-actions {
display: flex;
gap: var(--spacing-xs);
opacity: 0;
transition: opacity var(--transition-fast);
.org-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.org-card:hover .org-actions {
opacity: 1;
.org-info {
flex: 1;
min-width: 0;
}
.org-name {
font-weight: 600;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
color: var(--text-color);
margin-bottom: var(--spacing-xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.org-code {
font-size: var(--font-size-xs);
color: var(--text-color-tertiary);
background: var(--bg-color-tertiary);
padding: 2px 6px;
border-radius: var(--radius-sm);
display: inline-block;
font-family: monospace;
}
.org-status {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
font-size: var(--font-size-xs);
padding: 2px 8px;
border-radius: var(--radius-full);
background: var(--bg-color-tertiary);
color: var(--text-color-secondary);
}
.org-status.active {
background: color-mix(in srgb, var(--color-success), transparent 85%);
color: var(--color-success);
}
.org-desc {
font-size: var(--font-size-sm);
color: var(--text-color-secondary);
line-height: 1.5;
min-height: 40px;
line-height: 1.6;
height: 42px; /* 2 lines */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: var(--spacing-xs);
}
.org-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-sm);
font-size: var(--font-size-xs);
color: var(--text-color-tertiary);
padding-top: var(--spacing-sm);
padding-top: var(--spacing-md);
border-top: 1px solid var(--border-color);
margin-top: auto;
}
.org-meta-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
gap: 6px;
}
.org-actions {
display: flex;
gap: var(--spacing-sm);
opacity: 0;
transition: opacity var(--transition-fast);
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
background: var(--bg-color-secondary);
padding-left: var(--spacing-sm);
}
.org-card:hover .org-actions {
opacity: 1;
}
.loading-state {
/* Hide status when hovering if actions overlap, or better, move status */
.org-card:hover .org-status {
opacity: 0;
}
.loading-state, .empty-state {
display: flex;
flex-direction: column;
align-items: center;
@ -151,6 +224,7 @@
gap: var(--spacing-md);
color: var(--text-color-secondary);
flex: 1;
text-align: center;
}
.spinner {
@ -163,43 +237,28 @@
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-xl);
gap: var(--spacing-md);
color: var(--text-color-secondary);
text-align: center;
flex: 1;
to { transform: rotate(360deg); }
}
.empty-state i {
.empty-icon {
font-size: 64px;
color: var(--border-color);
}
.empty-state h3 {
font-size: var(--font-size-xl);
color: var(--text-color);
margin-bottom: var(--spacing-md);
}
</style>
</head>
<body>
<div class="page-header">
<h1>{{ $t('nav.org') }}</h1>
<div class="page-title">
<i class="fas fa-sitemap" style="color: var(--color-primary);"></i>
{{ $t('nav.org') }}
</div>
<div style="display: flex; gap: var(--spacing-md); align-items: center;">
<div class="search-box">
<i class="fas fa-search" style="color: var(--text-color-tertiary);"></i>
<input type="text" v:value="searchQuery"
:placeholder="$t('org.search_placeholder') || 'Search organizations...'">
:placeholder="$t('org.search_placeholder') || 'Search by name, code...'">
</div>
<v-btn color="primary" :click="openCreateModal">
<i class="fas fa-plus"></i>
@ -211,45 +270,58 @@
<!-- Loading State -->
<div class="loading-state" v-if="loading">
<div class="spinner"></div>
<span>{{ $t('common.loading') || 'Loading...' }}</span>
<span>{{ $t('common.loading') || 'Loading organizations...' }}</span>
</div>
<!-- Empty State -->
<div class="empty-state" v-if="!loading && filteredOrgs.length === 0">
<i class="fas fa-building"></i>
<h3>{{ $t('org.no_orgs') || 'No Organizations' }}</h3>
<p>{{ $t('org.no_orgs_desc') || 'Create your first organization to get started' }}</p>
<v-btn color="primary" :click="openCreateModal" v-if="searchQuery === ''">
<div class="empty-state" v-if="!loading && filteredOrgs().length === 0">
<i class="fas fa-building empty-icon"></i>
<h3>{{ $t('org.no_orgs') || 'No Organizations Found' }}</h3>
<p>{{ $t('org.no_orgs_desc') || 'Get started by creating your first organization.' }}</p>
<v-btn color="primary" :click="openCreateModal" v-if="searchQuery === ''" style="margin-top: var(--spacing-md);">
<i class="fas fa-plus"></i>
{{ $t('org.create_first') || 'Create Organization' }}
</v-btn>
</div>
<!-- Org Grid -->
<div class="org-grid" v-if="!loading && filteredOrgs.length > 0">
<div class="org-grid" v-if="!loading && filteredOrgs().length > 0">
<div class="org-card" v-for="org in filteredOrgs" @click="goToDetail(org.id)">
<div class="org-header">
<div class="org-icon">{{ org.name ? org.name.charAt(0).toUpperCase() : 'O' }}</div>
<div class="org-actions" @click.stop>
<v-btn icon size="sm" variant="outline" :click="() => openEditModal(org)">
<i class="fas fa-edit"></i>
</v-btn>
<v-btn icon size="sm" color="danger" variant="outline" :click="() => deleteOrg(org)">
<i class="fas fa-trash"></i>
</v-btn>
<div class="org-status" :class="org.status === 1 ? 'active' : ''">
{{ org.status === 1 ? 'Active' : 'Inactive' }}
</div>
<div class="org-header">
<div class="org-icon">
<img v-if="org.logo && org.logo.startsWith('http')" :src="org.logo" alt="logo" onerror="this.style.display='none'">
<span v-else>{{ org.name ? org.name.charAt(0).toUpperCase() : 'O' }}</span>
</div>
<div class="org-info">
<div class="org-name">{{ org.name }}</div>
<div class="org-desc">{{ org.description || ($t('org.no_description') || 'No description') }}</div>
<div class="org-meta">
<div class="org-meta-item">
<i class="fas fa-id-card"></i>
<span>ID: {{ org.id }}</span>
<div class="org-code">{{ org.code }}</div>
</div>
<div class="org-meta-item" v-if="org.member_count !== undefined">
</div>
<div class="org-desc">{{ org.description || ($t('org.no_description') || 'No description provided') }}</div>
<div class="org-meta">
<div class="org-meta-item" title="Members Limit">
<i class="fas fa-users"></i>
<span>{{ org.member_count }} {{ $t('org.members') || 'members' }}</span>
<span>Max: {{ org.max_members }}</span>
</div>
<div class="org-meta-item" title="Created At">
<i class="fas fa-calendar-alt"></i>
<span>{{ formatDate(org.created_at) }}</span>
</div>
</div>
<div class="org-actions" @click.stop>
<v-btn icon size="sm" variant="outline" :click="() => openEditModal(org)" title="Edit">
<i class="fas fa-edit"></i>
</v-btn>
<v-btn icon size="sm" color="danger" variant="outline" :click="() => deleteOrg(org)" title="Delete">
<i class="fas fa-trash"></i>
</v-btn>
</div>
</div>
</div>
@ -293,6 +365,17 @@
{name: 'description', type: 'textarea', labelKey: 'org.description', label: 'Description', placeholderKey: 'org.desc_placeholder', placeholder: 'Enter organization description (optional)'}
];
// Helper: Format Date
formatDate = (dateStr) => {
if (!dateStr || dateStr.startsWith('0001')) return '-';
try {
const date = new Date(dateStr);
return date.toLocaleDateString();
} catch (e) {
return dateStr;
}
};
// Computed filtered orgs
filteredOrgs = () => {
if (!searchQuery) return orgs;
@ -320,7 +403,7 @@
// Modal operations
openCreateModal = () => {
isEdit = false;
formData = {id: null, name: "", code: "", description: "", logo: "https://via.placeholder.com/150"};
formData = {id: null, name: "", code: "", description: "", logo: ""};
showModal = true;
};

6
ui/vbase.js
Unescape Escape View File

@ -191,12 +191,6 @@ class VBase {
// Response Interceptor
axiosInstance.interceptors.response.use(response => {
const res = response.data;
if (res && res.code === 200) {
return res.data;
}
if (res && res.code && res.code !== 200) {
return Promise.reject(new Error(res.message || 'Error'));
}
return res || response;
}, async error => {
const originalRequest = error.config;

Write Preview
Loading…
Cancel
Save