appnify
/
web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化编辑器逻辑

master
luoer 2024-02-23 16:14:31 +08:00
parent 7f9cbe8466
commit 4aef16583d
35 changed files with 738 additions and 436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env
View File

@ -2,9 +2,9 @@
# 应用配置 # 应用配置
# ===================================================================================== # =====================================================================================
# 网站标题 # 网站标题
VITE_TITLE = 绝弹管理中心 VITE_TITLE = 管理中心
# 网站副标题 # 网站副标题
VITE_SUBTITLE = 绝弹管理中心1 VITE_SUBTITLE = 绝弹管理中心
# 部署路径: 当为 ./ 时路由模式需为 hash # 部署路径: 当为 ./ 时路由模式需为 hash
VITE_BASE = / VITE_BASE = /
# 接口前缀：参见 axios 的 baseURL # 接口前缀：参见 axios 的 baseURL

1
README.md
View File

@ -15,6 +15,7 @@
- 遵循 Conventional Changelog 规范， 自动生成版本记录文档 - 遵循 Conventional Changelog 规范， 自动生成版本记录文档
- 内置常用 VsCode 代码片段和推荐扩展，提升开发效率 - 内置常用 VsCode 代码片段和推荐扩展，提升开发效率
- 支持路由动态打包、路由权限、路由缓存和动态首页 - 支持路由动态打包、路由权限、路由缓存和动态首页
- 支持 Docker 部署，包含优化过的 Dockerfile 配置
## 快速开始 ## 快速开始

80
index.html
View File

@ -9,16 +9,13 @@
</head> </head>
<body> <body>
<div id="app" class="dark:bg-slate-900 dark:text-slate-200"> <div id="app" class="dark:bg-slate-900 dark:text-slate-200">
<div class="loading"> <div class="cube">
<img <div></div>
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IHJnYigyNTUsIDI1NSwgMjU1KTsgZGlzcGxheTogYmxvY2s7IHNoYXBlLXJlbmRlcmluZzogYXV0bzsiIHdpZHRoPSIyMDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MCA1MCkiPjxnPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiB2YWx1ZXM9IjA7NDUiIGtleVRpbWVzPSIwOzEiIGR1cj0iMC4ycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48cGF0aCBkPSJNMjkuNDkxNTI0MjA2MTE3MjU1IC01LjUgTDM3LjQ5MTUyNDIwNjExNzI1NSAtNS41IEwzNy40OTE1MjQyMDYxMTcyNTUgNS41IEwyOS40OTE1MjQyMDYxMTcyNTUgNS41IEEzMCAzMCAwIDAgMSAyNC43NDI3NDQwNTAxOTg3MzggMTYuOTY0NTY5NDU3MTQ2NzEyIEwyNC43NDI3NDQwNTAxOTg3MzggMTYuOTY0NTY5NDU3MTQ2NzEyIEwzMC4zOTk1OTgyOTk2OTExMTcgMjIuNjIxNDIzNzA2NjM5MDkyIEwyMi42MjE0MjM3MDY2MzkwOTYgMzAuMzk5NTk4Mjk5NjkxMTE0IEwxNi45NjQ1Njk0NTcxNDY3MTYgMjQuNzQyNzQ0MDUwMTk4NzM0IEEzMCAzMCAwIDAgMSA1LjUgMjkuNDkxNTI0MjA2MTE3MjU1IEw1LjUgMjkuNDkxNTI0MjA2MTE3MjU1IEw1LjUgMzcuNDkxNTI0MjA2MTE3MjU1IEwtNS40OTk5OTk5OTk5OTk5OTcgMzcuNDkxNTI0MjA2MTE3MjU1IEwtNS40OTk5OTk5OTk5OTk5OTcgMjkuNDkxNTI0MjA2MTE3MjU1IEEzMCAzMCAwIDAgMSAtMTYuOTY0NTY5NDU3MTQ2NzA1IDI0Ljc0Mjc0NDA1MDE5ODczOCBMLTE2Ljk2NDU2OTQ1NzE0NjcwNSAyNC43NDI3NDQwNTAxOTg3MzggTC0yMi42MjE0MjM3MDY2MzkwODUgMzAuMzk5NTk4Mjk5NjkxMTE3IEwtMzAuMzk5NTk4Mjk5NjkxMTE3IDIyLjYyMTQyMzcwNjYzOTA5MiBMLTI0Ljc0Mjc0NDA1MDE5ODczOCAxNi45NjQ1Njk0NTcxNDY3MTIgQTMwIDMwIDAgMCAxIC0yOS40OTE1MjQyMDYxMTcyNTUgNS41MDAwMDAwMDAwMDAwMDkgTC0yOS40OTE1MjQyMDYxMTcyNTUgNS41MDAwMDAwMDAwMDAwMDkgTC0zNy40OTE1MjQyMDYxMTcyNTUgNS41MDAwMDAwMDAwMDAwMSBMLTM3LjQ5MTUyNDIwNjExNzI1NSAtNS41MDAwMDAwMDAwMDAwMDEgTC0yOS40OTE1MjQyMDYxMTcyNTUgLTUuNTAwMDAwMDAwMDAwMDAyIEEzMCAzMCAwIDAgMSAtMjQuNzQyNzQ0MDUwMTk4NzM4IC0xNi45NjQ1Njk0NTcxNDY3MDUgTC0yNC43NDI3NDQwNTAxOTg3MzggLTE2Ljk2NDU2OTQ1NzE0NjcwNSBMLTMwLjM5OTU5ODI5OTY5MTExNyAtMjIuNjIxNDIzNzA2NjM5MDg1IEwtMjIuNjIxNDIzNzA2NjM5MDkyIC0zMC4zOTk1OTgyOTk2OTExMTcgTC0xNi45NjQ1Njk0NTcxNDY3MTIgLTI0Ljc0Mjc0NDA1MDE5ODczOCBBMzAgMzAgMCAwIDEgLTUuNTAwMDAwMDAwMDAwMDExIC0yOS40OTE1MjQyMDYxMTcyNTUgTC01LjUwMDAwMDAwMDAwMDAxMSAtMjkuNDkxNTI0MjA2MTE3MjU1IEwtNS41MDAwMDAwMDAwMDAwMTIgLTM3LjQ5MTUyNDIwNjExNzI1NSBMNS40OTk5OTk5OTk5OTk5OTggLTM3LjQ5MTUyNDIwNjExNzI1NSBMNS41IC0yOS40OTE1MjQyMDYxMTcyNTUgQTMwIDMwIDAgMCAxIDE2Ljk2NDU2OTQ1NzE0NjcwMiAtMjQuNzQyNzQ0MDUwMTk4NzQgTDE2Ljk2NDU2OTQ1NzE0NjcwMiAtMjQuNzQyNzQ0MDUwMTk4NzQgTDIyLjYyMTQyMzcwNjYzOTA4IC0zMC4zOTk1OTgyOTk2OTExMiBMMzAuMzk5NTk4Mjk5NjkxMTE3IC0yMi42MjE0MjM3MDY2MzkxIEwyNC43NDI3NDQwNTAxOTg3MzggLTE2Ljk2NDU2OTQ1NzE0NjcxNiBBMzAgMzAgMCAwIDEgMjkuNDkxNTI0MjA2MTE3MjU1IC01LjUwMDAwMDAwMDAwMDAxMyBNMCAtMjBBMjAgMjAgMCAxIDAgMCAyMCBBMjAgMjAgMCAxIDAgMCAtMjAiIGZpbGw9IiMwOWYiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPgo=" <div></div>
alt="loading" <div></div>
class="loading-image" <div></div>
width="64" <div></div>
height="64" <div></div>
/>
<h1 class="loading-title">欢迎访问%VITE_TITLE%</h1>
<div class="loading-tip">资源加载中, 请稍等...</div>
</div> </div>
<style> <style>
html, html,
@ -29,8 +26,7 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 14px;
font-family: Inter, '-apple-system', BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'noto sans', font-family: Inter, '-apple-system', BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'noto sans', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} }
#app { #app {
width: 100%; width: 100%;
@ -40,27 +36,51 @@
justify-content: center; justify-content: center;
user-select: none; user-select: none;
} }
.loading { @keyframes cube {
display: flex; 0% {
flex-direction: column; transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
align-items: center;
justify-content: center;
} }
.loading-image { 50% {
width: 64px; transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
height: 64px;
} }
.loading-title { 100% {
margin: 0; transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
margin-top: 20px;
font-size: 22px;
font-weight: 400;
line-height: 1;
} }
.loading-tip { }
margin-top: 12px; .cube {
line-height: 1; animation: cube 2s infinite ease;
color: #889; height: 40px;
transform-style: preserve-3d;
width: 40px;
}
.cube div {
background-color: rgba(255, 255, 255, 0.25);
height: 100%;
position: absolute;
width: 100%;
border: 2px solid #000;
}
.cube div:nth-of-type(1) {
transform: translateZ(-20px) rotateY(180deg);
}
.cube div:nth-of-type(2) {
transform: rotateY(-270deg) translateX(50%);
transform-origin: top right;
}
.cube div:nth-of-type(3) {
transform: rotateY(270deg) translateX(-50%);
transform-origin: center left;
}
.cube div:nth-of-type(4) {
transform: rotateX(90deg) translateY(-50%);
transform-origin: top center;
}
.cube div:nth-of-type(5) {
transform: rotateX(-90deg) translateY(50%);
transform-origin: bottom center;
}
.cube div:nth-of-type(6) {
transform: translateZ(20px);
} }
</style> </style>
</div> </div>

