initial commit

src/components/Basic/index.ts

@@ -0,0 +1,4 @@
+export { default as BasicArrow } from './src/BasicArrow.vue';
+export { default as BasicHelp } from './src/BasicHelp';
+export { default as BasicTitle } from './src/BasicTitle.vue';
+export { default as BasicEmpty } from './src/BasicEmpty.vue';

src/components/Basic/src/BasicArrow.vue

@@ -0,0 +1,53 @@
+<template>
+  <span :class="getClass">
+    <RightOutlined />
+  </span>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+
+  import { defineComponent, computed } from 'vue';
+
+  import { RightOutlined } from '@ant-design/icons-vue';
+
+  export default defineComponent({
+    name: 'BaseArrow',
+    components: { RightOutlined },
+    props: {
+      // Expand contract, expand by default
+      expand: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+      },
+    },
+    setup(props) {
+      const getClass = computed(() => {
+        const preCls = 'base-arrow';
+        const cls = [preCls];
+
+        props.expand && cls.push(`${preCls}__active`);
+        return cls;
+      });
+
+      return {
+        getClass,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .base-arrow {
+    transform: rotate(-90deg) !important;
+    transition: all 0.3s ease 0.1s;
+    transform-origin: center center;
+
+    &.right {
+      transform: rotate(0deg);
+    }
+
+    &__active {
+      transform: rotate(90deg) !important;
+      transition: all 0.3s ease 0.1s !important;
+    }
+  }
+</style>

src/components/Basic/src/BasicEmpty.vue

@@ -0,0 +1,28 @@
+<template>
+  <Empty :image="image" :description="description" />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Empty } from 'ant-design-vue';
+
+  import emptySrc from '/@/assets/images/page_null.png';
+
+  export default defineComponent({
+    extends: Empty as any,
+    components: { Empty },
+    props: {
+      description: {
+        type: String,
+        default: '暂无内容',
+      },
+      image: {
+        type: String,
+        default: emptySrc,
+        required: false,
+      },
+    },
+    setup() {
+      return {};
+    },
+  });
+</script>

src/components/Basic/src/BasicHelp.less

@@ -0,0 +1,18 @@
+@import (reference) '../../../design/index.less';
+
+.base-help {
+  display: inline-block;
+  font-size: 14px;
+  color: @text-color-help-dark;
+  cursor: pointer;
+
+  &:hover {
+    color: @primary-color;
+  }
+
+  &__wrap {
+    p {
+      margin-bottom: 0;
+    }
+  }
+}

src/components/Basic/src/BasicHelp.tsx

@@ -0,0 +1,107 @@
+import type { PropType } from 'vue';
+
+import { Tooltip } from 'ant-design-vue';
+import { InfoCircleOutlined } from '@ant-design/icons-vue';
+import { defineComponent, computed, unref } from 'vue';
+
+import { getPopupContainer } from '/@/utils';
+
+import { isString, isArray } from '/@/utils/is';
+import { getSlot } from '/@/utils/helper/tsxHelper';
+import './BasicHelp.less';
+export default defineComponent({
+  name: 'BaseHelp',
+  props: {
+    // max-width
+    maxWidth: {
+      type: String as PropType<string>,
+      default: '600px',
+    },
+    // Whether to display the serial number
+    showIndex: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+    // Text list
+    text: {
+      type: [Array, String] as PropType<string[] | string>,
+    },
+    // color
+    color: {
+      type: String as PropType<string>,
+      default: '#ffffff',
+    },
+    fontSize: {
+      type: String as PropType<string>,
+      default: '14px',
+    },
+    absolute: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+    // 定位
+    position: {
+      type: [Object] as PropType<any>,
+      default: () => ({
+        position: 'absolute',
+        left: 0,
+        bottom: 0,
+      }),
+    },
+  },
+  setup(props, { slots }) {
+    const getOverlayStyleRef = computed(() => {
+      return {
+        maxWidth: props.maxWidth,
+      };
+    });
+    const getWrapStyleRef = computed(() => {
+      return {
+        color: props.color,
+        fontSize: props.fontSize,
+      };
+    });
+    const getMainStyleRef = computed(() => {
+      return props.absolute ? props.position : {};
+    });
+
+    /**
+     * @description: 渲染内容
+     */
+    const renderTitle = () => {
+      const list = props.text;
+      if (isString(list)) {
+        return <p>{list}</p>;
+      }
+      if (isArray(list)) {
+        return list.map((item, index) => {
+          return (
+            <p key={item}>
+              {props.showIndex ? `${index + 1}. ` : ''}
+              {item}
+            </p>
+          );
+        });
+      }
+      return null;
+    };
+    return () => (
+      <Tooltip
+        title={(<div style={unref(getWrapStyleRef)}>{renderTitle()}</div>) as any}
+        placement="right"
+        overlayStyle={unref(getOverlayStyleRef)}
+        autoAdjustOverflow={true}
+        overlayClassName="base-help__wrap"
+        getPopupContainer={() => getPopupContainer()}
+      >
+        {{
+          default: () => (
+            <span class="base-help" style={unref(getMainStyleRef)}>
+              {getSlot(slots) || <InfoCircleOutlined />}
+            </span>
+          ),
+        }}
+      </Tooltip>
+    );
+  },
+});

src/components/Basic/src/BasicTitle.vue

@@ -0,0 +1,58 @@
+<template>
+  <span class="base-title" :class="{ 'show-span': showSpan && $slots.default }">
+    <slot />
+    <BaseHelp class="base-title__help" v-if="helpMessage" :text="helpMessage" />
+  </span>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'BaseTitle',
+    props: {
+      helpMessage: {
+        type: [String, Array] as PropType<string | string[]>,
+        default: '',
+      },
+      showSpan: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+      },
+    },
+    setup() {
+      return {};
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @import (reference) '../../../design/index.less';
+
+  .base-title {
+    position: relative;
+    display: flex;
+    padding-left: 7px;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    color: @text-color-base;
+
+    .unselect();
+
+    &.show-span::before {
+      position: absolute;
+      top: 4px;
+      left: 0;
+      width: 3px;
+      height: 16px;
+      margin-right: 4px;
+      background: @primary-color;
+      content: '';
+    }
+
+    &__help {
+      margin-left: 10px;
+    }
+  }
+</style>