@liujitcn/kratos-admin-system 0.0.28 → 0.0.31

package/dist/package/src/components/{DynamicTranslationCell.vue → DynamicI18nCell.vue}

@@ -1,6 +1,6 @@
 <template>
-  <el-link class="dynamic-translation-cell" type="primary" underline="never" @click="openDialog">
-    <span class="dynamic-translation-cell__source">{{ displaySource || "--" }}</span>
+  <el-link class="dynamic-i18n-cell" type="primary" underline="never" @click="openDialog">
+    <span class="dynamic-i18n-cell__source">{{ displaySource || "--" }}</span>
   </el-link>
 
   <ProDialog
@@ -12,20 +12,20 @@
     :destroy-on-close="true"
     @closed="handleDialogClosed"
   >
-    <el-table v-loading="loading" :data="translationRows" border>
+    <el-table v-loading="loading" :data="i18nRows" border>
       <el-table-column :label="t('common.field.language')" width="150">
         <template #default="{ row }">
           {{ getLanguageLabel(row.locale) }}
         </template>
       </el-table-column>
-      <el-table-column :label="t('system.base.translation.field.translations')" min-width="360">
+      <el-table-column :label="t('system.base.i18n.field.i18ns')" min-width="360">
         <template #default="{ row }">
           <el-input
             v-if="row.editing"
             v-model="row.text"
-            :placeholder="t('system.base.translation.placeholder.text', { language: getLanguageLabel(row.locale) })"
+            :placeholder="t('system.base.i18n.placeholder.text', { language: getLanguageLabel(row.locale) })"
           />
-          <span v-else class="dynamic-translation-dialog__text">
+          <span v-else class="dynamic-i18n-dialog__text">
             {{ row.text || t("common.value.none") }}
           </span>
         </template>
@@ -36,7 +36,7 @@
             {{ t("common.action.edit") }}
           </el-button>
           <template v-else>
-            <el-button link type="primary" :icon="Check" :loading="row.saving" @click="saveTranslation(row)">
+            <el-button link type="primary" :icon="Check" :loading="row.saving" @click="saveI18n(row)">
               {{ t("common.action.save") }}
             </el-button>
             <el-button link :icon="Close" :disabled="row.saving" @click="cancelEdit(row)">
@@ -58,48 +58,48 @@ import { t, useLocaleStore } from "@liujitcn/kratos-admin-core";
 import { loadEnabledBaseLanguages, useEnabledBaseLanguages } from "@liujitcn/kratos-admin-system/api/system/base_language";
 import { defBaseI18nService } from "@liujitcn/kratos-admin-system/api/system/base_i18n";
 import type { BaseI18n } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_i18n";
-import { TranslationTargetType } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_i18n";
-import { getLanguageLabel } from "./dynamicTranslation";
+import { I18nTargetType } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_i18n";
+import { getLanguageLabel } from "./dynamicI18n";
 
