trtc-cloud-js-sdk 1.0.13 → 2.0.0

package/examples/vueDemo/src/main.js

@@ -0,0 +1,11 @@
+import {createApp} from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+import installElementPlus from './plugins/element'
+import './assets/css/icon.css'
+const app = createApp(App)
+installElementPlus(app)
+app.use(createPinia())
+    .use(router)
+    .mount('#app')

package/examples/vueDemo/src/plugins/element.js

@@ -0,0 +1,17 @@
+import ElementPlus from 'element-plus'
+import { createI18n } from 'vue-i18n'
+import 'element-plus/lib/theme-chalk/index.css'
+import localeZH from 'element-plus/lib/locale/lang/zh-cn'
+import localeEN from 'element-plus/lib/locale/lang/en'
+import messages from '../utils/i18n'
+
+const i18n = createI18n({
+  locale: localeZH.name,
+  fallbackLocale: localeEN.name,
+  messages,
+})
+
+export default (app) => {
+  app.use(ElementPlus, { locale:localeZH })
+  app.use(i18n)
+}

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

@@ -0,0 +1,73 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import Home from '../views/Home.vue';
+
+const routes = [
+  {
+    path: '/',
+    // redirect: '/basic/trtc',
+    redirect: '/github',
+  },
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+    // 【数据统计】
+    children: [
+      {
+        path: '/basic/trtc',
+        name: '基本音视频',
+        meta: {
+          title: '基本音视频',
+        },
+        component: () => import(/* webpackChunkName: "dashboard" */ '../views/basic/trtc.vue'),
+      },
+      {
+        path: '/github',
+        name: 'Github 统计',
+        meta: {
+          title: 'Github 统计',
+        },
+        component: () => import(/* webpackChunkName: "dashboard" */ '../views/github/index.vue'),
+      },
+      {
+        path: '/sdkAppId',
+        name: '新增 sdkAppId',
+        meta: {
+          title: '新增 sdkAppId',
+        },
+        component: () => import(/* webpackChunkName: "dashboard" */ '../views/sdkAppId/index.vue'),
+      },
+      {
+        path: '/feature',
+        name: '渗透率',
+        meta: {
+          title: '渗透率',
+        },
+        component: () => import(/* webpackChunkName: "dashboard" */ '../views/feature/index.vue'),
+      },
+    ],
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+router.beforeEach((to, from, next) => {
+  document.title = `${to.meta.title}`;
+  // const role = localStorage.getItem('ms_username');
+  // if (!role && to.path !== '/login') {
+  //     next('/login');
+  // } else if (to.meta.permission) {
+  //     // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
+  //     role === 'admin'
+  //         ? next()
+  //         : next('/403');
+  // } else {
+  //     next();
+  // }
+  next();
+});
+
+export default router;

package/examples/vueDemo/src/store/sidebar.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+
+export const useSidebarStore = defineStore('sidebar', {
+  state: () => {
+    return {
+      collapse: true
+    }
+  },
+  getters: {
+      
+  },
+  actions: {
+    handleCollapse() {
+      this.collapse = !this.collapse;
+    }
+  }
+})

package/examples/vueDemo/src/store/tags.js

@@ -0,0 +1,48 @@
+import { defineStore } from 'pinia'
+
+export const useTagsStore = defineStore('tags', {
+    state: () => {
+        return {
+            list: []
+        }
+    },
+    getters: {
+        show: (state) => {
+            return state.list.length > 0;
+        },
+        nameList: (state) => {
+            return state.list.map(item => item.name);
+        }
+    },
+    actions: {
+        delTagsItem(index) {
+            this.list.splice(index, 1);
+        },
+        setTagsItem(data) {
+            this.list.push(data)
+        },
+        clearTags() {
+            this.list = []
+        },
+        closeTagsOther(data) {
+            this.list = data;
+        },
+        closeCurrentTag(data) {
+            console.log(data)
+            for (let i = 0, len = this.list.length; i < len; i++) {
+                const item = this.list[i];
+                if (item.path === data.$route.fullPath) {
+                    if (i < len - 1) {
+                        data.$router.push(this.list[i + 1].path);
+                    } else if (i > 0) {
+                        data.$router.push(this.list[i - 1].path);
+                    } else {
+                        data.$router.push("/");
+                    }
+                    this.list.splice(i, 1);
+                    break;
+                }
+            }
+        },
+    }
+})

package/examples/vueDemo/src/utils/i18n.js

@@ -0,0 +1,24 @@
+export default {
+    'zh-cn': {
+        i18n: {
+            breadcrumb: '国际化产品',
+            tips: '通过切换语言按钮，来改变当前内容的语言。',
+            btn: '切换英文',
+            title1: '常用用法',
+            p1: '要是你把你的秘密告诉了风，那就别怪风把它带给树。',
+            p2: '没有什么比信念更能支撑我们度过艰难的时光了。',
+            p3: '只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。'
+        }
+    },
+    'en': {
+        i18n: {
+            breadcrumb: 'International Products',
+            tips: 'Click on the button to change the current language. ',
+            btn: 'Switch Chinese',
+            title1: 'Common usage',
+            p1: "If you reveal your secrets to the wind you should not blame the wind for  revealing them to the trees.",
+            p2: "Nothing can help us endure dark times better than our faith. ",
+            p3: "If you can do what you do best and be happy, you're further along in life  than most people."
+        }
+    }
+}

package/examples/vueDemo/src/utils/request.js

@@ -0,0 +1,34 @@
+import axios from 'axios';
+
+const service = axios.create({
+    // process.env.NODE_ENV === 'development' 来判断是否开发环境
+    // easy-mock服务挂了，暂时不使用了
+    // baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
+    timeout: 5000
+});
+
+service.interceptors.request.use(
+    config => {
+        return config;
+    },
+    error => {
+        console.log(error);
+        return Promise.reject();
+    }
+);
+
+service.interceptors.response.use(
+    response => {
+        if (response.status === 200) {
+            return response.data;
+        } else {
+            Promise.reject();
+        }
+    },
+    error => {
+        console.log(error);
+        return Promise.reject();
+    }
+);
+
+export default service;

package/examples/vueDemo/src/utils/utils.js

@@ -0,0 +1,35 @@
+/**
+ * 从 window.location.href 中获取指定key的value
+ * @param {*} key 要获取的 key
+ * @returns window.location.href 中指定key对应的value
+ * @example
+ * const value = getUrlParam(key);
+ */
+export function getUrlParam(key) {
+  const url = window.location.href.replace(/^[^?]*\?/, '');
+  const regexp = new RegExp(`(^|&)${key}=([^&#]*)(&|$|)`, 'i');
+  const paramMatch = url.match(regexp);
+
+  return paramMatch ? paramMatch[2] : null;
+}
+
+export function validParams(userId, roomId, sdkAppId, userSignature) {
+  const errors = [];
+  if (!userId) {
+    errors.push('"userId" is not valid');
+  }
+  if (roomId === 0) {
+    errors.push('"roomId" is not valid');
+  }
+  if (sdkAppId === 0) {
+    errors.push('"sdkAppId" is not valid');
+  }
+  if (userSignature === '') {
+    errors.push('"userSignature" is not valid');
+  }
+  if (errors.length) {
+    console.error(errors);
+    return false;
+  }
+  return true;
+}

package/examples/vueDemo/src/views/Home.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="about">
+    <v-header />
+    <v-sidebar />
+    <div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
+      <!-- <v-tags></v-tags> -->
+      <div class="content">
+        <router-view v-slot="{ Component }">
+          <transition name="move" mode="out-in">
+            <keep-alive :include="tags.nameList">
+              <component :is="Component" />
+            </keep-alive>
+          </transition>
+        </router-view>
+        <!-- <el-backtop target=".content"></el-backtop> -->
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { useSidebarStore } from '../store/sidebar'
+import { useTagsStore } from '../store/tags'
+import vHeader from "../components/Header.vue";
+import vSidebar from "../components/Sidebar.vue";
+import vTags from "../components/Tags.vue";
+export default {
+  components: {
+    vHeader,
+    vSidebar,
+    vTags,
+  },
+  setup() {
+    const sidebar = useSidebarStore();
+    const tags = useTagsStore();
+    return {
+      tags,
+      sidebar,
+    };
+  },
+};
+</script>
+<style>
+.content {
+  padding: 0px;
+}
+</style>

package/examples/vueDemo/src/views/I18n.vue

@@ -0,0 +1,40 @@
+<template>
+    <section class="main">
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-global"></i>
+                    {{$t('i18n.breadcrumb')}}
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <span>{{$t('i18n.tips')}}</span>
+            <el-button
+                type="primary"
+                @click="$i18n.locale = $i18n.locale === 'zh-cn'?'en':'zh-cn';"
+            >{{$t('i18n.btn')}}</el-button>
+            <div class="list">
+                <h2>{{$t('i18n.title1')}}</h2>
+                <p>{{$t('i18n.p1')}}</p>
+                <p>{{$t('i18n.p2')}}</p>
+                <p>{{$t('i18n.p3')}}</p>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script>
+export default {
+    name: "i18n"
+};
+</script>
+
+<style scoped>
+.list {
+    padding: 30px 0;
+}
+.list p {
+    margin-bottom: 20px;
+}
+</style>

package/examples/vueDemo/src/views/Icon.vue

@@ -0,0 +1,229 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-emoji"></i> 自定义图标
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <h2>使用方法</h2>
+            <p style="line-height: 50px;">直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）</p>
+            <p class="example-p">
+                <i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i>
+                <span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span>
+            </p>
+            <p class="example-p">
+                <i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></i>
+                <span>&lt;i class=&quot;el-icon-lx-weibo&quot;&gt;&lt;/i&gt;</span>
+            </p>
+            <p class="example-p">
+                <i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i>
+                <span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
+            </p>
+            <br />
+            <h2>图标</h2>
+            <div class="search-box">
+                <el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
+            </div>
+            <ul>
+                <li class="icon-li" v-for="(item,index) in list" :key="index">
+                    <div class="icon-li-content">
+                        <i :class="`el-icon-lx-${item}`"></i>
+                        <span>{{item}}</span>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import { computed, ref } from "vue";
+export default {
+    name: "icon",
+    setup() {
+        const iconList = [
+            "attentionforbid",
+            "attentionforbidfill",
+            "attention",
+            "attentionfill",
+            "tag",
+            "tagfill",
+            "people",
+            "peoplefill",
+            "notice",
+            "noticefill",
+            "mobile",
+            "mobilefill",
+            "voice",
+            "voicefill",
+            "unlock",
+            "lock",
+            "home",
+            "homefill",
+            "delete",
+            "deletefill",
+            "notification",
+            "notificationfill",
+            "notificationforbidfill",
+            "like",
+            "likefill",
+            "comment",
+            "commentfill",
+            "camera",
+            "camerafill",
+            "warn",
+            "warnfill",
+            "time",
+            "timefill",
+            "location",
+            "locationfill",
+            "favor",
+            "favorfill",
+            "skin",
+            "skinfill",
+            "news",
+            "newsfill",
+            "record",
+            "recordfill",
+            "emoji",
+            "emojifill",
+            "message",
+            "messagefill",
+            "goods",
+            "goodsfill",
+            "crown",
+            "crownfill",
+            "move",
+            "add",
+            "hot",
+            "hotfill",
+            "service",
+            "servicefill",
+            "present",
+            "presentfill",
+            "pic",
+            "picfill",
+            "rank",
+            "rankfill",
+            "male",
+            "female",
+            "down",
+            "top",
+            "recharge",
+            "rechargefill",
+            "forward",
+            "forwardfill",
+            "info",
+            "infofill",
+            "redpacket",
+            "redpacket_fill",
+            "roundadd",
+            "roundaddfill",
+            "friendadd",
+            "friendaddfill",
+            "cart",
+            "cartfill",
+            "more",
+            "moreandroid",
+            "back",
+            "right",
+            "shop",
+            "shopfill",
+            "question",
+            "questionfill",
+            "roundclose",
+            "roundclosefill",
+            "roundcheck",
+            "roundcheckfill",
+            "global",
+            "mail",
+            "punch",
+            "exit",
+            "upload",
+            "read",
+            "file",
+            "link",
+            "full",
+            "group",
+            "friend",
+            "profile",
+            "addressbook",
+            "calendar",
+            "text",
+            "copy",
+            "share",
+            "wifi",
+            "vipcard",
+            "weibo",
+            "remind",
+            "refresh",
+            "filter",
+            "settings",
+            "scan",
+            "qrcode",
+            "cascades",
+            "apps",
+            "sort",
+            "searchlist",
+            "search",
+            "edit",
+        ];
+        const keyword = ref("");
+        const list = computed(() => {
+            return iconList.filter((item) => {
+                return item.indexOf(keyword.value) !== -1;
+            });
+        });
+
+        return {
+            iconList,
+            keyword,
+            list,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.example-p {
+    height: 45px;
+    display: flex;
+    align-items: center;
+}
+.search-box {
+    text-align: center;
+    margin-top: 10px;
+}
+.search {
+    width: 300px;
+}
+ul,
+li {
+    list-style: none;
+}
+.icon-li {
+    display: inline-block;
+    padding: 10px;
+    width: 120px;
+    height: 120px;
+}
+.icon-li-content {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+.icon-li-content i {
+    font-size: 36px;
+    color: #606266;
+}
+.icon-li-content span {
+    margin-top: 10px;
+    color: #787878;
+}
+</style>