refactor

2 files changed, 122 insertions, 140 deletions

diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index ab408b5008..f0641161be 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -1,7 +1,6 @@
 <template>
 <div
-	class="ncvczrfv"
-	:class="{ isSelected }"
+	:class="[$style.root, { [$style.isSelected]: isSelected }]"
 	draggable="true"
 	:title="title"
 	@click="onClick"
@@ -9,25 +8,27 @@
 	@dragstart="onDragstart"
 	@dragend="onDragend"
 >
-	<div v-if="$i?.avatarId == file.id" class="label">
-		<img src="/client-assets/label.svg"/>
-		<p>{{ i18n.ts.avatar }}</p>
-	</div>
-	<div v-if="$i?.bannerId == file.id" class="label">
-		<img src="/client-assets/label.svg"/>
-		<p>{{ i18n.ts.banner }}</p>
-	</div>
-	<div v-if="file.isSensitive" class="label red">
-		<img src="/client-assets/label-red.svg"/>
-		<p>{{ i18n.ts.nsfw }}</p>
-	</div>
+	<div style="pointer-events: none;">
+		<div v-if="$i?.avatarId == file.id" :class="[$style.label]">
+			<img :class="$style.labelImg" src="/client-assets/label.svg"/>
+			<p :class="$style.labelText">{{ i18n.ts.avatar }}</p>
+		</div>
+		<div v-if="$i?.bannerId == file.id" :class="[$style.label]">
+			<img :class="$style.labelImg" src="/client-assets/label.svg"/>
+			<p :class="$style.labelText">{{ i18n.ts.banner }}</p>
+		</div>
+		<div v-if="file.isSensitive" :class="[$style.label, $style.red]">
+			<img :class="$style.labelImg" src="/client-assets/label-red.svg"/>
+			<p :class="$style.labelText">{{ i18n.ts.nsfw }}</p>
+		</div>
 
-	<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
+		<MkDriveFileThumbnail :class="$style.thumbnail" :file="file" fit="contain"/>
 
-	<p class="name">
-		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
-		<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
-	</p>
+		<p :class="$style.name">
+			<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
+			<span v-if="file.name.lastIndexOf('.') != -1" style="opacity: 0.5;">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
+		</p>
+	</div>
 </div>
 </template>
 
@@ -88,20 +89,13 @@ function onDragend() {
 }
 </script>
 
