congmao-cli 1.0.0

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

@@ -0,0 +1,321 @@
+<template>
+  <div :class="layoutCls">
+    <t-head-menu :class="menuCls" :theme="theme" expandType="popup" :value="active">
+      <template #logo>
+        <span v-if="showLogo" class="header-logo-container" @click="handleNav('/dashboard/base')">
+          <logo-full class="t-logo" />
+        </span>
+        <div v-else class="header-operate-left">
+          <t-button theme="default" shape="square" variant="text" @click="changeCollapsed">
+            <view-list-icon class="collapsed-icon" />
+          </t-button>
+          <search :layout="layout" />
+        </div>
+      </template>
+      <menu-content v-show="layout !== 'side'" class="header-menu" :navData="menu" />
+      <template #operations>
+        <div class="operations-container">
+          <!-- 搜索框 -->
+          <search v-if="layout !== 'side'" :layout="layout" />
+
+          <!-- 全局通知 -->
+          <notice />
+
+          <t-tooltip placement="bottom" content="代码仓库">
+            <t-button theme="default" shape="square" variant="text" @click="navToGitHub">
+              <logo-github-icon />
+            </t-button>
+          </t-tooltip>
+          <t-tooltip placement="bottom" content="帮助文档">
+            <t-button theme="default" shape="square" variant="text" @click="navToHelper">
+              <help-circle-icon />
+            </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')">
+                  <user-circle-icon />个人中心
+                </t-dropdown-item>
+                <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
+                  <poweroff-icon />退出登录
+                </t-dropdown-item>
+              </t-dropdown-menu>
+            </template>
+            <t-button class="header-user-btn" theme="default" variant="text">
+              <template #icon>
+                <user-circle-icon class="header-user-avatar" />
+              </template>
+              <div class="header-user-account">Tencent</div>
+              <template #suffix>
+                <chevron-down-icon />
+              </template>
+            </t-button>
+          </t-dropdown>
+          <t-tooltip placement="bottom" content="系统设置">
+            <t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
+              <setting-icon />
+            </t-button>
+          </t-tooltip>
+        </div>
+      </template>
+    </t-head-menu>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import {
+  ViewListIcon,
+  LogoGithubIcon,
+  HelpCircleIcon,
+  UserCircleIcon,
+  PoweroffIcon,
+  SettingIcon,
+  ChevronDownIcon,
+} from 'tdesign-icons-vue';
+import { prefix } from '@/config/global';
+import LogoFull from '@/assets/assets-logo-full.svg';
+
+import Notice from './Notice.vue';
+import Search from './Search.vue';
+import MenuContent from './MenuContent.vue';
+
+export default Vue.extend({
+  components: {
+    MenuContent,
+    LogoFull,
+    Notice,
+    Search,
+    ViewListIcon,
+    LogoGithubIcon,
+    HelpCircleIcon,
+    UserCircleIcon,
+    PoweroffIcon,
+    SettingIcon,
+    ChevronDownIcon,
+  },
+  props: {
+    theme: String,
+    layout: {
+      type: String,
+      default: 'top',
+    },
+    showLogo: {
+      type: Boolean,
+      default: true,
+    },
+    menu: {
+      type: Array,
+    },
+    isFixed: {
+      type: Boolean,
+      default: false,
+    },
+    isCompact: {
+      type: Boolean,
+      default: false,
+    },
+    maxLevel: {
+      type: Number,
+      default: 3,
+    },
+  },
+  data() {
+    return {
+      prefix,
+      visibleNotice: false,
+      isSearchFocus: false,
+    };
+  },
+  computed: {
+    active() {
+      if (!this.$route.path) {
+        return '';
+      }
+      return this.$route.path
+        .split('/')
+        .filter((item, index) => index <= this.maxLevel && index > 0)
+        .map((item) => `/${item}`)
+        .join('');
+    },
+    showMenu() {
+      return !(this.layout === 'mix' && this.showLogo === 'side');
+    },
+    layoutCls() {
+      return [`${this.prefix}-header-layout`];
+    },
+    menuCls() {
+      return [
+        {
+          [`${this.prefix}-header-menu`]: !this.isFixed,
+          [`${this.prefix}-header-menu-fixed`]: this.isFixed,
+          [`${this.prefix}-header-menu-fixed-side`]: this.layout === 'side' && this.isFixed,
+          [`${this.prefix}-header-menu-fixed-side-compact`]: this.layout === 'side' && this.isFixed && this.isCompact,
+        },
+      ];
+    },
+  },
+  methods: {
+    toggleSettingPanel() {
+      this.$store.commit('setting/toggleSettingPanel', true);
+    },
+    handleLogout() {
+      this.$router.push(`/login?redirect=${this.$router.history.current.fullPath}`);
+    },
+    changeCollapsed() {
+      this.$store.commit('setting/toggleSidebarCompact');
+    },
+    handleNav(url) {
+      this.$router.push(url);
+    },
+    navToGitHub() {
+      window.open('https://github.com/Tencent/tdesign-vue-starter');
+    },
+    navToHelper() {
+      window.open('http://tdesign.tencent.com/starter/docs/get-started');
+    },
+  },
+});
+</script>
+<style lang="less">
+@import '@/style/variables.less';
+
+.header-menu {
+  flex: 1 1 1;
+  display: inline-flex;
+}
+
+.operations-container {
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+
+  .t-popup__reference {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .t-button {
+    margin: 0 8px;
+
+    &.header-user-btn {
+      margin: 0;
+    }
+  }
+
+  .t-icon {
+    font-size: 20px;
+
+    &.general {
+      margin-right: 16px;
+    }
+  }
+}
+
+.header-operate-left {
+  display: flex;
+  margin-left: 20px;
+  align-items: normal;
+  line-height: 0;
+
+  .collapsed-icon {
+    font-size: 20px;
+  }
+}
+
+.header-logo-container {
+  width: 184px;
+  height: 26px;
+  display: flex;
+  margin-left: 24px;
+  color: var(--td-text-color-primary);
+
+  .t-logo {
+    width: 100%;
+    height: 100%;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.header-user-account {
+  display: inline-flex;
+  align-items: center;
+  color: var(--td-text-color-primary);
+
+  .t-icon {
+    margin-left: 4px;
+    font-size: 16px;
+  }
+}
+
+.t-head-menu__inner {
+  border-bottom: 1px solid var(--td-border-level-1-color);
+}
+
+.t-menu--light {
+  .header-user-account {
+    color: var(--td-text-color-primary);
+  }
+}
+
+.t-menu--dark {
+  .t-head-menu__inner {
+    border-bottom: 1px solid var(--td-gray-color-10);
+  }
+
+  .header-user-account {
+    color: rgba(255, 255, 255, 0.55);
+  }
+
+  .t-button {
+    --ripple-color: var(--td-gray-color-10) !important;
+
+    &:hover {
+      background: var(--td-gray-color-12) !important;
+    }
+  }
+}
+
+.operations-dropdown-container-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  .t-icon {
+    margin-right: 8px;
+  }
+
+  .t-dropdown__item {
+    .t-dropdown__item__content {
+      display: flex;
+      justify-content: center;
+    }
+
+    .t-dropdown__item__content__text {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+    }
+  }
+
+  .t-dropdown__item {
+    width: 100%;
+    margin-bottom: 0px;
+  }
+
+  &:last-child {
+    .t-dropdown__item {
+      margin-bottom: 8px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,168 @@
+<template>
+  <t-layout :class="[`${prefix}-layout`]">
+    <t-tabs
+      v-if="isUseTabsRouter"
+      theme="card"
+      :class="`${prefix}-layout-tabs-nav`"
+      :value="$route.path"
+      @change="handleChangeCurrentTab"
+      :style="{ position: 'sticky', top: 0, width: '100%' }"
+    >
+      <t-tab-panel
+        v-for="(route, idx) in tabRouterList"
+        :value="route.path"
+        :key="`${route.path}_${idx}`"
+        :removable="!route.isHome"
+        @remove="() => handleRemove(route.path, idx)"
+      >
+        <template #label>
+          <t-dropdown
+            trigger="context-menu"
+            :minColumnWidth="128"
+            :popupProps="{
+              overlayClassName: 'route-tabs-dropdown',
+              onVisibleChange: (visible, ctx) => handleTabMenuClick(visible, ctx, route.path),
+              visible: activeTabPath === route.path,
+            }"
+          >
+            <template v-if="!route.isHome">
+              {{ route.title }}
+            </template>
+            <home-icon v-else />
+            <template #dropdown>
+              <t-dropdown-menu>
+                <t-dropdown-item @click="() => handleRefresh(route.path, idx)">
+                  <refresh-icon />
+                  刷新
+                </t-dropdown-item>
+                <t-dropdown-item v-if="idx > 0" @click="() => handleCloseAhead(route.path, idx)">
+                  <arrow-left-icon />
+                  关闭左侧
+                </t-dropdown-item>
+                <t-dropdown-item
+                  v-if="idx < tabRouterList.length - 1"
+                  @click="() => handleCloseBehind(route.path, idx)"
+                >
+                  <arrow-right-icon />
+                  关闭右侧
+                </t-dropdown-item>
+                <t-dropdown-item @click="() => handleCloseOther(route.path, idx)">
+                  <close-circle-icon />
+                  关闭其它
+                </t-dropdown-item>
+              </t-dropdown-menu>
+            </template>
+          </t-dropdown>
+        </template>
+      </t-tab-panel>
+    </t-tabs>
+    <t-content :class="`${prefix}-content-layout`">
+      <layout-breadcrumb v-if="setting.showBreadcrumb" />
+      <common-content />
+    </t-content>
+    <t-footer v-if="showFooter" :class="`${prefix}-footer-layout`">
+      <layout-footer />
+    </t-footer>
+  </t-layout>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+import { RefreshIcon, ArrowLeftIcon, ArrowRightIcon, HomeIcon, CloseCircleIcon } from 'tdesign-icons-vue';
+
+import CommonContent from './Content.vue';
+import LayoutBreadcrumb from './Breadcrumb.vue';
+import LayoutFooter from './Footer.vue';
+
+import { prefix } from '@/config/global';
+import { SettingType } from '@/interface';
+
+export default Vue.extend({
+  name: 'LayoutContent',
+  components: {
+    CommonContent,
+    LayoutFooter,
+    LayoutBreadcrumb,
+    RefreshIcon,
+    ArrowLeftIcon,
+    ArrowRightIcon,
+    HomeIcon,
+    CloseCircleIcon,
+  },
+  data() {
+    return {
+      prefix,
+      activeTabPath: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      showFooter: 'setting/showFooter',
+      mode: 'setting/mode',
+      isUseTabsRouter: 'setting/isUseTabsRouter',
+      menuRouters: 'permission/routers',
+      tabRouterList: 'tabRouter/tabRouterList',
+    }),
+    setting(): SettingType {
+      return this.$store.state.setting;
+    },
+  },
+  methods: {
+    handleRemove(path: string, routeIdx: number) {
+      const nextRouter = this.tabRouterList[routeIdx + 1] || this.tabRouterList[routeIdx - 1];
+
+      this.$store.commit('tabRouter/subtractCurrentTabRouter', { path, routeIdx });
+      if (path === this.$router.history?.current?.path) {
+        this.$router.push(nextRouter.path);
+      }
+    },
+    handleChangeCurrentTab(path: string) {
+      this.$router.push(path);
+    },
+    handleRefresh(currentPath: string, routeIdx: number) {
+      this.$store.commit('tabRouter/toggleTabRouterAlive', routeIdx);
+      this.$nextTick(() => {
+        this.$store.commit('tabRouter/toggleTabRouterAlive', routeIdx);
+        this.$router.replace({ path: currentPath });
+      });
+      this.activeTabPath = null;
+    },
+    handleCloseAhead(path: string, routeIdx: number) {
+      this.$store.commit('tabRouter/subtractTabRouterAhead', { path, routeIdx });
+      this.handleOperationEffect('ahead', routeIdx);
+    },
+    handleCloseBehind(path: string, routeIdx: number) {
+      this.$store.commit('tabRouter/subtractTabRouterBehind', { path, routeIdx });
+      this.handleOperationEffect('behind', routeIdx);
+    },
+    handleCloseOther(path: string, routeIdx: number) {
+      this.$store.commit('tabRouter/subtractTabRouterOther', { path, routeIdx });
+      this.handleOperationEffect('other', routeIdx);
+    },
+    handleOperationEffect(type: 'other' | 'ahead' | 'behind', routeIndex: number) {
+      const currentPath = this.$router.history?.current?.path;
+      const tabRouters = this.tabRouterList;
+      const currentIdx = tabRouters.findIndex((i: { path: string }) => i.path === currentPath);
+      // 存在三种情况需要刷新当前路由
+      // 点击非当前路由的关闭其他、点击非当前路由的关闭左侧且当前路由小于触发路由、点击非当前路由的关闭右侧且当前路由大于触发路由
+      const needRefreshRouter =
+        (type === 'other' && currentIdx !== routeIndex) ||
+        (type === 'ahead' && currentIdx < routeIndex) ||
+        (type === 'behind' && currentIdx === -1);
+      if (needRefreshRouter) {
+        const nextRouteIdx = type === 'behind' ? tabRouters.length - 1 : 1;
+        const nextRouter = this.tabRouterList[nextRouteIdx];
+
+        this.$router.push(nextRouter.path);
+      }
+
+      this.activeTabPath = null;
+    },
+    handleTabMenuClick(visible: boolean, ctx, path: string) {
+      if (ctx?.trigger === 'document') this.activeTabPath = null;
+      if (visible) this.activeTabPath = path;
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,52 @@
+<template>
+  <common-header
+    v-if="showHeader"
+    :showLogo="showHeaderLogo"
+    :theme="mode"
+    :layout="setting.layout"
+    :isFixed="setting.isHeaderFixed"
+    :menu="headerMenu"
+    :isCompact="setting.isSidebarCompact"
+    :maxLevel="setting.splitMenu ? 1 : 3"
+  />
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+import CommonHeader from './Header.vue';
+
+import { SettingType } from '@/interface';
+
+export default Vue.extend({
+  name: 'LayoutHeader',
+  components: {
+    CommonHeader,
+  },
+  computed: {
+    ...mapGetters({
+      showHeader: 'setting/showHeader',
+      showHeaderLogo: 'setting/showHeaderLogo',
+      mode: 'setting/mode',
+      menuRouters: 'permission/routers',
+    }),
+    setting(): SettingType {
+      return this.$store.state.setting;
+    },
+    headerMenu() {
+      const { layout, splitMenu } = this.$store.state.setting;
+      const { menuRouters } = this;
+      if (layout === 'mix') {
+        if (splitMenu) {
+          return menuRouters.map((menu) => ({
+            ...menu,
+            children: [],
+          }));
+        }
+        return [];
+      }
+      return menuRouters;
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+  <side-nav
+    v-if="showSidebar"
+    :showLogo="showSidebarLogo"
+    :layout="setting.layout"
+    :isFixed="setting.isSidebarFixed"
+    :menu="sideMenu"
+    :theme="mode"
+    :isCompact="setting.isSidebarCompact"
+    :maxLevel="setting.splitMenu ? 2 : 3"
+  />
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+import SideNav from './SideNav.vue';
+
+import { SettingType } from '@/interface';
+
+export default Vue.extend({
+  name: 'LayoutSidebar',
+  components: {
+    SideNav,
+  },
+  computed: {
+    ...mapGetters({
+      showSidebar: 'setting/showSidebar',
+      showSidebarLogo: 'setting/showSidebarLogo',
+      mode: 'setting/mode',
+      menuRouters: 'permission/routers',
+    }),
+    setting(): SettingType {
+      return this.$store.state.setting;
+    },
+    sideMenu() {
+      const { layout, splitMenu } = this.$store.state.setting;
+      let { menuRouters } = this;
+      if (layout === 'mix' && splitMenu) {
+        menuRouters.forEach((menu) => {
+          if (this.$route.path.indexOf(menu.path) === 0) {
+            menuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` }));
+          }
+        });
+      }
+      return menuRouters;
+    },
+  },
+});
+</script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <template v-for="item in list">
+      <template v-if="!item.children || !item.children.length || item.meta?.single">
+        <t-menu-item
+          v-if="getHref(item)"
+          :key="`href${item.path}`"
+          :href="getHref(item)?.[0]"
+          :name="item.path"
+          :value="item.meta?.single ? item.redirect : item.path"
+        >
+          <template #icon>
+            <t-icon v-if="typeof item.icon === 'string' && item.icon" :name="item.icon" />
+            <renderFnIcon :item="item" />
+          </template>
+          {{ item.title }}
+        </t-menu-item>
+        <t-menu-item
+          v-else
+          :key="`${item.path}`"
+          :to="item.path"
+          :name="item.path"
+          :value="item.meta?.single ? item.redirect : item.path"
+        >
+          <template #icon>
+            <t-icon v-if="typeof item.icon === 'string' && item.icon" :name="item.icon" />
+            <renderFnIcon :item="item" />
+          </template>
+          {{ item.title }}
+        </t-menu-item>
+      </template>
+      <t-submenu v-else :name="item.path" :value="item.path" :title="item.title" :key="item.path">
+        <template #icon>
+          <t-icon v-if="typeof item.icon === 'string' && item.icon" :name="item.icon" />
+          <renderFnIcon :item="item" />
+        </template>
+        <menu-content v-if="item.children" :nav-data="item.children" />
+      </t-submenu>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+import { prefix } from '@/config/global';
+import { MenuRoute } from '@/interface';
+
+const getMenuList = (list: MenuRoute[], basePath?: string): MenuRoute[] => {
+  if (!list) {
+    return [];
+  }
+
+  return list
+    .map((item) => {
+      const path = basePath && !item.path.includes(basePath) ? `${basePath}/${item.path}` : item.path;
+      return {
+        path,
+        title: item.meta?.title,
+        icon: item.meta?.icon || '',
+        children: getMenuList(item.children, path),
+        meta: item.meta,
+        redirect: item.redirect,
+      };
+    })
+    .filter((item) => item.meta && item.meta.hidden !== true);
+};
+
+Vue.component('renderFnIcon', {
+  props: {
+    item: {
+      type: Object as PropType<MenuRoute>,
+      required: true,
+    },
+  },
+  // 遵循最小改动的原则，这里仍然使用 createElement
+  render(createElement) {
+    if (typeof this.item.icon === 'function' || (this.item.icon && typeof this.item.icon.render === 'function')) {
+      return createElement(this.item.icon, {
+        class: 't-icon',
+      });
+    }
+    return undefined;
+  },
+});
+
+export default Vue.extend({
+  name: 'MenuContent',
+  props: {
+    navData: Array,
+  },
+  data() {
+    return {
+      prefix,
+    };
+  },
+  computed: {
+    list(): Array<MenuRoute> {
+      return getMenuList(this.navData);
+    },
+  },
+  methods: {
+    getHref(item: MenuRoute) {
+      return item.path.match(/(http|https):\/\/([\w.]+\/?)\S*/);
+    },
+  },
+});
+</script>