import { Select, toast } from 'amis';
|
import { Editor, ShortcutKey } from 'amis-editor';
|
import axios, { CancelTokenSource } from 'axios';
|
import { currentLocale } from 'i18n-runtime';
|
import { inject, observer } from 'mobx-react';
|
import React from 'react';
|
import { RouteComponentProps } from 'react-router-dom';
|
import { updateAmisJson } from '../api/admin';
|
import '../editor/DisabledEditorPlugin'; // 用于隐藏一些不需要的Editor预置组件
|
import '../editor/MyRenderer';
|
import { Icon } from '../icons/index';
|
import plugins from '../plugins';
|
import '../renderer/MyRenderer';
|
import { IMainStore } from '../store';
|
import { getPageId } from '../utils/request';
|
|
let currentIndex = -1;
|
|
let host = `${window.location.protocol}//${window.location.host}`;
|
|
// 如果在 gh-pages 里面
|
if (/^\/amis-editor-demo/.test(window.location.pathname)) {
|
host += '/amis-editor';
|
}
|
|
const schemaUrl = `${host}/schema.json`;
|
const editorLanguages = [
|
{
|
label: '简体中文',
|
value: 'zh-CN'
|
},
|
{
|
label: 'English',
|
value: 'en-US'
|
}
|
];
|
|
export default inject('store')(
|
observer(function ({
|
store,
|
location,
|
history,
|
match
|
}: {store: IMainStore} & RouteComponentProps<{id: string}>) {
|
// const index: number = parseInt(match.params.id, 10);
|
const currentId = getPageId();
|
// const [title,setTitle] = useState('amis 可视化编辑器');
|
// const title = '你好';
|
const page = (window?.parent as any)?.currentPage
|
if(page){
|
// setTitle(`${page.title}———低代码编辑`)
|
|
}
|
|
// setTitle('你好啊啊啊')
|
|
const curLanguage = currentLocale(); // 获取当前语料类型
|
const index: number = store.pages.findIndex(item => item.id === currentId);
|
if (index !== currentIndex) {
|
currentIndex = index;
|
store.updateSchema(store.pages[index].schema);
|
}
|
|
function save() {
|
store.updatePageSchemaAt(index);
|
toast.success('保存成功', '提示');
|
}
|
|
const saveClick=async()=>{
|
const found = store.pages.find(item => item.id === currentId);
|
|
if (!found) return;
|
// 取消之前的，保存最新的
|
lastCancelTokenSource?.cancel();
|
const currentSource = axios.CancelToken.source();
|
lastCancelTokenSource = currentSource;
|
const res = await updateAmisJson(
|
{
|
id: currentId,
|
amis_json: JSON.stringify(store.schema ?? null)
|
},
|
{
|
cancelToken: currentSource.token
|
}
|
).then(() => {
|
toast.success('保存成功！',{
|
position:'top-center'
|
});
|
// 更新发布状态
|
(window as any).updatePublished?.(currentId, 'N');
|
});
|
|
}
|
|
let lastCancelTokenSource: CancelTokenSource;
|
|
let isFirst = true;
|
const onChange = (async (value: any) => {
|
if (isFirst) {
|
isFirst = false;
|
return;
|
}
|
const found = store.pages.find(item => item.id === currentId);
|
if (!found) return;
|
|
store.updateSchema(value);
|
store.updatePageSchemaAt(index);
|
});
|
|
function changeLocale(value: string) {
|
localStorage.setItem('suda-i18n-locale', value);
|
window.location.reload();
|
}
|
|
function exit() {
|
if (index === -1) return;
|
history.push(`/${store.pages[index].path}`);
|
}
|
|
return (
|
<div className="Editor-Demo">
|
<div className="Editor-header">
|
<div className="Editor-title">amis 可视化编辑器</div>
|
<div className="Editor-view-mode-group-container">
|
<div className="Editor-view-mode-group">
|
<div
|
className={`Editor-view-mode-btn editor-header-icon ${
|
!store.isMobile ? 'is-active' : ''
|
}`}
|
onClick={() => {
|
store.setIsMobile(false);
|
}}
|
>
|
<Icon icon="pc-preview" title="PC模式" />
|
</div>
|
<div
|
className={`Editor-view-mode-btn editor-header-icon ${
|
store.isMobile ? 'is-active' : ''
|
}`}
|
onClick={() => {
|
store.setIsMobile(true);
|
}}
|
>
|
<Icon icon="h5-preview" title="移动模式" />
|
</div>
|
</div>
|
</div>
|
|
<div className="Editor-header-actions">
|
<ShortcutKey />
|
<Select
|
className="margin-left-space"
|
options={editorLanguages}
|
value={curLanguage}
|
clearable={false}
|
onChange={(e: any) => changeLocale(e.value)}
|
/>
|
|
<div
|
className={`header-action-btn m-1`}
|
onClick={() => {
|
store.setPreview(!store.preview);
|
}}
|
>
|
{store.preview ? '编辑' : '预览'}
|
</div>
|
|
<div className={`header-action-btn m-1 primary`} onClick={saveClick} >
|
保存
|
</div>
|
{/* {!store.preview && (
|
<div className={`header-action-btn exit-btn`} onClick={exit}>
|
退出
|
</div>
|
)} */}
|
{/* <div className="header-action-btn m-1 primary" onClick={saveConfig}>
|
保存
|
</div> */}
|
</div>
|
</div>
|
<div className="Editor-inner">
|
<Editor
|
plugins={plugins}
|
theme={'cxd'}
|
preview={store.preview}
|
isMobile={store.isMobile}
|
value={store.schema}
|
onChange={onChange}
|
onPreview={() => {
|
store.setPreview(true);
|
}}
|
onSave={save}
|
className="is-fixed"
|
$schemaUrl={schemaUrl}
|
showCustomRenderersPanel={true}
|
amisEnv={{
|
fetcher: store.fetcher,
|
notify: store.notify,
|
alert: store.alert,
|
copy: store.copy
|
}}
|
/>
|
</div>
|
</div>
|
);
|
})
|
);
|
