go-pkg/wireguard-dashboard-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

refactor: 规范化调整.vue文件结构及命名

Browse Source
This commit is contained in:
张传龙 2022-04-03 19:45:39 +08:00
parent 9c5f4eaa3d
commit acb47a17b4
19 changed files with 130 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.vue
View File

@ -1,15 +1,15 @@
<script setup>
import AppProvider from '@/components/AppProvider/index.vue'
</script>
<template>
<app-provider>
<AppProvider>
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>
</app-provider>
</AppProvider>
</template>
<script setup>
import AppProvider from '@/components/AppProvider/index.vue'
</script>
<style lang="scss">
#app {
height: 100%;

4
src/components/AppProvider/DialogContent.vue
View File

@ -1,3 +1,5 @@
<template></template>
<script setup>
import { isNullOrUndef } from '@/utils/is'
import { useDialog } from 'naive-ui'
@ -48,5 +50,3 @@ Object.defineProperty(window, '$dialog', {
writable: false,
})
</script>
<template></template>

4
src/components/AppProvider/LoadingBar.vue
View File

@ -1,3 +1,5 @@
<template></template>
<script setup>
import { useLoadingBar } from 'naive-ui'
window['$loadingBar'] = useLoadingBar()
@ -6,5 +8,3 @@ Object.defineProperty(window, '$loadingBar', {
writable: false,
})
</script>
<template></template>

4
src/components/AppProvider/MessageContent.vue
View File

@ -1,3 +1,5 @@
<template></template>
<script setup>
import { useMessage } from 'naive-ui'
@ -68,5 +70,3 @@ Object.defineProperty(window, '$message', {
writable: false,
})
</script>
<template></template>

30
src/components/AppProvider/index.vue
View File

@ -1,3 +1,18 @@
<template>
<n-config-provider :theme-overrides="appStore.themeOverrides">
<n-loading-bar-provider>
<LoadingBar />
<n-dialog-provider>
<DialogContent />
<n-message-provider>
<MessageContent />
<slot></slot>
</n-message-provider>
</n-dialog-provider>
</n-loading-bar-provider>
</n-config-provider>
</template>
<script setup>
import MessageContent from './MessageContent.vue'
import DialogContent from './DialogContent.vue'
@ -6,18 +21,3 @@ import LoadingBar from './LoadingBar.vue'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
</script>
<template>
<n-config-provider :theme-overrides="appStore.themeOverrides">
<n-loading-bar-provider>
<loading-bar />
<n-dialog-provider>
<dialog-content />
<n-message-provider>
<message-content />
<slot></slot>
</n-message-provider>
</n-dialog-provider>
</n-loading-bar-provider>
</n-config-provider>
</template>

16
src/layout/components/header/BreadCrumb.vue
View File

@ -1,3 +1,11 @@
<template>
<n-breadcrumb>
<n-breadcrumb-item v-for="item in currentRoute.matched" :key="item.path" @click="handleBreadClick(item.path)">
{{ item.meta.title }}
</n-breadcrumb-item>
</n-breadcrumb>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
@ -8,11 +16,3 @@ function handleBreadClick(path) {
router.push(path)
}
</script>
<template>
<n-breadcrumb>
<n-breadcrumb-item v-for="item in currentRoute.matched" :key="item.path" @click="handleBreadClick(item.path)">
{{ item.meta.title }}
</n-breadcrumb-item>
</n-breadcrumb>
</template>

18
src/layout/components/header/HeaderAction.vue
View File

