feat: Add file action button group

package.json

@@ -33,7 +33,8 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.3.1",
     "semver": "^7.5.4",
-    "swr": "^2.2.0"
+    "swr": "^2.2.0",
+    "zustand": "^5.0.9"
   },
   "repository": "https://github.com/cnpm/cnpmweb.git",
   "devDependencies": {

src/components/CodeViewer.tsx

@@ -4,8 +4,9 @@ import loader from '@monaco-editor/loader';
 import { File, useFileContent } from '@/hooks/useFile';
 import useHighlightHash, { parseHash } from '@/hooks/useHighlightHash';
 import { useThemeMode } from 'antd-style';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { REGISTRY } from '@/config';
+import { FileActions } from './FileActions';
 
 const LinkField = ['devDependencies', 'dependencies', 'peerDependencies', 'optionalDependencies', 'bundleDependencies'];
 
@@ -25,11 +26,11 @@ function highlightEditor(editor: any) {
 function registerLinkProvider(monaco: any) {
   monaco.languages.registerLinkProvider('json', {
     provideLinks: (model: any) => {
-      const links:any= [];
+      const links: any = [];
       const lines = model.getLinesContent();
       let startCatch = false;
       lines.forEach((line: string, lineIndex: number) => {
-        if (LinkField.some( _ => line === `  "${_}": {`)) {
+        if (LinkField.some(_ => line === `  "${_}": {`)) {
           startCatch = true;
           return;
         }
@@ -69,7 +70,7 @@ export const CodeViewer = ({
   const editorRef = useRef<any>(null);
   const { themeMode: theme } = useThemeMode();
 
-  const { data: code } = useFileContent({ fullname: pkgName, spec }, selectedFile?.path || '');
+  const [{ data: code }, { fileUri }] = useFileContent({ fullname: pkgName, spec }, selectedFile?.path || '');
 
   let language = selectedFile?.path.split('.').pop();
   if (language === 'js' || language === 'jsx' || language === 'map') language = 'javascript';
@@ -86,6 +87,19 @@ export const CodeViewer = ({
     }
   };
 
+  // inject file info to FileActions store
+  useEffect(() => {
+    FileActions.setStore({
+      rawUrl: fileUri,
+      fileContent: code
+    });
+
+    return function cleanup() {
+      FileActions.restoreStore();
+    }
+  }, [fileUri, code])
+
+
   if (!selectedFile) return <></>;
 
   return (

src/components/CustomTabs.tsx

@@ -1,9 +1,10 @@
 'use client';
-import { Tabs } from 'antd';
+import { Flex, Space, Tabs } from 'antd';
 import Link from 'next/link';
 import NPMVersionSelect from './NPMVersionSelect';
 import { PackageManifest } from '@/hooks/useManifest';
 import { useRouter } from 'next/router';
+import { FileActions } from './FileActions';
 
 const presetTabs = [
   {
@@ -44,20 +45,23 @@ export default function CustomTabs({
       activeKey={activateKey}
       type={'line'}
       tabBarExtraContent={
-        <NPMVersionSelect
-          versions={Object.keys(pkg?.versions || {})}
-          tags={pkg?.['dist-tags']}
-          targetVersion={targetVersion}
-          setVersionStr={(v) => {
-            if (v === pkg?.['dist-tags']?.latest) {
-              push(`/package/${pkg.name}/${activateKey}`, undefined, { shallow: true });
-            } else {
-              push(`/package/${pkg.name}/${activateKey}?version=${v}`, undefined, {
-                shallow: true,
-              });
-            }
-          }}
-        />
+        <Flex gap="small" style={{ marginInlineEnd: 16 }}>
+          {activateKey === 'files' && <FileActions />}
+          <NPMVersionSelect
+            versions={Object.keys(pkg?.versions || {})}
+            tags={pkg?.['dist-tags']}
+            targetVersion={targetVersion}
+            setVersionStr={(v) => {
+              if (v === pkg?.['dist-tags']?.latest) {
+                push(`/package/${pkg.name}/${activateKey}`, undefined, { shallow: true });
+              } else {
+                push(`/package/${pkg.name}/${activateKey}?version=${v}`, undefined, {
+                  shallow: true,
+                });
+              }
+            }}
+          />
+        </Flex>
       }
       items={presetTabs.map((tab) => {
         return {

src/components/FileActions.tsx

@@ -0,0 +1,80 @@
+import { CopyOutlined, DownloadOutlined } from "@ant-design/icons";
+import { Button, Space, Tooltip, message } from "antd";
+import { isEmpty } from "lodash";
+import { create } from 'zustand'
+import { devtools } from 'zustand/middleware'
+import { useShallow } from 'zustand/react/shallow'
+
+// #region Store
+interface IState {
+  rawUrl: string;
+  fileContent: string;
+}
+
+const initialState: IState = {
+  rawUrl: '',
+  fileContent: '',
+};
+
+const setStore = (state: Partial<IState>) =>
+  useFileActionsStore.setState(state, false, 'FileActions/setStore')
+
+const restoreStore = () =>
+  useFileActionsStore.setState(initialState, false, 'FileActions/restoreStore')
+
+const useFileActionsStore = create<IState>()(
+  devtools(() => initialState, { name: 'FileActions' })
+);
+// #endregion Store
+
+// ===========================================================================
+
+// #region Component
+function InnerFileActions() {
+  const state = useFileActionsStore(useShallow(s => s));
+
+  function handleCopyRaw() {
+    if (!state.fileContent) return;
+    navigator.clipboard.writeText(state.fileContent);
+    message.success('Copied to clipboard');
+  }
+
+  function handleDownloadRaw() {
+    if (!state.fileContent) return;
+    const blob = new Blob([state.fileContent], { type: 'text/plain' });
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = state.rawUrl.split('/').pop() || 'file';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+  }
+
+  function handleViewRaw() {
+    if (!state.rawUrl) return;
+    window.open(state.rawUrl, '_blank', 'noopener,noreferrer');
+  }
+
+  // ========== render =========
+  if (Object.values(state).some(isEmpty)) return null
+
+  return (
+    <Space.Compact block>
+      <Button size="small" onClick={handleViewRaw}>Raw</Button>
+      <Tooltip title="Copy raw file">
+        <Button size="small" icon={<CopyOutlined />} onClick={handleCopyRaw} />
+      </Tooltip>
+      <Tooltip title="Download raw file">
+        <Button size="small" icon={<DownloadOutlined />} onClick={handleDownloadRaw} />
+      </Tooltip>
+    </Space.Compact>
+  )
+}
+
+export const FileActions = Object.assign(InnerFileActions, {
+  setStore,
+  restoreStore,
+});
+// #endregion Component

src/components/NPMVersionSelect.tsx

@@ -137,9 +137,11 @@ export default function NPMVersionSelect({
     return null;
   }
 
-  // 版本选择器
-  return !isEmpty(targetOptions) ? (
-    <Space style={{ paddingRight: 32 }}>
+  // ========== render ==========
+  if (isEmpty(targetOptions)) return null
+
+  return (
+    <>
       <Cascader
         size="small"
         options={targetOptions}
@@ -164,6 +166,6 @@ export default function NPMVersionSelect({
         }}
         showSearch
       />
-    </Space>
-  ) : null;
+    </>
+  )
 }

src/hooks/useFile.ts

@@ -63,9 +63,11 @@ export const useDirs = (info: PkgInfo, path = '', ignore = false) => {
 };
 
 export const useFileContent = (info: PkgInfo, path: string) => {
-  return useSwr(`file: ${info.fullname}_${info.spec || 'latest'}_${path}`, async () => {
-    return fetch(`${REGISTRY}/${info.fullname}/${info.spec}/files${path}`).then((res) =>
-      res.text(),
-    );
-  });
+  const swrKey = `file: ${info.fullname}_${info.spec || 'latest'}_${path}`;
+  const fileUri = `${REGISTRY}/${info.fullname}/${info.spec || 'latest'}/files${path}`;
+
+  return [
+    useSwr(swrKey, () => fetch(fileUri).then((res) => res.text())),
+    { fileUri }
+  ] as const;
 };