commit
2961feb2e9
@ -0,0 +1,15 @@ |
||||
module.exports = { |
||||
env: { browser: true, es2020: true }, |
||||
extends: [ |
||||
'eslint:recommended', |
||||
'plugin:react/recommended', |
||||
'plugin:react/jsx-runtime', |
||||
'plugin:react-hooks/recommended', |
||||
], |
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, |
||||
settings: { react: { version: '18.2' } }, |
||||
plugins: ['react-refresh'], |
||||
rules: { |
||||
'react-refresh/only-export-components': 'warn', |
||||
}, |
||||
} |
||||
@ -0,0 +1,24 @@ |
||||
# Logs |
||||
logs |
||||
*.log |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
lerna-debug.log* |
||||
|
||||
node_modules |
||||
dist |
||||
dist-ssr |
||||
*.local |
||||
|
||||
# Editor directories and files |
||||
.vscode/* |
||||
!.vscode/extensions.json |
||||
.idea |
||||
.DS_Store |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
||||
@ -0,0 +1,13 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<title>Vite + React</title> |
||||
</head> |
||||
<body> |
||||
<div id="root"></div> |
||||
<script type="module" src="/src/main.jsx"></script> |
||||
</body> |
||||
</html> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,41 @@ |
||||
{ |
||||
"name": "myamis", |
||||
"private": true, |
||||
"version": "0.0.0", |
||||
"type": "module", |
||||
"scripts": { |
||||
"dev": "vite", |
||||
"build": "vite build", |
||||
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", |
||||
"preview": "vite preview" |
||||
}, |
||||
"dependencies": { |
||||
"@fortawesome/fontawesome-free": "^5.15.3", |
||||
"amis": "3.1.1", |
||||
"amis-core": "3.1.1", |
||||
"amis-editor": "^5.4.1", |
||||
"amis-editor-core": "^5.4.1", |
||||
"amis-formula": "3.1.1", |
||||
"amis-ui": "3.1.1", |
||||
"antd": "^5.6.2", |
||||
"axios": "0.21.1", |
||||
"copy-to-clipboard": "^3.2.0", |
||||
"mobx": "4.15.7", |
||||
"mobx-react": "6.3.1", |
||||
"mobx-state-tree": "3.17.3", |
||||
"qs": "6.5.1", |
||||
"react": "^16.14.0", |
||||
"react-dom": "^16.14.0", |
||||
"sass": "^1.63.4" |
||||
}, |
||||
"devDependencies": { |
||||
"@types/react": "^18.0.37", |
||||
"@types/react-dom": "^18.0.11", |
||||
"@vitejs/plugin-react": "^4.0.0", |
||||
"eslint": "^8.38.0", |
||||
"eslint-plugin-react": "^7.32.2", |
||||
"eslint-plugin-react-hooks": "^4.6.0", |
||||
"eslint-plugin-react-refresh": "^0.3.4", |
||||
"vite": "^4.3.9" |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,17 @@ |
||||
import {Editor} from 'amis-editor' |
||||
import { DatePicker } from 'antd'; |
||||
export default function App(){ |
||||
|
||||
const data = { |
||||
value:{}, |
||||
onChange: (value ) => { |
||||
console.log(value) |
||||
} |
||||
} |
||||
return ( |
||||
<div className="Editor-Demo"> |
||||
<div className="Editor-header"><DatePicker /></div> |
||||
<Editor value={data.value} onChange={data.onChange}/> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,30 @@ |
||||
// import React from 'react' |
||||
// import ReactDOM from 'react-dom' |
||||
// |
||||
// ReactDOM.createRoot(document.getElementById('root')).render( |
||||
// <React.StrictMode> |
||||
// <div>APP</div> |
||||
// </React.StrictMode>, |
||||
// ) |
||||
|
||||
/** |
||||
* @file entry of this example. |
||||
*/ |
||||
// import React from 'react'; |
||||
import ReactDOM from 'react-dom'; |
||||
import App from './App'; |
||||
import '@fortawesome/fontawesome-free/css/all.css'; |
||||
import '@fortawesome/fontawesome-free/css/v4-shims.css'; |
||||
import 'amis/lib/themes/cxd.css'; |
||||
import 'amis/lib/helper.css'; |
||||
import 'amis/sdk/iconfont.css'; |
||||
import 'amis-editor-core/lib/style.css'; |
||||
import './scss/style.scss'; |
||||
import {setDefaultTheme} from 'amis'; |
||||
import 'antd/dist/reset.css'; |
||||
|
||||
setDefaultTheme('cxd'); |
||||
|
||||
// react < 18 |
||||
ReactDOM.render(<App />, document.getElementById('root')); |
||||
// node -v 18.16.0 |
||||
@ -0,0 +1,261 @@ |
||||
$editor-default-color: #151b26; // 默认的字体色 |
||||
$editor-active-color: #2468f2; |
||||
$editor-hover-color: #5086f5; |
||||
$editor-border-color: #e8e9eb; // 默认的边框色 |
||||
$default-icon-color: #84868c; // 默认的icon颜色 |
||||
|
||||
$active-bg-color: #e6f0ff; // 激活态的背景色 |
||||
$hover-bg-color: #f7f7f9; // 激活态的背景色 |
||||
|
||||
$disabled-color: #b8babf; // 禁用文字颜色 |
||||
$disabled-bg-color: #f7f7f9; // 禁用背景颜色 |
||||
|
||||
html { |
||||
font-size: 16px; |
||||
} |
||||
html,body{ |
||||
position: relative; |
||||
height: 100%; |
||||
width: 100%; |
||||
margin: 0; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.app-wrapper, |
||||
.routes-wrapper { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.navbtn { |
||||
float: right; |
||||
margin: 3px; |
||||
visibility: visible; |
||||
} |
||||
|
||||
.a-Tabs--line > .a-Tabs-links > li > a:first-child { |
||||
margin-right: 30px; |
||||
} |
||||
|
||||
.Editor-Demo { |
||||
position: relative; |
||||
height: 100vh; |
||||
min-height: 510px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.Editor-header { |
||||
flex: 0 0 48px; |
||||
position: relative; |
||||
background: #fff; |
||||
// box-shadow: 0 2px 7px 0 rgba(232,232,232,0.50); |
||||
display: flex; |
||||
border-bottom: 1px solid $editor-border-color; |
||||
box-sizing: border-box; |
||||
z-index: 1000; |
||||
|
||||
.editor-header-icon svg, |
||||
.shortcut-icon-btn svg { |
||||
display: inline-block; |
||||
width: 16px; |
||||
height: 16px; |
||||
} |
||||
|
||||
.Editor-title { |
||||
flex: 1 1 565px; |
||||
padding: 0 15px; |
||||
font-family: PingFangSC-Medium; |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
letter-spacing: 0; |
||||
user-select: none; |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
} |
||||
|
||||
.Editor-view-mode-group-container { |
||||
flex: 0 1 150px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.Editor-view-mode-group { |
||||
font-size: 14px; |
||||
font-family: PingFangSC-Regular; |
||||
// color: #fff; |
||||
letter-spacing: 0; |
||||
text-align: center; |
||||
width: 100px; |
||||
height: 32px; |
||||
border-radius: 4px; |
||||
font-weight: 400; |
||||
background-color: #f2f2f4; |
||||
|
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.Editor-view-mode-btn { |
||||
user-select: none; |
||||
padding: 0; |
||||
border-radius: 4px; |
||||
width: 40px; |
||||
height: 24px; |
||||
cursor: pointer; |
||||
transition: transform ease-out 0.2s; |
||||
display: inline-flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
svg { |
||||
color: $editor-default-color; |
||||
} |
||||
|
||||
&:first-child { |
||||
margin-right: 12px; |
||||
} |
||||
|
||||
&:hover > svg { |
||||
color: $editor-active-color; |
||||
} |
||||
|
||||
&.is-active { |
||||
background: $editor-active-color; |
||||
|
||||
svg { |
||||
color: #fff; |
||||
} |
||||
|
||||
&:hover { |
||||
background: #5086f5; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.Editor-header-actions { |
||||
flex: 1 1 565px; |
||||
padding: 0 24px; |
||||
font-size: 12px; |
||||
white-space: nowrap; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
|
||||
.header-action-item { |
||||
margin-left: 18px; |
||||
user-select: none; |
||||
cursor: pointer; |
||||
transition: transform ease-out 0.2s; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
> svg { |
||||
width: 16px; |
||||
fill: $editor-default-color; |
||||
} |
||||
|
||||
&:hover > svg { |
||||
fill: $editor-active-color; |
||||
} |
||||
|
||||
&.disabled { |
||||
cursor: not-allowed; |
||||
|
||||
> svg { |
||||
fill: $disabled-color; |
||||
} |
||||
} |
||||
|
||||
// 历史记录icon单独处理 |
||||
> svg.icon-editor-history { |
||||
color: $editor-default-color; |
||||
|
||||
&:hover { |
||||
color: $editor-active-color; |
||||
} |
||||
|
||||
&.disabled, |
||||
&.disabled:hover { |
||||
cursor: not-allowed; |
||||
color: $disabled-color; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.header-action-btn { |
||||
margin-left: 8px; |
||||
user-select: none; |
||||
cursor: pointer; |
||||
padding: 0 16px; |
||||
min-width: 72px; |
||||
height: 32px; |
||||
font-family: PingFangSC-Regular; |
||||
font-size: 12px; |
||||
line-height: 20px; |
||||
color: #fff; |
||||
font-weight: 400; |
||||
background: $editor-active-color; |
||||
border-color: 1px solid $editor-active-color; |
||||
border-radius: 4px; |
||||
transition: transform ease-out 0.2s; |
||||
display: inline-flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
&.preview-btn { |
||||
color: #151a26; |
||||
border: 1px solid #dadbdd; |
||||
background: #fff; |
||||
border-radius: 4px; |
||||
|
||||
&:hover { |
||||
color: $editor-active-color; |
||||
border-color: $editor-active-color; |
||||
background: #fff; |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
color: #fff; |
||||
background: $editor-hover-color; |
||||
border-color: $editor-hover-color; |
||||
} |
||||
|
||||
&.disabled { |
||||
cursor: not-allowed; |
||||
color: $disabled-color; |
||||
background-color: $disabled-bg-color; |
||||
border-color: $disabled-bg-color; |
||||
} |
||||
|
||||
&.exit-btn { |
||||
background-color: #fff; |
||||
border: 1px solid #ccc; |
||||
color: #332e2e; |
||||
|
||||
&:hover { |
||||
color: #fff; |
||||
background: #fa541c; |
||||
border-color: #fa541c; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.margin-left-space { |
||||
margin-left: 30px; |
||||
} |
||||
} |
||||
} |
||||
.Editor-inner { |
||||
position: relative; |
||||
flex: 1 1 auto; |
||||
overflow-x: hidden; |
||||
overflow-y: auto; |
||||
} |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
import { defineConfig } from 'vite' |
||||
import react from '@vitejs/plugin-react' |
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({ |
||||
plugins: [react()], |
||||
}) |
||||
Loading…
Reference in new issue