chore: awesome

src/view/awesome/Form.tsx

@@ -0,0 +1,63 @@
+import { useEffect, ForwardRefRenderFunction, useImperativeHandle, forwardRef } from 'react';
+import { Form, Input, Switch } from 'antd';
+import type { FormProps } from 'antd';
+
+import Tags from '@comps/Tags';
+import { DISABLE_AUTO_COMPLETE } from '@/utils';
+
+interface AwesomeFormProps {
+  record?: Record<string|symbol, any> | null;
+}
+
+const initFormValue = {
+  title: '',
+  url: '',
+  enable: true,
+  tags: [],
+  category: '',
+};
+
+const AwesomeForm: ForwardRefRenderFunction<FormProps, AwesomeFormProps> = ({ record }, ref) => {
+  const [form] = Form.useForm();
+  useImperativeHandle(ref, () => ({ form }));
+
+  useEffect(() => {
+    if (record) {
+      form.setFieldsValue(record);
+    }
+  }, [record]);
+
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 4 }}
+      initialValues={initFormValue}
+    >
+      <Form.Item
+        label="Title"
+        name="title"
+        rules={[{ required: true, message: 'Please enter a title!' }]}
+      >
+        <Input placeholder="Please enter a title" {...DISABLE_AUTO_COMPLETE} />
+      </Form.Item>
+      <Form.Item
+        label="URL"
+        name="url"
+        rules={[{ required: true, message: 'Please enter the URL' }]}
+      >
+        <Input placeholder="Please enter the URL" {...DISABLE_AUTO_COMPLETE} />
+      </Form.Item>
+      <Form.Item label="Category" name="category">
+        <Input placeholder="Please enter a category" {...DISABLE_AUTO_COMPLETE} />
+      </Form.Item>
+      <Form.Item label="Tags" name="tags">
+        <Tags value={record?.tags} />
+      </Form.Item>
+      <Form.Item label="Enable" name="enable" valuePropName="checked">
+        <Switch />
+      </Form.Item>
+    </Form>
+  )
+}
+
+export default forwardRef(AwesomeForm);

src/view/awesome/config.tsx

@@ -0,0 +1,68 @@
+import { Tag, Space, Popconfirm, Switch } from 'antd';
+
+export const awesomeColumns = () => [
+  {
+    title: 'Title',
+    dataIndex: 'title',
+    fixed: 'left',
+    key: 'title',
+    width: 160,
+  },
+  {
+    title: 'URL',
+    dataIndex: 'url',
+    key: 'url',
+    width: 120,
+  },
+  // {
+  //   title: 'Icon',
+  //   dataIndex: 'icon',
+  //   key: 'icon',
+  //   width: 120,
+  // },
+  {
+    title: 'Enable',
+    dataIndex: 'enable',
+    key: 'enable',
+    width: 80,
+    render: (v: boolean = true, row: Record<string, any>, action: Record<string, any>) => (
+      <Switch checked={v} onChange={(v) => action.setRecord({ ...row, enable: v }, 'enable')} />
+    ),
+  },
+  {
+    title: 'Category',
+    dataIndex: 'category',
+    key: 'category',
+    width: 200,
+    render: (v: string) => <Tag color="geekblue">{v}</Tag>
+  },
+  {
+    title: 'Tags',
+    dataIndex: 'tags',
+    key: 'tags',
+    width: 150,
+    render: (v: string[]) => (
+      <span className="chat-tags">{v?.map(i => <Tag key={i}>{i}</Tag>)}</span>
+    ),
+  },
+  {
+    title: 'Action',
+    fixed: 'right',
+    width: 150,
+    render: (_: any, row: any, actions: any) => {
+      return (
+        <Space>
+          <a onClick={() => actions.setRecord(row, 'edit')}>Edit</a>
+          <Popconfirm
+            title="Are you sure you want to delete this URL?"
+            onConfirm={() => actions.setRecord(row, 'delete')}
+            okText="Yes"
+            cancelText="No"
+          >
+            <a>Delete</a>
+          </Popconfirm>
+        </Space>
+      )
+    }
+  }
+];

src/view/awesome/index.tsx

