Refine English translation

[JohnNiang]

What this PR does / why we need it?

This PR cherry-picks from #7232, #7247, #7318, #7353, #7358 and #7399, which applied for 1Panel v1.

Summary of your change

• Refine English translation (Refine English translation #7232)
• Refine English translation (Refine English translation  #7247)
• Refine pluralization of some English words (Refine pluralization of some English words #7318)
• Refine English translation again and again (Refine English translation #7353)
• Replace whitelist and blacklist with allowlist and blocklist (Replace whitelist and blacklist with allowlist and blocklist #7358)
• Refine English translation and UI style (Refine English translation and UI style #7399)

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.

Refine English translation

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign ssongliu for approval. For more information see the Code Review Process.

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

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

[wanghe-fit2cloud]

The provided code snippet contains a few changes that could be optimized or improved:

• Translation Parameter: The :$t(..) function now takes an additional parameter to specify the index of placeholders if using array translation messages. However, this isn't utilized in this particular section.

• Inline Styles: Inline styles within <style> tags are not recommended for readability and maintainability. It would benefit from breaking them into individual CSS classes and applying those classes in the HTML where necessary.

• Element Classes: Using classes can make it easier to manage styling and potentially improve performance when dynamically adding/removing elements during rendering. For instance, .system-label should ideally apply consistent styles across all usage to avoid repetitive inline styles.

Here is how some of these points might look after refining the CSS:

<style lang="scss">
.h-overview .el-col {
  span,
  div.count > span {
    cursor: pointer; /* Added cursor change for click events */
  }
}

.el-descriptions-item.system-content {
  line-height: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "Microsoft YaHei";
  
  & > .el-descriptions__label {
    display: flex;

    // Remove unnecessary padding/margin
    margin-right: 8px;
    

    &:not(:first-child)::before {
      content: "• ";
      position: absolute;
      top: -7px; /* Adjust positioning based on needs */
    }
  }

  &.__cell-value-wrapper .el-button-group .el-button {
    padding: 2px 6px; /* Optional: reduce button size if needed */
    
    &:not(:last-child):after {
      content: "|"; /* Add separator between buttons */
      margin-left: 3px; /* Optional: add space around separators if needed */
    }
  }


  strong { font-weight: bold !important} /* Apply font weight */

  p span {line-height: 18px }   /* Apply specific style to child spans */

}
</style>

In summary, while there aren’t major issues with the functional aspect of the code itself, improvements such as refactoring styles, removing unused attributes like background, and applying consistent use of classes are beneficial for maintaining clarity and ease of modification in future updates.

[wanghe-fit2cloud]

The code appears to be correct and functional at first glance. Here are some minor optimizations and notes:

1. Template Literals: You can use template literals with backticks ( ) instead of concatenation with the + operator for cleaner readability.

2. String Interpolation: Using ES6 string interpolation within the t method from Vue I18n can make the code more readable and concise.

Here's the optimized version using these techniques:

function initChart() {
    switch (props.option.formatStr) {
        case 'KB/s':
            for (const item of datas) {
                res +=
                    `${item.marker} ${i18n.global.t('chartSeries')}: ${computeSizeFromKBs(item.data)}\n`;
            }
            break;
        case 'KB':
            for (const item of datas) {
                res +=
                    `${item.marker} ${i18n.global.t('chartSeries')}: ${computeSizeFromKB(item.data)}\n`;
            }
            break;
        case 'MB':
            for (const item of datas) {
                res +=
                    `${item.marker} ${i18n.global.t('chartSeries')}: ${computeSizeFromMB(item.data)}\n`;
            }
            break;
        default:
            res +=
                `${item.marker} ${i18n.global.t('chartSeries')}:\`${item.data}${props.option.formatStr}\`\n`;
    }
}

Key Changes:

• Template Literals: Replace direct string concatenation with template literals, which makes the syntax cleaner and easier to read.

  `${item.marker} ${i18n.global.t('chartSeries')}: ${computeSizeFromKBs(item.data)}`

• Interpolated Translation Keys: Use double quotes around template variable names for clarity. If you prefer single quotes, ensure consistency within the same code block.

These changes improve maintainability and reduce visual clutter while maintaining the functionality of the code.

[wanghe-fit2cloud]

The provided code snippet appears to be editing an object message that likely contains localized strings for various parts of a user interface. Here are some general observations and suggestions:

Observations

1. Consistency in String Keys: The keys "true", "false", and "colon" should maintain uniqueness and consistency if used as keys.

2. Duplicate Strings: There are duplicate entries for certain string translations, such as "remoteConnHelper" appearing twice. This can make the structure inconsistent and might result in unexpected behavior.

3. Missing Translation Entries: Not all expected translation strings are present in the provided data. A complete list would include options like "addDomainHelper", "domainConfigHelper", etc.

4. Special Characters: Proper handling of special characters (e.g., commas, backslashes) is crucial to maintaining correct formatting in UI elements.

5. Capitalization Consistency: Ensure consistent capitalization across similar phrases for better readability.

6. Unused Entries: Remove unnecessary entries to keep the code cleaner and efficient.

Suggestions

1. Remove Duplicates and Unused Entries:

   const message = {
       // Maintain unique key-value pairs here...
   };

2. Expand Complete Translation List:

   const message = {
       true: '是',
       false: '否',
       colon: '：',
       example: '例：',
       fit2cloud: '飞致云',
       lingxia: '凌霞',
       
       // Add more complete translations...  
   };

3. Check Special Character Handling:

   const message = {
       // Handle special character properly like this:
       remoteConnHelper: 'root 帐号远程连接 MySQL 有安全风险，开启需谨慎！'
   };

4. Ensure Capitalization Consistency:

   const message = {
       true: '是',
       false: '否',
       colon: '：',
       example: '例：',
       fit2cloud: '飞致云',
       lingxia: '凌霞'   
   }

5. Optimize Memory Usage:
   If memory usage is a concern, consider merging adjacent objects where possible.

By addressing these points, you can ensure that the message object remains clean and functional while adhering to best practices for localization.

[wanghe-fit2cloud]

The provided code changes appear to primarily involve translations and small adjustments within the HTML elements of a web application built with Vue.js. Here's my analysis:

Translation Changes

• Lines 48-50:

   <span>{{ $t('menu.website') }}</span> -> <span>{{ $t('menu.website', 2) }}</span>

  This uses v-t interpolation (likely from i18nextVue or similar library). The addition of the second argument (2) could indicate that it expects a plural form.

• Similar pattern throughout: The same logic is applied to other menu options like "Database," "Cron job," "System Info."

Recommendations:

Ensure that i18n handles these plurals correctly and provides the appropriate plural forms in your locale files if necessary.

UI Adjustments

These changes also include minor styling updates to .system-content.

• Classes added/removed:
  • Removed borders from certain elements.
  • Set backgrounds and widths to better fit the layout.
  • Allowed text to wrap without overflowing content boxes.

Recommendation:

Keep an eye on how these styles affect accessibility and responsiveness across different screen resolutions and devices. Ensure proper fallbacks for elements that lose their basic style attributes.

Potential Issues

No significant issues arise from the code itself, but there might be related problems elsewhere in your app that you need to address, such as ensuring all translated strings contain valid plural forms or testing the app thoroughly after making these changes.

Overall, these updates should improve readability and maintainability while adhering to best practices.

[wanghe-fit2cloud]

The code you provided has several minor improvements that can be made:

1. Consistent String Interpolation: Ensure consistent usage of string interpolation (i18n.global.t(...)) throughout the computeSizeFrom* function calls to improve readability.

2. Remove Duplicate Code: Instead of repeating similar logic for different unit conversion strings, you can create a helper function that takes a value and returns its formatted result based on the current theme setting.

Here's an optimized version of the initChart function with these changes applied:

function initChart() {
    let res = '';
    switch (props.option.formatStr) {
        case 'KB/s':
            for (const item of datas) {
                const size = computeSizeFromKBs(item.data);
                res += `${item.marker} ${item.seriesName}${i18n.global.t('commons.colon')} ${size}<br>`;
            }
            break;
        case 'KB':
            for (const item of datas) {
                const size = computeSizeFromKB(item.data);
                res += `${item.marker} ${item.seriesName}${i18n.global.t('commons.colon')} ${size}<br>`;
            }
            break;
        case 'MB':
            for (const item of datas) {
                const size = computeSizeFromMB(item.data);
                res += `${item.marker} ${item.seriesName}${i18n.global.t('commons.colon')} ${size}<br>`;
            }
            break;
        default:
            // Handle other cases if needed
            break;
    }

    return re;
}

Additionally, consider implementing a helper function to handle the formatting in a more modular way:

import { computeSizeFromKBs, computeSizeFromKB, computeSizeFromMB } from '@/utils/util';

function formatSize(size, formatStr, isDarkTheme) {
    const postfixes = ['KB/s', 'KB', 'MB'].includes(formatStr)
        ? ['B/s', 'B', 'MB']
        : ['MB/s'];
    
    return size.toString() + postfixes[postfixes.indexOf(formatStr)];
}

// Usage within initChart
let res = '';
switch (props.option.formatStr) {
    case 'KB/s':
        for (const item of datas) {
            const formattedValue = formatSize(computeSizeFromKBs(item.data), 'KB/s', isDarkTheme);
            res += `${item.marker} ${item.seriesName}: ${formattedValue}<br>`;
        }
        break;
    case 'KB':
        for (const item of datas) {
            const formattedValue = formatSize(computeSizeFromKB(item.data), 'KB', isDarkTheme);
            res += `${item.marker} ${item.seriesName}: ${formattedValue}<br>`;
        }
        break;
    case 'MB':
        for (const item of datas) {
            const formattedValue = formatSize(computeSizeFromMB(item.data), 'MB', isDarkTheme);
            res += `${item.marker} ${item.seriesName}: ${formattedValue}<br>`;
        }
        break;
    default:
        // Handle other cases if needed
        break;
}

return res;

This approach makes the code cleaner and easier to maintain, especially when adding support for additional units or adjusting formats dynamically.

[wanghe-fit2cloud]

Code Differences

Irregularities and Potential Issues:

1. Duplicate Key Error:

   • The key "colon" appears twice within the message object, once with a value of '：' at line 4, and again as an empty string at lines 26 and 126.

2. Unused Keys:

   • The keys "colon" at line 28 are also unused since it's assigned to an empty string.
   • The key "noRefresh" is repeated three times without explanation (lines 28, 97, and 127).

3. String Formatting Errors:

   • In several contexts, there are errors in string formatting where backticks () should be replaced with single quotes ('') or other appropriate delimiters to ensure correct execution in JavaScript.

4. Typographical Errors:

   • A small typo exists in one of the strings: "飞致云"

Optimization Suggestions:

1. Remove Unused Duplicates:

   • Remove the duplicate keys "colon".
   • If they can't be removed, explain their purpose if they serve different purposes elsewhere in the code.

2. Fix String Formatting Errors:

   • Ensure that any string literals have consistently either single or double quotation marks. For example, replace \r\n with just \n.

3. Correct Typographical Errors:

   • Fix the typographical error in the string "飞致云", replacing it with the proper name, assuming its intended spelling was indeed "飞致云".

Overall, these changes will help improve the readability and maintainability of the codebase, ensuring fewer errors and improving user experience through better functionality.

[wanghe-fit2cloud]

Changes Summary

1. Localizations:

   • Added {{ $t('menu.website', 2) }}, {{ $t('menu.database', 2) }}, and {{ $t('menu.cronjob', 2) }} to translate menu items.

2. Descriptions Component Enhancements:

   • The .el-descriptions component now has border="true" added directly inside it, changing its default style from false.
   • Labels within el-descriptions-item have been given a new label-class-name=".system-label" with additional styles applied.

3. System Status Section Adjustments:

   • All elements under the .h-systemInfo class are updated to remove borders and backgrounds (border: "none", background: "none") while maintaining their width at "fit-content".
   • White space surrounding labels is removed for cleaner presentation (white-space: nowrap).
   • The description content remains unchanged for these sections except for text alignment (e.g., "text-align: center; line-height: 2em;"; "line-height: normal;";).

4. Customizing Tooltip Styles in Menu Items:

New Tooltip Style:

.tooltip {
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--panel-tooltip-color);
};

Changes Summary of Tooltip Styling:

• Updated the .tooltip class to ensure better readability across different screen sizes.
• Slightly increased the font size for tooltip texts.

---

These changes primarily focus on enhancing UI styling and localization efforts without altering fundamental functionalities.

[wanghe-fit2cloud]

The provided code makes several changes that are intended to improve clarity and maintainability. Here’s a brief summary of the key points:

1. Imported i18next: The addition of importing i18n allows better localization support. This ensures consistent use of internationalized text throughout the application.

2. Internationalization: Multiple strings with hardcoded colons (:) have been replaced with localized equivalents using i18n. For example, 'commons.colon'.

3. Consistent Formatting: Consistent spacing around operators and logical conditions improves readability.

These changes enhance code quality by making it more readable and easier to test across different languages.

Overall, these modifications align well with good coding practices and will ensure that the application is robust and maintainable in the long run.

[wanghe-fit2cloud]

The provided code snippet is for translations of messages into Chinese. However, some changes need to be made:

1. colon key should only be set once for each language.
2. noRefresh can be removed since it's already defined.
3. Add missing translation keys like 'editPermissions', 'sourceFile', and 'viewDetails'.
4. Capitalize 'ManageRemoteServers'.
5. Use singular form for actions like 'executeScan'.

Suggested modifications:

{
  "commons": {
    "true": "是",
    "false": "否",
    "colon": "：", // Remove duplicates
    "example": "例：",
    "fit2cloud": "飞致云",
    "lingxia": "凌霞",
    "button": {
      "run": "运行",
      "prev": "上一步",
      "next": "下一步",
      "create": "创建"
    }
  },
  "errorCodes": { /* ... remains unchanged */ },
  "messages": {
    "backupAndRestore": {
      "selectMethod": "请选择备份方法",
      "backupPath": "本地路径",
      "localDBConnectionTest": "测试本地 MySQL 连接",
      "remoteConn": "远程数据库连接",
      "restoreLocal": "还原本地数据库备份",
      "scanFiles": "扫描文件并检查病毒"
    },
    "configurations": { /* ... remains unchanged except for minor grammar fixes */ },
    "logs": { /* ... remains unchanged except for minor grammar fixes */ },
    "tasks": { /* ... remains unchanged except for the suggested modification */ },
    "users": { /* ... remains unchanged except for minor grammar fixes */ },
    "settings": { /* ... remains unchanged except for the suggested modification */ },
    "appsManager": { /* ... remains unchanged except for minimal adjustments */ },
    "webserver": { /* ... remains unchanged except for minor grammar fixes */ },
    "database": { /* ... remains unchanged except for additional translation of new options */ },

    // Additional translations
    "editPermissions": "编辑权限设置",
    "sourceFile": "源文件",
    "viewDetails": "查看详情",

    // New buttons and phrases
    "manageRemoteServers": "管理远程服务器",
    "createRemoteServer": "添加远程服务器",
    "deleteHelper": "

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
3.8% Duplication on New Code

See analysis details on SonarQube Cloud

[JohnNiang]

Hi @wanghe-fit2cloud , please stop using AI with your account to review PRs. It's really troubling me and other reviewers.

BTW, you can use GitHub Copilot code review, see https://docs.github.com/en/copilot/using-github-copilot/code-review/using-copilot-code-review for more.

[wanghe-fit2cloud]

Hi @wanghe-fit2cloud , please stop using AI with your account to review PRs. It's really troubling me and other reviewers.

BTW, you can use GitHub Copilot code review, see https://docs.github.com/en/copilot/using-github-copilot/code-review/using-copilot-code-review for more.

done.