minya
/
vue3-mgt-template
mirror of https://github.com/LCJ-MinYa/vue3-mgt-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 拖拽布局-国际化

Browse Source
flex-api
LCJ-MinYa 1 month ago
parent 049bb060ac
commit c12cf2a911
4 changed files with 339 additions and 246 deletions
Show Stats Download Patch File Download Diff File

4
demoHtml/flex/css/index.css
Unescape Escape View File

@ -49,6 +49,10 @@ html {
border-bottom: 2px solid #667eea; border-bottom: 2px solid #667eea;
} }
.panel-title span:nth-child(2) {
display: none;
}
/* 组件面板 */ /* 组件面板 */
#components-panel { #components-panel {
position: relative; position: relative;

380
demoHtml/flex/index.html
Unescape Escape View File

@ -19,212 +19,218 @@
rel="stylesheet" rel="stylesheet"
href="./css/index.css" href="./css/index.css"
/> />
<script src="./js/color.js"></script>
<script src="./js/i18n.js"></script>
<script src="./js/gridstack-all.js"></script> <script src="./js/gridstack-all.js"></script>
<script src="./js/jquery.min.js"></script> <script src="./js/jquery.min.js"></script>
<script src="./layui/layui.js"></script> <script src="./layui/layui.js"></script>
<script src="./js/color.js"></script>
</head> </head>
<body> <body>
<div id="app"> <div id="root"></div>
<!-- <div id="header"> <template id="template">
{{ const i18n = layui.i18n; }}
<div id="app">
<!-- <div id="header">
<h1>可视化布局编辑器</h1> <h1>可视化布局编辑器</h1>
<div class="header-actions"> <div class="header-actions">
<span>拖拽组件到画布区域</span> <span>拖拽组件到画布区域</span>
</div> </div>
</div> --> </div> -->
<div id="main"> <div id="main">
<!-- 组件列表 --> <!-- 组件列表 -->
<div id="components-panel"> <div id="components-panel">
<div class="panel-title"> <div class="panel-title">
<span>组件列表</span> <span>{{= i18n.$t('user.component_list') }}</span>
</div> </div>
<div class="components-list"> <div class="components-list">
<div class="component-item grid-stack-item"> <div class="component-item grid-stack-item">
<div class="grid-stack-item-content"> <div class="grid-stack-item-content">
<img <img
class="image-container default-image" class="image-container default-image"
src="./image/img.png" src="./image/img.png"
/> />
</div>
</div>
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><span>{{= i18n.$t('user.component_text') }}</span></div>
</div> </div>
</div> </div>
<div class="component-item grid-stack-item"> <div
<div class="grid-stack-item-content"><span>文本</span></div> class="action-btn"
</div> id="trash"
</div>
<div
class="action-btn"
id="trash"
>
<div class="trash-container">
<i class="fas fa-trash"></i>
<span>拖动删除</span>
</div>
<div class="save-container">
<i class="fas fa-trash"></i>
<span>保存布局</span>
</div>
</div>
</div>
<!-- 画布容器 -->
<div id="canvas-panel">
<div id="canvas-tabs">
<button
class="tab-button active"
data-tab="welcome-screen"
> >
欢迎页 <div class="trash-container">
</button> <i class="fas fa-trash"></i>
<button <span>{{= i18n.$t('user.delete_btn') }}</span>
class="tab-button" </div>
data-tab="main-screen" <div class="save-container">
> <i class="fas fa-trash"></i>
首页 <span>{{= i18n.$t('user.save_btn') }}</span>
</button> </div>
</div>
</div> </div>
<!-- <div class="global-save-button-container"> <!-- 画布容器 -->
<div id="canvas-panel">
<div id="canvas-tabs">
<button
class="tab-button active"
data-tab="welcome-screen"
>
{{= i18n.$t('user.welcome_page') }}
</button>
<button
class="tab-button"
data-tab="main-screen"
>
{{= i18n.$t('user.main_page') }}
</button>
</div>
<!-- <div class="global-save-button-container">
<button class="global-save-button">保存布局</button> <button class="global-save-button">保存布局</button>
</div> --> </div> -->
<div <div
id="main-screen" id="main-screen"
class="grid-stack" class="grid-stack"
></div> ></div>
<div <div
id="welcome-screen" id="welcome-screen"
class="grid-stack" class="grid-stack"
></div> ></div>
</div> </div>
<!-- 当前选中组件属性 --> <!-- 当前选中组件属性 -->
<div id="props-panel"> <div id="props-panel">
<div class="panel-title"> <div class="panel-title">
<span>组件属性</span> <span id="component-prop">{{= i18n.$t('user.component_prop') }}</span>
<span id="page-prop">{{= i18n.$t('user.page_prop') }}</span>
</div>
<div class="wait-box">{{= i18n.$t('user.empty_component') }}</div>
<form class="hidden">
<div class="form-item">
<label for="childrenType">{{= i18n.$t('user.component_child_type') }}</label>
<input
type="text"
id="childrenType"
/>
</div>
<div class="form-item">
<label for="name">{{= i18n.$t('user.component_name') }}</label>
<input
type="text"
id="name"
/>
</div>
<div class="form-item">
<label for="image">{{= i18n.$t('user.background_image') }}</label>
<select id="image">
<option value="">{{= i18n.$t('user.please_select') }}</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png">movie</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png">图片一</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/2.jpg">图片二</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/3.jpg">图片三</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/4.jpg">图片四</option>
</select>
</div>
<div class="form-item">
<label for="background">{{= i18n.$t('user.background') }}</label>
<div id="background"></div>
</div>
<div class="form-item">
<label for="fontSize">{{= i18n.$t('user.font_size') }}</label>
<input
type="text"
id="fontSize"
/>
</div>
<div class="form-item">
<label for="color">{{= i18n.$t('user.font_color') }}</label>
<div id="color"></div>
</div>
<div class="form-item">
<label for="text">{{= i18n.$t('user.text_content') }}</label>
<input
type="text"
id="text"
/>
</div>
<div class="form-item">
<label for="fontWeight">文字宽度</label>
<input
type="text"
id="fontWeight"
/>
</div>
<div class="form-item">
<label for="eventsType">事件类型</label>
<input
type="text"
id="eventsType"
/>
</div>
<div class="form-item">
<label for="eventsAction">事件动作</label>
<input
type="text"
id="eventsAction"
/>
</div>
<div class="form-item">
<label for="defaultFocus">默认聚焦</label>
<input
type="text"
id="defaultFocus"
/>
</div>
<div class="form-item">
<label for="leftId">向左侧移动组件ID</label>
<select id="leftId">
<option value="">请选择</option>
</select>
</div>
<div class="form-item">
<label for="rightId">向右侧移动组件ID</label>
<select id="rightId">
<option value="">请选择</option>
</select>
</div>
<div class="form-item">
<label for="upId">向上侧移动组件ID</label>
<select id="upId">
<option value="">请选择</option>
</select>
</div>
<div class="form-item">
<label for="downId">向下侧移动组件ID</label>
<select id="downId">
<option value="">请选择</option>
</select>
</div>
<div class="form-item">
<label for="focusedStyle_background">获得焦点时背景颜色</label>
<div id="focusedStyle_background"></div>
</div>
<div class="form-item">
<label for="focusedStyle_border_width">获得焦点时边框宽度</label>
<input
type="text"
id="focusedStyle_border_width"
/>
</div>
<div class="form-item">
<label for="focusedStyle_border_color">获得焦点时边框颜色</label>
<div id="focusedStyle_border_color"></div>
</div>
<div class="form-item">
<label for="focusedStyle_scale">获得焦点时边框缩放大小</label>
<input
type="text"
id="focusedStyle_scale"
/>
</div>
</form>
</div> </div>
<div class="wait-box">请选择组件</div>
<form class="hidden">
<div class="form-item">
<label for="childrenType">组件子类型</label>
<input
type="text"
id="childrenType"
/>
</div>
<div class="form-item">
<label for="name">组件名称</label>
<input
type="text"
id="name"
/>
</div>
<div class="form-item">
<label for="image">背景图片</label>
<select id="image">
<option value="">请选择</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png">movie</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png">图片一</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/2.jpg">图片二</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/3.jpg">图片三</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/4.jpg">图片四</option>
</select>
</div>
<div class="form-item">
<label for="background">背景颜色</label>
<div id="background"></div>
</div>
<div class="form-item">
<label for="fontSize">文字大小</label>
<input
type="text"
id="fontSize"
/>
</div>
<div class="form-item">
<label for="color">文字颜色</label>
<div id="color"></div>
</div>
<div class="form-item">
<label for="text">文字内容</label>
<input
type="text"
id="text"
/>
</div>
<div class="form-item">
<label for="fontWeight">文字宽度</label>
<input
type="text"
id="fontWeight"
/>
</div>
<div class="form-item">
<label for="eventsType">事件类型</label>
<input
type="text"
id="eventsType"
/>
</div>
<div class="form-item">
<label for="eventsAction">事件动作</label>
<input
type="text"
id="eventsAction"
/>
</div>
<div class="form-item">
<label for="defaultFocus">默认聚焦</label>
<input
type="text"
id="defaultFocus"
/>
</div>
<div class="form-item">
<label for="leftId">向左侧移动组件ID</label>
<select id="leftId">
<option value="">请选择</option>
</select>
</div>
<div class="form-item">
<label for="rightId">向右侧移动组件ID</label>
<select id="rightId">
<option value="">请选择</option>
</select>
</div>
<div class="form-item">
<label for="upId">向上侧移动组件ID</label>
<select id="upId">
<option value="">请选择</option>
</select>
</div>
<div class="form-item">
<label for="downId">向下侧移动组件ID</label>
<select id="downId">
<option value="">请选择</option>
</select>
</div>
<div class="form-item">
<label for="focusedStyle_background">获得焦点时背景颜色</label>
<div id="focusedStyle_background"></div>
</div>
<div class="form-item">
<label for="focusedStyle_border_width">获得焦点时边框宽度</label>
<input
type="text"
id="focusedStyle_border_width"
/>
</div>
<div class="form-item">
<label for="focusedStyle_border_color">获得焦点时边框颜色</label>
<div id="focusedStyle_border_color"></div>
</div>
<div class="form-item">
<label for="focusedStyle_scale">获得焦点时边框缩放大小</label>
<input
type="text"
id="focusedStyle_scale"
/>
</div>
</form>
</div> </div>
</div> </div>
</div> </template>
</body> </body>
</html> </html>
<script src="./js/index.js"></script> <script src="./js/index.js"></script>