@@ -0,0 +1,125 @@
+import { useRef, useEffect, useState } from 'react';
+import { Table, Modal, Popconfirm, Button, message } from 'antd';
+
+import useJson from '@/hooks/useJson';
+import useData from '@/hooks/useData';
+import useColumns from '@/hooks/useColumns';
+import FilePath from '@/components/FilePath';
+import { CHAT_AWESOME_JSON } from '@/utils';
+import { useTableRowSelection, TABLE_PAGINATION } from '@/hooks/useTable';
+import { awesomeColumns } from './config';
+import AwesomeForm from './Form';
+
+export default function Awesome() {
+  const formRef = useRef<any>(null);
+  const [isVisible, setVisible] = useState(false);
+  const { opData, opInit, opAdd, opReplace, opReplaceItems, opRemove, opSafeKey } = useData([]);
+  const { columns, ...opInfo } = useColumns(awesomeColumns());
+  const { rowSelection, selectedRowIDs } = useTableRowSelection();
+  const { json, updateJson } = useJson<any[]>(CHAT_AWESOME_JSON);
+  const selectedItems = rowSelection.selectedRowKeys || [];
+
+  useEffect(() => {
+    if (!json || json.length <= 0) return;
+    opInit(json);
+  }, [json?.length]);
+
+  useEffect(() => {
+    if (!opInfo.opType) return;
+    if (['edit', 'new'].includes(opInfo.opType)) {
+      setVisible(true);
+    }
+    if (['delete'].includes(opInfo.opType)) {
+      const data = opRemove(opInfo?.opRecord?.[opSafeKey]);
+      updateJson(data);
+      opInfo.resetRecord();
+    }
+  }, [opInfo.opType, formRef]);
+
+  const hide = () => {
+    setVisible(false);
+    opInfo.resetRecord();
+  };
+
+  useEffect(() => {
+    if (opInfo.opType === 'enable') {
+      const data = opReplace(opInfo?.opRecord?.[opSafeKey], opInfo?.opRecord);
+      updateJson(data);
+    }
+  }, [opInfo.opTime])
+
+  const handleDelete = () => {
+
+  };
+
+  const handleOk = () => {
+    formRef.current?.form?.validateFields()
+      .then(async (vals: Record<string, any>) => {
+        if (opInfo.opType === 'new') {
+          const data = opAdd(vals);
+          await updateJson(data);
+          opInit(data);
+          message.success('Data added successfully');
+        }
+        if (opInfo.opType === 'edit') {
+          const data = opReplace(opInfo?.opRecord?.[opSafeKey], vals);
+          await updateJson(data);
+          message.success('Data updated successfully');
+        }
+        hide();
+      })
+  };
+
+  const handleEnable = (isEnable: boolean) => {
+    const data = opReplaceItems(selectedRowIDs, { enable: isEnable })
+    updateJson(data);
+  };
+
+  const modalTitle = `${({ new: 'Create', edit: 'Edit' })[opInfo.opType]} URL`;
+
+  return (
+    <div>
+      <div className="chat-table-btns">
+        <Button className="chat-add-btn" type="primary" onClick={opInfo.opNew}>Add URL</Button>
+        <div>
+          {selectedItems.length > 0 && (
+            <>
+              <Button type="primary" onClick={() => handleEnable(true)}>Enable</Button>
+              <Button onClick={() => handleEnable(false)}>Disable</Button>
+              <Popconfirm
+                overlayStyle={{ width: 250 }}
+                title="URLs cannot be recovered after deletion, are you sure you want to delete them?"
+                placement="topLeft"
+                onConfirm={handleDelete}
+                okText="Yes"
+                cancelText="No"
+              >
+                <Button>Delete</Button>
+              </Popconfirm>
+              <span className="num">Selected {selectedItems.length} items</span>
+            </>
+          )}
+        </div>
+      </div>
+      <FilePath paths={CHAT_AWESOME_JSON} />
+      <Table
+        rowKey="url"
+        columns={columns}
+        scroll={{ x: 800 }}
+        dataSource={opData}
+        rowSelection={rowSelection}
+        pagination={TABLE_PAGINATION}
+      />
+      <Modal
+        open={isVisible}
+        title={modalTitle}
+        onCancel={hide}
+        onOk={handleOk}
+        destroyOnClose
+        maskClosable={false}
+      >
+        <AwesomeForm ref={formRef} record={opInfo?.opRecord} />
+      </Modal>
+    </div>
+  )
+}

src/view/download/index.tsx

