congmao-cli 1.0.0

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

@@ -0,0 +1,221 @@
+<template>
+  <t-popup
+    expand-animation
+    placement="bottom-right"
+    trigger="click"
+    :visible="isNoticeVisible"
+    @visible-change="onPopupVisibleChange"
+  >
+    <template #content>
+      <div class="header-msg">
+        <div class="header-msg-top">
+          <p>通知</p>
+          <t-button v-if="unreadMsg.length > 0" class="clear-btn" variant="text" theme="primary" @click="setRead('all')"
+            >清空</t-button
+          >
+        </div>
+        <t-list v-if="unreadMsg.length > 0" class="narrow-scrollbar" :split="true">
+          <t-list-item v-for="(item, index) in unreadMsg" :key="index">
+            <div>
+              <p class="msg-content">{{ item.content }}</p>
+              <p class="msg-type">{{ item.type }}</p>
+            </div>
+            <p class="msg-time">{{ item.date }}</p>
+            <template #action>
+              <t-button size="small" variant="outline" @click="setRead('radio', item)"> 设为已读 </t-button>
+            </template>
+          </t-list-item>
+        </t-list>
+
+        <div v-else class="empty-list">
+          <img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空" />
+          <p>暂无通知</p>
+        </div>
+        <div class="header-msg-bottom">
+          <t-button
+            v-if="unreadMsg.length > 0"
+            class="header-msg-bottom-link"
+            variant="text"
+            theme="primary"
+            @click="goDetail"
+            >查看全部</t-button
+          >
+        </div>
+      </div>
+    </template>
+    <t-badge :count="unreadMsg.length" :offset="[15, 6]">
+      <t-button theme="default" shape="square" variant="text" @click="isNoticeVisible = true">
+        <mail-icon />
+      </t-button>
+    </t-badge>
+  </t-popup>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapState, mapGetters } from 'vuex';
+import { MailIcon } from 'tdesign-icons-vue';
+
+import { NotificationItem } from '@/interface';
+
+export default Vue.extend({
+  components: {
+    MailIcon,
+  },
+  data() {
+    return {
+      isNoticeVisible: false,
+    };
+  },
+  computed: {
+    ...mapState('notification', ['msgData']),
+    ...mapGetters('notification', ['unreadMsg']),
+  },
+  methods: {
+    onPopupVisibleChange(visible: boolean, context) {
+      if (context.trigger === 'trigger-element-click') {
+        this.isNoticeVisible = true;
+        return;
+      }
+      this.isNoticeVisible = visible;
+    },
+    goDetail() {
+      this.$router.push('/detail/secondary');
+      this.isNoticeVisible = false;
+    },
+    setRead(type: string, item?: NotificationItem) {
+      const changeMsg = this.msgData;
+      if (type === 'all') {
+        changeMsg.forEach((e) => {
+          e.status = false;
+        });
+      } else {
+        changeMsg.forEach((e) => {
+          if (e.id === item.id) {
+            e.status = false;
+          }
+        });
+      }
+      this.$store.commit('notification/setMsgData', changeMsg);
+    },
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.header-msg {
+  width: 400px;
+  height: 500px;
+
+  .empty-list {
+    height: calc(100% - 104px);
+    text-align: center;
+    padding-top: 135px;
+    font-size: 14px;
+    color: var(--td-text-color-secondary);
+
+    img {
+      width: 63px;
+    }
+
+    p {
+      margin-top: 30px;
+    }
+  }
+
+  &-top {
+    position: relative;
+    height: 56px;
+    font-size: 16px;
+    color: var(--td-text-color-primary);
+    text-align: center;
+    line-height: 56px;
+    border-bottom: 1px solid var(--td-component-border);
+
+    .clear-btn {
+      position: absolute;
+      top: 12px;
+      right: 24px;
+    }
+  }
+
+  &-bottom {
+    height: 48px;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    &-link {
+      text-decoration: none;
+      font-size: 14px;
+      color: var(--td-brand-color);
+      line-height: 48px;
+      cursor: pointer;
+    }
+  }
+
+  .t-list {
+    height: calc(100% - 104px);
+  }
+
+  .t-list-item {
+    overflow: hidden;
+    width: 100%;
+    padding: 16px 24px;
+    border-radius: var(--td-radius-default);
+    font-size: 14px;
+    color: var(--td-text-color-primary);
+    line-height: 22px;
+    cursor: pointer;
+
+    &:hover {
+      transition: background 0.2s ease;
+      background: var(--td-bg-color-container-hover);
+
+      .msg-content {
+        color: var(--td-brand-color);
+      }
+
+      .t-list-item__action {
+        button {
+          bottom: 16px;
+          opacity: 1;
+        }
+      }
+
+      .msg-time {
+        bottom: -6px;
+        opacity: 0;
+      }
+    }
+
+    .msg-content {
+      margin-bottom: 16px;
+    }
+
+    .msg-type {
+      color: var(--td-text-color-secondary);
+    }
+
+    .t-list-item__action {
+      button {
+        opacity: 0;
+        position: absolute;
+        right: 24px;
+        bottom: -6px;
+      }
+    }
+
+    .msg-time {
+      transition: all 0.2s ease;
+      opacity: 1;
+      position: absolute;
+      right: 24px;
+      bottom: 16px;
+      color: var(--td-text-color-secondary);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,134 @@
+<template>
+  <div v-if="layout === 'side'" class="header-menu-search">
+    <t-input
+      :class="{ 'hover-active': isSearchFocus }"
+      placeholder="请输入搜索内容"
+      @blur="changeSearchFocus(false)"
+      @focus="changeSearchFocus(true)"
+    >
+      <template #prefix-icon>
+        <search-icon class="icon" size="16" />
+      </template>
+    </t-input>
+  </div>
+
+  <div v-else class="header-menu-search-left">
+    <t-button
+      :class="{ 'search-icon-hide': isSearchFocus }"
+      theme="default"
+      shape="square"
+      variant="text"
+      @click="changeSearchFocus(true)"
+    >
+      <search-icon />
+    </t-button>
+    <t-input
+      ref="inputRef"
+      v-model="searchData"
+      :class="['header-search', { 'width-zero': !isSearchFocus }]"
+      placeholder="输入要搜索内容"
+      :autofocus="isSearchFocus"
+      @blur="changeSearchFocus(false)"
+    >
+      <template #prefix-icon>
+        <search-icon size="16" />
+      </template>
+    </t-input>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import { SearchIcon } from 'tdesign-icons-vue';
+
+export default Vue.extend({
+  components: {
+    SearchIcon,
+  },
+  props: {
+    layout: {
+      type: String as PropType<string>,
+    },
+  },
+  data() {
+    return {
+      isSearchFocus: false,
+      searchData: '',
+    };
+  },
+  methods: {
+    changeSearchFocus(value: boolean) {
+      if (!value) {
+        this.searchData = '';
+      }
+      this.isSearchFocus = value;
+    },
+  },
+});
+</script>
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.header-menu-search {
+  display: flex;
+  margin-left: 16px;
+
+  .hover-active {
+    .t-input {
+      background: var(--td-bg-color-secondarycontainer);
+    }
+
+    /deep/ .t-icon {
+      color: var(--td-brand-color);
+    }
+  }
+
+  /deep/ .t-icon {
+    font-size: 20px;
+    color: var(--td-text-color-primary);
+  }
+
+  .t-input {
+    border: none;
+    outline: none;
+    box-shadow: none;
+    transition: background @anim-duration-base linear;
+
+    &:hover {
+      background: var(--td-bg-color-secondarycontainer);
+    }
+  }
+}
+
+.header-search {
+  width: 200px;
+  transition: width @anim-duration-base @anim-time-fn-easing;
+
+  .t-input {
+    border: 0;
+    padding-left: 40px;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  &.width-zero {
+    width: 0;
+    opacity: 0;
+  }
+}
+
+.t-button {
+  transition: opacity @anim-duration-base @anim-time-fn-easing;
+}
+
+.search-icon-hide {
+  opacity: 0;
+}
+
+.header-menu-search-left {
+  display: flex;
+  align-items: center;
+}
+</style>

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

@@ -0,0 +1,150 @@
+<template>
+  <div :class="sideNavCls">
+    <t-menu
+      width="232px"
+      :class="menuCls"
+      :theme="theme"
+      :value="active"
+      :collapsed="collapsed"
+      :defaultExpanded="defaultExpanded"
+    >
+      <template #logo>
+        <span v-if="showLogo" :class="`${prefix}-side-nav-logo-wrapper`" @click="() => handleNav('/dashboard/base')">
+          <component :is="getLogo" :class="`${prefix}-side-nav-logo-${collapsed ? 't' : 'tdesign'}-logo`" />
+        </span>
+      </template>
+      <menu-content :navData="menu" />
+      <template #operations>
+        <span class="version-container"> {{ !collapsed ? `TDesign Starter ${pgk.version}` : pgk.version }} </span>
+      </template>
+    </t-menu>
+    <div :class="`${prefix}-side-nav-placeholder${collapsed ? '-hidden' : ''}`"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { prefix } from '@/config/global';
+import { ClassName } from '@/interface';
+import Logo from '@/assets/assets-t-logo.svg';
+import LogoFull from '@/assets/assets-logo-full.svg';
+
+import MenuContent from './MenuContent.vue';
+import pgk from '../../../package.json';
+
+const MIN_POINT = 992 - 1;
+
+export default Vue.extend({
+  name: 'sideNav',
+  components: {
+    MenuContent,
+  },
+  props: {
+    menu: Array,
+    showLogo: {
+      type: Boolean,
+      default: true,
+    },
+    isFixed: {
+      type: Boolean,
+      default: true,
+    },
+    layout: String,
+    headerHeight: {
+      type: String,
+      default: '56px',
+    },
+    theme: {
+      type: String,
+      default: 'light',
+    },
+    isCompact: {
+      type: Boolean,
+      default: false,
+    },
+    maxLevel: {
+      type: Number,
+      default: 3,
+    },
+  },
+  data() {
+    return {
+      prefix,
+      pgk,
+    };
+  },
+  computed: {
+    defaultExpanded() {
+      const path = this.active;
+      const parentPath = path.substring(0, path.lastIndexOf('/'));
+      if (parentPath.lastIndexOf('/')) {
+        const threeLevel = parentPath.substring(0, parentPath.lastIndexOf('/'));
+        return threeLevel === '' ? [] : [threeLevel, parentPath];
+      }
+      return parentPath === '' ? [] : [parentPath];
+    },
+    iconName(): string {
+      return this.$store.state.setting.isSidebarCompact ? 'menu-fold' : 'menu-unfold';
+    },
+    collapsed(): boolean {
+      return this.$store.state.setting.isSidebarCompact;
+    },
+    sideNavCls(): Array<ClassName> {
+      return [
+        `${this.prefix}-sidebar-layout`,
+        {
+          [`${this.prefix}-sidebar-compact`]: this.isCompact,
+        },
+      ];
+    },
+    menuCls(): Array<ClassName> {
+      return [
+        `${this.prefix}-side-nav`,
+        {
+          [`${this.prefix}-side-nav-no-logo`]: !this.showLogo,
+          [`${this.prefix}-side-nav-no-fixed`]: !this.isFixed,
+          [`${this.prefix}-side-nav-mix-fixed`]: this.layout === 'mix' && this.isFixed,
+        },
+      ];
+    },
+    layoutCls(): Array<ClassName> {
+      return [`${this.prefix}-side-nav-${this.layout}`, `${this.prefix}-sidebar-layout`];
+    },
+    active(): string {
+      if (!this.$route.path) {
+        return '';
+      }
+      return this.$route.path
+        .split('/')
+        .filter((_item: string, index: number) => index <= this.maxLevel && index > 0)
+        .map((item: string) => `/${item}`)
+        .join('');
+    },
+    getLogo() {
+      if (this.collapsed) {
+        return Logo;
+      }
+      return LogoFull;
+    },
+  },
+  mounted() {
+    this.autoCollapsed();
+
+    window.onresize = () => {
+      this.autoCollapsed();
+    };
+  },
+  methods: {
+    changeCollapsed(): void {
+      this.$store.commit('setting/toggleSidebarCompact');
+    },
+    autoCollapsed(): void {
+      const isCompact = window.innerWidth <= MIN_POINT;
+      this.$store.commit('setting/showSidebarCompact', isCompact);
+    },
+    handleNav(url: string) {
+      this.$router.push(url);
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <template v-if="setting.layout === 'side'">
+      <t-layout key="side">
+        <t-aside><layout-sidebar /></t-aside>
+        <t-layout>
+          <t-header><layout-header /></t-header>
+          <t-content><layout-content /></t-content>
+        </t-layout>
+      </t-layout>
+    </template>
+    <template v-else-if="setting.layout === 'top'">
+      <t-layout key="top">
+        <t-header> <layout-header /></t-header>
+        <t-content><layout-content /></t-content>
+      </t-layout>
+    </template>
+    <template v-else>
+      <t-layout key="mix">
+        <t-header><layout-header /></t-header>
+        <t-layout>
+          <t-aside><layout-sidebar /></t-aside>
+          <t-content><layout-content /></t-content>
+        </t-layout>
+      </t-layout>
+    </template>
+    <setting />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+
+import LayoutHeader from './components/LayoutHeader.vue';
+import LayoutContent from './components/LayoutContent.vue';
+import LayoutSidebar from './components/LayoutSidebar.vue';
+import Setting from './setting.vue';
+
+import { prefix } from '@/config/global';
+import { SettingType } from '@/interface';
+
+import '@/style/layout.less';
+
+const name = `${prefix}-base-layout`;
+
+export default Vue.extend({
+  name,
+  components: {
+    LayoutHeader,
+    LayoutContent,
+    LayoutSidebar,
+    Setting,
+  },
+  computed: {
+    ...mapGetters({
+      tabRouterList: 'tabRouter/tabRouterList',
+    }),
+    setting(): SettingType {
+      return this.$store.state.setting;
+    },
+  },
+  watch: {
+    $route(newRoute) {
+      // 监听路由变化往多标签新增
+      const {
+        path,
+        meta: { title },
+        name,
+      } = newRoute;
+      this.$store.commit('tabRouter/appendTabRouterList', { path, title, name, isAlive: true });
+    },
+  },
+  // 如果不需要持久化标签页可以注释掉created和destroyed的内容
+  created() {
+    window.addEventListener('beforeunload', this.setTabRouterListCache);
+  },
+  destroyed() {
+    window.removeEventListener('beforeunload', this.setTabRouterListCache);
+  },
+  mounted() {
+    const {
+      path,
+      meta: { title },
+      name,
+    } = this.$route;
+
+    if (localStorage.getItem('tabRouterList')) this.getTabRouterListCache();
+    this.$store.commit('tabRouter/appendTabRouterList', { path, title, name, isAlive: true });
+  },
+  methods: {
+    getTabRouterListCache() {
+      this.$store.commit('tabRouter/initTabRouterList', JSON.parse(localStorage.getItem('tabRouterList')));
+    },
+    setTabRouterListCache() {
+      localStorage.setItem('tabRouterList', JSON.stringify(this.tabRouterList));
+    },
+  },
+});
+</script>