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

style(projects): per style [完善样式]

Browse Source
This commit is contained in:
Soybean 2023-03-15 09:01:06 +08:00
parent b549b32cbb
commit 209ef3d890
33 changed files with 113 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/business/loading-empty-wrapper.vue
View File

@ -54,7 +54,7 @@ const props = withDefaults(defineProps<Props>(), {
placeholderClass: 'bg-white dark:bg-dark transition-background-color duration-300 ease-in-out',
emptyDesc: '暂无数据',
iconClass: 'text-320px text-primary',
descClass: 'text-16px text-[#666]',
descClass: 'text-16px text-#666',
showNetworkReload: false
});

4
src/components/common/dark-mode-container.vue
View File

@ -1,7 +1,7 @@
<template>
<div
class="dark:bg-[#18181c] dark:text-white dark:text-opacity-82 transition-all"
:class="inverted ? 'bg-[#001428] text-white' : 'bg-white text-[#333639]'"
class="dark:bg-dark dark:text-white dark:text-opacity-82 transition-all"
:class="inverted ? 'bg-#001428 text-white' : 'bg-white text-#333639'"
>
<slot></slot>
</div>

4
src/components/common/exception-base.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="flex-col-center wh-full">
<div class="text-400px text-primary">
<div class="flex-col-center gap-24px min-h-520px wh-full overflow-hidden">
<div class="flex text-400px text-primary">
<icon-local-no-permission v-if="type === '403'" />
<icon-local-not-found v-if="type === '404'" />
<icon-local-service-error v-if="type === '500'" />

6
src/components/common/hover-container.vue
View File

@ -2,14 +2,14 @@
<div v-if="showTooltip">
<n-tooltip :placement="placement" trigger="hover">
<template #trigger>
<div class="flex-center h-full cursor-pointer dark:hover:bg-[#333]" :class="contentClassName">
<div class="flex-center h-full cursor-pointer dark:hover:bg-#333" :class="contentClassName">
<slot></slot>
</div>
</template>
{{ tooltipContent }}
</n-tooltip>
</div>
<div v-else class="flex-center cursor-pointer dark:hover:bg-[#333]" :class="contentClassName">
<div v-else class="flex-center cursor-pointer dark:hover:bg-#333" :class="contentClassName">
<slot></slot>
</div>
</template>
@ -41,7 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
const showTooltip = computed(() => Boolean(props.tooltipContent));
const contentClassName = computed(
() => `${props.contentClass} ${props.inverted ? 'hover:bg-primary' : 'hover:bg-[#f6f6f6]'}`
() => `${props.contentClass} ${props.inverted ? 'hover:bg-primary' : 'hover:bg-#f6f6f6'}`
);
</script>

2
src/components/custom/icon-select.vue
View File

@ -14,7 +14,7 @@
<span v-for="iconItem in iconsList" :key="iconItem" @click="handleChange(iconItem)">
<svg-icon
:icon="iconItem"
class="border-1px border-[#d9d9d9] text-30px m-2px p-5px cursor-pointer"
class="border-1px border-#d9d9d9 text-30px m-2px p-5px cursor-pointer"
:class="{ 'border-primary': modelValue === iconItem }"
/>
</span>

11
src/layouts/basic-layout/index.vue
View File

