style: multiple selection tag

src/components/auto-tooltip/index.tsx

@@ -8,6 +8,7 @@ import React, {
   useRef,
   useState
 } from 'react';
+import styled from 'styled-components';
 import { TooltipOverlayScroller } from '../overlay-scroller';
 
 // type TagProps = React.ComponentProps<typeof Tag>;
@@ -22,9 +23,18 @@ interface AutoTooltipProps extends Omit<TagProps, 'title'> {
   title?: React.ReactNode;
   showTitle?: boolean;
   closable?: boolean;
+  radius?: number | string;
+  filled?: boolean;
   tooltipProps?: React.ComponentProps<typeof Tooltip>;
 }
 
+const StyledTag = styled(Tag)`
+  &.tag-filled {
+    border: none;
+    background-color: var(--ant-color-fill-secondary);
+  }
+`;
+
 const AutoTooltip: React.FC<AutoTooltipProps> = ({
   children,
   maxWidth = '100%',
@@ -33,6 +43,8 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   title,
   showTitle = false,
   tooltipProps,
+  radius = 12,
+  filled = false,
   ...tagProps
 }) => {
   const contentRef = useRef<HTMLDivElement>(null);
@@ -103,13 +115,14 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
           {children}
         </div>
       ) : (
-        <Tag
+        <StyledTag
           {...tagProps}
+          className={`${tagProps.className || ''} ${filled ? 'tag-filled' : ''}`}
           ref={contentRef}
           style={{
             ...tagStyle,
             paddingInline: tagProps.closable ? '8px 22px' : 8,
-            borderRadius: 12
+            borderRadius: radius
           }}
           closeIcon={
             tagProps.closable ? (
@@ -117,7 +130,8 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
                 style={{
                   position: 'absolute',
                   right: 8,
-                  top: 6
+                  top: '50%',
+                  transform: 'translateY(-50%)'
                 }}
               />
             ) : (
@@ -126,7 +140,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
           }
         >
           {children}
-        </Tag>
+        </StyledTag>
       )}
     </TooltipOverlayScroller>
   );

src/components/logs-viewer/virtual-log-list.tsx

@@ -11,6 +11,7 @@ import React, {
   useRef,
   useState
 } from 'react';
+import styled from 'styled-components';
 import LogsList from './logs-list';
 import LogsPagination from './logs-pagination';
 import './styles/index.less';
@@ -26,6 +27,13 @@ interface LogsViewerProps {
   enableScorllLoad?: boolean;
   diffHeight?: number;
 }
+
+const PaginationWrapper = styled.div`
+  position: absolute;
+  right: 50px;
+  top: 30px;
+`;
+
 const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   const { diffHeight, url, tail: defaultTail, enableScorllLoad = true } = props;
   const { pageSize, page, setPage, setTotalPage, totalPage } =
@@ -294,6 +302,16 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
 
   return (
     <div className="logs-viewer-wrap-w2">
+      {/* <PaginationWrapper>
+        <Pagination
+          simple={{ readOnly: true }}
+          total={totalPage}
+          current={page}
+          pageSize={pageSize}
+          showSizeChanger={false}
+          hideOnSinglePage={false}
+        ></Pagination>
+      </PaginationWrapper> */}
       <div className="wrap">
         <div>
           <LogsList

src/components/seal-form/hooks/use-select-render.tsx

@@ -1,20 +1,33 @@
 import AutoTooltip from '@/components/auto-tooltip';
+import React, { useMemo } from 'react';
 
 interface SelectRenderProps {
   maxTagWidth?: number;
+  radius?: number | string;
+  style?: React.CSSProperties;
+  filled?: boolean;
 }
 
 export default function useSelectRender(config?: SelectRenderProps) {
-  const { maxTagWidth = 100 } = config || {};
+  const { maxTagWidth = 100, radius, filled, style } = config || {};
   const TagRender = (props: any) => {
     const { label } = props;
+    const labelText = useMemo(() => {
+      if (!props.isMaxTag) {
+        return label;
+      }
+      return label.slice(0, -3);
+    }, [label, props.isMaxTag]);
     return (
       <AutoTooltip
         maxWidth={maxTagWidth}
         closable={props.closable}
         onClose={props.onClose}
+        radius={radius}
+        filled={filled}
+        style={style}
       >
-        {label}
+        {labelText}
       </AutoTooltip>
     );
   };

src/components/seal-form/seal-cascader.tsx

@@ -11,7 +11,7 @@ import SelectWrapper from './wrapper/select';
 
 const tag = (props: any) => {
   if (props.isMaxTag) {
-    return props.label;
+    return props.label?.slice(0, -3);
   }
   const parent = _.split(props.value, '__RC_CASCADER_SPLIT__')?.[0];
   return `${parent} / ${props?.label}`;
@@ -24,6 +24,7 @@ const renderTag = (props: any) => {
       closable={props.closable}
       onClose={props.onClose}
       maxWidth={240}
+      filled
     >
       {tag(props)}
     </AutoTooltip>