codexmate 0.0.20 → 0.0.22

package/web-ui/partials/index/panel-sessions.html

@@ -7,7 +7,7 @@
                     :aria-labelledby="'tab-sessions'">
                 <div v-if="sessionStandalone" class="session-standalone-page">
                     <div v-if="sessionStandaloneLoading" class="state-message">
-                        加载中...
+                        {{ t('sessions.loading') }}
                     </div>
                     <div v-else-if="sessionStandaloneError" class="state-message error">
                         {{ sessionStandaloneError }}
@@ -20,128 +20,30 @@
                         <pre class="session-standalone-text">{{ sessionStandaloneText }}</pre>
                     </div>
                 </div>
-
                 <div v-else>
-                <div class="sessions-subtabs" role="tablist" aria-label="会话视图切换">
-                    <button
-                        class="sessions-subtab"
-                        :class="{ active: sessionsViewMode === 'browser' }"
-                        type="button"
-                        role="tab"
-                        :aria-selected="sessionsViewMode === 'browser'"
-                        @click="sessionsViewMode = 'browser'">
-                        Sessions
-                    </button>
-                    <button
-                        class="sessions-subtab"
-                        :class="{ active: sessionsViewMode === 'usage' }"
-                        type="button"
-                        role="tab"
-                        :aria-selected="sessionsViewMode === 'usage'"
-                        @click="sessionsViewMode = 'usage'">
-                        Usage
-                    </button>
-                </div>
-
-                <div v-if="sessionsViewMode === 'usage'">
-                    <div class="usage-toolbar">
-                        <div class="selector-header" style="padding:0;border:0;background:none;">
-                            <span class="selector-title">本地使用概览</span>
-                        </div>
-                        <div class="usage-range-group" role="group" aria-label="Usage 时间范围">
-                            <button type="button" class="usage-range-btn" :class="{ active: sessionsUsageTimeRange === '7d' }" @click="sessionsUsageTimeRange = '7d'">近 7 天</button>
-                            <button type="button" class="usage-range-btn" :class="{ active: sessionsUsageTimeRange === '30d' }" @click="sessionsUsageTimeRange = '30d'">近 30 天</button>
-                        </div>
-                    </div>
-
-                    <div v-if="!sessionsList.length" class="usage-empty">暂无可用于统计的会话数据</div>
-                    <template v-else>
-                        <div class="usage-summary-grid">
-                            <div v-for="card in sessionUsageSummaryCards" :key="card.key" class="usage-summary-card">
-                                <div class="usage-summary-label">{{ card.label }}</div>
-                                <div class="usage-summary-value">{{ card.value }}</div>
-                            </div>
-                        </div>
-
-                        <div class="usage-chart-grid">
-                            <section class="usage-card">
-                                <div class="usage-card-title">会话趋势</div>
-                                <div class="usage-legend">
-                                    <span><span class="usage-legend-dot" style="background:#4f8cff"></span>Codex</span>
-                                    <span><span class="usage-legend-dot" style="background:#b277ff"></span>Claude</span>
-                                </div>
-                                <div class="usage-bars">
-                                    <div v-for="bucket in sessionUsageCharts.buckets" :key="bucket.key" class="usage-bar-group">
-                                        <div class="usage-bar-stack">
-                                            <div class="usage-bar codex" :style="{ height: ((bucket.codex / Math.max(sessionUsageCharts.maxSessionBucket, 1)) * 100) + '%' }" :title="`Codex ${bucket.codex}`"></div>
-                                            <div class="usage-bar claude" :style="{ height: ((bucket.claude / Math.max(sessionUsageCharts.maxSessionBucket, 1)) * 100) + '%' }" :title="`Claude ${bucket.claude}`"></div>
-                                        </div>
-                                        <div class="usage-bar-label">{{ bucket.label }}</div>
-                                    </div>
-                                </div>
-                            </section>
-
-                            <section class="usage-card">
-                                <div class="usage-card-title">来源占比</div>
-                                <div class="usage-list">
-                                    <div v-for="item in sessionUsageCharts.sourceShare" :key="item.key" class="usage-list-row">
-                                        <div class="usage-list-label">{{ item.label }}</div>
-                                        <div class="usage-progress"><div class="usage-progress-fill" :style="{ width: item.percent + '%' }"></div></div>
-                                        <div class="usage-list-value">{{ item.percent }}%</div>
-                                    </div>
-                                </div>
-                            </section>
-
-                            <section class="usage-card">
-                                <div class="usage-card-title">消息趋势</div>
-                                <div class="usage-bars">
-                                    <div v-for="bucket in sessionUsageCharts.buckets" :key="bucket.key + '-messages'" class="usage-bar-group">
-                                        <div class="usage-bar-stack">
-                                            <div class="usage-bar codex" style="width:100%" :style="{ height: ((bucket.totalMessages / Math.max(sessionUsageCharts.maxMessageBucket, 1)) * 100) + '%' }" :title="`${bucket.totalMessages} messages`"></div>
-                                        </div>
-                                        <div class="usage-bar-label">{{ bucket.label }}</div>
-                                    </div>
-                                </div>
-                            </section>
-
-                            <section class="usage-card">
-                                <div class="usage-card-title">高频路径</div>
-                                <div v-if="!sessionUsageCharts.topPaths.length" class="usage-list-value">暂无路径数据</div>
-                                <div v-else class="usage-list">
-                                    <div v-for="item in sessionUsageCharts.topPaths" :key="item.path" class="usage-list-row">
-                                        <div class="usage-list-label">{{ item.count }} 次</div>
-                                        <div class="usage-progress"><div class="usage-progress-fill" :style="{ width: ((item.count / Math.max(sessionUsageCharts.topPaths[0]?.count || 1, 1)) * 100) + '%' }"></div></div>
-                                        <div class="usage-list-value" :title="item.path">{{ item.path }}</div>
-                                    </div>
-                                </div>
-                            </section>
-                        </div>
-                    </template>
-                </div>
-
-                <template v-else>
                 <div class="selector-section">
                     <div class="selector-header">
