mdm-client 1.0.0

package/README.md

@@ -0,0 +1,92 @@
+# meeting-system-component
+
+
+
+## Getting started
+
+To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+
+Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+
+## Add your files
+
+- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
+- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
+
+```
+cd existing_repo
+git remote add origin http://10.1.160.67/hy-communication/video-center/video-dispatch/vue/meeting-system-component.git
+git branch -M master
+git push -uf origin master
+```
+
+## Integrate with your tools
+
+- [ ] [Set up project integrations](http://10.1.160.67/hy-communication/video-center/video-dispatch/vue/meeting-system-component/-/settings/integrations)
+
+## Collaborate with your team
+
+- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
+- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
+- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
+- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
+- [ ] [Automatically merge when pipeline succeeds](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
+
+## Test and Deploy
+
+Use the built-in continuous integration in GitLab.
+
+- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
+- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
+- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
+- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
+- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
+
+***
+
+# Editing this README
+
+When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template.
+
+## Suggestions for a good README
+Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
+
+## Name
+Choose a self-explaining name for your project.
+
+## Description
+Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
+
+## Badges
+On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
+
+## Visuals
+Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
+
+## Installation
+Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
+
+## Usage
+Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
+
+## Support
+Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
+
+## Roadmap
+If you have ideas for releases in the future, it is a good idea to list them in the README.
+
+## Contributing
+State if you are open to contributions and what your requirements are for accepting them.
+
+For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
+
+You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
+
+## Authors and acknowledgment
+Show your appreciation to those who have contributed to the project.
+
+## License
+For open source projects, say how it is licensed.
+
+## Project status
+If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.

package/index.js

@@ -0,0 +1,35 @@
+import "@/assets/style/index.scss"
+import LivePoint from "./src/components/LivePoint/LivePoint.vue"
+import liveMulti from './src/components/LiveMulti/LiveMulti.vue'
+import scale from "./src/directive/scale"
+import clickOutside from "./src/directive/clickOutside"
+import drag from "./src/directive/drag"
+import throttle from "./src/directive/throttle"
+
+const components = {
+  LivePoint,
+  liveMulti
+}
+
+function install(Vue) {
+  const keys = Object.keys(components)
+  keys.forEach(name => {
+    const component = components[name]
+    Vue.component(component.name || name, component)
+  })
+  
+  // 注册现有的scale指令
+  Vue.directive(scale.directiveName, {
+    inserted: scale.inserted
+  })
+  
+  // 注册新的Vue2指令
+  clickOutside(Vue)
+  drag(Vue)
+  throttle(Vue)
+}
+
+export default {
+  install,
+  ...components
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "mdm-client",
+  "version": "1.0.0",
+  "private": false,
+  "main": "index.js",
+  "author": {
+    "name": "jackyclearliu",
+    "email": "jackyclearliu@gmail.com"
+  },
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "build:hx-component": "vue-cli-service build --target lib --dest lib src/components/index.js"
+  },
+  "dependencies": {
+    "@fit2cloud-ui/vue-virtual-tree": "^1.0.1",
+    "core-js": "^3.8.3",
+    "crypto-js": "^4.2.0",
+    "lodash-es": "^4.17.21",
+    "mitt": "^3.0.1",
+    "sass": "1.26.5",
+    "sass-loader": "8",
+    "vue": "^2.6.14",
+    "vue2-teleport": "^1.1.4"
+  },
+  "peerDependencies": {
+    "axios": "^1.7.7",
+    "dayjs": "^1.11.13",
+    "element-ui": "^2.15.14"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/src/App.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="page">
+    <el-button @click="openCallBoardDialog">点对点组件</el-button>
+    <el-button @click="openMeeingReadyDialog">多人组件</el-button>
+    <!-- <el-button @click="testPointMeetingApi">点对点组件api</el-button>
+    <el-button @click="testMultiMeetingApi">多端组件api</el-button> -->
+
+    <LivePoint
+      :defaultCallNum="defaultCallNum"
+      v-model="isCallBoardShow"
+      :inviteData="inviteData"
+      :isInviteReceiveShow="isPointInviteReceiveShow"
+      @inviteReceiveClose="closePointInviteReceive"
+      ref="livePointRef"
+    />
+    <LiveMulti
+      :inviteList="inviteList"
+      :deviceList="deviceList"
+      :inviteData="inviteData"
+      :tempRoomName="tempRoomName"
+      :tempRoomNum="tempRoomNum"
+      :dialogType="meetingReadyDialogType"
+      :isInviteReceiveShow="isMultiInviteReceiveShow"
+      v-model="isMeetingReadyDialogShow"
+      :userData="userData"
+      :org="org"
+      :baseUrl="baseUrl"
+      :token="token"
+      :defaultInviteWay="defaultInviteWay"
+      :isCustomizeMiniInvitations="isCustomizeMiniInvitations"
+      ref="liveMultiRef"
+      @inviteReceiveClose="closeMultiInviteReceive"
+    />
+  </div>
+</template>
+
+<script>
+import { mittBus, ShowMessage } from "./utils/index.js";
+import LiveClient from './utils/livekit/live-client-esm.js';
+
+export default {
+  name: 'App',
+  data() {
+    return {
+      livePointRef: null,
+      liveMultiRef: null,
+      isCallBoardShow: false,
+      isMeetingReadyDialogShow: false,
+      tempRoomName: '',
+      tempRoomNum: '',
+      meetingReadyDialogType: 'launch',
+      defaultCallNum: '',
+      inviteList: [],
+      deviceList: [],
+      userData: {
+        userId: 'liujinbo',
+        username: 'test01',
+        mobile: '18151665421',
+        officeName: 'test_department',
+      },
+      org: '7906019982501000',
+      isPointInviteReceiveShow: false,
+      isMultiInviteReceiveShow: false,
+      inviteData: {},
+      defaultInviteWay: 'identity',
+      isCustomizeMiniInvitations: false,
+      baseUrl: "https://10.2.12.103:8443",
+      roomServerUrl: "wss://10.2.12.103:8443",
+      token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJMb2dpbkluZm8iOnsibG9naW5Db2RlIjoibGl1amluYm8iLCJ1c2VyTmFtZSI6IuWImOmUpuazoiIsInRlbmFudElEIjo3OTA2MDE5OTgyNTAxMDAwLCJkZXB0VHJlZSI6Ijc5MDYwNzA4NTA5MDEwMDAvNzkwNzk1MzkyNjcwMTAwMCIsInVzZXJJRCI6NzkwNjI1NzUyOTgwMTAwMCwidmVyc2lvbklEIjo3OTA3OTQ5NzY0MjAxMDAwfSwicGxhdGZvcm1JRCI6MCwicGhvbmUiOiIiLCJleHAiOjE3NTU3OTE2NTksImlhdCI6MTc1NTA3MTY1OX0.8en34FhMTvYFcDSfqG4oP1qN_sXmxpJM6KkklktFJoc",
+      liveClient: null,
+      showMessage: null,
+    };
+  },
+  mounted() {
+    this.showMessage = new ShowMessage();
+    this.addBusEvent();
+    this.initLiveClient();
+  },
+  beforeDestroy() {
+    this.removeBusEvent();
+    this.removeAllEvent();
+    this.resetLiveClient();
+  },
+  methods: {
+    launchMultiMeeting(e) {
+      this.meetingReadyDialogType = 'launch';
+      this.inviteList = e?.inviteList ? e.inviteList : [];
+      this.deviceList = e?.deviceList ? e.deviceList : [];
+      this.defaultInviteWay = e?.defaultInviteWay || 'identity';
+      this.isCustomizeMiniInvitations = e?.isCustomizeMiniInvitations || false;
+      this.isMeetingReadyDialogShow = true;
+    },
+    multiMeetingAppeInvite(e) {
+      if (this.$refs.liveMultiRef) {
+        this.$refs.liveMultiRef.appendInvite(e);
+      }
+    },
+    joinMultiMeeting(e) {
+      this.meetingReadyDialogType = 'join';
+      this.tempRoomNum = e.roomNum;
+      this.isMeetingReadyDialogShow = true;
+    },
+    openCallBoardDialog(e) {
+      this.defaultCallNum = e?.defaultCallNum || '';
+      this.isCallBoardShow = true;
+    },
+    openPointInviteReceive(e) {
+      this.inviteData = e;
+      this.isPointInviteReceiveShow = true;
+    },
+    openMultiInviteReceive(e) {
+      this.inviteData = e;
+      this.isMultiInviteReceiveShow = true;
+    },
+    closePointInviteReceive() {
+      this.isPointInviteReceiveShow = false;
+    },
+    closeMultiInviteReceive() {
+      this.isMultiInviteReceiveShow = false;
+    },
+    makePointCall(e) {
+      if (e.type === 'voice') {
+        this.$refs.livePointRef.makeVoiceCall({
+          inviteName: e?.inviteName || '',
+          invitePhone: e?.callNum || '',
+          inviteType: e?.inviteType || 0,
+        });
+      } else if (e.type === 'video') {
+        this.$refs.livePointRef.makeVideoCall({
+          inviteName: e?.inviteName || '',
+          invitePhone: e?.callNum || '',
+          inviteType: e?.inviteType || 0,
+        });
+      } else if (e.type === 'miniLink') {
+        this.$refs.livePointRef.makeMiniCall({
+          inviteName: e?.inviteName || '',
+          invitePhone: e?.callNum || '',
+          inviteType: e?.inviteType || 0,
+        });
+      }
+    },
+    launchPointMeeting(e) {
+      this.$refs.livePointRef.launchPcInvite(e.inviteUserData, e.meetingType);
+    },
+    pullMonitorDevice(e) {
+      if (this.$refs.liveMultiRef) {
+        this.$refs.liveMultiRef.pullMonitorDevice(e?.monitorID || e?.equipmentID, e.label);
+      }
+    },
+    initLiveClient() {
+      this.tempRoomName = this.userData.username + '的视频会议';
+      const initParams = {
+        userId: this.userData.userId,
+        org: this.org,
+        platformId: 0,
+        roomName: this.tempRoomName,
+        baseUrl: this.baseUrl,
+        roomServerUrl: this.roomServerUrl,
+        token: this.token,
+      };
+      console.log('initParams', initParams);
+      this.liveClient = new LiveClient(initParams);
+      this.initLiveClientEvent();
+      window['liveClient'] = this.liveClient;
+      mittBus.emit('liveClientInitSuccess');
+    },
+    initLiveClientEvent() {
+      if (!this.liveClient) {
+        this.showMessage.error({
+          message: 'liveClient实例未初始化',
+        });
+        return;
+      }
+      this.liveClient.on('socketOpen', () => {
+        console.log('websocket链接建立成功');
+      });
+      this.liveClient.on('receiveInviteSuccess', e => {
+        console.log('收到会议邀请', e);
+        if (e.isP2P == 1) {
+          this.openPointInviteReceive(e);
+        } else {
+          this.openMultiInviteReceive(e);
+        }
+      });
+      this.liveClient.on('receiveInviteCancel', e => {
+        console.log('收到会议邀请撤回', e);
+        if (this.isPointInviteReceiveShow && this.inviteData.roomNum === e.roomNum) {
+          this.closePointInviteReceive();
+        }
+        if (this.isMultiInviteReceiveShow && this.inviteData.roomNum === e.roomNum) {
+          this.closeMultiInviteReceive();
+        }
+      });
+    },
+    removeAllEvent() {
+      if (!this.liveClient) {
+        this.showMessage.error({
+          message: 'liveClient实例未初始化',
+        });
+        return;
+      }
+      this.liveClient.removeAllListeners();
+    },
+    resetLiveClient() {
+      if (this.liveClient) {
+        this.liveClient.closeSocket();
+        window['liveClient'] = null;
+        this.liveClient = null;
+      }
+    },
+    addBusEvent() {
+      mittBus.on('launchMultiMeeting', this.launchMultiMeeting);
+      mittBus.on('multiMeetingAppeInvite', this.multiMeetingAppeInvite);
+      mittBus.on('openPointMeetingBoard', this.openCallBoardDialog);
+      mittBus.on('launchPointMeeting', this.launchPointMeeting);
+      mittBus.on('joinMultiMeeting', this.joinMultiMeeting);
+      mittBus.on('makeCall', this.makePointCall);
+      mittBus.on('pullMonitorDevice', this.pullMonitorDevice);
+    },
+    removeBusEvent() {
+      mittBus.off('launchMultiMeeting', this.launchMultiMeeting);
+      mittBus.off('multiMeetingAppeInvite', this.multiMeetingAppeInvite);
+      mittBus.off('openPointMeetingBoard', this.openCallBoardDialog);
+      mittBus.off('launchPointMeeting', this.launchPointMeeting);
+      mittBus.off('joinMultiMeeting', this.joinMultiMeeting);
+      mittBus.off('makeCall', this.makePointCall);
+      mittBus.off('pullMonitorDevice', this.pullMonitorDevice);
+    },
+    openMeeingReadyDialog() {
+      this.launchMultiMeeting({
+        inviteList: [],
+        deviceList: [],
+        defaultInviteWay: "identity",
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+</style>

package/src/assets/image/common/delete-number.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M18.5148 0.380859C19.891 0.380859 21.0069 1.51818 21.0069 2.92077V13.079C21.0069 14.4816 19.891 15.619 18.5148 15.619H8.05104C7.68548 15.6182 7.32463 15.5364 6.99444 15.3795C6.66425 15.2226 6.37293 14.9945 6.14143 14.7116L1.28741 8.81584C1.09902 8.58565 0.996094 8.29736 0.996094 7.99991C0.996094 7.70246 1.09902 7.41417 1.28741 7.18398L6.14143 1.28822C6.37293 1.00529 6.66425 0.77718 6.99444 0.62029C7.32463 0.463399 7.68548 0.381629 8.05104 0.380859L18.5148 0.380859ZM18.5148 1.41982H8.05104C7.83504 1.42025 7.62182 1.46855 7.42672 1.56125C7.23162 1.65394 7.0595 1.78874 6.92273 1.95592L2.06871 7.85168C2.0345 7.89351 2.01581 7.94587 2.01581 7.99991C2.01581 8.05394 2.0345 8.10631 2.06871 8.14813L6.92273 14.0439C7.20256 14.3833 7.61537 14.58 8.05104 14.58H18.5148C19.3279 14.58 19.9873 13.9081 19.9873 13.079V2.92077C19.9873 2.09168 19.3279 1.41982 18.5148 1.41982ZM16.1522 5.18779C16.2494 5.28336 16.3048 5.41363 16.3061 5.54999C16.3074 5.68635 16.2545 5.81765 16.1591 5.91506L13.8824 8.19177L16.1591 10.4678C16.2545 10.5652 16.3074 10.6965 16.3061 10.8329C16.3048 10.9692 16.2494 11.0995 16.1522 11.1951C16.1048 11.2433 16.0485 11.2818 15.9862 11.3083C15.924 11.3347 15.8572 11.3487 15.7896 11.3493C15.722 11.35 15.655 11.3373 15.5923 11.312C15.5296 11.2867 15.4724 11.2493 15.4242 11.202L13.1475 8.92597L10.8722 11.2027C10.8239 11.25 10.7668 11.2874 10.7041 11.3127C10.6414 11.338 10.5744 11.3507 10.5068 11.35C10.4391 11.3494 10.3723 11.3354 10.3101 11.309C10.2479 11.2825 10.1915 11.244 10.1442 11.1958C10.0469 11.1002 9.99156 10.9699 9.99026 10.8335C9.98896 10.6972 10.0418 10.5659 10.1373 10.4685L12.4133 8.19177L10.1373 5.91575C10.0899 5.86751 10.0525 5.8104 10.0272 5.7477C10.002 5.685 9.98927 5.61794 9.98992 5.55033C9.99056 5.48273 10.0045 5.41592 10.031 5.35371C10.0575 5.2915 10.0959 5.23512 10.1442 5.18779C10.2398 5.09051 10.37 5.03514 10.5064 5.03384C10.6428 5.03255 10.7741 5.08542 10.8715 5.18086L13.1475 7.45688L15.4242 5.18086C15.5216 5.08542 15.6529 5.03255 15.7893 5.03384C15.9256 5.03514 16.0559 5.09051 16.1515 5.18779H16.1522Z" fill="#283342" stroke="#283342" stroke-width="0.5"/>
+</svg>

package/src/assets/image/common/icon-device.svg

@@ -0,0 +1,12 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Component 11">
+<circle id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" cx="10" cy="10.5" r="10" fill="url(#paint0_linear_527_154566)"/>
+<path id="Vector" d="M13.8075 5.25124H13.0955C12.5292 4.79152 11.8789 4.5 11.0884 4.5C10.4549 4.5 9.86626 4.68501 9.3673 4.99895L8.01057 5.25685H6.00353C5.3532 5.25685 5 5.76701 5 6.40053V9.88203C5 10.2016 5.0897 10.4875 5.2635 10.6949V15.4547C5.2635 15.8471 5.58866 16.1667 5.9811 16.1667H13.8243C14.2167 16.1667 14.5419 15.8471 14.5419 15.4547V10.6949C14.7157 10.4875 14.8054 10.2016 14.8054 9.88203V6.38931C14.8054 5.76141 14.4522 5.25124 13.8075 5.25124ZM11.1052 5.12789C12.2714 5.12789 13.2244 6.06975 13.2244 7.22465C13.2244 8.37956 12.2714 9.3214 11.1052 9.3214C9.93353 9.3214 8.98607 8.37954 8.98607 7.22465C8.98047 6.06975 9.93353 5.12789 11.1052 5.12789ZM6.12126 6.23794H7.87602C8.02179 6.23794 8.13953 6.39492 8.13953 6.59113C8.13953 6.78735 8.02179 6.94433 7.87602 6.94433H6.12126C5.97549 6.94433 5.85776 6.78736 5.85776 6.59113C5.85776 6.39491 5.97549 6.23794 6.12126 6.23794ZM6.09884 7.65072H7.38828C7.52283 7.65072 7.62935 7.8077 7.62935 8.00392C7.62935 8.20013 7.52283 8.35711 7.38828 8.35711H6.09884C5.96428 8.35711 5.85776 8.20015 5.85776 8.00392C5.85776 7.80769 5.96428 7.65072 6.09884 7.65072ZM9.89989 14.8828C8.00498 14.0363 8.1283 11.4742 8.1283 11.4742C9.3729 11.2892 9.75413 11.093 9.86065 11.0145H9.93914C10.0457 11.0874 10.4269 11.2892 11.6659 11.4742C11.6659 11.4686 11.7948 14.0363 9.89989 14.8828ZM9.59715 7.23586C9.59715 6.41174 10.2755 5.73898 11.1109 5.73898C11.9462 5.73898 12.6189 6.41174 12.6189 7.23586C12.6189 8.05998 11.9406 8.73274 11.1109 8.73274C10.2755 8.72713 9.59715 8.05998 9.59715 7.23586ZM10.7016 12.3152C10.7408 12.3208 10.7577 12.3376 10.7577 12.36C10.7577 12.3712 10.7464 12.388 10.7296 12.4049L10.354 12.7468L10.4437 13.229V13.2458C10.4437 13.257 10.4381 13.2738 10.4325 13.2794C10.4269 13.2906 10.4157 13.2906 10.3988 13.2906C10.3876 13.2906 10.3708 13.285 10.3596 13.2794L9.89428 13.0496L9.42897 13.2794C9.41215 13.2906 9.40094 13.2906 9.38972 13.2906C9.37851 13.2906 9.36169 13.285 9.35608 13.2794C9.35048 13.2682 9.34487 13.257 9.34487 13.2458V13.229L9.43458 12.7468L9.05895 12.4049C9.04213 12.388 9.03092 12.3712 9.03092 12.36C9.03092 12.3376 9.05334 12.3208 9.08698 12.3152L9.60836 12.2479L9.83823 11.8106C9.84944 11.7826 9.86626 11.7713 9.88869 11.7713C9.91112 11.7713 9.92232 11.7826 9.93914 11.8106L10.169 12.2479L10.7016 12.3152Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_527_154566" x1="10" y1="0.5" x2="10" y2="20.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2998FF"/>
+<stop offset="1" stop-color="#0084FF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/assets/image/common/icon-monitor.svg

@@ -0,0 +1,12 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Component 11">
+<circle id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;" cx="10" cy="10.5" r="10" fill="url(#paint0_linear_527_154536)"/>
+<path id="&#229;&#189;&#162;&#231;&#138;&#182;" fill-rule="evenodd" clip-rule="evenodd" d="M14.5098 9C14.5098 6.51487 12.4949 4.5 10.0098 4.5C7.52464 4.5 5.50977 6.51487 5.50977 9C5.50977 11.4851 7.52464 13.5 10.0098 13.5C12.4949 13.5 14.5098 11.4851 14.5098 9ZM14.3223 14.625L13.5921 13.1644C13.5783 13.1374 13.5633 13.1107 13.5464 13.0856C12.6951 13.8116 11.5911 14.25 10.3848 14.25H9.63477C8.47575 14.2517 7.35433 13.8389 6.47314 13.086C6.45627 13.1107 6.44127 13.1374 6.42739 13.1648L5.69727 14.625C5.49648 15.0266 5.51794 15.5035 5.75399 15.8855C5.99004 16.2675 6.40701 16.5 6.85602 16.5H13.1635C13.6125 16.5 14.0295 16.2675 14.2655 15.8855C14.5016 15.5035 14.5231 15.0266 14.3223 14.625ZM11.6337 8.81245C11.2987 8.23229 10.6797 7.87494 10.0098 7.875C8.9743 7.8751 8.13495 8.71454 8.13495 9.75C8.13495 10.7855 8.9743 11.6249 10.0098 11.625C10.6797 11.6251 11.2987 11.2677 11.6337 10.6876C11.9687 10.1074 11.9687 9.3926 11.6337 8.81245ZM10.0495 9C9.78154 8.99996 9.5339 9.1429 9.3999 9.37497C9.2659 9.60703 9.2659 9.89297 9.3999 10.125C9.5339 10.3571 9.78154 10.5 10.0495 10.5C10.4637 10.4999 10.7994 10.1642 10.7994 9.75C10.7994 9.33583 10.4637 9.00006 10.0495 9Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_527_154536" x1="10" y1="0.5" x2="10" y2="20.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2998FF"/>
+<stop offset="1" stop-color="#0084FF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/assets/image/common/icon-/345/260/217/347/250/213/345/272/217.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-&#229;&#176;&#143;&#231;&#168;&#139;&#229;&#186;&#143;">
+<path id="Vector" d="M12.0016 1.6001C17.7455 1.6001 22.4016 6.25618 22.4016 12.0001C22.4016 17.744 17.7455 22.4001 12.0016 22.4001C6.25764 22.4001 1.60156 17.744 1.60156 12.0001C1.60156 6.25618 6.25764 1.6001 12.0016 1.6001ZM14.2303 6.8001C13.4347 6.79802 12.6703 7.1095 12.1071 7.66642C11.8288 7.94063 11.6079 8.26754 11.4573 8.62805C11.3067 8.98856 11.2294 9.37547 11.2299 9.76618V14.2605C11.2299 15.0837 10.5461 15.7597 9.7146 15.7597C8.88208 15.7597 8.16916 15.0837 8.16916 14.2309C8.16916 13.3791 8.85296 12.7333 9.68548 12.7333C9.88308 12.7349 10.0729 12.6579 10.2128 12.5201C10.3521 12.3818 10.4296 12.1935 10.428 11.9985C10.4288 11.9017 10.41 11.8056 10.373 11.7161C10.3359 11.6266 10.2812 11.5455 10.2122 11.4775C10.1427 11.4089 10.0602 11.3547 9.96965 11.3182C9.87906 11.2816 9.78213 11.2633 9.68444 11.2643C8.11612 11.3184 6.8572 12.5638 6.80364 14.1149C6.78899 14.507 6.852 14.898 6.98906 15.2656C7.12612 15.6332 7.33451 15.9701 7.60226 16.2568C7.87 16.5435 8.1918 16.7745 8.54915 16.9364C8.90649 17.0983 9.29232 17.1879 9.68444 17.2001C10.4795 17.2032 11.2436 16.8916 11.8097 16.3333C12.088 16.0588 12.3088 15.7316 12.4593 15.3708C12.6097 15.01 12.6867 14.6228 12.6859 14.2319V9.7381C12.6859 8.91494 13.3697 8.23998 14.2012 8.23998C15.0332 8.23998 15.7159 8.91598 15.7159 9.7381C15.7159 10.5613 15.0321 11.2367 14.2308 11.2367H14.2012C14.1036 11.2358 14.0067 11.2541 13.9162 11.2907C13.8257 11.3273 13.7434 11.3814 13.6739 11.4499C13.6049 11.5179 13.5503 11.5989 13.5133 11.6883C13.4762 11.7777 13.4574 11.8737 13.4581 11.9705C13.456 12.166 13.534 12.3542 13.6734 12.4925C13.8138 12.6309 14.0036 12.7073 14.2012 12.7057C14.9959 12.7086 15.7595 12.397 16.3254 11.8389C16.6036 11.5645 16.8244 11.2374 16.9748 10.8767C17.1253 10.516 17.2024 10.1289 17.2016 9.7381C17.205 9.35044 17.1305 8.96605 16.9825 8.60775C16.8345 8.24945 16.616 7.92456 16.3399 7.65238C15.8147 7.13446 15.115 6.83143 14.378 6.8027L14.2303 6.8001Z" fill="white"/>
+</g>
+</svg>

package/src/assets/image/common/icon-/345/272/224/347/255/224.svg

@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-&#229;&#186;&#148;&#231;&#173;&#148;">
+<path id="Vector" d="M18.8214 14.4224C17.6051 14.4224 16.4318 14.2269 15.3327 13.8651C15.1612 13.8098 14.9778 13.8029 14.8025 13.845C14.6273 13.887 14.467 13.9765 14.3393 14.1037L12.1882 16.2606C9.4147 14.8477 7.15926 12.5936 5.74464 9.82099L7.89575 7.66597C8.02321 7.53844 8.11308 7.37827 8.15551 7.20304C8.19794 7.0278 8.19129 6.84426 8.13629 6.67255C7.76626 5.54464 7.57813 4.36503 7.57895 3.17797C7.57895 2.63433 7.14286 2.2002 6.60117 2.2002H3.177C2.63335 2.2002 2.19922 2.63433 2.19922 3.17797C2.19922 7.58646 3.95048 11.8144 7.06775 14.9317C10.185 18.0489 14.413 19.8002 18.8214 19.8002C19.3631 19.8002 19.7992 19.3641 19.7992 18.8224V15.4002C19.7992 14.8565 19.3631 14.4224 18.8214 14.4224ZM17.8437 11.0002H19.7992C19.7992 8.66629 18.8721 6.42798 17.2218 4.77766C15.5714 3.12734 13.3331 2.2002 10.9992 2.2002V4.15575C12.8145 4.15575 14.5554 4.87686 15.839 6.16044C17.1226 7.44402 17.8437 9.18494 17.8437 11.0002ZM13.9326 11.0002H15.8881C15.8881 9.70358 15.373 8.46007 14.4562 7.54323C13.5393 6.62638 12.2958 6.11131 10.9992 6.11131V8.06686C12.6184 8.06686 13.9326 9.38099 13.9326 11.0002Z" fill="white"/>
+</g>
+</svg>

package/src/assets/image/common/icon-/350/247/206/351/242/221.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-&#232;&#167;&#134;&#233;&#162;&#145;">
+<g id="Frame 22">
+<path id="Vector" d="M14.5401 5.6001H3.45773C3.45773 5.6001 1.60156 5.6001 1.60156 7.40038V16.5109C1.60156 18.3112 3.45773 18.3112 3.45773 18.3112H14.5401C14.5401 18.3112 16.3963 18.3112 16.3963 16.5109V7.45494C16.3963 5.6001 14.5401 5.6001 14.5401 5.6001ZM22.1286 6.52752C21.9648 6.47296 21.801 6.47296 21.6919 6.58207L18.0341 9.41889C17.9249 9.52799 17.8703 9.6371 17.8703 9.74621V14.2742C17.8703 14.3833 17.9249 14.547 18.0341 14.6015L21.6919 17.4383C21.7464 17.4929 21.8556 17.5475 21.9648 17.5475C22.0194 17.5475 22.074 17.5475 22.1832 17.4929C22.347 17.4383 22.4016 17.2747 22.4016 17.111V6.9094C22.4016 6.74573 22.2924 6.58207 22.1286 6.52752Z" fill="white"/>
+</g>
+</g>
+</svg>