congmao-cli 1.0.0

package/src/template/Vue2/src/pages/login/components/components-login.vue

@@ -0,0 +1,154 @@
+<template>
+  <t-form
+    ref="form"
+    :class="['item-container', `login-${type}`]"
+    :data="formData"
+    :rules="FORM_RULES"
+    label-width="0"
+    @submit="onSubmit"
+  >
+    <template v-if="type == 'password'">
+      <t-form-item name="account">
+        <t-input v-model="formData.account" size="large" placeholder="请输入账号：admin">
+          <template #prefix-icon>
+            <user-icon />
+          </template>
+        </t-input>
+      </t-form-item>
+
+      <t-form-item name="password">
+        <t-input
+          v-model="formData.password"
+          size="large"
+          :type="showPsw ? 'text' : 'password'"
+          clearable
+          key="password"
+          placeholder="请输入登录密码：admin"
+        >
+          <template #prefix-icon>
+            <lock-on-icon />
+          </template>
+          <template #suffix-icon>
+            <browse-icon v-if="showPsw" @click="showPsw = !showPsw" key="browse" />
+            <browse-off-icon v-else @click="showPsw = !showPsw" key="browse-off" />
+          </template>
+        </t-input>
+      </t-form-item>
+
+      <div class="check-container remember-pwd">
+        <t-checkbox>记住账号</t-checkbox>
+        <span class="tip">忘记账号？</span>
+      </div>
+    </template>
+
+    <!-- 扫码登陆 -->
+    <template v-else-if="type == 'qrcode'">
+      <div class="tip-container">
+        <span class="tip">请使用微信扫一扫登录</span>
+        <span class="refresh"
+          >刷新
+          <refresh-icon color="#0052D9" />
+        </span>
+      </div>
+      <qrcode-vue value="" :size="192" level="H" />
+    </template>
+
+    <!-- 手机号登陆 -->
+    <template v-else>
+      <t-form-item name="phone">
+        <t-input v-model="formData.phone" size="large" placeholder="请输入您的手机号">
+          <template #prefix-icon>
+            <user-icon />
+          </template>
+        </t-input>
+      </t-form-item>
+
+      <t-form-item class="verification-code" name="verifyCode">
+        <t-input v-model="formData.verifyCode" size="large" placeholder="请输入验证码" key="verifyCode" />
+        <t-button variant="outline" :disabled="countDown > 0" @click="handleCounter">
+          {{ countDown == 0 ? '发送验证码' : `${countDown}秒后可重发` }}
+        </t-button>
+      </t-form-item>
+    </template>
+
+    <t-form-item v-if="type !== 'qrcode'" class="btn-container">
+      <t-button block size="large" type="submit"> 登录 </t-button>
+    </t-form-item>
+
+    <div class="switch-container">
+      <span v-if="type !== 'password'" class="tip" @click="switchType('password')">使用账号密码登录</span>
+      <span v-if="type !== 'qrcode'" class="tip" @click="switchType('qrcode')">使用微信扫码登录</span>
+      <span v-if="type !== 'phone'" class="tip" @click="switchType('phone')">使用手机号登录</span>
+    </div>
+  </t-form>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+import QrcodeVue from 'qrcode.vue';
+import { UserIcon, LockOnIcon, BrowseOffIcon, BrowseIcon, RefreshIcon } from 'tdesign-icons-vue';
+
+const INITIAL_DATA = {
+  phone: '',
+  account: 'admin',
+  password: 'admin',
+  verifyCode: '',
+  checked: false,
+};
+
+const FORM_RULES = {
+  phone: [{ required: true, message: '手机号必填', type: 'error' }],
+  account: [{ required: true, message: '账号必填', type: 'error' }],
+  password: [{ required: true, message: '密码必填', type: 'error' }],
+  verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
+};
+/** 高级详情 */
+export default Vue.extend({
+  name: 'Login',
+  components: {
+    QrcodeVue,
+    UserIcon,
+    LockOnIcon,
+    BrowseOffIcon,
+    BrowseIcon,
+    RefreshIcon,
+  },
+  data() {
+    return {
+      FORM_RULES,
+      type: 'password',
+      formData: { ...INITIAL_DATA },
+      showPsw: false,
+      countDown: 0,
+      intervalTimer: null,
+    };
+  },
+  beforeDestroy() {
+    clearInterval(this.intervalTimer);
+  },
+  methods: {
+    switchType(val) {
+      this.type = val;
+      this.$refs.form.reset();
+    },
+    async onSubmit({ validateResult }) {
+      if (validateResult === true) {
+        await this.$store.dispatch('user/login', this.formData);
+
+        this.$message.success('登录成功');
+        this.$router.replace('/').catch(() => '');
+      }
+    },
+    handleCounter() {
+      this.countDown = 60;
+      this.intervalTimer = setInterval(() => {
+        if (this.countDown > 0) {
+          this.countDown -= 1;
+        } else {
+          clearInterval(this.intervalTimer);
+          this.countDown = 0;
+        }
+      }, 1000);
+    },
+  },
+});
+</script>

