diff --git a/components.d.ts b/components.d.ts index c944f142811861daa8646e85deb4f939724720ec..8d6c5baaf6618b72ea2070a5e051bc3dc206ae2e 100644 --- a/components.d.ts +++ b/components.d.ts @@ -11,9 +11,9 @@ declare module 'vue' { AppBreadcrumb: typeof import('./src/components/AppBreadcrumb.vue')['default'] AppFeedback: typeof import('./src/components/AppFeedback.vue')['default'] AppFooter: typeof import('./src/components/AppFooter.vue')['default'] - AppHeader: typeof import('./src/components/AppHeader.vue')['default'] + AppHeader: typeof import('./src/components/header/AppHeader.vue')['default'] AppLoading: typeof import('./src/components/AppLoading.vue')['default'] - AppLogin: typeof import('./src/components/AppLogin.vue')['default'] + AppLogin: typeof import('./src/components/header/AppLogin.vue')['default'] AppPagination: typeof import('./src/components/AppPagination.vue')['default'] AppSection: typeof import('./src/components/AppSection.vue')['default'] AppTableToggle: typeof import('./src/components/AppTableToggle.vue')['default'] @@ -34,8 +34,10 @@ declare module 'vue' { FilterItemSkeleton: typeof import('./src/components/skeleton/FilterItemSkeleton.vue')['default'] FilterOrder: typeof import('./src/components/filter/FilterOrder.vue')['default'] FilterRadio: typeof import('./src/components/filter/FilterRadio.vue')['default'] - HeaderNav: typeof import('./src/components/HeaderNav.vue')['default'] + HeaderNav: typeof import('./src/components/header/HeaderNav.vue')['default'] + HeaderTheme: typeof import('./src/components/header/HeaderTheme.vue')['default'] HomeSkeleton: typeof import('./src/components/skeleton/HomeSkeleton.vue')['default'] + ItemTheme: typeof import('./src/components/header/ItemTheme.vue')['default'] OCardItem: typeof import('./src/components/OCardItem.vue')['default'] OCardItemSkeleton: typeof import('./src/components/skeleton/OCardItemSkeleton.vue')['default'] OCodeCopy: typeof import('./src/components/OCodeCopy.vue')['default'] diff --git a/index.html b/index.html index 828e609e51689cab3fd18b7c0aa9b26b053115ca..71bdaa1da7238675e57a902918bcfcadf1a9e64a 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + openEuler Easy Software diff --git a/src/App.vue b/src/App.vue index d569387af86945bc9af1073c5b758e73d93cda7d..0f98027a06e5d412556900fbb65f7b0363c2038b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -9,7 +9,7 @@ import enUS from '@opensig/opendesign/es/locale/lang/en-us'; import { useLangStore, useViewStore } from '@/stores/common'; import { useLocale } from '@/composables/useLocale'; -import AppHeader from '@/components/AppHeader.vue'; +import AppHeader from '@/components/header/AppHeader.vue'; import AppFooter from '@/components/AppFooter.vue'; const langStore = useLangStore(); @@ -71,21 +71,25 @@ initSensor(); --layout-content-banner: 160px; - --layout-content-min-height: calc(100vh - var(--layout-header-height)); + --layout-screen-height: 100vh; + + --layout-content-min-height: calc(var(--layout-screen-height) - var(--layout-header-height)); @include respond-to('<=laptop') { --layout-header-max-width: 100%; --layout-header-padding: 5%; --layout-content-padding: 12px; + + --layout-screen-height: 100%; } } diff --git a/src/assets/404-dark.png b/src/assets/404-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..43c80e1785f6d378f91123da426643f4adebd906 Binary files /dev/null and b/src/assets/404-dark.png differ diff --git a/src/assets/default-logo-cover_dark.png b/src/assets/default-logo-cover_dark.png new file mode 100644 index 0000000000000000000000000000000000000000..9bee7eb9174e5ffbb508b1edafc32f2fbcd9a33c Binary files /dev/null and b/src/assets/default-logo-cover_dark.png differ diff --git a/src/assets/email.svg b/src/assets/email.svg index efdb177e392cc42c9a40d16763e1671115c0f036..aa010e9181884d5ff3ca2a785d80786e769efc85 100644 --- a/src/assets/email.svg +++ b/src/assets/email.svg @@ -1,2 +1 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/home/ohpc_logo.png b/src/assets/home/ohpc_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..e9483438e59e3cfd91b27b454ce77db035623398 Binary files /dev/null and b/src/assets/home/ohpc_logo.png differ diff --git a/src/assets/icon-copy.svg b/src/assets/icon-copy.svg index 705949c0ef39a8d5ed98b5ce37877e6ff25fa59a..c340cd26788e697ac28dc07f5b1b9f2184e4c5db 100644 --- a/src/assets/icon-copy.svg +++ b/src/assets/icon-copy.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/icon/icon-os.svg b/src/assets/icon/icon-os.svg index bfd0d10ac6a1aac4e60c8d950104ceb2a644450c..50d95ad6f09e515d54fcf4ce37074e5c51bda5c8 100644 --- a/src/assets/icon/icon-os.svg +++ b/src/assets/icon/icon-os.svg @@ -1,5 +1,5 @@ - - + + diff --git a/src/assets/icon/icon-outlink.svg b/src/assets/icon/icon-outlink.svg index efd14b591d88cc5fac9ac5df64847f74feb8c29a..b284beaa92f0eb4225f44682980ccfe2854b6e84 100644 --- a/src/assets/icon/icon-outlink.svg +++ b/src/assets/icon/icon-outlink.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/icon/openhpc4.svg b/src/assets/icon/openhpc4.svg index 2deb47d8525fa210277c3e64a7955e5ca080cc31..18627d35797fc4fb39645e72da00560542839daf 100644 --- a/src/assets/icon/openhpc4.svg +++ b/src/assets/icon/openhpc4.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/icon/openhpc5.svg b/src/assets/icon/openhpc5.svg index 238aa83631dd220c3ceac900109596bacdb9e055..b92dc2a934f5a2adbb020f1dfa7cf7c934eece7b 100644 --- a/src/assets/icon/openhpc5.svg +++ b/src/assets/icon/openhpc5.svg @@ -1,5 +1,5 @@ - + diff --git a/src/assets/logo_dark.svg b/src/assets/logo_dark.svg deleted file mode 100644 index c13a22f49ac9c40c2d2fba85bc7614daad9dfbe2..0000000000000000000000000000000000000000 --- a/src/assets/logo_dark.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - 切片 - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/openeuler-logo-dark.svg b/src/assets/openeuler-logo-dark.svg new file mode 100644 index 0000000000000000000000000000000000000000..2f5eed20415736c977ff68c6c882f80eb3c8b6e5 --- /dev/null +++ b/src/assets/openeuler-logo-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/solution/openhpc/img1-dark.png b/src/assets/solution/openhpc/img1-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..647c07e3b05223aa3e677b20ee49148d36c3ee34 Binary files /dev/null and b/src/assets/solution/openhpc/img1-dark.png differ diff --git a/src/assets/solution/openhpc/openeuler-dark.png b/src/assets/solution/openhpc/openeuler-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..d82698d67a490836b3eb9f700dd1fafaebd2917a Binary files /dev/null and b/src/assets/solution/openhpc/openeuler-dark.png differ diff --git a/src/assets/solution/openhpc/openhpc-logo-dark.png b/src/assets/solution/openhpc/openhpc-logo-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..e9483438e59e3cfd91b27b454ce77db035623398 Binary files /dev/null and b/src/assets/solution/openhpc/openhpc-logo-dark.png differ diff --git a/src/assets/solution/openstack/openeuler-dark.png b/src/assets/solution/openstack/openeuler-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..d82698d67a490836b3eb9f700dd1fafaebd2917a Binary files /dev/null and b/src/assets/solution/openstack/openeuler-dark.png differ diff --git a/src/assets/solution/openstack/openstacklogo-dark.png b/src/assets/solution/openstack/openstacklogo-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..99a12209fc579543d634fd89ae9c80e4af03995c Binary files /dev/null and b/src/assets/solution/openstack/openstacklogo-dark.png differ diff --git a/src/assets/style/base.scss b/src/assets/style/base.scss index fe8eb17a1d7154a266a08fdcfe8c5faebab95272..6639827ea7b32d3fd84362b6729c3bdb32d1a2cd 100644 --- a/src/assets/style/base.scss +++ b/src/assets/style/base.scss @@ -12,8 +12,8 @@ body { scroll-behavior: smooth; box-sizing: border-box; font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica', 'Arial', sans-serif; - width: 100%; height: 100%; + background: var(--o-color-fill2); @include text1; @include scrollbar; } diff --git a/src/assets/style/category/detail/index.scss b/src/assets/style/category/detail/index.scss index 9c54d45db50f72d8722d7d0ea1301a934ec38392..2a29aec58c1b2f50aecf081b933b9eba29dc309d 100644 --- a/src/assets/style/category/detail/index.scss +++ b/src/assets/style/category/detail/index.scss @@ -26,76 +26,6 @@ margin-bottom: 16px; } } -:deep(.domain-tabs) { - padding-top: 26px; - &.min { - > .o-tab-head { - .o-tab-nav-anchor { - display: none; - } - - .o-tab-nav-active { - color: var(--o-color-info1); - cursor: default; - padding: 0; - } - } - } - .o-tab-head { - display: block !important; - } - .o-tab-navs { - --tab-nav-justify: left; - margin-bottom: 24px; - } - .o-table { - word-break: break-word; - --table-edge-padding: 24px; - .arch, - .appVer { - width: 250px; - } - tbody tr:hover { - background: none; - } - } - - // 应用镜像样式 - &.tabs-switch { - .o-tab-nav-list { - background: #ededf0; - border-radius: 8px; - height: 40px; - padding: 4px; - .o-tab-nav { - margin: 0 !important; - position: relative; - padding: 2px 12px; - z-index: 3; - } - } - .o-tab-nav-anchor { - top: 0; - padding: 4px 0; - .o-tab-nav-anchor-line { - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); - border-radius: 4px; - height: 100%; - background: var(--o-color-fill2); - } - } - } - &.tabs-one { - .o-tab-nav-active { - color: var(--o-color-info1); - cursor: default; - padding: 0; - } - .o-tab-nav-anchor { - display: none; - } - } -} .code-box { position: relative; @@ -109,13 +39,13 @@ color: var(--o-color-info1); display: flex; align-items: top; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - border-right: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid var(--o-color-control4); + border-right: 1px solid var(--o-color-control4); &:first-child { - border-top: 1px solid rgba(0, 0, 0, 0.1); + border-top: 1px solid var(--o-color-control4); } .label { - background: rgba(0, 47, 167, 0.05); + background: var(--o-color-fill3); padding: 16px 24px; color: var(--o-color-info2); min-width: 150px; @@ -156,7 +86,7 @@ align-items: center; justify-content: center; background-color: var(--o-color-primary1); - color: #fff; + color: var(--o-color-info1); padding: 10px 0px; } } @@ -185,19 +115,21 @@ } .sp { margin: 32px 0 24px; - @include h3; + color: var(--o-color-info1); font-weight: 500; + @include h3; } .title { display: flex; justify-content: space-between; align-items: center; - @include h3; font-weight: 500; + color: var(--o-color-info1); + @include h3; } .ver { - background: rgba(var(--o-kleinblue-6), 0.05); + background: var(--o-color-fill3); @include text2; border: none; border-radius: var(--layout-pkg-radius); diff --git a/src/assets/style/element-plus/pagination.scss b/src/assets/style/element-plus/pagination.scss index 21ce7fc52a32878b12067aa1723506e91c591da0..a8102f101ff0c04020520593157fbd984566a76c 100644 --- a/src/assets/style/element-plus/pagination.scss +++ b/src/assets/style/element-plus/pagination.scss @@ -1,13 +1,20 @@ .el-pagination { --el-pagination-border-radius: 4px; + --el-pagination-button-bg-color: var(--o-color-fill2); + --el-disabled-bg-color: var(--o-color-fill2); + --el-pagination-button-color: var(--o-color-info1); .el-pager { li { + --el-pagination-button-color: var(--o-color-info1); &:hover { background-color: var(--o-color-primary2); - color: var(--o-color-info1-inverse); + color: var(--o-color-white); } } } + .el-pagination__jump { + color: var(--o-color-info2); + } .btn-prev, .btn-next { border: 1px solid var(--o-color-control1); @@ -28,6 +35,9 @@ .el-input__wrapper { box-shadow: none !important; border: 1px solid var(--o-color-control1); + background-color: var(--o-color-fill2); + --el-disabled-bg-color: var(--o-color-fill2); + --el-pagination-button-color: var(--o-color-info1); &:hover { border-color: var(--o-color-control2); } diff --git a/src/assets/style/element-plus/popper.scss b/src/assets/style/element-plus/popper.scss index 0da74ca6be427882808140b660f207a7ecc71c67..bdbe23c956b26bee822ab2a3119c59fcb1772538 100644 --- a/src/assets/style/element-plus/popper.scss +++ b/src/assets/style/element-plus/popper.scss @@ -1,4 +1,6 @@ .el-popper { + --el-bg-color-overlay: var(--o-color-fill2); + --el-border-color-light: var(--o-color-control1); margin: -7px 0 0; .el-popper__arrow { display: none; diff --git a/src/assets/style/element-plus/select.scss b/src/assets/style/element-plus/select.scss index aea198998eb2cb55afd8cedacaaa7046b1f9f12c..ecfe124ce0524303545059e5987a68224eaeee98 100644 --- a/src/assets/style/element-plus/select.scss +++ b/src/assets/style/element-plus/select.scss @@ -10,12 +10,14 @@ .el-select-dropdown { .el-select-dropdown__item { + color: var(--o-color-info2); &:hover, &.hover { background-color: var(--o-color-control2-light) !important; } &.selected { background-color: var(--o-color-control3-light) !important; + color: var(--o-color-info1); } } } diff --git a/src/assets/style/element-plus/table.scss b/src/assets/style/element-plus/table.scss index 5c4987d763254e553efdbf00bdb94c40626813da..8f23d54390577b096a4a866552ca09ed1fd39913 100644 --- a/src/assets/style/element-plus/table.scss +++ b/src/assets/style/element-plus/table.scss @@ -2,7 +2,13 @@ #app .el-table { --el-table-header-bg-color: var(--o-color-control3-light); --el-table-border-color: var(--o-color-control4); + --el-table-tr-bg-color: var(--o-color-fill2); + --el-table-expanded-cell-bg-color: var(--o-color-fill2); + --el-table-bg-color: var(--o-color-fill2); + --el-table-row-hover-bg-color: var(--o-color-control2-light); border-radius: 4px; + --el-table-border: 1px solid var(--o-color-control4); + border-spacing: 0; @include text1; color: var(--o-color-info1); .el-table__inner-wrapper::before { @@ -10,6 +16,7 @@ } .el-table__cell { padding: 12px 0; + transition: none; .cell { padding: 0 16px; } @@ -19,6 +26,7 @@ @include text1; font-weight: 500; color: var(--o-color-info1); + border-bottom: 0 none; } } tr:last-child { diff --git a/src/assets/style/global.scss b/src/assets/style/global.scss index a4447dce4629da17a51ad85f252cc5e1aa42b18c..e140180983998a785dc0eea536939f18725cd0c6 100644 --- a/src/assets/style/global.scss +++ b/src/assets/style/global.scss @@ -7,10 +7,8 @@ html { --o-radius_control-m: 4px; --o-radius_control-l: 4px; - --pkg-bg: rgba(var(--o-kleinblue-6), 0.05); - --el-box-shadow-light: var(--o-shadow-2); - --el-color-primary: var(--o-color-primary1); + --el-color-primary: var(--o-color-primary1) !important; } // tag @@ -27,6 +25,7 @@ html { .o-tag { cursor: pointer; --tag-padding: 2px 4px; + --tag-bd-color: var(--o-color-control3-light); &.image-icon .o-icon { color: #007af0; } @@ -37,7 +36,7 @@ html { color: #00a7b3; } &:hover { - --tag-bg-color: var(--o-color-primary4-light); + --tag-bg-color: var(--o-color-control1-light); } .o-tag-icon { height: 16px; diff --git a/src/assets/style/markdown.scss b/src/assets/style/markdown.scss index 78a1e7e2111f7ce4c5923a23b7615b694ac25a33..326eb1bcab340998916140731bca2c4458a6af95 100644 --- a/src/assets/style/markdown.scss +++ b/src/assets/style/markdown.scss @@ -1,6 +1,8 @@ @use 'github-markdown-css/github-markdown-light.css' as *; .markdown-body { + background: var(--o-color-fill2); + color: var(--o-color-info1); details { display: block !important; } @@ -45,12 +47,17 @@ } code { border-radius: var(--layout-pkg-radius); + background-color: var(--o-color-fill3); + margin: 0 4px; + } + p code:first-child { + margin-left: 0; } pre { position: relative; border-radius: var(--layout-pkg-radius); - background-color: var(--pkg-bg); + background-color: var(--o-color-fill3); padding: 0; overflow: hidden; @@ -58,6 +65,7 @@ display: block; overflow-x: auto; padding: 16px 36px 16px 16px; + margin: 0; @include scrollbar; } } @@ -84,7 +92,7 @@ th { background-color: var(--o-color-control3-light); text-align: left; - border: 0 none !important; + border-color: var(--o-color-control3-light) !important; height: 40px; } th, @@ -111,9 +119,8 @@ position: absolute; top: 0; right: 0; - background-color: var(--o-color-fill1); + background-color: var(--o-color-fill3); opacity: 1; - transition: all var(--o-duration-m1) var(--o-easing-standard-in); padding: 12px 12px 0 0; .icon-copy { display: block; @@ -153,7 +160,7 @@ content: counter(num); position: absolute; border-radius: 50%; - color: var(--o-color-info1-inverse); + color: var(--o-color-white); @include text1; text-align: center; top: 0; diff --git a/src/assets/style/theme/card.scss b/src/assets/style/theme/card.scss index 4444e09522a6917c05821257863857da1b65e8a0..60284298be93debe78b989db730eb1e35cb73904 100644 --- a/src/assets/style/theme/card.scss +++ b/src/assets/style/theme/card.scss @@ -1,8 +1,7 @@ +@use '../mixin/common.scss' as *; .o-card { --card-cover-radius: 0; --card-radius: 0; - --card-shadow-hover: 0 2px 24px rgba(var(--o-kleinblue-10), 0.15); - --card-shadow-active: 0 2px 24px rgba(var(--o-kleinblue-10), 0.15); } .o-card-cover-h { --card-cover-padding: 0; @@ -10,3 +9,9 @@ a.o-card:hover .o-card-title { color: var(--o-color-primary1); } + +@include in-dark { + .o-figure img { + @include img-in-dark; + } +} diff --git a/src/assets/style/theme/dark.token.css b/src/assets/style/theme/dark.token.css index ae339c51703c4fe38c4174636a958894ba0e3469..61682e6302cca48e0a5bc7623319c735cfcc6f12 100644 --- a/src/assets/style/theme/dark.token.css +++ b/src/assets/style/theme/dark.token.css @@ -1,5 +1,5 @@ /* theme: opendesign.dark */ -[data-o-theme='dark'] { +[data-o-theme="dark"] { /** * @name * @type palette @@ -20,49 +20,49 @@ * @group kleinblue * @description */ - --o-kleinblue-1: 11, 21, 55; + --o-kleinblue-1: 14, 26, 69; /** * @name * @type palette * @group kleinblue * @description */ - --o-kleinblue-2: 16, 30, 77; + --o-kleinblue-2: 18, 34, 87; /** * @name * @type palette * @group kleinblue * @description */ - --o-kleinblue-3: 27, 48, 113; + --o-kleinblue-3: 29, 51, 119; /** * @name * @type palette * @group kleinblue * @description */ - --o-kleinblue-4: 40, 68, 149; + --o-kleinblue-4: 42, 72, 158; /** * @name * @type palette * @group kleinblue * @description */ - --o-kleinblue-5: 55, 91, 184; + --o-kleinblue-5: 51, 91, 196; /** * @name * @type palette * @group kleinblue * @description */ - --o-kleinblue-6: 72, 116, 220; + --o-kleinblue-6: 67, 116, 242; /** * @name * @type palette * @group kleinblue * @description */ - --o-kleinblue-7: 105, 143, 227; + --o-kleinblue-7: 104, 142, 237 ; /** * @name * @type palette @@ -951,7 +951,7 @@ * @group mixedgray * @description */ - --o-mixedgray-14: 255, 255, 255; + --o-mixedgray-14: 255,255, 255; /** * @name * @type palette @@ -1252,14 +1252,14 @@ * @group primary * @description 常规 */ - --o-color-primary1: rgb(var(--o-kleinblue-5)); + --o-color-primary1: rgb(var(--o-kleinblue-6)); /** * @name * @type color * @group primary * @description 悬浮 */ - --o-color-primary2: rgb(var(--o-kleinblue-4)); + --o-color-primary2: rgb(var(--o-kleinblue-5)); /** * @name * @type color @@ -1273,7 +1273,7 @@ * @group primary * @description 禁用 */ - --o-color-primary4: rgb(var(--o-kleinblue-3)); + --o-color-primary4: rgb(var(--o-kleinblue-4)); /** * @name * @type color @@ -1497,35 +1497,35 @@ * @group control * @description 常规，常用于边框 */ - --o-color-control1: rgba(var(--o-mixedgray-10), 0.25); + --o-color-control1: rgba(var(--o-mixedgray-14), 0.25); /** * @name * @type color * @group control * @description 悬浮，常用于边框 */ - --o-color-control2: rgba(var(--o-mixedgray-10), 0.6); + --o-color-control2: rgba(var(--o-mixedgray-14), 0.6); /** * @name * @type color * @group control * @description 激活，常用于边框 */ - --o-color-control3: rgba(var(--o-mixedgray-10), 0.8); + --o-color-control3: rgba(var(--o-mixedgray-14), 0.8); /** * @name * @type color * @group control * @description 禁用，常用于边框 */ - --o-color-control4: rgba(var(--o-mixedgray-10), 0.15); + --o-color-control4: rgba(var(--o-mixedgray-14), 0.15); /** * @name * @type color * @group control * @description 常规-浅，常用于背景 */ - --o-color-control1-light: rgb(var(--o-mixedgray-7), 1); + --o-color-control1-light: rgb(var(--o-mixedgray-7), 1.0); /** * @name * @type color @@ -1553,14 +1553,14 @@ * @group control * @description 很浅，常用于表格背景色 */ - --o-color-control-light: rgb(var(--o-mixedgray-4), 1); + --o-color-control-light: rgb(var(--o-mixedgray-4), 1.0); /** * @name * @type color * @group info * @description 一级/强调/标题 */ - --o-color-info1: rgba(var(--o-mixedgray-14), 1); + --o-color-info1: rgba(var(--o-mixedgray-14), 1.0); /** * @name * @type color @@ -1588,7 +1588,7 @@ * @group info * @description 一级/次强调/正文反色 */ - --o-color-info1-inverse: rgba(var(--o-mixedgray-1), 1); + --o-color-info1-inverse: rgba(var(--o-mixedgray-1), 1.0); /** * @name * @type color @@ -1616,7 +1616,7 @@ * @group mask * @description 全局遮罩 */ - --o-color-mask1: rgba(var(--o-mixedgray-14), 0.4); + --o-color-mask1: rgba(var(--o-mixedgray-1), 0.4); /** * @name * @type color @@ -1630,14 +1630,14 @@ * @group link * @description 常规 */ - --o-color-link1: rgba(var(--o-kleinblue-5)); + --o-color-link1: rgba(var(--o-kleinblue-6)); /** * @name * @type color * @group link * @description 悬浮 */ - --o-color-link2: rgba(var(--o-kleinblue-4)); + --o-color-link2: rgba(var(--o-kleinblue-5)); /** * @name * @type color @@ -1651,7 +1651,7 @@ * @group link * @description 禁用 */ - --o-color-link4: rgba(var(--o-kleinblue-3)); + --o-color-link4: rgba(var(--o-kleinblue-4)); /** * @name 阴影1 * @type shadow @@ -2191,4 +2191,4 @@ * @description 用于大卡片、场景切换 */ --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1); -} +} \ No newline at end of file diff --git a/src/assets/style/theme/default-light.token.css b/src/assets/style/theme/default-light.token.css index c8b7d6ce09c799d739332045ea52fce6963b6696..b2572c848e85fc594d5feb6b2e55033ad6fba36f 100644 --- a/src/assets/style/theme/default-light.token.css +++ b/src/assets/style/theme/default-light.token.css @@ -1,6 +1,5 @@ /* theme: opendesign.light */ -:root, -[data-o-theme='light'] { +:root,[data-o-theme="light"] { /** * @name * @type palette @@ -21,7 +20,7 @@ * @group kleinblue * @description */ - --o-kleinblue-1: 235, 241, 250; + --o-kleinblue-1: 235, 241, 246; /** * @name * @type palette @@ -924,7 +923,7 @@ * @group mixedgray * @description */ - --o-mixedgray-10: 85, 85, 92; + --o-mixedgray-10: 85 , 85, 92; /** * @name * @type palette @@ -1498,35 +1497,35 @@ * @group control * @description 常规，常用于边框 */ - --o-color-control1: rgba(var(--o-mixedgray-10), 0.25); + --o-color-control1: rgba(var(--o-mixedgray-14), 0.25); /** * @name * @type color * @group control * @description 悬浮，常用于边框 */ - --o-color-control2: rgba(var(--o-mixedgray-10), 0.6); + --o-color-control2: rgba(var(--o-mixedgray-14), 0.6); /** * @name * @type color * @group control * @description 激活，常用于边框 */ - --o-color-control3: rgba(var(--o-mixedgray-10), 0.8); + --o-color-control3: rgba(var(--o-mixedgray-14), 0.8); /** * @name * @type color * @group control * @description 禁用，常用于边框 */ - --o-color-control4: rgba(var(--o-mixedgray-10), 0.1); + --o-color-control4: rgba(var(--o-mixedgray-14), 0.1); /** * @name * @type color * @group control * @description 常规-浅，常用于背景 */ - --o-color-control1-light: rgb(var(--o-mixedgray-5), 1); + --o-color-control1-light: rgb(var(--o-mixedgray-5), 1.0); /** * @name * @type color @@ -1554,14 +1553,14 @@ * @group control * @description 很浅，常用于表格背景色 */ - --o-color-control-light: rgb(var(--o-mixedgray-1), 1); + --o-color-control-light: rgb(var(--o-mixedgray-1), 1.0); /** * @name * @type color * @group info * @description 一级/强调/标题 */ - --o-color-info1: rgba(var(--o-mixedgray-14), 1); + --o-color-info1: rgba(var(--o-mixedgray-14), 1.0); /** * @name * @type color @@ -1589,7 +1588,7 @@ * @group info * @description 一级/次强调/正文反色 */ - --o-color-info1-inverse: rgba(var(--o-mixedgray-1), 1); + --o-color-info1-inverse: rgba(var(--o-mixedgray-1), 1.0); /** * @name * @type color @@ -2192,4 +2191,4 @@ * @description 用于大卡片、场景切换 */ --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1); -} +} \ No newline at end of file diff --git a/src/assets/style/theme/dialog.scss b/src/assets/style/theme/dialog.scss index b967176a2113dea569ffd505399e0991fbb3225c..d38740939e3099b0415e73aa8826280a2a177b6d 100644 --- a/src/assets/style/theme/dialog.scss +++ b/src/assets/style/theme/dialog.scss @@ -2,6 +2,9 @@ @use '../mixin/font.scss' as *; // 屏蔽loading 遮罩 .o-layer { + .o-dlg-header { + color: var(--o-color-info1); + } &.o-loading { --layer-mask: var(--o-color-fill1); --loading-mask-icon-color: var(--o-color-info1); diff --git a/src/assets/style/theme/index.scss b/src/assets/style/theme/index.scss index d7d93fa4e290f37a4af0ab6fa1011c9b8f2fc1d9..3aaaeb1f806d63b2d1801ca76c6d9e9056b81a76 100644 --- a/src/assets/style/theme/index.scss +++ b/src/assets/style/theme/index.scss @@ -10,3 +10,4 @@ @use './tag.scss' as *; @use './popup.scss' as *; @use './tab.scss' as *; +@use './rate.scss' as *; diff --git a/src/assets/style/theme/rate.scss b/src/assets/style/theme/rate.scss new file mode 100644 index 0000000000000000000000000000000000000000..24ac53fbaaef4d6704c983072a7d06e9b2f5113f --- /dev/null +++ b/src/assets/style/theme/rate.scss @@ -0,0 +1,4 @@ +.o-rate { + --rate-color: var(--o-color-control3); + --rate-size: 24px; +} diff --git a/src/assets/style/theme/tab.scss b/src/assets/style/theme/tab.scss index 319f4caf8a372e51b0c44165c16f5067d3b7782e..f8ed08a4a4ad3ce60a8947aeb3d642d5c6a44865 100644 --- a/src/assets/style/theme/tab.scss +++ b/src/assets/style/theme/tab.scss @@ -1,4 +1,5 @@ .field-tabs { + --tab-nav-divider: 1px solid var(--o-color-control4); > .o-tab-head > .o-tab-navs { max-width: var(--layout-content-max-width); padding-left: var(--layout-content-padding); @@ -6,3 +7,72 @@ margin: 0 auto; } } + +.domain-tabs { + &.min { + > .o-tab-head { + .o-tab-nav-anchor { + display: none; + } + + .o-tab-nav-active { + color: var(--o-color-info1); + cursor: default; + } + } + } + .o-tab-head { + display: block !important; + } + .o-tab-navs { + --tab-nav-justify: left; + margin-bottom: 24px; + } + .o-table { + word-break: break-word; + --table-edge-padding: 24px; + .arch, + .appVer { + width: 250px; + } + tbody tr:hover { + background: none; + } + } + + // 应用镜像样式 + &.tabs-switch { + .o-tab-nav-list { + background: var(--o-color-fill1); + border-radius: 8px; + height: 40px; + padding: 4px; + .o-tab-nav { + margin: 0 !important; + position: relative; + padding: 2px 12px; + z-index: 3; + } + } + .o-tab-nav-anchor { + top: 0; + padding: 4px 0; + .o-tab-nav-anchor-line { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); + border-radius: 4px; + height: 100%; + background: var(--o-color-fill2); + } + } + } + &.tabs-one { + .o-tab-nav-active { + color: var(--o-color-info1); + cursor: default; + padding: 0; + } + .o-tab-nav-anchor { + display: none; + } + } +} diff --git a/src/assets/svg-icons/icon-copy.svg b/src/assets/svg-icons/icon-copy.svg index 705949c0ef39a8d5ed98b5ce37877e6ff25fa59a..c340cd26788e697ac28dc07f5b1b9f2184e4c5db 100644 --- a/src/assets/svg-icons/icon-copy.svg +++ b/src/assets/svg-icons/icon-copy.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg-icons/icon-moon.svg b/src/assets/svg-icons/icon-moon.svg index 659890ab8e6e536cd87645a63fb66d2d1ca82e99..e098d216cb9cd73893176acbdfd840b469289587 100644 --- a/src/assets/svg-icons/icon-moon.svg +++ b/src/assets/svg-icons/icon-moon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/svg-icons/icon-sun.svg b/src/assets/svg-icons/icon-sun.svg index d38960765b2f622069ef44b1710f320b341571b4..5bfc68965118ffe7ce1238cca5bf833240cea82d 100644 --- a/src/assets/svg-icons/icon-sun.svg +++ b/src/assets/svg-icons/icon-sun.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/svg-icons/icon-time-order.svg b/src/assets/svg-icons/icon-time-order.svg index 8356497a08507aaf47071419eefa3f75cd7945c0..a333c8a15f2beba14d49849e67b490e9e1eb5838 100644 --- a/src/assets/svg-icons/icon-time-order.svg +++ b/src/assets/svg-icons/icon-time-order.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/svg-icons/icon-user.svg b/src/assets/svg-icons/icon-user.svg index 15df5c1a185b155ab6876ae42c9b68a617a6f2c2..45fefce2a2a6661df083cfd66a698b090468571d 100644 --- a/src/assets/svg-icons/icon-user.svg +++ b/src/assets/svg-icons/icon-user.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/src/components/AppBanner.vue b/src/components/AppBanner.vue index c0525f512415854de8e094ee927343f650432d21..f13838ca2a2ebed2b10cdfb1ea0f8338d91de9ef 100644 --- a/src/components/AppBanner.vue +++ b/src/components/AppBanner.vue @@ -75,7 +75,11 @@ defineExpose({ background-color: var(--o-color-primary1); overflow: hidden; } - +@include in-dark { + .banner-bg { + @include img-in-dark; + } +} .banner-bg { position: absolute; height: 100%; diff --git a/src/components/AppFeedback.vue b/src/components/AppFeedback.vue index 944c1998bd9ff30ff50128c52b44da777aaf1bd1..9790fdf52ebad1d3c721a6101bda02b8718d368d 100644 --- a/src/components/AppFeedback.vue +++ b/src/components/AppFeedback.vue @@ -142,7 +142,6 @@ const onExternalDialog = () => { clearDataAfterJump = true; }; - const goToFeedbackDetailUrl = (url: string) => { externalLink.value = decodeURIComponent(url); showExternalDlg.value = true; @@ -242,7 +241,4 @@ const jumpOut = () => { } } } -:deep(.o-rate) { - --rate-size: 24px; -} diff --git a/src/components/OCardItem.vue b/src/components/OCardItem.vue index dbf2d9c982ffc509258b18ae4740a20c91f78aa0..a3fe26e64a19d9d142b80759846ebec65d0ffe45 100644 --- a/src/components/OCardItem.vue +++ b/src/components/OCardItem.vue @@ -6,6 +6,7 @@ import { getTagsIcon } from '@/utils/common'; import { useLocale } from '@/composables/useLocale'; import { useI18n } from 'vue-i18n'; import { useRoute } from 'vue-router'; +import { useTheme } from '@/composables/useTheme'; import { maintainerDefaults } from '@/data/query'; import defaultImg from '@/assets/default-logo.png'; @@ -20,51 +21,36 @@ defineProps({ const route = useRoute(); const { locale } = useLocale(); const { t } = useI18n(); +const { isDark } = useTheme(); + +// 名称转换 +const pkgNameConversion = (v: string) => { + return v === 'IMAGE' ? 'app' : v.toLocaleLowerCase(); +}; // 跳转id function getQueryStr(params: PkgIdsT) { - let queryStr = ''; + if (Object.entries(params).length > 0) { + const ids = Object.entries(params) + .filter(([key, value]) => value) + .map(([key, value]) => `${pkgNameConversion(key)}PkgId=${encodeURIComponent(value)}`); - if (params.RPM) { - queryStr += `&rpmPkgId=${encodeURIComponent(params.RPM)}`; - } - if (params.IMAGE) { - queryStr += `&appPkgId=${encodeURIComponent(params.IMAGE)}`; + return ids.join('&').replace(/^&/, ''); } - if (params.EPKG) { - queryStr += `&epkgPkgId=${encodeURIComponent(params.EPKG)}`; - } - if (params.OEPKG) { - queryStr += `&oepkgPkgId=${encodeURIComponent(params.OEPKG)}`; - } - return queryStr.replace(/^&/, ''); } // Maintainer数据 function getMaintainersStr(params: PkgIdsT) { - let maintainers = ''; const line = ' ; '; - - Object.keys(params).forEach((key) => { - if (!params[key]) { - params[key] = maintainerDefaults.name; - } - }); - - if (params.RPM) { - maintainers += `${params.RPM}${line}`; - } - if (params.IMAGE) { - maintainers += `${params.IMAGE}${line}`; - } - if (params.EPKG) { - maintainers += `${params.EPKG}${line}`; - } - if (params.OEPKG) { - maintainers += `${params.OEPKG}${line}`; + const defaultName = maintainerDefaults.name; + if (params && Object.entries(params).length > 0) { + const maintainers = Object.entries(params).map(([key, value]) => (value ? value : defaultName)); + // 去重 + const uniqueVal = [...new Set(maintainers)]; + return uniqueVal.join(line).replace(/ ; +$/, ''); + } else { + return defaultName; } - - return maintainers.replace(/ ; +$/, ''); } const jumpTo = (id: PkgIdsT, type?: PkgTypeT) => { @@ -112,7 +98,7 @@ onMounted(() => { -

+

{{ getMaintainersStr(data.maintainers) }}

@@ -175,7 +161,7 @@ onMounted(() => { flex: 1; word-break: break-word; font-weight: 500; - + transition: all 0.3s ease; display: -webkit-box; height: 60px; overflow: hidden; @@ -205,6 +191,7 @@ onMounted(() => { margin-top: 16px; .o-icon { margin-right: 8px; + color: var(--o-color-info3); svg { width: 16px; height: 16px; @@ -212,7 +199,6 @@ onMounted(() => { } } .desc { - @include text1; margin-top: 8px; color: var(--o-color-info2); overflow: hidden; @@ -221,11 +207,14 @@ onMounted(() => { position: relative; word-break: break-all; height: 48px; - span { - color: var(--o-color-primary1); + + --linear-gradient: var(--o-mixedgray-1); + &.dark { + --linear-gradient: var(--o-mixedgray-4); } + @include text1; &::after { - background-image: linear-gradient(90deg, hsla(0, 0%, 93%, 0), hsla(0, 0%, 100%, 0.8) 59%, var(--o-color-control-light) 100%); + background-image: linear-gradient(90deg, rgba(var(--linear-gradient), 0), rgba(var(--linear-gradient), 0.8) 59%, var(--o-color-control-light) 100%); bottom: 0; content: ''; height: 24px; @@ -234,6 +223,9 @@ onMounted(() => { right: 0; width: 4em; } + span { + color: var(--o-color-primary1); + } } } } diff --git a/src/components/OCodeCopy.vue b/src/components/OCodeCopy.vue index b6347aea2e9200ef11bf26af6b816f73e655f085..6d7a1bcc05f823b4106a8d57972876120a308a87 100644 --- a/src/components/OCodeCopy.vue +++ b/src/components/OCodeCopy.vue @@ -43,7 +43,7 @@ const copyText = (e: MouseEvent) => { diff --git a/src/components/AppHeader.vue b/src/components/header/AppHeader.vue similarity index 90% rename from src/components/AppHeader.vue rename to src/components/header/AppHeader.vue index f05a7117bb5cce5c3c718c7fdec922d53170b1cd..879ba28530e62c64bdfb37d69a87117351c6adb5 100644 --- a/src/components/AppHeader.vue +++ b/src/components/header/AppHeader.vue @@ -5,14 +5,18 @@ import { useRouter } from 'vue-router'; import { useLangStore } from '@/stores/common'; import { OPENEULER } from '@/data/config'; import { useI18n } from 'vue-i18n'; -import HeaderNav from '@/components/HeaderNav.vue'; -import AppLogin from '@/components/AppLogin.vue'; +import { useTheme } from '@/composables/useTheme'; +import HeaderNav from '@/components/header/HeaderNav.vue'; +import AppLogin from '@/components/header/AppLogin.vue'; +import HeaderTheme from '@/components/header/HeaderTheme.vue'; import openeulerLogo from '@/assets/openeuler-logo.svg'; +import openeulerLogoDark from '@/assets/openeuler-logo-dark.svg'; const { locale, t } = useI18n(); const router = useRouter(); const langStore = useLangStore(); +const { isDark } = useTheme(); watch( () => { @@ -36,7 +40,7 @@ const goHome = () => {
+
@@ -54,15 +59,14 @@ const goHome = () => { -@/stores/common diff --git a/src/components/AppLogin.vue b/src/components/header/AppLogin.vue similarity index 74% rename from src/components/AppLogin.vue rename to src/components/header/AppLogin.vue index 92cf460a019fbf7f1ec9544899dea364899df6d4..34c3e6006618beac8871430f081f9575990e0fb7 100644 --- a/src/components/AppLogin.vue +++ b/src/components/header/AppLogin.vue @@ -1,16 +1,22 @@ \ No newline at end of file + diff --git a/src/components/HeaderNav.vue b/src/components/header/HeaderNav.vue similarity index 100% rename from src/components/HeaderNav.vue rename to src/components/header/HeaderNav.vue diff --git a/src/components/header/HeaderTheme.vue b/src/components/header/HeaderTheme.vue new file mode 100644 index 0000000000000000000000000000000000000000..309bc71cde4ec63c39cce3f11abc9d158b8fc2c0 --- /dev/null +++ b/src/components/header/HeaderTheme.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/src/components/search/SearchFilter.vue b/src/components/search/SearchFilter.vue index d195fe80055482f54857ea93ae377ccdcc59a837..992836a145ef81ad1313a2f8cd43fcda326b1c81 100644 --- a/src/components/search/SearchFilter.vue +++ b/src/components/search/SearchFilter.vue @@ -1,6 +1,6 @@