{isEdit && (
diff --git a/src/components/DirectoryPersistence/index.js b/src/components/DirectoryPersistence/index.js
new file mode 100644
index 000000000..cf6fd7be0
--- /dev/null
+++ b/src/components/DirectoryPersistence/index.js
@@ -0,0 +1,918 @@
+import React, { Component } from 'react';
+import { connect } from 'dva';
+import {
+ Modal,
+ Button,
+ Tree,
+ Row,
+ Col,
+ Empty,
+ Tooltip,
+ Icon,
+ Upload,
+ Popconfirm,
+ Select,
+ Spin,
+ notification,
+ Menu,
+ Dropdown,
+ Input
+} from 'antd';
+import { formatMessage, FormattedMessage } from 'umi-plugin-locale';
+import globalUtil from '../../utils/global'
+import download from '@/utils/download';
+import apiconfig from '../../../config/api.config';
+import axios from 'axios';
+import SVG from './svg';
+import styles from './index.less';
+import cookie from '@/utils/cookie';
+
+const { TreeNode, DirectoryTree } = Tree;
+@connect(
+ ({ appControl }) => ({
+ appDetail: appControl.appDetail,
+ })
+)
+
+class Index extends Component {
+ constructor(props) {
+ super(props);
+ this.fileUploadRef = React.createRef();
+ this.state = {
+ treeData: [],
+ selectedKeys: [],
+ expandedKeys: [],
+ pathArr: [],
+ keyArr: [],
+ dowloadArr: [],
+ path: '',
+ podsList: [],
+ selectDefaultValue: '',
+ hostPath: this.props && this.props.hostPath,
+ selectLoading: false,
+ treeDataLoading: false,
+ loadedKeys: [],
+ userName: '',
+ showDataLoading: false,
+ nameSpace: '',
+ containerName: '',
+ uploading: false,
+ createFolderVisible: false,
+ folderName: '',
+ createFolderLoading: false
+ }
+ }
+ componentDidMount() {
+ this.fetchInstanceInfo()
+ this.fetchUserInfo()
+ }
+ // 获取用户信息
+ fetchUserInfo = () => {
+ this.props.dispatch({
+ type: 'user/fetchCurrent',
+ callback: res => {
+ if (res) {
+ this.setState({
+ userName: res.bean.user_name
+ })
+ }
+ },
+ });
+ }
+ // 获取podname
+ fetchInstanceInfo = () => {
+ const { dispatch } = this.props;
+ dispatch({
+ type: 'appControl/fetchPods',
+ payload: {
+ team_name: globalUtil.getCurrTeamName(),
+ app_alias: this.props.appAlias,
+ },
+ callback: res => {
+ if (res && res.list) {
+ this.setState({
+ podsList: res.list.new_pods,
+ selectDefaultValue: res.list.new_pods && res.list.new_pods[0] && res.list.new_pods[0].pod_name,
+ containerName: res.list.new_pods && res.list.new_pods[0] && res.list.new_pods[0].container[0] && res.list.new_pods[0].container[0].container_name,
+ selectLoading: true
+ }, () => {
+ this.getListFiles()
+ })
+ }
+ }
+ });
+ };
+ // 获取文件列表
+ getListFiles = (bool = false) => {
+ this.props.dispatch({
+ type: 'appControl/getListFiles',
+ payload: {
+ team_name: globalUtil.getCurrTeamName(),
+ group_id: this.props.appAlias,
+ region_name: globalUtil.getCurrRegionName(),
+ pod_name: this.state.selectDefaultValue,
+ host_path: this.state.hostPath,
+ container_name: this.state.containerName,
+ extend_method: this.props.appDetail && this.props.appDetail.service && this.props.appDetail.service.extend_method
+ },
+ callback: res => {
+ if (res && res.bean) {
+ this.setState({
+ nameSpace: res.bean.namespace
+ })
+ }
+ if (res && res.list) {
+ res.list.map((item, index) => {
+ item.key = index,
+ item.isLeaf = item.is_leaf
+ })
+ const downOruploadPath = `${window.location.protocol}${res.bean && res.bean.ws_url && res.bean.ws_url.substring(res.bean.ws_url.indexOf("/"))}`
+ this.setState({
+ treeData: res.list,
+ showData: this.sortShowData(res.list),
+ treeDataLoading: true,
+ downOrUploadPath: downOruploadPath,
+ showDataLoading: true
+ })
+ }
+ },
+ handleError: res => {
+ if (res) {
+ notification.error({ message: formatMessage({ id: 'componentOverview.body.DirectoryPersistence.error' }) });
+ this.setState({
+ showData: [],
+ treeData: [],
+ showDataLoading: true
+ })
+ }
+ }
+ });
+ }
+ // 加载树图
+ onLoadData = treeNode =>
+ new Promise(resolve => {
+ if (treeNode.props.children) {
+ resolve();
+ return;
+ }
+ this.setState({
+ showDataLoading: false
+ })
+ setTimeout(() => {
+ this.props.dispatch({
+ type: 'appControl/getListFiles',
+ payload: {
+ team_name: globalUtil.getCurrTeamName(),
+ group_id: this.props.appAlias,
+ region_name: globalUtil.getCurrRegionName(),
+ pod_name: this.state.selectDefaultValue,
+ container_name: this.state.containerName,
+ host_path: `${this.state.hostPath}/${this.state.path}`,
+ extend_method: this.props.appDetail && this.props.appDetail.service && this.props.appDetail.service.extend_method
+ },
+ callback: res => {
+ if (res) {
+ if (res.list && res.list.length == 0) {
+ this.setState({
+ treeData: [...this.state.treeData],
+ showData: this.sortShowData(res.list),
+ showDataLoading: true
+ });
+ treeNode.props.dataRef.children = []
+ resolve();
+ } else {
+ const arr = res.list
+ arr.map((item, index) => {
+ item.key = `${treeNode.props.eventKey}-${index}`
+ item.isLeaf = item.is_leaf
+ })
+ treeNode.props.dataRef.children = arr
+ this.setState({
+ treeData: [...this.state.treeData],
+ showData: this.sortShowData(res.list),
+ showDataLoading: true
+ });
+ resolve();
+ }
+ }
+ }
+ });
+ }, 100)
+ });
+ // 渲染函数
+ renderTreeNodes = data =>
+ data && data.map((item, index) => {
+ if (item.isLeaf) {
+ return (
+
+ {this.renderTreeNodes(item.children)}
+
+ );
+ }
+ return null;
+ });
+ //选择树节点
+ onSelect = (selectedKeys, info) => {
+ // 选择为空时直接return
+ if (selectedKeys && selectedKeys.length == 0) {
+ return null
+ }
+ if (info) {
+ const { selectedNodes } = info
+ const { props } = selectedNodes[0]
+ const { dataRef } = props
+ this.setState({
+ selectedKeys: selectedKeys,
+ expandedKeys: this.state.expandedKeys.includes(selectedKeys[0]) ? [...this.state.expandedKeys] : [...this.state.expandedKeys, ...selectedKeys],
+ showData: this.sortShowData(dataRef.children) || this.sortShowData(this.state.showData),
+ dowloadArr: [],
+ pathArr: [],
+ path: ''
+ }, () => {
+ this.getPath()
+ })
+ } else {
+ this.setState({
+ selectedKeys: selectedKeys,
+ expandedKeys: this.state.expandedKeys.includes(selectedKeys[0]) ? [...this.state.expandedKeys] : [...this.state.expandedKeys, ...selectedKeys],
+ dowloadArr: [],
+ pathArr: [],
+ path: ''
+ }, () => {
+ this.getPath()
+ })
+ }
+ }
+ onLoad = (loadedKeys) => {
+ this.setState({
+ loadedKeys: loadedKeys
+ })
+ }
+ // 展开树图
+ onExpand = (expandedKeys, info) => {
+ let newLoadKeys = this.state.loadedKeys
+ if (this.state.expandedKeys.length > expandedKeys.length) {
+ // 当是收起的时候，把这个收起的节点从loadedKeys中移除
+ newLoadKeys = this.state.loadedKeys.filter((i) => expandedKeys.includes(i))
+ }
+ this.setState({
+ expandedKeys: expandedKeys,
+ selectedKeys: [`${info.node.props.dataRef.key}`],
+ showData: this.sortShowData(info.node.props.dataRef.children),
+ loadedKeys: newLoadKeys
+ }, () => {
+ this.getPath()
+ })
+ };
+ // 获取后缀名
+ getSvgIcon = (name) => {
+ if (name) {
+ const str = name.substr(name.lastIndexOf('.') + 1)
+ return `${str}`
+ }
+ }
+ // 鼠标点击
+ folderClick = (data) => {
+ // 判断data数据是否有孩子，如果没有就加载，如果有就
+ if (data && data.children && data.children.length > 0) {
+ this.setState({
+ expandedKeys: [...this.state.expandedKeys, ...[`${data.key}`]],
+ selectedKeys: [`${data.key}`],
+ showData: this.sortShowData(data.children),
+ dowloadArr: []
+ }, () => {
+ this.getPath()
+ })
+ } else {
+ this.setState({
+ expandedKeys: [...this.state.expandedKeys, ...[`${data.key}`]],
+ selectedKeys: [`${data.key}`],
+ dowloadArr: []
+ }, () => {
+ this.getPath()
+ })
+ }
+ }
+ //递归获取Showdata数据
+ getShowData = (datas) => {
+ const { selectedKeys } = this.state
+ datas.map(item => {
+ const { key, children } = item
+ if (key == selectedKeys[0]) {
+ this.setState({
+ showData: this.sortShowData(datas)
+ })
+ }
+ if (children && children.length > 0) {
+ this.getShowData(children)
+ }
+ })
+ }
+ // 获取key值的path数据
+ getPathData = (data) => {
+ const { treeData, keyArr } = this.state
+ data.map(item => {
+ const { title, children } = item
+ if (keyArr.indexOf(`${item.key}`) != -1) {
+ const arr = this.state.pathArr
+ arr.push(title)
+ this.setState({
+ pathArr: arr
+ })
+ }
+ if (children && children.length > 0) {
+ this.getPathData(children)
+ }
+ })
+ }
+ //递归获取path数据
+ getPath = () => {
+ const { selectedKeys, treeData, pathArr } = this.state
+ if (selectedKeys.length == 0) {
+ this.setState({
+ path: ''
+ })
+ return
+ }
+ if (selectedKeys && selectedKeys[0]) {
+ const str = selectedKeys[0]
+ const arr = str.split("-")
+ const keyArr = []
+ for (let index = 0; index < arr.length + 1; index++) {
+ const newarr = arr.slice(0, index)
+ const newstr = newarr.join("-")
+ keyArr.push(newstr)
+ }
+ keyArr.shift();
+ this.setState({
+ keyArr: keyArr,
+ pathArr: []
+ }, () => {
+ this.getPathData(treeData)
+ })
+ setTimeout(() => {
+ const path = this.state.pathArr.join("/")
+ this.setState({
+ path: path
+ })
+ }, 100)
+ }
+ }
+ // 返回上一级
+ goBack = () => {
+ const { selectedKeys } = this.state
+ // 如果选择为空，则展示所有数据
+ if (selectedKeys[0] == undefined) {
+ return
+ }
+ // 如果选择有值且值不大于1
+ if ((selectedKeys[0]).indexOf("-") == -1) {
+ this.setState({
+ selectedKeys: [],
+ showData: this.sortShowData(this.state.treeData),
+ dowloadArr: []
+ }, () => {
+ this.getPath()
+ })
+ // 如果选择有值且值大于1
+ } else {
+ this.getShowData(this.state.treeData)
+ this.setState({
+ selectedKeys: [`${selectedKeys[0].substring(0, (selectedKeys[0]).lastIndexOf("-"))}`],
+ dowloadArr: []
+ }, () => {
+ this.getPath()
+ })
+ }
+ }
+ // 下载
+ dowloadTitle = (val) => {
+ const { dowloadArr } = this.state
+ setTimeout(() => {
+ if (dowloadArr.includes(val)) {
+ const arr = []
+ dowloadArr.map(item => {
+ if (item != val) {
+ arr.push(item)
+ }
+ })
+ this.setState({
+ dowloadArr: [...arr]
+ })
+ } else {
+ const arr = []
+ arr.push(val)
+ this.setState({
+ dowloadArr: [...this.state.dowloadArr, ...arr]
+ })
+ }
+ }, 10)
+ }
+ // 下拉框选择
+ selectChange = (val) => {
+ this.setState({
+ selectDefaultValue: val
+ }, () => {
+ this.getListFiles()
+ })
+ }
+ fileDownload = () => {
+ const { dowloadArr } = this.state
+ if (dowloadArr.length == 0) {
+ notification.info({ message: formatMessage({ id: 'componentOverview.body.DirectoryPersistence.download' }) });
+ } else {
+ dowloadArr.map(item => {
+ this.fileDownloadApi(item)
+ })
+ }
+ setTimeout(() => {
+ this.setState({
+ dowloadArr: []
+ })
+ }, 100)
+ }
+ // 下载接口
+ fileDownloadApi = (title) => {
+ const { downOrUploadPath, nameSpace, containerName } = this.state
+ const dowloadPath = this.state.path ? `${this.state.hostPath}/${encodeURIComponent(this.state.path)}` : `${this.state.hostPath}`;
+ var dowloadString = dowloadPath.replace(/\/+$/, "");
+ const path = `${downOrUploadPath}/v2/file-operate/download/${encodeURIComponent(title)}?path=${dowloadString}&pod_name=${this.state.selectDefaultValue}&namespace=${nameSpace}&fileName=${encodeURIComponent(title)}&container_name=${containerName}`
+ download(`${path}`, title, {}, true)
+ }
+ uploadChange = info => {
+ const { path, selectedKeys } = this.state
+ this.setState({
+ uploading: true
+ })
+ if (info && info.file && info.file.status === 'done') {
+ this.setState({
+ uploading: false
+ })
+ notification.success({ message: formatMessage({ id: 'notification.success.upload' }) });
+ if (selectedKeys[0] == undefined) {
+ this.getListFiles()
+ } else {
+ this.updateTree()
+ }
+ } else if (info && info.file && info.file.status === 'error') {
+ this.setState({
+ uploading: false
+ })
+ notification.error({ message: formatMessage({ id: 'notification.error.update' }) });
+ if (selectedKeys[0] == undefined) {
+ this.getListFiles()
+ } else {
+ this.updateTree()
+ }
+ }
+ };
+ updateTree = () => {
+ const { selectedKeys, expandedKeys, loadedKeys, treeData } = this.state
+ // 获取新的expandedKeys数组，不包含该节点及子节点
+ const newExpandedKeys = expandedKeys.filter(item => {
+ return item.indexOf(selectedKeys[0]) == -1
+ })
+ // 获取新的loadedKeys数组，不包含该节点及子节点
+ const newLoadedKeys = loadedKeys.filter(item => {
+ return item.indexOf(selectedKeys[0]) == -1
+ })
+ const newTreedata = treeData
+ this.setState({
+ expandedKeys: [...newExpandedKeys, ...[`${selectedKeys[0]}`]],
+ loadedKeys: [...newLoadedKeys],
+ treeData: this.removeShowData(newTreedata),
+ selectedKeys: [`${selectedKeys[0]}`],
+ })
+ }
+ // 获取新的treeData数据
+ removeShowData = (datas) => {
+ const { selectedKeys } = this.state
+ const newData = datas;
+ function setGrayNode(data) {
+ for (var i = 0; i < data.length; i++) {
+ if (data[i].key == selectedKeys[0]) {
+ delete data[i].children
+ continue;
+ } else {
+ if (data[i].children) {
+ setGrayNode(data[i].children);
+ }
+ }
+ }
+ }
+ setGrayNode(newData)
+ return newData;
+ }
+ sortShowData = (array) => {
+ const isFile = (array && array.length > 0) ? array.filter(item => { return item.title.indexOf('.') == -1 }) : []
+ const notFile = (array && array.length > 0) ? array.filter(item => { return item.title.indexOf('.') != -1 }) : []
+ const folder = []
+ isFile.map((item, index) => {
+ if (item.isLeaf == true) {
+ folder.unshift(item)
+ } else {
+ folder.push(item)
+ }
+ })
+ // 对文件进行归类
+ const groups = notFile.reduce((accumulator, currentValue) => {
+ const title = (currentValue.title).substring(currentValue.title.lastIndexOf("."));
+ if (!accumulator[title]) {
+ accumulator[title] = [];
+ }
+ accumulator[title].push(currentValue);
+ return accumulator;
+ }, {});
+ function sortObjectProps(obj) {
+ const propArr = [];
+ for (let prop in obj) {
+ propArr.push([prop, obj[prop]]);
+ }
+ propArr.sort((a, b) => b[1].length - a[1].length);
+ return propArr.reduce((arr, prop) => arr.concat(prop[1]), []);
+ }
+ const valuesArray = sortObjectProps(groups)
+ const showDataArr = [...folder, ...valuesArray]
+ return showDataArr
+ }
+ uploadFolder = async () => {
+ const { downOrUploadPath, selectDefaultValue, containerName, nameSpace, userName, hostPath, path } = this.state;
+ const upLoadPath = path ? `${hostPath}/${path}` : hostPath;
+ const uploadString = upLoadPath.replace(/\/+$/, "");
+
+ try {
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.webkitdirectory = true;
+ input.directory = true;
+
+ input.onchange = async () => {
+ const files = Array.from(input.files);
+ if (!files.length) return;
+ const formData = new FormData();
+ files.map(file => {
+ const relativePath = file.webkitRelativePath;
+ // 创建新的 File 对象，使用相对路径作为名称
+ const newFile = new File([file], relativePath);
+ formData.append('files', newFile);
+ })
+ formData.append('path', uploadString);
+ formData.append('container_name', containerName);
+ formData.append('pod_name', selectDefaultValue);
+ formData.append('namespace', nameSpace);
+ formData.append('user_name', userName);
+ formData.append('tenant_id', this.props.appDetail?.service?.tenant_id);
+ formData.append('service_id', this.props.appDetail?.service?.service_id);
+ formData.append('volume_name', this.props.volumeName);
+
+ this.setState({ uploading: true });
+
+ try {
+ const response = await fetch(`${downOrUploadPath}/v2/file-operate/upload`, {
+ method: 'POST',
+ body: formData,
+ headers: {
+ 'Authorization': `GRJWT ${cookie.get('token')}`,
+ },
+ credentials: 'include',
+ });
+
+ if (!response.ok) {
+ const errorData = await response.json().catch(() => ({}));
+ throw new Error(errorData.message || '上传失败');
+ }
+
+ notification.success({ message: formatMessage({ id: 'notification.success.upload' }) });
+ this.setState({ uploading: false });
+ const { selectedKeys } = this.state;
+ if (selectedKeys[0] == undefined) {
+ this.getListFiles();
+ } else {
+ this.updateTree();
+ }
+
+ } catch (error) {
+ console.error('Upload error:', error);
+ notification.error({
+ message: formatMessage({ id: 'notification.error.update' }),
+ description: error.message || '网络请求失败，请检查网络连接'
+ });
+ }
+ };
+
+ input.click();
+
+ } catch (error) {
+ console.error('General error:', error);
+ notification.error({
+ message: formatMessage({ id: 'notification.error.update' }),
+ description: error.message || '操作失败'
+ });
+ } finally {
+ this.setState({ uploading: false });
+ }
+ };
+ // 添加上传菜单点击处理函数
+ handleUploadMenuClick = ({ key }) => {
+ if (key === 'file') {
+ // 触发文件上传input点击
+ this.fileUploadRef.current.click();
+ } else if (key === 'folder') {
+ this.uploadFolder();
+ }
+ };
+ showCreateFolder = () => {
+ this.setState({
+ createFolderVisible: true
+ });
+ }
+ handleCreateFolderCancel = () => {
+ this.setState({
+ createFolderVisible: false,
+ folderName: ''
+ });
+ }
+ handleFolderNameChange = (e) => {
+ // 限制不能输入/和空格
+ if (e.target.value.includes('/') || e.target.value.includes(' ')) {
+ notification.warning({ message: '文件夹名称不能包含“/”符号和空格' });
+ return;
+ }
+ this.setState({
+ folderName: e.target.value
+ });
+ }
+ handleCreateFolder = async() => {
+ const { folderName, downOrUploadPath, selectDefaultValue, containerName, nameSpace, userName, hostPath, path } = this.state;
+ if (!folderName.trim()) {
+ notification.warning({ message: '请输入文件夹名称' });
+ return;
+ }
+
+ this.setState({ createFolderLoading: true });
+
+ const createPath = path ? `${hostPath}/${path}/${folderName}` : `${hostPath}/${folderName}`;
+ const finalPath = createPath.replace(/\/+/g, '/');
+ const formData = new FormData();
+ formData.append('path', finalPath);
+ formData.append('container_name', containerName);
+ formData.append('pod_name', selectDefaultValue);
+ formData.append('namespace', nameSpace);
+ formData.append('user_name', userName);
+ formData.append('tenant_id', this.props.appDetail?.service?.tenant_id);
+ formData.append('service_id', this.props.appDetail?.service?.service_id);
+ formData.append('volume_name', this.props.volumeName);
+
+ try {
+ const response = await fetch(`${downOrUploadPath}/v2/file-operate/mkdir`, {
+ method: 'POST',
+ body: formData,
+ headers: {
+ 'Authorization': `GRJWT ${cookie.get('token')}`,
+ },
+ credentials: 'include',
+ });
+ if (!response.ok) {
+ const errorData = await response.json().catch(() => ({}));
+ throw new Error(errorData.message || '创建文件夹失败');
+ }
+
+ notification.success({ message: '创建文件夹成功' });
+ this.setState({ createFolderLoading: false, createFolderVisible: false, folderName: '' });
+ const { selectedKeys } = this.state;
+ if (selectedKeys[0] == undefined) {
+ this.getListFiles();
+ } else {
+ this.updateTree();
+ }
+ } catch (error) {
+ console.log(error,"error");
+ notification.error({
+ message: '创建文件夹失败',
+ description: error.message || '网络请求失败，请检查网络连接'
+ });
+ }
+ }
+ createFolder = () => {
+ this.showCreateFolder();
+ }
+ render() {
+ const {
+ selectedKeys,
+ expandedKeys,
+ showData,
+ path,
+ dowloadArr,
+ podsList,
+ selectDefaultValue,
+ selectLoading,
+ treeDataLoading,
+ hostPath,
+ loadedKeys,
+ downOrUploadPath,
+ userName,
+ showDataLoading,
+ containerName,
+ nameSpace,
+ uploading,
+ createFolderVisible,
+ folderName,
+ createFolderLoading
+ } = this.state
+ const { volumeName } = this.props
+ const upLoadPath = this.state.path ? `${this.state.hostPath}/${this.state.path}` : `${this.state.hostPath}`;
+ var uploadString = upLoadPath.replace(/\/+$/, "");
+ const upload = `${downOrUploadPath}/v2/file-operate/upload`
+ const props = {
+ action: upload,
+ data: {
+ path: uploadString,
+ container_name: containerName,
+ pod_name: selectDefaultValue,
+ namespace: nameSpace,
+ user_name: userName,
+ tenant_id: this.props.appDetail && this.props.appDetail.service && this.props.appDetail.service.tenant_id,
+ service_id: this.props.appDetail && this.props.appDetail.service && this.props.appDetail.service.service_id,
+ volume_name: volumeName
+ },
+ method: "post",
+ name: 'file',
+ };
+ // 上传按钮的下拉菜单
+ const uploadMenu = (
+
+ );
+ return (
+
+
+ {formatMessage({ id: 'componentOverview.body.DirectoryPersistence.example' })}
+
+ }
+ visible={true}
+ width={1000}
+ closable={false}
+ footer={
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ onLoad={this.onLoad}
+ loadedKeys={loadedKeys}
+ >
+ {this.renderTreeNodes(this.state.treeData)}
+
+
+
+
+
+
+
+ 路径：{upLoadPath}
+
+
+
+
+
+
+
+ {showData && showData.length > 0 ? (
+ showData.map((item, index) => {
+ const { title, isLeaf } = item
+ if (isLeaf) {
+ return
this.folderClick(item)}>
+
+ {SVG.getSvg('file', 70)}
+
+
+
+ {item.title}
+
+
+
+ } else {
+ return
this.dowloadTitle(item.title)} style={{ background: dowloadArr.includes(item.title) ? "#e6f7ff" : '#fff' }}>
+
+ {SVG.getSvg(this.getSvgIcon(title), 70)}
+
+
+
+ {item.title}
+
+
+
+ }
+ })
+ ) : (
+
+ )}
+
+ ) : (
+
+ )}
+
+
+
+
+
将在以下路径创建文件夹：
+
+ {this.state.path ? `${this.state.hostPath}/${this.state.path}` : this.state.hostPath}
+
+
+
+ );
+ }
+}
+
+export default Index;
+
diff --git a/src/components/DirectoryPersistence/index.less b/src/components/DirectoryPersistence/index.less
new file mode 100644
index 000000000..cc3204a01
--- /dev/null
+++ b/src/components/DirectoryPersistence/index.less
@@ -0,0 +1,124 @@
+.ModalStyle {
+ :global {
+ .ant-modal-body {
+ padding: 0;
+ min-height: 420px;
+
+ .ant-row {
+ .ant-col-6 {
+ overflow-y: auto;
+ height: 420px;
+ padding: 24px 0 24px 24px;
+ border-right: 1px solid #e8e8e8;
+ }
+ }
+ }
+ }
+
+ :global {
+ .ant-tree .ant-tree-switcher {
+ display: none;
+ }
+ }
+}
+
+.iconShow {
+ display: flex;
+ flex-wrap: wrap;
+ max-height: 420px;
+ overflow-y: auto;
+ padding: 40px 0px 0px;
+
+ .outerLayer {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 120px;
+ height: 120px;
+ box-sizing: border-box;
+ margin: 0 10px 10px;
+ border-radius: 5px;
+
+ div {
+ text-align: center;
+ font-weight: 600;
+ }
+
+ div:nth-of-type(2) {
+ max-width: 120px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .emptyStyle {
+ width: 100%;
+ height: 420px;
+ margin-top: 130px
+ }
+}
+
+.goBack {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ border-bottom: 1px solid #e8e8e8;
+ background-color: #fff;
+ height: 40px;
+ line-height: 40px;
+ // :global{
+ button {
+ box-shadow: 0 0 0;
+ border: 0;
+ background-color: transparent;
+ height: 30px;
+ padding: 0px 15px;
+ cursor: pointer;
+
+ svg {
+ vertical-align: baseline;
+ margin-right: 5px;
+ }
+ }
+
+ .path {
+ padding-left: 10px;
+ height: 40px;
+ line-height: 40px;
+ font-size: 14px;
+ color: #333;
+ font-weight: 600;
+ }
+}
+
+.footerBtnGroup {
+ display: flex;
+ justify-content: end;
+ align-items: center;
+
+ .leftBtns {
+ display: flex;
+ gap: 8px;
+ }
+
+ .rightBtns {
+ display: flex;
+ gap: 8px;
+
+ :global {
+ .ant-dropdown-trigger {
+ display: inline-flex;
+ align-items: center;
+
+ .anticon {
+ margin-left: 4px;
+ }
+ }
+
+ .ant-btn {
+ min-width: 88px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/DirectoryPersistence/svg.js b/src/components/DirectoryPersistence/svg.js
new file mode 100644
index 000000000..84983343b
--- /dev/null
+++ b/src/components/DirectoryPersistence/svg.js
@@ -0,0 +1,117 @@
+const fileIcon = {
+ getSvg(type, size, color) {
+ const svg = {
+ 'addSvg': (
+
+ ),
+ '7z': (
+
+ ),
+ // 没有符合样式的图标就用这个
+ otherFile: (
+
+ ),
+ jar: (
+
+ ),
+ py: (
+
+ ),
+ exe: (
+
+ ),
+ jpg: (
+
+ ),
+ jpeg: (
+
+ ),
+ pdf: (
+
+ ),
+ txt: (
+
+ ),
+ zip: (
+
+ ),
+ xml: (
+
+ ),
+ class: (
+
+ ),
+ doc: (
+
+ ),
+ docx: (
+
+ ),
+ html:(
+
+ ),
+ iso: (
+
+ ),
+ js: (
+
+ ),
+ sql: (
+
+ ),
+ md: (
+
+ ),
+ mp4: (
+
+ ),
+ dockerfile: (
+
+ ),
+ json: (
+
+ ),
+ java: (
+
+ ),
+ yml: (
+
+ ),
+ yaml:(
+
+ ),
+ ppt:(
+
+ ),
+ xls:(
+
+ ),
+ gitignore: (
+
+ ),
+ css:(
+
+ ),
+ mp3:(
+
+ ),
+ png: (
+
+ ),
+ svg: (
+
+ ),
+ file: (
+
+ ),
+ goBack: (
+
+ ),
+ pem:(
+
+ )
+ }
+ return svg[type] || svg['otherFile'];
+ }
+}
+export default fileIcon;
\ No newline at end of file
diff --git a/src/components/EditUserInfoFrom/index.js b/src/components/EditUserInfoFrom/index.js
new file mode 100644
index 000000000..b20746c64
--- /dev/null
+++ b/src/components/EditUserInfoFrom/index.js
@@ -0,0 +1,166 @@
+import React, { Component } from 'react'
+import { Form, Input, Modal, Upload, Icon, notification } from 'antd'
+import { formatMessage, FormattedMessage } from 'umi-plugin-locale';
+import apiconfig from '../../../config/api.config'
+import cookie from '@/utils/cookie';
+import styles from './index.less'
+
+@Form.create()
+
+export default class index extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ imageUrl: '',
+ loading: false,
+ userInfo: this.props.userInfo || {},
+ imageBase64: ''
+ };
+ }
+ componentDidMount(){
+ const {userInfo} = this.props
+ if(userInfo?.logo){
+ this.setState({
+ imageUrl:userInfo?.logo
+ })
+ }
+ }
+ handleOk = () => {
+ const {imageUrl} = this.state
+ this.props.form.validateFields((err, values) => {
+ if (!err) {
+ values.logo = imageUrl
+ this.props.onOk(values,'info');
+ }
+ });
+ }
+ handleCancel = () => {
+ this.props.onCancel();
+ }
+ handleLogoChange = info => {
+ if (info.file.status === 'uploading') {
+ this.setState({ loading: true });
+ return;
+ }
+ if(info.file.status === 'error'){
+ notification.error({
+ message: info.file.response.msg_show || '上传失败'
+ })
+ return
+ }
+ if (info.file.status === 'done') {
+ this.setState({
+ imageUrl:
+ info.file &&
+ info.file.response &&
+ info.file.response.data &&
+ info.file.response.data.bean &&
+ info.file.response.data.bean.file_url,
+ loading: false
+ });
+ this.getLogoBase64(info.file.originFileObj, imageBase64 =>
+ this.setState({
+ imageBase64
+ })
+ );
+ }
+ };
+ getLogoBase64 = (img, callback) => {
+ const reader = new FileReader();
+ reader.addEventListener('load', () => callback(reader.result));
+ reader.readAsDataURL(img);
+ };
+
+ handleLogoRemove = () => {
+ this.setState({ imageUrl: '', imageBase64: '' });
+ };
+ render() {
+ const { userInfo, imageBase64, imageUrl, loading } = this.state;
+ const { getFieldDecorator } = this.props.form;
+ const formItemLayout = {
+ labelCol: { span: 4 },
+ wrapperCol: { span: 20 },
+ };
+ const uploadButton = (
+
+ );
+ const token = cookie.get('token');
+ const myheaders = {};
+ if (token) {
+ myheaders.Authorization = `GRJWT ${token}`;
+ }
+ return (
+
+
+
+ )
+ }
+}
diff --git a/src/components/EditUserInfoFrom/index.less b/src/components/EditUserInfoFrom/index.less
new file mode 100644
index 000000000..bb07a0f60
--- /dev/null
+++ b/src/components/EditUserInfoFrom/index.less
@@ -0,0 +1,8 @@
+.conformDesc {
+ font-size: 10px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: rgba(153, 153, 153, 1);
+ line-height: 14px;
+ width: 300px;
+}
\ No newline at end of file
diff --git a/src/components/EnvironmentVariable/index.js b/src/components/EnvironmentVariable/index.js
index 7074ab1d2..b245be427 100644
--- a/src/components/EnvironmentVariable/index.js
+++ b/src/components/EnvironmentVariable/index.js
@@ -748,22 +748,19 @@ class EnvironmentVariable extends React.Component {
components={components}
columns={columns}
dataSource={innerEnvsList}
- pagination={false}
+ pagination={{
+ current: page,
+ pageSize: page_size,
+ total: Number(total),
+ onChange: this.onPageChange,
+ onShowSizeChange: this.onShowSizeChange,
+ showQuickJumper: true,
+ showSizeChanger: true,
+ showTotal: (total) => `共 ${total} 条`,
+ pageSizeOptions:['5', '10', '20', '30'],
+ hideOnSinglePage: Number(total) <= 5
+ }}
/>
-
- {Number(total) >page_size &&
-
- }
-
diff --git a/src/components/GatewayRouteHttp/index.js b/src/components/GatewayRouteHttp/index.js
index 9576fe464..d6e558e8e 100644
--- a/src/components/GatewayRouteHttp/index.js
+++ b/src/components/GatewayRouteHttp/index.js
@@ -31,6 +31,8 @@ export default class index extends Component {
dataSource: [],
type: 'add',
tableLoading: true,
+ pageSize: 10,
+ page: 1,
searchKey: '', // 添加搜索关键词状态
};
}
@@ -160,6 +162,12 @@ export default class index extends Component {
const ComponentID = serviceName.slice(-8);
dispatch(routerRedux.push(`/team/${teamName}/region/${regionName}/components/${ComponentID}/overview`));
}
+ onPageChange = (page_num, page_size) => {
+ this.setState({
+ page: page_num,
+ pageSize: page_size
+ })
+ }
handleSearch = (value) => {
this.setState({
@@ -173,7 +181,9 @@ export default class index extends Component {
routeDrawer,
dataSource,
editInfo,
- tableLoading
+ tableLoading,
+ page,
+ pageSize
} = this.state;
const {
appID,
@@ -305,6 +315,17 @@ export default class index extends Component {
columns={columns}
loading={tableLoading}
rowKey={record => record.name || record.serviceName}
+ pagination={{
+ current: page,
+ pageSize: pageSize,
+ total: dataSource.length ,
+ onChange: this.onPageChange,
+ showQuickJumper: true,
+ showSizeChanger: true,
+ showTotal: (total) => `共 ${total} 条`,
+ onShowSizeChange: this.onPageChange,
+ hideOnSinglePage: dataSource.length <= 10
+ }}
/>
{routeDrawer &&
diff --git a/src/components/GatewayRouteTcp/index.js b/src/components/GatewayRouteTcp/index.js
index 5ed71624e..1477f9e90 100644
--- a/src/components/GatewayRouteTcp/index.js
+++ b/src/components/GatewayRouteTcp/index.js
@@ -34,7 +34,9 @@ export default class index extends Component {
type: 'add',
tableLoading: true,
comList:[],
- outer_url:''
+ outer_url:'',
+ pageSize: 10,
+ page: 1
};
}
componentWillMount(){
@@ -201,13 +203,21 @@ export default class index extends Component {
)
);
}
+ onPageChange = (page_num, page_size) => {
+ this.setState({
+ page: page_num,
+ pageSize: page_size
+ })
+ }
render() {
const {
routeDrawer,
dataSource,
editInfo,
tableLoading,
- outer_url
+ outer_url,
+ pageSize,
+ page
} = this.state;
const {
appID,
@@ -315,6 +325,17 @@ export default class index extends Component {
dataSource={dataSource}
columns={columns}
loading={tableLoading}
+ pagination={{
+ current: page,
+ pageSize: pageSize,
+ total: dataSource.length ,
+ onChange: this.onPageChange,
+ showQuickJumper: true,
+ showSizeChanger: true,
+ showTotal: (total) => `共 ${total} 条`,
+ onShowSizeChange: this.onPageChange,
+ hideOnSinglePage: dataSource.length <= 10
+ }}
/>
{routeDrawer &&
diff --git a/src/components/GitRepostory/index.less b/src/components/GitRepostory/index.less
index afd2b7a70..b3d711c0a 100644
--- a/src/components/GitRepostory/index.less
+++ b/src/components/GitRepostory/index.less
@@ -13,11 +13,11 @@
}
.ClearCard {
- :global {
- .ant-card-body {
- padding: 0 !important;
- }
- }
+ // :global {
+ // .ant-card-body {
+ // padding: 0 !important;
+ // }
+ // }
}
.pageHeaderContent {
diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js
index 8ea3b11cf..b76fe89de 100644
--- a/src/components/GlobalHeader/index.js
+++ b/src/components/GlobalHeader/index.js
@@ -23,7 +23,7 @@ import { formatMessage, FormattedMessage } from 'umi-plugin-locale';
import { routerRedux } from 'dva/router';
import Debounce from 'lodash-decorators/debounce';
import React, { PureComponent } from 'react';
-import userIcon from '../../../public/images/user-icon-small.png';
+import userIcon from '../../../public/images/default_Avatar.png';
import { setNewbieGuide, fetchAllVersion } from '../../services/api';
import ChangePassword from '../ChangePassword';
import styles from './index.less';
@@ -87,7 +87,7 @@ export default class GlobalHeader extends PureComponent {
const { dispatch } = this.props;
const { language } = this.state
if (key === 'userCenter') {
- dispatch(routerRedux.push(`/account/center`));
+ dispatch(routerRedux.push(`/account/center/personal`));
}
if (key === 'cpw') {
this.showChangePass();
@@ -213,16 +213,11 @@ export default class GlobalHeader extends PureComponent {
);
- const handleEditSvg = () => (
-
- );
const handleLogoutSvg = () => (
)
const docsUrl = (rainbondInfo?.document?.enable && rainbondInfo?.document?.value?.platform_url) || (language ? 'https://www.rainbond.com/docs/' : 'https://www.rainbond.com/en/docs/')
- const update_Svg = globalUtil.fetchSvg('updateIcon')
const MenuItems = (key, component, text) => {
return (
@@ -260,7 +254,6 @@ export default class GlobalHeader extends PureComponent {
}}
/>
{text == 1 && }
- {text == 2 && }
{text == 3 && }
{text == 4 && }
@@ -268,9 +261,8 @@ export default class GlobalHeader extends PureComponent {
};
const menu = (
-
}
>
{getFieldDecorator('docker_cmd', {
- initialValue: '',
+ initialValue: imageUrl || '',
rules: [
{ required: true, message: formatMessage({ id: 'placeholder.warehouse_not_empty' }) },
// 长度255
- { max: 255, message: '最大输入长度为255个字符' },
+ { max: 255, message: formatMessage({ id: 'mirror.length.limit' }) },
// 不允许输入中文、空格
- { pattern: /^[^\u4e00-\u9fa5\s]*$/, message: '不允许输入中文、空格' }
+ { pattern: /^[^\u4e00-\u9fa5\s]*$/, message: formatMessage({ id: 'mirror.input.rule' }) }
]
})(
-
-
- {warehouseList.length > 0 ? (
-
- ) : (
-
- 公开仓库
-
- )
- }
-
-
-
-
-
+
)}
}
- {radioKey === 'address' &&
-
- {getFieldDecorator('checkout', {
- initialValue: ''
- })(
-
- {tagLoading &&
-
- }
- {!tagLoading && warehouseImageTags.length == 0 &&
-
-
-
- }
- {!tagLoading && warehouseImageTags.length > 0 &&
-
-
- {(warehouseImageTags || []).map(item => {
- return (
-
- {item}
-
- )
- })}
-
-
- }
-
- }
{radioKey === 'cmd' &&
{getFieldDecorator('docker_cmd', {
initialValue: '',
rules: [{ required: true, message: formatMessage({ id: 'placeholder.dockerRunMsg' }) }]
})(
-
+
)}
}
@@ -821,7 +746,7 @@ export default class Index extends PureComponent {
}
- {radioKey === 'cmd' &&
+ {(radioKey === 'cmd' || radioKey === 'address') && isPublic &&
{formatMessage({ id: 'teamAdd.create.image.hint1' })}
}
- { radioKey === 'cmd' && <>
+ {(radioKey === 'cmd' || radioKey === 'address') && isPublic && <>
+