chore: dashboard

src/layout/index.tsx

@@ -13,13 +13,18 @@ const { Content, Footer, Sider } = Layout;
 
 export default function ChatLayout() {
   const [collapsed, setCollapsed] = useState(false);
+  const [isDashboard, setDashboard] = useState<any>(null);
   const [appInfo, setAppInfo] = useState<Record<string, any>>({});
   const location = useLocation();
   const [menuKey, setMenuKey] = useState(location.pathname);
   const go = useNavigate();
 
   useEffect(() => {
+    if (location.search === '?type=control') {
+      go('/awesome');
+    }
     setMenuKey(location.pathname);
+    setDashboard(location.pathname === '/');
   }, [location.pathname]);
 
   useInit(async () => {
@@ -36,69 +41,75 @@ export default function ChatLayout() {
 
   const isDark = appInfo.appTheme === 'dark';
 
+  if (isDashboard === null) return null;
+
   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: '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>
-
-          <Menu
-            selectedKeys={[menuKey]}
-            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"
+      {isDashboard ? (
+        <Routes />
+      ) : (
+        <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
+              selectedKeys={[menuKey]}
+              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

@@ -15,9 +15,11 @@
 }
 
 html,
-body {
+body,
+#root {
   padding: 0;
   margin: 0;
+  height: 100%;
 }
 
 .ant-table-selection-col,

src/routes.tsx

@@ -22,6 +22,7 @@ import SyncRecord from '@/view/model/SyncRecord';
 import Download from '@/view/download';
 import Notes from '@/view/notes';
 import Markdown from '@/view/markdown';
+import Dashboard from '@/view/dashboard';
 
 export type ChatRouteMetaObject = {
   label: string;
@@ -38,7 +39,7 @@ type ChatRouteObject = {
 
 export const routes: Array<ChatRouteObject> = [
   {
-    path: '/',
+    path: '/awesome',
     element: <Awesome />,
     meta: {
       label: 'Awesome',
@@ -121,6 +122,11 @@ export const routes: Array<ChatRouteObject> = [
       icon: <InfoCircleOutlined />,
     },
   },
+  {
+    path: '/',
+    element: <Dashboard />,
+    hideMenu: true,
+  },
 ];
 
 type MenuItem = Required<MenuProps>['items'][number];

src/view/dashboard/index.scss

@@ -0,0 +1,43 @@
+.dashboard {
+  position: fixed;
+  width: calc(100% - 30px);
+  height: calc(100% - 30px);
+  overflow-y: auto;
+  padding: 15px;
+
+  &.dark {
+    background-color: #000;
+  }
+
+  &.has-top-dom {
+    padding-top: 30px;
+  }
+
+  .group-item {
+    margin-bottom: 20px;
+
+    .title {
+      font-weight: bold;
+      font-size: 18px;
+      margin-bottom: 10px;
+    }
+
+    .item {
+      .ant-card-body {
+        padding: 10px;
+        text-align: center;
+        font-weight: 500;
+        font-size: 14px;
+      }
+
+      span {
+        display: block;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}

src/view/dashboard/index.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { Row, Col, Card } from 'antd';
+import { os, invoke } from '@tauri-apps/api';
+
+import useInit from '@/hooks/useInit';
+import useJson from '@/hooks/useJson';
+import { CHAT_AWESOME_JSON, CHAT_CONF_JSON, readJSON } from '@/utils';
+import './index.scss';
+
+export default function Dashboard() {
+  const { json } = useJson<Record<string, any>[]>(CHAT_AWESOME_JSON);
+  const [list, setList] = useState<Array<[string, Record<string, any>[]]>>([]);
+  const [hasClass, setClass] = useState(false);
+  const [theme, setTheme] = useState('');
+
+  useInit(async () => {
+    const getOS = await os.platform();
+    const conf = await readJSON(CHAT_CONF_JSON);
+    const appTheme = await invoke('get_theme');
+    setTheme(appTheme as string);
+    setClass(!conf?.titlebar && getOS === 'darwin');
+  });
+
+  useEffect(() => {
+    const categories = new Map();
+
+    json?.forEach((i) => {
+      if (!i.enable) return;
+      if (!categories.has(i.category)) {
+        categories.set(i.category, []);
+      }
+      categories.get(i?.category).push(i);
+    });
+    setList(Array.from(categories));
+  }, [json?.length]);
+
+  const handleLink = async (item: Record<string, any>) => {
+    await invoke('wa_window', {
+      label: btoa(item.url).replace(/[^a-zA-Z0-9]/g, ''),
+      title: item.title,
+      url: item.url,
+    });
+  };
+
+  return (
+    <div className={clsx('dashboard', theme, { 'has-top-dom': hasClass })}>
+      <div>
+        {list.map((i) => {
+          return (
+            <div key={i[0]} className="group-item">
+              <Card title={i[0]} size="small">
+                <Row className="list" gutter={[8, 8]}>
+                  {i[1].map((j, idx) => {
+                    return (
+                      <Col
+                        title={`${j?.title}: ${j?.url}`}
+                        key={`${idx}_${j?.url}`}
+                        xl={4}
+                        md={6}
+                        sm={8}
+                        xs={12}
+                      >
+                        <Card className="item" hoverable onClick={() => handleLink(j)}>
+                          <span>{j?.title}</span>
+                        </Card>
+                      </Col>
+                    );
+                  })}
+                </Row>
+              </Card>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/view/settings/General.tsx

@@ -60,6 +60,9 @@ export default function General() {
 
   return (
     <>
+      <Form.Item label="Dashboard" name="dashboard" valuePropName="checked">
+        <Switch />
+      </Form.Item>
       <Form.Item label="Stay On Top" name="stay_on_top" valuePropName="checked">
         <Switch />
       </Form.Item>