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 46396153e3
commit 702869e1f8
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>
<meta charset="UTF-8">
<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">
<title>特恩(TONE)</title>
</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>
<template>
<div style="padding: 15px 20px;">
<div class="px-[20px] py-[15px]">
<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>
<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="uuid" label="uuid" width="120" show-overflow-tooltip />
<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="visit_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">
<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>
</template>
</el-table-column>
</el-table>
<!-- 编辑、添加博客对话框 -->
<el-dialog v-model="dialogEditFormVisible" title="编辑" width="800">
<el-form :model="editForm" label-width="auto" style="margin: 0 30px;">
<el-form-item label="id">

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

@@ -363,7 +363,7 @@ const aceEditorTheme = ref('github');
</script>
<template>
<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-icon>
<Refresh />
@@ -394,6 +394,7 @@ const aceEditorTheme = ref('github');
<el-button type="danger" :disabled="false" @click="deleteChosenFile">删除</el-button>
</el-button-group>
</div>
<!-- 文件列表 -->
<el-table :data="fileListShow" @cell-click="fileClick" @selection-change="fileListSelectionChange" border
class="mt-[10px]">
<el-table-column type="selection" width="55" />
@@ -401,7 +402,7 @@ const aceEditorTheme = ref('github');
<el-table-column prop="lastModified" :formatter="fileListTableLastModifiedFormatter" label="最后修改时间"
width="180" />
<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">
<el-button v-if="!scope.row.dir" size="small" text
@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>
<template>
<div style="padding: 15px 20px;">
<div class="py-[15px] px-[20px]">
<el-text>总数量：{{ tableData.length }}</el-text>
<el-button type="primary" style="width: 120px;margin-left: 20px;" @click="addHandle">添加</el-button>
</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="type" label="类型" width="80" sortable>
<template #default="scope">
@@ -133,16 +134,16 @@ const delHandle = async (data: { id: string, [key: string]: any }) => {
</template>
</el-table-column>
<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">
<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>
</template>
</el-table-column>
</el-table>
<!-- 编辑、添加资源对话框 -->
<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-input v-model="editForm.id" disabled />
</el-form-item>

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

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

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

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