package/src/template/Vue2/src/pages/login/components/components-register.vue

@@ -0,0 +1,144 @@
+<template>
+  <t-form
+    ref="form"
+    :class="['item-container', `register-${type}`]"
+    :data="formData"
+    :rules="FORM_RULES"
+    label-width="0"
+    @submit="onSubmit"
+  >
+    <template v-if="type == 'phone'">
+      <t-form-item name="phone">
+        <t-input v-model="formData.phone" :maxlength="11" size="large" placeholder="请输入您的手机号">
+          <template #prefix-icon>
+            <user-icon />
+          </template>
+        </t-input>
+      </t-form-item>
+    </template>
+
+    <template v-if="type == 'email'">
+      <t-form-item name="email">
+        <t-input v-model="formData.email" type="text" size="large" placeholder="请输入您的邮箱">
+          <template #prefix-icon>
+            <mail-icon />
+          </template>
+        </t-input>
+      </t-form-item>
+    </template>
+
+    <t-form-item name="password">
+      <t-input
+        v-model="formData.password"
+        size="large"
+        :type="showPsw ? 'text' : 'password'"
+        clearable
+        placeholder="请输入登录密码"
+      >
+        <template #prefix-icon>
+          <lock-on-icon />
+        </template>
+        <template #suffix-icon>
+          <browse-icon v-if="showPsw" key="browse" @click="showPsw = !showPsw" />
+          <browse-off-icon v-else key="browse-off" @click="showPsw = !showPsw" />
+        </template>
+      </t-input>
+    </t-form-item>
+
+    <template v-if="type == 'phone'">
+      <t-form-item class="verification-code" name="verifyCode">
+        <t-input v-model="formData.verifyCode" size="large" placeholder="请输入验证码" />
+        <t-button variant="outline" :disabled="countDown > 0" @click="handleCounter">
+          {{ countDown == 0 ? '发送验证码' : `${countDown}秒后可重发` }}
+        </t-button>
+      </t-form-item>
+    </template>
+
+    <t-form-item class="check-container" name="checked">
+      <t-checkbox v-model="formData.checked">我已阅读并同意 </t-checkbox> <span>TDesign服务协议</span> 和
+      <span>TDesign 隐私声明</span>
+    </t-form-item>
+
+    <t-form-item>
+      <t-button block size="large" type="submit"> 注册 </t-button>
+    </t-form-item>
+
+    <div class="switch-container">
+      <span class="tip" @click="switchType(type == 'phone' ? 'email' : 'phone')">{{
+        type == 'phone' ? '使用邮箱注册' : '使用手机号注册'
+      }}</span>
+    </div>
+  </t-form>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+import { UserIcon, MailIcon, BrowseIcon, BrowseOffIcon, LockOnIcon } from 'tdesign-icons-vue';
+
+const INITIAL_DATA = {
+  phone: '',
+  email: '',
+  password: '',
+  verifyCode: '',
+  checked: false,
+};
+
+const FORM_RULES = {
+  phone: [{ required: true, message: '手机号必填', type: 'error' }],
+  email: [{ required: true, email: true, message: '邮箱必填', type: 'error' }],
+  password: [{ required: true, message: '密码必填', type: 'error' }],
+  verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
+};
+
+/** 高级详情 */
+export default Vue.extend({
+  name: 'Register',
+  components: {
+    UserIcon,
+    MailIcon,
+    BrowseIcon,
+    BrowseOffIcon,
+    LockOnIcon,
+  },
+  data() {
+    return {
+      FORM_RULES,
+      type: 'phone',
+      emailOptions: [],
+      formData: { ...INITIAL_DATA },
+      showPsw: false,
+      countDown: 0,
+      intervalTimer: null,
+    };
+  },
+  beforeDestroy() {
+    clearInterval(this.intervalTimer);
+  },
+  methods: {
+    onSubmit({ validateResult }: { validateResult: boolean }) {
+      if (validateResult === true) {
+        if (!this.formData.checked) {
+          this.$message.error('请同意TDesign服务协议和TDesign 隐私声明');
+          return;
+        }
+        this.$message.success('注册成功');
+        this.$emit('registerSuccess');
+      }
+    },
+    switchType(val: 'email' | 'phone') {
+      this.$refs.form.reset();
+      this.type = val;
+    },
+    handleCounter() {
+      this.countDown = 60;
+      this.intervalTimer = setInterval(() => {
+        if (this.countDown > 0) {
+          this.countDown -= 1;
+        } else {
+          clearInterval(this.intervalTimer);
+          this.countDown = 0;
+        }
+      }, 1000);
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,202 @@
+@import '@/style/variables.less';
+
+.light {
+  &.login-wrapper {
+    background-color: white;
+    background-image: url('@/assets/assets-login-bg-white.png');
+  }
+}
+
+.dark {
+  &.login-wrapper {
+    background-color: var(--td-bg-color-page);
+    background-image: url('@/assets/assets-login-bg-black.png');
+  }
+}
+
+.login-wrapper {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-size: cover;
+  background-position: 100%;
+  position: relative;
+}
+
+.login-container {
+  position: absolute;
+  top: 22%;
+  left: 5%;
+  min-height: 500px;
+  line-height: 22px;
+}
+
+.title-container {
+  .title {
+    font-size: 36px;
+    line-height: 44px;
+    color: var(--td-text-color-primary);
+    margin-top: 4px;
+
+    &.margin-no {
+      margin-top: 0;
+    }
+  }
+
+  .sub-title {
+    margin-top: 16px;
+
+    .tip {
+      display: inline-block;
+      margin-right: 8px;
+      font-size: 14px;
+
+      &:first-child {
+        color: var(--td-text-color-secondary);
+      }
+
+      &:last-child {
+        color: var(--td-text-color-primary);
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.item-container {
+  width: 400px;
+  margin-top: 48px;
+
+  &.login-qrcode {
+    .tip-container {
+      width: 192px;
+      margin-bottom: 16px;
+      font-size: 14px;
+      display: flex;
+      justify-content: space-between;
+
+      .tip {
+        color: var(--td-text-color-primary);
+      }
+
+      .refresh {
+        display: flex;
+        align-items: center;
+        color: var(--td-brand-color);
+
+        .t-icon {
+          font-size: 14px;
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .bottom-container {
+      margin-top: 32px;
+    }
+  }
+
+  &.login-phone {
+    .bottom-container {
+      margin-top: 66px;
+    }
+  }
+
+  .check-container {
+    display: flex;
+    align-items: center;
+
+    &.remember-pwd {
+      margin-bottom: 16px;
+      justify-content: space-between;
+    }
+
+    .t-checkbox__label {
+      color: var(--td-text-color-secondary);
+    }
+
+    span {
+      color: var(--td-brand-color);
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .verification-code {
+    display: flex;
+    align-items: center;
+
+    .t-form__controls {
+      width: 100%;
+
+      button {
+        flex-shrink: 0;
+        width: 102px;
+        height: 40px;
+        margin-left: 11px;
+      }
+    }
+  }
+
+  .btn-container {
+    margin-top: 48px;
+  }
+}
+
+.switch-container {
+  margin-top: 24px;
+
+  .tip {
+    font-size: 14px;
+    color: var(--td-brand-color);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    margin-right: 14px;
+
+    &:last-child {
+      &::after {
+        display: none;
+      }
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      width: 1px;
+      height: 12px;
+      background: var(--td-gray-color-3);
+      margin-left: 14px;
+    }
+  }
+}
+
+.check-container {
+  font-size: 14px;
+  color: var(--td-text-color-secondary);
+
+  .tip {
+    float: right;
+    font-size: 14px;
+    color: var(--td-brand-color);
+  }
+}
+
+.copyright {
+  font-size: 14px;
+  position: absolute;
+  left: 5%;
+  bottom: var(--td-comp-size-xxxl);
+  color: var(--td-text-color-secondary);
+}
+
+@media screen and (max-height: 700px) {
+  .copyright {
+    display: none;
+  }
+}

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

@@ -0,0 +1,53 @@
+<template>
+  <div class="login-wrapper">
+    <login-header />
+
+    <div class="login-container">
+      <div class="title-container">
+        <h1 class="title margin-no">登录到</h1>
+        <h1 class="title">TDesign Starter</h1>
+        <div class="sub-title">
+          <p class="tip">{{ type == 'register' ? '已有账号?' : '没有账号吗?' }}</p>
+          <p class="tip" @click="switchType(type == 'register' ? 'login' : 'register')">
+            {{ type == 'register' ? '登录' : '注册新账号' }}
+          </p>
+        </div>
+      </div>
+
+      <login v-if="type === 'login'" />
+      <register v-else @register-success="switchType('login')" />
+      <tdesign-setting />
+    </div>
+
+    <footer class="copyright">Copyright @ 2021-2022 Tencent. All Rights Reserved</footer>
+  </div>
+</template>
+<script>
+import Login from './components/components-login.vue';
+import Register from './components/components-register.vue';
+import LoginHeader from './components/components-header.vue';
+import TdesignSetting from '@/layouts/setting.vue';
+
+export default {
+  name: 'LoginIndex',
+  components: {
+    LoginHeader,
+    Login,
+    Register,
+    TdesignSetting,
+  },
+  data() {
+    return {
+      type: 'login',
+    };
+  },
+  methods: {
+    switchType(val) {
+      this.type = val;
+    },
+  },
+};
+</script>
+<style lang="less">
+@import url('./index.less');
+</style>

package/src/template/Vue2/src/pages/nest-menu/Index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <div>三级菜单页面</div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'NestMenu',
+};
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <result title="403 Forbidden" tip="抱歉，您无权限访问此页面，企业微信联系创建者xiaolaoshi">
+    <t-button @click="() => $router.push('/')">返回首页</t-button>
+  </result>
+</template>
+
+<script>
+import result from '@/components/result/index.vue';
+
+export default {
+  name: 'Result403',
+  components: { result },
+};
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <result title="404 Not Found" tip="抱歉，您访问的页面不存在" type="404">
+    <t-button @click="() => $router.push('/')">返回首页</t-button>
+  </result>
+</template>
+
+<script>
+import result from '@/components/result/index.vue';
+
+export default {
+  name: 'Result404',
+  components: { result },
+};
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <result title="500 Internal Server Error" type="500" tip="抱歉，服务器出错啦">
+    <t-button @click="() => $router.push('/')">返回首页</t-button>
+  </result>
+</template>
+
+<script>
+import result from '@/components/result/index.vue';
+
+export default {
+  name: 'Result500',
+  components: { result },
+};
+</script>

package/src/template/Vue2/src/pages/result/browser-incompatible/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <result title="浏览器版本低" tip="抱歉，您正在使用的浏览器版本过低，无法打开当前网页。" type="ie">
+    <div class="result-slot-container">
+      <t-button class="result-button" @click="() => $router.push('/')">返回首页</t-button>
+      <div class="recommend-container">
+        <div>TDesign Starter 推荐以下主流浏览器</div>
+        <div class="recommend-browser">
+          <div>
+            <thumbnail class="browser-icon" url="https://tdesign.gtimg.com/starter/result-page/chorme.png" />
+            <div>Chrome</div>
+          </div>
+          <div>
+            <thumbnail class="browser-icon" url="https://tdesign.gtimg.com/starter/result-page/qq-browser.png" />
+            <div>QQ Browser</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </result>
+</template>
+
+<script>
+import Result from '@/components/result/index.vue';
+import Thumbnail from '@/components/thumbnail/index.vue';
+
+export default {
+  name: 'ResultBrowserIncompatible',
+  components: { Result, Thumbnail },
+};
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.result-slot-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--td-text-color-secondary);
+}
+
+.recommend-container {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  top: 175px;
+  padding: 24px 48px;
+  width: 640px;
+  background: var(--td-bg-color-container);
+  box-shadow: 0px 1px 2px var(--td-shadow-1);
+  border-radius: 3px;
+}
+
+.recommend-browser {
+  display: flex;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: 70px;
+  }
+
+  > div + div {
+    margin-left: 40px;
+  }
+}
+
+.browser-icon {
+  width: 36.67px;
+  height: 36.67px;
+}
+</style>