404

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RouterView } from "vue-router";
+  import { RouterView } from "vue-router";
 </script>
 
 <template>

src/main.ts

@@ -1,22 +1,22 @@
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import App from './App.vue'
-import router from './router'
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-import '@/assets/global.css'
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import App from "./App.vue";
+import router from "./router";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import "@/assets/global.css";
+import { useFilesStore } from "@/stores/index";
 
-
-
-const app = createApp(App)
+const app = createApp(App);
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-    app.component(key, component)
+  app.component(key, component);
 }
 
-app.use(ElementPlus)
-app.use(createPinia().use(piniaPluginPersistedstate))
-app.use(router)
+app.use(ElementPlus);
+app.use(createPinia().use(piniaPluginPersistedstate));
+app.use(router);
+app.provide("filesStore", useFilesStore());
 
-app.mount('#app')
+app.mount("#app");

src/router/index.ts

@@ -1,12 +1,17 @@
+import NotFound from "@/views/404/NotFound.vue";
 import { createRouter, createWebHistory } from "vue-router";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: "/",
-      component: import("@/views/layout/layoutContainer.vue"),
+      component: () => import("@/views/dashboard/layout.vue"),
     },
+    {
+      path:"/404",
+      component: ()=> import("@/views/404/NotFound.vue"),
+    }
     // {
     //   path: '/about',
     //   name: 'about',

src/stores/index.ts

@@ -0,0 +1,2 @@
+export * from "./modules/files";
+export * from "./modules/user";

src/stores/modules/files.ts

@@ -0,0 +1,27 @@
+import { defineStore } from "pinia";
+import { ref, type Ref, computed, type ComputedRef } from "vue";
+import { type file } from "@/stores/type";
+export const useFilesStore = defineStore(
+  "files",
+  () => {
+    const Files: Ref<file[]> = ref([]);
+    const clearFiles = () => {
+      Files.value = [];
+    };
+    const setFiles = (files: file[]) => {
+      Files.value = files;
+    };
+    const isEmpty: ComputedRef<boolean> = computed(() => {
+      return Files.value.length === 0;
+    });
+    return {
+      Files,
+      isEmpty,
+      clearFiles,
+      setFiles,
+    };
+  },
+  {
+    persist: true,
+  }
+);

src/stores/modules/user.ts

@@ -1,25 +1,23 @@
-import { defineStore } from 'pinia'
-import { ref, type Ref } from 'vue'
+import { defineStore } from "pinia";
+import { ref, type Ref } from "vue";
 
 export const useUserStore = defineStore(
-    'user',
-    () => {
-        const token: Ref<string> = ref("")
-        const setToken = (newToken: string) => {
-            token.value = newToken;
-        };
-        const removeToken = () => {
-            token.value = "";
-        };
-        return {
-            token,
-            setToken,
-            removeToken,
-
-        }
-
-    },
-    {
-        persist: true,
-    }
-)
+  "user",
+  () => {
+    const token: Ref<string> = ref("");
+    const setToken = (newToken: string) => {
+      token.value = newToken;
+    };
+    const removeToken = () => {
+      token.value = "";
+    };
+    return {
+      token,
+      setToken,
+      removeToken,
+    };
+  },
+  {
+    persist: true,
+  }
+);

src/stores/type.ts

@@ -0,0 +1,22 @@
+export interface option {
+  name: string;
+  icon: any;
+  click: Function;
+}
+/**
+ *
+ *
+ * @export
+ * @interface file
+ */
+export interface file {
+  name: string;
+  isFolder: boolean;
+  updateTime: string;
+  id: string;
+  fileType: string;
+  size: number;
+  icon: any;
+  isVisible: boolean;
+  options: option[];
+}

src/views/404/NotFound.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="not-found">
+        <el-card class="not-found-card" shadow="hover">
+            <el-image src="../src/assets/404.jpg" fit="cover" class="not-found-image" />
+            <h1 class="not-found-title">页面未找到</h1>
+            <p class="not-found-description">抱歉，您访问的页面不存在。</p>
+            <el-button type="primary" @click="goHome" class="home-button">
+                <el-icon>
+                    <home />
+                </el-icon> 返回首页
+            </el-button>
+        </el-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { HomeFilled as home } from '@element-plus/icons-vue';
+
+const router = useRouter();
+
+const goHome = () => {
+    router.push('/');
+};
+</script>
+
+<style scoped>
+.not-found {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+    background-color: #f0f2f5;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    overflow-x: hidden;
+}
+
+.not-found-card {
+    text-align: center;
+    padding: 15px;
+    /* 调整卡片内边距 */
+    max-width: 480px;
+    /* 调整卡片最大宽度 */
+    width: 100%;
+    max-height: 420px;
+    /* 调整卡片最大高度 */
+    border-radius: 7.2px;
+    /* 调整卡片圆角半径 */
+    box-shadow: 0 3.6px 9.6px rgba(0, 0, 0, 0.15);
+    background-color: white;
+    box-sizing: border-box;
+}
+
+.not-found-image {
+    width: 100%;
+    max-width: 300px;
+    /* 调整图片最大宽度 */
+    max-height: 180px;
+    /* 调整图片最大高度 */
+    margin-bottom: 18px;
+    /* 调整图片下方外边距 */
+    border-radius: 7.2px;
+    /* 调整图片圆角半径 */
+}
+
+.not-found-title {
+    font-size: 1.5rem;
+    /* 调整标题字体大小 */
+    margin-bottom: 12px;
+    /* 调整标题下方外边距 */
+}
+
+.not-found-description {
+    font-size: 0.9rem;
+    /* 调整描述字体大小 */
+    margin-bottom: 18px;
+    /* 调整描述下方外边距 */
+}
+
+.home-button {
+    font-size: 0.75rem;
+    /* 调整按钮的字体大小 */
+    padding: 6px 12px;
+    /* 调整按钮的内边距 */
+}
+
+.home-button el-icon {
+    font-size: 0.9rem;
+    /* 调整按钮图标的大小 */
+}
+</style>

src/views/dashboard/components/FileTable.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ElIcon, ElMessage, ElTable, ElTableColumn, ElPopover, ElInput } from "element-plus"
+import { ref, type Ref, markRaw, inject } from "vue";
+
+import {
+    Document,
+    VideoPlay,
+    MoreFilled,
+    Download,
+    DocumentDelete,
+    Edit,
+    Picture,
+    Headset,
+} from "@element-plus/icons-vue";
+
+import { type file } from "@/stores/type";
+
+import { files } from "./test-data";
+
+const filesStore: any = inject("filesStore")
+filesStore.clearFiles()
+
+const selectionChange = (files: file[]) => {
+    filesStore.setFiles(files)
+}
+
+
+const mouseEnter = (row: file) => {
+    row.isVisible = true
+}
+
+const mouseLeave = (row: file) => {
+    row.isVisible = false
+}
+
+</script>
+<template>
+    <el-table :data="files" class="table" :default-sort="{ prop: 'date', order: 'descending' }"
+        @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave" @selection-change="selectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column type="index" width="50" />
+        <el-table-column label="文件名" width="180">
+            <template #default="scope">
+                <div style="display: flex; align-items: center">
+                    <el-icon>
+                        <component :is="scope.row.icon" />
+                    </el-icon>
+                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
+                </div>
+            </template>
+        </el-table-column>
+        <el-table-column width="180">
+            <template #default="scope">
+                <div style="display: flex; align-items: center;justify-content: space-around;"
+                    v-if="scope.row.isVisible">
+                    <el-popover effect="light" trigger="hover" placement="top" width="auto"
+                        v-for="option in scope.row.options">
+                        <template #default>
+                            <h5 style="text-align: center;">{{ option.name }}</h5>
+                        </template>
+                        <template #reference>
+                            <el-icon>
+                                <component :is="option.icon" />
+                            </el-icon>
+                        </template>
+                    </el-popover>
+                </div>
+            </template>
+        </el-table-column>
+        <el-table-column prop="updateTime" label="修改日期" width="180" />
+        <el-table-column prop="fileType" label="文件类型" width="180" />
+        <el-table-column prop="size" label="大小" />
+    </el-table>
+</template>
+
+<style scoped lang="less">
+.table {
+    width: 100%;
+    // outline: auto red;
+}
+</style>

src/views/dashboard/components/NavigationBar.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ElSubMenu, ElMenu, ElMenuItem, ElAvatar, ElIcon } from "element-plus";
+import { UserFilled, Back, Help } from "@element-plus/icons-vue";
+import { ref, type Ref } from "vue";
+
+const activeIndex: Ref<string> = ref("1");
+const errorHandler = () => true
+
+</script>
+
+<template>
+    <el-menu :default-active="activeIndex" class="Navigation-Bar" mode="horizontal" background-color="#545c64"
+        text-color="#fff" active-text-color="#ffd04b">
+        <el-menu-item index="1">盘网网盘</el-menu-item>
+        <el-sub-menu index="2">
+            <template #title>
+                <el-avatar @error="errorHandler">
+                    <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
+                </el-avatar>
+            </template>
+            <el-menu-item index="2-1">
+                <el-icon>
+                    <UserFilled />
+                </el-icon>
+                <span>个人主页</span>
+            </el-menu-item>
+            <el-menu-item index="2-2">
+                <el-icon>
+                    <Help />
+                </el-icon>
+                <span>帮助中心</span>
+            </el-menu-item>
+            <el-menu-item index="2-3">
+                <el-icon>
+                    <Back />
+                </el-icon>
+                <span> 退出登录</span>
+            </el-menu-item>
+        </el-sub-menu>
+    </el-menu>
+</template>
+
+<style scoped lang="less">
+.Navigation-Bar {
+    display: flex;
+    justify-content: space-between;
+}
+</style>