diff --git a/server/routes.js b/server/routes.js index 0e1304ad4..6aa8b7c61 100644 --- a/server/routes.js +++ b/server/routes.js @@ -62,7 +62,7 @@ router.route('/meetups/:slug?').get((req, res) => { return renderAndCache({ req, res, path: '/meetups' }) }) -// 酷导游 +// 酷导航 router.route('/cool-guide/:slug?').get((req, res) => { return renderAndCache({ req, res, path: '/cool-guide' }) }) diff --git a/src/components/BuyMeChuanChuan/ChuanSelector.tsx b/src/components/BuyMeChuanChuan/ChuanSelector.tsx index b585d16c9..bc6b86fa9 100755 --- a/src/components/BuyMeChuanChuan/ChuanSelector.tsx +++ b/src/components/BuyMeChuanChuan/ChuanSelector.tsx @@ -24,8 +24,12 @@ const ChuanSelector: FC = ({ active, onSelect }) => { x {options.map((item) => ( - onSelect(item)}> - 1 + onSelect(item)} + > + {item} ))} diff --git a/src/components/FiltersMenu/Filter/ExpandTag.tsx b/src/components/FiltersMenu/Filter/ExpandTag.tsx new file mode 100644 index 000000000..067b9085a --- /dev/null +++ b/src/components/FiltersMenu/Filter/ExpandTag.tsx @@ -0,0 +1,45 @@ +import { FC, memo } from 'react' + +import type { TTag } from '@/spec' +import type { TProps as TFilter } from './index' +import { Wrapper, Dot, Title } from '../styles/filter/tag' + +const isActive = (activeMap, expandMenuId, itemId) => { + if (expandMenuId === null) return false + return activeMap[expandMenuId].id === itemId +} + +type TProps = Pick< + TFilter, + 'expandMenuId' | 'onSelect' | 'revert' | 'activeMap' +> & { tag: TTag } + +const ExpandTag: FC = ({ + tag, + expandMenuId, + activeMap, + onSelect, + revert, +}) => { + return ( + onSelect(expandMenuId, tag)}> + {!revert ? ( + <> + + + {tag.title} + + + ) : ( + <> + + {tag.title} + + + + )} + + ) +} + +export default memo(ExpandTag) diff --git a/src/components/FiltersMenu/Filter/SelectedTag.tsx b/src/components/FiltersMenu/Filter/SelectedTag.tsx new file mode 100644 index 000000000..22390faf0 --- /dev/null +++ b/src/components/FiltersMenu/Filter/SelectedTag.tsx @@ -0,0 +1,34 @@ +import { FC, memo } from 'react' + +import type { TTag } from '@/spec' + +import type { TProps as TFilter } from './index' +import { Wrapper, FoldDot, Title } from '../styles/filter/tag' + +type TProps = Pick & { + tag: TTag +} + +const SelectedTag: FC = ({ tag, expandMenuId, onSelect, revert }) => { + return ( + onSelect(expandMenuId, tag)}> + {!revert ? ( + <> + + + {tag ? tag.title || '全部' : '全部'} + + + ) : ( + <> + + {tag ? tag.title || '全部' : '全部'} + + + + )} + + ) +} + +export default memo(SelectedTag) diff --git a/src/components/FiltersMenu/Filter/index.tsx b/src/components/FiltersMenu/Filter/index.tsx index cf3290a1b..e7452749e 100755 --- a/src/components/FiltersMenu/Filter/index.tsx +++ b/src/components/FiltersMenu/Filter/index.tsx @@ -4,106 +4,61 @@ * */ -import { memo } from 'react' -import T from 'prop-types' +import { FC, memo } from 'react' -import { - Wrapper, - Item, - RadioWrapper, - RadioItem, - ActiveDot, - RadioTitle, -} from '../styles/filter' +import type { TID, TTag } from '@/spec' -const isActive = (activeMap, expandMenuId, itemId) => { - if (!expandMenuId) return false - return activeMap[expandMenuId].id === itemId +import ExpandTag from './ExpandTag' +import SelectedTag from './SelectedTag' + +import { Wrapper, Item, TagsWrapper } from '../styles/filter' + +export type TProps = { + id: TID + expandMenuId: TID | null + activeMap: Record + options: TTag[] + revert: boolean + onSelect: (expandMenuId: TID, tag: TTag) => void } -const Filter = ({ id, expandMenuId, activeMap, options, onSelect, revert }) => { +const Filter: FC = ({ + id, + expandMenuId = null, + activeMap, + options, + onSelect, + revert, +}) => { return ( {expandMenuId === id && options ? ( - + {options.map((item) => ( - onSelect(expandMenuId, item)} - > - {!revert ? ( - <> - - - {item.title} - - - ) : ( - <> - - {item.title} - - - - )} - + tag={item} + activeMap={activeMap} + expandMenuId={expandMenuId} + revert={revert} + onSelect={onSelect} + /> ))} - + ) : ( - - - {!revert ? ( - <> - - - {activeMap[id] ? activeMap[id].title || '全部' : '全部'} - - - ) : ( - <> - - {activeMap[id] ? activeMap[id].title || '全部' : '全部'} - - - - )} - - + + + )} ) } -Filter.propTypes = { - id: T.string.isRequired, - expandMenuId: T.oneOfType([T.string, T.instanceOf(null)]), - activeMap: T.shape({ - id: T.string, - title: T.string, - }).isRequired, - options: T.arrayOf( - T.shape({ - id: T.string, - title: T.string, - }), - ).isRequired, - revert: T.bool.isRequired, - onSelect: T.func.isRequired, -} - -Filter.defaultProps = { - expandMenuId: null, -} - export default memo(Filter) diff --git a/src/components/FiltersMenu/Header.tsx b/src/components/FiltersMenu/Header.tsx index 464bb0c68..ca7e2cfc1 100644 --- a/src/components/FiltersMenu/Header.tsx +++ b/src/components/FiltersMenu/Header.tsx @@ -2,10 +2,10 @@ import { FC, memo } from 'react' import { ICON } from '@/config' import Tooltip from '@/components/Tooltip' +import { SpaceGrow } from '@/components/Common' import { Wrapper, - Title, OperatorsWrapper, Operator, ResetIcon, @@ -13,15 +13,14 @@ import { } from './styles/header' type TProps = { - title: string showReset: boolean onReset: () => void } -const Header: FC = ({ title, showReset, onReset }) => { +const Header: FC = ({ showReset, onReset }) => { return ( - {title} + 重置筛选条件} @@ -30,6 +29,7 @@ const Header: FC = ({ title, showReset, onReset }) => { > + 重置 diff --git a/src/components/FiltersMenu/helper.ts b/src/components/FiltersMenu/helper.ts new file mode 100644 index 000000000..91341f1e3 --- /dev/null +++ b/src/components/FiltersMenu/helper.ts @@ -0,0 +1,52 @@ +import { keys, isEmpty, filter } from 'ramda' + +import type { TTag } from '@/spec' +import { ICON_CMD } from '@/config' +import { groupByKey } from '@/utils/helper' + +import type { TMenu } from './spec' + +export const tags2Options = (tags: TTag[]): TMenu => { + const groupedTags = groupByKey(tags, 'group') + const formated = [] + + keys(groupedTags).forEach((group, index) => { + formated.push({ + id: index, + title: group, + icon: `${ICON_CMD}/navi/location.svg`, + options: [{ id: '', title: '全部' }, ...groupedTags[group]], + }) + }) + + return formated +} + +export const initActiveMap = (items: TMenu) => { + const menuMap = {} + for (let index = 0; index < items.length; index += 1) { + const element = items[index] + + const content = element.options ? element.options[0] : element + menuMap[element.id] = { ...content } + } + + return menuMap +} + +export const getSelectedTags = (activeMap: Record): TTag[] => { + const tagList = [] + + const selectedIdx = filter( + (key) => !isEmpty(activeMap[key].id), + keys(activeMap), + ) + + selectedIdx.forEach((idx) => { + if (activeMap[idx]) { + tagList.push(activeMap[idx]) + } + }) + + return tagList +} diff --git a/src/components/FiltersMenu/index.tsx b/src/components/FiltersMenu/index.tsx index 9dc55d75e..e6e0e27f9 100755 --- a/src/components/FiltersMenu/index.tsx +++ b/src/components/FiltersMenu/index.tsx @@ -4,10 +4,10 @@ * */ -import { FC, useState, useCallback, memo } from 'react' -import { merge, equals } from 'ramda' +import { FC, useState, useCallback, memo, useEffect } from 'react' +import { merge, isEmpty } from 'ramda' -import type { TFiltersMenuItems } from '@/spec' +import type { TTag } from '@/spec' import { buildLog } from '@/utils/logger' import { SpaceGrow } from '@/components/Common' @@ -16,67 +16,59 @@ import Header from './Header' import Filter from './Filter' import { Wrapper, ItemWrapper, Item, Icon } from './styles' +import { tags2Options, initActiveMap, getSelectedTags } from './helper' + /* eslint-disable-next-line */ const log = buildLog('c:FiltersMenu:index') -const initActiveMap = (items) => { - const menuMap = {} - for (let index = 0; index < items.length; index += 1) { - const element = items[index] - - const content = element.options ? element.options[0] : element - menuMap[element.id] = { ...content } - } - - return menuMap -} - type TProps = { - title?: string - items?: TFiltersMenuItems + tags?: TTag[] activeid?: string | null noFilter?: boolean - onItemClick?: () => void + onSelect?: (tags: TTag[]) => void itemBgHighlight?: boolean revert?: boolean withDivider?: boolean } const FiltersMenu: FC = ({ - title = '', - items, + tags, activeid = null, noFilter = false, - onItemClick = log, + onSelect = log, itemBgHighlight = true, revert = false, withDivider = true, }) => { - // const [expandMenuId, setExpandMenuId] = useState(null) + const items = tags2Options(tags) + const [expandMenuId, setExpandMenuId] = useState(activeid) const [activeMap, setActiveMap] = useState(initActiveMap(items)) + const [selectedTags, setSelectedTags] = useState([]) + + useEffect(() => setSelectedTags(getSelectedTags(activeMap)), [activeMap]) const handleReset = useCallback(() => { setActiveMap(initActiveMap(items)) }, [items]) + const handleExpand = useCallback( + (item) => { + item.id === expandMenuId + ? setExpandMenuId(null) + : setExpandMenuId(item.id) + }, + [expandMenuId], + ) + return ( -
+
{items.map((item, index) => ( { - onItemClick(item) - item.id === expandMenuId - ? setExpandMenuId(null) - : setExpandMenuId(item.id) - }} + onClick={() => handleExpand(item)} > = ({ activeMap={activeMap} options={item.options} revert={revert} - onSelect={(parentId, item) => - setActiveMap(merge(activeMap, { [parentId]: item })) - } + onSelect={(parentId, item) => { + const newActiveMap = merge(activeMap, { [parentId]: item }) + onSelect(getSelectedTags(newActiveMap)) + setActiveMap(newActiveMap) + }} /> )} diff --git a/src/components/FiltersMenu/spec.ts b/src/components/FiltersMenu/spec.ts new file mode 100644 index 000000000..fc436fda7 --- /dev/null +++ b/src/components/FiltersMenu/spec.ts @@ -0,0 +1,8 @@ +import type { TTag } from '@/spec' + +export type TMenu = { + id: string + title: string + icon?: string + options: TTag[] +}[] diff --git a/src/components/FiltersMenu/styles/filter/index.ts b/src/components/FiltersMenu/styles/filter/index.ts index f622f510a..0bf0d9387 100755 --- a/src/components/FiltersMenu/styles/filter/index.ts +++ b/src/components/FiltersMenu/styles/filter/index.ts @@ -1,60 +1,24 @@ import styled from 'styled-components' -import type { TActive } from '@/spec' // import Img from '@/Img' import { theme } from '@/utils/themes' import css from '@/utils/css' -const activeColor = '#009C9E' export const Wrapper = styled.div<{ revert: boolean }>` ${css.flexColumn()}; align-items: ${({ revert }) => (revert ? 'flex-start' : 'flex-end')}; color: ${theme('thread.articleDigest')}; font-size: 14px; - padding: 4px 6px; + padding: 4px; padding-top: 0; ` -type RadioWrapper = { revert?: boolean } -export const RadioWrapper = styled.div` +type TagsWrapper = { revert?: boolean } +export const TagsWrapper = styled.div` ${css.flexColumn()}; align-items: ${({ revert }) => (revert ? 'flex-start' : 'flex-end')}; margin-top: 5px; ` -export const RadioItem = styled.div` - ${css.flex('align-center')}; - margin-bottom: 8px; - margin-right: -1px; - letter-spacing: 3px; - &:hover { - cursor: pointer; - } -` -export const ActiveDot = styled.div` - background: #27908f; - width: 6px; - height: 6px; - border-radius: 50%; - margin-right: 12px; - opacity: 0; - - opacity: ${({ active }) => (active ? 1 : 0)}; - transition: opacity 0.25s; -` -type TRadioTitle = TActive & { revert?: boolean } -export const RadioTitle = styled.div` - font-size: 13px; - color: ${({ active }) => - active ? activeColor : theme('thread.articleDigest')}; - margin-right: ${({ revert }) => (revert ? '6px' : '0')}; - margin-left: ${({ revert }) => (revert ? '1px' : '0')}; - - &:hover { - color: ${({ active }) => - active ? activeColor : theme('thread.articleTitle')}; - } - transition: all 0.25s; -` export const Item = styled.div<{ revert: boolean }>` ${css.flex('align-center')}; justify-content: ${({ revert }) => (revert ? 'flex-start' : 'flex-end')}; diff --git a/src/components/FiltersMenu/styles/filter/tag.ts b/src/components/FiltersMenu/styles/filter/tag.ts new file mode 100644 index 000000000..91ae5f13a --- /dev/null +++ b/src/components/FiltersMenu/styles/filter/tag.ts @@ -0,0 +1,55 @@ +import styled from 'styled-components' + +import type { TActive } from '@/spec' +// import Img from '@/Img' +import { theme } from '@/utils/themes' +import css from '@/utils/css' + +const activeColor = '#009C9E' + +export const Wrapper = styled.div` + ${css.flex('align-center')}; + margin-bottom: 8px; + margin-right: -1px; + letter-spacing: 1px; + &:hover { + cursor: pointer; + } +` +export const Dot = styled.div` + background: ${activeColor}; + width: 6px; + height: 6px; + border-radius: 50%; + margin-right: 12px; + opacity: 0; + + opacity: ${({ active }) => (active ? 1 : 0)}; + transition: opacity 0.25s; +` +export const FoldDot = styled(Dot)` + background: ${({ active }) => + active ? activeColor : theme('thread.articleDigest')}; + width: 6px; + height: 6px; + border-radius: 50%; + margin-right: 12px; + opacity: 1; + transition: opacity 0.25s; +` + +type TTitle = TActive & { revert?: boolean } +export const Title = styled.div` + font-size: 13px; + color: ${({ active }) => + active ? activeColor : theme('thread.articleDigest')}; + margin-right: ${({ revert }) => (revert ? '6px' : '0')}; + margin-left: ${({ revert }) => (revert ? '1px' : '0')}; + + &:hover { + color: ${({ active }) => + active ? activeColor : theme('thread.articleTitle')}; + } + + transition: all 0.25s; +` diff --git a/src/components/FiltersMenu/styles/header.ts b/src/components/FiltersMenu/styles/header.ts index 510bc6db6..3f3bbff33 100644 --- a/src/components/FiltersMenu/styles/header.ts +++ b/src/components/FiltersMenu/styles/header.ts @@ -8,7 +8,7 @@ import css from '@/utils/css' export const Wrapper = styled.div` ${css.flex('align-center', 'justify-between')} width: 100%; - margin-bottom: 8px; + margin-bottom: 4px; ` export const Title = styled.div` position: relative; @@ -32,12 +32,21 @@ export const OperatorsWrapper = styled.div` ${css.flex('align-center')}; ` export const Operator = styled.div` - display: ${({ show }) => (show ? 'block' : 'none')}; + color: ${theme('thread.articleDigest')}; + display: ${({ show }) => (show ? 'flex' : 'none')}; + align-items: center; + font-size: 12px; + opacity: 0.7; + + &:hover { + opacity: 1; + cursor: pointer; + } ` export const ResetIcon = styled(Img)` fill: ${theme('thread.articleDigest')}; ${css.size(14)}; - margin-left: 8px; + margin-right: 6px; &:hover { fill: ${theme('thread.articleTitle')}; diff --git a/src/components/NaviCatalog/Dashboard.tsx b/src/components/NaviCatalog/Dashboard.tsx index 6831862d5..e03178b11 100644 --- a/src/components/NaviCatalog/Dashboard.tsx +++ b/src/components/NaviCatalog/Dashboard.tsx @@ -7,11 +7,10 @@ import { FC, memo } from 'react' import { last } from 'ramda' +import type { TNaviTag } from '@/spec' import { ICON } from '@/config' import { buildLog } from '@/utils/logger' -import type { TMenuItem } from './spec' - // import { SpaceGrow } from '@/components/Common' import { Wrapper, @@ -47,7 +46,7 @@ const getLevels = (paths) => { } type TProps = { - viewPath: TMenuItem[] + viewPath: TNaviTag[] goCatalog: (id?: string) => void } diff --git a/src/components/NaviCatalog/Header.tsx b/src/components/NaviCatalog/Header.tsx index 049c1aeeb..f48d78111 100644 --- a/src/components/NaviCatalog/Header.tsx +++ b/src/components/NaviCatalog/Header.tsx @@ -1,12 +1,11 @@ import { FC, memo } from 'react' +import type { TNaviTag } from '@/spec' import { ICON } from '@/config' import { nilOrEmpty } from '@/utils/validator' import Tooltip from '@/components/Tooltip' -import type { TMenuItem } from './spec' - import { Wrapper, Title, @@ -21,7 +20,7 @@ import { type TProps = { title: string activeCatalogId: string - viewPath: TMenuItem[] + viewPath: TNaviTag[] testid?: string goHome: () => void diff --git a/src/components/NaviCatalog/List/index.tsx b/src/components/NaviCatalog/List/index.tsx index 296f69c28..43a551576 100644 --- a/src/components/NaviCatalog/List/index.tsx +++ b/src/components/NaviCatalog/List/index.tsx @@ -7,10 +7,10 @@ import { FC, memo } from 'react' import { map, prop, includes } from 'ramda' +import type { TNaviTag } from '@/spec' import { buildLog } from '@/utils/logger' import { SpaceGrow, Space } from '@/components/Common' -import type { TMenuItem } from '../spec' import { ROOT_MENU } from '../constant' import { @@ -44,15 +44,15 @@ const renderRightIcon = (item, active, showItemTotal) => { type TProps = { menuMode: 'root' | 'child' - catalogItems: TMenuItem[] + catalogItems: TNaviTag[] activeCatalogId: string - activePath: TMenuItem[] + activePath: TNaviTag[] withDivider: boolean showMoreItem: boolean showItemTotal: boolean testid?: string - onItemSelect: (item: TMenuItem) => void + onItemSelect: (item: TNaviTag) => void onShowMore: () => void } diff --git a/src/components/NaviCatalog/helper.ts b/src/components/NaviCatalog/helper.ts index 8bcb3b976..ff30588f1 100644 --- a/src/components/NaviCatalog/helper.ts +++ b/src/components/NaviCatalog/helper.ts @@ -1,18 +1,26 @@ -import { map, find, propEq, last } from 'ramda' +import { + map, + find, + propEq, + last, + filter, + findIndex, + equals, + clone, +} from 'ramda' +import type { TNaviTag } from '@/spec' import { URL_QUERY } from '@/constant' import { nilOrEmpty } from '@/utils/validator' -import type { TMenuItem } from './spec' - // 根据 path 路径得到当前目录项 export const getCurrentMenuItem = ( - path: TMenuItem[], - items: TMenuItem[], -): TMenuItem => { + path: TNaviTag[], + items: TNaviTag[], +): TNaviTag => { if (nilOrEmpty(path) || nilOrEmpty(items)) return - const item = find(propEq('id', path[0].id), items) as TMenuItem + const item = find(propEq('id', path[0].id), items) as TNaviTag if (item.id === last(path).id) return item return getCurrentMenuItem(path.slice(1), item?.childMenu) @@ -26,9 +34,9 @@ export const getCurrentMenuItem = ( * @returns {array of catalog} */ export const findPath = ( - items: TMenuItem[], + items: TNaviTag[], pathString = 'aa-bb-cc', -): TMenuItem[] => { +): TNaviTag[] => { // pathList => parentId-childId-subChildId-xxx const idPaths = pathString.split('-') @@ -38,7 +46,7 @@ export const findPath = ( const pathId = idPaths[index] const catalog = previousCatalog - const item = find(propEq('id', pathId), catalog) as TMenuItem + const item = find(propEq('id', pathId), catalog) as TNaviTag if (!item) return path if (item.childMenu) { @@ -51,10 +59,72 @@ export const findPath = ( } export const covertPathToURLQuery = ( - path: TMenuItem[], + path: TNaviTag[], ): Record => { const idPathString = map((catalog) => catalog.id, path).join('-') if (nilOrEmpty(idPathString)) return { [URL_QUERY.NAVI_CATALOG_PATH]: '' } return { [URL_QUERY.NAVI_CATALOG_PATH]: idPathString } } + +// convert +const findUpdatePath = (menu: TNaviTag[], extra: string[]): string[] => { + // console.log('findUpdatePath menu: ', menu) + // console.log('findUpdatePath extra: ', extra) + + const rootIndex = findIndex((item) => equals(item.extra, [extra[0]]), menu) + if (rootIndex === -1) return [] + + const updatePath = [] + + const parentMenuPath = extra.slice(0, extra.length - 1) + if (parentMenuPath.length === 1) { + updatePath.push(rootIndex) + } + + if (parentMenuPath.length === 2) { + updatePath.push(rootIndex) + + const index = findIndex( + (item) => equals(item.extra, parentMenuPath), + menu[rootIndex].childMenu, + ) + + updatePath.push(index) + } + + return updatePath +} + +/** + * covert tags data to menu format data + * 目前只支持最多三级目录，因为从产品上来讲没有更深层目录的需要 + * 另一方面，代码上支持无限层级的目录会很抽象，现阶段直白一些也有利于排查 + */ +export const tags2Menu = (tags: TNaviTag[]): TNaviTag[] => { + let menu = [] + menu = clone(filter((item) => item.extra.length === 1, tags)) + + // level-2 + const menu2 = clone(filter((item) => item.extra.length === 2, tags)) + menu2.forEach((item) => { + const pathIndex = findUpdatePath(menu, item.extra) + if (!menu[pathIndex[0]].childMenu) { + menu[pathIndex[0]].childMenu = [] + } + menu[pathIndex[0]].childMenu.push(item) + }) + + // level-3 + const menu3 = clone(filter((item) => item.extra.length === 3, tags)) + menu3.forEach((item) => { + const pathIndex = findUpdatePath(menu, item.extra) + + if (!menu[pathIndex[0]].childMenu[pathIndex[1]].childMenu) { + menu[pathIndex[0]].childMenu[pathIndex[1]].childMenu = [] + } + menu[pathIndex[0]].childMenu[pathIndex[1]].childMenu.push(item) + }) + + return menu +} diff --git a/src/components/NaviCatalog/index.tsx b/src/components/NaviCatalog/index.tsx index 6706d2bcb..6563e43a2 100755 --- a/src/components/NaviCatalog/index.tsx +++ b/src/components/NaviCatalog/index.tsx @@ -8,21 +8,29 @@ import { FC, useState, useCallback, useEffect, memo } from 'react' import { find, findIndex, propEq, last } from 'ramda' import { URL_QUERY } from '@/constant' +import type { TNaviTag } from '@/spec' import { findDeepMatch } from '@/utils/helper' import { buildLog } from '@/utils/logger' import { nilOrEmpty } from '@/utils/validator' import { getQueryFromUrl, markRoute } from '@/utils/route' -import type { TMenuItem, TMenuMode } from './spec' +import type { TMenuMode } from './spec' import { ROOT_MENU, CHILD_MENU } from './constant' + +import Button from '@/components/Buttons/Button' import Header from './Header' import Dashboard from './Dashboard' import List from './List' import { Wrapper } from './styles' -import { getCurrentMenuItem, findPath, covertPathToURLQuery } from './helper' +import { + getCurrentMenuItem, + findPath, + covertPathToURLQuery, + tags2Menu, +} from './helper' /* eslint-disable-next-line */ const log = buildLog('c:NaviCatalog:index') @@ -35,7 +43,7 @@ type TProps = { // 是否显示每个目录项的条目总数 showItemTotal?: boolean testid?: string - items: TMenuItem[] + tags: TNaviTag[] onSelect?: (id: string, type: string) => void onShowMore?: () => void @@ -44,7 +52,7 @@ type TProps = { const NaviCatalog: FC = ({ testid = 'navi-menu', title = '', - items, + tags, onSelect = log, withDivider = false, // initActiveMenuId = '', @@ -52,9 +60,13 @@ const NaviCatalog: FC = ({ showItemTotal = false, onShowMore = null, }) => { + // console.log('the tags: ', tags) + const items = tags2Menu(tags) + // console.log('the fucking items: ', items) + const [menuMode, setMenuMode] = useState(ROOT_MENU) // 当前选中的目录 id, 不包括在其链路上的 id - const [activeCatalogId, setActiveCatalogId] = useState('') + const [activeCatalogId, setActiveCatalogId] = useState('') // 当前展示的 path list, 可能是选中的，也可能是仅浏览，未必选中 const [viewPath, setViewPath] = useState([]) // 当前选中状态的 path list 快照 @@ -86,7 +98,8 @@ const NaviCatalog: FC = ({ setCatalogItems(menuItem?.childMenu || items) } } - }, [items]) + // }, [items]) + }, []) // TODO: use raw instead // reset select states const handleReset = useCallback(() => { @@ -142,6 +155,8 @@ const NaviCatalog: FC = ({ const handleMenuItemSelect = useCallback( (item) => { + console.log('handleMenuItemSelect item: ', item) + // 如果重复点击，则忽略 if (find(propEq('id', item.id), viewPath)) return @@ -181,6 +196,16 @@ const NaviCatalog: FC = ({ onReset={handleReset} viewPath={viewPath} /> + = ({ type }) => { active={mainPath === ROUTE.COOL_GUIDE} testid={`header-${ROUTE.COOL_GUIDE}`} > - 酷导游 + 酷导航 diff --git a/src/components/Navigator/MorePanel/MobileView.tsx b/src/components/Navigator/MorePanel/MobileView.tsx index e80930834..0b09ce2ed 100644 --- a/src/components/Navigator/MorePanel/MobileView.tsx +++ b/src/components/Navigator/MorePanel/MobileView.tsx @@ -25,7 +25,7 @@ const items = [ }, { icon: `${ICON}/route/cool-guide.svg`, - title: '酷导游', + title: '酷导航', desc: '发现有意思的东西', href: `/${ROUTE.DISCOVERY}`, raw: 12, diff --git a/src/components/SupportUs/index.tsx b/src/components/SupportUs/index.tsx index 7cbe46ac2..d060595d0 100755 --- a/src/components/SupportUs/index.tsx +++ b/src/components/SupportUs/index.tsx @@ -97,14 +97,15 @@ const SupportUS: FC = ({ metric = METRIC.SUPPORT_US }) => { {/* eslint-disable-next-line */} - 编写一个功能完善的现代社区需要开发者保持长期的专注和付出，论坛的持续打磨和维护，更需要团队投入海量的精力，矛盾的是，现阶段因为缺乏流量等各种资源，难以通过自身造血实现正向循环。你的支持将有助于我们保持独立，在论坛的开发和运营上倾注更多时间。 + 编写一个功能完善 & {/* eslint-disable-next-line */} + 体验良好的现代社区需要开发者保持长期的专注和付出，论坛的持续打磨和维护，更需要团队投入海量的精力，矛盾的是，现阶段因为缺乏流量等各种资源，难以通过自身造血实现正向循环。你的支持将有助于我们保持独立，在论坛的开发和运营上倾注更多时间。 -
+

- 开源项目的健康发展无法仅靠情怀支撑，所受钱款将全部用于支付本站所使用的基础设施、第三方服务、资源以及开发人员生计等产生的必要费用，确保社区稳定、可持续，谢谢理解。 + 开源项目的健康发展无法仅靠情怀支撑，所受钱款将全部用于支付本项目所使用的基础设施、第三方服务、资源以及开发人员生计等产生的必要费用，确保社区稳定、可持续，谢谢理解。
diff --git a/src/containers/content/CoolGuideContent/FilterBar.tsx b/src/containers/content/CoolGuideContent/FilterBar.tsx index 9ee98f27f..c9a1a2d6e 100644 --- a/src/containers/content/CoolGuideContent/FilterBar.tsx +++ b/src/containers/content/CoolGuideContent/FilterBar.tsx @@ -1,7 +1,7 @@ import { FC, Fragment, memo } from 'react' import { ICON_CMD } from '@/config' -import { mockNaviCatalogMenu } from '@/utils/mock' +import { mockNaviCatalogTags } from '@/utils/mock' import Sticky from '@/components/Sticky' import NaviIntro from '@/components/NaviIntro' @@ -13,7 +13,7 @@ import { TopFilter, Option, OptionItem, - FavoriteIcon, + // FavoriteIcon, ClockIcon, } from './styles/filter_bar' @@ -29,14 +29,14 @@ const FilterBar: FC = ({ topFilter, menuOnSelect }) => { {topFilter !== 'all' && ( )} - + */}