🦄 refactor(ID1000779): 八、收藏功能；

【八、收藏功能；】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000779

src/components/divider/index.module.scss

@@ -0,0 +1,47 @@
+
+.divider {
+  position: relative;
+  font-size: 28px;
+  color: $color_font_one;
+  // 垂直
+  &-vertical {
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    margin: 0 8px;
+    border-left: 1px $borderStyle $borderColor;
+    vertical-align: middle;
+  }
+  // 水平
+  &-horizontal {
+    display: block;
+    width: 100%;
+    height: 1px;
+    margin: 48px 0;
+    border-top: 1px $borderStyle $borderColor;
+  }
+  &-text{
+    position: absolute;
+    text-align: center;
+    padding: 0 40px;
+    font-size: inherit;
+    font-weight: 500;
+    color: currentColor;
+    background-color: #fff;
+  }
+}
+.is{
+  &-center{
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
+  &-left{
+    left: 20px;
+    transform:translateY(-50%);
+  }
+  &-right{
+    right: 20px;
+    transform:translateY(-50%);
+  }
+}
+

src/components/divider/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * Usage:
+ *
+ * <View>巴拉巴拉小魔仙</View>
+ * <Divider direction="vertical" borderStyle="solid"></Divider
+ * <View>全身变</View>
+ *
+ */
+
+import { View } from '@tarojs/components'
+import type { FC, ReactNode } from 'react'
+import React from 'react'
+import classnames from 'classnames'
+import styles from './index.module.scss'
+
+type BorderStype = 'solid' | 'dashed' | 'dotted' | 'double'
+
+interface DividerProps {
+  direction?: 'horizontal' | 'vertical'
+  borderStyle?: BorderStype
+  contentPosition?: 'left' | 'center' | 'right'
+  children?: ReactNode
+  customClassName?: string
+  customStyles?: React.CSSProperties
+}
+const Divider: FC<DividerProps> = (props) => {
+  const { direction = 'horizontal', borderStyle = 'solid', contentPosition = 'center', customClassName = '', customStyles = {} } = props
+
+  const classname = classnames(styles.divider, styles[`divider-${direction}`], customClassName)
+  const contentClassname = classnames(styles['divider-text'], styles[`is-${contentPosition}`])
+
+  const borderTopStyle: { borderTopStyle: BorderStype } = {
+    borderTopStyle: borderStyle,
+  }
+  const borderLeftStyle: { borderLeftStyle: BorderStype } = {
+    borderLeftStyle: borderStyle,
+  }
+
+  const dividerStyle = direction === 'horizontal' ? borderTopStyle : borderLeftStyle
+
+  return (
+    <View className={classname} style={{ ...dividerStyle, ...customStyles }}>
+      {props.children && direction !== 'vertical' && <View className={contentClassname}>{props.children}</View>}
+    </View>
+  )
+}
+export default Divider