Skip to content

Commit d184dfb

Browse files
shanhexishanhexi
committed
feat:console 重命名
1 parent a777067 commit d184dfb

6 files changed

Lines changed: 107 additions & 25 deletions

File tree

‎chat2db-client/.vscode/settings.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
"[less]": {
1414
"editor.defaultFormatter": "esbenp.prettier-vscode"
1515
},
16+
"explorer.confirmDelete": true,
17+
"emmet.includeLanguages": {
18+
"javascript": "javascriptreact"
19+
},
1620
"git.mergeEditor": false,
1721
"cSpell.words": [
1822
"Appstore",
@@ -38,5 +42,6 @@
3842
"umijs",
3943
"uuidv",
4044
"wireframe"
41-
]
45+
],
46+
"typescript.tsdk": "/Users/wangjiaqi/Desktop/Chat2DB/chat2db-client/node_modules/typescript/lib"
4247
}

‎chat2db-client/src/components/Tabs/index.less‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,3 +116,16 @@
116116
color: var(--color-primary);
117117
}
118118
}
119+
120+
.input{
121+
border: 0;
122+
width: 86px;
123+
flex: 1;
124+
height: 20px;
125+
outline: none;
126+
font-size: 12px;
127+
font-weight: 400;
128+
input:focus{
129+
outline: none;
130+
}
131+
}

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

Lines changed: 50 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,16 @@ interface IProps {
2121
onChange: (key: IOption['value']) => void;
2222
onEdit?: (action: 'add' | 'remove', key?: IOption['value']) => void;
2323
hideAdd?: boolean;
24-
type?: 'line'
24+
type?: 'line';
25+
editableName?: boolean;
26+
editableNameOnBlur?: (option: IOption) => void;
2527
}
2628

