Merge pull request #4412 from Tinhone/fresh-home-column-font-new-color

[组件-清爽首页] feat: 为栏目主标题字体颜色添加浅色样式
the1812 · Sep 14, 2023 · a01afc2 · a01afc2
2 parents 7ba1ef3 + c0bb391
commit a01afc2
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/...ib/components/style/home-redesign/fresh/init-dropdown-options/area-primary-title-color.ts b/...ib/components/style/home-redesign/fresh/init-dropdown-options/area-primary-title-color.ts
@@ -0,0 +1,22 @@
+import { addComponentListener } from '@/core/settings'
+
+export enum areaPrimaryTitleColorEnum {
+  Dark = '深色',
+  Light = '浅色',
+}
+
+const map = {
+  [areaPrimaryTitleColorEnum.Dark]: 'dark',
+  [areaPrimaryTitleColorEnum.Light]: 'light',
+}
+
+addComponentListener(
+  'freshHome.areaPrimaryTitleColor',
+  (value: areaPrimaryTitleColorEnum) => {
+    document.documentElement.setAttribute(
+      'fresh-home--options--area-primary-title-color',
+      map[value],
+    )
+  },
+  true,
+)
diff --git a/registry/lib/components/style/home-redesign/fresh/layouts/areas/Areas.vue b/registry/lib/components/style/home-redesign/fresh/layouts/areas/Areas.vue
@@ -97,7 +97,16 @@ export default Vue.extend({
         bottom: 8px;
         font-size: 18px;
         @include semi-bold();
-        color: black;
+        transition: color 0.2s ease-out, text-shadow 0.2s ease-out;
+
+        html[fresh-home--options--area-primary-title-color='dark'] & {
+          color: black;
+        }
+
+        html[fresh-home--options--area-primary-title-color='light'] & {
+          color: #fafafa;
+          text-shadow: rgba(0, 0, 0, 0.2) 0 0 8px;
+        }
       }
     }
     &-other {

diff --git a/registry/lib/components/style/home-redesign/fresh/types.ts b/registry/lib/components/style/home-redesign/fresh/types.ts
@@ -1,6 +1,7 @@
 import { defineOptionsMetadata } from '@/components/define'
 import { getNumberValidator } from '@/core/utils'
 import type { FreshLayoutItemSettings } from './layouts/fresh-layout-item'
+import { areaPrimaryTitleColorEnum } from './init-dropdown-options/area-primary-title-color'
 
 export enum RankListMode {
   Default = 'default',
@@ -48,6 +49,11 @@ export const freshHomeOptionsMetadata = defineOptionsMetadata({
     displayName: '启用横向滚动',
     defaultValue: false,
   },
+  areaPrimaryTitleColor: {
+    displayName: '栏目主标题颜色',
+    dropdownEnum: areaPrimaryTitleColorEnum,
+    defaultValue: areaPrimaryTitleColorEnum.Dark,
+  },
   maxWidth: {
     displayName: '最大宽度 (px)',
     defaultValue: 1440,