From 10e4d81bd6a0b35d8cfb4f7a1e981f8ef6ab87cc Mon Sep 17 00:00:00 2001
From: Soybean <2570172956@qq.com>
Date: Fri, 7 Jan 2022 18:51:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E6=B7=BB=E5=8A=A0=E6=8A=BD?=
 =?UTF-8?q?=E5=B1=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/Layout/index.vue                  |   3 +-
 .../components/DrawerButton/index.vue         |  18 +++
 .../common/SettingDrawer/components/index.ts  |   3 +
 src/layouts/common/SettingDrawer/index.vue    |  15 ++
 src/layouts/common/index.ts                   |   3 +-
 src/store/modules/app/index.ts                |  24 ++-
 src/styles/css/scrollbar.css                  |  17 +-
 src/views/dashboard/analysis/index.vue        |   3 +-
 .../components/WorkbenchHeader/index.vue      |  48 ++++++
 .../components/ShortcutsCard.vue              |  24 +++
 .../components/TechnologyCard.vue             |  41 +++++
 .../WorkbenchMain/components/index.ts         |   4 +
 .../components/WorkbenchMain/index.vue        | 152 ++++++++++++++++++
 .../dashboard/workbench/components/index.ts   |   4 +
 src/views/dashboard/workbench/index.vue       |  11 +-
 15 files changed, 356 insertions(+), 14 deletions(-)
 create mode 100644 src/layouts/common/SettingDrawer/components/DrawerButton/index.vue
 create mode 100644 src/layouts/common/SettingDrawer/components/index.ts
 create mode 100644 src/layouts/common/SettingDrawer/index.vue
 create mode 100644 src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
 create mode 100644 src/views/dashboard/workbench/components/WorkbenchMain/components/ShortcutsCard.vue
 create mode 100644 src/views/dashboard/workbench/components/WorkbenchMain/components/TechnologyCard.vue
 create mode 100644 src/views/dashboard/workbench/components/WorkbenchMain/components/index.ts
 create mode 100644 src/views/dashboard/workbench/components/WorkbenchMain/index.vue
 create mode 100644 src/views/dashboard/workbench/components/index.ts

diff --git a/src/layouts/Layout/index.vue b/src/layouts/Layout/index.vue
index afa11f4e..2e6d3e56 100644
--- a/src/layouts/Layout/index.vue
+++ b/src/layouts/Layout/index.vue
@@ -38,6 +38,7 @@
       </div>
     </template>
   </soybean-layout>
+  <setting-drawer />
 </template>
 
 <script setup lang="ts">
@@ -46,7 +47,7 @@ import { NSpace, NButton, NSwitch, NRadioGroup, NRadio } from 'naive-ui';
 import { useElementSize } from '@vueuse/core';
 import { useBoolean } from '@/hooks';
 import { SoybeanLayout } from '@/package';
-import { GlobalContent } from '../common';
+import { SettingDrawer, GlobalContent } from '../common';
 
 type LayoutMode = 'vertical' | 'horizontal';
 
