sileya-ai
/
vr-shopxo-source
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

可视化布局限宽优化

feat/task1-c-wallet
gongfuxiang 2022-12-01 14:49:41 +08:00
parent b5e67b232d
commit c23b1707cc
4 changed files with 4 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/layout/view/base.html
View File

@ -134,9 +134,6 @@
<!-- 侧边栏 - 布局 - 容器设置 -->
{{include file="../../../layout/view/public/offcanvas/offcanvas_layout_config" /}}
<!-- 侧边栏 - 布局模块 - 容器设置 -->
{{include file="../../../layout/view/public/offcanvas/offcanvas_layout_module_config" /}}
<!-- 侧边栏 - 模块配置 - 单图 -->
{{include file="../../../layout/view/public/offcanvas/offcanvas_module_config_images" /}}

6
app/layout/view/form_back.html
View File

@ -5,12 +5,6 @@ function FormBackLayoutConfig(e)
FormBackLayoutConfigHandle(e);
}
// 容器模块设置回调处理
function FormBackLayoutModuleConfig(e)
{
FormBackLayoutModuleConfigHandle(e);
}
// 单图选择回调处理
function FormBackModuleConfigImages(e)
{

87
app/layout/view/public/offcanvas/offcanvas_layout_module_config.html
View File

@ -1,87 +0,0 @@
<!-- 侧边栏 - 布局 - 容器设置 -->
<div id="offcanvas-layout-module-config" class="am-offcanvas module-offcanvas-container">
<div class="am-offcanvas-bar">
<div class="am-offcanvas-content am-padding-0">
<form class="am-form form-validation-layout-module-config" request-type="sync" request-value="FormBackLayoutModuleConfig">
<!-- 基础样式 -->
<div class="am-panel am-panel-default">
<div class="am-panel-hd">基础样式</div>
<div class="am-panel-bd">
<!-- 背景色 -->
{{include file="../../../layout/view/public/style/background_color" key="" required="" /}}
<!-- 边线颜色 -->
{{include file="../../../layout/view/public/style/color" key="_border" required="" name="边线颜色" /}}
</div>
</div>
<!-- 中屏样式 -->
<div class="am-panel am-panel-default">
<div class="am-panel-hd">中屏样式</div>
<div class="am-panel-bd">
<!-- 圆角 -->
{{include file="../../../layout/view/public/style/border_radius" max="30" key="_md" required="" /}}
<!-- 边线类型 -->
{{include file="../../../layout/view/public/style/border_style_4" key="_md" /}}
<!-- 边线大小 -->
{{include file="../../../layout/view/public/style/border_width_4" key="_md" /}}
<!-- 外边距 -->
{{include file="../../../layout/view/public/style/margin_4" key="_md" /}}
<!-- 内边距 -->
{{include file="../../../layout/view/public/style/padding_4" key="_md" /}}
</div>
</div>
<!-- 小屏样式 -->
<div class="am-panel am-panel-default">
<div class="am-panel-hd">小屏样式</div>
<div class="am-panel-bd">
<!-- 圆角 -->
{{include file="../../../layout/view/public/style/border_radius" max="30" key="_sm" required="" /}}
<!-- 边线类型 -->
{{include file="../../../layout/view/public/style/border_style_4" key="_sm" /}}
<!-- 边线大小 -->
{{include file="../../../layout/view/public/style/border_width_4" key="_sm" /}}
<!-- 外边距 -->
{{include file="../../../layout/view/public/style/margin_4" key="_sm" /}}
<!-- 内边距 -->
{{include file="../../../layout/view/public/style/padding_4" key="_sm" /}}
</div>
</div>
<!-- 大屏样式 -->
<div class="am-panel am-panel-default">
<div class="am-panel-hd">大屏样式</div>
<div class="am-panel-bd">
<!-- 圆角 -->
{{include file="../../../layout/view/public/style/border_radius" max="30" key="_lg" required="" /}}
<!-- 边线类型 -->
{{include file="../../../layout/view/public/style/border_style_4" key="_lg" /}}
<!-- 边线大小 -->
{{include file="../../../layout/view/public/style/border_width_4" key="_lg" /}}
<!-- 外边距 -->
{{include file="../../../layout/view/public/style/margin_4" key="_lg" /}}
<!-- 内边距 -->
{{include file="../../../layout/view/public/style/padding_4" key="_lg" /}}
</div>
</div>
<div class="form-submit-container">
<button type="submit" class="am-btn am-btn-primary am-radius am-btn-xs am-btn-block" data-am-loading="{loadingText: '处理中...'}">确认</button>
</div>
</form>
</div>
</div>
</div>

103
public/static/common/js/layout.admin.js
View File

@ -1,6 +1,5 @@
// 公共列表 form 搜索条件
FromInit('form.form-validation-layout-config');
FromInit('form.form-validation-layout-module-config');
FromInit('form.form-validation-module-offcanvas-images');
FromInit('form.form-validation-module-offcanvas-many-images');
FromInit('form.form-validation-module-offcanvas-images-text');
@ -25,7 +24,6 @@ var $base_show_style_value_obj = null;
var $base_title_keywords_obj = null;
var $layout = $('.layout-container');
var $offcanvas_layout_config = $('#offcanvas-layout-config');
var $offcanvas_layout_module_config = $('#offcanvas-layout-module-config');
var $offcanvas_config_images = $('#offcanvas-module-config-images');
var $offcanvas_config_many_images = $('#offcanvas-module-config-many-images');
var $offcanvas_config_images_text = $('#offcanvas-module-config-images-text');
@ -546,99 +544,6 @@ function FormBackLayoutConfigHandle(data)
$offcanvas_layout_config.offCanvas('close');
}
/**
* 布局模块-容器设置处理
* @author Devil
* @blog http://gong.gg/
* @version 1.0.0
* @date 2021-05-18
* @desc description
* @param {[object]} data [表单数据]
*/
function FormBackLayoutModuleConfigHandle(data)
{
// 基础信息
if($layout_content_obj == null)
{
Prompt('操作标记有误');
return false;
}
// 标签类定义
var ent = '';
// 边线大小、外边距、内边距
var size_arr = ['sm', 'md', 'lg'];
var angle_arr = ['top', 'right', 'bottom', 'left'];
var type_arr = {
"style_{var}_border_width": "layout-{var}-border",
"style_{var}_margin": "layout-{var}-margin",
"style_{var}_padding": "layout-{var}-padding",
};
for(var a in size_arr)
{
for(var b in type_arr)
{
for(var c in angle_arr)
{
var key = b.replace('{var}', size_arr[a])+'_'+angle_arr[c];
if((data[key] || 0) > 0)
{
ent += type_arr[b].replace('{var}', size_arr[a])+'-'+angle_arr[c]+'-'+data[key]+' ';
}
}
}
}
// 边线类型
for(var a in size_arr)
{
for(var b in angle_arr)
{
var key = 'style_'+size_arr[a]+'_border_style_'+angle_arr[b];
if((data[key] || null) != null)
{
ent += 'layout-'+size_arr[a]+'-border-'+angle_arr[b]+'-'+data[key]+' ';
}
}
}
// 圆角
for(var i in size_arr)
{
var key = 'style_'+size_arr[i]+'_border_radius';
if((data[key] || 0) > 0)
{
ent += 'layout-'+size_arr[i]+'-border-radius-'+data[key]+' ';
}
}
// 样式处理
var style = '';
// 背景色
if((data['style_background_color'] || null) != null)
{
style += 'background-color:'+data['style_background_color']+';';
}
// 边线颜色
if((data['style_border_color'] || null) != null)
{
style += 'border-color:'+data['style_border_color']+';';
}
// 类和样式处理
$layout_content_obj.attr('class', $offcanvas_layout_module_config.attr('data-ent')+' '+ent);
$layout_content_obj.attr('style', style);
// 数据加入配置
data['frontend_config'] = {
"style": style,
"ent": ent
}
$layout_content_obj.attr('data-json', encodeURIComponent(CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(JSON.stringify(data)))));
$offcanvas_layout_module_config.offCanvas('close');
}
/**
* 模块-图片处理
* @author Devil
@ -3164,7 +3069,7 @@ $(function()
$layout_content_obj = $(this).parents('.layout-content-container');
// 配置数据
var config_doc = '#offcanvas-layout-module-config';
var config_doc = '#offcanvas-layout-config';
var json = $layout_content_obj.attr('data-json') || null;
if(json != null)
{
@ -3183,13 +3088,13 @@ $(function()
FormDataFill(json, config_doc);
// 背景色组件处理
ModuleColorpickerHandle($offcanvas_layout_module_config);
ModuleColorpickerHandle($offcanvas_layout_config);
// 指定操作类型
$offcanvas_layout_module_config.attr('data-ent', 'layout-content-container');
$offcanvas_layout_config.attr('data-ent', 'layout-content-container');
// 打开配置
$offcanvas_layout_module_config.offCanvas('open');
$offcanvas_layout_config.offCanvas('open');
});
// 模块拖放