feat: 补充提交

config/defaultForm.ts

@@ -2,7 +2,7 @@
  * @Author: zhoux zhouxia@supervision.ltd
  * @Date: 2023-11-13 14:19:57
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-05-13 10:20:45
+ * @LastEditTime: 2024-08-20 10:49:49
  * @FilePath: \general-ai-platform-web\config\defaultForm.ts
  * @Description: 表单类默认字段统一配置
  */
@@ -27,6 +27,9 @@ export const proFormCommonOptions: Record<string, any> = {};
 
 const formBoxMargin = 2 * 24;
 const formItemGap = 12;
+// mini 560
+export const proModalMiniModelWidth: number = 560;
+
 // Small 640
 export const proFormSmallModelWidth: number = 640;
 export const proFormSmallItemStyleProps: Record<string, any> = {

public/icons/背景(1).svg

@@ -0,0 +1,21 @@
+<svg width="113" height="66" viewBox="0 0 113 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2203_10318)">
+<mask id="path-1-inside-1_2203_10318" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C7.79086 2 6 3.79086 6 6V44C6 46.2091 7.79086 48 10 48H49.8L57 56L64.2 48H103C105.209 48 107 46.2091 107 44V6C107 3.79086 105.209 2 103 2H10Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C7.79086 2 6 3.79086 6 6V44C6 46.2091 7.79086 48 10 48H49.8L57 56L64.2 48H103C105.209 48 107 46.2091 107 44V6C107 3.79086 105.209 2 103 2H10Z" fill="white" fill-opacity="0.8" shape-rendering="crispEdges"/>
+<path d="M49.8 48L50.5433 47.331L50.2454 47H49.8V48ZM57 56L56.2567 56.669L57 57.4948L57.7433 56.669L57 56ZM64.2 48V47H63.7546L63.4567 47.331L64.2 48ZM7 6C7 4.34315 8.34315 3 10 3V1C7.23858 1 5 3.23857 5 6H7ZM7 44V6H5V44H7ZM10 47C8.34315 47 7 45.6569 7 44H5C5 46.7614 7.23857 49 10 49V47ZM49.8 47H10V49H49.8V47ZM49.0567 48.669L56.2567 56.669L57.7433 55.331L50.5433 47.331L49.0567 48.669ZM57.7433 56.669L64.9433 48.669L63.4567 47.331L56.2567 55.331L57.7433 56.669ZM103 47H64.2V49H103V47ZM106 44C106 45.6569 104.657 47 103 47V49C105.761 49 108 46.7614 108 44H106ZM106 6V44H108V6H106ZM103 3C104.657 3 106 4.34315 106 6H108C108 3.23858 105.761 1 103 1V3ZM10 3H103V1H10V3Z" fill="white" mask="url(#path-1-inside-1_2203_10318)"/>
+</g>
+<defs>
+<filter id="filter0_d_2203_10318" x="0" y="0" width="113" height="66" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2203_10318"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2203_10318" result="shape"/>
+</filter>
+</defs>
+</svg>

src/app.tsx

@@ -1,4 +1,5 @@
 import { AvatarDropdown, AvatarName, MenuBar } from '@/components';
+import { PackageDeployment } from '@/components/Settings';
 // import fixMenuItemIcon from '@/utils/FixMenuItemIcon';
 import { getAllRouteNameTile, replaceMenuWithRoutesData } from '@/utils/common';
 import { addLocale } from '@@/plugin-locale';
@@ -222,6 +223,7 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
             </div>
             <div className="body_content">
               {children}
+              <PackageDeployment />
               {isDev && (
                 <SettingDrawer
                   disableUrlParams

src/components/Settings/index.ts

@@ -0,0 +1,3 @@
+import packageDeployment from './src/packageDeployment';
+
+export const PackageDeployment = packageDeployment;

src/components/Settings/src/packageDeployment.css

@@ -0,0 +1,56 @@
+.packageDeployment_wrap {
+  position: fixed;
+  top: calc(61.8% - 55px);
+  right: 0;
+  z-index: 999;
+  color: #fff;
+  background: #154ddd;
+  border-radius: 2px;
+}
+.packageDeployment_wrap .packageDeployment_box > li {
+  padding: 8px;
+  font-weight: 500;
+}
+.packageDeployment_wrap .packageDeployment_box > li > div {
+  padding-top: 2px;
+  font-size: 12px;
+}
+.packageDeployment_wrap .packageDeployment_box > li:nth-child(2) {
+  height: 1px;
+  margin: 0;
+  padding: 0;
+}
+.packageDeployment_wrap .packageDeployment_box > li:nth-child(2) > span {
+  display: inline-block;
+  width: 24px;
+  height: 1px;
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, 0.4);
+}
+.package_item_box {
+  padding: 16px 0;
+  /* 打包验证中 */
+  /* 打包错误 */
+}
+.package_item_box.package_loading_box {
+  padding: 25px 0;
+}
+.package_item_box .package_result_box img {
+  width: 88px;
+  height: 88px;
+}
+.package_item_box .warn_content_box {
+  margin-top: 16px;
+  padding: 16px !important;
+  color: #000000;
+  font-weight: 700;
+  font-size: 14px;
+  background: rgba(80, 112, 242, 0.1);
+  border-radius: 4px;
+}
+.package_item_box .warn_content_box > li {
+  padding-bottom: 12px;
+}
+.package_item_box .warn_content_box > li:last-child {
+  padding-bottom: 0;
+}

src/components/Settings/src/packageDeployment.less

@@ -0,0 +1,61 @@
+.packageDeployment_wrap {
+  position: fixed;
+  top: calc(61.8% - 55px);
+  right: 0;
+  z-index: 999;
+  color: #fff;
+  background: #154ddd;
+  border-radius: 2px;
+  .packageDeployment_box {
+    & > li {
+      padding: 8px;
+      font-weight: 500;
+      & > div {
+        padding-top: 2px;
+        font-size: 12px;
+      }
+
+      &:nth-child(2) {
+        height: 1px;
+        margin: 0;
+        padding: 0;
+        & > span {
+          display: inline-block;
+          width: 24px;
+          height: 1px;
+          overflow: hidden;
+          background-color: rgba(255, 255, 255, 0.4);
+        }
+      }
+    }
+  }
+}
+.package_item_box {
+  padding: 16px 0;
+  /* 打包验证中 */
+  &.package_loading_box {
+    padding: 25px 0;
+  }
+  /* 打包错误 */
+  .package_result_box {
+    img {
+      width: 88px;
+      height: 88px;
+    }
+  }
+  .warn_content_box {
+    margin-top: 16px;
+    padding: 16px !important;
+    color: #000000;
+    font-weight: 700;
+    font-size: 14px;
+    background: rgba(80, 112, 242, 0.1);
+    border-radius: 4px;
+    & > li {
+      padding-bottom: 12px;
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+  }
+}

src/components/Settings/src/packageDeployment.tsx

@@ -0,0 +1,222 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-08-19 16:42:40
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-08-20 17:57:10
+ * @FilePath: \general-ai-platform-web\src\components\Animate\src\packageDeployment.tsx
+ * @Description: 打包部署
+ */
+import { apiSystemLog } from '@/services/business/system';
+import { isSuccessApi } from '@/utils/forApi';
+import type { ActionType, ProColumns } from '@ant-design/pro-components';
+import { ProTable } from '@ant-design/pro-components';
+import { FormattedMessage } from '@umijs/max';
+
+import { Modal } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import { proFormSmallModelWidth, proModalMiniModelWidth } from '../../../../config/defaultForm';
+import { proTableDefaultOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
+import './packageDeployment.less';
+import packageLoadingIcon from '/public/images/package_loading.gif';
+import packageWarnIcon from '/public/images/package_warn.png';
+
+type PackageDeploymentProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+// TODO 完善打包的静态交互
+
+const PackageDeployment: React.FC<PackageDeploymentProps> = (props) => {
+  const [isConfigModalOpen, setIsConfigModalOpen] = useState<boolean>(false);
+  const [packageStatus] = useState<string>(''); // loading
+  const [isHistoryModalOpen, setIsHistoryModalOpen] = useState<boolean>(false);
+  const actionRef = useRef<ActionType>();
+
+  //  动态设置每页数量
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
+
+  // const [showDetail, setShowDetail] = useState<boolean>(false);
+  const columns: ProColumns<Record<string, any>>[] = [
+    {
+      title: <FormattedMessage id="server_log.table.list.ip" defaultMessage="$$$" />,
+      dataIndex: 'ip',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="server_log.table.list.updateTime" defaultMessage="$$$" />,
+      dataIndex: 'create_time',
+      hideInSearch: true,
+      valueType: 'dateTime',
+    },
+    {
+      title: <FormattedMessage id="server_log.table.list.name" defaultMessage="$$$" />,
+      dataIndex: 'user',
+      hideInSearch: true,
+    },
+  ];
+  function reloadList() {
+    actionRef.current?.reload();
+  }
+  // 配置打包
+  function configPackage() {
+    console.log('buildPackage');
+    setIsConfigModalOpen(true);
+  }
+
+  // 打包历史
+  function packageHistory() {
+    console.log('packageHistory');
+    setIsHistoryModalOpen(true);
+  }
+
+  // 筛选查询
+  useEffect(() => {
+    if (actionRef) {
+      reloadList();
+    }
+  }, [actionRef]);
+
+  return (
+    <div className={`packageDeployment_wrap '${props?.className}'}'`}>
+      <ul className="text-center cursor-pointer packageDeployment_box">
+        <li className="tc" onClick={configPackage}>
+          <i className="iconfont icon-peizhidabao text-[20px]"></i>
+          <div>配置打包</div>
+        </li>
+        <li className="flex items-center justify-center">
+          <span></span>
+        </li>
+        <li className="tc" onClick={packageHistory}>
+          <i className="iconfont icon-dabaolishi text-[20px]"></i>
+          <div>打包历史</div>
+        </li>
+      </ul>
+      <Modal
+        className="gn_model_steps_form"
+        title={''}
+        width={proModalMiniModelWidth}
+        open={isConfigModalOpen}
+        closable={false}
+        destroyOnClose
+        footer={null} // 这里设置 footer 为 null，隐藏底部按钮
+      >
+        {packageStatus === 'loading' ? (
+          <div className="text-center package_item_box package_loading_box">
+            {/* 加载中 */}
+            <img src={packageLoadingIcon} />
+            <div className="pt-[16px] text1">打包验证中</div>
+          </div>
+        ) : (
+          <div className="package_item_box">
+            {/* 加载失败 */}
+            <div className="text-center package_result_box">
+              <div className="bg_res_icon">
+                <img src={packageWarnIcon} />
+              </div>
+              <div className="head1 leading-[23px] pt-[16px] pb-[7px]">
+                <div className="text-center">打包失败</div>
+              </div>
+              <p>请核对以下信息后重新打包</p>
+            </div>
+            <ul className="warn_content_box">
+              {[
+                {
+                  id: '1',
+                  name: '模型配置',
+                },
+                {
+                  id: '2',
+                  name: '节点配置',
+                },
+                {
+                  id: '3',
+                  name: '服务器配置',
+                },
+              ].map((item) => {
+                return (
+                  <li key={item.id} className="flex items-center">
+                    <i className="iconfont icon-cuowu text-[#E80D0D] text-[16px] pr-[6px] pt-[1.5px]"></i>
+                    <div className="flex items-center">
+                      <span>{item.name}</span>
+                      <span className="text-[#E80D0D]">未完成</span>
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        )}
+      </Modal>
+      <Modal
+        className="gn_model_steps_form"
+        title={'打包历史'}
+        width={proFormSmallModelWidth}
+        open={isHistoryModalOpen}
+        onCancel={() => setIsHistoryModalOpen(false)}
+        destroyOnClose
+        footer={null}
+      >
+        <div
+          className="gn_scroll_list_wrap"
+          style={{ marginTop: 20, maxHeight: 'calc(100vh - 240px)' }}
+        >
+          <ProTable
+            {...proTableDefaultOptions}
+            className="gn_pro_table"
+            cardProps={{
+              bodyStyle: {
+                padding: '0',
+              },
+            }}
+            search={false}
+            options={{ fullScreen: false, setting: false, density: false, reload: false }}
+            actionRef={actionRef}
+            rowKey="id"
+            onDataSourceChange={(data) => {
+              console.log(data, 'onDataSourceChange_data');
+            }}
+            pagination={{
+              ...proTablePaginationOptions,
+              pageSize: currentPageSize,
+              onChange: (pageNo, pageSize) => setCurrentPageSize(pageSize),
+            }}
+            columnsState={{
+              persistenceKey: 'algorithm_model_list',
+              persistenceType: 'localStorage',
+            }}
+            request={async (params = {}, sort) => {
+              const { current, ...rest } = params;
+              const reqParams = {
+                pageNo: current,
+                ...rest,
+              };
+              if (sort && Object.keys(sort).length) {
+                reqParams.orderKey = Object.keys(sort)[0];
+                let sort_select = sort[reqParams.orderKey];
+                reqParams.desc = sort_select === 'descend';
+              }
+              let resp = await apiSystemLog({
+                ...reqParams,
+              });
+              console.log(resp, 'apiSystemLog_resp');
+              if (!isSuccessApi(resp)) {
+                return { data: [], success: true };
+              }
+              return {
+                data: resp.data.data,
+                success: resp.success,
+                total: resp.data.count,
+                current: current,
+                pageSize: currentPageSize,
+              };
+            }}
+            columns={columns}
+          />
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default PackageDeployment;

src/iconfont.css

@@ -1,7 +1,7 @@
 @font-face {
   font-family: "iconfont";
   /* Project id 4530966 */
-  src: url('//at.alicdn.com/t/c/font_4530966_gx8lbf9jsm6.woff2?t=1719539403683') format('woff2'), url('//at.alicdn.com/t/c/font_4530966_gx8lbf9jsm6.woff?t=1719539403683') format('woff'), url('//at.alicdn.com/t/c/font_4530966_gx8lbf9jsm6.ttf?t=1719539403683') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4530966_kv6z63rd2ge.woff2?t=1724147487067') format('woff2'), url('//at.alicdn.com/t/c/font_4530966_kv6z63rd2ge.woff?t=1724147487067') format('woff'), url('//at.alicdn.com/t/c/font_4530966_kv6z63rd2ge.ttf?t=1724147487067') format('truetype');
 }
 .iconfont {
   font-family: "iconfont" !important;
@@ -9,6 +9,21 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.icon-cuowu:before {
+  content: "\e725";
+}
+.icon-dabaolishi:before {
+  content: "\e723";
+}
+.icon-peizhidabao:before {
+  content: "\e724";
+}
+.icon-mima:before {
+  content: "\e720";
+}
+.icon-Frame:before {
+  content: "\e721";
+}
 .icon-a-shujukeshihua21x:before {
   content: "\e608";
 }

src/iconfont.less

@@ -1,8 +1,8 @@
 @font-face {
   font-family: 'iconfont'; /* Project id 4530966 */
-  src: url('//at.alicdn.com/t/c/font_4530966_gx8lbf9jsm6.woff2?t=1719539403683') format('woff2'),
-    url('//at.alicdn.com/t/c/font_4530966_gx8lbf9jsm6.woff?t=1719539403683') format('woff'),
-    url('//at.alicdn.com/t/c/font_4530966_gx8lbf9jsm6.ttf?t=1719539403683') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4530966_kv6z63rd2ge.woff2?t=1724147487067') format('woff2'),
+    url('//at.alicdn.com/t/c/font_4530966_kv6z63rd2ge.woff?t=1724147487067') format('woff'),
+    url('//at.alicdn.com/t/c/font_4530966_kv6z63rd2ge.ttf?t=1724147487067') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-cuowu:before {
+  content: '\e725';
+}
+
+.icon-dabaolishi:before {
+  content: '\e723';
+}
+
+.icon-peizhidabao:before {
+  content: '\e724';
+}
+
+.icon-mima:before {
+  content: '\e720';
+}
+
+.icon-Frame:before {
+  content: '\e721';
+}
+
 .icon-a-shujukeshihua21x:before {
   content: '\e608';
 }

src/pages/User/Login/index.tsx

@@ -292,7 +292,14 @@ const Login: React.FC = () => {
                       name="username"
                       fieldProps={{
                         size: 'large',
-                        prefix: <UserOutlined className={'prefixIcon'} />,
+                        prefix: (
+                          <UserOutlined
+                            style={{
+                              color: token.colorText,
+                            }}
+                            className={'prefixIcon'}
+                          />
+                        ),
                       }}
                       placeholder={'用户名:'}
                       rules={[