Skip to content

Commit f34abe6

Browse files
sendyasendya
committed
pref: move projects
1 parent c0aec46 commit f34abe6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+4341
-0
lines changed

‎packages/pro-layout/.eslintrc.cjs

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/* eslint-env node */
2+
require('@rushstack/eslint-patch/modern-module-resolution')
3+
4+
module.exports = {
5+
root: true,
6+
extends: [
7+
'plugin:vue/vue3-recommended',
8+
'eslint:recommended',
9+
'@vue/eslint-config-typescript/recommended',
10+
'@vue/eslint-config-prettier',
11+
],
12+
env: {
13+
'vue/setup-compiler-macros': true,
14+
},
15+
rules: {
16+
'prettier/prettier': ['error', { semi: false, singleQuote: true, printWidth: 120 }],
17+
// 临时关掉
18+
'@typescript-eslint/no-explicit-any': 'off',
19+
},
20+
}

‎packages/pro-layout/.gitignore

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
.DS_Store
12+
dist
13+
dist-ssr
14+
coverage
15+
*.local
16+
17+
/cypress/videos/
18+
/cypress/screenshots/
19+
20+
# Editor directories and files
21+
.vscode/*
22+
!.vscode/extensions.json
23+
.idea
24+
*.suo
25+
*.ntvs*
26+
*.njsproj
27+
*.sln
28+
*.sw?

‎packages/pro-layout/env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎packages/pro-layout/examples/App.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script setup lang="ts">
2+
import { RouterView } from 'vue-router'
3+
import { ConfigProvider as AConfigProvider } from 'ant-design-vue'
4+
5+
const getPopupContainer = (triggerNode: HTMLElement): HTMLElement => {
6+
// if (dialogContext) {
7+
// return dialogContext.getDialogWrap()
8+
// }
9+
console.log('getPopupContainer', triggerNode)
10+
return document.body
11+
}
12+
</script>
13+
14+
<template>
15+
<a-config-provider :get-popup-container="getPopupContainer">
16+
<RouterView />
17+
</a-config-provider>
18+
</template>
19+
20+
<style>
21+
#app {
22+
height: 100%;
23+
}
24+
</style>

‎packages/pro-layout/examples/icons.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as Icons from '@ant-design/icons-vue/es'
2+
import type { App } from 'vue'
3+
import type { IconType } from '@ant-design/icons-vue/es/components/Icon'
4+
5+
type AllIcon = {
6+
[key: string]: IconType
7+
}
8+
9+
export const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor']
10+
11+
export default (app: App) => {
12+
const allIcon: AllIcon = Icons as any
13+
Object.keys(Icons)
14+
.filter((k) => !filterIcons.includes(k))
15+
.forEach((k) => {
16+
app.component(allIcon[k].displayName, allIcon[k])
17+
})
18+
}

‎packages/pro-layout/examples/layouts/BasicLayout.vue

+172
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<template>
2+
<pro-layout
3+
v-model:collapsed="baseState.collapsed"
4+
v-model:selectedKeys="baseState.selectedKeys"
5+
v-model:openKeys="baseState.openKeys"
6+
v-bind="state"
7+
:loading="loading"
8+
:breadcrumb="{ routes: breadcrumb }"
9+
iconfont-url="//at.alicdn.com/t/font_2804900_nzigh7z84gc.js"
10+
>
11+
<template #menuHeaderRender>
12+
<a>
13+
<img src="/favicon.svg" />
14+
<h1>Pro Layout</h1>
15+
</a>
16+
</template>
17+
<!-- custom collapsed button -->
18+
<template #collapsedButtonRender="collapsed">
19+
<HeartOutlined v-if="collapsed" />
20+
<SmileOutlined v-else />
21+
</template>
22+
<!-- custom right-content -->
23+
<template #rightContentRender>
24+
<div style="margin-right: 12px">
25+
<a-avatar shape="square" size="small">
26+
<template #icon>
27+
<UserOutlined />
28+
</template>
29+
</a-avatar>
30+
</div>
31+
</template>
32+
<!-- custom breadcrumb itemRender -->
33+
<template #breadcrumbRender="{ route, params, routes }">
34+
<span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
35+
<router-link v-else :to="{ path: route.path, params }">
36+
{{ route.breadcrumbName }}
37+
</router-link>
38+
</template>
39+
<template #menuFooterRender>
40+
<a
41+
:style="{
42+
lineHeight: '48rpx',
43+
display: 'flex',
44+
height: '48px',
45+
alignItems: 'center',
46+
}"
47+
href="https://preview.pro.antdv.com/dashboard/analysis"
48+
target="_blank"
49+
rel="noreferrer"
50+
>
51+
<img
52+
alt="pro-logo"
53+
src="https://procomponents.ant.design/favicon.ico"
54+
:style="{
55+
width: '16px',
56+
height: '16px',
57+
margin: '0 16px',
58+
marginRight: '10px',
59+
}"
60+
/>
61+
<span v-if="!baseState.collapsed">Preview Pro</span>
62+
</a>
63+
</template>
64+
65+
<!-- content begin -->
66+
<router-view v-slot="{ Component }">
67+
<WaterMark :content="watermarkContent">
68+
<component :is="Component" />
69+
</WaterMark>
70+
</router-view>
71+
</pro-layout>
72+
</template>
73+
74+
<script lang="ts">
75+
import { computed, defineComponent, reactive, ref, watchEffect, onMounted } from 'vue'
76+
import { useRouter } from 'vue-router'
77+
import { message, Button, Input, Switch, Select, Avatar, Space, Badge, Menu } from 'ant-design-vue'
78+
import { getMenuData, clearMenuItem, WaterMark, FooterToolbar } from '@ant-design-vue/pro-layout'
79+
import type { RouteContextProps } from '@ant-design-vue/pro-layout'
80+
81+
const i18n = (t: string) => t
82+
83+
export default defineComponent({
84+
name: 'BasicLayout',
85+
components: {
86+
FooterToolbar,
87+
WaterMark,
88+
89+
[Button.name]: Button,
90+
[Input.name]: Input,
91+
[Input.Search.name]: Input.Search,
92+
[Switch.name]: Switch,
93+
[Select.name]: Select,
94+
['a-slect-option']: Select.Option,
95+
[Space.name]: Space,
96+
[Badge.name]: Badge,
97+
[Avatar.name]: Avatar,
98+
[Menu.Item.name]: Menu.Item,
99+
},
100+
setup() {
101+
const loading = ref(false)
102+
const watermarkContent = ref('Pro Layout')
103+
const router = useRouter()
104+
const { menuData } = getMenuData(clearMenuItem(router.getRoutes()))
105+
106+
const baseState = reactive<Omit<RouteContextProps, 'menuData'>>({
107+
selectedKeys: [],
108+
openKeys: [],
109+
// default
110+
collapsed: false,
111+
})
112+
113+
const state = reactive({
114+
menuData,
115+
splitMenus: true,
116+
// title: 'ProLayout',
117+
// logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
118+
navTheme: 'dark',
119+
layout: 'side',
120+
fixSiderbar: true,
121+
fixedHeader: true,
122+
})
123+
const breadcrumb = computed(() =>
124+
router.currentRoute.value.matched.concat().map((item) => {
125+
return {
126+
path: item.path,
127+
breadcrumbName: item.meta.title || '',
128+
}
129+
})
130+
)
131+
132+
const handleCollapsed = () => {
133+
baseState.collapsed = !baseState.collapsed
134+
}
135+
watchEffect(() => {
136+
if (router.currentRoute) {
137+
const matched = router.currentRoute.value.matched.concat()
138+
baseState.selectedKeys = matched.filter((r) => r.name !== 'index').map((r) => r.path)
139+
baseState.openKeys = matched.filter((r) => r.path !== router.currentRoute.value.path).map((r) => r.path)
140+
}
141+
})
142+
143+
function handlePageLoadingClick() {
144+
loading.value = true
145+
setTimeout(() => {
146+
loading.value = false
147+
}, 2000)
148+
}
149+
150+
onMounted(() => {
151+
setTimeout(() => {
152+
watermarkContent.value = 'New Mark'
153+
}, 2000)
154+
})
155+
156+
return {
157+
i18n,
158+
watermarkContent,
159+
baseState,
160+
state,
161+
loading,
162+
breadcrumb,
163+
164+
handlePageLoadingClick,
165+
handleCollapsed,
166+
handleSearch: () => {
167+
message.info('search..')
168+
},
169+
}
170+
},
171+
})
172+
</script>

‎packages/pro-layout/examples/layouts/BlankLayout.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<router-view />
3+
</template>

‎packages/pro-layout/examples/main.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import 'ant-design-vue/dist/antd.less'
2+
3+
import { createApp } from 'vue'
4+
import ProLayout, { PageContainer } from '@ant-design-vue/pro-layout'
5+
import App from './App.vue'
6+
import router from './router'
7+
import icons from './icons'
8+
9+
const app = createApp(App)
10+
11+
app.use(router)
12+
13+
app.use(ProLayout).use(PageContainer).use(icons).mount('#app')

0 commit comments

Comments
 (0)