13 |
18 | {{ title }}
14 | 15 |
7 |
23 |
24 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig is awesome: https://EditorConfig.org
2 |
3 | # top-most EditorConfig file
4 | root = true
5 |
6 | # Unix-style newlines with a newline ending every file
7 | [*]
8 | end_of_line = lf
9 | insert_final_newline = true
10 |
11 | # Matches multiple files with brace expansion notation
12 | # Set default charset
13 | [*.{js,py}]
14 | charset = utf-8
15 |
16 | # 4 space indentation
17 | [*.py]
18 | indent_style = space
19 | indent_size = 4
20 |
21 | # 2 space indentation
22 | [*.{vue,scss,ts}]
23 | indent_style = space
24 | indent_size = 2
25 |
26 | # Tab indentation (no size specified)
27 | [Makefile]
28 | indent_style = tab
29 |
30 | # Indentation override for all JS under lib directory
31 | [lib/**.js]
32 | indent_style = space
33 | indent_size = 2
34 |
35 | # Matches the exact files either package.json or .travis.yml
36 | [{package.json,.travis.yml}]
37 | indent_style = space
38 | indent_size = 2
39 |
--------------------------------------------------------------------------------
/src/components/charts/apex-chart/ApexChartAreaChart.vue:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
8 |
9 |
10 |
20 |
21 |
22 |
11 |
13 | Vue Material Admin
14 | 16 | {{ $t('have_account') }} ? 17 | {{ $t('sign_in') }} 18 |
19 |
18 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/src/store/chatStore.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from 'pinia';
2 | import { initChat } from '@/api/chat';
3 | import { IChat, IUser } from '@/api/type';
4 |
5 | export const useChatStore = defineStore('chat', {
6 | // ℹ️ arrow function recommended for full type inference
7 | state: () => ({
8 | chats: [] as IChat[],
9 | chatContacts: [] as IUser[],
10 | profile: null
11 | }),
12 | actions: {
13 | setChats(chats) {
14 | this.chats = chats;
15 | },
16 | setChatContacts(contacts) {
17 | this.chatContacts = contacts;
18 | },
19 | setProfile(profile) {
20 | this.profile = profile;
21 | },
22 | async initChat() {
23 | try {
24 | const response = await initChat();
25 | const { data } = response;
26 | const { chats, contacts } = data;
27 | this.setChats(chats);
28 | this.setChatContacts(contacts);
29 | this.setProfile(this.profile);
30 | return Promise.resolve(response);
31 | } catch (e) {
32 | return Promise.reject(e);
33 | }
34 | }
35 | }
36 | });
37 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "./",
4 | "target": "esnext",
5 | "useDefineForClassFields": true,
6 | "module": "esnext",
7 | "moduleResolution": "bundler",
8 | "isolatedModules": true,
9 | "strict": true,
10 | "jsx": "preserve",
11 | "jsxFactory": "h",
12 | "jsxFragmentFactory": "Fragment",
13 | "sourceMap": true,
14 | "noImplicitAny": false,
15 | "resolveJsonModule": true,
16 | "esModuleInterop": true,
17 | "paths": {
18 | "@/*": [
19 | "src/*"
20 | ]
21 | },
22 | "lib": [
23 | "esnext",
24 | "dom",
25 | "dom.iterable",
26 | "scripthost"
27 | ],
28 | "skipLibCheck": true,
29 | "types": [
30 | "vite/client",
31 | "unplugin-vue-define-options/macros-global"
32 | ]
33 | },
34 | "include": [
35 | "vite.config.*",
36 | "env.d.ts",
37 | "shims.d.ts",
38 | "src/**/*",
39 | "src/**/*.vue",
40 | "auto-imports.d.ts",
41 | "themeConfig.ts"
42 | ],
43 | "exclude": [
44 | "dist",
45 | "node_modules",
46 | "src/@iconify/*"
47 | ]
48 | }
49 |
--------------------------------------------------------------------------------
/src/layouts/DefaultLayout.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
20 |
23 | {{ t(String(route.name).toLocaleLowerCase()) }}
21 |
20 |
22 |
23 |
25 |
8 |
23 |
24 |
25 |
40 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | // eslint 保存格式化
3 | "eslint.enable": true,
4 | "eslint.run": "onType",
5 | "eslint.options": {
6 | "extensions": [".js", ".ts", ".jsx", ".tsx", ".vue"]
7 | },
8 | // 编辑器保存格式化
9 | "editor.codeActionsOnSave": {
10 | "source.fixAll": "explicit",
11 | "source.fixAll.eslint": "explicit"
12 | },
13 | // .ts 文件格式化程序
14 | "[typescript]": {
15 | "editor.defaultFormatter": "esbenp.prettier-vscode"
16 | },
17 | // .vue 文件格式化程序
18 | "[vue]": {
19 | "editor.defaultFormatter": "esbenp.prettier-vscode"
20 | },
21 | "[json]": {
22 | "editor.defaultFormatter": "esbenp.prettier-vscode"
23 | },
24 | // 操作时作为单词分隔符的字符
25 | "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
26 | // 一个制表符等于的空格数
27 | "editor.tabSize": 2,
28 | // 行尾字符
29 | "files.eol": "\n",
30 | // 保存到额时候用使用 prettier进行格式化
31 | "editor.formatOnSave": true
32 |
33 | // // 不要有分号
34 | // "prettier.semi": false,
35 | // // 使用单引号
36 | // "prettier.singleQuote": true,
37 | // // 默认使用prittier作为格式化工具
38 | // "editor.defaultFormatter": "esbenp.prettier-vscode",
39 | // // 一行的字符数，如果超过会进行换行，默认为80
40 | // "prettier.printWidth": 200,
41 | // // 尾随逗号问题，设置为none 不显示 逗号
42 | // "prettier.trailingComma": "none"
43 | }
44 |
--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
1 | import { fetchMe } from '@/api/user';
2 | // import { useUserStore } from '@/store/userStore';
3 | import { createRouter, createWebHashHistory } from 'vue-router';
4 | import PrivateRoutes from './private';
5 | import PublicRoutes from './public';
6 |
7 | const whiteList = ['Login', 'Register', 'Forget', 'Reset'];
8 |
9 | export const router = createRouter({
10 | history: createWebHashHistory(import.meta.env.BASE_URL),
11 | scrollBehavior(to) {
12 | if (to.hash) return { el: to.hash, behavior: 'smooth', top: 60 };
13 |
14 | return { top: 0 };
15 | },
16 | routes: [
17 | {
18 | path: '/:pathMatch(.*)*',
19 | component: () => import('@/views/pages/NotFound.vue')
20 | },
21 | PrivateRoutes,
22 | PublicRoutes
23 | ]
24 | });
25 |
26 | // Docs: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
27 | router.beforeEach(async (to) => {
28 | const routeName = String(to.name);
29 | if (whiteList.includes(routeName)) {
30 | return true;
31 | } else {
32 | // const userStore = useUserStore();
33 | try {
34 | const resp = await fetchMe();
35 | console.log(resp);
36 | return true;
37 | } catch (error) {
38 | return { name: 'Login' };
39 | }
40 | }
41 | });
42 |
--------------------------------------------------------------------------------
/src/components/dropdown/NotificationDropdown.vue:
--------------------------------------------------------------------------------
1 |
43 |
44 |
45 |
9 |
10 |
11 |
20 |
21 |
22 |
12 |
14 | Vue Material Admin
15 |
17 | {{ $t('Create account') }}
18 |
19 |
9 |
30 |
10 |
11 |
12 |
14 |
15 |
18 |
19 |
27 |
28 |
29 | {{ list.title }}
13 |{{ list.subtitle }}
20 |{{ list.subtitle }}
21 |
22 | {{
23 | list.link
24 | }}
25 |
26 |
27 |
28 |
35 |
36 |
37 |
60 |
--------------------------------------------------------------------------------
/src/components/form-layout/TabForm.vue:
--------------------------------------------------------------------------------
1 |
21 |
22 |
23 | 
53 |
60 | Logout
61 |
62 |
3 |
14 |
15 |
70 |
--------------------------------------------------------------------------------
/src/components/charts/apex-chart/ApexChartNewTechnologiesData.vue:
--------------------------------------------------------------------------------
1 |
65 |
66 |
67 |
4 |
5 | BACK HOME
12 |
13 | 404
6 |Oops! Page Not Be Found
7 |8 | Sorry but the page you are looking for does not exist, have been removed. name changed or is temporarily 9 | unavailable 10 |
11 |
11 |
12 |
13 |
14 |
15 | Horizontal Form
16 |
18 |
19 |
20 |
21 |
22 | Horizontal Form with Icons
23 |
24 |
26 |
27 |
28 |
29 |
30 |
31 | Vertical Form
33 |
35 |
36 |
37 |
38 |
39 |
40 | Vertical Form With Icon
42 |
44 |
45 |
46 |
47 |
48 |
50 |
51 |
52 |
53 |
54 |
62 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
36 |
40 |
41 |
42 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/src/composables/useApi.ts:
--------------------------------------------------------------------------------
1 | import { ref, type Ref } from 'vue';
2 | import axios, { type AxiosRequestConfig, type AxiosError } from 'axios';
3 |
4 | export interface UseApiOptions
37 |
38 |
39 |
59 | {{ $t('monthly_earnings') }}
60 |
61 |
63 |
64 |
67 |
74 | $6,820
68 |
69 |
73 |
78 |
79 |
80 |
30 |
33 | {{ user.username }}
31 |{{ user.role }}
32 |
36 | Message
37 | Contact
38 |
39 |
66 |
67 |
68 |
69 | {{ arg.timeText }}
70 | {{ arg.event.title }}
71 |
72 |
73 |
74 |
75 |
76 |
79 |
--------------------------------------------------------------------------------
/src/data/dashboard/dashboardData.ts:
--------------------------------------------------------------------------------
1 | import type { recentTrans, productPerformanceType } from '@/types/dashboard/index';
2 |
3 | /*--Recent Transaction--*/
4 | const recentTransaction: recentTrans[] = [
5 | {
6 | title: '09:30 am',
7 | subtitle: 'Payment received from John Doe of $385.90',
8 | textcolor: 'primary',
9 | boldtext: false,
10 | line: true,
11 | link: '',
12 | url: ''
13 | },
14 | {
15 | title: '10:00 am',
16 | subtitle: 'New sale recorded',
17 | textcolor: 'secondary',
18 | boldtext: true,
19 | line: true,
20 | link: '#ML-3467',
21 | url: ''
22 | },
23 | {
24 | title: '12:00 am',
25 | subtitle: 'Payment was made of $64.95 to Michael',
26 | textcolor: 'success',
27 | boldtext: false,
28 | line: true,
29 | link: '',
30 | url: ''
31 | },
32 | {
33 | title: '09:30 am',
34 | subtitle: 'New sale recorded',
35 | textcolor: 'warning',
36 | boldtext: true,
37 | line: true,
38 | link: '#ML-3467',
39 | url: ''
40 | },
41 | {
42 | title: '09:30 am',
43 | subtitle: 'New arrival recorded',
44 | textcolor: 'error',
45 | boldtext: true,
46 | line: true,
47 | link: '',
48 | url: ''
49 | },
50 | {
51 | title: '12:00 am',
52 | subtitle: 'Payment Received',
53 | textcolor: 'success',
54 | boldtext: false,
55 | line: false,
56 | link: '',
57 | url: ''
58 | }
59 | ];
60 |
61 | /*Basic Table 1*/
62 | const productPerformance: productPerformanceType[] = [
63 | {
64 | id: 1,
65 | name: 'Sunil Joshi',
66 | post: 'Web Designer',
67 | pname: 'Elite Admin',
68 | status: 'Low',
69 | statuscolor: 'primary',
70 | budget: '$3.9'
71 | },
72 | {
73 | id: 2,
74 | name: 'Andrew McDownland',
75 | post: 'Project Manager',
76 | pname: 'Real Homes WP Theme',
77 | status: 'Medium',
78 | statuscolor: 'secondary',
79 | budget: '$24.5k'
80 | },
81 | {
82 | id: 3,
83 | name: 'Christopher Jamil',
84 | post: 'Project Manager',
85 | pname: 'MedicalPro WP Theme',
86 | status: 'High',
87 | statuscolor: 'error',
88 | budget: '$12.8k'
89 | },
90 | {
91 | id: 4,
92 | name: 'Nirav Joshi',
93 | post: 'Frontend Engineer',
94 | pname: 'Hosting Press HTML',
95 | status: 'Critical',
96 | statuscolor: 'success',
97 | budget: '$2.4k'
98 | }
99 | ];
100 |
101 | export { recentTransaction, productPerformance };
102 |
--------------------------------------------------------------------------------
/README.zh-CN.md:
--------------------------------------------------------------------------------
1 | # Vue Material Admin
2 |
3 |
4 | [](https://circleci.com/gh/tookit/vue-material-admin/tree/dev)
5 |
6 | English | [简体中文](./README.zh-CN.md)
7 |
8 |
9 | ## Introduction
10 | Vue Material Admin Template is a [Vue](https://vuejs.org/index.html/) Based Material Design Admin Template.
11 | And use [Vuetifyjs](https://vuetifyjs.com/) as base framework.
12 | Vuetify is Awesome.
13 |
14 | ## Discrod Change
15 | [Discrod channel](https://discord.gg/7f6TVx)
16 |
17 | ## Demo
18 | [Vuetify2 version](https://vma.isocked.com/#/auth/login)
19 | [Vuetify3 version](https://vma3.isocked.com/#/auth/login)
20 |
21 |
22 | ## Preview
23 | 
24 |
25 | ## Documentation
26 |
27 | [doc](http://doc.isocked.com/)
28 |
29 | ## Project Structure
30 | ``` bash
31 | ├── src
32 | │ ├── api
33 | │ ├── components
34 | │ ├── mixins
35 | │ ├── views
36 | │ ├── router
37 | │ ├── store
38 | │ ├── util
39 | │ ├── theme
40 | │ │ ├── default.sass
41 | │ └── App.vue
42 | │ └── event.js
43 | │ └── main.js
44 | ├── dist
45 | ├── release
46 | ├── static (or asset)
47 | ├── node_modules
48 | ├── test
49 | ├── README.md
50 | ├── package.json
51 | ├── vue.config.js
52 | ├── index.html
53 | └── .gitignore
54 | ```
55 |
56 | ## Project setup
57 | ```
58 | yarn install
59 | ```
60 |
61 | ### Compiles and hot-reloads for development
62 | ```
63 | yarn run serve
64 | ```
65 |
66 | ### Compiles and minifies for production
67 | ```
68 | yarn run build
69 | ```
70 |
71 | ### Run your tests
72 | ```
73 | yarn run test
74 | ```
75 |
76 | ### Lints and fixes files
77 | ```
78 | yarn run lint
79 | ```
80 |
81 | ### Customize configuration
82 | See [Configuration Reference](https://cli.vuejs.org/config/).
83 |
84 |
85 | ### Reference
86 |
87 | * [Vuetifyjs](https://vuetifyjs.com/)
88 | * [Vue](https://vuejs.org/index.html/)
89 | * [ICON](https://materialdesignicons.com/)
90 | * [SASS](http://sass-lang.com/)
91 |
92 | ### Donate
93 | If you find this project useful, you can buy author a glass of juice :tropical_drink:
94 |
95 |
96 | [Paypal Me](https://www.paypal.me/tookit)
97 |
98 | [Buy me a coffee](https://www.buymeacoffee.com/tookit)
99 |
100 | 
101 |
102 | ## License
103 |
104 | [MIT](https://github.com/tookit/vue-material-admin/blob/master/LICENSE)
--------------------------------------------------------------------------------
/src/components/charts/YearlyBreakup.vue:
--------------------------------------------------------------------------------
1 |
45 |
46 |
49 | {{ $t('yearly_breakup') }}
50 |
51 |
54 |
69 | $36,358
55 |
56 |
60 |
61 |
62 |
64 |
65 |
67 |
68 |
62 |
64 |
65 |
67 |
72 |
73 |
74 |
21 |
37 |
22 |
23 |
25 |
26 |
27 |
35 |
36 |
51 |
53 |
73 | {{ props.code[preferredCodeLanguage] }}
74 |
75 |
76 |
77 |
54 |
55 |
56 |
62 |
63 |
69 |
70 |
71 |
72 |
76 |
77 | {{ $t('remember') }}
78 |
79 |
83 |
80 | {{ $t('forget_pass') }} ?
81 |
82 |
87 |
94 |
88 | {{ $t('sales_overview') }}
89 |
90 |
91 |
93 |
95 |
97 |
77 |
79 |
44 |
45 |
46 |
47 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
86 |
87 |
88 |
126 |
--------------------------------------------------------------------------------
/src/components/forms/EventForm.vue:
--------------------------------------------------------------------------------
1 |
54 |
55 |
56 |
48 | {{ $t('add_event') }}
49 |
50 |
52 |
59 |
61 | {{ $t('filter') }}
62 |
75 |
63 |
74 |
126 | Cancel
127 | Submit
128 |
129 |