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

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>