Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: 优化 docker 代理 #7016

Merged
merged 2 commits into from
Nov 12, 2024
Merged

perf: 优化 docker 代理 #7016

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05e3300
perf: 优化 docker 代理文案
lan-yonghui Nov 12, 2024
dc2fdfe
perf: 明暗主题提示色
lan-yonghui Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 0 additions & 26 deletions frontend/src/styles/element-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,32 +113,6 @@ html.dark {

--el-text-color-placeholder: var(--panel-main-bg-color-4);

.el-message {
--el-color-primary: #409eff;
--el-color-primary-light-5: #a0cfff;
--el-color-primary-light-8: #d9ecff;
--el-color-primary-light-9: #ecf5ff;
--el-color-success: #67c23a;
--el-color-success-light-5: #b3e19d;
--el-color-success-light-8: #e1f3d8;
--el-color-success-light-9: #f0f9eb;
--el-color-warning: #e6a23c;
--el-color-warning-light-5: #f3d19e;
--el-color-warning-light-8: #faecd8;
--el-color-warning-light-9: #fdf6ec;
--el-color-danger: #f56c6c;
--el-color-danger-light-5: #fab6b6;
--el-color-danger-light-8: #fde2e2;
--el-color-error: #f56c6c;
--el-color-error-light-5: #fab6b6;
--el-color-error-light-8: #fde2e2;
--el-color-error-light-9: #fef0f0;
--el-color-info: #909399;
--el-color-info-light-5: #c8c9cc;
--el-color-info-light-8: #e9e9eb;
--el-color-info-light-9: #f4f4f5;
}

.el-descriptions__content:not(.is-bordered-label) {
color: var(--panel-main-bg-color-3);
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码的主要问题是使用了color: var() {}语句，这在某些浏览器中可能无法正确设置颜色。应改为--elm-color-primary, --elm-color-info-light-8, 等值定义来解决这个问题。

此外，如果需要支持不同的背景色或边框，请考虑采用以下替代方案：

  1. 使用:root { color: var( ) }样式全局应用：
    html { 
      --elm-color-primary: #409EFF;
      ... other properties for 'var' ...
    }
  1. 在类选择器上直接指定变量声明，不需要额外定义一个.el-descriptinos__content:not(.is-border-label)`这个规则：
el.descriptors__content{
  color: var(--elm-color-primary);
}

请注意：具体的CSS和LESS语法可能会根据你的编程环境有所不同，这里给出了一般的方法示例。

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

该段落看起来是一组CSS类定义，用于自定义EL组件中的文本颜色和背景颜色。在给出的版本中：

  • 你设置了默认警告/错误/信息等消息的颜色，这是好的。
  • 在el-message类下设置了一些属性值：颜色和透明度。

然而，这个模式有一些问题：

  1. 去掉了HTML dark的主题（似乎是为了与HTML light主题相关）
  2. 这些设置可能不会正确地应用于所有的页面样式树

如果你决定使用这些预设，请确保只影响到需要调整的部分，并且不要覆盖任何其他部分。这可能会导致混淆或不必要的修改。

你可以根据项目需求来选择是否保留这些样式设定。如果你有特定的需求或者想要更多的可选性，可以考虑将它们转换为更通用的设计原则。

此外，

由于这段文字是通过GitHub Markdown语言格式缩进生成而来的，并不是实际的CSS代码，所以实际上这里并没有直接显示如何应用这些变化。但是从整体上看，它看起来比较一致和合理。如果你能提供具体的应用实例或者上下文，我能提供更多定制化的建议。

Expand Down
26 changes: 26 additions & 0 deletions frontend/src/styles/reset.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,29 @@ body,
display: flex;
align-items: center;
}

.el-message {
--el-color-primary: #409eff;
--el-color-primary-light-5: #a0cfff;
--el-color-primary-light-8: #d9ecff;
--el-color-primary-light-9: #ecf5ff;
--el-color-success: #67c23a;
--el-color-success-light-5: #b3e19d;
--el-color-success-light-8: #e1f3d8;
--el-color-success-light-9: #f0f9eb;
--el-color-warning: #e6a23c;
--el-color-warning-light-5: #f3d19e;
--el-color-warning-light-8: #faecd8;
--el-color-warning-light-9: #fdf6ec;
--el-color-danger: #f56c6c;
--el-color-danger-light-5: #fab6b6;
--el-color-danger-light-8: #fde2e2;
--el-color-error: #f56c6c;
--el-color-error-light-5: #fab6b6;
--el-color-error-light-8: #fde2e2;
--el-color-error-light-9: #fef0f0;
--el-color-info: #909399;
--el-color-info-light-5: #c8c9cc;
--el-color-info-light-8: #e9e9eb;
--el-color-info-light-9: #f4f4f5;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

该段代码并没有什么明显的问题和需要优化的地方。

14 changes: 7 additions & 7 deletions frontend/src/views/setting/panel/proxy/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
<template #default>
{{ $t('setting.proxyHelper') }}
<ul style="margin-left: -20px">
<li v-if="isProductPro">{{ $t('setting.proxyHelper1') }}</li>
<li v-if="isProductPro">{{ $t('setting.proxyHelper2') }}</li>
<li v-if="isProductPro">{{ $t('setting.proxyHelper4') }}</li>
<li>{{ $t('setting.proxyHelper1') }}</li>
<li>{{ $t('setting.proxyHelper2') }}</li>
<li>{{ $t('setting.proxyHelper4') }}</li>
<li>{{ $t('setting.proxyHelper3') }}</li>
</ul>
</template>
Expand Down Expand Up @@ -183,9 +183,9 @@ const submitChangePassword = async (formEl: FormInstance | undefined) => {
(proxyDockerVisible.value && !params.proxyDocker))
) {
let confirmParams = {
header: i18n.global.t('database.confChange'),
operationInfo: i18n.global.t('database.restartNowHelper'),
submitInputInfo: i18n.global.t('database.restartNow'),
header: i18n.global.t('setting.confDockerProxy'),
operationInfo: i18n.global.t('setting.restartNowHelper'),
submitInputInfo: i18n.global.t('setting.restartNow'),
};
confirmDialogRef.value!.acceptParams(confirmParams);
} else {
Expand Down Expand Up @@ -233,7 +233,7 @@ const onSubmit = async () => {
}
await updateProxy(params);
if (isClose || params.proxyDocker === false) {
params.proxyUrl = '';
proxyUrl = '';
}
await updateXpackSettingByKey('ProxyDocker', proxyUrl);
await updateDaemonJson(`${form.proxyType}-proxy`, proxyUrl);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在这个代码块中，主要进行了以下两个部分：

  1. 对<template #default>标签内的子元素进行更新。

    • 列表项在模板中的样式属性被移动到类名中，因此不需要额外地添加style。

  2. 在响应用户输入（如点击“确定”按钮或填写文本框）时设置参数。

对于这两个改动没有具体的不合法、潜在问题或者需要改进的地方。

不过，在此版本之前可能存在：

  • 将CSS样式直接写入JavaScript模板组件可能会导致跨脚本渲染，影响页面显示和交互性能。
  • isProductPro, proxyUrl, 和其他变量在条件语句内使用了未指定其定义的变量名称。

整体来说，这些更改是针对用户体验和现代开发实践做出的技术选择上的调整，可能不会对系统稳定性构成直接影响，并且符合当前主流的编码规范。

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个修改在语法和逻辑上没有问题，但可以考虑以下优化：

  1. 尽量使用 {{ $t('...') }} 替换直接引用字符串内容。
  2. 可以考虑使用更简洁的模板标签简化渲染。

整体来说，改动不大，主要是在描述性语言中加入了更多具体信息来帮助用户理解，如“产品付费级别”，并且为确认对话框中的参数做了进一步的说明。

Expand Down
Loading