congmao-cli 1.0.0

package/src/template/Vue2/src/components/result/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="result-container">
+    <div class="result-bg-img">
+      <component :is="dynamicComponent"></component>
+    </div>
+    <div class="result-title">{{ title }}</div>
+    <div class="result-tip">{{ tip }}</div>
+    <slot />
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+import Result403Icon from '@/assets/assets-result-403.svg';
+import Result404Icon from '@/assets/assets-result-404.svg';
+import Result500Icon from '@/assets/assets-result-500.svg';
+import ResultIeIcon from '@/assets/assets-result-ie.svg';
+import ResultWifiIcon from '@/assets/assets-result-wifi.svg';
+import ResultMaintenanceIcon from '@/assets/assets-result-maintenance.svg';
+
+export default Vue.extend({
+  name: 'Result',
+  props: {
+    bgUrl: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    tip: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    dynamicComponent() {
+      switch (this.type) {
+      case '403':
+        return Result403Icon;
+      case '404':
+        return Result404Icon;
+      case '500':
+        return Result500Icon;
+      case 'ie':
+        return ResultIeIcon;
+      case 'wifi':
+        return ResultWifiIcon;
+      case 'maintenance':
+        return ResultMaintenanceIcon;
+      default:
+        return Result403Icon;
+      }
+    },
+  },
+});
+</script>
+<style lang="less" scoped>
+@import '@/style/variables';
+
+.result {
+  &-link {
+    color: var(--td-brand-color);
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--td-brand-color);
+    }
+
+    &:active {
+      color: var(--td-brand-color);
+    }
+
+    &--active {
+      color: var(--td-brand-color);
+    }
+
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  &-container {
+    min-height: 400px;
+    height: 75vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+  }
+
+  &-bg-img {
+    width: 200px;
+    color: var(--td-brand-color);
+  }
+
+  &-title {
+    color: var(--td-text-color-primary);
+    font: var(--td-font-title-large);
+    font-weight: 500;
+    font-style: normal;
+    margin-top: 8px;
+  }
+
+  &-tip {
+    margin: 8px 0 32px;
+    font: var(--td-font-body-medium);
+    color: var(--td-text-color-secondary);
+  }
+}
+</style>

package/src/template/Vue2/src/components/thumbnail/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <img :class="className" :src="url" />
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'thumbnail',
+  props: {
+    url: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'layout',
+    },
+  },
+  computed: {
+    className() {
+      return [
+        'thumbnail-container',
+        {
+          'thumbnail-circle': this.type === 'circle',
+          'thumbnail-layout': this.type === 'layout',
+        },
+      ];
+    },
+  },
+});
+</script>
+<style lang="less" scoped>
+@import url('@/style/index.less');
+
+.thumbnail {
+  &-container {
+    display: inline-block;
+  }
+
+  &-circle {
+    border-radius: var(--td-radius-circle);
+  }
+
+  &-layout {
+    width: 88px;
+    height: 48px;
+  }
+}
+</style>

