Fix/layout/UI fix (#11)

* 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

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/>

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>

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": {

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;
} }

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;

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';

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';

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;
} }
} }

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>

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;
}
}

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' ? '没有账号吗?' : '已有账号?' }}

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">

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">

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">

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>

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>

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">

View File

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

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
}

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;
} }

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;

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;
} }

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;
} }

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;
} }

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;
} }

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;
} }

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); // 色彩-功能-失败

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,
}, },
}; };