chore: update

package.json

@@ -54,7 +54,7 @@
     "@logicflow/extension": "^1.2.19",
     "@pureadmin/descriptions": "^1.2.0",
     "@pureadmin/table": "^3.0.0",
-    "@pureadmin/utils": "^2.1.1",
+    "@pureadmin/utils": "^2.1.2",
     "@vueuse/core": "^10.7.1",
     "@vueuse/motion": "^2.0.0",
     "@wangeditor/editor": "^5.1.23",

src/views/welcome/components/chart/bar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { type PropType, ref, computed, watch, nextTick } from "vue";
 import { useDark, useECharts } from "@pureadmin/utils";
+import { type PropType, ref, computed, watch, nextTick } from "vue";
 
 const props = defineProps({
   requireData: {

src/views/welcome/components/table/columns.tsx

@@ -1,4 +1,4 @@
-import { tableData } from "./data";
+import { tableData } from "../../data";
 import { delay } from "@pureadmin/utils";
 import { ref, onMounted, reactive } from "vue";
 import type { PaginationProps } from "@pureadmin/table";
@@ -72,7 +72,7 @@ export function useColumns() {
 
   /** 分页配置 */
   const pagination = reactive<PaginationProps>({
-    pageSize: 8,
+    pageSize: 10,
     currentPage: 1,
     layout: "prev, pager, next",
     total: 0,

src/views/welcome/data.ts

@@ -1,9 +1,13 @@
+import { dayjs, cloneDeep, getRandomIntBetween } from "./utils";
 import GroupLine from "@iconify-icons/ri/group-line";
 import Question from "@iconify-icons/ri/question-answer-line";
 import CheckLine from "@iconify-icons/ri/chat-check-line";
 import Smile from "@iconify-icons/ri/star-smile-line";
 
-export const chartData = [
+const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+
+/** 需求人数、提问数量、解决数量、用户满意度 */
+const chartData = [
   {
     icon: GroupLine,
     bgColor: "#effaff",
@@ -46,8 +50,8 @@ export const chartData = [
   }
 ];
 
-/** 分析概览图表数据 */
-export const barChartData = [
+/** 分析概览 */
+const barChartData = [
   {
     requireData: [2101, 5288, 4239, 4962, 6752, 5208, 7450],
     questionData: [2216, 1148, 1255, 1788, 4821, 1973, 4379]
@@ -58,8 +62,8 @@ export const barChartData = [
   }
 ];
 
-/** 解决概率数据 */
-export const progressData = [
+/** 解决概率 */
+const progressData = [
   {
     week: "周一",
     percentage: 85,
@@ -103,3 +107,28 @@ export const progressData = [
     color: "#26ce83"
   }
 ];
+
+/** 数据统计 */
+const tableData = Array.from({ length: 30 }).map((_, index) => {
+  return {
+    id: index + 1,
+    requiredNumber: getRandomIntBetween(13500, 19999),
+    questionNumber: getRandomIntBetween(12600, 16999),
+    resolveNumber: getRandomIntBetween(13500, 17999),
+    satisfaction: getRandomIntBetween(95, 100),
+    date: dayjs().subtract(index, "day").format("YYYY-MM-DD")
+  };
+});
+
+/** 最新动态 */
+const latestNewsData = cloneDeep(tableData)
+  .slice(0, 8)
+  .map((item, index) => {
+    return Object.assign(item, {
+      date: `${dayjs().subtract(index, "day").format("YYYY-MM-DD")} ${
+        days[dayjs().subtract(index, "day").day()]
+      }`
+    });
+  });
+
+export { chartData, barChartData, progressData, tableData, latestNewsData };

src/views/welcome/index.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, markRaw } from "vue";
 import ReCol from "@/components/ReCol";
-import { useResizeObserver } from "@vueuse/core";
 import PureTable from "./components/table/index.vue";
-import { useDark, debounce } from "@pureadmin/utils";
 import { ReNormalCountTo } from "@/components/ReCountTo";
-import { chartData, barChartData, progressData } from "./data";
+import { useRenderFlicker } from "@/components/ReFlicker";
 import { barChart, lineChart, roundChart } from "./components/chart";
 import Segmented, { type OptionsType } from "@/components/ReSegmented";
+import { useResizeObserver, useDark, debounce, randomGradient } from "./utils";
+import { chartData, barChartData, progressData, latestNewsData } from "./data";
 
 defineOptions({
   name: "Welcome"
@@ -188,11 +188,11 @@ useResizeObserver(
           opacity: 1,
           y: 0,
           transition: {
-            delay: 400
+            delay: 560
           }
         }"
       >
-        <el-card shadow="never">
+        <el-card shadow="never" class="h-[580px]">
           <div class="flex justify-between">
             <span class="text-md font-medium">数据统计</span>
           </div>
@@ -213,31 +213,69 @@ useResizeObserver(
           opacity: 1,
           y: 0,
           transition: {
-            delay: 480
+            delay: 640
           }
         }"
       >
         <el-card shadow="never">
           <div class="flex justify-between">
-            <span class="text-md font-medium">xxx</span>
+            <span class="text-md font-medium">最新动态</span>
           </div>
+          <el-scrollbar max-height="504" class="mt-3">
+            <el-timeline>
+              <el-timeline-item
+                v-for="(item, index) in latestNewsData"
+                :key="index"
+                center
+                placement="top"
+                :icon="
+                  markRaw(
+                    useRenderFlicker({
+                      background: randomGradient({
+                        randomizeHue: true
+                      })
+                    })
+                  )
+                "
+                :timestamp="item.date"
+              >
+                <p class="text-text_color_regular text-sm">
+                  {{
+                    `新增 ${item.requiredNumber} 条问题，${item.resolveNumber} 条已解决`
+                  }}
+                </p>
+              </el-timeline-item>
+            </el-timeline>
+          </el-scrollbar>
         </el-card>
       </re-col>
     </el-row>
   </div>
 </template>
 
 <style lang="scss" scoped>
-:deep(.el-progress-bar__innerText) {
-  font-size: 15px;
-}
-
 :deep(.el-card) {
   --el-card-border-color: none;
-}
 
-:deep(.el-progress--line) {
-  width: 85%;
+  /* 解决概率进度条宽度 */
+  .el-progress--line {
+    width: 85%;
+  }
+
+  /* 解决概率进度条字体大小 */
+  .el-progress-bar__innerText {
+    font-size: 15px;
+  }
+
+  /* 隐藏 el-scrollbar 滚动条 */
+  .el-scrollbar__bar {
+    display: none;
+  }
+
+  /* el-timeline 每一项上下、左右边距 */
+  .el-timeline-item {
+    margin: 0 6px;
+  }
 }
 
 .main-content {

src/views/welcome/utils.ts

@@ -0,0 +1,13 @@
+export { default as dayjs } from "dayjs";
+export { useResizeObserver } from "@vueuse/core";
+export {
+  useDark,
+  debounce,
+  cloneDeep,
+  randomColor,
+  randomGradient
+} from "@pureadmin/utils";
+
+export function getRandomIntBetween(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}