diff --git a/public/icons/static/shape/warning.svg b/public/icons/static/shape/warning.svg
new file mode 100644
index 000000000..f14e84d77
--- /dev/null
+++ b/public/icons/static/shape/warning.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618993530405" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9813" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 981.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z m0-170.666666a85.333333 85.333333 0 1 0 0-170.666667 85.333333 85.333333 0 0 0 0 170.666667z m0-597.333334a64 64 0 0 0-64 64v256a64 64 0 0 0 128 0v-256A64 64 0 0 0 512 213.333333z" p-id="9814"></path></svg>
\ No newline at end of file
diff --git a/src/components/NoticeBar/Icon.tsx b/src/components/NoticeBar/Icon.tsx
new file mode 100644
index 000000000..fc0cfe5c9
--- /dev/null
+++ b/src/components/NoticeBar/Icon.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { ICON } from '@/config'
+import { LockIcon, NoticeIcon } from './styles/icon'
+
+type TProps = {
+  type?: 'lock' | 'notice' | 'bot'
+}
+
+const Icon: React.FC<TProps> = ({ type = 'notice' }) => {
+  switch (type) {
+    case 'lock': {
+      return <LockIcon src={`${ICON}/shape/lock.svg`} />
+    }
+    default: {
+      return <NoticeIcon src={`${ICON}/shape/warning.svg`} />
+    }
+  }
+}
+
+export default React.memo(Icon)
diff --git a/src/components/NoticeBar/index.tsx b/src/components/NoticeBar/index.tsx
new file mode 100755
index 000000000..b0a4c2428
--- /dev/null
+++ b/src/components/NoticeBar/index.tsx
@@ -0,0 +1,58 @@
+/*
+ *
+ * NoticeBar
+ *
+ */
+
+import React from 'react'
+
+import TimeAgo from 'timeago-react'
+
+import { buildLog } from '@/utils'
+import { ICON } from '@/config'
+
+import Icon from './Icon'
+
+import { Wrapper, Main, UserName, AuthorTag, Timestamp, Why } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:NoticeBar:index')
+
+type TProps = {
+  testid?: string
+  type?: 'lock' | 'notice' | 'bot'
+  user?: {
+    nickname: string
+  } | null
+  isArticleAuthor?: boolean
+  content: string
+  timestamp?: string | null
+}
+
+const NoticeBar: React.FC<TProps> = ({
+  testid = 'notice-bar',
+  type = 'notice',
+  user = null,
+  isArticleAuthor = false,
+  content,
+  timestamp = null,
+}) => {
+  return (
+    <Wrapper testid={testid}>
+      <Icon type={type} />
+      <Main>
+        {user && <UserName>{user.nickname}</UserName>}
+        {isArticleAuthor && <AuthorTag>(作者)</AuthorTag>}
+        {content}
+      </Main>
+      {timestamp && (
+        <Timestamp>
+          <TimeAgo datetime={timestamp} locale="zh_CN" />
+        </Timestamp>
+      )}
+      <Why src={`${ICON}/shape/question.svg`} />
+    </Wrapper>
+  )
+}
+
+export default React.memo(NoticeBar)
diff --git a/src/components/NoticeBar/styles/icon.ts b/src/components/NoticeBar/styles/icon.ts
new file mode 100644
index 000000000..288bb7af9
--- /dev/null
+++ b/src/components/NoticeBar/styles/icon.ts
@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+// import type { TTestable } from '@/spec'
+import Img from '@/Img'
+import { css, theme } from '@/utils'
+
+const Icon = styled(Img)`
+  fill: #a57a32; // ${theme('thread.articleTitle')};
+  ${css.size(15)};
+  margin-right: 12px;
+`
+export const LockIcon = styled(Icon)`
+  fill: #a57a32; // ${theme('thread.articleTitle')};
+`
+export const NoticeIcon = styled(Icon)`
+  fill: #a57a32; // ${theme('thread.articleTitle')};
+`
diff --git a/src/components/NoticeBar/styles/index.ts b/src/components/NoticeBar/styles/index.ts
new file mode 100755
index 000000000..e246d2a44
--- /dev/null
+++ b/src/components/NoticeBar/styles/index.ts
@@ -0,0 +1,47 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+
+import Img from '@/Img'
+import { css, theme } from '@/utils'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  ${css.flex('align-center')};
+  color: ${theme('thread.articleTitle')};
+  padding-left: 12px;
+  padding-right: 15px;
+  width: 100%;
+  height: 40px;
+  background: #00333f;
+  border-radius: 8px;
+`
+export const Main = styled.div`
+  flex-grow: 1;
+  font-size: 14px;
+`
+export const UserName = styled.span`
+  color: ${theme('thread.articleTitle')};
+  margin-right: 5px;
+`
+export const AuthorTag = styled.span`
+  color: ${theme('thread.articleDigest')};
+  margin-left: 2px;
+  margin-right: 5px;
+`
+export const Timestamp = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 12px;
+`
+export const Why = styled(Img)`
+  ${css.size(15)};
+  fill: ${theme('thread.articleDigest')};
+  margin-left: 10px;
+  margin-top: -1px;
+
+  &:hover {
+    fill: ${theme('thread.articleTitle')};
+    cursor: pointer;
+  }
+`
diff --git a/src/components/NoticeBar/tests/index.test.ts b/src/components/NoticeBar/tests/index.test.ts
new file mode 100755
index 000000000..9fba0c41a
--- /dev/null
+++ b/src/components/NoticeBar/tests/index.test.ts
@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import NoticeBar from '../index'
+
+describe('TODO <NoticeBar />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})
diff --git a/src/containers/unit/Comments/index.tsx b/src/containers/unit/Comments/index.tsx
index aeb1be4a6..b948d6b40 100755
--- a/src/containers/unit/Comments/index.tsx
+++ b/src/containers/unit/Comments/index.tsx
@@ -7,7 +7,9 @@
 import React from 'react'
 
 import { pluggedIn, buildLog } from '@/utils'
+
 import Modal from '@/components/Modal'
+import NoticeBar from '@/components/NoticeBar'
 
 import CommentEditor from './CommentEditor'
 import List from './List'
@@ -75,6 +77,15 @@ const CommentsContainer: React.FC<TProps> = ({
         />
       )}
 
+      <br />
+      <NoticeBar
+        type="lock"
+        content="关闭了评论: 已解决"
+        timestamp={new Date().toLocaleDateString()}
+        user={{ nickname: 'mydearxym' }}
+        isArticleAuthor
+      />
+
       <List
         accountInfo={accountInfo}
         pagedComments={pagedCommentsData}