插件前端组件与工具文档

import { defineExtensionViteConfig } from "@chatbuddy-ai/web-core/vite/extension";

import { defineExtensionViteConfig } from "@chatbuddy-ai/web-core/vite/extension"; import packageJson from "./package.json"; export default defineExtensionViteConfig(packageJson, { server: { open: true, },
});

import { defineRouteOption } from "@chatbuddy-ai/web-core";

import { defineRouteOption } from "@chatbuddy-ai/web-core"; import packageJson from "./../../package.json";
import ArticleDetailPage from "./pages/article/[id]";
import ArticleListPage from "./pages/console/article/list";
import BlogIndexPage from "./pages/index"; export const routeOption = defineRouteOption({ base: `extension/${packageJson.name}`, identifier: packageJson.name, routes: [ { index: true, element: <BlogIndexPage />, }, { path: "article/:id", element: <ArticleDetailPage />, }, ], consoleMenus: [ { title: "文章管理", path: "/", icon: "file-text", }, ], consoleRoutes: [ { index: true, element: <ArticleListPage />, }, ],
});

import { createPluginHttpClients } from "@chatbuddy-ai/services";

import { createPluginHttpClients } from "@chatbuddy-ai/services"; const { apiHttpClient, consoleHttpClient } = createPluginHttpClients; export { apiHttpClient, consoleHttpClient };

import type { MutationOptionsUtil, PaginatedQueryOptionsUtil, PaginatedResponse, QueryOptionsUtil,
} from "@chatbuddy-ai/web-types";
import { useMutation, useQuery } from "@tanstack/react-query"; import { consoleHttpClient } from "../base";
import type { Article, CreateArticleParams, QueryArticleParams } from "../types/article"; export function useArticleListQuery( params?: QueryArticleParams, options?: PaginatedQueryOptionsUtil<Article>,
) { return useQuery({ queryKey: ["articles", "list", params], queryFn: => consoleHttpClient.get<PaginatedResponse<Article>>("/article", { params }), ...options, });
} export function useArticleDetailQuery(id: string, options?: QueryOptionsUtil<Article>) { return useQuery<Article>({ queryKey: ["articles", "detail", id], queryFn: => consoleHttpClient.get<Article>(`/article/${id}`), enabled: !!id && options?.enabled !== false, ...options, });
} export function useCreateArticleMutation( options?: MutationOptionsUtil<Partial<Article>, CreateArticleParams>,
) { return useMutation<Partial<Article>, Error, CreateArticleParams>({ mutationFn: (data) => consoleHttpClient.post<Partial<Article>>("/article", data), ...options, });
}

import { Button } from "@chatbuddy-ai/ui/components/ui/button";

<Button type="submit" variant="outline" size="sm" loading={isSubmitting}> 提交
</Button>

import { Spinner } from "@chatbuddy-ai/ui/components/ui/spinner";

<Spinner className="size-4" />

import { Empty, EmptyContent, EmptyDescription, EmptyMedia, EmptyTitle,
} from "@chatbuddy-ai/ui/components/ui/empty";

<Empty> <EmptyMedia variant="icon"> <Search className="size-5" /> </EmptyMedia> <EmptyContent> <EmptyTitle>暂无文章</EmptyTitle> <EmptyDescription>创建第一篇文章后会显示在这里。</EmptyDescription> </EmptyContent>
</Empty>

import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldSet,
} from "@chatbuddy-ai/ui/components/ui/field";

<FieldSet> <FieldGroup> <Field> <FieldLabel>标题</FieldLabel> <FieldContent> <Input value={title} onChange={(event) => setTitle(event.target.value)} /> <FieldDescription>最多 200 个字符。</FieldDescription> </FieldContent> </Field> </FieldGroup>
</FieldSet>

import { StatusBadge } from "@chatbuddy-ai/ui/components/ui/status-badge";

<StatusBadge active={article.status === "published"} activeText="已发布" inactiveText="草稿" />

import { TimeText } from "@chatbuddy-ai/ui/components/ui/time-text";

<TimeText value={article.createdAt} variant="datetime" />
<TimeText value={article.updatedAt} variant="relative" />

