From 5b4c60d807222e64dfeeccaab324e6463f2da6aa Mon Sep 17 00:00:00 2001
From: mou <10402885@qq.com>
Date: Sun, 23 Jul 2023 22:27:38 +0800
Subject: [PATCH] Add Timeline Component: 1. Supports multiple display modes 2.
 Supports setting titles, subtitles, labels, icons, icon colors, and all text
 of color 3.Support dynamic display of unfinished nodes 4. Supports reverse
 display of nodes 5. Support click event, expose clickedItem and clickedIndex
 properties

---
 .../src/icons/icon-timeline-comp.svg          |    1 +
 .../lowcoder-design/src/icons/index.ts        |    1 +
 .../src/comps/comps/timelineComp/antIcon.tsx  | 1583 +++++++++++++++++
 .../comps/comps/timelineComp/timelineComp.tsx |  201 +++
 .../comps/timelineComp/timelineConstants.tsx  |   63 +
 .../comps/timelineComp/timelineUtils.tsx      |   22 +
 .../comps/controls/styleControlConstants.tsx  |   22 +
 client/packages/lowcoder/src/comps/index.tsx  |   15 +
 .../lowcoder/src/comps/uiCompRegistry.ts      |    3 +-
 .../packages/lowcoder/src/i18n/locales/en.ts  |   31 +
 .../packages/lowcoder/src/i18n/locales/zh.ts  |   31 +
 .../src/pages/editor/editorConstants.tsx      |    4 +-
 12 files changed, 1975 insertions(+), 2 deletions(-)
 create mode 100644 client/packages/lowcoder-design/src/icons/icon-timeline-comp.svg
 create mode 100644 client/packages/lowcoder/src/comps/comps/timelineComp/antIcon.tsx
 create mode 100644 client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
 create mode 100644 client/packages/lowcoder/src/comps/comps/timelineComp/timelineConstants.tsx
 create mode 100644 client/packages/lowcoder/src/comps/comps/timelineComp/timelineUtils.tsx

diff --git a/client/packages/lowcoder-design/src/icons/icon-timeline-comp.svg b/client/packages/lowcoder-design/src/icons/icon-timeline-comp.svg
new file mode 100644
index 000000000..329690d6d
--- /dev/null
+++ b/client/packages/lowcoder-design/src/icons/icon-timeline-comp.svg
@@ -0,0 +1 @@
+<svg t="1689814019529" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2710" data-spm-anchor-id="a313x.7781069.0.i26" width="200" height="200"><path d="M896 618.666667H443.733333c-10.666667 0-21.333333-4.266667-29.866666-12.8l-78.933334-78.933334c-8.533333-8.533333-8.533333-21.333333 0-29.866666l78.933334-78.933334c8.533333-8.533333 19.2-12.8 29.866666-12.8H896c12.8 0 21.333333 8.533333 21.333333 21.333334v170.666666c0 12.8-8.533333 21.333333-21.333333 21.333334z" fill="#3377ff" p-id="2711" data-spm-anchor-id="a313x.7781069.0.i22" class="selected"></path><path d="M192 128h42.666667v768H192z" fill="#CFD8DC" p-id="2712"></path><path d="M213.333333 213.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#90A4AE" p-id="2713"></path><path d="M213.333333 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#90A4AE" p-id="2714"></path><path d="M213.333333 810.666667m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#90A4AE" p-id="2715"></path><path d="M725.333333 917.333333H443.733333c-10.666667 0-21.333333-4.266667-29.866666-12.8l-78.933334-78.933333c-8.533333-8.533333-8.533333-21.333333 0-29.866667l78.933334-78.933333c8.533333-8.533333 19.2-12.8 29.866666-12.8H725.333333c12.8 0 21.333333 8.533333 21.333334 21.333333v170.666667c0 12.8-8.533333 21.333333-21.333334 21.333333z" fill="#dbdbdb" p-id="2716" data-spm-anchor-id="a313x.7781069.0.i23" class=""></path><path d="M746.666667 320H443.733333c-10.666667 0-21.333333-4.266667-29.866666-12.8l-78.933334-78.933333c-8.533333-8.533333-8.533333-21.333333 0-29.866667l78.933334-78.933333c8.533333-8.533333 19.2-12.8 29.866666-12.8H746.666667c12.8 0 21.333333 8.533333 21.333333 21.333333v170.666667c0 12.8-8.533333 21.333333-21.333333 21.333333z" fill="#dbdbdb" p-id="2717" data-spm-anchor-id="a313x.7781069.0.i24" class=""></path></svg>
\ No newline at end of file
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
index a84c01278..dd55eb897 100644
--- a/client/packages/lowcoder-design/src/icons/index.ts
+++ b/client/packages/lowcoder-design/src/icons/index.ts
@@ -287,4 +287,5 @@ export { ReactComponent as FileFolderIcon } from "icons/icon-editor-folder.svg";
 export { ReactComponent as ExpandIcon } from "icons/icon-expand.svg";
 export { ReactComponent as CompressIcon } from "icons/icon-compress.svg";
 export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg"; // Added By Aqib Mirza
