feat: 新增全局样式修改

src/components/ConfigItemCom/CollapseItem.vue

@@ -0,0 +1,22 @@
+<template>
+  <n-divider />
+  <n-collapse arrow-placement="right" default-expanded-names="1">
+    <!-- 右侧 -->
+    <template #header-extra>
+      <slot name="header" />
+    </template>
+
+    <n-collapse-item :title="name" name="1">
+      <slot />
+    </n-collapse-item>
+  </n-collapse>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+})
+</script>

src/components/ConfigItemCom/ConfigItem.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    v-if="type === 'number'"
+    :style="{ width: width ? width + 'px' : '100%' }"
+  >
+    <slot />
+  </div>
+  <div v-else :style="{ width: `${width}px` }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  width: {
+    type: Number,
+    required: false
+  },
+  type: {
+    type: String,
+    required: false
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>

src/components/ConfigItemCom/ConfigItemBox.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="go-config-item-box go-flex-items-center">
+    <n-text class="item-left">{{ name }}</n-text>
+    <n-space class="item-right" justify="space-between">
+      <slot />
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$leftWidth: 100px;
+@include go('config-item-box') {
+  position: relative;
+  justify-content: flex-start;
+  .item-left {
+    width: $leftWidth;
+    text-align: left;
+    margin-left: 10px;
+  }
+  .item-right {
+    margin-left: 10px;
+  }
+}
+</style>

src/components/ConfigItemCom/index.ts

@@ -0,0 +1,6 @@
+// 设置项布局
+import ConfigItem from './ConfigItem.vue'
+import ConfigItemBox from './ConfigItemBox.vue'
+import CollapseItem from './CollapseItem.vue'
+
+export { CollapseItem, ConfigItemBox, ConfigItem }