fix: add preivew model to question list page

apache · Dec 23, 2024 · f4de984 · f4de984
1 parent 0d4b178
commit f4de984
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 13 deletions.
diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml
@@ -1500,6 +1500,9 @@ ui:
     deleted: Deleted
     pending: Pending
     more: More
+    view: View
+    card: Card
+    compact: Compact
   search:
     title: Search Results
     keywords: Keywords

diff --git a/i18n/zh_CN.yaml b/i18n/zh_CN.yaml
@@ -1467,6 +1467,9 @@ ui:
     deleted: 已删除
     pending: 等待处理
     more: 更多
+    view: 视图
+    card: 卡片模式
+    compact: 简洁模式
   search:
     title: 搜索结果
     keywords: 关键词

diff --git a/ui/src/common/constants.ts b/ui/src/common/constants.ts
@@ -30,6 +30,7 @@ export const DRAFT_TIMESIGH_STORAGE_KEY = '|_a_t_s_|';
 export const DEFAULT_THEME = 'system';
 export const ADMIN_PRIVILEGE_CUSTOM_LEVEL = 99;
 export const SKELETON_SHOW_TIME = 1000;
+export const LIST_VIEW_STORAGE_KEY = '_a_list_view_';
 
 export const USER_AGENT_NAMES = {
   SegmentFault: 'SegmentFault',

diff --git a/ui/src/components/QueryGroup/index.tsx b/ui/src/components/QueryGroup/index.tsx
@@ -133,7 +133,7 @@ const Index: FC<Props> = ({
       <DropdownButton
         size="sm"
         variant="outline-secondary"
-        className="md-hide"
+        className={classNames('md-hide', wrapClassName)}
         title={t(currentSort)}>
         {data.map((btn) => {
           const key = typeof btn === 'string' ? btn : btn.sort;

diff --git a/ui/src/components/QuestionList/index.tsx b/ui/src/components/QuestionList/index.tsx
@@ -17,8 +17,8 @@
  * under the License.
  */
 
-import { FC } from 'react';
-import { ListGroup } from 'react-bootstrap';
+import { FC, useEffect, useState } from 'react';
+import { ListGroup, Dropdown } from 'react-bootstrap';
 import { NavLink, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -33,9 +33,12 @@ import {
   QuestionListLoader,
   Counts,
   PinList,
+  Icon,
 } from '@/components';
 import * as Type from '@/common/interface';
 import { useSkeletonControl } from '@/hooks';
+import Storage from '@/utils/storage';
+import { LIST_VIEW_STORAGE_KEY } from '@/common/constants';
 
 export const QUESTION_ORDER_KEYS: Type.QuestionOrderBy[] = [
   'newest',
@@ -77,6 +80,19 @@ const QuestionList: FC<Props> = ({
     (v) => pinData.findIndex((p) => p.id === v.id) === -1,
   );
 
+  const [viewType, setViewType] = useState('card');
+
+  // 切换列表预览模式
+  const handleViewMode = (key) => {
+    Storage.set(LIST_VIEW_STORAGE_KEY, key);
+    setViewType(key);
+  };
+
+  useEffect(() => {
+    const type = Storage.get(LIST_VIEW_STORAGE_KEY) || 'card';
+    setViewType(type);
+  }, []);
+
   return (
     <div>
       <div className="mb-3 d-flex flex-wrap justify-content-between">
@@ -85,13 +101,33 @@ const QuestionList: FC<Props> = ({
             ? t('all_questions')
             : t('x_questions', { count })}
         </h5>
-        <QueryGroup
-          data={orderKeys}
-          currentSort={curOrder}
-          pathname={source === 'questions' ? '/questions' : ''}
-          i18nKeyPrefix="question"
-          maxBtnCount={source === 'tag' ? 3 : 4}
-        />
+        <div className="d-flex flex-wrap">
+          <QueryGroup
+            data={orderKeys}
+            currentSort={curOrder}
+            pathname={source === 'questions' ? '/questions' : ''}
+            i18nKeyPrefix="question"
+            maxBtnCount={source === 'tag' ? 3 : 4}
+            wrapClassName="me-2"
+          />
+          <Dropdown align="end" onSelect={handleViewMode}>
+            <Dropdown.Toggle variant="outline-secondary" size="sm">
+              <Icon name="list" />
+            </Dropdown.Toggle>
+
+            <Dropdown.Menu>
+              <Dropdown.Header>
+                {t('view', { keyPrefix: 'btns' })}
+              </Dropdown.Header>
+              <Dropdown.Item eventKey="card" active={viewType === 'card'}>
+                {t('view', { keyPrefix: 'card' })}
+              </Dropdown.Item>
+              <Dropdown.Item eventKey="compact" active={viewType === 'compact'}>
+                {t('view', { keyPrefix: 'compact' })}
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </div>
       </div>
       <ListGroup className="rounded-0">
         {isSkeletonShow ? (
@@ -131,9 +167,11 @@ const QuestionList: FC<Props> = ({
                       {li.status === 2 ? ` [${t('closed')}]` : ''}
                     </NavLink>
                   </h5>
-                  <p className="mb-2 small text-body text-truncate-2">
-                    {li.description}
-                  </p>
+                  {viewType === 'card' && (
+                    <p className="mb-2 small text-body text-truncate-2">
+                      {li.description}
+                    </p>
+                  )}
 
                   <div className="question-tags mb-12">
                     {Array.isArray(li.tags)