@@ -105,7 +105,7 @@ export default function Download() {
                 okText="Yes"
                 cancelText="No"
               >
-                <Button>Batch delete</Button>
+                <Button>Delete</Button>
               </Popconfirm>
               <span className="num">Selected {selectedItems.length} items</span>
             </>

src/view/markdown/index.scss

@@ -1,6 +1,8 @@
 
 .md-task {
   margin-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
 
   .ant-breadcrumb-link {
     padding: 3px 5px;

src/view/markdown/index.tsx

@@ -6,12 +6,20 @@ import MarkdownEditor from '@/components/Markdown/Editor';
 import { fs, shell } from '@tauri-apps/api';
 
 import useInit from '@/hooks/useInit';
+import SplitIcon from '@/icons/SplitIcon';
 import { getPath } from '@/view/notes/config';
 import './index.scss';
 
+const modeMap: any = {
+  0: 'split',
+  1: 'md',
+  2: 'doc',
+}
+
 export default function Markdown() {
   const [filePath, setFilePath] = useState('');
   const [source, setSource] = useState('');
+  const [previewMode, setPreviewMode] = useState(0);
   const location = useLocation();
   const state = location?.state;
 
@@ -25,6 +33,12 @@ export default function Markdown() {
     await fs.writeTextFile(filePath, v);
   };
 
+  const handlePreview = () => {
+    let mode = previewMode + 1;
+    if (mode > 2) mode = 0;
+    setPreviewMode(mode);
+  };
+
   return (
     <>
       <div className="md-task">
@@ -36,8 +50,11 @@ export default function Markdown() {
             {filePath}
           </Breadcrumb.Item>
         </Breadcrumb>
+        <div>
+          <SplitIcon onClick={handlePreview} style={{ fontSize: 18, color: 'rgba(0,0,0,0.5)' }} />
+        </div>
       </div>
-      <MarkdownEditor value={source} onChange={handleChange} />
+      <MarkdownEditor value={source} onChange={handleChange} mode={modeMap[previewMode]} />
     </>
   );
 }

src/view/model/SyncCustom/Form.tsx

@@ -84,14 +84,14 @@ const SyncForm: ForwardRefRenderFunction<FormProps, SyncFormProps> = ({ record,
         <Form.Item
           label="Name"
           name="name"
-          rules={[{ required: true, message: 'Please input name!' }]}
+          rules={[{ required: true, message: 'Please enter a name!' }]}
         >
-          <Input placeholder="Please input name" {...DISABLE_AUTO_COMPLETE} />
+          <Input placeholder="Please enter a name" {...DISABLE_AUTO_COMPLETE} />
         </Form.Item>
         <Form.Item
           label="PATH"
           name="path"
-          rules={[{ required: true, message: 'Please input path!' }]}
+          rules={[{ required: true, message: 'Please enter the path!' }]}
           >
           <Input
             placeholder="YOUR_PATH"

src/view/model/SyncCustom/index.tsx

@@ -96,13 +96,16 @@ export default function SyncCustom() {
   const handleOk = () => {
     formRef.current?.form?.validateFields()
       .then((vals: Record<string, any>) => {
-        let data = [];
-        switch (opInfo.opType) {
-          case 'new': data = opAdd(vals); break;
-          case 'edit': data = opReplace(opInfo?.opRecord?.[opSafeKey], vals); break;
-          default: break;
+        if (opInfo.opType === 'new') {
+          const data = opAdd(vals);
+          modelSet(data);
+          message.success('Data added successfully');
+        }
+        if (opInfo.opType === 'edit') {
+          const data = opReplace(opInfo?.opRecord?.[opSafeKey], vals);
+          modelSet(data);
+          message.success('Data updated successfully');
         }
-        modelSet(data);
         hide();
       })
   };

src/view/model/UserCustom/Form.tsx

@@ -35,16 +35,16 @@ const UserCustomForm: ForwardRefRenderFunction<FormProps, UserCustomFormProps> =
       <Form.Item
         label="/{cmd}"
         name="cmd"
-        rules={[{ required: true, message: 'Please input {cmd}!' }]}
+        rules={[{ required: true, message: 'Please enter the {cmd}!' }]}
       >
-        <Input placeholder="Please input {cmd}" {...DISABLE_AUTO_COMPLETE} />
+        <Input placeholder="Please enter the {cmd}" {...DISABLE_AUTO_COMPLETE} />
       </Form.Item>
       <Form.Item
         label="Act"
         name="act"
-        rules={[{ required: true, message: 'Please input act!' }]}
+        rules={[{ required: true, message: 'Please enter the Act!' }]}
       >
-        <Input placeholder="Please input act" {...DISABLE_AUTO_COMPLETE} />
+        <Input placeholder="Please enter the Act" {...DISABLE_AUTO_COMPLETE} />
       </Form.Item>
       <Form.Item label="Tags" name="tags">
         <Tags value={record?.tags} />
@@ -55,9 +55,9 @@ const UserCustomForm: ForwardRefRenderFunction<FormProps, UserCustomFormProps> =
       <Form.Item
         label="Prompt"
         name="prompt"
-        rules={[{ required: true, message: 'Please input prompt!' }]}
+        rules={[{ required: true, message: 'Please enter a prompt!' }]}
       >
-        <Input.TextArea rows={4} placeholder="Please input prompt" {...DISABLE_AUTO_COMPLETE} />
+        <Input.TextArea rows={4} placeholder="Please enter a prompt" {...DISABLE_AUTO_COMPLETE} />
       </Form.Item>
     </Form>
   )

src/view/model/UserCustom/index.tsx

@@ -52,14 +52,6 @@ export default function LanguageModel() {
     }
   }, [opInfo.opTime])
 
-
-  useEffect(() => {
-    if (opInfo.opType === 'enable') {
-      const data = opReplace(opInfo?.opRecord?.[opSafeKey], opInfo?.opRecord);
-      modelCacheSet(data);
-    }
-  }, [opInfo.opTime]);
-
   const handleEnable = (isEnable: boolean) => {
     const data = opReplaceItems(selectedRowIDs, { enable: isEnable })
     modelCacheSet(data);

src/view/notes/index.tsx

@@ -95,7 +95,7 @@ export default function Notes() {
                 okText="Yes"
                 cancelText="No"
               >
-                <Button>Batch delete</Button>
+                <Button>Delete</Button>
               </Popconfirm>
               <span className="num">Selected {selectedItems.length} items</span>
             </>