perf: 分析页及工作台样式优化

2020-08-26 21:43:30 +08:00 · 2020-08-26 21:43:30 +08:00 · bd4097de94
parent fee868b4f6
commit bd4097de94
19 changed files with 99 additions and 66 deletions
--- a/mock/dashboard/wokb.js
+++ b/mock/dashboard/wokb.js
@ -4,7 +4,7 @@ const Mock = require('mockjs');
 const wokbProd = Mock.mock([
  {
    amount: '@integer(90,100)',
-    type: '成品总是',
+    type: '成品总数',
  },
  {
    amount: '@integer(0,50)',
@ -70,7 +70,7 @@ const fileList = Mock.mock({
  ],
 });
 const annoList = Mock.mock({
-  'items|5': [
+  'items|6': [
    {
      id: '@id',
      annoTime: '@date',
--- a/src/views/dashboard/analysis/FlowAnalysis.vue
+++ b/src/views/dashboard/analysis/FlowAnalysis.vue
@ -20,7 +20,7 @@
                <div class={`${prefixCls}__rank`}>
                  排名<span>前20%</span>
                </div>
-                <Progress percent={70} showInfo={false} />
+                <Progress percent={70} showInfo={false} status="active" />
                <Divider />

                <ul class={`${prefixCls}__rs`}>
@ -73,6 +73,7 @@
    &__left {
      padding: 10px 20px !important;
      border-right: 1px solid rgba(0, 0, 0, 0.06);
+      border-radius: 0;
    }

    &__score {
--- a/src/views/dashboard/analysis/components/AnalysisBar.vue
+++ b/src/views/dashboard/analysis/components/AnalysisBar.vue
@ -15,13 +15,15 @@
        setOptions({
          tooltip: {
            trigger: 'axis',
+            backgroundColor: 'rgba(0, 0, 0, .6)',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
-            left: 60,
+            itemWidth: 15,
+            right: 10,
            data: ['产品一', '产品二', '产品三'],
          },
          grid: {
@ -33,12 +35,18 @@
          xAxis: [
            {
              type: 'category',
+              axisTick: {
+                inside: true, // 刻度朝内
+              },
              data: ['付费用户', '免费用户', '自主'],
            },
          ],
          yAxis: [
            {
              type: 'value',
+              axisTick: {
+                inside: true, // 刻度朝内
+              },
            },
          ],
          series: [
@ -46,7 +54,7 @@
              name: '产品一',
              type: 'bar',
              itemStyle: {
-                color: '#5B8FF9',
+                color: '#3ca0f6',
              },
              data: [3200, 3320, 3010],
              animationDuration: 4000,
@ -55,7 +63,7 @@
              name: '产品二',
              type: 'bar',
              itemStyle: {
-                color: '#55D187',
+                color: '#7dd9b9',
              },
              data: [1200, 2600, 1010],
              animationDuration: 4000,
@ -65,7 +73,7 @@
              name: '产品三',
              type: 'bar',
              itemStyle: {
-                color: '#ED6F6F',
+                color: '#e6a23c',
              },
              data: [862, 2500, 964],
              animationDuration: 4000,
--- a/src/views/dashboard/analysis/components/AnalysisLine.vue
+++ b/src/views/dashboard/analysis/components/AnalysisLine.vue
@ -19,7 +19,7 @@
          tooltip: {
            trigger: 'axis',
            padding: 3,
-            backgroundColor: '#222',
+            backgroundColor: 'rgba(0, 0, 0, .6)',
            borderColor: '#777',
            borderWidth: 1,
          },
@ -32,17 +32,18 @@
            orient: 'horizontal',
            data: ['产品一', '产品二'],
          },
-
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
-
          xAxis: {
            type: 'category',
            boundaryGap: false,
+            axisTick: {
+              inside: true, // 刻度朝内
+            },
            data: [
              '一月',
              '二月',
@ -60,6 +61,9 @@
          },
          yAxis: {
            type: 'value',
+            axisTick: {
+              inside: true, // 刻度朝内
+            },
          },
          series: [
            {
--- a/src/views/dashboard/analysis/components/AnalysisPie.vue
+++ b/src/views/dashboard/analysis/components/AnalysisPie.vue
@ -6,10 +6,10 @@
  import { basicProps, BasicProps } from './props';

  const m2R2Data = [
-    { value: 335, name: '移动设备', itemStyle: { color: '#5B8FF9' } },
-    { value: 310, name: '网页端', itemStyle: { color: '#55D187' } },
-    { value: 234, name: '手表', itemStyle: { color: '#FFD164' } },
-    { value: 234, name: '其他', itemStyle: { color: '#ED6F6F' } },
+    { value: 335, name: '移动设备', itemStyle: { color: '#1b65b9' } },
+    { value: 310, name: '网页端', itemStyle: { color: '#3ca0f6' } },
+    { value: 234, name: '手表', itemStyle: { color: '#2dc0c0' } },
+    { value: 234, name: '其他', itemStyle: { color: '#7dd9b9' } },
  ];
  export default defineComponent({
    name: 'AnalysisLine',
@ -40,10 +40,11 @@
          ],
          tooltip: {
            trigger: 'item',
+            backgroundColor: 'rgba(0, 0, 0, .6)',
          },
          legend: {
            icon: 'circle',
-            itemHeight: 6,
+            itemHeight: 10,
            type: 'scroll',
            orient: 'vertical',
            left: '70%',
@ -59,7 +60,7 @@
              name: '成交额',
              type: 'pie',
              center: ['35%', '50%'],
-              radius: ['40%', '65%'],
+              radius: ['45%', '65%'],
              label: {
                show: false,
              },
--- a/src/views/dashboard/analysis/components/GrowCard.vue
+++ b/src/views/dashboard/analysis/components/GrowCard.vue
@ -51,13 +51,13 @@
  @prefix-cls: ~'@{namespace}-grow-card';
  .@{prefix-cls} {
    display: flex;
-    width: calc(100% - 24px);
+    width: calc(100% - 12px);
    height: 158px;
-    padding: 16px 30px 12px 16px;
-    margin: 0 12px 12px 12px;
+    padding: 16px 16px 12px 16px;
+    // margin: 0 12px 12px 12px;
    cursor: pointer;
    background: @white;
-    border-radius: 14px;
+    border-radius: 4px;
    box-shadow: 6px 6px 54px 0 rgba(0, 0, 0, 0.05);
    flex-direction: column;

@ -97,6 +97,11 @@
        color: @danger-color;
      }

+      /deep/ .ant-statistic-content-prefix svg {
+        width: 0.98rem !important;
+        height: 0.98rem !important;
+      }
+
      &.is-up {
        /deep/ .ant-statistic-content-value {
          color: @success-color;
@ -108,7 +113,7 @@
      display: inline-block;
      padding-left: 10px;
      font-family: PingFangSC-Regular;
-      font-size: 14px;
+      font-size: 12px;
      line-height: 22px;
      letter-spacing: 0;
      color: #606060;
--- a/src/views/dashboard/analysis/components/TaskCard.vue
+++ b/src/views/dashboard/analysis/components/TaskCard.vue
@ -23,7 +23,8 @@

      return () => {
        const { title, desc, updateTime, percent, status } = props.info;
-        const text = status === 'done' ? '进度正常' : status === 'warn' ? '进度滞后' : '项目完成';
+        const text =
+          status === 'active' ? '进度正常' : status === 'exception' ? '进度滞后' : '项目完成';
        return (
          <div class={prefixCls}>
            <div class={`${prefixCls}-header`}>
@ -39,7 +40,7 @@
                <span>进度</span>
                <span>{percent}%</span>
              </div>
-              <Progress percent={percent} showInfo={false} />
+              <Progress percent={percent} showInfo={false} status={status} />
            </div>
            <div class={[`${prefixCls}-footer`]}>
              <span class={`${prefixCls}__date`}>
@ -63,7 +64,7 @@
  .@{prefix-cls} {
    display: flex;
    width: calc(100% - 24px);
-    height: 203px;
+    height: 199px;
    padding: 24px 20px 12px 16px;
    margin: 0 12px 12px 12px;
    background: @white;
@ -115,7 +116,7 @@

    &__desc {
      font-family: PingFangSC-Regular;
-      font-size: 14px;
+      font-size: 12px;
      line-height: 21px;
      color: #8181a5;
    }
--- a/src/views/dashboard/analysis/components/TrendLine.vue
+++ b/src/views/dashboard/analysis/components/TrendLine.vue
@ -19,24 +19,25 @@
          tooltip: {
            trigger: 'axis',
            padding: 3,
-            backgroundColor: '#222',
+            backgroundColor: 'rgba(0, 0, 0, .6)',
            borderColor: '#777',
            borderWidth: 1,
          },
          legend: {
            show: false,
          },
-
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
-
          xAxis: {
            type: 'category',
            boundaryGap: false,
+            axisTick: {
+              inside: true, // 刻度朝内
+            },
            data: [
              '一月',
              '二月',
@ -54,6 +55,9 @@
          },
          yAxis: {
            type: 'value',
+            axisTick: {
+              inside: true, // 刻度朝内
+            },
          },
          series: [
            {
--- a/src/views/dashboard/analysis/data.tsx
+++ b/src/views/dashboard/analysis/data.tsx
@ -6,21 +6,22 @@ export const taskList: TaskItem[] = [
    title: '开发任务一',
    updateTime: '2020.7.12',
    desc: '开发任务一简介',
-    status: 'success',
+    status: 'active',
  },
  {
    percent: 67,
    title: '开发任务二',
    updateTime: '2020.3.12',
    desc: '开发任务二简介',
-    status: 'warn',
+    status: 'exception',
  },
  {
    percent: 100,
    title: '开发任务三',
    updateTime: '2020.4.12',
    desc: '开发任务三简介',
-    status: 'done',
+
+    status: 'success',
  },
 ];
 export const growCardList: GrowCardItem[] = [
--- a/src/views/dashboard/analysis/index.vue
+++ b/src/views/dashboard/analysis/index.vue
@ -19,7 +19,7 @@

      return () => (
        <div class={[prefixCls, 'p-4']}>
-          <Row>
+          <Row class="grow-card">
            {growCardList.map((item, index) => {
              return (
                <Col key={index} sm={24} md={12} lg={6}>
@ -31,31 +31,31 @@

          <Row>
            <Col md={24} lg={17} class="pr-6 my-3">
-              <CollapseContainer title="产品成交额" canExpan={false}>
+              <CollapseContainer class="mr-3" title="产品成交额" canExpan={false}>
                <AnalysisLine />
              </CollapseContainer>
-              <Row class="mt-6">
+              <Row class="mt-3">
                <Col md={24} lg={12} class="pr-3 product-total">
-                  <CollapseContainer title="产品成交额" canExpan={false}>
+                  <CollapseContainer class="mr-3" title="产品成交额" canExpan={false}>
                    <AnalysisPie />
                  </CollapseContainer>
                </Col>
                <Col md={24} lg={12}>
-                  <CollapseContainer title="用户来源" canExpan={false}>
+                  <CollapseContainer class="mr-3" title="用户来源" canExpan={false}>
                    <AnalysisBar />
                  </CollapseContainer>
                </Col>
              </Row>
            </Col>
-            <Col md={24} lg={7} class="my-3">
-              <CollapseContainer title="项目进度" canExpan={false}>
+            <Col md={24} lg={7}>
+              <CollapseContainer class="mt-3" title="项目进度" canExpan={false}>
                {taskList.map((item, index) => {
                  return <TaskCard key={index} info={item} />;
                })}
              </CollapseContainer>
            </Col>
          </Row>
-          <Row class="mt-3">
+          <Row>
            <FlowAnalysis />
          </Row>
        </div>
@ -72,5 +72,9 @@
    .product-total {
      .respond-to(small-and-medium, {padding-right: 0;margin-bottom: 24px;});
    }
+
+    .grow-card {
+      margin-right: -12px;
+    }
  }
 </style>
--- a/src/views/dashboard/analysis/types.ts
+++ b/src/views/dashboard/analysis/types.ts
@ -9,7 +9,7 @@ export interface GrowCardItem {

 export interface TaskItem {
  percent: number;
-  status: 'success' | 'warn' | 'done';
+  status: 'success' | 'exception' | 'active';
  updateTime: string;
  title: string;
  desc: string;
--- a/src/views/dashboard/workbench/components/AnnoList.vue
+++ b/src/views/dashboard/workbench/components/AnnoList.vue
@ -44,7 +44,7 @@
  @prefix-cls: ~'@{namespace}-anno-list';
  .@{prefix-cls} {
    /deep/ .@{namespace}-collapse-container__body {
-      height: 200px;
+      height: 260px;
    }

    &__item {
--- a/src/views/dashboard/workbench/components/DplyList.vue
+++ b/src/views/dashboard/workbench/components/DplyList.vue
@ -50,7 +50,7 @@
    // padding: 24px;
    // background: #fff;
    /deep/ .@{namespace}-collapse-container__body {
-      height: 320px;
+      height: 220px;
    }

    &__item {
--- a/src/views/dashboard/workbench/components/FileList.vue
+++ b/src/views/dashboard/workbench/components/FileList.vue
@ -51,7 +51,7 @@
  @prefix-cls: ~'@{namespace}-file-list';
  .@{prefix-cls} {
    /deep/ .@{namespace}-collapse-container__body {
-      height: 180px;
+      height: 190px;
    }

    &__item {
--- a/src/views/dashboard/workbench/components/NewsList.vue
+++ b/src/views/dashboard/workbench/components/NewsList.vue
@ -30,11 +30,11 @@
                      <img slot="avatar" src={headerImg} class={`${prefixCls}__item-avatar`} />
                      <div slot="description" class={`${prefixCls}__item-desc`}>
                        <div class={[`${prefixCls}__item-time`, 'mb-1']}> {sendTime}</div>
-                        <div class={[`${prefixCls}__item-title`, 'mb-4']}>
+                        <div class={[`${prefixCls}__item-title`, 'mb-1']}>
                          <span class={`${prefixCls}__item-light`}>{sender}&nbsp;</span>申请迭代
                          <span class={`${prefixCls}__item-light`}>&nbsp;{title}&nbsp;</span>发布
                        </div>
-                        <div class={[`${prefixCls}__item-cnte`, 'p-3']}>
+                        <div class={[`${prefixCls}__item-cnte`, 'p-2']}>
                          <span class={`${prefixCls}__item-cnte__title`}> {cnteId}</span>
                          <br />
                          Status: {cnteStas}
@ -60,13 +60,14 @@
  @prefix-cls: ~'@{namespace}-news-list';
  .@{prefix-cls} {
    /deep/ .@{namespace}-collapse-container__body {
-      height: 520px;
+      height: 270px;
    }

    &__item {
      &-avatar {
-        width: 28px;
-        height: 28px;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
      }

      &-title {
--- a/src/views/dashboard/workbench/components/ProdTotal.vue
+++ b/src/views/dashboard/workbench/components/ProdTotal.vue
@ -13,7 +13,6 @@
      });

      return () => (
-        // <div class={prefixCls}>
        <Row class={prefixCls}>
          {unref(getProdList).map((item, index) => {
            return (
@ -26,7 +25,6 @@
            );
          })}
        </Row>
-        // </div>
      );
    },
  });
--- a/src/views/dashboard/workbench/components/TodoList.vue
+++ b/src/views/dashboard/workbench/components/TodoList.vue
@ -1,6 +1,6 @@
 <script lang="tsx">
  import { defineComponent, computed, unref } from 'compatible-vue';
-  import { List, Icon } from 'ant-design-vue';
+  import { List, Icon, Tag } from 'ant-design-vue';
  import { CollapseContainer } from '@/components/container/index';

  import { useDesign } from '@/hooks/core/useDesign';
@ -35,12 +35,13 @@
                      <span class={`${prefixCls}__item-memo`}>{memo}</span>
                    </div>
                    <div slot="description" class={`${prefixCls}__item-desc`}>
-                      提交人：{sbmter}&nbsp;&nbsp;提交时间：{sbmtTime}
+                      提交人：{sbmter}
+                      <br />
+                      提交时间：{sbmtTime}
                    </div>
                  </List.Item.Meta>
                  <a-button onClick={handleAppr.bind(item)} type="link">
-                    待审批
-                    <Icon type="down" />
+                    <Tag color="blue">待审批</Tag>
                  </a-button>
                </List.Item>
              );
@ -61,6 +62,8 @@
  .@{prefix-cls} {
    // padding: 24px;
    // background: #fff;
+    position: relative;
+
    &__total {
      display: inline-block;
      width: 20px;
@ -75,11 +78,13 @@
    }

    &__all {
+      position: absolute;
+      top: 0;
+      right: 10px;
      height: 56px;
      line-height: 56px;
      text-align: center;
-      background: #f9f9f9;
-      border-radius: 0 0 2px 2px;
+      cursor: pointer;
    }

    &__item {
@ -91,14 +96,14 @@
      }

      &-memo {
-        font-size: 14px;
+        font-size: 12px;
        font-weight: normal;
        line-height: 22px;
        color: #7c8087;
      }

      &-desc {
-        font-size: 14px;
+        font-size: 12px;
        line-height: 22px;
        color: #7c8087;
      }
--- a/src/views/dashboard/workbench/index.vue
+++ b/src/views/dashboard/workbench/index.vue
@ -21,17 +21,17 @@
        wokbStore.loadAction();
      });
      return () => (
-        <Row class={prefixCls} gutter={16}>
+        <Row class={prefixCls} gutter={12}>
          <Col md={24} lg={17}>
-            <ProdTotal class="mb-4" />
-            <TodoList class="mb-4" />
-            <DplyList class="mb-4" />
+            <ProdTotal class="mb-3" />
+            <TodoList class="mb-3" />
+            <DplyList class="mb-3" />
            <NewsList />
          </Col>
          <Col md={24} lg={7}>
-            <img src={wokbImg} class={[`${prefixCls}__wokb-img`, 'mb-4']} />
-            <ShortCuts class="mb-4" />
-            <FileList class="mb-4" />
+            <img src={wokbImg} class={[`${prefixCls}__wokb-img`, 'mb-3']} />
+            <ShortCuts class="mb-3" />
+            <FileList class="mb-3" />
            <AnnoList />
          </Col>
        </Row>
--- a/src/views/examples/charts/line/Line1.vue
+++ b/src/views/examples/charts/line/Line1.vue
@ -26,7 +26,7 @@
          legend: {
            icon: 'rect',
            itemWidth: 15,
-            itemHeight: 4,
+            itemHeight: 6,
            left: 80,
            top: 0,
            orient: 'horizontal',