feat: i18n

[shaohuzhang1]

What this PR does / why we need it?

Summary of your change

Please indicate you've done the following:

• Made sure tests are passing and test coverage is added if needed.
• Made sure commit message follow the rule of Conventional Commits specification.
• Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

[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/test-infra 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]

No significant issues found in the current code. Here is a brief overview of changes and additions compared to the initial version:

Changes:

1. Added Keys:

   • workflow was added as an option under export default.

2. Renamed Sections:

   • Changed _createApplication_ to _importApplication_, _copyApplication_, and modified some text accordingly.

3. Text Adjustments:

   • Updated labels (overview, demo, setting) with simpler names.
   • Added descriptions and placeholders within fields where applicable.

4. Removed Deprecated Entries:

   • Deleted keys related to "simple configuration."

Additionals:

• Introduced applicationForm.dialogues along with additional options like addDatasetPlaceholder, selected, countDataset.

Improvement Suggestions:

1. Consider consolidating duplicate prompts into singular entries for consistency.
2. Enhance error handling messages, particularly those related to saving and loading configurations, providing more specific feedback on what went wrong if there are still failures after user input checks.

Overall, the structure remains clear and maintains functionality, so further optimizations can focus on refining user experience and improving documentation quality.

[shaohuzhang1]

The provided code seems to be a Vue template for an el-select component with additional functionalities such as displaying models and creating new ones. Here are some optimizations and potential improvements:

Enhancements

1. Use watchEffect() Instead of onMounted:

   • If you want to update dynamically whenever modelValue changes, consider using watchEffect() instead of onMounted. This way, the logic inside getProvider() will automatically run when modelValue is updated.

2. Improve Error Handling:

   • Add more detailed error handling in the asynchronous call to avoid silent failures.

3. Simplify Option Filtering Logic:

   • The filtering logic could be simplified by using .filter(item => item.status === 'SUCCESS').map(item => ({ id: item.id, name: item.name })).

4. Handle Undefined Values:

   • Ensure that all used properties like $i18n.t(...) handle undefined cases gracefully.

5. Extract Repeated Code:

   • Extract reusable functions or components if similar functionality exists elsewhere.

Potential Issues

1. Missing Imports:

   • Missing imports for certain utility functions like relatedObject, useStore, etc., even though they are referenced.

2. Vue Composition API Usage:

   • Verify that all Vue composition hooks (setup, computed, ref) are imported correctly.

Here’s a revised version incorporating these points:

<template>
  <div class="w-full">
    <el-select v-model="modelValue" popper-class="select-model" :clearable="true" v-bind="$attrs">
      <el-option-group
        v-for="(value, label) in options"
        :key="value"
        :label="relatedObject(providerOptions, label, 'provider')?.name"
      >
        <el-option
          v-for="item in value.filter(item => item.status === 'SUCCESS')"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          class="flex-between"
        >
          <div class="flex">
            <span
              v-html="relatedObject(providerOptions, label, 'provider')?.icon"
              class="model-icon mr-8"
            ></span>
            <span>{{ item.name }}</span>
            <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8 mt-4">
              {{ $t('common.public') }}
            </el-tag>
          </div>
          <el-icon class="check-icon" v-if="item.id === modelValue">
            <Check />
          </el-icon>
        </el-option>
        <!-- 不可用 -->
        <el-option
          v-for="item in value.filter(item => item.status !== 'SUCCESS')"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          class="flex-between"
          disabled
        >
          <div class="flex">
            <span
              v-html="relatedObject(providerOptions, label, 'provider')?.icon"
              class="model-icon mr-8"
            ></span>
            <span>{{ item.name }}</span>
            <span class="danger">{{ $t('common.unavailable') }}</span>
          </div>
          <el-icon class="check-icon" v-if="item.id === modelValue">
            <Check />
          </el-icon>
        </el-option>
      </el-option-group>
      <template #footer v-if="showFooter">
        <slot name="footer"></slot>
        <div class="w-full text-left cursor-pointer" @click="openCreateModel()">
          <el-button type="primary" link>
            <el-icon class="mr-4"><Plus /></el-icon>
            {{ $t('views.application.applicationForm.buttons.addModel') }}
          </el-button>
        </div>
      </template>
    </el-select>

    <!-- 添加模版 -->
    <CreateModelDialog
      v-if="showFooter"
      ref="createModelRef"
      @submit="submitModel"
      @change="openCreateModel($event)"
    />

    <SelectProviderDialog
      v-if="showFooter"
      ref="selectProviderRef"
      @change="openCreateModel($event)"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue';
import type { Provider } from '@/api/type/model';
import { relatedObject } from '@/utils/utils'; // Ensure this import is available
import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue';
import SelectProviderDialog from '@/views/template/component/SelectProviderDialog.vue';

import { t } from '@/locales';
import useStore from '@/stores/useMainStore; // Replace with correct store path
defineOptions({ name: 'ModelSelect' });

const props = defineProps<{ 
  modelValue: any,
  options: Map<string, Array<any>>,
  showFooter?: boolean
}>();

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

const modelValue = computed({
  set(val: string | null) {
    if (val != null) {
      emit('update:modelValue', val); // Use explicit non-null assertion
    }
  },
  get() {
    return props.modelValue ?? '';
  }
});

const { model } = useStore();
if (!model.asyncGetProvider) throw new Error("asyncGetProvider method not found");

const selectProviderRef = ref(SelectProviderDialog);
const createModelRef = ref(CreateModelDialog);

let providerOptions: Array<Provider> = [];

const loadProviders = async (): Promise<void> => {
  try {
    const response = await model.asyncGetProvider();
    providerOptions = response.data;
  } catch (error) {
    console.error(error);
  }
};

const openCreateModel = (provider?: Provider): void => {
  if (provider && provider.provider) {
    createModelRef.value!.open({ ...provider });
  } else {
    selectProviderRef.value!.open();
  }
}

const submitModel = () => {
  emit('submitModel');
}

watchEffect(loadProviders, { immediate: true }); // Start fetching data immediately upon loading
</script>

<style scoped lang="scss">
.select-model {
  .el-select-dropdown__footer {
    &:hover {
      background-color: var(--el-fill-color-light);
    }
  }

  .model-icon {
    width: 20px;
  }

  .check-icon {
    position: absolute;
    right: 17px; // Slightly adjust spacing after icon
  }
}
</style>

Make sure to replace incorrect imports with actual paths based on your project structure. Adjust styling values as needed according to your design requirements.