report.vue 194 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149515051515152515351545155515651575158515951605161516251635164516551665167516851695170517151725173517451755176517751785179518051815182518351845185518651875188518951905191519251935194519551965197519851995200520152025203520452055206520752085209521052115212521352145215521652175218521952205221522252235224522552265227522852295230523152325233523452355236523752385239524052415242524352445245524652475248524952505251525252535254525552565257525852595260526152625263526452655266526752685269527052715272527352745275527652775278527952805281528252835284528552865287528852895290529152925293529452955296529752985299530053015302530353045305530653075308530953105311531253135314531553165317531853195320532153225323532453255326532753285329533053315332533353345335533653375338533953405341534253435344534553465347534853495350535153525353535453555356535753585359536053615362536353645365536653675368536953705371537253735374537553765377537853795380538153825383538453855386538753885389539053915392539353945395539653975398539954005401540254035404540554065407540854095410541154125413541454155416541754185419542054215422542354245425542654275428542954305431543254335434543554365437543854395440544154425443544454455446544754485449545054515452545354545455545654575458545954605461546254635464546554665467546854695470547154725473547454755476547754785479548054815482548354845485548654875488548954905491549254935494549554965497549854995500550155025503550455055506550755085509551055115512551355145515551655175518551955205521552255235524552555265527552855295530553155325533553455355536553755385539554055415542554355445545554655475548554955505551555255535554555555565557555855595560556155625563556455655566556755685569557055715572557355745575557655775578557955805581558255835584558555865587558855895590559155925593559455955596559755985599560056015602560356045605560656075608560956105611561256135614561556165617561856195620562156225623562456255626562756285629563056315632563356345635563656375638563956405641564256435644564556465647564856495650565156525653565456555656565756585659566056615662566356645665566656675668566956705671567256735674567556765677567856795680568156825683568456855686568756885689569056915692569356945695569656975698569957005701570257035704570557065707570857095710571157125713571457155716571757185719572057215722572357245725572657275728572957305731573257335734573557365737573857395740574157425743574457455746574757485749575057515752575357545755575657575758575957605761576257635764576557665767576857695770577157725773577457755776577757785779578057815782578357845785578657875788578957905791579257935794579557965797579857995800580158025803580458055806580758085809581058115812581358145815581658175818581958205821582258235824582558265827582858295830583158325833583458355836583758385839584058415842584358445845584658475848584958505851585258535854585558565857585858595860586158625863586458655866586758685869587058715872587358745875587658775878587958805881588258835884588558865887588858895890589158925893589458955896589758985899590059015902590359045905590659075908590959105911591259135914591559165917591859195920592159225923592459255926592759285929593059315932593359345935593659375938593959405941594259435944594559465947594859495950595159525953595459555956595759585959596059615962596359645965596659675968596959705971597259735974597559765977597859795980598159825983598459855986598759885989599059915992599359945995599659975998599960006001600260036004600560066007600860096010601160126013601460156016601760186019602060216022602360246025602660276028602960306031603260336034603560366037603860396040604160426043604460456046604760486049605060516052605360546055605660576058605960606061606260636064606560666067606860696070607160726073607460756076607760786079608060816082608360846085608660876088608960906091609260936094609560966097609860996100610161026103610461056106610761086109611061116112611361146115611661176118611961206121612261236124612561266127612861296130613161326133613461356136613761386139614061416142614361446145614661476148614961506151615261536154615561566157615861596160616161626163616461656166616761686169617061716172617361746175617661776178617961806181618261836184618561866187618861896190619161926193619461956196619761986199620062016202620362046205620662076208620962106211621262136214621562166217621862196220622162226223622462256226622762286229623062316232623362346235623662376238623962406241624262436244624562466247624862496250625162526253625462556256625762586259626062616262626362646265626662676268626962706271627262736274627562766277627862796280628162826283628462856286628762886289629062916292629362946295629662976298629963006301630263036304630563066307630863096310631163126313631463156316631763186319632063216322632363246325632663276328632963306331633263336334633563366337633863396340634163426343634463456346634763486349635063516352635363546355635663576358635963606361636263636364636563666367636863696370637163726373637463756376637763786379638063816382638363846385638663876388638963906391639263936394639563966397639863996400640164026403640464056406640764086409641064116412641364146415641664176418641964206421642264236424642564266427642864296430643164326433643464356436643764386439644064416442644364446445644664476448644964506451645264536454645564566457645864596460646164626463646464656466646764686469647064716472647364746475647664776478647964806481648264836484648564866487648864896490649164926493649464956496649764986499650065016502650365046505650665076508650965106511651265136514651565166517651865196520652165226523652465256526652765286529653065316532653365346535653665376538653965406541654265436544654565466547654865496550655165526553655465556556655765586559656065616562656365646565656665676568656965706571657265736574657565766577657865796580658165826583658465856586658765886589659065916592659365946595659665976598659966006601660266036604660566066607660866096610661166126613661466156616661766186619662066216622662366246625662666276628662966306631663266336634663566366637663866396640664166426643664466456646664766486649665066516652665366546655665666576658665966606661666266636664666566666667666866696670667166726673667466756676667766786679668066816682668366846685668666876688668966906691669266936694669566966697669866996700670167026703670467056706670767086709671067116712671367146715671667176718671967206721672267236724672567266727672867296730673167326733673467356736673767386739674067416742674367446745674667476748674967506751675267536754675567566757675867596760676167626763676467656766676767686769677067716772677367746775677667776778677967806781678267836784678567866787678867896790679167926793679467956796679767986799680068016802680368046805680668076808680968106811681268136814681568166817681868196820682168226823682468256826682768286829683068316832683368346835683668376838683968406841684268436844684568466847684868496850685168526853685468556856685768586859686068616862686368646865686668676868686968706871687268736874687568766877687868796880688168826883688468856886688768886889689068916892689368946895689668976898689969006901690269036904690569066907690869096910691169126913691469156916691769186919692069216922692369246925692669276928692969306931693269336934693569366937693869396940694169426943694469456946694769486949695069516952695369546955695669576958695969606961696269636964696569666967696869696970697169726973697469756976697769786979698069816982698369846985698669876988698969906991699269936994699569966997699869997000700170027003700470057006700770087009701070117012701370147015701670177018701970207021702270237024702570267027702870297030703170327033703470357036703770387039704070417042704370447045704670477048704970507051705270537054705570567057705870597060706170627063706470657066706770687069707070717072707370747075707670777078707970807081708270837084708570867087708870897090709170927093709470957096709770987099710071017102710371047105710671077108710971107111711271137114711571167117711871197120712171227123712471257126712771287129713071317132713371347135713671377138713971407141714271437144714571467147714871497150715171527153715471557156715771587159716071617162716371647165716671677168716971707171717271737174717571767177717871797180718171827183718471857186718771887189719071917192719371947195719671977198719972007201720272037204720572067207720872097210721172127213721472157216721772187219722072217222722372247225722672277228722972307231723272337234723572367237723872397240724172427243724472457246724772487249725072517252725372547255725672577258725972607261726272637264726572667267726872697270727172727273727472757276727772787279728072817282728372847285728672877288728972907291729272937294729572967297729872997300730173027303730473057306730773087309731073117312731373147315731673177318731973207321732273237324732573267327732873297330733173327333733473357336733773387339734073417342734373447345734673477348734973507351735273537354735573567357735873597360736173627363736473657366736773687369737073717372737373747375737673777378737973807381738273837384738573867387738873897390739173927393739473957396739773987399740074017402740374047405740674077408740974107411741274137414741574167417741874197420742174227423742474257426742774287429743074317432743374347435743674377438743974407441744274437444744574467447744874497450745174527453745474557456745774587459746074617462746374647465746674677468746974707471747274737474747574767477747874797480748174827483748474857486748774887489749074917492749374947495749674977498749975007501750275037504750575067507750875097510751175127513751475157516751775187519752075217522752375247525752675277528752975307531753275337534753575367537753875397540754175427543754475457546754775487549755075517552755375547555755675577558755975607561756275637564756575667567756875697570757175727573757475757576757775787579758075817582758375847585758675877588758975907591759275937594759575967597759875997600760176027603760476057606760776087609761076117612761376147615761676177618761976207621762276237624762576267627762876297630763176327633763476357636763776387639764076417642764376447645764676477648764976507651765276537654765576567657765876597660766176627663766476657666766776687669767076717672767376747675767676777678767976807681768276837684768576867687768876897690769176927693769476957696769776987699770077017702770377047705770677077708770977107711771277137714771577167717771877197720772177227723772477257726772777287729773077317732773377347735773677377738773977407741774277437744774577467747774877497750775177527753775477557756775777587759776077617762776377647765776677677768776977707771777277737774777577767777777877797780778177827783778477857786778777887789779077917792779377947795779677977798779978007801780278037804780578067807780878097810781178127813781478157816781778187819782078217822782378247825782678277828782978307831783278337834783578367837783878397840784178427843784478457846784778487849785078517852785378547855785678577858785978607861786278637864786578667867786878697870787178727873787478757876787778787879788078817882788378847885788678877888788978907891789278937894789578967897789878997900790179027903790479057906790779087909791079117912791379147915791679177918791979207921792279237924792579267927792879297930793179327933793479357936793779387939794079417942794379447945794679477948794979507951795279537954795579567957795879597960796179627963796479657966796779687969797079717972797379747975797679777978797979807981798279837984798579867987798879897990799179927993799479957996799779987999800080018002800380048005800680078008800980108011801280138014801580168017801880198020802180228023802480258026802780288029803080318032803380348035803680378038803980408041804280438044804580468047804880498050805180528053805480558056805780588059806080618062806380648065806680678068806980708071807280738074807580768077807880798080808180828083808480858086808780888089809080918092809380948095809680978098809981008101810281038104810581068107810881098110811181128113811481158116811781188119812081218122812381248125812681278128812981308131813281338134813581368137813881398140814181428143814481458146814781488149815081518152815381548155815681578158815981608161816281638164816581668167816881698170817181728173817481758176817781788179818081818182818381848185818681878188818981908191819281938194819581968197819881998200820182028203820482058206820782088209821082118212821382148215821682178218821982208221822282238224822582268227822882298230823182328233823482358236823782388239824082418242824382448245
  1. <template>
  2. <div class="layout" :class="{ 'dark-theme': isDarkTheme }">
  3. <!-- 添加密码修改弹窗组件 -->
  4. <ChangePasswordDialog
  5. v-model:visible="showPasswordDialog"
  6. />
  7. <!-- 进度条弹窗组件 -->
  8. <div v-if="showProgressModal" class="progress-modal-overlay">
  9. <div class="progress-modal">
  10. <div class="progress-modal-header">
  11. <h3>处理进度</h3>
  12. <button class="close-btn" @click="closeProgressModal">×</button>
  13. </div>
  14. <div class="progress-list">
  15. <div
  16. v-for="(progress, index) in progressList"
  17. :key="index"
  18. class="progress-item"
  19. :class="{ 'completed': progress.value >= 100, 'error': progress.status === '错误' }"
  20. >
  21. <!-- 主进度项 -->
  22. <div class="progress-info">
  23. <div class="progress-title-wrapper">
  24. <span class="progress-icon">{{ getProgressIcon(progress) }}</span>
  25. <span class="progress-title">{{ progress.title }}</span>
  26. </div>
  27. <span class="progress-percentage" :class="getProgressClass(progress)">{{ progress.value }}%</span>
  28. </div>
  29. <div class="progress-bar-container">
  30. <div class="progress-bar" :style="{ width: progress.value + '%' }" :class="getProgressBarClass(progress)"></div>
  31. </div>
  32. <div class="progress-status">{{ progress.status }}</div>
  33. <!-- 子进度项 -->
  34. <div v-if="progress.subTasks && progress.subTasks.length > 0" class="sub-progress-list">
  35. <div
  36. v-for="(subTask, subIndex) in progress.subTasks"
  37. :key="subIndex"
  38. class="sub-progress-item"
  39. :class="{ 'completed': subTask.value >= 100, 'active': subTask.isActive }"
  40. >
  41. <div class="sub-progress-info">
  42. <span class="sub-progress-icon">{{ getSubProgressIcon(subTask) }}</span>
  43. <span class="sub-progress-title">{{ subTask.title }}</span>
  44. <span class="sub-progress-percentage">{{ subTask.value }}%</span>
  45. </div>
  46. <div class="sub-progress-bar-container">
  47. <div class="sub-progress-bar" :style="{ width: subTask.value + '%' }"></div>
  48. </div>
  49. <!-- 子子进度项 -->
  50. <div v-if="subTask.subSubTasks && subTask.subSubTasks.length > 0" class="sub-sub-progress-list">
  51. <div
  52. v-for="(subSubTask, subSubIndex) in subTask.subSubTasks"
  53. :key="subSubIndex"
  54. class="sub-sub-progress-item"
  55. :class="{ 'completed': subSubTask.value >= 100, 'active': subSubTask.isActive }"
  56. >
  57. <div class="sub-sub-progress-info">
  58. <span class="sub-sub-progress-icon">{{ getSubSubProgressIcon(subSubTask) }}</span>
  59. <span class="sub-sub-progress-title">{{ subSubTask.title }}</span>
  60. <span class="sub-sub-progress-percentage">{{ subSubTask.value }}%</span>
  61. </div>
  62. <div class="sub-sub-progress-bar-container">
  63. <div class="sub-sub-progress-bar" :style="{ width: subSubTask.value + '%' }"></div>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. <div class="header">
  74. <div class="user-profile-bar">
  75. <div class="logo">
  76. <img
  77. src="../assets/logoa.png"
  78. alt="logo"
  79. class="logo-img"
  80. />
  81. <!-- <span>Raycos Tech</span> -->
  82. </div>
  83. <div class="user-info-bar">
  84. <!-- 添加主题切换按钮 -->
  85. <div class="theme-switch" @click="toggleTheme" :title="isDarkTheme ? '切换到浅色模式' : '切换到深色模式'">
  86. <transition name="theme-icon" mode="out-in">
  87. <img
  88. v-if="isDarkTheme"
  89. :key="isDarkTheme"
  90. src="../assets/sun2.png"
  91. alt="切换到浅色模式"
  92. class="theme-icon"
  93. />
  94. <img v-else class="theme-icon" src="../assets/night2.png" alt="切换到深色模式">
  95. </transition>
  96. </div>
  97. <div class="user-info" v-if="!isMobile" @click="toggleDropdown">
  98. <div class="user-name">商户名称:{{ userInfo.merchant_name || '未登录用户' }}</div>
  99. <div class="user-name" style="margin-left: 10px;">当前用户:{{ userInfo.username || '未登录用户' }}</div>
  100. <!-- <div class="user-role">{{ userInfo.role || '未设置角色' }}</div> -->
  101. </div>
  102. <div class="avatar" @click="toggleDropdown">
  103. <img src="../assets/avter.png" alt="用户头像" />
  104. </div>
  105. </div>
  106. <!-- Logo :draggable="false"-->
  107. <!-- 下拉菜单 -->
  108. <div class="dropdown-menu" v-show="showDropdown">
  109. <div class="dropdown-item" @click="handleModifyPassword">
  110. <i class="fas fa-key"></i>
  111. 修改密码
  112. </div>
  113. <div class="dropdown-item" @click="handleCreateInvitation">
  114. <i class="fas fa-user-plus"></i>
  115. 创建邀请
  116. </div>
  117. <div class="dropdown-item" @click="handleLogout">
  118. <i class="fas fa-sign-out-alt"></i>
  119. 退出登录
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. <div
  125. class="collapse-left-button"
  126. :class="{ 'menu-collapsed': isMenuCollapsed }"
  127. @click="toggleMenu"
  128. >
  129. <img
  130. :src="isMenuCollapsed ? rightIcon : leftIcon"
  131. alt="toggle"
  132. class="collapse-icon"
  133. />
  134. </div>
  135. <div class="menu" :class="{ collapsed: isMenuCollapsed }">
  136. <!-- 添加收缩按钮 -->
  137. <!-- New Conversation 按钮 -->
  138. <button class="new-conversation-btn" @click="addNewConversation">
  139. <img class="tab-icon" src="../assets/svg/plus.svg" alt="" />
  140. <span>New Conversation</span>
  141. </button>
  142. <!-- 会话列表 -->
  143. <div class="conversation-list">
  144. <div
  145. v-for="conversation in conversations.slice(0, 10)"
  146. :key="conversation.id"
  147. :class="[
  148. 'conversation-item',
  149. { active: currentConversationId === conversation.id },
  150. ]"
  151. @click="switchConversation(conversation.id)"
  152. >
  153. <div class="conversation-title">{{ conversation.title }}</div>
  154. <div class="conversation-meta" v-if="conversation.sessionData">
  155. <span class="conversation-time">{{ formatTime(conversation.sessionData.user_message.created_at) }}</span>
  156. <span class="conversation-type">{{ getConversationType(conversation.sessionData.metadata.type) }}</span>
  157. </div>
  158. </div>
  159. </div>
  160. <!-- 添加模型配置和语音配置的容器 --> <!-- <PermissionConfig/> -->
  161. <div class="config-container">
  162. <div class="config-header" style="border-bottom: 1px solid #e5e5e5;" @click="showSystemGraph">
  163. <img src="../assets/setting.png" alt="permission" class="config-icon" />
  164. <span style="color:#333333;">系统配置</span>
  165. <img src="..//assets/svg/down.svg" alt="permission" style="margin-left:auto;" class="config-icon" />
  166. </div>
  167. <!-- 系统图抽屉 -->
  168. <a-drawer
  169. title="系统配置图"
  170. placement="right"
  171. :width="1000"
  172. :visible="systemGraphVisible"
  173. @close="closeSystemGraph"
  174. >
  175. <SystemGraph />
  176. </a-drawer>
  177. <div class="config-header" @click="goToRoleManagement">
  178. <img src="../assets/lock.png" alt="permission" class="config-icon" />
  179. <span style="color:#333333;">角色及权限</span>
  180. <img src="..//assets/svg/down.svg" alt="permission" style="margin-left:auto;" class="config-icon" />
  181. </div>
  182. <!-- <div class="role-management-entry" @click="goToRoleManagement">
  183. <img src="../assets/lock.png" alt="role" class="config-icon" />
  184. <span>角色管理</span>
  185. </div> -->
  186. <KnowledgeConfig />
  187. <ModelConfig />
  188. <VoiceConfig />
  189. </div>
  190. </div>
  191. <div class="chat">
  192. <div class="chat-header">
  193. <h2>智能助手</h2>
  194. <div class="chat-status">
  195. <span class="status-indicator online"></span>
  196. <span>在线</span>
  197. </div>
  198. </div>
  199. <div v-if="messages.length === 0 && recommendedQuestions.length!== 0" class="welcome-section" style="margin-top:-220px">
  200. <!-- Do you want 部分 -->
  201. <div class="suggestion-section" style="margin-top:185px">
  202. <div class="cards-container">
  203. <div class="suggestion-card">
  204. <div class="suggestion-items" v-if="!inferenceModel">
  205. <!-- Combine both QA pairs and guides -->
  206. <div class="questions-list">
  207. <div
  208. v-for="(question, index) in recommendedQuestions"
  209. :key="index"
  210. class="suggestion-item"
  211. @click="handleQuestionClick(question.example)"
  212. >
  213. {{ question.example }}
  214. </div>
  215. </div>
  216. </div>
  217. <div class="suggestion-items" v-else >
  218. <div
  219. v-for="(item, index) in recommendedQuestions"
  220. :key="index"
  221. class="suggestion-item"
  222. @click="handleQuestionClick(item.example)"
  223. >
  224. {{ item.example }}
  225. </div>
  226. </div>
  227. </div>
  228. </div>
  229. </div>
  230. </div>
  231. <!-- 欢迎消息 -->
  232. <div v-if="messages.length === 0 && recommendedQuestions.length=== 0" class="welcome-section" style="margin-top:-220px">
  233. <!-- Do you want 部分 -->
  234. <div class="suggestion-section">
  235. <h3>嗨,我是你的智能助手</h3>
  236. <div class="cards-container">
  237. <div class="suggestion-card">
  238. <div class="card-header">
  239. <img
  240. src="../assets/svg/hot-for-ux.svg"
  241. alt="hot topics"
  242. class="tab-icon"
  243. />
  244. <h4 v-if="!inferenceModel">推荐问题</h4>
  245. <h4 v-else>待处理问题</h4>
  246. </div>
  247. <p class="card-subtitle" v-if="!inferenceModel">为您精选的热门问题</p>
  248. <!-- <p class="card-subtitle" v-else>当前问题</p> -->
  249. <div class="suggestion-items" v-if="!inferenceModel">
  250. <!-- Combine both QA pairs and guides -->
  251. <div
  252. v-for="(item, index) in [
  253. ...currentQaPairs,
  254. ...currentDesignGuides,
  255. ]"
  256. :key="index"
  257. class="suggestion-item"
  258. @click="handleQaClick(item)"
  259. >
  260. {{ item.question }}
  261. </div>
  262. </div>
  263. <div class="suggestion-items" v-else >
  264. <div
  265. v-for="(item, index) in recommendedQuestions"
  266. :key="index"
  267. class="suggestion-item"
  268. @click="handleQuestionClick(item.example)"
  269. >
  270. {{ item.example }}
  271. </div>
  272. </div>
  273. </div>
  274. <!-- Hot Topics 卡片 --><!-- Design Guide 卡片 -->
  275. <!-- <div class="suggestion-card">
  276. <div class="card-header">
  277. <img
  278. src="../assets/svg/hot-for-ux.svg"
  279. alt="hot topics"
  280. class="tab-icon"
  281. />
  282. <h4>知识库相关问题:</h4>
  283. </div>
  284. <p class="card-subtitle">我们可以这样向知识库提问</p>
  285. <div class="suggestion-items">
  286. <div
  287. v-for="(qa, index) in currentQaPairs"
  288. :key="index"
  289. class="suggestion-item"
  290. @click="handleQaClick(qa)"
  291. >
  292. {{ qa.question }}
  293. </div>
  294. </div>
  295. </div>
  296. <div class="suggestion-card">
  297. <div class="card-header">
  298. <img
  299. src="../assets/svg/read.svg"
  300. alt="hot topics"
  301. class="tab-icon"
  302. />
  303. <h4>网上热搜问答</h4>
  304. </div>
  305. <p class="card-subtitle">搜索网上的热门回答</p>
  306. <div class="suggestion-items">
  307. <div
  308. v-for="(guide, index) in currentDesignGuides"
  309. :key="index"
  310. class="suggestion-item"
  311. @click="handleQaClick(guide)"
  312. >
  313. {{ guide.question }}
  314. </div>
  315. </div>
  316. </div> -->
  317. </div>
  318. </div>
  319. </div>
  320. <!-- 修改消息列表部分 -->
  321. <div v-if="messages.length !== 0" class="message-list" ref="messageList">
  322. <!-- 添加流式思考步骤显示 -->
  323. <div v-if="currentThinkingSteps && currentThinkingSteps.length > 0" class="thinking-steps-stream">
  324. <div v-for="(step, index) in currentThinkingSteps"
  325. :key="index"
  326. class="thinking-step-stream"
  327. :class="[step.type, {'fade-in': true}]">
  328. {{ step.displayContent !== undefined ? step.displayContent : step.content }}
  329. <div v-if="index === currentThinkingSteps.length - 1" class="typing-indicator">
  330. <span></span>
  331. <span></span>
  332. <span></span>
  333. </div>
  334. </div>
  335. </div>
  336. <div
  337. v-for="(message,index) in messages"
  338. :key="message.id"
  339. :class="[
  340. 'message-item',
  341. message.role === 'user' ? 'user' : 'assistant',
  342. ]"
  343. >
  344. <div class="message-bubble">
  345. <div class="message-content">
  346. <!-- 添加thinking steps显示 -->
  347. <div v-if="message.thinkingSteps && message.thinkingSteps.length > 0" class="thinking-steps">
  348. <!-- <div class="thinking-steps-header">
  349. <span class="thinking-title">🤔 思考过程</span>
  350. </div> :class="step.type"-->
  351. <div v-for="(step, index) in message.thinkingSteps"
  352. :key="index"
  353. class="thinking-step"
  354. >
  355. <div class="step-content">{{ step.displayContent !== undefined ? step.displayContent : step.content }}</div>
  356. <!-- <div class="step-meta">
  357. <span class="step-type">{{ getStepTypeName(step.type) }}</span>
  358. <span class="step-confidence">置信度: {{ (step.confidence * 100).toFixed(0) }}%</span>
  359. </div> -->
  360. </div>
  361. </div>
  362. <template v-if="message.role === 'user' && message.files">
  363. <div
  364. v-for="file in message.files"
  365. :key="file.name"
  366. class="file-message"
  367. >
  368. <!-- 图片文件显示 -->
  369. <template v-if="isImageFile(file)">
  370. <div class="image-preview">
  371. <img :src="file.url" class="preview-image" />
  372. </div>
  373. </template>
  374. <!-- 视频文件显示 -->
  375. <template v-else-if="isVideoFile(file)">
  376. <div class="video-preview">
  377. <video
  378. controls
  379. class="preview-video"
  380. :src="file.url"
  381. preload="metadata"
  382. >
  383. Your browser does not support the video tag.
  384. </video>
  385. </div>
  386. </template>
  387. <!-- 文档文件显示 -->
  388. <template v-else>
  389. <div class="file-info-display">
  390. <img :src="getFileIcon(file)" class="file-type-icon" />
  391. <div class="file-details">
  392. <span class="file-name" :title="file.name">{{
  393. file.name
  394. }}</span>
  395. <span class="file-size">{{ file.size }}</span>
  396. </div>
  397. </div>
  398. </template>
  399. </div>
  400. </template>
  401. <div
  402. class="message-text"
  403. v-if="message.role === 'assistant'"
  404. v-html="renderMarkdown(message.displayContent)"
  405. ></div>
  406. <div v-else>{{ message.content }}</div>
  407. <div v-if="message.analysis_result" style="background-color: #f5f5f5; padding: 12px; border-radius: 8px; margin: 8px 0;">
  408. <div v-for="value in message.analysis_result.insights" style="margin-bottom: 6px; border-bottom: 1px dashed #e5e5e5;">
  409. {{ value.message }}
  410. </div>
  411. <div v-for="value in message.analysis_result.issues" style="margin-bottom: 6px; border-bottom: 1px dashed #e5e5e5;">
  412. {{ value.message }}
  413. </div>
  414. <div v-for="value in message.analysis_result.recommendations" style="margin-bottom: 6px; border-bottom: 1px dashed #e5e5e5;">
  415. {{ value.description }}
  416. </div>
  417. <div v-for="value in message.automation_plan.steps" style="margin-bottom: 6px; ">
  418. <a href="#" @click="handleStepClick(value)" style="color: #0066cc; text-decoration: none;"> {{ value.description }}</a>
  419. </div>
  420. </div>
  421. <!-- 音频控制按钮 -->
  422. <div
  423. v-if="message.role === 'assistant'"
  424. class="audio-controls"
  425. >
  426. <button class="audio-btn" @click="handleAudioClick(message)">
  427. <!-- 只在当前消息正在播放时显示波形动画 -->
  428. <div
  429. v-if="currentPlayingId === message.id"
  430. class="wave-animation"
  431. >
  432. <span class="wave-bar"></span>
  433. <span class="wave-bar"></span>
  434. <span class="wave-bar"></span>
  435. <span class="wave-bar"></span>
  436. </div>
  437. <!-- 其他情况显示播放图标 -->
  438. <img v-else :src="playIcon" alt="播放" class="audio-icon" />
  439. </button>
  440. </div>
  441. </div>
  442. </div>
  443. <!-- 推荐问题组件 -->
  444. <div style="width: 80%;" v-if=" index === messages.length - 1 && message.role === 'assistant' &&recommended" class="recommended-questions">
  445. <div class="questions-list">
  446. <div
  447. v-for="(question, index) in recommendedQuestions"
  448. :key="index"
  449. class="question-item"
  450. @click="handleQuestionClick(question.example)"
  451. >
  452. {{ question.example }}
  453. </div>
  454. </div>
  455. </div>
  456. <div style="width: 80%;" v-if="message.role === 'assistant' && message.showRecommendedQuestions" class="recommended-questions">
  457. <div class="questions-header">
  458. <!-- <img src="../assets/svg/hot-for-ux.svg" alt="推荐" class="hot-icon" /> -->
  459. <!-- <div class="questions-subtitle">为您精选的热门问题</div> -->
  460. </div>
  461. <div class="questions-list">
  462. <div
  463. v-for="(question, index) in recommendedQuestions"
  464. :key="index"
  465. class="question-item"
  466. @click="handleQuestionClick(question.example)"
  467. >
  468. {{ question.example }}
  469. </div>
  470. </div>
  471. </div>
  472. </div>
  473. </div>
  474. <!-- 输入框 -->
  475. <div class="input-container">
  476. <!-- 搜索开关组 -->
  477. <div class="search-toggles" :class="{ 'compact': isCompact }">
  478. <div class="left_item" style="display: flex;">
  479. <div class="search-toggle-item" style="width:33%;">
  480. <div class="toggle-content">
  481. <GlobalOutlined />
  482. <span class="toggle-text" >互联网</span><!-- v-show="!isCompact" -->
  483. <div class="toggle-switch">
  484. <input
  485. type="checkbox"
  486. id="webSearchToggle"
  487. v-model="enableWebSearch"
  488. @change="handleWebSearchToggle"
  489. :disabled="attachedFiles.length > 0"
  490. class="toggle-input"
  491. />
  492. <label
  493. for="webSearchToggle"
  494. class="toggle-label"
  495. :class="{ disabled: attachedFiles.length > 0 }"
  496. >
  497. <span class="toggle-slider"></span>
  498. </label>
  499. </div>
  500. </div>
  501. </div>
  502. <div class="search-toggle-item" style="width:33%;">
  503. <div class="toggle-content">
  504. <DatabaseOutlined />
  505. <span class="toggle-text" >知识库</span><!-- v-show="!isCompact" -->
  506. <div class="toggle-switch">
  507. <input
  508. type="checkbox"
  509. id="knowledgeSearchToggle"
  510. v-model="enableKnowledgeSearch"
  511. @change="handleKnowledgeToggle"
  512. class="toggle-input"
  513. />
  514. <label
  515. for="knowledgeSearchToggle"
  516. class="toggle-label"
  517. >
  518. <span class="toggle-slider"></span>
  519. </label>
  520. </div>
  521. </div>
  522. </div>
  523. <div class="search-toggle-item" style="width:33%;">
  524. <div class="toggle-content">
  525. <DatabaseOutlined />
  526. <span class="toggle-text" >智能体</span><!-- v-show="!isCompact" -->
  527. <div class="toggle-switch">
  528. <input
  529. type="checkbox"
  530. id="inferenceModelId"
  531. v-model="inferenceModel"
  532. class="toggle-input"
  533. />
  534. <label
  535. for="inferenceModelId"
  536. class="toggle-label"
  537. >
  538. <span class="toggle-slider"></span>
  539. </label>
  540. </div>
  541. </div>
  542. </div>
  543. </div>
  544. <div class="search-toggle-item">
  545. <div class="toggle-content">
  546. <!-- <SelectOutlined /> -->
  547. <!-- <span class="toggle-text">模型选择</span> -->
  548. <select
  549. class="model-select"
  550. :value="selectedModel"
  551. @change="handleModelChange($event.target.value)"
  552. :disabled="isLoadingModels"
  553. >
  554. <option v-if="isLoadingModels" value="">加载中...</option>
  555. <option v-else-if="models.length === 0" value="">无可用模型</option>
  556. <option
  557. v-for="model in models"
  558. :key="model.id"
  559. :value="model.id"
  560. >
  561. {{ model.name }}
  562. </option>
  563. </select>
  564. </div>
  565. </div>
  566. </div>
  567. <!-- 添加附件面板 -->
  568. <div v-if="showAttachments" class="attachments-panel">
  569. <div class="panel-content">
  570. <div class="attachments-header">
  571. <span>Attachments</span>
  572. <button class="close-btn" @click="toggleAttachments">
  573. <img src="../assets/svg/close.svg" alt="" />
  574. </button>
  575. </div>
  576. <div
  577. v-if="attachedFiles.length === 0"
  578. style="display: flex; justify-content: center"
  579. >
  580. <div
  581. class="upload-area"
  582. :class="{ 'has-files': attachedFiles.length > 0 }"
  583. @click="triggerFileInput"
  584. @drop.prevent="handleFileDrop"
  585. @dragover.prevent
  586. @dragenter.prevent
  587. >
  588. <!-- 移除条件判断,让整个区域始终可点击 -->
  589. <template v-if="isUploading">
  590. <div class="upload-loading">
  591. <div class="loading-spinner"></div>
  592. <div class="upload-text">Uploading...</div>
  593. </div>
  594. </template>
  595. <template v-else>
  596. <img
  597. src="../assets/svg/upload.svg"
  598. alt="upload"
  599. class="upload-icon"
  600. />
  601. <div class="upload-text">Upload files</div>
  602. <div class="upload-hint">
  603. Click or drag files to this area to upload
  604. </div>
  605. </template>
  606. <input
  607. type="file"
  608. ref="fileInput"
  609. style="display: none"
  610. @change="handleFileUpload"
  611. multiple
  612. />
  613. </div>
  614. </div>
  615. <!-- 上传内容列表 -->
  616. <div v-if="attachedFiles.length !== 0">
  617. <div class="file-list">
  618. <div
  619. v-for="file in attachedFiles"
  620. :key="file.name"
  621. class="file-item"
  622. :class="{ 'is-image': isImageFile(file) }"
  623. >
  624. <div :class="isImageFile(file) ? 'file-wrapper' : ''">
  625. <!-- 添加文件 loading 状态 -->
  626. <div v-if="file.isUploading" class="file-loading">
  627. <div class="loading-spinner"></div>
  628. </div>
  629. <!-- 其他文件显示逻辑保持不变 -->
  630. <img
  631. v-else-if="isImageFile(file)"
  632. :src="file.url"
  633. alt="file"
  634. class="file-icon"
  635. />
  636. <video
  637. v-else-if="isVideoFile(file)"
  638. :src="file.url"
  639. class="file-icon"
  640. preload="metadata"
  641. >
  642. Your browser does not support the video tag.
  643. </video>
  644. <img
  645. v-else
  646. :src="getFileIcon(file)"
  647. alt="file"
  648. :class="
  649. isImageFile(file) || isVideoFile(file)
  650. ? 'file-icon'
  651. : ''
  652. "
  653. />
  654. <button
  655. class="remove-btn"
  656. @click.stop="removeFile(file)"
  657. v-if="!file.isUploading"
  658. >
  659. ×
  660. </button>
  661. </div>
  662. <div class="file-info" v-if="!isImageFile(file)">
  663. <span class="file-name">{{ file.name }}</span>
  664. <span class="file-size">{{ file.sizeFormatted }}</span>
  665. </div>
  666. </div>
  667. <button class="add-more-btn" @click.stop="triggerFileInput">
  668. <img src="../assets/svg/plus.svg" alt="add" />
  669. </button>
  670. </div>
  671. <input
  672. type="file"
  673. ref="fileInput"
  674. style="display: none"
  675. @change="handleFileUpload"
  676. multiple
  677. />
  678. </div>
  679. <!-- <div v-if="attachedFiles.length" class="attached-files">
  680. <div
  681. v-for="file in attachedFiles"
  682. :key="file.name"
  683. class="file-item"
  684. >
  685. <FileOutlined />
  686. <span>{{ file.name }}</span>
  687. <button class="remove-btn" @click="removeFile(file)">
  688. </button>
  689. </div>
  690. </div> -->
  691. </div>
  692. </div>
  693. <!-- 输入框部分 -->
  694. <div class="input-wrapper">
  695. <button class="attachment-btn" @click="toggleAttachments">
  696. <img
  697. src="../assets/svg/attachment.svg"
  698. alt="attachment"
  699. class="tab-icon"
  700. />
  701. </button>
  702. <input
  703. type="text"
  704. class="message-input"
  705. v-model="inputContent"
  706. @keyup.enter="sendMessage"
  707. placeholder="Type a message..."
  708. /><!-- @input="handleInputChange" :disabled="(!inputContent && attachedFiles.length === 0)"-->
  709. <button
  710. class="send-btn"
  711. @click="sendMessage"
  712. >
  713. <template v-if="isTyping">
  714. <span class="loading-btn">
  715. <span class="loading-square"></span>
  716. </span>
  717. </template>
  718. <template v-else>
  719. <img src="../assets/svg/up.svg" alt="send" />
  720. </template>
  721. </button>
  722. </div>
  723. </div>
  724. <!-- 浮动操作按钮 (FAB) -->
  725. <div class="fab" :class="{ 'open': isFabOpen }" @click="toggleFab">
  726. <!-- 初始状态:显示三个点 -->
  727. <div class="fab-dots" v-if="!isFabOpen">
  728. <span></span>
  729. <span></span>
  730. <span></span>
  731. </div>
  732. <!-- 展开状态:显示三个选项按钮 -->
  733. <div class="option reply" :class="{ 'open': isFabOpen }" @click.stop="handleReply">
  734. <div class="option-content option-content--below">
  735. <CreditCardOutlined class="option-icon" />
  736. <span class="option-label">查看</span>
  737. </div>
  738. </div>
  739. <div class="option love" :class="{ 'open': isFabOpen }" @click.stop="handleStepClick">
  740. <div class="option-content option-content--below">
  741. <AuditOutlined class="option-icon" />
  742. <span class="option-label">任务</span>
  743. </div>
  744. </div>
  745. <div class="option delete" :class="{ 'open': isFabOpen }" @click.stop="handleDelete">
  746. <div class="option-content option-content--below">
  747. <ProfileOutlined class="option-icon" />
  748. <span class="option-label">命令集</span>
  749. </div>
  750. </div>
  751. <!-- 关闭按钮:只在展开状态显示 -->
  752. <div class="close" v-if="isFabOpen" @click.stop="toggleFab">
  753. <i class="material-icons">close</i>
  754. </div>
  755. </div>
  756. </div>
  757. <div
  758. v-if="!isMobile"
  759. class="right_menu"
  760. :class="{
  761. collapsed: !isRightMenuVisible
  762. }"
  763. :style="{ width: rightMenuWidth + 'px' }"
  764. >
  765. <div v-if="inferenceModel">
  766. <div style="height: 91vh;overflow: auto;" class="file-list">
  767. <!-- <div class="panel-header">
  768. <h3>查询结果</h3>
  769. <button class="panel-toggle">
  770. <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  771. <polyline points="6,9 12,15 18,9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  772. </svg>
  773. </button>
  774. </div> -->
  775. <!-- 步骤显示区域 -->
  776. <div id="stepsContainer" v-show="showSteps" class="steps-container">
  777. <h3 class="steps-title">处理步骤</h3>
  778. <div id="stepsList"></div>
  779. </div>
  780. <!-- 结果显示区域 -->
  781. <div id="resultContent" v-html="formatted_data"></div>
  782. </div>
  783. </div>
  784. <!-- 修改收缩按钮的位置和样式 -->
  785. <!-- <div
  786. class="collapse-button"
  787. :class="{
  788. 'menu-expanded': !isRightMenuCollapsed,
  789. 'menu-collapsed': isRightMenuCollapsed
  790. }"
  791. @click="toggleRightMenu"
  792. >
  793. <img
  794. :src="isRightMenuCollapsed ? leftIcon : rightIcon"
  795. alt="toggle"
  796. class="collapse-icon"
  797. />
  798. </div> -->
  799. <!-- 添加拖动条 -->
  800. <div
  801. class="resize-handle"
  802. @mousedown="startResize"
  803. @touchstart="startResize"
  804. ></div>
  805. <div class="right-menu-content">
  806. <!-- 添加 Tab 切换 -->
  807. <!-- 搜索面板 -->
  808. <div v-show="activeTab === 'search'" class="panel-container">
  809. <!-- <div class="search-header">
  810. <span>搜索结果</span>
  811. <div class="web-search-toggle">
  812. <input
  813. type="checkbox"
  814. id="searchToggle"
  815. v-model="enableWebSearch"
  816. class="toggle-input"
  817. />
  818. <label for="searchToggle" class="toggle-label">
  819. {{ enableWebSearch ? '搜索已开启' : '搜索已关闭' }}
  820. </label>
  821. </div>
  822. </div> -->
  823. <!-- v-if="enableWebSearch" -->
  824. <SearchResults
  825. :searchResults="searchResults"
  826. :loading="isSearchLoading"
  827. :total="searchTotal"
  828. :enableWebSearch="enableWebSearch"
  829. :message="currentSearchQuery"
  830. @update:enableWebSearch="handleSearchToggle"
  831. />
  832. </div>
  833. <!-- 文档预览面板 -->
  834. <div v-show="activeTab === 'preview'" class="panel-container">
  835. <div class="preview-header">
  836. <span>文档预览</span>
  837. </div>
  838. <div class="document-preview">
  839. <div class="preview-container">
  840. <!-- 文档列表 -->
  841. <!-- <div class="document-list">
  842. <div v-if="attachedFiles.length === 0" class="empty-state">
  843. <FileOutlined class="empty-icon" />
  844. <p>暂无文档</p>
  845. </div>
  846. <div v-else v-for="doc in attachedFiles" :key="doc.name" class="document-item"
  847. :class="{ 'active': currentDoc?.name === doc.name }"
  848. @click="handleDocClick(doc)">
  849. <div class="document-info">
  850. <div class="doc-icon">
  851. <img
  852. v-if="isImageFile(doc)"
  853. :src="doc.url"
  854. class="preview-thumbnail"
  855. alt="preview"
  856. />
  857. <video
  858. v-else-if="isVideoFile(doc)"
  859. :src="doc.url"
  860. class="preview-thumbnail"
  861. preload="metadata"
  862. />
  863. <img
  864. v-else
  865. :src="getFileIcon(doc)"
  866. alt="file"
  867. class="file-icon"
  868. />
  869. </div>
  870. <div class="info">
  871. <div class="name" :title="doc.name">{{ doc.name }}</div>
  872. <div class="size">{{ doc.sizeFormatted || formatFileSize(doc.size) }}</div>
  873. </div>
  874. </div>
  875. <div class="actions">
  876. <button class="action-btn" @click.stop="handleDownload(doc)" title="下载">
  877. <DownloadOutlined />
  878. </button>
  879. </div>
  880. </div>
  881. </div> -->
  882. <!-- 直接预览区域 -->
  883. <div v-if="currentDoc" class="direct-preview">
  884. <div class="preview-header">
  885. <span>{{ currentDoc.name }}</span>
  886. <button class="close-btn" @click="closePreview">
  887. <CloseOutlined />
  888. </button>
  889. </div>
  890. <div class="preview-body">
  891. <!-- 图片预览 -->
  892. <img
  893. v-if="isImageFile(currentDoc)"
  894. :src="currentDoc.url"
  895. class="preview-image"
  896. alt="preview"
  897. />
  898. <!-- 视频预览 -->
  899. <video
  900. v-else-if="isVideoFile(currentDoc)"
  901. :src="currentDoc.url"
  902. controls
  903. class="preview-video"
  904. />
  905. <!-- Word文档预览 -->
  906. <div v-else-if="isWordFile(currentDoc)">
  907. <vue-office-docx
  908. :src="currentDoc.url"
  909. class="doc-preview"
  910. @rendered="handleRendered"
  911. @error="handleError"
  912. />
  913. </div>
  914. <!-- Excel文档预览 -->
  915. <div v-else-if="isExcelFile(currentDoc)">
  916. <vue-office-excel
  917. :options="excelOptions"
  918. @rendered="handleRendered"
  919. @error="handleExcelError"
  920. :src="currentDoc.url"
  921. class="doc-preview"
  922. />
  923. </div>
  924. <!-- PDF预览-->
  925. <iframe v-else-if="isPdfFile(currentDoc)" :src="currentDoc.url" style="width: 100%; height: 100%;" frameborder="0"></iframe>
  926. <!-- 其他文件预览 -->
  927. <div v-else class="file-preview">
  928. <FileOutlined class="large-icon" />
  929. <p>该文件类型暂不支持预览</p>
  930. </div>
  931. </div>
  932. </div>
  933. </div>
  934. </div>
  935. </div>
  936. <!-- 添加知识库结果面板 -->
  937. <div v-show="activeTab === 'knowledge'" class="panel-container">
  938. <!-- <div class="search-header">
  939. <span>知识库搜索结果</span>
  940. </div> -->
  941. <!-- v-if="enableKnowledgeSearch" -->
  942. <KnowledgeResults
  943. :searchResults="knowledgeResults"
  944. :loading="isKnowledgeLoading"
  945. :total="knowledgeTotal"
  946. :message="currentSearchQuery"
  947. />
  948. </div>
  949. </div>
  950. </div>
  951. </div>
  952. </template>
  953. <script setup>
  954. import SystemGraph from '../components/SystemGraph/index.vue';
  955. import { ref, reactive, nextTick, onUnmounted, onMounted, computed, watch } from "vue";
  956. import {
  957. PlusOutlined,
  958. FireOutlined,
  959. ReadOutlined,
  960. HeartOutlined,
  961. SmileOutlined,
  962. CommentOutlined,
  963. CloudUploadOutlined,
  964. PaperClipOutlined,
  965. ShareAltOutlined,
  966. EllipsisOutlined,
  967. CloseOutlined,
  968. FileOutlined,
  969. ArrowUpOutlined,
  970. UploadOutlined,
  971. FileSearchOutlined,
  972. GlobalOutlined,
  973. DatabaseOutlined,
  974. FolderOutlined,
  975. SelectOutlined,
  976. DownloadOutlined,
  977. CreditCardOutlined,
  978. AuditOutlined,
  979. ProfileOutlined
  980. } from "@ant-design/icons-vue";
  981. import leftIcon from "../assets/svg/left.svg";
  982. import rightIcon from "../assets/svg/right.svg";
  983. import plusIcon from "../assets/svg/plus.svg";
  984. import hotForUxIcon from "../assets/svg/hot-for-ux.svg";
  985. import readIcon from "../assets/svg/read.svg";
  986. import attachmentIcon from "../assets/svg/attachment.svg";
  987. import uploadIcon from "../assets/svg/upload.svg";
  988. import closeIcon from "../assets/svg/close.svg";
  989. import upIcon from "../assets/svg/up.svg";
  990. import wordIcon from "../assets/svg/word.svg";
  991. import pauseIcon from "../assets/svg/pause.svg";
  992. import playIcon from "../assets/svg/play.svg";
  993. import axios from "axios";
  994. import { useStore } from "vuex";
  995. import MarkdownIt from "markdown-it";
  996. import ModelConfig from "../components/ModelConfig/index.vue";
  997. import SearchResults from "../components/SearchResults/index.vue";
  998. import VoiceConfig from "../components/VoiceConfig/index.vue";
  999. import KnowledgeConfig from "../components/KnowledgeConfig/index.vue";
  1000. import PermissionConfig from "../components/PermissionConfig/index.vue";
  1001. import ExportButton from "../components/ExportButton/index.vue";
  1002. import dayjs from 'dayjs';
  1003. import DocumentPreview from "../components/DocumentPreview/index.vue";
  1004. import KnowledgeResults from "../components/KnowledgeResults/index.vue";
  1005. import ChangePasswordDialog from '../components/ChangePasswordDialog.vue'
  1006. import { useRouter } from 'vue-router'
  1007. import { message } from 'ant-design-vue';
  1008. import VueOfficeDocx from '@vue-office/docx';
  1009. import VueOfficeExcel from '@vue-office/excel';
  1010. // import { getRecommendedQuestions } from '../api/report';
  1011. /* import '@vue-office/docx/lib/index.css';
  1012. import '@vue-office/excel/lib/index.css'; */
  1013. // 初始化 markdown-it
  1014. const md = new MarkdownIt({
  1015. html: true,
  1016. linkify: true,
  1017. typographer: true,
  1018. });
  1019. // 响应式状态
  1020. const headerOpen = ref(false);
  1021. const inputContent = ref("");
  1022. const showAttachments = ref(false);
  1023. const isRightMenuCollapsed = ref(false);
  1024. const fileInput = ref(null);
  1025. const attachedFiles = ref([]);
  1026. const messages = ref([]);
  1027. const isLoading = ref(false);
  1028. const currentConversationId = ref(1);
  1029. const conversationCounter = ref(1);
  1030. const messageList = ref(null);
  1031. const store = useStore();
  1032. const router = useRouter()
  1033. const goToRoleManagement = () => {
  1034. router.push('/role');
  1035. };
  1036. // 系统图抽屉控制
  1037. const systemGraphVisible = ref(false);
  1038. const showSystemGraph = () => {
  1039. systemGraphVisible.value = true;
  1040. };
  1041. const closeSystemGraph = () => {
  1042. systemGraphVisible.value = false;
  1043. };
  1044. // 保留原有的跳转函数以备用
  1045. const goToSystemGraph = () => {
  1046. router.push('/system-graph');
  1047. };
  1048. // 会话数据
  1049. const conversations = ref([]);
  1050. // 添加打字效果相关的状态
  1051. const typingSpeed = 50; // 打字速度(毫秒/字符)
  1052. const isTyping = ref(false);
  1053. const typingTimeout = ref(null); // 添加打字超时引用
  1054. // 逐字输出一个文本到指定对象的 display 字段
  1055. const typeTextTo = (target, fullTextKey = 'content', displayKey = 'displayContent', minDelay = 15, maxDelay = 35) => {
  1056. if (!target) return Promise.resolve();
  1057. const full = target[fullTextKey] || '';
  1058. target[displayKey] = '';
  1059. let index = 0;
  1060. return new Promise((resolve) => {
  1061. const step = () => {
  1062. if (index >= full.length) return resolve();
  1063. const ch = full[index];
  1064. target[displayKey] += ch;
  1065. index += 1;
  1066. const delay = /[\u4e00-\u9fa5]/.test(ch) ? maxDelay : minDelay;
  1067. // 等待 DOM 刷新并在下一帧再调度下一个字符,确保逐字可见
  1068. nextTick(() => {
  1069. requestAnimationFrame(() => {
  1070. setTimeout(step, delay);
  1071. });
  1072. });
  1073. };
  1074. step();
  1075. });
  1076. };
  1077. // 依次为 message.thinkingSteps 中从 startIndex 开始的各步逐字输出
  1078. const animateThinkingStepsForMessage = async (message, startIndex = 0) => {
  1079. try {
  1080. console.log('message',startIndex)
  1081. if (!message || !Array.isArray(message.thinkingSteps)) return;
  1082. for (let i = startIndex; i < message.thinkingSteps.length; i += 1) {
  1083. console.log('message.thinkingSteps',message.thinkingSteps)
  1084. const step = message.thinkingSteps[i];
  1085. if (!step.displayContent) step.displayContent = '';
  1086. await typeTextTo(step);
  1087. }
  1088. } catch (err) {
  1089. console.error('animateThinkingStepsForMessage error:', err);
  1090. // 回退到直接展示
  1091. for (let i = startIndex; i < (message.thinkingSteps?.length || 0); i += 1) {
  1092. const step = message.thinkingSteps[i];
  1093. if (step) step.displayContent = step.content || '';
  1094. }
  1095. }
  1096. };
  1097. // 添加音频播放相关的响应式变量
  1098. const audioPlayer = ref(null);
  1099. const isPlaying = ref(false);
  1100. // 添加当前播放消息的 ID
  1101. const currentPlayingId = ref(null);
  1102. const currentAudioSource = ref(null);
  1103. // 添加新的响应式变量
  1104. const isUploading = ref(false);
  1105. // 添加新的响应式状态
  1106. const documentSummary = ref(null);
  1107. const isLoadingSummary = ref(false);
  1108. const currentQaPairs = ref([]);
  1109. const currentDesignGuides = ref([]);
  1110. let rotationInterval = null;
  1111. // 添加新的响应式状态
  1112. const searchResults = ref([]);
  1113. const isSearchLoading = ref(false);
  1114. const searchTotal = ref(0);
  1115. // 添加互联网搜索开关状态
  1116. const enableWebSearch = ref(false);
  1117. // 添加新的响应式变量
  1118. const isMenuCollapsed = ref(false);
  1119. // 添加移动端检测
  1120. const isMobile = ref(false);
  1121. //知识库搜索
  1122. const enableKnowledgeSearch = ref(false);
  1123. // FAB 浮动操作按钮状态
  1124. const isFabOpen = ref(false);
  1125. const knowledgeResults = ref([]);
  1126. const knowledgeTotal = ref(0);
  1127. const isKnowledgeLoading = ref(false);
  1128. const formatted_data = ref('');
  1129. const showSteps = ref(false);
  1130. const steps = ref([]);
  1131. // 进度条弹窗相关状态
  1132. const showProgressModal = ref(false);
  1133. const progressList = ref([]);
  1134. // 推荐问题相关状态
  1135. const recommendedQuestions = ref([]);
  1136. const showRecommendedQuestions = ref(false);
  1137. // SSE消息处理函数
  1138. const handleSSEMessage = (event, data) => {
  1139. // 立即处理每个事件
  1140. switch (event) {
  1141. case 'html_start':
  1142. formatted_data.value = '';
  1143. break;
  1144. case 'html_chunk':
  1145. if (data && typeof data.html === 'string') {
  1146. // 直接追加新内容到现有内容
  1147. formatted_data.value += data.html;
  1148. // 确保滚动到最新内容
  1149. nextTick(() => {
  1150. const resultContent = document.getElementById('resultContent');
  1151. if (resultContent) {
  1152. resultContent.scrollTop = resultContent.scrollHeight;
  1153. }
  1154. });
  1155. }
  1156. break;
  1157. case 'html_end':
  1158. // 完成渲染,可以在这里添加完成的标记
  1159. break;
  1160. case 'init_steps':
  1161. showSteps.value = true;
  1162. // 立即初始化步骤
  1163. initializeSteps(data.steps);
  1164. break;
  1165. case 'step_update':
  1166. // 立即更新步骤状态
  1167. updateStepElement(data.step_id, data.status, data.details, data.progress);
  1168. break;
  1169. case 'final_summary':
  1170. break;
  1171. case 'stream_end':
  1172. showSteps.value = false;
  1173. /* // 立即初始化步骤
  1174. initializeSteps(data.steps); */
  1175. break;
  1176. case 'error':
  1177. console.error('SSE错误:', data.message);
  1178. /* ElMessage.error(data.message || '处理过程中出现错误'); */
  1179. break;
  1180. }
  1181. };
  1182. // 初始化步骤
  1183. const initializeSteps = (stepsData) => {
  1184. const stepsList = document.getElementById('stepsList');
  1185. if (!stepsList) return;
  1186. stepsList.innerHTML = '';
  1187. steps.value = stepsData;
  1188. stepsData.forEach(step => {
  1189. stepsList.appendChild(createStepElement(step));
  1190. });
  1191. };
  1192. // 创建步骤元素
  1193. const createStepElement = (step) => {
  1194. const stepEl = document.createElement('div');
  1195. stepEl.className = `step ${step.status}`;
  1196. stepEl.id = `step-${step.step_id}`;
  1197. /* <div class="step-icon">${getStepIcon(step.status)}</div> */
  1198. stepEl.innerHTML = `
  1199. <div class="step-header">
  1200. <div class="step-header-content">
  1201. <div class="step-icon" style="display: none;">${getStepIcon(step.status)}</div>
  1202. <div class="step-name">${step.name || step.step_id}</div>
  1203. </div>
  1204. </div>
  1205. <div class="step-details" style="margin-bottom:15px;">${step.details || ''}</div>
  1206. <div class="progress-bar">
  1207. <div class="progress-fill" style="width: ${step.progress || 0}%"></div>
  1208. </div>
  1209. `;
  1210. return stepEl;
  1211. };
  1212. // 更新步骤元素
  1213. const updateStepElement = (stepId, status, details, progress) => {
  1214. const stepEl = document.getElementById(`step-${stepId}`);
  1215. if (!stepEl) return;
  1216. stepEl.className = `step ${status}`;
  1217. stepEl.querySelector('.step-icon').textContent = getStepIcon(status);
  1218. if (details) {
  1219. stepEl.querySelector('.step-details').textContent = details;
  1220. }
  1221. if (progress !== undefined) {
  1222. stepEl.querySelector('.progress-fill').style.width = `${progress}%`;
  1223. }
  1224. };
  1225. // 获取步骤图标
  1226. const getStepIcon = (status) => {
  1227. switch (status) {
  1228. case 'pending': return '⏳';
  1229. case 'running': return '🔄';
  1230. case 'completed': return '✅';
  1231. case 'error': return '❌';
  1232. default: return '⏳';
  1233. }
  1234. };
  1235. // 智能体
  1236. const inferenceModel = ref(false);
  1237. // 检测设备类型
  1238. const checkMobile = () => {
  1239. isMobile.value = window.innerWidth <= 768;
  1240. if (isMobile.value) {
  1241. isRightMenuCollapsed.value = true; // 在移动设备下自动收起右侧菜单
  1242. isMenuCollapsed.value = true;
  1243. }else{
  1244. isRightMenuCollapsed.value = false;
  1245. isMenuCollapsed.value = false;
  1246. }
  1247. };
  1248. // 添加窗口大小改变事件监听
  1249. onMounted(() => {
  1250. checkMobile(); // 初始检查
  1251. window.addEventListener('resize', checkMobile);
  1252. fetchChatHistory(); // 获取聊天历史
  1253. });
  1254. const showDropdown = ref(false);
  1255. const toggleDropdown = () => {
  1256. console.log(showDropdown.value);
  1257. showDropdown.value = !showDropdown.value;
  1258. };
  1259. // 添加遮罩层点击处理
  1260. const handleOverlayClick = () => {
  1261. if (isMobile.value) {
  1262. isMenuCollapsed.value = true;
  1263. isRightMenuCollapsed.value = true;
  1264. document.body.style.overflow = 'auto';
  1265. }
  1266. };
  1267. // 修改菜单切换逻辑
  1268. const toggleMenu = () => {
  1269. isMenuCollapsed.value = !isMenuCollapsed.value;
  1270. if (isMobile.value) {
  1271. document.body.style.overflow = isMenuCollapsed.value ? 'auto' : 'hidden';
  1272. if (!isMenuCollapsed.value) {
  1273. isRightMenuCollapsed.value = true; // 确保右侧菜单关闭
  1274. }
  1275. }
  1276. // 更新聊天区域的位置
  1277. if (document.querySelector('.chat')) {
  1278. document.querySelector('.chat').style.left = isMenuCollapsed.value ? '460px' : '260px';
  1279. }
  1280. };
  1281. // 修改右侧菜单切换逻辑
  1282. const toggleRightMenu = () => {
  1283. isRightMenuCollapsed.value = false;
  1284. if (isRightMenuCollapsed.value) {
  1285. // 收起菜单时的处理
  1286. if (document.querySelector('.chat')) {
  1287. document.querySelector('.chat').style.right = '0';
  1288. }
  1289. } else {
  1290. enableWebSearch.value = true;
  1291. // 展开菜单时的处理
  1292. if (document.querySelector('.chat')) {
  1293. document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
  1294. }
  1295. }
  1296. if (isMobile.value) {
  1297. document.body.style.overflow = isRightMenuCollapsed.value ? 'auto' : 'hidden';
  1298. if (!isRightMenuCollapsed.value) {
  1299. isMenuCollapsed.value = true;
  1300. }
  1301. }
  1302. };
  1303. // 修改自动展开右侧菜单的方法
  1304. const expandRightMenu = () => {
  1305. isRightMenuCollapsed.value = false;
  1306. if (document.querySelector('.chat')) {
  1307. document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
  1308. }
  1309. };
  1310. // 修改获取文档摘要的方法
  1311. const fetchDocumentSummary = async () => {
  1312. isLoadingSummary.value = true;
  1313. try {
  1314. const response = await axios.get(
  1315. `${import.meta.env.VITE_BASE_AI_API}/api/document/summary?limit=2`,
  1316. {
  1317. headers: {
  1318. 'Authorization': `JWT ${localStorage.getItem('token')}`
  1319. }
  1320. }
  1321. );
  1322. console.log("API Response:", response.data);
  1323. if (response.data.status === 200) {
  1324. documentSummary.value = response.data.data;
  1325. console.log("Document Summary:", documentSummary.value);
  1326. startRotation();
  1327. }
  1328. } catch (error) {
  1329. console.error("获取文档摘要失败:", error);
  1330. } finally {
  1331. isLoadingSummary.value = false;
  1332. }
  1333. };
  1334. // 获取聊天历史
  1335. const fetchChatHistory = async () => {
  1336. try {
  1337. const response = await axios.get(
  1338. `${import.meta.env.VITE_BASE_AI_API}/api/chat/history`,
  1339. {
  1340. headers: {
  1341. 'Authorization': `JWT ${localStorage.getItem('token')}`
  1342. }
  1343. }
  1344. );
  1345. console.log("Chat History Response:", response.data);
  1346. if (response.data.code === 2000) {
  1347. // 将API返回的sessions数据转换为conversations格式
  1348. conversations.value = response.data.data.sessions.map(session => ({
  1349. id: session.session_id,
  1350. title: session.user_message.content, // 使用用户消息内容作为标题
  1351. messages: [],
  1352. sessionData: session // 保存完整的session数据
  1353. }));
  1354. // 如果有会话数据,设置第一个为当前会话
  1355. if (conversations.value.length > 0) {
  1356. currentConversationId.value = conversations.value[0].id;
  1357. }
  1358. }
  1359. } catch (error) {
  1360. console.error("获取聊天历史失败:", error);
  1361. }
  1362. };
  1363. // 格式化时间
  1364. const formatTime = (timeString) => {
  1365. if (!timeString) return '';
  1366. try {
  1367. const date = new Date(timeString);
  1368. const now = new Date();
  1369. const diffInHours = (now - date) / (1000 * 60 * 60);
  1370. if (diffInHours < 24) {
  1371. return date.toLocaleTimeString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
  1372. } else if (diffInHours < 48) {
  1373. return '昨天';
  1374. } else {
  1375. return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
  1376. }
  1377. } catch (error) {
  1378. return '';
  1379. }
  1380. };
  1381. // 获取会话类型显示文本
  1382. const getConversationType = (type) => {
  1383. const typeMap = {
  1384. 'chat': '对话',
  1385. 'document_chat': '文档对话',
  1386. 'streaming_demo': '演示'
  1387. };
  1388. return typeMap[type] || '对话';
  1389. };
  1390. // 处理步骤点击事件
  1391. const handleStepClick = (step) => {
  1392. // 显示进度条弹窗
  1393. showProgressModal.value = true;
  1394. // 创建模拟任务数据
  1395. const mockTasks = [
  1396. {
  1397. id: Date.now(),
  1398. title: '数据分析任务',
  1399. value: 0,
  1400. status: '准备中...',
  1401. subTasks: [
  1402. {
  1403. title: '数据收集',
  1404. value: 0,
  1405. isActive: true,
  1406. subSubTasks: [
  1407. { title: '连接数据源', value: 0, isActive: true },
  1408. { title: '验证数据格式', value: 0, isActive: false },
  1409. { title: '下载数据文件', value: 0, isActive: false }
  1410. ]
  1411. },
  1412. {
  1413. title: '数据清洗',
  1414. value: 0,
  1415. isActive: false,
  1416. subSubTasks: [
  1417. { title: '检测异常值', value: 0, isActive: false },
  1418. { title: '处理缺失值', value: 0, isActive: false },
  1419. { title: '数据标准化', value: 0, isActive: false },
  1420. { title: '去重处理', value: 0, isActive: false }
  1421. ]
  1422. },
  1423. {
  1424. title: '特征提取',
  1425. value: 0,
  1426. isActive: false,
  1427. subSubTasks: [
  1428. { title: '特征选择', value: 0, isActive: false },
  1429. { title: '特征工程', value: 0, isActive: false },
  1430. { title: '降维处理', value: 0, isActive: false }
  1431. ]
  1432. },
  1433. {
  1434. title: '模型训练',
  1435. value: 0,
  1436. isActive: false,
  1437. subSubTasks: [
  1438. { title: '参数初始化', value: 0, isActive: false },
  1439. { title: '训练迭代', value: 0, isActive: false },
  1440. { title: '模型验证', value: 0, isActive: false },
  1441. { title: '超参数调优', value: 0, isActive: false }
  1442. ]
  1443. },
  1444. {
  1445. title: '结果验证',
  1446. value: 0,
  1447. isActive: false,
  1448. subSubTasks: [
  1449. { title: '交叉验证', value: 0, isActive: false },
  1450. { title: '性能评估', value: 0, isActive: false },
  1451. { title: '结果输出', value: 0, isActive: false }
  1452. ]
  1453. }
  1454. ]
  1455. },
  1456. {
  1457. id: Date.now() + 1,
  1458. title: '报告生成任务',
  1459. value: 0,
  1460. status: '等待中...',
  1461. subTasks: [
  1462. {
  1463. title: '模板加载',
  1464. value: 0,
  1465. isActive: false,
  1466. subSubTasks: [
  1467. { title: '读取模板文件', value: 0, isActive: false },
  1468. { title: '解析模板结构', value: 0, isActive: false },
  1469. { title: '初始化变量', value: 0, isActive: false }
  1470. ]
  1471. },
  1472. {
  1473. title: '数据填充',
  1474. value: 0,
  1475. isActive: false,
  1476. subSubTasks: [
  1477. { title: '获取分析结果', value: 0, isActive: false },
  1478. { title: '格式化数据', value: 0, isActive: false },
  1479. { title: '填充模板', value: 0, isActive: false }
  1480. ]
  1481. },
  1482. {
  1483. title: '图表生成',
  1484. value: 0,
  1485. isActive: false,
  1486. subSubTasks: [
  1487. { title: '创建统计图表', value: 0, isActive: false },
  1488. { title: '生成趋势图', value: 0, isActive: false },
  1489. { title: '制作对比图', value: 0, isActive: false },
  1490. { title: '优化图表样式', value: 0, isActive: false }
  1491. ]
  1492. },
  1493. {
  1494. title: '格式化处理',
  1495. value: 0,
  1496. isActive: false,
  1497. subSubTasks: [
  1498. { title: '调整页面布局', value: 0, isActive: false },
  1499. { title: '设置字体样式', value: 0, isActive: false },
  1500. { title: '添加页眉页脚', value: 0, isActive: false }
  1501. ]
  1502. },
  1503. {
  1504. title: '文件导出',
  1505. value: 0,
  1506. isActive: false,
  1507. subSubTasks: [
  1508. { title: '生成PDF文件', value: 0, isActive: false },
  1509. { title: '创建Excel文件', value: 0, isActive: false },
  1510. { title: '压缩文件包', value: 0, isActive: false }
  1511. ]
  1512. }
  1513. ]
  1514. },
  1515. {
  1516. id: Date.now() + 2,
  1517. title: '系统优化任务',
  1518. value: 0,
  1519. status: '等待中...',
  1520. subTasks: [
  1521. {
  1522. title: '性能检测',
  1523. value: 0,
  1524. isActive: false,
  1525. subSubTasks: [
  1526. { title: 'CPU使用率检测', value: 0, isActive: false },
  1527. { title: '内存占用分析', value: 0, isActive: false },
  1528. { title: '磁盘IO监控', value: 0, isActive: false },
  1529. { title: '网络延迟测试', value: 0, isActive: false }
  1530. ]
  1531. },
  1532. {
  1533. title: '缓存清理',
  1534. value: 0,
  1535. isActive: false,
  1536. subSubTasks: [
  1537. { title: '清理临时文件', value: 0, isActive: false },
  1538. { title: '清空浏览器缓存', value: 0, isActive: false },
  1539. { title: '清理系统缓存', value: 0, isActive: false }
  1540. ]
  1541. },
  1542. {
  1543. title: '数据库优化',
  1544. value: 0,
  1545. isActive: false,
  1546. subSubTasks: [
  1547. { title: '索引重建', value: 0, isActive: false },
  1548. { title: '查询优化', value: 0, isActive: false },
  1549. { title: '数据压缩', value: 0, isActive: false },
  1550. { title: '备份清理', value: 0, isActive: false }
  1551. ]
  1552. },
  1553. {
  1554. title: '内存整理',
  1555. value: 0,
  1556. isActive: false,
  1557. subSubTasks: [
  1558. { title: '垃圾回收', value: 0, isActive: false },
  1559. { title: '内存碎片整理', value: 0, isActive: false },
  1560. { title: '进程优化', value: 0, isActive: false }
  1561. ]
  1562. }
  1563. ]
  1564. }
  1565. ];
  1566. // 添加到进度列表
  1567. progressList.value = mockTasks;
  1568. // 开始模拟进度
  1569. simulateProgress();
  1570. };
  1571. // 模拟复杂的三级进度处理
  1572. const simulateProgress = () => {
  1573. let currentTaskIndex = 0;
  1574. let currentSubTaskIndex = 0;
  1575. let currentSubSubTaskIndex = 0;
  1576. const progressInterval = setInterval(() => {
  1577. if (currentTaskIndex >= progressList.value.length) {
  1578. clearInterval(progressInterval);
  1579. return;
  1580. }
  1581. const currentTask = progressList.value[currentTaskIndex];
  1582. const currentSubTask = currentTask.subTasks[currentSubTaskIndex];
  1583. if (!currentSubTask) return;
  1584. const currentSubSubTask = currentSubTask.subSubTasks[currentSubSubTaskIndex];
  1585. // 更新当前子子任务状态
  1586. if (currentSubSubTask) {
  1587. currentSubSubTask.isActive = true;
  1588. currentSubSubTask.value = Math.min(currentSubSubTask.value + Math.random() * 20 + 10, 100);
  1589. // 更新子任务进度
  1590. const completedSubSubTasks = currentSubTask.subSubTasks.filter(subSub => subSub.value >= 100).length;
  1591. const totalSubSubTasks = currentSubTask.subSubTasks.length;
  1592. currentSubTask.value = Math.floor((completedSubSubTasks / totalSubSubTasks) * 100);
  1593. // 更新主任务进度
  1594. const completedSubTasks = currentTask.subTasks.filter(sub => sub.value >= 100).length;
  1595. const totalSubTasks = currentTask.subTasks.length;
  1596. currentTask.value = Math.floor((completedSubTasks / totalSubTasks) * 100);
  1597. // 更新主任务状态
  1598. if (currentTask.value === 0) {
  1599. currentTask.status = '准备中...';
  1600. } else if (currentTask.value < 100) {
  1601. currentTask.status = `进行中... (${completedSubTasks}/${totalSubTasks})`;
  1602. } else {
  1603. currentTask.status = '已完成';
  1604. }
  1605. // 子子任务完成,移动到下一个
  1606. if (currentSubSubTask.value >= 100) {
  1607. currentSubSubTask.isActive = false;
  1608. currentSubSubTaskIndex++;
  1609. // 当前子任务的所有子子任务完成,移动到下一个子任务
  1610. if (currentSubSubTaskIndex >= currentSubTask.subSubTasks.length) {
  1611. currentSubTask.isActive = false;
  1612. currentSubTaskIndex++;
  1613. currentSubSubTaskIndex = 0;
  1614. // 开始下一个子任务
  1615. if (currentSubTaskIndex < currentTask.subTasks.length) {
  1616. currentTask.subTasks[currentSubTaskIndex].isActive = true;
  1617. } else {
  1618. // 当前任务的所有子任务完成,移动到下一个主任务
  1619. currentTaskIndex++;
  1620. currentSubTaskIndex = 0;
  1621. // 开始下一个任务
  1622. if (currentTaskIndex < progressList.value.length) {
  1623. progressList.value[currentTaskIndex].status = '准备中...';
  1624. progressList.value[currentTaskIndex].subTasks[0].isActive = true;
  1625. }
  1626. }
  1627. }
  1628. }
  1629. }
  1630. }, 150);
  1631. };
  1632. // 获取进度图标
  1633. const getProgressIcon = (progress) => {
  1634. if (progress.status === '错误') return '❌';
  1635. if (progress.value >= 100) return '✅';
  1636. if (progress.value > 0) return '🔄';
  1637. return '⏳';
  1638. };
  1639. // 获取子进度图标
  1640. const getSubProgressIcon = (subTask) => {
  1641. if (subTask.value >= 100) return '✓';
  1642. if (subTask.isActive) return '▶';
  1643. return '○';
  1644. };
  1645. // 获取子子进度图标
  1646. const getSubSubProgressIcon = (subSubTask) => {
  1647. if (subSubTask.value >= 100) return '●';
  1648. if (subSubTask.isActive) return '▸';
  1649. return '◦';
  1650. };
  1651. // 获取进度样式类
  1652. const getProgressClass = (progress) => {
  1653. if (progress.status === '错误') return 'error';
  1654. if (progress.value >= 100) return 'completed';
  1655. if (progress.value > 0) return 'active';
  1656. return 'pending';
  1657. };
  1658. // 获取进度条样式类
  1659. const getProgressBarClass = (progress) => {
  1660. if (progress.status === '错误') return 'error-bar';
  1661. if (progress.value >= 100) return 'completed-bar';
  1662. return 'active-bar';
  1663. };
  1664. // 关闭进度弹窗
  1665. const closeProgressModal = () => {
  1666. showProgressModal.value = false;
  1667. progressList.value = [];
  1668. };
  1669. // 修改轮换显示逻辑
  1670. const startRotation = () => {
  1671. if (rotationInterval) {
  1672. clearInterval(rotationInterval);
  1673. }
  1674. const updateItems = () => {
  1675. if (!documentSummary.value?.length) {
  1676. console.log("没有可用的文档摘要数据");
  1677. return;
  1678. }
  1679. // 处理第一篇文档的问题(如:热门话题)
  1680. try {
  1681. const firstDocData = documentSummary.value[0];
  1682. if (firstDocData?.questions) {
  1683. // 直接使用questions数组中的问题
  1684. const formattedQaPairs = firstDocData.questions.map((question) => ({
  1685. question,
  1686. }));
  1687. // 随机抽取3个问题显示
  1688. const shuffled = [...formattedQaPairs].sort(() => 0.5 - Math.random());
  1689. currentQaPairs.value = shuffled.slice(0, 3);
  1690. }
  1691. } catch (error) {
  1692. console.error("处理第一篇文档问题失败:", error);
  1693. }
  1694. // 处理第二篇文档的问题(如:设计指南)
  1695. try {
  1696. const secondDocData = documentSummary.value[1];
  1697. if (secondDocData?.questions) {
  1698. // 直接使用questions数组中的问题
  1699. const formattedGuides = secondDocData.questions.map((question) => ({
  1700. question,
  1701. }));
  1702. // 随机抽取3个问题显示
  1703. const shuffled = [...formattedGuides].sort(() => 0.5 - Math.random());
  1704. currentDesignGuides.value = shuffled.slice(0, 3);
  1705. }
  1706. } catch (error) {
  1707. console.error("处理第二篇文档问题失败:", error);
  1708. }
  1709. };
  1710. // 初始更新
  1711. updateItems();
  1712. // 每5秒更新一次
  1713. rotationInterval = setInterval(updateItems, 5000);
  1714. };
  1715. // 处理QA点击事件
  1716. const handleQaClick = (qa) => {
  1717. console.log("QA clicked:", qa); // 添加日志
  1718. if (qa?.question) {
  1719. inputContent.value = qa.question || qa.title;
  1720. sendMessage();
  1721. }
  1722. };
  1723. // 获取推荐问题列表
  1724. const fetchRecommendedQuestions = async () => {
  1725. try {
  1726. const response = await axios.get(
  1727. `${import.meta.env.VITE_BASE_AI_API}/api/agents/commands/`,
  1728. {
  1729. headers: {
  1730. 'Authorization': `JWT ${localStorage.getItem('token')}`
  1731. }
  1732. }
  1733. );
  1734. console.log(response.data);
  1735. if (response.data) {
  1736. recommendedQuestions.value = response.data.data.commands;
  1737. showRecommendedQuestions.value = true;
  1738. }
  1739. } catch (error) {
  1740. console.error('获取推荐问题失败:', error);
  1741. showRecommendedQuestions.value = false;
  1742. }
  1743. };
  1744. // 处理推荐问题点击事件
  1745. const handleQuestionClick = (question) => {
  1746. inputContent.value = question;
  1747. sendMessage();
  1748. };
  1749. // 在组件卸载时清理定时器
  1750. onUnmounted(() => {
  1751. if (rotationInterval) {
  1752. clearInterval(rotationInterval);
  1753. }
  1754. });
  1755. // 方法
  1756. const toggleAttachments = () => {
  1757. showAttachments.value = !showAttachments.value;
  1758. };
  1759. const removeFile = (file) => {
  1760. attachedFiles.value = attachedFiles.value.filter((f) => f !== file);
  1761. if(attachedFiles.value.length === 0){
  1762. rightMenuWidth.value = 0;
  1763. if(document.querySelector('.chat')){
  1764. document.querySelector('.chat').style.right = `0px`;
  1765. }
  1766. }else{
  1767. rightMenuWidth.value = 450;
  1768. if(document.querySelector('.chat')){
  1769. document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
  1770. }
  1771. }
  1772. console.log(attachedFiles.value.length);
  1773. };
  1774. const triggerFileInput = () => {
  1775. // 如果正在上传,不触发新的上传
  1776. if (isUploading.value) return;
  1777. fileInput.value?.click();
  1778. };
  1779. const uploadFile = async (file) => {
  1780. try {
  1781. const formData = new FormData();
  1782. formData.append("file", file);
  1783. const response = await axios.post(
  1784. `${import.meta.env.VITE_BASE_AI_API}/upload/file`,
  1785. formData,
  1786. {
  1787. headers: {
  1788. "Content-Type": "multipart/form-data",
  1789. },
  1790. }
  1791. );
  1792. if (response.data.status === 2000) {
  1793. return response.data.data.fileUrl; // 返回文件上传后的URL
  1794. } else {
  1795. throw new Error(response.data.message || "文件上传失败");
  1796. }
  1797. } catch (error) {
  1798. console.error("文件上传失败:", error);
  1799. throw error;
  1800. }
  1801. };
  1802. const handleFileUpload = async (event) => {
  1803. const files = Array.from(event.target.files);
  1804. if (files.length === 0) return;
  1805. // 添加文件大小检查
  1806. const MAX_VIDEO_SIZE = 10 * 1024 * 1024; // 10MB in bytes
  1807. const invalidFiles = files.filter((file) => {
  1808. if (isVideoFile(file) && file.size > MAX_VIDEO_SIZE) {
  1809. return true;
  1810. }
  1811. return false;
  1812. });
  1813. if (invalidFiles.length > 0) {
  1814. // 如果有超出大小限制的视频文件,显示错误提示
  1815. alert("Video files must not exceed 10MB");
  1816. event.target.value = ""; // 清空input
  1817. return;
  1818. }
  1819. isUploading.value = true;
  1820. rightMenuWidth.value = 450;
  1821. try {
  1822. for (const file of files) {
  1823. // 创建一个带有上传状态的文件对象
  1824. const fileWithStatus = {
  1825. name: file.name,
  1826. size: file.size,
  1827. sizeFormatted: formatFileSize(file.size),
  1828. type: file.type,
  1829. isUploading: true,
  1830. };
  1831. // 先添加到文件列表中
  1832. attachedFiles.value.push(fileWithStatus);
  1833. try {
  1834. const url = await uploadFile(file);
  1835. // 直接修改数组中的对象
  1836. const index = attachedFiles.value.findIndex(
  1837. (f) => f.name === file.name
  1838. );
  1839. if (index !== -1) {
  1840. // 使用数组替换方式更新,确保响应式更新
  1841. attachedFiles.value.splice(index, 1, {
  1842. ...fileWithStatus,
  1843. url,
  1844. isUploading: false,
  1845. });
  1846. }
  1847. } catch (error) {
  1848. // 如果上传失败,从列表中移除该文件
  1849. attachedFiles.value = attachedFiles.value.filter(
  1850. (f) => f.name !== file.name
  1851. );
  1852. console.error("单个文件上传失败:", error);
  1853. }
  1854. }
  1855. } catch (error) {
  1856. console.error("文件上传失败:", error);
  1857. } finally {
  1858. isUploading.value = false;
  1859. event.target.value = ""; // 清空input以允许重复上传相同文件
  1860. // 修改文件上传后的处理逻辑
  1861. if (attachedFiles.value.length > 0) {
  1862. // 切换到预览标签页
  1863. activeTab.value = 'preview';
  1864. // 展开右侧菜单
  1865. isRightMenuCollapsed.value = false;
  1866. // 如果在移动端,调整布局
  1867. if (document.querySelector('.chat')) {
  1868. document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
  1869. }
  1870. }
  1871. }
  1872. if (files.length > 0 && enableWebSearch.value) {
  1873. enableWebSearch.value = false; // 如果有文件上传,自动关闭互联网搜索
  1874. }
  1875. };
  1876. const formatFileSize = (bytes) => {
  1877. if (!bytes || isNaN(bytes)) return "0 B";
  1878. const k = 1024;
  1879. const sizes = ["B", "KB", "MB", "GB"];
  1880. const i = Math.floor(Math.log(bytes) / Math.log(k));
  1881. return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
  1882. };
  1883. const getFileIcon = (file) => {
  1884. // 如果文件已经有 URL 且是图片类型,返回 URL
  1885. if (file.url && isImageFile(file)) {
  1886. return file.url;
  1887. }
  1888. // 其他所有情况返回文档图标
  1889. return wordIcon;
  1890. };
  1891. const isImageFile = (file) => {
  1892. const imageTypes = ["jpg", "jpeg", "png", "gif", "webp"];
  1893. const ext = file.name?.split(".")?.pop()?.toLowerCase() || "";
  1894. return imageTypes.includes(ext);
  1895. };
  1896. const isVideoFile = (file) => {
  1897. const videoTypes = ["mp4", "webm", "ogg"];
  1898. const ext = file.name?.split(".")?.pop()?.toLowerCase() || "";
  1899. return videoTypes.includes(ext);
  1900. };
  1901. const getFileType = (file) => {
  1902. const ext = file.name.split(".").pop().toLowerCase();
  1903. const imageTypes = ["jpg", "jpeg", "png", "gif", "webp"];
  1904. const videoTypes = ["mp4", "webm", "ogg"];
  1905. if (imageTypes.includes(ext)) return "image";
  1906. if (videoTypes.includes(ext)) return "video";
  1907. return "document";
  1908. };
  1909. // 添加滚动到底部的方法
  1910. const scrollToBottom = () => {
  1911. if (messageList.value) {
  1912. nextTick(() => {
  1913. messageList.value.scrollTop = messageList.value.scrollHeight;
  1914. });
  1915. }
  1916. };
  1917. // 添加 session_id 的响应式引用
  1918. const session_id = ref("");
  1919. // 添加取消控制器
  1920. const abortController = ref(null);
  1921. // 修改发送消息方法
  1922. const sendMessage = async () => {
  1923. // 检查登录状态
  1924. const token = localStorage.getItem('token');
  1925. if (!token) {
  1926. router.push('/login');
  1927. return;
  1928. }
  1929. if(isTyping.value){
  1930. isTyping.value = false;
  1931. // 如果存在正在进行的请求,取消它
  1932. if (abortController.value) {
  1933. abortController.value.abort();
  1934. abortController.value = null;
  1935. }
  1936. // 清除打字效果的定时器
  1937. if (typingTimeout.value) {
  1938. clearTimeout(typingTimeout.value);
  1939. typingTimeout.value = null;
  1940. }
  1941. return;
  1942. }
  1943. if (
  1944. (!inputContent.value.trim() && attachedFiles.value.length === 0) ||
  1945. isTyping.value
  1946. )
  1947. return;
  1948. isTyping.value = true;
  1949. scrollToBottom()
  1950. // 保存当前输入内容
  1951. const currentMessage = inputContent.value.trim();
  1952. // 立即清空输入框
  1953. inputContent.value = '';
  1954. // 根据开启的搜索类型执行相应的搜索
  1955. if (enableWebSearch.value) {
  1956. currentSearchQuery.value = currentMessage;
  1957. // 执行互联网搜索
  1958. sendMessageS(currentMessage).catch((error) => {
  1959. console.error("Web search failed:", error);
  1960. });
  1961. } else if (enableKnowledgeSearch.value) {
  1962. currentSearchQuery.value = currentMessage;
  1963. // 执行知识库搜索
  1964. handleKnowledgeSearch({
  1965. query: currentMessage,
  1966. page: 1,
  1967. pageSize: 20
  1968. });
  1969. }
  1970. // 构建消息内容,包含文件信息
  1971. let messageContent = currentMessage;
  1972. // 收集文件URLs
  1973. const imageUrls = [];
  1974. const videoUrls = [];
  1975. const documentUrls = [];
  1976. attachedFiles.value.forEach((file) => {
  1977. const fileType = getFileType(file);
  1978. if (fileType === "image") {
  1979. imageUrls.push(file.url);
  1980. } else if (fileType === "video") {
  1981. videoUrls.push(file.url);
  1982. } else {
  1983. documentUrls.push(file.url);
  1984. }
  1985. });
  1986. // 添加用户消息
  1987. const userMessage = {
  1988. id: Date.now(),
  1989. role: "user",
  1990. content: currentMessage,
  1991. displayContent: currentMessage,
  1992. files: attachedFiles.value.map((file) => ({
  1993. name: file.name,
  1994. size: file.sizeFormatted,
  1995. type: file.type,
  1996. url: file.url,
  1997. })),
  1998. };
  1999. messages.value.push(userMessage);
  2000. const summaryHtml=ref('')
  2001. // 添加临时AI消息
  2002. const tempAiMessage = reactive({
  2003. id: Date.now() + 1,
  2004. role: "assistant",
  2005. content: "思考中...",
  2006. displayContent: "思考中...",
  2007. isLoading: true,
  2008. });
  2009. messages.value.push(tempAiMessage);
  2010. try {
  2011. // 创建新的 AbortController
  2012. abortController.value = new AbortController();
  2013. if(!inferenceModel.value){
  2014. // 构建请求参数
  2015. /* const requestData = {
  2016. message: currentMessage,
  2017. chat_config_id: "2",
  2018. user_id: "13365429324",
  2019. session_id: session_id.value || "",
  2020. source: "pc",
  2021. image_urls: attachedFiles.value.filter(f => isImageFile(f)).map(f => f.url),
  2022. video_urls: attachedFiles.value.filter(f => isVideoFile(f)).map(f => f.url),
  2023. documents: attachedFiles.value.filter(f => !isImageFile(f) && !isVideoFile(f)).map(f => f.url),
  2024. merchant_id: JSON.parse(localStorage.getItem('userInfo')).merchant.merchant_id||1,
  2025. model_type: selectedModelInfo.value.type,
  2026. model_name: selectedModelInfo.value.name
  2027. }; */
  2028. const apiEndpoint = enableWebSearch.value
  2029. ? `${import.meta.env.VITE_BASE_AI_API}/api/chat/web-search-llm/`
  2030. : `${import.meta.env.VITE_BASE_AI_API}/api/chat/online/multimodal`;
  2031. const response = await axios.post(apiEndpoint, {
  2032. message: currentMessage,
  2033. chat_config_id: "2",
  2034. user_id: "13365429324",
  2035. session_id: session_id.value,
  2036. source: "pc",
  2037. image_urls: imageUrls,
  2038. video_urls: videoUrls,
  2039. documents: documentUrls,
  2040. merchant_id:JSON.parse(localStorage.getItem('userInfo')).merchant.merchant_id,
  2041. model_type: selectedModelInfo.value.type,
  2042. model_name: selectedModelInfo.value.name
  2043. },
  2044. {
  2045. headers: {
  2046. 'Authorization': `JWT ${localStorage.getItem('token')}`
  2047. },
  2048. signal: abortController.value.signal
  2049. }
  2050. );
  2051. // 移除临时消息
  2052. messages.value = messages.value.filter(
  2053. (msg) => msg.id !== tempAiMessage.id
  2054. );
  2055. // 统一处理响应数据
  2056. const responseData = enableWebSearch.value ? response.data.data : response.data;
  2057. const messageContent = enableWebSearch.value ? responseData.answer : responseData.choices[0].message.content;
  2058. const audioInfo = enableWebSearch.value ? responseData.audio_info?.audio : responseData.audio_info?.audio;
  2059. const sessionId = enableWebSearch.value ? responseData.session_id : responseData.session_id;
  2060. // 更新 session_id
  2061. if (sessionId) {
  2062. session_id.value = sessionId;
  2063. }
  2064. // 创建新的AI消息
  2065. const aiMessage = reactive({
  2066. id: Date.now() + 2,
  2067. role: "assistant",
  2068. content: messageContent,
  2069. displayContent: "",
  2070. audioData: audioInfo || null,
  2071. });
  2072. messages.value.push(aiMessage);
  2073. // 如果有音频数据,自动播放
  2074. if (aiMessage.audioData && !isPlaying.value) {
  2075. await playAudioMessage(aiMessage.audioData, aiMessage.id);
  2076. }
  2077. // 显示打字效果
  2078. await typeMessage(aiMessage);
  2079. }else{
  2080. // 构建请求参数
  2081. const requestData = {
  2082. query: currentMessage,
  2083. /* user_id: "13365429324",
  2084. session_id: session_id.value || "", */
  2085. };
  2086. // 发送初始请求获取SSE URL
  2087. let reader = null;
  2088. formatted_data.value=''
  2089. try {
  2090. // 只发送SSE请求
  2091. const sseResponse = await fetch(`${import.meta.env.VITE_BASE_AI_API}/api/agents/database/streaming/`, {
  2092. method: 'POST',
  2093. headers: {
  2094. 'Authorization': `JWT ${token}`,
  2095. 'Content-Type': 'application/json'
  2096. },
  2097. body: JSON.stringify(requestData)
  2098. });
  2099. if (!sseResponse.ok) {
  2100. throw new Error('SSE请求失败');
  2101. }
  2102. // 处理SSE响应
  2103. reader = sseResponse.body.getReader();
  2104. const decoder = new TextDecoder();
  2105. let buffer = '';
  2106. let currentEvent = '';
  2107. let streamContent = '';
  2108. // 读取流数据
  2109. while (true) {
  2110. const { done, value } = await reader.read();
  2111. if (done) break;
  2112. buffer += decoder.decode(value, { stream: true });
  2113. const lines = buffer.split('\n');
  2114. // 保留最后一行(可能不完整)
  2115. buffer = lines.pop() || '';
  2116. for (const line of lines) {
  2117. if (line.startsWith('event:')) {
  2118. currentEvent = line.substring(6).trim();
  2119. } else if (line.startsWith('data:')) {
  2120. try {
  2121. const dataStr = line.substring(5).trim();
  2122. if (dataStr) {
  2123. const data = JSON.parse(dataStr);
  2124. // 立即处理每条消息
  2125. handleSSEMessage(currentEvent || 'message', data);
  2126. if(currentEvent==='thinking_process'){
  2127. console.log(data)
  2128. // 将思考过程添加到当前AI消息中(启用逐字输出)
  2129. tempAiMessage.thinkingSteps = [
  2130. ...(Array.isArray(data.alternative_approaches) ? data.alternative_approaches : []),
  2131. ...(Array.isArray(data.key_insights) ? data.key_insights : []),
  2132. ...(Array.isArray(data.reasoning_steps) ? data.reasoning_steps : [])
  2133. ].map(step => ({ content: step, displayContent: '' }));
  2134. // 等待渲染后再开始动画,避免首帧聚合
  2135. // nextTick(() => {
  2136. // requestAnimationFrame(() => {
  2137. // animateThinkingStepsForMessage(tempAiMessage, 0);
  2138. // });
  2139. // });
  2140. // 合并其他字段到思考过程
  2141. const __extraSteps = [];
  2142. if (typeof data.analysis_approach === 'string' && data.analysis_approach.trim()) {
  2143. __extraSteps.push({ content: `${data.analysis_approach}`, displayContent: '' });
  2144. }
  2145. if (typeof data.business_impact === 'string' && data.business_impact.trim()) {
  2146. __extraSteps.push({ content: `${data.business_impact}`, displayContent: '' });
  2147. }
  2148. // if (typeof data.confidence_level === 'number') {
  2149. // __extraSteps.push({ content: `${data.confidence_level}` });
  2150. // }
  2151. if (data.model_version != null && `${data.model_version}`.trim() !== '') {
  2152. __extraSteps.push({ content: `${data.model_version}`, displayContent: '' });
  2153. }
  2154. if (data.processing_time != null && `${data.processing_time}`.trim() !== '') {
  2155. __extraSteps.push({ content: `${data.processing_time}`, displayContent: '' });
  2156. }
  2157. if (typeof data.query_intent === 'string' && data.query_intent.trim()) {
  2158. __extraSteps.push({ content: `${data.query_intent}`, displayContent: '' });
  2159. }
  2160. if (typeof data.risk_assessment === 'string' && data.risk_assessment.trim()) {
  2161. __extraSteps.push({ content: `${data.risk_assessment}`, displayContent: '' });
  2162. }
  2163. if (data.technical_constraints != null && `${data.technical_constraints}`.trim() !== '') {
  2164. __extraSteps.push({ content: `${data.technical_constraints}`, displayContent: '' });
  2165. }
  2166. const _prevLen = tempAiMessage.thinkingSteps.length;
  2167. tempAiMessage.thinkingSteps = [
  2168. ...tempAiMessage.thinkingSteps,
  2169. ...__extraSteps
  2170. ];
  2171. // 对新增的步骤做逐字打字(同样等待一帧)
  2172. if (__extraSteps.length > 0) {
  2173. console.log('tempAiMessage',tempAiMessage)
  2174. nextTick(() => {
  2175. requestAnimationFrame(() => {
  2176. animateThinkingStepsForMessage(tempAiMessage, 0);
  2177. });
  2178. });
  2179. }
  2180. }
  2181. if(currentEvent === 'final_summary'){
  2182. // 检查summary是否以"命令集提示:"开头
  2183. if (data.summary && data.summary.startsWith('命令集提示:')) {
  2184. // 调用推荐问题接口
  2185. await fetchRecommendedQuestions();
  2186. } else {
  2187. // 隐藏推荐问题
  2188. showRecommendedQuestions.value = false;
  2189. }
  2190. // 移除临时消息
  2191. messages.value = messages.value.filter(
  2192. (msg) => msg.id !== tempAiMessage.id
  2193. );
  2194. // 创建新的AI消息
  2195. const aiMessage = reactive({
  2196. id: Date.now() + 2,
  2197. role: "assistant",
  2198. content: data.summary,
  2199. summaryHtml:data.html_content,
  2200. analysis_result:data.analysis_result,
  2201. automation_plan:data.automation_plan,
  2202. thinkingSteps: [], // 保留思考过程tempAiMessage?.thinkingSteps ||
  2203. displayContent: "",
  2204. audioData: null,
  2205. showRecommendedQuestions:showRecommendedQuestions.value || false
  2206. });
  2207. isTyping.value = true;
  2208. summaryHtml.value=data.html_content
  2209. messages.value.push(aiMessage);
  2210. // 显示打字效果
  2211. try {
  2212. await typeMessage(aiMessage);
  2213. } catch (error) {
  2214. console.error('打字效果出错:', error);
  2215. // 如果打字效果失败,直接显示完整内容
  2216. aiMessage.displayContent = aiMessage.content;
  2217. } finally {
  2218. isTyping.value = false;
  2219. }
  2220. }
  2221. }
  2222. } catch (e) {
  2223. console.error('Failed to parse SSE data:', line, e);
  2224. }
  2225. } else if (line === '') {
  2226. // 空行表示事件结束,重置当前事件
  2227. currentEvent = '';
  2228. }
  2229. }
  2230. }
  2231. // 设置初始的formatted_data(如果流式数据还没开始更新)
  2232. /* if (!streamContent) {
  2233. formatted_data.value = responseData.result.html;
  2234. } */
  2235. } catch (error) {
  2236. console.error('请求或处理过程出错:', error);
  2237. //ElMessage.error('请求失败,请稍后重试');
  2238. throw error;
  2239. } finally {
  2240. // 确保在结束时关闭reader
  2241. if (reader) {
  2242. try {
  2243. await reader.cancel();
  2244. } catch (error) {
  2245. console.error('关闭reader时出错:', error);
  2246. }
  2247. }
  2248. }
  2249. }
  2250. } catch (error) {
  2251. console.error("发送消息失败:", error);
  2252. // 移除临时消息
  2253. messages.value = messages.value.filter(msg => msg.id !== tempAiMessage.id);
  2254. // 添加错误消息
  2255. messages.value.push({
  2256. id: Date.now() + 2,
  2257. role: "assistant",
  2258. content: "发送消息失败,请重试",
  2259. displayContent: "发送消息失败,请重试",
  2260. });
  2261. } finally {
  2262. isTyping.value = false;
  2263. abortController.value = null;
  2264. }
  2265. };
  2266. // 修改 sendMessageS 方法
  2267. const sendMessageS = async (query) => {
  2268. isSearchLoading.value = true;
  2269. try {
  2270. const response = await axios.post(
  2271. `${import.meta.env.VITE_BASE_AI_API}/api/web-search-results/`,
  2272. {
  2273. query: query,
  2274. num_results: 20,
  2275. page: 1,
  2276. page_size: 20,
  2277. engine: "tavily",
  2278. }
  2279. );
  2280. console.log(response)
  2281. if (response.data && response.data.code === 200) {
  2282. searchResults.value = response.data.data.result || [];
  2283. console.log(searchResults.value)
  2284. searchTotal.value = response.data.data.total || 0;
  2285. }
  2286. } catch (error) {
  2287. console.error("Web search failed:", error);
  2288. searchResults.value = [];
  2289. searchTotal.value = 0;
  2290. } finally {
  2291. isSearchLoading.value = false;
  2292. }
  2293. };
  2294. // 修改打字效果方法
  2295. const typeMessage = async (message) => {
  2296. if (!message || !message.content) {
  2297. console.error("Invalid message or content is missing");
  2298. return;
  2299. }
  2300. return new Promise((resolve) => {
  2301. const minDelay = 20; // 最小打字延迟
  2302. const maxDelay = 50; // 最大打字延迟
  2303. let i = 0;
  2304. message.displayContent = ""; // 确保开始时是空的
  2305. const typeChar = () => {
  2306. if (i < message.content.length && isTyping.value) {
  2307. // 处理特殊字符和标点符号
  2308. let chunk = "";
  2309. const char = message.content[i];
  2310. // 如果是中文字符,整个字符一起显示
  2311. if (/[\u4e00-\u9fa5]/.test(char)) {
  2312. chunk = char;
  2313. }
  2314. // 如果是标点符号,与前面的字符一起显示
  2315. else if (/[.,!?;,。!?;]/.test(char)) {
  2316. chunk = char;
  2317. }
  2318. // 如果是空格,与下一个单词一起显示
  2319. else if (char === " " && i + 1 < message.content.length) {
  2320. let j = i + 1;
  2321. while (j < message.content.length && !/[\s\n]/.test(message.content[j])) {
  2322. j++;
  2323. }
  2324. chunk = message.content.substring(i, j);
  2325. }
  2326. // 其他情况,单个字符显示
  2327. else {
  2328. chunk = char;
  2329. }
  2330. message.displayContent = message.content.substring(0, i) + chunk;
  2331. i += chunk.length;
  2332. // 根据字符类型动态调整延迟
  2333. const delay = chunk.length > 1 ? maxDelay : minDelay;
  2334. typingTimeout.value = setTimeout(typeChar, delay);
  2335. } else {
  2336. if (!isTyping.value) {
  2337. // 如果打字被取消,直接显示完整内容
  2338. message.displayContent = message.content;
  2339. }
  2340. resolve();
  2341. }
  2342. };
  2343. typeChar();
  2344. });
  2345. };
  2346. // 模拟API请求
  2347. const mockApiRequest = async (message) => {
  2348. await new Promise((resolve) => setTimeout(resolve, 1000));
  2349. return `This is a response to: ${message}`;
  2350. };
  2351. // 会话管理
  2352. const addNewConversation = () => {
  2353. conversationCounter.value++;
  2354. const newConversation = {
  2355. id: Date.now(),
  2356. title: `New Conversation ${conversationCounter.value}`,
  2357. messages: [],
  2358. };
  2359. conversations.value.push(newConversation);
  2360. session_id.value = ""; // 重置 session_id
  2361. switchConversation(newConversation.id);
  2362. };
  2363. const switchConversation = (conversationId) => {
  2364. currentConversationId.value = conversationId;
  2365. const conversation = conversations.value.find((c) => c.id === conversationId);
  2366. messages.value = conversation ? conversation.messages : [];
  2367. session_id.value = ""; // 重置 session_id
  2368. };
  2369. const handleFileDrop = async (event) => {
  2370. if (isUploading.value) return;
  2371. const files = Array.from(event.dataTransfer.files);
  2372. if (files.length === 0) return;
  2373. // 添加文件大小检查
  2374. const MAX_VIDEO_SIZE = 10 * 1024 * 1024; // 10MB in bytes
  2375. const invalidFiles = files.filter((file) => {
  2376. if (isVideoFile(file) && file.size > MAX_VIDEO_SIZE) {
  2377. return true;
  2378. }
  2379. return false;
  2380. });
  2381. isUploading.value = true;
  2382. try {
  2383. for (const file of files) {
  2384. const fileWithStatus = {
  2385. name: file.name,
  2386. size: file.size,
  2387. sizeFormatted: formatFileSize(file.size),
  2388. type: file.type,
  2389. isUploading: true,
  2390. };
  2391. attachedFiles.value.push(fileWithStatus);
  2392. try {
  2393. const url = await uploadFile(file);
  2394. // 直接修改数组中的对象
  2395. const index = attachedFiles.value.findIndex(
  2396. (f) => f.name === file.name
  2397. );
  2398. if (index !== -1) {
  2399. // 使用数组替换方式更新,确保响应式更新
  2400. attachedFiles.value.splice(index, 1, {
  2401. ...fileWithStatus,
  2402. url,
  2403. isUploading: false,
  2404. });
  2405. }
  2406. } catch (error) {
  2407. attachedFiles.value = attachedFiles.value.filter(
  2408. (f) => f.name !== file.name
  2409. );
  2410. console.error("单个文件上传失败:", error);
  2411. }
  2412. }
  2413. } catch (error) {
  2414. console.error("文件上传失败:", error);
  2415. } finally {
  2416. isUploading.value = false;
  2417. // 修改文件上传后的处理逻辑
  2418. if (attachedFiles.value.length > 0) {
  2419. // 切换到预览标签页
  2420. activeTab.value = 'preview';
  2421. // 展开右侧菜单
  2422. isRightMenuCollapsed.value = false;
  2423. // 如果在移动端,调整布局
  2424. if (document.querySelector('.chat')) {
  2425. document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
  2426. }
  2427. }
  2428. }
  2429. if (files.length > 0 && enableWebSearch.value) {
  2430. enableWebSearch.value = false; // 如果有文件上传,自动关闭互联网搜索
  2431. }
  2432. };
  2433. // 添加音频点击处理方法
  2434. const handleAudioClick = (message) => {
  2435. if(message.audioData){
  2436. if (currentPlayingId.value === message.id) {
  2437. stopAudio();
  2438. } else {
  2439. playAudioMessage(message.audioData, message.id);
  2440. }
  2441. }else{
  2442. // 用户消息的文本转语音处理
  2443. if (currentPlayingId.value === message.id) {
  2444. stopAudio();
  2445. } else {
  2446. playUserMessage(message.content, message.id);
  2447. }
  2448. }
  2449. };
  2450. // 添加播放用户消息的方法
  2451. const playUserMessage = async (text, messageId) => {
  2452. try {
  2453. // 如果当前有其他音频在播放,先停止
  2454. if (currentPlayingId.value && currentPlayingId.value !== messageId) {
  2455. stopAudio();
  2456. }
  2457. // 如果已经在播放这条消息,直接返回(这种情况应该不会发生,因为会被上面的 handleAudioClick 处理)
  2458. if (currentPlayingId.value === messageId) {
  2459. return;
  2460. }
  2461. const response = await axios.post(`${import.meta.env.VITE_BASE_AI_API}/api/voices/play_text`, {
  2462. text: text
  2463. }, {
  2464. headers: {
  2465. 'Authorization': `JWT ${localStorage.getItem('token')}`
  2466. },
  2467. });
  2468. if(response.data.code === 200){
  2469. // 创建音频元素
  2470. const audio = new Audio(`${import.meta.env.VITE_BASE_AI_API}${response.data.audio_url}`);
  2471. // 保存当前播放的音频和ID
  2472. currentAudioSource.value = audio;
  2473. currentPlayingId.value = messageId;
  2474. isPlaying.value = true;
  2475. // 播放结束时清理
  2476. audio.onended = () => {
  2477. currentPlayingId.value = null;
  2478. currentAudioSource.value = null;
  2479. isPlaying.value = false;
  2480. };
  2481. // 播放错误时清理
  2482. audio.onerror = (e) => {
  2483. console.error('播放文本失败:', e);
  2484. message.error('播放失败,请稍后重试');
  2485. currentPlayingId.value = null;
  2486. currentAudioSource.value = null;
  2487. isPlaying.value = false;
  2488. };
  2489. // 开始播放
  2490. await audio.play();
  2491. }
  2492. } catch (error) {
  2493. console.error('播放文本失败:', error);
  2494. message.error('播放失败,请稍后重试');
  2495. currentPlayingId.value = null;
  2496. currentAudioSource.value = null;
  2497. isPlaying.value = false;
  2498. }
  2499. };
  2500. // 修改停止播放方法
  2501. const stopAudio = () => {
  2502. if (audioPlayer.value) {
  2503. audioPlayer.value.pause();
  2504. audioPlayer.value.currentTime = 0;
  2505. audioPlayer.value = null;
  2506. }
  2507. if (currentAudioSource.value) {
  2508. currentAudioSource.value.pause();
  2509. currentAudioSource.value.currentTime = 0;
  2510. currentAudioSource.value = null;
  2511. }
  2512. isPlaying.value = false;
  2513. currentPlayingId.value = null;
  2514. };
  2515. // 在组件卸载时清理
  2516. onUnmounted(() => {
  2517. stopAudio();
  2518. });
  2519. // 添加 renderMarkdown 方法
  2520. const renderMarkdown = (content) => {
  2521. if (!content) return "";
  2522. /* // 处理代码块
  2523. content = content.replace(/```([\s\S]*?)```/g, (match, code) => {
  2524. return `<pre class="code-block"><code>${code}</code></pre>`;
  2525. });
  2526. // 处理行内代码
  2527. content = content.replace(/`([^`]+)`/g, '<code>$1</code>');
  2528. // 处理标题
  2529. content = content.replace(/^(#{1,6})\s+(.*)$/gm, (match, hashes, title) => {
  2530. const level = hashes.length;
  2531. return `<h${level}>${title}</h${level}>`;
  2532. }); */
  2533. return md.render(content);
  2534. };
  2535. // 添加新的响应式变量
  2536. const rightMenuWidth = ref(0); // 默认宽度
  2537. const minWidth = 0; // 最小宽度
  2538. const maxWidth = 800; // 最大宽度
  2539. // 添加拖动相关方法
  2540. const startResize = (e) => {
  2541. e.preventDefault();
  2542. const startX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
  2543. const startWidth = rightMenuWidth.value;
  2544. const handleMove = (e) => {
  2545. if (isRightMenuCollapsed.value) return;
  2546. const currentX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
  2547. const diff = startX - currentX;
  2548. let newWidth = Math.min(Math.max(startWidth + diff, minWidth), maxWidth);
  2549. rightMenuWidth.value = newWidth;
  2550. // 更新聊天区域的右边距和按钮位置
  2551. if (document.querySelector('.chat')) {
  2552. document.querySelector('.chat').style.right = `${newWidth}px`;
  2553. if(newWidth==800){
  2554. document.querySelector('.input-container').style.width = `97%`;
  2555. }else{
  2556. document.querySelector('.input-container').style.width = `98%`;
  2557. }
  2558. }
  2559. };
  2560. const handleEnd = () => {
  2561. document.removeEventListener('mousemove', handleMove);
  2562. document.removeEventListener('mouseup', handleEnd);
  2563. document.removeEventListener('touchmove', handleMove);
  2564. document.removeEventListener('touchend', handleEnd);
  2565. };
  2566. document.addEventListener('mousemove', handleMove);
  2567. document.addEventListener('mouseup', handleEnd);
  2568. document.addEventListener('touchmove', handleMove);
  2569. document.addEventListener('touchend', handleEnd);
  2570. };
  2571. // 添加搜索开关状态
  2572. const isSearchEnabled = ref(true);
  2573. // 添加切换搜索方法
  2574. const toggleSearch = () => {
  2575. isSearchEnabled.value = !isSearchEnabled.value;
  2576. };
  2577. // 修改 toggleWebSearch 方法
  2578. const toggleWebSearch = () => {
  2579. enableWebSearch.value = !enableWebSearch.value;
  2580. isSearchEnabled.value = enableWebSearch.value;
  2581. // 只有当当前标签是搜索标签时才折叠面板
  2582. if (!enableWebSearch.value && activeTab.value === 'search') {
  2583. isRightMenuCollapsed.value = true;
  2584. currentSearchQuery.value = '';
  2585. if (document.querySelector('.chat')) {
  2586. document.querySelector('.chat').style.right = '0';
  2587. }
  2588. } else if (enableWebSearch.value && inputContent.value.trim()) {
  2589. isRightMenuCollapsed.value = false;
  2590. currentSearchQuery.value = inputContent.value;
  2591. if (document.querySelector('.chat')) {
  2592. document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
  2593. }
  2594. }
  2595. };
  2596. // 添加新的响应式变量
  2597. const currentSearchQuery = ref('');
  2598. // 添加输入变化处理方法
  2599. const handleInputChange = () => {
  2600. if (inputContent.value.trim()) {
  2601. currentSearchQuery.value = inputContent.value;
  2602. // 根据当前选中的搜索类型执行相应的搜索
  2603. if (enableWebSearch.value) {
  2604. /* sendMessageS(inputContent.value).catch((error) => {
  2605. console.error("Web search failed:", error);
  2606. }); */
  2607. } else if (enableKnowledgeSearch.value) {
  2608. handleKnowledgeSearch({
  2609. query: inputContent.value,
  2610. page: 1,
  2611. pageSize: 20
  2612. });
  2613. }
  2614. }
  2615. };
  2616. // 添加处理搜索开关的方法
  2617. const handleSearchToggle = (value) => {
  2618. console.log(enableWebSearch);
  2619. enableWebSearch.value = value;
  2620. if (value) {
  2621. // 开启搜索时,确保右侧面板展开
  2622. expandRightMenu();
  2623. activeTab.value = 'search';
  2624. }
  2625. };
  2626. // 添加新的响应式变量
  2627. const activeTab = ref('search'); // 默认显示搜索面板
  2628. // 处理文档选择
  2629. const handleDocumentSelect = (document) => {
  2630. // 处理文档选择逻辑
  2631. console.log('Selected document:', document);
  2632. };
  2633. // 添加收缩状态控制
  2634. const isCollapsed = ref(false);
  2635. // 监听屏幕宽度变化
  2636. const updateCollapsedState = () => {
  2637. isCollapsed.value = window.innerWidth <= 480;
  2638. };
  2639. onUnmounted(() => {
  2640. window.removeEventListener('resize', updateCollapsedState);
  2641. });
  2642. // 添加收缩状态控制
  2643. const isCompact = ref(false);
  2644. // 监听屏幕宽度变化
  2645. const updateCompactState = () => {
  2646. isCompact.value = window.innerWidth <= 768;
  2647. };
  2648. onUnmounted(() => {
  2649. window.removeEventListener('resize', updateCompactState);
  2650. });
  2651. // 添加计算属性
  2652. const isRightMenuVisible = computed(() => {
  2653. // 移除搜索开关对菜单显示的影响
  2654. checkMobile();
  2655. return !isRightMenuCollapsed.value;
  2656. /* return (!isRightMenuCollapsed.value && (
  2657. (enableWebSearch.value && activeTab.value === 'search') ||
  2658. (enableKnowledgeSearch.value && activeTab.value === 'knowledge') ||
  2659. (activeTab.value === 'preview' && attachedFiles.value.length > 0)
  2660. )); */
  2661. });
  2662. /* // 智能体
  2663. const handleInferenceModel = () => {
  2664. inferenceModel.value = !inferenceModel.value;
  2665. }; */
  2666. const currentQaPairsList = ref([]);
  2667. watch(inferenceModel, async(newValue) => {
  2668. console.log('智能体状态:', newValue);
  2669. if (newValue) {
  2670. // 打开右侧窗口
  2671. rightMenuWidth.value = 800;
  2672. isRightMenuCollapsed.value = false;
  2673. if (document.querySelector('.chat')) {
  2674. document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
  2675. }
  2676. //获取智能体显示参数
  2677. const response = await axios.get(
  2678. `${import.meta.env.VITE_BASE_AI_API}/api/agents/notifications/stream/`,
  2679. {
  2680. headers: {
  2681. 'Authorization': `JWT ${localStorage.getItem('token')}`
  2682. }
  2683. }
  2684. );
  2685. console.log("API Response:", response.data);
  2686. currentQaPairsList.value=response.data.notifications
  2687. // currentQaPairs
  2688. await fetchRecommendedQuestions();
  2689. enableKnowledgeSearch.value=false
  2690. enableWebSearch.value = false;
  2691. } else {
  2692. // 关闭右侧窗口
  2693. isRightMenuCollapsed.value = true;
  2694. if(enableKnowledgeSearch.value){
  2695. }else{
  2696. rightMenuWidth.value = 0;
  2697. if (document.querySelector('.chat')) {
  2698. document.querySelector('.chat').style.right = `460px`;
  2699. document.querySelector('.input-container').style.width = `98%`;
  2700. }
  2701. }
  2702. }
  2703. });
  2704. // 修改知识库搜索开关处理方法
  2705. const handleKnowledgeToggle = async (event) => {
  2706. if (event.target.checked) {
  2707. rightMenuWidth.value = 450;
  2708. // 使用 nextTick 确保 DOM 更新后再操作
  2709. await nextTick();
  2710. const chatElement = document.querySelector('.chat');
  2711. if (chatElement) {
  2712. chatElement.style.right = `${rightMenuWidth.value}px`;
  2713. } else {
  2714. console.warn('未找到聊天容器元素');
  2715. }
  2716. // 开启知识库搜索时关闭互联网搜索
  2717. enableWebSearch.value = false;
  2718. inferenceModel.value = false;
  2719. // 切换到知识库标签页
  2720. activeTab.value = 'knowledge';
  2721. // 如果有输入内容,执行知识库搜索
  2722. if (inputContent.value.trim()) {
  2723. handleKnowledgeSearch({
  2724. query: inputContent.value,
  2725. page: 1,
  2726. pageSize: 20
  2727. });
  2728. }
  2729. } else {
  2730. rightMenuWidth.value = 0;
  2731. await nextTick();
  2732. const chatElement = document.querySelector('.chat');
  2733. document.querySelector('.input-container').style.width = `98%`;
  2734. if (chatElement) {
  2735. chatElement.style.right = `460px`;
  2736. } else {
  2737. console.warn('未找到聊天容器元素');
  2738. }
  2739. }
  2740. };
  2741. // 修改知识库搜索方法
  2742. const handleKnowledgeSearch = async (params) => {
  2743. if (!params.query.trim() || !enableKnowledgeSearch.value) return;
  2744. isKnowledgeLoading.value = true;
  2745. try {
  2746. const response = await axios.post(
  2747. `${import.meta.env.VITE_BASE_AI_API}/chataids/mysql_fuzzy_search/`,
  2748. {
  2749. // collection_names: ["25"], // 固定使用 "25" 作为 collection name
  2750. keywords: params.query, // 使用查询关键词
  2751. documents: [], // 保持空数组
  2752. document_ids: [], // 保持空数组
  2753. limit: 5 // 固定返回5条结果
  2754. },
  2755. {
  2756. headers: {
  2757. 'Authorization': `JWT ${localStorage.getItem('token')}`
  2758. }
  2759. }
  2760. );
  2761. console.log(response);
  2762. if (response.data && response.data.status === 200) {
  2763. knowledgeResults.value = response.data.data.data || [];
  2764. knowledgeTotal.value = response.data.data.data.total || 0;
  2765. }
  2766. } catch (error) {
  2767. console.error('Knowledge search failed:', error);
  2768. knowledgeResults.value = [];
  2769. knowledgeTotal.value = 0;
  2770. } finally {
  2771. isKnowledgeLoading.value = false;
  2772. }
  2773. }
  2774. // 修改处理互联网搜索开关的方法
  2775. const handleWebSearchToggle = (event) => {
  2776. if (event.target.checked) {
  2777. rightMenuWidth.value = 450;
  2778. if (document.querySelector('.chat')) {
  2779. document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
  2780. }
  2781. // 开启互联网搜索时关闭知识库搜索
  2782. enableKnowledgeSearch.value = false;
  2783. inferenceModel.value = false;
  2784. // 切换到搜索标签页
  2785. activeTab.value = 'search';
  2786. // 如果有输入内容,执行互联网搜索
  2787. if (inputContent.value.trim()) {
  2788. currentSearchQuery.value = inputContent.value;
  2789. /* sendMessageS(inputContent.value).catch((error) => {
  2790. console.error("Web search failed:", error);
  2791. }); */
  2792. }
  2793. }else{
  2794. rightMenuWidth.value = 0;
  2795. if (document.querySelector('.chat')) {
  2796. document.querySelector('.chat').style.right = `460px`;
  2797. }
  2798. }
  2799. };
  2800. // 添加新的响应式变量
  2801. const API_BASE_URL = import.meta.env.VITE_BASE_AI_API;
  2802. const models = ref([]);
  2803. const selectedModel = ref(null);
  2804. const isLoadingModels = ref(false);
  2805. // 添加计算属性获取选中的模型信息
  2806. const selectedModelInfo = computed(() => {
  2807. if (!selectedModel.value || !models.value.length) return { type: '', name: '' };
  2808. const model = models.value.find(m => m.id == selectedModel.value);
  2809. return {
  2810. type: model?.type || '',
  2811. name: model?.name || ''
  2812. };
  2813. });
  2814. // 添加获取模型列表的方法
  2815. const fetchModels = async () => {
  2816. isLoadingModels.value = true;
  2817. try {
  2818. const response = await fetch(`${API_BASE_URL}/api/models?merchant_id=${JSON.parse(localStorage.getItem('userInfo')).merchant.merchant_id}`);
  2819. const data = await response.json();
  2820. console.log(data);
  2821. if (data.code === 2000) {
  2822. // 确保每个模型对象都有必要的字段
  2823. models.value = (data.data.models || []).map(model => ({
  2824. id: model.id,
  2825. name: model.name,
  2826. type: model.type || model.model_type || 'default' // 确保有type字段
  2827. }));
  2828. if (models.value.length > 0) {
  2829. selectedModel.value = models.value[0].id; // 默认选择第一个模型
  2830. }
  2831. }
  2832. } catch (error) {
  2833. console.error('Failed to fetch models:', error);
  2834. } finally {
  2835. isLoadingModels.value = false;
  2836. }
  2837. };
  2838. // 添加模型选择改变的处理方法
  2839. const handleModelChange = (modelId) => {
  2840. selectedModel.value = modelId;
  2841. console.log(selectedModel.value);
  2842. };
  2843. // 用户信息
  2844. const userInfo = ref({
  2845. name: '',
  2846. role: ''
  2847. });
  2848. const getUserInfo = () => {
  2849. const storedUserInfo = localStorage.getItem('userInfo');
  2850. if (storedUserInfo) {
  2851. userInfo.value = JSON.parse(storedUserInfo);
  2852. }
  2853. }
  2854. // 在组件挂载时获取模型列表
  2855. onMounted(() => {
  2856. updateCompactState();
  2857. window.addEventListener('resize', updateCompactState);
  2858. updateCollapsedState();
  2859. window.addEventListener('resize', updateCollapsedState);
  2860. checkMobile();
  2861. window.addEventListener('resize', checkMobile);
  2862. fetchModels();
  2863. fetchDocumentSummary();
  2864. const storedUserInfo = localStorage.getItem('userInfo');
  2865. if (storedUserInfo) {
  2866. try {
  2867. userInfo.value = JSON.parse(storedUserInfo);
  2868. } catch (error) {
  2869. console.error('解析用户信息失败:', error);
  2870. }
  2871. }
  2872. });
  2873. const showPasswordDialog = ref(false)
  2874. const handleModifyPassword = () => {
  2875. showPasswordDialog.value = true
  2876. showDropdown.value = false // 关闭下拉菜单
  2877. }
  2878. const handleLogout = async () => {
  2879. try {
  2880. // 调用退出登录接口
  2881. await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/logout`, {}, {
  2882. headers: {
  2883. 'Authorization': `JWT ${localStorage.getItem('token')}`
  2884. }
  2885. });
  2886. // 清除本地存储的信息
  2887. localStorage.removeItem('token');
  2888. localStorage.removeItem('userInfo');
  2889. localStorage.removeItem('permissions');
  2890. localStorage.removeItem('username');
  2891. localStorage.removeItem('mobile');
  2892. // 清除 Vuex store 中的用户信息
  2893. store.commit('app/setUser', {
  2894. user: {},
  2895. permission: [],
  2896. auth: {}
  2897. });
  2898. // 关闭下拉菜单
  2899. showDropdown.value = false;
  2900. // 跳转到登录页面
  2901. router.push('/login');
  2902. } catch (error) {
  2903. console.error('退出登录失败:', error);
  2904. // 即使接口调用失败,也清除本地信息并跳转
  2905. localStorage.clear();
  2906. router.push('/login');
  2907. }
  2908. };
  2909. const handleCreateInvitation = async () => {
  2910. try {
  2911. const response = await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/create_invitation`, {}, {
  2912. headers: {
  2913. 'Authorization': `JWT ${localStorage.getItem('token')}`
  2914. }
  2915. });
  2916. console.log(response);
  2917. if (response.data.code === 200) {
  2918. message.success('创建邀请成功');
  2919. // 从当前窗口location获取基础URL
  2920. const baseUrl = `${window.location.protocol}//${window.location.host}`;
  2921. // 跳转到完整URL
  2922. window.location.href = `${baseUrl}${response.data.data.invitation_link}`;
  2923. } else {
  2924. message.error(response.data.message || '创建邀请失败');
  2925. }
  2926. } catch (error) {
  2927. console.error('创建邀请失败:', error);
  2928. message.error(error.response?.data?.message || '创建邀请失败,请稍后重试');
  2929. }
  2930. showDropdown.value = false; // 关闭下拉菜单
  2931. };
  2932. /* return {
  2933. loginForm,
  2934. formData,
  2935. rules,
  2936. loading,
  2937. rememberMe,
  2938. loginType,
  2939. countdown,
  2940. handleLogin,
  2941. sendVerificationCode,
  2942. switchToMobileLogin,
  2943. switchToAccountLogin,
  2944. switchToWechatLogin,
  2945. wechatLoginModal,
  2946. wechatQrCode,
  2947. getWechatQrCode,
  2948. handleWechatLoginCancel,
  2949. handleCreateInvitation
  2950. }; */
  2951. // These variables are already declared above
  2952. /* const currentAudioSource = ref(null);
  2953. const currentPlayingId = ref(null); */
  2954. // 添加播放音频消息的方法
  2955. const playAudioMessage = async (audioData, messageId) => {
  2956. try {
  2957. // 如果当前有其他音频在播放,先停止
  2958. if (currentPlayingId.value && currentPlayingId.value !== messageId) {
  2959. stopAudio();
  2960. }
  2961. // 如果已经在播放这条消息,直接返回
  2962. if (currentPlayingId.value === messageId) {
  2963. return;
  2964. }
  2965. // 创建新的音频元素
  2966. const audio = new Audio(audioData);
  2967. // 保存当前播放的音频和ID
  2968. currentAudioSource.value = audio;
  2969. currentPlayingId.value = messageId;
  2970. isPlaying.value = true;
  2971. // 播放结束时清理
  2972. audio.onended = () => {
  2973. currentPlayingId.value = null;
  2974. currentAudioSource.value = null;
  2975. isPlaying.value = false;
  2976. };
  2977. // 播放错误时清理
  2978. audio.onerror = (e) => {
  2979. console.error('播放音频失败:', e);
  2980. message.error('播放失败,请稍后重试');
  2981. currentPlayingId.value = null;
  2982. currentAudioSource.value = null;
  2983. isPlaying.value = false;
  2984. };
  2985. // 开始播放
  2986. await audio.play();
  2987. } catch (error) {
  2988. console.error('播放音频失败:', error);
  2989. message.error('播放失败,请稍后重试');
  2990. currentPlayingId.value = null;
  2991. currentAudioSource.value = null;
  2992. isPlaying.value = false;
  2993. }
  2994. };
  2995. // 主题状态
  2996. const isDarkTheme = ref(false);
  2997. // 应用主题
  2998. const applyTheme = (isDark) => {
  2999. document.documentElement.classList.toggle('dark-theme', isDark);
  3000. };
  3001. // 切换主题
  3002. const toggleTheme = () => {
  3003. isDarkTheme.value = !isDarkTheme.value;
  3004. localStorage.setItem('theme', isDarkTheme.value ? 'dark' : 'light');
  3005. applyTheme(isDarkTheme.value);
  3006. };
  3007. // FAB 浮动操作按钮相关方法
  3008. const toggleFab = () => {
  3009. // 添加动画类来启用transition
  3010. const fabElement = document.querySelector('.fab');
  3011. if (fabElement) {
  3012. fabElement.classList.add('animated');
  3013. }
  3014. isFabOpen.value = !isFabOpen.value;
  3015. };
  3016. const handleReply = () => {
  3017. console.log('回复功能');
  3018. // 这里可以添加回复逻辑
  3019. message.info('回复功能');
  3020. };
  3021. const handleLove = () => {
  3022. console.log('收藏功能');
  3023. // 这里可以添加收藏逻辑
  3024. message.info('收藏功能');
  3025. };
  3026. const recommended=ref(false)
  3027. const handleDelete = async () => {
  3028. inferenceModel.value = true;
  3029. recommended.value=!recommended.value
  3030. await fetchRecommendedQuestions();
  3031. };
  3032. // 初始化主题
  3033. onMounted(() => {
  3034. if (document.querySelector('.chat')) {
  3035. document.querySelector('.chat').style.right = `460px`;
  3036. }
  3037. checkMobile();
  3038. // 优先使用存储的主题设置
  3039. const savedTheme = localStorage.getItem('theme');
  3040. if (savedTheme) {
  3041. isDarkTheme.value = savedTheme === 'dark';
  3042. } else {
  3043. // 如果没有存储的主题,则使用系统主题
  3044. isDarkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
  3045. }
  3046. applyTheme(isDarkTheme.value);
  3047. // 监听系统主题变化
  3048. const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  3049. mediaQuery.addEventListener('change', (e) => {
  3050. if (!localStorage.getItem('theme')) {
  3051. isDarkTheme.value = e.matches;
  3052. applyTheme(e.matches);
  3053. }
  3054. });
  3055. });
  3056. /* return {
  3057. isDarkTheme,
  3058. toggleTheme,
  3059. // ... existing return values ...
  3060. }; */
  3061. const excelOptions = ref({
  3062. xls: false, // 预览xlsx文件设为false;预览xls文件设为true
  3063. minColLength: 15, // excel最少渲染列数
  3064. minRowLength: 50, // excel最少渲染行数,增加以确保显示更多内容
  3065. widthOffset: 50, // 增加列宽偏移量,使内容显示更完整
  3066. heightOffset: 30, // 增加行高偏移量
  3067. forceRender: true, // 强制渲染
  3068. maxSheetLength: 10, // 最多渲染工作表数量
  3069. showGridLines: true, // 显示网格线
  3070. defaultFontSize: 12, // 默认字体大小
  3071. defaultRowHeight: 24, // 默认行高
  3072. autoFitColumn: true, // 自动适应列宽
  3073. overflowColumns: true, // 允许列内容溢出
  3074. showToolbar: true, // 显示工具栏
  3075. });
  3076. // 添加Excel渲染完成的处理函数
  3077. const handleRendered = () => {
  3078. console.log('Excel文件渲染完成');
  3079. nextTick(() => {
  3080. // 手动触发一次重新计算大小
  3081. window.dispatchEvent(new Event('resize'));
  3082. });
  3083. };
  3084. // 添加Excel错误处理函数的详细信息
  3085. const handleExcelError = (error) => {
  3086. console.error('Excel文件渲染失败:', error);
  3087. message.error('Excel预览失败:' + (error.message || '请尝试下载后查看'));
  3088. };
  3089. const isWordFile = (file) => {
  3090. if (!file) return false;
  3091. const wordTypes = ['doc', 'docx'];
  3092. const ext = file.name?.split('.')?.pop()?.toLowerCase() || '';
  3093. const isWord = wordTypes.includes(ext);
  3094. if (isWord && file.type) {
  3095. return file.type === 'application/msword' ||
  3096. file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
  3097. }
  3098. return isWord;
  3099. };
  3100. const isExcelFile = (file) => {
  3101. if (!file) return false;
  3102. const excelTypes = ['xls', 'xlsx'];
  3103. const ext = file.name?.split('.')?.pop()?.toLowerCase() || '';
  3104. return excelTypes.includes(ext);
  3105. };
  3106. const isPdfFile = (file) => {
  3107. if (!file) return false;
  3108. return file.name?.toLowerCase()?.endsWith('.pdf') || false;
  3109. };
  3110. const currentDoc = ref(null);
  3111. // 监听文档列表变化
  3112. watch(() => attachedFiles.value, (newFiles) => {
  3113. if (newFiles && newFiles.length > 0) {
  3114. currentDoc.value = newFiles[newFiles.length - 1]; // 预览最新上传的文档
  3115. } else {
  3116. currentDoc.value = null;
  3117. }
  3118. }, {
  3119. immediate: true,
  3120. deep: true
  3121. });
  3122. const handleDownload = (doc) => {
  3123. if (doc.url) {
  3124. const link = document.createElement('a');
  3125. link.href = doc.url;
  3126. link.download = doc.name;
  3127. document.body.appendChild(link);
  3128. link.click();
  3129. document.body.removeChild(link);
  3130. }
  3131. };
  3132. const closePreview = () => {
  3133. currentDoc.value = null;
  3134. };
  3135. // 添加文档点击事件处理
  3136. const handleDocClick = (doc) => {
  3137. currentDoc.value = doc;
  3138. };
  3139. /*
  3140. */
  3141. // 添加流式思考步骤
  3142. const currentThinkingSteps = ref([]);
  3143. // 添加流式思考步骤
  3144. const addThinkingStep = (step) => {
  3145. const s = {
  3146. type: step.type || 'default',
  3147. content: step.content,
  3148. displayContent: '',
  3149. timestamp: Date.now()
  3150. };
  3151. currentThinkingSteps.value.push(s);
  3152. // 渲染后启动逐字动画,避免瞬时显示
  3153. nextTick(() => {
  3154. requestAnimationFrame(() => {
  3155. typeTextTo(s);
  3156. });
  3157. });
  3158. };
  3159. // 清除当前思考步骤
  3160. const clearThinkingSteps = () => {
  3161. currentThinkingSteps.value = [];
  3162. };
  3163. // 在消息发送完成后将思考步骤添加到消息中
  3164. const finalizeThinkingSteps = (messageId) => {
  3165. const message = messages.value.find(m => m.id === messageId);
  3166. if (message) {
  3167. message.thinkingSteps = [...currentThinkingSteps.value];
  3168. clearThinkingSteps();
  3169. }
  3170. };
  3171. // 获取思考步骤类型的中文名称
  3172. const getStepTypeName = (stepType) => {
  3173. const typeNames = {
  3174. 'query_understanding': '查询理解',
  3175. 'context_analysis': '上下文分析',
  3176. 'data_scope': '数据范围',
  3177. 'business_value': '业务价值',
  3178. 'start': '开始',
  3179. 'text_analysis': '文本分析',
  3180. 'planning': '规划',
  3181. 'execution': '执行',
  3182. 'result': '结果',
  3183. 'conclusion': '结论'
  3184. };
  3185. return typeNames[stepType] || stepType;
  3186. };
  3187. </script>
  3188. <style scoped>
  3189. .layout {
  3190. display: flex;
  3191. width: 100%;
  3192. height: 100vh;
  3193. overflow: hidden;
  3194. position: relative;
  3195. }
  3196. .header {
  3197. position: fixed;
  3198. top: 0;
  3199. left: 0;
  3200. width: 100%;
  3201. height: 64px;
  3202. background: #f7f7f8;
  3203. border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  3204. z-index: 999;
  3205. }
  3206. .user-profile-bar {
  3207. margin: 0 auto;
  3208. position: relative;
  3209. display: flex;
  3210. align-items: center;
  3211. justify-content: space-between;
  3212. cursor: pointer;
  3213. }
  3214. .user-info-bar {
  3215. display: flex;
  3216. align-items: center;
  3217. justify-content: flex-end;
  3218. width: auto;
  3219. height: 100%;
  3220. background-color: var(--primary-bg);
  3221. border-radius: 10px;
  3222. padding: 4px 12px;
  3223. margin-right: 12px;
  3224. box-shadow: var(--shadow-sm);
  3225. }
  3226. .avatar {
  3227. width: 32px;
  3228. height: 32px;
  3229. border-radius: 50%;
  3230. overflow: hidden;
  3231. margin-left: 12px;
  3232. cursor: pointer;
  3233. transition: transform 0.2s ease;
  3234. }
  3235. .avatar:hover {
  3236. transform: scale(1.05);
  3237. }
  3238. .avatar img {
  3239. width: 100%;
  3240. height: 100%;
  3241. object-fit: cover;
  3242. }
  3243. .user-info {
  3244. display: flex;
  3245. /* flex-direction: column; */
  3246. margin-right: 8px;
  3247. cursor: pointer;
  3248. }
  3249. .user-name {
  3250. font-size: 13px;
  3251. font-weight: 400;
  3252. color: var(--primary-text);
  3253. line-height: 1.4;
  3254. }
  3255. .dropdown-menu {
  3256. position: absolute;
  3257. top: 100%;
  3258. right: 0;
  3259. background: white;
  3260. border-radius: 8px;
  3261. box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  3262. min-width: 160px;
  3263. z-index: 1000;
  3264. margin-top: 4px;
  3265. }
  3266. .dropdown-item {
  3267. padding: 12px 16px;
  3268. display: flex;
  3269. align-items: center;
  3270. color: var(--primary-text);
  3271. transition: background-color 0.2s;
  3272. }
  3273. .dropdown-item:hover {
  3274. background-color: #f5f5f5;
  3275. }
  3276. /* 进度条弹窗样式 - 优化版本 */
  3277. .progress-modal-overlay {
  3278. position: fixed;
  3279. bottom: 180px;
  3280. right: 5%;
  3281. width: auto;
  3282. height: auto;
  3283. background-color: transparent;
  3284. display: block;
  3285. z-index: 9998;
  3286. animation: slideInUp 0.3s ease-out;
  3287. }
  3288. /* 响应式定位 - 确保在不同屏幕尺寸下都在任务按钮上方 */
  3289. @media (max-width: 768px) {
  3290. .progress-modal-overlay {
  3291. bottom: 160px;
  3292. right: 5%;
  3293. }
  3294. }
  3295. @media (max-width: 480px) {
  3296. .progress-modal-overlay {
  3297. bottom: 140px;
  3298. right: 15%;
  3299. }
  3300. }
  3301. /* 大屏幕优化 */
  3302. @media (min-width: 1200px) {
  3303. .progress-modal-overlay {
  3304. bottom: 200px;
  3305. right: 5%;
  3306. }
  3307. }
  3308. /* 超宽屏幕优化 */
  3309. @media (min-width: 1920px) {
  3310. .progress-modal-overlay {
  3311. bottom: 220px;
  3312. right: 5%;
  3313. }
  3314. }
  3315. @keyframes slideInUp {
  3316. from {
  3317. transform: translateY(100%);
  3318. opacity: 0;
  3319. }
  3320. to {
  3321. transform: translateY(0);
  3322. opacity: 1;
  3323. }
  3324. }
  3325. .progress-modal {
  3326. background: #ffffff;
  3327. border-radius: 12px;
  3328. padding: 24px;
  3329. min-width: 320px;
  3330. max-width: 400px;
  3331. box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  3332. text-align: left;
  3333. border: 1px solid #f0f0f0;
  3334. }
  3335. .progress-modal-header {
  3336. display: flex;
  3337. justify-content: space-between;
  3338. align-items: center;
  3339. margin-bottom: 20px;
  3340. padding-bottom: 12px;
  3341. border-bottom: 1px solid #f0f0f0;
  3342. }
  3343. .progress-modal-header h3 {
  3344. margin: 0;
  3345. color: #1a1a1a;
  3346. font-size: 18px;
  3347. font-weight: 600;
  3348. background: linear-gradient(135deg, #1890ff, #722ed1);
  3349. -webkit-background-clip: text;
  3350. -webkit-text-fill-color: transparent;
  3351. background-clip: text;
  3352. }
  3353. .close-btn {
  3354. background: rgba(0, 0, 0, 0.05);
  3355. border: none;
  3356. font-size: 18px;
  3357. color: #666;
  3358. cursor: pointer;
  3359. padding: 0;
  3360. width: 28px;
  3361. height: 28px;
  3362. display: flex;
  3363. align-items: center;
  3364. justify-content: center;
  3365. border-radius: 50%;
  3366. transition: all 0.2s ease;
  3367. font-weight: bold;
  3368. }
  3369. .close-btn:hover {
  3370. background: rgba(255, 0, 0, 0.1);
  3371. color: #ff4d4f;
  3372. transform: scale(1.1);
  3373. }
  3374. .progress-list {
  3375. max-height: 350px;
  3376. overflow-y: auto;
  3377. scrollbar-width: thin;
  3378. scrollbar-color: #d9d9d9 transparent;
  3379. }
  3380. .progress-list::-webkit-scrollbar {
  3381. width: 4px;
  3382. }
  3383. .progress-list::-webkit-scrollbar-track {
  3384. background: transparent;
  3385. }
  3386. .progress-list::-webkit-scrollbar-thumb {
  3387. background: #d9d9d9;
  3388. border-radius: 2px;
  3389. }
  3390. .progress-item {
  3391. margin-bottom: 16px;
  3392. padding: 16px;
  3393. border: 1px solid rgba(0, 0, 0, 0.06);
  3394. border-radius: 12px;
  3395. background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  3396. transition: all 0.2s ease;
  3397. position: relative;
  3398. overflow: hidden;
  3399. }
  3400. .progress-item::before {
  3401. content: '';
  3402. position: absolute;
  3403. top: 0;
  3404. left: 0;
  3405. right: 0;
  3406. height: 2px;
  3407. background: linear-gradient(90deg, #1890ff, #722ed1);
  3408. opacity: 0.8;
  3409. }
  3410. .progress-item:last-child {
  3411. margin-bottom: 0;
  3412. }
  3413. .progress-item:hover {
  3414. transform: translateY(-2px);
  3415. box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  3416. }
  3417. .progress-info {
  3418. display: flex;
  3419. justify-content: space-between;
  3420. align-items: center;
  3421. margin-bottom: 12px;
  3422. }
  3423. .progress-title {
  3424. font-size: 14px;
  3425. color: #262626;
  3426. font-weight: 500;
  3427. flex: 1;
  3428. margin-right: 12px;
  3429. }
  3430. .progress-percentage {
  3431. font-size: 13px;
  3432. color: #1890ff;
  3433. font-weight: 600;
  3434. background: rgba(24, 144, 255, 0.1);
  3435. padding: 2px 8px;
  3436. border-radius: 12px;
  3437. min-width: 45px;
  3438. text-align: center;
  3439. }
  3440. .progress-bar-container {
  3441. width: 100%;
  3442. height: 8px;
  3443. background: linear-gradient(90deg, #f0f0f0, #e8e8e8);
  3444. border-radius: 4px;
  3445. overflow: hidden;
  3446. margin-bottom: 10px;
  3447. position: relative;
  3448. }
  3449. .progress-bar {
  3450. height: 100%;
  3451. background: linear-gradient(90deg, #1890ff 0%, #40a9ff 50%, #722ed1 100%);
  3452. border-radius: 4px;
  3453. transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  3454. position: relative;
  3455. overflow: hidden;
  3456. }
  3457. .progress-bar::after {
  3458. content: '';
  3459. position: absolute;
  3460. top: 0;
  3461. left: 0;
  3462. right: 0;
  3463. bottom: 0;
  3464. background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  3465. animation: shimmer 2s infinite;
  3466. }
  3467. @keyframes shimmer {
  3468. 0% { transform: translateX(-100%); }
  3469. 100% { transform: translateX(100%); }
  3470. }
  3471. .progress-status {
  3472. font-size: 12px;
  3473. color: #8c8c8c;
  3474. text-align: right;
  3475. font-style: italic;
  3476. }
  3477. /* 进度项状态样式 */
  3478. .progress-item.completed {
  3479. background: linear-gradient(135deg, #f6ffed 0%, #f0f9ff 100%);
  3480. border-color: #52c41a;
  3481. }
  3482. .progress-item.error {
  3483. background: linear-gradient(135deg, #fff2f0 0%, #fff1f0 100%);
  3484. border-color: #ff4d4f;
  3485. }
  3486. .progress-title-wrapper {
  3487. display: flex;
  3488. align-items: center;
  3489. gap: 8px;
  3490. }
  3491. .progress-icon {
  3492. font-size: 16px;
  3493. min-width: 20px;
  3494. }
  3495. /* 进度百分比状态样式 */
  3496. .progress-percentage.completed {
  3497. background: rgba(82, 196, 26, 0.1);
  3498. color: #52c41a;
  3499. }
  3500. .progress-percentage.error {
  3501. background: rgba(255, 77, 79, 0.1);
  3502. color: #ff4d4f;
  3503. }
  3504. .progress-percentage.active {
  3505. background: rgba(24, 144, 255, 0.1);
  3506. color: #1890ff;
  3507. }
  3508. /* 进度条状态样式 */
  3509. .progress-bar.completed-bar {
  3510. background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
  3511. }
  3512. .progress-bar.error-bar {
  3513. background: linear-gradient(90deg, #ff4d4f 0%, #ff7875 100%);
  3514. }
  3515. /* 子进度项样式 */
  3516. .sub-progress-list {
  3517. margin-top: 12px;
  3518. padding-left: 16px;
  3519. border-left: 2px solid #f0f0f0;
  3520. }
  3521. .sub-progress-item {
  3522. margin-bottom: 8px;
  3523. padding: 8px 12px;
  3524. background: rgba(0, 0, 0, 0.02);
  3525. border-radius: 6px;
  3526. border: 1px solid transparent;
  3527. transition: all 0.2s ease;
  3528. }
  3529. .sub-progress-item.active {
  3530. background: rgba(24, 144, 255, 0.05);
  3531. border-color: rgba(24, 144, 255, 0.2);
  3532. transform: translateX(4px);
  3533. }
  3534. .sub-progress-item.completed {
  3535. background: rgba(82, 196, 26, 0.05);
  3536. border-color: rgba(82, 196, 26, 0.2);
  3537. }
  3538. .sub-progress-item:last-child {
  3539. margin-bottom: 0;
  3540. }
  3541. .sub-progress-info {
  3542. display: flex;
  3543. align-items: center;
  3544. gap: 8px;
  3545. margin-bottom: 6px;
  3546. }
  3547. .sub-progress-icon {
  3548. font-size: 12px;
  3549. min-width: 16px;
  3550. color: #666;
  3551. }
  3552. .sub-progress-item.active .sub-progress-icon {
  3553. color: #1890ff;
  3554. }
  3555. .sub-progress-item.completed .sub-progress-icon {
  3556. color: #52c41a;
  3557. }
  3558. .sub-progress-title {
  3559. font-size: 12px;
  3560. color: #595959;
  3561. flex: 1;
  3562. }
  3563. .sub-progress-item.active .sub-progress-title {
  3564. color: #1890ff;
  3565. font-weight: 500;
  3566. }
  3567. .sub-progress-item.completed .sub-progress-title {
  3568. color: #52c41a;
  3569. }
  3570. .sub-progress-percentage {
  3571. font-size: 11px;
  3572. color: #8c8c8c;
  3573. font-weight: 600;
  3574. min-width: 35px;
  3575. text-align: right;
  3576. }
  3577. .sub-progress-item.active .sub-progress-percentage {
  3578. color: #1890ff;
  3579. }
  3580. .sub-progress-item.completed .sub-progress-percentage {
  3581. color: #52c41a;
  3582. }
  3583. .sub-progress-bar-container {
  3584. width: 100%;
  3585. height: 4px;
  3586. background: #f5f5f5;
  3587. border-radius: 2px;
  3588. overflow: hidden;
  3589. }
  3590. .sub-progress-bar {
  3591. height: 100%;
  3592. background: linear-gradient(90deg, #d9d9d9 0%, #bfbfbf 100%);
  3593. border-radius: 2px;
  3594. transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  3595. }
  3596. .sub-progress-item.active .sub-progress-bar {
  3597. background: linear-gradient(90deg, #1890ff 0%, #40a9ff 100%);
  3598. }
  3599. .sub-progress-item.completed .sub-progress-bar {
  3600. background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
  3601. }
  3602. /* 子子进度项样式 */
  3603. .sub-sub-progress-list {
  3604. margin-top: 8px;
  3605. padding-left: 12px;
  3606. border-left: 1px solid #e8e8e8;
  3607. }
  3608. .sub-sub-progress-item {
  3609. margin-bottom: 6px;
  3610. padding: 6px 8px;
  3611. background: rgba(0, 0, 0, 0.01);
  3612. border-radius: 4px;
  3613. border: 1px solid transparent;
  3614. transition: all 0.15s ease;
  3615. font-size: 11px;
  3616. }
  3617. .sub-sub-progress-item.active {
  3618. background: rgba(24, 144, 255, 0.03);
  3619. border-color: rgba(24, 144, 255, 0.15);
  3620. transform: translateX(2px);
  3621. }
  3622. .sub-sub-progress-item.completed {
  3623. background: rgba(82, 196, 26, 0.03);
  3624. border-color: rgba(82, 196, 26, 0.15);
  3625. }
  3626. .sub-sub-progress-item:last-child {
  3627. margin-bottom: 0;
  3628. }
  3629. .sub-sub-progress-info {
  3630. display: flex;
  3631. align-items: center;
  3632. gap: 6px;
  3633. margin-bottom: 4px;
  3634. }
  3635. .sub-sub-progress-icon {
  3636. font-size: 10px;
  3637. min-width: 12px;
  3638. color: #999;
  3639. }
  3640. .sub-sub-progress-item.active .sub-sub-progress-icon {
  3641. color: #1890ff;
  3642. }
  3643. .sub-sub-progress-item.completed .sub-sub-progress-icon {
  3644. color: #52c41a;
  3645. }
  3646. .sub-sub-progress-title {
  3647. font-size: 11px;
  3648. color: #8c8c8c;
  3649. flex: 1;
  3650. line-height: 1.2;
  3651. }
  3652. .sub-sub-progress-item.active .sub-sub-progress-title {
  3653. color: #1890ff;
  3654. font-weight: 500;
  3655. }
  3656. .sub-sub-progress-item.completed .sub-sub-progress-title {
  3657. color: #52c41a;
  3658. }
  3659. .sub-sub-progress-percentage {
  3660. font-size: 10px;
  3661. color: #bfbfbf;
  3662. font-weight: 600;
  3663. min-width: 30px;
  3664. text-align: right;
  3665. }
  3666. .sub-sub-progress-item.active .sub-sub-progress-percentage {
  3667. color: #1890ff;
  3668. }
  3669. .sub-sub-progress-item.completed .sub-sub-progress-percentage {
  3670. color: #52c41a;
  3671. }
  3672. .sub-sub-progress-bar-container {
  3673. width: 100%;
  3674. height: 3px;
  3675. background: #f8f8f8;
  3676. border-radius: 1.5px;
  3677. overflow: hidden;
  3678. }
  3679. .sub-sub-progress-bar {
  3680. height: 100%;
  3681. background: linear-gradient(90deg, #e8e8e8 0%, #d9d9d9 100%);
  3682. border-radius: 1.5px;
  3683. transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  3684. }
  3685. .sub-sub-progress-item.active .sub-sub-progress-bar {
  3686. background: linear-gradient(90deg, #69c0ff 0%, #91d5ff 100%);
  3687. }
  3688. .sub-sub-progress-item.completed .sub-sub-progress-bar {
  3689. background: linear-gradient(90deg, #95de64 0%, #b7eb8f 100%);
  3690. }
  3691. /* 层级缩进视觉效果 */
  3692. .progress-item {
  3693. position: relative;
  3694. }
  3695. .progress-item::before {
  3696. content: '';
  3697. position: absolute;
  3698. top: 0;
  3699. left: 0;
  3700. right: 0;
  3701. height: 2px;
  3702. background: linear-gradient(90deg, #1890ff, #722ed1);
  3703. opacity: 0.8;
  3704. }
  3705. .sub-progress-item {
  3706. position: relative;
  3707. }
  3708. .sub-progress-item::before {
  3709. content: '';
  3710. position: absolute;
  3711. left: -16px;
  3712. top: 50%;
  3713. width: 8px;
  3714. height: 1px;
  3715. background: #d9d9d9;
  3716. transform: translateY(-50%);
  3717. }
  3718. .sub-progress-item.active::before {
  3719. background: #1890ff;
  3720. }
  3721. .sub-progress-item.completed::before {
  3722. background: #52c41a;
  3723. }
  3724. .sub-sub-progress-item {
  3725. position: relative;
  3726. }
  3727. .sub-sub-progress-item::before {
  3728. content: '';
  3729. position: absolute;
  3730. left: -12px;
  3731. top: 50%;
  3732. width: 6px;
  3733. height: 1px;
  3734. background: #e8e8e8;
  3735. transform: translateY(-50%);
  3736. }
  3737. .sub-sub-progress-item.active::before {
  3738. background: #69c0ff;
  3739. }
  3740. .sub-sub-progress-item.completed::before {
  3741. background: #95de64;
  3742. }
  3743. .dropdown-item i {
  3744. margin-right: 8px;
  3745. font-size: 14px;
  3746. color: #666;
  3747. }
  3748. .menu {
  3749. margin-top: 64px;
  3750. padding-top: 15px;
  3751. background: #f7f7f8;
  3752. width: 260px;
  3753. height: 93%;
  3754. display: flex;
  3755. flex-direction: column;
  3756. border-right: 1px solid rgba(0, 0, 0, 0.06);
  3757. position: absolute;
  3758. left: 0;
  3759. /* transform: translateX(0); */
  3760. transition: all 0.3s ease;
  3761. z-index: 2;
  3762. }
  3763. .menu.collapsed {
  3764. display: none;
  3765. transform: translateX(-260px);
  3766. width: 0;
  3767. }
  3768. .conversations {
  3769. padding: 0 12px;
  3770. flex: 1;
  3771. overflow-y: auto;
  3772. }
  3773. .chat {
  3774. flex: 1;
  3775. margin: 75px 24px 24px;
  3776. display: flex;
  3777. flex-direction: column;
  3778. gap: 24px;
  3779. overflow-y: auto;
  3780. overflow-x: hidden;
  3781. transition: all 0.3s ease;
  3782. position: absolute;
  3783. left: 0;
  3784. right: 260px;
  3785. top: 0;
  3786. bottom: 0;
  3787. justify-content: space-between;
  3788. background-color: var(--primary-bg);
  3789. /* margin: 16px; */
  3790. border-radius: 16px;
  3791. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  3792. }
  3793. .chat-header {
  3794. padding: 20px 24px;
  3795. border-bottom: 1px solid var(--border-color);
  3796. display: flex;
  3797. align-items: center;
  3798. justify-content: space-between;
  3799. background: var(--secondary-bg);
  3800. }
  3801. .chat-header h2 {
  3802. font-size: 18px;
  3803. font-weight: 600;
  3804. color: var(--text-primary);
  3805. margin: 0;
  3806. }
  3807. .chat-status {
  3808. display: flex;
  3809. align-items: center;
  3810. gap: 8px;
  3811. font-size: 14px;
  3812. color: var(--text-secondary);
  3813. }
  3814. .status-indicator {
  3815. width: 8px;
  3816. height: 8px;
  3817. border-radius: 50%;
  3818. background: var(--success-color);
  3819. animation: pulse 2s infinite;
  3820. }
  3821. .menu:not(.collapsed) + .chat {
  3822. left: 260px;
  3823. }
  3824. .chat {
  3825. right: 0;
  3826. transition: all 0.3s ease;
  3827. }
  3828. .layout:has(.right_menu:not(.collapsed)) .chat {
  3829. right: 450px;
  3830. }
  3831. .right_menu:not(.collapsed) ~ .chat {
  3832. right: 450px;
  3833. }
  3834. .messages {
  3835. flex: 1;
  3836. overflow-y: auto;
  3837. padding-right: 16px;
  3838. }
  3839. .sender {
  3840. box-shadow: none;
  3841. border: 1px solid #e5e6eb;
  3842. border-radius: 8px;
  3843. padding: 8px;
  3844. }
  3845. .logo {
  3846. height: 64px;
  3847. display: flex;
  3848. align-items: center;
  3849. padding: 0 20px;
  3850. }
  3851. .logo-img {
  3852. /* width: 24px; */
  3853. height: 40px;
  3854. }
  3855. .logo span {
  3856. margin-left: 12px;
  3857. font-size: 16px;
  3858. font-weight: 600;
  3859. color: rgba(0, 0, 0, 0.88);
  3860. }
  3861. .new-conversation-btn {
  3862. margin: 0 12px 12px;
  3863. height: 40px;
  3864. background: rgba(235, 245, 255, 0.7);
  3865. border: none;
  3866. border-radius: 8px;
  3867. color: #1677ff;
  3868. font-size: 14px;
  3869. display: flex;
  3870. align-items: center;
  3871. justify-content: center;
  3872. gap: 8px;
  3873. cursor: pointer;
  3874. transition: background-color 0.2s;
  3875. }
  3876. .new-conversation-btn:hover {
  3877. background: rgba(235, 245, 255, 0.9);
  3878. }
  3879. .conversation-list {
  3880. background: var(--secondary-bg);
  3881. flex: 1;
  3882. color: var(--primary-text);
  3883. padding: 0 8px;
  3884. overflow-y: auto;
  3885. }
  3886. .conversation-item {
  3887. padding: 12px;
  3888. margin: 4px 0;
  3889. border-radius: 8px;
  3890. color: var(--primary-text);
  3891. font-size: 14px;
  3892. cursor: pointer;
  3893. transition: background-color 0.2s;
  3894. display: flex;
  3895. flex-direction: column;
  3896. gap: 4px;
  3897. border-bottom: 1px solid #e5e6eb;
  3898. }
  3899. .conversation-title {
  3900. font-weight: 500;
  3901. color: #333;
  3902. line-height: 1.4;
  3903. overflow: hidden;
  3904. text-overflow: ellipsis;
  3905. display: -webkit-box;
  3906. -webkit-line-clamp: 2;
  3907. -webkit-box-orient: vertical;
  3908. white-space:nowrap;
  3909. overflow:hidden;
  3910. text-overflow:ellipsis;
  3911. }
  3912. .conversation-meta {
  3913. display: flex;
  3914. align-items: center;
  3915. font-size: 12px;
  3916. color: #666;
  3917. }
  3918. .conversation-time {
  3919. color: var(--secondary-text);
  3920. }
  3921. .conversation-type {
  3922. background: var(--accent-bg);
  3923. color: var(--accent-text);
  3924. padding: 2px 6px;
  3925. border-radius: 4px;
  3926. font-size: 11px;
  3927. }
  3928. .conversation-item:hover {
  3929. background: rgba(0, 0, 0, 0.04);
  3930. }
  3931. .conversation-item.active {
  3932. background: var(--secondary-bg);
  3933. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  3934. }
  3935. .conversation-list::-webkit-scrollbar {
  3936. width: 4px;
  3937. }
  3938. .conversation-list::-webkit-scrollbar-thumb {
  3939. background: rgba(0, 0, 0, 0.15);
  3940. border-radius: 2px;
  3941. }
  3942. .conversation-list::-webkit-scrollbar-track {
  3943. background: transparent;
  3944. }
  3945. :deep(.welcome-message) {
  3946. background: #fff;
  3947. border-radius: 8px;
  3948. padding: 16px;
  3949. display: flex;
  3950. align-items: flex-start;
  3951. gap: 16px;
  3952. }
  3953. :deep(.welcome-message .title) {
  3954. font-size: 16px;
  3955. font-weight: 500;
  3956. color: rgba(0, 0, 0, 0.88);
  3957. margin-bottom: 4px;
  3958. }
  3959. :deep(.welcome-message .description) {
  3960. color: rgba(0, 0, 0, 0.45);
  3961. font-size: 14px;
  3962. }
  3963. :deep(.prompt-card) {
  3964. background: #f7f8fa;
  3965. border-radius: 8px;
  3966. padding: 16px;
  3967. margin-bottom: 12px;
  3968. }
  3969. :deep(.prompt-card-title) {
  3970. font-size: 16px;
  3971. font-weight: 500;
  3972. margin-bottom: 8px;
  3973. display: flex;
  3974. align-items: center;
  3975. gap: 8px;
  3976. }
  3977. :deep(.prompt-option) {
  3978. background: #f5f5f5;
  3979. padding: 8px 12px;
  3980. border-radius: 4px;
  3981. margin-top: 8px;
  3982. cursor: pointer;
  3983. transition: background 0.3s;
  3984. }
  3985. :deep(.prompt-option:hover) {
  3986. background: #e8e8e8;
  3987. }
  3988. .input-container {
  3989. padding: 15px;
  3990. width: 98%;
  3991. /* margin: auto auto 0;
  3992. display: flex;
  3993. flex-direction: column; */
  3994. background-color: var(--secondary-bg);
  3995. border-radius: 5px;
  3996. }
  3997. .tabs-wrapper {
  3998. display: flex;
  3999. gap: 8px;
  4000. margin-bottom: 4px;
  4001. }
  4002. .tab-item {
  4003. display: flex;
  4004. align-items: center;
  4005. gap: 6px;
  4006. padding: 4px 12px;
  4007. border-radius: 4px;
  4008. cursor: pointer;
  4009. font-size: 14px;
  4010. color: rgba(0, 0, 0, 0.88);
  4011. background: transparent;
  4012. transition: background-color 0.2s;
  4013. }
  4014. .tab-item:hover {
  4015. background: rgba(0, 0, 0, 0.04);
  4016. }
  4017. .tab-item.active {
  4018. background: #f5f5f5;
  4019. }
  4020. .tab-item .anticon {
  4021. font-size: 14px;
  4022. }
  4023. .input-wrapper {
  4024. display: flex;
  4025. align-items: center;
  4026. padding: 8px 12px;
  4027. border: 1px solid var(--border-color);
  4028. border-radius: 8px;
  4029. background: var(--secondary-bg);
  4030. color: var(--primary-text);
  4031. }
  4032. .message-input {
  4033. flex: 1;
  4034. border: none;
  4035. outline: none;
  4036. padding: 8px;
  4037. font-size: 14px;
  4038. background: transparent;
  4039. color: var(--primary-text);
  4040. }
  4041. .message-input::placeholder {
  4042. color: var(--primary-text);
  4043. }
  4044. .attachment-btn,
  4045. .send-btn {
  4046. display: flex;
  4047. align-items: center;
  4048. justify-content: center;
  4049. width: 32px;
  4050. height: 32px;
  4051. border: none;
  4052. background: transparent;
  4053. cursor: pointer;
  4054. color: rgba(0, 0, 0, 0.45);
  4055. border-radius: 4px;
  4056. padding: 0;
  4057. }
  4058. .attachment-btn:hover,
  4059. .send-btn:hover {
  4060. background: rgba(0, 0, 0, 0.04);
  4061. color: var(--primary-text);
  4062. }
  4063. .attachments-panel {
  4064. background: var(--primary-bg);
  4065. border-radius: 12px;
  4066. box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  4067. overflow: hidden;
  4068. }
  4069. .panel-content {
  4070. background: var(--primary-bg);
  4071. }
  4072. .attachments-header {
  4073. padding: 12px 16px;
  4074. border-bottom: 1px solid #f0f0f0;
  4075. display: flex;
  4076. justify-content: space-between;
  4077. align-items: center;
  4078. }
  4079. .attachments-header span {
  4080. font-size: 14px;
  4081. font-weight: 500;
  4082. color: var(--primary-text);
  4083. }
  4084. .close-btn {
  4085. border: none;
  4086. background: transparent;
  4087. cursor: pointer;
  4088. padding: 4px;
  4089. display: flex;
  4090. align-items: center;
  4091. justify-content: center;
  4092. color: rgba(0, 0, 0, 0.45);
  4093. }
  4094. .upload-area {
  4095. padding: 24px;
  4096. border-radius: 8px;
  4097. text-align: center;
  4098. cursor: pointer;
  4099. color: var(--primary-text);
  4100. transition: all 0.3s;
  4101. }
  4102. .upload-area.has-files {
  4103. padding: 12px;
  4104. background: var(--primary-bg);
  4105. }
  4106. .upload-icon {
  4107. width: 32px;
  4108. height: 32px;
  4109. margin-bottom: 8px;
  4110. }
  4111. .upload-text {
  4112. font-size: 14px;
  4113. color: var(--primary-text);
  4114. margin-bottom: 4px;
  4115. }
  4116. .upload-hint {
  4117. font-size: 12px;
  4118. color: var(--primary-text);
  4119. }
  4120. .file-list {
  4121. display: flex;
  4122. flex-wrap: wrap;
  4123. gap: 8px;
  4124. padding: 10px;
  4125. }
  4126. .file-item {
  4127. position: relative;
  4128. width: 260px;
  4129. padding: 8px 12px;
  4130. margin: 4px 0;
  4131. background: var(--secondary-bg);
  4132. border-radius: 8px;
  4133. }
  4134. .file-item.is-image {
  4135. width: 68px;
  4136. padding: 0;
  4137. margin: 4px 0;
  4138. }
  4139. .file-wrapper {
  4140. position: relative;
  4141. width: 100%;
  4142. height: 100%;
  4143. }
  4144. .file-icon {
  4145. width: 68px;
  4146. height: 68px;
  4147. object-fit: cover;
  4148. border-radius: 4px;
  4149. }
  4150. .file-wrapper video.file-icon {
  4151. background: #000;
  4152. }
  4153. .remove-btn {
  4154. position: absolute;
  4155. top: -8px;
  4156. right: -8px;
  4157. width: 16px;
  4158. height: 16px;
  4159. padding: 0;
  4160. border: none;
  4161. background: #545454;
  4162. border-radius: 50%;
  4163. cursor: pointer;
  4164. display: flex;
  4165. align-items: center;
  4166. justify-content: center;
  4167. font-size: 14px;
  4168. line-height: 1;
  4169. color: #fff;
  4170. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  4171. }
  4172. .remove-btn:hover {
  4173. opacity: 0.8;
  4174. }
  4175. .file-info {
  4176. margin-top: 8px;
  4177. }
  4178. .file-name {
  4179. display: block;
  4180. max-width: 150px;
  4181. color: var(--primary-text);
  4182. font-size: 14px;
  4183. white-space: nowrap;
  4184. overflow: hidden;
  4185. text-overflow: ellipsis;
  4186. }
  4187. .file-info .file-name {
  4188. max-width: 150px;
  4189. color: var(--primary-text);
  4190. }
  4191. .file-name:hover {
  4192. cursor: pointer;
  4193. }
  4194. .file-size {
  4195. display: block;
  4196. color: var(--primary-text);
  4197. font-size: 12px;
  4198. margin-top: 4px;
  4199. }
  4200. .add-more-btn {
  4201. display: flex;
  4202. align-items: center;
  4203. justify-content: center;
  4204. width: 68px;
  4205. height: 68px;
  4206. border: 1px dashed #d9d9d9;
  4207. border-radius: 6px;
  4208. background: transparent;
  4209. cursor: pointer;
  4210. transition: all 0.3s;
  4211. margin: 4px 0;
  4212. }
  4213. .add-more-btn:hover {
  4214. border-color: #1677ff;
  4215. background: #f0f7ff;
  4216. }
  4217. /* 欢迎区域样式 */
  4218. .welcome-section {
  4219. max-width: 800px;
  4220. margin: 0 auto;
  4221. width: 50%;
  4222. }
  4223. .welcome-header {
  4224. display: flex;
  4225. align-items: flex-start;
  4226. gap: 16px;
  4227. margin-bottom: 24px;
  4228. }
  4229. .avatar {
  4230. width: 40px;
  4231. height: 40px;
  4232. border-radius: 50%;
  4233. }
  4234. .avatar img{
  4235. width: 100%;
  4236. height: 100%;
  4237. border-radius: 50%;
  4238. }
  4239. .welcome-info {
  4240. flex: 1;
  4241. }
  4242. .welcome-info h2 {
  4243. font-size: 20px;
  4244. font-weight: 500;
  4245. color: rgba(0, 0, 0, 0.88);
  4246. margin: 0 0 4px 0;
  4247. }
  4248. .welcome-info p {
  4249. font-size: 14px;
  4250. color: rgba(0, 0, 0, 0.45);
  4251. margin: 0;
  4252. }
  4253. .action-buttons {
  4254. display: flex;
  4255. gap: 8px;
  4256. }
  4257. .icon-btn {
  4258. padding: 8px;
  4259. border: none;
  4260. background: transparent;
  4261. cursor: pointer;
  4262. color: rgba(0, 0, 0, 0.45);
  4263. }
  4264. /* 建议区域样式 */
  4265. .suggestion-section {
  4266. margin-top: 70px;
  4267. }
  4268. .suggestion-section h3 {
  4269. font-size: 14px;
  4270. color: rgba(0, 0, 0, 0.45);
  4271. margin-bottom: 16px;
  4272. }
  4273. .cards-container {
  4274. display: flex;
  4275. gap: 16px;
  4276. }
  4277. .suggestion-card {
  4278. flex: 1;
  4279. border-radius: 8px;
  4280. padding: 16px;
  4281. background: #ffffff; /* 替换 var(--ant-color-bg-container) */
  4282. border-radius: 8px; /* 替换 var(--ant-border-radius-lg) */
  4283. transition: border 0.3s, background 0.3s; /* 替换 var(--ant-motion-duration-slow) */
  4284. border: 1px solid #f0f0f0; /* 替换合的 border 属性 */
  4285. }
  4286. .loading-btn {
  4287. display: flex;
  4288. align-items: center;
  4289. justify-content: center;
  4290. width: 32px;
  4291. height: 32px;
  4292. background: #4d7cff;
  4293. border-radius: 50%;
  4294. position: relative;
  4295. }
  4296. .loading-square {
  4297. width: 14px;
  4298. height: 14px;
  4299. background: #fff;
  4300. border-radius: 3px;
  4301. display: block;
  4302. animation: loading-square-blink 1s infinite;
  4303. }
  4304. @keyframes loading-square-blink {
  4305. 0%, 100% { opacity: 1; }
  4306. 50% { opacity: 0.5; }
  4307. }
  4308. :root {
  4309. --ant-color-bg-container: #ffffff;
  4310. --ant-border-radius-lg: 8px;
  4311. --ant-motion-duration-slow: 0.3s;
  4312. --ant-line-width: 1px;
  4313. --ant-line-type: solid;
  4314. --ant-color-border-secondary: #f0f0f0;
  4315. }
  4316. .card-header {
  4317. display: flex;
  4318. align-items: center;
  4319. gap: 8px;
  4320. margin-bottom: 8px;
  4321. }
  4322. .card-header h4 {
  4323. font-size: 16px;
  4324. font-weight: 500;
  4325. color: rgba(0, 0, 0, 0.88);
  4326. margin: 0;
  4327. }
  4328. .icon.red {
  4329. color: #ff4d4f;
  4330. }
  4331. .icon.blue {
  4332. color: #1890ff;
  4333. }
  4334. .card-subtitle {
  4335. font-size: 14px;
  4336. color: rgba(0, 0, 0, 0.45);
  4337. margin-bottom: 16px;
  4338. }
  4339. .suggestion-items {
  4340. display: flex;
  4341. flex-direction: column;
  4342. gap: 8px;
  4343. }
  4344. .suggestion-item {
  4345. padding: 8px 12px;
  4346. background: #f5f5f5;
  4347. border-radius: 4px;
  4348. font-size: 12px;
  4349. color: rgba(0, 0, 0, 0.88);
  4350. display: flex;
  4351. align-items: center;
  4352. gap: 8px;
  4353. cursor: pointer;
  4354. transition: opacity 0.3s ease;
  4355. }
  4356. .suggestion-item:hover {
  4357. background: #e8e8e8;
  4358. }
  4359. .tab-icon {
  4360. width: 16px;
  4361. }
  4362. .attached-files {
  4363. padding: 16px;
  4364. }
  4365. .file-item {
  4366. display: flex;
  4367. align-items: center;
  4368. gap: 8px;
  4369. padding: 8px;
  4370. border-radius: 4px;
  4371. }
  4372. .file-item:hover {
  4373. background: var(--secondary-bg);
  4374. }
  4375. .remove-btn {
  4376. margin-left: auto;
  4377. padding: 4px;
  4378. border: none;
  4379. background: transparent;
  4380. cursor: pointer;
  4381. color: var(--primary-text);
  4382. }
  4383. .remove-btn:hover {
  4384. color: var(--primary-text);
  4385. }
  4386. .send-btn:disabled {
  4387. opacity: 0.5;
  4388. cursor: not-allowed;
  4389. }
  4390. .upload-area {
  4391. /* border: 2px dashed #d9d9d9; */
  4392. border-radius: 8px;
  4393. padding: 20px;
  4394. text-align: center;
  4395. cursor: pointer;
  4396. transition: border-color 0.3s;
  4397. }
  4398. /* .upload-area:hover,
  4399. .upload-area.drag-over {
  4400. border-color: #1677ff;
  4401. } */
  4402. .file-item {
  4403. display: flex;
  4404. align-items: center;
  4405. width: 236px;
  4406. height: 68px;
  4407. padding: 0;
  4408. margin: 4px 0;
  4409. background: var(--secondary-bg);
  4410. color: var(--primary-text);
  4411. border-radius: 4px;
  4412. }
  4413. .file-item .remove-btn {
  4414. margin-left: auto;
  4415. padding: 4px 8px;
  4416. background: transparent;
  4417. border: none;
  4418. cursor: pointer;
  4419. }
  4420. /* 聊天内容显示框 */
  4421. .message-list {
  4422. width: 60%;
  4423. overflow-y: auto;
  4424. overflow-x: hidden;
  4425. padding: 0 20px;
  4426. display: flex;
  4427. flex-direction: column;
  4428. gap: 16px;
  4429. margin: 0px auto 0;
  4430. }
  4431. .message-item {
  4432. display: flex;
  4433. margin-bottom: 12px;
  4434. }
  4435. /* 用户消息靠右显示 */
  4436. .user {
  4437. display: flex;
  4438. justify-content: flex-end;
  4439. }
  4440. .message-bubble {
  4441. max-width: 80%;
  4442. padding: 12px 16px;
  4443. border-radius: 12px;
  4444. background: #fff;
  4445. /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */
  4446. }
  4447. /* 用户消息的气泡样式 */
  4448. .user .message-bubble {
  4449. background: #edf2f7;
  4450. color: rgba(0, 0, 0, 0.88);
  4451. }
  4452. .assistant{
  4453. flex-direction: column;
  4454. }
  4455. /* AI消息的气泡样式 */
  4456. .assistant .message-bubble {
  4457. background: #f7f7f8;
  4458. color: rgba(0, 0, 0, 0.88);
  4459. }
  4460. .message-content {
  4461. font-size: 14px;
  4462. line-height: 1.5;
  4463. white-space: pre-wrap;
  4464. word-break: break-word;
  4465. }
  4466. .right_menu {
  4467. /* 修改现有样式 */
  4468. /* position: absolute;
  4469. right: 0; */
  4470. margin-top: 64px;
  4471. height: 93%;
  4472. background: #f7f7f8;
  4473. border-left: 1px solid rgba(0, 0, 0, 0.06);
  4474. transform: translateX(0);
  4475. transition: transform 0.3s ease, width 0.3s ease;
  4476. z-index: 2;
  4477. position: relative;
  4478. }
  4479. .right_menu.collapsed {
  4480. transform: translateX(100%);
  4481. width: 0;
  4482. }
  4483. /* 当右侧菜单展开时,给聊天区域添加右边距 */
  4484. .right_menu:not(.collapsed) + .chat {
  4485. margin-right: 450px;
  4486. }
  4487. .collapse-left-button{
  4488. position: absolute;
  4489. left: 260px;
  4490. top: 50%;
  4491. transform: translateY(-50%);
  4492. width: 20px;
  4493. height: 40px;
  4494. background: var(--secondary-bg);
  4495. border: 1px solid var(--border-color);
  4496. border-right: none;
  4497. border-radius: 4px 0 0 4px;
  4498. display: flex;
  4499. align-items: center;
  4500. justify-content: center;
  4501. cursor: pointer;
  4502. z-index: 2;
  4503. transition: all 0.3s ease;
  4504. }
  4505. .menu-collapsed {
  4506. left: 0px;
  4507. border-right: 1px solid var(--border-color);
  4508. border-left: none;
  4509. border-radius: 0 4px 4px 0;
  4510. }
  4511. /* .collapse-button {
  4512. position: absolute;
  4513. left: -20px;
  4514. top: 50%;
  4515. transform: translateY(-50%);
  4516. width: 20px;
  4517. height: 40px;
  4518. background: #fff;
  4519. border: 1px solid rgba(0, 0, 0, 0.06);
  4520. border-right: none;
  4521. border-radius: 4px 0 0 4px;
  4522. display: flex;
  4523. align-items: center;
  4524. justify-content: center;
  4525. cursor: pointer;
  4526. z-index: 3;
  4527. transition: left 0.3s ease;
  4528. } */
  4529. /* .collapse-button.menu-expanded {
  4530. border-right: 1px solid rgba(0, 0, 0, 0.06);
  4531. border-left: none;
  4532. border-radius: 0 4px 4px 0;
  4533. } */
  4534. /* .collapse-button:hover {
  4535. background: #f5f5f5;
  4536. } */
  4537. /* .collapse-icon {
  4538. width: 12px;
  4539. height: 12px;
  4540. } */
  4541. .right-menu-content {
  4542. height: 100%;
  4543. overflow-y: auto;
  4544. }
  4545. .right_menu.collapsed .right-menu-content {
  4546. display: none;
  4547. }
  4548. /* 添加打字效果的光标样式 */
  4549. /* .assistant .message-content {
  4550. position: relative;
  4551. }
  4552. .assistant .message-content::after {
  4553. content: '|';
  4554. position: absolute;
  4555. margin-left: 2px;
  4556. animation: cursor-blink 1s infinite;
  4557. }
  4558. @keyframes cursor-blink {
  4559. 0%, 100% { opacity: 1; }
  4560. 50% { opacity: 0; }
  4561. }*/
  4562. .file-message {
  4563. background: #f7f7f8;
  4564. border-radius: 8px;
  4565. padding: 12px;
  4566. margin-bottom: 8px;
  4567. }
  4568. .file-info-display {
  4569. display: flex;
  4570. align-items: center;
  4571. gap: 12px;
  4572. margin-bottom: 8px;
  4573. }
  4574. .file-type-icon {
  4575. width: 24px;
  4576. height: 24px;
  4577. object-fit: contain;
  4578. }
  4579. .file-details {
  4580. display: flex;
  4581. flex-direction: column;
  4582. }
  4583. /* .file-name {
  4584. font-size: 14px;
  4585. color: rgba(0, 0, 0, 0.88);
  4586. margin-bottom: 4px;
  4587. } */
  4588. .file-size {
  4589. font-size: 12px;
  4590. color: rgba(0, 0, 0, 0.45);
  4591. }
  4592. .file-action {
  4593. font-size: 12px;
  4594. color: rgba(0, 0, 0, 0.45);
  4595. padding-left: 36px;
  4596. }
  4597. /* 修改用户消息气泡样式,确保文件信息正确显示 */
  4598. .user .message-bubble {
  4599. background: #edf2f7;
  4600. color: rgba(0, 0, 0, 0.88);
  4601. }
  4602. .user .file-message {
  4603. background: #f7f7f8;
  4604. }
  4605. /* 图片预览样式 */
  4606. .image-preview {
  4607. position: relative;
  4608. width: 200px;
  4609. border-radius: 8px;
  4610. overflow: hidden;
  4611. background: #fff;
  4612. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  4613. }
  4614. .preview-image {
  4615. width: 100%;
  4616. height: auto;
  4617. display: block;
  4618. }
  4619. .image-info {
  4620. position: absolute;
  4621. bottom: 0;
  4622. left: 0;
  4623. right: 0;
  4624. padding: 8px;
  4625. background: rgba(255, 255, 255, 0.9);
  4626. font-size: 12px;
  4627. color: rgba(0, 0, 0, 0.45);
  4628. text-align: center;
  4629. border-top: 1px solid rgba(0, 0, 0, 0.06);
  4630. }
  4631. /* 文档显示样式保持不变 */
  4632. .file-info-display {
  4633. display: flex;
  4634. align-items: center;
  4635. gap: 12px;
  4636. margin-bottom: 8px;
  4637. }
  4638. .file-type-icon {
  4639. width: 24px;
  4640. height: 24px;
  4641. object-fit: contain;
  4642. }
  4643. .file-details {
  4644. display: flex;
  4645. flex-direction: column;
  4646. }
  4647. /* .file-name {
  4648. font-size: 14px;
  4649. color: rgba(0, 0, 0, 0.88);
  4650. margin-bottom: 4px;
  4651. } */
  4652. .file-size {
  4653. font-size: 12px;
  4654. color: rgba(0, 0, 0, 0.45);
  4655. }
  4656. .file-action {
  4657. font-size: 12px;
  4658. color: rgba(0, 0, 0, 0.45);
  4659. padding-left: 36px;
  4660. }
  4661. /* 添加音频控制相关样式 */
  4662. .audio-controls {
  4663. margin-top: 8px;
  4664. }
  4665. .audio-btn {
  4666. background: transparent;
  4667. border: none;
  4668. padding: 4px 8px;
  4669. cursor: pointer;
  4670. display: flex;
  4671. align-items: center;
  4672. justify-content: center;
  4673. border-radius: 4px;
  4674. transition: background-color 0.2s;
  4675. min-width: 32px;
  4676. height: 32px;
  4677. }
  4678. .audio-btn:hover {
  4679. background: rgba(0, 0, 0, 0.04);
  4680. }
  4681. .audio-icon {
  4682. width: 20px;
  4683. height: 20px;
  4684. }
  4685. /* 音频波形动画样式 */
  4686. .wave-animation {
  4687. display: flex;
  4688. align-items: center;
  4689. height: 20px;
  4690. gap: 2px;
  4691. }
  4692. .wave-bar {
  4693. display: inline-block;
  4694. width: 3px;
  4695. height: 100%;
  4696. background: #1677ff;
  4697. border-radius: 1px;
  4698. animation: wave 1s ease-in-out infinite;
  4699. }
  4700. .wave-bar:nth-child(1) {
  4701. animation-delay: 0s;
  4702. }
  4703. .wave-bar:nth-child(2) {
  4704. animation-delay: 0.2s;
  4705. }
  4706. .wave-bar:nth-child(3) {
  4707. animation-delay: 0.4s;
  4708. }
  4709. .wave-bar:nth-child(4) {
  4710. animation-delay: 0.6s;
  4711. }
  4712. @keyframes wave {
  4713. 0%,
  4714. 100% {
  4715. height: 6px;
  4716. }
  4717. 50% {
  4718. height: 18px;
  4719. }
  4720. }
  4721. .audio-btn {
  4722. background: transparent;
  4723. border: none;
  4724. padding: 4px 8px;
  4725. cursor: pointer;
  4726. display: flex;
  4727. align-items: center;
  4728. justify-content: center;
  4729. border-radius: 4px;
  4730. transition: background-color 0.2s;
  4731. min-width: 32px;
  4732. height: 32px;
  4733. }
  4734. .audio-btn:hover {
  4735. background: rgba(0, 0, 0, 0.04);
  4736. }
  4737. .audio-icon {
  4738. width: 20px;
  4739. height: 20px;
  4740. }
  4741. .message-text {
  4742. margin: 0;
  4743. white-space: normal; /* 确保文本会换行 */
  4744. word-wrap: break-word; /* 长单词或 URL 会被断开以适应容器宽度 */
  4745. overflow: auto;
  4746. font-size: 12px;
  4747. line-height: 20px;
  4748. }
  4749. .message-text ::v-deep p {
  4750. font-size: 12px !important;
  4751. margin: 5px 0 10px;
  4752. padding: 0;
  4753. font-size: inherit;
  4754. line-height: 22px;
  4755. font-weight: inherit;
  4756. }
  4757. .message-text ::v-deep ol {
  4758. padding-bottom: 10px;
  4759. }
  4760. .message-text ::v-deep .source-section h3 {
  4761. margin: 20px 0 3px;
  4762. color: #333;
  4763. font-size: 16px;
  4764. }
  4765. .message-text ::v-deep ol li {
  4766. padding-top: 3px;
  4767. }
  4768. .message-text ::v-deep ol li a {
  4769. font-size: 14px;
  4770. color: #1296db;
  4771. }
  4772. .message-text ::v-deep table {
  4773. border-collapse: collapse;
  4774. }
  4775. .message-text ::v-deep table th,
  4776. .message-text ::v-deep table td {
  4777. border: 1px solid #ddd;
  4778. padding: 8px;
  4779. }
  4780. .message-text ::v-deep table th {
  4781. background-color: #f2f2f2;
  4782. }
  4783. .message-text ::v-deep table td {
  4784. background-color: #fff;
  4785. }
  4786. .message-text ::v-deep table tr:nth-child(even) {
  4787. background-color: #f2f2f2;
  4788. }
  4789. .video-preview {
  4790. position: relative;
  4791. width: 300px;
  4792. border-radius: 8px;
  4793. overflow: hidden;
  4794. background: #fff;
  4795. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  4796. margin-bottom: 8px;
  4797. }
  4798. .preview-video {
  4799. width: 100%;
  4800. height: auto;
  4801. display: block;
  4802. max-height: 300px;
  4803. }
  4804. /* 添加 loading 相关样式 */
  4805. .upload-loading {
  4806. display: flex;
  4807. flex-direction: column;
  4808. align-items: center;
  4809. gap: 12px;
  4810. }
  4811. .loading-spinner {
  4812. width: 24px;
  4813. height: 24px;
  4814. border: 2px solid #f3f3f3;
  4815. border-top: 2px solid #1677ff;
  4816. border-radius: 50%;
  4817. animation: spin 1s linear infinite;
  4818. }
  4819. .file-loading {
  4820. position: absolute;
  4821. top: 0;
  4822. left: 0;
  4823. right: 0;
  4824. bottom: 0;
  4825. background: rgba(255, 255, 255, 0.8);
  4826. display: flex;
  4827. align-items: center;
  4828. justify-content: center;
  4829. z-index: 1;
  4830. }
  4831. @keyframes spin {
  4832. 0% {
  4833. transform: rotate(0deg);
  4834. }
  4835. 100% {
  4836. transform: rotate(360deg);
  4837. }
  4838. }
  4839. /* 上传区域在上传时的样式 */
  4840. .upload-area {
  4841. position: relative;
  4842. cursor: pointer; /* 始终保持指针样式 */
  4843. }
  4844. .upload-area.uploading {
  4845. opacity: 0.7;
  4846. }
  4847. /* 添加配置容器的样式 */
  4848. .config-container {
  4849. margin-top: 50px;
  4850. border-top: 1px solid rgba(0, 0, 0, 0.06);
  4851. }
  4852. .config-header {
  4853. padding: 12px 20px;
  4854. display: flex;
  4855. align-items: center;
  4856. gap: 8px;
  4857. cursor: pointer;
  4858. transition: background-color 0.2s;
  4859. }
  4860. .config-header:hover {
  4861. background: rgba(0, 0, 0, 0.02);
  4862. }
  4863. .config-icon {
  4864. width: 16px;
  4865. height: 16px;
  4866. }
  4867. .toggle-icon {
  4868. width: 12px;
  4869. height: 12px;
  4870. margin-left: auto;
  4871. }
  4872. .web-search-toggle {
  4873. display: flex;
  4874. align-items: center;
  4875. /* margin-left: auto; */
  4876. padding: 0 12px;
  4877. }
  4878. .toggle-input {
  4879. position: relative;
  4880. width: 36px;
  4881. height: 20px;
  4882. margin-right: 8px;
  4883. appearance: none;
  4884. background: #ccc;
  4885. border-radius: 10px;
  4886. cursor: pointer;
  4887. transition: background 0.3s;
  4888. }
  4889. .toggle-input:checked {
  4890. background: #1677ff;
  4891. }
  4892. .toggle-input::before {
  4893. content: "";
  4894. position: absolute;
  4895. top: 2px;
  4896. left: 2px;
  4897. width: 16px;
  4898. height: 16px;
  4899. background: white;
  4900. border-radius: 50%;
  4901. transition: transform 0.3s;
  4902. }
  4903. .toggle-input:checked::before {
  4904. transform: translateX(16px);
  4905. }
  4906. .toggle-label {
  4907. font-size: 14px;
  4908. color: var(--primary-text);
  4909. cursor: pointer;
  4910. }
  4911. .toggle-input:disabled {
  4912. opacity: 0.5;
  4913. cursor: not-allowed;
  4914. }
  4915. .toggle-label.disabled {
  4916. color: var(--primary-text);
  4917. cursor: not-allowed;
  4918. }
  4919. .disabled-hint {
  4920. font-size: 12px;
  4921. color: var(--primary-text);
  4922. margin-left: 4px;
  4923. }
  4924. /* 添加菜单收缩相关样式 */
  4925. .menu {
  4926. /* 现有样式保持不变 */
  4927. transition: width 0.3s ease;
  4928. position: relative;
  4929. }
  4930. .menu.collapsed {
  4931. width: 0;
  4932. padding: 0;
  4933. }
  4934. /* 添加收缩按钮样式 */
  4935. .collapse-button {
  4936. position: absolute;
  4937. top: 50%;
  4938. transform: translateY(-50%);
  4939. width: 20px;
  4940. height: 40px;
  4941. background: var(--secondary-bg);
  4942. border: 1px solid var(--border-color);
  4943. display: flex;
  4944. align-items: center;
  4945. justify-content: center;
  4946. cursor: pointer;
  4947. z-index: 3;
  4948. transition: right 0.3s ease, left 0.3s ease;
  4949. }
  4950. .collapse-button:hover {
  4951. background: var(--secondary-bg);
  4952. }
  4953. .collapse-icon {
  4954. width: 12px;
  4955. height: 12px;
  4956. }
  4957. /* 添加响应式布局样式 */
  4958. @media screen and (max-width: 768px) {
  4959. .layout {
  4960. /* 移动端布局调整 */
  4961. flex-direction: column;
  4962. }
  4963. .menu {
  4964. /* 移动端菜单调整 */
  4965. position: fixed;
  4966. width: 100%;
  4967. height: 93%;
  4968. z-index: 1000;
  4969. transform: translateX(-100%);
  4970. }
  4971. .menu.collapsed {
  4972. transform: translateX(-100%);
  4973. }
  4974. .collapse-left-button {
  4975. z-index: 999;
  4976. /* 移动端收缩按钮调整 */
  4977. /* display: none; */
  4978. }
  4979. .chat {
  4980. /* 移动端聊天区域调整 */
  4981. width: 100%;
  4982. margin: 0;
  4983. padding: 16px;
  4984. left: 0 !important;
  4985. right: 0 !important;
  4986. }
  4987. .message-list {
  4988. /* 移动端消息列表调整 */
  4989. width: 100%;
  4990. padding: 10px;
  4991. }
  4992. .input-container {
  4993. /* 移动端输入区域调整 */
  4994. width: 98%;
  4995. padding: 10px;
  4996. }
  4997. .cards-container {
  4998. /* 移动端卡片容器调整 */
  4999. flex-direction: column;
  5000. }
  5001. .suggestion-card {
  5002. /* 移动端建议卡片调整 */
  5003. width: 100%;
  5004. }
  5005. .welcome-section {
  5006. /* 移动端欢迎区域调整 */
  5007. width: 100%;
  5008. padding: 0;
  5009. }
  5010. .right_menu {
  5011. /* 移动端右侧菜单调整 */
  5012. position: fixed;
  5013. width: 100%;
  5014. height: 100%;
  5015. z-index: 998;
  5016. }
  5017. .right_menu.collapsed {
  5018. transform: translateX(100%);
  5019. }
  5020. /* 移动端文件预览调整 */
  5021. .image-preview,
  5022. .video-preview {
  5023. width: 100%;
  5024. max-width: 300px;
  5025. }
  5026. /* 移动端文件列表调整 */
  5027. .file-list {
  5028. justify-content: center;
  5029. }
  5030. .file-item {
  5031. width: 100%;
  5032. max-width: 300px;
  5033. }
  5034. /* 移动端标签栏调整 */
  5035. .tabs-wrapper {
  5036. flex-wrap: wrap;
  5037. gap: 4px;
  5038. }
  5039. .web-search-toggle {
  5040. width: 100%;
  5041. justify-content: flex-start;
  5042. margin-top: 8px;
  5043. }
  5044. /* 移动端消息气泡调整 */
  5045. .message-bubble {
  5046. max-width: 90%;
  5047. }
  5048. .collapse-button {
  5049. left: -20px !important;
  5050. }
  5051. .collapse-button.menu-expanded {
  5052. left: auto !important;
  5053. right: 0;
  5054. }
  5055. }
  5056. /* 添加移动端手势支持 */
  5057. @media (hover: none) and (pointer: coarse) {
  5058. .menu {
  5059. /* 支持触摸滑动 */
  5060. touch-action: pan-y;
  5061. }
  5062. .message-list {
  5063. /* 支持触摸滚动 */
  5064. -webkit-overflow-scrolling: touch;
  5065. }
  5066. }
  5067. /* 优化移动端字体大小 */
  5068. @media screen and (max-width: 480px) {
  5069. .message-content {
  5070. font-size: 14px;
  5071. }
  5072. .suggestion-item {
  5073. font-size: 13px;
  5074. }
  5075. .file-name {
  5076. font-size: 13px;
  5077. }
  5078. }
  5079. /* 修改现有的响应式样式 */
  5080. @media screen and (max-width: 768px) {
  5081. .layout {
  5082. overflow-x: hidden;
  5083. }
  5084. .chat {
  5085. /* 调整聊天区域以保持一致的宽度 */
  5086. padding: 16px 0 ;
  5087. margin: 0;
  5088. width: 100%;
  5089. }
  5090. .message-list {
  5091. /* 保持消息列表的宽度一致 */
  5092. width: 100%;
  5093. max-width: 800px;
  5094. margin: 60px auto 0;
  5095. padding: 0 10px;
  5096. }
  5097. .input-container {
  5098. /* 保持输入区域的宽度一致 */
  5099. width: 95%;
  5100. max-width: 800px;
  5101. margin: 0 auto;
  5102. padding: 0;
  5103. }
  5104. .welcome-section {
  5105. /* 保持欢迎区域的宽度一致 */
  5106. width: 100%;
  5107. max-width: 800px;
  5108. margin: 0 auto;
  5109. /* padding: 0 16px; */
  5110. }
  5111. .cards-container {
  5112. /* 保持卡片布局 */
  5113. flex-direction: row;
  5114. flex-wrap: wrap;
  5115. gap: 16px;
  5116. }
  5117. .suggestion-card {
  5118. /* 调整卡片大小 */
  5119. flex: 1 1 300px;
  5120. min-width: 300px;
  5121. }
  5122. .message-bubble {
  5123. /* 保持消息气泡的样式 */
  5124. max-width: 80%;
  5125. padding: 12px 16px;
  5126. }
  5127. /* 调整文件预览区域 */
  5128. .image-preview,
  5129. .video-preview {
  5130. width: 200px;
  5131. margin: 0 auto;
  5132. }
  5133. /* 调整文件列表布局 */
  5134. .file-list {
  5135. display: flex;
  5136. flex-wrap: wrap;
  5137. gap: 8px;
  5138. justify-content: flex-start;
  5139. }
  5140. .file-item {
  5141. width: calc(50% - 8px);
  5142. min-width: 200px;
  5143. }
  5144. /* 调整标签栏布局 */
  5145. .tabs-wrapper {
  5146. flex-wrap: nowrap;
  5147. overflow-x: auto;
  5148. -webkit-overflow-scrolling: touch;
  5149. padding-bottom: 8px;
  5150. }
  5151. /* 调整搜索开关位置 */
  5152. .web-search-toggle {
  5153. position: relative;
  5154. width: auto;
  5155. }
  5156. /* 调整菜单样式 */
  5157. .menu {
  5158. position: fixed;
  5159. left: 0;
  5160. top: 0;
  5161. bottom: 0;
  5162. width: 260px;
  5163. transform: translateX(-100%);
  5164. transition: transform 0.3s ease;
  5165. z-index: 1000;
  5166. }
  5167. .menu.collapsed {
  5168. transform: translateX(-100%);
  5169. }
  5170. .menu:not(.collapsed) {
  5171. transform: translateX(0);
  5172. }
  5173. /* 调整右侧菜单样式 */
  5174. /* .right_menu {
  5175. position: fixed;
  5176. right: 0;
  5177. top: 0;
  5178. bottom: 0;
  5179. width: 300px;
  5180. transform: translateX(100%);
  5181. transition: transform 0.3s ease;
  5182. z-index: 998;
  5183. } */
  5184. .right_menu.collapsed {
  5185. transform: translateX(100%);
  5186. }
  5187. .right_menu:not(.collapsed) {
  5188. transform: translateX(0);
  5189. }
  5190. /* 添加遮罩层样式 */
  5191. .menu-overlay {
  5192. position: fixed;
  5193. top: 0;
  5194. left: 0;
  5195. right: 0;
  5196. bottom: 0;
  5197. background: rgba(0, 0, 0, 0.5);
  5198. z-index: 999;
  5199. display: none;
  5200. }
  5201. .menu:not(.collapsed) ~ .menu-overlay,
  5202. .right_menu:not(.collapsed) ~ .menu-overlay {
  5203. display: block;
  5204. }
  5205. }
  5206. /* 添加更细致的断点控制 */
  5207. @media screen and (max-width: 480px) {
  5208. .message-content {
  5209. font-size: 14px;
  5210. line-height: 1.5;
  5211. }
  5212. .suggestion-item {
  5213. font-size: 14px;
  5214. padding: 10px;
  5215. }
  5216. .input-wrapper {
  5217. padding:5px;
  5218. }
  5219. .message-input {
  5220. font-size: 14px;
  5221. }
  5222. }
  5223. /* 确保滚动流畅 */
  5224. * {
  5225. -webkit-overflow-scrolling: touch;
  5226. }
  5227. /* 防止页面横向滚动 */
  5228. body {
  5229. overflow-x: hidden;
  5230. width: 100%;
  5231. }
  5232. /* 优化触摸体验 */
  5233. button,
  5234. .suggestion-item,
  5235. .conversation-item {
  5236. touch-action: manipulation;
  5237. }
  5238. /* 添加拖动条样式 */
  5239. .resize-handle {
  5240. position: absolute;
  5241. left: -5px;
  5242. top: 0;
  5243. width: 10px;
  5244. height: 100%;
  5245. cursor: col-resize;
  5246. background: transparent;
  5247. z-index: 3;
  5248. }
  5249. .resize-handle:hover {
  5250. background: rgba(0, 0, 0, 0.1);
  5251. }
  5252. /* 确保拖动时不会选中文本 */
  5253. .resize-handle:active {
  5254. user-select: none;
  5255. }
  5256. /* 移动端样式调整 */
  5257. @media screen and (max-width: 768px) {
  5258. .resize-handle {
  5259. display: none;
  5260. }
  5261. .right_menu {
  5262. width: 100% !important;
  5263. }
  5264. }
  5265. .search-header {
  5266. display: flex;
  5267. justify-content: space-between;
  5268. align-items: center;
  5269. padding: 16px;
  5270. border-bottom: 1px solid var(--border-color);
  5271. }
  5272. .search-header span {
  5273. font-size: 16px;
  5274. font-weight: bold;
  5275. }
  5276. /* 添加开关样式 */
  5277. .web-search-toggle {
  5278. display: flex;
  5279. align-items: center;
  5280. color: var(--primary-text);
  5281. }
  5282. .toggle-input {
  5283. position: relative;
  5284. width: 36px;
  5285. height: 20px;
  5286. margin-right: 8px;
  5287. appearance: none;
  5288. background: #ccc;
  5289. border-radius: 10px;
  5290. cursor: pointer;
  5291. transition: background 0.3s;
  5292. }
  5293. .toggle-input:checked {
  5294. background: #1677ff;
  5295. }
  5296. .toggle-input::before {
  5297. content: "";
  5298. position: absolute;
  5299. top: 2px;
  5300. left: 2px;
  5301. width: 16px;
  5302. height: 16px;
  5303. background: white;
  5304. border-radius: 50%;
  5305. transition: transform 0.3s;
  5306. }
  5307. .toggle-input:checked::before {
  5308. transform: translateX(16px);
  5309. }
  5310. .toggle-label {
  5311. font-size: 14px;
  5312. color: rgba(0, 0, 0, 0.88);
  5313. cursor: pointer;
  5314. }
  5315. /* 添加 Tab 样式 */
  5316. .right-menu-tabs {
  5317. display: flex;
  5318. border-bottom: 1px solid #f0f0f0;
  5319. background: var(--secondary-bg);
  5320. }
  5321. .tab-item {
  5322. flex: 1;
  5323. padding: 12px;
  5324. display: flex;
  5325. align-items: center;
  5326. justify-content: center;
  5327. gap: 8px;
  5328. cursor: pointer;
  5329. transition: all 0.3s;
  5330. border-bottom: 2px solid transparent;
  5331. color: rgba(0, 0, 0, 0.65);
  5332. }
  5333. .tab-item:hover {
  5334. color: #1677ff;
  5335. }
  5336. .tab-item.active {
  5337. color: #1677ff;
  5338. border-bottom-color: #1677ff;
  5339. background: #f6f9fe;
  5340. }
  5341. .panel-container {
  5342. height: calc(100% - 45px); /* 减去 tab 的高度 */
  5343. overflow-y: auto;
  5344. }
  5345. /* 修改右侧菜单内容样式 */
  5346. .right-menu-content {
  5347. height: 100%;
  5348. display: flex;
  5349. flex-direction: column;
  5350. }
  5351. /* 预览面板样式 */
  5352. .preview-header {
  5353. padding: 16px;
  5354. border-bottom: 1px solid var(--border-color);
  5355. color: var(--primary-text);
  5356. font-size: 16px;
  5357. font-weight: bold;
  5358. }
  5359. .search-toggles {
  5360. display: flex;
  5361. gap: 12px;
  5362. padding: 8px 12px;
  5363. /* background: var(--secondary-bg); */
  5364. border-radius: 8px;
  5365. transition: all 0.3s ease;
  5366. justify-content: space-between;
  5367. &.compact {
  5368. .search-toggle-item {
  5369. padding: 6px;
  5370. min-width: auto;
  5371. width: auto;
  5372. }
  5373. .toggle-content {
  5374. gap: 4px;
  5375. justify-content: center;
  5376. }
  5377. .toggle-text {
  5378. /* display: none; */
  5379. }
  5380. .toggle-switch {
  5381. margin-left: 8px;
  5382. }
  5383. }
  5384. }
  5385. .search-toggle-item {
  5386. position: relative;
  5387. display: flex;
  5388. align-items: center;
  5389. color: var(--primary-text);
  5390. border-radius: 6px;
  5391. padding: 6px;
  5392. transition: all 0.3s;
  5393. /* width: 140px; */
  5394. @media screen and (max-width: 768px) {
  5395. width: auto;
  5396. padding: 6px 8px;
  5397. }
  5398. &:hover {
  5399. background: rgba(0, 0, 0, 0.02);
  5400. }
  5401. }
  5402. .toggle-content {
  5403. display: flex;
  5404. align-items: center;
  5405. gap: 8px;
  5406. color: rgba(0, 0, 0, 0.65);
  5407. transition: all 0.3s;
  5408. width: 100%;
  5409. .anticon {
  5410. font-size: 16px;
  5411. flex-shrink: 0;
  5412. }
  5413. .toggle-text {
  5414. font-size: 14px;
  5415. transition: all 0.3s;
  5416. white-space: nowrap;
  5417. color: var(--primary-text);
  5418. }
  5419. }
  5420. .toggle-switch {
  5421. position: relative;
  5422. display: flex;
  5423. align-items: center;
  5424. }
  5425. .toggle-input {
  5426. position: absolute;
  5427. opacity: 0;
  5428. width: 0;
  5429. height: 0;
  5430. &:checked + .toggle-label {
  5431. .toggle-slider {
  5432. background: #1677ff;
  5433. &:before {
  5434. transform: translateX(16px);
  5435. }
  5436. }
  5437. }
  5438. &:disabled + .toggle-label {
  5439. cursor: not-allowed;
  5440. .toggle-slider {
  5441. background: #d9d9d9;
  5442. &:before {
  5443. background: #f5f5f5;
  5444. }
  5445. }
  5446. }
  5447. }
  5448. .toggle-label {
  5449. display: flex;
  5450. align-items: center;
  5451. cursor: pointer;
  5452. .toggle-slider {
  5453. position: relative;
  5454. width: 36px;
  5455. height: 20px;
  5456. background: #d9d9d9;
  5457. border-radius: 10px;
  5458. transition: all 0.3s;
  5459. &:before {
  5460. content: '';
  5461. position: absolute;
  5462. top: 2px;
  5463. left: 2px;
  5464. width: 16px;
  5465. height: 16px;
  5466. background: white;
  5467. border-radius: 50%;
  5468. transition: transform 0.3s;
  5469. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  5470. }
  5471. }
  5472. &.disabled {
  5473. cursor: not-allowed;
  5474. }
  5475. }
  5476. /* 移动端适配 */
  5477. @media screen and (max-width: 480px) {
  5478. .search-toggles {
  5479. padding: 6px;
  5480. gap: 6px;
  5481. }
  5482. .search-toggle-item {
  5483. padding: 6px;
  5484. }
  5485. .toggle-content {
  5486. gap: 4px;
  5487. }
  5488. }
  5489. @media screen and (max-width: 768px) {
  5490. .search-toggles {
  5491. &:not(.compact) {
  5492. .search-toggle-item {
  5493. padding: 6px 8px;
  5494. }
  5495. .toggle-content {
  5496. gap: 4px;
  5497. }
  5498. .toggle-text {
  5499. font-size: 12px;
  5500. }
  5501. }
  5502. }
  5503. }
  5504. @media screen and (max-width: 480px) {
  5505. .search-toggles {
  5506. padding: 0px;
  5507. gap: 6px;
  5508. &:not(.compact) {
  5509. .toggle-text {
  5510. /* display: none; */
  5511. }
  5512. .search-toggle-item {
  5513. padding: 6px;
  5514. }
  5515. }
  5516. }
  5517. }
  5518. /* 深色模式支持 */
  5519. @media (prefers-color-scheme: dark) {
  5520. .search-toggle-item {
  5521. background: rgba(255, 255, 255, 0.04);
  5522. &:hover {
  5523. background: rgba(255, 255, 255, 0.08);
  5524. }
  5525. }
  5526. .toggle-content {
  5527. color: rgba(255, 255, 255, 0.65);
  5528. }
  5529. .toggle-label {
  5530. .toggle-slider {
  5531. background: #424242;
  5532. &:before {
  5533. background: #8c8c8c;
  5534. }
  5535. }
  5536. }
  5537. .toggle-input:checked + .toggle-label {
  5538. .toggle-slider {
  5539. background: #1677ff;
  5540. &:before {
  5541. background: white;
  5542. }
  5543. }
  5544. }
  5545. .toggle-input:disabled + .toggle-label {
  5546. .toggle-slider {
  5547. background: #1f1f1f;
  5548. &:before {
  5549. background: #434343;
  5550. }
  5551. }
  5552. }
  5553. }
  5554. /* 修改右侧菜单面板样式 */
  5555. .right_menu {
  5556. position: fixed;
  5557. right: 0;
  5558. top: 0;
  5559. bottom: 0;
  5560. width: 450px;
  5561. background: #fff;
  5562. border-left: 1px solid rgba(0, 0, 0, 0.06);
  5563. display: flex;
  5564. flex-direction: column;
  5565. transition: transform 0.3s ease;
  5566. z-index: 998;
  5567. }
  5568. .right_menu.collapsed {
  5569. transform: translateX(100%);
  5570. }
  5571. .right-menu-content {
  5572. height: 100%;
  5573. display: flex;
  5574. flex-direction: column;
  5575. overflow: hidden;
  5576. }
  5577. /* Tab 样式调整 */
  5578. .right-menu-tabs {
  5579. display: flex;
  5580. background: var(--secondary-bg);
  5581. color: var(--primary-text);
  5582. border-bottom: 1px solid #f0f0f0;
  5583. padding: 0;
  5584. height: 46px;
  5585. flex-shrink: 0;
  5586. }
  5587. .tab-item {
  5588. flex: 1;
  5589. display: flex;
  5590. align-items: center;
  5591. justify-content: center;
  5592. gap: 8px;
  5593. padding: 12px;
  5594. color: var(--primary-text);
  5595. cursor: pointer;
  5596. transition: all 0.3s;
  5597. border-bottom: 2px solid transparent;
  5598. font-size: 14px;
  5599. }
  5600. .tab-item.active {
  5601. color: #1677ff;
  5602. border-bottom-color: #1677ff;
  5603. background: rgba(22, 119, 255, 0.04);
  5604. }
  5605. .tab-item:hover {
  5606. color: #1677ff;
  5607. }
  5608. /* 面板容器样式 */
  5609. .panel-container {
  5610. flex: 1;
  5611. overflow-y: auto;
  5612. background: var(--secondary-bg);
  5613. display: flex;
  5614. flex-direction: column;
  5615. }
  5616. /* 搜索头部样式 */
  5617. .search-header {
  5618. padding: 16px;
  5619. border-bottom: 1px solid var(--border-color);
  5620. display: flex;
  5621. justify-content: space-between;
  5622. align-items: center;
  5623. background: var(--secondary-bg);
  5624. flex-shrink: 0;
  5625. }
  5626. .search-header span {
  5627. font-size: 16px;
  5628. font-weight: 500;
  5629. color: var(--primary-text);
  5630. }
  5631. /* 知识库结果面板样式 */
  5632. .knowledge-results {
  5633. flex: 1;
  5634. padding: 16px 5px;
  5635. overflow-y: auto;
  5636. }
  5637. /* 调整聊天区域的右边距 */
  5638. .chat {
  5639. transition: right 0.3s ease;
  5640. }
  5641. .right_menu:not(.collapsed) ~ .chat {
  5642. right: 450px;
  5643. }
  5644. /* 移动端适配 */
  5645. @media screen and (max-width: 768px) {
  5646. .right_menu {
  5647. width: 93%;
  5648. }
  5649. .right_menu:not(.collapsed) ~ .chat {
  5650. right: 100%;
  5651. }
  5652. .tab-item {
  5653. padding: 8px;
  5654. }
  5655. .tab-item .anticon {
  5656. font-size: 16px;
  5657. }
  5658. .tab-item span {
  5659. font-size: 12px;
  5660. }
  5661. .search-header {
  5662. padding: 12px;
  5663. }
  5664. .search-header span {
  5665. font-size: 14px;
  5666. }
  5667. }
  5668. /* 优化滚动条样式 */
  5669. .panel-container::-webkit-scrollbar {
  5670. width: 4px;
  5671. }
  5672. .panel-container::-webkit-scrollbar-thumb {
  5673. background: rgba(0, 0, 0, 0.1);
  5674. border-radius: 2px;
  5675. }
  5676. .panel-container::-webkit-scrollbar-track {
  5677. background: transparent;
  5678. }
  5679. /* 添加阴影效果 */
  5680. .right_menu {
  5681. box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
  5682. }
  5683. /* 优化过渡动画 */
  5684. .right_menu,
  5685. .chat,
  5686. .tab-item,
  5687. .panel-container {
  5688. transition: all 0.3s ease;
  5689. }
  5690. /* 确保内容不会溢出 */
  5691. .right-menu-content {
  5692. max-height: 100%;
  5693. background-color: var(--secondary-bg) !important;
  5694. }
  5695. .panel-container {
  5696. max-height: calc(100% - 46px); /* 减去 tab 的高度 */
  5697. }
  5698. /* 菜单展开时的按钮样式 */
  5699. .collapse-button.menu-expanded {
  5700. left: -20px;
  5701. border-right: none;
  5702. border-radius: 4px 0 0 4px;
  5703. }
  5704. /* 菜单收起时的按钮样式 */
  5705. .collapse-button.menu-collapsed {
  5706. left: -20px;
  5707. border-left: none;
  5708. border-radius: 0 4px 4px 0;
  5709. }
  5710. /* 确保右侧菜单收起时按钮仍然可见 */
  5711. .right_menu.collapsed .collapse-button {
  5712. right: auto;
  5713. left: -20px;
  5714. }
  5715. /* 添加模型选择框样式 */
  5716. .model-select {
  5717. background: transparent;
  5718. border: 1px solid #d9d9d9;
  5719. border-radius: 4px;
  5720. padding: 4px 8px;
  5721. font-size: 14px;
  5722. color: var(--primary-text);
  5723. cursor: pointer;
  5724. transition: all 0.3s;
  5725. outline: none;
  5726. margin-left: auto;
  5727. width:100%;
  5728. &:hover {
  5729. border-color: #1677ff;
  5730. }
  5731. &:focus {
  5732. border-color: #1677ff;
  5733. box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
  5734. }
  5735. &:disabled {
  5736. background: #f5f5f5;
  5737. cursor: not-allowed;
  5738. color: rgba(0, 0, 0, 0.25);
  5739. }
  5740. option {
  5741. background: white;
  5742. color: rgba(0, 0, 0, 0.88);
  5743. }
  5744. }
  5745. @media screen and (max-width: 768px) {
  5746. .model-select {
  5747. /* width: 80px; */
  5748. font-size: 12px;
  5749. padding: 2px 4px;
  5750. }
  5751. }
  5752. /* 全局主题变量 */
  5753. :root {
  5754. /* 浅色主题变量 */
  5755. --primary-bg: #f7fafc;
  5756. --secondary-bg: #ffffff;
  5757. --primary-text: #333333;
  5758. --secondary-text: #666666;
  5759. --border-color: #e0e0e0;
  5760. --hover-bg: #f0f0f0;
  5761. --card-bg: #ffffff;
  5762. --shadow-color: rgba(0, 0, 0, 0.1);
  5763. --highlight-color: #1890ff;
  5764. --accent-bg: #e6f7ff;
  5765. --accent-text: #1890ff;
  5766. /* 动画时间 */
  5767. --theme-transition: 0.3s ease;
  5768. }
  5769. /* 深色主题变量 */
  5770. :root.dark-theme {
  5771. --primary-bg: #1a1a1a;
  5772. --secondary-bg: #2d2d2d;
  5773. --primary-text: #ffffff;
  5774. --secondary-text: #b3b3b3;
  5775. --border-color: #404040;
  5776. --hover-bg: #363636;
  5777. --card-bg: #2d2d2d;
  5778. --shadow-color: rgba(0, 0, 0, 0.3);
  5779. --highlight-color: #40a9ff;
  5780. --accent-bg: #1f1f1f;
  5781. --accent-text: #40a9ff;
  5782. }
  5783. /* 主题过渡动画 */
  5784. .layout * {
  5785. transition: background-color var(--theme-transition),
  5786. color var(--theme-transition),
  5787. border-color var(--theme-transition),
  5788. box-shadow var(--theme-transition);
  5789. }
  5790. /* 主题切换按钮样式 */
  5791. .theme-switch {
  5792. display: flex;
  5793. align-items: center;
  5794. justify-content: center;
  5795. width: 28px;
  5796. height: 28px;
  5797. margin-right: 8px;
  5798. padding: 6px;
  5799. border-radius: 50%;
  5800. cursor: pointer;
  5801. transition: all var(--theme-transition);
  5802. }
  5803. .panel-header {
  5804. width: 100%;
  5805. padding: 10px;
  5806. border-bottom: 1px solid var(--border-color);
  5807. height: 30px;
  5808. /* display: flex;
  5809. align-items: center;
  5810. justify-content: space-between; */
  5811. background: var(--bg-primary);
  5812. }
  5813. .panel-header h3 {
  5814. font-size: 16px;
  5815. font-weight: 600;
  5816. color: var(--text-primary);
  5817. margin: 0;
  5818. }
  5819. .theme-switch:hover {
  5820. background-color: var(--hover-bg);
  5821. }
  5822. .theme-icon {
  5823. width: 18px;
  5824. height: 18px;
  5825. color: var(--primary-text);
  5826. transition: transform 0.2s ease;
  5827. }
  5828. .theme-switch:hover .theme-icon {
  5829. transform: scale(1.1);
  5830. }
  5831. /* 主题图标切换动画 */
  5832. .theme-icon-enter-active,
  5833. .theme-icon-leave-active {
  5834. transition: transform 0.3s ease, opacity 0.3s ease;
  5835. }
  5836. .theme-icon-enter-from,
  5837. .theme-icon-leave-to {
  5838. opacity: 0;
  5839. transform: scale(0.8) rotate(-45deg);
  5840. }
  5841. .theme-icon-enter-to,
  5842. .theme-icon-leave-from {
  5843. opacity: 1;
  5844. transform: scale(1) rotate(0);
  5845. }
  5846. /* 应用主题样式到现有组件 */
  5847. :deep(.layout) {
  5848. background-color: var(--primary-bg);
  5849. color: var(--primary-text);
  5850. }
  5851. :deep(.header) {
  5852. background-color: var(--secondary-bg);
  5853. /* border-bottom: 1px solid var(--border-color); */
  5854. box-shadow: var(--shadow-sm)
  5855. }
  5856. :deep(.menu) {
  5857. background-color: var(--secondary-bg);
  5858. border-right: 1px solid var(--border-color);
  5859. }
  5860. :deep(.user-info-bar) {
  5861. /* background-color: var(--secondary-bg); */
  5862. color: var(--primary-text);
  5863. }
  5864. :deep(.dropdown-menu) {
  5865. background-color: var(--card-bg);
  5866. border: 1px solid var(--border-color);
  5867. box-shadow: 0 2px 8px var(--shadow-color);
  5868. }
  5869. :deep(.dropdown-item) {
  5870. color: var(--primary-text);
  5871. }
  5872. :deep(.dropdown-item:hover) {
  5873. background-color: var(--hover-bg);
  5874. }
  5875. :deep(.suggestion-card) {
  5876. background-color: var(--card-bg);
  5877. border: 1px solid var(--border-color);
  5878. }
  5879. :deep(.suggestion-item) {
  5880. color: var(--primary-text);
  5881. }
  5882. :deep(.suggestion-item:hover) {
  5883. background-color: var(--hover-bg);
  5884. }
  5885. :deep(.message-bubble) {
  5886. background-color: var(--card-bg);
  5887. border: 1px solid var(--border-color);
  5888. }
  5889. /* 确保主题样式应用到聊天消息 */
  5890. :deep(.message-item.user .message-bubble) {
  5891. /* background-color: var(--highlight-color); */
  5892. color: var(--primary-text);
  5893. }
  5894. :deep(.message-item.assistant .message-bubble) {
  5895. background-color: var(--card-bg);
  5896. color: var(--primary-text);
  5897. }
  5898. /* 搜索区域样式 */
  5899. :deep(.search-section) {
  5900. background-color: var(--card-bg);
  5901. border: 1px solid var(--border-color);
  5902. padding: 20px;
  5903. border-radius: 8px;
  5904. }
  5905. :deep(.search-input) {
  5906. background-color: var(--primary-bg);
  5907. border: 1px solid var(--border-color);
  5908. color: var(--primary-text);
  5909. }
  5910. :deep(.search-input:hover),
  5911. :deep(.search-input:focus) {
  5912. border-color: var(--highlight-color);
  5913. box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  5914. }
  5915. /* 提示问题区域样式 */
  5916. :deep(.suggestion-section) {
  5917. background-color: var(--card-bg);
  5918. border-radius: 8px;
  5919. padding: 20px;
  5920. margin-top: 35px;
  5921. }
  5922. :deep(.suggestion-section h3) {
  5923. color: var(--primary-text);
  5924. margin-bottom: 16px;
  5925. }
  5926. :deep(.cards-container) {
  5927. /* display: grid;
  5928. gap: 16px;
  5929. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
  5930. }
  5931. :deep(.suggestion-card) {
  5932. background-color: var(--secondary-bg);
  5933. border: 1px solid var(--border-color);
  5934. border-radius: 8px;
  5935. padding: 16px;
  5936. transition: all var(--theme-transition);
  5937. }
  5938. :deep(.suggestion-card:hover) {
  5939. border-color: var(--highlight-color);
  5940. box-shadow: 0 2px 8px var(--shadow-color);
  5941. }
  5942. :deep(.card-header) {
  5943. display: flex;
  5944. align-items: center;
  5945. gap: 8px;
  5946. margin-bottom: 8px;
  5947. }
  5948. :deep(.card-header h4) {
  5949. color: var(--primary-text);
  5950. margin: 0;
  5951. }
  5952. :deep(.card-subtitle) {
  5953. color: var(--secondary-text);
  5954. margin-bottom: 12px;
  5955. }
  5956. :deep(.suggestion-items) {
  5957. display: flex;
  5958. flex-direction: column;
  5959. gap: 8px;
  5960. }
  5961. :deep(.suggestion-item) {
  5962. padding: 8px 12px;
  5963. border-radius: 4px;
  5964. background-color: var(--primary-bg);
  5965. color: var(--primary-text);
  5966. cursor: pointer;
  5967. transition: all var(--theme-transition);
  5968. }
  5969. :deep(.suggestion-item:hover) {
  5970. background-color: var(--hover-bg);
  5971. color: var(--highlight-color);
  5972. }
  5973. /* 保存问题区域样式 */
  5974. :deep(.save-question) {
  5975. background-color: var(--card-bg);
  5976. border: 1px solid var(--border-color);
  5977. border-radius: 8px;
  5978. padding: 20px;
  5979. margin-top: 20px;
  5980. }
  5981. :deep(.save-question-title) {
  5982. color: var(--primary-text);
  5983. margin-bottom: 16px;
  5984. font-weight: bold;
  5985. }
  5986. :deep(.save-question-input) {
  5987. width: 100%;
  5988. padding: 8px 12px;
  5989. border: 1px solid var(--border-color);
  5990. border-radius: 4px;
  5991. background-color: var(--primary-bg);
  5992. color: var(--primary-text);
  5993. margin-bottom: 8px;
  5994. }
  5995. :deep(.save-question-input:focus) {
  5996. border-color: var(--highlight-color);
  5997. outline: none;
  5998. box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  5999. }
  6000. /* 搜索结果区域样式 */
  6001. :deep(.search-results) {
  6002. background-color: var(--secondary-bg);
  6003. /* border: 1px solid var(--border-color); */
  6004. border-radius: 8px;
  6005. /* padding: 20px; */
  6006. /* margin-top: 20px; */
  6007. }
  6008. :deep(.search-results-title) {
  6009. color: var(--primary-text);
  6010. margin-bottom: 16px;
  6011. }
  6012. :deep(.no-results) {
  6013. color: var(--secondary-text);
  6014. text-align: center;
  6015. padding: 40px 0;
  6016. }
  6017. /* 输入框和按钮样式 */
  6018. :deep(.ant-input),
  6019. :deep(.ant-input-search-button) {
  6020. background-color: var(--primary-bg);
  6021. border-color: var(--border-color);
  6022. color: var(--primary-text);
  6023. }
  6024. :deep(.ant-input:hover),
  6025. :deep(.ant-input:focus) {
  6026. border-color: var(--highlight-color);
  6027. }
  6028. :deep(.ant-input-search-button) {
  6029. background-color: var(--highlight-color);
  6030. border-color: var(--highlight-color);
  6031. color: #ffffff;
  6032. }
  6033. :deep(.ant-input-search-button:hover) {
  6034. background-color: var(--highlight-color);
  6035. opacity: 0.9;
  6036. }
  6037. /* 标签页样式 */
  6038. :deep(.ant-tabs-tab) {
  6039. color: var(--secondary-text);
  6040. }
  6041. :deep(.ant-tabs-tab-active) {
  6042. color: var(--highlight-color) !important;
  6043. }
  6044. :deep(.ant-tabs-ink-bar) {
  6045. background-color: var(--highlight-color);
  6046. }
  6047. /* 图标样式适配 */
  6048. :deep(.tab-icon) {
  6049. filter: var(--icon-filter);
  6050. }
  6051. /* 其他已有的样式保持不变 */
  6052. </style>
  6053. <style>
  6054. /* 添加图标滤镜变量 */
  6055. :root {
  6056. --icon-filter: none;
  6057. }
  6058. :root.dark-theme {
  6059. --icon-filter: brightness(0) invert(1);
  6060. }
  6061. </style>
  6062. <style lang="less" scoped>
  6063. // ... existing code ...
  6064. /* 文档预览样式 */
  6065. .document-preview {
  6066. height: 100%;
  6067. overflow: hidden;
  6068. display: flex;
  6069. flex-direction: column;
  6070. }
  6071. .preview-container {
  6072. display: flex;
  6073. height: 100%;
  6074. gap: 16px;
  6075. }
  6076. .document-list {
  6077. width: 300px;
  6078. flex-shrink: 0;
  6079. overflow-y: auto;
  6080. padding: 16px;
  6081. border-right: 1px solid var(--border-color);
  6082. }
  6083. .empty-state {
  6084. display: flex;
  6085. flex-direction: column;
  6086. align-items: center;
  6087. justify-content: center;
  6088. padding: 48px 0;
  6089. color: var(--primary-text);
  6090. .empty-icon {
  6091. font-size: 48px;
  6092. margin-bottom: 16px;
  6093. }
  6094. p {
  6095. font-size: 14px;
  6096. margin: 0;
  6097. }
  6098. }
  6099. .document-item {
  6100. display: flex;
  6101. align-items: center;
  6102. justify-content: space-between;
  6103. padding: 12px;
  6104. border-radius: 8px;
  6105. margin-bottom: 8px;
  6106. background: var(--secondary-bg);
  6107. transition: all 0.3s;
  6108. cursor: pointer;
  6109. &:hover {
  6110. background: var(--hover-bg);
  6111. }
  6112. &.active {
  6113. background: var(--primary-bg);
  6114. border: 1px solid var(--primary-color);
  6115. }
  6116. }
  6117. .document-info {
  6118. display: flex;
  6119. align-items: center;
  6120. gap: 12px;
  6121. flex: 1;
  6122. }
  6123. .doc-icon {
  6124. width: 40px;
  6125. height: 40px;
  6126. display: flex;
  6127. align-items: center;
  6128. justify-content: center;
  6129. }
  6130. .preview-thumbnail {
  6131. width: 100%;
  6132. height: 100%;
  6133. object-fit: cover;
  6134. border-radius: 4px;
  6135. }
  6136. /* .file-icon {
  6137. width: 24px;
  6138. height: 24px;
  6139. } */
  6140. .info {
  6141. flex: 1;
  6142. min-width: 0;
  6143. .name {
  6144. font-size: 14px;
  6145. color: var(--primary-text);
  6146. margin-bottom: 4px;
  6147. white-space: nowrap;
  6148. overflow: hidden;
  6149. text-overflow: ellipsis;
  6150. }
  6151. .size {
  6152. font-size: 12px;
  6153. color: var(--secondary-text);
  6154. }
  6155. }
  6156. .actions {
  6157. display: flex;
  6158. gap: 8px;
  6159. }
  6160. .action-btn {
  6161. width: 32px;
  6162. height: 32px;
  6163. border: none;
  6164. background: transparent;
  6165. border-radius: 4px;
  6166. cursor: pointer;
  6167. display: flex;
  6168. align-items: center;
  6169. justify-content: center;
  6170. color: var(--primary-text);
  6171. transition: all 0.3s;
  6172. &:hover {
  6173. background: rgba(0, 0, 0, 0.04);
  6174. color: var(--primary-color);
  6175. }
  6176. }
  6177. .direct-preview {
  6178. flex: 1;
  6179. display: flex;
  6180. flex-direction: column;
  6181. overflow: hidden;
  6182. background: var(--secondary-bg);
  6183. border-radius: 8px;
  6184. }
  6185. .preview-header {
  6186. padding: 16px;
  6187. border-bottom: 1px solid var(--border-color);
  6188. display: flex;
  6189. justify-content: space-between;
  6190. align-items: center;
  6191. span {
  6192. font-size: 16px;
  6193. font-weight: 500;
  6194. color: var(--primary-text);
  6195. }
  6196. .close-btn {
  6197. border: none;
  6198. background: transparent;
  6199. cursor: pointer;
  6200. color: var(--primary-text);
  6201. display: flex;
  6202. align-items: center;
  6203. justify-content: center;
  6204. padding: 8px;
  6205. border-radius: 4px;
  6206. transition: all 0.3s;
  6207. &:hover {
  6208. background: rgba(0, 0, 0, 0.04);
  6209. color: var(--primary-color);
  6210. }
  6211. }
  6212. }
  6213. .preview-body {
  6214. flex: 1;
  6215. overflow: auto;
  6216. padding: 24px;
  6217. display: flex;
  6218. align-items: flex-start;
  6219. justify-content: center;
  6220. }
  6221. .preview-image {
  6222. max-width: 100%;
  6223. max-height: 70vh;
  6224. object-fit: contain;
  6225. }
  6226. .preview-video {
  6227. max-width: 100%;
  6228. max-height: 70vh;
  6229. }
  6230. .doc-preview {
  6231. width: 100%;
  6232. height: 100%;
  6233. min-height: 500px;
  6234. }
  6235. :deep(.docx-wrapper) {
  6236. width: 100%;
  6237. height: 100%;
  6238. .docx{
  6239. width: 100% !important;
  6240. }
  6241. }
  6242. :deep(.excel-wrapper) {
  6243. width: 100%;
  6244. height: 100%;
  6245. overflow: auto;
  6246. .excel-container {
  6247. min-width: 100%;
  6248. min-height: 100%;
  6249. }
  6250. .excel-toolbar {
  6251. position: sticky;
  6252. top: 0;
  6253. z-index: 1;
  6254. background: #fff;
  6255. padding: 8px;
  6256. border-bottom: 1px solid #e8e8e8;
  6257. }
  6258. table {
  6259. width: 100%;
  6260. border-collapse: collapse;
  6261. th, td {
  6262. padding: 8px;
  6263. border: 1px solid #e8e8e8;
  6264. white-space: nowrap;
  6265. overflow: hidden;
  6266. text-overflow: ellipsis;
  6267. }
  6268. }
  6269. }
  6270. .file-preview {
  6271. text-align: center;
  6272. color: var(--primary-text);
  6273. .large-icon {
  6274. font-size: 64px;
  6275. margin-bottom: 16px;
  6276. }
  6277. p {
  6278. margin: 0;
  6279. font-size: 14px;
  6280. }
  6281. }
  6282. // 响应式布局
  6283. @media screen and (max-width: 768px) {
  6284. .preview-container {
  6285. flex-direction: column;
  6286. }
  6287. .document-list {
  6288. width: 100%;
  6289. border-right: none;
  6290. border-bottom: 1px solid var(--border-color);
  6291. }
  6292. }
  6293. // ... existing code ...
  6294. </style>
  6295. <style>
  6296. /* 移动端适配样式 */
  6297. @media screen and (max-width: 768px) {
  6298. .suggestion-section{
  6299. padding: 20px 0 !important;
  6300. }
  6301. .layout {
  6302. flex-direction: column;
  6303. }
  6304. .header {
  6305. /* padding: 10px; */
  6306. }
  6307. .user-profile-bar {
  6308. flex-direction: row;
  6309. align-items: center;
  6310. justify-content: space-between;
  6311. width: 100%;
  6312. padding: 0 10px;
  6313. flex-wrap: nowrap;
  6314. }
  6315. .logo {
  6316. flex-shrink: 0;
  6317. max-width: 120px;
  6318. }
  6319. .user-info-bar {
  6320. display: flex;
  6321. align-items: center;
  6322. gap: 8px;
  6323. flex: 1;
  6324. justify-content: flex-end;
  6325. min-width: 0;
  6326. }
  6327. .theme-switch {
  6328. flex-shrink: 0;
  6329. }
  6330. .user-info {
  6331. display: flex;
  6332. flex-direction: column;
  6333. font-size: 12px;
  6334. min-width: 0;
  6335. flex: 1;
  6336. }
  6337. .user-name {
  6338. overflow: hidden;
  6339. text-overflow: ellipsis;
  6340. white-space: nowrap;
  6341. margin: 0;
  6342. line-height: 1.2;
  6343. }
  6344. .avatar {
  6345. flex-shrink: 0;
  6346. width: 32px;
  6347. height: 32px;
  6348. margin-left: 8px;
  6349. }
  6350. .suggestion-item{
  6351. width: 85%;
  6352. margin: 0 auto;
  6353. }
  6354. @media screen and (max-width: 480px) {
  6355. .user-info-bar {
  6356. gap: 4px;
  6357. }
  6358. .logo {
  6359. max-width: 150px;
  6360. }
  6361. .avatar {
  6362. width: 28px;
  6363. height: 28px;
  6364. margin-left: 4px;
  6365. }
  6366. }
  6367. .logo {
  6368. margin-bottom: 10px;
  6369. }
  6370. .logo-img {
  6371. width: 60px;
  6372. }
  6373. .user-info-bar {
  6374. width: 100%;
  6375. justify-content: space-between;
  6376. }
  6377. .menu {
  6378. position: fixed;
  6379. top: 60px;
  6380. left: -100%;
  6381. width: 80%;
  6382. height: calc(100vh - 60px);
  6383. z-index: 1000;
  6384. transition: left 0.3s ease;
  6385. }
  6386. .menu.collapsed {
  6387. left: 0;
  6388. }
  6389. .chat {
  6390. width: 100%;
  6391. margin-left: 0;
  6392. padding: 0;
  6393. }
  6394. .message-list {
  6395. padding: 10px;
  6396. }
  6397. .message-bubble {
  6398. max-width: 90%;
  6399. }
  6400. .config-container {
  6401. padding: 10px;
  6402. }
  6403. .cards-container {
  6404. flex-direction: column;
  6405. }
  6406. .suggestion-card {
  6407. width: 90% !important;
  6408. padding: 16px 2px !important;
  6409. margin: 10px auto !important;
  6410. }
  6411. .collapse-left-button {
  6412. position: fixed;
  6413. top: 70px;
  6414. left: 10px;
  6415. z-index: 1001;
  6416. }
  6417. }
  6418. /* 针对更小屏幕的优化 */
  6419. @media screen and (max-width: 480px) {
  6420. .user-info {
  6421. font-size: 12px;
  6422. }
  6423. .theme-icon {
  6424. width: 20px;
  6425. height: 20px;
  6426. }
  6427. .avatar img {
  6428. width: 30px;
  6429. height: 30px;
  6430. }
  6431. .message-content {
  6432. font-size: 14px;
  6433. }
  6434. .new-conversation-btn {
  6435. padding: 8px;
  6436. font-size: 14px;
  6437. }
  6438. }
  6439. /* 移动端样式调整 */
  6440. @media screen and (max-width: 768px) {
  6441. .layout {
  6442. height: 100vh; /* 使用视口高度 */
  6443. overflow: hidden; /* 防止页面滚动 */
  6444. display: flex;
  6445. flex-direction: column;
  6446. }
  6447. .header {
  6448. flex-shrink: 0; /* 防止header被压缩 */
  6449. }
  6450. .chat {
  6451. flex: 1; /* 占据剩余空间 */
  6452. height: calc(100vh - 60px); /* 减去header高度 */
  6453. overflow-y: auto; /* 内容过多时在chat区域内滚动 */
  6454. -webkit-overflow-scrolling: touch; /* 优化iOS滚动 */
  6455. }
  6456. .message-list {
  6457. height: calc(100% - 120px); /* 减去输入框高度 */
  6458. overflow-y: auto;
  6459. }
  6460. .input-wrapper {
  6461. position: sticky;
  6462. bottom: 0;
  6463. background: var(--primary-bg);
  6464. padding: 10px;
  6465. border-top: 1px solid var(--border-color);
  6466. }
  6467. .resize-handle {
  6468. display: none;
  6469. }
  6470. .right_menu {
  6471. width: 100% !important;
  6472. }
  6473. }
  6474. /* PC端样式保持不变 */
  6475. @media screen and (min-width: 769px) {
  6476. .layout {
  6477. height: 100vh;
  6478. display: flex;
  6479. flex-direction: column;
  6480. }
  6481. .chat {
  6482. flex: 1;
  6483. display: flex;
  6484. flex-direction: column;
  6485. }
  6486. .message-list {
  6487. flex: 1;
  6488. overflow-y: auto;
  6489. }
  6490. }
  6491. .thinking-steps {
  6492. margin-bottom: 15px;
  6493. font-size: 12px;
  6494. color: #666;
  6495. /* border: 1px solid #e8e8e8; */
  6496. border-radius: 8px;
  6497. overflow: hidden;
  6498. }
  6499. .thinking-steps-header {
  6500. background: #f8f9fa;
  6501. padding: 8px 12px;
  6502. /* border-bottom: 1px solid #e8e8e8; */
  6503. }
  6504. .thinking-title {
  6505. font-weight: 600;
  6506. color: #333;
  6507. font-size: 13px;
  6508. }
  6509. .thinking-step {
  6510. /* padding: 8px 12px; */
  6511. margin-bottom: 0;
  6512. border-radius: 0;
  6513. /* background: #f5f5f5; */
  6514. transition: all 0.3s ease;
  6515. /* border-bottom: 1px solid #e8e8e8; */
  6516. }
  6517. .thinking-step:last-child {
  6518. border-bottom: none;
  6519. }
  6520. .step-content {
  6521. margin-bottom: 6px;
  6522. line-height: 1.4;
  6523. color: #333;
  6524. font-style:oblique
  6525. }
  6526. .step-meta {
  6527. display: flex;
  6528. justify-content: space-between;
  6529. align-items: center;
  6530. font-size: 11px;
  6531. color: #666;
  6532. }
  6533. .step-type {
  6534. background: #e3f2fd;
  6535. color: #1976d2;
  6536. padding: 2px 6px;
  6537. border-radius: 4px;
  6538. font-weight: 500;
  6539. }
  6540. .step-confidence {
  6541. color: #666;
  6542. }
  6543. .thinking-step.start {
  6544. background: #e8f5e9;
  6545. }
  6546. .thinking-step.text_analysis {
  6547. background: #e3f2fd;
  6548. }
  6549. .thinking-step.planning {
  6550. background: #fff3e0;
  6551. }
  6552. .thinking-step.execution {
  6553. background: #f3e5f5;
  6554. }
  6555. .thinking-step.result {
  6556. background: #e8eaf6;
  6557. }
  6558. .thinking-step.conclusion {
  6559. background: #e0f7fa;
  6560. font-weight: 500;
  6561. }
  6562. /* 新增的思考步骤类型样式 */
  6563. .thinking-step.query_understanding {
  6564. background: #e8f5e9;
  6565. border-left: 3px solid #4caf50;
  6566. }
  6567. .thinking-step.context_analysis {
  6568. background: #e3f2fd;
  6569. border-left: 3px solid #2196f3;
  6570. }
  6571. .thinking-step.data_scope {
  6572. background: #fff3e0;
  6573. border-left: 3px solid #ff9800;
  6574. }
  6575. .thinking-step.business_value {
  6576. background: #f3e5f5;
  6577. border-left: 3px solid #9c27b0;
  6578. }
  6579. .step-header {
  6580. position: relative;
  6581. display: flex;
  6582. align-items: center;
  6583. gap: 12px;
  6584. margin-bottom: 8px;
  6585. padding-left: 12px;
  6586. }
  6587. .step-header::before {
  6588. content: '';
  6589. position: absolute;
  6590. left: 0;
  6591. top: 50%;
  6592. transform: translateY(-50%);
  6593. width: 4px;
  6594. height: 16px;
  6595. background: var(--highlight-color);
  6596. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  6597. border-radius: 2px;
  6598. }
  6599. .step-icon {
  6600. width: 24px;
  6601. height: 24px;
  6602. border-radius: 50%;
  6603. display: flex;
  6604. align-items: center;
  6605. justify-content: center;
  6606. font-size: 12px;
  6607. font-weight: 600;
  6608. }
  6609. /* .step.pending .step-icon {
  6610. background: #e5e7eb;
  6611. color: #6b7280;
  6612. }
  6613. .step.running .step-icon {
  6614. background: #3b82f6;
  6615. color: white;
  6616. } */
  6617. /* .step.completed .step-icon {
  6618. color: white;
  6619. }
  6620. .step.error .step-icon {
  6621. color: white;
  6622. } */
  6623. .step-name {
  6624. font-weight: 600;
  6625. font-size: 16px;
  6626. }
  6627. .step-details {
  6628. color: #6b7280;
  6629. font-size: 14px;
  6630. }
  6631. /* .progress-bar {
  6632. width: 100%;
  6633. height: 4px;
  6634. background: #e5e7eb;
  6635. border-radius: 2px;
  6636. margin-top: 8px;
  6637. overflow: hidden;
  6638. margin-left: 36px;
  6639. }
  6640. .progress-fill {
  6641. height: 100%;
  6642. background: #10b981;
  6643. transition: width 0.3s ease;
  6644. width: 0%;
  6645. } */
  6646. </style>
  6647. <style scoped>
  6648. .thinking-steps-stream {
  6649. position: sticky;
  6650. top: 0;
  6651. z-index: 100;
  6652. background: rgba(255, 255, 255, 0.95);
  6653. padding: 10px;
  6654. margin: 10px 0;
  6655. border-radius: 8px;
  6656. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  6657. .thinking-step-stream {
  6658. padding: 8px 12px;
  6659. margin: 4px 0;
  6660. border-radius: 6px;
  6661. background: #f5f5f5;
  6662. font-size: 14px;
  6663. line-height: 1.5;
  6664. opacity: 0;
  6665. transform: translateY(-10px);
  6666. &.fade-in {
  6667. animation: fadeInDown 0.3s ease forwards;
  6668. }
  6669. .typing-indicator {
  6670. display: inline-flex;
  6671. align-items: center;
  6672. margin-left: 8px;
  6673. span {
  6674. width: 4px;
  6675. height: 4px;
  6676. margin: 0 2px;
  6677. background: #666;
  6678. border-radius: 50%;
  6679. animation: typing 1s infinite ease-in-out;
  6680. &:nth-child(1) { animation-delay: 0.2s; }
  6681. &:nth-child(2) { animation-delay: 0.3s; }
  6682. &:nth-child(3) { animation-delay: 0.4s; }
  6683. }
  6684. }
  6685. }
  6686. }
  6687. @keyframes fadeInDown {
  6688. from {
  6689. opacity: 0;
  6690. transform: translateY(-10px);
  6691. }
  6692. to {
  6693. opacity: 1;
  6694. transform: translateY(0);
  6695. }
  6696. }
  6697. @keyframes typing {
  6698. 0%, 60%, 100% { transform: translateY(0); }
  6699. 30% { transform: translateY(-4px); }
  6700. }
  6701. /* 推荐问题组件样式 */
  6702. .recommended-questions {
  6703. background: #ffffff;
  6704. border: 1px solid #e1f5fe;
  6705. border-radius: 8px;
  6706. padding: 16px;
  6707. margin: 16px 0;
  6708. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  6709. }
  6710. .questions-header {
  6711. margin-bottom: 16px;
  6712. }
  6713. .questions-header .hot-icon {
  6714. width: 16px;
  6715. height: 16px;
  6716. margin-right: 8px;
  6717. vertical-align: middle;
  6718. }
  6719. .questions-title {
  6720. font-size: 16px;
  6721. font-weight: 600;
  6722. color: #333;
  6723. margin-right: 8px;
  6724. vertical-align: middle;
  6725. }
  6726. .questions-subtitle {
  6727. font-size: 12px;
  6728. color: #666;
  6729. margin-top: 4px;
  6730. }
  6731. .questions-list {
  6732. display: flex;
  6733. flex-direction: column;
  6734. gap: 8px;
  6735. }
  6736. .question-item {
  6737. padding: 5px 16px;
  6738. background: #f8f9fa;
  6739. border-radius: 6px;
  6740. cursor: pointer;
  6741. transition: all 0.2s ease;
  6742. font-size: 14px;
  6743. color: #333;
  6744. line-height: 1.4;
  6745. }
  6746. .question-item:hover {
  6747. background: #e3f2fd;
  6748. transform: translateY(-1px);
  6749. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  6750. }
  6751. .question-item:nth-child(odd) {
  6752. background: #f1f3f4;
  6753. }
  6754. .question-item:nth-child(odd):hover {
  6755. background: #e8f5e8;
  6756. }
  6757. /* FAB 浮动操作按钮样式 */
  6758. .fab {
  6759. position: fixed;
  6760. bottom: 10%;
  6761. right: 5%;
  6762. width: 50px;
  6763. height: 50px;
  6764. background: #4096ff;
  6765. border-radius: 50%;
  6766. display: flex;
  6767. align-items: center;
  6768. justify-content: center;
  6769. cursor: pointer;
  6770. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  6771. transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  6772. z-index: 1000;
  6773. }
  6774. /* 响应式定位 - 确保在不同屏幕尺寸下都在合适位置 */
  6775. @media (max-width: 768px) {
  6776. .fab {
  6777. bottom: 10%;
  6778. right: 5%;
  6779. width: 45px;
  6780. height: 45px;
  6781. }
  6782. }
  6783. @media (max-width: 480px) {
  6784. .fab {
  6785. bottom: 25%;
  6786. right: 15%;
  6787. width: 40px;
  6788. height: 40px;
  6789. }
  6790. }
  6791. /* 大屏幕优化 */
  6792. @media (min-width: 1200px) {
  6793. .fab {
  6794. bottom: 10%;
  6795. right: 5%;
  6796. width: 55px;
  6797. height: 55px;
  6798. }
  6799. }
  6800. /* 超宽屏幕优化 */
  6801. @media (min-width: 1920px) {
  6802. .fab {
  6803. bottom: 10%;
  6804. right: 5%;
  6805. width: 60px;
  6806. height: 60px;
  6807. }
  6808. }
  6809. .fab:hover {
  6810. transform: scale(1.1);
  6811. box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  6812. }
  6813. /* 三个点的样式 */
  6814. .fab .fab-dots {
  6815. display: flex;
  6816. align-items: center;
  6817. justify-content: center;
  6818. gap: 4px;
  6819. width: 100%;
  6820. height: 100%;
  6821. }
  6822. .fab .fab-dots span {
  6823. width: 6px;
  6824. height: 6px;
  6825. background: #FFF;
  6826. border-radius: 50%;
  6827. transition: all 0.3s ease;
  6828. }
  6829. .fab .close {
  6830. position: absolute;
  6831. width: 40px;
  6832. height: 40px;
  6833. background: #4096ff;
  6834. border-radius: 50%;
  6835. display: flex;
  6836. align-items: center;
  6837. justify-content: center;
  6838. opacity: 1;
  6839. transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  6840. top: 10px;
  6841. left: 50%;
  6842. transform: translateX(-50%);
  6843. /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); */
  6844. }
  6845. /* 响应式关闭按钮位置调整 */
  6846. @media (max-width: 768px) {
  6847. .fab .close {
  6848. width: 35px;
  6849. height: 35px;
  6850. top: 8px;
  6851. }
  6852. }
  6853. @media (max-width: 480px) {
  6854. .fab .close {
  6855. width: 30px;
  6856. height: 30px;
  6857. top: 6px !important;
  6858. }
  6859. }
  6860. .fab .close i {
  6861. font-size: 20px;
  6862. color: #FFF;
  6863. transition: transform 0.3s ease;
  6864. }
  6865. /* 响应式关闭按钮图标尺寸调整 */
  6866. @media (max-width: 768px) {
  6867. .fab .close i {
  6868. font-size: 18px;
  6869. }
  6870. }
  6871. @media (max-width: 480px) {
  6872. .fab .close i {
  6873. font-size: 16px;
  6874. }
  6875. }
  6876. .fab .option {
  6877. position: absolute;
  6878. width: 40px;
  6879. height: 40px;
  6880. background: #0080cc;
  6881. border-radius: 50%;
  6882. display: flex;
  6883. align-items: center;
  6884. justify-content: center;
  6885. cursor: pointer;
  6886. opacity: 0;
  6887. transform: scale(0) translate(0, 0);
  6888. transition: none; /* 初始化时不使用transition */
  6889. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  6890. /* 初始位置在中心 */
  6891. top: 50%;
  6892. left: 50%;
  6893. margin-top: -20px;
  6894. margin-left: -20px;
  6895. }
  6896. /* 响应式选项按钮尺寸调整 */
  6897. @media (max-width: 768px) {
  6898. .fab .option {
  6899. width: 35px;
  6900. height: 35px;
  6901. margin-top: -17.5px;
  6902. margin-left: -17.5px;
  6903. }
  6904. }
  6905. @media (max-width: 480px) {
  6906. .fab .option {
  6907. width: 30px;
  6908. height: 30px;
  6909. margin-top: -15px;
  6910. margin-left: -15px;
  6911. }
  6912. }
  6913. /* 当FAB有动画类时启用transition */
  6914. .fab.animated .option {
  6915. transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  6916. }
  6917. .fab .option i {
  6918. font-size: 20px;
  6919. color: white;
  6920. }
  6921. /* 响应式图标尺寸调整 */
  6922. @media (max-width: 768px) {
  6923. .fab .option i {
  6924. font-size: 18px;
  6925. }
  6926. }
  6927. @media (max-width: 480px) {
  6928. .fab .option i {
  6929. font-size: 16px;
  6930. }
  6931. }
  6932. /* .fab .option:hover {
  6933. transform: scale(1.1);
  6934. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  6935. } */
  6936. .open{
  6937. width: 40px;
  6938. height: 40px;
  6939. }
  6940. .open .close{
  6941. top: 0;
  6942. }
  6943. /* 展开状态 */
  6944. .fab.open .close {
  6945. opacity: 1;
  6946. transform: translateX(-50%) scale(1);
  6947. animation: fadeInClose 0.3s ease-out 0.2s both;
  6948. }
  6949. .fab.open .option {
  6950. opacity: 1;
  6951. transform: scale(1);
  6952. }
  6953. .fab.open .option.reply {
  6954. transform: translate(-60px, -25px) scale(1);
  6955. animation: expandReply 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
  6956. }
  6957. .fab.open .option.love {
  6958. transform: translate(0px, -60px) scale(1);
  6959. animation: expandLove 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
  6960. }
  6961. .fab.open .option.delete {
  6962. transform: translate(55px, -25px) scale(1);
  6963. animation: expandDelete 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
  6964. }
  6965. /* 响应式展开位置调整 */
  6966. @media (max-width: 768px) {
  6967. .fab.open .option.reply {
  6968. transform: translate(-50px, -20px) scale(1);
  6969. }
  6970. .fab.open .option.love {
  6971. transform: translate(0px, -50px) scale(1);
  6972. }
  6973. .fab.open .option.delete {
  6974. transform: translate(45px, -20px) scale(1);
  6975. }
  6976. }
  6977. @media (max-width: 480px) {
  6978. .fab.open .option.reply {
  6979. transform: translate(-40px, -15px) scale(1);
  6980. }
  6981. .fab.open .option.love {
  6982. transform: translate(0px, -40px) scale(1);
  6983. }
  6984. .fab.open .option.delete {
  6985. transform: translate(35px, -15px) scale(1);
  6986. }
  6987. }
  6988. /* 收缩动画 - 从外向内收缩 */
  6989. .fab:not(.open) .option.reply {
  6990. animation: collapseReply 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
  6991. }
  6992. .fab:not(.open) .option.love {
  6993. animation: collapseLove 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.1s both;
  6994. }
  6995. .fab:not(.open) .option.delete {
  6996. animation: collapseDelete 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
  6997. }
  6998. .option-content {
  6999. display: flex;
  7000. align-items: center;
  7001. justify-content: center;
  7002. gap: 4px;
  7003. }
  7004. .option-content--below { flex-direction: column; }
  7005. .option-content--above { flex-direction: column-reverse; }
  7006. .option-icon { font-size: 18px; color: #fff; }
  7007. .option-label { font-size: 10px; color: #fff; line-height: 1; }
  7008. /* 动画关键帧定义 */
  7009. @keyframes expandReply {
  7010. 0% {
  7011. transform: scale(0) translate(0, 0);
  7012. opacity: 0;
  7013. }
  7014. 20% {
  7015. transform: scale(0.3) translate(-12px, -5px);
  7016. opacity: 0.5;
  7017. }
  7018. 40% {
  7019. transform: scale(0.6) translate(-24px, -10px);
  7020. opacity: 0.7;
  7021. }
  7022. 60% {
  7023. transform: scale(0.8) translate(-36px, -15px);
  7024. opacity: 0.9;
  7025. }
  7026. 80% {
  7027. transform: scale(0.95) translate(-48px, -20px);
  7028. opacity: 1;
  7029. }
  7030. 100% {
  7031. transform: scale(1) translate(-60px, -25px);
  7032. opacity: 1;
  7033. }
  7034. }
  7035. @keyframes expandLove {
  7036. 0% {
  7037. transform: scale(0) translate(0, 0);
  7038. opacity: 0;
  7039. }
  7040. 20% {
  7041. transform: scale(0.3) translate(0, -12px);
  7042. opacity: 0.5;
  7043. }
  7044. 40% {
  7045. transform: scale(0.6) translate(0, -24px);
  7046. opacity: 0.7;
  7047. }
  7048. 60% {
  7049. transform: scale(0.8) translate(0, -36px);
  7050. opacity: 0.9;
  7051. }
  7052. 80% {
  7053. transform: scale(0.95) translate(0, -48px);
  7054. opacity: 1;
  7055. }
  7056. 100% {
  7057. transform: scale(1) translate(0, -60px);
  7058. opacity: 1;
  7059. }
  7060. }
  7061. @keyframes expandDelete {
  7062. 0% {
  7063. transform: scale(0) translate(0, 0);
  7064. opacity: 0;
  7065. }
  7066. 20% {
  7067. transform: scale(0.3) translate(11px, -5px);
  7068. opacity: 0.5;
  7069. }
  7070. 40% {
  7071. transform: scale(0.6) translate(22px, -10px);
  7072. opacity: 0.7;
  7073. }
  7074. 60% {
  7075. transform: scale(0.8) translate(33px, -15px);
  7076. opacity: 0.9;
  7077. }
  7078. 80% {
  7079. transform: scale(0.95) translate(44px, -20px);
  7080. opacity: 1;
  7081. }
  7082. 100% {
  7083. transform: scale(1) translate(55px, -25px);
  7084. opacity: 1;
  7085. }
  7086. }
  7087. @keyframes collapseReply {
  7088. 0% {
  7089. transform: translate(-60px, -25px) scale(1);
  7090. opacity: 1;
  7091. }
  7092. 20% {
  7093. transform: translate(-48px, -20px) scale(0.95);
  7094. opacity: 0.9;
  7095. }
  7096. 40% {
  7097. transform: translate(-36px, -15px) scale(0.8);
  7098. opacity: 0.7;
  7099. }
  7100. 60% {
  7101. transform: translate(-24px, -10px) scale(0.6);
  7102. opacity: 0.5;
  7103. }
  7104. 80% {
  7105. transform: translate(-12px, -5px) scale(0.3);
  7106. opacity: 0.3;
  7107. }
  7108. 100% {
  7109. transform: translate(0, 0) scale(0);
  7110. opacity: 0;
  7111. }
  7112. }
  7113. @keyframes collapseLove {
  7114. 0% {
  7115. transform: translate(0px, -60px) scale(1);
  7116. opacity: 1;
  7117. }
  7118. 20% {
  7119. transform: translate(0px, -48px) scale(0.95);
  7120. opacity: 0.9;
  7121. }
  7122. 40% {
  7123. transform: translate(0px, -36px) scale(0.8);
  7124. opacity: 0.7;
  7125. }
  7126. 60% {
  7127. transform: translate(0px, -24px) scale(0.6);
  7128. opacity: 0.5;
  7129. }
  7130. 80% {
  7131. transform: translate(0px, -12px) scale(0.3);
  7132. opacity: 0.3;
  7133. }
  7134. 100% {
  7135. transform: translate(0, 0) scale(0);
  7136. opacity: 0;
  7137. }
  7138. }
  7139. @keyframes collapseDelete {
  7140. 0% {
  7141. transform: translate(55px, -25px) scale(1);
  7142. opacity: 1;
  7143. }
  7144. 20% {
  7145. transform: translate(44px, -20px) scale(0.95);
  7146. opacity: 0.9;
  7147. }
  7148. 40% {
  7149. transform: translate(33px, -15px) scale(0.8);
  7150. opacity: 0.7;
  7151. }
  7152. 60% {
  7153. transform: translate(22px, -10px) scale(0.6);
  7154. opacity: 0.5;
  7155. }
  7156. 80% {
  7157. transform: translate(11px, -5px) scale(0.3);
  7158. opacity: 0.3;
  7159. }
  7160. 100% {
  7161. transform: translate(0, 0) scale(0);
  7162. opacity: 0;
  7163. }
  7164. }
  7165. @keyframes fadeInClose {
  7166. 0% {
  7167. transform: translateX(-50%) scale(0);
  7168. opacity: 0;
  7169. }
  7170. 100% {
  7171. transform: translateX(-50%) scale(1);
  7172. opacity: 1;
  7173. }
  7174. }
  7175. /* 深色主题适配 */
  7176. .dark-theme .fab {
  7177. background: #ffd700;
  7178. }
  7179. .dark-theme .fab .option {
  7180. background: #8b5cf6;
  7181. }
  7182. .dark-theme .fab .close i {
  7183. color: #333;
  7184. }
  7185. /* 深色主题下的思考步骤样式 */
  7186. .dark-theme .thinking-steps {
  7187. border-color: #404040;
  7188. background: #1f1f1f;
  7189. }
  7190. .dark-theme .thinking-steps-header {
  7191. background: #2d2d2d;
  7192. border-color: #404040;
  7193. }
  7194. .dark-theme .thinking-title {
  7195. color: #e0e0e0;
  7196. }
  7197. .dark-theme .thinking-step {
  7198. background: #2d2d2d;
  7199. border-color: #404040;
  7200. }
  7201. .dark-theme .step-content {
  7202. color: #e0e0e0;
  7203. }
  7204. .dark-theme .step-type {
  7205. background: #1e3a5f;
  7206. color: #64b5f6;
  7207. }
  7208. .dark-theme .step-confidence {
  7209. color: #b0b0b0;
  7210. }
  7211. /* .fab .option.reply {
  7212. left: calc((100% / 3) - 3px);
  7213. }
  7214. .fab .option.love {
  7215. left: calc(50% - 3px);
  7216. }
  7217. .fab .option.delete {
  7218. left: calc(((100% / 3) * 2) - 3px);
  7219. }
  7220. */
  7221. :deep(.anticon-credit-card) {
  7222. color: #fff;
  7223. }
  7224. :deep(.anticon-audit) {
  7225. color: #fff;
  7226. }
  7227. :deep(.anticon-profile) {
  7228. color: #fff;
  7229. }
  7230. </style>