-
+ :name="tab.name" :closable="tab.name !== 'Home'" >
{{tab.meta.title}}
@@ -51,7 +51,6 @@ export default {
* @param tabName 删除的页面名
*/
handleTabRemove: function (tabName) {
- console.log(tabName)
const newTab = PageUtils.removePageTab(tabName)
RouteUtils.goto(newTab)
},
@@ -67,17 +66,32 @@ export default {
}
-
diff --git a/src/components/select/ChinaAreaSelect2.vue b/src/components/select/ChinaAreaSelect2.vue
new file mode 100644
index 0000000..0485619
--- /dev/null
+++ b/src/components/select/ChinaAreaSelect2.vue
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
index 84b5497..049b728 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,7 @@ import api from './assets/config/api'
import NProgress from 'nprogress'
import './assets/iconfont/iconfont.css'
import 'nprogress/nprogress.css'
+import 'animate.css'
import './assets/css/common.scss'
import CacheUtils from './plugins/utils/CacheUtils'
@@ -29,6 +30,7 @@ if (userInfo !== null) {
RouteUtils.addRoutes(userRoutes)
}
+// 页面路由前处理
router.beforeEach((to, from, next) => {
// 动态修改标题
if (to.meta.title) {
@@ -53,6 +55,7 @@ router.beforeEach((to, from, next) => {
}
})
+// 页面路由后处理
router.afterEach(to => {
PageUtils.addPageTab(to)
NProgress.done()
diff --git a/src/plugins/utils/CacheUtils.js b/src/plugins/utils/CacheUtils.js
index 382c0f4..69cb72f 100644
--- a/src/plugins/utils/CacheUtils.js
+++ b/src/plugins/utils/CacheUtils.js
@@ -1,39 +1,38 @@
-/**
- * 保存对象缓存
- * @param key 主键
- * @param value 值
- */
-const setObject = function (key, value) {
- sessionStorage.setItem(key, JSON.stringify(value))
-}
-
-/**
- * 获取对象缓存
- * @param key 主键
- * @return {*}
- */
-const getObject = function (key) {
- let value = sessionStorage.getItem(key)
- if (value !== null) {
- return JSON.parse(value)
- } else {
- return null
- }
-}
-
-/**
- * 清楚所有缓存
- */
-const clearAll = function () {
- sessionStorage.clear()
-}
-
export default {
+ /**
+ * 保存对象缓存
+ * @param key 主键
+ * @param value 值
+ */
+ setObject: function (key, value) {
+ sessionStorage.setItem(key, JSON.stringify(value))
+ },
+ /**
+ * 获取对象缓存
+ * @param key 主键
+ * @return {*}
+ */
+ getObject: function (key) {
+ let value = sessionStorage.getItem(key)
+ if (value !== null) {
+ return JSON.parse(value)
+ } else {
+ return null
+ }
+ },
+
+ /**
+ * 清楚所有缓存
+ */
+ clearAll: function () {
+ sessionStorage.clear()
+ },
+ clear: function (key) {
+ sessionStorage.removeItem(key)
+ },
key: {
'USER_INFO': 'USER_INFO',
- 'USER_ROUTES': 'USER_ROUTES'
- },
- setObject,
- getObject,
- clearAll
+ 'USER_ROUTES': 'USER_ROUTES',
+ 'LOCK_PWD': 'LOCK_PWD'
+ }
}
diff --git a/src/plugins/utils/PageUtils.js b/src/plugins/utils/PageUtils.js
index dcfaec8..35e7910 100644
--- a/src/plugins/utils/PageUtils.js
+++ b/src/plugins/utils/PageUtils.js
@@ -1,117 +1,109 @@
import store from '../../store'
import StoreUtils from './StoreUtils'
-/**
- * 新开页面Tab，已打开过，则不再重复打开
- * @param to 页面路由对象
- */
-const addPageTab = function (to) {
- let tabs = store.state.pageTabs
- if (to.name !== 'Login' && to.name !== 'Page404') {
- // 设置当前激活页面
- StoreUtils.setActivePage(to)
+export default {
+ /**
+ * 新开页面Tab，已打开过，则不再重复打开
+ * @param to 页面路由对象
+ */
+ addPageTab: function (to) {
+ let tabs = store.state.pageTabs
+ if (to.name !== 'Login' && to.name !== 'Page404' && to.name !== 'Lock') {
+ // 设置当前激活页面
+ StoreUtils.setActivePage(to)
- // 设置页面tab
- let index = -1
- let replace = false
- for (let i = 0; i < tabs.length; i++) {
- if (to.name === tabs[i].name) {
- index = i
- if (to.path !== tabs[i].path) {
- replace = true
+ // 设置页面tab
+ let index = -1
+ let replace = false
+ for (let i = 0; i < tabs.length; i++) {
+ if (to.name === tabs[i].name) {
+ index = i
+ if (to.path !== tabs[i].path) {
+ replace = true
+ }
+ break
}
+ }
+
+ if (index === -1) {
+ tabs.push(to)
+ } else if (replace) { // 路径发生了变化，则替换原tab
+ tabs.splice(index, 1, to)
+ }
+ StoreUtils.setPageTabs(tabs)
+
+ // 设置页面打开顺序链
+ let pageTabLink = store.state.pageTabLink
+ let linkIndex = -1
+ for (let i = 0; i < pageTabLink.length; i++) {
+ if (to.name === pageTabLink[i].name) {
+ linkIndex = i
+ break
+ }
+ }
+ if (linkIndex > -1) {
+ pageTabLink.splice(linkIndex, 1)
+ }
+ pageTabLink.push(to)
+ StoreUtils.setPageTabLink(pageTabLink)
+ }
+ },
+ /**
+ * 删除页面tab，同时打开上一个页面
+ * @param tabName 页面tab名
+ * @return 返回上一个打开的页面
+ */
+ removePageTab: function (tabName) {
+ // 更新页面Tab
+ let tabs = store.state.pageTabs
+ let tabIndex = -1
+ for (let i = 0; i < tabs.length; i++) {
+ if (tabName === tabs[i].name) {
+ tabIndex = i
break
}
}
-
- if (index === -1) {
- tabs.push(to)
- } else if (replace) { // 路径发生了变化，则替换原tab
- tabs.splice(index, 1, to)
+ if (tabIndex > -1) {
+ tabs.splice(tabIndex, 1)
}
StoreUtils.setPageTabs(tabs)
- // 设置页面打开顺序链
+ // 更新页面Tab展开顺序
let pageTabLink = store.state.pageTabLink
let linkIndex = -1
for (let i = 0; i < pageTabLink.length; i++) {
- if (to.name === pageTabLink[i].name) {
+ if (tabName === pageTabLink[i].name) {
linkIndex = i
- break
}
}
if (linkIndex > -1) {
pageTabLink.splice(linkIndex, 1)
}
- pageTabLink.push(to)
StoreUtils.setPageTabLink(pageTabLink)
- }
-}
-/**
- * 删除页面tab，同时打开上一个页面
- * @param tabName 页面tab名
- * @return 返回上一个打开的页面
- */
-const removePageTab = function (tabName) {
- // 更新页面Tab
- let tabs = store.state.pageTabs
- let tabIndex = -1
- for (let i = 0; i < tabs.length; i++) {
- if (tabName === tabs[i].name) {
- tabIndex = i
- break
- }
- }
- if (tabIndex > -1) {
- tabs.splice(tabIndex, 1)
- }
- StoreUtils.setPageTabs(tabs)
-
- // 更新页面Tab展开顺序
- let pageTabLink = store.state.pageTabLink
- let linkIndex = -1
- for (let i = 0; i < pageTabLink.length; i++) {
- if (tabName === pageTabLink[i].name) {
- linkIndex = i
- }
- }
- if (linkIndex > -1) {
- pageTabLink.splice(linkIndex, 1)
- }
- StoreUtils.setPageTabLink(pageTabLink)
-
- // 返回上一个页面tab
- return pageTabLink[pageTabLink.length - 1]
-}
-
-/**
- * 删除页面所有tab，同时打开主页
- */
-const removeAllPageTab = function () {
- StoreUtils.resetPageTab()
-}
-
-/**
- * 根据页面Key，获取tabs中的页面对象（路由对象）
- * @param pageKey 页面key（路由name）
- * @return {*}
- */
-const getRouteByPageKey = function (pageKey) {
- const tabs = store.state.pageTabs
- let to
- for (let i = 0; i < tabs.length; i++) {
- if (pageKey === tabs[i].name) {
- to = tabs[i]
- break
+ // 返回上一个页面tab
+ return pageTabLink[pageTabLink.length - 1]
+ },
+ /**
+ * 删除页面所有tab，同时打开主页
+ */
+ removeAllPageTab: function () {
+ StoreUtils.resetPageTab()
+ },
+ /**
+ * 根据页面Key，获取tabs中的页面对象（路由对象）
+ * @param pageKey 页面key（路由name）
+ * @return {*}
+ */
+ getRouteByPageKey: function (pageKey) {
+ const tabs = store.state.pageTabs
+ let to
+ for (let i = 0; i < tabs.length; i++) {
+ if (pageKey === tabs[i].name) {
+ to = tabs[i]
+ break
+ }
}
+ return to
}
- return to
-}
-
-export default {
- addPageTab,
- removePageTab,
- getRouteByPageKey,
- removeAllPageTab
}
diff --git a/src/plugins/utils/RouteUtils.js b/src/plugins/utils/RouteUtils.js
index b35b515..d73c52e 100644
--- a/src/plugins/utils/RouteUtils.js
+++ b/src/plugins/utils/RouteUtils.js
@@ -36,8 +36,12 @@ export default {
if (!store.state.hasAddRoutes) {
store.commit('setHasAddRoutes', true)
router.addRoutes([userRoutes])
- // 动态路由加载完之后，再加入404等路由
+ // 动态路由加载完之后，再加入404、lock等路由
router.addRoutes([{
+ path: '/lock',
+ name: 'Lock',
+ component: () => import('../../views/admin/lock/Lock')
+ }, {
path: '*',
name: 'Page404',
component: () => import('../../views/admin/error/Page404')
diff --git a/src/plugins/utils/StoreUtils.js b/src/plugins/utils/StoreUtils.js
index 807e598..a1f75be 100644
--- a/src/plugins/utils/StoreUtils.js
+++ b/src/plugins/utils/StoreUtils.js
@@ -1,34 +1,51 @@
import store from '../../store'
-const resetAll = function () {
- store.commit('resetAll')
-}
-
-const resetPageTab = function () {
- store.commit('resetPageTab')
-}
-
-const setCollapse = function (collapse) {
- store.commit('setCollapse', collapse)
-}
-
-const setActivePage = function (activePage) {
- store.commit('setActivePage', activePage)
-}
-
-const setPageTabs = function (tabs) {
- store.commit('setPageTabs', tabs)
-}
-
-const setPageTabLink = function (tabs) {
- store.commit('setPageTabLink', tabs)
-}
-
export default {
- resetAll,
- resetPageTab,
- setActivePage,
- setPageTabs,
- setPageTabLink,
- setCollapse
+ /**
+ * 重置vuex
+ */
+ resetAll: function () {
+ store.commit('resetAll')
+ },
+ /**
+ * 重置页面页签
+ */
+ resetPageTab: function () {
+ store.commit('resetPageTab')
+ },
+ /**
+ * 设置菜单折叠状态
+ * @param collapse 是否折叠
+ */
+ setCollapse: function (collapse) {
+ store.commit('setCollapse', collapse)
+ },
+ /**
+ * 设置当前激活的页面
+ * @param activePage 激活的页面对象
+ */
+ setActivePage: function (activePage) {
+ store.commit('setActivePage', activePage)
+ },
+ /**
+ * 设置页面的页签
+ * @param tabs 页签数组
+ */
+ setPageTabs: function (tabs) {
+ store.commit('setPageTabs', tabs)
+ },
+ /**
+ * 设置页面页签的打开顺序
+ * @param tabs 有序的页签数组
+ */
+ setPageTabLink: function (tabs) {
+ store.commit('setPageTabLink', tabs)
+ },
+ /**
+ * 设置语言
+ * @param lang 语言（zh-CN，en）
+ */
+ setLang: function (lang) {
+ store.commit('setLang', lang)
+ }
}
diff --git a/src/router.js b/src/router.js
index 5eaa82a..f93468f 100644
--- a/src/router.js
+++ b/src/router.js
@@ -4,6 +4,10 @@ import Login from './views/admin/login/Login'
Vue.use(Router)
+/**
+ * 初始化路由
+ * @return {VueRouter}
+ */
const initRouter = function () {
return new Router({
routes: [
diff --git a/src/store.js b/src/store.js
index ad33ecc..2f38986 100644
--- a/src/store.js
+++ b/src/store.js
@@ -13,6 +13,7 @@ const homePageTab = {
}
export default new Vuex.Store({
state: {
+ lang: 'zh-CN',
collapse: false,
hasAddRoutes: false,
activePage: {},
@@ -20,6 +21,9 @@ export default new Vuex.Store({
pageTabLink: [homePageTab]
},
mutations: {
+ setLang: function (state, value) {
+ state.lang = value
+ },
resetAll: function (state) {
state.collapse = false
state.hasAddRoutes = false
@@ -48,6 +52,9 @@ export default new Vuex.Store({
}
},
actions: {
+ setLang: function (context, value) {
+ context.commit('setLang', value)
+ },
resetAll: function (context) {
context.commit('resetAll')
},
diff --git a/src/views/admin/Home.vue b/src/views/admin/Home.vue
index 5a3b734..29cb7f1 100644
--- a/src/views/admin/Home.vue
+++ b/src/views/admin/Home.vue
@@ -1,30 +1,34 @@
-
-
-
- {{ item }}
-
-
-
+
更新日志
+
+
+
+
+
+ {{ log.title }}
+ {{ (index + 1) + '、' + item }}
+
+
+
+
+
+
diff --git a/src/views/admin/example/DemoSection.vue b/src/views/admin/example/DemoSection.vue
new file mode 100644
index 0000000..b2f4d53
--- /dev/null
+++ b/src/views/admin/example/DemoSection.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
diff --git a/src/views/admin/example/basic/Button.vue b/src/views/admin/example/basic/Button.vue
index 3f4d676..2d338a0 100644
--- a/src/views/admin/example/basic/Button.vue
+++ b/src/views/admin/example/basic/Button.vue
@@ -1,119 +1,133 @@
-
- 基础用法
-
- 默认按钮
- 主要按钮
- 成功按钮
- 信息按钮
- 警告按钮
- 危险按钮
-
-
-
- 朴素按钮
- 主要按钮
- 成功按钮
- 信息按钮
- 警告按钮
- 危险按钮
-
-
-
- 圆角按钮
- 主要按钮
- 成功按钮
- 信息按钮
- 警告按钮
- 危险按钮
-
-
-
-
-
-
-
-
-
-
-
-
-
- 禁用状态
-
- 默认按钮
- 主要按钮
- 成功按钮
- 信息按钮
- 警告按钮
- 危险按钮
-
-
-
- 朴素按钮
- 主要按钮
- 成功按钮
- 信息按钮
- 警告按钮
- 危险按钮
-
-
-
-
-
-
-
-
- 按钮组
-
- 上一页
- 下一页
-
-
+
+ 基础的按钮用法。
+
+
+ 默认按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+ 朴素按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+ 圆角按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 按钮不可用状态。
+
+
+ 默认按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+ 朴素按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+
+
+ 没有边框和背景色的按钮。
+
+ 文字按钮
+ 文字按钮
+
+
+
+
+ 带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。
+
-
-
-
-
-
-
- 不同尺寸
-
- 默认按钮
- 中等按钮
- 小型按钮
- 超小按钮
-
-
- 默认按钮
- 中等按钮
- 小型按钮
- 超小按钮
-
-
+ 搜索
+ 上传
+
+
+
+
+ 以按钮组的方式出现，常用于多项类似操作。
+
+
+ 上一页
+ 下一页
+
+
+
+
+
+
+
+
+
+
+ 点击按钮后进行数据加载操作，在按钮上显示加载状态。
+ 加载中
+
+
+
+ Button组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
+
+
+ 默认按钮
+ 中等按钮
+ 小型按钮
+ 超小按钮
+
+
+ 默认按钮
+ 中等按钮
+ 小型按钮
+ 超小按钮
+
+
+
diff --git a/src/views/admin/example/basic/Container.vue b/src/views/admin/example/basic/Container.vue
index 761f20d..aee6cd7 100644
--- a/src/views/admin/example/basic/Container.vue
+++ b/src/views/admin/example/basic/Container.vue
@@ -1,40 +1,39 @@
-
- 常见页面布局1
-
+
+
Header
Main
-
-
- 常见页面布局2
-
+
+
+
+
Header
Main
Footer
-
-
- 常见页面布局3
-
+
+
+
+
Aside
Main
-
-
- 常见页面布局4
-
+
+
+
+
Header
Aside
Main
-
-
- 常见页面布局5
-
+
+
+
+
Header
Aside
@@ -44,20 +43,20 @@
-
-
- 常见页面布局6
-
+
+
+
+
Aside
Header
Main
-
-
- 常见页面布局7
-
+
+
+
+
Aside
Header
@@ -65,13 +64,15 @@
Footer
-
+
diff --git a/src/views/admin/example/basic/Icon.vue b/src/views/admin/example/basic/Icon.vue
index 567cc7a..1b0042b 100644
--- a/src/views/admin/example/basic/Icon.vue
+++ b/src/views/admin/example/basic/Icon.vue
@@ -1,28 +1,32 @@
diff --git a/src/views/admin/example/basic/Link.vue b/src/views/admin/example/basic/Link.vue
index 38ddf36..a6c56a1 100644
--- a/src/views/admin/example/basic/Link.vue
+++ b/src/views/admin/example/basic/Link.vue
@@ -1,44 +1,52 @@
-
- 基础用法
-
+
+ 基础的文字链接用法。
+
默认链接
主要链接
成功链接
警告链接
危险链接
信息链接
-
-
+
+
-
- 禁用状态
- 默认链接
- 主要链接
- 成功链接
- 警告链接
- 危险链接
- 信息链接
-
+
+ 文字链接不可用状态。
+
+ 默认链接
+ 主要链接
+ 成功链接
+ 警告链接
+ 危险链接
+ 信息链接
+
+
-
+
+ 文字链接下划线。
+
+ 无下划线
+ 有下划线
+
+
-
+
+ 带图标的文字链接可增强辨识度。
+
+ 编辑
+ 查看
+
+
diff --git a/src/views/admin/example/form/AreaSelect.vue b/src/views/admin/example/form/AreaSelect.vue
new file mode 100644
index 0000000..4a6530b
--- /dev/null
+++ b/src/views/admin/example/form/AreaSelect.vue
@@ -0,0 +1,111 @@
+
+
+
+ 通过设置level来指定省市联动或者省市区联动，
+ plus可以用来添加默认的全部选项
+
+
+ 不带全部选项的省市两级联动：
+
+ {{ select1Desc }}
+
+
+ 带全部选项的省市两级联动：
+
+ {{ select2Desc }}
+
+
+ 不带全部选项的省市区三级联动：
+
+ {{ select3Desc }}
+
+
+ 带全部选项的省市区三级联动：
+
+ {{ select4Desc }}
+
+
+
+
+ 通过clearable设置输入框可清空
+
+
+
+
+
+
+ 属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级
+
+
+
+
+
+
+ 基于原始的china-area-data v4版本数据实现省市区联动
+
+
+ 省市两级联动：
+
+ {{ select6Desc }}
+
+
+ 省市区三级联动：
+
+ {{ select7Desc }}
+
+
+
+
+
+
+
diff --git a/src/views/admin/example/form/Checkbox.vue b/src/views/admin/example/form/Checkbox.vue
index 9e1be71..26e77dd 100644
--- a/src/views/admin/example/form/Checkbox.vue
+++ b/src/views/admin/example/form/Checkbox.vue
@@ -1,73 +1,83 @@
-
+
+ 在el-checkbox元素中定义v-model绑定变量，
+ 单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。
+ 备选项
+
-
+
+ 多选框不可用状态。
+
+ 备选项1
+ 备选项
+
+
-
- 多选选框组
-
+
+ 适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
+
复选框 A
复选框 B
复选框 C
禁用
选中且禁用
-
-
- indeterminate 状态
- 全选
-
- 上海
- 北京
- 广州
- 深圳
-
-
+
-
- 可选项目数量的限制
-
+
+ indeterminate属性用以表示checkbox的不确定状态，一般用于实现全选的效果
+
+ 全选
+
+ 上海
+ 北京
+ 广州
+ 深圳
+
+
+
+
+
+ 使用min和max属性能够限制可以被勾选的项目的数量。
+
上海
北京
广州
深圳
-
+
-
- 按钮样式
-
-
- 上海
- 北京
- 广州
- 深圳
-
-
-
-
- 上海
- 北京
- 广州
- 深圳
-
-
-
+
+ 按钮样式的多选组合。
+
+
+
+ 上海
+ 北京
+ 广州
+ 深圳
+
+
+
+
+ 上海
+ 北京
+ 广州
+ 深圳
+
+
+
+
+
+
diff --git a/src/views/admin/example/form/Radio.vue b/src/views/admin/example/form/Radio.vue
index ce17bcb..0dff771 100644
--- a/src/views/admin/example/form/Radio.vue
+++ b/src/views/admin/example/form/Radio.vue
@@ -1,51 +1,59 @@
-
+
+ 由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
+
+ 备选项1
+ 备选项2
+
+
-
+
+ 单选框不可用的状态。
+
+ 备选项1
+ 备选项2
+
+
-
- 单选框组
-
+
+ 适用于在多个互斥的选项中选择的场景
+
备选项1
备选项2
备选项3
-
+
-
- 按钮样式
-
-
- 上海
- 北京
- 广州
- 深圳
-
-
-
-
- 上海
- 北京
- 广州
- 深圳
-
-
-
+
+ 按钮样式的单选组合。
+
+
+
+ 上海
+ 北京
+ 广州
+ 深圳
+
+
+
+
+ 上海
+ 北京
+ 广州
+ 深圳
+
+
+
+
+
+
diff --git a/src/views/admin/lock/Lock.vue b/src/views/admin/lock/Lock.vue
new file mode 100644
index 0000000..9549484
--- /dev/null
+++ b/src/views/admin/lock/Lock.vue
@@ -0,0 +1,104 @@
+
+
+
+
+
+
+
diff --git a/src/views/admin/login/Login.vue b/src/views/admin/login/Login.vue
index d67c133..f57f2a6 100644
--- a/src/views/admin/login/Login.vue
+++ b/src/views/admin/login/Login.vue
@@ -1,7 +1,18 @@
-
-
+
+
+ {{ $CONFIG.web.title }}Admin系统
+
+
+ {{ $t('lang') }}
+
+
+ 中文
+ English
+
+
+
*{{ errMsg }}
联系作者索取账号
@@ -30,7 +41,7 @@
-
![]()
+
![]()
+ 
+