From bb23f0073d98636efd7b3f8d4bb7daf97ba3b8aa Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Sun, 1 Sep 2024 13:45:41 +0800
Subject: [PATCH] =?UTF-8?q?Dashboard=E5=AE=8C=E6=88=90=E3=80=81Resources?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tonecn/src/components/Console/Blogs.vue     |   7 +
 tonecn/src/components/Console/Resources.vue | 179 ++++++++++++++++++++
 tonecn/src/views/Console/Dashboard.vue      |  36 +++-
 3 files changed, 219 insertions(+), 3 deletions(-)
 create mode 100644 tonecn/src/components/Console/Blogs.vue
 create mode 100644 tonecn/src/components/Console/Resources.vue

diff --git a/tonecn/src/components/Console/Blogs.vue b/tonecn/src/components/Console/Blogs.vue
new file mode 100644
index 0000000..f34ff18
--- /dev/null
+++ b/tonecn/src/components/Console/Blogs.vue
@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+<template>
+
+    
+</template>
\ No newline at end of file
diff --git a/tonecn/src/components/Console/Resources.vue b/tonecn/src/components/Console/Resources.vue
new file mode 100644
index 0000000..0d14bbe
--- /dev/null
+++ b/tonecn/src/components/Console/Resources.vue
@@ -0,0 +1,179 @@
+<script setup>
+import { onMounted, reactive, ref } from 'vue';
+import { request } from '../../lib/request'
+import { ElMessage } from 'element-plus';
+onMounted(async () => {
+    await loadTableData();
+})
+const loadTableData = async () => {
+    try {
+        let resourcesRes = await request.get('/console/resources')
+        if (resourcesRes.code == 0) {
+            tableData.value = [];
+            tableData.value.push(...resourcesRes.data);
+        } else {
+            throw new Error(resourcesRes.message);
+        }
+    } catch (error) {
+        ElMessage.error(`加载失败 ${error}`)
+    }
+}
+const tableData = ref([])
+const dialogEditFormVisible = ref(false);
+const editForm = reactive({
+    id: '',
+    type: '',
+    recommand: 1,
+    title: '',
+    describe: '',
+    icon_src: '',
+    addition: '',
+    src: '',
+})
+const editHandle = (data) => {
+    editForm.id = data.id;
+    editForm.type = data.type;
+    editForm.recommand = +data.recommand;
+    editForm.title = data.title;
+    editForm.describe = data.describe;
+    editForm.icon_src = data.icon_src;
+    editForm.src = data.src;
+    editForm.addition = JSON.stringify(data.addition);
+    dialogEditFormVisible.value = true;
+}
+const addHandle = () => {
+    editForm.id = '';
+    editForm.type = '';
+    editForm.recommand = 1;
+    editForm.title = '';
+    editForm.describe = '';
+    editForm.icon_src = '';
+    editForm.src = '';
+    editForm.addition = '';
+    dialogEditFormVisible.value = true;
+}
+const saveHandle = async () => {
+    // 表单验证
+    if (!editForm.addition || !editForm.describe || !editForm.icon_src || !editForm.recommand || !editForm.src || !editForm.title || !editForm.type) {
+        return ElMessage.warning('请先完成表单')
+    }
+    try {
+        let res = await request.post('/console/saveResource', {
+            id: editForm.id,
+            type: editForm.type,
+            recommand: editForm.recommand,
+            title: editForm.title,
+            describe: editForm.describe,
+            icon_src: editForm.icon_src,
+            addition: editForm.addition,
+            src: editForm.src,
+        })
+        if (res.code == 0) {
+            dialogEditFormVisible.value = false;
+            loadTableData();
+            return ElMessage.success('保存成功');
+        } else {
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        return ElMessage.error(`保存失败 ${error}`);
+    }
+}
+const delHandle = async (data) => {
+    let { id } = data;
+    try {
+        let res = await request.delete('/console/resource?id=' + id);
+        if (res.code == 0) {
+            ElMessage.success('删除成功');
+            loadTableData();
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        return ElMessage.error(`删除失败 ${error}`);
+    }
+}
+</script>
+<template>
+    <div style="padding: 15px 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-column prop="id" label="id" width="50" />
+        <el-table-column prop="type" label="类型" width="60">
+            <template #default="scope">
+                {{ scope.row.type == 'resource' ? '资源' : scope.row.type == 'download' ? '下载' : '未知' }}
+            </template>
+        </el-table-column>
+        <el-table-column prop="recommand" label="推荐" width="50" />
+        <el-table-column prop="title" label="标题" width="130" />
+        <el-table-column prop="describe" label="描述" width="200" />
+        <el-table-column prop="icon_src" label="图标" width="110">
+            <template #default="scope">
+                <div class="el-table-col-image-preview">
+                    <el-image :src="scope.row.icon_src" />
+                </div>
+            </template>
+        </el-table-column>
+        <el-table-column prop="addition" label="附加样式" width="300">
+            <template #default="scope">
+                {{ scope.row.addition }}
+            </template>
+        </el-table-column>
+        <el-table-column prop="src" label="资源" width="180" />
+        <el-table-column fixed="right" label="操作" min-width="120">
+            <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">
+                <el-input v-model="editForm.id" disabled />
+            </el-form-item>
+            <el-form-item label="类型">
+                <el-select v-model="editForm.type" placeholder="请选择类型">
+                    <el-option label="资源" value="resource" />
+                    <el-option label="下载" value="download" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="推荐程度">
+                <el-input-number v-model="editForm.recommand" :min="1" />
+            </el-form-item>
+            <el-form-item label="标题">
+                <el-input v-model="editForm.title" />
+            </el-form-item>
+            <el-form-item label="描述">
+                <el-input v-model="editForm.describe" type="textarea" autosize />
+            </el-form-item>
+            <el-form-item label="图标链接">
+                <el-input v-model="editForm.icon_src" />
+            </el-form-item>
+            <el-form-item label="资源链接">
+                <el-input v-model="editForm.src" />
+            </el-form-item>
+            <el-form-item label="附加样式">
+                <el-input v-model="editForm.addition" type="textarea" autosize />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="dialogEditFormVisible = false">取消</el-button>
+                <el-button type="primary" @click="saveHandle">保存</el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+<style scoped>
+.el-table-col-image-preview {
+    display: flex;
+    align-items: center;
+    height: 80px;
+    width: 80px;
+    margin: 0 auto;
+}
+</style>
\ No newline at end of file
diff --git a/tonecn/src/views/Console/Dashboard.vue b/tonecn/src/views/Console/Dashboard.vue
index fed96a7..0f3aee5 100644
--- a/tonecn/src/views/Console/Dashboard.vue
+++ b/tonecn/src/views/Console/Dashboard.vue
@@ -1,6 +1,36 @@
 <script setup lang="ts">
-
+import { Menu as IconMenu, Document } from '@element-plus/icons-vue'
+import Resources from '../../components/Console/Resources.vue'
+import Blogs from '../../components/Console/Blogs.vue'
+import { shallowRef } from 'vue';
+const tabComponent = shallowRef(Resources)
 </script>
 <template>
-Dashboard
-</template>
\ No newline at end of file
+    <div class="dashboard-container">
+        <el-menu default-active="1" class="menu">
+            <el-menu-item index="1" @click="tabComponent = Resources">
+                <el-icon><icon-menu /></el-icon>
+                <span>资源及下载</span>
+            </el-menu-item>
+            <el-menu-item index="2" @click="tabComponent = Blogs">
+                <el-icon>
+                    <document />
+                </el-icon>
+                <span>博客</span>
+            </el-menu-item>
+        </el-menu>
+        <div style="flex: 1;min-height: calc(100vh - 90px);">
+            <KeepAlive>
+                <component :is="tabComponent" />
+            </KeepAlive>
+        </div>
+    </div>
+</template>
+<style scoped>
+.dashboard-container{
+    display: flex;
+}
+.dashboard-container .menu{
+    min-width: 200px;
+}
+</style>
\ No newline at end of file