aiotagro/admin-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf：【IoT 物联网】场景联动样式 unocss 化

Browse Source
This commit is contained in:
puhui999
2025-07-26 16:33:27 +08:00
parent 751daf5fbb
commit d4555907cc
7 changed files with 88 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/views/iot/rule/scene/components/configs/AlertConfig.vue
View File

@@ -1,6 +1,6 @@
<!-- 告警配置组件 -->
<template>
<div class="alert-config">
<div class="w-full">
<!-- TODO @puhui999：触发告警时，不用选择配置哈； -->
<el-form-item label="告警配置" required>
<el-select
@@ -18,10 +18,10 @@
:label="config.name"
:value="config.id"
>
<div class="alert-option">
<div class="option-content">
<div class="option-name">{{ config.name }}</div>
<div class="option-desc">{{ config.description }}</div>
<div class="flex items-center justify-between w-full py-4px">
<div class="flex-1">
<div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{ config.name }}</div>
<div class="text-12px text-[var(--el-text-color-secondary)]">{{ config.description }}</div>
</div>
<el-tag :type="config.enabled ? 'success' : 'danger'" size="small">
{{ config.enabled ? '启用' : '禁用' }}
@@ -32,32 +32,32 @@
</el-form-item>
<!-- 告警配置详情 -->
<div v-if="selectedConfig" class="alert-details">
<div class="details-header">
<Icon icon="ep:bell" class="details-icon" />
<span class="details-title">{{ selectedConfig.name }}</span>
<div v-if="selectedConfig" class="mt-16px p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
<div class="flex items-center gap-8px mb-12px">
<Icon icon="ep:bell" class="text-[var(--el-color-warning)] text-16px" />
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">{{ selectedConfig.name }}</span>
<el-tag :type="selectedConfig.enabled ? 'success' : 'danger'" size="small">
{{ selectedConfig.enabled ? '启用' : '禁用' }}
</el-tag>
</div>
<div class="details-content">
<div class="detail-item">
<span class="detail-label">描述：</span>
<span class="detail-value">{{ selectedConfig.description }}</span>
<div class="space-y-8px">
<div class="flex items-start gap-8px">
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px">描述：</span>
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ selectedConfig.description }}</span>
</div>
<div class="detail-item">
<span class="detail-label">通知方式：</span>
<span class="detail-value">{{ getNotifyTypeName(selectedConfig.notifyType) }}</span>
<div class="flex items-start gap-8px">
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px">通知方式：</span>
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ getNotifyTypeName(selectedConfig.notifyType) }}</span>
</div>
<div v-if="selectedConfig.receivers" class="detail-item">
<span class="detail-label">接收人：</span>
<span class="detail-value">{{ selectedConfig.receivers.join(', ') }}</span>
<div v-if="selectedConfig.receivers" class="flex items-start gap-8px">
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px">接收人：</span>
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ selectedConfig.receivers.join(', ') }}</span>
</div>
</div>
</div>
<!-- 验证结果 -->
<div v-if="validationMessage" class="validation-result">
<div v-if="validationMessage" class="mt-16px">
<el-alert
:title="validationMessage"
:type="isValid ? 'success' : 'error'"
@@ -202,90 +202,6 @@ onMounted(() => {
</script>
<style scoped>
.alert-config {
width: 100%;
}
.alert-option {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 4px 0;
}
.option-content {
flex: 1;
}
.option-name {
font-size: 14px;
font-weight: 500;
color: var(--el-text-color-primary);
margin-bottom: 2px;
}
.option-desc {
font-size: 12px;
color: var(--el-text-color-secondary);
}
.alert-details {
margin-top: 12px;
padding: 12px;
background: var(--el-fill-color-light);
border-radius: 6px;
border: 1px solid var(--el-border-color-lighter);
}
.details-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.details-icon {
color: var(--el-color-warning);
font-size: 14px;
}
.details-title {
font-size: 14px;
font-weight: 500;
color: var(--el-text-color-primary);
}
.details-content {
display: flex;
flex-direction: column;
gap: 4px;
margin-left: 22px;
}
.detail-item {
display: flex;
align-items: flex-start;
gap: 8px;
}
.detail-label {
font-size: 12px;
color: var(--el-text-color-secondary);
min-width: 60px;
flex-shrink: 0;
}
.detail-value {
font-size: 12px;
color: var(--el-text-color-primary);
flex: 1;
}
.validation-result {
margin-top: 8px;
}
:deep(.el-select-dropdown__item) {
height: auto;
padding: 8px 20px;

65
src/views/iot/rule/scene/components/configs/ConditionConfig.vue
View File

@@ -1,7 +1,7 @@
<!-- 单个条件配置组件 -->
<!-- TODO @puhui999：这里需要在对下阿里云 IoT，不太对；它是条件类型；然后选择产品、设备；接着选条件类型对应的比较； -->
<template>
<div class="condition-config">
<div class="flex flex-col gap-16px">
<el-row :gutter="16">
<!-- 属性/事件/服务选择 -->
<el-col :span="8">
@@ -45,18 +45,18 @@
</el-row>
<!-- 条件预览 -->
<div v-if="conditionPreview" class="condition-preview">
<div class="preview-header">
<Icon icon="ep:view" class="preview-icon" />
<span class="preview-title">条件预览</span>
<div v-if="conditionPreview" class="p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
<div class="flex items-center gap-8px mb-8px">
<Icon icon="ep:view" class="text-[var(--el-color-info)] text-16px" />
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">条件预览</span>
</div>
<div class="preview-content">
<code class="preview-text">{{ conditionPreview }}</code>
<div class="pl-24px">
<code class="text-12px text-[var(--el-color-primary)] bg-[var(--el-fill-color-blank)] p-8px rounded-4px font-mono">{{ conditionPreview }}</code>
</div>
</div>
<!-- 验证结果 -->
<div v-if="validationMessage" class="validation-result">
<div v-if="validationMessage" class="mt-8px">
<el-alert
:title="validationMessage"
:type="isValid ? 'success' : 'error'"
@@ -210,55 +210,6 @@ onMounted(() => {
</script>
<style scoped>
.condition-config {
display: flex;
flex-direction: column;
gap: 16px;
}
.condition-preview {
padding: 12px;
background: var(--el-fill-color-light);
border-radius: 6px;
border: 1px solid var(--el-border-color-lighter);
}
.preview-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.preview-icon {
color: var(--el-color-primary);
font-size: 14px;
}
.preview-title {
font-size: 12px;
font-weight: 500;
color: var(--el-text-color-secondary);
}
.preview-content {
margin-left: 20px;
}
.preview-text {
font-size: 14px;
color: var(--el-text-color-primary);
background: var(--el-fill-color-blank);
padding: 8px 12px;
border-radius: 4px;
display: block;
font-family: inherit;
}
.validation-result {
margin-top: 8px;
}
:deep(.el-form-item) {
margin-bottom: 0;
}

122
src/views/iot/rule/scene/components/configs/ConditionGroupConfig.vue
View File

@@ -1,17 +1,17 @@
<!-- 条件组配置组件 -->
<template>
<div class="condition-group-config">
<div class="group-content">
<div class="p-16px">
<div class="space-y-12px">
<!-- 条件列表 -->
<div v-if="group.conditions && group.conditions.length > 0" class="conditions-list">
<div v-if="group.conditions && group.conditions.length > 0" class="space-y-12px">
<div
v-for="(condition, index) in group.conditions"
:key="`condition-${index}`"
class="condition-item"
class="p-12px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-light)]"
>
<div class="condition-header">
<div class="condition-title">
<span>条件 {{ index + 1 }}</span>
<div class="flex items-center justify-between mb-12px">
<div class="flex items-center gap-8px">
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">条件 {{ index + 1 }}</span>
<el-tag size="small" type="primary">
{{ getConditionTypeName(condition.type) }}
</el-tag>
@@ -28,7 +28,7 @@
</el-button>
</div>
<div class="condition-content">
<div class="p-12px bg-[var(--el-fill-color-blank)] rounded-4px">
<ConditionConfig
:model-value="condition"
@update:model-value="(value) => updateCondition(index, value)"
@@ -41,8 +41,8 @@
<!-- 逻辑连接符 -->
<!-- TODO @puhui999：不用这个哈； -->
<div v-if="index < group.conditions!.length - 1" class="logic-connector">
<el-select v-model="group.logicOperator" size="small" style="width: 80px">
<div v-if="index < group.conditions!.length - 1" class="flex justify-center mt-8px">
<el-select v-model="group.logicOperator" size="small" class="w-80px">
<el-option label="且" value="AND" />
<el-option label="或" value="OR" />
</el-select>
@@ -51,7 +51,7 @@
</div>
<!-- 空状态 -->
<div v-else class="empty-conditions">
<div v-else class="py-40px text-center">
<el-empty description="暂无条件配置" :image-size="80">
<el-button type="primary" @click="addCondition">
<Icon icon="ep:plus" />
@@ -65,19 +65,19 @@
v-if="
group.conditions && group.conditions.length > 0 && group.conditions.length < maxConditions
"
class="add-condition"
class="text-center py-16px"
>
<el-button type="primary" plain @click="addCondition" class="add-condition-btn">
<el-button type="primary" plain @click="addCondition">
<Icon icon="ep:plus" />
继续添加条件
</el-button>
<span class="add-condition-text"> 最多可添加 {{ maxConditions }} 个条件 </span>
<span class="block mt-8px text-12px text-[var(--el-text-color-secondary)]"> 最多可添加 {{ maxConditions }} 个条件 </span>
</div>
</div>
<!-- 验证结果 -->
<!-- TODO @puhui999：是不是不用这种提示；只要 validator rules 能展示出来就好了呀。。。 -->
<div v-if="validationMessage" class="validation-result">
<div v-if="validationMessage" class="mt-8px">
<el-alert
:title="validationMessage"
:type="isValid ? 'success' : 'error'"
@@ -230,96 +230,4 @@ onMounted(() => {
})
</script>
<style scoped>
.condition-group-config {
padding: 16px;
}
.group-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.conditions-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.condition-item {
position: relative;
border: 1px solid var(--el-border-color-lighter);
border-radius: 6px;
background: var(--el-fill-color-blank);
}
.condition-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--el-fill-color-light);
border-bottom: 1px solid var(--el-border-color-lighter);
}
.condition-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: var(--el-text-color-primary);
}
.condition-content {
padding: 16px;
}
.logic-connector {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 0;
position: relative;
}
.logic-connector::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 100%;
background: var(--el-border-color);
}
.empty-conditions {
padding: 40px 0;
text-align: center;
}
.add-condition {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border: 1px dashed var(--el-border-color);
border-radius: 6px;
background: var(--el-fill-color-lighter);
}
.add-condition-btn {
flex-shrink: 0;
}
.add-condition-text {
font-size: 12px;
color: var(--el-text-color-secondary);
}
.validation-result {
margin-top: 16px;
}
</style>

115
src/views/iot/rule/scene/components/configs/DeviceTriggerConfig.vue
View File

@@ -1,6 +1,6 @@
<!-- 设备触发配置组件 -->
<template>
<div class="device-trigger-config">
<div class="flex flex-col gap-16px">
<!-- 产品和设备选择 -->
<ProductDeviceSelector
v-model:product-id="trigger.productId"
@@ -10,26 +10,26 @@
<!-- TODO @puhui999：这里有点冗余，建议去掉 -->
<!-- 设备状态变更提示 -->
<div v-if="trigger.type === TriggerTypeEnum.DEVICE_STATE_UPDATE" class="state-update-notice">
<div v-if="trigger.type === TriggerTypeEnum.DEVICE_STATE_UPDATE" class="mt-8px">
<el-alert title="设备状态变更触发" type="info" :closable="false" show-icon>
<template #default>
<p>当选中的设备上线或离线时将自动触发场景规则</p>
<p class="notice-tip">无需配置额外的触发条件</p>
<p class="m-0">当选中的设备上线或离线时将自动触发场景规则</p>
<p class="m-0 mt-4px text-12px text-[var(--el-text-color-secondary)]">无需配置额外的触发条件</p>
</template>
</el-alert>
</div>
<!-- 条件组配置 -->
<div v-else-if="needsConditions" class="condition-groups">
<div class="condition-groups-header">
<div class="header-left">
<span class="header-title">触发条件</span>
<div v-else-if="needsConditions" class="space-y-12px">
<div class="flex items-center justify-between mb-12px">
<div class="flex items-center gap-8px">
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">触发条件</span>
<!-- TODO @puhui999：去掉数量限制 -->
<el-tag size="small" type="info">
{{ trigger.conditionGroups?.length || 0 }}/{{ maxConditionGroups }}
</el-tag>
</div>
<div class="header-right">
<div class="flex items-center gap-8px">
<el-button
type="primary"
size="small"
@@ -45,21 +45,21 @@
<!-- 条件组列表 -->
<div
v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0"
class="condition-groups-list"
class="flex flex-col gap-12px"
>
<div
v-for="(group, groupIndex) in trigger.conditionGroups"
:key="`group-${groupIndex}`"
class="condition-group"
class="border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
>
<div class="group-header">
<div class="group-title">
<div class="flex items-center justify-between p-12px px-16px bg-[var(--el-fill-color-light)] border-b border-[var(--el-border-color-lighter)]">
<div class="flex items-center text-14px font-500 text-[var(--el-text-color-primary)]">
<span>条件组 {{ groupIndex + 1 }}</span>
<!-- TODO @puhui999：不用“且、或”哈。条件组之间，就是或；条件之间就是且 -->
<el-select
v-model="group.logicOperator"
size="small"
style="width: 80px; margin-left: 12px"
class="w-80px ml-12px"
>
<el-option label="且" value="AND" />
<el-option label="或" value="OR" />
@@ -89,7 +89,7 @@
</div>
<!-- 空状态 -->
<div v-else class="empty-conditions">
<div v-else class="py-40px text-center">
<el-empty description="暂无触发条件">
<el-button type="primary" @click="addConditionGroup">
<Icon icon="ep:plus" />
@@ -100,7 +100,7 @@
</div>
<!-- 验证结果 -->
<div v-if="validationMessage" class="validation-result">
<div v-if="validationMessage" class="mt-8px">
<el-alert
:title="validationMessage"
:type="isValid ? 'success' : 'error'"
@@ -262,86 +262,5 @@ watch(
updateValidationResult()
}
)
// TODO @puhui999：unocss
// TODO @puhui999：unocss - 已完成转换
</script>
<style scoped>
.device-trigger-config {
display: flex;
flex-direction: column;
gap: 16px;
}
.state-update-notice {
margin-top: 8px;
}
.notice-tip {
margin: 4px 0 0 0;
font-size: 12px;
color: var(--el-text-color-secondary);
}
.condition-groups-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.header-left {
display: flex;
align-items: center;
gap: 8px;
}
.header-title {
font-size: 14px;
font-weight: 500;
color: var(--el-text-color-primary);
}
.header-right {
display: flex;
align-items: center;
gap: 8px;
}
.condition-groups-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.condition-group {
border: 1px solid var(--el-border-color-lighter);
border-radius: 6px;
background: var(--el-fill-color-blank);
}
.group-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--el-fill-color-light);
border-bottom: 1px solid var(--el-border-color-lighter);
}
.group-title {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
color: var(--el-text-color-primary);
}
.empty-conditions {
padding: 40px 0;
text-align: center;
}
.validation-result {
margin-top: 8px;
}
</style>

