perf：【IoT 物联网】场景联动样式 unocss 化
puhui999
parent
3adc2e3f97
commit
23c5ca5a66
|
|
@ -9,15 +9,15 @@
|
|||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
@close="handleClose"
|
||||
class="rule-scene-drawer"
|
||||
class="[--el-drawer-padding-primary:20px]"
|
||||
>
|
||||
<div class="rule-scene-form">
|
||||
<div class="h-[calc(100vh-120px)] overflow-y-auto p-20px pb-80px">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="120px"
|
||||
class="form-container"
|
||||
class="flex flex-col gap-24px"
|
||||
>
|
||||
<!-- 基础信息配置 -->
|
||||
<BasicInfoSection v-model="formData" :rules="formRules" />
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<!-- 抽屉底部操作栏 -->
|
||||
<!-- TODO @puhui999：这个按钮逻辑，和别的模块一致 -->
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<div class="absolute bottom-0 left-0 right-0 flex justify-end gap-16px p-16px px-20px bg-[var(--el-bg-color)] border-t border-[var(--el-border-color-light)] shadow-[0_-2px_8px_rgba(0,0,0,0.1)]">
|
||||
<el-button @click="handleClose" size="large">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
|
|
@ -214,53 +214,22 @@ watch(
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rule-scene-drawer {
|
||||
--el-drawer-padding-primary: 20px;
|
||||
}
|
||||
|
||||
.rule-scene-form {
|
||||
height: calc(100vh - 120px);
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
padding-bottom: 80px; /* 为底部操作栏留出空间 */
|
||||
}
|
||||
|
||||
.form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
padding: 16px 20px;
|
||||
background: var(--el-bg-color);
|
||||
border-top: 1px solid var(--el-border-color-light);
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.rule-scene-form::-webkit-scrollbar {
|
||||
.h-\[calc\(100vh-120px\)\]::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.rule-scene-form::-webkit-scrollbar-track {
|
||||
.h-\[calc\(100vh-120px\)\]::-webkit-scrollbar-track {
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.rule-scene-form::-webkit-scrollbar-thumb {
|
||||
.h-\[calc\(100vh-120px\)\]::-webkit-scrollbar-thumb {
|
||||
background: var(--el-border-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.rule-scene-form::-webkit-scrollbar-thumb:hover {
|
||||
.h-\[calc\(100vh-120px\)\]::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--el-border-color-dark);
|
||||
}
|
||||
|
||||
|
|
@ -284,20 +253,20 @@ watch(
|
|||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.rule-scene-drawer {
|
||||
.el-drawer {
|
||||
--el-drawer-size: 100% !important;
|
||||
}
|
||||
|
||||
.rule-scene-form {
|
||||
.h-\[calc\(100vh-120px\)\] {
|
||||
padding: 16px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
.flex.flex-col.gap-24px {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
.absolute.bottom-0 {
|
||||
padding: 12px 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- 场景名称输入组件 -->
|
||||
<template>
|
||||
<div class="name-input">
|
||||
<div class="relative w-full">
|
||||
<el-input
|
||||
v-model="localValue"
|
||||
placeholder="请输入场景名称"
|
||||
|
|
@ -11,21 +11,21 @@
|
|||
@input="handleInput"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon icon="ep:edit" class="input-icon" />
|
||||
<Icon icon="ep:edit" class="text-[var(--el-text-color-placeholder)]" />
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<!-- 智能提示 -->
|
||||
<!-- TODO @puhui999：暂时不用考虑智能推荐哈。用途不大 -->
|
||||
<div v-if="showSuggestions && suggestions.length > 0" class="suggestions">
|
||||
<div class="suggestions-header">
|
||||
<span class="suggestions-title">推荐名称</span>
|
||||
<div v-if="showSuggestions && suggestions.length > 0" class="absolute top-full left-0 right-0 z-1000 bg-white border border-[var(--el-border-color-light)] rounded-4px shadow-[var(--el-box-shadow-light)] mt-4px">
|
||||
<div class="p-8px px-12px border-b border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-light)]">
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] font-500">推荐名称</span>
|
||||
</div>
|
||||
<div class="suggestions-list">
|
||||
<div class="max-h-200px overflow-y-auto">
|
||||
<div
|
||||
v-for="suggestion in suggestions"
|
||||
:key="suggestion"
|
||||
class="suggestion-item"
|
||||
class="p-8px px-12px cursor-pointer transition-colors duration-200 text-14px text-[var(--el-text-color-primary)] hover:bg-[var(--el-fill-color-light)] last:border-b-0"
|
||||
@click="applySuggestion(suggestion)"
|
||||
>
|
||||
{{ suggestion }}
|
||||
|
|
@ -108,59 +108,4 @@ onMounted(() => {
|
|||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.name-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.suggestions-header {
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.suggestions-title {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.suggestions-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.suggestion-item:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.suggestion-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<!-- 基础信息配置组件 -->
|
||||
<template>
|
||||
<el-card class="basic-info-section" shadow="never">
|
||||
<el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
|
||||
<template #header>
|
||||
<div class="section-header">
|
||||
<div class="header-left">
|
||||
<Icon icon="ep:info-filled" class="section-icon" />
|
||||
<span class="section-title">基础信息</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-8px">
|
||||
<Icon icon="ep:info-filled" class="text-[var(--el-color-primary)] text-18px" />
|
||||
<span class="text-16px font-600 text-[var(--el-text-color-primary)]">基础信息</span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="flex items-center gap-8px">
|
||||
<el-tag :type="formData.status === 0 ? 'success' : 'danger'" size="small">
|
||||
{{ formData.status === 0 ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="p-0">
|
||||
<el-row :gutter="24">
|
||||
<!-- TODO @puhui999：NameInput、StatusRadio、DescriptionInput 是不是直接写在当前界面哈。有点散； -->
|
||||
<el-col :span="12">
|
||||
|
|
@ -65,44 +65,6 @@ const formData = useVModel(props, 'modelValue', emit)
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.basic-info-section {
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
color: var(--el-color-primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<!-- 触发器配置组件 -->
|
||||
<template>
|
||||
<el-card class="trigger-section" shadow="never">
|
||||
<el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
|
||||
<template #header>
|
||||
<div class="section-header">
|
||||
<div class="header-left">
|
||||
<Icon icon="ep:lightning" class="section-icon" />
|
||||
<span class="section-title">触发器配置</span>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-8px">
|
||||
<Icon icon="ep:lightning" class="text-[var(--el-color-primary)] text-18px" />
|
||||
<span class="text-16px font-600 text-[var(--el-text-color-primary)]">触发器配置</span>
|
||||
<!-- TODO @puhui999：是不是去掉 maxTriggers；计数 -->
|
||||
<el-tag size="small" type="info">{{ triggers.length }}/{{ maxTriggers }}</el-tag>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="flex items-center gap-8px">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
|
|
@ -23,9 +23,9 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="p-0">
|
||||
<!-- 空状态 -->
|
||||
<div v-if="triggers.length === 0" class="empty-state">
|
||||
<div v-if="triggers.length === 0">
|
||||
<el-empty description="暂无触发器配置">
|
||||
<!-- TODO @puhui999：这个要不要去掉哈；入口统一点 -->
|
||||
<el-button type="primary" @click="addTrigger">
|
||||
|
|
@ -36,17 +36,17 @@
|
|||
</div>
|
||||
|
||||
<!-- 触发器列表 -->
|
||||
<div v-else class="triggers-list">
|
||||
<div v-for="(trigger, index) in triggers" :key="`trigger-${index}`" class="trigger-item">
|
||||
<div class="trigger-header">
|
||||
<div class="trigger-title">
|
||||
<Icon icon="ep:lightning" class="trigger-icon" />
|
||||
<div v-else class="space-y-16px">
|
||||
<div v-for="(trigger, index) in triggers" :key="`trigger-${index}`" class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
|
||||
<div class="flex items-center justify-between mb-16px">
|
||||
<div class="flex items-center gap-8px">
|
||||
<Icon icon="ep:lightning" class="text-[var(--el-color-warning)] text-16px" />
|
||||
<span>触发器 {{ index + 1 }}</span>
|
||||
<el-tag :type="getTriggerTypeTag(trigger.type)" size="small">
|
||||
{{ getTriggerTypeName(trigger.type) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="trigger-actions">
|
||||
<div>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trigger-content">
|
||||
<div class="space-y-16px">
|
||||
<!-- 触发类型选择 -->
|
||||
<TriggerTypeSelector
|
||||
:model-value="trigger.type"
|
||||
|
|
@ -89,12 +89,12 @@
|
|||
|
||||
<!-- 添加提示 -->
|
||||
<!-- TODO @puhui999：这个要不要去掉哈；入口统一点 -->
|
||||
<div v-if="triggers.length > 0 && triggers.length < maxTriggers" class="add-more">
|
||||
<el-button type="primary" plain @click="addTrigger" class="add-more-btn">
|
||||
<div v-if="triggers.length > 0 && triggers.length < maxTriggers" class="text-center py-16px">
|
||||
<el-button type="primary" plain @click="addTrigger">
|
||||
<Icon icon="ep:plus" />
|
||||
继续添加触发器
|
||||
</el-button>
|
||||
<span class="add-more-text"> 最多可添加 {{ maxTriggers }} 个触发器 </span>
|
||||
<span class="block mt-8px text-12px text-[var(--el-text-color-secondary)]"> 最多可添加 {{ maxTriggers }} 个触发器 </span>
|
||||
</div>
|
||||
|
||||
<!-- 验证结果 -->
|
||||
|
|
@ -279,107 +279,4 @@ watch(
|
|||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.trigger-section {
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
color: var(--el-color-primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.triggers-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.trigger-item {
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 6px;
|
||||
background: var(--el-fill-color-blank);
|
||||
}
|
||||
|
||||
.trigger-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);
|
||||
}
|
||||
|
||||
.trigger-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.trigger-icon {
|
||||
color: var(--el-color-warning);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.trigger-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.add-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
background: var(--el-fill-color-lighter);
|
||||
}
|
||||
|
||||
.add-more-btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.add-more-text {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.validation-result {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@
|
|||
:label="product.name"
|
||||
:value="product.id"
|
||||
>
|
||||
<div class="product-option">
|
||||
<div class="option-content">
|
||||
<div class="option-name">{{ product.name }}</div>
|
||||
<div class="option-key">{{ product.productKey }}</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">{{ product.name }}</div>
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)]">{{ product.productKey }}</div>
|
||||
</div>
|
||||
<!-- TODO @puhui999：是不是用字典 -->
|
||||
<el-tag size="small" :type="product.status === 0 ? 'success' : 'danger'">
|
||||
|
|
@ -68,10 +68,10 @@
|
|||
:label="device.deviceName"
|
||||
:value="device.id"
|
||||
>
|
||||
<div class="device-option">
|
||||
<div class="option-content">
|
||||
<div class="option-name">{{ device.deviceName }}</div>
|
||||
<div class="option-nickname">{{ device.nickname || '无备注' }}</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">{{ device.deviceName }}</div>
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)]">{{ device.nickname || '无备注' }}</div>
|
||||
</div>
|
||||
<el-tag size="small" :type="getDeviceStatusTag(device.state)">
|
||||
{{ getDeviceStatusText(device.state) }}
|
||||
|
|
@ -84,21 +84,21 @@
|
|||
</el-row>
|
||||
|
||||
<!-- 选择结果展示 -->
|
||||
<div v-if="localProductId && localDeviceId !== undefined" class="selection-result">
|
||||
<div class="result-header">
|
||||
<Icon icon="ep:check" class="result-icon" />
|
||||
<span class="result-title">已选择设备</span>
|
||||
<div v-if="localProductId && localDeviceId !== undefined" 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-6px mb-8px">
|
||||
<Icon icon="ep:check" class="text-[var(--el-color-success)] text-16px" />
|
||||
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">已选择设备</span>
|
||||
</div>
|
||||
<div class="result-content">
|
||||
<div class="result-item">
|
||||
<span class="result-label">产品：</span>
|
||||
<span class="result-value">{{ selectedProduct?.name }}</span>
|
||||
<div class="flex flex-col gap-6px ml-22px">
|
||||
<div class="flex items-center gap-8px">
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-40px">产品：</span>
|
||||
<span class="text-12px text-[var(--el-text-color-primary)] font-500">{{ selectedProduct?.name }}</span>
|
||||
<el-tag size="small" type="primary">{{ selectedProduct?.productKey }}</el-tag>
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<span class="result-label">设备：</span>
|
||||
<span v-if="deviceSelectionMode === 'all'" class="result-value">全部设备</span>
|
||||
<span v-else class="result-value">{{ selectedDevice?.deviceName }}</span>
|
||||
<div class="flex items-center gap-8px">
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-40px">设备：</span>
|
||||
<span v-if="deviceSelectionMode === 'all'" class="text-12px text-[var(--el-text-color-primary)] font-500">全部设备</span>
|
||||
<span v-else class="text-12px text-[var(--el-text-color-primary)] font-500">{{ selectedDevice?.deviceName }}</span>
|
||||
<el-tag v-if="deviceSelectionMode === 'all'" size="small" type="warning"> 全部 </el-tag>
|
||||
<el-tag v-else size="small" :type="getDeviceStatusTag(selectedDevice?.state)">
|
||||
{{ getDeviceStatusText(selectedDevice?.state) }}
|
||||
|
|
@ -288,87 +288,6 @@ watch(
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.product-device-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-option,
|
||||
.device-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-key,
|
||||
.option-nickname {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.selection-result {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
color: var(--el-color-success);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.result-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-left: 22px;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.result-value {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__item) {
|
||||
height: auto;
|
||||
padding: 8px 20px;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<h2 class="page-title">
|
||||
<Icon icon="ep:connection" class="title-icon" />
|
||||
<div class="flex justify-between items-start mb-20px">
|
||||
<div class="flex-1">
|
||||
<h2 class="flex items-center m-0 mb-8px text-24px font-600 text-[#303133]">
|
||||
<Icon icon="ep:connection" class="mr-12px text-[#409eff]" />
|
||||
场景联动规则
|
||||
</h2>
|
||||
<p class="page-description"> 通过配置触发条件和执行动作，实现设备间的智能联动控制 </p>
|
||||
<p class="m-0 text-[#606266] text-14px"> 通过配置触发条件和执行动作，实现设备间的智能联动控制 </p>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<Icon icon="ep:plus" />
|
||||
新增规则
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
</div>
|
||||
|
||||
<!-- 搜索和筛选 -->
|
||||
<el-card class="search-card" shadow="never">
|
||||
<el-card class="mb-16px" shadow="never">
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:model="queryParams"
|
||||
|
|
@ -62,55 +62,55 @@
|
|||
|
||||
<!-- 统计卡片 -->
|
||||
<!-- TODO @puhui999：这种需要服用的 stats-content、stats-info 的属性，到底 unocss 好，还是现有的 style css 好~ -->
|
||||
<el-row :gutter="16" class="stats-row">
|
||||
<el-row :gutter="16" class="mb-16px">
|
||||
<el-col :span="6">
|
||||
<el-card class="stats-card" shadow="hover">
|
||||
<div class="stats-content">
|
||||
<div class="stats-icon total">
|
||||
<el-card class="cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-2px" shadow="hover">
|
||||
<div class="flex items-center">
|
||||
<div class="w-48px h-48px rounded-8px flex items-center justify-center text-24px text-white mr-16px bg-gradient-to-br from-[#667eea] to-[#764ba2]">
|
||||
<Icon icon="ep:document" />
|
||||
</div>
|
||||
<div class="stats-info">
|
||||
<div class="stats-number">{{ statistics.total }}</div>
|
||||
<div class="stats-label">总规则数</div>
|
||||
<div>
|
||||
<div class="text-24px font-600 text-[#303133] leading-none">{{ statistics.total }}</div>
|
||||
<div class="text-14px text-[#909399] mt-4px">总规则数</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card class="stats-card" shadow="hover">
|
||||
<div class="stats-content">
|
||||
<div class="stats-icon enabled">
|
||||
<el-card class="cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-2px" shadow="hover">
|
||||
<div class="flex items-center">
|
||||
<div class="w-48px h-48px rounded-8px flex items-center justify-center text-24px text-white mr-16px bg-gradient-to-br from-[#f093fb] to-[#f5576c]">
|
||||
<Icon icon="ep:check" />
|
||||
</div>
|
||||
<div class="stats-info">
|
||||
<div class="stats-number">{{ statistics.enabled }}</div>
|
||||
<div class="stats-label">启用规则</div>
|
||||
<div>
|
||||
<div class="text-24px font-600 text-[#303133] leading-none">{{ statistics.enabled }}</div>
|
||||
<div class="text-14px text-[#909399] mt-4px">启用规则</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card class="stats-card" shadow="hover">
|
||||
<div class="stats-content">
|
||||
<div class="stats-icon disabled">
|
||||
<el-card class="cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-2px" shadow="hover">
|
||||
<div class="flex items-center">
|
||||
<div class="w-48px h-48px rounded-8px flex items-center justify-center text-24px text-white mr-16px bg-gradient-to-br from-[#4facfe] to-[#00f2fe]">
|
||||
<Icon icon="ep:close" />
|
||||
</div>
|
||||
<div class="stats-info">
|
||||
<div class="stats-number">{{ statistics.disabled }}</div>
|
||||
<div class="stats-label">禁用规则</div>
|
||||
<div>
|
||||
<div class="text-24px font-600 text-[#303133] leading-none">{{ statistics.disabled }}</div>
|
||||
<div class="text-14px text-[#909399] mt-4px">禁用规则</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card class="stats-card" shadow="hover">
|
||||
<div class="stats-content">
|
||||
<div class="stats-icon active">
|
||||
<el-card class="cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-2px" shadow="hover">
|
||||
<div class="flex items-center">
|
||||
<div class="w-48px h-48px rounded-8px flex items-center justify-center text-24px text-white mr-16px bg-gradient-to-br from-[#43e97b] to-[#38f9d7]">
|
||||
<Icon icon="ep:lightning" />
|
||||
</div>
|
||||
<div class="stats-info">
|
||||
<div class="stats-number">{{ statistics.triggered }}</div>
|
||||
<div class="stats-label">今日触发</div>
|
||||
<div>
|
||||
<div class="text-24px font-600 text-[#303133] leading-none">{{ statistics.triggered }}</div>
|
||||
<div class="text-14px text-[#909399] mt-4px">今日触发</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -118,36 +118,36 @@
|
|||
</el-row>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-card class="table-card" shadow="never">
|
||||
<el-card class="mb-20px" shadow="never">
|
||||
<el-table v-loading="loading" :data="list" stripe @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="规则名称" prop="name" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<div class="rule-name-cell">
|
||||
<span class="rule-name">{{ row.name }}</span>
|
||||
<div class="flex items-center gap-8px">
|
||||
<span class="font-500 text-[#303133]">{{ row.name }}</span>
|
||||
<!-- TODO @puhui999：字典 -->
|
||||
<el-tag
|
||||
:type="row.status === 0 ? 'success' : 'danger'"
|
||||
size="small"
|
||||
class="status-tag"
|
||||
class="flex-shrink-0"
|
||||
>
|
||||
{{ row.status === 0 ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-if="row.description" class="rule-description">
|
||||
<div v-if="row.description" class="text-12px text-[#909399] mt-4px">
|
||||
{{ row.description }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="触发条件" min-width="250">
|
||||
<template #default="{ row }">
|
||||
<div class="trigger-summary">
|
||||
<div class="flex flex-wrap gap-4px">
|
||||
<el-tag
|
||||
v-for="(trigger, index) in getTriggerSummary(row)"
|
||||
:key="index"
|
||||
type="primary"
|
||||
size="small"
|
||||
class="trigger-tag"
|
||||
class="m-0"
|
||||
>
|
||||
{{ trigger }}
|
||||
</el-tag>
|
||||
|
|
@ -156,13 +156,13 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="执行动作" min-width="250">
|
||||
<template #default="{ row }">
|
||||
<div class="action-summary">
|
||||
<div class="flex flex-wrap gap-4px">
|
||||
<el-tag
|
||||
v-for="(action, index) in getActionSummary(row)"
|
||||
:key="index"
|
||||
type="success"
|
||||
size="small"
|
||||
class="action-tag"
|
||||
class="m-0"
|
||||
>
|
||||
{{ action }}
|
||||
</el-tag>
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<!-- TODO @puhui999：间隙大了点 -->
|
||||
<div class="action-buttons">
|
||||
<div class="flex gap-8px">
|
||||
<el-button type="primary" link @click="handleEdit(row)">
|
||||
<Icon icon="ep:edit" />
|
||||
编辑
|
||||
|
|
@ -219,11 +219,11 @@
|
|||
</el-card>
|
||||
|
||||
<!-- 批量操作 -->
|
||||
<div v-if="selectedRows.length > 0" class="batch-actions">
|
||||
<div v-if="selectedRows.length > 0" class="fixed bottom-20px left-1/2 transform -translate-x-1/2 z-1000">
|
||||
<el-card shadow="always">
|
||||
<div class="batch-content">
|
||||
<span class="batch-info"> 已选择 {{ selectedRows.length }} 项 </span>
|
||||
<div class="batch-buttons">
|
||||
<div class="flex items-center gap-16px">
|
||||
<span class="font-500 text-[#303133]"> 已选择 {{ selectedRows.length }} 项 </span>
|
||||
<div class="flex gap-8px">
|
||||
<el-button @click="handleBatchEnable">
|
||||
<Icon icon="ep:video-play" />
|
||||
批量启用
|
||||
|
|
@ -494,165 +494,4 @@ onMounted(() => {
|
|||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/** TODO @puhui999：看看下面的，是不是可以用 unocss 替代 */
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
margin-right: 12px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.stats-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stats-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stats-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.stats-icon.total {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.stats-icon.enabled {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
}
|
||||
|
||||
.stats-icon.disabled {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
}
|
||||
|
||||
.stats-icon.active {
|
||||
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||||
}
|
||||
|
||||
.stats-number {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.rule-name-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rule-name {
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rule-description {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.trigger-summary,
|
||||
.action-summary {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.trigger-tag,
|
||||
.action-tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.batch-actions {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.batch-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.batch-info {
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.batch-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue