feat: 暂存添加ai chat and prompt generate

2024-09-26 01:18:04 +08:00
parent 3da62fd254
commit 553e4d62f0
16 changed files with 1265 additions and 60 deletions
--- a/src/pages/ai-chat/AiModule.tsx
+++ b/src/pages/ai-chat/AiModule.tsx
@@ -0,0 +1,38 @@
+import { useShallow } from 'zustand/react/shallow';
+import { useAiStore } from './store/ai-store';
+import { CloseOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+
+export const AiMoudle = () => {
+  const aiStore = useAiStore(
+    useShallow((state) => {
+      return {
+        open: state.open,
+        setOpen: state.setOpen,
+        runAi: state.runAi,
+      };
+    }),
+  );
+  if (!aiStore.open) {
+    return null;
+  }
+  return (
+    <div className='w-96 flex-shrink-0 bg-gray-100 border-l-2 shadow-lg flex flex-col'>
+      <div className='flex gap-4 bg-slate-400 p-2'>
+        <Button className='position ml-4 !bg-slate-400 !border-black' onClick={() => aiStore.setOpen(false)} icon={<CloseOutlined />}></Button>
+        <h1 className='ml-10'>Ai Moudle</h1>
+      </div>
+      <div className='flex-grow p-2'>
+        <div> chat message</div>
+        <div>
+          <Button
+            onClick={() => {
+              aiStore.runAi();
+            }}>
+            Send
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/src/pages/ai-chat/index.tsx
+++ b/src/pages/ai-chat/index.tsx
@@ -0,0 +1,7 @@
+import { AiMoudle } from './AiModule';
+import { useAiStore } from './store/ai-store';
+export { AiMoudle, useAiStore };
+
+export const App = () => {
+  return <div>AI Chat</div>;
+};
--- a/src/pages/ai-chat/store/ai-store.ts
+++ b/src/pages/ai-chat/store/ai-store.ts
@@ -0,0 +1,58 @@
+import { query } from '@/modules';
+import { message } from 'antd';
+import { create } from 'zustand';
+
+export type AiStore = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  type?: string;
+  key: string;
+  setKey: (key: string) => void;
+  setType?: (type: string) => void;
+  sendMsg: (msg: string) => void;
+  formData: any;
+  setFormData: (data: any) => void;
+  runAi: () => any;
+  title: string;
+  setTitle: (title: string) => void;
+};
+
+export const useAiStore = create<AiStore>((set, get) => {
+  return {
+    open: false,
+    setOpen: (open) => set({ open }),
+    key: '',
+    setKey: (key) => set({ key }),
+    sendMsg: (msg) => {
+      console.log(msg);
+    },
+    formData: {},
+    setFormData: (data) => set({ formData: data }),
+    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，内容是这是一个测试',
+            },
+          ],
+        },
+      });
+      if (res.code === 200) {
+        console.log(res.data);
+        message.success('Success');
+      }
+    },
+    title: '',
+    setTitle: (title) => set({ title }),
+  };
+});
--- a/src/pages/container/components/TextArea.tsx
+++ b/src/pages/container/components/TextArea.tsx
@@ -11,6 +11,8 @@ type Props = {
  style?: React.CSSProperties;
  language?: string;
  listen?: boolean;
+  placeholder?: string;
+  onBlur?: () => void;
 };
 export const TextArea = (props: Props) => {
  const [code, setCode] = useState<string>('');
@@ -27,12 +29,13 @@ export const TextArea = (props: Props) => {
    <div className={clsx('min-h-16 max-h-52 overflow-scroll scrollbar p-1 ', props.className)}>
      <CodeEditor
        value={code}
-        language='js'
+        language={props.language || 'js'}
        className='border rounded-sm '
        readOnly={props.readonly}
-        placeholder='Please enter JS code.'
+        placeholder={props.placeholder || 'Please enter JS code.'}
        onChange={(evn) => _onChange(evn.target.value)}
        padding={10}
+        onBlur={props.onBlur}
        style={{
          // backgroundColor: '#f5f5f5',
          fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
--- a/src/pages/container/edit/List.tsx
+++ b/src/pages/container/edit/List.tsx
@@ -59,12 +59,7 @@ const FormModal = () => {
          <Input />
        </Form.Item>
        <Form.Item name='code' label='code'>
-          <TextArea
-            value={containerStore.formData.code}
-            style={{
-              height: '200px',
-            }}
-          />
+          <TextArea />
        </Form.Item>
        <Form.Item label=' ' colon={false}>
          <Button type='primary' htmlType='submit'>
--- a/src/pages/prompt/D3.tsx
+++ b/src/pages/prompt/D3.tsx
@@ -0,0 +1,41 @@
+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>
+  );
+};
--- a/src/pages/prompt/edit/Edit.tsx
+++ b/src/pages/prompt/edit/Edit.tsx
@@ -0,0 +1,57 @@
+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>
+  );
+};
--- a/src/pages/prompt/edit/List.tsx
+++ b/src/pages/prompt/edit/List.tsx
@@ -0,0 +1,342 @@
+import { Button, Input, message, Modal, Table } 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 { useNavigate } from 'react-router';
+import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, CaretRightOutlined, PlusOutlined } 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';
+
+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) {
+      const isNull = JSON.stringify(promptStore.formData) === '{}';
+      if (isNull) {
+        form.resetFields();
+      } else {
+        form.setFieldsValue(promptStore.formData || {});
+      }
+    }
+  }, [promptStore.showEdit]);
+  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 = useNavigate();
+  const aiStore = useAiStore(
+    useShallow((state) => {
+      return {
+        open: state.open,
+        setOpen: state.setOpen,
+        key: state.key,
+        setKey: state.setKey,
+        sendMsg: state.sendMsg,
+      };
+    }),
+  );
+  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'>
+        <Button onClick={onAdd} type='primary' className='m-4 w-64 flex-shrink-0' icon={<PlusOutlined />}></Button>
+        <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) => {
+                              promptStore.deleteData(item.id);
+                              e.stopPropagation();
+                            }}
+                            icon={<DeleteOutlined />}></Button>
+                          <Button
+                            icon={<CaretRightOutlined />}
+                            onClick={() => {
+                              // navicate(`/prompt/${item.id}`);
+                              promptStore.setFormData(item);
+                              // promptStore.runAi();
+                              aiStore.setOpen(true);
+                            }}
+                          />
+                        </Button.Group>
+                      </div>
+                    </div>
+                  </Fragment>
+                );
+              })}
+            {new Array(4).fill(0).map((_, index) => {
+              return <div key={index} className='w-[600px]'></div>;
+            })}
+            {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>
+  );
+};
--- a/src/pages/prompt/graph/d3.css
+++ b/src/pages/prompt/graph/d3.css
@@ -0,0 +1,18 @@
+.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;
+}
--- a/src/pages/prompt/graph/d3.ts
+++ b/src/pages/prompt/graph/d3.ts
@@ -0,0 +1,122 @@
+// @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);
+  };
+};
--- a/src/pages/prompt/index.tsx
+++ b/src/pages/prompt/index.tsx
@@ -1,57 +1,18 @@
-import { Button, Form, Input } from 'antd';
-import { TextArea } from '../container/components/TextArea';
-import clsx from 'clsx';
+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 = () => {
-  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>
+    <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>
  );
 };
--- a/src/pages/prompt/layout/Main.tsx
+++ b/src/pages/prompt/layout/Main.tsx
@@ -0,0 +1,13 @@
+import { AiMoudle } from '@/pages/ai-chat';
+import { Outlet } from 'react-router';
+
+export const Main = () => {
+  return (
+    <div className='w-full h-full flex'>
+      <div className='flex-grow h-full'>
+        <Outlet />
+      </div>
+      <AiMoudle />
+    </div>
+  );
+};
--- a/src/pages/prompt/store/prompt.ts
+++ b/src/pages/prompt/store/prompt.ts
@@ -0,0 +1,97 @@
+import { create } from 'zustand';
+import { query } from '@/modules';
+import { message } from 'antd';
+type PromptStore = {
+  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>;
+  runAi: () => any;
+};
+export const usePromptStore = create<PromptStore>((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: 'prompt',
+        key: 'list',
+      });
+      set({ loading: false });
+      if (res.code === 200) {
+        set({ list: res.data });
+      } else {
+        message.error(res.msg || '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.msg || '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.msg || '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');
+      }
+    },
+  };
+});
--- a/src/utils/extra.ts
+++ b/src/utils/extra.ts
@@ -0,0 +1,11 @@
+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;
+}