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

2026-06-21 23:53:57 +08:00 · 2026-06-19 14:32:33 +08:00
parent 3f70aafdad
commit 6fa1cf28f4
2 changed files with 60 additions and 57 deletions
--- a/src/components/AgentAssistantWidget.vue
+++ b/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)])
-    .slice(0, MAX_LOCAL_HISTORY_SESSIONS)
+  historySessions.value = dedupeHistorySessions([
+    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)])
-    .slice(0, MAX_LOCAL_HISTORY_SESSIONS)
+  historySessions.value = dedupeHistorySessions([
+    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
-                    renderless
-                    :items="historySessions"
-                    :item-height="HISTORY_ITEM_HEIGHT"
-                  >
+                  <VVirtualScroll 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;
--- a/src/views/subscribe/FullCalendarView.vue
+++ b/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
-    .map(number => Number(number))
-    .filter(number => Number.isFinite(number) && number > 0)
+  return value.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
-        v-if="arg.event.extendedProps.isDayGroup"
-        class="calendar-day-events"
-      >
+      <div 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
-              v-if="calendarEvent.libraryState === 'complete'"
-              class="calendar-library-check"
-            >
+            <span 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 {