From 7a6901520a8e10a4384625c8de918d00a63e7c99 Mon Sep 17 00:00:00 2001
From: MoYi <1545929126@qq.com>
Date: Tue, 21 Nov 2023 21:09:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EPC=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts     |   7 +
 src/views/AppPC.vue | 363 +++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 368 insertions(+), 2 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 9ca6ddc..baf86c7 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,9 +7,16 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElUpload: typeof import('element-plus/es')['ElUpload']
diff --git a/src/views/AppPC.vue b/src/views/AppPC.vue
index afd1a65..076d1a4 100644
--- a/src/views/AppPC.vue
+++ b/src/views/AppPC.vue
@@ -1,11 +1,370 @@
 <template>
-  PC
+  <div class="Home">
+    <!-- 顶部 -->
+    <el-row>
+      <el-col :span="24" class="Header">
+        <!-- 顶部内容区域 -->
+        <div class="HeaderHome">
+          <el-switch v-model="colorTheme" class="ml-2 input-button"
+                     style="--el-switch-on-color: var(--el-border-color-dark); --el-switch-off-color: var(--el-border-color-light)"
+                     :active-icon="Moon" :inactive-icon="Sunny" @change="handleColorThemeChange"/>
+          <!-- 顶部输入框 -->
+          <div class="HeaderHomeInput">
+            <!-- 输入框属性与文本 -->
+            <el-input v-model="HeaderHomeInputText" placeholder="请输入要搜索的内容">
+              <!-- 选择 -->
+              <template #prepend>
+                <el-select placeholder="名字" value-key="1" style="width: 100px">
+                  <el-option label="名字" value="1"/>
+                  <el-option label="ID" value="2"/>
+                  <el-option label="MD5" value="3"/>
+                  <el-option label="文件类型" value="4"/>
+                </el-select>
+              </template>
+              <!-- 搜索图标与按钮 -->
+              <template #append>
+                <el-button :icon="Search"/>
+              </template>
+            </el-input>
+          </div>
+          <!-- 用户属性 -->
+          <div class="HeaderHomeUserInfo">
+            <img :src="userAvatar" alt="用户头像"/>
+            <span>{{ userName }}</span>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 下面 -->
+    <el-row class="LeftAndRightBox">
+      <!-- 左侧 -->
+      <el-col :span="17" class="Left">
+        <div class="LeftFileList">
+          <!-- 文件表格 -->
+          <el-table ref="fileListTable" :data="pagedLeftFileListData" class="LeftFileListData" border stripe
+                    style="width: 100%">
+            <el-table-column prop="LeftFileListDataID" label="ID" width="100"/>
+            <el-table-column prop="LeftFileListDataName" label="文件名称" width="650"/>
+            <el-table-column prop="LeftFileListDataFormat" label="文件格式" width="150"/>
+            <el-table-column prop="LeftFileListDataSize" label="文件大小" width="160"/>
+            <el-table-column prop="LeftFileListDataUpLoader" label="上传者" width="150"/>
+            <el-table-column prop="LeftFileListDataOption" fixed="right" label="操作" width="150">
+              <!-- 操作列模板 -->
+              <template #default>
+                <el-button link type="primary">下载</el-button>
+                <el-button link type="danger">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <!-- 分页 -->
+          <el-pagination
+              @current-change="HandleCurrentChange"
+              :current-page="CurrentPage"
+              :page-sizes="[20]"
+              :page-size="20"
+              layout="prev, pager, next"
+              :total="LeftFileListData.length"
+              class="Pagination"
+          />
+        </div>
+      </el-col>
+      <!-- 右侧 -->
+      <el-col :span="7" class="Right"></el-col>
+    </el-row>
+  </div>
 </template>
 
 <script setup lang="ts">
+// 导入ElementIcon
+import {Search, Moon, Sunny} from '@element-plus/icons-vue';
+// 导入ref
+import {ref, computed} from 'vue';
+import {useDark, useToggle} from "@vueuse/core"
 
+
+// 主题切换
+const isDark = useDark();
+const colorTheme = ref<boolean>(isDark.value);
+const toggleDark = useToggle(isDark);
+const handleColorThemeChange = () => {
+  toggleDark();
+}
+// 搜索输入框
+const HeaderHomeInputText = ref('');
+// 用户头像
+const userAvatar = 'src/assets/userAvatar.jpg';
+// 用户名
+const userName = 'MoYiJiangNans';
+// 文件列表数据
+const LeftFileListData = [
+  {
+    LeftFileListDataID: 1,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 2,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 3,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 4,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 5,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 6,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 7,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 8,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 9,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 10,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 11,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 12,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 13,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 14,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 15,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 16,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 17,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 18,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 19,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 20,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 21,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 22,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 23,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 24,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 25,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 26,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 27,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 28,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 29,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+  {
+    LeftFileListDataID: 30,
+    LeftFileListDataName: 'Everything-1.4.1.1024.x86-Setup',
+    LeftFileListDataFormat: 'exe',
+    LeftFileListDataSize: '1748 KB',
+    LeftFileListDataUpLoader: 'MoYiJiangNans',
+  },
+];
+
+// 分页相关数据
+// 当前页数
+const CurrentPage = ref(1);
+// 每页显示的条数
+const pageSize = ref(20);
+
+// 处理当前页变化
+const HandleCurrentChange = (val: number) => {
+  CurrentPage.value = val;
+};
+
+// 计算属性，根据当前页和每页条数来截取数据
+const pagedLeftFileListData = computed(() => {
+  const startIndex = (CurrentPage.value - 1) * pageSize.value;
+  const endIndex = startIndex + pageSize.value;
+  return LeftFileListData.slice(startIndex, endIndex);
+});
 </script>
 
 <style scoped>
+/* 顶部Css样式 */
+.HeaderHome {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+}
 
-</style>
+/* 用户属性样式 */
+.HeaderHomeUserInfo {
+  display: flex;
+  align-items: center;
+}
+
+/* 用户头像大小 */
+img {
+  width: 30px;
+  height: 30px;
+  border-radius: 10%;
+  margin: 10px 10px 10px 10px;
+}
+
+/* 左侧Div边框 */
+.Left {
+  margin: 5px 5px 0 5px;
+}
+
+/* 修改分页属性 */
+.Pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 设置列表高度为100% */
+.LeftFileListData {
+  height: 100%;
+}
+</style>
\ No newline at end of file