refactor: refactor the frame layout of admin module

web/src/views/ChatPlus.vue

@@ -183,9 +183,10 @@
       </el-main>
     </el-container>
 
-    <config-dialog v-if="user" :show="showConfigDialog" :models="models" @hide="showConfigDialog = false"
+    <config-dialog v-if="isLogin" :show="showConfigDialog" :models="models" @hide="showConfigDialog = false"
                    @update-user="updateUser"/>
-    <password-dialog v-if="user" :show="showPasswordDialog" @hide="showPasswordDialog = false" @logout="logout"/>
+    <password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false"
+                     @logout="logout"/>
   </div>
 
 
@@ -237,47 +238,45 @@ const newChatItem = ref(null);
 const router = useRouter();
 const showConfigDialog = ref(false);
 const showPasswordDialog = ref(false);
+const isLogin = ref(false)
 
-if (!user.value) {
-  router.push("login");
-} else {
-  onMounted(() => {
-    resizeElement();
-    checkSession().then(() => {
-      // 加载角色列表
-      httpGet(`/api/role/list?user_id=${user.value.id}`).then((res) => {
-        roles.value = res.data;
-        roleId.value = roles.value[0]['id'];
-        // 获取会话列表
-        loadChats();
-        // 创建新的会话
-        newChat();
-      }).catch((e) => {
-        console.log(e)
-        ElMessage.error('获取聊天角色失败')
-      })
-    }).catch(() => {
-      router.push('login')
-    });
-
-    const clipboard = new Clipboard('.copy-reply');
-    clipboard.on('success', () => {
-      ElMessage.success('复制成功！');
+onMounted(() => {
+  resizeElement();
+  checkSession().then(() => {
+    isLogin.value = true
+    // 加载角色列表
+    httpGet(`/api/role/list?user_id=${user.value.id}`).then((res) => {
+      roles.value = res.data;
+      roleId.value = roles.value[0]['id'];
+      // 获取会话列表
+      loadChats();
+      // 创建新的会话
+      newChat();
+    }).catch((e) => {
+      console.log(e)
+      ElMessage.error('获取聊天角色失败')
     })
 
-    clipboard.on('error', () => {
-      ElMessage.error('复制失败！');
+    // 加载系统配置
+    httpGet('/api/admin/config/get?key=system').then(res => {
+      title.value = res.data.title;
+      models.value = res.data.models;
+    }).catch(e => {
+      ElMessage.error("加载系统配置失败: " + e.message)
     })
+  }).catch(() => {
+    router.push('login')
   });
 
-  // 加载系统配置
-  httpGet('/api/admin/config/get?key=system').then(res => {
-    title.value = res.data.title;
-    models.value = res.data.models;
-  }).catch(e => {
-    ElMessage.error("加载系统配置失败: " + e.message)
+  const clipboard = new Clipboard('.copy-reply');
+  clipboard.on('success', () => {
+    ElMessage.success('复制成功！');
   })
-}
+
+  clipboard.on('error', () => {
+    ElMessage.error('复制失败！');
+  })
+});
 
 const checkSession = function () {
   return new Promise((resolve, reject) => {
@@ -851,6 +850,7 @@ $borderColor = #4676d0;
         justify-content: flex-end;
         align-items: center;
         padding 5px 20px;
+        border-top 1px solid #3c3c3c;
 
         .user-info {
           width 100%

web/src/views/Home.vue

@@ -1,21 +1,40 @@
 <template>
-  <div>{{ title }}</div>
+  <div class="home" :style="{ height: winHeight + 'px' }">
+    <h1>{{ title }}</h1>
+  </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue"
-import {isMobile} from "@/utils/libs";
+import {ref} from "vue"
 import {useRouter} from "vue-router"; // 导入useRouter函数
 
-const title = ref("Loading page...");
+const title = ref("HI, ChatGPT PLUS!");
+const winHeight = ref(window.innerHeight)
 const router = useRouter();
-onMounted(() => {
-  if (isMobile()) {
-    router.push("mobile");
-  } else {
-    router.push("chat");
-  }
-})
+// onMounted(() => {
+//   if (isMobile()) {
+//     router.push("mobile");
+//   } else {
+//     router.push("chat");
+//   }
+// })
 
 
 </script>
+
+<style lang="stylus" scoped>
+.home {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #202020;
+  background-color: #282c34;
+
+  h1 {
+    font-size: 300%;
+    font-weight: bold;
+    letter-spacing: 0.1em;
+    text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
+  }
+}
+</style>

web/src/views/admin/Admin.vue

@@ -343,32 +343,31 @@ $borderColor = #4676d0;
       display: flex;
       flex-flow: column;
 
-      .content-tabs {
+      .el-tabs {
         background: #ffffff;
         padding 10px 20px;
-
-        .el-tabs__item {
-          height 35px
-          line-height 35px
-        }
-
-        .el-tabs__content {
-          padding 10px 20px 20px 20px;
-        }
       }
 
     }
   }
 }
 
-
 </style>
 
 <style lang="stylus">
 .pagination {
-  padding 20px;
+  padding-top 20px;
   display flex
   justify-content center
   width 100%
 }
+
+.el-tabs__item {
+  height 35px
+  line-height 35px
+}
+
+.el-tabs__content {
+  padding-bottom 20px;
+}
 </style>

web/src/views/admin/ApiKey.vue

@@ -151,7 +151,7 @@ const remove = function (row) {
   .opt-box {
     padding-bottom: 10px;
     display flex;
-    justify-content end
+    justify-content flex-end
 
     .el-icon {
       margin-right: 5px;

web/src/views/admin/Home.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <admin-header/>
+    <admin-sidebar/>
+    <div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
+      <admin-tags/>
+      <div class="content">
+        <router-view v-slot="{ Component }">
+          <transition name="move" mode="out-in">
+            <keep-alive :include="tags.nameList">
+              <component :is="Component"></component>
+            </keep-alive>
+          </transition>
+        </router-view>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {useSidebarStore} from '@/store/sidebar';
+import {useTagsStore} from '@/store/tags';
+import AdminHeader from "@/components/admin/AdminHeader.vue";
+import AdminSidebar from "@/components/admin/AdminSidebar.vue";
+import AdminTags from "@/components/admin/AdminTags.vue";
+
+const sidebar = useSidebarStore();
+const tags = useTagsStore();
+</script>
+
+<style lang="stylus">
+@import '@/assets/css/main.css';
+@import '@/assets/css/color-dark.css';
+@import '@/assets/iconfont/iconfont.css';
+</style>

web/src/views/admin/LoginLog.vue

@@ -10,16 +10,6 @@
             <span>{{ dateFormat(scope.row['created_at']) }}</span>
           </template>
         </el-table-column>
-
-        <el-table-column label="操作" width="180">
-          <template #default="scope">
-            <el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row)">
-              <template #reference>
-                <el-button size="small" type="danger">删除</el-button>
-              </template>
-            </el-popconfirm>
-          </template>
-        </el-table-column>
       </el-table>
     </el-row>
 
@@ -77,7 +67,7 @@ const fetchList = function (_page, _pageSize) {
   .opt-box {
     padding-bottom: 10px;
     display flex;
-    justify-content end
+    justify-content flex-start
 
     .el-icon {
       margin-right: 5px;

web/src/views/admin/RoleList.vue

@@ -293,7 +293,7 @@ const removeContext = function (index) {
   .opt-box {
     padding-bottom: 10px;
     display flex;
-    justify-content end
+    justify-content flex-end
 
     .el-icon {
       margin-right 5px;

web/src/views/admin/Welcome.vue

@@ -1,19 +1,10 @@
 <template>
-  <div class="welcome" :style="{ height: winHeight + 'px' }">
+  <div class="welcome">
     <h1>ChatGPT-PLUS 控制台</h1>
   </div>
 </template>
 
-<script setup>
-import {defineComponent, onMounted, ref} from "vue"
-
-const winHeight = ref(window.innerHeight)
-onMounted(() => {
-  window.addEventListener("resize", function () {
-    winHeight.value = window.innerHeight
-  })
-})
-</script>
+<script setup></script>
 
 <style lang="stylus" scoped>
 .welcome {
@@ -22,6 +13,7 @@ onMounted(() => {
   align-items: center;
   color: #202020;
   background-color: #282c34;
+  height 100%;
 
   h1 {
     font-size: 300%;

web/src/views/admin/demo/Editor.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="container">
+    <div class="plugins-tips">
+      md-editor-v3：vue3版本的 markdown 编辑器，配置丰富，请详看文档。 访问地址：
+      <a href="https://imzbf.github.io/md-editor-v3/index" target="_blank">md-editor-v3</a>
+    </div>
+    <md-editor class="mgb20" v-model="text" @on-upload-img="onUploadImg"/>
+    <el-button type="primary">提交</el-button>
+  </div>
+</template>
+
+<script setup>
+import {MdEditor} from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+import {ref} from "vue";
+
+const text = ref('Hello Editor!');
+const onUploadImg = (files) => {
+  console.log(files);
+};
+</script>

web/src/views/admin/demo/Form.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="container">
+    <div class="form-box">
+      <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
+        <el-form-item label="表单名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="选择器" prop="region">
+          <el-select v-model="form.region" placeholder="请选择">
+            <el-option key="小明" label="小明" value="小明"></el-option>
+            <el-option key="小红" label="小红" value="小红"></el-option>
+            <el-option key="小白" label="小白" value="小白"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="日期时间">
+          <el-col :span="11">
+            <el-form-item prop="date1">
+              <el-date-picker
+                  type="date"
+                  placeholder="选择日期"
+                  v-model="form.date1"
+                  style="width: 100%"
+              ></el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col class="line" :span="2">-</el-col>
+          <el-col :span="11">
+            <el-form-item prop="date2">
+              <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%">
+              </el-time-picker>
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="城市级联" prop="options">
+          <el-cascader :options="options" v-model="form.options"></el-cascader>
+        </el-form-item>
+        <el-form-item label="选择开关" prop="delivery">
+          <el-switch v-model="form.delivery"></el-switch>
+        </el-form-item>
+        <el-form-item label="多选框" prop="type">
+          <el-checkbox-group v-model="form.type">
+            <el-checkbox label="小明" name="type"></el-checkbox>
+            <el-checkbox label="小红" name="type"></el-checkbox>
+            <el-checkbox label="小白" name="type"></el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="单选框" prop="resource">
+          <el-radio-group v-model="form.resource">
+            <el-radio label="小明"></el-radio>
+            <el-radio label="小红"></el-radio>
+            <el-radio label="小白"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="文本框" prop="desc">
+          <el-input type="textarea" rows="5" v-model="form.desc"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit(formRef)">表单提交</el-button>
+          <el-button @click="onReset(formRef)">重置表单</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {reactive, ref} from 'vue';
+import {ElMessage} from 'element-plus';
+
+const options = [
+  {
+    value: 'guangdong',
+    label: '广东省',
+    children: [
+      {
+        value: 'guangzhou',
+        label: '广州市',
+        children: [
+          {
+            value: 'tianhe',
+            label: '天河区',
+          },
+          {
+            value: 'haizhu',
+            label: '海珠区',
+          },
+        ],
+      },
+      {
+        value: 'dongguan',
+        label: '东莞市',
+        children: [
+          {
+            value: 'changan',
+            label: '长安镇',
+          },
+          {
+            value: 'humen',
+            label: '虎门镇',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'hunan',
+    label: '湖南省',
+    children: [
+      {
+        value: 'changsha',
+        label: '长沙市',
+        children: [
+          {
+            value: 'yuelu',
+            label: '岳麓区',
+          },
+        ],
+      },
+    ],
+  },
+];
+const rules = {
+  name: [{required: true, message: '请输入表单名称', trigger: 'blur'}],
+};
+const formRef = ref(null);
+const form = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: true,
+  type: ['小明'],
+  resource: '小红',
+  desc: '',
+  options: [],
+});
+// 提交
+const onSubmit = (formEl) => {
+  // 表单校验
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      console.log(form);
+      ElMessage.success('提交成功！');
+    } else {
+      return false;
+    }
+  });
+};
+// 重置
+const onReset = (formEl) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>

web/src/views/admin/demo/Import.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="container">
+      <div class="handle-box">
+        <el-upload
+            action="#"
+            :limit="1"
+            accept=".xlsx, .xls"
+            :show-file-list="false"
+        >
+          <el-button class="mr10" type="success">批量导入</el-button>
+        </el-upload>
+        <el-link href="/template.xlsx" target="_blank">下载模板</el-link>
+      </div>
+      <el-table :data="tableData" border class="table" header-cell-class-name="table-header">
+        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
+        <el-table-column prop="name" label="姓名"></el-table-column>
+        <el-table-column prop="sno" label="学号"></el-table-column>
+        <el-table-column prop="class" label="班级"></el-table-column>
+        <el-table-column prop="age" label="年龄"></el-table-column>
+        <el-table-column prop="sex" label="性别"></el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+const tableData = ref([]);
+// 获取表格数据
+const getData = () => {
+  tableData.value = [
+    {
+      id: 1,
+      name: '小明',
+      sno: 'S001',
+      class: '一班',
+      age: '10',
+      sex: '男',
+    },
+    {
+      id: 2,
+      name: '小红',
+      sno: 'S002',
+      class: '一班',
+      age: '9',
+      sex: '女',
+    },
+  ];
+};
+getData();
+
+
+</script>
+
+<style scoped>
+.handle-box {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.table {
+  width: 100%;
+  font-size: 14px;
+}
+
+.mr10 {
+  margin-right: 10px;
+}
+</style>

web/src/views/admin/demo/Table.vue

@@ -0,0 +1,220 @@
+<template>
+  <div>
+    <div class="container">
+      <div class="handle-box">
+        <el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
+          <el-option key="1" label="广东省" value="广东省"></el-option>
+          <el-option key="2" label="湖南省" value="湖南省"></el-option>
+        </el-select>
+        <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
+        <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
+        <el-button type="primary" :icon="Plus">新增</el-button>
+      </div>
+      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
+        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
+        <el-table-column prop="name" label="用户名"></el-table-column>
+        <el-table-column label="账户余额">
+          <template #default="scope">￥{{ scope.row.money }}</template>
+        </el-table-column>
+        <el-table-column label="头像(查看大图)" align="center">
+          <template #default="scope">
+            <el-image
+                class="table-td-thumb"
+                :src="scope.row.thumb"
+                :z-index="10"
+                :preview-src-list="[scope.row.thumb]"
+                preview-teleported
+            >
+            </el-image>
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="地址"></el-table-column>
+        <el-table-column label="状态" align="center">
+          <template #default="scope">
+            <el-tag
+                :type="scope.row.state === '成功' ? 'success' : scope.row.state === '失败' ? 'danger' : ''"
+            >
+              {{ scope.row.state }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="date" label="注册时间"></el-table-column>
+        <el-table-column label="操作" width="220" align="center">
+          <template #default="scope">
+            <el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
+              编辑
+            </el-button>
+            <el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)" v-permiss="16">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination">
+        <el-pagination
+            background
+            layout="total, prev, pager, next"
+            :current-page="query.pageIndex"
+            :page-size="query.pageSize"
+            :total="pageTotal"
+            @current-change="handlePageChange"
+        ></el-pagination>
+      </div>
+    </div>
+
+    <!-- 编辑弹出框 -->
+    <el-dialog title="编辑" v-model="editVisible" width="30%">
+      <el-form label-width="70px">
+        <el-form-item label="用户名">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="地址">
+          <el-input v-model="form.address"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+				<span class="dialog-footer">
+					<el-button @click="editVisible = false">取 消</el-button>
+					<el-button type="primary" @click="saveEdit">确 定</el-button>
+				</span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {reactive, ref} from 'vue';
+import {ElMessage, ElMessageBox} from 'element-plus';
+import {Delete, Edit, Plus, Search} from '@element-plus/icons-vue';
+
+const query = reactive({
+  address: '',
+  name: '',
+  pageIndex: 1,
+  pageSize: 10
+});
+const tableData = ref();
+const pageTotal = ref(0);
+// 获取表格数据
+const getData = () => {
+  tableData.value = [{
+    "id": 1,
+    "name": "张三",
+    "money": 123,
+    "address": "广东省东莞市长安镇",
+    "state": "成功",
+    "date": "2019-11-1",
+    "thumb": "https://lin-xin.gitee.io/images/post/wms.png"
+  },
+    {
+      "id": 2,
+      "name": "李四",
+      "money": 456,
+      "address": "广东省广州市白云区",
+      "state": "成功",
+      "date": "2019-10-11",
+      "thumb": "https://lin-xin.gitee.io/images/post/node3.png"
+    },
+    {
+      "id": 3,
+      "name": "王五",
+      "money": 789,
+      "address": "湖南省长沙市",
+      "state": "失败",
+      "date": "2019-11-11",
+      "thumb": "https://lin-xin.gitee.io/images/post/parcel.png"
+    },
+    {
+      "id": 4,
+      "name": "赵六",
+      "money": 1011,
+      "address": "福建省厦门市鼓浪屿",
+      "state": "成功",
+      "date": "2019-10-20",
+      "thumb": "https://lin-xin.gitee.io/images/post/notice.png"
+    }
+  ]
+  pageTotal.value = 5
+};
+getData();
+
+// 查询操作
+const handleSearch = () => {
+  query.pageIndex = 1;
+  getData();
+};
+// 分页导航
+const handlePageChange = (val) => {
+  query.pageIndex = val;
+  getData();
+};
+
+// 删除操作
+const handleDelete = (index) => {
+  // 二次确认删除
+  ElMessageBox.confirm('确定要删除吗？', '提示', {
+    type: 'warning'
+  })
+      .then(() => {
+        ElMessage.success('删除成功');
+        tableData.value.splice(index, 1);
+      })
+      .catch(() => {
+      });
+};
+
+// 表格编辑时弹窗和保存
+const editVisible = ref(false);
+let form = reactive({
+  name: '',
+  address: ''
+});
+let idx = -1;
+const handleEdit = (index, row) => {
+  idx = index;
+  form.name = row.name;
+  form.address = row.address;
+  editVisible.value = true;
+};
+const saveEdit = () => {
+  editVisible.value = false;
+  ElMessage.success(`修改第 ${idx + 1} 行成功`);
+  tableData.value[idx].name = form.name;
+  tableData.value[idx].address = form.address;
+};
+</script>
+
+<style scoped>
+.handle-box {
+  margin-bottom: 20px;
+}
+
+.handle-select {
+  width: 120px;
+}
+
+.handle-input {
+  width: 300px;
+}
+
+.table {
+  width: 100%;
+  font-size: 14px;
+}
+
+.red {
+  color: #F56C6C;
+}
+
+.mr10 {
+  margin-right: 10px;
+}
+
+.table-td-thumb {
+  display: block;
+  margin: auto;
+  width: 40px;
+  height: 40px;
+}
+</style>