yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: style

pull/28/head
xingyu 2023-08-06 10:24:46 +08:00
parent 0078559e4b
commit db04d3a8b9
33 changed files with 89 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Application/src/AppLogo.vue
View File

@ -54,7 +54,7 @@ function goHome() {
transition: all 0.2s ease;
&.light {
border-bottom: 1px solid @border-color-base;
border-bottom: 1px solid var(--border-color);
}
&.collapsed-show-title {

6
src/components/Application/src/search/AppSearchFooter.vue
View File

@ -30,9 +30,9 @@ const { t } = useI18n()
height: 44px;
padding: 0 16px;
font-size: 12px;
color: #666;
background-color: @component-background;
border-top: 1px solid @border-color-base;
color: var(--text-color);
background-color: var(--component-background);
border-top: 1px solid var(--border-color);
border-radius: 0 0 16px 16px;
&-item {

4
src/components/Application/src/search/AppSearchModal.vue
View File

@ -163,7 +163,7 @@ function handleClose() {
flex-direction: column;
width: 632px;
margin: 0 auto auto;
background-color: @component-background;
background-color: var(--component-background);
border-radius: 16px;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
}
@ -223,7 +223,7 @@ function handleClose() {
font-size: 14px;
color: @text-color-base;
cursor: pointer;
background-color: @component-background;
background-color: var(--component-background);
border-radius: 4px;
box-shadow: 0 1px 3px 0 #d4d9e1;

4
src/components/CardList/src/CardList.vue
View File

@ -103,10 +103,10 @@ async function handleDelete(id) {
<template>
<div class="p-2">
<div class="p-4 mb-2 bg-white">
<div class="p-4 mb-2">
<BasicForm @register="registerForm" />
</div>
<div class="p-2 bg-white">
<div class="p-2">
<List :grid="{ gutter: 5, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: grid }" :data-source="data" :pagination="paginationProp">
<template #header>
<div class="flex justify-end space-x-2">

8
src/components/Container/src/collapse/CollapseContainer.vue
View File

@ -93,8 +93,8 @@ export default defineComponent({
@prefix-cls: ~'@{namespace}-collapse-container';
.@{prefix-cls} {
// background-color: @component-background;
border-radius: 2px;
background-color: var(--component-background);
border-radius: 6px;
transition: all 0.3s ease-in-out;
&__header {
@ -102,11 +102,11 @@ export default defineComponent({
align-items: center;
justify-content: space-between;
height: 32px;
border-bottom: 1px solid @border-color-light;
border-bottom: 1px solid var(--border-color);
}
&__footer {
border-top: 1px solid @border-color-light;
border-top: 1px solid var(--border-color);
}
&__action {

2
src/components/ContextMenu/src/ContextMenu.vue
View File

@ -175,7 +175,7 @@ export default defineComponent({
margin: 0;
list-style: none;
user-select: none;
background-color: @component-background;
background-color: var(--component-background);
background-clip: padding-box;
border: 1px solid rgb(0 0 0 / 8%);
border-radius: 0.25rem;

4
src/components/Cropper/src/CopperModal.vue
View File

@ -226,7 +226,7 @@ async function handleOk() {
height: 220px;
margin: 0 auto;
overflow: hidden;
border: 1px solid @border-color-base;
border: 1px solid var(--border-color);
border-radius: 50%;
img {
@ -241,7 +241,7 @@ async function handleOk() {
justify-content: space-around;
padding-top: 8px;
margin-top: 8px;
border-top: 1px solid @border-color-base;
border-top: 1px solid var(--border-color);
}
}
</style>

4
src/components/Cropper/src/CropperAvatar.vue
View File

@ -85,8 +85,8 @@ defineExpose({ openModal: openModal.bind(null, true), closeModal })
&-image-wrapper {
overflow: hidden;
cursor: pointer;
background: @component-background;
border: 1px solid @border-color-base;
background: var(--component-background);
border: 1px solid var(--border-color);
border-radius: 50%;
img {

2
src/components/Drawer/src/BasicDrawer.vue
View File

@ -170,7 +170,7 @@ function handleOk() {
.ant-drawer-body {
height: calc(100% - @header-height);
padding: 0;
// background-color: @component-background;
background-color: var(--component-background);
.scrollbar__wrap {
padding: 16px !important;

4
src/components/Drawer/src/components/DrawerFooter.vue
View File

@ -63,8 +63,8 @@ function handleClose() {
width: 100%;
padding: 0 12px 0 20px;
text-align: right;
// background-color: @component-background;
border-top: 1px solid @border-color-base;
background-color: var(--component-background);
border-top: 1px solid var(--border-color);
> * {
margin-right: 8px;

2
src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue
View File

@ -84,7 +84,7 @@ ul {
margin: 2.7px;
line-height: 20px;
cursor: move;
border: 1px solid @border-color;
border: 1px solid var(--border-color);
border-radius: 3px;
transition: all 0.3s;

2
src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue
View File

@ -113,7 +113,7 @@ export default defineComponent({
font-size: 16px;
line-height: @operating-area-height;
text-align: left;
border-bottom: 2px solid @border-color;
border-bottom: 2px solid var(--border-color);
a {
margin: 0 5px;

5
src/components/Page/src/PageFooter.vue
View File

@ -33,8 +33,9 @@ const { getCalcContentWidth } = useMenuSetting()
width: 100%;
padding: 0 24px;
line-height: 44px;
background-color: @component-background;
border-top: 1px solid @border-color-base;
color: var(--text-color);
background-color: var(--component-background);
border-top: 1px solid var(--border-color);
box-shadow:
0 -6px 16px -8px rgb(0 0 0 / 8%),
0 -9px 28px 0 rgb(0 0 0 / 5%),

8
src/components/Page/src/PageWrapper.vue
View File

@ -143,7 +143,7 @@ watch(
position: relative;
.@{prefix-cls}-content {
margin: 16px;
margin: 12px;
}
.ant-page-header {
@ -152,9 +152,9 @@ watch(
}
}
// &-content-bg {
// background-color: @component-background;
// }
&-content-bg {
background-color: var(--component-background);
}
&--dense {
.@{prefix-cls}-content {

20
src/components/Table/src/BasicTable.vue
View File

@ -312,8 +312,6 @@ emit('register', tableAction, formActions)
</template>
<style lang="less">
@border-color: #cecece4d;
@prefix-cls: ~'@{namespace}-basic-table';
[data-theme='dark'] {
@ -327,21 +325,15 @@ emit('register', tableAction, formActions)
max-width: 100%;
height: 100%;
&-row__striped {
td {
// background-color: @app-content-background;
}
}
&-form-container {
padding: 16px;
padding: 12px;
.ant-form {
width: 100%;
padding: 12px 10px 6px;
margin-bottom: 16px;
// background-color: @component-background;
border-radius: 2px;
margin-bottom: 12px;
background-color: var(--component-background);
border-radius: 6px;
}
}
@ -353,8 +345,8 @@ emit('register', tableAction, formActions)
.ant-table-wrapper {
padding: 6px;
// background-color: @component-background;
border-radius: 2px;
background-color: var(--component-background);
border-radius: 6px;
.ant-table-title {
min-height: 40px;

1
src/components/Table/src/components/TableHeader.vue
View File

@ -56,6 +56,7 @@ function handleColumnChange(data: ColumnChangeParam[]) {
flex: 1;
align-items: center;
justify-content: flex-end;
padding-top: 10px;
> * {
margin-right: 8px;

14
src/components/Tree/style/index.less
View File

@ -1,7 +1,8 @@
@tree-prefix-cls: ~"@{namespace}-tree";
.@{tree-prefix-cls} {
// background-color: @component-background;
background-color: var(--component-background);
border-radius: 6px;
.ant-tree-node-content-wrapper {
position: relative;
@ -47,15 +48,6 @@
}
&-header {
border-bottom: 1px solid @border-color-base;
border-bottom: 1px solid var(--border-color);
}
}
html[data-theme="dark"] {
.@{tree-prefix-cls} {
&-header {
background-color: #1f1f1f;
}
}
}

2
src/components/Upload/src/FileList.vue
View File

@ -98,7 +98,7 @@ export default defineComponent({
table,
td,
th {
border: 1px solid @border-color-base;
border: 1px solid var(--border-color);
}
}
</style>

1
src/design/index.less
View File

@ -24,6 +24,7 @@ body {
height: 100%;
overflow: visible;
overflow-x: hidden;
color: var(--text-color);
&.color-weak {
filter: invert(80%);

2
src/design/public.less
View File

@ -29,7 +29,7 @@
}
::-webkit-scrollbar-thumb:hover {
background-color: @border-color-dark;
background-color: var(--border-color);
}
// =================================

14
src/design/theme.less
View File

@ -1,8 +1,8 @@
.bg-white {
background-color: @component-background !important;
}
html[data-theme="light"] {
--component-background: #fff;
--text-color: rgb(0 0 0 0.85);
--border-color: #fff;
.text-secondary {
color: rgb(0 0 0 / 45%);
}
@ -27,7 +27,11 @@ html[data-theme="light"] {
}
}
[data-theme="dark"] {
html[data-theme="dark"] {
--component-background: rgb(0 0 0 75%);
--text-color: rgb(255 255 255 0.85);
--border-color: #b6b7b9;
.text-secondary {
color: #8b949e;
}

4
src/layouts/default/header/index.less
View File

@ -171,8 +171,8 @@
&--dark {
background-color: @header-dark-bg-color !important;
// border-bottom: 1px solid @border-color-base;
border-left: 1px solid @border-color-base;
border-bottom: 1px solid var(--border-color);
border-left: 1px solid var(--border-color);
.@{header-prefix-cls}-logo {
&:hover {
background-color: @header-dark-bg-hover-color;

2
src/layouts/default/sider/LayoutSider.vue
View File

@ -133,7 +133,7 @@ const getTrigger = h(LayoutTrigger)
.ant-layout-sider-trigger {
color: @text-color-base;
border-top: 1px solid @border-color-light;
border-top: 1px solid var(--border-color);
}
}

22
src/layouts/default/sider/MixSider.vue
View File

@ -67,18 +67,19 @@ export default defineComponent({
const getMenuStyle = computed((): CSSProperties => {
return {
width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
// eslint-disable-next-line @typescript-eslint/no-use-before-define
left: `${unref(getMixSideWidth)}px`,
}
})
const getIsFixed = computed(() => {
/* eslint-disable-next-line */
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
mixSideHasChildren.value = unref(childrenMenus).length > 0
const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren)
if (isFixed) {
/* eslint-disable-next-line */
if (isFixed)
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
openMenu.value = true
}
return isFixed
})
@ -392,25 +393,24 @@ export default defineComponent({
}
}
}
@border-color: @sider-dark-lighten-bg-color;
&.dark {
&.open {
// .@{prefix-cls}-logo {
// border-bottom: 1px solid @border-color;
// }
.@{prefix-cls}-logo {
border-bottom: 1px solid var(--sider-dark-lighten-bg-color);
}
> .scrollbar {
border-right: 1px solid @border-color;
border-right: 1px solid var(--sider-dark-lighten-bg-color);
}
}
.@{prefix-cls}-menu-list {
background-color: @sider-dark-bg-color;
background-color: var(--sider-dark-bg-color);
&__title {
color: @white;
border-bottom: none;
border-bottom: 1px solid @border-color;
border-bottom: 1px solid var(--sider-dark-lighten-bg-color);
}
}
}

48
src/layouts/default/tabs/index.less
View File

@ -1,37 +1,5 @@
@prefix-cls: ~"@{namespace}-multiple-tabs";
html[data-theme="dark"] {
// background-color: @component-background-dark;
.@{prefix-cls} {
.ant-tabs-tab {
border-bottom: none !important;
}
}
.ant-tabs-tab:not(.ant-tabs-tab-active) {
border: none !important;
&:hover {
color: inherit;
background-color: rgb(255 255 255/50%) !important;
}
}
}
html[data-theme="light"] {
background-color: @component-background;
.@{prefix-cls} {
.ant-tabs-tab:not(.ant-tabs-tab-active) {
border: none !important;
&:hover {
color: inherit;
background-color: #dee1e6;
}
}
}
}
.@{prefix-cls} {
z-index: 10;
height: @multiple-height;
@ -47,7 +15,7 @@ html[data-theme="light"] {
height: @multiple-height;
padding-left: 10px;
margin: 0;
// background-color: @component-background;
background-color: var(--component-background);
border: 0;
box-shadow: none;
@ -63,17 +31,17 @@ html[data-theme="light"] {
padding: 0 16px;
margin: 0 -14px 0 0 !important;
line-height: @multiple-height;
// color: @text-color-base;
// background-color: @component-background;
color: var(--text-color);
background-color: var(--component-background);
border-radius: 8px 8px 0 0;
/* stylelint-disable-next-line function-url-quotes */
mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
transition: padding 0.3s;
mask-size: 100% 100%;
// .ant-tabs-tab-btn {
// color: @text-color-base;
// }
.ant-tabs-tab-btn {
color: var(--text-color);
}
&:hover {
z-index: 2;
@ -201,10 +169,10 @@ html[data-theme="light"] {
width: 36px;
height: @multiple-height;
line-height: @multiple-height;
// color: @text-color-secondary;
color: var(--text-color-secondary);
text-align: center;
cursor: pointer;
border-left: 1px solid @border-color-base;
border-left: 1px solid var(--border-color);
&:hover {
color: @text-color-base;

2
src/views/base/iframe/index.vue
View File

@ -80,7 +80,7 @@ function hideLoading() {
width: 100%;
height: 100%;
overflow: hidden;
background-color: @component-background;
background-color: var(--component-background);
border: 0;
}
}

2
src/views/base/lock/LockPage.vue
View File

@ -62,7 +62,7 @@ function handleShowForm(show = false) {
<div
v-show="showDate"
:class="`${prefixCls}__unlock`"
class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2"
class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl flex-col cursor-pointer transform translate-x-1/2"
@click="handleShowForm(false)"
>
<LockOutlined />

3
src/views/base/login/Login.vue
View File

@ -29,7 +29,7 @@ const title = computed(() => globSetting?.title ?? '')
<div :class="prefixCls" class="relative w-full h-full px-4">
<div class="flex items-center absolute right-4 top-4">
<AppDarkModeToggle v-if="!sessionTimeout" class="enter-x mr-2" />
<AppLocalePicker v-if="!sessionTimeout && showLocale" class="text-white enter-x xl:text-gray-600" :show-text="false" />
<AppLocalePicker v-if="!sessionTimeout && showLocale" class="enter-x xl:text-gray-600" :show-text="false" />
</div>
<span class="-enter-x xl:hidden">
@ -203,7 +203,6 @@ html[data-theme='dark'] {
.ant-divider-inner-text {
font-size: 12px;
color: @text-color-secondary;
}
}
</style>

2
src/views/base/profile/index.vue
View File

@ -33,7 +33,7 @@ const tabBarStyle = { width: '220px' }
<style lang="less">
.account-setting {
margin: 12px;
background-color: @component-background;
background-color: var(--component-background);
.base-title {
padding-left: 0;

2
src/views/infra/codegen/components/FinishForm.vue
View File

@ -57,7 +57,7 @@ function handleGoList() {
<style lang="less" scoped>
.result-success {
padding: 48px 32px;
background-color: @component-background;
background-color: var(--component-background);
&__content {
padding: 24px 40px;

4
src/views/infra/webSocket/index.vue
View File

@ -58,7 +58,7 @@ function toggle() {
<template>
<PageWrapper title="WebSocket 示例">
<div class="flex">
<div class="w-1/3 bg-white p-4">
<div class="w-1/3 p-4">
<div class="flex items-center">
<span class="text-lg font-medium mr-4"> 连接状态: </span>
<Tag :color="getTagColor">
@ -89,7 +89,7 @@ function toggle() {
</a-button>
</div>
<div class="w-2/3 bg-white ml-4 p-4">
<div class="w-2/3 ml-4 p-4">
<span class="text-lg font-medium mr-4"> 消息记录: </span>
<hr class="my-4">

4
src/views/mp/components/WxNews/index.vue
View File

@ -130,10 +130,10 @@ async function handleDelete(id) {
<template>
<div class="p-2">
<div class="p-4 mb-2 bg-white">
<div class="p-4 mb-2">
<BasicForm @register="registerForm" />
</div>
<div class="p-2 bg-white">
<div class="p-2">
<List :grid="{ gutter: 5, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: grid }" :data-source="data" :pagination="paginationProp">
<template #header>
<div class="flex justify-end space-x-2">

14
src/views/system/operatelog/LogInfoModal.vue
View File

@ -1,10 +1,4 @@
<template>
<BasicModal v-bind="$attrs" title="操作日志详情" width="800px" @register="registerModalInner" @ok="closeModal">
<Description @register="registerDescription" />
</BasicModal>
</template>
<template setup lang="ts">
<script lang="ts" setup>
import { ref } from 'vue'
import { infoSchema } from './operateLog.data'
import { BasicModal, useModalInner } from '@/components/Modal'
@ -22,4 +16,10 @@ const [registerDescription] = useDescription({
schema: infoSchema,
data: logData,
})
</script>
<template>
<BasicModal v-bind="$attrs" title="操作日志详情" width="800px" @register="registerModalInner" @ok="closeModal">
<Description @register="registerDescription" />
</BasicModal>
</template>