refactor: remove duplicate code and unify color utilities

Author: fecommunity

client/pages/admin/article/index.tsx

@@ -7,7 +7,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { LocaleTime } from '@/components/LocaleTime';
 import { PaginationTable } from '@/components/PaginationTable';
 import { ViewChart } from '@/components/ViewChart';
-import { getRandomColor } from '@/constants';
+import { getRandomColor } from '@/utils';
 import { useAsyncLoading } from '@/hooks/useAsyncLoading';
 import { usePagination } from '@/hooks/usePagination';
 import { useSetting } from '@/hooks/useSetting';

client/src/components/Pagination/index.tsx

@@ -1,5 +1,5 @@
 import { Pagination as APagination } from 'antd';
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 
 import style from './index.module.scss';
 
@@ -12,21 +12,6 @@ interface IProps {
   hideOnSinglePage?: boolean;
 }
 
-export const usePagination = ({
-  page: defaultPage = 1,
-  pageSize: defaultPageSize = 12,
-}): [{ page: number; pageSize: number }, (arg, arg1) => void] => {
-  const [page, setPage] = useState(defaultPage);
-  const [pageSize, setPageSize] = useState(defaultPageSize);
-
-  const updatePagination = useCallback((page, pageSize) => {
-    setPage(page);
-    setPageSize(pageSize);
-  }, []);
-
-  return [{ page, pageSize }, updatePagination];
-};
-
 export const Pagination: React.FC<IProps> = ({ total, onChange, page, pageSize, hideOnSinglePage = false }) => {
   return (
     <div className={style.wrapper}>

client/src/constants/index.tsx

@@ -20,16 +20,3 @@ export const TAG_COLORS = [
   '#ff0064',
   '#722ed1',
 ];
-
-export const getRandomColor = (() => {
-  const cache = {};
-
-  return (key): string => {
-    if (!cache[key]) {
-      const color = TAG_COLORS[Math.floor(Math.random() * TAG_COLORS.length)];
-      cache[key] = color;
-      return color;
-    }
-    return cache[key];
-  };
-})();

client/src/utils/index.tsx

@@ -130,26 +130,11 @@ const iconMap = {
   skin: SkinIcon,
 };
 
-
-const colors = ['#52c41a', '#f5222d', '#1890ff', '#faad14', '#ff0064', '#722ed1'];
-
-const tagColors = [
-  '#dc3545',
-  '#17a2b8',
-  '#00b74a',
-  '#fc651f',
-  '#6c757d',
-  '#f5c800',
-  '#808695',
-  '#2db7f5',
-  '#87d068',
-  '#108ee9',
-  '#52c41a',
-  '#f5222d',
-  '#1890ff',
-  '#faad14',
-  '#ff0064',
-  '#722ed1',
+// 统一的颜色数组，避免重复
+const colors = [
+  '#52c41a', '#f5222d', '#1890ff', '#faad14', '#ff0064', '#722ed1',
+  '#dc3545', '#17a2b8', '#00b74a', '#fc651f', '#6c757d', '#f5c800',
+  '#808695', '#2db7f5', '#87d068', '#108ee9'
 ];
 
 export const getRandomColor = (() => {
@@ -164,29 +149,6 @@ export const getRandomColor = (() => {
   };
 })();
 
-export function throttle(fn, threshhold) {
-  let last;
-  let timer;
-  threshhold || (threshhold = 250);
-
-  return function () {
-    const context = this; // eslint-disable-line @typescript-eslint/no-this-alias
-    const args = arguments; // eslint-disable-line prefer-rest-params
-    const now = +new Date();
-
-    if (last && now < last + threshhold) {
-      clearTimeout(timer);
-      timer = setTimeout(function () {
-        last = now;
-        fn.apply(context, args);
-      }, threshhold);
-    } else {
-      last = now;
-      fn.apply(context, args);
-    }
-  };
-}
-
 export function elementInViewport(el) {
   let top = el.offsetTop;
   let left = el.offsetLeft;
@@ -206,20 +168,11 @@ export function elementInViewport(el) {
     left + width > window.pageXOffset
   );
 }
+
 export function getDocumentScrollTop() {
   return document.documentElement.scrollTop || window.pageYOffset || window.scrollY || document.body.scrollTop;
 }
 
-export function download({ name, url }) {
-  const eleLink = document.createElement('a');
-  eleLink.download = name;
-  eleLink.style.display = 'none';
-  eleLink.href = url;
-  document.body.appendChild(eleLink);
-  eleLink.click();
-  document.body.removeChild(eleLink);
-}
-
 export const groupBy = function (data, condition) {
   if (!condition || !Array.isArray(data)) {
     return data;
@@ -252,33 +205,6 @@ export const formatFileSize = (size) => {
   return (size / 1024 / 1024).toFixed(2) + ' MB';
 };
 
-export function debounce(func, wait, immediate = false) {
-  let timeout;
-
-  const debounced = function () {
-    const context = this; // eslint-disable-line @typescript-eslint/no-this-alias
-    const args = arguments; // eslint-disable-line prefer-rest-params
-    const later = function () {
-      timeout = null;
-      if (!immediate) {
-        func.apply(context, args);
-      }
-    };
-    const callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) {
-      func.apply(context, args);
-    }
-  };
-
-  debounced.cancel = () => {
-    clearTimeout(timeout);
-  };
-
-  return debounced;
-}
-
 export function resolveUrl(baseURL, relativeURL) {
   if (!baseURL) {
     baseURL = '/';
@@ -298,11 +224,10 @@ export const scrollToBottom = (el: HTMLElement) => {
 };
 
 export function getColorFromNumber(num) {
-  const index = num % tagColors.length;
-  return tagColors[index];
+  const index = num % colors.length;
+  return colors[index];
 }
 
-
 export function getIconByName (name) {
   if (React.isValidElement(name)) {
     return name;
@@ -311,7 +236,6 @@ export function getIconByName (name) {
   return IconComponent;
 };
 
-
 export function getFirstLevelRoute(path) {
   // 确保路径以斜杠开头，如果不是则添加斜杠
   if (!path.startsWith('/')) {