feat: demo

Author: wkylin

src/assets/svg/line-border.svg

@@ -43,63 +43,24 @@ const fixColumns = [
 
 const initialFetchData = [
   {
-    grid: '1634270012',
-    name: '中化学土木工程有限公司',
+    grid: '2316258212',
+    name: '上海徐汇规划建筑设计有限公司',
+    list: [],
+  },
+  {
+    grid: '551517222',
+    name: '中交第一公路勘察设计研究院有限公司',
     list: [],
   },
-  // {
-  //   grid: '304300699',
-  //   name: '上海市建筑装饰工程集团有限公司',
-  //   list: [],
-  // },
-  // {
-  //   grid: '325253024',
-  //   name: '上海市工程建设咨询监理有限公司',
-  //   list: [],
-  // },
-  // {
-  //   grid: '307886242',
-  //   name: '上海市住安建设发展股份有限公司',
-  //   list: [],
-  // },
-  // {
-  //   grid: '828163972',
-  //   name: '中石化上海工程有限公司',
-  //   list: [],
-  // },
-  // {
-  //   grid: '2350706740',
-  //   name: '上海璞奥电子科技有限公司',
-  //   list: [],
-  // },
-  // {
-  //   grid: '804448386',
-  //   name: '上海江崎格力高南奉食品有限公司',
-  //   list: [],
-  // },
-  // {
-  //   grid: '787672126',
-  //   name: '清水建设（中国）有限公司',
-  //   list: [],
-  // },
-  // {
-  //   grid: '137331760',
-  //   name: '信息产业电子第十一设计研究院科技工程股份有限公司',
-  //   list: [],
-  // },
-  // {
-  //   grid: '2416780932',
-  //   name: '上海子绵置业有限公司',
-  //   list: [],
-  // },
 ]
 
 const Business = () => {
   const [fetchData, setFetchData] = useState(initialFetchData)
-
+  const [loading, setLoading] = useState(false)
   useEffect(() => {
     const fetchAllData = async () => {
       const newFetchData = [...fetchData]
+      setLoading(true)
       for (let i = 0; i < newFetchData.length; i++) {
         const item = newFetchData[i]
         try {
@@ -118,11 +79,13 @@ const Business = () => {
               },
             }
           )
+          setLoading(false)
           newFetchData[i] = {
             ...item,
             list: res.data?.list || [],
           }
         } catch (error) {
+          setLoading(false)
           console.error('数据请求失败:', error)
         }
       }
@@ -139,7 +102,7 @@ const Business = () => {
             {index + 1}
             <span>.</span> {item.name} : {item.list.length}
           </section>
-          <Table columns={fixColumns} dataSource={item.list} pagination={false} />
+          <Table loading={loading} columns={fixColumns} dataSource={item.list} pagination={false} />
         </section>
       ))}
     </FixTabPanel>

src/assets/svg/line.svg

@@ -119,7 +119,7 @@ const ProDemo = () => {
   return (
     <FixTabPanel>
       {/* <OrbitingCirclesDemo /> */}
-      {/* <ScriptView showMultiplePackageOptions={true} codeLanguage="shell" commandMap={customCommandMap} /> */}
+      <ScriptView showMultiplePackageOptions={true} codeLanguage="shell" commandMap={customCommandMap} />
       {/* <section style={{ height: 240, overflow: 'hidden', margin: 20 }}>
         <AnimatedList>
           {Array.from({ length: 10 }, () => ({

src/pages/business/index.jsx

@@ -312,8 +312,30 @@ const Home = () => {
 
   const images = slugs.map((slug) => `https://cdn.simpleicons.org/${slug}/${slug}`)
 
+  // 使用 useRef 来引用 SVG 元素
+  const svgRef = useRef(null)
+  const saveSvgAsFile = () => {
+    if (svgRef.current) {
+      // 获取 SVG 元素的 outerHTML
+      const svgContent = svgRef.current.outerHTML
+      // 创建 Blob 对象
+      const blob = new Blob([svgContent], { type: 'image/svg+xml' })
+      // 创建下载链接
+      const url = URL.createObjectURL(blob)
+      // 创建 <a> 元素
+      const a = document.createElement('a')
+      a.href = url
+      a.download = 'mySvg.svg'
+      // 模拟点击下载链接
+      a.click()
+      // 释放临时 URL
+      URL.revokeObjectURL(url)
+    }
+  }
+
   return (
     <FixTabPanel ref={scrollRef}>
+      <button onClick={saveSvgAsFile}>保存 SVG</button>
       <section className={styles.avatar} style={{ margin: '10px 0', fontSize: 24 }}>
         <ColorfulText text={`React version: ${version}`} />
       </section>
@@ -505,7 +527,7 @@ const Home = () => {
       >
         <section className="relative p-4">
           <div className={styles.itemCircle} />
-          <svg style={{ height: '10px', width: '100%' }}>
+          <svg ref={svgRef} style={{ height: '10px', width: '100%' }}>
             <path
               d="M 0 0 L 5000 0"
               stroke-miterlimit="10"
@@ -526,31 +548,6 @@ const Home = () => {
           </svg>
           <div className={styles.itemCircleTail} />
         </section>
-
-        <svg width="100%" height="100%" viewBox="0 0 620 445" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <linearGradient id="paint0_linear" x1="277" y1="0" x2="277" y2="202" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#FF7383"></stop>
-            <stop offset="1" stop-color="#2F48EA"></stop>
-          </linearGradient>
-          <rect
-            x="3"
-            y="3"
-            width="610"
-            height="400"
-            stroke="url(#paint0_linear)"
-            stroke-width="5"
-            stroke-linecap="round"
-            stroke-dasharray="31 31"
-            rx="25"
-          ></rect>
-          <animate
-            attributeName="stroke-dashoffset"
-            values="370;0"
-            dur="3s"
-            calcMode="linear"
-            repeatCount="indefinite"
-          ></animate>
-        </svg>
       </section>
       <section className={styles.line} />
       <section className={styles.linear} />

src/pages/demo/index.jsx

@@ -200,7 +200,6 @@ export const reqFetch = (
   const signedPayload = suffix(suffixPayload)
 
   const queryParams = parseToQuery(signedPayload)
-  console.log('queryParams', queryParams)
 
   const fetchUrl = `${baseUrl}${url}?${queryParams}`