Browse Source

chore/code/optimize (#18)

* chore: code optimize

* chore(husky): add git prepare-commit-msg
pull/21/head
PY 3 years ago
committed by GitHub
parent
commit
29dae39891
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      .husky/prepare-commit-msg
  2. 44
      src/assets/assets-result-500.svg
  3. 2
      src/config/global.ts
  4. 174
      src/config/routes.js
  5. 84
      src/layouts/components/Header.vue
  6. 15
      src/layouts/index.tsx
  7. 28
      src/layouts/setting.vue
  8. 21
      src/pages/dashboard/base/index.ts
  9. 52
      src/pages/dashboard/base/index.vue
  10. 4
      src/pages/dashboard/detail/index.vue
  11. 2
      src/pages/form/base/index.vue
  12. 1
      src/pages/list/base/index.vue
  13. 21
      src/pages/list/filter/index.vue
  14. 13
      src/pages/login/index.less
  15. 4
      src/pages/login/index.vue
  16. 1
      src/pages/user/index.less
  17. 36
      src/pages/user/index.vue
  18. 2
      src/router/modules/others.ts
  19. 12
      src/service/service-user.ts
  20. 43
      src/store/modules/setting.ts

4
.husky/prepare-commit-msg

@ -0,0 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
exec < /dev/tty && npx git-cz --hook || true

44
src/assets/assets-result-500.svg

@ -1,32 +1,32 @@
<svg width="200" height="140" viewBox="0 0 200 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<g mask="url(#mask0_17_619)">
<path d="M30 62H118V122H30V62Z" fill="#97A3B7" />
<g filter="url(#filter0_f_17_619)">
<rect x="12" y="84" width="80" height="60" fill="#E3E6EB" />
<g mask="url(#mask0_16559_24251)">
<path d="M68 48L106.105 70V114L68 136L29.8949 114V70L68 48Z" fill="#97A3B7" />
<g filter="url(#filter0_f_16559_24251)">
<rect x="46.3911" y="92" width="80" height="60" fill="#E3E6EB" />
</g>
<g filter="url(#filter1_f_17_619)">
<rect x="80" y="54" width="80" height="60" fill="#E3E6EB" />
<g filter="url(#filter1_f_16559_24251)">
<rect y="23" width="80" height="60" fill="#E3E6EB" />
</g>
<rect x="46" y="105" width="32" height="2" fill="white" />
<rect x="46" y="98" width="32" height="2" fill="white" />
<rect x="46" y="88" width="16" height="2" fill="white" />
</g>
<path opacity="0.9" d="M63 20H151V30H63V20Z" fill="currentcolor" />
<mask id="mask1_17_619" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="63" y="30" width="88" height="50">
<path d="M63 30H151V80H63V30Z" fill="currentcolor" />
<mask id="mask1_16559_24251" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="80" y="9" width="78" height="88">
<path d="M119 9L157.105 31V75L119 97L80.8949 75V31L119 9Z" fill="currentcolor" />
</mask>
<g mask="url(#mask1_17_619)">
<path d="M63 30H151V80H63V30Z" fill="currentcolor" />
<g opacity="0.3" filter="url(#filter2_f_17_619)">
<path d="M30 62H118V122H30V62Z" fill="#97A3B7" />
<g mask="url(#mask1_16559_24251)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M80.895 31V75L119 97L157.105 75V31L119 53L80.895 31Z"
fill="currentcolor" />
<path opacity="0.9" d="M119 -35L157.105 -13L157.105 31.5L119 53.5L80.8952 31.5L80.895 -13L119 -35Z"
fill="currentcolor" />
<g opacity="0.3" filter="url(#filter2_f_16559_24251)">
<path d="M68 48L106.105 70V114L68 136L29.8949 114V70L68 48Z" fill="#97A3B7" />
</g>
</g>
<path
d="M143 68.822L147.867 85.875L148 86.3405L148.469 86.2228L165.671 81.911L153.336 94.6522L152.999 95L153.336 95.3478L165.671 108.089L148.469 103.777L148 103.659L147.867 104.125L143 121.178L138.133 104.125L138 103.659L137.531 103.777L120.329 108.089L132.664 95.3478L133.001 95L132.664 94.6522L120.329 81.911L137.531 86.2228L138 86.3405L138.133 85.875L143 68.822Z"
fill="white" stroke="black" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M95.6863 40.8577L105.964 51.1345C106.295 51.0466 106.642 50.9998 107 50.9998C109.213 50.9998 111 52.7865 111 54.9998C111 55.3574 110.953 55.7038 110.866 56.0333L121.142 66.3135L118.314 69.1419L113.716 64.5448C111.653 65.423 109.384 65.9089 107 65.9089C99.7273 65.9089 93.5164 61.3853 91 54.9998C92.1785 52.0093 94.1673 49.4271 96.6961 47.5268L92.8579 43.6861L95.6863 40.8577ZM99 54.9998C99 59.4158 102.584 62.9998 107 62.9998C108.483 62.9998 109.872 62.5957 111.063 61.8917L108.034 58.8657C107.704 58.9532 107.358 58.9998 107 58.9998C104.787 58.9998 103 57.2131 103 54.9998C103 54.6423 103.047 54.2958 103.134 53.9663L100.107 50.9389C99.4037 52.1295 99 53.5178 99 54.9998ZM107 44.0907C114.273 44.0907 120.484 48.6143 123 54.9998C122.071 57.3574 120.638 59.4612 118.834 61.1773L114.729 57.0717C114.906 56.4108 115 55.7162 115 54.9998C115 50.5838 111.416 46.9998 107 46.9998C106.284 46.9998 105.589 47.0941 104.928 47.2711L102.378 44.7205C103.848 44.3101 105.398 44.0907 107 44.0907Z"
d="M123.243 35.0821L126.071 33.4493L123.243 31.8164L120.414 33.4493L123.243 35.0821ZM119 32.6329L121.828 31L114.757 26.9179L111.929 28.5507L119 32.6329ZM127.485 35.8986C122.806 38.6001 115.194 38.6001 110.515 35.8986C105.835 33.197 105.835 28.803 110.515 26.1014C115.194 23.3999 122.806 23.3999 127.485 26.1014C132.165 28.803 132.165 33.197 127.485 35.8986ZM107.686 24.4686C101.438 28.0756 101.438 33.9244 107.686 37.5314C113.934 41.1384 124.066 41.1384 130.314 37.5314C136.562 33.9244 136.562 28.0756 130.314 24.4686C124.066 20.8616 113.934 20.8616 107.686 24.4686Z"
fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M41.8989 86.2863L44.7272 87.9193L44.7275 94.4512L41.8992 92.8181L41.8989 86.2863ZM53.9194 93.2269L56.7477 94.86L56.7479 101.392L53.9196 99.7587L53.9194 93.2269ZM44.7281 107.515L41.8999 105.882L41.9 109.148L44.7283 110.781L44.7282 107.515L53.92 112.822L53.9201 116.088L56.7484 117.721L56.7483 114.455L53.9201 112.822L53.92 109.556L44.728 104.249L44.7281 107.515Z"
fill="white" />
<rect x="68" y="24" width="2" height="2" fill="white" />
<rect x="74" y="24" width="2" height="2" fill="white" />
<rect x="80" y="24" width="66" height="2" fill="white" />
<path d="M157 53.9998L181.249 95.9998H132.751L157 53.9998Z" fill="white" stroke="black" />
<path d="M157 88.9998L157 70.9998" stroke="black" />
</svg>

2
src/config/global.ts

@ -1,4 +1,2 @@
export const prefix = 'tdesign-starter';
export const theme = 'light';
export const TOKEN_NAME = 'tdesign-starter';
export const authenticationMethod = 'customize';

174
src/config/routes.js

@ -1,174 +0,0 @@
export default [
{
path: '/dashboard',
icon: 'dashboard',
title: '仪表盘',
component: '../layouts/index.tsx',
redirect: '/dashboard/base',
children: [
{
title: '概览仪表盘',
path: 'base',
component: '../pages/dashboard/base/index.vue',
},
{
title: '统计报表',
path: 'detail',
component: '../pages/dashboard/detail/index.vue',
},
],
},
{
path: '/list',
icon: 'view-module',
title: '列表页',
component: '../layouts/index.tsx',
redirect: '/list/base',
children: [
{
title: '基础列表页',
path: 'base',
component: '../pages/list/base/index.vue',
},
{
title: '卡片列表页',
path: 'card',
component: '../pages/list/card/index.vue',
},
{
title: '筛选列表页',
path: 'filter',
component: '../pages/list/filter/index.vue',
},
{
title: '树状筛选列表页',
path: 'tree',
component: '../pages/list/tree/index.vue',
},
],
},
{
path: '/form',
icon: 'queue',
title: '表单页',
component: '../layouts/index.tsx',
redirect: '/form/base',
children: [
{
title: '基础表单页',
path: 'base',
component: '../pages/form/base/index.vue',
},
{
title: '分步表单页',
path: 'step',
component: '../pages/form/step/index.vue',
},
],
},
{
path: '/detail',
icon: 'layers',
title: '详情页',
component: '../layouts/index.tsx',
redirect: '/detail/base',
children: [
{
title: '基础详情页',
path: 'base',
component: '../pages/detail/base/index.vue',
// 默认不填,则需要每个页面都会经过登录的校验,若不需要进行登录校验则将needLogin:设为false
meta: { needLogin: false, title: '基础详情页' },
},
{
title: '多卡片详情页',
path: 'advanced',
component: '../pages/detail/advanced/index.vue',
},
{
title: '数据详情页',
path: 'deploy',
component: '../pages/detail/deploy/index.vue',
},
{
title: '二级详情页',
path: 'secondary',
component: '../pages/detail/secondary/index.vue',
},
],
},
{
path: '/result',
icon: 'check-circle',
title: '结果页',
component: '../layouts/index.tsx',
redirect: '/result/success',
children: [
{
title: '成功页',
path: 'success',
component: '../pages/result/success/index.vue',
},
{
title: '失败页',
path: 'fail',
component: '../pages/result/fail/index.vue',
},
{
title: '网络异常',
path: 'network-error',
component: '../pages/result/network-error/index.vue',
},
{
title: '无权限',
path: '403',
component: '../pages/result/403/index.vue',
},
{
title: '访问页面不存在页',
path: '404',
component: '../pages/result/404/index.vue',
},
{
title: '服务器出错页',
path: '500',
component: '../pages/result/500/index.vue',
},
{
title: '浏览器不兼容页',
path: 'browser-incompatible',
component: '../pages/result/browser-incompatible/index.vue',
},
],
},
{
path: '/user',
icon: 'user-circle',
title: '个人页',
component: '../layouts/index.tsx',
redirect: '/user/index',
children: [
{
title: '个人中心',
path: 'index',
component: '../pages/user/index.vue',
},
],
},
// 自定义登录页面
{
path: '/login',
title: '登录页',
component: '../layouts/blank.vue',
icon: 'chevron-right-rectangle',
redirect: '/login/index',
children: [
{
title: '登录中心',
path: 'index',
meta: { needLogin: false },
component: '../pages/login/index.vue',
},
],
},
];

84
src/layouts/components/Header.vue

@ -13,50 +13,52 @@
</div>
</template>
<menu-content v-show="layout !== 'side'" class="header-menu" :navData="menu" />
<div slot="operations" class="operations-container">
<!-- 搜索框 -->
<search v-if="layout !== 'side'" :layout="layout" />
<template #operations>
<div class="operations-container">
<!-- 搜索框 -->
<search v-if="layout !== 'side'" :layout="layout" />
<!-- 全局通知 -->
<notice />
<!-- 全局通知 -->
<notice />
<t-tooltip placement="bottom" content="代码仓库">
<t-button theme="default" shape="square" variant="text" @click="navToGitHub">
<t-icon name="logo-github" />
</t-button>
</t-tooltip>
<t-tooltip placement="bottom" content="帮助文档">
<t-button theme="default" shape="square" variant="text" @click="navToHelper">
<t-icon name="help-circle" />
</t-button>
</t-tooltip>
<t-dropdown :min-column-width="125" trigger="click">
<template #dropdown>
<t-dropdown-menu>
<t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')">
<t-icon name="user-circle"></t-icon>
</t-dropdown-item>
<t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
<t-icon name="poweroff"></t-icon>退
</t-dropdown-item>
</t-dropdown-menu>
</template>
<t-button class="header-user-btn" theme="default" variant="text">
<template #icon>
<t-icon class="header-user-avatar" name="user-circle" />
<t-tooltip placement="bottom" content="代码仓库">
<t-button theme="default" shape="square" variant="text" @click="navToGitHub">
<t-icon name="logo-github" />
</t-button>
</t-tooltip>
<t-tooltip placement="bottom" content="帮助文档">
<t-button theme="default" shape="square" variant="text" @click="navToHelper">
<t-icon name="help-circle" />
</t-button>
</t-tooltip>
<t-dropdown :min-column-width="125" trigger="click">
<template #dropdown>
<t-dropdown-menu>
<t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')">
<t-icon name="user-circle"></t-icon>
</t-dropdown-item>
<t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
<t-icon name="poweroff"></t-icon>退
</t-dropdown-item>
</t-dropdown-menu>
</template>
<div class="header-user-account">
Tencent
<t-icon name="chevron-down" />
</div>
</t-button>
</t-dropdown>
<t-tooltip placement="bottom" content="系统设置">
<t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
<t-icon name="setting" />
</t-button>
</t-tooltip>
</div>
<t-button class="header-user-btn" theme="default" variant="text">
<template #icon>
<t-icon class="header-user-avatar" name="user-circle" />
</template>
<div class="header-user-account">
Tencent
<t-icon name="chevron-down" />
</div>
</t-button>
</t-dropdown>
<t-tooltip placement="bottom" content="系统设置">
<t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
<t-icon name="setting" />
</t-button>
</t-tooltip>
</div>
</template>
</t-head-menu>
</div>
</template>

15
src/layouts/index.tsx

@ -28,10 +28,7 @@ export default Vue.extend({
showHeader: 'setting/showHeader',
showHeaderLogo: 'setting/showHeaderLogo',
showSidebarLogo: 'setting/showSidebarLogo',
// headerMenu: 'setting/headerMenu',
// sideMenu: 'setting/sideMenu',
showAsideFooter: 'setting/showAsideFooter',
showMainFooter: 'setting/showMainFooter',
showFooter: 'setting/showFooter',
mode: 'setting/mode',
menuRouters: 'permission/routers',
}),
@ -111,19 +108,19 @@ export default Vue.extend({
},
renderContent(): VNode {
const { showBreadcrumb } = this.setting;
const { showAsideFooter } = this;
const { showFooter } = this;
return (
<t-layout class={[`${prefix}-layout`]}>
<t-content class={`${prefix}-content-layout`}>
{showBreadcrumb && <tdesign-breadcrumb />}
<TdesignContent />
</t-content>
{showAsideFooter && this.renderFooter()}
{showFooter && this.renderFooter()}
</t-layout>
);
},
renderFooter(prefix = 'tdesign'): VNode {
renderFooter(): VNode {
return (
<t-footer class={`${prefix}-footer-layout`}>
<tdesign-footer />
@ -133,11 +130,10 @@ export default Vue.extend({
},
render(): VNode {
const { layout, showMainFooter } = this.setting;
const { layout } = this.setting;
const header = this.renderHeader();
const sidebar = this.renderSidebar();
const content = this.renderContent();
const footer = this.renderFooter();
return (
<div class={`${prefix}-wrapper`}>
@ -150,7 +146,6 @@ export default Vue.extend({
<t-layout key="no-side">
{header}
<t-layout class={this.mainLayoutCls}>{[sidebar, content]}</t-layout>
{showMainFooter && footer}
</t-layout>
)}
<tdesign-setting />

28
src/layouts/setting.vue

@ -14,7 +14,7 @@
<t-form :data="formData" size="large" ref="form" labelAlign="left" @reset="onReset" @submit="onSubmit">
<div class="setting-group-title">主题模式</div>
<t-radio-group v-model="formData.mode">
<div v-for="(item, index) in modeOption" :key="index" class="setting-layout-drawer">
<div v-for="(item, index) in MODE_OPTIONS" :key="index" class="setting-layout-drawer">
<div>
<t-radio-button :key="index" :value="item.type"
><component :is="getModeIcon(item.type)"
@ -26,7 +26,7 @@
<div class="setting-group-title">主题色</div>
<t-radio-group v-model="formData.brandTheme">
<div
v-for="(item, index) in colorOption.slice(0, colorOption.length - 1)"
v-for="(item, index) in COLOR_OPTIONS.slice(0, COLOR_OPTIONS.length - 1)"
:key="index"
class="setting-layout-drawer"
>
@ -46,10 +46,10 @@
>
<template #content><color-picker v-model="colors" /></template>
<t-radio-button
:value="colorOption[colorOption.length - 1]"
:value="COLOR_OPTIONS[COLOR_OPTIONS.length - 1]"
class="setting-layout-color-group dynamic-color-btn"
>
<color-container :value="colorOption[colorOption.length - 1]" />
<color-container :value="COLOR_OPTIONS[COLOR_OPTIONS.length - 1]" />
</t-radio-button>
</t-popup>
</div>
@ -57,7 +57,7 @@
<div class="setting-group-title">导航布局</div>
<t-radio-group v-model="formData.layout">
<div v-for="(item, index) in layoutOption" :key="index" class="setting-layout-drawer">
<div v-for="(item, index) in LAYOUT_OPTION" :key="index" class="setting-layout-drawer">
<t-radio-button :key="index" :value="item"><thumbnail :src="getThumbnailUrl(item)" /></t-radio-button>
</div>
</t-radio-group>
@ -115,6 +115,14 @@ import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
import SettingLightIcon from '@/assets/assets-setting-light.svg';
import SettingAutoIcon from '@/assets/assets-setting-auto.svg';
const LAYOUT_OPTION = ['side', 'top', 'mix'];
const COLOR_OPTIONS = ['default', 'purple', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'dynamic'];
const MODE_OPTIONS = [
{ type: 'light', text: '明亮' },
{ type: 'dark', text: '暗黑' },
{ type: 'auto', text: '跟随系统' },
];
export default {
name: 'DefaultLayoutSetting',
components: { Thumbnail, ColorContainer, 'color-picker': Sketch },
@ -123,13 +131,9 @@ export default {
colors: {
hex: null,
},
modeOption: [
{ type: 'light', text: '明亮' },
{ type: 'dark', text: '暗黑' },
{ type: 'auto', text: '跟随系统' },
],
layoutOption: ['side', 'top', 'mix'],
colorOption: ['default', 'purple', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'dynamic'],
MODE_OPTIONS,
LAYOUT_OPTION,
COLOR_OPTIONS,
visible: false,
formData: { ...STYLE_CONFIG },
isColoPickerDisplay: false,

21
src/pages/dashboard/base/index.ts

@ -1,4 +1,5 @@
import dayjs from 'dayjs';
import * as echarts from 'echarts/core';
import { Color } from 'tvision-color';
import { getBrandColor, generateColorMap } from '@/config/color';
import store from '@/store';
@ -72,20 +73,6 @@ export function getDateArray(dateTime: string[] = [], divideNum = 10): string[]
return timeArray;
}
export class DashboardBase {
/** 更新容器尺寸 */
setContainerSize(containerCopyValue: HTMLElement, absWidth = 0, absHeight = 0): void {
const container = containerCopyValue;
try {
if (container && container.style && container.parentElement) {
container.style.width = `${container.parentElement.clientWidth - absWidth}px`;
container.style.height = `${container.parentElement.clientHeight - absHeight}px`;
}
} catch (error) {
// hook
}
}
}
/**
*
@ -793,8 +780,7 @@ export function getScatterDataSet({
* @export
* @returns {any[]}
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function getAreaChartDataSet(text = ''): any {
export function getAreaChartDataSet(): any {
const xAxisData = [];
const data1 = [];
const data2 = [];
@ -1174,8 +1160,7 @@ export function getPieChartDataSet({
* @param {Array<any>} chartsList
* @param {string} theme
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function changeChartsTheme(chartsList: Array<any>): void {
export function changeChartsTheme(chartsList: echarts.EChartsType[]): void {
if (chartsList && chartsList.length) {
const chartChangeColor = chartListColor();

52
src/pages/dashboard/base/index.vue

@ -147,13 +147,13 @@
mode="date"
range
:default-value="LAST_7_DAYS"
@change="onWarehouseChange"
@change="onStokeDataChange"
/>
</template>
<div
id="dataContainer"
id="stokeContainer"
style="width: 100%; height: 351px"
ref="dataContainer"
ref="stokeContainer"
class="dashboard-chart-container"
></div>
</card>
@ -253,10 +253,10 @@ export default {
},
watch: {
brandTheme(val) {
changeChartsTheme([this.incomeCharts, this.charts, this.lineChartItem, this.pieChart], val);
changeChartsTheme([this.refundChart, this.charts, this.monitorChart, this.pieChart], val);
},
mode(val) {
changeChartsTheme([this.incomeCharts, this.charts, this.lineChartItem, this.pieChart], val);
changeChartsTheme([this.refundChart, this.charts, this.monitorChart, this.pieChart], val);
this.renderCharts();
},
},
@ -291,13 +291,13 @@ export default {
const { chartColors } = this.$store.state.setting;
this.currentMonth = this.getThisMonth(checkedValues);
this.lineChartItem.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors }));
this.monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors }));
},
/** 出入库概览日期更新 */
onWarehouseChange(checkedValues) {
onStokeDataChange(checkedValues) {
const { chartColors } = this.$store.state.setting;
this.charts.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors }));
this.stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors }));
},
go(link) {
if (link) {
@ -321,28 +321,28 @@ export default {
height: `${this.resizeTime * 66}px`,
});
this.incomeCharts.resize({
this.refundChart.resize({
//
width: `${this.resizeTime * 120}px`,
height: `${this.resizeTime * 42}px`,
});
this.pieChart.resize({
this.countChart.resize({
//
width: `${this.resizeTime * 326}px`,
height: `${this.resizeTime * 326}px`,
});
this.lineChartItem.resize({
this.monitorChart.resize({
//
width: this.monitorContainer.clientWidth,
height: `${this.resizeTime * 326}px`,
});
this.charts.resize({
this.stokeChart.resize({
//
width: this.dataContainer.clientWidth,
height: this.dataContainer.clientHeight,
width: this.stokeContainer.clientWidth,
height: this.stokeContainer.clientHeight,
});
},
@ -360,34 +360,34 @@ export default {
this.moneyCharts.setOption(constructInitDashboardDataset('line'));
// 退
if (!this.incomeContainer) {
this.incomeContainer = document.getElementById('refundContainer');
if (!this.refundContainer) {
this.refundContainer = document.getElementById('refundContainer');
}
this.incomeCharts = echarts.init(this.incomeContainer);
this.incomeCharts.setOption(constructInitDashboardDataset('bar', chartColors));
this.refundChart = echarts.init(this.refundContainer);
this.refundChart.setOption(constructInitDashboardDataset('bar', chartColors));
//
if (!this.dataContainer) {
this.dataContainer = document.getElementById('dataContainer');
if (!this.stokeContainer) {
this.stokeContainer = document.getElementById('stokeContainer');
}
this.charts = echarts.init(this.dataContainer);
this.charts.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors }));
this.stokeChart = echarts.init(this.stokeContainer);
this.stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors }));
//
if (!this.monitorContainer) {
this.monitorContainer = document.getElementById('monitorContainer');
}
this.lineChartItem = echarts.init(this.monitorContainer);
this.lineChartItem.setOption(getLineChartDataSet({ ...chartColors }));
this.monitorChart = echarts.init(this.monitorContainer);
this.monitorChart.setOption(getLineChartDataSet({ ...chartColors }));
//
if (!this.countContainer) {
this.countContainer = document.getElementById('countContainer');
}
this.pieChart = echarts.init(this.countContainer);
this.countChart = echarts.init(this.countContainer);
const option = getPieChartDataSet(chartColors);
this.pieChart.setOption(option);
this.countChart.setOption(option);
},
},
};

4
src/pages/dashboard/detail/index.vue

@ -49,7 +49,7 @@
theme="primary"
mode="date"
range
@change="onHappinessChange"
@change="onSatisfyChange"
></t-date-picker>
<t-button class="card-date-button">导出数据</t-button>
</template>
@ -116,7 +116,7 @@ export default {
},
methods: {
/** 采购商品满意度选择 */
onHappinessChange(value) {
onSatisfyChange(value) {
const { chartColors } = this.$store.state.setting;
this.scatterChart.setOption(getScatterDataSet({ dateTime: value, ...chartColors }));

2
src/pages/form/base/index.vue

@ -174,7 +174,7 @@ const INITIAL_DATA = {
signDate: '',
startDate: '',
endDate: '',
payment: '',
payment: '1',
amount: 0,
comment: '',
};

1
src/pages/list/base/index.vue

@ -98,7 +98,6 @@ export default Vue.extend({
{
title: '合同名称',
align: 'left',
ellipsis: true,
width: 300,
colKey: 'name',
fixed: 'left',

21
src/pages/list/filter/index.vue

@ -13,24 +13,3 @@ export default {
},
};
</script>
<style lang="less" scoped>
@import '@/style/variables';
.@{prefix} {
&-panel {
background-color: @bg-color-container;
padding: @spacer-3;
border-radius: @border-radius;
}
&-operater-row {
margin-bottom: 16px;
}
&-form-item-content {
width: 240px;
display: inline-block;
margin-right: 40px;
}
}
</style>

13
src/pages/login/index.less

@ -191,3 +191,16 @@
}
}
.copyright {
font-size: 14px;
position:absolute;
left: 5%;
bottom: 64px;
color: @text-color-secondary;
}
@media screen and (max-height: 700px) {
.copyright {
display:none
}
}

4
src/pages/login/index.vue

@ -16,9 +16,10 @@
<login v-if="type === 'login'" />
<register v-else @register-success="switchType('login')" />
<tdesign-setting />
</div>
<footer class="copyright">Copyright @ 2021-2022 Tencent. All Rights Reserved</footer>
</div>
</template>
<script>
@ -27,7 +28,6 @@ import Register from './components/components-register.vue';
import LoginHeader from './components/components-header.vue';
import TdesignSetting from '@/layouts/setting.vue';
/** 高级详情 */
export default {
name: 'LoginIndex',
components: {

1
src/pages/user/index.less

@ -66,7 +66,6 @@
}
.user-intro {
margin-top: 16px;
padding: 48px;
background: @brand-color;
border-radius: @border-radius;

36
src/pages/user/index.vue

@ -1,6 +1,6 @@
<template>
<div>
<t-row :gutter="16">
<t-row :gutter="[16, 16]">
<t-col :flex="3">
<div class="user-left-greeting">
<div>
@ -82,17 +82,8 @@
</t-button>
</template>
<t-row class="content" :getters="16">
<t-col :span="3">
<product-a-icon />
</t-col>
<t-col :span="3">
<product-b-icon />
</t-col>
<t-col :span="3">
<product-c-icon />
</t-col>
<t-col :span="3">
<product-d-icon />
<t-col v-for="(item, index) in PRODUCT_LIST" :key="index" :span="3">
<component :is="getIcon(item)"></component>
</t-col>
</t-row>
</card>
@ -112,7 +103,7 @@ import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { changeChartsTheme, getFolderLineDataSet } from '@/pages/dashboard/base/index';
import { USER_INFO_LIST, TEAM_MEMBERS } from '@/service/service-user';
import { USER_INFO_LIST, TEAM_MEMBERS, PRODUCT_LIST } from '@/service/service-user';
import ProductAIcon from '@/assets/assets-product-1.svg';
import ProductBIcon from '@/assets/assets-product-2.svg';
import ProductCIcon from '@/assets/assets-product-3.svg';
@ -125,10 +116,6 @@ echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendC
export default {
components: {
Card,
ProductAIcon,
ProductBIcon,
ProductCIcon,
ProductDIcon,
},
data() {
return {
@ -139,6 +126,7 @@ export default {
LAST_7_DAYS,
USER_INFO_LIST,
TEAM_MEMBERS,
PRODUCT_LIST,
};
},
computed: {
@ -184,6 +172,20 @@ export default {
...getFolderLineDataSet({ ...chartColors }),
});
},
getIcon(type) {
switch (type) {
case 'a':
return ProductAIcon;
case 'b':
return ProductBIcon;
case 'c':
return ProductCIcon;
case 'd':
return ProductDIcon;
default:
return ProductAIcon;
}
},
},
};
</script>

2
src/router/modules/others.ts

@ -27,7 +27,7 @@ export default [
path: 'index',
redirect: '/login',
component: () => import('@/layouts/blank.vue'),
meta: { title: '登录' },
meta: { title: '登录中心' },
},
],
},

12
src/service/service-user.ts

@ -61,14 +61,4 @@ export const TEAM_MEMBERS = [
},
];
export const PRODUCT_LIST = [
{
logo: 'https://tdesign.gtimg.com/pro-template/tdesign-icon1.png',
},
{
logo: 'https://tdesign.gtimg.com/pro-template/tdesign-icon2.png',
},
{
logo: 'https://tdesign.gtimg.com/pro-template/tdesign-icon3.png',
},
];
export const PRODUCT_LIST = ['a', 'b', 'c', 'd'];

43
src/store/modules/setting.ts

@ -1,6 +1,5 @@
/* eslint-disable no-param-reassign */
import STYLE_CONFIG from '@/config/style';
import MENU_CONFIG from '@/config/routes.js';
import { COLOR_TOKEN, ColorSeries, ColorToken, LIGHT_CHART_COLORS, DARK_CHART_COLORS } from '@/config/color';
// 定义的state初始值
@ -57,46 +56,7 @@ const getters = {
showSidebar: (state: IStateType) => state.layout !== 'top',
showSidebarLogo: (state: IStateType) => state.layout === 'side',
showHeaderLogo: (state: IStateType) => state.layout !== 'side',
headerMenu: (state: IStateType) => {
if (state.layout === 'mix') {
if (state.splitMenu) {
return MENU_CONFIG.map((menu) => ({
...menu,
children: [],
}));
}
return [];
}
return MENU_CONFIG;
},
sideMenu: (state: IStateType, _, rootState) => {
if (state.layout === 'mix' && state.splitMenu) {
let index: number;
for (index = 0; index < MENU_CONFIG.length; index++) {
const item = MENU_CONFIG[index];
if (item.children && item.children.length > 0) {
if (rootState.route.path.indexOf(item.path) === 0) {
return item.children.map((menuRouter) => ({ ...menuRouter, path: `${item.path}/${menuRouter.path}` }));
}
}
}
}
return MENU_CONFIG;
},
showAsideFooter: (state: IStateType) => {
if (state.layout === 'mix' && !state.isSidebarFixed) {
return state.showFooter && state.isAsideFooter;
}
return state.showFooter;
},
showMainFooter: (state: IStateType) => {
if (state.layout === 'mix' && !state.isSidebarFixed) {
return state.showFooter && !state.isAsideFooter;
}
return false;
},
showSettingBtn: (state: IStateType) => !state.showHeader,
showFooter: (state: IStateType) => state.showFooter,
mode: (state: IStateType) => {
if (state.mode === 'auto') {
const media = window.matchMedia('(prefers-color-scheme:dark)');
@ -112,7 +72,6 @@ const getters = {
const actions = {
async changeTheme({ commit, dispatch }, payload: IStateType) {
dispatch('changeMode', payload);
dispatch('changeBrandTheme', payload);
commit('update', payload);
},

Loading…
Cancel
Save