feat(projects): 添加抽屉

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';
 

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>

src/layouts/common/SettingDrawer/components/index.ts

@@ -0,0 +1,3 @@
+import DrawerButton from './DrawerButton/index.vue';
+
+export { DrawerButton };

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>

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 };

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;

src/styles/css/scrollbar.css

@@ -1,21 +1,26 @@
 /*---滚动条默认显示样式--*/
 ::-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;
 }
 
 /*---滚动框背景样式--*/
 ::-webkit-scrollbar-track-piece {
   background-color: rgba(0, 0, 0, 0);
   border-radius: 0;
 }
+
+html {
+	scrollbar-width: thin;
+	scrollbar-color: e6e6e6 transparent;
+}

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>
 

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>

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>

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>

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 };