feat: rotate animation

src/components/icon/IconFilterBatch/index.tsx

@@ -0,0 +1,7 @@
+import { Image } from '@tarojs/components'
+import Icon from '@/images/svgs/IconFilterBatch.svg'
+export default () => {
+  return (
+    <Image src={Icon} mode="widthFix" style={{width: '16px', height: '16px'}}></Image>
+  )
+}

src/components/icon/IconFilterFeeds/index.tsx

@@ -0,0 +1,7 @@
+import { Image } from '@tarojs/components'
+import Icon from '@/images/svgs/IconFilterFeeds.svg'
+export default () => {
+  return (
+    <Image src={Icon} mode="widthFix" style={{width: '16px', height: '16px'}}></Image>
+  )
+}

src/components/icon/IconFilterList/index.tsx

@@ -0,0 +1,7 @@
+import { Image } from '@tarojs/components'
+import Icon from '@/images/svgs/IconFilterList.svg'
+export default () => {
+  return (
+    <Image src={Icon} mode="widthFix" style={{width: '16px', height: '16px'}}></Image>
+  )
+}

src/components/list/figure-list-item/index.tsx

@@ -3,17 +3,19 @@ import IconArrowThin from "@/components/icon/icon-arrow-thin";
 export interface IndexProps {
   figure: () => JSX.Element;
   arrow?: boolean;
+  rightRenderer?: () => JSX.Element[] | JSX.Element;
   children?: JSX.Element[] | JSX.Element;
   className?: string;
   underline?: boolean;
   onClick?: () => void;
 }
 
