perf: Optimize some styles

[shaohuzhang1]

perf: Optimize packaging
perf: Optimize some styles

[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 HTML and TypeScript components appear to be mostly correct but contain minor syntax errors that will cause Vue.js warnings. Here's the revised version with these issues fixed:

Code Changes

1. <template> Tags: Close every <template> tag properly.

2. Attributes Syntax Error: Replace placement="right" with just placement: "right", and similarly for other attributes where you've replaced double quotes with single quotes and vice versa.

3. Type Definitions: Ensure proper type definitions in properties and emits are specified correctly.

Here's the corrected version:

<template>
  <el-input
    v-model.trim="filterText"
    :placeholder="$t('common.search')"
    prefix-icon="Search"
    clearable
    style="padding: 12px 12px 0 12px;"
  />

  <div class="list flex-wrap">
    <template v-if="filterList.length">
      <el-popover
        v-for="item in filterList"
        :key="item.id"
        placement="right"
        :width="280"
        :show-after="500"
      >
        <template #reference>
          <div
            class="list-item flex align-center border border-r-6 p-8-12 cursor"
            style="width: calc(50% - 6px);"
            @click.stop="emit('clickNodes', item)"
            @mousedown.stop="emit('onmousedown', item)"
          >
            <!--            <LogoIcon v-if="item.resource_type === 'application'" height="32px" />-->
            <el-avatar v-if="isAppIcon(item?.icon)" shape="square" :size="32" style="background: none;">
              <img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
            </el-avatar>
            <el-avatar v-else class="avatar-green" shape="square" :size="32">
              <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
            </el-avatar>
            <span class="ml-8 ellipsis" :title="item.name">{{ item.name }}</span>
          </div>

          <!-- Nested content -->
          <div class="flex-between">
            <div class="flex align-center">
              <!--              <LogoIcon v-if="item.resource_type === 'application'" height="32px"/>-->
              <el-avatar v-if="isAppIcon(item?.icon)" shape="square" :size="32" style="background: none;">
                <img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
              </el-avatar>
              <el-avatar v-else class="avatar-green" shape="square" :size="32">
                <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
              </el-avatar>
              <span class="font-medium ml-8 break-all" :title="item.name">{{ item.name }}</span>
            </div>
            <div v-if="item.type" class="status-tag" style="margin-left: auto">
              <el-tag class="warning-tag" v-if="isWorkFlow(item.type)"> {{ $t('views.application.workflow') }} </el-tag>
              <el-tag class="blue-tag" v-else> {{ $t('views.application.simple') }} </el-tag>
            </div>
          </div>
        </template>
      </el-popover>
    </template>
    <el-empty v-else :description="$t('common.noData')" />
  </div>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue';
import { isAppIcon, resetUrl } from '@/utils/common';
import { isWorkFlow } from '@/utils/application';

const props = defineProps<{ list: any[] }>();

const emit = defineEmits<{
  (e: 'clickNodes', item: any): void,
  (e: 'onmousedown', item: any): void
}>();

const filterText = ref('');
const filterList = ref<any[]>([]);
</script>

Additional Suggestions

• Consistent Variable Naming: Use consistent naming conventions for variables like filterText, filterList, etc.

• Documentation Comments: Add TypeScript doc comments inline where appropriate to make the code more readable and understandable.

• Code Readability: Consider breaking down longer functions or methods into smaller ones if necessary for maintainability.

These changes should resolve the syntax errors and improve the readability of your component.

[shaohuzhang1]

The code appears to be generally well-structured, but there are a few areas that could improve:

1. Comments and Documentation: Ensure all comments explain each part of the code, especially complex logic or significant changes.

2. Code Formatting:

   • Use consistent indentation (e.g., 4 spaces).
   • Add line breaks between blocks for readability.

3. Complexity Management:

   • The new ComplexPermission call is slightly repetitive. Consider extracting it into a reusable function for easier maintenance.

4. String Interpolation:

   • Use template literals consistently for better readability and security when dealing with strings.

5. Conditional Logic:

   • Consider refactoring conditionals to reduce duplication. For example, you can extract common parts of conditions into separate variables.

Here's an updated version of the code with some of these improvements:

<template>
  <el-scrollbar style="height: 100%">
    <!-- ... (previous content unchanged) -->
    
    <div class="actions">
      <span v-if="$hasPermission(new ComplexPermission([RoleConst.ADMIN], [PermissionConst.CHAT_USER_AUTH_EDIT], []))" class="mr-12">
        <el-button @click="submit(authFormRef)" type="primary" :disabled="loading">{{ $t('common.save') }}</el-button>
      </span>
      
      <span>
        <el-button @click="submit(authFormRef, 'test')" :disabled="loading">{{ $t('views.system.test') }}</el-button>
      </span>
    </div>

    <!-- ... (rest of the component unchanged) -->
  </el-scrollbar>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { FormInstance, reactive, ref } from 'vue';
// other imports

export default defineComponent({
  setup(props, context) {
    // ... (setup method unchanged)

    const actionsHtml = (
      <div class="actions">
        <span v-if={this.$hasPermission(new ComplexPermission([RoleConst.ADMIN], [PermissionConst.CHAT_USER_AUTH_EDIT], []))} class="mr-12">
          <el-button onClick={() => this.submit(this.authFormRef)} type="primary" disabled={this.loading}>{this.$t('common.save')}</el-button>
        </span>
        
        <span>
          <el-button onClick={() => this.submit(this.authFormRef, 'test')} disabled={this.loading}>{this.$t('views.system.test')}</el-button>
        </span>
      </div>
    );

    return {
      authFormRef,
      actionsHtml,
      // other returns
    };
  }
});
</script>

<style scoped>
.actions span:not(:last-child) {
  margin-right: 12px;
}
</style>

These changes help maintain cleaner and more readable code while ensuring proper functionality.

[shaohuzhang1]

The provided code looks generally clean and well-structured. There are a few areas where improvements could be made:

1. Empty rules Object: The "config.ldap_mapping" rule is empty, which might not cover all necessary edge cases. Consider adding additional validation checks for this field.

2. Duplicated Code in getDetail() Function: In the getDetail() function, setting form.value based on the response data includes logic to parse JSON strings back into objects. This can be moved to a more centralized utility function to avoid repetition.

3. Comments: While current comments are concise, they do add some clarity. However, removing unnecessary comments can make the code cleaner without losing readability.

Here’s an improved version of the code with these suggestions addressed:

// ... rest of the file remains mostly unchanged ...

const rules = reactive<FormRules<any>>({
  // ... existing rules remain mostly unchanged ...
  
  'config.ldap_mapping': [
    { required: true, message: t('views.system.authentication.ldap.ldap_mappingPlaceholder'), trigger: 'blur', },
  ],

});

function getDetail() {
  api.system.getAuthConfig().then((res) => {
    if (res.data && JSON.stringify(res.data) !== '{}') {
      form.value = res.data;
      if (res.data.config.ldap_mapping) {
        form.value.config.ldap_mapping = JSON.parse(res.data.config.ldap_mapping);
      }
    } else {
      // Handle case when no data is received or it's empty object
      console.error("No authentication config found.");
    }
  });
}

// Additional utility functions can be added here if needed

// ... close the file ...

These changes help maintain readability and reduce redundancy within the codebase.