diff --git a/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue b/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue
new file mode 100644
index 00000000..d1d94d7b
--- /dev/null
+++ b/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <n-button
+    class="fixed top-240px right-14px z-10000"
+    :class="{ '!right-330px': app.settingDrawerVisible }"
+    @click="toggleSettingdrawerVisible"
+  >
+    点击
+  </n-button>
+</template>
+
+<script setup lang="ts">
+import { NButton } from 'naive-ui';
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+const { toggleSettingdrawerVisible } = useAppStore();
+</script>
+<style scoped></style>
diff --git a/src/layouts/common/SettingDrawer/components/index.ts b/src/layouts/common/SettingDrawer/components/index.ts
new file mode 100644
index 00000000..36bb4699
--- /dev/null
+++ b/src/layouts/common/SettingDrawer/components/index.ts
@@ -0,0 +1,3 @@
+import DrawerButton from './DrawerButton/index.vue';
+
+export { DrawerButton };
diff --git a/src/layouts/common/SettingDrawer/index.vue b/src/layouts/common/SettingDrawer/index.vue
new file mode 100644
index 00000000..6c427f25
--- /dev/null
+++ b/src/layouts/common/SettingDrawer/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <n-drawer :show="app.settingDrawerVisible" display-directive="show" :width="330" @mask-click="app.closeSettingDrawer">
+    <n-drawer-content title="主题配置" :native-scrollbar="false"></n-drawer-content>
+  </n-drawer>
+  <drawer-button />
+</template>
+
+<script setup lang="ts">
+import { NDrawer, NDrawerContent } from 'naive-ui';
+import { useAppStore } from '@/store';
+import { DrawerButton } from './components';
+
+const app = useAppStore();
+</script>
+<style scoped></style>
diff --git a/src/layouts/common/index.ts b/src/layouts/common/index.ts
index 0124072c..41510d31 100644
--- a/src/layouts/common/index.ts
+++ b/src/layouts/common/index.ts
@@ -1,3 +1,4 @@
+import SettingDrawer from './SettingDrawer/index.vue';
 import GlobalContent from './GlobalContent/index.vue';
 
-export { GlobalContent };
+export { SettingDrawer, GlobalContent };
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
index a81ebb8e..543b99e5 100644
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue';
 import { defineStore } from 'pinia';
-import { useReload } from '@/hooks';
+import { useReload, useBoolean } from '@/hooks';
 
 interface AppStore {
   /** 重载页面的标志 */
@@ -10,15 +10,35 @@ interface AppStore {
    * @param duration - 延迟时间(ms, 默认0)
    */
   handleReload(duration?: number): void;
+  /** 设置抽屉可见状态 */
+  settingDrawerVisible: Ref<boolean>;
+  /** 打开设置抽屉 */
+  openSettingDrawer(): void;
+  /** 关闭设置抽屉 */
+  closeSettingDrawer(): void;
+  /** 切换抽屉可见状态 */
+  toggleSettingdrawerVisible(): void;
 }
 
 export const useAppStore = defineStore('app-store', () => {
   // 重新加载页面
   const { reloadFlag, handleReload } = useReload();
 
+  // 设置抽屉
+  const {
+    bool: settingDrawerVisible,
+    setTrue: openSettingDrawer,
+    setFalse: closeSettingDrawer,
+    toggle: toggleSettingdrawerVisible
+  } = useBoolean();
+
   const appStore: AppStore = {
     reloadFlag,
-    handleReload
+    handleReload,
+    settingDrawerVisible,
+    openSettingDrawer,
+    closeSettingDrawer,
+    toggleSettingdrawerVisible
   };
 
   return appStore;
diff --git a/src/styles/css/scrollbar.css b/src/styles/css/scrollbar.css
index a2d31267..9d0e783e 100644
--- a/src/styles/css/scrollbar.css
+++ b/src/styles/css/scrollbar.css
@@ -1,17 +1,17 @@
 /*---滚动条默认显示样式--*/
 ::-webkit-scrollbar-thumb {
-  background-color: #d9d9d9;
-  border-radius: 4px;
+  background-color: #e6e6e6;
+  border-radius: 6px;
 }
 /*---鼠标点击滚动条显示样式--*/
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #d9d9d9;
-  border-radius: 4px;
+  background-color: #e6e6e6;
+  border-radius: 6px;
 }
 /*---滚动条大小--*/
 ::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+  width: 6px;
+  height: 6px;
 }
 
 /*---滚动框背景样式--*/
@@ -19,3 +19,8 @@
   background-color: rgba(0, 0, 0, 0);
   border-radius: 0;
 }
+
+html {
+	scrollbar-width: thin;
+	scrollbar-color: e6e6e6 transparent;
+}
diff --git a/src/views/dashboard/analysis/index.vue b/src/views/dashboard/analysis/index.vue
index 2da2dbf9..b519b5b7 100644
--- a/src/views/dashboard/analysis/index.vue
+++ b/src/views/dashboard/analysis/index.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="h-full">
+  <div class="h-[120%]">
     <h3>DashboardAnalysis</h3>
     <router-link to="/about">about</router-link>
