fix: 卡片背景颜色

src/components/BadgeStatus/color.ts

@@ -1,12 +1,12 @@
 
 const color = {
-  'processing': '64, 169, 255',
+  'processing': '9, 46, 231',
-  'error': '247, 79, 70',
+  'error': '229, 0, 18',
-  'success': '74, 234, 220',
+  'success': '36, 178, 118',
-  'warning': '250, 178, 71',
+  'warning': '255, 144, 0',
-  'default': '63, 73, 96'
+  'default': '102, 102, 102'
 }
-export const getHexColor = (code: string, pe: number = 0.3) => {
+export const getHexColor = (code: string, pe: number = 0.1) => {
   const _color = color[code] || color.default
   if (code === 'default') {
     pe = 0.1

src/components/CardBox/index.vue

@@ -6,6 +6,18 @@
             @click="handleClick"
         >
             <div class="card-content">
+                <div
+                    class="card-content-bg1"
+                    :style="{
+                        background: getBackgroundColor(statusNames[status]),
+                    }"
+                ></div>
+                <div
+                    class="card-content-bg2"
+                    :style="{
+                        background: getBackgroundColor(statusNames[status]),
+                    }"
+                ></div>
                 <div style="display: flex">
                     <!-- 图片 -->
                     <div class="card-item-avatar">
@@ -17,21 +29,19 @@
                         <slot name="content"></slot>
                     </div>
                 </div>
-
                 <!-- 勾选 -->
                 <div v-if="active" class="checked-icon">
                     <div>
                         <AIcon type="CheckOutlined" />
                     </div>
                 </div>
-
                 <!-- 状态 -->
                 <div
                     v-if="showStatus"
                     class="card-state"
-                    :style='{
+                    :style="{
-                      backgroundColor: getHexColor(statusNames[status])
+                        backgroundColor: getHexColor(statusNames[status]),
-                    }'
+                    }"
                 >
                     <div class="card-state-content">
                         <BadgeStatus
@@ -72,7 +82,7 @@
 
 <script setup lang="ts" name='CardBox'>
 import BadgeStatus from '@/components/BadgeStatus/index.vue';
-import { getHexColor } from '../BadgeStatus/color'
+import color, { getHexColor } from '../BadgeStatus/color';
 import type { ActionsType } from '@/components/Table';
 import { PropType } from 'vue';
 
@@ -123,6 +133,15 @@ const props = defineProps({
     },
 });
 
+const getBackgroundColor = (code: string) => {
+    const _color = color[code] || color.default;
+    return `linear-gradient(
+                188.4deg,
+                rgba(${_color}, 0.03) 22.94%,
+                rgba(${_color}, 0) 94.62%
+            )`;
+};
+
 const handleClick = () => {
     emit('click', props.value);
 };
@@ -257,6 +276,33 @@ const handleClick = () => {
             }
         }
 
