feat(wallpaper-editor): UI/UX & logic

src/containers/editor/WallpaperEditor/BuildIn/AnglePanel.tsx

@@ -0,0 +1,48 @@
+import { FC, memo } from 'react'
+
+import {
+  Wrapper,
+  Top,
+  Bottom,
+  Left,
+  Right,
+  NeedleDot,
+  Needle,
+} from '../styles/build_in/angle_panel'
+import { changeDirection } from '../logic'
+
+type TProps = {
+  direction: string
+}
+
+const AnglePanel: FC<TProps> = ({ direction }) => {
+  return (
+    <Wrapper>
+      <Top $active={direction === 'top'} onClick={() => changeDirection('top')}>
+        上
+      </Top>
+      <Bottom
+        $active={direction === 'bottom'}
+        onClick={() => changeDirection('bottom')}
+      >
+        下
+      </Bottom>
+      <Left
+        $active={direction === 'left'}
+        onClick={() => changeDirection('left')}
+      >
+        左
+      </Left>
+      <Right
+        $active={direction === 'right'}
+        onClick={() => changeDirection('right')}
+      >
+        右
+      </Right>
+      <NeedleDot />
+      <Needle direction={direction} />
+    </Wrapper>
+  )
+}
+
+export default memo(AnglePanel)

src/containers/editor/WallpaperEditor/BuildIn/GradientGroup.tsx

@@ -0,0 +1,43 @@
+import { FC, memo } from 'react'
+import { keys } from 'ramda'
+
+import type { TWallpaperGradient } from '@/spec'
+import { parseWallpaper } from '@/utils/wallpaper'
+
+import {
+  Wrapper,
+  Block,
+  BallWrapper,
+  ColorBall,
+} from '../styles/build_in/gradient_group'
+
+import { changeWallpaper } from '../logic'
+
+type TProps = {
+  wallpaper: string
+  gradientWallpapers: Record<string, TWallpaperGradient>
+}
+
+const PicGroup: FC<TProps> = ({ wallpaper, gradientWallpapers }) => {
+  const gradientKeys = keys(gradientWallpapers)
+
+  return (
+    <Wrapper>
+      {gradientKeys.map((name) => (
+        <Block key={name}>
+          <BallWrapper
+            $active={name === wallpaper}
+            onClick={() => changeWallpaper(name)}
+          >
+            <ColorBall
+              $active={name === wallpaper}
+              background={parseWallpaper(gradientWallpapers, name).background}
+            />
+          </BallWrapper>
+        </Block>
+      ))}
+    </Wrapper>
+  )
+}
+
+export default memo(PicGroup)

src/containers/editor/WallpaperEditor/BuildIn/PatternGroup.tsx

@@ -0,0 +1,43 @@
+import { FC, memo } from 'react'
+import { keys } from 'ramda'
+
+import type { TWallpaperPic } from '@/spec'
+
+import {
+  Wrapper,
+  Block,
+  Image,
+  ActiveSign,
+  CheckIcon,
+} from '../styles/build_in/pattern_group'
+
+import { changeWallpaper } from '../logic'
+
+type TProps = {
+  wallpaper: string
+  patternWallpapers: Record<string, TWallpaperPic>
+}
+
+const PatternGroup: FC<TProps> = ({ wallpaper, patternWallpapers }) => {
+  const patternKeys = keys(patternWallpapers)
+
+  return (
+    <Wrapper>
+      {patternKeys.map((name) => (
+        <Block key={name} $active={name === wallpaper}>
+          {name === wallpaper && (
+            <ActiveSign>
+              <CheckIcon />
+            </ActiveSign>
+          )}
+          <Image
+            src={patternWallpapers[name].bgImage}
+            onClick={() => changeWallpaper(name)}
+          />
+        </Block>
+      ))}
+    </Wrapper>
+  )
+}
+
+export default memo(PatternGroup)

