github/basic
1
0
Fork 1
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 11:34:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

stylelint 相关依赖升级，根据规则调整部分代码

Browse Source
This commit is contained in:
hooray
2021-10-23 20:58:51 +08:00
parent ec4ac08055
commit 406100f7ff
17 changed files with 1372 additions and 567 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.stylelintrc
+5 -1
View File
@@ -20,6 +20,10 @@
"no-descending-specificity": null,
"selector-pseudo-class-no-unknown": null,
"property-no-unknown": null,
"font-family-no-missing-generic-family-keyword": null
"font-family-no-missing-generic-family-keyword": null,
"selector-id-pattern": null,
"selector-class-pattern": null,
"scss/no-global-function-names": null,
"max-line-length": null
}
}
package.json
+6 -6
View File
@@ -37,7 +37,7 @@
"@vue/compiler-sfc": "^3.2.20",
"eslint": "^8.1.0",
"eslint-plugin-vue": "^7.20.0",
"http-server": "^13.0.2",
"http-server": "^14.0.0",
"husky": "^7.0.4",
"lint-staged": "^11.2.3",
"plop": "^2.7.6",
@@ -46,13 +46,13 @@
"stylelint": "^14.0.0",
"stylelint-config-html": "^0.0.2",
"stylelint-config-recommended": "^6.0.0",
"stylelint-config-recommended-scss": "^4.3.0",
"stylelint-config-recommended-scss": "^5.0.0",
"stylelint-config-recommended-vue": "^0.0.5",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.21.0",
"stylelint-config-standard": "^23.0.0",
"stylelint-scss": "^4.0.0",
"svgo": "^2.7.0",
"unplugin-auto-import": "^0.4.12",
"unplugin-vue-components": "^0.15.6",
"unplugin-vue-components": "^0.16.0",
"vite": "^2.6.10",
"vite-plugin-banner": "^0.1.3",
"vite-plugin-compression": "^0.3.5",
@@ -62,6 +62,6 @@
"vite-plugin-spritesmith": "^0.1.1",
"vite-plugin-svg-icons": "^1.0.5",
"vite-plugin-vue-setup-extend": "^0.1.0",
"vue-eslint-parser": "^7.11.0"
"vue-eslint-parser": "^8.0.0"
}
}
pnpm-lock.yaml
Generated
+1292 -500
View File
File diff suppressed because it is too large Load Diff
src/assets/styles/globals.scss
+8 -8
View File
@@ -4,13 +4,13 @@
height: 13px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4);
background-color: rgb(0 0 0 / 40%);
background-clip: padding-box;
border: 3px solid transparent;
border-radius: 7px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.5);
background-color: rgb(0 0 0 / 50%);
}
::-webkit-scrollbar-track {
background-color: transparent;
@@ -26,7 +26,7 @@ body {
margin: 0;
color: #333;
box-sizing: border-box;
font-family: Lato, PingFang SC, Microsoft YaHei, sans-serif;
font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
-webkit-tap-highlight-color: transparent;
&.hidden {
overflow: hidden;
@@ -46,8 +46,8 @@ body {
[data-fixed-calc-width] {
transform: translateX(-50%) translateX(division($g-main-sidebar-width, 2)) translateX(division($g-sub-sidebar-width, 2));
}
&[data-menu-mode=head],
&[data-menu-mode=single] {
&[data-menu-mode="head"],
&[data-menu-mode="single"] {
[data-fixed-calc-width] {
width: calc(100% - #{$g-sub-sidebar-width});
transform: translateX(-50%) translateX(division($g-sub-sidebar-width, 2));
@@ -59,15 +59,15 @@ body {
width: calc(100% - #{$g-main-sidebar-width} - 64px);
transform: translateX(-50%) translateX(division($g-main-sidebar-width, 2)) translateX(32px);
}
&[data-menu-mode=head],
&[data-menu-mode=single] {
&[data-menu-mode="head"],
&[data-menu-mode="single"] {
[data-fixed-calc-width] {
width: calc(100% - 64px);
transform: translateX(-50%) translateX(32px);
}
}
}
[data-mode=mobile] {
[data-mode="mobile"] {
[data-fixed-calc-width] {
width: 100% !important;
transform: translateX(-50%) !important;
src/assets/styles/resources/utils.scss
+7 -7
View File
@@ -1,4 +1,4 @@
@use 'sass:math';
@use "sass:math";
// @mixin 通过 @include 调用使用
// % 通过 @extend 调用使用
@@ -8,13 +8,13 @@
// 文字超出隐藏，默认为单行超出隐藏，可设置多行
@mixin text-overflow($line: 1, $fixed-width: true) {
@if ($line==1 and $fixed-width==true) {
@if ($line == 1 and $fixed-width == true) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@else {
display: -webkit-box;
display: box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
@@ -24,15 +24,15 @@
// 定位居中，默认水平居中，可选择垂直居中，或者水平垂直都居中
@mixin position-center($type: x) {
position: absolute;
@if ($type==x) {
@if ($type == x) {
left: 50%;
transform: translateX(-50%);
}
@if ($type==y) {
@if ($type == y) {
top: 50%;
transform: translateY(-50%);
}
@if ($type==xy) {
@if ($type == xy) {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
@@ -50,7 +50,7 @@
zoom: 1;
&::before,
&::after {
content: '';
content: "";
display: block;
clear: both;
}
src/components/Copyright/index.vue
+1 -1
View File
@@ -9,7 +9,7 @@
<style lang="scss" scoped>
footer {
margin: 40px 0 20px 0;
margin: 40px 0 20px;
line-height: 20px;
text-align: center;
color: #808695;
src/components/ImageUpload/index.vue
+5 -5
View File
@@ -154,13 +154,13 @@ function onSuccess(res) {
.image {
position: relative;
.mask {
opacity: 0;
opacity: 0%;
position: absolute;
top: 0;
width: 100%;
height: 100%;
font-size: 24px;
background-color: rgba(0, 0, 0, 0.5);
background-color: rgb(0 0 0 / 50%);
transition: all 0.3s;
.actions {
width: 100px;
@@ -187,7 +187,7 @@ function onSuccess(res) {
}
}
&:hover .mask {
opacity: 1;
opacity: 100%;
}
}
:deep(.el-upload) {
@@ -214,13 +214,13 @@ function onSuccess(res) {
position: absolute;
top: 0;
&::after {
content: '';
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.2);
background-color: rgb(0 0 0 / 20%);
}
.el-progress {
z-index: 1;
src/components/ImagesUpload/index.vue
+5 -5
View File
@@ -183,13 +183,13 @@ function onSuccess(res) {
display: block;
}
.mask {
opacity: 0;
opacity: 0%;
position: absolute;
top: 0;
width: 100%;
height: 100%;
font-size: 24px;
background-color: rgba(0, 0, 0, 0.5);
background-color: rgb(0 0 0 / 50%);
transition: all 0.3s;
.actions {
width: 100px;
@@ -216,7 +216,7 @@ function onSuccess(res) {
}
}
&:hover .mask {
opacity: 1;
opacity: 100%;
}
}
.images-upload {
@@ -243,13 +243,13 @@ function onSuccess(res) {
position: absolute;
top: 0;
&::after {
content: '';
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.2);
background-color: rgb(0 0 0 / 20%);
}
.el-progress {
z-index: 1;
src/layout/components/Search/index.vue
+8 -8
View File
@@ -217,14 +217,14 @@ function scrollTo(offsetTop) {
left: 0;
width: 100%;
height: 100%;
background-color: rgba($color: #000, $alpha: 0.5);
background-color: rgb(0 0 0 / 50%);
backdrop-filter: blur(10px);
transition: all 0.2s;
transform: translateZ(0);
opacity: 0;
opacity: 0%;
visibility: hidden;
&.searching {
opacity: 1;
opacity: 100%;
visibility: visible;
.container {
transform: initial;
@@ -267,7 +267,7 @@ function scrollTo(offsetTop) {
font-size: 12px;
font-weight: bold;
color: #333;
background-color: rgba($color: #fff, $alpha: 0.8);
background-color: rgb(255 255 255 / 80%);
box-shadow: inset 0 -2px #505e5f, inset 0 0 1px 1px #dec6c6, 0 1px 2px 1px #acb0c166;
}
}
@@ -291,8 +291,8 @@ function scrollTo(offsetTop) {
&.actived {
background-color: #dbe7f8;
.icon {
[class^=el-icon-],
[class^=ri-],
[class^="el-icon-"],
[class^="ri-"],
.svg-icon {
color: #409eff;
transform: scale(1.2);
@@ -312,8 +312,8 @@ function scrollTo(offsetTop) {
.icon {
flex: 0 0 66px;
text-align: center;
[class^=el-icon-],
[class^=ri-],
[class^="el-icon-"],
[class^="ri-"],
.svg-icon {
color: #999;
font-size: 20px;
src/layout/components/SidebarItem/index.vue
+1 -1
View File
@@ -89,7 +89,7 @@ function resolvePath(routePath) {
vertical-align: -0.25em;
transition: transform 0.3s;
color: unset;
&[class^=el-icon-],
&[class^="el-icon-"],
&[class*=" el-icon-"] {
vertical-align: middle;
}
src/layout/components/SubSidebar/index.vue
+1 -1
View File
@@ -38,7 +38,7 @@ function onSidebarScroll(e) {
}
.sub-sidebar-enter-from,
.sub-sidebar-leave-active {
opacity: 0;
opacity: 0%;
transform: translateY(30px) skewY(10deg);
}
.sub-sidebar-leave-active {
src/layout/components/ThemeSetting/index.vue
+5 -5
View File
@@ -345,7 +345,7 @@ onMounted(() => {
}
&-side {
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
@@ -354,7 +354,7 @@ onMounted(() => {
background-color: #222b45;
}
&::after {
content: '';
content: "";
position: absolute;
top: 0;
left: 10px;
@@ -365,7 +365,7 @@ onMounted(() => {
}
&-head {
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
@@ -374,7 +374,7 @@ onMounted(() => {
background-color: #222b45;
}
&::after {
content: '';
content: "";
position: absolute;
top: 10px;
left: 0;
@@ -385,7 +385,7 @@ onMounted(() => {
}
&-single {
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
src/layout/components/Topbar/index.vue
+2 -1
View File
@@ -93,6 +93,7 @@ function pathCompile(path) {
align-items: center;
padding-right: 50px;
overflow: hidden;
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 50px), transparent);
.sidebar-collapse {
display: flex;
@@ -136,7 +137,7 @@ function pathCompile(path) {
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
opacity: 0;
opacity: 0%;
transform: translateX(30px) skewX(-50deg);
}
</style>
src/layout/components/UserMenu/index.vue
+1
View File
@@ -130,6 +130,7 @@ function pro() {
font-weight: bold;
font-size: 14px;
background-image: linear-gradient(to right, #ffa237, #fc455d);
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
src/layout/index.vue
+12 -12
View File
@@ -89,8 +89,8 @@ function switchMenu(index) {
margin-left: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
}
// 没有主侧边栏
&[data-menu-mode=head],
&[data-menu-mode=single] {
&[data-menu-mode="head"],
&[data-menu-mode="single"] {
.sidebar-container {
width: $g-sub-sidebar-width;
}
@@ -108,8 +108,8 @@ function switchMenu(index) {
margin-left: calc(#{$g-main-sidebar-width} + 64px);
}
// 没有主侧边栏
&[data-menu-mode=head],
&[data-menu-mode=single] {
&[data-menu-mode="head"],
&[data-menu-mode="single"] {
.sidebar-container {
width: 64px;
}
@@ -118,7 +118,7 @@ function switchMenu(index) {
}
}
}
[data-mode=mobile] {
[data-mode="mobile"] {
.sidebar-container {
width: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
transform: translateX(-#{$g-main-sidebar-width}) translateX(-#{$g-sub-sidebar-width});
@@ -129,7 +129,7 @@ function switchMenu(index) {
.main-container {
margin-left: 0;
}
&[data-menu-mode=head] {
&[data-menu-mode="head"] {
.sidebar-container {
width: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
transform: translateX(-#{$g-main-sidebar-width}) translateX(-#{$g-sub-sidebar-width});
@@ -141,7 +141,7 @@ function switchMenu(index) {
margin-left: 0;
}
}
&[data-menu-mode=single] {
&[data-menu-mode="single"] {
.sidebar-container {
width: calc(#{$g-sub-sidebar-width});
transform: translateX(-#{$g-sub-sidebar-width});
@@ -183,14 +183,14 @@ function switchMenu(index) {
left: 0;
width: 100%;
height: 100%;
background-color: rgba($color: #000, $alpha: 0.5);
background-color: rgb(0 0 0 / 50%);
backdrop-filter: blur(2px);
transition: all 0.2s;
transform: translateZ(0);
opacity: 0;
opacity: 0%;
visibility: hidden;
&.show {
opacity: 1;
opacity: 100%;
visibility: visible;
}
}
@@ -250,11 +250,11 @@ header + .wrapper {
transition: 0.15s;
}
.main-enter-from {
opacity: 0;
opacity: 0%;
margin-left: -20px;
}
.main-leave-to {
opacity: 0;
opacity: 0%;
margin-left: 20px;
}
</style>
src/views/index.vue
+8 -1
View File
@@ -3,10 +3,17 @@
<page-header title="欢迎使用 Fantastic-admin（基础版）">
<template #content>
<div>
<div style="margin-bottom: 5px;">这是一款<b style="text-emphasis-style: '❤';">开箱即用</b>的中后台框架，同时它也经历过数十个真实项目的技术沉淀，确保框架在开发中可落地、可使用、可维护</div>
<div style="margin-bottom: 5px;">这是一款<b class="text-emphasis">开箱即用</b>的中后台框架，同时它也经历过数十个真实项目的技术沉淀，确保框架在开发中可落地、可使用、可维护</div>
<div>注：在作者就职的公司，本框架已在电商、直播、OA、ERP等多个不同领域的中后台系统中应用并稳定运行</div>
</div>
</template>
</page-header>
</div>
</template>
<style lang="scss" scoped>
.text-emphasis {
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-text-emphasis-style: "❤";
}
</style>
src/views/login.vue
+5 -5
View File
@@ -182,7 +182,7 @@ export default {
</script>
<style lang="scss" scoped>
[data-mode=mobile] {
[data-mode="mobile"] {
#login-box {
max-width: 80%;
.login-banner {
@@ -190,7 +190,7 @@ export default {
}
}
}
:deep(input[type=password]::-ms-reveal) {
:deep(input[type="password"]::-ms-reveal) {
display: none;
}
.bg-banner {
@@ -198,7 +198,7 @@ export default {
z-index: 0;
width: 100%;
height: 100%;
background-image: url(../assets/images/login-bg.jpg);
background-image: url("../assets/images/login-bg.jpg");
background-size: cover;
background-position: center center;
}
@@ -209,13 +209,13 @@ export default {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: rgba(255, 255, 255, 0.8);
background: rgb(255 255 255 / 80%);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 5px #999;
.login-banner {
width: 300px;
background-image: url(../assets/images/login-banner.jpg);
background-image: url("../assets/images/login-banner.jpg");
background-size: cover;
background-position: center center;
}