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>
|
||||
<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