分割线组件

src/components/DividerTitle/index.vue

+<script lang="ts" setup name="FormTitle">
+import { ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+  titleName?: string,
+  id?: string,
+  line?: boolean,
+  leftBox?:boolean, // 增加参数左侧 自定义div 默认 false
+  isStar?:boolean, // 是否显示星号
+}>(), {
+  line: true,
+  leftBox: false,
+  isStar: false // 是否显示星号
+})
+</script>
+
+<template>
+  <div class="titleBox" >
+    <div class="leftBox">
+      <div v-if="props.line" class="borderLeft"/>
+      <div :id="props.id" class="titleName mini-title"><span class="red-star" v-if="props.isStar">*</span>{{ props.titleName }}</div>
+      <div v-if="props.leftBox" class="leftBox-div"> <slot name="leftBox"/></div>
+    </div>
+    <div class="rightBox">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.el-row {
+  > .titleBox {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.titleBox{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18px;
+  padding-bottom: 8px;
+  width: 100%;
+  height: 32px;
+  border-bottom: 1px solid rgba(241, 243, 245, 1);
+  .leftBox{
+    display: flex;
+    align-items: center;
+    height: 100%;
+    .borderLeft{
+      margin-right: 10px;
+      border-radius: 20px;
+      width: 3px;
+      height: 14px;
+      background: rgba(53, 108, 236, 1);
+    }
+    .titleName{
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 19.6px;
+      color: rgba(46, 46, 46, 1);
+    }
+  }
+  .rightBox{
+
+  }
+}
+.leftBox-div{
+  margin-left: 10px;
+}
+.red-star {
+    color: #f56c6c;
+    margin-right: 4px;
+}
+</style>
\ No newline at end of file

src/main.js

@@ -48,6 +48,8 @@ import DictTag from '@/components/DictTag'
 import PageTitle from './components/PageTitle/index.vue'
 // Modal组件
 import Modal from './components/Modal/index.vue';
+// 分割线标题
+import DividerTitle from './components/DividerTitle/index.vue'
 
 const app = createApp(App)
 
@@ -72,6 +74,7 @@ app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
 app.component('PageTitle', PageTitle)
 app.component('Modal', Modal)
+app.component('DividerTitle', DividerTitle)
 
 app.use(router)
 app.use(store)