[Feat 0000] 添加方块标题组件用于强调信息

src/components/Basic/index.ts

@@ -1,8 +1,10 @@
 import { withInstall } from '/@/utils';
 import basicArrow from './src/BasicArrow.vue';
 import basicTitle from './src/BasicTitle.vue';
+import blockTitle from './src/BlockTitle.vue';
 import basicHelp from './src/BasicHelp.vue';
 
 export const BasicArrow = withInstall(basicArrow);
 export const BasicTitle = withInstall(basicTitle);
+export const BlockTitle = withInstall(blockTitle);
 export const BasicHelp = withInstall(basicHelp);

src/components/Basic/src/BlockTitle.vue

@@ -0,0 +1,91 @@
+<template>
+  <span :class="getClass">
+    <slot></slot>
+    <BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage">
+      <InfoCircleOutlined :class="`${prefixCls}-help-icon`" />
+    </BasicHelp>
+  </span>
+</template>
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { useSlots, computed } from 'vue';
+  import BasicHelp from './BasicHelp.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { InfoCircleOutlined } from '@ant-design/icons-vue';
+
+  const props = defineProps({
+    /**
+     * Help text list or string
+     * @default: ''
+     */
+    helpMessage: {
+      type: [String, Array] as PropType<string | string[]>,
+      default: '',
+    },
+    /**
+     * Whether the color block on the left side of the title
+     * @default: false
+     */
+    span: { type: Boolean },
+    /**
+     * Whether to default the text, that is, not bold
+     * @default: false
+     */
+    normal: { type: Boolean },
+  });
+
+  const { prefixCls } = useDesign('basic-title');
+  const slots = useSlots();
+  const getClass = computed(() => [
+    prefixCls,
+    { [`${prefixCls}-show-span`]: props.span && slots.default },
+    { [`${prefixCls}-normal`]: props.normal },
+  ]);
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-basic-title';
+
+  .@{prefix-cls} {
+    position: relative;
+    display: flex;
+    font-weight: 400;
+    // line-height: 32px;
+    color: @white;
+    background: @gradient-primary-color no-repeat;
+    // cursor: move;
+    user-select: none;
+    font-size: 14px;
+    height: 32px;
+    padding: 4px 15px;
+    // border: 1px solid transparent;
+    border-radius: 4px;
+
+    &.is-drawer {
+      cursor: default;
+    }
+
+    &-normal {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    &-show-span::before {
+      position: absolute;
+      top: 4px;
+      left: 0;
+      width: 3px;
+      height: 16px;
+      margin-right: 4px;
+      background-color: @primary-color;
+      content: '';
+    }
+
+    &-help {
+      margin-left: 10px;
+
+      &-icon {
+        color: @white;
+      }
+    }
+  }
+</style>