1
public/assets/loading.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="translate(50 50)"><g><animateTransform attributeName="transform" type="rotate" values="0;45" keyTimes="0;1" dur="0.2s" repeatCount="indefinite"></animateTransform><path d="M29.491524206117255 -5.5 L37.491524206117255 -5.5 L37.491524206117255 5.5 L29.491524206117255 5.5 A30 30 0 0 1 24.742744050198738 16.964569457146712 L24.742744050198738 16.964569457146712 L30.399598299691117 22.621423706639092 L22.621423706639096 30.399598299691114 L16.964569457146716 24.742744050198734 A30 30 0 0 1 5.5 29.491524206117255 L5.5 29.491524206117255 L5.5 37.491524206117255 L-5.499999999999997 37.491524206117255 L-5.499999999999997 29.491524206117255 A30 30 0 0 1 -16.964569457146705 24.742744050198738 L-16.964569457146705 24.742744050198738 L-22.621423706639085 30.399598299691117 L-30.399598299691117 22.621423706639092 L-24.742744050198738 16.964569457146712 A30 30 0 0 1 -29.491524206117255 5.500000000000009 L-29.491524206117255 5.500000000000009 L-37.491524206117255 5.50000000000001 L-37.491524206117255 -5.500000000000001 L-29.491524206117255 -5.500000000000002 A30 30 0 0 1 -24.742744050198738 -16.964569457146705 L-24.742744050198738 -16.964569457146705 L-30.399598299691117 -22.621423706639085 L-22.621423706639092 -30.399598299691117 L-16.964569457146712 -24.742744050198738 A30 30 0 0 1 -5.500000000000011 -29.491524206117255 L-5.500000000000011 -29.491524206117255 L-5.500000000000012 -37.491524206117255 L5.499999999999998 -37.491524206117255 L5.5 -29.491524206117255 A30 30 0 0 1 16.964569457146702 -24.74274405019874 L16.964569457146702 -24.74274405019874 L22.62142370663908 -30.39959829969112 L30.399598299691117 -22.6214237066391 L24.742744050198738 -16.964569457146716 A30 30 0 0 1 29.491524206117255 -5.500000000000013 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20" fill="#09f"></path></g></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

16
scripts/vite/plugin-info.ts
View File

