支持公开用户主页、帖子图缩略图与编辑器图组排版。

新增用户签名与活动统计、图片灯箱；正文按需生成缩略图；TipTap 支持多图分组与环绕排版，并注入站点标题避免刷新闪烁。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/editor/ArticleImageExtension.tsx

@@ -0,0 +1,67 @@
+import Image from '@tiptap/extension-image';
+import { mergeAttributes } from '@tiptap/core';
+
+/** 单图展示形态（对齐 Notion / Medium 常见选项） */
+export type ImageDisplay = 'default' | 'wide' | 'float-left' | 'float-right';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    articleImage: {
+      setImageDisplay: (display: ImageDisplay) => ReturnType;
+    };
+  }
+}
+
+/**
+ * 文章图片：在 TipTap Image 上增加 data-display，
+ * 支持通栏 / 左绕排 / 右绕排。
+ */
+export const ArticleImage = Image.extend({
+  name: 'image',
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      display: {
+        default: 'default' satisfies ImageDisplay,
+        parseHTML: (el) =>
+          (el.getAttribute('data-display') as ImageDisplay) || 'default',
+        renderHTML: (attrs) => {
+          const display = (attrs.display as ImageDisplay) || 'default';
+          if (display === 'default') return {};
+          return {
+            'data-display': display,
+            class: `article-img article-img--${display}`,
+          };
+        },
+      },
+    };
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const display = (HTMLAttributes['data-display'] as ImageDisplay) || 'default';
+    const cls = [
+      HTMLAttributes.class,
+      'article-img',
+      display !== 'default' ? `article-img--${display}` : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return [
+      'img',
+      mergeAttributes(HTMLAttributes, {
+        class: cls || undefined,
+        draggable: false,
+      }),
+    ];
+  },
+
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      setImageDisplay: (display) => ({ commands }) =>
+        commands.updateAttributes(this.name, { display }),
+    };
+  },
+});