code snippet web interface

src/layout.tsx

@@ -2,7 +2,15 @@ import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {Redirect, Route, Switch, useHistory} from 'react-router-dom';
 import {Breadcrumb, Layout, Menu, Spin} from '@arco-design/web-react';
 import cs from 'classnames';
-import {IconCloud, IconDashboard, IconEdit, IconMenuFold, IconMenuUnfold, IconUser,} from '@arco-design/web-react/icon';
+import {
+  IconCloud,
+  IconCode,
+  IconDashboard,
+  IconEdit,
+  IconMenuFold,
+  IconMenuUnfold,
+  IconUser,
+} from '@arco-design/web-react/icon';
 import {useSelector} from 'react-redux';
 import qs from 'query-string';
 import NProgress from 'nprogress';
@@ -29,8 +37,10 @@ function getIconFromKey(key) {
     return <IconCloud className={styles.icon}/>;
   case 'personal':
     return <IconUser className={styles.icon}/>;
-  case'messages-edit':
-    return <IconEdit className={styles.icon}/>
+  case 'messages-edit':
+    return <IconEdit className={styles.icon}/>;
+  case 'code-snippet':
+    return <IconCode className={styles.icon}/>;
   default:
     return <div className={styles['icon-empty']}/>;
   }

src/locale/zh-CN.json

@@ -15,6 +15,7 @@
   "menu.yggdrasil.players": "玩家信息",
   "menu.yggdrasil.settings": "鉴权设置",
   "menu.messages-edit": "消息段编辑",
+  "menu.code-snippet": "代码片段",
   "navbar.logout": "退出登录",
   "settings.title": "页面配置",
   "settings.themeColor": "主题色",
@@ -79,6 +80,13 @@
   "message-edit.reset-confirm": "确认重置回默认值?",
   "message-edit.resetted": "已重置为默认值",
   "message-edit.submitted": "已修改",
+  "code-snippet.key": "片段索引",
+  "code-snippet.name": "片段名",
+  "code-snippet.defaultCode": "默认代码",
+  "code-snippet.currentCode": "当前代码",
+  "code-snippet.reset": "重置为默认行为",
+  "code-snippet.reset-confirm": "确认重置回默认行为?",
+  "code-snippet.resetted": "已重置为默认行为",
   "message.tab.title.message": "消息",
   "message.tab.title.notice": "通知",
   "message.tab.title.todo": "待办",

src/pages/code-snippet/index.tsx

@@ -0,0 +1,173 @@
+import React, {useEffect, useState} from 'react';
+import {
+  Button,
+  Card,
+  Form,
+  Input,
+  Message,
+  Modal,
+  Notification,
+  Spin,
+  Table,
+  TableColumnProps,
+  Typography
+} from '@arco-design/web-react';
+import axios from "axios";
+import {useTranslation} from "react-i18next";
+import {actionConfirm} from "@/utils/actionConfirm";
+
+function EntryEditor({record}) {
+  const {t} = useTranslation()
+  const [visible, setVisible] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [form] = Form.useForm();
+  const [processing, setProcessing] = useState(false)
+
+
+  async function doLoad() {
+    setVisible(true)
+    setLoading(true)
+    try {
+      const serverReply = await axios.get('/api/code-snippets/' + record.key)
+      if (serverReply.status != 200) {
+        Notification.error(serverReply.data.message)
+        return
+      }
+
+      form.setFieldsValue(serverReply.data.data)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function doReset() {
+    setProcessing(true);
+    try {
+      if (!await actionConfirm({title: t('code-snippet.reset-confirm')})) {
+        return
+      }
+      await axios.patch('/api/code-snippets/' + record.key, {code: ''})
+      Message.info(t('code-snippet.resetted'))
+      setVisible(false)
+    } catch (e) {
+      Message.warning(String(e))
+    } finally {
+      setProcessing(false)
+    }
+  }
+
+  async function doSubmit() {
+    const data = await form.validate()
+    setProcessing(true);
+    try {
+      const serverReply = await axios.patch('/api/code-snippets/' + record.key, {code: data.currentCode})
+      if (serverReply.status != 200) {
+        Notification.error(serverReply.data.message)
+        return
+      }
+
+      const passed = serverReply.data.data.status == 'passed'
+      const content = <>
+        <Typography.Text>Status: {serverReply.data.data.status}</Typography.Text>
+        <Input.TextArea style={{height: passed ? 100 : 400}} defaultValue={serverReply.data.data.log}/>
+        <Input.TextArea style={{height: passed ? 100 : 400}} defaultValue={serverReply.data.data.error}/>
+      </>
+
+      if (passed) {
+        Notification.info({content, style: {width: 800}})
+      } else {
+        Modal.error({content, style: {width: 1200}})
+      }
+    } catch (e) {
+      Message.warning(String(e))
+    } finally {
+      setProcessing(false)
+    }
+  }
+
+  return <>
+    <Button onClick={doLoad}>{t('message.edit')}</Button>
+    <Modal
+      visible={visible}
+      onCancel={() => setVisible(false)}
+      title={record.key}
+      style={{width: 800}}
+      footer={(a, b) => <>
+        {a}
+        <Button onClick={doReset}>{t('code-snippet.reset')}</Button>
+        {b}
+      </>}
+      confirmLoading={processing}
+      onConfirm={doSubmit}
+      modalRender={node => <Spin loading={loading}>{node}</Spin>}
+    >
+      <Form form={form}>
+        <Form.Item label={t('code-snippet.defaultCode')} field='defaultCode' disabled>
+          <Input.TextArea style={{minHeight: 120}}/>
+        </Form.Item>
+        <Form.Item label={t('code-snippet.currentCode')} field='currentCode'>
+          <Input.TextArea style={{minHeight: 120}} placeholder={record.def}/>
+        </Form.Item>
+      </Form>
+    </Modal>
+  </>
+}
+
+function CodeSnippet() {
+  const {t} = useTranslation();
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState([{}]);
+
+
+  const columns: TableColumnProps[] = [
+    {
+      title: t('code-snippet.key'),
+      dataIndex: 'key',
+      sorter: (a, b) => a.key.localeCompare(b.key),
+    },
+    {
+      title: t('code-snippet.name'),
+      dataIndex: 'name',
+    },
+    {
+      title: '',
+      dataIndex: '',
+      render: (_, record) => <EntryEditor record={record}/>,
+      width: 150
+    },
+  ];
+
+
+  async function reloadData() {
+    setLoading(true)
+    try {
+      const serverDefaults = await axios.get('/api/code-snippets')
+      if (serverDefaults.status != 200) {
+        Message.error(serverDefaults.data.message)
+        return
+      }
+
+
+      setData(serverDefaults.data.data);
+    } catch (e) {
+      Message.warning(String(e))
+      console.warn(e)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    reloadData()
+  }, []);
+
+  return (
+    <Card style={{height: '100%'}}>
+      <Typography.Title heading={6}>
+      </Typography.Title>
+      <Table loading={loading} data={data} columns={columns} virtualized pagination/>
+    </Card>
+  );
+}
+
+export default CodeSnippet;

src/routes.ts

@@ -36,6 +36,10 @@ export const routes: IRoute[] = [
     name: 'menu.messages-edit',
     key: 'messages-edit',
   },
+  {
+    name: 'menu.code-snippet',
+    key: 'code-snippet',
+  },
   {
     name: 'menu.yggdrasil',
     key: 'yggdrasil',