69
src/views/iot/rule/scene/components/configs/TimerTriggerConfig.vue
View File

@@ -1,12 +1,12 @@
<!-- 定时触发配置组件 -->
<template>
<div class="timer-trigger-config">
<div class="config-header">
<div class="header-left">
<Icon icon="ep:timer" class="header-icon" />
<span class="header-title">定时触发配置</span>
<div class="flex flex-col gap-16px">
<div class="flex items-center justify-between p-12px px-16px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
<div class="flex items-center gap-8px">
<Icon icon="ep:timer" class="text-[var(--el-color-danger)] text-18px" />
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">定时触发配置</span>
</div>
<div class="header-right">
<div class="flex items-center gap-8px">
<el-button type="text" size="small" @click="showBuilder = !showBuilder">
<Icon :icon="showBuilder ? 'ep:edit' : 'ep:setting'" />
{{ showBuilder ? '手动编辑' : '可视化编辑' }}
@@ -16,12 +16,12 @@
<!-- 可视化编辑器 -->
<!-- TODO @puhui999：是不是复用现有的 cron 组件；不然有点重复哈；维护比较复杂 -->
<div v-if="showBuilder" class="visual-builder">
<div v-if="showBuilder" class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
<CronBuilder v-model="localValue" @validate="handleValidate" />
</div>
<!-- 手动编辑 -->
<div v-else class="manual-editor">
<div v-else class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
<el-form-item label="CRON表达式" required>
<CronInput v-model="localValue" @validate="handleValidate" />
</el-form-item>
@@ -31,7 +31,7 @@
<NextExecutionPreview :cron-expression="localValue" />
<!-- 验证结果 -->
<div v-if="validationMessage" class="validation-result">
<div v-if="validationMessage" class="mt-8px">
<el-alert
:title="validationMessage"
:type="isValid ? 'success' : 'error'"
@@ -85,55 +85,4 @@ onMounted(() => {
})
</script>
<style scoped>
.timer-trigger-config {
display: flex;
flex-direction: column;
gap: 16px;
}
.config-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--el-fill-color-light);
border-radius: 6px;
border: 1px solid var(--el-border-color-lighter);
}
.header-left {
display: flex;
align-items: center;
gap: 8px;
}
.header-icon {
color: var(--el-color-danger);
font-size: 18px;
}
.header-title {
font-size: 14px;
font-weight: 500;
color: var(--el-text-color-primary);
}
.header-right {
display: flex;
align-items: center;
gap: 8px;
}
.visual-builder,
.manual-editor {
padding: 16px;
border: 1px solid var(--el-border-color-lighter);
border-radius: 6px;
background: var(--el-fill-color-blank);
}
.validation-result {
margin-top: 8px;
}
</style>

