diff --git a/server/routes.js b/server/routes.js
index 5d065baf5..cd6c57b4e 100644
--- a/server/routes.js
+++ b/server/routes.js
@@ -119,6 +119,11 @@ router.route('/discovery/:category').get((req, res) => {
return renderAndCache({ req, res, path: '/discovery' })
})
+// 帮助中心
+router.route('/:community/help-center').get((req, res) => {
+ return renderAndCache({ req, res, path: '/help-center' })
+})
+
// 社区主页
router.route('/:community/:thread').get((req, res) => {
if (
diff --git a/size-limit.config.json b/size-limit.config.json
index 6ad01d795..4f4fa9bbe 100644
--- a/size-limit.config.json
+++ b/size-limit.config.json
@@ -51,6 +51,10 @@
{
"path": ".next/server/pages/create/article.js",
"maxSize": "280 kB"
+ },
+ {
+ "path": ".next/server/pages/help-center.js",
+ "maxSize": "280 kB"
}
],
"ci": {
diff --git a/src/components/CollapseMenu/Group.js b/src/components/CollapseMenu/Group.js
new file mode 100644
index 000000000..f8c56aa8f
--- /dev/null
+++ b/src/components/CollapseMenu/Group.js
@@ -0,0 +1,139 @@
+import React, { useState, useRef, useEffect } from 'react'
+import T from 'prop-types'
+
+import { findIndex } from 'ramda'
+
+import { ICON } from '@/config'
+import { buildLog } from '@/utils'
+
+import Item from './Item'
+
+import {
+ Wrapper,
+ TagsWrapper,
+ Header,
+ ArrowIcon,
+ Title,
+ Content,
+ SubToggle,
+ SubToggleTitle,
+ SubTogglePrefixIcon,
+} from './styles/group'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:CollapseMenu:Group')
+
+const Group = ({
+ title,
+ groupItems,
+ items,
+ activeItem,
+ onSelect,
+ maxDisplayCount,
+ totalToggleThrold,
+}) => {
+ // 决定是否显示 '展示更多' 的时候参考标签总数
+ const needSubToggle =
+ items?.length > totalToggleThrold && groupItems.length > maxDisplayCount
+
+ const initDisplayCount = needSubToggle ? maxDisplayCount : groupItems.length
+
+ const [isFolderOpen, toggleFolder] = useState(true)
+ const [curDisplayCount, setCurDisplayCount] = useState(initDisplayCount)
+
+ const sortedItems = groupItems // sortByColor(groupItems)
+
+ const isActiveTagInFolder =
+ findIndex((item) => item.id === activeItem.id, groupItems) >= 0
+
+ const subToggleRef = useRef(null)
+ // 当选中的 Tag 被折叠在展示更多里面时，将其展开
+ useEffect(() => {
+ if (subToggleRef && isActiveTagInFolder) {
+ setCurDisplayCount(groupItems.length)
+ }
+ }, [subToggleRef, isActiveTagInFolder, groupItems])
+
+ return (
+
+ {
+ toggleFolder(!isFolderOpen)
+
+ // 当关闭 Folder 的时候，如果当前 Folder 没有被激活的 Tag, 那么就回到折叠状态
+ // 如果有，那么保持原来的状态
+ if (isFolderOpen && !isActiveTagInFolder) {
+ setCurDisplayCount(maxDisplayCount)
+ }
+ }}
+ >
+
+ {title}
+
+
+
+
+ {sortedItems.slice(0, curDisplayCount).map((item) => (
+