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

新增内容

v1.0.0
于肖磊 2024-10-18 11:46:03 +08:00
parent e76d560e90
commit 2479d37412
17 changed files with 55 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/color-text-size-group/index.vue
View File

@ -7,6 +7,8 @@
<el-form-item v-if="typeList.includes('size')" :label="sliderName" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="size" :max="100"></slider>
</el-form-item>
<!-- 额外的使用内容 -->
<slot></slot>
</div>
</template>

6
src/components/common/custom-module/model-text/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="img-outer re oh" :style="com_style">
<div :style="text_style" class="break">
<div :style="text_style" class="txet-word-break">
<template v-if="form.is_rich_text == '1'">
<div class="rich-text-content" :innerHTML="text_title"></div>
</template>
@ -80,10 +80,6 @@ const set_count = () => {
};
</script>
<style lang="scss" scoped>
.break{
word-wrap: break-word;
word-break:break-all;
}
.rich-text-content {
white-space: normal;
word-break:break-all;

1
src/components/common/product-show-config/index.vue
View File

@ -53,6 +53,7 @@ const { form } = toRefs(state);
const base_list = {
list_show_list: [
{ name: '商品名称', value: 'title', type:['0', '1', '2', '3', '4', '5', '6']},
{ name: '商品简述', value: 'simple_desc', type:['0', '1', '2', '3', '5'] },
{ name: '商品标签', value: 'plugins_view_icon', type:['0', '1', '2'] },
{ name: '商品售价', value: 'price', type:['0', '1', '2', '3', '4', '5', '6'] },
{ name: '商品销量', value: 'sales_count', type:['0', '1', '2'] },

97
src/components/common/upload-icon/index.vue
View File

@ -1,97 +0,0 @@
<template>
<el-dialog v-model="dialogVisible" title="icon选择" :close-on-press-escape="false" width="70%" :close-on-click-modal="false" :append-to-body="false" :before-close="handleClose">
<div class="mt-20 icon-dialog">
<div class="flex jc-e"><el-input v-model="searchText" placeholder="请输入图标名称" class="search-text" clearable></el-input></div>
<el-row v-if="icon_list.length > 0" class="icon-row mt-20" :gutter="20">
<el-col v-for="item in icon_list" :key="item.unicode" :span="3">
<div class="icon-item" @click="search_icon_click(item.font_class)">
<i :class="`iconfont icon-${ item.font_class }`"></i>
<div class="text-line-1 size-14">{{ item.name }}</div>
</div>
</el-col>
</el-row>
<div v-else>
<no-data height="500px"></no-data>
</div>
</div>
</el-dialog>
<div class="search-icon re" :style="'height:' + upload_size + ';width:' + upload_size + ';'" @click="icon_click">
<icon :name="!isEmpty(icon_class) ? icon_class : 'add'" :size="Number(size) / 2 + ''" color="c"></icon>
<div v-if="!isEmpty(icon_class)" class="abs top-de-5 right-de-5" @click.stop="remove_icon">
<icon name="close-fillup" size="16" color="c"></icon>
</div>
</div>
</template>
<script setup lang="ts">
import searchIcons from '@/assets/icons/iconfont.json';
import { isEmpty } from 'lodash';
interface Props {
size: number;
}
const props = withDefaults(defineProps<Props>(), {
size: 50,
});
const upload_size = computed(() => {
const size = props.size.toString();
return size.includes('%') ? size : size + 'px';
});
// 搜索
const searchText = ref('');
const icon_list = computed(() => searchIcons.glyphs.filter(item => item.name.includes(searchText.value)));
// 弹出框操作
const dialogVisible = ref(false);
const handleClose = () => {
dialogVisible.value = false;
};
const icon_click = () => {
dialogVisible.value = true;
};
const icon_class = defineModel('icon_class', { type: String, default: '' });
const search_icon_click = (item: any) => {
icon_class.value = item;
handleClose();
};
const remove_icon = () => {
icon_class.value = '';
}
</script>
<style lang="scss" scoped>
.icon-dialog {
height: 57rem;
.search-text {
width: 15rem;
}
.icon-row {
max-height: 50rem;
overflow: auto;
.icon-item {
border: 1px solid #ccc;
text-align: center;
border-radius: 4px;
padding: 1rem;
margin-bottom: 2rem;
cursor: pointer;
.iconfont {
font-size: 3.6rem;
height: 3.6rem;
}
}
.icon-item:hover {
border: 1px solid $cr-main;
}
.text-line-1 {
line-height: 2rem;
}
}
}
.search-icon{
position: relative;
background: #fafcff;
border-radius: 0.2rem;
border: 0.1rem dashed #d7eeff;
display: flex;
justify-content: center;
align-items: center;
}
</style>

4
src/components/common/upload/index.vue
View File

@ -228,7 +228,7 @@ import { ext_img_name_list, ext_video_name_list, ext_file_name_list, ext_file_na
import UploadAPI, { Tree } from '@/api/upload';
import { uploadStore, commonStore } from '@/store';
import { isEmpty } from 'lodash';
import searchIcons from '@/assets/icons/iconfont.json';
import search_icons from '@/assets/icons/iconfont.json';
const upload_store = uploadStore();
const common_store = commonStore();
const app = getCurrentInstance();
@ -621,7 +621,7 @@ const transform_category_event = () => {
const icon_value = defineModel('iconValue', { type: String, default: '' });
const temp_icon_value = ref('');
const search_icon = ref('');
const icon_list = computed(() => searchIcons.glyphs.filter((item) => item.name.includes(search_icon.value)));
const icon_list = computed(() => search_icons.glyphs.filter((item) => item.name.includes(search_icon.value) || item.font_class.includes(search_icon.value)));
const icon_index = ref(-1);
const handle_select_icon = (item: any, index: number) => {
icon_index.value = index;

5
src/components/model-custom/components/index.scss
View File

@ -312,11 +312,6 @@
}
}
.break{
word-wrap: break-word;
word-break:break-all;
}
.plug-in-show-component-line::after {
content: '';
position: absolute;

4
src/components/model-custom/components/index.vue
View File

@ -21,7 +21,7 @@
</card-container>
<card-container class="h selected">
<div class="flex-col gap-10 drawer-container">
<div class="flex-row align-c jc-sb">已选组件
<div class="flex-row align-c jc-sb">已选组件({{ diy_data.length }})
<div class="flex-row align-c gap-20">
<span class="clear-selection" @click="show_computer_line">{{ !is_show_component_line ? '显示' : '关闭' }}参考线</span>
<span class="clear-selection" @click="cancel">清除选中</span>
@ -38,7 +38,7 @@
<el-input v-model="item.new_name" placeholder="请输入组件别名" size="small" clearable type="textarea" class="flex-1 do-not-trigger" :rows="1" resize="none" />
</template>
<template v-else>
<span class="size-12 cr-6 break">{{ !isEmpty(item.new_name) ? item.new_name : item.name }}</span>
<span class="size-12 cr-6 txet-word-break">{{ !isEmpty(item.new_name) ? item.new_name : item.name }}</span>
</template>
</div>
<div class="abs draggable-icon" :style="item.show_tabs == '1' ? 'opacity: 1;' : 'opacity: 0.5;'">

13
src/components/model-data-magic/index.vue
View File

@ -10,8 +10,8 @@
<template v-if="item.data_content.data_type == 'goods'">
<div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
<div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl">
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
<p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
<p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="w h">
<magic-carousel :value="item" :good-style="item.data_style" :content-img-radius="content_img_radius" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
@ -41,8 +41,8 @@
<template v-if="item.data_content.data_type == 'goods'">
<div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
<div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
<p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
<p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="w h">
<magic-carousel :value="item" :good-style="item.data_style" :content-img-radius="content_img_radius" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
@ -339,11 +339,6 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
.img-spacing-border {
margin: v-bind(spacing);
}
.text-line-1 {
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
}
.style-size {
height: 100%;
width: 100%;

8
src/components/model-goods-list/index.vue
View File

@ -25,7 +25,10 @@
</template>
<div class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
<div class="flex-col gap-10 top-title">
<div v-if="is_show('shop')" class="flex-col" :style="`gap: ${ item.title_simple_desc_spacing }px;`">
</div>
<div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
<div v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc')">{{ item.simple_desc }}</div>
<div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
<div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
</div>
@ -110,6 +113,7 @@
<div class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
<div class="flex-col gap-10 top-title">
<div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
<div v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" class="text-line-1" :style="trends_config('simple_desc')">{{ item.simple_desc }}</div>
<div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
<div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
</div>
@ -184,7 +188,9 @@ interface data_list {
min_original_price: string;
show_original_price_symbol: string;
show_original_price_unit: string;
simple_desc: string;
min_price: string;
title_simple_desc_spacing: string;
show_price_symbol: string;
show_price_unit: string;
sales_count: string;
@ -369,7 +375,7 @@ const text_line = computed(() => {
if (['1', '6'].includes(theme.value)) {
line = 'text-line-1';
} else if (['0', '2', '3', '4', '5'].includes(theme.value)) {
line = 'text-line-2';
line = 'text-line-2 multi-text';
}
return line;
});

7
src/components/model-goods-list/model-goods-list-styles.vue
View File

@ -6,6 +6,13 @@
<el-form-item label="商品名称">
<color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="商品简述">
<color-text-size-group v-model:color="form.shop_simple_desc_color" v-model:size="form.shop_simple_desc_size" default-color="#999" :type-list="['color', 'size']">
<el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.title_simple_desc_spacing" :max="100"></slider>
</el-form-item>
</color-text-size-group>
</el-form-item>
<el-form-item label="商品价格">
<color-text-size-group v-model:color="form.shop_price_color" v-model:typeface="form.shop_price_typeface" v-model:size="form.shop_price_size" default-color="#000000"></color-text-size-group>
</el-form-item>

7
src/components/model-notice/index.vue
View File

@ -41,7 +41,7 @@
</div>
<div v-for="(item, index) in notice_list" :key="index" class="flex align-c" :style="news_style">
<span :class="`num one${index + 1}`">{{ index + 1 }}</span>
<div class="break" :style="`color: ${new_style.news_color}`">{{ item.notice_title }}</div>
<div class="txet-word-break" :style="`color: ${new_style.news_color}`">{{ item.notice_title }}</div>
</div>
</div>
</div>
@ -175,11 +175,6 @@ watchEffect(() => {
width: 2.4rem;
height: 2.4rem;
}
.break {
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
}
:deep(.el-carousel) {
.el-carousel__container {
height: v-bind(container_height);

7
src/components/model-title/index.vue
View File

@ -21,7 +21,7 @@
<div v-if="form.right_show == '1'" class="nowrap" :style="right_style">{{ form.right_title }}<el-icon class="iconfont icon-arrow-right" :color="new_style.right_color || '#999'"></el-icon></div>
</div>
</div>
<div v-if="!isEmpty(form.subtitle)" class="break" :style="subtitle_style">{{ form.subtitle }}</div>
<div v-if="!isEmpty(form.subtitle)" class="txet-word-break" :style="subtitle_style">{{ form.subtitle }}</div>
</div>
</div>
</div>
@ -94,11 +94,6 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
top: 50%;
transform: translateY(-50%);
}
.break {
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
}
.title-img {
// max-width: 6rem;
// max-height: 3rem;

8
src/config/const/goods-list.ts
View File

@ -38,6 +38,10 @@ interface DefaultProductList {
shop_title_typeface: string;
shop_title_size: number;
shop_title_color: string;
shop_simple_desc_typeface: string;
shop_simple_desc_size: number;
shop_simple_desc_color: string;
title_simple_desc_spacing: 4,
shop_price_typeface: string;
shop_price_size: number;
shop_price_color: string;
@ -110,6 +114,10 @@ const defaultProductList: DefaultProductList = {
shop_title_typeface: '500',
shop_title_size: 14,
shop_title_color: "#333333",
shop_simple_desc_typeface: '400',
shop_simple_desc_size: 12,
shop_simple_desc_color: "#999",
title_simple_desc_spacing: 4,
shop_price_typeface: '500',
shop_price_size: 18,
shop_price_color: "#EA3323;",

8
src/config/const/goods-tabs.ts
View File

@ -57,6 +57,10 @@ interface DefaultProductList {
shop_title_typeface: string;
shop_title_size: number;
shop_title_color: string;
shop_simple_desc_typeface: string;
shop_simple_desc_size: number;
shop_simple_desc_color: string;
title_simple_desc_spacing: 4,
shop_price_typeface: string;
shop_price_size: number;
shop_price_color: string;
@ -141,6 +145,10 @@ const defaultProductList: DefaultProductList = {
shop_title_typeface: '500',
shop_title_size: 14,
shop_title_color: '#333333',
shop_simple_desc_typeface: '400',
shop_simple_desc_size: 12,
shop_simple_desc_color: "#999",
title_simple_desc_spacing: 4,
shop_price_typeface: '500',
shop_price_size: 18,
shop_price_color: '#EA3323;',

4
src/config/const/tabs-carousel.ts
View File

@ -27,6 +27,7 @@ interface defaultTabs {
img_fit: string;
is_roll: string;
interval_time: number;
height: number;
};
style: {
tabs_one_theme: string;
@ -49,7 +50,6 @@ interface defaultTabs {
radius_bottom_left: number;
radius_bottom_right: number;
is_show: string;
height: number;
image_spacing: number;
indicator_style: string;
indicator_location: string;
@ -108,6 +108,7 @@ const defaultTabs: defaultTabs = {
video_title: '视频名称',
},
],
height: 300,
},
style: {
tabs_one_theme: '0',
@ -133,7 +134,6 @@ const defaultTabs: defaultTabs = {
radius_bottom_left: 0,
radius_bottom_right: 0,
is_show: '1',
height: 300,
image_spacing: 10,
indicator_style: 'dot',
indicator_location: 'center',

8
src/styles/common.scss
View File

@ -284,4 +284,10 @@
line-height: 1.6rem;
font-size: 1.4rem;
white-space: initial;
}
}
// 数字和文字超出范围不整体换行
.txet-word-break {
word-break: break-all;
overflow-wrap: break-word;
word-wrap: break-word;
}

3
src/styles/lib.scss
View File

@ -311,7 +311,8 @@ $line: 5;
-webkit-line-clamp: #{$i};
line-clamp: #{$i}; // 添加标准属性以增加兼容性
-webkit-box-orient: vertical;
word-break: break-word;
// word-break: break-word;
word-break: break-all;
overflow-wrap: break-word;
word-wrap: break-word;
}