chore: dashboard

This commit is contained in:
lencx
2023-01-24 18:34:31 +08:00
parent 4a7ee4dcf5
commit ba438b0640
12 changed files with 211 additions and 106 deletions

View File

@@ -1,6 +1,6 @@
import { FC } from 'react';
import { Link } from 'react-router-dom';
import { Form, Select, Tag, Tooltip } from 'antd';
import { Form, Select, Tag, Tooltip, Switch } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import useJson from '@/hooks/useJson';
@@ -11,34 +11,82 @@ interface SwitchOriginProps {
const SwitchOrigin: FC<SwitchOriginProps> = ({ name }) => {
const { json: list = [] } = useJson<any[]>(CHAT_AWESOME_JSON);
const form = Form.useFormInstance();
const labelName = `(${name === 'main' ? 'Main' : 'SystemTray'})`;
const dashboardName = `${name}_dashboard`;
const originName = `${name}_origin`;
const isEnable = Form.useWatch(dashboardName, form);
return (
<Form.Item
label={
<span>
Switch Origin ({name === 'origin' ? 'Main' : 'SystemTray'}){' '}
<Tooltip
title={
<div>
If you need to set a new URL as the application loading window, please add the URL
in the <Link to="/">Awesome</Link> menu and then select it.
</div>
}
>
<QuestionCircleOutlined style={{ color: '#1677ff' }} />
</Tooltip>
</span>
}
name={name}
>
<Select showSearch {...DISABLE_AUTO_COMPLETE} optionLabelProp="url">
{[{ title: 'ChatGPT', url: 'https://chat.openai.com' }, ...list].map((i) => (
<Select.Option key={i.url} label={i.title} value={i.url} title={i.url}>
<Tag color={i.title === 'ChatGPT' ? 'orange' : 'geekblue'}>{i.title}</Tag> {i.url}
</Select.Option>
))}
</Select>
</Form.Item>
<>
<Form.Item
label={
<span>
Dashboard {labelName}{' '}
<Tooltip
title={
<div>
<p>
<b>Set the URL dashboard as an application window.</b>
</p>
<p>
If this is enabled, the <Tag color="blue">Switch Origin {labelName}</Tag>{' '}
setting will be invalid.
</p>
<p>
If you want to add a new URL to the dashboard, add it in the{' '}
<Link to="/awesome">Awesome</Link> menu and make sure it is enabled.
</p>
</div>
}
>
<QuestionCircleOutlined style={{ color: '#1677ff' }} />
</Tooltip>
</span>
}
name={dashboardName}
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={
<span>
Switch Origin {labelName}{' '}
<Tooltip
title={
<div>
<p>
<b>Set a single URL as an application window.</b>
</p>
<p>
If you need to set a new URL as the application loading window, please add the
URL in the <Link to="/awesome">Awesome</Link> menu and then select it.
</p>
</div>
}
>
<QuestionCircleOutlined style={{ color: '#1677ff' }} />
</Tooltip>
</span>
}
name={originName}
>
<Select disabled={isEnable} showSearch {...DISABLE_AUTO_COMPLETE} optionLabelProp="url">
{[{ title: 'ChatGPT', url: 'https://chat.openai.com' }, ...list].map((i, idx) => (
<Select.Option
key={`${idx}_${i.url}`}
label={i.title}
value={i.url}
title={`${i.title}: ${i.url}`}
>
<Tag color={i.title === 'ChatGPT' ? 'orange' : 'geekblue'}>{i.title}</Tag> {i.url}
</Select.Option>
))}
</Select>
</Form.Item>
</>
);
};

View File

@@ -34,9 +34,7 @@ export default function Awesome() {
updateJson(data);
opInfo.resetRecord();
}
}, [opInfo.opType,
formRef]);
}, [opInfo.opType, formRef]);
const hide = () => {
setVisible(false);
@@ -54,18 +52,33 @@ export default function Awesome() {
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');
const idx = opData.findIndex((i) => i.url === vals.url);
if (idx === -1) {
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();
} else {
const data = opData[idx];
message.error(
<div style={{ width: 360 }}>
<div>
<b>
{data.title}: {data.url}
</b>
</div>
<div>This URL already exists, please edit it and try again.</div>
</div>,
);
}
if (opInfo.opType === 'edit') {
const data = opReplace(opInfo?.opRecord?.[opSafeKey], vals);
await updateJson(data);
message.success('Data updated successfully');
}
hide();
});
};

View File

@@ -5,6 +5,30 @@
overflow-y: auto;
padding: 15px;
&-no-data {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
font-weight: bold;
.icon {
color: #989898;
font-size: 24px;
}
.txt {
font-size: 12px;
a {
color: #1677ff;
cursor: pointer;
}
}
}
&.dark {
background-color: #000;
}

View File

