@flecblog/core-nuxt 0.1.0

package/composables/api/subscribe.ts

@@ -0,0 +1,13 @@
+import { createApi } from './createApi';
+
+const subscribeApi = createApi<{ message: string }>('/subscribe');
+
+/** 邮件订阅 */
+export const subscribe = async (email: string) => {
+  return subscribeApi.post<{ message: string }>('', { email });
+};
+
+/** 退订 */
+export const unsubscribe = async (token: string) => {
+  return subscribeApi.get<{ message: string }>('/unsubscribe', { token });
+};

package/composables/api/sysconfig.ts

@@ -0,0 +1,9 @@
+import type { SettingGroupType } from '@@/types/sysconfig';
+import { createApi } from './createApi';
+
+const settingApi = createApi<Record<string, string>>('');
+
+/** 获取指定分组的配置 */
+export const getSettingGroup = async (group: SettingGroupType) => {
+  return settingApi.get<Record<string, string>>(`/settings/${group}`);
+};

package/composables/api/tag.ts

@@ -0,0 +1,19 @@
+import type { Tag } from '@@/types/tag';
+import { createApi } from './createApi';
+
+const tagApi = createApi<Tag>('/tags');
+
+/** 获取标签列表 */
+export const getTags = async () => {
+  return tagApi.getList();
+};
+
+/** 根据ID获取标签详情 */
+export const getTagById = async (id: number) => {
+  return tagApi.getOne(id);
+};
+
+/** 根据Slug获取标签详情 */
+export const getTagBySlug = async (slug: string) => {
+  return tagApi.getOne(slug);
+};

package/composables/api/theme.ts

@@ -0,0 +1,9 @@
+import type { ThemeSchemaResponse } from '@@/types/theme';
+import { createApi } from './createApi';
+
+const themeApi = createApi<ThemeSchemaResponse>('/themes');
+
+/** 获取当前激活主题的 Schema 和 Config（公开接口） */
+export const getActiveThemeSchema = async (): Promise<ThemeSchemaResponse> => {
+  return themeApi.get<ThemeSchemaResponse>('');
+};

package/composables/api/upload.ts

@@ -0,0 +1,13 @@
+import { createApi } from './createApi';
+
+interface UploadApiResponse {
+  original_name: string;
+  file_url: string;
+}
+
+const uploadApi = createApi<UploadApiResponse>('/upload');
+
+/** 上传文件 */
+export async function uploadFileApi(formData: FormData): Promise<UploadApiResponse> {
+  return uploadApi.post<UploadApiResponse>('', formData);
+}

package/composables/api/user.ts

@@ -0,0 +1,77 @@
+import type {
+  LoginParams,
+  LoginResponse,
+  RegisterParams,
+  RegisterResponse,
+  UserInfo,
+  UpdateProfileParams,
+  ForgotPasswordParams,
+  ResetPasswordParams,
+  ChangePasswordParams,
+  DeactivateAccountParams,
+  RefreshTokenResponse,
+} from '@@/types/user';
+import { createApi } from './createApi';
+
+const authApi = createApi<LoginResponse>('/auth');
+const userApi = createApi<UserInfo>('');
+
+/** 用户登录 */
+export const login = async (data: LoginParams) => {
+  return authApi.post<LoginResponse>('/login', data);
+};
+
+/** 用户注册 */
+export const register = async (data: RegisterParams) => {
+  return authApi.post<RegisterResponse>('/register', data);
+};
+
+/** 刷新Token */
+export const refreshToken = async () => {
+  return authApi.post<RefreshTokenResponse>('/refresh');
+};
+
+/** 获取当前用户信息 */
+export const getUserProfile = async () => {
+  return userApi.get<UserInfo>('/user/profile');
+};
+
+/** 更新用户资料 */
+export const updateUserProfile = async (data: UpdateProfileParams) => {
+  return userApi.patchRequest<UserInfo>('/user/profile', data);
+};
+
+/** 忘记密码 */
+export const forgotPassword = async (data: ForgotPasswordParams) => {
+  await authApi.post('/forgot-password', data);
+};
+
+/** 重置密码 */
+export const resetPassword = async (data: ResetPasswordParams) => {
+  await authApi.post('/reset-password', data);
+};
+
+/** 修改密码 */
+export const changePassword = async (data: ChangePasswordParams) => {
+  await userApi.put('/user/password', data);
+};
+
+/** 设置密码（OAuth 用户首次设置密码） */
+export const setPassword = async (data: { password: string; confirm_password: string }) => {
+  await userApi.post('/user/password', data);
+};
+
+/** 注销账户 */
+export const deactivateAccount = async (data: DeactivateAccountParams) => {
+  await userApi.deleteRequest('/user/deactivate', data);
+};
+
+/** 解绑第三方账号 */
+export const unbindOAuth = async (provider: string) => {
+  await userApi.deleteRequest(`/user/oauth/${provider}`);
+};
+
+/** 轮询微信登录状态 */
+export const pollWechatLoginStatus = async (scene: string) => {
+  return authApi.get<{ status: string; access_token?: string }>(`/wechat/scene/${scene}`);
+};

