From dce36cb65f84cc98110f76498ee172f0e71baf56 Mon Sep 17 00:00:00 2001 From: veypi Date: Sun, 15 Feb 2026 04:57:28 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=BB=84=E7=BB=87?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/page/sys/org/index.html | 231 +++++++++++++++++++++++++------------ ui/vbase.js | 6 - 2 files changed, 157 insertions(+), 80 deletions(-) diff --git a/ui/page/sys/org/index.html b/ui/page/sys/org/index.html index 20550ee..a8096a7 100644 --- a/ui/page/sys/org/index.html +++ b/ui/page/sys/org/index.html @@ -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; + } + + /* Hide status when hovering if actions overlap, or better, move status */ + .org-card:hover .org-status { + opacity: 0; } - .loading-state { + .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); }
-

{{ $t('nav.org') }}

+
+ + {{ $t('nav.org') }} +
+ :placeholder="$t('org.search_placeholder') || 'Search by name, code...'">
@@ -211,46 +270,59 @@
- {{ $t('common.loading') || 'Loading...' }} + {{ $t('common.loading') || 'Loading organizations...' }}
-
- -

{{ $t('org.no_orgs') || 'No Organizations' }}

-

{{ $t('org.no_orgs_desc') || 'Create your first organization to get started' }}

- +
+ +

{{ $t('org.no_orgs') || 'No Organizations Found' }}

+

{{ $t('org.no_orgs_desc') || 'Get started by creating your first organization.' }}

+ {{ $t('org.create_first') || 'Create Organization' }}
-
+
+
+ {{ org.status === 1 ? 'Active' : 'Inactive' }} +
+
-
{{ org.name ? org.name.charAt(0).toUpperCase() : 'O' }}
-
- - - - - - +
+ logo + {{ org.name ? org.name.charAt(0).toUpperCase() : 'O' }} +
+
+
{{ org.name }}
+
{{ org.code }}
-
{{ org.name }}
-
{{ org.description || ($t('org.no_description') || 'No description') }}
+ +
{{ org.description || ($t('org.no_description') || 'No description provided') }}
+
-
- - ID: {{ org.id }} -
-
+
- {{ org.member_count }} {{ $t('org.members') || 'members' }} + Max: {{ org.max_members }} +
+
+ + {{ formatDate(org.created_at) }}
+ +
+ + + + + + +
@@ -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; }; diff --git a/ui/vbase.js b/ui/vbase.js index 0c2b89a..f95990c 100644 --- a/ui/vbase.js +++ b/ui/vbase.js @@ -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;