b1dea9a5c2
- Added a new task store in `src-react/stores/task.ts` to manage tasks and their statuses. - Implemented functions for creating, executing, and retrying tasks, along with handling task progress and completion. - Introduced persistence for tasks using IPC. - Created utility functions for normalizing room types and building subtasks. - Added a new CSS file for global styles in `src-react/styles.css`. - Created runtime types in `src-react/types/runtime.ts` and exported them. - Updated the main entry points for Vue and React applications to support dynamic framework loading. - Refactored chat model interfaces and utility functions into `src/shared/chat-model.ts`. - Updated TypeScript configuration to include paths for React components and types. - Enhanced Vite configuration to support both Vue and React frameworks.
74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import type { ReactNode } from 'react';
|
||
|
||
type Stat = {
|
||
label: string;
|
||
value: string;
|
||
};
|
||
|
||
type PagePlaceholderProps = {
|
||
tag: string;
|
||
title: string;
|
||
subtitle: string;
|
||
description: string;
|
||
stats?: Stat[];
|
||
actions?: ReactNode;
|
||
};
|
||
|
||
export default function PagePlaceholder({
|
||
tag,
|
||
title,
|
||
subtitle,
|
||
description,
|
||
stats = [],
|
||
actions,
|
||
}: PagePlaceholderProps) {
|
||
return (
|
||
<div className="bg-white dark:bg-[#1b1b1d] box-border w-full h-full flex rounded-[16px] overflow-hidden">
|
||
<div className="w-full flex flex-col h-full p-10 pt-12">
|
||
<div className="flex flex-col md:flex-row md:items-start justify-between mb-6 shrink-0 gap-4">
|
||
<div>
|
||
<div className="inline-flex items-center rounded-full bg-[#2B7FFF]/10 px-3 py-1 text-[12px] font-medium text-[#2B7FFF] dark:text-sky-300 dark:bg-sky-500/10 mb-3">
|
||
{tag}
|
||
</div>
|
||
<h1
|
||
className="text-5xl md:text-6xl font-serif text-[#171717] dark:text-[#f3f4f6] mb-3 font-normal tracking-tight"
|
||
style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
|
||
>
|
||
{title}
|
||
</h1>
|
||
<p className="text-[17px] text-[#171717]/70 dark:text-gray-400 font-medium">{subtitle}</p>
|
||
</div>
|
||
|
||
{actions ? <div className="flex items-center gap-3 md:mt-2">{actions}</div> : null}
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto pr-2 pb-10 min-h-0 -mr-2 space-y-4">
|
||
<div className="rounded-[16px] bg-gray-50 dark:bg-[#222225] border border-black/10 dark:border-[#2a2a2d] p-6">
|
||
<p className="text-[15px] text-[#171717] dark:text-[#f3f4f6] font-medium leading-7">
|
||
{description}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
||
{stats.map((stat) => (
|
||
<div
|
||
key={stat.label}
|
||
className="rounded-[16px] bg-white dark:bg-[#1f1f22] border border-black/10 dark:border-[#2a2a2d] p-5"
|
||
>
|
||
<div className="text-[13px] text-[#525866] dark:text-gray-500">{stat.label}</div>
|
||
<div className="mt-2 text-[22px] font-semibold text-[#171717] dark:text-[#f3f4f6]">
|
||
{stat.value}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="rounded-[16px] border border-dashed border-black/10 dark:border-[#2a2a2d] bg-transparent dark:bg-[#1f1f22] px-6 py-8 text-[#525866] dark:text-gray-400">
|
||
这里先保留 React 页面壳，后续会按原有 Vue 页面逐块迁移真实内容。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|