新增前端vue

web-vue/packages/core/layouts/views/desktop/analysis/components/Data.tsx

@@ -0,0 +1,318 @@
+interface GroupItem {
+  title: string;
+  icon: string;
+  color: string;
+  desc: string;
+  date: string;
+  group: string;
+}
+
+interface NavItem {
+  title: string;
+  icon: string;
+  color: string;
+}
+
+interface DynamicInfoItem {
+  avatar: string;
+  name: string;
+  date: string;
+  desc: string;
+}
+
+export const navItems: NavItem[] = [
+  {
+    title: '首页',
+    icon: 'i-ion:home-outline',
+    color: '#1fdaca',
+  },
+  {
+    title: '仪表盘',
+    icon: 'i-ion:grid-outline',
+    color: '#bf0c2c',
+  },
+  {
+    title: '组件',
+    icon: 'i-ion:layers-outline',
+    color: '#e18525',
+  },
+  {
+    title: '系统管理',
+    icon: 'i-ion:settings-outline',
+    color: '#3fb27f',
+  },
+  {
+    title: '权限管理',
+    icon: 'i-ant-design:key-outlined',
+    color: '#4daf1bc9',
+  },
+  {
+    title: '图表',
+    icon: 'i-ion:bar-chart-outline',
+    color: '#00d8ff',
+  },
+];
+
+export const dynamicInfoItems: DynamicInfoItem[] = [
+  {
+    avatar: 'icons/dynamic-avatar-4.svg',
+    name: 'ThinkGem',
+    date: '刚刚',
+    desc: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
+  },
+  {
+    avatar: 'icons/dynamic-avatar-2.svg',
+    name: '果汁',
+    date: '1个小时前',
+    desc: `关注了 <a>JeeSite</a> `,
+  },
+  {
+    avatar: 'icons/dynamic-avatar-3.svg',
+    name: 'JeeSite',
+    date: '1天前',
+    desc: `发布了 <a>个人动态</a> `,
+  },
+  {
+    avatar: 'icons/dynamic-avatar-5.svg',
+    name: 'Vben',
+    date: '2天前',
+    desc: `发表文章 <a>如何编写一个Vite插件</a> `,
+  },
+  {
+    avatar: 'icons/dynamic-avatar-4.svg',
+    name: 'ThinkGem',
+    date: '3天前',
+    desc: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
+  },
+  {
+    avatar: 'icons/dynamic-avatar-6.svg',
+    name: 'JeeSite',
+    date: '1周前',
+    desc: `关闭了问题 <a>如何运行项目</a> `,
+  },
+  {
+    avatar: 'icons/dynamic-avatar-1.svg',
+    name: '彩虹',
+    date: '1周前',
+    desc: `发布了 <a>个人动态</a> `,
+  },
+  {
+    avatar: 'icons/dynamic-avatar-1.svg',
+    name: '彩虹',
+    date: '2021-09-01 20:00',
+    desc: `推送了代码到 <a>Gitee</a>`,
+  },
+];
+
+export const groupItems: GroupItem[] = [
+  {
+    title: 'Gitee',
+    icon: 'i-simple-icons:gitee',
+    color: '#ce2323',
+    desc: '不要等待机会，而要创造机会。',
+    group: '开源组',
+    date: '2021-09-01',
+  },
+  {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  },
+  {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  }, {
+    title: 'Vue',
+    icon: 'i-ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '前端组',
+    date: '2021-09-01',
+  },
+  {
+    title: 'Html5',
+    icon: 'i-ion:logo-html5',
+    color: '#e18525',
+    desc: '没有什么才能比努力更重要。',
+    group: '上班摸鱼',
+    date: '2021-09-01',
+  },
+  {
+    title: 'Java',
+    icon: 'i-logos:java',
+    color: '#bf0c2c',
+    desc: '热情和欲望可以突破一切难关。',
+    group: '算法组',
+    date: '2021-09-01',
+  },
+  {
+    title: 'Spring',
+    icon: 'i-bx:bxl-spring-boot',
+    color: '#00d8ff',
+    desc: '健康的身体是实目标的基石。',
+    group: '技术牛',
+    date: '2021-09-01',
+  },
+  {
+    title: 'JeeSite',
+    icon: 'i-ion:logo-javascript',
+    color: '#4daf1bc9',
+    desc: '路是走出来的，而不是空想出来的。',
+    group: '架构组',
+    date: '2021-09-01',
+  },
+];

