report.vue 69 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172
  1. <template>
  2. <div class="layout">
  3. <div class="menu" :class="{ collapsed: isMenuCollapsed }">
  4. <!-- 添加收缩按钮 -->
  5. <div
  6. class="collapse-left-button"
  7. :class="{ 'menu-collapsed': isMenuCollapsed }"
  8. @click="toggleMenu"
  9. >
  10. <img
  11. :src="isMenuCollapsed ? rightIcon : leftIcon"
  12. alt="toggle"
  13. class="collapse-icon"
  14. />
  15. </div>
  16. <!-- Logo -->
  17. <div class="logo">
  18. <img
  19. src="https://ecsaas.raycos.com.cn/web/uploads/20230713/3690c0badc2c7be4552a253f72d6d701.png"
  20. :draggable="false"
  21. alt="logo"
  22. class="logo-img"
  23. />
  24. <span>Raycos Tech</span>
  25. </div>
  26. <!-- New Conversation 按钮 -->
  27. <button class="new-conversation-btn" @click="addNewConversation">
  28. <img class="tab-icon" src="../assets/svg/plus.svg" alt="" />
  29. <span>New Conversation</span>
  30. </button>
  31. <!-- 会话列表 -->
  32. <div class="conversation-list">
  33. <div
  34. v-for="conversation in conversations"
  35. :key="conversation.id"
  36. :class="[
  37. 'conversation-item',
  38. { active: currentConversationId === conversation.id },
  39. ]"
  40. @click="switchConversation(conversation.id)"
  41. >
  42. {{ conversation.title }}
  43. </div>
  44. </div>
  45. <!-- 添加模型配置和语音配置的容器 -->
  46. <div class="config-container">
  47. <KnowledgeConfig />
  48. <ModelConfig />
  49. <VoiceConfig />
  50. </div>
  51. </div>
  52. <div class="chat">
  53. <!-- 欢迎消息 -->
  54. <div v-if="messages.length === 0" class="welcome-section">
  55. <!-- Do you want 部分 -->
  56. <div class="suggestion-section">
  57. <h3>嗨,我是你的智能助手</h3>
  58. <div class="cards-container">
  59. <div class="suggestion-card">
  60. <div class="card-header">
  61. <img
  62. src="../assets/svg/hot-for-ux.svg"
  63. alt="hot topics"
  64. class="tab-icon"
  65. />
  66. <h4>推荐问题</h4>
  67. </div>
  68. <p class="card-subtitle">为您精选的热门问题</p>
  69. <div class="suggestion-items">
  70. <!-- Combine both QA pairs and guides -->
  71. <div
  72. v-for="(item, index) in [
  73. ...currentQaPairs,
  74. ...currentDesignGuides,
  75. ]"
  76. :key="index"
  77. class="suggestion-item"
  78. @click="handleQaClick(item)"
  79. >
  80. {{ item.question }}
  81. </div>
  82. </div>
  83. </div>
  84. <!-- Hot Topics 卡片 --><!-- Design Guide 卡片 -->
  85. <!-- <div class="suggestion-card">
  86. <div class="card-header">
  87. <img
  88. src="../assets/svg/hot-for-ux.svg"
  89. alt="hot topics"
  90. class="tab-icon"
  91. />
  92. <h4>知识库相关问题:</h4>
  93. </div>
  94. <p class="card-subtitle">我们可以这样向知识库提问</p>
  95. <div class="suggestion-items">
  96. <div
  97. v-for="(qa, index) in currentQaPairs"
  98. :key="index"
  99. class="suggestion-item"
  100. @click="handleQaClick(qa)"
  101. >
  102. {{ qa.question }}
  103. </div>
  104. </div>
  105. </div>
  106. <div class="suggestion-card">
  107. <div class="card-header">
  108. <img
  109. src="../assets/svg/read.svg"
  110. alt="hot topics"
  111. class="tab-icon"
  112. />
  113. <h4>网上热搜问答</h4>
  114. </div>
  115. <p class="card-subtitle">搜索网上的热门回答</p>
  116. <div class="suggestion-items">
  117. <div
  118. v-for="(guide, index) in currentDesignGuides"
  119. :key="index"
  120. class="suggestion-item"
  121. @click="handleQaClick(guide)"
  122. >
  123. {{ guide.question }}
  124. </div>
  125. </div>
  126. </div> -->
  127. </div>
  128. </div>
  129. </div>
  130. <!-- 修改消息列表部分 -->
  131. <div v-else class="message-list" ref="messageList">
  132. <div
  133. v-for="message in messages"
  134. :key="message.id"
  135. :class="[
  136. 'message-item',
  137. message.role === 'user' ? 'user' : 'assistant',
  138. ]"
  139. >
  140. <div class="message-bubble">
  141. <div class="message-content">
  142. <template v-if="message.role === 'user' && message.files">
  143. <div
  144. v-for="file in message.files"
  145. :key="file.name"
  146. class="file-message"
  147. >
  148. <!-- 图片文件显示 -->
  149. <template v-if="isImageFile(file)">
  150. <div class="image-preview">
  151. <img :src="file.url" class="preview-image" />
  152. </div>
  153. </template>
  154. <!-- 视频文件显示 -->
  155. <template v-else-if="isVideoFile(file)">
  156. <div class="video-preview">
  157. <video
  158. controls
  159. class="preview-video"
  160. :src="file.url"
  161. preload="metadata"
  162. >
  163. Your browser does not support the video tag.
  164. </video>
  165. </div>
  166. </template>
  167. <!-- 文档文件显示 -->
  168. <template v-else>
  169. <div class="file-info-display">
  170. <img :src="getFileIcon(file)" class="file-type-icon" />
  171. <div class="file-details">
  172. <span class="file-name" :title="file.name">{{
  173. file.name
  174. }}</span>
  175. <span class="file-size">{{ file.size }}</span>
  176. </div>
  177. </div>
  178. </template>
  179. </div>
  180. </template>
  181. <div
  182. class="message-text"
  183. v-if="message.role === 'assistant'"
  184. v-html="renderMarkdown(message.displayContent)"
  185. ></div>
  186. <div v-else>{{ message.content }}</div>
  187. <!-- 音频控制按钮 -->
  188. <div
  189. v-if="message.role === 'assistant' && message.audioData"
  190. class="audio-controls"
  191. >
  192. <button class="audio-btn" @click="handleAudioClick(message)">
  193. <!-- 只在当前消息正在播放时显示波形动画 -->
  194. <div
  195. v-if="currentPlayingId === message.id"
  196. class="wave-animation"
  197. >
  198. <span class="wave-bar"></span>
  199. <span class="wave-bar"></span>
  200. <span class="wave-bar"></span>
  201. <span class="wave-bar"></span>
  202. </div>
  203. <!-- 其他情况显示播放图标 -->
  204. <img v-else :src="playIcon" alt="播放" class="audio-icon" />
  205. </button>
  206. </div>
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. <!-- 输入框 -->
  212. <div class="input-container">
  213. <!-- 标签栏 -->
  214. <div class="tabs-wrapper">
  215. <!-- <div class="tab-item active">
  216. <img
  217. src="../assets/svg/hot-for-ux.svg"
  218. alt="hot topics"
  219. class="tab-icon"
  220. />
  221. <span>Hot Topics</span>
  222. </div>
  223. <div class="tab-item">
  224. <img
  225. src="../assets/svg/read.svg"
  226. alt="hot topics"
  227. class="tab-icon"
  228. />
  229. <span>Design Guide</span>
  230. </div> -->
  231. <!-- 添加互联网搜索开关 -->
  232. <div class="web-search-toggle">
  233. <input
  234. type="checkbox"
  235. id="webSearchToggle"
  236. v-model="enableWebSearch"
  237. :disabled="attachedFiles.length > 0"
  238. class="toggle-input"
  239. />
  240. <label
  241. for="webSearchToggle"
  242. class="toggle-label"
  243. :class="{ disabled: attachedFiles.length > 0 }"
  244. >
  245. 启用互联网搜索
  246. <!-- <span v-if="attachedFiles.length > 0" class="disabled-hint">
  247. (文件上传时不可用)
  248. </span> -->
  249. </label>
  250. </div>
  251. </div>
  252. <!-- 添加附件面板 -->
  253. <div v-if="showAttachments" class="attachments-panel">
  254. <div class="panel-content">
  255. <div class="attachments-header">
  256. <span>Attachments</span>
  257. <button class="close-btn" @click="toggleAttachments">
  258. <img src="../assets/svg/close.svg" alt="" />
  259. </button>
  260. </div>
  261. <div
  262. v-if="attachedFiles.length === 0"
  263. style="display: flex; justify-content: center"
  264. >
  265. <div
  266. class="upload-area"
  267. :class="{ 'has-files': attachedFiles.length > 0 }"
  268. @click="triggerFileInput"
  269. @drop.prevent="handleFileDrop"
  270. @dragover.prevent
  271. @dragenter.prevent
  272. >
  273. <!-- 移除条件判断,让整个区域始终可点击 -->
  274. <template v-if="isUploading">
  275. <div class="upload-loading">
  276. <div class="loading-spinner"></div>
  277. <div class="upload-text">Uploading...</div>
  278. </div>
  279. </template>
  280. <template v-else>
  281. <img
  282. src="../assets/svg/upload.svg"
  283. alt="upload"
  284. class="upload-icon"
  285. />
  286. <div class="upload-text">Upload files</div>
  287. <div class="upload-hint">
  288. Click or drag files to this area to upload
  289. </div>
  290. </template>
  291. <input
  292. type="file"
  293. ref="fileInput"
  294. style="display: none"
  295. @change="handleFileUpload"
  296. multiple
  297. />
  298. </div>
  299. </div>
  300. <!-- 上传内容列表 -->
  301. <div v-if="attachedFiles.length !== 0">
  302. <div class="file-list">
  303. <div
  304. v-for="file in attachedFiles"
  305. :key="file.name"
  306. class="file-item"
  307. :class="{ 'is-image': isImageFile(file) }"
  308. >
  309. <div :class="isImageFile(file) ? 'file-wrapper' : ''">
  310. <!-- 添加文件 loading 状态 -->
  311. <div v-if="file.isUploading" class="file-loading">
  312. <div class="loading-spinner"></div>
  313. </div>
  314. <!-- 其他文件显示逻辑保持不变 -->
  315. <img
  316. v-else-if="isImageFile(file)"
  317. :src="file.url"
  318. alt="file"
  319. class="file-icon"
  320. />
  321. <video
  322. v-else-if="isVideoFile(file)"
  323. :src="file.url"
  324. class="file-icon"
  325. preload="metadata"
  326. >
  327. Your browser does not support the video tag.
  328. </video>
  329. <img
  330. v-else
  331. :src="getFileIcon(file)"
  332. alt="file"
  333. :class="
  334. isImageFile(file) || isVideoFile(file)
  335. ? 'file-icon'
  336. : ''
  337. "
  338. />
  339. <button
  340. class="remove-btn"
  341. @click.stop="removeFile(file)"
  342. v-if="!file.isUploading"
  343. >
  344. ×
  345. </button>
  346. </div>
  347. <div class="file-info" v-if="!isImageFile(file)">
  348. <span class="file-name">{{ file.name }}</span>
  349. <span class="file-size">{{ file.sizeFormatted }}</span>
  350. </div>
  351. </div>
  352. <button class="add-more-btn" @click.stop="triggerFileInput">
  353. <img src="../assets/svg/plus.svg" alt="add" />
  354. </button>
  355. </div>
  356. <input
  357. type="file"
  358. ref="fileInput"
  359. style="display: none"
  360. @change="handleFileUpload"
  361. multiple
  362. />
  363. </div>
  364. <!-- <div v-if="attachedFiles.length" class="attached-files">
  365. <div
  366. v-for="file in attachedFiles"
  367. :key="file.name"
  368. class="file-item"
  369. >
  370. <FileOutlined />
  371. <span>{{ file.name }}</span>
  372. <button class="remove-btn" @click="removeFile(file)">
  373. </button>
  374. </div>
  375. </div> -->
  376. </div>
  377. </div>
  378. <!-- 输入框部分 -->
  379. <div class="input-wrapper">
  380. <button class="attachment-btn" @click="toggleAttachments">
  381. <img
  382. src="../assets/svg/attachment.svg"
  383. alt="attachment"
  384. class="tab-icon"
  385. />
  386. </button>
  387. <input
  388. type="text"
  389. class="message-input"
  390. v-model="inputContent"
  391. @keyup.enter="sendMessage"
  392. @input="handleInputChange"
  393. placeholder="Type a message..."
  394. />
  395. <button
  396. class="send-btn"
  397. @click="sendMessage"
  398. :disabled="!inputContent && attachedFiles.length === 0"
  399. >
  400. <img src="../assets/svg/up.svg" alt="send" />
  401. </button>
  402. </div>
  403. </div>
  404. </div>
  405. <div class="right_menu" :class="{ collapsed: isRightMenuCollapsed || !enableWebSearch }" :style="{ width: rightMenuWidth + 'px' }">
  406. <!-- 添加拖动条 -->
  407. <div
  408. class="resize-handle"
  409. @mousedown="startResize"
  410. @touchstart="startResize"
  411. ></div>
  412. <!-- 修改折叠按钮的样式和行为 -->
  413. <div
  414. class="collapse-button"
  415. :class="{ 'menu-expanded': !isRightMenuCollapsed }"
  416. :style="!isRightMenuCollapsed ? { left: `-20px` } : {}"
  417. @click="toggleRightMenu"
  418. >
  419. <img
  420. :src="isRightMenuCollapsed ? leftIcon : rightIcon"
  421. alt="toggle"
  422. class="collapse-icon"
  423. />
  424. </div>
  425. <div class="right-menu-content">
  426. <!-- 添加 Tab 切换 -->
  427. <div class="right-menu-tabs">
  428. <div
  429. class="tab-item"
  430. :class="{ active: activeTab === 'search' }"
  431. @click="activeTab = 'search'"
  432. >
  433. <FileSearchOutlined />
  434. <span>搜索</span>
  435. </div>
  436. <div
  437. class="tab-item"
  438. :class="{ active: activeTab === 'preview' }"
  439. @click="activeTab = 'preview'"
  440. >
  441. <FileOutlined />
  442. <span>文档预览</span>
  443. </div>
  444. </div>
  445. <!-- 搜索面板 -->
  446. <div v-show="activeTab === 'search'" class="panel-container">
  447. <div class="search-header">
  448. <span>搜索结果</span>
  449. <div class="web-search-toggle">
  450. <input
  451. type="checkbox"
  452. id="searchToggle"
  453. v-model="enableWebSearch"
  454. class="toggle-input"
  455. @change="handleSearchToggle"
  456. />
  457. <label for="searchToggle" class="toggle-label">
  458. {{ enableWebSearch ? '搜索已开启' : '搜索已关闭' }}
  459. </label>
  460. </div>
  461. </div>
  462. <SearchResults
  463. v-if="enableWebSearch"
  464. :searchResults="searchResults"
  465. :loading="isSearchLoading"
  466. :total="searchTotal"
  467. :enableWebSearch="enableWebSearch"
  468. :message="currentSearchQuery"
  469. @update:enableWebSearch="handleSearchToggle"
  470. />
  471. </div>
  472. <!-- 文档预览面板 -->
  473. <div v-show="activeTab === 'preview'" class="panel-container">
  474. <div class="preview-header">
  475. <span>文档预览</span>
  476. </div>
  477. <DocumentPreview
  478. :documents="attachedFiles"
  479. @select="handleDocumentSelect"
  480. />
  481. </div>
  482. </div>
  483. </div>
  484. </div>
  485. </template>
  486. <script setup>
  487. import { ref, reactive, nextTick, onUnmounted, onMounted } from "vue";
  488. import {
  489. PlusOutlined,
  490. FireOutlined,
  491. ReadOutlined,
  492. HeartOutlined,
  493. SmileOutlined,
  494. CommentOutlined,
  495. CloudUploadOutlined,
  496. PaperClipOutlined,
  497. ShareAltOutlined,
  498. EllipsisOutlined,
  499. CloseOutlined,
  500. FileOutlined,
  501. ArrowUpOutlined,
  502. UploadOutlined,
  503. FileSearchOutlined,
  504. } from "@ant-design/icons-vue";
  505. import leftIcon from "../assets/svg/left.svg";
  506. import rightIcon from "../assets/svg/right.svg";
  507. import plusIcon from "../assets/svg/plus.svg";
  508. import hotForUxIcon from "../assets/svg/hot-for-ux.svg";
  509. import readIcon from "../assets/svg/read.svg";
  510. import attachmentIcon from "../assets/svg/attachment.svg";
  511. import uploadIcon from "../assets/svg/upload.svg";
  512. import closeIcon from "../assets/svg/close.svg";
  513. import upIcon from "../assets/svg/up.svg";
  514. import wordIcon from "../assets/svg/word.svg";
  515. import pauseIcon from "../assets/svg/pause.svg";
  516. import playIcon from "../assets/svg/play.svg";
  517. import axios from "axios";
  518. import { useStore } from "vuex";
  519. import MarkdownIt from "markdown-it";
  520. import ModelConfig from "../components/ModelConfig/index.vue";
  521. import SearchResults from "../components/SearchResults/index.vue";
  522. import VoiceConfig from "../components/VoiceConfig/index.vue";
  523. import KnowledgeConfig from "../components/KnowledgeConfig/index.vue";
  524. import ExportButton from "../components/ExportButton/index.vue";
  525. import dayjs from 'dayjs';
  526. import DocumentPreview from "../components/DocumentPreview/index.vue";
  527. // 初始化 markdown-it
  528. const md = new MarkdownIt({
  529. html: true,
  530. linkify: true,
  531. typographer: true,
  532. });
  533. // 响应式状态
  534. const headerOpen = ref(false);
  535. const inputContent = ref("");
  536. const showAttachments = ref(false);
  537. const isRightMenuCollapsed = ref(false);
  538. const fileInput = ref(null);
  539. const attachedFiles = ref([]);
  540. const messages = ref([]);
  541. const isLoading = ref(false);
  542. const currentConversationId = ref(1);
  543. const conversationCounter = ref(1);
  544. const messageList = ref(null);
  545. const store = useStore();
  546. // 会话数据
  547. const conversations = ref([
  548. {
  549. id: 1,
  550. title: "当前会话",
  551. messages: [],
  552. },
  553. ]);
  554. // 添加打字效果相关的状态
  555. const typingSpeed = 50; // 打字速度(毫秒/字符)
  556. const isTyping = ref(false);
  557. // 添加音频播放相关的响应式变量
  558. const audioPlayer = ref(null);
  559. const isPlaying = ref(false);
  560. // 添加当前播放消息的 ID
  561. const currentPlayingId = ref(null);
  562. // 添加新的响应式变量
  563. const isUploading = ref(false);
  564. // 添加新的响应式状态
  565. const documentSummary = ref(null);
  566. const isLoadingSummary = ref(false);
  567. const currentQaPairs = ref([]);
  568. const currentDesignGuides = ref([]);
  569. let rotationInterval = null;
  570. // 添加新的响应式状态
  571. const searchResults = ref([]);
  572. const isSearchLoading = ref(false);
  573. const searchTotal = ref(0);
  574. // 添加互联网搜索开关状态
  575. const enableWebSearch = ref(false);
  576. // 添加新的响应式变量
  577. const isMenuCollapsed = ref(false);
  578. // 添加移动端检测
  579. const isMobile = ref(false);
  580. // 检测设备类型
  581. const checkMobile = () => {
  582. isMobile.value = window.innerWidth <= 768;
  583. };
  584. // 监听窗口大小变化
  585. onMounted(() => {
  586. checkMobile();
  587. window.addEventListener('resize', checkMobile);
  588. });
  589. onUnmounted(() => {
  590. window.removeEventListener('resize', checkMobile);
  591. });
  592. // 添加遮罩层点击处理
  593. const handleOverlayClick = () => {
  594. if (isMobile.value) {
  595. isMenuCollapsed.value = true;
  596. isRightMenuCollapsed.value = true;
  597. document.body.style.overflow = 'auto';
  598. }
  599. };
  600. // 修改菜单切换逻辑
  601. const toggleMenu = () => {
  602. isMenuCollapsed.value = !isMenuCollapsed.value;
  603. if (isMobile.value) {
  604. document.body.style.overflow = isMenuCollapsed.value ? 'auto' : 'hidden';
  605. if (!isMenuCollapsed.value) {
  606. isRightMenuCollapsed.value = true; // 确保右侧菜单关闭
  607. }
  608. }
  609. };
  610. // 修改右侧菜单切换逻辑
  611. const toggleRightMenu = () => {
  612. isRightMenuCollapsed.value = !isRightMenuCollapsed.value;
  613. if (isRightMenuCollapsed.value) {
  614. // 收起菜单时的处理
  615. if (document.querySelector('.chat')) {
  616. document.querySelector('.chat').style.right = '0';
  617. }
  618. } else {
  619. // 展开菜单时的处理
  620. if (document.querySelector('.chat')) {
  621. document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
  622. }
  623. }
  624. if (isMobile.value) {
  625. document.body.style.overflow = isRightMenuCollapsed.value ? 'auto' : 'hidden';
  626. if (!isRightMenuCollapsed.value) {
  627. isMenuCollapsed.value = true;
  628. }
  629. }
  630. };
  631. // 修改获取文档摘要的方法
  632. const fetchDocumentSummary = async () => {
  633. isLoadingSummary.value = true;
  634. try {
  635. const response = await axios.get(
  636. `${import.meta.env.VITE_BASE_AI_API}/api/document/summary`
  637. );
  638. console.log("API Response:", response.data);
  639. if (response.data.code === 200) {
  640. documentSummary.value = response.data.data.items;
  641. console.log("Document Summary:", documentSummary.value);
  642. startRotation();
  643. }
  644. } catch (error) {
  645. console.error("获取文档摘要失败:", error);
  646. } finally {
  647. isLoadingSummary.value = false;
  648. }
  649. };
  650. // 修改轮换显示逻辑
  651. const startRotation = () => {
  652. if (rotationInterval) {
  653. clearInterval(rotationInterval);
  654. }
  655. const updateItems = () => {
  656. if (!documentSummary.value?.length) {
  657. console.log("No document summary data available");
  658. return;
  659. }
  660. // 处理第一项数据(Hot Topics)
  661. try {
  662. const hotTopicsData = documentSummary.value[0];
  663. if (hotTopicsData?.questions) {
  664. const parsedQaPairs =
  665. /* JSON.parse( */ hotTopicsData.questions; /* .replace(/'/g, '"')); */
  666. const formattedQaPairs = parsedQaPairs.map((question) => ({
  667. question,
  668. }));
  669. // 随机选择3个问题
  670. const shuffled = [...formattedQaPairs].sort(() => 0.5 - Math.random());
  671. currentQaPairs.value = shuffled.slice(0, 3);
  672. }
  673. } catch (error) {
  674. console.error("解析 Hot Topics 失败:", error);
  675. }
  676. // 处理第二项数据(Design Guide)
  677. try {
  678. const designGuideData = documentSummary.value[1];
  679. if (designGuideData?.questions) {
  680. const parsedGuides =
  681. /* JSON.parse( */ designGuideData.questions; /* .replace(/'/g, '"')); */
  682. const formattedGuides = parsedGuides.map((question) => ({ question }));
  683. // 随机选择3个指南
  684. const shuffled = [...formattedGuides].sort(() => 0.5 - Math.random());
  685. currentDesignGuides.value = shuffled.slice(0, 3);
  686. }
  687. } catch (error) {
  688. console.error("解析 Design Guide 失败:", error);
  689. }
  690. };
  691. // 初始更新
  692. updateItems();
  693. // 每5秒更新一次
  694. rotationInterval = setInterval(updateItems, 5000);
  695. };
  696. // 处理QA点击事件
  697. const handleQaClick = (qa) => {
  698. console.log("QA clicked:", qa); // 添加日志
  699. if (qa?.question) {
  700. inputContent.value = qa.question;
  701. sendMessage();
  702. }
  703. };
  704. // 在组件卸载时清理定时器
  705. onUnmounted(() => {
  706. if (rotationInterval) {
  707. clearInterval(rotationInterval);
  708. }
  709. });
  710. // 在组件挂载时获取摘要
  711. onMounted(() => {
  712. fetchDocumentSummary();
  713. });
  714. // 方法
  715. const toggleAttachments = () => {
  716. showAttachments.value = !showAttachments.value;
  717. };
  718. const removeFile = (file) => {
  719. attachedFiles.value = attachedFiles.value.filter((f) => f !== file);
  720. };
  721. const triggerFileInput = () => {
  722. // 如果正在上传,不触发新的上传
  723. if (isUploading.value) return;
  724. fileInput.value?.click();
  725. };
  726. const uploadFile = async (file) => {
  727. try {
  728. const formData = new FormData();
  729. formData.append("file", file);
  730. const response = await axios.post(
  731. `${import.meta.env.VITE_BASE_AI_API}/upload/file`,
  732. formData,
  733. {
  734. headers: {
  735. "Content-Type": "multipart/form-data",
  736. },
  737. }
  738. );
  739. if (response.data.status === 200) {
  740. return response.data.data.fileUrl; // 返回文件上传后的URL
  741. } else {
  742. throw new Error(response.data.message || "文件上传失败");
  743. }
  744. } catch (error) {
  745. console.error("文件上传失败:", error);
  746. throw error;
  747. }
  748. };
  749. const handleFileUpload = async (event) => {
  750. const files = Array.from(event.target.files);
  751. if (files.length === 0) return;
  752. // 添加文件大小检查
  753. const MAX_VIDEO_SIZE = 10 * 1024 * 1024; // 10MB in bytes
  754. const invalidFiles = files.filter((file) => {
  755. if (isVideoFile(file) && file.size > MAX_VIDEO_SIZE) {
  756. return true;
  757. }
  758. return false;
  759. });
  760. if (invalidFiles.length > 0) {
  761. // 如果有超出大小限制的视频文件,显示错误提示
  762. alert("Video files must not exceed 10MB");
  763. event.target.value = ""; // 清空input
  764. return;
  765. }
  766. isUploading.value = true;
  767. try {
  768. for (const file of files) {
  769. // 创建一个带有上传状态的文件对象
  770. const fileWithStatus = {
  771. name: file.name,
  772. size: file.size,
  773. sizeFormatted: formatFileSize(file.size),
  774. type: file.type,
  775. isUploading: true,
  776. };
  777. // 先添加到文件列表中
  778. attachedFiles.value.push(fileWithStatus);
  779. try {
  780. const url = await uploadFile(file);
  781. // 直接修改数组中的对象
  782. const index = attachedFiles.value.findIndex(
  783. (f) => f.name === file.name
  784. );
  785. if (index !== -1) {
  786. // 使用数组替换方式更新,确保响应式更新
  787. attachedFiles.value.splice(index, 1, {
  788. ...fileWithStatus,
  789. url,
  790. isUploading: false,
  791. });
  792. }
  793. } catch (error) {
  794. // 如果上传失败,从列表中移除该文件
  795. attachedFiles.value = attachedFiles.value.filter(
  796. (f) => f.name !== file.name
  797. );
  798. console.error("单个文件上传失败:", error);
  799. }
  800. }
  801. } catch (error) {
  802. console.error("文件上传失败:", error);
  803. } finally {
  804. isUploading.value = false;
  805. event.target.value = ""; // 清空input以允许重复上传相同文件
  806. }
  807. if (files.length > 0 && enableWebSearch.value) {
  808. enableWebSearch.value = false; // 如果有文件上传,自动关闭互联网搜索
  809. }
  810. };
  811. const formatFileSize = (bytes) => {
  812. if (!bytes || isNaN(bytes)) return "0 B";
  813. const k = 1024;
  814. const sizes = ["B", "KB", "MB", "GB"];
  815. const i = Math.floor(Math.log(bytes) / Math.log(k));
  816. return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
  817. };
  818. const getFileIcon = (file) => {
  819. // 如果文件已经有 URL 且是图片类型,返回 URL
  820. if (file.url && isImageFile(file)) {
  821. return file.url;
  822. }
  823. // 其他所有情况返回文档图标
  824. return wordIcon;
  825. };
  826. const isImageFile = (file) => {
  827. const imageTypes = ["jpg", "jpeg", "png", "gif", "webp"];
  828. const ext = file.name?.split(".")?.pop()?.toLowerCase() || "";
  829. return imageTypes.includes(ext);
  830. };
  831. const isVideoFile = (file) => {
  832. const videoTypes = ["mp4", "webm", "ogg"];
  833. const ext = file.name?.split(".")?.pop()?.toLowerCase() || "";
  834. return videoTypes.includes(ext);
  835. };
  836. const getFileType = (file) => {
  837. const ext = file.name.split(".").pop().toLowerCase();
  838. const imageTypes = ["jpg", "jpeg", "png", "gif", "webp"];
  839. const videoTypes = ["mp4", "webm", "ogg"];
  840. if (imageTypes.includes(ext)) return "image";
  841. if (videoTypes.includes(ext)) return "video";
  842. return "document";
  843. };
  844. // 添加滚动到底部的方法
  845. const scrollToBottom = () => {
  846. if (messageList.value) {
  847. nextTick(() => {
  848. messageList.value.scrollTop = messageList.value.scrollHeight;
  849. });
  850. }
  851. };
  852. // 添加 session_id 的响应式引用
  853. const session_id = ref("");
  854. // 修改发送消息方法
  855. const sendMessage = async () => {
  856. if (
  857. (!inputContent.value.trim() && attachedFiles.value.length === 0) ||
  858. isTyping.value
  859. )
  860. return;
  861. // 如果启用了网络搜索,更新搜索查询
  862. if (enableWebSearch.value) {
  863. currentSearchQuery.value = inputContent.value;
  864. }
  865. // 构建消息内容,包含文件信息
  866. let messageContent = inputContent.value.trim();
  867. // 收集文件URLs
  868. const imageUrls = [];
  869. const videoUrls = [];
  870. const documentUrls = [];
  871. attachedFiles.value.forEach((file) => {
  872. const fileType = getFileType(file);
  873. if (fileType === "image") {
  874. imageUrls.push(file.url);
  875. } else if (fileType === "video") {
  876. videoUrls.push(file.url);
  877. } else {
  878. documentUrls.push(file.url);
  879. }
  880. });
  881. // 添加用户消息
  882. const userMessage = {
  883. id: Date.now(),
  884. role: "user",
  885. content: messageContent,
  886. displayContent: messageContent,
  887. files: attachedFiles.value.map((file) => ({
  888. name: file.name,
  889. size: file.sizeFormatted, // 使用格式化后的大小
  890. type: file.type,
  891. url: file.url,
  892. })),
  893. };
  894. messages.value.push(userMessage);
  895. scrollToBottom();
  896. // 异步执行搜索,但不等待结果
  897. sendMessageS(messageContent).catch((error) => {
  898. console.error("Web search failed:", error);
  899. });
  900. // 保存当前输入内容并清空输入框和附件
  901. const currentInput = inputContent.value;
  902. showAttachments.value = false;
  903. inputContent.value = "";
  904. const currentFiles = [...attachedFiles.value];
  905. attachedFiles.value = [];
  906. // 添加临时AI消息
  907. const tempAiMessage = {
  908. id: Date.now() + 1,
  909. role: "assistant",
  910. content: "Thinking...",
  911. displayContent: "Thinking...",
  912. isLoading: true,
  913. };
  914. messages.value.push(tempAiMessage);
  915. scrollToBottom();
  916. try {
  917. // 根据开关状态选择不同的 API 端点
  918. const apiEndpoint = enableWebSearch.value
  919. ? `${import.meta.env.VITE_BASE_AI_API}/api/chat/web-search-llm/`
  920. : `${import.meta.env.VITE_BASE_AI_API}/chatbot/multimodal`;
  921. const response = await axios.post(apiEndpoint, {
  922. message: currentInput,
  923. chat_config_id: "2",
  924. user_id: "13365429324",
  925. session_id: session_id.value,
  926. source: "pc",
  927. image_urls: imageUrls,
  928. video_urls: videoUrls,
  929. documents: documentUrls,
  930. });
  931. // 更新 session_id
  932. if (response.data.data.session_id) {
  933. session_id.value = response.data.data.session_id;
  934. }
  935. // 移除时消息并添加AI响应
  936. messages.value = messages.value.filter(
  937. (msg) => msg.id !== tempAiMessage.id
  938. );
  939. const aiMessage = reactive({
  940. id: Date.now() + 2,
  941. role: "assistant",
  942. content: response.data.data.answer,
  943. displayContent: "",
  944. audioData: response.data.data.audio_info?.audio || null, // 保存音频数据
  945. });
  946. messages.value.push(aiMessage);
  947. // 如果有音频数据,自动播放
  948. if (aiMessage.audioData) {
  949. playAudioMessage(aiMessage.audioData);
  950. }
  951. await typeMessage(aiMessage);
  952. } catch (error) {
  953. console.error("发送消息失败:", error);
  954. messages.value = messages.value.filter(
  955. (msg) => msg.id !== tempAiMessage.id
  956. );
  957. messages.value.push({
  958. id: Date.now() + 2,
  959. role: "assistant",
  960. content: "Sorry, there was an error processing your request.",
  961. displayContent: "Sorry, there was an error processing your request.",
  962. });
  963. } finally {
  964. isTyping.value = false;
  965. await nextTick();
  966. scrollToBottom();
  967. }
  968. };
  969. // 修改 sendMessageS 方法
  970. const sendMessageS = async (query) => {
  971. isSearchLoading.value = true;
  972. try {
  973. const response = await axios.post(
  974. `${import.meta.env.VITE_BASE_AI_API}/api/web-search-results/`,
  975. {
  976. query: query,
  977. num_results: 20,
  978. page: 1,
  979. page_size: 20,
  980. engine: "bing",
  981. }
  982. );
  983. if (response.data && response.data.code === 200) {
  984. searchResults.value = response.data.data.results || [];
  985. searchTotal.value = response.data.data.total_results || 0;
  986. }
  987. } catch (error) {
  988. console.error("Web search failed:", error);
  989. searchResults.value = [];
  990. searchTotal.value = 0;
  991. } finally {
  992. isSearchLoading.value = false;
  993. }
  994. };
  995. // 修改打字效果方法
  996. const typeMessage = async (message) => {
  997. if (!message || !message.content) {
  998. console.error("Invalid message or content is missing");
  999. return;
  1000. }
  1001. return new Promise((resolve) => {
  1002. const delay = 30; // 打字延迟时间
  1003. let i = 0;
  1004. message.displayContent = ""; // 确保开始时是空的
  1005. const typeChar = () => {
  1006. if (i < message.content.length) {
  1007. message.displayContent = message.content.substring(0, i + 1);
  1008. i++;
  1009. nextTick(() => {
  1010. scrollToBottom();
  1011. setTimeout(typeChar, delay);
  1012. });
  1013. } else {
  1014. resolve();
  1015. }
  1016. };
  1017. typeChar();
  1018. });
  1019. };
  1020. // 模拟API请求
  1021. const mockApiRequest = async (message) => {
  1022. await new Promise((resolve) => setTimeout(resolve, 1000));
  1023. return `This is a response to: ${message}`;
  1024. };
  1025. // 会话管理
  1026. const addNewConversation = () => {
  1027. conversationCounter.value++;
  1028. const newConversation = {
  1029. id: Date.now(),
  1030. title: `New Conversation ${conversationCounter.value}`,
  1031. messages: [],
  1032. };
  1033. conversations.value.push(newConversation);
  1034. session_id.value = ""; // 重置 session_id
  1035. switchConversation(newConversation.id);
  1036. };
  1037. const switchConversation = (conversationId) => {
  1038. currentConversationId.value = conversationId;
  1039. const conversation = conversations.value.find((c) => c.id === conversationId);
  1040. messages.value = conversation ? conversation.messages : [];
  1041. session_id.value = ""; // 重置 session_id
  1042. };
  1043. const handleFileDrop = async (event) => {
  1044. if (isUploading.value) return;
  1045. const files = Array.from(event.dataTransfer.files);
  1046. if (files.length === 0) return;
  1047. // 添加文件大小检查
  1048. const MAX_VIDEO_SIZE = 10 * 1024 * 1024; // 10MB in bytes
  1049. const invalidFiles = files.filter((file) => {
  1050. if (isVideoFile(file) && file.size > MAX_VIDEO_SIZE) {
  1051. return true;
  1052. }
  1053. return false;
  1054. });
  1055. isUploading.value = true;
  1056. try {
  1057. for (const file of files) {
  1058. const fileWithStatus = {
  1059. name: file.name,
  1060. size: file.size,
  1061. sizeFormatted: formatFileSize(file.size),
  1062. type: file.type,
  1063. isUploading: true,
  1064. };
  1065. attachedFiles.value.push(fileWithStatus);
  1066. try {
  1067. const url = await uploadFile(file);
  1068. // 直接修改数组中的对象
  1069. const index = attachedFiles.value.findIndex(
  1070. (f) => f.name === file.name
  1071. );
  1072. if (index !== -1) {
  1073. // 使用数组替换方式更新,确保响应式更新
  1074. attachedFiles.value.splice(index, 1, {
  1075. ...fileWithStatus,
  1076. url,
  1077. isUploading: false,
  1078. });
  1079. }
  1080. } catch (error) {
  1081. attachedFiles.value = attachedFiles.value.filter(
  1082. (f) => f.name !== file.name
  1083. );
  1084. console.error("单个文件上传失败:", error);
  1085. }
  1086. }
  1087. } catch (error) {
  1088. console.error("文件上传失败:", error);
  1089. } finally {
  1090. isUploading.value = false;
  1091. }
  1092. if (files.length > 0 && enableWebSearch.value) {
  1093. enableWebSearch.value = false; // 如果有文件上传,自动关闭互联网搜索
  1094. }
  1095. };
  1096. // 添加音频点击处理方法
  1097. const handleAudioClick = (message) => {
  1098. if (currentPlayingId.value === message.id) {
  1099. stopAudio();
  1100. } else {
  1101. playAudioMessage(message.audioData, message.id);
  1102. }
  1103. };
  1104. // 修改音频播放方法
  1105. const playAudioMessage = async (audioBase64, messageId) => {
  1106. try {
  1107. // 停止当前播放的音频
  1108. stopAudio();
  1109. // 创建新的音频元素
  1110. const audio = new Audio(audioBase64);
  1111. audioPlayer.value = audio;
  1112. currentPlayingId.value = messageId;
  1113. // 添加事件监听
  1114. audio.addEventListener("ended", () => {
  1115. stopAudio();
  1116. });
  1117. audio.addEventListener("error", (e) => {
  1118. console.error("音频播放错误:", e);
  1119. stopAudio();
  1120. });
  1121. // 播放音频
  1122. await audio.play();
  1123. isPlaying.value = true;
  1124. } catch (error) {
  1125. console.error("音频播放失败:", error);
  1126. stopAudio();
  1127. }
  1128. };
  1129. // 修改停止播放方法
  1130. const stopAudio = () => {
  1131. if (audioPlayer.value) {
  1132. audioPlayer.value.pause();
  1133. audioPlayer.value = null;
  1134. }
  1135. isPlaying.value = false;
  1136. currentPlayingId.value = null;
  1137. };
  1138. // 在组件卸载时清理
  1139. onUnmounted(() => {
  1140. stopAudio();
  1141. });
  1142. // 添加 renderMarkdown 方法
  1143. const renderMarkdown = (content) => {
  1144. if (!content) return "";
  1145. return md.render(content);
  1146. };
  1147. // 添加新的响应式变量
  1148. const rightMenuWidth = ref(600); // 默认宽度
  1149. const minWidth = 0; // 最小宽度
  1150. const maxWidth = 800; // 最大宽度
  1151. // 添加拖动相关方法
  1152. const startResize = (e) => {
  1153. e.preventDefault();
  1154. const startX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
  1155. const startWidth = rightMenuWidth.value;
  1156. const handleMove = (e) => {
  1157. if (isRightMenuCollapsed.value) return;
  1158. const currentX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
  1159. const diff = startX - currentX;
  1160. let newWidth = Math.min(Math.max(startWidth + diff, minWidth), maxWidth);
  1161. rightMenuWidth.value = newWidth;
  1162. // 更新聊天区域的右边距和按钮位置
  1163. if (document.querySelector('.chat')) {
  1164. document.querySelector('.chat').style.right = `${newWidth}px`;
  1165. }
  1166. };
  1167. const handleEnd = () => {
  1168. document.removeEventListener('mousemove', handleMove);
  1169. document.removeEventListener('mouseup', handleEnd);
  1170. document.removeEventListener('touchmove', handleMove);
  1171. document.removeEventListener('touchend', handleEnd);
  1172. };
  1173. document.addEventListener('mousemove', handleMove);
  1174. document.addEventListener('mouseup', handleEnd);
  1175. document.addEventListener('touchmove', handleMove);
  1176. document.addEventListener('touchend', handleEnd);
  1177. };
  1178. // 添加搜索开关状态
  1179. const isSearchEnabled = ref(true);
  1180. // 添加切换搜索方法
  1181. const toggleSearch = () => {
  1182. isSearchEnabled.value = !isSearchEnabled.value;
  1183. };
  1184. // 修改 toggleWebSearch 方法
  1185. const toggleWebSearch = () => {
  1186. enableWebSearch.value = !enableWebSearch.value;
  1187. isSearchEnabled.value = enableWebSearch.value;
  1188. // 当关闭搜索时,自动折叠右侧菜单
  1189. if (!enableWebSearch.value) {
  1190. isRightMenuCollapsed.value = true;
  1191. currentSearchQuery.value = '';
  1192. if (document.querySelector('.chat')) {
  1193. document.querySelector('.chat').style.right = '0';
  1194. }
  1195. } else if (inputContent.value.trim()) {
  1196. isRightMenuCollapsed.value = false;
  1197. currentSearchQuery.value = inputContent.value;
  1198. if (document.querySelector('.chat')) {
  1199. document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
  1200. }
  1201. }
  1202. };
  1203. // 添加新的响应式变量
  1204. const currentSearchQuery = ref('');
  1205. // 添加输入变化处理方法
  1206. const handleInputChange = () => {
  1207. if (enableWebSearch.value && inputContent.value.trim()) {
  1208. currentSearchQuery.value = inputContent.value;
  1209. }
  1210. };
  1211. // 添加处理搜索开关的方法
  1212. const handleSearchToggle = (value) => {
  1213. enableWebSearch.value = value;
  1214. isSearchEnabled.value = value;
  1215. // 当关闭搜索时,自动折叠右侧菜单
  1216. if (!value) {
  1217. isRightMenuCollapsed.value = true;
  1218. // 更新聊天区域的样式
  1219. if (document.querySelector('.chat')) {
  1220. document.querySelector('.chat').style.right = '0';
  1221. }
  1222. } else {
  1223. isRightMenuCollapsed.value = false;
  1224. // 展开时更新聊天区域的样式
  1225. if (document.querySelector('.chat')) {
  1226. document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
  1227. }
  1228. }
  1229. };
  1230. // 添加新的响应式变量
  1231. const activeTab = ref('search'); // 默认显示搜索面板
  1232. // 处理文档选择
  1233. const handleDocumentSelect = (document) => {
  1234. // 处理文档选择逻辑
  1235. console.log('Selected document:', document);
  1236. };
  1237. </script>
  1238. <style scoped>
  1239. .layout {
  1240. display: flex;
  1241. width: 100%;
  1242. height: 100vh;
  1243. overflow: hidden;
  1244. position: relative;
  1245. }
  1246. .menu {
  1247. background: #f7f7f8;
  1248. width: 260px;
  1249. height: 100%;
  1250. display: flex;
  1251. flex-direction: column;
  1252. border-right: 1px solid rgba(0, 0, 0, 0.06);
  1253. position: absolute;
  1254. left: 0;
  1255. transform: translateX(0);
  1256. transition: transform 0.3s ease;
  1257. z-index: 2;
  1258. }
  1259. .menu.collapsed {
  1260. transform: translateX(-260px);
  1261. width: 260px;
  1262. }
  1263. .conversations {
  1264. padding: 0 12px;
  1265. flex: 1;
  1266. overflow-y: auto;
  1267. }
  1268. .chat {
  1269. flex: 1;
  1270. padding: 24px;
  1271. display: flex;
  1272. flex-direction: column;
  1273. gap: 24px;
  1274. overflow-y: auto;
  1275. overflow-x: hidden;
  1276. margin-left: 0;
  1277. margin-right: 0;
  1278. transition: margin 0.3s ease;
  1279. position: absolute;
  1280. left: 0;
  1281. right: 0;
  1282. top: 0;
  1283. bottom: 0;
  1284. }
  1285. .menu:not(.collapsed) + .chat {
  1286. left: 260px;
  1287. }
  1288. .chat {
  1289. right: 0;
  1290. transition: left 0.3s ease, right 0.3s ease;
  1291. }
  1292. .layout:has(.right_menu:not(.collapsed)) .chat {
  1293. right: 600px;
  1294. }
  1295. .right_menu:not(.collapsed) ~ .chat {
  1296. right: 600px;
  1297. }
  1298. .messages {
  1299. flex: 1;
  1300. overflow-y: auto;
  1301. padding-right: 16px;
  1302. }
  1303. .sender {
  1304. box-shadow: none;
  1305. border: 1px solid #e5e6eb;
  1306. border-radius: 8px;
  1307. padding: 8px;
  1308. }
  1309. .logo {
  1310. height: 64px;
  1311. display: flex;
  1312. align-items: center;
  1313. padding: 0 20px;
  1314. }
  1315. .logo-img {
  1316. width: 24px;
  1317. height: 24px;
  1318. }
  1319. .logo span {
  1320. margin-left: 12px;
  1321. font-size: 16px;
  1322. font-weight: 600;
  1323. color: rgba(0, 0, 0, 0.88);
  1324. }
  1325. .new-conversation-btn {
  1326. margin: 0 12px 12px;
  1327. height: 40px;
  1328. background: rgba(235, 245, 255, 0.7);
  1329. border: none;
  1330. border-radius: 8px;
  1331. color: #1677ff;
  1332. font-size: 14px;
  1333. display: flex;
  1334. align-items: center;
  1335. justify-content: center;
  1336. gap: 8px;
  1337. cursor: pointer;
  1338. transition: background-color 0.2s;
  1339. }
  1340. .new-conversation-btn:hover {
  1341. background: rgba(235, 245, 255, 0.9);
  1342. }
  1343. .conversation-list {
  1344. flex: 1;
  1345. padding: 0 8px;
  1346. overflow-y: auto;
  1347. }
  1348. .conversation-item {
  1349. padding: 12px;
  1350. margin: 4px 0;
  1351. border-radius: 8px;
  1352. color: rgba(0, 0, 0, 0.88);
  1353. font-size: 14px;
  1354. cursor: pointer;
  1355. transition: background-color 0.2s;
  1356. }
  1357. .conversation-item:hover {
  1358. background: rgba(0, 0, 0, 0.04);
  1359. }
  1360. .conversation-item.active {
  1361. background: #fff;
  1362. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  1363. }
  1364. .conversation-list::-webkit-scrollbar {
  1365. width: 4px;
  1366. }
  1367. .conversation-list::-webkit-scrollbar-thumb {
  1368. background: rgba(0, 0, 0, 0.15);
  1369. border-radius: 2px;
  1370. }
  1371. .conversation-list::-webkit-scrollbar-track {
  1372. background: transparent;
  1373. }
  1374. :deep(.welcome-message) {
  1375. background: #fff;
  1376. border-radius: 8px;
  1377. padding: 16px;
  1378. display: flex;
  1379. align-items: flex-start;
  1380. gap: 16px;
  1381. }
  1382. :deep(.welcome-message .title) {
  1383. font-size: 16px;
  1384. font-weight: 500;
  1385. color: rgba(0, 0, 0, 0.88);
  1386. margin-bottom: 4px;
  1387. }
  1388. :deep(.welcome-message .description) {
  1389. color: rgba(0, 0, 0, 0.45);
  1390. font-size: 14px;
  1391. }
  1392. :deep(.prompt-card) {
  1393. background: #f7f8fa;
  1394. border-radius: 8px;
  1395. padding: 16px;
  1396. margin-bottom: 12px;
  1397. }
  1398. :deep(.prompt-card-title) {
  1399. font-size: 16px;
  1400. font-weight: 500;
  1401. margin-bottom: 8px;
  1402. display: flex;
  1403. align-items: center;
  1404. gap: 8px;
  1405. }
  1406. :deep(.prompt-option) {
  1407. background: #f5f5f5;
  1408. padding: 8px 12px;
  1409. border-radius: 4px;
  1410. margin-top: 8px;
  1411. cursor: pointer;
  1412. transition: background 0.3s;
  1413. }
  1414. :deep(.prompt-option:hover) {
  1415. background: #e8e8e8;
  1416. }
  1417. .input-container {
  1418. width: 50%;
  1419. margin: auto auto 0;
  1420. display: flex;
  1421. flex-direction: column;
  1422. gap: 8px;
  1423. }
  1424. .tabs-wrapper {
  1425. display: flex;
  1426. gap: 8px;
  1427. margin-bottom: 4px;
  1428. }
  1429. .tab-item {
  1430. display: flex;
  1431. align-items: center;
  1432. gap: 6px;
  1433. padding: 4px 12px;
  1434. border-radius: 4px;
  1435. cursor: pointer;
  1436. font-size: 14px;
  1437. color: rgba(0, 0, 0, 0.88);
  1438. background: transparent;
  1439. transition: background-color 0.2s;
  1440. }
  1441. .tab-item:hover {
  1442. background: rgba(0, 0, 0, 0.04);
  1443. }
  1444. .tab-item.active {
  1445. background: #f5f5f5;
  1446. }
  1447. .tab-item .anticon {
  1448. font-size: 14px;
  1449. }
  1450. .input-wrapper {
  1451. display: flex;
  1452. align-items: center;
  1453. padding: 8px 12px;
  1454. border: 1px solid #e5e6eb;
  1455. border-radius: 8px;
  1456. background: white;
  1457. }
  1458. .message-input {
  1459. flex: 1;
  1460. border: none;
  1461. outline: none;
  1462. padding: 8px;
  1463. font-size: 14px;
  1464. background: transparent;
  1465. }
  1466. .message-input::placeholder {
  1467. color: rgba(0, 0, 0, 0.45);
  1468. }
  1469. .attachment-btn,
  1470. .send-btn {
  1471. display: flex;
  1472. align-items: center;
  1473. justify-content: center;
  1474. width: 32px;
  1475. height: 32px;
  1476. border: none;
  1477. background: transparent;
  1478. cursor: pointer;
  1479. color: rgba(0, 0, 0, 0.45);
  1480. border-radius: 4px;
  1481. }
  1482. .attachment-btn:hover,
  1483. .send-btn:hover {
  1484. background: rgba(0, 0, 0, 0.04);
  1485. color: rgba(0, 0, 0, 0.88);
  1486. }
  1487. .attachments-panel {
  1488. background: white;
  1489. border-radius: 12px;
  1490. box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  1491. overflow: hidden;
  1492. }
  1493. .panel-content {
  1494. background: white;
  1495. }
  1496. .attachments-header {
  1497. padding: 12px 16px;
  1498. border-bottom: 1px solid #f0f0f0;
  1499. display: flex;
  1500. justify-content: space-between;
  1501. align-items: center;
  1502. }
  1503. .attachments-header span {
  1504. font-size: 14px;
  1505. font-weight: 500;
  1506. color: rgba(0, 0, 0, 0.88);
  1507. }
  1508. .close-btn {
  1509. border: none;
  1510. background: transparent;
  1511. cursor: pointer;
  1512. padding: 4px;
  1513. display: flex;
  1514. align-items: center;
  1515. justify-content: center;
  1516. color: rgba(0, 0, 0, 0.45);
  1517. }
  1518. .upload-area {
  1519. padding: 24px;
  1520. border-radius: 8px;
  1521. text-align: center;
  1522. cursor: pointer;
  1523. transition: all 0.3s;
  1524. }
  1525. .upload-area.has-files {
  1526. padding: 12px;
  1527. background: #fff;
  1528. }
  1529. .upload-icon {
  1530. width: 32px;
  1531. height: 32px;
  1532. margin-bottom: 8px;
  1533. }
  1534. .upload-text {
  1535. font-size: 14px;
  1536. color: rgba(0, 0, 0, 0.88);
  1537. margin-bottom: 4px;
  1538. }
  1539. .upload-hint {
  1540. font-size: 12px;
  1541. color: rgba(0, 0, 0, 0.45);
  1542. }
  1543. .file-list {
  1544. display: flex;
  1545. flex-wrap: wrap;
  1546. gap: 8px;
  1547. padding: 10px;
  1548. }
  1549. .file-item {
  1550. position: relative;
  1551. width: 260px;
  1552. padding: 8px 12px;
  1553. margin: 4px 0;
  1554. background: #f5f5f5;
  1555. border-radius: 8px;
  1556. }
  1557. .file-item.is-image {
  1558. width: 68px;
  1559. padding: 0;
  1560. margin: 4px 0;
  1561. }
  1562. .file-wrapper {
  1563. position: relative;
  1564. width: 100%;
  1565. height: 100%;
  1566. }
  1567. .file-icon {
  1568. width: 68px;
  1569. height: 68px;
  1570. object-fit: cover;
  1571. border-radius: 4px;
  1572. }
  1573. .file-wrapper video.file-icon {
  1574. background: #000;
  1575. }
  1576. .remove-btn {
  1577. position: absolute;
  1578. top: -8px;
  1579. right: -8px;
  1580. width: 16px;
  1581. height: 16px;
  1582. padding: 0;
  1583. border: none;
  1584. background: #545454;
  1585. border-radius: 50%;
  1586. cursor: pointer;
  1587. display: flex;
  1588. align-items: center;
  1589. justify-content: center;
  1590. font-size: 14px;
  1591. line-height: 1;
  1592. color: #fff;
  1593. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  1594. }
  1595. .remove-btn:hover {
  1596. opacity: 0.8;
  1597. }
  1598. .file-info {
  1599. margin-top: 8px;
  1600. }
  1601. .file-name {
  1602. display: block;
  1603. max-width: 150px;
  1604. color: rgba(0, 0, 0, 0.88);
  1605. font-size: 14px;
  1606. white-space: nowrap;
  1607. overflow: hidden;
  1608. text-overflow: ellipsis;
  1609. }
  1610. .file-info .file-name {
  1611. max-width: 150px;
  1612. }
  1613. .file-name:hover {
  1614. cursor: pointer;
  1615. }
  1616. .file-size {
  1617. display: block;
  1618. color: rgba(0, 0, 0, 0.45);
  1619. font-size: 12px;
  1620. margin-top: 4px;
  1621. }
  1622. .add-more-btn {
  1623. display: flex;
  1624. align-items: center;
  1625. justify-content: center;
  1626. width: 68px;
  1627. height: 68px;
  1628. border: 1px dashed #d9d9d9;
  1629. border-radius: 6px;
  1630. background: transparent;
  1631. cursor: pointer;
  1632. transition: all 0.3s;
  1633. margin: 4px 0;
  1634. }
  1635. .add-more-btn:hover {
  1636. border-color: #1677ff;
  1637. background: #f0f7ff;
  1638. }
  1639. /* 欢迎区域样式 */
  1640. .welcome-section {
  1641. max-width: 800px;
  1642. margin: 0 auto;
  1643. width: 50%;
  1644. }
  1645. .welcome-header {
  1646. display: flex;
  1647. align-items: flex-start;
  1648. gap: 16px;
  1649. margin-bottom: 24px;
  1650. }
  1651. .avatar {
  1652. width: 40px;
  1653. height: 40px;
  1654. border-radius: 50%;
  1655. }
  1656. .welcome-info {
  1657. flex: 1;
  1658. }
  1659. .welcome-info h2 {
  1660. font-size: 20px;
  1661. font-weight: 500;
  1662. color: rgba(0, 0, 0, 0.88);
  1663. margin: 0 0 4px 0;
  1664. }
  1665. .welcome-info p {
  1666. font-size: 14px;
  1667. color: rgba(0, 0, 0, 0.45);
  1668. margin: 0;
  1669. }
  1670. .action-buttons {
  1671. display: flex;
  1672. gap: 8px;
  1673. }
  1674. .icon-btn {
  1675. padding: 8px;
  1676. border: none;
  1677. background: transparent;
  1678. cursor: pointer;
  1679. color: rgba(0, 0, 0, 0.45);
  1680. }
  1681. /* 建议区域样式 */
  1682. .suggestion-section {
  1683. margin-top: 32px;
  1684. }
  1685. .suggestion-section h3 {
  1686. font-size: 14px;
  1687. color: rgba(0, 0, 0, 0.45);
  1688. margin-bottom: 16px;
  1689. }
  1690. .cards-container {
  1691. display: flex;
  1692. gap: 16px;
  1693. }
  1694. .suggestion-card {
  1695. flex: 1;
  1696. border-radius: 8px;
  1697. padding: 16px;
  1698. background: #ffffff; /* 替换 var(--ant-color-bg-container) */
  1699. border-radius: 8px; /* 替换 var(--ant-border-radius-lg) */
  1700. transition: border 0.3s, background 0.3s; /* 替换 var(--ant-motion-duration-slow) */
  1701. border: 1px solid #f0f0f0; /* 替换合的 border 属性 */
  1702. }
  1703. :root {
  1704. --ant-color-bg-container: #ffffff;
  1705. --ant-border-radius-lg: 8px;
  1706. --ant-motion-duration-slow: 0.3s;
  1707. --ant-line-width: 1px;
  1708. --ant-line-type: solid;
  1709. --ant-color-border-secondary: #f0f0f0;
  1710. }
  1711. .card-header {
  1712. display: flex;
  1713. align-items: center;
  1714. gap: 8px;
  1715. margin-bottom: 8px;
  1716. }
  1717. .card-header h4 {
  1718. font-size: 16px;
  1719. font-weight: 500;
  1720. color: rgba(0, 0, 0, 0.88);
  1721. margin: 0;
  1722. }
  1723. .icon.red {
  1724. color: #ff4d4f;
  1725. }
  1726. .icon.blue {
  1727. color: #1890ff;
  1728. }
  1729. .card-subtitle {
  1730. font-size: 14px;
  1731. color: rgba(0, 0, 0, 0.45);
  1732. margin-bottom: 16px;
  1733. }
  1734. .suggestion-items {
  1735. display: flex;
  1736. flex-direction: column;
  1737. gap: 8px;
  1738. }
  1739. .suggestion-item {
  1740. padding: 8px 12px;
  1741. background: #f5f5f5;
  1742. border-radius: 4px;
  1743. font-size: 12px;
  1744. color: rgba(0, 0, 0, 0.88);
  1745. display: flex;
  1746. align-items: center;
  1747. gap: 8px;
  1748. cursor: pointer;
  1749. transition: opacity 0.3s ease;
  1750. }
  1751. .suggestion-item:hover {
  1752. background: #e8e8e8;
  1753. }
  1754. .tab-icon {
  1755. width: 16px;
  1756. }
  1757. .attached-files {
  1758. padding: 16px;
  1759. }
  1760. .file-item {
  1761. display: flex;
  1762. align-items: center;
  1763. gap: 8px;
  1764. padding: 8px;
  1765. border-radius: 4px;
  1766. }
  1767. .file-item:hover {
  1768. background: #f5f5f5;
  1769. }
  1770. .remove-btn {
  1771. margin-left: auto;
  1772. padding: 4px;
  1773. border: none;
  1774. background: transparent;
  1775. cursor: pointer;
  1776. color: rgba(0, 0, 0, 0.45);
  1777. }
  1778. .remove-btn:hover {
  1779. color: rgba(0, 0, 0, 0.88);
  1780. }
  1781. .send-btn:disabled {
  1782. opacity: 0.5;
  1783. cursor: not-allowed;
  1784. }
  1785. .upload-area {
  1786. /* border: 2px dashed #d9d9d9; */
  1787. border-radius: 8px;
  1788. padding: 20px;
  1789. text-align: center;
  1790. cursor: pointer;
  1791. transition: border-color 0.3s;
  1792. }
  1793. /* .upload-area:hover,
  1794. .upload-area.drag-over {
  1795. border-color: #1677ff;
  1796. } */
  1797. .file-item {
  1798. display: flex;
  1799. align-items: center;
  1800. width: 236px;
  1801. height: 68px;
  1802. padding: 0;
  1803. margin: 4px 0;
  1804. background: #f5f5f5;
  1805. border-radius: 4px;
  1806. }
  1807. .file-item .remove-btn {
  1808. margin-left: auto;
  1809. padding: 4px 8px;
  1810. background: transparent;
  1811. border: none;
  1812. cursor: pointer;
  1813. }
  1814. /* 聊天内容显示框 */
  1815. .message-list {
  1816. width: 60%;
  1817. overflow-y: auto;
  1818. overflow-x: hidden;
  1819. padding: 20px;
  1820. display: flex;
  1821. flex-direction: column;
  1822. gap: 16px;
  1823. margin: 0 auto;
  1824. }
  1825. .message-item {
  1826. display: flex;
  1827. margin-bottom: 12px;
  1828. }
  1829. /* 用户消息靠右显示 */
  1830. .user {
  1831. display: flex;
  1832. justify-content: flex-end;
  1833. }
  1834. .message-bubble {
  1835. max-width: 80%;
  1836. padding: 12px 16px;
  1837. border-radius: 12px;
  1838. background: #fff;
  1839. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  1840. }
  1841. /* 用户消息的气泡样式 */
  1842. .user .message-bubble {
  1843. background: #fff;
  1844. color: rgba(0, 0, 0, 0.88);
  1845. }
  1846. /* AI消息的气泡样式 */
  1847. .assistant .message-bubble {
  1848. background: #f7f7f8;
  1849. color: rgba(0, 0, 0, 0.88);
  1850. }
  1851. .message-content {
  1852. font-size: 14px;
  1853. line-height: 1.5;
  1854. white-space: pre-wrap;
  1855. word-break: break-word;
  1856. }
  1857. .right_menu {
  1858. /* 修改现有样式 */
  1859. position: absolute;
  1860. right: 0;
  1861. height: 100%;
  1862. background: #f7f7f8;
  1863. border-left: 1px solid rgba(0, 0, 0, 0.06);
  1864. transform: translateX(0);
  1865. transition: transform 0.3s ease, width 0.3s ease;
  1866. z-index: 2;
  1867. }
  1868. .right_menu.collapsed {
  1869. transform: translateX(100%);
  1870. width: 0;
  1871. }
  1872. /* 当右侧菜单展开时,给聊天区域添加右边距 */
  1873. .right_menu:not(.collapsed) + .chat {
  1874. margin-right: 600px;
  1875. }
  1876. .collapse-left-button{
  1877. position: absolute;
  1878. left: 260px;
  1879. top: 50%;
  1880. transform: translateY(-50%);
  1881. width: 20px;
  1882. height: 40px;
  1883. background: #fff;
  1884. border: 1px solid rgba(0, 0, 0, 0.06);
  1885. border-right: none;
  1886. border-radius: 4px 0 0 4px;
  1887. display: flex;
  1888. align-items: center;
  1889. justify-content: center;
  1890. cursor: pointer;
  1891. z-index: 2;
  1892. transition: left 0.3s ease;
  1893. }
  1894. .collapse-left-button.menu-collapsed {
  1895. left: 260px;
  1896. /* border-right: 1px solid rgba(0, 0, 0, 0.06);
  1897. border-left: none;
  1898. border-radius: 0 4px 4px 0; */
  1899. }
  1900. .collapse-button {
  1901. position: absolute;
  1902. left: -20px;
  1903. top: 50%;
  1904. transform: translateY(-50%);
  1905. width: 20px;
  1906. height: 40px;
  1907. background: #fff;
  1908. border: 1px solid rgba(0, 0, 0, 0.06);
  1909. border-right: none;
  1910. border-radius: 4px 0 0 4px;
  1911. display: flex;
  1912. align-items: center;
  1913. justify-content: center;
  1914. cursor: pointer;
  1915. z-index: 3;
  1916. transition: left 0.3s ease;
  1917. }
  1918. /* 添加展开状态的样式 */
  1919. .collapse-button.menu-expanded {
  1920. border-right: 1px solid rgba(0, 0, 0, 0.06);
  1921. border-left: none;
  1922. border-radius: 0 4px 4px 0;
  1923. }
  1924. .collapse-button:hover {
  1925. background: #f5f5f5;
  1926. }
  1927. .collapse-icon {
  1928. width: 12px;
  1929. height: 12px;
  1930. }
  1931. .right-menu-content {
  1932. height: 100%;
  1933. overflow-y: auto;
  1934. }
  1935. .right_menu.collapsed .right-menu-content {
  1936. display: none;
  1937. }
  1938. /* 添加打字效果的光标样式 */
  1939. /* .assistant .message-content {
  1940. position: relative;
  1941. }
  1942. .assistant .message-content::after {
  1943. content: '|';
  1944. position: absolute;
  1945. margin-left: 2px;
  1946. animation: cursor-blink 1s infinite;
  1947. }
  1948. @keyframes cursor-blink {
  1949. 0%, 100% { opacity: 1; }
  1950. 50% { opacity: 0; }
  1951. }*/
  1952. .file-message {
  1953. background: #f7f7f8;
  1954. border-radius: 8px;
  1955. padding: 12px;
  1956. margin-bottom: 8px;
  1957. }
  1958. .file-info-display {
  1959. display: flex;
  1960. align-items: center;
  1961. gap: 12px;
  1962. margin-bottom: 8px;
  1963. }
  1964. .file-type-icon {
  1965. width: 24px;
  1966. height: 24px;
  1967. object-fit: contain;
  1968. }
  1969. .file-details {
  1970. display: flex;
  1971. flex-direction: column;
  1972. }
  1973. /* .file-name {
  1974. font-size: 14px;
  1975. color: rgba(0, 0, 0, 0.88);
  1976. margin-bottom: 4px;
  1977. } */
  1978. .file-size {
  1979. font-size: 12px;
  1980. color: rgba(0, 0, 0, 0.45);
  1981. }
  1982. .file-action {
  1983. font-size: 12px;
  1984. color: rgba(0, 0, 0, 0.45);
  1985. padding-left: 36px;
  1986. }
  1987. /* 修改用户消息气泡样式,确保文件信息正确显示 */
  1988. .user .message-bubble {
  1989. background: #fff;
  1990. color: rgba(0, 0, 0, 0.88);
  1991. }
  1992. .user .file-message {
  1993. background: #f7f7f8;
  1994. }
  1995. /* 图片预览样式 */
  1996. .image-preview {
  1997. position: relative;
  1998. width: 200px;
  1999. border-radius: 8px;
  2000. overflow: hidden;
  2001. background: #fff;
  2002. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  2003. }
  2004. .preview-image {
  2005. width: 100%;
  2006. height: auto;
  2007. display: block;
  2008. }
  2009. .image-info {
  2010. position: absolute;
  2011. bottom: 0;
  2012. left: 0;
  2013. right: 0;
  2014. padding: 8px;
  2015. background: rgba(255, 255, 255, 0.9);
  2016. font-size: 12px;
  2017. color: rgba(0, 0, 0, 0.45);
  2018. text-align: center;
  2019. border-top: 1px solid rgba(0, 0, 0, 0.06);
  2020. }
  2021. /* 文档显示样式保持不变 */
  2022. .file-info-display {
  2023. display: flex;
  2024. align-items: center;
  2025. gap: 12px;
  2026. margin-bottom: 8px;
  2027. }
  2028. .file-type-icon {
  2029. width: 24px;
  2030. height: 24px;
  2031. object-fit: contain;
  2032. }
  2033. .file-details {
  2034. display: flex;
  2035. flex-direction: column;
  2036. }
  2037. /* .file-name {
  2038. font-size: 14px;
  2039. color: rgba(0, 0, 0, 0.88);
  2040. margin-bottom: 4px;
  2041. } */
  2042. .file-size {
  2043. font-size: 12px;
  2044. color: rgba(0, 0, 0, 0.45);
  2045. }
  2046. .file-action {
  2047. font-size: 12px;
  2048. color: rgba(0, 0, 0, 0.45);
  2049. padding-left: 36px;
  2050. }
  2051. /* 添加音频控制相关样式 */
  2052. .audio-controls {
  2053. margin-top: 8px;
  2054. }
  2055. .audio-btn {
  2056. background: transparent;
  2057. border: none;
  2058. padding: 4px 8px;
  2059. cursor: pointer;
  2060. display: flex;
  2061. align-items: center;
  2062. justify-content: center;
  2063. border-radius: 4px;
  2064. transition: background-color 0.2s;
  2065. min-width: 32px;
  2066. height: 32px;
  2067. }
  2068. .audio-btn:hover {
  2069. background: rgba(0, 0, 0, 0.04);
  2070. }
  2071. .audio-icon {
  2072. width: 20px;
  2073. height: 20px;
  2074. }
  2075. /* 音频波形动画样式 */
  2076. .wave-animation {
  2077. display: flex;
  2078. align-items: center;
  2079. height: 20px;
  2080. gap: 2px;
  2081. }
  2082. .wave-bar {
  2083. display: inline-block;
  2084. width: 3px;
  2085. height: 100%;
  2086. background: #1677ff;
  2087. border-radius: 1px;
  2088. animation: wave 1s ease-in-out infinite;
  2089. }
  2090. .wave-bar:nth-child(1) {
  2091. animation-delay: 0s;
  2092. }
  2093. .wave-bar:nth-child(2) {
  2094. animation-delay: 0.2s;
  2095. }
  2096. .wave-bar:nth-child(3) {
  2097. animation-delay: 0.4s;
  2098. }
  2099. .wave-bar:nth-child(4) {
  2100. animation-delay: 0.6s;
  2101. }
  2102. @keyframes wave {
  2103. 0%,
  2104. 100% {
  2105. height: 6px;
  2106. }
  2107. 50% {
  2108. height: 18px;
  2109. }
  2110. }
  2111. .audio-btn {
  2112. background: transparent;
  2113. border: none;
  2114. padding: 4px 8px;
  2115. cursor: pointer;
  2116. display: flex;
  2117. align-items: center;
  2118. justify-content: center;
  2119. border-radius: 4px;
  2120. transition: background-color 0.2s;
  2121. min-width: 32px;
  2122. height: 32px;
  2123. }
  2124. .audio-btn:hover {
  2125. background: rgba(0, 0, 0, 0.04);
  2126. }
  2127. .audio-icon {
  2128. width: 20px;
  2129. height: 20px;
  2130. }
  2131. .message-text {
  2132. margin: 0;
  2133. white-space: normal; /* 确保文本会换行 */
  2134. word-wrap: break-word; /* 长单词或 URL 会被断开以适应容器宽度 */
  2135. overflow: auto;
  2136. font-size: 12px;
  2137. line-height: 20px;
  2138. }
  2139. .message-text ::v-deep p {
  2140. font-size: 12px !important;
  2141. margin: 5px 0 10px;
  2142. padding: 0;
  2143. font-size: inherit;
  2144. line-height: 22px;
  2145. font-weight: inherit;
  2146. }
  2147. .message-text ::v-deep ol {
  2148. padding-bottom: 10px;
  2149. }
  2150. .message-text ::v-deep .source-section h3 {
  2151. margin: 20px 0 3px;
  2152. color: #333;
  2153. font-size: 16px;
  2154. }
  2155. .message-text ::v-deep ol li {
  2156. padding-top: 3px;
  2157. }
  2158. .message-text ::v-deep ol li a {
  2159. font-size: 14px;
  2160. color: #1296db;
  2161. }
  2162. .video-preview {
  2163. position: relative;
  2164. width: 300px;
  2165. border-radius: 8px;
  2166. overflow: hidden;
  2167. background: #fff;
  2168. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  2169. margin-bottom: 8px;
  2170. }
  2171. .preview-video {
  2172. width: 100%;
  2173. height: auto;
  2174. display: block;
  2175. max-height: 300px;
  2176. }
  2177. /* 添加 loading 相关样式 */
  2178. .upload-loading {
  2179. display: flex;
  2180. flex-direction: column;
  2181. align-items: center;
  2182. gap: 12px;
  2183. }
  2184. .loading-spinner {
  2185. width: 24px;
  2186. height: 24px;
  2187. border: 2px solid #f3f3f3;
  2188. border-top: 2px solid #1677ff;
  2189. border-radius: 50%;
  2190. animation: spin 1s linear infinite;
  2191. }
  2192. .file-loading {
  2193. position: absolute;
  2194. top: 0;
  2195. left: 0;
  2196. right: 0;
  2197. bottom: 0;
  2198. background: rgba(255, 255, 255, 0.8);
  2199. display: flex;
  2200. align-items: center;
  2201. justify-content: center;
  2202. z-index: 1;
  2203. }
  2204. @keyframes spin {
  2205. 0% {
  2206. transform: rotate(0deg);
  2207. }
  2208. 100% {
  2209. transform: rotate(360deg);
  2210. }
  2211. }
  2212. /* 上传区域在上传时的样式 */
  2213. .upload-area {
  2214. position: relative;
  2215. cursor: pointer; /* 始终保持指针样式 */
  2216. }
  2217. .upload-area.uploading {
  2218. opacity: 0.7;
  2219. }
  2220. /* 添加配置容器的样式 */
  2221. .config-container {
  2222. margin-top: auto;
  2223. border-top: 1px solid rgba(0, 0, 0, 0.06);
  2224. }
  2225. .web-search-toggle {
  2226. display: flex;
  2227. align-items: center;
  2228. /* margin-left: auto; */
  2229. padding: 0 12px;
  2230. }
  2231. .toggle-input {
  2232. position: relative;
  2233. width: 36px;
  2234. height: 20px;
  2235. margin-right: 8px;
  2236. appearance: none;
  2237. background: #ccc;
  2238. border-radius: 10px;
  2239. cursor: pointer;
  2240. transition: background 0.3s;
  2241. }
  2242. .toggle-input:checked {
  2243. background: #1677ff;
  2244. }
  2245. .toggle-input::before {
  2246. content: "";
  2247. position: absolute;
  2248. top: 2px;
  2249. left: 2px;
  2250. width: 16px;
  2251. height: 16px;
  2252. background: white;
  2253. border-radius: 50%;
  2254. transition: transform 0.3s;
  2255. }
  2256. .toggle-input:checked::before {
  2257. transform: translateX(16px);
  2258. }
  2259. .toggle-label {
  2260. font-size: 14px;
  2261. color: rgba(0, 0, 0, 0.88);
  2262. cursor: pointer;
  2263. }
  2264. .toggle-input:disabled {
  2265. opacity: 0.5;
  2266. cursor: not-allowed;
  2267. }
  2268. .toggle-label.disabled {
  2269. color: rgba(0, 0, 0, 0.45);
  2270. cursor: not-allowed;
  2271. }
  2272. .disabled-hint {
  2273. font-size: 12px;
  2274. color: rgba(0, 0, 0, 0.45);
  2275. margin-left: 4px;
  2276. }
  2277. /* 添加菜单收缩相关样式 */
  2278. .menu {
  2279. /* 现有样式保持不变 */
  2280. transition: width 0.3s ease;
  2281. position: relative;
  2282. }
  2283. .menu.collapsed {
  2284. width: 0;
  2285. padding: 0;
  2286. }
  2287. /* 添加收缩按钮样式 */
  2288. .collapse-button {
  2289. position: absolute;
  2290. right: -20px;
  2291. top: 50%;
  2292. transform: translateY(-50%);
  2293. width: 20px;
  2294. height: 40px;
  2295. background: #fff;
  2296. border: 1px solid rgba(0, 0, 0, 0.06);
  2297. border-left: none;
  2298. border-radius: 0 4px 4px 0;
  2299. display: flex;
  2300. align-items: center;
  2301. justify-content: center;
  2302. cursor: pointer;
  2303. z-index: 1;
  2304. }
  2305. .collapse-button:hover {
  2306. background: #f5f5f5;
  2307. }
  2308. .collapse-icon {
  2309. width: 12px;
  2310. height: 12px;
  2311. }
  2312. /* 添加响应式布局样式 */
  2313. @media screen and (max-width: 768px) {
  2314. .layout {
  2315. /* 移动端布局调整 */
  2316. flex-direction: column;
  2317. }
  2318. .menu {
  2319. /* 移动端菜单调整 */
  2320. position: fixed;
  2321. width: 100%;
  2322. height: 100%;
  2323. z-index: 1000;
  2324. transform: translateX(-100%);
  2325. }
  2326. .menu.collapsed {
  2327. transform: translateX(-100%);
  2328. }
  2329. .collapse-left-button {
  2330. /* 移动端收缩按钮调整 */
  2331. display: none;
  2332. }
  2333. .chat {
  2334. /* 移动端聊天区域调整 */
  2335. width: 100%;
  2336. margin: 0;
  2337. padding: 16px;
  2338. left: 0 !important;
  2339. right: 0 !important;
  2340. }
  2341. .message-list {
  2342. /* 移动端消息列表调整 */
  2343. width: 100%;
  2344. padding: 10px;
  2345. }
  2346. .input-container {
  2347. /* 移动端输入区域调整 */
  2348. width: 100%;
  2349. padding: 10px;
  2350. }
  2351. .cards-container {
  2352. /* 移动端卡片容器调整 */
  2353. flex-direction: column;
  2354. }
  2355. .suggestion-card {
  2356. /* 移动端建议卡片调整 */
  2357. width: 100%;
  2358. }
  2359. .welcome-section {
  2360. /* 移动端欢迎区域调整 */
  2361. width: 100%;
  2362. padding: 16px;
  2363. }
  2364. .right_menu {
  2365. /* 移动端右侧菜单调整 */
  2366. position: fixed;
  2367. width: 100%;
  2368. height: 100%;
  2369. z-index: 1000;
  2370. }
  2371. .right_menu.collapsed {
  2372. transform: translateX(100%);
  2373. }
  2374. /* 移动端文件预览调整 */
  2375. .image-preview,
  2376. .video-preview {
  2377. width: 100%;
  2378. max-width: 300px;
  2379. }
  2380. /* 移动端文件列表调整 */
  2381. .file-list {
  2382. justify-content: center;
  2383. }
  2384. .file-item {
  2385. width: 100%;
  2386. max-width: 300px;
  2387. }
  2388. /* 移动端标签栏调整 */
  2389. .tabs-wrapper {
  2390. flex-wrap: wrap;
  2391. gap: 4px;
  2392. }
  2393. .web-search-toggle {
  2394. width: 100%;
  2395. justify-content: flex-start;
  2396. margin-top: 8px;
  2397. }
  2398. /* 移动端消息气泡调整 */
  2399. .message-bubble {
  2400. max-width: 90%;
  2401. }
  2402. .collapse-button {
  2403. left: -20px !important;
  2404. }
  2405. .collapse-button.menu-expanded {
  2406. left: auto !important;
  2407. right: 0;
  2408. }
  2409. }
  2410. /* 添加移动端手势支持 */
  2411. @media (hover: none) and (pointer: coarse) {
  2412. .menu {
  2413. /* 支持触摸滑动 */
  2414. touch-action: pan-y;
  2415. }
  2416. .message-list {
  2417. /* 支持触摸滚动 */
  2418. -webkit-overflow-scrolling: touch;
  2419. }
  2420. }
  2421. /* 优化移动端字体大小 */
  2422. @media screen and (max-width: 480px) {
  2423. .message-content {
  2424. font-size: 14px;
  2425. }
  2426. .suggestion-item {
  2427. font-size: 13px;
  2428. }
  2429. .file-name {
  2430. font-size: 13px;
  2431. }
  2432. }
  2433. /* 修改现有的响应式样式 */
  2434. @media screen and (max-width: 768px) {
  2435. .layout {
  2436. overflow-x: hidden;
  2437. }
  2438. .chat {
  2439. /* 调整聊天区域以保持一致的宽度 */
  2440. padding: 24px 16px;
  2441. margin: 0;
  2442. width: 100%;
  2443. }
  2444. .message-list {
  2445. /* 保持消息列表的宽度一致 */
  2446. width: 100%;
  2447. max-width: 800px;
  2448. margin: 0 auto;
  2449. padding: 0 10px;
  2450. }
  2451. .input-container {
  2452. /* 保持输入区域的宽度一致 */
  2453. width: 100%;
  2454. max-width: 800px;
  2455. margin: 0 auto;
  2456. padding: 0 10px;
  2457. }
  2458. .welcome-section {
  2459. /* 保持欢迎区域的宽度一致 */
  2460. width: 100%;
  2461. max-width: 800px;
  2462. margin: 0 auto;
  2463. padding: 0 16px;
  2464. }
  2465. .cards-container {
  2466. /* 保持卡片布局 */
  2467. flex-direction: row;
  2468. flex-wrap: wrap;
  2469. gap: 16px;
  2470. }
  2471. .suggestion-card {
  2472. /* 调整卡片大小 */
  2473. flex: 1 1 300px;
  2474. min-width: 300px;
  2475. }
  2476. .message-bubble {
  2477. /* 保持消息气泡的样式 */
  2478. max-width: 80%;
  2479. padding: 12px 16px;
  2480. }
  2481. /* 调整文件预览区域 */
  2482. .image-preview,
  2483. .video-preview {
  2484. width: 200px;
  2485. margin: 0 auto;
  2486. }
  2487. /* 调整文件列表布局 */
  2488. .file-list {
  2489. display: flex;
  2490. flex-wrap: wrap;
  2491. gap: 8px;
  2492. justify-content: flex-start;
  2493. }
  2494. .file-item {
  2495. width: calc(50% - 8px);
  2496. min-width: 200px;
  2497. }
  2498. /* 调整标签栏布局 */
  2499. .tabs-wrapper {
  2500. flex-wrap: nowrap;
  2501. overflow-x: auto;
  2502. -webkit-overflow-scrolling: touch;
  2503. padding-bottom: 8px;
  2504. }
  2505. /* 调整搜索开关位置 */
  2506. .web-search-toggle {
  2507. position: relative;
  2508. width: auto;
  2509. /* margin-left: auto; */
  2510. }
  2511. /* 调整菜单样式 */
  2512. .menu {
  2513. position: fixed;
  2514. left: 0;
  2515. top: 0;
  2516. bottom: 0;
  2517. width: 260px;
  2518. transform: translateX(-100%);
  2519. transition: transform 0.3s ease;
  2520. z-index: 1000;
  2521. }
  2522. .menu.collapsed {
  2523. transform: translateX(-100%);
  2524. }
  2525. .menu:not(.collapsed) {
  2526. transform: translateX(0);
  2527. }
  2528. /* 调整右侧菜单样式 */
  2529. .right_menu {
  2530. position: fixed;
  2531. right: 0;
  2532. top: 0;
  2533. bottom: 0;
  2534. width: 300px;
  2535. transform: translateX(100%);
  2536. transition: transform 0.3s ease;
  2537. z-index: 1000;
  2538. }
  2539. .right_menu.collapsed {
  2540. transform: translateX(100%);
  2541. }
  2542. .right_menu:not(.collapsed) {
  2543. transform: translateX(0);
  2544. }
  2545. /* 添加遮罩层样式 */
  2546. .menu-overlay {
  2547. position: fixed;
  2548. top: 0;
  2549. left: 0;
  2550. right: 0;
  2551. bottom: 0;
  2552. background: rgba(0, 0, 0, 0.5);
  2553. z-index: 999;
  2554. display: none;
  2555. }
  2556. .menu:not(.collapsed) ~ .menu-overlay,
  2557. .right_menu:not(.collapsed) ~ .menu-overlay {
  2558. display: block;
  2559. }
  2560. }
  2561. /* 添加更细致的断点控制 */
  2562. @media screen and (max-width: 480px) {
  2563. .message-content {
  2564. font-size: 14px;
  2565. line-height: 1.5;
  2566. }
  2567. .suggestion-item {
  2568. font-size: 14px;
  2569. padding: 10px;
  2570. }
  2571. .input-wrapper {
  2572. padding: 8px;
  2573. }
  2574. .message-input {
  2575. font-size: 14px;
  2576. }
  2577. }
  2578. /* 确保滚动流畅 */
  2579. * {
  2580. -webkit-overflow-scrolling: touch;
  2581. }
  2582. /* 防止页面横向滚动 */
  2583. body {
  2584. overflow-x: hidden;
  2585. width: 100%;
  2586. }
  2587. /* 优化触摸体验 */
  2588. button,
  2589. .suggestion-item,
  2590. .conversation-item {
  2591. touch-action: manipulation;
  2592. }
  2593. /* 添加拖动条样式 */
  2594. .resize-handle {
  2595. position: absolute;
  2596. left: -5px;
  2597. top: 0;
  2598. width: 10px;
  2599. height: 100%;
  2600. cursor: col-resize;
  2601. background: transparent;
  2602. z-index: 3;
  2603. }
  2604. .resize-handle:hover {
  2605. background: rgba(0, 0, 0, 0.1);
  2606. }
  2607. /* 确保拖动时不会选中文本 */
  2608. .resize-handle:active {
  2609. user-select: none;
  2610. }
  2611. /* 移动端样式调整 */
  2612. @media screen and (max-width: 768px) {
  2613. .resize-handle {
  2614. display: none;
  2615. }
  2616. .right_menu {
  2617. width: 100% !important;
  2618. }
  2619. }
  2620. .search-header {
  2621. display: flex;
  2622. justify-content: space-between;
  2623. align-items: center;
  2624. padding: 16px;
  2625. border-bottom: 1px solid #f0f0f0;
  2626. }
  2627. .search-header span {
  2628. font-size: 16px;
  2629. font-weight: bold;
  2630. }
  2631. /* 添加开关样式 */
  2632. .web-search-toggle {
  2633. display: flex;
  2634. align-items: center;
  2635. }
  2636. .toggle-input {
  2637. position: relative;
  2638. width: 36px;
  2639. height: 20px;
  2640. margin-right: 8px;
  2641. appearance: none;
  2642. background: #ccc;
  2643. border-radius: 10px;
  2644. cursor: pointer;
  2645. transition: background 0.3s;
  2646. }
  2647. .toggle-input:checked {
  2648. background: #1677ff;
  2649. }
  2650. .toggle-input::before {
  2651. content: "";
  2652. position: absolute;
  2653. top: 2px;
  2654. left: 2px;
  2655. width: 16px;
  2656. height: 16px;
  2657. background: white;
  2658. border-radius: 50%;
  2659. transition: transform 0.3s;
  2660. }
  2661. .toggle-input:checked::before {
  2662. transform: translateX(16px);
  2663. }
  2664. .toggle-label {
  2665. font-size: 14px;
  2666. color: rgba(0, 0, 0, 0.88);
  2667. cursor: pointer;
  2668. }
  2669. /* 添加 Tab 样式 */
  2670. .right-menu-tabs {
  2671. display: flex;
  2672. border-bottom: 1px solid #f0f0f0;
  2673. background: #fff;
  2674. }
  2675. .tab-item {
  2676. flex: 1;
  2677. padding: 12px;
  2678. display: flex;
  2679. align-items: center;
  2680. justify-content: center;
  2681. gap: 8px;
  2682. cursor: pointer;
  2683. transition: all 0.3s;
  2684. border-bottom: 2px solid transparent;
  2685. color: rgba(0, 0, 0, 0.65);
  2686. }
  2687. .tab-item:hover {
  2688. color: #1677ff;
  2689. }
  2690. .tab-item.active {
  2691. color: #1677ff;
  2692. border-bottom-color: #1677ff;
  2693. background: #f6f9fe;
  2694. }
  2695. .panel-container {
  2696. height: calc(100% - 45px); /* 减去 tab 的高度 */
  2697. overflow-y: auto;
  2698. }
  2699. /* 修改右侧菜单内容样式 */
  2700. .right-menu-content {
  2701. height: 100%;
  2702. display: flex;
  2703. flex-direction: column;
  2704. }
  2705. /* 预览面板样式 */
  2706. .preview-header {
  2707. padding: 16px;
  2708. border-bottom: 1px solid #f0f0f0;
  2709. font-size: 16px;
  2710. font-weight: bold;
  2711. }
  2712. </style>
  2713. <style lang="less" scoped>
  2714. ::v-deep .message-content {
  2715. /* 确保 scoped 样式能够渗透到动态生成的内容 */
  2716. h1,
  2717. h2,
  2718. h3,
  2719. h4,
  2720. h5,
  2721. h6 {
  2722. margin-top: 16px;
  2723. margin-bottom: 8px;
  2724. font-weight: 600;
  2725. }
  2726. p {
  2727. margin-bottom: 8px;
  2728. }
  2729. code {
  2730. background: #f5f5f5;
  2731. padding: 2px 4px;
  2732. border-radius: 4px;
  2733. font-family: monospace;
  2734. }
  2735. pre {
  2736. background: #f5f5f5;
  2737. padding: 16px;
  2738. border-radius: 8px;
  2739. overflow-x: auto;
  2740. }
  2741. ul,
  2742. ol {
  2743. padding-left: 24px;
  2744. margin-bottom: 8px;
  2745. }
  2746. blockquote {
  2747. border-left: 4px solid #ddd;
  2748. padding-left: 16px;
  2749. margin: 8px 0;
  2750. color: rgba(0, 0, 0, 0.65);
  2751. }
  2752. a {
  2753. color: #1677ff;
  2754. text-decoration: none;
  2755. }
  2756. a:hover {
  2757. text-decoration: underline;
  2758. }
  2759. table {
  2760. border-collapse: collapse;
  2761. width: 100%;
  2762. margin-bottom: 16px;
  2763. }
  2764. th,
  2765. td {
  2766. border: 1px solid #ddd;
  2767. padding: 8px;
  2768. text-align: left;
  2769. }
  2770. th {
  2771. background: #f5f5f5;
  2772. }
  2773. }
  2774. .message-actions {
  2775. display: flex;
  2776. justify-content: flex-end;
  2777. margin-top: 8px;
  2778. padding-top: 8px;
  2779. border-top: 1px solid rgba(0, 0, 0, 0.06);
  2780. }
  2781. .message-actions :deep(.export-button) {
  2782. opacity: 0.6;
  2783. transition: opacity 0.2s;
  2784. }
  2785. .message-actions :deep(.export-button:hover) {
  2786. opacity: 1;
  2787. }
  2788. </style>