feat: change to center and clean code
This commit is contained in:
parent
73de223d56
commit
1363b87f36
3
.gitmodules
vendored
3
.gitmodules
vendored
@ -1,3 +0,0 @@
|
|||||||
[submodule "theme"]
|
|
||||||
path = theme
|
|
||||||
url = git@git.xiongxiao.me:kevisual/theme.git
|
|
||||||
26
README.md
26
README.md
@ -1,3 +1,25 @@
|
|||||||
# envision
|
# envision center
|
||||||
|
|
||||||
光明
|
一个可以搭建自己的一个平台模块。
|
||||||
|
|
||||||
|
```
|
||||||
|
query.post({
|
||||||
|
'path': 'app',
|
||||||
|
'key': 'publish',
|
||||||
|
'data': {
|
||||||
|
'id': ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## 核心的功能模块
|
||||||
|
|
||||||
|
因为在多级路由下，react的app应用，必须使用domain，并且必须要把打包的路径修改为绝对路径，否则会有路有不可访问的问题。
|
||||||
|
|
||||||
|
当前的应用的功能，为envision的核心模块。组件一个微应用必须的模块内容。
|
||||||
|
|
||||||
|
- User 用户登陆和用户信息模块
|
||||||
|
- App Module 用户的App的应用管理
|
||||||
|
- File Manager 文件管理平台，App的部署位置为File Manager当中
|
||||||
|
- Container Simple 代码Container模块
|
||||||
|
- Org 组织模块，所有应用的模块为组织内部应用。
|
||||||
|
|||||||
@ -1,24 +0,0 @@
|
|||||||
# Use the official Nginx image based on Alpine
|
|
||||||
FROM nginx:alpine
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
# Copy the contents of the dist directory to the Nginx html directory
|
|
||||||
COPY dist/ /default-app/
|
|
||||||
|
|
||||||
# 删除默认的defult.conf
|
|
||||||
RUN rm /etc/nginx/conf.d/default.conf
|
|
||||||
|
|
||||||
COPY default.conf /etc/nginx/conf.d/default.conf
|
|
||||||
|
|
||||||
COPY app-init.sh /app-init.sh
|
|
||||||
RUN chmod +x /app-init.sh
|
|
||||||
|
|
||||||
# Expose port 80
|
|
||||||
EXPOSE 80
|
|
||||||
|
|
||||||
# 使用启动脚本作为 ENTRYPOINT
|
|
||||||
ENTRYPOINT ["/app-init.sh"]
|
|
||||||
|
|
||||||
# Start Nginx
|
|
||||||
# CMD ["nginx", "-g", "daemon off;"]
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
#!/bin/sh
|
|
||||||
|
|
||||||
# 宿主机挂载路径
|
|
||||||
TARGET_DIR="/app"
|
|
||||||
|
|
||||||
# 检查目录是否为空
|
|
||||||
if [ -z "$(ls -A $TARGET_DIR)" ]; then
|
|
||||||
echo "Directory is empty. Copying default content..."
|
|
||||||
cp -r /default-app/* $TARGET_DIR/
|
|
||||||
else
|
|
||||||
echo "Directory is not empty. Skipping copy."
|
|
||||||
fi
|
|
||||||
|
|
||||||
# 启动应用或保持容器运行
|
|
||||||
# exec "$@"
|
|
||||||
|
|
||||||
nginx -g "daemon off;"
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
|
|
||||||
server {
|
|
||||||
listen 80;
|
|
||||||
listen [::]:80;
|
|
||||||
root /app;
|
|
||||||
location / {
|
|
||||||
try_files $uri $uri/ /index.html;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -3,7 +3,8 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>envision</title>
|
<title>Center</title>
|
||||||
|
<script src="https://kevisual.xiongxiao.me/system/lib/app.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
insight
|
|
||||||
|
|
||||||
探索研究
|
|
||||||
|
|
||||||
```
|
|
||||||
npx tsc --declaration --allowJs --emitDeclarationOnly your-file.js
|
|
||||||
```
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
let a = 1
|
|
||||||
|
|
||||||
export const main = ({b,c}) => {
|
|
||||||
console.log('current a', a);
|
|
||||||
return a++
|
|
||||||
}
|
|
||||||
55
nginx/envision-center.conf
Normal file
55
nginx/envision-center.conf
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
|
||||||
|
map $http_upgrade $connection_upgrade {
|
||||||
|
default keep-alive; #默认为keep-alive 可以支持 一般http请求
|
||||||
|
'websocket' upgrade; #如果为websocket 则为 upgrade 可升级的。
|
||||||
|
}
|
||||||
|
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name center.xiongxiao.me;
|
||||||
|
|
||||||
|
client_max_body_size 1024m;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
proxy_set_header HOST $host;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection $connection_upgrade;
|
||||||
|
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_read_timeout 86400; # 可选的长时间保持 WebSocket 连接
|
||||||
|
|
||||||
|
proxy_pass http://localhost:3005;
|
||||||
|
}
|
||||||
|
location /api/router {
|
||||||
|
proxy_set_header HOST $host;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection $connection_upgrade;
|
||||||
|
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_read_timeout 86400; # 可选的长时间保持 WebSocket 连接
|
||||||
|
|
||||||
|
proxy_pass http://localhost:4002/api/router;
|
||||||
|
}
|
||||||
|
location /resources {
|
||||||
|
proxy_set_header HOST $host;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection $connection_upgrade;
|
||||||
|
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_read_timeout 86400; # 可选的长时间保持 WebSocket 连接
|
||||||
|
|
||||||
|
proxy_pass http://localhost:9000/resources;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,33 +0,0 @@
|
|||||||
|
|
||||||
map $http_upgrade $connection_upgrade {
|
|
||||||
default keep-alive; #默认为keep-alive 可以支持 一般http请求
|
|
||||||
'websocket' upgrade; #如果为websocket 则为 upgrade 可升级的。
|
|
||||||
}
|
|
||||||
|
|
||||||
server {
|
|
||||||
listen 80;
|
|
||||||
server_name envision.xiongxiao.me;
|
|
||||||
|
|
||||||
root /root/apps/envision/web;
|
|
||||||
index index.html;
|
|
||||||
|
|
||||||
client_max_body_size 24m;
|
|
||||||
|
|
||||||
location / {
|
|
||||||
try_files $uri $uri/ =404;
|
|
||||||
}
|
|
||||||
location /api/router {
|
|
||||||
proxy_set_header HOST $host;
|
|
||||||
proxy_set_header X-Forwarded-Proto $scheme;
|
|
||||||
proxy_set_header X-Real-IP $remote_addr;
|
|
||||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|
||||||
|
|
||||||
proxy_set_header Upgrade $http_upgrade;
|
|
||||||
proxy_set_header Connection $connection_upgrade;
|
|
||||||
|
|
||||||
proxy_http_version 1.1;
|
|
||||||
proxy_read_timeout 86400; # 可选的长时间保持 WebSocket 连接
|
|
||||||
|
|
||||||
proxy_pass http://localhost:4000/api/router;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
61
package.json
61
package.json
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "@kevisual/envision",
|
"name": "@kevisual/center",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.2",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
@ -9,23 +9,22 @@
|
|||||||
"dev:kv": "cross-env VITE_USE_KV=true vite",
|
"dev:kv": "cross-env VITE_USE_KV=true vite",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"prune": "pnpm store prune && rimraf node_modules/.vite",
|
"prepub": "envision switchOrg root",
|
||||||
"deploy": "rsync -avz --delete ./dist/ light:/root/apps/envision/web",
|
"pub": "envision deploy ./dist -k center -v 0.0.2"
|
||||||
"pub": "pnpm run build && pnpm run deploy"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@abearxiong/flows": "0.0.1-alpha.9",
|
"@abearxiong/flows": "0.0.1-alpha.9",
|
||||||
"@abearxiong/ui": "0.0.1-alpha.0",
|
"@abearxiong/ui": "0.0.1-alpha.0",
|
||||||
"@ant-design/icons": "^5.5.2",
|
"@ant-design/icons": "^5.6.1",
|
||||||
"@icon-park/react": "^1.4.2",
|
"@icon-park/react": "^1.4.2",
|
||||||
"@kevisual/codemirror": "^0.0.2",
|
"@kevisual/codemirror": "^0.0.2",
|
||||||
"@kevisual/container": "1.0.0",
|
"@kevisual/container": "1.0.0",
|
||||||
"@kevisual/query": "^0.0.6",
|
"@kevisual/query": "^0.0.6",
|
||||||
"@kevisual/ui": "^0.0.2",
|
"@kevisual/ui": "^0.0.2",
|
||||||
"@monaco-editor/react": "^4.6.0",
|
"@monaco-editor/react": "^4.7.0",
|
||||||
"@uiw/react-textarea-code-editor": "^3.1.0",
|
"@uiw/react-textarea-code-editor": "^3.1.0",
|
||||||
"@xyflow/react": "^12.3.6",
|
"@xyflow/react": "^12.4.3",
|
||||||
"antd": "^5.22.7",
|
"antd": "^5.24.0",
|
||||||
"classnames": "^2.5.1",
|
"classnames": "^2.5.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"copy-to-clipboard": "^3.3.3",
|
"copy-to-clipboard": "^3.3.3",
|
||||||
@ -33,43 +32,43 @@
|
|||||||
"eventemitter3": "^5.0.1",
|
"eventemitter3": "^5.0.1",
|
||||||
"immer": "^10.1.1",
|
"immer": "^10.1.1",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
"marked": "^15.0.5",
|
"marked": "^15.0.7",
|
||||||
"nanoid": "^5.0.9",
|
"nanoid": "^5.1.0",
|
||||||
"react": "18.3.1",
|
"react": "19.0.0",
|
||||||
"react-dom": "18.3.1",
|
"react-dom": "19.0.0",
|
||||||
"react-resizable-panels": "^2.1.7",
|
"react-resizable-panels": "^2.1.7",
|
||||||
"react-router": "^7.1.1",
|
"react-router": "^7.1.5",
|
||||||
"react-router-dom": "^7.1.1",
|
"react-router-dom": "^7.1.5",
|
||||||
"react-toastify": "^11.0.2",
|
"react-toastify": "^11.0.3",
|
||||||
"vite-plugin-tsconfig-paths": "^1.4.1",
|
"vite-plugin-tsconfig-paths": "^1.4.1",
|
||||||
"zustand": "^5.0.2"
|
"zustand": "^5.0.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.17.0",
|
"@eslint/js": "^9.20.0",
|
||||||
"@tailwindcss/aspect-ratio": "^0.4.2",
|
"@tailwindcss/aspect-ratio": "^0.4.2",
|
||||||
"@tailwindcss/typography": "^0.5.15",
|
"@tailwindcss/typography": "^0.5.16",
|
||||||
"@types/d3": "^7.4.3",
|
"@types/d3": "^7.4.3",
|
||||||
"@types/lodash-es": "^4.17.12",
|
"@types/lodash-es": "^4.17.12",
|
||||||
"@types/node": "^22.10.5",
|
"@types/node": "^22.13.4",
|
||||||
"@types/path-browserify": "^1.0.3",
|
"@types/path-browserify": "^1.0.3",
|
||||||
"@types/react": "^19.0.2",
|
"@types/react": "^19.0.8",
|
||||||
"@types/react-dom": "^19.0.2",
|
"@types/react-dom": "^19.0.3",
|
||||||
"@vitejs/plugin-react": "^4.3.4",
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
"autoprefixer": "^10.4.20",
|
"autoprefixer": "^10.4.20",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"eslint": "^9.17.0",
|
"eslint": "^9.20.1",
|
||||||
"eslint-plugin-react-hooks": "^5.1.0",
|
"eslint-plugin-react-hooks": "^5.1.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.16",
|
"eslint-plugin-react-refresh": "^0.4.19",
|
||||||
"globals": "^15.14.0",
|
"globals": "^15.15.0",
|
||||||
"path-browserify": "^1.0.1",
|
"path-browserify": "^1.0.1",
|
||||||
"postcss-import": "^16.1.0",
|
"postcss-import": "^16.1.0",
|
||||||
"pretty-bytes": "^6.1.1",
|
"pretty-bytes": "^6.1.1",
|
||||||
"react-is": "18.3.1",
|
"react-is": "19.0.0",
|
||||||
"tailwind-merge": "^2.6.0",
|
"tailwind-merge": "^3.0.1",
|
||||||
"tailwindcss": "^3.4.17",
|
"tailwindcss": "^4.0.6",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
"typescript": "^5.7.2",
|
"typescript": "^5.7.3",
|
||||||
"typescript-eslint": "^8.19.0",
|
"typescript-eslint": "^8.24.0",
|
||||||
"vite": "^6.0.7"
|
"vite": "^6.1.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
1903
pnpm-lock.yaml
generated
1903
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
18
src/App.tsx
18
src/App.tsx
@ -1,21 +1,12 @@
|
|||||||
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
|
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
|
||||||
import { ConfigProvider, App as AntApp } from 'antd';
|
import { ConfigProvider } from 'antd';
|
||||||
import { App as ContainerApp } from './pages/container';
|
import { App as ContainerApp } from './pages/container';
|
||||||
import { App as PanelApp } from './pages/panel';
|
|
||||||
import { App as PublishApp } from './pages/publish';
|
|
||||||
import { App as CodeEditorApp } from './pages/code-editor';
|
|
||||||
import { App as MapApp } from './pages/map';
|
import { App as MapApp } from './pages/map';
|
||||||
import { App as PromptApp } from './pages/prompt';
|
|
||||||
import { App as AiAgentApp } from './pages/ai-agent';
|
|
||||||
import { App as UserApp } from './pages/user';
|
import { App as UserApp } from './pages/user';
|
||||||
import { App as ChatApp } from './pages/chat-manager';
|
|
||||||
import { App as GitHubApp } from './pages/github';
|
|
||||||
import { App as UserAppApp } from './pages/app';
|
import { App as UserAppApp } from './pages/app';
|
||||||
import { App as FileApp } from './pages/file';
|
import { App as FileApp } from './pages/file';
|
||||||
import { App as OrgApp } from './pages/org';
|
import { App as OrgApp } from './pages/org';
|
||||||
|
|
||||||
// import '@kevisual/container/container.css';
|
|
||||||
|
|
||||||
export const App = () => {
|
export const App = () => {
|
||||||
return (
|
return (
|
||||||
<div className='w-full h-full'>
|
<div className='w-full h-full'>
|
||||||
@ -27,16 +18,9 @@ export const App = () => {
|
|||||||
<Routes>
|
<Routes>
|
||||||
<Route path='/' element={<Navigate to='/container/' />} />
|
<Route path='/' element={<Navigate to='/container/' />} />
|
||||||
<Route path='/container/*' element={<ContainerApp />} />
|
<Route path='/container/*' element={<ContainerApp />} />
|
||||||
<Route path='/panel/*' element={<PanelApp />} />
|
|
||||||
<Route path='/publish/*' element={<PublishApp />} />
|
|
||||||
<Route path='/code-editor' element={<CodeEditorApp />} />
|
|
||||||
<Route path='/map/*' element={<MapApp />} />
|
<Route path='/map/*' element={<MapApp />} />
|
||||||
<Route path='/prompt/*' element={<PromptApp />} />
|
|
||||||
<Route path='/agent/*' element={<AiAgentApp />} />
|
|
||||||
<Route path='/user/*' element={<UserApp />} />
|
<Route path='/user/*' element={<UserApp />} />
|
||||||
<Route path='/org/*' element={<OrgApp />} />
|
<Route path='/org/*' element={<OrgApp />} />
|
||||||
<Route path='/chat/*' element={<ChatApp />} />
|
|
||||||
<Route path='/github/*' element={<GitHubApp />} />
|
|
||||||
<Route path='/app/*' element={<UserAppApp />} />
|
<Route path='/app/*' element={<UserAppApp />} />
|
||||||
<Route path='/file/*' element={<FileApp />} />
|
<Route path='/file/*' element={<FileApp />} />
|
||||||
|
|
||||||
|
|||||||
@ -1,205 +0,0 @@
|
|||||||
import { Button, Input, message, Modal, Table } from 'antd';
|
|
||||||
import { Fragment, useEffect, useMemo, useState } from 'react';
|
|
||||||
import { useUserStore } from '../store';
|
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { Form } from 'antd';
|
|
||||||
import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import { isObjectNull } from '@/utils/is-null';
|
|
||||||
import { CardBlank } from '@/components/card/CardBlank';
|
|
||||||
|
|
||||||
const FormModal = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const userStore = useUserStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
showEdit: state.showEdit,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
formData: state.formData,
|
|
||||||
updateData: state.updateData,
|
|
||||||
setFormData: state.setFormData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
const open = userStore.showEdit;
|
|
||||||
if (open) {
|
|
||||||
const isNull = isObjectNull(userStore.formData);
|
|
||||||
if (isNull) {
|
|
||||||
form.setFieldsValue({});
|
|
||||||
} else form.setFieldsValue(userStore.formData);
|
|
||||||
}
|
|
||||||
}, [userStore.showEdit]);
|
|
||||||
const onFinish = async (values: any) => {
|
|
||||||
userStore.updateData(values);
|
|
||||||
};
|
|
||||||
const onClose = () => {
|
|
||||||
userStore.setShowEdit(false);
|
|
||||||
form.setFieldsValue({});
|
|
||||||
userStore.setFormData({});
|
|
||||||
};
|
|
||||||
const isEdit = userStore.formData.id;
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
title={isEdit ? 'Edit' : 'Add'}
|
|
||||||
open={userStore.showEdit}
|
|
||||||
onClose={() => userStore.setShowEdit(false)}
|
|
||||||
destroyOnClose
|
|
||||||
footer={false}
|
|
||||||
width={800}
|
|
||||||
onCancel={onClose}>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
onFinish={onFinish}
|
|
||||||
labelCol={{
|
|
||||||
span: 4,
|
|
||||||
}}
|
|
||||||
wrapperCol={{
|
|
||||||
span: 20,
|
|
||||||
}}>
|
|
||||||
<Form.Item name='id' hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='username' label='username'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='description' label='description'>
|
|
||||||
<Input.TextArea rows={4} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label=' ' colon={false}>
|
|
||||||
<Button type='primary' htmlType='submit'>
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
<Button className='ml-2' htmlType='reset' onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export const List = () => {
|
|
||||||
const userStore = useUserStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
setFormData: state.setFormData,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
list: state.list,
|
|
||||||
deleteData: state.deleteData,
|
|
||||||
getList: state.getList,
|
|
||||||
loading: state.loading,
|
|
||||||
updateData: state.updateData,
|
|
||||||
formData: state.formData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const [codeEdit, setCodeEdit] = useState(false);
|
|
||||||
const [code, setCode] = useState('');
|
|
||||||
useEffect(() => {
|
|
||||||
userStore.getList();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onAdd = () => {
|
|
||||||
userStore.setFormData({});
|
|
||||||
userStore.setShowEdit(true);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full flex'>
|
|
||||||
<div className='p-2'>
|
|
||||||
<Button onClick={onAdd} icon={<PlusOutlined />}></Button>
|
|
||||||
</div>
|
|
||||||
<div className='flex flex-grow overflow-hidden h-full'>
|
|
||||||
<div className='flex-grow overflow-auto scrollbar bg-gray-100'>
|
|
||||||
<div className='flex flex-wrap gap-x-10 gap-y-4 rounded pt-10 justify-center'>
|
|
||||||
{userStore.list.length > 0 &&
|
|
||||||
userStore.list.map((item) => {
|
|
||||||
return (
|
|
||||||
<Fragment key={item.id}>
|
|
||||||
<div
|
|
||||||
className='flex text-sm gap flex-col w-[400px] max-h-[400px] bg-white p-4 rounded-lg'
|
|
||||||
key={item.id}
|
|
||||||
onClick={() => {
|
|
||||||
setCode(item.code);
|
|
||||||
userStore.setFormData(item);
|
|
||||||
setCodeEdit(true);
|
|
||||||
}}>
|
|
||||||
<div className='px-4 cursor-pointer'>
|
|
||||||
<div
|
|
||||||
className='font-bold'
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
// message.success('copy code success');
|
|
||||||
}}>
|
|
||||||
{item.username || '-'}
|
|
||||||
</div>
|
|
||||||
<div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div>
|
|
||||||
</div>
|
|
||||||
<div className='flex mt-2 '>
|
|
||||||
<Button.Group>
|
|
||||||
<Button
|
|
||||||
onClick={(e) => {
|
|
||||||
userStore.setFormData(item);
|
|
||||||
userStore.setShowEdit(true);
|
|
||||||
setCodeEdit(false);
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
icon={<EditOutlined />}></Button>
|
|
||||||
<Button
|
|
||||||
onClick={(e) => {
|
|
||||||
Modal.confirm({
|
|
||||||
title: 'Delete',
|
|
||||||
content: 'Are you sure delete this data?',
|
|
||||||
onOk: () => {
|
|
||||||
userStore.deleteData(item.id);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
icon={<DeleteOutlined />}></Button>
|
|
||||||
</Button.Group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<CardBlank className='w-[400px]' />
|
|
||||||
{userStore.list.length == 0 && (
|
|
||||||
<div className='text-center' key={'no-data'}>
|
|
||||||
No Data
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={clsx('bg-gray-100 border-l border-bg-slate-300 w-[600px] flex-shrink-0', !codeEdit && 'hidden', 'hidden')}>
|
|
||||||
<div className='bg-white p-2'>
|
|
||||||
<div className='mt-2 ml-2 flex gap-2'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
setCodeEdit(false);
|
|
||||||
userStore.setFormData({});
|
|
||||||
}}
|
|
||||||
icon={<LeftOutlined />}></Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
console.log('save', userStore.formData);
|
|
||||||
userStore.updateData({ ...userStore.formData, code });
|
|
||||||
}}
|
|
||||||
icon={<SaveOutlined />}></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='h-[94%] p-2 rounded-2 shadow-sm'>
|
|
||||||
<Input.TextArea
|
|
||||||
value={code}
|
|
||||||
onChange={(value) => {
|
|
||||||
// setCode(value);
|
|
||||||
}}
|
|
||||||
className='h-full max-h-full scrollbar'
|
|
||||||
style={{ overflow: 'auto' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<FormModal />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
|
||||||
import { List } from './edit/List';
|
|
||||||
import { Main } from './layouts';
|
|
||||||
import { Login } from './login/Login';
|
|
||||||
export const App = () => {
|
|
||||||
return (
|
|
||||||
<Routes>
|
|
||||||
<Route element={<Main />}>
|
|
||||||
<Route path='/' element={<Navigate to='/user/edit/list' />}></Route>
|
|
||||||
<Route path='edit/list' element={<List />} />
|
|
||||||
</Route>
|
|
||||||
<Route path='login' element={<Login />} />
|
|
||||||
</Routes>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import { LayoutMain } from '@/modules/layout';
|
|
||||||
export const Main = () => {
|
|
||||||
return <LayoutMain title='User' />;
|
|
||||||
};
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
import { Button, Form, Input } from 'antd';
|
|
||||||
import { useLoginStore } from '../store/login';
|
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { isObjectNull } from '@/utils/is-null';
|
|
||||||
export const Login = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const loginStore = useLoginStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
login: state.login,
|
|
||||||
formData: state.formData,
|
|
||||||
setFormData: state.setFormData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
const isNull = isObjectNull(loginStore.formData);
|
|
||||||
if (isNull) {
|
|
||||||
form.setFieldsValue({});
|
|
||||||
} else {
|
|
||||||
form.setFieldsValue(loginStore.formData);
|
|
||||||
}
|
|
||||||
}, [loginStore.formData]);
|
|
||||||
const onFinish = (values: any) => {
|
|
||||||
loginStore.setFormData(values);
|
|
||||||
loginStore.login();
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div className='flex w-full h-full bg-slate-200'>
|
|
||||||
<div className='w-[600px] mx-auto mt-[10%] '>
|
|
||||||
<h1 className='mb-4 tracking-widest'>Login</h1>
|
|
||||||
<div className='card border-t-2 pt-8 px-8'>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
onFinish={onFinish}
|
|
||||||
labelCol={{
|
|
||||||
span: 4,
|
|
||||||
}}>
|
|
||||||
<Form.Item label='username' name='username'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label='password' name='password'>
|
|
||||||
<Input type='password' />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label=' ' colon={false}>
|
|
||||||
<div className='flex gap-2'>
|
|
||||||
<Button type='primary' htmlType='submit'>
|
|
||||||
Login
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
import { create } from 'zustand';
|
|
||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
type UserStore = {
|
|
||||||
showEdit: boolean;
|
|
||||||
setShowEdit: (showEdit: boolean) => void;
|
|
||||||
formData: any;
|
|
||||||
setFormData: (formData: any) => void;
|
|
||||||
loading: boolean;
|
|
||||||
setLoading: (loading: boolean) => void;
|
|
||||||
list: any[];
|
|
||||||
getList: () => Promise<void>;
|
|
||||||
updateData: (data: any) => Promise<void>;
|
|
||||||
deleteData: (id: string) => Promise<void>;
|
|
||||||
};
|
|
||||||
export const useUserStore = create<UserStore>((set, get) => {
|
|
||||||
return {
|
|
||||||
showEdit: false,
|
|
||||||
setShowEdit: (showEdit) => set({ showEdit }),
|
|
||||||
formData: {},
|
|
||||||
setFormData: (formData) => set({ formData }),
|
|
||||||
loading: false,
|
|
||||||
setLoading: (loading) => set({ loading }),
|
|
||||||
list: [],
|
|
||||||
getList: async () => {
|
|
||||||
set({ loading: true });
|
|
||||||
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'user',
|
|
||||||
key: 'list',
|
|
||||||
});
|
|
||||||
set({ loading: false });
|
|
||||||
if (res.code === 200) {
|
|
||||||
set({ list: res.data });
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateData: async (data) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'user',
|
|
||||||
key: 'update',
|
|
||||||
data,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success');
|
|
||||||
set({ showEdit: false, formData: [] });
|
|
||||||
getList();
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deleteData: async (id) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'user',
|
|
||||||
key: 'delete',
|
|
||||||
id,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
getList();
|
|
||||||
message.success('Success');
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
import { create } from 'zustand';
|
|
||||||
import { history } from '@/utils/history';
|
|
||||||
type LoginStore = {
|
|
||||||
loading: boolean;
|
|
||||||
setLoading: (loading: boolean) => void;
|
|
||||||
formData: any;
|
|
||||||
setFormData: (formData: any) => void;
|
|
||||||
login: () => Promise<void>;
|
|
||||||
register: () => Promise<void>;
|
|
||||||
isLogin: boolean;
|
|
||||||
setIsLogin: (isLogin: boolean) => void;
|
|
||||||
};
|
|
||||||
export const useLoginStore = create<LoginStore>((set, get) => {
|
|
||||||
return {
|
|
||||||
loading: false,
|
|
||||||
setLoading: (loading) => set({ loading }),
|
|
||||||
formData: {},
|
|
||||||
setFormData: (formData) => set({ formData }),
|
|
||||||
login: async () => {
|
|
||||||
const { formData } = get();
|
|
||||||
const { username, password } = formData;
|
|
||||||
if (!username || !password) {
|
|
||||||
message.error('Please input username and password');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
set({ loading: true });
|
|
||||||
const loaded = message.loading('loading...', 0);
|
|
||||||
const res = await query.post({ path: 'user', key: 'login', username, password });
|
|
||||||
loaded();
|
|
||||||
if (res.code === 200) {
|
|
||||||
const { token } = res.data;
|
|
||||||
message.success('Success');
|
|
||||||
set({ isLogin: true });
|
|
||||||
localStorage.setItem('token', token);
|
|
||||||
// 跳到某一个页面，更新localStorage
|
|
||||||
history.push('/map');
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
register: async () => {
|
|
||||||
set({ loading: true });
|
|
||||||
const loaded = message.loading('loading...', 0);
|
|
||||||
const res = await query.post({ path: 'user', key: 'register' });
|
|
||||||
loaded();
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success');
|
|
||||||
// 跳到某一个页面
|
|
||||||
// history.push('/map', {}, true);
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
isLogin: false,
|
|
||||||
setIsLogin: (isLogin) => set({ isLogin }),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
type LoadingProps = {
|
|
||||||
loading?: boolean;
|
|
||||||
children?: React.ReactNode;
|
|
||||||
};
|
|
||||||
export const Loading = (props: LoadingProps) => {
|
|
||||||
if (!props.loading) return <>{props.children}</>;
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full flex justify-center items-center'>
|
|
||||||
<div className='w-20 h-20 border-t-8 border-b-8 rounded-full animate-spin'></div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export const ForModal = () => {
|
|
||||||
return <div id='for-modal'></div>;
|
|
||||||
};
|
|
||||||
export const getContainer = () => {
|
|
||||||
return document.querySelector('#for-modal')!;
|
|
||||||
};
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export * from './container'
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
export const getIsMac = async () => {
|
|
||||||
// @ts-ignore
|
|
||||||
const userAgentData = navigator.userAgentData;
|
|
||||||
if (userAgentData) {
|
|
||||||
const ua = await userAgentData.getHighEntropyValues(['platform']);
|
|
||||||
console.log('ua', ua);
|
|
||||||
if (ua.platform === 'macOS') {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
export const getIsElectron = () => {
|
|
||||||
// 检查 window.process 和 navigator.userAgent 中是否包含 Electron 信息
|
|
||||||
return (
|
|
||||||
// @ts-ignore
|
|
||||||
(typeof window !== 'undefined' && typeof window.process !== 'undefined' && window.process.type === 'renderer') ||
|
|
||||||
(typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0)
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,142 +0,0 @@
|
|||||||
import { RenderData } from '@kevisual/container';
|
|
||||||
|
|
||||||
type Page = {
|
|
||||||
data: {
|
|
||||||
edges: { id: string; source: string; target: string }[];
|
|
||||||
nodes: { id: string; type: string; position: { x: number; y: number }; data: any }[];
|
|
||||||
};
|
|
||||||
id: string;
|
|
||||||
type: string;
|
|
||||||
[key: string]: any;
|
|
||||||
};
|
|
||||||
type Container = {
|
|
||||||
code: string;
|
|
||||||
id: string;
|
|
||||||
[key: string]: any;
|
|
||||||
};
|
|
||||||
type PageEditData = {
|
|
||||||
page: Page;
|
|
||||||
containerList: Container[];
|
|
||||||
};
|
|
||||||
export const getContainerData = (pageEditData: PageEditData) => {
|
|
||||||
const { page, containerList } = pageEditData;
|
|
||||||
const containerObj = containerList.reduce((acc, container) => {
|
|
||||||
acc[container.id] = container;
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
const { edges, nodes } = page.data;
|
|
||||||
const nodesObj = nodes.reduce((acc, node) => {
|
|
||||||
acc[node.id] = node;
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
const treeArray = getTreeFromEdges(edges);
|
|
||||||
const floatNodes = nodes.filter((node) => !treeArray.find((item) => item.id === node.id));
|
|
||||||
const treeNodes = nodes.filter((node) => treeArray.find((item) => item.id === node.id));
|
|
||||||
const renderData: RenderData[] = [];
|
|
||||||
for (let tree of treeArray) {
|
|
||||||
const node = nodesObj[tree.id];
|
|
||||||
const container = containerObj[node.data?.cid];
|
|
||||||
const style = node.data?.style ?? {
|
|
||||||
position: 'absolute',
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
};
|
|
||||||
const data = {
|
|
||||||
node: { ...node },
|
|
||||||
container: { ...container },
|
|
||||||
};
|
|
||||||
renderData.push({
|
|
||||||
id: node.id,
|
|
||||||
children: tree.children,
|
|
||||||
parents: tree.parents,
|
|
||||||
code: container?.code || '',
|
|
||||||
codeId: container?.id,
|
|
||||||
data: data || {},
|
|
||||||
className: node.data?.className,
|
|
||||||
shadowRoot: node.data?.shadowRoot,
|
|
||||||
showChild: node.data?.showChild,
|
|
||||||
style,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
for (let node of floatNodes) {
|
|
||||||
const container = containerObj[node.data?.cid];
|
|
||||||
const style = node.data?.style ?? {
|
|
||||||
position: 'absolute',
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
};
|
|
||||||
const data = {
|
|
||||||
node: { ...node },
|
|
||||||
container: { ...container },
|
|
||||||
};
|
|
||||||
renderData.push({
|
|
||||||
id: node.id,
|
|
||||||
children: [],
|
|
||||||
parents: [],
|
|
||||||
code: container?.code || '',
|
|
||||||
codeId: container?.id,
|
|
||||||
data: data || {},
|
|
||||||
className: node.data?.className,
|
|
||||||
shadowRoot: node.data?.shadowRoot,
|
|
||||||
showChild: node.data?.showChild,
|
|
||||||
style,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return renderData;
|
|
||||||
};
|
|
||||||
const getTreeFromEdges = (
|
|
||||||
edges: { id: string; source: string; target: string }[],
|
|
||||||
): {
|
|
||||||
id: string;
|
|
||||||
parents: string[];
|
|
||||||
children: string[];
|
|
||||||
}[] => {
|
|
||||||
// 构建树形结构
|
|
||||||
function buildNodeTree(edges) {
|
|
||||||
const nodeMap = {};
|
|
||||||
|
|
||||||
// 初始化每个节点的子节点列表和父节点列表
|
|
||||||
edges.forEach((edge) => {
|
|
||||||
if (!nodeMap[edge.source]) {
|
|
||||||
nodeMap[edge.source] = { id: edge.source, parents: [], children: [] };
|
|
||||||
}
|
|
||||||
if (!nodeMap[edge.target]) {
|
|
||||||
nodeMap[edge.target] = { id: edge.target, parents: [], children: [] };
|
|
||||||
}
|
|
||||||
|
|
||||||
// 连接父节点和子节点
|
|
||||||
nodeMap[edge.source].children.push(nodeMap[edge.target]);
|
|
||||||
nodeMap[edge.target].parents.push(nodeMap[edge.source]);
|
|
||||||
});
|
|
||||||
|
|
||||||
return nodeMap;
|
|
||||||
}
|
|
||||||
|
|
||||||
const nodeTree = buildNodeTree(edges);
|
|
||||||
|
|
||||||
// 递归获取所有父节点，按顺序
|
|
||||||
function getAllParents(node) {
|
|
||||||
const parents: string[] = [];
|
|
||||||
function traverseParents(currentNode) {
|
|
||||||
if (currentNode.parents.length > 0) {
|
|
||||||
currentNode.parents.forEach((parent: any) => {
|
|
||||||
parents.push(parent.id);
|
|
||||||
traverseParents(parent);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
traverseParents(node);
|
|
||||||
return parents.reverse(); // 确保顺序从最顶层到直接父节点
|
|
||||||
}
|
|
||||||
|
|
||||||
function getNodeInfo(nodeMap) {
|
|
||||||
return Object.values(nodeMap).map((node: any) => ({
|
|
||||||
id: node.id,
|
|
||||||
parents: getAllParents(node),
|
|
||||||
children: node.children.map((child) => child.id),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
const result = getNodeInfo(nodeTree);
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
@ -1,4 +1,3 @@
|
|||||||
export * from './query';
|
export * from './query';
|
||||||
export * from './deck-to-flow/deck';
|
|
||||||
|
|
||||||
export * from './navicate';
|
export * from './navicate';
|
||||||
@ -22,11 +22,6 @@ const meun = [
|
|||||||
icon: <HomeOutlined />,
|
icon: <HomeOutlined />,
|
||||||
link: '/map',
|
link: '/map',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: 'Panel',
|
|
||||||
icon: <DashboardOutlined />,
|
|
||||||
link: '/panel/edit/list',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'User App',
|
title: 'User App',
|
||||||
icon: <AppstoreOutlined />,
|
icon: <AppstoreOutlined />,
|
||||||
@ -37,26 +32,11 @@ const meun = [
|
|||||||
icon: <FolderOutlined />,
|
icon: <FolderOutlined />,
|
||||||
link: '/file/edit/list',
|
link: '/file/edit/list',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: 'Prompt',
|
|
||||||
icon: <MessageOutlined />,
|
|
||||||
link: '/prompt',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'Container',
|
title: 'Container',
|
||||||
icon: <CodeOutlined />,
|
icon: <CodeOutlined />,
|
||||||
link: '/container/edit/list',
|
link: '/container/edit/list',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: 'Agent',
|
|
||||||
icon: <RocketOutlined />,
|
|
||||||
link: '/agent/edit/list',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Chat Prompt',
|
|
||||||
icon: <ReadOutlined />,
|
|
||||||
link: '/chat/chat-prompt/list',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'Org',
|
title: 'Org',
|
||||||
icon: <SwitcherOutlined />,
|
icon: <SwitcherOutlined />,
|
||||||
@ -79,7 +59,7 @@ export const LayoutMenu = () => {
|
|||||||
}}></div>
|
}}></div>
|
||||||
<div className='w-[300px] h-full absolute top-0 left-0 bg-white'>
|
<div className='w-[300px] h-full absolute top-0 left-0 bg-white'>
|
||||||
<div className='flex justify-between p-6 mt-4 font-bold items-center'>
|
<div className='flex justify-between p-6 mt-4 font-bold items-center'>
|
||||||
Envision
|
Envision Center
|
||||||
<div>
|
<div>
|
||||||
<Button icon={<CloseOutlined />} onClick={() => setOpen(false)}></Button>
|
<Button icon={<CloseOutlined />} onClick={() => setOpen(false)}></Button>
|
||||||
</div>
|
</div>
|
||||||
@ -93,7 +73,7 @@ export const LayoutMenu = () => {
|
|||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (item.link) navigate(`${item.link}`);
|
if (item.link) navigate(`${item.link}`);
|
||||||
else {
|
else {
|
||||||
message.info('About Envision');
|
message.info('About Envision Center');
|
||||||
}
|
}
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
}}>
|
}}>
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
import { AiMoudle, useAiStore } from '@/pages/ai-chat';
|
|
||||||
import { MenuOutlined, SwapOutlined } from '@ant-design/icons';
|
import { MenuOutlined, SwapOutlined } from '@ant-design/icons';
|
||||||
import { Button, Tooltip } from 'antd';
|
import { Button, Tooltip } from 'antd';
|
||||||
import { Outlet } from 'react-router-dom';
|
import { Outlet } from 'react-router-dom';
|
||||||
@ -39,11 +38,7 @@ export const LayoutMain = (props: LayoutMainProps) => {
|
|||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
const { isMac, mount, isElectron } = platformStore;
|
const { isMac, mount, isElectron } = platformStore;
|
||||||
const aiStore = useAiStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return { open: state.open };
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
platformStore.init();
|
platformStore.init();
|
||||||
}, []);
|
}, []);
|
||||||
@ -106,12 +101,10 @@ export const LayoutMain = (props: LayoutMainProps) => {
|
|||||||
</div>
|
</div>
|
||||||
</Panel>
|
</Panel>
|
||||||
|
|
||||||
<PanelResizeHandle />
|
{/* <PanelResizeHandle />
|
||||||
<Panel style={{ height: '100%' }} defaultSize={25} className={clsx(!aiStore.open && 'hidden')}>
|
<Panel style={{ height: '100%' }} defaultSize={25} className={clsx('bg-gray-100')}>
|
||||||
<div className='w-full h-full'>
|
侧边栏
|
||||||
<AiMoudle />
|
</Panel> */}
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
</PanelGroup>
|
</PanelGroup>
|
||||||
</div>
|
</div>
|
||||||
<LayoutUser />
|
<LayoutUser />
|
||||||
|
|||||||
@ -1,161 +0,0 @@
|
|||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { useAgentStore } from '../store';
|
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { CardBlank } from '@/components/card/CardBlank';
|
|
||||||
import { Button, Form, Input, message, Modal, Tooltip } from 'antd';
|
|
||||||
import copy from 'copy-to-clipboard';
|
|
||||||
import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, CaretRightOutlined } from '@ant-design/icons';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import { isObjectNull } from '@/utils/is-null';
|
|
||||||
const FormModal = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const containerStore = useAgentStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
showEdit: state.showEdit,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
formData: state.formData,
|
|
||||||
updateData: state.updateData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
const open = containerStore.showEdit;
|
|
||||||
if (open) {
|
|
||||||
const isNull = isObjectNull(containerStore.formData);
|
|
||||||
if (isNull) {
|
|
||||||
form.setFieldsValue({});
|
|
||||||
} else form.setFieldsValue(containerStore.formData);
|
|
||||||
}
|
|
||||||
}, [containerStore.showEdit]);
|
|
||||||
const onFinish = async (values: any) => {
|
|
||||||
if (!values.id) {
|
|
||||||
message.error('Cant add data');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
containerStore.updateData(values);
|
|
||||||
};
|
|
||||||
const onClose = () => {
|
|
||||||
containerStore.setShowEdit(false);
|
|
||||||
form.resetFields();
|
|
||||||
};
|
|
||||||
const isEdit = containerStore.formData.id;
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
title={isEdit ? 'Edit' : 'Add'}
|
|
||||||
open={containerStore.showEdit}
|
|
||||||
onClose={() => containerStore.setShowEdit(false)}
|
|
||||||
destroyOnClose
|
|
||||||
footer={false}
|
|
||||||
width={800}
|
|
||||||
onCancel={onClose}>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
onFinish={onFinish}
|
|
||||||
labelCol={{
|
|
||||||
span: 4,
|
|
||||||
}}
|
|
||||||
wrapperCol={{
|
|
||||||
span: 20,
|
|
||||||
}}>
|
|
||||||
<Form.Item name='id' hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='key' label='key'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='description' label='description'>
|
|
||||||
<Input.TextArea rows={4} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label=' ' colon={false}>
|
|
||||||
<Button type='primary' htmlType='submit'>
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
<Button className='ml-2' htmlType='reset' onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export const List = () => {
|
|
||||||
const agentStore = useAgentStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
setFormData: state.setFormData,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
list: state.list,
|
|
||||||
deleteData: state.deleteData,
|
|
||||||
getList: state.getList,
|
|
||||||
loading: state.loading,
|
|
||||||
updateData: state.updateData,
|
|
||||||
formData: state.formData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
agentStore.getList();
|
|
||||||
}, []);
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full bg-gray-200 p-4 '>
|
|
||||||
<div className='h-full bg-white p-4 rounded-md'>
|
|
||||||
<div className='flex gap-2 flex-wrap'>
|
|
||||||
{agentStore.list.map((item) => {
|
|
||||||
return (
|
|
||||||
<div className='card w-[300px]' key={item.id}>
|
|
||||||
<div className='card-title flex flex-col justify-between '>
|
|
||||||
{item.model} <div className='card-key'>{item.key}</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className='flex mt-2 '>
|
|
||||||
<Button.Group>
|
|
||||||
<Tooltip title='Edit'>
|
|
||||||
<Button
|
|
||||||
onClick={(e) => {
|
|
||||||
agentStore.setFormData(item);
|
|
||||||
agentStore.setShowEdit(true);
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
icon={<EditOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='Run Chat'>
|
|
||||||
<Button
|
|
||||||
icon={<CaretRightOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
// aiStore.setData(item);
|
|
||||||
// aiStore.setOpen(true);
|
|
||||||
message.error('Not implemented');
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='Delete'>
|
|
||||||
<Button
|
|
||||||
onClick={(e) => {
|
|
||||||
// agentStore.deleteData(item.id);
|
|
||||||
message.error('Not implemented');
|
|
||||||
// Modal.confirm({
|
|
||||||
// title: 'Delete',
|
|
||||||
// content: 'Are you sure delete this data?',
|
|
||||||
// onOk: () => {
|
|
||||||
// agentStore.deleteData(item.id);
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
icon={<DeleteOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Button.Group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{agentStore.list.length === 0 && <div className='text-center w-full'>No data</div>}
|
|
||||||
<CardBlank className='w-[300px]' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<FormModal />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
|
||||||
import { List } from './edit/List';
|
|
||||||
import { Main } from './layouts';
|
|
||||||
export const App = () => {
|
|
||||||
return (
|
|
||||||
<Routes>
|
|
||||||
<Route element={<Main />}>
|
|
||||||
<Route path='/' element={<Navigate to='/agent/edit/list' />}></Route>
|
|
||||||
<Route path='edit/list' element={<List />} />
|
|
||||||
<Route path='*' element={'Not Found'}></Route>
|
|
||||||
</Route>
|
|
||||||
</Routes>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export * from './module/Select';
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { LayoutMain } from '@/modules/layout';
|
|
||||||
|
|
||||||
export const Main = () => {
|
|
||||||
return <LayoutMain title='Agent' />;
|
|
||||||
};
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import { query } from '@/modules';
|
|
||||||
import { Select as AntSelect, message, SelectProps } from 'antd';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
export const Select = (props: SelectProps) => {
|
|
||||||
const [options, setOptions] = useState<{ value: string; id: string }[]>([]);
|
|
||||||
useEffect(() => {
|
|
||||||
fetch();
|
|
||||||
}, []);
|
|
||||||
const fetch = async () => {
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'agent',
|
|
||||||
key: 'list',
|
|
||||||
});
|
|
||||||
if (res.code !== 200) {
|
|
||||||
message.error(res.message || '获取agent列表失败');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const data = res.data || [];
|
|
||||||
setOptions(
|
|
||||||
data.map((item: any) => {
|
|
||||||
return {
|
|
||||||
label: item.key,
|
|
||||||
value: item.id,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<AntSelect
|
|
||||||
{...props}
|
|
||||||
options={options}
|
|
||||||
// onChange={(e) => {
|
|
||||||
// const labelValue = options.find((item) => item.value === e);
|
|
||||||
// props.onChange?.(e, options);
|
|
||||||
// }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,94 +0,0 @@
|
|||||||
import { create } from 'zustand';
|
|
||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
type AgentStore = {
|
|
||||||
showEdit: boolean;
|
|
||||||
setShowEdit: (showEdit: boolean) => void;
|
|
||||||
formData: any;
|
|
||||||
setFormData: (formData: any) => void;
|
|
||||||
loading: boolean;
|
|
||||||
setLoading: (loading: boolean) => void;
|
|
||||||
list: any[];
|
|
||||||
getList: () => Promise<void>;
|
|
||||||
updateData: (data: any) => Promise<void>;
|
|
||||||
deleteData: (id: string) => Promise<void>;
|
|
||||||
publishData: (data: any) => Promise<void>;
|
|
||||||
};
|
|
||||||
export const useAgentStore = create<AgentStore>((set, get) => {
|
|
||||||
return {
|
|
||||||
showEdit: false,
|
|
||||||
setShowEdit: (showEdit) => set({ showEdit }),
|
|
||||||
formData: {},
|
|
||||||
setFormData: (formData) => set({ formData }),
|
|
||||||
loading: false,
|
|
||||||
setLoading: (loading) => set({ loading }),
|
|
||||||
list: [],
|
|
||||||
getList: async () => {
|
|
||||||
set({ loading: true });
|
|
||||||
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'agent',
|
|
||||||
key: 'list',
|
|
||||||
});
|
|
||||||
set({ loading: false });
|
|
||||||
if (res.code === 200) {
|
|
||||||
set({ list: res.data });
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateData: async (data) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'agent',
|
|
||||||
key: 'update',
|
|
||||||
data,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success');
|
|
||||||
set({ showEdit: false, formData: [] });
|
|
||||||
getList();
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deleteData: async (id) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'agent',
|
|
||||||
key: 'delete',
|
|
||||||
id,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
getList();
|
|
||||||
message.success('Success');
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
publishData: async (data) => {
|
|
||||||
const hasPublish = !!data.publish?.name;
|
|
||||||
const publish = {
|
|
||||||
name: 'test-import',
|
|
||||||
};
|
|
||||||
if (!hasPublish) {
|
|
||||||
console.error('need publish.name');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'agent',
|
|
||||||
key: 'publish',
|
|
||||||
data: {
|
|
||||||
id: data.id,
|
|
||||||
publish: publish,
|
|
||||||
type: 'patch',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success');
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,390 +0,0 @@
|
|||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { useAiStore } from './store/ai-store';
|
|
||||||
import { CloseOutlined, HistoryOutlined, PlusOutlined } from '@ant-design/icons';
|
|
||||||
import { Button, Dropdown, Form, Input, message, Modal, Tooltip } from 'antd';
|
|
||||||
import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
|
|
||||||
import { TextArea } from '../container/components/TextArea';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import { query, useNewNavigate } from '@/modules';
|
|
||||||
import { nanoid } from 'nanoid';
|
|
||||||
import { ChatMessage } from './module/ChatMessage';
|
|
||||||
import { isObjectNull } from '@/utils/is-null';
|
|
||||||
import { useLocation } from 'react-router';
|
|
||||||
const testId = '60aca66b-4be9-4266-9568-6001032c7e13';
|
|
||||||
const NormalMessage = ({ onSend }: { onSend: any }) => {
|
|
||||||
const [message, setMessage] = useState('');
|
|
||||||
const onClick = () => {
|
|
||||||
onSend(message);
|
|
||||||
setMessage('');
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<TextArea value={message} onChange={(v) => setMessage(v)} className='scrollbar' style={{ minHeight: 180 }} placeholder='message' />
|
|
||||||
<div className='px-4'>
|
|
||||||
<Button type='primary' className='mt-4' onClick={onClick}>
|
|
||||||
发送
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
type FormModalProps = {
|
|
||||||
send?: any;
|
|
||||||
};
|
|
||||||
const FormModal = (props: FormModalProps) => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const aiStore = useAiStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
showEdit: state.showEdit,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
formData: state.formData,
|
|
||||||
setFormData: state.setFormData,
|
|
||||||
setMessage: state.setMessage,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
const open = aiStore.showEdit;
|
|
||||||
if (open) {
|
|
||||||
const isNull = isObjectNull(aiStore.formData);
|
|
||||||
if (isNull) {
|
|
||||||
form.setFieldsValue({});
|
|
||||||
} else form.setFieldsValue(aiStore.formData);
|
|
||||||
}
|
|
||||||
}, [aiStore.showEdit]);
|
|
||||||
const onFinish = async (values: any) => {
|
|
||||||
props.send({
|
|
||||||
type: 'changeSession',
|
|
||||||
data: {
|
|
||||||
id: testId,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
aiStore.setMessage([]);
|
|
||||||
};
|
|
||||||
const onClose = () => {
|
|
||||||
aiStore.setShowEdit(false);
|
|
||||||
aiStore.setFormData({});
|
|
||||||
form.resetFields();
|
|
||||||
};
|
|
||||||
const isEdit = aiStore.formData.id;
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
title={isEdit ? 'Edit' : 'Add'}
|
|
||||||
open={aiStore.showEdit}
|
|
||||||
onClose={() => aiStore.setShowEdit(false)}
|
|
||||||
destroyOnClose
|
|
||||||
footer={false}
|
|
||||||
width={800}
|
|
||||||
onCancel={onClose}>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
onFinish={onFinish}
|
|
||||||
labelCol={{
|
|
||||||
span: 4,
|
|
||||||
}}
|
|
||||||
wrapperCol={{
|
|
||||||
span: 20,
|
|
||||||
}}>
|
|
||||||
<Form.Item name='id' hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='sessionId' label='sessionId'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label=' ' colon={false}>
|
|
||||||
<Button type='primary' htmlType='submit'>
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
<Button className='ml-2' htmlType='reset' onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export const useListenQuery = () => {
|
|
||||||
const aiStore = useAiStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
open: state.open,
|
|
||||||
key: state.key,
|
|
||||||
onMessage: state.onMessage,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
// TODO: Implement useEffect
|
|
||||||
useEffect(() => {
|
|
||||||
if (!aiStore.open) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const open = aiStore.open;
|
|
||||||
send({
|
|
||||||
type: 'subscribe',
|
|
||||||
token: query.getToken(),
|
|
||||||
data: {
|
|
||||||
key: aiStore.key,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const close = query.qws.onMessage(onMessage, {
|
|
||||||
selector: (data) => {
|
|
||||||
const requestId = data.requestId;
|
|
||||||
return {
|
|
||||||
requestId,
|
|
||||||
...data.data,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
return () => {
|
|
||||||
send({ type: 'unsubscribe' });
|
|
||||||
close();
|
|
||||||
};
|
|
||||||
}, [aiStore.open, query]);
|
|
||||||
const send = async (data: any) => {
|
|
||||||
query.qws.send(data, {
|
|
||||||
wrapper: (data) => ({
|
|
||||||
requestId: nanoid(16),
|
|
||||||
type: 'chat',
|
|
||||||
data: data,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const onMessage = (data: any) => {
|
|
||||||
type MessageData = {
|
|
||||||
chatId: string;
|
|
||||||
chatPromptId: string;
|
|
||||||
role: string;
|
|
||||||
root: boolean;
|
|
||||||
show: boolean;
|
|
||||||
data: {
|
|
||||||
message: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
if (data.code === 200 && data.type === 'messages') {
|
|
||||||
const messageData = data.data as MessageData;
|
|
||||||
aiStore.onMessage(messageData);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
send,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export const AiMoudle = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const navigate = useNewNavigate();
|
|
||||||
const aiStore = useAiStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
open: state.open,
|
|
||||||
setOpen: state.setOpen,
|
|
||||||
formData: state.formData,
|
|
||||||
setFormData: state.setFormData,
|
|
||||||
messages: state.messages,
|
|
||||||
setMessages: state.setMessage,
|
|
||||||
key: state.key,
|
|
||||||
root: state.root,
|
|
||||||
setRoot: state.setRoot,
|
|
||||||
title: state.title,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
list: state.list,
|
|
||||||
getList: state.getList,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const [noPrompt, setNoPrompt] = useState(false);
|
|
||||||
const [currentPage, setCurrentPage] = useState('');
|
|
||||||
const location = useLocation();
|
|
||||||
useEffect(() => {
|
|
||||||
if (!aiStore.open) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const isNull = JSON.stringify(aiStore.formData) === '{}';
|
|
||||||
if (!isNull) {
|
|
||||||
form.setFieldsValue(aiStore.formData);
|
|
||||||
} else {
|
|
||||||
form.setFieldsValue({ inputs: [] });
|
|
||||||
}
|
|
||||||
}, [aiStore.open, aiStore.formData]);
|
|
||||||
useEffect(() => {
|
|
||||||
if (!aiStore.open) {
|
|
||||||
aiStore.setMessages([]);
|
|
||||||
} else {
|
|
||||||
aiStore.getList();
|
|
||||||
}
|
|
||||||
}, [aiStore.open]);
|
|
||||||
const { send } = useListenQuery();
|
|
||||||
useLayoutEffect(() => {
|
|
||||||
if (aiStore.open) {
|
|
||||||
aiStore.setOpen(false);
|
|
||||||
}
|
|
||||||
}, [location.pathname]);
|
|
||||||
|
|
||||||
const onSend = () => {
|
|
||||||
const data = form.getFieldsValue();
|
|
||||||
send({ type: 'messages', data: { ...data, root: true } });
|
|
||||||
};
|
|
||||||
const onSendNoPrompt = (value) => {
|
|
||||||
send({ type: 'messages', data: { message: value, root: true } });
|
|
||||||
};
|
|
||||||
|
|
||||||
const inputs = useMemo(() => {
|
|
||||||
if (!aiStore.open) return [];
|
|
||||||
const inputs = aiStore.formData?.inputs || [];
|
|
||||||
return inputs;
|
|
||||||
}, [aiStore.open, aiStore.formData]);
|
|
||||||
const isNotShow = inputs?.length === 0 || !inputs;
|
|
||||||
const OnlyNormalMessage = (
|
|
||||||
<Tooltip title='不需要任何预设prompt'>
|
|
||||||
<div
|
|
||||||
className='text-blue-500 text-xs mt-2 italic cursor-pointer'
|
|
||||||
onClick={() => {
|
|
||||||
setNoPrompt(true);
|
|
||||||
}}>
|
|
||||||
直接发送消息
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
const NeedPromptMessage = (
|
|
||||||
<Tooltip title='需要预设prompt'>
|
|
||||||
<div
|
|
||||||
className='text-blue-500 text-xs mt-2 italic cursor-pointer'
|
|
||||||
onClick={() => {
|
|
||||||
setNoPrompt(false);
|
|
||||||
}}>
|
|
||||||
需要预设prompt
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
const RootForm = (
|
|
||||||
<div className='flex flex-col relative'>
|
|
||||||
<div className={clsx('flex flex-col absolute top-3 w-full', isNotShow && 'invisible', noPrompt && 'invisible')}>
|
|
||||||
<div className='mt-1 ml-2'>在当前页面，我能帮助你什么吗? {OnlyNormalMessage}</div>
|
|
||||||
<div className='mt-4'>
|
|
||||||
<Form form={form}>
|
|
||||||
<Form.List name={'inputs'} initialValue={[]}>
|
|
||||||
{(fields, { add, remove }) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{fields.map((field, index) => {
|
|
||||||
const key = form.getFieldValue(['inputs', index, 'key']);
|
|
||||||
const isTitle = key === 'title';
|
|
||||||
return (
|
|
||||||
<div key={field.name + '-' + index} className=''>
|
|
||||||
<Form.Item name={[field.name, 'key']} rules={[{ required: true, message: 'Missing name' }]} hidden noStyle>
|
|
||||||
<Input placeholder='name' />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item className='!mb-0' name={[field.name, 'value']} rules={[{ required: true, message: 'Missing value' }]}>
|
|
||||||
<TextArea className='scrollbar' style={{ minHeight: isTitle ? 18 : 180 }} placeholder={key} />
|
|
||||||
</Form.Item>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Form.List>
|
|
||||||
</Form>
|
|
||||||
<div className='px-4'>
|
|
||||||
<Button type='primary' className='mt-4' onClick={onSend}>
|
|
||||||
发送
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{isNotShow && !noPrompt && (
|
|
||||||
<div className='flex flex-col absolute top-3'>
|
|
||||||
<div className='mt-2 text-gray-400 flex '>
|
|
||||||
当前页面没有配置，点击
|
|
||||||
<div
|
|
||||||
className='text-blue-500 cursor-pointer'
|
|
||||||
onClick={(e) => {
|
|
||||||
navigate('/chat/chat-prompt/list');
|
|
||||||
}}>
|
|
||||||
去配置
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>{OnlyNormalMessage}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{noPrompt && (
|
|
||||||
<div className=''>
|
|
||||||
{NeedPromptMessage}
|
|
||||||
<NormalMessage onSend={onSendNoPrompt} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const ChatForm = (
|
|
||||||
<ChatMessage
|
|
||||||
messages={aiStore.messages}
|
|
||||||
onSend={(value) => {
|
|
||||||
send({ type: 'messages', data: { message: value } });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
const items = aiStore.list.map((item) => {
|
|
||||||
return {
|
|
||||||
key: item.id,
|
|
||||||
label: item.title || item.id,
|
|
||||||
onClick: () => {
|
|
||||||
// aiStore.setKey(item.id);
|
|
||||||
// 选中具体的
|
|
||||||
send({
|
|
||||||
type: 'changeSession',
|
|
||||||
data: {
|
|
||||||
id: item.id,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
aiStore.setMessages([]);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
return (
|
|
||||||
<div className={clsx('w-full h-full flex-shrink-0 bg-gray-100 border-l-2 shadow-lg flex flex-col', !aiStore?.open && 'hidden')}>
|
|
||||||
<div className='flex justify-between p-2 border bg-white'>
|
|
||||||
<div className='flex gap-4'>
|
|
||||||
<Button className='position ml-4 ' onClick={() => aiStore.setOpen(false)} icon={<CloseOutlined />}></Button>
|
|
||||||
<h1 className=''>{aiStore.title || 'Ai Module'}</h1>
|
|
||||||
</div>
|
|
||||||
<div className='mr-4 flex'>
|
|
||||||
{!aiStore.root && (
|
|
||||||
<Button
|
|
||||||
className='mr-2'
|
|
||||||
onClick={() => {
|
|
||||||
aiStore.setMessages([]);
|
|
||||||
aiStore.setRoot(true);
|
|
||||||
send({
|
|
||||||
type: 'changeSession',
|
|
||||||
data: {
|
|
||||||
id: null,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
icon={<PlusOutlined />}></Button>
|
|
||||||
)}
|
|
||||||
<Dropdown
|
|
||||||
className='mr-2'
|
|
||||||
placement='bottomRight'
|
|
||||||
menu={{
|
|
||||||
items,
|
|
||||||
}}>
|
|
||||||
<Button className='' icon={<HistoryOutlined />}></Button>
|
|
||||||
</Dropdown>
|
|
||||||
{/* <Tooltip title='历史会话'>
|
|
||||||
<Button
|
|
||||||
className=''
|
|
||||||
onClick={() => {
|
|
||||||
aiStore.setShowEdit(true);
|
|
||||||
}}
|
|
||||||
icon={<HistoryOutlined />}></Button>
|
|
||||||
</Tooltip> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='flex-grow p-2 overflow-hidden h-full flex flex-col'>{aiStore.root ? RootForm : ChatForm}</div>
|
|
||||||
<FormModal send={send} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="32"
|
|
||||||
height="32"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
|
|
||||||
<rect x="6" y="11" width="4" height="4"></rect>
|
|
||||||
<rect x="14" y="11" width="4" height="4"></rect>
|
|
||||||
<path d="M6 7V5a2 2 0 012-2h8a2 2 0 012 2v2"></path>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 429 B |
@ -1,14 +0,0 @@
|
|||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="64"
|
|
||||||
height="64"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<circle cx="12" cy="7" r="5"></circle>
|
|
||||||
<path d="M5.5 21h13a2 2 0 002-2v-1a7 7 0 00-14 0v1a2 2 0 002 2z"></path>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 324 B |
@ -1,7 +0,0 @@
|
|||||||
import { AiMoudle } from './AiModule';
|
|
||||||
import { useAiStore } from './store/ai-store';
|
|
||||||
export { AiMoudle, useAiStore };
|
|
||||||
|
|
||||||
export const App = () => {
|
|
||||||
return <div>AI Chat</div>;
|
|
||||||
};
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
import { marked } from 'marked';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import AIAvatar from '../assets/ai-avatar.svg'; // 替换为您的 AI 头像路径
|
|
||||||
import UserAvatar from '../assets/user-avatar.svg'; // 替换为您的用户头像路径
|
|
||||||
import { TextArea } from '@/pages/container/components/TextArea';
|
|
||||||
import { Button } from 'antd';
|
|
||||||
import { SendOutlined } from '@ant-design/icons';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
export type MessageType = 'ai' | 'user';
|
|
||||||
|
|
||||||
export type Message = {
|
|
||||||
role: string;
|
|
||||||
content: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ChatMessageOne = (props: { message: Message }) => {
|
|
||||||
const { message } = props;
|
|
||||||
const htmlContent = marked.parse(message.content);
|
|
||||||
const isUser = message.role === 'user';
|
|
||||||
|
|
||||||
const containerClasses = clsx('flex mb-4 items-start', {
|
|
||||||
'justify-start flex-row': !isUser,
|
|
||||||
'flex-row-reverse': isUser,
|
|
||||||
});
|
|
||||||
const messageClasses = clsx('max-w-[76%] p-3 rounded-lg ', {
|
|
||||||
'bg-blue-500 text-white': isUser,
|
|
||||||
'bg-gray-200 text-gray-800': !isUser,
|
|
||||||
});
|
|
||||||
|
|
||||||
const avatarSrc = isUser ? UserAvatar : AIAvatar;
|
|
||||||
const avatarAlt = isUser ? 'User Avatar' : 'AI Avatar';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={containerClasses}>
|
|
||||||
<img src={avatarSrc} alt={avatarAlt} className='w-10 h-10 mx-2 rounded-full border border-gray-300 p-2' />
|
|
||||||
<div className={messageClasses} dangerouslySetInnerHTML={{ __html: htmlContent }} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
type ChatMessageProps = {
|
|
||||||
messages: Message[];
|
|
||||||
onSend?: (message: string) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ChatMessage = (props: ChatMessageProps) => {
|
|
||||||
const { messages } = props;
|
|
||||||
const [inputValue, setInputValue] = useState('');
|
|
||||||
const onSend = () => {
|
|
||||||
if (!inputValue) return;
|
|
||||||
props.onSend?.(inputValue);
|
|
||||||
setInputValue('');
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full'>
|
|
||||||
<div className='max-h-[80%] overflow-y-auto scrollbar bg-white p-2 mx-1 border shadow-sm pt-5 rounded-lg'>
|
|
||||||
<div className='flex flex-col'>
|
|
||||||
{messages.map((message, index) => (
|
|
||||||
<ChatMessageOne key={index} message={message} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='relative'>
|
|
||||||
<TextArea
|
|
||||||
value={inputValue}
|
|
||||||
onChange={(e) => {
|
|
||||||
setInputValue(e);
|
|
||||||
}}
|
|
||||||
className='max-h-64'
|
|
||||||
style={{ minHeight: 180 }}
|
|
||||||
language='markdown'
|
|
||||||
placeholder='Message AI'
|
|
||||||
/>
|
|
||||||
<Button onClick={onSend} className='absolute bottom-4 right-4 cursor-pointer' type='primary' icon={<SendOutlined />}></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { StateCreator } from 'zustand';
|
|
||||||
import { AiStore } from './ai-store';
|
|
||||||
import { query } from '@/modules';
|
|
||||||
export type AiHistoryStore = {
|
|
||||||
list: any[];
|
|
||||||
getList: () => Promise<any>;
|
|
||||||
};
|
|
||||||
export const createAiHistoryStore: StateCreator<AiStore, [], [], AiHistoryStore> = (set, get, store) => {
|
|
||||||
return {
|
|
||||||
list: [],
|
|
||||||
getList: async () => {
|
|
||||||
const { key } = get();
|
|
||||||
set({ loading: true });
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'chat-session',
|
|
||||||
key: 'list-history',
|
|
||||||
data: { key },
|
|
||||||
});
|
|
||||||
if (res.success) {
|
|
||||||
set({ list: res.data });
|
|
||||||
}
|
|
||||||
console.log('res', res);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -1,133 +0,0 @@
|
|||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
import { produce } from 'immer';
|
|
||||||
import { create } from 'zustand';
|
|
||||||
import { AiHistoryStore, createAiHistoryStore } from './ai-history';
|
|
||||||
type ResData = {
|
|
||||||
created_at: string;
|
|
||||||
done?: boolean;
|
|
||||||
done_reason?: string;
|
|
||||||
eval_count?: number;
|
|
||||||
eval_duration?: number;
|
|
||||||
load_duration?: number;
|
|
||||||
message?: { role?: string; content?: string }[];
|
|
||||||
model?: string;
|
|
||||||
prompt_eval_count?: number;
|
|
||||||
prompt_eval_duration?: number;
|
|
||||||
total_duration?: number;
|
|
||||||
};
|
|
||||||
type MessageData = {
|
|
||||||
chatId: string;
|
|
||||||
chatPromptId: string;
|
|
||||||
role: string;
|
|
||||||
root: boolean;
|
|
||||||
show: boolean;
|
|
||||||
data: {
|
|
||||||
message: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
export type AiStore = {
|
|
||||||
/** 打开侧边栏 */
|
|
||||||
open: boolean;
|
|
||||||
setOpen: (open: boolean) => void;
|
|
||||||
showEdit: boolean;
|
|
||||||
setShowEdit: (showEdit: boolean) => void;
|
|
||||||
loading: boolean;
|
|
||||||
setLoading: (loading: boolean) => void;
|
|
||||||
type?: string;
|
|
||||||
/** 当前app执行的key */
|
|
||||||
key: string;
|
|
||||||
setKey: (key: string) => void;
|
|
||||||
setType?: (type: string) => void;
|
|
||||||
formData: any;
|
|
||||||
setFormData: (data: any) => void;
|
|
||||||
// Context Data
|
|
||||||
data: any;
|
|
||||||
setData: (data: any) => void;
|
|
||||||
title: string; // AI Module的标题
|
|
||||||
setTitle: (title: string) => void;
|
|
||||||
messages: { role: string; content: string }[];
|
|
||||||
setMessage: (message: { role: string; content: string }[]) => void;
|
|
||||||
getPrompt: (key?: string) => any;
|
|
||||||
// 设置预设数据，只有是root的情况下才成立
|
|
||||||
presetData?: any;
|
|
||||||
setPresetData: (data: any) => void;
|
|
||||||
/** 是否是第一条消息 */
|
|
||||||
root: boolean;
|
|
||||||
setRoot: (root: boolean) => void;
|
|
||||||
onMessage: (data: MessageData) => void;
|
|
||||||
} & AiHistoryStore;
|
|
||||||
|
|
||||||
export const useAiStore = create<AiStore>((set, get, store) => {
|
|
||||||
return {
|
|
||||||
open: false,
|
|
||||||
setOpen: (open) => set({ open, root: true }),
|
|
||||||
loading: false,
|
|
||||||
setLoading: (loading) => set({ loading }),
|
|
||||||
key: '',
|
|
||||||
setKey: (key) => {
|
|
||||||
const { getPrompt } = get();
|
|
||||||
if (key) {
|
|
||||||
getPrompt(key);
|
|
||||||
}
|
|
||||||
set({ key });
|
|
||||||
},
|
|
||||||
formData: {},
|
|
||||||
setFormData: (data) => set({ formData: data }),
|
|
||||||
title: '',
|
|
||||||
setTitle: (title) => set({ title }),
|
|
||||||
data: {},
|
|
||||||
setData: (data) => set({ data }),
|
|
||||||
messages: [],
|
|
||||||
setMessage: (messages) => set({ messages }),
|
|
||||||
getPrompt: async (key) => {
|
|
||||||
const state = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'chat-prompt',
|
|
||||||
key: 'getByKey',
|
|
||||||
data: {
|
|
||||||
key: key || state.key,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
const { prompt } = res.data;
|
|
||||||
const { presetData } = prompt;
|
|
||||||
console.log(res.data);
|
|
||||||
state.setPresetData(presetData);
|
|
||||||
set({ root: true });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
presetData: {},
|
|
||||||
setPresetData: (data) => {
|
|
||||||
set({ presetData: data });
|
|
||||||
const { inputs = [] } = data?.data || {};
|
|
||||||
const formData = {
|
|
||||||
inputs: inputs.map((input) => {
|
|
||||||
return {
|
|
||||||
key: input.key,
|
|
||||||
value: input.value,
|
|
||||||
type: 'string',
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
messages: [],
|
|
||||||
};
|
|
||||||
set({ formData });
|
|
||||||
},
|
|
||||||
root: false,
|
|
||||||
setRoot: (root) => set({ root }),
|
|
||||||
onMessage: (data) => {
|
|
||||||
const state = get();
|
|
||||||
if (state.root) set({ root: false });
|
|
||||||
const { message } = data.data;
|
|
||||||
const role = data.role;
|
|
||||||
set(
|
|
||||||
produce((state) => {
|
|
||||||
state.messages.push({ role, content: message });
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
showEdit: false,
|
|
||||||
setShowEdit: (showEdit) => set({ showEdit }),
|
|
||||||
...createAiHistoryStore(set, get, store),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -118,9 +118,6 @@ export const List = () => {
|
|||||||
userAppStore.setShowEdit(true);
|
userAppStore.setShowEdit(true);
|
||||||
}}
|
}}
|
||||||
icon={<PlusOutlined />}></Button>
|
icon={<PlusOutlined />}></Button>
|
||||||
<Tooltip title='To Panel'>
|
|
||||||
<Button onClick={() => navicate('/panel')} icon={<DashboardOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='To Container'>
|
<Tooltip title='To Container'>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
|||||||
@ -1,176 +0,0 @@
|
|||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { useChatPromptStore } from '../store/chat-prompt';
|
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { Button, Form, Input, message, Modal, Tooltip } from 'antd';
|
|
||||||
import { DeleteOutlined, EditOutlined, MessageOutlined, PlusOutlined } from '@ant-design/icons';
|
|
||||||
import { isObjectNull } from '@/utils/is-null';
|
|
||||||
import { Select as AiAgentSelect } from '../../ai-agent';
|
|
||||||
import { Select as PromptSelect } from '../../prompt';
|
|
||||||
import { CardBlank } from '@/components/card/CardBlank';
|
|
||||||
import { useAiStore } from '@/pages/ai-chat';
|
|
||||||
|
|
||||||
const FormModal = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const chatPromptStore = useChatPromptStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
showEdit: state.showEdit,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
formData: state.formData,
|
|
||||||
updateData: state.updateData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
const open = chatPromptStore.showEdit;
|
|
||||||
if (open) {
|
|
||||||
const isNull = isObjectNull(chatPromptStore.formData);
|
|
||||||
if (isNull) {
|
|
||||||
form.setFieldsValue({});
|
|
||||||
} else form.setFieldsValue(chatPromptStore.formData);
|
|
||||||
}
|
|
||||||
}, [chatPromptStore.showEdit]);
|
|
||||||
const onFinish = async (values: any) => {
|
|
||||||
chatPromptStore.updateData(values);
|
|
||||||
};
|
|
||||||
const onClose = () => {
|
|
||||||
chatPromptStore.setShowEdit(false);
|
|
||||||
form.resetFields();
|
|
||||||
};
|
|
||||||
const isEdit = chatPromptStore.formData.id;
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
title={isEdit ? 'Edit' : 'Add'}
|
|
||||||
open={chatPromptStore.showEdit}
|
|
||||||
onClose={() => chatPromptStore.setShowEdit(false)}
|
|
||||||
destroyOnClose
|
|
||||||
footer={false}
|
|
||||||
width={800}
|
|
||||||
onCancel={onClose}>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
onFinish={onFinish}
|
|
||||||
labelCol={{
|
|
||||||
span: 4,
|
|
||||||
}}
|
|
||||||
wrapperCol={{
|
|
||||||
span: 20,
|
|
||||||
}}>
|
|
||||||
<Form.Item name='id' hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='title' label='title'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='description' label='description'>
|
|
||||||
<Input.TextArea rows={4} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label='key' name='key'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label='agent' name={['data', 'aiAgentId']}>
|
|
||||||
<AiAgentSelect />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label='prompt' name={['data', 'promptId']}>
|
|
||||||
<PromptSelect />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label=' ' colon={false}>
|
|
||||||
<Button type='primary' htmlType='submit'>
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
<Button className='ml-2' htmlType='reset' onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export const List = () => {
|
|
||||||
const chatPromptStore = useChatPromptStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
list: state.list,
|
|
||||||
getList: state.getList,
|
|
||||||
showEdit: state.showEdit,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
setFormData: state.setFormData,
|
|
||||||
deleteData: state.deleteData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const aiStore = useAiStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
open: state.open,
|
|
||||||
setOpen: state.setOpen,
|
|
||||||
setKey: state.setKey,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
chatPromptStore.getList();
|
|
||||||
}, []);
|
|
||||||
return (
|
|
||||||
<div className='flex w-full h-full bg-slate-200'>
|
|
||||||
<div className='h-full p-2 bg-white flex-shrink-0 flex justify-center'>
|
|
||||||
<Button className='' onClick={() => chatPromptStore.setShowEdit(true)} icon={<PlusOutlined />}></Button>
|
|
||||||
</div>
|
|
||||||
<div className='p-4'>
|
|
||||||
<div className='flex flex-wrap gap-4'>
|
|
||||||
{chatPromptStore.list.map((item) => {
|
|
||||||
return (
|
|
||||||
<div className='card w-[400px] max-h-[300px] scrollbar' key={item.id}>
|
|
||||||
<div className='card-title flex items-center '>
|
|
||||||
<div>{item.title} </div>
|
|
||||||
<div className='card-key ml-4'>{item.key}</div>
|
|
||||||
</div>
|
|
||||||
<div className='font-light mt-2'>{item.description ? item.description : '-'}</div>
|
|
||||||
<div>
|
|
||||||
<div className='flex mt-2 '>
|
|
||||||
<Button.Group>
|
|
||||||
<Tooltip title='Edit'>
|
|
||||||
<Button
|
|
||||||
onClick={(e) => {
|
|
||||||
chatPromptStore.setFormData(item);
|
|
||||||
chatPromptStore.setShowEdit(true);
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
icon={<EditOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='Delete'>
|
|
||||||
<Button
|
|
||||||
onClick={(e) => {
|
|
||||||
Modal.confirm({
|
|
||||||
title: 'Delete',
|
|
||||||
content: 'Are you sure delete this data?',
|
|
||||||
onOk: () => {
|
|
||||||
chatPromptStore.deleteData(item.id);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
icon={<DeleteOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='Chat'>
|
|
||||||
<Button
|
|
||||||
onClick={(e) => {
|
|
||||||
aiStore.setKey(location.pathname);
|
|
||||||
aiStore.setOpen(true);
|
|
||||||
}}
|
|
||||||
icon={<MessageOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Button.Group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<CardBlank className='w-[300px]' />
|
|
||||||
{!chatPromptStore.list.length && <div className='text-center w-full'>No data</div>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<FormModal />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { useHistoryStore } from '../store/history';
|
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { CardBlank } from '@/components/card/CardBlank';
|
|
||||||
import { Button, Modal, Tooltip } from 'antd';
|
|
||||||
import { DeleteOutlined } from '@ant-design/icons';
|
|
||||||
|
|
||||||
export const List = () => {
|
|
||||||
const historyStore = useHistoryStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
list: state.list,
|
|
||||||
getList: state.getList,
|
|
||||||
deleteData: state.deleteData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
historyStore.getList();
|
|
||||||
}, []);
|
|
||||||
return (
|
|
||||||
<div className='flex w-full h-full bg-slate-200'>
|
|
||||||
<div className='p-4'>
|
|
||||||
<div className=' flex gap-4 flex-wrap'>
|
|
||||||
{historyStore.list.map((item) => {
|
|
||||||
return (
|
|
||||||
<div key={item.id} className='card'>
|
|
||||||
<div>{item.id}</div>
|
|
||||||
<div>{item.title}</div>
|
|
||||||
<div>{item.chatId}</div>
|
|
||||||
<div>{item.promptId}</div>
|
|
||||||
{/* <div>{item.data.message || '-'}</div> */}
|
|
||||||
<div className='card-footer mt-3'>
|
|
||||||
<Button.Group>
|
|
||||||
<Tooltip title='Delete'>
|
|
||||||
<Button
|
|
||||||
onClick={(e) => {
|
|
||||||
Modal.confirm({
|
|
||||||
title: 'Delete',
|
|
||||||
content: 'Are you sure delete this data?',
|
|
||||||
onOk: () => {
|
|
||||||
historyStore.deleteData(item.id);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
icon={<DeleteOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Button.Group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<CardBlank />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
|
||||||
import { Main } from './layouts';
|
|
||||||
import { List as HistoryList } from './history/List';
|
|
||||||
import { List as SessionList } from './session/List';
|
|
||||||
import { List as ChatPromptList } from './chat-prompt/List';
|
|
||||||
|
|
||||||
export const App = () => {
|
|
||||||
return (
|
|
||||||
<Routes>
|
|
||||||
<Route element={<Main />}>
|
|
||||||
<Route path='/' element={<Navigate to='/chat/history/list' />}></Route>
|
|
||||||
<Route path='history/list' element={<HistoryList />} />
|
|
||||||
<Route path='session/list' element={<SessionList />} />
|
|
||||||
<Route path='chat-prompt/list' element={<ChatPromptList />} />
|
|
||||||
</Route>
|
|
||||||
</Routes>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { PlusOutlined } from '@ant-design/icons';
|
|
||||||
import { Button } from 'antd';
|
|
||||||
import { Outlet, useLocation } from 'react-router';
|
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { LayoutMain } from '@/modules/layout';
|
|
||||||
|
|
||||||
export const Main = () => {
|
|
||||||
const location = useLocation();
|
|
||||||
const isEdit = location.pathname.includes('edit/list');
|
|
||||||
return (
|
|
||||||
<LayoutMain
|
|
||||||
title={
|
|
||||||
<>
|
|
||||||
Chat
|
|
||||||
<Button
|
|
||||||
className={!isEdit ? 'hidden' : ''}
|
|
||||||
icon={<PlusOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
console.log('add');
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
}></LayoutMain>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,147 +0,0 @@
|
|||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { useSessionStore } from '../store/session';
|
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { Button, Form, Input, message, Modal, Tooltip } from 'antd';
|
|
||||||
import { DeleteOutlined, HistoryOutlined, PlusOutlined } from '@ant-design/icons';
|
|
||||||
import { isObjectNull } from '@/utils/is-null';
|
|
||||||
import { useAiStore } from '@/pages/ai-chat';
|
|
||||||
|
|
||||||
const FormModal = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const sessionStore = useSessionStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
showEdit: state.showEdit,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
formData: state.formData,
|
|
||||||
updateData: state.updateData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
const open = sessionStore.showEdit;
|
|
||||||
if (open) {
|
|
||||||
const isNull = isObjectNull(sessionStore.formData);
|
|
||||||
if (isNull) {
|
|
||||||
form.setFieldsValue({});
|
|
||||||
} else form.setFieldsValue(sessionStore.formData);
|
|
||||||
}
|
|
||||||
}, [sessionStore.showEdit]);
|
|
||||||
const onFinish = async (values: any) => {
|
|
||||||
sessionStore.updateData(values);
|
|
||||||
};
|
|
||||||
const onClose = () => {
|
|
||||||
sessionStore.setShowEdit(false);
|
|
||||||
form.resetFields();
|
|
||||||
};
|
|
||||||
const isEdit = sessionStore.formData.id;
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
title={isEdit ? 'Edit' : 'Add'}
|
|
||||||
open={sessionStore.showEdit}
|
|
||||||
onClose={() => sessionStore.setShowEdit(false)}
|
|
||||||
destroyOnClose
|
|
||||||
footer={false}
|
|
||||||
width={800}
|
|
||||||
onCancel={onClose}>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
onFinish={onFinish}
|
|
||||||
labelCol={{
|
|
||||||
span: 4,
|
|
||||||
}}
|
|
||||||
wrapperCol={{
|
|
||||||
span: 20,
|
|
||||||
}}>
|
|
||||||
<Form.Item name='id' hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='type' label='type'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='chatPromptId' label='chatPromptId'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label=' ' colon={false}>
|
|
||||||
<Button type='primary' htmlType='submit'>
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
<Button className='ml-2' htmlType='reset' onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export const List = () => {
|
|
||||||
const sessionStore = useSessionStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
list: state.list,
|
|
||||||
getList: state.getList,
|
|
||||||
showEdit: state.showEdit,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
deleteData: state.deleteData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const aiStore = useAiStore(
|
|
||||||
useShallow((state) => ({
|
|
||||||
setKey: state.setKey,
|
|
||||||
setOpen: state.setOpen,
|
|
||||||
})),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
sessionStore.getList();
|
|
||||||
}, []);
|
|
||||||
return (
|
|
||||||
<div className='flex w-full h-full bg-slate-200'>
|
|
||||||
<div className='h-full bg-white flex-shrink-0 flex justify-center'>
|
|
||||||
<Button className='m-4' onClick={() => sessionStore.setShowEdit(true)} icon={<PlusOutlined />}></Button>
|
|
||||||
</div>
|
|
||||||
<div className='p-4'>
|
|
||||||
<div className='flex flex-wrap gap-4'>
|
|
||||||
{sessionStore.list.map((item) => {
|
|
||||||
return (
|
|
||||||
<div key={item.id} className='card'>
|
|
||||||
<div className='card-title'>{item.titel || '-'}</div>
|
|
||||||
<div>{item.id}</div>
|
|
||||||
<div>{item.type}</div>
|
|
||||||
<div>{item.chatPromptId}</div>
|
|
||||||
<div className='card-footer mt-3'>
|
|
||||||
<Button.Group>
|
|
||||||
<Tooltip title='历史记录'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
// 继续回话，打开历史
|
|
||||||
aiStore.setKey(item.key);
|
|
||||||
aiStore.setOpen(true);
|
|
||||||
}}
|
|
||||||
icon={<HistoryOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='Delete'>
|
|
||||||
<Button
|
|
||||||
onClick={(e) => {
|
|
||||||
Modal.confirm({
|
|
||||||
title: 'Delete',
|
|
||||||
content: 'Are you sure delete this data?',
|
|
||||||
onOk: () => {
|
|
||||||
sessionStore.deleteData(item.id);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
icon={<DeleteOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Button.Group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<FormModal />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
import { create } from 'zustand';
|
|
||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
type ChatPromptStore = {
|
|
||||||
showEdit: boolean;
|
|
||||||
setShowEdit: (showEdit: boolean) => void;
|
|
||||||
formData: any;
|
|
||||||
setFormData: (formData: any) => void;
|
|
||||||
loading: boolean;
|
|
||||||
setLoading: (loading: boolean) => void;
|
|
||||||
list: any[];
|
|
||||||
getList: () => Promise<void>;
|
|
||||||
updateData: (data: any) => Promise<void>;
|
|
||||||
deleteData: (id: string) => Promise<void>;
|
|
||||||
};
|
|
||||||
export const useChatPromptStore = create<ChatPromptStore>((set, get) => {
|
|
||||||
return {
|
|
||||||
showEdit: false,
|
|
||||||
setShowEdit: (showEdit) => set({ showEdit }),
|
|
||||||
formData: {},
|
|
||||||
setFormData: (formData) => set({ formData }),
|
|
||||||
loading: false,
|
|
||||||
setLoading: (loading) => set({ loading }),
|
|
||||||
list: [],
|
|
||||||
getList: async () => {
|
|
||||||
set({ loading: true });
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'chat-prompt',
|
|
||||||
key: 'list',
|
|
||||||
});
|
|
||||||
set({ loading: false });
|
|
||||||
if (res.code === 200) {
|
|
||||||
set({ list: res.data });
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateData: async (data) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'chat-prompt',
|
|
||||||
key: 'update',
|
|
||||||
data,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success');
|
|
||||||
set({ showEdit: false, formData: [] });
|
|
||||||
getList();
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deleteData: async (id) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'chat-prompt',
|
|
||||||
key: 'delete',
|
|
||||||
id,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
getList();
|
|
||||||
message.success('Success');
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
import { create } from 'zustand';
|
|
||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
type HistoryStore = {
|
|
||||||
showEdit: boolean;
|
|
||||||
setShowEdit: (showEdit: boolean) => void;
|
|
||||||
formData: any;
|
|
||||||
setFormData: (formData: any) => void;
|
|
||||||
loading: boolean;
|
|
||||||
setLoading: (loading: boolean) => void;
|
|
||||||
list: any[];
|
|
||||||
getList: () => Promise<void>;
|
|
||||||
updateData: (data: any) => Promise<void>;
|
|
||||||
deleteData: (id: string) => Promise<void>;
|
|
||||||
};
|
|
||||||
export const useHistoryStore = create<HistoryStore>((set, get) => {
|
|
||||||
return {
|
|
||||||
showEdit: false,
|
|
||||||
setShowEdit: (showEdit) => set({ showEdit }),
|
|
||||||
formData: {},
|
|
||||||
setFormData: (formData) => set({ formData }),
|
|
||||||
loading: false,
|
|
||||||
setLoading: (loading) => set({ loading }),
|
|
||||||
list: [],
|
|
||||||
getList: async () => {
|
|
||||||
set({ loading: true });
|
|
||||||
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'chat-history',
|
|
||||||
key: 'list',
|
|
||||||
});
|
|
||||||
set({ loading: false });
|
|
||||||
if (res.code === 200) {
|
|
||||||
set({ list: res.data });
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateData: async (data) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'chat-history',
|
|
||||||
key: 'update',
|
|
||||||
data,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success');
|
|
||||||
set({ showEdit: false, formData: [] });
|
|
||||||
getList();
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deleteData: async (id) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'chat-history',
|
|
||||||
key: 'delete',
|
|
||||||
id,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
getList();
|
|
||||||
message.success('Success');
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
import { create } from 'zustand';
|
|
||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
type SessionStore = {
|
|
||||||
showEdit: boolean;
|
|
||||||
setShowEdit: (showEdit: boolean) => void;
|
|
||||||
formData: any;
|
|
||||||
setFormData: (formData: any) => void;
|
|
||||||
loading: boolean;
|
|
||||||
setLoading: (loading: boolean) => void;
|
|
||||||
list: any[];
|
|
||||||
getList: () => Promise<void>;
|
|
||||||
updateData: (data: any) => Promise<void>;
|
|
||||||
deleteData: (id: string) => Promise<void>;
|
|
||||||
};
|
|
||||||
export const useSessionStore = create<SessionStore>((set, get) => {
|
|
||||||
return {
|
|
||||||
showEdit: false,
|
|
||||||
setShowEdit: (showEdit) => set({ showEdit }),
|
|
||||||
formData: {},
|
|
||||||
setFormData: (formData) => set({ formData }),
|
|
||||||
loading: false,
|
|
||||||
setLoading: (loading) => set({ loading }),
|
|
||||||
list: [],
|
|
||||||
getList: async () => {
|
|
||||||
set({ loading: true });
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'chat-session',
|
|
||||||
key: 'list',
|
|
||||||
});
|
|
||||||
set({ loading: false });
|
|
||||||
if (res.code === 200) {
|
|
||||||
set({ list: res.data });
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateData: async (data) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'chat-session',
|
|
||||||
key: 'update',
|
|
||||||
data,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success');
|
|
||||||
set({ showEdit: false, formData: [] });
|
|
||||||
getList();
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deleteData: async (id) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'chat-session',
|
|
||||||
key: 'delete',
|
|
||||||
id,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
getList();
|
|
||||||
message.success('Success');
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,113 +0,0 @@
|
|||||||
import { createEditorInstance, editor } from '@kevisual/codemirror/dist/editor.json';
|
|
||||||
import { useEffect, useRef, useLayoutEffect, useState, useCallback } from 'react';
|
|
||||||
import { useLocation } from 'react-router';
|
|
||||||
import { useCodeEditorStore, ParseData } from '../store';
|
|
||||||
import { Button, message, Tooltip } from 'antd';
|
|
||||||
import { LeftOutlined, MessageOutlined, SaveOutlined } from '@ant-design/icons';
|
|
||||||
import { useAiStore } from '@/pages/ai-chat';
|
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { useNewNavigate } from '@/modules';
|
|
||||||
export const App = () => {
|
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
|
||||||
const editorRef = useRef<typeof editor>(null);
|
|
||||||
const location = useLocation();
|
|
||||||
const store = useCodeEditorStore();
|
|
||||||
const [mounted, setMounted] = useState(false);
|
|
||||||
const navigator = useNewNavigate();
|
|
||||||
const aiStore = useAiStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
setOpen: state.setOpen,
|
|
||||||
setKey: state.setKey,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
initEditor();
|
|
||||||
const state = location.state as ParseData;
|
|
||||||
if (state && state.data) {
|
|
||||||
store.init(state);
|
|
||||||
}
|
|
||||||
setMounted(true);
|
|
||||||
return () => {
|
|
||||||
setMounted(false);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
useLayoutEffect(() => {
|
|
||||||
if (!mounted) return;
|
|
||||||
if (editorRef.current) {
|
|
||||||
setNewValue(store.code);
|
|
||||||
} else {
|
|
||||||
setNewValue('');
|
|
||||||
}
|
|
||||||
}, [store.code, mounted]);
|
|
||||||
const initEditor = () => {
|
|
||||||
const _editor = createEditorInstance(ref.current!);
|
|
||||||
editorRef.current = _editor;
|
|
||||||
};
|
|
||||||
const setNewValue = (value: string) => {
|
|
||||||
const editor = editorRef.current;
|
|
||||||
if (editor) {
|
|
||||||
editor.dispatch({
|
|
||||||
changes: [{ from: 0, to: editor.state.doc.length, insert: value }],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const getValue = () => {
|
|
||||||
const editor = editorRef.current;
|
|
||||||
if (editor) {
|
|
||||||
return editor.state.doc.toString();
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
};
|
|
||||||
const onSave = useCallback(async () => {
|
|
||||||
const value = getValue();
|
|
||||||
// store.onUpdate(value);
|
|
||||||
if (store.dataType === 'object') {
|
|
||||||
try {
|
|
||||||
JSON.parse(value);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
message.error('JSON format error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
store.onUpdate(value);
|
|
||||||
}, [store.dataType]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full bg-gray-400 flex flex-col'>
|
|
||||||
<div className='p-4 flex-grow overflow-hidden'>
|
|
||||||
<div className='h-full w-full overflow-hidden'>
|
|
||||||
<Button.Group className='mb-2'>
|
|
||||||
<Tooltip title='Go Back' placement='bottom'>
|
|
||||||
<Button
|
|
||||||
className=''
|
|
||||||
icon={<LeftOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
navigator(-1);
|
|
||||||
}}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='Ai Chat'>
|
|
||||||
<Button
|
|
||||||
className=''
|
|
||||||
onClick={() => {
|
|
||||||
aiStore.setOpen(true);
|
|
||||||
aiStore.setKey(location.pathname);
|
|
||||||
}}
|
|
||||||
icon={<MessageOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='Save' placement='bottom'>
|
|
||||||
<Button className='' onClick={onSave} icon={<SaveOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Button.Group>
|
|
||||||
<div className='w-full p-4 rounded-md bg-white overflow-hidden relative' style={{ height: 'calc(100% - 130px)' }}>
|
|
||||||
<div className='w-full h-full scrollbar'>
|
|
||||||
<div className='w-full h-full' ref={ref}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
import { useNewNavigate } from '@/modules';
|
|
||||||
import { ParseData } from '../store';
|
|
||||||
export const useToCodeEditor = () => {
|
|
||||||
const navigate = useNewNavigate();
|
|
||||||
const toPage = (pathKey: ParseData['updatePath'], data: ParseData['data']) => {
|
|
||||||
navigate('/code-editor', {
|
|
||||||
state: {
|
|
||||||
updatePath: pathKey,
|
|
||||||
data,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const PageUpdate = {
|
|
||||||
path: 'page',
|
|
||||||
key: 'update',
|
|
||||||
};
|
|
||||||
const toPagePage = (data: ParseData['data']) => {
|
|
||||||
navigate('/code-editor', {
|
|
||||||
state: {
|
|
||||||
updatePath: PageUpdate,
|
|
||||||
data,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
toPage,
|
|
||||||
toPagePage,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
|
||||||
import { App as EditApp } from './edit/Edit';
|
|
||||||
import { Main } from './layouts';
|
|
||||||
import { useToCodeEditor } from './hooks/use-to-code-editor';
|
|
||||||
export { useToCodeEditor };
|
|
||||||
export const App = () => {
|
|
||||||
return (
|
|
||||||
<Routes>
|
|
||||||
<Route element={<Main />}>
|
|
||||||
<Route path='/' element={<EditApp />}></Route>
|
|
||||||
</Route>
|
|
||||||
</Routes>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import { useLocation } from 'react-router';
|
|
||||||
import { LayoutMain } from '@/modules/layout';
|
|
||||||
|
|
||||||
export const Main = () => {
|
|
||||||
const location = useLocation();
|
|
||||||
return <LayoutMain title={<>Edit Source JSON Code</>}></LayoutMain>;
|
|
||||||
};
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
import { create } from 'zustand';
|
|
||||||
import { produce } from 'immer';
|
|
||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
|
|
||||||
type QueryPath = {
|
|
||||||
key?: string;
|
|
||||||
path?: string;
|
|
||||||
};
|
|
||||||
export type ParseData = {
|
|
||||||
updatePath: QueryPath;
|
|
||||||
data?: string | Object;
|
|
||||||
};
|
|
||||||
type CodeEditorStore = {
|
|
||||||
code: string;
|
|
||||||
type: string; // javascript, json
|
|
||||||
setCode: (code: string) => void;
|
|
||||||
loading: boolean;
|
|
||||||
setLoading: (loading: boolean) => void;
|
|
||||||
data: any;
|
|
||||||
dataType: string | Object;
|
|
||||||
setData: (data: any) => void;
|
|
||||||
updatePath: QueryPath;
|
|
||||||
setUpdatePath: (updatePath: any) => void;
|
|
||||||
onUpdate: (data: string) => Promise<any>;
|
|
||||||
init: (parseData: { updatePath: QueryPath; data?: string | Object }) => void;
|
|
||||||
};
|
|
||||||
export const useCodeEditorStore = create<CodeEditorStore>((set, get) => ({
|
|
||||||
code: '',
|
|
||||||
type: 'javascript',
|
|
||||||
setCode: (code: string) => set({ code }),
|
|
||||||
loading: false,
|
|
||||||
setLoading: (loading: boolean) => set({ loading }),
|
|
||||||
data: {},
|
|
||||||
dataType: 'json',
|
|
||||||
setData: (data: any) => set({ data }),
|
|
||||||
updatePath: {},
|
|
||||||
setUpdatePath: (updatePath) => set({ updatePath }),
|
|
||||||
onUpdate: async (data: string) => {
|
|
||||||
const { updatePath, dataType } = get();
|
|
||||||
const { path, key } = updatePath;
|
|
||||||
let _newData = data;
|
|
||||||
if (dataType === 'object') {
|
|
||||||
try {
|
|
||||||
_newData = JSON.parse(data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
} else if (dataType === 'string') {
|
|
||||||
_newData = data;
|
|
||||||
}
|
|
||||||
if (path && key) {
|
|
||||||
const load = message.loading('loading...', 0);
|
|
||||||
|
|
||||||
const res = await query.post({ path, key, data: _newData });
|
|
||||||
load();
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('success');
|
|
||||||
set(
|
|
||||||
produce((state) => {
|
|
||||||
state.data = res.data;
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
init({ updatePath, data }) {
|
|
||||||
if (typeof data === 'string' && data) {
|
|
||||||
set(
|
|
||||||
produce((state) => {
|
|
||||||
state.code = data;
|
|
||||||
state.data = data;
|
|
||||||
state.dataType = 'string';
|
|
||||||
state.updatePath = updatePath;
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
} else if (typeof data === 'object' && data) {
|
|
||||||
set(
|
|
||||||
produce((state) => {
|
|
||||||
state.data = data;
|
|
||||||
state.code = JSON.stringify(data, null, 2);
|
|
||||||
state.dataType = 'object';
|
|
||||||
state.updatePath = updatePath;
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@ -21,7 +21,6 @@ import {
|
|||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { isObjectNull } from '@/utils/is-null';
|
import { isObjectNull } from '@/utils/is-null';
|
||||||
import { CardBlank } from '@/components/card/CardBlank';
|
import { CardBlank } from '@/components/card/CardBlank';
|
||||||
import { useAiStore } from '@/pages/ai-chat';
|
|
||||||
import { update } from 'lodash-es';
|
import { update } from 'lodash-es';
|
||||||
const FormModal = () => {
|
const FormModal = () => {
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
@ -205,15 +204,7 @@ export const ContainerList = () => {
|
|||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
const aiStore = useAiStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
open: state.open,
|
|
||||||
setOpen: state.setOpen,
|
|
||||||
setKey: state.setKey,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const [codeEdit, setCodeEdit] = useState(false);
|
const [codeEdit, setCodeEdit] = useState(false);
|
||||||
const [code, setCode] = useState('');
|
const [code, setCode] = useState('');
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -230,9 +221,6 @@ export const ContainerList = () => {
|
|||||||
<Tooltip title='add'>
|
<Tooltip title='add'>
|
||||||
<Button onClick={onAdd} icon={<PlusOutlined />}></Button>
|
<Button onClick={onAdd} icon={<PlusOutlined />}></Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title='To Panel'>
|
|
||||||
<Button onClick={() => navicate('/panel')} icon={<DashboardOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-grow overflow-hidden h-full'>
|
<div className='flex flex-grow overflow-hidden h-full'>
|
||||||
<div className='flex-grow overflow-auto scrollbar bg-gray-100'>
|
<div className='flex-grow overflow-auto scrollbar bg-gray-100'>
|
||||||
@ -355,14 +343,6 @@ export const ContainerList = () => {
|
|||||||
}}
|
}}
|
||||||
icon={<LinkOutlined />}></Button>
|
icon={<LinkOutlined />}></Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title='ai编程'>
|
|
||||||
<Button
|
|
||||||
onClick={(e) => {
|
|
||||||
aiStore.setKey(location.pathname);
|
|
||||||
aiStore.setOpen(true);
|
|
||||||
}}
|
|
||||||
icon={<MessageOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='h-[94%] p-2 rounded-2 shadow-sm'>
|
<div className='h-[94%] p-2 rounded-2 shadow-sm'>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { Container, RenderData } from '@kevisual/container';
|
import { Container, RenderData, ContainerOne } from '@kevisual/container';
|
||||||
import { useEffect, useRef, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
import { replace, useParams } from 'react-router';
|
import { replace, useParams } from 'react-router';
|
||||||
import { query, ws, useStore } from '@/modules';
|
import { query, ws, useStore } from '@/modules';
|
||||||
@ -55,7 +55,6 @@ export const Preview = () => {
|
|||||||
const id = params.id;
|
const id = params.id;
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
const containerRef = useRef<Container | null>(null);
|
const containerRef = useRef<Container | null>(null);
|
||||||
const [data, setData] = useState<any>({});
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!id) return;
|
if (!id) return;
|
||||||
@ -107,16 +106,15 @@ export const Preview = () => {
|
|||||||
});
|
});
|
||||||
console.log('update---data', data, container.data);
|
console.log('update---data', data, container.data);
|
||||||
container.destroy(id!);
|
container.destroy(id!);
|
||||||
container.renderId(id!);
|
container.render(id!);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log('data', containerRef.current);
|
console.log('data', containerRef.current);
|
||||||
const container = new Container({
|
const container = new Container({
|
||||||
root: ref.current!,
|
root: ref.current!,
|
||||||
data: data as any,
|
data: data as any,
|
||||||
showChild: false,
|
|
||||||
});
|
});
|
||||||
container.renderId(id!);
|
container.render(id!);
|
||||||
containerRef.current = container;
|
containerRef.current = container;
|
||||||
};
|
};
|
||||||
return <div className='mx-auto border bg-gray-200 h-full w-full' ref={ref}></div>;
|
return <div className='mx-auto border bg-gray-200 h-full w-full' ref={ref}></div>;
|
||||||
@ -176,16 +174,15 @@ export const PreviewWrapper = () => {
|
|||||||
});
|
});
|
||||||
console.log('update---data', data, container.data);
|
console.log('update---data', data, container.data);
|
||||||
container.destroy(id!);
|
container.destroy(id!);
|
||||||
container.renderId(id!);
|
container.render(id!);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log('data', containerRef.current);
|
console.log('data', containerRef.current);
|
||||||
const container = new Container({
|
const container = new Container({
|
||||||
root: ref.current!,
|
root: ref.current!,
|
||||||
data: data as any,
|
data: data as any,
|
||||||
showChild: false,
|
|
||||||
});
|
});
|
||||||
container.renderId(id!);
|
container.render(id!);
|
||||||
containerRef.current = container;
|
containerRef.current = container;
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -1,28 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { getCodeFromUrl, useGithubStore } from './store';
|
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
|
|
||||||
export const Callback = () => {
|
|
||||||
const [code, setCode] = useState('');
|
|
||||||
const githubStore = useGithubStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
getToken: state.getToken,
|
|
||||||
githubToken: state.githubToken,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
setCode(getCodeFromUrl());
|
|
||||||
githubStore.getToken();
|
|
||||||
}, []);
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full'>
|
|
||||||
<div className='p-4'>
|
|
||||||
<h1>Callback</h1>
|
|
||||||
<p>code: {code}</p>
|
|
||||||
<p>access_token: {githubStore.githubToken}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import { nanoid } from 'nanoid';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
const getGithubAuth = () => {
|
|
||||||
const client_id = 'Ov23littcejmbA5iKrhK';
|
|
||||||
const redirect_uri = 'https://envision.xiongxiao.me/github/callback';
|
|
||||||
const scope = 'user';
|
|
||||||
const state = 'abc123'; //&& nanoid(6);
|
|
||||||
return `https://github.com/login/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&scope=${scope}&state=${state}`;
|
|
||||||
};
|
|
||||||
export const Login = () => {
|
|
||||||
const [url, setUrl] = useState('');
|
|
||||||
useEffect(() => {
|
|
||||||
setUrl(getGithubAuth());
|
|
||||||
}, []);
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<a href={url}>Github登录</a>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
import { LayoutMain } from '@/modules/layout';
|
|
||||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
|
||||||
import { Login } from './Login';
|
|
||||||
import { Callback } from './Callback';
|
|
||||||
|
|
||||||
export const App = () => {
|
|
||||||
return (
|
|
||||||
<Routes>
|
|
||||||
<Route element={<LayoutMain title='Github登录' />}>
|
|
||||||
<Route path='/' element={<Navigate to='/github/login' />}></Route>
|
|
||||||
<Route path='login' element={<Login />} />
|
|
||||||
<Route path='/callback' element={<Callback />}></Route>
|
|
||||||
</Route>
|
|
||||||
</Routes>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
import { create } from 'zustand';
|
|
||||||
export const getCodeFromUrl = () => {
|
|
||||||
const searchParams = new URLSearchParams(window.location.search);
|
|
||||||
return searchParams.get('code') || '';
|
|
||||||
};
|
|
||||||
type GithubStore = {
|
|
||||||
githubToken?: string;
|
|
||||||
getToken: () => Promise<any>;
|
|
||||||
};
|
|
||||||
export const useGithubStore = create<GithubStore>((set) => ({
|
|
||||||
githubToken: '',
|
|
||||||
getToken: async () => {
|
|
||||||
const code = getCodeFromUrl();
|
|
||||||
if (!code) {
|
|
||||||
message.error('code不存在');
|
|
||||||
}
|
|
||||||
const loaded = message.loading('获取token中', 0);
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'github',
|
|
||||||
key: 'token',
|
|
||||||
code,
|
|
||||||
});
|
|
||||||
loaded();
|
|
||||||
if (res.code === 200) {
|
|
||||||
const { githubToken } = res.data;
|
|
||||||
set({ githubToken: githubToken });
|
|
||||||
localStorage.setItem('githubToken', githubToken);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@ -1,15 +1,11 @@
|
|||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { useNewNavigate } from '@/modules';
|
import { useNewNavigate } from '@/modules';
|
||||||
const serverList = ['container', 'panel', 'publish', 'code-editor', 'map', 'ai-chat'];
|
const serverList = ['container', 'map'];
|
||||||
const serverPath = [
|
const serverPath = [
|
||||||
{
|
{
|
||||||
path: 'container',
|
path: 'container',
|
||||||
links: ['edit/list', 'preview/:id', 'edit/:id'],
|
links: ['edit/list', 'preview/:id', 'edit/:id'],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'panel',
|
|
||||||
links: ['edit/list', 'flow/:id', 'deck/:id'],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'app',
|
path: 'app',
|
||||||
links: ['edit/list', ':app/version/list'],
|
links: ['edit/list', ':app/version/list'],
|
||||||
@ -18,26 +14,10 @@ const serverPath = [
|
|||||||
path: 'file',
|
path: 'file',
|
||||||
links: ['edit/list'],
|
links: ['edit/list'],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'publish',
|
|
||||||
links: ['edit/list'],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'map',
|
path: 'map',
|
||||||
links: ['/'],
|
links: ['/'],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'prompt',
|
|
||||||
links: ['/'],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'agent',
|
|
||||||
links: ['edit/list'],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'chat',
|
|
||||||
links: ['history/list', 'session/list', 'chat-prompt/list'],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'org',
|
path: 'org',
|
||||||
links: ['edit/list'],
|
links: ['edit/list'],
|
||||||
@ -52,7 +32,7 @@ const ServerPath = () => {
|
|||||||
<div className='flex flex-col w-full'>
|
<div className='flex flex-col w-full'>
|
||||||
{serverPath.map((item) => {
|
{serverPath.map((item) => {
|
||||||
const links = item.links.map((link) => {
|
const links = item.links.map((link) => {
|
||||||
const hasId = link.includes(':id');
|
const hasId = link.includes(':');
|
||||||
const _path = link === '/' ? item.path : item.path + '/' + link;
|
const _path = link === '/' ? item.path : item.path + '/' + link;
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -1,26 +0,0 @@
|
|||||||
import Editor from '@monaco-editor/react';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
export const AppEditor = () => {
|
|
||||||
const [code, setCode] = useState('');
|
|
||||||
const [language, setLanguage] = useState('javascript');
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full'>
|
|
||||||
<Editor
|
|
||||||
height={'100%'}
|
|
||||||
value={code}
|
|
||||||
language={language}
|
|
||||||
onChange={(value) => {
|
|
||||||
setCode(value || '');
|
|
||||||
}}
|
|
||||||
options={{
|
|
||||||
minimap: { enabled: false },
|
|
||||||
}}
|
|
||||||
defaultLanguage='javascript'
|
|
||||||
defaultValue='// some comment'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AppEditor;
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
import { useParams } from 'react-router';
|
|
||||||
import { useAppStore } from './store';
|
|
||||||
import { lazy, useEffect } from 'react';
|
|
||||||
import { Left } from './panel/Left';
|
|
||||||
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
|
|
||||||
import { EditorHeader } from './panel/EditorHeader';
|
|
||||||
|
|
||||||
// import AppEditor from './edit/Editor';
|
|
||||||
const AppEditor = lazy(() => import('./edit/Editor'));
|
|
||||||
|
|
||||||
export const App = () => {
|
|
||||||
const appStore = useAppStore();
|
|
||||||
const param = useParams();
|
|
||||||
const id = param.id as string;
|
|
||||||
useEffect(() => {
|
|
||||||
if (!id) return;
|
|
||||||
appStore.getData(id);
|
|
||||||
}, []);
|
|
||||||
if (!id) return <div>Not Found</div>;
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full flex bg-slate-200'>
|
|
||||||
<PanelGroup autoSaveId='editor' direction='horizontal'>
|
|
||||||
<Panel defaultSize={25}>
|
|
||||||
<Left />
|
|
||||||
</Panel>
|
|
||||||
<PanelResizeHandle />
|
|
||||||
<Panel defaultSize={75}>
|
|
||||||
<div className='w-full h-full'>
|
|
||||||
<EditorHeader />
|
|
||||||
<AppEditor />
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
</PanelGroup>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import { useAppStore } from '../store';
|
|
||||||
|
|
||||||
export const EditorHeader = () => {
|
|
||||||
const appStore = useAppStore();
|
|
||||||
const [headerList, setHeaderList] = useState([]);
|
|
||||||
return (
|
|
||||||
<div className=''>
|
|
||||||
<div className='px-2 border bg-[#f8f8f8]'>
|
|
||||||
<div className='flex justify-between items-center'>
|
|
||||||
<div className='flex items-center'>
|
|
||||||
<div className='text-lg font-semibold'>Header</div>
|
|
||||||
<div className='ml-2 text-xs text-gray-500'>({headerList.length})</div>
|
|
||||||
</div>
|
|
||||||
<div className='flex items-center'>
|
|
||||||
<button className='btn btn-sm btn-primary'>Add</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
import { useAppStore } from '../store';
|
|
||||||
|
|
||||||
type LabelProps = {
|
|
||||||
title: string;
|
|
||||||
children?: any;
|
|
||||||
};
|
|
||||||
export const Label = (props: LabelProps) => {
|
|
||||||
const { title } = props;
|
|
||||||
return (
|
|
||||||
<div className='flex'>
|
|
||||||
<div className='font-medium'>{title}:</div>
|
|
||||||
<div className='ml-2 line-clamp-3'>{props.children}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export const Left = () => {
|
|
||||||
const appStore = useAppStore();
|
|
||||||
return (
|
|
||||||
<div className='flex-shrink-0'>
|
|
||||||
<div className='px-4 py-2 max-h-[300px] overflow-auto scrollbar'>
|
|
||||||
<Label title='Title'>{appStore.data?.title}</Label>
|
|
||||||
<Label title='Description'>{appStore.data?.description}</Label>
|
|
||||||
</div>
|
|
||||||
<div className='h-0.5 bg-gray-500'></div>
|
|
||||||
<div className='mt-4 px-2 text-xs'>
|
|
||||||
{appStore.nodes?.map?.((node, index) => {
|
|
||||||
return (
|
|
||||||
<div className='hover:bg-gray-300 p-2 cursor-pointer' key={node.id}>
|
|
||||||
{node.id}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
import { create } from 'zustand';
|
|
||||||
|
|
||||||
type Node = {
|
|
||||||
id: string;
|
|
||||||
type: string;
|
|
||||||
data: {
|
|
||||||
cid: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
type AppStore = {
|
|
||||||
id: string;
|
|
||||||
setId: (id: string) => void;
|
|
||||||
getData: (id: string) => Promise<any>;
|
|
||||||
nodes: Node[];
|
|
||||||
data: any;
|
|
||||||
};
|
|
||||||
export const useAppStore = create<AppStore>((set, get) => ({
|
|
||||||
id: '',
|
|
||||||
setId: (id: string) => set({ id }),
|
|
||||||
data: {},
|
|
||||||
nodes: [],
|
|
||||||
getData: async (id: string) => {
|
|
||||||
console.log('getData');
|
|
||||||
if (!id) {
|
|
||||||
message.error('Invalid id');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
set({ id });
|
|
||||||
const loaded = message.loading('Loading...', 0);
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'page',
|
|
||||||
key: 'get',
|
|
||||||
id,
|
|
||||||
});
|
|
||||||
loaded();
|
|
||||||
if (res.code === 200) {
|
|
||||||
console.log(res.data);
|
|
||||||
const data = res.data;
|
|
||||||
const nodes = data?.data?.nodes;
|
|
||||||
set({ data: data, nodes });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@ -1,127 +0,0 @@
|
|||||||
import { isObjectNull } from '@/utils/is-null';
|
|
||||||
import { Button, Form, Input, message, Modal, Select } from 'antd';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { useDeckPageStore } from './deck-store';
|
|
||||||
export const FormModal = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const [options, setOptions] = useState<{ label: string; value: any }[]>([]);
|
|
||||||
const deckPageStore = useDeckPageStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
showEdit: state.showEdit,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
pageData: state.pageData,
|
|
||||||
getPageData: state.getPageData,
|
|
||||||
formData: state.formData,
|
|
||||||
setFormData: state.setFormData,
|
|
||||||
id: state.id,
|
|
||||||
setSelected: state.setSelected,
|
|
||||||
getSeleted: state.getSeleted,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
if (!deckPageStore.showEdit) return;
|
|
||||||
const pageData = deckPageStore.getPageData() || [];
|
|
||||||
const data = pageData.map((item) => {
|
|
||||||
const { container } = item?.data || {};
|
|
||||||
const label = container?.title;
|
|
||||||
return {
|
|
||||||
label: label || item.id,
|
|
||||||
value: item.id,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
setOptions(data);
|
|
||||||
const selected = deckPageStore.getSeleted();
|
|
||||||
const { cid } = selected?.data || {};
|
|
||||||
if (cid) {
|
|
||||||
form.setFieldsValue({ cid });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const isNull = isObjectNull(deckPageStore.formData);
|
|
||||||
if (isNull) {
|
|
||||||
form.setFieldsValue({});
|
|
||||||
form.resetFields();
|
|
||||||
} else {
|
|
||||||
form.setFieldsValue(deckPageStore.formData);
|
|
||||||
}
|
|
||||||
}, [deckPageStore.showEdit, deckPageStore.pageData]);
|
|
||||||
const onFinish = async (values: any) => {
|
|
||||||
const pageData = deckPageStore.getPageData() || [];
|
|
||||||
const page = pageData.find((item) => item.id === values.cid);
|
|
||||||
if (!page) {
|
|
||||||
message.error('Page not found');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const cid = values.cid;
|
|
||||||
if (!cid) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const el = document.querySelector(`[data-cid="${values.cid}"]`);
|
|
||||||
if (el) {
|
|
||||||
const data = (el as HTMLDivElement).dataset;
|
|
||||||
const { cid, pid } = data;
|
|
||||||
document.querySelectorAll('.active').forEach((item) => {
|
|
||||||
item.classList.remove('active');
|
|
||||||
});
|
|
||||||
el.classList.add('active');
|
|
||||||
// el.scrollIntoView({ behavior: 'smooth', });
|
|
||||||
deckPageStore.setSelected({ type: 'active', data: { cid, pid, rid: deckPageStore.id } });
|
|
||||||
}
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
const onClose = () => {
|
|
||||||
deckPageStore.setShowEdit(false);
|
|
||||||
deckPageStore.setFormData({});
|
|
||||||
form.setFieldsValue({});
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
title={'Select a element'}
|
|
||||||
open={deckPageStore.showEdit}
|
|
||||||
onClose={() => deckPageStore.setShowEdit(false)}
|
|
||||||
destroyOnClose
|
|
||||||
footer={false}
|
|
||||||
width={800}
|
|
||||||
onCancel={onClose}>
|
|
||||||
<Form
|
|
||||||
className='mt-4'
|
|
||||||
form={form}
|
|
||||||
onFinish={onFinish}
|
|
||||||
labelCol={{
|
|
||||||
span: 4,
|
|
||||||
}}
|
|
||||||
wrapperCol={{
|
|
||||||
span: 20,
|
|
||||||
}}>
|
|
||||||
<Form.Item name='id' hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='cid' label='cid'>
|
|
||||||
<Select
|
|
||||||
options={options.map((item) => {
|
|
||||||
return {
|
|
||||||
label: (
|
|
||||||
<div className='flex justify-between text-black'>
|
|
||||||
{item.label}
|
|
||||||
<div>{item.value}</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
value: item.value,
|
|
||||||
};
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label=' ' colon={false}>
|
|
||||||
<Button type='primary' htmlType='submit'>
|
|
||||||
Choose
|
|
||||||
</Button>
|
|
||||||
<Button className='ml-2' htmlType='reset' onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
import { create } from 'zustand';
|
|
||||||
|
|
||||||
type DeckPageStore = {
|
|
||||||
id: string;
|
|
||||||
setId: (id: string) => void;
|
|
||||||
showEdit: boolean;
|
|
||||||
setShowEdit: (showEdit: boolean) => void;
|
|
||||||
formData: any;
|
|
||||||
setFormData: (formData: any) => void;
|
|
||||||
loading: boolean;
|
|
||||||
setLoading: (loading: boolean) => void;
|
|
||||||
pageData: any[];
|
|
||||||
cids: string[];
|
|
||||||
setCids: () => void;
|
|
||||||
setPageData: (data: any[]) => void;
|
|
||||||
getPageData: () => any[];
|
|
||||||
selected: any;
|
|
||||||
setSelected: (data: any) => void;
|
|
||||||
getSeleted: () => any;
|
|
||||||
code: string;
|
|
||||||
setCode: (data: string) => void;
|
|
||||||
getCode: () => string;
|
|
||||||
};
|
|
||||||
export const useDeckPageStore = create<DeckPageStore>((set, get) => ({
|
|
||||||
id: '',
|
|
||||||
setId: (id) => {
|
|
||||||
set({ id });
|
|
||||||
},
|
|
||||||
showEdit: false,
|
|
||||||
setShowEdit: (showEdit) => {
|
|
||||||
set({ showEdit });
|
|
||||||
},
|
|
||||||
formData: {},
|
|
||||||
setFormData: (formData) => {
|
|
||||||
set({ formData });
|
|
||||||
},
|
|
||||||
loading: false,
|
|
||||||
setLoading: (loading) => {
|
|
||||||
set({ loading });
|
|
||||||
},
|
|
||||||
pageData: [],
|
|
||||||
setPageData: (data) => {
|
|
||||||
set({ pageData: data });
|
|
||||||
},
|
|
||||||
getPageData: () => {
|
|
||||||
return get().pageData;
|
|
||||||
},
|
|
||||||
selected: null,
|
|
||||||
setSelected: (data) => {
|
|
||||||
set({ selected: data });
|
|
||||||
},
|
|
||||||
getSeleted: () => {
|
|
||||||
return get().selected;
|
|
||||||
},
|
|
||||||
code: '',
|
|
||||||
setCode: (data) => {
|
|
||||||
set({ code: data });
|
|
||||||
},
|
|
||||||
getCode: () => {
|
|
||||||
return get().code;
|
|
||||||
},
|
|
||||||
cids: [],
|
|
||||||
setCids: () => {
|
|
||||||
const pageData = get().pageData;
|
|
||||||
const cids = pageData.map((item) => item.codeId).filter((item) => item);
|
|
||||||
// cids 去重复
|
|
||||||
const newCids = Array.from(new Set(cids));
|
|
||||||
set({ cids: newCids });
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
@ -1,374 +0,0 @@
|
|||||||
import { ContainerEdit } from '@kevisual/container/edit';
|
|
||||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
||||||
import { useParams } from 'react-router';
|
|
||||||
import { query, useStore, ws } from '@/modules';
|
|
||||||
import { Button, message, Tooltip } from 'antd';
|
|
||||||
import { getContainerData } from '@/modules/deck-to-flow/deck';
|
|
||||||
import { usePanelStore } from '../store';
|
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { TextArea } from '@/pages/container/components/TextArea';
|
|
||||||
import { CloseOutlined, MessageOutlined, SaveOutlined, SelectOutlined } from '@ant-design/icons';
|
|
||||||
import { useDeckPageStore } from './deck-store';
|
|
||||||
import { FormModal } from './Model.tsx';
|
|
||||||
import { useAiStore } from '@/pages/ai-chat/index.tsx';
|
|
||||||
export const clearBlank = (newStyle: any) => {
|
|
||||||
let change = false;
|
|
||||||
for (let key in newStyle) {
|
|
||||||
if (newStyle[key] === '' || newStyle[key] === undefined || newStyle[key] === null) {
|
|
||||||
delete newStyle[key];
|
|
||||||
change = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return change;
|
|
||||||
};
|
|
||||||
export const useListener = (id?: string, opts?: any) => {
|
|
||||||
const { refresh, cids = [] } = opts || {};
|
|
||||||
const connected = useStore((state) => state.connected);
|
|
||||||
// 监听服务器的消息
|
|
||||||
useEffect(() => {
|
|
||||||
if (!id) return;
|
|
||||||
if (!connected) return;
|
|
||||||
if (cids.length === 0) return;
|
|
||||||
console.log('cids', cids);
|
|
||||||
ws.send(
|
|
||||||
JSON.stringify({
|
|
||||||
type: 'subscribe',
|
|
||||||
data: {
|
|
||||||
type: 'pageEdit',
|
|
||||||
data: {
|
|
||||||
pid: id,
|
|
||||||
cids: cids,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
ws.addEventListener('message', listener);
|
|
||||||
return () => {
|
|
||||||
if (!id) return;
|
|
||||||
if (!connected) return;
|
|
||||||
ws.removeEventListener('message', listener);
|
|
||||||
};
|
|
||||||
}, [id, connected, cids]);
|
|
||||||
const listener = (event) => {
|
|
||||||
const parseIfJson = (data: string) => {
|
|
||||||
try {
|
|
||||||
return JSON.parse(data);
|
|
||||||
} catch (e) {
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const receivedData = parseIfJson(event.data);
|
|
||||||
if (typeof receivedData === 'string') return;
|
|
||||||
if (receivedData.type === 'pageEdit' && receivedData.source === 'container') {
|
|
||||||
const { data: containerData, pid } = receivedData;
|
|
||||||
if (pid !== id) return;
|
|
||||||
if (refresh) {
|
|
||||||
refresh(containerData);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Deck = () => {
|
|
||||||
const params = useParams<{ id: string }>();
|
|
||||||
const id = params.id;
|
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
|
||||||
const containerRef = useRef<ContainerEdit | null>(null);
|
|
||||||
const deckPageStore = useDeckPageStore();
|
|
||||||
const { code, setCode } = deckPageStore;
|
|
||||||
const { selected, setSelected } = deckPageStore;
|
|
||||||
const { cids } = deckPageStore;
|
|
||||||
const aiStore = useAiStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
setOpen: state.setOpen,
|
|
||||||
setKey: state.setKey,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const panelStore = usePanelStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
updateNodeDataStyle: state.updateNodeDataStyle,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
if (!id) return;
|
|
||||||
deckPageStore.setId(id);
|
|
||||||
fetch();
|
|
||||||
}, []);
|
|
||||||
useEffect(() => {
|
|
||||||
ref.current?.addEventListener('onContainer', onContainer);
|
|
||||||
return () => {
|
|
||||||
ref.current?.removeEventListener('onContainer', onContainer);
|
|
||||||
if (ref.current) {
|
|
||||||
const children = ref.current;
|
|
||||||
children.innerHTML = '';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
const fetch = async () => {
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'page',
|
|
||||||
key: 'getDeck',
|
|
||||||
id,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
const data = res.data;
|
|
||||||
console.log('data', data);
|
|
||||||
const { page, containerList } = data;
|
|
||||||
const result = getContainerData({ page, containerList });
|
|
||||||
console.log('result', result);
|
|
||||||
deckPageStore.setPageData(result);
|
|
||||||
deckPageStore.setCids();
|
|
||||||
init(result);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const refresh = async (data: any) => {
|
|
||||||
console.log('refresh', data);
|
|
||||||
if (!data.id) return;
|
|
||||||
const code = {
|
|
||||||
codeId: data.id,
|
|
||||||
code: data.code,
|
|
||||||
hash: '',
|
|
||||||
};
|
|
||||||
const container = containerRef.current!;
|
|
||||||
// @ts-ignore
|
|
||||||
await container.updateDataCode([code]);
|
|
||||||
const containerList = container.data.filter((item) => item.codeId === data.id);
|
|
||||||
await new Promise((resolve) => {
|
|
||||||
setTimeout(resolve, 2000);
|
|
||||||
});
|
|
||||||
// container.reRender();
|
|
||||||
containerList.forEach((item) => {
|
|
||||||
container.renderId(item.id);
|
|
||||||
});
|
|
||||||
// @ts-ignore
|
|
||||||
window.c = container;
|
|
||||||
};
|
|
||||||
useListener(id, { refresh, cids });
|
|
||||||
const onContainer = (e) => {
|
|
||||||
const { data } = e;
|
|
||||||
const types = ['position', 'resize'];
|
|
||||||
if (types.includes(data.type)) {
|
|
||||||
const { type, data: containerData } = data;
|
|
||||||
if (type === 'position') {
|
|
||||||
const { cid, left, top, rid } = containerData;
|
|
||||||
const newData = {
|
|
||||||
id: rid,
|
|
||||||
nodeData: {
|
|
||||||
id: cid,
|
|
||||||
data: {
|
|
||||||
style: {
|
|
||||||
// position: 'absolute',
|
|
||||||
left,
|
|
||||||
top,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
if (left && top) {
|
|
||||||
panelStore.updateNodeDataStyle(newData);
|
|
||||||
}
|
|
||||||
updateStyle(cid, { left, top });
|
|
||||||
setTimeout(() => {
|
|
||||||
setCodeStyle(cid);
|
|
||||||
}, 1000);
|
|
||||||
} else if (type === 'resize') {
|
|
||||||
const { cid, rid, width, height } = containerData;
|
|
||||||
const newData = {
|
|
||||||
id: rid,
|
|
||||||
nodeData: {
|
|
||||||
id: cid,
|
|
||||||
data: {
|
|
||||||
style: {
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
if (width && height) {
|
|
||||||
// @ts-ignore
|
|
||||||
newData.nodeData.data.style.position = 'absolute';
|
|
||||||
panelStore.updateNodeDataStyle(newData);
|
|
||||||
}
|
|
||||||
updateStyle(cid, { width, height });
|
|
||||||
setTimeout(() => {
|
|
||||||
setCodeStyle(cid);
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
} else if (data.type === 'active') {
|
|
||||||
if (!data?.data?.cid) {
|
|
||||||
setSelected(null);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const { cid, rid } = data?.data || {};
|
|
||||||
setSelected(data);
|
|
||||||
setCodeStyle(cid);
|
|
||||||
} else {
|
|
||||||
console.log('onContainer', data);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const onSave = () => {
|
|
||||||
const { cid, rid } = selected?.data || {};
|
|
||||||
let data: any;
|
|
||||||
try {
|
|
||||||
data = JSON.parse(code);
|
|
||||||
} catch (error) {
|
|
||||||
message.error('JSON format error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// clearBlank(data);
|
|
||||||
const newData = {
|
|
||||||
id: rid,
|
|
||||||
nodeData: {
|
|
||||||
id: cid,
|
|
||||||
data: {
|
|
||||||
style: data,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
panelStore.updateNodeDataStyle(newData, true);
|
|
||||||
const newDataStyle = updateStyle(cid, data);
|
|
||||||
reRender(newDataStyle, cid);
|
|
||||||
};
|
|
||||||
const setCodeStyle = (cid: string) => {
|
|
||||||
const pageData = deckPageStore.getPageData();
|
|
||||||
const selected = deckPageStore.getSeleted();
|
|
||||||
const _data = pageData.find((item) => item.id === cid);
|
|
||||||
const node = _data?.data?.node || {};
|
|
||||||
if (selected?.data?.cid === cid) {
|
|
||||||
setCode('');
|
|
||||||
setCode(JSON.stringify(node?.data?.style || {}, null, 2));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
useEffect(() => {
|
|
||||||
if (selected) {
|
|
||||||
const { cid } = selected?.data || {};
|
|
||||||
cid && setCodeStyle(cid);
|
|
||||||
}
|
|
||||||
}, [deckPageStore.selected]);
|
|
||||||
|
|
||||||
const updateStyle = (rid: string, style: any) => {
|
|
||||||
const pageData = deckPageStore.getPageData();
|
|
||||||
const _pageData = pageData.map((item) => {
|
|
||||||
if (item.id === rid) {
|
|
||||||
const newStyle = {
|
|
||||||
...item.data.node.data.style,
|
|
||||||
...style,
|
|
||||||
};
|
|
||||||
// 过滤掉空的style
|
|
||||||
clearBlank(newStyle);
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
style: newStyle,
|
|
||||||
data: {
|
|
||||||
...item.data,
|
|
||||||
node: {
|
|
||||||
...item.data.node,
|
|
||||||
data: {
|
|
||||||
...item.data.node.data,
|
|
||||||
style: newStyle,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return item;
|
|
||||||
});
|
|
||||||
deckPageStore.setPageData([..._pageData]);
|
|
||||||
return _pageData;
|
|
||||||
};
|
|
||||||
const init = async (data: any[]) => {
|
|
||||||
// console.log('data', data, ref.current);
|
|
||||||
const container = new ContainerEdit({
|
|
||||||
root: ref.current!,
|
|
||||||
data: data,
|
|
||||||
showChild: true,
|
|
||||||
// edit: false,
|
|
||||||
});
|
|
||||||
container.render(id!);
|
|
||||||
containerRef.current = container;
|
|
||||||
containerRef.current.event.on('save', (data) => {
|
|
||||||
console.log('save', data);
|
|
||||||
const { id, code } = data;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const reRender = async (data: any[], cid?: string) => {
|
|
||||||
if (containerRef.current) {
|
|
||||||
const container = containerRef.current;
|
|
||||||
await container.updateData(data);
|
|
||||||
await container.renderId(cid!);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full relative'>
|
|
||||||
<div className='w-full h-full bg-gray-200 '>
|
|
||||||
<div className='text-center mb-10 font-bold text-4xl pt-4 flex items-center justify-center group'>
|
|
||||||
Deck
|
|
||||||
<Tooltip>
|
|
||||||
<Button
|
|
||||||
className='ml-4 invisible group-hover:visible'
|
|
||||||
icon={<SelectOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
deckPageStore.setShowEdit(true);
|
|
||||||
}}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className='flex '
|
|
||||||
style={{
|
|
||||||
height: 'calc(100% - 32px)',
|
|
||||||
}}>
|
|
||||||
<div className='mx-auto border rounded-md bg-white w-[80%] h-[80%] scrollbar overflow-scroll relative' ref={ref}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{selected && (
|
|
||||||
<div className='absolute bottom-5 z-50 w-full h-[200px]'>
|
|
||||||
<div className=' p-2 card w-[80%] mx-auto border bg-slate-200 rounded-md overflow-scroll scrollbar'>
|
|
||||||
{/* <pre>{JSON.stringify(selected, null, 2)}</pre> */}
|
|
||||||
<div>
|
|
||||||
<Button.Group>
|
|
||||||
<Tooltip title='Close'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
setSelected(null);
|
|
||||||
}}
|
|
||||||
icon={<CloseOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='Ai Chat'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
aiStore.setOpen(true);
|
|
||||||
aiStore.setKey(location.pathname);
|
|
||||||
}}
|
|
||||||
icon={<MessageOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='Save'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
onSave();
|
|
||||||
}}
|
|
||||||
icon={<SaveOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Button.Group>
|
|
||||||
</div>
|
|
||||||
<div className='h-[200px]'>
|
|
||||||
<TextArea
|
|
||||||
className='h-[100px] rounded-md'
|
|
||||||
value={code}
|
|
||||||
onChange={(v) => {
|
|
||||||
setCode(v);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<FormModal />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,258 +0,0 @@
|
|||||||
import { useEditStore } from '../store';
|
|
||||||
import { Button, Input, message, Modal, Table, Tooltip } from 'antd';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { Form } from 'antd';
|
|
||||||
import copy from 'copy-to-clipboard';
|
|
||||||
import { useNewNavigate } from '@/modules';
|
|
||||||
import { useToCodeEditor } from '@/pages/code-editor';
|
|
||||||
import { CardBlank } from '@/components/card/CardBlank';
|
|
||||||
import {
|
|
||||||
AppstoreFilled,
|
|
||||||
AppstoreOutlined,
|
|
||||||
ArrowRightOutlined,
|
|
||||||
CloudDownloadOutlined,
|
|
||||||
CloudUploadOutlined,
|
|
||||||
CodeOutlined,
|
|
||||||
DeleteOutlined,
|
|
||||||
EditOutlined,
|
|
||||||
ForkOutlined,
|
|
||||||
GoldOutlined,
|
|
||||||
PlusOutlined,
|
|
||||||
RocketFilled,
|
|
||||||
RollbackOutlined,
|
|
||||||
ToolOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import { isObjectNull } from '@/utils/is-null';
|
|
||||||
import { PublishFormModal } from './modal/PublishFormModal';
|
|
||||||
|
|
||||||
const FormModal = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const editStore = useEditStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
showEdit: state.showEditModal,
|
|
||||||
setShowEdit: state.setShowEditModal,
|
|
||||||
formData: state.formData,
|
|
||||||
setFormData: state.setFormData,
|
|
||||||
updateData: state.updateData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
const open = editStore.showEdit;
|
|
||||||
if (open) {
|
|
||||||
if (isObjectNull(editStore.formData.data)) {
|
|
||||||
form.setFieldsValue({});
|
|
||||||
} else form.setFieldsValue(editStore.formData);
|
|
||||||
}
|
|
||||||
}, [editStore.showEdit]);
|
|
||||||
const onFinish = async (values: any) => {
|
|
||||||
let defaultData = {
|
|
||||||
nodes: [],
|
|
||||||
edges: [],
|
|
||||||
viewport: {},
|
|
||||||
};
|
|
||||||
if (!isEdit) {
|
|
||||||
values.data = defaultData;
|
|
||||||
}
|
|
||||||
editStore.updateData(values);
|
|
||||||
};
|
|
||||||
const onClose = () => {
|
|
||||||
editStore.setShowEdit(false);
|
|
||||||
form.resetFields();
|
|
||||||
editStore.setFormData({});
|
|
||||||
};
|
|
||||||
const isEdit = editStore.formData.id;
|
|
||||||
return (
|
|
||||||
<Modal title={isEdit ? 'Edit' : 'Add'} open={editStore.showEdit} onClose={onClose} destroyOnClose footer={false} width={800} onCancel={onClose}>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
onFinish={onFinish}
|
|
||||||
labelCol={{
|
|
||||||
span: 4,
|
|
||||||
}}
|
|
||||||
wrapperCol={{
|
|
||||||
span: 20,
|
|
||||||
}}>
|
|
||||||
<Form.Item name='id' hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='title' label='title'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='description' label='description'>
|
|
||||||
<Input.TextArea lang={'markdown'} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='type' label='type' noStyle hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='data' label='data' noStyle hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label=' ' colon={false}>
|
|
||||||
<Button type='primary' htmlType='submit'>
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
<Button className='ml-2' htmlType='reset' onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export const List = () => {
|
|
||||||
const navicate = useNewNavigate();
|
|
||||||
const toCodeEditor = useToCodeEditor();
|
|
||||||
const editStore = useEditStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
setFormData: state.setFormData,
|
|
||||||
setShowEdit: state.setShowEditModal,
|
|
||||||
list: state.list,
|
|
||||||
deleteData: state.deleteData,
|
|
||||||
getList: state.getList,
|
|
||||||
loading: state.loading,
|
|
||||||
setShowPublishModal: state.setShowPublishModal,
|
|
||||||
downloadData: state.downloadData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
editStore.getList();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full flex bg-gray-200'>
|
|
||||||
<div className='p-2 bg-white rounded-r-lg flex flex-col gap-2'>
|
|
||||||
<Tooltip title='Add'>
|
|
||||||
<Button
|
|
||||||
className='w-10 '
|
|
||||||
icon={<PlusOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
editStore.setFormData({});
|
|
||||||
editStore.setShowEdit(true);
|
|
||||||
}}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='To App'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
navicate('/app');
|
|
||||||
}}
|
|
||||||
icon={<AppstoreOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='To Container'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
navicate('/container');
|
|
||||||
}}
|
|
||||||
icon={<CodeOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
<div className='flex-grow overflow-scroll scrollbar mt-4'>
|
|
||||||
<div className=''>
|
|
||||||
<div className=' flex flex-wrap gap-10 justify-center h-full overflow-auto scrollbar'>
|
|
||||||
{editStore.list.length > 0 &&
|
|
||||||
editStore.list.map((item, index) => {
|
|
||||||
const publish = item.publish;
|
|
||||||
if (publish.id) {
|
|
||||||
console.log(item, item.publish);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div className='card w-[300px]' key={index}>
|
|
||||||
<div className='card-title'>{item.title}</div>
|
|
||||||
<div className='card-subtitle'> {item.description}</div>
|
|
||||||
<div className='mt-4'>
|
|
||||||
<Button.Group>
|
|
||||||
<Tooltip title='Edit'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
editStore.setFormData(item);
|
|
||||||
editStore.setShowEdit(true);
|
|
||||||
}}
|
|
||||||
icon={<EditOutlined />}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='to flow'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
navicate('/panel/flow/' + item.id);
|
|
||||||
}}
|
|
||||||
icon={<ForkOutlined />}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='to deck'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
navicate('/panel/deck/' + item.id);
|
|
||||||
}}
|
|
||||||
icon={<GoldOutlined />}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='to code editor'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
toCodeEditor.toPagePage(item);
|
|
||||||
}}
|
|
||||||
icon={<ToolOutlined />}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='Publish'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
editStore.setFormData(item);
|
|
||||||
editStore.setShowPublishModal(true);
|
|
||||||
}}
|
|
||||||
icon={<CloudUploadOutlined />}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
{item.publish?.id && (
|
|
||||||
<Tooltip title={`转到${item?.publish.key || ''} App Version List`}>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
const app = '/app/' + item?.publish?.key + '/version/list';
|
|
||||||
navicate(app);
|
|
||||||
}}
|
|
||||||
icon={<ArrowRightOutlined />}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
<Tooltip title='Download'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
editStore.downloadData(item.id);
|
|
||||||
}}
|
|
||||||
icon={<CloudDownloadOutlined />}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='delete'>
|
|
||||||
<Button
|
|
||||||
onClick={(e) => {
|
|
||||||
Modal.confirm({
|
|
||||||
title: 'Delete',
|
|
||||||
content: 'Are you sure delete this data?',
|
|
||||||
onOk: () => {
|
|
||||||
editStore.deleteData(item.id);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
icon={<DeleteOutlined />}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
</Button.Group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{editStore.list.length === 0 && <div className='text-center text-gray-500'>No data</div>}
|
|
||||||
<CardBlank className='w-[300px]' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<FormModal />
|
|
||||||
<PublishFormModal />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,106 +0,0 @@
|
|||||||
import { useEditStore } from '../../store';
|
|
||||||
import { Button, Input, message, Modal, Tooltip } from 'antd';
|
|
||||||
import { useEffect, version } from 'react';
|
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { Form } from 'antd';
|
|
||||||
import { CloudUploadOutlined, DeleteOutlined, EditOutlined, ForkOutlined, GoldOutlined, PlusOutlined, ToolOutlined } from '@ant-design/icons';
|
|
||||||
import { isObjectNull } from '@/utils/is-null';
|
|
||||||
|
|
||||||
export const PublishFormModal = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const editStore = useEditStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
showEdit: state.showPublishModal,
|
|
||||||
setShowEdit: state.setShowPublishModal,
|
|
||||||
formData: state.formData,
|
|
||||||
setFormData: state.setFormData,
|
|
||||||
updateData: state.updateData,
|
|
||||||
publishData: state.publishData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
const open = editStore.showEdit;
|
|
||||||
if (open) {
|
|
||||||
if (isObjectNull(editStore.formData.data)) {
|
|
||||||
form.setFieldsValue({
|
|
||||||
publish: {},
|
|
||||||
});
|
|
||||||
} else
|
|
||||||
form.setFieldsValue({
|
|
||||||
...editStore.formData,
|
|
||||||
publish: {
|
|
||||||
...editStore.formData?.publish,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [editStore.showEdit, editStore.formData]);
|
|
||||||
const onFinish = async (values: any) => {
|
|
||||||
editStore.updateData(values);
|
|
||||||
};
|
|
||||||
const onClose = () => {
|
|
||||||
editStore.setShowEdit(false);
|
|
||||||
form.resetFields();
|
|
||||||
editStore.setFormData({});
|
|
||||||
};
|
|
||||||
const isEdit = editStore.formData.publish?.id;
|
|
||||||
const onPublish = () => {
|
|
||||||
// @ts-ignore
|
|
||||||
const values = form.getFieldsValue();
|
|
||||||
editStore.publishData(values);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<Modal title={'Version Publish'} open={editStore.showEdit} onClose={onClose} destroyOnClose footer={false} width={800} onCancel={onClose}>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
onFinish={onFinish}
|
|
||||||
labelCol={{
|
|
||||||
span: 4,
|
|
||||||
}}
|
|
||||||
wrapperCol={{
|
|
||||||
span: 20,
|
|
||||||
}}>
|
|
||||||
<Form.Item name={'id'} hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name={['publish', 'id']} hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name={['publish', 'key']} label='key'>
|
|
||||||
<Input disabled={isEdit} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name={['publish', 'version']} label='version'>
|
|
||||||
<Input
|
|
||||||
disabled={isEdit}
|
|
||||||
addonAfter={
|
|
||||||
!isEdit && (
|
|
||||||
<div className='cursor-pointer hover:text-gray-400' onClick={onPublish}>
|
|
||||||
发布
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name={['publish', 'description']} label='description'>
|
|
||||||
<Input.TextArea rows={4} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label=' ' colon={false}>
|
|
||||||
<div className='flex gap-2'>
|
|
||||||
<Button type='primary' htmlType='submit'>
|
|
||||||
Save
|
|
||||||
</Button>
|
|
||||||
<Button className='' htmlType='reset' onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
{isEdit && (
|
|
||||||
<Button type='default' danger className='ml-4' onClick={onPublish}>
|
|
||||||
Publish
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,227 +0,0 @@
|
|||||||
import { useCallback, useEffect, useState } from 'react';
|
|
||||||
import {
|
|
||||||
ReactFlow,
|
|
||||||
MiniMap,
|
|
||||||
Controls,
|
|
||||||
Background,
|
|
||||||
useNodesState,
|
|
||||||
useEdgesState,
|
|
||||||
addEdge,
|
|
||||||
ReactFlowProvider,
|
|
||||||
useStore,
|
|
||||||
NodeTypes,
|
|
||||||
useReactFlow,
|
|
||||||
useStoreApi,
|
|
||||||
Panel,
|
|
||||||
} from '@xyflow/react';
|
|
||||||
import '@xyflow/react/dist/style.css';
|
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { Container, useAddNode, ContainerMenusList, useMenuFlow } from '@abearxiong/flows';
|
|
||||||
import { useMenuEmitter, ContainerMenusKeys } from '@abearxiong/flows';
|
|
||||||
import { nanoid } from 'nanoid';
|
|
||||||
import { Button, message, Tooltip } from 'antd';
|
|
||||||
import { usePanelStore } from '../store';
|
|
||||||
import { CompassOutlined, PlusOutlined, SaveOutlined } from '@ant-design/icons';
|
|
||||||
import { generateId } from '@/utils/nanoid';
|
|
||||||
import { NodeProperties } from './properties/NodeProperties';
|
|
||||||
import { emitter } from '@kevisual/container';
|
|
||||||
// router: Router
|
|
||||||
const nodeTypes = {
|
|
||||||
// container: Container,
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Flow = () => {
|
|
||||||
return (
|
|
||||||
<ReactFlowProvider>
|
|
||||||
<ReactFlowApp />
|
|
||||||
</ReactFlowProvider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const ReactFlowApp = () => {
|
|
||||||
const [nodes, setNodes, onNodesChange] = useNodesState([]);
|
|
||||||
const [edges, setEdges, onEdgesChange] = useEdgesState<any>([]);
|
|
||||||
const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
|
|
||||||
const panelStore = usePanelStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
data: state.data,
|
|
||||||
saveNodesEdges: state.saveNodesEdges,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
if (panelStore.data?.id) {
|
|
||||||
const { data } = panelStore.data || {};
|
|
||||||
console.log('data', panelStore.data);
|
|
||||||
const nodes = [...data.nodes];
|
|
||||||
const edges = [...data.edges];
|
|
||||||
console.log('nodes', nodes);
|
|
||||||
if (nodes.length === 0) {
|
|
||||||
nodes.push({
|
|
||||||
id: panelStore.data.id,
|
|
||||||
data: {
|
|
||||||
label: '容器',
|
|
||||||
root: true,
|
|
||||||
},
|
|
||||||
position: {
|
|
||||||
x: 100,
|
|
||||||
y: 100,
|
|
||||||
},
|
|
||||||
type: 'container',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
console.log('nodes', nodes);
|
|
||||||
setNodes(nodes as any);
|
|
||||||
setEdges(edges);
|
|
||||||
} else {
|
|
||||||
setNodes([]);
|
|
||||||
setEdges([]);
|
|
||||||
}
|
|
||||||
}, [panelStore.data]);
|
|
||||||
useEffect(() => {
|
|
||||||
emitter.on('setNodes', _setNodes);
|
|
||||||
emitter.on('setEdges', _setEdges);
|
|
||||||
return () => {
|
|
||||||
emitter.off('setNodes', _setNodes);
|
|
||||||
emitter.off('setEdges', _setEdges);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
const _setNodes = (data: any) => {
|
|
||||||
setNodes(data);
|
|
||||||
};
|
|
||||||
const _setEdges = (data: any) => {
|
|
||||||
setEdges(data);
|
|
||||||
};
|
|
||||||
|
|
||||||
const { menuCom, onContextMenu, onClose } = useMenuFlow(
|
|
||||||
(item, cacheData) => {
|
|
||||||
emit({
|
|
||||||
menu: item,
|
|
||||||
data: cacheData,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
{
|
|
||||||
menusList: ContainerMenusList,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
const { emit } = useMenuEmitter<ContainerMenusKeys>({
|
|
||||||
preview: ({ menu, data }) => {
|
|
||||||
console.log('preview', data, message);
|
|
||||||
if (data?.data?.cid) {
|
|
||||||
window.open(`/container/preview/${data.data.cid}`, '_blank');
|
|
||||||
} else {
|
|
||||||
message.error('未绑定容器');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
code: ({ menu, data }) => {
|
|
||||||
// console.log('edit', data);
|
|
||||||
const nodeData = data?.data;
|
|
||||||
if (!nodeData.cid) {
|
|
||||||
message.error('请先绑定容器');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
message.error('developing');
|
|
||||||
},
|
|
||||||
copy: ({ menu, data }) => {
|
|
||||||
message.error('developing');
|
|
||||||
},
|
|
||||||
delete: ({ menu, data }) => {
|
|
||||||
console.log('delete', data);
|
|
||||||
const nodeData = data?.data;
|
|
||||||
if (nodeData.root) {
|
|
||||||
message.error('root node can not be deleted');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setNodes((nodes) => nodes.filter((item: any) => item.id !== data.id));
|
|
||||||
},
|
|
||||||
internalData: ({ menu, data }) => {
|
|
||||||
message.error('developing');
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// const { onNeedAdd, onAdd, onMouseMove, adding } = useAddNode();
|
|
||||||
const onSave = useCallback(() => {
|
|
||||||
panelStore.saveNodesEdges({
|
|
||||||
nodes,
|
|
||||||
edges,
|
|
||||||
});
|
|
||||||
}, [nodes, edges]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ReactFlow
|
|
||||||
nodes={nodes}
|
|
||||||
edges={edges}
|
|
||||||
onNodesChange={onNodesChange}
|
|
||||||
onEdgesChange={onEdgesChange}
|
|
||||||
onConnect={onConnect}
|
|
||||||
onChange={(e) => {
|
|
||||||
console.log('change', e);
|
|
||||||
}}
|
|
||||||
onChangeCapture={(e) => {
|
|
||||||
console.log('change capture', e);
|
|
||||||
}}
|
|
||||||
onNodeDragStop={(e) => {
|
|
||||||
console.log('drag stop', e);
|
|
||||||
}}
|
|
||||||
nodeTypes={nodeTypes}
|
|
||||||
onMove={(e, viewport) => {
|
|
||||||
// console.log('move', e, viewport)
|
|
||||||
}}
|
|
||||||
onContextMenu={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
}}
|
|
||||||
onPaneClick={(e) => {
|
|
||||||
// if (adding) {
|
|
||||||
// onAdd();
|
|
||||||
// }
|
|
||||||
}}
|
|
||||||
onNodeContextMenu={(e, node) => {
|
|
||||||
console.log('context menu', e, node);
|
|
||||||
onContextMenu(e as any, node);
|
|
||||||
}}
|
|
||||||
// onMouseMove={(e) => onMouseMove(e)}
|
|
||||||
onClick={(e) => {
|
|
||||||
onClose();
|
|
||||||
}}>
|
|
||||||
<MiniMap />
|
|
||||||
<Controls />
|
|
||||||
<Background color='#000' />
|
|
||||||
<Panel>{menuCom}</Panel>
|
|
||||||
<Panel>
|
|
||||||
<div className='flex gap-2'>
|
|
||||||
<Button.Group>
|
|
||||||
<Tooltip title='添加节点'>
|
|
||||||
<Button
|
|
||||||
icon={<PlusOutlined />}
|
|
||||||
onClick={(e) => {
|
|
||||||
// onNeedAdd({ id: 'flow' + generateId(), data: { label: '容器' }, type: 'container' }, e);
|
|
||||||
}}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='save'>
|
|
||||||
<Button
|
|
||||||
icon={<SaveOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
onSave();
|
|
||||||
}}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='preview'>
|
|
||||||
<Button
|
|
||||||
icon={<CompassOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
const id = panelStore.data?.id;
|
|
||||||
if (!id) {
|
|
||||||
message.error('ID is required');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
window.open(`/panel/deck/${id}`, '_blank');
|
|
||||||
}}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Button.Group>
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
<NodeProperties />
|
|
||||||
</ReactFlow>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Flow;
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
import { useParams } from 'react-router';
|
|
||||||
import Flow from './Flow';
|
|
||||||
import { usePanelStore } from '../store';
|
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { useEffect, useRef } from 'react';
|
|
||||||
import { DialogModal } from '@kevisual/ui';
|
|
||||||
// import '@kevisual/ui';
|
|
||||||
export const App = () => {
|
|
||||||
const param = useParams();
|
|
||||||
const id = param.id;
|
|
||||||
const panel = usePanelStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
getPanel: state.getPanel,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
id && panel.getPanel(id);
|
|
||||||
}, []);
|
|
||||||
if (!id) {
|
|
||||||
return <>No ID</>;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full p-4'>
|
|
||||||
<div className='w-full h-full'>
|
|
||||||
<Flow />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
import { EventEmitter } from 'eventemitter3';
|
|
||||||
export const emitter = new EventEmitter();
|
|
||||||
@ -1,123 +0,0 @@
|
|||||||
import { Panel, useReactFlow, useStore, useStoreApi } from '@xyflow/react';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { debounce } from 'lodash-es';
|
|
||||||
import { Button, Form, Input, message, Tooltip } from 'antd';
|
|
||||||
import { Select } from '@/pages/container/module/Select';
|
|
||||||
import { MessageOutlined, SaveOutlined } from '@ant-design/icons';
|
|
||||||
import { emitter } from '@kevisual/container';
|
|
||||||
import { usePanelStore } from '../../store';
|
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { useAiStore } from '@/pages/ai-chat';
|
|
||||||
export const NodeProperties = () => {
|
|
||||||
const reactflow = useReactFlow();
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const panelStore = usePanelStore(useShallow((state) => {
|
|
||||||
return {
|
|
||||||
updateNodeData: state.updateNodeData,
|
|
||||||
};
|
|
||||||
}));
|
|
||||||
const aiStore = useAiStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
setOpen: state.setOpen,
|
|
||||||
setKey: state.setKey,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const store = useStore((state) => {
|
|
||||||
const setNode = (node: any) => {
|
|
||||||
const newNodes = state.nodes.map((item) => {
|
|
||||||
if (item.id === node.id) {
|
|
||||||
// return { ...item, ...node };
|
|
||||||
return { ...node };
|
|
||||||
}
|
|
||||||
return item;
|
|
||||||
});
|
|
||||||
// console.log('newNodes', newNodes);
|
|
||||||
state.setNodes(newNodes); // 会丢失数据，因为最终没有调用context的setNodes方法
|
|
||||||
emitter.emit('setNodes', newNodes);
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
nodesFocusable: state.nodesFocusable,
|
|
||||||
selected: state.nodes.filter((node) => node.selected),
|
|
||||||
setNode: setNode,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
const [nodeData] = store.selected as any[];
|
|
||||||
useEffect(() => {
|
|
||||||
if (!nodeData) return;
|
|
||||||
// console.log('nodeData', nodeData);
|
|
||||||
const { data } = nodeData || {};
|
|
||||||
form.setFieldsValue({
|
|
||||||
cid: data.cid,
|
|
||||||
title: data.title,
|
|
||||||
});
|
|
||||||
}, [nodeData]);
|
|
||||||
const onSave = () => {
|
|
||||||
const values = form.getFieldsValue();
|
|
||||||
// console.log('values', values);
|
|
||||||
const { cid, title } = values;
|
|
||||||
if (!cid) {
|
|
||||||
message.error('请选择容器');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const { data, id, position, type } = nodeData || {};
|
|
||||||
// console.log('data', data, cid);
|
|
||||||
const newNodeData = {
|
|
||||||
id,
|
|
||||||
position,
|
|
||||||
selected: true,
|
|
||||||
type,
|
|
||||||
data: {
|
|
||||||
...data,
|
|
||||||
cid,
|
|
||||||
title,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
// console.log('newNodeData', newNodeData, nodeData);
|
|
||||||
store.setNode(newNodeData);
|
|
||||||
panelStore.updateNodeData(newNodeData);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<Panel title='节点属性' position='bottom-center' className='w-full'>
|
|
||||||
<div className={clsx('w-full h-[200px] card', store.selected.length > 0 ? '' : 'hidden')}>
|
|
||||||
<div className='card-title'>
|
|
||||||
{nodeData?.data?.label}
|
|
||||||
<Button.Group className='ml-2'>
|
|
||||||
<Tooltip title='Save'>
|
|
||||||
<Button onClick={onSave} icon={<SaveOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title='Ai Chat'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
aiStore.setKey(location.pathname);
|
|
||||||
aiStore.setOpen(true);
|
|
||||||
}}
|
|
||||||
icon={<MessageOutlined />}></Button>
|
|
||||||
</Tooltip>
|
|
||||||
</Button.Group>
|
|
||||||
</div>
|
|
||||||
<div className='p-4'>
|
|
||||||
<Form form={form}>
|
|
||||||
<Form.Item label='名称' name='cid'>
|
|
||||||
<Select
|
|
||||||
onChange={(e, options) => {
|
|
||||||
if (Array.isArray(options)) {
|
|
||||||
} else {
|
|
||||||
const title = options?.label;
|
|
||||||
form.setFieldsValue({ title });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label='标题' name='title'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
|
||||||
import { List } from './edit/List';
|
|
||||||
import { Main } from './layouts';
|
|
||||||
import { App as FlowApp } from './flow';
|
|
||||||
import { Deck } from './deck';
|
|
||||||
import { App as PanelApp } from './app';
|
|
||||||
|
|
||||||
export const App = () => {
|
|
||||||
return (
|
|
||||||
<Routes>
|
|
||||||
<Route element={<Main />}>
|
|
||||||
<Route path='/' element={<Navigate to='/panel/edit/list' />}></Route>
|
|
||||||
<Route path='edit/list' element={<List />} />
|
|
||||||
<Route path='flow/:id' element={<FlowApp />} />
|
|
||||||
<Route path='deck/:id' element={<Deck />} />
|
|
||||||
<Route path='app/:id' element={<PanelApp />} />
|
|
||||||
<Route path='*' element={'Not Found'}></Route>
|
|
||||||
</Route>
|
|
||||||
</Routes>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { LayoutMain } from '@/modules/layout';
|
|
||||||
|
|
||||||
export const Main = () => {
|
|
||||||
return <LayoutMain title={<>Deck And Flow</>} />;
|
|
||||||
};
|
|
||||||
@ -1,108 +0,0 @@
|
|||||||
import { create } from 'zustand';
|
|
||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
|
|
||||||
type EditStore = {
|
|
||||||
loading: boolean;
|
|
||||||
setLoading: (loading: boolean) => void;
|
|
||||||
formData: any;
|
|
||||||
setFormData: (formData: any) => void;
|
|
||||||
showEditModal: boolean;
|
|
||||||
setShowEditModal: (showEditModal: boolean) => void;
|
|
||||||
list: any[];
|
|
||||||
getList: () => Promise<void>;
|
|
||||||
updateData: (data: any) => Promise<void>;
|
|
||||||
deleteData: (id: string) => Promise<void>;
|
|
||||||
showPublishModal: boolean;
|
|
||||||
setShowPublishModal: (showPublishModal: boolean) => void;
|
|
||||||
publishData: (data: any) => Promise<void>;
|
|
||||||
downloadData: (data: any) => Promise<void>;
|
|
||||||
};
|
|
||||||
export const useEditStore = create<EditStore>((set, get) => {
|
|
||||||
return {
|
|
||||||
loading: false,
|
|
||||||
setLoading: (loading) => set({ loading }),
|
|
||||||
formData: {},
|
|
||||||
setFormData: (formData) => set({ formData }),
|
|
||||||
showEditModal: false,
|
|
||||||
setShowEditModal: (showEditModal) => set({ showEditModal }),
|
|
||||||
list: [],
|
|
||||||
getList: async () => {
|
|
||||||
set({ loading: true });
|
|
||||||
|
|
||||||
const res = await query.post({ path: 'page', key: 'list' });
|
|
||||||
set({ loading: false });
|
|
||||||
if (res.code === 200) {
|
|
||||||
set({ list: res.data });
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateData: async (data) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'page',
|
|
||||||
key: 'update',
|
|
||||||
data,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success');
|
|
||||||
set({ showEditModal: false, formData: [] });
|
|
||||||
getList();
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
publishData: async (data) => {
|
|
||||||
const { getList, list } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'page',
|
|
||||||
key: 'publish',
|
|
||||||
data,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success');
|
|
||||||
set({ formData: res.data });
|
|
||||||
const newList = list.map((item) => {
|
|
||||||
if (item.id === data.id) {
|
|
||||||
return res.data;
|
|
||||||
}
|
|
||||||
return item;
|
|
||||||
});
|
|
||||||
set({ list: newList });
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
downloadData: async (id) => {
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'page',
|
|
||||||
key: 'download',
|
|
||||||
id: id,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success');
|
|
||||||
const url = new URL('resources/' + res.data, window.location.origin);
|
|
||||||
window.open(url.href, '_blank');
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deleteData: async (id) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'page',
|
|
||||||
key: 'delete',
|
|
||||||
id,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success');
|
|
||||||
getList();
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
showPublishModal: false,
|
|
||||||
setShowPublishModal: (showPublishModal) => set({ showPublishModal }),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
export * from './edit';
|
|
||||||
|
|
||||||
export * from './panel';
|
|
||||||
@ -1,127 +0,0 @@
|
|||||||
import { create } from 'zustand';
|
|
||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
import { produce } from 'immer';
|
|
||||||
|
|
||||||
type PanelStore = {
|
|
||||||
id: string;
|
|
||||||
setId: (id: string) => void;
|
|
||||||
loading: boolean;
|
|
||||||
setLoading: (loading: boolean) => void;
|
|
||||||
data: any;
|
|
||||||
setData: (data: any) => void;
|
|
||||||
getPanel: (id?: string) => Promise<void>;
|
|
||||||
saveNodesEdges: (data: { nodes?: any[]; edges?: any[]; viewport?: any }) => Promise<void>;
|
|
||||||
updateNodeData: (data: any) => Promise<void>;
|
|
||||||
updateNodeDataStyle: (data: any, force?: boolean) => Promise<any>;
|
|
||||||
};
|
|
||||||
export const usePanelStore = create<PanelStore>((set, get) => {
|
|
||||||
return {
|
|
||||||
id: '',
|
|
||||||
setId: (id) => set({ id }),
|
|
||||||
loading: false,
|
|
||||||
setLoading: (loading) => set({ loading }),
|
|
||||||
data: {},
|
|
||||||
setData: (data) => set({ data }),
|
|
||||||
getPanel: async (pid) => {
|
|
||||||
const id = pid || get().id;
|
|
||||||
if (!id) {
|
|
||||||
message.error('ID is required');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
set(
|
|
||||||
produce((state) => {
|
|
||||||
state.data = {};
|
|
||||||
state.loading = true;
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'page',
|
|
||||||
key: 'get',
|
|
||||||
id,
|
|
||||||
});
|
|
||||||
set({ loading: false });
|
|
||||||
console.log('res', res);
|
|
||||||
if (res.code === 200) {
|
|
||||||
set(
|
|
||||||
produce((state) => {
|
|
||||||
state.data = res.data;
|
|
||||||
state.id = res.data.id;
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
saveNodesEdges: async ({ edges, nodes, viewport }) => {
|
|
||||||
const { id, data: panelData } = get();
|
|
||||||
const { data } = panelData || {};
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'page',
|
|
||||||
key: 'update',
|
|
||||||
data: {
|
|
||||||
id,
|
|
||||||
data: {
|
|
||||||
...data.data,
|
|
||||||
edges,
|
|
||||||
nodes,
|
|
||||||
viewport,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success', 1);
|
|
||||||
set(
|
|
||||||
produce((state) => {
|
|
||||||
state.data = res.data;
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateNodeData: async (data) => {
|
|
||||||
// const { getList } = get();
|
|
||||||
const { id, data: panelData } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'page',
|
|
||||||
key: 'updateNode',
|
|
||||||
data: {
|
|
||||||
id: id,
|
|
||||||
nodeData: data,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success', 1);
|
|
||||||
// getList();
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateNodeDataStyle: async (data, force) => {
|
|
||||||
const { loading } = get();
|
|
||||||
if (loading) {
|
|
||||||
message.error('Request in progress, please wait');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const loaded = message.loading('Saving...', 0);
|
|
||||||
set({ loading: true });
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'page',
|
|
||||||
key: 'updateNode',
|
|
||||||
data: data,
|
|
||||||
force,
|
|
||||||
});
|
|
||||||
loaded();
|
|
||||||
set({ loading: false });
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Update Style Success', 1);
|
|
||||||
// getList();
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
import { query } from '@/modules';
|
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { drawGraph } from './graph/d3';
|
|
||||||
export const D3Grahp = () => {
|
|
||||||
const get = async () => {
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'prompt',
|
|
||||||
key: 'list',
|
|
||||||
});
|
|
||||||
console.log(res);
|
|
||||||
const grahpData = {
|
|
||||||
nodes: res.data.map((item) => {
|
|
||||||
return {
|
|
||||||
id: item.id,
|
|
||||||
label: item.title,
|
|
||||||
type: 'prompt',
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
links: [],
|
|
||||||
};
|
|
||||||
drawGraph(grahpData);
|
|
||||||
};
|
|
||||||
const getD3 = async () => {
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'prompt',
|
|
||||||
key: 'getD3',
|
|
||||||
});
|
|
||||||
drawGraph(res.data);
|
|
||||||
};
|
|
||||||
useEffect(() => {
|
|
||||||
getD3();
|
|
||||||
return () => {
|
|
||||||
document.querySelector('.ai-graph')!.innerHTML = '';
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full'>
|
|
||||||
<svg className='ai-graph border shadow-sm p-2 mx-auto mt-10 ' width='960' height='600' ></svg>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
import { Button, Form, Input } from 'antd';
|
|
||||||
import { TextArea } from '../../container/components/TextArea';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
|
|
||||||
export const Edit = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const onFinish = (values: any) => {
|
|
||||||
console.log('Success:', values);
|
|
||||||
};
|
|
||||||
const onSave = () => {
|
|
||||||
//
|
|
||||||
};
|
|
||||||
const isEdit = form.getFieldValue('id');
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full felx flex-col bg-gray-200'>
|
|
||||||
<h1 className='text-center py-4'>Prompt JS Code Generate</h1>
|
|
||||||
<div className='py-2 px-4 w-3/4 min-w-[600px] mx-auto border shadow rounded bg-white'>
|
|
||||||
<Form form={form} onFinish={onFinish} className='mt-4' labelCol={{ span: 4 }}>
|
|
||||||
<Form.Item name='id' hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='title' label='Title'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='description' label='Description'>
|
|
||||||
<Input.TextArea rows={4} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='code' label='Code'>
|
|
||||||
<TextArea className='max-h-full' style={{ minHeight: 300 }} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label=' ' colon={false}>
|
|
||||||
<div className='flex gap-2'>
|
|
||||||
<Button type='primary' htmlType='submit'>
|
|
||||||
Generate
|
|
||||||
</Button>
|
|
||||||
<Button htmlType='reset'>Reset</Button>
|
|
||||||
<Button
|
|
||||||
type='primary'
|
|
||||||
onClick={() => {
|
|
||||||
//
|
|
||||||
}}>
|
|
||||||
Save
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
className={clsx(isEdit ? 'block' : 'hidden')}
|
|
||||||
onClick={() => {
|
|
||||||
//
|
|
||||||
}}>
|
|
||||||
Preview
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,366 +0,0 @@
|
|||||||
import { Button, Input, message, Modal, Table, Tooltip } from 'antd';
|
|
||||||
import { Fragment, useEffect, useMemo, useState } from 'react';
|
|
||||||
import { usePromptStore } from '../store/prompt';
|
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { Form } from 'antd';
|
|
||||||
import copy from 'copy-to-clipboard';
|
|
||||||
import { useNewNavigate } from '@/modules';
|
|
||||||
import {
|
|
||||||
EditOutlined,
|
|
||||||
SettingOutlined,
|
|
||||||
LinkOutlined,
|
|
||||||
SaveOutlined,
|
|
||||||
DeleteOutlined,
|
|
||||||
LeftOutlined,
|
|
||||||
CaretRightOutlined,
|
|
||||||
PlusOutlined,
|
|
||||||
ExportOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import { TextArea } from '@/pages/container/components/TextArea';
|
|
||||||
|
|
||||||
import { marked } from 'marked';
|
|
||||||
import { extractKeysFromBraces } from '@/utils/extra';
|
|
||||||
import { useAiStore } from '@/pages/ai-chat';
|
|
||||||
import { CardBlank } from '@/components/card/CardBlank';
|
|
||||||
import { isObjectNull } from '@/utils/is-null';
|
|
||||||
|
|
||||||
const FormModal = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const promptStore = usePromptStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
showEdit: state.showEdit,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
formData: state.formData,
|
|
||||||
updateData: state.updateData,
|
|
||||||
runAi: state.runAi,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
const open = promptStore.showEdit;
|
|
||||||
if (open) {
|
|
||||||
if (isObjectNull(promptStore.formData)) {
|
|
||||||
form.setFieldsValue({});
|
|
||||||
} else {
|
|
||||||
form.setFieldsValue(promptStore.formData || {});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [promptStore.showEdit, promptStore.formData]);
|
|
||||||
const onFinish = async (values: any) => {
|
|
||||||
let other = {};
|
|
||||||
if (!values.id) {
|
|
||||||
other = {
|
|
||||||
presetData: {
|
|
||||||
validator: {},
|
|
||||||
data: {
|
|
||||||
prompt: '',
|
|
||||||
inputs: [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
promptStore.updateData({
|
|
||||||
...values,
|
|
||||||
...other,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const onClose = () => {
|
|
||||||
promptStore.setShowEdit(false);
|
|
||||||
form.resetFields();
|
|
||||||
};
|
|
||||||
const isEdit = promptStore.formData.id;
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
title={isEdit ? 'Edit' : 'Add'}
|
|
||||||
open={promptStore.showEdit}
|
|
||||||
onClose={() => promptStore.setShowEdit(false)}
|
|
||||||
destroyOnClose
|
|
||||||
footer={false}
|
|
||||||
width={800}
|
|
||||||
onCancel={onClose}>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
onFinish={onFinish}
|
|
||||||
labelCol={{
|
|
||||||
span: 4,
|
|
||||||
}}
|
|
||||||
wrapperCol={{
|
|
||||||
span: 20,
|
|
||||||
}}>
|
|
||||||
<Form.Item name='id' hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='title' label='title'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='description' label='description'>
|
|
||||||
<Input.TextArea rows={4} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='key' label='key'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label=' ' colon={false}>
|
|
||||||
<Button type='primary' htmlType='submit'>
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
<Button className='ml-2' htmlType='reset' onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export const List = () => {
|
|
||||||
const navicate = useNewNavigate();
|
|
||||||
const aiStore = useAiStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
open: state.open,
|
|
||||||
setOpen: state.setOpen,
|
|
||||||
key: state.key,
|
|
||||||
setKey: state.setKey,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const promptStore = usePromptStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
setFormData: state.setFormData,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
list: state.list,
|
|
||||||
deleteData: state.deleteData,
|
|
||||||
getList: state.getList,
|
|
||||||
loading: state.loading,
|
|
||||||
updateData: state.updateData,
|
|
||||||
formData: state.formData,
|
|
||||||
runAi: state.runAi,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
const [codeEdit, setCodeEdit] = useState(false);
|
|
||||||
const [code, setCode] = useState('');
|
|
||||||
const [form] = Form.useForm<{ inputs: any[] }>();
|
|
||||||
useEffect(() => {
|
|
||||||
promptStore.getList();
|
|
||||||
}, []);
|
|
||||||
useEffect(() => {
|
|
||||||
if (!codeEdit) {
|
|
||||||
form.setFieldsValue({ inputs: [] });
|
|
||||||
}
|
|
||||||
}, [codeEdit]);
|
|
||||||
const onAdd = () => {
|
|
||||||
promptStore.setFormData({});
|
|
||||||
promptStore.setShowEdit(true);
|
|
||||||
setCodeEdit(false);
|
|
||||||
};
|
|
||||||
const getFormInputs = () => {
|
|
||||||
if (!codeEdit) return;
|
|
||||||
console.log('blur getFormInputs');
|
|
||||||
|
|
||||||
const keys = extractKeysFromBraces(code);
|
|
||||||
const inputs = form.getFieldValue('inputs') || [];
|
|
||||||
const newInputs = keys
|
|
||||||
.map((key) => {
|
|
||||||
const has = inputs.some((item: any) => item.key === key);
|
|
||||||
if (!has) {
|
|
||||||
return {
|
|
||||||
key,
|
|
||||||
value: '',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
})
|
|
||||||
.filter(Boolean);
|
|
||||||
if (newInputs.length > 0) {
|
|
||||||
form.setFieldsValue({ inputs: [...inputs, ...newInputs] });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const len = form.getFieldValue('inputs')?.length || 0;
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full flex flex-col'>
|
|
||||||
<div className='flex flex-grow overflow-hidden h-full'>
|
|
||||||
<div className='p-2 bg-white'>
|
|
||||||
<Button onClick={onAdd} icon={<PlusOutlined />}></Button>
|
|
||||||
</div>
|
|
||||||
<div className='flex-grow overflow-auto scrollbar bg-gray-100'>
|
|
||||||
<div className='flex flex-wrap gap-x-10 gap-y-4 rounded pt-10 justify-center'>
|
|
||||||
{promptStore.list.length > 0 &&
|
|
||||||
promptStore.list.map((item) => {
|
|
||||||
const { presetData } = item;
|
|
||||||
const md = presetData?.data?.prompt || '';
|
|
||||||
const inputs = presetData?.data?.inputs || [];
|
|
||||||
const html = marked.parse(md);
|
|
||||||
return (
|
|
||||||
<Fragment key={item.id}>
|
|
||||||
<div className='flex text-sm gap flex-col w-[600px] max-h-[400px] bg-white p-4 rounded-lg' key={item.id} onClick={() => {}}>
|
|
||||||
<div
|
|
||||||
className='px-4 cursor-pointer'
|
|
||||||
onClick={() => {
|
|
||||||
setCode(md);
|
|
||||||
promptStore.setFormData(item);
|
|
||||||
form.setFieldsValue({
|
|
||||||
inputs: inputs.map((item) => {
|
|
||||||
return { key: item.key, value: item.value };
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
setCodeEdit(true);
|
|
||||||
}}>
|
|
||||||
<div
|
|
||||||
className='font-bold flex'
|
|
||||||
onClick={(e) => {
|
|
||||||
// copy(item.code);
|
|
||||||
// e.stopPropagation();
|
|
||||||
// message.success('copy code success');
|
|
||||||
}}>
|
|
||||||
{item.title || '-'}
|
|
||||||
<div
|
|
||||||
className=' ml-3 text-xs text-gray-400'
|
|
||||||
style={{
|
|
||||||
fontFamily: 'D-DIN',
|
|
||||||
}}>
|
|
||||||
{item?.key ? item.key : '-'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='font-light mt-2'>{item.description ? item.description : '-'}</div>
|
|
||||||
</div>
|
|
||||||
{/* <div className='w-full text-xs'>
|
|
||||||
<TextArea className='max-h-[240px] scrollbar' value={item.code} readonly />
|
|
||||||
</div> */}
|
|
||||||
<div className='px-4 mt-2'>{md ? 'Prompt' : ''}</div>
|
|
||||||
<div className='px-4'>
|
|
||||||
<div className='max-h-52 overflow-scroll scrollbar p-4 border shadow-sm mt-1'>
|
|
||||||
<div dangerouslySetInnerHTML={{ __html: html }}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='flex mt-4 ml-4'>
|
|
||||||
<Button.Group>
|
|
||||||
<Button
|
|
||||||
onClick={(e) => {
|
|
||||||
promptStore.setFormData(item);
|
|
||||||
promptStore.setShowEdit(true);
|
|
||||||
setCodeEdit(false);
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
icon={<EditOutlined />}></Button>
|
|
||||||
<Button
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
Modal.confirm({
|
|
||||||
title: 'Delete',
|
|
||||||
content: 'Are you sure delete this data?',
|
|
||||||
onOk: () => {
|
|
||||||
promptStore.deleteData(item.id);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
icon={<DeleteOutlined />}></Button>
|
|
||||||
<Button
|
|
||||||
icon={<CaretRightOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
// aiStore.setKey(location.pathname);
|
|
||||||
// aiStore.setOpen(true);
|
|
||||||
message.error('Not implemented');
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Tooltip title='Export Config'>
|
|
||||||
<Button
|
|
||||||
icon={<ExportOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
message.error('Not implemented');
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
</Button.Group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<CardBlank className='w-[600px]' />
|
|
||||||
{promptStore.list.length == 0 && (
|
|
||||||
<div className='text-center' key={'no-data'}>
|
|
||||||
No Data
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={clsx('bg-gray-100 border-l flex flex-col border-bg-slate-300 w-[600px] flex-shrink-0', !codeEdit && 'hidden')}>
|
|
||||||
<div className='bg-white p-2'>
|
|
||||||
<div className='mt-2 ml-2 flex gap-2'>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
setCodeEdit(false);
|
|
||||||
promptStore.setFormData({});
|
|
||||||
}}
|
|
||||||
icon={<LeftOutlined />}></Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
// console.log('save', promptStore.formData);
|
|
||||||
const { presetData } = promptStore.formData;
|
|
||||||
const inputs = form.getFieldValue('inputs') || [];
|
|
||||||
promptStore.updateData({ ...promptStore.formData, presetData: { ...presetData, data: { ...presetData.data, prompt: code, inputs } } });
|
|
||||||
}}
|
|
||||||
icon={<SaveOutlined />}></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='flex-grow p-2 rounded-2 shadow-sm overflow-hidden'>
|
|
||||||
<TextArea
|
|
||||||
value={code}
|
|
||||||
language='markdown'
|
|
||||||
placeholder='Please enter markdown code.'
|
|
||||||
onChange={(value) => {
|
|
||||||
setCode(value);
|
|
||||||
}}
|
|
||||||
onBlur={() => {
|
|
||||||
console.log('blur');
|
|
||||||
setTimeout(() => {
|
|
||||||
getFormInputs();
|
|
||||||
}, 400);
|
|
||||||
}}
|
|
||||||
className='h-full max-h-full scrollbar'
|
|
||||||
style={{
|
|
||||||
overflow: 'auto',
|
|
||||||
minHeight: '200px',
|
|
||||||
// height: '100%', // height: '100%' 有bug
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className='flex-shrink-0 px-4 mt-4'>
|
|
||||||
<h1 className={clsx('mb-2', len === 0 && 'hidden')}>Match Keys</h1>
|
|
||||||
<Form form={form}>
|
|
||||||
<Form.List name='inputs'>
|
|
||||||
{(fields, { add, remove }) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{fields.map((field, index) => {
|
|
||||||
return (
|
|
||||||
<div key={field.name + '-' + index} className='flex gap-2'>
|
|
||||||
<Form.Item name={[field.name, 'key']} rules={[{ required: true, message: 'Missing name' }]}>
|
|
||||||
<Input placeholder='name' />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name={[field.name, 'value']} rules={[{ required: true, message: 'Missing value' }]}>
|
|
||||||
<Input placeholder='value' />
|
|
||||||
</Form.Item>
|
|
||||||
{/* <Button onClick={() => add()} className='flex items-center'>
|
|
||||||
+
|
|
||||||
</Button> */}
|
|
||||||
<Button onClick={() => remove(field.name)}>-</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Form.List>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<FormModal />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
.node circle {
|
|
||||||
fill: #69b3a2;
|
|
||||||
stroke: #333;
|
|
||||||
stroke-width: 1.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
fill: none;
|
|
||||||
stroke: #999;
|
|
||||||
stroke-opacity: 0.6;
|
|
||||||
stroke-width: 1.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
font-size: 12px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
@ -1,122 +0,0 @@
|
|||||||
// @ts-nocheck
|
|
||||||
import * as d3 from 'd3';
|
|
||||||
import './d3.css';
|
|
||||||
|
|
||||||
export const drawGraph = (graphData) => {
|
|
||||||
// 初始配置：宽度和高度通过容器自适应
|
|
||||||
const svg = d3.select('.ai-graph');
|
|
||||||
|
|
||||||
const margin = { top: 20, right: 20, bottom: 20, left: 20 };
|
|
||||||
|
|
||||||
const updateChartSize = () => {
|
|
||||||
const width = svg.node().clientWidth - margin.left - margin.right;
|
|
||||||
const height = svg.node().clientHeight - margin.top - margin.bottom;
|
|
||||||
|
|
||||||
svg.attr('viewBox', `0 0 ${width} ${height}`);
|
|
||||||
|
|
||||||
return { width, height };
|
|
||||||
};
|
|
||||||
|
|
||||||
let { width, height } = updateChartSize();
|
|
||||||
|
|
||||||
// 使用力导向布局
|
|
||||||
const simulation = d3
|
|
||||||
.forceSimulation(graphData.nodes)
|
|
||||||
.force(
|
|
||||||
'link',
|
|
||||||
d3
|
|
||||||
.forceLink(graphData.links)
|
|
||||||
.id((d) => d.id)
|
|
||||||
.distance(100)
|
|
||||||
)
|
|
||||||
.force('charge', d3.forceManyBody().strength(-300))
|
|
||||||
.force('center', d3.forceCenter(width / 2, height / 2))
|
|
||||||
.force('collide', d3.forceCollide(20)); // 防止节点重叠，半径设置为20
|
|
||||||
|
|
||||||
// 绘制连线
|
|
||||||
const link = svg.append('g')
|
|
||||||
.selectAll('line')
|
|
||||||
.data(graphData.links)
|
|
||||||
.enter()
|
|
||||||
.append('line')
|
|
||||||
.attr('class', 'link');
|
|
||||||
|
|
||||||
// 绘制节点
|
|
||||||
const node = svg.append('g')
|
|
||||||
.selectAll('g')
|
|
||||||
.data(graphData.nodes)
|
|
||||||
.enter()
|
|
||||||
.append('g')
|
|
||||||
.attr('class', 'node');
|
|
||||||
|
|
||||||
node.append('circle').attr('r', 10);
|
|
||||||
|
|
||||||
// 添加节点标签
|
|
||||||
node
|
|
||||||
.append('text')
|
|
||||||
.attr('dx', 12)
|
|
||||||
.attr('dy', '.35em')
|
|
||||||
.text((d) => d.label);
|
|
||||||
|
|
||||||
// 限制节点在SVG范围内
|
|
||||||
const clampPosition = (d, width, height) => {
|
|
||||||
d.x = Math.max(10, Math.min(width - 10, d.x)); // 10为节点半径
|
|
||||||
d.y = Math.max(10, Math.min(height - 10, d.y));
|
|
||||||
};
|
|
||||||
|
|
||||||
// 更新节点和连线位置
|
|
||||||
simulation.on('tick', () => {
|
|
||||||
link
|
|
||||||
.attr('x1', (d) => d.source.x)
|
|
||||||
.attr('y1', (d) => d.source.y)
|
|
||||||
.attr('x2', (d) => d.target.x)
|
|
||||||
.attr('y2', (d) => d.target.y);
|
|
||||||
|
|
||||||
node.attr('transform', (d) => {
|
|
||||||
// 限制节点在SVG内部
|
|
||||||
clampPosition(d, width, height);
|
|
||||||
return `translate(${d.x},${d.y})`;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 添加拖拽事件
|
|
||||||
node.call(
|
|
||||||
d3
|
|
||||||
.drag()
|
|
||||||
.on('start', (event, d) => {
|
|
||||||
if (!event.active) simulation.alphaTarget(0.3).restart();
|
|
||||||
d.fx = d.x;
|
|
||||||
d.fy = d.y;
|
|
||||||
})
|
|
||||||
.on('drag', (event, d) => {
|
|
||||||
d.fx = event.x;
|
|
||||||
d.fy = event.y;
|
|
||||||
})
|
|
||||||
.on('end', (event, d) => {
|
|
||||||
if (!event.active) simulation.alphaTarget(0);
|
|
||||||
d.fx = null;
|
|
||||||
d.fy = null;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
// 添加双击事件
|
|
||||||
node.on('dblclick', (event, d) => {
|
|
||||||
d.fx = null;
|
|
||||||
d.fy = null;
|
|
||||||
console.log('dblclick', d);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 监听窗口大小变化时更新图表
|
|
||||||
const resize = () => {
|
|
||||||
const { width, height } = updateChartSize();
|
|
||||||
simulation.force('center', d3.forceCenter(width / 2, height / 2));
|
|
||||||
simulation.alpha(1).restart(); // 重启仿真以更新布局
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('resize', resize);
|
|
||||||
|
|
||||||
// 在需要的时候手动调用，销毁图表时可以移除监听
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('resize', resize);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import { Routes, Route, Navigate } from 'react-router-dom';
|
|
||||||
import { Edit } from './edit/Edit';
|
|
||||||
import { List } from './edit/List';
|
|
||||||
import { D3Grahp } from './D3';
|
|
||||||
import { Main } from './layout/Main';
|
|
||||||
|
|
||||||
export const App = () => {
|
|
||||||
return (
|
|
||||||
<Routes>
|
|
||||||
<Route element={<Main />}>
|
|
||||||
<Route path='/' element={<Navigate to='/prompt/list' />} />
|
|
||||||
<Route path='/graph' element={<D3Grahp />} />
|
|
||||||
<Route path='/edit' element={<Edit />} />
|
|
||||||
<Route path='/list' element={<List />} />
|
|
||||||
</Route>
|
|
||||||
</Routes>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export * from './module/Select'
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import { LayoutMain } from '@/modules/layout';
|
|
||||||
export const Main = () => {
|
|
||||||
return <LayoutMain title='Prompt'></LayoutMain>;
|
|
||||||
};
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import { query } from '@/modules';
|
|
||||||
import { Select as AntSelect, message, SelectProps } from 'antd';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
export const Select = (props: SelectProps) => {
|
|
||||||
const [options, setOptions] = useState<{ value: string; id: string }[]>([]);
|
|
||||||
useEffect(() => {
|
|
||||||
fetch();
|
|
||||||
}, []);
|
|
||||||
const fetch = async () => {
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'prompt',
|
|
||||||
key: 'list',
|
|
||||||
});
|
|
||||||
if (res.code !== 200) {
|
|
||||||
message.error(res.message || '获取agent列表失败');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const data = res.data || [];
|
|
||||||
setOptions(
|
|
||||||
data.map((item: any) => {
|
|
||||||
return {
|
|
||||||
label: item.key,
|
|
||||||
value: item.id,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<AntSelect
|
|
||||||
{...props}
|
|
||||||
options={options}
|
|
||||||
// onChange={(e) => {
|
|
||||||
// const labelValue = options.find((item) => item.value === e);
|
|
||||||
// props.onChange?.(e, options);
|
|
||||||
// }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,105 +0,0 @@
|
|||||||
import { create } from 'zustand';
|
|
||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
type PromptStore = {
|
|
||||||
showEdit: boolean;
|
|
||||||
setShowEdit: (showEdit: boolean) => void;
|
|
||||||
data: any;
|
|
||||||
setData: (data: any) => void;
|
|
||||||
formData: any;
|
|
||||||
setFormData: (formData: any) => void;
|
|
||||||
loading: boolean;
|
|
||||||
setLoading: (loading: boolean) => void;
|
|
||||||
list: any[];
|
|
||||||
getList: () => Promise<void>;
|
|
||||||
updateData: (data: any) => Promise<void>;
|
|
||||||
deleteData: (id: string) => Promise<void>;
|
|
||||||
runAi: () => any;
|
|
||||||
};
|
|
||||||
export const usePromptStore = create<PromptStore>((set, get) => {
|
|
||||||
return {
|
|
||||||
showEdit: false,
|
|
||||||
setShowEdit: (showEdit) => set({ showEdit }),
|
|
||||||
formData: {},
|
|
||||||
setFormData: (formData) => {
|
|
||||||
set({ formData });
|
|
||||||
},
|
|
||||||
data: {},
|
|
||||||
setData: (data) => {
|
|
||||||
set({ data });
|
|
||||||
},
|
|
||||||
loading: false,
|
|
||||||
setLoading: (loading) => set({ loading }),
|
|
||||||
list: [],
|
|
||||||
getList: async () => {
|
|
||||||
set({ loading: true });
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'prompt',
|
|
||||||
key: 'list',
|
|
||||||
});
|
|
||||||
set({ loading: false });
|
|
||||||
if (res.code === 200) {
|
|
||||||
set({ list: res.data });
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateData: async (data) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'prompt',
|
|
||||||
key: 'update',
|
|
||||||
data,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success');
|
|
||||||
set({ showEdit: false, formData: [] });
|
|
||||||
getList();
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deleteData: async (id) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'prompt',
|
|
||||||
key: 'delete',
|
|
||||||
id,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
getList();
|
|
||||||
message.success('Success');
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
runAi: async () => {
|
|
||||||
const { formData } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'ai',
|
|
||||||
key: 'run',
|
|
||||||
data: {
|
|
||||||
key: formData.key,
|
|
||||||
inputs: [
|
|
||||||
{
|
|
||||||
key: 'title',
|
|
||||||
value: '根据描述生成代码',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'description',
|
|
||||||
value: '我想获取一个card, 包含标题和内容，标题是evision，内容是这是一个测试',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
data: {
|
|
||||||
title: formData.title,
|
|
||||||
description: formData.description,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
console.log(res.data);
|
|
||||||
message.success('Success');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,178 +0,0 @@
|
|||||||
import { Button, Input, message, Modal, Table } from 'antd';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { usePublishStore } from '../store';
|
|
||||||
import { useShallow } from 'zustand/react/shallow';
|
|
||||||
import { Form } from 'antd';
|
|
||||||
import copy from 'copy-to-clipboard';
|
|
||||||
import { useNewNavigate } from '@/modules';
|
|
||||||
const FormModal = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const containerStore = usePublishStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
showEdit: state.showEdit,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
formData: state.formData,
|
|
||||||
updateData: state.updateData,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
const open = containerStore.showEdit;
|
|
||||||
if (open) {
|
|
||||||
form.setFieldsValue(containerStore.formData || {});
|
|
||||||
} else {
|
|
||||||
form.resetFields();
|
|
||||||
}
|
|
||||||
}, [containerStore.showEdit]);
|
|
||||||
const onFinish = async (values: any) => {
|
|
||||||
containerStore.updateData(values);
|
|
||||||
};
|
|
||||||
const onClose = () => {
|
|
||||||
containerStore.setShowEdit(false);
|
|
||||||
form.resetFields();
|
|
||||||
};
|
|
||||||
const isEdit = containerStore.formData.id;
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
title={isEdit ? 'Edit' : 'Add'}
|
|
||||||
open={containerStore.showEdit}
|
|
||||||
onClose={() => containerStore.setShowEdit(false)}
|
|
||||||
destroyOnClose
|
|
||||||
footer={false}
|
|
||||||
width={800}
|
|
||||||
onCancel={onClose}>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
onFinish={onFinish}
|
|
||||||
labelCol={{
|
|
||||||
span: 4,
|
|
||||||
}}
|
|
||||||
wrapperCol={{
|
|
||||||
span: 20,
|
|
||||||
}}>
|
|
||||||
<Form.Item name='id' hidden>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item name='title' label='title'>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label=' ' colon={false}>
|
|
||||||
<Button type='primary' htmlType='submit'>
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
<Button className='ml-2' htmlType='reset' onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export const List = () => {
|
|
||||||
const navicate = useNewNavigate();
|
|
||||||
const containerStore = usePublishStore(
|
|
||||||
useShallow((state) => {
|
|
||||||
return {
|
|
||||||
setFormData: state.setFormData,
|
|
||||||
setShowEdit: state.setShowEdit,
|
|
||||||
list: state.list,
|
|
||||||
deleteData: state.deleteData,
|
|
||||||
getList: state.getList,
|
|
||||||
loading: state.loading,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
containerStore.getList();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: 'ID',
|
|
||||||
dataIndex: 'id',
|
|
||||||
render: (text: string) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className='w-40 truncate cursor-pointer'
|
|
||||||
title={text}
|
|
||||||
onClick={() => {
|
|
||||||
copy(text);
|
|
||||||
message.success('copy success');
|
|
||||||
}}>
|
|
||||||
{text}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Title',
|
|
||||||
dataIndex: 'title',
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
title: 'Source',
|
|
||||||
dataIndex: 'source',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Operation',
|
|
||||||
dataIndex: 'operation',
|
|
||||||
render: (text: string, record: any) => {
|
|
||||||
return (
|
|
||||||
<div className='flex gap-2'>
|
|
||||||
<Button
|
|
||||||
type='primary'
|
|
||||||
onClick={() => {
|
|
||||||
containerStore.setFormData(record);
|
|
||||||
containerStore.setShowEdit(true);
|
|
||||||
}}>
|
|
||||||
Edit
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
navicate('/container/preview/' + record.id);
|
|
||||||
}}>
|
|
||||||
Preview
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
danger
|
|
||||||
onClick={() => {
|
|
||||||
containerStore.deleteData(record.id);
|
|
||||||
}}>
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full flex flex-col'>
|
|
||||||
<div className='mb-2 w-full p-2 bg-white rounded-lg'>
|
|
||||||
<Button
|
|
||||||
className='w-20 '
|
|
||||||
type='primary'
|
|
||||||
onClick={() => {
|
|
||||||
containerStore.setFormData({});
|
|
||||||
containerStore.setShowEdit(true);
|
|
||||||
}}>
|
|
||||||
Add
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className='flex-grow overflow-scroll'>
|
|
||||||
<Table
|
|
||||||
pagination={false}
|
|
||||||
scroll={{
|
|
||||||
y: 600,
|
|
||||||
}}
|
|
||||||
loading={containerStore.loading}
|
|
||||||
dataSource={containerStore.list}
|
|
||||||
rowKey='id'
|
|
||||||
columns={columns}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className='h-2'></div>
|
|
||||||
<FormModal />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
|
||||||
import { List } from './edit/List';
|
|
||||||
import { Main } from './layouts';
|
|
||||||
export const App = () => {
|
|
||||||
return (
|
|
||||||
<Routes>
|
|
||||||
<Route element={<Main />}>
|
|
||||||
<Route path='/' element={<Navigate to='/panel/edit/list' />}></Route>
|
|
||||||
<Route path='edit/list' element={<List />} />
|
|
||||||
<Route path='*' element={'Not Found'}></Route>
|
|
||||||
</Route>
|
|
||||||
</Routes>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
import { Outlet } from 'react-router';
|
|
||||||
|
|
||||||
export const Main = () => {
|
|
||||||
return (
|
|
||||||
<div className='flex w-full h-full flex-col bg-gray-200'>
|
|
||||||
<div className='h-12 bg-white p-2 mb-2'>Deck And Flow</div>
|
|
||||||
<div
|
|
||||||
className='flex'
|
|
||||||
style={{
|
|
||||||
height: 'calc(100vh - 4rem)',
|
|
||||||
}}>
|
|
||||||
<div className='flex-grow overflow-hidden mx-2'>
|
|
||||||
<div className='w-full h-full rounded-lg'>
|
|
||||||
<Outlet />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
import { create } from 'zustand';
|
|
||||||
import { query } from '@/modules';
|
|
||||||
import { message } from 'antd';
|
|
||||||
type Store = {
|
|
||||||
showEdit: boolean;
|
|
||||||
setShowEdit: (showEdit: boolean) => void;
|
|
||||||
formData: any;
|
|
||||||
setFormData: (formData: any) => void;
|
|
||||||
loading: boolean;
|
|
||||||
setLoading: (loading: boolean) => void;
|
|
||||||
list: any[];
|
|
||||||
getList: () => Promise<void>;
|
|
||||||
updateData: (data: any) => Promise<void>;
|
|
||||||
deleteData: (id: string) => Promise<void>;
|
|
||||||
};
|
|
||||||
export const usePublishStore = create<Store>((set, get) => {
|
|
||||||
return {
|
|
||||||
showEdit: false,
|
|
||||||
setShowEdit: (showEdit) => set({ showEdit }),
|
|
||||||
formData: {},
|
|
||||||
setFormData: (formData) => set({ formData }),
|
|
||||||
loading: false,
|
|
||||||
setLoading: (loading) => set({ loading }),
|
|
||||||
list: [],
|
|
||||||
getList: async () => {
|
|
||||||
set({ loading: true });
|
|
||||||
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'resource',
|
|
||||||
key: 'list',
|
|
||||||
});
|
|
||||||
set({ loading: false });
|
|
||||||
if (res.code === 200) {
|
|
||||||
set({ list: res.data });
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateData: async (data) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'resource',
|
|
||||||
key: 'update',
|
|
||||||
data,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
message.success('Success');
|
|
||||||
set({ showEdit: false, formData: [] });
|
|
||||||
getList();
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deleteData: async (id) => {
|
|
||||||
const { getList } = get();
|
|
||||||
const res = await query.post({
|
|
||||||
path: 'resource',
|
|
||||||
key: 'delete',
|
|
||||||
id,
|
|
||||||
});
|
|
||||||
if (res.code === 200) {
|
|
||||||
getList();
|
|
||||||
message.success('Success');
|
|
||||||
} else {
|
|
||||||
message.error(res.message || 'Request failed');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,7 +1,6 @@
|
|||||||
import { query } from '@/modules';
|
import { query } from '@/modules';
|
||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
import { create } from 'zustand';
|
import { create } from 'zustand';
|
||||||
import { history } from '@/utils/history';
|
|
||||||
// 如果自己是在iframe中登录，需要调用这个方法
|
// 如果自己是在iframe中登录，需要调用这个方法
|
||||||
export const postLoginInIframe = (token: string) => {
|
export const postLoginInIframe = (token: string) => {
|
||||||
console.log('window.parent !== window', window.parent !== window);
|
console.log('window.parent !== window', window.parent !== window);
|
||||||
@ -85,7 +84,6 @@ export const useLoginStore = create<LoginStore>((set, get) => {
|
|||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
message.success('Success');
|
message.success('Success');
|
||||||
// 跳到某一个页面
|
// 跳到某一个页面
|
||||||
// history.push('/map', {}, true);
|
|
||||||
} else {
|
} else {
|
||||||
message.error(res.message || 'Request failed');
|
message.error(res.message || 'Request failed');
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,16 +0,0 @@
|
|||||||
/**
|
|
||||||
* 提取 {{}} 中的 key
|
|
||||||
* @param text
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function extractKeysFromBraces(text: string) {
|
|
||||||
const regex = /\{\{\s*(.*?)\s*\}\}/g;
|
|
||||||
const keys: string[] = [];
|
|
||||||
let matches: RegExpExecArray | null;
|
|
||||||
|
|
||||||
while ((matches = regex.exec(text)) !== null) {
|
|
||||||
keys.push(matches[1]); // 获取{{}}中间的key
|
|
||||||
}
|
|
||||||
|
|
||||||
return keys;
|
|
||||||
}
|
|
||||||
1
theme
1
theme
@ -1 +0,0 @@
|
|||||||
Subproject commit 6c8effeaf330690d23ac4810cec84caface2ca5f
|
|
||||||
@ -5,13 +5,13 @@ import autoprefixer from 'autoprefixer';
|
|||||||
import path from 'path';
|
import path from 'path';
|
||||||
import nesting from 'tailwindcss/nesting';
|
import nesting from 'tailwindcss/nesting';
|
||||||
const isDev = process.env.NODE_ENV === 'development';
|
const isDev = process.env.NODE_ENV === 'development';
|
||||||
const isKV = process.env.VITE_USE_KV === 'true';
|
const isKV = process.env.VITE_USE_KV === 'true'; // use kevisual service as backend
|
||||||
const unamiPlugin = {
|
const unamiPlugin = {
|
||||||
name: 'html-transform',
|
name: 'html-transform',
|
||||||
transformIndexHtml(html: string) {
|
transformIndexHtml(html: string) {
|
||||||
return html.replace(
|
return html.replace(
|
||||||
'</head>',
|
'</head>',
|
||||||
`<script defer src="https://umami.xiongxiao.me/script.js" data-website-id="aeea5ee5-df79-4e78-8c0d-a9f26db23695"></script></head>`,
|
`<script defer src="https://umami.xiongxiao.me/script.js" data-website-id="79e7aa98-9e6e-4eef-bc8b-9cbd0ecb11c3"></script></head>`,
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -48,7 +48,16 @@ export default defineConfig({
|
|||||||
css: {
|
css: {
|
||||||
postcss: {
|
postcss: {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
plugins: [nesting, tailwindcss, autoprefixer],
|
plugins: [
|
||||||
|
nesting({
|
||||||
|
// 兼容 tailwindcss 4.0
|
||||||
|
tailwindcss: {
|
||||||
|
config: './tailwind.config.js',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
tailwindcss,
|
||||||
|
autoprefixer,
|
||||||
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
@ -60,9 +69,13 @@ export default defineConfig({
|
|||||||
DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development'),
|
DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development'),
|
||||||
},
|
},
|
||||||
server: {
|
server: {
|
||||||
port: 6010,
|
port: 6020,
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
proxy: {
|
proxy: {
|
||||||
|
'/system/lib': {
|
||||||
|
target: 'https://kevisual.xiongxiao.me',
|
||||||
|
changeOrigin: true,
|
||||||
|
},
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'http://localhost:4002',
|
target: 'http://localhost:4002',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user