49
src/views/iot/rule/scene/components/previews/ConfigPreview.vue
View File

@@ -1,21 +1,21 @@
<!-- 配置预览组件 -->
<!-- TODO @puhui999：应该暂时不用预览哈 -->
<template>
<div class="config-preview">
<div class="preview-items">
<div class="preview-item">
<span class="item-label">场景名称：</span>
<span class="item-value">{{ formData.name || '未设置' }}</span>
<div class="w-full">
<div class="space-y-8px">
<div class="flex items-start gap-8px">
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">场景名称：</span>
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ formData.name || '未设置' }}</span>
</div>
<div class="preview-item">
<span class="item-label">场景状态：</span>
<div class="flex items-start gap-8px">
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">场景状态：</span>
<el-tag :type="formData.status === 0 ? 'success' : 'danger'" size="small">
{{ formData.status === 0 ? '启用' : '禁用' }}
</el-tag>
</div>
<div v-if="formData.description" class="preview-item">
<span class="item-label">场景描述：</span>
<span class="item-value">{{ formData.description }}</span>
<div v-if="formData.description" class="flex items-start gap-8px">
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">场景描述：</span>
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ formData.description }}</span>
</div>
</div>
</div>
@@ -34,33 +34,4 @@ interface Props {
defineProps<Props>()
</script>
<style scoped>
.config-preview {
width: 100%;
}
.preview-items {
display: flex;
flex-direction: column;
gap: 8px;
}
.preview-item {
display: flex;
align-items: center;
gap: 8px;
}
.item-label {
font-size: 12px;
color: var(--el-text-color-secondary);
min-width: 80px;
flex-shrink: 0;
}
.item-value {
font-size: 12px;
color: var(--el-text-color-primary);
flex: 1;
}
</style>

69
src/views/iot/rule/scene/components/previews/TriggerPreview.vue
View File

@@ -1,24 +1,24 @@
<!-- 触发器预览组件 -->
<template>
<div class="trigger-preview">
<div v-if="triggers.length === 0" class="empty-preview">
<div class="w-full">
<div v-if="triggers.length === 0" class="text-center py-20px">
<el-text type="info" size="small">暂无触发器配置</el-text>
</div>
<div v-else class="trigger-list">
<div v-else class="space-y-12px">
<div
v-for="(trigger, index) in triggers"
:key="index"
class="trigger-item"
class="p-12px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
>
<div class="trigger-header">
<Icon icon="ep:lightning" class="trigger-icon" />
<span class="trigger-title">触发器 {{ index + 1 }}</span>
<div class="flex items-center gap-8px mb-8px">
<Icon icon="ep:lightning" class="text-[var(--el-color-warning)] text-16px" />
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">触发器 {{ index + 1 }}</span>
<el-tag :type="getTriggerTypeTag(trigger.type)" size="small">
{{ getTriggerTypeName(trigger.type) }}
</el-tag>
</div>
<div class="trigger-content">
<div class="trigger-summary">
<div class="pl-24px">
<div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">
{{ getTriggerSummary(trigger) }}
</div>
</div>
@@ -77,55 +77,4 @@ const getTriggerSummary = (trigger: TriggerFormData) => {
}
</script>
<style scoped>
.trigger-preview {
width: 100%;
}
.empty-preview {
text-align: center;
padding: 20px 0;
}
.trigger-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.trigger-item {
border: 1px solid var(--el-border-color-lighter);
border-radius: 4px;
background: var(--el-fill-color-blank);
}
.trigger-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--el-fill-color-light);
border-bottom: 1px solid var(--el-border-color-lighter);
}
.trigger-icon {
color: var(--el-color-warning);
font-size: 14px;
}
.trigger-title {
font-size: 12px;
font-weight: 500;
color: var(--el-text-color-primary);
}
.trigger-content {
padding: 8px 12px;
}
.trigger-summary {
font-size: 12px;
color: var(--el-text-color-secondary);
line-height: 1.4;
}
</style>