chore: export

src/layout/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import {Layout, Menu, Tooltip, ConfigProvider, theme, Tag } from 'antd';
+import { Layout, Menu, Tooltip, ConfigProvider, theme, Tag } from 'antd';
 import { SyncOutlined } from '@ant-design/icons';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { getName, getVersion } from '@tauri-apps/api/app';
@@ -29,58 +29,61 @@ export default function ChatLayout() {
     await invoke('run_check_update', { silent: false, hasMsg: true });
   }
 
-  return (
-    <ConfigProvider theme={{algorithm: appInfo.appTheme === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm}}>
-    <Layout style={{ minHeight: '100vh' }} hasSider>
-      <Sider
-        theme={appInfo.appTheme === "dark" ? "dark" : "light"}
-        collapsible
-        collapsed={collapsed}
-        onCollapse={(value) => setCollapsed(value)}
-        style={{
-          overflow: 'auto',
-          height: '100vh',
-          position: 'fixed',
-          left: 0,
-          top: 0,
-          bottom: 0,
-          zIndex: 999,
-        }}
-      >
-        <div className="chat-logo"><img src="/logo.png" /></div>
-        <div className="chat-info">
-          <Tag>{appInfo.appName}</Tag>
-          <Tag>
-              <span style={{ marginRight: 5 }}>{appInfo.appVersion}</span>
-              <Tooltip title="click to check update">
-                <a onClick={checkAppUpdate}><SyncOutlined /></a>
-              </Tooltip>
-          </Tag>
-        </div>
+  const isDark = appInfo.appTheme === "dark";
 
-        <Menu
-          defaultSelectedKeys={[location.pathname]}
-          mode="inline"
-          theme={ appInfo.appTheme === "dark" ? "dark" : "light" }
-          inlineIndent={12}
-          items={menuItems}
-          defaultOpenKeys={['/model']}
-          onClick={(i) => go(i.key)}
-        />
-      </Sider>
-      <Layout className="chat-layout" style={{ marginLeft: collapsed ? 80 : 200, transition: 'margin-left 300ms ease-out' }}>
-        <Content
-          className="chat-container"
+  return (
+    <ConfigProvider theme={{ algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm }}>
+      <Layout style={{ minHeight: '100vh' }} hasSider>
+        <Sider
+          theme={isDark ? "dark" : "light"}
+          collapsible
+          collapsed={collapsed}
+          onCollapse={(value) => setCollapsed(value)}
           style={{
-            overflow: 'inherit'
+            overflow: 'auto',
+            height: '100vh',
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            bottom: 0,
+            zIndex: 999,
           }}
         >
-          <Routes />
-        </Content>
-        <Footer style={{ textAlign: 'center' }}>
-          <a href="https://github.com/lencx/chatgpt" target="_blank">ChatGPT Desktop Application</a> ©2022 Created by lencx</Footer>
+          <div className="chat-logo"><img src="/logo.png" /></div>
+          <div className="chat-info">
+            <Tag>{appInfo.appName}</Tag>
+            <Tag>
+                <span style={{ marginRight: 5 }}>{appInfo.appVersion}</span>
+                <Tooltip title="click to check update">
+                  <a onClick={checkAppUpdate}><SyncOutlined /></a>
+                </Tooltip>
+            </Tag>
+          </div>
+
+          <Menu
+            defaultSelectedKeys={[location.pathname]}
+            mode="inline"
+            theme={ appInfo.appTheme === "dark" ? "dark" : "light" }
+            inlineIndent={12}
+            items={menuItems}
+            defaultOpenKeys={['/model']}
+            onClick={(i) => go(i.key)}
+          />
+        </Sider>
+        <Layout className="chat-layout" style={{ marginLeft: collapsed ? 80 : 200, transition: 'margin-left 300ms ease-out' }}>
+          <Content
+            className="chat-container"
+            style={{
+              overflow: 'inherit'
+            }}
+          >
+            <Routes />
+          </Content>
+          <Footer style={{ textAlign: 'center' }}>
+            <a href="https://github.com/lencx/chatgpt" target="_blank">ChatGPT Desktop Application</a> ©2022 Created by lencx
+          </Footer>
+        </Layout>
       </Layout>
-    </Layout>
     </ConfigProvider>
   );
 };

