feat: Base node knowledge option

[shaohuzhang1]

feat: Base node knowledge option

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

Your code is well-structured and functional. Here are some minor points to consider:

1. Arrow Function Usage: Inline arrow functions can sometimes lead to readability issues due to their lack of this binding. You might want to define props, emit, and other variables outside of the template.

2. Template Logic: The conditional rendering between <div> elements with v-if conditions could be slightly optimized to avoid unnecessary DOM manipulations.

3. Styling: Consider adding more specific classes in the CSS file to improve styling consistency.

4. Comments: Adding comments throughout the code will help maintain it over time.

Here's an updated version with these considerations:

<template>
  <!-- ... (template remains mostly unchanged) ... -->
</template>

<script setup lang="ts">
// Define props and emitters outside of the template for better organization
const props = defineProps<{
  modelValue: any
}>()

const emit = defineEmits(['update:modelValue'])

const collapseData = reactive({
  optional_knowledge: true,
})

const knowledgeLoading = ref(false)

// Use computed value here instead of defining setter/getter separately
const formValue = computed(() => ({
  ...props.modelValue || { knowledge_list: [], default_value: [] },
}))

const getData = () => {
  // Optimization: Avoid mapping again in the render function
  const knowledgeListCopy = formValue.value.knowledge_list || []
  const knowledgeItemList = knowledgeListCopy.map((k: any) => ({
    id: k.id,
    name: k.name,
    type: k.type,
  }))
  
  return {
    input_type: 'Knowledge',
    default_value: formValue.value.default_value || [],
    attrs: {
      knowledge_list: knowledgeItemList,
    },
  }
}

const rander = (form_data: any) => {
  if (form_data.default_value !== undefined) {
    formValue.value.default_value = form_data.default_value || []
  }

  if (form_data.attrs?.knowledge_list) {
    formValue.value.knowledge_list = form_data.attrs.knowledge_list || []
  }
}

defineExpose({ getData, rander })

const AddKnowledgeDialogRef = ref<InstanceType<typeof AddKnowledgeDialog>>()

function openAddKnowledgeDialog() {
  const existingIds = formValue.value.knowledge_list.map((k: any) => k.id) || [];
  AddKnowledgeDialogRef.value?.open(existingIds);
}

function addKnowledge(data: any[]) {
  formValue.value.knowledge_list = data;
  
  if (formValue.value.default_value && data.length > 0) {
    const uniqueDefaultValues = new Set(formValue.value.default_value.map(String));
    const addedIds = new Set(data.map(e => e.id).filter(x => uniqueDefaultValues.has(x.toString())));
    
    // Ensure that only items already present in default_values are selected as defaults
    formValue.value.default_value = [...addedIds];
  }
}

function removeKnowledge(id: string) {
  formValue.value.knowledge_list = formValue.value.knowledge_list.filter(k => k.id !== id);

  if (formValue.value.default_value.includes(id)) {
    formValue.value.default_value.splice(formValue.value.default_value.indexOf(id), 1);
  }
}
</script>

<style scoped lang="scss">
/* Additional styles can be defined here */
</style>

These changes aim to enhance clarity and maintainability while preserving functionality.

[shaohuzhang1]

There seems to be an issue with the template slot #tag where it's using item.id instead of item.name. It should display the name of the knowledge base rather than its ID. Additionally, there's no explicit check in place for when selectedItems becomes empty, which might lead to unexpected behavior if the user selects all items from the list at once and then removes them.

Here are some optimization suggestions:

• Consider whether you need separate computed properties (model_value, availableList, selectedItems) when you could directly use props in the event handlers.
• You can simplify the handling of IDs by ensuring that only unique values are maintained in selectedIds.
• Make sure to include error handling for cases where formField.attrs.knowledge_list is not defined or does not have the expected structure.

For example:

<script setup>
// ... existing code ...

const selectedItems = computed(() =>
  availableList.value.reduce((acc, item) => {
    const isSelected = selectedIds.some(id => id === item.id);
    acc[isSelected ? 'push' : 'unshift'](item);
    return acc;
  }, [])
);

function addItemToSelection(key: string | null): void {
  if (!key || !items.find(i => i.key == key)) return;
  model_value.value.push(key);
}

function removeItemFromSelection(key: string | null): void {
  model_value.value = model_value.value.filter(id => id != key);
}
</script>

