feat(article): add featured field

surmon-china · Oct 8, 2023 · ca035ae · ca035ae
1 parent a010510
commit ca035ae
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 13 deletions.
diff --git a/src/constants/article/index.ts b/src/constants/article/index.ts
@@ -29,6 +29,7 @@ export interface Article {
   public: ArticlePublic
   state: PublishState
   lang: ArticleLanguage
+  featured: boolean
   disabled_comments: boolean
   meta?: {
     likes: number

diff --git a/src/pages/Article/Editor/State.tsx b/src/pages/Article/Editor/State.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Form, Select, Divider, Space, Radio, FormInstance } from 'antd'
+import { Button, Form, Select, Divider, Space, Switch, FormInstance } from 'antd'
 import * as Icon from '@ant-design/icons'
 import { publishStates } from '@/constants/publish'
 import { articleOrigins } from '@/constants/article/origin'
@@ -90,15 +90,23 @@ export const StateForm: React.FC<StateFormProps> = (props) => {
           })}
         />
       </Form.Item>
-      <Form.Item required={true} name="disabled_comments" label="文章评论" rules={[requiredRule]}>
-        <Radio.Group style={{ width: '100%' }}>
-          <Radio.Button value={false} style={{ width: '50%', whiteSpace: 'nowrap' }}>
-            <Icon.CheckCircleOutlined /> 允许
-          </Radio.Button>
-          <Radio.Button value={true} style={{ width: '50%', whiteSpace: 'nowrap' }}>
-            <Icon.StopOutlined /> 禁止
-          </Radio.Button>
-        </Radio.Group>
+      <Form.Item
+        required={true}
+        name="featured"
+        label="精选文章"
+        rules={[requiredRule]}
+        valuePropName="checked"
+      >
+        <Switch checkedChildren="是" unCheckedChildren="否" style={{ width: 50 }} />
+      </Form.Item>
+      <Form.Item
+        required={true}
+        name="disabled_comments"
+        label="禁止评论"
+        rules={[requiredRule]}
+        valuePropName="checked"
+      >
+        <Switch checkedChildren="是" unCheckedChildren="否" style={{ width: 50 }} />
       </Form.Item>
       <Divider />
       <Button

diff --git a/src/pages/Article/Editor/index.tsx b/src/pages/Article/Editor/index.tsx
@@ -42,6 +42,7 @@ const DEFAULT_ARTICLE: Article = Object.freeze({
   state: PublishState.Published,
   public: ArticlePublic.Public,
   lang: ArticleLanguage.Chinese,
+  featured: false,
   disabled_comments: false,
   tags: [],
   categories: [],

diff --git a/src/pages/Article/List/index.tsx b/src/pages/Article/List/index.tsx
@@ -43,6 +43,7 @@ const DEFAULT_FILTER_PARAMS = Object.freeze({
   sort: SortTypeWithHot.Desc,
   tag_slug: SELECT_ALL_VALUE as SelectAllType | string,
   category_slug: SELECT_ALL_VALUE as SelectAllType | string,
+  featured: SELECT_ALL_VALUE as SelectAllType | boolean,
   lang: SELECT_ALL_VALUE as SelectAllType | ArticleLanguage,
   public: SELECT_ALL_VALUE as SelectAllType | ArticlePublic,
   origin: SELECT_ALL_VALUE as SelectAllType | ArticleOrigin,
@@ -163,6 +164,15 @@ export const ArticleList: React.FC = () => {
       <Space className={styles.toolbar} align="center" wrap>
         <Space direction="vertical">
           <Space wrap>
+            <Button
+              type={filterParams.featured === true ? 'primary' : 'default'}
+              icon={filterParams.featured === true ? <Icon.StarFilled /> : <Icon.StarOutlined />}
+              onClick={() => {
+                filterParams.featured = filterParams.featured === true ? SELECT_ALL_VALUE : true
+              }}
+            >
+              精选文章
+            </Button>
             <Select
               className={styles.select}
               loading={loading.state.value}

diff --git a/src/pages/Article/List/style.module.less b/src/pages/Article/List/style.module.less
@@ -9,14 +9,14 @@
     .select {
       width: 120px;
     }
+    .categoriesSelect {
+      width: 136px;
+    }
     .tagSelect {
       width: 160px;
     }
     .search {
       width: 280px;
     }
-    .categoriesSelect {
-      width: 230px;
-    }
   }
 }