+        .card-content-bg1 {
+            position: absolute;
+            right: -5%;
+            height: 100%;
+            width: 44.65%;
+            top: 0;
+            background: linear-gradient(
+                188.4deg,
+                rgba(229, 0, 18, 0.03) 22.94%,
+                rgba(229, 0, 18, 0) 94.62%
+            );
+            transform: skewX(-15deg);
+        }
+
+        .card-content-bg2 {
+            position: absolute;
+            right: -5%;
+            height: 100%;
+            width: calc(44.65% + 34px);
+            top: 0;
+            background: linear-gradient(
+                188.4deg,
+                rgba(229, 0, 18, 0.03) 22.94%,
+                rgba(229, 0, 18, 0) 94.62%
+            );
+            transform: skewX(-15deg);
+        }
         .card-mask {
             position: absolute;
             top: 0;
@@ -268,7 +314,7 @@ const handleClick = () => {
             width: 100%;
             height: 100%;
             color: #fff;
-            background-color: rgba(#000, .5);
+            background-color: rgba(#000, 0.5);
             visibility: hidden;
             cursor: pointer;
             transition: all 0.3s;

src/views/Northbound/AliCloud/index.vue

@@ -27,11 +27,12 @@
             <template #card="slotProps">
                 <CardBox
                     :value="slotProps"
+                    @click="handleView(slotProps.id)"
                     :actions="getActions(slotProps, 'card')"
                     :status="slotProps.state?.value"
                     :statusText="slotProps.state?.text"
                     :statusNames="{
-                        enabled: 'success',
+                        enabled: 'processing',
                         disabled: 'error',
                     }"
                 >
@@ -39,19 +40,20 @@
                         <img :src="getImage('/northbound/aliyun.png')" />
                     </template>
                     <template #content>
-                        <h3
+                        <Ellipsis style="width: calc(100% - 100px)">
-                            class="card-item-content-title"
+                            <span style="font-size: 16px; font-weight: 600">
-                            @click.stop="handleView(slotProps.id)"
+                                {{ slotProps.name }}
-                        >
+                            </span>
-                            {{ slotProps.name }}
+                        </Ellipsis>
-                        </h3>
+                        <j-row style="margin-top: 15px">
-                        <j-row>
                             <j-col :span="12">
                                 <div class="card-item-content-text">
                                     网桥产品
                                 </div>
                                 <Ellipsis>
-                                    <div>{{ slotProps?.bridgeProductName }}</div>
+                                    <div>
+                                        {{ slotProps?.bridgeProductName }}
+                                    </div>
                                 </Ellipsis>
                             </j-col>
                             <j-col :span="12">
@@ -85,9 +87,13 @@
                 </CardBox>
             </template>
             <template #state="slotProps">
-                <j-badge
+                <BadgeStatus
+                    :status="slotProps.state?.value"
                     :text="slotProps.state?.text"
-                    :status="statusMap.get(slotProps.state?.value)"
+                    :statusNames="{
+                        enabled: 'processing',
+                        disabled: 'error',
+                    }"
                 />
             </template>
             <template #action="slotProps">
@@ -100,7 +106,7 @@
                             :disabled="i.disabled"
                             :popConfirm="i.popConfirm"
                             :tooltip="i.tooltip"
-                            style="padding: 0px"
+                            style="padding: 0 5px"
                             @click="i.onClick"
                             type="link"
                             :hasPermission="'Northbound/AliCloud:' + i.key"
@@ -116,20 +122,17 @@
 
 <script setup lang="ts">
 import { query, _undeploy, _deploy, _delete } from '@/api/northbound/alicloud';
-import type { ActionsType } from '@/views/device/Instance/typings'
+import type { ActionsType } from '@/views/device/Instance/typings';
 import { getImage } from '@/utils/comm';
 import { message } from 'jetlinks-ui-components';
 import { useMenuStore } from 'store/menu';
+import BadgeStatus from '@/components/BadgeStatus/index.vue';
 
 const instanceRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 
 const menuStory = useMenuStore();
 
-const statusMap = new Map();
-statusMap.set('enabled', 'success');
-statusMap.set('disabled', 'error');
-
 const columns = [
     {
         title: '名称',
@@ -151,6 +154,7 @@ const columns = [
         title: '说明',
         dataIndex: 'description',
         key: 'description',
+        ellipsis: true,
         search: {
             type: 'string',
         },
@@ -172,7 +176,7 @@ const columns = [
         title: '操作',
         key: 'action',
         fixed: 'right',
-        width: 250,
+        width: 200,
         scopedSlots: true,
     },
 ];

src/views/Northbound/DuerOS/Detail/command/EditTable.vue

@@ -1,47 +1,71 @@
 <template>
-    <j-table
+    <div class="inputs">
-        rowKey="id"
+        <j-form ref="formRef" :model="modelRef">
-        :columns="columns"
+            <j-table
-        :data-source="dataSource"
+                rowKey="id"
-        bordered
+                :columns="columns"
-        :pagination="false"
+                :data-source="modelRef.dataSource"
-    >
+                bordered
-        <template #bodyCell="{ column, text, record }">
+                :pagination="false"
-            <div style="width: 280px">
+            >
-                <template v-if="['valueType', 'name'].includes(column.dataIndex)">
+                <template #bodyCell="{ column, record, index }">
-                    <span>{{ text }}</span>
+                    <template v-if="column.dataIndex === 'value'">
+                        <j-form-item
+                            :name="['dataSource', index, 'value']"
+                            :rules="[
+                                {
+                                    required: true,
+                                    message:
+                                        record.type === 'enum' ||
+                                        record.type === 'boolean'
+                                            ? '请选择'
+                                            : '请输入',
+                                },
+                            ]"
+                        >
+                            <ValueItem
+                                v-model:modelValue="record.value"
+                                :itemType="record.type"
+                                :options="
+                                    record.type === 'enum'
+                                        ? (
+                                              record?.dataType?.elements || []
+                                          ).map((item) => {
+                                              return {
+                                                  label: item.text,
+                                                  value: item.value,
+                                              };
+                                          })
+                                        : record.type === 'boolean'
+                                        ? [
+                                              { label: '是', value: true },
+                                              { label: '否', value: false },
+                                          ]
+                                        : undefined
+                                "
+                                @change="onChange"
+                            />
+                        </j-form-item>
+                    </template>
+                    <template v-else>
+                        <j-form-item
+                            :name="['dataSource', index, column.dataIndex]"
+                        >
+                            <j-input
+                                readonly
+                                :bordered="false"
+                                v-model:value="record[column.dataIndex]"
+                            />
+                        </j-form-item>
+                    </template>
                 </template>
-                <template v-else>
+            </j-table>
-                    <ValueItem
+        </j-form>
-                        v-model:modelValue="record.value"
+    </div>
-                        :itemType="record.type"
-                        :options="
-                            record.type === 'enum'
-                                ? (record?.dataType?.elements || []).map(
-                                        (item) => {
-                                            return {
-                                                label: item.text,
-                                                value: item.value,
-                                            };
-                                        },
-                                    )
-                                : record.type === 'boolean'
-                                ? [
-                                        { label: '是', value: true },
-                                        { label: '否', value: false },
-                                    ]
-                                : undefined
-                        "
-                    />
-                </template>
-            </div>
-        </template>
-    </j-table>
 </template>
 
 <script lang="ts" setup>
-import { PropType } from "vue";
+import { PropType } from 'vue';
-
 
 type Emits = {
     (e: 'update:modelValue', data: Record<string, any>[]): void;
@@ -52,9 +76,14 @@ const _props = defineProps({
     modelValue: {
         type: Array as PropType<Record<string, any>[]>,
         default: '',
-    }
+    },
 });
 const columns = [
+    // {
+    //     title: 'ID',
+    //     dataIndex: 'id',
+    //     with: '33%',
+    // },
     {
         title: '参数名称',
         dataIndex: 'name',
@@ -72,22 +101,35 @@ const columns = [
     },
 ];
 
-// const dataSource = ref<Record<any, any>[]>(_props.modelValue || []);
+const modelRef = reactive<{
+    dataSource: any[];
+}>({
+    dataSource: [],
+});
+const formRef = ref();
 
-const dataSource = computed({
+watchEffect(() => {
-    get: () => {
+    modelRef.dataSource = _props.modelValue || [];
-        return _props.modelValue || {
+});
-            messageType: undefined,
-            message: {
-                properties: undefined,
-                functionId: undefined,
-                inputs: []
-            }
-        }
-    },
-    set: (val: any) => {
-        _emit('update:modelValue', val);
-    }
-})
 
-</script>
+const onChange = () => {
+    _emit('update:modelValue', modelRef.dataSource);
+};
+
+const onSave = () =>
+    new Promise((resolve, reject) => {
+        formRef.value
+            .validate()
+            .then(() => {
+                resolve([...modelRef.dataSource]);
+            })
+            .catch(() => {
+                reject(false);
+            });
+    });
+
+defineExpose({ onSave });
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/Northbound/DuerOS/Detail/command/index.vue

@@ -1,76 +1,156 @@
 <template>
-    <j-form 
+    <j-form :layout="'vertical'" ref="formRef" :model="modelRef">
-        :layout="'vertical'"
-        ref="formRef"
-        :model="modelRef"
-    >
         <j-row :gutter="24">
             <j-col :span="24" v-if="actionType === 'command'">
-                <j-form-item name="messageType" label="指令类型" :rules="{
+                <j-form-item
-                    required: true,
+                    name="messageType"
-                    message: '请选择指令类型',
+                    label="指令类型"
-                }" class="other">
+                    :rules="{
-                    <j-select placeholder="请选择指令类型" v-model:value="modelRef.messageType" show-search>
+                        required: true,
-                        <j-select-option value="READ_PROPERTY">读取属性</j-select-option>
+                        message: '请选择指令类型',
-                        <j-select-option value="WRITE_PROPERTY">修改属性</j-select-option>
+                    }"
-                        <j-select-option value="INVOKE_FUNCTION">调用功能</j-select-option>
+                >
+                    <j-select
+                        placeholder="请选择指令类型"
+                        v-model:value="modelRef.messageType"
+                        show-search
+                    >
+                        <j-select-option value="READ_PROPERTY"
+                            >读取属性</j-select-option
+                        >
+                        <j-select-option value="WRITE_PROPERTY"
+                            >修改属性</j-select-option
+                        >
+                        <j-select-option value="INVOKE_FUNCTION"
+                            >调用功能</j-select-option
+                        >
                     </j-select>
                 </j-form-item>
             </j-col>
-            <j-col :span="(modelRef.messageType === 'READ_PROPERTY' || actionType === 'latestData') ? 24 : 12" v-if="(actionType === 'command' && ['READ_PROPERTY','WRITE_PROPERTY'].includes(modelRef.messageType)) || actionType === 'latestData'">
+            <j-col
-                <j-form-item :name="['message', 'properties']" label="属性" :rules="{
+                :span="
-                    required: true,
+                    modelRef.messageType === 'READ_PROPERTY' ||
-                    message: '请选择属性',
+                    actionType === 'latestData'
-                }">
+                        ? 24
-                    <j-select placeholder="请选择属性" v-model:value="modelRef.message.properties" show-search @change="onPropertyChange">
+                        : 12
-                        <j-select-option v-for="i in (metadata?.properties) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</j-select-option>
+                "
+                v-if="
+                    (actionType === 'command' &&
+                        ['READ_PROPERTY', 'WRITE_PROPERTY'].includes(
+                            modelRef.messageType,
+                        )) ||
+                    actionType === 'latestData'
+                "
+            >
+                <j-form-item
+                    :name="['message', 'properties']"
+                    label="属性"
+                    :rules="{
+                        required: true,
+                        message: '请选择属性',
+                    }"
+                >
+                    <j-select
+                        placeholder="请选择属性"
+                        v-model:value="modelRef.message.properties"
+                        show-search
+                        @change="onPropertyChange"
+                    >
+                        <j-select-option
+                            v-for="i in metadata?.properties || []"
+                            :key="i.id"
+                            :value="i.id"
+                            :label="i.name"
+                            >{{ i.name }}</j-select-option
+                        >
                     </j-select>
                 </j-form-item>
             </j-col>
