修复脚本管理编辑交互，修复ico无法加载

.umirc.ts

@@ -8,7 +8,7 @@ export default defineConfig({
     type: 'none',
   },
   fastRefresh: {},
-  favicon: 'https://qinglong.whyour.cn/g5.ico',
+  favicon: '/images/g5.ico',
   proxy: {
     '/api': {
       target: 'http://127.0.0.1:5678/',

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://github.com/whyour/qinglong">
-    <img width="150" src="https://qinglong.whyour.cn/qinglong.png">
+    <img width="150" src="/images/qinglong.png">
   </a>
 </p>
 

src/layouts/defaultProps.tsx

@@ -69,5 +69,5 @@ export default {
   fixSiderbar: true,
   contentWidth: 'Fixed',
   splitMenus: false,
-  logo: 'https://qinglong.whyour.cn/qinglong.png',
+  logo: '/images/qinglong.png',
 } as any;

src/layouts/index.tsx

@@ -14,8 +14,12 @@ import { request } from '@/utils/http';
 import './index.less';
 import vhCheck from 'vh-check';
 import { version, changeLog } from '../version';
+import { useCtx, useTheme } from '@/utils/hooks';
 
 export default function (props: any) {
+  const ctx = useCtx();
+  const theme = useTheme();
+
   const logout = () => {
     request.post(`${config.apiPrefix}logout`).then(() => {
       localStorage.removeItem(config.authKey);
@@ -107,7 +111,9 @@ export default function (props: any) {
       pageTitleRender={() => '控制面板'}
       {...defaultProps}
     >
-      {props.children}
+      {React.Children.map(props.children, (child) => {
+        return React.cloneElement(child, { ...ctx, ...theme });
+      })}
     </ProLayout>
   );
 }

src/pages/config/index.tsx

@@ -11,16 +11,13 @@ import { PageContainer } from '@ant-design/pro-layout';
 import { request } from '@/utils/http';
 import Editor from '@monaco-editor/react';
 import { Controlled as CodeMirror } from 'react-codemirror2';
-import { useCtx, useTheme } from '@/utils/hooks';
 
-const Config = () => {
+const Config = ({ headerStyle, isPhone, theme }: any) => {
   const [value, setValue] = useState('');
   const [loading, setLoading] = useState(true);
   const [title, setTitle] = useState('config.sh');
   const [select, setSelect] = useState('config.sh');
   const [data, setData] = useState<any[]>([]);
-  const { headerStyle, isPhone } = useCtx();
-  const { theme } = useTheme();
   const editorRef = useRef<any>(null);
 
   const getConfig = (name: string) => {

src/pages/crontab/index.tsx

@@ -31,7 +31,6 @@ import { PageContainer } from '@ant-design/pro-layout';
 import { request } from '@/utils/http';
 import CronModal from './modal';
 import CronLogModal from './logModal';
-import { useCtx, useTheme } from '@/utils/hooks';
 
 const { Text } = Typography;
 const { Search } = Input;
@@ -59,7 +58,7 @@ enum OperationPath {
   'stop',
 }
 
-const Crontab = () => {
+const Crontab = ({ headerStyle, isPhone }: any) => {
   const columns = [
     {
       title: '任务名',
@@ -203,7 +202,6 @@ const Crontab = () => {
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(20);
-  const { headerStyle, isPhone } = useCtx();
 
   const getCrons = () => {
     setLoading(true);

src/pages/diff/index.tsx

@@ -6,14 +6,11 @@ import { request } from '@/utils/http';
 import './index.less';
 import { DiffEditor } from '@monaco-editor/react';
 import ReactDiffViewer from 'react-diff-viewer';
-import { useCtx, useTheme } from '@/utils/hooks';
 
-const Crontab = () => {
+const Diff = ({ headerStyle, isPhone, theme }: any) => {
   const [value, setValue] = useState('');
   const [sample, setSample] = useState('');
   const [loading, setLoading] = useState(true);
-  const { headerStyle, isPhone } = useCtx();
-  const { theme } = useTheme();
   const editorRef = useRef<any>(null);
 
   const getConfig = () => {
@@ -115,4 +112,4 @@ const Crontab = () => {
   );
 };
 
-export default Crontab;
+export default Diff;

src/pages/env/index.tsx

@@ -104,7 +104,7 @@ const DragableBodyRow = ({
   );
 };
 
-const Env = () => {
+const Env = ({ headerStyle, isPhone, theme }: any) => {
   const columns = [
     {
       title: '序号',
@@ -203,7 +203,6 @@ const Env = () => {
   const [editedEnv, setEditedEnv] = useState();
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
   const [searchText, setSearchText] = useState('');
-  const { headerStyle, isPhone } = useCtx();
 
   const getEnvs = () => {
     setLoading(true);

src/pages/log/index.module.less

@@ -14,6 +14,7 @@
     flex: 1;
     overflow: auto;
     border-right: 1px dashed #f0f0f0;
+    padding-top: 6px;
   }
 }
 

src/pages/log/index.tsx

@@ -38,7 +38,7 @@ function getFilterData(keyword: string, data: any) {
   return { tree: data, expandedKeys };
 }
 
-const Log = () => {
+const Log = ({ headerStyle, isPhone, theme }: any) => {
   const [title, setTitle] = useState('请选择日志文件');
   const [value, setValue] = useState('请选择日志文件');
   const [select, setSelect] = useState();
@@ -47,8 +47,6 @@ const Log = () => {
   const [loading, setLoading] = useState(false);
   const [height, setHeight] = useState<number>();
   const treeDom = useRef<any>();
-  const { headerStyle, isPhone } = useCtx();
-  const { theme } = useTheme();
 
   const getLogs = () => {
     setLoading(true);
@@ -86,6 +84,7 @@ const Log = () => {
   };
 
   const onSelect = (value: any, node: any) => {
+    setValue('加载中...');
     setSelect(value);
     setTitle(node.parent || node.value);
     getLog(node);

src/pages/login/index.tsx

@@ -46,7 +46,7 @@ const Login = () => {
             <img
               alt="logo"
               className={styles.logo}
-              src="https://qinglong.whyour.cn/qinglong.png"
+              src="/images/qinglong.png"
             />
             <span className={styles.title}>{config.siteName}</span>
           </div>

src/pages/script/index.module.less

@@ -14,6 +14,7 @@
     flex: 1;
     overflow: auto;
     border-right: 1px dashed #f0f0f0;
+    padding-top: 6px;
   }
 }
 

src/pages/script/index.tsx

@@ -40,7 +40,7 @@ const LangMap: any = {
   '.ts': 'typescript',
 };
 
-const Script = () => {
+const Script = ({ headerStyle, isPhone, theme }: any) => {
   const [title, setTitle] = useState('请选择脚本文件');
   const [value, setValue] = useState('请选择脚本文件');
   const [select, setSelect] = useState<string>();
@@ -51,8 +51,6 @@ const Script = () => {
   const [height, setHeight] = useState<number>();
   const treeDom = useRef<any>();
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
-  const { headerStyle, isPhone } = useCtx();
-  const { theme } = useTheme();
   const [searchValue, setSearchValue] = useState('');
   const [isEditing, setIsEditing] = useState(false);
   const editorRef = useRef<any>(null);
@@ -64,6 +62,7 @@ const Script = () => {
       .then((data) => {
         setData(data.data);
         setFilterData(data.data);
+        onSelect(data.data[0].value, data.data[0]);
       })
       .finally(() => setLoading(false));
   };
@@ -75,6 +74,7 @@ const Script = () => {
   };
 
   const onSelect = (value: any, node: any) => {
+    setValue('加载中...');
     const newMode = LangMap[value.slice(-3)] || '';
     setMode(isPhone && newMode === 'typescript' ? 'javascript' : newMode);
     setSelect(value);
@@ -100,6 +100,12 @@ const Script = () => {
     setIsEditing(true);
   };
 
+  const cancelEdit = () => {
+    setIsEditing(false);
+    setValue('加载中...');
+    getDetail({ value: select });
+  };
+
   const saveFile = () => {
     Modal.confirm({
       title: `确认保存`,
@@ -126,6 +132,7 @@ const Script = () => {
           .then((_data: any) => {
             if (_data.code === 200) {
               message.success(`保存成功`);
+              setIsEditing(false);
             } else {
               message.error(_data);
             }
@@ -177,8 +184,6 @@ const Script = () => {
   useEffect(() => {
     const word = searchValue || '';
     const { tree } = getFilterData(word.toLocaleLowerCase(), data);
-    console.log(word);
-    console.log(tree);
     setFilterData(tree);
     setSelect('');
     setTitle('请选择脚本文件');
@@ -217,6 +222,9 @@ const Script = () => {
               <Button type="primary" onClick={saveFile}>
                 保存
               </Button>,
+              <Button type="primary" onClick={cancelEdit}>
+                退出编辑
+              </Button>,
             ]
           : [
               <Button type="primary" onClick={editFile}>
@@ -255,6 +263,7 @@ const Script = () => {
                   height={height}
                   showLine={{ showLeafIcon: true }}
                   onSelect={onTreeSelect}
+                  defaultSelectedKeys={[data[0] && data[0].key]}
                 ></Tree>
               </div>
             </div>

src/pages/script/saveModal.tsx

@@ -18,7 +18,6 @@ const SaveModal = ({
   const [loading, setLoading] = useState(false);
 
   const handleOk = async (values: any) => {
-    console.log(file.filename);
     setLoading(true);
     const payload = { ...file, ...values };
     request

src/pages/script/setting.tsx

@@ -16,7 +16,6 @@ const SettingModal = ({
   const [loading, setLoading] = useState(false);
 
   const handleOk = async (values: any) => {
-    console.log(file.filename);
     setLoading(true);
     const payload = { ...file, ...values };
     request

src/pages/setting/index.tsx

@@ -18,12 +18,11 @@ const optionsWithDisabled = [
   { label: '跟随系统', value: 'auto' },
 ];
 
-const Password = () => {
+const Password = ({ headerStyle, isPhone }: any) => {
   const [value, setValue] = useState('');
   const [loading, setLoading] = useState(true);
   const defaultDarken = localStorage.getItem('qinglong_dark_theme') || 'auto';
   const [theme, setTheme] = useState(defaultDarken);
-  const { headerStyle, isPhone } = useCtx();
 
   const handleOk = (values: any) => {
     request

src/utils/browser.ts

@@ -155,6 +155,18 @@ export default function browserType() {
         },
   );
 
-  console.log(result);
+  console.log(
+    "%c\n .d88b.  d888888b d8b   db  d888b  db       .d88b.  d8b   db  d888b  \n.8P  Y8.   `88'   888o  88 88' Y8b 88      .8P  Y8. 888o  88 88' Y8b \n88    88    88    88V8o 88 88      88      88    88 88V8o 88 88      \n88    88    88    88 V8o88 88  ooo 88      88    88 88 V8o88 88  ooo \n`8P  d8'   .88.   88  V888 88. ~8~ 88booo. `8b  d8' 88  V888 88. ~8~ \n `Y88'Y8 Y888888P VP   V8P  Y888P  Y88888P  `Y88P'  VP   V8P  Y888P  \n                                                                     \n                                                                     \n",
+    'color: blue;font-size: 14px;',
+  );
+  console.log(
+    '%c忘形雨笠烟蓑，知心牧唱樵歌。明月清风共我，闲人三个，从他今古消磨。\n',
+    'color: yellow;font-size: 18px;',
+  );
+  console.log(
+    `%c青龙运行环境:\n\n系统：${result.system}/${result.systemVs}\n浏览器：${result.supporter}/${result.supporterVs}\n内核：${result.engine}/${result.engineVs}`,
+    'color: green;font-size: 14px;font-weight: bold;',
+  );
+
   return result;
 }

src/utils/hooks.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import browserType from './browser';
 
 export const useCtx = () => {
@@ -6,10 +6,9 @@ export const useCtx = () => {
   const [marginLeft, setMarginLeft] = useState(0);
   const [marginTop, setMarginTop] = useState(-72);
   const [isPhone, setIsPhone] = useState(false);
+  const { platform } = useMemo(() => browserType(), []);
 
   useEffect(() => {
-    const { platform } = browserType();
-
     if (platform === 'mobile' || document.body.offsetWidth < 768) {
       setWidth('auto');
       setMarginLeft(0);