-                        <span class="selector-title">会话来源</span>
+                        <span class="selector-title">{{ t('sessions.sourceTitle') }}</span>
                         <div class="selector-actions">
-                            <button class="btn-tool btn-tool-compact" @click="loadSessions" :disabled="sessionsLoading">
-                                {{ sessionsLoading ? '刷新中...' : '刷新会话' }}
+                            <button class="btn-tool btn-tool-compact" @click="loadSessions({ forceRefresh: true })" :disabled="sessionsLoading">
+                                {{ sessionsLoading ? t('sessions.refreshing') : t('sessions.refresh') }}
                             </button>
                         </div>
                     </div>
                     <div class="session-toolbar">
-                        <div class="session-toolbar-group">
+                        <div class="session-toolbar-group session-toolbar-primary">
                             <select class="session-source-select" v-model="sessionFilterSource" @change="onSessionSourceChange" :disabled="sessionsLoading">
-                                <option value="all">全部</option>
-                                <option value="codex">Codex</option>
-                                <option value="claude">Claude Code</option>
+                                <option value="all">{{ t('common.all') }}</option>
+                                <option value="codex">{{ t('sessions.source.codex') }}</option>
+                                <option value="claude">{{ t('sessions.source.claudeCode') }}</option>
                             </select>
                             <select
                                 class="session-path-select"
                                 v-model="sessionPathFilter"
                                 @change="onSessionPathFilterChange"
+                                @focus="loadSessionPathOptions({ source: sessionFilterSource })"
                                 :disabled="sessionsLoading">
-                                <option value="">全部路径</option>
+                                <option value="">{{ t('sessions.allPaths') }}</option>
                                 <option v-for="cwd in sessionPathOptions" :key="cwd" :value="cwd">{{ cwd }}</option>
                             </select>
                         </div>
@@ -153,26 +55,26 @@
                                 :disabled="sessionsLoading || !isSessionQueryEnabled"
                                 :placeholder="sessionQueryPlaceholder">
                         </div>