package/src/template/Vue2/src/components/trend/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <span :class="containerCls">
+    <span :class="iconCls">
+      <svg
+        v-if="type === 'down'"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M11.5 8L8 11.5L4.5 8" stroke="currentColor" stroke-width="1.5" />
+        <path d="M8 11L8 4" stroke="currentColor" stroke-width="1.5" />
+      </svg>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" v-else>
+        <path d="M4.5 8L8 4.5L11.5 8" stroke="currentColor" stroke-width="1.5" />
+        <path d="M8 5V12" stroke="currentColor" stroke-width="1.5" />
+      </svg>
+    </span>
+    <span>{{ describe }}</span>
+  </span>
+</template>
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'Trend',
+
+  props: {
+    type: String,
+    describe: [String, Number],
+    isReverseColor: Boolean,
+  },
+  computed: {
+    containerCls() {
+      return [
+        'trend-container',
+        {
+          'trend-container__reverse': this.isReverseColor,
+          'trend-container__up': !this.isReverseColor && this.type === 'up',
+          'trend-container__down': !this.isReverseColor && this.type === 'down',
+        },
+      ];
+    },
+    iconCls() {
+      return ['trend-icon-container'];
+    },
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.trend {
+
+  &-container {
+
+    &__up {
+      color: var(--td-error-color);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      .trend-icon-container {
+        background: var(--td-error-color-2);
+        margin-right: 8px;
+      }
+    }
+
+    &__down {
+      color: var(--td-success-color);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      .trend-icon-container {
+        background: var(--td-success-color-2);
+        margin-right: 8px;
+      }
+    }
+
+    &__reverse {
+      color: #ffffff;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      .trend-icon-container {
+        background: var(--td-brand-color-5);
+        margin-right: 8px;
+      }
+    }
+
+    .trend-icon-container {
+      border-radius: 50%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+</style>

package/src/template/Vue2/src/config/color.ts

@@ -0,0 +1,30 @@
+export type TColorToken = Record<string, string>;
+export type TColorSeries = Record<string, TColorToken>;
+
+// TODO: 中性色暂时固定 待tvision-color生成带色彩倾向的中性色
+export const LIGHT_CHART_COLORS = {
+  textColor: 'rgba(0, 0, 0, 0.9)',
+  placeholderColor: 'rgba(0, 0, 0, 0.35)',
+  borderColor: '#dcdcdc',
+  containerColor: '#fff',
+};
+
+export const DARK_CHART_COLORS = {
+  textColor: 'rgba(255, 255, 255, 0.9)',
+  placeholderColor: 'rgba(255, 255, 255, 0.35)',
+  borderColor: '#5e5e5e',
+  containerColor: '#242424',
+};
+
+export type TChartColor = typeof LIGHT_CHART_COLORS;
+
+export const DEFAULT_COLOR_OPTIONS = [
+  '#0052D9',
+  '#0594FA',
+  '#00A870',
+  '#EBB105',
+  '#ED7B2F',
+  '#E34D59',
+  '#ED49B4',
+  '#834EC2',
+];

package/src/template/Vue2/src/config/global.ts

@@ -0,0 +1,2 @@
+export const prefix = 'tdesign-starter';
+export const TOKEN_NAME = 'tdesign-starter';

package/src/template/Vue2/src/config/host.ts

@@ -0,0 +1,26 @@
+export default {
+  development: {
+    // 开发环境接口请求
+    API: '',
+    // 开发环境 cdn 路径
+    CDN: '',
+  },
+  test: {
+    // 测试环境接口地址
+    API: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
+    // 测试环境 cdn 路径
+    CDN: '',
+  },
+  release: {
+    // 正式环境接口地址
+    API: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com',
+    // 正式环境 cdn 路径
+    CDN: '',
+  },
+  site: {
+    // 正式环境接口地址
+    API: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com',
+    // 正式环境 cdn 路径
+    CDN: '',
+  },
+};

package/src/template/Vue2/src/config/style.ts

@@ -0,0 +1,14 @@
+export default {
+  showFooter: true,
+  isSidebarCompact: false,
+  showBreadcrumb: false,
+  mode: 'light',
+  layout: 'side',
+  splitMenu: false,
+  isFooterAside: false,
+  isSidebarFixed: true,
+  isHeaderFixed: true,
+  isUseTabsRouter: false,
+  showHeader: true,
+  brandTheme: '#0052D9',
+};

package/src/template/Vue2/src/constants/index.ts

@@ -0,0 +1,46 @@
+interface IOption {
+  value: number | string;
+  label: string;
+}
+// 合同状态枚举
+export const CONTRACT_STATUS = {
+  FAIL: 0,
+  AUDIT_PENDING: 1,
+  EXEC_PENDING: 2,
+  EXECUTING: 3,
+  FINISH: 4,
+};
+
+export const CONTRACT_STATUS_OPTIONS: Array<IOption> = [
+  { value: CONTRACT_STATUS.FAIL, label: '审核失败' },
+  { value: CONTRACT_STATUS.AUDIT_PENDING, label: '待审核' },
+  { value: CONTRACT_STATUS.EXEC_PENDING, label: '待履行' },
+  { value: CONTRACT_STATUS.EXECUTING, label: '审核成功' },
+  { value: CONTRACT_STATUS.FINISH, label: '已完成' },
+];
+
+// 合同类型枚举
+export const CONTRACT_TYPES = {
+  MAIN: 0,
+  SUB: 1,
+  SUPPLEMENT: 2,
+};
+
+export const CONTRACT_TYPE_OPTIONS: Array<IOption> = [
+  { value: CONTRACT_TYPES.MAIN, label: '主合同' },
+  { value: CONTRACT_TYPES.SUB, label: '子合同' },
+  { value: CONTRACT_TYPES.SUPPLEMENT, label: '补充合同' },
+];
+
+// 合同收付类型枚举
+export const CONTRACT_PAYMENT_TYPES = {
+  PAYMENT: 0,
+  RECIPT: 1,
+};
+
+// 通知的优先级对应的TAG类型
+export const NOTIFICATION_TYPES = {
+  low: 'primary',
+  middle: 'warning',
+  high: 'danger',
+};

package/src/template/Vue2/src/interface.ts

@@ -0,0 +1,39 @@
+import STYLE_CONFIG from '@/config/style';
+
+export interface ResDataType {
+  code: number;
+  data: any;
+}
+
+export interface MenuRoute {
+  path: string;
+  title?: string;
+  icon?:
+    | string
+    | {
+        render: () => void;
+      };
+  redirect?: string;
+  children: MenuRoute[];
+  meta: any;
+}
+
+export type ModeType = 'dark' | 'light';
+
+export type SettingType = typeof STYLE_CONFIG;
+
+export type ClassName = { [className: string]: any } | ClassName[] | string;
+
+export type CommonObjType = {
+  [key: string]: string | number;
+};
+
+export interface NotificationItem {
+  id: string;
+  content: string;
+  type: string;
+  status: boolean;
+  collected: boolean;
+  date: string;
+  quality: 'high' | 'low' | 'middle';
+}

package/src/template/Vue2/src/layouts/blank.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="tdesign-wrapper">
+    <router-view />
+  </div>
+</template>
+<style lang="less" scoped>
+.tdesign-wrapper {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/src/template/Vue2/src/layouts/components/Breadcrumb.vue

@@ -0,0 +1,39 @@
+<template>
+  <t-breadcrumb :max-item-width="'150'" class="tdesign-breadcrumb">
+    <t-breadcrumbItem v-for="item in crumbs" :key="item.to" :to="item.to">
+      {{ item.title }}
+    </t-breadcrumbItem>
+  </t-breadcrumb>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TdesignStarterBreadcrumb',
+  props: {
+    isVisible: Boolean,
+  },
+  computed: {
+    crumbs() {
+      const pathArray = this.$route.path.split('/');
+      pathArray.shift();
+
+      const breadcrumbs = pathArray.reduce((breadcrumbArray, path, idx) => {
+        breadcrumbArray.push({
+          path,
+          to: breadcrumbArray[idx - 1] ? `/${breadcrumbArray[idx - 1].path}/${path}` : `/${path}`,
+          title: this.$route.matched[idx].meta.title || path,
+        });
+        return breadcrumbArray;
+      }, []);
+      return breadcrumbs;
+    },
+  },
+});
+</script>
+<style scoped>
+.tdesign-breadcrumb {
+  margin-bottom: 8px;
+}
+</style>

package/src/template/Vue2/src/layouts/components/Content.vue

@@ -0,0 +1,43 @@
+<template>
+  <transition name="fade" mode="out-in">
+    <keep-alive :include="this.aliveViews">
+      <router-view v-if="!this.isRefreshing" />
+    </keep-alive>
+  </transition>
+</template>
+<script lang="ts">
+import { mapGetters } from 'vuex';
+import isBoolean from 'lodash/isBoolean';
+import isUndefined from 'lodash/isUndefined';
+
+export default {
+  computed: {
+    ...mapGetters({
+      tabRouterList: 'tabRouter/tabRouterList',
+      isRefreshing: 'tabRouter/isRefreshing',
+      isUseTabsRouter: 'setting/isUseTabsRouter',
+    }),
+    aliveViews() {
+      return this.tabRouterList
+        .filter((route) => {
+          const keepAliveConfig = route.meta?.keepAlive;
+          const isRouteKeepAlive = isUndefined(keepAliveConfig) || (isBoolean(keepAliveConfig) && keepAliveConfig); // 默认开启keepalive
+          return route.isAlive && isRouteKeepAlive;
+        })
+        .map((route) => route.name);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import '@/style/variables';
+
+.fade-leave-active,
+.fade-enter-active {
+  transition: opacity @anim-duration-slow @anim-time-fn-easing;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/template/Vue2/src/layouts/components/Footer.vue

@@ -0,0 +1,27 @@
+<template>
+  <div :class="prefix + '-footer'">Copyright © 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</div>
+</template>
+
+<script>
+import { prefix } from '@/config/global';
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: `${prefix}-footer`,
+  data() {
+    return {
+      prefix,
+    };
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables';
+
+.@{starter-prefix}-footer {
+  color: var(--td-text-color-placeholder);
+  line-height: 20px;
+  text-align: center;
+}
+</style>