添加一個(gè)新建文件芥被、編輯文件的功能。實(shí)現(xiàn)一些輕文本的編輯任務(wù)坐榆。
開(kāi)發(fā)
explorer-manage
新建拴魄、編輯都使用 node 的 fs.writeFileSync 方法。
新增三個(gè)方法
- 創(chuàng)建文件
- 獲取文件內(nèi)容
- 寫(xiě)入文件
import fs from 'fs'
export const createFileAction = (path) => {
return fs.writeFileSync(formatPath(path), '')
}
export const getFileContent = (path) => {
return fs.readFileSync(formatPath(path), 'utf-8')
}
export const writeFile = (path, content = '') => {
return fs.writeFileSync(formatPath(path), content)
}
explorer
客戶端使用 @uiw/react-codemirror 這個(gè)代碼編輯器席镀，后續(xù)還可以添加配套的代碼語(yǔ)言支持匹中，方便在線編輯與代碼著色。
當(dāng)點(diǎn)擊 txt|text|xml|html|htm|css|less|sass|json|js|ts|mjs|jsx|py|php|md 這些后綴名的文件時(shí)豪诲，使用彈窗的形式編輯文本內(nèi)容顶捷。
安裝依賴
pnpm install @uiw/react-codemirror
將之前的創(chuàng)建文件夾按鈕變?yōu)楦?dòng)菜單的形式，并添加一個(gè)創(chuàng)建文件的按鈕
Next.js server actions：創(chuàng)建文件
import { createFileAction } from '@/explorer-manager/src/main.mjs'
export const createFile: (file_path: string) => Promise<ActionResType> = (file_path) => {
try {
createFileAction(file_path)
return Promise.resolve({ status: 'ok', message: 'done' })
} catch (err: any) {
return Promise.resolve({ status: 'error', message: JSON.stringify(err?.message) })
}
}
...
const ReaddirExtraActionBtn: React.FC = () => {
const [open, changeOpen] = useState<'folder' | 'file' | undefined>(undefined)
const { update } = useUpdateReaddirList()
return (
<>
<Dropdown
placement="top"
arrow={true}
trigger={['hover', 'click']}
menu={{
items: [
{
key: 'create-folder',
icon: <FolderOutlined />,
label: '創(chuàng)建文件夾',
onClick: () => {
changeOpen('folder')
},
},
{
key: 'create-file',
icon: <FileOutlined />,
label: '創(chuàng)建文件',
onClick: () => {
changeOpen('file')
},
},
{
key: 'reload',
icon: <ReloadOutlined />,
label: '刷新',
onClick: update,
},
],
}}
>
<Button icon={<PlusOutlined />} />
</Dropdown>
<Modal
open={!!open}
onCancel={() => changeOpen(undefined)}
title={open === 'folder' ? '新建文件夾' : '新建文件'}
footer={false}
>
{open === 'folder' ? <CreateFolderForm /> : <CreateFileForm />}
</Modal>
</>
)
}
export default ReaddirExtraActionBtn
open 為 'folder' | 'file' | undefined 對(duì)應(yīng)的創(chuàng)建文件夾屎篱、文件服赎、關(guān)閉彈窗三個(gè)狀態(tài)。
CreateFileForm 組件
'use client'
import React from 'react'
import { App, Flex, Form, Input } from 'antd'
import SubmitBtn from '@/components/submit-btn'
import { createFile } from '@/components/readdir-extra-action-btn/action'
import { useUpdateReaddirList } from '@/app/path/readdir-context'
import { useReplacePathname } from '@/components/use-replace-pathname'
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo)
}
const CreateFileForm: React.FC = () => {
const { update } = useUpdateReaddirList()
const { message: appMessage } = App.useApp()
const { replace_pathname } = useReplacePathname()
return (
<Form
labelCol={{ span: 2 }}
initialValues={{ file_name: '新建文件.txt' }}
onFinish={(values) => {
const { file_name } = values
createFile([replace_pathname, file_name].join('/'))
.then(({ status, message }) => {
if (status === 'error') {
return Promise.reject({ status, message })
}
update()
appMessage.success('新建文件成功').then()
})
.catch(({ message }) => {
appMessage.error(`新建文件失敗: ${message}`).then()
})
}}
onFinishFailed={onFinishFailed}
>
<Form.Item name="file_name" rules={[{ required: true, message: '請(qǐng)輸入文名稱' }]}>
<Input />
</Form.Item>
<Form.Item>
<Flex justify="flex-end">
<SubmitBtn>創(chuàng)建</SubmitBtn>
</Flex>
</Form.Item>
</Form>
)
}
export default CreateFileForm
簡(jiǎn)單的 form 表單交播。提交時(shí)調(diào)用 createFile server action 方法創(chuàng)建文件重虑。
Next.js server actions：獲取文件內(nèi)容與寫(xiě)入文件內(nèi)容
'use server'
import { getFileContent, writeFile } from '@/explorer-manager/src/main.mjs'
export const getEditFileContentAction: (path: string) => Promise<string> = (path) => {
return new Promise((res, rej) => {
try {
res(getFileContent(path))
} catch (e) {
rej(e)
}
})
}
export const writeFileAction: (path: string, content: string) => Promise<string> = (path, content) => {
return new Promise((res, rej) => {
try {
writeFile(path, content)
res('done')
} catch (e) {
rej(e)
}
})
}
創(chuàng)建上下文組件
'use client'
import createCtx from '@/lib/create-ctx'
import React from 'react'
import EditFileModal from '@/components/edit-file/modal'
export const EditFileContext = createCtx<string>('')
export const EditFileProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
return (
<EditFileContext.ContextProvider value={''}>
{children}
<EditFileModal />
</EditFileContext.ContextProvider>
)
}
編輯彈窗組件
'use client'
import React, { useRef } from 'react'
import CodeMirror from '@uiw/react-codemirror'
import { EditFileContext } from '@/components/edit-file/edit-file-context'
import { Button, Card, Flex, Modal, Space } from 'antd'
import { useRequest } from 'ahooks'
import { getEditFileContentAction, writeFileAction } from '@/components/edit-file/action'
const EditContent: React.FC = () => {
const edit_file_path = EditFileContext.useStore()
const { data, loading } = useRequest(() => getEditFileContentAction(edit_file_path))
const file_content = useRef<string>('')
const editFileDispatch = EditFileContext.useDispatch()
return (
<Space direction="vertical" style={{ width: '100%' }}>
<Card loading={loading} bordered={false}>
<CodeMirror
value={data}
maxHeight={'60vh'}
minHeight={'15em'}
theme="dark"
onChange={(value) => {
file_content.current = value
}}
/>
</Card>
<Flex justify="end">
<Button
onClick={() => {
writeFileAction(edit_file_path, file_content.current).then(() => {
editFileDispatch('')
})
}}
>
保存
</Button>
</Flex>
</Space>
)
}
const EditFileModal = () => {
const edit_file_path = EditFileContext.useStore()
const editFileDispatch = EditFileContext.useDispatch()
return (
<Modal
title={decodeURIComponent(edit_file_path.split('/').pop() || '')}
width="75%"
footer={null}
destroyOnClose={true}
open={!!edit_file_path}
onCancel={() => {
editFileDispatch('')
}}
>
<EditContent />
</Modal>
)
}
export default EditFileModal
這里使用的 server action，減少了 http api 的編輯與對(duì)接的過(guò)程秦士。開(kāi)發(fā)人員不用太多關(guān)注 xhr/fetch 的動(dòng)作缺厉。可以更專注的在代碼邏輯上隧土。
默認(rèn)情況下提针，server action 的提交大小為 1MB 大小。參考鏈接 server actions：bodysizelimit 可通過(guò)編輯 bodysizelimit 參數(shù)實(shí)現(xiàn)增大縮小最大提交量次洼。
效果
截屏2023-12-25 10.29.21.png
截屏2023-12-25 10.19.22.png
截屏2023-12-25 10.18.16.png