-                        <div class="session-toolbar-group">
+                        <div class="session-toolbar-group session-toolbar-secondary">
                             <select
                                 class="session-role-select"
                                 v-model="sessionRoleFilter"
                                 @change="onSessionFilterChange"
                                 disabled>
-                                <option value="all">全部角色</option>
-                                <option value="user">仅 User</option>
-                                <option value="assistant">仅 Assistant</option>
-                                <option value="system">仅 System</option>
+                                <option value="all">{{ t('sessions.role.all') }}</option>
+                                <option value="user">{{ t('sessions.role.user') }}</option>
+                                <option value="assistant">{{ t('sessions.role.assistant') }}</option>
+                                <option value="system">{{ t('sessions.role.system') }}</option>
                             </select>
                             <select
                                 class="session-time-select"
                                 v-model="sessionTimePreset"
                                 @change="onSessionFilterChange"
                                 disabled>
-                                <option value="all">全部时间</option>
-                                <option value="7d">近 7 天</option>
-                                <option value="30d">近 30 天</option>
-                                <option value="90d">近 90 天</option>
+                                <option value="all">{{ t('sessions.time.all') }}</option>
+                                <option value="7d">{{ t('sessions.time.7d') }}</option>
+                                <option value="30d">{{ t('sessions.time.30d') }}</option>
+                                <option value="90d">{{ t('sessions.time.90d') }}</option>
                             </select>
                         </div>
                     </div>
@@ -183,23 +85,27 @@
                                 v-model="sessionResumeWithYolo"
                                 @change="onSessionResumeYoloChange"
                             >
-                            复制恢复命令附带 --yolo
+                            {{ t('sessions.resumeYolo') }}
                         </label>
                     </div>
                 </div>
 
                 <div v-if="sessionsLoading" class="state-message">
-                    会话加载中...
+                    {{ t('sessions.loadingList') }}
                 </div>
 
                 <div v-else-if="sessionsList.length === 0" class="session-empty">
-                    暂无可用会话记录
+                    {{ t('sessions.empty') }}
                 </div>
 
                 <div v-else class="session-layout">
-                    <div v-if="sessionListRenderEnabled" class="session-list">
+                    <div
+                        v-if="sessionListRenderEnabled"
+                        class="session-list"
+                        :ref="setSessionListRef"
+                        @scroll.passive="onSessionListScroll">
                         <div
-                            v-for="session in sortedSessionsList"
+                            v-for="session in visibleSessionsList"
                             :key="session.source + '-' + session.sessionId + '-' + session.filePath"
                             v-memo="[activeSessionExportKey === getSessionExportKey(session), session.messageCount, session.updatedAt, session.title, session.sourceLabel, isSessionPinned(session), sessionsLoading]"
                             :class="[
@@ -218,15 +124,15 @@
                             <div class="session-item-header">
                                 <div class="session-item-main">
                                     <div class="session-item-title">{{ session.title || session.sessionId }}</div>
-                                    <span class="session-count-badge">{{ session.messageCount ?? 0 }}</span>
+                                    <span class="session-count-badge">{{ session.messageCount == null ? 0 : session.messageCount }}</span>
                                 </div>
                                 <div class="session-item-actions">
                                     <button
                                         class="session-item-copy session-item-pin"
                                         @click.stop="toggleSessionPin(session)"
                                         :disabled="sessionsLoading"
-                                        :aria-label="isSessionPinned(session) ? '取消置顶' : '置顶'"
-                                        :title="isSessionPinned(session) ? '取消置顶' : '置顶'"
+                                        :aria-label="isSessionPinned(session) ? t('sessions.unpin') : t('sessions.pin')"
+                                        :title="isSessionPinned(session) ? t('sessions.unpin') : t('sessions.pin')"
                                         :aria-pressed="isSessionPinned(session)">
                                         <svg v-if="isSessionPinned(session)" class="pin-icon" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.6">
                                             <path d="M12 22s8-6 8-12a8 8 0 1 0-16 0c0 6 8 12 8 12z"></path>
@@ -240,8 +146,8 @@
                                         class="session-item-copy"
                                         @click.stop="copyResumeCommand(session)"
                                         :disabled="sessionsLoading"
