Skip to content

Commit 521139b

Browse files
shanhexishanhexi
committed
style: Connections样式
1 parent d5f603a commit 521139b

15 files changed

Lines changed: 99 additions & 168 deletions

File tree

‎chat2db-client/src/blocks/Setting/index.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
.f-icon-button();
55
}
66

7+
.settingIcon{
8+
color: var(--custom-color-icon);
9+
}
10+
711
.backgroundList {
812
display: flex;
913
margin: 0px 0px 20px -7px;

‎chat2db-client/src/blocks/Setting/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export default memo<IProps>(function Setting({ className, text }) {
125125
{text ? (
126126
<span className={styles.setText}>{text}</span>
127127
) : (
128-
<Iconfont code="&#xe795;"></Iconfont>
128+
<Iconfont className={styles.settingIcon} code="&#xe795;"></Iconfont>
129129
)}
130130
</div>
131131
<Modal

‎chat2db-client/src/components/Iconfont/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import styles from './index.less';
66
// 只有本地开发时使用cdn，发布线上时要下载iconfont到 /assets/font
77
if (__ENV === 'local') {
88
let container = `
9-
@font-face {
10-
font-family: 'iconfont'; /* Project id 3633546 */
11-
src: url('//at.alicdn.com/t/c/font_3633546_bobs6jadiya.woff2?t=1687102726036') format('woff2'),
12-
url('//at.alicdn.com/t/c/font_3633546_bobs6jadiya.woff?t=1687102726036') format('woff'),
13-
url('//at.alicdn.com/t/c/font_3633546_bobs6jadiya.ttf?t=1687102726036') format('truetype');
14-
}
9+
@font-face {
10+
font-family: 'iconfont'; /* Project id 3633546 */
11+
src: url('//at.alicdn.com/t/c/font_3633546_0ip5jtwa6g6.woff2?t=1687700061581') format('woff2'),
12+
url('//at.alicdn.com/t/c/font_3633546_0ip5jtwa6g6.woff?t=1687700061581') format('woff'),
13+
url('//at.alicdn.com/t/c/font_3633546_0ip5jtwa6g6.ttf?t=1687700061581') format('truetype');
14+
}
1515
`
1616
let style = document.createElement("style");
1717
style.type = "text/css";

‎chat2db-client/src/pages/main/connections/index.less‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,14 @@
3939
color: var(--color-primary) !important;
4040
}
4141

42-
.menuItems {
42+
.menuItem {
4343
display: flex;
4444
justify-content: space-between;
4545
align-items: center;
4646
cursor: pointer;
47-
padding: 12px;
47+
padding: 10px;
4848
height: 20px;
49+
border-radius: 8px;
4950

5051
&:hover {
5152
background-color: var(--color-hover-bg);
@@ -57,6 +58,8 @@
5758

5859
.menuItemActive {
5960
color: var(--color-primary);
61+
// background-color: var(--color-primary-bg);
62+
background-color: var(--color-hover-bg);
6063
}
6164

6265
:global {
@@ -86,26 +89,27 @@
8689
display: flex;
8790
justify-content: space-between;
8891
flex-wrap: wrap;
89-
width: 500px;
92+
max-width: 800px;
9093
}
9194

9295
.databaseItem {
9396
flex-grow: 1;
9497
border-radius: 4px;
98+
height: 50px;
99+
width: 210px;
100+
margin: 10px 20px;
95101
padding: 0px 16px;
96-
box-sizing: border-box;
97102
border-radius: 8px;
98103
overflow: hidden;
99-
height: 50px;
100-
width: 246px;
104+
box-sizing: border-box;
105+
border: 1px solid var(--color-border);
101106

102107
.databaseItemMain {
103108
display: flex;
104109
justify-content: space-between;
105110
align-items: center;
106111
height: 50px;
107-
transform: scale(1);
108-
transition: transform 0.5s;
112+
border-radius: 8px;
109113
}
110114

111115
.databaseItemLeft {
@@ -123,17 +127,12 @@
123127

124128
&:hover {
125129
background-color: var(--color-bg-medium);
126-
cursor: pointer;
127130
color: var(--color-primary);
128-
129-
.databaseItemMain {
130-
transform: scale(1.02);
131-
transition: transform 0.5s;
132-
}
131+
border: 1px solid var(--color-primary);
132+
cursor: pointer;
133133

134134
.databaseItemRight {
135135
display: block;
136-
137136
i {
138137
color: var(--color-primary);
139138
}
@@ -146,19 +145,21 @@
146145
align-items: center;
147146
height: 28px;
148147
width: 28px;
149-
background-image: linear-gradient(138deg, #858dff 0%, #597ef7 100%);
150148
border-radius: 8px;
151149
margin-right: 16px;
152150

153151
i {
154152
font-size: 16px;
155-
color: #fff;
156153
}
157154
}
158155
}
159156

160157
.databaseItemSpacer {
161-
width: 246px;
158+
flex-grow: 1;
159+
width: 210px;
160+
margin: 10px 20px;
161+
padding: 0px 16px;
162+
box-sizing: border-box;
162163
}
163164

164165
.createConnections {

‎chat2db-client/src/pages/main/connections/index.tsx‎

Lines changed: 28 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Fragment, memo, useEffect, useMemo, useRef, useState } from 'react';
2-
import cs from 'classnames';
2+
import classnames from 'classnames';
33
import i18n from '@/i18n';
44
import CreateConnection from '@/components/CreateConnection';
55
import Iconfont from '@/components/Iconfont';
@@ -80,15 +80,15 @@ function Connections(props: IProps) {
8080
return (
8181
<div
8282
key={key}
83-
className={styles.menuItems}
83+
className={classnames(styles.menuItem, {
84+
[styles.menuItemActive]: curConnection.id === key,
85+
})}
8486
onClick={() => {
8587
setCurConnection(menu.meta);
8688
}}
8789
>
8890
<div
89-
className={cs(styles.menuItemsTitle, {
90-
[styles.menuItemActive]: curConnection.id === key,
91-
})}
91+
className={classnames(styles.menuItemsTitle)}
9292
>
9393
{icon}
9494
<span style={{ marginLeft: '8px' }}>{label}</span>
@@ -135,15 +135,6 @@ function Connections(props: IProps) {
135135
<div ref={volatileRef} className={styles.layoutLeft}>
136136
<div className={styles.pageTitle}>{i18n('connection.title.connections')}</div>
137137
{renderMenu()}
138-
{/* <div className={styles.menuBox}>
139-
<Menu
140-
className={styles.menu}
141-
mode="inline"
142-
items={menuItems}
143-
onClick={changeMenu}
144-
selectedKeys={[checkedConnection!]}
145-
></Menu>
146-
</div> */}
147138
<Button
148139
type="primary"
149140
className={styles.addConnection}
@@ -157,7 +148,7 @@ function Connections(props: IProps) {
157148
<div className={styles.layoutRight}>
158149
{curConnection && Object.keys(curConnection).length ? (
159150
<div
160-
className={cs(styles.createConnections, {
151+
className={classnames(styles.createConnections, {
161152
[styles.showCreateConnections]: Object.keys(curConnection).length,
162153
})}
163154
>
@@ -170,28 +161,31 @@ function Connections(props: IProps) {
170161
/>
171162
</div>
172163
) : (
173-
<div className={styles.dataBaseList}>
174-
{databaseTypeList.map((t) => {
175-
return (
176-
<div key={t.code} className={styles.databaseItem} onClick={handleCreateConnections.bind(null, t)}>
177-
<div className={styles.databaseItemMain}>
178-
<div className={styles.databaseItemLeft}>
179-
<div className={styles.logoBox}>
180-
<Iconfont code={t.icon} />
164+
<div className={styles.dataBaseList}>
165+
{databaseTypeList.map((t) => {
166+
return (
167+
<div key={t.code} className={styles.databaseItem} onClick={handleCreateConnections.bind(null, t)}>
168+
<div className={styles.databaseItemMain}>
169+
<div className={styles.databaseItemLeft}>
170+
<div className={styles.logoBox}>
171+
<Iconfont code={t.icon} />
172+
</div>
173+
{t.name}
174+
</div>
175+
<div className={styles.databaseItemRight}>
176+
<Iconfont code="&#xe631;" />
181177
</div>
182-
{t.name}
183-
</div>
184-
<div className={styles.databaseItemRight}>
185-
<Iconfont code="&#xe631;" />
186178
</div>
187179
</div>
188-
</div>
189-
);
190-
})}
191-
<div className={styles.databaseItemSpacer}></div>
192-
<div className={styles.databaseItemSpacer}></div>
193-
</div>
194-
)}
180+
);
181+
})}
182+
{
183+
Array.from({ length: 20 }).map(t => {
184+
return <div className={styles.databaseItemSpacer}></div>
185+
})
186+
}
187+
</div>
188+
)}
195189
</div>
196190
</div>
197191
);

‎chat2db-client/src/pages/main/index.less‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
flex-direction: column;
1515
justify-content: space-between;
1616
align-items: center;
17-
width: 80px;
17+
width: 68px;
1818
background-color: var(--color-bg-elevated);
1919
user-select: none;
2020
overflow: hidden;
@@ -35,41 +35,52 @@
3535
flex-shrink: 0;
3636
border-radius: 50%;
3737
overflow: hidden;
38-
margin: 30px auto 10px;
38+
margin: 40px auto 20px;
3939
cursor: pointer;
4040
}
4141

4242
.navList {
4343
flex: 1;
44-
width: 100px;
45-
padding: 0px 20px;
46-
box-sizing: border-box;
44+
width: 100%;
45+
display: flex;
46+
flex-direction: column;
47+
align-items: center;
48+
4749
li {
4850
display: flex;
49-
flex-direction: column;
51+
justify-content: center;
52+
align-items: center;
5053
align-items: center;
5154
margin-bottom: 10px;
55+
width: 40px;
56+
height: 40px;
57+
border-radius: 8px;
5258
font-size: 12px;
53-
padding: 5px;
54-
border-radius: 3px;
5559
color: var(--color-text);
5660
cursor: pointer;
5761

5862
.icon {
59-
font-size: 28px;
63+
font-size: 20px;
64+
color: var(--custom-color-icon);
6065
}
6166

6267
&:last-of-type {
6368
margin-bottom: 0px;
6469
}
6570

6671
&:hover {
67-
background: var(--color-bg-hover);
72+
.icon{
73+
color: var(--color-primary);
74+
}
75+
background-color: var(--color-primary-bg-hover);
6876
}
6977
}
7078

7179
.activeNav {
72-
color: var(--color-primary);
80+
.icon{
81+
color: var(--color-primary);
82+
}
83+
background-color: var(--color-primary-bg-hover);
7384
}
7485
}
7586

‎chat2db-client/src/pages/main/index.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,20 @@ import { INavItem } from '@/typings/main';
1818
const navConfig: INavItem[] = [
1919
{
2020
key: 'workspace',
21-
icon: '\ue614',
21+
icon: '\ue616',
22+
iconFontSize: 16,
2223
component: <Workspace />,
2324
},
2425
{
2526
key: 'dashboard',
26-
icon: '\ue612',
27+
icon: '\ue616',
28+
iconFontSize: 16,
2729
component: <Dashboard />,
2830
},
2931
{
3032
key: 'connections',
31-
icon: '\ue744',
33+
icon: '\ue622',
34+
iconFontSize: 20,
3235
component: <DataSource />,
3336
},
3437
// {
@@ -55,7 +58,7 @@ function MainPage() {
5558
return (
5659
<div className={styles.page}>
5760
<div className={styles.layoutLeft}>
58-
<BrandLogo onClick={() => { }} className={styles.brandLogo} />
61+
<BrandLogo size={40} onClick={() => { }} className={styles.brandLogo} />
5962
<ul className={styles.navList}>
6063
{navConfig.map((item, index) => {
6164
return (
@@ -66,7 +69,7 @@ function MainPage() {
6669
})}
6770
onClick={switchingNav.bind(null, item)}
6871
>
69-
<Iconfont className={styles.icon} code={item.icon} />
72+
<Iconfont style={{ fontSize: `${item.iconFontSize}px` }} className={styles.icon} code={item.icon} />
7073
{/* <div>{item.title}</div> */}
7174
</li>
7275
);

‎chat2db-client/src/styles/global.less‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
// @import '../theme/dark.less';
2-
// @import '../theme/light.less';
3-
// @import '../theme/primaryColor.less';
1+
@import '../theme/custom/dark.less';
2+
@import '../theme/custom/light.less';
43

54
html,
65
body {

0 commit comments

Comments
 (0)