Feat: upgrade variable assigner (#11285)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>

web/app/components/base/list-empty/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Variable02 } from '../icons/src/vender/solid/development'
+import VerticalLine from './vertical-line'
+import HorizontalLine from './horizontal-line'
+
+type ListEmptyProps = {
+  title?: string
+  description?: React.ReactNode
+}
+
+const ListEmpty = ({
+  title,
+  description,
+}: ListEmptyProps) => {
+  return (
+    <div className='flex w-[320px] p-4 flex-col items-start gap-2 rounded-[10px] bg-workflow-process-bg'>
+      <div className='flex w-10 h-10 justify-center items-center gap-2 rounded-[10px]'>
+        <div className='flex relative p-1 justify-center items-center gap-2 grow self-stretch rounded-[10px]
+          border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg'>
+          <Variable02 className='w-5 h-5 shrink-0 text-text-accent' />
+          <VerticalLine className='absolute -right-[1px] top-1/2 -translate-y-1/4'/>
+          <VerticalLine className='absolute -left-[1px] top-1/2 -translate-y-1/4'/>
+          <HorizontalLine className='absolute top-0 left-3/4 -translate-x-1/4 -translate-y-1/2'/>
+          <HorizontalLine className='absolute top-full left-3/4 -translate-x-1/4 -translate-y-1/2' />
+        </div>
+      </div>
+      <div className='flex flex-col items-start gap-1 self-stretch'>
+        <div className='text-text-secondary system-sm-medium'>{title}</div>
+        {description}
+      </div>
+    </div>
+  )
+}
+
+export default ListEmpty