trtc-cloud-js-sdk 1.0.13 → 2.0.0

package/examples/vueDemo/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "vueDemo",
+  "version": "5.2.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "homepage": "./",
+  "dependencies": {
+    "axios": "^0.21.1",
+    "dayjs": "^1.11.5",
+    "echarts": "^5.3.3",
+    "element-plus": "^1.0.2-beta.52",
+    "less": "^4.1.3",
+    "md-editor-v3": "^2.2.0",
+    "pinia": "^2.0.14",
+    "vue": "^3.1.2",
+    "vue-cropperjs": "^5.0.0",
+    "vue-i18n": "^9.0.0",
+    "vue-router": "^4.0.10",
+    "vue-schart": "^2.0.0",
+    "wangeditor": "^4.7.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.0.0",
+    "@vue/compiler-sfc": "^3.1.2",
+    "vite": "2.3.7"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/examples/vueDemo/src/App.vue

@@ -0,0 +1,12 @@
+<template>
+    <router-view />
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+@import "./assets/css/main.css";
+@import "./assets/css/color-dark.css";
+</style>

package/examples/vueDemo/src/api/index.js

@@ -0,0 +1,59 @@
+import request from '../utils/request';
+import axios from 'axios';
+
+export const fetchData = query => {
+    return request({
+        url: './table.json',
+        method: 'get',
+        params: query
+    });
+};
+
+
+const baseUrl = "https://open-demo-statistics-7bta8a0904c-1252463788.ap-shanghai.app.tcloudbase.com";
+// ================================================================================================
+// ========================================【 Github 数据 】========================================
+// ================================================================================================
+
+/**
+ * 获取仓库列表
+ */
+export function getRepositoriesList() {
+	const apiUrl = `${baseUrl}/release/getRepositoriesList`;
+	return axios.get(apiUrl).then(res => res.data);
+};
+/**
+ * 获取 github 数据
+ */
+export function getGithubDataList(params) {
+	const apiUrl = `${baseUrl}/release/githubData`;
+	return axios.get(apiUrl, { params }).then(res => res.data);
+};
+
+// ================================================================================================
+// ========================================【 Demo 数据统计 】=======================================
+// ================================================================================================
+/**
+ * 获取上报的项目列表
+ */
+export function getProjectName(params) {
+	const apiUrl = `${baseUrl}/release/projectApi`;
+	return axios.get(apiUrl, { params }).then(res => res.data);
+};
+/**
+ * 获取新增 sdkAppId 数据列表
+ */
+export function getSdkAppId(params) {
+  console.warn('--- getSdkAppId params = ', params);
+	const apiUrl = `${baseUrl}/release/sdkAppIdApi`;
+	return axios.get(apiUrl, {
+    params: { ...params, projectNameList: params.projectNameList.join(',') }
+  }).then(res => res.data);
+};
+/**
+ * 获取功能渗透率数据列表
+ */
+export function getFeatureList(params) {
+	const apiUrl = `${baseUrl}/release/featureApi`;
+	return axios.get(apiUrl, { params }).then(res => res.data);
+};

package/examples/vueDemo/src/assets/css/color-dark.css

@@ -0,0 +1,28 @@
+.header{
+    background-color: #242f42;
+}
+.login-wrap{
+    background: #324157;
+}
+.plugins-tips{
+    background: #eef1f6;
+}
+.plugins-tips a{
+    color: #20a0ff;
+}
+.el-upload--text em {
+    color: #20a0ff;
+}
+.pure-button{
+    background: #20a0ff;
+}
+.tags-li.active {
+    border: 1px solid #409EFF;
+    background-color: #409EFF;
+}
+.message-title{
+    color: #20a0ff;
+}
+.collapse-btn:hover{
+    background: rgb(40,52,70);
+}

package/examples/vueDemo/src/assets/css/icon.css

@@ -0,0 +1,4 @@
+[class*=" el-icon-lx"],
+[class^=el-icon-lx] {
+    font-family: lx-iconfont !important;
+}

package/examples/vueDemo/src/assets/css/main.css

@@ -0,0 +1,177 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body,
+#app,
+.wrapper {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
+}
+
+a {
+    text-decoration: none
+}
+
+
+.content-box {
+    position: absolute;
+    left: 250px;
+    right: 0;
+    top: 70px;
+    bottom: 0;
+    padding-bottom: 30px;
+    -webkit-transition: left .3s ease-in-out;
+    transition: left .3s ease-in-out;
+    background: #f0f0f0;
+}
+
+.content {
+    width: auto;
+    height: 100%;
+    padding: 10px;
+    overflow-y: scroll;
+    box-sizing: border-box;
+}
+
+.content-collapse {
+    left: 65px;
+}
+
+.container {
+    padding: 30px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.crumbs {
+    margin: 10px 0;
+}
+
+.el-table th {
+    background-color: #f5f7fa !important;
+}
+
+.pagination {
+    margin: 20px 0;
+    text-align: right;
+}
+
+.plugins-tips {
+    padding: 20px 10px;
+    margin-bottom: 20px;
+}
+
+.el-button+.el-tooltip {
+    margin-left: 10px;
+}
+
+.el-table tr:hover {
+    background: #f6faff;
+}
+
+.mgb20 {
+    margin-bottom: 20px;
+}
+
+.move-enter-active,
+.move-leave-active {
+    transition: opacity .1s ease;
+}
+
+.move-enter-from,
+.move-leave-to {
+    opacity: 0;
+}
+
+/*BaseForm*/
+
+.form-box {
+    width: 600px;
+}
+
+.form-box .line {
+    text-align: center;
+}
+
+.el-time-panel__content::after,
+.el-time-panel__content::before {
+    margin-top: -7px;
+}
+
+.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
+    padding-bottom: 0;
+}
+
+/*Upload*/
+
+.pure-button {
+    width: 150px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    color: #fff;
+    border-radius: 3px;
+}
+
+.g-core-image-corp-container .info-aside {
+    height: 45px;
+}
+
+.el-upload--text {
+    background-color: #fff;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    box-sizing: border-box;
+    width: 360px;
+    height: 180px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.el-upload--text .el-icon-upload {
+    font-size: 67px;
+    color: #97a8be;
+    margin: 40px 0 16px;
+    line-height: 50px;
+}
+
+.el-upload--text {
+    color: #97a8be;
+    font-size: 14px;
+    text-align: center;
+}
+
+.el-upload--text em {
+    font-style: normal;
+}
+
+/*VueEditor*/
+
+.ql-container {
+    min-height: 400px;
+}
+
+.ql-snow .ql-tooltip {
+    transform: translateX(117.5px) translateY(10px) !important;
+}
+
+.editor-btn {
+    margin-top: 20px;
+}
+
+/*markdown*/
+
+.v-note-wrapper .v-note-panel {
+    min-height: 500px;
+}

package/examples/vueDemo/src/components/Header.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="header">
+    <!-- 折叠按钮 -->
+    <div class="collapse-btn" @click="collapseChage">
+      <i v-if="!sidebar.collapse" class="el-icon-s-fold"></i>
+      <i v-else class="el-icon-s-unfold"></i>
+    </div>
+    <div class="logo">Demo</div>
+
+    <!-- <div class="header-right">
+      <div class="header-user-con">
+        <div class="btn-bell">
+          <el-tooltip effect="dark" :content="message ? `有${message}条未读消息` : `消息中心`" placement="bottom">
+            <router-link to="/tabs">
+              <i class="el-icon-bell"></i>
+            </router-link>
+          </el-tooltip>
+          <span class="btn-bell-badge" v-if="message"></span>
+        </div>
+        <div class="user-avator">
+          <img src="../assets/img/img.jpg" />
+        </div>
+        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
+          <span class="el-dropdown-link">
+            {{ username }}
+            <i class="el-icon-caret-bottom"></i>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
+                <el-dropdown-item>项目仓库</el-dropdown-item>
+              </a>
+              <el-dropdown-item command="user">个人中心</el-dropdown-item>
+              <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div> -->
+  </div>
+</template>
+<script>
+import { computed, onMounted } from "vue";
+import { useSidebarStore } from '../store/sidebar'
+import { useRouter } from "vue-router";
+export default {
+  setup() {
+    const username = localStorage.getItem("ms_username");
+    const message = 2;
+
+    const sidebar = useSidebarStore();
+    // 侧边栏折叠
+    const collapseChage = () => {
+      sidebar.handleCollapse();
+    };
+
+    onMounted(() => {
+      if (document.body.clientWidth < 1500) {
+        collapseChage();
+      }
+    });
+
+    // 用户名下拉菜单选择事件
+    const router = useRouter();
+    const handleCommand = (command) => {
+      if (command == "loginout") {
+        localStorage.removeItem("ms_username");
+        router.push("/login");
+      } else if (command == "user") {
+        router.push("/user");
+      }
+    };
+
+    return {
+      sidebar,
+      username,
+      message,
+      collapseChage,
+      handleCommand,
+    };
+  },
+};
+</script>
+<style scoped>
+.header {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 70px;
+  font-size: 22px;
+  color: #fff;
+}
+
+.collapse-btn {
+  float: left;
+  padding: 0 21px;
+  cursor: pointer;
+  line-height: 70px;
+}
+
+.header .logo {
+  float: left;
+  width: 250px;
+  line-height: 70px;
+}
+
+.header-right {
+  float: right;
+  padding-right: 50px;
+}
+
+.header-user-con {
+  display: flex;
+  height: 70px;
+  align-items: center;
+}
+
+.btn-fullscreen {
+  transform: rotate(45deg);
+  margin-right: 5px;
+  font-size: 24px;
+}
+
+.btn-bell,
+.btn-fullscreen {
+  position: relative;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  border-radius: 15px;
+  cursor: pointer;
+}
+
+.btn-bell-badge {
+  position: absolute;
+  right: 0;
+  top: -2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background: #f56c6c;
+  color: #fff;
+}
+
+.btn-bell .el-icon-bell {
+  color: #fff;
+}
+
+.user-name {
+  margin-left: 10px;
+}
+
+.user-avator {
+  margin-left: 20px;
+}
+
+.user-avator img {
+  display: block;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.el-dropdown-link {
+  color: #fff;
+  cursor: pointer;
+}
+
+.el-dropdown-menu__item {
+  text-align: center;
+}
+</style>

package/examples/vueDemo/src/components/Sidebar.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="sidebar">
+    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="sidebar.collapse" background-color="#324157"
+      text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
+      <template v-for="(item, idx) in items">
+        <template v-if="item.subs">
+          <el-submenu :index="item.index" :key="item.index">
+            <template #title>
+              <i :class="item.icon"></i>
+              <span>{{ item.title }}</span>
+            </template>
+            <template v-for="subItem in item.subs">
+              <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
+                <template #title>{{ subItem.title }}</template>
+                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
+                  {{ threeItem.title }}</el-menu-item>
+              </el-submenu>
+              <el-menu-item v-else :index="subItem.index" :key="subItem.index + '-' + idx">{{ subItem.title }}
+              </el-menu-item>
+            </template>
+          </el-submenu>
+        </template>
+        <template v-else>
+          <el-menu-item :index="item.index" :key="item.index">
+            <i :class="item.icon"></i>
+            <template #title>{{ item.title }}</template>
+          </el-menu-item>
+        </template>
+      </template>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import { computed } from "vue";
+import { useSidebarStore } from '../store/sidebar'
+import { useRoute } from "vue-router";
+export default {
+  setup() {
+    const items = [
+      // {
+      //   icon: "el-icon-lx-home",
+      //   index: "/dashboard",
+      //   title: "系统首页",
+      // },
+      {
+        icon: "el-icon-lx-calendar",
+        index: "3",
+        title: "基础功能",
+        subs: [
+          {
+            index: "/basic/trtc",
+            title: "基本音视频",
+          },
+        ],
+      },
+
+      // 【数据管理】
+      {
+        icon: "el-icon-lx-calendar",
+        index: "3",
+        title: "数据管理",
+        subs: [
+          {
+            index: "/github",
+            title: "GitHub 统计",
+          },
+          {
+            index: "/sdkAppId",
+            title: "新增 sdkAppId",
+          },
+          {
+            index: "/feature",
+            title: "渗透率",
+          },
+        ],
+      },
+    ];
+
+    const route = useRoute();
+    const onRoutes = computed(() => {
+      return route.path;
+    });
+
+    const sidebar = useSidebarStore();
+
+    return {
+      items,
+      onRoutes,
+      sidebar,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.sidebar {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 70px;
+  bottom: 0;
+  overflow-y: scroll;
+}
+
+.sidebar::-webkit-scrollbar {
+  width: 0;
+}
+
+.sidebar-el-menu:not(.el-menu--collapse) {
+  width: 250px;
+}
+
+.sidebar>ul {
+  height: 100%;
+}
+</style>