@ -1,5 +1,5 @@
import { spawn } from 'child_process'; import { spawn } from 'child_process';
import { Plugin, ResolvedConfig } from 'vite'; import { Plugin } from 'vite';
import pkg from '../../package.json'; import pkg from '../../package.json';
/** /**
@ -46,8 +46,11 @@ const getBuildInfo = async () => {
const version = commits ? `${latestTag}.${commits}` : `v${pkg.version}`; const version = commits ? `${latestTag}.${commits}` : `v${pkg.version}`;
const content = `欢迎访问！版本: ${version} 标识: ${hash} 构建: ${time}`; const content = `欢迎访问！版本: ${version} 标识: ${hash} 构建: ${time}`;
const style = `"color: #09f; font-weight: 900;", "font-size: 12px; color: #09f; font-family: ''"`; const style = `"color: #09f; font-weight: 900;", "font-size: 12px; color: #09f; font-family: ''"`;
const script = `console.log(\`%c${LOGO} \n%c${content}\n\`, ${style});\n`; const vString = `var __APP_VERSION__ = '${version}';\n`;
return script; const hString = `var __APP_HASH__ = '${hash}';\n`;
const dString = `var __APP_DATE__ = '${time}';\n`;
const lString = `console.log(\`%c${LOGO} \n%c${content}\n\`, ${style});\n`;
return vString + hString + dString + lString;
}; };
/** /**
@ -55,16 +58,9 @@ const getBuildInfo = async () => {
* @returns Plugin * @returns Plugin
*/ */
export default function plugin(): Plugin { export default function plugin(): Plugin {
let config: ResolvedConfig;
return { return {
name: 'vite:info', name: 'vite:info',
enforce: 'pre', enforce: 'pre',
configResolved(resolvedConfig) {
config = resolvedConfig;
},
async transformIndexHtml() { async transformIndexHtml() {
const script = await getBuildInfo(); const script = await getBuildInfo();
return [ return [

3
src/App.vue
View File

@ -18,6 +18,9 @@ const userStore = useUserStore();
const menuStore = useMenuStore(); const menuStore = useMenuStore();
const hasAuth = computed(() => { const hasAuth = computed(() => {
if (!route.name.startsWith('_')) {
return true;
}
return route.matched.every(item => { return route.matched.every(item => {
const needAuth = item.meta.auth; const needAuth = item.meta.auth;
const userAuth = userStore.auth; const userAuth = userStore.auth;

22
src/api/instance/api.ts
View File

@ -1,8 +1,28 @@
import { Service } from './service';
import { addToastInterceptor } from '../interceptors/toast'; import { addToastInterceptor } from '../interceptors/toast';
import { addAuthInterceptor } from '../interceptors/auth'; import { addAuthInterceptor } from '../interceptors/auth';
import { addExceptionInterceptor } from '../interceptors/exception'; import { addExceptionInterceptor } from '../interceptors/exception';
import { env } from '@/config/env'; import { env } from '@/config/env';
import { App } from 'vue';
import { Api } from '../generated/Api';
/**
* 扩展生成的API类
*/
export class Service extends Api<unknown> {
/**
* 作为VUE插件进行初始化
* @param app
*/
install(app: App) {
app.config.globalProperties.$api = this;
}
/**
* 登陆过期处理函数
* @description 勿动
*/
expireHandler: () => void = () => {};
}
/** /**
* API 接口实例 * API 接口实例

21
src/api/instance/service.ts
View File

@ -1,21 +0,0 @@
import { App } from 'vue';
import { Api } from '../generated/Api';
/**
* 扩展生成的API类
*/
export class Service extends Api<unknown> {
/**
* 登陆过期处理函数
* @description 勿动
*/
expireHandler: () => void = () => {};
/**
* 作为VUE插件进行初始化
* @param app
*/
install(app: App) {
app.config.globalProperties.$api = this;
}
}

45
src/components/AnEditor/blocks/index.ts
View File

@ -1,6 +1,5 @@
import { InjectionKey } from 'vue'; import { InjectionKey } from 'vue';
import { Block, Blocker, Container } from '../core'; import { Block, Blocker, Container } from '../core';
import { useTextBlock } from './text';
const blockers: Record<string, Blocker> = import.meta.glob(['./*/index.ts', '!./font/*'], { const blockers: Record<string, Blocker> = import.meta.glob(['./*/index.ts', '!./font/*'], {
eager: true, eager: true,
@ -25,47 +24,3 @@ const getIcon = (type: string) => {
}; };
export { BlockerMap, getBlockerRender, getIcon, getTypeName }; export { BlockerMap, getBlockerRender, getIcon, getTypeName };
export const BlockerManagerKey = Symbol('k') as InjectionKey<ReturnType<typeof useBlockerManage>>
export function useBlockerManage() {
const blockers: Blocker[] = [useTextBlock()];
const leftPanels: any[] = [];
for (const blocker of blockers) {
const panel = blocker.addLeftTab?.();
if (panel) {
leftPanels.push(leftPanels);
}
}
const callInitHook = (container: Container) => {
for (const blocker of blockers) {
container = blocker.onLoadContainer?.(container) || container;
}
return container;
};
const callLoadHook = (data: any): Blocker => {
for (const blocker of blockers) {
data = blocker.onLoadBlock?.(data) || data;
}
return data;
};
const callSaveHook = (block: Block) => {
let data = block;
for (const blocker of blockers) {
data = blocker.onSaveBlock?.(data) || data;
}
return data;
};
return {
blockers,
leftPanels,
callInitHook,
callLoadHook,
callSaveHook,
};
}

87
src/components/AnEditor/blocks/text/index.ts
View File

@ -1,87 +0,0 @@
import { Block, Blocker, defineBlocker } from '../../core';
import { font } from '../font';
import { Text } from './interface';
import Option from './option.vue';
import Render from './render.vue';
export default defineBlocker<Text>({
type: 'text',
icon: 'icon-park-outline-text',
title: '文本组件',
description: '文字',
render: Render,
option: Option,
initial: {
id: '',
type: 'text',
title: '',
x: 0,
y: 0,
w: 300,
h: 100,
xFixed: false,
yFixed: false,
bgImage: '',
bgColor: '',
meta: {},
actived: false,
resizable: true,
draggable: true,
params: {
marquee: false,
speed: 100,
direction: 'left',
fontCh: {
...font,
content:
'温馨提示：乘客您好，进站检票时，持票卡的乘客请在右侧闸机上方感应区内验票，扫码过闸的乘客请将乘车码对准闸机扫码口，扇门打开后依次进闸。乘车过程中请妥善保管好车票，以免丢失。',
},
},
},
});
export function useTextBlock(): Blocker<Text> {
const initialData: Text = {
id: '',
type: 'text',
title: '',
x: 0,
y: 0,
w: 300,
h: 100,
xFixed: false,
yFixed: false,
bgImage: '',
bgColor: '',
meta: {},
actived: false,
resizable: true,
draggable: true,
params: {
marquee: false,
speed: 100,
direction: 'left',
fontCh: {
...font,
content:
'温馨提示：乘客您好，进站检票时，持票卡的乘客请在右侧闸机上方感应区内验票，扫码过闸的乘客请将乘车码对准闸机扫码口，扇门打开后依次进闸。乘车过程中请妥善保管好车票，以免丢失。',
},
},
};
return {
type: 'text',
icon: 'icon-park-outline-text',
title: '文本组件',
description: '文字',
render: Render,
option: Option,
initial: initialData,
addLeftTab() {
return {
title: '文本测试',
icon: 'icon-park-outline-user',
component: () => h('div', null, 'TODO')
}
},
};
}

145
src/components/AnEditor/blocks/text/index.tsx Normal file
View File

@ -0,0 +1,145 @@
import { merge } from 'lodash-es';
import { Block, Blocker, defineBlocker } from '../../core';
import { BlockItem, Plugin } from '../../core/plugin';
import { font } from '../font';
import { Text } from './interface';
import Option from './option.vue';
import Render from './render.vue';
import { Button } from '@arco-design/web-vue';
export default defineBlocker<Text>({
type: 'text',
icon: 'icon-park-outline-text',
title: '文本组件',
description: '文字',
render: Render,
option: Option,
initial: {
id: '',
type: 'text',
title: '',
x: 0,
y: 0,
w: 300,
h: 100,
xFixed: false,
yFixed: false,
bgImage: '',
bgColor: '',
meta: {},
actived: false,
resizable: true,
draggable: true,
params: {
marquee: false,
speed: 100,
direction: 'left',
fontCh: {
...font,
content:
'温馨提示：乘客您好，进站检票时，持票卡的乘客请在右侧闸机上方感应区内验票，扫码过闸的乘客请将乘车码对准闸机扫码口，扇门打开后依次进闸。乘车过程中请妥善保管好车票，以免丢失。',
},
},
},
});
const defaults: Text = {
id: '',
type: 'text',
title: '',
x: 0,
y: 0,
w: 300,
h: 100,
xFixed: false,
yFixed: false,
bgImage: '',
bgColor: '',
meta: {},
actived: false,
resizable: true,
draggable: true,
params: {
marquee: false,
speed: 100,
direction: 'left',
fontCh: {
...font,
content: '温馨提示：乘客您好',
},
},
};
export const item: BlockItem = {
type: 'text',
icon: 'icon-park-outline-text',
title: '文本组件',
description: '文字',
editRender: Option,
viewRender: Render,
onInit: () => {
return merge({}, defaults);
},
};
export function TextBlock(): Plugin {
const defaults = {
id: '',
type: 'text',
title: '',
x: 0,
y: 0,
w: 300,
h: 100,
xFixed: false,
yFixed: false,
bgImage: '',
bgColor: '',
meta: {},
actived: false,
resizable: true,
draggable: true,
params: {
marquee: false,
speed: 100,
direction: 'left',
fontCh: {
...font,
content: '温馨提示：乘客您好',
},
},
};
return {
name: 'TextBlockPlugin',
hrRender: {
name: 'TextDelete',
render() {
return (
<Button>
{{
icon: <i class="icon-park-outline-delete"></i>,
default: '测试',
}}
</Button>
);
},
},
hlRender: {
name: 'tip',
render() {
return <span class="text-gray-400 text-xs ml-2">测试提示</span>;
},
},
addBlockItem() {
return {
type: 'text',
icon: 'icon-park-outline-text',
title: '文本组件',
description: '文字',
onInit: () => merge({}, defaults),
editRender: Option,
viewRender: Render,
};
},
};
}

44
src/components/AnEditor/components/Editor.vue
View File

@ -2,41 +2,23 @@
<a-modal v-model:visible="show" :fullscreen="true" :footer="false" class="an-editor"> <a-modal v-model:visible="show" :fullscreen="true" :footer="false" class="an-editor">
<div class="w-full h-full bg-slate-100 grid grid-rows-[auto_1fr] select-none"> <div class="w-full h-full bg-slate-100 grid grid-rows-[auto_1fr] select-none">
<div class="h-13 bg-white border-b border-slate-200 z-10"> <div class="h-13 bg-white border-b border-slate-200 z-10">
<EditorHeader <EditorHeader v-model:container="container" :saving="saving" @preview="showPreview = true" @config="showConfig = true" @exit="onExit()" @save="saveData()"></EditorHeader>
v-model:container="container"
:saving="saving"
@preview="showPreview = true"
@config="showConfig = true"
@exit="onExit()"
@save="saveData()"
></EditorHeader>
</div> </div>
<div class="grid grid-cols-[auto_1fr_auto] overflow-hidden"> <div class="grid grid-cols-[auto_1fr_auto] overflow-hidden">
<div class="h-full overflow-hidden bg-white shadow-[2px_0_6px_rgba(0,0,0,.05)] z-10"> <div class="h-full overflow-hidden bg-white shadow-[2px_0_6px_rgba(0,0,0,.05)] z-10">
<EditorLeft @rm-block="rmBlock" @current-block="setCurrentBlock"></EditorLeft> <EditorLeft @rm-block="rmBlock" @current-block="setCurrentBlock"></EditorLeft>
</div> </div>
<div class="w-full h-full"> <div class="w-full h-full">
<EditorMain <EditorMain v-model:rightPanelCollapsed="rightPanelCollapsed" @add-block="addBlock" @current-block="setCurrentBlock" @block-menu="onBlockContextMenu"></EditorMain>
v-model:rightPanelCollapsed="rightPanelCollapsed"
@add-block="addBlock"
@current-block="setCurrentBlock"
@block-menu="onBlockContextMenu"
></EditorMain>
</div> </div>
<div class="h-full overflow-hidden bg-white shadow-[-2px_0_6px_rgba(0,0,0,.05)]"> <div class="h-full overflow-hidden bg-white shadow-[-2px_0_6px_rgba(0,0,0,.05)]">
<EditorRight v-model:collapsed="rightPanelCollapsed" v-model:block="currentBlock"></EditorRight> <EditorRight v-model:collapsed="rightPanelCollapsed" v-model:block="container.current"></EditorRight>
</div> </div>
</div> </div>
</div> </div>
<EditorPreview v-model:visible="showPreview" :container="container" :blocks="blocks"></EditorPreview> <EditorPreview v-model:visible="showPreview" :container="container" :blocks="container.children"></EditorPreview>
<EditorSetting v-model:visible="showConfig" v-model="container"></EditorSetting> <EditorSetting v-model:visible="showConfig" v-model="container"></EditorSetting>
<ContextMenu <ContextMenu v-model:visible="blockMenu.show" :x="blockMenu.x" :y="blockMenu.y" :items="blockMenuItems" @done="blockMenu.show = false"></ContextMenu>
v-model:visible="blockMenu.show"
:x="blockMenu.x"
:y="blockMenu.y"
:items="blockMenuItems"
@done="blockMenu.show = false"
></ContextMenu>
</a-modal> </a-modal>
</template> </template>
@ -44,7 +26,7 @@
import { delConfirm, sleep } from '@/utils'; import { delConfirm, sleep } from '@/utils';
import { Message } from '@arco-design/web-vue'; import { Message } from '@arco-design/web-vue';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { Block, ContextMenuItem, EditorKey, useEditor } from '../core'; import { Block, EditorKey, useEditor } from '../core';
import ContextMenu from './ContextMenu.vue'; import ContextMenu from './ContextMenu.vue';
import EditorSetting from './EditorConfig.vue'; import EditorSetting from './EditorConfig.vue';
import EditorHeader from './EditorHeader.vue'; import EditorHeader from './EditorHeader.vue';
@ -52,6 +34,8 @@ import EditorLeft from './EditorLeft.vue';
import EditorMain from './EditorMain.vue'; import EditorMain from './EditorMain.vue';
import EditorPreview from './EditorPreview.vue'; import EditorPreview from './EditorPreview.vue';
import EditorRight from './EditorRight.vue'; import EditorRight from './EditorRight.vue';
import { ContextKey, usePluginContext } from '../core/plugin';
import { TextBlock } from '../blocks/text';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -67,7 +51,10 @@ const showPreview = ref(false);
const showConfig = ref(false); const showConfig = ref(false);
const saving = ref(false); const saving = ref(false);
const editor = useEditor(); const editor = useEditor();
const { container, blocks, currentBlock, addBlock, rmBlock, setCurrentBlock } = editor; const context = usePluginContext([TextBlock()]);
const { container, addBlock, rmBlock, setCurrentBlock } = context;
console.log({context});
const blockMenu = reactive<{ show: boolean; x: number; y: number; block: Block | null }>({ const blockMenu = reactive<{ show: boolean; x: number; y: number; block: Block | null }>({
show: false, show: false,
@ -76,7 +63,7 @@ const blockMenu = reactive<{ show: boolean; x: number; y: number; block: Block |
block: null, block: null,
}); });
const blockMenuItems: ContextMenuItem[] = [ const blockMenuItems: any[] = [
{ {
name: '删除', name: '删除',
icon: 'icon-park-outline-delete', icon: 'icon-park-outline-delete',
@ -103,7 +90,7 @@ const onBlockContextMenu = (block: Block, e: MouseEvent) => {
const saveData = async () => { const saveData = async () => {
const data = { const data = {
container: container.value, container: container.value,
children: blocks.value, children: container.value.children,
}; };
saving.value = true; saving.value = true;
await sleep(3000); await sleep(3000);
@ -120,7 +107,7 @@ const loadData = async () => {
} }
const data = JSON.parse(str); const data = JSON.parse(str);
container.value = data.container; container.value = data.container;
blocks.value = data.children; container.value.children = data.children;
}; };
const onExit = async () => { const onExit = async () => {
@ -133,6 +120,7 @@ const onExit = async () => {
}; };
provide(EditorKey, editor); provide(EditorKey, editor);
provide(ContextKey, context);
onMounted(loadData); onMounted(loadData);
</script> </script>

2
src/components/AnEditor/components/EditorConfig.vue
View File

@ -46,9 +46,7 @@ const props = defineProps({
required: true, required: true,
}, },
}); });
const emit = defineEmits(['update:visible', 'update:modelValue']); const emit = defineEmits(['update:visible', 'update:modelValue']);
const show = useVModel(props, 'visible', emit); const show = useVModel(props, 'visible', emit);
const model = useVModel(props, 'modelValue', emit); const model = useVModel(props, 'modelValue', emit);
</script> </script>

6
src/components/AnEditor/components/EditorHeader.vue
View File

@ -9,11 +9,13 @@
</a-link> </a-link>
<a-divider :direction="'vertical'" :margin="8"></a-divider> <a-divider :direction="'vertical'" :margin="8"></a-divider>
<ani-texter v-model="container.title"></ani-texter> <ani-texter v-model="container.title"></ani-texter>
<component v-for="item in HL" :is="item" />
<!-- <a-tag :color="container.id ? 'blue' : 'green'" class="mr-2 ml-1"> <!-- <a-tag :color="container.id ? 'blue' : 'green'" class="mr-2 ml-1">
{{ container.id ? '修改' : '新增' }} {{ container.id ? '修改' : '新增' }}
</a-tag> --> </a-tag> -->
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<component v-for="item in HR" :key="item.name" :is="item" />
<a-button @click="emit('preview')"> <a-button @click="emit('preview')">
<template #icon> <template #icon>
<i class="icon-park-outline-play"></i> <i class="icon-park-outline-play"></i>
@ -38,6 +40,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Container } from '../core'; import { Container } from '../core';
import { ContextKey } from '../core/plugin';
import AniTexter from './InputTexter.vue'; import AniTexter from './InputTexter.vue';
defineProps({ defineProps({
@ -48,8 +51,9 @@ defineProps({
}) })
const emit = defineEmits(['preview', 'config', 'exit', 'save']); const emit = defineEmits(['preview', 'config', 'exit', 'save']);
const container = defineModel<Container>('container', { required: true }); const container = defineModel<Container>('container', { required: true });
const { HR, HL } = inject(ContextKey)!
</script> </script>
<style scoped></style> <style scoped></style>

39
src/components/AnEditor/components/EditorLeft.vue
View File

@ -1,12 +1,7 @@
<template> <template>
<div class="h-full grid grid-cols-[auto_1fr]" :style="{ width: !collapsed ? '248px' : undefined }"> <div class="h-full grid grid-cols-[auto_1fr]" :style="{ width: !collapsed ? '248px' : undefined }">
<div class="h-full grid grid-rows-[1fr_auto] border-r border-slate-200"> <div class="h-full grid grid-rows-[1fr_auto] border-r border-slate-200">
<a-menu <a-menu :collapsed="true" :default-selected-keys="['0_0']" :selected-keys="[key]" @menu-item-click="k => (key = k)">
:collapsed="true"
:default-selected-keys="['0_0']"
:selected-keys="[key]"
@menu-item-click="(k) => (key = k)"
>
<a-menu-item key="list"> <a-menu-item key="list">
<template #icon> <template #icon>
<i class="icon-park-outline-all-application"></i> <i class="icon-park-outline-all-application"></i>
@ -31,10 +26,7 @@
<a-tooltip :content="collapsed ? '展开' : '折叠'" position="right"> <a-tooltip :content="collapsed ? '展开' : '折叠'" position="right">
<a-button type="text" @click="collapsed = !collapsed"> <a-button type="text" @click="collapsed = !collapsed">
<template #icon> <template #icon>
<i <i class="text-lg text-gray-400 hover:text-gray-700" :class="collapsed ? 'icon-park-outline-expand-left' : 'icon-park-outline-expand-right'"></i>
class="text-lg text-gray-400 hover:text-gray-700"
:class="collapsed ? 'icon-park-outline-expand-left' : 'icon-park-outline-expand-right'"
></i>
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -61,13 +53,13 @@
</ul> </ul>
<ul v-show="key === 'data'" class="list-none px-2 grid gap-2"> <ul v-show="key === 'data'" class="list-none px-2 grid gap-2">
<li <li
v-for="item in blocks" v-for="item in container.children"
:key="item.id" :key="item.id"
class="group h-8 w-full overflow-hidden grid grid-cols-[auto_1fr_auto] items-center gap-2 bg-gray-100 text-gray-500 px-2 py-1 rounded border border-transparent" class="group h-8 w-full overflow-hidden grid grid-cols-[auto_1fr_auto] items-center gap-2 bg-gray-100 text-gray-500 px-2 py-1 rounded border border-transparent"
:class="{ :class="{
'!bg-brand-50': currentBlock === item, '!bg-brand-50': container.current === item,
'!text-brand-500': currentBlock === item, '!text-brand-500': container.current === item,
'!border-brand-300': currentBlock === item, '!border-brand-300': container.current === item,
}" }"
@click="emit('current-block', item)" @click="emit('current-block', item)"
> >
@ -78,10 +70,7 @@
{{ item.title }} {{ item.title }}
</div> </div>
<div class="w-4"> <div class="w-4">
<i <i class="!hidden !group-hover:inline-block text-gray-400 hover:text-gray-700 icon-park-outline-delete !text-xs" @click.prevent="emit('rm-block', item)"></i>
class="!hidden !group-hover:inline-block text-gray-400 hover:text-gray-700 icon-park-outline-delete !text-xs"
@click.prevent="emit('rm-block', item)"
></i>
</div> </div>
</li> </li>
</ul> </ul>
@ -90,24 +79,24 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getIcon } from "../blocks"; import { getIcon } from '../blocks';
import { Block, EditorKey } from "../core"; import { Block, EditorKey } from '../core';
const { blocks, currentBlock, BlockerMap } = inject(EditorKey)!; const { container, BlockerMap } = inject(EditorKey)!;
const blockList = Object.values(BlockerMap); const blockList = Object.values(BlockerMap);
const collapsed = ref(false); const collapsed = ref(false);
const key = ref<"list" | "data">("list"); const key = ref<'list' | 'data'>('list');
const emit = defineEmits<{ const emit = defineEmits<{
(event: "rm-block", block: Block): void; (event: 'rm-block', block: Block): void;
(event: "current-block", block: Block | null): void; (event: 'current-block', block: Block | null): void;
}>(); }>();
/** /**
* 拖拽开始时设置数据 * 拖拽开始时设置数据
*/ */
const onDragStart = (e: DragEvent) => { const onDragStart = (e: DragEvent) => {
e.dataTransfer?.setData("type", (e.target as HTMLElement).dataset.type!); e.dataTransfer?.setData('type', (e.target as HTMLElement).dataset.type!);
}; };
</script> </script>

36
src/components/AnEditor/components/EditorMain.vue
View File

@ -1,27 +1,13 @@
<template> <template>
<div class="h-full grid grid-rows-[auto_1fr]"> <div class="h-full grid grid-rows-[auto_1fr]">
<div class="h-10"> <div class="h-10">
<EditorMainHeader <EditorMainHeader :container="container" v-model:rightPanelCollapsed="rightPanelCollapsed" @preview="emit('preview')"></EditorMainHeader>
:container="container"
v-model:rightPanelCollapsed="rightPanelCollapsed"
@preview="emit('preview')"
></EditorMainHeader>
</div> </div>
<div class="h-full w-full overflow-hidden p-4"> <div class="h-full w-full overflow-hidden p-4">
<div <div class="juetan-editor-container w-full h-full flex items-center justify-center overflow-hidden relative bg-slate-50">
class="juetan-editor-container w-full h-full flex items-center justify-center overflow-hidden relative bg-slate-50" <div class="relative" :style="containerStyle" @dragover.prevent @click="onClick" @drop="onDragDrop" @wheel="onMouseWheel" @mousedown="onMouseDown">
>
<div
class="relative"
:style="containerStyle"
@dragover.prevent
@click="onClick"
@drop="onDragDrop"
@wheel="onMouseWheel"
@mousedown="onMouseDown"
>
<EditorMainBlock <EditorMainBlock
v-for="block in blocks" v-for="block in container.children"
:key="block.id" :key="block.id"
:data="block" :data="block"
:container="container" :container="container"
@ -60,12 +46,13 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Block, EditorKey } from '../core'; import { Block, EditorKey, formatContainerStyle } from '../core';
import { ContextKey } from '../core/plugin';
import EditorMainBlock from './EditorMainBlock.vue'; import EditorMainBlock from './EditorMainBlock.vue';
import EditorMainHeader from './EditorMainHeader.vue'; import EditorMainHeader from './EditorMainHeader.vue';
const rightPanelCollapsed = defineModel<boolean>('rightPanelCollapsed'); const rightPanelCollapsed = defineModel<boolean>('rightPanelCollapsed');
const { blocks, container, refLine, formatContainerStyle, scene } = inject(EditorKey)!; const { container, refLine, scene } = inject(ContextKey)!;
const { onMouseDown, onMouseWheel } = scene; const { onMouseDown, onMouseWheel } = scene;
const { active, xLines, yLines } = refLine; const { active, xLines, yLines } = refLine;
@ -107,14 +94,7 @@ const onDragDrop = (e: DragEvent) => {
<style scoped> <style scoped>
.juetan-editor-container { .juetan-editor-container {
--color: rgba(0, 0, 0, 0.2); --color: rgba(0, 0, 0, 0.2);
background: linear-gradient( background: linear-gradient(45deg, var(--color) 25%, transparent 25%, transparent 75%, var(--color) 75%, var(--color) 100%),
45deg,
var(--color) 25%,
transparent 25%,
transparent 75%,
var(--color) 75%,
var(--color) 100%
),
linear-gradient(45deg, var(--color) 25%, transparent 25%, transparent 75%, var(--color) 75%, var(--color) 100%); linear-gradient(45deg, var(--color) 25%, transparent 25%, transparent 75%, var(--color) 75%, var(--color) 100%);
background-size: 20px 20px; background-size: 20px 20px;
background-position: 0 0, 10px 10px; background-position: 0 0, 10px 10px;

5
src/components/AnEditor/components/EditorMainBlock.vue
View File

@ -28,7 +28,8 @@
import { PropType } from "vue"; import { PropType } from "vue";
import { BlockerMap } from "../blocks"; import { BlockerMap } from "../blocks";
import DragResizer from "./DragResizer.vue"; import DragResizer from "./DragResizer.vue";
import { Block, Container, EditorKey } from "../core"; import { Block, Container } from "../core";
import { ContextKey } from "../core/plugin";
const props = defineProps({ const props = defineProps({
data: { data: {
@ -41,7 +42,7 @@ const props = defineProps({
}, },
}); });
const { setCurrentBlock, refLine } = inject(EditorKey)!; const { setCurrentBlock, refLine } = inject(ContextKey)!;
const { active, recordBlocksXY, updateRefLine } = refLine; const { active, recordBlocksXY, updateRefLine } = refLine;
/** /**

6
src/components/AnEditor/components/EditorMainHeader.vue
View File

@ -21,7 +21,7 @@
</span> </span>
<span class="text-gray-400 text-xs mr-2"> <span class="text-gray-400 text-xs mr-2">
组件： 组件：
<span class="inline-block w-8 text-gray-700">{{ blocks.length }} 个</span> <span class="inline-block w-8 text-gray-700">{{ container.children.length }} 个</span>
</span> </span>
<a-tooltip content="自适应比例" position="bottom"> <a-tooltip content="自适应比例" position="bottom">
<a-button type="text" @click="setContainerOrigin"> <a-button type="text" @click="setContainerOrigin">
@ -62,8 +62,8 @@
<script setup lang="ts"> <script setup lang="ts">
import InputTexter from './InputTexter.vue'; import InputTexter from './InputTexter.vue';
// import EditorMainConfig from './EditorMainConfig.vue'; // import EditorMainConfig from './EditorMainConfig.vue';
import { EditorKey } from '../core';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { ContextKey } from '../core/plugin';
const props = defineProps({ const props = defineProps({
rightPanelCollapsed: { rightPanelCollapsed: {
@ -74,7 +74,7 @@ const props = defineProps({
const emit = defineEmits(['preview', 'update:rightPanelCollapsed']); const emit = defineEmits(['preview', 'update:rightPanelCollapsed']);
const collapsed = useVModel(props, 'rightPanelCollapsed', emit); const collapsed = useVModel(props, 'rightPanelCollapsed', emit);
const { container, blocks, setContainerOrigin } = inject(EditorKey)!; const { container, setContainerOrigin } = inject(ContextKey)!;
const visible = ref(false); const visible = ref(false);
</script> </script>

7
src/components/AnEditor/components/EditorRight.vue
View File

@ -5,7 +5,7 @@
<template #icon> <template #icon>
<i :class="BlockerMap[model.type].icon"></i> <i :class="BlockerMap[model.type].icon"></i>
</template> </template>
{{ BlockerMap[model.type].title }}属性 {{ BlockerMap[model.type].title }}
</a-tag> </a-tag>
<a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto"> <a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto">
<a-form :model="{}" layout="vertical" class="pr-3"> <a-form :model="{}" layout="vertical" class="pr-3">
@ -23,12 +23,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { BlockerMap } from '../blocks'; import { BlockerMap } from '../blocks';
import { Block, EditorKey } from '../core'; import { Block } from '../core';
import { ContextKey } from '../core/plugin';
import EditorSetting from './EditorSetting.vue'; import EditorSetting from './EditorSetting.vue';
const collapsed = defineModel<boolean>('collapsed'); const collapsed = defineModel<boolean>('collapsed');
const model = defineModel<Block | null>('block'); const model = defineModel<Block | null>('block');
const { container } = inject(EditorKey)!; const { container } = inject(ContextKey)!;
</script> </script>
<style scoped></style> <style scoped></style>

2
src/components/AnEditor/components/EditorSetting.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="p-3"> <div class="p-3">
<a-tag class="text-sm! mb-2 w-full" size="large" color="blue" :bordered="false"> <a-tag class="text-sm! mb-2 w-full" size="large" color="red" :bordered="false">
<template #icon> <template #icon>
<i class="icon-park-outline-config" ></i> <i class="icon-park-outline-config" ></i>
</template> </template>

30
src/components/AnEditor/core/block.ts
View File

@ -1,4 +1,4 @@
import { Component } from "vue"; import { Component } from 'vue';
/** /**
* 组件参数 * 组件参数
@ -70,25 +70,11 @@ export interface Block<T = any> {
params: T; params: T;
} }
export interface ContextMenuItem { export function formatBlockStyle(block: Block) {
type?: 'divider' | 'menu' const { bgColor, bgImage } = block;
showChildren?: boolean return {
onClick?: (item: ContextMenuItem) => void; backgroundColor: bgColor,
icon?: Component | string backgroundImage: bgImage ? `url(${bgImage})` : null,
name: string backgroundSize: '100% 100%',
tip?: string };
class?: string;
children?: ContextMenuItem[]
}
export const useBlockContextMenu = (blocks: Block[]) => {
const items: ContextMenuItem[] = [
{
name: '删除',
icon: () => h('i', { class: 'icon-park-outline-delete' }),
onClick(item) {
},
}
]
} }

42
src/components/AnEditor/core/container.ts
View File

@ -1,3 +1,6 @@
import { CSSProperties } from 'vue';
import { Block } from './block';
/** /**
* 画布配置 * 画布配置
*/ */
@ -42,8 +45,22 @@ export interface Container {
* 背景颜色 * 背景颜色
*/ */
bgColor: string; bgColor: string;
/**
* 使用的语言列表
*/
langList: string[]; langList: string[];
/**
* 语言的切换间隔
*/
langSwitch: number; langSwitch: number;
/**
* 组件列表
*/
children: Block[];
/**
* 当前选中的组件
*/
current: Block | null;
} }
/** /**
@ -51,15 +68,30 @@ export interface Container {
*/ */
export const defaultContainer: Container = { export const defaultContainer: Container = {
id: 11, id: 11,
title: "国庆节喜庆版式设计", title: '国庆节喜庆版式设计',
description: "适用于国庆节1日-7日间上午9:00-10:00播出的版式设计", description: '适用于国庆节1日-7日间上午9:00-10:00播出的版式设计',
x: 0, x: 0,
y: 0, y: 0,
zoom: 0.7, zoom: 0.7,
width: 1920, width: 1920,
height: 1080, height: 1080,
bgImage: "", bgImage: '',
bgColor: "#ffffff", bgColor: '#ffffff',
langList: ['ch', 'en'], langList: ['ch', 'en'],
langSwitch: 0 langSwitch: 0,
children: [],
current: null,
}; };
export function formatContainerStyle(container: Container) {
const { width, height, bgColor, bgImage, zoom, x, y } = container;
return {
position: 'absolute',
width: `${width}px`,
height: `${height}px`,
backgroundColor: bgColor,
backgroundImage: bgImage ? `url(${bgImage})` : null,
backgroundSize: '100% 100%',
transform: `translate3d(${x}px, ${y}px, 0) scale(${zoom})`,
} as CSSProperties;
}

47
src/components/AnEditor/core/editor.ts
View File

@ -1,20 +1,16 @@
import { Container, defaultContainer } from "./container"; import { Container, defaultContainer } from './container';
import { Block } from "./block"; import { Block } from './block';
import { useReferenceLine } from "./ref-line"; import { useReferenceLine } from './ref-line';
import { BlockerMap } from "../blocks"; import { BlockerMap } from '../blocks';
import { cloneDeep } from "lodash-es"; import { cloneDeep } from 'lodash-es';
import { CSSProperties, InjectionKey } from "vue"; import { CSSProperties, InjectionKey } from 'vue';
import { useScene } from "./scene"; import { useScene } from './scene';
export const useEditor = () => { export const useEditor = () => {
/** /**
* 画布设置 * 画布设置
*/ */
const container = ref<Container>({ ...defaultContainer }); const container = ref<Container>({ ...defaultContainer });
/**
* 组件列表
*/
const blocks = ref<Block[]>([]);
/** /**
* 选中组件 * 选中组件
*/ */
@ -22,7 +18,7 @@ export const useEditor = () => {
/** /**
* 参考线 * 参考线
*/ */
const refLine = useReferenceLine(blocks, currentBlock); const refLine = useReferenceLine(container);
/** /**
* 画布移动和缩放 * 画布移动和缩放
*/ */
@ -43,17 +39,11 @@ export const useEditor = () => {
if (!blocker) { if (!blocker) {
return; return;
} }
const ids = blocks.value.map((i) => Number(i.id)); const ids = container.value.children.map(i => Number(i.id));
const maxId = ids.length ? Math.max.apply(null, ids) : 0; const maxId = ids.length ? Math.max.apply(null, ids) : 0;
const id = (maxId + 1).toString(); const id = (maxId + 1).toString();
const title = `${blocker.title}${id}`; const title = `${blocker.title}${id}`;
blocks.value.push({ container.value.children.push({ ...cloneDeep(blocker.initial), id, x, y, title });
...cloneDeep(blocker.initial),
id,
x,
y,
title,
});
}; };
/** /**
@ -61,9 +51,9 @@ export const useEditor = () => {
* @param block 组件 * @param block 组件
*/ */
const rmBlock = (block: Block) => { const rmBlock = (block: Block) => {
const index = blocks.value.indexOf(block); const index = container.value.children.indexOf(block);
if (index > -1) { if (index > -1) {
blocks.value.splice(index, 1); container.value.children.splice(index, 1);
} }
}; };
@ -77,7 +67,7 @@ export const useEditor = () => {
return { return {
backgroundColor: bgColor, backgroundColor: bgColor,
backgroundImage: bgImage ? `url(${bgImage})` : undefined, backgroundImage: bgImage ? `url(${bgImage})` : undefined,
backgroundSize: "100% 100%", backgroundSize: '100% 100%',
}; };
}; };
@ -89,12 +79,12 @@ export const useEditor = () => {
const formatContainerStyle = (container: Container) => { const formatContainerStyle = (container: Container) => {
const { width, height, bgColor, bgImage, zoom, x, y } = container; const { width, height, bgColor, bgImage, zoom, x, y } = container;
return { return {
position: "absolute", position: 'absolute',
width: `${width}px`, width: `${width}px`,
height: `${height}px`, height: `${height}px`,
backgroundColor: bgColor, backgroundColor: bgColor,
backgroundImage: bgImage ? `url(${bgImage})` : undefined, backgroundImage: bgImage ? `url(${bgImage})` : undefined,
backgroundSize: "100% 100%", backgroundSize: '100% 100%',
transform: `translate3d(${x}px, ${y}px, 0) scale(${zoom})`, transform: `translate3d(${x}px, ${y}px, 0) scale(${zoom})`,
} as CSSProperties; } as CSSProperties;
}; };
@ -104,7 +94,7 @@ export const useEditor = () => {
* @param block 组件 * @param block 组件
*/ */
const setCurrentBlock = (block: Block | null) => { const setCurrentBlock = (block: Block | null) => {
for (const item of blocks.value) { for (const item of container.value.children) {
item.actived = false; item.actived = false;
} }
if (!block) { if (!block) {
@ -121,7 +111,7 @@ export const useEditor = () => {
const setContainerOrigin = () => { const setContainerOrigin = () => {
container.value.x = 0; container.value.x = 0;
container.value.y = 0; container.value.y = 0;
const el = document.querySelector(".juetan-editor-container"); const el = document.querySelector('.juetan-editor-container');
if (el) { if (el) {
const { width, height } = el.getBoundingClientRect(); const { width, height } = el.getBoundingClientRect();
const wZoom = width / container.value.width; const wZoom = width / container.value.width;
@ -133,7 +123,6 @@ export const useEditor = () => {
return { return {
container, container,
blocks,
currentBlock, currentBlock,
refLine, refLine,
scene, scene,
@ -147,4 +136,4 @@ export const useEditor = () => {
}; };
}; };
export const EditorKey = Symbol("EditorKey") as InjectionKey<ReturnType<typeof useEditor>>; export const EditorKey = Symbol('EditorKey') as InjectionKey<ReturnType<typeof useEditor>>;

255
src/components/AnEditor/core/plugin.ts Normal file
View File

@ -0,0 +1,255 @@
import { CSSProperties, Component } from 'vue';
import { Block } from './block';
import { Container, defaultContainer } from './container';
import { cloneDeep } from 'lodash-es';
import { useReferenceLine } from './ref-line';
import { useScene } from './scene';
export interface BlockItem {
/**
* 需唯一
*/
type: string;
/**
* 图标
*/
icon: string;
/**
* 名字
*/
title: string;
/**
* 描述
*/
description: string;
/**
* 在组件库时的渲染
*/
pickRender?: any;
/**
* 在列表中时的渲染
*/
listRender?: any;
/**
* 在编辑中时的渲染
*/
showRender?: any;
/**
* 在预览中时的渲染
*/
viewRender?: any;
/**
* 编辑属性时的渲染
*/
editRender?: any;
/**
* 初始化默认参数
*/
onInit?: any;
/**
* 转换数据
*/
onLoad?: any;
/**
* 转换数据
*/
onSave?: any;
}
interface SortableRender {
name: string;
sort?: number;
render: Component;
}
export interface Plugin {
/**
* 名字需唯一
*/
name: string;
/**
* 须有唯一的 name 属性
*/
hlRender?: SortableRender;
/**
* 须有唯一的 name 属性
*/
hrRender?: SortableRender;
/**
* 须有唯一的 name 属性
*/
ltRender?: SortableRender;
/**
* 须有唯一的 name 属性
*/
lbRender?: SortableRender;
/**
* 须有唯一的 name 属性
*/
mlRender?: SortableRender;
/**
* 须有唯一的 name 属性
*/
mrRender?: SortableRender;
/**
* 须有唯一的 name 属性
*/
rtRender?: SortableRender;
rbRender?: () => BlockItem;
addBlockItem?: () => BlockItem;
blockItems?: BlockItem | BlockItem[];
onInit?: (context: any) => void;
onSave?: () => void;
onLoad?: (data: any) => void;
}
export const usePluginContext = (pluginlist: Plugin[]) => {
const container: Ref<Container> = ref(cloneDeep(defaultContainer)) as any;
const blocks = computed(() => container.value.children);
const blockerMap: Record<string, BlockItem> = {};
const refLine = useReferenceLine(container);
const scene = useScene(container);
/** 顶部栏左侧 */
const HL: Ref<SortableRender[]> = ref([]);
/** 顶部栏右侧 */
const HR: Ref<SortableRender[]> = ref([]);
/** 左侧栏顶部 */
const LC: Ref<SortableRender[]> = ref([]);
/** 左侧栏底部 */
const LB: Ref<SortableRender[]> = ref([]);
/** 中间栏左侧 */
const ML: Ref<SortableRender[]> = ref([]);
/** 中间栏右侧 */
const MR: Ref<SortableRender[]> = ref([]);
/** 右侧栏顶部 */
const RC: Ref<SortableRender[]> = ref([]);
function load(data: any) {
data.children = data.children.map(item => {
return blockerMap[item.type]?.onLoad?.(item) ?? item;
});
for (const plugin of pluginlist) {
data = plugin.onLoad?.(data) ?? data;
}
return data;
}
function save(container: Container) {}
function addBlock(type: string, x = 0, y = 0) {
const blocker = blockerMap[type];
if (!type) {
return;
}
if (!blocker) {
return;
}
const ids = blocks.value.map(i => Number(i.id));
const maxId = ids.length ? Math.max.apply(null, ids) : 0;
const id = (maxId + 1).toString();
const title = `${blocker.title}${id}`;
const block = { ...cloneDeep(blocker.onInit?.()), id, x, y, title };
blocks.value.push(block);
}
function rmBlock(block: Block) {
const index = blocks.value.indexOf(block);
if (index > -1) {
blocks.value.splice(index, 1);
}
}
function setCurrentBlock(block: Block | null) {
for (const item of container.value.children) {
item.actived = false;
}
if (!block) {
container.value.current = null;
} else {
block.actived = true;
container.value.current = block;
}
}
function setContainerOrigin() {
container.value.x = 0;
container.value.y = 0;
const el = document.querySelector('.juetan-editor-container');
if (el) {
const { width, height } = el.getBoundingClientRect();
const wZoom = width / container.value.width;
const hZoom = height / container.value.width;
const zoom = Math.floor((wZoom > hZoom ? wZoom : hZoom) * 10000) / 10000;
container.value.zoom = zoom;
}
}
const context = {
container,
blockerMap,
refLine,
scene,
HL,
HR,
LB,
LC,
ML,
MR,
RC,
setCurrentBlock,
setContainerOrigin,
addBlock,
rmBlock,
};
function addRender(list: any[], render?: SortableRender) {
if (!render) {
return;
}
if (list.some(i => i.name === render.name)) {
console.log('name has existed');
return;
}
list.push(render);
}
for (const plugin of pluginlist) {
plugin.onInit?.(context);
addRender(HL.value, plugin.hlRender);
addRender(HR.value, plugin.hrRender);
addRender(LC.value, plugin.ltRender);
addRender(LB.value, plugin.lbRender);
addRender(ML.value, plugin.mlRender);
addRender(MR.value, plugin.mrRender);
addRender(RC.value, plugin.rtRender);
const bi = plugin.addBlockItem?.();
if (bi) {
blockerMap[bi.type] = bi;
}
}
HL.value.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));
HR.value.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));
LC.value.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));
LB.value.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));
ML.value.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));
MR.value.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));
RC.value.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));
return context;
};
export const ContextKey = Symbol('ContextKey') as InjectionKey<ReturnType<typeof usePluginContext>>;
function corePlugin(): Plugin {
return {
name: 'core',
rtRender: {
name: 'ss',
render() {
return () => 123;
},
},
};
}

7
src/components/AnEditor/core/ref-line.ts
View File

@ -1,6 +1,7 @@
import { Ref } from "vue"; import { Ref } from "vue";
import { getClosestValInSortedArr } from "../utils/closest"; import { getClosestValInSortedArr } from "../utils/closest";
import { Block } from "./block"; import { Block } from "./block";
import { Container } from "./container";
/** /**
* 组件参考线 * 组件参考线
@ -8,7 +9,7 @@ import { Block } from "./block";
* @param current 当前组件 * @param current 当前组件
* @returns * @returns
*/ */
export const useReferenceLine = (blocks: Ref<Block[]>, current: Ref<Block | null>) => { export const useReferenceLine = (container: Ref<Container>) => {
let xYsMap = new Map<number, number[]>(); let xYsMap = new Map<number, number[]>();
let yXsMap = new Map<number, number[]>(); let yXsMap = new Map<number, number[]>();
let sortedXs: number[] = []; let sortedXs: number[] = [];
@ -22,8 +23,8 @@ export const useReferenceLine = (blocks: Ref<Block[]>, current: Ref<Block | null
*/ */
const recordBlocksXY = () => { const recordBlocksXY = () => {
clear(); clear();
for (const block of blocks.value) { for (const block of container.value.children) {
if (block === current.value) { if (block === container.value.current) {
continue; continue;
} }
const { minX, minY, midX, midY, maxX, maxY } = getBlockBox(block); const { minX, minY, midX, midY, maxX, maxY } = getBlockBox(block);

6
src/components/AnEditor/utils/array.ts Normal file
View File

@ -0,0 +1,6 @@
export function arraify<T>(data: T | T[]): T[] {
if (!data) {
return [];
}
return Array.isArray(data) ? data : [data];
}

10
src/libs/dayjs/index.ts
View File

@ -4,6 +4,16 @@ import localData from 'dayjs/plugin/localeData';
import relativeTime from 'dayjs/plugin/relativeTime'; import relativeTime from 'dayjs/plugin/relativeTime';
import { App } from 'vue'; import { App } from 'vue';
declare module 'dayjs' {
export var DATETIME: 'YYYY-MM-DD HH:mm';
export var DATE: 'YYYY-MM-DD';
export var TIME: 'HH:mm:ss';
export var install: (app: App) => void;
interface Dayjs {
_format: Dayjs['format'];
}
}
/** /**
* 中文语言包 * 中文语言包
*/ */

19
src/libs/dayjs/interface.d.ts vendored
View File

@ -1,19 +0,0 @@
import 'dayjs';
import { App } from 'vue';
declare module 'dayjs' {
/**
* 默认日期时间格式
*/
export var DATETIME: 'YYYY-MM-DD HH:mm';
export var DATE: 'YYYY-MM-DD';
export var TIME: 'HH:mm:ss';
interface Dayjs {
_format: Dayjs['format'];
}
export var install: (app: App) => void;
}

59
src/pages/_layout/index.vue
View File

@ -9,7 +9,7 @@
</a-button> --> </a-button> -->
<router-link to="/" class="px-2 flex items-center gap-2 text-slate-700"> <router-link to="/" class="px-2 flex items-center gap-2 text-slate-700">
<img src="/favicon.ico" alt="" width="24" height="24" class="" /> <img src="/favicon.ico" alt="" width="24" height="24" class="" />
<h1 class="relative text-[18px] leading-[22px] dark:text-white m-0 p-0 font-semibold"> <h1 class="relative text-[18px] leading-[22px] dark:text-white m-0 p-0 font-normal">
{{ appStore.title }} {{ appStore.title }}
<span class="absolute -right-10 -top-1 font-normal text-xs text-gray-400"> v0.0.1 </span> <span class="absolute -right-10 -top-1 font-normal text-xs text-gray-400"> v0.0.1 </span>
</h1> </h1>
@ -55,13 +55,14 @@
</a-layout-sider> </a-layout-sider>
<a-layout class="layout-content flex-1"> <a-layout class="layout-content flex-1">
<a-layout-content class="overflow-x-auto"> <a-layout-content class="overflow-x-auto">
<a-spin :loading="appStore.pageLoding" tip="页面加载中，请稍等..." class="block h-full w-full"> <a-spin :loading="appStore.pageLoding" class="block h-full w-full">
<template #icon> <template #icon>
<IconSync></IconSync> <div class="loader"></div>
</template> </template>
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive :include="menuStore.caches"> <keep-alive :include="menuStore.caches">
<component :is="Component"></component> <component v-if="hasAuth" :is="Component"></component>
<AnForbidden v-else></AnForbidden>
</keep-alive> </keep-alive>
</router-view> </router-view>
</a-spin> </a-spin>
@ -75,20 +76,44 @@
import { useAppStore } from '@/store/app'; import { useAppStore } from '@/store/app';
import { useMenuStore } from '@/store/menu'; import { useMenuStore } from '@/store/menu';
import { Message } from '@arco-design/web-vue'; import { Message } from '@arco-design/web-vue';
import { IconSync } from '@arco-design/web-vue/es/icon';
import { useFullscreen } from '@vueuse/core'; import { useFullscreen } from '@vueuse/core';
import Menu from './Menu.vue'; import Menu from './Menu.vue';
import userDropdown from './UserDropdown.vue'; import userDropdown from './UserDropdown.vue';
import { useUserStore } from '@/store/user';
defineOptions({ name: 'LayoutPage' }); defineOptions({ name: 'LayoutPage' });
const route = useRoute(); const route = useRoute();
const appStore = useAppStore(); const appStore = useAppStore();
const menuStore = useMenuStore(); const menuStore = useMenuStore();
const userStore = useUserStore();
const isCollapsed = ref(false); const isCollapsed = ref(false);
const themeConfig = ref({ visible: false }); const themeConfig = ref({ visible: false });
const { toggle, isSupported } = useFullscreen(); const { toggle, isSupported } = useFullscreen();
const hasAuth = computed(() => {
return route.matched.every(item => {
const needAuth = item.meta.auth;
const userAuth = userStore.auth;
if (needAuth?.includes('*')) {
return true;
}
if (!userStore.accessToken && needAuth?.includes('unlogin')) {
return true;
}
if (!userStore.accessToken) {
return false;
}
if (!needAuth) {
return true;
}
if (userAuth.some(i => needAuth.some(j => j === i))) {
return true;
}
return false;
});
});
const buttons = [ const buttons = [
{ {
icon: 'icon-park-outline-remind', icon: 'icon-park-outline-remind',
@ -187,6 +212,30 @@ const buttons = [
background-color: #e4ebf1; background-color: #e4ebf1;
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
} }
/* HTML: <div class="loader"></div> */
.loader {
width: 120px;
height: 16px;
border-radius: 20px;
color: #222;
border: 2px solid;
position: relative;
}
.loader::before {
content: '';
position: absolute;
margin: 2px;
inset: 0 100% 0 0;
border-radius: inherit;
background: currentColor;
animation: l6 2s infinite;
}
@keyframes l6 {
100% {
inset: 0;
}
}
</style> </style>
<route lang="json"> <route lang="json">

2
src/pages/content/material-category/index.vue
View File

@ -18,7 +18,7 @@ const { component: CategoryTable } = useTable({
<div class="flex flex-col overflow-hidden"> <div class="flex flex-col overflow-hidden">
<span> <span>
{record.name} {record.name}
<span class="text-gray-400 text-xs truncate ml-2">@{record.code}</span> <span class="text-orange-500 truncate ml-2">@{record.code}</span>
</span> </span>
<div class="text-gray-400 text-xs truncate mt-0.5">{record.description}</div> <div class="text-gray-400 text-xs truncate mt-0.5">{record.description}</div>
</div> </div>

6
src/pages/setting/common/index.vue
View File

@ -1,6 +1,10 @@
<template> <template>
<bread-page> <bread-page>
<a-form :model="{}" :label-col-props="{ span: 3 }" label-align="left" layout="vertical" class="space-y-6"> <div>
<h2 class="m-0 text-base">常规设置</h2>
<p class="text-gray-500 mt-2">首次为你的帐户添加密码时，你需要前往密码重置页面，以便我们验证你的身份。</p>
</div>
<a-form :model="{}" :label-col-props="{ span: 3 }" label-align="left" layout="vertical" class="space-y-6 mt-4 col-form">
<a-form-item label="站点LOGO"> <a-form-item label="站点LOGO">
<a-avatar :size="64"> <a-avatar :size="64">
<img :src="appStore.logo" alt="" /> <img :src="appStore.logo" alt="" />

55
src/pages/setting/mail/index.vue
View File

@ -1,21 +1,17 @@
<template> <template>
<bread-page> <bread-page>
<div class="flex"> <div class="flex">
<a-form <div>
:model="{}" <div>
:label-col-props="{ span: 3 }" <h2 class="m-0 text-base">邮件设置</h2>
:disabled="!mail.enable" <p class="text-gray-500 mt-1.5">首次为你的帐户添加密码时，你需要前往密码重置页面，以便我们验证你的身份。</p>
layout="vertical" </div>
label-align="left" <a-form :model="{}" :label-col-props="{ span: 3 }" :disabled="!mail.enable" layout="vertical" label-align="left" class="col-form divide-y space-y-6">
class="w-[580px]! space-y-6"
>
<a-form-item label="是否启用" :disabled="false"> <a-form-item label="是否启用" :disabled="false">
<a-radio-group v-model="mail.enable"> <a-switch v-model="mail.enable"> </a-switch>
<a-radio :value="true">启用</a-radio> <template #help> 启用后其他服务可发送邮件通知。 </template>
<a-radio :value="false">禁用</a-radio>
</a-radio-group>
</a-form-item> </a-form-item>
<a-form-item label="服务器和端口"> <a-form-item label="服务器地址和端口" class="pt-6">
<a-input v-model="mail.smtpHost" allow-clear placeholder="请输入" class="!w-[314px]"></a-input> <a-input v-model="mail.smtpHost" allow-clear placeholder="请输入" class="!w-[314px]"></a-input>
<span class="inline-block px-2">:</span> <span class="inline-block px-2">:</span>
<a-input-number v-model="mail.smtpPort" :min="0" :max="65535" class="w-24!"></a-input-number> <a-input-number v-model="mail.smtpPort" :min="0" :max="65535" class="w-24!"></a-input-number>
@ -26,42 +22,31 @@
<a target="_blank" class="mr-2" href="https://mail.qq.com">QQ邮箱</a>等。 <a target="_blank" class="mr-2" href="https://mail.qq.com">QQ邮箱</a>等。
</template> </template>
</a-form-item> </a-form-item>
<a-form-item label="发信人地址"> <a-form-item label="发信人地址" class="pt-6">
<a-input v-model="mail.smtpFrom" placeholder="请输入" class="!w-[432px]"></a-input> <a-input v-model="mail.smtpFrom" placeholder="请输入" class="!w-[432px]"></a-input>
<template #help> 示例: example@mail.com。仅作为发送邮件时的发送人标识，与登陆无关。</template> <template #help> 示例: example@mail.com。仅作为发送邮件时的发送人标识，与登陆无关。</template>
</a-form-item> </a-form-item>
<a-form-item label="是否需要验证"> <a-form-item label="是否需要验证" class="pt-6">
<a-radio-group v-model="mail.smtpAuth"> <a-switch v-model="mail.smtpAuth"> </a-switch>
<a-radio :value="true">是</a-radio> <template #help> 可选 </template>
<a-radio :value="false">否</a-radio>
</a-radio-group>
</a-form-item> </a-form-item>
<a-form-item label="验证账号"> <a-form-item label="验证账号" class="pt-6">
<a-input <a-input :disabled="!mail.enable || !mail.smtpAuth" v-model="mail.smtpUser" placeholder="请输入" class="!w-[432px]"></a-input>
:disabled="!mail.enable || !mail.smtpAuth"
v-model="mail.smtpUser"
placeholder="请输入"
class="!w-[432px]"
></a-input>
<template #help> 示例: example@mail.com。企业邮箱请使用企业域名后缀。</template> <template #help> 示例: example@mail.com。企业邮箱请使用企业域名后缀。</template>
</a-form-item> </a-form-item>
<a-form-item label="验证密码"> <a-form-item label="验证密码" class="pt-6">
<a-input <a-input :disabled="!mail.enable || !mail.smtpAuth" v-model="mail.smtpPass" placeholder="请输入" class="!w-[432px]"></a-input>
:disabled="!mail.enable || !mail.smtpAuth"
v-model="mail.smtpPass"
placeholder="请输入"
class="!w-[432px]"
></a-input>
<template #help> 示例：AATOLARFABJKYWUY。具体请在对应邮箱设置面板进行生成。 </template> <template #help> 示例：AATOLARFABJKYWUY。具体请在对应邮箱设置面板进行生成。 </template>
</a-form-item> </a-form-item>
<a-form-item :disabled="false"> <a-form-item :disabled="false" class="pt-2">
<a-button type="primary"> 保存修改 </a-button> <a-button type="primary"> 保存修改 </a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</div>
<a-divider direction="vertical" :margin="32"></a-divider> <a-divider direction="vertical" :margin="32"></a-divider>
<div class="flex-1"> <div class="flex-1">
<div> <div>
<div class="text-base font-semibold">配置测试</div> <div class="text-base font-semibold">邮件测试</div>
<div class="text-gray-400 mt-1">发送一封测试邮件，检测邮件设置是否能正常工作。</div> <div class="text-gray-400 mt-1">发送一封测试邮件，检测邮件设置是否能正常工作。</div>
<div class="mt-6"> <div class="mt-6">
<a-input placeholder="接收人邮箱" class="w-[432px]!"></a-input> <a-input placeholder="接收人邮箱" class="w-[432px]!"></a-input>

2
src/pages/system/user/index.vue
View File

@ -38,7 +38,7 @@ const usernameRender: TableColumnRender = ({ record }) => (
<div class="w-full flex-1 overflow-hidden"> <div class="w-full flex-1 overflow-hidden">
<div> <div>
<span class="cursor-pointer hover:text-brand-500">{record.nickname}</span> <span class="cursor-pointer hover:text-brand-500">{record.nickname}</span>
<span class="text-gray-400 text-xs truncate ml-2">@{record.username}</span> <span class="text-orange-500 truncate ml-2">@{record.username}</span>
</div> </div>
<div class="w-full text-gray-400 space-x-4 text-xs"> <div class="w-full text-gray-400 space-x-4 text-xs">
<span> <span>

15
src/styles/css-arco.less
View File

@ -69,7 +69,7 @@ body {
margin-top: 8px; margin-top: 8px;
} }
[class^="icon-"] { [class^="icon-"] {
font-size: 16px; font-size: 18px;
vertical-align: -2px; vertical-align: -2px;
} }
.arco-menu-item { .arco-menu-item {
@ -159,3 +159,16 @@ body {
border-color: var(--color-neutral-2); border-color: var(--color-neutral-2);
} }
} }
.col-form {
.arco-form-item-wrapper-col {
flex-direction: row;
}
.arco-form-item-content-wrapper {
width: 450px;
}
.arco-form-item-message {
font-size: 14px;
}
}

1
src/types/auto-component.d.ts vendored
View File

@ -9,7 +9,6 @@ declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
AAutoComplete: typeof import('@arco-design/web-vue')['AutoComplete'] AAutoComplete: typeof import('@arco-design/web-vue')['AutoComplete']
AAvatar: typeof import('@arco-design/web-vue')['Avatar'] AAvatar: typeof import('@arco-design/web-vue')['Avatar']
ABadge: typeof import('@arco-design/web-vue')['Badge']
ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb'] ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem'] ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
AButton: typeof import('@arco-design/web-vue')['Button'] AButton: typeof import('@arco-design/web-vue')['Button']