+
+
+
+ 
+
+
+
+
+ {{ t('article.table.unread') }}
+
+
-
-
+
- {{ t('setting.ai.responsePreferencesDesc') }} -
+
-
-
-
+
diff --git a/frontend/src/components/modals/settings/reading/ArticleDisplaySettings.vue b/frontend/src/components/modals/settings/reading/ArticleDisplaySettings.vue
index d41d55d6..de2ece53 100644
--- a/frontend/src/components/modals/settings/reading/ArticleDisplaySettings.vue
+++ b/frontend/src/components/modals/settings/reading/ArticleDisplaySettings.vue
@@ -2,7 +2,17 @@
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
import { formatExactDateTime } from '@/utils/date';
-import { PhArticle, PhEyeSlash, PhImage, PhListNumbers, PhSquaresFour } from '@phosphor-icons/vue';
+import {
+ PhArticle,
+ PhBrowser,
+ PhCalendarBlank,
+ PhClock,
+ PhEyeSlash,
+ PhImage,
+ PhListNumbers,
+ PhSquaresFour,
+ PhTimer,
+} from '@phosphor-icons/vue';
import { SettingGroup, SettingWithToggle, SettingWithSelect } from '@/components/settings';
import '@/components/settings/styles.css';
import type { SettingsData } from '@/types/settings';
@@ -50,7 +60,7 @@ function updateSetting(key: keyof SettingsData, value: string | number | boolean
-
- {{ t('setting.database.directoryDescription') }}
-- {{ t('setting.database.directoryCurrent') }} {{ status.data_directory }} -
-- {{ t('setting.database.directoryOverridden') }} -
- -
- {{ t('setting.database.directoryMigrationFailed') }} {{ status.last_error }}
+
+ {{ t('setting.database.directoryCurrent') }} {{ status.data_directory }}
- {{ t('setting.database.directoryPending') }} {{ status.pending_directory }}
+
+ {{ t('setting.database.directoryOverridden') }}
+
+ {{ t('setting.database.directoryMigrationFailed') }} {{ status.last_error }}
{{ t('setting.database.directoryScheduled') }}
+ {{ t('setting.database.directoryPending') }} {{ status.pending_directory }}
+
+ {{ t('setting.database.directoryScheduled') }}
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
+
+
(), {
-
+
@@ -56,4 +66,12 @@ withDefaults(defineProps(), {
.setting-item-action {
@apply shrink-0;
}
+
+.setting-item-column {
+ @apply flex-col items-stretch;
+}
+
+.setting-item-action-column {
+ @apply w-full;
+}
diff --git a/frontend/src/components/settings/base/SubSettingItem.vue b/frontend/src/components/settings/base/SubSettingItem.vue
index 90815e93..47e2ac1b 100644
--- a/frontend/src/components/settings/base/SubSettingItem.vue
+++ b/frontend/src/components/settings/base/SubSettingItem.vue
@@ -7,6 +7,7 @@ interface Props {
description?: string;
required?: boolean;
customClass?: string;
+ layout?: 'row' | 'column';
}
withDefaults(defineProps(), {
@@ -14,13 +15,23 @@ withDefaults(defineProps(), {
description: '',
required: false,
customClass: '',
+ layout: 'row',
});
-
+
+
+
+
-
-
+
+ (), {
@apply flex items-center sm:items-start gap-2 sm:gap-4 p-2 sm:p-2.5 bg-bg-tertiary;
border-radius: var(--ui-radius-surface);
}
+
+.sub-setting-item-column {
+ @apply items-stretch;
+}
From c50474ed74fa875878e3b6a81a725404695cae51 Mon Sep 17 00:00:00 2001
From: WCY-dt <834421194@qq.com>
Date: Mon, 21 Sep 2026 01:31:07 +0800
Subject: [PATCH 08/11] feat: support bulk article read state (#1210)
---
.../components/article/ArticleCardItem.vue | 25 ++-
.../src/components/article/ArticleItem.vue | 25 ++-
.../src/components/article/ArticleList.vue | 152 +++++++++++++++++-
.../components/article/ArticleTableRow.vue | 27 ++--
frontend/src/i18n/locales/en.ts | 8 +
frontend/src/i18n/locales/zh.ts | 8 +
internal/handlers/article/article_bulk.go | 68 ++++++++
.../handlers/article/article_handlers_test.go | 49 ++++++
internal/routes/article_routes.go | 1 +
9 files changed, 348 insertions(+), 15 deletions(-)
diff --git a/frontend/src/components/article/ArticleCardItem.vue b/frontend/src/components/article/ArticleCardItem.vue
index 271d31ff..1418c406 100644
--- a/frontend/src/components/article/ArticleCardItem.vue
+++ b/frontend/src/components/article/ArticleCardItem.vue
@@ -2,7 +2,7 @@
import { withShortcut } from '@/composables/ui/shortcutBindings';
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useI18n } from 'vue-i18n';
-import { PhEyeSlash, PhStar, PhClockCountdown } from '@phosphor-icons/vue';
+import { PhCheckSquare, PhEyeSlash, PhSquare, PhStar, PhClockCountdown } from '@phosphor-icons/vue';
import type { Article } from '@/types/models';
import { useArticleDateFormat } from '@/composables/article/useArticleDateFormat';
import { getProxiedMediaUrl, isMediaCacheEnabled } from '@/utils/mediaProxy';
@@ -12,6 +12,8 @@ import { imageCache } from '@/utils/imageCache';
interface Props {
article: Article;
isActive: boolean;
+ selectionMode?: boolean;
+ selected?: boolean;
}
const props = defineProps();
@@ -121,7 +123,11 @@ function handleImageError(event: Event) {
+
(), {
-
+
@@ -53,4 +64,8 @@ withDefaults(defineProps
+
![]()
();
@@ -40,7 +42,7 @@ const compactMode = computed(() => {
const { enter: handleMouseEnter, leave: handleMouseLeave } = useArticleHoverRead(
() => props.article,
(id) => emit('hoverMarkAsRead', id),
- () => props.disabled === true
+ () => props.disabled === true || props.selectionMode === true
);
// Check if article is from RSSHub feed - O(1) lookup using feedMap
@@ -167,7 +169,11 @@ function handleImageError(event: Event) {
@@ -1467,6 +1611,8 @@ async function markAllVisibleAsRead(): Promise {
:article="article"
:columns="tableColumns"
:is-active="store.currentArticleId === article.id"
+ :selection-mode="selectionMode"
+ :selected="selectedArticleIds.has(article.id)"
@click="selectArticle(article)"
@contextmenu="(event) => handleArticleContextMenu(event, article)"
@observe-element="(element) => observeListArticle(element, article.id)"
@@ -1510,6 +1656,8 @@ async function markAllVisibleAsRead(): Promise {
:is-active="
cardModalArticle?.id === article.id || recentlyClosedCardId === article.id
"
+ :selection-mode="selectionMode"
+ :selected="selectedArticleIds.has(article.id)"
@click="selectArticle(article)"
@contextmenu="(e) => handleArticleContextMenu(e, article)"
@observe-element="(element) => observeListArticle(element, article.id)"
@@ -1562,6 +1710,8 @@ async function markAllVisibleAsRead(): Promise {
:disabled="showingPrevious"
:article="article"
:is-active="store.currentArticleId === article.id"
+ :selection-mode="selectionMode"
+ :selected="selectedArticleIds.has(article.id)"
@click="selectArticle(article)"
@contextmenu="(e) => handleArticleContextMenu(e, article)"
@observe-element="(element) => observeListArticle(element, article.id)"
diff --git a/frontend/src/components/article/ArticleTableRow.vue b/frontend/src/components/article/ArticleTableRow.vue
index 82b2af84..00c3667b 100644
--- a/frontend/src/components/article/ArticleTableRow.vue
+++ b/frontend/src/components/article/ArticleTableRow.vue
@@ -1,7 +1,7 @@
+
+ >(new Set());
+const selectionMode = ref(false);
+const selectedArticleIds = ref>(new Set());
+const isApplyingSelection = ref(false);
// Flag to control when scroll position should be restored
const shouldRestoreScroll = ref(false);
const pendingFeedArticleId = ref(null);
@@ -260,7 +266,7 @@ const { showArticleContextMenu } = useArticleActions(
const { onContextMenu: showSelectionContextMenu } = useArticleSelectionMenu(listRef);
function handleArticleContextMenu(event: MouseEvent, article: Article): void {
- if (showingPrevious.value) {
+ if (showingPrevious.value || selectionMode.value) {
event.preventDefault();
return;
}
@@ -304,6 +310,78 @@ async function preserveRelativeReadPosition(
const visibleArticles = computed(() =>
orderGroupedArticles(filteredArticles.value, store.articleGroupBy, store.articleSortOrder)
);
+const selectedArticleCount = computed(() => selectedArticleIds.value.size);
+const allVisibleArticlesSelected = computed(
+ () =>
+ visibleArticles.value.length > 0 &&
+ visibleArticles.value.every((article) => selectedArticleIds.value.has(article.id))
+);
+
+function enterSelectionMode(): void {
+ selectionMode.value = true;
+}
+
+function exitSelectionMode(): void {
+ selectionMode.value = false;
+ selectedArticleIds.value = new Set();
+}
+
+function toggleArticleSelection(articleId: number): void {
+ const next = new Set(selectedArticleIds.value);
+ if (next.has(articleId)) next.delete(articleId);
+ else next.add(articleId);
+ selectedArticleIds.value = next;
+}
+
+function toggleAllVisibleArticles(): void {
+ const visibleIds = visibleArticles.value.map((article) => article.id);
+ const next = new Set(selectedArticleIds.value);
+ if (allVisibleArticlesSelected.value) visibleIds.forEach((id) => next.delete(id));
+ else visibleIds.forEach((id) => next.add(id));
+ selectedArticleIds.value = next;
+}
+
+function updateSelectedReadState(ids: Set, read: boolean): void {
+ for (const articles of [
+ store.articles,
+ filteredArticlesFromServer.value,
+ aiSearchResults.value,
+ ]) {
+ articles.forEach((article) => {
+ if (ids.has(article.id)) article.is_read = read;
+ });
+ }
+}
+
+async function applySelectedReadState(read: boolean): Promise {
+ if (selectedArticleIds.value.size === 0 || isApplyingSelection.value) return;
+
+ const ids = [...selectedArticleIds.value];
+ isApplyingSelection.value = true;
+ try {
+ const result = await fetch('/api/articles/read-batch', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ ids, read }),
+ });
+ if (!result.ok) throw new Error(`HTTP ${result.status}`);
+
+ updateSelectedReadState(new Set(ids), read);
+ exitSelectionMode();
+ await Promise.allSettled([store.fetchUnreadCounts(), store.fetchFilterCounts()]);
+ window.showToast(
+ t(read ? 'article.action.markedSelectedAsRead' : 'article.action.markedSelectedAsUnread', {
+ count: ids.length,
+ }),
+ 'success'
+ );
+ } catch (error) {
+ console.error('Error updating selected articles:', error);
+ window.showToast(t('article.action.batchReadUpdateFailed'), 'error');
+ } finally {
+ isApplyingSelection.value = false;
+ }
+}
const { displayedArticles, showingPrevious, showLoadingIndicator } = useArticleListTransition(
visibleArticles,
computed(() => store.isLoading)
@@ -596,6 +674,21 @@ watch(
}
);
+watch(
+ () => [store.currentFeedId, store.currentCategory, store.currentFilter, isAISearchActive.value],
+ () => exitSelectionMode()
+);
+
+watch(
+ () => visibleArticles.value.map((article) => article.id),
+ (visibleIds) => {
+ if (!selectionMode.value || selectedArticleIds.value.size === 0) return;
+ const visible = new Set(visibleIds);
+ const next = new Set([...selectedArticleIds.value].filter((id) => visible.has(id)));
+ if (next.size !== selectedArticleIds.value.size) selectedArticleIds.value = next;
+ }
+);
+
// Keyboard/detail navigation can move the selection to a row that is outside
// the rendered window; bring it back in before it is scrolled into view.
watch(
@@ -726,6 +819,10 @@ function onRefreshTooltipHide(): void {
// Article selection and interaction
function selectArticle(article: Article): void {
if (showingPrevious.value) return;
+ if (selectionMode.value) {
+ toggleArticleSelection(article.id);
+ return;
+ }
// Check if we should open in browser based on feed or global settings
const feed = store.feeds.find((f) => f.id === article.feed_id);
let openInBrowserMode = false;
@@ -1184,6 +1281,16 @@ async function markAllVisibleAsRead(): Promise {
>
+
+
+
+
+
+
+