134 lines
3.4 KiB
TypeScript
134 lines
3.4 KiB
TypeScript
/*
|
|
* Copyright 2025 coze-dev Authors
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import React, { useCallback } from 'react';
|
|
|
|
import { I18n } from '@coze-arch/i18n';
|
|
import { useProjectAuth, EProjectPermission } from '@coze-common/auth';
|
|
import { useUpdateProjectModal } from '@coze-studio/project-entity-adapter';
|
|
import {
|
|
useSpaceId,
|
|
useProjectId,
|
|
useCommitVersion,
|
|
} from '@coze-project-ide/framework';
|
|
import {
|
|
IconCozEdit,
|
|
IconCozCheckMarkCircleFillPalette,
|
|
} from '@coze-arch/coze-design/icons';
|
|
import {
|
|
CozAvatar,
|
|
Typography,
|
|
Skeleton,
|
|
IconButton,
|
|
Toast,
|
|
Popover,
|
|
} from '@coze-arch/coze-design';
|
|
|
|
import { useProjectInfo } from '../../../hooks';
|
|
import { InfoContent } from './info-content';
|
|
|
|
import styles from './styles.module.less';
|
|
|
|
const { Title: COZTitle } = Typography;
|
|
|
|
export const ProjectInfo = () => {
|
|
const {
|
|
loading,
|
|
initialValue,
|
|
projectInfo,
|
|
updateProjectInfo,
|
|
publishInfo,
|
|
ownerInfo,
|
|
} = useProjectInfo();
|
|
const spaceId = useSpaceId();
|
|
const projectId = useProjectId();
|
|
const { version } = useCommitVersion();
|
|
const { modalContextHolder, openModal } = useUpdateProjectModal({
|
|
onSuccess: () => {
|
|
updateProjectInfo();
|
|
// Update info
|
|
Toast.success(I18n.t('project_ide_toast_edit_success'));
|
|
},
|
|
});
|
|
|
|
const canAuthEdit = useProjectAuth(
|
|
EProjectPermission.EDIT_INFO,
|
|
projectId || '',
|
|
spaceId || '',
|
|
);
|
|
|
|
/**
|
|
* Editable judgment:
|
|
* 1. Have editing permission
|
|
* 2. Non-preview state
|
|
*/
|
|
const canEdit = canAuthEdit && !version;
|
|
|
|
// Open the project editing pop-up
|
|
const handleEditProject = useCallback(() => {
|
|
openModal({
|
|
initialValue,
|
|
});
|
|
}, [initialValue]);
|
|
|
|
const hasPublished = publishInfo?.has_published;
|
|
|
|
return loading ? (
|
|
<Skeleton.Title style={{ width: 24, height: 24 }} />
|
|
) : (
|
|
<div className={styles['project-info']}>
|
|
<Popover
|
|
content={
|
|
<InfoContent
|
|
projectInfo={projectInfo}
|
|
publishInfo={publishInfo}
|
|
ownerInfo={ownerInfo}
|
|
spaceId={spaceId}
|
|
/>
|
|
}
|
|
>
|
|
<CozAvatar type="bot" size="small" src={projectInfo?.icon_url} />
|
|
{hasPublished ? (
|
|
<div className={styles['check-icon']}>
|
|
<IconCozCheckMarkCircleFillPalette color="green" />
|
|
</div>
|
|
) : null}
|
|
</Popover>
|
|
<COZTitle
|
|
ellipsis={{
|
|
showTooltip: {
|
|
opts: { content: projectInfo?.name },
|
|
},
|
|
}}
|
|
className={styles.title}
|
|
fontSize="16px"
|
|
style={{ maxWidth: 320 }}
|
|
>
|
|
{projectInfo?.name}
|
|
</COZTitle>
|
|
{/* permission judgment */}
|
|
{canEdit ? (
|
|
<IconButton
|
|
color="secondary"
|
|
icon={<IconCozEdit />}
|
|
onClick={handleEditProject}
|
|
/>
|
|
) : null}
|
|
{modalContextHolder}
|
|
</div>
|
|
);
|
|
};
|