fix

app/components/chat-list.module.scss

@@ -0,0 +1,127 @@
+.queue-demo-wrapper {
+  position: relative;
+  background: #CCE9F9;
+  overflow: hidden;
+  height: 340px;
+}
+
+.queue-demo {
+  max-width: 300px;
+  width: 90%;
+  height: 340px;
+  margin: auto;
+  background: #fff;
+  box-shadow: 0 5px 20px rgba(66, 86, 105, 0.8);
+  cursor: url('http://gtms02.alicdn.com/tps/i2/T1_PMSFLBaXXcu5FDa-20-20.png') 10 10,pointer!important;
+}
+
+.queue-demo-header {
+  height: 60px;
+  border-top: 10px solid #265783;
+  background: #29659B;
+  line-height: 50px;
+  color: #fff;
+}
+
+.queue-demo-header i {
+  width: 15px;
+  height: 2px;
+  background: #fff;
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  margin-left: 10px;
+  top: -2px;
+}
+
+.queue-demo-header i:before, .queue-demo-header i:after {
+  display: block;
+  content: '';
+  background: #fff;
+  width: 15px;
+  height: 2px;
+  position: absolute;
+}
+
+.queue-demo-header i:before {
+  top: -4px;
+}
+
+.queue-demo-header i:after {
+  top: 4px;
+}
+
+.queue-demo-header span {
+  margin-left: 20px;
+  font-size: 14px;
+}
+
+.queue-demo ul {
+  overflow: hidden;
+}
+
+.queue-demo ul li {
+  list-style: none;
+  overflow: hidden;
+  height: 70px;
+  line-height: 70px;
+  border-bottom: 1px solid #efefef;
+  /*
+  cursor: move;
+  cursor: grab;
+  cursor: -webkit-grab;
+  */
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  position: relative;
+}
+
+.queue-demo-img, .queue-demo ul li p {
+  display: inline-block;
+}
+.queue-demo ul li.queue-anim-leaving{
+  position: relative !important;
+}
+.queue-demo-img {
+  margin: 0 20px;
+}
+
+.queue-demo-delete {
+  width: 60px;
+  background: #FF4058;
+  text-align: center;
+  font-size: 16px;
+  height: 67px;
+  position: absolute;
+  right: 0;
+  top: 1px;
+}
+
+.queue-demo-delete a {
+  color: #fff;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.queue-demo-content {
+  background: #fff;
+  position: relative;
+}
+
+.queue-simple {
+  padding: 10px 0
+}
+
+.queue-simple>div {
+  width: 40%;
+  height: 40px;
+  line-height: 40px;
+  margin: 5px auto;
+  text-align: center;
+  background: #1890ff;
+  border-radius: 4px;
+  color: #fff;
+  opacity: 0
+}

app/components/chat-list.tsx

@@ -19,6 +19,9 @@ import { useRef, useEffect } from "react";
 import { showConfirm } from "./ui-lib";
 import { useMobileScreen } from "../utils";
 
+// motion
+import QueueAnim from "rc-queue-anim";
+
 export function ChatItem(props: {
   onClick?: () => void;
   onDelete?: () => void;
@@ -139,31 +142,42 @@ export function ChatList(props: { narrow?: boolean }) {
             ref={provided.innerRef}
             {...provided.droppableProps}
           >
-            {sessions.map((item, i) => (
+            <QueueAnim
-              <ChatItem
+              delay={300}
-                title={item.topic}
+              // className={motionStyles["queue-simple"]}
-                time={new Date(item.lastUpdate).toLocaleString()}
+              // ease={['easeOutQuart', 'easeInOutQuart']}
-                count={item.messages.length}
+              // duration={[550, 450]}
-                key={item.id}
+              // animConfig={[
-                id={item.id}
+              //   { opacity: [1, 0], translateY: [0, 30] },
-                index={i}
+              //   { height: 0 },
-                selected={i === selectedIndex}
+              // ]}
-                onClick={() => {
+            >
-                  navigate(Path.Chat);
+              {sessions.map((item, i) => (
-                  selectSession(i);
+                <ChatItem
-                }}
+                  title={item.topic}
-                onDelete={async () => {
+                  time={new Date(item.lastUpdate).toLocaleString()}
-                  if (
+                  count={item.messages.length}
-                    (!props.narrow && !isMobileScreen) ||
+                  key={item.id}
-                    (await showConfirm(Locale.Home.DeleteChat))
+                  id={item.id}
-                  ) {
+                  index={i}
-                    chatStore.deleteSession(i);
+                  selected={i === selectedIndex}
-                  }
+                  onClick={() => {
-                }}
+                    navigate(Path.Chat);
-                narrow={props.narrow}
+                    selectSession(i);
-                mask={item.mask}
+                  }}
-              />
+                  onDelete={async () => {
-            ))}
+                    if (
+                      (!props.narrow && !isMobileScreen) ||
+                      (await showConfirm(Locale.Home.DeleteChat))
+                    ) {
+                      chatStore.deleteSession(i);
+                    }
+                  }}
+                  narrow={props.narrow}
+                  mask={item.mask}
+                />
+              ))}
+            </QueueAnim>
             {provided.placeholder}
           </div>
         )}