refactor: Remove the useless `LabelsCard` component and related tool functions.

ui/src/components/Label/index.tsx

@@ -1,27 +0,0 @@
-import React, { memo, FC } from 'react';
-
-import classNames from 'classnames';
-
-import { labelStyle } from '@/utils';
-
-interface IProps {
-  className?: string;
-  children?: React.ReactNode;
-  color: string;
-}
-
-const Index: FC<IProps> = ({ className = '', children, color }) => {
-  // hover
-  const [hover, setHover] = React.useState(false);
-  return (
-    <span
-      className={classNames('badge-label rounded-1', className)}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-      style={labelStyle(color, hover)}>
-      {children}
-    </span>
-  );
-};
-
-export default memo(Index);

ui/src/components/LabelsCard/index.tsx

@@ -1,33 +0,0 @@
-import { Card, Dropdown, Form } from 'react-bootstrap';
-
-import Label from '../Label';
-
-const Labels = ({ className }) => {
-  return (
-    <Card className={className}>
-      <Card.Header className="d-flex justify-content-between align-items-center">
-        <Card.Title className="mb-0">Labels</Card.Title>
-
-        <Dropdown align="end">
-          <Dropdown.Toggle variant="link" className="no-toggle">
-            Edit
-          </Dropdown.Toggle>
-
-          <Dropdown.Menu className="p-3">
-            <Form.Check className="mb-2" type="checkbox" label="featured" />
-            <Form.Check className="mb-2" type="checkbox" label="featured" />
-            <Form.Check className="mb-2" type="checkbox" label="featured" />
-            <Form.Check type="checkbox" label="featured" />
-          </Dropdown.Menu>
-        </Dropdown>
-      </Card.Header>
-      <Card.Body>
-        <Label className="badge-label" color="#DC3545">
-          featured
-        </Label>
-      </Card.Body>
-    </Card>
-  );
-};
-
-export default Labels;

ui/src/components/index.ts

@@ -26,7 +26,6 @@ import FollowingTags from './FollowingTags';
 import QueryGroup from './QueryGroup';
 import BrandUpload from './BrandUpload';
 import SchemaForm, { JSONSchema, UISchema, initFormData } from './SchemaForm';
-import Labels from './LabelsCard';
 import DiffContent from './DiffContent';
 import Customize from './Customize';
 import CustomizeTheme from './CustomizeTheme';
@@ -74,7 +73,6 @@ export {
   BrandUpload,
   SchemaForm,
   initFormData,
-  Labels,
   DiffContent,
   Customize,
   CustomizeTheme,

ui/src/utils/color.ts

@@ -1,5 +1,18 @@
 import Color from 'color';
 
+/**
+ * Bootstrap Color Weight:
+ * $blue-100: tint-color($blue, 80%) !default;
+ * $blue-200: tint-color($blue, 60%) !default;
+ * $blue-300: tint-color($blue, 40%) !default;
+ * $blue-400: tint-color($blue, 20%) !default;
+ * $blue-500: $blue !default;
+ * $blue-600: shade-color($blue, 20%) !default;
+ * $blue-700: shade-color($blue, 40%) !default;
+ * $blue-800: shade-color($blue, 60%) !default;
+ * $blue-900: shade-color($blue, 80%) !default;
+ */
+
 const WHITE = Color('#fff');
 const BLACK = Color('#000');
 

ui/src/utils/common.ts

@@ -112,61 +112,6 @@ function escapeRemove(str: string) {
   temp = null;
   return output;
 }
-function mixColor(color_1, color_2, weight) {
-  function d2h(d) {
-    return d.toString(16);
-  }
-  function h2d(h) {
-    return parseInt(h, 16);
-  }
-
-  weight = typeof weight !== 'undefined' ? weight : 50;
-  let color = '#';
-
-  for (let i = 0; i <= 5; i += 2) {
-    const v1 = h2d(color_1.substr(i, 2));
-    const v2 = h2d(color_2.substr(i, 2));
-    let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
-
-    while (val.length < 2) {
-      val = `0${val}`;
-    }
-
-    color += val;
-  }
-
-  return color;
-}
-
-function colorRgb(sColor) {
-  sColor = sColor.toLowerCase();
-  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
-  if (sColor && reg.test(sColor)) {
-    if (sColor.length === 4) {
-      let sColorNew = '#';
-      for (let i = 1; i < 4; i += 1) {
-        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
-      }
-      sColor = sColorNew;
-    }
-    const sColorChange: number[] = [];
-    for (let i = 1; i < 7; i += 2) {
-      sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`, 16));
-    }
-    return sColorChange.join(',');
-  }
-  return sColor;
-}
-
-function labelStyle(color, hover) {
-  const textColor = mixColor('000000', color.replace('#', ''), 40);
-  const backgroundColor = mixColor('ffffff', color.replace('#', ''), 80);
-  const rgbBackgroundColor = colorRgb(backgroundColor);
-  return {
-    color: textColor,
-    backgroundColor: `rgba(${colorRgb(rgbBackgroundColor)},${hover ? 1 : 0.5})`,
-  };
-}
 
 function handleFormError(
   error: { list: Array<{ error_field: string; error_msg: string }> },
@@ -285,9 +230,6 @@ export {
   parseUserInfo,
   formatUptime,
   escapeRemove,
-  mixColor,
-  colorRgb,
-  labelStyle,
   handleFormError,
   diffText,
   base64ToSvg,