perf: Icon update

[wangdan-fit2cloud]

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-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]

The provided code appears to be well-written and follows best practices. However, I can suggest some minor improvements:

1. Simplify Conditional Statements: The conditional statement that checks different permissions (ROLE_CONST, PERMISSION_CONST) and applies specific routes could be simplified by grouping conditions.

2. Remove Duplicate Code: There are two similar snippets checking for permissions and returning a route; these can be condensed into one block using logic flow control.

Here's an updated version with the suggested changes:

const get_resource_management_route = () => {
  if (
    hasPermission([RoleConst.ADMIN, PermissionConst.RESOURCE_APPLICATION_OVERVIEW_READ], 'OR')
    || hasPermission([RoleConst.ADMIN, PermissionConst.RESOURCE_APPLICATION_ACCESS_READ], 'OR')
    || hasPermission([RoleConst.ADMIN, PermissionConst.RESOURCE_APPLICATION_CHAT_USER_READ], 'OR')
    || hasPermission([RoleConst.ADMIN, PermissionConst.RESOURCE_APPLICATION_CHAT_LOG_READ], 'OR')
  ) {
    return `/application/${from}/${id}/WORK_FLOW/overview`;
  }
  else {
    return `/system/resource-management/application`;
  }
}

const get_route = () => {
  if (
    hasPermissions([RoleConst.ADMIN, PermissionConst.RESOURCE_APPLICATION_OVERVIEW_READ], 'AND') ||
    (hasPermissions([RoleConst.ADMIN, PermissionConst.RESOURCE_APPLICATION_ACCESS_READ], 'AND') &&

[shaohuzhang1]

Here's a detailed analysis of the code:

Irregularities and Issues:

1. Incorrect Syntax: There is an extra closing square bracket [ in new ComplexPermission(...).

2. Button Spacing Issue: The buttons have uneven spacing between them, which is visually inconsistent with the design of .vertical-middle heavier.

3. Icon Visibility Logic: The visibility logic for showing/hiding passwords seems to be incorrect when the key is 'app_secret'. It should toggle based on whether showPassword[item.key][key] is true, not just checking item.key === 'app_secret' alone.

4. Lack of CSS Styling: Some elements like buttons are missing appropriate styling classes (el-button). This can lead to visual inconsistencies.

5. Duplicate Code: The button creation logic inside each <el-col> is somewhat repetitive. Consider extracting it into a reusable component.

6. Undefined Variables: In functions that reference variables like $t, roleConsts, etc., they are undefined at the time of evaluation. Ensure these are properly defined or provided before this part of the code runs.

7. Platform Configuration Check: When setting up platforms, ensure all default configurations are assigned correctly regardless of the platform type.

8. Form Field Names: The form field names need validation for keys that might miss handling (e.g., 'callback_url') which could potentially break the application.

Suggestions for Optimization and Clarification:

1. Correct Syntax: Replace '[RoleConst.ADMIN],[PermissionConst.LOGIN_AUTH_EDIT],[],''OR',')' with `['ROLE_ADMIN', 'PERMISSION_LOGIN_AUTH_EDIT'], []'AND'.

2. Ensure Proper Initialization: Make sure all required dependencies (like Vuex state modules) are initialized before accessing them within components.

3. Refactor Button Creation: Extract the common styles and icon toggling logic into a utility function or Vue composition API setup for better maintainability and readability.

4. Complete Platform Setup: Include a check to ensure default values, such as empty strings for sensitive fields (like app_key), are handled appropriately during initialization.

5. Improve Accessibility: Use semantic HTML where necessary. For instance, add ARIA attributes to improve assistive technology integration.

By addressing these issues and optimizing the codebase, you can enhance its usability, robustness, and overall functionality.