refactor：首页项目评论

packages/effects/common-ui/src/ui/dashboard/typing.ts

@@ -27,6 +27,18 @@ interface WorkbenchTrendItem {
   info: string;
 }
 
+interface WorkbenchTrendCommentItem {
+  avatar: string;
+  content: string;
+  date: string;
+  title: string;
+  status: any;
+  customerName: string;
+  serialNo: string;
+  businessOwner: string;
+  technicalOwnerA: string;
+}
+
 interface WorkbenchTodoItem {
   completed: boolean;
   content: string;
@@ -46,5 +58,6 @@ export type {
   WorkbenchProjectItem,
   WorkbenchQuickNavItem,
   WorkbenchTodoItem,
+  WorkbenchTrendCommentItem,
   WorkbenchTrendItem,
 };

packages/effects/common-ui/src/ui/dashboard/workbench/index.ts

@@ -2,4 +2,5 @@ export { default as WorkbenchHeader } from './workbench-header.vue';
 export { default as WorkbenchProject } from './workbench-project.vue';
 export { default as WorkbenchQuickNav } from './workbench-quick-nav.vue';
 export { default as WorkbenchTodo } from './workbench-todo.vue';
+export { default as WorkbenchTrendsComment } from './workbench-trends-comment.vue';
 export { default as WorkbenchTrends } from './workbench-trends.vue';

packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends-comment.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import type { WorkbenchTrendCommentItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items?: WorkbenchTrendCommentItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchTrendsComment',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="py-4">
+      <CardTitle class="text-lg">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent class="flex flex-wrap p-5 pt-0">
+      <ul class="divide-border w-full divide-y" role="list">
+        <li
+          v-for="item in items"
+          :key="item.title"
+          class="flex justify-between gap-x-6 py-5"
+        >
+          <div class="flex min-w-0 items-center gap-x-4">
+            <VbenIcon
+              :icon="item.avatar"
+              alt=""
+              class="size-10 flex-none rounded-full"
+            />
+            <div class="min-w-0 flex-auto">
+              <p class="text-foreground text-sm font-semibold leading-6">
+                <!-- eslint-disable vue/no-v-html -->
+                <!-- <span v-html="item.info"></span> -->
+                <a-tooltip title="客户名称">
+                  <span
+                    class="text-foreground mr-2 text-sm font-semibold leading-6"
+                    >{{ item.customerName }}
+                  </span>
+                </a-tooltip>
+                <a-tooltip title="项目名称">
+                  <span
+                    class="text-foreground mr-2 text-sm font-semibold leading-6"
+                    >{{ item.title }}
+                  </span>
+                </a-tooltip>
+                <a-tooltip title="项目状态">
+                  <a-tag
+                    v-if="item.status"
+                    :color="
+                      item.status.colorType
+                        ? item.status.colorType
+                        : item.status.cssClass
+                    "
+                  >
+                    {{ item.status.label }}
+                  </a-tag>
+                </a-tooltip>
+
+                <a-tooltip title="SN" v-if="item.serialNo">
+                  <span
+                    class="text-foreground mr-2 text-sm font-semibold leading-6"
+                    >{{ item.serialNo }}
+                  </span>
+                </a-tooltip>
+                <a-tooltip title="业务负责人">
+                  <span
+                    class="text-foreground mr-2 text-sm font-semibold leading-6"
+                    >{{ item.businessOwner }}
+                  </span>
+                </a-tooltip>
+                <a-tooltip title="技术负责人1">
+                  <span
+                    class="text-foreground mr-2 text-sm font-semibold leading-6"
+                    >{{ item.technicalOwnerA }}
+                  </span>
+                </a-tooltip>
+                <!-- eslint-disable vue/no-v-html -->
+                <!-- <span v-html="item.info"></span> -->
+                <!-- <a-row :gutter="16" class="mb-2">
+                  <a-col>项目名称</a-col>
+                  <a-col>项目状态</a-col>
+                  <a-col>业务负责人</a-col>
+                </a-row>
+                <a-row :gutter="16">
+                  <a-col :span="8">
+                    <span
+                      class="text-foreground text-sm font-semibold leading-6"
+                    >
+                      {{ item.title }}
+                    </span>
+                  </a-col>
+                  <a-col :span="8">
+                    <a-tag
+                      v-if="item.status"
+                      :color="
+                        item.status.colorType
+                          ? item.status.colorType
+                          : item.status.cssClass
+                      "
+                    >
+                      {{ item.status.label }}
+                    </a-tag>
+                  </a-col>
+                  <a-col :span="8">col-6</a-col>
+                </a-row> -->
+              </p>
+              <!-- eslint-disable vue/no-v-html -->
+              <p
+                class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
+                v-html="item.content"
+              ></p>
+            </div>
+          </div>
+          <div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
+            <span class="text-foreground/80 mt-6 text-xs leading-6">
+              {{ item.date }}
+            </span>
+          </div>
+        </li>
+      </ul>
+    </CardContent>
+  </Card>
+</template>