src/containers/editor/WallpaperEditor/BuildIn/index.tsx

@@ -0,0 +1,91 @@
+/* *
+ * WallpaperEditor
+ *
+ */
+
+import { FC, Fragment } from 'react'
+
+import { WALLPAPER_TYPE } from '@/constant'
+
+import { Br } from '@/widgets/Common'
+import Checker from '@/widgets/Checker'
+
+import PatternGroup from './PatternGroup'
+import GradientGroup from './GradientGroup'
+import AnglePanel from './AnglePanel'
+
+import type { TWallpaperData } from '../spec'
+import {
+  Wrapper,
+  Title,
+  SettingWrapper,
+  GeneralSettings,
+  Divider,
+  AngleSettings,
+} from '../styles/build_in'
+import { togglePattern, toggleBlur } from '../logic'
+
+type TProps = {
+  wallpaperData: TWallpaperData
+}
+
+const BuildIn: FC<TProps> = ({ wallpaperData }) => {
+  const {
+    wallpaper,
+    wallpaperType,
+    gradientWallpapers,
+    patternWallpapers,
+    hasPattern,
+    hasBlur,
+    direction,
+  } = wallpaperData
+
+  return (
+    <Wrapper>
+      <Title>图案:</Title>
+      <PatternGroup
+        wallpaper={wallpaper}
+        patternWallpapers={patternWallpapers}
+      />
+      <Br top={20} />
+      <Title>纯色渐变:</Title>
+      <GradientGroup
+        wallpaper={wallpaper}
+        gradientWallpapers={gradientWallpapers}
+      />
+      <Br top={25} />
+      <SettingWrapper show={wallpaperType !== WALLPAPER_TYPE.NONE}>
+        <GeneralSettings>
+          <Title>附加效果:</Title>
+          {wallpaperType === WALLPAPER_TYPE.GRADIENT && (
+            <Fragment>
+              <Br top={20} />
+              <Checker checked={hasPattern} onChange={togglePattern}>
+                叠加印纹
+              </Checker>
+            </Fragment>
+          )}
+
+          <Br top={10} />
+          <Checker checked={hasBlur} onChange={toggleBlur}>
+            模糊效果
+          </Checker>
+        </GeneralSettings>
+
+        {wallpaperType === WALLPAPER_TYPE.GRADIENT && (
+          <Fragment>
+            <Divider />
+
+            <AngleSettings>
+              <Title>渐变方向:</Title>
+              <AnglePanel direction={direction} />
+            </AngleSettings>
+          </Fragment>
+        )}
+      </SettingWrapper>
+      <Br top={50} />
+    </Wrapper>
+  )
+}
+
+export default BuildIn

src/containers/editor/WallpaperEditor/Custom/UploadBox.tsx

@@ -0,0 +1,36 @@
+import { FC, memo } from 'react'
+
+import { SVG } from '@/constant'
+import MenuButton from '@/widgets/Buttons/MenuButton'
+
+import {
+  Wrapper,
+  Menu,
+  MoreIcon,
+  UploadIcon,
+  Title,
+} from '../styles/custom/upload_box'
+
+const menuOptions = [
+  {
+    key: 'url',
+    icon: SVG.COPY,
+    title: '图片地址',
+  },
+]
+
+const UploadBox: FC = () => {
+  return (
+    <Wrapper>
+      <Menu>
+        <MenuButton placement="bottom-end" options={menuOptions}>
+          <MoreIcon />
+        </MenuButton>
+      </Menu>
+      <UploadIcon />
+      <Title>上传 / 引入图片</Title>
+    </Wrapper>
+  )
+}
+
+export default memo(UploadBox)

src/containers/editor/WallpaperEditor/Custom/index.tsx

