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

feat: add page components

Browse Source
This commit is contained in:
张传龙
2022-08-28 19:37:23 +08:00
parent 841bab0d63
commit 079761b6fd
23 changed files with 272 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<template>
<div h-full flex>
<AppPage>
<n-result m-auto status="404" description="抱歉，您访问的页面不存在。">
<template #icon>
<img src="@/assets/images/404.webp" width="500" />
@@ -8,7 +8,7 @@
<n-button @click="replace('/')">返回首页</n-button>
</template>
</n-result>
</div>
</AppPage>
</template>
<script setup>

10
src/views/examples/table/post/PostCreate.vue
View File

@@ -1,5 +1,5 @@
<template>
<div p-24>
<CommonPage :show-header="false" title="32323">
<div h-60 pl-20 pr-20 flex items-center bg-white>
<input
v-model="post.title"
@@ -7,10 +7,12 @@
type="text"
placeholder="输入文章标题..."
/>
<n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">保存</n-button>
<n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">
<TheIcon v-if="!btnLoading" icon="line-md:confirm-circle" class="mr-5" :size="18" /> 保存
</n-button>
</div>
<MdEditor v-model="post.content" style="height: calc(100vh - 220px)" />
</div>
<MdEditor v-model="post.content" style="height: calc(100vh - 250px)" />
</CommonPage>
</template>
<script setup>

7
src/views/examples/table/post/index.vue
View File

@@ -1,8 +1,5 @@
<template>
<div p-24>
<div flex>
<n-button size="small" type="primary" @click="handleCreate">新建文章</n-button>
</div>
<CommonPage show-footer title="文章">
<n-data-table
mt-20
:loading="loading"
@@ -13,7 +10,7 @@
:row-key="(row) => row.id"
@update:checked-row-keys="handleCheck"
/>
</div>
</CommonPage>
</template>
<script setup>

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

@@ -1,12 +1,15 @@
<template>
<div class="cus-scroll h-full py-15 flex-col overflow-auto bg-cover" :style="{ backgroundImage: `url(${bgImg})` }">
<div m-auto p-15 f-c-c min-w-345 rounded-10 card-shadow bg-white dark:bg-dark bg-opacity-60>
<AppPage :show-footer="true" bg-cover :style="{ backgroundImage: `url(${bgImg})` }">
<div
style="transform: translateY(25px)"
class="m-auto p-15 f-c-c min-w-345 max-w-700 rounded-10 card-shadow bg-white bg-opacity-60"
>
<div w-380 hidden md:block px-20 py-35>
<img src="@/assets/images/login_banner.webp" w-full alt="login_banner" />
</div>
<div w-320 flex-col px-20 py-35>
<h5 f-c-c text-24 font-normal color="#6a6a6a"><icon-custom-logo mr-30 text-50 color-primary />{{ title }}</h5>
<h5 f-c-c text-24 font-normal color="#6a6a6a"><icon-custom-logo mr-10 text-50 color-primary />{{ title }}</h5>
<div mt-30>
<n-input
v-model:value="loginInfo.name"
@@ -39,8 +42,7 @@
</div>
</div>
</div>
<AppFooter />
</div>
</AppPage>
</template>
<script setup>

4
src/views/test-page/dialog/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div p24>
<CommonPage :show-header="false">
<n-button type="error" @click="handleDelete"> <icon-mi:delete mr-5 />删除</n-button>
</div>
</CommonPage>
</template>
<script setup name="TestDialog">

20
src/views/test-page/keep-alive/index.vue
View File

@@ -1,20 +0,0 @@
<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="TestKeepAlive">
onMounted(() => {
$message.success('触发onMounted')
})
onActivated(() => {
$message.success('触发onActivated')
})
onDeactivated(() => {
$message.success('触发onDeactivated')
})
</script>

4
src/views/test-page/message/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<div p24>
<CommonPage title="我是自定义Title">
<n-button type="primary" @click="handleLogin">
<icon-mdi:login mr-5 />
登陆
</n-button>
</div>
</CommonPage>
</template>
<script setup>

10
src/views/test-page/route.js
View File

@@ -38,15 +38,5 @@ export default {
icon: 'material-symbols:auto-awesome-outline-rounded',
},
},
{
name: 'TestKeepAlive',
path: 'keep-alive',
component: () => import('./keep-alive/index.vue'),
meta: {
title: '测试Keep-Alive',
keepAlive: true,
icon: 'material-symbols:auto-awesome-outline-rounded',
},
},
],
}

88
src/views/test-page/unocss/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div p-24>
<CommonPage show-footer>
<p>
文档：<a hover-decoration-underline c-blue href="https://uno.antfu.me/" target="_blank">https://uno.antfu.me/</a>
</p>
@@ -10,59 +10,57 @@
</a>
</p>
<div flex mt-20>
<div flex p-20 rounded-5 bg="#fff">
<div text-20 font-600>Flex布局</div>
<div flex w-360 flex-wrap justify-around ml-15 p-10>
<div w-50 h-50 b-1 rounded-5 f-c-c p-10 m-20>
<div f-c-c mt-20 w-350 rounded-10 b-1 bc-ccc>
<div flex w-360 flex-wrap justify-around p-10>
<div w-50 h-50 b-1 rounded-5 f-c-c p-10 m-20>
<span w-6 h-6 rounded-3 bg-black></span>
</div>
<div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black self-end></span>
</div>
<div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black self-center></span>
<span w-6 h-6 rounded-3 bg-black self-end></span>
</div>
<div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
<div flex-col justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span>
</div>
<div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
<div flex-col justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black self-end></span>
</div>
<div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black self-center></span>
<span w-6 h-6 rounded-3 bg-black self-end></span>
</div>
<div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
<div flex-col justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span>
</div>
<div flex-col justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span>
</div>
</div>
<div w-50 h-50 b-1 rounded-5 f-c-c flex-col p-10 m-20>
<div flex w-full justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span>
</div>
</div>
<div w-50 h-50 b-1 rounded-5 f-c-c flex-col p-10 m-20>
<div flex w-full justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span>
<div flex w-full justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span>
</div>
</div>
<div w-50 h-50 b-1 rounded-5 flex-col justify-between p-10 m-20>
<div flex w-full justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span>
</div>
<div flex w-full justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span>
</div>
<div flex w-full justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span>
</div>
<span w-6 h-6 rounded-3 bg-black></span>
<div flex w-full justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span>
</div>
</div>
<div w-50 h-50 b-1 rounded-5 flex-col justify-between p-10 m-20>
<div flex w-full justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span>
</div>
<div flex w-full justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span>
</div>
<div flex w-full justify-between>
<span w-6 h-6 rounded-3 bg-black></span>
<span w-6 h-6 rounded-3 bg-black></span>
</div>
</div>
</div>
</div>
</div>
<h2 font-normal text-18 text-center w-350 mt-10 color-gray-400>Flex 骰子</h2>
</CommonPage>
</template>

94
src/views/workbench/index.vue
View File

@@ -1,52 +1,54 @@
<template>
<div p-15>
<n-card rounded-10>
<div flex items-center>
<img rounded-full width="60" :src="userStore.avatar" />
<div ml-20>
<p text-16>Hello, {{ userStore.name }}</p>
<p mt-5 text-12 op-60>今天又是元气满满的一天</p>
<AppPage :show-footer="true">
<div flex-1>
<n-card rounded-10>
<div flex items-center>
<img rounded-full width="60" :src="userStore.avatar" />
<div ml-20>
<p text-16>Hello, {{ userStore.name }}</p>
<p mt-5 text-12 op-60>今天又是元气满满的一天</p>
</div>
<div ml-auto flex items-center>
<n-statistic label="待办" :value="4">
<template #suffix> / 10 </template>
</n-statistic>
<n-statistic label="Stars" w-100 ml-80>
<a href="https://github.com/zclzone/vue-naive-admin">
<img allt="stars" src="https://badgen.net/github/stars/zclzone/vue-naive-admin" />
</a>
</n-statistic>
<n-statistic label="Forks" w-100 ml-80>
<a href="https://github.com/zclzone/vue-naive-admin">
<img allt="forks" src="https://badgen.net/github/forks/zclzone/vue-naive-admin" />
</a>
</n-statistic>
</div>
</div>
<div ml-auto flex items-center>
<n-statistic label="待办" :value="4">
<template #suffix> / 10 </template>
</n-statistic>
<n-statistic label="Stars" w-100 ml-80>
<a href="https://github.com/zclzone/vue-naive-admin">
<img allt="stars" src="https://badgen.net/github/stars/zclzone/vue-naive-admin" />
</a>
</n-statistic>
<n-statistic label="Forks" w-100 ml-80>
<a href="https://github.com/zclzone/vue-naive-admin">
<img allt="forks" src="https://badgen.net/github/forks/zclzone/vue-naive-admin" />
</a>
</n-statistic>
</div>
</div>
</n-card>
</n-card>
<n-card title="项目" size="small" :segmented="true" mt-15 rounded-10>
<template #header-extra>
<n-button text type="primary">更多</n-button>
</template>
<div flex flex-wrap justify-between>
<n-card
v-for="i in 10"
:key="i"
class="w-300 flex-shrink-0 mt-10 mb-10 cursor-pointer"
hover:card-shadow
title="Vue Naive Admin"
size="small"
>
<p op-60>一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p>
</n-card>
<div w-300 h-0></div>
<div w-300 h-0></div>
<div w-300 h-0></div>
<div w-300 h-0></div>
</div>
</n-card>
</div>
<n-card title="项目" size="small" :segmented="true" mt-15 rounded-10>
<template #header-extra>
<n-button text type="primary">更多</n-button>
</template>
<div flex flex-wrap justify-between>
<n-card
v-for="i in 10"
:key="i"
class="w-300 flex-shrink-0 mt-10 mb-10 cursor-pointer"
hover:card-shadow
title="Vue Naive Admin"
size="small"
>
<p op-60>一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p>
</n-card>
<div w-300 h-0></div>
<div w-300 h-0></div>
<div w-300 h-0></div>
<div w-300 h-0></div>
</div>
</n-card>
</div>
</AppPage>
</template>
<script setup>