17 |
19 | )
20 | }
21 | })
22 |
23 | export default MiQuote
24 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | {getPropSlot(slots, props, 'default')}
18 |
5 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/components/items/text/style/text.module.less:
--------------------------------------------------------------------------------
1 | @import '../../../theme/style/variables.module.less';
2 |
3 | .container {
4 | width: 100%;
5 | overflow: hidden;
6 | position: relative;
7 | background-position: center;
8 | background-repeat: no-repeat;
9 | background-size: cover;
10 |
11 | &-center {
12 | .flex();
13 | }
14 | }
15 |
16 | .inner {
17 | position: relative;
18 | }
19 |
20 | .items {
21 | .transition();
22 | }
23 |
24 | .item {
25 | &-object {
26 | position: relative;
27 | }
28 |
29 | &-title {
30 | .flex(flex-start, flex-start);
31 | color: var(--mi-on-background);
32 |
33 | &-center {
34 | .flex(center, flex-start);
35 | }
36 | }
37 |
38 | &-info {
39 | .flex(flex-start, flex-start);
40 |
41 | &-center {
42 | .flex(center, flex-start);
43 | }
44 | }
45 | }
--------------------------------------------------------------------------------
/src/hooks/useWindowResize.ts:
--------------------------------------------------------------------------------
1 | import { ref, onMounted, onUnmounted } from 'vue'
2 | import { $tools } from '../utils/tools'
3 | import { $g } from '../utils/global'
4 |
5 | export function useWindowResize() {
6 | const defaultWidth = typeof window !== 'undefined' ? window.innerWidth : 1920
7 | const defaultHeight = typeof window !== 'undefined' ? window.innerHeight : 945
8 | const width = refSuccess
4 |
3 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/components/dropdown/style/item.module.less:
--------------------------------------------------------------------------------
1 | @import '../../theme/style/variables.module.less';
2 |
3 | .container {
4 | .flex(center, space-between);
5 | color: var(--mi-dropdown-item-text);
6 | .properties(padding-top, 2);
7 | .properties(padding-bottom, 2);
8 |
9 | .item {
10 | .flex();
11 | }
12 |
13 | .title {
14 | .properties(margin-left);
15 | white-space: nowrap;
16 | }
17 |
18 | .tag {
19 | color: var(--mi-dropdown-item-tag-text);
20 | .gradient-hint(var(--mi-dropdown-item-tag-start), var(--mi-dropdown-item-tag-hint), var(--mi-dropdown-item-tag-stop));
21 | .properties(margin-left, 24);
22 | .ellipsis();
23 | .radius();
24 | .properties(padding-left);
25 | .properties(padding-right);
26 | width: auto;
27 | }
28 |
29 | .icon {
30 | .properties(margin-left, 24);
31 | }
32 | }
33 |
34 | :export {
35 | --dropdown-item-text: var(--mi-on-surface);
36 | --dropdown-item-tag-text: var(--mi-surface);
37 | --dropdown-item-tag-start: var(--mi-primary);
38 | --dropdown-item-tag-hint: var(--mi-secondary);
39 | --dropdown-item-tag-stop: var(--mi-tertiary);
40 | }
--------------------------------------------------------------------------------
/src/components/items/text/__tests__/text.test.ts:
--------------------------------------------------------------------------------
1 | import { mount, type VueWrapper } from '@vue/test-utils'
2 | import { afterEach, describe, expect, test } from 'vitest'
3 | import { h, nextTick } from 'vue'
4 | import MiItemsText from '../Text'
5 |
6 | describe('MiItemsText', () => {
7 | const wrappers: VueWrapper[] = []
8 |
9 | afterEach(() => {
10 | wrappers.splice(0).forEach((w) => w.unmount())
11 | document.body.innerHTML = ''
12 | })
13 |
14 | test('string items 会渲染 marker 与文本，并支持 item slot', async () => {
15 | const wrapper = mount(MiItemsText, {
16 | props: {
17 | items: ['a', 'b'],
18 | marker: { type: 'number' },
19 | indent: 10
20 | },
21 | slots: {
22 | item: ({ index }: any) => h('div', { 'data-testid': 'slot', 'data-index': index })
23 | },
24 | attachTo: document.body
25 | })
26 | wrappers.push(wrapper)
27 |
28 | await nextTick()
29 | expect(wrapper.text()).toContain('a')
30 | expect(wrapper.text()).toContain('b')
31 | expect(wrapper.findAll('[data-testid="slot"]').length).toBe(2)
32 | })
33 | })
34 |
--------------------------------------------------------------------------------
/src/components/layout/Footer.tsx:
--------------------------------------------------------------------------------
1 | import { computed, defineComponent } from 'vue'
2 | import { getPropSlot } from '../_utils/props'
3 | import { $g } from '../../utils/global'
4 | import { useWindowResize } from '../../hooks/useWindowResize'
5 | import { useLayoutStore } from '../../stores/layout'
6 | import applyTheme from '../_utils/theme'
7 | import styled from './style/footer.module.less'
8 |
9 | const MiLayoutFooter = defineComponent({
10 | name: 'MiLayoutFooter',
11 | inheritAttrs: false,
12 | setup(props, { slots }) {
13 | const { width } = useWindowResize()
14 | const store = useLayoutStore()
15 | const collapsed = computed(() => store.collapsed)
16 | const copyright = computed(() => {
17 | return width.value < $g.breakpoints.md ? $g.copyright.mobile : $g.copyright.laptop
18 | })
19 |
20 | applyTheme(styled)
21 |
22 | return () => (
23 |
28 | )
29 | }
30 | })
31 |
32 | export default MiLayoutFooter
33 |
--------------------------------------------------------------------------------
/src/components/anchor/Link.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent } from 'vue'
2 | import { AnchorLinkProps } from './props'
3 | import { StarOutlined, TagOutlined } from '@ant-design/icons-vue'
4 | import type { AnchorLinkItem } from '../../utils/types'
5 | import applyTheme from '../_utils/theme'
6 | import styled from './style/link.module.less'
7 |
8 | const MiAnchorLink = defineComponent({
9 | name: 'MiAnchorLink',
10 | inheritAttrs: false,
11 | props: AnchorLinkProps(),
12 | emits: ['click'],
13 | setup(props, { emit }) {
14 | applyTheme(styled)
15 |
16 | const handleClick = (evt?: Event) => {
17 | emit(
18 | 'click',
19 | {
20 | id: props.id,
21 | title: props.title
22 | } as AnchorLinkItem,
23 | evt
24 | )
25 | }
26 |
27 | return () => (
28 |
31 | {props.active ?
34 | )
35 | }
36 | })
37 |
38 | export default MiAnchorLink
39 |
--------------------------------------------------------------------------------
/src/components/dropdown/props.ts:
--------------------------------------------------------------------------------
1 | import { PropTypes, type DropdownItem } from '../../utils/types'
2 | import { tuple, placement, actions } from './../_utils/props'
3 | import { array, object } from 'vue-types'
4 |
5 | /**
6 | * +=======================+
7 | * | Dropdown |
8 | * +=======================+
9 | * @param title 显示名称
10 | * @param placement popup 弹出位置
11 | * @param trigger 触发方式
12 | * @param items 数据
13 | * @param overlay 首选的下拉菜单
3 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/components/socialite/README.md:
--------------------------------------------------------------------------------
1 | # 社会化登录 / 注册
2 |
3 | > 「 社会化登录 / 注册 」 组件作用于登录 / 注册表单内，快速定义三方的社会化登录 / 注册的相关内容及 `UI` 效果
4 |
5 | ## 使用示例
6 |
7 | ### 默认
8 |
9 | ```html
10 |
31 |
36 | )
37 | }
38 | })
39 |
40 | export default MiTitle
41 |
--------------------------------------------------------------------------------
/src/components/theme/Provider.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent, onMounted, ref } from 'vue'
2 | import { ThemeProviderProps } from './props'
3 | import { $g } from '../../utils/global'
4 | import { $tools } from '../../utils/tools'
5 |
6 | const MiThemeProvider = defineComponent({
7 | name: 'MiThemeProvider',
8 | inheritAttrs: false,
9 | props: ThemeProviderProps(),
10 | setup(props, { slots }) {
11 | const key = ref
32 |
33 | {extra ?
35 | {extra}
: null}
34 | {slots?.default()}
37 | }
38 | })
39 |
40 | export default MiThemeProvider
41 |
--------------------------------------------------------------------------------
/src/components/code/README.md:
--------------------------------------------------------------------------------
1 | # 代码高亮
2 |
3 | > 集成轻量且优雅的语法高亮库「 `prismjs` 」
4 | >
5 | > 「 `HTML` 」及「 `JS` 」无需额外引入，直接使用即可
6 | >
7 | > 其他语言的高亮显示，需要引入对应的语言组件，所有组件文件在「 `node_modules/prismjs/components/**` 」
8 |
9 | ## 使用示例
10 |
11 | ### 默认
12 |
13 | ```html
14 |
15 |
16 |
7 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/tsconfig.umd.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./tsconfig.schema.json",
3 | "compilerOptions": {
4 | "target": "ES2020",
5 | "useDefineForClassFields": true,
6 | "module": "ESNext",
7 | "lib": ["ESNext", "ES2020", "DOM", "DOM.Iterable"],
8 | "skipLibCheck": true,
9 | "strictNullChecks": false,
10 | "importHelpers": false,
11 | "esModuleInterop": true,
12 | "moduleResolution": "node",
13 | "experimentalDecorators": true,
14 | "allowSyntheticDefaultImports": true,
15 | "resolveJsonModule": true,
16 | "removeComments": true,
17 | "isolatedModules": true,
18 | "noEmit": true,
19 | "declaration": false,
20 | "allowJs": true,
21 | "jsx": "preserve",
22 | "strict": true,
23 | "noUnusedLocals": true,
24 | "noUnusedParameters": true,
25 | "noFallthroughCasesInSwitch": true,
26 | "noImplicitAny": false,
27 | "noImplicitThis": false,
28 | "baseUrl": "./",
29 | "plugins": [{ "name": "typescript-plugin-css-modules", "options": { "customMatcher": "\\.module\\.(c|le|sa|sc)ss$" } }],
30 | "paths": {
31 | "@/*": ["example/*"],
32 | "@miitvip/admin-pro": ["src/index.ts"]
33 | },
34 | "types": [
35 | "vitest/globals",
36 | "@testing-library/jest-dom",
37 | "@types/node"
38 | ]
39 | },
40 | "include": [
41 | "src/**/*.ts",
42 | "src/**/*.tsx",
43 | "src/**/*.vue"
44 | ],
45 | "exclude": [
46 | "node_modules",
47 | "dist",
48 | "lib",
49 | "es",
50 | "build",
51 | "example"
52 | ]
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/backtop/props.ts:
--------------------------------------------------------------------------------
1 | import { VNodeTypes } from 'vue'
2 | import { PropTypes } from '../../utils/types'
3 | import type { DeviceSize, Position } from '../../utils/types'
4 | import { object } from 'vue-types'
5 |
6 | /**
7 | * +======================+
8 | * | 回到顶部 |
9 | * +======================+
10 | * @param width 宽度
11 | * @param height 高度
12 | * @param radius 圆角弧度
13 | * @param offset 触发偏移量
14 | * @param duration 滚动时长
15 | * @param zIndex 层级
16 | * @param tip 提示语
17 | * @param position 定位
18 | * @param background 背景色
19 | * @param icon 图标
20 | * @param listenerContainer scroll 监听容器
21 | */
22 | export interface BacktopProperties {
23 | width: number | string | DeviceSize
24 | height: number | string | DeviceSize
25 | radius: number | string | DeviceSize
26 | offset: number
27 | duration: number
28 | zIndex: number
29 | tip: string
30 | position: Position
31 | background: string
32 | icon: VNodeTypes
33 | listenerContainer: HTMLElement
34 | }
35 |
36 | export const BacktopProps = () => ({
37 | width: PropTypes.oneOfType([PropTypes.string, PropTypes.number, object4 | 「 5 | Makeit Admin Pro 6 | 」致力于提供给程序员愉悦的开发体验。 7 |
8 |-
9 |
-
10 | 11 | 在开始之前，推荐先学习「 12 | 13 |27 |
Vue 14 | 15 | 」和「 16 | 17 |18 | ES2015 19 | 20 | 21 | 」，并正确安装和配置了「 22 | 23 |NodeJS 24 | 25 | 」v18.18.2 或以上版本。 26 |
28 | -
29 | 30 | 官方指南假设你已了解关于「 31 | HTML / CSS / Javascript 32 | 」的中级知识，并且已经完全掌握了「 33 | Vue 34 | 」的正确开发方式。 35 |36 |
37 |
-
38 | 39 | 如果你刚开始学习前端或者「 40 | Vue 41 | 」，将 42 | UI 框架 作为你的第一步可能不是最好的主意。 43 |44 |
45 |
19 |
20 |
22 |
23 |
24 |
29 | ```
30 |
31 | ### 自定义尺寸、位置与提示文案
32 |
33 | ```html
34 |
31 | {isVNode(props.item.tag.icon)
32 | ? props.item.tag.icon
33 | : h(props.item.tag.icon)}
34 |
35 | )
36 | }
37 | }
38 |
39 | return () => (
40 |
41 |
55 | )
56 | }
57 | })
58 |
59 | export default MiDropdownItem
60 |
--------------------------------------------------------------------------------
/src/components/image/__tests__/image.test.ts:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import { afterEach, describe, expect, test, vi } from 'vitest'
3 | import { nextTick } from 'vue'
4 | import MiImage from '../Image'
5 |
6 | const flushPromises = async () => {
7 | await Promise.resolve()
8 | await Promise.resolve()
9 | }
10 |
11 | describe('MiImage', () => {
12 | const originals = {
13 | Image: globalThis.Image
14 | }
15 |
16 | afterEach(() => {
17 | globalThis.Image = originals.Image
18 | vi.restoreAllMocks()
19 | document.body.innerHTML = ''
20 | })
21 |
22 | test('加载完成会 emit load，并传出 img element，同时支持透传 style/class', async () => {
23 | let onload: null | (() => void) = null
24 |
25 | // mock window.Image（用于预加载）
26 | // eslint-disable-next-line @typescript-eslint/no-extraneous-class
27 | class FakeImage {
28 | src = ''
29 | onload: any = null
30 | onerror: any = null
31 | constructor() {
32 | onload = () => this.onload?.()
33 | }
34 | }
35 | globalThis.Image = FakeImage as any
36 |
37 | const wrapper = mount(MiImage, {
38 | props: {
39 | src: 'x.png',
40 | width: 10,
41 | height: 12,
42 | radius: 8
43 | },
44 | attrs: {
45 | class: 'c1',
46 | style: { border: '1px solid red' }
47 | },
48 | attachTo: document.body
49 | })
50 |
51 | await nextTick()
52 | await flushPromises()
53 |
54 | expect(onload).toBeTruthy()
55 | onload?.()
56 | await nextTick()
57 |
58 | expect(wrapper.emitted().load).toBeTruthy()
59 | const payload = wrapper.emitted().load?.[0]?.[0] as HTMLImageElement
60 | expect(payload).toBeInstanceOf(HTMLImageElement)
61 |
62 | const img = wrapper.find('img')
63 | expect(img.classes()).toContain('c1')
64 | expect(img.attributes('style') || '').toContain('border: 1px solid red')
65 | expect(img.attributes('style') || '').toContain('width:')
66 | expect(img.attributes('style') || '').toContain('height:')
67 | expect(img.attributes('style') || '').toContain('border-radius:')
68 |
69 | wrapper.unmount()
70 | })
71 | })
72 |
--------------------------------------------------------------------------------
/src/components/menu/style/title.module.less:
--------------------------------------------------------------------------------
1 | @import '../../theme/style/variables.module.less';
2 |
3 | .container {
4 | .flex(center, flex-start);
5 | flex-wrap: nowrap;
6 | white-space: nowrap;
7 | .transition();
8 | width: 100%;
9 | .properties(height, @mi-menu-item-height);
10 | position: relative;
11 | min-width: unset;
12 |
13 | &.collapsed {
14 | .flex();
15 | }
16 |
17 | .icon {
18 | .properties(margin-right, 12);
19 | .transition();
20 |
21 | :global(.anticon) {
22 | color: var(--mi-menu-item-title-icon);
23 | .transition();
24 | }
25 |
26 | &.collapsed {
27 | margin-right: 0;
28 | .properties(width, 20);
29 |
30 | :global(.anticon) {
31 | .font-size(20);
32 | .properties(width, 20);
33 | .flex();
34 | }
35 | }
36 | }
37 |
38 | &.fold,
39 | &.active,
40 | &.collapsed-active {
41 | .title {
42 | color: var(--mi-menu-item-title-active-text);
43 | font-weight: bold;
44 |
45 | &-sub {
46 | color: var(--mi-menu-item-title-active-sub);
47 | }
48 | }
49 |
50 | .icon {
51 | :global(.anticon) {
52 | color: var(--mi-menu-item-title-active-icon);
53 | }
54 | }
55 | }
56 | }
57 |
58 | .title {
59 | .flex(flex-start, center, column);
60 | .properties(height, @mi-menu-item-height);
61 | .font-size(14);
62 | .properties(line-height, 20);
63 | color: var(--mi-menu-item-title-text);
64 | .transition();
65 |
66 | &-sub {
67 | .font-size(12);
68 | color: var(--mi-menu-item-title-sub);
69 | }
70 | }
71 |
72 | .tag {
73 | position: absolute;
74 | right: 0;
75 | top: 50%;
76 | transform: translateY(-50%);
77 | .ellipsis();
78 | width: auto;
79 | .flex();
80 | .properties(max-width, @mi-gap * 8);
81 | .transition();
82 | margin-inline-end: 0;
83 | }
84 |
85 | :export {
86 | --menu-item-title-text: var(--mi-on-background);
87 | --menu-item-title-sub: rgba(var(--mi-rgb-on-background), .5);
88 | --menu-item-title-icon: var(--mi-on-background);
89 | --menu-item-title-active-text: var(--mi-on-primary);
90 | --menu-item-title-active-sub: rgba(var(--mi-rgb-on-primary), .6);
91 | --menu-item-title-active-icon: var(--mi-on-primary);
92 | }
--------------------------------------------------------------------------------
/src/locales/zh-cn/global.ts:
--------------------------------------------------------------------------------
1 | export default {
2 | site: `Admin Pro`,
3 | ok: `确定`,
4 | cancel: `取消`,
5 | save: `保存`,
6 | all: `全部`,
7 | add: `新增`,
8 | create: `立刻添加`,
9 | edit: `编辑`,
10 | editable: `进入编辑`,
11 | update: `更新`,
12 | submit: `提交`,
13 | close: `关闭`,
14 | closes: {
15 | all: '关闭全部',
16 | left: '关闭左侧',
17 | right: '关闭右侧',
18 | other: '关闭其它'
19 | },
20 | logout: `退出登录`,
21 | sent: `发送成功`,
22 | delete: {
23 | normal: `删除`,
24 | batch: `批量删除`,
25 | confirm: `确定删除当前所选项？`,
26 | select: `请选择需要删除的选项`
27 | },
28 | type: `类型`,
29 | state: `状态`,
30 | valid: `有效`,
31 | invalid: `无效`,
32 | reset: `重置`,
33 | more: `更多`,
34 | details: `详细信息`,
35 | code: `编码`,
36 | action: `管理操作`,
37 | key: `关键词`,
38 | system: `系统`,
39 | builtin: `内置`,
40 | customize: `自定义`,
41 | tips: `温馨提示`,
42 | knew: `知道了`,
43 | activate: `前往激活`,
44 | success: `操作成功`,
45 | error: {
46 | normal: `操作失败`,
47 | id: `ID 有误, 请刷新后再试`,
48 | auth: `请求的资源需要认证 ( Unauthorized )`,
49 | unknown: `未知错误`,
50 | status: `状态值不符合要求，请重新设置`,
51 | form: `找不到 Form 表单，校验失败，退出执行流程`
52 | },
53 | yes: `是`,
54 | no: `否`,
55 | seek: `查询`,
56 | app: `应用`,
57 | menu: `菜单`,
58 | internal: `内部`,
59 | external: `外部`,
60 | view: `点击查看`,
61 | back: `返回`,
62 | back2top: `回到顶部`,
63 | week: {
64 | sun: `周日`,
65 | mon: `周一`,
66 | tues: `周二`,
67 | wed: `周三`,
68 | thur: `周四`,
69 | fri: `周五`,
70 | sat: `周六`
71 | },
72 | dark: `深色`,
73 | light: `浅色`,
74 | 'no-data': `暂无符合条件的数据`,
75 | backtop: `回到顶部`,
76 | meta: {
77 | title: ``,
78 | keywords: ``,
79 | description: ``
80 | },
81 | step: {
82 | prev: `上一步`,
83 | next: `下一步`
84 | },
85 | donate: `您的支持，是我最大的动力`,
86 | colon: `：`,
87 | disable: `禁用`,
88 | enable: `启用`,
89 | available: `上架`,
90 | removed: `下架`,
91 | select: `请选择`,
92 | name: `名称`,
93 | copy: `复制`,
94 | copied: `复制成功`,
95 | setting: `设置`,
96 | page: {
97 | prefix: `第`,
98 | prev: `上一页`,
99 | next: `下一页`,
100 | unit: `页`,
101 | strip: `条`,
102 | total: `共`
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/src/components/items/detail/props.ts:
--------------------------------------------------------------------------------
1 | import { array, object } from 'vue-types'
2 | import {
3 | type DeviceSize,
4 | PropTypes,
5 | type TextSetting,
6 | type ThumbSetting,
7 | type Gap
8 | } from '../../../utils/types'
9 | import { tuple, animations } from '../../_utils/props'
10 |
11 | export interface DetailItem {
12 | [key: string]: any
13 | title?: string | TextSetting
14 | subtitle?: string | TextSetting
15 | thumb?: string
16 | }
17 |
18 | /**
19 | * +====================================+
20 | * | ItemsDetailProperties |
21 | * +====================================+
22 | * @param active 当前展开项 ( v-model )
23 | * @param data 数据
24 | * @param number 一行显示个数
25 | * @param maxWidth 容器最大宽度 ( 默认 100% )
26 | * @param gap 间距
27 | * @param animation 详情容器弹出动画
28 | * @param arrowColor 箭头颜色
29 | * @param titleSetting 标题设置
30 | * @param subtitleSetting 副标题设置
31 | * @param thumbSetting 缩略图设置
32 | * @param scrollToPosition 点击后滚动到指定位置
33 | * @param scrollOffset 滚动指定位置时的偏移量
34 | */
35 | export interface ItemsDetailProperties {
36 | active?: number
37 | data?: DetailItem[]
38 | number?: number | string | DeviceSize
39 | maxWidth?: string | number | DeviceSize
40 | gap?: number | string | DeviceSize | Gap
41 | animation?: string
42 | arrowColor?: string
43 | titleSetting?: TextSetting
44 | subtitleSetting?: TextSetting
45 | thumbSetting?: ThumbSetting
46 | scrollToPosition?: boolean
47 | scrollOffset?: number | string | DeviceSize
48 | }
49 |
50 | export const ItemsDetailProps = () => ({
51 | active: PropTypes.number.def(-1),
52 | data: array
42 |
53 | {tag}
54 |
43 | {icon ? (isVNode(icon) ? icon : h(icon)) : null}
44 |
45 | {props.item?.title ? (
46 |
51 | ) : null}
52 | -
44 |
- 自定义菜单一 45 |
- 自定义菜单二 46 |
43 | {open.value ?
45 |
56 |
59 |
60 | {...renderBreadcrumbItems()}
61 |
62 |