diff --git a/app/components/chat-list.module.scss b/app/components/chat-list.module.scss new file mode 100644 index 000000000..a32e12334 --- /dev/null +++ b/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 +} diff --git a/app/components/chat-list.tsx b/app/components/chat-list.tsx index 03b1a5c88..04cfbaada 100644 --- a/app/components/chat-list.tsx +++ b/app/components/chat-list.tsx @@ -1,11 +1,11 @@ import DeleteIcon from "../icons/delete.svg"; - import styles from "./home.module.scss"; import { DragDropContext, Droppable, Draggable, OnDragEndResponder, + DraggableProvided, } from "@hello-pangea/dnd"; import { useChatStore } from "../store"; @@ -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; @@ -30,6 +33,7 @@ export function ChatItem(props: { index: number; narrow?: boolean; mask: Mask; + provided: DraggableProvided; }) { const draggableRef = useRef(null); useEffect(() => { @@ -42,62 +46,54 @@ export function ChatItem(props: { const { pathname: currentPath } = useLocation(); return ( - - {(provided) => ( -
{ - draggableRef.current = ele; - provided.innerRef(ele); - }} - {...provided.draggableProps} - {...provided.dragHandleProps} - title={`${props.title}\n${Locale.ChatItem.ChatItemCount( - props.count, - )}`} - > - {props.narrow ? ( -
-
- -
-
- {props.count} -
-
- ) : ( - <> -
{props.title}
-
-
- {Locale.ChatItem.ChatItemCount(props.count)} -
-
{props.time}
-
- - )} - -
{ - props.onDelete?.(); - e.preventDefault(); - e.stopPropagation(); - }} - > - +
{ + draggableRef.current = ele; + props.provided.innerRef(ele); + }} + {...props.provided.draggableProps} + {...props.provided.dragHandleProps} + title={`${props.title}\n${Locale.ChatItem.ChatItemCount(props.count)}`} + > + {props.narrow ? ( +
+
+
+
{props.count}
+ ) : ( + <> +
{props.title}
+
+
+ {Locale.ChatItem.ChatItemCount(props.count)} +
+
{props.time}
+
+ )} - + +
{ + props.onDelete?.(); + e.preventDefault(); + e.stopPropagation(); + }} + > + +
+
); } @@ -113,7 +109,6 @@ export function ChatList(props: { narrow?: boolean }) { const chatStore = useChatStore(); const navigate = useNavigate(); const isMobileScreen = useMobileScreen(); - const onDragEnd: OnDragEndResponder = (result) => { const { destination, source } = result; if (!destination) { @@ -130,40 +125,112 @@ export function ChatList(props: { narrow?: boolean }) { moveSession(source.index, destination.index); }; + const onAdd = () => { + const { data } = this.state; + const i = Math.floor(Math.random() * this.data.length); + data.unshift({ + key: Date.now(), + name: this.data[i].name, + age: this.data[i].age, + address: this.data[i].address, + }); + this.setState({ + data, + isPageTween: false, + }); + }; + + const onDelete = ( + key: number, + e: React.MouseEvent, + ) => { + e.preventDefault(); + const data = this.state.data.filter((item) => item.key !== key); + this.setState({ data, isPageTween: false }); + }; + return ( - - {(provided) => ( + ( + { + navigate(Path.Chat); + selectSession(rubic.source.index); + }} + onDelete={async () => { + if ( + (!props.narrow && !isMobileScreen) || + (await showConfirm(Locale.Home.DeleteChat)) + ) { + chatStore.deleteSession(rubic.source.index); + } + }} + narrow={props.narrow} + mask={sessions[rubic.source.index].mask} + provided={provided} + /> + )} + > + {(provided, snapshot) => (
- {sessions.map((item, i) => ( - { - navigate(Path.Chat); - selectSession(i); - }} - onDelete={async () => { - if ( - (!props.narrow && !isMobileScreen) || - (await showConfirm(Locale.Home.DeleteChat)) - ) { - chatStore.deleteSession(i); - } - }} - narrow={props.narrow} - mask={item.mask} - /> - ))} + + {sessions.map((item, i) => ( +
+ + {(provided, snapshot) => ( + { + navigate(Path.Chat); + selectSession(i); + }} + onDelete={async () => { + if ( + (!props.narrow && !isMobileScreen) || + (await showConfirm(Locale.Home.DeleteChat)) + ) { + chatStore.deleteSession(i); + } + }} + narrow={props.narrow} + mask={item.mask} + provided={provided} + /> + )} + +
+ ))} +
{provided.placeholder}
)} diff --git a/package.json b/package.json index 4acde6045..e253ae1f1 100644 --- a/package.json +++ b/package.json @@ -28,8 +28,8 @@ "@svgr/webpack": "^8.1.0", "@vercel/analytics": "^1.1.2", "@vercel/speed-insights": "^1.0.9", - "axios": "^1.7.5", "antd": "^5.15.1", + "axios": "^1.7.5", "bcryptjs": "^2.4.3", "cron": "^3.1.6", "echarts": "^5.4.3", @@ -46,8 +46,9 @@ "next": "14.2.5", "next-auth": "^4.24.7", "node-fetch": "^3.3.1", - "openapi-client-axios": "^7.5.5", "nodemailer": "^6.9.13", + "openapi-client-axios": "^7.5.5", + "rc-queue-anim": "^2.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-highlight-words": "^0.20.0", @@ -68,10 +69,10 @@ }, "devDependencies": { "@tauri-apps/api": "^1.6.0", - "@types/js-yaml": "4.0.9", "@tauri-apps/cli": "1.6.0", "@types/bcryptjs": "^2.4.6", "@types/cookie": "^0.6.0", + "@types/js-yaml": "4.0.9", "@types/lodash-es": "^4.17.12", "@types/node": "20.14.10", "@types/nodemailer": "6.4.15", @@ -106,4 +107,4 @@ "strip-ansi": "6.0.1" }, "packageManager": "yarn@1.22.19" -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index dcbc8ca4d..b5e007964 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3261,16 +3261,16 @@ comma-separated-tokens@^2.0.0: resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee" integrity sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg== +commander@2, commander@^2.20.0: + version "2.20.3" + resolved "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" + integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== + commander@7, commander@^7.2.0: version "7.2.0" resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7" integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw== -commander@^2.20.0: - version "2.20.3" - resolved "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" - integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== - commander@^4.0.0: version "4.1.1" resolved "https://registry.npmmirror.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068" @@ -3468,6 +3468,11 @@ cytoscape@^3.28.1: dependencies: internmap "1 - 2" +d3-array@^1.2.0: + version "1.2.4" + resolved "https://registry.npmmirror.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f" + integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw== + d3-axis@3: version "3.0.0" resolved "https://registry.npmmirror.com/d3-axis/-/d3-axis-3.0.0.tgz#c42a4a13e8131d637b745fc2973824cfeaf93322" @@ -3592,6 +3597,11 @@ d3-polygon@3: resolved "https://registry.npmmirror.com/d3-polygon/-/d3-polygon-3.0.1.tgz#0b45d3dd1c48a29c8e057e6135693ec80bf16398" integrity sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg== +d3-polygon@^1.0.3: + version "1.0.6" + resolved "https://registry.npmmirror.com/d3-polygon/-/d3-polygon-1.0.6.tgz#0bf8cb8180a6dc107f518ddf7975e12abbfbd38e" + integrity sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ== + "d3-quadtree@1 - 3", d3-quadtree@3: version "3.0.1" resolved "https://registry.npmmirror.com/d3-quadtree/-/d3-quadtree-3.0.1.tgz#6dca3e8be2b393c9a9d514dabbd80a92deef1a4f" @@ -3987,6 +3997,11 @@ dot-case@^3.0.4: no-case "^3.0.4" tslib "^2.0.3" +earcut@^2.1.1: + version "2.2.4" + resolved "https://registry.npmmirror.com/earcut/-/earcut-2.2.4.tgz#6d02fd4d68160c114825d06890a92ecaae60343a" + integrity sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ== + eastasianwidth@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb" @@ -4725,6 +4740,18 @@ flatted@^3.1.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787" integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== +flubber@^0.4.2: + version "0.4.2" + resolved "https://registry.npmmirror.com/flubber/-/flubber-0.4.2.tgz#14452d4a838cc3b9f2fb6175da94e35acd55fbaa" + integrity sha512-79RkJe3rA4nvRCVc2uXjj7U/BAUq84TS3KHn6c0Hr9K64vhj83ZNLUziNx4pJoBumSPhOl5VjH+Z0uhi+eE8Uw== + dependencies: + d3-array "^1.2.0" + d3-polygon "^1.0.3" + earcut "^2.1.1" + svg-path-properties "^0.2.1" + svgpath "^2.2.1" + topojson-client "^3.0.0" + follow-redirects@^1.15.6: version "1.15.6" resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b" @@ -7242,6 +7269,11 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== +performance-now@^2.1.0: + version "2.1.0" + resolved "https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" + integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow== + picocolors@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" @@ -7421,6 +7453,13 @@ raf-schd@^4.0.3: resolved "https://registry.npmmirror.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a" integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ== +raf@^3.4.1: + version "3.4.1" + resolved "https://registry.npmmirror.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" + integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== + dependencies: + performance-now "^2.1.0" + randombytes@^2.1.0: version "2.1.0" resolved "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" @@ -7616,6 +7655,14 @@ rc-progress@~4.0.0: classnames "^2.2.6" rc-util "^5.16.1" +rc-queue-anim@^2.0.0: + version "2.0.0" + resolved "https://registry.npmmirror.com/rc-queue-anim/-/rc-queue-anim-2.0.0.tgz#e78cf9c0f333cb41327e9ed603357f156d0ddce2" + integrity sha512-tojpP72NbaWkwzmR/7x4gFpTBCYR/8I3Jb+KwSdOWpRIDrlmsA4ARAqSElG92GJ7CXAIjxavIGulcqJhXfzHYQ== + dependencies: + "@babel/runtime" "^7.11.1" + tween-one "^1.0.52" + rc-rate@~2.13.0: version "2.13.0" resolved "https://registry.npmmirror.com/rc-rate/-/rc-rate-2.13.0.tgz#642f591ccf55c3a5d84d8d212caf1f7951d203a8" @@ -8606,6 +8653,11 @@ style-to-object@^1.0.0: dependencies: inline-style-parser "0.2.4" +style-utils@^0.3.6: + version "0.3.8" + resolved "https://registry.npmmirror.com/style-utils/-/style-utils-0.3.8.tgz#6ba4271bcc766dee4730bd51b3ef2552908dc111" + integrity sha512-RmGftIhY4tqtD1ERwKsVEDlt/M6UyxN/rcr95UmlooWmhtL0RwVUYJkpo1kSx3ppd9/JZzbknhy742zbMAawjQ== + styled-jsx@5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f" @@ -8667,6 +8719,16 @@ svg-parser@^2.0.4: resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5" integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ== +svg-path-properties@^0.2.1: + version "0.2.2" + resolved "https://registry.npmmirror.com/svg-path-properties/-/svg-path-properties-0.2.2.tgz#b073d81be7292eae0e233ab8a83f58dc27113296" + integrity sha512-GmrB+b6woz6CCdQe6w1GHs/1lt25l7SR5hmhF8jRdarpv/OgjLyuQygLu1makJapixeb1aQhP/Oa1iKi93o/aQ== + +svg-path-properties@^1.0.4: + version "1.3.0" + resolved "https://registry.npmmirror.com/svg-path-properties/-/svg-path-properties-1.3.0.tgz#7f47e61dcac380c9f4d04f642df7e69b127274fa" + integrity sha512-R1+z37FrqyS3UXDhajNfvMxKI0smuVdedqOo4YbAQUfGqA86B9mGvr2IEXrwjjvGzCtdIKy/ad9N8m6YclaKAw== + svgo@^3.0.2: version "3.3.2" resolved "https://registry.npmmirror.com/svgo/-/svgo-3.3.2.tgz#ad58002652dffbb5986fc9716afe52d869ecbda8" @@ -8680,6 +8742,11 @@ svgo@^3.0.2: csso "^5.0.5" picocolors "^1.0.0" +svgpath@^2.2.1: + version "2.6.0" + resolved "https://registry.npmmirror.com/svgpath/-/svgpath-2.6.0.tgz#5b160ef3d742b7dfd2d721bf90588d3450d7a90d" + integrity sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg== + swr@^2.0.0: version "2.2.5" resolved "https://registry.npmmirror.com/swr/-/swr-2.2.5.tgz#063eea0e9939f947227d5ca760cc53696f46446b" @@ -8826,6 +8893,13 @@ toggle-selection@^1.0.6: resolved "https://registry.npmmirror.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32" integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ== +topojson-client@^3.0.0: + version "3.1.0" + resolved "https://registry.npmmirror.com/topojson-client/-/topojson-client-3.1.0.tgz#22e8b1ed08a2b922feeb4af6f53b6ef09a467b99" + integrity sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw== + dependencies: + commander "2" + tree-kill@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc" @@ -8896,6 +8970,23 @@ tsx@^4.16.0: optionalDependencies: fsevents "~2.3.3" +tween-functions@^1.2.0: + version "1.2.0" + resolved "https://registry.npmmirror.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff" + integrity sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA== + +tween-one@^1.0.52: + version "1.2.7" + resolved "https://registry.npmmirror.com/tween-one/-/tween-one-1.2.7.tgz#80051e9434f145c0e31623790378af0f23fe3d00" + integrity sha512-F+Z9LO9GsYqf0j5bgNhAF98RDrAZ7QjQrujJ2lVYSHl4+dBPW/atHluL2bwclZf8Vo0Yo96f6pw2uq1OGzpC/Q== + dependencies: + "@babel/runtime" "^7.11.1" + flubber "^0.4.2" + raf "^3.4.1" + style-utils "^0.3.6" + svg-path-properties "^1.0.4" + tween-functions "^1.2.0" + type-check@^0.4.0, type-check@~0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"