浏览代码

feat:添加暗黑模式样式,修改测试问题

AmandaG 6 月之前
父节点
当前提交
c878875855

+ 4 - 1
src/styles/theme-g.scss

@@ -91,5 +91,8 @@
   --color-dialogue_title: linear-gradient(90deg, var(--1-gradient-ai-robot-faq-0, #FFA8C7) 1.77%, var(--1-gradient-ai-robot-faq-46, #5988f3) 46.77%);
   --color-dialogue_content-bg:linear-gradient(117deg, var(--1-gradient-ai-robot-0, #525CBA) 4.31%, var(--1-gradient-ai-robot-15, #5A57B2) 14.24%, var(--1-gradient-ai-robot-38, #5F54AD) 29.71%, var(--1-gradient-ai-robot-59, #664EA2) 43.72%, var(--1-gradient-ai-robot-83, #694CA0) 59.35%, var(--1-gradient-ai-robot-100, #724493) 70.56%);
   --color-arrow-hoverL: #FCEEE3;
-
+  --color-prompt-preview-bg: #403844;
+  --color-prompt-diaolog-bg: #3A4149;
+  --color-prompt-disabled-bg: rgba(244, 244, 244, 0.20);
+  --color-prompt-disabled-border: rgba(101, 111, 125, 0.30);
 }

+ 4 - 0
src/styles/theme.scss

@@ -311,6 +311,10 @@
   --color-output-select-text: #F9A725;
   --color-loading-text: #b5b9bf;
   --color-warning-tips-bg: #fff4d1;
+  --color-prompt-preview-bg: #FCF7FF;
+  --color-prompt-diaolog-bg: #F8F9FD;
+  --color-prompt-disabled-bg: #F4F4F4;
+  --color-prompt-disabled-border: rgba(234, 235, 237, 0.30);
 }
 
 :root.dark {

+ 15 - 11
src/views/PromptConfiguration/src/PromptConfiguration.vue

@@ -23,7 +23,6 @@ const formatList = ref([])
 const promptValue = ref([])
 const PromptdialogVisible = ref(false)
 const PromptdialogInnerVisible = ref(false)
-const testquestion = ref(false)
 const UnableSaveVisible = ref(false)
 const SaveedVisible = ref(false)
 const ChangeLogList = ref([])
@@ -37,6 +36,16 @@ const addstepdata = () => {
   RespnseConfigurationref.value.addstepdata()
 }
 
+// 计算属性
+const testquestiontEmpty = computed(() => {
+  // 去除首尾空格后检查长度
+  if(rolename.value.trim().length == 0 || professionalfield.value.trim().length == 0 || maintasks.value.trim().length == 0 || tablename.value.trim().length == 0 || tableDataList.value.length == 0 || stepData.value.length == 0 || formatList.value.length == 0) {
+    return true
+  } else {
+    return false
+  }
+})
+
 const getPromptConfiguration = () => {
   $api.getPromptConfiguration().then((res) => {
     if (res.code === 200) {
@@ -53,11 +62,6 @@ const getPromptConfiguration = () => {
       promptValue.value = res.data.prompt_summary
       editid.value = res.data.id
       ChangeLogList.value = res.data.prompt_log_record
-      if(rolename.value != '' && professionalfield.value != '' && maintasks.value != '' && professionalfield.value != '' && tableDataList.value.length != 0 && stepData.value.length != 0 &&  formatList.value.length != 0 &&  outputvalue.value != '' && prompttextvalue.value != '') {
-        testquestion.value = false
-      } else {
-        testquestion.value = true
-      }
     }
   })
 }
@@ -221,7 +225,7 @@ onMounted(() => {
       <div class="flex">
         <div style="width: 50%; margin-right: 8px;">
           <div class="little-title">角色名称</div>
-          <el-input v-model="rolename" placeholder="为AI Robot创建一个角色名称" class="input-name"></el-input>
+          <el-input v-model="rolename" placeholder="为AI Robot创建一个角色名称" class="input-name" @change="EditPrompt"></el-input>
         </div>
         <div style="width: 50%;">
           <div class="little-title">专业领域</div>
@@ -239,7 +243,7 @@ onMounted(() => {
       <div class="flex">
         <div style="width: 50%; margin-right: 8px;">
           <div class="little-title"><span class="stars_red">*</span>表名</div>
-          <el-input v-model="tablename" placeholder="创建一个表名" class="input-name"></el-input>
+          <el-input v-model="tablename" placeholder="创建一个表名" class="input-name" @change="EditPrompt"></el-input>
         </div>
         <div style="width: 50%;">
           <div class="little-title">表描述</div>
@@ -270,7 +274,7 @@ onMounted(() => {
      <div class="propmt-border-colorful">
         <div class="prompt-title" style="padding: 0 14px;">预览与测试</div>
         <div style="margin-top: 16px;">
-          <PreviewTesting ref="PreviewTestingref" :prompttext="prompttextvalue" :testquestion="testquestion" :promptValue="promptValue" @handleprompt="EditPrompt"></PreviewTesting>
+          <PreviewTesting ref="PreviewTestingref" :prompttext="prompttextvalue" :testquestion="testquestiontEmpty" :promptValue="promptValue" @handleprompt="EditPrompt"></PreviewTesting>
         </div>
      </div>
      <div class="propmt-save"><el-button class="el-button--main" @click="SavePromptConfiguration"><span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px;"></span>保存生效</el-button></div>
@@ -335,7 +339,7 @@ onMounted(() => {
   border-radius: 12px;
   background-clip: padding-box, border-box;
   background-origin: padding-box, border-box;
-  background-image: linear-gradient(to bottom, #FFF, #FFF), linear-gradient(to bottom, #FF7500, #8112FF);
+  background-image: linear-gradient(to bottom, var(--color-mode), var(--color-mode)), linear-gradient(to bottom, #FF7500, #8112FF);
   margin-bottom: 8px;
   padding: 13px 0;
 }
@@ -397,7 +401,7 @@ onMounted(() => {
   overflow-y: scroll;
 }
 .diaolog-content {
-  background-color: #F8F9FD;
+  background-color: var(--color-prompt-diaolog-bg);
   padding: 16px;
   margin-bottom: 8px;
   border-radius: 6px;

+ 6 - 5
src/views/PromptConfiguration/src/components/PreviewTesting.vue

@@ -140,7 +140,7 @@ const PromptAITest = (val:any) => {
 
 <style lang="scss" scoped>
 .preview {
-  background: #FCF7FF;
+  background: var(--color-prompt-preview-bg);
   padding: 16px;
 }
 .preview_title {
@@ -172,8 +172,8 @@ const PromptAITest = (val:any) => {
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  border: 1px solid rgba(234, 235, 237, 0.30);
-  background-color: #F4F4F4;
+  border: 1px solid var(--color-prompt-disabled-border);
+  background-color: var(--color-prompt-disabled-bg);
   color: var(--color-neutral-3);
   font-size: 12px;
   font-weight: 400;
@@ -192,7 +192,7 @@ const PromptAITest = (val:any) => {
   border-radius: 12px;
   background-clip: padding-box, border-box;
   background-origin: padding-box, border-box;
-  background-image: linear-gradient(to bottom, #FFF, #FFF), linear-gradient(to bottom, #FF7500, #8112FF);
+  background-image: linear-gradient(to bottom, var(--color-mode), var(--color-mode)), linear-gradient(to bottom, #FF7500, #8112FF);
   padding: 8px;
   margin-right: 8px;
   cursor: pointer;
@@ -210,6 +210,7 @@ const PromptAITest = (val:any) => {
   min-height: 80px;
   background-color: #2B2F36;
   color: rgba(240, 241, 243, 0.30);
+  border:1px solid var(--color-border);
   border-radius: 6px;
 }
 .test_result_text {
@@ -239,7 +240,7 @@ const PromptAITest = (val:any) => {
   background-color: transparent;
 }
 .diaolog-content {
-  background-color: #F8F9FD;
+  background-color: var(--color-prompt-diaolog-bg);
   padding: 8px;
   max-height: 720px;
   line-height: 21px;