+export { ReactComponent as TimeLineIcon } from "icons/icon-timeline-comp.svg"
 export { ReactComponent as LottieIcon } from "icons/icon-lottie.svg";
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/antIcon.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/antIcon.tsx
new file mode 100644
index 000000000..7879ff920
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/timelineComp/antIcon.tsx
@@ -0,0 +1,1583 @@
+import {
+  AccountBookFilled,
+  AccountBookOutlined,
+  AccountBookTwoTone,
+  AimOutlined,
+  AlertFilled,
+  AlertOutlined,
+  AlertTwoTone,
+  AlibabaOutlined,
+  AlignCenterOutlined,
+  AlignLeftOutlined,
+  AlignRightOutlined,
+  AlipayCircleFilled,
+  AlipayCircleOutlined,
+  AlipayOutlined,
+  AlipaySquareFilled,
+  AliwangwangFilled,
+  AliwangwangOutlined,
+  AliyunOutlined,
+  AmazonCircleFilled,
+  AmazonOutlined,
+  AmazonSquareFilled,
+  AndroidFilled,
+  AndroidOutlined,
+  AntCloudOutlined,
+  AntDesignOutlined,
+  ApartmentOutlined,
+  ApiFilled,
+  ApiOutlined,
+  ApiTwoTone,
+  AppleFilled,
+  AppleOutlined,
+  AppstoreAddOutlined,
+  AppstoreFilled,
+  AppstoreOutlined,
+  AppstoreTwoTone,
+  AreaChartOutlined,
+  ArrowDownOutlined,
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+  ArrowUpOutlined,
+  ArrowsAltOutlined,
+  AudioFilled,
+  AudioMutedOutlined,
+  AudioOutlined,
+  AudioTwoTone,
+  AuditOutlined,
+  BackwardFilled,
+  BackwardOutlined,
+  BankFilled,
+  BankOutlined,
+  BankTwoTone,
+  BarChartOutlined,
+  BarcodeOutlined,
+  BarsOutlined,
+  BehanceCircleFilled,
+  BehanceOutlined,
+  BehanceSquareFilled,
+  BehanceSquareOutlined,
+  BellFilled,
+  BellOutlined,
+  BellTwoTone,
+  BgColorsOutlined,
+  BlockOutlined,
+  BoldOutlined,
+  BookFilled,
+  BookOutlined,
+  BookTwoTone,
+  BorderBottomOutlined,
+  BorderHorizontalOutlined,
+  BorderInnerOutlined,
+  BorderLeftOutlined,
+  BorderOuterOutlined,
+  BorderOutlined,
+  BorderRightOutlined,
+  BorderTopOutlined,
+  BorderVerticleOutlined,
+  BorderlessTableOutlined,
+  BoxPlotFilled,
+  BoxPlotOutlined,
+  BoxPlotTwoTone,
+  BranchesOutlined,
+  BugFilled,
+  BugOutlined,
+  BugTwoTone,
+  BuildFilled,
+  BuildOutlined,
+  BuildTwoTone,
+  BulbFilled,
+  BulbOutlined,
+  BulbTwoTone,
+  CalculatorFilled,
+  CalculatorOutlined,
+  CalculatorTwoTone,
+  CalendarFilled,
+  CalendarOutlined,
+  CalendarTwoTone,
+  CameraFilled,
+  CameraOutlined,
+  CameraTwoTone,
+  CarFilled,
+  CarOutlined,
+  CarTwoTone,
+  CaretDownFilled,
+  CaretDownOutlined,
+  CaretLeftFilled,
+  CaretLeftOutlined,
+  CaretRightFilled,
+  CaretRightOutlined,
+  CaretUpFilled,
+  CaretUpOutlined,
+  CarryOutFilled,
+  CarryOutOutlined,
+  CarryOutTwoTone,
+  CheckCircleFilled,
+  CheckCircleOutlined,
+  CheckCircleTwoTone,
+  CheckOutlined,
+  CheckSquareFilled,
+  CheckSquareOutlined,
+  CheckSquareTwoTone,
+  ChromeFilled,
+  ChromeOutlined,
+  CiCircleFilled,
+  CiCircleOutlined,
+  CiCircleTwoTone,
+  CiOutlined,
+  CiTwoTone,
+  ClearOutlined,
+  ClockCircleFilled,
+  ClockCircleOutlined,
+  ClockCircleTwoTone,
+  CloseCircleFilled,
+  CloseCircleOutlined,
+  CloseCircleTwoTone,
+  CloseOutlined,
+  CloseSquareFilled,
+  CloseSquareOutlined,
+  CloseSquareTwoTone,
+  CloudDownloadOutlined,
+  CloudFilled,
+  CloudOutlined,
+  CloudServerOutlined,
+  CloudSyncOutlined,
+  CloudTwoTone,
+  CloudUploadOutlined,
+  ClusterOutlined,
+  CodeFilled,
+  CodeOutlined,
+  CodeSandboxCircleFilled,
+  CodeSandboxOutlined,
+  CodeSandboxSquareFilled,
+  CodeTwoTone,
+  CodepenCircleFilled,
+  CodepenCircleOutlined,
+  CodepenOutlined,
+  CodepenSquareFilled,
+  CoffeeOutlined,
+  ColumnHeightOutlined,
+  ColumnWidthOutlined,
+  CommentOutlined,
+  CompassFilled,
+  CompassOutlined,
+  CompassTwoTone,
+  CompressOutlined,
+  ConsoleSqlOutlined,
+  ContactsFilled,
+  ContactsOutlined,
+  ContactsTwoTone,
+  ContainerFilled,
+  ContainerOutlined,
+  ContainerTwoTone,
+  ControlFilled,
+  ControlOutlined,
+  ControlTwoTone,
+  CopyFilled,
+  CopyOutlined,
+  CopyTwoTone,
+  CopyrightCircleFilled,
+  CopyrightCircleOutlined,
+  CopyrightCircleTwoTone,
+  CopyrightOutlined,
+  CopyrightTwoTone,
+  CreditCardFilled,
+  CreditCardOutlined,
+  CreditCardTwoTone,
+  CrownFilled,
+  CrownOutlined,
+  CrownTwoTone,
+  CustomerServiceFilled,
+  CustomerServiceOutlined,
+  CustomerServiceTwoTone,
+  DashOutlined,
+  DashboardFilled,
+  DashboardOutlined,
+  DashboardTwoTone,
+  DatabaseFilled,
+  DatabaseOutlined,
+  DatabaseTwoTone,
+  DeleteColumnOutlined,
+  DeleteFilled,
+  DeleteOutlined,
+  DeleteRowOutlined,
+  DeleteTwoTone,
+  DeliveredProcedureOutlined,
+  DeploymentUnitOutlined,
+  DesktopOutlined,
+  DiffFilled,
+  DiffOutlined,
+  DiffTwoTone,
+  DingdingOutlined,
+  DingtalkCircleFilled,
+  DingtalkOutlined,
+  DingtalkSquareFilled,
+  DisconnectOutlined,
+  DislikeFilled,
+  DislikeOutlined,
+  DislikeTwoTone,
+  DollarCircleFilled,
+  DollarCircleOutlined,
+  DollarCircleTwoTone,
+  DollarOutlined,
+  DollarTwoTone,
+  DotChartOutlined,
+  DoubleLeftOutlined,
+  DoubleRightOutlined,
+  DownCircleFilled,
+  DownCircleOutlined,
+  DownCircleTwoTone,
+  DownOutlined,
+  DownSquareFilled,
+  DownSquareOutlined,
+  DownSquareTwoTone,
+  DownloadOutlined,
+  DragOutlined,
+  DribbbleCircleFilled,
+  DribbbleOutlined,
+  DribbbleSquareFilled,
+  DribbbleSquareOutlined,
+  DropboxCircleFilled,
+  DropboxOutlined,
+  DropboxSquareFilled,
+  EditFilled,
+  EditOutlined,
+  EditTwoTone,
+  EllipsisOutlined,
+  EnterOutlined,
+  EnvironmentFilled,
+  EnvironmentOutlined,
+  EnvironmentTwoTone,
+  EuroCircleFilled,
+  EuroCircleOutlined,
+  EuroCircleTwoTone,
+  EuroOutlined,
+  EuroTwoTone,
+  ExceptionOutlined,
+  ExclamationCircleFilled,
+  ExclamationCircleOutlined,
+  ExclamationCircleTwoTone,
+  ExclamationOutlined,
+  ExpandAltOutlined,
+  ExpandOutlined,
+  ExperimentFilled,
+  ExperimentOutlined,
+  ExperimentTwoTone,
+  ExportOutlined,
+  EyeFilled,
+  EyeInvisibleFilled,
+  EyeInvisibleOutlined,
+  EyeInvisibleTwoTone,
+  EyeOutlined,
+  EyeTwoTone,
+  FacebookFilled,
+  FacebookOutlined,
+  FallOutlined,
+  FastBackwardFilled,
+  FastBackwardOutlined,
+  FastForwardFilled,
+  FastForwardOutlined,
+  FieldBinaryOutlined,
+  FieldNumberOutlined,
+  FieldStringOutlined,
+  FieldTimeOutlined,
+  FileAddFilled,
+  FileAddOutlined,
+  FileAddTwoTone,
+  FileDoneOutlined,
+  FileExcelFilled,
+  FileExcelOutlined,
+  FileExcelTwoTone,
+  FileExclamationFilled,
+  FileExclamationOutlined,
+  FileExclamationTwoTone,
+  FileFilled,
+  FileGifOutlined,
+  FileImageFilled,
+  FileImageOutlined,
+  FileImageTwoTone,
+  FileJpgOutlined,
+  FileMarkdownFilled,
+  FileMarkdownOutlined,
+  FileMarkdownTwoTone,
+  FileOutlined,
+  FilePdfFilled,
+  FilePdfOutlined,
+  FilePdfTwoTone,
+  FilePptFilled,
+  FilePptOutlined,
+  FilePptTwoTone,
+  FileProtectOutlined,
+  FileSearchOutlined,
+  FileSyncOutlined,
+  FileTextFilled,
+  FileTextOutlined,
+  FileTextTwoTone,
+  FileTwoTone,
+  FileUnknownFilled,
+  FileUnknownOutlined,
+  FileUnknownTwoTone,
+  FileWordFilled,
+  FileWordOutlined,
+  FileWordTwoTone,
+  FileZipFilled,
+  FileZipOutlined,
+  FileZipTwoTone,
+  FilterFilled,
+  FilterOutlined,
+  FilterTwoTone,
+  FireFilled,
+  FireOutlined,
+  FireTwoTone,
+  FlagFilled,
+  FlagOutlined,
+  FlagTwoTone,
+  FolderAddFilled,
+  FolderAddOutlined,
+  FolderAddTwoTone,
+  FolderFilled,
+  FolderOpenFilled,
+  FolderOpenOutlined,
+  FolderOpenTwoTone,
+  FolderOutlined,
+  FolderTwoTone,
+  FolderViewOutlined,
+  FontColorsOutlined,
+  FontSizeOutlined,
+  ForkOutlined,
+  FormOutlined,
+  FormatPainterFilled,
+  FormatPainterOutlined,
+  ForwardFilled,
+  ForwardOutlined,
+  FrownFilled,
+  FrownOutlined,
+  FrownTwoTone,
+  FullscreenExitOutlined,
+  FullscreenOutlined,
+  FunctionOutlined,
+  FundFilled,
+  FundOutlined,
+  FundProjectionScreenOutlined,
+  FundTwoTone,
+  FundViewOutlined,
+  FunnelPlotFilled,
+  FunnelPlotOutlined,
+  FunnelPlotTwoTone,
+  GatewayOutlined,
+  GifOutlined,
+  GiftFilled,
+  GiftOutlined,
+  GiftTwoTone,
+  GithubFilled,
+  GithubOutlined,
+  GitlabFilled,
+  GitlabOutlined,
+  GlobalOutlined,
+  GoldFilled,
+  GoldOutlined,
+  GoldTwoTone,
+  GoldenFilled,
+  GoogleCircleFilled,
+  GoogleOutlined,
+  GooglePlusCircleFilled,
+  GooglePlusOutlined,
+  GooglePlusSquareFilled,
+  GoogleSquareFilled,
+  GroupOutlined,
+  HddFilled,
+  HddOutlined,
+  HddTwoTone,
+  HeartFilled,
+  HeartOutlined,
+  HeartTwoTone,
+  HeatMapOutlined,
+  HighlightFilled,
+  HighlightOutlined,
+  HighlightTwoTone,
+  HistoryOutlined,
+  HolderOutlined,
+  HomeFilled,
+  HomeOutlined,
+  HomeTwoTone,
+  HourglassFilled,
+  HourglassOutlined,
+  HourglassTwoTone,
+  Html5Filled,
+  Html5Outlined,
+  Html5TwoTone,
+  IdcardFilled,
+  IdcardOutlined,
+  IdcardTwoTone,
+  IeCircleFilled,
+  IeOutlined,
+  IeSquareFilled,
+  ImportOutlined,
+  InboxOutlined,
+  InfoCircleFilled,
+  InfoCircleOutlined,
+  InfoCircleTwoTone,
+  InfoOutlined,
+  InsertRowAboveOutlined,
+  InsertRowBelowOutlined,
+  InsertRowLeftOutlined,
+  InsertRowRightOutlined,
+  InstagramFilled,
+  InstagramOutlined,
+  InsuranceFilled,
+  InsuranceOutlined,
+  InsuranceTwoTone,
+  InteractionFilled,
+  InteractionOutlined,
+  InteractionTwoTone,
+  IssuesCloseOutlined,
+  ItalicOutlined,
+  KeyOutlined,
+  LaptopOutlined,
+  LayoutFilled,
+  LayoutOutlined,
+  LayoutTwoTone,
+  LeftCircleFilled,
+  LeftCircleOutlined,
+  LeftCircleTwoTone,
+  LeftOutlined,
+  LeftSquareFilled,
+  LeftSquareOutlined,
+  LeftSquareTwoTone,
+  LikeFilled,
+  LikeOutlined,
+  LikeTwoTone,
+  LineChartOutlined,
+  LineHeightOutlined,
+  LineOutlined,
+  LinkOutlined,
+  LinkedinFilled,
+  LinkedinOutlined,
+  Loading3QuartersOutlined,
+  LoadingOutlined,
+  LockFilled,
+  LockOutlined,
+  LockTwoTone,
+  LoginOutlined,
+  LogoutOutlined,
+  MacCommandFilled,
+  MacCommandOutlined,
+  MailFilled,
+  MailOutlined,
+  MailTwoTone,
+  ManOutlined,
+  MedicineBoxFilled,
+  MedicineBoxOutlined,
+  MedicineBoxTwoTone,
+  MediumCircleFilled,
+  MediumOutlined,
+  MediumSquareFilled,
+  MediumWorkmarkOutlined,
+  MehFilled,
+  MehOutlined,
+  MehTwoTone,
+  MenuFoldOutlined,
+  MenuOutlined,
+  MenuUnfoldOutlined,
+  MergeCellsOutlined,
+  MessageFilled,
+  MessageOutlined,
+  MessageTwoTone,
+  MinusCircleFilled,
+  MinusCircleOutlined,
+  MinusCircleTwoTone,
+  MinusOutlined,
+  MinusSquareFilled,
+  MinusSquareOutlined,
+  MinusSquareTwoTone,
+  MobileFilled,
+  MobileOutlined,
+  MobileTwoTone,
+  MoneyCollectFilled,
+  MoneyCollectOutlined,
+  MoneyCollectTwoTone,
+  MonitorOutlined,
+  MoreOutlined,
+  NodeCollapseOutlined,
+  NodeExpandOutlined,
+  NodeIndexOutlined,
+  NotificationFilled,
+  NotificationOutlined,
+  NotificationTwoTone,
+  NumberOutlined,
+  OneToOneOutlined,
+  OrderedListOutlined,
+  PaperClipOutlined,
+  PartitionOutlined,
+  PauseCircleFilled,
+  PauseCircleOutlined,
+  PauseCircleTwoTone,
+  PauseOutlined,
+  PayCircleFilled,
+  PayCircleOutlined,
+  PercentageOutlined,
+  PhoneFilled,
+  PhoneOutlined,
+  PhoneTwoTone,
+  PicCenterOutlined,
+  PicLeftOutlined,
+  PicRightOutlined,
+  PictureFilled,
+  PictureOutlined,
+  PictureTwoTone,
+  PieChartFilled,
+  PieChartOutlined,
+  PieChartTwoTone,
+  PlayCircleFilled,
+  PlayCircleOutlined,
+  PlayCircleTwoTone,
+  PlaySquareFilled,
+  PlaySquareOutlined,
+  PlaySquareTwoTone,
+  PlusCircleFilled,
+  PlusCircleOutlined,
+  PlusCircleTwoTone,
+  PlusOutlined,
+  PlusSquareFilled,
+  PlusSquareOutlined,
+  PlusSquareTwoTone,
+  PoundCircleFilled,
+  PoundCircleOutlined,
+  PoundCircleTwoTone,
+  PoundOutlined,
+  PoweroffOutlined,
+  PrinterFilled,
+  PrinterOutlined,
+  PrinterTwoTone,
+  ProfileFilled,
+  ProfileOutlined,
+  ProfileTwoTone,
+  ProjectFilled,
+  ProjectOutlined,
+  ProjectTwoTone,
+  PropertySafetyFilled,
+  PropertySafetyOutlined,
+  PropertySafetyTwoTone,
+  PullRequestOutlined,
+  PushpinFilled,
+  PushpinOutlined,
+  PushpinTwoTone,
+  QqCircleFilled,
+  QqOutlined,
+  QqSquareFilled,
+  QrcodeOutlined,
+  QuestionCircleFilled,
+  QuestionCircleOutlined,
+  QuestionCircleTwoTone,
+  QuestionOutlined,
+  RadarChartOutlined,
+  RadiusBottomleftOutlined,
+  RadiusBottomrightOutlined,
+  RadiusSettingOutlined,
+  RadiusUpleftOutlined,
+  RadiusUprightOutlined,
+  ReadFilled,
+  ReadOutlined,
+  ReconciliationFilled,
+  ReconciliationOutlined,
+  ReconciliationTwoTone,
+  RedEnvelopeFilled,
+  RedEnvelopeOutlined,
+  RedEnvelopeTwoTone,
+  RedditCircleFilled,
+  RedditOutlined,
+  RedditSquareFilled,
+  RedoOutlined,
+  ReloadOutlined,
+  RestFilled,
+  RestOutlined,
+  RestTwoTone,
+  RetweetOutlined,
+  RightCircleFilled,
+  RightCircleOutlined,
+  RightCircleTwoTone,
+  RightOutlined,
+  RightSquareFilled,
+  RightSquareOutlined,
+  RightSquareTwoTone,
+  RiseOutlined,
+  RobotFilled,
+  RobotOutlined,
+  RocketFilled,
+  RocketOutlined,
+  RocketTwoTone,
+  RollbackOutlined,
+  RotateLeftOutlined,
+  RotateRightOutlined,
+  SafetyCertificateFilled,
+  SafetyCertificateOutlined,
+  SafetyCertificateTwoTone,
+  SafetyOutlined,
+  SaveFilled,
+  SaveOutlined,
+  SaveTwoTone,
+  ScanOutlined,
+  ScheduleFilled,
+  ScheduleOutlined,
+  ScheduleTwoTone,
+  ScissorOutlined,
+  SearchOutlined,
+  SecurityScanFilled,
+  SecurityScanOutlined,
+  SecurityScanTwoTone,
+  SelectOutlined,
+  SendOutlined,
+  SettingFilled,
+  SettingOutlined,
+  SettingTwoTone,
+  ShakeOutlined,
+  ShareAltOutlined,
+  ShopFilled,
+  ShopOutlined,
+  ShopTwoTone,
+  ShoppingCartOutlined,
+  ShoppingFilled,
+  ShoppingOutlined,
+  ShoppingTwoTone,
+  ShrinkOutlined,
+  SignalFilled,
+  SisternodeOutlined,
+  SketchCircleFilled,
+  SketchOutlined,
+  SketchSquareFilled,
+  SkinFilled,
+  SkinOutlined,
+  SkinTwoTone,
+  SkypeFilled,
+  SkypeOutlined,
+  SlackCircleFilled,
+  SlackOutlined,
+  SlackSquareFilled,
+  SlackSquareOutlined,
+  SlidersFilled,
+  SlidersOutlined,
+  SlidersTwoTone,
+  SmallDashOutlined,
+  SmileFilled,
+  SmileOutlined,
+  SmileTwoTone,
+  SnippetsFilled,
+  SnippetsOutlined,
+  SnippetsTwoTone,
+  SolutionOutlined,
+  SortAscendingOutlined,
+  SortDescendingOutlined,
+  SoundFilled,
+  SoundOutlined,
+  SoundTwoTone,
+  SplitCellsOutlined,
+  StarFilled,
+  StarOutlined,
+  StarTwoTone,
+  StepBackwardFilled,
+  StepBackwardOutlined,
+  StepForwardFilled,
+  StepForwardOutlined,
+  StockOutlined,
+  StopFilled,
+  StopOutlined,
+  StopTwoTone,
+  StrikethroughOutlined,
+  SubnodeOutlined,
+  SwapLeftOutlined,
+  SwapOutlined,
+  SwapRightOutlined,
+  SwitcherFilled,
+  SwitcherOutlined,
+  SwitcherTwoTone,
+  SyncOutlined,
+  TableOutlined,
+  TabletFilled,
+  TabletOutlined,
+  TabletTwoTone,
+  TagFilled,
+  TagOutlined,
+  TagTwoTone,
+  TagsFilled,
+  TagsOutlined,
+  TagsTwoTone,
+  TaobaoCircleFilled,
+  TaobaoCircleOutlined,
+  TaobaoOutlined,
+  TaobaoSquareFilled,
+  TeamOutlined,
+  ThunderboltFilled,
+  ThunderboltOutlined,
+  ThunderboltTwoTone,
+  ToTopOutlined,
+  ToolFilled,
+  ToolOutlined,
+  ToolTwoTone,
+  TrademarkCircleFilled,
+  TrademarkCircleOutlined,
+  TrademarkCircleTwoTone,
+  TrademarkOutlined,
+  TransactionOutlined,
+  TranslationOutlined,
+  TrophyFilled,
+  TrophyOutlined,
+  TrophyTwoTone,
+  TwitterCircleFilled,
+  TwitterOutlined,
+  TwitterSquareFilled,
+  UnderlineOutlined,
+  UndoOutlined,
+  UngroupOutlined,
+  UnlockFilled,
+  UnlockOutlined,
+  UnlockTwoTone,
+  UnorderedListOutlined,
+  UpCircleFilled,
+  UpCircleOutlined,
+  UpCircleTwoTone,
+  UpOutlined,
+  UpSquareFilled,
+  UpSquareOutlined,
+  UpSquareTwoTone,
+  UploadOutlined,
+  UsbFilled,
+  UsbOutlined,
+  UsbTwoTone,
+  UserAddOutlined,
+  UserDeleteOutlined,
+  UserOutlined,
+  UserSwitchOutlined,
+  UsergroupAddOutlined,
+  UsergroupDeleteOutlined,
+  VerifiedOutlined,
+  VerticalAlignBottomOutlined,
+  VerticalAlignMiddleOutlined,
+  VerticalAlignTopOutlined,
+  VerticalLeftOutlined,
+  VerticalRightOutlined,
+  VideoCameraAddOutlined,
+  VideoCameraFilled,
+  VideoCameraOutlined,
+  VideoCameraTwoTone,
+  WalletFilled,
+  WalletOutlined,
+  WalletTwoTone,
+  WarningFilled,
+  WarningOutlined,
+  WarningTwoTone,
+  WechatFilled,
+  WechatOutlined,
+  WeiboCircleFilled,
+  WeiboCircleOutlined,
+  WeiboOutlined,
+  WeiboSquareFilled,
+  WeiboSquareOutlined,
+  WhatsAppOutlined,
+  WifiOutlined,
+  WindowsFilled,
+  WindowsOutlined,
+  WomanOutlined,
+  YahooFilled,
+  YahooOutlined,
+  YoutubeFilled,
+  YoutubeOutlined,
+  YuqueFilled,
+  YuqueOutlined,
+  ZhihuCircleFilled,
+  ZhihuOutlined,
+  ZhihuSquareFilled,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+} from "@ant-design/icons";
+
+export const ANTDICON = {
+  accountbookfilled: <AccountBookFilled />,
+  accountbookoutlined: <AccountBookOutlined />,
+  accountbooktwotone: <AccountBookTwoTone />,
+  aimoutlined: <AimOutlined />,
+  alertfilled: <AlertFilled />,
+  alertoutlined: <AlertOutlined />,
+  alerttwotone: <AlertTwoTone />,
+  alibabaoutlined: <AlibabaOutlined />,
+  aligncenteroutlined: <AlignCenterOutlined />,
+  alignleftoutlined: <AlignLeftOutlined />,
+  alignrightoutlined: <AlignRightOutlined />,
+  alipaycirclefilled: <AlipayCircleFilled />,
+  alipaycircleoutlined: <AlipayCircleOutlined />,
+  alipayoutlined: <AlipayOutlined />,
+  alipaysquarefilled: <AlipaySquareFilled />,
+  aliwangwangfilled: <AliwangwangFilled />,
+  aliwangwangoutlined: <AliwangwangOutlined />,
+  aliyunoutlined: <AliyunOutlined />,
+  amazoncirclefilled: <AmazonCircleFilled />,
+  amazonoutlined: <AmazonOutlined />,
+  amazonsquarefilled: <AmazonSquareFilled />,
+  androidfilled: <AndroidFilled />,
+  androidoutlined: <AndroidOutlined />,
+  antcloudoutlined: <AntCloudOutlined />,
+  antdesignoutlined: <AntDesignOutlined />,
+  apartmentoutlined: <ApartmentOutlined />,
+  apifilled: <ApiFilled />,
+  apioutlined: <ApiOutlined />,
+  apitwotone: <ApiTwoTone />,
+  applefilled: <AppleFilled />,
+  appleoutlined: <AppleOutlined />,
+  appstoreaddoutlined: <AppstoreAddOutlined />,
+  appstorefilled: <AppstoreFilled />,
+  appstoreoutlined: <AppstoreOutlined />,
+  appstoretwotone: <AppstoreTwoTone />,
+  areachartoutlined: <AreaChartOutlined />,
+  arrowdownoutlined: <ArrowDownOutlined />,
+  arrowleftoutlined: <ArrowLeftOutlined />,
+  arrowrightoutlined: <ArrowRightOutlined />,
+  arrowupoutlined: <ArrowUpOutlined />,
+  arrowsaltoutlined: <ArrowsAltOutlined />,
+  audiofilled: <AudioFilled />,
+  audiomutedoutlined: <AudioMutedOutlined />,
+  audiooutlined: <AudioOutlined />,
+  audiotwotone: <AudioTwoTone />,
+  auditoutlined: <AuditOutlined />,
+  backwardfilled: <BackwardFilled />,
+  backwardoutlined: <BackwardOutlined />,
+  bankfilled: <BankFilled />,
+  bankoutlined: <BankOutlined />,
+  banktwotone: <BankTwoTone />,
+  barchartoutlined: <BarChartOutlined />,
+  barcodeoutlined: <BarcodeOutlined />,
+  barsoutlined: <BarsOutlined />,
+  behancecirclefilled: <BehanceCircleFilled />,
+  behanceoutlined: <BehanceOutlined />,
+  behancesquarefilled: <BehanceSquareFilled />,
+  behancesquareoutlined: <BehanceSquareOutlined />,
+  bellfilled: <BellFilled />,
+  belloutlined: <BellOutlined />,
+  belltwotone: <BellTwoTone />,
+  bgcolorsoutlined: <BgColorsOutlined />,
+  blockoutlined: <BlockOutlined />,
+  boldoutlined: <BoldOutlined />,
+  bookfilled: <BookFilled />,
+  bookoutlined: <BookOutlined />,
+  booktwotone: <BookTwoTone />,
+  borderbottomoutlined: <BorderBottomOutlined />,
+  borderhorizontaloutlined: <BorderHorizontalOutlined />,
+  borderinneroutlined: <BorderInnerOutlined />,
+  borderleftoutlined: <BorderLeftOutlined />,
+  borderouteroutlined: <BorderOuterOutlined />,
+  borderoutlined: <BorderOutlined />,
+  borderrightoutlined: <BorderRightOutlined />,
+  bordertopoutlined: <BorderTopOutlined />,
+  borderverticleoutlined: <BorderVerticleOutlined />,
+  borderlesstableoutlined: <BorderlessTableOutlined />,
+  boxplotfilled: <BoxPlotFilled />,
+  boxplotoutlined: <BoxPlotOutlined />,
+  boxplottwotone: <BoxPlotTwoTone />,
+  branchesoutlined: <BranchesOutlined />,
+  bugfilled: <BugFilled />,
+  bugoutlined: <BugOutlined />,
+  bugtwotone: <BugTwoTone />,
+  buildfilled: <BuildFilled />,
+  buildoutlined: <BuildOutlined />,
+  buildtwotone: <BuildTwoTone />,
+  bulbfilled: <BulbFilled />,
+  bulboutlined: <BulbOutlined />,
+  bulbtwotone: <BulbTwoTone />,
+  calculatorfilled: <CalculatorFilled />,
+  calculatoroutlined: <CalculatorOutlined />,
+  calculatortwotone: <CalculatorTwoTone />,
+  calendarfilled: <CalendarFilled />,
+  calendaroutlined: <CalendarOutlined />,
+  calendartwotone: <CalendarTwoTone />,
+  camerafilled: <CameraFilled />,
+  cameraoutlined: <CameraOutlined />,
+  cameratwotone: <CameraTwoTone />,
+  carfilled: <CarFilled />,
+  caroutlined: <CarOutlined />,
+  cartwotone: <CarTwoTone />,
+  caretdownfilled: <CaretDownFilled />,
+  caretdownoutlined: <CaretDownOutlined />,
+  caretleftfilled: <CaretLeftFilled />,
+  caretleftoutlined: <CaretLeftOutlined />,
+  caretrightfilled: <CaretRightFilled />,
+  caretrightoutlined: <CaretRightOutlined />,
+  caretupfilled: <CaretUpFilled />,
+  caretupoutlined: <CaretUpOutlined />,
+  carryoutfilled: <CarryOutFilled />,
+  carryoutoutlined: <CarryOutOutlined />,
+  carryouttwotone: <CarryOutTwoTone />,
+  checkcirclefilled: <CheckCircleFilled />,
+  checkcircleoutlined: <CheckCircleOutlined />,
+  checkcircletwotone: <CheckCircleTwoTone />,
+  checkoutlined: <CheckOutlined />,
+  checksquarefilled: <CheckSquareFilled />,
+  checksquareoutlined: <CheckSquareOutlined />,
+  checksquaretwotone: <CheckSquareTwoTone />,
+  chromefilled: <ChromeFilled />,
+  chromeoutlined: <ChromeOutlined />,
+  cicirclefilled: <CiCircleFilled />,
+  cicircleoutlined: <CiCircleOutlined />,
+  cicircletwotone: <CiCircleTwoTone />,
+  cioutlined: <CiOutlined />,
+  citwotone: <CiTwoTone />,
+  clearoutlined: <ClearOutlined />,
+  clockcirclefilled: <ClockCircleFilled />,
+  clockcircleoutlined: <ClockCircleOutlined />,
+  clockcircletwotone: <ClockCircleTwoTone />,
+  closecirclefilled: <CloseCircleFilled />,
+  closecircleoutlined: <CloseCircleOutlined />,
+  closecircletwotone: <CloseCircleTwoTone />,
+  closeoutlined: <CloseOutlined />,
+  closesquarefilled: <CloseSquareFilled />,
+  closesquareoutlined: <CloseSquareOutlined />,
+  closesquaretwotone: <CloseSquareTwoTone />,
+  clouddownloadoutlined: <CloudDownloadOutlined />,
+  cloudfilled: <CloudFilled />,
+  cloudoutlined: <CloudOutlined />,
+  cloudserveroutlined: <CloudServerOutlined />,
+  cloudsyncoutlined: <CloudSyncOutlined />,
+  cloudtwotone: <CloudTwoTone />,
+  clouduploadoutlined: <CloudUploadOutlined />,
+  clusteroutlined: <ClusterOutlined />,
+  codefilled: <CodeFilled />,
+  codeoutlined: <CodeOutlined />,
+  codesandboxcirclefilled: <CodeSandboxCircleFilled />,
+  codesandboxoutlined: <CodeSandboxOutlined />,
+  codesandboxsquarefilled: <CodeSandboxSquareFilled />,
+  codetwotone: <CodeTwoTone />,
+  codepencirclefilled: <CodepenCircleFilled />,
+  codepencircleoutlined: <CodepenCircleOutlined />,
+  codepenoutlined: <CodepenOutlined />,
+  codepensquarefilled: <CodepenSquareFilled />,
+  coffeeoutlined: <CoffeeOutlined />,
+  columnheightoutlined: <ColumnHeightOutlined />,
+  columnwidthoutlined: <ColumnWidthOutlined />,
+  commentoutlined: <CommentOutlined />,
+  compassfilled: <CompassFilled />,
+  compassoutlined: <CompassOutlined />,
+  compasstwotone: <CompassTwoTone />,
+  compressoutlined: <CompressOutlined />,
+  consolesqloutlined: <ConsoleSqlOutlined />,
+  contactsfilled: <ContactsFilled />,
+  contactsoutlined: <ContactsOutlined />,
+  contactstwotone: <ContactsTwoTone />,
+  containerfilled: <ContainerFilled />,
+  containeroutlined: <ContainerOutlined />,
+  containertwotone: <ContainerTwoTone />,
+  controlfilled: <ControlFilled />,
+  controloutlined: <ControlOutlined />,
+  controltwotone: <ControlTwoTone />,
+  copyfilled: <CopyFilled />,
+  copyoutlined: <CopyOutlined />,
+  copytwotone: <CopyTwoTone />,
+  copyrightcirclefilled: <CopyrightCircleFilled />,
+  copyrightcircleoutlined: <CopyrightCircleOutlined />,
+  copyrightcircletwotone: <CopyrightCircleTwoTone />,
+  copyrightoutlined: <CopyrightOutlined />,
+  copyrighttwotone: <CopyrightTwoTone />,
+  creditcardfilled: <CreditCardFilled />,
+  creditcardoutlined: <CreditCardOutlined />,
+  creditcardtwotone: <CreditCardTwoTone />,
+  crownfilled: <CrownFilled />,
+  crownoutlined: <CrownOutlined />,
+  crowntwotone: <CrownTwoTone />,
+  customerservicefilled: <CustomerServiceFilled />,
+  customerserviceoutlined: <CustomerServiceOutlined />,
+  customerservicetwotone: <CustomerServiceTwoTone />,
+  dashoutlined: <DashOutlined />,
+  dashboardfilled: <DashboardFilled />,
+  dashboardoutlined: <DashboardOutlined />,
+  dashboardtwotone: <DashboardTwoTone />,
+  databasefilled: <DatabaseFilled />,
+  databaseoutlined: <DatabaseOutlined />,
+  databasetwotone: <DatabaseTwoTone />,
+  deletecolumnoutlined: <DeleteColumnOutlined />,
+  deletefilled: <DeleteFilled />,
+  deleteoutlined: <DeleteOutlined />,
+  deleterowoutlined: <DeleteRowOutlined />,
+  deletetwotone: <DeleteTwoTone />,
+  deliveredprocedureoutlined: <DeliveredProcedureOutlined />,
+  deploymentunitoutlined: <DeploymentUnitOutlined />,
+  desktopoutlined: <DesktopOutlined />,
+  difffilled: <DiffFilled />,
+  diffoutlined: <DiffOutlined />,
+  difftwotone: <DiffTwoTone />,
+  dingdingoutlined: <DingdingOutlined />,
+  dingtalkcirclefilled: <DingtalkCircleFilled />,
+  dingtalkoutlined: <DingtalkOutlined />,
+  dingtalksquarefilled: <DingtalkSquareFilled />,
+  disconnectoutlined: <DisconnectOutlined />,
+  dislikefilled: <DislikeFilled />,
+  dislikeoutlined: <DislikeOutlined />,
+  disliketwotone: <DislikeTwoTone />,
+  dollarcirclefilled: <DollarCircleFilled />,
+  dollarcircleoutlined: <DollarCircleOutlined />,
+  dollarcircletwotone: <DollarCircleTwoTone />,
+  dollaroutlined: <DollarOutlined />,
+  dollartwotone: <DollarTwoTone />,
+  dotchartoutlined: <DotChartOutlined />,
+  doubleleftoutlined: <DoubleLeftOutlined />,
+  doublerightoutlined: <DoubleRightOutlined />,
+  downcirclefilled: <DownCircleFilled />,
+  downcircleoutlined: <DownCircleOutlined />,
+  downcircletwotone: <DownCircleTwoTone />,
+  downoutlined: <DownOutlined />,
+  downsquarefilled: <DownSquareFilled />,
+  downsquareoutlined: <DownSquareOutlined />,
+  downsquaretwotone: <DownSquareTwoTone />,
+  downloadoutlined: <DownloadOutlined />,
+  dragoutlined: <DragOutlined />,
+  dribbblecirclefilled: <DribbbleCircleFilled />,
+  dribbbleoutlined: <DribbbleOutlined />,
+  dribbblesquarefilled: <DribbbleSquareFilled />,
+  dribbblesquareoutlined: <DribbbleSquareOutlined />,
+  dropboxcirclefilled: <DropboxCircleFilled />,
+  dropboxoutlined: <DropboxOutlined />,
+  dropboxsquarefilled: <DropboxSquareFilled />,
+  editfilled: <EditFilled />,
+  editoutlined: <EditOutlined />,
+  edittwotone: <EditTwoTone />,
+  ellipsisoutlined: <EllipsisOutlined />,
+  enteroutlined: <EnterOutlined />,
+  environmentfilled: <EnvironmentFilled />,
+  environmentoutlined: <EnvironmentOutlined />,
+  environmenttwotone: <EnvironmentTwoTone />,
+  eurocirclefilled: <EuroCircleFilled />,
+  eurocircleoutlined: <EuroCircleOutlined />,
+  eurocircletwotone: <EuroCircleTwoTone />,
+  eurooutlined: <EuroOutlined />,
+  eurotwotone: <EuroTwoTone />,
+  exceptionoutlined: <ExceptionOutlined />,
+  exclamationcirclefilled: <ExclamationCircleFilled />,
+  exclamationcircleoutlined: <ExclamationCircleOutlined />,
+  exclamationcircletwotone: <ExclamationCircleTwoTone />,
+  exclamationoutlined: <ExclamationOutlined />,
+  expandaltoutlined: <ExpandAltOutlined />,
+  expandoutlined: <ExpandOutlined />,
+  experimentfilled: <ExperimentFilled />,
+  experimentoutlined: <ExperimentOutlined />,
+  experimenttwotone: <ExperimentTwoTone />,
+  exportoutlined: <ExportOutlined />,
+  eyefilled: <EyeFilled />,
+  eyeinvisiblefilled: <EyeInvisibleFilled />,
+  eyeinvisibleoutlined: <EyeInvisibleOutlined />,
+  eyeinvisibletwotone: <EyeInvisibleTwoTone />,
+  eyeoutlined: <EyeOutlined />,
+  eyetwotone: <EyeTwoTone />,
+  facebookfilled: <FacebookFilled />,
+  facebookoutlined: <FacebookOutlined />,
+  falloutlined: <FallOutlined />,
+  fastbackwardfilled: <FastBackwardFilled />,
+  fastbackwardoutlined: <FastBackwardOutlined />,
+  fastforwardfilled: <FastForwardFilled />,
+  fastforwardoutlined: <FastForwardOutlined />,
+  fieldbinaryoutlined: <FieldBinaryOutlined />,
+  fieldnumberoutlined: <FieldNumberOutlined />,
+  fieldstringoutlined: <FieldStringOutlined />,
+  fieldtimeoutlined: <FieldTimeOutlined />,
+  fileaddfilled: <FileAddFilled />,
+  fileaddoutlined: <FileAddOutlined />,
+  fileaddtwotone: <FileAddTwoTone />,
+  filedoneoutlined: <FileDoneOutlined />,
+  fileexcelfilled: <FileExcelFilled />,
+  fileexceloutlined: <FileExcelOutlined />,
+  fileexceltwotone: <FileExcelTwoTone />,
+  fileexclamationfilled: <FileExclamationFilled />,
+  fileexclamationoutlined: <FileExclamationOutlined />,
+  fileexclamationtwotone: <FileExclamationTwoTone />,
+  filefilled: <FileFilled />,
+  filegifoutlined: <FileGifOutlined />,
+  fileimagefilled: <FileImageFilled />,
+  fileimageoutlined: <FileImageOutlined />,
+  fileimagetwotone: <FileImageTwoTone />,
+  filejpgoutlined: <FileJpgOutlined />,
+  filemarkdownfilled: <FileMarkdownFilled />,
+  filemarkdownoutlined: <FileMarkdownOutlined />,
+  filemarkdowntwotone: <FileMarkdownTwoTone />,
+  fileoutlined: <FileOutlined />,
+  filepdffilled: <FilePdfFilled />,
+  filepdfoutlined: <FilePdfOutlined />,
+  filepdftwotone: <FilePdfTwoTone />,
+  filepptfilled: <FilePptFilled />,
+  filepptoutlined: <FilePptOutlined />,
+  fileppttwotone: <FilePptTwoTone />,
+  fileprotectoutlined: <FileProtectOutlined />,
+  filesearchoutlined: <FileSearchOutlined />,
+  filesyncoutlined: <FileSyncOutlined />,
+  filetextfilled: <FileTextFilled />,
+  filetextoutlined: <FileTextOutlined />,
+  filetexttwotone: <FileTextTwoTone />,
+  filetwotone: <FileTwoTone />,
+  fileunknownfilled: <FileUnknownFilled />,
+  fileunknownoutlined: <FileUnknownOutlined />,
+  fileunknowntwotone: <FileUnknownTwoTone />,
+  filewordfilled: <FileWordFilled />,
+  filewordoutlined: <FileWordOutlined />,
+  filewordtwotone: <FileWordTwoTone />,
+  filezipfilled: <FileZipFilled />,
+  filezipoutlined: <FileZipOutlined />,
+  fileziptwotone: <FileZipTwoTone />,
+  filterfilled: <FilterFilled />,
+  filteroutlined: <FilterOutlined />,
+  filtertwotone: <FilterTwoTone />,
+  firefilled: <FireFilled />,
+  fireoutlined: <FireOutlined />,
+  firetwotone: <FireTwoTone />,
+  flagfilled: <FlagFilled />,
+  flagoutlined: <FlagOutlined />,
+  flagtwotone: <FlagTwoTone />,
+  folderaddfilled: <FolderAddFilled />,
+  folderaddoutlined: <FolderAddOutlined />,
+  folderaddtwotone: <FolderAddTwoTone />,
+  folderfilled: <FolderFilled />,
+  folderopenfilled: <FolderOpenFilled />,
+  folderopenoutlined: <FolderOpenOutlined />,
+  folderopentwotone: <FolderOpenTwoTone />,
+  folderoutlined: <FolderOutlined />,
+  foldertwotone: <FolderTwoTone />,
+  folderviewoutlined: <FolderViewOutlined />,
+  fontcolorsoutlined: <FontColorsOutlined />,
+  fontsizeoutlined: <FontSizeOutlined />,
+  forkoutlined: <ForkOutlined />,
+  formoutlined: <FormOutlined />,
+  formatpainterfilled: <FormatPainterFilled />,
+  formatpainteroutlined: <FormatPainterOutlined />,
+  forwardfilled: <ForwardFilled />,
+  forwardoutlined: <ForwardOutlined />,
+  frownfilled: <FrownFilled />,
+  frownoutlined: <FrownOutlined />,
+  frowntwotone: <FrownTwoTone />,
+  fullscreenexitoutlined: <FullscreenExitOutlined />,
+  fullscreenoutlined: <FullscreenOutlined />,
+  functionoutlined: <FunctionOutlined />,
+  fundfilled: <FundFilled />,
+  fundoutlined: <FundOutlined />,
+  fundprojectionscreenoutlined: <FundProjectionScreenOutlined />,
+  fundtwotone: <FundTwoTone />,
+  fundviewoutlined: <FundViewOutlined />,
+  funnelplotfilled: <FunnelPlotFilled />,
+  funnelplotoutlined: <FunnelPlotOutlined />,
+  funnelplottwotone: <FunnelPlotTwoTone />,
+  gatewayoutlined: <GatewayOutlined />,
+  gifoutlined: <GifOutlined />,
+  giftfilled: <GiftFilled />,
+  giftoutlined: <GiftOutlined />,
+  gifttwotone: <GiftTwoTone />,
+  githubfilled: <GithubFilled />,
+  githuboutlined: <GithubOutlined />,
+  gitlabfilled: <GitlabFilled />,
+  gitlaboutlined: <GitlabOutlined />,
+  globaloutlined: <GlobalOutlined />,
+  goldfilled: <GoldFilled />,
+  goldoutlined: <GoldOutlined />,
+  goldtwotone: <GoldTwoTone />,
+  goldenfilled: <GoldenFilled />,
+  googlecirclefilled: <GoogleCircleFilled />,
+  googleoutlined: <GoogleOutlined />,
+  googlepluscirclefilled: <GooglePlusCircleFilled />,
+  googleplusoutlined: <GooglePlusOutlined />,
+  googleplussquarefilled: <GooglePlusSquareFilled />,
+  googlesquarefilled: <GoogleSquareFilled />,
+  groupoutlined: <GroupOutlined />,
+  hddfilled: <HddFilled />,
+  hddoutlined: <HddOutlined />,
+  hddtwotone: <HddTwoTone />,
+  heartfilled: <HeartFilled />,
+  heartoutlined: <HeartOutlined />,
+  hearttwotone: <HeartTwoTone />,
+  heatmapoutlined: <HeatMapOutlined />,
+  highlightfilled: <HighlightFilled />,
+  highlightoutlined: <HighlightOutlined />,
+  highlighttwotone: <HighlightTwoTone />,
+  historyoutlined: <HistoryOutlined />,
+  holderoutlined: <HolderOutlined />,
+  homefilled: <HomeFilled />,
+  homeoutlined: <HomeOutlined />,
+  hometwotone: <HomeTwoTone />,
+  hourglassfilled: <HourglassFilled />,
+  hourglassoutlined: <HourglassOutlined />,
+  hourglasstwotone: <HourglassTwoTone />,
+  html5filled: <Html5Filled />,
+  html5outlined: <Html5Outlined />,
+  html5twotone: <Html5TwoTone />,
+  idcardfilled: <IdcardFilled />,
+  idcardoutlined: <IdcardOutlined />,
+  idcardtwotone: <IdcardTwoTone />,
+  iecirclefilled: <IeCircleFilled />,
+  ieoutlined: <IeOutlined />,
+  iesquarefilled: <IeSquareFilled />,
+  importoutlined: <ImportOutlined />,
+  inboxoutlined: <InboxOutlined />,
+  infocirclefilled: <InfoCircleFilled />,
+  infocircleoutlined: <InfoCircleOutlined />,
+  infocircletwotone: <InfoCircleTwoTone />,
+  infooutlined: <InfoOutlined />,
+  insertrowaboveoutlined: <InsertRowAboveOutlined />,
+  insertrowbelowoutlined: <InsertRowBelowOutlined />,
+  insertrowleftoutlined: <InsertRowLeftOutlined />,
+  insertrowrightoutlined: <InsertRowRightOutlined />,
+  instagramfilled: <InstagramFilled />,
+  instagramoutlined: <InstagramOutlined />,
+  insurancefilled: <InsuranceFilled />,
+  insuranceoutlined: <InsuranceOutlined />,
+  insurancetwotone: <InsuranceTwoTone />,
+  interactionfilled: <InteractionFilled />,
+  interactionoutlined: <InteractionOutlined />,
+  interactiontwotone: <InteractionTwoTone />,
+  issuescloseoutlined: <IssuesCloseOutlined />,
+  italicoutlined: <ItalicOutlined />,
+  keyoutlined: <KeyOutlined />,
+  laptopoutlined: <LaptopOutlined />,
+  layoutfilled: <LayoutFilled />,
+  layoutoutlined: <LayoutOutlined />,
+  layouttwotone: <LayoutTwoTone />,
+  leftcirclefilled: <LeftCircleFilled />,
+  leftcircleoutlined: <LeftCircleOutlined />,
+  leftcircletwotone: <LeftCircleTwoTone />,
+  leftoutlined: <LeftOutlined />,
+  leftsquarefilled: <LeftSquareFilled />,
+  leftsquareoutlined: <LeftSquareOutlined />,
+  leftsquaretwotone: <LeftSquareTwoTone />,
+  likefilled: <LikeFilled />,
+  likeoutlined: <LikeOutlined />,
+  liketwotone: <LikeTwoTone />,
+  linechartoutlined: <LineChartOutlined />,
+  lineheightoutlined: <LineHeightOutlined />,
+  lineoutlined: <LineOutlined />,
+  linkoutlined: <LinkOutlined />,
+  linkedinfilled: <LinkedinFilled />,
+  linkedinoutlined: <LinkedinOutlined />,
+  loading3quartersoutlined: <Loading3QuartersOutlined />,
+  loadingoutlined: <LoadingOutlined />,
+  lockfilled: <LockFilled />,
+  lockoutlined: <LockOutlined />,
+  locktwotone: <LockTwoTone />,
+  loginoutlined: <LoginOutlined />,
+  logoutoutlined: <LogoutOutlined />,
+  maccommandfilled: <MacCommandFilled />,
+  maccommandoutlined: <MacCommandOutlined />,
+  mailfilled: <MailFilled />,
+  mailoutlined: <MailOutlined />,
+  mailtwotone: <MailTwoTone />,
+  manoutlined: <ManOutlined />,
+  medicineboxfilled: <MedicineBoxFilled />,
+  medicineboxoutlined: <MedicineBoxOutlined />,
+  medicineboxtwotone: <MedicineBoxTwoTone />,
+  mediumcirclefilled: <MediumCircleFilled />,
+  mediumoutlined: <MediumOutlined />,
+  mediumsquarefilled: <MediumSquareFilled />,
+  mediumworkmarkoutlined: <MediumWorkmarkOutlined />,
+  mehfilled: <MehFilled />,
+  mehoutlined: <MehOutlined />,
+  mehtwotone: <MehTwoTone />,
+  menufoldoutlined: <MenuFoldOutlined />,
+  menuoutlined: <MenuOutlined />,
+  menuunfoldoutlined: <MenuUnfoldOutlined />,
+  mergecellsoutlined: <MergeCellsOutlined />,
+  messagefilled: <MessageFilled />,
+  messageoutlined: <MessageOutlined />,
+  messagetwotone: <MessageTwoTone />,
+  minuscirclefilled: <MinusCircleFilled />,
+  minuscircleoutlined: <MinusCircleOutlined />,
+  minuscircletwotone: <MinusCircleTwoTone />,
+  minusoutlined: <MinusOutlined />,
+  minussquarefilled: <MinusSquareFilled />,
+  minussquareoutlined: <MinusSquareOutlined />,
+  minussquaretwotone: <MinusSquareTwoTone />,
+  mobilefilled: <MobileFilled />,
+  mobileoutlined: <MobileOutlined />,
+  mobiletwotone: <MobileTwoTone />,
+  moneycollectfilled: <MoneyCollectFilled />,
+  moneycollectoutlined: <MoneyCollectOutlined />,
+  moneycollecttwotone: <MoneyCollectTwoTone />,
+  monitoroutlined: <MonitorOutlined />,
+  moreoutlined: <MoreOutlined />,
+  nodecollapseoutlined: <NodeCollapseOutlined />,
+  nodeexpandoutlined: <NodeExpandOutlined />,
+  nodeindexoutlined: <NodeIndexOutlined />,
+  notificationfilled: <NotificationFilled />,
+  notificationoutlined: <NotificationOutlined />,
+  notificationtwotone: <NotificationTwoTone />,
+  numberoutlined: <NumberOutlined />,
+  onetooneoutlined: <OneToOneOutlined />,
+  orderedlistoutlined: <OrderedListOutlined />,
+  paperclipoutlined: <PaperClipOutlined />,
+  partitionoutlined: <PartitionOutlined />,
+  pausecirclefilled: <PauseCircleFilled />,
+  pausecircleoutlined: <PauseCircleOutlined />,
+  pausecircletwotone: <PauseCircleTwoTone />,
+  pauseoutlined: <PauseOutlined />,
+  paycirclefilled: <PayCircleFilled />,
+  paycircleoutlined: <PayCircleOutlined />,
+  percentageoutlined: <PercentageOutlined />,
+  phonefilled: <PhoneFilled />,
+  phoneoutlined: <PhoneOutlined />,
+  phonetwotone: <PhoneTwoTone />,
+  piccenteroutlined: <PicCenterOutlined />,
+  picleftoutlined: <PicLeftOutlined />,
+  picrightoutlined: <PicRightOutlined />,
+  picturefilled: <PictureFilled />,
+  pictureoutlined: <PictureOutlined />,
+  picturetwotone: <PictureTwoTone />,
+  piechartfilled: <PieChartFilled />,
+  piechartoutlined: <PieChartOutlined />,
+  piecharttwotone: <PieChartTwoTone />,
+  playcirclefilled: <PlayCircleFilled />,
+  playcircleoutlined: <PlayCircleOutlined />,
+  playcircletwotone: <PlayCircleTwoTone />,
+  playsquarefilled: <PlaySquareFilled />,
+  playsquareoutlined: <PlaySquareOutlined />,
+  playsquaretwotone: <PlaySquareTwoTone />,
+  pluscirclefilled: <PlusCircleFilled />,
+  pluscircleoutlined: <PlusCircleOutlined />,
+  pluscircletwotone: <PlusCircleTwoTone />,
+  plusoutlined: <PlusOutlined />,
+  plussquarefilled: <PlusSquareFilled />,
+  plussquareoutlined: <PlusSquareOutlined />,
+  plussquaretwotone: <PlusSquareTwoTone />,
+  poundcirclefilled: <PoundCircleFilled />,
+  poundcircleoutlined: <PoundCircleOutlined />,
+  poundcircletwotone: <PoundCircleTwoTone />,
+  poundoutlined: <PoundOutlined />,
+  poweroffoutlined: <PoweroffOutlined />,
+  printerfilled: <PrinterFilled />,
+  printeroutlined: <PrinterOutlined />,
+  printertwotone: <PrinterTwoTone />,
+  profilefilled: <ProfileFilled />,
+  profileoutlined: <ProfileOutlined />,
+  profiletwotone: <ProfileTwoTone />,
+  projectfilled: <ProjectFilled />,
+  projectoutlined: <ProjectOutlined />,
+  projecttwotone: <ProjectTwoTone />,
+  propertysafetyfilled: <PropertySafetyFilled />,
+  propertysafetyoutlined: <PropertySafetyOutlined />,
+  propertysafetytwotone: <PropertySafetyTwoTone />,
+  pullrequestoutlined: <PullRequestOutlined />,
+  pushpinfilled: <PushpinFilled />,
+  pushpinoutlined: <PushpinOutlined />,
+  pushpintwotone: <PushpinTwoTone />,
+  qqcirclefilled: <QqCircleFilled />,
+  qqoutlined: <QqOutlined />,
+  qqsquarefilled: <QqSquareFilled />,
+  qrcodeoutlined: <QrcodeOutlined />,
+  questioncirclefilled: <QuestionCircleFilled />,
+  questioncircleoutlined: <QuestionCircleOutlined />,
+  questioncircletwotone: <QuestionCircleTwoTone />,
+  questionoutlined: <QuestionOutlined />,
+  radarchartoutlined: <RadarChartOutlined />,
+  radiusbottomleftoutlined: <RadiusBottomleftOutlined />,
+  radiusbottomrightoutlined: <RadiusBottomrightOutlined />,
+  radiussettingoutlined: <RadiusSettingOutlined />,
+  radiusupleftoutlined: <RadiusUpleftOutlined />,
+  radiusuprightoutlined: <RadiusUprightOutlined />,
+  readfilled: <ReadFilled />,
+  readoutlined: <ReadOutlined />,
+  reconciliationfilled: <ReconciliationFilled />,
+  reconciliationoutlined: <ReconciliationOutlined />,
+  reconciliationtwotone: <ReconciliationTwoTone />,
+  redenvelopefilled: <RedEnvelopeFilled />,
+  redenvelopeoutlined: <RedEnvelopeOutlined />,
+  redenvelopetwotone: <RedEnvelopeTwoTone />,
+  redditcirclefilled: <RedditCircleFilled />,
+  redditoutlined: <RedditOutlined />,
+  redditsquarefilled: <RedditSquareFilled />,
+  redooutlined: <RedoOutlined />,
+  reloadoutlined: <ReloadOutlined />,
+  restfilled: <RestFilled />,
+  restoutlined: <RestOutlined />,
+  resttwotone: <RestTwoTone />,
+  retweetoutlined: <RetweetOutlined />,
+  rightcirclefilled: <RightCircleFilled />,
+  rightcircleoutlined: <RightCircleOutlined />,
+  rightcircletwotone: <RightCircleTwoTone />,
+  rightoutlined: <RightOutlined />,
+  rightsquarefilled: <RightSquareFilled />,
+  rightsquareoutlined: <RightSquareOutlined />,
+  rightsquaretwotone: <RightSquareTwoTone />,
+  riseoutlined: <RiseOutlined />,
+  robotfilled: <RobotFilled />,
+  robotoutlined: <RobotOutlined />,
+  rocketfilled: <RocketFilled />,
+  rocketoutlined: <RocketOutlined />,
+  rockettwotone: <RocketTwoTone />,
+  rollbackoutlined: <RollbackOutlined />,
+  rotateleftoutlined: <RotateLeftOutlined />,
+  rotaterightoutlined: <RotateRightOutlined />,
+  safetycertificatefilled: <SafetyCertificateFilled />,
+  safetycertificateoutlined: <SafetyCertificateOutlined />,
+  safetycertificatetwotone: <SafetyCertificateTwoTone />,
+  safetyoutlined: <SafetyOutlined />,
+  savefilled: <SaveFilled />,
+  saveoutlined: <SaveOutlined />,
+  savetwotone: <SaveTwoTone />,
+  scanoutlined: <ScanOutlined />,
+  schedulefilled: <ScheduleFilled />,
+  scheduleoutlined: <ScheduleOutlined />,
+  scheduletwotone: <ScheduleTwoTone />,
+  scissoroutlined: <ScissorOutlined />,
+  searchoutlined: <SearchOutlined />,
+  securityscanfilled: <SecurityScanFilled />,
+  securityscanoutlined: <SecurityScanOutlined />,
+  securityscantwotone: <SecurityScanTwoTone />,
+  selectoutlined: <SelectOutlined />,
+  sendoutlined: <SendOutlined />,
+  settingfilled: <SettingFilled />,
+  settingoutlined: <SettingOutlined />,
+  settingtwotone: <SettingTwoTone />,
+  shakeoutlined: <ShakeOutlined />,
+  sharealtoutlined: <ShareAltOutlined />,
+  shopfilled: <ShopFilled />,
+  shopoutlined: <ShopOutlined />,
+  shoptwotone: <ShopTwoTone />,
+  shoppingcartoutlined: <ShoppingCartOutlined />,
+  shoppingfilled: <ShoppingFilled />,
+  shoppingoutlined: <ShoppingOutlined />,
+  shoppingtwotone: <ShoppingTwoTone />,
+  shrinkoutlined: <ShrinkOutlined />,
+  signalfilled: <SignalFilled />,
+  sisternodeoutlined: <SisternodeOutlined />,
+  sketchcirclefilled: <SketchCircleFilled />,
+  sketchoutlined: <SketchOutlined />,
+  sketchsquarefilled: <SketchSquareFilled />,
+  skinfilled: <SkinFilled />,
+  skinoutlined: <SkinOutlined />,
+  skintwotone: <SkinTwoTone />,
+  skypefilled: <SkypeFilled />,
+  skypeoutlined: <SkypeOutlined />,
+  slackcirclefilled: <SlackCircleFilled />,
+  slackoutlined: <SlackOutlined />,
+  slacksquarefilled: <SlackSquareFilled />,
+  slacksquareoutlined: <SlackSquareOutlined />,
+  slidersfilled: <SlidersFilled />,
+  slidersoutlined: <SlidersOutlined />,
+  sliderstwotone: <SlidersTwoTone />,
+  smalldashoutlined: <SmallDashOutlined />,
+  smilefilled: <SmileFilled />,
+  smileoutlined: <SmileOutlined />,
+  smiletwotone: <SmileTwoTone />,
+  snippetsfilled: <SnippetsFilled />,
+  snippetsoutlined: <SnippetsOutlined />,
+  snippetstwotone: <SnippetsTwoTone />,
+  solutionoutlined: <SolutionOutlined />,
+  sortascendingoutlined: <SortAscendingOutlined />,
+  sortdescendingoutlined: <SortDescendingOutlined />,
+  soundfilled: <SoundFilled />,
+  soundoutlined: <SoundOutlined />,
+  soundtwotone: <SoundTwoTone />,
+  splitcellsoutlined: <SplitCellsOutlined />,
+  starfilled: <StarFilled />,
+  staroutlined: <StarOutlined />,
+  startwotone: <StarTwoTone />,
+  stepbackwardfilled: <StepBackwardFilled />,
+  stepbackwardoutlined: <StepBackwardOutlined />,
+  stepforwardfilled: <StepForwardFilled />,
+  stepforwardoutlined: <StepForwardOutlined />,
+  stockoutlined: <StockOutlined />,
+  stopfilled: <StopFilled />,
+  stopoutlined: <StopOutlined />,
+  stoptwotone: <StopTwoTone />,
+  strikethroughoutlined: <StrikethroughOutlined />,
+  subnodeoutlined: <SubnodeOutlined />,
+  swapleftoutlined: <SwapLeftOutlined />,
+  swapoutlined: <SwapOutlined />,
+  swaprightoutlined: <SwapRightOutlined />,
+  switcherfilled: <SwitcherFilled />,
+  switcheroutlined: <SwitcherOutlined />,
+  switchertwotone: <SwitcherTwoTone />,
+  syncoutlined: <SyncOutlined />,
+  tableoutlined: <TableOutlined />,
+  tabletfilled: <TabletFilled />,
+  tabletoutlined: <TabletOutlined />,
+  tablettwotone: <TabletTwoTone />,
+  tagfilled: <TagFilled />,
+  tagoutlined: <TagOutlined />,
+  tagtwotone: <TagTwoTone />,
+  tagsfilled: <TagsFilled />,
+  tagsoutlined: <TagsOutlined />,
+  tagstwotone: <TagsTwoTone />,
+  taobaocirclefilled: <TaobaoCircleFilled />,
+  taobaocircleoutlined: <TaobaoCircleOutlined />,
+  taobaooutlined: <TaobaoOutlined />,
+  taobaosquarefilled: <TaobaoSquareFilled />,
+  teamoutlined: <TeamOutlined />,
+  thunderboltfilled: <ThunderboltFilled />,
+  thunderboltoutlined: <ThunderboltOutlined />,
+  thunderbolttwotone: <ThunderboltTwoTone />,
+  totopoutlined: <ToTopOutlined />,
+  toolfilled: <ToolFilled />,
+  tooloutlined: <ToolOutlined />,
+  tooltwotone: <ToolTwoTone />,
+  trademarkcirclefilled: <TrademarkCircleFilled />,
+  trademarkcircleoutlined: <TrademarkCircleOutlined />,
+  trademarkcircletwotone: <TrademarkCircleTwoTone />,
+  trademarkoutlined: <TrademarkOutlined />,
+  transactionoutlined: <TransactionOutlined />,
+  translationoutlined: <TranslationOutlined />,
+  trophyfilled: <TrophyFilled />,
+  trophyoutlined: <TrophyOutlined />,
+  trophytwotone: <TrophyTwoTone />,
+  twittercirclefilled: <TwitterCircleFilled />,
+  twitteroutlined: <TwitterOutlined />,
+  twittersquarefilled: <TwitterSquareFilled />,
+  underlineoutlined: <UnderlineOutlined />,
+  undooutlined: <UndoOutlined />,
+  ungroupoutlined: <UngroupOutlined />,
+  unlockfilled: <UnlockFilled />,
+  unlockoutlined: <UnlockOutlined />,
+  unlocktwotone: <UnlockTwoTone />,
+  unorderedlistoutlined: <UnorderedListOutlined />,
+  upcirclefilled: <UpCircleFilled />,
+  upcircleoutlined: <UpCircleOutlined />,
+  upcircletwotone: <UpCircleTwoTone />,
+  upoutlined: <UpOutlined />,
+  upsquarefilled: <UpSquareFilled />,
+  upsquareoutlined: <UpSquareOutlined />,
+  upsquaretwotone: <UpSquareTwoTone />,
+  uploadoutlined: <UploadOutlined />,
+  usbfilled: <UsbFilled />,
+  usboutlined: <UsbOutlined />,
+  usbtwotone: <UsbTwoTone />,
+  useraddoutlined: <UserAddOutlined />,
+  userdeleteoutlined: <UserDeleteOutlined />,
+  useroutlined: <UserOutlined />,
+  userswitchoutlined: <UserSwitchOutlined />,
+  usergroupaddoutlined: <UsergroupAddOutlined />,
+  usergroupdeleteoutlined: <UsergroupDeleteOutlined />,
+  verifiedoutlined: <VerifiedOutlined />,
+  verticalalignbottomoutlined: <VerticalAlignBottomOutlined />,
+  verticalalignmiddleoutlined: <VerticalAlignMiddleOutlined />,
+  verticalaligntopoutlined: <VerticalAlignTopOutlined />,
+  verticalleftoutlined: <VerticalLeftOutlined />,
+  verticalrightoutlined: <VerticalRightOutlined />,
+  videocameraaddoutlined: <VideoCameraAddOutlined />,
+  videocamerafilled: <VideoCameraFilled />,
+  videocameraoutlined: <VideoCameraOutlined />,
+  videocameratwotone: <VideoCameraTwoTone />,
+  walletfilled: <WalletFilled />,
+  walletoutlined: <WalletOutlined />,
+  wallettwotone: <WalletTwoTone />,
+  warningfilled: <WarningFilled />,
+  warningoutlined: <WarningOutlined />,
+  warningtwotone: <WarningTwoTone />,
+  wechatfilled: <WechatFilled />,
+  wechatoutlined: <WechatOutlined />,
+  weibocirclefilled: <WeiboCircleFilled />,
+  weibocircleoutlined: <WeiboCircleOutlined />,
+  weibooutlined: <WeiboOutlined />,
+  weibosquarefilled: <WeiboSquareFilled />,
+  weibosquareoutlined: <WeiboSquareOutlined />,
+  whatsappoutlined: <WhatsAppOutlined />,
+  wifioutlined: <WifiOutlined />,
+  windowsfilled: <WindowsFilled />,
+  windowsoutlined: <WindowsOutlined />,
+  womanoutlined: <WomanOutlined />,
+  yahoofilled: <YahooFilled />,
+  yahoooutlined: <YahooOutlined />,
+  youtubefilled: <YoutubeFilled />,
+  youtubeoutlined: <YoutubeOutlined />,
+  yuquefilled: <YuqueFilled />,
+  yuqueoutlined: <YuqueOutlined />,
+  zhihucirclefilled: <ZhihuCircleFilled />,
+  zhihuoutlined: <ZhihuOutlined />,
+  zhihusquarefilled: <ZhihuSquareFilled />,
+  zoominoutlined: <ZoomInOutlined />,
+  zoomoutoutlined: <ZoomOutOutlined />,
+};
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
new file mode 100644
index 000000000..08e1f570b
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -0,0 +1,201 @@
+import React, { useEffect, useState } from "react";
+// 渲染组件到编辑器
+import {
+  changeChildAction,
+  DispatchType,
+  CompAction,
+  RecordConstructorToView,
+} from "lowcoder-core";
+// 文字国际化转换api
+import { trans } from "i18n";
+// 右侧属性栏总框架
+import { UICompBuilder, withDefault } from "../../generators";
+// 右侧属性子框架
+import { Section, sectionNames } from "lowcoder-design";
+// 指示组件是否隐藏的开关
+import { hiddenPropertyView } from "comps/utils/propertyUtils";
+// 右侧属性开关
+
+import { BoolControl } from "comps/controls/boolControl";
+import { stringExposingStateControl } from "comps/controls/codeStateControl"; //文本并暴露值
+import { dropdownControl } from "comps/controls/dropdownControl";
+import { styleControl } from "comps/controls/styleControl"; //样式输入框
+import { alignControl } from "comps/controls/alignControl";
+import { AutoHeightControl } from "comps/controls/autoHeightControl";
+import { jsonValueExposingStateControl } from "comps/controls/codeStateControl";
+import {
+  ArrayStringControl,
+  BoolCodeControl,
+  CodeControlJSONType,
+  jsonControl,
+  jsonObjectControl,
+  jsonValueControl,
+  NumberControl,
+  StringControl,
+} from "comps/controls/codeControl";
+// 事件控制
+import {
+  clickEvent,
+  eventHandlerControl,
+} from "comps/controls/eventHandlerControl";
+
+// 引入样式
+import {
+  TimeLineStyle,
+  heightCalculator,
+  widthCalculator,
+  marginCalculator,
+} from "comps/controls/styleControlConstants";
+// 初始化暴露值
+import { stateComp, valueComp } from "comps/generators/simpleGenerators";
+// 组件对外暴露属性的api
+import {
+  NameConfig,
+  NameConfigHidden,
+  withExposingConfigs,
+} from "comps/generators/withExposing";
+
+import { timelineDate, timelineNode, TimelineDataTooltip } from "./timelineConstants";
+import { convertTimeLineData } from "./timelineUtils";
+import { Timeline } from "antd";
+import { ANTDICON } from "./antIcon";
+
+const EventOptions = [
+  clickEvent,
+] as const;
+
+const modeOptions = [
+  { label: trans("timeLine.left"), value: "left" },
+  { label: trans("timeLine.right"), value: "right" },
+  { label: trans("timeLine.alternate"), value: "alternate" },
+] as const;
+
+const childrenMap = {
+  value: jsonControl(convertTimeLineData, timelineDate),
+  mode: dropdownControl(modeOptions, "alternate"),
+  reverse: BoolControl,
+  pending: withDefault(StringControl, trans("timeLine.defaultPending")),
+  onEvent: eventHandlerControl(EventOptions),
+  style: styleControl(TimeLineStyle),
+  clickedObject: valueComp<timelineNode>({ title: "" }),
+  clickedIndex: valueComp<number>(0),
+};
+
+const TimelineComp = (
+  props: RecordConstructorToView<typeof childrenMap> & {
+    dispatch: (action: CompAction) => void;
+  }
+) => {
+  const { value, dispatch, style, mode, reverse, onEvent } = props;
+  // TODO:parse px string
+  return (
+    <div
+      style={{
+        margin: style.margin,
+        padding: style.padding,
+        width: widthCalculator(style.margin),
+        height: heightCalculator(style.margin),
+        background: style.background,
+        overflow: "auto",
+        overflowX: "hidden",
+        borderRadius: style.radius,
+      }}
+    >
+      <Timeline
+        mode={props?.mode || "left"}
+        reverse={props?.reverse}
+        pending={
+          props?.pending && (
+            <span style={{ color: style?.titleColor }}>
+              {props?.pending || ""}
+            </span>
+          )
+        }
+      >
+        {value.map((value: timelineNode, index: number) => (
+          <Timeline.Item
+            key={index}
+            color={value?.color}
+            dot={
+              value?.dot && ANTDICON.hasOwnProperty(value?.dot.toLowerCase())
+                ? ANTDICON[value?.dot.toLowerCase() as keyof typeof ANTDICON]
+                : ""
+            }
+            label={
+              <span style={{ color: value?.lableColor || style?.lableColor }}>
+                {value?.label}
+              </span>
+            }
+          >
+            <a
+              href=""
+              onClick={(e) => {
+                e.preventDefault();
+                dispatch(changeChildAction("clickedObject", value, false));
+                dispatch(changeChildAction("clickedIndex", index, false));
+                onEvent("click");
+              }}
+              style={{
+                cursor: "pointer",
+                color: value?.titleColor || style?.titleColor,
+              }}
+            >
+              <b>{value?.title}</b>
+            </a>
+            <p style={{ color: value?.subTitleColor || style?.subTitleColor }}>
+              {value?.subTitle}
+            </p>
+          </Timeline.Item>
+        ))}
+      </Timeline>
+    </div>
+  );
+};
+
+let TimeLineBasicComp = (function () {
+  return new UICompBuilder(childrenMap, (props, dispatch) => (
+    <TimelineComp {...props} dispatch={dispatch} />
+  ))
+    .setPropertyViewFn((children) => (
+      <>
+        <Section name={sectionNames.basic}>
+          {children.value.propertyView({
+            label: trans("timeLine.value"),
+            tooltip: TimelineDataTooltip,
+            placeholder: "[]",
+          })}
+          {children.mode.propertyView({
+            label: trans("timeLine.mode"),
+            tooltip: trans("timeLine.modeTooltip"),
+          })}
+          {children.reverse.propertyView({
+            label: trans("timeLine.reverse"),
+          })}
+          {children.pending.propertyView({
+            label: trans("timeLine.pending"),
+          })}
+        </Section>
+        <Section name={sectionNames.layout}>
+          {children.onEvent.getPropertyView()}
+          {hiddenPropertyView(children)}
+        </Section>
+        <Section name={sectionNames.style}>
+          {children.style.getPropertyView()}
+        </Section>
+      </>
+    ))
+    .build();
+})();
+
+TimeLineBasicComp = class extends TimeLineBasicComp {
+  override autoHeight(): boolean {
+    return false;
+  }
+};
+
+export const TimeLineComp = withExposingConfigs(TimeLineBasicComp, [
+  new NameConfig("value", trans("timeLine.valueDesc")),
+  new NameConfig("clickedObject", trans("timeLine.clickedObjectDesc")),
+  new NameConfig("clickedIndex", trans("timeLine.clickedIndexDesc")),
+  NameConfigHidden,
+]);
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineConstants.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineConstants.tsx
new file mode 100644
index 000000000..88eb24b80
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineConstants.tsx
@@ -0,0 +1,63 @@
+import { trans } from "i18n";
+export type timelineNode = {
+  title: string;
+  subTitle?: string;
+  color?: string;
+  label?: string;
+  dot?: string;
+  subTitleColor?: string;
+  titleColor?: string;
+  lableColor?: string;
+};
+
+export const TimelineDataTooltip = (
+  <li>
+    {trans("timeLine.Introduction")}:
+    <br />
+    1. title - {trans("timeLine.helpTitle")}
+    <br />
+    2. subTitle - {trans("timeLine.helpsubTitle")}
+    <br />
+    3. label - {trans("timeLine.helpLabel")}
+    <br />
+    4. color - {trans("timeLine.helpColor")}
+    <br />
+    5. dot - {trans("timeLine.helpDot")}
+    <br />
+    6. titleColor - {trans("timeLine.helpTitleColor")}
+    <br />
+    7. subTitleColor - {trans("timeLine.helpSubTitleColor")}
+    <br />
+    8. lableColor - {trans("timeLine.helpLableColor")}
+  </li>
+);
+
+export const timelineDate=[
+  {
+    title: "码匠发布",
+    subTitle: "Majiang Published in China",
+    label: "2022-6-10",
+  },
+  {
+    title: "openblocks开源",
+    subTitle: "Openblocks open source in GitHub",
+    label: "2022-11-28",
+  },
+  {
+    title: "最后一次提交代码",
+    subTitle: "Openblocks project abandoned",
+    dot: "ExclamationCircleOutlined",
+    label: "2023-3-28",
+    color: 'red',
+    titleColor: "red",
+    subTitleColor: "red",
+    lableColor: "red",
+  },
+  {
+    title: "Lowcoder继续前行",
+    subTitle: "Lowcoder, keep moving forward",
+    dot: "LogoutOutlined",
+    color: "green",
+    label: "2023-4-26",
+  },
+]
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineUtils.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineUtils.tsx
new file mode 100644
index 000000000..f0657afa2
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineUtils.tsx
@@ -0,0 +1,22 @@
+import { BoolCodeControl, jsonControl } from "comps/controls/codeControl";
+import { check } from "util/convertUtils";
+import {timelineNode} from './timelineConstants'
+
+export function convertTimeLineData(data: any) {
+  return data === "" ? [] : checkDataNodes(data) ?? [];
+}
+
+function checkDataNodes(value: any, key?: string): timelineNode[] | undefined {
+  return check(value, ["array", "undefined"], key, (node, k) => {
+    check(node, ["object"], k);
+    check(node["title"], ["string"], "title");
+    check(node["subTitle"], ["string", "undefined"], "subTitle");
+    check(node["label"], ["string", "undefined"], "label");
+    check(node["color"], ["string", "undefined"], "color");
+    check(node["titleColor"], ["string", "undefined"], "titleColor");
+    check(node["subTitleColor"], ["string", "undefined"], "subTitleColor");
+    check(node["lableColor"], ["string", "undefined"], "lableColor");
+    check(node["dot"], ["string", "undefined"], "dot");
+    return node;
+  });
+}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index c1485f300..5d650faea 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -790,6 +790,28 @@ export const QRCodeStyle = [
   PADDING,
 ] as const;
 
+export const TimeLineStyle = [
+  getBackground(),
+  {
+    name: "titleColor",
+    label: trans("timeLine.titleColor"),
+    color: "#000000",
+  },
+  {
+    name: "lableColor",
+    label: trans("timeLine.lableColor"),
+    color: "#000000",
+  },
+  {
+    name: "subTitleColor",
+    label: trans("timeLine.subTitleColor"),
+    color: "#848484",
+  },
+  MARGIN,	
+  PADDING,
+  RADIUS
+] as const;
+
 export const TreeStyle = [
   LABEL,
   ...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
index baf2d4b96..e2bdd418c 100644
--- a/client/packages/lowcoder/src/comps/index.tsx
+++ b/client/packages/lowcoder/src/comps/index.tsx
@@ -91,6 +91,7 @@ import {
   TreeSelectIcon,
   UploadCompIcon,
   VideoCompIcon,
+  TimeLineIcon,
   LottieIcon,
 } from "lowcoder-design";
 
@@ -117,6 +118,7 @@ import { defaultCollapsibleContainerData } from "./comps/containerComp/collapsib
 import { RemoteCompInfo } from "types/remoteComp";
 import { ScannerComp } from "./comps/buttonComp/scannerComp";
 import { SignatureComp } from "./comps/signatureComp";
+import { TimeLineComp } from "./comps/timelineComp/timelineComp";
 
 //Added by Aqib Mirza
 import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp";
@@ -840,6 +842,19 @@ const uiCompMap: Registry = {
       h: 47,
     },
   },
