feat(dashboard): haader/footer links api workflow

src/containers/thread/DashboardThread/Footer/Editors/LinkEditor.tsx

@@ -147,6 +147,7 @@ const LinkEditor: FC<TProps> = ({
           <EditFooter>
             {isTouched ? (
               <SavingBar
+                prefix="是否添加"
                 onConfirm={confirmLinkEditing}
                 onCancel={cancelLinkEditing}
                 isTouched

src/containers/thread/DashboardThread/Footer/index.tsx

@@ -2,11 +2,14 @@ import { FC } from 'react'
 
 import type { TFooterSettings, TTouched } from '../spec'
 
-import Templates from './Templates'
+import { SETTING_FIELD } from '../constant'
+
+import SavingBar from '../SavingBar'
 
+import Templates from './Templates'
 import Editor from './Editors'
 
-import { Wrapper } from '../styles/footer'
+import { Wrapper, SavingWrapper } from '../styles/footer'
 
 type TProps = {
   settings: TFooterSettings
@@ -20,6 +23,15 @@ const Footer: FC<TProps> = ({ settings, touched }) => {
       <br />
       <br />
       <Editor settings={settings} />
+
+      <SavingWrapper>
+        <SavingBar
+          field={SETTING_FIELD.FOOTER_LINKS}
+          isTouched={touched.footerLinks}
+          loading={settings.saving}
+          top={30}
+        />
+      </SavingWrapper>
     </Wrapper>
   )
 }

src/containers/thread/DashboardThread/Header/index.tsx

@@ -2,10 +2,14 @@ import { FC } from 'react'
 
 import type { THeaderSettings, TTouched } from '../spec'
 
+import { SETTING_FIELD } from '../constant'
+
+import SavingBar from '../SavingBar'
+
 import Templates from './Templates'
 import Editor from './Editors'
 
-import { Wrapper } from '../styles/header'
+import { Wrapper, SavingWrapper } from '../styles/header'
 
 type TProps = {
   settings: THeaderSettings
@@ -19,6 +23,15 @@ const Header: FC<TProps> = ({ settings, touched }) => {
       <br />
       <br />
       <Editor settings={settings} />
+
+      <SavingWrapper>
+        <SavingBar
+          field={SETTING_FIELD.HEADER_LINKS}
+          isTouched={touched.headerLinks}
+          loading={settings.saving}
+          top={30}
+        />
+      </SavingWrapper>
     </Wrapper>
   )
 }

src/containers/thread/DashboardThread/constant.tsx

@@ -47,6 +47,8 @@ export const SETTING_FIELD = {
   MEDIA_REPORTS: 'mediaReports',
   SEO: 'seo',
   SOCIAL_LINKS: 'socialLinks',
+  HEADER_LINKS: 'headerLinks',
+  FOOTER_LINKS: 'footerLinks',
   TAG: 'tag',
   TAG_INDEX: 'tagIndex',
   FAQ_SECTIONS: 'faqSections',

src/containers/thread/DashboardThread/logic/index.ts

@@ -176,6 +176,22 @@ const _doMutation = (field: string, e: TEditValue): void => {
     return
   }
 
+  if (field === SETTING_FIELD.HEADER_LINKS) {
+    const { headerSettings } = store
+    const { headerLinks } = headerSettings
+
+    sr71$.mutate(S.updateDashboardHeaderLinks, { community, headerLinks })
+    return
+  }
+
+  if (field === SETTING_FIELD.FOOTER_LINKS) {
+    const { footerSettings } = store
+    const { footerLinks } = footerSettings
+
+    sr71$.mutate(S.updateDashboardFooterLinks, { community, footerLinks })
+    return
+  }
+
   if (field === SETTING_FIELD.BASE_INFO) {
     const { baseInfoTab } = store
 
@@ -538,6 +554,14 @@ const DataSolver = [
     match: asyncRes('reindexTagsInGroup'),
     action: () => _handleDone(),
   },
+  {
+    match: asyncRes('updateDashboardHeaderLinks'),
+    action: () => _handleDone(),
+  },
+  {
+    match: asyncRes('updateDashboardFooterLinks'),
+    action: () => _handleDone(),
+  },
   {
     match: asyncRes('pagedPosts'),
     action: ({ pagedPosts }) => {

src/containers/thread/DashboardThread/logic/links.ts

@@ -5,6 +5,7 @@ import { CHANGE_MODE } from '@/constant/mode'
 import { ROUTE } from '@/constant/route'
 import { ONE_LINK_GROUP, MORE_GROUP } from '@/constant/dashboard'
 import { sortByIndex, groupByKey } from '@/utils/helper'
+import { toJS } from '@/utils/mobx'
 
 import type { TMoveLinkDir } from '../spec'
 import { EMPTY_LINK_ITEM } from '../constant'
@@ -83,7 +84,7 @@ const _emptyLinksIfNedd = (links: TLinkItem[]): TLinkItem[] => {
 }
 
 export const cancelLinkEditing = (): void => {
-  const { curPageLinksKey, editingLink, editingLinkMode } = store
+  const { curPageLinksKey, editingLink, editingLinkMode, initSettings } = store
   const links = store[curPageLinksKey.settings][curPageLinksKey.links]
 
   if (editingLinkMode === CHANGE_MODE.UPDATE) {
@@ -98,7 +99,11 @@ export const cancelLinkEditing = (): void => {
 
   linksAfter = _emptyLinksIfNedd(linksAfter)
 
-  store.mark({ [curPageLinksKey.links]: linksAfter, editingLink: null })
+  store.mark({
+    [curPageLinksKey.links]: linksAfter,
+    editingLink: null,
+    initSettings: { ...toJS(initSettings), [curPageLinksKey.links]: linksAfter },
+  })
 }
 
 export const confirmLinkEditing = (): void => {

src/containers/thread/DashboardThread/schema.ts

@@ -287,6 +287,31 @@ const communityOverview = gql`
   }
 `
 
+const updateDashboardHeaderLinks = gql`
+  mutation ($community: String!, $headerLinks: [dashboardLinkMap]) {
+    updateDashboardHeaderLinks(community: $community, headerLinks: $headerLinks) {
+      slug
+      dashboard {
+        headerLinks {
+          ${F.customLink}
+        }
+      }
+    }
+  }
+`
+const updateDashboardFooterLinks = gql`
+  mutation ($community: String!, $footerLinks: [dashboardLinkMap]) {
+    updateDashboardFooterLinks(community: $community, footerLinks: $footerLinks) {
+      slug
+      dashboard {
+        footerLinks {
+          ${F.customLink}
+        }
+      }
+    }
+  }
+`
+
 const openGraphInfo = gql`
   query ($url: String!) {
     openGraphInfo(url: $url) {
@@ -318,6 +343,8 @@ const schema = {
   updateModerators,
   communityOverview,
   openGraphInfo,
+  updateDashboardHeaderLinks,
+  updateDashboardFooterLinks,
 }
 
 export default schema

src/containers/thread/DashboardThread/spec.d.ts

@@ -216,6 +216,9 @@ export type TTouched = {
   tags: boolean
   tagsIndex: boolean
 
+  headerLinks: boolean
+  footerLinks: boolean
+
   faqSections: boolean
 
   socialLinks: boolean
@@ -260,6 +263,8 @@ export type TSettingField =
   | 'glowType'
   | 'glowFixed'
   | 'glowOpacity'
+  | 'headerLinks'
+  | 'footerLinks'
   | 'docLayout'
   | 'docFaqLayout'
   | 'topbarLayout'

src/containers/thread/DashboardThread/store/Models.ts

@@ -190,7 +190,8 @@ export const settingsModalFields = {
   headerLayout: T.opt(T.enum(values(HEADER_LAYOUT)), HEADER_LAYOUT.CENTER),
   footerLayout: T.opt(T.enum(values(FOOTER_LAYOUT)), FOOTER_LAYOUT.GROUP),
 
-  footerLinks: T.opt(T.array(LinkItem), DEFAULT_LINK_ITEMS),
+  // footerLinks: T.opt(T.array(LinkItem), DEFAULT_LINK_ITEMS),
+  footerLinks: T.opt(T.array(LinkItem), []),
   headerLinks: T.opt(T.array(LinkItem), []),
 
   // moderators

src/containers/thread/DashboardThread/store/index.ts

@@ -265,12 +265,12 @@ const DashboardThread = T.model('DashboardThread', {
         _tagsIndexTouched,
         _socialLinksTouched,
         _mediaReportsTouched,
+        editingLink,
       } = slf
 
       const _isChanged = (field: TSettingField): boolean =>
         !equals(toJS(slf[field]), toJS(init[field]))
       const _anyChanged = (fields: TSettingField[]): boolean => any(_isChanged)(fields)
-
       const _mapArrayChanged = (key: string): boolean => {
         return JSON.stringify(toJS(self[key])) !== JSON.stringify(toJS(self.initSettings[key]))
       }
@@ -286,6 +286,9 @@ const DashboardThread = T.model('DashboardThread', {
       const docLayoutTouched = _isChanged('docLayout')
       const docFaqLayoutTouched = _isChanged('docFaqLayout')
 
+      const headerLinksChanged = _isChanged('headerLinks') && editingLink === null
+      const footerLinksChanged = _isChanged('footerLinks') && editingLink === null
+
       const broadcastLayoutTouched = _isChanged('broadcastLayout')
       const broadcastBgTouched = _isChanged('broadcastBg')
 
@@ -339,6 +342,8 @@ const DashboardThread = T.model('DashboardThread', {
         socialLinks: _socialLinksTouched,
         mediaReports: _mediaReportsTouched,
 
+        headerLinks: headerLinksChanged,
+        footerLinks: footerLinksChanged,
         faqSections: faqSectionsTouched,
 
         glowFixed: glowFixedTouched,
@@ -471,10 +476,10 @@ const DashboardThread = T.model('DashboardThread', {
       } = slf
 
       return {
+        saving: slf.saving,
         headerLayout: toJS(headerLayout),
         headerLinks: toJS(headerLinks),
         editingLink: toJS(editingLink),
-        saving: slf.saving,
         editingLinkMode: editingLinkMode as TChangeMode,
         editingGroup,
         editingGroupIndex,
@@ -500,10 +505,11 @@ const DashboardThread = T.model('DashboardThread', {
       } = slf
 
       return {
+        saving: slf.saving,
         footerLayout: toJS(footerLayout),
+        // footerLinks: reject((item) => isEmpty(item.title), toJS(footerLinks)),
         footerLinks: toJS(footerLinks),
         editingLink: toJS(editingLink),
-        saving: slf.saving,
         editingLinkMode: editingLinkMode as TChangeMode,
         editingGroup,
         editingGroupIndex,

src/containers/thread/DashboardThread/styles/footer/index.ts

@@ -6,4 +6,6 @@ export const Wrapper = styled.div`
   ${css.column()};
 `
 
-export const Title = styled.div``
+export const SavingWrapper = styled.div`
+  width: 98%;
+`

src/containers/thread/DashboardThread/styles/footer/templates/group.ts

@@ -6,7 +6,7 @@ import { TemplateBlock } from '.'
 
 export const Wrapper = styled(TemplateBlock)`
   ${css.row('align-start', 'justify-between')};
-  padding: 12px 20px;
+  padding: 18px 20px;
   height: auto;
   min-height: 150px !important;
   background: ${theme('alphaBg')};
@@ -41,7 +41,7 @@ export const Desc = styled.div`
 `
 export const CenterWrapper = styled.div`
   ${css.column()};
-  gap: 5px 0;
+  gap: 8px 0;
 `
 
 export const GroupTitle = styled.div`
@@ -53,7 +53,7 @@ export const GroupTitle = styled.div`
 export const LinkItem = styled.a`
   ${css.cutRest('80px')};
   color: ${theme('article.digest')};
-  font-size: 11px;
+  font-size: 12px;
   text-decoration: none;
 
   &:hover {

src/containers/thread/DashboardThread/styles/footer/templates/simple.ts

@@ -24,7 +24,7 @@ export const BrandText = styled.div`
 
 export const CenterWrapper = styled.div`
   ${css.row('align-center')};
-  gap: 0 14px;
+  gap: 0 20px;
 `
 
 export const LinkItem = styled.a`

src/containers/thread/DashboardThread/styles/header/index.ts

@@ -6,4 +6,6 @@ export const Wrapper = styled.div`
   ${css.column()};
 `
 
-export const Title = styled.div``
+export const SavingWrapper = styled.div`
+  width: 97%;
+`

src/containers/thread/DashboardThread/styles/side_menu/group.ts

@@ -12,6 +12,7 @@ export const Wrapper = styled.div`
 export const Folder = styled.div`
   ${css.row('align-center', 'justify-between')};
   cursor: pointer;
+  margin-bottom: 12px;
 `
 export const IconWrapper = styled.div`
   ${css.size(18)};
@@ -47,7 +48,7 @@ export const MenuWrapper = styled.div`
 
   border-left: 1px solid transparent;
   border-image: linear-gradient(
-    0.55turn,
+    0.48turn,
     ${theme('divider')},
     ${theme('divider')},
     ${theme('divider')},
@@ -67,7 +68,6 @@ export const Item = styled(Link)<TActive>`
   width: 160px;
   padding: 3px 5px;
   margin-top: 5px;
-  margin-bottom: 5px;
   padding-left: 20px;
   border-radius: 10px;
   font-size: 13.5px;
@@ -83,7 +83,7 @@ export const Item = styled(Link)<TActive>`
     display: ${({ $active }) => ($active ? 'block' : 'none')};
     position: absolute;
     top: 8px;
-    left: -2px;
+    left: -3px;
     width: 4px;
     height: 13px;
     border-radius: 8px;

src/schemas/fragments/base.ts

@@ -24,6 +24,13 @@ export const community = `
   insertedAt
   updatedAt
 `
+export const customLink = `
+  title
+  link
+  group
+  groupIndex
+  index
+`
 export const tag = `
   id
   title

src/schemas/fragments/index.ts

@@ -28,6 +28,7 @@ import {
   pagi,
   getUpvoteSchema,
   getUndoUpvoteSchema,
+  customLink,
 } from './base'
 
 import { pagedPosts } from './paged'
@@ -38,9 +39,9 @@ const F = {
   articleDetail,
   pageArticleMeta,
   author,
+  customLink,
   tag,
   pagedPosts,
-
   user,
   userSocial,
   c11n,