image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-12-23 07:19:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix/layout/UI fix (#11)

Browse Source 
* fix: layout ui fix

* fix: layout ui fix

Co-authored-by: pengYYYYY <pengyue970715@gmail.com>
This commit is contained in:
PY 2021-12-02 16:42:30 +08:00 committed by GitHub
parent a5b177e8e1
commit 4e0b787829
29 changed files with 369 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
README.md
View File

@ -0,0 +1,128 @@
<p style="display:flex; justify-content: center">
[![](https://tdesign.gtimg.com/starter/brand-logo.svg)](http://tdesgin.tencent.com/starter/vue/#/dashboard/base)
</p>
<p align="center">
<a href="https://npmjs.com/package/vite"><img src="https://img.shields.io/npm/v/vite.svg" alt="npm package"></a>
<a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatility"></a>
</p>
# TDesign Starter
## 项目简介
TDesign Starter 基于 TDesign UI 组件，旨在提供项目开箱即用的、配置式的并且拥有开发体验和设计感的中后台的项目。
- 设计美观
- 基于 TDesign UI 设计规范
- 提供 Figma、 Sketch、 Adobe XD、 Axure等多种类型的设计资源
- 在开源体系上打造具有自身品牌特色且好用的产品
<br/>
- 完备路由
- 同时支持配置式路由和自定义路由
- 对于配置型路由，提供导航类组件的深度定制（“菜单 Menu”、“面包屑 Breadcrumb”），无需手动处理路由映射关系。
<br/>
- 动态布局:
- 内置“左右布局”、“上左右布局”、“上下布局”等中后台常用布局，
- 页面内容基于 24 栅格布局设计，内置“常规型”和“紧凑型”两种间距模式
<br/>
- 极速HRM:
- 采用 `Vite` 构建
- 开发环境下体验浏览器 esmodule bundless, 达到极速更新，无需等待漫长的 bundle 过程
<br/>
- 开发规范:
- 统一规范会减少沟通成本，提高开发和维护的体验；
- 提交规范采用 `Angular commit 规范`
- 同时推荐采用 `vscode` 开发
<br/>
## 项目脚本
```
// 安装依赖
npm install
// 启动项目
npm run start
// 项目构建 - 体验环境
npm run build:test
// 项目构建
npm run build
// 项目预览
npm run preview
// 项目lint
npm run lint
// 修复lint
npm run lint:fix
```
<br/>
## 路由和菜单
菜单（侧边栏和面包屑）由路由配置自动生成，根据路由变化可自动匹配，开发者无需手动处理这些逻辑。
可在<a href="./src/config/routes.js">src/config/routes.js</a>文件中修改。
菜单和路由的映射如下：
```
{
path: '/dashboard',
icon: 'chart-pie',
title: '仪表板',
component: '../layouts/default.vue',
children: [
{
title: '概览仪表盘',
path: 'base',
component: '../pages/demo.vue',
children: [ {
title: '概览仪表盘',
path: 'base',
component: '../pages/demo.vue',
}]
}
]
}
```
路由使用 `vue-router`
<br/>
## 布局
网站布局支持“空布局”， “侧边栏导航布局”， “侧边栏布局加头部导航”，“头部导航”四种；布局文件地址在<a href="./src/layouts">src/layouts</a>
更多定制化布局，推荐使用 TDesign UI layout
- ```<t-layout>```
- ```<t-header>```
- ```<t-footer>```
- ```<t-aside>```
- ```<t-content>```
<br/>
## 提交规范
整齐美观的提交规范，沟通维护更加省力 [Angular Git Commit Guidelines](https://zj-git-guide.readthedocs.io/zh_CN/latest/message/Angular%E6%8F%90%E4%BA%A4%E4%BF%A1%E6%81%AF%E8%A7%84%E8%8C%83/)
<br/>
## 兼容性
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari |
| --------- | --------- | --------- | --------- |
| Edge >=16 | Firefox >=60| Chrome >=61| Safari >=11
<br/>

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TDesign Vue Next Starter</title> <title>TDesign Starter</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

10
package.json
View File

@ -6,7 +6,7 @@
"start": "vite --open --mode development", "start": "vite --open --mode development",
"build:test": "vite build --mode test", "build:test": "vite build --mode test",
"build": "vue-tsc --noEmit && vite build", "build": "vue-tsc --noEmit && vite build",
"serve": "vite preview", "preview": "vite preview",
"lint": "eslint --ext .vue,.js,.jsx,.ts,.tsx ./ --max-warnings 0", "lint": "eslint --ext .vue,.js,.jsx,.ts,.tsx ./ --max-warnings 0",
"lint:fix": "eslint --ext .vue,.js,jsx,.ts,.tsx ./ --max-warnings 0 --fix", "lint:fix": "eslint --ext .vue,.js,jsx,.ts,.tsx ./ --max-warnings 0 --fix",
"stylelint": "stylelint src/**/*.{html,vue,sass,less}", "stylelint": "stylelint src/**/*.{html,vue,sass,less}",
@ -45,19 +45,19 @@
"husky": "^7.0.4", "husky": "^7.0.4",
"less": "^4.1.1", "less": "^4.1.1",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"postcss-less": "^5.0.0",
"prettier": "^2.4.1", "prettier": "^2.4.1",
"stylelint": "^14.1.0", "stylelint": "^14.1.0",
"stylelint-config-airbnb": "^0.0.0", "stylelint-config-standard": "^24.0.0",
"stylelint-order": "^4.1.0", "stylelint-order": "^4.1.0",
"stylelint-scss": "^3.20.0", "stylelint-scss": "^4.0.0",
"typescript": "^4.4.3", "typescript": "^4.4.3",
"vite": "^2.4.4", "vite": "^2.4.4",
"vite-plugin-mock": "^2.9.6", "vite-plugin-mock": "^2.9.6",
"vite-plugin-svg-sprite-component": "^1.0.10", "vite-plugin-svg-sprite-component": "^1.0.10",
"vite-svg-loader": "^3.1.0", "vite-svg-loader": "^3.1.0",
"vue-clipboard3": "^1.0.1", "vue-clipboard3": "^1.0.1",
"vue-tsc": "^0.2.2", "vue-tsc": "^0.2.2"
"vuex-router-sync": "^5.0.0"
}, },
"config": { "config": {
"commitizen": { "commitizen": {

12
src/components/card/index.vue
View File

@ -103,10 +103,6 @@ export default defineComponent({
} }
} }
&.main-color {
background: @brand-color;
}
&-title { &-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -131,11 +127,17 @@ export default defineComponent({
margin: @spacer 0; margin: @spacer 0;
} }
} }
&-text-small {
display: inline-block;
width: 100%;
}
} }
&-describe { &-describe {
font-size: 14px; font-size: 14px;
color: @bg-color-container; color: @brand-color;
color: @text-color-primary;
line-height: 22px; line-height: 22px;
} }

2
src/components/result/index.vue
View File

@ -73,7 +73,7 @@ export default defineComponent({
} }
&-tip { &-tip {
margin: 16px 0 8px; margin: 8px 0 32px;
font-size: @font-size-base; font-size: @font-size-base;
color: @text-color-secondary; color: @text-color-secondary;
line-height: 22px; line-height: 22px;

2
src/config/global.ts
View File

@ -1,4 +1,4 @@
export const PREFIX = 'tdesign-pro'; export const PREFIX = 'tdesign-starter';
export const THEME = 'light'; export const THEME = 'light';
// customize(自定义登录，外网域名，统一重定向到登录页面) // customize(自定义登录，外网域名，统一重定向到登录页面)
// export const authenticationMethod = 'smartProxy'; // export const authenticationMethod = 'smartProxy';

2
src/main.ts
View File

@ -1,5 +1,5 @@
import { createApp } from 'vue'; import { createApp } from 'vue';
import TDesign from 'tdesign-vue-next/esm'; import TDesign from 'tdesign-vue-next';
import VueClipboard from 'vue3-clipboard'; import VueClipboard from 'vue3-clipboard';
import App from './App.vue'; import App from './App.vue';

47
src/pages/dashboard/base/index.less
View File

@ -1,8 +1,5 @@
@import '@/style/index'; @import '@/style/index';
@media (max-width: @screen-md-max) {
}
.t-tabs__content { .t-tabs__content {
padding-top: @spacer-3; padding-top: @spacer-3;
} }
@ -13,9 +10,7 @@
} }
.card-option { .card-option {
display: flex;
width: 100%; width: 100%;
align-items: center !important;
justify-content: right !important; justify-content: right !important;
.dashboard-chart-title-left { .dashboard-chart-title-left {
@ -23,7 +18,7 @@
justify-content: left; justify-content: left;
align-self: left; align-self: left;
width: 100%; width: 100%;
color: rgba(0, 0, 0, .4); color: rgb(0 0 0 / 40%);
font-size: 15px; font-size: 15px;
padding-left: 8px; padding-left: 8px;
} }
@ -38,9 +33,7 @@
} }
.card-container { .card-container {
.card-content { .card-content {
&-label-title { &-label-title {
color: @text-color-primary; color: @text-color-primary;
padding-bottom: 4px; padding-bottom: 4px;
@ -66,7 +59,6 @@
margin-right: 0 !important; margin-right: 0 !important;
} }
.dashboard-item { .dashboard-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -99,14 +91,12 @@
} }
} }
.dashboard-bottom { .dashboard-bottom {
margin-top: 16px; margin-top: 16px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
// 左边图表 /* 左边图表 */
.dashboard-bottom-left { .dashboard-bottom-left {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -117,7 +107,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
// 计量统计 /* 计量统计 */
.dashboard-bottom-left-top-count-chart { .dashboard-bottom-left-top-count-chart {
padding: 20px 24px; padding: 20px 24px;
background-color: white; background-color: white;
@ -126,7 +116,8 @@
min-width: 300px; min-width: 300px;
height: 320px; height: 320px;
} }
// 动态监测
/* 动态监测 */
.dashboard-bottom-left-top-monitor-chart { .dashboard-bottom-left-top-monitor-chart {
padding: 20px 24px; padding: 20px 24px;
background-color: white; background-color: white;
@ -137,7 +128,7 @@
} }
} }
// 出入库概览（） /* 出入库概览（） */
.dashboard-bottom-left-bottom { .dashboard-bottom-left-bottom {
background-color: white; background-color: white;
padding: 20px 24px; padding: 20px 24px;
@ -151,7 +142,7 @@
} }
} }
// 右边列表-实时热度趋势 /* 右边列表-实时热度趋势 */
.dashboard-bottom-right { .dashboard-bottom-right {
padding: 20px 24px; padding: 20px 24px;
background-color: white; background-color: white;
@ -164,13 +155,12 @@
padding-top: 16px; padding-top: 16px;
li { li {
.dashboard-chart-tend-item-title { .dashboard-chart-tend-item-title {
color: grey !important; color: grey !important;
} }
.dashboard-chart-tend-sep { .dashboard-chart-tend-sep {
padding: 0 0 17px 0 !important; padding: 0 0 17px !important;
} }
.dashboard-chart-tend-item-line { .dashboard-chart-tend-item-line {
@ -201,7 +191,7 @@
} }
} }
// 标题内容 /* 标题内容 */
.dashboard-chart-title { .dashboard-chart-title {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -211,13 +201,12 @@
&-describe { &-describe {
font-size: 14px !important; font-size: 14px !important;
color: rgba(0,0,0,.60) !important; color: rgb(0 0 0 / 60%) !important;
text-align: left; text-align: left;
line-height: 22px; line-height: 22px;
} }
&-container { &-container {
.t-date-picker { .t-date-picker {
width: 240px; width: 240px;
} }
@ -225,7 +214,7 @@
span { span {
font-size: 16px; font-size: 16px;
color: rgba(0,0,0,.90); color: rgb(0 0 0 / 90%);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -233,7 +222,7 @@
.dashboard-chart-title-search { .dashboard-chart-title-search {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border: 1px solid #DDDDDD; border: 1px solid #ddd;
border-radius: @border-radius; border-radius: @border-radius;
padding: 0; padding: 0;
align-items: center; align-items: center;
@ -241,7 +230,7 @@
font-weight: normal; font-weight: normal;
input { input {
border: solid 0px #ffffff !important; border: solid 0 #fff !important;
} }
} }
@ -304,11 +293,9 @@
justify-content: center; justify-content: center;
font-weight: 700; font-weight: 700;
&__top { &__top {
background: @brand-color; background: @brand-color;
} }
} }
.row-container { .row-container {
@ -322,7 +309,7 @@
.card-container.main-color { .card-container.main-color {
background: @brand-color; background: @brand-color;
color: white; color: @text-color-primary;
.card-describe { .card-describe {
color: white; color: white;
@ -333,6 +320,10 @@
} }
.dashboard-item-block { .dashboard-item-block {
color: rgba(255,255,255,.55); color: rgb(255 255 255 / 55%);
}
.dashboard-item-bottom {
color: white;
} }
} }

5
src/pages/dashboard/base/index.vue
View File

@ -109,6 +109,9 @@
<trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" /> <trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" />
</span> </span>
</template> </template>
<template #operation="slotProps">
<a class="link" @click="rehandleClickOp(slotProps)">操作</a>
</template>
</t-table> </t-table>
</card> </card>
</t-col> </t-col>
@ -312,6 +315,6 @@ export default defineComponent({
}, },
}); });
</script> </script>
<style lang="less" scoped> <style lang="less">
@import url('./index.less'); @import url('./index.less');
</style> </style>

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

@ -3,7 +3,7 @@
.login-wrapper { .login-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url(https://tdesign.gtimg.com/pro-template/login-bg-img.jpg); background-image: url('https://tdesign.gtimg.com/pro-template/login-bg-img.jpg');
background-size: cover; background-size: cover;
background-position: 50%; background-position: 50%;
position: relative; position: relative;
@ -18,10 +18,9 @@
} }
.title-container { .title-container {
.icon { .icon {
width: 290px; width: 290px;
height: 60px; height: 40px;
} }
.side-title { .side-title {
@ -35,7 +34,7 @@
.tip1 { .tip1 {
font-size: 14px; font-size: 14px;
color: rgba(0,0,0,.60); color: rgb(0 0 0 / 60%);
} }
.tip2 { .tip2 {
@ -72,7 +71,6 @@
} }
&.login-phone { &.login-phone {
.bottom-container { .bottom-container {
margin-top: 66px; margin-top: 66px;
} }
@ -113,7 +111,7 @@
.tip1 { .tip1 {
font-size: 14px; font-size: 14px;
color: rgba(0,0,0,.60); color: rgb(0 0 0 / 60%);
} }
.tip2 { .tip2 {
@ -142,7 +140,6 @@
margin-left: 11px; margin-left: 11px;
} }
} }
} }
} }
@ -158,7 +155,6 @@
margin-right: 14px; margin-right: 14px;
&:last-child { &:last-child {
&::after { &::after {
display: none; display: none;
} }
@ -177,7 +173,7 @@
.check-container { .check-container {
font-size: 14px; font-size: 14px;
color: rgba(0,0,0,.60); color: rgb(0 0 0 / 60%);
.tip { .tip {
float: right; float: right;
@ -185,19 +181,3 @@
color: @brand-color-8; color: @brand-color-8;
} }
} }
.rex-check {
font-family: PingFangSC-Regular;
font-size: 14px;
color: @text-color-placeholder;
line-height: 22px;
}
.format-correct {
color: @text-color-primary;
.t-icon {
color: @success-color-5;
}
}

2
src/pages/login/index.vue
View File

@ -2,7 +2,7 @@
<div class="login-wrapper"> <div class="login-wrapper">
<div class="login-container"> <div class="login-container">
<div class="title-container"> <div class="title-container">
<img class="icon" src="https://tdesign.gtimg.com/pro-template/logo%402x.png" /> <img class="icon" src="https://tdesign.gtimg.com/starter/logo%402x.png" />
<div class="side-title"> <div class="side-title">
<p class="tip1"> <p class="tip1">
{{ type == 'register' ? '没有账号吗?' : '已有账号?' }} {{ type == 'register' ? '没有账号吗?' : '已有账号?' }}

4
src/pages/result/403/index.vue
View File

@ -3,7 +3,9 @@
page-header="403" page-header="403"
tip="抱歉，您无权限访问此页面，企业微信联系创建者xiaolaoshi" tip="抱歉，您无权限访问此页面，企业微信联系创建者xiaolaoshi"
bg-url="https://tdesign.gtimg.com/pro-template/result-page/403.png" bg-url="https://tdesign.gtimg.com/pro-template/result-page/403.png"
/> >
<t-button @click="() => $router.push('/')">返回首页</t-button>
</result>
</template> </template>
<script lang="ts"> <script lang="ts">

4
src/pages/result/404/index.vue
View File

@ -3,7 +3,9 @@
page-header="404" page-header="404"
tip="抱歉，您访问的页面不存在" tip="抱歉，您访问的页面不存在"
bg-url="https://tdesign.gtimg.com/pro-template/result-page/404.png" bg-url="https://tdesign.gtimg.com/pro-template/result-page/404.png"
/> >
<t-button @click="() => $router.push('/')">返回首页</t-button>
</result>
</template> </template>
<script lang="ts"> <script lang="ts">

4
src/pages/result/500/index.vue
View File

@ -3,7 +3,9 @@
page-header="500" page-header="500"
tip="抱歉，服务器出错啦" tip="抱歉，服务器出错啦"
bg-url="https://tdesign.gtimg.com/pro-template/result-page/500.png" bg-url="https://tdesign.gtimg.com/pro-template/result-page/500.png"
/> >
<t-button @click="() => $router.push('/')">返回首页</t-button>
</result>
</template> </template>
<script lang="ts"> <script lang="ts">

68
src/pages/result/browser-incompatible/index.vue
View File

@ -3,15 +3,79 @@
page-header="浏览器不兼容" page-header="浏览器不兼容"
tip="抱歉，您正在使用的浏览器版本过低，无法打开当前网页" tip="抱歉，您正在使用的浏览器版本过低，无法打开当前网页"
bg-url="https://tdesign.gtimg.com/pro-template/result-page/browser-incompatible.png" bg-url="https://tdesign.gtimg.com/pro-template/result-page/browser-incompatible.png"
/> >
<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> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import Result from '@/components/result/index.vue'; import Result from '@/components/result/index.vue';
import Thumbnail from '@/components/thumbnail/index.vue';
export default defineComponent({ export default defineComponent({
name: 'ResultBrowserIncompatible', name: 'ResultBrowserIncompatible',
components: { Result }, components: { Result, Thumbnail },
}); });
</script> </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: @text-color-secondary;
}
.recommend-container {
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
top: 175px;
padding: 24px 48px;
width: 640px;
background: #ffffff;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.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>

3
src/pages/result/fail/index.vue
View File

@ -1,10 +1,11 @@
<template> <template>
<card> <card>
<div class="result-success"> <div class="result-success">
<t-icon class="result-success-icon" name="close-circle-filled" /> <t-icon class="result-success-icon" name="error-circle" />
<div class="result-success-title">项目创建失败</div> <div class="result-success-title">项目创建失败</div>
<div class="result-success-describe">企业微信联系检查创建者权限，或返回修改</div> <div class="result-success-describe">企业微信联系检查创建者权限，或返回修改</div>
<div> <div>
<t-button theme="default" @click="() => $router.push('/form/base')">返回首页</t-button>
<t-button @click="() => $router.push('/form/base')"> 返回修改 </t-button> <t-button @click="() => $router.push('/form/base')"> 返回修改 </t-button>
</div> </div>
</div> </div>

7
src/pages/result/network-error/index.vue
View File

@ -3,7 +3,12 @@
page-header="网络异常" page-header="网络异常"
tip="网络异常，请稍后再试" tip="网络异常，请稍后再试"
bg-url="https://tdesign.gtimg.com/pro-template/result-page/network-error.png" bg-url="https://tdesign.gtimg.com/pro-template/result-page/network-error.png"
/> >
<div>
<t-button theme="default" @click="() => $router.push('/')">返回首页</t-button>
<t-button @click="() => $router.push('/')">重新加载</t-button>
</div>
</result>
</template> </template>
<script lang="ts"> <script lang="ts">

2
src/style/index.less
View File

@ -41,8 +41,6 @@ h4,
h5, h5,
h6, h6,
p { p {
margin-top: 0;
margin-bottom: 0;
margin: 0; margin: 0;
} }

29
src/style/side-nav.less
View File

@ -1,9 +1,7 @@
@import './variables.less'; @import './variables.less';
@import './font-family.less'; @import './font-family.less';
.@{prefix} { .@{prefix} {
&-sidebar-layout { &-sidebar-layout {
height: 100%; height: 100%;
} }
@ -21,7 +19,7 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
transition: all .3s; transition: all 0.3s;
min-height: 100%; min-height: 100%;
&-mix { &-mix {
@ -46,6 +44,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
&:hover {
cursor: pointer;
}
} }
&-logo-t-logo { &-logo-t-logo {
@ -54,39 +55,45 @@
} }
&-logo-tdesign-logo { &-logo-tdesign-logo {
width: 112px; height: 32px;
} }
&-logo-normal { &-logo-normal {
font-family: TencentSansKoreanW7; font-family: TencentSansKoreanW7;
color: @brand-color; color: @brand-color;
font-size: @font-size-l; font-size: @font-size-l;
transition: all .3s; transition: all 0.3s;
} }
} }
&-sideNav-placeholder { &-sideNav-placeholder {
flex: 1 1 232px; flex: 1 1 232px;
min-width: 232px; min-width: 232px;
transition: all .3s; transition: all 0.3s;
&-hidden { &-hidden {
flex: 1 1 72px; flex: 1 1 72px;
min-width: 72px; min-width: 72px;
transition: all .3s; transition: all 0.3s;
} }
} }
} }
.t-menu--dark .t-menu__options:not(:empty) .t-icon-menu-unfold { .t-menu--dark .t-menu__operations .t-icon {
color: rgba(255, 255, 255, .55) color: rgba(255, 255, 255, .55);
&:hover {
cursor: pointer;
}
} }
.logo-container { .logo-container {
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
height: 64px; height: 64px;
margin-left: 24px; margin-left: 24px;
} }
.t-default-menu.t-menu--dark {
background: #232A35
}

23
src/style/theme/cyan.less
View File

@ -1,13 +1,14 @@
:root[theme-color='cyan'], :root[theme-color='cyan'],
:root[theme-color='cyan'][theme-mode='dark'] {--td-brand-color: #0594FA; :root[theme-color='cyan'][theme-mode='dark'] {
--td-brand-color-1: #D6F7FF; --td-brand-color: #0594fa;
--td-brand-color-2: #B2ECFF; --td-brand-color-1: #d6f7ff;
--td-brand-color-3: #85DAFF; --td-brand-color-2: #b2ecff;
--td-brand-color-4: #5CC5FC; --td-brand-color-3: #85daff;
--td-brand-color-5: #31ADFB; --td-brand-color-4: #5cc5fc;
--td-brand-color-6: #0594FA; --td-brand-color-5: #31adfb;
--td-brand-color-7: #007EDF; --td-brand-color-6: #0594fa;
--td-brand-color-8: #0068C0; --td-brand-color-7: #007edf;
--td-brand-color-9: #00549E; --td-brand-color-8: #0068c0;
--td-brand-color-10: #00417D; --td-brand-color-9: #00549e;
--td-brand-color-10: #00417d;
} }

16
src/style/theme/green.less
View File

@ -1,13 +1,13 @@
:root[theme-color='green'], :root[theme-color='green'],
:root[theme-color='green'][theme-mode='dark'] { :root[theme-color='green'][theme-mode='dark'] {
--td-brand-color: #00A870; --td-brand-color: #00a870;
--td-brand-color-1: #DFF7ED; --td-brand-color-1: #dff7ed;
--td-brand-color-2: #A9E8CD; --td-brand-color-2: #a9e8cd;
--td-brand-color-3: #69D5AB; --td-brand-color-3: #69d5ab;
--td-brand-color-4: #30BF8B; --td-brand-color-4: #30bf8b;
--td-brand-color-5: #00A870; --td-brand-color-5: #00a870;
--td-brand-color-6: #00935D; --td-brand-color-6: #00935d;
--td-brand-color-7: #007E4A; --td-brand-color-7: #007e4a;
--td-brand-color-8: #006937; --td-brand-color-8: #006937;
--td-brand-color-9: #005426; --td-brand-color-9: #005426;
--td-brand-color-10: #004114; --td-brand-color-10: #004114;

22
src/style/theme/orange.less
View File

@ -1,14 +1,14 @@
:root[theme-color='orange'], :root[theme-color='orange'],
:root[theme-color='orange'][theme-mode='dark'] { :root[theme-color='orange'][theme-mode='dark'] {
--td-brand-color-1: #FFEFDB; --td-brand-color-1: #ffefdb;
--td-brand-color-2: #FFD3A3; --td-brand-color-2: #ffd3a3;
--td-brand-color-3: #FFB473; --td-brand-color-3: #ffb473;
--td-brand-color-4: #FF9247; --td-brand-color-4: #ff9247;
--td-brand-color-5: #ED7B2F; --td-brand-color-5: #ed7b2f;
--td-brand-color-6: #D6621C; --td-brand-color-6: #d6621c;
--td-brand-color-7: #C24C08; --td-brand-color-7: #c24c08;
--td-brand-color-8: #A23C00; --td-brand-color-8: #a23c00;
--td-brand-color-9: #872D00; --td-brand-color-9: #872d00;
--td-brand-color-10: #691F00; --td-brand-color-10: #691f00;
--td-brand-color: #C24C08; --td-brand-color: #c24c08;
} }

22
src/style/theme/pink.less
View File

@ -1,14 +1,14 @@
:root[theme-color='pink'], :root[theme-color='pink'],
:root[theme-color='pink'][theme-mode='dark'] { :root[theme-color='pink'][theme-mode='dark'] {
--td-brand-color: #ED49B4; --td-brand-color: #ed49b4;
--td-brand-color-1: #FFE9FF; --td-brand-color-1: #ffe9ff;
--td-brand-color-2: #FFD1FC; --td-brand-color-2: #ffd1fc;
--td-brand-color-3: #FFB2F2; --td-brand-color-3: #ffb2f2;
--td-brand-color-4: #FF8FE1; --td-brand-color-4: #ff8fe1;
--td-brand-color-5: #FF66CC; --td-brand-color-5: #f6c;
--td-brand-color-6: #ED49B4; --td-brand-color-6: #ed49b4;
--td-brand-color-7: #D42C9D; --td-brand-color-7: #d42c9d;
--td-brand-color-8: #BC0088; --td-brand-color-8: #bc0088;
--td-brand-color-9: #9B006B; --td-brand-color-9: #9b006b;
--td-brand-color-10: #7B0052; --td-brand-color-10: #7b0052;
} }

18
src/style/theme/purple.less
View File

@ -1,14 +1,14 @@
:root[theme-color='purple'], :root[theme-color='purple'],
:root[theme-color='purple'][theme-mode='dark'] { :root[theme-color='purple'][theme-mode='dark'] {
--td-brand-color: #834EC2; --td-brand-color: #834ec2;
--td-brand-color-1: #F3E0FF; --td-brand-color-1: #f3e0ff;
--td-brand-color-2: #E6C4FF; --td-brand-color-2: #e6c4ff;
--td-brand-color-3: #D8ABFF; --td-brand-color-3: #d8abff;
--td-brand-color-4: #C68CFF; --td-brand-color-4: #c68cff;
--td-brand-color-5: #AE78F0; --td-brand-color-5: #ae78f0;
--td-brand-color-6: #9963D8; --td-brand-color-6: #9963d8;
--td-brand-color-7: #834EC2; --td-brand-color-7: #834ec2;
--td-brand-color-8: #6D3BAC; --td-brand-color-8: #6d3bac;
--td-brand-color-9: #572796; --td-brand-color-9: #572796;
--td-brand-color-10: #421381; --td-brand-color-10: #421381;
} }

18
src/style/theme/red.less
View File

@ -1,14 +1,14 @@
:root[theme-color='red'], :root[theme-color='red'],
:root[theme-color='red'][theme-mode='dark'] { :root[theme-color='red'][theme-mode='dark'] {
--td-brand-color: #E34D59; --td-brand-color: #e34d59;
--td-brand-color-1: #FFE9E9; --td-brand-color-1: #ffe9e9;
--td-brand-color-2: #FFCCCE; --td-brand-color-2: #ffccce;
--td-brand-color-3: #FFACAF; --td-brand-color-3: #ffacaf;
--td-brand-color-4: #FF888C; --td-brand-color-4: #ff888c;
--td-brand-color-5: #FB646D; --td-brand-color-5: #fb646d;
--td-brand-color-6: #E34D59; --td-brand-color-6: #e34d59;
--td-brand-color-7: #C93043; --td-brand-color-7: #c93043;
--td-brand-color-8: #B01531; --td-brand-color-8: #b01531;
--td-brand-color-9: #960022; --td-brand-color-9: #960022;
--td-brand-color-10: #730021; --td-brand-color-10: #730021;
} }

22
src/style/theme/yellow.less
View File

@ -1,14 +1,14 @@
:root[theme-color='yellow'], :root[theme-color='yellow'],
:root[theme-color='yellow'][theme-mode='dark'] { :root[theme-color='yellow'][theme-mode='dark'] {
--td-brand-color: #EBB105; --td-brand-color: #ebb105;
--td-brand-color-1: #FFF8B8; --td-brand-color-1: #fff8b8;
--td-brand-color-2: #FFE478; --td-brand-color-2: #ffe478;
--td-brand-color-3: #FBCA25; --td-brand-color-3: #fbca25;
--td-brand-color-4: #EBB105; --td-brand-color-4: #ebb105;
--td-brand-color-5: #D29C00; --td-brand-color-5: #d29c00;
--td-brand-color-6: #BA8700; --td-brand-color-6: #ba8700;
--td-brand-color-7: #A37200; --td-brand-color-7: #a37200;
--td-brand-color-8: #8C5F00; --td-brand-color-8: #8c5f00;
--td-brand-color-9: #754C00; --td-brand-color-9: #754c00;
--td-brand-color-10: #5E3A00; --td-brand-color-10: #5e3a00;
} }

8
src/style/variables.less
View File

@ -1,7 +1,7 @@
/** 公共前缀 */ /** 公共前缀 */
@prefix: tdesign-pro; @prefix: tdesign-starter;
// 颜色色板 /* 颜色色板 */
@brand-color-1: var(--td-brand-color-1); @brand-color-1: var(--td-brand-color-1);
@brand-color-2: var(--td-brand-color-2); @brand-color-2: var(--td-brand-color-2);
@ -62,7 +62,7 @@
@gray-color-13: var(--td-gray-color-13); @gray-color-13: var(--td-gray-color-13);
@gray-color-14: var(--td-gray-color-14); @gray-color-14: var(--td-gray-color-14);
// 文字 & 图标 颜色 /* 文字 & 图标 颜色 */
@font-white-1: var(--td-font-white-1); @font-white-1: var(--td-font-white-1);
@font-white-2: var(--td-font-white-2); @font-white-2: var(--td-font-white-2);
@font-white-3: var(--td-font-white-3); @font-white-3: var(--td-font-white-3);
@ -73,7 +73,7 @@
@font-gray-3: var(--td-font-gray-3); @font-gray-3: var(--td-font-gray-3);
@font-gray-4: var(--td-font-gray-4); @font-gray-4: var(--td-font-gray-4);
// 基础颜色 /* 基础颜色 */
@brand-color: var(--td-brand-color); // 色彩-品牌-可操作 @brand-color: var(--td-brand-color); // 色彩-品牌-可操作
@warning-color: var(--td-warning-color); // 色彩-功能-警告 @warning-color: var(--td-warning-color); // 色彩-功能-警告
@error-color: var(--td-error-color); // 色彩-功能-失败 @error-color: var(--td-error-color); // 色彩-功能-失败

11
stylelint.config.js
View File

@ -1,11 +1,14 @@
// style-lint config
module.exports = { module.exports = {
defaultSeverity: 'error', defaultSeverity: 'error',
extends: ['stylelint-config-airbnb'], extends: ['stylelint-config-standard'],
plugins: ['stylelint-scss'], plugin: ['stylelint-less'],
rules: { rules: {
'max-nesting-depth': 10, 'max-nesting-depth': 10,
'string-quotes': 'single', 'string-quotes': 'single',
'declaration-property-value-disallowed-list': { '/^border/': ['none'] }, 'selector-class-pattern': null,
'no-descending-specificity': null,
'font-family-no-missing-generic-family-keyword': null,
'font-family-name-quotes': null,
'no-invalid-double-slash-comments': null,
}, },
}; };