refactor:comment (#6238)

* refactor:comment

* fix inheritAttrs: false & attrs.class

Author: shifeng1993

components/comment/index.tsx

@@ -5,6 +5,10 @@ import { flattenChildren } from '../_util/props-util';
 import type { VueNode } from '../_util/type';
 import { withInstall } from '../_util/type';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
+
+// CSSINJS
+import useStyle from './style';
+
 export const commentProps = () => ({
   actions: Array,
   /** The element to display as the comment author. */
@@ -24,10 +28,15 @@ export type CommentProps = Partial<ExtractPropTypes<ReturnType<typeof commentPro
 const Comment = defineComponent({
   compatConfig: { MODE: 3 },
   name: 'AComment',
+  inheritAttrs: false,
   props: commentProps(),
   slots: ['actions', 'author', 'avatar', 'content', 'datetime'],
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const { prefixCls, direction } = useConfigInject('comment', props);
+
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const renderNested = (prefixCls: string, children: VueNode) => {
       return <div class={`${prefixCls}-nested`}>{children}</div>;
     };
@@ -79,18 +88,21 @@ const Comment = defineComponent({
         </div>
       );
       const children = flattenChildren(slots.default?.());
-      return (
+      return wrapSSR(
         <div
+          {...attrs}
           class={[
             pre,
             {
               [`${pre}-rtl`]: direction.value === 'rtl',
             },
+            attrs.class,
+            hashId.value,
           ]}
         >
           {comment}
           {children && children.length ? renderNested(pre, children) : null}
-        </div>
+        </div>,
       );
     };
   },

components/comment/style/index.less

@@ -1,2 +1,161 @@
-import '../../style/index.less';
-import './index.less';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+
+export interface ComponentToken {}
+
+type CommentToken = FullToken<'Comment'> & {
+  commentBg: string;
+  commentPaddingBase: string;
+  commentNestIndent: string;
+  commentFontSizeBase: number;
+  commentFontSizeSm: number;
+  commentAuthorNameColor: string;
+  commentAuthorTimeColor: string;
+  commentActionColor: string;
+  commentActionHoverColor: string;
+  commentActionsMarginBottom: string;
+  commentActionsMarginTop: number;
+  commentContentDetailPMarginBottom: string;
+};
+
+const genBaseStyle: GenerateStyle<CommentToken> = token => {
+  const {
+    componentCls,
+    commentBg,
+    commentPaddingBase,
+    commentNestIndent,
+    commentFontSizeBase,
+    commentFontSizeSm,
+    commentAuthorNameColor,
+    commentAuthorTimeColor,
+    commentActionColor,
+    commentActionHoverColor,
+    commentActionsMarginBottom,
+    commentActionsMarginTop,
+    commentContentDetailPMarginBottom,
+  } = token;
+
+  return {
+    [componentCls]: {
+      position: 'relative',
+      backgroundColor: commentBg,
+
+      [`${componentCls}-inner`]: {
+        display: 'flex',
+        padding: commentPaddingBase,
+      },
+
+      [`${componentCls}-avatar`]: {
+        position: 'relative',
+        flexShrink: 0,
+        marginRight: token.marginSM,
+        cursor: 'pointer',
+
+        [`img`]: {
+          width: '32px',
+          height: '32px',
+          borderRadius: '50%',
+        },
+      },
+
+      [`${componentCls}-content`]: {
+        position: 'relative',
+        flex: `1 1 auto`,
+        minWidth: `1px`,
+        fontSize: commentFontSizeBase,
+        wordWrap: 'break-word',
+
+        [`&-author`]: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          justifyContent: 'flex-start',
+          marginBottom: token.marginXXS,
+          fontSize: commentFontSizeBase,
+
+          [`& > a,& > span`]: {
+            paddingRight: token.paddingXS,
+            fontSize: commentFontSizeSm,
+            lineHeight: `18px`,
+          },
+
+          [`&-name`]: {
+            color: commentAuthorNameColor,
+            fontSize: commentFontSizeBase,
+            transition: `color ${token.motionDurationSlow}`,
+
+            [`> *`]: {
+              color: commentAuthorNameColor,
+
+              [`&:hover`]: {
+                color: commentAuthorNameColor,
+              },
+            },
+          },
+
+          [`&-time`]: {
+            color: commentAuthorTimeColor,
+            whiteSpace: 'nowrap',
+            cursor: 'auto',
+          },
+        },
+
+        [`&-detail p`]: {
+          marginBottom: commentContentDetailPMarginBottom,
+          whiteSpace: 'pre-wrap',
+        },
+      },
+
+      [`${componentCls}-actions`]: {
+        marginTop: commentActionsMarginTop,
+        marginBottom: commentActionsMarginBottom,
+        paddingLeft: 0,
+
+        [`> li`]: {
+          display: 'inline-block',
+          color: commentActionColor,
+
+          [`> span`]: {
+            marginRight: '10px',
+            color: commentActionColor,
+            fontSize: commentFontSizeSm,
+            cursor: 'pointer',
+            transition: `color ${token.motionDurationSlow}`,
+            userSelect: 'none',
+
+            [`&:hover`]: {
+              color: commentActionHoverColor,
+            },
+          },
+        },
+      },
+
+      [`${componentCls}-nested`]: {
+        marginLeft: commentNestIndent,
+      },
+
+      '&-rtl': {
+        direction: 'rtl',
+      },
+    },
+  };
+};
+
+export default genComponentStyleHook('Comment', token => {
+  console.log(token);
+  const commentToken = mergeToken<CommentToken>(token, {
+    commentBg: 'inherit',
+    commentPaddingBase: `${token.paddingMD}px 0`,
+    commentNestIndent: `44px`,
+    commentFontSizeBase: token.fontSize,
+    commentFontSizeSm: token.fontSizeSM,
+    commentAuthorNameColor: token.colorTextTertiary,
+    commentAuthorTimeColor: token.colorTextPlaceholder,
+    commentActionColor: token.colorTextTertiary,
+    commentActionHoverColor: token.colorTextSecondary,
+    commentActionsMarginBottom: 'inherit',
+    commentActionsMarginTop: token.marginSM,
+    commentContentDetailPMarginBottom: 'inherit',
+  });
+
+  return [genBaseStyle(commentToken)];
+});

components/comment/style/index.tsx

@@ -50,7 +50,7 @@ import './list/style';
 import './tree-select/style';
 import './drawer/style';
 // import './skeleton/style';
-import './comment/style';
+// import './comment/style';
 // import './config-provider/style';
 import './empty/style';
 import './statistic/style';

components/comment/style/rtl.less

@@ -64,6 +64,7 @@ export interface ComponentTokenMap {
   //   Cascader?: CascaderComponentToken;
   //   Checkbox?: CheckboxComponentToken;
   //   Collapse?: CollapseComponentToken;
+  Comment?: {};
   //   DatePicker?: DatePickerComponentToken;
   Descriptions?: {};
   Divider?: DividerComponentToken;