Skip to content

style: 主题样式优化 #7037

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

Merged
f2c-ci-robot merged 1 commit into from
Nov 13, 2024
Merged

style: 主题样式优化 #7037

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 9 additions & 9 deletions frontend/src/components/system-upgrade/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@
<div>
<div class="flex w-full flex-col gap-2 md:flex-row items-center">
<div class="flex flex-wrap items-center" v-if="props.footer">
<el-button type="primary" link @click="toForum">
<el-link type="primary" :underline="false" @click="toForum">
<span class="font-normal">{{ $t('setting.forum') }}</span>
</el-button>
</el-link>
<el-divider direction="vertical" />
<el-button type="primary" link @click="toDoc">
<el-link type="primary" :underline="false" @click="toDoc">
<span class="font-normal">{{ $t('setting.doc2') }}</span>
</el-button>
</el-link>
<el-divider direction="vertical" />
<el-button type="primary" link @click="toGithub">
<el-link type="primary" :underline="false" @click="toGithub">
<span class="font-normal">{{ $t('setting.project') }}</span>
</el-button>
</el-link>
<el-divider v-if="!mobile" direction="vertical" />
</div>
<div class="flex flex-wrap items-center">
Expand All @@ -27,14 +27,14 @@
（{{ $t('setting.hasNewVersion') }}）
</el-link>
</el-badge>
<el-button
<el-link
v-if="version !== 'Waiting' && !globalStore.hasNewVersion"
type="primary"
link
:underline="false"
@click="onLoadUpgradeInfo"
>
（{{ $t('setting.upgradeCheck') }}）
</el-button>
</el-link>
<el-tag v-if="version === 'Waiting'" round style="margin-left: 10px">
{{ $t('setting.upgrading') }}
</el-tag>
Expand Down
21 changes: 21 additions & 0 deletions frontend/src/styles/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -464,3 +464,24 @@ html {
.monaco-editor-tree-dark .el-tree-node.is-current > .el-tree-node__content {
background-color: #111417;
}
.check-label{
background: var(--panel-main-bg-color-10) !important;
.check-label-a {
color: var(--panel-color-primary);
}
}
.check-content {
background: var(--panel-main-bg-color-10);
pre {
margin: 0;
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
}
}


.el-descriptions {
overflow: hidden;
text-overflow: ellipsis;
}
148 changes: 131 additions & 17 deletions frontend/src/styles/element-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,24 @@ html.dark {
--panel-main-bg-color-9: #2E313D;
--panel-main-bg-color-10: #242633;
--panel-main-bg-color-11: #60626F;
--panel-main-bg-color-12: #000000;

--panel-alert-error-bg-color: #54293A;
--panel-alert-error-text-color: #E2324F;
--panel-alert-error-bg-color: #fef0f0;
--panel-alert-error-text-color: #f56c6c;
--panel-alert-error-hover-bg-color: #E9657B;

--panel-alert-success-bg-color: #1E5146;
--panel-alert-success-text-color: #11B671;
--panel-alert-success-bg-color: #e1f3d8;
--panel-alert-success-text-color: #67c23a;
--panel-alert-success-hover-bg-color: #4DC894;

--panel-alert-warning-bg-color: #59472A;
--panel-alert-warning-text-color: #EDAC2C;
--panel-alert-warning-hover-bg-color: #F1C161;

--panel-alert-info-bg-color: var(--panel-main-bg-color-7);
--panel-alert-info-text-color: var(--panel-text-color-white);
--panel-alert-info-hover-bg-color: var(--panel-main-bg-color-4);

--el-color-success: #3fb950;
--el-color-success-light-5: #4DC894;
--el-color-success-light-8: #3fb950;
Expand All @@ -55,14 +60,11 @@ html.dark {
--el-color-error-light-8: #E2324F;
--el-color-error-light-9: #54293A;

--el-color-info: var(--panel-text-color-white);
--el-color-info: var(--panel-main-bg-color-2);
--el-color-info-light-5: var(--panel-main-bg-color-3);
--el-color-info-light-8: var(--panel-text-color-white);
--el-color-info-light-8: var(--panel-color-primary);
--el-color-info-light-9: var(--panel-main-bg-color-8);

--panel-alert-info-bg-color: var(--panel-main-bg-color-8);
--panel-alert-info-text-color: var(--panel-text-color-white);
--panel-alert-info-hover-bg-color: var(--panel-main-bg-color-4);

--panel-pie-bg-color: #434552;
--panel-text-color-white: #ffffff;
Expand All @@ -78,7 +80,8 @@ html.dark {
--el-scrollbar-bg-color: var(--panel-main-bg-color-8);
--el-border-color-darker: var(--panel-main-bg-color-6);

--panel-border: 2px solid var(--panel-main-bg-color-8);
--panel-border: 1px solid var(--panel-main-bg-color-8);
--panel-border-color: var(--panel-main-bg-color-8);
--panel-button-active: var(--panel-main-bg-color-10);
--panel-button-text-color: var(--panel-main-bg-color-10);
--panel-button-bg-color: var(--panel-color-primary);
Expand Down Expand Up @@ -113,6 +116,9 @@ html.dark {

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

.el-radio-button {
--el-radio-button-checked-text-color: var(--panel-main-bg-color-10);
}
.el-descriptions__content:not(.is-bordered-label) {
color: var(--panel-main-bg-color-3);
}
Expand Down Expand Up @@ -180,21 +186,52 @@ html.dark {
}

.el-button--primary {
--el-button-text-color: var(--panel-main-bg-color-10);
--el-button-hover-link-text-color: var(--panel-color-primary-light-1);
&.tag-button,
&.brief-button {
--el-button-text-color: var(--panel-main-bg-color-10);
--el-button-hover-text-color: var(--el-color-white);
--el-button-hover-border-color:var(--el-color-primary);
--el-button-hover-bg-color: var(--el-color-primary);
}

&.app-button {
--el-button-text-color: var(--el-color-primary);
}

&.h-app-button {
--el-button-text-color: var(--panel-main-bg-color-10);
--el-button-hover-text-color: var(--el-color-white);
--el-button-hover-border-color: var(--el-color-primary);
--el-button-hover-bg-color: var(--el-color-primary);
}
}

.el-button--primary.is-plain, .el-button--primary.is-text, .el-button--primary.is-link {
--el-button-text-color: var(--panel-main-bg-color-2);
--el-button-bg-color: var(--panel-main-bg-color-9);
--el-button-border-color: var(--panel-main-bg-color-8);
--el-button-hover-bg-color: var(--panel-main-bg-color-9);
--el-button-hover-border-color: var(--panel-main-bg-color-8);
}

.el-button--primary.is-text,.el-button--primary.is-link {
--el-button-text-color: var(--panel-color-primary);
}

.el-button--primary:hover {
--el-button-hover-text-color: var(--panel-text-color-white);
--el-button-border-color: var(--el-color-primary-light-3);
--el-button-hover-bg-color: var(--el-color-primary-light-3);
--el-button-hover-border-color: var(--el-color-primary-light-3);
--el-button-hover-text-color: var(--panel-main-bg-color-2);
--el-button-border-color: var(--el-color-primary);
--el-button-hover-bg-color: var(--panel-main-bg-color-9);
--el-button-hover-border-color: var(--panel-main-bg-color-8);
}

.el-button--primary.is-plain:hover {
--el-button-hover-text-color: var(--panel-main-bg-color-10);
--el-button-border-color: var(--el-color-primary);
--el-button-hover-bg-color: var(--el-color-primary);
--el-button-hover-border-color: var(--el-color-primary);
}

.el-button--primary:active {
Expand Down Expand Up @@ -231,7 +268,7 @@ html.dark {
}

.el-dialog {
background-color: var(--panel-main-bg-color-8);
background-color: var(--panel-main-bg-color-9);
border: 1px solid var(--panel-border-color);

.el-dialog__header {
Expand Down Expand Up @@ -265,15 +302,24 @@ html.dark {
}

.md-editor-dark {
--md-bk-color: var(--panel-main-bg-color-8);
--md-bk-color: var(--panel-main-bg-color-9);
}

.md-editor-dark .md-editor-preview {
--md-theme-color: var(--el-text-color-primary);
}

.md-editor-dark .default-theme a {
--md-theme-link-color: var(--el-color-primary);
}

.md-editor-dark .default-theme pre code {
background-color: var(--panel-main-bg-color-8);
}
.md-editor-dark .default-theme pre:before {
background-color: var(--panel-main-bg-color-10);
}

.el-descriptions__title {
color: var(--el-text-color-primary);
}
Expand All @@ -297,12 +343,20 @@ html.dark {
box-shadow: 0 0 4px rgba(0, 94, 235, 0.1);
border: 0.5px solid var(--panel-main-bg-color-7);
}
.el-drawer {
.cm-editor {
background-color: var(--panel-main-bg-color-10);
}
.cm-gutters {
background-color: var(--panel-main-bg-color-10);
}
}

.cm-editor {
background-color: var(--panel-main-bg-color-9);
}
.cm-gutters {
background-color: var(--panel-main-bg-color-8);
background-color: var(--panel-main-bg-color-9);
}

// scroll-bar
Expand All @@ -312,6 +366,9 @@ html.dark {
::-webkit-scrollbar-thumb {
background-color: var(--el-border-color-darker);
}
::-webkit-scrollbar-corner {
background-color: var(--el-scrollbar-bg-color);
}

.app-warn {
span {
Expand All @@ -325,4 +382,61 @@ html.dark {
}
}

.el-table {
--el-table-bg-color: var(--el-bg-color);
--el-table-tr-bg-color: var(--el-bg-color);
--el-table-header-bg-color: var(--el-bg-color);
--el-table-border: 1px solid var(--panel-main-bg-color-8);
--el-table-border-color: var(--panel-main-bg-color-8);
}

.el-message-box {
--el-messagebox-title-color: var(--el-menu-text-color);
border: 1px solid var(--panel-border-color);
}

.el-popover {
--el-popover-title-text-color: var(--panel-main-bg-color-2);
border: 1px solid var(--panel-border-color);
}

.app-wrapper {
.main-container {
background-color: var(--panel-main-bg-color-9) !important;
}
.app-footer {
background-color: var(--panel-main-bg-color-9) !important;
border-top: var(--panel-border);
}
.mobile-header {
background-color: var(--panel-main-bg-color-9) !important;
border-bottom: var(--panel-border);
color: #ffffff;
}
}

.router_card_button {
.el-radio-button__inner {
background: none !important;
}
.el-radio-button__original-radio:checked + .el-radio-button__inner {
color: var(--panel-main-bg-color-10);
background-color: var(--panel-color-primary) !important;
box-shadow: none !important;
border: none !important;
}
}

.el-date-table td.in-range .el-date-table-cell {
background-color: var(--panel-main-bg-color-8);
}

.el-collapse-item__header {
color: #ffffff;
background-color: var(--panel-main-bg-color-10) !important;
}

.el-loading-mask {
background-color: rgba(36, 38, 51, 0.8);
}
}
Copy link

@fit2cloudrd fit2cloudrd Nov 13, 2024

Choose a reason for hiding this comment

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

该代码中存在一些规范性问题和潜在的问题，例如字体大小、CSS选择器等需要统一；同时，还有冗余的内联样式如.no-linewt、.indent, font-size:以及多余的空行。这些问题可能会影响代码可读性和执行效率，请根据最新的编程标准加以修正。

具体来说：

  1. CSS格式：保持一致的语言风格、定义类名（包括保留英文单词首字母大写）。

  2. 处理空标签语句：

    • 不使用.号结尾的属性值（比如:color:'red');
    • 使用双引号括起来的关键字（如${':bg-color':'blue'})；
    • 尽量避免不必要的HTML元素嵌套或使用过多伪类别修饰符如".no-line", ".indent";

  3. 格式化缩进（在JavaScript部分已经建议为2倍缩进）：

if (myCondition) { return 'condition is true'; }

替换为：

return myCondition ? "condition is true" : "";
  1. 额外CSS规则可能会与当前设计不兼容，因此应确保所有的外部引用都是最新有效的。可以删除不需要的部分或者采用更现代的方式重命名CSS变量并移除无用注释。

针对上述改进点进行调整和测试，以确保最终提交代码的质量达到需求，并符合项目规定的编码标准。如有具体的修改建议，欢迎进一步讨论和提供详细的变更文档。

7 changes: 6 additions & 1 deletion frontend/src/views/app-store/detail/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ defineExpose({
});
</script>

<style lang="scss">
<style lang="scss" scoped>
.brief {
.name {
span {
Expand All @@ -183,6 +183,7 @@ defineExpose({
.icon {
width: 180px;
height: 180px;
background-color: #ffffff;
}

.version {
Expand All @@ -196,4 +197,8 @@ defineExpose({
}
}
}

:deep(.md-editor-dark) {
background-color: var(--panel-main-bg-color-9);
}
</style>
17 changes: 12 additions & 5 deletions frontend/src/views/app-store/installed/check/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<el-dialog v-model="open" :title="$t('app.checkTitle')" width="50%" :close-on-click-modal="false">
<el-dialog v-model="open" :title="$t('app.checkTitle')" width="40%" :close-on-click-modal="false">
<el-row>
<el-col :span="20" :offset="2" v-if="open">
<el-alert
Expand All @@ -9,11 +9,18 @@
show-icon
:closable="false"
/>
<br />
<el-descriptions border :column="1">
<el-descriptions-item v-for="(item, key) in map" :key="key">
<el-descriptions :column="1" border>
<el-descriptions-item
v-for="(item, key) in map"
:key="key"
label-class-name="check-label"
class-name="check-content"
min-width="60px"
>
<template #label>
<a href="javascript:void(0);" @click="toPage(item[0])">{{ $t('app.' + item[0]) }}</a>
<a href="javascript:void(0);" class="check-label-a" @click="toPage(item[0])">
{{ $t('app.' + item[0]) }}
</a>
</template>
<span class="resources">
{{ map.get(item[0]).toString() }}
Expand Down
Loading