image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-11-10 13:01:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' of github.com:Tencent/tdesign-vue-next-starter into main

Browse Source
This commit is contained in:
Uyarn 2023-02-14 10:56:49 +08:00
commit 848c0e6db9
9 changed files with 68 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -17,7 +17,7 @@
English | [简体中文](./README-zh_CN.md)
### Introduction
TDesign Vue Next Starter is a TDesign-based developed with `Vue3`, `Vite2`, `Pinia`, `TypeScript`. It can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects.
TDesign Vue Next Starter is a TDesign-based developed with `Vue 3`, `Vite 3+`, `Pinia`, `TypeScript`. It can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects.
<p>
<a href="http://tdesign.tencent.com/starter/vue-next/">Live Preview</a>

2
src/layouts/components/Footer.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="prefix + '-footer'">Copyright @ 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</div>
<div :class="prefix + '-footer'">Copyright © 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</div>
</template>
<script setup lang="ts">

2
src/layouts/components/MenuContent.vue
View File

@ -53,7 +53,7 @@ const menuIcon = (item: ListItemType) => {
};
const getMenuList = (list: MenuRoute[], basePath?: string): ListItemType[] => {
if (!list) {
if (!list || list.length === 0) {
return [];
}
// 如果meta中有orderNo则按照从小到大排序

60
src/layouts/components/Notice.vue
View File

@ -3,12 +3,12 @@
<template #content>
<div class="header-msg">
<div class="header-msg-top">
<p>通知</p>
<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 v-if="unreadMsg.length > 0" class="narrow-scrollbar" :split="false">
<t-list-item v-for="(item, index) in unreadMsg" :key="index">
<div>
<p class="msg-content">{{ item.content }}</p>
@ -30,7 +30,8 @@
v-if="unreadMsg.length > 0"
class="header-msg-bottom-link"
variant="text"
theme="primary"
theme="default"
block
@click="goDetail"
>查看全部</t-button
>
@ -79,72 +80,71 @@ const goDetail = () => {
<style lang="less" scoped>
.header-msg {
width: 400px;
height: 500px;
// height: 440px;
margin: calc(0px - var(--td-comp-paddingTB-xs)) calc(0px - var(--td-comp-paddingLR-s));
.empty-list {
height: calc(100% - 104px);
height: calc(100% - 120px);
text-align: center;
padding-top: 135px;
font-size: 14px;
font: var(--td-font-body-medium);
color: var(--td-text-color-secondary);
img {
width: 63px;
width: var(--td-comp-size-xxxxl);
}
p {
margin-top: 30px;
margin-top: var(--td-comp-margin-xxl);
}
}
&-top {
position: relative;
height: 56px;
font-size: 16px;
font: var(--td-font-title-medium);
color: var(--td-text-color-primary);
text-align: center;
line-height: 56px;
border-bottom: 1px solid var(--td-component-border);
text-align: left;
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl) 0;
display: flex;
align-items: center;
justify-content: space-between;
.clear-btn {
position: absolute;
top: 12px;
right: 24px;
right: calc(var(--td-comp-paddingTB-l) - var(--td-comp-paddingLR-xl));
}
}
&-bottom {
height: 48px;
align-items: center;
display: flex;
justify-content: center;
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
border-top: 1px solid var(--td-component-stroke);
&-link {
text-decoration: none;
font-size: 14px;
color: var(--td-brand-color);
line-height: 48px;
cursor: pointer;
color: var(--td-text-color-placeholder);
}
}
.t-list {
height: calc(100% - 104px);
padding: var(--td-comp-margin-s) var(--td-comp-margin-s);
}
.t-list-item {
overflow: hidden;
width: 100%;
padding: 16px 24px;
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
border-radius: var(--td-radius-default);
font-size: 14px;
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
line-height: 22px;
cursor: pointer;
transition: background-color 0.2s linear;
&:hover {
transition: background 0.2s ease;
background: var(--td-bg-color-container-hover);
background-color: var(--td-bg-color-container-hover);
.msg-content {
color: var(--td-brand-color);
@ -152,7 +152,7 @@ const goDetail = () => {
.t-list-item__action {
button {
bottom: 16px;
bottom: var(--td-comp-margin-l);
opacity: 1;
}
}
@ -164,7 +164,7 @@ const goDetail = () => {
}
.msg-content {
margin-bottom: 16px;
margin-bottom: var(--td-comp-margin-s);
}
.msg-type {
@ -175,7 +175,7 @@ const goDetail = () => {
button {
opacity: 0;
position: absolute;
right: 24px;
right: var(--td-comp-margin-xxl);
bottom: -6px;
}
}
@ -184,8 +184,8 @@ const goDetail = () => {
transition: all 0.2s ease;
opacity: 1;
position: absolute;
right: 24px;
bottom: 16px;
right: var(--td-comp-margin-xxl);
bottom: var(--td-comp-margin-l);
color: var(--td-text-color-secondary);
}
}

21
src/pages/login/components/Header.vue
View File

@ -37,33 +37,24 @@ const navToHelper = () => {
<style lang="less" scoped>
.login-header {
padding: 0 24px;
padding: 0 var(--td-comp-paddingLR-xl);
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(5px);
backdrop-filter: blur(10px);
color: var(--td-text-color-primary);
height: var(--td-comp-size-xxxl);
.logo {
width: 188px;
width: 178px;
height: var(--td-comp-size-s);
}
.operations-container {
display: flex;
align-items: center;
.t-button {
margin-left: 16px;
}
.icon {
height: 20px;
width: 20px;
padding: 6px;
box-sizing: content-box;
&:hover {
cursor: pointer;
}
margin-left: var(--td-comp-margin-l);
}
}
}

4
src/pages/login/components/Login.vue
View File

@ -45,7 +45,7 @@
<span class="tip">请使用微信扫一扫登录</span>
<span class="refresh">刷新 <t-icon name="refresh" /> </span>
</div>
<qrcode-vue value="" :size="192" level="H" />
<qrcode-vue value="" :size="160" level="H" />
</template>
<!-- 手机号登陆 -->
@ -60,7 +60,7 @@
<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="sendCode">
<t-button size="large" variant="outline" :disabled="countDown > 0" @click="sendCode">
{{ countDown == 0 ? '发送验证码' : `${countDown}秒后可重发` }}
</t-button>
</t-form-item>

55
src/pages/login/index.less
View File

@ -26,15 +26,13 @@
top: 22%;
left: 5%;
min-height: 500px;
line-height: 22px;
}
.title-container {
.title {
font-size: 36px;
line-height: 44px;
font: var(--td-font-headline-large);
color: var(--td-text-color-primary);
margin-top: 4px;
margin-top: var(--td-comp-margin-xs);
&.margin-no {
margin-top: 0;
@ -42,12 +40,12 @@
}
.sub-title {
margin-top: 16px;
margin-top: var(--td-comp-margin-xxl);
.tip {
display: inline-block;
margin-right: 8px;
font-size: 14px;
margin-right: var(--td-comp-margin-s);
font: var(--td-font-body-medium);
&:first-child {
color: var(--td-text-color-secondary);
@ -63,18 +61,18 @@
.item-container {
width: 400px;
margin-top: 48px;
margin-top: var(--td-comp-margin-xxxxl);
&.login-qrcode {
.tip-container {
width: 192px;
margin-bottom: 16px;
font-size: 14px;
margin-bottom: var(--td-comp-margin-l);
font: var(--td-font-body-medium);
display: flex;
justify-content: space-between;
align-items: flex-start;
.tip {
color: var(--td-text-color-primary);
margin-right: var(--td-comp-margin-s);
}
.refresh {
@ -83,8 +81,8 @@
color: var(--td-brand-color);
.t-icon {
font-size: 14px;
margin-left: 4px;
font-size: var(--td-comp-size-xxxs);
margin-left: var(--td-comp-margin-xs);
}
&:hover {
@ -109,14 +107,10 @@
align-items: center;
&.remember-pwd {
margin-bottom: 16px;
margin-bottom: var(--td-comp-margin-l);
justify-content: space-between;
}
:deep(.t-checkbox__label) {
color: var(--td-text-color-secondary);
}
span {
color: var(--td-brand-color);
@ -135,28 +129,27 @@
button {
flex-shrink: 0;
width: 102px;
height: 40px;
margin-left: 11px;
margin-left: var(--td-comp-margin-l);
width: 128px;
}
}
}
.btn-container {
margin-top: 48px;
margin-top: var(--td-comp-margin-xxxxl);
}
}
.switch-container {
margin-top: 24px;
margin-top: var(--td-comp-margin-xxl);
.tip {
font-size: 14px;
font: var(--td-font-body-medium);
color: var(--td-brand-color);
cursor: pointer;
display: inline-flex;
align-items: center;
margin-right: 14px;
margin-right: var(--td-comp-margin-l);
&:last-child {
&::after {
@ -169,25 +162,25 @@
display: block;
width: 1px;
height: 12px;
background: var(--td-gray-color-3);
margin-left: 14px;
background: var(--td-component-stroke);
margin-left: var(--td-comp-margin-l);
}
}
}
.check-container {
font-size: 14px;
font: var(--td-font-body-medium);
color: var(--td-text-color-secondary);
.tip {
float: right;
font-size: 14px;
font: var(--td-font-body-medium);
color: var(--td-brand-color);
}
}
.copyright {
font-size: 14px;
font: var(--td-font-body-medium);
position: absolute;
left: 5%;
bottom: 64px;

18
src/store/modules/notification.ts
View File

@ -38,24 +38,6 @@ const msgData = [
date: '2021-01-01 08:00',
quality: 'low',
},
{
id: '127',
content: '二季度生产原材料采购项目 开票成功！',
type: '票务动态',
status: true,
collected: false,
date: '2021-01-01 08:00',
quality: 'low',
},
{
id: '128',
content: '三季度生产原材料采购项目 开票成功！',
type: '票务动态',
status: true,
collected: false,
date: '2021-01-01 08:00',
quality: 'low',
},
];
type MsgDataType = typeof msgData;

7
src/style/layout.less
View File

@ -167,13 +167,13 @@
}
&-logo-t-logo {
height: 32px;
height: var(--td-comp-size-s);
width: 100%;
}
&-logo-tdesign-logo {
padding: 0 24px;
height: 32px;
padding: 0 var(--td-comp-paddingLR-xl);
height: var(--td-comp-size-s);
width: 100%;
color: var(--td-text-color-primary);
}
@ -207,7 +207,6 @@
.logo-container {
cursor: pointer;
display: inline-flex;
height: 64px;
margin-left: 24px;
}