image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-12-23 02:56:35 +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';

51
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;
} }
} }
@ -275,7 +264,7 @@
position: absolute; position: absolute;
top: 32px; top: 32px;
right: 32px; right: 32px;
> span { > span {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -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>

34
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 {
@ -134,7 +132,7 @@
.t-form__controls { .t-form__controls {
width: 100%; width: 100%;
button { button {
flex-shrink: 0; flex-shrink: 0;
width: 102px; width: 102px;
@ -142,7 +140,6 @@
margin-left: 11px; margin-left: 11px;
} }
} }
} }
} }
@ -151,14 +148,13 @@
.tip { .tip {
font-size: 14px; font-size: 14px;
color: @brand-color-8; color: @brand-color-8;
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
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/font-family.less
View File

@ -3,4 +3,4 @@
src: url('data:application/font-woff;charset=utf-8;base64,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') format('woff'); src: url('data:application/font-woff;charset=utf-8;base64,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') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }

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

31
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 {
@ -32,7 +30,7 @@
z-index: 0; z-index: 0;
} }
} }
&-no-fixed { &-no-fixed {
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -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
}

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

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

@ -1,14 +1,14 @@
: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;
} }

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

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

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

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

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