udpate
This commit is contained in:
@@ -1,55 +0,0 @@
|
||||
# AGENTS.md
|
||||
|
||||
本指南为在此仓库中工作的 AI 编码代理提供关键信息。
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ui/ # shadcn/ui 组件（Base UI 基础组件）
|
||||
├── lib/ # 工具函数（cn() 函数用于 className 合并）
|
||||
├── modules/ # 应用模块（query client、basename）
|
||||
├── pages/ # 页面组件（默认导出）
|
||||
├── routes/ # TanStack Router 基于文件的路由
|
||||
├── styles/ # 全局样式、主题 CSS
|
||||
└── main.tsx # 应用入口
|
||||
```
|
||||
|
||||
|
||||
## 代码风格指南
|
||||
|
||||
### 模块目录结构
|
||||
|
||||
每个新模块（如 `page-app`）应遵循以下结构：
|
||||
|
||||
```
|
||||
pages/page-app/
|
||||
├── components/ # 模块专属组件
|
||||
├── store/ # 模块状态管理
|
||||
└── module/ # 模块功能函数
|
||||
```
|
||||
|
||||
### 状态和数据获取
|
||||
|
||||
- **Zustand** 用于全局状态管理
|
||||
- **@kevisual/query** 用于数据获取（QueryClient 实例位于 `src/modules/query.ts`）
|
||||
- **React Hook Form** 用于表单管理
|
||||
|
||||
## 核心依赖
|
||||
|
||||
- **@base-ui/react**: Headless UI 基础组件
|
||||
- **@tanstack/react-router**: 基于 TanStack Router 插件的文件路由
|
||||
- **class-variance-authority**: 基于变体的样式系统
|
||||
- **clsx + tailwind-merge**: 通过 `cn()` 提供 className 工具函数
|
||||
- **lucide-react**: 图标库
|
||||
- **react-hook-form**: 表单处理
|
||||
- **sonner**: Toast 通知
|
||||
- **zustand**: 状态管理
|
||||
- **tailwindcss v4**: 使用 @tailwindcss/vite 插件进行样式处理
|
||||
|
||||
## 主题系统
|
||||
|
||||
- **主题配色**: 采用黑白配色方案，提供简洁优雅的视觉体验
|
||||
- **主题模式**: 支持 light（浅色）和 dark（深色）模式切换
|
||||
- **主题实现**: 使用 `next-themes` 进行主题管理
|
||||
- **CSS 变量**: 主题相关的 CSS 变量定义在 `src/styles/theme.css` 中
|
||||
1071
web/bun.lock
1071
web/bun.lock
File diff suppressed because it is too large
Load Diff
@@ -1,20 +0,0 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "base-nova",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.ts",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/jpg" href="https://kevisual.cn/root/center/panda.jpg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Route Studio Viewer</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,62 +0,0 @@
|
||||
{
|
||||
"name": "@kevisual/router-studio",
|
||||
"version": "0.1.8",
|
||||
"basename": "/root/router-studio",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"ui": "bunx shadcn@latest add ",
|
||||
"pub": "envision deploy ./dist -k router-studio -v 0.1.8 -y y -u"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"dependencies": {
|
||||
"@base-ui/react": "^1.2.0",
|
||||
"@kevisual/router": "0.0.83",
|
||||
"@tanstack/react-router": "^1.161.4",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"@uiw/react-md-editor": "^4.0.11",
|
||||
"antd": "^6.3.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
"dayjs": "^1.11.19",
|
||||
"eruda": "^3.4.3",
|
||||
"es-toolkit": "^1.44.0",
|
||||
"fuse.js": "^7.1.0",
|
||||
"idb-keyval": "^6.2.2",
|
||||
"lucide-react": "^0.575.0",
|
||||
"nanoid": "^5.1.6",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
"react-hook-form": "^7.71.2",
|
||||
"react-resizable-panels": "^4.6.5",
|
||||
"sonner": "^2.0.7",
|
||||
"valtio": "^2.3.0",
|
||||
"zod": "^4.3.6",
|
||||
"zustand": "^5.0.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@kevisual/api": "^0.0.59",
|
||||
"@kevisual/context": "^0.0.8",
|
||||
"@kevisual/js-filter": "^0.0.5",
|
||||
"@kevisual/query": "^0.0.49",
|
||||
"@kevisual/types": "^0.0.12",
|
||||
"@tailwindcss/vite": "^4.2.0",
|
||||
"@tanstack/react-router-devtools": "^1.161.4",
|
||||
"@tanstack/router-plugin": "^1.161.4",
|
||||
"@types/node": "^25.3.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.4",
|
||||
"dotenv": "^17.3.1",
|
||||
"tailwind-merge": "^3.5.0",
|
||||
"tailwindcss": "^4.2.0",
|
||||
"tw-animate-css": "^1.4.0",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "v8.0.0-beta.15"
|
||||
}
|
||||
}
|
||||
5055
web/pnpm-lock.yaml
generated
5055
web/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,3 +0,0 @@
|
||||
import { QueryRouterServer } from '@kevisual/router/browser'
|
||||
import { use } from '@kevisual/context'
|
||||
export const app = use('app', new QueryRouterServer())
|
||||
@@ -1,5 +0,0 @@
|
||||
import { app } from './app.ts';
|
||||
|
||||
import './routes/left-panel.ts';
|
||||
|
||||
export { app };
|
||||
@@ -1,22 +0,0 @@
|
||||
import { app } from '../app.ts';
|
||||
import { use } from '@kevisual/context'
|
||||
|
||||
app.route({
|
||||
path: 'web',
|
||||
key: 'togglePanel',
|
||||
description: '当前的网页页面功能，切换左侧面板显示与隐藏',
|
||||
metadata: {
|
||||
tags: ['web', 'studio', 'page'],
|
||||
}
|
||||
}).define(async (ctx) => {
|
||||
const store = use('studioStore');
|
||||
try {
|
||||
|
||||
const state = store.getState();
|
||||
state.setShowLeftPanel(!state.showLeftPanel);
|
||||
ctx.body = { success: true };
|
||||
} catch (error) {
|
||||
ctx.body = { success: false, message: (error as Error).message };
|
||||
}
|
||||
|
||||
}).addTo(app)
|
||||
@@ -1,14 +0,0 @@
|
||||
import { AppProvider } from '../../../studio/index.tsx';
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{
|
||||
root: string
|
||||
appId: string
|
||||
}>
|
||||
}
|
||||
|
||||
export default async function Page({ params }: PageProps) {
|
||||
const { root, appId } = await params;
|
||||
console.log('root', root, 'appId', appId);
|
||||
return <AppProvider />;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
About Light Code
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
import { app } from '@/agent/index.ts'
|
||||
import { useStudioStore } from '../studio/store';
|
||||
import { useShallow } from 'zustand/shallow';
|
||||
import { useState } from 'react';
|
||||
import { query } from '@/modules/query.ts'
|
||||
import { QueryViewMessages } from '../query-view';
|
||||
import { toast } from 'sonner';
|
||||
export const Chat = () => {
|
||||
const studioStore = useStudioStore(useShallow((state) => ({
|
||||
routes: state.routes,
|
||||
showRightPanel: state.showRightPanel,
|
||||
setShowRightPanel: state.setShowRightPanel,
|
||||
addMessage: state.addMessage,
|
||||
})));
|
||||
const [text, setText] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const onSend = async () => {
|
||||
if (!text.trim() || isLoading) return;
|
||||
setIsLoading(true);
|
||||
const { routes } = studioStore;
|
||||
let callPrompts = '';
|
||||
const toolsList = routes.map((r, index) =>
|
||||
`${index + 1}. 工具名称: ${r.id}\n 描述: ${r.description}`
|
||||
).join('\n\n');
|
||||
|
||||
callPrompts = `你是一个 AI 助手，你可以使用以下工具来帮助用户完成任务:
|
||||
|
||||
${toolsList}
|
||||
|
||||
## 回复规则
|
||||
1. 如果用户的请求可以使用上述工具完成，请返回 JSON 格式数据
|
||||
2. 如果没有合适的工具，请直接分析并回答用户问题
|
||||
|
||||
## JSON 数据格式
|
||||
\`\`\`json
|
||||
{
|
||||
"id": "工具的id",
|
||||
"payload": {
|
||||
// 工具所需的参数（如果需要）
|
||||
// 例如: "id": "xxx", "name": "xxx"
|
||||
}
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
注意：
|
||||
- payload 中包含工具执行所需的所有参数
|
||||
- 如果工具不需要参数，payload 可以为空对象 {}
|
||||
- 确保返回的 id 与上述工具列表中的工具名称完全匹配`
|
||||
|
||||
const res = await query.post({
|
||||
path: 'ai',
|
||||
payload: {
|
||||
messages: [
|
||||
{
|
||||
role: 'system',
|
||||
content: callPrompts
|
||||
},
|
||||
{
|
||||
role: 'user',
|
||||
content: text
|
||||
}
|
||||
],
|
||||
isJson: true
|
||||
}
|
||||
})
|
||||
setText('');
|
||||
console.log('发送消息', text, res);
|
||||
if (res.code === 200) {
|
||||
// 处理返回结果
|
||||
const payload = res.data?.action;
|
||||
if (payload) {
|
||||
const route = routes.find(r => r.id === payload.id);
|
||||
const { path, key } = route || {};
|
||||
const { id, ...otherParams } = payload.payload || {};
|
||||
const action = { path, key, ...otherParams }
|
||||
let response;
|
||||
if (route) {
|
||||
response = await app.run(action);
|
||||
// toast.success('工具调用成功');
|
||||
} else {
|
||||
console.error('未找到对应工具', payload.id);
|
||||
toast.error('未找到对应工具');
|
||||
return
|
||||
}
|
||||
if (route?.metadata?.viewItem) {
|
||||
// 自动打开右侧面板
|
||||
if (!studioStore.showRightPanel) {
|
||||
studioStore.setShowRightPanel(true);
|
||||
}
|
||||
const viewItem = route.metadata.viewItem;
|
||||
viewItem.response = response;
|
||||
viewItem.action = action;
|
||||
viewItem.description = route.description || viewItem.description;
|
||||
// @ts-ignore
|
||||
viewItem._id = Date.now();
|
||||
studioStore.addMessage(viewItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
setIsLoading(false);
|
||||
}
|
||||
return <div className="h-full flex flex-col border-l border-gray-300 bg-white">
|
||||
<div style={{ height: '3rem' }} className="flex items-center justify-between px-4 border-b border-gray-300 bg-gray-50">
|
||||
<div className="text-sm text-gray-600">智能体</div>
|
||||
</div>
|
||||
<div style={{ height: 'calc(100% - 3rem)' }} className="overflow-auto">
|
||||
<QueryViewMessages type="component" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-4 py-3 border-t border-gray-300 bg-white">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="输入消息..."
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && onSend()}
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md bg-white text-black placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-800 transition-all"
|
||||
/>
|
||||
<button
|
||||
onClick={onSend}
|
||||
disabled={isLoading}
|
||||
className="px-4 py-2 bg-black hover:bg-gray-900 disabled:bg-gray-400 text-white font-medium rounded-md transition-colors duration-200 flex-shrink-0"
|
||||
>
|
||||
{isLoading ? '发送中...' : '发送'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
type MessageData = {
|
||||
id: string;
|
||||
type: 'md' | 'api';
|
||||
api?: {
|
||||
url?: string;
|
||||
/**
|
||||
* 默认不存在，动态生成
|
||||
*/
|
||||
query?: any;
|
||||
};
|
||||
question?: string;
|
||||
action?: any;
|
||||
/**
|
||||
* 默认不存在，动态生成
|
||||
*/
|
||||
response?: any;
|
||||
}
|
||||
|
||||
type MessageProps = {
|
||||
data: MessageData;
|
||||
}
|
||||
export const Message = (props: MessageProps) => {
|
||||
const { data } = props;
|
||||
if (data.type === 'md') {
|
||||
return <div className="prose prose-sm max-w-full">
|
||||
{/* Markdown 渲染组件 */}
|
||||
Markdown 内容
|
||||
</div>
|
||||
}
|
||||
if (data.type === 'api') {
|
||||
return <div>
|
||||
{/* 查询结果渲染组件 */}
|
||||
查询结果内容
|
||||
</div>
|
||||
}
|
||||
return <div>未知消息类型</div>
|
||||
}
|
||||
|
||||
export const Messages = (props: { items: MessageData[] }) => {
|
||||
const items = props.items || [];
|
||||
return <div className="p-4 space-y-4">
|
||||
{items.map((item) => (
|
||||
<Message key={item.id} data={item} />
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
@@ -1,257 +0,0 @@
|
||||
.cv-app {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
|
||||
}
|
||||
|
||||
.cv-header {
|
||||
height: 68px;
|
||||
background: #ffffff;
|
||||
padding: 0 2rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.cv-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
color: #0a0a0a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cv-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cv-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cv-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.cv-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.cv-btn-primary {
|
||||
background: #0a0a0a;
|
||||
color: white;
|
||||
border-color: #0a0a0a;
|
||||
}
|
||||
|
||||
.cv-btn-primary:hover {
|
||||
background: #1a1a1a;
|
||||
border-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.cv-btn-secondary {
|
||||
background: white;
|
||||
color: #525252;
|
||||
border-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.cv-btn-secondary:hover {
|
||||
background: #fafafa;
|
||||
border-color: #d4d4d4;
|
||||
}
|
||||
|
||||
.cv-btn-danger {
|
||||
background: white;
|
||||
color: #dc2626;
|
||||
border-color: #fecaca;
|
||||
}
|
||||
|
||||
.cv-btn-danger:hover {
|
||||
background: #fef2f2;
|
||||
border-color: #fca5a5;
|
||||
}
|
||||
|
||||
.cv-editor-container {
|
||||
padding: 2rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cv-preview-container {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cv-preview {
|
||||
background: white;
|
||||
padding: 3rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
|
||||
min-height: 800px;
|
||||
}
|
||||
|
||||
/* Markdown 样式优化 */
|
||||
.markdown-body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.markdown-body p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.markdown-body li {
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.markdown-body code {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 6px;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
color: #525252;
|
||||
border-left: 0.25em solid #e5e5e5;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body strong {
|
||||
font-weight: 600;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.markdown-body em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
height: 0.25em;
|
||||
padding: 0;
|
||||
margin: 24px 0;
|
||||
background-color: #e5e5e5;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.cv-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cv-app {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.cv-preview {
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cv-preview-container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.cv-header {
|
||||
height: auto;
|
||||
min-height: 68px;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.cv-actions {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.cv-btn {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.cv-btn span:not([class]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cv-preview {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.cv-editor-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -1,172 +0,0 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import MDEditor from '@uiw/react-md-editor'
|
||||
import { Save, Download, Printer, Eye, Edit, RotateCcw } from 'lucide-react'
|
||||
import 'github-markdown-css/github-markdown-light.css'
|
||||
import './index.css'
|
||||
|
||||
const defaultResume = `# 张三
|
||||
|
||||
**前端开发工程师** | 北京 | zhangsan@example.com | 138-0000-0000
|
||||
|
||||
## 个人简介
|
||||
|
||||
热爱前端开发，拥有5年React和Vue开发经验。专注于构建高性能、可维护的Web应用。
|
||||
|
||||
## 工作经历
|
||||
|
||||
### 高级前端工程师 | ABC科技有限公司
|
||||
*2021年6月 - 至今*
|
||||
|
||||
- 负责公司核心产品的前端架构设计和开发
|
||||
- 使用React和TypeScript构建企业级管理系统
|
||||
- 优化前端性能，页面加载速度提升40%
|
||||
- 带领5人前端团队，制定代码规范和最佳实践
|
||||
|
||||
### 前端开发工程师 | XYZ互联网公司
|
||||
*2019年3月 - 2021年5月*
|
||||
|
||||
- 参与电商平台的前端开发
|
||||
- 使用Vue.js开发响应式Web应用
|
||||
- 与后端团队协作，实现RESTful API对接
|
||||
|
||||
## 技能
|
||||
|
||||
- **前端框架**: React, Vue.js, Next.js, Astro
|
||||
- **编程语言**: TypeScript, JavaScript, HTML5, CSS3
|
||||
- **工具**: Git, Webpack, Vite, Docker
|
||||
- **其他**: Node.js, GraphQL, Tailwind CSS
|
||||
|
||||
## 教育背景
|
||||
|
||||
### 计算机科学与技术 | 本科
|
||||
*北京某大学 | 2015年9月 - 2019年6月*
|
||||
|
||||
- 主修课程：数据结构、算法、计算机网络、数据库原理
|
||||
- 优秀毕业生，GPA 3.8/4.0
|
||||
|
||||
## 项目经验
|
||||
|
||||
### 企业级管理系统
|
||||
*技术栈: React, TypeScript, Ant Design*
|
||||
|
||||
- 设计并实现模块化权限管理系统
|
||||
- 开发数据可视化大屏，支持实时数据展示
|
||||
- 编写单元测试，代码覆盖率达到85%
|
||||
|
||||
### 电商平台前端
|
||||
*技术栈: Vue.js, Vuex, Element UI*
|
||||
|
||||
- 实现购物车、订单管理等核心功能
|
||||
- 优化首屏加载时间，LCP从2.5s降至1.2s
|
||||
- 响应式设计，完美支持移动端访问
|
||||
|
||||
## 语言能力
|
||||
|
||||
- 英语：CET-6，能够阅读英文技术文档
|
||||
- 普通话：母语
|
||||
`
|
||||
|
||||
export const AppProvider = () => {
|
||||
return (
|
||||
<div>
|
||||
<App />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const App = () => {
|
||||
const [markdown, setMarkdown] = useState<string | undefined>(defaultResume)
|
||||
const [isPreviewMode, setIsPreviewMode] = useState(false)
|
||||
|
||||
// 从 localStorage 加载保存的简历
|
||||
useEffect(() => {
|
||||
const saved = localStorage.getItem('cv-content')
|
||||
if (saved) {
|
||||
setMarkdown(saved)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// 保存到 localStorage
|
||||
const handleSave = () => {
|
||||
if (markdown) {
|
||||
localStorage.setItem('cv-content', markdown)
|
||||
alert('简历已保存！')
|
||||
}
|
||||
}
|
||||
|
||||
// 导出为 Markdown 文件
|
||||
const handleExport = () => {
|
||||
if (markdown) {
|
||||
const blob = new Blob([markdown], { type: 'text/markdown' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = 'resume.md'
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
}
|
||||
|
||||
// 打印简历
|
||||
const handlePrint = () => {
|
||||
window.print()
|
||||
}
|
||||
|
||||
// 重置为默认模板
|
||||
const handleReset = () => {
|
||||
if (confirm('确定要重置为默认模板吗？当前内容将丢失。')) {
|
||||
setMarkdown(defaultResume)
|
||||
localStorage.removeItem('cv-content')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="cv-app">
|
||||
<header className="cv-header">
|
||||
<h1>📄 简历编辑器</h1>
|
||||
<div className="cv-actions">
|
||||
<button onClick={handleSave} className="cv-btn cv-btn-primary">
|
||||
<Save size={16} />
|
||||
<span>保存</span>
|
||||
</button>
|
||||
<button onClick={handleExport} className="cv-btn cv-btn-secondary">
|
||||
<Download size={16} />
|
||||
<span>导出 MD</span>
|
||||
</button>
|
||||
<button onClick={handlePrint} className="cv-btn cv-btn-secondary">
|
||||
<Printer size={16} />
|
||||
<span>打印</span>
|
||||
</button>
|
||||
<button onClick={() => setIsPreviewMode(!isPreviewMode)} className="cv-btn cv-btn-secondary">
|
||||
{isPreviewMode ? <Edit size={16} /> : <Eye size={16} />}
|
||||
<span>{isPreviewMode ? '编辑' : '预览'}</span>
|
||||
</button>
|
||||
<button onClick={handleReset} className="cv-btn cv-btn-danger">
|
||||
<RotateCcw size={16} />
|
||||
<span>重置</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{isPreviewMode ? (
|
||||
<div className="cv-preview-container">
|
||||
<div className="cv-preview markdown-body">
|
||||
<MDEditor.Markdown source={markdown} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="cv-editor-container" data-color-mode="light">
|
||||
<MDEditor
|
||||
value={markdown}
|
||||
onChange={setMarkdown}
|
||||
height={800}
|
||||
preview="edit"
|
||||
textareaProps={{
|
||||
placeholder: '在这里输入你的简历内容（支持 Markdown 格式）...'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export default function IdPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1>V1 ID Page</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
|
||||
import { AppProvider } from './studio/index.tsx';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<AppProvider />
|
||||
);
|
||||
}
|
||||
@@ -1,589 +0,0 @@
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { DetailsTab, useQueryViewStore } from '../store';
|
||||
import { useShallow } from 'zustand/shallow';
|
||||
import { useStudioStore, filterRouteInfo, getPayload } from '@/app/studio/store';
|
||||
import { QueryView } from '..';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { pickRouterViewData, RouterViewData, RouterViewItem } from '@kevisual/api/proxy';
|
||||
import { RouteInfo, fromJSONSchema } from '@kevisual/router/browser';
|
||||
import { pick } from 'es-toolkit';
|
||||
import { toast } from 'sonner';
|
||||
import { Play } from 'lucide-react';
|
||||
// 视图信息表格组件
|
||||
export const ViewInfoTable = ({ currentView }: { currentView?: RouterViewData }) => {
|
||||
|
||||
if (!currentView || !currentView.views || currentView.views.length === 0) {
|
||||
return (
|
||||
<div className="text-sm text-gray-500 text-center py-8">
|
||||
当前视图没有子视图信息
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 当前选中的视图 ID */}
|
||||
{currentView.viewId && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">当前视图 ID</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{currentView.viewId}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Link */}
|
||||
{currentView.link && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">链接</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md break-all">
|
||||
{currentView.link}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Summary */}
|
||||
{currentView.summary && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">摘要</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{currentView.summary}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tags */}
|
||||
{currentView.tags && currentView.tags.length > 0 && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">标签</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{currentView.tags.map((tag: string, index: number) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-2 py-1 text-xs bg-gray-900 text-white rounded-md"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
{currentView.title && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">标题</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{currentView.title}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{currentView.description && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">描述</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md whitespace-pre-wrap">
|
||||
{currentView.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 子视图列表表格 */}
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-2">视图列表</label>
|
||||
<div className="border border-gray-300 rounded-md overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-100 border-b border-gray-300">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-700">ID</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-700">标题</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-700">查询</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentView.views.map((view: any, index: number) => {
|
||||
const isSelected = view.id === currentView.viewId;
|
||||
return (
|
||||
<tr
|
||||
key={view.id || index}
|
||||
className={`border-b border-gray-200 transition-colors ${isSelected
|
||||
? 'bg-gray-500 hover:bg-gray-900'
|
||||
: index % 2 === 0
|
||||
? 'bg-white hover:bg-gray-50'
|
||||
: 'bg-gray-50 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
<td className={`px-4 py-2 text-sm ${isSelected ? 'text-white font-semibold' : 'text-gray-900'}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
{view.id || '-'}
|
||||
{isSelected && (
|
||||
<span className="px-2 py-0.5 text-xs bg-white text-gray-900 rounded-full font-medium">
|
||||
当前
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className={`px-4 py-2 text-sm ${isSelected ? 'text-white' : 'text-gray-900'}`}>{view.title || '-'}</td>
|
||||
<td className={`px-4 py-2 text-sm font-mono ${isSelected ? 'text-gray-200' : 'text-gray-600'}`}>
|
||||
{view.query || '-'}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const DetailsInfoPanel = ({ detailsData }: { detailsData: RouterViewItem | null }) => {
|
||||
const queryViewStore = useQueryViewStore(useShallow((state) => ({
|
||||
editing: state.editing,
|
||||
setEditing: state.setEditing,
|
||||
setDetailsData: state.setDetailsData,
|
||||
setDetailsActiveTab: state.setDetailsActiveTab
|
||||
})));
|
||||
const studioStore = useStudioStore(useShallow((state) => ({
|
||||
queryProxy: state.queryProxy,
|
||||
})));
|
||||
if (!detailsData) {
|
||||
return (
|
||||
<div className="text-sm text-gray-500 text-center py-8">
|
||||
无法获取详情信息
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const [action, setAction] = useState(detailsData.action ? JSON.stringify(detailsData.action, null, 2) : '');
|
||||
const otherFilds = useMemo(() => {
|
||||
const { type } = detailsData;
|
||||
if (type === 'api') {
|
||||
{/* 其他字段 */ }
|
||||
return <>{
|
||||
detailsData.api && (
|
||||
<div className="border-b border-gray-200 pb-3 w-full scrollbar">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">API</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs w-full">
|
||||
{JSON.stringify(detailsData.api, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
}
|
||||
if (type === 'context') {
|
||||
return <>{
|
||||
detailsData.context && (
|
||||
<div className="border-b border-gray-200 pb-3 w-full scrollbar">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">上下文</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs w-full">
|
||||
{JSON.stringify(detailsData.context, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
}
|
||||
if (type === 'page') {
|
||||
return <>{
|
||||
detailsData.page && (
|
||||
<div className="border-b border-gray-200 pb-3 w-full scrollbar">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">页面信息</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs w-full">
|
||||
{JSON.stringify(detailsData.page, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
}
|
||||
return null;
|
||||
}, [detailsData]);
|
||||
const onRun = useCallback(async () => {
|
||||
let _action = detailsData?.action;
|
||||
const isEditing = queryViewStore.editing;
|
||||
if (isEditing) {
|
||||
try {
|
||||
_action = JSON.parse(action as string);
|
||||
} catch (error) {
|
||||
toast.error('操作信息必须是合法的 JSON 格式');
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
if (!_action) {
|
||||
toast.error('没有操作信息可供执行');
|
||||
return;
|
||||
}
|
||||
if (!studioStore.queryProxy) {
|
||||
toast.error('没有可用的查询代理，无法执行操作');
|
||||
return;
|
||||
}
|
||||
const payload = getPayload(_action as any);
|
||||
const res = await studioStore.queryProxy.run({
|
||||
..._action,
|
||||
// @ts-ignore
|
||||
payload,
|
||||
})
|
||||
console.log('执行结果', res);
|
||||
if (res?.code === 200) {
|
||||
queryViewStore.setDetailsData({
|
||||
...detailsData,
|
||||
action: _action,
|
||||
response: res,
|
||||
});
|
||||
toast.success('操作执行成功', {
|
||||
action: {
|
||||
label: '查看数据',
|
||||
onClick: () => queryViewStore.setDetailsActiveTab('response'),
|
||||
},
|
||||
closeButton: true,
|
||||
duration: 2000,
|
||||
position: 'top-center',
|
||||
});
|
||||
} else {
|
||||
toast.error(`操作执行失败: ${res?.message || '未知错误'}`);
|
||||
}
|
||||
}, [queryViewStore.editing, studioStore.queryProxy, action]);
|
||||
const runCom = (
|
||||
<button
|
||||
className="inline-flex items-center gap-1 ml-2 px-2 py-0.5 text-xs rounded-md bg-gray-900 text-white hover:bg-gray-700 transition-colors align-middle cursor-pointer"
|
||||
onClick={() => {
|
||||
console.log('点击执行', detailsData.action);
|
||||
onRun();
|
||||
}}
|
||||
>
|
||||
<Play className="w-3 h-3" />
|
||||
执行
|
||||
</button>
|
||||
)
|
||||
const editCom = (<>
|
||||
{queryViewStore.editing && <button
|
||||
className="inline-flex items-center gap-1 ml-2 px-2 py-0.5 text-xs rounded-md bg-gray-900 text-white hover:bg-gray-700 transition-colors align-middle cursor-pointer"
|
||||
onClick={() => {
|
||||
if (queryViewStore.editing) {
|
||||
// 保存操作
|
||||
try {
|
||||
const parsedAction = JSON.parse(action);
|
||||
detailsData.action = parsedAction;
|
||||
queryViewStore.setEditing(false);
|
||||
queryViewStore.setDetailsData({ ...detailsData });
|
||||
toast.success('操作信息已更新');
|
||||
} catch (error) {
|
||||
toast.error('操作信息必须是合法的 JSON 格式');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}}>保存</button>}
|
||||
<button
|
||||
className="inline-flex items-center gap-1 ml-2 px-2 py-0.5 text-xs rounded-md border border-gray-300 hover:bg-gray-50 transition-colors align-middle cursor-pointer"
|
||||
onClick={() => {
|
||||
if (queryViewStore.editing) {
|
||||
setAction(detailsData.action ? JSON.stringify(detailsData.action, null, 2) : '');
|
||||
}
|
||||
queryViewStore.setEditing(!queryViewStore.editing);
|
||||
}}
|
||||
>
|
||||
{queryViewStore.editing ? '取消' : '编辑'}
|
||||
</button>
|
||||
</>)
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Type */}
|
||||
{detailsData.type && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">类型</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{detailsData.type}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
{detailsData.title && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">标题</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{detailsData.title}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{detailsData.description && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">描述</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md whitespace-pre-wrap">
|
||||
{detailsData.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action */}
|
||||
{!queryViewStore.editing && detailsData.action && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<div className="text-sm font-semibold text-gray-700 block mb-1 py-2 cursor-pointer">操作 {runCom} {editCom}</div>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs overflow-auto cursor-pointer" onClick={() => queryViewStore.setEditing(true)}>
|
||||
{JSON.stringify(detailsData.action, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{queryViewStore.editing && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<div className="text-sm font-semibold text-gray-700 block mb-1 py-2">操作 {runCom} {editCom} </div>
|
||||
<textarea
|
||||
className="text-sm text-gray-900 bg-gray-100 px-3 py-2 rounded-md w-full h-32 font-mono border-gray-600 focus:ring-2 focus:ring-gray-500 focus:outline-none scrollbar"
|
||||
value={action}
|
||||
onChange={(e) => {
|
||||
setAction(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{otherFilds}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const RouterInfoPanel = ({ routeInfo }: { routeInfo: RouteInfo | null }) => {
|
||||
if (!routeInfo) {
|
||||
return (
|
||||
<div className="text-sm text-gray-500 text-center py-8">
|
||||
无法获取路由信息
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const _routeInfo = pick(routeInfo, ['id', 'path', 'key', 'description', 'metadata']);
|
||||
const metadata = useMemo(() => {
|
||||
if (!_routeInfo.metadata) return null;
|
||||
const _metadata = _routeInfo.metadata;
|
||||
if (_metadata.viewItem) {
|
||||
_metadata.viewItem = filterRouteInfo(_metadata.viewItem);
|
||||
}
|
||||
return _metadata;
|
||||
}, [_routeInfo.metadata]);
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* ID */}
|
||||
{_routeInfo.id && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">ID{_routeInfo?.id.startsWith("rand") ? ' (当前id会随机变化)' : ''}</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{_routeInfo.id}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Path */}
|
||||
{_routeInfo.path && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">路径</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{_routeInfo.path}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Key */}
|
||||
{_routeInfo.key && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">Key</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{_routeInfo.key}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{_routeInfo.description && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">描述</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md whitespace-pre-wrap">
|
||||
{_routeInfo.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata */}
|
||||
{metadata && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">Metadata</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs overflow-auto">
|
||||
{JSON.stringify(metadata, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>);
|
||||
}
|
||||
|
||||
export const DetailsDialog = () => {
|
||||
const queryViewStore = useQueryViewStore(
|
||||
useShallow((state) => ({
|
||||
showDetailsDialog: state.showDetailsDialog,
|
||||
setShowDetailsDialog: state.setShowDetailsDialog,
|
||||
detailsData: state.detailsData,
|
||||
detailsActiveTab: state.detailsActiveTab,
|
||||
setDetailsActiveTab: state.setDetailsActiveTab,
|
||||
allDetailsTabs: state.allDetailsTabs,
|
||||
setAllDetailsTabs: state.setAllDetailsTabs,
|
||||
editing: state.editing,
|
||||
setEditing: state.setEditing,
|
||||
}))
|
||||
);
|
||||
|
||||
const { currentView, queryProxy } = useStudioStore(useShallow((state) => ({
|
||||
currentView: state.currentView,
|
||||
queryProxy: state.queryProxy,
|
||||
})));
|
||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||
const [forceViewDialogOpen, setForceViewDialogOpen] = useState(false)
|
||||
const routeInfo = useMemo(() => {
|
||||
const action = queryViewStore?.detailsData?.action;
|
||||
if (!action) return null;
|
||||
if (!queryProxy) return null;
|
||||
const router = queryProxy!.router?.findRoute?.(action)
|
||||
if (!router) return null;
|
||||
return router as RouteInfo;
|
||||
}, [queryProxy, queryViewStore.detailsData]);
|
||||
console.log('metadata', queryViewStore.detailsData?._id, queryViewStore.detailsData);
|
||||
const onChangeTab = useCallback((key) => {
|
||||
if (key !== 'response') {
|
||||
queryViewStore.setDetailsActiveTab(key);
|
||||
return;
|
||||
}
|
||||
let needCheck = true;
|
||||
const action = queryViewStore?.detailsData?.action;
|
||||
if (!action) {
|
||||
needCheck = false
|
||||
toast.error('没有操作信息，无法查看响应数据');
|
||||
return
|
||||
}
|
||||
|
||||
const args = routeInfo?.metadata?.args || [];
|
||||
const keys = Object.keys(args);
|
||||
if (keys.length === 0) {
|
||||
needCheck = false;
|
||||
}
|
||||
if (!needCheck) {
|
||||
queryViewStore.setDetailsActiveTab(key);
|
||||
return;
|
||||
}
|
||||
console.log('args', args);
|
||||
|
||||
const payload = getPayload(action as any);
|
||||
payload.data = {}
|
||||
const schema = fromJSONSchema<true>(args, { mergeObject: true });
|
||||
console.log('payload', payload);
|
||||
console.log('schema', schema);
|
||||
const validateResult = schema.safeParse(payload);
|
||||
console.log('validateResult', validateResult);
|
||||
if (!validateResult.success) {
|
||||
// 参数不合法，无法查看响应数据，需要提示用户强制查看还是取消，如果用户选择强制查看，则直接切换到响应标签页，如果用户选择取消，则保持在当前标签页
|
||||
setForceViewDialogOpen(true);
|
||||
} else {
|
||||
queryViewStore.setDetailsActiveTab(key);
|
||||
}
|
||||
|
||||
}, [routeInfo])
|
||||
if (!queryViewStore.detailsData) return null;
|
||||
return (
|
||||
<>
|
||||
<Dialog open={forceViewDialogOpen} onOpenChange={setForceViewDialogOpen}>
|
||||
<DialogContent className="max-w-sm!">
|
||||
<DialogHeader>
|
||||
<DialogTitle>参数不合法</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="text-sm text-gray-600 py-2">
|
||||
当前参数不合法，可能导致请求失败。是否仍要强制查看响应数据？
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 mt-2">
|
||||
<button
|
||||
className="px-4 py-2 text-sm rounded-md border border-gray-300 hover:bg-gray-50 transition-colors"
|
||||
onClick={() => {
|
||||
setForceViewDialogOpen(false);
|
||||
queryViewStore.setEditing(true);
|
||||
queryViewStore.setDetailsActiveTab('details');
|
||||
}}
|
||||
>
|
||||
去编辑
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 text-sm rounded-md border border-gray-300 hover:bg-gray-50 transition-colors"
|
||||
onClick={() => setForceViewDialogOpen(false)}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 text-sm rounded-md bg-gray-900 text-white hover:bg-gray-700 transition-colors"
|
||||
onClick={() => {
|
||||
setForceViewDialogOpen(false);
|
||||
queryViewStore.setDetailsActiveTab('response');
|
||||
}}
|
||||
>
|
||||
强制查看
|
||||
</button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Dialog open={queryViewStore.showDetailsDialog} onOpenChange={queryViewStore.setShowDetailsDialog}>
|
||||
<DialogContent className={`max-h-[80vh] overflow-hidden ${isFullscreen ? 'w-screen! h-screen! max-w-screen! max-h-screen! ' : 'max-w-3xl! '}`}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>详情信息</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex gap-2 border-b border-gray-200">
|
||||
{queryViewStore.allDetailsTabs.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => onChangeTab(tab.key as DetailsTab)}
|
||||
className={`px-4 py-2 text-sm font-medium transition-colors relative ${queryViewStore.detailsActiveTab === tab.key
|
||||
? 'text-gray-900 border-b-2 border-gray-900'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 h-[calc(80vh-200px)] overflow-auto scrollbar px-2">
|
||||
{/* 第一个标签页：详情信息 */}
|
||||
{queryViewStore.detailsActiveTab === 'details' && (
|
||||
<DetailsInfoPanel detailsData={queryViewStore.detailsData} />
|
||||
)}
|
||||
|
||||
{/* 第二个标签页：当前视图 */}
|
||||
{queryViewStore.detailsActiveTab === 'view' && (
|
||||
<ViewInfoTable currentView={currentView} />
|
||||
)}
|
||||
|
||||
{/* 第三个标签页：路由信息 */}
|
||||
{queryViewStore.detailsActiveTab === 'router' && (
|
||||
<RouterInfoPanel routeInfo={routeInfo} />
|
||||
)}
|
||||
|
||||
{/* 第三个标签页：响应 */}
|
||||
{queryViewStore.detailsActiveTab === 'response' && (
|
||||
<div className="space-y-4">
|
||||
<QueryView viewData={queryViewStore.detailsData} type={'message'} setIsFullscreen={setIsFullscreen} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog >
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,373 +0,0 @@
|
||||
import { QueryProxy, RouterViewItem } from '@kevisual/api/proxy'
|
||||
import { app } from '@/agent/index.ts'
|
||||
import { use, useEffect, useState, useRef, useId, useMemo } from 'react'
|
||||
import { flexRender, useReactTable, getCoreRowModel, ColumnDef } from '@tanstack/react-table'
|
||||
import { RefreshCw, Info, MoreVertical, Edit, Trash2, Download, Save, ExternalLink, Code, Delete, Maximize, Minimize } from 'lucide-react'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { filterRouteInfo, Message, useStudioStore } from '../studio/store'
|
||||
import { useQueryViewStore } from './store'
|
||||
import { DetailsDialog } from './components/DetailsDialog'
|
||||
import { useShallow } from 'zustand/shallow'
|
||||
import { cloneDeep } from 'es-toolkit'
|
||||
import { toast } from 'sonner'
|
||||
import { Result } from '@kevisual/query'
|
||||
export const QueryViewTypes = ['component', 'page', 'message'] as const
|
||||
type Props = {
|
||||
type: typeof QueryViewTypes[number],
|
||||
viewData?: RouterViewItem,
|
||||
setIsFullscreen?: (isFullscreen: boolean) => void,
|
||||
}
|
||||
|
||||
const queryProxy = new QueryProxy({
|
||||
router: app as any
|
||||
});
|
||||
export const QueryView = (props: Props) => {
|
||||
const [data, setData] = useState<any[]>([])
|
||||
const [columns, setColumns] = useState<ColumnDef<any>[]>([])
|
||||
const [type] = useState<Props['type']>(props.type || 'page')
|
||||
const [viewData, setViewData] = useState<RouterViewItem | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [showMoreMenu, setShowMoreMenu] = useState(false)
|
||||
const [selectedRow, setSelectedRow] = useState<any | null>(null)
|
||||
const [isList, setIsList] = useState(true)
|
||||
const [obj, setObj] = useState<any>(null)
|
||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||
const routeViewRef = useRef<HTMLDivElement>(null)
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns: columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
})
|
||||
const studioStore = useStudioStore(useShallow((state) => ({
|
||||
deleteMessage: state.deleteMessage
|
||||
})))
|
||||
const queryViewStore = useQueryViewStore(useShallow((state) => ({
|
||||
setShowDetailsDialog: state.setShowDetailsDialog,
|
||||
setDetailsData: state.setDetailsData,
|
||||
setEditing: state.setEditing,
|
||||
})))
|
||||
const isPage = type === 'page'
|
||||
const isMessage = type === 'message'
|
||||
const id = useId()
|
||||
|
||||
const handleResponse = (response: Result) => {
|
||||
const list = response.data?.list
|
||||
if (!list) {
|
||||
setIsList(false);
|
||||
setObj(response.data);
|
||||
return;
|
||||
}
|
||||
if (isList === false) {
|
||||
setIsList(true);
|
||||
}
|
||||
setData(response.data.list)
|
||||
const [_, firstItem] = response.data.list || []
|
||||
if (firstItem) {
|
||||
const cols: ColumnDef<any>[] = Object.keys(firstItem).map(key => ({
|
||||
accessorKey: key,
|
||||
header: key.toUpperCase(),
|
||||
cell: info => info.getValue() + '',
|
||||
}))
|
||||
setColumns(cols)
|
||||
}
|
||||
}
|
||||
const main = async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const res = await queryProxy.runByRouteView(viewData!)
|
||||
const response = res.response;
|
||||
handleResponse(response)
|
||||
toast.success('数据获取成功')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefresh = () => {
|
||||
if (viewData) {
|
||||
setViewData({ ...viewData, response: undefined }) // 触发刷新
|
||||
}
|
||||
}
|
||||
|
||||
const handleShowDetails = (editing?: boolean) => {
|
||||
const data = filterRouteInfo(props.viewData!)
|
||||
queryViewStore.setDetailsData(data, 'details');
|
||||
queryViewStore.setShowDetailsDialog(true);
|
||||
if (typeof editing === 'boolean') {
|
||||
queryViewStore.setEditing(editing);
|
||||
} else {
|
||||
queryViewStore.setEditing(false);
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = () => {
|
||||
handleShowDetails(true)
|
||||
}
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedRow) {
|
||||
console.log('Delete row:', selectedRow)
|
||||
// 在这里添加删除逻辑
|
||||
}
|
||||
studioStore.deleteMessage(props.viewData! as Message)
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
if (!viewData) return
|
||||
console.log('Export viewData:', viewData)
|
||||
}
|
||||
const handleExportCode = () => {
|
||||
if (!viewData) return
|
||||
console.log('Export code for viewData:', viewData)
|
||||
}
|
||||
const handleSave = () => {
|
||||
if (selectedRow) {
|
||||
console.log('Save row:', selectedRow)
|
||||
toast.success('保存成功')
|
||||
// 在这里添加保存逻辑
|
||||
}
|
||||
}
|
||||
|
||||
const handleSaveAndOpen = () => {
|
||||
if (selectedRow) {
|
||||
console.log('Save and open row:', selectedRow)
|
||||
toast.success('保存并打开成功')
|
||||
// 在这里添加保存并打开逻辑
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleFullscreen = () => {
|
||||
setIsFullscreen(!isFullscreen)
|
||||
if (props.setIsFullscreen) {
|
||||
props.setIsFullscreen(!isFullscreen)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (viewData && props.type !== 'message') {
|
||||
main()
|
||||
} else if (viewData && props.type === 'message' && !viewData.response) {
|
||||
main()
|
||||
}
|
||||
}, [viewData, props.type])
|
||||
|
||||
useEffect(() => {
|
||||
if (props.viewData) {
|
||||
const detailsData = cloneDeep(props.viewData) as RouterViewItem
|
||||
setViewData(detailsData)
|
||||
// 如果是 message 类型且有 response，直接处理响应
|
||||
if (props.type === 'message' && props.viewData.response) {
|
||||
handleResponse(props.viewData.response)
|
||||
}
|
||||
}
|
||||
}, [props.viewData])
|
||||
const RenderTable = () => {
|
||||
if (!isList) {
|
||||
return <pre className='bg-gray-100 p-4 rounded-lg overflow-auto'>
|
||||
{JSON.stringify(obj, null, 2)}
|
||||
</pre>
|
||||
}
|
||||
return <table className='w-full border-collapse min-w-max md:w-full'>
|
||||
<thead className='bg-gray-100 border-b-2 border-gray-300 sticky top-0'>
|
||||
{table.getHeaderGroups().map(headerGroup => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map(header => (
|
||||
<th
|
||||
key={header.id}
|
||||
className='px-4 py-3 text-left text-sm font-semibold text-gray-700 whitespace-nowrap'
|
||||
>
|
||||
{flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody>
|
||||
{table.getRowModel().rows.map((row, idx) => (
|
||||
<tr
|
||||
key={row.id}
|
||||
className={`border-b border-gray-200 transition-colors duration-200 ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50'
|
||||
} hover:bg-blue-50`}
|
||||
>
|
||||
{row.getVisibleCells().map(cell => (
|
||||
<td
|
||||
key={cell.id}
|
||||
className='px-4 py-3 text-sm text-gray-600'
|
||||
>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
|
||||
const typeClass = useMemo(() => {
|
||||
if (isFullscreen && type !== 'message') {
|
||||
return 'fixed inset-0 z-50 bg-white dark:bg-gray-900 w-screen h-screen'
|
||||
} else if (isFullscreen && type === 'message') {
|
||||
return 'absolute inset-0 z-50 bg-white dark:bg-gray-900 w-full h-full p-4'
|
||||
}
|
||||
switch (type) {
|
||||
case 'component':
|
||||
return 'max-h-150 overflow-y-auto'
|
||||
case 'page':
|
||||
return 'h-full overflow-auto'
|
||||
case 'message':
|
||||
return 'h-full overflow-auto'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}, [type, isFullscreen])
|
||||
|
||||
const content = <div ref={routeViewRef} id={'route-view-' + id} className={`w-full route-view ${typeClass} p-4 `}>
|
||||
<div className='mb-4'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h2 className={`font-bold ${type === 'component' ? 'text-lg' : 'text-2xl'} truncate`} title={`路由视图 - ${viewData?.title || '未命名'}`}>路由视图 - {viewData?.title || '未命名'}</h2>
|
||||
<div className='flex items-center gap-2 relative'>
|
||||
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={isLoading}
|
||||
className='p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50'
|
||||
title='刷新'
|
||||
>
|
||||
<RefreshCw size={20} className={isLoading ? 'animate-spin' : 'cursor-pointer'} />
|
||||
</button>
|
||||
{!isPage && !isMessage && <button
|
||||
onClick={handleDelete}
|
||||
disabled={isLoading}
|
||||
className='p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50'
|
||||
>
|
||||
<Trash2 size={20} className='cursor-pointer' />
|
||||
</button>}
|
||||
|
||||
<DropdownMenu open={showMoreMenu} onOpenChange={setShowMoreMenu}>
|
||||
<DropdownMenuTrigger
|
||||
className='p-2 hover:bg-gray-200 rounded-lg transition-colors'
|
||||
title='更多选项'
|
||||
>
|
||||
<MoreVertical size={20} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align='end' className='w-48 border-gray-300'>
|
||||
{!isPage && (
|
||||
<>
|
||||
<DropdownMenuItem onClick={handleSave}>
|
||||
<Save size={16} className='mr-2' />
|
||||
<span>保存</span>
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
{!isPage && (
|
||||
<>
|
||||
<DropdownMenuItem onClick={handleSaveAndOpen}>
|
||||
<ExternalLink size={16} className='mr-2' />
|
||||
<span>保存并打开</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
{!isMessage && (
|
||||
<DropdownMenuItem onClick={() => handleShowDetails()}>
|
||||
<Info size={16} className='mr-2' />
|
||||
<span>详情</span>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem onClick={handleEdit}>
|
||||
<Edit size={16} className='mr-2' />
|
||||
<span>编辑</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleToggleFullscreen}>
|
||||
{isFullscreen ? <Minimize size={16} className='mr-2' /> : <Maximize size={16} className='mr-2' />}
|
||||
<span>{isFullscreen ? '退出全屏' : '全屏'}</span>
|
||||
</DropdownMenuItem>
|
||||
{!isMessage && <DropdownMenuItem onClick={handleDelete} variant='destructive'>
|
||||
<Trash2 size={16} className='mr-2' />
|
||||
<span>{!isPage ? '移除' : '删除'}</span>
|
||||
</DropdownMenuItem>}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={handleExport}>
|
||||
<Download size={16} className='mr-2' />
|
||||
<span>导出</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleExportCode}>
|
||||
<Code size={16} className='mr-2' />
|
||||
<span>导出代码</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-full overflow-x-auto scrollbar rounded-lg shadow-md border border-gray-300'>
|
||||
<RenderTable />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return content
|
||||
}
|
||||
export const QueryViewMessages = (props: Props) => {
|
||||
const studioStore = useStudioStore(useShallow((state) => ({
|
||||
messages: state.messages,
|
||||
setMessages: state.setMessages
|
||||
})))
|
||||
const initPage = async () => {
|
||||
const url = new URL(window.location.href)
|
||||
const id = url.searchParams.get('id') || ''
|
||||
const message = studioStore.messages.find(msg => msg.id === id)
|
||||
if (!id) {
|
||||
setTimeout(() => {
|
||||
toast.error('缺少查询视图ID参数')
|
||||
console.error('Missing query view ID parameter')
|
||||
}, 1000)
|
||||
return
|
||||
}
|
||||
// 查询query-view的保存的id，赋值后然后执行查询
|
||||
// @ts-ignore
|
||||
const DemoRouterView: Message = {
|
||||
id: 'getData',
|
||||
description: '获取数据',
|
||||
title: '获取数据',
|
||||
type: 'api',
|
||||
api: {
|
||||
url: "/api/router",
|
||||
// url: "http://localhost:52000/api/router",
|
||||
},
|
||||
action: {
|
||||
path: 'router',
|
||||
key: 'list'
|
||||
}
|
||||
}
|
||||
studioStore.setMessages([DemoRouterView as Message])
|
||||
}
|
||||
useEffect(() => {
|
||||
const type = props.type || 'page'
|
||||
if (type === 'page') {
|
||||
initPage()
|
||||
}
|
||||
}, [props.type])
|
||||
return <div className='w-full h-full flex flex-col scrollbar'>
|
||||
{studioStore.messages.map((msg, index) => (
|
||||
<div key={msg._id || msg.id} className="p-4 border-b border-gray-200">
|
||||
<QueryView viewData={msg} type={props.type} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
export const AppProvider = () => {
|
||||
return <div className='w-full h-full flex flex-col overflow-hidden'>
|
||||
<DetailsDialog />
|
||||
<QueryViewMessages type="page" />
|
||||
</div>
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import { AppProvider } from './index'
|
||||
export default function App() {
|
||||
return (
|
||||
<AppProvider />
|
||||
)
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
import { RouterViewItem } from '@kevisual/api/proxy';
|
||||
import { create } from 'zustand';
|
||||
|
||||
export const detailsTabs = ['details', 'view', 'router', 'response'] as const;
|
||||
export const AllTabs = [
|
||||
{
|
||||
key: 'details',
|
||||
label: '详情',
|
||||
},
|
||||
{
|
||||
key: 'view',
|
||||
label: '视图',
|
||||
},
|
||||
{
|
||||
key: 'router',
|
||||
label: '路由',
|
||||
},
|
||||
{
|
||||
key: 'response',
|
||||
label: '响应',
|
||||
},
|
||||
]
|
||||
export type DetailsTab = (typeof detailsTabs)[number];
|
||||
type QueryViewState = {
|
||||
showDataDialog: boolean;
|
||||
setShowDataDialog: (show: boolean) => void;
|
||||
dataDialogContent: any;
|
||||
setDataDialogContent: (content: any) => void;
|
||||
showDetailsDialog: boolean;
|
||||
setShowDetailsDialog: (show: boolean) => void;
|
||||
detailsData: RouterViewItem | null;
|
||||
setDetailsData: (data: RouterViewItem | null, tab?: DetailsTab) => void;
|
||||
detailsActiveTab: DetailsTab;
|
||||
setDetailsActiveTab: (tab: DetailsTab) => void;
|
||||
allDetailsTabs: typeof AllTabs;
|
||||
setAllDetailsTabs: (tabs: typeof AllTabs) => void;
|
||||
editing: boolean;
|
||||
setEditing: (editing: boolean) => void;
|
||||
};
|
||||
export const useQueryViewStore = create<QueryViewState>((set) => ({
|
||||
showDataDialog: false,
|
||||
setShowDataDialog: (show) => set({ showDataDialog: show }),
|
||||
dataDialogContent: null,
|
||||
setDataDialogContent: (content) => set({ dataDialogContent: content }),
|
||||
showDetailsDialog: false,
|
||||
setShowDetailsDialog: (show) => set({ showDetailsDialog: show }),
|
||||
detailsData: null,
|
||||
setDetailsData: (data, tab) => {
|
||||
if (typeof tab !== 'undefined') {
|
||||
set({ detailsActiveTab: tab });
|
||||
}
|
||||
set({ detailsData: data })
|
||||
},
|
||||
detailsActiveTab: 'details',
|
||||
setDetailsActiveTab: (tab) => set({ detailsActiveTab: tab }),
|
||||
editing: false,
|
||||
setEditing: (editing) => set({ editing }),
|
||||
allDetailsTabs: AllTabs,
|
||||
setAllDetailsTabs: (tabs) => set({ allDetailsTabs: tabs }),
|
||||
}));
|
||||
@@ -1,5 +0,0 @@
|
||||
export const App = () => {
|
||||
return (
|
||||
<div>Studio App</div>
|
||||
)
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
||||
import { useStudioStore } from '../store';
|
||||
import { useShallow } from 'zustand/shallow';
|
||||
import { createQueryByRoutes } from '@kevisual/query/api'
|
||||
import { useMemo } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Copy, Check } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { useState } from 'react';
|
||||
import { pick } from 'es-toolkit';
|
||||
export const ExportDialog = () => {
|
||||
const { showExportDialog, setShowExportDialog, exportRoutes } = useStudioStore(
|
||||
useShallow((state) => ({
|
||||
showExportDialog: state.showExportDialog,
|
||||
setShowExportDialog: state.setShowExportDialog,
|
||||
exportRoutes: state.exportRoutes,
|
||||
}))
|
||||
);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const code = useMemo(() => {
|
||||
if (!exportRoutes) return '';
|
||||
let routeInfo = exportRoutes.map(route => pick(route, ['path', 'key', 'id', 'description', 'metadata']));
|
||||
const query = createQueryByRoutes(routeInfo as any);
|
||||
return query;
|
||||
}, [exportRoutes]);
|
||||
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(code);
|
||||
setCopied(true);
|
||||
toast.success('代码已复制到剪贴板');
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch (err) {
|
||||
toast.error('复制失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={showExportDialog} onOpenChange={setShowExportDialog}>
|
||||
<DialogContent className="max-w-3xl! max-h-[80vh] overflow-hidden">
|
||||
<DialogHeader>
|
||||
<DialogTitle>导出API代码</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 w-full overflow-hidden">
|
||||
<div className="p-4 border border-gray-300 rounded-md bg-gray-50">
|
||||
<pre className="text-xs max-h-[60vh] overflow-auto scrollbar">
|
||||
{code}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowExportDialog(false)}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCopy}
|
||||
className="gap-2"
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check size={16} />
|
||||
已复制
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy size={16} />
|
||||
复制代码
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -1,365 +0,0 @@
|
||||
import { filterRouteInfo, useStudioStore } from './store.ts';
|
||||
import { use, useEffect, useState } from 'react';
|
||||
import { MonitorPlay, Play, PanelLeft, PanelLeftClose, PanelRight, PanelRightClose, Filter, FilterX, Search, X, MoreHorizontal, Info, Code, RotateCcw } from 'lucide-react';
|
||||
import { Panel, Group } from 'react-resizable-panels'
|
||||
import { ViewList } from '../view/list.tsx';
|
||||
import { useShallow } from 'zustand/shallow';
|
||||
import { Chat } from '../chat/index.tsx';
|
||||
import { Input } from '@/components/ui/input.tsx';
|
||||
import { Button } from '@/components/ui/button.tsx';
|
||||
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu.tsx';
|
||||
import { ExportDialog } from './components/ExportDialog';
|
||||
import { useQueryViewStore } from '../query-view/store/index.ts';
|
||||
import { toast } from 'sonner';
|
||||
import { DetailsDialog } from '../query-view/components/DetailsDialog.tsx';
|
||||
export const AppProvider = () => {
|
||||
const { showLeftPanel, showRightPanel } = useStudioStore(useShallow((state) => ({
|
||||
showLeftPanel: state.showLeftPanel,
|
||||
showRightPanel: state.showRightPanel,
|
||||
})));
|
||||
return <div className='w-full h-full flex flex-col overflow-hidden'>
|
||||
<DetailsDialog />
|
||||
<Group className="h-full flex-1 overflow-hidden">
|
||||
{showLeftPanel && <Panel defaultSize={300} minSize={250} maxSize={500} className="border-r border-gray-300 overflow-auto">
|
||||
<ViewList />
|
||||
</Panel>}
|
||||
<Panel>
|
||||
<WrapperHeader>
|
||||
<Group className="h-full overflow-hidden">
|
||||
<Panel >
|
||||
<App />
|
||||
</Panel>
|
||||
{showRightPanel && <Panel defaultSize={500} minSize={300} maxSize={600} className="border-l border-gray-300 overflow-auto">
|
||||
<Chat />
|
||||
</Panel>}
|
||||
</Group>
|
||||
</WrapperHeader>
|
||||
</Panel>
|
||||
|
||||
</Group>
|
||||
</div>
|
||||
}
|
||||
export const WrapperHeader = (props: { children: React.ReactNode }) => {
|
||||
const showLeftPanel = useStudioStore(state => state.showLeftPanel);
|
||||
const store = useStudioStore(useShallow((state) => ({
|
||||
showLeftPanel: state.showLeftPanel,
|
||||
setShowLeftPanel: state.setShowLeftPanel,
|
||||
showFilter: state.showFilter,
|
||||
setShowFilter: state.setShowFilter,
|
||||
showRightPanel: state.showRightPanel,
|
||||
setShowRightPanel: state.setShowRightPanel,
|
||||
})));
|
||||
return <div className='h-full'>
|
||||
<div className="w-full h-12 flex items-center justify-between px-4 border-b border-gray-200 bg-white">
|
||||
<div className="cursor-pointer text-gray-600 hover:text-gray-900 transition-colors" title="Kevisual Router Studio" onClick={() => {
|
||||
store.setShowLeftPanel(!store.showLeftPanel);
|
||||
}}>
|
||||
{showLeftPanel ? <PanelLeftClose size={16} /> : <PanelLeft size={16} />}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
className="p-1.5 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-all duration-200 cursor-pointer"
|
||||
title={store.showFilter ? "隐藏过滤器" : "显示过滤器"}
|
||||
onClick={() => store.setShowFilter(!store.showFilter)}
|
||||
>
|
||||
{store.showFilter ? <FilterX size={16} /> : <Filter size={16} />}
|
||||
</button>
|
||||
<button
|
||||
className="p-1.5 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-all duration-200 cursor-pointer"
|
||||
title={store.showRightPanel ? "隐藏右侧面板" : "显示右侧面板"}
|
||||
onClick={() => store.setShowRightPanel(!store.showRightPanel)}
|
||||
>
|
||||
{store.showRightPanel ? <PanelRightClose size={16} /> : <PanelRight size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ height: 'calc(100% - 3rem)' }} className="overflow-auto ">
|
||||
{props.children}
|
||||
</div>
|
||||
</div >
|
||||
}
|
||||
interface RouteItem {
|
||||
id: string;
|
||||
path?: string;
|
||||
key?: string;
|
||||
description?: string;
|
||||
metadata?: Record<string, any>;
|
||||
}
|
||||
|
||||
export const App = () => {
|
||||
const { routes, queryRouteList, run, loading, searchRoutes, ...store } = useStudioStore(useShallow((state) => ({
|
||||
routes: state.routes,
|
||||
searchRoutes: state.searchRoutes,
|
||||
searchKeyword: state.searchKeyword,
|
||||
setSearchKeyword: state.setSearchKeyword,
|
||||
queryRouteList: state.queryRouteList,
|
||||
run: state.run,
|
||||
loading: state.loading,
|
||||
showFilter: state.showFilter,
|
||||
currentView: state.currentView,
|
||||
setShowFilter: state.setShowFilter,
|
||||
setShowExportDialog: state.setShowExportDialog,
|
||||
setExportRoutes: state.setExportRoutes,
|
||||
})));
|
||||
const queryViewStore = useQueryViewStore(useShallow((state) => ({
|
||||
setShowDetailsDialog: state.setShowDetailsDialog,
|
||||
setDetailsData: state.setDetailsData,
|
||||
setEditing: state.setEditing,
|
||||
})))
|
||||
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
|
||||
const [visibleIds, setVisibleIds] = useState<Set<string>>(new Set());
|
||||
const { searchKeyword, setSearchKeyword } = store
|
||||
const [defaultKeyword, setDefaultKeyword] = useState<string>('');
|
||||
useEffect(() => {
|
||||
queryRouteList(true);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (store.showFilter) {
|
||||
// 当显示过滤器时，自动聚焦输入框
|
||||
const timer = setTimeout(() => {
|
||||
const input = document.querySelector('input[placeholder="过滤路由..."]') as HTMLInputElement;
|
||||
if (input) {
|
||||
input.focus();
|
||||
}
|
||||
}, 100);
|
||||
if (!store.currentView) {
|
||||
return
|
||||
}
|
||||
const viewId = store.currentView.viewId;
|
||||
const viewItem = store.currentView.views.find(v => v.id === viewId);
|
||||
if (viewItem && viewItem.query) {
|
||||
setSearchKeyword(viewItem.query);
|
||||
setDefaultKeyword(viewItem.query);
|
||||
}
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [store.showFilter, store.currentView?.viewId]);
|
||||
const handleSearch = async (keyword: string) => {
|
||||
await searchRoutes(keyword.trim());
|
||||
};
|
||||
|
||||
const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
await handleSearch(searchKeyword);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClear = async () => {
|
||||
setSearchKeyword('');
|
||||
handleSearch('');
|
||||
};
|
||||
|
||||
const toggleDescription = (id: string) => {
|
||||
const newExpanded = new Set(expandedIds);
|
||||
if (newExpanded.has(id)) {
|
||||
newExpanded.delete(id);
|
||||
} else {
|
||||
newExpanded.add(id);
|
||||
}
|
||||
setExpandedIds(newExpanded);
|
||||
};
|
||||
|
||||
const toggleIdVisibility = (e: React.MouseEvent, id: string) => {
|
||||
e.stopPropagation();
|
||||
const newVisible = new Set(visibleIds);
|
||||
if (newVisible.has(id)) {
|
||||
newVisible.delete(id);
|
||||
} else {
|
||||
newVisible.add(id);
|
||||
}
|
||||
setVisibleIds(newVisible);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto p-6 h-full overflow-hidden flex flex-col relative">
|
||||
<ExportDialog />
|
||||
{loading && <div className="text-center text-gray-500 mb-4">加载中...</div>}
|
||||
{store.showFilter && (
|
||||
<div className="mb-3 animate-in fade-in slide-in-from-top-2 duration-300">
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 rounded-md border border-gray-300 bg-white focus-within:ring-2 focus-within:ring-gray-400 focus-within:ring-offset-1 focus-within:border-gray-400">
|
||||
<Search size={16} className="text-gray-700 shrink-0" strokeWidth={2} />
|
||||
<Input
|
||||
placeholder="输入路由关键词进行搜索..."
|
||||
className="w-full border-0! shadow-none! outline-none! bg-transparent focus-visible:outline-none! focus-visible:ring-0! focus-visible:ring-offset-0! text-sm text-gray-900 placeholder:text-gray-500"
|
||||
value={searchKeyword}
|
||||
onChange={(e) => setSearchKeyword(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
{defaultKeyword && searchKeyword !== defaultKeyword && (
|
||||
<button
|
||||
onClick={async () => {
|
||||
setSearchKeyword(defaultKeyword);
|
||||
await handleSearch(defaultKeyword);
|
||||
}}
|
||||
className="p-1 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-200 active:bg-gray-300 transition-all duration-150 cursor-pointer shrink-0"
|
||||
title="重置为默认关键词"
|
||||
>
|
||||
<RotateCcw size={16} />
|
||||
</button>
|
||||
)}
|
||||
{searchKeyword && (
|
||||
<button
|
||||
onClick={handleClear}
|
||||
className="p-1 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-200 active:bg-gray-300 transition-all duration-150 cursor-pointer shrink-0"
|
||||
title="清空搜索"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={`space-y-1 ${loading ? "opacity-50 pointer-events-none" : ""} flex-1 overflow-auto scrollbar mb-10`}>
|
||||
{routes.map((route: RouteItem) => {
|
||||
const isExpanded = expandedIds.has(route.id);
|
||||
const isIdVisible = visibleIds.has(route.id);
|
||||
const len = route.description?.length || 0;
|
||||
const isLongDescription = len > 20;
|
||||
return (
|
||||
<div
|
||||
key={route.id}
|
||||
className="px-4 py-3 border-b border-gray-100 hover:bg-gray-50/50 transition-all animate-in fade-in slide-in-from-top-1 duration-400"
|
||||
>
|
||||
<div className="flex flex-col gap-2.5">
|
||||
{/* ID and Path/Key in one line */}
|
||||
<div className="flex gap-2.5 flex-wrap items-center justify-between">
|
||||
<div className="flex gap-2.5 flex-wrap items-center">
|
||||
<span
|
||||
onClick={(e) => toggleIdVisibility(e, route.id)}
|
||||
className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-semibold bg-gray-900 text-white cursor-pointer hover:bg-gray-700 transition-all duration-200 shadow-sm"
|
||||
>
|
||||
{isIdVisible ? route.id : 'id'}
|
||||
</span>
|
||||
|
||||
{(route.path || route.key) && (
|
||||
<div className="bg-gray-100 px-3 py-1.5 rounded-md font-mono text-sm text-gray-900 border border-gray-200">
|
||||
{route.path}{route.key && ` / ${route.key}`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='inline-flex items-center justify-center gap-1'>
|
||||
|
||||
<button
|
||||
className="p-1.5 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-all duration-200 cursor-pointer"
|
||||
title="直接运行"
|
||||
onClick={() => run(route)}
|
||||
>
|
||||
<Play size={14} strokeWidth={2.5} />
|
||||
</button>
|
||||
|
||||
<button className="p-1.5 rounded-md text-gray-20 hover:text-gray-900 hover:bg-gray-200 transition-all duration-200 cursor-pointer"
|
||||
title="高级运行"
|
||||
onClick={() => run(route, 'custom')}>
|
||||
<MonitorPlay size={14} strokeWidth={2.5} />
|
||||
</button>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
className="p-1.5 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-all duration-200 cursor-pointer"
|
||||
title="更多选项"
|
||||
>
|
||||
<MoreHorizontal size={14} strokeWidth={2.5} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="border-gray-300">
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const viewItem = route.metadata?.viewItem;
|
||||
if (!viewItem) {
|
||||
toast.error('路由没有关联的视图数据');
|
||||
return;
|
||||
}
|
||||
const _viewItem = filterRouteInfo(viewItem);
|
||||
_viewItem.action = {
|
||||
path: route.path,
|
||||
key: route.key,
|
||||
}
|
||||
queryViewStore.setDetailsData(_viewItem, 'router');
|
||||
queryViewStore.setShowDetailsDialog(true);
|
||||
}}
|
||||
>
|
||||
<Info size={14} className="mr-2" />
|
||||
显示详情
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
store.setExportRoutes([route]);
|
||||
store.setShowExportDialog(true);
|
||||
}}
|
||||
>
|
||||
<Code size={14} className="mr-2" />
|
||||
导出代码
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description with expand/collapse */}
|
||||
{route.description && (
|
||||
<div
|
||||
className="cursor-pointer group"
|
||||
>
|
||||
<div
|
||||
className={`text-gray-700 transition-colors duration-200 cursor-pointer overflow-hidden`}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<p className="text-sm leading-relaxed whitespace-pre-wrap">
|
||||
{route.description}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm leading-relaxed overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{route.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{isLongDescription && (
|
||||
<p className="text-xs text-gray-400 mt-1 group-hover:text-gray-500 transition-colors duration-200"
|
||||
onClick={() => toggleDescription(route.id)}
|
||||
>
|
||||
{isExpanded ? '点击收起' : '点击展开'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata */}
|
||||
{route.metadata && Object.keys(route.metadata).length > 0 && (
|
||||
<div className="mt-0.5">
|
||||
<span className="text-xs text-gray-500 mr-2 font-medium">Metadata:</span>
|
||||
<div className="flex gap-1.5 flex-wrap">
|
||||
{Object.entries(route.metadata).map(([k, v]) => (
|
||||
<span
|
||||
key={k}
|
||||
className="inline-flex items-center px-2 py-1 rounded text-xs bg-white text-gray-700 border border-gray-200 shadow-sm"
|
||||
>
|
||||
<span className="font-semibold text-gray-900">{k}:</span> {String(v)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className='h-12 absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex items-center justify-end px-4'>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
store.setExportRoutes(routes);
|
||||
store.setShowExportDialog(true);
|
||||
}}
|
||||
className="gap-2"
|
||||
>
|
||||
<Code size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,350 +0,0 @@
|
||||
'use client';
|
||||
import { create } from 'zustand';
|
||||
import { QueryProxy, RouterViewData, RouterViewItem, pickRouterViewData } from '@kevisual/api/query-proxy'
|
||||
import { query } from '@/modules/query.ts'
|
||||
import { toast } from 'sonner';
|
||||
import { use } from '@kevisual/context'
|
||||
// import { MyCache } from '@kevisual/cache'
|
||||
import { persist } from 'zustand/middleware';
|
||||
import { app } from '@/agent/index.ts'
|
||||
import { cloneDeep } from 'es-toolkit'
|
||||
import { nanoid } from 'nanoid';
|
||||
import { Result } from '@kevisual/query';
|
||||
const historyReplace = (url: string) => {
|
||||
if (window.history.replaceState) {
|
||||
window.history.replaceState(null, '', url);
|
||||
}
|
||||
}
|
||||
type RouteItem = {
|
||||
id: string;
|
||||
path?: string;
|
||||
key?: string;
|
||||
description?: string;
|
||||
metadata?: Record<string, any>;
|
||||
}
|
||||
|
||||
type RouteViewList = Array<RouterViewData>;
|
||||
|
||||
type MessageAction = {
|
||||
path?: string;
|
||||
key?: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
export type Message = RouterViewItem<{
|
||||
_id: string;
|
||||
action: MessageAction;
|
||||
description?: string;
|
||||
response?: Result;
|
||||
}>
|
||||
|
||||
interface StudioState {
|
||||
loading: boolean;
|
||||
setLoading: (loading: boolean) => void;
|
||||
routes: Array<RouteItem>;
|
||||
searchRoutes: (keyword: string) => Promise<void>;
|
||||
run: (route: RouteItem, type?: 'normal' | 'custom') => Promise<void>;
|
||||
queryProxy?: QueryProxy;
|
||||
init: (force?: boolean) => Promise<{ queryProxy: QueryProxy }>;
|
||||
routeViewList: RouteViewList;
|
||||
getViewList: () => Promise<void>;
|
||||
queryRouteList: (first?: boolean) => Promise<void>;
|
||||
getCurrentView: () => Promise<void>;
|
||||
updateRouteView: (view: RouterViewData) => Promise<void>;
|
||||
deleteRouteView: (id: string) => Promise<void>;
|
||||
deleteRouteViewItem: (id: string, viewId: string) => void;
|
||||
currentView?: RouterViewData;
|
||||
setCurrentView: (view?: RouterViewData) => Promise<void>;
|
||||
showLeftPanel: boolean;
|
||||
setShowLeftPanel: (show: boolean) => void;
|
||||
showFilter: boolean;
|
||||
setShowFilter: (show: boolean) => void;
|
||||
showRightPanel: boolean;
|
||||
setShowRightPanel: (show: boolean) => void;
|
||||
messages: Message[];
|
||||
setMessages: (messages: Message[]) => void;
|
||||
addMessage: (message: Message) => void;
|
||||
deleteMessage: (message: Message) => void;
|
||||
searchKeyword: string;
|
||||
setSearchKeyword: (keyword: string) => void;
|
||||
showExportDialog: boolean;
|
||||
setShowExportDialog: (show: boolean) => void;
|
||||
exportRoutes?: RouteItem[];
|
||||
setExportRoutes: (routes?: RouteItem[]) => void;
|
||||
}
|
||||
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
export const filterRouteInfo = (viewData: RouterViewItem) => {
|
||||
const data = cloneDeep(viewData) as RouterViewItem
|
||||
// 删除可能过大的字段，避免在详情弹窗展示
|
||||
if (data.type === 'api') {
|
||||
delete data?.api?.query;
|
||||
}
|
||||
if (data.type === 'worker') {
|
||||
delete data?.worker?.worker;
|
||||
}
|
||||
if (data.type === 'context') {
|
||||
delete data?.context?.router;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
export const getPayload = (value: { path?: string, key?: string, id?: string, payload?: any, [key: string]: any }): Record<string, any> => {
|
||||
const { path, key, id, payload, ...rest } = value;
|
||||
return {
|
||||
...rest,
|
||||
...payload,
|
||||
}
|
||||
}
|
||||
export const useStudioStore = create<StudioState>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
loading: false,
|
||||
setLoading: (loading: boolean) => set({ loading }),
|
||||
routes: [],
|
||||
searchRoutes: async (keyword: string) => {
|
||||
let queryProxy = get().queryProxy!;
|
||||
console.log('[queryProxy] 搜索路由', keyword);
|
||||
const routes: any[] = await queryProxy.listRoutes(() => true, { query: keyword });
|
||||
set({ routes, searchKeyword: keyword });
|
||||
},
|
||||
searchKeyword: '',
|
||||
setSearchKeyword: (keyword: string) => set({ searchKeyword: keyword }),
|
||||
currentView: undefined,
|
||||
queryRouteList: async (first: boolean = false) => {
|
||||
first && await get().getCurrentView();
|
||||
const state = await get().init();
|
||||
let currentView: RouterViewData | undefined = get().currentView;
|
||||
let queryProxy = state.queryProxy;
|
||||
|
||||
console.log('开始查询路由列表，当前视图:', queryProxy.emitter.eventNames());
|
||||
if (first) return;
|
||||
let searchKeyword = ''
|
||||
const viewId = currentView?.viewId ?? ''
|
||||
if (viewId && currentView) {
|
||||
const query = currentView?.views?.find(v => v.id === viewId)?.query || '';
|
||||
if (query) {
|
||||
searchKeyword = query;
|
||||
}
|
||||
}
|
||||
// console.log('视图ID:', currentView, searchKeyword);
|
||||
// console.log('查询路由列表，视图ID:', viewId, queryProxy.router?.routes?.length);
|
||||
const routes: any[] = await queryProxy.listRoutes(() => true, { query: searchKeyword });
|
||||
set({ routes, searchKeyword });
|
||||
},
|
||||
setCurrentView: async (view?: RouterViewData) => {
|
||||
const beforeView = get().currentView;
|
||||
set({ currentView: view, routes: [] });
|
||||
const viewId = view?.viewId || '';
|
||||
const url = new URL(window.location.href);
|
||||
if (viewId) {
|
||||
url.searchParams.set('viewId', viewId);
|
||||
} else {
|
||||
url.searchParams.delete('viewId');
|
||||
}
|
||||
historyReplace(url.toString());
|
||||
console.log('视图切换', beforeView, view);
|
||||
await get().init(beforeView?.id !== view?.id);
|
||||
await get().queryRouteList();
|
||||
},
|
||||
getViewList: async () => {
|
||||
const res = await query.post({ path: 'views', key: 'list' });
|
||||
if (res.code === 200) {
|
||||
const list = res.data.list as RouteViewList || [];
|
||||
set({ routeViewList: list });
|
||||
}
|
||||
},
|
||||
getCurrentView: async () => {
|
||||
const url = new URL(window.location.href);
|
||||
const viewId = url.searchParams.get('viewId');
|
||||
if (!viewId) {
|
||||
return;
|
||||
}
|
||||
const res = await query.post({ path: 'views', key: 'current', data: { viewId: viewId } });
|
||||
if (res.code === 200) {
|
||||
const view = res.data as RouterViewData;
|
||||
view.viewId = viewId;
|
||||
set({ currentView: view });
|
||||
} else {
|
||||
set({ currentView: undefined });
|
||||
}
|
||||
},
|
||||
routeViewList: [],
|
||||
updateRouteView: async (view: RouterViewData) => {
|
||||
const res = await query.post({ path: 'views', key: 'update', data: view });
|
||||
if (res.code !== 200) {
|
||||
toast.error(`视图更新失败：${res.message || '未知错误'}`);
|
||||
return;
|
||||
} else {
|
||||
get().getViewList();
|
||||
toast.success('视图更新成功');
|
||||
}
|
||||
},
|
||||
deleteRouteView: async (id: string) => {
|
||||
const res = await query.post({ path: 'views', key: 'delete', data: { id } });
|
||||
if (res.code !== 200) {
|
||||
toast.error(`视图删除失败：${res.message || '未知错误'}`);
|
||||
return;
|
||||
}
|
||||
get().getViewList();
|
||||
toast.success('视图删除成功');
|
||||
},
|
||||
deleteRouteViewItem: (id: string, viewId: string) => {
|
||||
const routeViewList = get().routeViewList;
|
||||
const viewItem = routeViewList.find(view => view.id === id);
|
||||
if (!viewItem) {
|
||||
toast.error('视图项不存在');
|
||||
return;
|
||||
}
|
||||
viewItem.views = viewItem.views?.filter(v => v.id !== viewId);
|
||||
get().updateRouteView(viewItem);
|
||||
const newList = routeViewList.map(view => {
|
||||
if (view.id === viewItem.id) {
|
||||
return viewItem;
|
||||
}
|
||||
return view;
|
||||
});
|
||||
set({ routeViewList: [...newList] });
|
||||
console.log('删除视图项', id, newList);
|
||||
},
|
||||
run: async (route: RouteItem, type?: 'normal' | 'custom') => {
|
||||
const state = await get().init();
|
||||
const isCustom = type === 'custom';
|
||||
let queryProxy = state.queryProxy;
|
||||
let showRightPanel = get().showRightPanel;
|
||||
const action = {
|
||||
path: route.path,
|
||||
key: route.key
|
||||
}
|
||||
const res = await queryProxy.run(action);
|
||||
if (res.code !== 200) {
|
||||
toast.error(`运行失败：${res.message || '未知错误'}`);
|
||||
} else if (res.code === 200) {
|
||||
if (!showRightPanel) {
|
||||
if (isCustom) {
|
||||
showRightPanel = true;
|
||||
set({ showRightPanel: true });
|
||||
} else {
|
||||
toast.success('运行成功');
|
||||
}
|
||||
}
|
||||
}
|
||||
if (showRightPanel) {
|
||||
if (route.metadata && route.metadata?.viewItem) {
|
||||
const messages = get().messages
|
||||
const viewItem = cloneDeep(route.metadata.viewItem) as RouterViewItem;
|
||||
viewItem.response = res;
|
||||
viewItem.action = action
|
||||
viewItem.description = route.description || viewItem.description;
|
||||
// @ts-ignore
|
||||
viewItem._id = nanoid(16);
|
||||
set({ messages: [...messages, viewItem as Message] });
|
||||
}
|
||||
}
|
||||
},
|
||||
queryProxy: undefined,
|
||||
router: undefined,
|
||||
init: async (force?: boolean) => {
|
||||
// let _url = 'http://localhost:52002/api/router'; // Github starred
|
||||
// let _url = 'http://localhost:52000/api/router'; // 浏览器
|
||||
// let _url = '/api/router';
|
||||
let queryProxy = get().queryProxy;
|
||||
if (queryProxy && !force) {
|
||||
return { queryProxy };
|
||||
}
|
||||
let currentView: RouterViewData | undefined = get().currentView;
|
||||
let url = '/api/router';
|
||||
const _url = new URL(location.href)
|
||||
const pathname = _url.pathname
|
||||
const [user, repo] = pathname.split('/').filter(Boolean)
|
||||
if (repo === 'v1') {
|
||||
url = pathname;
|
||||
}
|
||||
console.log('初始化 QueryProxy，URL:', url);
|
||||
// @ts-ignore
|
||||
const routerViewData: RouterViewData = currentView || {
|
||||
_id: nanoid(16),
|
||||
views: [{
|
||||
id: '',
|
||||
title: '默认视图',
|
||||
query: ``
|
||||
}],
|
||||
data: {
|
||||
items: [
|
||||
{
|
||||
title: '默认路由',
|
||||
id: '',
|
||||
description: '',
|
||||
type: 'api',
|
||||
api: {
|
||||
url: url
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
viewId: '',
|
||||
}
|
||||
let searchKeyword = '';
|
||||
const viewId = currentView?.viewId ?? ''
|
||||
if (viewId && currentView) {
|
||||
const query = currentView?.views?.find(v => v.id === viewId)?.query || '';
|
||||
if (query) {
|
||||
searchKeyword = query;
|
||||
}
|
||||
}
|
||||
console.log('初始化 QueryProxy', routerViewData);
|
||||
queryProxy = new QueryProxy({
|
||||
routerViewData,
|
||||
router: app as any,
|
||||
});
|
||||
set({ queryProxy, searchKeyword });
|
||||
queryProxy.emitter.once("initComplete", async () => {
|
||||
console.log('[queryProxy] QueryProxy 初始化完成事件，重新查询路由列表');
|
||||
await sleep(1000);
|
||||
get().searchRoutes(searchKeyword);
|
||||
});
|
||||
set({ loading: true });
|
||||
await queryProxy.init();
|
||||
set({ loading: false });
|
||||
|
||||
return { queryProxy }
|
||||
},
|
||||
showLeftPanel: false,
|
||||
setShowLeftPanel: (show: boolean) => set({ showLeftPanel: show }),
|
||||
showRightPanel: true,
|
||||
setShowRightPanel: (show: boolean) => set({ showRightPanel: show }),
|
||||
showFilter: false,
|
||||
setShowFilter: (show: boolean) => set({ showFilter: show }),
|
||||
messages: [],
|
||||
setMessages: (messages: any[]) => set({ messages }),
|
||||
deleteMessage: (message: any) => {
|
||||
const messages = get().messages;
|
||||
const index = messages.findIndex(m => {
|
||||
return m._id === message._id || m.id === message.id;
|
||||
});
|
||||
if (index !== -1) {
|
||||
messages.splice(index, 1);
|
||||
set({ messages: [...messages] });
|
||||
}
|
||||
},
|
||||
addMessage: (message: any) => {
|
||||
const messages = get().messages;
|
||||
set({ messages: [...messages, message] });
|
||||
},
|
||||
showExportDialog: false,
|
||||
setShowExportDialog: (show: boolean) => set({ showExportDialog: show }),
|
||||
exportRoutes: undefined,
|
||||
setExportRoutes: (routes?: RouteItem[]) => set({ exportRoutes: routes })
|
||||
}),
|
||||
{
|
||||
name: 'studio-storage',
|
||||
partialize: (state) => ({
|
||||
showLeftPanel: state.showLeftPanel,
|
||||
showRightPanel: state.showRightPanel,
|
||||
showFilter: state.showFilter,
|
||||
}),
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
use('studioStore', () => {
|
||||
return useStudioStore;
|
||||
});
|
||||
@@ -1,200 +0,0 @@
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Query } from "@kevisual/query"
|
||||
import { QueryRouterServer } from "@kevisual/router/browser"
|
||||
import { nanoid } from "nanoid"
|
||||
|
||||
export type RouterViewItem = RouterViewApi | RouterViewContext | RouterViewWorker;
|
||||
type RouteViewBase = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
enabled?: boolean;
|
||||
}
|
||||
export type RouterViewApi = {
|
||||
type: 'api',
|
||||
api: {
|
||||
url: string,
|
||||
// 已初始化的query实例，不需要编辑配置
|
||||
query?: Query
|
||||
}
|
||||
} & RouteViewBase;
|
||||
|
||||
export type RouterViewContext = {
|
||||
type: 'context',
|
||||
context: {
|
||||
key: string,
|
||||
// 从context中获取router，不需要编辑配置
|
||||
router?: QueryRouterServer
|
||||
}
|
||||
} & RouteViewBase;
|
||||
export type RouterViewWorker = {
|
||||
type: 'worker',
|
||||
worker: {
|
||||
type: 'Worker' | 'SharedWorker' | 'serviceWorker',
|
||||
url: string,
|
||||
// 已初始化的worker实例，不需要编辑配置
|
||||
worker?: Worker | SharedWorker | ServiceWorker,
|
||||
/**
|
||||
* worker选项
|
||||
* default: { type: 'module' }
|
||||
*/
|
||||
workerOptions?: {
|
||||
type: 'module' | 'classic'
|
||||
}
|
||||
}
|
||||
} & RouteViewBase;
|
||||
interface DataItemFormProps {
|
||||
item: RouterViewItem
|
||||
onChange: (item: any) => void
|
||||
onRemove: () => void
|
||||
}
|
||||
|
||||
export const DataItemForm = ({ item, onChange, onRemove }: DataItemFormProps) => {
|
||||
const handleChange = (field: string, value: any) => {
|
||||
if (field === 'type') {
|
||||
const newItem: RouterViewItem = { ...item, type: value }
|
||||
if (value === 'api' && !('api' in item)) {
|
||||
(newItem as RouterViewApi).api = { url: '' }
|
||||
} else if (value === 'context' && !('context' in item)) {
|
||||
(newItem as RouterViewContext).context = { key: '' }
|
||||
} else if (value === 'worker' && !('worker' in item)) {
|
||||
(newItem as RouterViewWorker).worker = { type: 'Worker', url: '', workerOptions: { type: 'module' } }
|
||||
}
|
||||
if (!newItem.id) {
|
||||
newItem.id = nanoid(16)
|
||||
}
|
||||
onChange(newItem)
|
||||
} else {
|
||||
onChange({ ...item, [field]: value })
|
||||
}
|
||||
}
|
||||
|
||||
const handleNestedChange = (parent: string, field: string, value: any) => {
|
||||
const parentValue = item[parent as keyof RouterViewItem] as any
|
||||
const newParentValue: Record<string, any> = {
|
||||
...(parentValue || {}),
|
||||
[field]: value
|
||||
}
|
||||
onChange({ ...item, [parent]: newParentValue })
|
||||
}
|
||||
|
||||
const handleNestedDeepChange = (parent: string, nestedParent: string, field: string, value: any) => {
|
||||
const parentValue = item[parent as keyof RouterViewItem] as any
|
||||
const nestedValue = parentValue?.[nestedParent] as Record<string, any> | undefined
|
||||
const newNestedValue: Record<string, any> = {
|
||||
...(nestedValue || {}),
|
||||
[field]: value
|
||||
}
|
||||
const newParentValue: Record<string, any> = {
|
||||
...(parentValue || {}),
|
||||
[nestedParent]: newNestedValue
|
||||
}
|
||||
onChange({ ...item, [parent]: newParentValue })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border border-gray-300 rounded-lg p-4 mb-4 space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="font-medium">数据项配置</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
className="text-sm text-red-500 hover:text-red-700"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>标题</Label>
|
||||
<Input
|
||||
value={item.title || ''}
|
||||
onChange={(e) => handleChange('title', e.target.value)}
|
||||
placeholder="输入标题"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>类型</Label>
|
||||
<select
|
||||
value={item.type}
|
||||
onChange={(e) => handleChange('type', e.target.value)}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<option value="api">API</option>
|
||||
<option value="context">Context</option>
|
||||
<option value="worker">Worker</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="enabled"
|
||||
checked={item.enabled !== false}
|
||||
onCheckedChange={(checked) => handleChange('enabled', checked)}
|
||||
/>
|
||||
<Label htmlFor="enabled" className="cursor-pointer">启用</Label>
|
||||
</div>
|
||||
|
||||
{(item.type === 'api') && (
|
||||
<div className="space-y-2">
|
||||
<Label>API URL</Label>
|
||||
<Input
|
||||
value={item.api?.url || ''}
|
||||
onChange={(e) => handleNestedChange('api', 'url', e.target.value)}
|
||||
placeholder="输入 API 地址"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{item.type === 'context' && (
|
||||
<div className="space-y-2">
|
||||
<Label>Context Key</Label>
|
||||
<Input
|
||||
value={item.context?.key || ''}
|
||||
onChange={(e) => handleNestedChange('context', 'key', e.target.value)}
|
||||
placeholder="输入 Context Key"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{item.type === 'worker' && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Worker Type</Label>
|
||||
<select
|
||||
value={item.worker?.type || 'Worker'}
|
||||
onChange={(e) => handleNestedChange('worker', 'type', e.target.value)}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<option value="Worker">Worker</option>
|
||||
<option value="SharedWorker">SharedWorker</option>
|
||||
<option value="serviceWorker">ServiceWorker</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Worker URL</Label>
|
||||
<Input
|
||||
value={item.worker?.url || ''}
|
||||
onChange={(e) => handleNestedChange('worker', 'url', e.target.value)}
|
||||
placeholder="输入 Worker URL"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Worker Options Type</Label>
|
||||
<select
|
||||
value={item.worker?.workerOptions?.type || 'module'}
|
||||
onChange={(e) => handleNestedDeepChange('worker', 'workerOptions', 'type', e.target.value)}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<option value="module">Module</option>
|
||||
<option value="classic">Classic</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,209 +0,0 @@
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { DataItemForm } from "@/app/view/components/DataItemForm"
|
||||
import { ViewFormItem } from "@/app/view/components/ViewFormItem"
|
||||
import { nanoid } from "nanoid"
|
||||
|
||||
interface ViewEditorProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
data?: {
|
||||
id?: string
|
||||
title?: string
|
||||
data?: { items: any[] }
|
||||
views?: any[]
|
||||
}
|
||||
onSave: (data: any) => void
|
||||
}
|
||||
|
||||
export const ViewEditor = ({ open, onOpenChange, data, onSave }: ViewEditorProps) => {
|
||||
const [title, setTitle] = useState('')
|
||||
const [dataItems, setDataItems] = useState<any[]>([])
|
||||
const [views, setViews] = useState<any[]>([])
|
||||
const dataItemsScrollRef = useRef<HTMLDivElement>(null)
|
||||
const viewsScrollRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const isUpdate = !!data?.id
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setTitle(data?.title || '')
|
||||
setDataItems(data?.data?.items || [])
|
||||
setViews(data?.views || [])
|
||||
}
|
||||
}, [open, data])
|
||||
|
||||
const handleAddDataItem = () => {
|
||||
setDataItems([...dataItems, { type: 'api', api: { url: '' } }])
|
||||
// 异步滚动到底部，使用 smooth 平滑滚动
|
||||
setTimeout(() => {
|
||||
if (dataItemsScrollRef.current) {
|
||||
dataItemsScrollRef.current.scrollTo({
|
||||
top: dataItemsScrollRef.current.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const handleUpdateDataItem = (index: number, item: any) => {
|
||||
const newItems = [...dataItems]
|
||||
newItems[index] = item
|
||||
setDataItems(newItems)
|
||||
}
|
||||
|
||||
const handleRemoveDataItem = (index: number) => {
|
||||
setDataItems(dataItems.filter((_, i) => i !== index))
|
||||
}
|
||||
|
||||
const handleAddView = () => {
|
||||
setViews([...views, { id: nanoid(16), title: '', query: '' }])
|
||||
// 异步滚动到底部，使用 smooth 平滑滚动
|
||||
setTimeout(() => {
|
||||
if (viewsScrollRef.current) {
|
||||
viewsScrollRef.current.scrollTo({
|
||||
top: viewsScrollRef.current.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const handleUpdateView = (index: number, view: any) => {
|
||||
const newViews = [...views]
|
||||
newViews[index] = view
|
||||
setViews(newViews)
|
||||
}
|
||||
|
||||
const handleRemoveView = (index: number) => {
|
||||
setViews(views.filter((_, i) => i !== index))
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
const pickData = dataItems.map(item => {
|
||||
if (item.type === 'api') {
|
||||
delete item.api.query
|
||||
}
|
||||
if (item.type === 'worker') {
|
||||
delete item.worker.worker
|
||||
}
|
||||
if (item.type === 'context') {
|
||||
delete item.context.router
|
||||
}
|
||||
if (item.type === 'page') {
|
||||
|
||||
}
|
||||
return item
|
||||
})
|
||||
const viewData = {
|
||||
id: data?.id,
|
||||
title,
|
||||
data: {
|
||||
items: pickData
|
||||
},
|
||||
views
|
||||
}
|
||||
onSave(viewData)
|
||||
onOpenChange(false)
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
onOpenChange(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-3xl! max-h-[80vh] overflow-hidden">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isUpdate ? '编辑视图' : '新增视图'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* 固定的视图标题 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">视图标题</Label>
|
||||
<Input
|
||||
id="title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="输入视图标题"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tabs 容器 */}
|
||||
<Tabs defaultValue="data" className="w-full flex flex-col">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="data">数据项配置</TabsTrigger>
|
||||
<TabsTrigger value="views">视图配置</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* 数据项配置 Tab */}
|
||||
<TabsContent value="data" className="flex flex-col mt-4">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="font-medium">数据项配置 (data.items)</h3>
|
||||
<Button type="button" variant="outline" size="sm" onClick={handleAddDataItem} className="cursor-pointer">
|
||||
添加数据项
|
||||
</Button>
|
||||
</div>
|
||||
<div ref={dataItemsScrollRef} className="space-y-4 max-h-[50vh] overflow-y-auto pr-4">
|
||||
{dataItems.length === 0 ? (
|
||||
<div className="text-center text-sm text-gray-500 py-8">
|
||||
暂无数据项，点击"添加数据项"开始配置
|
||||
</div>
|
||||
) : (
|
||||
dataItems.map((item, index) => (
|
||||
<DataItemForm
|
||||
key={index}
|
||||
item={item}
|
||||
onChange={(newItem) => handleUpdateDataItem(index, newItem)}
|
||||
onRemove={() => handleRemoveDataItem(index)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* 视图配置 Tab */}
|
||||
<TabsContent value="views" className="flex flex-col mt-4">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="font-medium">视图配置 (views)</h3>
|
||||
<Button type="button" variant="outline" size="sm" onClick={handleAddView} className="cursor-pointer">
|
||||
添加视图
|
||||
</Button>
|
||||
</div>
|
||||
<div ref={viewsScrollRef} className="space-y-4 max-h-[50vh] overflow-y-auto pr-4">
|
||||
{views.length === 0 ? (
|
||||
<div className="text-center text-sm text-gray-500 py-8">
|
||||
暂无视图，点击"添加视图"开始配置
|
||||
</div>
|
||||
) : (
|
||||
views.map((view, index) => (
|
||||
<ViewFormItem
|
||||
key={view.id || index}
|
||||
view={view}
|
||||
onChange={(newView) => handleUpdateView(index, newView)}
|
||||
onRemove={() => handleRemoveView(index)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={handleClose} className="cursor-pointer">
|
||||
取消
|
||||
</Button>
|
||||
<Button type="button" onClick={handleSave} className="cursor-pointer">
|
||||
保存
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { toast } from "sonner"
|
||||
|
||||
interface ViewFormProps {
|
||||
view: any
|
||||
onChange: (view: any) => void
|
||||
onRemove: () => void
|
||||
}
|
||||
|
||||
export const ViewFormItem = ({ view, onChange, onRemove }: ViewFormProps) => {
|
||||
const handleChange = (field: string, value: any) => {
|
||||
onChange({ ...view, [field]: value })
|
||||
}
|
||||
const handleCopyId = async (id: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(id);
|
||||
toast.success('已复制到剪贴板', { duration: 1000 });
|
||||
} catch (err) {
|
||||
console.error('复制失败', err);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="border border-gray-300 rounded-lg p-4 mb-4 space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="font-medium">视图配置</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
className="text-sm text-red-500 hover:text-red-700"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2" onClick={() => handleCopyId(view.id)}>
|
||||
<Label>ID</Label>
|
||||
<Input
|
||||
value={view.id || ''}
|
||||
onChange={(e) => handleChange('id', e.target.value)}
|
||||
placeholder="自动生成"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>标题</Label>
|
||||
<Input
|
||||
value={view.title || ''}
|
||||
onChange={(e) => handleChange('title', e.target.value)}
|
||||
placeholder="输入视图标题"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>查询语句</Label>
|
||||
<Input
|
||||
value={view.query || ''}
|
||||
onChange={(e) => handleChange('query', e.target.value)}
|
||||
placeholder="输入查询语句"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,247 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useStudioStore } from '../studio/store.ts';
|
||||
import { Search, RotateCw, Plus, MoreHorizontal, Layout, Edit2, Trash2, MousePointer2 } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { ViewEditor } from "@/app/view/components/ViewEditor.tsx";
|
||||
import { toast } from "sonner";
|
||||
import { useShallow } from "zustand/shallow";
|
||||
|
||||
const ViewItem = ({ view, onEdit, onDelete, onDeleteViewItem }: { view: any; onEdit: (view: any) => void; onDelete: (id: string) => void; onDeleteViewItem: (id: string, viewId: string) => void }) => {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const studioStore = useStudioStore(useShallow((state) => ({
|
||||
currentView: state.currentView,
|
||||
searchRoutes: state.searchRoutes
|
||||
})));
|
||||
useEffect(() => {
|
||||
const currentViewId = studioStore.currentView?.viewId;
|
||||
if (view.views.some((v: any) => v.id === currentViewId)) {
|
||||
setExpanded(true);
|
||||
}
|
||||
}, [studioStore.currentView?.viewId]);
|
||||
const ShowViews = (props: { views: { id: string, title: string, query?: any }[] }) => {
|
||||
const studioStore = useStudioStore(useShallow((state) => ({
|
||||
currentView: state.currentView,
|
||||
setCurrentView: state.setCurrentView,
|
||||
})));
|
||||
const currentViewId = studioStore.currentView?.viewId;
|
||||
const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
|
||||
const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
|
||||
const isActiveView = (viewId: string) => {
|
||||
return viewId === currentViewId;
|
||||
}
|
||||
return <div className="mt-2 ml-4 w-full border-l-2 border-l-gray-300 border-gray-300 pl-3 space-y-1">
|
||||
{props.views.map(v => (
|
||||
<div
|
||||
key={v.id}
|
||||
className={`text-sm px-2 py-1 rounded cursor-pointer transition-colors flex items-center justify-between group ${isActiveView(v.id) ? 'text-black bg-gray-100' : 'text-gray-600 hover:text-black hover:bg-gray-100'}`}
|
||||
onClick={(e) => {
|
||||
studioStore.setCurrentView({ ...view, viewId: v.id })
|
||||
}}
|
||||
>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<span>{v.title || '未命名视图'}</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" className="max-w-xs">
|
||||
<div className="text-xs">
|
||||
{v.query ? v.query : '无查询字段'}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<Popover open={deleteConfirmOpen && deleteTargetId === v.id} onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setDeleteConfirmOpen(false);
|
||||
setDeleteTargetId(null);
|
||||
}
|
||||
}}>
|
||||
<PopoverTrigger>
|
||||
<Trash2
|
||||
className="h-4 w-4 text-gray-400 hover:text-gray-600 transition-colors cursor-pointer opacity-0 group-hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDeleteTargetId(v.id);
|
||||
setDeleteConfirmOpen(true);
|
||||
}}
|
||||
/>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="bottom" align="end" sideOffset={8} className="w-80 border-gray-300">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-sm">删除视图</h4>
|
||||
<p className="text-xs text-gray-600 mt-1">确定要删除这个视图吗？此操作无法撤销。</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button className="border-gray-300" variant="outline" size="sm" onClick={() => setDeleteConfirmOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (deleteTargetId) {
|
||||
onDeleteViewItem(view.id, deleteTargetId);
|
||||
setDeleteConfirmOpen(false);
|
||||
setDeleteTargetId(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
return <div
|
||||
key={view.id}
|
||||
className="flex flex-col items-center py-3 px-4 border-b border-gray-200 last:border-b-0 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="w-full flex justify-between" onClick={() => setExpanded(!expanded)}>
|
||||
<div className="flex items-center cursor-pointer" >
|
||||
<Layout className="h-4 w-4 mr-2 text-gray-500" />
|
||||
{view.title || '未命名视图'}
|
||||
</div>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
className="inline-flex items-center justify-center h-8 w-8 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="border-gray-300">
|
||||
<DropdownMenuItem className="cursor-pointer" onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
studioStore.searchRoutes('')
|
||||
}}>
|
||||
<MousePointer2 className="h-4 w-4 mr-2" />
|
||||
选中
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="cursor-pointer" onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEdit(view);
|
||||
}}>
|
||||
<Edit2 className="h-4 w-4 mr-2" />
|
||||
编辑
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete(view.id);
|
||||
}}
|
||||
className="cursor-pointer text-red-600 focus:text-red-600"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
删除
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{expanded &&
|
||||
<ShowViews views={view.views} />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
export const ViewList = () => {
|
||||
const { routeViewList, updateRouteView, deleteRouteView, deleteRouteViewItem, getViewList } = useStudioStore();
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [editorOpen, setEditorOpen] = useState(false);
|
||||
const [editingView, setEditingView] = useState<any>(null);
|
||||
|
||||
const filteredViews = routeViewList.filter(view =>
|
||||
(view.title || '未命名视图').toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(view.description || '').toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
useEffect(() => {
|
||||
getViewList();
|
||||
}, [])
|
||||
|
||||
const handleRefresh = async () => {
|
||||
const toastId = toast.loading('正在刷新视图列表...');
|
||||
await getViewList();
|
||||
// toast.update(toastId, { render: '视图列表已刷新', type: 'success', id: false, autoClose: 1000 });
|
||||
toast.success('视图列表已刷新', { duration: 1000 });
|
||||
toast.dismiss(toastId);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
handleEdit({});
|
||||
};
|
||||
|
||||
const handleEdit = (view: any) => {
|
||||
setEditingView(view);
|
||||
setEditorOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
if (confirm('确定要删除这个视图吗？')) {
|
||||
deleteRouteView(id);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveView = (viewData: any) => {
|
||||
updateRouteView(viewData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-full max-w-4xl p-4 border border-gray-200 rounded-md shadow-sm">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<div className="relative flex-1">
|
||||
<Input
|
||||
placeholder="搜索视图..."
|
||||
className="pl-3 pr-8"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<Search className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
</div>
|
||||
<Button variant="outline" size="icon" className="h-8 w-8 cursor-pointer border-gray-300" onClick={handleRefresh}>
|
||||
<RotateCw className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" className="h-8 w-8 cursor-pointer border-gray-300" onClick={handleAdd}>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
{filteredViews.length === 0 ? (
|
||||
<div className="text-center py-4 text-gray-500">
|
||||
{searchTerm ? '未找到匹配的视图' : '暂无视图'}
|
||||
</div>
|
||||
) : (
|
||||
filteredViews.map((view) => (
|
||||
<ViewItem
|
||||
key={view.id}
|
||||
view={view}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
onDeleteViewItem={deleteRouteViewItem}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ViewEditor
|
||||
open={editorOpen}
|
||||
onOpenChange={setEditorOpen}
|
||||
data={editingView}
|
||||
onSave={handleSaveView}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import { mergeProps } from "@base-ui/react/merge-props"
|
||||
import { useRender } from "@base-ui/react/use-render"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
||||
destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
|
||||
outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
||||
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
render,
|
||||
...props
|
||||
}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
|
||||
return useRender({
|
||||
defaultTagName: "span",
|
||||
props: mergeProps<"span">(
|
||||
{
|
||||
className: cn(badgeVariants({ className, variant })),
|
||||
},
|
||||
props
|
||||
),
|
||||
render,
|
||||
state: {
|
||||
slot: "badge",
|
||||
variant,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -1,125 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { mergeProps } from "@base-ui/react/merge-props"
|
||||
import { useRender } from "@base-ui/react/use-render"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
|
||||
|
||||
function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
|
||||
return (
|
||||
<nav
|
||||
aria-label="breadcrumb"
|
||||
data-slot="breadcrumb"
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
|
||||
return (
|
||||
<ol
|
||||
data-slot="breadcrumb-list"
|
||||
className={cn(
|
||||
"text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="breadcrumb-item"
|
||||
className={cn("gap-1 inline-flex items-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbLink({
|
||||
className,
|
||||
render,
|
||||
...props
|
||||
}: useRender.ComponentProps<"a">) {
|
||||
return useRender({
|
||||
defaultTagName: "a",
|
||||
props: mergeProps<"a">(
|
||||
{
|
||||
className: cn("hover:text-foreground transition-colors", className),
|
||||
},
|
||||
props
|
||||
),
|
||||
render,
|
||||
state: {
|
||||
slot: "breadcrumb-link",
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="breadcrumb-page"
|
||||
role="link"
|
||||
aria-disabled="true"
|
||||
aria-current="page"
|
||||
className={cn("text-foreground font-normal", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbSeparator({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="breadcrumb-separator"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn("[&>svg]:size-3.5", className)}
|
||||
{...props}
|
||||
>
|
||||
{children ?? (
|
||||
<ChevronRightIcon />
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbEllipsis({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="breadcrumb-ellipsis"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn(
|
||||
"size-5 [&>svg]:size-4 flex items-center justify-center",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontalIcon
|
||||
/>
|
||||
<span className="sr-only">More</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Breadcrumb,
|
||||
BreadcrumbList,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
BreadcrumbEllipsis,
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
import { Button as ButtonPrimitive } from "@base-ui/react/button"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
|
||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
|
||||
destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
|
||||
icon: "size-8",
|
||||
"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
||||
return (
|
||||
<ButtonPrimitive
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -1,94 +0,0 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
className={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
|
||||
>
|
||||
<CheckIcon
|
||||
/>
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
@@ -1,188 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { Command as CommandPrimitive } from "cmdk"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
} from "@/components/ui/input-group"
|
||||
import { SearchIcon, CheckIcon } from "lucide-react"
|
||||
|
||||
function Command({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive>) {
|
||||
return (
|
||||
<CommandPrimitive
|
||||
data-slot="command"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandDialog({
|
||||
title = "Command Palette",
|
||||
description = "Search for a command to run...",
|
||||
children,
|
||||
className,
|
||||
showCloseButton = false,
|
||||
...props
|
||||
}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
|
||||
title?: string
|
||||
description?: string
|
||||
className?: string
|
||||
showCloseButton?: boolean
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<Dialog {...props}>
|
||||
<DialogHeader className="sr-only">
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogContent
|
||||
className={cn(
|
||||
"rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0",
|
||||
className
|
||||
)}
|
||||
showCloseButton={showCloseButton}
|
||||
>
|
||||
{children}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
||||
return (
|
||||
<div data-slot="command-input-wrapper" className="p-1 pb-0">
|
||||
<InputGroup className="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
|
||||
<CommandPrimitive.Input
|
||||
data-slot="command-input"
|
||||
className={cn(
|
||||
"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
<InputGroupAddon>
|
||||
<SearchIcon className="size-4 shrink-0 opacity-50" />
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.List>) {
|
||||
return (
|
||||
<CommandPrimitive.List
|
||||
data-slot="command-list"
|
||||
className={cn(
|
||||
"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandEmpty({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
||||
return (
|
||||
<CommandPrimitive.Empty
|
||||
data-slot="command-empty"
|
||||
className={cn("py-6 text-center text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
||||
return (
|
||||
<CommandPrimitive.Group
|
||||
data-slot="command-group"
|
||||
className={cn("text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
||||
return (
|
||||
<CommandPrimitive.Separator
|
||||
data-slot="command-separator"
|
||||
className={cn("bg-border -mx-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
||||
return (
|
||||
<CommandPrimitive.Item
|
||||
data-slot="command-item"
|
||||
className={cn(
|
||||
"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
|
||||
</CommandPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="command-shortcut"
|
||||
className={cn("text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Command,
|
||||
CommandDialog,
|
||||
CommandInput,
|
||||
CommandList,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandItem,
|
||||
CommandShortcut,
|
||||
CommandSeparator,
|
||||
}
|
||||
@@ -1,149 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Dialog({ ...props }: DialogPrimitive.Root.Props) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: DialogPrimitive.Backdrop.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Backdrop
|
||||
data-slot="dialog-overlay"
|
||||
className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: DialogPrimitive.Popup.Props & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Popup
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-2 right-2"
|
||||
size="icon-sm"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Popup>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("gap-2 flex flex-col", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({
|
||||
className,
|
||||
showCloseButton = false,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close render={<Button variant="outline" />}>
|
||||
Close
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn("text-base leading-none font-medium", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: DialogPrimitive.Description.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
@@ -1,262 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronRightIcon, CheckIcon } from "lucide-react"
|
||||
|
||||
function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
|
||||
return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
|
||||
return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
|
||||
return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
align = "start",
|
||||
alignOffset = 0,
|
||||
side = "bottom",
|
||||
sideOffset = 4,
|
||||
className,
|
||||
...props
|
||||
}: MenuPrimitive.Popup.Props &
|
||||
Pick<
|
||||
MenuPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset"
|
||||
>) {
|
||||
return (
|
||||
<MenuPrimitive.Portal>
|
||||
<MenuPrimitive.Positioner
|
||||
className="isolate z-50 outline-none"
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
>
|
||||
<MenuPrimitive.Popup
|
||||
data-slot="dropdown-menu-content"
|
||||
className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden", className )}
|
||||
{...props}
|
||||
/>
|
||||
</MenuPrimitive.Positioner>
|
||||
</MenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
|
||||
return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.GroupLabel.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.GroupLabel
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: MenuPrimitive.Item.Props & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
|
||||
return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: MenuPrimitive.SubmenuTrigger.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.SubmenuTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto" />
|
||||
</MenuPrimitive.SubmenuTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
align = "start",
|
||||
alignOffset = -3,
|
||||
side = "right",
|
||||
sideOffset = 0,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuContent>) {
|
||||
return (
|
||||
<DropdownMenuContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 w-auto", className)}
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.CheckboxItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="absolute right-2 flex items-center justify-center pointer-events-none"
|
||||
data-slot="dropdown-menu-checkbox-item-indicator"
|
||||
>
|
||||
<MenuPrimitive.CheckboxItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</MenuPrimitive.CheckboxItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
|
||||
return (
|
||||
<MenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.RadioItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="absolute right-2 flex items-center justify-center pointer-events-none"
|
||||
data-slot="dropdown-menu-radio-item-indicator"
|
||||
>
|
||||
<MenuPrimitive.RadioItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</MenuPrimitive.RadioItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: MenuPrimitive.Separator.Props) {
|
||||
return (
|
||||
<MenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
@@ -1,149 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
|
||||
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="input-group"
|
||||
role="group"
|
||||
className={cn(
|
||||
"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const inputGroupAddonVariants = cva(
|
||||
"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
|
||||
{
|
||||
variants: {
|
||||
align: {
|
||||
"inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
|
||||
"inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
|
||||
"block-start":
|
||||
"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
|
||||
"block-end":
|
||||
"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
align: "inline-start",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function InputGroupAddon({
|
||||
className,
|
||||
align = "inline-start",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="input-group-addon"
|
||||
data-align={align}
|
||||
className={cn(inputGroupAddonVariants({ align }), className)}
|
||||
onClick={(e) => {
|
||||
if ((e.target as HTMLElement).closest("button")) {
|
||||
return
|
||||
}
|
||||
e.currentTarget.parentElement?.querySelector("input")?.focus()
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const inputGroupButtonVariants = cva(
|
||||
"gap-2 text-sm shadow-none flex items-center",
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
||||
sm: "",
|
||||
"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
|
||||
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: "xs",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function InputGroupButton({
|
||||
className,
|
||||
type = "button",
|
||||
variant = "ghost",
|
||||
size = "xs",
|
||||
...props
|
||||
}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
|
||||
VariantProps<typeof inputGroupButtonVariants> & {
|
||||
type?: "button" | "submit" | "reset"
|
||||
}) {
|
||||
return (
|
||||
<Button
|
||||
type={type}
|
||||
data-size={size}
|
||||
variant={variant}
|
||||
className={cn(inputGroupButtonVariants({ size }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<Input
|
||||
data-slot="input-group-control"
|
||||
className={cn("rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupTextarea({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<Textarea
|
||||
data-slot="input-group-control"
|
||||
className={cn("rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
InputGroupButton,
|
||||
InputGroupText,
|
||||
InputGroupInput,
|
||||
InputGroupTextarea,
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { Input as InputPrimitive } from "@base-ui/react/input"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<InputPrimitive
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
@@ -1,26 +0,0 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
|
||||
return (
|
||||
<kbd
|
||||
data-slot="kbd"
|
||||
className={cn(
|
||||
"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<kbd
|
||||
data-slot="kbd-group"
|
||||
className={cn("gap-1 inline-flex items-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Kbd, KbdGroup }
|
||||
@@ -1,18 +0,0 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({ className, ...props }: React.ComponentProps<"label">) {
|
||||
return (
|
||||
<label
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
@@ -1,263 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
|
||||
import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
function Menubar({ className, ...props }: MenubarPrimitive.Props) {
|
||||
return (
|
||||
<MenubarPrimitive
|
||||
data-slot="menubar"
|
||||
className={cn("bg-background h-8 gap-0.5 rounded-lg border p-[3px] flex items-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
|
||||
return <DropdownMenu data-slot="menubar-menu" {...props} />
|
||||
}
|
||||
|
||||
function MenubarGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuGroup>) {
|
||||
return <DropdownMenuGroup data-slot="menubar-group" {...props} />
|
||||
}
|
||||
|
||||
function MenubarPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPortal>) {
|
||||
return <DropdownMenuPortal data-slot="menubar-portal" {...props} />
|
||||
}
|
||||
|
||||
function MenubarTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuTrigger>) {
|
||||
return (
|
||||
<DropdownMenuTrigger
|
||||
data-slot="menubar-trigger"
|
||||
className={cn(
|
||||
"hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium flex items-center outline-hidden select-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarContent({
|
||||
className,
|
||||
align = "start",
|
||||
alignOffset = -4,
|
||||
sideOffset = 8,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuContent>) {
|
||||
return (
|
||||
<DropdownMenuContent
|
||||
data-slot="menubar-content"
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
sideOffset={sideOffset}
|
||||
className={cn("bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2", className )}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuItem>) {
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
data-slot="menubar-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/menubar-item", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.CheckboxItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.CheckboxItem
|
||||
data-slot="menubar-checkbox-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-inset:pl-7 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center">
|
||||
<MenuPrimitive.CheckboxItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</MenuPrimitive.CheckboxItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
|
||||
return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />
|
||||
}
|
||||
|
||||
function MenubarRadioItem({
|
||||
className,
|
||||
children,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.RadioItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.RadioItem
|
||||
data-slot="menubar-radio-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center">
|
||||
<MenuPrimitive.RadioItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</MenuPrimitive.RadioItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuLabel> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuLabel
|
||||
data-slot="menubar-label"
|
||||
data-inset={inset}
|
||||
className={cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuSeparator>) {
|
||||
return (
|
||||
<DropdownMenuSeparator
|
||||
data-slot="menubar-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuShortcut>) {
|
||||
return (
|
||||
<DropdownMenuShortcut
|
||||
data-slot="menubar-shortcut"
|
||||
className={cn("text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuSub>) {
|
||||
return <DropdownMenuSub data-slot="menubar-sub" {...props} />
|
||||
}
|
||||
|
||||
function MenubarSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuSubTrigger
|
||||
data-slot="menubar-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn("focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuSubContent>) {
|
||||
return (
|
||||
<DropdownMenuSubContent
|
||||
data-slot="menubar-sub-content"
|
||||
className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Menubar,
|
||||
MenubarPortal,
|
||||
MenubarMenu,
|
||||
MenubarTrigger,
|
||||
MenubarContent,
|
||||
MenubarGroup,
|
||||
MenubarSeparator,
|
||||
MenubarLabel,
|
||||
MenubarItem,
|
||||
MenubarShortcut,
|
||||
MenubarCheckboxItem,
|
||||
MenubarRadioGroup,
|
||||
MenubarRadioItem,
|
||||
MenubarSub,
|
||||
MenubarSubTrigger,
|
||||
MenubarSubContent,
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Popover({ ...props }: PopoverPrimitive.Root.Props) {
|
||||
return <PopoverPrimitive.Root data-slot="popover" {...props} />
|
||||
}
|
||||
|
||||
function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
|
||||
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
|
||||
}
|
||||
|
||||
function PopoverContent({
|
||||
className,
|
||||
align = "center",
|
||||
alignOffset = 0,
|
||||
side = "bottom",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: PopoverPrimitive.Popup.Props &
|
||||
Pick<
|
||||
PopoverPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset"
|
||||
>) {
|
||||
return (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Positioner
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
className="isolate z-50"
|
||||
>
|
||||
<PopoverPrimitive.Popup
|
||||
data-slot="popover-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-72 origin-(--transform-origin) outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Positioner>
|
||||
</PopoverPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="popover-header"
|
||||
className={cn("flex flex-col gap-0.5 text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
|
||||
return (
|
||||
<PopoverPrimitive.Title
|
||||
data-slot="popover-title"
|
||||
className={cn("font-medium", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverDescription({
|
||||
className,
|
||||
...props
|
||||
}: PopoverPrimitive.Description.Props) {
|
||||
return (
|
||||
<PopoverPrimitive.Description
|
||||
data-slot="popover-description"
|
||||
className={cn("text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverDescription,
|
||||
PopoverHeader,
|
||||
PopoverTitle,
|
||||
PopoverTrigger,
|
||||
}
|
||||
@@ -1,191 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { Select as SelectPrimitive } from "@base-ui/react/select"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
const Select = SelectPrimitive.Root
|
||||
|
||||
function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
|
||||
return (
|
||||
<SelectPrimitive.Group
|
||||
data-slot="select-group"
|
||||
className={cn("scroll-my-1 p-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
|
||||
return (
|
||||
<SelectPrimitive.Value
|
||||
data-slot="select-value"
|
||||
className={cn("flex flex-1 text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: SelectPrimitive.Trigger.Props & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon
|
||||
render={
|
||||
<ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />
|
||||
}
|
||||
/>
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
side = "bottom",
|
||||
sideOffset = 4,
|
||||
align = "center",
|
||||
alignOffset = 0,
|
||||
alignItemWithTrigger = true,
|
||||
...props
|
||||
}: SelectPrimitive.Popup.Props &
|
||||
Pick<
|
||||
SelectPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
|
||||
>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Positioner
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
alignItemWithTrigger={alignItemWithTrigger}
|
||||
className="isolate z-50"
|
||||
>
|
||||
<SelectPrimitive.Popup
|
||||
data-slot="select-content"
|
||||
data-align-trigger={alignItemWithTrigger}
|
||||
className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none", className )}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.List>{children}</SelectPrimitive.List>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Popup>
|
||||
</SelectPrimitive.Positioner>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: SelectPrimitive.GroupLabel.Props) {
|
||||
return (
|
||||
<SelectPrimitive.GroupLabel
|
||||
data-slot="select-label"
|
||||
className={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: SelectPrimitive.Item.Props) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SelectPrimitive.ItemText className="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
|
||||
{children}
|
||||
</SelectPrimitive.ItemText>
|
||||
<SelectPrimitive.ItemIndicator
|
||||
render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
|
||||
>
|
||||
<CheckIcon className="pointer-events-none" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: SelectPrimitive.Separator.Props) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpArrow
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon
|
||||
/>
|
||||
</SelectPrimitive.ScrollUpArrow>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownArrow
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
/>
|
||||
</SelectPrimitive.ScrollDownArrow>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Sheet({ ...props }: SheetPrimitive.Root.Props) {
|
||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
||||
}
|
||||
|
||||
function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
|
||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||
}
|
||||
|
||||
function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
|
||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
||||
}
|
||||
|
||||
function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
|
||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||
}
|
||||
|
||||
function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
|
||||
return (
|
||||
<SheetPrimitive.Backdrop
|
||||
data-slot="sheet-overlay"
|
||||
className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetContent({
|
||||
className,
|
||||
children,
|
||||
side = "right",
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: SheetPrimitive.Popup.Props & {
|
||||
side?: "top" | "right" | "bottom" | "left"
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Popup
|
||||
data-slot="sheet-content"
|
||||
data-side={side}
|
||||
className={cn("bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<SheetPrimitive.Close
|
||||
data-slot="sheet-close"
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-3 right-3"
|
||||
size="icon-sm"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
)}
|
||||
</SheetPrimitive.Popup>
|
||||
</SheetPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-header"
|
||||
className={cn("gap-0.5 p-4 flex flex-col", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-footer"
|
||||
className={cn("gap-2 p-4 mt-auto flex flex-col", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
|
||||
return (
|
||||
<SheetPrimitive.Title
|
||||
data-slot="sheet-title"
|
||||
className={cn("text-foreground text-base font-medium", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetDescription({
|
||||
className,
|
||||
...props
|
||||
}: SheetPrimitive.Description.Props) {
|
||||
return (
|
||||
<SheetPrimitive.Description
|
||||
data-slot="sheet-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
icons={{
|
||||
success: (
|
||||
<CircleCheckIcon className="size-4" />
|
||||
),
|
||||
info: (
|
||||
<InfoIcon className="size-4" />
|
||||
),
|
||||
warning: (
|
||||
<TriangleAlertIcon className="size-4" />
|
||||
),
|
||||
error: (
|
||||
<OctagonXIcon className="size-4" />
|
||||
),
|
||||
loading: (
|
||||
<Loader2Icon className="size-4 animate-spin" />
|
||||
),
|
||||
}}
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
"--border-radius": "var(--radius)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
toast: "cn-toast",
|
||||
},
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toaster }
|
||||
@@ -1,80 +0,0 @@
|
||||
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: TabsPrimitive.Root.Props) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
data-orientation={orientation}
|
||||
className={cn(
|
||||
"gap-2 group/tabs flex data-horizontal:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const tabsListVariants = cva(
|
||||
"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-muted",
|
||||
line: "gap-1 bg-transparent",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
data-variant={variant}
|
||||
className={cn(tabsListVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
|
||||
return (
|
||||
<TabsPrimitive.Tab
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
|
||||
"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
|
||||
"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
|
||||
return (
|
||||
<TabsPrimitive.Panel
|
||||
data-slot="tabs-content"
|
||||
className={cn("text-sm flex-1 outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
|
||||
@@ -1,18 +0,0 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot="textarea"
|
||||
className={cn(
|
||||
"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Textarea }
|
||||
@@ -1,64 +0,0 @@
|
||||
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function TooltipProvider({
|
||||
delay = 0,
|
||||
...props
|
||||
}: TooltipPrimitive.Provider.Props) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delay={delay}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
|
||||
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
}
|
||||
|
||||
function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
side = "top",
|
||||
sideOffset = 4,
|
||||
align = "center",
|
||||
alignOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: TooltipPrimitive.Popup.Props &
|
||||
Pick<
|
||||
TooltipPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset"
|
||||
>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Positioner
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
className="isolate z-50"
|
||||
>
|
||||
<TooltipPrimitive.Popup
|
||||
data-slot="tooltip-content"
|
||||
className={cn(
|
||||
"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
|
||||
</TooltipPrimitive.Popup>
|
||||
</TooltipPrimitive.Positioner>
|
||||
</TooltipPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
@@ -1,126 +0,0 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "./styles/theme.css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--radius-2xl: calc(var(--radius) + 8px);
|
||||
--radius-3xl: calc(var(--radius) + 12px);
|
||||
--radius-4xl: calc(var(--radius) + 16px);
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { RouterProvider, createRouter } from '@tanstack/react-router'
|
||||
import { routeTree } from './routeTree.gen'
|
||||
import './index.css'
|
||||
import { getDynamicBasename } from './modules/basename'
|
||||
|
||||
// Set up a Router instance
|
||||
const router = createRouter({
|
||||
routeTree,
|
||||
basepath: getDynamicBasename(),
|
||||
defaultPreload: 'intent',
|
||||
scrollRestoration: true,
|
||||
})
|
||||
|
||||
// Register things for typesafety
|
||||
declare module '@tanstack/react-router' {
|
||||
interface Register {
|
||||
router: typeof router
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root')!
|
||||
|
||||
if (!rootElement.innerHTML) {
|
||||
const root = ReactDOM.createRoot(rootElement)
|
||||
root.render(<RouterProvider router={router} />)
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
// @ts-ignore
|
||||
export const basename = BASE_NAME;
|
||||
|
||||
export const wrapBasename = (path: string) => {
|
||||
const hasEnd = path.endsWith('/')
|
||||
if (basename) {
|
||||
return `${basename}${path}` + (hasEnd ? '' : '/');
|
||||
} else {
|
||||
return path;
|
||||
}
|
||||
}
|
||||
|
||||
// 动态计算 basename，根据当前 URL 路径
|
||||
export const getDynamicBasename = (): string => {
|
||||
const path = window.location.pathname
|
||||
const [user, key, id] = path.split('/').filter(Boolean)
|
||||
if (key === 'v1' && id) {
|
||||
return `/${user}/v1/${id}`
|
||||
}
|
||||
// 默认使用构建时的 basename
|
||||
return basename
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { Query } from '@kevisual/query';
|
||||
import { QueryLoginBrowser } from '@kevisual/api/query-login'
|
||||
import { useContextKey } from '@kevisual/context';
|
||||
export const query = useContextKey('query', () => {
|
||||
return new Query({
|
||||
url: '/api/router',
|
||||
});
|
||||
});
|
||||
|
||||
export const queryClient = useContextKey('queryClient', () => {
|
||||
return new Query({
|
||||
url: '/client/router',
|
||||
});
|
||||
});
|
||||
|
||||
export const queryLogin = useContextKey('queryLogin', () => {
|
||||
return new QueryLoginBrowser({
|
||||
query: query
|
||||
});
|
||||
});
|
||||
@@ -1,113 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
// @ts-nocheck
|
||||
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
|
||||
// This file was automatically generated by TanStack Router.
|
||||
// You should NOT make any changes in this file as it will be overwritten.
|
||||
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
|
||||
|
||||
import { Route as rootRouteImport } from './routes/__root'
|
||||
import { Route as ViewRouteImport } from './routes/view'
|
||||
import { Route as ConsoleRouteImport } from './routes/console'
|
||||
import { Route as IdRouteImport } from './routes/$id'
|
||||
import { Route as IndexRouteImport } from './routes/index'
|
||||
|
||||
const ViewRoute = ViewRouteImport.update({
|
||||
id: '/view',
|
||||
path: '/view',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const ConsoleRoute = ConsoleRouteImport.update({
|
||||
id: '/console',
|
||||
path: '/console',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const IdRoute = IdRouteImport.update({
|
||||
id: '/$id',
|
||||
path: '/$id',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const IndexRoute = IndexRouteImport.update({
|
||||
id: '/',
|
||||
path: '/',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
|
||||
export interface FileRoutesByFullPath {
|
||||
'/': typeof IndexRoute
|
||||
'/$id': typeof IdRoute
|
||||
'/console': typeof ConsoleRoute
|
||||
'/view': typeof ViewRoute
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
'/': typeof IndexRoute
|
||||
'/$id': typeof IdRoute
|
||||
'/console': typeof ConsoleRoute
|
||||
'/view': typeof ViewRoute
|
||||
}
|
||||
export interface FileRoutesById {
|
||||
__root__: typeof rootRouteImport
|
||||
'/': typeof IndexRoute
|
||||
'/$id': typeof IdRoute
|
||||
'/console': typeof ConsoleRoute
|
||||
'/view': typeof ViewRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
fileRoutesByFullPath: FileRoutesByFullPath
|
||||
fullPaths: '/' | '/$id' | '/console' | '/view'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to: '/' | '/$id' | '/console' | '/view'
|
||||
id: '__root__' | '/' | '/$id' | '/console' | '/view'
|
||||
fileRoutesById: FileRoutesById
|
||||
}
|
||||
export interface RootRouteChildren {
|
||||
IndexRoute: typeof IndexRoute
|
||||
IdRoute: typeof IdRoute
|
||||
ConsoleRoute: typeof ConsoleRoute
|
||||
ViewRoute: typeof ViewRoute
|
||||
}
|
||||
|
||||
declare module '@tanstack/react-router' {
|
||||
interface FileRoutesByPath {
|
||||
'/view': {
|
||||
id: '/view'
|
||||
path: '/view'
|
||||
fullPath: '/view'
|
||||
preLoaderRoute: typeof ViewRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/console': {
|
||||
id: '/console'
|
||||
path: '/console'
|
||||
fullPath: '/console'
|
||||
preLoaderRoute: typeof ConsoleRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/$id': {
|
||||
id: '/$id'
|
||||
path: '/$id'
|
||||
fullPath: '/$id'
|
||||
preLoaderRoute: typeof IdRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/': {
|
||||
id: '/'
|
||||
path: '/'
|
||||
fullPath: '/'
|
||||
preLoaderRoute: typeof IndexRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const rootRouteChildren: RootRouteChildren = {
|
||||
IndexRoute: IndexRoute,
|
||||
IdRoute: IdRoute,
|
||||
ConsoleRoute: ConsoleRoute,
|
||||
ViewRoute: ViewRoute,
|
||||
}
|
||||
export const routeTree = rootRouteImport
|
||||
._addFileChildren(rootRouteChildren)
|
||||
._addFileTypes<FileRouteTypes>()
|
||||
@@ -1,10 +0,0 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import App from '@/app/page'
|
||||
|
||||
export const Route = createFileRoute('/$id')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return <App />
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
import { Link, Outlet, createRootRoute, useLocation } from '@tanstack/react-router'
|
||||
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
|
||||
import { Toaster } from '@/components/ui/sonner'
|
||||
import { Load } from '@kevisual/context/load'
|
||||
import * as query from '@/modules/query';
|
||||
export const Route = createRootRoute({
|
||||
component: RootComponent,
|
||||
})
|
||||
Load.npm({ pkg: 'eruda' });
|
||||
|
||||
function RootComponent() {
|
||||
// 这里预加载一下 query 模块，避免在代码分割自动threeshaking;
|
||||
query;
|
||||
|
||||
return (
|
||||
<div className='h-full overflow-hidden'>
|
||||
|
||||
<div className="p-2 flex gap-2 text-lg">
|
||||
<Link
|
||||
to="/"
|
||||
activeProps={{
|
||||
className: 'font-bold',
|
||||
}}
|
||||
activeOptions={{ exact: true }}
|
||||
>
|
||||
首页
|
||||
</Link>
|
||||
</div>
|
||||
<hr />
|
||||
<main className='h-[calc(100%-4rem)] overflow-auto scrollbar'>
|
||||
<Outlet />
|
||||
</main>
|
||||
<TanStackRouterDevtools position="bottom-left" />
|
||||
<Toaster />
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
import { useContextKey } from '@kevisual/context';
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import type Eruda from 'eruda';
|
||||
import { useEffect, useRef } from 'react';
|
||||
export const Route = createFileRoute('/console')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
|
||||
function RouteComponent() {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
init();
|
||||
return () => {
|
||||
deinit();
|
||||
}
|
||||
}, [])
|
||||
const deinit = async () => {
|
||||
const eruda: typeof Eruda = await useContextKey('eruda');
|
||||
eruda.destroy();
|
||||
}
|
||||
const init = async () => {
|
||||
console.log('正在初始化控制台...');
|
||||
const eruda: typeof Eruda = await useContextKey('eruda');
|
||||
console.log('eruda', eruda);
|
||||
if (!ref.current) return;
|
||||
eruda.init({
|
||||
container: ref.current!,
|
||||
tool: ['console'],
|
||||
inline: true,
|
||||
});
|
||||
const consoleTool = eruda.get('console');
|
||||
consoleTool.html('<span style="color:red">Red</span>');
|
||||
}
|
||||
|
||||
return <div className='w-full overflow-hidden' style={{
|
||||
height: 'calc(100% - 48px)'
|
||||
}} >
|
||||
<div className='min-w-150 w-[80%] mx-auto h-full py-4'>
|
||||
<div className='relative w-full h-full border'>
|
||||
<div ref={ref}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import App from '@/app/page'
|
||||
export const Route = createFileRoute('/')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return <App />
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import App from '../app/query-view/page'
|
||||
export const Route = createFileRoute('/view')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return <App />
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@theme {
|
||||
/* --color-primary: #ffc107;
|
||||
--color-secondary: #ffa000;
|
||||
--color-text-primary: #000000;
|
||||
--color-text-secondary: #000000;
|
||||
--color-success: #28a745; */
|
||||
|
||||
--color-scrollbar-thumb: #999999;
|
||||
--color-scrollbar-track: rgba(0, 0, 0, 0.1);
|
||||
--color-scrollbar-thumb-hover: #666666;
|
||||
--scrollbar-color: #ffc107;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
/* font-family */
|
||||
@utility font-family-mon {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
@utility font-family-rob {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
@utility font-family-int {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
@utility font-family-orb {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
@utility font-family-din {
|
||||
font-family: 'DIN', sans-serif;
|
||||
}
|
||||
|
||||
@utility flex-row-center {
|
||||
@apply flex flex-row items-center justify-center;
|
||||
}
|
||||
|
||||
@utility flex-col-center {
|
||||
@apply flex flex-col items-center justify-center;
|
||||
}
|
||||
|
||||
@utility scrollbar {
|
||||
overflow: auto;
|
||||
|
||||
/* 整个滚动条 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--color-scrollbar-track);
|
||||
}
|
||||
|
||||
/* 滚动条有滑块的轨道部分 */
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* 滚动条滑块(竖向:vertical 横向:horizontal) */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-scrollbar-thumb);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* 滚动条滑块hover */
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
/* 同时有垂直和水平滚动条时交汇的部分 */
|
||||
&::-webkit-scrollbar-corner {
|
||||
display: block;
|
||||
/* 修复交汇时出现的白块 */
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
menu {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
20
web/src/vite-env.d.ts
vendored
20
web/src/vite-env.d.ts
vendored
@@ -1,20 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
type SimpleObject = {
|
||||
[key: string | number]: any;
|
||||
};
|
||||
|
||||
declare let BASE_NAME: string;
|
||||
interface ViteTypeOptions {
|
||||
// 添加这行代码，你就可以将 ImportMetaEnv 的类型设为严格模式，
|
||||
// 这样就不允许有未知的键值了。
|
||||
// strictImportMetaEnv: unknown
|
||||
}
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_APP_TITLE: string;
|
||||
// 更多环境变量...
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"extends": "@kevisual/types/json/frontend.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
},
|
||||
"include": [
|
||||
"src",
|
||||
]
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import path from 'path';
|
||||
import pkgs from './package.json';
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
import { tanstackRouter } from '@tanstack/router-plugin/vite'
|
||||
import 'dotenv/config'
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
const basename = isDev ? '/' : pkgs?.basename || '/';
|
||||
let target = process.env.VITE_API_URL || 'http://localhost:51515';
|
||||
|
||||
const apiProxy = { target: target, changeOrigin: true, ws: true, rewriteWsOrigin: true, secure: false, cookieDomainRewrite: 'localhost' };
|
||||
let proxy = {
|
||||
'/root/': apiProxy,
|
||||
'/api': apiProxy,
|
||||
'/client': apiProxy,
|
||||
};
|
||||
/**
|
||||
* @see https://vitejs.dev/config/
|
||||
*/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
// Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'
|
||||
tanstackRouter({
|
||||
target: 'react',
|
||||
autoCodeSplitting: true,
|
||||
}),
|
||||
react(),
|
||||
tailwindcss()
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
base: basename,
|
||||
define: {
|
||||
BASE_NAME: JSON.stringify(basename),
|
||||
},
|
||||
server: {
|
||||
port: 7008,
|
||||
host: '0.0.0.0',
|
||||
allowedHosts: true,
|
||||
proxy,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user