@ -15,6 +15,7 @@
:sider-collapsed-width="siderCollapsedWidth"
:footer-visible="theme.footer.visible"
:fixed-footer="theme.footer.fixed"
:right-footer="theme.footer.right"
>
<template #header>
<global-header v-bind="headerProps" />
@ -48,4 +49,12 @@ const theme = useThemeStore();
const { mode, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
</script>
<style scoped></style>
<style lang="scss">
#__SCROLL_EL_ID__ {
@include scrollbar(8px, #e1e1e1);
}
.dark #__SCROLL_EL_ID__ {
@include scrollbar(8px, #555);
}
</style>

2
src/layouts/common/global-content/index.vue
View File

@ -13,7 +13,7 @@
v-if="app.reloadFlag"
:key="route.fullPath"
:class="{ 'p-16px': showPadding }"
class="flex-grow bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out"
class="flex-grow bg-#f6f9f8 dark:bg-#101014 transition duration-300 ease-in-out"
/>
</keep-alive>
</transition>

6
src/layouts/common/global-footer/index.vue
View File

@ -1,11 +1,15 @@
<template>
<dark-mode-container class="flex-center h-full">
<dark-mode-container class="flex-center h-full" :inverted="theme.footer.inverted">
<span>Copyright ©2021 Soybean Admin</span>
</dark-mode-container>
</template>
<script setup lang="ts">
import { useThemeStore } from '@/store';
defineOptions({ name: 'GlobalFooter' });
const theme = useThemeStore();
</script>
<style scoped></style>

2
src/layouts/common/global-header/components/message-list.vue
View File

@ -4,7 +4,7 @@
<n-list-item
v-for="(item, index) in list"
:key="item.id"
class="hover:bg-[#f6f6f6] dark:hover:bg-dark cursor-pointer"
class="hover:bg-#f6f6f6 dark:hover:bg-dark cursor-pointer"
@click="handleRead(index)"
>
<n-thing class="px-15px" :class="{ 'opacity-30': item.isRead }">

2
src/layouts/common/global-search/components/search-modal.vue
View File

@ -12,7 +12,7 @@
<n-input-group>
<n-input ref="inputRef" v-model:value="keyword" clearable placeholder="请输入关键词搜索" @input="handleSearch">
<template #prefix>
<icon-uil-search class="text-15px text-[#c2c2c2]" />
<icon-uil-search class="text-15px text-#c2c2c2" />
</template>
</n-input>
<n-button v-if="isMobile" type="primary" ghost @click="handleClose">取消</n-button>

2
src/layouts/common/global-search/components/search-result.vue
View File

@ -3,7 +3,7 @@
<div class="pb-12px">
<template v-for="item in options" :key="item.path">
<div
class="bg-[#e5e7eb] dark:bg-dark h-56px mt-8px px-14px rounded-4px cursor-pointer flex-y-center justify-between"
class="bg-#e5e7eb dark:bg-dark h-56px mt-8px px-14px rounded-4px cursor-pointer flex-y-center justify-between"
:style="{
background: item.path === active ? theme.themeColor : '',
color: item.path === active ? '#fff' : ''

2
src/layouts/common/global-sider/components/vertical-mix-sider/components/mix-menu-drawer.vue
View File

@ -5,6 +5,7 @@
>
<dark-mode-container
class="drawer-shadow absolute-lt flex-col-stretch h-full nowrap-hidden"
:inverted="theme.sider.inverted"
:style="{ width: showDrawer ? theme.sider.mixChildMenuWidth + 'px' : '0px' }"
>
<header class="header-height flex-y-center justify-between" :style="{ height: theme.header.height + 'px' }">
@ -20,6 +21,7 @@
:options="menus"
:expanded-keys="expandedKeys"
:indent="18"
:inverted="!theme.darkMode && theme.sider.inverted"
@update:value="handleUpdateMenu"
@update:expanded-keys="handleUpdateExpandedKeys"
/>

2
src/layouts/common/global-sider/components/vertical-sider/components/vertical-menu.vue
View File

@ -8,7 +8,7 @@
:options="menus"
:expanded-keys="expandedKeys"
:indent="18"
:inverted="theme.sider.inverted"
:inverted="!theme.darkMode && theme.sider.inverted"
@update:value="handleUpdateMenu"
@update:expanded-keys="handleUpdateExpandedKeys"
/>

7
src/layouts/common/setting-drawer/components/dark-mode/index.vue
View File

@ -21,12 +21,15 @@
</template>
</n-switch>
</setting-menu>
<setting-menu label="侧边栏深色主题">
<setting-menu label="侧边栏深色">
<n-switch :value="theme.sider.inverted" @update:value="theme.setSiderInverted" />
</setting-menu>
<setting-menu label="头部深色主题">
<setting-menu label="头部深色">
<n-switch :value="theme.header.inverted" @update:value="theme.setHeaderInverted" />
</setting-menu>
<setting-menu label="底部深色">
<n-switch :value="theme.footer.inverted" @update:value="theme.setFooterInverted" />
</setting-menu>
</n-space>
</template>

4
src/layouts/common/setting-drawer/components/layout-mode/components/layout-checkbox.vue
View File

@ -6,8 +6,8 @@
<n-tooltip :placement="activeConfig.placement" trigger="hover">
<template #trigger>
<div class="layout-checkbox__shadow relative w-56px h-48px bg-white rounded-4px overflow-hidden">
<div class="absolute-lt bg-[#273352]" :class="activeConfig.menuClass"></div>
<div class="absolute-rb bg-[#f0f2f5]" :class="activeConfig.mainClass"></div>
<div class="absolute-lt bg-#273352" :class="activeConfig.menuClass"></div>
<div class="absolute-rb bg-#f0f2f5" :class="activeConfig.mainClass"></div>
</div>
</template>
<span>{{ label }}</span>

7
src/layouts/common/setting-drawer/components/page-func/index.vue
View File

@ -61,11 +61,14 @@
@update:value="theme.setMixSiderWidth"
/>
</setting-menu>
<setting-menu label="显示底部">
<n-switch :value="theme.footer.visible" @update:value="theme.setFooterVisible" />
</setting-menu>
<setting-menu label="固定底部">
<n-switch :value="theme.footer.fixed" @update:value="theme.setFooterIsFixed" />
</setting-menu>
<setting-menu label="显示底部">
<n-switch :value="theme.footer.visible" @update:value="theme.setFooterVisible" />
<setting-menu label="底部居右">
<n-switch :value="theme.footer.right" @update:value="theme.setFooterIsRight" />
</setting-menu>
</n-space>
</template>

4
src/settings/theme.json
View File

@ -120,9 +120,11 @@
]
},
"footer": {
"visible": true,
"fixed": false,
"right": true,
"height": 48,
"visible": true
"inverted": false
},
"page": {
"animate": true,

4
src/settings/theme.ts
View File

@ -83,9 +83,11 @@ const defaultThemeSetting: Theme.Setting = {
horizontalPositionList: themeHorizontalMenuPositionOptions
},
footer: {
visible: true,
fixed: false,
right: true,
height: 48,
visible: true
inverted: false
},
page: {
animate: true,

14
src/store/modules/theme/index.ts
View File

@ -145,17 +145,25 @@ export const useThemeStore = defineStore('theme-store', {
setHorizontalMenuPosition(position: UnionKey.ThemeHorizontalMenuPosition) {
this.menu.horizontalPosition = position;
},
/** 设置底部是否显示 */
setFooterVisible(isVisible: boolean) {
this.footer.visible = isVisible;
},
/** 设置底部是否固定 */
setFooterIsFixed(isFixed: boolean) {
this.footer.fixed = isFixed;
},
/** 设置底部是否固定 */
setFooterIsRight(right: boolean) {
this.footer.right = right;
},
/** 设置底部高度 */
setFooterHeight(height: number) {
this.footer.height = height;
},
/** 设置底部是否显示 */
setFooterVisible(isVisible: boolean) {
this.footer.visible = isVisible;
/** 设置底部高度 */
setFooterInverted(inverted: boolean) {
this.footer.inverted = inverted;
},
/** 设置切换页面时是否过渡动画 */
setPageIsAnimate(animate: boolean) {

1
src/styles/css/global.css
View File

@ -1,6 +1,5 @@
@import "./transition.css";
@import "./reset.css";
@import "./scrollbar.css";
html,
body,

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

@ -1,52 +0,0 @@
html {
scrollbar-width: thin;
scrollbar-color: #e1e1e1 transparent;
}
/*---滚动条默认显示样式--*/
html::-webkit-scrollbar-thumb {
background-color: #e1e1e1;
border-radius: 8px;
}
/*---鼠标点击滚动条显示样式--*/
html::-webkit-scrollbar-thumb:hover {
background-color: #e1e1e1;
border-radius: 8px;
}
/*---滚动条大小--*/
html::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/*---滚动框背景样式--*/
html::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0);
border-radius: 0;
}
html.dark {
scrollbar-width: thin;
scrollbar-color: #555 transparent;
}
/*---滚动条默认显示样式--*/
html.dark::-webkit-scrollbar-thumb {
background-color: #555;
border-radius: 8px;
}
/*---鼠标点击滚动条显示样式--*/
html.dark::-webkit-scrollbar-thumb:hover {
background-color: #555;
border-radius: 8px;
}
/*---滚动条大小--*/
html.dark::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/*---滚动框背景样式--*/
html.dark::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0);
border-radius: 0;
}

3
src/styles/scss/scrollbar.scss
View File

@ -1,4 +1,7 @@
@mixin scrollbar($size: 8px, $color: #d9d9d9) {
scrollbar-width: thin;
scrollbar-color: $color transparent;
&::-webkit-scrollbar-thumb {
background-color: $color;
border-radius: $size;

12
src/typings/system.d.ts vendored
View File

@ -200,12 +200,16 @@ declare namespace Theme {
/** 底部样式 */
interface Footer {
/** 是否固定底部 */
fixed: boolean;
/** 底部高度 */
height: number;
/* 底部是否可见 */
visible: boolean;
/** 是否固定底部 */
fixed: boolean;
/** 底部是否居右(顶部混合菜单模式有效) */
right: boolean;
/** 底部高度 */
height: number;
/** 底部反转色 */
inverted: boolean;
}
/** 页面样式 */

2
src/views/_builtin/login/components/pwd-login/components/other-account.vue
View File

@ -1,6 +1,6 @@
<template>
<n-space :vertical="true">
<n-divider class="!mb-0 text-14px text-[#666]">其他账户登录</n-divider>
<n-divider class="!mb-0 text-14px text-#666">其他账户登录</n-divider>
<n-space justify="center">
<n-button
v-for="item in accounts"

4
src/views/_builtin/login/components/pwd-login/components/other-login.vue
View File

@ -1,9 +1,9 @@
<template>
<n-space :vertical="true">
<n-divider class="!mb-0 text-14px text-[#666]">其他登录方式</n-divider>
<n-divider class="!mb-0 text-14px text-#666">其他登录方式</n-divider>
<div class="flex-center">
<n-button :text="true">
<icon-mdi-wechat class="text-22px text-[#888] hover:text-[#52BF5E]" />
<icon-mdi-wechat class="text-22px text-#888 hover:text-#52BF5E" />
</n-button>
</div>
</n-space>

2
src/views/component/table/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="h-full overflow-hidden">
<n-card title="表格" class="h-full shadow-sm rounded-16px">
<n-space :vertical="true">
<n-space>

4
src/views/dashboard/analysis/components/bottom-part/index.vue
View File

@ -1,14 +1,14 @@
<template>
<n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
<n-grid-item span="0:24 640:24 1024:8">
<n-card title="时间线" :bordered="false" class="rounded-16px shadow-sm">
<n-card title="时间线" :bordered="false" class="h-full rounded-16px shadow-sm">
<n-timeline>
<n-timeline-item v-for="item in timelines" :key="item.type" v-bind="item" />
</n-timeline>
</n-card>
</n-grid-item>
<n-grid-item span="0:24 640:24 1024:16">
<n-card title="表格" :bordered="false" class="rounded-16px shadow-sm">
<n-card title="表格" :bordered="false" class="h-full rounded-16px shadow-sm">
<n-data-table size="small" :columns="columns" :data="tableData" />
</n-card>
</n-grid-item>

6
src/views/dashboard/analysis/components/top-chart/index.vue
View File

@ -4,15 +4,15 @@
<n-card :bordered="false" class="rounded-16px shadow-sm">
<div class="w-full h-360px py-12px">
<h3 class="text-16px font-bold">Dashboard</h3>
<p class="text-[#aaa]">Overview Of Lasted Month</p>
<p class="text-#aaa">Overview Of Lasted Month</p>
<h3 class="pt-32px text-24px font-bold">
<count-to prefix="$" :start-value="0" :end-value="7754" />
</h3>
<p class="text-[#aaa]">Current Month Earnings</p>
<p class="text-#aaa">Current Month Earnings</p>
<h3 class="pt-32px text-24px font-bold">
<count-to :start-value="0" :end-value="1234" />
</h3>
<p class="text-[#aaa]">Current Month Sales</p>
<p class="text-#aaa">Current Month Sales</p>
<n-button class="mt-24px whitespace-pre-wrap" type="primary">Last Month Summary</n-button>
</div>
</n-card>

2
src/views/dashboard/workbench/components/workbench-header/index.vue
View File

@ -5,7 +5,7 @@
<icon-local-avatar class="text-70px" />
<div class="pl-12px">
<h3 class="text-18px font-semibold">早安，{{ auth.userInfo.userName }}, 今天又是充满活力的一天！</h3>
<p class="leading-30px text-[#999]">今日多云转晴，20℃ - 25℃！</p>
<p class="leading-30px text-#999">今日多云转晴，20℃ - 25℃！</p>
</div>
</div>
<n-space :size="24" :wrap="false">

2
src/views/dashboard/workbench/components/workbench-main/components/shortcuts-card.vue
View File

@ -1,6 +1,6 @@
<template>
<div
class="flex-col-center h-120px p-12px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer"
class="flex-col-center h-120px p-12px border-1px border-#efeff5 dark:border-#ffffff17 rounded-4px hover:shadow-sm cursor-pointer"
>
<svg-icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
<p class="py-8px text-16px">{{ label }}</p>

4
src/views/dashboard/workbench/components/workbench-main/components/technology-card.vue
View File

@ -1,13 +1,13 @@
<template>
<div
class="h-120px p-4px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer"
class="h-120px p-4px border-1px border-#efeff5 dark:border-#ffffff17 rounded-4px hover:shadow-sm cursor-pointer"
@click="handleOpenSite"
>
<header class="flex-y-center">
<svg-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>
<p class="py-8px h-56px text-#999">{{ description }}</p>
<div class="flex justify-end">
<span>{{ author }}</span>
</div>

54
src/views/management/user/index.vue
View File

@ -1,31 +1,33 @@
<template>
<n-card title="用户管理" :bordered="false" class="rounded-16px shadow-sm">
<n-space class="pb-12px" justify="space-between">
<n-space>
<n-button type="primary" @click="handleAddTable">
<icon-ic-round-plus class="mr-4px text-20px" />
新增
</n-button>
<n-button type="error">
<icon-ic-round-delete class="mr-4px text-20px" />
删除
</n-button>
<n-button type="success">
<icon-uil:export class="mr-4px text-20px" />
导出Excel
</n-button>
<div class="h-full overflow-hidden">
<n-card title="用户管理" :bordered="false" class="rounded-16px shadow-sm">
<n-space class="pb-12px" justify="space-between">
<n-space>
<n-button type="primary" @click="handleAddTable">
<icon-ic-round-plus class="mr-4px text-20px" />
新增
</n-button>
<n-button type="error">
<icon-ic-round-delete class="mr-4px text-20px" />
删除
</n-button>
<n-button type="success">
<icon-uil:export class="mr-4px text-20px" />
导出Excel
</n-button>
</n-space>
<n-space align="center" :size="18">
<n-button size="small" type="primary" @click="getTableData">
<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
刷新表格
</n-button>
<column-setting v-model:columns="columns" />
</n-space>
</n-space>
<n-space align="center" :size="18">
<n-button size="small" type="primary" @click="getTableData">
<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
刷新表格
</n-button>
<column-setting v-model:columns="columns" />
</n-space>
</n-space>
<n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" />
<table-action-modal v-model:visible="visible" :type="modalType" :edit-data="editData" />
</n-card>
<n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" />
<table-action-modal v-model:visible="visible" :type="modalType" :edit-data="editData" />
</n-card>
</div>
</template>
<script setup lang="tsx">

2
src/views/plugin/swiper/index.vue
View File

@ -11,7 +11,7 @@
<h3 class="py-24px text-24px font-bold">{{ item.label }}</h3>
<swiper v-bind="item.options">
<swiper-slide v-for="i in 5" :key="i">
<div class="flex-center h-240px border-1px border-[#999] text-18px font-bold">Slide{{ i }}</div>
<div class="flex-center h-240px border-1px border-#999 text-18px font-bold">Slide{{ i }}</div>
</swiper-slide>
</swiper>
</div>