congmao-cli 1.0.0

package/src/template/Vue2/src/pages/result/fail/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="result-fail">
+    <error-circle-icon class="result-fail-icon" />
+    <div class="result-fail-title">创建失败</div>
+    <div class="result-fail-describe">抱歉，您的项目创建失败，企业微信联系检查创建者权限，或返回修改。</div>
+    <div>
+      <t-button @click="() => this.$router.push('/form/base')">返回修改</t-button>
+      <t-button theme="default" @click="() => this.$router.push('/form/base')">返回首页</t-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ErrorCircleIcon } from 'tdesign-icons-vue';
+
+export default {
+  name: 'ResultFail',
+  components: {
+    ErrorCircleIcon,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+.result-fail {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 75vh;
+
+  &-icon {
+    font-size: 72px;
+    color: var(--td-text-color-secondary);
+  }
+
+  &-title {
+    margin-top: 28px;
+    font-size: 20px;
+    color: var(--td-text-color-primary);
+    text-align: center;
+    line-height: 28px;
+    font-weight: 500;
+  }
+
+  &-describe {
+    margin: 8px 0 32px;
+    font-size: 14px;
+    color: var(--td-text-color-secondary);
+    line-height: 22px;
+  }
+  .t-button + .t-button {
+    margin-left: var(--td-comp-margin-s);
+  }
+}
+</style>

package/src/template/Vue2/src/pages/result/maintenance/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <result title="系统维护中" tip="系统维护中，请稍后再试" type="maintenance">
+    <t-button theme="default" @click="() => $router.push('/')">返回首页</t-button>
+  </result>
+</template>
+
+<script>
+import result from '@/components/result/index.vue';
+
+export default {
+  name: 'ResultMaintenance',
+  components: { result },
+};
+</script>

package/src/template/Vue2/src/pages/result/network-error/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <result title="网络异常" tip="网络异常，请稍后再试" type="wifi">
+    <div>
+      <t-button @click="() => $router.push('/')">重新加载</t-button>
+      <t-button theme="default" @click="() => $router.push('/')">返回首页</t-button>
+    </div>
+  </result>
+</template>
+
+<script>
+import result from '@/components/result/index.vue';
+
+export default {
+  name: 'ResultNetworkError',
+  components: { result },
+};
+</script>
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.t-button + .t-button {
+  margin-left: var(--td-comp-margin-s);
+}
+</style>

package/src/template/Vue2/src/pages/result/success/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="result-success">
+    <check-circle-icon class="result-success-icon" />
+    <div class="result-success-title">项目已创建成功</div>
+    <div class="result-success-describe">可以联系负责人分发应用</div>
+    <div>
+      <t-button @click="() => this.$router.push('/form/base')">返回首页</t-button>
+      <t-button @click="() => this.$router.push('/detail/advanced')" theme="default">查看进度</t-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { CheckCircleIcon } from 'tdesign-icons-vue';
+
+export default {
+  name: 'ResultSuccess',
+  components: {
+    CheckCircleIcon,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.result-success {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 75vh;
+
+  &-icon {
+    font-size: 72px;
+    color: var(--td-success-color);
+  }
+
+  &-title {
+    margin-top: 28px;
+    font-size: 20px;
+    color: var(--td-text-color-primary);
+    text-align: center;
+    line-height: 28px;
+    font-weight: 500;
+  }
+
+  &-describe {
+    margin: 8px 0 32px;
+    font-size: 14px;
+    color: var(--td-text-color-secondary);
+    line-height: 22px;
+  }
+}
+
+.t-button + .t-button {
+  margin-left: var(--td-comp-margin-s);
+}
+</style>

package/src/template/Vue2/src/pages/user/index.less

@@ -0,0 +1,148 @@
+@import '@/style/variables';
+
+/deep/ .t-card__title {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.user-left-greeting {
+  padding: 28px 32px;
+  line-height: 28px;
+  font-size: 20px;
+  background: var(--td-bg-color-container);
+  color: var(--td-text-color-primary);
+  text-align: left;
+  border-radius: var(--td-radius-default);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .regular {
+    margin-right: 15px;
+    font-size: 14px;
+  }
+
+  .logo {
+    width: 180px;
+  }
+}
+
+.user-info-list {
+  margin-top: 16px;
+
+  .content {
+    width: 90%;
+  }
+
+  .contract {
+    width: 340px;
+    height: 88px;
+    border-radius: var(--td-radius-default);
+    margin: 8px 0;
+
+    &-title {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      line-height: 24px;
+      margin: 20px 0 6px;
+      font-size: 14px;
+      color: var(--td-text-color-placeholder);
+    }
+
+    &-detail {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      line-height: 40px;
+      font-size: 14px;
+      color: var(--td-text-color-secondary);
+    }
+  }
+
+  .contract:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.user-intro {
+  padding: 32px 24px;
+  background: var(--td-brand-color);
+  border-radius: var(--td-radius-default);
+  color: var(--td-text-color-primary);
+
+  .name {
+    line-height: 37px;
+    font-size: 20px;
+    margin-top: 36px;
+    color: #fff;
+  }
+
+  .position {
+    line-height: 24px;
+    font-size: 14px;
+    margin-top: 8px;
+    color: #fff;
+  }
+
+  .user-info {
+    line-height: 24px;
+    font-size: 14px;
+    color: var(--td-text-color-primary);
+
+    .hiredate,
+    .del,
+    .mail {
+      display: flex;
+    }
+
+    .t-icon {
+      height: 24px;
+      margin-right: 8px;
+    }
+
+    .del {
+      margin: 16px 0;
+    }
+  }
+}
+
+.product-container {
+  margin-top: 16px;
+  border-radius: var(--td-radius-default);
+
+  .content {
+    width: 100%;
+    margin: 24px 0 12px;
+  }
+
+  .logo {
+    width: 48px;
+  }
+}
+
+.content-container {
+  margin-top: 16px;
+  background: var(--td-bg-color-container);
+  border-radius: var(--td-radius-default);
+}
+
+.user-team {
+  margin-top: 16px;
+
+  .t-list-item {
+    padding: 15px 0;
+
+    .t-list-item__meta-avatar {
+      height: 50px;
+      width: 50px;
+      margin: 0 24px 0 0;
+    }
+
+    .t-list-item__meta-description {
+      display: inline-block;
+      color: rgb(0 0 0 / 40%);
+      font-size: 14px;
+    }
+  }
+}

package/src/template/Vue2/src/pages/user/index.ts

@@ -0,0 +1,157 @@
+import { getChartListColor } from '@/utils/color';
+import { getDateArray, getRandomArray } from '@/utils/charts';
+
+/** 折线图数据 */
+// eslint-disable-next-line import/prefer-default-export
+export function getFolderLineDataSet({
+  dateTime = [],
+  placeholderColor,
+  borderColor,
+}: { dateTime?: Array<string> } & Record<string, string>) {
+  let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+  if (dateTime.length > 0) {
+    const divideNum = 7;
+    dateArray = getDateArray(dateTime, divideNum);
+  }
+  return {
+    color: getChartListColor(),
+    grid: {
+      top: '5%',
+      right: '10px',
+      left: '30px',
+      bottom: '60px',
+    },
+    legend: {
+      left: 'center',
+      bottom: '0',
+      orient: 'horizontal', // legend 横向布局。
+      data: ['杯子', '茶叶', '蜂蜜', '面粉'],
+      textStyle: {
+        fontSize: 12,
+        color: placeholderColor,
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: dateArray,
+      boundaryGap: false,
+      axisLabel: {
+        color: placeholderColor,
+      },
+      axisLine: {
+        lineStyle: {
+          color: borderColor,
+          width: 1,
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        color: placeholderColor,
+      },
+      splitLine: {
+        lineStyle: {
+          color: borderColor,
+        },
+      },
+    },
+    tooltip: {
+      trigger: 'item',
+    },
+    series: [
+      {
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        name: '杯子',
+        stack: '总量',
+        data: [
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+        ],
+        type: 'line',
+        itemStyle: {
+          normal: {
+            borderColor,
+            borderWidth: 1,
+          },
+        },
+      },
+      {
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        name: '茶叶',
+        stack: '总量',
+        data: [
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+        ],
+        type: 'line',
+        itemStyle: {
+          normal: {
+            borderColor,
+            borderWidth: 1,
+          },
+        },
+      },
+      {
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        name: '蜂蜜',
+        stack: '总量',
+        data: [
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+        ],
+        type: 'line',
+        itemStyle: {
+          normal: {
+            borderColor,
+            borderWidth: 1,
+          },
+        },
+      },
+      {
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        name: '面粉',
+        stack: '总量',
+        data: [
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+        ],
+        type: 'line',
+        itemStyle: {
+          normal: {
+            borderColor,
+            borderWidth: 1,
+          },
+        },
+      },
+    ],
+  };
+}

package/src/template/Vue2/src/pages/user/index.vue

@@ -0,0 +1,204 @@
+<template>
+  <t-row :gutter="[16, 16]">
+    <t-col :flex="3">
+      <div class="user-left-greeting">
+        <div>
+          Hi，Image
+          <span class="regular"> 下午好，今天是你加入鹅厂的第 100 天～</span>
+        </div>
+        <img src="@/assets/assets-tencent-logo.png" class="logo" />
+      </div>
+
+      <t-card class="user-info-list" title="个人信息" :bordered="false">
+        <template #option>
+          <t-button theme="default" shape="square" variant="text">
+            <edit-icon size="18" />
+          </t-button>
+        </template>
+        <t-row class="content" justify="space-between">
+          <t-col v-for="(item, index) in USER_INFO_LIST" :key="index" class="contract" :span="item.span || 3">
+            <div class="contract-title">
+              {{ item.title }}
+            </div>
+            <div class="contract-detail">
+              {{ item.content }}
+            </div>
+          </t-col>
+        </t-row>
+      </t-card>
+
+      <t-card class="content-container" :bordered="false">
+        <t-tabs value="second">
+          <t-tab-panel value="first" label="内容列表">
+            <p>内容列表</p>
+          </t-tab-panel>
+          <t-tab-panel value="second" label="内容列表">
+            <t-card :bordered="false" title="主页访问数据" subtitle="（次）">
+              <template #options>
+                <t-date-rang-picker
+                  class="card-date-picker-container"
+                  :default-value="LAST_7_DAYS"
+                  theme="primary"
+                  mode="date"
+                  @change="onLineChange"
+                />
+              </template>
+              <div id="lineContainer" style="width: 100%; height: 330px" />
+            </t-card>
+          </t-tab-panel>
+          <t-tab-panel value="third" label="内容列表">
+            <p>内容列表</p>
+          </t-tab-panel>
+        </t-tabs>
+      </t-card>
+    </t-col>
+
+    <t-col :flex="1">
+      <t-card class="user-intro" :bordered="false">
+        <t-avatar size="90px">T</t-avatar>
+        <div class="name">My Account</div>
+        <div class="position">XXG 港澳业务拓展组员工 直客销售</div>
+      </t-card>
+
+      <t-card title="团队成员" class="user-team" :bordered="false">
+        <template #option>
+          <t-button theme="default" shape="square" variant="text">
+            <edit-icon size="18" />
+          </t-button>
+        </template>
+        <t-list :split="false">
+          <t-list-item v-for="(item, index) in TEAM_MEMBERS" :key="index">
+            <t-list-item-meta :image="item.avatar" :title="item.title" :description="item.description" />
+          </t-list-item>
+        </t-list>
+      </t-card>
+
+      <t-card title="服务产品" class="product-container" :bordered="false">
+        <template #option>
+          <t-button theme="default" shape="square" variant="text">
+            <edit-icon size="18" />
+          </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>
+        </t-row>
+      </t-card>
+    </t-col>
+  </t-row>
+</template>
+<script>
+import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
+import { LineChart } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
+import * as echarts from 'echarts/core';
+import { EditIcon } from 'tdesign-icons-vue';
+
+import { mapState } from 'vuex';
+
+import { getFolderLineDataSet } from './index';
+import { changeChartsTheme } from '@/utils/color';
+import { LAST_7_DAYS } from '@/utils/date';
+
+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';
+import ProductDIcon from '@/assets/assets-product-4.svg';
+
+echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendComponent]);
+
+export default {
+  name: 'UserIndex',
+
+  components: {
+    ProductAIcon,
+    ProductBIcon,
+    ProductCIcon,
+    ProductDIcon,
+    EditIcon,
+  },
+  data() {
+    return {
+      dashboardBase: '',
+      lineContainer: '',
+      lineChart: '',
+      LAST_7_DAYS,
+      USER_INFO_LIST,
+      TEAM_MEMBERS,
+      PRODUCT_LIST,
+    };
+  },
+  computed: {
+    ...mapState('setting', ['brandTheme', 'mode']),
+  },
+  watch: {
+    brandTheme() {
+      changeChartsTheme([this.lineChart]);
+    },
+    mode() {
+      this.renderCharts();
+    },
+    lineChart() {
+      this.updateContainer();
+    },
+  },
+  mounted() {
+    window.addEventListener('resize', this.updateContainer, false);
+    this.renderCharts();
+    this.$nextTick(() => {
+      this.updateContainer();
+    });
+  },
+  methods: {
+    /** 图表选择 */
+    onLineChange(value) {
+      this.lineChart.setOption(getFolderLineDataSet({ dateTime: value }));
+    },
+    updateContainer() {
+      this.lineChart.resize?.({
+        width: this.lineContainer.clientWidth,
+        height: this.lineContainer.clientHeight,
+      });
+    },
+    renderCharts() {
+      const { chartColors } = this.$store.state.setting;
+      if (!this.lineContainer) {
+        this.lineContainer = document.getElementById('lineContainer');
+      }
+      this.lineChart = echarts.init(this.lineContainer);
+      this.lineChart.setOption({
+        grid: {
+          x: 30, // 默认是80px
+          y: 30, // 默认是60px
+          x2: 10, // 默认80px
+          y2: 30, // 默认60px
+        },
+        ...getFolderLineDataSet({ ...chartColors }),
+      });
+    },
+    getIcon(type) {
+      const typeMap = {
+        a: ProductAIcon,
+        b: ProductBIcon,
+        c: ProductCIcon,
+        d: ProductDIcon,
+      };
+      return typeMap[type || 'a'];
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import url('./index.less');
+</style>