feat(ui): Add label card

ui/src/components/Label/index.tsx

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -27,6 +27,7 @@ import FollowingTags from './FollowingTags';
 import QueryGroup from './QueryGroup';
 import BrandUpload from './BrandUpload';
 import SchemaForm, { JSONSchema, UISchema, initFormData } from './SchemaForm';
+import Labels from './LabelsCard';
 
 export {
   Avatar,
@@ -60,5 +61,6 @@ export {
   BrandUpload,
   SchemaForm,
   initFormData,
+  Labels,
 };
 export type { EditorRef, JSONSchema, UISchema };

ui/src/index.scss

@@ -220,3 +220,11 @@ a {
   flex-grow: 1;
   height: 128px;
 }
+.badge-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  padding: 1px 0.5rem 2px;
+  height: 24px;
+}

ui/src/pages/Questions/Detail/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
 import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
 
-import { Pagination, PageTitle } from '@/components';
+import { Pagination, PageTitle, Labels } from '@/components';
 import { loggedUserInfoStore } from '@/stores';
 import { scrollTop } from '@/utils';
 import { usePageUsers } from '@/hooks';
@@ -167,6 +167,7 @@ const Index = () => {
             )}
           </Col>
           <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
+            <Labels className="mb-4" />
             <RelatedQuestions id={question?.id || ''} />
           </Col>
         </Row>

ui/src/utils/common.ts

@@ -94,6 +94,61 @@ function escapeRemove(str) {
     return arrEntities[t];
   });
 }
+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})`,
+  };
+}
 
 export {
   thousandthDivision,
@@ -103,4 +158,7 @@ export {
   parseUserInfo,
   formatUptime,
   escapeRemove,
+  mixColor,
+  colorRgb,
+  labelStyle,
 };