update

packages/frontend/src/locales/en-US.json

@@ -680,7 +680,9 @@
     "width": "Width",
     "height": "Height",
     "reconnect": "Reconnect",
-    "retry": "Retry"
+    "retry": "Retry",
+    "sortAscending": "Ascending",
+    "sortDescending": "Descending"
   },
   "layoutConfigurator": {
     "title": "Layout Configurator",
@@ -927,7 +929,16 @@
     "viewAllConnections": "View All Connections",
     "recentActivity": "Recent Activity",
     "noRecentActivity": "No recent activity records",
-    "viewFullAuditLog": "View Full Audit Log"
+    "viewFullAuditLog": "View Full Audit Log",
+    "connectionList": "Connection List",
+    "noConnections": "No connection records",
+    "sortOptions": {
+      "lastConnected": "Last Connected",
+      "name": "Name",
+      "type": "Type",
+      "updated": "Updated",
+      "created": "Created"
+    }
   },
   "terminalTabBar": {
     "selectServerTitle": "Select server to connect"

packages/frontend/src/locales/ja-JP.json

@@ -676,7 +676,9 @@
       "collapse": "折りたたむ",
       "search": "検索",
       "all": "すべて",
-      "filter": "フィルター"
+      "filter": "フィルター",
+      "sortAscending": "昇順",
+      "sortDescending": "降順"
     },
     "layoutConfigurator": {
       "title": "レイアウトマネージャー",
@@ -897,7 +899,16 @@
     "viewAllConnections": "すべての接続を表示",
     "recentActivity": "最近のアクティビティ",
     "noRecentActivity": "最近のアクティビティ記録はありません",
-    "viewFullAuditLog": "完全な監査ログを表示"
+    "viewFullAuditLog": "完全な監査ログを表示",
+    "connectionList": "接続リスト",
+    "noConnections": "接続記録がありません",
+    "sortOptions": {
+      "lastConnected": "最終接続",
+      "name": "名前",
+      "type": "タイプ",
+      "updated": "更新日時",
+      "created": "作成日時"
+    }
   },
   "terminalTabBar": {
     "selectServerTitle": "接続するサーバーを選択"

packages/frontend/src/locales/zh-CN.json

@@ -681,7 +681,9 @@
     "width": "宽度",
     "height": "高度",
     "reconnect": "重新连接",
-    "retry": "重试"
+    "retry": "重试",
+    "sortAscending": "升序",
+    "sortDescending": "降序"
   },
   "layoutConfigurator": {
     "title": "布局管理器",
@@ -930,7 +932,16 @@
     "viewAllConnections": "查看所有连接",
     "recentActivity": "最近活动",
     "noRecentActivity": "没有最近活动记录",
-    "viewFullAuditLog": "查看完整审计日志"
+    "viewFullAuditLog": "查看完整审计日志",
+    "connectionList": "连接列表",
+    "noConnections": "没有连接记录",
+    "sortOptions": {
+      "lastConnected": "最近连接",
+      "name": "名称",
+      "type": "类型",
+      "updated": "修改时间",
+      "created": "创建时间"
+    }
   },
   "terminalTabBar": {
     "selectServerTitle": "选择要连接的服务器"

packages/frontend/src/stores/settings.store.ts

@@ -2,10 +2,13 @@ import { defineStore } from 'pinia';
 import apiClient from '../utils/apiClient'; // 使用统一的 apiClient
 import { ref, computed } from 'vue'; // 移除 watch
 import i18n, { setLocale, defaultLng, availableLocales } from '../i18n'; // Import i18n instance, setLocale, defaultLng, and availableLocales
-import type { PaneName } from './layout.store'; // +++ Import PaneName type +++
-import { useAuthStore } from './auth.store'; // <--- 导入 authStore
-// Import CAPTCHA types from backend (adjust path if needed, assuming types are mirrored or shared)
-// For now, let's assume they are available via a shared types definition or manually defined here
+import type { PaneName } from './layout.store';
+import { useAuthStore } from './auth.store';
+import type { ConnectionInfo } from './connections.store';
+
+export type SortField = keyof Pick<ConnectionInfo, 'created_at' | 'last_connected_at' | 'updated_at' | 'name' | 'type'>;
+export type SortOrder = 'asc' | 'desc';
+
 // Assuming manual definition for now if no shared types exist:
 type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'none';
 interface CaptchaSettings {
@@ -47,9 +50,10 @@ interface SettingsState {
   timezone?: string; // NEW: 时区设置 (e.g., 'Asia/Shanghai', 'UTC')
   rdpModalWidth?: string; // NEW: RDP 模态框宽度
   rdpModalHeight?: string; // NEW: RDP 模态框高度
-  ipBlacklistEnabled?: string; // <-- NEW: IP 黑名单启用状态 'true' or 'false'
-  // Add other general settings keys here as needed
-  [key: string]: string | undefined; // Allow other string settings
+  ipBlacklistEnabled?: string;
+  dashboardSortBy?: SortField;
+  dashboardSortOrder?: SortOrder;
+  [key: string]: string | undefined;
 }
 
 
@@ -224,7 +228,14 @@ export const useSettingsStore = defineStore('settings', () => {
           settings.value.rdpModalWidth = '1064'; // 默认宽度 (1024 + 40 padding)
       }
       if (settings.value.rdpModalHeight === undefined) {
-          settings.value.rdpModalHeight = '858'; // 默认高度 (768 + chrome)
+          settings.value.rdpModalHeight = '858';
+      }
+    
+      if (settings.value.dashboardSortBy === undefined) {
+          settings.value.dashboardSortBy = 'last_connected_at';
+      }
+      if (settings.value.dashboardSortOrder === undefined) {
+          settings.value.dashboardSortOrder = 'desc';
       }
 
       // --- 语言设置 ---
@@ -306,10 +317,12 @@ export const useSettingsStore = defineStore('settings', () => {
         'timezone', // NEW: 添加时区键
         'rdpModalWidth', // NEW: 添加 RDP 模态框宽度键
         'rdpModalHeight', // NEW: 添加 RDP 模态框高度键
-        'ipBlacklistEnabled' // <-- NEW: 添加 IP 黑名单启用键
-    ];
-    if (!allowedKeys.includes(key)) {
-        console.error(`[SettingsStore] 尝试更新不允许的设置键: ${key}`);
+        'ipBlacklistEnabled',
+        'dashboardSortBy',
+        'dashboardSortOrder'
+      ];
+      if (!allowedKeys.includes(key)) {
+          console.error(`[SettingsStore] 尝试更新不允许的设置键: ${key}`);
         throw new Error(`不允许更新设置项 '${key}'`);
     }
 
@@ -366,10 +379,12 @@ export const useSettingsStore = defineStore('settings', () => {
         'timezone', // NEW: 添加时区键
         'rdpModalWidth', // NEW: 添加 RDP 模态框宽度键
         'rdpModalHeight', // NEW: 添加 RDP 模态框高度键
-        'ipBlacklistEnabled' // <-- NEW: 添加 IP 黑名单启用键
-    ];
-    const filteredUpdates: Partial<SettingsState> = {};
-    let languageUpdate: string | undefined = undefined; // Use string type
+        'ipBlacklistEnabled',
+        'dashboardSortBy',
+        'dashboardSortOrder'
+      ];
+      const filteredUpdates: Partial<SettingsState> = {};
+      let languageUpdate: string | undefined = undefined;
 
     for (const key in updates) {
         if (allowedKeys.includes(key as keyof SettingsState)) {
@@ -517,6 +532,18 @@ export const useSettingsStore = defineStore('settings', () => {
       isLoading.value = false;
     }
   }
+  
+  async function saveDashboardSortPreference(sortBy: SortField, sortOrder: SortOrder) {
+      try {
+          await updateMultipleSettings({
+              dashboardSortBy: sortBy,
+              dashboardSortOrder: sortOrder,
+          });
+      } catch (error) {
+          console.error('[SettingsStore] Failed to save dashboard sort preference:', error);
+          // Optionally show error to user
+      }
+  }
 
 
   // 移除外观相关 actions: saveCustomThemes, resetCustomThemes, toggleStyleCustomizer
@@ -596,9 +623,19 @@ export const useSettingsStore = defineStore('settings', () => {
   });
 
   // NEW: Getter for timezone setting
-  const timezone = computed(() => settings.value.timezone || 'UTC'); // Fallback to UTC
-
-  // --- CAPTCHA Getters (Public Only) ---
+  const timezone = computed(() => settings.value.timezone || 'UTC');
+  
+  const dashboardSortBy = computed((): SortField => {
+      const savedSortBy = settings.value.dashboardSortBy;
+      const validFields: SortField[] = ['created_at', 'last_connected_at', 'updated_at', 'name', 'type'];
+      return savedSortBy && validFields.includes(savedSortBy) ? savedSortBy : 'last_connected_at';
+  });
+  
+  const dashboardSortOrder = computed((): SortOrder => {
+      const savedSortOrder = settings.value.dashboardSortOrder;
+      return savedSortOrder === 'asc' || savedSortOrder === 'desc' ? savedSortOrder : 'desc';
+  });
+  
   const isCaptchaEnabled = computed(() => captchaSettings.value?.enabled ?? false);
   const captchaProvider = computed(() => captchaSettings.value?.provider ?? 'none');
   const hcaptchaSiteKey = computed(() => captchaSettings.value?.hcaptchaSiteKey ?? '');
@@ -636,6 +673,9 @@ export const useSettingsStore = defineStore('settings', () => {
     updateSidebarPaneWidth, // +++ 暴露更新特定面板宽度的 action +++
     updateFileManagerLayoutSettings, // +++ 暴露更新文件管理器布局的 action +++
     commandInputSyncTarget, // +++ 暴露命令输入同步目标 getter +++
-    timezone, // NEW: 暴露时区 getter
+    timezone,
+    dashboardSortBy,
+    dashboardSortOrder,
+    saveDashboardSortPreference,
   };
-});
+  });

packages/frontend/src/views/DashboardView.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { useConnectionsStore } from '../stores/connections.store';
 import { useAuditLogStore } from '../stores/audit.store';
-import { useSessionStore } from '../stores/session.store'; 
+import { useSessionStore } from '../stores/session.store';
+// Removed settings store import for sorting
+import type { SortField, SortOrder } from '../stores/settings.store'; // Keep type import
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import type { ConnectionInfo } from '../stores/connections.store'; 
-import { storeToRefs } from 'pinia';
+import type { ConnectionInfo } from '../stores/connections.store';
+import { storeToRefs } from 'pinia'; // Keep for other stores if needed
 import { formatDistanceToNow } from 'date-fns';
 import { zhCN, enUS, ja } from 'date-fns/locale';
 import type { Locale } from 'date-fns';
@@ -15,39 +17,72 @@ const { t, locale } = useI18n();
 const router = useRouter();
 const connectionsStore = useConnectionsStore();
 const auditLogStore = useAuditLogStore();
-const sessionStore = useSessionStore(); 
+const sessionStore = useSessionStore();
+// Removed settings store instantiation
 
 const { connections, isLoading: isLoadingConnections } = storeToRefs(connectionsStore);
 const { logs: auditLogs, isLoading: isLoadingLogs, totalLogs } = storeToRefs(auditLogStore);
+// Removed refs from settings store
+
+// Local state for sorting
+const localSortBy = ref<SortField>('last_connected_at');
+const localSortOrder = ref<SortOrder>('desc');
 
-const maxRecentConnections = 5;
 const maxRecentLogs = 5;
 
-const recentConnections = computed(() => {
+const sortOptions: { value: SortField; labelKey: string }[] = [
+  { value: 'last_connected_at', labelKey: 'dashboard.sortOptions.lastConnected' },
+  { value: 'name', labelKey: 'dashboard.sortOptions.name' },
+  { value: 'type', labelKey: 'dashboard.sortOptions.type' },
+  { value: 'updated_at', labelKey: 'dashboard.sortOptions.updated' },
+  { value: 'created_at', labelKey: 'dashboard.sortOptions.created' },
+];
 
+const sortedConnections = computed(() => {
+  const sortBy = localSortBy.value; // Use local state
+  const sortOrderVal = localSortOrder.value; // Use local state
+  const factor = sortOrderVal === 'desc' ? -1 : 1;
 
-const connected = connections.value.filter(c => c.last_connected_at);
+  return [...connections.value].sort((a, b) => {
+    let valA: any;
+    let valB: any;
 
-  if (connected.length > 0) {
-    connected.sort((a, b) => (b.last_connected_at ?? 0) - (a.last_connected_at ?? 0));
-    const result = connected.slice(0, maxRecentConnections);
-    return result;
-  } else {
-    const sortedByUpdate = [...connections.value].sort((a, b) => (b.updated_at ?? 0) - (a.updated_at ?? 0));
-    const result = sortedByUpdate.slice(0, maxRecentConnections);
-    return result;
-  }
+    switch (sortBy) {
+      case 'name':
+        valA = a.name || '';
+        valB = b.name || '';
+        return valA.localeCompare(valB) * factor;
+      case 'type':
+        valA = a.type || '';
+        valB = b.type || '';
+        return valA.localeCompare(valB) * factor;
+      case 'created_at':
+        valA = a.created_at ?? 0;
+        valB = b.created_at ?? 0;
+        return (valA - valB) * factor;
+      case 'updated_at':
+        valA = a.updated_at ?? 0;
+        valB = b.updated_at ?? 0;
+        return (valA - valB) * factor;
+      case 'last_connected_at':
+        // Handle null/undefined last_connected_at based on sort order for consistent sorting
+        valA = a.last_connected_at ?? (sortOrderVal === 'desc' ? -Infinity : Infinity);
+        valB = b.last_connected_at ?? (sortOrderVal === 'desc' ? -Infinity : Infinity);
+        // Ensure consistent comparison for potentially infinite values
+        if (valA === valB) return 0;
+        if (valA < valB) return -1 * factor;
+        return 1 * factor;
+      default:
+        return 0;
+    }
+  });
 });
 
-// --- 最近活动 ---
 const recentAuditLogs = computed(() => {
-  // 直接取最新的 N 条 (假设 store 中已按时间倒序)
   return auditLogs.value.slice(0, maxRecentLogs);
 });
 
-// --- 加载数据 ---
 onMounted(async () => {
-  // 如果 connections store 还没有加载过数据，则加载
   if (connections.value.length === 0) {
     try {
       await connectionsStore.fetchConnections();
@@ -55,30 +90,31 @@ onMounted(async () => {
       console.error("加载连接列表失败:", error);
     }
   }
-  // 加载最新的审计日志
   try {
-    // 只需要加载少量日志用于摘要，并按时间倒序
-    // 调用 fetchLogs 并明确指示这是仪表盘请求以启用缓存
     await auditLogStore.fetchLogs({
         page: 1,
         limit: maxRecentLogs,
         sortOrder: 'desc',
-        isDashboardRequest: true // <--- 添加此标志
+        isDashboardRequest: true
     });
   } catch (error) {
     console.error("加载审计日志失败:", error);
-    // 可以在这里显示错误通知
   }
 });
-// --- 方法 ---
-// 修改函数签名，接受 ConnectionInfo 类型
+
 const connectTo = (connection: ConnectionInfo) => {
-  // 将连接处理逻辑委托给 sessionStore
   sessionStore.handleConnectRequest(connection);
 };
 
+const toggleSortOrder = () => {
+  // Only update the local sort order state
+  localSortOrder.value = localSortOrder.value === 'asc' ? 'desc' : 'asc';
+};
+
+const isAscending = computed(() => localSortOrder.value === 'asc'); // Use local state
+
+// Removed watch for saving preferences
 
-// --- 动态语言包映射 ---
 const dateFnsLocales: Record<string, Locale> = {
   'en-US': enUS,
   'zh-CN': zhCN,
@@ -148,20 +184,38 @@ const isFailedAction = (actionType: string): boolean => {
 
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
 
-      <!-- Recent Connections -->
+      <!-- Connection List -->
       <div class="bg-card text-card-foreground shadow rounded-lg overflow-hidden border border-border">
-        <div class="px-4 py-3 border-b border-border">
-          <h2 class="text-lg font-medium">{{ t('dashboard.recentConnections', '最近连接') }}</h2>
+        <div class="px-4 py-3 border-b border-border flex justify-between items-center">
+          <h2 class="text-lg font-medium">{{ t('dashboard.connectionList', '连接列表') }}</h2>
+          <div class="flex items-center space-x-2">
+             <select
+                v-model="localSortBy"
+                class="h-8 px-2 py-1 text-sm border border-border rounded bg-input text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+                aria-label="Sort connections by"
+              >
+                <option v-for="option in sortOptions" :key="option.value" :value="option.value">
+                  {{ t(option.labelKey, option.value.replace('_', ' ')) }}
+                </option>
+              </select>
+              <button
+                @click="toggleSortOrder"
+                class="h-8 px-1.5 py-1 border border-border rounded hover:bg-muted focus:outline-none focus:ring-1 focus:ring-primary flex items-center justify-center"
+                :aria-label="isAscending ? t('common.sortAscending') : t('common.sortDescending')"
+                :title="isAscending ? t('common.sortAscending') : t('common.sortDescending')"
+              >
+                <i :class="['fas', isAscending ? 'fa-arrow-up-a-z' : 'fa-arrow-down-z-a', 'w-4 h-4']"></i>
+              </button>
+          </div>
         </div>
         <div class="p-4">
-          <!-- Loading State (Only show if loading AND no connections are displayed yet) -->
-          <div v-if="isLoadingConnections && recentConnections.length === 0" class="text-center text-text-secondary">{{ t('common.loading') }}</div>
-          <ul v-else-if="recentConnections.length > 0" class="space-y-3">
-            <li v-for="conn in recentConnections" :key="conn.id" class="flex items-center justify-between p-3 bg-header/50 border border-border/50 rounded transition duration-150 ease-in-out"> <!-- Applied audit log item style -->
+          <div v-if="isLoadingConnections && sortedConnections.length === 0" class="text-center text-text-secondary">{{ t('common.loading') }}</div>
+          <ul v-else-if="sortedConnections.length > 0" class="space-y-3">
+            <li v-for="conn in sortedConnections" :key="conn.id" class="flex items-center justify-between p-3 bg-header/50 border border-border/50 rounded transition duration-150 ease-in-out">
               <div class="flex-grow mr-4 overflow-hidden">
                 <span class="font-medium block truncate flex items-center" :title="conn.name || ''">
                   <i :class="['fas', conn.type === 'RDP' ? 'fa-desktop' : 'fa-server', 'mr-2 w-4 text-center text-text-secondary']"></i>
-                  <span>{{ conn.name || 'Unnamed' }}</span>
+                  <span>{{ conn.name || t('connections.unnamed') }}</span>
                 </span>
                 <span class="text-sm text-text-secondary block truncate" :title="`${conn.username}@${conn.host}:${conn.port}`">
                   {{ conn.username }}@{{ conn.host }}:{{ conn.port }}
@@ -175,7 +229,7 @@ const isFailedAction = (actionType: string): boolean => {
               </button>
             </li>
           </ul>
-          <div v-else class="text-center text-text-secondary">{{ t('dashboard.noRecentConnections', '没有最近连接记录') }}</div>
+          <div v-else class="text-center text-text-secondary">{{ t('dashboard.noConnections', '没有连接记录') }}</div>
         </div>
       </div>