Add index page (#84)

Co-authored-by: AceDataCloud <[email protected]>
Co-authored-by: Germey <[email protected]>

change/@acedatacloud-nexior-9b201727-136c-438a-a9b5-70f0da4a1541.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add index page",
+  "packageName": "@acedatacloud/nexior",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

index.html

@@ -37,7 +37,7 @@
       width: 13.33333px;
       height: 13.33333px;
       border-radius: 50%;
-      background: currentColor;
+      background-color: #277186;
       animation-timing-function: cubic-bezier(0, 1, 1, 0);
     }
     .lds-ellipsis div:nth-child(1) {

src/assets/scss/_common.scss

@@ -26,6 +26,7 @@ html.dark,
 #app {
   width: 100%;
   height: 100%;
+  overflow: auto;
 
   .el-main {
     padding: 0 !important;

src/components/common/BottomFooter.vue

@@ -1,17 +1,13 @@
 <template>
-  <el-container id="footer" class="footer pt-7">
+  <el-container id="footer" class="footer">
     <el-row class="w-full">
       <el-col class="container" :span="18" :offset="3">
         <el-row>
-          <el-col :span="12" :offset="6" class="p-t text-center">
+          <el-col :span="24" class="text-center">
             <p>
-              <span
-                ><a href="https://acedata.cloud">{{ $t('common.entity.website') }}</a> © {{ new Date().getFullYear() }}
-                {{ $t('common.entity.copyright') }}
-              </span>
-              <span class="ml-2">
-                <a href="https://beian.miit.gov.cn/">京ICP备18021371号-2 </a>
-              </span>
+              <a href="https://platform.acedata.cloud">{{ $t('common.entity.website') }}</a> ©
+              {{ new Date().getFullYear() }}
+              {{ $t('common.entity.copyright') }}
             </p>
           </el-col>
         </el-row>
@@ -39,11 +35,24 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
-$height: 80px;
+<style lang="scss" scoped>
+.container {
+  margin: auto;
+  max-width: 1200px;
+  padding: 30px 0 20px 0;
+}
+
 .footer {
-  height: $height;
-  background: radial-gradient(circle at 0 2%, #111827, #1a125d 99%);
+  background-color: var(--el-color-primary);
   color: white;
+  padding: 0;
+  .title {
+    font-size: 1.2rem;
+    font-weight: 400;
+  }
+  a {
+    text-decoration: none;
+    color: white;
+  }
 }
 </style>

src/components/common/DarkSelector.vue

@@ -62,7 +62,6 @@ export default defineComponent({
 
 <style lang="scss">
 .switch {
-  margin-top: 2px;
   --n-rail-color-active: var(--el-color-primary) !important;
   --n-loading-color: var(--el-color-primary) !important;
   border-radius: 10px !important;

src/components/common/DarkSelector2.vue

@@ -0,0 +1,67 @@
+<template>
+  <dark-switch class="switch" dark-background="#333" light-background="#fff" />
+</template>
+
+<script lang="ts">
+import { getDomain } from '@/utils';
+import { getCookie, setCookie } from 'typescript-cookie';
+import { defineComponent } from 'vue';
+import { Switch as DarkSwitch, toggleDark, isDark } from 'vue-dark-switch';
+
+export default defineComponent({
+  components: {
+    DarkSwitch
+  },
+  emits: ['update:dark'],
+  computed: {
+    dark() {
+      return getCookie('THEME') === 'dark';
+    },
+    switchValue() {
+      return isDark.value;
+    }
+  },
+  watch: {
+    switchValue(val) {
+      console.log('switchValue', val);
+      this.setCookie(val);
+    },
+    dark(val) {
+      document.documentElement.classList.toggle('dark', val);
+      this.setCookie(this.dark);
+    }
+  },
+  mounted() {
+    console.log('dark selector mounted');
+    if (this.dark) {
+      toggleDark(true);
+      document.documentElement.classList.add('dark');
+    } else {
+      toggleDark(false);
+      document.documentElement.classList.remove('dark');
+    }
+  },
+  methods: {
+    setCookie(isDark: boolean) {
+      setCookie('THEME', isDark ? 'dark' : 'light', {
+        path: '/',
+        domain: getDomain()
+      });
+    }
+  }
+});
+</script>
+
+<style lang="scss">
+.switch {
+  --n-rail-color-active: var(--el-color-primary) !important;
+  --n-loading-color: var(--el-color-primary) !important;
+  border-radius: 10px !important;
+  border: 1px solid var(--el-border-color);
+  overflow: hidden;
+  .n-switch__button {
+    border-radius: 50% !important;
+    box-shadow: none !important;
+  }
+}
+</style>

src/components/common/TopHeader.vue

@@ -0,0 +1,193 @@
+<template>
+  <el-row class="header">
+    <el-col :md="4" :xs="24">
+      <logo @click="onHome" />
+    </el-col>
+    <el-col :md="16" :xs="13">
+      <el-menu :default-active="active" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="onSelect">
+        <el-menu-item v-if="site?.features?.chat?.enabled" v-t="'index.title.chat'" index="/chat"></el-menu-item>
+        <el-menu-item
+          v-if="site?.features?.midjourney?.enabled"
+          v-t="'index.title.midjourney'"
+          index="/midjourney"
+        ></el-menu-item>
+        <el-menu-item v-if="site?.features?.qrart?.enabled" v-t="'index.title.qrart'" index="/qrart"></el-menu-item>
+      </el-menu>
+    </el-col>
+    <el-col :md="4" :xs="11">
+      <div v-if="!authenticated" class="mt-4 pr-10">
+        <el-button type="primary" class="float-right" size="small" round @click="onLogin">{{
+          $t('common.button.login')
+        }}</el-button>
+        <dark-selector class="float-right mr-4" />
+      </div>
+      <div v-else class="float-right">
+        <dark-selector />
+        <div class="console" @click="onConsole">
+          {{ $t('common.button.console') }}
+        </div>
+        <el-dropdown trigger="click">
+          <img :src="user?.avatar || defaultAvatar" class="avatar" />
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="onProfile">{{ $t('common.button.profile') }}</el-dropdown-item>
+              <el-dropdown-item @click="onLogout">{{ $t('common.button.logout') }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import defaultAvatar from '@/assets/images/avatar.png';
+import { getBaseUrlAuth } from '@/utils';
+import { ROUTE_AUTH_LOGIN, ROUTE_CONSOLE_ROOT, ROUTE_INDEX } from '@/router';
+import { ElCol, ElRow, ElDropdown, ElMenu, ElMenuItem, ElDropdownItem, ElButton } from 'element-plus';
+import DarkSelector from './DarkSelector2.vue';
+import Logo from './Logo.vue';
+
+export default defineComponent({
+  name: 'TopHeader',
+  components: {
+    ElCol,
+    Logo,
+    ElRow,
+    DarkSelector,
+    ElDropdown,
+    ElMenu,
+    ElMenuItem,
+    ElDropdownItem,
+    ElButton
+  },
+  data() {
+    return {
+      defaultAvatar
+    };
+  },
+  computed: {
+    site() {
+      return this.$store.state.site;
+    },
+    dark() {
+      return this.$store.getters.dark;
+    },
+    active() {
+      return this.$route.matched[0].path;
+    },
+    user() {
+      return this.$store.getters.user;
+    },
+    authenticated() {
+      return this.$store.getters.authenticated;
+    }
+  },
+  methods: {
+    onSelect(val: string) {
+      this.$router.push(val);
+    },
+    onHome() {
+      this.$router.push({
+        name: ROUTE_INDEX
+      });
+    },
+    onLogin() {
+      this.$router.push({
+        name: ROUTE_AUTH_LOGIN
+      });
+    },
+    onProfile() {
+      const baseUrlAuth = getBaseUrlAuth();
+      window.open(`${baseUrlAuth}/user/profile`, '_blank');
+    },
+    onVerify() {
+      const baseUrlAuth = getBaseUrlAuth();
+      window.open(`${baseUrlAuth}/user/verify`, '_blank');
+    },
+    onConsole() {
+      this.$router.push({
+        name: ROUTE_CONSOLE_ROOT
+      });
+    },
+    async onLogout() {
+      await this.$store.dispatch('resetToken');
+      await this.$store.dispatch('resetUser');
+      const url = window.location.href;
+      const baseUrlAuth = getBaseUrlAuth();
+      const redirectUrl = `${baseUrlAuth}/auth/logout?redirect=${url}`;
+      window.location.href = redirectUrl;
+    }
+  }
+});
+</script>
+
+<style lang="scss">
+$height: 60px;
+.header {
+  z-index: 999;
+  width: 100%;
+  background: var(--el-bg-color);
+
+  .logo {
+    height: 40px;
+    width: 120px;
+    cursor: pointer;
+    margin-top: 8px;
+    margin-right: 20px;
+    float: right;
+  }
+
+  .el-menu {
+    --el-menu-hover-bg-color: var(--el-bg-color);
+    --el-menu-active-color: var(--el-color-primary);
+    background: none;
+    border: none;
+    height: $height;
+    .el-menu-item {
+      height: $height;
+      color: inherit !important;
+      &.is-active {
+        color: inherit !important;
+        border-bottom: 2px solid var(--el-color-primary);
+      }
+      &:hover {
+        border-bottom: 2px solid var(--el-color-primary);
+      }
+    }
+  }
+
+  .avatar {
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    margin-top: 10px;
+    margin-right: 20px;
+    margin-left: 10px;
+  }
+  .console {
+    color: inherit !important;
+    height: 60px;
+    line-height: 60px;
+    margin: 0 10px;
+    font-size: 14px;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .locale {
+    cursor: pointer;
+    display: inline-block;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .header {
+    .logo {
+      margin-left: auto;
+      margin-right: auto;
+      float: initial;
+      display: block;
+    }
+  }
+}
+</style>

src/i18n/index.ts

@@ -67,6 +67,7 @@ export const getLocale = (lang?: string): string => {
 
 export const loadLocaleMessages = async (i18n: I18n, locale: string) => {
   const names = [
+    'index',
     'api',
     'application',
     'qrart',