2729
export default memo<IProps>(function Tab(props) {
28-
const { className, tabs, onChange, onEdit, activeTab, hideAdd, type } = props;
30+
const { className, tabs, onChange, onEdit, activeTab, hideAdd, type, editableName, editableNameOnBlur } = props;
2931
const [internalTabs, setInternalTabs] = useState<IOption[]>(lodash.cloneDeep(tabs || []));
3032
const [internalActiveTab, setInternalActiveTab] = useState<number | string | undefined>(internalTabs[0]?.value);
33+
const [editingTab, setEditingTab] = useState<IOption['value'] | undefined>();
3134

3235
useEffect(() => {
3336
setInternalActiveTab(activeTab);
@@ -52,31 +55,57 @@ export default memo<IProps>(function Tab(props) {
5255
onEdit?.('add')
5356
}
5457

58+
function onDoubleClick(t: IOption) {
59+
if (editableName) {
60+
setEditingTab(t.value)
61+
}
62+
}
63+
64+
65+
function renderTabItem(t: IOption, index: number) {
66+
function inputOnChange(value: string) {
67+
internalTabs[index].label = value
68+
setInternalTabs([...internalTabs])
69+
}
70+
71+
function onBlur() {
72+
editableNameOnBlur?.(t);
73+
setEditingTab(undefined);
74+
}
75+
76+
return <div
77+
onDoubleClick={() => { onDoubleClick(t) }}
78+
key={t.value}
79+
className={
80+
classnames(
81+
{ [styles.tabItem]: type !== 'line' },
82+
{ [styles.tabItemLine]: type === 'line' },
83+
{ [styles.activeTabLine]: t.value === internalActiveTab && type === 'line' },
84+
{ [styles.activeTab]: t.value === internalActiveTab && type !== 'line' },
85+
)
86+
}
87+
>
88+
{
89+
t.value === editingTab ?
90+
<input onChange={(e) => { inputOnChange(e.target.value) }} className={styles.input} autoFocus onBlur={onBlur} type="text" />
91+
:
92+
<div className={styles.text} key={t.value} onClick={changeTab.bind(null, t)}>
93+
{t.label}
94+
</div>
95+
}
96+
<div className={styles.icon} onClick={deleteTab.bind(null, t)}>
97+
<Iconfont code='&#xe634;' />
98+
</div>
99+
</div>
100+
}
101+
55102
return <div className={classnames(styles.tab, className)}>
56103
{
57104
!!internalTabs?.length &&
58105
<div className={styles.tabList}>
59106
{
60107
internalTabs.map((t, index) => {
61-
return <div
62-
key={t.value}
63-
className={
64-
classnames(
65-
{ [styles.tabItem]: type !== 'line' },
66-
{ [styles.tabItemLine]: type === 'line' },
67-
{ [styles.activeTabLine]: t.value === internalActiveTab && type === 'line' },
68-
{ [styles.activeTab]: t.value === internalActiveTab && type !== 'line' },
69-
)
70-
}
71-
72-
>
73-
<div className={styles.text} key={t.value} onClick={changeTab.bind(null, t)}>
74-
{t.label}
75-
</div>
76-
<div className={styles.icon} onClick={deleteTab.bind(null, t)}>
77-
<Iconfont code='&#xe634;' />
78-
</div>
79-
</div>
108+
return renderTabItem(t, index)
80109
})
81110
}
82111
</div>

‎chat2db-client/src/pages/main/workspace/components/WorkspaceLeft/index.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,11 @@
106106
border-radius: 2px;
107107
user-select: none;
108108
cursor: pointer;
109+
.saveItemText{
110+
width: 0px;
111+
flex: 1;
112+
.f-single-line();
113+
}
109114
.moreButton {
110115
flex-shrink: 0;
111116
display: none;

‎chat2db-client/src/pages/main/workspace/components/WorkspaceLeft/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -429,7 +429,9 @@ const RenderSaveBox = dvaModel(function (props: any) {
429429
key={t.id}
430430
className={styles.saveItem}
431431
>
432-
<div dangerouslySetInnerHTML={{ __html: t.name }} />
432+
<div className={styles.saveItemText}>
433+
<span dangerouslySetInnerHTML={{ __html: t.name }} />
434+
</div>
433435
<Dropdown
434436
menu={{
435437
items: [

‎chat2db-client/src/pages/main/workspace/components/WorkspaceRight/index.tsx‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import classnames from 'classnames';
55
import { ConsoleOpenedStatus, ConsoleStatus, DatabaseTypeCode } from '@/constants';
66
import { IConsole, ICreateConsole } from '@/typings';
77
import historyService from '@/service/history';
8-
import Tabs from '@/components/Tabs';
8+
import Tabs, { IOption } from '@/components/Tabs';
99
import LoadingContent from '@/components/Loading/LoadingContent';
1010
import WorkspaceRightItem from '../WorkspaceRightItem';
1111
import { IWorkspaceModelState, IWorkspaceModelType } from '@/models/workspace';
@@ -166,14 +166,42 @@ const WorkspaceRight = memo<IProps>(function (props) {
166166
return <div className={styles.ears}>Chat2DB</div>;
167167
}
168168

169+
function editableNameOnBlur(t: IOption) {
170+
let p: any = {
171+
id: t.value,
172+
name: t.label
173+
}
174+
historyService.updateSavedConsole(p).then(() => {
175+
getConsoleList();
176+
dispatch({
177+
type: 'workspace/fetchGetSavedConsole',
178+
payload: {
179+
pageNo: 1,
180+
pageSize: 999,
181+
status: ConsoleStatus.RELEASE,
182+
...curWorkspaceParams,
183+
},
184+
callback: (res: any) => {
185+
dispatch({
186+
type: 'workspace/setConsoleList',
187+
payload: res.data,
188+
})
189+
}
190+
});
191+
192+
});
193+
}
194+
169195
return (
170196
<div className={classnames(styles.box, className)}>
171197
<LoadingContent data={openConsoleList} handleEmpty empty={render()}>
172198
<div className={styles.tabBox}>
173199
<Tabs
174200
className={styles.tabs}
175201
onChange={onChange}
176-
onEdit={onEdit}
202+
onEdit={onEdit as any}
203+
editableName={true}
204+
editableNameOnBlur={editableNameOnBlur}
177205
activeTab={activeConsoleId}
178206
tabs={(openConsoleList || [])?.map((t, i) => {
179207
return {

0 commit comments

Comments
 (0)