diff --git a/design.sketch.REMOVED.git-id b/design.sketch.REMOVED.git-id index 519b415b..d1b872e8 100644 --- a/design.sketch.REMOVED.git-id +++ b/design.sketch.REMOVED.git-id @@ -1 +1 @@ -5180df7143acd2b32403b34a30d5c86f32288d1c \ No newline at end of file +4b819d117b3b7e87effa763dbb04ba3280622cf1 \ No newline at end of file diff --git a/src/assets/image/logo/w500-element.png.REMOVED.git-id b/src/assets/image/logo/w500-element.png.REMOVED.git-id new file mode 100644 index 00000000..3849adbf --- /dev/null +++ b/src/assets/image/logo/w500-element.png.REMOVED.git-id @@ -0,0 +1 @@ +96116cf6cd5a5755048348977ceaffcc3ab7b0c9 \ No newline at end of file diff --git a/src/assets/style/theme/tomorrow-night-blue/setting.scss b/src/assets/style/theme/tomorrow-night-blue/setting.scss index a3381ecf..92f54dfe 100644 --- a/src/assets/style/theme/tomorrow-night-blue/setting.scss +++ b/src/assets/style/theme/tomorrow-night-blue/setting.scss @@ -1,7 +1,7 @@ // 主题名称 $theme-name: 'tomorrow-night-blue'; // 主题背景颜色 -$theme-bg-color: #002147; +$theme-bg-color: #002253; // 主题背景图片 $theme-bg-image: none; // 主题背景图片遮罩 diff --git a/src/menu/index.js b/src/menu/index.js index 4b146d03..c715351e 100644 --- a/src/menu/index.js +++ b/src/menu/index.js @@ -122,10 +122,31 @@ const demoChart = { ])('/demo/chart/') } +// 路由菜单 组件库 +const demoElement = { + path: '/demo/element', + title: '组件库', + icon: 'puzzle-piece', + children: (pre => [ + { path: `${pre}index`, title: '组件库首页' }, + { + path: `${pre}basic`, + title: '基础', + children: [ + { path: `${pre}basic-layout`, title: '布局' }, + { path: `${pre}basic-container`, title: '布局容器' }, + { path: `${pre}basic-color`, title: '颜色' }, + { path: `${pre}basic-button`, title: '按钮' } + ] + } + ])('/demo/element/') +} + // 菜单 侧边栏 export const side = [ demoPlugins, demoComponents, + demoElement, demoChart ] @@ -137,10 +158,11 @@ export default [ }, { path: '/demo', - title: '功能', + title: '集成功能', children: [ demoPlugins, demoComponents, + demoElement, demoChart ] }, diff --git a/src/pages/demo/element/basic-button/index.vue b/src/pages/demo/element/basic-button/index.vue new file mode 100644 index 00000000..8312c574 --- /dev/null +++ b/src/pages/demo/element/basic-button/index.vue @@ -0,0 +1,106 @@ + diff --git a/src/pages/demo/element/basic-color/components/info.vue b/src/pages/demo/element/basic-color/components/info.vue new file mode 100644 index 00000000..c985cd6b --- /dev/null +++ b/src/pages/demo/element/basic-color/components/info.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/src/pages/demo/element/basic-color/index.vue b/src/pages/demo/element/basic-color/index.vue new file mode 100644 index 00000000..15883b83 --- /dev/null +++ b/src/pages/demo/element/basic-color/index.vue @@ -0,0 +1,151 @@ + + + + + + + diff --git a/src/pages/demo/element/basic-container/index.vue b/src/pages/demo/element/basic-container/index.vue new file mode 100644 index 00000000..bd401677 --- /dev/null +++ b/src/pages/demo/element/basic-container/index.vue @@ -0,0 +1,94 @@ + + + + diff --git a/src/pages/demo/element/basic-layout/index.vue b/src/pages/demo/element/basic-layout/index.vue new file mode 100644 index 00000000..c9bdd31a --- /dev/null +++ b/src/pages/demo/element/basic-layout/index.vue @@ -0,0 +1,148 @@ + + + + diff --git a/src/pages/demo/element/index/index.vue b/src/pages/demo/element/index/index.vue new file mode 100644 index 00000000..13bd31f2 --- /dev/null +++ b/src/pages/demo/element/index/index.vue @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 0a7f623b..5b53913c 100755 --- a/src/router/index.js +++ b/src/router/index.js @@ -21,6 +21,59 @@ const routes = [ } ] }, + { + path: '/demo/business', + name: 'demo-business', + meta, + redirect: { name: 'demo-business-index' }, + component: () => import('@/components/core/d2-layout-main/index.vue'), + children: (pre => [ + { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/business/index/index.vue'), meta } + ])('demo-business-') + }, + { + path: '/demo/chart', + name: 'demo-chart', + meta, + redirect: { name: 'demo-chart-index' }, + component: () => import('@/components/core/d2-layout-main/index.vue'), + children: (pre => [ + { path: 'all', name: `${pre}all`, component: () => import('@/pages/demo/chart/all/index.vue'), meta }, + { path: 'demo/areaBase', name: `${pre}demo-areaBase`, component: () => import('@/pages/demo/chart/demo/areaBase.vue'), meta }, + { path: 'demo/barBase', name: `${pre}demo-barBase`, component: () => import('@/pages/demo/chart/demo/barBase.vue'), meta }, + { path: 'demo/columnBase', name: `${pre}demo-columnBase`, component: () => import('@/pages/demo/chart/demo/columnBase.vue'), meta }, + { path: 'demo/lineBase', name: `${pre}demo-lineBase`, component: () => import('@/pages/demo/chart/demo/lineBase.vue'), meta }, + { path: 'demo/lineStep', name: `${pre}demo-lineStep`, component: () => import('@/pages/demo/chart/demo/lineStep.vue'), meta }, + { path: 'demo/nightingaleRoseBase', name: `${pre}demo-nightingaleRoseBase`, component: () => import('@/pages/demo/chart/demo/nightingaleRoseBase.vue'), meta }, + { path: 'demo/PieBase', name: `${pre}demo-PieBase`, component: () => import('@/pages/demo/chart/demo/PieBase.vue'), meta }, + { path: 'demo/radarBase', name: `${pre}demo-radarBase`, component: () => import('@/pages/demo/chart/demo/radarBase.vue'), meta }, + { path: 'dynamicSize', name: `${pre}dynamicSize`, component: () => import('@/pages/demo/chart/dynamicSize/index.vue'), meta }, + { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/chart/index/index.vue'), meta } + ])('demo-chart-') + }, + { + path: '/demo/plugins', + name: 'demo-plugins', + meta, + redirect: { name: 'demo-plugins-index' }, + component: () => import('@/components/core/d2-layout-main/index.vue'), + children: (pre => [ + { path: 'build', name: `${pre}build`, component: () => import('@/pages/demo/plugins/build/index.vue'), meta }, + { path: 'clipboard-polyfill', name: `${pre}clipboard-polyfill`, component: () => import('@/pages/demo/plugins/clipboard-polyfill/index.vue'), meta }, + { path: 'day', name: `${pre}day`, component: () => import('@/pages/demo/plugins/day/index.vue'), meta }, + { path: 'export/table', name: `${pre}export-table`, component: () => import('@/pages/demo/plugins/export/table.vue'), meta }, + { path: 'export/txt', name: `${pre}export-txt`, component: () => import('@/pages/demo/plugins/export/txt.vue'), meta }, + { path: 'i18n/demo1', name: `${pre}i18n-demo1`, component: () => import('@/pages/demo/plugins/i18n/demo1.vue'), meta }, + { path: 'i18n/demo2', name: `${pre}i18n-demo2`, component: () => import('@/pages/demo/plugins/i18n/demo2.vue'), meta }, + { path: 'import/csv', name: `${pre}import-csv`, component: () => import('@/pages/demo/plugins/import/csv.vue'), meta }, + { path: 'import/xlsx', name: `${pre}import-xlsx`, component: () => import('@/pages/demo/plugins/import/xlsx.vue'), meta }, + { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/plugins/index/index.vue'), meta }, + { path: 'js-cookie', name: `${pre}js-cookie`, component: () => import('@/pages/demo/plugins/js-cookie/index.vue'), meta }, + { path: 'mock/ajax', name: `${pre}mock-ajax`, component: () => import('@/pages/demo/plugins/mock/ajax.vue'), meta }, + { path: 'mock/dpd', name: `${pre}mock-dpd`, component: () => import('@/pages/demo/plugins/mock/dpd.vue'), meta }, + { path: 'mock/dtd', name: `${pre}mock-dtd`, component: () => import('@/pages/demo/plugins/mock/dtd.vue'), meta } + ])('demo-plugins-') + }, { path: '/demo/components', name: 'demo-components', @@ -49,57 +102,18 @@ const routes = [ ])('demo-components-') }, { - path: '/demo/plugins', - name: 'demo-plugins', + path: '/demo/element', + name: 'demo-element', meta, - redirect: { name: 'demo-plugins-index' }, + redirect: { name: 'demo-element-index' }, component: () => import('@/components/core/d2-layout-main/index.vue'), children: (pre => [ - { path: 'build', name: `${pre}build`, component: () => import('@/pages/demo/plugins/build/index.vue'), meta }, - { path: 'clipboard-polyfill', name: `${pre}clipboard-polyfill`, component: () => import('@/pages/demo/plugins/clipboard-polyfill/index.vue'), meta }, - { path: 'day', name: `${pre}day`, component: () => import('@/pages/demo/plugins/day/index.vue'), meta }, - { path: 'export/table', name: `${pre}export-table`, component: () => import('@/pages/demo/plugins/export/table.vue'), meta }, - { path: 'export/txt', name: `${pre}export-txt`, component: () => import('@/pages/demo/plugins/export/txt.vue'), meta }, - { path: 'i18n/demo1', name: `${pre}i18n-demo1`, component: () => import('@/pages/demo/plugins/i18n/demo1.vue'), meta }, - { path: 'i18n/demo2', name: `${pre}i18n-demo2`, component: () => import('@/pages/demo/plugins/i18n/demo2.vue'), meta }, - { path: 'import/csv', name: `${pre}import-csv`, component: () => import('@/pages/demo/plugins/import/csv.vue'), meta }, - { path: 'import/xlsx', name: `${pre}import-xlsx`, component: () => import('@/pages/demo/plugins/import/xlsx.vue'), meta }, - { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/plugins/index/index.vue'), meta }, - { path: 'js-cookie', name: `${pre}js-cookie`, component: () => import('@/pages/demo/plugins/js-cookie/index.vue'), meta }, - { path: 'mock/ajax', name: `${pre}mock-ajax`, component: () => import('@/pages/demo/plugins/mock/ajax.vue'), meta }, - { path: 'mock/dpd', name: `${pre}mock-dpd`, component: () => import('@/pages/demo/plugins/mock/dpd.vue'), meta }, - { path: 'mock/dtd', name: `${pre}mock-dtd`, component: () => import('@/pages/demo/plugins/mock/dtd.vue'), meta } - ])('demo-plugins-') - }, - { - path: '/demo/chart', - name: 'demo-chart', - meta, - redirect: { name: 'demo-chart-index' }, - component: () => import('@/components/core/d2-layout-main/index.vue'), - children: (pre => [ - { path: 'all', name: `${pre}all`, component: () => import('@/pages/demo/chart/all/index.vue'), meta }, - { path: 'demo/areaBase', name: `${pre}demo-areaBase`, component: () => import('@/pages/demo/chart/demo/areaBase.vue'), meta }, - { path: 'demo/barBase', name: `${pre}demo-barBase`, component: () => import('@/pages/demo/chart/demo/barBase.vue'), meta }, - { path: 'demo/columnBase', name: `${pre}demo-columnBase`, component: () => import('@/pages/demo/chart/demo/columnBase.vue'), meta }, - { path: 'demo/lineBase', name: `${pre}demo-lineBase`, component: () => import('@/pages/demo/chart/demo/lineBase.vue'), meta }, - { path: 'demo/lineStep', name: `${pre}demo-lineStep`, component: () => import('@/pages/demo/chart/demo/lineStep.vue'), meta }, - { path: 'demo/nightingaleRoseBase', name: `${pre}demo-nightingaleRoseBase`, component: () => import('@/pages/demo/chart/demo/nightingaleRoseBase.vue'), meta }, - { path: 'demo/PieBase', name: `${pre}demo-PieBase`, component: () => import('@/pages/demo/chart/demo/PieBase.vue'), meta }, - { path: 'demo/radarBase', name: `${pre}demo-radarBase`, component: () => import('@/pages/demo/chart/demo/radarBase.vue'), meta }, - { path: 'dynamicSize', name: `${pre}dynamicSize`, component: () => import('@/pages/demo/chart/dynamicSize/index.vue'), meta }, - { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/chart/index/index.vue'), meta } - ])('demo-chart-') - }, - { - path: '/demo/business', - name: 'demo-business', - meta, - redirect: { name: 'demo-business-index' }, - component: () => import('@/components/core/d2-layout-main/index.vue'), - children: (pre => [ - { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/business/index/index.vue'), meta } - ])('demo-business-') + { path: 'basic-layout', name: `${pre}basic-layout`, component: () => import('@/pages/demo/element/basic-layout/index.vue'), meta }, + { path: 'basic-container', name: `${pre}basic-container`, component: () => import('@/pages/demo/element/basic-container/index.vue'), meta }, + { path: 'basic-color', name: `${pre}basic-color`, component: () => import('@/pages/demo/element/basic-color/index.vue'), meta }, + { path: 'basic-button', name: `${pre}basic-button`, component: () => import('@/pages/demo/element/basic-button/index.vue'), meta }, + { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/element/index/index.vue'), meta } + ])('demo-element-') }, // 登陆 { @@ -109,10 +123,6 @@ const routes = [ } ] -// routes[3].children.forEach(e => { -// console.log(`{ path: \`\${pre}${e.path}\`, title: 'title' }`) -// }) - let router = new VueRouter({ routes }) router.beforeEach((to, from, next) => {