-/** DynamicTranslationCellProps 动态翻译列表单元格属性。 */
-interface DynamicTranslationCellProps {
+/** DynamicI18nCellProps 动态翻译列表单元格属性。 */
+interface DynamicI18nCellProps {
   /** 资源源文。 */
   source: string;
   /** 统一翻译表目标类型。 */
-  targetType?: TranslationTargetType;
+  targetType?: I18nTargetType;
   /** 目标资源编号。 */
   targetId?: number;
   /** 资源列表返回的非主语言翻译。 */
-  translations?: BaseI18n[];
+  i18ns?: BaseI18n[];
 }
 
-const props = defineProps<DynamicTranslationCellProps>();
+const props = defineProps<DynamicI18nCellProps>();
 
 const { languages } = useEnabledBaseLanguages();
 const { locale } = useLocaleStore();
 const dialogVisible = ref(false);
 const loading = ref(false);
-const translationRows = ref<DynamicTranslationRow[]>([]);
-const translationOverrides = ref(new Map<string, string>());
+const i18nRows = ref<DynamicI18nRow[]>([]);
+const i18nOverrides = ref(new Map<string, string>());
 
 const displaySource = computed(() => {
-  const override = translationOverrides.value.get(locale.value);
+  const override = i18nOverrides.value.get(locale.value);
   if (override) return override;
-  const translation = props.translations?.find(item => item.locale === locale.value && item.name);
-  return translation?.name || props.source;
+  const i18n = props.i18ns?.find(item => item.locale === locale.value && item.name);
+  return i18n?.name || props.source;
 });
 
 watch(
   () => [props.targetType, props.targetId],
   () => {
-    translationRows.value = [];
-    translationOverrides.value.clear();
+    i18nRows.value = [];
+    i18nOverrides.value.clear();
     dialogVisible.value = false;
   }
 );
 
-/** DynamicTranslationRow 描述弹窗内可编辑的单语言翻译行。 */
-interface DynamicTranslationRow {
+/** DynamicI18nRow 描述弹窗内可编辑的单语言翻译行。 */
+interface DynamicI18nRow {
   /** 翻译记录主键，新增翻译时为空。 */
   id: number;
   /** 语言区域。 */
@@ -117,43 +117,43 @@ interface DynamicTranslationRow {
 /** openDialog 打开翻译编辑弹窗并加载当前资源译文。 */
 async function openDialog() {
   dialogVisible.value = true;
-  await loadTranslations();
+  await loadI18ns();
 }
 
-/** loadTranslations 查询当前资源的翻译并补齐启用语言行。 */
-async function loadTranslations() {
+/** loadI18ns 查询当前资源的翻译并补齐启用语言行。 */
+async function loadI18ns() {
   const targetType = props.targetType;
   const targetId = props.targetId;
   if (!targetType || !targetId) return;
   loading.value = true;
   try {
     await loadEnabledBaseLanguages();
-    const rows = await queryTranslationRows();
-    translationRows.value = rows;
+    const rows = await queryI18nRows();
+    i18nRows.value = rows;
     const missingRows = rows.filter(row => !row.text);
     if (missingRows.length === 0) return;
     if (!props.source) return;
-    const draft = await defBaseI18nService.DraftBaseTranslation({ source: props.source });
-    const translations = new Map(draft.translations.map(item => [item.locale, item.translation]));
+    const draft = await defBaseI18nService.DraftBaseI18n({ source: props.source });
+    const i18ns = new Map(draft.i18ns.map(item => [item.locale, item.i18n]));
     const results = await Promise.allSettled(
       missingRows.map(async row => {
-        const translation = translations.get(row.locale);
-        if (!translation) throw new Error("translation not found");
-        await defBaseI18nService.UpdateBaseTranslation({
+        const i18n = i18ns.get(row.locale);
+        if (!i18n) throw new Error("i18n not found");
+        await defBaseI18nService.UpdateBaseI18n({
           id: row.id,
           target_type: targetType,
           target_id: targetId,
           locale: row.locale,
-          name: translation
+          name: i18n
         });
-        return { row, text: translation };
+        return { row, text: i18n };
       })
     );
     for (const result of results) {
       if (result.status !== "fulfilled") continue;
       result.value.row.text = result.value.text;
       result.value.row.originalText = result.value.text;
-      translationOverrides.value.set(result.value.row.locale, result.value.text);
+      i18nOverrides.value.set(result.value.row.locale, result.value.text);
     }
   } catch {
     ElMessage.error(t("common.message.system_error"));
@@ -162,14 +162,14 @@ async function loadTranslations() {
   }
 }
 
-/** queryTranslationRows 将列表返回的翻译记录补齐为可编辑语言行。 */
-async function queryTranslationRows(): Promise<DynamicTranslationRow[]> {
-  const records = new Map((props.translations ?? []).map(item => [item.locale, item]));
+/** queryI18nRows 将列表返回的翻译记录补齐为可编辑语言行。 */
+async function queryI18nRows(): Promise<DynamicI18nRow[]> {
+  const records = new Map((props.i18ns ?? []).map(item => [item.locale, item]));
   return languages.value
     .filter(item => !item.is_primary)
     .map(item => {
       const record = records.get(item.language_code);
-      const text = translationOverrides.value.get(item.language_code) ?? record?.name ?? "";
+      const text = i18nOverrides.value.get(item.language_code) ?? record?.name ?? "";
       return {
         id: record?.id ?? 0,
         locale: item.language_code,
@@ -182,19 +182,19 @@ async function queryTranslationRows(): Promise<DynamicTranslationRow[]> {
 }
 
 /** startEdit 开启指定语言的编辑状态。 */
-function startEdit(row: DynamicTranslationRow) {
+function startEdit(row: DynamicI18nRow) {
   row.originalText = row.text;
   row.editing = true;
 }
 
 /** cancelEdit 恢复编辑前的内容。 */
-function cancelEdit(row: DynamicTranslationRow) {
+function cancelEdit(row: DynamicI18nRow) {
   row.text = row.originalText;
   row.editing = false;
 }
 
-/** saveTranslation 使用统一更新接口保存指定语言译文。 */
-async function saveTranslation(row: DynamicTranslationRow) {
+/** saveI18n 使用统一更新接口保存指定语言译文。 */
+async function saveI18n(row: DynamicI18nRow) {
   const targetType = props.targetType;
   const targetId = props.targetId;
   if (row.saving || !targetType || !targetId) return;
@@ -204,7 +204,7 @@ async function saveTranslation(row: DynamicTranslationRow) {
   }
   row.saving = true;
   try {
-    await defBaseI18nService.UpdateBaseTranslation({
+    await defBaseI18nService.UpdateBaseI18n({
       id: row.id,
       target_type: targetType,
       target_id: targetId,
@@ -214,7 +214,7 @@ async function saveTranslation(row: DynamicTranslationRow) {
     ElMessage.success(t("common.message.operation_success"));
     row.editing = false;
     row.originalText = row.text;
-    translationOverrides.value.set(row.locale, row.text);
+    i18nOverrides.value.set(row.locale, row.text);
   } catch {
     ElMessage.error(t("common.message.system_error"));
   } finally {
@@ -224,25 +224,25 @@ async function saveTranslation(row: DynamicTranslationRow) {
 
 /** handleDialogClosed 清理弹窗状态，避免复用旧资源译文。 */
 function handleDialogClosed() {
-  translationRows.value = [];
+  i18nRows.value = [];
   loading.value = false;
 }
 </script>
 
 <style scoped>
-.dynamic-translation-cell {
+.dynamic-i18n-cell {
   display: inline-flex;
   align-items: center;
   min-width: 0;
   max-width: 100%;
 }
-.dynamic-translation-cell__source {
+.dynamic-i18n-cell__source {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.dynamic-translation-dialog__text {
+.dynamic-i18n-dialog__text {
   min-width: 0;
   overflow-wrap: anywhere;
 }

package/dist/package/src/components/{DynamicTranslationEditor.vue → DynamicI18nEditor.vue}

@@ -1,6 +1,6 @@
 <template>
-  <div class="translation-editor">
-    <div class="translation-editor__toolbar">
+  <div class="i18n-editor">
+    <div class="i18n-editor__toolbar">
       <el-button
         type="primary"
         size="small"
@@ -9,14 +9,14 @@
         :disabled="!canTranslate"
         @click="handleBatchTranslate"
       >
-        {{ t("system.base.translation.action.batch_translate") }}
+        {{ t("system.base.i18n.action.batch_translate") }}
       </el-button>
     </div>
-    <div v-for="item in localValues" :key="item.locale" class="translation-editor__row">
-      <div class="translation-editor__heading">
+    <div v-for="item in localValues" :key="item.locale" class="i18n-editor__row">
+      <div class="i18n-editor__heading">
         <span>{{ getLanguageLabel(item.locale) }}</span>
       </div>
-      <div class="translation-editor__control" :class="{ 'translation-editor__control--multiline': multiline }">
+      <div class="i18n-editor__control" :class="{ 'i18n-editor__control--multiline': multiline }">
         <el-input
           :model-value="item.text"
           :maxlength="maxlength"
@@ -24,11 +24,11 @@
           :rows="multiline ? 6 : undefined"
           :disabled="translating || translatingLocale === item.locale"
           show-word-limit
-          :placeholder="t('system.base.translation.placeholder.text', { language: getLanguageLabel(item.locale) })"
+          :placeholder="t('system.base.i18n.placeholder.text', { language: getLanguageLabel(item.locale) })"
           @update:model-value="value => updateText(item.locale, value)"
         />
         <el-button
-          class="translation-editor__translate"
+          class="i18n-editor__translate"
           link
           type="primary"
           size="small"
@@ -37,7 +37,7 @@
           :disabled="!props.source || Boolean(item.text) || translating || Boolean(translatingLocale)"
           @click="handleTranslate(item.locale)"
         >
-          {{ t("system.base.translation.action.translate") }}
+          {{ t("system.base.i18n.action.translate") }}
         </el-button>
       </div>
     </div>
@@ -50,26 +50,26 @@ import { ElMessage } from "element-plus";
 import { Promotion } from "@element-plus/icons-vue";
 import { t, useLocaleStore } from "@liujitcn/kratos-admin-core";
 import { defBaseI18nService } from "@liujitcn/kratos-admin-system/api/system/base_i18n";
-import { getLanguageLabel, type DynamicTranslationValue } from "./dynamicTranslation";
+import { getLanguageLabel, type DynamicI18nValue } from "./dynamicI18n";
 
-/** DynamicTranslationEditorProps 动态翻译编辑器属性。 */
-interface DynamicTranslationEditorProps {
-  modelValue: DynamicTranslationValue[];
+/** DynamicI18nEditorProps 动态翻译编辑器属性。 */
+interface DynamicI18nEditorProps {
+  modelValue: DynamicI18nValue[];
   /** 当前语言源文本。 */
   source?: string;
   maxlength?: number;
   multiline?: boolean;
 }
 
-const props = withDefaults(defineProps<DynamicTranslationEditorProps>(), {
+const props = withDefaults(defineProps<DynamicI18nEditorProps>(), {
   source: "",
   maxlength: 100,
   multiline: false
 });
 
 const { locale: currentLocale } = useLocaleStore();
-const emit = defineEmits<{ "update:modelValue": [value: DynamicTranslationValue[]] }>();
-const localValues = ref<DynamicTranslationValue[]>([]);
+const emit = defineEmits<{ "update:modelValue": [value: DynamicI18nValue[]] }>();
+const localValues = ref<DynamicI18nValue[]>([]);
 const translating = ref(false);
 const translatingLocale = ref("");
 const canTranslate = computed(() => Boolean(props.source) && localValues.value.some(item => !item.text && item.locale !== currentLocale.value));
@@ -83,7 +83,7 @@ watch(
 );
 
 /** updateText 更新指定语言的人工译文。 */
-function updateText(locale: DynamicTranslationValue["locale"], text: string) {
+function updateText(locale: DynamicI18nValue["locale"], text: string) {
   const values = localValues.value.map(item => (item.locale === locale ? { ...item, text } : item));
   localValues.value = values;
   emit("update:modelValue", values);
@@ -95,29 +95,29 @@ async function handleBatchTranslate() {
   translating.value = true;
   try {
     const pending = localValues.value.filter(item => !item.text && item.locale !== currentLocale.value);
-    const response = await defBaseI18nService.DraftBaseTranslation({ source: props.source });
-    const translations = new Map(response.translations.map(item => [item.locale, item.translation]));
-    const failed = pending.filter(item => !translations.has(item.locale)).length;
-    if (translations.size) {
+    const response = await defBaseI18nService.DraftBaseI18n({ source: props.source });
+    const i18ns = new Map(response.i18ns.map(item => [item.locale, item.i18n]));
+    const failed = pending.filter(item => !i18ns.has(item.locale)).length;
+    if (i18ns.size) {
       const values = localValues.value.map(item => {
-        const translation = translations.get(item.locale);
-        return translation === undefined ? item : { ...item, text: translation };
+        const i18n = i18ns.get(item.locale);
+        return i18n === undefined ? item : { ...item, text: i18n };
       });
       localValues.value = values;
       emit("update:modelValue", values);
     }
     if (failed) {
       ElMessage.warning(
-        t("system.base.translation.message.batch_translate_partial", {
-          success: translations.size,
+        t("system.base.i18n.message.batch_translate_partial", {
+          success: i18ns.size,
           failed
         })
       );
     } else {
-      ElMessage.success(t("system.base.translation.message.batch_translate_success", { count: translations.size }));
+      ElMessage.success(t("system.base.i18n.message.batch_translate_success", { count: i18ns.size }));
     }
   } catch {
-    ElMessage.error(t("system.base.translation.message.batch_translate_failed"));
+    ElMessage.error(t("system.base.i18n.message.batch_translate_failed"));
   } finally {
     translating.value = false;
   }
@@ -129,15 +129,15 @@ async function handleTranslate(locale: string) {
   if (!item || item.text || item.locale === currentLocale.value || !props.source || translating.value || translatingLocale.value) return;
   translatingLocale.value = locale;
   try {
-    const response = await defBaseI18nService.DraftBaseTranslation({ source: props.source, locale });
-    const translation = response.translations.find(item => item.locale === locale)?.translation;
-    if (!translation) throw new Error("translation not found");
-    const values = localValues.value.map(value => (value.locale === locale ? { ...value, text: translation } : value));
+    const response = await defBaseI18nService.DraftBaseI18n({ source: props.source, locale });
+    const i18n = response.i18ns.find(item => item.locale === locale)?.i18n;
+    if (!i18n) throw new Error("i18n not found");
+    const values = localValues.value.map(value => (value.locale === locale ? { ...value, text: i18n } : value));
     localValues.value = values;
     emit("update:modelValue", values);
-    ElMessage.success(t("system.base.translation.message.translate_success", { language: getLanguageLabel(locale) }));
+    ElMessage.success(t("system.base.i18n.message.translate_success", { language: getLanguageLabel(locale) }));
   } catch {
-    ElMessage.error(t("system.base.translation.message.translate_failed", { language: getLanguageLabel(locale) }));
+    ElMessage.error(t("system.base.i18n.message.translate_failed", { language: getLanguageLabel(locale) }));
   } finally {
     translatingLocale.value = "";
   }
@@ -146,51 +146,51 @@ async function handleTranslate(locale: string) {
 </script>
 
 <style scoped>
-.translation-editor {
+.i18n-editor {
   display: flex;
   flex-direction: column;
   gap: 14px;
   width: 100%;
 }
-.translation-editor__toolbar {
+.i18n-editor__toolbar {
   display: flex;
   justify-content: flex-end;
 }
-.translation-editor__row {
+.i18n-editor__row {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
-.translation-editor__heading,
-.translation-editor__control {
+.i18n-editor__heading,
+.i18n-editor__control {
   display: flex;
   gap: 8px;
   align-items: center;
 }
-.translation-editor__heading {
+.i18n-editor__heading {
   color: var(--el-text-color-regular);
 }
-.translation-editor__control {
+.i18n-editor__control {
   position: relative;
   width: 100%;
 }
-.translation-editor__control :deep(.el-input) {
+.i18n-editor__control :deep(.el-input) {
   flex: 1;
 }
-.translation-editor__control--multiline :deep(.el-textarea__inner) {
+.i18n-editor__control--multiline :deep(.el-textarea__inner) {
   padding-right: 78px;
 }
-.translation-editor__control:not(.translation-editor__control--multiline) :deep(.el-input__suffix) {
+.i18n-editor__control:not(.i18n-editor__control--multiline) :deep(.el-input__suffix) {
   padding-right: 78px;
 }
-.translation-editor__translate {
+.i18n-editor__translate {
   position: absolute;
   z-index: 1;
   top: 50%;
   right: 8px;
   transform: translateY(-50%);
 }
-.translation-editor__control--multiline .translation-editor__translate {
+.i18n-editor__control--multiline .i18n-editor__translate {
   top: 8px;
   transform: none;
 }

package/dist/package/src/components/Notification.vue

@@ -0,0 +1,196 @@
+<template>
+  <el-popover placement="bottom-end" :width="360" trigger="click" @show="refresh">
+    <template #reference>
+      <el-badge class="notification-trigger" :value="badgeValue" :hidden="unreadTotal === 0" :max="99">
+        <el-icon :size="24"><Bell /></el-icon>
+      </el-badge>
+    </template>
+    <div class="notification-panel">
+      <div class="notification-header">
+        <strong>{{ t("system.notification.title") }}</strong>
+        <el-button link type="primary" @click="markAllRead">{{ t("system.notification.action.mark_all_read") }}</el-button>
+      </div>
+      <div class="notification-list">
+        <button
+          v-for="item in notifications"
+          :key="item.id"
+          class="notification-item"
+          :class="{ 'is-unread': !item.read_at }"
+          type="button"
+          @click="openInbox"
+        >
+          <span class="notification-category-icon" :style="{ color: item.category_color || undefined }" aria-hidden="true">
+            <component :is="resolveNotificationIcon(item.category_icon)" />
+          </span>
+          <span class="notification-status" :style="{ backgroundColor: item.category_color || undefined }" aria-hidden="true"></span>
+          <span class="notification-title">{{ item.title }}</span>
+          <span class="notification-time">{{ item.received_at }}</span>
+        </button>
+        <el-empty v-if="notifications.length === 0" :description="t('system.notification.empty')" :image-size="72" />
+      </div>
+      <el-button class="notification-more" text @click="openInbox">{{ t("system.notification.action.view_all") }}</el-button>
+    </div>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { t } from "@liujitcn/kratos-admin-core";
+import { defNotificationService } from "@liujitcn/kratos-admin-system/api/base/notification";
+import { subscribeSseEvent, type SseStop } from "@liujitcn/kratos-admin-system/api/base/sse";
+import type { Notification } from "@liujitcn/kratos-admin-system/rpc/base/v1/notification";
+import { NotificationView } from "@liujitcn/kratos-admin-system/rpc/base/v1/notification";
+
+const router = useRouter();
+const unreadTotal = ref(0);
+const latestDeliveryID = ref(0);
+const notifications = ref<Notification[]>([]);
+let stopSse: SseStop | undefined;
+
+const badgeValue = computed(() => Math.min(unreadTotal.value, 99));
+const notificationIcons = {
+  Bell,
+  Calendar,
+  ChatDotRound,
+  CircleCheckFilled,
+  CollectionTag,
+  DataAnalysis,
+  InfoFilled,
+  List,
+  Lock,
+  Message,
+  Promotion,
+  Setting,
+  User,
+  WarningFilled
+};
+
+onMounted(() => {
+  void refresh();
+  stopSse = subscribeSseEvent(
+    { stream: "base.notification", channel_id: undefined },
+    "inbox.changed",
+    raw => {
+      try {
+        return JSON.parse(raw) as Record<string, unknown>;
+      } catch {
+        return null;
+      }
+    },
+    () => void refresh()
+  );
+});
+
+onBeforeUnmount(() => stopSse?.());
+
+/** 刷新未读汇总和最近消息。 */
+async function refresh() {
+  const [summary, page] = await Promise.all([
+    defNotificationService.GetNotificationSummary({}),
+    defNotificationService.PageNotification({ view: NotificationView.NOTIFICATION_VIEW_INBOX, category_id: undefined, priority: undefined, cursor_id: 0, page_num: 1, page_size: 5 })
+  ]);
+  unreadTotal.value = summary.unread_total;
+  latestDeliveryID.value = summary.latest_delivery_id;
+  notifications.value = page.notifications;
+}
+
+/** 标记全部消息为已读。 */
+async function markAllRead() {
+  if (!latestDeliveryID.value) return;
+  await defNotificationService.MarkAllNotificationRead({ before_delivery_id: latestDeliveryID.value });
+  await refresh();
+}
+
+/** 打开完整收件箱。 */
+function openInbox() {
+  void router.push({ name: "NotificationInbox" });
+}
+
+/** 解析收件箱分类图标，兼容历史数据中的未知图标名。 */
+function resolveNotificationIcon(icon: string) {
+  return notificationIcons[icon as keyof typeof notificationIcons] ?? CollectionTag;
+}
+</script>
+
+<style scoped lang="scss">
+.notification-trigger {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.notification-panel {
+  min-height: 160px;
+}
+
+.notification-list {
+  max-height: min(440px, calc(100vh - 240px));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.notification-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.notification-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 0;
+  border: 0;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  background: transparent;
+  color: var(--el-text-color-primary);
+  cursor: pointer;
+  text-align: left;
+}
+
+.notification-status {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 7px;
+  border-radius: 50%;
+  background: var(--el-color-primary);
+  visibility: hidden;
+}
+
+.notification-category-icon {
+  display: inline-flex;
+  flex: 0 0 18px;
+  align-items: center;
+  justify-content: center;
+  font-size: 17px;
+}
+
+.notification-item.is-unread .notification-status {
+  visibility: visible;
+}
+
+.notification-title {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.notification-time {
+  margin-left: 12px;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.notification-more {
+  width: 100%;
+  margin-top: 8px;
+}
+</style>