48
demoHtml/flex/js/i18n.js
Unescape Escape View File

@ -0,0 +1,48 @@
var userLangConfig = {
zhCN: {
user: {
component_list: '组件列表',
component_text: '文本',
delete_btn: '拖动删除',
save_btn: '保存布局',
welcome_page: '欢迎页',
main_page: '首页',
component_prop: '组件属性',
page_prop: '页面属性',
empty_component: '请选择组件',
component_child_type: '组件子类型',
component_name: '组件名称',
background_image: '背景图片',
please_select: '请选择',
background: '背景颜色',
font_size: '文字大小',
font_color: '文字颜色',
text_content: '文字内容',
},
},
en: {
colorpicker: {
clear: 'clear',
confirm: 'confirm',
},
user: {
component_list: 'component list',
component_text: 'text',
delete_btn: 'drag delete',
save_btn: 'save layout',
welcome_page: 'welcome page',
main_page: 'main page',
component_prop: 'component property',
page_prop: 'page property',
empty_component: 'please select component',
component_child_type: 'component child type',
component_name: 'component name',
background_image: 'background image',
please_select: 'please select',
background: 'background color',
font_size: 'font size',
font_color: 'font color',
text_content: 'text content',
},
},
};

153
demoHtml/flex/js/index.js
Unescape Escape View File

