feat: 优化界面显示，对deck添加编辑功能

src/pages/ai-chat/AiModule.tsx

@@ -1,36 +1,110 @@
 import { useShallow } from 'zustand/react/shallow';
 import { useAiStore } from './store/ai-store';
 import { CloseOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { Button, Form, Input } from 'antd';
+import { useEffect } from 'react';
+import { TextArea } from '../container/components/TextArea';
+import clsx from 'clsx';
+import { marked } from 'marked';
 
 export const AiMoudle = () => {
+  const [form] = Form.useForm();
   const aiStore = useAiStore(
     useShallow((state) => {
       return {
         open: state.open,
         setOpen: state.setOpen,
         runAi: state.runAi,
+        formData: state.formData,
+        setFormData: state.setFormData,
+        messages: state.messages,
+        setMessages: state.setMessage,
       };
     }),
   );
-  if (!aiStore.open) {
-    return null;
-  }
+
+  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([]);
+    }
+  }, [aiStore.open]);
+  const onSend = () => {
+    const data = form.getFieldsValue();
+    aiStore.setFormData(data);
+    aiStore.runAi();
+  };
   return (
-    <div className='w-96 flex-shrink-0 bg-gray-100 border-l-2 shadow-lg flex flex-col'>
+    <div className={clsx('w-[600px] flex-shrink-0 bg-gray-100 border-l-2 shadow-lg flex flex-col', !aiStore?.open && 'hidden')}>
       <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 className='flex-grow p-2 overflow-hidden h-full flex flex-col'>
+        <div className='flex flex-col'>
+          <div className='mb-3'> chat message</div>
+          {aiStore?.messages?.map((message, index) => {
+            const html = marked.parse(message?.content);
+            return (
+              <div key={index} className=' justify-between px-4 w-full'>
+                <div className='h3 font-bold'>{message?.role}</div>
+                <div className='p-4 text-xs border shadow-sm rounded-sm scrollbar max-h-[200px] w-full overflow-scroll' dangerouslySetInnerHTML={{ __html: html }}>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <div className='mt-4'>
+          <Form form={form}>
+            <Form.Item hidden name='id'>
+              <Input placeholder='message' />
+            </Form.Item>
+            <Form.Item name='messages' hidden>
+              <Input placeholder='message' />
+            </Form.Item>
+            <Form.Item name='key' hidden>
+              <Input placeholder='key' />
+            </Form.Item>
+            <Form.List name={'inputs'} initialValue={[]}>
+              {(fields, { add, remove }) => {
+                return (
+                  <>
+                    {fields.map((field, index) => {
+                      const key = form.getFieldValue(['inputs', index, 'key']);
+                      console.log('key', 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 ? 40 : 300 }} placeholder={key} />
+                          </Form.Item>
+                        </div>
+                      );
+                    })}
+                  </>
+                );
+              }}
+            </Form.List>
+          </Form>
+          <div className='p-4'>
+            <Button className='mt-4' onClick={onSend}>
+              Send
+            </Button>
+          </div>
         </div>
       </div>
     </div>

src/pages/ai-chat/store/ai-store.ts

@@ -1,6 +1,19 @@
 import { query } from '@/modules';
 import { message } from 'antd';
 import { create } from 'zustand';
+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;
+};
 
 export type AiStore = {
   open: boolean;
@@ -12,9 +25,13 @@ export type AiStore = {
   sendMsg: (msg: string) => void;
   formData: any;
   setFormData: (data: any) => void;
+  data: any;
+  setData: (data: any) => void;
   runAi: () => any;
   title: string;
   setTitle: (title: string) => void;
+  messages: { role: string; content: string }[];
+  setMessage: (message: { role: string; content: string }[]) => void;
 };
 
 export const useAiStore = create<AiStore>((set, get) => {
@@ -28,31 +45,60 @@ export const useAiStore = create<AiStore>((set, get) => {
     },
     formData: {},
     setFormData: (data) => set({ formData: data }),
+    data: {},
+    setData: (data) => {
+      const { key, presetData = {} } = data;
+      console.log('key', presetData, data);
+      if (!key) {
+        console.error('key is required');
+        return;
+      }
+      const { inputs = [] } = presetData.data || {};
+      const formData = {
+        key,
+        inputs: inputs.map((input) => {
+          return {
+            key: input.key,
+            value: input.value,
+            type: 'string',
+          };
+        }),
+        messages: [],
+      };
+      console.log('formData', formData);
+      set({ key, data, formData });
+    },
     runAi: async () => {
-      const { formData } = get();
+      const { formData, messages } = get();
+      const loading = message.loading('loading');
       const res = await query.post({
         path: 'ai',
         key: 'run',
         data: {
           key: formData.key,
           inputs: [
-            {
-              key: 'title',
-              value: '根据描述生成代码',
-            },
-            {
-              key: 'description',
-              value: '我想获取一个card, 包含标题和内容，标题是evision，内容是这是一个测试',
-            },
+            // {
+            //   key: 'title',
+            //   value: '根据描述生成代码',
+            // },
+            // {
+            //   key: 'description',
+            //   value: '我想获取一个card, 包含标题和内容，标题是evision，内容是这是一个测试',
+            // },
+            ...formData.inputs,
           ],
         },
       });
+      loading();
       if (res.code === 200) {
         console.log(res.data);
         message.success('Success');
+        set({ messages: [...messages, res.data.message] });
       }
     },
     title: '',
     setTitle: (title) => set({ title }),
+    messages: [],
+    setMessage: (messages) => set({ messages }),
   };
 });