style: 统一核心应用组件和通用组件的代码块排布顺序
- 调整 App.vue 和 components/common/ 下所有组件的代码块顺序 - 统一为 template → script → style 的规范排布 - 符合项目 Vue3 组件文件结构规范 - 保持代码功能不变，仅调整结构
This commit is contained in:
Leo
parent
c18e1fcb94
commit
818226000e
@ -1,4 +1,5 @@
|
|||||||
<script setup lang="ts"></script>
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<n-el
|
<n-el
|
||||||
|
|||||||
@ -1,102 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { useAuthStore } from '@/store'
|
|
||||||
import { renderIcon } from '@/utils/icon'
|
|
||||||
import { coiMsgBox } from '@/utils/coi'
|
|
||||||
import IconBookOpen from '~icons/icon-park-outline/book-open'
|
|
||||||
import IconGithub from '~icons/icon-park-outline/github'
|
|
||||||
import IconLogout from '~icons/icon-park-outline/logout'
|
|
||||||
import IconUser from '~icons/icon-park-outline/user'
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const { userInfo, logout } = useAuthStore()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const options = computed(() => {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
label: t('app.userCenter'),
|
|
||||||
key: 'userCenter',
|
|
||||||
icon: () => h(IconUser),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'divider',
|
|
||||||
key: 'd1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Github',
|
|
||||||
key: 'guthub',
|
|
||||||
icon: () => h(IconGithub),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Gitee',
|
|
||||||
key: 'gitee',
|
|
||||||
icon: renderIcon('simple-icons:gitee'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Docs',
|
|
||||||
key: 'docs',
|
|
||||||
icon: () => h(IconBookOpen),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'divider',
|
|
||||||
key: 'd1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('app.loginOut'),
|
|
||||||
key: 'loginOut',
|
|
||||||
icon: () => h(IconLogout),
|
|
||||||
},
|
|
||||||
]
|
|
||||||
})
|
|
||||||
async function handleSelect(key: string | number) {
|
|
||||||
if (key === 'loginOut') {
|
|
||||||
try {
|
|
||||||
await coiMsgBox(
|
|
||||||
t('app.loginOutContent'),
|
|
||||||
t('app.loginOutTitle'),
|
|
||||||
t('common.confirm'),
|
|
||||||
t('common.cancel'),
|
|
||||||
'info',
|
|
||||||
)
|
|
||||||
logout()
|
|
||||||
}
|
|
||||||
catch {
|
|
||||||
// 用户取消操作，不需要处理
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (key === 'userCenter')
|
|
||||||
router.push('/userCenter')
|
|
||||||
|
|
||||||
if (key === 'guthub')
|
|
||||||
window.open('https://github.com/chansee97/nova-admin')
|
|
||||||
|
|
||||||
if (key === 'gitee')
|
|
||||||
window.open('https://gitee.com/chansee97/nova-admin')
|
|
||||||
|
|
||||||
if (key === 'docs')
|
|
||||||
window.open('https://nova-admin-docs.pages.dev/')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<n-dropdown
|
|
||||||
trigger="click"
|
|
||||||
:options="options"
|
|
||||||
@select="handleSelect"
|
|
||||||
>
|
|
||||||
<n-avatar
|
|
||||||
round
|
|
||||||
class="cursor-pointer"
|
|
||||||
:src="userInfo?.avatar"
|
|
||||||
>
|
|
||||||
<template #fallback>
|
|
||||||
<div class="wh-full flex-center">
|
|
||||||
<icon-park-outline-user />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</n-avatar>
|
|
||||||
</n-dropdown>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@ -1,221 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { reactive, ref } from 'vue'
|
|
||||||
import NovaDialog from '@/components/common/NovaDialog.vue'
|
|
||||||
import { coiMsgInfo, coiMsgSuccess } from '@/utils/coi'
|
|
||||||
|
|
||||||
// 弹框引用
|
|
||||||
const basicDialogRef = ref()
|
|
||||||
const customDialogRef = ref()
|
|
||||||
const fullscreenDialogRef = ref()
|
|
||||||
const noFooterDialogRef = ref()
|
|
||||||
|
|
||||||
// 表单数据
|
|
||||||
const formData = reactive({
|
|
||||||
name: '',
|
|
||||||
email: '',
|
|
||||||
description: '',
|
|
||||||
})
|
|
||||||
|
|
||||||
// 基础弹框
|
|
||||||
function openBasicDialog() {
|
|
||||||
basicDialogRef.value?.novaOpen()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleBasicConfirm() {
|
|
||||||
coiMsgSuccess('基础弹框确认操作')
|
|
||||||
basicDialogRef.value?.novaClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleBasicCancel() {
|
|
||||||
coiMsgInfo('基础弹框取消操作')
|
|
||||||
basicDialogRef.value?.novaClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 自定义内容弹框
|
|
||||||
function openCustomDialog() {
|
|
||||||
// 重置表单数据
|
|
||||||
Object.assign(formData, {
|
|
||||||
name: '',
|
|
||||||
email: '',
|
|
||||||
description: '',
|
|
||||||
})
|
|
||||||
customDialogRef.value?.novaOpen()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCustomConfirm() {
|
|
||||||
if (!formData.name) {
|
|
||||||
coiMsgInfo('请输入姓名')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
coiMsgSuccess(`表单提交成功！姓名：${formData.name}`)
|
|
||||||
customDialogRef.value?.novaClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCustomCancel() {
|
|
||||||
customDialogRef.value?.novaClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 全屏弹框
|
|
||||||
function openFullscreenDialog() {
|
|
||||||
fullscreenDialogRef.value?.novaOpen()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFullscreenConfirm() {
|
|
||||||
coiMsgSuccess('全屏弹框确认操作')
|
|
||||||
fullscreenDialogRef.value?.novaClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFullscreenCancel() {
|
|
||||||
fullscreenDialogRef.value?.novaClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 无底部按钮弹框
|
|
||||||
function openNoFooterDialog() {
|
|
||||||
noFooterDialogRef.value?.novaOpen()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleNoFooterClose() {
|
|
||||||
coiMsgInfo('无底部按钮弹框关闭')
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeNoFooterDialog() {
|
|
||||||
noFooterDialogRef.value?.novaClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCustomAction() {
|
|
||||||
coiMsgSuccess('执行自定义操作')
|
|
||||||
noFooterDialogRef.value?.novaClose()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="p-6">
|
|
||||||
<n-card title="NovaDialog 弹框组件示例">
|
|
||||||
<div class="flex flex-wrap gap-4">
|
|
||||||
<n-button type="primary" @click="openBasicDialog">
|
|
||||||
基础弹框
|
|
||||||
</n-button>
|
|
||||||
<n-button type="info" @click="openCustomDialog">
|
|
||||||
自定义内容弹框
|
|
||||||
</n-button>
|
|
||||||
<n-button type="warning" @click="openFullscreenDialog">
|
|
||||||
全屏弹框
|
|
||||||
</n-button>
|
|
||||||
<n-button type="success" @click="openNoFooterDialog">
|
|
||||||
无底部按钮弹框
|
|
||||||
</n-button>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
|
|
||||||
<!-- 基础弹框 -->
|
|
||||||
<NovaDialog
|
|
||||||
ref="basicDialogRef"
|
|
||||||
title="基础弹框"
|
|
||||||
:width="500"
|
|
||||||
:height="300"
|
|
||||||
@nova-confirm="handleBasicConfirm"
|
|
||||||
@nova-cancel="handleBasicCancel"
|
|
||||||
>
|
|
||||||
<template #content>
|
|
||||||
<div class="p-4">
|
|
||||||
<p class="text-base">
|
|
||||||
这是一个基础的弹框示例。
|
|
||||||
</p>
|
|
||||||
<p class="text-sm text-gray-500 mt-2">
|
|
||||||
点击确定或取消按钮来关闭弹框。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</NovaDialog>
|
|
||||||
|
|
||||||
<!-- 自定义内容弹框 -->
|
|
||||||
<NovaDialog
|
|
||||||
ref="customDialogRef"
|
|
||||||
title="自定义表单弹框"
|
|
||||||
:width="600"
|
|
||||||
:height="400"
|
|
||||||
@nova-confirm="handleCustomConfirm"
|
|
||||||
@nova-cancel="handleCustomCancel"
|
|
||||||
>
|
|
||||||
<template #content>
|
|
||||||
<div class="p-4">
|
|
||||||
<n-form :model="formData" label-placement="left" label-width="80px">
|
|
||||||
<n-form-item label="姓名">
|
|
||||||
<n-input v-model:value="formData.name" placeholder="请输入姓名" />
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item label="邮箱">
|
|
||||||
<n-input v-model:value="formData.email" placeholder="请输入邮箱" />
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item label="描述">
|
|
||||||
<n-input
|
|
||||||
v-model:value="formData.description"
|
|
||||||
type="textarea"
|
|
||||||
placeholder="请输入描述"
|
|
||||||
:rows="4"
|
|
||||||
/>
|
|
||||||
</n-form-item>
|
|
||||||
</n-form>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</NovaDialog>
|
|
||||||
|
|
||||||
<!-- 全屏弹框 -->
|
|
||||||
<NovaDialog
|
|
||||||
ref="fullscreenDialogRef"
|
|
||||||
title="全屏弹框"
|
|
||||||
:fullscreen="true"
|
|
||||||
@nova-confirm="handleFullscreenConfirm"
|
|
||||||
@nova-cancel="handleFullscreenCancel"
|
|
||||||
>
|
|
||||||
<template #content>
|
|
||||||
<div class="p-6">
|
|
||||||
<h3 class="text-lg font-semibold mb-4">
|
|
||||||
全屏弹框内容
|
|
||||||
</h3>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<n-card title="卡片1">
|
|
||||||
<p>这是全屏弹框中的内容区域。</p>
|
|
||||||
<p>可以放置任何复杂的内容和组件。</p>
|
|
||||||
</n-card>
|
|
||||||
<n-card title="卡片2">
|
|
||||||
<p>全屏模式下可以展示更多信息。</p>
|
|
||||||
<p>适用于复杂的表单或详细信息展示。</p>
|
|
||||||
</n-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</NovaDialog>
|
|
||||||
|
|
||||||
<!-- 无底部按钮弹框 -->
|
|
||||||
<NovaDialog
|
|
||||||
ref="noFooterDialogRef"
|
|
||||||
title="无底部按钮弹框"
|
|
||||||
:width="500"
|
|
||||||
:height="300"
|
|
||||||
:footer-hidden="true"
|
|
||||||
@nova-close="handleNoFooterClose"
|
|
||||||
>
|
|
||||||
<template #content>
|
|
||||||
<div class="p-4">
|
|
||||||
<p class="text-base mb-4">
|
|
||||||
这是一个没有底部按钮的弹框。
|
|
||||||
</p>
|
|
||||||
<p class="text-sm text-gray-500 mb-4">
|
|
||||||
需要自定义关闭逻辑。
|
|
||||||
</p>
|
|
||||||
<div class="flex justify-end gap-2">
|
|
||||||
<n-button type="default" @click="closeNoFooterDialog">
|
|
||||||
自定义关闭
|
|
||||||
</n-button>
|
|
||||||
<n-button type="primary" @click="handleCustomAction">
|
|
||||||
自定义操作
|
|
||||||
</n-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</NovaDialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user