Merge remote-tracking branch 'origin/main' into ls_tev

2a2e29d2 · lshan · 464c5765 · 65c03fe1 · 2a2e29d2 · 2a2e29d2
Commit 2a2e29d2 authored Aug 23, 2021 by lshan
7 changed files
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <script src="//at.alicdn.com/t/font_2629369_2divej2yde9.js"></script>
    <title><%= htmlWebpackPlugin.options.title %></title>

--- a/src/DTO/comment.ts
+++ b/src/DTO/comment.ts
+
+export interface Comment {
+  id: number,
+  name: string,
+  content: string,
+  time: string,
+  type: string,
+  avator: string,
+  replyTo?: string,
+  reply: Array<Comment>
+}
+
+export const commentList: Array<Comment> = [
+  {
+    id: 1,
+    name: '张三',
+    content: '评论内容，可@人提醒，将任务内容，评估，总结，建议等写入评论，可追溯原因，帮助任务后期复盘。',
+    time: '19-11-04 12:23',
+    avator: '',
+    type: 'creator',
+    reply: []
+  },
+  {
+    id: 2,
+    name: '李四',
+    content: '评论内容，可@人提醒，将任务内容，评估，总结，建议等写入评论，可追溯原因，帮助任务后期复盘。',
+    time: '19-11-04 12:23',
+    avator: '',
+    type: 'participator',
+    reply: [
+      {
+        id: 1,
+        name: '张三',
+        replyTo: '李四',
+        content: '写入问题解决方案等回复。',
+        time: '19-11-04 12:23',
+        avator: '',
+        type: 'creator',
+        reply: []
+      }
+    ]
+  },
+  {
+    id: 3,
+    name: '王五',
+    content: '评论内容，可@人提醒，将任务内容，评估，总结，建议等写入评论，可追溯原因，帮助任务后期复盘。',
+    time: '19-11-04 12:23',
+    avator: '',
+    type: 'other',
+    reply: [
+      {
+        id: 1,
+        name: '张三',
+        content: '写入问题解决方案等回复。',
+        time: '19-11-04 12:23',
+        avator: '',
+        type: 'creator',
+        reply: []
+      },
+      {
+        id: 2,
+        name: '李四',
+        replyTo: '张三',
+        content: '写入问题解决方案等回复。',
+        time: '19-11-04 12:23',
+        avator: '',
+        type: 'participator',
+        reply: []
+      }
+    ]
+  }
+]
\ No newline at end of file
--- a/src/router/schedule.ts
+++ b/src/router/schedule.ts
@@ -27,6 +27,14 @@ export const scheduleRoutes: Array<RouteConfig> = [
        }
      },
      {
+        path: 'comment',
+        name: 'Comment',
+        component: () => import('@/views/schedule/comment-list.vue'),
+        meta: {
+          title: '评论'
+        }
+      },
+      {
        path: 'team',
        name: 'ScheduleTeam',
        component: () => import('@/views/schedule/team-frame.vue'),

--- a/src/views/schedule/comment-list.vue
+++ b/src/views/schedule/comment-list.vue
+<template>
+  <!-- 评论 -->
+  <main-page
+    left-arrow
+    :title="title"
+    @click-left="$router.go(-1)"
+  >
+    <div class="pt-14 pb-16 px-4">
+      <comment
+        v-for="c in commentList"
+        :key="c.id"
+        :comment="c"
+        class="last:border-0"
+        @click-comment="reply"
+      />
+    </div>
+    <div class="fixed bg-white py-2.5 px-4 bottom-0 left-0 w-full">
+      <input
+        :placeholder="placeholder"
+        type="text"
+        class="text-xs py-2 px-4 rounded-full bg-input-bg w-full"
+      >
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from "vue"
+import { Comment, commentList } from '@/DTO/comment'
+
+export default Vue.extend({
+  name: "CommentList",
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'c-tag': () => import('@/components/common/c-tag.vue'),
+    'comment': () => import('@/views/schedule/components/comment.vue')
+  },
+  data() {
+    return {
+      commentList,
+      title: '',
+      placeholder: '添加评论'
+    }
+  },
+  methods: {
+    reply(comment: Comment) {
+      console.log(comment, 'reply')
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
--- a/src/views/schedule/components/comment.vue
+++ b/src/views/schedule/components/comment.vue
+<template>
+  <!-- 评论 -->
+  <div class="flex py-2.5 border-b border-border-lighter">
+    <!-- 头像 -->
+    <div class="w-8 h-8">
+      <app-icon
+        icon-name="avator"
+        class-name="w-8 h-8"
+      />
+    </div>
+    <!-- 内容 -->
+    <div class="cotent ml-1">
+      <!-- 名称/title -->
+      <div class="flex items-center">
+        <div class="text-xs text-text-secondary mr-1">{{ comment.name }}</div>
+        <c-tag
+          v-if="['creator', 'participator'].indexOf(comment.type) > -1"
+          :label="comment.type === 'creator' ? '负责人' : '参与人'"
+          :color="comment.type === 'creator' ? 'primary' : 'orange'"
+        />
+      </div>
+      <!-- 评论内容 -->
+      <div class="my-1 flex text-sm" @click="clickComment(comment)">
+        <div v-if="comment.replyTo" class="text-text-secondary">回复{{ comment.replyTo }}：</div>
+        <div class="">{{ comment.content }}</div>
+      </div>
+      <!-- 评论时间 -->
+      <div class="text-text-secondary text-xs">{{ comment.time }}</div>
+      <!-- 回复 -->
+      <div v-if="comment.reply && comment.reply.length > 0"  class="reply">
+        <div
+          v-for="r in comment.reply"
+          :key="r.id"
+          class=""
+        >
+          <comment
+            class="last:border-0 last:pb-1"
+            :comment="r"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from "vue"
+import { Comment } from '@/DTO/comment'
+
+export default Vue.extend({
+  name: "Comment",
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'c-tag': () => import('@/components/common/c-tag.vue')
+  },
+  props: {
+    comment: {
+      type: Object as PropType<Comment>,
+      default() {
+        return {}
+      }
+    }
+  },
+  methods: {
+    clickComment(comment: Comment) {
+      this.$emit('click-comment', comment)
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
--- a/src/views/schedule/schedule-detail.vue
+++ b/src/views/schedule/schedule-detail.vue
@@ -105,7 +105,10 @@
        </c-cell>
      </group-cell>
      <!-- 评论 -->
-      <div class="fixed bottom-0 left-0 w-full bg-white px-4 py-2.5 flex items-center justify-between">
+      <div
+        class="fixed bottom-0 left-0 w-full bg-white px-4 py-2.5 flex items-center justify-between"
+        @click="$router.push('/schedule/comment')"
+      >
        <div class="flex-1 bg-input-bg rounded-full px-4 py-2 text-xs text-text-secondary">添加评论</div>
        <div class="text-sm ml-4">评论</div>
      </div>

--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -949,7 +949,7 @@ module.exports = {
    borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    borderRadius: ['responsive'],
    borderStyle: ['responsive'],
-    borderWidth: ['responsive'],
+    borderWidth: ['responsive', 'last'],
    boxDecorationBreak: ['responsive'],
    boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    boxSizing: ['responsive'],
@@ -1017,7 +1017,7 @@ module.exports = {
    outline: ['responsive', 'focus-within', 'focus'],
    overflow: ['responsive'],
    overscrollBehavior: ['responsive'],
-    padding: ['responsive'],
+    padding: ['responsive', 'last'],
    placeContent: ['responsive'],
    placeItems: ['responsive'],
    placeSelf: ['responsive'],