Skip to content

S
sdream-ai-fe
Commit 5559551b by HoMeTown
Options

feat: 侧边栏样式

parent 375a6f9e
Showing with 437 additions and 20 deletions
src/App.tsx
import './App.css'
import { Button } from '@nextui-org/button'
import { useToggle } from '@reactuses/core'
import { motion } from 'framer-motion'
import React from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
import { MainLayout } from './layouts'
import { AppRoutes } from './routes/AppRoutes'
const App: React.FC = () => {
const [on, toggle] = useToggle(true)
return (
<div>
<motion.div
className="w-[100px] h-[100px] bg-slate-300"
>
{on ? 'ON' : 'OFF'}
</motion.div>
<Button color="primary" onClick={toggle}>Toggle</Button>
</div>
<Router>
<MainLayout>
<AppRoutes />
</MainLayout>
</Router>
)
}
......
src/assets/svg/addNewChat.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>对话</title>
<defs>
<rect id="path-1" x="0" y="0" width="24" height="24"></rect>
</defs>
<g id="晓得---PC端页面-草稿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="晓得-PC端---默认页" transform="translate(-32.000000, -413.000000)">
<g id="左侧导航栏" transform="translate(12.000000, 290.000000)">
<g id="新建对话" transform="translate(8.000000, 115.000000)">
<rect id="矩形" x="4" y="0" width="40" height="40" rx="14.2857143"></rect>
<g id="对话" transform="translate(12.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="蒙版"></g>
<path d="M18,0 C21.3137085,-6.08718376e-16 24,2.6862915 24,6 L24,15 C24,15.5182152 23.9343031,16.0210861 23.8107837,16.5007383 C23.1450654,13.912286 20.7958519,12 18,12 C14.6862915,12 12,14.6862915 12,18 C12,19.6568542 12.6715729,21.1568542 13.7573593,22.2426407 L13.0606602,22.9393398 C12.4748737,23.5251263 11.5251263,23.5251263 10.9393398,22.9393398 L9,21 L6,21 C2.6862915,21 4.05812251e-16,18.3137085 0,15 L0,6 C-4.05812251e-16,2.6862915 2.6862915,6.08718376e-16 6,0 L18,0 Z M8.5,12 L5.5,12 C4.67157288,12 4,12.6715729 4,13.5 C4,14.2796961 4.59488808,14.9204487 5.35553999,14.9931334 L5.5,15 L8.5,15 C9.32842712,15 10,14.3284271 10,13.5 C10,12.6715729 9.32842712,12 8.5,12 Z M18.5,6 L5.5,6 C4.67157288,6 4,6.67157288 4,7.5 C4,8.27969612 4.59488808,8.92044868 5.35553999,8.99313342 L5.5,9 L18.5,9 C19.3284271,9 20,8.32842712 20,7.5 C20,6.67157288 19.3284271,6 18.5,6 Z" id="形状结合" fill="#8C989C" mask="url(#mask-2)"></path>
<path d="M15,17 L17,17 L17,17 L17,15 C17,14.4477153 17.4477153,14 18,14 C18.5522847,14 19,14.4477153 19,15 L19,17 L19,17 L21,17 C21.5522847,17 22,17.4477153 22,18 C22,18.5522847 21.5522847,19 21,19 L19,19 L19,19 L19,21 C19,21.5522847 18.5522847,22 18,22 C17.4477153,22 17,21.5522847 17,21 L17,19 L17,19 L15,19 C14.4477153,19 14,18.5522847 14,18 C14,17.4477153 14.4477153,17 15,17 Z" id="矩形" fill="#8C989C" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/svg/collect.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>历史对话</title>
<defs>
<rect id="path-1" x="0" y="0" width="24" height="24"></rect>
</defs>
<g id="晓得---PC端页面-草稿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="晓得-PC端---默认页" transform="translate(-32.000000, -601.000000)">
<g id="左侧导航栏" transform="translate(12.000000, 290.000000)">
<g id="历史对话备份" transform="translate(12.000000, 303.000000)">
<rect id="矩形" x="0" y="0" width="40" height="40" rx="14.2857143"></rect>
<g id="历史对话" transform="translate(8.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="蒙版"></g>
<path d="M19.5758925,-5.86197757e-14 C21.4669749,-5.85230727e-14 23,1.53302514 23,3.42410748 L23,19.8028645 C23,22.0120035 21.209139,23.8028645 19,23.8028645 C18.3314655,23.8028645 17.673593,23.6353027 17.0865143,23.3154949 L12,20.5446449 L6.91348566,23.3154949 C4.97351344,24.3722839 2.54415851,23.6563224 1.48736956,21.7163501 C1.16756177,21.1292715 1,20.4713989 1,19.8028645 L1,3.42410748 C1,1.53302514 2.53302514,-5.87164787e-14 4.42410748,-5.86197757e-14 L19.5758925,-5.86197757e-14 Z M12,4 C11.1715729,4 10.5,4.67157288 10.5,5.5 L10.5,5.5 L10.5,8.5 L7.5,8.5 C6.67157288,8.5 6,9.17157288 6,10 C6,10.8284271 6.67157288,11.5 7.5,11.5 L7.5,11.5 L10.5,11.5 L10.5,14.5 C10.5,15.3284271 11.1715729,16 12,16 C12.8284271,16 13.5,15.3284271 13.5,14.5 L13.5,14.5 L13.5,11.5 L16.5,11.5 C17.3284271,11.5 18,10.8284271 18,10 C18,9.17157288 17.3284271,8.5 16.5,8.5 L16.5,8.5 L13.5,8.5 L13.5,5.5 C13.5,4.67157288 12.8284271,4 12,4 Z" id="形状结合" fill="#8C989C" fill-rule="nonzero" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/svg/historyChat.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>历史对话</title>
<defs>
<rect id="path-1" x="0" y="0" width="24" height="24"></rect>
</defs>
<g id="晓得---PC端页面-草稿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="晓得-PC端---默认页" transform="translate(-32.000000, -507.000000)">
<g id="左侧导航栏" transform="translate(12.000000, 290.000000)">
<g id="历史对话" transform="translate(8.000000, 209.000000)">
<rect id="矩形" x="4" y="0" width="40" height="40" rx="14.2857143"></rect>
<g transform="translate(12.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="蒙版"></g>
<path d="M7.5,16 L6.5,16 C5.67157288,16 5,16.6715729 5,17.5 C5,18.2796961 5.59488808,18.9204487 6.35553999,18.9931334 L6.5,19 L7.5,19 C8.32842712,19 9,18.3284271 9,17.5 C9,16.6715729 8.32842712,16 7.5,16 Z M9.5,10 L6.5,10 C5.67157288,10 5,10.6715729 5,11.5 C5,12.2796961 5.59488808,12.9204487 6.35553999,12.9931334 L6.5,13 L9.5,13 C10.3284271,13 11,12.3284271 11,11.5 C11,10.6715729 10.3284271,10 9.5,10 Z M17.5,4 L6.5,4 C5.67157288,4 5,4.67157288 5,5.5 C5,6.27969612 5.59488808,6.92044868 6.35553999,6.99313342 L6.5,7 L17.5,7 C18.3284271,7 19,6.32842712 19,5.5 C19,4.67157288 18.3284271,4 17.5,4 Z M17,12 C13.6862915,12 11,14.6862915 11,18 C11,21.3137085 13.6862915,24 17,24 L7,24 C3.6862915,24 1,21.3137085 1,18 L1,6 C1,2.6862915 3.6862915,6.08718376e-16 7,0 L17,0 C20.3137085,-6.08718376e-16 23,2.6862915 23,6 L23,18 C23,14.6862915 20.3137085,12 17,12 Z" id="形状结合" fill="#8C989C" mask="url(#mask-2)"></path>
<path d="M17,14 C17.5522847,14 18,14.4477153 18,15 L18,18 L20,18 C20.5522847,18 21,18.4477153 21,19 C21,19.5522847 20.5522847,20 20,20 L17,20 L17,20 C16.4477153,20 16,19.5522847 16,19 L16,15 C16,14.4477153 16.4477153,14 17,14 Z" id="形状结合" fill="#8C989C" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/svg/logo.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="36px" height="50px" viewBox="0 0 36 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>logo</title>
<defs>
<linearGradient x1="12.3277193%" y1="66.5274524%" x2="100%" y2="66.5274524%" id="linearGradient-1">
<stop stop-color="#29B6FD" offset="0%"></stop>
<stop stop-color="#25EEFF" offset="100%"></stop>
</linearGradient>
<path d="M5.50588235,32.2791001 L5.506488,32.2236769 C5.53631513,30.8601337 6.66407831,29.7638454 8.05092583,29.7638454 L18.1943631,29.7638454 C24.5195123,29.7638454 29.6470588,24.6963153 29.6470588,18.4452001 C29.6470588,12.1940847 24.5195123,7.12655456 18.1943631,7.12655456 L16.9411765,7.12655456 C9.92391142,7.12655456 4.23529412,12.7485884 4.23529412,19.6837186 L4.23529412,33.621425 C4.23529412,34.7594976 5.154449,35.685403 6.2991221,35.7136229 L6.35294117,35.7142857 C2.84430865,35.7142857 0,32.9032687 0,29.4357036 L0,17.1875727 C0,7.69513843 7.78627431,0 17.3911304,0 L19.6693043,0 C28.6884985,0 36,7.22592267 36,16.13955 C36,25.0531773 28.6884985,32.2791001 19.6693043,32.2791001 L5.50588235,32.2791001 Z" id="path-2"></path>
<linearGradient x1="34.0765004%" y1="3.46652615%" x2="82.1614874%" y2="85.5842836%" id="linearGradient-4">
<stop stop-color="#0071BC" offset="0%"></stop>
<stop stop-color="#29B6FD" stop-opacity="0.297451206" offset="100%"></stop>
</linearGradient>
<path d="M0,0 L3.34932476,0 C4.52490295,0 5.61646996,0.602288255 6.2334364,1.59135126 L7.20885847,3.15505691 L8.21046141,1.57269874 C8.82978372,0.59427736 9.91517713,0 11.0828522,0 L14.4467194,0 L10.0322736,7.12709629 L7.36750031,11.4039078 L6.25642627,12.8932334 C5.61774483,13.7493462 4.60557,14.2546584 3.52939932,14.2546584 L0,14.2546584 L4.50642213,7.12709629 L0,0 Z" id="path-5"></path>
<path d="M0,0 L3.34932476,0 C4.52490295,0 5.61646996,0.602288255 6.2334364,1.59135126 L7.20885847,3.15505691 L8.21046141,1.57269874 C8.82978372,0.59427736 9.91517713,0 11.0828522,0 L14.4467194,0 L10.0322736,7.12709629 L7.36750031,11.4039078 L6.25642627,12.8932334 C5.61774483,13.7493462 4.60557,14.2546584 3.52939932,14.2546584 L0,14.2546584 L4.50642213,7.12709629 L0,0 Z" id="path-7"></path>
<linearGradient x1="41.6217379%" y1="30.3863509%" x2="61.2059592%" y2="60.1832842%" id="linearGradient-9">
<stop stop-color="#29B6FD" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#0071BC" offset="100%"></stop>
</linearGradient>
<linearGradient x1="24.6266431%" y1="36.9781991%" x2="66.5134571%" y2="68.7134643%" id="linearGradient-10">
<stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#FFC445" stop-opacity="0.564605885" offset="47.3891745%"></stop>
<stop stop-color="#FFAE00" offset="100%"></stop>
</linearGradient>
</defs>
<g id="晓得---PC端页面-草稿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="晓得-PC端---默认页" transform="translate(-26.000000, -314.000000)">
<g id="左侧导航栏" transform="translate(12.000000, 290.000000)">
<g id="logo" transform="translate(14.000000, 24.000000)">
<path d="M22.9483315,42.4107142 C22.7014493,43.2834317 22.3120663,44.0780061 21.7801831,44.7944372 L21.6993318,44.9013158 L21.6993318,50 L21.1035396,50 C20.6009605,50 20.1908963,49.6063249 20.1685027,49.1123206 L20.1675395,49.0697387 L20.1675395,46.3463347 C19.8114307,46.5969612 19.4273916,46.8290227 19.0154223,47.0425195 L18.8596248,47.1217105 L18.8596248,45.2772557 C20.0137233,44.6142806 20.8294627,43.6918 21.3068428,42.5098139 L21.3458412,42.4107142 L22.9483315,42.4107142 Z M16.8104509,45.0775377 L16.8104509,46.4873119 L15.7971115,46.4873119 L15.7971115,48.4844926 L16.9282811,48.4844926 L16.9282811,49.9412594 L15.2248854,49.9412594 C14.7223062,49.9412594 14.3122421,49.5475843 14.2898485,49.0535801 L14.2888854,49.0109981 L14.2888854,46.4873119 L13.1577158,46.4873119 C13.0215564,47.6638645 12.6559435,48.7750529 12.0608769,49.8208775 L11.9911971,49.9412594 L10.0116503,49.9412594 C10.8630683,48.8877184 11.3944688,47.7754976 11.605852,46.6045976 L11.6259236,46.4873119 L10.4711879,46.4873119 L10.4711879,45.0775377 L16.8104509,45.0775377 Z M28.9020757,44.2551692 C29.1497754,44.2551692 29.3525299,44.446423 29.368996,44.6884541 L29.3700756,44.7202999 L29.3700756,45.4769738 L28.7102267,45.4769738 L28.7102267,45.993891 L29.232,45.993891 C29.4796998,45.993891 29.6824542,46.1851448 29.6989204,46.4271759 L29.7,46.4590217 L29.7,47.2156956 L28.7102267,47.2156956 L28.7102267,49.0109981 C28.7102267,49.5104957 28.3141231,49.9180458 27.8170714,49.9403021 L27.7742267,49.9412594 L26.1179629,49.9412594 L26.1179629,48.6489661 L27.2020006,48.6489661 L27.2020006,47.2156956 L22.7715862,47.2156956 L22.7715862,45.993891 L27.2020006,45.993891 L27.2020006,45.4769738 L23.0072465,45.4769738 L23.0072465,44.2551692 L28.9020757,44.2551692 Z M24.8100481,47.5328948 L25.6348593,49.6828008 L24.1501991,49.6828008 L23.325388,47.5328948 L24.8100481,47.5328948 Z M9.19348044,39.7203948 C9.69605957,39.7203948 10.1061237,40.1140699 10.1285173,40.608074 L10.1294804,40.6506562 L10.1294804,49.1541354 L7.23599999,49.1541354 C6.73342088,49.1541354 6.32335671,48.7604601 6.30096315,48.266456 L6.3,48.2238739 L6.3,40.6506562 C6.3,40.1511583 6.69610362,39.7436083 7.19315524,39.721352 L7.23599999,39.7203948 L9.19348044,39.7203948 Z M8.7626505,45.0657895 L7.66682994,45.0657895 L7.66682994,47.7091165 L8.7626505,47.7091165 L8.7626505,45.0657895 Z M13.8529137,39.3679512 L13.9471779,40.0140977 L15.5798755,40.0140977 C16.0824546,40.0140977 16.4925188,40.4077728 16.5149123,40.9017771 L16.5158755,40.9443591 L16.5158755,41.4238722 L14.2417533,41.4238722 C14.2917418,41.6232342 14.3709445,41.8614331 14.4793612,42.1384686 L14.5127627,42.2227443 L16.5158755,41.7175753 L16.5158755,43.0803571 L15.1136965,43.4210526 C15.3225178,43.7800231 15.5907451,44.1554461 15.9183784,44.5473221 L16.0092058,44.6546053 L14.041442,44.6546053 C13.8933126,44.4397825 13.7422977,44.2048202 13.588397,43.949718 L13.5112062,43.8204887 L10.51832,44.5606203 L10.51832,43.1156015 L12.9102724,42.5281956 C12.7989883,42.221439 12.7013421,41.9146825 12.6173335,41.607926 L12.5685649,41.4238722 L10.494754,41.4238722 L10.494754,40.0140977 L12.2739895,40.0140977 L12.1797253,39.3679512 L13.8529137,39.3679512 Z M22.653756,39.2857143 C22.1056425,41.3331281 20.8747167,42.866167 18.9609782,43.8848309 L18.8596248,43.93797 L18.8596248,42.1052632 C19.9279515,41.4205156 20.6738181,40.5140401 21.0972243,39.3858371 L21.1337469,39.2857143 L22.653756,39.2857143 Z M28.1748493,39.4736842 C28.6774284,39.4736842 29.0874926,39.8673593 29.1098862,40.3613635 L29.1108492,40.4039457 L29.1108492,42.9019755 C29.1108492,43.4014733 28.7147457,43.8090234 28.217694,43.8312797 L28.1748493,43.8322368 L23.2664729,43.8322368 L23.2664729,39.4736842 L28.1748493,39.4736842 Z M8.7626505,41.1654135 L7.66682994,41.1654135 L7.66682994,43.6560151 L8.7626505,43.6560151 L8.7626505,41.1654135 Z M27.5790571,42.1522556 L24.798265,42.1522556 L24.798265,42.6926691 L27.5790571,42.6926691 L27.5790571,42.1522556 Z M27.5790571,40.625 L24.798265,40.625 L24.798265,41.1536654 L27.5790571,41.1536654 L27.5790571,40.625 Z" id="晓得" fill="#131415" fill-rule="nonzero"></path>
<g id="晓得图形">
<g id="路径-3">
<g id="蒙版" fill="url(#linearGradient-1)" fill-rule="nonzero">
<path d="M5.50588235,32.2791001 L5.506488,32.2236769 C5.53631513,30.8601337 6.66407831,29.7638454 8.05092583,29.7638454 L18.1943631,29.7638454 C24.5195123,29.7638454 29.6470588,24.6963153 29.6470588,18.4452001 C29.6470588,12.1940847 24.5195123,7.12655456 18.1943631,7.12655456 L16.9411765,7.12655456 C9.92391142,7.12655456 4.23529412,12.7485884 4.23529412,19.6837186 L4.23529412,33.621425 C4.23529412,34.7594976 5.154449,35.685403 6.2991221,35.7136229 L6.35294117,35.7142857 C2.84430865,35.7142857 0,32.9032687 0,29.4357036 L0,17.1875727 C0,7.69513843 7.78627431,0 17.3911304,0 L19.6693043,0 C28.6884985,0 36,7.22592267 36,16.13955 C36,25.0531773 28.6884985,32.2791001 19.6693043,32.2791001 L5.50588235,32.2791001 Z" id="path-2"></path>
</g>
<g id="Clipped">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="path-2"></g>
<path d="M4.76592068,16.7227096 L4.76592068,28.1386688 C4.76592068,29.3082128 5.70302818,30.2563159 6.85900884,30.2563159 L17.3435604,30.2563159 C24.289999,30.2563159 29.9212002,24.5590419 29.9212002,17.5310984 L29.9212002,16.7227096 C29.9212002,9.69476613 24.289999,3.99749224 17.3435604,3.99749224 C10.3971218,3.99749224 4.76592068,9.69476613 4.76592068,16.7227096 Z" id="路径" fill="url(#linearGradient-4)" fill-rule="nonzero" mask="url(#mask-3)" transform="translate(17.343560, 17.126904) scale(-1, 1) rotate(-90.000000) translate(-17.343560, -17.126904) "></path>
</g>
</g>
<g id="路径-2" transform="translate(4.235294, 12.996894)">
<g id="蒙版">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="path-6" fill="#29B6FD" xlink:href="#path-5"></use>
</g>
<g id="路径-4-Clipped">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<g id="path-6"></g>
<polygon id="路径-4" fill="url(#linearGradient-9)" fill-rule="nonzero" mask="url(#mask-8)" points="7.51859518 2.63987422 4.10023622 7.7230251 0.850392329 3.91747789 5.02550062 -1.40831847"></polygon>
</g>
<g id="Clipped"></g>
<path d="M10.0322736,7.12732919 L7.36750031,11.4039078 L8.61818207,13.0002843 C9.23852867,13.7920979 10.1885364,14.2546584 11.1944185,14.2546584 L15.1916086,14.2546584 C17.9028246,14.2546584 20.1006995,12.0567835 20.1006995,9.34556747 L20.1006995,7.15738676 C20.1006995,4.44617072 17.9028246,2.24829585 15.1916086,2.24829585 L13.9282092,2.24829585 L13.9282092,2.24829585 L12.0613171,5.4648875 L13.8046555,5.4648875 C15.2458219,5.4648875 16.4141182,6.63318373 16.4141182,8.07435017 L16.4141182,8.82222793 C16.4141182,9.85035289 15.5806582,10.6838128 14.5525332,10.6838128 L13.5107316,10.6838128 C12.9947728,10.6838128 12.5090343,10.4404683 12.2001055,10.0272171 L10.0322736,7.12732919 L10.0322736,7.12732919 Z" fill="url(#linearGradient-10)"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/svg/tools.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>产品</title>
<defs>
<rect id="path-1" x="0" y="0" width="24" height="24"></rect>
</defs>
<g id="晓得---PC端页面-草稿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="晓得-PC端---默认页" transform="translate(-32.000000, -704.000000)">
<g id="左侧导航栏" transform="translate(12.000000, 290.000000)">
<g id="产品" transform="translate(12.000000, 406.000000)">
<g transform="translate(8.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="蒙版"></g>
<path d="M9.75,12.75 C10.5784271,12.75 11.25,13.4215729 11.25,14.25 L11.25,18.375 C11.25,21.4816017 8.73160172,24 5.625,24 C2.51839828,24 3.80448985e-16,21.4816017 0,18.375 C-3.80448985e-16,15.2683983 2.51839828,12.75 5.625,12.75 L9.75,12.75 Z M5.625,0 C8.73160172,-5.70673477e-16 11.25,2.51839828 11.25,5.625 L11.25,9.75 C11.25,10.5784271 10.5784271,11.25 9.75,11.25 L5.625,11.25 C2.51839828,11.25 3.80448985e-16,8.73160172 0,5.625 C-3.80448985e-16,2.51839828 2.51839828,5.70673477e-16 5.625,0 Z M21.2857143,19.1428571 C22.0746925,19.1428571 22.7142857,19.7824504 22.7142857,20.5714286 C22.7142857,21.3604068 22.0746925,22 21.2857143,22 L14.4285714,22 C13.6395932,22 13,21.3604068 13,20.5714286 C13,19.7824504 13.6395932,19.1428571 14.4285714,19.1428571 L21.2857143,19.1428571 Z M21.2857143,14 C22.0746925,14 22.7142857,14.6395932 22.7142857,15.4285714 C22.7142857,16.2175496 22.0746925,16.8571429 21.2857143,16.8571429 L14.4285714,16.8571429 C13.6395932,16.8571429 13,16.2175496 13,15.4285714 C13,14.6395932 13.6395932,14 14.4285714,14 L21.2857143,14 Z M18.375,0 C21.4816017,-5.70673477e-16 24,2.51839828 24,5.625 C24,8.73160172 21.4816017,11.25 18.375,11.25 L14.25,11.25 C13.4215729,11.25 12.75,10.5784271 12.75,9.75 L12.75,5.625 C12.75,2.51839828 15.2683983,5.70673477e-16 18.375,0 Z" id="形状结合" fill="#8C989C" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/env.d.ts
/// <reference types="@rsbuild/core/types" />
declare module '*.svg' {
const content: string
export default content
}
declare module '*.svg?react' {
const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
export default ReactComponent
}
src/index.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { NextUIProvider } from '@nextui-org/react'
import { motion } from 'framer-motion'
import App from './App'
import './styles/index.less'
......@@ -15,11 +13,7 @@ if (rootEl) {
root.render(
<React.StrictMode>
<NextUIProvider className="h-full">
<BrowserRouter>
<motion.main className="h-full">
<App />
</motion.main>
</BrowserRouter>
<App />
</NextUIProvider>
</React.StrictMode>,
)
......
src/layouts/MainLayout/MainLayout.module.less 0 → 100644
.layoutMain {
height: 100%;
display: flex;
}
.layoutContent {
flex: 1 1;
height: 100%;
width: 100%;
position: relative;
}
src/layouts/MainLayout/MainLayout.module.less.d.ts 0 → 100644
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
layoutContent: string
layoutMain: string
}
declare const cssExports: CssExports
export default cssExports
src/layouts/MainLayout/MainLayout.tsx 0 → 100644
import type React from 'react'
import { motion } from 'framer-motion'
import { useToggle } from '@reactuses/core'
import { Navbar } from '../Navbar'
import styles from './MainLayout.module.less'
interface MainLayoutProps {
children: React.ReactNode
}
export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
const [isNavCollapsed, toggleNav] = useToggle(true)
return (
<motion.main className={styles.layoutMain}>
<Navbar isCollapsed={isNavCollapsed} onToggle={toggleNav} />
<motion.div className={styles.layoutContent}>
{children}
</motion.div>
</motion.main>
)
}
src/layouts/MainLayout/index.ts 0 → 100644
export { MainLayout } from './MainLayout'
src/layouts/Navbar/Navbar.module.less 0 → 100644
.layoutNav {
height: 100%;
position: relative;
transition: width .2s ease;
}
.collapsed {
width: 68px;
z-index: 1030;
}
.layoutNavBar {
position: absolute;
top: 50%;
right: -8px;
transform: translateY(-50%);
z-index: 101;
}
.layoutNavBarAgent {
width: 64px;
background: #FFFFFF;
border-radius: var(--sdream-radius-large);
box-sizing: border-box;
padding: 24px 8px;
display: flex;
flex-direction: column;
align-items: center;
// box-shadow: var(--sdream-box-shadow-small);
}
.layoutNavHot {
width: 96px;
height: 100%;
}
src/layouts/Navbar/Navbar.module.less.d.ts 0 → 100644
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
collapsed: string
layoutNav: string
layoutNavBar: string
layoutNavBarAgent: string
layoutNavHot: string
}
declare const cssExports: CssExports
export default cssExports
src/layouts/Navbar/Navbar.tsx 0 → 100644
import type React from 'react'
import { motion } from 'framer-motion'
import styles from './Navbar.module.less'
import { NavBarItem } from './components/NavBarItem'
import Logo from '@/assets/svg/logo.svg?react'
import AddNewChat from '@/assets/svg/addNewChat.svg?react'
import HistoryChat from '@/assets/svg/historyChat.svg?react'
import Collect from '@/assets/svg/collect.svg?react'
import Tools from '@/assets/svg/tools.svg?react'
interface NavbarProps {
isCollapsed: boolean
onToggle: () => void
}
const NAV_BAR_ITEMS = [
{ icon: Logo, label: '', key: 'logo' },
{ icon: '', label: '', key: 'line1' },
{ icon: AddNewChat, label: '新建对话', key: 'add' },
{ icon: HistoryChat, label: '历史对话', key: 'history' },
{ icon: Collect, label: '收藏', key: 'collect' },
{ icon: '', label: '', key: 'line2' },
{ icon: Tools, label: '工具', key: 'tools' },
]
// onToggle
export const Navbar: React.FC<NavbarProps> = ({ isCollapsed }) => {
return (
<motion.nav className={`${styles.layoutNav} ${isCollapsed ? styles.collapsed : ''}`}>
<motion.div className={styles.layoutNavBar}>
<motion.div className={`${styles.layoutNavBarAgent} bg-white gap-[32px]`}>
{NAV_BAR_ITEMS.map((item) => {
return (
<NavBarItem icon={item.icon} label={item.label} key={item.key} />
)
})}
</motion.div>
</motion.div>
<motion.div className={styles.layoutNavHot}></motion.div>
</motion.nav>
)
}
src/layouts/Navbar/components/NavBarDivider/NavBarDivider.module.less 0 → 100644
.navBarDivider {
width: 40px;
height: 1px;
background: #EFF8FD;
border-radius: 1px;
margin: -12px 0;
}
src/layouts/Navbar/components/NavBarDivider/NavBarDivider.module.less.d.ts 0 → 100644
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
navBarDivider: string
}
declare const cssExports: CssExports
export default cssExports
src/layouts/Navbar/components/NavBarDivider/NavBarDivider.tsx 0 → 100644
import { motion } from 'framer-motion'
import styles from './NavBarDivider.module.less'
export const NavBarDivider: React.FC = () => {
return <motion.div className={styles.navBarDivider}></motion.div>
}
src/layouts/Navbar/components/NavBarDivider/index.ts 0 → 100644
export { NavBarDivider } from './NavBarDivider'
src/layouts/Navbar/components/NavBarItem/NavBarItem.module.less 0 → 100644
.NavBarItem {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
&:hover {
.icon {
background: hsl(var(--sdream-default) / 0.4) !important;
}
}
}
.icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition-property: transform, color, background, background-color, border-color, text-decoration-color, fill, stroke, opacity;
transition-timing-function: ease;
transition-duration: 250ms;
border-radius: var(--sdream-radius-medium);
}
.label {
user-select: none;
font-size: 12px;
color: #82969C;
line-height: 14px;
margin-top: 8px;
}
src/layouts/Navbar/components/NavBarItem/NavBarItem.module.less.d.ts 0 → 100644
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
NavBarItem: string
icon: string
label: string
navBarItem: string
}
declare const cssExports: CssExports
export default cssExports
src/layouts/Navbar/components/NavBarItem/NavBarItem.tsx 0 → 100644
import React from 'react'
import { motion } from 'framer-motion'
import { Button } from '@nextui-org/react'
import { NavBarDivider } from '../NavBarDivider'
import styles from './NavBarItem.module.less'
import Logo from '@/assets/svg/logo.svg?react'
interface NavBarItemProps {
icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>> | string
label: string
}
export const NavBarItem: React.FC<NavBarItemProps> = ({ icon, label }) => {
if (label === '' && icon === '') {
return <NavBarDivider />
}
if (label === '' && icon !== '') {
return (
<motion.div className="nav-logo">
<Logo />
</motion.div>
)
}
return (
<motion.div className={`${styles.NavBarItem}`}>
<div className={`${styles.icon}`}>
<Button variant="light" isIconOnly aria-label="Like">
{React.createElement(icon)}
</Button>
</div>
<div className={styles.label}>{label}</div>
</motion.div>
)
}
src/layouts/Navbar/components/NavBarItem/index.ts 0 → 100644
export { NavBarItem } from './NavBarItem'
src/layouts/Navbar/index.ts 0 → 100644
export { Navbar } from './Navbar'
src/layouts/index.ts 0 → 100644
export * from './MainLayout'
export * from './Navbar'
src/pages/Chat/Chat.tsx 0 → 100644
import React from 'react'
import { useParams } from 'react-router-dom'
export const Chat: React.FC = () => {
const { chatId } = useParams<{ chatId: string }>()
return (
<h1>
聊天页面 - Chat ID:
{chatId}
</h1>
)
}
src/pages/Chat/index.ts 0 → 100644
export { Chat } from './Chat'
src/pages/Home/Home.tsx 0 → 100644
import type React from 'react'
export const Home: React.FC = () => {
return <h1>首页</h1>
}
src/pages/Home/index.ts 0 → 100644
export { Home } from './Home'
src/routes/AppRoutes.tsx 0 → 100644
import React from 'react'
import { Route, Routes } from 'react-router-dom'
import { Home } from '../pages/Home'
import { Chat } from '../pages/Chat'
export const AppRoutes: React.FC = () => {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/chat/:chatId" element={<Chat />} />
</Routes>
)
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment