脚本管理增加强制打开文件操作

src/pages/script/components/UnsupportedFilePreview/index.module.less

@@ -0,0 +1,67 @@
+.container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--background-color);
+  padding: 16px;
+}
+
+.content {
+  text-align: center;
+  background: var(--card-background);
+  padding: 24px;
+  border-radius: 12px;
+  max-width: 360px;
+  width: 100%;
+  transition: all 0.3s ease;
+}
+
+.iconWrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--background-color);
+  margin-bottom: 16px;
+}
+
+.icon {
+  font-size: 32px;
+  color: var(--text-color-secondary);
+}
+
+.message {
+  font-size: 16px;
+  color: var(--text-color);
+  margin-bottom: 16px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.actionArea {
+  width: 100%;
+}
+
+.button {
+  min-width: 140px;
+  height: 36px;
+  font-size: 14px;
+}
+
+.warning {
+  font-size: 13px;
+  color: var(--text-color-secondary);
+  line-height: 1.5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.warningIcon {
+  font-size: 14px;
+  color: #faad14;
+} 

src/pages/script/components/UnsupportedFilePreview/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+import { FileUnknownOutlined, WarningOutlined } from '@ant-design/icons';
+import intl from 'react-intl-universal';
+import styles from './index.module.less';
+
+interface UnsupportedFilePreviewProps {
+  onForceOpen: () => void;
+}
+
+const UnsupportedFilePreview: React.FC<UnsupportedFilePreviewProps> = ({
+  onForceOpen,
+}) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <div className={styles.iconWrapper}>
+          <FileUnknownOutlined className={styles.icon} />
+        </div>
+        <div className={styles.message}>
+          {intl.get('当前文件不支持预览')}
+        </div>
+        <Space direction="vertical" size={8} className={styles.actionArea}>
+          <Button 
+            type="primary" 
+            onClick={onForceOpen}
+            className={styles.button}
+          >
+            {intl.get('强制打开')}
+          </Button>
+          <div className={styles.warning}>
+            <WarningOutlined className={styles.warningIcon} />
+            {intl.get('强制打开可能会导致编辑器显示异常')}
+          </div>
+        </Space>
+      </div>
+    </div>
+  );
+};
+
+export default UnsupportedFilePreview; 

src/pages/script/index.tsx

@@ -43,6 +43,7 @@ import EditModal from './editModal';
 import EditScriptNameModal from './editNameModal';
 import styles from './index.module.less';
 import RenameModal from './renameModal';
+import UnsupportedFilePreview from './components/UnsupportedFilePreview';
 const { Text } = Typography;
 
 const Script = () => {
@@ -63,6 +64,7 @@ const Script = () => {
     useState(false);
   const [currentNode, setCurrentNode] = useState<any>();
   const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
+  const [showMonaco, setShowMonaco] = useState(true);
 
   const handleIsEditing = (filename: string, value: boolean) => {
     setIsEditing(value && canPreviewInMonaco(filename));
@@ -82,7 +84,7 @@ const Script = () => {
       .finally(() => needLoading && setLoading(false));
   };
 
-  const getDetail = (node: any) => {
+  const getDetail = (node: any, options: any = {}) => {
     request
       .get(
         `${config.apiPrefix}scripts/detail?file=${encodeURIComponent(
@@ -92,6 +94,9 @@ const Script = () => {
       .then(({ code, data }) => {
         if (code === 200) {
           setValue(data);
+          if (options.callback) {
+            options.callback();
+          }
         }
       });
   };
@@ -126,7 +131,7 @@ const Script = () => {
       if (item) {
         obj.node = item;
         setExpandedKeys([p as string]);
-        onTreeSelect([vkey], obj);
+        onSelect([vkey], obj);
       }
     }
   };
@@ -141,18 +146,27 @@ const Script = () => {
 
     if (node.type === 'directory') {
       setValue(intl.get('请选择脚本文件'));
+      setShowMonaco(true);
       return;
     }
 
     if (!canPreviewInMonaco(node.title)) {
-      setValue(intl.get('当前文件不支持预览'));
+      setShowMonaco(false);
       return;
     }
 
+    setShowMonaco(true);
     const newMode = getEditorMode(value);
     setMode(isPhone && newMode === 'typescript' ? 'javascript' : newMode);
     setValue(intl.get('加载中...'));
-    getDetail(node);
+
+    getDetail(node, {
+      callback: () => {
+        if (isEditing) {
+          setIsEditing(true);
+        }
+      },
+    });
   };
 
   const onTreeSelect = useCallback(
@@ -161,20 +175,20 @@ const Script = () => {
       if (node.key === select && isEditing) {
         return;
       }
-      const content = editorRef.current
+
+      const currentContent = editorRef.current
         ? editorRef.current.getValue().replace(/\r\n/g, '\n')
         : value;
-      if (content !== value) {
+      const originalContent = value.replace(/\r\n/g, '\n');
+
+      if (currentContent !== originalContent && isEditing) {
         Modal.confirm({
-          title: `确认离开`,
-          content: <>{intl.get('当前修改未保存，确定离开吗')}</>,
+          title: intl.get('确认离开'),
+          content: <>{intl.get('当前文件未保存，确认离开吗')}</>,
           onOk() {
             onSelect(keys[0], e.node);
             handleIsEditing(e.node.title, false);
           },
-          onCancel() {
-            console.log('Cancel');
-          },
         });
       } else {
         handleIsEditing(e.node.title, false);
@@ -268,9 +282,6 @@ const Script = () => {
             .catch((e) => reject(e));
         });
       },
-      onCancel() {
-        console.log('Cancel');
-      },
     });
   };
 
@@ -320,9 +331,6 @@ const Script = () => {
             }
           });
       },
-      onCancel() {
-        console.log('Cancel');
-      },
     });
   };
 
@@ -493,7 +501,7 @@ const Script = () => {
             label: intl.get('编辑'),
             key: 'edit',
             icon: <EditOutlined />,
-            disabled: !currentNode || !canPreviewInMonaco(currentNode?.title),
+            disabled: !currentNode,
           },
           {
             label: intl.get('重命名'),
@@ -514,6 +522,20 @@ const Script = () => {
         },
       };
 
+  const handleForceOpen = () => {
+    if (!currentNode) return;
+
+    setMode('plaintext');
+    setValue(intl.get('加载中...'));
+    setShowMonaco(true);
+
+    getDetail(currentNode, {
+      callback: () => {
+        setIsEditing(true);
+      },
+    });
+  };
+
   return (
     <PageContainer
       className="ql-container-wrapper log-wrapper"
@@ -575,9 +597,7 @@ const Script = () => {
               </Tooltip>,
               <Tooltip title={intl.get('编辑')}>
                 <Button
-                  disabled={
-                    !currentNode || !canPreviewInMonaco(currentNode?.title)
-                  }
+                  disabled={!currentNode}
                   type="primary"
                   onClick={editFile}
                   icon={<EditOutlined />}
@@ -666,21 +686,28 @@ const Script = () => {
                 </div>
               )}
             </div>
-            <Editor
-              language={mode}
-              value={value}
-              theme={theme}
-              options={{
-                readOnly: !isEditing,
-                fontSize: 12,
-                lineNumbersMinChars: 3,
-                glyphMargin: false,
-                accessibilitySupport: 'off',
-              }}
-              onMount={(editor) => {
-                editorRef.current = editor;
-              }}
-            />
+            {showMonaco ? (
+              <Editor
+                language={mode}
+                value={value}
+                theme={theme}
+                options={{
+                  readOnly: !isEditing,
+                  fontSize: 12,
+                  lineNumbersMinChars: 3,
+                  glyphMargin: false,
+                  accessibilitySupport: 'off',
+                }}
+                onMount={(editor) => {
+                  editorRef.current = editor;
+                }}
+              />
+            ) : (
+              <UnsupportedFilePreview
+                filename={currentNode?.title || ''}
+                onForceOpen={handleForceOpen}
+              />
+            )}
           </SplitPane>
         )}
         {isPhone && (