Kingsmai/pokopiawiki.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(moderation): add AI moderation for user-generated content

Browse Source 
Add AI moderation settings, caching, and status tracking
Require AI approval for Life Posts, Comments, and Discussions
Implement language filtering and moderation status UI
Add retry mechanism for failed moderation checks
This commit is contained in:
xiaomai
2026-05-03 17:08:51 +08:00
parent 590bd6a0ae
commit 18baf7b513
12 changed files with 2217 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
frontend/src/views/AdminView.vue
View File

@@ -29,6 +29,10 @@ import {
import { defaultLocale, getCurrentLocale, loadSystemWordings, setCurrentLocale } from '../i18n';
import {
api,
type AiModerationApiFormat,
type AiModerationAuthMode,
type AiModerationSettings,
type AiModerationSettingsPayload,
type AuthUser,
type AdminUser,
type ConfigType,
@@ -53,6 +57,7 @@ type AdminTab =
| 'users'
| 'roles'
| 'permissions'
| 'aiModeration'
| 'config'
| 'languages'
| 'wordings'
@@ -70,6 +75,7 @@ const adminTabIcons: Record<AdminTab, AppIcon> = {
users: iconProfile,
roles: iconKey,
permissions: iconKey,
aiModeration: iconAdmin,
config: iconAdmin,
languages: iconTranslate,
wordings: iconTranslate,
@@ -105,7 +111,8 @@ const adminNavigationGroups = computed<AdminNavGroup[]>(() => {
label: t('pages.admin.localizationGroup'),
items: [
{ key: 'languages', label: t('pages.admin.languages'), permission: 'admin.languages.read' },
{ key: 'wordings', label: t('pages.admin.wordings'), permission: 'admin.wordings.read' }
{ key: 'wordings', label: t('pages.admin.wordings'), permission: 'admin.wordings.read' },
{ key: 'aiModeration', label: t('pages.admin.aiModeration'), permission: 'admin.ai-moderation.read' }
]
},
{
@@ -150,6 +157,7 @@ const itemRows = ref<Item[]>([]);
const recipeRows = ref<Recipe[]>([]);
const habitatRows = ref<Habitat[]>([]);
const wordingRows = ref<SystemWording[]>([]);
const aiModerationSettings = ref<AiModerationSettings | null>(null);
const currentUser = ref<AuthUser | null>(null);
const busy = ref(false);
const contentLoading = ref(false);
@@ -158,6 +166,16 @@ const configForm = ref({ id: 0, name: '', translations: {} as TranslationMap, ha
const checklistForm = ref({ id: 0, title: '', translations: {} as TranslationMap });
const languageForm = ref({ code: '', name: '', enabled: true, isDefault: false, sortOrder: 0 });
const wordingForm = ref({ key: '', locale: defaultLocale, value: '', defaultValue: '', placeholders: [] as string[] });
const aiModerationForm = ref({
enabled: true,
apiFormat: 'gemini-generate-content' as AiModerationApiFormat,
authMode: 'bearer-token' as AiModerationAuthMode,
endpoint: 'https://ai.example.com/v1beta',
model: 'gemini-2.0-flash-lite',
requestsPerMinute: 10,
apiKey: '',
clearApiKey: false
});
const userRoleForm = ref({ userId: 0, roleIds: [] as number[] });
const roleForm = ref({ id: 0, key: '', name: '', description: '', level: 100, enabled: true });
const rolePermissionForm = ref({ roleId: 0, permissionIds: [] as number[] });
@@ -255,6 +273,14 @@ const activeWordingSurfaceTab = computed({
wordingSurface.value = value === 'frontend' || value === 'backend' || value === 'email' ? value : '';
}
});
const aiModerationApiFormatOptions = computed<Array<{ value: AiModerationApiFormat; label: string }>>(() => [
{ value: 'gemini-generate-content', label: t('pages.admin.aiModerationFormatGemini') },
{ value: 'openai-chat-completions', label: t('pages.admin.aiModerationFormatOpenAi') }
]);
const aiModerationAuthModeOptions = computed<Array<{ value: AiModerationAuthMode; label: string }>>(() => [
{ value: 'bearer-token', label: t('pages.admin.aiModerationAuthBearer') },
{ value: 'query-key', label: t('pages.admin.aiModerationAuthQueryKey') }
]);
const filteredWordingRows = computed(() =>
wordingRows.value.filter((item) => {
if (wordingModule.value && item.module !== wordingModule.value) return false;
@@ -365,6 +391,19 @@ function resetWordingForm() {
wordingForm.value = { key: '', locale: wordingLocale.value || defaultLocale, value: '', defaultValue: '', placeholders: [] };
}
function resetAiModerationForm(settings: AiModerationSettings | null = aiModerationSettings.value) {
aiModerationForm.value = {
enabled: settings?.enabled ?? true,
apiFormat: settings?.apiFormat ?? 'gemini-generate-content',
authMode: settings?.authMode ?? 'bearer-token',
endpoint: settings?.endpoint ?? 'https://ai.example.com/v1beta',
model: settings?.model ?? 'gemini-2.0-flash-lite',
requestsPerMinute: settings?.requestsPerMinute ?? 10,
apiKey: '',
clearApiKey: false
};
}
function resetUserRoleForm() {
userRoleForm.value = { userId: 0, roleIds: [] };
}
@@ -781,6 +820,11 @@ async function loadWordings() {
wordingRows.value = await api.systemWordings({ locale: wordingLocale.value });
}
async function loadAiModerationSettings() {
aiModerationSettings.value = await api.aiModerationSettings();
resetAiModerationForm(aiModerationSettings.value);
}
async function reloadWordings() {
await run(loadWordings);
}
@@ -799,6 +843,27 @@ async function saveWording() {
});
}
async function saveAiModerationSettings() {
await run(async () => {
const payload: AiModerationSettingsPayload = {
enabled: aiModerationForm.value.enabled,
apiFormat: aiModerationForm.value.apiFormat,
authMode: aiModerationForm.value.authMode,
endpoint: aiModerationForm.value.endpoint,
model: aiModerationForm.value.model,
requestsPerMinute: aiModerationForm.value.requestsPerMinute,
clearApiKey: aiModerationForm.value.clearApiKey
};
if (aiModerationForm.value.apiKey.trim()) {
payload.apiKey = aiModerationForm.value.apiKey.trim();
}
aiModerationSettings.value = await api.updateAiModerationSettings(payload);
resetAiModerationForm(aiModerationSettings.value);
});
}
async function saveUserRoles() {
await run(async () => {
userRows.value = await api.updateAdminUserRoles(userRoleForm.value.userId, userRoleForm.value.roleIds);
@@ -863,6 +928,7 @@ async function loadCurrentTab(showSkeleton = false) {
if (activeTab.value === 'permissions') await loadPermissions();
if (activeTab.value === 'languages') await loadLanguages();
if (activeTab.value === 'wordings') await loadWordings();
if (activeTab.value === 'aiModeration') await loadAiModerationSettings();
if (activeTab.value === 'checklist') await loadChecklist();
if (activeTab.value === 'pokemon') await loadPokemon();
if (activeTab.value === 'items') await loadItems();
@@ -1335,6 +1401,110 @@ onMounted(() => {
</div>
</section>
<section v-else-if="canEdit && activeTab === 'aiModeration'" class="detail-section">
<div class="detail-section__header">
<div>
<h2>{{ t('pages.admin.aiModeration') }}</h2>
<p class="meta-line">
{{
aiModerationSettings?.apiKeyConfigured
? t('pages.admin.aiModerationApiKeyConfigured')
: t('pages.admin.aiModerationApiKeyMissing')
}}
</p>
</div>
</div>
<form class="modal-edit-form ai-moderation-form" @submit.prevent="saveAiModerationSettings">
<div class="check-row">
<label>
<input v-model="aiModerationForm.enabled" type="checkbox" :disabled="busy || !can('admin.ai-moderation.update')" />
{{ t('pages.admin.aiModerationEnabled') }}
</label>
</div>
<div class="field">
<label for="ai-moderation-format">{{ t('pages.admin.aiModerationFormat') }}</label>
<select
id="ai-moderation-format"
v-model="aiModerationForm.apiFormat"
:disabled="busy || !can('admin.ai-moderation.update')"
required
>
<option v-for="option in aiModerationApiFormatOptions" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
</div>
<div class="field">
<label for="ai-moderation-auth-mode">{{ t('pages.admin.aiModerationAuthMode') }}</label>
<select
id="ai-moderation-auth-mode"
v-model="aiModerationForm.authMode"
:disabled="busy || !can('admin.ai-moderation.update')"
required
>
<option v-for="option in aiModerationAuthModeOptions" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
</div>
<div class="field">
<label for="ai-moderation-endpoint">{{ t('pages.admin.aiModerationEndpoint') }}</label>
<input
id="ai-moderation-endpoint"
v-model="aiModerationForm.endpoint"
:disabled="busy || !can('admin.ai-moderation.update')"
required
/>
</div>
<div class="field">
<label for="ai-moderation-model">{{ t('pages.admin.aiModerationModel') }}</label>
<input
id="ai-moderation-model"
v-model="aiModerationForm.model"
:disabled="busy || !can('admin.ai-moderation.update')"
required
/>
</div>
<div class="field">
<label for="ai-moderation-rpm">{{ t('pages.admin.aiModerationRpm') }}</label>
<input
id="ai-moderation-rpm"
v-model.number="aiModerationForm.requestsPerMinute"
type="number"
min="1"
max="60"
:disabled="busy || !can('admin.ai-moderation.update')"
required
/>
</div>
<div class="field">
<label for="ai-moderation-api-key">{{ t('pages.admin.aiModerationApiKey') }}</label>
<input
id="ai-moderation-api-key"
v-model="aiModerationForm.apiKey"
type="password"
autocomplete="new-password"
:disabled="busy || !can('admin.ai-moderation.update')"
/>
</div>
<div class="check-row">
<label>
<input
v-model="aiModerationForm.clearApiKey"
type="checkbox"
:disabled="busy || !can('admin.ai-moderation.update') || !aiModerationSettings?.apiKeyConfigured"
/>
{{ t('pages.admin.aiModerationClearApiKey') }}
</label>
</div>
<button v-if="can('admin.ai-moderation.update')" class="ui-button ui-button--primary" type="submit" :disabled="busy">
<Icon :icon="iconSave" class="ui-icon" aria-hidden="true" />
{{ busy ? t('common.saving') : t('common.save') }}
</button>
</form>
</section>
<section v-else-if="canEdit && activeTab === 'pokemon'" class="detail-section">
<h2>{{ t('pages.admin.pokemonList') }}</h2>
<ReorderableList

141
frontend/src/views/LifeView.vue
View File

@@ -6,6 +6,7 @@ import FilterPanel from '../components/FilterPanel.vue';
import Modal from '../components/Modal.vue';
import PageHeader from '../components/PageHeader.vue';
import Skeleton from '../components/Skeleton.vue';
import StatusBadge from '../components/StatusBadge.vue';
import StatusMessage from '../components/StatusMessage.vue';
import Tabs, { type TabOption } from '../components/Tabs.vue';
import TagsSelect from '../components/TagsSelect.vue';
@@ -31,7 +32,9 @@ import {
getAuthToken,
onAuthTokenChange,
setAuthToken,
type AiModerationStatus,
type AuthUser,
type Language,
type LifeComment,
type LifePost,
type LifeReactionType,
@@ -52,6 +55,7 @@ type LifeCommentPageState = {
const { locale, t } = useI18n();
const posts = ref<LifePost[]>([]);
const lifeTags = ref<NamedEntity[]>([]);
const languages = ref<Language[]>([]);
const currentUser = ref<AuthUser | null>(null);
const loading = ref(true);
const loadingMore = ref(false);
@@ -60,6 +64,7 @@ const busy = ref(false);
const searchDraft = ref('');
const submittedSearch = ref('');
const activeTagId = ref('all');
const activeLanguageCode = ref('all');
const body = ref('');
const selectedTagIds = ref<string[]>([]);
const editingPostId = ref<number | null>(null);
@@ -76,6 +81,8 @@ const commentErrors = ref<Record<string, string>>({});
const reactionPickerPostId = ref<number | null>(null);
const reactionBusyPostId = ref<number | null>(null);
const reactionErrors = ref<Record<number, string>>({});
const moderationBusyPostId = ref<number | null>(null);
const moderationErrors = ref<Record<number, string>>({});
const bodyInput = ref<HTMLTextAreaElement | null>(null);
const loadMoreSentinel = ref<HTMLElement | null>(null);
const lifePostPageSize = 20;
@@ -91,6 +98,7 @@ const nextCursor = ref<string | null>(null);
const hasMorePosts = ref(false);
const loadMorePaused = ref(false);
const allTagValue = 'all';
const allLanguageValue = 'all';
const reactionOptions = [
{ type: 'like', icon: iconReactionLike, labelKey: 'pages.life.reactionLike' },
@@ -113,10 +121,17 @@ const selectedFeedTagId = computed(() => {
const tagId = Number(activeTagId.value);
return activeTagId.value === allTagValue || !Number.isInteger(tagId) || tagId <= 0 ? undefined : tagId;
});
const selectedFeedLanguageCode = computed(() =>
activeLanguageCode.value === allLanguageValue ? undefined : activeLanguageCode.value
);
const tagFilterOptions = computed<TabOption[]>(() => [
{ value: allTagValue, label: t('pages.life.allTags') },
...lifeTags.value.map((tag) => ({ value: String(tag.id), label: tag.name }))
]);
const languageFilterOptions = computed<TabOption[]>(() => [
{ value: allLanguageValue, label: t('pages.life.allLanguages') },
...languages.value.map((language) => ({ value: language.code, label: language.name }))
]);
const postModalTitle = computed(() => (isEditing.value ? t('pages.life.editPost') : t('pages.life.newPost')));
const submitLabel = computed(() => {
if (busy.value) return isEditing.value ? t('pages.life.updating') : t('pages.life.publishing');
@@ -156,6 +171,21 @@ async function loadLifeTags() {
}
}
async function loadLanguages() {
try {
languages.value = (await api.languages()).filter((language) => language.enabled);
if (
activeLanguageCode.value !== allLanguageValue &&
!languages.value.some((language) => language.code === activeLanguageCode.value)
) {
activeLanguageCode.value = allLanguageValue;
}
} catch (error) {
loadError.value = error instanceof Error && error.message ? error.message : t('errors.loadFailed');
}
}
async function loadPosts() {
const requestId = ++postsRequestId;
loading.value = true;
@@ -166,7 +196,12 @@ async function loadPosts() {
loadMorePaused.value = false;
try {
const page = await api.lifePosts({ limit: lifePostPageSize, search: searchQuery.value, tagId: selectedFeedTagId.value });
const page = await api.lifePosts({
limit: lifePostPageSize,
search: searchQuery.value,
tagId: selectedFeedTagId.value,
language: selectedFeedLanguageCode.value
});
if (requestId !== postsRequestId) {
return;
}
@@ -202,7 +237,13 @@ async function loadMorePosts() {
loadError.value = '';
try {
const page = await api.lifePosts({ cursor, limit: lifePostPageSize, search: searchQuery.value, tagId: selectedFeedTagId.value });
const page = await api.lifePosts({
cursor,
limit: lifePostPageSize,
search: searchQuery.value,
tagId: selectedFeedTagId.value,
language: selectedFeedLanguageCode.value
});
if (requestId !== postsRequestId) {
return;
}
@@ -233,7 +274,8 @@ function resetForm() {
function payload() {
return {
body: body.value.trim(),
tagIds: selectedLifeTagIds()
tagIds: selectedLifeTagIds(),
languageCode: selectedFeedLanguageCode.value ?? null
};
}
@@ -275,7 +317,9 @@ function matchesCurrentFilters(post: LifePost) {
const tagId = selectedFeedTagId.value;
const matchesSearch = keyword === '' || post.body.toLowerCase().includes(keyword);
const matchesTag = tagId === undefined || post.tags.some((tag) => tag.id === tagId);
return matchesSearch && matchesTag;
const matchesLanguage =
selectedFeedLanguageCode.value === undefined || post.moderationLanguageCode === selectedFeedLanguageCode.value;
return matchesSearch && matchesTag && matchesLanguage;
}
function openCreatePostModal() {
@@ -412,6 +456,50 @@ function reactionCountLabel(post: LifePost, type: LifeReactionType) {
});
}
function moderationLabel(status: AiModerationStatus) {
const labels: Record<AiModerationStatus, string> = {
unreviewed: t('pages.life.moderationUnreviewed'),
reviewing: t('pages.life.moderationReviewing'),
approved: t('pages.life.moderationApproved'),
rejected: t('pages.life.moderationRejected'),
failed: t('pages.life.moderationFailed')
};
return labels[status];
}
function moderationTone(status: AiModerationStatus) {
const tones: Record<AiModerationStatus, 'info' | 'success' | 'warning' | 'danger' | 'neutral'> = {
unreviewed: 'neutral',
reviewing: 'info',
approved: 'success',
rejected: 'danger',
failed: 'warning'
};
return tones[status];
}
function canRetryModeration(post: LifePost) {
return post.moderationStatus !== 'approved' && canManage(post);
}
async function retryPostModeration(post: LifePost) {
moderationBusyPostId.value = post.id;
const nextErrors = { ...moderationErrors.value };
delete nextErrors[post.id];
moderationErrors.value = nextErrors;
try {
replacePost(await api.retryLifePostModeration(post.id));
} catch (error) {
moderationErrors.value = {
...moderationErrors.value,
[post.id]: error instanceof Error && error.message ? error.message : t('pages.life.moderationRetryFailed')
};
} finally {
moderationBusyPostId.value = null;
}
}
function replacePost(updatedPost: LifePost) {
if (!matchesCurrentFilters(updatedPost)) {
posts.value = posts.value.filter((post) => post.id !== updatedPost.id);
@@ -460,7 +548,7 @@ async function loadComments(post: LifePost, reset = false) {
});
try {
const page = await api.lifeComments(post.id, { limit: lifeCommentPageSize, cursor });
const page = await api.lifeComments(post.id, { limit: lifeCommentPageSize, cursor, language: selectedFeedLanguageCode.value });
const nextItems = reset || !existing.loaded ? page.items : mergeComments(existing.items, page.items);
setCommentPage(post.id, {
items: nextItems,
@@ -584,7 +672,7 @@ async function toggleDefaultReaction(post: LifePost) {
}
async function toggleReaction(post: LifePost, reactionType: LifeReactionType) {
if (!canUseReactions()) {
if (!canUseReactions() || post.moderationStatus !== 'approved') {
return;
}
@@ -656,7 +744,10 @@ async function submitComment(post: LifePost) {
clearCommentError(key);
try {
const comment = await api.createLifeComment(post.id, { body: nextBody });
const comment = await api.createLifeComment(post.id, {
body: nextBody,
languageCode: selectedFeedLanguageCode.value ?? post.moderationLanguageCode
});
const nextTotal = commentCount(post) + 1;
post.commentCount = nextTotal;
updateCommentPage(post, (page) => ({
@@ -686,7 +777,10 @@ async function submitReply(post: LifePost, comment: LifeComment) {
clearCommentError(key);
try {
const reply = await api.createLifeCommentReply(post.id, comment.id, { body: nextBody });
const reply = await api.createLifeCommentReply(post.id, comment.id, {
body: nextBody,
languageCode: selectedFeedLanguageCode.value ?? comment.moderationLanguageCode ?? post.moderationLanguageCode
});
const nextTotal = commentCount(post) + 1;
post.commentCount = nextTotal;
comment.replies.push(reply);
@@ -788,7 +882,13 @@ watch([loadMoreSentinel, hasMorePosts, loading, loadingMore, loadMorePaused], ob
watch(activeTagId, () => {
void loadPosts();
});
watch(activeLanguageCode, () => {
expandedComments.value = {};
commentPages.value = {};
void loadPosts();
});
watch(locale, () => {
void loadLanguages();
void loadLifeTags();
void loadPosts();
});
@@ -797,6 +897,7 @@ onMounted(() => {
document.addEventListener('click', closeReactionPickerFromDocument);
document.addEventListener('keydown', closeReactionPickerFromKeyboard);
void loadCurrentUser();
void loadLanguages();
void loadLifeTags();
void loadPosts();
removeAuthListener = onAuthTokenChange(() => {
@@ -913,6 +1014,7 @@ onUnmounted(() => {
</div>
</Modal>
<Tabs id="life-language-filter" v-model="activeLanguageCode" :tabs="languageFilterOptions" :label="t('pages.life.languages')" />
<Tabs id="life-tag-filter" v-model="activeTagId" :tabs="tagFilterOptions" :label="t('pages.life.tags')" />
<section class="life-feed" :aria-busy="loading || loadingMore" :aria-label="t('pages.life.kicker')">
@@ -964,6 +1066,21 @@ onUnmounted(() => {
</div>
</header>
<div class="life-post__moderation">
<StatusBadge :label="moderationLabel(post.moderationStatus)" :tone="moderationTone(post.moderationStatus)" compact />
<button
v-if="canRetryModeration(post)"
class="ui-button ui-button--ghost ui-button--small"
type="button"
:disabled="moderationBusyPostId === post.id"
@click="retryPostModeration(post)"
>
<Icon :icon="iconWarning" class="ui-icon" aria-hidden="true" />
{{ moderationBusyPostId === post.id ? t('pages.life.moderationRetrying') : t('pages.life.moderationRetry') }}
</button>
</div>
<p v-if="moderationErrors[post.id]" class="life-form__error" role="alert">{{ moderationErrors[post.id] }}</p>
<p class="life-post__body">{{ post.body }}</p>
<div v-if="post.tags.length" class="life-post__tags" :aria-label="t('pages.life.tags')">
@@ -981,7 +1098,7 @@ onUnmounted(() => {
:aria-controls="`life-reactions-${post.id}`"
:aria-expanded="reactionPickerPostId === post.id"
:aria-label="reactionButtonLabel(post)"
:disabled="!canReact || reactionBusyPostId !== null"
:disabled="!canReact || post.moderationStatus !== 'approved' || reactionBusyPostId !== null"
@click="toggleDefaultReaction(post)"
@contextmenu="handleReactionContextMenu($event, post.id)"
@keydown="handleReactionKeydown($event, post.id)"
@@ -996,7 +1113,7 @@ onUnmounted(() => {
:aria-controls="`life-reactions-${post.id}`"
:aria-expanded="reactionPickerPostId === post.id"
:aria-label="t('pages.life.chooseReaction')"
:disabled="!canReact || reactionBusyPostId !== null"
:disabled="!canReact || post.moderationStatus !== 'approved' || reactionBusyPostId !== null"
@click="toggleReactionPicker(post.id)"
@contextmenu="handleReactionContextMenu($event, post.id)"
@keydown="handleReactionKeydown($event, post.id)"
@@ -1021,7 +1138,7 @@ onUnmounted(() => {
type="button"
:aria-pressed="post.myReaction === option.type"
:aria-label="reactionOptionLabel(post, option.type)"
:disabled="isReactionBusy(post.id)"
:disabled="post.moderationStatus !== 'approved' || isReactionBusy(post.id)"
@click="toggleReaction(post, option.type)"
>
<Icon :icon="option.icon" class="ui-icon" aria-hidden="true" />
@@ -1036,6 +1153,7 @@ onUnmounted(() => {
:aria-controls="`life-comments-${post.id}`"
:aria-expanded="areCommentsExpanded(post.id)"
:aria-label="areCommentsExpanded(post.id) ? t('pages.life.hideComments') : t('pages.life.comment')"
:disabled="post.moderationStatus !== 'approved'"
@click="toggleComments(post)"
>
<Icon :icon="iconComment" class="ui-icon" aria-hidden="true" />
@@ -1070,6 +1188,7 @@ onUnmounted(() => {
:aria-controls="`life-comments-${post.id}`"
:aria-expanded="areCommentsExpanded(post.id)"
:aria-label="t('pages.life.commentsCount', { count: commentCount(post) })"
:disabled="post.moderationStatus !== 'approved'"
@click="toggleComments(post)"
>
<Icon :icon="iconComment" class="ui-icon" aria-hidden="true" />