完成整个项目管理前端

.env.development

@@ -1,8 +1,9 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 柏码少儿编程俱乐部管理系统
 
 # 开发环境配置
 VITE_APP_ENV = 'development'
 
-# 若依管理系统/开发环境
+# 开发环境
 VITE_APP_BASE_API = '/dev-api'
+VITE_CLIENT_URL = 'http://localhost:5173'

.env.production

@@ -1,11 +1,13 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 柏码少儿编程俱乐部管理系统
 
 # 生产环境配置
 VITE_APP_ENV = 'production'
 
-# 若依管理系统/生产环境
+# 生产环境
 VITE_APP_BASE_API = '/prod-api'
 
+VITE_CLIENT_URL = 'http://localhost:5173'
+
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip

.env.staging

@@ -1,10 +1,10 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 柏码少儿编程俱乐部管理系统
 
 # 生产环境配置
 VITE_APP_ENV = 'staging'
 
-# 若依管理系统/生产环境
+# 生产环境
 VITE_APP_BASE_API = '/stage-api'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli

index.html

@@ -6,8 +6,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="renderer" content="webkit">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <link rel="icon" href="/favicon.ico">
-  <title>若依管理系统</title>
+  <link rel="icon" href="/favicon.png">
+  <title>柏码少儿编程俱乐部管理系统</title>
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <style>
     html,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ruoyi",
   "version": "3.8.8",
-  "description": "若依管理系统",
+  "description": "柏码少儿编程俱乐部管理系统",
   "author": "若依",
   "license": "MIT",
   "type": "module",

