parent
699d827f79
commit
63deaf3392
@ -0,0 +1,28 @@ |
|||||||
|
// | ------------------------------------------------------------
|
||||||
|
// | @版本: version 0.1
|
||||||
|
// | @创建人: 【Nie-x7129】
|
||||||
|
// | @E-mail: x71291@outlook.com
|
||||||
|
// | @所在项目: hoto-auth-vue3
|
||||||
|
// | @文件描述: index.js -
|
||||||
|
// | @创建时间: 2024-07-02 13:13
|
||||||
|
// | @更新时间: 2024-07-02 13:13
|
||||||
|
// | @修改记录:
|
||||||
|
// | -*-*-*- (时间--修改人--修改说明) -*-*-*-
|
||||||
|
// | =
|
||||||
|
// | ------------------------------------------------------------
|
||||||
|
|
||||||
|
import { Table, Pagination } from 'ant-design-vue'; |
||||||
|
import 'ant-design-vue/dist/reset.css'; |
||||||
|
|
||||||
|
// ! ANTD 国际化
|
||||||
|
// import zhCN from 'ant-design-vue/es/locale/zh_CN';
|
||||||
|
// import dayjs from 'dayjs';
|
||||||
|
// import 'dayjs/locale/zh-cn';
|
||||||
|
// dayjs.locale('zh-cn');
|
||||||
|
|
||||||
|
export function setupCustomAntDesignVueComponents(app){ |
||||||
|
// ! 表格
|
||||||
|
app.component('ATable', Table); |
||||||
|
// ! 分页
|
||||||
|
app.component('APagination', Pagination); |
||||||
|
} |
@ -1,22 +1,22 @@ |
|||||||
<script setup name="WorkContainerExample"> |
<script setup name="WorkContainerExample"> |
||||||
import WorkConatiner from './WorkConatiner.vue'; |
import workContainer from './WorkContainer.vue'; |
||||||
// 示例 |
// 示例 |
||||||
</script> |
</script> |
||||||
|
|
||||||
|
|
||||||
<template> |
<template> |
||||||
<div> |
<div> |
||||||
<WorkConatiner> |
<workContainer> |
||||||
<template v-slot:header>这是头部</template> |
<template v-slot:header>这是头部</template> |
||||||
<template v-slot:main>这是主要内容</template> |
<template v-slot:main>这是主要内容</template> |
||||||
<template v-slot:footer>这是脚部</template> |
<template v-slot:footer>这是脚部</template> |
||||||
</WorkConatiner> |
</workContainer> |
||||||
|
|
||||||
<WorkConatiner> |
<workContainer> |
||||||
<template #header>这是头部</template> |
<template #header>这是头部</template> |
||||||
<template #main>这是主要内容</template> |
<template #main>这是主要内容</template> |
||||||
<template #footer>这是脚部</template> |
<template #footer>这是脚部</template> |
||||||
</WorkConatiner> |
</workContainer> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
@ -0,0 +1,23 @@ |
|||||||
|
// | ------------------------------------------------------------
|
||||||
|
// | @版本: version 0.1
|
||||||
|
// | @创建人: 【Nie-x7129】
|
||||||
|
// | @E-mail: x71291@outlook.com
|
||||||
|
// | @所在项目: hoto-auth-vue3
|
||||||
|
// | @文件描述: index.js -
|
||||||
|
// | @创建时间: 2024-07-02 12:52
|
||||||
|
// | @更新时间: 2024-07-02 12:52
|
||||||
|
// | @修改记录:
|
||||||
|
// | -*-*-*- (时间--修改人--修改说明) -*-*-*-
|
||||||
|
// | =
|
||||||
|
// | ------------------------------------------------------------
|
||||||
|
|
||||||
|
import ModalTemplate from '@/components/Custom/Framework/ModalTemplate/index.vue'; |
||||||
|
import WorkContainer from '@/components/Custom/Framework/WorkContainer/index.vue'; |
||||||
|
|
||||||
|
// 自定义组件挂载到APP
|
||||||
|
export function setupCustomComponents(app){ |
||||||
|
// ! 模态框框架
|
||||||
|
app.component('ModalTemplate', ModalTemplate); |
||||||
|
// ! 框架结构
|
||||||
|
app.component('WorkContainer', WorkContainer); |
||||||
|
} |
@ -1,43 +0,0 @@ |
|||||||
<script setup> |
|
||||||
defineProps({ |
|
||||||
msg: { |
|
||||||
type: String, |
|
||||||
required: true, |
|
||||||
}, |
|
||||||
}); |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div class="greetings"> |
|
||||||
<h1 class="green">{{ msg }}</h1> |
|
||||||
<h3> |
|
||||||
You’ve successfully created a project with |
|
||||||
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> + <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. |
|
||||||
</h3> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
h1 { |
|
||||||
font-weight: 500; |
|
||||||
font-size: 2.6rem; |
|
||||||
position: relative; |
|
||||||
top: -10px; |
|
||||||
} |
|
||||||
|
|
||||||
h3 { |
|
||||||
font-size: 1.2rem; |
|
||||||
} |
|
||||||
|
|
||||||
.greetings h1, |
|
||||||
.greetings h3 { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
@media (min-width: 1024px) { |
|
||||||
.greetings h1, |
|
||||||
.greetings h3 { |
|
||||||
text-align: left; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
@ -0,0 +1,69 @@ |
|||||||
|
// | ------------------------------------------------------------
|
||||||
|
// | @版本: version 0.1
|
||||||
|
// | @创建人: 【Nie-x7129】
|
||||||
|
// | @E-mail: x71291@outlook.com
|
||||||
|
// | @所在项目: hoto-auth-vue3
|
||||||
|
// | @文件描述: index.js -
|
||||||
|
// | @创建时间: 2024-07-02 12:54
|
||||||
|
// | @更新时间: 2024-07-02 12:54
|
||||||
|
// | @修改记录:
|
||||||
|
// | -*-*-*- (时间--修改人--修改说明) -*-*-*-
|
||||||
|
// | =
|
||||||
|
// | ------------------------------------------------------------
|
||||||
|
|
||||||
|
import { useSystemStore } from '@/stores/system.js'; |
||||||
|
import { version, NButton, NForm, NFormItem, NIcon, NInput, NModal, NSpace, NTable, NPopconfirm } from 'naive-ui'; |
||||||
|
import { defineComponent, h, onMounted, ref } from 'vue'; |
||||||
|
|
||||||
|
// ! 创建修改后的NaiveUI组件,修改默认大小
|
||||||
|
function createCustomComponent(NaiveComponent, defaultProps) { |
||||||
|
// ! 返回组件
|
||||||
|
return defineComponent({ |
||||||
|
// ! 定义新组件的名称
|
||||||
|
name: `CustomNaiveUI-${NaiveComponent.name}`, |
||||||
|
oldName: 'N' + NaiveComponent.name, |
||||||
|
// ! 确保传递所有 NaiveComponent 的 props
|
||||||
|
props: NaiveComponent.props, |
||||||
|
// ! 返回函数
|
||||||
|
setup(props, { slots, attrs }) { |
||||||
|
const systemStore = useSystemStore(); |
||||||
|
return () => { |
||||||
|
// ! 获取存储中的 inputSize,并将其传递给组件
|
||||||
|
const dynamicProps = { |
||||||
|
...defaultProps, |
||||||
|
...props, |
||||||
|
size: systemStore.state.componentSize, |
||||||
|
}; |
||||||
|
const internalRef = ref(null); |
||||||
|
|
||||||
|
// ! 将传递的属性与默认属性合并
|
||||||
|
const vNode = h(NaiveComponent, { ref: internalRef, ...attrs, ...dynamicProps, }, slots); |
||||||
|
return vNode; |
||||||
|
}; |
||||||
|
}, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function setupCustomNaiveComponents(app) { |
||||||
|
window.pino.debug('NaiveUI Version: ', version); |
||||||
|
const ComponentList = [ |
||||||
|
NButton, // ! 按钮
|
||||||
|
NTable, // ! 表格
|
||||||
|
NModal, // ! 模态框
|
||||||
|
NFormItem, // ! 表单项
|
||||||
|
NInput, // ! 输入框
|
||||||
|
NSpace, // ! 间距
|
||||||
|
NPopconfirm, // ! 确认框
|
||||||
|
]; |
||||||
|
for (let Component of ComponentList) { |
||||||
|
const newComponent = createCustomComponent(Component); |
||||||
|
app.component(newComponent.oldName, newComponent); |
||||||
|
} |
||||||
|
const OtherComponentList = [ |
||||||
|
NIcon, // ! 图标夹
|
||||||
|
NForm, // ! 表单
|
||||||
|
]; |
||||||
|
for (let Component of OtherComponentList) { |
||||||
|
app.component('N' + Component.name, Component); |
||||||
|
} |
||||||
|
} |
@ -1,78 +0,0 @@ |
|||||||
<script setup> |
|
||||||
import WelcomeItem from './WelcomeItem.vue'; |
|
||||||
import DocumentationIcon from './icons/IconDocumentation.vue'; |
|
||||||
import ToolingIcon from './icons/IconTooling.vue'; |
|
||||||
import EcosystemIcon from './icons/IconEcosystem.vue'; |
|
||||||
import CommunityIcon from './icons/IconCommunity.vue'; |
|
||||||
import SupportIcon from './icons/IconSupport.vue'; |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<WelcomeItem> |
|
||||||
<template #icon> |
|
||||||
<DocumentationIcon /> |
|
||||||
</template> |
|
||||||
<template #heading>Documentation</template> |
|
||||||
|
|
||||||
Vue’s |
|
||||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a> |
|
||||||
provides you with all information you need to get started. |
|
||||||
</WelcomeItem> |
|
||||||
|
|
||||||
<WelcomeItem> |
|
||||||
<template #icon> |
|
||||||
<ToolingIcon /> |
|
||||||
</template> |
|
||||||
<template #heading>Tooling</template> |
|
||||||
|
|
||||||
This project is served and bundled with |
|
||||||
<a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The recommended IDE setup is |
|
||||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> + |
|
||||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If you need to test your components and web pages, check out |
|
||||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and |
|
||||||
<a href="https://on.cypress.io/component" target="_blank" rel="noopener">Cypress Component Testing</a>. |
|
||||||
|
|
||||||
<br /> |
|
||||||
|
|
||||||
More instructions are available in <code>README.md</code>. |
|
||||||
</WelcomeItem> |
|
||||||
|
|
||||||
<WelcomeItem> |
|
||||||
<template #icon> |
|
||||||
<EcosystemIcon /> |
|
||||||
</template> |
|
||||||
<template #heading>Ecosystem</template> |
|
||||||
|
|
||||||
Get official tools and libraries for your project: |
|
||||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>, |
|
||||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>, |
|
||||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and |
|
||||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If you need more resources, we suggest paying |
|
||||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a> |
|
||||||
a visit. |
|
||||||
</WelcomeItem> |
|
||||||
|
|
||||||
<WelcomeItem> |
|
||||||
<template #icon> |
|
||||||
<CommunityIcon /> |
|
||||||
</template> |
|
||||||
<template #heading>Community</template> |
|
||||||
|
|
||||||
Got stuck? Ask your question on |
|
||||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official Discord server, or |
|
||||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener">StackOverflow</a>. You should also subscribe to |
|
||||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow the official |
|
||||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a> |
|
||||||
twitter account for latest news in the Vue world. |
|
||||||
</WelcomeItem> |
|
||||||
|
|
||||||
<WelcomeItem> |
|
||||||
<template #icon> |
|
||||||
<SupportIcon /> |
|
||||||
</template> |
|
||||||
<template #heading>Support Vue</template> |
|
||||||
|
|
||||||
As an independent project, Vue relies on community backing for its sustainability. You can help us by |
|
||||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>. |
|
||||||
</WelcomeItem> |
|
||||||
</template> |
|
@ -1,86 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="item"> |
|
||||||
<i> |
|
||||||
<slot name="icon"></slot> |
|
||||||
</i> |
|
||||||
<div class="details"> |
|
||||||
<h3> |
|
||||||
<slot name="heading"></slot> |
|
||||||
</h3> |
|
||||||
<slot></slot> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
.item { |
|
||||||
margin-top: 2rem; |
|
||||||
display: flex; |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
|
|
||||||
.details { |
|
||||||
flex: 1; |
|
||||||
margin-left: 1rem; |
|
||||||
} |
|
||||||
|
|
||||||
i { |
|
||||||
display: flex; |
|
||||||
place-items: center; |
|
||||||
place-content: center; |
|
||||||
width: 32px; |
|
||||||
height: 32px; |
|
||||||
color: var(--color-text); |
|
||||||
} |
|
||||||
|
|
||||||
h3 { |
|
||||||
font-size: 1.2rem; |
|
||||||
font-weight: 500; |
|
||||||
margin-bottom: 0.4rem; |
|
||||||
color: var(--color-heading); |
|
||||||
} |
|
||||||
|
|
||||||
@media (min-width: 1024px) { |
|
||||||
.item { |
|
||||||
margin-top: 0; |
|
||||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2); |
|
||||||
} |
|
||||||
|
|
||||||
i { |
|
||||||
top: calc(50% - 25px); |
|
||||||
left: -26px; |
|
||||||
position: absolute; |
|
||||||
border: 1px solid var(--color-border); |
|
||||||
background: var(--color-background); |
|
||||||
border-radius: 8px; |
|
||||||
width: 50px; |
|
||||||
height: 50px; |
|
||||||
} |
|
||||||
|
|
||||||
.item:before { |
|
||||||
content: ' '; |
|
||||||
border-left: 1px solid var(--color-border); |
|
||||||
position: absolute; |
|
||||||
left: 0; |
|
||||||
bottom: calc(50% + 25px); |
|
||||||
height: calc(50% - 25px); |
|
||||||
} |
|
||||||
|
|
||||||
.item:after { |
|
||||||
content: ' '; |
|
||||||
border-left: 1px solid var(--color-border); |
|
||||||
position: absolute; |
|
||||||
left: 0; |
|
||||||
top: calc(50% + 25px); |
|
||||||
height: calc(50% - 25px); |
|
||||||
} |
|
||||||
|
|
||||||
.item:first-of-type:before { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.item:last-of-type:after { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
@ -0,0 +1,23 @@ |
|||||||
|
// | ------------------------------------------------------------
|
||||||
|
// | @版本: version 0.1
|
||||||
|
// | @创建人: 【Nie-x7129】
|
||||||
|
// | @E-mail: x71291@outlook.com
|
||||||
|
// | @所在项目: hoto-auth-vue3
|
||||||
|
// | @文件描述: index.js -
|
||||||
|
// | @创建时间: 2024-07-02 12:56
|
||||||
|
// | @更新时间: 2024-07-02 12:56
|
||||||
|
// | @修改记录:
|
||||||
|
// | -*-*-*- (时间--修改人--修改说明) -*-*-*-
|
||||||
|
// | =
|
||||||
|
// | ------------------------------------------------------------
|
||||||
|
|
||||||
|
import { setupCustomComponents } from '@CustomComponents/index.js'; |
||||||
|
import { setupCustomNaiveComponents } from '@/components/NaiveUI/index.js'; |
||||||
|
import { setupCustomAntDesignVueComponents } from '@/components/AntDesignVue/index.js'; |
||||||
|
|
||||||
|
export function setupGlobalComponents(app) { |
||||||
|
setupCustomComponents(app); |
||||||
|
setupCustomNaiveComponents(app); |
||||||
|
// ! 设置AntDesignVue的全局组件
|
||||||
|
setupCustomAntDesignVueComponents(app); |
||||||
|
} |
Loading…
Reference in new issue