src/main.scss

@@ -51,6 +51,7 @@ html, body {
   }
 }
 
+.chat-file-path,
 .chat-sync-path {
   font-size: 12px;
   font-weight: 500;

src/routes.tsx

@@ -5,6 +5,7 @@ import {
   SyncOutlined,
   FileSyncOutlined,
   UserOutlined,
+  DownloadOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
 
@@ -13,6 +14,7 @@ import UserCustom from '@/view/model/UserCustom';
 import SyncPrompts from '@/view/model/SyncPrompts';
 import SyncCustom from '@/view/model/SyncCustom';
 import SyncRecord from '@/view/model/SyncRecord';
+import Download from '@/view/download';
 
 export type ChatRouteMetaObject = {
   label: string;
@@ -36,6 +38,14 @@ export const routes: Array<ChatRouteObject> = [
       icon: <DesktopOutlined />,
     },
   },
+  {
+    path: 'download',
+    element: <Download />,
+    meta: {
+      label: 'Download',
+      icon: <DownloadOutlined />,
+    },
+  },
   {
     path: '/model',
     meta: {
@@ -51,6 +61,7 @@ export const routes: Array<ChatRouteObject> = [
           icon: <UserOutlined />,
         },
       },
+      // --- Sync
       {
         path: 'sync-prompts',
         element: <SyncPrompts />,
@@ -72,7 +83,7 @@ export const routes: Array<ChatRouteObject> = [
         element: <SyncRecord />,
         hideMenu: true,
       },
-    ]
+    ],
   },
 ];
 

src/view/download/config.tsx

@@ -0,0 +1,38 @@
+import { Switch, Tag, Tooltip, Space, Popconfirm } from 'antd';
+
+export const syncColumns = () => [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    fixed: 'left',
+    // width: 120,
+    key: 'name',
+  },
+  {
+    title: 'Type',
+    dataIndex: 'type',
+    key: 'type',
+    render: () => {
+      return <Tag>{}</Tag>;
+    }
+    // width: 200,
+  },
+  {
+    title: 'Action',
+    render: (_: any, row: any, actions: any) => {
+      return (
+        <Space>
+          <a>View</a>
+          <Popconfirm
+            title="Are you sure to delete this file?"
+            onConfirm={() => actions.setRecord(row, 'delete')}
+            okText="Yes"
+            cancelText="No"
+          >
+            <a>Delete</a>
+          </Popconfirm>
+        </Space>
+      )
+    }
+  }
+];

src/view/download/index.scss

@@ -0,0 +1,12 @@
+.chat-table-tip, .chat-table-btns {
+  display: flex;
+  justify-content: space-between;
+}
+
+.chat-table-btns {
+  margin-bottom: 5px;
+
+  .num {
+    margin-left: 10px;
+  }
+}

src/view/download/index.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { Table } from 'antd';
+import { path, shell } from '@tauri-apps/api';
+
+import useInit from '@/hooks/useInit';
+import useColumns from '@/hooks/useColumns';
+import useTable, { TABLE_PAGINATION } from '@/hooks/useTable';
+import { chatRoot } from '@/utils';
+import { syncColumns } from './config';
+import './index.scss';
+
+export default function SyncPrompts() {
+  const { rowSelection, selectedRowIDs } = useTable();
+  const [downloadPath, setDownloadPath] = useState('');
+  const { columns, ...opInfo } = useColumns(syncColumns());
+
+  useInit(async () => {
+    setDownloadPath(await path.join(await chatRoot(), 'download'));
+  });
+
+  return (
+    <div>
+      <div className="chat-table-tip">
+        <div className="chat-file-path">
+          <div>PATH: <a onClick={() => shell.open(downloadPath)} title={downloadPath}>{downloadPath}</a></div>
+        </div>
+      </div>
+      <Table
+        rowKey="name"
+        columns={columns}
+        scroll={{ x: 'auto' }}
+        dataSource={[]}
+        rowSelection={rowSelection}
+        pagination={TABLE_PAGINATION}
+      />
+    </div>
+  )
+}