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"> |
||||
import WorkConatiner from './WorkConatiner.vue'; |
||||
import workContainer from './WorkContainer.vue'; |
||||
// 示例 |
||||
</script> |
||||
|
||||
|
||||
<template> |
||||
<div> |
||||
<WorkConatiner> |
||||
<workContainer> |
||||
<template v-slot:header>这是头部</template> |
||||
<template v-slot:main>这是主要内容</template> |
||||
<template v-slot:footer>这是脚部</template> |
||||
</WorkConatiner> |
||||
</workContainer> |
||||
|
||||
<WorkConatiner> |
||||
<workContainer> |
||||
<template #header>这是头部</template> |
||||
<template #main>这是主要内容</template> |
||||
<template #footer>这是脚部</template> |
||||
</WorkConatiner> |
||||
</workContainer> |
||||
</div> |
||||
</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