tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化 前端控制台界面样式

Browse Source
This commit is contained in:
tone
2024-10-15 23:43:05 +08:00
parent 8a73f3cf84
commit 007d574eec
6 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tonecn/index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="./src/assets/logo.jpg"> <link rel="icon" href="./src/assets/logo.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="./src/assets/tailwind.css"> <link rel="stylesheet" href="./src/assets/tailwind.css">
<title>特恩(TONE)</title> <title>特恩(TONE)</title>
</head> </head>

11
tonecn/src/components/Console/Blogs.vue
View File

@@ -111,11 +111,12 @@ const formatTime = (row: any, _column: any, _cellValue: any, _index: any) => {
} }
</script> </script>
<template> <template>
<div style="padding: 15px 20px;"> <div class="px-[20px] py-[15px]">
<el-text>总数量：{{ tableData.length }}</el-text> <el-text>总数量：{{ tableData.length }}</el-text>
<el-button type="primary" style="width: 120px;margin-left: 20px;" @click="addHandle">添加</el-button> <el-button type="primary" class="w-[120px] ml-[20px]" @click="addHandle">添加</el-button>
</div> </div>
<el-table :data="tableData" border style="width: 100%"> <!-- 数据列表 -->
<el-table :data="tableData" border class="w-full">
<el-table-column prop="id" label="id" width="50" /> <el-table-column prop="id" label="id" width="50" />
<el-table-column prop="uuid" label="uuid" width="120" show-overflow-tooltip /> <el-table-column prop="uuid" label="uuid" width="120" show-overflow-tooltip />
<el-table-column prop="title" label="标题" width="240" /> <el-table-column prop="title" label="标题" width="240" />
@@ -124,14 +125,14 @@ const formatTime = (row: any, _column: any, _cellValue: any, _index: any) => {
<el-table-column prop="access_level" label="可访问级别" width="100" /> <el-table-column prop="access_level" label="可访问级别" width="100" />
<el-table-column prop="visit_count" label="访问量" width="80" /> <el-table-column prop="visit_count" label="访问量" width="80" />
<el-table-column prop="like_count" label="点赞量" width="80" /> <el-table-column prop="like_count" label="点赞量" width="80" />
<el-table-column fixed="right" label="操作" width="120"> <el-table-column fixed="right" label="操作" min-width="110">
<template #default="scope"> <template #default="scope">
<el-button link type="primary" size="small" @click="editHandle(scope.row)">编辑</el-button> <el-button link type="primary" size="small" @click="editHandle(scope.row)">编辑</el-button>
<el-button link type="primary" size="small" @click="delHandle(scope.row)">删除</el-button> <el-button link type="primary" size="small" @click="delHandle(scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 编辑、添加博客对话框 -->
<el-dialog v-model="dialogEditFormVisible" title="编辑" width="800"> <el-dialog v-model="dialogEditFormVisible" title="编辑" width="800">
<el-form :model="editForm" label-width="auto" style="margin: 0 30px;"> <el-form :model="editForm" label-width="auto" style="margin: 0 30px;">
<el-form-item label="id"> <el-form-item label="id">

5
tonecn/src/components/Console/FileOnline.vue
View File

@@ -363,7 +363,7 @@ const aceEditorTheme = ref('github');
</script> </script>
<template> <template>
<div class="container w-full"> <div class="container w-full">
<div class="flex items-center p-[10px]"> <div class="flex items-center p-[10px] flex-wrap">
<el-button class="mr-[-15px]" @click="() => { loadFullFileList(); loadFileListShow(); }" circle link> <el-button class="mr-[-15px]" @click="() => { loadFullFileList(); loadFileListShow(); }" circle link>
<el-icon> <el-icon>
<Refresh /> <Refresh />
@@ -394,6 +394,7 @@ const aceEditorTheme = ref('github');
<el-button type="danger" :disabled="false" @click="deleteChosenFile">删除</el-button> <el-button type="danger" :disabled="false" @click="deleteChosenFile">删除</el-button>
</el-button-group> </el-button-group>
</div> </div>
<!-- 文件列表 -->
<el-table :data="fileListShow" @cell-click="fileClick" @selection-change="fileListSelectionChange" border <el-table :data="fileListShow" @cell-click="fileClick" @selection-change="fileListSelectionChange" border
class="mt-[10px]"> class="mt-[10px]">
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
@@ -401,7 +402,7 @@ const aceEditorTheme = ref('github');
<el-table-column prop="lastModified" :formatter="fileListTableLastModifiedFormatter" label="最后修改时间" <el-table-column prop="lastModified" :formatter="fileListTableLastModifiedFormatter" label="最后修改时间"
width="180" /> width="180" />
<el-table-column prop="size" :formatter="fileListTableSizeFormatter" label="文件大小" width="130" /> <el-table-column prop="size" :formatter="fileListTableSizeFormatter" label="文件大小" width="130" />
<el-table-column label="操作" width="200"> <el-table-column label="操作" width="180">
<template #default="scope"> <template #default="scope">
<el-button v-if="!scope.row.dir" size="small" text <el-button v-if="!scope.row.dir" size="small" text
@click.prevent="fileListHandleEdit(scope.row)">编辑</el-button> @click.prevent="fileListHandleEdit(scope.row)">编辑</el-button>

11
tonecn/src/components/Console/Resources.vue
View File

@@ -106,11 +106,12 @@ const delHandle = async (data: { id: string, [key: string]: any }) => {
} }
</script> </script>
<template> <template>
<div style="padding: 15px 20px;"> <div class="py-[15px] px-[20px]">
<el-text>总数量：{{ tableData.length }}</el-text> <el-text>总数量：{{ tableData.length }}</el-text>
<el-button type="primary" style="width: 120px;margin-left: 20px;" @click="addHandle">添加</el-button> <el-button type="primary" style="width: 120px;margin-left: 20px;" @click="addHandle">添加</el-button>
</div> </div>
<el-table :data="tableData" border style="width: 100%"> <!-- 数据列表 -->
<el-table :data="tableData" border class="w-full">
<el-table-column prop="id" label="id" width="50" /> <el-table-column prop="id" label="id" width="50" />
<el-table-column prop="type" label="类型" width="80" sortable> <el-table-column prop="type" label="类型" width="80" sortable>
<template #default="scope"> <template #default="scope">
@@ -133,16 +134,16 @@ const delHandle = async (data: { id: string, [key: string]: any }) => {
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="src" label="资源" width="180" /> <el-table-column prop="src" label="资源" width="180" />
<el-table-column fixed="right" label="操作" min-width="120"> <el-table-column fixed="right" label="操作" min-width="110">
<template #default="scope"> <template #default="scope">
<el-button link type="primary" size="small" @click="editHandle(scope.row)">编辑</el-button> <el-button link type="primary" size="small" @click="editHandle(scope.row)">编辑</el-button>
<el-button link type="primary" size="small" @click="delHandle(scope.row)">删除</el-button> <el-button link type="primary" size="small" @click="delHandle(scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 编辑、添加资源对话框 -->
<el-dialog v-model="dialogEditFormVisible" title="编辑" width="800"> <el-dialog v-model="dialogEditFormVisible" title="编辑" width="800">
<el-form :model="editForm" label-width="auto" style="margin: 0 30px;"> <el-form :model="editForm" label-width="auto" class="mx-[30px]">
<el-form-item label="id"> <el-form-item label="id">
<el-input v-model="editForm.id" disabled /> <el-input v-model="editForm.id" disabled />
</el-form-item> </el-form-item>

4
tonecn/src/components/Console/Utils.vue
View File

@@ -13,7 +13,7 @@ const generateUUID = () => {
} }
</script> </script>
<template> <template>
<el-col style="padding: 20px;"> <el-col class="p-[20px]">
<el-row> <el-row>
<el-text>随机数生成</el-text> <el-text>随机数生成</el-text>
</el-row> </el-row>
@@ -27,7 +27,7 @@ const generateUUID = () => {
@click="() => { copyText(randomNum + ''); ElMessage.success('复制成功') }">复制</el-button> @click="() => { copyText(randomNum + ''); ElMessage.success('复制成功') }">复制</el-button>
</el-button-group> </el-button-group>
</el-row> </el-row>
<el-row style="margin-top: 15px;"> <el-row class="mt-[15px]">
<el-text>32位UUID生成</el-text> <el-text>32位UUID生成</el-text>
</el-row> </el-row>
<el-row> <el-row>

7
tonecn/src/views/Console/Dashboard.vue
View File

@@ -33,6 +33,7 @@ const logout = () => {
}) })
} }
onMounted(async () => { onMounted(async () => {
handleResize()
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
}) })
onUnmounted(async () => { onUnmounted(async () => {
@@ -40,8 +41,8 @@ onUnmounted(async () => {
}) })
</script> </script>
<template> <template>
<div class="flex"> <div class="flex w-[100vw]">
<el-menu default-active="1" :collapse="menuCollapse" class="menu"> <el-menu default-active="1" :collapse="menuCollapse">
<el-menu-item index="1" @click="tabComponent = Resources"> <el-menu-item index="1" @click="tabComponent = Resources">
<el-icon><icon-menu /></el-icon> <el-icon><icon-menu /></el-icon>
<span style="width: 140px;">资源及下载</span> <span style="width: 140px;">资源及下载</span>
@@ -71,7 +72,7 @@ onUnmounted(async () => {
<span>退出登录</span> <span>退出登录</span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
<div style="flex: 1;min-height: calc(100vh - 90px);"> <div class="flex-1 overflow-x-scroll sm:min-h-[calc(100vh-90px)] min-h-[calc(100vh-77px)]">
<KeepAlive> <KeepAlive>
<component :is="tabComponent" /> <component :is="tabComponent" />
</KeepAlive> </KeepAlive>