-            <j-col :span="12" v-if="modelRef.messageType === 'WRITE_PROPERTY' && actionType === 'command'">
+            <j-col
-                <j-form-item :name="['message', 'value']" label="值" :rules="{
+                :span="12"
-                    required: true,
+                v-if="
-                    message: '请输入值',
+                    modelRef.messageType === 'WRITE_PROPERTY' &&
-                }">
+                    actionType === 'command'
+                "
+            >
+                <j-form-item
+                    :name="['message', 'value']"
+                    label="值"
+                    :rules="{
+                        required: true,
+                        message: '请输入值',
+                    }"
+                >
                     <ValueItem
                         v-model:modelValue="modelRef.message.value"
-                        :itemType="property.type || property.valueType?.type || 'int'"
+                        :itemType="
+                            property.type || property.valueType?.type || 'int'
+                        "
                         :options="
                             property.valueType?.type === 'enum'
                                 ? (property?.dataType?.elements || []).map(
-                                        (item) => {
+                                      (item) => {
-                                            return {
+                                          return {
-                                                label: item?.text,
+                                              label: item?.text,
-                                                value: item?.value,
+                                              value: item?.value,
-                                            };
+                                          };
-                                        },
+                                      },
-                                    )
+                                  )
                                 : property.valueType?.type === 'boolean'
                                 ? [
-                                        { label: '是', value: true },
+                                      { label: '是', value: true },
-                                        { label: '否', value: false },
+                                      { label: '否', value: false },
-                                    ]
+                                  ]
                                 : undefined
                         "
                     />
                 </j-form-item>
             </j-col>
             <j-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION'">
