chore: update dashboard

This commit is contained in:
JustSong
2023-05-06 11:11:20 +08:00
parent 2587f1533b
commit c72c5fe102
3 changed files with 29 additions and 497 deletions
+4 -472
View File
@@ -1,14 +1,6 @@
import React, { useEffect, useState } from 'react';
import {
Button,
Divider,
Form,
Grid,
Header,
Message,
} from 'semantic-ui-react';
import { API, removeTrailingSlash, showError, showSuccess } from '../helpers';
import axios from 'axios';
import { Button, Form, Grid, Header, Message } from 'semantic-ui-react';
import { API, showError, showSuccess } from '../helpers';
const PushSetting = () => {
let [inputs, setInputs] = useState({
@@ -16,26 +8,6 @@ const PushSetting = () => {
username: '',
channel: '',
token: '',
wechat_test_account_id: '',
wechat_test_account_secret: '',
wechat_test_account_template_id: '',
wechat_test_account_open_id: '',
wechat_corp_account_id: '',
wechat_corp_account_agent_secret: '',
wechat_corp_account_agent_id: '',
wechat_corp_account_user_id: '',
wechat_corp_account_client_type: '',
corp_webhook_url: '',
lark_webhook_url: '',
lark_webhook_secret: '',
ding_webhook_url: '',
ding_webhook_secret: '',
bark_server: '',
bark_secret: '',
client_secret: '',
telegram_bot_token: '',
telegram_chat_id: '',
discord_webhook_url: '',
});
let [loading, setLoading] = useState(false);
@@ -50,15 +22,9 @@ const PushSetting = () => {
if (data.channel === '') {
data.channel = 'email';
}
if (data.wechat_corp_account_client_type === '') {
data.wechat_corp_account_client_type = 'plugin';
}
if (data.token === ' ') {
data.token = '';
}
if (data.bark_server === '') {
data.bark_server = 'https://api.day.app';
}
setInputs(data);
} else {
showError(message);
@@ -80,47 +46,6 @@ const PushSetting = () => {
data.token = ' ';
}
break;
case 'test':
data.wechat_test_account_id = inputs.wechat_test_account_id;
data.wechat_test_account_secret = inputs.wechat_test_account_secret;
data.wechat_test_account_template_id =
inputs.wechat_test_account_template_id;
data.wechat_test_account_open_id = inputs.wechat_test_account_open_id;
break;
case 'corp_app':
data.wechat_corp_account_id = inputs.wechat_corp_account_id;
data.wechat_corp_account_agent_secret =
inputs.wechat_corp_account_agent_secret;
data.wechat_corp_account_agent_id = inputs.wechat_corp_account_agent_id;
data.wechat_corp_account_user_id = inputs.wechat_corp_account_user_id;
data.wechat_corp_account_client_type =
inputs.wechat_corp_account_client_type;
break;
case 'corp':
data.corp_webhook_url = inputs.corp_webhook_url;
break;
case 'lark':
data.lark_webhook_url = inputs.lark_webhook_url;
data.lark_webhook_secret = inputs.lark_webhook_secret;
break;
case 'ding':
data.ding_webhook_url = inputs.ding_webhook_url;
data.ding_webhook_secret = inputs.ding_webhook_secret;
break;
case 'bark':
data.bark_server = removeTrailingSlash(inputs.bark_server);
data.bark_secret = inputs.bark_secret;
break;
case 'client':
data.client_secret = inputs.client_secret;
break;
case 'telegram':
data.telegram_bot_token = inputs.telegram_bot_token;
data.telegram_chat_id = inputs.telegram_chat_id;
break;
case 'discord':
data.discord_webhook_url = inputs.discord_webhook_url;
break;
default:
showError(`无效的参数:${which}`);
return;
@@ -134,9 +59,9 @@ const PushSetting = () => {
}
};
const test = async (type) => {
const test = async () => {
let res = await API.get(
`/push/${inputs.username}?token=${inputs.token}&channel=${type}&title=消息推送服务&description=配置成功!`
`/push/${inputs.username}?token=${inputs.token}&channel=${inputs.channel}&title=消息推送服务&description=配置成功!`
);
const { success, message } = res.data;
if (success) {
@@ -146,30 +71,6 @@ const PushSetting = () => {
}
};
const getTelegramChatId = async () => {
if (inputs.telegram_bot_token === '') {
showError('请先输入 Telegram 机器人令牌!');
return;
}
let res = await axios.get(
`https://api.telegram.org/bot${inputs.telegram_bot_token}/getUpdates`
);
const { ok } = res.data;
if (ok) {
let result = res.data.result;
if (result.length === 0) {
showError(`请先向你的机器人发送一条任意消息!`);
} else {
let id = result[0]?.message?.chat?.id;
id = id.toString();
setInputs((inputs) => ({ ...inputs, telegram_chat_id: id }));
showSuccess('会话 ID 获取成功,请点击保存按钮保存!');
}
} else {
showError(`发生错误:${res.description}`);
}
};
return (
<Grid columns={1}>
<Grid.Column>
@@ -209,375 +110,6 @@ const PushSetting = () => {
保存
</Button>
<Button onClick={() => test('')}>测试</Button>
<Divider />
<Header as='h3'>
邮箱设置email
<Header.Subheader>通过邮件进行推送</Header.Subheader>
</Header>
<Message>
邮件推送方式email需要设置邮箱请前往个人设置页面绑定邮箱地址
</Message>
<Button onClick={() => test('email')}>测试</Button>
<Divider />
<Header as='h3'>
微信测试号设置test
<Header.Subheader>
通过微信测试号进行推送点击前往配置
<a
target='_blank'
href='https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index'
>
微信公众平台接口测试帐号
</a>
</Header.Subheader>
</Header>
<Message>
需要新增测试模板模板标题推荐填写为消息推送模板内容必须填写为
{' {{'}text.DATA{'}}'}
</Message>
<Form.Group widths={3}>
<Form.Input
label='测试号 ID'
name='wechat_test_account_id'
onChange={handleInputChange}
autoComplete='off'
value={inputs.wechat_test_account_id}
placeholder='测试号信息 -> appID'
/>
<Form.Input
label='测试号密钥'
name='wechat_test_account_secret'
type='password'
onChange={handleInputChange}
autoComplete='off'
value={inputs.wechat_test_account_secret}
placeholder='测试号信息 -> appsecret'
/>
<Form.Input
label='测试模板 ID'
name='wechat_test_account_template_id'
onChange={handleInputChange}
autoComplete='off'
value={inputs.wechat_test_account_template_id}
placeholder='模板消息接口 -> 模板 ID'
/>
</Form.Group>
<Form.Group widths={3}>
<Form.Input
label='用户 Open ID'
name='wechat_test_account_open_id'
onChange={handleInputChange}
autoComplete='off'
value={inputs.wechat_test_account_open_id}
placeholder='扫描测试号二维码 -> 用户列表 -> 微信号'
/>
</Form.Group>
<Button onClick={() => submit('test')} loading={loading}>
保存
</Button>
<Button onClick={() => test('test')}>测试</Button>
<Divider />
<Header as='h3'>
企业微信应用号设置corp_app
<Header.Subheader>
通过企业微信应用号进行推送点击前往配置
<a
target='_blank'
href='https://work.weixin.qq.com/wework_admin/frame#apps'
>
企业微信应用管理
</a>
</Header.Subheader>
</Header>
<Message>
注意企业微信要求配置可信 IP步骤应用管理 -> 自建 -> 创建应用 ->
应用设置页面下拉中找到企业可信 IP点击配置 -> 设置可信域名 ->
可调用
JS-SDK跳转小程序的可信域名下面填写一个域名然后点击申请校验域名根据提示完成校验
-> 之后填写服务器 IP 地址 IP
地址是消息推送服务所部署在的服务器的 IP
地址未必是上面校验域名中记录的 IP 地址
</Message>
<Form.Group widths={3}>
<Form.Input
label='企业 ID'
name='wechat_corp_account_id'
onChange={handleInputChange}
autoComplete='off'
value={inputs.wechat_corp_account_id}
placeholder='我的企业 -> 企业信息 -> 企业 ID'
/>
<Form.Input
label='应用 AgentId'
name='wechat_corp_account_agent_id'
onChange={handleInputChange}
autoComplete='off'
value={inputs.wechat_corp_account_agent_id}
placeholder='应用管理 -> 自建 -> 创建应用 -> AgentId'
/>
<Form.Input
label='应用 Secret'
name='wechat_corp_account_agent_secret'
type='password'
onChange={handleInputChange}
autoComplete='off'
value={inputs.wechat_corp_account_agent_secret}
placeholder='应用管理 -> 自建 -> 创建应用 -> Secret'
/>
</Form.Group>
<Form.Group widths={3}>
<Form.Input
label='用户账号'
name='wechat_corp_account_user_id'
onChange={handleInputChange}
autoComplete='off'
value={inputs.wechat_corp_account_user_id}
placeholder='通讯录 -> 点击姓名 -> 账号'
/>
<Form.Select
label='微信企业号客户端类型'
name='wechat_corp_account_client_type'
options={[
{
key: 'plugin',
text: '微信中的企业微信插件',
value: 'plugin',
},
{ key: 'app', text: '企业微信 APP', value: 'app' },
]}
value={inputs.wechat_corp_account_client_type}
onChange={handleInputChange}
/>
</Form.Group>
<Button onClick={() => submit('corp_app')} loading={loading}>
保存
</Button>
<Button onClick={() => test('corp_app')}>测试</Button>
<Divider />
<Header as='h3'>
企业微信群机器人设置corp
<Header.Subheader>
通过企业微信群机器人进行推送配置流程选择一个群聊 -> 设置 ->
群机器人 -> 添加 -> 新建 -> 输入名字点击添加 -> 点击复制 Webhook
地址
</Header.Subheader>
</Header>
<Form.Group widths={2}>
<Form.Input
label='Webhook 地址'
name='corp_webhook_url'
onChange={handleInputChange}
autoComplete='off'
value={inputs.corp_webhook_url}
placeholder='在此填写企业微信提供的 Webhook 地址'
/>
</Form.Group>
<Button onClick={() => submit('corp')} loading={loading}>
保存
</Button>
<Button onClick={() => test('corp')}>测试</Button>
<Divider />
<Header as='h3'>
飞书群机器人设置lark
<Header.Subheader>
通过飞书群机器人进行推送飞书桌面客户端的配置流程选择一个群聊
-> 设置 -> 群机器人 -> 添加机器人 -> 自定义机器人 -> 添加
<strong>注意选中签名校验</strong>
<a
target='_blank'
href='https://open.feishu.cn/document/ukTMukTMukTM/ucTM5YjL3ETO24yNxkjN'
>
飞书开放文档
</a>
</Header.Subheader>
</Header>
<Form.Group widths={2}>
<Form.Input
label='Webhook 地址'
name='lark_webhook_url'
onChange={handleInputChange}
autoComplete='off'
value={inputs.lark_webhook_url}
placeholder='在此填写飞书提供的 Webhook 地址'
/>
<Form.Input
label='签名校验密钥'
name='lark_webhook_secret'
type='password'
onChange={handleInputChange}
autoComplete='off'
value={inputs.lark_webhook_secret}
placeholder='在此填写飞书提供的签名校验密钥'
/>
</Form.Group>
<Button onClick={() => submit('lark')} loading={loading}>
保存
</Button>
<Button onClick={() => test('lark')}>测试</Button>
<Divider />
<Header as='h3'>
钉钉群机器人设置ding
<Header.Subheader>
通过钉钉群机器人进行推送钉钉桌面客户端的配置流程选择一个群聊
-> 群设置 -> 智能群助手 -> 添加机器人点击右侧齿轮图标 ->
自定义 -> 添加
<strong>注意选中加密</strong>
<a
target='_blank'
href='https://open.dingtalk.com/document/robots/custom-robot-access'
>
钉钉开放文档
</a>
</Header.Subheader>
</Header>
<Form.Group widths={2}>
<Form.Input
label='Webhook 地址'
name='ding_webhook_url'
onChange={handleInputChange}
autoComplete='off'
value={inputs.ding_webhook_url}
placeholder='在此填写钉钉提供的 Webhook 地址'
/>
<Form.Input
label='签名校验密钥'
name='ding_webhook_secret'
type='password'
onChange={handleInputChange}
autoComplete='off'
value={inputs.ding_webhook_secret}
placeholder='在此填写钉钉提供的签名校验密钥'
/>
</Form.Group>
<Button onClick={() => submit('ding')} loading={loading}>
保存
</Button>
<Button onClick={() => test('ding')}>测试</Button>
<Divider />
<Header as='h3'>
Bark 设置bark
<Header.Subheader>
通过 Bark 进行推送下载 Bark 后按提示注册设备之后会看到一个
URL例如 <code>https://api.day.app/wrsVSDRANDOM/Body Text</code>
其中 <code>wrsVSDRANDOM</code> key
</Header.Subheader>
</Header>
<Form.Group widths={2}>
<Form.Input
label='服务器地址'
name='bark_server'
onChange={handleInputChange}
autoComplete='off'
value={inputs.bark_server}
placeholder='在此填写 Bark 服务器地址'
/>
<Form.Input
label='推送 key'
name='bark_secret'
type='password'
onChange={handleInputChange}
autoComplete='off'
value={inputs.bark_secret}
placeholder='在此填写 Bark 推送 key'
/>
</Form.Group>
<Button onClick={() => submit('bark')} loading={loading}>
保存
</Button>
<Button onClick={() => test('bark')}>测试</Button>
<Divider />
<Header as='h3'>
WebSocket 客户端设置client
<Header.Subheader>
通过 WebSocket
客户端进行推送可以使用官方客户端实现或者根据协议自行实现官方客户端
<a
target='_blank'
href='https://github.com/songquanpeng/personal-assistant'
>
详见此处
</a>
</Header.Subheader>
</Header>
<Form.Group widths={2}>
<Form.Input
label='客户端连接密钥'
name='client_secret'
type='password'
onChange={handleInputChange}
autoComplete='off'
value={inputs.client_secret}
placeholder='在此设置客户端连接密钥'
/>
</Form.Group>
<Button onClick={() => submit('client')} loading={loading}>
保存
</Button>
<Button onClick={() => test('client')}>测试</Button>
<Divider />
<Header as='h3'>
Telegram 机器人设置telegram
<Header.Subheader>
通过 Telegram 机器人进行消息推送首先向
<a href='https://t.me/botfather' target='_blank'>
{' '}
Bot Father{' '}
</a>
申请创建一个新的机器人之后在下方输入获取到的令牌然后点击你的机器人随便发送一条消息之后点击下方的获取会话
ID按钮系统将自动为你填写会话
ID最后点击保存按钮保存设置即可
</Header.Subheader>
</Header>
<Form.Group widths={2}>
<Form.Input
label='Telegram 机器人令牌'
name='telegram_bot_token'
type='password'
onChange={handleInputChange}
autoComplete='off'
value={inputs.telegram_bot_token}
placeholder='在此设置 Telegram 机器人令牌'
/>
<Form.Input
label='Telegram 会话 ID'
name='telegram_chat_id'
type='text'
onChange={handleInputChange}
autoComplete='off'
value={inputs.telegram_chat_id}
placeholder='在此设置 Telegram 会话 ID'
/>
</Form.Group>
<Button onClick={getTelegramChatId} loading={loading}>
获取会话 ID
</Button>
<Button onClick={() => submit('telegram')} loading={loading}>
保存
</Button>
<Button onClick={() => test('telegram')}>测试</Button>
<Divider />
<Header as='h3'>
Discord 群机器人设置discord
<Header.Subheader>
通过 Discord 群机器人进行推送配置流程选择一个 channel -> 设置
-> 整合 -> 创建 Webhook -> 点击复制 Webhook URL
</Header.Subheader>
</Header>
<Form.Group widths={2}>
<Form.Input
label='Webhook 地址'
name='discord_webhook_url'
onChange={handleInputChange}
autoComplete='off'
value={inputs.discord_webhook_url}
placeholder='在此填写 Discord 提供的 Webhook 地址'
/>
</Form.Group>
<Button onClick={() => submit('discord')} loading={loading}>
保存
</Button>
<Button onClick={() => test('discord')}>测试</Button>
</Form>
</Grid.Column>
</Grid>
+18 -18
View File
@@ -112,8 +112,8 @@ const SystemSetting = () => {
await updateOption('SMTPAccount', inputs.SMTPAccount);
}
if (
originInputs['SMTPPort'] !== inputs.SMTPPort &&
inputs.SMTPPort !== ''
originInputs['SMTPPort'] !== inputs.SMTPPort &&
inputs.SMTPPort !== ''
) {
await updateOption('SMTPPort', inputs.SMTPPort);
}
@@ -262,23 +262,23 @@ const SystemSetting = () => {
label='SMTP 服务器地址'
name='SMTPServer'
onChange={handleInputChange}
autoComplete='off'
autoComplete='new-password'
value={inputs.SMTPServer}
placeholder='例如:smtp.qq.com'
/>
<Form.Input
label='SMTP 端口'
name='SMTPPort'
onChange={handleInputChange}
autoComplete='off'
value={inputs.SMTPPort}
placeholder='默认: 587'
label='SMTP 端口'
name='SMTPPort'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.SMTPPort}
placeholder='默认: 587'
/>
<Form.Input
label='SMTP 账户'
name='SMTPAccount'
onChange={handleInputChange}
autoComplete='off'
autoComplete='new-password'
value={inputs.SMTPAccount}
placeholder='通常是邮箱地址'
/>
@@ -287,7 +287,7 @@ const SystemSetting = () => {
name='SMTPToken'
onChange={handleInputChange}
type='password'
autoComplete='off'
autoComplete='new-password'
value={inputs.SMTPToken}
placeholder='敏感信息不会发送到前端显示'
/>
@@ -314,7 +314,7 @@ const SystemSetting = () => {
label='GitHub Client ID'
name='GitHubClientId'
onChange={handleInputChange}
autoComplete='off'
autoComplete='new-password'
value={inputs.GitHubClientId}
placeholder='输入你注册的 GitHub OAuth APP 的 ID'
/>
@@ -323,7 +323,7 @@ const SystemSetting = () => {
name='GitHubClientSecret'
onChange={handleInputChange}
type='password'
autoComplete='off'
autoComplete='new-password'
value={inputs.GitHubClientSecret}
placeholder='敏感信息不会发送到前端显示'
/>
@@ -351,7 +351,7 @@ const SystemSetting = () => {
name='WeChatServerAddress'
placeholder='例如:https://yourdomain.com'
onChange={handleInputChange}
autoComplete='off'
autoComplete='new-password'
value={inputs.WeChatServerAddress}
/>
<Form.Input
@@ -359,7 +359,7 @@ const SystemSetting = () => {
name='WeChatServerToken'
type='password'
onChange={handleInputChange}
autoComplete='off'
autoComplete='new-password'
value={inputs.WeChatServerToken}
placeholder='敏感信息不会发送到前端显示'
/>
@@ -367,7 +367,7 @@ const SystemSetting = () => {
label='微信公众号二维码图片链接'
name='WeChatAccountQRCodeImageURL'
onChange={handleInputChange}
autoComplete='off'
autoComplete='new-password'
value={inputs.WeChatAccountQRCodeImageURL}
placeholder='输入一个图片链接'
/>
@@ -391,7 +391,7 @@ const SystemSetting = () => {
label='Turnstile Site Key'
name='TurnstileSiteKey'
onChange={handleInputChange}
autoComplete='off'
autoComplete='new-password'
value={inputs.TurnstileSiteKey}
placeholder='输入你注册的 Turnstile Site Key'
/>
@@ -400,7 +400,7 @@ const SystemSetting = () => {
name='TurnstileSecretKey'
onChange={handleInputChange}
type='password'
autoComplete='off'
autoComplete='new-password'
value={inputs.TurnstileSecretKey}
placeholder='敏感信息不会发送到前端显示'
/>
+7 -7
View File
@@ -60,7 +60,7 @@ const EditUser = () => {
<>
<Segment loading={loading}>
<Header as='h3'>更新用户信息</Header>
<Form autoComplete='off'>
<Form autoComplete='new-password'>
<Form.Field>
<Form.Input
label='用户名'
@@ -68,7 +68,7 @@ const EditUser = () => {
placeholder={'请输入新的用户名'}
onChange={handleInputChange}
value={username}
autoComplete='off'
autoComplete='new-password'
/>
</Form.Field>
<Form.Field>
@@ -79,7 +79,7 @@ const EditUser = () => {
placeholder={'请输入新的密码'}
onChange={handleInputChange}
value={password}
autoComplete='off'
autoComplete='new-password'
/>
</Form.Field>
<Form.Field>
@@ -89,7 +89,7 @@ const EditUser = () => {
placeholder={'请输入新的显示名称'}
onChange={handleInputChange}
value={display_name}
autoComplete='off'
autoComplete='new-password'
/>
</Form.Field>
<Form.Field>
@@ -97,7 +97,7 @@ const EditUser = () => {
label='已绑定的 GitHub 账户'
name='github_id'
value={github_id}
autoComplete='off'
autoComplete='new-password'
placeholder='此项只读,需要用户通过个人设置页面的相关绑定按钮进行绑定,不可直接修改'
readOnly
/>
@@ -107,7 +107,7 @@ const EditUser = () => {
label='已绑定的微信账户'
name='wechat_id'
value={wechat_id}
autoComplete='off'
autoComplete='new-password'
placeholder='此项只读,需要用户通过个人设置页面的相关绑定按钮进行绑定,不可直接修改'
readOnly
/>
@@ -117,7 +117,7 @@ const EditUser = () => {
label='已绑定的邮箱账户'
name='email'
value={email}
autoComplete='off'
autoComplete='new-password'
placeholder='此项只读,需要用户通过个人设置页面的相关绑定按钮进行绑定,不可直接修改'
readOnly
/>