@@ -0,0 +1,14 @@
+import { FC, memo } from 'react'
+
+import UploadBox from './UploadBox'
+import { Wrapper } from '../styles/custom'
+
+const Custom: FC = () => {
+  return (
+    <Wrapper>
+      <UploadBox />
+    </Wrapper>
+  )
+}
+
+export default memo(Custom)

src/containers/editor/WallpaperEditor/Footer.tsx

@@ -0,0 +1,31 @@
+import { FC, memo } from 'react'
+
+import { TWallpaperType } from '@/spec'
+import { WALLPAPER_TYPE } from '@/constant'
+
+import Button from '@/widgets/Buttons/Button'
+import { Wrapper, ForbidImgIcon, ConfirmBtn } from './styles/footer'
+import { changeWallpaper } from './logic'
+
+type TProps = {
+  wallpaperType: TWallpaperType
+}
+const Footer: FC<TProps> = ({ wallpaperType }) => {
+  return (
+    <Wrapper>
+      {wallpaperType !== WALLPAPER_TYPE.NONE ? (
+        <Button size="small" ghost noBorder onClick={() => changeWallpaper('')}>
+          <ForbidImgIcon /> 空白壁纸
+        </Button>
+      ) : (
+        <div />
+      )}
+
+      <ConfirmBtn size="small" space={13}>
+        确定
+      </ConfirmBtn>
+    </Wrapper>
+  )
+}
+
+export default memo(Footer)

src/containers/editor/WallpaperEditor/constant.ts

@@ -0,0 +1,17 @@
+import type { TTab } from './spec'
+
+export const TAB = {
+  BUILDIN: 'buildin',
+  CUSTOM: 'custom',
+} as Record<Uppercase<TTab>, TTab>
+
+export const TAB_OPTIONS = [
+  {
+    title: '内置壁纸',
+    raw: TAB.BUILDIN,
+  },
+  {
+    title: '上传壁纸',
+    raw: TAB.CUSTOM,
+  },
+]

src/containers/editor/WallpaperEditor/index.tsx

@@ -0,0 +1,66 @@
+/* *
+ * WallpaperEditor
+ *
+ */
+
+import { FC } from 'react'
+
+import { bond } from '@/utils/mobx'
+import { VIEW, DRAWER_SCROLLER } from '@/constant'
+
+import { Tabs } from '@/widgets/Switcher'
+import CustomScroller from '@/widgets/CustomScroller'
+
+import type { TStore } from './store'
+import { TAB, TAB_OPTIONS } from './constant'
+
+import BuildIn from './BuildIn'
+import Custom from './Custom'
+import Footer from './Footer'
+
+import { Wrapper, Banner, Title, Content } from './styles'
+import { useInit, changeTab } from './logic'
+
+type TProps = {
+  wallpaperEditor?: TStore
+  testid?: string
+}
+
+const WallpaperEditorContainer: FC<TProps> = ({
+  wallpaperEditor: store,
+  testid = 'wallpaper-editor',
+}) => {
+  useInit(store)
+  const { tab, wallpaperData } = store
+
+  return (
+    <Wrapper testid={testid}>
+      <Banner>
+        <Title>壁纸设置</Title>
+        <Tabs
+          items={TAB_OPTIONS}
+          activeKey={tab}
+          onChange={changeTab}
+          view={VIEW.DRAWER}
+        />
+      </Banner>
+
+      <CustomScroller
+        instanceKey={DRAWER_SCROLLER}
+        direction="vertical"
+        height="calc(100vh - 226px)"
+        barSize="small"
+        showShadow={false}
+        autoHide={false}
+      >
+        <Content>
+          {tab === TAB.BUILDIN && <BuildIn wallpaperData={wallpaperData} />}
+          {tab === TAB.CUSTOM && <Custom />}
+        </Content>
+      </CustomScroller>
+      <Footer wallpaperType={wallpaperData.wallpaperType} />
+    </Wrapper>
+  )
+}
+
+export default bond(WallpaperEditorContainer, 'wallpaperEditor') as FC<TProps>