-                                        aria-label="复制恢复命令"
-                                        title="复制恢复命令">
+                                        :aria-label="t('sessions.copyResume')"
+                                        :title="t('sessions.copyResume')">
                                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                             <rect x="8" y="8" width="12" height="12" rx="2"></rect>
                                             <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"></path>
@@ -251,7 +157,7 @@
                             </div>
                             <div class="session-item-meta">
                                 <span class="session-source">{{ session.sourceLabel }}</span>
-                                <span class="session-item-time">{{ session.updatedAt || 'unknown time' }}</span>
+                                <span class="session-item-time">{{ session.updatedAt || t('sessions.unknownTime') }}</span>
                             </div>
                         </div>
                     </div>
@@ -265,7 +171,7 @@
                                         <div class="session-preview-title">{{ activeSession.title || activeSession.sessionId }}</div>
                                         <div class="session-preview-meta">
                                             <span class="session-preview-meta-item">{{ activeSession.sourceLabel }}</span>
-                                            <span class="session-preview-meta-item">{{ activeSession.updatedAt || 'unknown time' }}</span>
+                                            <span class="session-preview-meta-item">{{ activeSession.updatedAt || t('sessions.unknownTime') }}</span>
                                         </div>
                                         <div class="session-preview-meta" v-if="activeSession.cwd">
                                             <span class="session-preview-meta-item">{{ activeSession.cwd }}</span>
@@ -273,32 +179,32 @@
                                     </div>
                                     <div class="session-actions">
                                         <button class="btn-session-refresh" @click="loadActiveSessionDetail" :disabled="sessionDetailLoading || !activeSession">
-                                            {{ sessionDetailLoading ? '加载中...' : '刷新内容' }}
+                                            {{ sessionDetailLoading ? t('sessions.preview.loading') : t('sessions.preview.refresh') }}
                                         </button>
                                         <button
                                             v-if="isDeleteAvailable(activeSession)"
                                             class="btn-session-delete"
                                             @click="deleteSession(activeSession)"
                                             :disabled="!activeSession || sessionsLoading || sessionDeleting[getSessionExportKey(activeSession)]">
-                                            {{ (activeSession && sessionDeleting[getSessionExportKey(activeSession)]) ? '移入中...' : '移入回收站' }}
+                                            {{ (activeSession && sessionDeleting[getSessionExportKey(activeSession)]) ? (sessionTrashEnabled === false ? t('sessions.preview.deleting') : t('sessions.preview.moving')) : (sessionTrashEnabled === false ? t('sessions.preview.deleteHard') : t('sessions.preview.moveToTrash')) }}
                                         </button>
                                         <button
                                             class="btn-session-export"
                                             @click="exportSession(activeSession)"
                                             :disabled="!activeSession || sessionExporting[getSessionExportKey(activeSession)]">
-                                            {{ (activeSession && sessionExporting[getSessionExportKey(activeSession)]) ? '导出中...' : '导出记录' }}
+                                            {{ (activeSession && sessionExporting[getSessionExportKey(activeSession)]) ? t('sessions.preview.exporting') : t('sessions.preview.export') }}
                                         </button>
                                         <button
                                             class="btn-session-open"
                                             @click="openSessionStandalone(activeSession)"
                                             :disabled="!activeSession">
-                                            新页查看
+                                            {{ t('sessions.preview.openStandalone') }}
                                         </button>
                                     </div>
                                 </div>
 
                                 <div v-if="sessionDetailLoading && !sessionPreviewLoadingMore" class="session-preview-empty">
-                                    正在加载会话内容...
+                                    {{ t('sessions.preview.loadingBody') }}
                                 </div>
 
                                 <div v-else-if="activeSessionDetailError" class="session-preview-empty">
@@ -306,38 +212,38 @@
                                 </div>
 
                                 <div v-else-if="!activeSessionMessages.length" class="session-preview-empty">
-                                    当前会话暂无可展示消息
+                                    {{ t('sessions.preview.emptyMsgs') }}
                                 </div>
 
                                 <div v-else-if="sessionPreviewRenderEnabled && !activeSessionVisibleMessages.length" class="session-preview-empty">
