style: add worker ux

src/components/echarts/line-chart.tsx

@@ -23,7 +23,7 @@ const LineChart: React.FC<ChartProps> = (props) => {
     legendOptions,
     gridOptions,
     titleOptions,
-    showArea
+    showArea = 0.25
   } = props;
   const {
     grid,
@@ -87,7 +87,7 @@ const LineChart: React.FC<ChartProps> = (props) => {
     const data = _.map(seriesData, (item: any) => {
       const colors = genColors({
         color: item.color,
-        alpha1: 0.5,
+        alpha1: 0.25,
         alpha2: 0.1
       });
       return {

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_5jrvj6qs39.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_84hy7h371ty.js'
 });
 
 export default IconFont;

src/components/seal-form/auto-complete.tsx

@@ -1,8 +1,10 @@
 import { AutoComplete, Form, Spin } from 'antd';
 import type { AutoCompleteProps } from 'antd/lib';
+import classNames from 'classnames';
 import React, { useEffect, useRef, useState } from 'react';
 import { SealFormItemProps } from './types';
 import Wrapper from './wrapper';
+import AutoCompleteLabel from './wrapper/auto-complete-label';
 import SelectWrapper from './wrapper/select';
 
 const SealAutoComplete: React.FC<
@@ -24,6 +26,7 @@ const SealAutoComplete: React.FC<
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
+  const [_isFocus_, _setIsFocus_] = useState(false);
   const inputRef = useRef<any>(null);
   let status = '';
   if (isInFormItems) {
@@ -41,6 +44,7 @@ const SealAutoComplete: React.FC<
     if (!props.disabled && !isFocus) {
       inputRef.current?.focus?.();
       setIsFocus(true);
+      _setIsFocus_(true);
     }
   };
 
@@ -49,17 +53,20 @@ const SealAutoComplete: React.FC<
     if (trim) {
       value = value?.trim?.();
     }
+    _setIsFocus_(false);
     props.onChange?.(value, option);
   };
 
   const handleOnFocus = (e: any) => {
     setIsFocus(true);
+    _setIsFocus_(true);
     props.onFocus?.(e);
   };
 
   const handleOnBlur = (e: any) => {
     if (!props.value) {
       setIsFocus(false);
+      _setIsFocus_(false);
     }
     e.target.value = e.target.value?.trim?.();
     props.onBlur?.(e);
@@ -79,6 +86,39 @@ const SealAutoComplete: React.FC<
     return addAfter;
   };
 
+  const renderAutoCompleteLabel = () => {
+    console.log(
+      'renderAutoCompleteLabel===',
+      props.value,
+      props.showSearch,
+      _isFocus_,
+      isFocus
+    );
+    if (!props.showSearch || _isFocus_) {
+      return null;
+    }
+    let selectItem: {
+      label: React.ReactNode;
+      value: string | number;
+    } = props.options?.find((item: any) => item.value === props.value) as {
+      label: React.ReactNode;
+      value: string | number;
+    };
+
+    if (!selectItem) {
+      selectItem = { label: props.value, value: props.value };
+    }
+    return (
+      <AutoCompleteLabel
+        className={classNames({
+          disabled: props.disabled
+        })}
+      >
+        {props.labelRender ? props.labelRender(selectItem) : selectItem.label}
+      </AutoCompleteLabel>
+    );
+  };
+
   return (
     <SelectWrapper style={style}>
       <Wrapper

src/components/seal-form/wrapper/auto-complete-label.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { BGCOLOR, INPUT_INNER_PADDING } from '../config';
+
+const AutoCompleteLabel = styled.span`
+  position: absolute;
+  left: ${INPUT_INNER_PADDING}px;
+  height: 20px;
+  line-height: 20px;
+  top: 26px;
+  pointer-events: none;
+  transition: all 0.2s;
+  background-color: var(--ant-color-bg-container);
+  z-index: 10;
+  &.disabled {
+    background-color: #f5f5f5;
+  }
+  &.isfoucs-has-value {
+    // display: none;
+    z-index: -1;
+    // top: 9px;
+    // font-size: 12px;
+    // color: var(--ant-color-text);
+    // background-color: ${BGCOLOR};
+    // padding: 0 4px;
+  }
+`;
+
+export default AutoCompleteLabel;

src/components/seal-form/wrapper/select.ts

@@ -103,7 +103,7 @@ const SelectWrapper = styled.div`
       }
       &.ant-select-auto-complete {
         .ant-select-selection-search {
-          inset-inline-start: ${INPUT_INNER_PADDING}px;
+          padding-inline-start: ${INPUT_INNER_PADDING}px;
         }
       }
       &.ant-select-multiple.ant-cascader .ant-select-selection-search {

src/components/templates/card.tsx

@@ -16,7 +16,9 @@ interface CardProps {
   onClick?: () => void;
 }
 
-const CardWrapper = styled.div`
+const CardWrapper = styled.div.attrs({
+  className: 'template-card-wrapper'
+})`
   overflow: hidden;
   display: flex;
   padding: 22px;
@@ -43,37 +45,44 @@ const CardWrapper = styled.div`
     cursor: pointer;
   }
   &.disabled {
-    cursor: not-allowed;
+    cursor: default;
     opacity: 0.6;
     pointer-events: none;
-    background-color: var(--ant-color-fill-quaternary);
+    border-style: dashed;
   }
 `;
 
-const CardContent = styled.div`
+const CardContent = styled.div.attrs({
+  className: 'template-card-content'
+})`
   width: 100%;
   flex: 1;
   color: var(--ant-color-text-tertiary);
 `;
 
-const Inner = styled.div`
+const Inner = styled.div.attrs({
+  className: 'template-card-inner'
+})`
   display: flex;
   width: 100%;
-  height: 100%;
   flex-direction: column;
   justify-content: flex-start;
   gap: 8px;
   line-height: 1.5;
 `;
 
-const Icon = styled.div`
+const Icon = styled.div.attrs({
+  className: 'template-card-icon'
+})`
   display: flex;
   align-items: center;
   margin-right: 16px;
   font-size: 32px;
 `;
 
-const Header = styled.div`
+const Header = styled.div.attrs({
+  className: 'template-card-header'
+})`
   font-weight: bold;
   font-size: var(--font-size-base);
   display: flex;
@@ -110,7 +119,7 @@ const Card: React.FC<CardProps> = (props) => {
       {icon && <Icon>{icon}</Icon>}
       <Inner>
         {header && <Header>{header}</Header>}
-        <CardContent>{children}</CardContent>
+        {children && <CardContent>{children}</CardContent>}
         {footer}
       </Inner>
     </CardWrapper>