web-vue/packages/core/layouts/views/desktop/analysis/components/DynamicInfo.vue

@@ -0,0 +1,92 @@
+<template>
+  <Card title="最新动态" v-bind="$attrs" class="dynamic-info-card">
+    <template #extra>
+      <a-button type="link" size="small">更多</a-button>
+    </template>
+    <!-- 设置固定高度和滚动条 -->
+    <div class="dynamic-list-container">
+      <List item-layout="horizontal" :data-source="dynamicInfoItems">
+        <template #renderItem="{ item }">
+          <ListItem>
+            <ListItemMeta>
+              <template #description>
+                {{ item.date }}
+              </template>
+              <!-- eslint-disable-next-line -->
+              <template #title> {{ item.name }} <span v-html="item.desc"> </span> </template>
+              <template #avatar>
+                <Icon :icon="item.avatar" :size="30" />
+              </template>
+            </ListItemMeta>
+          </ListItem>
+        </template>
+      </List>
+    </div>
+  </Card>
+</template>
+
+<script lang="ts" setup>
+  import { Card, List } from 'ant-design-vue';
+  import { dynamicInfoItems } from './Data';
+  import { Icon } from '@jeesite/core/components/Icon';
+
+  const ListItem = List.Item;
+  const ListItemMeta = List.Item.Meta;
+</script>
+
+<style scoped>
+/* 卡片容器样式 */
+.dynamic-info-card {
+  height: 30vh;
+}
+
+/* 列表滚动容器 */
+.dynamic-list-container {
+  /* 设置固定高度，可根据需求调整 */
+  max-height: 200px;
+  /* 超出部分显示滚动条 */
+  overflow-y: auto;
+  /* 内边距，美化显示 */
+  padding-right: 8px;
+}
+
+/* 自定义滚动条样式（可选，美化滚动条） */
+.dynamic-list-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dynamic-list-container::-webkit-scrollbar-track {
+  background: #f5f5f5;
+  border-radius: 3px;
+}
+
+.dynamic-list-container::-webkit-scrollbar-thumb {
+  background: #d9d9d9;
+  border-radius: 3px;
+}
+
+.dynamic-list-container::-webkit-scrollbar-thumb:hover {
+  background: #bfbfbf;
+}
+
+/* 兼容Firefox */
+.dynamic-list-container {
+  scrollbar-width: thin;
+  scrollbar-color: #d9d9d9 #f5f5f5;
+}
+
+/* 列表项间距优化 */
+:deep(.ant-list-item) {
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+:deep(.ant-list-item:last-child) {
+  border-bottom: none;
+}
+
+/* 头像和文字对齐优化 */
+:deep(.ant-list-item-meta-avatar) {
+  margin-right: 12px;
+}
+</style>

web-vue/packages/core/layouts/views/desktop/analysis/components/ProjectCard.vue

@@ -0,0 +1,68 @@
+<template>
+  <Card title="项目" v-bind="$attrs">
+    <template #extra>
+      <a-button type="link" size="small">更多</a-button>
+    </template>
+
+    <!-- 滚动容器 + 网格布局确保一行3个 -->
+    <div class="scroll-container">
+      <template v-for="item in items" :key="item">
+        <CardGrid class="!w-full">
+          <span class="flex">
+            <Icon :icon="item.icon" :color="item.color" size="30" />
+            <span class="ml-4 text-lg">{{ item.title }}</span>
+          </span>
+          <div class="text-secondary mt-2 h-10 flex">{{ item.desc }}</div>
+          <div class="text-secondary flex justify-between">
+            <span>{{ item.group }}</span>
+            <span>{{ item.date }}</span>
+          </div>
+        </CardGrid>
+      </template>
+    </div>
+  </Card>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { Icon } from '@jeesite/core/components/Icon';
+  import { groupItems } from './Data';
+
+  export default defineComponent({
+    components: { Card, CardGrid: Card.Grid, Icon },
+    setup() {
+      return { items: groupItems };
+    },
+  } as any);
+</script>
+
+<style scoped>
+/* 核心：滚动 + 一行3列布局 */
+.scroll-container {
+  max-height: 30vh; /* 超出高度显示滚动条 */
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 4px;
+  
+  /* 关键：网格布局一行3个 */
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* 强制一行3列 */
+  gap: 16px; /* 卡片间距，可按需调整 */
+}
+
+/* 可选：滚动条美化（保留浏览器默认可删除） */
+.scroll-container::-webkit-scrollbar {
+  width: 6px;
+}
+.scroll-container::-webkit-scrollbar-thumb {
+  background: #d9d9d9;
+  border-radius: 3px;
+}
+
+/* 适配小屏（可选，如需移动端仍保持3列可删除） */
+@media (max-width: 768px) {
+  .scroll-container {
+    grid-template-columns: repeat(1, 1fr); /* 小屏一行1列 */
+  }
+}
+</style>

web-vue/packages/core/layouts/views/desktop/analysis/components/QuickLogin.vue

@@ -112,7 +112,7 @@ const handleImgError = (e: Event) => {
   background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
   border-radius: 12px;
   padding: 24px;
-  width: 360px;
+  width: auto;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   box-sizing: border-box;
 }

web-vue/packages/core/layouts/views/desktop/analysis/index.vue

@@ -1,8 +1,28 @@
 <template>
-  <div class="mb-4">
-    <QuickLogin class="enter-y" />
-  </div>
+  <PageWrapper>
+    <template #headerContent> <WorkbenchHeader /> </template>
+    <div class="lg:flex">
+      <div class="enter-y w-full !mr-4 lg:w-7/10">
+        <ProjectCard :loading="loading" class="enter-y" />
+        <DynamicInfo :loading="loading" class="enter-y !my-4" />
+      </div>
+      <div class="enter-y w-full lg:w-3/10">
+        <QuickLogin :loading="loading" class="enter-y" />
+      </div>
+    </div>
+  </PageWrapper>
 </template>
 <script lang="ts" setup name="Analysis">
+  import { ref } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { PageWrapper } from '@jeesite/core/components/Page';
+  import WorkbenchHeader from './components/WorkbenchHeader.vue';
+  import ProjectCard from './components/ProjectCard.vue';
+  import DynamicInfo from './components/DynamicInfo.vue';
   import QuickLogin from './components/QuickLogin.vue';
+  
+  const loading = ref(true);
+  setTimeout(() => {
+    loading.value = false;
+  }, 800);
 </script>

web-vue/packages/core/layouts/views/desktop/workbench/components/Data.tsx

@@ -1,156 +0,0 @@
-interface GroupItem {
-  title: string;
-  icon: string;
-  color: string;
-  desc: string;
-  date: string;
-  group: string;
-}
-
-interface NavItem {
-  title: string;
-  icon: string;
-  color: string;
-}
-
-interface DynamicInfoItem {
-  avatar: string;
-  name: string;
-  date: string;
-  desc: string;
-}
-
-export const navItems: NavItem[] = [
-  {
-    title: '首页',
-    icon: 'i-ion:home-outline',
-    color: '#1fdaca',
-  },
-  {
-    title: '仪表盘',
-    icon: 'i-ion:grid-outline',
-    color: '#bf0c2c',
-  },
-  {
-    title: '组件',
-    icon: 'i-ion:layers-outline',
-    color: '#e18525',
-  },
-  {
-    title: '系统管理',
-    icon: 'i-ion:settings-outline',
-    color: '#3fb27f',
-  },
-  {
-    title: '权限管理',
-    icon: 'i-ant-design:key-outlined',
-    color: '#4daf1bc9',
-  },
-  {
-    title: '图表',
-    icon: 'i-ion:bar-chart-outline',
-    color: '#00d8ff',
-  },
-];
-
-export const dynamicInfoItems: DynamicInfoItem[] = [
-  {
-    avatar: 'icons/dynamic-avatar-4.svg',
-    name: 'ThinkGem',
-    date: '刚刚',
-    desc: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
-  },
-  {
-    avatar: 'icons/dynamic-avatar-2.svg',
-    name: '果汁',
-    date: '1个小时前',
-    desc: `关注了 <a>JeeSite</a> `,
-  },
-  {
-    avatar: 'icons/dynamic-avatar-3.svg',
-    name: 'JeeSite',
-    date: '1天前',
-    desc: `发布了 <a>个人动态</a> `,
-  },
-  {
-    avatar: 'icons/dynamic-avatar-5.svg',
-    name: 'Vben',
-    date: '2天前',
-    desc: `发表文章 <a>如何编写一个Vite插件</a> `,
-  },
-  {
-    avatar: 'icons/dynamic-avatar-4.svg',
-    name: 'ThinkGem',
-    date: '3天前',
-    desc: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
-  },
-  {
-    avatar: 'icons/dynamic-avatar-6.svg',
-    name: 'JeeSite',
-    date: '1周前',
-    desc: `关闭了问题 <a>如何运行项目</a> `,
-  },
-  {
-    avatar: 'icons/dynamic-avatar-1.svg',
-    name: '彩虹',
-    date: '1周前',
-    desc: `发布了 <a>个人动态</a> `,
-  },
-  {
-    avatar: 'icons/dynamic-avatar-1.svg',
-    name: '彩虹',
-    date: '2021-09-01 20:00',
-    desc: `推送了代码到 <a>Gitee</a>`,
-  },
-];
-
-export const groupItems: GroupItem[] = [
-  {
-    title: 'Gitee',
-    icon: 'i-simple-icons:gitee',
-    color: '#ce2323',
-    desc: '不要等待机会，而要创造机会。',
-    group: '开源组',
-    date: '2021-09-01',
-  },
-  {
-    title: 'Vue',
-    icon: 'i-ion:logo-vue',
-    color: '#3fb27f',
-    desc: '现在的你决定将来的你。',
-    group: '前端组',
-    date: '2021-09-01',
-  },
-  {
-    title: 'Html5',
-    icon: 'i-ion:logo-html5',
-    color: '#e18525',
-    desc: '没有什么才能比努力更重要。',
-    group: '上班摸鱼',
-    date: '2021-09-01',
-  },
-  {
-    title: 'Java',
-    icon: 'i-logos:java',
-    color: '#bf0c2c',
-    desc: '热情和欲望可以突破一切难关。',
-    group: '算法组',
-    date: '2021-09-01',
-  },
-  {
-    title: 'Spring',
-    icon: 'i-bx:bxl-spring-boot',
-    color: '#00d8ff',
-    desc: '健康的身体是实目标的基石。',
-    group: '技术牛',
-    date: '2021-09-01',
-  },
-  {
-    title: 'JeeSite',
-    icon: 'i-ion:logo-javascript',
-    color: '#4daf1bc9',
-    desc: '路是走出来的，而不是空想出来的。',
-    group: '架构组',
-    date: '2021-09-01',
-  },
-];

web-vue/packages/core/layouts/views/desktop/workbench/components/DynamicInfo.vue

@@ -1,31 +0,0 @@
-<template>
-  <Card title="最新动态" v-bind="$attrs">
-    <template #extra>
-      <a-button type="link" size="small">更多</a-button>
-    </template>
-    <List item-layout="horizontal" :data-source="dynamicInfoItems">
-      <template #renderItem="{ item }">
-        <ListItem>
-          <ListItemMeta>
-            <template #description>
-              {{ item.date }}
-            </template>
-            <!-- eslint-disable-next-line -->
-            <template #title> {{ item.name }} <span v-html="item.desc"> </span> </template>
-            <template #avatar>
-              <Icon :icon="item.avatar" :size="30" />
-            </template>
-          </ListItemMeta>
-        </ListItem>
-      </template>
-    </List>
-  </Card>
-</template>
-<script lang="ts" setup>
-  import { Card, List } from 'ant-design-vue';
-  import { dynamicInfoItems } from './Data';
-  import { Icon } from '@jeesite/core/components/Icon';
-
-  const ListItem = List.Item;
-  const ListItemMeta = List.Item.Meta;
-</script>

web-vue/packages/core/layouts/views/desktop/workbench/components/ProjectCard.vue

@@ -1,34 +0,0 @@
-<template>
-  <Card title="项目" v-bind="$attrs">
-    <template #extra>
-      <a-button type="link" size="small">更多</a-button>
-    </template>
-
-    <template v-for="item in items" :key="item">
-      <CardGrid class="!w-full !md:w-1/3">
-        <span class="flex">
-          <Icon :icon="item.icon" :color="item.color" size="30" />
-          <span class="ml-4 text-lg">{{ item.title }}</span>
-        </span>
-        <div class="text-secondary mt-2 h-10 flex">{{ item.desc }}</div>
-        <div class="text-secondary flex justify-between">
-          <span>{{ item.group }}</span>
-          <span>{{ item.date }}</span>
-        </div>
-      </CardGrid>
-    </template>
-  </Card>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Card } from 'ant-design-vue';
-  import { Icon } from '@jeesite/core/components/Icon';
-  import { groupItems } from './Data';
-
-  export default defineComponent({
-    components: { Card, CardGrid: Card.Grid, Icon },
-    setup() {
-      return { items: groupItems };
-    },
-  } as any);
-</script>

