diff --git a/templates/admin.html b/templates/admin.html
index 6887714..2e2fa53 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -6,68 +6,484 @@
 {% end %}
 {% block style %}
 {% end %}
+<style>
+    .active-tabs > .el-tabs__content {
+      padding: 32px;
+      color: #6b778c;
+      font-size: 32px;
+      font-weight: 600;
+    }
+</style>
 
 
 {% block content %}
 <div class="container">
-    <div style="margin: 10px 0px">
-        接口 <a href="/api/v1/admins">/api/v1/admins</a>
-    </div>
-    <div>
-        <form class="form-inline" @submit.prevent="addAdmin">
-            <div class="form-group">
-                <label style="margin-right: 1em">用户邮箱</label>
-                <input style="margin-right: 1em" v-model="formEmail" placeholder="email ..." class="form-control">
-                <button class="btn btn-success">新增管理员</button>
+    <el-tabs v-model="activeName" class="active-tabs" @tab-click="handleClick">
+        <el-tab-pane label="管理员列表" name="admins">
+            <div style="margin: 10px 0px">
+                接口 <a href="/api/v1/admins">/api/v1/admins</a>
             </div>
-        </form>
-        <br>
-        <table class="table">
-            <thead>
-                <tr>
-                    <th>邮箱</th>
-                    <th>用户名</th>
-                    <th>上次登录时间</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr v-for="u in users">
-                    <td v-text="u.email"></td>
-                    <td v-text="u.username"></td>
-                    <td v-text="u.lastLoggedInAt"></td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
+            <div>
+                <el-form class="form-inline" @submit.prevent="addAdmin">
+                    <div class="form-group">
+                        <label style="margin-right: 1em">用户邮箱</label>
+                        <el-input v-model="formEmail" placeholder="email ..." style="width: 200px;margin-right: 1em;" clearable></el-input>
+                        <el-button type="primary">新增管理员</el-button>
+                    </div>
+                </el-form>
+                <br>
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>邮箱</th>
+                            <th>用户名</th>
+                            <th>上次登录时间</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="u in data.users" :key="u.email">
+                            <td>{{! u.email }}</td>
+                            <td>{{! u.username }}</td>
+                            <td>{{! u.lastLoggedInAt }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </el-tab-pane>
+        <el-tab-pane label="管理App" name="apps">
+            <div class="form-inline">
+                <el-form
+                    :model="appForm"
+                    :rules="rules"
+                    ref="appFormRef"
+                    @submit.native.prevent
+                    hide-required-asterisk
+                    status-icon="true"
+                    label-position="left"
+                    style="display: flex;flex-direction: column;align-items: left;justify-content: space-between;"
+                >
+                    <div class="form-inline">
+                        <el-form-item label="App名称" prop="name" style="width: 300px;margin-top: 1em;margin-right: 1em;">
+                            <el-input
+                                name="name"
+                                v-model="appForm.name"
+                                @keydown.enter="submit(appFormRef)"
+                                placeholder="请输入"
+                            >
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="平台" prop="platform" style="width: 200px;margin-top: 1em;margin-right: 1em;">
+                            <el-select
+                                name="platform"
+                                v-model="appForm.platform"
+                                @keydown.enter="submit(appFormRef)"
+                                placeholder="平台">
+                                <el-option v-for="item in platformOptions" :label="item.label" :value="item.value"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item v-if="appForm.platform=='Android'" label="App包名" prop="appPackage" style="width: 270px;margin-top: 1em;margin-right: 1em;">
+                            <el-input
+                                name="name"
+                                v-model="appForm.appPackage"
+                                @keydown.enter="submit(appFormRef)"
+                                placeholder="请输入"
+                            >
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item v-if="appForm.platform=='iOS'" label="bundleId" prop="bundleId" style="width: 270px;margin-top: 1em;margin-right: 1em;">
+                            <el-input
+                                name="name"
+                                v-model="appForm.bundleId"
+                                @keydown.enter="submit(appFormRef)"
+                                placeholder="请输入"
+                            >
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item v-if="appForm.platform=='Android'" label="App启动页" prop="appActivity" style="width: 270px;margin-top: 1em;margin-right: 1em;">
+                            <el-input
+                                name="name"
+                                v-model="appForm.appActivity"
+                                @keydown.enter="submit(appFormRef)"
+                                placeholder="请输入"
+                            >
+                            </el-input>
+                        </el-form-item>
+                    </div>
+                    <div class="form-inline">
+                        <el-form-item label="App描述" prop="description" style="width: 300px;margin-top: 1em;margin-right: 1em;">
+                            <el-input
+                                name="description"
+                                v-model="appForm.description"
+                                placeholder="描述"
+                                maxlength="20"
+                            >
+                            </el-input>
+                        </el-form-item>
+                        <el-button type="primary" @click="submit(appFormRef)">添加</el-button>
+                    </div>
+                </el-form>
+            </div>
+            <br>
+            <el-table :data="appData" style="width: 100%">
+                <el-table-column prop="name" label="App名称">
+                    <template #default="scope">
+                        <atx-edit-inline :readonly="admin" :value="scope.row.name"
+                            @change="updateData(scope.row.id, 'name', $event)">
+                        </atx-edit-inline>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="platform" label="平台">
+                    <template #default="scope">
+                        <atx-edit-inline :types="'select'" :options="platformOptions" :readonly="admin" :value="scope.row.platform"
+                            @change="updateData(scope.row.id, 'platform', $event)">
+                        </atx-edit-inline>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="appPackage" label="App BundleID">
+                    <template #default="scope">
+                        <atx-edit-inline v-if="scope.row.platform=='iOS'" :readonly="admin" :value="scope.row.bundleId"
+                            @change="updateData(scope.row.id, 'bundleId', $event)">
+                        </atx-edit-inline>
+                        <span v-else v-text="scope.row.bundleId? scope.row.bundleId : '-'"></span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="appPackage" label="App包名">
+                    <template #default="scope">
+                        <atx-edit-inline v-if="scope.row.platform=='Android'" :readonly="admin" :value="scope.row.appPackage"
+                            @change="updateData(scope.row.id, 'appPackage', $event)">
+                        </atx-edit-inline>
+                        <span v-else v-text="scope.row.appPackage? scope.row.appPackage : '-'"></span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="appActivity" label="App启动页">
+                    <template #default="scope">
+                        <atx-edit-inline v-if="scope.row.platform=='Android'" :readonly="admin" :value="scope.row.appActivity"
+                            @change="updateData(scope.row.id, 'appActivity', $event)">
+                        </atx-edit-inline>
+                        <span v-else v-text="scope.row.appActivity? scope.row.appActivity : '-'"></span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="description" label="描述">
+                    <template #default="scope">
+                        <atx-edit-inline :readonly="admin" :value="scope.row.description"
+                            @change="updateData(scope.row.id, 'description', $event)">
+                        </atx-edit-inline>
+                    </template>
+                </el-table-column>
+                <el-table-column fixed="right" label="操作" min-width="73">
+                    <template #default="scope">
+                        <el-button
+                          :disabled="!(admin)"
+                          class="cursor-pointer"
+                          type="danger"
+                          size="small"
+                          @click="deleteClick(scope.row.id)"
+                        >
+                          删除
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-dialog v-model="centerDialogVisible" width="500" align-center>
+                <span>
+                  是否要删除该App？
+                </span>
+                <template #footer>
+                  <div class="dialog-footer">
+                    <el-button @click="centerDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="deleteRow">
+                      确定
+                    </el-button>
+                  </div>
+                </template>
+            </el-dialog>
+        </el-tab-pane>
+    </el-tabs>
+
+
 </div>
 {% end %}
 
 {% block script %}
 <script>
-    $.getJSON("/api/v1/admins")
-        .then((ret) => {
-            new Vue({
-                el: "#app",
-                data: Object.assign({
-                    formEmail: "",
-                    users: [],
-                    token: "",
-                }, ret),
-                methods: {
-                    addAdmin() {
-                        $.ajax({
-                            url: "/api/v1/admins",
-                            method: "post",
-                            data: JSON.stringify({
-                                email: this.formEmail,
+    const currentUserEmail = "{{ current_user.email }}";
+    const currentUserName = "{{ current_user.username }}"
+    const admin = "{{current_user.admin}}" == "True" // Python true is "True"
+</script>
+<script>
+    const admins_page = {
+        setup() {
+            const activeName = ref('admins');
+            const centerDialogVisible = ref(false);
+            const handleClick = (tab, event) => {
+                console.log(tab,tab.paneName,tab.props.label, event)
+                if (tab.paneName == "admins") {
+                    fetchData();
+                } else {
+                    fetchApps();
+                }
+            };
+
+            const data = reactive({
+                formEmail: "",
+                users: [],
+                token: "",
+            });
+            const appFormRef = ref(null);
+            const appForm = reactive({
+                name: "",
+                platform: "Android",
+                bundleId: "",
+                appPackage: "",
+                appActivity: "",
+                description: "",
+            });
+            const rules = {
+                name: [ { required: true, message: '请输入App名称', trigger: 'blur' } ],
+                platform: [ { required: true, message: '请选择平台', trigger: 'blur' } ],
+                appPackage: [ { required: true, message: '请输入App包名', trigger: 'blur' } ],
+                bundleId: [ { required: true, message: '请输入bundleId', trigger: 'blur' } ],
+                description: [ { max: 20, message: "长度须小于 20 个字符", trigger: ["blur", "change"]} ],
+            };
+            const platformOptions = [
+                { label: "Android", value: "Android" },
+                { label: "iOS", value: "iOS" },
+            ];
+            const submit = (formRef) => {
+                formRef.validate((valid, errors) => {
+                    console.log('valid', valid, 'errors', errors);
+                    if (valid) {
+                        const filteredForm = Object.fromEntries(
+                            Object.entries(appForm).filter(([key, value]) => {
+                                // 这里可以根据需要定义“为空”的条件，例如：
+                                // - 空字符串：value !== ''
+                                // - 空字符串或 null：value !== '' && value !== null
+                                // - 空字符串、null 或 undefined：value !== '' && value !== null && value !== undefined
+                                return value !== '' && value !== null && value !== undefined;
                             })
-                        }).then(ret => {
-                            console.log(ret)
-                            this.$message("添加成功")
+                        );
+                        console.log('submit', filteredForm);
+                        axios({
+                            method: "put",  // HTTP method
+                            url: "/api/v1/user/apps", // URL
+                            headers: {
+                                "contentType": "application/json",
+                                "Authorization": "Bearer " + localStorage.getItem("access_token")
+                            },
+                            data: JSON.stringify(filteredForm), // Request
                         })
+                           .then((ret) => {
+                                console.log('apps',ret.data);
+                                if (ret.data.success) {
+                                    formRef.resetFields();
+                                    fetchApps();
+                                    ElMessage.success(ret.data.description);
+                                } else {
+                                    ElMessage.warning(ret.data.description);
+                                }
+                            })
+                           .catch((err) => {
+                                ElMessage.error(err.response.data.description);
+                            });
+                    } else {
+                        ElMessage.error((errors.name || errors.platform || errors.appPackage || errors.bundleId || errors.description)[0].message);
                     }
+                });
+            };
+            const fetchData = () => {
+                axios.get("/api/v1/admins")
+                   .then((ret) => {
+                        Object.assign(data, ret.data);
+                        localStorage.setItem("token", ret.data.token);
+                    })
+            };
+            const appData = ref([]);
+            function fetchApps() {
+                axios.get("/api/v1/apps")
+                   .then((ret) => {
+                        console.log('apps',ret.data.data);
+                        appData.value = ret.data.data;
+                    })
+            };
+            function updateData(id, key, value) {
+                console.log("updateData", id, key, value);
+                if (typeof(value) == "string"){
+                    axios({
+                        method: "post",  // HTTP method
+                        url: `/api/v1/user/apps`, // URL
+                        headers: {
+                            "Content-Type": "application/json",
+                            "Authorization": "Bearer " + localStorage.getItem("access_token")
+                        },
+                        data: JSON.stringify({
+                            id: id,
+                            [key]: value,
+                        })
+                    })
+                       .then((ret) => {
+                            console.log('apps',ret.data);
+                            fetchApps();
+                            if (ret.data.success) {
+                                ElMessage.success(ret.data.description);
+                            } else {
+                                ElMessage.warning(ret.data.description);
+                            }
+                        })
+                       .catch((err) => {
+                            ElMessage.error(err.response.data.description);
+                        });
+                }
+            };
+            const appId = ref("");
+            function deleteClick(id) {
+                appId.value = id;
+                centerDialogVisible.value = true;
+            };
+            function deleteRow() {
+                console.log("deleteClick", appId.value);
+                axios.delete(`/api/v1/user/apps/${appId.value}`)
+                   .then((ret) => {
+                        console.log('apps',ret.data);
+                        fetchApps();
+                        ElMessage.success(ret.data.description);
+                        centerDialogVisible.value = false;
+                    })
+                   .catch((err) => {
+                        ElMessage.error(err.response.data.description);
+                    });
+            };
+            onBeforeMount(fetchData);
+            return {
+                admin,
+                activeName,
+                handleClick,
+                data,
+                appData,
+                platformOptions,
+                appFormRef,
+                appForm,
+                rules,
+                submit,
+                updateData,
+                deleteClick,
+                deleteRow,
+                centerDialogVisible,
+            };
+        },
+        methods: {
+            async addAdmin() {
+                if (!this.data.formEmail) {
+                    ElMessage.error("邮箱不能为空");
+                    return;
                 }
-            })
-        })
+                await axios({
+                    method: "POST",  // HTTP method
+                    url: "/api/v1/admins", // URL
+                    data: { email: this.data.formEmail }, // Request
+                    headers: {
+                        "Content-Type": "application/json",
+                        "Authorization": `Bearer ${localStorage.getItem("token")}`
+                    }
+                })
+                   .then((ret) => {
+                        console.log('admins',ret.data);
+                        ElMessage.success("添加成功");
+                    })
+                   .catch((err) => {
+                        ElMessage.error(err.response.data.message);
+                    });
+            },
+        },
+        components: {
+            "atx-edit-inline": {
+                props: {
+                    value: String,
+                    readonly: Boolean,
+                    types: String,
+                    options: Array,
+                },
+                data: function () {
+                    return {
+                        edit: false,
+                        editValue: "",
+                        showEdit: false,
+                    }
+                },
+                methods: {
+                    update() {
+                        // console.log("update",this.types);
+                        if (this.editValue != this.value) {
+                            console.log("update",this.editValue);
+                            this.$emit("change", this.editValue);
+                        }
+                        this.edit = false;
+                    },
+                    onEdit() {
+                        if (!(this.readonly && this.showEdit)) {
+                            return;
+                        }
+                        this.edit = true;
+                        this.editValue = this.value;
+                        this.$nextTick(() => {
+                            if(this.types=='select') {
+                                this.$refs.mySelect.focus();
+                            }else{
+                                this.$refs.input.focus();
+                            }
+                        });
+                    },
+                    showValue(value) {
+                        if (value) {
+                            if (this.types=='select' && this.options) {
+                                const ops = this.options.find(item => item.value == value);
+                                if (ops) {
+                                    return ops.label
+                                }
+                            }
+                            // const st1 = '<el-steps direction="vertical" :space="10" :active="0"><el-step title="';
+                            // const st2 = '" ></el-step></el-steps>';
+                            if (typeof(value) == "object" && value.length > 1) {
+                                // console.log(st1 + value.split("\n").join('" ></el-step><el-step title="') + st2);
+                                console.log(value.length);
+                                return value.join('<br>');
+                                // return st1 + value.split("\n").join('" ></el-step><el-step title="') + st2;
+                            }
+                            return value
+                        }else{
+                            return "-"
+                        };
+                    }
+                },
+                template: `
+                <div>
+                    <div v-if="edit">
+                        <el-form @submit.prevent="update">
+                            <el-input v-if="types=='textarea'" v-model="editValue" type="textarea" @keyup.esc="edit=false" @blur="update" @focus="showEdit=false" style="border-radius: 0;" ref="input" autosize />
+                            <el-select v-else-if="types=='select'" v-model="editValue" @keyup.esc="edit=false" @change="update" @blur="update" @focus="showEdit=false" clearable placeholder="请选择" ref="mySelect">
+                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                            </el-select>
+                            <el-input v-else v-model="editValue" @keyup.esc="edit=false" @keydown.enter="update" @blur="update" @focus="showEdit=false" style="border-radius: 0;" ref="input" autosize />
+                        </el-form>
+                    </div>
+                    <div v-else @mouseenter="showEdit = true" @mouseleave="showEdit = false" @click="onEdit">
+                        <span v-html="showValue(value)"></span>
+                        <i v-if="readonly && showEdit" class="cursor-pointer" style="vertical-align: middle;">
+                            <el-icon :size="20" style="margin-top: 5px;">
+                                <Edit />
+                            </el-icon>
+                        </i>
+                    </div>
+                </div>`
+            }
+        },
+    };
+    const admin_app = createApp(admins_page);
+    admin_app.use(ElementPlus, {
+        locale: ElementPlusLocaleZhCn,
+    }).mount("#app");
+    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+      admin_app.component(key, component)
+    };
+
 </script>
-{% end %}
\ No newline at end of file
+{% end %}
diff --git a/templates/applelist.html b/templates/applelist.html
index 03821d4..3073bf4 100644
--- a/templates/applelist.html
+++ b/templates/applelist.html
@@ -59,177 +59,160 @@
     const currentUserName = "{{ current_user.username }}"
 </script>
 <script>
-    $.getJSON("/devices" + "?json")
-        .done((ret) => {
-            new Vue({
-                el: "#app",
-                data: Object.assign({
-                    websocketDisconnected: false,
-                    user: {
-                        name: currentUserName,
-                        email: currentUserEmail,
-                    },
-                    devices: [],
-                }, ret.data),
-                mounted() {
-                    console.log("Mounted:", this.devices)
-                },
-                computed: {
-                    tableData() {
-                        return this.filteredDevices.map(v => {
-                            for (const key in v.properties) {
-                                if (v.properties.hasOwnProperty(key)) {
-                                    v['prop_' + key] = v.properties[key]
-                                }
-                            }
-                            let display = v.display || {}
-                            v['display_size'] = display.width + "x" + display.height;
-                            return v;
-                        })
-                    },
-                    filteredDevices() {
-                        return []
-                        // return this.devices;
-                        return [{
-                            udid: "123123124dsfa123423r134123",
-                            using: false,
-                            present: true, // present is generated by length of sources
-                            ready: false,
-                            private: false,
-                            platform: "apple",
-                            owner: "anonymous@domain.com",
-                            group: "ntes",
-                            address: "10.0.0.123:8100",
-                            sources: {
-                                "bad1-131jfla-3313131": {
-                                    name: "raspberry",
-                                    address: "10.0.1.123:8100",
-                                    priority: 2,
-                                },
-                                "7718231-sdljf3lkjsf-sfsdf": {
-                                    name: "wifi",
-                                    address: "10.45.16.71:7912",
-                                    priority: 1
-                                }
-                            },
-                            createdAt: "2018-12-1 12:00:01",
-                            lastUsingAt: "2018-12-1 12:00:01",
-                            prop_displayWidth: 1080,
-                            prop_displayHeight: 1120,
-                            properties: {
-                                brand: "sumsung",
-                                model: "SM-G9209",
-                                hwaddr: "90:b6:86:7e:7d:ff",
-                                version: "6.0.1",
-                                sdk: 23,
-                            },
-                            ip: "127.0.0.1",
-                            display: {
-                                height: 2560,
-                                width: 1440,
-                            },
-                        }]
-                    }
+    const appList = {
+        setup() {
+            const websocketDisconnected = ref(false);
+            const user = reactive({
+                name: currentUserName,
+                email: currentUserEmail,
+            });
+            const devices = ref([]);
+            const tableData = ref([]);
+
+            filters: {
+                formatTime(value) {
+                    var t = moment(value)
+                    return t.format("YYYY-M-D HH:mm:ss");
                 },
-                filters: {
-                    formatTime(value) {
-                        var t = moment(value)
-                        return t.format("YYYY-M-D HH:mm:ss");
-                    },
-                    fromNow(value) {
-                        return moment(value).fromNow();
+                fromNow(value) {
+                    return moment(value).fromNow();
+                }
+            };
+            function fetchAppListDevices() {{
+                await axios.get("/api/v1/devices"+"?platform=apple")
+                   .then(ret => {
+                        devices.value = ret.data.devices;
+                        tableData.value = tableDataList();
+                    })
+                   .catch(err => {
+                        console.error(err)
+                    })
+            });
+            function tableDataList() {
+                return devices.value.map(v => {
+                    for (const key in v.properties) {
+                        if (v.properties.hasOwnProperty(key)) {
+                            v['prop_' + key] = v.properties[key]
+                        }
                     }
-                },
-                methods: {
-                    formatTimeUsed() {
-                        // let duration = moment(this.finishedAt) - moment(this.createdAt);
-                        // return moment.utc(duration).format('HH:mm:ss')
-                    },
-                    deviceAcquire(udid) { // for multi device acquire
-                        return $.ajax({
-                            method: "post",
-                            url: "/api/v1/user/devices",
-                            data: JSON.stringify({
-                                "udid": udid,
-                            }),
-                            dataType: "json",
-                        })
-                            .done(ret => {
-                                console.log(ret)
-                            })
-                    },
-                    deviceRelease(udid) {
-                        $.ajax({
-                            method: "delete",
-                            url: "/api/v1/user/devices/" + udid,
-                            dataType: "json",
-                        })
-                            .then(ret => {
-                                console.log(ret)
+                    let display = v.display || {}
+                    v['display_size'] = display.width + "x" + display.height;
+                    return v;
+                })
+            };
+            watch(devices, (newVal, oldVal) => {
+                tableData.value = tableDataList();
+            },{deep: true});
+            mounted() {
+                fetchAppListDevices();
+
+                let scheme = location.protocol === 'https' ? 'wss' : 'ws';
+                let wsURL = scheme + "://" + location.host + "/websocket/devicechanges?platform=apple";
+                let ws = new WebSocket(wsURL);
+                ws.onopen = (evt) => {
+                    console.log("Websocket Connected")
+                }
+                ws.onmessage = (evt) => {
+                    let m = JSON.parse(evt.data);
+                    switch (m.event) {
+                        case "update":
+                            devices.value = devices.value.map((v) => {
+                                console.log(v.udid)
+                                if (v.udid == m.data.udid) {
+                                    return m.data
+                                }
+                                return v
                             })
+                            console.log("Updated:", devices.value)
+                            break;
+                        case "insert":
+                            devices.value.unshift(m.data);
+                            break;
+                        default:
+                            console.error("Unknown event type", m.event)
+                            break;
+                    }
+                }
+                ws.onclose = (evt) => {
+                    console.log("Websocket closed")
+                    websocketDisconnected.value = true
+                }
+            }
+            return {
+                filters,
+                devices,
+                tableData,
+                user,
+                websocketDisconnected,
+            }
+        },
+        methods: {
+            formatTimeUsed() {
+                // let duration = moment(this.finishedAt) - moment(this.createdAt);
+                // return moment.utc(duration).format('HH:mm:ss')
+            },
+            async deviceAcquire(udid) { // for multi device acquire
+                return await axios({
+                    method: "post",
+                    url: "/api/v1/user/devices",
+                    headers: {
+                        "Content-Type": "application/json",
                     },
-                    deviceStatusName(device) {
-                        if (!device.present) {
-                            return "Offline"
-                        }
-                        if (!device.using) {
-                            return "Use"
-                        }
-                        if (device.userId == currentUserEmail) {
-                            return "Stop"
-                        }
-                        return "Busy"
+                    data: JSON.stringify({
+                        "udid": udid,
+                    }),
+                })
+                    .then(ret => {
+                        console.log(ret.data)
+                    })
+                    .catch(err => {
+                        console.error(err)
+                    })
+            },
+            async deviceRelease(udid) {
+                await axios({
+                    method: "delete",
+                    url: "/api/v1/user/devices/" + udid,
+                    headers: {
+                        "Content-Type": "application/json",
                     },
-                    clickStatus(event, device) {
-                        let status = this.deviceStatusName(device)
-                        console.log("Status", status)
-                        switch (status) {
-                            case "Use":
-                                return true;
-                            case "Stop":
-                                this.deviceRelease(device.udid);
-                                event.preventDefault()
-                                return true
-                            default:
-                                event.preventDefault()
-                        }
-                        console.log(device.udid)
-                    }
-                },
-                mounted() {
-                    let scheme = location.protocol === 'https' ? 'wss' : 'ws';
-                    let wsURL = scheme + "://" + location.host + "/websocket/devicechanges?platform=apple";
-                    let ws = new WebSocket(wsURL);
-                    ws.onopen = (evt) => {
-                        console.log("Websocket Connected")
-                    }
-                    ws.onmessage = (evt) => {
-                        let m = JSON.parse(evt.data);
-                        switch (m.event) {
-                            case "update":
-                                this.devices = this.devices.map((v) => {
-                                    console.log(v.udid)
-                                    if (v.udid == m.data.udid) {
-                                        return m.data
-                                    }
-                                    return v
-                                })
-                                console.log("Updated:", this.devices)
-                                break;
-                            case "insert":
-                                this.devices.unshift(m.data);
-                                break;
-                            default:
-                                console.error("Unknown event type", m.event)
-                                break;
-                        }
-                    }
-                    ws.onclose = (evt) => {
-                        console.log("Websocket closed")
-                        this.websocketDisconnected = true
-                    }
+                })
+                    .then(ret => {
+                        console.log(ret.data)
+                    })
+            },
+            deviceStatusName(device) {
+                if (!device.present) {
+                    return "Offline"
+                }
+                if (!device.using) {
+                    return "Use"
                 }
-            })
-        })
+                if (device.userId == currentUserEmail) {
+                    return "Stop"
+                }
+                return "Busy"
+            },
+            clickStatus(event, device) {
+                let status = this.deviceStatusName(device)
+                console.log("Status", status)
+                switch (status) {
+                    case "Use":
+                        return true;
+                    case "Stop":
+                        this.deviceRelease(device.udid);
+                        event.preventDefault()
+                        return true
+                    default:
+                        event.preventDefault()
+                }
+                console.log(device.udid)
+            }
+        },
+    };
+    createAppList(appList).use(ElementPlus, {
+        locale: ElementPlusLocaleZhCn,
+    }).mount("#app");
+
 </script>
-{% end %}
\ No newline at end of file
+{% end %}
diff --git a/templates/base.html b/templates/base.html
index 7bab22a..8b66128 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -7,35 +7,58 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>{% block title %}Default title{% end %}</title>
 
-    <link rel="stylesheet" href="/static/vendor/fontawesome-5.7.2/css/all.css">
-    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+    <link rel="stylesheet" href="/static/vendor/fontawesome-5.7.2/css/index.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css">
-
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
+    
+    <script src="https://unpkg.com/vue@3.4.21/dist/vue.global.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/moment@2.23.0/moment.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/index.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/js-base64@2.5.1/base64.min.js"></script>
 
     {% block head %} {% end %}
     {% block style %} {% end %}
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            font-family: verdana, arial, helvetica, sans-serif;
+            color: #525f7f;
+        }
+        .container_body {
+            min-height: 100%;
+            margin-bottom: -50px;
+        }
+        .footer {
+            position: relative;
+            width: 100%;
+            height: 20px;
+            font-size: 80%;
+            padding: 5px 0;
+        }
+        .container_body:after {
+            content: "";
+            display: block;
+        }
+    </style>
 </head>
 
 <body>
-    <div id="content-wrapper">
+    <div class="container_body" id="content-wrapper">
         {% block nav %}
         <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
             
-            <div {%block nav_container_class%}class="container"{%end%}>
-                <a class="navbar-brand" href="/">
-                    <span class="title">ATXServer2</span></a>
-                </a>
+            <div {% block nav_container_class %}class="container"{% end %}>
+                <span class="title navbar-brand">ATXServer2</span>
                 <div class="collapse navbar-collapse" id="navbarNavDropdown">
                     <div class="navbar-nav">
                         <a v-for="l in links" :href="l.path" class="nav-item nav-link"
-                            :class="{active: l.path == activePath}">
-                            <i :class="l.icon"></i> {{!l.name}}</a>
+                            :class="{active: activePath === l.path}">
+                            <i :class="l.icon"></i> {{! l.name }}
                         </a>
                         {% block navlinks %}
                         {% end %}
@@ -55,7 +78,7 @@
                             </a>
                             <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                 <a class="dropdown-item" href="/user">用户信息</a>
-                                <a class="dropdown-item" href="/logout">Logout</a>
+                                <a class="dropdown-item" @click="logout" >退出登录</a>
                             </div>
                         </div>
                     </div>
@@ -69,26 +92,55 @@
         </nav>
 
         <script>
-            new Vue({
-                el: "#navbarNavDropdown",
-                data: {
-                    links: [{
-                        path: "/devices",
-                        name: "设备列表",
-                        icon: ["fas", "fa-th-list"]
-                        // icon: ["fab", "fa-android"]
-                        // }, {
-                        //     path: "/apples",
-                        //     name: "苹果设备",
-                        //     icon: ["fab", "fa-apple"]
-                    }, {
-                        path: "/uploads",
-                        name: "文件上传",
-                        icon: ["fas fa-cloud-upload-alt"]
-                    }],
-                    activePath: location.pathname,
+            const { createApp, ref, reactive, watch, computed, created, onBeforeMount, onMounted, onUnmounted } = Vue;
+            const {ElMessage, ElMessageBox, ElNotification, FormInstance,ElTree} = ElementPlus;
+
+            const app = createApp({
+                setup() {
+                    const links = ref([
+                        {
+                            path: "/devices",
+                            name: "设备列表",
+                            icon: "fas fa-th-list"
+                        },
+                        {
+                            path: "/uploads",
+                            name: "文件上传",
+                            icon: "fas fa-cloud-upload-alt"
+                        }
+                    ]);
+
+                    const activePath = ref(location.pathname);
+                    function logout() {
+                        ElMessageBox.confirm(
+                            '<div style="text-align:center;font-size:1.2rem;margin-bottom:1rem">确认退出登录吗？</div>',
+                            {
+                                distinguishCancelAndClose: true,
+                                confirmButtonText: '确认',
+                                cancelButtonText: '取消',
+                                dangerouslyUseHTMLString: true,
+                                overflow: true,
+                        }).then(() => {
+                            axios.get('/logout').then(() => {
+                                localStorage.removeItem('token');
+                                localStorage.removeItem('access_token');
+                                location.href = '/';
+                            }).catch(e => {
+                                ElMessage.error(e.message);
+                            });
+                        }).catch(() => {
+                            console.log('取消退出登录');
+                        });
+                    }
+
+                    return {
+                        links,
+                        activePath,
+                        logout,
+                    };
                 }
-            })
+            });
+            app.use(ElementPlus).mount('#navbarNavDropdown');
         </script>
         {% end %}
         <div id="app">
@@ -103,4 +155,4 @@
     {% end %}
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/group_create.html b/templates/group_create.html
index 155a14d..5d93fdf 100644
--- a/templates/group_create.html
+++ b/templates/group_create.html
@@ -6,57 +6,125 @@
     <i class="fas fa-users"></i> 创建新组
 </a>
 {% end %}
-
+{% block style %}
+<style>
+    .form-horizontal {
+        border: 1px solid #ddd;
+        margin-top: 50px;
+        padding: 20px;
+        padding-top: 30px;
+        padding-bottom: 30px;
+        border-radius: 10px;
+        background-color: #fff;
+        box-shadow: 0 0 10px rgba(0,0,0,0.1);
+        width: 100%;
+        max-width: 500px;
+        margin: 20px auto;
+    }
+    .form-group {s
+         margin-bottom: 10px;
+    }
+</style>
+{% end %}
 {% block content %}
 <div class="container">
-    <form method="post" action="/api/v1/user/groups" @submit.prevent="submit">
+    <form method="post" class="form-horizontal" action="/api/v1/user/groups" @submit.prevent="submit">
         <div class="form-group">
             <label>GroupID</label>
-            <input type="text" name="id" v-model="id" class="form-control" required>
-            <small class="form-text text-muted">建议全英文，不能包含@</small>
+            <el-input
+                type="text"
+                name="id"
+                v-model="id"
+                maxlength="15"
+                placeholder="只能包含字母、数字和下划线"
+                show-word-limit
+                required>
+            </el-input>
+            <div v-if="idError" class="text-danger">
+                    <span style="font-size: 12px;">{{! idError }}</span>
+            </div>
         </div>
         <div class="form-group">
             <label>GroupName</label>
-            <input type="text" name="name" v-model="name" class="form-control" required>
-            <small class="form-text text-muted">这个可以中文，目前仅作为描述字段</small>
+            <el-input
+                type="text"
+                name="name"
+                v-model="name"
+                maxlength="15"
+                placeholder="请输入组名"
+                show-word-limit
+                required>
+            </el-input>
         </div>
         <button type="submit" class="btn btn-default btn-outline-primary">创建组</button>
+        <div>
+            <a href="/api/v1/user/groups">/api/v1/user/groups</a>
+        </div>
     </form>
-    <div>
-        <a href="/api/v1/user/groups">/api/v1/user/groups</a>
-    </div>
+
 </div>
 {% end %}
 
 {% block script %}
 <script>
-    new Vue({
-        el: "#app",
-        data: {
-            id: "",
-            name: "",
-        },
-        methods: {
-            submit() {
-                $.ajax({
+    const group_create = {
+        setup() {
+            const id = ref("");
+            const name = ref("");
+            const idError = ref("");
+
+            // 正则校验
+            const validateId = (value) => {
+                const regex = /^[a-zA-Z0-9_]+$/; // 允许字母、数字和下划线，不允许包含 @
+                if (!regex.test(value)) {
+                    idError.value = "GroupID 只能包含字母、数字和下划线";
+                } else {
+                    idError.value = "";
+                }
+            };
+
+            // 监听 id 的变化
+            watch(id, (newValue) => {
+                validateId(newValue);
+            });
+            // 提交表单
+            const submit = async () => {
+                if (idError.value) {     // 校验失败
+                    return;
+                };
+                await axios({
                     method: "post",
                     url: "/api/v1/user/groups",
                     data: {
-                        id: this.id,
-                        name: this.name,
+                        id: id.value,
+                        name: name.value,
                     }
-                }).done(ret => {
-                    console.log(ret)
-                    window.location.pathname = "/user"
-                }).fail(ret => {
-                    if (ret.status == 400) {
-                        this.$message.error(ret.responseJSON.description)
+                })
+                .then(ret => {
+                    console.log(ret.data);
+                    ElMessage.success("组创建成功");
+                    window.location.pathname = "/user";
+                })
+                .catch(ret => {
+                    if (ret.response && ret.response.status === 400) {
+                        ElMessage.error(ret.response.data.description);
                     } else {
-                        this.$message.error(ret.responseText)
+                        ElMessage.error("创建组失败");
                     }
-                })
-            }
+                });
+            };
+
+            return {
+                id,
+                name,
+                submit,
+                idError,
+            };
         }
-    })
+    };
+    createApp(group_create).use(ElementPlus, {
+        locale: ElementPlusLocaleZhCn,
+    }).mount("#app");
+
 </script>
-{% end %}
\ No newline at end of file
+{% end %}
diff --git a/templates/group_manager.html b/templates/group_manager.html
index 388a99d..ad2ce79 100644
--- a/templates/group_manager.html
+++ b/templates/group_manager.html
@@ -13,21 +13,21 @@ <h2>GroupName</h2>
     <el-table :data="tableData">
 
     </el-table>
-    <form method="post" action="/api/v1/user/groups" @submit.prevent="submit">
+    <el-form method="post" action="/api/v1/user/groups" @submit.prevent="submit">
         <div class="form-group">
             <label>GroupID</label>
-            <input type="text" name="id" v-model="id" class="form-control" required>
+            <el-input type="text" name="id" v-model="id" class="form-control" required></el-input>
             <small class="form-text text-muted">建议全英文，不能包含@</small>
         </div>
         <div class="form-group">
             <label>GroupName</label>
-            <input type="text" name="name" v-model="name" class="form-control" required>
+            <el-input type="text" name="name" v-model="name" class="form-control" required></el-input>
             <small class="form-text text-muted">这个可以中文，目前仅作为描述字段</small>
         </div>
-        <button type="submit" class="btn btn-default btn-outline-primary">创建组</button>
-    </form>
+        <el-button type="submit" class="btn btn-default btn-outline-primary">创建组</el-button>
+    </el-form>
 </div>
 {% end %}
 
 {% block script %}
-{% end %}
\ No newline at end of file
+{% end %}
diff --git a/templates/index.html b/templates/index.html
index 8792a54..f9c11ba 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,9 +1,9 @@
 {% extends "base.html" %}
 
 {% block title %}设备列表{% end %}
-{%block nav_container_class%}
+{% block nav_container_class %}
 class="container-fluid"
-{%end%}
+{% end %}
 {% block script %}
 {% end %}
 {% block style %}
@@ -24,6 +24,7 @@
     .cursor-pointer {
         cursor: pointer;
     }
+
 </style>
 {% end %}
 
@@ -46,25 +47,30 @@
                         </el-checkbox> -->
                     </div>
                     <div>
-                        <el-checkbox size="mini" v-model="filters.platform.android">
-                            <i class="fab fa-android"></i> 安卓 <small>{{!counts.android}}</small>
-                        </el-checkbox>
-                        <el-checkbox size="mini" v-model="filters.platform.apple">
-                            <i class="fab fa-apple"></i> 苹果 <small>{{!counts.apple}}</el-checkbox>
+                        <el-checkbox-button size="mini"  v-model="filters.platform.android">
+                            <i class="fab fa-android"></i> 安卓 <small>{{! counts.android }}</small>
+                        </el-checkbox-button>
+                        <el-checkbox-button size="mini"  v-model="filters.platform.apple">
+                            <i class="fab fa-apple"></i> 苹果 <small>{{! counts.apple }}</small>
+                        </el-checkbox-button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <el-table :data="tableData">
-        <!-- <el-table-column prop="udid" label="UDID"></el-table-column> -->
+        <template #empty>
+            <div class="custom-empty-text">
+                请连接设备后查看
+            </div>
+        </template>
         <el-table-column label="操作">
-            <template slot-scope="scope">
+            <template #default="scope">
                 <template v-if='"offline" == scope.row.status'>
                     <el-button size="mini" disabled>设备离线</el-button>
                 </template>
                 <template v-else-if='"colding" == scope.row.status'>
-                    <el-button disabled :loading="true" size="mini" type="primary">释放中</span>
+                    <el-button disabled :loading="true" size="mini" type="primary">释放中</el-button>
                 </template>
                 <template v-else-if='"busy" == scope.row.status'>
                     <el-button :title="scope.row.userId" style="cursor: not-allowed; background: #f3d19e" size="mini"
@@ -87,65 +93,75 @@
             </template>
         </el-table-column>
         <el-table-column label="设备编号">
-            <template slot-scope="scope">
+            <template #default="scope">
                 <template v-if="scope.row.status == 'stop using'">
                     <a style="font-family: 'Courier New'" :title="scope.row.prop_serial || scope.row.udid"
                         :href='"/devices/"+scope.row.udid+"/remotecontrol"'
-                        target="_blank">{{!(scope.row.prop_serial || scope.row.udid) | shortString}}</a>
+                        target="_blank">
+                        {{! shortString(scope?.row.prop_serial || scope?.row.udid) }}
+                    </a>
                 </template>
                 <template v-else>
                     <span style="font-family: 'Courier New'" :title="scope.row.prop_serial || scope.row.udid">
-                        {{!(scope.row.prop_serial || scope.row.udid) | shortString}}
+                        {{! shortString(scope?.row.prop_serial || scope?.row.udid) }}
                     </span>
                 </template>
             </template>
         </el-table-column>
-        <!-- <el-table-column prop="platform" label="类型"></el-table-column> -->
         <el-table-column label="设备名" prop="prop_name">
-            <template slot-scope="scope">
+            <template #default="scope">
                 <template v-if="!!scope.row.owner">
                     <i v-if="scope.row.owner==user.email" class="fas fa-lock color-yellow"></i>
                     <i v-else class="fas fa-user" :title="scope.row.owner"></i>
                 </template>
-                <span v-text="scope.row.prop_name"></span>
-                <!-- <atx-edit-inline :readonly="!user.admin" :value="scope.row.prop_name"
+                <atx-edit-inline :readonly="!user.admin" :value="scope.row.properties.name"
                     @change="updatePropertyName(scope.row.udid, $event)">
-                </atx-edit-inline> -->
+                </atx-edit-inline>
             </template>
         </el-table-column>
 
         <el-table-column label="型号">
-            <template slot-scope="scope">
+            <template #default="scope">
                 <span v-text="scope.row.properties.product || scope.row.properties.model"></span>
             </template>
         </el-table-column>
-        <el-table-column prop="prop_brand" sortable label="品牌"></el-table-column>
+
+        <el-table-column label="品牌">
+            <template #default="scope">
+                <span v-text="scope.row.properties.brand"></span>
+            </template>
+        </el-table-column>
+
+        <el-table-column label="版本" prop="prop_version" sortable :sort-method="semverCompare">
+            <template #default="scope">
+                <span v-text="scope.row.properties.version"></span>
+            </template>
+        </el-table-column>
+
+        <el-table-column label="锁屏密码" prop="prop_password">
+            <template #default="scope">
+                <span v-text="scope.row.properties.password"></span>
+            </template>
+        </el-table-column>
 
         <el-table-column :sort-method="tableSortBy('prop_propertyId')" sortable label="资产编号">
-            <template slot-scope="scope">
-                <!-- <el-input size="mini"></el-input> -->
+            <template #default="scope">
                 <atx-edit-inline :readonly="!user.admin" :value="scope.row.prop_propertyId"
                     @change="updatePropertyId(scope.row.udid, $event)">
                 </atx-edit-inline>
-                <!-- <span v-text="prop_propertyId"></span> <i class="fas fa-edit cursor-pointer"></i> -->
             </template>
         </el-table-column>
 
        <el-table-column :sort-method="tableSortBy('department')" sortable label="所属部门">
-            <template slot-scope="scope">
-                <!-- <el-input size="mini"></el-input> -->
+            <template #default="scope">
                 <atx-edit-inline :readonly="!user.admin" :value="scope.row.department"
                     @change="updateDeviceDepartment(scope.row.udid, $event)">
                 </atx-edit-inline>
-                <!-- <span v-text="prop_propertyId"></span> <i class="fas fa-edit cursor-pointer"></i> -->
             </template>
         </el-table-column>
-
-        <!-- <el-table-column prop="prop_brand" label="品牌"></el-table-column> -->
-        <el-table-column prop="prop_version" sortable :sort-method="semverCompare" label="Version"></el-table-column>
         <el-table-column sortable :sort-method="tableSortBy('usingDuration')" label="使用时长">
-            <template slot-scope="scope">
-                {{!scope.row.usingDuration | formatDuration}}
+            <template  #default="scope">
+                {{! formatDuration(scope.row?.usingDuration) }}
             </template>
         </el-table-column>
     </el-table>
@@ -160,347 +176,480 @@
     console.log(admin)
 </script>
 <script>
-    $.getJSON("/api/v1/devices?present=true")
-        .then((ret) => {
-            new Vue({
-                el: "#app",
-                data: Object.assign({
-                    websocketDisconnected: false,
-                    user: {
-                        name: currentUserName,
-                        email: currentUserEmail,
-                        admin: admin,
-                    },
-                    devices: [],
-                    counts: {
-                        android: 0,
-                        apple: 0,
-                    },
-                    filters: {
-                        private: false,
-                        platform: {
-                            apple: false,
-                            android: false,
-                        }
+    const deviceList = {
+        setup() {
+            const websocketDisconnected = ref(false);
+            const user = reactive({
+                email: currentUserEmail,
+                username: currentUserName,
+                admin: admin,
+            });
+            const filters = reactive({
+                private: false,
+                platform: {
+                    android: true,
+                    apple: true,
+                },
+            });
+            const counts = reactive({
+                android: 0,
+                apple: 0,
+            });
+            const devices = ref([]);
+            const tableData = ref([]);
+
+            // 周期调用
+            let intervalId = null;
+            const runtimes = ref(0);
+            const maxRuntimes = 5;
+
+            async function fetchDevices() {
+                const response = await axios.get("/api/v1/devices?present=true").then(
+                    (response) => {
+                        devices.value = response.data.devices;
+                        tableData.value = orderedDevices(devices.value);
                     }
-                }, { "devices": ret.devices }),
-                computed: {
-                    tableData() {
-                        let devices = this.orderedDevices.map(v => {
-                            for (const key in v.properties) {
-                                if (v.properties.hasOwnProperty(key)) {
-                                    v['prop_' + key] = v.properties[key]
-                                }
-                            }
-                            let display = v.display || {}
-                            v['display_size'] = display.width + "x" + display.height;
-                            return v;
-                        })
-                        const fp = this.filters.platform
-                        if (Object.values(fp).some(b => b)) {
-                            devices = devices.filter(v => fp[v.platform])
-                        }
-                        return devices;
-                    },
-                    orderedDevices() {
-                        let sortBy = (key) => {
-                            return (a, b) => a[key] > b[key] ? 1 : (b[key] > a[key] ? -1 : 0)
+                );
+            };
+
+            function deviceConvert(device) {
+                if (!device.present) {
+                    return { status: "offline", order: 0, text: "设备离线" };
+                } else if (device.colding) {
+                    return { status: "colding", order: 1, text: "清理中" };
+                } else if (!device.using) {
+                    return { status: "use", order: 2, text: "开始使用" };
+                } else if (device.userId == currentUserEmail) {
+                    return { status: "stop using", order: 3, text: "停止使用" };
+                } else {
+                    return { status: "busy", order: 0.5, text: "忙碌中" };
+                }
+            };
+
+            function orderedDevices(devices){
+                let sortBy = (key) => {
+                    return (a, b) => a[key] > b[key] ? 1 : (b[key] > a[key] ? -1 : 0)
+                };
+
+                let device = devices.map(d => {
+                    return Object.assign(d, deviceConvert(d))
+                }).sort(sortBy("order")).reverse();
+
+                counts.android = 0;
+                counts.apple = 0;
+                device.forEach(d => {
+                    if (d.present) {
+                        if (d.platform == "android") {
+                            counts.android++;
+                        } else if (d.platform == "apple") {
+                            counts.apple++;
                         }
+                    }
+                })
+                return device;
+            };
 
-                        let devices = this.devices.map(d => {
-                            return Object.assign(d, this.deviceConvert(d))
-                        }).sort(sortBy("order")).reverse()
-
-                        this.counts.android = 0
-                        this.counts.apple = 0
-                        devices.forEach(d => {
-                            if (d.present) {
-                                if (d.platform == "android") {
-                                    this.counts.android++
-                                } else if (d.platform == "apple") {
-                                    this.counts.apple++
-                                }
+            function updateDeviceList() {
+                runtimes.value = 0;
+            };
+
+            function updateDeviceStatus(udid, status) {
+                const device = devices.value.find((d) => d.udid == udid);
+                if (device) {
+                    device.status = status;
+                };
+            };
+
+            watch(runtimes,() => {
+                if (runtimes.value >= maxRuntimes || tableData.value.length == 0) {
+                    stopPolling();
+                }
+                if (runtimes.value == 0) {
+                    console.log('刷新设备列表');
+                    //fetchDevices();
+                    //startPolling();
+                }
+            });
+
+            watch(devices, (newVal, oldVal) => {
+                console.log('devices changed', newVal);
+                tableData.value = orderedDevices(devices.value);
+                console.log(tableData.value);
+            }, { deep: true });
+
+            // 启动周期性调用
+            const startPolling = () => {
+                console.log('runtimes:', runtimes.value);
+                if (!intervalId) {
+                    intervalId = setInterval(() => {
+                        fetchDevices();
+                        runtimes.value += 1;
+                    }, 300); // 每 5 秒调用一次
+                };
+            };
+
+            // 停止周期性调用
+            const stopPolling = () => {
+                if (intervalId) {
+                    clearInterval(intervalId);
+                    intervalId = null;
+                    console.log('周期调用已停止');
+                }
+            };
+
+            onMounted(() => {
+                console.log("onMounted");
+                fetchDevices();
+
+                let scheme = location.protocol === 'https' ? 'wss' : 'ws';
+                let wsURL = scheme + "://" + location.host + "/websocket/devicechanges";
+                ws = new WebSocket(wsURL);
+                let refreshKey = null;
+
+                ws.onopen = (evt) => {
+                    console.log("Websocket Connected");
+                    refreshKey = setInterval(() => {
+                       ws.send("ping");
+                       console.log("ping");
+                    }, 5000);
+                };
+
+                ws.onmessage = (evt) => {
+                    let m = JSON.parse(evt.data);
+                    let isUpdate = devices.value.some((v) => v.udid == m.data.udid);
+                    if (isUpdate) {
+                        devices.value = devices.value.map((v) => {
+                            console.log(v.udid);
+                            if (v.udid == m.data.udid) {
+                                return m.data;
                             }
-                        })
-                        return devices;
-
-                        // Only for reference
-                        return [{
-                            udid: "kjnl-dfljsasdklifjdklsfjlasdflsdfk",
-                            platform: "android",
-                            using: false,
-                            present: true, // present is generated by length of sources
-                            ready: false,
-                            colding: false,
-                            private: false,
-                            userId: "anonymous@domain.com",
-                            group: "ntes",
-                            sources: {
-                                "bad1-131jfla-3313131": {
-                                    name: "raspberry",
-                                    address: "10.0.1.123:7712",
-                                    priority: 2,
-                                },
-                                "7718231-sdljf3lkjsf-sfsdf": {
-                                    name: "wifi",
-                                    address: "10.45.16.71:7912",
-                                    priority: 1
-                                }
-                            },
-                            createdAt: "2018-12-1 12:00:01",
-                            lastUsingAt: "2018-12-1 12:00:01",
-                            properties: {
-                                serial: "17fbd6a",
-                                brand: "sumsung",
-                                model: "SM-G9209",
-                                hwaddr: "90:b6:86:7e:7d:ff",
-                                version: "6.0.1",
-                                sdk: 23,
-                                displayHeight: 2560,
-                                displayWidth: 1440,
-                            },
-                        }]
+                            return v;
+                        });
+                    } else {
+                        devices.value.unshift(m.data);
                     }
-                },
-                filters: {
-                    formatTime(value) {
-                        var t = moment(value)
-                        return t.format("YYYY-M-D HH:mm:ss");
-                    },
-                    fromNow(value) {
-                        return moment(value).fromNow();
+                };
+
+                ws.onclose = (evt) => {
+                    console.log("Websocket closed");
+                    websocketDisconnected.value = true;
+                    clearInterval(refreshKey);
+                };
+
+                ws.onerror = (evt) => {
+                    console.error("Websocket error", evt);
+                    websocketDisconnected.value = true;
+                    clearInterval(refreshKey);
+                    // 重新连接
+                    setTimeout(() => {
+                        onMounted();
+                    }, 5000);
+                };
+                //startPolling();
+            });
+            onUnmounted(() => {
+                // stopPolling();
+                if (ws) {
+                    ws.close();
+                }
+                clearInterval(refreshKey);
+            });
+            return {
+                websocketDisconnected,
+                filters,
+                counts,
+                devices,
+                user,
+                tableData,
+                updateDeviceList,
+            };
+        },
+        created() {
+            // console.log("beforeCreate");
+        },
+        methods: {
+            tableSortBy(prop, defaultValue) {
+                defaultValue = defaultValue || null;
+                return (a, b) => {
+                    let va = a[prop] || defaultValue, vb = b[prop] || defaultValue;
+                    if (va == vb) return 0;
+                    return va > vb ? 1 : -1;
+                };
+            },
+            formatTime(value) {
+                var t = moment(value)
+                return t.format("YYYY-M-D HH:mm:ss");
+            },
+            fromNow(value) {
+                return moment(value).fromNow();
+            },
+            shortString(value) {
+                if (value.length > 10) {
+                    return value.slice(0, 8) + "..";
+                }
+                return value;
+            },
+            formatDuration(value) {
+                let duration = moment.duration(value, "seconds");
+                return moment.utc(duration.asMilliseconds()).format("HH:mm:ss");
+            },
+            semverCompare(a, b) {
+                function cmp(as, bs, i, j) {
+                    let va = as[i], vb = bs[j];
+                    if (va == null || vb == null) {
+                        if (va == null && vb == null) {
+                            return 0
+                        };
+                        return va == null ? -1 : 1;
+                    };
+                    if (va == vb) {
+                        return cmp(as, bs, i + 1, j + 1)
+                    };
+                    return parseInt(va, 10) - parseInt(vb, 10) > 0 ? 1 : -1
+                }
+
+                let as = a.prop_version.split("."), bs = b.prop_version.split(".");
+                return cmp(as, bs, 0, 0)
+            },
+            async updatePropertyId(udid, text) { // admin required
+                await axios({
+                    url: "/api/v1/devices/" + udid + "/properties",
+                    method: "put",
+                    headers: {
+                        "contentType": "application/json",
+                        "Authorization": "Bearer " + localStorage.getItem("access_token")
                     },
-                    formatDuration(value) {
-                        let duration = moment.duration(value, "seconds")
-                        return moment.utc(duration.asMilliseconds()).format("HH:mm:ss")
+                    data: JSON.stringify({
+                        "propertyId": text,
+                    })
+                   .then(ret => {
+                        console.log('updatePropertyId');
+                        //this.updateDeviceList();
+                        //console.log(ret);
+                   })
+                   .catch(err => {
+                        if (err.response && err.response.status == 400) {
+                            ElMessage.error(err.response.data.description);
+                        } else {
+                            ElMessage.error(err.response ? err.response.data : err.message);
+                        };
+                   })
+                });
+            },
+            async updatePropertyName(udid, text) { // admin required
+                if (typeof(text) == "string"){
+                    await axios({
+                        url: "/api/v1/devices/" + udid + "/properties",
+                        method: "put",
+                        headers: {
+                            "contentType": "application/json",
+                            "Authorization": "Bearer " + localStorage.getItem("access_token")
+                        },
+                        data: JSON.stringify({
+                            "name": text,
+                        })
+                    })
+                   .then(ret => {
+                        console.log('updatePropertyName');
+                        //this.updateDeviceList();
+                        //console.log(ret);
+                   })
+                   .catch(err => {
+                        if (err.response && err.response.status == 400) {
+                            ElMessage.error(err.response.data.description);
+                        } else {
+                            ElMessage.error(err.response ? err.response.data : err.message);
+                        };
+                   })
+                }
+            },
+            async updateDeviceDepartment(udid, text) { // admin required
+                await axios({
+                    url: "/api/v1/devices/" + udid,
+                    method: "put",
+                    headers: {
+                        "contentType": "application/json",
+                        "Authorization": "Bearer " + localStorage.getItem("access_token")
                     },
-                    shortString(value) {
-                        if (value.length > 10) {
-                            return value.slice(0, 8) + ".."
+                    data: JSON.stringify({
+                        "department": text,
+                    })
+                })
+                   .then(ret => {
+                        console.log('updateDeviceDepartment');
+                        //this.updateDeviceList();
+                        //console.log(ret);
+                   })
+                   .catch(err => {
+                        if (err.response && err.response.status == 400) {
+                            ElMessage.error(err.response.data.description);
+                        } else {
+                            ElMessage.error(err.response ? err.response.data : err.message);
+                        };
+                   })
+            },
+            formatTimeUsed() {
+                // let duration = moment(this.finishedAt) - moment(this.createdAt);
+                // return moment.utc(duration).format('HH:mm:ss')
+            },
+            async deviceAcquire(udid) { // for multi device acquire
+                await axios({
+                    method: "post",
+                    url: "/api/v1/user/devices",
+                    data: { udid: udid },
+                    headers: { 'Content-Type': 'application/json' }
+                })
+                    .then(ret => {
+                        console.log('deviceAcquire');
+                        //this.updateDeviceList();
+                        return ret.data;
+                    })
+                    .catch(err => {
+                        if (err.response && err.response.status == 400) {
+                            ElMessage.error(err.response.data.description);
+                        } else {
+                            ElMessage.error(err.response ? err.response.data : err.message);
+                        }
+                    });
+            },
+            deviceUse(udid) {
+                console.log("use device", udid);
+                //this.updateDeviceList();
+            },
+            async deviceRelease(udid) {
+                await axios({
+                    method: "delete",
+                    url: "/api/v1/user/devices/" + udid,
+                    headers: { 'Content-Type': 'application/json' }
+                })
+                    .then(ret => {
+                        console.log('deviceRelease');
+                        //this.updateDeviceList();
+                        return ret.data;
+                    })
+                    .catch(err => {
+                        if (err.response && err.response.status == 400) {
+                            ElMessage.error(err.response.data.description);
+                        } else {
+                            ElMessage.error(err.response ? err.response.data : err.message);
                         }
-                        return value;
+                    });
+            },
+            deviceStatusName(device) {
+                if (!device.present) {
+                    return "Offline";
+                }
+                if (device.colding) {
+                    return "Colding";
+                }
+                if (!device.using) {
+                    return "Use";
+                }
+                if (device.userId == currentUserEmail) {
+                    return "Stop";
+                }
+                return "Busy";
+            },
+            clickStatus(event, device) {
+                let status = this.deviceStatusName(device);
+                console.log("Status", status);
+                switch (status) {
+                    case "Use":
+                        return true;
+                    case "Stop":
+                        this.deviceRelease(device.udid);
+                        event.preventDefault();
+                        return true;
+                    default:
+                        event.preventDefault();
+                }
+                console.log(device.udid);
+            }
+        },
+        components: {
+            "atx-edit-inline": {
+                props: {
+                    value: String,
+                    readonly: Boolean,
+                    types: String,
+                    options: Array,
+                },
+                data: function () {
+                    return {
+                        edit: false,
+                        editValue: "",
+                        showEdit: false,
                     }
                 },
                 methods: {
-                    semverCompare(a, b) {
-                        function cmp(as, bs, i, j) {
-                            let va = as[i], vb = bs[j];
-                            if (va == null || vb == null) {
-                                if (va == null && vb == null) {
-                                    return 0
-                                }
-                                return va == null ? -1 : 1;
-                            }
-                            if (va == vb) {
-                                return cmp(as, bs, i + 1, j + 1)
-                            }
-                            return parseInt(va, 10) - parseInt(vb, 10) > 0 ? 1 : -1
+                    update() {
+                        // console.log("update",this.types);
+                        if (this.editValue != this.value) {
+                            console.log("update",this.editValue);
+                            this.$emit("change", this.editValue);
                         }
-
-                        let as = a.prop_version.split("."), bs = b.prop_version.split(".");
-                        return cmp(as, bs, 0, 0)
+                        this.edit = false;
                     },
-                    tableSortBy(prop, defaultValue) {
-                        defaultValue = defaultValue || null;
-                        return (a, b) => {
-                            let va = a[prop] || defaultValue, vb = b[prop] || defaultValue;
-                            if (va == vb) return 0;
-                            return va > vb ? 1 : -1
+                    onEdit() {
+                        if (!(this.readonly && this.showEdit)) {
+                            return;
                         }
-                    },
-                    updatePropertyId(udid, text) { // admin required
-                        $.ajax({
-                            url: "/api/v1/devices/" + udid + "/properties",
-                            method: "put",
-                            contentType: "application/json",
-                            data: JSON.stringify({
-                                "propertyId": text,
-                            })
-                        }).fail(ret => {
-                            if (ret.status == 400) {
-                                this.$message.error(ret.responseJSON.description)
-                            } else {
-                                this.$message.error(ret.responseText)
-                            }
-                        })
-                    },
-                    updatePropertyName(udid, text) { // admin required
-                        $.ajax({
-                            url: "/api/v1/devices/" + udid + "/properties",
-                            method: "put",
-                            contentType: "application/json",
-                            data: JSON.stringify({
-                                "name": text,
-                            })
-                        }).fail(ret => {
-                            if (ret.status == 400) {
-                                this.$message.error(ret.responseJSON.description)
-                            } else {
-                                this.$message.error(ret.responseText)
+                        this.edit = true;
+                        this.editValue = this.value;
+                        this.$nextTick(() => {
+                            if(this.types=='select') {
+                                this.$refs.mySelect.focus();
+                            }else{
+                                this.$refs.input.focus();
                             }
-                        })
-                    },
-                    updateDeviceDepartment(udid, text) { // admin required
-                        $.ajax({
-                            url: "/api/v1/devices/" + udid,
-                            method: "put",
-                            contentType: "application/json",
-                            data: JSON.stringify({
-                                "department": text,
-                            })
-                        }).fail(ret => {
-                            if (ret.status == 400) {
-                                this.$message.error(ret.responseJSON.description)
-                            } else {
-                                this.$message.error(ret.responseText)
-                            }
-                        })
-                    },
-                    formatTimeUsed() {
-                        // let duration = moment(this.finishedAt) - moment(this.createdAt);
-                        // return moment.utc(duration).format('HH:mm:ss')
-                    },
-                    deviceAcquire(udid) { // for multi device acquire
-                        return $.ajax({
-                            method: "post",
-                            url: "/api/v1/user/devices",
-                            data: JSON.stringify({
-                                "udid": udid,
-                            }),
-                            dataType: "json",
-                        })
-                            .done(ret => {
-                                console.log(ret)
-                            })
+                        });
                     },
-                    deviceRelease(udid) {
-                        $.ajax({
-                            method: "delete",
-                            url: "/api/v1/user/devices/" + udid,
-                            dataType: "json",
-                        })
-                    },
-                    deviceConvert(device) {
-                        if (!device.present) {
-                            return { status: "offline", order: 0, text: "设备离线" }
-                        } else if (device.colding) {
-                            return { status: "colding", order: 1, text: "清理中" }
-                        } else if (!device.using) {
-                            return { status: "use", order: 2, text: "开始使用" }
-                        } else if (device.userId == currentUserEmail) {
-                            return { status: "stop using", order: 3, text: "停止使用" }
-                        } else {
-                            return { status: "busy", order: 0.5, text: "忙碌中" }
-                        }
-                    },
-                    deviceStatusName(device) {
-                        if (!device.present) {
-                            return "Offline"
-                        }
-                        if (device.colding) {
-                            return "Colding"
-                        }
-                        if (!device.using) {
-                            return "Use"
-                        }
-                        if (device.userId == currentUserEmail) {
-                            return "Stop"
-                        }
-                        return "Busy"
-                    },
-                    clickStatus(event, device) {
-                        let status = this.deviceStatusName(device)
-                        console.log("Status", status)
-                        switch (status) {
-                            case "Use":
-                                return true;
-                            case "Stop":
-                                this.deviceRelease(device.udid);
-                                event.preventDefault()
-                                return true
-                            default:
-                                event.preventDefault()
-                        }
-                        console.log(device.udid)
-                    }
-                },
-                components: {
-                    "atx-edit-inline": {
-                        props: {
-                            value: String,
-                            readonly: Boolean,
-                        },
-                        data: function () {
-                            return {
-                                edit: false,
-                                editValue: "",
+                    showValue(value) {
+                        if (value) {
+                            if (this.types=='select' && this.options) {
+                                const ops = this.options.find(item => item.value == value);
+                                if (ops) {
+                                    return ops.label
+                                }
                             }
-                        },
-                        methods: {
-                            update() {
-                                this.$emit("change", this.editValue);
-                                this.edit = false
-                            },
-                            onEdit() {
-                                this.edit = true
-                                this.editValue = this.value;
-                                this.$nextTick(() => {
-                                    this.$refs.input.focus()
-                                })
+                            if (value.split("\n").length > 1) {
+                                return value.split("\n").join('<br>');
                             }
-                        },
-                        template: `
-                        <div>
-                            <form  v-if="edit" class="input-group input-group-sm" @submit.prevent="update">
-                                <input @keyup.esc="edit=false" ref="input" class="form-control" v-model="editValue">
-                                <div class="input-group-append">
-                                    <button type="submit" class="btn btn-outline-secondary">
-                                        <i class="fas fa-save"></i>
-                                    </button>
-                                </div>
-                            </form>
-                            <div v-else>
-                                {{!value}} <i v-if="!readonly" @click="onEdit" class="fas fa-edit cursor-pointer"></i>
-                            </div>
-                        </div>`
+                            return value
+                        }else{
+                            return "-"
+                        };
                     }
                 },
-                mounted() {
-                    let scheme = location.protocol === 'https' ? 'wss' : 'ws';
-                    let wsURL = scheme + "://" + location.host + "/websocket/devicechanges";
-                    let ws = new WebSocket(wsURL);
-                    let refreshKey = null;
-                    ws.onopen = (evt) => {
-                        console.log("Websocket Connected")
-                        refreshKey = setInterval(() => {
-                            ws.send("ping")
-                        }, 5000)
-                    }
-
-                    ws.onmessage = (evt) => {
-                        let m = JSON.parse(evt.data);
-                        let isUpdate = this.devices.some((v) => {
-                            return v.udid == m.data.udid;
-                        })
-                        if (isUpdate) {
-                            this.devices = this.devices.map((v) => {
-                                console.log(v.udid)
-                                if (v.udid == m.data.udid) {
-                                    return m.data
-                                }
-                                return v
-                            })
-                        } else {
-                            this.devices.unshift(m.data);
-                        }
-                    }
-                    ws.onclose = (evt) => {
-                        console.log("Websocket closed")
-                        this.websocketDisconnected = true
-                        clearInterval(refreshKey)
-                    }
-                }
-            })
-        })
+                template: `
+                <div>
+                    <div v-if="edit">
+                        <el-form @submit.prevent="update">
+                            <el-input v-if="types=='textarea'" v-model="editValue" type="textarea" @keyup.esc="edit=false" @blur="update" @focus="showEdit=false" style="border-radius: 0;" ref="input" autosize />
+                            <el-select v-else-if="types=='select'" v-model="editValue" @keyup.esc="edit=false" @change="update" @blur="update" @focus="showEdit=false" clearable placeholder="请选择" ref="mySelect">
+                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                            </el-select>
+                            <el-input v-else v-model="editValue" @keyup.esc="edit=false" @keydown.enter="update" @blur="update" @focus="showEdit=false" style="border-radius: 0;" ref="input" autosize />
+                        </el-form>
+                    </div>
+                    <div v-else @mouseenter="showEdit = true" @mouseleave="showEdit = false" @click="onEdit">
+                        <span v-html="showValue(value)"></span>
+                        <i v-if="readonly && showEdit" class="cursor-pointer" style="vertical-align: middle;">
+                            <el-icon :size="20" style="margin-top: 5px;">
+                                <Edit />
+                            </el-icon>
+                        </i>
+                    </div>
+                </div>`
+            }
+        },
+    };
+    const deviceListApp = createApp(deviceList);
+    deviceListApp.use(ElementPlus, {
+        locale: ElementPlusLocaleZhCn,
+    }).mount("#app");
+    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+      deviceListApp.component(key, component)
+    };
 </script>
-{% end %}
\ No newline at end of file
+{% end %}
diff --git a/templates/remotecontrol_android.html b/templates/remotecontrol_android.html
index 48d1e42..46677d8 100644
--- a/templates/remotecontrol_android.html
+++ b/templates/remotecontrol_android.html
@@ -4,8 +4,8 @@
 
 
 {% block style %}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@2.9.2/dist/xterm.min.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@2.9.2/dist/addons/fullscreen/fullscreen.min.css">
+<link rel="stylesheet" href="https://unpkg.com/xterm@5.3.0/css/xterm.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@3.8.1/dist/addons/fullscreen/fullscreen.min.css">
 <style>
   html,
   body,
@@ -149,31 +149,31 @@
     <div class="col-sm d-flex flex-column justify-content-center nopadding grow-0"
       style="height: -webkit-fill-available">
       <!-- screen header -->
-      <section class="debugarea" style="height: 32px; line-height: 32px; justify-self: start">
-        {{!properties.serial}}
-        <span>
-          <i v-if="displayLinked" @click="closeDisplayTouchpad" class="fas fa-link" style="color: green"></i>
+      <section class="debugarea" style="height: 32px; line-height: 32px; display: inline; justify-self: start">
+        <span v-text="udid" style="margin-left: 3px;"></span>
+        <span  style="margin-left: 5px;">
+          <i v-if="displayLinked" @click="closeDisplayTouchpad" class="fas fa-link" style="color: green; margin-left: 5px;"></i>
           <i v-else @click="openDisplayTouchpad" class="fas fa-unlink" style="color: red"></i>
         </span>
-        <span>
+        <span  style="margin-left: 5px;">
           <i v-if="websockets.touchpad != null" @click="closeSyncTouchpad" class="fas fa-mouse-pointer"
             style="color: green"></i>
           <i v-else @click="syncTouchpad" class="fas fa-mouse-pointer" style="color: red"></i>
         </span>
-        <span>
+        <span  style="margin-left: 5px;">
           <i v-if="!websockets.winput" class="fas fa-keyboard" style="color: red"></i>
           <i v-else-if="!whatsinput.disabled" class="fas fa-keyboard" style="color: green"></i>
           <i v-else class="fas fa-keyboard" style="color:gray"></i>
         </span>
-        <span @click="hotfix" class="cursor-pointer">
-          <i title="hotfix" class="fas fa-hammer"></i> 修复旋转
+        <span @click="hotfix" class="cursor-pointer"  style="margin-left: 5px;">
+          <i title="hotfix" class="fas fa-hammer"></i>
         </span>
       </section>
       <!-- screen body -->
       <section class="screen debugarea d-flex grow-1 align-items-center justify-content-center flex-reset"
         style="flex-basis: 0%; line-height: 0px" @dblclick="runKeyevent('WAKEUP'); hotfix()">
         <!-- <canvas ref="fgCanvas" class="canvas-fg" v-bind:style="canvasStyle"></canvas> -->
-        <canvas ref="bgCanvas" class="canvas-bg" v-bind:style="canvasStyle"></canvas>
+        <canvas ref="bgCanvas" class="canvas-bg" :style="canvasStyle"></canvas>
         <span class="finger finger-0" style="transform: translate3d(200px, 100px, 0px)"></span>
         <span class="finger finger-1" style="transform: translate3d(200px, 100px, 0px)"></span>
         <!-- <img style="z-index: 10" v-if="loading" src="/assets/loading.svg"> -->
@@ -207,7 +207,7 @@
                 </span>
               </div>
               <div class="card-body">
-                <textarea ref="whatsinput" :disabled="whatsinput.disabled"
+                <textarea ref="whatsinputs" :disabled="whatsinput.disabled"
                   :placeholder="whatsinput.disabled ? 'Input disabled' : 'Input something ...'" class="form-control"
                   v-model="whatsinput.text" @input="sendInputText" @keydown.tab.exact.prevent="sendInputKey('tab')"
                   @keydown.enter.exact.prevent="sendInputKey('enter')"></textarea>
@@ -389,7 +389,7 @@ <h4>增加快捷命令</h4>
             </el-input>
             <el-table size="mini" :data="phoneFiles">
               <el-table-column label="文件名（点击选择文件夹）">
-                <template slot-scope="scope">
+                <template #default="scope">
                   <div width="100%" @dblclick="getPhoneFile(`${scope.row}`)">
                     <span v-text="scope.row"></span>
                   </div>
@@ -405,22 +405,36 @@ <h4>增加快捷命令</h4>
           <el-button icon="el-icon-refresh" size="small" @click="loadPackages">刷新</el-button>
           <el-table :data="packages" :default-sort="{prop: 'name'}">
             <el-table-column sortable prop="label" label="应用">
-              <template slot-scope="scope">
+              <template #default="scope">
                 <img :src="`${deviceUrl}/packages/${scope.row.name}/icon`" onerror="this.onerror='';this.src='/static/images/transparent.png'"
-                  style="position: absolute; top: 50%; margin: -20px; height: 40px; left: 20px;" alt="icon" />
+                  style="position: absolute; top: 50%; border-radius: 10px; margin: -20px; height: 40px; left: 20px;" alt="icon" />
                 <span v-text=" scope.row.label" style="padding-left: 45px"></span>
               </template>
             </el-table-column>
-            <el-table-column sortable prop="name" label="包名"></el-table-column>
+            <el-table-column sortable prop="name" label="包名">
+              <template #default="scope">
+                <span v-text="scope.row.name"></span>
+              </template>
+            </el-table-column>
             <el-table-column sortable label="版本号">
-              <template slot-scope="scope" v-if="scope.row.versionName">
-                <span v-text="scope.row.versionName"></span>(<span v-text="scope.row.versionCode"></span>)
+              <template #default="scope">
+                <template v-if="scope.row.versionName">
+                  <span v-text="scope.row.versionName"></span>(<span v-text="scope.row.versionCode"></span>)
+                </template>
               </template>
             </el-table-column>
             <el-table-column label="操作">
-              <template slot-scope="scope">
-                <a class="color-red" href="javascript:void(0)" @click="removePackage(scope.row.name)">卸载</a>
-                <a href="javascript:void(0)" @click="appLaunch(scope.row.name)">启动</a>
+              <template #default="scope">
+                <el-popconfirm
+                  title="是否确认卸载?"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  @confirm="removePackage(scope.row.name)">
+                  <template #reference>
+                    <el-button  class="color-red">卸载</el-button>
+                  </template>
+                </el-popconfirm>
+                <el-button @click="appLaunch(scope.row.name)">启动</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -434,1052 +448,1158 @@ <h4>增加快捷命令</h4>
 {% end %}
 
 {% block script %}
-<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/xterm@2.9.2/dist/xterm.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/xterm@2.9.2/dist/addons/fit/fit.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/css-element-queries@1.1.1/src/ResizeSensor.min.js"></script>
-<script src="{{static_url('javascripts/imagepool.js')}}"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/cjs/popper.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/css-element-queries@1.2.3/src/ResizeSensor.min.js"></script>
+<script src="/static/javascripts/imagepool.js"></script>
 <script>
+    function delay(ms, value) {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve(value);
+            }, ms || 0);
+        });
+    }
 
-  jQuery.delay = function (ms, value) {
-    var defer = new jQuery.Deferred();
-    setTimeout(function () { defer.resolve(value); }, ms || 0);
-    return defer.promise();
-  };
-
-  const udid = "{{udid}}"
-  const userEmail = "{{current_user.email}}"
-
-  $.getJSON("/api/v1/user/devices/" + udid)
-    .then(ret => {
-      vm = new Vue({
-        el: "#content-wrapper",
-        data: Object.assign({
-          activeName: 'common',
-          canvas: {
-            bg: null,
-            fg: null,
-          },
-          canvasStyle: {
-            opacity: 1,
-            width: '400px',
-            height: '200px',
-            maxHeight: "unset",
-          },
-          rotation: 0,
-          term: null, // Terminal object
-          websockets: {
-            screen: null,
-            touchpad: null,
-            winput: null,
-          },
-          whatsinput: {
-            text: "",
-            disabled: true,
-          },
-          topApp: {
-            packageName: '',
-            activity: '',
-            pid: '',
-          },
-          imagePool: new ImagePool(100),
-          browserUrl: "",
-          app: {
-            installUrl: "",
-            finished: true,
-            packageName: "",
-            message: "",
-            launch: true,
-          },
-          packages: [],
-          userSettings: Object.assign({
-            inputName: '',
-            inputCommand: '',
-            visible: false,
-            shortcuts: [{
-              command: "input keyevent POWER",
-              name: '删除',
-            }]
-          }, {}),
-          phoneFiles: [],
-          phoneDir: "",
-        }, ret.device),
-        methods: {
-          debug() {
-            console.log(...arguments);
-          },
-          onUpload(resp, file, files) {
-            if (!resp.success) {
-              this.$message({
-                message: resp.description,
-                type: "error"
-              })
-              return
-            }
-            this.app.installUrl = resp.data.url;
-            this.appInstall()
-          },
-          appInstall() {
-            this.app.packageName = ""
-            this.app.finished = false
-            this.app.message = "安裝中 ..."
-
-            $.ajax({
-              method: "post",
-              url: this.source.url + "/app/install?udid=" + this.udid,
-              data: {
-                url: this.app.installUrl,
-                launch: this.app.launch,
-                secret: this.source.secret,
-              }
-            }).done(ret => {
-              this.app.message = ret.output;
-              this.app.packageName = ret.packageName;
-            }).fail(err => {
-              if (err.status == 400) {
-                this.app.message = err.responseJSON.description;
+    const udid = "{{udid}}";
+    const userEmail = "{{current_user.email}}";
+</script>
+<script>
+    const { createApp, toRaw, ref, reactive, watch, computed, created, onBeforeMount, onMounted, onUnmounted, defineEmits } = Vue;
+    const {ElMessage, ElMessageBox, ElNotification} = ElementPlus;
+    const remoteControl_android = {
+        setup() {
+            const activeName = ref("common");
+            const bgCanvas = ref(null);
+            const fgCanvas = ref(null);
+            const commonContainer = ref(null);
+            const usingTime = ref(null);
+            const usingBeganAt = ref(null);
+            const xterm = ref(null);
+            const whatsinputs = ref(null);
+            const canvas = reactive({
+              bg: null,
+              fg: null,
+            });
+            const canvasStyle = reactive({
+              opacity: 1,
+              width: '400px',
+              height: '200px',
+              maxHeight: "unset",
+            });
+            const rotation = ref(0);
+            const term = ref(null); // Terminal object
+            const termData = ref("");
+            const websockets = reactive({
+              screen: null,
+              touchpad: null,
+              winput: null,
+            });
+            const whatsinput = reactive({
+              text: "",
+              disabled: true,
+            });
+            const topApp = reactive({
+              packageName: '',
+              activity: '',
+              pid: '',
+            });
+            const imagePool = new ImagePool(100);
+            const browserUrl = ref("");
+            const app = reactive({
+              installUrl: "",
+              finished: true,
+              packageName: "",
+              message: "",
+              launch: true,
+            });
+            const packages = ref([]);
+            const userSettings = Object.assign({
+                inputName: '',
+                inputCommand: '',
+                visible: false,
+                shortcuts: [{
+                    command: "input keyevent POWER",
+                    name: '删除',
+                }]
+            }, {});
+            const phoneDir = ref("");
+            const phoneFiles = ref([]);
+            const data = ref(null);
+            const source = reactive({
+                type:Object,
+                required:true
+            });
+            const websocket = reactive({
+                type:Object,
+                required:true
+            });
+            const address = ref("");
+            const deviceUrl = ref("");
+            const remoteTerminal = ref("");
+            const screenshotUrl = ref("");
+            const remoteConnectAddr = ref("");
+            const whatsInputUrl = ref("");
+            const idleTimeout = ref(0);
+            const displayLinked = computed(() => {
+                return websockets.screen !== null;
+            });
+            function fitCanvas(canvas) {
+              if (canvas.width > canvas.height) {
+                // 横屏显示，宽高相等
+                canvasStyle.maxHeight = canvas.parentElement.clientHeight + "px";
+                canvasStyle.height = "auto"
+                canvasStyle.width = canvas.parentElement.clientHeight + "px"
               } else {
-                this.app.message = err.responseText;
+                canvasStyle.maxHeight = "unset"
+                canvasStyle.height = canvas.parentElement.clientHeight + "px"
+                canvasStyle.width = "auto"
               }
-            }).always(() => {
-              this.app.finished = true
-            })
-          },
-          appLaunch(packageName) {
-            $.ajax({
-              url: `${this.deviceUrl}/session/${packageName}`,
-              method: "post"
-            }).then(ret => {
-              console.log(ret)
-            })
-          },
-          addTopAppToShortcut() {
-            this.$prompt('给 <code>' + this.topApp.packageName + '</code> 起个名字', '快捷方式添加', {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              dangerouslyUseHTMLString: true,
-            }).then(({ value }) => {
-              let command = ["monkey", "-p", this.topApp.packageName, "-c", "android.intent.category.LAUNCHER", "1"].join(" ")
-              this.addShortcut(value, command)
-            }).catch(() => {
-            })
-          },
-          fixInputMethod(quite) {
-            if (!quite) {
-              this.$notify.info({
-                title: "输入法",
-                message: "修复中",
-              })
-            }
-            const inputMethod = "com.buscode.whatsinput/.WifiInputMethod"
-            return this.runShell("ime enable " + inputMethod)
-              .then(() => {
-                return this.runShell("ime set " + inputMethod)
-              })
-              .then($.delay(1000))
-              .then(() => {
-                this.$refs.whatsinput.focus()
-                return this.loadWhatsinput()
-              })
-              .then(() => {
-                if (!quite) {
-                  this.$notify.success({ message: "输入法修复完成" })
+            };
+            function encodeQuery(query) {
+              return encodeURIComponent(query);
+            };
+            function decodeQuery(query) {
+              return JSON.parse(decodeURIComponent(query));
+            };
+            const hasData = computed(() => {
+                if (data.value) {
+                    return true;
                 }
-              }, () => {
-                if (!quite) {
-                  this.$notify.success({ message: "输入法修复失败，F12查看详情" })
+                return false;
+            });
+            function runShell(command) {
+                return axios.get(deviceUrl.value + "/shell?command=" + command)
+                  .then(ret => {
+                      console.log("runShell", command, ret.data)
+                      return ret;
+                    })
+            };
+            function runKeyevent(key) {
+              return runShell("input keyevent " + key.toUpperCase())
+            };
+            function loadWhatsinput(callback) {
+                console.log(whatsInputUrl.value);
+                let defer = $.Deferred();
+                let ws = new WebSocket(whatsInputUrl.value);
+                websockets.winput = ws;
+                ws.onopen = (ev) => {
+                  defer.resolve();
+                  console.log("whatsinput connected");
+                };
+                ws.onmessage = (ev) => {
+                  console.log("winput recv", ev);
+                  let data = JSON.parse(ev.data);
+                  switch (data.type) {
+                    case "InputStart":
+                      whatsinput.text = data.text;
+                      whatsinput.disabled = false
+                      setTimeout(() => {
+                        whatsinputs.value.focus()
+                        whatsinputs.value.select()
+                      }, 1)
+                      break;
+                    case "InputFinish":
+                      whatsinput.disabled = true
+                      break
+                    case "InputChange":
+                      whatsinput.text = data.text;
+                      break;
+                  }
+                }
+                ws.onerror = (ev) => {
+                  console.error(ev)
+                  defer.reject()
+                }
+                ws.onclose = (ev) => {
+                  console.log("winput closed")
+                  if (ws === websockets.winput) {
+                    websockets.winput = null;
+                  }
+                }
+                return defer;
+            };
+            function closeWindowWhenReleased(interval) {
+              setTimeout(() => {
+                if (document.hidden) {
+                  axios.get("/api/v1/user/devices/" + udid)
+                    .then(ret => {
+                      closeWindowWhenReleased(5000)
+                    })
+                    .catch(ret => {
+                      let content = '设备' + idleTimeout.value + "秒内没有操作，设备自动释放，点击刷新重新占用该设备"
+                      ElMessageBox.confirm(content, '设备超时提示', {
+                        confirmButtonText: '刷新',
+                        type: 'warning'
+                      }).then(() => {
+                        location.reload()
+                      }).catch(() => {
+                        window.close()
+                      })
+                    })
+                } else {
+                  axios.get("/api/v1/user/devices/" + udid + "/active")
+                    .then((ret) => {
+                      closeWindowWhenReleased(interval)
+                    })
+                    .catch(function (ret) {
+                      console.log(ret.data)
+                      alert("设备可能被释放了，Press F12 to debug")
+                    })
+                }
+              }, interval)
+            };
+            function mirrorDisplay() {
+              let ws = new WebSocket(deviceUrl.value.replace(/^http/, "ws") + '/minicap');
+              websockets.screen = ws;
+
+              ws.onopen = (ev) => {
+                console.log('minicap connected')
+                canvasStyle.opacity = 1;
+              };
+              ws.onmessage = (message) => {
+                if (message.data instanceof Blob) {
+                  drawBlobImageToCanvas(message.data, canvas.bg)
+                } else if (/data size: /.test(message.data)) {
+                  // console.log("receive message:", message.data)
+                } else if (/^rotation/.test(message.data)) {
+                  rotation.value = parseInt(message.data.substr('rotation '.length), 10);
+                  console.log("rotation:", rotation)
+                } else {
+                  console.log("receive message:", message.data)
                 }
-              })
-          },
-          loadWhatsinput(callback) {
-            console.log(this.whatsInputUrl)
-            let defer = $.Deferred()
-            let ws = new WebSocket(this.whatsInputUrl)
-            this.websockets.winput = ws;
-            ws.onopen = (ev) => {
-              defer.resolve()
-              console.log("whatsinput connected")
-            }
-            ws.onmessage = (ev) => {
-              console.log("winput recv", ev)
-              let data = JSON.parse(ev.data)
-              switch (data.type) {
-                case "InputStart":
-                  this.whatsinput.text = data.text;
-                  this.whatsinput.disabled = false
-                  setTimeout(() => {
-                    this.$refs.whatsinput.focus()
-                    this.$refs.whatsinput.select()
-                  }, 1)
-                  break;
-                case "InputFinish":
-                  this.whatsinput.disabled = true
-                  break
-                case "InputChange":
-                  this.whatsinput.text = data.text;
-                  break;
               }
-            }
-            ws.onerror = (ev) => {
-              console.error(ev)
-              defer.reject()
-            }
-            ws.onclose = (ev) => {
-              console.log("winput closed")
-              if (ws === this.websockets.winput) {
-                this.websockets.winput = null;
+              ws.onclose = (ev) => {
+                if (websockets.screen === ws) {
+                  console.log("minicap closed")
+                  websockets.screen = null;
+                  ElMessage({
+                    showClose: true,
+                    message: '设备屏幕同步中断',
+                    type: 'error',
+                  });
+                  canvasStyle.opacity = 0.5;
+                }
               }
-            }
-            return defer;
-          },
-          sendInputText() {
-            console.log("sync", this.whatsinput.text)
-            let ws = this.websockets.winput;
-            ws.send(JSON.stringify({
-              type: "InputEdit",
-              text: this.whatsinput.text,
-            }))
-          },
-          sendInputKey(key) {
-            console.log("Sync key", key)
-            let code = { "enter": 66, "tab": 61 }[key] || key;
-            let ws = this.websockets.winput;
-            ws.send(JSON.stringify({
-              type: "InputKey",
-              code: "" + code,
-            }))
-          },
-          loadUserSettings() {
-            return $.getJSON("/api/v1/user/settings").then(ret => {
-              this.userSettings.shortcuts = ret.shortcuts || []
-            })
-          },
-          updateUserSettings() {
-            return $.ajax({
-              method: "put",
-              url: "/api/v1/user/settings",
-              dataType: "json",
-              data: JSON.stringify({
-                "shortcuts": this.userSettings.shortcuts,
-              })
-            }).then(ret => {
-              console.log("设置已更新")
-            })
-          },
-          triggerShortcut(v) {
-            return this.runShell(v.command).done(ret => {
-              this.$notify({
-                dangerouslyUseHTMLString: true,
-                message: "CMD: <code>" + v.command + "</code><br>Output: <code>" + ret.output + "</code>",
-              })
-              console.log("Shell", v.command, "output", ret)
-            })
-          },
-          addShortcut(name, command) {
-            if (!name || !command) {
-              return
-            }
-            let s = this.userSettings;
-            s.shortcuts.push({ name, command })
-            s.inputName = ""
-            s.inputCommand = ""
-            s.visible = false;
-            return this.updateUserSettings()
-          },
-          removeShortcut(c) {
-            this.userSettings.shortcuts = this.userSettings.shortcuts.filter(v => {
-              return v.name != c.name
-            })
-            return this.updateUserSettings()
-          },
-          hotfix() {
-            // 修复屏幕旋转问题
-            // this.$notify({
-            //   message: "Hotfixing",
-            //   position: 'top-left',
-            //   duration: 1000,
-            // })
-            $.ajax({
-              method: "get",
-              url: this.deviceUrl + "/info/rotation"
-            }).done(ret => {
-              this.$notify({
-                message: "Rotation updated",
-                position: 'bottom-left',
-                duration: 1000,
-              })
-            })
-          },
-          stopUsing() {
-            $.ajax({
-              method: "delete",
-              url: "/api/v1/user/devices/" + this.udid,
-              dataType: "json"
-            }).always(() => {
-              window.close()
-            })
-          },
-          openBrowser(url) {
-            if (!/^https?:\/\//.test(url)) {
-              url = "http://" + url;
-            }
-            this.browserUrl = ""
-            return this.runShell("am start -a android.intent.action.VIEW -d " + url);
-          },
-          runShell(command) {
-            return $.ajax({
-              method: "get",
-              url: this.deviceUrl + "/shell",
-              data: {
-                "command": command,
-              },
-              dataType: "json"
-            }).then(ret => {
-              console.log("runShell", command, ret)
-              return ret;
-            })
-          },
-          runKeyevent(key) {
-            return this.runShell("input keyevent " + key.toUpperCase())
-          },
-          handleTabClick(tab, event) {
-            console.log(tab.name)
-            if (tab.name == "terminal") {
-              if (!this.term) {
-                this.loadTerminal()
+              ws.onerror = function (ev) {
+                console.log("screen websocket error")
               }
-            }
-            if (tab.name == "filemanager") {
-              this.getPhoneFile();
-            }
-            if (tab.name == "packagemanager") {
-              if (!this.packages.length) {
-                this.loadPackages()
+            };
+            function syncTouchpad() {
+              let element = canvas.bg; // maybe fg is better
+              let screen = {
+                bounds: {}
               }
-            }
-          },
-          loadTerminal() {
-            let term;
-            let ws = new WebSocket("ws://" + this.address + "/term");
-            ws.binaryType = "arraybuffer"
-
-            function ab2str(buf) {
-              return String.fromCharCode.apply(null, new Uint8Array(buf));
-            }
 
-            ws.onopen = (evt) => {
-              term = new Terminal({
-                screenKeys: true,
-                useStyle: true,
-                cursorBlink: true
-              })
-              term.on('data', data => {
-                ws.send(new TextEncoder().encode("\x00" + data))
-              })
-
-              term.on("resize", evt => {
-                ws.send(new TextEncoder().encode("\x01" + JSON.stringify({
-                  cols: evt.cols,
-                  rows: evt.rows,
-                })))
-              })
-
-              term.on("title", title => {
-                console.log("title", title)
-              })
-
-              term.open(this.$refs.xterm, { focus: true });
-              term.fit()
-              this.term = term;
+              let ws = new WebSocket("ws://" + address.value + "/minitouch");
+              websockets.touchpad = ws;
 
-              new ResizeSensor(this.$refs.xterm, function (e) {
-                console.log("Resize", e)
-                term.resize()
-                term.fit()
-              })
-            }
-
-            ws.onmessage = (evt) => {
-              if (evt.data instanceof ArrayBuffer) {
-                term.write(ab2str(evt.data))
-              } else {
-                alert(evt.data)
+              ws.onopen = (ret) => {
+                console.log("minitouch connected")
+                touchReset() // fix when device is out of control
               }
-            }
-
-            ws.onclose = (evt) => {
-              term.write("Session terminated");
-              term.destroy()
-            }
-
-            ws.onerror = (evt) => {
-              console.log(evt)
-            }
-          },
-          getPhoneFile(dir) {
-            if (!dir || dir == "/sdcard") {
-              this.phoneDir = "/sdcard";
-            } else if (dir == "..") {
-              if (this.phoneDir.indexOf("/") == this.phoneDir.lastIndexOf("/")){
-                this.phoneDir = "/sdcard";
-              } else {
-                this.phoneDir = this.phoneDir.substr(0, this.phoneDir.lastIndexOf("/"));
+              ws.onmessage = (message) => {
+                // console.log("minitouch recv", message)
               }
-            } else if (dir == this.phoneDir) {
-              this.phoneDir = dir;
-            } else {
-              this.phoneDir = this.phoneDir + "/" + dir;
-            }
-            this.runShell('ls \"' + this.phoneDir + '/\"')
-            .done(ret => {
-              this.phoneFiles = ret.output.split("\n");
-              this.phoneFiles.pop();
-              if (this.phoneFiles[0].search("^ls.*Not a directory$") == 0) {
-                this.$message({
-                  showClose: true,
-                  message: "不是文件夹",
-                  type: "error"
-                });
-                this.getPhoneFile('..');
+              ws.onclose = () => {
+                if (websockets.touchpad === ws) {
+                  console.log("minitouch closed")
+                  websockets.touchpad = null;
+                }
+                element.removeEventListener('mousedown', mouseDownListener);
+                element.removeEventListener('mousewheel', mouseWheelListener);
               }
-            });
-          },
-          loadPackages() {
-            return this.runShell("pm list packages -3").then(ret => {
-              let packages = []
-              ret.output.split(/\r?\n/).forEach(v => {
-                if (v.startsWith("package:")) {
-                  const packageName = v.substr("package:".length)
-                  let item = {
-                    key: packageName,
-                    name: packageName,
-                    label: "",
-                    versionName: "",
-                    versionCode: "",
-                  }
-                  $.getJSON(`${this.deviceUrl}/packages/${packageName}/info`).then(ret => {
-                    if (ret.success && ret.data) {
-                      item.label = ret.data.label
-                      item.versionName = ret.data.versionName
-                      item.versionCode = ret.data.versionCode
-                      console.log(packageName, ret.data)
-                    }
-                  })
-                  packages.push(item)
+
+              function calculateBounds() {
+                var el = element;
+                screen.bounds.w = el.offsetWidth
+                screen.bounds.h = el.offsetHeight
+                screen.bounds.x = 0
+                screen.bounds.y = 0
+
+                while (el.offsetParent) {
+                  screen.bounds.x += el.offsetLeft
+                  screen.bounds.y += el.offsetTop
+                  el = el.offsetParent
                 }
-              })
-              this.packages = packages;
-            })
-          },
-          removePackage(packageName) {
-            if (!confirm(`确认卸载 ${packageName} ?`)) {
-              return
-            }
-            return this.runShell(`pm uninstall ${packageName}`).then(() => {
-              const index = this.packages.findIndex((v) => {
-                return v.name == packageName
-              })
-              this.packages.splice(index, 1)
-            })
-          },
-          openDisplayTouchpad() {
-            this.mirrorDisplay()
-            this.syncTouchpad()
-          },
-          closeDisplayTouchpad() {
-            this.closeMirrorDisplay()
-            this.closeSyncTouchpad()
-          },
-          mirrorDisplay() {
-            let ws = new WebSocket(this.deviceUrl.replace(/^http/, "ws") + '/minicap');
-            this.websockets.screen = ws;
-
-            ws.onopen = (ev) => {
-              console.log('minicap connected')
-              this.canvasStyle.opacity = 1;
-            };
-            ws.onmessage = (message) => {
-              if (message.data instanceof Blob) {
-                this.drawBlobImageToCanvas(message.data, this.canvas.bg)
-              } else if (/data size: /.test(message.data)) {
-                // console.log("receive message:", message.data)
-              } else if (/^rotation/.test(message.data)) {
-                this.rotation = parseInt(message.data.substr('rotation '.length), 10);
-                console.log("rotation:", this.rotation)
-              } else {
-                console.log("receive message:", message.data)
               }
-            }
-            ws.onclose = (ev) => {
-              if (this.websockets.screen === ws) {
-                console.log("minicap closed")
-                this.websockets.screen = null;
-                this.$message({
-                  showClose: true,
-                  message: '设备屏幕同步中断',
-                  type: 'error',
-                });
-                this.canvasStyle.opacity = 0.5;
+
+              /**
+               * Rotation affects the screen as follows:
+               *
+               *                   0deg
+               *                 |------|
+               *                 | MENU |
+               *                 |------|
+               *            -->  |      |  --|
+               *            |    |      |    v
+               *                 |      |
+               *                 |      |
+               *                 |------|
+               *        |----|-|          |-|----|
+               *        |    |M|          | |    |
+               *        |    |E|          | |    |
+               *  90deg |    |N|          |U|    | 270deg
+               *        |    |U|          |N|    |
+               *        |    | |          |E|    |
+               *        |    | |          |M|    |
+               *        |----|-|          |-|----|
+               *                 |------|
+               *            ^    |      |    |
+               *            |--  |      |  <--
+               *                 |      |
+               *                 |      |
+               *                 |------|
+               *                 | UNEM |
+               *                 |------|
+               *                  180deg
+               *
+               * Which leads to the following mapping:
+               *
+               * |--------------|------|---------|---------|---------|
+               * |              | 0deg |  90deg  |  180deg |  270deg |
+               * |--------------|------|---------|---------|---------|
+               * | CSS rotate() | 0deg | -90deg  | -180deg |  90deg  |
+               * | bounding w   |  w   |    h    |    w    |    h    |
+               * | bounding h   |  h   |    w    |    h    |    w    |
+               * | pos x        |  x   |   h-y   |   w-x   |    y    |
+               * | pos y        |  y   |    x    |   h-y   |   h-x   |
+               * |--------------|------|---------|---------|---------|
+               */
+              function coords(boundingW, boundingH, relX, relY, rotation) {
+                var w, h, x, y;
+
+                switch (rotation) {
+                  case 0:
+                    w = boundingW
+                    h = boundingH
+                    x = relX
+                    y = relY
+                    break
+                  case 90:
+                    w = boundingH
+                    h = boundingW
+                    x = boundingH - relY
+                    y = relX
+                    break
+                  case 180:
+                    w = boundingW
+                    h = boundingH
+                    x = boundingW - relX
+                    y = boundingH - relY
+                    break
+                  case 270:
+                    w = boundingH
+                    h = boundingW
+                    x = relY
+                    y = boundingW - relX
+                    break
+                }
+
+                return {
+                  xP: x / w,
+                  yP: y / h,
+                }
               }
-            }
-            ws.onerror = function (ev) {
-              console.log("screen websocket error")
-            }
-          },
-          closeMirrorDisplay() {
-            this.canvasStyle.opacity = 0.5;
-            if (this.websockets.screen) {
-              let ws = this.websockets.screen;
-              this.websockets.screen = null;
-              ws.close()
-            }
-          },
-          syncTouchpad() {
-            let element = this.canvas.bg; // maybe fg is better
-            let screen = {
-              bounds: {}
-            }
 
-            let ws = new WebSocket("ws://" + this.address + "/minitouch")
-            this.websockets.touchpad = ws
+              let touchDown = (index, x, y, pressure) => {
+                let scaled = coords(screen.bounds.w, screen.bounds.h, x, y, rotation.value);
+                ws.send(JSON.stringify({
+                  operation: 'd',
+                  index: index,
+                  pressure: pressure,
+                  xP: scaled.xP,
+                  yP: scaled.yP,
+                }))
+              }
 
-            ws.onopen = (ret) => {
-              console.log("minitouch connected")
-              touchReset() // fix when device is out of control
-            }
-            ws.onmessage = (message) => {
-              // console.log("minitouch recv", message)
-            }
-            ws.onclose = () => {
-              if (this.websockets.touchpad === ws) {
-                console.log("minitouch closed")
-                this.websockets.touchpad = null;
+              let touchMove = (index, x, y, pressure) => {
+                let scaled = coords(screen.bounds.w, screen.bounds.h, x, y, rotation.value);
+                ws.send(JSON.stringify({
+                  operation: 'm',
+                  index: index,
+                  pressure: pressure,
+                  xP: scaled.xP,
+                  yP: scaled.yP,
+                }))
               }
-              element.removeEventListener('mousedown', mouseDownListener);
-              element.removeEventListener('mousewheel', mouseWheelListener);
-            }
 
-            function calculateBounds() {
-              var el = element;
-              screen.bounds.w = el.offsetWidth
-              screen.bounds.h = el.offsetHeight
-              screen.bounds.x = 0
-              screen.bounds.y = 0
-
-              while (el.offsetParent) {
-                screen.bounds.x += el.offsetLeft
-                screen.bounds.y += el.offsetTop
-                el = el.offsetParent
+              function touchWait(millseconds) {
+                ws.send(JSON.stringify({
+                  operation: 'w',
+                  milliseconds: millseconds,
+                }))
               }
-            }
 
-            /**
-             * Rotation affects the screen as follows:
-             *
-             *                   0deg
-             *                 |------|
-             *                 | MENU |
-             *                 |------|
-             *            -->  |      |  --|
-             *            |    |      |    v
-             *                 |      |
-             *                 |      |
-             *                 |------|
-             *        |----|-|          |-|----|
-             *        |    |M|          | |    |
-             *        |    |E|          | |    |
-             *  90deg |    |N|          |U|    | 270deg
-             *        |    |U|          |N|    |
-             *        |    | |          |E|    |
-             *        |    | |          |M|    |
-             *        |----|-|          |-|----|
-             *                 |------|
-             *            ^    |      |    |
-             *            |--  |      |  <--
-             *                 |      |
-             *                 |      |
-             *                 |------|
-             *                 | UNEM |
-             *                 |------|
-             *                  180deg
-             *
-             * Which leads to the following mapping:
-             *
-             * |--------------|------|---------|---------|---------|
-             * |              | 0deg |  90deg  |  180deg |  270deg |
-             * |--------------|------|---------|---------|---------|
-             * | CSS rotate() | 0deg | -90deg  | -180deg |  90deg  |
-             * | bounding w   |  w   |    h    |    w    |    h    |
-             * | bounding h   |  h   |    w    |    h    |    w    |
-             * | pos x        |  x   |   h-y   |   w-x   |    y    |
-             * | pos y        |  y   |    x    |   h-y   |   h-x   |
-             * |--------------|------|---------|---------|---------|
-             */
-            function coords(boundingW, boundingH, relX, relY, rotation) {
-              var w, h, x, y;
-
-              switch (rotation) {
-                case 0:
-                  w = boundingW
-                  h = boundingH
-                  x = relX
-                  y = relY
-                  break
-                case 90:
-                  w = boundingH
-                  h = boundingW
-                  x = boundingH - relY
-                  y = relX
-                  break
-                case 180:
-                  w = boundingW
-                  h = boundingH
-                  x = boundingW - relX
-                  y = boundingH - relY
-                  break
-                case 270:
-                  w = boundingH
-                  h = boundingW
-                  x = relY
-                  y = boundingW - relX
-                  break
+              function touchUp(index) {
+                ws.send(JSON.stringify({
+                  operation: 'u',
+                  index: index,
+                }))
               }
 
-              return {
-                xP: x / w,
-                yP: y / h,
+              function touchReset() {
+                ws.send(JSON.stringify({
+                  operation: "r",
+                }))
               }
-            }
 
-            let touchDown = (index, x, y, pressure) => {
-              let scaled = coords(screen.bounds.w, screen.bounds.h, x, y, this.rotation);
-              ws.send(JSON.stringify({
-                operation: 'd',
-                index: index,
-                pressure: pressure,
-                xP: scaled.xP,
-                yP: scaled.yP,
-              }))
-            }
+              function touchCommit() {
+                ws.send(JSON.stringify({ operation: 'c' }))
+              }
 
-            let touchMove = (index, x, y, pressure) => {
-              let scaled = coords(screen.bounds.w, screen.bounds.h, x, y, this.rotation);
-              ws.send(JSON.stringify({
-                operation: 'm',
-                index: index,
-                pressure: pressure,
-                xP: scaled.xP,
-                yP: scaled.yP,
-              }))
-            }
+              let mouseDownListener = (event) => {
+                var e = event;
+                if (e.originalEvent) {
+                  e = e.originalEvent
+                }
+                e.preventDefault()
 
-            function touchWait(millseconds) {
-              ws.send(JSON.stringify({
-                operation: 'w',
-                milliseconds: millseconds,
-              }))
-            }
+                // activate whatsinput
+                whatsinputs.value.focus()
 
-            function touchUp(index) {
-              ws.send(JSON.stringify({
-                operation: 'u',
-                index: index,
-              }))
-            }
+                // Middle click equals HOME
+                if (e.which === 2) {
+                  runKeyevent("HOME")
+                  return
+                }
+                // Right click equals BACK
+                if (e.which === 3) {
+                  runKeyevent("BACK")
+                  return
+                }
 
-            function touchReset() {
-              ws.send(JSON.stringify({
-                operation: "r",
-              }))
-            }
 
-            function touchCommit() {
-              ws.send(JSON.stringify({ operation: 'c' }))
-            }
+                fakePinch = e.altKey
+                calculateBounds()
 
-            let mouseDownListener = (event) => {
-              var e = event;
-              if (e.originalEvent) {
-                e = e.originalEvent
-              }
-              e.preventDefault()
+                var x = e.pageX - screen.bounds.x
+                var y = e.pageY - screen.bounds.y
+                var pressure = 0.5
+                // activeFinger(0, e.pageX, e.pageY, pressure);
 
-              // activate whatsinput
-              this.$refs.whatsinput.focus()
+                touchDown(0, x, y, pressure);
+                touchCommit();
 
-              // Middle click equals HOME
-              if (e.which === 2) {
-                this.runKeyevent("HOME")
-                return
-              }
-              // Right click equals BACK
-              if (e.which === 3) {
-                this.runKeyevent("BACK")
-                return
+                // element.removeEventListener('mousemove', mouseHoverListener);
+                element.addEventListener('mousemove', mouseMoveListener);
+                document.addEventListener('mouseup', mouseUpListener);
               }
 
+              let mouseMoveListener = (event) => {
+                var e = event
+                if (e.originalEvent) {
+                  e = e.originalEvent
+                }
+                // Skip secondary click
+                if (e.which === 3) {
+                  return
+                }
+                e.preventDefault()
 
-              fakePinch = e.altKey
-              calculateBounds()
-
-              var x = e.pageX - screen.bounds.x
-              var y = e.pageY - screen.bounds.y
-              var pressure = 0.5
-              // activeFinger(0, e.pageX, e.pageY, pressure);
+                var pressure = 0.5
+                activeFinger(0, e.pageX, e.pageY, pressure);
+                var x = e.pageX - screen.bounds.x
+                var y = e.pageY - screen.bounds.y
 
-              touchDown(0, x, y, pressure);
-              touchCommit();
+                touchMove(0, x, y, pressure);
+                touchCommit();
+              }
 
-              // element.removeEventListener('mousemove', mouseHoverListener);
-              element.addEventListener('mousemove', mouseMoveListener);
-              document.addEventListener('mouseup', mouseUpListener);
-            }
+              function mouseUpListener(event) {
+                var e = event
+                if (e.originalEvent) {
+                  e = e.originalEvent
+                }
+                // Skip secondary click
+                if (e.which === 3) {
+                  return
+                }
+                e.preventDefault()
 
-            let mouseMoveListener = (event) => {
-              var e = event
-              if (e.originalEvent) {
-                e = e.originalEvent
-              }
-              // Skip secondary click
-              if (e.which === 3) {
-                return
+                touchUp(0)
+                touchCommit()
+                stopMousing()
               }
-              e.preventDefault()
-
-              var pressure = 0.5
-              activeFinger(0, e.pageX, e.pageY, pressure);
-              var x = e.pageX - screen.bounds.x
-              var y = e.pageY - screen.bounds.y
 
-              touchMove(0, x, y, pressure);
-              touchCommit();
-            }
+              function stopMousing() {
+                element.removeEventListener('mousemove', mouseMoveListener);
+                // element.addEventListener('mousemove', mouseHoverListener);
+                document.removeEventListener('mouseup', mouseUpListener);
+                deactiveFinger(0);
+              }
 
-            function mouseUpListener(event) {
-              var e = event
-              if (e.originalEvent) {
-                e = e.originalEvent
+              function activeFinger(index, x, y, pressure) {
+                var scale = 0.5 + pressure
+                $(".finger-" + index)
+                  .addClass("active")
+                  .css("transform", 'translate3d(' + x + 'px,' + y + 'px,0)')
               }
-              // Skip secondary click
-              if (e.which === 3) {
-                return
+
+              function deactiveFinger(index) {
+                $(".finger-" + index).removeClass("active")
               }
-              e.preventDefault()
 
-              touchUp(0)
-              touchCommit()
-              stopMousing()
-            }
+              function preventHandler(event) {
+                event.preventDefault()
+              }
 
-            function stopMousing() {
-              element.removeEventListener('mousemove', mouseMoveListener);
-              // element.addEventListener('mousemove', mouseHoverListener);
-              document.removeEventListener('mouseup', mouseUpListener);
-              deactiveFinger(0);
-            }
+              let wheel = {
+                count: 0,
+                key: null,
+                mouseY: null,
+              };
 
-            function activeFinger(index, x, y, pressure) {
-              var scale = 0.5 + pressure
-              $(".finger-" + index)
-                .addClass("active")
-                .css("transform", 'translate3d(' + x + 'px,' + y + 'px,0)')
-            }
+              function mouseWheelListener(event) {
+                let e = event
+                if (e.originalEvent) {
+                  e = e.originalEvent
+                }
 
-            function deactiveFinger(index) {
-              $(".finger-" + index).removeClass("active")
-            }
+                calculateBounds()
+                let x = e.pageX - screen.bounds.x
+                let y = e.pageY - screen.bounds.y
+                let pressure = 0.5
+
+                if (wheel.key === null) { // mouse down
+                  wheel.mouseY = y;
+                  touchDown(1, x, y, pressure)
+                  touchCommit()
+                } else {
+                  clearTimeout(wheel.key)
+                }
 
-            function preventHandler(event) {
-              event.preventDefault()
-            }
+                // 从 wheel.mouseY --> targetY 分10步移动完
+                wheel.count += 1
+                const stepCount = 10; // 10 steps
+                const direction = e.deltaY > 0 ? -1 : 1
+                const offsetY = wheel.count * direction * 0.2 * screen.bounds.h
+                const targetY = Math.max(0, Math.min(y + offsetY, screen.bounds.h))
+
+                let mouseY = wheel.mouseY;
+                const stepY = (targetY - mouseY) / stepCount;
+                for (let i = 0; i < stepCount; i += 1) {
+                  mouseY += stepY;
+                  touchWait(10); // 间隔10ms
+                  touchMove(1, x, mouseY, pressure)
+                  touchCommit()
+                }
+                wheel.mouseY = targetY; // 记录当前点的位置
+
+                wheel.key = setTimeout(() => { // wheel stopped do mouse up
+                  touchUp()
+                  touchCommit()
+                  wheel.key = null;
+                  wheel.count = 0;
+                }, 100)
+              }
 
-            let wheel = {
-              count: 0,
-              key: null,
-              mouseY: null,
+              /* bind listeners */
+              element.addEventListener('mousedown', mouseDownListener);
+              element.addEventListener('mousewheel', mouseWheelListener);
+              // element.addEventListener('mousemove', mouseHoverListener);
+            };
+            function openDisplayTouchpad() {
+                mirrorDisplay()
+                syncTouchpad()
+            };
+            function closeDisplayTouchpad() {
+              closeMirrorDisplay()
+              closeSyncTouchpad()
             };
 
-            function mouseWheelListener(event) {
-              let e = event
-              if (e.originalEvent) {
-                e = e.originalEvent
+            function closeMirrorDisplay() {
+              canvasStyle.opacity = 0.5;
+              if (websockets.screen) {
+                let ws = websockets.screen;
+                websockets.screen = null;
+                ws.close()
               }
+            };
 
-              calculateBounds()
-              let x = e.pageX - screen.bounds.x
-              let y = e.pageY - screen.bounds.y
-              let pressure = 0.5
-
-              if (wheel.key === null) { // mouse down
-                wheel.mouseY = y;
-                touchDown(1, x, y, pressure)
-                touchCommit()
-              } else {
-                clearTimeout(wheel.key)
+            function closeSyncTouchpad() {
+              if (websockets.touchpad) {
+                websockets.touchpad.close()
               }
-
-              // 从 wheel.mouseY --> targetY 分10步移动完
-              wheel.count += 1
-              const stepCount = 10; // 10 steps
-              const direction = e.deltaY > 0 ? -1 : 1
-              const offsetY = wheel.count * direction * 0.2 * screen.bounds.h
-              const targetY = Math.max(0, Math.min(y + offsetY, screen.bounds.h))
-
-              let mouseY = wheel.mouseY;
-              const stepY = (targetY - mouseY) / stepCount;
-              for (let i = 0; i < stepCount; i += 1) {
-                mouseY += stepY;
-                touchWait(10); // 间隔10ms
-                touchMove(1, x, mouseY, pressure)
-                touchCommit()
+            };
+            function loadUserSettings() {
+              axios.get("/api/v1/user/settings")
+                 .then(ret => {
+                      userSettings.shortcuts = ret.data.shortcuts || [];
+                 })
+                 .catch(err => {
+                      console.log(err)
+                 })
+            };
+            function drawBlobImageToCanvas(blob, canvas) {
+              // Support jQuery Promise
+              var dtd = $.Deferred();
+              var ctx = canvas.getContext('2d'),
+                URL = window.URL || window.webkitURL,
+                BLANK_IMG =
+                  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
+                img = imagePool.next();
+
+              img.onload = () => {
+                canvas.width = img.width
+                canvas.height = img.height
+
+                ctx.drawImage(img, 0, 0, img.width, img.height);
+                fitCanvas(canvas)
+
+                // Try to forcefully clean everything to get rid of memory
+                // leaks. Note self despite this effort, Chrome will still
+                // leak huge amounts of memory when the developer tools are
+                // open, probably to save the resources for inspection. When
+                // the developer tools are closed no memory is leaked.
+                img.onload = img.onerror = null
+                img.src = BLANK_IMG
+                img = null
+                blob = null
+
+                URL.revokeObjectURL(url)
+                url = null
+                dtd.resolve();
               }
-              wheel.mouseY = targetY; // 记录当前点的位置
 
-              wheel.key = setTimeout(() => { // wheel stopped do mouse up
-                touchUp()
-                touchCommit()
-                wheel.key = null;
-                wheel.count = 0;
-              }, 100)
-            }
+              img.onerror = function () {
+                // Happily ignore. I suppose this shouldn't happen, but
+                // sometimes it does, presumably when we're loading images
+                // too quickly.
 
-            /* bind listeners */
-            element.addEventListener('mousedown', mouseDownListener);
-            element.addEventListener('mousewheel', mouseWheelListener);
-            // element.addEventListener('mousemove', mouseHoverListener);
-          },
-          closeSyncTouchpad() {
-            if (this.websockets.touchpad) {
-              this.websockets.touchpad.close()
-            }
-          },
-          fitCanvas(canvas) {
-            if (canvas.width > canvas.height) {
-              // 横屏显示，宽高相等
-              this.canvasStyle.maxHeight = canvas.parentElement.clientHeight + "px";
-              this.canvasStyle.height = "auto"
-              this.canvasStyle.width = canvas.parentElement.clientHeight + "px"
-            } else {
-              this.canvasStyle.maxHeight = "unset"
-              this.canvasStyle.height = canvas.parentElement.clientHeight + "px"
-              this.canvasStyle.width = "auto"
-            }
-          },
-          drawBlobImageToCanvas(blob, canvas) {
-            // Support jQuery Promise
-            var dtd = $.Deferred();
-            var ctx = canvas.getContext('2d'),
-              URL = window.URL || window.webkitURL,
-              BLANK_IMG =
-                'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
-              img = this.imagePool.next();
-
-            img.onload = () => {
-              canvas.width = img.width
-              canvas.height = img.height
-
-              ctx.drawImage(img, 0, 0, img.width, img.height);
-              this.fitCanvas(canvas)
-
-              // Try to forcefully clean everything to get rid of memory
-              // leaks. Note self despite this effort, Chrome will still
-              // leak huge amounts of memory when the developer tools are
-              // open, probably to save the resources for inspection. When
-              // the developer tools are closed no memory is leaked.
-              img.onload = img.onerror = null
-              img.src = BLANK_IMG
-              img = null
-              blob = null
-
-              URL.revokeObjectURL(url)
-              url = null
-              dtd.resolve();
-            }
+                // Do the same cleanup here as in onload.
+                img.onload = img.onerror = null
+                img.src = BLANK_IMG
+                img = null
+                blob = null
 
-            img.onerror = function () {
-              // Happily ignore. I suppose this shouldn't happen, but
-              // sometimes it does, presumably when we're loading images
-              // too quickly.
+                URL.revokeObjectURL(url)
+                url = null
+                dtd.reject();
+              }
 
-              // Do the same cleanup here as in onload.
-              img.onload = img.onerror = null
-              img.src = BLANK_IMG
-              img = null
-              blob = null
+              var url = URL.createObjectURL(blob)
+              img.src = url;
+              return dtd;
+            };
+            function initClipboardJS() {
+              var clipboard = new ClipboardJS(".clipboard-copy")
 
-              URL.revokeObjectURL(url)
-              url = null
-              dtd.reject();
-            }
+              clipboard.on('success', function (e) {
+                e.clearSelection()
+                showTooltip(e.trigger, "Copied!")
+              })
 
-            var url = URL.createObjectURL(blob)
-            img.src = url;
-            return dtd;
-          },
-          closeWindowWhenReleased(interval) {
-            setTimeout(() => {
-              if (document.hidden) {
-                $.getJSON("/api/v1/user/devices/" + udid)
-                  .done(ret => {
-                    this.closeWindowWhenReleased(5000)
-                  })
-                  .fail(ret => {
-                    let content = '设备' + this.idleTimeout + "秒内没有操作，设备自动释放，点击刷新重新占用该设备"
-                    this.$alert(content, '设备超时提示', {
-                      confirmButtonText: '刷新',
-                      type: 'warning'
-                    }).then(() => {
-                      location.reload()
-                    }).catch(() => {
-                      window.close()
-                    })
-                  })
-              } else {
-                $.getJSON("/api/v1/user/devices/" + udid + "/active")
-                  .done((ret) => {
-                    this.closeWindowWhenReleased(interval)
-                  })
-                  .fail(function (ret) {
-                    console.log(ret)
-                    alert("设备可能被释放了，Press F12 to debug")
-                  })
+              document.querySelectorAll(".clipboard-copy").forEach(e => {
+                e.addEventListener('mouseleave', clearTooltip);
+                e.addEventListener('blur', clearTooltip);
+              })
+
+              function clearTooltip(e) {
+                const target = e.currentTarget;
+                setTimeout(() => {
+                  target.innerHTML = ""
+                }, 200)
               }
-            }, interval)
-          },
-          initClipboardJS() {
-            var clipboard = new ClipboardJS(".clipboard-copy")
-
-            clipboard.on('success', function (e) {
-              e.clearSelection()
-              showTooltip(e.trigger, "Copied!")
-            })
-
-            document.querySelectorAll(".clipboard-copy").forEach(e => {
-              e.addEventListener('mouseleave', clearTooltip);
-              e.addEventListener('blur', clearTooltip);
-            })
-
-            function clearTooltip(e) {
-              const target = e.currentTarget;
-              setTimeout(() => {
-                target.innerHTML = ""
-              }, 200)
-            }
 
-            function showTooltip(elem, msg) {
-              elem.innerHTML = "&nbsp;<small>" + msg + "</small>"
-            }
-          },
-          refreshTopApp() {
-            this.runShell("dumpsys activity top").then(ret => {
-              const reActivity = String.raw`\s*ACTIVITY ([A-Za-z0-9_.]+)\/([A-Za-z0-9_.]+) \w+ pid=(\d+)`
-              let matches = ret.output.match(new RegExp(reActivity, "g"))
-              if (matches.length > 0) {
-                let m = matches.pop().match(new RegExp(reActivity))
-                this.topApp.packageName = m[1];
-                this.topApp.activity = m[2]
-                this.topApp.pid = m[3]
+              function showTooltip(elem, msg) {
+                elem.innerHTML = "&nbsp;<small>" + msg + "</small>"
               }
-            })
-          }
+            };
+            onBeforeMount(() => {
+                axios.get("/api/v1/user/devices/" + udid)
+                    .then(ret => {
+                        data.value = ret.data.device;
+                        source.value = ret.data.device.source;
+                        idleTimeout.value = ret.data.device.idleTimeout;
+                        usingBeganAt.value = ret.data.device.usingBeganAt;
+                        address.value = source.value.atxAgentAddress;
+                        deviceUrl.value = "http://" + address.value;
+                        remoteTerminal.value = "http://" + address.value + "/term";
+                        screenshotUrl.value = "http://" + address.value + "/screenshot/0";
+                        remoteConnectAddr.value = "adb connect " + source.value.remoteConnectAddress;
+                        whatsInputUrl.value = "ws://" + source.value.whatsInputAddress;
+                    })
+                    .catch(err => {
+                         console.log(err);
+                    });
+            });
+            onMounted(() => {
+                watch(hasData, (val) => {
+                    if (hasData.value) {
+                        canvas.bg = bgCanvas.value;
+                        canvas.fg = fgCanvas.value;
+
+                        let ctx = canvas.bg.getContext('2d');
+
+                        openDisplayTouchpad();
+                        new ResizeSensor(canvas.bg.parentElement, (e) => {
+                            fitCanvas(canvas.bg);
+                        })
+
+                        // 常用功能面板 自适应
+                        new ResizeSensor(commonContainer, (e) => {
+                            let el = commonContainer;
+                            if (e.width < 750) {
+                                el.style.columnCount = 1;
+                            } else {
+                                el.style.columnCount = 2;
+                            }
+                        })
+
+                        canvas.bg.addEventListener('contextmenu', event => event.preventDefault());
+
+                        // save the bandwidth
+                        document.addEventListener("visibilitychange", () => {
+                            let pageHidden = document.hidden;
+                            if (pageHidden) {
+                                closeDisplayTouchpad()
+                            } else {
+                                openDisplayTouchpad()
+                            }
+                        })
+
+                        // 更新使用时间
+                        setInterval(() => {
+                            let duration = moment.now() - moment(usingBeganAt.value)
+                            usingTime.value.innerHTML = moment.utc(duration).format("HH:mm:ss")
+                        }, 1000)
+
+                        // 唤醒屏幕
+                        runKeyevent("WAKEUP")
+
+                        // 加载用户配置
+                        loadUserSettings()
+
+                        // 加载whatsinput输入法
+                        loadWhatsinput()
+
+                        // 当设备不使用时自动退出
+                        console.log("Refresh:", idleTimeout.value / 2 * 1000)
+                        closeWindowWhenReleased(5000)
+
+                        initClipboardJS()
+
+                        // Disable WhatsInputMethod to prevent influence UIAutomation
+                        // this.fixInputMethod(true)
+                    }
+                });
+            });
+            return {
+                udid,
+                activeName,
+                canvas,
+                bgCanvas,
+                fgCanvas,
+                commonContainer,
+                usingTime,
+                usingBeganAt,
+                xterm,
+                canvasStyle,
+                rotation,
+                term,
+                termData,
+                whatsinputs,
+                websockets,
+                whatsinput,
+                topApp,
+                imagePool,
+                browserUrl,
+                app,
+                packages,
+                userSettings,
+                phoneDir,
+                phoneFiles,
+                source,
+                websocket,
+                address,
+                deviceUrl,
+                remoteTerminal,
+                screenshotUrl,
+                remoteConnectAddr,
+                whatsInputUrl,
+                idleTimeout,
+                displayLinked,
+                openDisplayTouchpad,
+                syncTouchpad,
+                fitCanvas,
+                closeDisplayTouchpad,
+                closeMirrorDisplay,
+                closeSyncTouchpad,
+                runShell,
+                runKeyevent,
+                loadUserSettings,
+                loadWhatsinput,
+                closeWindowWhenReleased,
+                initClipboardJS,
+            };
         },
-        mounted: function () {
-          this.canvas.bg = this.$refs.bgCanvas
-          this.canvas.fg = this.$refs.fgCanvas
-          let ctx = this.canvas.bg.getContext('2d');
-
-          this.openDisplayTouchpad()
-
-          new ResizeSensor(this.canvas.bg.parentElement, (e) => {
-            this.fitCanvas(this.canvas.bg)
-          })
-
-          // 常用功能面板 自适应
-          new ResizeSensor(this.$refs.commonContainer, (e) => {
-            let el = this.$refs.commonContainer
-            if (e.width < 750) {
-              el.style.columnCount = 1
-            } else {
-              el.style.columnCount = 2
-            }
-          })
-
-          this.canvas.bg.addEventListener('contextmenu', event => event.preventDefault());
-
-          // save the bandwidth
-          document.addEventListener("visibilitychange", () => {
-            let pageHidden = document.hidden;
-            if (pageHidden) {
-              this.closeDisplayTouchpad()
-            } else {
-              this.openDisplayTouchpad()
-            }
-          })
-
-          // 更新使用时间
-          setInterval(() => {
-            let duration = moment.now() - moment(this.usingBeganAt)
-            this.$refs.usingTime.innerHTML = moment.utc(duration).format("HH:mm:ss")
-          }, 1000)
-
-          // 唤醒屏幕
-          this.runKeyevent("WAKEUP")
+        methods: {
+            debug() {
+                console.log(...arguments);
+            },
+            onUpload(resp, file, files) {
+              if (!resp.success) {
+                ElMessage.error(resp.description);
+                return
+              }
+              this.app.installUrl = resp.data.url;
+              this.appInstall()
+            },
+            appInstall() {
+              this.app.packageName = ""
+              this.app.finished = false
+              this.app.message = "安裝中 ..."
+
+              axios({
+                url: this.source.url + "/app/install?udid=" + this.udid,
+                method: "post",
+                data: JSON.stringify({
+                  url: this.app.installUrl,
+                  launch: this.app.launch,
+                  secret: this.source.secret,
+                })
+              }).then(ret => {
+                this.app.message = ret.data.output;
+                this.app.packageName = ret.data.packageName;
+                this.app.finished = true;
+              }).catch(err => {
+                if (err.response.status == 400) {
+                  this.app.message = err.response.data.description;
+                } else {
+                  this.app.message = err.message;
+                }
+                this.app.finished = true;
+              })
+            },
+            appLaunch(packageName) {
+              axios({
+                url: `${this.deviceUrl}/session/${packageName}`,
+                method: "post"
+              }).then(ret => {
+                console.log(ret.data)
+              })
+            },
+            addTopAppToShortcut() {
+              this.$prompt('给 <code>' + this.topApp.packageName + '</code> 起个名字', '快捷方式添加', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                dangerouslyUseHTMLString: true,
+              }).then(({ value }) => {
+                let command = ["monkey", "-p", this.topApp.packageName, "-c", "android.intent.category.LAUNCHER", "1"].join(" ")
+                this.addShortcut(value, command)
+              }).catch(() => {
+              })
+            },
+            fixInputMethod(quite) {
+              if (!quite) {
+                this.$notify.info({
+                  title: "输入法",
+                  message: "修复中",
+                })
+              }
+              const inputMethod = "com.buscode.whatsinput/.WifiInputMethod"
+              return this.runShell("ime enable " + inputMethod)
+                .then(() => {
+                  return this.runShell("ime set " + inputMethod)
+                })
+                //.then($.delay(1000))
+                .then(() => {
+                  this.whatsinputs.focus()
+                  return this.loadWhatsinput()
+                })
+                .then(() => {
+                  if (!quite) {
+                    this.$notify.success({ message: "输入法修复完成" })
+                  }
+                }, () => {
+                  if (!quite) {
+                    this.$notify.success({ message: "输入法修复失败，F12查看详情" })
+                  }
+                })
+            },
+            sendInputText() {
+              console.log("sync", this.whatsinput.text)
+              let ws = this.websockets.winput;
+              ws.send(JSON.stringify({
+                type: "InputEdit",
+                text: this.whatsinput.text,
+              }))
+            },
+            sendInputKey(key) {
+              console.log("Sync key", key)
+              let code = { "enter": 66, "tab": 61 }[key] || key;
+              let ws = this.websockets.winput;
+              ws.send(JSON.stringify({
+                type: "InputKey",
+                code: "" + code,
+              }))
+            },
+            updateUserSettings() {
+              return axios({
+                url: "/api/v1/user/settings",
+                method: "put",
+                headers: {
+                   "contentType": "application/json",
+                },
+                data: JSON.stringify({
+                  "shortcuts": this.userSettings.shortcuts,
+                })
+              }).then(ret => {
+                console.log("设置已更新")
+              })
+            },
+            triggerShortcut(v) {
+              return this.runShell(v.command).then(ret => {
+                this.$notify({
+                  dangerouslyUseHTMLString: true,
+                  message: "CMD: <code>" + v.command + "</code><br>Output: <code>" + ret.data.output + "</code>",
+                })
+                console.log("Shell", v.command, "output", ret.data)
+              })
+            },
+            addShortcut(name, command) {
+              if (!name || !command) {
+                return
+              }
+              let s = this.userSettings;
+              s.shortcuts.push({ name, command })
+              s.inputName = ""
+              s.inputCommand = ""
+              s.visible = false;
+              return this.updateUserSettings()
+            },
+            removeShortcut(c) {
+              this.userSettings.shortcuts = this.userSettings.shortcuts.filter(v => {
+                return v.name != c.name
+              })
+              return this.updateUserSettings()
+            },
+            hotfix() {
+              // 修复屏幕旋转问题
+              // this.$notify({
+              //   message: "Hotfixing",
+              //   position: 'top-left',
+              //   duration: 1000,
+              // })
+              axios({
+                method: "get",
+                url: this.deviceUrl + "/info/rotation"
+              }).then(ret => {
+                this.$notify({
+                  message: "Rotation updated",
+                  position: 'bottom-left',
+                  duration: 1000,
+                })
+              })
+            },
+            stopUsing() {
+              axios({
+                url: "/api/v1/user/devices/" + udid,
+                method: "delete",
+                headers: {
+                    "contentType": "application/json"
+                }
+              }).then(res => {
+                window.close();
+              }).catch(err => {
+                window.close();
+              })
+            },
+            openBrowser(url) {
+              if (!/^https?:\/\//.test(url)) {
+                url = "http://" + url;
+              }
+              this.browserUrl = ""
+              return this.runShell("am start -a android.intent.action.VIEW -d " + url);
+            },
+            handleTabClick(tab, event) {
+              console.log(tab,event,tab.paneName)
+              if (tab.paneName == "terminal") {
+                if (!this.term) {
+                  this.loadTerminal()
+                }
+              }
+              if (tab.paneName == "filemanager") {
+                this.getPhoneFile();
+              }
+              if (tab.paneName == "packagemanager") {
+                if (!this.packages.length) {
+                  this.loadPackages()
+                }
+              }
+            },
+            loadTerminal() {
+              let term;
+              //console.log("Loading terminal","ws://" + this.address + "/term");
+              let ws = new WebSocket("ws://" + this.address + "/term");
+              ws.binaryType = "arraybuffer"
+
+              function ab2str(buf) {
+                return String.fromCharCode.apply(null, new Uint8Array(buf));
+              }
+              ws.onopen = (evt) => {
+                term = new Terminal({
+                  screenKeys: true,
+                  useStyle: true,
+                  fontSize: 14,
+                  wraparoundMode: true,
+                  fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
+                  theme: {
+                    background: "#000000",
+                  },
+                  cursorBlink: true,
+                  cursorStyle: "underline"
+                });
+                console.log("term opened", term)
+                term.onData((data) => {
+                  ws.send(new TextEncoder().encode("\x00" + data))
+                });
+                term.onResize( evt => {
+                  ws.send(new TextEncoder().encode("\x01" + JSON.stringify({
+                    cols: evt.cols,
+                    rows: evt.rows,
+                  })))
+                });
 
-          // 加载用户配置
-          this.loadUserSettings()
+                term.onTitleChange(title => {
+                  console.log("title", title)
+                });
 
-          // 加载whatsinput输入法
-          this.loadWhatsinput()
+                term.open(this.xterm, { focus: true });
+                let fitAddon = new FitAddon.FitAddon();
+                term.loadAddon(fitAddon);
+                setTimeout(() => {
+                  fitAddon.fit()
+                }, 5);
+                this.term = term;
+
+                new ResizeSensor(this.xterm, function (e) {
+                  console.log("Resize", e);
+                  term.onResize();
+                  term.loadAddon(fitAddon);
+                  setTimeout(() => {
+                    fitAddon.fit()
+                  }, 5);
+                })
+              }
 
-          // 当设备不使用时自动退出
-          console.log("Refresh:", this.idleTimeout / 2 * 1000)
-          this.closeWindowWhenReleased(5000)
+              ws.onmessage = (evt) => {
+                if (evt.data instanceof ArrayBuffer) {
+                  term.write(ab2str(evt.data))
+                } else {
+                  alert(evt.data)
+                }
+              }
 
-          this.initClipboardJS()
+              ws.onclose = (evt) => {
+                term.write("Session terminated");
+                term.dispose();
+              }
 
-          // Disable WhatsInputMethod to prevent influence UIAutomation
-          // this.fixInputMethod(true)
-        },
-        computed: {
-          address() {
-            return this.source.atxAgentAddress
-          },
-          deviceUrl() {
-            return "http://" + this.address
-          },
-          remoteTerminal() {
-            return "http://" + this.address + "/term"
-          },
-          screenshotUrl() {
-            return "http://" + this.address + "/screenshot/0"
-          },
-          remoteConnectAddr() {
-            return "adb connect " + this.source.remoteConnectAddress
-          },
-          whatsInputUrl() {
-            return "ws://" + this.source.whatsInputAddress
-          },
-          displayLinked() {
-            return this.websockets.screen !== null;
-          }
+              ws.onerror = (evt) => {
+                console.log(evt)
+              }
+            },
+            getPhoneFile(dir) {
+              if (!dir || dir == "/sdcard") {
+                this.phoneDir = "/sdcard";
+              } else if (dir == "..") {
+                if (this.phoneDir.indexOf("/") == this.phoneDir.lastIndexOf("/")){
+                  this.phoneDir = "/sdcard";
+                } else {
+                  this.phoneDir = this.phoneDir.substr(0, this.phoneDir.lastIndexOf("/"));
+                }
+              } else if (dir == this.phoneDir) {
+                this.phoneDir = dir;
+              } else {
+                this.phoneDir = this.phoneDir + "/" + dir;
+              }
+              this.runShell('ls \"' + this.phoneDir + '/\"')
+              .then(ret => {
+                this.phoneFiles = ret.data.output.split("\n");
+                this.phoneFiles.pop();
+                if (this.phoneFiles[0].search("^ls.*Not a directory$") == 0) {
+                  ELMessage({
+                    showClose: true,
+                    message: "不是文件夹",
+                    type: "error"
+                  });
+                  this.getPhoneFile('..');
+                }
+              });
+            },
+            loadPackages() {
+              return this.runShell("pm list packages -3").then(ret => {
+                let packages = []
+                ret.data.output.split(/\r?\n/).forEach(v => {
+                  if (v.startsWith("package:")) {
+                    const packageName = v.substr("package:".length)
+                    let item = {
+                      key: packageName,
+                      name: packageName,
+                      label: "",
+                      versionName: "",
+                      versionCode: "",
+                    };
+                    axios.get(`${this.deviceUrl}/packages/${packageName}/info`)
+                      .then(ret => {
+                        if (ret.data.success && ret.data) {
+                          item.label = ret.data.data.label;
+                          item.versionName = ret.data.data.versionName;
+                          item.versionCode = ret.data.data.versionCode;
+                          //console.log(packageName, ret.data.data);
+                        }
+                      })
+                    packages.push(item);
+                  }
+                })
+                this.packages = packages;
+              })
+            },
+            removePackage(packageName) {
+              return this.runShell(`pm uninstall ${packageName}`).then(() => {
+                const index = this.packages.findIndex((v) => {
+                  return v.name == packageName
+                })
+                this.packages.splice(index, 1)
+              })
+            },
+            refreshTopApp() {
+              this.runShell("dumpsys activity top").then(ret => {
+                const reActivity = String.raw`\s*ACTIVITY ([A-Za-z0-9_.]+)\/([A-Za-z0-9_.]+) \w+ pid=(\d+)`;
+                console.log(ret.data.output)
+                let matches = ret.data.output.match(new RegExp(reActivity, "g"))
+                if (matches.length > 0) {
+                  let m = matches.pop().match(new RegExp(reActivity))
+                  this.topApp.packageName = m[1];
+                  this.topApp.activity = m[2]
+                  this.topApp.pid = m[3]
+                }
+              })
+            }
         },
         components: {
           "term-snippet": {
             props: {
-              command: String,
               term: Object,
+              command: String,
             },
             methods: {
               run() {
-                this.term.emit("data", this.command + "\n");
-                this.term.focus()
+                this.term.paste(this.command+"\n");
+                this.term.focus();
               }
             },
             template: '<code style="cursor: pointer" @click="run" v-text="command"></code>'
           }
-        }
-      })
-    })
+        },
+    };
+    createApp(remoteControl_android).use(ElementPlus, {
+        locale: ElementPlusLocaleZhCn,
+    }).mount("#content-wrapper");
+
 </script>
-{% end %}
\ No newline at end of file
+{% end %}
diff --git a/templates/remotecontrol_apple.html b/templates/remotecontrol_apple.html
index 8370450..752585f 100644
--- a/templates/remotecontrol_apple.html
+++ b/templates/remotecontrol_apple.html
@@ -159,10 +159,10 @@
   <div class="row grow-1 flex-reset">
     <div class="col-sm debugarea d-flex flex-column justify-content-center nopadding grow-0 height-auto-fill">
       <section class="debugarea" style="height: 2rem; line-height: 2rem; padding: 0 10px; justify-self: start">
-        <span>
+        <span style="margin-left: 5px;">
           <i class="fas fa-mobile-alt cursor-pointer" :class='{"fa-rotate-90": landscape}'></i>
         </span>
-        <span>
+        <span style="margin-left: 5px;">
           <i v-if="displayLinked" class="fas fa-link" style="color: green"></i>
           <i v-else @click="mirrorDisplay" class="fas fa-unlink" style="color: red"></i>
         </span>
@@ -171,7 +171,7 @@
       <section class="screen debugarea d-flex grow-1 align-items-center justify-content-center flex-reset"
         style="flex-basis: 0%; line-height: 0px">
         <!-- <canvas ref="fgCanvas" class="canvas-fg" v-bind:style="canvasStyle"></canvas> -->
-        <canvas ref="bgCanvas" class="canvas-bg" v-bind:style="canvasStyle"></canvas>
+        <canvas ref="bgCanvas" class="canvas-bg" :style="canvasStyle"></canvas>
         <span class="finger finger-0" style="transform: translate3d(200px, 100px, 0px)"></span>
         <span class="finger finger-1" style="transform: translate3d(200px, 100px, 0px)"></span>
         <!-- <img style="z-index: 10" v-if="loading" src="/assets/loading.svg"> -->
@@ -240,8 +240,8 @@
                   </dd>
                   <dt>WDA URL</dt>
                   <dd>
-                    <code v-text="source.wdaUrl"></code>
-                    <i :data-clipboard-text="source.wdaUrl" class="far fa-copy clipboard-copy cursor-pointer"></i>
+                    <code v-text="WdaUrl"></code>
+                    <i :data-clipboard-text="WdaUrl" class="far fa-copy clipboard-copy cursor-pointer"></i>
                   </dd>
                 </dl>
               </div>
@@ -271,7 +271,6 @@
                 </div>
               </div>
             </div>
-
           </div>
         </el-tab-pane>
       </el-tabs>
@@ -282,624 +281,721 @@
 {% end %}
 
 {% block script %}
-<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/css-element-queries@1.1.1/src/ResizeSensor.min.js"></script>
-<script src="{{static_url('javascripts/imagepool.js')}}"></script>
+<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/css-element-queries@1.2.3/src/ResizeSensor.min.js"></script>
+<script src="/static/javascripts/imagepool.js"></script>
 <script>
-  const udid = "{{udid}}"
-  const userEmail = "{{current_user.email}}"
-
-
-  $.getJSON("/api/v1/user/devices/" + udid)
-    .then(ret => {
-      vm = new Vue({
-        el: "#content-wrapper",
-        data: Object.assign({
-          activeName: 'common',
-          canvas: {
-            bg: null,
-            fg: null,
-          },
-          canvasStyle: {
-            opacity: 1,
-            width: '400px',
-            height: 'unset',
-            maxHeight: "unset",
-          },
-          rotation: 0,
-          session: {
-            id: '',
-            frameCount: 0,
-          },
-          display: {
-            width: 0,
-            height: 0,
-            fps: 0,
-            ws: null,
-          },
-          alert: {
-            buttons: [],
-            loading: false,
-            visible: false,
-          },
-          app: {
-            message: "",
-            finished: true,
-          },
-          pageHidden: false,
-          imagePool: new ImagePool(100),
-        }, ret.device),
-        computed: {
-          landscape() {
-            return this.display.width > this.display.height;
-          },
-          displayLinked() {
-            return this.display.ws !== null
-          },
-          displayWSUrl() {
-            let url = this.source.wdaUrl.replace(/^https?:\/\//, "ws://") + "/screen"
-            return url
-          }
-        },
-        methods: {
-          screenshot() {
-            $.ajax({
-              url: this.path2url("/screenshot"),
-              dataType: "json",
-            }).then(ret => {
-              if (window.navigator.msSaveOrOpenBlob) {
-                alert("IE is not supported !!!")
-                return
-              }
-              var a = document.createElement("a");
-              a.href = "data:image/jpeg;base64," + ret.value;
-              a.download = "screen-" + new Date().getTime() + ".jpg";
-              a.click();
-              setTimeout(function () {
-                document.body.removeChild(a);
-              }, 0);
-            })
-          },
-          appOpen(bundleId) {
-            return $.ajax({
-              method: "post",
-              url: this.path2url("/session"),
-              data: JSON.stringify({
-                capabilities: {
-                  alwaysMatch: {
-                    bundleId: bundleId,
-                    shouldWaitForQuiescence: true,
-                  }
+    const { createApp, toRaw, ref, reactive, watch, computed, created, onBeforeMount, onMounted, onUnmounted, defineEmits } = Vue;
+    const {ElMessage, ElMessageBox, ElNotification} = ElementPlus;
+
+    const udid = "{{udid}}"
+    const userEmail = "{{current_user.email}}"
+
+    const remoteControl_apple = {
+        setup(){
+            const activeName = ref("common");
+            const bgCanvas = ref(null);
+            const fgCanvas = ref(null);
+            const upload = ref(null);
+            const usingTime = ref(null);
+            const usingBeganAt = ref(null);
+            const displayWSUrl = ref("");
+            const WdaUrl = ref("");
+
+            const canvas = reactive({
+              bg: null,
+              fg: null,
+            });
+            const canvasStyle = reactive({
+              opacity: 1,
+              width: '400px',
+              height: 'unset',
+              maxHeight: "unset",
+            });
+            const rotation = ref(0);
+            const session = reactive({
+              id: '',
+              frameCount: 0,
+            });
+            const display = reactive({
+              width: 0,
+              height: 0,
+              fps: 0,
+              ws: null,
+            });
+            const alert = reactive({
+              buttons: [],
+              loading: false,
+              visible: false,
+            });
+            const app = reactive({
+              message: "",
+              finished: true,
+            });
+            const pageHidden = ref(false);
+            const imagePool = new ImagePool(100);
+            const source = reactive({
+                type:Object,
+                required:true
+            });
+            const data = ref(null);
+            const hasData = computed(() => {
+                if (data.value) {
+                    return true;
                 }
-              })
-            }).then(ret => {
-              this.session.id = ret.sessionId
-            })
-          },
-          chooseAlertButtons() {
-            this.alert.buttons = []
-            this.alert.loading = true
-            return $.ajax({
-              method: "get",
-              url: this.path2url("/session/" + this.session.id + "/wda/alert/buttons")
-            }).then(ret => {
-              this.alert.buttons = ret.value
-              this.$nextTick(() => {
-                this.alert.visible = true
-              })
-              // this.$alert("未检测到系统弹窗")
-              // this.$alert("未知异常，打开开发者选项查看问题
-            }).always(() => {
-              this.alert.loading = false
-            })
-          },
-          alertAccept(name) {
-            let data = null;
-            if (typeof name === 'string' || name instanceof String) {
-              data = JSON.stringify({ name: name })
-            }
-            return $.ajax({
-              method: "post",
-              url: this.path2url("/session/" + this.session.id + "/alert/accept"),
-              data: data,
-            })
-          },
-          initClipboardJS() {
-            var clipboard = new ClipboardJS(".clipboard-copy")
-
-            clipboard.on('success', function (e) {
-              e.clearSelection()
-              showTooltip(e.trigger, "Copied!")
-            })
-
-            document.querySelectorAll(".clipboard-copy").forEach(e => {
-              e.addEventListener('mouseleave', clearTooltip);
-              e.addEventListener('blur', clearTooltip);
-            })
-
-            function clearTooltip(e) {
-              const target = e.currentTarget;
-              setTimeout(() => {
-                target.innerHTML = ""
-              }, 200)
-            }
-
-            function showTooltip(elem, msg) {
-              elem.innerHTML = "&nbsp;<small>" + msg + "</small>"
-            }
-          },
-          onUploadSelect(file) {
-            this.app.url = file.response.data.url;
-          },
-          onUpload(resp, file, files) {
-            if (!resp.success) {
-              this.$message({
-                message: resp.description,
-                type: "error",
-              })
-              return
-            }
-            this.app.url = resp.data.url;
-            return this.appInstall()
-          },
-          appInstall() {
-            const url = this.app.url
-
-            this.app.finished = false
-            this.app.message = "安装中 ..."
-            $.ajax({
-              method: "post",
-              url: this.source.url + "/app/install?udid=" + this.udid,
-              data: {
-                url: url,
-              }
-            }).done(ret => {
-              this.app.message = "安装成功"
-            }).fail(err => {
-              this.app.message = "安装失败 " + err.responseJSON.description;
-            }).always(() => {
-              this.app.finished = true
-            })
-          },
-          showFPS() {
-            let frame = this.session.frameCount;
-            setInterval(() => {
-              this.display.fps = this.session.frameCount - frame
-              frame = this.session.frameCount;
-            }, 1000);
-          },
-          closeWindowWhenReleased(interval) {
-            setTimeout(() => {
-              if (document.hidden) {
-                $.getJSON("/api/v1/user/devices/" + udid)
-                  .done(ret => {
-                    this.closeWindowWhenReleased(5000)
-                  })
-                  .fail(ret => {
-                    console.log(ret)
-                    if (ret.status === 403) { // forbidden
-                      window.close()
-                      return
-                    }
-                  })
-              } else {
-                $.getJSON("/api/v1/user/devices/" + udid + "/active")
-                  .done((ret) => {
-                    this.closeWindowWhenReleased(interval)
-                  })
-                  .fail(function (ret) {
-                    console.log(ret)
-                    alert("设备可能被释放了，Press F12 to debug")
-                    // let content = '设备' + this.idleTimeout + "秒内没有操作，设备自动释放，点击刷新重新占用该设备"
-                    // this.$alert(content, '设备超时提示', {
-                    //   confirmButtonText: '刷新',
-                    //   type: 'warning'
-                    // }).then(() => {
-                    //   location.reload()
-                    // }).catch(() => {
-                    //   window.close()
-                    // })
-                  })
-              }
-            }, interval)
-          },
-          pressHome() {
-            return $.ajax({
-              url: this.path2url("/wda/homescreen"),
-              method: "POST",
-            }).then(() => {
-              setTimeout(() => {
-                this.hotfix()
-              }, 500)
-            })
-          },
-          getSessionId() {
-            return $.ajax({
-              method: "post",
-              url: this.path2url("/session"),
-              data: '{"capabilities": {}}',
-            }).then(ret => {
-              return ret.sessionId;
-            })
-          },
-          hotfix() {
-            return $.ajax({
-              url: this.path2url("/status")
-            }).then(ret => {
-              if (ret.sessionId) {
-                return ret.sessionId
-              }
-              return this.getSessionId()
-            }).then((sessionId) => {
-              this.session.id = sessionId;
-              return $.ajax({
-                url: this.path2url("/session/" + this.session.id + "/window/size")
-              })
-            }).then(ret => {
-              if (ret.value.width && ret.value.height) { // width and height might be 0
-                this.display.width = ret.value.width;
-                this.display.height = ret.value.height;
-              }
-
-              // 设定帧率为30
-              $.ajax({
-                method: "post",
-                url: this.path2url("/session/" + this.session.id + "/appium/settings"),
-                data: '{"settings": {"mjpegServerFramerate": 30}}',
-              })
-            })
-          },
-          stopUsing() {
-            $.ajax({
-              method: "delete",
-              url: "/api/v1/user/devices/" + this.udid,
-              dataType: "json"
-            }).always(() => {
-              window.close()
-            })
-          },
-          handleTabClick(tab, event) {
-            console.log(tab.name)
-          },
-          path2url(pathname) {
-            return this.source.wdaUrl + pathname
-          },
-          disableTouch() {
-            let element = this.canvas.bg;
-            element.style.cursor = 'not-allowed' // set el.style is not working
-            element.style.pointerEvents = "none"
-          },
-          enableTouch() {
-            let element = this.canvas.bg;
-            element.style.cursor = ''
-            element.style.pointerEvents = ""
-          },
-          mirrorDisplay() {
-            let ws = new WebSocket(this.displayWSUrl)
-            this.display.ws = ws;
-
-            ws.onopen = () => {
-              console.log("screen connected")
-              this.canvasStyle.opacity = 1
-              this.enableTouch()
-            }
-            ws.onmessage = (message) => {
-              if (message.data instanceof Blob) {
-                this.session.frameCount += 1
-                this.drawBlobImageToCanvas(message.data, this.canvas.bg, this.landscape)
-              }
-            }
-            ws.onclose = () => {
-              if (this.display.ws === ws) {
-                this.display.ws = null;
-                this.$message({
-                  showClose: true,
-                  message: "设备屏幕同步中断",
-                  type: "error",
-                })
-                this.canvasStyle.opacity = 0.5
-                this.disableTouch()
-              }
-            }
-          },
-          closeMirrorDisplay() {
-            this.canvasStyle.opacity = 0.5
-            if (this.display.ws) {
-              let ws = this.display.ws;
-              this.display.ws = null;
-              ws.close()
-            }
-          },
-          syncTouchpad() {
-            let bounds = {}
-            let element = this.canvas.bg;
-
-            function calculateBounds() {
-              var el = element;
-              bounds.w = el.offsetWidth
-              bounds.h = el.offsetHeight
-              bounds.x = 0
-              bounds.y = 0
-
-              while (el.offsetParent) {
-                bounds.x += el.offsetLeft
-                bounds.y += el.offsetTop
-                el = el.offsetParent
-              }
-            }
-
-            let coords = (e) => {
-              let x = e.pageX - bounds.x
-              let y = e.pageY - bounds.y
-              x = Math.max(0, Math.min(bounds.w, x))
-              y = Math.max(0, Math.min(bounds.h, y))
-
-              return {
-                fingerX: x + element.offsetLeft,
-                fingerY: y + element.offsetTop,
-                x: Math.floor(x / bounds.w * this.display.width),
-                y: Math.floor(y / bounds.h * this.display.height)
-              }
-            }
-
-
-            let mousePos = {
-              beganAt: null,
-              down: null,
-              up: null,
-            }
-
-            let wdaTouch = (x, y) => {
-              return $.ajax({
-                method: "POST",
-                url: this.path2url("/session/" + this.session.id + "/wda/tap/0"),
-                data: JSON.stringify({ x, y })
-              })
-            }
-
-            let wdaSwipe = (fromX, fromY, toX, toY, duration) => {
-              return $.ajax({ // 经过测试，相同移动轨迹，wda/touch/perform 比 wda/dragfromtoforduration 响应速度快不少，整体操作iPhoneX上从1.3s+缩短到0.5s内
-                url: this.path2url("/session/" + this.session.id + "/wda/touch/perform"),
-                method: "POST",
-                data: JSON.stringify({
-                  actions: [
-                    {action: "press", options: {x: fromX, y: fromY}},
-                    {action: "wait", options: {ms: duration > 17 ? duration : 100 }},// 必须大于17ms，否则 wda 会没反应。日常使用一般100毫秒比较正常
-                    {action: "moveTo", options: {x: toX, y: toY}},
-                    {action:"release", options: {}}
-                  ]
-                })
-              })
-            }
-
-            let mouseUpOperate = (x, y) => {
-              let duration = new Date() - mousePos.beganAt; // milliseconds
-              console.log("hold duration", duration);
-
-              const
-                startX = mousePos.down.x,
-                startY = mousePos.down.y,
-                moveX = Math.abs(startX - x),
-                moveY = Math.abs(startY - y);
-
-              if (moveX == 0 && moveY == 0) {
-                if (duration < 200) { // click
-                  // click
-                  console.log("touch", x, y)
-                  return wdaTouch(x, y)
+                return false;
+            });
+            const landscape = computed(() => {
+                return display.width > display.height;
+            });
+            const displayLinked = computed(() => {
+                return display.ws !== null
+            });
+
+            function enableTouch() {
+                let element = canvas.bg;
+                element.style.cursor = '';
+                element.style.pointerEvents = "";
+            };
+            function disableTouch() {
+              let element = canvas.bg;
+              element.style.cursor = 'not-allowed'; // set el.style is not working
+              element.style.pointerEvents = "none";
+            };
+            function fitCanvas(canvas) {
+                if (canvas.width > canvas.height) {
+                    // 横屏显示，宽高相等
+                    canvasStyle.maxHeight = canvas.parentElement.clientHeight + "px";
+                    canvasStyle.height = "auto"
+                    canvasStyle.width = canvas.parentElement.clientHeight + "px"
                 } else {
-                  // long click
-                  console.log("touchHold", x, y)
-                  return wdaSwipe(startX, startY, x, y, duration)
+                    canvasStyle.maxHeight = "unset"
+                    canvasStyle.height = canvas.parentElement.clientHeight + "px"
+                    canvasStyle.width = "auto"
                 }
-              } else {
-                console.log("swipe:", mousePos.down, "to", { x, y }, duration)
-                return wdaSwipe(startX, startY, x, y, 100)
-              }
-            }
-
-            const mouseDownListener = (event) => {
-              let e = event;
-              if (e.originalEvent) {
-                e = e.originalEvent
-              }
-              e.preventDefault()
+            };
+            function drawBlobImageToCanvas(blob, canvas, landscape) {
+                // Support jQuery Promise
+                var dtd = $.Deferred();
+                var ctx = canvas.getContext('2d');
+                URL = window.URL || window.webkitURL;
+                BLANK_IMG =
+                  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+                img = imagePool.next();
+
+                img.onload = () => {
+                    //console.log(img);
+                    canvas.width = img.width;
+                    canvas.height = img.height;
+
+                    ctx.drawImage(img, 0, 0, img.width, img.height);
+
+                    if (landscape.value) {
+                        // 顺时针旋转 270°
+                        canvas.width = img.height;
+                        canvas.height = img.width;
+
+                        ctx.save();
+                        ctx.translate(canvas.width / 2, canvas.height / 2);
+                        ctx.rotate(1.5 * Math.PI);
+                        ctx.drawImage(img,
+                          -img.width / 2,
+                          -img.height / 2);
+                        ctx.restore();
+                    };
+                    fitCanvas(canvas);
+
+                    // Try to forcefully clean everything to get rid of memory
+                    // leaks. Note self despite this effort, Chrome will still
+                    // leak huge amounts of memory when the developer tools are
+                    // open, probably to save the resources for inspection. When
+                    // the developer tools are closed no memory is leaked.
+                    img.onload = img.onerror = null;
+                    img.src = BLANK_IMG;
+                    img = null;
+                    blob = null;
+
+                    URL.revokeObjectURL(url);
+                    url = null;
+                    dtd.resolve();
+                };
+
+                img.onerror = function () {
+                    // Happily ignore. I suppose this shouldn't happen, but
+                    // sometimes it does, presumably when we're loading images
+                    // too quickly.
+
+                    // Do the same cleanup here as in onload.
+                    img.onload = img.onerror = null;
+                    img.src = BLANK_IMG;
+                    img = null;
+                    blob = null;
+
+                    URL.revokeObjectURL(url);
+                    url = null;
+                    dtd.reject();
+                };
+
+                var url = URL.createObjectURL(blob);
+                img.src = url;
+                return dtd;
+            };
+
+            function closeMirrorDisplay() {
+                canvasStyle.opacity = 0.5;
+                if (display.ws) {
+                    let ws = display.ws;
+                    display.ws = null;
+                    ws.close();
+                };
+            };
+            function mirrorDisplay() {
+
+                let ws = new WebSocket(displayWSUrl.value);
+                display.ws = ws;
+
+                ws.onopen = () => {
+                    console.log("screen connected");
+                    canvasStyle.opacity = 1;
+                    enableTouch();
+                };
+                ws.onmessage = (message) => {
+                    if (message.data instanceof Blob) {
+                        session.frameCount += 1;
+                        drawBlobImageToCanvas(message.data, canvas.bg, landscape.value);
+                    };
+                };
+                ws.onclose = () => {
+                    if (display.ws === ws) {
+                        display.ws = null;
+                        ELMessage({
+                            showClose: true,
+                            message: "设备屏幕同步中断",
+                            type: "error",
+                        });
+                        canvasStyle.opacity = 0.5;
+                        disableTouch();
+                    };
+                };
+            };
+            function path2url(pathname) {
+                return source.value.wdaUrl + pathname
+            };
+            async function getSessionId() {
+                return await axios({
+                    method: "post",
+                    url: path2url("/session"),
+                    data: JSON.stringify({"capabilities": {}}),
+                }).then(ret => {
+                    return ret.data.sessionId;
+                })
+            };
+            async function hotfix() {
+                return await axios.get(path2url("/status"))
+                    .then(ret => {
+                        if (ret.data.sessionId) {
+                            return ret.data.sessionId
+                        }
+                        return getSessionId()
+                    })
+                    .then(sessionId => {
+                        session.id = sessionId;
+                        return axios.get(path2url("/session/" + session.id + "/window/size"))
+                            .then(ret => {
+                                if (ret.data.value.width && ret.data.value.height) { // width and height might be 0
+                                    display.width = ret.data.value.width;
+                                    display.height = ret.data.value.height;
+                                }
+
+                                // 设定帧率为30
+                                axios({
+                                    url: path2url("/session/" + session.id + "/appium/settings"),
+                                    method: "post",
+                                    data: JSON.stringify({"settings": {"mjpegServerFramerate": 30}}),
+                                })
+                                    .then(() => {
+                                        console.log("hotfix done");
+                                    })
+                                    .catch(err => {
+                                        console.log(err);
+                                    });
+                            })
+                            .catch(err => {
+                                console.log(err);
+                            });
+                    })
+                    .catch(err => {
+                        console.log(err);
+                    });
+            };
+            async function pressHome() {
+                return await axios({
+                    url: path2url("/wda/homescreen"),
+                    method: "POST",
+                }).then(() => {
+                    setTimeout(() => {
+                      hotfix()
+                    }, 200)
+                })
+            };
+            function syncTouchpad() {
+                let bounds = {};
+                let element = canvas.bg;
+
+                function calculateBounds() {
+                    var el = element;
+                    bounds.w = el.offsetWidth;
+                    bounds.h = el.offsetHeight;
+                    bounds.x = 0;
+                    bounds.y = 0;
+
+                    while (el.offsetParent) {
+                        bounds.x += el.offsetLeft;
+                        bounds.y += el.offsetTop;
+                        el = el.offsetParent;
+                    }
+                };
+
+                let coords = (e) => {
+                    let x = e.pageX - bounds.x;
+                    let y = e.pageY - bounds.y;
+                    x = Math.max(0, Math.min(bounds.w, x));
+                    y = Math.max(0, Math.min(bounds.h, y));
+
+                    return {
+                        fingerX: x + element.offsetLeft,
+                        fingerY: y + element.offsetTop,
+                        x: Math.floor(x / bounds.w * display.width),
+                        y: Math.floor(y / bounds.h * display.height)
+                    }
+                };
+
+
+                let mousePos = {
+                    beganAt: null,
+                    down: null,
+                    up: null,
+                };
+
+                let wdaTouch = async (fromX, fromY) => {
+                    return await axios({
+                        url: path2url("/session/" + session.id + "/wda/touch/perform"),
+                        method: "POST",
+                        // url: path2url("/session/" + this.session.id + "/wda/tap/0"),
+                        // data: JSON.stringify({ x, y })
+                        data: JSON.stringify({
+                            actions: [
+                                {action: "tap", options: {x: fromX, y: fromY, count:1}}
+                            ]
+                        })
+                    })
+                };
+
+                let wdaSwipe = async (fromX, fromY, toX, toY, duration) => {
+                    return await axios({ // 经过测试，相同移动轨迹，wda/touch/perform 比 wda/dragfromtoforduration 响应速度快不少，整体操作iPhoneX上从1.3s+缩短到0.5s内
+                        url: path2url("/session/" + session.id + "/wda/touch/perform"),
+                        method: "POST",
+                        data: JSON.stringify({
+                            actions: [
+                                {action: "press", options: {x: fromX, y: fromY}},
+                                {action: "wait", options: {ms: duration > 17 ? duration : 100 }},// 必须大于17ms，否则 wda 会没反应。日常使用一般100毫秒比较正常
+                                {action: "moveTo", options: {x: toX, y: toY}},
+                                {action:"release", options: {}}
+                            ]
+                        })
+                    })
+                };
+
+                let mouseUpOperate = (x, y) => {
+                    let duration = new Date() - mousePos.beganAt; // milliseconds
+                    // console.log("hold duration", duration);
+
+                    const
+                        startX = mousePos.down.x,
+                        startY = mousePos.down.y,
+                        moveX = Math.abs(startX - x),
+                        moveY = Math.abs(startY - y);
+
+                    console.log(startX, startY, moveX, moveY, duration);
+
+                    if (moveX == 0 && moveY == 0) {
+                        if (duration < 200) { // click
+                            // click
+                            return wdaTouch(x, y);
+                        } else {
+                            // long click
+                            return wdaSwipe(startX, startY, x, y, duration);
+                        }
+                    } else {
+                        return wdaSwipe(startX, startY, x, y, duration);
+                    }
+                };
 
-              // Middle click equals HOME
-              if (e.which === 2) {
-                this.pressHome()
-                return
-              }
+                const mouseDownListener = (event) => {
+                    let e = event;
+                    if (e.originalEvent) {
+                        e = e.originalEvent;
+                    }
+                    e.preventDefault();
 
-              fakePinch = e.altKey
-              calculateBounds()
+                    // Middle click equals HOME
+                    if (e.which === 2) {
+                        pressHome();
+                        return
+                    };
 
-              let { fingerX, fingerY, x, y } = coords(e)
+                    fakePinch = e.altKey;
+                    calculateBounds();
 
-              activeFinger(0, fingerX, fingerY);
-              mousePos.beganAt = new Date()
-              mousePos.down = { x, y }
+                    let { fingerX, fingerY, x, y } = coords(e);
 
-              document.addEventListener('mousemove', mouseMoveListener);
-              document.addEventListener('mouseup', mouseUpListener);
-            }
+                    activeFinger(0, fingerX, fingerY);
+                    mousePos.beganAt = new Date();
+                    mousePos.down = { x, y };
 
-            function mouseMoveListener(event) {
-              var e = event
-              if (e.originalEvent) {
-                e = e.originalEvent
-              }
-              e.preventDefault()
+                    document.addEventListener('mousemove', mouseMoveListener);
+                    document.addEventListener('mouseup', mouseUpListener);
+                };
 
-              let { fingerX, fingerY } = coords(e)
-              var pressure = 0.5
-              activeFinger(1, fingerX, fingerY, pressure);
-            }
+                function mouseMoveListener(event) {
+                    var e = event;
+                    if (e.originalEvent) {
+                        e = e.originalEvent;
+                    }
+                    e.preventDefault();
 
-            function mouseUpListener(event) {
-              var e = event
-              if (e.originalEvent) {
-                e = e.originalEvent
-              }
-              e.preventDefault()
+                    let { fingerX, fingerY } = coords(e);
+                    var pressure = 0.5;
+                    activeFinger(1, fingerX, fingerY, pressure);
+                }
 
-              element.style.cursor = "not-allowed" // not working
-              element.style.pointerEvents = "none"
+                function mouseUpListener(event) {
+                  var e = event;
+                  if (e.originalEvent) {
+                    e = e.originalEvent;
+                  }
+                  e.preventDefault();
 
-              let { fingerX, fingerY, x, y } = coords(e)
+                  element.style.cursor = "not-allowed"; // not working
+                  element.style.pointerEvents = "none";
 
-              activeFinger(1, fingerX, fingerY);
+                  let { fingerX, fingerY, x, y } = coords(e);
 
-              stopMousing()
-              element.removeEventListener("mousedown", mouseDownListener)
+                  activeFinger(1, fingerX, fingerY);
 
-              mouseUpOperate(x, y).then(() => {
-                recoverFingersAndMouse()
-              })
-            }
+                  stopMousing();
+                  element.removeEventListener("mousedown", mouseDownListener);
+                  console.log("mouseUpOperate", x, y);
 
-            function stopMousing() {
-              document.removeEventListener('mousemove', mouseMoveListener);
-              document.removeEventListener('mouseup', mouseUpListener);
-            }
+                  mouseUpOperate(x, y).then(() => {
+                    recoverFingersAndMouse();
+                  }).catch(err => {
+                    recoverFingersAndMouse();
+                    console.log(err);
+                  });
+                }
 
-            function activeFinger(index, x, y, pressure) {
-              var scale = 0.5 + (pressure || 0.5)
-              $(".finger-" + index)
-                .addClass("active")
-                .css("transform", 'translate3d(' + x + 'px,' + y + 'px,0)')
-            }
+                function stopMousing() {
+                  document.removeEventListener('mousemove', mouseMoveListener);
+                  document.removeEventListener('mouseup', mouseUpListener);
+                }
 
-            function deactiveFinger(index) {
-              $(".finger-" + index).removeClass("active")
-            }
+                function activeFinger(index, x, y, pressure) {
+                  var scale = 0.5 + (pressure || 0.5);
+                  $(".finger-" + index)
+                    .addClass("active")
+                    .css("transform", 'translate3d(' + x + 'px,' + y + 'px,0)')
+                }
 
-            function recoverFingersAndMouse() {
-              deactiveFinger(0)
-              deactiveFinger(1)
-              element.style.cursor = ""
-              element.style.pointerEvents = ""
-              element.addEventListener('mousedown', mouseDownListener);
-            }
+                function deactiveFinger(index) {
+                  $(".finger-" + index).removeClass("active")
+                }
 
-            function preventHandler(event) {
-              event.preventDefault()
-            }
+                function recoverFingersAndMouse() {
+                  deactiveFinger(0);
+                  deactiveFinger(1);
+                  element.style.cursor = "";
+                  element.style.pointerEvents = "";
+                  element.addEventListener('mousedown', mouseDownListener);
+                }
 
-            /* bind listeners */
-            element.addEventListener('mousedown', mouseDownListener);
-          },
-          fitCanvas(canvas) {
-            if (canvas.width > canvas.height) {
-              // 横屏显示，宽高相等
-              this.canvasStyle.maxHeight = canvas.parentElement.clientHeight + "px";
-              this.canvasStyle.height = "auto"
-              this.canvasStyle.width = canvas.parentElement.clientHeight + "px"
-            } else {
-              this.canvasStyle.maxHeight = "unset"
-              this.canvasStyle.height = canvas.parentElement.clientHeight + "px"
-              this.canvasStyle.width = "auto"
-            }
-          },
-          drawBlobImageToCanvas(blob, canvas, landscape) {
-            // Support jQuery Promise
-            var dtd = $.Deferred();
-            var ctx = canvas.getContext('2d'),
-              URL = window.URL || window.webkitURL,
-              BLANK_IMG =
-                'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
-              img = this.imagePool.next();
-
-            img.onload = () => {
-              canvas.width = img.width
-              canvas.height = img.height
-
-              ctx.drawImage(img, 0, 0, img.width, img.height);
-
-              if (landscape) {
-                // 顺时针旋转 270°
-                canvas.width = img.height
-                canvas.height = img.width
-
-                ctx.save()
-                ctx.translate(canvas.width / 2, canvas.height / 2);
-                ctx.rotate(1.5 * Math.PI);
-                ctx.drawImage(img,
-                  -img.width / 2,
-                  -img.height / 2);
-                ctx.restore();
-              }
-              this.fitCanvas(canvas)
-
-              // Try to forcefully clean everything to get rid of memory
-              // leaks. Note self despite this effort, Chrome will still
-              // leak huge amounts of memory when the developer tools are
-              // open, probably to save the resources for inspection. When
-              // the developer tools are closed no memory is leaked.
-              img.onload = img.onerror = null
-              img.src = BLANK_IMG
-              img = null
-              blob = null
-
-              URL.revokeObjectURL(url)
-              url = null
-              dtd.resolve();
-            }
+                function preventHandler(event) {
+                  event.preventDefault();
+                }
 
-            img.onerror = function () {
-              // Happily ignore. I suppose this shouldn't happen, but
-              // sometimes it does, presumably when we're loading images
-              // too quickly.
+                /* bind listeners */
+                element.addEventListener('mousedown', mouseDownListener);
+            };
+            function showFPS() {
+                let frame = session.frameCount;
+                setInterval(() => {
+                    display.fps = session.frameCount - frame
+                    frame = session.frameCount;
+                }, 1000);
+            };
+            async function closeWindowWhenReleased(interval) {
+                setTimeout(() => {
+                    if (document.hidden) {
+                        axios.get("/api/v1/user/devices/" + udid)
+                            .then(ret => {
+                                closeWindowWhenReleased(5000);
+                            })
+                            .catch(err => {
+                                console.log(err);
+                                if (err.response.status === 403) { // forbidden
+                                    window.close();
+                                    return
+                                }
+                            })
+                    } else {
+                        axios.get("/api/v1/user/devices/" + udid + "/active")
+                            .then((ret) => {
+                                closeWindowWhenReleased(interval)
+                            })
+                            .catch(function (err) {
+                                console.log(err)
+                                alert("设备可能被释放了，Press F12 to debug")
+                                // let content = '设备' + this.idleTimeout + "秒内没有操作，设备自动释放，点击刷新重新占用该设备"
+                                // this.$alert(content, '设备超时提示', {
+                                //   confirmButtonText: '刷新',
+                                //   type: 'warning'
+                                // }).then(() => {
+                                //   location.reload()
+                                // }).catch(() => {
+                                //   window.close()
+                                // })
+                            })
+                    }
+                }, interval)
+            };
+            function initClipboardJS() {
+                var clipboard = new ClipboardJS(".clipboard-copy");
+
+                clipboard.on('success', function (e) {
+                    e.clearSelection();
+                    showTooltip(e.trigger, "Copied!");
+                })
 
-              // Do the same cleanup here as in onload.
-              img.onload = img.onerror = null
-              img.src = BLANK_IMG
-              img = null
-              blob = null
+                document.querySelectorAll(".clipboard-copy").forEach(e => {
+                    e.addEventListener('mouseleave', clearTooltip);
+                    e.addEventListener('blur', clearTooltip);
+                });
 
-              URL.revokeObjectURL(url)
-              url = null
-              dtd.reject();
-            }
+                function clearTooltip(e) {
+                    const target = e.currentTarget;
+                    setTimeout(() => {
+                        target.innerHTML = "";
+                    }, 200)
+                }
 
-            var url = URL.createObjectURL(blob)
-            img.src = url;
-            return dtd;
-          },
+                function showTooltip(elem, msg) {
+                    elem.innerHTML = "&nbsp;<small>" + msg + "</small>";
+                }
+            };
+
+            onBeforeMount(async () => {
+                await axios.get("/api/v1/user/devices/" + udid)
+                    .then(ret => {
+                        data.value = ret.data.device;
+                        source.value = ret.data.device.source;
+                        usingBeganAt.value = ret.data.device.usingBeganAt;
+                        WdaUrl.value = source.value.wdaUrl;
+                        displayWSUrl.value = source.value.wdaUrl.replace(/^https?:\/\//, "ws://") + "/screen";
+                    })
+                    .catch(err => {
+                         console.log(err);
+                    });
+            });
+
+            onMounted(() => {
+                watch(hasData, (val) => {
+                    if (hasData.value) {
+                        canvas.bg = bgCanvas.value;
+                        canvas.fg = fgCanvas.value;
+
+                        // save the bandwidth
+                        document.addEventListener("visibilitychange", () => {
+                            pageHidden.value = document.hidden;
+                            if (pageHidden.value) {
+                                closeMirrorDisplay();
+                            } else {
+                                mirrorDisplay();
+                            }
+                        });
+                        mirrorDisplay();
+                        syncTouchpad();
+                        hotfix();
+
+                        // show fps
+                        showFPS();
+
+                        // 防止设备被自动释放
+                        closeWindowWhenReleased(10000);
+
+                        // 更新使用时间
+                        setInterval(() => {
+                            let duration = moment.now() - moment(usingBeganAt.value);
+                            usingTime.value.innerHTML = moment.utc(duration).format("HH:mm:ss");
+                        }, 1000);
+
+                        // 初始化剪贴板
+                        initClipboardJS();
+                    };
+                });
+            });
+
+            return {
+                udid,
+                source,
+                WdaUrl,
+                hasData,
+                path2url,
+                activeName,
+                bgCanvas,
+                fgCanvas,
+                upload,
+                usingTime,
+                usingBeganAt,
+                displayWSUrl,
+                canvasStyle,
+                rotation,
+                session,
+                display,
+                displayLinked,
+                mirrorDisplay,
+                alert,
+                app,
+                pageHidden,
+                landscape,
+                hotfix,
+                pressHome,
+                getSessionId,
+                syncTouchpad,
+                initClipboardJS,
+                showFPS,
+                closeWindowWhenReleased,
+            };
         },
-        mounted: function () {
-          this.canvas.bg = this.$refs.bgCanvas;
-
-          // save the bandwidth
-          document.addEventListener("visibilitychange", () => {
-            this.pageHidden = document.hidden;
-            if (this.pageHidden) {
-              this.closeMirrorDisplay()
-            } else {
-              this.mirrorDisplay()
+        methods: {
+            screenshot() {
+                axios.get(this.path2url("/screenshot"))
+                    .then(ret => {
+                        if (window.navigator.msSaveOrOpenBlob) {
+                            alert("IE is not supported !!!");
+                            return
+                        }
+                        var a = document.createElement("a");
+                        a.href = "data:image/jpeg;base64," + ret.data.value;
+                        a.download = "screen-" + new Date().getTime() + ".jpg";
+                        a.click();
+                        setTimeout(function () {
+                            if (document.body.contains(a)){
+                                document.body.removeChild(a);
+                            }
+                        }, 0);
+                    })
+                    .catch(err => {
+                        console.log(err);
+                    });
+            },
+            appOpen(bundleId) {
+                return axios({
+                    url: this.path2url("/session"),
+                    method: "post",
+                    data: JSON.stringify({
+                        capabilities: {
+                            alwaysMatch: {
+                                bundleId: bundleId,
+                                shouldWaitForQuiescence: true,
+                            }
+                        }
+                    })
+                })
+                    .then(ret => {
+                        this.session.id = ret.data.sessionId;
+                    })
+            },
+            chooseAlertButtons() {
+                this.alert.buttons = [];
+                this.alert.loading = true;
+                return axios({
+                    method: "get",
+                    url: this.path2url("/session/" + this.session.id + "/wda/alert/buttons")
+                })
+                    .then(ret => {
+                        this.alert.buttons = ret.data.value;
+                        this.$nextTick(() => {
+                            this.alert.visible = true;
+                        })
+                        // this.$alert("未检测到系统弹窗")
+                        // this.$alert("未知异常，打开开发者选项查看问题
+                        this.alert.loading = false;
+                    })
+                    .catch(err => {
+                        this.alert.loading = false;
+                        console.log(err);
+                    })
+            },
+            alertAccept(name) {
+                let data = null;
+                if (typeof name === 'string' || name instanceof String) {
+                    data = JSON.stringify({ name: name });
+                }
+                return axios({
+                    method: "post",
+                    url: this.path2url("/session/" + this.session.id + "/alert/accept"),
+                    data: data,
+                })
+            },
+            onUploadSelect(file) {
+                this.app.url = file.response.data.url;
+            },
+            onUpload(resp, file, files) {
+                if (!resp.success) {
+                    ELMessage.error(resp.description);
+                    return
+                }
+                this.app.url = resp.data.url;
+                return this.appInstall();
+            },
+            appInstall() {
+                const url = this.app.url
+                this.app.finished = false
+                this.app.message = "安装中 ..."
+                axios({
+                    url: this.source.url + "/app/install?udid=" + this.udid,
+                    method: "post",
+                    data: JSON.stringify({
+                      url: url,
+                    })
+                })
+                    .then(ret => {
+                      this.app.message = "安装成功";
+                      this.app.finished = true;
+                    })
+                    .catch(err => {
+                      this.app.message = "安装失败 " + err.response.data.description;
+                      this.app.finished = true;
+                    })
+            },
+            stopUsing() {
+                axios.delete("/api/v1/user/devices/" + this.udid)
+                    .then(() => {
+                        window.close();
+                    })
+                    .catch(err => {
+                        window.close();
+                        console.log(err);
+                    });
+            },
+            handleTabClick(tab, event) {
+                console.log(tab.name)
             }
-          })
-
-          this.mirrorDisplay()
-          this.syncTouchpad()
-          this.hotfix()
-
-          // show fps
-          this.showFPS()
+        }
+    };
+    createApp(remoteControl_apple).use(ElementPlus, {
+        locale: ElementPlusLocaleZhCn,
+    }).mount("#content-wrapper");
 
-          // 防止设备被自动释放
-          this.closeWindowWhenReleased(10000)
-
-          // 更新使用时间
-          setInterval(() => {
-            let duration = moment.now() - moment(this.usingBeganAt)
-            this.$refs.usingTime.innerHTML = moment.utc(duration).format("HH:mm:ss")
-          }, 1000)
-
-          // 初始化剪贴板
-          this.initClipboardJS()
-        },
-      })
-    })
 </script>
-{% end %}
\ No newline at end of file
+{% end %}
diff --git a/templates/upload.html b/templates/upload.html
index 4caceea..81fdcf8 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -27,11 +27,14 @@ <h3>文件上传</h3>
     </el-upload>
 
     <div>
-        <template v-for="f in files">
-            <el-card class="box-card">
-                <img :src="f.iconUrl" alt="icon" style="height: 30px;">
-                {{!f.packageName}}
-                <em>{{!f.versionName}}</em>
+        <template v-for="f in filesList" :key="f.packageName">
+            <el-card v-if="f.md5sum" class="box-card">
+                <i class="fab fa-android" style="font-size: 1.5em;"></i>
+                <!--img :src="f.iconUrl" alt="icon" style="height: 30px;"-->
+                <span v-text="f.packageName" style="font-size: 1em;margin: 0 10px;"></span>
+                <em v-text="f.versionName"></em>
+                <a :href="f.url" v-text="f.fileName" target="_blank" style="margin: 0 10px;"></a>
+                <el-button type="text" @click="deleteFile(f.md5sum)" style="float: right;">删除</el-button>
             </el-card>
         </template>
     </div>
@@ -40,35 +43,68 @@ <h3>文件上传</h3>
 
 {% block script %}
 <script>
-    new Vue({
-        el: "#app",
-        data: {
-            title: "hello world",
-            files: [{
-                iconUrl: "/static/images/android-logo-robot.png",
-                packageName: "TODO",
-                versionName: "1.1.2"
-            }],
-        },
-        methods: {
-            onUpload(resp, file, files) {
+    const upload = {
+        setup() {
+            const filesList = ref([]);
+            //
+            //    {
+            //        iconUrl: "/static/images/android-logo-robot.png",
+            //        packageName: "",
+            //        versionName: "",
+            //        md5sum: "",
+            //    }
+            function getFilesList() {
+                // TODO: get files list from server
+                axios.get("/upload").then(res => {
+                    console.log(res.data)
+                    filesList.value = res.data.data;
+                });
+            }
+            const upload = ref(null);
+            function onUpload(resp, file, files) {
                 if (!resp.success) {
-                    this.$message({
-                        message: resp.description,
-                        type: "error",
-                    })
+                    ElMessage.error(resp.description);
                     return
                 }
                 if (!resp.data.iconUrl) {
                     resp.data.iconUrl = "/static/images/android-logo-robot.png"
                 }
-                this.files.push(resp.data)
-                console.log(resp)
-                console.log(file)
-                console.log(files)
-                this.$refs.upload.clearFiles()
+                console.log(resp.data, file, files);
+                if (resp.data && typeof resp.data === 'object'){
+                    getFilesList();
+                    ElMessage.success("上传成功");
+                }
+                //console.log(resp)
+                //console.log(file)
+                //console.log(files)
+                upload.value.clearFiles()
+            };
+            function deleteFile(md5sum) {
+                // TODO: delete file from server
+                axios.delete("/upload", {
+                    data: {
+                        md5sum: md5sum,
+                    }
+                }).then(res => {
+                    console.log(res.data)
+                    getFilesList();
+                    ElMessage.success("删除成功");
+                });
             }
+            onBeforeMount(() => {
+                getFilesList();
+            });
+
+            return {
+                filesList,
+                upload,
+                deleteFile,
+                onUpload,
+            };
         }
-    })
+    };
+    createApp(upload).use(ElementPlus, {
+        locale: ElementPlusLocaleZhCn,
+    }).mount("#app");
 </script>
-{% end %}
\ No newline at end of file
+{% end %}
diff --git a/templates/user.html b/templates/user.html
index fd55c46..a51a9af 100644
--- a/templates/user.html
+++ b/templates/user.html
@@ -28,9 +28,9 @@
     <div style="margin-top: 10px">
         <div>
             <dl>
-                <dt>Email</dt>
-                <dd>{{!email}}</dd>
-                <dt>Username</dt>
+                <dt>邮箱</dt>
+                <dd>{{! email }}</dd>
+                <dt>用户名</dt>
                 <dd v-text="username"></dd>
             </dl>
         </div>
@@ -48,11 +48,14 @@ <h4>接口使用方法
         <hr>
         <h4>组管理 <a href="/user/group_create"><small>创建组</small></a></h4>
         <el-table :data="groups">
+            <template #empty>
+                <div>暂无数据</div>
+            </template>
             <el-table-column prop="id" label="名称"></el-table-column>
             <el-table-column prop="name" label="备注"></el-table-column>
             <el-table-column prop="admin" label="管理员">
                 <template slot-scope="scope">
-                    <span v-text="scope.row.admin ? 'true' : 'false'"></span>
+                    <span v-text="scope.row.admin ? '是' : '否'"></span>
                 </template>
             </el-table-column>
         </el-table>
@@ -62,15 +65,34 @@ <h4>组管理 <a href="/user/group_create"><small>创建组</small></a></h4>
 
 {% block script %}
 <script>
-    $.getJSON("/api/v1/user")
-        .then((ret) => {
-            console.log(ret)
-            new Vue({
-                el: "#app",
-                data: Object.assign({
-                    token: "",
-                }, ret),
-            })
-        })
+    const user_page = {
+        setup() {
+            const email = ref("");
+            const username = ref("");
+            const token = ref("");
+            async function getUserInfo() {   // 获取用户信息
+                await axios.get("/api/v1/user")
+                   .then((ret) => {
+                        // console.log(ret.data);
+                        token.value = ret.data.token;
+                        email.value = ret.data.email;
+                        username.value = ret.data.username;
+                    })
+                   .catch((err) => {
+                        console.error(err);
+                   });
+            }
+            onMounted(getUserInfo);
+            return {
+                email,
+                username,
+                token,
+            };
+        },
+    };
+    createApp(user_page).use(ElementPlus, {
+        locale: ElementPlusLocaleZhCn,
+    }).mount("#app");
+
 </script>
-{% end %}
\ No newline at end of file
+{% end %}