feat: 显示字数、文件大小、最后更新日期

Author: Flex-7746

backend/src/cgi.js

@@ -76,6 +76,7 @@ async function main() {
     if (type) {
       console.log(`Content-Type: ${type}`);
       console.log(`Content-Length: ${body.size}`);
+      console.log(`Last-Modified: ${body.time}`);
       console.log("");
       body.stream.pipe(process.stdout);
     } else {

backend/src/koa.js

@@ -22,6 +22,7 @@ app.use(async (ctx) => {
   if (type) {
     ctx.set("Content-Type", type);
     ctx.set("Content-Length", body.size);
+    ctx.set("Last-Modified", body.time);
     ctx.body = body.stream;
   } else {
     ctx.set("Content-Type", "application/json; charset=utf-8");

backend/src/router/read.js

@@ -24,7 +24,6 @@ module.exports = async function read({ query }) {
       console.log(
         `Expires: ${new Date(Date.now() + maxAge * 1000).toUTCString()}`
       );
-      console.log(`Last-Modified: ${stat.mtime.toUTCString()}`);
       console.log(`ETag: "${stat.size}-${stat.mtime.getTime()}"`);
     }
 
@@ -33,6 +32,7 @@ module.exports = async function read({ query }) {
       msg: "操作成功",
       data: {
         size: stat.size,
+        time: stat.mtime.toUTCString(),
         filename: path.split("/").pop(),
         stream: fs.createReadStream(path),
       },

backend/src/router/save.js

@@ -30,7 +30,13 @@ module.exports = async function read({ body }) {
 
     fs.writeFileSync(path, iconv.encode(value, encode));
 
-    return { code: 200, msg: "操作成功", data: null };
+    const stat = fs.statSync(path);
+
+    return {
+      code: 200,
+      msg: "操作成功",
+      data: { size: stat.size, time: stat.mtime.toUTCString() },
+    };
   } catch (err) {
     if (err.code === "EACCES") {
       return { code: 401, msg: "权限不足，无法写入文件", data: body };

frontend/src/components/MonacoEditor.vue

@@ -14,10 +14,13 @@
   </div>
 
   <div class="footer">
-    <div class="developed">Developed by Flex_7746</div>
+    <div class="info" v-if="code.date">修改时间：{{ code.date.format('YYYY/MM/DD HH:mm:ss') }}</div>
+    <div class="info" v-if="code.byte !== undefined">文件大小：{{ getSize(code.byte) }}</div>
 
     <div style="flex: 1"></div>
 
+    <div class="info">{{ code.value.length }} 个字符</div>
+
     <el-switch
       v-if="code.lang === 'markdown'"
       v-model="mdView"
@@ -70,6 +73,7 @@ import MdView from '@/components/MdView.vue'
 import { useUserStore } from '@/store/user'
 
 import { LANG_OPTIONS, ENCODING_OPTIONS } from '@/utils/option'
+import { getSize } from '@/utils/file'
 
 import useCode from '../hooks/useCode'
 import useEditor from '../hooks/useEditor'
@@ -81,7 +85,7 @@ const user = useUserStore()
 
 const mdView = ref(user.cfg.fileMdView)
 
-const showMdView = computed(() => code.lang === 'markdown' && mdView)
+const showMdView = computed(() => code.lang === 'markdown' && mdView.value)
 
 defineExpose({
   save: () => save(),
@@ -130,15 +134,15 @@ onMounted(() => {
   border-top: solid 1px var(--el-border-color);
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
   padding: 0 4px;
   background-color: var(--el-bg-color);
 
   > * {
     margin: 0;
   }
 
-  > .developed {
+  > .info {
     font-size: 12px;
     line-height: 32px;
     color: var(--el-text-color-placeholder);

frontend/src/hooks/useCode.ts

@@ -1,5 +1,5 @@
 import { reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
 import axios from 'axios'
 
 import { HOST } from '@/utils/env'
@@ -21,6 +21,8 @@ interface CodeModel {
   value: string
   lang: string
   encode: string
+  byte?: number
+  date?: dayjs.Dayjs
 }
 
 export default function useCode(option: OptionModel) {
@@ -42,7 +44,7 @@ export default function useCode(option: OptionModel) {
         return ''
       }
 
-      const { data } = await axios.get(HOST, {
+      const { data, headers } = await axios.get(HOST, {
         params: { _api: 'read', path },
         responseType: 'blob',
       })
@@ -53,10 +55,11 @@ export default function useCode(option: OptionModel) {
         return
       }
 
-      code.blob = data
+      code.byte = headers['content-length'] ? Number(headers['content-length']) : undefined
+      code.date = headers['last-modified'] ? dayjs(headers['last-modified']) : undefined
 
+      code.blob = data
       code.path = path
-
       code.org = code.value = await data.text()
 
       const filename = path.split('/').pop() || ''
@@ -91,7 +94,11 @@ export default function useCode(option: OptionModel) {
 
   const upload = async (force?: 1) => {
     try {
-      const { data: value }: any = await axios.post(
+      const { data: value } = await axios.post<{
+        code: number
+        msg: string
+        data: { size: number; time: string }
+      }>(
         HOST,
         {
           encode: code.encode,
@@ -105,6 +112,9 @@ export default function useCode(option: OptionModel) {
       if (value.code === 200) {
         ElMessage({ type: 'success', message: '操作成功' })
 
+        code.byte = value.data.size
+        code.date = dayjs(value.data.time)
+
         code.org = code.value
 
         option.onSave()

frontend/src/utils/file.ts

@@ -1,6 +1,6 @@
 import { HOST } from '@/utils/env'
 
-export const getFileName = (v: string) => (v.split('/').pop() || '').toLocaleLowerCase()
+export const getFileName = (v: string) => v.split('/').pop() || ''
 
 export const getFileSuffix = (v: string) => (v.split('.').pop() || '').toLocaleLowerCase()
 
@@ -12,6 +12,29 @@ export const getFullPath = (path: string) => {
   return `${HOST}?_api=read&path=${encodeURIComponent(path)}`
 }
 
+export const getSize = (byte: number) => {
+  if (byte < 1024) {
+    return `${byte} B`
+  }
+
+  const KB = byte / 1024
+  if (KB < 1024) {
+    return `${Number(KB.toFixed(2))} KB`
+  }
+
+  const MB = KB / 1024
+  if (MB < 1024) {
+    return `${Number(MB.toFixed(2))} MB`
+  }
+
+  const TB = MB / 1024
+  if (TB < 1024) {
+    return `${Number(TB.toFixed(2))} TB`
+  }
+
+  return ''
+}
+
 export async function isBinaryContent(blob: Blob) {
   const slice = blob.slice(0, 1024)
   const arrayBuffer = await slice.arrayBuffer()