feat(trendarrow): 多端适配

packages/nutui-taro-demo/bin/ts-node

@@ -0,0 +1 @@
+../lib/node_modules/ts-node/dist/bin.js

packages/nutui-taro-demo/bin/ts-node-cwd

@@ -0,0 +1 @@
+../lib/node_modules/ts-node/dist/bin-cwd.js

packages/nutui-taro-demo/bin/ts-node-esm

@@ -0,0 +1 @@
+../lib/node_modules/ts-node/dist/bin-esm.js

packages/nutui-taro-demo/bin/ts-node-script

@@ -0,0 +1 @@
+../lib/node_modules/ts-node/dist/bin-script.js

packages/nutui-taro-demo/bin/ts-node-transpile-only

@@ -0,0 +1 @@
+../lib/node_modules/ts-node/dist/bin-transpile.js

packages/nutui-taro-demo/bin/ts-script

@@ -0,0 +1 @@
+../lib/node_modules/ts-node/dist/bin-script-deprecated.js

src/config.json

@@ -1207,7 +1207,7 @@
           "author": "zhaoqian16"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "TrendArrow",
           "type": "component",
           "cName": "趋势箭头",

src/packages/trendarrow/demo.taro.tsx

@@ -12,6 +12,7 @@ import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const TrendArrowDemo = () => {
   const [translated] = useTranslate({
@@ -64,8 +65,12 @@ const TrendArrowDemo = () => {
         <Demo6 />
         <View className="h2">{translated.title7}</View>
         <Demo7 />
-        <View className="h2">{translated.title8}</View>
-        <Demo8 />
+        {!harmonyAndRn() && (
+          <>
+            <View className="h2">{translated.title8}</View>
+            <Demo8 />
+          </>
+        )}
       </ScrollView>
     </>
   )

src/packages/trendarrow/trendarrow.harmony.css

@@ -1,7 +1,8 @@
 .nut-trendarrow {
-  display: inline-flex;
+  display: flex;
+  flex-direction: row;
   align-items: center;
-  color: #1A1A1A;
+  color: #1a1a1a;
   font-size: 14px;
 }
 .nut-trendarrow-icon-before {

src/packages/trendarrow/trendarrow.scss

@@ -1,5 +1,6 @@
 .nut-trendarrow {
-  display: inline-flex;
+  display: flex;
+  flex-direction: row;
   align-items: center;
   color: $color-title;
   font-size: $trendarrow-font-size;

src/packages/trendarrow/trendarrow.taro.tsx

@@ -1,6 +1,8 @@
 import React, { FunctionComponent, useRef } from 'react'
 import { TriangleDown, TriangleUp } from '@nutui/icons-react-taro'
+import { View, Text } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 export interface TrendArrowProps extends BasicComponent {
   value: number
@@ -24,8 +26,8 @@ const defaultProps = {
   left: false,
   sync: true,
   color: '#333',
-  riseColor: 'var(--nutui-brand-6)',
-  dropColor: 'var(--nutui-secondary-1)',
+  riseColor: '#ff0f23',
+  dropColor: '#14cc33',
   riseIcon: null,
   dropIcon: null,
 } as TrendArrowProps
@@ -96,28 +98,42 @@ export const TrendArrow: FunctionComponent<
   const renderContent = (left: boolean) => {
     const classNameSuffix = !left ? 'icon-after' : 'icon-before'
     return (
-      <span
+      <Text
         className={`${classPrefix}-${classNameSuffix} ${classPrefix}-value`}
         style={calcStyle}
       >
         {calcRate}
-      </span>
+      </Text>
     )
   }
   return (
-    <div className={`${classPrefix} ${className}`} style={style} {...rest}>
+    <View className={`${classPrefix} ${className}`} style={style} {...rest}>
       {!left && renderContent(!left)}
       {Number(value) !== 0 && (
         <>
           {rateTrend.current ? (
-            <>{riseIcon || <TriangleUp color={calcIconProps.color} />}</>
+            <>
+              {riseIcon ||
+                (harmonyAndRn() ? (
+                  <Text>⬆️</Text>
+                ) : (
+                  <TriangleUp color={calcIconProps.color} />
+                ))}
+            </>
           ) : (
-            <>{dropIcon || <TriangleDown color={calcIconProps.color} />}</>
+            <>
+              {dropIcon ||
+                (harmonyAndRn() ? (
+                  <Text>⬇️</Text>
+                ) : (
+                  <TriangleDown color={calcIconProps.color} />
+                ))}
+            </>
           )}
         </>
       )}
       {left && renderContent(!left)}
-    </div>
+    </View>
   )
 }