import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText,
} from "@chatbuddy-ai/ui/components/ui/input-group";

<InputGroup> <InputGroupAddon> <Search className="size-4" /> </InputGroupAddon> <InputGroupInput placeholder="搜索文章" /> <InputGroupButton size="sm">搜索</InputGroupButton>
</InputGroup>

import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem, ComboboxTrigger,
} from "@chatbuddy-ai/ui/components/ui/combobox";

import { DataTableFacetedFilter } from "@chatbuddy-ai/ui/components/ui/data-table-faceted-filter";

<DataTableFacetedFilter title="状态" selectedValue={status} onSelectionChange={setStatus} options={[ { label: "已发布", value: "published" }, { label: "草稿", value: "draft" }, ]}
/>

import { ImageUpload } from "@chatbuddy-ai/ui/components/ui/image-upload";

<ImageUpload value={cover} accept="image/*" maxSize={5 * 1024 * 1024} onChange={(url) => setCover(url)}
/>

import { Upload, useUpload } from "@chatbuddy-ai/ui/components/upload";

import { useUploadFile } from "@chatbuddy-ai/ui/hooks/use-upload-file";

import { detectFileType, invalidateStorageConfigCache, uploadFile, uploadFileAuto, uploadFiles, uploadFilesAuto, uploadInitFile,
} from "@chatbuddy-ai/services/shared";

import { Message, MessageContent } from "@chatbuddy-ai/ui/components/ai-elements/message";

<Message from="assistant"> <MessageContent>生成完成。</MessageContent>
</Message>

import { CodeBlock, CodeBlockCopyButton, CodeBlockHeader, CodeBlockTitle,
} from "@chatbuddy-ai/ui/components/ai-elements/code-block";

<CodeBlock code={source} language="tsx" showLineNumbers> <CodeBlockHeader> <CodeBlockTitle>example.tsx</CodeBlockTitle> <CodeBlockCopyButton /> </CodeBlockHeader>
</CodeBlock>

import { Tool, ToolContent, ToolHeader, ToolOutput,
} from "@chatbuddy-ai/ui/components/ai-elements/tool";

<Tool> <ToolHeader type="tool-call" state="output-available" /> <ToolContent> <ToolOutput output="执行完成" /> </ToolContent>
</Tool>

import { CopyButton } from "@chatbuddy-ai/ui/components/copy-button";

<CopyButton value={article.url} size="icon-sm" />

import { FileFormatIcon } from "@chatbuddy-ai/ui/components/file-format-icon";

<FileFormatIcon filename={file.name} />

import { LucideIcon } from "@chatbuddy-ai/ui/components/lucide-icon";

<LucideIcon name="file-text" className="size-4" />

import { IconPicker } from "@chatbuddy-ai/ui/components/icon-picker";

<IconPicker value={icon} onChange={setIcon} placeholder="选择菜单图标" />

import Loader from "@chatbuddy-ai/ui/components/loader";
import ReloadWindow from "@chatbuddy-ai/ui/components/reload-window";
import { CountUp } from "@chatbuddy-ai/ui/components/count-up";
import { SplitText } from "@chatbuddy-ai/ui/components/split-text";

import { useAlertDialog } from "@chatbuddy-ai/ui/hooks/use-alert-dialog";

const { confirm } = useAlertDialog; await confirm({ title: "移除文章", description: "移除后不可恢复，确认继续？",
});

import { usePagination } from "@chatbuddy-ai/ui/hooks/use-pagination";

import { useCopy } from "@chatbuddy-ai/hooks";

const { copy, isCopying } = useCopy; await copy(article.url);

import { useDocumentHead } from "@chatbuddy-ai/hooks";

useDocumentHead({ title: "文章管理",
});

import { useAuthStore, useConfigStore, useUserConfigStore } from "@chatbuddy-ai/stores";

const userInfo = useAuthStore((state) => state.auth.userInfo);
const websiteConfig = useConfigStore((state) => state.config);

import type { MutationOptionsUtil, PaginatedQueryOptionsUtil, PaginatedResponse, QueryOptionsUtil,
} from "@chatbuddy-ai/web-types";