refactor: clean feature page warnings

Author: Jerry-CodeHub

src/components/Designable/src/common/Container/index.tsx

@@ -7,8 +7,8 @@ export const Container: ReactFC = observer((props) => {
   return <DroppableWidget>{props.children}</DroppableWidget>;
 });
 
-export const withContainer = (Target: React.JSXElementConstructor<any>) => {
-  return (props: any) => {
+export const withContainer = <P extends object>(Target: React.JSXElementConstructor<P>) => {
+  return (props: P) => {
     return (
       <DroppableWidget>
         <Target {...props} />

src/components/Designable/src/components/Field/preview.tsx

@@ -39,14 +39,14 @@ const NeedShownExpression = {
   'x-value': true,
 };
 
-const isExpression = (val: any) => isStr(val) && /^\{\{.*\}\}$/.test(val);
+const isExpression = (val: unknown) => isStr(val) && /^\{\{.*\}\}$/.test(val);
 
-const filterExpression = (val: any) => {
+const filterExpression = (val: unknown): unknown => {
   if (typeof val === 'object') {
     const isArray = isArr(val);
     const results = reduce(
       val,
-      (buf: any, value, key) => {
+      (buf: Record<string, unknown> | unknown[], value, key) => {
         if (isExpression(value)) {
           return buf;
         } else {
@@ -69,8 +69,13 @@ const filterExpression = (val: any) => {
   return val;
 };
 
-const toDesignableFieldProps = (schema: ISchema, components: any, nodeIdAttrName: string, id: string) => {
-  const results: any = {};
+const toDesignableFieldProps = (
+  schema: ISchema,
+  components: Record<string, unknown>,
+  nodeIdAttrName: string,
+  id: string,
+) => {
+  const results: Record<string, unknown> = {};
   each(SchemaStateMap, (fieldKey, schemaKey) => {
     const value = schema[schemaKey];
     if (isExpression(value)) {
@@ -98,9 +103,9 @@ const toDesignableFieldProps = (schema: ISchema, components: any, nodeIdAttrName
     results.component = [component, toJS(componentProps)];
   }
   if (decorator) {
-    FormPath.setIn(results['decorator'][1], nodeIdAttrName, id);
+    FormPath.setIn((results.decorator as [unknown, Record<string, unknown>])[1], nodeIdAttrName, id);
   } else if (component) {
-    FormPath.setIn(results['component'][1], nodeIdAttrName, id);
+    FormPath.setIn((results.component as [unknown, Record<string, unknown>])[1], nodeIdAttrName, id);
   }
   results.title = results.title && <span data-content-editable="title">{results.title}</span>;
   results.description = results.description && <span data-content-editable="description">{results.description}</span>;

src/components/Designable/src/components/Form/preview.tsx

@@ -1,6 +1,6 @@
 import { Form as FormilyForm } from '@formily/antd-v5';
 import { createForm } from '@formily/core';
-import { observer } from '@formily/react';
+import { ISchema, observer } from '@formily/react';
 import { createBehavior, createResource } from '@pind/designable-core';
 import { DnFC, usePrefix } from '@pind/designable-react';
 import React, { useMemo } from 'react';
@@ -36,7 +36,7 @@ Form.Behavior = createBehavior({
       propsSchema: {
         type: 'object',
         properties: {
-          ...(AllSchemas.FormLayout.properties as any),
+          ...((AllSchemas.FormLayout.properties || {}) as unknown as Record<string, ISchema>),
           style: AllSchemas.CSSStyle,
         },
       },

src/components/Designable/src/schemas/Form.ts

@@ -5,7 +5,7 @@ import { FormLayout } from './FormLayout';
 export const Form: ISchema = {
   type: 'object',
   properties: {
-    ...(FormLayout.properties as any),
+    ...((FormLayout.properties || {}) as unknown as Record<string, ISchema>),
     style: CSSStyle,
   },
 };

src/components/Designable/src/schemas/Password.ts

@@ -3,7 +3,7 @@ import { Input } from './Input';
 export const Password: ISchema = {
   type: 'object',
   properties: {
-    ...(Input.properties as any),
+    ...((Input.properties || {}) as unknown as Record<string, ISchema>),
     checkStrength: {
       type: 'boolean',
       'x-decorator': 'FormItem',

src/components/Designable/src/shared.ts

@@ -1,16 +1,16 @@
 import { Engine, TreeNode } from '@pind/designable-core';
 
-export type ComponentNameMatcher = string | string[] | ((name: string, node: TreeNode, context?: any) => boolean);
+export type ComponentNameMatcher = string | string[] | ((name: string, node: TreeNode, context?: unknown) => boolean);
 
-export const matchComponent = (node: TreeNode, name: ComponentNameMatcher, context?: any) => {
+export const matchComponent = (node: TreeNode, name: ComponentNameMatcher, context?: unknown) => {
   if (name === '*') return true;
   const componentName = node?.props?.['x-component'];
   if (typeof name === 'function') return name(componentName || '', node, context);
   if (Array.isArray(name)) return name.includes(componentName);
   return componentName === name;
 };
 
-export const matchChildComponent = (node: TreeNode, name: ComponentNameMatcher, context?: any) => {
+export const matchChildComponent = (node: TreeNode, name: ComponentNameMatcher, context?: unknown) => {
   if (name === '*') return true;
   const componentName = node?.props?.['x-component'];
   if (!componentName) return false;

src/global.less

@@ -0,0 +1,18 @@
+#cesium-container {
+  width: 100%;
+  height: calc(100vh - 220px);
+  min-height: 560px;
+}
+
+#cesium-container .cesium-widget,
+#cesium-container .cesium-widget canvas {
+  width: 100%;
+  height: 100%;
+}
+
+@media (max-width: 768px) {
+  #cesium-container {
+    height: calc(100vh - 260px);
+    min-height: 420px;
+  }
+}

src/pages/Feature/AudioFeature/AudioPlayer/index.tsx

@@ -1,5 +1,5 @@
 import { ProCard } from '@ant-design/pro-components';
-import { useMount } from 'ahooks';
+import { useEffect } from 'react';
 import Player from 'xgplayer';
 import MusicPreset, { Analyze, Lyric } from 'xgplayer-music';
 import 'xgplayer-music/dist/index.min.css';
@@ -12,30 +12,34 @@ declare global {
   }
 }
 
+type PlayerWithMode = Player & {
+  mode: number;
+};
+
 export default function AudioPlayer() {
-  useMount(() => {
-    function initEvents() {
-      let jsSelect = document.getElementById('js-select') as HTMLSelectElement;
-      jsSelect.addEventListener('change', function (e: any) {
-        let value = e.target.value;
-        if (window.analyze) {
-          window.analyze.mode = value;
-          if (value === 'lightning') {
-            window.analyze.options.count = 512;
-            window.analyze.options.stroke = 4;
+  useEffect(() => {
+    const jsSelect = document.getElementById('js-select') as HTMLSelectElement | null;
+    const handleSelectChange = (e: Event) => {
+      const value = (e.target as HTMLSelectElement).value;
+      if (window.analyze) {
+        window.analyze.mode = value;
+        if (value === 'lightning') {
+          window.analyze.options.count = 512;
+          window.analyze.options.stroke = 4;
+        } else {
+          if (value === 'waves') {
+            window.analyze.options.stroke = 3;
           } else {
-            if (value === 'waves') {
-              window.analyze.options.stroke = 3;
-            } else {
-              window.analyze.options.stroke = 2;
-            }
-            window.analyze.options.count = 256;
+            window.analyze.options.stroke = 2;
           }
+          window.analyze.options.count = 256;
         }
-      });
-    }
-    initEvents();
-    let player = new Player({
+      }
+    };
+
+    jsSelect?.addEventListener('change', handleSelectChange);
+
+    const player = new Player({
       id: 'mse',
       url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/audio.mp3', //[{ src: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/audio.mp3', name: '林宥嘉·脆弱一分钟', poster: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/poster-small.jpeg' }],
       volume: 0.8,
@@ -55,34 +59,32 @@ export default function AudioPlayer() {
       },
     });
     player.crossOrigin = 'anonymous';
-    let lyricTxts = `[00:00.00] 脆弱一分钟\n[00:00.00] 作曲 : 林家谦\n[00:00.00] 作词 : 徐世珍/吴辉福\n[00:00.000]编曲：林家谦\n[00:00.000]时钟不要走\n[00:04.220]让我脆弱一分钟\n[00:07.440]要多久才能习惯被放手\n[00:15.800]马克杯空了 暖暖的温热\n[00:22.660]却还在我手中停留\n[00:27.960]\n[00:29.790]勇气不要走\n[00:32.200]给我理由再冲动\n[00:35.690]去相信爱情 就算还在痛\n[00:43.960]如果我不说不会有人懂\n[00:50.720]失去你我有多寂寞\n[00:55.610]还是愿意\n[00:57.580]付出一切仅仅为了一个好梦\n[01:03.980]梦里有人真心爱我 陪我快乐也陪我沉默\n[01:11.260]没有无缘无故的痛承受越多越成熟\n[01:18.630]能让你拥抱更好的我\n[01:25.030] 谁也不要走\n[01:28.270]应该是一种奢求\n[01:31.900]可是我只想 握紧你的手\n[01:39.780]我宁愿等候 也不愿错过\n[01:46.630]你对我微笑的时候\n[01:56.780]\n[02:18.910]还是愿意\n[02:21.320]用尽全力仅仅为了一个以后\n[02:27.870]哪怕生命并不温柔哪怕被幸福一再反驳\n[02:34.870]也要相信伤痕累累 其实只是在琢磨\n[02:42.070]能让你为之一亮 的我\n[02:53.910]\n[02:56.350]制作人：林宥嘉\n[02:57.750]制作助理：张婕汝\n[02:59.010]录音师：陈文骏、叶育轩\n[03:00.410]录音室：白金录音室\n[03:01.740]混音师：SimonLi @ nOiz\n[03:03.000]OP: Terence Lam Production & Co. (Warner/Chappell Music, HK Ltd.)\n[03:04.050]SP: Warner/Chappell Music Taiwan Ltd.\n[03:04.910]OP：Universal Ms Publ Ltd Taiwan\n`;
+    const lyricTxts = `[00:00.00] 脆弱一分钟\n[00:00.00] 作曲 : 林家谦\n[00:00.00] 作词 : 徐世珍/吴辉福\n[00:00.000]编曲：林家谦\n[00:00.000]时钟不要走\n[00:04.220]让我脆弱一分钟\n[00:07.440]要多久才能习惯被放手\n[00:15.800]马克杯空了 暖暖的温热\n[00:22.660]却还在我手中停留\n[00:27.960]\n[00:29.790]勇气不要走\n[00:32.200]给我理由再冲动\n[00:35.690]去相信爱情 就算还在痛\n[00:43.960]如果我不说不会有人懂\n[00:50.720]失去你我有多寂寞\n[00:55.610]还是愿意\n[00:57.580]付出一切仅仅为了一个好梦\n[01:03.980]梦里有人真心爱我 陪我快乐也陪我沉默\n[01:11.260]没有无缘无故的痛承受越多越成熟\n[01:18.630]能让你拥抱更好的我\n[01:25.030] 谁也不要走\n[01:28.270]应该是一种奢求\n[01:31.900]可是我只想 握紧你的手\n[01:39.780]我宁愿等候 也不愿错过\n[01:46.630]你对我微笑的时候\n[01:56.780]\n[02:18.910]还是愿意\n[02:21.320]用尽全力仅仅为了一个以后\n[02:27.870]哪怕生命并不温柔哪怕被幸福一再反驳\n[02:34.870]也要相信伤痕累累 其实只是在琢磨\n[02:42.070]能让你为之一亮 的我\n[02:53.910]\n[02:56.350]制作人：林宥嘉\n[02:57.750]制作助理：张婕汝\n[02:59.010]录音师：陈文骏、叶育轩\n[03:00.410]录音室：白金录音室\n[03:01.740]混音师：SimonLi @ nOiz\n[03:03.000]OP: Terence Lam Production & Co. (Warner/Chappell Music, HK Ltd.)\n[03:04.050]SP: Warner/Chappell Music Taiwan Ltd.\n[03:04.910]OP：Universal Ms Publ Ltd Taiwan\n`;
 
     // 初始化频谱
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    let analyze = new Analyze(player, document.querySelector('canvas') as HTMLElement, {
+    const analyze = new Analyze(player, document.querySelector('canvas') as HTMLElement, {
       bgColor: 'rgba(0,0,0,0.7)',
       stroke: 3,
     });
+    window.analyze = analyze;
 
     // 初始化歌词模块
-    let lyric = new Lyric([lyricTxts], document.querySelector('#gc'));
+    const lyric = new Lyric([lyricTxts], document.querySelector('#gc'));
     lyric.bind(player);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    let nullText = 0;
-    player.on('lyricUpdate', (res) => {
-      if (res.lyric === '\n') {
-        nullText++;
-      }
-    });
-
     player.on('playing', function () {
       lyric.show();
-      (player as any).mode = 2;
+      (player as PlayerWithMode).mode = 2;
     });
     let canvasDom = document.getElementById('canvas') as HTMLCanvasElement;
     canvasDom.width = window.innerWidth;
     canvasDom.height = window.innerHeight * 0.25;
-  });
+
+    return () => {
+      jsSelect?.removeEventListener('change', handleSelectChange);
+      window.analyze = undefined;
+      player.destroy();
+    };
+  }, []);
 
   return (
     <AudioPlayerStyles>

src/pages/Feature/AudioFeature/AudioVisible/index.tsx

@@ -1,13 +1,15 @@
 import { ProCard } from '@ant-design/pro-components';
 import { Button } from 'antd';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import WaveSurfer from 'wavesurfer.js';
+import WaveSurfer, { type WaveSurferOptions } from 'wavesurfer.js';
 import Timeline from 'wavesurfer.js/plugins/timeline';
 
 import { AudioVisibleStyles } from './AudioVisible.style';
 
 // WaveSurfer hook
-const useWavesurfer = (containerRef: React.RefObject<HTMLDivElement>, options: any) => {
+type WaveSurferPlayerProps = Omit<WaveSurferOptions, 'container'>;
+
+const useWavesurfer = (containerRef: React.RefObject<HTMLDivElement>, options: WaveSurferPlayerProps) => {
   const [wavesurfer, setWavesurfer] = useState<WaveSurfer | null>(null);
 
   // Initialize wavesurfer when the container mounts
@@ -25,14 +27,14 @@ const useWavesurfer = (containerRef: React.RefObject<HTMLDivElement>, options: a
     return () => {
       ws.destroy();
     };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [containerRef, options.url]);
 
   return wavesurfer;
 };
 
 // Create a React component that will render wavesurfer.
 // Props are wavesurfer options.
-const WaveSurferPlayer = (props: any) => {
+const WaveSurferPlayer = (props: WaveSurferPlayerProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
@@ -83,8 +85,7 @@ export default function AudioVisible() {
 
   // Swap the audio URL
   const onUrlChange = useCallback(() => {
-    urls.reverse();
-    setAudioUrl(urls[0]);
+    setAudioUrl((currentUrl) => (currentUrl === urls[0] ? urls[1] : urls[0]));
   }, []);
 
   return (