web-vue/packages/core/layouts/views/desktop/workbench/components/QuickNav.vue

@@ -1,19 +0,0 @@
-<template>
-  <Card title="快捷导航" v-bind="$attrs">
-    <template v-for="item in navItems" :key="item">
-      <CardGrid>
-        <span class="flex flex-col items-center">
-          <Icon :icon="item.icon" :color="item.color" size="20" />
-          <span class="text-md mt-2">{{ item.title }}</span>
-        </span>
-      </CardGrid>
-    </template>
-  </Card>
-</template>
-<script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
-  import { navItems } from './Data';
-  import { Icon } from '@jeesite/core/components/Icon';
-
-  const CardGrid = Card.Grid;
-</script>

web-vue/packages/core/layouts/views/desktop/workbench/components/SaleRadar.vue

@@ -1,100 +0,0 @@
-<template>
-  <Card title="销售统计" :loading="loading">
-    <div ref="chartRef" :style="{ width, height }"></div>
-  </Card>
-</template>
-<script lang="ts" setup>
-  import { Ref, ref, watch } from 'vue';
-  import { Card } from 'ant-design-vue';
-  import { useECharts } from '@jeesite/core/hooks/web/useECharts';
-
-  const props = defineProps({
-    loading: Boolean,
-    width: {
-      type: String as PropType<string>,
-      default: '100%',
-    },
-    height: {
-      type: String as PropType<string>,
-      default: '400px',
-    },
-  });
-
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-  watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        legend: {
-          bottom: 0,
-          data: ['Visits', 'Sales'],
-        },
-        tooltip: {},
-        radar: {
-          radius: '60%',
-          splitNumber: 8,
-          indicator: [
-            {
-              name: '2017',
-              max: 100,
-            },
-            {
-              name: '2017',
-              max: 100,
-            },
-            {
-              name: '2018',
-              max: 100,
-            },
-            {
-              name: '2019',
-              max: 100,
-            },
-            {
-              name: '2020',
-              max: 100,
-            },
-            {
-              name: '2021',
-              max: 100,
-            },
-          ],
-        },
-        series: [
-          {
-            type: 'radar',
-            symbolSize: 0,
-            areaStyle: {
-              shadowBlur: 0,
-              shadowColor: 'rgba(0,0,0,.2)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 10,
-              opacity: 1,
-            },
-            data: [
-              {
-                value: [90, 50, 86, 40, 50, 20],
-                name: 'Visits',
-                itemStyle: {
-                  color: '#b6a2de',
-                },
-              },
-              {
-                value: [70, 75, 70, 76, 20, 85],
-                name: 'Sales',
-                itemStyle: {
-                  color: '#67e0e3',
-                },
-              },
-            ],
-          },
-        ],
-      });
-    },
-    { immediate: true },
-  );
-</script>

web-vue/packages/core/layouts/views/desktop/workbench/index.vue

@@ -1,36 +0,0 @@
-<template>
-  <PageWrapper>
-    <template #headerContent> <WorkbenchHeader /> </template>
-    <div class="lg:flex">
-      <div class="enter-y w-full !mr-4 lg:w-7/10">
-        <ProjectCard :loading="loading" class="enter-y" />
-        <DynamicInfo :loading="loading" class="enter-y !my-4" />
-      </div>
-      <div class="enter-y w-full lg:w-3/10">
-        <QuickNav :loading="loading" class="enter-y" />
-
-        <Card class="enter-y !my-4" :loading="loading">
-          <img class="mx-auto h-30 xl:h-50" src="@jeesite/assets/svg/illustration.svg" />
-        </Card>
-
-        <SaleRadar :loading="loading" class="enter-y" />
-      </div>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts" setup name="Workbench">
-  import { ref } from 'vue';
-  import { Card } from 'ant-design-vue';
-  import { PageWrapper } from '@jeesite/core/components/Page';
-  import WorkbenchHeader from './components/WorkbenchHeader.vue';
-  import ProjectCard from './components/ProjectCard.vue';
-  import QuickNav from './components/QuickNav.vue';
-  import DynamicInfo from './components/DynamicInfo.vue';
-  import SaleRadar from './components/SaleRadar.vue';
-
-  const loading = ref(true);
-
-  setTimeout(() => {
-    loading.value = false;
-  }, 800);
-</script>