@ -1,3 +1,12 @@
<template>
<n-dropdown :options="options" @select="handleSelect">
<div class="avatar">
<img :src="userStore.avatar" />
<span>{{ userStore.name }}</span>
</div>
</n-dropdown>
</template>
<script setup>
import { useUserStore } from '@/store/modules/user'
import { useRouter } from 'vue-router'
@ -71,15 +80,6 @@ function switchRole() {
}
</script>
<template>
<n-dropdown :options="options" @select="handleSelect">
<div class="avatar">
<img :src="userStore.avatar" />
<span>{{ userStore.name }}</span>
</div>
</n-dropdown>
</template>
<style lang="scss" scoped>
.avatar {
display: flex;

14
src/layout/components/header/index.vue
View File

@ -1,15 +1,15 @@
<template>
<header class="header">
<BreadCrumb />
<HeaderAction />
</header>
</template>
<script setup>
import BreadCrumb from './BreadCrumb.vue'
import HeaderAction from './HeaderAction.vue'
</script>
<template>
<header class="header">
<bread-crumb />
<header-action />
</header>
</template>
<style lang="scss" scoped>
.header {
padding: 0 24px;

12
src/layout/components/sidebar/SideLogo.vue
View File

@ -1,12 +1,7 @@
<script setup>
import { LastfmSquare } from '@vicons/fa'
const title = import.meta.env.VITE_APP_TITLE
</script>
<template>
<div class="logo">
<n-icon size="36" color="#316c72">
<lastfm-square />
<LastfmSquare />
</n-icon>
<router-link to="/">
<n-gradient-text type="primary">{{ title }}</n-gradient-text>
@ -14,6 +9,11 @@ const title = import.meta.env.VITE_APP_TITLE
</div>
</template>
<script setup>
import { LastfmSquare } from '@vicons/fa'
const title = import.meta.env.VITE_APP_TITLE
</script>
<style lang="scss" scoped>
.logo {
height: 64px;

24
src/layout/components/sidebar/SideMenu.vue
View File

@ -1,3 +1,15 @@
<template>
<n-menu
class="side-menu"
accordion
:indent="12"
:root-indent="12"
:options="menuOptions"
:value="(currentRoute.meta && currentRoute.meta.activeMenu) || currentRoute.name"
@update:value="handleMenuSelect"
/>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { computed, h } from 'vue'
@ -82,18 +94,6 @@ function handleMenuSelect(key, item) {
}
</script>
<template>
<n-menu
class="side-menu"
accordion
:indent="12"
:root-indent="12"
:options="menuOptions"
:value="(currentRoute.meta && currentRoute.meta.activeMenu) || currentRoute.name"
@update:value="handleMenuSelect"
/>
</template>
<style lang="scss">
.n-menu {
margin-top: 10px;

4
src/layout/components/sidebar/index.vue
View File

@ -4,6 +4,6 @@ import SideMenu from './SideMenu.vue'
</script>
<template>
<side-logo />
<side-menu />
<SideLogo />
<SideMenu />
</template>

6
src/layout/index.vue
View File

@ -8,14 +8,14 @@ import AppMain from './components/AppMain.vue'
<div class="layout">
<n-layout has-sider position="absolute">
<n-layout-sider :width="200" :collapsed-width="0" :native-scrollbar="false">
<side-menu />
<SideMenu />
</n-layout-sider>
<n-layout>
<n-layout-header>
<app-header />
<AppHeader />
</n-layout-header>
<n-layout position="absolute" style="top: 60px; background-color: #f5f6fb" :native-scrollbar="false">
<app-main />
<AppMain />
</n-layout>
</n-layout>
</n-layout>

10
src/views/error-page/404.vue
View File

@ -1,8 +1,3 @@
<script setup>
import { useRouter } from 'vue-router'
const { replace } = useRouter()
</script>
<template>
<div class="page-404">
<n-result status="404" description="抱歉，您访问的页面不存在。">
@ -16,6 +11,11 @@ const { replace } = useRouter()
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const { replace } = useRouter()
</script>
<style lang="scss" scoped>
.page-404 {
height: 100%;

2
src/views/examples/table/post/post-create.vue
View File

@ -4,7 +4,7 @@
<input v-model="post.title" type="text" placeholder="输入文章标题..." class="title" />
<n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">保存</n-button>
</div>
<md-editor v-model="post.content" style="height: calc(100vh - 140px)" />
<MdEditor v-model="post.content" style="height: calc(100vh - 140px)" />
</div>
</template>

60
src/views/login/index.vue
View File

@ -1,3 +1,33 @@
<template>
<div class="login-page">
<div class="form-wrapper">
<h2 class="title">{{ title }}</h2>
<div class="form-item" mt-20>
<input
v-model="loginInfo.name"
autofocus
type="text"
class="input"
placeholder="username"
@keydown.enter="handleLogin"
/>
</div>
<div class="form-item" mt-20>
<input
v-model="loginInfo.password"
type="password"
class="input"
placeholder="password"
@keydown.enter="handleLogin"
/>
</div>
<div class="form-item" mt-20>
<button class="submit-btn" @click="handleLogin">登录</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref, unref } from 'vue'
import { useRouter } from 'vue-router'
@ -53,36 +83,6 @@ async function handleLogin() {
}
</script>
<template>
<div class="login-page">
<div class="form-wrapper">
<h2 class="title">{{ title }}</h2>
<div class="form-item" mt-20>
<input
v-model="loginInfo.name"
autofocus
type="text"
class="input"
placeholder="username"
@keydown.enter="handleLogin"
/>
</div>
<div class="form-item" mt-20>
<input
v-model="loginInfo.password"
type="password"
class="input"
placeholder="password"
@keydown.enter="handleLogin"
/>
</div>
<div class="form-item" mt-20>
<button class="submit-btn" @click="handleLogin">登录</button>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@property --perA {
syntax: '<percentage>';

4
src/views/redirect/index.vue
View File

@ -1,3 +1,5 @@
<template></template>
<script setup>
import { useRouter } from 'vue-router'
@ -19,5 +21,3 @@ replace({
query,
})
</script>
<template></template>

12
src/views/test-page/TestDialog.vue
View File

@ -1,3 +1,9 @@
<template>
<div p24>
<n-button type="error" @click="handleDelete">删除</n-button>
</div>
</template>
<script setup name="TestDialog">
const handleDelete = function () {
$dialog.confirm({
@ -11,9 +17,3 @@ const handleDelete = function () {
})
}
</script>
<template>
<div p24>
<n-button type="error" @click="handleDelete">删除</n-button>
</div>
</template>

12
src/views/test-page/TestKeepAlive.vue
View File

@ -1,3 +1,9 @@
<template>
<div p24>
<n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 注意查看提示语 </n-gradient-text>
</div>
</template>
<!--使用keep-alive须设置name，注意请与对应的路由的name保持一致，方便统一处理-->
<script setup name="TEST-KEEP-ALIVE">
import { onMounted, onActivated, onDeactivated } from 'vue'
@ -14,9 +20,3 @@ onDeactivated(() => {
$message.success('触发onDeactivated')
})
</script>
<template>
<div p24>
<n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 注意查看提示语 </n-gradient-text>
</div>
</template>

12
src/views/test-page/TestMessage.vue
View File

@ -1,3 +1,9 @@
<template>
<div p24>
<n-button type="primary" @click="handleLogin">点击登陆</n-button>
</div>
</template>
<script setup>
function handleLogin() {
$message.loading('登陆中...')
@ -10,9 +16,3 @@ function handleLogin() {
}, 2000)
}
</script>
<template>
<div p24>
<n-button type="primary" @click="handleLogin">点击登陆</n-button>
</div>
</template>