src/api/system/blog.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询博客文章管理列表
+export function listBlog(query) {
+  return request({
+    url: '/system/blog/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询博客文章管理详细
+export function getBlog(id) {
+  return request({
+    url: '/system/blog/' + id,
+    method: 'get'
+  })
+}
+
+// 新增博客文章管理
+export function addBlog(data) {
+  return request({
+    url: '/system/blog',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改博客文章管理
+export function updateBlog(data) {
+  return request({
+    url: '/system/blog',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除博客文章管理
+export function delBlog(id) {
+  return request({
+    url: '/system/blog/' + id,
+    method: 'delete'
+  })
+}

src/api/system/detail.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询博客文章详情列表
+export function listDetail(query) {
+  return request({
+    url: '/system/detail/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询博客文章详情详细
+export function getDetail(id) {
+  return request({
+    url: '/system/detail/' + id,
+    method: 'get'
+  })
+}
+
+// 新增博客文章详情
+export function addDetail(data) {
+  return request({
+    url: '/system/detail',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改博客文章详情
+export function updateDetail(data) {
+  return request({
+    url: '/system/detail',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除博客文章详情
+export function delDetail(id) {
+  return request({
+    url: '/system/detail/' + id,
+    method: 'delete'
+  })
+}

src/layout/components/Navbar.vue

@@ -8,13 +8,6 @@
       <template v-if="appStore.device !== 'mobile'">
         <header-search id="header-search" class="right-menu-item" />
 
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 

src/layout/components/Sidebar/Logo.vue

@@ -7,7 +7,6 @@
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
       </router-link>
     </transition>
   </div>
@@ -54,8 +53,7 @@ const sideTheme = computed(() => settingsStore.sideTheme);
     width: 100%;
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      width: 150px;
       vertical-align: middle;
       margin-right: 12px;
     }

src/views/system/blog/index.vue

@@ -0,0 +1,325 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="文章标题" prop="title">
+        <el-input
+          v-model="queryParams.title"
+          placeholder="请输入文章标题"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="发表人" prop="author">
+        <el-input
+          v-model="queryParams.author"
+          placeholder="请输入发表人"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="发布时间" prop="time">
+        <el-date-picker clearable
+          v-model="queryParams.time"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择发布时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:blog:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:blog:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:blog:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['system:blog:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="blogList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="文章ID" align="center" prop="id" />
+      <el-table-column label="文章标题" align="center" prop="title" />
+      <el-table-column label="文章简介" align="center" prop="description" />
+      <el-table-column label="发表人" align="center" prop="author" />
+      <el-table-column label="发布时间" align="center" prop="time" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.time, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:blog:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:blog:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改博客文章管理对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="blogRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="文章标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入文章标题" />
+        </el-form-item>
+        <el-form-item label="文章简介" prop="description">
+          <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="发表人" prop="author">
+          <el-input v-model="form.author" placeholder="请输入发表人" />
+        </el-form-item>
+        <el-form-item label="发布时间" prop="time">
+          <el-date-picker clearable
+            v-model="form.time"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择发布时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-divider content-position="center">博客文章详情信息</el-divider>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" icon="Plus" @click="handleAddBlogDetail">添加</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" icon="Delete" @click="handleDeleteBlogDetail">删除</el-button>
+          </el-col>
+        </el-row>
+        <el-table :data="blogDetailList" :row-class-name="rowBlogDetailIndex" @selection-change="handleBlogDetailSelectionChange" ref="blogDetail">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column label="序号" align="center" prop="index" width="50"/>
+          <el-table-column label="推荐教师ID" prop="teacherId" width="150">
+            <template #default="scope">
+              <el-input v-model="scope.row.teacherId" placeholder="请输入推荐教师ID" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Blog">
+import { listBlog, getBlog, delBlog, addBlog, updateBlog } from "@/api/system/blog";
+
+const { proxy } = getCurrentInstance();
+
+const blogList = ref([]);
+const blogDetailList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const checkedBlogDetail = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    title: null,
+    description: null,
+    author: null,
+    time: null
+  },
+  rules: {
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询博客文章管理列表 */
+function getList() {
+  loading.value = true;
+  listBlog(queryParams.value).then(response => {
+    blogList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    title: null,
+    description: null,
+    author: null,
+    time: null
+  };
+  blogDetailList.value = [];
+  proxy.resetForm("blogRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加博客文章管理";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _id = row.id || ids.value
+  getBlog(_id).then(response => {
+    form.value = response.data;
+    blogDetailList.value = response.data.blogDetailList;
+    open.value = true;
+    title.value = "修改博客文章管理";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["blogRef"].validate(valid => {
+    if (valid) {
+      form.value.blogDetailList = blogDetailList.value;
+      if (form.value.id != null) {
+        updateBlog(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addBlog(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value;
+  proxy.$modal.confirm('是否确认删除博客文章管理编号为"' + _ids + '"的数据项？').then(function() {
+    return delBlog(_ids);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+/** 博客文章详情序号 */
+function rowBlogDetailIndex({ row, rowIndex }) {
+  row.index = rowIndex + 1;
+}
+
+/** 博客文章详情添加按钮操作 */
+function handleAddBlogDetail() {
+  let obj = {};
+  obj.content = "";
+  obj.teacherId = "";
+  obj.teacherComment = "";
+  blogDetailList.value.push(obj);
+}
+
+/** 博客文章详情删除按钮操作 */
+function handleDeleteBlogDetail() {
+  if (checkedBlogDetail.value.length == 0) {
+    proxy.$modal.msgError("请先选择要删除的博客文章详情数据");
+  } else {
+    const blogDetails = blogDetailList.value;
+    const checkedBlogDetails = checkedBlogDetail.value;
+    blogDetailList.value = blogDetails.filter(function(item) {
+      return checkedBlogDetails.indexOf(item.index) == -1
+    });
+  }
+}
+
+/** 复选框选中数据 */
+function handleBlogDetailSelectionChange(selection) {
+  checkedBlogDetail.value = selection.map(item => item.index)
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('system/blog/export', {
+    ...queryParams.value
+  }, `blog_${new Date().getTime()}.xlsx`)
+}
+
+getList();
+</script>

src/views/system/detail/index.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="推荐教师ID" prop="teacherId">
+        <el-input
+          v-model="queryParams.teacherId"
+          placeholder="请输入推荐教师ID"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:detail:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:detail:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:detail:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['system:detail:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="detailList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="文章ID" align="center" prop="id" />
+      <el-table-column label="文章内容" align="center" prop="content">
+        <template #default="{ row }">
+          <div class="line-limit-3">
+            {{ row.content }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="推荐教师ID" align="center" prop="teacherId" />
+      <el-table-column label="推荐理由" align="center" prop="teacherComment" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:detail:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:detail:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改博客文章详情对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="detailRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="文章内容">
+          <editor v-model="form.content" :min-height="192"/>
+        </el-form-item>
+        <el-form-item label="推荐教师ID" prop="teacherId">
+          <el-input v-model="form.teacherId" placeholder="请输入推荐教师ID" />
+        </el-form-item>
+        <el-form-item label="推荐理由" prop="teacherComment">
+          <el-input v-model="form.teacherComment" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Detail">
+import { listDetail, getDetail, delDetail, addDetail, updateDetail } from "@/api/system/detail";
+
+const { proxy } = getCurrentInstance();
+
+const detailList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    content: null,
+    teacherId: null,
+    teacherComment: null
+  },
+  rules: {
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询博客文章详情列表 */
+function getList() {
+  loading.value = true;
+  listDetail(queryParams.value).then(response => {
+    detailList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    content: null,
+    teacherId: null,
+    teacherComment: null
+  };
+  proxy.resetForm("detailRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加博客文章详情";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _id = row.id || ids.value
+  getDetail(_id).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改博客文章详情";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["detailRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateDetail(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addDetail(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value;
+  proxy.$modal.confirm('是否确认删除博客文章详情编号为"' + _ids + '"的数据项？').then(function() {
+    return delDetail(_ids);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('system/detail/export', {
+    ...queryParams.value
+  }, `detail_${new Date().getTime()}.xlsx`)
+}
+
+getList();
+</script>