fix(calendar): 优化日历组件中的代码格式和样式

src/components/AgentAssistantWidget.vue

@@ -167,7 +167,8 @@ md.use(mdLinkAttributes, {
 })
 
 const canSend = computed(
-  () => (inputText.value.trim().length > 0 || pendingAttachments.value.length > 0) && !sending.value && !recording.value,
+  () =>
+    (inputText.value.trim().length > 0 || pendingAttachments.value.length > 0) && !sending.value && !recording.value,
 )
 const canRecord = computed(() => !sending.value && !recording.value)
 const recordingTimeText = computed(() => {
@@ -254,7 +255,9 @@ function normalizeServerSession(item: AgentServerSession, withMessages = false):
   return {
     sessionId: sessionIdValue,
     clientSessionId: item.client_session_id,
-    title: item.title?.trim() || (messages.length ? buildSessionHistoryTitle(messages) : t('agentAssistant.untitledSession')),
+    title:
+      item.title?.trim() ||
+      (messages.length ? buildSessionHistoryTitle(messages) : t('agentAssistant.untitledSession')),
     preview: item.preview,
     channel: item.channel,
     source: item.source,
@@ -320,7 +323,9 @@ async function loadServerHistorySessions() {
   try {
     const data = await fetchAgentApi(`message/agent/sessions?page=1&count=${HISTORY_PAGE_SIZE}`)
     const sessions = Array.isArray(data)
-      ? data.map(item => normalizeServerSession(item as AgentServerSession)).filter(Boolean) as AgentSessionHistoryItem[]
+      ? (data
+          .map(item => normalizeServerSession(item as AgentServerSession))
+          .filter(Boolean) as AgentSessionHistoryItem[])
       : []
     historySessions.value = dedupeHistorySessions(sessions)
     historyHasMore.value = sessions.length >= HISTORY_PAGE_SIZE
@@ -344,14 +349,15 @@ async function loadMoreServerHistorySessions(options?: { done?: (status: Infinit
     const nextPage = historyPage.value + 1
     const data = await fetchAgentApi(`message/agent/sessions?page=${nextPage}&count=${HISTORY_PAGE_SIZE}`)
     const sessions = Array.isArray(data)
-      ? data.map(item => normalizeServerSession(item as AgentServerSession)).filter(Boolean) as AgentSessionHistoryItem[]
+      ? (data
+          .map(item => normalizeServerSession(item as AgentServerSession))
+          .filter(Boolean) as AgentSessionHistoryItem[])
       : []
     const existingIds = new Set(historySessions.value.map(item => item.sessionId))
     historySessions.value = dedupeHistorySessions([
       ...historySessions.value,
       ...sessions.filter(item => !existingIds.has(item.sessionId)),
-    ])
+    ]).slice(0, MAX_LOCAL_HISTORY_SESSIONS)
-      .slice(0, MAX_LOCAL_HISTORY_SESSIONS)
     historyPage.value = nextPage
     historyHasMore.value = sessions.length >= HISTORY_PAGE_SIZE
     persistHistorySessions()
@@ -377,8 +383,10 @@ async function loadServerHistorySession(targetSessionId: string) {
   const session = normalizeServerSession(data as AgentServerSession, true)
   if (!session) throw new Error(t('agentAssistant.historyLoadFailed'))
 
-  historySessions.value = dedupeHistorySessions([session, ...historySessions.value.filter(item => item.sessionId !== targetSessionId)])
+  historySessions.value = dedupeHistorySessions([
-    .slice(0, MAX_LOCAL_HISTORY_SESSIONS)
+    session,
+    ...historySessions.value.filter(item => item.sessionId !== targetSessionId),
+  ]).slice(0, MAX_LOCAL_HISTORY_SESSIONS)
   persistHistorySessions()
 
   return session
@@ -483,8 +491,10 @@ function upsertCurrentSessionHistory() {
     messages: storedMessages,
   }
 
-  historySessions.value = dedupeHistorySessions([nextSession, ...historySessions.value.filter(item => item.sessionId !== sessionId.value)])
+  historySessions.value = dedupeHistorySessions([
-    .slice(0, MAX_LOCAL_HISTORY_SESSIONS)
+    nextSession,
+    ...historySessions.value.filter(item => item.sessionId !== sessionId.value),
+  ]).slice(0, MAX_LOCAL_HISTORY_SESSIONS)
 
   persistHistorySessions()
 }
@@ -1317,11 +1327,7 @@ onScopeDispose(() => {
                   class="agent-assistant-history-infinite"
                   @load="handleHistoryInfiniteLoad"
                 >
-                  <VVirtualScroll
+                  <VVirtualScroll renderless :items="historySessions" :item-height="HISTORY_ITEM_HEIGHT">
-                    renderless
-                    :items="historySessions"
-                    :item-height="HISTORY_ITEM_HEIGHT"
-                  >
                     <template #default="{ item: historySession, itemRef }">
                       <button
                         :ref="itemRef"
@@ -1591,10 +1597,14 @@ onScopeDispose(() => {
             :class="{ 'is-recording': recording }"
             :disabled="!recording && !canRecord"
             :title="
-              recording ? t('agentAssistant.stopRecording', { time: recordingTimeText }) : t('agentAssistant.recordVoice')
+              recording
+                ? t('agentAssistant.stopRecording', { time: recordingTimeText })
+                : t('agentAssistant.recordVoice')
             "
             :aria-label="
-              recording ? t('agentAssistant.stopRecording', { time: recordingTimeText }) : t('agentAssistant.recordVoice')
+              recording
+                ? t('agentAssistant.stopRecording', { time: recordingTimeText })
+                : t('agentAssistant.recordVoice')
             "
             @click="toggleVoiceRecording"
           >
@@ -1638,6 +1648,7 @@ onScopeDispose(() => {
   box-shadow: var(--app-surface-shadow);
   color: rgb(var(--v-theme-primary));
   inline-size: 2.8rem;
+
   /* 入口避开屏幕正中，放到视觉上更轻的下三分之一位置。 */
   inset-block-start: clamp(8rem, 66.666vh, calc(100vh - 8rem));
   inset-inline-end: 0;
@@ -1756,8 +1767,8 @@ onScopeDispose(() => {
 .agent-assistant-history-list {
   block-size: min(26rem, calc(100vh - 7rem));
   max-block-size: min(26rem, calc(100vh - 7rem));
-  overscroll-behavior: contain;
   overflow-y: auto;
+  overscroll-behavior: contain;
   padding-block: 0.35rem;
 }
 
@@ -1779,6 +1790,7 @@ onScopeDispose(() => {
 }
 
 .agent-assistant-history-infinite {
+  gap: 0.25rem;
   min-block-size: 100%;
 }
 
@@ -1807,9 +1819,9 @@ onScopeDispose(() => {
   column-gap: 0.4rem;
   cursor: pointer;
   grid-template-columns: minmax(0, 1fr) auto;
-  min-block-size: 4.75rem;
   inline-size: calc(100% - 0.7rem);
   margin-inline: 0.35rem;
+  min-block-size: 4.75rem;
   padding-block: 0.55rem;
   padding-inline: 0.65rem 0.25rem;
   text-align: start;
@@ -1864,8 +1876,8 @@ onScopeDispose(() => {
 }
 
 .agent-assistant-messages {
-  box-sizing: border-box;
   display: flex;
+  box-sizing: border-box;
   flex-direction: column;
   min-block-size: 0;
   overflow-y: auto;

src/views/subscribe/FullCalendarView.vue

@@ -203,7 +203,7 @@ function getLibraryEpisodeCount(subscribe: Subscribe) {
   const libraryEpisode =
     typeof subscribe.lack_episode === 'number'
       ? totalEpisode - subscribe.lack_episode
-      : subscribe.completed_episode ?? 0
+      : (subscribe.completed_episode ?? 0)
 
   return clampEpisodeCount(libraryEpisode, totalEpisode)
 }
@@ -218,9 +218,7 @@ function getLackEpisodeCount(subscribe: Subscribe) {
 function normalizeEpisodeNumbers(value: unknown) {
   if (!Array.isArray(value)) return []
 
-  return value
+  return value.map(number => Number(number)).filter(number => Number.isFinite(number) && number > 0)
-    .map(number => Number(number))
-    .filter(number => Number.isFinite(number) && number > 0)
 }
 
 function isEnabledFlag(value: unknown) {
@@ -398,10 +396,7 @@ onActivated(() => {
 <template>
   <FullCalendar ref="calendarRef" :options="calendarOptions">
     <template #eventContent="arg">
-      <div
+      <div v-if="arg.event.extendedProps.isDayGroup" class="calendar-day-events">
-        v-if="arg.event.extendedProps.isDayGroup"
-        class="calendar-day-events"
-      >
         <div
           v-for="calendarEvent in arg.event.extendedProps.visibleEvents"
           :key="`${calendarEvent.title}-${calendarEvent.subtitle}-${calendarEvent.calendarSortIndex}`"
@@ -424,10 +419,7 @@ onActivated(() => {
                 </div>
               </template>
             </VImg>
-            <span
+            <span v-if="calendarEvent.libraryState === 'complete'" class="calendar-library-check">
-              v-if="calendarEvent.libraryState === 'complete'"
-              class="calendar-library-check"
-            >
               <VIcon icon="mdi-check" size="12" />
             </span>
           </div>
@@ -679,18 +671,18 @@ onActivated(() => {
 .v-application .fc .fc-event,
 .v-application .fc .fc-h-event,
 .v-application .fc .fc-daygrid-event {
+  padding: 0 !important;
   border-color: transparent;
   background: transparent !important;
   box-shadow: none;
   margin-block-end: 0.3rem;
-  padding: 0 !important;
 }
 
 .v-application .fc .fc-event-main {
+  padding: 0 !important;
   color: inherit;
   font-size: 0.75rem;
   font-weight: 500;
-  padding: 0 !important;
 }
 
 .v-application .fc tbody[role='rowgroup'] > tr > td[role='presentation'] {
@@ -789,12 +781,12 @@ onActivated(() => {
 
 .calendar-event-card {
   display: flex;
-  gap: 0.55rem;
+  overflow: hidden;
   align-items: flex-start;
   padding: 0.4rem;
   border-radius: 8px;
   background: rgba(var(--v-theme-surface), 0.72);
-  overflow: hidden;
+  gap: 0.55rem;
 }
 
 .calendar-day-events {
@@ -806,10 +798,9 @@ onActivated(() => {
 
 .calendar-expand-card {
   display: flex;
-  gap: 0.35rem;
   align-items: center;
   justify-content: center;
-  min-block-size: 2.1rem;
+  padding: 0;
   border: 1px dashed rgba(var(--v-theme-primary), 0.44);
   border-radius: 8px;
   background: rgba(var(--v-theme-primary), 0.08);
@@ -817,8 +808,9 @@ onActivated(() => {
   cursor: pointer;
   font-size: 0.78rem;
   font-weight: 700;
+  gap: 0.35rem;
   inline-size: 100%;
-  padding: 0;
+  min-block-size: 2.1rem;
 }
 
 .calendar-expand-card:hover {
@@ -843,24 +835,24 @@ onActivated(() => {
 
 .calendar-library-check {
   position: absolute;
-  top: 0.18rem;
-  right: 0.18rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid rgb(var(--v-theme-surface));
+  border: 2px solid rgba(var(--v-theme-surface), 0.5);
   border-radius: 50%;
   background: rgb(var(--v-theme-success));
   block-size: 1.15rem;
   color: rgb(var(--v-theme-on-success));
   inline-size: 1.15rem;
+  inset-block-start: 0.18rem;
+  inset-inline-end: 0.18rem;
 }
 
 .calendar-library-check--mobile {
-  top: 0.12rem;
-  right: 0.12rem;
   block-size: 1rem;
   inline-size: 1rem;
+  inset-block-start: 0.12rem;
+  inset-inline-end: 0.12rem;
 }
 
 .calendar-event-content {
@@ -874,23 +866,23 @@ onActivated(() => {
 .calendar-event-title {
   display: -webkit-box;
   overflow: hidden;
+  -webkit-box-orient: vertical;
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
   font-size: 0.88rem;
   font-weight: 700;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
   line-height: 1.28;
   max-block-size: calc(0.88rem * 1.28 * 2);
   overflow-wrap: anywhere;
   white-space: normal;
   word-break: break-word;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
 }
 
 .calendar-event-episode {
   display: inline-flex;
-  align-items: center;
   overflow: hidden;
+  align-items: center;
   color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   column-gap: 0.2rem;
   font-size: 0.72rem;
@@ -903,8 +895,8 @@ onActivated(() => {
 .calendar-event-episode,
 .calendar-event-time {
   display: inline-flex;
-  align-items: center;
   overflow: hidden;
+  align-items: center;
   color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   column-gap: 0.2rem;
   line-height: 1.25;
@@ -915,8 +907,8 @@ onActivated(() => {
 .calendar-event-library-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.18rem 0.3rem;
   align-items: center;
+  gap: 0.18rem 0.3rem;
   min-inline-size: 0;
 }
 
@@ -946,8 +938,8 @@ onActivated(() => {
 .calendar-event-status,
 .calendar-event-progress,
 .calendar-event-time {
-  max-inline-size: 100%;
   overflow: hidden;
+  max-inline-size: 100%;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -960,15 +952,14 @@ onActivated(() => {
 
 .calendar-mobile-episode {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
   display: block;
   overflow: hidden;
-  background: rgba(0, 0, 0, 0.58);
+  background: rgba(0, 0, 0, 58%);
   color: #fff;
   font-size: 0.62rem;
   font-weight: 700;
+  inset-block-end: 0;
+  inset-inline: 0;
   line-height: 1.25;
   padding-block: 0.1rem;
   padding-inline: 0.2rem;
@@ -991,10 +982,10 @@ onActivated(() => {
 
   .calendar-expand-card {
     flex-direction: column;
-    gap: 0.12rem;
-    min-block-size: 0;
     block-size: clamp(60px, 8.7vw, 96px);
+    gap: 0.12rem;
     inline-size: clamp(40px, 5.8vw, 64px);
+    min-block-size: 0;
   }
 
   .calendar-expand-count {