@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react';
import clsx from 'clsx';
import { Row, Col, Card } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import { os, invoke } from '@tauri-apps/api';
import useInit from '@/hooks/useInit';
@@ -10,7 +11,7 @@ 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 [list, setList] = useState<Array<[string, Record<string, any>[]]>>();
const [hasClass, setClass] = useState(false);
const [theme, setTheme] = useState('');
@@ -23,6 +24,7 @@ export default function Dashboard() {
});
useEffect(() => {
if (!json) return;
const categories = new Map();
json?.forEach((i) => {
@@ -43,6 +45,23 @@ export default function Dashboard() {
});
};
if (!list) return null;
if (list?.length === 0) {
return (
<div className="dashboard-no-data">
<div className="icon">
<InboxOutlined style={{ fontSize: 80, marginBottom: 5 }} />
<br />
No data
</div>
<div className="txt">
Go to <a onClick={() => invoke('control_window')}>{'Control Center -> Awesome'}</a> to add
data
</div>
</div>
);
}
return (
<div className={clsx('dashboard', theme, { 'has-top-dom': hasClass })}>
<div>

View File

@@ -6,6 +6,49 @@ import { platform } from '@tauri-apps/api/os';
import useInit from '@/hooks/useInit';
import { DISABLE_AUTO_COMPLETE } from '@/utils';
export default function General() {
const [platformInfo, setPlatform] = useState('');
useInit(async () => {
setPlatform(await platform());
});
return (
<>
<Form.Item label="Stay On Top" name="stay_on_top" valuePropName="checked">
<Switch />
</Form.Item>
{platformInfo === 'darwin' && (
<Form.Item label="Titlebar" name="titlebar" valuePropName="checked">
<Switch />
</Form.Item>
)}
{platformInfo === 'darwin' && (
<Form.Item label="Hide Dock Icon" name="hide_dock_icon" valuePropName="checked">
<Switch />
</Form.Item>
)}
<Form.Item label="Theme" name="theme">
<Radio.Group>
<Radio value="Light">Light</Radio>
<Radio value="Dark">Dark</Radio>
{['darwin', 'windows'].includes(platformInfo) && <Radio value="System">System</Radio>}
</Radio.Group>
</Form.Item>
<Form.Item label={<AutoUpdateLabel />} name="auto_update">
<Radio.Group>
<Radio value="Prompt">Prompt</Radio>
<Radio value="Silent">Silent</Radio>
{/*<Radio value="Disable">Disable</Radio>*/}
</Radio.Group>
</Form.Item>
<Form.Item label={<GlobalShortcutLabel />} name="global_shortcut">
<Input placeholder="CmdOrCtrl+Shift+O" {...DISABLE_AUTO_COMPLETE} />
</Form.Item>
</>
);
}
const AutoUpdateLabel = () => {
return (
<span>
@@ -50,49 +93,3 @@ const GlobalShortcutLabel = () => {
</div>
);
};
export default function General() {
const [platformInfo, setPlatform] = useState('');
useInit(async () => {
setPlatform(await platform());
});
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>
{platformInfo === 'darwin' && (
<Form.Item label="Titlebar" name="titlebar" valuePropName="checked">
<Switch />
</Form.Item>
)}
{platformInfo === 'darwin' && (
<Form.Item label="Hide Dock Icon" name="hide_dock_icon" valuePropName="checked">
<Switch />
</Form.Item>
)}
<Form.Item label="Theme" name="theme">
<Radio.Group>
<Radio value="Light">Light</Radio>
<Radio value="Dark">Dark</Radio>
{['darwin', 'windows'].includes(platformInfo) && <Radio value="System">System</Radio>}
</Radio.Group>
</Form.Item>
<Form.Item label={<AutoUpdateLabel />} name="auto_update">
<Radio.Group>
<Radio value="Prompt">Prompt</Radio>
<Radio value="Silent">Silent</Radio>
{/*<Radio value="Disable">Disable</Radio>*/}
</Radio.Group>
</Form.Item>
<Form.Item label={<GlobalShortcutLabel />} name="global_shortcut">
<Input placeholder="CmdOrCtrl+Shift+O" {...DISABLE_AUTO_COMPLETE} />
</Form.Item>
</>
);
}

View File

@@ -36,7 +36,7 @@ export default function General() {
<Form.Item label={<PopupSearchLabel />} name="popup_search" valuePropName="checked">
<Switch />
</Form.Item>
<SwitchOrigin name="origin" />
<SwitchOrigin name="main" />
<Form.Item label="User Agent (Main)" name="ua_window">
<Input.TextArea
autoSize={{ minRows: 4, maxRows: 4 }}

View File

@@ -23,7 +23,7 @@ export default function General() {
<Form.Item label="Enable SystemTray" name="tray" valuePropName="checked">
<Switch />
</Form.Item>
<SwitchOrigin name="tray_origin" />
<SwitchOrigin name="tray" />
<Form.Item label={<UALabel />} name="ua_tray">
<Input.TextArea
autoSize={{ minRows: 4, maxRows: 4 }}