forked from beimingwu/beimingwu
refactor(frontend): add eslint plugin vuetify
This commit is contained in:
parent
549ad3add0
commit
dbc870e867
|
@ -9,6 +9,7 @@ module.exports = {
|
|||
"eslint:recommended",
|
||||
"plugin:vue/vue3-essential",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:vuetify/base",
|
||||
],
|
||||
overrides: [],
|
||||
parser: "vue-eslint-parser",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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)"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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
Loading…
Reference in New Issue