-                <j-form-item :name="['message', 'functionId']" label="功能" :rules="{
+                <j-form-item
-                    required: true,
+                    :name="['message', 'functionId']"
-                    message: '请选择功能',
+                    label="功能"
-                }">
+                    :rules="{
-                    <j-select placeholder="请选择功能" v-model:value="modelRef.message.functionId" show-search @change="funcChange">
+                        required: true,
-                        <j-select-option v-for="i in (metadata?.functions) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</j-select-option>
+                        message: '请选择功能',
+                    }"
+                >
+                    <j-select
+                        placeholder="请选择功能"
+                        v-model:value="modelRef.message.functionId"
+                        show-search
+                        @change="funcChange"
+                    >
+                        <j-select-option
+                            v-for="i in metadata?.functions || []"
+                            :key="i.id"
+                            :value="i.id"
+                            :label="i.name"
+                            >{{ i.name }}</j-select-option
+                        >
                     </j-select>
                 </j-form-item>
             </j-col>
-            <j-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION' && modelRef.message.functionId">
+            <j-col
-                <j-form-item :name="['message', 'inputs']" label="参数列表" :rules="{
+                :span="24"
-                    required: true,
+                v-if="
-                    message: '请输入参数列表',
+                    modelRef.messageType === 'INVOKE_FUNCTION' &&
-                }">
+                    modelRef.message.functionId
-                    <EditTable v-model="modelRef.message.inputs"/>
+                "
+                class="inputs"
+            >
+                <j-form-item
+                    :name="['message', 'inputs']"
+                    label="参数列表"
+                    :rules="{
+                        required: true,
+                        message: '请输入参数列表',
+                    }"
+                >
+                    <EditTable
+                        ref="editRef"
+                        v-model="modelRef.message.inputs"
+                    />
                 </j-form-item>
             </j-col>
         </j-row>
@@ -78,101 +158,106 @@
 </template>
 
 <script lang="ts" setup>
-import EditTable from './EditTable.vue'
+import EditTable from './EditTable.vue';
 
 const formRef = ref();
 
 const props = defineProps({
     actionType: {
         type: String,
-        default: ''
+        default: '',
     },
     modelValue: {
         type: Object,
-        default: () => {}
+        default: () => {},
     },
     metadata: {
         type: Object,
         default: () => {
             return {
                 properties: [],
-                functions: []
+                functions: [],
-            }
+            };
-        }
+        },
-    }
+    },
-})
+});
 
-type Emits = {
+const editRef = ref();
-    (e: 'update:modelValue', data: any): void;
-};
 
-const emit = defineEmits<Emits>();
+const modelRef = reactive({
+    messageType: 'READ_PROPERTY',
+    message: {
+        properties: undefined,
+        functionId: undefined,
+        inputs: [],
+    },
+});
 
-const modelRef = computed({
+watch(
-    get: () => {
+    () => props.modelValue,
-        onPropertyChange(props.modelValue?.message?.properties)
+    (newVal) => {
-        return props.modelValue || {
+        if (newVal) {
-            messageType: undefined,
+            Object.assign(modelRef, newVal);
-            message: {
+            if(newVal?.message?.properties){
-                properties: undefined,
+                onPropertyChange(newVal?.message?.properties);
-                functionId: undefined,
-                inputs: []
             }
         }
     },
-    set: (val: any) => {
+    {
-        emit('update:modelValue', val);
+        immediate: true,
-    }
+    },
-})
+);
 
-const property = ref<any>({})
+const property = ref<any>({});
 
 const funcChange = (val: string) => {
-    if(val){
+    if (val) {
-        const arr = props.metadata?.functions.find((item: any) => item.id === val)?.inputs || []
+        const arr =
+            props.metadata?.functions.find((item: any) => item.id === val)
+                ?.inputs || [];
         const list = arr.map((item: any) => {
             return {
                 id: item.id,
                 name: item.name,
                 value: undefined,
                 valueType: item?.valueType?.type,
-            }
+            };
-        })
+        });
-        modelRef.value.message.inputs = list
+        modelRef.message.inputs = list;
     }
-}
+};
 
 const onPropertyChange = (val: string) => {
-    if(val){
+    if (val) {
-        const _item = props.metadata?.properties.find((item: any) => item.id === val)
+        const _item = props.metadata?.properties.find(
-        property.value = _item?.[0] || {}
+            (item: any) => item.id === val,
+        );
+        property.value = _item?.[0] || {};
     }
-}
+};
 
-const saveBtn = () => new Promise((resolve) => {
+const saveBtn = () =>
-    formRef.value.validate()
+    new Promise((resolve) => {
-    .then(() => {
+        formRef.value
-        const _arr = toRaw(modelRef).value?.message?.inputs || []
+            .validate()
-        if(_arr.length && !_arr.every((_a: any) => _a.value)){
+            .then(async (_data: any) => {
-            resolve(false)
+                await editRef.value.onSave().catch(() => {
-        } else {
+                    resolve(false)
-            resolve(toRaw(modelRef))
+                })
-        }
+                resolve(_data)
-    })
+            })
-    .catch((err: any) => {
+            .catch((err: any) => {
-        resolve(err)
+                resolve(err);
+            });
     });
-})
-
-defineExpose({ saveBtn })
 
+defineExpose({ saveBtn });
 </script>
 
 <style lang="less" scoped>
-:deep(.ant-form-item){
+.inputs {
-    margin-bottom: 0;
+    .ant-form-item:last-child {
-}
+        margin-bottom: 0;
-.other {
+    }
-    margin-bottom: 24px;
 }
 </style>

src/views/Northbound/DuerOS/Detail/index.vue

@@ -171,7 +171,8 @@
                                                     >
                                                         <j-select-option
                                                             v-for="i in getTypesActions(
-                                                                item.action || ''
+                                                                item.action ||
+                                                                    '',
                                                             )"
                                                             :key="i.id"
                                                             :value="i.id"
@@ -321,7 +322,8 @@
                                                     >
                                                         <j-select-option
                                                             v-for="i in getDuerOSProperties(
-                                                                item.source || '',
+                                                                item.source ||
+                                                                    '',
                                                             )"
                                                             :key="i.id"
                                                             :value="i.id"
@@ -410,7 +412,10 @@
                             type="primary"
                             :loading="loading"
                             @click="saveBtn"
-                            :hasPermission="['Northbound/DuerOS:add', 'Northbound/DuerOS:update']"
+                            :hasPermission="[
+                                'Northbound/DuerOS:add',
+                                'Northbound/DuerOS:update',
+                            ]"
                         >
                             保存
                         </PermissionButton>
@@ -626,12 +631,11 @@ const saveBtn = async () => {
                 loading.value = true;
                 const resp = await savePatch(data).finally(() => {
                     loading.value = false;
-                })
+                });
                 if (resp.status === 200) {
                     message.success('操作成功！');
                     formRef.value.resetFields();
                     menuStory.jumpPage('Northbound/DuerOS');
-
                 }
             }
         })

src/views/Northbound/DuerOS/index.vue

@@ -27,11 +27,12 @@
             <template #card="slotProps">
                 <CardBox
                     :value="slotProps"
+                    @click="handleView(slotProps.id)"
                     :actions="getActions(slotProps, 'card')"
                     :status="slotProps.state?.value"
                     :statusText="slotProps.state?.text"
                     :statusNames="{
-                        enabled: 'success',
+                        enabled: 'processing',
                         disabled: 'error',
                     }"
                 >
@@ -39,13 +40,12 @@
                         <img :src="getImage('/cloud/dueros.png')" />
                     </template>
                     <template #content>
-                        <h3
+                        <Ellipsis style="width: calc(100% - 100px)">
-                            class="card-item-content-title"
+                            <span style="font-size: 16px; font-weight: 600">
-                            @click.stop="handleView(slotProps.id)"
+                                {{ slotProps.name }}
-                        >
+                            </span>
-                            {{ slotProps.name }}
+                        </Ellipsis>
-                        </h3>
+                        <j-row style="margin-top: 15px">
-                        <j-row>
                             <j-col :span="12">
                                 <div class="card-item-content-text">产品</div>
                                 <Ellipsis>
@@ -85,9 +85,13 @@
                 </CardBox>
             </template>
             <template #state="slotProps">
-                <j-badge
+                <BadgeStatus
+                    :status="slotProps.state?.value"
                     :text="slotProps.state?.text"
-                    :status="statusMap.get(slotProps.state?.value)"
+                    :statusNames="{
+                        enabled: 'processing',
+                        disabled: 'error',
+                    }"
                 />
             </template>
             <template #applianceType="slotProps">
@@ -105,7 +109,7 @@
                             :tooltip="{
                                 ...i.tooltip,
                             }"
-                            style="padding: 0px"
+                            style="padding: 0 5px"
                             @click="i.onClick"
                             type="link"
                             :hasPermission="'Northbound/DuerOS:' + i.key"
@@ -132,15 +136,12 @@ import type { ActionsType } from '@/views/device/Instance/typings';
 import { getImage } from '@/utils/comm';
 import { message } from 'jetlinks-ui-components';
 import { useMenuStore } from 'store/menu';
+import BadgeStatus from '@/components/BadgeStatus/index.vue';
 
 const instanceRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 const menuStory = useMenuStore();
 
