From f6ba464aa7856b8201e313fe79e651aab34e6509 Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期一, 05 八月 2024 10:25:44 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.5.5:10010/r/web/flow_web
---
src/views/sessionRecords/sessionRecordsManager/index.vue | 877 +++++++++++++++++++++++++++++++--------------------------
1 files changed, 477 insertions(+), 400 deletions(-)
diff --git a/src/views/sessionRecords/sessionRecordsManager/index.vue b/src/views/sessionRecords/sessionRecordsManager/index.vue
index 3b3a1e9..1dd9235 100644
--- a/src/views/sessionRecords/sessionRecordsManager/index.vue
+++ b/src/views/sessionRecords/sessionRecordsManager/index.vue
@@ -1,418 +1,495 @@
<script setup lang="ts">
- import { IconSearch,IconTiktokColor ,IconSend,IconClose} from '@arco-design/web-vue/es/icon';
- import { useAppStore} from '@/store';
- import { computed, ref, onMounted, reactive, nextTick } from 'vue';
- import { Message } from '@arco-design/web-vue';
- import moment from 'moment';
- import AddSession from '@/views/session/sessionManager/components/addSession.vue';
- import { sessionListApi, deleteSessionApi,getSessionDetailsApi,chatApi }from '@/api/session';
- const sessionDetailList=ref([]);//鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
- const sessionList=ref([]);//浼氳瘽鍒楄〃
- const modalObj=reactive({ add:false });
+ import {
+ IconSearch,
+ IconTiktokColor,
+ IconSend,
+ IconClose,
+ } from '@arco-design/web-vue/es/icon';
+ import { useAppStore } from '@/store';
+ import { computed, ref, onMounted, reactive, nextTick } from 'vue';
+ import { Message } from '@arco-design/web-vue';
+ import moment from 'moment';
+ import AddSession from '@/views/session/sessionManager/components/addSession.vue';
+ import {
+ sessionListApi,
+ deleteSessionApi,
+ getSessionDetailsApi,
+ chatApi,
+ } from '@/api/session';
+ const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
+ const sessionList = ref([]); //浼氳瘽鍒楄〃
+ const modalObj = reactive({ add: false });
- const currIndex = ref(0)
- const displayedText = ref('');// 姝ｅ湪鏄剧ず鐨勬枃瀛�
- let timer: number|null = null;
- const streamStr=ref('');
- const inputMsg=ref('');
- const activeSessionId=ref('');
+ const currIndex = ref(0);
+ const displayedText = ref(''); // 姝ｅ湪鏄剧ず鐨勬枃瀛�
+ let timer: number | null = null;
+ const streamStr = ref('');
+ const inputMsg = ref('');
+ const activeSessionId = ref('');
- const sendMessage= async (event)=>{
- event.preventDefault();
- if(!activeSessionId.value){
- Message.warning('璇烽�夋嫨浼氳瘽');
- return;
- }
- if(inputMsg.value){
- const {code,data} =await chatApi({conversation_id:activeSessionId.value,messages:inputMsg.value});
- const res= await getSessionDetailsApi(activeSessionId.value);
- if(res.code===200){
- sessionDetailList.value=res.data.message.map((item,index)=>{
- if(index===res.data.message.length-1){
- item.role='last';
- displayedText.value='';
- currIndex.value=0;
- streamStr.value=item.content;
- startDisplayStr();
- }
- return item;
- });
- refreshScroll();
- }
- inputMsg.value='';
- }else{
- Message.warning('娑堟伅涓嶈兘涓虹┖');
- }
- };
- const querySessionDetail=async (session)=>{
- activeSessionId.value=session.id;
- const {code,data}= await getSessionDetailsApi(session.id);
- if(code===200){
- sessionDetailList.value=data.message;
- refreshScroll();//鍒锋柊婊氬姩鏉′綅缃�
- }
- };
- const scrollbar = ref(null);
- const refreshScroll=()=>{
- nextTick(()=>{
- const container = document.getElementById('home');
- scrollbar.value.scrollTop(container.scrollHeight);
- });
- };
- // 鏌ヨ浼氳瘽鍒楄〃
- const querySessionList=async ()=>{
- const {code,data} =await sessionListApi();
- if(code===200){
- sessionList.value=data;
- }else{
- Message.warning('鏌ヨ澶辫触');
- }
- };
- //鏂板浼氳瘽涔嬪悗鍒锋柊浼氳瘽鍒楄〃
- const addSession=()=>{
- querySessionList();
- };
- onMounted(()=>{
- querySessionList();
- });
- const appStore = useAppStore();
- const theme = computed(() => {
- return appStore.theme;
- });
- //鏂囧瓧鍔ㄦ�佽緭鍑�
- const startDisplayStr = () => {
- if (timer) {
- clearTimeout(timer!);
- }
- const res = streamStr.value;
- // 灏嗘暟缁勪腑鐨勫瓧绗︿覆鎷兼帴璧锋潵
- if (currIndex.value < res.length) {
- displayedText.value += res[currIndex.value];
- currIndex.value++;
- setTimeout(startDisplayStr, 100);
- } else {
- clearTimeout(timer!);
- timer = null
- }
+ const sendMessage = async (event) => {
+ event.preventDefault();
+ if (!activeSessionId.value) {
+ Message.warning('璇烽�夋嫨浼氳瘽');
+ return;
}
+ if (inputMsg.value) {
+ const { code, data } = await chatApi({
+ conversation_id: activeSessionId.value,
+ messages: inputMsg.value,
+ });
+ const res = await getSessionDetailsApi(activeSessionId.value);
+ if (res.code === 200) {
+ sessionDetailList.value = res.data.message.map((item, index) => {
+ if (index === res.data.message.length - 1) {
+ item.role = 'last';
+ displayedText.value = '';
+ currIndex.value = 0;
+ streamStr.value = item.content;
+ startDisplayStr();
+ }
+ return item;
+ });
+ refreshScroll();
+ }
+ inputMsg.value = '';
+ } else {
+ Message.warning('娑堟伅涓嶈兘涓虹┖');
+ }
+ };
+ const querySessionDetail = async (session) => {
+ activeSessionId.value = session.id;
+ const { code, data } = await getSessionDetailsApi(session.id);
+ if (code === 200) {
+ sessionDetailList.value = data.message;
+ refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃�
+ }
+ };
+ const scrollbar = ref(null);
+ const refreshScroll = () => {
+ nextTick(() => {
+ const container = document.getElementById('home');
+ scrollbar.value.scrollTop(container.scrollHeight);
+ });
+ };
+ // 鏌ヨ浼氳瘽鍒楄〃
+ const querySessionList = async () => {
+ const { code, data } = await sessionListApi();
+ if (code === 200) {
+ sessionList.value = data;
+ } else {
+ Message.warning('鏌ヨ澶辫触');
+ }
+ };
+ //鏂板浼氳瘽涔嬪悗鍒锋柊浼氳瘽鍒楄〃
+ const addSession = () => {
+ querySessionList();
+ };
+ onMounted(() => {
+ querySessionList();
+ });
+ const appStore = useAppStore();
+ const theme = computed(() => {
+ return appStore.theme;
+ });
+ //鏂囧瓧鍔ㄦ�佽緭鍑�
+ const startDisplayStr = () => {
+ if (timer) {
+ clearTimeout(timer!);
+ }
+ const res = streamStr.value;
+ // 灏嗘暟缁勪腑鐨勫瓧绗︿覆鎷兼帴璧锋潵
+ if (currIndex.value < res.length) {
+ displayedText.value += res[currIndex.value];
+ currIndex.value++;
+ setTimeout(startDisplayStr, 100);
+ } else {
+ clearTimeout(timer!);
+ timer = null;
+ }
+ };
</script>
<template>
- <div class="container">
- <AddSession :modalObj="modalObj" @addSession="addSession"></AddSession>
- <a-card class="top-title">AI浼氳瘽璁板綍</a-card>
- <a-row :gutter="[5,5]" style="margin-top: 3px">
- <a-col :span="4">
- <a-card style="height: 60px">
- <template #cover>
- <div style="display: flex;justify-content: space-between">
- <a-button type="primary" shape="round" class="card-btn-1" @click="modalObj.add=true">
- +鏂板缓浼氳瘽
- </a-button>
- <a-button type="text" shape="circle" class="card-btn-2">
- <icon-search />
- </a-button>
- </div>
- </template>
- </a-card>
- <a-card class="left">
- <a-scrollbar class="left-list" style="height: calc(100vh - 160px);overflow-y: auto;overflow-x: hidden;">
- <div class="item" v-for="session in sessionList" @click="querySessionDetail(session)" :class="{ isLeftActive:activeSessionId===session.id }">
- <div class="text" :class="{light:theme==='dark'}">{{session.name}}</div>
- <div class="time">{{moment(new Date(session.create_time)).format('YYYY-MM-DD HH:mm:ss')}}</div>
- </div>
- </a-scrollbar>
- </a-card>
- </a-col>
- <a-col :span="15">
- <a-card class="center">
- <div v-if="sessionDetailList.length===0">
- <div class="center-title">鏅鸿兘闂瓟</div>
- <div class="center-content">
- 鎴戝彲浠ョ悊瑙ｅ拰瀛︿範浜虹被鐨勮瑷�锛屽叿澶囧杞璇濈殑鑳藉姏锛岀幇鍦ㄥ拰鎴戝紑濮嬩氦娴佸惂~
- </div>
- <div class="center-question">
- <div class="center-question-left">璇曚竴璇曡繖鏍烽棶鎴�</div>
- <div class="center-question-right">
- <a-button type="primary">鎹竴鎹�</a-button>
- </div>
- </div>
- <a-row justify="space-around" class="center-list">
- <a-col :span="7" class="item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </a-col>
- <a-col :span="7" class="item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </a-col>
- <a-col :span="7" class="item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </a-col>
- <a-col :span="7" class="item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </a-col>
- <a-col :span="7" class="item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </a-col>
- <a-col :span="7" class="item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </a-col>
- </a-row>
- </div>
- <a-scrollbar ref="scrollbar" id="home" v-else class="chat-list" style="width:90%;overflow:auto;height: 60vh;margin: 0px auto">
- <div class="chat-item" v-for="sessionDetail in sessionDetailList">
- <a-comment
- v-if="sessionDetail.role==='user'"
- avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
- >
- <template #content>
- <div :class="{light:theme==='light'}">{{sessionDetail.content}}</div>
- </template>
- </a-comment>
- <a-comment
- v-else-if="sessionDetail.role==='assistant'"
- avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
- >
- <template #content>
- <a-card class="chat-item-answer" style="background-color: rgba(63, 64, 79, 1);">
- <div :class="{light:theme==='light'}">{{sessionDetail.content}}</div>
- </a-card>
- </template>
- </a-comment>
- <a-comment
- v-else-if="sessionDetail.role==='last'"
- avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
- >
- <template #content>
- <a-textarea readonly auto-size v-model="displayedText" class="chat-item-answer" style="background-color: rgba(63, 64, 79, 1);">
- </a-textarea>
- </template>
- </a-comment>
- </div>
- </a-scrollbar>
+ <div class="container">
+ <AddSession :modalObj="modalObj" @addSession="addSession"></AddSession>
+ <a-card class="top-title">AI浼氳瘽璁板綍</a-card>
+ <a-row :gutter="[5, 5]" style="margin-top: 3px">
+ <a-col :span="4">
+ <a-card style="height: 60px">
+ <template #cover>
+ <div style="display: flex; justify-content: space-between">
+ <a-button
+ type="primary"
+ shape="round"
+ class="card-btn-1"
+ @click="modalObj.add = true"
+ >
+ +鏂板缓浼氳瘽
+ </a-button>
+ <a-button type="text" shape="circle" class="card-btn-2">
+ <icon-search />
+ </a-button>
+ </div>
+ </template>
+ </a-card>
+ <a-card class="left">
+ <a-scrollbar
+ class="left-list"
+ style="
+ height: calc(100vh - 160px);
+ overflow-y: auto;
+ overflow-x: hidden;
+ "
+ >
+ <div
+ class="item"
+ v-for="session in sessionList"
+ @click="querySessionDetail(session)"
+ :class="{ isLeftActive: activeSessionId === session.id }"
+ >
+ <div class="text" :class="{ light: theme === 'dark' }">{{
+ session.name
+ }}</div>
+ <div class="time">{{
+ moment(new Date(session.create_time)).format(
+ 'YYYY-MM-DD HH:mm:ss'
+ )
+ }}</div>
+ </div>
+ </a-scrollbar>
+ </a-card>
+ </a-col>
+ <a-col :span="15">
+ <a-card class="center">
+ <div v-if="sessionDetailList.length === 0">
+ <div class="center-title">鏅鸿兘闂瓟</div>
+ <div class="center-content">
+ 鎴戝彲浠ョ悊瑙ｅ拰瀛︿範浜虹被鐨勮瑷�锛屽叿澶囧杞璇濈殑鑳藉姏锛岀幇鍦ㄥ拰鎴戝紑濮嬩氦娴佸惂~
+ </div>
+ <div class="center-question">
+ <div class="center-question-left">璇曚竴璇曡繖鏍烽棶鎴�</div>
+ <div class="center-question-right">
+ <a-button type="primary">鎹竴鎹�</a-button>
+ </div>
+ </div>
+ <a-row justify="space-around" class="center-list">
+ <a-col :span="7" class="item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{ dark: theme === 'dark' }">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </a-col>
+ <a-col :span="7" class="item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{ dark: theme === 'dark' }">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </a-col>
+ <a-col :span="7" class="item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{ dark: theme === 'dark' }">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </a-col>
+ <a-col :span="7" class="item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{ dark: theme === 'dark' }">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </a-col>
+ <a-col :span="7" class="item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{ dark: theme === 'dark' }">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </a-col>
+ <a-col :span="7" class="item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{ dark: theme === 'dark' }">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </a-col>
+ </a-row>
+ </div>
+ <a-scrollbar
+ ref="scrollbar"
+ id="home"
+ v-else
+ class="chat-list"
+ style="width: 90%; overflow: auto; height: 60vh; margin: 0px auto"
+ >
+ <div class="chat-item" v-for="sessionDetail in sessionDetailList">
+ <a-comment
+ v-if="sessionDetail.role === 'user'"
+ avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
+ >
+ <template #content>
+ <div :class="{ light: theme === 'light' }">{{
+ sessionDetail.content
+ }}</div>
+ </template>
+ </a-comment>
+ <a-comment
+ v-else-if="sessionDetail.role === 'assistant'"
+ avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
+ >
+ <template #content>
+ <a-card
+ class="chat-item-answer"
+ style="background-color: rgba(63, 64, 79, 1)"
+ >
+ <div :class="{ light: theme === 'light' }">{{
+ sessionDetail.content
+ }}</div>
+ </a-card>
+ </template>
+ </a-comment>
+ <a-comment
+ v-else-if="sessionDetail.role === 'last'"
+ avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
+ >
+ <template #content>
+ <a-textarea
+ readonly
+ auto-size
+ v-model="displayedText"
+ class="chat-item-answer"
+ style="background-color: rgba(63, 64, 79, 1)"
+ >
+ </a-textarea>
+ </template>
+ </a-comment>
+ </div>
+ </a-scrollbar>
- <div class="center-bottom">
- <a-textarea v-model="inputMsg" @keydown.shift.enter="sendMessage" style="height: 180px" placeholder="杈撳叆鎮ㄦ兂浜嗚В鐨勫唴瀹癸紝Shift+Enter鍙戦��" :max-length="500" allow-clear show-word-limit>
- </a-textarea>
- </div>
- </a-card>
- </a-col>
- <a-col :span="5">
- <a-card class="right">
- <div class="right-top">
- <div class="right-title">鏁版櫤搴�</div>
- <div class="right-btn">
- <a-button type="outline" shape="circle" style="border: none;">
- <icon-search />
- </a-button>
- <a-button type="outline" shape="circle" style="border: none;margin-left: -10px">
- <icon-close/>
- </a-button>
- </div>
- </div>
- <div class="right-tag">
- <a-space>
- <a-button type="primary" shape="round" size="mini" class="btn">鍏ㄩ儴</a-button>
- <a-button type="outline" shape="round" size="mini" class="btn">鏂囨。鍒涗綔</a-button>
- <a-button type="outline" shape="round" size="mini" class="btn">鐭ヨ瘑瀛︿範</a-button>
- </a-space>
- <a-space style="margin-top:10px ">
- <a-button type="outline" shape="round" size="mini" class="btn">鏁堢巼鎻愬崌</a-button>
- </a-space>
- </div>
- <div class="right-list">
- <div class="right-item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </div>
- <div class="right-item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </div>
- <div class="right-item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </div>
- </div>
- </a-card>
- </a-col>
- </a-row>
- </div>
+ <div class="center-bottom">
+ <a-textarea
+ v-model="inputMsg"
+ @keydown.shift.enter="sendMessage"
+ style="height: 180px"
+ placeholder="杈撳叆鎮ㄦ兂浜嗚В鐨勫唴瀹癸紝Shift+Enter鍙戦��"
+ :max-length="500"
+ allow-clear
+ show-word-limit
+ >
+ </a-textarea>
+ </div>
+ </a-card>
+ </a-col>
+ <a-col :span="5">
+ <a-card class="right">
+ <div class="right-top">
+ <div class="right-title">鏁版櫤搴�</div>
+ <div class="right-btn">
+ <a-button type="outline" shape="circle" style="border: none">
+ <icon-search />
+ </a-button>
+ <a-button
+ type="outline"
+ shape="circle"
+ style="border: none; margin-left: -10px"
+ >
+ <icon-close />
+ </a-button>
+ </div>
+ </div>
+ <div class="right-tag">
+ <a-space>
+ <a-button type="primary" shape="round" size="mini" class="btn"
+ >鍏ㄩ儴</a-button
+ >
+ <a-button type="outline" shape="round" size="mini" class="btn"
+ >鏂囨。鍒涗綔</a-button
+ >
+ <a-button type="outline" shape="round" size="mini" class="btn"
+ >鐭ヨ瘑瀛︿範</a-button
+ >
+ </a-space>
+ <a-space style="margin-top: 10px">
+ <a-button type="outline" shape="round" size="mini" class="btn"
+ >鏁堢巼鎻愬崌</a-button
+ >
+ </a-space>
+ </div>
+ <div class="right-list">
+ <div class="right-item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{ dark: theme === 'dark' }">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </div>
+ <div class="right-item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{ dark: theme === 'dark' }">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </div>
+ <div class="right-item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{ dark: theme === 'dark' }">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </div>
+ </div>
+ </a-card>
+ </a-col>
+ </a-row>
+ </div>
</template>
<style scoped lang="scss">
- .isLeftActive{
- background-color:lightgrey;
+ .isLeftActive {
+ background-color: lightgrey;
+ }
+ .light {
+ color: white !important;
+ }
+ .dark {
+ color: gray !important;
+ }
+ .container {
+ .top-title {
+ line-height: 60px;
+ font-size: 25px;
+ font-family: 榛戜綋;
}
- .light{
- color: white !important;
+ .center,
+ .right {
+ box-sizing: border-box;
+ height: calc(100vh - 100px);
}
- .dark{
- color: gray !important;
- }
- .container{
- .top-title{
- line-height:60px;
- font-size: 25px;
- font-family: 榛戜綋;
- }
- .center,.right{
- box-sizing: border-box;
- height: calc(100vh - 100px);
- }
- .left{
- /* height: calc(100vh - 160px);
+ .left {
+ /* height: calc(100vh - 160px);
overflow-y: auto;
overflow-x: hidden;*/
- border: 0px;
- .left-list{
- .item{
- cursor: pointer;
- .text,.time{
- line-height: 30px;
- }
- .text{
- color: black;
- padding-left: 10px;
- }
- .time{
- color: gray;
- font-size: 12px;
- padding-left: 10px;
- }
- }
- }
+ border: 0px;
+ .left-list {
+ .item {
+ cursor: pointer;
+ .text,
+ .time {
+ line-height: 30px;
+ }
+ .text {
+ color: black;
+ padding-left: 10px;
+ }
+ .time {
+ color: gray;
+ font-size: 12px;
+ padding-left: 10px;
+ }
}
- .card-btn-1 {
- margin: 10px;
- width: 75%;
- }
- .card-btn-2 {
- margin:10px 10px;
- }
- .center{
- position: relative;
- .center-title{
- line-height:60px;
- font-size: 25px;
- font-family: 榛戜綋;
- color: deepskyblue;
- }
- .center-content{
- font-size: 14px;
- color: gray;
- }
- .center-question{
- margin-top: 20px;
- display: flex;
- justify-content: space-between;
- .center-question-left{
- margin-top: 5px;
- margin-left: 20px;
- }
- .center-question-right{
- margin-right: 20px;
- }
- }
- .center-list{
- margin-top: 10px;
- .item{
- border-radius: 10px;
- margin-top: 10px;
- padding: 10px;
- height: 120px;
- background-color: lightcyan;
- .item-title{
- text-align: center;
- line-height:40px;
- font-size: 20px;
- font-family: 榛戜綋;
- color: black;
- }
- }
- }
- .center-bottom{
- position: absolute;
- width: 90%;
- bottom: 20px;
- left:5%;
- }
- }
- .right{
- .right-top{
- display: flex;
- justify-content: space-between;
- .right-title{
- font-size: 25px;
- font-family: 榛戜綋;
- color: black;
- }
- .right-btn{
- position: relative;
- left:20px;
- top:0px;
- }
- }
- .right-tag{
- margin-top: 20px;
- }
- .right-list{
- .right-item{
- border-radius: 10px;
- margin-top: 10px;
- padding: 10px;
- height: 120px;
- background-color: lightcyan;
- .item-title{
- text-align: center;
- line-height:40px;
- font-size: 20px;
- font-family: 榛戜綋;
- color: black;
- }
- }
- }
- }
+ }
}
+ .card-btn-1 {
+ margin: 10px;
+ width: 75%;
+ }
+ .card-btn-2 {
+ margin: 10px 10px;
+ }
+ .center {
+ position: relative;
+ .center-title {
+ line-height: 60px;
+ font-size: 25px;
+ font-family: 榛戜綋;
+ color: deepskyblue;
+ }
+ .center-content {
+ font-size: 14px;
+ color: gray;
+ }
+ .center-question {
+ margin-top: 20px;
+ display: flex;
+ justify-content: space-between;
+ .center-question-left {
+ margin-top: 5px;
+ margin-left: 20px;
+ }
+ .center-question-right {
+ margin-right: 20px;
+ }
+ }
+ .center-list {
+ margin-top: 10px;
+ .item {
+ border-radius: 10px;
+ margin-top: 10px;
+ padding: 10px;
+ height: 120px;
+ background-color: lightcyan;
+ .item-title {
+ text-align: center;
+ line-height: 40px;
+ font-size: 20px;
+ font-family: 榛戜綋;
+ color: black;
+ }
+ }
+ }
+ .center-bottom {
+ position: absolute;
+ width: 90%;
+ bottom: 20px;
+ left: 5%;
+ }
+ }
+ .right {
+ .right-top {
+ display: flex;
+ justify-content: space-between;
+ .right-title {
+ font-size: 25px;
+ font-family: 榛戜綋;
+ color: black;
+ }
+ .right-btn {
+ position: relative;
+ left: 20px;
+ top: 0px;
+ }
+ }
+ .right-tag {
+ margin-top: 20px;
+ }
+ .right-list {
+ .right-item {
+ border-radius: 10px;
+ margin-top: 10px;
+ padding: 10px;
+ height: 120px;
+ background-color: lightcyan;
+ .item-title {
+ text-align: center;
+ line-height: 40px;
+ font-size: 20px;
+ font-family: 榛戜綋;
+ color: black;
+ }
+ }
+ }
+ }
+ }
</style>
--
Gitblit v1.8.0