refactor: add color to arrow link

groupher · Dec 25, 2023 · 727e8a9 · 727e8a9
1 parent 955821f
commit 727e8a9
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 10 deletions.
diff --git a/src/app/Landing/DashboardIntros/SideMenus.tsx b/src/app/Landing/DashboardIntros/SideMenus.tsx
@@ -35,11 +35,16 @@ const SideMenus: FC<TProps> = ({ tab, onChange }) => {
           {TABS_ITEMS.map((item) => {
             const $active = tab === item.key
             return (
-              <TabItem key={item.key} $active={$active} onClick={() => onChange(item.key)}>
+              <TabItem
+                key={item.key}
+                $active={$active}
+                onClick={() => onChange(item.key)}
+                $color={item.color}
+              >
                 <ItemTitle $active={$active}>{item.title}</ItemTitle>
                 {$active && <ItemDesc>{item.desc}</ItemDesc>}
                 {$active && (
-                  <ArrowLinker href="/" top={12}>
+                  <ArrowLinker href="/" top={12} color={item.color}>
                     了解更多
                   </ArrowLinker>
                 )}

diff --git a/src/app/Landing/DashboardIntros/constant.ts b/src/app/Landing/DashboardIntros/constant.ts
@@ -1,45 +1,54 @@
+import { COLOR_NAME } from '@/constant/colors'
 import { DASHBOARD_ROUTE } from '@/constant/route'
 
 export const TABS_ITEMS = [
   {
     key: DASHBOARD_ROUTE.LAYOUT,
     title: '布局与样式',
     desc: '整体布局，主题色，壁纸，以及各板块内容展示样式等。',
+    color: COLOR_NAME.PURPLE,
   },
   {
     key: DASHBOARD_ROUTE.SEO,
     title: 'SEO 优化',
     desc: '自定义主流搜索引擎以及 Twitter 断的关键字等.',
+    color: COLOR_NAME.BLUE,
   },
   {
     key: DASHBOARD_ROUTE.POST,
     title: '社区内容管理',
     desc: '管理已发布内容，设置帖子各种属性等。',
+    color: COLOR_NAME.CYAN,
   },
   {
     key: DASHBOARD_ROUTE.TAGS,
     title: '标签设置与管理',
     desc: '各板块相关标签（组）的创建与属性变更。',
+    color: COLOR_NAME.GREEN,
   },
   {
     key: DASHBOARD_ROUTE.ADMINS,
     title: '管理员 / 权限',
     desc: '指派社区管理员，设定相关人员权限。',
+    color: COLOR_NAME.PINK,
   },
   {
     key: DASHBOARD_ROUTE.HEADER,
     title: '页头 / 页脚自定义',
     desc: '自定义社区页头以及页脚的自定链接（组）。',
+    color: COLOR_NAME.ORANGE,
   },
   {
     key: DASHBOARD_ROUTE.WIDGETS,
     title: '绑定与集成',
     desc: '设置集成到目标网站的各种组件的相关属性。',
+    color: COLOR_NAME.YELLOW,
   },
   {
     key: DASHBOARD_ROUTE.TREND,
     title: '统计分析',
     desc: '社区主要统计指标，服务提供商等设定。',
+    color: COLOR_NAME.RED,
   },
 ]
 

diff --git a/src/app/Landing/TechStacks/StackCard.tsx b/src/app/Landing/TechStacks/StackCard.tsx
@@ -27,7 +27,7 @@ const StackCard: FC = () => {
       <Banner>
         <Topping>
           <ThunderIcon wallpaper={wallpaper} />
-          <HighlightText wallpaper={wallpaper}>Powered by</HighlightText>
+          <HighlightText wallpaper={wallpaper}>Techstack</HighlightText>
         </Topping>
 
         <Title>我们的主要技术栈</Title>

diff --git a/src/app/Landing/styles/dashboard_intros/side_menu.ts b/src/app/Landing/styles/dashboard_intros/side_menu.ts
@@ -1,5 +1,5 @@
-import type { TActive } from '@/spec'
-import styled, { css, theme } from '@/css'
+import type { TActive, TColor } from '@/spec'
+import styled, { css, rainbow, theme } from '@/css'
 
 export const Wrapper = styled.div`
   ${css.column('align-both')};
@@ -35,7 +35,8 @@ export const Desc = styled.div`
 export const Tabs = styled.div`
   ${css.column('align-start')};
 `
-export const TabItem = styled.div<TActive>`
+type TTabItem = TActive & TColor
+export const TabItem = styled.div<TTabItem>`
   position: relative;
   cursor: pointer;
 
@@ -53,7 +54,7 @@ export const TabItem = styled.div<TActive>`
   margin-bottom: ${({ $active }) => ($active ? '2px' : 0)};
 
   &:hover {
-    border-left-color: ${theme('hint')};
+    border-left-color: ${({ $color }) => rainbow($color)};
     background: ${theme('htmlBg')};
     box-shadow: ${theme('button.boxShadow')};
   }
@@ -67,7 +68,7 @@ export const TabItem = styled.div<TActive>`
     height: 134px;
     width: 2px;
     border-radius: 5px;
-    background: ${theme('rainbow.purple')};
+    background: ${({ $color }) => rainbow($color)};
     filter: saturate(1.2);
   }
 

diff --git a/src/widgets/ArrowLinker/index.tsx b/src/widgets/ArrowLinker/index.tsx
@@ -7,7 +7,7 @@
 import { FC, ReactNode } from 'react'
 import { observer } from 'mobx-react-lite'
 
-import type { TSpace } from '@/spec'
+import type { TColorName, TSpace } from '@/spec'
 import { buildLog } from '@/logger'
 import usePrimaryColor from '@/hooks/usePrimaryColor'
 
@@ -24,6 +24,7 @@ type TProps = {
   children: ReactNode
   target?: string
   bold?: boolean
+  color?: TColorName | null
 } & TSpace
 
 const ArrowLinker: FC<TProps> = ({
@@ -32,10 +33,11 @@ const ArrowLinker: FC<TProps> = ({
   href = '/',
   target = '_blank',
   bold = false,
+  color = null,
   children,
   ...restProps
 }) => {
-  const primaryColor = usePrimaryColor()
+  const primaryColor = color || usePrimaryColor()
 
   return (
     <Link href={href} target={target}>