前端和后端源码，合并到一个git仓库中，方便用户下载，避免前后端不匹配的问题

jeecgboot-vue3/src/components/Basic/index.ts

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

jeecgboot-vue3/src/components/Basic/src/BasicArrow.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Author: Vben
+ * @Description: Arrow component with animation
+-->
+<template>
+  <span :class="getClass">
+    <Icon icon="ion:chevron-forward" :style="$attrs.iconStyle" />
+  </span>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { Icon } from '/@/components/Icon';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  const props = defineProps({
+    /**
+     * Arrow expand state
+     */
+    expand: { type: Boolean },
+    /**
+     * Arrow up by default
+     */
+    up: { type: Boolean },
+    /**
+     * Arrow down by default
+     */
+    down: { type: Boolean },
+    /**
+     * Cancel padding/margin for inline
+     */
+    inset: { type: Boolean },
+  });
+
+  const { prefixCls } = useDesign('basic-arrow');
+
+  // get component class
+  const getClass = computed(() => {
+    const { expand, up, down, inset } = props;
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--active`]: expand,
+        up,
+        inset,
+        down,
+      },
+    ];
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-basic-arrow';
+
+  .@{prefix-cls} {
+    display: inline-block;
+    cursor: pointer;
+    transform: rotate(0deg);
+    transition: all 0.3s ease 0.1s;
+    transform-origin: center center;
+
+    &--active {
+      transform: rotate(90deg);
+    }
+
+    &.inset {
+      line-height: 0px;
+    }
+
+    &.up {
+      transform: rotate(-90deg);
+    }
+
+    &.down {
+      transform: rotate(90deg);
+    }
+
+    &.up.@{prefix-cls}--active {
+      transform: rotate(90deg);
+    }
+
+    &.down.@{prefix-cls}--active {
+      transform: rotate(-90deg);
+    }
+  }
+</style>

jeecgboot-vue3/src/components/Basic/src/BasicHelp.vue

@@ -0,0 +1,112 @@
+<script lang="tsx">
+  import type { CSSProperties, PropType } from 'vue';
+  import { defineComponent, computed, unref } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { InfoCircleOutlined } from '@ant-design/icons-vue';
+  import { getPopupContainer } from '/@/utils';
+  import { isString, isArray } from '/@/utils/is';
+  import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  const props = {
+    /**
+     * Help text max-width
+     * @default: 600px
+     */
+    maxWidth: { type: String, default: '600px' },
+    /**
+     * Whether to display the serial number
+     * @default: false
+     */
+    showIndex: { type: Boolean },
+    /**
+     * Help text font color
+     * @default: #ffffff
+     */
+    color: { type: String, default: '#ffffff' },
+    /**
+     * Help text font size
+     * @default: 14px
+     */
+    fontSize: { type: String, default: '14px' },
+    /**
+     * Help text list
+     */
+    placement: { type: String, default: 'right' },
+    /**
+     * Help text list
+     */
+    text: { type: [Array, String] as PropType<string[] | string> },
+  };
+
+  export default defineComponent({
+    name: 'BasicHelp',
+    components: { Tooltip },
+    props,
+    setup(props, { slots }) {
+      const { prefixCls } = useDesign('basic-help');
+
+      const getTooltipStyle = computed((): CSSProperties => ({ color: props.color, fontSize: props.fontSize }));
+
+      const getOverlayStyle = computed((): CSSProperties => ({ maxWidth: props.maxWidth }));
+
+      function renderTitle() {
+        const textList = props.text;
+
+        if (isString(textList)) {
+          return <p>{textList}</p>;
+        }
+
+        if (isArray(textList)) {
+          return textList.map((text, index) => {
+            return (
+              <p key={text}>
+                <>
+                  {props.showIndex ? `${index + 1}. ` : ''}
+                  {text}
+                </>
+              </p>
+            );
+          });
+        }
+        return null;
+      }
+
+      return () => {
+        return (
+          <Tooltip
+            overlayClassName={`${prefixCls}__wrap`}
+            title={<div style={unref(getTooltipStyle)}>{renderTitle()}</div>}
+            autoAdjustOverflow={true}
+            overlayStyle={unref(getOverlayStyle)}
+            placement={props.placement as 'right'}
+            getPopupContainer={() => getPopupContainer()}
+          >
+            <span class={prefixCls}>{getSlot(slots) || <InfoCircleOutlined />}</span>
+          </Tooltip>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-help';
+
+  .@{prefix-cls} {
+    display: inline-block;
+    margin-left: 6px;
+    font-size: 14px;
+    color: @text-color-help-dark;
+    cursor: pointer;
+
+    &:hover {
+      color: @primary-color;
+    }
+
+    &__wrap {
+      p {
+        margin-bottom: 0;
+      }
+    }
+  }
+</style>

jeecgboot-vue3/src/components/Basic/src/BasicTitle.vue

@@ -0,0 +1,80 @@
+<template>
+  <span :class="getClass">
+    <slot></slot>
+    <BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
+  </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';
+
+  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;
+    padding-left: 7px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: @text-color-base;
+    cursor: move;
+    user-select: none;
+
+    &.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;
+    }
+  }
+</style>