+  timeline: {
+    name: trans("uiComp.timelineCompName"),
+    enName: "timeline",
+    description: trans("uiComp.timelineCompDesc"),
+    categories: ["dataDisplay"],
+    icon: TimeLineIcon,
+    keywords: trans("uiComp.timelineCompKeywords"),
+    comp: TimeLineComp,
+    layoutInfo: {
+      w: 13,
+      h: 55,
+    },
+  },
 };
 
 export function loadComps() {
diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
index a571f9748..bba81c125 100644
--- a/client/packages/lowcoder/src/comps/uiCompRegistry.ts
+++ b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
@@ -110,7 +110,8 @@ export type UICompType =
   | "collapsibleContainer"
   | "calendar"
   | "signature"
-  | "jsonLottie"; //Added By Aqib Mirza
+  | "jsonLottie" //Added By Aqib Mirza
+  | "timeline"
 
 export const uiCompRegistry = {} as Record<UICompType | string, UICompManifest>;
 
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 29fd3b3c5..160955098 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -842,6 +842,9 @@ export const en = {
     jsonLottieCompDesc: "Lottie Animation",
     jsonLottieCompKeywords: "",
     /////////////////////
+    timelineCompName: "Time Line",
+    timelineCompDesc: "Time Line",
+    timelineCompKeywords: "",
   },
   comp: {
     menuViewDocs: "View documentation",
@@ -2437,4 +2440,32 @@ export const en = {
     keepLastFrame: "Keep Last Frame",
   },
   /////////////////////
+  timeLine: {
+    titleColor: "title Color",
+    subTitleColor: "subTitle Color",
+    lableColor: "lable Color",
+    value: "value",
+    mode: "mode",
+    left: "Left",
+    right: "Right",
+    alternate: "alternate",
+    modeTooltip: "Set the content to appear left/right or alternately on both sides of the timeline",
+    reverse: "reverse",
+    pending: "pending",
+    defaultPending: "continuous improvement",
+    clickTitleEvent: "clickTitleEvent",
+    clickTitleEventDesc: "click Title Event",
+    Introduction: "Introduction keys",
+    helpTitle: "title of timeline(Required)",
+    helpsubTitle: "subtitle of timeline",
+    helpLabel: "label of timeline,be used to display dates",
+    helpColor: "Indicates timeline node color",
+    helpDot: "Rendering Timeline Nodes as Ant Design Icons",
+    helpTitleColor: "Individually control the color of node title",
+    helpSubTitleColor: "Individually control the color of node subtitle",
+    helpLableColor: "Individually control the color of node icon",
+    valueDesc: "data of timeline",
+    clickedObjectDesc: "clicked item data",
+    clickedIndexDesc: "clicked item index",
+  }
 };
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
index bf1e1fe28..f92dff893 100644
--- a/client/packages/lowcoder/src/i18n/locales/zh.ts
+++ b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -825,6 +825,9 @@ uiComp: {
     jsonLottieCompName: "Lottie动画",
     jsonLottieCompDesc: "Lottie动画组件",
     jsonLottieCompKeywords: "",
+    timelineCompName: "时间线",
+    timelineCompDesc: "时间线组件",
+    timelineCompKeywords: "sjx",
 },
 comp: {
     menuViewDocs: "查看文档",
@@ -2412,6 +2415,34 @@ idSource: {
     slotControl: {
     configSlotView: "配置槽视图",
     },
+timeLine: {
+    titleColor: "标题颜色",
+    subTitleColor: "子标题颜色",
+    lableColor: "标签颜色",
+    value: "数据",
+    mode: "模式",
+    left: "左",
+    right: "右",
+    alternate: "轮流",
+    modeTooltip: "设置内容出现在时间轴左边/右边或左右轮流出现",
+    reverse: "倒置",
+    pending: "未完成",
+    defaultPending: "继续改进",
+    clickTitleEvent: "点击时",
+    clickTitleEventDesc: "点击标题时",
+    Introduction: "键值介绍",
+    helpTitle: "时间线的标题(必填)",
+    helpsubTitle: "时间线的副标题",
+    helpLabel: "时间线的标签,可用于显示日期",
+    helpColor: "设置时间线圆点的颜色",
+    helpDot: "时间线的原点渲染成AntD的图标",
+    helpTitleColor: "设置时间线标题颜色",
+    helpSubTitleColor: "设置时间线子标题颜色",
+    helpLableColor: "设置时间线标签颜色",
+    valueDesc: "时间线的数据",
+    clickedObjectDesc: "点击的项目数据",
+    clickedIndexDesc: "点击的项目序号",
+    },
     jsonLottie: {
         lottieJson: "JSON数据",
         speed: "播放速度",
diff --git a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
index f3fa80ae9..7e23f6d99 100644
--- a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
@@ -35,7 +35,8 @@ import {
   LeftTime,
   LeftTree,
   LeftVideo,
-  LeftSignature
+  LeftSignature,
+  TimeLineIcon,
 } from "lowcoder-design";
 
 export const CompStateIcon: {
@@ -101,4 +102,5 @@ export const CompStateIcon: {
   calendar: <LeftDate />,
   signature: <LeftSignature />,
   jsonLottie: <LeftJsonEditor />, //Added By Aqib Mirza
+  timeline: <TimeLineIcon />,
 };