-const Index = ({ figure, arrow, underline, children, onClick }: IndexProps) => {
+const Index = ({ figure, arrow, underline, rightRenderer, children, onClick }: IndexProps) => {
   return (
     <View className={`flex items-center gap-12 w-full ${underline ? 'border-bottom1-gray pb-12' : ''}`} onClick={ ()=> { onClick && onClick()}}>
       {figure()}
       <View className="flex flex-col flex-1 gap-2 w-full">{children}</View>
+      {rightRenderer && rightRenderer()}
       {arrow && (
         <View className="flex items-center justify-center">
           <IconArrowThin />

src/components/list/figure-list/index.tsx

@@ -1,8 +1,12 @@
 import { View } from "@tarojs/components";
-const Index = ({children}) => {
+interface IProps {
+  className?: string,
+  children: JSX.Element | JSX.Element[]
+}
+const Index = ({className='', children}:IProps) => {
   
   return <View>
-    <View className="bg-gray-2 px-16 py-12 rounded-8 flex flex-col gap-12">
+    <View className={`rounded-8 flex flex-col gap-12 ${className}`}>
       {children}
     </View>
   </View>

src/components/rotate-loading/index.module.less

@@ -0,0 +1,38 @@
+// components/RotateLoading/index.less
+@keyframes rotate-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.rotateLoading {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 1px solid rgba(#000, .1);
+}
+.rotateRing {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  right:0;
+  bottom:0;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  border-style: solid;
+  border-radius: 50%;
+  animation: rotate-loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  
+  // 兼容微信小程序
+  /* postcss-disable */
+  -webkit-animation: rotate-loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  /* postcss-enable */
+}

src/components/rotate-loading/index.tsx

@@ -0,0 +1,31 @@
+// components/RotateLoading/index.tsx
+import React from 'react'
+import { View } from '@tarojs/components'
+import style from  './index.module.less'
+
+interface RotateLoadingProps {
+  color?: string
+  size?: number
+  strokeWidth?: number
+}
+
+const RotateLoading: React.FC<RotateLoadingProps> = ({
+  color = '#317CFA',
+  size = 16,
+  strokeWidth = 2
+}) => {
+  const ringStyle = {
+    width: `${size}px`,
+    height: `${size}px`,
+    borderColor: `${color} transparent transparent transparent`,
+    borderWidth: `${strokeWidth}px`
+  }
+
+  return (
+    <View className={style.rotateLoading}>
+      <View className={style.rotateRing} style={ringStyle}></View>
+    </View>
+  )
+}
+
+export default RotateLoading

src/images/svgs/IconFilterBatch.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.09511 10.5531H3.68091" stroke="black" stroke-opacity="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.61792 5.30114H12.0321" stroke="black" stroke-opacity="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.2261 5.27138C6.2261 4.56929 5.65271 4 4.94557 4C4.23843 4 3.66504 4.56929 3.66504 5.27138C3.66504 5.97346 4.23843 6.54275 4.94557 6.54275C5.65271 6.54275 6.2261 5.97346 6.2261 5.27138Z" stroke="black" stroke-opacity="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3352 10.5321C12.3352 9.83003 11.7623 9.26074 11.0551 9.26074C10.3476 9.26074 9.77417 9.83003 9.77417 10.5321C9.77417 11.2342 10.3476 11.8035 11.0551 11.8035C11.7623 11.8035 12.3352 11.2342 12.3352 10.5321Z" stroke="black" stroke-opacity="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/images/svgs/IconFilterFeeds.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 4.5L3 4.5V3.5H13V4.5ZM10 8.5L3 8.5V7.5L10 7.5V8.5ZM3 12.5L13 12.5V11.5L3 11.5V12.5Z" fill="black" fill-opacity="0.25"/>
+</svg>

src/images/svgs/IconFilterList.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.5H7V7.5L13 7.5V5.5C13 4.94772 12.5523 4.5 12 4.5ZM13 8.5L7 8.5V11.5H12C12.5523 11.5 13 11.0523 13 10.5V8.5ZM6 7.5V4.5H4C3.44772 4.5 3 4.94772 3 5.5L3 7.5L6 7.5ZM3 8.5V10.5C3 11.0523 3.44772 11.5 4 11.5H6V8.5L3 8.5ZM4 3.5C2.89543 3.5 2 4.39543 2 5.5V10.5C2 11.6046 2.89543 12.5 4 12.5H12C13.1046 12.5 14 11.6046 14 10.5V5.5C14 4.39543 13.1046 3.5 12 3.5H4Z" fill="black" fill-opacity="0.25"/>
+</svg>

src/pages/knowledge/components/personal-tab/index.tsx

@@ -4,7 +4,9 @@ import MessageRobotRich from "@/components/chat-message/MessageRobotRich";
 import MessageRich from "@/components/chat-message/MessageRich";
 import { WelcomeCard, AddSuccessfulTips } from "../asistant-message";
 import RoundedLabel from "../rounded-label";
-import IconChange from "@/components/icon/icon-change";
+import IconFilterFeeds from "@/components/icon/IconFilterFeeds";
+import IconFilterBatch from "@/components/icon/IconFilterBatch";
+import IconFilterList from "@/components/icon/IconFilterList";
 
 import IconFIleTxt from "@/components/icon/IconFIleTxt";
 import IconFIlePDF from "@/components/icon/IconFIlePDF";
@@ -16,8 +18,10 @@ import FigureListItem from "@/components/list/figure-list-item";
 import Popup from "@/components/popup/popup";
 import WemetaSwitch from "@/components/wemeta-switch";
 import { useEffect, useState } from "react";
+import ViewStyleChat from "../view-style/ViewStyleChat";
+import RotateLoading from "@/components/rotate-loading";
 
-type TListStyle = 'chat'|'list'
+type TListStyle = "chat" | "list";
 
 const Index = () => {
   const avatarData = {
@@ -26,15 +30,24 @@ const Index = () => {
   };
   const [checked, setChecked] = useState(false);
   const [showPopup, setShowPopup] = useState(false);
-  const [listStyle, setListStyle] = useState<TListStyle>('chat');
+  const [listStyle, setListStyle] = useState<TListStyle>("chat");
 
   const handleListStyleChange = (listStyle: TListStyle) => {
-    setListStyle(listStyle)
-  }
+    setListStyle(listStyle);
+  };
 
-  useEffect(()=> {
-    console.log('hellow')
-  }, [])
+  const rightRenderer = () => {
+    return (
+      <View className="flex items-center gap-4">
+        <RotateLoading />
+        <View className="text-primary text-12">解析中</View>
+      </View>
+    );
+  };
+
+  useEffect(() => {
+    console.log("hellow");
+  }, []);
 
   return (
     <>
@@ -45,106 +58,101 @@ const Index = () => {
             <View className="flex-1 text-12 leading-20 text-gray-45">
               共102个文件
             </View>
-            <View className="flex items-center" onClick={()=> setShowPopup(true)}>
-              <RoundedLabel text="信息流" icon={IconChange}></RoundedLabel>
+            <View className="flex items-center">
+              {listStyle === "chat" ? (
+                <RoundedLabel
+                  onClick={() => setShowPopup(true)}
+                  text="信息流"
+                  icon={IconFilterFeeds}
+                ></RoundedLabel>
+              ) : (
+                <>
+                  <RoundedLabel
+                    onClick={() => {
+                      console.log("batch");
+                    }}
+                    text="批量"
+                    icon={IconFilterBatch}
+                  ></RoundedLabel>
+                  <RoundedLabel
+                    text="列表"
+                    icon={IconFilterList}
+                  ></RoundedLabel>
+                </>
+              )}
             </View>
           </View>
         </View>
         <View className="px-16">
-          <View className="flex flex-col gap-20 pb-120">
-            <MessageRobotRich data={avatarData}>
-              <WelcomeCard />
-            </MessageRobotRich>
-
-            <MessageRobotRich data={avatarData}>
-              <AddSuccessfulTips />
-            </MessageRobotRich>
-
-            <MessageRich data={avatarData}>
-              <View className="flex items-center gap-12">
-                <IconFIleTxt />
-                <View className="flex flex-col flex-1 gap-2">
+          {/* <ViewStyleChat/> */}
+          <View>
+            <FigureList>
+              <FigureListItem
+                figure={IconFIleTxt}
+                underline
+                rightRenderer={rightRenderer}
+              >
+                <View className="flex flex-col flex-1 gap-2 w-full">
                   <View className="text-14 leading-22">文件名称</View>
                   <View className="text-12 leading-20 text-gray-45">
                     03-24 12:20 | 822.KB
                   </View>
                 </View>
-              </View>
-            </MessageRich>
-
-            <MessageRobotRich data={avatarData} analyzeStatus="doing">
-              <FigureList>
-                <FigureListItem figure={IconFIleTxt} underline>
-                  <View className="flex flex-col flex-1 gap-2 w-full">
-                    <View className="text-14 leading-22">文件名称</View>
-                    <View className="text-12 leading-20 text-gray-45">
-                      03-24 12:20 | 822.KB
-                    </View>
-                  </View>
-                </FigureListItem>
-                <FigureListItem figure={IconFIlePDF}>
-                  <View className="flex flex-col flex-1 gap-2 w-full">
-                    <View className="text-14 leading-22">飞秒小知识.pdf</View>
-                    <View className="text-12 leading-20 text-gray-45">
-                      03-24 12:20 | 822.KB
-                    </View>
-                  </View>
-                </FigureListItem>
-              </FigureList>
-            </MessageRobotRich>
-
-            <MessageRobotRich data={avatarData} analyzeStatus="done">
-              <FigureList>
-                <FigureListItem figure={IconFIleTxt} underline arrow>
-                  <View className="flex flex-col flex-1 gap-2 w-full">
-                    <View className="text-14 leading-22">文件名称</View>
-                    <View className="text-12 leading-20 text-gray-45">
-                      03-24 12:20 | 822.KB
-                    </View>
-                  </View>
-                </FigureListItem>
-                <FigureListItem figure={IconFIlePDF} arrow>
-                  <View className="flex flex-col flex-1 gap-2 w-full">
-                    <View className="text-14 leading-22">飞秒小知识.pdf</View>
-                    <View className="text-12 leading-20 text-gray-45">
-                      03-24 12:20 | 822.KB
-                    </View>
-                  </View>
-                </FigureListItem>
-              </FigureList>
-            </MessageRobotRich>
-
-            <MessageRich data={avatarData}>
-              <View className="flex items-center gap-12">
-                <IconFIleXLSX />
-                <View className="flex flex-col flex-1 gap-2">
-                  <View className="text-14 leading-22">文件名称</View>
+              </FigureListItem>
+              <FigureListItem
+                figure={IconFIlePDF}
+                rightRenderer={rightRenderer}
+              >
+                <View className="flex flex-col flex-1 gap-2 w-full">
+                  <View className="text-14 leading-22">飞秒小知识.pdf</View>
                   <View className="text-12 leading-20 text-gray-45">
                     03-24 12:20 | 822.KB
                   </View>
                 </View>
-              </View>
-            </MessageRich>
+              </FigureListItem>
+            </FigureList>
           </View>
         </View>
       </View>
       <Popup setShow={setShowPopup} show={showPopup} title="展示样式">
-        <View className={`rounded-card ${listStyle === 'chat' ? 'rounded-card-actived' : ''}`} onClick={()=> {handleListStyleChange('chat')}}>
+        <View
+          className={`rounded-card ${
+            listStyle === "chat" ? "rounded-card-actived" : ""
+          }`}
+          onClick={() => {
+            handleListStyleChange("chat");
+          }}
+        >
           <View className="border-bottom1-gray mb-12">
-            <View className="mb-8 text-14 font-medium leading-22">对话信息流</View>
-            <View className="mb-12 text-12 leading-20 text-gray-45">以对话形式展示，模拟自然的对话流程。</View>
+            <View className="mb-8 text-14 font-medium leading-22">
+              对话信息流
+            </View>
+            <View className="mb-12 text-12 leading-20 text-gray-45">
+              以对话形式展示，模拟自然的对话流程。
+            </View>
           </View>
           <View className="flex items-center">
-            <View className="flex-1 text-14 font-medium leading-22">仅显示 AI 助手信息</View>
+            <View className="flex-1 text-14 font-medium leading-22">
+              仅显示 AI 助手信息
+            </View>
             <WemetaSwitch
               checked={checked}
               onChange={(checked) => setChecked(checked)}
             ></WemetaSwitch>
           </View>
         </View>
-        <View className={`rounded-card ${listStyle === 'list' ? 'rounded-card-actived' : ''}`} onClick={()=> {handleListStyleChange('list')}}>
+        <View
+          className={`rounded-card ${
+            listStyle === "list" ? "rounded-card-actived" : ""
+          }`}
+          onClick={() => {
+            handleListStyleChange("list");
+          }}
+        >
           <View className="mb-8 text-14 font-medium leading-22">列表形式</View>
-          <View className="mb-12 text-12 leading-20 text-gray-45">将知识点以简洁列表呈现，清晰快速地提供信息。</View>
+          <View className="mb-12 text-12 leading-20 text-gray-45">
+            将知识点以简洁列表呈现，清晰快速地提供信息。
+          </View>
         </View>
       </Popup>
     </>

src/pages/knowledge/components/rounded-label/index.tsx

@@ -3,12 +3,16 @@ import style from './index.module.less';
 export interface IndexProps {
   text: string,
   icon: ()=> JSX.Element
+  onClick?: ()=> void
 }
 
-const Index = ({ text, icon }: IndexProps) => {
+const Index = ({ text, icon, onClick }: IndexProps) => {
   
   return (
-    <View className={style.roundedLabel}>
+    <View className={style.roundedLabel} onClick={(e)=> {
+      e.stopPropagation()
+      onClick && onClick()
+    }}>
       <View className={style.roundedLabelIcon}>{icon()}</View><View>{text}</View>
     </View>
   )