添加依赖管理

2026-06-30 20:35:09 +08:00 · 2021-10-24 17:07:06 +08:00
parent bd8953ea81
commit 0c2a2af308
12 changed files with 270 additions and 159 deletions
@@ -7,6 +7,7 @@ import {
  FolderOutlined,
  RadiusSettingOutlined,
  ControlOutlined,
+  ContainerOutlined,
 } from '@ant-design/icons';

 export default {
@@ -51,7 +52,7 @@ export default {
      {
        path: '/dependence',
        name: '依赖管理',
-        icon: <FormOutlined />,
+        icon: <ContainerOutlined />,
        component: '@/pages/dependence/index',
      },
      {
@@ -26,6 +26,7 @@ export default function (props: any) {
  const [loading, setLoading] = useState<boolean>(true);
  const [systemInfo, setSystemInfo] = useState<{ isInitialized: boolean }>();
  const ws = useRef<any>(null);
+  const [socketMessage, setSocketMessage] = useState<any>();

  const logout = () => {
    request.post(`${config.apiPrefix}logout`).then(() => {
@@ -124,6 +125,7 @@ export default function (props: any) {
  }, []);

  useEffect(() => {
+    if (!user) return;
    ws.current = new SockJS(
      `${location.origin}/api/ws?token=${localStorage.getItem(config.authKey)}`,
    );
@@ -131,11 +133,14 @@ export default function (props: any) {
    ws.current.onmessage = (e: any) => {
      try {
        const data = JSON.parse(e.data);
-        if (data && data.message === 'hanhh') {
-          console.log('websocket连接成功', e);
-        } else {
-          console.log('websocket连接失败', e);
+        if (data.type === 'ping') {
+          if (data && data.message === 'hanhh') {
+            console.log('websocket连接成功', e);
+          } else {
+            console.log('websocket连接失败', e);
+          }
        }
+        setSocketMessage(data);
      } catch (error) {
        console.log('websocket连接失败', e);
      }
@@ -146,7 +151,7 @@ export default function (props: any) {
    return () => {
      wsCurrent.close();
    };
-  }, []);
+  }, [user]);

  if (['/login', '/initialization'].includes(props.location.pathname)) {
    document.title = `${
@@ -246,7 +251,7 @@ export default function (props: any) {
          user,
          reloadUser,
          reloadTheme: setTheme,
-          ws: ws.current,
+          socketMessage,
        });
      })}
    </ProLayout>
@@ -37,6 +37,9 @@ enum Status {
  '安装中',
  '已安装',
  '安装失败',
+  '删除中',
+  '已删除',
+  '删除失败',
 }

 enum StatusColor {
@@ -45,7 +48,7 @@ enum StatusColor {
  'error',
 }

-const Dependence = ({ headerStyle, isPhone, ws }: any) => {
+const Dependence = ({ headerStyle, isPhone, socketMessage }: any) => {
  const columns: any = [
    {
      title: '序号',
@@ -69,7 +72,10 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
      render: (text: string, record: any, index: number) => {
        return (
          <Space size="middle" style={{ cursor: 'text' }}>
-            <Tag color={StatusColor[record.status]} style={{ marginRight: 0 }}>
+            <Tag
+              color={StatusColor[record.status % 3]}
+              style={{ marginRight: 0 }}
+            >
              {Status[record.status]}
            </Tag>
          </Space>
@@ -93,20 +99,21 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
        const isPc = !isPhone;
        return (
          <Space size="middle">
-            {record.status !== Status.安装中 && (
-              <>
-                <Tooltip title={isPc ? '重新安装' : ''}>
-                  <a onClick={() => reInstallDependence(record, index)}>
-                    <BugOutlined />
-                  </a>
-                </Tooltip>
-                <Tooltip title={isPc ? '删除' : ''}>
-                  <a onClick={() => deleteDependence(record, index)}>
-                    <DeleteOutlined />
-                  </a>
-                </Tooltip>
-              </>
-            )}
+            {record.status !== Status.安装中 &&
+              record.status !== Status.删除中 && (
+                <>
+                  <Tooltip title={isPc ? '重新安装' : ''}>
+                    <a onClick={() => reInstallDependence(record, index)}>
+                      <BugOutlined />
+                    </a>
+                  </Tooltip>
+                  <Tooltip title={isPc ? '删除' : ''}>
+                    <a onClick={() => deleteDependence(record, index)}>
+                      <DeleteOutlined />
+                    </a>
+                  </Tooltip>
+                </>
+              )}
            <Tooltip title={isPc ? '日志' : ''}>
              <a
                onClick={() => {
@@ -171,10 +178,7 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
          .delete(`${config.apiPrefix}dependencies`, { data: [record._id] })
          .then((data: any) => {
            if (data.code === 200) {
-              message.success('删除成功');
-              const result = [...value];
-              result.splice(index, 1);
-              setValue(result);
+              handleDependence(data.data[0]);
            } else {
              message.error(data);
            }
@@ -254,13 +258,12 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
  const delDependencies = () => {
    Modal.confirm({
      title: '确认删除',
-      content: <>确认删除选中的变量吗</>,
+      content: <>确认删除选中的依赖吗</>,
      onOk() {
        request
          .delete(`${config.apiPrefix}dependencies`, { data: selectedRowIds })
          .then((data: any) => {
            if (data.code === 200) {
-              message.success('批量删除成功');
              setSelectedRowIds([]);
              getDependencies();
            } else {
@@ -312,25 +315,41 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
  }, [logDependence]);

  useEffect(() => {
-    ws.onmessage = (e: any) => {
-      const { type, message, references } = JSON.parse(e.data);
-      if (
-        type === 'installDependence' &&
-        message === '依赖安装结束' &&
-        references.length > 0
-      ) {
-        const result = [...value];
-        for (let i = 0; i < references.length; i++) {
-          const index = value.findIndex((x) => x._id === references[i]);
-          result.splice(index, 1, {
-            ...result[index],
-            status: Status.已安装,
-          });
-        }
-        setValue(result);
+    if (!socketMessage) return;
+    const { type, message, references } = socketMessage;
+    if (
+      type === 'installDependence' &&
+      message.includes('结束时间') &&
+      references.length > 0
+    ) {
+      let status;
+      if (message.includes('安装')) {
+        status = message.includes('成功') ? Status.已安装 : Status.安装失败;
+      } else {
+        status = message.includes('成功') ? Status.已删除 : Status.删除失败;
      }
-    };
-  }, [value]);
+      const result = [...value];
+      for (let i = 0; i < references.length; i++) {
+        const index = value.findIndex((x) => x._id === references[i]);
+        result.splice(index, 1, {
+          ...result[index],
+          status,
+        });
+      }
+      setValue(result);
+
+      if (status === Status.已删除) {
+        setTimeout(() => {
+          const _result = [...value];
+          for (let i = 0; i < references.length; i++) {
+            const index = value.findIndex((x) => x._id === references[i]);
+            _result.splice(index, 1);
+          }
+          setValue(_result);
+        }, 5000);
+      }
+    }
+  }, [socketMessage]);

  const panelContent = () => (
    <>
@@ -394,13 +413,13 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
        tabPosition="top"
        onChange={onTabChange}
      >
-        <Tabs.TabPane tab="nodejs" key="nodejs">
+        <Tabs.TabPane tab="NodeJs" key="nodejs">
          {panelContent()}
        </Tabs.TabPane>
-        <Tabs.TabPane tab="python3" key="python3">
+        <Tabs.TabPane tab="Python3" key="python3">
          {panelContent()}
        </Tabs.TabPane>
-        <Tabs.TabPane tab="linux" key="linux">
+        <Tabs.TabPane tab="Linux" key="linux">
          {panelContent()}
        </Tabs.TabPane>
      </Tabs>
@@ -412,11 +431,18 @@ const Dependence = ({ headerStyle, isPhone, ws }: any) => {
      />
      <DependenceLogModal
        visible={isLogModalVisible}
-        handleCancel={() => {
+        handleCancel={(needRemove?: boolean) => {
          setIsLogModalVisible(false);
-          getDependenceDetail(logDependence);
+          if (needRemove) {
+            const index = value.findIndex((x) => x._id === logDependence._id);
+            const result = [...value];
+            result.splice(index, 1);
+            setValue(result);
+          } else if ([...value].map((x) => x._id).includes(logDependence._id)) {
+            getDependenceDetail(logDependence);
+          }
        }}
-        ws={ws}
+        socketMessage={socketMessage}
        dependence={logDependence}
      />
    </PageContainer>
@@ -12,21 +12,23 @@ const DependenceLogModal = ({
  dependence,
  handleCancel,
  visible,
-  ws,
+  socketMessage,
 }: {
  dependence?: any;
  visible: boolean;
-  handleCancel: () => void;
-  ws: any;
+  handleCancel: (needRemove?: boolean) => void;
+  socketMessage: any;
 }) => {
  const [value, setValue] = useState<string>('');
  const [executing, setExecuting] = useState<any>(true);
  const [isPhone, setIsPhone] = useState(false);
-  const [loading, setLoading] = useState<any>(true);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [isRemoveFailed, setIsRemoveFailed] = useState(false);
+  const [removeLoading, setRemoveLoading] = useState<boolean>(false);

-  const cancel = () => {
+  const cancel = (needRemove: boolean = false) => {
    localStorage.removeItem('logDependence');
-    handleCancel();
+    handleCancel(needRemove);
  };

  const titleElement = () => {
@@ -49,7 +51,8 @@ const DependenceLogModal = ({
        if (localStorage.getItem('logDependence') === dependence._id) {
          const log = (data.data.log || []).join('\n') as string;
          setValue(log);
-          setExecuting(!log.includes('依赖安装结束'));
+          setExecuting(!log.includes('结束时间'));
+          setIsRemoveFailed(log.includes('删除失败'));
        }
      })
      .finally(() => {
@@ -57,23 +60,48 @@ const DependenceLogModal = ({
      });
  };

+  const forceRemoveDependence = () => {
+    setRemoveLoading(true);
+    request
+      .delete(`${config.apiPrefix}dependencies/force`, {
+        data: [dependence._id],
+      })
+      .then((data: any) => {
+        cancel(true);
+      })
+      .finally(() => {
+        setRemoveLoading(false);
+      });
+  };
+
+  const footerClick = () => {
+    if (isRemoveFailed) {
+      forceRemoveDependence();
+    } else {
+      cancel();
+    }
+  };
+
  useEffect(() => {
    if (dependence) {
      getDependenceLog();
-      ws.onmessage = (e: any) => {
-        const { type, message, references } = JSON.parse(e.data);
-        if (
-          type === 'installDependence' &&
-          message === '依赖安装结束' &&
-          references.length > 0
-        ) {
-          setExecuting(false);
-        }
-        setValue(`${value} \n ${message}`);
-      };
    }
  }, [dependence]);

+  useEffect(() => {
+    if (!socketMessage) return;
+    const { type, message, references } = socketMessage;
+    if (
+      type === 'installDependence' &&
+      message.includes('结束时间') &&
+      references.length > 0
+    ) {
+      setExecuting(false);
+      setIsRemoveFailed(message.includes('删除失败'));
+    }
+    setValue(`${value} \n ${message}`);
+  }, [socketMessage]);
+
  useEffect(() => {
    setIsPhone(document.body.clientWidth < 768);
  }, []);
@@ -93,8 +121,8 @@ const DependenceLogModal = ({
      onOk={() => cancel()}
      onCancel={() => cancel()}
      footer={[
-        <Button type="primary" onClick={() => cancel()}>
-          知道了
+        <Button type="primary" onClick={footerClick} loading={removeLoading}>
+          {isRemoveFailed ? '强制删除' : '知道了'}
        </Button>,
      ]}
    >
@@ -51,9 +51,7 @@ const DependenceModal = ({
          data: payload,
        },
      );
-      if (code === 200) {
-        message.success(dependence ? '更新依赖成功' : '添加依赖成功');
-      } else {
+      if (code !== 200) {
        message.error(data);
      }
      setLoading(false);
@@ -6,8 +6,9 @@ import { version } from '../../version';

 const { Countdown } = Statistic;

-const CheckUpdate = ({ ws }: any) => {
+const CheckUpdate = ({ socketMessage }: any) => {
  const [updateLoading, setUpdateLoading] = useState(false);
+  const [value, setValue] = useState('');
  const modalRef = useRef<any>();

  const checkUpgrade = () => {
@@ -95,7 +96,7 @@ const CheckUpdate = ({ ws }: any) => {
              fontWeight: 400,
            }}
          >
-            更新中...
+            {value}
          </pre>
        </div>
      ),
@@ -103,55 +104,60 @@ const CheckUpdate = ({ ws }: any) => {
  };

  useEffect(() => {
-    let _message = '';
-    ws.onmessage = (e: any) => {
-      if (!modalRef.current) {
-        return;
-      }
-      _message = `${_message}\n${e.data}`;
-      modalRef.current.update({
-        content: (
-          <div style={{ height: '60vh', overflowY: 'auto' }}>
-            <pre
-              style={{
-                wordBreak: 'break-all',
-                whiteSpace: 'pre-wrap',
-                fontSize: 12,
-                fontWeight: 400,
-              }}
-            >
-              {_message}
-            </pre>
-            <div id="log-identifier" style={{ paddingBottom: 5 }}></div>
-          </div>
-        ),
-      });
-      document.getElementById('log-identifier') &&
-        document
-          .getElementById('log-identifier')!
-          .scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    if (!modalRef.current || !socketMessage) {
+      return;
+    }
+    const { type, message, references } = socketMessage;

-      if (e.data.includes('重启面板')) {
-        message.warning({
-          content: (
-            <span>
-              系统将在
-              <Countdown
-                className="inline-countdown"
-                format="ss"
-                value={Date.now() + 1000 * 10}
-              />
-              秒后自动刷新
-            </span>
-          ),
-          duration: 10,
-        });
-        setTimeout(() => {
-          window.location.reload();
-        }, 10000);
-      }
-    };
-  }, []);
+    if (type !== 'updateSystemVersion') {
+      return;
+    }
+
+    const newMessage = `${value} \n ${message}`;
+    modalRef.current.update({
+      content: (
+        <div style={{ height: '60vh', overflowY: 'auto' }}>
+          <pre
+            style={{
+              wordBreak: 'break-all',
+              whiteSpace: 'pre-wrap',
+              fontSize: 12,
+              fontWeight: 400,
+            }}
+          >
+            {newMessage}
+          </pre>
+          <div id="log-identifier" style={{ paddingBottom: 5 }}></div>
+        </div>
+      ),
+    });
+    setValue(newMessage);
+
+    document.getElementById('log-identifier') &&
+      document
+        .getElementById('log-identifier')!
+        .scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+
+    if (newMessage.includes('重启面板')) {
+      message.warning({
+        content: (
+          <span>
+            系统将在
+            <Countdown
+              className="inline-countdown"
+              format="ss"
+              value={Date.now() + 1000 * 10}
+            />
+            秒后自动刷新
+          </span>
+        ),
+        duration: 10,
+      });
+      setTimeout(() => {
+        window.location.reload();
+      }, 10000);
+    }
+  }, [socketMessage]);

  return (
    <>
@@ -47,7 +47,7 @@ const Setting = ({
  user,
  reloadUser,
  reloadTheme,
-  ws,
+  socketMessage,
 }: any) => {
  const columns = [
    {
@@ -377,7 +377,7 @@ const Setting = ({
              />
            </Form.Item>
            <Form.Item label="检查更新" name="update">
-              <CheckUpdate ws={ws} />
+              <CheckUpdate socketMessage={socketMessage} />
            </Form.Item>
          </Form>
        </Tabs.TabPane>