smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: style

Browse Source
This commit is contained in:
xingyu4j
2025-11-05 19:07:32 +08:00
parent 56ae9c0230
commit 89d758b071
32 changed files with 181 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
View File

@@ -246,7 +246,7 @@ watch(
<Input
v-model:value="condition"
:placeholder="placeholder"
style="width: calc(100% - 100px)"
class="w-[calc(100vw-25%)]"
:readonly="type !== 'duration' && type !== 'cycle'"
@focus="handleInputFocus"
@blur="updateNode"

8
apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsInfo.vue
View File

@@ -181,7 +181,7 @@ function handleAuthInfoDialogClose() {
style="width: calc(100% - 80px)"
/>
<Button @click="copyToClipboard(authInfo.clientId)" type="primary">
<IconifyIcon icon="ph:copy" />
<IconifyIcon icon="lucide:copy" />
</Button>
</Input.Group>
</Form.Item>
@@ -193,7 +193,7 @@ function handleAuthInfoDialogClose() {
style="width: calc(100% - 80px)"
/>
<Button @click="copyToClipboard(authInfo.username)" type="primary">
<IconifyIcon icon="ph:copy" />
<IconifyIcon icon="lucide:copy" />
</Button>
</Input.Group>
</Form.Item>
@@ -210,11 +210,11 @@ function handleAuthInfoDialogClose() {
type="primary"
>
<IconifyIcon
:icon="authPasswordVisible ? 'ph:eye-slash' : 'ph:eye'"
:icon="authPasswordVisible ? 'lucide:eye-off' : 'lucide:eye'"
/>
</Button>
<Button @click="copyToClipboard(authInfo.password)" type="primary">
<IconifyIcon icon="ph:copy" />
<IconifyIcon icon="lucide:copy" />
</Button>
</Input.Group>
</Form.Item>

8
apps/web-antd/src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue
View File

@@ -170,7 +170,7 @@ watch(
</script>
<template>
<div class="gap-16px flex flex-col">
<div class="flex flex-col gap-4">
<Row :gutter="16">
<!-- 时间操作符选择 -->
<Col :span="8">
@@ -190,7 +190,7 @@ watch(
:value="option.value"
>
<div class="flex w-full items-center justify-between">
<div class="gap-8px flex items-center">
<div class="flex items-center gap-2">
<IconifyIcon :icon="option.icon" :class="option.iconClass" />
<span>{{ option.label }}</span>
</div>
@@ -225,9 +225,7 @@ watch(
value-format="YYYY-MM-DD HH:mm:ss"
class="w-full"
/>
<div v-else class="text-14px text-[var(--el-text-color-placeholder)]">
无需设置时间值
</div>
<div v-else class="text-secondary text-sm">无需设置时间值</div>
</Form.Item>
</Col>

14
apps/web-antd/src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue
View File

@@ -173,7 +173,7 @@ function handlePropertyChange(propertyInfo: any) {
</script>
<template>
<div class="space-y-16px">
<div class="space-y-4">
<!-- 触发事件类型选择 -->
<Form.Item label="触发事件类型" required>
<Select
@@ -192,7 +192,7 @@ function handlePropertyChange(propertyInfo: any) {
</Form.Item>
<!-- 设备属性条件配置 -->
<div v-if="isDevicePropertyTrigger" class="space-y-16px">
<div v-if="isDevicePropertyTrigger" class="space-y-4">
<!-- 产品设备选择 -->
<Row :gutter="16">
<Col :span="12">
@@ -292,7 +292,7 @@ function handlePropertyChange(propertyInfo: any) {
</div>
<!-- 设备状态条件配置 -->
<div v-else-if="isDeviceStatusTrigger" class="space-y-16px">
<div v-else-if="isDeviceStatusTrigger" class="space-y-4">
<!-- 设备状态触发器使用简化的配置 -->
<Row :gutter="16">
<Col :span="12">
@@ -364,13 +364,11 @@ function handlePropertyChange(propertyInfo: any) {
</div>
<!-- 其他触发类型的提示 -->
<div v-else class="py-20px text-center">
<p class="text-14px mb-4px text-[var(--el-text-color-secondary)]">
<div v-else class="py-5 text-center">
<p class="text-secondary mb-1 text-sm">
当前触发事件类型：{{ getTriggerTypeLabel(triggerType) }}
</p>
<p class="text-12px text-[var(--el-text-color-placeholder)]">
此触发类型暂不需要配置额外条件
</p>
<p class="text-secondary text-xs">此触发类型暂不需要配置额外条件</p>
</div>
</div>
</template>

43
apps/web-antd/src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue
View File

@@ -83,27 +83,24 @@ function updateCondition(index: number, condition: TriggerCondition) {
</script>
<template>
<div class="p-16px">
<div class="p-4">
<!-- 空状态 -->
<div v-if="!subGroup || subGroup.length === 0" class="py-24px text-center">
<div class="gap-12px flex flex-col items-center">
<IconifyIcon
icon="ep:plus"
class="text-32px text-[var(--el-text-color-placeholder)]"
/>
<div class="text-[var(--el-text-color-secondary)]">
<p class="text-14px font-500 mb-4px">暂无条件</p>
<p class="text-12px">点击下方按钮添加第一个条件</p>
<div v-if="!subGroup || subGroup.length === 0" class="py-6 text-center">
<div class="flex flex-col items-center gap-3">
<IconifyIcon icon="lucide:plus" class="text-8 text-secondary" />
<div class="text-secondary">
<p class="mb-1 text-base font-bold">暂无条件</p>
<p class="text-xs">点击下方按钮添加第一个条件</p>
</div>
<Button type="primary" @click="addCondition">
<IconifyIcon icon="ep:plus" />
<IconifyIcon icon="lucide:plus" />
添加条件
</Button>
</div>
</div>
<!-- 条件列表 -->
<div v-else class="space-y-16px">
<div v-else class="space-y-4">
<div
v-for="(condition, conditionIndex) in subGroup"
:key="`condition-${conditionIndex}`"
@@ -111,20 +108,18 @@ function updateCondition(index: number, condition: TriggerCondition) {
>
<!-- 条件配置 -->
<div
class="rounded-6px border border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-blank)] shadow-sm"
class="rounded-3px border-border bg-fill-color-blank border shadow-sm"
>
<div
class="p-12px rounded-t-4px flex items-center justify-between border-b border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-light)]"
class="rounded-t-1 border-border bg-fill-color-blank flex items-center justify-between border-b p-3"
>
<div class="gap-8px flex items-center">
<div class="flex items-center gap-2">
<div
class="w-20px h-20px text-10px flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
class="bg-primary flex size-5 items-center justify-center rounded-full text-xs font-bold text-white"
>
{{ conditionIndex + 1 }}
</div>
<span
class="text-12px font-500 text-[var(--el-text-color-primary)]"
>
<span class="text-primary text-base font-bold">
条件 {{ conditionIndex + 1 }}
</span>
</div>
@@ -140,7 +135,7 @@ function updateCondition(index: number, condition: TriggerCondition) {
</Button>
</div>
<div class="p-12px">
<div class="p-3">
<ConditionConfig
:model-value="condition"
@update:model-value="
@@ -158,15 +153,13 @@ function updateCondition(index: number, condition: TriggerCondition) {
v-if="
subGroup && subGroup.length > 0 && subGroup.length < maxConditions
"
class="py-16px text-center"
class="py-4 text-center"
>
<Button type="primary" plain @click="addCondition">
<IconifyIcon icon="ep:plus" />
<IconifyIcon icon="lucide:plus" />
继续添加条件
</Button>
<span
class="mt-8px text-12px block text-[var(--el-text-color-secondary)]"
>
<span class="text-secondary mt-2 block text-xs">
最多可添加 {{ maxConditions }} 个条件
</span>
</div>

83
apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue
View File

@@ -415,7 +415,7 @@ watch(
<template>
<!-- 参数配置 -->
<div class="space-y-12px w-full">
<div class="w-full space-y-3">
<!-- JSON 输入框 -->
<div class="relative">
<Input.TextArea
@@ -427,7 +427,7 @@ watch(
:class="{ 'is-error': jsonError }"
/>
<!-- 查看详细示例弹出层 -->
<div class="top-8px right-8px absolute">
<div class="absolute right-2 top-2">
<Popover
placement="leftTop"
:width="450"
@@ -450,79 +450,64 @@ watch(
<!-- 弹出层内容 -->
<div class="json-params-detail-content">
<div class="gap-8px mb-16px flex items-center">
<IconifyIcon
:icon="titleIcon"
class="text-18px text-[var(--el-color-primary)]"
/>
<span
class="text-16px font-600 text-[var(--el-text-color-primary)]"
>
<div class="mb-4 flex items-center gap-2">
<IconifyIcon :icon="titleIcon" class="text-primary text-lg" />
<span class="text-primary text-base font-bold">
{{ title }}
</span>
</div>
<div class="space-y-16px">
<div class="space-y-4">
<!-- 参数列表 -->
<div v-if="paramsList.length > 0">
<div class="gap-8px mb-8px flex items-center">
<div class="mb-2 flex items-center gap-2">
<IconifyIcon
:icon="paramsIcon"
class="text-14px text-[var(--el-color-primary)]"
class="text-primary text-base"
/>
<span
class="text-14px font-500 text-[var(--el-text-color-primary)]"
>
<span class="text-primary text-base font-bold">
{{ paramsLabel }}
</span>
</div>
<div class="ml-22px space-y-8px">
<div class="ml-6 space-y-2">
<div
v-for="param in paramsList"
:key="param.identifier"
class="p-8px rounded-4px flex items-center justify-between bg-[var(--el-fill-color-lighter)]"
class="bg-card flex items-center justify-between rounded-lg p-2"
>
<div class="flex-1">
<div
class="text-12px font-500 text-[var(--el-text-color-primary)]"
>
<div class="text-primary text-base font-bold">
{{ param.name }}
<Tag
v-if="param.required"
size="small"
type="danger"
class="ml-4px"
class="ml-1"
>
{{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
</Tag>
</div>
<div
class="text-11px text-[var(--el-text-color-secondary)]"
>
<div class="text-secondary text-xs">
{{ param.identifier }}
</div>
</div>
<div class="gap-8px flex items-center">
<div class="flex items-center gap-2">
<Tag :type="getParamTypeTag(param.dataType)" size="small">
{{ getParamTypeName(param.dataType) }}
</Tag>
<span
class="text-11px text-[var(--el-text-color-secondary)]"
>
<span class="text-secondary text-xs">
{{ getExampleValue(param) }}
</span>
</div>
</div>
</div>
<div class="mt-12px ml-22px">
<div
class="text-12px mb-6px text-[var(--el-text-color-secondary)]"
>
<div class="ml-6 mt-3">
<div class="text-secondary mb-1 text-xs">
{{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }}
</div>
<pre
class="p-12px rounded-4px text-11px border-l-3px overflow-x-auto border-[var(--el-color-primary)] bg-[var(--el-fill-color-light)] text-[var(--el-text-color-primary)]"
class="bg-card border-l-3px border-primary text-primary overflow-x-auto rounded-lg p-3 text-sm"
>
<code>{{ generateExampleJson() }}</code>
</pre>
@@ -531,8 +516,8 @@ watch(
<!-- 无参数提示 -->
<div v-else>
<div class="py-16px text-center">
<p class="text-14px text-[var(--el-text-color-secondary)]">
<div class="py-4 text-center">
<p class="text-secondary text-sm">
{{ emptyMessage }}
</p>
</div>
@@ -545,37 +530,29 @@ watch(
<!-- 验证状态和错误提示 -->
<div class="flex items-center justify-between">
<div class="gap-8px flex items-center">
<div class="flex items-center gap-2">
<IconifyIcon
:icon="
jsonError
? JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.ERROR
: JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.SUCCESS
"
:class="
jsonError
? 'text-[var(--el-color-danger)]'
: 'text-[var(--el-color-success)]'
"
class="text-14px"
:class="jsonError ? 'text-danger' : 'text-success'"
class="text-sm"
/>
<span
:class="
jsonError
? 'text-[var(--el-color-danger)]'
: 'text-[var(--el-color-success)]'
"
class="text-12px"
:class="jsonError ? 'text-danger' : 'text-success'"
class="text-xs"
>
{{ jsonError || JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_CORRECT }}
</span>
</div>
<!-- 快速填充按钮 -->
<div v-if="paramsList.length > 0" class="gap-8px flex items-center">
<span class="text-12px text-[var(--el-text-color-secondary)]">{{
JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL
}}</span>
<div v-if="paramsList.length > 0" class="flex items-center gap-2">
<span class="text-secondary text-xs">
{{ JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL }}
</span>
<Button size="small" type="primary" plain @click="fillExampleJson">
{{ JSON_PARAMS_INPUT_CONSTANTS.EXAMPLE_DATA_BUTTON }}
</Button>

18
apps/web-antd/src/views/iot/rule/scene/form/inputs/ValueInput.vue
View File

@@ -186,7 +186,7 @@ watch(
operator ===
IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value
"
class="w-full! gap-8px flex items-center"
class="w-full! flex items-center gap-2"
>
<Input
v-model="rangeStart"
@@ -196,11 +196,7 @@ watch(
class="min-w-0 flex-1"
style="width: auto !important"
/>
<span
class="text-12px whitespace-nowrap text-[var(--el-text-color-secondary)]"
>
至
</span>
<span class="text-secondary whitespace-nowrap text-xs"> 至 </span>
<Input
v-model="rangeEnd"
:type="getInputType()"
@@ -226,18 +222,16 @@ watch(
<Tooltip content="多个值用逗号分隔，如：1,2,3" placement="top">
<IconifyIcon
icon="ep:question-filled"
class="cursor-help text-[var(--el-text-color-placeholder)]"
class="cursor-help text-gray-400"
/>
</Tooltip>
</template>
</Input>
<div
v-if="listPreview.length > 0"
class="mt-8px gap-6px flex flex-wrap items-center"
class="mt-2 flex flex-wrap items-center gap-1"
>
<span class="text-12px text-[var(--el-text-color-secondary)]">
解析结果：
</span>
<span class="text-secondary text-xs"> 解析结果： </span>
<Tag
v-for="(item, index) in listPreview"
:key="index"
@@ -288,7 +282,7 @@ watch(
:content="`单位：${propertyConfig.unit}`"
placement="top"
>
<span class="text-12px px-4px text-[var(--el-text-color-secondary)]">
<span class="text-secondary px-1 text-xs">
{{ propertyConfig.unit }}
</span>
</Tooltip>

22
apps/web-antd/src/views/iot/rule/scene/form/sections/ActionSection.vue
View File

@@ -153,7 +153,7 @@ function onActionTypeChange(action: Action, type: any) {
</script>
<template>
<Card class="rounded-8px border-primary border" shadow="never">
<Card class="border-primary rounded-lg border" shadow="never">
<template #title>
<div class="flex items-center justify-between">
<div class="gap-8px flex items-center">
@@ -186,18 +186,18 @@ function onActionTypeChange(action: Action, type: any) {
<div
v-for="(action, index) in actions"
:key="`action-${index}`"
class="rounded-8px border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md"
class="rounded-lg border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md"
>
<!-- 执行器头部 - 蓝色主题 -->
<div
class="p-16px rounded-t-6px flex items-center justify-between border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50"
class="flex items-center justify-between rounded-t-lg border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 p-4"
>
<div class="gap-12px flex items-center">
<div
class="gap-8px text-16px font-600 flex items-center text-blue-700"
class="font-600 flex items-center gap-2 text-base text-blue-700"
>
<div
class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
class="flex size-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white"
>
{{ index + 1 }}
</div>
@@ -275,16 +275,14 @@ function onActionTypeChange(action: Action, type: any) {
action.type ===
IotRuleSceneActionTypeEnum.ALERT_TRIGGER.toString()
"
class="rounded-6px p-16px border-border bg-fill-color-blank border"
class="border-border bg-fill-color-blank rounded-lg border p-4"
>
<div class="gap-8px mb-8px flex items-center">
<IconifyIcon icon="ep:warning" class="text-16px text-warning" />
<span class="text-14px font-600 text-primary">触发告警</span>
<div class="mb-2 flex items-center gap-2">
<IconifyIcon icon="ep:warning" class="text-warning text-base" />
<span class="font-600 text-primary text-sm">触发告警</span>
<Tag size="small" type="warning">自动执行</Tag>
</div>
<div
class="text-12px leading-relaxed text-[var(--el-text-color-secondary)]"
>
<div class="text-secondary text-xs leading-relaxed">
当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 ->
告警配置] 管理。
</div>

6
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
View File

@@ -96,7 +96,9 @@ const handleDeleteComponent = () => {
<div :style="style">
<component :is="component.id" :property="component.property" />
</div>
<div class="component-wrap absolute -left-0.5 top-1 block h-full w-full">
<div
class="component-wrap absolute -bottom-1 -left-0.5 -right-0.5 -top-1 block h-full w-full"
>
<!-- 左侧：组件名（悬浮的小贴条） -->
<div class="component-name" v-if="component.name">
{{ component.name }}
@@ -169,7 +171,7 @@ $toolbar-position: -55px;
.component-wrap {
/* 鼠标放到组件上时 */
&:hover {
border: $hover-border-width dashed var(--primary);
border: $hover-border-width dashed hsl(var(--primary));
box-shadow: 0 0 5px 0 rgb(24 144 255 / 30%);
.component-name {

6
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
View File

@@ -33,13 +33,13 @@ watch(
);
// 手机宽度
const phoneWidth = ref(375);
const phoneWidth = ref(384);
// 容器
const containerRef = ref();
// 滚动条宽度
const scrollbarWidth = ref('100%');
// 优惠券的宽度
const couponWidth = ref(375);
const couponWidth = ref(384);
// 计算布局参数
watch(
() => [props.property, phoneWidth, couponList.value.length],
@@ -58,7 +58,7 @@ watch(
);
onMounted(() => {
// 提取手机宽度
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
});
</script>
<template>

6
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
View File

@@ -66,10 +66,10 @@ const handleOpenEditDialog = () => {
align-items: center;
justify-content: center;
font-size: 12px;
color: #fff;
color: hsl(var(--text-color));
cursor: move;
background: #409effbf;
border: 1px solid var(--el-color-primary);
background: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
border: 1px solid hsl(var(--primary));
/* 控制点 */
.ctrl-dot {

4
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
View File

@@ -35,8 +35,8 @@ const cellList = computed(() =>
// 单元格宽度
const cellWidth = computed(() => {
return props.property._local?.previewMp
? (375 - 80 - 86) / 6
: (375 - 90) / 8;
? (384 - 80 - 86) / 6
: (384 - 90) / 8;
});
// 获得单元格样式
const getCellStyle = (cell: NavigationBarCellProperty) => {

15
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
View File

@@ -44,17 +44,26 @@ const formData = useVModel(props, 'modelValue', emit);
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
<IconifyIcon
icon="fluent:text-column-one-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-left-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
</RadioGroup>

4
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
View File

@@ -26,7 +26,7 @@ watch(
},
);
// 手机宽度
const phoneWidth = ref(375);
const phoneWidth = ref(384);
// 容器
const containerRef = ref();
// 商品的列数
@@ -69,7 +69,7 @@ watch(
);
onMounted(() => {
// 提取手机宽度
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
});
</script>
<template>

12
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
View File

@@ -46,17 +46,23 @@ const formData = useVModel(props, 'modelValue', emit);
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="三列" placement="bottom">
<RadioButton value="threeCol">
<IconifyIcon icon="fluent:text-column-three-24-filled" />
<IconifyIcon
icon="fluent:text-column-three-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="水平滑动" placement="bottom">
<RadioButton value="horizSwiper">
<IconifyIcon icon="system-uicons:carousel" />
<IconifyIcon icon="system-uicons:carousel" class="size-6" />
</RadioButton>
</Tooltip>
</RadioGroup>

4
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
View File

@@ -27,7 +27,5 @@ watch(
);
</script>
<template>
<div class="min-h-[30px]" v-dompurify-html="article?.content"></div>
<div class="min-h-8" v-dompurify-html="article?.content"></div>
</template>
<style scoped lang="scss"></style>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
View File

@@ -64,5 +64,3 @@ onMounted(() => {
</Form>
</ComponentContainerProperty>
</template>
<style scoped lang="scss"></style>

34
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
View File

@@ -97,11 +97,11 @@ const calculateWidth = () => {
</script>
<template>
<div
class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
class="box-content flex min-h-8 w-full flex-row flex-wrap"
ref="containerRef"
>
<div
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
:style="{
...calculateSpace(index),
...calculateWidth(),
@@ -118,19 +118,15 @@ const calculateWidth = () => {
v-if="property.badge.show"
class="absolute left-0 top-0 z-[1] items-center justify-center"
>
<Image
fit="cover"
:src="property.badge.imgUrl"
class="h-[26px] w-[38px]"
/>
<Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
</div>
<!-- 商品封面图 -->
<div
class="h-[140px]"
class="h-36"
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-[140px]': property.layoutType === 'oneColSmallImg',
'w-36': property.layoutType === 'oneColSmallImg',
},
]"
>
@@ -141,7 +137,7 @@ const calculateWidth = () => {
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-[calc(100%-140px-16px)]':
'w-[calc(100vw-36px-16px)]':
property.layoutType === 'oneColSmallImg',
},
]"
@@ -149,7 +145,7 @@ const calculateWidth = () => {
<!-- 商品名称 -->
<div
v-if="property.fields.name.show"
class="text-[14px]"
class="text-sm"
:class="[
{
truncate: property.layoutType !== 'oneColSmallImg',
@@ -164,7 +160,7 @@ const calculateWidth = () => {
<!-- 商品简介 -->
<div
v-if="property.fields.introduction.show"
class="truncate text-[12px]"
class="truncate text-xs"
:style="{ color: property.fields.introduction.color }"
>
{{ spu.introduction }}
@@ -173,7 +169,7 @@ const calculateWidth = () => {
<!-- 价格 -->
<span
v-if="property.fields.price.show"
class="text-[16px]"
class="text-base"
:style="{ color: property.fields.price.color }"
>
￥{{ fenToYuan(spu.price || Infinity) }}
@@ -181,13 +177,13 @@ const calculateWidth = () => {
<!-- 市场价 -->
<span
v-if="property.fields.marketPrice.show && spu.marketPrice"
class="ml-[4px] text-[10px] line-through"
class="ml-1 text-xs line-through"
:style="{ color: property.fields.marketPrice.color }"
>
￥{{ fenToYuan(spu.marketPrice) }}
</span>
</div>
<div class="text-[12px]">
<div class="text-xs">
<!-- 销量 -->
<span
v-if="property.fields.salesCount.show"
@@ -205,11 +201,11 @@ const calculateWidth = () => {
</div>
</div>
<!-- 购买按钮 -->
<div class="absolute bottom-[8px] right-[8px]">
<div class="absolute bottom-2 right-2">
<!-- 文字按钮 -->
<span
v-if="property.btnBuy.type === 'text'"
class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
class="rounded-full px-3 py-1 text-sm text-white"
:style="{
background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
}"
@@ -219,7 +215,7 @@ const calculateWidth = () => {
<!-- 图片按钮 -->
<Image
v-else
class="h-[28px] w-[28px] rounded-full"
class="size-7 rounded-full"
fit="cover"
:src="property.btnBuy.imgUrl"
/>
@@ -227,5 +223,3 @@ const calculateWidth = () => {
</div>
</div>
</template>
<style scoped lang="scss"></style>

15
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
View File

@@ -60,17 +60,26 @@ onMounted(async () => {
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
<IconifyIcon
icon="fluent:text-column-one-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-left-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
</RadioGroup>

15
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
View File

@@ -42,17 +42,26 @@ const formData = useVModel(props, 'modelValue', emit);
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
<IconifyIcon
icon="fluent:text-column-one-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-left-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
</RadioGroup>

12
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
View File

@@ -116,19 +116,15 @@ const calculateWidth = () => {
v-if="property.badge.show"
class="absolute left-0 top-0 z-[1] items-center justify-center"
>
<Image
fit="cover"
:src="property.badge.imgUrl"
class="h-[26px] w-[38px]"
/>
<Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
</div>
<!-- 商品封面图 -->
<div
class="h-[140px]"
class="h-36"
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-[140px]': property.layoutType === 'oneColSmallImg',
'w-36': property.layoutType === 'oneColSmallImg',
},
]"
>
@@ -139,7 +135,7 @@ const calculateWidth = () => {
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-[calc(100%-140px-16px)]':
'w-[calc(100vw-140px-16px)]':
property.layoutType === 'oneColSmallImg',
},
]"

15
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
View File

@@ -45,17 +45,26 @@ const formData = useVModel(props, 'modelValue', emit);
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
<IconifyIcon
icon="fluent:text-column-one-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-left-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
</RadioGroup>

10
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
View File

@@ -54,12 +54,18 @@ const rules = {}; // 表单校验
<RadioGroup v-model:value="formData!.textAlign">
<Tooltip title="居左" placement="top">
<RadioButton value="left">
<IconifyIcon icon="ant-design:align-left-outlined" />
<IconifyIcon
icon="ant-design:align-left-outlined"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="居中" placement="top">
<RadioButton value="center">
<IconifyIcon icon="ant-design:align-center-outlined" />
<IconifyIcon
icon="ant-design:align-center-outlined"
class="size-6"
/>
</RadioButton>
</Tooltip>
</RadioGroup>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
View File

@@ -21,7 +21,7 @@ defineProps<{ property: UserCardProperty }>();
</div>
<IconifyIcon icon="lucide:qr-code" class="size-5" />
</div>
<div class="flex items-center justify-between bg-white px-5 py-2 text-xs">
<div class="bg-card flex items-center justify-between px-5 py-2 text-xs">
<span class="text-orange-500">点击绑定手机号</span>
<span class="rounded-lg bg-orange-500 px-2 py-1 text-white">
去绑定

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
View File

@@ -16,5 +16,3 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style" />
</template>
<style scoped lang="scss"></style>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
View File

@@ -13,5 +13,3 @@ defineProps<{ property: UserCouponProperty }>();
src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
/>
</template>
<style scoped lang="scss"></style>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
View File

@@ -16,5 +16,3 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style" />
</template>
<style scoped lang="scss"></style>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
View File

@@ -13,5 +13,3 @@ defineProps<{ property: UserOrderProperty }>();
src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
/>
</template>
<style scoped lang="scss"></style>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
View File

@@ -16,5 +16,3 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style" />
</template>
<style scoped lang="scss"></style>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
View File

@@ -56,5 +56,3 @@ const formData = useVModel(props, 'modelValue', emit);
</Form>
</ComponentContainerProperty>
</template>
<style scoped lang="scss"></style>

4
apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
View File

@@ -18,12 +18,12 @@ defineOptions({ name: 'VerticalButtonGroup' });
// TODO @AI:圆角的样式不太对！
.ant-btn-group > :deep(.ant-btn:first-child) {
border-bottom-color: transparent;
border-radius: var(--ant-border-radius) var(--ant-border-radius) 0 0;
border-radius: hsl(var(--radius)) hsl(var(--radius)) 0 0;
}
.ant-btn-group > :deep(.ant-btn:last-child) {
border-top-color: transparent;
border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius);
border-radius: 0 0 hsl(var(--radius)) hsl(var(--radius));
}
.ant-btn-group :deep(.ant-btn:not(:first-child):not(:last-child)) {

4
apps/web-antd/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue
View File

@@ -32,8 +32,8 @@ function handleSelect(item: Emoji) {
v-for="(item, index) in emojiList"
:key="index"
:style="{
borderColor: 'var(--primary)',
color: 'var(--primary)',
borderColor: 'hsl(var(--primary))',
color: 'hsl(var(--primary))',
}"
:title="item.name"
class="icon-item w-1/10 mr-2 mt-1 flex cursor-pointer items-center justify-center border border-solid p-2"