feat: update dashboard

packages/business/chart-ui/src/echarts/echarts.ts

@@ -56,4 +56,4 @@ echarts.use([
   ToolboxComponent,
 ]);
 
-export { echarts };
+export default echarts;

packages/business/chart-ui/src/echarts/use-echarts.ts

@@ -14,7 +14,7 @@ import {
   useWindowSize,
 } from '@vueuse/core';
 
-import { echarts } from './echarts';
+import echarts from './echarts';
 
 type EchartsUIType = typeof EchartsUI | undefined;
 

packages/business/universal-ui/src/dashboard/typing.ts

@@ -16,6 +16,21 @@ interface WorkbenchProjectItem {
   icon: Component | string;
   title: string;
 }
+
+interface WorkbenchTrendItem {
+  avatar: string;
+  content: string;
+  date: string;
+  title: string;
+}
+
+interface WorkbenchTodoItem {
+  completed: boolean;
+  content: string;
+  date: string;
+  title: string;
+}
+
 interface WorkbenchQuickNavItem {
   color?: string;
   icon: Component | string;
@@ -26,4 +41,6 @@ export type {
   AnalysisOverviewItem,
   WorkbenchProjectItem,
   WorkbenchQuickNavItem,
+  WorkbenchTodoItem,
+  WorkbenchTrendItem,
 };

packages/business/universal-ui/src/dashboard/workbench/index.ts

@@ -1,3 +1,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 WorkbenchTrends } from './workbench-trends.vue';

packages/business/universal-ui/src/dashboard/workbench/workbench-project.vue

@@ -36,10 +36,14 @@ withDefaults(defineProps<Props>(), {
             'border-b-0': index < 3,
             'pb-4': index > 2,
           }"
-          class="border-border w-1/3 border-b border-r border-t p-4 transition-all hover:shadow-xl"
+          class="border-border group w-1/3 cursor-pointer border-b border-r border-t p-4 transition-all hover:shadow-xl"
         >
           <div class="flex items-center">
-            <VbenIcon :color="item.color" :icon="item.icon" class="size-8" />
+            <VbenIcon
+              :color="item.color"
+              :icon="item.icon"
+              class="size-8 transition-all duration-300 group-hover:scale-110"
+            />
             <span class="ml-4 text-lg font-medium">{{ item.title }}</span>
           </div>
           <div class="text-foreground/80 mt-4 flex h-10">

packages/business/universal-ui/src/dashboard/workbench/workbench-quick-nav.vue

@@ -36,9 +36,13 @@ withDefaults(defineProps<Props>(), {
             'pb-4': index > 2,
             'border-b-0': index < 3,
           }"
-          class="flex-col-center border-border w-1/3 border-b border-r border-t py-5 transition-all hover:shadow-xl"
+          class="flex-col-center border-border group w-1/3 cursor-pointer border-b border-r border-t py-8 hover:shadow-xl"
         >
-          <VbenIcon :color="item.color" :icon="item.icon" class="size-5" />
+          <VbenIcon
+            :color="item.color"
+            :icon="item.icon"
+            class="size-7 transition-all duration-300 group-hover:scale-125"
+          />
           <span class="text-md mt-2 truncate">{{ item.title }}</span>
         </div>
       </template>

packages/business/universal-ui/src/dashboard/workbench/workbench-todo.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { WorkbenchTodoItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenCheckbox,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items: WorkbenchTodoItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchTodo',
+});
+
+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="{
+            'select-none line-through opacity-60': item.completed,
+          }"
+          class="flex cursor-pointer justify-between gap-x-6 py-5"
+        >
+          <div class="flex min-w-0 items-center gap-x-4">
+            <VbenCheckbox v-model:checked="item.completed" name="completed" />
+            <div class="min-w-0 flex-auto">
+              <p class="text-foreground text-sm font-semibold leading-6">
+                {{ item.title }}
+              </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>

packages/business/universal-ui/src/dashboard/workbench/workbench-trends.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { WorkbenchTrendItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items: WorkbenchTrendItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchTrends',
+});
+
+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">
+                {{ item.title }}
+              </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>

packages/business/widgets/src/preferences/preferences.vue

@@ -15,7 +15,7 @@ import type { SegmentedItem } from '@vben-core/shadcn-ui';
 
 import { computed, ref } from 'vue';
 
-import { $t } from '@vben/locales';
+import { $t, loadLocaleMessages } from '@vben/locales';
 import { IcRoundFolderCopy, IcRoundRestartAlt } from '@vben-core/iconify';
 import {
   preferences,
@@ -166,11 +166,12 @@ async function handleCopy() {
   toast($t('preferences.copy-success'));
 }
 
-function handleReset() {
+async function handleReset() {
   if (!diffPreference.value) {
     return;
   }
   resetPreferences();
+  await loadLocaleMessages(preferences.app.locale);
   toast($t('preferences.reset-success'));
 }
 </script>