From 6b95d756e490bc1356bdb6b126c92d6ff0a4a9d9 Mon Sep 17 00:00:00 2001
From: lishiyao <lishiyao@dgg.net>
Date: Thu, 25 Nov 2021 14:30:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=8F=AA=E6=8F=90=E4=BA=A4comment?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/comment/__tests__/comment.spec.ts   |  8 +++
 packages/devui-vue/devui/comment/index.ts     | 17 ++++++
 .../devui/comment/src/comment-types.ts        | 24 ++++++++
 .../devui-vue/devui/comment/src/comment.scss  | 30 ++++++++++
 .../devui-vue/devui/comment/src/comment.tsx   | 56 +++++++++++++++++++
 .../devui-vue/devui/comment/src/getSlot.ts    |  0
 6 files changed, 135 insertions(+)
 create mode 100644 packages/devui-vue/devui/comment/__tests__/comment.spec.ts
 create mode 100644 packages/devui-vue/devui/comment/index.ts
 create mode 100644 packages/devui-vue/devui/comment/src/comment-types.ts
 create mode 100644 packages/devui-vue/devui/comment/src/comment.scss
 create mode 100644 packages/devui-vue/devui/comment/src/comment.tsx
 create mode 100644 packages/devui-vue/devui/comment/src/getSlot.ts

diff --git a/packages/devui-vue/devui/comment/__tests__/comment.spec.ts b/packages/devui-vue/devui/comment/__tests__/comment.spec.ts
new file mode 100644
index 00000000..1d2277d4
--- /dev/null
+++ b/packages/devui-vue/devui/comment/__tests__/comment.spec.ts
@@ -0,0 +1,8 @@
+import { mount } from '@vue/test-utils';
+import { Comment } from '../index';
+
+describe('comment test', () => {
+  it('comment init render', async () => {
+    // todo
+  })
+})
diff --git a/packages/devui-vue/devui/comment/index.ts b/packages/devui-vue/devui/comment/index.ts
new file mode 100644
index 00000000..a7d19182
--- /dev/null
+++ b/packages/devui-vue/devui/comment/index.ts
@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+import Comment from './src/comment'
+
+Comment.install = function(app: App): void {
+  app.component(Comment.name, Comment)
+}
+
+export { Comment }
+
+export default {
+  title: 'Comment 评论',
+  category: '数据展示',
+  status: '50%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  install(app: App): void {
+        app.use(Comment as any)
+  }
+}
diff --git a/packages/devui-vue/devui/comment/src/comment-types.ts b/packages/devui-vue/devui/comment/src/comment-types.ts
new file mode 100644
index 00000000..520f1e16
--- /dev/null
+++ b/packages/devui-vue/devui/comment/src/comment-types.ts
@@ -0,0 +1,24 @@
+import type { PropType, ExtractPropTypes } from 'vue'
+
+export const commentProps = {
+  actions: {
+
+  }, 
+  author: {
+
+  },
+  avatar: {},
+
+  content: {
+
+  } ,
+  prefixCls: {
+
+  },
+  datetime: {
+    
+  }
+
+} as const
+
+export type CommentProps = ExtractPropTypes<typeof commentProps>
diff --git a/packages/devui-vue/devui/comment/src/comment.scss b/packages/devui-vue/devui/comment/src/comment.scss
new file mode 100644
index 00000000..5fa8c85f
--- /dev/null
+++ b/packages/devui-vue/devui/comment/src/comment.scss
@@ -0,0 +1,30 @@
+@import '../../styles-var/devui-var.scss';
+.devui-comment {
+  display: flex;
+  align-items: flex-start;
+  &-avatar{
+    margin: 0 16px 0 0;
+  }
+  &-right{
+    
+  }
+  &-head{
+    display: flex;
+    align-items: center;
+  }
+  &-author{
+    padding: 0 8px 0 0;
+    font-size: $devui-font-size;
+    color: $devui-text-weak;
+  }
+  &-datetime{
+    font-size: $devui-font-size;
+    color: $devui-aide-text;
+  }
+  &-content{
+    font-size: $devui-text;
+  }
+  &-actions{
+    margin: 12px 0 0;
+  }
+}
diff --git a/packages/devui-vue/devui/comment/src/comment.tsx b/packages/devui-vue/devui/comment/src/comment.tsx
new file mode 100644
index 00000000..0c6e8d0c
--- /dev/null
+++ b/packages/devui-vue/devui/comment/src/comment.tsx
@@ -0,0 +1,56 @@
+import { defineComponent } from 'vue'
+import { commentProps, CommentProps } from './comment-types'
+import './comment.scss'
+
+export default defineComponent({
+  name: 'DComment',
+  props: commentProps,
+  emits: [],
+  slots: ['actions', 'author', 'avatar', 'content', 'datetime'],
+  setup(props, { slots }) {
+    return () => {
+      const getSlots = function (className: string) {
+        return (
+          <div class={`devui-comment-${className}-nested`}>
+            {slots[className]?.()}
+          </div>
+        )
+      }
+      const setSlot = function (vnode: any) {
+        let vnodeEnum = Object.keys(vnode)
+        vnodeEnum.forEach((item: any) => {
+          getSlots(item)
+        })
+      }
+      const actions = props.actions ?? slots.actions?.();
+      const author = props.author ?? slots.author?.();
+      const avatar = props.avatar ?? slots.avatar?.();
+      const content = props.content ?? slots.content?.();
+      const datetime = props.datetime ?? slots.datetime?.();
+
+      return (
+        <div class="devui-comment">
+          <div class="devui-comment-avatar">
+            {avatar}
+          </div>
+          <div class="devui-comment-right">
+            <div class="devui-comment-head">
+              <div class="devui-comment-author">
+                {author}
+              </div>
+              <div class="devui-comment-datetime">
+                {datetime}
+              </div>
+            </div>
+            <div class="devui-comment-content">
+              {content}
+            </div>
+            <div class="devui-comment-actions">
+              {actions}
+            </div>
+          </div>
+        </div>
+      )
+    }
+  }
+})
diff --git a/packages/devui-vue/devui/comment/src/getSlot.ts b/packages/devui-vue/devui/comment/src/getSlot.ts
new file mode 100644
index 00000000..e69de29b
-- 
Gitee