fix(iot): 设备配置详情统一 460px 高度 + 按钮加 8px 间距，卡片视图删除按钮改 !h-8 对齐其它按钮高度
YunaiV
parent
d1a2601b6c
commit
c8ce1a8911
|
|
@ -127,7 +127,7 @@ async function updateDeviceConfig() {
|
|||
<div>
|
||||
<!-- 使用说明提示 -->
|
||||
<Alert
|
||||
class="my-4"
|
||||
class="!mb-4"
|
||||
description="如需编辑文件，请点击下方编辑按钮"
|
||||
message="支持远程更新设备的配置文件(JSON 格式)，可以在下方编辑配置模板，对设备的系统参数、网络参数等进行远程配置。配置完成后，需点击「配置推送」按钮，设备即可进行远程配置。"
|
||||
show-icon
|
||||
|
|
@ -135,28 +135,22 @@ async function updateDeviceConfig() {
|
|||
/>
|
||||
|
||||
<!-- 代码视图 - 只读展示 -->
|
||||
<div
|
||||
<pre
|
||||
v-if="!isEditing"
|
||||
class="max-h-[600px] overflow-y-auto rounded border border-[#d9d9d9] bg-[#f5f5f5] p-3 dark:border-[#3a3a3a] dark:bg-[#1a1a1a]"
|
||||
>
|
||||
<pre
|
||||
class="m-0 whitespace-pre-wrap break-words font-mono text-[13px] leading-normal text-[#333] dark:text-gray-300"
|
||||
>
|
||||
<code>{{ formattedConfig }}</code>
|
||||
</pre>
|
||||
</div>
|
||||
class="m-0 h-[460px] overflow-y-auto whitespace-pre-wrap break-words rounded border border-[#d9d9d9] bg-[#f5f5f5] p-3 font-mono text-[13px] leading-normal text-[#333] dark:border-[#3a3a3a] dark:bg-[#1a1a1a] dark:text-gray-300"
|
||||
v-text="formattedConfig"
|
||||
></pre>
|
||||
|
||||
<!-- 编辑器视图 - 可编辑 -->
|
||||
<Textarea
|
||||
v-else
|
||||
v-model:value="configString"
|
||||
:rows="20"
|
||||
class="font-mono text-[13px]"
|
||||
class="!h-[460px] font-mono text-[13px]"
|
||||
placeholder="请输入 JSON 格式的配置信息"
|
||||
/>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="mt-5 text-center">
|
||||
<div class="mt-4 flex justify-center gap-2">
|
||||
<Button v-if="isEditing" @click="handleCancelEdit">取消</Button>
|
||||
<Button
|
||||
v-if="isEditing"
|
||||
|
|
|
|||
|
|
@ -236,19 +236,23 @@ onMounted(() => {
|
|||
<IconifyIcon icon="lucide:database" class="mr-1" />
|
||||
数据
|
||||
</Button>
|
||||
<Popconfirm
|
||||
v-if="hasAccessByCodes(['iot:device:delete'])"
|
||||
:title="`确认删除设备 ${item.deviceName} 吗?`"
|
||||
@confirm="emit('delete', item)"
|
||||
>
|
||||
<Button
|
||||
size="small"
|
||||
danger
|
||||
class="h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
|
||||
<template v-if="hasAccessByCodes(['iot:device:delete'])">
|
||||
<div
|
||||
class="h-5 w-px self-center bg-[#dcdfe6] dark:bg-[#3a3a3a]"
|
||||
></div>
|
||||
<Popconfirm
|
||||
:title="`确认删除设备 ${item.deviceName} 吗?`"
|
||||
@confirm="emit('delete', item)"
|
||||
>
|
||||
<IconifyIcon icon="lucide:trash-2" class="text-sm" />
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
<Button
|
||||
size="small"
|
||||
danger
|
||||
class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
|
||||
>
|
||||
<IconifyIcon icon="lucide:trash-2" class="text-sm" />
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</template>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
|
|
|||
|
|
@ -213,6 +213,9 @@ onMounted(() => {
|
|||
物模型
|
||||
</Button>
|
||||
<template v-if="hasAccessByCodes(['iot:product:delete'])">
|
||||
<div
|
||||
class="h-5 w-px self-center bg-[#dcdfe6] dark:bg-[#3a3a3a]"
|
||||
></div>
|
||||
<Tooltip
|
||||
v-if="item.status === ProductStatusEnum.PUBLISHED"
|
||||
title="已发布的产品不能删除"
|
||||
|
|
@ -221,7 +224,7 @@ onMounted(() => {
|
|||
size="small"
|
||||
danger
|
||||
disabled
|
||||
class="h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
|
||||
class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
|
||||
>
|
||||
<IconifyIcon icon="lucide:trash-2" class="text-sm" />
|
||||
</Button>
|
||||
|
|
@ -234,7 +237,7 @@ onMounted(() => {
|
|||
<Button
|
||||
size="small"
|
||||
danger
|
||||
class="h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
|
||||
class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
|
||||
>
|
||||
<IconifyIcon icon="lucide:trash-2" class="text-sm" />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ async function updateDeviceConfig() {
|
|||
<div>
|
||||
<!-- 使用说明提示 -->
|
||||
<ElAlert
|
||||
class="my-4"
|
||||
class="!mb-4"
|
||||
description="如需编辑文件，请点击下方编辑按钮"
|
||||
title="支持远程更新设备的配置文件(JSON 格式)，可以在下方编辑配置模板，对设备的系统参数、网络参数等进行远程配置。配置完成后，需点击「配置推送」按钮，设备即可进行远程配置。"
|
||||
show-icon
|
||||
|
|
@ -142,29 +142,24 @@ async function updateDeviceConfig() {
|
|||
/>
|
||||
|
||||
<!-- 代码视图 - 只读展示 -->
|
||||
<div
|
||||
<pre
|
||||
v-if="!isEditing"
|
||||
class="max-h-[600px] overflow-y-auto rounded border border-[#d9d9d9] bg-[#f5f5f5] p-3 dark:border-[#3a3a3a] dark:bg-[#1a1a1a]"
|
||||
>
|
||||
<pre
|
||||
class="m-0 whitespace-pre-wrap break-words font-mono text-[13px] leading-normal text-[#333] dark:text-gray-300"
|
||||
>
|
||||
<code>{{ formattedConfig }}</code>
|
||||
</pre>
|
||||
</div>
|
||||
class="m-0 h-[460px] overflow-y-auto whitespace-pre-wrap break-words rounded border border-[#d9d9d9] bg-[#f5f5f5] p-3 font-mono text-[13px] leading-normal text-[#333] dark:border-[#3a3a3a] dark:bg-[#1a1a1a] dark:text-gray-300"
|
||||
v-text="formattedConfig"
|
||||
></pre>
|
||||
|
||||
<!-- 编辑器视图 - 可编辑 -->
|
||||
<ElInput
|
||||
v-else
|
||||
v-model="configString"
|
||||
type="textarea"
|
||||
:rows="20"
|
||||
class="font-mono text-[13px]"
|
||||
:autosize="{ minRows: 20, maxRows: 20 }"
|
||||
class="!h-[460px] font-mono text-[13px]"
|
||||
placeholder="请输入 JSON 格式的配置信息"
|
||||
/>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="mt-5 text-center">
|
||||
<div class="mt-4 flex justify-center gap-2">
|
||||
<ElButton v-if="isEditing" @click="handleCancelEdit">取消</ElButton>
|
||||
<ElButton
|
||||
v-if="isEditing"
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@ onMounted(() => {
|
|||
<ElButton
|
||||
size="small"
|
||||
type="danger"
|
||||
class="h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
|
||||
class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
|
||||
>
|
||||
<IconifyIcon icon="lucide:trash-2" class="text-sm" />
|
||||
</ElButton>
|
||||
|
|
|
|||
|
|
@ -218,7 +218,7 @@ onMounted(() => {
|
|||
size="small"
|
||||
type="danger"
|
||||
disabled
|
||||
class="h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
|
||||
class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
|
||||
>
|
||||
<IconifyIcon icon="lucide:trash-2" class="text-sm" />
|
||||
</ElButton>
|
||||
|
|
@ -232,7 +232,7 @@ onMounted(() => {
|
|||
<ElButton
|
||||
size="small"
|
||||
type="danger"
|
||||
class="h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
|
||||
class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
|
||||
>
|
||||
<IconifyIcon icon="lucide:trash-2" class="text-sm" />
|
||||
</ElButton>
|
||||
|
|
|
|||
Loading…
Reference in New Issue