优化 openai 代码样式
This commit is contained in:
pushuo
Edward Yang
parent
4ab15cc605
commit
26188255ad
|
|
@ -2,19 +2,31 @@
|
|||
|
||||
@section('title', $name)
|
||||
|
||||
@push('header')
|
||||
<script src="{{ asset('vendor/marked/marked.min.js') }}"></script>
|
||||
<script src="{{ asset('vendor/highlight/highlight.min.js') }}"></script>
|
||||
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/highlight/atom-one-dark.min.css') }}">
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-7 col-12 answer-wrap">
|
||||
<div class="border p-3 bg-white" id="answer"><div class="not-answer"><i class="bi bi-activity"></i> {{ __('Openai::common.no_question') }}</div></div>
|
||||
<div class="border p-3 bg-white" id="answer">
|
||||
<div class="not-answer"><i class="bi bi-activity"></i> {{ __('Openai::common.no_question') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3 mt-4">
|
||||
<input type="text" id="ai-input" class="form-control rounded-0 form-control-lg" placeholder="{{ __('Openai::common.enter_question') }}" aria-label="{{ __('Openai::common.enter_question') }}" aria-describedby="button-addon2">
|
||||
<button class="btn btn-primary px-4 rounded-0" type="button" id="ai-submit"><i class="bi bi-send-fill"></i> {{ __('common.confirm') }}</button>
|
||||
<input type="text" id="ai-input" class="form-control rounded-0 form-control-lg"
|
||||
placeholder="{{ __('Openai::common.enter_question') }}" aria-label="{{ __('Openai::common.enter_question') }}"
|
||||
aria-describedby="button-addon2">
|
||||
<button class="btn btn-primary px-4 rounded-0" type="button" id="ai-submit"><i class="bi bi-send-fill"></i>
|
||||
{{ __('common.confirm') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 col-12">
|
||||
<div class="mb-2"><i class="bi bi-megaphone text-secondary fs-3"></i> </div>
|
||||
<div class="number-free mb-3 fs-5">{{ __('Openai::common.number_free') }}: <span>{{ __('Openai::common.loading') }}</span></div>
|
||||
<div class="number-free mb-3 fs-5">{{ __('Openai::common.number_free') }}:
|
||||
<span>{{ __('Openai::common.loading') }}</span></div>
|
||||
<div class="text-secondary">{{ $description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -22,11 +34,20 @@
|
|||
let last_page = 0;
|
||||
let current_page = 1;
|
||||
|
||||
// hljs.initHighlightingOnLoad();
|
||||
marked.setOptions({
|
||||
highlight: function(code, lang) {
|
||||
return hljs.highlight(lang, code).value;
|
||||
}
|
||||
});
|
||||
|
||||
$('#answer').scroll(function() {
|
||||
if ($(this).scrollTop() == 0) {
|
||||
if (current_page < last_page) {
|
||||
if (!$('.text-loading').length) {
|
||||
$('#answer').prepend('<div class="text-center py-3 text-secondary text-loading"><i class="bi bi-activity"></i> {{ __('Openai::common.loading') }}</div>');
|
||||
$('#answer').prepend(
|
||||
'<div class="text-center py-3 text-secondary text-loading"><i class="bi bi-activity"></i> {{ __('Openai::common.loading') }}</div>'
|
||||
);
|
||||
}
|
||||
|
||||
clearTimeout(timer);
|
||||
|
|
@ -37,7 +58,9 @@
|
|||
|
||||
if (current_page == last_page) {
|
||||
if (!$('.text-loading').length) {
|
||||
$('#answer').prepend('<div class="text-center py-3 text-secondary text-loading"><i class="bi bi-activity"></i> {{ __('Openai::common.no_more') }}</div>');
|
||||
$('#answer').prepend(
|
||||
'<div class="text-center py-3 text-secondary text-loading"><i class="bi bi-activity"></i> {{ __('Openai::common.no_more') }}</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -76,8 +99,12 @@
|
|||
prompt: question,
|
||||
domain: config.app_url,
|
||||
},
|
||||
beforeSend: function() { $btn.html(loadHtml).prop('disabled', true) },
|
||||
complete: function() { $btn.html(btnHtml).prop('disabled', false) },
|
||||
beforeSend: function() {
|
||||
$btn.html(loadHtml).prop('disabled', true)
|
||||
},
|
||||
complete: function() {
|
||||
$btn.html(btnHtml).prop('disabled', false)
|
||||
},
|
||||
success: function(data) {
|
||||
if ($('.not-answer').length) {
|
||||
$('.not-answer').remove();
|
||||
|
|
@ -90,10 +117,14 @@
|
|||
|
||||
$('.number-free span').text(data.available)
|
||||
|
||||
let answer = data.response.choices[0].text.trim();
|
||||
let answer = marked.parse(data.response.choices[0].text);
|
||||
html += '<div class="answer-list">',
|
||||
html += '<div class="d-flex mb-2"><div class="text-secondary">{{ __('Openai::common.qa_q') }}：</div><div class="w-100">' + question + '</div></div>',
|
||||
html += '<div class="d-flex"><div class="text-secondary">{{ __('Openai::common.qa_a') }}：</div><div class="w-100">' + answer + '</div></div>'
|
||||
html +=
|
||||
'<div class="d-flex mb-2"><div class="text-secondary">{{ __('Openai::common.qa_q') }}：</div><div class="w-100">' +
|
||||
question + '</div></div>',
|
||||
html +=
|
||||
'<div class="d-flex"><div class="text-secondary">{{ __('Openai::common.qa_a') }}：</div><div class="w-100">' +
|
||||
answer + '</div></div>'
|
||||
html += '</div>'
|
||||
|
||||
$('#ai-input').val('');
|
||||
|
|
@ -132,9 +163,13 @@
|
|||
|
||||
let html = '';
|
||||
data.data.forEach(function(item, index) {
|
||||
html += '<div class="answer-list '+ (!index ? 'first' : '') +'">',
|
||||
html += '<div class="d-flex mb-2"><div class="text-secondary">{{ __('Openai::common.qa_q') }}：</div><div class="w-100">' + item.question + '</div></div>',
|
||||
html += '<div class="d-flex"><div class="text-secondary">{{ __('Openai::common.qa_a') }}：</div><div class="w-100">' + item.answer + '</div></div>'
|
||||
html += '<div class="answer-list ' + (!index ? 'first' : '') + '">',
|
||||
html +=
|
||||
'<div class="d-flex mb-2"><div class="text-secondary">{{ __('Openai::common.qa_q') }}：</div><div class="w-100">' +
|
||||
item.question + '</div></div>',
|
||||
html +=
|
||||
'<div class="d-flex"><div class="text-secondary">{{ __('Openai::common.qa_a') }}：</div><div class="w-100">' +
|
||||
marked.parse(item.answer) + '</div></div>'
|
||||
html += '</div>'
|
||||
})
|
||||
|
||||
|
|
@ -142,7 +177,8 @@
|
|||
if (page == 1) {
|
||||
$('#answer').scrollTop($('#answer')[0].scrollHeight);
|
||||
} else {
|
||||
$('#answer').scrollTop($('#answer .answer-list.first:eq(1)').offset().top - 100 - $('#answer').offset().top);
|
||||
$('#answer').scrollTop($('#answer .answer-list.first:eq(1)').offset().top - 100 - $('#answer')
|
||||
.offset().top);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -178,8 +214,35 @@
|
|||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.answer-list p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.answer-list:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
background-color: #f3f3f3;
|
||||
padding: .5rem !important;
|
||||
overflow-y: auto;
|
||||
font-weight: 300;
|
||||
font-family: Menlo, monospace;
|
||||
border-radius: .3rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #283646 !important;
|
||||
}
|
||||
|
||||
pre>code {
|
||||
border: 0px !important;
|
||||
background-color: #283646 !important;
|
||||
color: #FFF;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue