New Admin UI layout

.gitignore

@@ -41,3 +41,5 @@ csghub-portal
 
 cmd/csghub-portal/__debug_*
 app.log
+
+frontend/coverage

frontend/src/admin.js

@@ -0,0 +1,68 @@
+import { createApp, h } from "vue";
+import { createI18n } from "vue-i18n";
+import { useCookies } from "vue3-cookies";
+import { createPinia } from "pinia";
+import ElementPlus from "element-plus";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import { ROUTERS } from "./components/admin_next/router";
+
+import "element-plus/dist/index.css";
+import "./assets/stylesheets/element-plus/_variables.css";
+import "./assets/stylesheets/markdown.css";
+import "./style.css";
+import { createWebHistory, createRouter } from "vue-router";
+
+import zhCn from "element-plus/dist/locale/zh-cn.mjs";
+import en from "./locales/en.js";
+import zh from "./locales/zh.js";
+
+import SvgIcon from "./components/shared/SvgIcon.vue";
+import CsgButton from "./components/shared/CsgButton.vue"
+// import FlashMessage from "./components/shared/FlashMessage.vue";
+
+import AdminLayout from "./components/admin_next/admin_component/Layout.vue";
+
+const { cookies } = useCookies()
+const defaultLanguage = ['zh', 'zh-cn', 'zh-CN', 'zh-tw'].includes(navigator.language) ? 'zh' : 'en';
+
+const i18n = createI18n({
+  legacy: false,
+  locale: cookies.get('locale') || defaultLanguage,
+  messages: {
+    en,
+    zh,
+  },
+});
+
+const pinia = createPinia();
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: ROUTERS,
+});
+
+const app = createApp(AdminLayout);
+// register Element UI Icons
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component);
+}
+app.component("SvgIcon", SvgIcon);
+app.component("CsgButton", CsgButton)
+// app.component("FlashMessage", FlashMessage);
+
+app.provide("defaultTags", DEFAULT_TAGS);
+app.provide("csghubServer", CSGHUB_SERVER);
+app.provide("onPremise", ON_PREMISE || false);
+app.provide(
+  "nameRule",
+  /^(?=.{2,64}$)(?!.*[-_.]{2})[a-zA-Z][a-zA-Z0-9_.-]*[a-zA-Z0-9]+$/
+);
+
+app.use(ElementPlus, {
+  locale: zhCn,
+});
+app.use(i18n);
+app.use(pinia);
+app.use(router);
+
+app.mount("#admin");

frontend/src/components/admin_next/admin_component/Card/Card.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    class="bg-white rounded-xl shadow border border-[#eaecf0] overflow-hidden">
+    <!-- card header -->
+    <slot name="header">
+      <div
+        v-if="title"
+        class="px-6 py-7 border-b border-gray-200">
+        <h2 class="text-lg text-gray-900">
+          {{ title }}
+        </h2>
+      </div>
+    </slot>
+
+    <!-- card body -->
+    <ElCard
+      size="small"
+      :border="false"
+      class="next"
+      v-bind="$attrs">
+      <slot />
+    </ElCard>
+
+    <!-- card footer -->
+    <div class="py-4 flex justify-end px-6 border-t border-gray-200">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ElCard } from 'element-plus'
+  defineProps({
+    title: {
+      type: String,
+      required: false
+    }
+  })
+</script>
+
+<style lang="less">
+  .el-card.next {
+    --el-card-border-color: transparent;
+    border: unset;
+  }
+
+  .el-card.next.is-always-shadow {
+    box-shadow: none;
+  }
+</style>

frontend/src/components/admin_next/admin_component/Container.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="container">
+    <!-- header part -->
+    <section
+      class="header-section"
+      :class="{ 'with-padding': withPadding }">
+      <!-- breadcrumb -->
+      <div class="breadcrumb-wrapper">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item :to="{ path: BASE_URL, replace: true }">
+            <el-icon>
+              <House />
+            </el-icon>
+          </el-breadcrumb-item>
+          <template
+            v-for="(item, index) in breadcrumbs"
+            :key="index">
+            <el-breadcrumb-item :to="item.to" :class="item.to ? text-brand-700 : ''">{{
+              item.text
+            }}</el-breadcrumb-item>
+          </template>
+        </el-breadcrumb>
+      </div>
+
+      <!-- title -->
+      <div class="title-section">
+        <!-- return -->
+        <el-icon
+          v-if="showBack"
+          class="back-icon"
+          @click="$router.back()">
+          <ArrowLeft />
+        </el-icon>
+
+        <div class="title-content">
+          <h1 class="main-title text-gray-900 text-3xl">{{ title }}</h1>
+          <p
+            v-if="subtitle"
+            class="subtitle text-gray-600 text-md">
+            {{ subtitle }}
+          </p>
+        </div>
+
+        <!-- header actions -->
+        <div
+          v-if="$slots.headerActions"
+          class="header-actions">
+          <slot name="headerActions"></slot>
+        </div>
+      </div>
+    </section>
+
+    <!-- content -->
+    <section
+      class="content-section overflow-hidden"
+      :class="{ 'with-padding': withPadding }">
+      <slot></slot>
+    </section>
+  </div>
+</template>
+
+<script setup>
+  import { House, ArrowLeft } from '@element-plus/icons-vue'
+  import { BASE_URL } from '../router';
+
+  defineProps({
+    title: {
+      type: String,
+      required: true
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    breadcrumbs: {
+      type: Array,
+      default: () => []
+    },
+    showBack: {
+      type: Boolean,
+      default: false
+    },
+    withPadding: {
+      type: Boolean,
+      default: true
+    }
+  })
+</script>
+
+<style scoped>
+  :deep(.el-breadcrumb__inner.is-link) {
+    @apply text-brand-700;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: white;
+    min-width: 0;
+    width: 100%;
+    overflow-x: hidden;
+  }
+
+  .header-section {
+    display: flex;
+    flex-direction: column;
+    @apply gap-5;
+  }
+
+  .header-section.with-padding {
+    padding: 2rem;
+  }
+
+  .breadcrumb-wrapper {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .title-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .title-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .back-icon {
+    font-size: 1.25rem;
+    cursor: pointer;
+    margin-right: 0.5rem;
+    margin-top: 0.5rem;
+  }
+
+  .main-title {
+    font-size: 1.875rem;
+    font-weight: 500;
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+  }
+
+  .subtitle {
+    font-size: 1rem;
+    font-weight: 300;
+    margin: 0;
+    margin-top: 1rem;
+    padding: 0;
+  }
+
+  .header-actions {
+    margin-left: 1rem;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .content-section {
+    flex: 1;
+    min-width: 0;
+    overflow-x: auto;
+  }
+
+  .content-section.with-padding {
+    padding: 0 2rem 2rem 2rem;
+  }
+</style>

frontend/src/components/admin_next/admin_component/Layout.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-col h-screen">
+    <Navbar />
+    <div class="page-responsive-width flex flex-1 overflow-hidden">
+      <AdminMenu
+        :isCollapse="isCollapse"
+        @hideAdminMenu="hideAdminMenu" />
+      <div class="flex-1 overflow-hidden">
+        <el-scrollbar class="h-full">
+          <!-- <router-view /> -->
+          <router-view v-slot="{ Component }">
+            <Component
+              :is="Component"
+              @showAdminMenu="showAdminMenu" />
+          </router-view>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import {
+    ElContainer,
+    ElScrollbar,
+    ElHeader,
+    ElAside,
+    ElMain
+  } from 'element-plus'
+  import { Navbar } from './index'
+  import AdminMenu from './Menu.vue'
+
+  const headerHeight = ref(72)
+  const isCollapse = ref(false)
+
+  const showAdminMenu = () => {
+    isCollapse.value = false
+  }
+
+  const hideAdminMenu = () => {
+    isCollapse.value = true
+  }
+</script>