refactor(frontend): add eslint plugin vuetify

This commit is contained in:
AnnyTerfect 2023-11-02 21:50:11 +08:00
parent 549ad3add0
commit dbc870e867
20 changed files with 347 additions and 705 deletions

View File

@ -9,6 +9,7 @@ module.exports = {
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended",
"plugin:vuetify/base",
],
overrides: [],
parser: "vue-eslint-parser",

View File

@ -42,6 +42,7 @@
"eslint": "^8.43.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-vue": "^9.15.0",
"eslint-plugin-vuetify": "^2.0.5",
"prettier": "^2.8.8",
"sass": "^1.60.0",
"tsup": "^7.2.0",

View File

@ -20,10 +20,10 @@ defineExpose({
</script>
<template>
<v-dialog v-model="dialog" class="dialog-container">
<v-card class="dialog">
<v-card-title class="title">
<v-icon class="icon" icon="mdi-alert" color="red"></v-icon>
<v-dialog v-model="dialog" class="mx-auto w-1/1 max-w-600px">
<v-card class="mx-2">
<v-card-title class="flex m-2">
<v-icon class="mr-2" icon="mdi-alert" color="red"></v-icon>
<slot name="title" />
</v-card-title>
<v-card-text>
@ -37,21 +37,3 @@ defineExpose({
</v-card>
</v-dialog>
</template>
<style scoped lang="scss">
.dialog-container {
@apply mx-auto w-1/1 max-w-600px;
.dialog {
@apply mx-2;
.title {
@apply flex m-2;
.icon {
@apply mr-2;
}
}
}
}
</style>

View File

@ -14,10 +14,10 @@ defineExpose({
</script>
<template>
<v-dialog v-model="dialog" class="dialog-container">
<v-card class="dialog">
<v-card-title class="title">
<v-icon class="icon" icon="mdi-check-circle" color="success"></v-icon>
<v-dialog v-model="dialog" class="mx-auto w-1/1 max-w-600px">
<v-card class="mx-2">
<v-card-title class="flex m-2">
<v-icon class="mr-2" icon="mdi-check-circle" color="success"></v-icon>
<slot name="title" />
</v-card-title>
<svg class="m-auto w-120px h-120px" viewBox="0 0 200 200">
@ -43,25 +43,3 @@ defineExpose({
</v-card>
</v-dialog>
</template>
<style scoped lang="scss">
.dialog-container {
@apply mx-auto w-1/1 max-w-600px;
.dialog {
@apply mx-2;
.title {
@apply flex m-2;
.icon {
@apply mr-2;
}
}
}
}
.offset-animate {
stroke-dashoffset: 0;
}
</style>

View File

@ -129,7 +129,7 @@ function handleClickSetRole(id: string, role: number): void {
:key="i"
class="mx-1 !px-2 !min-w-0"
:color="i === page ? 'primary' : 'default'"
flat
variant="flat"
@click="() => jumpPage(i)"
>{{ i }}</v-btn
>

View File

@ -67,19 +67,19 @@ function handleClickSetRole(id: number, role: number): void {
<div v-if="items && items.length > 0" flat class="item">
<div class="row">
<div class="columns">
<div class="title">
<div class="my-title">
{{ t("AllUser.Username") }}
</div>
<div class="title">
<div class="my-title">
{{ t("AllUser.Email") }}
</div>
<div class="title">
<div class="my-title">
{{ t("AllUser.Verified") }}
</div>
<div class="title">
<div class="my-title">
{{ t("AllUser.Unverified") }}
</div>
<div class="title">
<div class="my-title">
{{ t("AllUser.IsAdmin") }}
</div>
</div>
@ -92,7 +92,7 @@ function handleClickSetRole(id: number, role: number): void {
<div v-for="(item, i) in items" :key="i" class="item">
<div class="row">
<div class="columns">
<div class="title">
<div class="my-title">
<span class="small-title">Username: </span>
<span class="link">
<router-link :to="{ name: 'UserLearnware', query: { user_id: item.id } }">
@ -100,17 +100,17 @@ function handleClickSetRole(id: number, role: number): void {
</router-link>
</span>
</div>
<div class="title"><span class="small-title">Email: </span>{{ item.email }}</div>
<div class="title">
<div class="my-title"><span class="small-title">Email: </span>{{ item.email }}</div>
<div class="my-title">
<span class="small-title">Verified: </span>{{ item.verified_learnware_count }}
</div>
<div class="title">
<div class="my-title">
<span class="small-title">Unverified: </span>{{ item.unverified_learnware_count }}
</div>
<div class="title flex">
<div class="my-title flex">
<span class="small-title mr-2">IsAdmin: </span>
<v-checkbox
class="title"
class="my-title"
:model-value="item.role >= 1"
:disabled="!enableSetRole || item.email === 'admin@localhost'"
@click.prevent="handleClickSetRole(item.id, item.role == 1 ? 0 : 1)"
@ -158,7 +158,7 @@ function handleClickSetRole(id: number, role: number): void {
.columns {
@apply grid sm: "grid-cols-[3fr,3fr,1fr,1fr,1fr]" w-1/1;
.title {
.my-title {
@apply xl: text-1rem lg:text-lg text-sm sm: (flex flex-col items-start justify-center);
.link {
@apply underline;

View File

@ -50,7 +50,7 @@ const filteredRoutes = computed<Route[]>(
</script>
<template>
<v-app-bar app flat class="bg-white border-b-1">
<v-app-bar flat class="bg-white border-b-1">
<div class="prepend">
<v-app-bar-nav-icon
v-if="['xs', 'sm'].includes(display.name.value)"

View File

@ -54,7 +54,7 @@ const filteredRoutes = computed(() => {
</script>
<template>
<v-navigation-drawer v-model="drawer" app clipped>
<v-navigation-drawer v-model="drawer">
<!--v-list navigation from router-->
<v-list>
<h1 class="ma-4">Pages</h1>

View File

@ -22,7 +22,7 @@ defineExpose({
<template>
<v-dialog v-model="dialog" class="dialog-container">
<v-card class="dialog">
<v-card-title class="title">
<v-card-title class="my-title">
<v-icon class="icon" icon="mdi-alert" color="red"></v-icon>
<slot name="title" />
</v-card-title>
@ -45,7 +45,7 @@ defineExpose({
.dialog {
@apply mx-2;
.title {
.my-title {
@apply flex m-2;
.icon {

View File

@ -16,7 +16,7 @@ const { t } = useI18n();
</p>
</div>
<v-responsive class="mt-10 sm:shadow-md border-1" :aspect-ratio="96 / 55">
<v-img contain width="100%" :src="process" />
<v-img cover width="100%" :src="process" />
</v-responsive>
</div>
</template>

View File

@ -74,7 +74,7 @@ function handleClickDelete(id: string): void {
<template>
<v-card flat :density="greaterThanXs ? 'comfortable' : 'compact'" class="card py-2">
<v-card-title class="title flex" :class="item.username ? '' : 'items-center'">
<v-card-title class="my-title flex" :class="item.username ? '' : 'items-center'">
<v-avatar :size="greaterThanSm ? 'default' : 'small'" class="mr-2" rounded="0">
<component :is="avatar" :class="item.username ? 'w-1/1' : 'w-4/5'" class="opacity-70" />
</v-avatar>
@ -169,21 +169,21 @@ function handleClickDelete(id: string): void {
<div class="actions -mr-3 -mb-2">
<v-btn
v-if="isAdmin"
flat
variant="flat"
icon="mdi-pencil"
:size="greaterThanXs ? undefined : 'small'"
@click.stop="() => handleClickEdit(item.id)"
></v-btn>
<v-btn
v-if="showDownload"
flat
variant="flat"
icon="mdi-download"
:size="greaterThanXs ? undefined : 'small'"
@click.stop="() => downloadLearnwareSync(item.id)"
></v-btn>
<v-btn
v-if="isAdmin"
flat
variant="flat"
icon="mdi-delete"
:size="greaterThanXs ? undefined : 'small'"
@click.stop="handleClickDelete(item.id)"
@ -201,7 +201,7 @@ function handleClickDelete(id: string): void {
.first-row {
@apply flex justify-between items-start;
.title {
.my-title {
@apply xl: text-xl lg:text-lg text-1rem;
}
}

View File

@ -122,7 +122,7 @@ function handleClickDelete(id: string): void {
:key="i"
class="mx-1 !px-2 !min-w-0"
:color="i === page ? 'primary' : 'default'"
flat
variant="flat"
@click="() => jumpPage(i)"
>
{{ i }}

View File

@ -140,7 +140,12 @@ watch(
</template>
</v-virtual-scroll>
<div>
<v-btn block flat class="mt-1" @click="descriptionArray = [...descriptionArray, null]">
<v-btn
block
variant="flat"
class="mt-1"
@click="descriptionArray = [...descriptionArray, null]"
>
<v-icon size="large" color="#555">mdi-plus</v-icon>
</v-btn>
</div>

View File

@ -77,7 +77,7 @@ const files = computed({
</div>
<v-btn
v-if="files.length > 0"
flat
variant="flat"
icon="mdi-close"
@click.stop="() => (files = [])"
></v-btn>

View File

@ -59,7 +59,7 @@ watch(
<template>
<div class="grid-container">
<div class="title text-h6 !text-1rem">{{ title }}</div>
<div class="my-title text-h6 !text-1rem">{{ title }}</div>
<div
class="btn-container"
:style="{ gridTemplateColumns: `repeat(${realCols}, minmax(0, 1fr))` }"
@ -80,7 +80,7 @@ watch(
<style scoped lang="scss">
.grid-container {
.title {
.my-title {
@apply mt-7 mb-5;
}

View File

@ -27,7 +27,7 @@ defineProps({
<v-responsive class="responsive" :aspect-ratio="1 / 1">
<slot />
</v-responsive>
<div class="title">
<div class="my-title">
<span v-if="showTitle">{{ title }}</span>
</div>
</div>
@ -47,7 +47,7 @@ defineProps({
}
}
.title {
.my-title {
@apply lg:text-1rem sm:text-sm text-xs '!leading-5';
}
}

View File

@ -65,7 +65,7 @@ watch(
<template>
<div class="grid-container">
<div class="title text-h6 !text-1rem">{{ title }}</div>
<div class="my-title text-h6 !text-1rem">{{ title }}</div>
<div
class="btn-container"
:style="{ gridTemplateColumns: `repeat(${realCols}, minmax(0, 1fr))` }"
@ -84,7 +84,7 @@ watch(
<style scoped lang="scss">
.grid-container {
.title {
.my-title {
@apply mt-7 mb-5;
}

View File

@ -155,7 +155,7 @@ function deleteSelect(value: Scenario): void {
<template>
<div class="scenario-container" flat>
<div class="title text-h6 !text-1rem">
<div class="my-title text-h6 !text-1rem">
{{ t("Submit.SemanticSpecification.Scenario.Scenario") }}
</div>
@ -178,7 +178,7 @@ function deleteSelect(value: Scenario): void {
<style scoped lang="scss">
.scenario-container {
.title {
.my-title {
@apply mt-7 mb-5;
}

View File

@ -101,7 +101,7 @@ onActivated(() => {
{{ token }}
</div>
<v-spacer></v-spacer>
<v-btn flat icon="mdi-delete" @click="() => onDeleteClick(token)"></v-btn>
<v-btn variant="flat" icon="mdi-delete" @click="() => onDeleteClick(token)"></v-btn>
</v-card-text>
<v-card-actions>
<v-btn variant="outlined" @click="onGenerateClick">

File diff suppressed because it is too large Load Diff