🐞 fix：merge

iconfont.json

@@ -1,5 +1,5 @@
 {
-  "symbol_url": "123.js",
+  "symbol_url": "//at.alicdn.com/t/c/font_4436186_ra7sc0n5lb.js",
   "save_dir": "./src/common/components/iconfont",
   "use_typescript": true,
   "platforms": ["weapp"],

src/app.config.ts

@@ -37,6 +37,7 @@
 //   },
 //   lazyCodeLoading: 'requiredComponents',
 // });
+import { useGlobalIconFont } from './common/components/iconfont/helper';
 
 export default defineAppConfig({
   pages: [
@@ -55,6 +56,8 @@ export default defineAppConfig({
     'pages/index/index',
     'pages/editUser/index',
   ],
+  /* eslint-disable */
+  usingComponents: Object.assign(useGlobalIconFont()),
   tabBar: {
     /* tab页面必须放在主包里 */
     custom: true,

src/common/components/chart/index.tsx

@@ -1,70 +1,141 @@
-/* eslint-disable */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { Canvas } from '@tarojs/components';
-import Taro from '@tarojs/taro';
-import { EChartsOption } from 'echarts';
-import * as echarts from 'echarts/core';
-import { useCallback, useEffect, useState } from 'react';
-import { Echarts } from 'taro-charts';
+import Taro, { CanvasContext, Canvas as CanvasInterface } from '@tarojs/taro';
+import React, { CSSProperties, useEffect } from 'react';
 
-const { windowWidth } = Taro.getSystemInfoSync();
-const E_HEIGHT = 300;
-const E_WIDTH = windowWidth;
+interface LineChartProps {
+  data: number[];
+  /** x轴标签 */
+  xLabels?: string[];
+  /** 边距 */
+  padding?: number;
+  style: CSSProperties;
+  /** 线条颜色 */
+  lineColor?: string;
+  /** 点颜色 */
+  dotColor?: string;
+  className?: string;
+  /** 容器id，默认为lineCanvas */
+  id?: string;
+  /** 画布宽高 */
+  width?: number;
+  height?: number;
+}
+const DEFAULT_DOT_COLOR = '#0ff';
+const DEFAULT_TEXT_COLOR = '#000';
+const DEFAULT_LINE_COLOR = '#0ff';
+const DEFAULT_PADDING = 30;
+const DEFAULT_WIDTH = 300;
+const DEFAULT_HEIGHT = 150;
+const DEFAULT_DATA = [10, 20, 30, 40, 50, 60, 90];
+const DEFAULT_X_LABELS = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+const DEFAULT_CHART_ID = 'lineCanvas';
+const DEFAULT_MARK_LINE_COLOR = '#ccc';
 
-export default function Charts(props: { options: EChartsOption }) {
-  //   useEffect(() => {
-  //     setNavigationBarTitle({ title: '基础柱状图' });
-  //   }, []);
+const LineChart: React.FC<LineChartProps> = (props) => {
+  const {
+    width: propWidth,
+    height: propHeight,
+    id,
+    data: propData,
+    className,
+    lineColor,
+    dotColor,
+    padding: propPadding,
+    xLabels: propX,
+    style,
+  } = props;
+  useEffect(() => {
+    drawLineChart();
+  }, []);
 
-  const option = {
-    xAxis: {
-      type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    },
-    yAxis: {
-      type: 'value',
-    },
-    series: [
-      {
-        data: [150, 230, 224, 218, 135, 147, 260],
-        type: 'bar',
-      },
-    ],
+  const drawLineChart = () => {
+    const query = Taro.createSelectorQuery();
+    query
+      .select(`#${id ?? DEFAULT_CHART_ID}`)
+      .fields({ node: true, size: true })
+      .exec((res) => {
+        const canvas = res[0].node as CanvasInterface;
+        const ctx = canvas.getContext('2d') as CanvasContext;
+        drawChart(ctx);
+      });
   };
-  const [chart, setChart] = useState<echarts.ECharts>();
 
-  useEffect(() => {
-    clickedCharts();
-    return () => {
-      if (process.env.TARO_ENV !== 'weapp') {
-        chart?.dispose();
+  const drawChart = (ctx: CanvasContext) => {
+    // 初始化
+    const data = propData ?? DEFAULT_DATA;
+    const width = propWidth ?? DEFAULT_WIDTH;
+    const height = propHeight ?? DEFAULT_HEIGHT;
+    const padding = propPadding ?? DEFAULT_PADDING;
+    const xLabels = propX ?? DEFAULT_X_LABELS;
+    ctx.clearRect(0, 0, width, height);
+
+    // 标识线
+    ctx.strokeStyle = DEFAULT_MARK_LINE_COLOR;
+    ctx.lineWidth = 1;
+    for (let i = 0; i <= data.length; i++) {
+      const y = padding + (i * (height - 2 * padding)) / data.length;
+      ctx.beginPath();
+      ctx.moveTo(padding, y);
+      ctx.lineTo(width, y);
+      ctx.stroke();
+    }
+
+    // 图
+    ctx.strokeStyle = lineColor ?? DEFAULT_LINE_COLOR;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    data.forEach((value, index) => {
+      const x = padding + (index / (data.length - 1)) * (width - 2 * padding);
+      const y = height - padding - (value / 70) * (height - 2 * padding);
+      if (index === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        const prevX = padding + ((index - 1) / (data.length - 1)) * (width - 2 * padding);
+        const prevY = height - padding - (data[index - 1] / 70) * (height - 2 * padding);
+        const cp1x = (prevX + x) / 2;
+        const cp1y = prevY;
+        const cp2x = (prevX + x) / 2;
+        const cp2y = y;
+        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
       }
-    };
-  }, [chart]);
+    });
+    ctx.stroke();
 
-  const clickedCharts = useCallback(() => {
-    chart?.on('click', function (params) {
-      console.log(params);
+    // 数据点
+    ctx.fillStyle = dotColor ?? DEFAULT_DOT_COLOR;
+    data.forEach((value, index) => {
+      const x = padding + (index / (data.length - 1)) * (width - 2 * padding);
+      const y = height - padding - (value / 70) * (height - 2 * padding);
+      ctx.beginPath();
+      ctx.arc(x, y, 3, 0, 2 * Math.PI);
+      ctx.fill();
     });
-  }, [chart]);
+
+    // 坐标轴标签
+    ctx.fillStyle = DEFAULT_TEXT_COLOR;
+    ctx.font = '10px';
+    const step = Math.ceil(Math.max(...data) / data.length);
+    for (let i = 0; i <= data.length; i++) {
+      const y = height - padding - (i * (height - 2 * padding)) / data.length;
+      ctx.fillText((i * step).toString(), 5, y + 3);
+    }
+    xLabels.forEach((value, index) => {
+      const x = padding + (index / (xLabels.length - 1)) * (width - 2 * padding);
+      ctx.fillText(value, x - 3, height - 5);
+    });
+  };
 
   return (
-    <>
-      <Canvas style={{ display: 'none' }} />
-      <Echarts
-        // 只有RN端需要指定RNRenderType的类型('skia'|'svg')
-        // Please specify the RNRenderType('skia'|'svg'), when you use ReactNative
-        onContextCreate={(canvas) => {
-          const chart = echarts.init(canvas, 'light', {
-            renderer: 'svg',
-            devicePixelRatio: Taro.getSystemInfoSync().pixelRatio, // 可以解决小程序下图表模糊的问题
-            width: E_WIDTH,
-            height: E_HEIGHT,
-          });
-          canvas.setChart?.(chart);
-          chart.setOption(option);
-          setChart(chart);
-        }}
-      />
-    </>
+    <Canvas
+      id={id ?? DEFAULT_CHART_ID}
+      width={propWidth + 'px'}
+      height={propHeight + 'px'}
+      className={className}
+      style={style}
+      type="2d"
+    />
   );
-}
+};
+
+export default LineChart;

src/common/components/comment/comment.scss

@@ -1,13 +1,13 @@
 //@import '../../lib/style/font.scss';
 $content-line-height: 30;
 /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
-@font-face {
-  font-family: 'iconfont'; /* Project id 4326563 */
-  src:
-    url('//123/t/c/font_4326563_5kfmphwtn65.woff2?t=1699759598184') format('woff2'),
-    url('//123/t/c/font_4326563_5kfmphwtn65.woff?t=1699759598184') format('woff'),
-    url('//123/t/c/font_4326563_5kfmphwtn65.ttf?t=1699759598184') format('truetype');
-}
+// @font-face {
+//   font-family: 'iconfont'; /* Project id 4326563 */
+//   src:
+//     url('//123/t/c/font_4326563_5kfmphwtn65.woff2?t=1699759598184') format('woff2'),
+//     url('//123/t/c/font_4326563_5kfmphwtn65.woff?t=1699759598184') format('woff'),
+//     url('//123/t/c/font_4326563_5kfmphwtn65.ttf?t=1699759598184') format('truetype');
+// }
 
 .iconfont {
   font-family: 'iconfont' !important;

src/common/components/comment/comment.tsx

@@ -6,7 +6,7 @@ import Taro from '@tarojs/taro';
 import { useEffect, useTransition } from 'react';
 
 import { useCourseStore } from '@/pages/main/store/store';
-
+import IconFont from '../iconfont';
 import './comment.scss';
 
 import { CommentInfo } from '../../assets/types';
@@ -45,11 +45,13 @@ export default function Comment({ onClick, ...props }: CommentProps) {
         {props.type === 'inner' && (
           <View className="likes">
             <View className="icon">
-              <Navigator className="iconfont">&#xe786;</Navigator>
+              <IconFont name="like" />
+              {/* <Navigator className="iconfont">&#xe786;</Navigator> */}
             </View>
             <Text className="text1">{props.total_support_count}</Text>
             <View className="icon">
-              <Navigator className="iconfont">&#xe769;</Navigator>
+              <IconFont name="comment" />
+              {/* <Navigator className="iconfont">&#xe769;</Navigator> */}
             </View>
             <Text className="text1">{props.total_comment_count}</Text>
           </View>

src/common/components/iconfont/helper.d.ts

@@ -0,0 +1,2 @@
+/* eslint-disable */
+export declare var useGlobalIconFont: () => { iconfont: string };

src/common/components/iconfont/helper.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+const useGlobalIconFont = () => {
+  return {
+    iconfont: `common/components/iconfont/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
+  };
+};
+
+// es modules is unavaiable.
+module.exports.useGlobalIconFont = useGlobalIconFont;

src/common/components/iconfont/index.tsx

@@ -0,0 +1,18 @@
+/* tslint:disable */
+
+import React, { FunctionComponent } from 'react';
+
+export type IconNames = 'comment' | 'like' | 'wechat' | 'yanjing' | 'yanjing1' | 'xiaxue';
+
+export interface IconProps {
+  name: IconNames;
+  size?: number;
+  color?: string | string[];
+  style?: React.CSSProperties;
+}
+
+const IconFont: FunctionComponent<IconProps> = () => {
+  return null;
+};
+
+export default IconFont;

src/common/components/iconfont/index.weapp.tsx

@@ -0,0 +1,26 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { FunctionComponent } from 'react';
+
+export type IconNames = 'comment' | 'like' | 'wechat' | 'yanjing' | 'yanjing1' | 'xiaxue';
+
+interface Props {
+  name: IconNames;
+  size?: number;
+  color?: string | string[];
+  style?: React.CSSProperties;
+}
+
+const IconFont: FunctionComponent<Props> = (props) => {
+  const { name, size, color, style } = props;
+
+  // @ts-ignore
+  return <iconfont name={name} size={size} color={color} style={style} />;
+};
+
+IconFont.defaultProps = {
+  size: 18,
+};
+
+export default IconFont;

src/common/components/iconfont/weapp/weapp.js

@@ -0,0 +1,63 @@
+Component({
+  properties: {
+    // comment | like | wechat | yanjing | yanjing1 | xiaxue
+    name: {
+      type: String,
+    },
+    // string | string[]
+    color: {
+      type: null,
+      observer: function (color) {
+        this.setData({
+          colors: this.fixColor(),
+          isStr: typeof color === 'string',
+        });
+      },
+    },
+    size: {
+      type: Number,
+      value: 18,
+      observer: function (size) {
+        this.setData({
+          svgSize: size,
+        });
+      },
+    },
+  },
+  data: {
+    colors: '',
+    svgSize: 18,
+    quot: '"',
+    isStr: true,
+  },
+  methods: {
+    fixColor: function () {
+      var color = this.data.color;
+      var hex2rgb = this.hex2rgb;
+
+      if (typeof color === 'string') {
+        return color.indexOf('#') === 0 ? hex2rgb(color) : color;
+      }
+
+      return color.map(function (item) {
+        return item.indexOf('#') === 0 ? hex2rgb(item) : item;
+      });
+    },
+    hex2rgb: function (hex) {
+      var rgb = [];
+
+      hex = hex.substr(1);
+
+      if (hex.length === 3) {
+        hex = hex.replace(/(.)/g, '$1$1');
+      }
+
+      hex.replace(/../g, function (color) {
+        rgb.push(parseInt(color, 0x10));
+        return color;
+      });
+
+      return 'rgb(' + rgb.join(',') + ')';
+    },
+  },
+});

src/common/components/iconfont/weapp/weapp.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}