style: Adjust the recommended question style. (#566)

This commit is contained in:
王嘉豪
2025-12-03 16:46:49 +08:00
committed by GitHub
parent 0293465ed2
commit 22488295ff
8 changed files with 148 additions and 93 deletions
+2 -3
View File
@@ -43,8 +43,7 @@ def list_chats(session: SessionDep, current_user: CurrentUser) -> List[Chat]:
def list_recent_questions(session: SessionDep, current_user: CurrentUser, datasource_id: int) -> List[str]:
chat_records = (
session.query(
ChatRecord.question,
func.count(ChatRecord.question).label('question_count')
ChatRecord.question
)
.join(Chat, ChatRecord.chat_id == Chat.id) # 关联Chat表
.filter(
@@ -52,7 +51,7 @@ def list_recent_questions(session: SessionDep, current_user: CurrentUser, dataso
ChatRecord.question.isnot(None)
)
.group_by(ChatRecord.question)
.order_by(desc('question_count'), desc(func.max(ChatRecord.create_time)))
.order_by(desc(func.max(ChatRecord.create_time)))
.limit(10)
.all()
)
+3 -3
View File
@@ -193,8 +193,7 @@
"chart_selected": "Selected {0}"
},
"qa": {
"recommended_repetitive_tips": "Duplicate questions exist",
"retrieve_error": "Model recommendation failed...",
"retrieve_error": "No content available",
"retrieve_again": "Retrieve Again",
"recently": "recently",
"recommend": "recommend",
@@ -324,6 +323,7 @@
}
},
"datasource": {
"recommended_repetitive_tips": "Duplicate questions exist",
"recommended_problem_tips": "Custom configuration requires at least one problem, each problem should be 2-200 characters",
"recommended_problem_configuration": "Recommended Problem Configuration",
"problem_generation_method": "Problem Generation Method",
@@ -800,4 +800,4 @@
"modelType": {
"llm": "Large Language Model"
}
}
}
+3 -3
View File
@@ -193,8 +193,7 @@
"chart_selected": "{0}개 선택됨"
},
"qa": {
"recommended_repetitive_tips": "중복된 문제가 존재합니다",
"retrieve_error": "모델 추천 문제 실패...",
"retrieve_error": "콘텐츠 없음",
"retrieve_again": "다시 가져오기",
"recently": "최근",
"recommend": "추천",
@@ -324,6 +323,7 @@
}
},
"datasource": {
"recommended_repetitive_tips": "중복된 문제가 존재합니다",
"recommended_problem_tips": "사용자 정의 구성으로 최소 한 개의 문제를 생성하세요, 각 문제는 2~200자로 작성",
"recommended_problem_configuration": "추천 문제 구성",
"problem_generation_method": "문제 생성 방식",
@@ -800,4 +800,4 @@
"modelType": {
"llm": "대형 언어 모델"
}
}
}
+3 -2
View File
@@ -193,7 +193,8 @@
"chart_selected": "已选{0}"
},
"qa": {
"retrieve_error": "模型推荐问题失败...",
"recommended_repetitive_tips": "Duplicate questions exist",
"retrieve_error": "暂无内容",
"retrieve_again": "重新获取",
"recently": "最近",
"recommend": "推荐",
@@ -800,4 +801,4 @@
"modelType": {
"llm": "大语言模型"
}
}
}
+73 -40
View File
@@ -1,7 +1,6 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import icon_quick_question from '@/assets/svg/icon_quick_question.svg'
import icon_close from '@/assets/svg/operate/ope-close.svg'
import icon_replace_outlined from '@/assets/svg/icon_replace_outlined.svg'
import { ChatInfo } from '@/api/chat.ts'
import RecentQuestion from '@/views/chat/RecentQuestion.vue'
@@ -38,6 +37,9 @@ const loadingOver = () => {
emits('loadingOver')
}
const onTitleChange = (title: string) => {
activeName.value = title
}
onMounted(() => {
getRecommendQuestions()
})
@@ -70,13 +72,8 @@ const props = withDefaults(
popper-class="quick_question_popover"
placement="top-start"
trigger="click"
:width="320"
:width="240"
>
<el-button class="tool-btn close_icon" text @click="hiddenProps">
<el-icon size="18">
<icon_close />
</el-icon>
</el-button>
<el-tooltip effect="dark" :offset="8" :content="$t('qa.retrieve_again')" placement="top">
<el-button class="tool-btn refresh_icon" text :disabled="disabled" @click="retrieveQuestions">
<el-icon size="18">
@@ -84,31 +81,45 @@ const props = withDefaults(
</el-icon>
</el-button>
</el-tooltip>
<el-tabs v-model="activeName" class="quick_question_tab">
<el-tab-pane :label="$t('qa.recommend')" name="recommend">
<RecommendQuestionQuick
ref="recommendQuestionRef"
:current-chat="currentChat"
:record-id="recordId"
:questions="questions"
:disabled="disabled"
:first-chat="firstChat"
position="input"
@click-question="quickAsk"
@stop="onChatStop"
@loading-over="loadingOver"
/>
</el-tab-pane>
<el-tab-pane v-if="datasourceId" :label="$t('qa.recently')" name="recently">
<RecentQuestion
ref="recentQuestionRef"
:disabled="disabled"
:datasource-id="datasourceId"
@click-question="quickAsk"
>
</RecentQuestion>
</el-tab-pane>
</el-tabs>
<div style="display: flex">
<div
class="quick_question_title"
:class="{ 'title-active': activeName == 'recommend' }"
@click="onTitleChange('recommend')"
>
{{ $t('qa.recommend') }}
</div>
<div
class="quick_question_title"
:class="{ 'title-active': activeName == 'recently' }"
@click="onTitleChange('recently')"
>
{{ $t('qa.recently') }}
</div>
</div>
<div class="quick_question_content">
<RecommendQuestionQuick
v-show="activeName === 'recommend'"
ref="recommendQuestionRef"
:current-chat="currentChat"
:record-id="recordId"
:questions="questions"
:disabled="disabled"
:first-chat="firstChat"
position="input"
@click-question="quickAsk"
@stop="onChatStop"
@loading-over="loadingOver"
/>
<RecentQuestion
v-show="activeName == 'recently'"
ref="recentQuestionRef"
:disabled="disabled"
:datasource-id="datasourceId"
@click-question="quickAsk"
>
</RecentQuestion>
</div>
<template #reference>
<el-button plain size="small">
<el-icon size="16" class="el-icon--left">
@@ -122,21 +133,43 @@ const props = withDefaults(
<style lang="less">
.quick_question_popover {
.quick_question_tab {
height: 230px;
}
.ed-tab-pane {
padding: 4px !important;
.quick_question_title {
width: 40px;
height: 24px;
border-radius: 6px;
opacity: 1;
padding: 2px 8px;
font-size: 12px;
display: flex;
align-items: normal;
width: 100%;
align-items: center;
justify-content: center;
background: rgba(31, 35, 41, 0.1);
cursor: pointer;
margin-left: 8px;
&:hover {
color: rgba(24, 158, 122, 0.5);
background: rgba(28, 186, 144, 0.1);
}
}
.ed-tabs__content {
overflow: auto;
.title-active {
color: rgba(24, 158, 122, 1);
background: rgba(28, 186, 144, 0.2);
}
.quick_question_content {
height: 168px;
margin-top: 4px;
padding: 4px 4px 4px 4px;
overflow-y: auto;
}
.ed-popover__title {
font-size: 14px;
font-weight: 500;
margin-bottom: 0;
height: 32px;
display: flex;
align-items: center;
padding: 0 8px;
}
.close_icon {
position: absolute;
+34 -17
View File
@@ -37,18 +37,24 @@ defineExpose({
</script>
<template>
<div v-if="computedQuestions.length > 0 || loading" class="recent-questions">
<div class="question-grid-input">
<div
v-for="(question, index) in computedQuestions"
:key="index"
class="question"
:class="{ disabled: disabled }"
@click="clickQuestion(question)"
>
{{ question }}
<div style="width: 100%; height: 100%">
<div v-if="computedQuestions.length > 0 || loading" class="recent-questions">
<div class="question-grid-input">
<div
v-for="(question, index) in computedQuestions"
:key="index"
class="question"
:class="{ disabled: disabled }"
:title="question"
@click="clickQuestion(question)"
>
{{ question }}
</div>
</div>
</div>
<div v-else class="recommend-questions-error">
{{ $t('qa.retrieve_error') }}
</div>
</div>
</template>
@@ -56,8 +62,6 @@ defineExpose({
.recent-questions {
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
font-size: 14px;
font-weight: 500;
line-height: 22px;
@@ -72,7 +76,7 @@ defineExpose({
.question-grid-input {
display: grid;
grid-gap: 12px;
grid-gap: 1px;
grid-template-columns: repeat(1, calc(100% - 6px));
}
@@ -85,11 +89,13 @@ defineExpose({
.question {
font-weight: 400;
cursor: pointer;
background: rgba(245, 246, 247, 1);
min-height: 32px;
border-radius: 6px;
padding: 5px 12px;
height: 32px;
border-radius: 4px;
padding: 5px 8px;
line-height: 22px;
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
&:hover {
background: rgba(31, 35, 41, 0.1);
}
@@ -99,4 +105,15 @@ defineExpose({
}
}
}
.recommend-questions-error {
font-size: 14px;
font-weight: 400;
color: rgba(100, 106, 115, 1);
margin-top: 60px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
</style>
@@ -130,24 +130,27 @@ defineExpose({ getRecommendQuestions, id: () => props.recordId, stop })
</script>
<template>
<div v-if="computedQuestions.length > 0 || loading" class="recommend-questions">
<div v-if="loading">
<el-button style="min-width: unset" type="primary" link loading />
</div>
<div v-else class="question-grid-input">
<div
v-for="(question, index) in computedQuestions"
:key="index"
class="question"
:class="{ disabled: disabled }"
@click="clickQuestion(question)"
>
{{ question }}
<div style="width: 100%; height: 100%">
<div v-if="computedQuestions.length > 0 || loading" class="recommend-questions">
<div v-if="loading">
<el-button style="min-width: unset" type="primary" link loading />
</div>
<div v-else class="question-grid-input">
<div
v-for="(question, index) in computedQuestions"
:key="index"
class="question"
:class="{ disabled: disabled }"
:title="question"
@click="clickQuestion(question)"
>
{{ question }}
</div>
</div>
</div>
</div>
<div v-else class="recommend-questions-error">
{{ $t('qa.retrieve_error') }}
<div v-else class="recommend-questions-error">
{{ $t('qa.retrieve_error') }}
</div>
</div>
</template>
@@ -168,7 +171,7 @@ defineExpose({ getRecommendQuestions, id: () => props.recordId, stop })
.question-grid-input {
display: grid;
grid-gap: 12px;
grid-gap: 1px;
grid-template-columns: repeat(1, calc(100% - 6px));
}
@@ -181,11 +184,13 @@ defineExpose({ getRecommendQuestions, id: () => props.recordId, stop })
.question {
font-weight: 400;
cursor: pointer;
background: rgba(245, 246, 247, 1);
min-height: 32px;
border-radius: 6px;
padding: 5px 12px;
height: 32px;
border-radius: 4px;
padding: 5px 8px;
line-height: 22px;
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
&:hover {
background: rgba(31, 35, 41, 0.1);
}
@@ -197,10 +202,10 @@ defineExpose({ getRecommendQuestions, id: () => props.recordId, stop })
}
.recommend-questions-error {
font-size: 12px;
font-weight: 500;
font-size: 14px;
font-weight: 400;
color: rgba(100, 106, 115, 1);
margin-top: 70px;
margin-top: 60px;
display: flex;
align-items: center;
justify-content: center;
+1 -1
View File
@@ -592,7 +592,7 @@ const drawerMainClose = () => {
<template #icon>
<icon_add_outlined></icon_add_outlined>
</template>
{{ $t('prompt.add_prompt_word') }}22
{{ $t('prompt.add_prompt_word') }}
</el-button>
</div>
</template>