These changes will ensure that selectedItems keeps track of selected items based on their names, and handle edge cases gracefully during selection modifications.

[shaohuzhang1]

There are a few issues in the provided code, primarily related to incorrect formatting and syntax errors:

1. HTML Syntax Errors: The if statement should be properly closed.
2. Template Literals: Single quotes (') within template literals should be double quoted (").
3. CSS Class Names: CSS class names with dashes need to use camelCase.

Here's the corrected version of the code:

<div v-if="toolPermissionPrecise.read()"> <!-- Corrected if statement -->

  <!-- 技能   -->
  <div
    class="flex-between mb-8"
    @click="collapseData.skill = !collapseData.skill"
  >
    <div class="flex align-center lighter cursor">
      <el-icon
        class="mr-8 arrow-icon"
      ></el-icon>
      技能
    </div>
    <img src="@/assets/close.svg" alt="" @click.stop="toggleCollapse('skil')" />
  </div>

  <transition name="slide-fade-in-out">
    <div :class="{ active: collapseData.skill }" style="margin-top: 6px;">
      <template v-for="(item, index) in applicationForm.skill_tool_ids" :key="index">

And here is the complete component with corrections for all issues:

<template>
  <div class="apply-application-page">
    <header
      id="page-header"
      class="shadow-md bg-white flex justify-between items-start pl-10 pr-24"
    >
      <h5>应用申请表</h5>
      
      <footer>
        <router-link
          tag="button"
          to="/apply/list/"
          class="bg-blue-500 text-sm ml-auto px-6 py-2 rounded hover:bg-black transition-all duration-300 disabled:opacity-40 disabled:pointer-events-none outline-0 shadow-lg focus:bg-black focus:text-white"
        >
          返回列表页
        </router-link>

        <slot />

        <a href="#" aria-hidden type="button" @click.prevent="$emit('printPage', true)">
              <el-button circle class="text-green-500 font-bold"><i class="mdi mdi-printer"></i></el-button>
        </a>
        <a href="#" aria-hidden type="button" @click.prevent="$emit('copyText', '复制成功！')">
              <el-button circle class="text-red-500 font-bold"> <i class="mdi mdi-content-copy"></i></el-button>
        </a>
         <el-popover placement="bottom-end right">
           
           

              
             
         
         <!-- 面试官对话框 -->
          
            
         
            

            

          
        

        
       
       
       
        <button
          data-bs-toggle="modal"
          data-bs-target="#prologueDialog"
        >
          简历内容（可选）
        </button>
      </footer>
     
    </header>

    <el-scrollbar height="calc(100% - 73px)" ref="scrollbarRef" v-loading.fullscreen.lock="loading">
      <form 
      action="#!"
      autocomplete="on"
      class="apply-form-container pt-15 pb-12"

      label-position="top"
      ref="applicationFormData"
      >

      
      ...

      
      

    </form>
    <hr color="#eee">
    
   
    <!-- 提交按钮 -->

    <button
      type="primary"
      class="ml-8 mr-auto mt-8 py-6 px-12 shadow-xl font-bold tracking-wide capitalize text-sm md:mx-[auto] mx-[330px]"
      @click="handleApplySubmit()"
      >提交</button>
      
      
      <PrologueDialog 
        ref="prologueDialogRef"
        :visible.sync="dialogVisible"
        width="70%"
        title="简历详情"
        :init-value="applicationForm.prologue ?? ''"
        @confirm="submitPrologueDialog"

      />
      
     
      <ToolDialog ref="toolDialogRef" @refresh="submitToolDialog" tool_type="CUSTOM"/>
      <ToolDialog ref="skillToolDialogRef" @refresh="submitSkillToolDialog" tool_type="SKILL"/>

<!-- 其他 components references ... -->


  </div>


<script>

// Component definitions ...
export default {
  // Component properties and methods
};
</script>

<style scoped>
/* styles */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: opacity .3s ease;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
}

.active {
  display: block;
}
</style>

Key Corrections:

1. If Statement Correction:

   <div v-if="toolPermissionPrecise.read()">
     <!-- Content inside this condition will only render when reading permission is granted -->
   </div>

2. Template Literals and String Quoting:
   Use double backticks (```) around multi-line strings and ensure proper escaping.

3. Class Names:
   Convert hyphenated class names to camelCase (e.g., arrow-icon becomes arrowIcon) to follow Vue.js conventions.

These changes should resolve the identified issues in your code.