feat: 文件管理优化

web/src/store/modules/file/index.ts

@@ -0,0 +1,17 @@
+export interface File {
+  path: string
+}
+
+export const useFileStore = defineStore('file', {
+  state: (): File => {
+    return {
+      path: '/'
+    }
+  },
+  actions: {
+    set(info: File) {
+      this.path = info.path
+    }
+  },
+  persist: true
+})

web/src/store/modules/index.ts

@@ -1,3 +1,4 @@
+export * from './file'
 export * from './permission'
 export * from './tab'
 export * from './theme'

web/src/views/file/IndexView.vue

@@ -3,6 +3,7 @@ defineOptions({
   name: 'file-index'
 })
 
+import { useFileStore } from '@/store'
 import CompressModal from '@/views/file/CompressModal.vue'
 import ListTable from '@/views/file/ListTable.vue'
 import PathInput from '@/views/file/PathInput.vue'
@@ -10,7 +11,8 @@ import PermissionModal from '@/views/file/PermissionModal.vue'
 import ToolBar from '@/views/file/ToolBar.vue'
 import type { Marked } from '@/views/file/types'
 
-const path = ref('/')
+const fileStore = useFileStore()
+
 const selected = ref<string[]>([])
 const marked = ref<Marked[]>([])
 const markedType = ref<string>('copy')
@@ -22,9 +24,9 @@ const permission = ref(false)
 <template>
   <common-page show-footer>
     <n-flex vertical :size="20">
-      <path-input v-model:path="path" />
+      <path-input v-model:path="fileStore.path" />
       <tool-bar
-        v-model:path="path"
+        v-model:path="fileStore.path"
         v-model:selected="selected"
         v-model:marked="marked"
         v-model:markedType="markedType"
@@ -32,14 +34,18 @@ const permission = ref(false)
         v-model:permission="permission"
       />
       <list-table
-        v-model:path="path"
+        v-model:path="fileStore.path"
         v-model:selected="selected"
         v-model:marked="marked"
         v-model:markedType="markedType"
         v-model:compress="compress"
         v-model:permission="permission"
       />
-      <compress-modal v-model:show="compress" v-model:path="path" v-model:selected="selected" />
+      <compress-modal
+        v-model:show="compress"
+        v-model:path="fileStore.path"
+        v-model:selected="selected"
+      />
       <permission-modal v-model:show="permission" v-model:selected="selected" />
     </n-flex>
   </common-page>

web/src/views/file/ListTable.vue

@@ -102,7 +102,7 @@ const columns: DataTableColumns<RowData> = [
       return h(
         NFlex,
         {
-          class: 'table-name',
+          class: 'cursor-pointer hover:opacity-60',
           onClick: () => {
             if (row.dir) {
               path.value = row.full
@@ -719,14 +719,3 @@ onUnmounted(() => {
     </n-flex>
   </n-modal>
 </template>
-
-<style scoped lang="scss">
-:deep(.table-name) {
-  cursor: pointer;
-}
-
-:deep(.table-name:hover) {
-  color: var(--primary-color);
-  opacity: 0.6;
-}
-</style>

web/src/views/website/IndexView.vue

@@ -12,15 +12,18 @@ import {
   NInput,
   NPopconfirm,
   NSpace,
-  NSwitch
+  NSwitch,
+  NTag
 } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 
 import dashboard from '@/api/panel/dashboard'
 import website from '@/api/panel/website'
+import { useFileStore } from '@/store'
 import { generateRandomString, isNullOrUndef, renderIcon } from '@/utils'
 import type { Website } from './types'
 
+const fileStore = useFileStore()
 const { t } = useI18n()
 const router = useRouter()
 const selectedRowKeys = ref<any>([])
@@ -53,7 +56,20 @@ const columns: any = [
     key: 'path',
     minWidth: 200,
     resizable: true,
-    ellipsis: { tooltip: true }
+    render(row: any) {
+      return h(
+        NTag,
+        {
+          class: 'cursor-pointer hover:opacity-60',
+          type: 'info',
+          onClick: () => {
+            fileStore.path = row.path
+            router.push({ name: 'file-index' })
+          }
+        },
+        { default: () => row.path }
+      )
+    }
   },
   {
     title: 'HTTPS',