GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): 添加抽屉

Browse Source
This commit is contained in:
Soybean 2022-01-07 18:51:06 +08:00
parent 0653fb144f
commit 10e4d81bd6
15 changed files with 356 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/layouts/Layout/index.vue
View File

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

18
src/layouts/common/SettingDrawer/components/DrawerButton/index.vue Normal file
View File

@ -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>

3
src/layouts/common/SettingDrawer/components/index.ts Normal file
View File

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

15
src/layouts/common/SettingDrawer/index.vue Normal file
View File

@ -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>

3
src/layouts/common/index.ts
View File

@ -1,3 +1,4 @@
import SettingDrawer from './SettingDrawer/index.vue';
import GlobalContent from './GlobalContent/index.vue';
export { GlobalContent };
export { SettingDrawer, GlobalContent };

24
src/store/modules/app/index.ts
View File

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

17
src/styles/css/scrollbar.css
View File

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

3
src/views/dashboard/analysis/index.vue
View File

@ -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>

48
src/views/dashboard/workbench/components/WorkbenchHeader/index.vue Normal file
View File

@ -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>

24
src/views/dashboard/workbench/components/WorkbenchMain/components/ShortcutsCard.vue Normal file
View File

@ -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>

41
src/views/dashboard/workbench/components/WorkbenchMain/components/TechnologyCard.vue Normal file
View File

@ -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>

4
src/views/dashboard/workbench/components/WorkbenchMain/components/index.ts Normal file
View File

@ -0,0 +1,4 @@
import TechnologyCard from './TechnologyCard.vue';
import ShortcutsCard from './ShortcutsCard.vue';
export { TechnologyCard, ShortcutsCard };

152
src/views/dashboard/workbench/components/WorkbenchMain/index.vue Normal file
View File

@ -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>

4
src/views/dashboard/workbench/components/index.ts Normal file
View File

@ -0,0 +1,4 @@
import WorkbenchHeader from './WorkbenchHeader/index.vue';
import WorkbenchMain from './WorkbenchMain/index.vue';
export { WorkbenchHeader, WorkbenchMain };

11
src/views/dashboard/workbench/index.vue
View File

@ -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>