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

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);
+      padding: 0 var(--spacing-md);
-      border-radius: var(--radius-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);
+      transform: translateY(-4px);
-      box-shadow: var(--shadow-md);
+      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;
+      width: 56px;
-      height: 48px;
+      height: 56px;
-      border-radius: var(--radius-md);
+      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 {
+    .org-icon img {
-      display: flex;
+      width: 100%;
-      gap: var(--spacing-xs);
+      height: 100%;
-      opacity: 0;
+      object-fit: cover;
-      transition: opacity var(--transition-fast);
     }
 
-    .org-card:hover .org-actions {
+    .org-info {
-      opacity: 1;
+      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;
+      line-height: 1.6;
-      min-height: 40px;
+      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 {
+      to { transform: rotate(360deg); }
-        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;
     }
 
-    .empty-state i {
+    .empty-icon {
       font-size: 64px;
       color: var(--border-color);
-    }
+      margin-bottom: var(--spacing-md);
-
-    .empty-state h3 {
-      font-size: var(--font-size-xl);
-      color: var(--text-color);
     }
   </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,46 +270,59 @@
   <!-- 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">
+  <div class="empty-state" v-if="!loading && filteredOrgs().length === 0">
-    <i class="fas fa-building"></i>
+    <i class="fas fa-building empty-icon"></i>
-    <h3>{{ $t('org.no_orgs') || 'No Organizations' }}</h3>
+    <h3>{{ $t('org.no_orgs') || 'No Organizations Found' }}</h3>
-    <p>{{ $t('org.no_orgs_desc') || 'Create your first organization to get started' }}</p>
+    <p>{{ $t('org.no_orgs_desc') || 'Get started by creating your first organization.' }}</p>
-    <v-btn color="primary" :click="openCreateModal" v-if="searchQuery === ''">
+    <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-status" :class="org.status === 1 ? 'active' : ''">
+        {{ org.status === 1 ? 'Active' : 'Inactive' }}
+      </div>
+      
       <div class="org-header">
-        <div class="org-icon">{{ org.name ? org.name.charAt(0).toUpperCase() : 'O' }}</div>
+        <div class="org-icon">
-        <div class="org-actions" @click.stop>
+            <img v-if="org.logo && org.logo.startsWith('http')" :src="org.logo" alt="logo" onerror="this.style.display='none'">
-          <v-btn icon size="sm" variant="outline" :click="() => openEditModal(org)">
+            <span v-else>{{ org.name ? org.name.charAt(0).toUpperCase() : 'O' }}</span>
-            <i class="fas fa-edit"></i>
+        </div>
-          </v-btn>
+        <div class="org-info">
-          <v-btn icon size="sm" color="danger" variant="outline" :click="() => deleteOrg(org)">
+            <div class="org-name">{{ org.name }}</div>
-            <i class="fas fa-trash"></i>
+            <div class="org-code">{{ org.code }}</div>
-          </v-btn>
         </div>
       </div>
-      <div class="org-name">{{ org.name }}</div>
+      
-      <div class="org-desc">{{ org.description || ($t('org.no_description') || 'No description') }}</div>
+      <div class="org-desc">{{ org.description || ($t('org.no_description') || 'No description provided') }}</div>
+      
       <div class="org-meta">
-        <div class="org-meta-item">
+        <div class="org-meta-item" title="Members Limit">
-          <i class="fas fa-id-card"></i>
-          <span>ID: {{ org.id }}</span>
-        </div>
-        <div class="org-meta-item" v-if="org.member_count !== undefined">
           <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;
   };
 

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;