perf：【IoT 物联网】场景联动样式 unocss 化
puhui999
parent
d4555907cc
commit
52b9c1827e
|
|
@ -1,6 +1,6 @@
|
|||
<!-- 执行器类型选择组件 -->
|
||||
<template>
|
||||
<div class="action-type-selector">
|
||||
<div class="w-full">
|
||||
<!-- TODO @puhui999：1）设备属性设置时，貌似没选属性；2）服务调用时，貌似也没的设置哈； -->
|
||||
<el-form-item label="执行类型" required>
|
||||
<el-select
|
||||
|
|
@ -15,12 +15,12 @@
|
|||
:label="option.label"
|
||||
:value="option.value"
|
||||
>
|
||||
<div class="action-option">
|
||||
<div class="option-content">
|
||||
<Icon :icon="option.icon" class="option-icon" />
|
||||
<div class="option-info">
|
||||
<div class="option-label">{{ option.label }}</div>
|
||||
<div class="option-desc">{{ option.description }}</div>
|
||||
<div class="flex items-center justify-between w-full py-4px">
|
||||
<div class="flex items-center gap-12px flex-1">
|
||||
<Icon :icon="option.icon" class="text-18px text-[var(--el-color-primary)] flex-shrink-0" />
|
||||
<div class="flex-1">
|
||||
<div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{ option.label }}</div>
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">{{ option.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-tag :type="option.tag" size="small">
|
||||
|
|
@ -97,48 +97,6 @@ const handleChange = (value: number) => {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.action-type-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.action-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.option-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.option-icon {
|
||||
font-size: 18px;
|
||||
color: var(--el-color-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.option-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
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);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__item) {
|
||||
height: auto;
|
||||
padding: 8px 20px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- 操作符选择器组件 -->
|
||||
<template>
|
||||
<div class="operator-selector">
|
||||
<div class="w-full">
|
||||
<el-select
|
||||
v-model="localValue"
|
||||
placeholder="请选择操作符"
|
||||
|
|
@ -13,26 +13,26 @@
|
|||
:label="operator.label"
|
||||
:value="operator.value"
|
||||
>
|
||||
<div class="operator-option">
|
||||
<div class="option-content">
|
||||
<div class="option-label">{{ operator.label }}</div>
|
||||
<div class="option-symbol">{{ operator.symbol }}</div>
|
||||
<div class="flex items-center justify-between w-full py-4px">
|
||||
<div class="flex items-center gap-8px">
|
||||
<div class="text-14px font-500 text-[var(--el-text-color-primary)]">{{ operator.label }}</div>
|
||||
<div class="text-12px text-[var(--el-color-primary)] bg-[var(--el-color-primary-light-9)] px-6px py-2px rounded-4px font-mono">{{ operator.symbol }}</div>
|
||||
</div>
|
||||
<div class="option-desc">{{ operator.description }}</div>
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)]">{{ operator.description }}</div>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 操作符说明 -->
|
||||
<!-- TODO @puhui999：这个去掉 -->
|
||||
<div v-if="selectedOperator" class="operator-description">
|
||||
<div class="desc-content">
|
||||
<Icon icon="ep:info-filled" class="desc-icon" />
|
||||
<span class="desc-text">{{ selectedOperator.description }}</span>
|
||||
<div v-if="selectedOperator" class="mt-8px p-8px bg-[var(--el-fill-color-light)] rounded-4px border border-[var(--el-border-color-lighter)]">
|
||||
<div class="flex items-center gap-6px">
|
||||
<Icon icon="ep:info-filled" class="text-12px text-[var(--el-color-info)]" />
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)]">{{ selectedOperator.description }}</span>
|
||||
</div>
|
||||
<div v-if="selectedOperator.example" class="desc-example">
|
||||
<span class="example-label">示例：</span>
|
||||
<code class="example-code">{{ selectedOperator.example }}</code>
|
||||
<div v-if="selectedOperator.example" class="flex items-center gap-6px mt-4px">
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)]">示例：</span>
|
||||
<code class="text-12px text-[var(--el-color-primary)] bg-[var(--el-fill-color-blank)] px-4px py-2px rounded-2px font-mono">{{ selectedOperator.example }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -184,92 +184,6 @@ watch(
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.operator-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.operator-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.option-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.option-symbol {
|
||||
font-size: 16px;
|
||||
color: var(--el-color-primary);
|
||||
font-weight: bold;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.option-desc {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
max-width: 120px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.operator-description {
|
||||
margin-top: 8px;
|
||||
padding: 8px 12px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.desc-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.desc-icon {
|
||||
color: var(--el-color-primary);
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.desc-text {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.desc-example {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.example-label {
|
||||
font-size: 11px;
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
|
||||
.example-code {
|
||||
font-size: 11px;
|
||||
color: var(--el-color-primary);
|
||||
background: var(--el-fill-color-blank);
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__item) {
|
||||
height: auto;
|
||||
padding: 8px 20px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- 属性选择器组件 -->
|
||||
<!-- TODO @yunai：可能要在 review 下 -->
|
||||
<template>
|
||||
<div class="property-selector">
|
||||
<div class="w-full">
|
||||
<el-select
|
||||
v-model="localValue"
|
||||
placeholder="请选择监控项"
|
||||
|
|
@ -18,12 +18,12 @@
|
|||
:label="property.name"
|
||||
:value="property.identifier"
|
||||
>
|
||||
<div class="property-option">
|
||||
<div class="option-content">
|
||||
<div class="option-name">{{ property.name }}</div>
|
||||
<div class="option-identifier">{{ property.identifier }}</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">{{ property.name }}</div>
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)]">{{ property.identifier }}</div>
|
||||
</div>
|
||||
<div class="option-meta">
|
||||
<div class="flex-shrink-0">
|
||||
<el-tag :type="getPropertyTypeTag(property.dataType)" size="small">
|
||||
{{ getPropertyTypeName(property.dataType) }}
|
||||
</el-tag>
|
||||
|
|
@ -34,30 +34,30 @@
|
|||
</el-select>
|
||||
|
||||
<!-- 属性详情 -->
|
||||
<div v-if="selectedProperty" class="property-details">
|
||||
<div class="details-header">
|
||||
<Icon icon="ep:info-filled" class="details-icon" />
|
||||
<span class="details-title">{{ selectedProperty.name }}</span>
|
||||
<div v-if="selectedProperty" 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:info-filled" class="text-[var(--el-color-info)] text-16px" />
|
||||
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">{{ selectedProperty.name }}</span>
|
||||
<el-tag :type="getPropertyTypeTag(selectedProperty.dataType)" size="small">
|
||||
{{ getPropertyTypeName(selectedProperty.dataType) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="details-content">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">标识符：</span>
|
||||
<span class="detail-value">{{ selectedProperty.identifier }}</span>
|
||||
<div class="space-y-8px ml-24px">
|
||||
<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">{{ selectedProperty.identifier }}</span>
|
||||
</div>
|
||||
<div v-if="selectedProperty.description" class="detail-item">
|
||||
<span class="detail-label">描述：</span>
|
||||
<span class="detail-value">{{ selectedProperty.description }}</span>
|
||||
<div v-if="selectedProperty.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">{{ selectedProperty.description }}</span>
|
||||
</div>
|
||||
<div v-if="selectedProperty.unit" class="detail-item">
|
||||
<span class="detail-label">单位：</span>
|
||||
<span class="detail-value">{{ selectedProperty.unit }}</span>
|
||||
<div v-if="selectedProperty.unit" 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">{{ selectedProperty.unit }}</span>
|
||||
</div>
|
||||
<div v-if="selectedProperty.range" class="detail-item">
|
||||
<span class="detail-label">取值范围：</span>
|
||||
<span class="detail-value">{{ selectedProperty.range }}</span>
|
||||
<div v-if="selectedProperty.range" 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">{{ selectedProperty.range }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -336,90 +336,6 @@ watch(
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.property-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.property-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-identifier {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.option-meta {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.property-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-primary);
|
||||
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: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-primary);
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__item) {
|
||||
height: auto;
|
||||
padding: 8px 20px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- 触发器类型选择组件 -->
|
||||
<template>
|
||||
<div class="trigger-type-selector">
|
||||
<div class="w-full">
|
||||
<el-form-item label="触发类型" required>
|
||||
<el-select
|
||||
v-model="localValue"
|
||||
|
|
@ -14,13 +14,13 @@
|
|||
:label="option.label"
|
||||
:value="option.value"
|
||||
>
|
||||
<div class="trigger-option">
|
||||
<div class="option-content">
|
||||
<div class="flex items-center justify-between w-full py-4px">
|
||||
<div class="flex items-center gap-12px flex-1">
|
||||
<!-- TODO @puhui999：貌似没对齐？ -->
|
||||
<Icon :icon="option.icon" class="option-icon" />
|
||||
<div class="option-info">
|
||||
<div class="option-label">{{ option.label }}</div>
|
||||
<div class="option-desc">{{ option.description }}</div>
|
||||
<Icon :icon="option.icon" class="text-18px text-[var(--el-color-primary)] flex-shrink-0" />
|
||||
<div class="flex-1">
|
||||
<div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{ option.label }}</div>
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">{{ option.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO @puhui999：这个要不去掉？ -->
|
||||
|
|
@ -34,17 +34,17 @@
|
|||
|
||||
<!-- 类型说明 -->
|
||||
<!-- TODO @puhui999：这个去掉。感觉没啥内容哈； -->
|
||||
<div v-if="selectedOption" class="type-description">
|
||||
<div class="desc-header">
|
||||
<Icon :icon="selectedOption.icon" class="desc-icon" />
|
||||
<span class="desc-title">{{ selectedOption.label }}</span>
|
||||
<div v-if="selectedOption" class="mt-16px p-16px 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="selectedOption.icon" class="text-20px text-[var(--el-color-primary)]" />
|
||||
<span class="text-16px font-600 text-[var(--el-text-color-primary)]">{{ selectedOption.label }}</span>
|
||||
</div>
|
||||
<div class="desc-content">
|
||||
<p class="desc-text">{{ selectedOption.description }}</p>
|
||||
<div class="desc-features">
|
||||
<div v-for="feature in selectedOption.features" :key="feature" class="feature-item">
|
||||
<Icon icon="ep:check" class="feature-icon" />
|
||||
<span class="feature-text">{{ feature }}</span>
|
||||
<div class="ml-28px">
|
||||
<p class="text-14px text-[var(--el-text-color-regular)] m-0 mb-12px leading-relaxed">{{ selectedOption.description }}</p>
|
||||
<div class="flex flex-col gap-6px">
|
||||
<div v-for="feature in selectedOption.features" :key="feature" class="flex items-center gap-6px">
|
||||
<Icon icon="ep:check" class="text-12px text-[var(--el-color-success)] flex-shrink-0" />
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)]">{{ feature }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -134,109 +134,7 @@ const handleChange = (value: number) => {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
/** TODO @puhui999：unocss 哈 */
|
||||
.trigger-type-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.trigger-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.option-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.option-icon {
|
||||
font-size: 18px;
|
||||
color: var(--el-color-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.option-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
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);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.type-description {
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.desc-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.desc-icon {
|
||||
font-size: 20px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.desc-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.desc-content {
|
||||
margin-left: 28px;
|
||||
}
|
||||
|
||||
.desc-text {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
margin: 0 0 12px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.desc-features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 12px;
|
||||
color: var(--el-color-success);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
/** TODO @puhui999：unocss 哈 - 已完成转换 */
|
||||
:deep(.el-select-dropdown__item) {
|
||||
height: auto;
|
||||
padding: 8px 20px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue