diff --git a/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts b/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
index 69775d1..a24c363 100644
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
@@ -3,6 +3,26 @@ import { CreateComponentType } from '@/packages/index.d'
 import { DeviceStatusConfig } from './index'
 import dataJson from './data.json'
 
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗',
+}
+
+export enum FontStyleEnum {
+  NORMAL = '常规',
+  ITALIC = '斜体',
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold',
+}
+
+export const FontStyleObject = {
+  [FontStyleEnum.NORMAL]: 'normal',
+  [FontStyleEnum.ITALIC]: 'italic',
+}
+
 export const option = {
   dataset: dataJson.source,
   header: ['所属企业', '设备类型', '设备名称'],
@@ -22,11 +42,15 @@ export const option = {
   onlineRate: 75,
   onlineDevice: 23,
   totalDevice: 100,
-  headerBgColor1: '#0059c9',
-  headerBgColor2: '#003a8c',
-  legendColors: ['#00E5FF', '#00FF7F', '#FFFFFF'],
   progressColor: '#00E5FF',
-  progressBgColor: '#1A385A'
+  progressBgColor: '#1A385A',
+  // new properties from AlarmList
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  paddingX: 40,
+  paddingY: -19,
+  letterSpacing: 2,
+  isShowButton: false
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
diff --git a/src/packages/components/Charts/MyComponents/DeviceStatus/config.vue b/src/packages/components/Charts/MyComponents/DeviceStatus/config.vue
index b55c8c9..9ece4c5 100644
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/config.vue
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/config.vue
@@ -1,40 +1,102 @@
 <template>
-  <div class="go-device-status-config">
-    <n-form-item label="标题">
-      <n-input v-model:value="option.title" />
-    </n-form-item>
-    <n-form-item label="标题大小">
-      <n-input-number v-model:value="option.titleSize" />
-    </n-form-item>
-    <n-form-item label="字体大小">
-      <n-input-number v-model:value="option.fontSize" />
-    </n-form-item>
-    <n-form-item label="表头高度">
-      <n-input-number v-model:value="option.headerHeight" />
-    </n-form-item>
-    <n-form-item label="行高度">
-      <n-input-number v-model:value="option.itemHeight" />
-    </n-form-item>
-    <n-form-item label="在线率">
-      <n-input-number v-model:value="option.onlineRate" />
-    </n-form-item>
-    <n-form-item label="在线设备">
-      <n-input-number v-model:value="option.onlineDevice" />
-    </n-form-item>
-    <n-form-item label="总设备">
-      <n-input-number v-model:value="option.totalDevice" />
-    </n-form-item>
-  </div>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="标题" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.title" type="textarea" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="标题">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.titleColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.titleSize" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="字体粗细">
+        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
+      </setting-item>
+      <setting-item name="字体风格">
+        <n-select v-model:value="optionData.fontStyle" size="small" :options="fontStyleOptions" />
+      </setting-item>
+      <setting-item name="X轴内边距">
+        <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+      <setting-item name="Y轴内边距">
+        <n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+      <setting-item name="字间距">
+        <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="内容" :expanded="true">
+    <setting-item-box name="字体大小">
+      <setting-item>
+        <n-input-number v-model:value="optionData.fontSize" size="small" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="表头高度">
+      <setting-item>
+        <n-input-number v-model:value="optionData.headerHeight" size="small" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="行高度">
+      <setting-item>
+        <n-input-number v-model:value="optionData.itemHeight" size="small" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="在线率">
+      <setting-item>
+        <n-input-number v-model:value="optionData.onlineRate" size="small" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="在线设备">
+      <setting-item>
+        <n-input-number v-model:value="optionData.onlineDevice" size="small" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="总设备">
+      <setting-item>
+        <n-input-number v-model:value="optionData.totalDevice" size="small" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { option } from './config'
+import { option, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
-defineProps({
-  option: {
+const props = defineProps({
+  optionData: {
     type: Object as PropType<typeof option>,
     required: true
   }
 })
-</script>
\ No newline at end of file
+
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL]
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD]
+  }
+]
+const fontStyleOptions = [
+  {
+    label: FontStyleEnum.NORMAL,
+    value: FontStyleObject[FontStyleEnum.NORMAL]
+  },
+  {
+    label: FontStyleEnum.ITALIC,
+    value: FontStyleObject[FontStyleEnum.ITALIC]
+  }
+]
+</script>
diff --git a/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue b/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
index af0c9bd..645cb69 100644
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
@@ -1,69 +1,74 @@
 <template>
-  <div class="go-device-status">
-    <div class="header">
-      <div class="header-left">
-        <div class="title-icon-bg" :style="{ backgroundColor: option.headerBgColor1 }">
-          <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
+  <SmallBorder>
+    <div class="go-device-status">
+      <div class="header">
+        <div class="title">
+          <div class="title-text">
+            <span :style="{
+              color: option.titleColor,
+              fontSize: option.titleSize + 'px',
+              fontWeight: option.fontWeight,
+              fontStyle: option.fontStyle,
+              marginLeft: option.paddingX + 'px',
+              marginTop: option.paddingY + 'px',
+              letterSpacing: option.letterSpacing + 'px'
+            }">{{ option.title }}</span>
+          </div>
         </div>
-        <div class="title-text-bg" :style="{ backgroundColor: option.headerBgColor2 }">
-          <span class="title-text" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
+        <div v-if="option.isShowButton" class="header-right-squares">
         </div>
       </div>
-      <div class="header-right">
-        <div class="legend">
-          <div v-for="color in option.legendColors" :key="color" class="legend-item" :style="{ backgroundColor: color }"></div>
+      <div class="status-section">
+        <div class="online-rate">
+          <div class="rate-circle-bg">
+            <div
+              class="rate-circle"
+              :style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }"
+            >
+              <div class="rate-text-wrapper">
+                <span class="rate-text" :style="{ color: option.progressColor }">{{ option.onlineRate }}</span>
+                <span class="rate-percent" :style="{ color: option.progressColor }">%</span>
+              </div>
+            </div>
+          </div>
+          <span class="rate-label">设备在线率</span>
+        </div>
+        <div class="progress-bar-wrapper">
+          <div class="progress-bar" :style="{ backgroundColor: option.progressBgColor }">
+            <div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }"></div>
+          </div>
+        </div>
+        <div class="device-count">
+          <span class="online">{{ option.onlineDevice }}</span>
+          <span class="total">/ {{ option.totalDevice }}</span>
         </div>
       </div>
-    </div>
-    <div class="status-section">
-      <div class="online-rate">
-        <div class="rate-circle-bg">
-          <div
-            class="rate-circle"
-            :style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }"
-          >
-            <div class="rate-text-wrapper">
-              <span class="rate-text" :style="{ color: option.progressColor }">{{ option.onlineRate }}</span>
-              <span class="rate-percent" :style="{ color: option.progressColor }">%</span>
+      <div class="table-header" :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }">
+        <div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
+          {{ header }}
+        </div>
+        <div class="header-item"></div>
+      </div>
+      <div class="table-body">
+        <div v-for="(item, index) in option.dataset" :key="index" class="table-row" :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.enterprise }}</div>
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceType }}</div>
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceName }}</div>
+          <div class="row-item time-wrapper">
+            <div class="time" :style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }">
+              {{ item.time }}
             </div>
           </div>
         </div>
-        <span class="rate-label">设备在线率</span>
-      </div>
-      <div class="progress-bar-wrapper">
-        <div class="progress-bar" :style="{ backgroundColor: option.progressBgColor }">
-          <div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }"></div>
-        </div>
-      </div>
-      <div class="device-count">
-        <span class="online">{{ option.onlineDevice }}</span>
-        <span class="total">/ {{ option.totalDevice }}</span>
       </div>
     </div>
-    <div class="table-header" :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }">
-      <div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
-        {{ header }}
-      </div>
-      <div class="header-item"></div>
-    </div>
-    <div class="table-body">
-      <div v-for="(item, index) in option.dataset" :key="index" class="table-row" :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
-        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.enterprise }}</div>
-        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceType }}</div>
-        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceName }}</div>
-        <div class="row-item time-wrapper">
-          <div class="time" :style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }">
-            {{ item.time }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  </SmallBorder>
 </template>
 
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { option as configOption } from './config'
+import SmallBorder from '../SmallBorder/index.vue'
 
 const props = defineProps({
   chartConfig: {
@@ -77,60 +82,45 @@ const option = computed(() => props.chartConfig.option)
 
 <style lang="scss" scoped>
 .go-device-status {
+  position: absolute;
+  top: 0;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #041126;
   color: #ffffff;
-  padding: 15px;
+  padding: 12px;
+  margin-top: 5px;
   box-sizing: border-box;
 
   .header {
     display: flex;
-    align-items: center;
     justify-content: space-between;
-    margin-bottom: 10px;
+    align-items: center;
+    margin-bottom: 3px;
 
-    .header-left {
+    .title {
       display: flex;
       align-items: center;
-      .title-icon-bg {
-        width: 50px;
-        height: 40px;
+      margin-top: -5px;
+
+      .title-text {
+        height: 35px;
         display: flex;
         align-items: center;
-        justify-content: center;
-        clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
-        .title-icon {
-          font-size: 28px;
-        }
-      }
-      .title-text-bg {
-        height: 40px;
-        padding: 0 20px 0 30px;
-        margin-left: -10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
-        .title-text {
-          text-shadow: 0 0 10px rgba(180, 228, 255, 0.8);
-        }
+        padding: 0 20px 0 20px;
+        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
       }
     }
 
-    .header-right {
+    .header-right-squares {
       display: flex;
       align-items: center;
-      .legend {
-        display: flex;
-        margin-right: 10px;
-        .legend-item {
-          width: 15px;
-          height: 8px;
-          margin-left: 5px;
-        }
+
+      .square {
+        width: 10px;
+        height: 10px;
+        margin-left: 5px;
       }
     }
   }