-<style lang="scss" scoped>
-.ncvczrfv {
+<style lang="scss" module>
+.root {
 	position: relative;
 	padding: 8px 0 0 0;
 	min-height: 180px;
 	border-radius: 8px;
-
-	&, * {
-		cursor: pointer;
-	}
-
-	> * {
-		pointer-events: none;
-	}
+	cursor: pointer;
 
 	&:hover {
 		background: rgba(#000, 0.05);
@@ -165,82 +159,78 @@ function onDragend() {
 			color: #fff;
 		}
 	}
+}
+
+.label {
+	position: absolute;
+	top: 0;
+	left: 0;
+	pointer-events: none;
 
-	> .label {
+	&:before,
+	&:after {
+		content: "";
+		display: block;
 		position: absolute;
+		z-index: 1;
+		background: #0c7ac9;
+	}
+
+	&:before {
 		top: 0;
+		left: 57px;
+		width: 28px;
+		height: 8px;
+	}
+
+	&:after {
+		top: 57px;
 		left: 0;
-		pointer-events: none;
+		width: 8px;
+		height: 28px;
+	}
 
+	&.red {
 		&:before,
 		&:after {
-			content: "";
-			display: block;
-			position: absolute;
-			z-index: 1;
-			background: #0c7ac9;
-		}
-
-		&:before {
-			top: 0;
-			left: 57px;
-			width: 28px;
-			height: 8px;
-		}
-
-		&:after {
-			top: 57px;
-			left: 0;
-			width: 8px;
-			height: 28px;
-		}
-
-		&.red {
-			&:before,
-			&:after {
-				background: #c12113;
-			}
-		}
-
-		> img {
-			position: absolute;
-			z-index: 2;
-			top: 0;
-			left: 0;
-		}
-
-		> p {
-			position: absolute;
-			z-index: 3;
-			top: 19px;
-			left: -28px;
-			width: 120px;
-			margin: 0;
-			text-align: center;
-			line-height: 28px;
-			color: #fff;
-			transform: rotate(-45deg);
+			background: #c12113;
 		}
 	}
+}
 
-	> .thumbnail {
-		width: 110px;
-		height: 110px;
-		margin: auto;
-	}
+.labelImg {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+}
 
-	> .name {
-		display: block;
-		margin: 4px 0 0 0;
-		font-size: 0.8em;
-		text-align: center;
-		word-break: break-all;
-		color: var(--fg);
-		overflow: hidden;
+.labelText {
+	position: absolute;
+	z-index: 3;
+	top: 19px;
+	left: -28px;
+	width: 120px;
+	margin: 0;
+	text-align: center;
+	line-height: 28px;
+	color: #fff;
+	transform: rotate(-45deg);
+}
 
-		> .ext {
-			opacity: 0.5;
-		}
-	}
+.thumbnail {
+	width: 110px;
+	height: 110px;
+	margin: auto;
+}
+
+.name {
+	display: block;
+	margin: 4px 0 0 0;
+	font-size: 0.8em;
+	text-align: center;
+	word-break: break-all;
+	color: var(--fg);
+	overflow: hidden;
 }
 </style>
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index 156013b9aa..1969342402 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -1,7 +1,6 @@
 <template>
 <div
-	class="rghtznwe"
-	:class="{ draghover }"
+	:class="[$style.root, { [$style.draghover]: draghover }]"
 	draggable="true"
 	:title="title"
 	@click="onClick"
@@ -15,15 +14,15 @@
 	@dragstart="onDragstart"
 	@dragend="onDragend"
 >
-	<p class="name">
-		<template v-if="hover"><i class="ti ti-folder ti-fw"></i></template>
-		<template v-if="!hover"><i class="ti ti-folder ti-fw"></i></template>
+	<p :class="$style.name">
+		<template v-if="hover"><i :class="$style.icon" class="ti ti-folder ti-fw"></i></template>
+		<template v-if="!hover"><i :class="$style.icon" class="ti ti-folder ti-fw"></i></template>
 		{{ folder.name }}
 	</p>
-	<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
+	<p v-if="defaultStore.state.uploadFolder == folder.id" :class="$style.upload">
 		{{ i18n.ts.uploadFolder }}
 	</p>
-	<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
+	<button v-if="selectMode" class="_button" :class="[$style.checkbox, { [$style.checked]: isSelected }]" @click.prevent.stop="checkboxClicked"></button>
 </div>
 </template>
 
@@ -267,35 +266,14 @@ function onContextmenu(ev: MouseEvent) {
 }
 </script>
 
-<style lang="scss" scoped>
-.rghtznwe {
+<style lang="scss" module>
+.root {
 	position: relative;
 	padding: 8px;
 	height: 64px;
 	background: var(--driveFolderBg);
 	border-radius: 4px;
-
-	&, * {
-		cursor: pointer;
-	}
-
-	*:not(.checkbox) {
-		pointer-events: none;
-	}
-
-	> .checkbox {
-		position: absolute;
-		bottom: 8px;
-		right: 8px;
-		width: 16px;
-		height: 16px;
-		background: #fff;
-		border: solid 1px #000;
-
-		&.checked {
-			background: var(--accent);
-		}
-	}
+	cursor: pointer;
 
 	&.draghover {
 		&:after {
@@ -310,24 +288,38 @@ function onContextmenu(ev: MouseEvent) {
 			border-radius: 4px;
 		}
 	}
+}
 
-	> .name {
-		margin: 0;
-		font-size: 0.9em;
-		color: var(--desktopDriveFolderFg);
+.checkbox {
+	position: absolute;
+	bottom: 8px;
+	right: 8px;
+	width: 16px;
+	height: 16px;
+	background: #fff;
+	border: solid 1px #000;
 
-		> i {
-			margin-right: 4px;
-			margin-left: 2px;
-			text-align: left;
-		}
+	&.checked {
+		background: var(--accent);
 	}
+}
 
-	> .upload {
-		margin: 4px 4px;
-		font-size: 0.8em;
-		text-align: right;
-		color: var(--desktopDriveFolderFg);
-	}
+.name {
+	margin: 0;
+	font-size: 0.9em;
+	color: var(--desktopDriveFolderFg);
+}
+
+.icon {
+	margin-right: 4px;
+	margin-left: 2px;
+	text-align: left;
+}
+
+.upload {
+	margin: 4px 4px;
+	font-size: 0.8em;
+	text-align: right;
+	color: var(--desktopDriveFolderFg);
 }
 </style>