插件前端组件与工具文档

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

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

import packageJson from "./package.json";

export default defineExtensionViteConfig(packageJson, {
    server: {
        open: true,
    },
});

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

import { defineRouteOption } from "@buildingai/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 "@buildingai/services";

import { createPluginHttpClients } from "@buildingai/services";

const { apiHttpClient, consoleHttpClient } = createPluginHttpClients();

export { apiHttpClient, consoleHttpClient };

import type {
    MutationOptionsUtil,
    PaginatedQueryOptionsUtil,
    PaginatedResponse,
    QueryOptionsUtil,
} from "@buildingai/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 "@buildingai/ui/components/ui/button";

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

import { Spinner } from "@buildingai/ui/components/ui/spinner";

<Spinner className="size-4" />

import {
    Empty,
    EmptyContent,
    EmptyDescription,
    EmptyMedia,
    EmptyTitle,
} from "@buildingai/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 "@buildingai/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 "@buildingai/ui/components/ui/status-badge";

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

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

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

import {
    InputGroup,
    InputGroupAddon,
    InputGroupButton,
    InputGroupInput,
    InputGroupText,
} from "@buildingai/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 "@buildingai/ui/components/ui/combobox";

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

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

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

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

import { Upload, useUpload } from "@buildingai/ui/components/upload";

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

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

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

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

import {
    CodeBlock,
    CodeBlockCopyButton,
    CodeBlockHeader,
    CodeBlockTitle,
} from "@buildingai/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 "@buildingai/ui/components/ai-elements/tool";

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

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

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

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

<FileFormatIcon filename={file.name} />

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

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

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

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

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

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

const { confirm } = useAlertDialog();

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

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

import { useCopy } from "@buildingai/hooks";

const { copy, isCopying } = useCopy();

await copy(article.url);

import { useDocumentHead } from "@buildingai/hooks";

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

import { useAuthStore, useConfigStore, useUserConfigStore } from "@buildingai/stores";

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

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