package/composables/useArticle.ts

@@ -0,0 +1,227 @@
+import {
+  getArticlesForWeb,
+  getArticleBySlug,
+  getRandomArticleSlug as getRandomSlugApi,
+} from '@/composables/api/article';
+import { getCategoryBySlug } from '@/composables/api/category';
+import { getTagBySlug } from '@/composables/api/tag';
+import { countWords, estimateReadingTime } from '@/utils/markdown';
+import type { Article, ArticleQuery } from '@@/types/article';
+import type { Category } from '@@/types/category';
+import type { Tag } from '@@/types/tag';
+
+export function useArticles() {
+  const articles = useState<Article[]>('articles', () => []);
+  const total = useState<number>('articles-total', () => 0);
+  const currentPage = useState<number>('articles-currentPage', () => 1);
+  const pageSize = useState<number>('articles-pageSize', () => 10);
+  const loading = ref(false);
+  const error = ref<Error | null>(null);
+
+  const fetchArticles = async (query: ArticleQuery = {}, forceRefresh = false) => {
+    if (query.page) currentPage.value = query.page;
+    if (!forceRefresh && articles.value.length && !Object.keys(query).length) return;
+
+    loading.value = true;
+    error.value = null;
+    try {
+      const { list, total: resTotal } = await getArticlesForWeb({
+        page: currentPage.value,
+        page_size: pageSize.value,
+        ...query,
+      });
+      articles.value = list || [];
+      total.value = resTotal || 0;
+    } catch (e) {
+      console.error('获取文章列表失败:', e);
+      error.value = e instanceof Error ? e : new Error(String(e));
+      articles.value = [];
+      total.value = 0;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  async function useSSR(key: string, query?: ArticleQuery) {
+    const { data } = await useAsyncData(key, () =>
+      getArticlesForWeb({ page: 1, page_size: pageSize.value, ...query })
+    );
+    if (data.value) {
+      articles.value = data.value.list || [];
+      total.value = data.value.total || 0;
+      currentPage.value = 1;
+    }
+    return { data };
+  }
+
+  async function getRandomArticleSlug(): Promise<string> {
+    return getRandomSlugApi();
+  }
+
+  return {
+    articles,
+    total,
+    currentPage,
+    pageSize,
+    loading,
+    error,
+    fetchArticles,
+    useSSR,
+    getRandomArticleSlug,
+    setPageSize: (size: number) => {
+      pageSize.value = size;
+      currentPage.value = 1;
+    },
+    resetPage: () => (currentPage.value = 1),
+  };
+}
+
+export async function useArticleDetail(slug: string) {
+  const router = useRouter();
+  const article = ref<Article | null>(null);
+  const { setCurrentArticle } = useCurrentArticle();
+  const loading = ref(false);
+  const error = ref<Error | null>(null);
+
+  const { data: initialData, pending } = await useAsyncData(`post-${slug}`, async () => {
+    try {
+      const articleData = await getArticleBySlug(slug);
+      setCurrentArticle(articleData);
+      return articleData;
+    } catch (err: unknown) {
+      const e = err as Error & { response?: { status?: number } };
+      if (e.response?.status === 404) {
+        router.replace('/404');
+      }
+      return null;
+    }
+  });
+  article.value = initialData.value ?? null;
+
+  const wordCount = computed(() => {
+    if (!article.value?.content) return 0;
+    return countWords(article.value.content);
+  });
+
+  const readingTime = computed(() => {
+    if (!article.value?.content) return 0;
+    return estimateReadingTime(article.value.content, 300);
+  });
+
+  const commentCount = computed(() => {
+    return article.value?.comment_count || 0;
+  });
+
+  async function refetch(newSlug: string) {
+    loading.value = true;
+    error.value = null;
+    try {
+      const articleData = await getArticleBySlug(newSlug);
+      setCurrentArticle(articleData);
+      article.value = articleData;
+    } catch (err: unknown) {
+      const e = err as Error & { response?: { status?: number } };
+      error.value = e;
+      if (e.response?.status === 404) {
+        router.replace('/404');
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  return {
+    article,
+    wordCount,
+    readingTime,
+    commentCount,
+    loading: computed(() => pending.value || loading.value),
+    error,
+    refetch,
+  };
+}
+
+type EntityType = 'category' | 'tag';
+
+export async function useEntityArticles(type: EntityType, slug: string) {
+  const router = useRouter();
+  const route = useRoute();
+  const entity = ref<Category | Tag | null>(null);
+  const articles = ref<Article[]>([]);
+  const total = ref(0);
+  const currentPage = ref(1);
+  const pageSize = ref(10);
+  const loading = ref(false);
+  const error = ref<Error | null>(null);
+
+  const fetchEntity = type === 'category' ? getCategoryBySlug : getTagBySlug;
+
+  const { data: initialData, pending } = await useAsyncData(`${type}-${slug}`, async () => {
+    try {
+      const [entityData, articlesData] = await Promise.all([
+        fetchEntity(slug),
+        getArticlesForWeb({ [type]: slug, page: 1, page_size: pageSize.value }),
+      ]);
+      return { entity: entityData, articles: articlesData.list, total: articlesData.total };
+    } catch (err: unknown) {
+      const e = err as Error & { response?: { status?: number } };
+      if (e.response?.status === 404) {
+        router.replace('/404');
+      }
+      return null;
+    }
+  });
+
+  if (initialData.value) {
+    entity.value = initialData.value.entity;
+    articles.value = initialData.value.articles;
+    total.value = initialData.value.total;
+    currentPage.value = 1;
+  }
+
+  function currentSlug() {
+    return route.params.slug as string;
+  }
+
+  async function fetchArticlesForPage(page: number) {
+    currentPage.value = page;
+    loading.value = true;
+    error.value = null;
+    try {
+      const articlesData = await getArticlesForWeb({
+        [type]: currentSlug(),
+        page,
+        page_size: pageSize.value,
+      });
+      articles.value = articlesData.list;
+      total.value = articlesData.total;
+    } catch (err: unknown) {
+      const e = err as Error & { response?: { status?: number } };
+      error.value = e;
+      if (e.response?.status === 404) {
+        router.replace('/404');
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function handlePageChange(page: number) {
+    fetchArticlesForPage(page);
+    if (import.meta.client) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }
+
+  return {
+    entity,
+    articles,
+    total,
+    currentPage,
+    pageSize,
+    loading: computed(() => pending.value || loading.value),
+    error,
+    fetchArticlesForPage,
+    handlePageChange,
+  };
+}

package/composables/useAuth.ts

@@ -0,0 +1,180 @@
+import type { ApiResponse } from '@@/types/request';
+import type { WechatQRState } from '@@/types/auth';
+
+const ACCESS_TOKEN_KEY = 'access_token';
+
+/**
+ * 获取存储的 access token
+ * @returns {string | null} access token字符串或null
+ */
+const getStoredToken = (): string | null => {
+  if (import.meta.server) return null;
+  return localStorage.getItem(ACCESS_TOKEN_KEY);
+};
+
+export const accessToken = ref<string | null>(getStoredToken());
+
+// 响应式登录状态
+export const isLoggedIn = computed(() => !!accessToken.value && accessToken.value !== '');
+
+/**
+ * 设置 access token
+ */
+export const setAccessToken = (access: string): void => {
+  if (import.meta.client) {
+    localStorage.setItem(ACCESS_TOKEN_KEY, access);
+  }
+  accessToken.value = access;
+};
+
+/**
+ * 获取 access token
+ */
+export const getAccessToken = (): string | null => {
+  if (import.meta.client) {
+    return localStorage.getItem(ACCESS_TOKEN_KEY);
+  }
+  return accessToken.value;
+};
+
+/**
+ * 清除 access token
+ */
+export const clearAccessToken = (): void => {
+  if (import.meta.client) {
+    localStorage.removeItem(ACCESS_TOKEN_KEY);
+  }
+  accessToken.value = null;
+};
+
+/**
+ * 登出操作
+ */
+export const logout = (): void => {
+  const token = accessToken.value;
+  clearAccessToken();
+
+  if (token) {
+    const config = useRuntimeConfig();
+    $fetch<ApiResponse<void>>('/auth/logout', {
+      method: 'POST',
+      baseURL: config.public.apiUrl as string,
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+      credentials: 'include',
+    }).catch(() => {});
+  }
+};
+
+/**
+ * 获取响应式的登录状态
+ */
+export const useAuth = () => isLoggedIn;
+
+/**
+ * 构建 OAuth 认证 URL
+ */
+export function buildOAuthUrl(
+  provider: string,
+  options: { redirect?: string; action?: 'bind' } = {}
+): string {
+  const config = useRuntimeConfig();
+  const base = `${config.public.apiUrl}/auth/${provider}`;
+  const params = new URLSearchParams();
+  if (options.action) params.set('action', options.action);
+  if (options.action === 'bind' && accessToken.value) {
+    params.set('token', accessToken.value);
+  }
+  if (options.redirect) params.set('redirect', options.redirect);
+  const qs = params.toString();
+  return qs ? `${base}?${qs}` : base;
+}
+
+// ============================================================
+// 微信扫码登录
+// ============================================================
+
+export function useWechatLogin(options: { onSuccess: () => void }) {
+  const { fetchUserInfo, setToken, pollWechatLoginStatus } = useUser();
+
+  const qrState = ref<WechatQRState>({
+    visible: false,
+    imageUrl: '',
+    scene: '',
+    status: 'idle',
+    error: '',
+  });
+
+  let pollTimer: ReturnType<typeof setInterval> | null = null;
+
+  const clearPoll = () => {
+    if (pollTimer) {
+      clearInterval(pollTimer);
+      pollTimer = null;
+    }
+  };
+
+  const startPoll = (scene: string) => {
+    clearPoll();
+    let elapsed = 0;
+    pollTimer = setInterval(async () => {
+      elapsed += 2;
+      if (elapsed > 300) {
+        qrState.value = { ...qrState.value, status: 'expired', error: '二维码已过期' };
+        clearPoll();
+        return;
+      }
+      try {
+        const res = await pollWechatLoginStatus(scene);
+        if (res.status === 'confirmed' && res.access_token) {
+          clearPoll();
+          setToken(res.access_token);
+          await fetchUserInfo();
+          options.onSuccess();
+        } else if (res.status === 'expired') {
+          qrState.value = { ...qrState.value, status: 'expired', error: '二维码已过期' };
+          clearPoll();
+        }
+      } catch {
+        // 轮询失败静默忽略
+      }
+    }, 2000);
+  };
+
+  const showQR = async () => {
+    qrState.value = { visible: true, imageUrl: '', scene: '', status: 'loading', error: '' };
+    try {
+      const config = useRuntimeConfig();
+      const resp = await $fetch.raw(`${config.public.apiUrl}/auth/wechat/qrcode`, {
+        responseType: 'blob',
+      });
+      const blob = resp._data as Blob;
+      const scene = resp.headers.get('X-Scene') || '';
+      qrState.value = {
+        visible: true,
+        imageUrl: URL.createObjectURL(blob),
+        scene,
+        status: 'scanning',
+        error: '',
+      };
+      startPoll(scene);
+    } catch {
+      qrState.value = { ...qrState.value, status: 'error', error: '获取二维码失败' };
+    }
+  };
+
+  const refresh = () => showQR();
+
+  const dismiss = () => {
+    clearPoll();
+    if (qrState.value.imageUrl) {
+      URL.revokeObjectURL(qrState.value.imageUrl);
+    }
+    qrState.value = { visible: false, imageUrl: '', scene: '', status: 'idle', error: '' };
+  };
+
+  onUnmounted(clearPoll);
+
+  return { qrState, showQR, refresh, dismiss };
+}

package/composables/useComment.ts

@@ -0,0 +1,143 @@
+import type { Comment, CommentTargetType, FlatComment, GuestInfo } from '@@/types/comment';
+
+export function flattenComments(commentList: Comment[], depth = 0): FlatComment[] {
+  const result: FlatComment[] = [];
+
+  commentList.forEach(comment => {
+    result.push({ comment, depth });
+    if (comment.replies && comment.replies.length > 0) {
+      result.push(...flattenComments(comment.replies, depth + 1));
+    }
+  });
+
+  return result;
+}
+
+/** 将扁平评论列表按顶级评论分组 */
+export function groupFlatComments(
+  flatComments: FlatComment[]
+): Array<{ parent: FlatComment; replies: FlatComment[] }> {
+  const groups: Array<{ parent: FlatComment; replies: FlatComment[] }> = [];
+  let currentGroup: { parent: FlatComment; replies: FlatComment[] } | null = null;
+
+  flatComments.forEach(item => {
+    if (item.depth === 0) {
+      currentGroup = { parent: item, replies: [] };
+      groups.push(currentGroup);
+    } else if (currentGroup) {
+      currentGroup.replies.push(item);
+    }
+  });
+
+  return groups;
+}
+
+/** 递归计算嵌套评论总数（含回复） */
+export function countComments(list: Comment[]): number {
+  return list.reduce(
+    (total, c) => total + 1 + (c.replies?.length ? countComments(c.replies) : 0),
+    0
+  );
+}
+
+export interface CommentContext {
+  targetType: Ref<CommentTargetType>;
+  targetKey: Ref<string | number>;
+  addComment: (content: string, guestInfo?: GuestInfo) => Promise<void>;
+  addReply: (commentId: number, content: string, guestInfo?: GuestInfo) => Promise<void>;
+  deleteComment: (commentId: number) => Promise<void>;
+  showLogin: () => void;
+  replyState: {
+    replyingToId: Ref<number | null>;
+    replyingToNickname: Ref<string>;
+    startReply: (commentId: number, nickname: string) => void;
+    cancelReply: () => void;
+  };
+}
+
+const CommentContextKey: InjectionKey<CommentContext> = Symbol('CommentContext');
+
+export function provideCommentContext(context: CommentContext) {
+  provide(CommentContextKey, context);
+}
+
+export function useCommentContext() {
+  const context = inject(CommentContextKey);
+  if (!context) {
+    throw new Error('useCommentContext must be used within a comment provider');
+  }
+  return context;
+}
+
+export async function fillComment(content: string) {
+  const wrapper = document.querySelector('.comment-input');
+  const textarea = wrapper?.querySelector('textarea') as HTMLTextAreaElement | null;
+
+  if (!wrapper || !textarea) return;
+
+  textarea.value = content;
+  textarea.dispatchEvent(new Event('input', { bubbles: true }));
+
+  await new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(resolve));
+  });
+
+  scrollToElement('.comment-input');
+  textarea.focus();
+}
+
+// ============================================================
+// 评论本地存储
+// ============================================================
+
+const GUEST_INFO_KEY = 'guest_info';
+const COMMENT_DRAFT_KEY = 'comment_draft';
+
+/** 加载游客信息（客户端） */
+export function loadGuestInfo(): GuestInfo {
+  if (import.meta.server) return { nickname: '', email: '', website: '' };
+  try {
+    const stored = localStorage.getItem(GUEST_INFO_KEY);
+    if (stored) {
+      const saved = JSON.parse(stored);
+      return {
+        nickname: saved.nickname || '',
+        email: saved.email || '',
+        website: saved.website || '',
+      };
+    }
+  } catch {
+    // localStorage 数据可能损坏，回退到默认值
+  }
+  return { nickname: '', email: '', website: '' };
+}
+
+/** 保存游客信息（客户端） */
+export function saveGuestInfo(info: GuestInfo): void {
+  if (import.meta.client) {
+    localStorage.setItem(GUEST_INFO_KEY, JSON.stringify(info));
+  }
+}
+
+/** 加载评论草稿（客户端） */
+export function loadCommentDraft(): string {
+  if (import.meta.server) return '';
+  return localStorage.getItem(COMMENT_DRAFT_KEY) || '';
+}
+
+/** 保存评论草稿（客户端） */
+export function saveCommentDraft(content: string): void {
+  if (!import.meta.client) return;
+  if (content) {
+    localStorage.setItem(COMMENT_DRAFT_KEY, content);
+  } else {
+    localStorage.removeItem(COMMENT_DRAFT_KEY);
+  }
+}
+
+/** 清除评论草稿（客户端） */
+export function clearCommentDraft(): void {
+  if (import.meta.client) {
+    localStorage.removeItem(COMMENT_DRAFT_KEY);
+  }
+}