-const statusMap = new Map();
-statusMap.set('enabled', 'success');
-statusMap.set('disabled', 'error');
-
 const columns = [
     {
         title: '名称',
@@ -193,6 +194,7 @@ const columns = [
         title: '说明',
         dataIndex: 'description',
         key: 'description',
+        ellipsis: true,
     },
     {
         title: '状态',
@@ -211,7 +213,7 @@ const columns = [
         title: '操作',
         key: 'action',
         fixed: 'right',
-        width: 250,
+        width: 200,
         scopedSlots: true,
     },
 ];

src/views/device/Instance/Detail/index.vue

@@ -8,20 +8,25 @@
         <template #title>
             <div>
                 <div style="display: flex; align-items: center">
-                    <AIcon type="ArrowLeftOutlined" @click="onBack" />
+                    <j-button @click="onBack" size="small">返回</j-button>
-                    <div style="margin-left: 20px">
+                    <div style="margin-left: 20px; font-size: 24px">
                         {{ instanceStore.current.name }}
                     </div>
                     <j-divider type="vertical" />
                     <j-space>
-                        <j-badge
+                        <span
-                            :text="instanceStore.current.state?.text"
+                            style="font-size: 14px; color: rgba(0, 0, 0, 0.85)"
-                            :status="
+                        >
-                                statusMap.get(
+                            状态：
-                                    instanceStore.current.state?.value,
+                            <j-badge
-                                )
+                                :status="
-                            "
+                                    statusMap.get(
-                        />
+                                        instanceStore.current.state?.value,
+                                    )
+                                "
+                            />
+                            {{ instanceStore.current.state?.text }}
+                        </span>
                         <PermissionButton
                             v-if="
                                 instanceStore.current.state?.value ===
@@ -73,7 +78,7 @@
                         </j-tooltip>
                     </j-space>
                 </div>
-                <div style="padding-top: 10px">
+                <div style="padding-top: 24px">
                     <j-descriptions size="small" :column="4">
                         <j-descriptions-item label="ID">{{
                             instanceStore.current.id
@@ -199,8 +204,8 @@ watch(
 );
 
 onMounted(() => {
-    instanceStore.tabActiveKey = history.state?.params?.tab || 'Info'
+    instanceStore.tabActiveKey = history.state?.params?.tab || 'Info';
-})
+});
 
 const onBack = () => {
     menuStory.jumpPage('device/Instance');
@@ -284,7 +289,10 @@ watchEffect(() => {
             tab: 'OPC UA',
         });
     }
-    if (instanceStore.current.deviceType?.value === 'gateway' && !keys.includes('ChildDevice')) {
+    if (
+        instanceStore.current.deviceType?.value === 'gateway' &&
+        !keys.includes('ChildDevice')
+    ) {
         // 产品类型为网关的情况下才显示此模块
         list.value.push({
             key: 'ChildDevice',

src/views/device/Instance/index.vue

@@ -143,7 +143,7 @@
                     :status="slotProps.state?.value"
                     :statusText="slotProps.state?.text"
                     :statusNames="{
-                        online: 'success',
+                        online: 'processing',
                         offline: 'error',
                         notActive: 'warning',
                     }"
@@ -202,9 +202,14 @@
                 </CardBox>
             </template>
             <template #state="slotProps">
-                <j-badge
+                <BadgeStatus
+                    :status="slotProps.state?.value"
                     :text="slotProps.state?.text"
-                    :status="statusMap.get(slotProps.state?.value)"
+                    :statusNames="{
+                        online: 'processing',
+                        offline: 'error',
+                        notActive: 'warning',
+                    }"
                 />
             </template>
             <template #createTime="slotProps">
@@ -226,7 +231,7 @@
                             }"
                             @click="i.onClick"
                             type="link"
-                            style="padding: 0px"
+                            style="padding: 0 5px"
                             :hasPermission="'device/Instance:' + i.key"
                         >
                             <template #icon><AIcon :type="i.icon" /></template>
@@ -289,6 +294,7 @@ import { queryTree } from '@/api/device/category';
 import { useMenuStore } from '@/store/menu';
 import type { ActionsType } from './typings';
 import dayjs from 'dayjs';
+import BadgeStatus from '@/components/BadgeStatus/index.vue';
 
 const instanceRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
@@ -303,11 +309,6 @@ const type = ref<string>('');
 
 const menuStory = useMenuStore();
 
-const statusMap = new Map();
-statusMap.set('online', 'success');
-statusMap.set('offline', 'error');
-statusMap.set('notActive', 'warning');
-
 const columns = [
     {
         title: 'ID',
@@ -479,6 +480,7 @@ const columns = [
         title: '说明',
         dataIndex: 'describe',
         key: 'describe',
+        ellipsis: true,
         search: {
             type: 'string',
         },
@@ -487,7 +489,7 @@ const columns = [
         title: '操作',
         key: 'action',
         fixed: 'right',
-        width: 250,
+        width: 200,
         scopedSlots: true,
     },
 ];
@@ -525,10 +527,10 @@ const paramsFormat = (
 };
 
 onMounted(() => {
-    if(history.state?.params?.type === 'add'){
+    if (history.state?.params?.type === 'add') {
-        handleAdd()
+        handleAdd();
     }
-})
+});
 
 const handleParams = (config: Record<string, any>) => {
     const _terms: Record<string, any> = {};