diff --git a/resources/assets/js/components/AIAssistant.vue b/resources/assets/js/components/AIAssistant.vue index 03686e88f..2f66b1d5a 100644 --- a/resources/assets/js/components/AIAssistant.vue +++ b/resources/assets/js/components/AIAssistant.vue @@ -18,29 +18,27 @@ v-for="response in responses" :key="response.id || response.localId" class="ai-assistant-output-item"> +
+ + + +
-
- {{ response.modelLabel || response.model }} -
-
- - - -
+ {{ response.modelLabel || response.model }}
{{ response.prompt }}
- +
@@ -101,24 +99,6 @@ import DialogMarkdown from "../pages/manage/components/DialogMarkdown.vue"; export default { name: 'AIAssistant', components: {DialogMarkdown}, - props: { - defaultPlaceholder: { - type: String, - default: '', - }, - defaultInputRows: { - type: Number, - default: 2, - }, - defaultInputAutosize: { - type: Object, - default: () => ({minRows:2, maxRows:6}), - }, - defaultInputMaxlength: { - type: Number, - default: 500, - }, - }, data() { return { // 弹窗状态 @@ -127,13 +107,15 @@ export default { loadIng: 0, pendingAutoSubmit: false, autoSubmitTimer: null, + applyButtonText: null, + submitButtonText: null, // 输入配置 inputValue: '', - inputPlaceholder: this.defaultPlaceholder, - inputRows: this.defaultInputRows, - inputAutosize: this.defaultInputAutosize, - inputMaxlength: this.defaultInputMaxlength, + inputPlaceholder: null, + inputRows: null, + inputAutosize: null, + inputMaxlength: null, // 回调钩子 applyHook: null, @@ -186,12 +168,14 @@ export default { params = {}; } this.inputValue = params.value || ''; - this.inputPlaceholder = params.placeholder || this.defaultPlaceholder || this.$L('请输入你的问题...'); - this.inputRows = params.rows || this.defaultInputRows; - this.inputAutosize = params.autosize || this.defaultInputAutosize; - this.inputMaxlength = params.maxlength || this.defaultInputMaxlength; + this.inputPlaceholder = params.placeholder || null; + this.inputRows = params.rows || null; + this.inputAutosize = params.autosize || null; + this.inputMaxlength = params.maxlength || null; this.applyHook = params.onApply || null; this.beforeSendHook = params.onBeforeSend || null; + this.applyButtonText = params.applyButtonText || null; + this.submitButtonText = params.submitButtonText || null; this.renderHook = params.onRender || null; this.pendingAutoSubmit = !!params.autoSubmit; // @@ -841,21 +825,51 @@ export default { border-top: 1px solid rgba(0, 0, 0, 0.05); } - .ai-assistant-output-meta { + .ai-assistant-output-apply { + position: sticky; + top: 0; + right: 0; + z-index: 1; display: flex; - justify-content: space-between; + justify-content: flex-end; align-items: center; - gap: 12px; + height: 24px; + color: #999; + gap: 4px; } - .ai-assistant-output-meta-left { - flex: 1; - min-width: 0; + .ai-assistant-output-icon { + font-size: 16px; + color: #52c41a; + } + + .ai-assistant-apply-btn { + font-size: 13px; + display: flex; + align-items: center; + justify-content: center; + } + + .ai-assistant-output-status { + color: #52c41a; + } + + .ai-assistant-output-error { + color: #ff4d4f; + } + + .ai-assistant-output-meta { + display: flex; + align-items: center; + height: 24px; + margin-top: -24px; } .ai-assistant-output-model { - display: inline-flex; - align-items: center; + max-width: 50%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: #2f54eb; @@ -875,34 +889,6 @@ export default { margin-top: 8px; } - .ai-assistant-output-meta-right { - display: flex; - align-items: center; - font-size: 12px; - color: #999; - gap: 4px; - } - - .ai-assistant-output-icon { - font-size: 16px; - color: #2f54eb; - } - - .ai-assistant-apply-btn { - font-size: 13px; - display: flex; - align-items: center; - justify-content: center; - } - - .ai-assistant-output-status { - color: #52c41a; - } - - .ai-assistant-output-error { - color: #ff4d4f; - } - .ai-assistant-output-placeholder { margin-top: 12px; font-size: 13px;