vibe-web-sdk 1.0.0

package/api/application/index.js

@@ -0,0 +1,38 @@
+import axios from 'axios';
+import request from '../../utils/request';
+
+export function getCategoryWithApps() {
+  return request({
+    url: '/bdp/home/getCategoryWithApps',
+    headers: {
+      isToken: true
+    },
+    method: 'post'
+  })
+}
+
+export function getLanguages(){
+  return request({
+    url: '/bdp/language/access/page',
+    data:{},
+    method: 'post'
+  })
+}
+
+export function getPlatFormLogo(){
+  return axios({
+    url: '/bdp/images/access/getPlatFormLogo',
+    method: 'post'
+  }).then((res)=>{
+    return res.data;
+  })
+}
+
+export function accessAppStat(appId){
+  return request({
+    url: '/bdp/visitor/app/stat/' + appId,
+    method: 'get'
+  })
+}
+
+

package/api/login.js

@@ -0,0 +1,75 @@
+import { encrypt } from '../utils/jsencrypt';
+import request from '../utils/request';
+
+// 测试方法
+export function getUserInfoList() {
+  return request({
+    url: '/bdp/menu/getUserInfoList',
+    headers: {
+      isToken: true
+    },
+    method: 'get'
+  })
+}
+
+// 登录方法
+export function login(username, password,supportNoPwd,roleType) {
+  password =  encrypt(password)
+  const data = {
+    username,
+    password,
+    supportNoPwd,
+    roleType
+  }
+  return request({
+    url: '/bdp/userLogin/login',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data: data
+  })
+}
+
+// 退出方法
+export function logout() {
+  return request({
+    url: '/bdp/userLogin/out',
+    method: 'post'
+  })
+}
+
+// 获取当前用户详细信息
+export function getCurrentLoginUser() {
+  return request({
+    url: '/bdp/userLogin/currentLoginUser',
+    headers: {
+      isToken: true
+    },
+    method: 'get'
+  })
+}
+
+// 注册方法
+export function register(data) {
+  return request({
+    url: '/register',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取验证码
+export function getCodeImg() {
+  return request({
+    url: '/captchaImage',
+    headers: {
+      isToken: false
+    },
+    method: 'get',
+    timeout: 20000
+  })
+}

package/assets/css/css-vars.css

@@ -0,0 +1,19 @@
+html.dark{
+    background-color:#121a22;
+    --el-bg-color: #121a22;
+    color-scheme:dark;--el-color-primary:#409eff;
+    --el-color-primary-light-3:#3375b9;--el-color-primary-light-5:#2a598a;--el-color-primary-light-7:#213d5b;--el-color-primary-light-8:#1d3043;--el-color-primary-light-9:#18222c;
+    --el-color-primary-dark-2:#66b1ff;--el-color-success:#67c23a;--el-color-success-light-3:#4e8e2f;--el-color-success-light-5:#3e6b27;--el-color-success-light-7:#2d481f;
+    --el-color-success-light-8:#25371c;--el-color-success-light-9:#1c2518;--el-color-success-dark-2:#85ce61;--el-color-warning:#e6a23c;--el-color-warning-light-3:#a77730;
+    --el-color-warning-light-5:#7d5b28;--el-color-warning-light-7:#533f20;--el-color-warning-light-8:#3e301c;--el-color-warning-light-9:#292218;--el-color-warning-dark-2:#ebb563;
+    --el-color-danger:#f56c6c;--el-color-danger-light-3:#b25252;--el-color-danger-light-5:#854040;--el-color-danger-light-7:#582e2e;--el-color-danger-light-8:#412626;--el-color-danger-light-9:#2b1d1d;
+    --el-color-danger-dark-2:#f78989;--el-color-error:#f56c6c;--el-color-error-light-3:#b25252;--el-color-error-light-5:#854040;--el-color-error-light-7:#582e2e;
+    --el-color-error-light-8:#412626;--el-color-error-light-9:#2b1d1d;--el-color-error-dark-2:#f78989;--el-color-info:#909399;--el-color-info-light-3:#6b6d71;
+    --el-color-info-light-5:#525457;--el-color-info-light-7:#393a3c;--el-color-info-light-8:#2d2d2f;--el-color-info-light-9:#202121;--el-color-info-dark-2:#a6a9ad;
+    --el-box-shadow:0px 12px 32px 4px rgba(0, 0, 0, 0.36),0px 8px 20px rgba(0, 0, 0, 0.72);--el-box-shadow-light:0px 0px 12px rgba(0, 0, 0, 0.72);--el-box-shadow-lighter:0px 0px 6px rgba(0, 0, 0, 0.72);
+    --el-box-shadow-dark:0px 16px 48px 16px rgba(0, 0, 0, 0.72),0px 12px 32px #000000,0px 8px 16px -8px #000000;--el-bg-color-page:#0a0a0a;
+    --el-bg-color-overlay:#1d1e1f;--el-text-color-primary:#E5EAF3;--el-text-color-regular:#CFD3DC;--el-text-color-secondary:#A3A6AD;--el-text-color-placeholder:#8D9095;--el-text-color-disabled:#6C6E72;
+    --el-border-color-darker:#636466;--el-border-color-dark:#58585B;--el-border-color:#4C4D4F;--el-border-color-light:#414243;--el-border-color-lighter:#363637;--el-border-color-extra-light:#2B2B2C;
+    --el-fill-color-darker:#424243;--el-fill-color-dark:#39393A;--el-fill-color:#303030;--el-fill-color-light:#262727;--el-fill-color-lighter:#1D1D1D;--el-fill-color-extra-light:#191919;--el-fill-color-blank:transparent;
+    --el-mask-color:rgba(0, 0, 0, 0.8);--el-mask-color-extra-light:rgba(0, 0, 0, 0.3)}html.dark .el-button{--el-button-disabled-text-color:rgba(255, 255, 255, 0.5)}
+    html.dark .el-card{--el-card-bg-color:#121a22}html.dark .el-empty{--el-empty-fill-color-0:var(--el-color-black);--el-empty-fill-color-1:#4b4b52;--el-empty-fill-color-2:#36383d;--el-empty-fill-color-3:#1e1e20;--el-empty-fill-color-4:#262629;--el-empty-fill-color-5:#202124;--el-empty-fill-color-6:#212224;--el-empty-fill-color-7:#1b1c1f;--el-empty-fill-color-8:#1c1d1f;--el-empty-fill-color-9:#18181a}

package/assets/css/frame.css

@@ -0,0 +1,129 @@
+html {
+  height: 100%;
+}
+
+body {
+  font-size:medium;
+  height: 100%;
+  margin: 0px !important;
+}
+
+@font-face {
+  font-family: "futura";
+  src: url("../../assets/futura.ttf");
+}
+
+#app {
+  height: 100%;
+}
+
+.container {
+  padding-top: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  flex-grow: 1;
+  width: calc(100% - 20px);
+  max-width: 1650px !important;
+  margin-top: 0px !important;
+  margin: 0 auto;
+  height: auto;
+}
+
+.dark .container {
+  padding-top: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  flex-grow: 1;
+  width: calc(100% - 20px);
+  max-width: 1650px !important;
+  margin-top: 0px !important;
+  margin: 0 auto;
+  height: auto;
+}
+
+.dark .main-container {
+  margin-top: 10px !important;
+  display: flex;
+  margin: 0 auto;
+  max-width: 1650px;
+  height: auto;
+  border: 1px solid #242633;
+  border-radius: 15px !important;
+}
+
+.main-container {
+  margin-top: 10px !important;
+  margin-left: auto;
+  margin-right: auto;
+  border: 1px solid #d5daee;
+  box-shadow: 0 0 50px 0 hsla(0, 0%, 5%, .1);
+  border-radius: 15px;
+  display: flex;
+  max-width: 1650px;
+  height: auto;
+}
+
+
+/* 暗黑模式 - 增加body选择器提高特异性 */
+html.dark ::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1) !important;
+    border-radius: 4px !important;
+}
+
+html.dark ::-webkit-scrollbar-thumb {
+    background: #2e3842 !important;
+    border-radius: 4px !important;
+    height: 30px !important;
+}
+
+/* 关键：这里必须是直接选择器，不能有空格 */
+html.dark ::-webkit-scrollbar-thumb:hover {
+    background: #252f3b !important;
+}
+
+html.dark ::-webkit-scrollbar-button {
+    display: none !important;
+}
+
+html.dark ::-webkit-scrollbar-corner {
+    background: transparent !important;
+}
+
+/* 非暗黑模式 - 增加body:not()选择器 */
+html:not(.dark) ::-webkit-scrollbar-track {
+    background: #f9f9f9 !important;
+}
+
+html:not(.dark) ::-webkit-scrollbar-thumb {
+    background: #f1f0f0 !important;
+}
+
+html:not(.dark) ::-webkit-scrollbar-thumb:hover {
+    background: #f1f0f0 !important;
+}
+
+/* 共同样式 */
+::-webkit-scrollbar {
+    width: 0px;
+    height: 5px;
+}
+
+::-webkit-scrollbar-button {
+    display: none;
+}
+
+::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
+
+
+.dark .el-overlay {
+  background-color: rgb(27, 36, 46, 0.7) !important;
+  /* 你可以调整颜色和透明度 */
+}
+
+.el-overlay {
+  background-color: rgb(249, 249, 250, 0.7) !important;
+  /* 你可以调整颜色和透明度 */
+}

package/assets/images/flags/cn.svg

@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480"><defs><path id="a" fill="#ffde00" d="M-.6.8L0-1 .6.8-1-.3h2z"/></defs><path fill="#de2910" d="M0 0h640v480H0z"/><use width="30" height="20" transform="matrix(71.9991 0 0 72 120 120)" xlink:href="#a"/><use width="30" height="20" transform="matrix(-12.33562 -20.5871 20.58684 -12.33577 240.3 48)" xlink:href="#a"/><use width="30" height="20" transform="matrix(-3.38573 -23.75998 23.75968 -3.38578 288 95.8)" xlink:href="#a"/><use width="30" height="20" transform="matrix(6.5991 -23.0749 23.0746 6.59919 288 168)" xlink:href="#a"/><use width="30" height="20" transform="matrix(14.9991 -18.73557 18.73533 14.99929 240 216)" xlink:href="#a"/></svg>

package/assets/images/flags/de.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3">
+  <rect width="5" height="3" fill="#000"/>
+  <rect width="5" height="2" fill="#D00"/>
+  <rect width="5" height="1" fill="#FFCE00"/>
+</svg>

package/assets/images/flags/gb.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30">
+  <clipPath id="a">
+    <path d="M0 0v30h60V0z"/>
+  </clipPath>
+  <clipPath id="b">
+    <path d="M30 15h30v15zv15H0zH0V0zV0h30z"/>
+  </clipPath>
+  <g clip-path="url(#a)">
+    <path d="M0 0v30h60V0z" fill="#012169"/>
+    <path d="M0 0l60 30m0-30L0 30" stroke="#fff" stroke-width="6"/>
+    <path d="M0 0l60 30m0-30L0 30" clip-path="url(#b)" stroke="#C8102E" stroke-width="4"/>
+    <path d="M30 0v30M0 15h60" stroke="#fff" stroke-width="10"/>
+    <path d="M30 0v30M0 15h60" stroke="#C8102E" stroke-width="6"/>
+  </g>
+</svg>

package/components/selfFooter/index.vue

@@ -0,0 +1,264 @@
+<template>
+  <div v-show="flag" class="foot-btn">
+    <el-button type="info" size="large" @click="toggleDrawer">
+      <el-icon>
+        <Grid />
+      </el-icon>
+      {{ appsLabel }}
+    </el-button>
+    <el-button type="info" size="large" @click="toHomePage">
+      <el-icon>
+        <HomeFilled />
+      </el-icon>
+      {{ homeLabel }}
+    </el-button>
+    <el-button type="info" size="large" @click="toSetting" >
+      <el-icon>
+        <Tools />
+      </el-icon>
+      {{ settingLabel }}
+    </el-button>
+  </div>
+
+  <el-drawer v-model="drawer" direction="btt" size="100%" title="Apps">
+    <div class="container">
+      <el-row :gutter="20">
+        <el-col
+          :xs="24"
+          :sm="24"
+          :md="12"
+          :lg="12"
+          :xl="12"
+          v-for="category in categoryWithApps"
+          :key="category.id"
+        >
+          <div class="bg-purple">
+            <div style="padding: 4px 12px">
+              <div style="margin-bottom: 30px">
+                <h2 class="h4">{{ category.name }}</h2>
+              </div>
+              <el-row>
+                <el-col
+                  class="app-container"
+                  v-for="app in category.apps"
+                  :key="app.id"
+                  :xs="12"
+                  :sm="12"
+                  :md="4"
+                  :lg="4"
+                  :xl="4"
+                >
+                  <div class="app-box">
+                    <a class="app" v-if="app.icontype==='ELEMENT-ICON'" :href="app.applink" target="_self" :style="{backgroundColor:category.color}">
+                      <el-icon  class="app-icon" >
+                        <component :is="app.icon" />
+                      </el-icon>
+                    </a>
+                    <a class="app" v-if="app.icontype==='PIC'" :href="app.applink" target="_self" :style="{backgroundColor:category.color}">
+                      <el-image :src="app.pic" class="pic-icon"></el-image>
+                    </a>
+                  </div>
+                  <div class="text-center" style="margin-top: 10px">
+                    {{ app.appidalias }}
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { getCategoryWithApps } from "../../api/application/index";
+import en from "../../lang/en";
+import zh from "../../lang/zh";
+export default {
+  name: "self-footer",
+  data() {
+    return {
+      icon: "Shop",
+      drawer: false,
+      flag: true,
+      categoryWithApps: {},
+      homeLabel: "",
+      appsLabel: "",
+      settingLabel: "",
+    };
+  },
+  computed: {
+    ...mapGetters(["language"]),
+    language() {
+      return this.$store.state.user.language;
+    },
+  },
+  methods: {
+    toSetting(){
+      window.location.href = "/apps/communication/";
+    },
+    toHomePage(){
+      window.location.href = "/home";
+    },
+    toggleDrawer() {
+      this.$data.drawer = !this.$data.drawer;
+      if (this.drawer) {
+        this.getCategoryWithApps(localStorage.getItem("locale"));
+      }
+    },
+    getCategoryWithApps(language) {
+      getCategoryWithApps().then((response) => {
+        this.categoryWithApps = response.data;
+        this.categoryWithApps.forEach((category)=>{
+            try{
+              category.name = JSON.parse(category.name)[language];
+            }catch(error){
+              // do noting
+            }
+            category.apps.forEach(app=>{
+              try{
+                app.appidalias = JSON.parse(app.appidalias)[language];
+              }catch(error){
+                // do nothing
+              }
+            })
+          });
+        if (this.categoryWithApps && this.categoryWithApps.length !== 0) {
+          this.categoryWithApps.forEach((category) => {
+            if (category.name === "non-group") {
+              category.name = "Non-Group";
+            }
+            category.apps.forEach((app) => {
+              app.applink = "/apps/" + app.applink + "/";
+            });
+          });
+        }
+      });
+    },
+  },
+  created() {
+    if (this.language == "en-US") {
+      this.appsLabel = en.footerApps;
+      this.homeLabel = en.footerHome;
+      this.settingLabel = en.footerSetting;
+    } else if (this.language == "zh-CN") {
+      this.appsLabel = zh.footerApps;
+      this.homeLabel = zh.footerHome;
+      this.settingLabel = zh.footerSetting;
+    } else {
+      this.appsLabel = zh.footerApps;
+      this.homeLabel = zh.footerHome;
+      this.settingLabel = zh.footerSetting;
+    }
+  },
+  watch: {
+    $route(to) {
+      if (to.path == "/login") {
+        this.flag = false;
+      } else {
+        this.flag = true;
+      }
+    },
+    language() {
+      if (this.language == "en-US") {
+        this.appsLabel = en.footerApps;
+        this.homeLabel = en.footerHome;
+        this.settingLabel = en.footerSetting;
+      } else if (this.language == "zh-CN") {
+        this.appsLabel = zh.footerApps;
+        this.homeLabel = zh.footerHome;
+        this.settingLabel = zh.footerSetting;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.foot-btn {
+  justify-content: center !important;
+}
+
+.el-icon {
+  margin-right: 10px;
+}
+
+.container {
+  max-width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.el-col {
+  margin-bottom: 10px;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.app-box {
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.app-box:hover {
+  transform: scale(1.2);
+}
+
+.app {
+  width: 80px;
+  height: 80px;
+  background-color: #227bfd;
+  border-radius: 10px;
+  margin: auto;
+  display: block;
+}
+
+.app-icon {
+  color: white;
+  font-size: 40px;
+  margin-top: 25%;
+  margin-left: 25%;
+}
+
+.foot-btn {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  z-index: 999;
+  height: 40px;
+}
+
+.pic-icon {
+  color: white;
+  width: 80px;
+  height: 80px;
+}
+
+.el-button {
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  width: 125px;
+}
+
+.dark .bg-purple {
+  background: #343a40;
+  border-radius: 0.375rem;
+  height: 100%;
+}
+
+.bg-purple {
+  background: #dcdfe6;
+  border-radius: 0.375rem;
+  height: 100%;
+}
+
+.app-container {
+  padding: 4px 12px;
+}
+</style>