-                                    <span>正在渲染会话内容...</span>
+                                    <span>{{ t('sessions.preview.rendering') }}</span>
                                     <button class="btn-session-refresh" @click="primeSessionPreviewMessageRender" :disabled="sessionDetailLoading">
-                                        重新渲染
+                                        {{ t('sessions.preview.rerender') }}
                                     </button>
                                 </div>
 
                                 <div v-else-if="!sessionPreviewRenderEnabled" class="session-preview-empty">
-                                    正在准备会话内容...
+                                    {{ t('sessions.preview.preparing') }}
                                 </div>
 
                                 <div v-else class="session-preview-body">
                                     <div class="session-preview-messages">
                                         <div v-if="activeSessionDetailClipped" class="session-item-sub session-item-wrap">
-                                            仅展示最近 {{ activeSessionMessages.length }} 条消息。
+                                            {{ t('sessions.preview.clipped', { count: activeSessionMessages.length }) }}
                                         </div>
                                         <div
                                             v-if="canLoadMoreSessionMessages"
                                             class="session-item-sub session-item-wrap"
                                             style="display:flex;align-items:center;justify-content:space-between;gap:8px;">
-                                            <span>已显示 {{ activeSessionVisibleMessages.length }} / {{ activeSessionMessages.length }} 条</span>
+                                            <span>{{ t('sessions.preview.shownCount', { shown: activeSessionVisibleMessages.length, total: activeSessionMessages.length }) }}</span>
                                             <button class="btn-session-refresh" @click="loadMoreSessionMessages()" :disabled="sessionDetailLoading || sessionPreviewLoadingMore">
-                                                {{ sessionPreviewLoadingMore ? '加载中...' : ('加载更多（剩余 ' + sessionPreviewRemainingCount + '）') }}
+                                                {{ sessionPreviewLoadingMore ? t('sessions.preview.loading') : t('sessions.preview.loadMore', { remain: sessionPreviewRemainingCount }) }}
                                             </button>
                                         </div>
                                         <div
                                             v-if="sessionPreviewLoadingMore"
                                             class="session-item-sub session-item-wrap">
-                                            正在加载更早消息...
+                                            {{ t('sessions.preview.loadingMore') }}
                                         </div>
                                         <div
                                             v-for="(msg, idx) in activeSessionVisibleMessages"
@@ -348,7 +254,7 @@
                                             :class="['session-msg', msg.normalizedRole === 'user' ? 'user' : (msg.normalizedRole === 'system' ? 'system' : 'assistant')]">
                                             <div class="session-msg-header">
                                                 <div class="session-msg-meta">
-                                                    <span class="session-msg-role">{{ msg.roleLabel || (msg.normalizedRole === 'user' ? 'User' : (msg.normalizedRole === 'system' ? 'System' : 'Assistant')) }}</span>
+                                                    <span class="session-msg-role">{{ msg.roleLabel || (msg.normalizedRole === 'user' ? t('sessions.roleLabel.user') : (msg.normalizedRole === 'system' ? t('sessions.roleLabel.system') : t('sessions.roleLabel.assistant'))) }}</span>
                                                     <span class="session-msg-time">{{ msg.timestamp || '' }}</span>
                                                 </div>
                                             </div>
@@ -357,7 +263,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <aside v-if="sessionPreviewRenderEnabled && sessionTimelineNodes.length" class="session-timeline" aria-label="会话时间轴">
+                            <aside v-if="sessionPreviewRenderEnabled && sessionTimelineNodes.length" class="session-timeline" :aria-label="t('sessions.timeline.aria')">
                                 <div class="session-timeline-track"></div>
                                 <button
                                     v-for="node in sessionTimelineNodes"
@@ -378,10 +284,9 @@
                         </template>
 
                     <div v-else class="session-preview-empty">
-                        <span>请先在左侧选择一个会话</span>
+                        <span>{{ t('sessions.selectHint') }}</span>
                     </div>
                 </div>
                 </div>
-                </template>
                 </div>
             </div>