@ -10,55 +10,57 @@
let currentComponent = null; let currentComponent = null;
let cellHeight = 60; let cellHeight = 60;
// 让gridstack知道如何渲染，组件children中的content直接渲染html var initGridStack = () => {
GridStack.renderCB = function (el, w) { // 让gridstack知道如何渲染，组件children中的content直接渲染html
el.innerHTML = w.content; GridStack.renderCB = function (el, w) {
}; el.innerHTML = w.content;
};
GridStack.setupDragIn('#components-panel .component-item', undefined, [ GridStack.setupDragIn('#components-panel .component-item', undefined, [
{ {
w: 2, w: 2,
h: 2, h: 2,
type: 'image', type: 'image',
name: '图片', name: '图片',
background: '#fff', background: '#fff',
image: '', image: '',
eventsType: 'click', eventsType: 'click',
eventsAction: '', eventsAction: '',
defaultFocus: false, defaultFocus: false,
leftId: '', leftId: '',
rightId: '', rightId: '',
upId: '', upId: '',
downId: '', downId: '',
focusedStyle_background: '', focusedStyle_background: '',
focusedStyle_border_width: 0, focusedStyle_border_width: 0,
focusedStyle_border_color: '', focusedStyle_border_color: '',
focusedStyle_scale: 1, focusedStyle_scale: 1,
}, },
{ {
w: 2, w: 2,
h: 1, h: 1,
type: 'text', type: 'text',
childrenType: '', childrenType: '',
name: '文本', name: '文本',
background: '#fff', background: '#fff',
fontSize: 14, fontSize: 14,
color: '#333', color: '#333',
text: '文本', text: '文本',
fontWeight: 'normal', fontWeight: 'normal',
eventsType: 'click', eventsType: 'click',
eventsAction: '', eventsAction: '',
defaultFocus: false, defaultFocus: false,
leftId: '', leftId: '',
rightId: '', rightId: '',
upId: '', upId: '',
downId: '', downId: '',
focusedStyle_background: '', focusedStyle_background: '',
focusedStyle_border_width: 0, focusedStyle_border_width: 0,
focusedStyle_border_color: '', focusedStyle_border_color: '',
focusedStyle_scale: 1, focusedStyle_scale: 1,
}, },
]); ]);
};
// 生成唯一id // 生成唯一id
var generateUniqueId = function () { var generateUniqueId = function () {
@ -310,7 +312,13 @@
//将当前选中组件的属性显示在右侧列表中 //将当前选中组件的属性显示在右侧列表中
var setCurrentComponentProps = function (component) { var setCurrentComponentProps = function (component) {
// 设置标题 // 设置标题
$('#props-panel .panel-title span').text(isScreen(component.type) ? '画布属性' : '组件属性'); if (isScreen(component.type)) {
$('#component-prop').hide();
$('#page-prop').show();
} else {
$('#component-prop').show();
$('#page-prop').hide();
}
const form = $('#props-panel').find('form'); const form = $('#props-panel').find('form');
if (component.hasOwnProperty('childrenType')) { if (component.hasOwnProperty('childrenType')) {
@ -626,17 +634,44 @@
} }
}; };
var i18n = function () {
return new Promise((resolve) => {
setTimeout(() => {
// 设置语言
layui.i18n.set({
locale: 'en',
messages: {
// 扩展其他语言包
en: userLangConfig.en,
'zh-CN': userLangConfig.zhCN,
},
});
// 渲染页面模板
const template = $('#template').html();
const html = layui.laytpl(template, { tagStyle: 'modern' }).render();
$('#root').html(html);
resolve();
}, 500);
});
};
/** 执行方法 */ /** 执行方法 */
$(function () { $(function () {
init('welcome', welcome); (async function () {
init('main', main); // 国际化
// 调用绑定 await i18n();
bindComponentEvents(); // 初始化
// 处理Tab切换 initGridStack();
handleTabSwitch(); init('welcome', welcome);
// 处理保存按钮 init('main', main);
handleSaveClick(); // 调用绑定
// 处理画布点击事件 bindComponentEvents();
handleCanvasClick(); // 处理Tab切换
handleTabSwitch();
// 处理保存按钮
handleSaveClick();
// 处理画布点击事件
handleCanvasClick();
})();
}); });
})(); })();

Write Preview
Loading…
Cancel
Save