diff --git a/index.html b/index.html index e5d3ef8..0c0068c 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Control is Power diff --git a/public/logo.jpg b/public/logo.jpg new file mode 100644 index 0000000..5995b01 Binary files /dev/null and b/public/logo.jpg differ diff --git a/public/vitee.svg b/public/vitee.svg new file mode 100644 index 0000000..11a6f65 --- /dev/null +++ b/public/vitee.svg @@ -0,0 +1,544 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/index.ts b/src/components/index.ts index 50fc4fc..460fc56 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,6 +1,8 @@ //引入项目中全部的全局组件 import SvgIcon from './SvgIcon/index.vue' import Pagination from './Pagination/index.vue' +//引入element-plus-icon图标 +import * as ElementPlusIconsVue from '@element-plus/icons-vue' //全局对象 const allGloablComponent = { SvgIcon, Pagination } //对外暴露插件对象 @@ -12,5 +14,9 @@ export default { //注册为全局组件 app.component(key, allGloablComponent[key]) }) + //element-plus提供的图标注册为全局组件 + for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component) + } }, } diff --git a/src/layout/index.vue b/src/layout/index.vue index 764b16a..8fe222b 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -2,56 +2,75 @@
- q + + + + + + + +
-
- d -
+
d
-
-

-
+
\ No newline at end of file +p { + color: white; +} + diff --git a/src/layout/logo/index.vue b/src/layout/logo/index.vue new file mode 100644 index 0000000..9517228 --- /dev/null +++ b/src/layout/logo/index.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/layout/main/index.vue b/src/layout/main/index.vue new file mode 100644 index 0000000..421de6e --- /dev/null +++ b/src/layout/main/index.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/layout/menu/index.vue b/src/layout/menu/index.vue new file mode 100644 index 0000000..7393b76 --- /dev/null +++ b/src/layout/menu/index.vue @@ -0,0 +1,70 @@ + + + + + + + diff --git a/src/main.ts b/src/main.ts index 556c8e9..d937c2d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -39,7 +39,6 @@ app.use(ElementPlus, { // }, // }) - app.use(router) app.use(pinia) // 将应用挂载到挂载点上 diff --git a/src/router/routes.ts b/src/router/routes.ts index c0a6608..7336e4f 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -4,20 +4,170 @@ export const constantRoute = [ name: 'login', path: '/login', component: () => import('@/views/login/index.vue'), + meta: { + title: '登录', //菜单标题 + hidden: true, //代表路由标题在菜单中是否隐藏 true:隐藏 false:不隐藏 + icon: 'Promotion', //菜单文字左侧的图标,支持element-plus全部图标 + }, }, { - name: 'home', + name: 'layout', path: '/', component: () => import('@/layout/index.vue'), + //直接指向home + redirect: '/home', + meta: { + title: 'layout', + hidden: false, + icon: 'Avatar', + }, + children: [ + { + name: 'home', + path: '/home', + component: () => import('@/views/home/index.vue'), + meta: { + title: '首页', + hidden: false, + icon: 'HomeFilled', + }, + }, + ], + }, + { + name: 'scr', + path: '/scr', + component: () => import('@/layout/index.vue'), + meta: { + title: '数据大屏', + hidden: false, + icon: 'Monitor', + }, + children: [ + { + name: 'screen', + path: '/screen', + component: () => import('@/views/screen/index.vue'), + meta: { + title: '数据大屏', + hidden: false, + icon: 'Monitor', + }, + }, + ], + }, + { + name: 'acl', + path: '/acl', + component: () => import('@/layout/index.vue'), + meta: { + title: '权限管理', + hidden: false, + icon: 'Operation', + }, + children: [ + { + name: 'user', + path: '/user', + component: () => import('@/views/acl/user/index.vue'), + meta: { + title: '用户管理', + hidden: false, + icon: 'User', + }, + }, + { + name: 'role', + path: '/role', + component: () => import('@/views/acl/role/index.vue'), + meta: { + title: '权限管理', + hidden: false, + icon: 'Open', + }, + }, + { + name: 'permission', + path: '/permission', + component: () => import('@/views/acl/permission/index.vue'), + meta: { + title: '菜单管理', + hidden: false, + icon: 'Document', + }, + }, + ], + }, + { + name: 'product', + path: '/product', + component: () => import('@/layout/index.vue'), + meta: { + title: '商品管理', + hidden: false, + icon: 'Goods', + }, + children: [ + { + name: 'attr', + path: '/attr', + component: () => import('@/views/product/attr/index.vue'), + meta: { + title: '属性管理', + hidden: false, + icon: 'InfoFilled', + }, + }, + { + name: 'trademark', + path: '/trademark', + component: () => import('@/views/product/trademark/index.vue'), + meta: { + title: '品牌管理', + hidden: false, + icon: 'Medal', + }, + }, + { + name: 'sku', + path: '/sku', + component: () => import('@/views/product/sku/index.vue'), + meta: { + title: 'SKU管理', + hidden: false, + icon: 'ScaleToOriginal', + }, + }, + { + name: 'spu', + path: '/spu', + component: () => import('@/views/product/spu/index.vue'), + meta: { + title: 'SPU管理', + hidden: false, + icon: 'Reading', + }, + }, + ], }, { name: '404', path: '/404', component: () => import('@/views/404/index.vue'), + meta: { + title: '404', + hidden: true, + icon: 'DocumentDelete', + }, }, { name: 'Any', path: '/:pathMatch(.*)*', redirect: '/404', + meta: { + title: '任意路由', + hidden: true, + icon: 'DocumentRemove', + }, }, ] diff --git a/src/setting.ts b/src/setting.ts new file mode 100644 index 0000000..70240d1 --- /dev/null +++ b/src/setting.ts @@ -0,0 +1,6 @@ +//用于项目logo或者标题的配置 +export default { + title: '山长晓岫青', //项目标题 + logo: '/public/logo.jpg', //项目logo设置 + logoHidden: true, //logo组件是否隐藏 +} diff --git a/src/store/modules/types/types.ts b/src/store/modules/types/types.ts index 4d8b659..58460a5 100644 --- a/src/store/modules/types/types.ts +++ b/src/store/modules/types/types.ts @@ -1,4 +1,6 @@ +import type { RouteRecordRaw } from 'vue-router' //定义小仓库数据state类型 export interface UserState { token: string | null + menuRoutes: RouteRecordRaw[] } diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index ea47f61..638a3bd 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -7,6 +7,8 @@ import type { loginForm, loginResponseDate } from '@/api/user/type' import type { UserState } from '@/store/modules/types/types' //引入操作本地存储的工具方法 import { SET_TOKEN, GET_TOKEN } from '@/utils/token' +//引入路由（常量路由） +import { constantRoute } from '@/router/routes' //创建小仓库 let useUserStore = defineStore('User', { //小仓库存储数据的地方 @@ -14,6 +16,7 @@ let useUserStore = defineStore('User', { return { token: GET_TOKEN(), // token: localStorage.getItem('TOKEN'), //用户唯一标识token + menuRoutes: constantRoute, } }, //异步|逻辑的地方 diff --git a/src/styles/variable.scss b/src/styles/variable.scss index 942d113..578f83a 100644 --- a/src/styles/variable.scss +++ b/src/styles/variable.scss @@ -4,7 +4,7 @@ //左侧的菜单的宽度 $base-menu-width:260px; //左侧菜单的背景颜色 -$base-menu-background:darkslateblue; +$base-menu-background:black; $base-menu-min-width:50px; // 顶部导航的高度 diff --git a/src/views/404/index.vue b/src/views/404/index.vue index 4f15b95..0fb311c 100644 --- a/src/views/404/index.vue +++ b/src/views/404/index.vue @@ -1,24 +1,30 @@ diff --git a/src/views/acl/permission/index.vue b/src/views/acl/permission/index.vue new file mode 100644 index 0000000..82f170a --- /dev/null +++ b/src/views/acl/permission/index.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/acl/role/index.vue b/src/views/acl/role/index.vue new file mode 100644 index 0000000..df91b02 --- /dev/null +++ b/src/views/acl/role/index.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/acl/user/index.vue b/src/views/acl/user/index.vue new file mode 100644 index 0000000..dc9df1b --- /dev/null +++ b/src/views/acl/user/index.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 2996add..c9a83e2 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -1,17 +1,5 @@ - - + + diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 452a13a..9185e4e 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -61,8 +61,9 @@ const loginForm = reactive({ password: '111111', }) const loginHandle = async () => { - //保证全部表单项校验通过 + //保证全部表单项校验通过！！！ await loginforms.value.validate() + //开始加载 loading.value = true //通知仓库发登录请求 @@ -81,7 +82,7 @@ const loginHandle = async () => { $router.push('/') // 结束加载效果 loading.value = false - }, 1000) // 2000 毫秒 = 2 秒 + }, 1000) // 1000 毫秒 = 1 秒 } catch (error) { loading.value = false ElNotification({ @@ -91,7 +92,7 @@ const loginHandle = async () => { } } -//自定义表单校正规则 +//先自定义表单校正规则 const validatorUserName = (rule: any, value: any, callback: any) => { //rule:即为校验规则对象 // value:即为表单元素文本内容 @@ -114,7 +115,7 @@ const validatorUserPassword = (rule: any, value: any, callback: any) => { callback(new Error('账号长度至少六位！')) } } -//表单校验配置 +//再设置表单校验配置 const rules = { username: [ // { required: true, message: '用户名不能为空！', trigger: 'change' }, diff --git a/src/views/product/attr/index.vue b/src/views/product/attr/index.vue new file mode 100644 index 0000000..88fd3b8 --- /dev/null +++ b/src/views/product/attr/index.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/product/sku/index.vue b/src/views/product/sku/index.vue new file mode 100644 index 0000000..4bd1dbc --- /dev/null +++ b/src/views/product/sku/index.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/product/spu/index.vue b/src/views/product/spu/index.vue new file mode 100644 index 0000000..0892cc5 --- /dev/null +++ b/src/views/product/spu/index.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/product/trademark/index.vue b/src/views/product/trademark/index.vue new file mode 100644 index 0000000..9b65964 --- /dev/null +++ b/src/views/product/trademark/index.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue new file mode 100644 index 0000000..f443fb1 --- /dev/null +++ b/src/views/screen/index.vue @@ -0,0 +1,6 @@ + + + +