From a762b59c2c4b459f72ede19716d476bb3513f622 Mon Sep 17 00:00:00 2001 From: gerson <1405270578@qq.com> Date: 星期四, 20 二月 2025 08:27:57 +0800 Subject: [PATCH] 获取位置 --- src/components/chat/Chat.vue | 720 ++++++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 558 insertions(+), 162 deletions(-) diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue index 0d6cdc2..a1a2058 100644 --- a/src/components/chat/Chat.vue +++ b/src/components/chat/Chat.vue @@ -1,196 +1,592 @@ <template> - <div class="flex flex-col h-full"> - <div class="h-full flex flex-col items-center overflow-y-auto"> - <div ref="chatListDom" class="h-full"> - <div - class="group flex px-4 py-3 hover:bg-slate-100 rounded-lg" - v-for="(item, index) of messageList.filter((v) => v.role !== 'system')" - :key="index" - > - <img class="rounded-full size-10 mr-4" :src="roleImageMap[item.role]" alt="" srcset="" /> + <ChatContainer :loading="chatListLoading" :more-is-loading="moreIsLoading" :is-share-page="isSharePage" ref="containerRef"> + <!-- 娑堟伅鍒楄〃 --> + <template #message-list> + <MessageList + v-if="computedMessageList?.length > 0" + :msgList="computedMessageList" + :isTalking="isTalking" + @shareClick="shareClick" + @setCommonQuestionClick="setCommonPhraseClick" + @sendChatMessage="sendChatMessage" + @stopGenClick="stopGenClick" + @askMoreClick="askMoreClick" + /> + <el-empty v-else-if="isSharePage && !chatListLoading" :image-size="200"> + <template #description> + <span class="text-[15px]">鍒嗕韩鐨勫璇濅笉瀛樺湪鎴栧凡澶辨晥</span> + </template> + </el-empty> + </template> - <div class="flex"> - <div - :class="{ 'bg-[#d8d8ff]': item.role !== RoleEnum.user }" - class="prose text-sm rounded-[6px] p-4 leading-relaxed max-w-[100ch]" - v-if="item.content" - v-html="md.render(item.content)" - ></div> - <Loding v-else /> - </div> - </div> + <!-- 杈撳叆鍖哄煙 --> + <template #input-area> + <div class="w-full"> + <PlayBar + ref="playBarRef" + v-model:voicePageIsShow="voicePageIsShow" + :isTalking="isTalking" + :isHome="false" + :msgList="computedMessageList" + v-model="messageContent.values" + @sendClick="sendClick" + @stopGenClick="stopGenClick" + :style="{ width: chatWidth }" + class="mx-auto" + /> </div> - </div> + </template> - <div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100 flex justify-center"> - <PlayBar :isTalking="isTalking" v-model="messageContent" @sendClick="sendOrSave" /> - </div> - </div> + <!-- 鎶藉眽 --> + <template #drawer> + <CustomDrawer v-model:isShow="drawerIsShow" @updateChatInput="updateChatInput" /> + <ShareLinkDlg ref="shareLinkDlgRef" /> + </template> + </ChatContainer> </template> <script setup lang="ts"> -import cryptoJS from 'crypto-js'; -import { nextTick, onMounted, ref, watch } from 'vue'; -import Loding from './components/Loding.vue'; -import { md } from './libs/markdown'; -import { RoleEnum, type ChatMessage, roleImageMap } from './types'; +import type { CancelTokenSource } from 'axios'; +import axios from 'axios'; +import { orderBy } from 'lodash-es'; +import moment from 'moment'; +import { computed, nextTick, onActivated, onMounted, ref } from 'vue'; +import { loadAmisSource } from '../amis/load'; +import { useScrollLoad } from './hooks/useScrollLoad'; +import type { ChatContent } from './model/types'; +import { AnswerState, AnswerType, RoleEnum, type ChatMessage } from './model/types'; +import { getShareChatJsonByPost, questionStreamByPost } from '/@/api/ai/chat'; import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue'; - -let apiKey = ''; -let isConfig = ref(false); +import CustomDrawer from '/@/components/drawer/CustomDrawer.vue'; +import { Logger } from '/@/model/logger/Logger'; +import { triggerRef } from 'vue'; +import { ElLoadingService, ElMessage } from 'element-plus'; +import ChatContainer from './components/ChatContainer.vue'; +import ShareLinkDlg from './components/shareLink/index.vue'; +import router from '/@/router'; +import MessageList from './messageList/index.vue'; +import { + activeChatRoom, + activeGroupType, + activeLLMId, + activeRoomId, + activeSampleId, + isSharePage, + roomConfig, +} from '/@/stores/chatRoom'; +import emitter from '/@/utils/mitt'; +import { useCompRef } from '/@/utils/types'; +import { toMyFixed } from '/@/utils/util'; +import { useLoadData } from './hooks/useLoadData'; +import { useSyncMsg } from './hooks/useSyncMsg'; +import { getCurrentPosition } from '/@/utils/brower'; +const containerRef = useCompRef(ChatContainer); +const chatListDom = computed(() => containerRef.value?.chatListDom); +const scrollToBottom = () => { + containerRef.value?.scrollToBottom(); +}; +const { loadReplyData, parseContent, parseExtraContent, convertProcessItem, convertProcessToStep, formatShowTimeYear } = useLoadData(); +const voicePageIsShow = ref(false); let isTalking = ref(false); -let messageContent = ref(''); -const chatListDom = ref<HTMLDivElement>(); -const decoder = new TextDecoder('utf-8'); -const roleAlias = { user: 'ME', assistant: 'ChatGPT', system: 'System' }; -const messageList = ref<ChatMessage[]>([ - { - role: RoleEnum.assistant, - content: `浣犲ソ锛屾垜鏄疉I璇█妯″瀷锛屾垜鍙互鎻愪緵涓�浜涘父鐢ㄦ湇鍔″拰淇℃伅锛屼緥濡傦細 - - 1. 缈昏瘧锛氭垜鍙互鎶婁腑鏂囩炕璇戞垚鑻辨枃锛岃嫳鏂囩炕璇戞垚涓枃锛岃繕鏈夊叾浠栦竴浜涜瑷�缈昏瘧锛屾瘮濡傛硶璇�佹棩璇�佽タ鐝墮璇瓑銆� - - 2. 鍜ㄨ鏈嶅姟锛氬鏋滀綘鏈変换浣曢棶棰橀渶瑕佸挩璇紝渚嬪鍋ュ悍銆佹硶寰嬨�佹姇璧勭瓑鏂归潰锛屾垜鍙互灏藉彲鑳戒负浣犳彁渚涘府鍔┿�� - - 3. 闂茶亰锛氬鏋滀綘鎰熷埌瀵傚癁鎴栨棤鑱婏紝鎴戜滑鍙互鑱婁竴浜涙湁瓒g殑璇濋锛屼互鍑忚交浣犵殑鍘嬪姏銆� - - 璇峰憡璇夋垜浣犻渶瑕佸摢鏂归潰鐨勫府鍔╋紝鎴戜細鏍规嵁浣犵殑闇�姹傜粰浣犳彁渚涚浉搴旂殑淇℃伅鍜屽缓璁�俙, - }, - { - role: RoleEnum.user, - content: `浣犲ソ`, - }, -]); - -onMounted(() => { - if (getAPIKey()) { - switchConfigStatus(); - } +const chatWidth = computed(() => containerRef.value?.chatWidth); +let messageContent = ref<ChatContent>({ + type: AnswerType.Text, + values: '', +}); +const currentRoute = router.currentRoute; +const currentRouteId = currentRoute.value.query.id as string; +activeRoomId.value = currentRouteId; +const messageList = ref<ChatMessage[]>([]); +const computedMessageList = computed(() => { + return messageList.value.filter((v) => !!v); }); -const sendChatMessage = async (content: string = messageContent.value) => { - try { - isTalking.value = true; - if (messageList.value.length === 2) { - messageList.value.pop(); - } - messageList.value.push({ role: RoleEnum.user, content }); - clearMessageContent(); - messageList.value.push({ role: RoleEnum.assistant, content: '' }); +let questionRes = null; +const preQuestion = ref(null); - // const { body, status } = await chat(messageList.value, getAPIKey()); - // if (body) { - // const reader = body.getReader(); - // await readStream(reader, status); - // } - const a = new Promise<string>((resolve) => { - setTimeout(() => { - resolve('浣犲ソ '); - }, 500); - }); +let lastAxiosSource: CancelTokenSource = null; - const msg = await a; - appendLastMessageContent(msg); - } catch (error: any) { - appendLastMessageContent(error); - } finally { - isTalking.value = false; - } +// 閫氳繃淇敼 isTalking 鏉ヨЕ鍙戞洿鏂� +const triggerRefresh = () => { + isTalking.value = !isTalking.value; + + nextTick(() => { + isTalking.value = !isTalking.value; + }); }; - -const readStream = async (reader: ReadableStreamDefaultReader<Uint8Array>, status: number) => { - let partialLine = ''; - - while (true) { - // eslint-disable-next-line no-await-in-loop - const { value, done } = await reader.read(); - if (done) break; - - const decodedText = decoder.decode(value, { stream: true }); - - if (status !== 200) { - const json = JSON.parse(decodedText); // start with "data: " - const content = json.error.message ?? decodedText; - appendLastMessageContent(content); - return; - } - - const chunk = partialLine + decodedText; - const newLines = chunk.split(/\r?\n/); - - partialLine = newLines.pop() ?? ''; - - for (const line of newLines) { - if (line.length === 0) continue; // ignore empty message - if (line.startsWith(':')) continue; // ignore sse comment message - if (line === 'data: [DONE]') return; // - - const json = JSON.parse(line.substring(6)); // start with "data: " - const content = status === 200 ? json.choices[0].delta.content ?? '' : json.error.message; - appendLastMessageContent(content); - } - } -}; - -const appendLastMessageContent = (content: string) => (messageList.value[messageList.value.length - 1].content += content); - -const sendOrSave = () => { - if (!messageContent.value.length) return; - if (isConfig.value) { - if (saveAPIKey(messageContent.value.trim())) { - switchConfigStatus(); - } - clearMessageContent(); +let position: Position = null; +const questionAi = async (text) => { + let judgeParams = null; + if (!preQuestion.value) { + judgeParams = {}; } else { - sendChatMessage(); + judgeParams = { + prev_question: preQuestion.value, + }; } + + const params = { + question: text, + history_group_id: currentRouteId, + raw_mode: roomConfig.value?.[currentRouteId]?.isAnswerByLLM ?? false, + ...judgeParams, + } as any; + + // if (!position) { + // const loadingInstance = ElLoadingService({ + // text: '鑾峰彇浣嶇疆涓�...', + // target: '.layout-parent', + // fullscreen:false, + // }); + // position = await getCurrentPosition().finally(() => { + // loadingInstance.close(); + // }); + // } + + // if (position) { + // const { latitude, longitude } = position; + // params.cur_pos = [longitude, latitude].join(','); + // } + + if (activeGroupType.value) { + params.group_type = activeGroupType.value; + } + + if (currentSampleId) { + params.sample_id = currentSampleId; + currentSampleId = ''; + } + + let lastTimestamp = new Date().getTime(); + questionRes = {}; + let lastIsResult = false; + const resultP = new Promise((resolve, reject) => { + const currentSource = axios.CancelToken.source(); + lastAxiosSource = currentSource; + + const getResReport = () => { + const resReport = { + answer_type: AnswerType.Report, + reports: [], + }; + return resReport; + }; + const checkReportEmpty = () => { + const isEmpty = !questionRes?.reports || questionRes?.reports?.length === 0; + return isEmpty; + }; + questionStreamByPost( + params, + (chunkRes) => { + Logger.info('chunk response锛歕n\n' + JSON.stringify(chunkRes)); + + if (chunkRes.mode === 'result') { + lastIsResult = true; + const res = chunkRes.value; + if (checkReportEmpty()) { + const resReport = getResReport(); + resReport.reports.push(res); + questionRes = resReport; + // resReport.reports = resReport.reports.concat([]); + resolve(resReport); + } else { + const lastMsg = computedMessageList.value.at(-1); + // lastMsg.content.values = lastMsg.content.values.concat([]); + // 宸茬粡瑙f瀽杩囦竴娆� reports + if (!lastMsg.content.values) { + lastMsg.content.values = []; + } + + lastMsg.content.values.push({ + content: parseContent(res, true, { + origin: res, + }), + }); + } + triggerRefresh(); + return; + // chunkRes.value = '鍑嗗鏁版嵁鍒嗘瀽'; + } + + if (chunkRes.mode === 'summary') { + const lastMsg = computedMessageList.value.at(-1); + const extraContent = parseExtraContent(chunkRes.value); + const isReportEmpty = checkReportEmpty(); + // 娌℃湁缁忚繃 result 鎶ュ憡杩樻病鍒濆鍖� + if (isReportEmpty) { + const resReport = getResReport(); + questionRes = resReport; + } + // 姝ゅ璇濆凡缁忓姞鍏ュ埌瀵硅瘽鍒楄〃 + if (lastMsg.content?.values && extraContent) { + for (const key in extraContent) { + if (Object.prototype.hasOwnProperty.call(extraContent, key)) { + const value = extraContent[key]; + if (!lastMsg.content[key] || (Array.isArray(lastMsg.content[key]) && lastMsg.content[key].length === 0)) { + lastMsg.content[key] = value; + } + } + } + + lastMsg.historyId = chunkRes.value.history_id; + const userMsg = computedMessageList.value.at(-2); + userMsg.historyId = chunkRes.value.history_id; + userMsg.content.values = chunkRes.value.question; + } + + if (Object.keys(questionRes).length === 0) { + questionRes = chunkRes.value; + } + + // 姝ゅ璇濊繕鏈姞鍏ュ埌瀵硅瘽鍒楄〃 + if (!lastMsg.content?.values && questionRes) { + questionRes = { + ...questionRes, + ...chunkRes.value, + }; + } + + if (isReportEmpty) { + resolve(questionRes); + } + // computedMessageList.value[computedMessageList.value.length - 1] = finalMsg; + scrollToBottom(); + // chunkRes.value = '浣犲彲浠ョ户缁棶鎴�'; + return; + } + + if (chunkRes.mode === 'conclusion') { + const lastReport = computedMessageList.value.at(-1)?.content?.values?.at(-1); + if (lastReport) { + lastReport.conclusion = chunkRes.value; + chunkRes.value = '鍒嗘瀽缁撴潫'; + } + } + const getLastGroup = () => { + const lastGroup = computedMessageList.value.at(-1).stepGroup[0]; + return lastGroup; + }; + const getLastStepList = () => { + const stepList = getLastGroup()?.value ?? []; + return stepList; + }; + const getLastStepItem = () => { + const stepList = getLastStepList(); + const lastStepItem = stepList.at(-1); + return lastStepItem; + }; + + const checkStepItem = (stepItem) => { + if (!stepItem.subStep) { + stepItem.subStep = []; + } + }; + + if (chunkRes.mode === 'question') { + const lastStepItem = getLastStepItem(); + checkStepItem(lastStepItem); + lastStepItem.subStep.push({ + type: chunkRes.value.type, + data: chunkRes.value, + }); + scrollToBottom(); + return; + } + + // 鏆傛椂涓嶈�冭檻澶氫釜 report 鎯呭喌 + + if (lastIsResult && chunkRes.mode !== 'finish') { + // const lastTow = computedMessageList.value.at(-1); + // lastTow.stepGroup.at(-1).value.at(-1).finishLoading = true; + // lastTow.content.values = lastTow.content.values.concat([]); + + // 寮�濮嬪鍔犳柊鐨� stepGroup锛屽悗缁殑 stepGroup 骞舵病鏈夊疄闄呬綔鐢紝鍙槸涓轰簡鍋氳凯浠g敤锛岃凯浠e嚭缁勪欢锛屽睅灞变唬鐮佸疄鍦ㄥお闅炬敼浜嗭紒锛侊紒 + computedMessageList.value.at(-1).stepGroup.push({ + value: [], + isShow: true, + }); + lastIsResult = false; + } + const lastGroup = computedMessageList.value.at(-1).stepGroup[0]; + const stepList = lastGroup?.value ?? []; + const currentTimeStamp = new Date().getTime(); + const ms = toMyFixed(currentTimeStamp - lastTimestamp, 2) + ' ms'; + if (chunkRes.mode === 'finish') { + stepList.at(-1).ms = ms; + isTalking.value = false; + return; + } + + if (stepList?.length >= 1) { + stepList.at(-1).ms = ms; + } else { + const stepGroup = computedMessageList.value.at(-1).stepGroup; + if (stepGroup.length > 1) { + const lastStepList = stepGroup.at(-2).value; + lastStepList.at(-1).ms = ms; + } + } + lastTimestamp = currentTimeStamp; + const stepItem = convertProcessItem(chunkRes); + + stepList.push(stepItem); + // 寮哄埗瑙﹀彂鏇存柊 + + scrollToBottom(); + }, + { + cancelToken: currentSource.token, + } + ) + .catch((err) => { + throw err; + }) + .finally(() => { + isTalking.value = false; + // 鏀惰捣鎵�鏈� stepGroup + computedMessageList.value.at(-1).stepGroup.forEach((item) => { + item.isShow = false; + }); + }); + }); + + await resultP; + const content = parseContent(questionRes, true); + return content; }; -const clickConfig = () => { - if (!isConfig.value) { - messageContent.value = getAPIKey(); - } else { - clearMessageContent(); - } - switchConfigStatus(); +const clearMessageContent = () => + (messageContent.value = { + type: AnswerType.Text, + values: '', + }); + +let currentSampleId = ''; + +let currentLLMId = null; + +const stopGenClick = () => { + lastAxiosSource?.cancel(); + isTalking.value = false; + chatListLoading.value = false; + + computedMessageList.value.at(-1).isStopMsg = true; }; -const getSecretKey = () => 'lianginx'; - -const saveAPIKey = (apiKey: string) => { - if (apiKey.slice(0, 3) !== 'sk-' || apiKey.length !== 51) { - alert('API Key 閿欒锛岃妫�鏌ュ悗閲嶆柊杈撳叆锛�'); +const checkCanSend = (content: ChatContent = messageContent.value) => { + if (!content?.values) { return false; } - const aesAPIKey = cryptoJS.AES.encrypt(apiKey, getSecretKey()).toString(); - localStorage.setItem('apiKey', aesAPIKey); + if (isTalking.value || chatListLoading.value) { + ElMessage.warning('ai 姝e湪鍥炲涓紝璇风◢鍚庡皾璇曟彁闂�'); + return false; + } return true; }; -const getAPIKey = () => { - if (apiKey) return apiKey; - const aesAPIKey = localStorage.getItem('apiKey') ?? ''; - apiKey = cryptoJS.AES.decrypt(aesAPIKey, getSecretKey()).toString(cryptoJS.enc.Utf8); - return apiKey; +const addChatItem = (content: ChatContent) => { + isTalking.value = true; + const userItem: ChatMessage = { role: RoleEnum.user, content, isChecked: false } as any; + const assistantItem: ChatMessage = { + role: RoleEnum.assistant, + content: { + type: AnswerType.Report, + }, + state: AnswerState.Null, + stepGroup: [ + { + value: [], + isShow: true, + }, + ], + isStopMsg: false, + isChecked: false, + } as any; + messageList.value.push(userItem); + clearMessageContent(); + + messageList.value.push(assistantItem); + scrollToBottom(); + return [userItem, assistantItem]; }; -const switchConfigStatus = () => (isConfig.value = !isConfig.value); +const sendChatMessage = async (content: ChatContent = messageContent.value) => { + if (!checkCanSend(content)) { + return; + } + const isNewChat = messageList.value.length === 0; + if (isNewChat) { + if (activeSampleId.value) { + currentSampleId = activeSampleId.value; + } -const clearMessageContent = () => (messageContent.value = ''); + if (activeLLMId.value) { + currentLLMId = activeLLMId.value; + } + } + let resMsgContent: ChatContent = null; -const scrollToBottom = () => { - if (!chatListDom.value) return; - chatListDom.value.lastElementChild.scrollIntoView(); - // scrollTo(0, chatListDom.value.scrollHeight); + try { + const [userItem, assistantItem] = addChatItem(content); + resMsgContent = await questionAi(content.values); + updateLoadIndex(); + + userItem.historyId = questionRes?.history_id; + const current = moment().format('YYYY-MM-DD HH:mm:ss'); + userItem.createTime = current; + userItem.content.values = questionRes?.question ?? userItem.content.values; + assistantItem.historyId = questionRes?.history_id; + const currentTime = formatShowTimeYear(current); + assistantItem.createTime = currentTime; + assistantItem.content = resMsgContent; + setTimeout(() => { + // 鏀跺埌鍥炲锛岀户缁粴 + scrollToBottom(); + }, 300); + } catch (error: any) {} }; -watch(messageList.value, () => nextTick(() => scrollToBottom())); +const sendClick = () => { + sendChatMessage(messageContent.value); +}; + +const { loadRangeData, onChatListScroll, moreIsLoading, updateLoadIndex } = useScrollLoad({ + container: chatListDom, + historyGroupId: currentRouteId, + messageList, + loadReplyData, +}); +useSyncMsg({ + msgList: messageList, + updateLoadIndex, + historyGroupId: currentRouteId, + checkCanSync: (data) => { + return !isTalking.value && !moreIsLoading.value; + }, + showTip: (data) => { + playBarRef.value.showSyncTip(data); + }, + loadReplyData, + scrollToBottom, +}); +const chatListLoading = ref(true); + +onActivated(() => { + emitter.emit('updateHeaderTitle', activeChatRoom.value?.title ?? ''); +}); + +const initNewChat = () => { + messageContent.value = { + type: AnswerType.Text, + values: activeChatRoom.value?.title, + }; + sendChatMessage(); +}; + +const initHistoryChat = () => { + // 鍒濆鐘舵�佹粴涓�涓� + scrollToBottom(); + + setTimeout(() => { + chatListDom.value.addEventListener('scroll', onChatListScroll); + }, 300); +}; + +/** + * 鍔犺浇鍒嗕韩鏁版嵁 + */ +const loadShareData = async () => { + const res = await getShareChatJsonByPost({ + share_id: router.currentRoute.value.query.id as string, + }); + + const msgValue = res?.values; + if (!msgValue) { + messageList.value = []; + return; + } + const userMsg: ChatMessage = { + historyId: msgValue.history_id, + role: RoleEnum.user, + content: { + type: AnswerType.Text, + values: msgValue.question, + }, + isChecked: false, + }; + + const assistantMsg: ChatMessage = { + historyId: msgValue.history_id, + role: RoleEnum.assistant, + content: parseContent(msgValue), + stepGroup: (msgValue?.reports ?? []).map((item) => ({ + value: convertProcessToStep(item?.exec_process), + isShow: false, + })), + isStopMsg: false, + + conclusion: msgValue.conclusion ?? [], + isChecked: false, + }; + messageList.value = [userMsg, assistantMsg]; +}; + +onMounted(async () => { + messageList.value = []; + chatListLoading.value = true; + if (isSharePage.value) { + await loadShareData().finally(() => { + chatListLoading.value = false; + }); + } else { + await loadRangeData().finally(() => { + chatListLoading.value = false; + }); + } + setTimeout(() => { + emitter.emit('updateHeaderTitle', activeChatRoom.value?.title ?? ''); + }, 300); + + if (messageList.value.length === 0) { + initNewChat(); + } else { + if (!isSharePage.value) { + setTimeout(() => { + initHistoryChat(); + }, 300); + } + } + loadAmisSource(); +}); + +const askMoreClick = (item) => { + if (!item.question) return; + sendChatMessage({ type: AnswerType.Text, values: item.question }); +}; + +//#region ====================== 渚ц竟鏍廳rawer ====================== +const drawerIsShow = ref(false); + +const updateChatInput = (content) => { + messageContent.value.values = content; +}; +//#endregion +const playBarRef = useCompRef(PlayBar); +//鐢ㄦ埛闂璁剧疆涓哄父鐢ㄨ +const setCommonPhraseClick = (item) => { + playBarRef.value.addPhrase(item); +}; + +//#region ====================== 鍒嗕韩 ====================== + +const shareLinkDlgRef = useCompRef(ShareLinkDlg); + +const shareClick = async (item: ChatMessage) => { + shareLinkDlgRef.value.openShare(item); +}; +//#endregion </script> -<style scoped> -pre { - font-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', - 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN', 'Microsoft YaHei', 'Wenquanyi Micro Hei', - 'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif; -} +<style scoped lang="scss"> +@import './index.scss'; </style> -- Gitblit v1.9.3