+    <router-link to="/dashboard/workbench">workbench</router-link>
   </div>
 </template>
 
diff --git a/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue b/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
new file mode 100644
index 00000000..5fcb5290
--- /dev/null
+++ b/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <div class="flex-y-center justify-between">
+      <div class="flex-y-center">
+        <img src="@/assets/svg/avatar/avatar01.svg" alt="" class="w-70px h-70px" />
+        <div class="pl-12px">
+          <h3 class="text-18px font-semibold">早安，{{ auth.userInfo.userName }}, 今天又是充满活力的一天！</h3>
+          <p class="leading-30px text-[#999]">今日多云转晴，20℃ - 25℃！</p>
+        </div>
+      </div>
+      <n-space :size="24" :wrap="false">
+        <n-statistic v-for="item in statisticData" :key="item.id" class="whitespace-nowrap" v-bind="item"></n-statistic>
+      </n-space>
+    </div>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { NCard, NSpace, NStatistic } from 'naive-ui';
+import { useAuthStore } from '@/store';
+
+interface StatisticData {
+  id: number;
+  label: string;
+  value: string;
+}
+
+const auth = useAuthStore();
+
+const statisticData: StatisticData[] = [
+  {
+    id: 0,
+    label: '项目数',
+    value: '25'
+  },
+  {
+    id: 1,
+    label: '待办',
+    value: '4/16'
+  },
+  {
+    id: 2,
+    label: '消息',
+    value: '12'
+  }
+];
+</script>
+<style scoped></style>
diff --git a/src/views/dashboard/workbench/components/WorkbenchMain/components/ShortcutsCard.vue b/src/views/dashboard/workbench/components/WorkbenchMain/components/ShortcutsCard.vue
new file mode 100644
index 00000000..93de1348
--- /dev/null
+++ b/src/views/dashboard/workbench/components/WorkbenchMain/components/ShortcutsCard.vue
@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="flex-col-center p-12px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer"
+  >
+    <Icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
+    <p class="py-8px text-16px">{{ label }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+interface Props {
+  /** 快捷操作名称 */
+  label: string;
+  /** 图标 */
+  icon: string;
+  /** 图标颜色 */
+  iconColor: string;
+}
+
+defineProps<Props>();
+</script>
+<style scoped></style>
diff --git a/src/views/dashboard/workbench/components/WorkbenchMain/components/TechnologyCard.vue b/src/views/dashboard/workbench/components/WorkbenchMain/components/TechnologyCard.vue
new file mode 100644
index 00000000..8c130249
--- /dev/null
+++ b/src/views/dashboard/workbench/components/WorkbenchMain/components/TechnologyCard.vue
@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="p-4px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer"
+    @click="handleOpenSite"
+  >
+    <header class="flex-y-center">
+      <Icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
+      <h3 class="pl-12px text-18px font-semibold">{{ name }}</h3>
+    </header>
+    <p class="py-8px h-56px text-[#999]">{{ description }}</p>
+    <div class="flex justify-end">
+      <span>{{ author }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+interface Props {
+  /** 技术名称 */
+  name: string;
+  /** 技术描述 */
+  description: string;
+  /** 技术作者 */
+  author: string;
+  /** 技术官网 */
+  site: string;
+  /** 技术图标 */
+  icon: string;
+  /** 图标颜色 */
+  iconColor?: string;
+}
+
+const props = defineProps<Props>();
+
+function handleOpenSite() {
+  window.open(props.site, '_blank');
+}
+</script>
+<style scoped></style>
diff --git a/src/views/dashboard/workbench/components/WorkbenchMain/components/index.ts b/src/views/dashboard/workbench/components/WorkbenchMain/components/index.ts
new file mode 100644
index 00000000..e84b2621
--- /dev/null
+++ b/src/views/dashboard/workbench/components/WorkbenchMain/components/index.ts
@@ -0,0 +1,4 @@
+import TechnologyCard from './TechnologyCard.vue';
+import ShortcutsCard from './ShortcutsCard.vue';
+
+export { TechnologyCard, ShortcutsCard };
diff --git a/src/views/dashboard/workbench/components/WorkbenchMain/index.vue b/src/views/dashboard/workbench/components/WorkbenchMain/index.vue
new file mode 100644
index 00000000..914f1653
--- /dev/null
+++ b/src/views/dashboard/workbench/components/WorkbenchMain/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <n-grid :item-responsive="true" responsive="screen" :x-gap="16" :y-gap="16">
+    <n-grid-item span="s:24 m:16">
+      <n-space :vertical="true" :size="16">
+        <n-card title="项目主要技术栈" :bordered="false" size="small" class="shadow-sm rounded-16px">
+          <template #header-extra>
+            <a class="text-primary" href="javascript:;">更多技术栈</a>
+          </template>
+          <n-grid :item-responsive="true" responsive="screen" cols="m:2 l:3" :x-gap="8" :y-gap="8">
+            <n-grid-item v-for="item in technology" :key="item.id">
+              <technology-card v-bind="item" />
+            </n-grid-item>
+          </n-grid>
+        </n-card>
+        <n-card title="动态" :bordered="false" size="small" class="shadow-sm rounded-16px">
+          <template #header-extra>
+            <a class="text-primary" href="javascript:;">更多动态</a>
+          </template>
+          <n-list>
+            <n-list-item v-for="item in activity" :key="item.id">
+              <template #prefix>
+                <div class="w-48px h-48px">
+                  <img src="@/assets/svg/avatar/avatar01.svg" alt="" class="wh-full" />
+                </div>
+              </template>
+              <n-thing :title="item.content" :description="item.time" />
+            </n-list-item>
+          </n-list>
+        </n-card>
+      </n-space>
+    </n-grid-item>
+    <n-grid-item span="s:24 m:8">
+      <n-space :vertical="true" :size="16">
+        <n-card title="快捷操作" :bordered="false" size="small" class="shadow-sm rounded-16px">
+          <n-grid :item-responsive="true" responsive="screen" cols="m:2 l:3" :x-gap="8" :y-gap="8">
+            <n-grid-item v-for="item in shortcuts" :key="item.id">
+              <shortcuts-card v-bind="item" />
+            </n-grid-item>
+          </n-grid>
+        </n-card>
+        <n-card title="创意" :bordered="false" size="small" class="shadow-sm rounded-16px">
+          <n-carousel :autoplay="true" :show-arrow="true">
+            <!-- <banner-svg type="1" />
+            <banner-svg type="2" />
+            <banner-svg type="3" /> -->
+          </n-carousel>
+        </n-card>
+      </n-space>
+    </n-grid-item>
+  </n-grid>
+</template>
+
+<script setup lang="ts">
+import { NGrid, NGridItem, NSpace, NCard, NList, NListItem, NThing, NCarousel } from 'naive-ui';
+// import { BannerSvg } from '@/components';
+import { TechnologyCard, ShortcutsCard } from './components';
+
+interface Technology {
+  id: number;
+  name: string;
+  description: string;
+  author: string;
+  site: string;
+  icon: string;
+  iconColor?: string;
+}
+
+interface Activity {
+  id: number;
+  content: string;
+  time: string;
+}
+
+interface Shortcuts {
+  id: number;
+  label: string;
+  icon: string;
+  iconColor: string;
+}
+
+const technology: Technology[] = [
+  {
+    id: 0,
+    name: 'Vue',
+    description: '一套用于构建用户界面的渐进式框架',
+    author: '尤雨溪 - Evan You',
+    site: 'https://v3.cn.vuejs.org/',
+    icon: 'vscode-icons:file-type-vue'
+  },
+  {
+    id: 1,
+    name: 'TypeScript',
+    description: 'JavaScript类型的超集，它可以编译成纯JavaScript',
+    author: '微软 - Microsoft',
+    site: 'https://www.typescriptlang.org/',
+    icon: 'vscode-icons:file-type-typescript-official'
+  },
+  {
+    id: 2,
+    name: 'Vite',
+    description: '下一代前端开发与构建工具',
+    author: '尤雨溪 - Evan You',
+    site: 'https://vitejs.cn/',
+    icon: 'vscode-icons:file-type-vite'
+  },
+  {
+    id: 3,
+    name: 'NaiveUI',
+    description: '一个 Vue 3 组件库',
+    author: '图森未来 - TuSimple',
+    site: 'https://www.naiveui.com/zh-CN/os-theme',
+    icon: 'mdi:alpha-n-box-outline',
+    iconColor: '#5fbc22'
+  },
+  {
+    id: 4,
+    name: 'WindiCSS',
+    description: '下一代实用优先的CSS框架',
+    author: 'Windicss',
+    site: 'https://windicss.org/',
+    icon: 'file-icons:windi',
+    iconColor: '#48b0f1'
+  },
+  {
+    id: 5,
+    name: 'Pinia',
+    description: 'vue状态管理框架，支持vue2、vue3',
+    author: 'Posva',
+    site: 'https://pinia.esm.dev/',
+    icon: 'mdi:fruit-pineapple',
+    iconColor: '#fecf48'
+  }
+];
+
+const activity: Activity[] = [
+  { id: 4, content: 'Soybean 刚才把工作台页面随便写了一些，凑合能看了！', time: '2021-11-07 22:45:32' },
+  { id: 3, content: 'Soybean 正在忙于为soybean-admin写项目说明文档！', time: '2021-11-03 20:33:31' },
+  { id: 2, content: 'Soybean 准备为soybean-admin 1.0的发布做充分的准备工作！', time: '2021-10-31 22:43:12' },
+  { id: 1, content: '@yanbowe 向soybean-admin提交了一个bug，多标签栏不会自适应。', time: '2021-10-27 10:24:54' },
+  { id: 0, content: 'Soybean 在2021年5月28日创建了开源项目soybean-admin！', time: '2021-05-28 22:22:22' }
+];
+
+const shortcuts: Shortcuts[] = [
+  { id: 0, label: '主控台', icon: 'mdi:desktop-mac-dashboard', iconColor: '#409eff' },
+  { id: 1, label: '系统管理', icon: 'ic:outline-settings', iconColor: '#7238d1' },
+  { id: 2, label: '权限管理', icon: 'mdi:family-tree', iconColor: '#f56c6c' },
+  { id: 3, label: '组件', icon: 'fluent:app-store-24-filled', iconColor: '#19a2f1' },
+  { id: 4, label: '表格', icon: 'mdi:table-large', iconColor: '#fab251' },
+  { id: 5, label: '图表', icon: 'mdi:chart-areaspline', iconColor: '#8aca6b' }
+];
+</script>
+<style scoped></style>
diff --git a/src/views/dashboard/workbench/components/index.ts b/src/views/dashboard/workbench/components/index.ts
new file mode 100644
index 00000000..208c51c4
--- /dev/null
+++ b/src/views/dashboard/workbench/components/index.ts
@@ -0,0 +1,4 @@
+import WorkbenchHeader from './WorkbenchHeader/index.vue';
+import WorkbenchMain from './WorkbenchMain/index.vue';
+
+export { WorkbenchHeader, WorkbenchMain };
diff --git a/src/views/dashboard/workbench/index.vue b/src/views/dashboard/workbench/index.vue
index 265a0709..9355a59f 100644
--- a/src/views/dashboard/workbench/index.vue
+++ b/src/views/dashboard/workbench/index.vue
@@ -1,6 +1,11 @@
 <template>
-  <div>DashboardWorkbench</div>
+  <n-space :vertical="true" :size="16">
+    <workbench-header />
+    <workbench-main />
+  </n-space>
 </template>
-
-<script setup lang="ts"></script>
+<script lang="ts" setup>
+import { NSpace } from 'naive-ui';
+import { WorkbenchHeader, WorkbenchMain } from './components';
+</script>
 <style scoped></style>