feat: 添加文件快照入口

Author: Flex-7746

frontend/src/App.vue

@@ -6,6 +6,7 @@
 
     <DialogLike />
     <DialogOpen />
+    <DialogCamera />
   </template>
 </template>
 
@@ -17,6 +18,7 @@ import ViewLeft from '@/layout/ViewLeft/LeftBox.vue'
 import ViewRight from '@/layout/ViewRight/RightBox.vue'
 import DialogLike from '@/layout/DialogLike.vue'
 import DialogOpen from '@/layout/DialogOpen.vue'
+import DialogCamera from '@/layout/DialogCamera.vue'
 
 import { useUserStore } from '@/store/user'
 

frontend/src/components/MonacoEditor.vue

@@ -14,7 +14,12 @@
   </div>
 
   <div class="footer">
+    <el-tooltip content="文件快照" placement="bottom">
+      <el-icon class="icon" @click="camera.open(code.path)"><Camera /></el-icon>
+    </el-tooltip>
+
     <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>
@@ -36,11 +41,13 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
 import MonacoEditor from 'monaco-editor-vue3'
+import { Camera } from '@element-plus/icons-vue'
 import * as iconv from 'iconv-lite'
 
 import MdView from '@/components/MdView.vue'
 
 import { useUserStore } from '@/store/user'
+import { useCameraStore } from '@/store/camera2'
 
 import { LANG_OPTIONS, ENCODING_OPTIONS } from '@/utils/option'
 import { getSize } from '@/utils/file'
@@ -52,6 +59,7 @@ const $props = defineProps<{ path: string }>()
 const $emit = defineEmits<{ diff: [v: boolean]; error: [v?: string] }>()
 
 const user = useUserStore()
+const camera = useCameraStore()
 
 const mdView = ref(user.cfg.fileMdView)
 
@@ -112,6 +120,11 @@ onMounted(() => {
     margin: 0;
   }
 
+  > .icon {
+    color: var(--el-text-color-regular);
+    cursor: pointer;
+  }
+
   > .info {
     font-size: 12px;
     line-height: 32px;

frontend/src/layout/DialogCamera.vue

@@ -0,0 +1,15 @@
+<template>
+  <el-dialog v-model="camera.show" :title="`文件快照：${camera.path}`" width="600">
+    <div class="camera-dialog">
+      <div>111</div>
+    </div>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { useCameraStore } from '@/store/camera2'
+
+const camera = useCameraStore()
+</script>
+
+<style lang="scss" scoped></style>

frontend/src/store/camera2.ts

@@ -0,0 +1,19 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCameraStore = defineStore('camera', () => {
+  const show = ref(false)
+
+  const path = ref('')
+
+  return {
+    show,
+
+    path,
+
+    open: (v: string) => {
+      show.value = true
+      path.value = v
+    },
+  }
+})