diff --git a/static/js/index.js.back b/static/js/index.js.back
new file mode 100644
index 0000000..3f9c6ca
--- /dev/null
+++ b/static/js/index.js.back
@@ -0,0 +1,338 @@
+function Domain() {
+    this.tableData = null
+    this.model = false
+    this.editIndex = -1
+    // this.url = "http://127.0.0.1:8300/domain"
+    this.url = "https://monitor.api.ggbba.top/domain"
+    this.currentPage = 1
+    this.pageData = null
+    this.searchText = ""
+    this.numPages = 0
+}
+
+// 搜索域名
+Domain.prototype.searchDomain = function () {
+    let self = this
+    $('#search-btn').click(function () {
+        let search = $('#search-input').val()
+        self.searchText = search
+        if (self.searchText) {
+            self.currentPage = 1
+            self.initTableData(self.currentPage, self.searchText)
+        } else {
+            self.initTableData(1, "")
+        }
+    })
+}
+
+// 点击分页按钮
+Domain.prototype.domainPageBtn = function () {
+    let self = this
+    $('.page-btn').click(function () {
+        self.currentPage = parseInt($(this).attr('data-p'))
+        self.initTableData(self.currentPage, self.searchText)
+    })
+}
+
+// 分页初始化
+Domain.prototype.domainPageInit = function () {
+    let self = this
+    // 是否是最后一页
+    let is_finally = false
+    // 是否是第一页
+    let is_first = false
+    // 总页数
+    let num_pages = self.pageData['num_pages']
+
+    if (self.currentPage === 1) {
+        is_first = true
+    }
+    if (self.currentPage === num_pages) {
+        is_finally = true
+    }
+    self.pageData['is_first'] = is_first
+    self.pageData['is_finally'] = is_finally
+}
+
+// 表单验证
+Domain.prototype.verifyDomain = function (domain) {
+    let patt = /(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/i
+    return patt.test(domain)
+}
+
+// 错误弹窗
+Domain.prototype.alertError = function (msg) {
+    swal('提示', msg, 'error');
+}
+
+// 弹窗
+Domain.prototype.alertToast = function (msg, type) {
+    swal({
+        'title': msg,
+        'text': '',
+        'type': type,
+        'showCancelButton': false,
+        'showConfirmButton': false,
+        'timer': 1000
+    })
+}
+
+// 带确认按钮的弹窗
+Domain.prototype.alertConfirm = function (params) {
+    swal({
+        'title': params['title'] ? params['title'] : '提示',
+        'showCancelButton': true,
+        'showConfirmButton': true,
+        'type': params['type'] ? params['type'] : '',
+        'confirmButtonText': params['confirmText'] ? params['confirmText'] : '确定',
+        'cancelButtonText': params['cancelText'] ? params['cancelText'] : '取消',
+        'text': params['text'] ? params['text'] : ''
+    }, function (isConfirm) {
+        if (isConfirm) {
+            if (params['confirmCallback']) {
+                params['confirmCallback']()
+            }
+        } else {
+            if (params['cancelCallback']) {
+                params['cancelCallback']()
+            }
+        }
+    })
+}
+
+// 成功弹窗
+Domain.prototype.alertSuccessToast = function (msg) {
+    if (!msg) {
+        msg = '成功！'
+    }
+    this.alertToast(msg, 'success')
+}
+
+// 渲染模板
+Domain.prototype.renderPage = function () {
+    let self = this;
+    let html = template('tpl-table-tr', {domainList: self.tableData})
+    $('#tbody-domin').empty().append(html)
+    html = template('tpl-page-li', {page_data: self.pageData})
+    $('#page-li').empty().append(html)
+    self.editDomain()
+    self.deleteDomain()
+    self.domainPageBtn()
+}
+
+// 初始化数据
+Domain.prototype.initTableData = function (num, query) {
+    let self = this;
+    let requestUrl = self.url + '/page/' + num
+    if (query) {
+        requestUrl += "?search=" + query
+    }
+    $.get(requestUrl, function (data, status) {
+        if (data['code'] === 200) {
+            self.currentPage = num
+            self.tableData = data['data']['domain_data']
+            self.pageData = data['data']['pagination_data']
+            self.numPages = self.pageData['num_pages']
+            self.domainPageInit()
+            self.renderPage()
+        }
+    })
+}
+
+// 添加域名
+Domain.prototype.addDomain = function () {
+    let self = this;
+    $("#add-domain").click(function () {
+        self.initAddForm()
+    })
+}
+
+// 初始化添加域名表单弹窗
+Domain.prototype.initAddForm = function () {
+    this.model = false
+    $('#DomainModalLabel').text("添加域名")
+    $('#cdn-f').prop('checked', true)
+    $('#boce-f').prop('checked', true)
+    $('#form-key').val("")
+    $('#form-domain').val("")
+    $('#form-remark').val("")
+}
+
+// 提交添加域名表单
+Domain.prototype.addSubmit = function () {
+    let self = this
+
+    let boceId = $("input[name='options-boce']:checked").attr("id")
+    let boce = false
+    if (boceId === "boce-t") {
+        boce = true
+    }
+
+    let cdnId = $("input[name='options-cdn']:checked").attr("id")
+    let cdn = false
+    if (cdnId === "cdn-t") {
+        cdn = true
+    }
+
+    let domain = $('#form-domain').val()
+    let autoKey = $('#form-key').val()
+    let remark = $('#form-remark').val()
+    let requestData = {'name': domain,'auth_key': auto_Key, 'remark': remark, 'boce': boce, 'category': cdn}
+
+    $("#DomainModal").modal("hide")
+    if (!self.verifyDomain(domain)) {
+        self.alertError("域名格式不正确")
+        return
+    }
+    $.ajax({
+        type: "post",
+        url: self.url,
+        data: JSON.stringify(requestData),
+        contentType: "application/json; charset=utf-8",
+        dataType: "json",
+        success: function (result) {
+            self.alertSuccessToast("添加成功!")
+            self.initTableData(self.numPages, '')
+        }
+    })
+}
+
+// 编辑域名
+Domain.prototype.editDomain = function () {
+    let self = this;
+    $(".edit-domain").click(function () {
+        let index = $(this).attr('data-index')
+        self.initEditForm(index)
+    })
+}
+
+// 初始化编辑域名表单弹窗
+Domain.prototype.initEditForm = function (index) {
+    this.editIndex = index
+    this.model = true
+    $('#DomainModalLabel').text("编辑域名")
+    let data = this.tableData[index]
+    if (data['category']) {
+        $('#cdn-t').prop('checked', true)
+    } else {
+        $('#cdn-f').prop('checked', true)
+    }
+    if (data['boce']) {
+        $('#boce-t').prop('checked', true)
+    } else {
+        $('#boce-f').prop('checked', true)
+    }
+    $('#form-key').val(data['auth_key'])
+    $('#form-domain').val(data['name'])
+    $('#form-remark').val(data['remark'])
+}
+
+// 编辑域名表单提交
+Domain.prototype.editSubmit = function () {
+    let self = this
+    if (self.model) {
+        let data = this.tableData[self.editIndex]
+        let id = data['id']
+
+        let boceId = $("input[name='options-boce']:checked").attr("id")
+        let boce = false
+        if (boceId === "boce-t") {
+            boce = true
+        }
+
+        let cdnId = $("input[name='options-cdn']:checked").attr("id")
+        let cdn = false
+        if (cdnId === "cdn-t") {
+            cdn = true
+        }
+
+        let domain = $('#form-domain').val()
+        let autoKey = $('#form-key').val()
+        let remark = $('#form-remark').val()
+        let requestData = {'id': id, 'name': domain, 'auth_key': autoKey, 'remark': remark, 'boce': boce, 'category': cdn}
+
+        $("#DomainModal").modal("hide")
+        if (!self.verifyDomain(domain)) {
+            self.alertError("域名格式不正确")
+            return
+        }
+        $.ajax({
+            type: "put",
+            url: self.url,
+            data: JSON.stringify(requestData),
+            contentType: "application/json; charset=utf-8",
+            dataType: "json",
+            success: function (result) {
+                self.alertSuccessToast("编辑成功!")
+                self.tableData[self.editIndex] = requestData
+                self.renderPage()
+            }
+        })
+    }
+}
+
+// 表单提交策略
+Domain.prototype.submitData = function () {
+    let self = this;
+    $('#submit-data').click(function () {
+        if (self.model) {
+            self.editSubmit()
+        } else {
+            self.addSubmit()
+        }
+    })
+}
+
+// 删除域名
+Domain.prototype.deleteDomain = function () {
+    let self = this;
+    $('.delete-domain').click(function () {
+        let index = $(this).attr('data-index')
+        let requestData = {'id': self.tableData[index]['id']}
+        self.alertConfirm({
+            'text': '您确定要删除' + self.tableData[index]['name'] + '吗？',
+            'confirmCallback': function () {
+                $.ajax({
+                    type: "delete",
+                    url: self.url,
+                    data: JSON.stringify(requestData),
+                    contentType: "application/json; charset=utf-8",
+                    dataType: "json",
+                    success: function (result) {
+                        self.alertSuccessToast("删除成功!")
+                        self.initTableData(self.currentPage, self.searchText)
+                    }
+                })
+            }
+        })
+    })
+}
+
+// 入口方法
+Domain.prototype.run = function () {
+    let self = this
+    self.initTableData(self.currentPage, '')
+    self.addDomain()
+    self.editDomain()
+    self.submitData()
+    self.deleteDomain()
+    self.domainPageBtn()
+    self.searchDomain()
+}
+
+// 构造执行入口
+$(function () {
+    // 模板过滤方法
+    if (window.template) {
+        template.defaults.imports.domainSubstring = function (dateValue) {
+            if (dateValue.length > 40 ) {
+                return dateValue.substring(0, 37) + "..."
+            } else {
+                return dateValue
+            }
+        }
+    }
+    let domain = new Domain()
+    domain.run()
+})
+
diff --git a/view/index.html b/view/index.html
index 8dc50e7..d242b25 100644
--- a/view/index.html
+++ b/view/index.html
@@ -23,11 +23,11 @@
     </div>
     <div class="card-footer text-muted" style="background-color: #fcf8e3">
         <div id="preview"></div>
-        <div class="input-group mb-3">
-            <input type="text" class="form-control" placeholder="图片链接" aria-label="图片链接"
-                   aria-describedby="button-addon2">
-            <div class="input-group-append">
-                <button class="btn btn-outline-primary" type="button" id="button-addon2">复制链接</button>
+        <div class="card" style="width: 18rem;">
+            <img src="https://a.520gexing.com/uploads/allimg/2023092607/z52gncuk0ei.jpg" class="card-img-top" alt="">
+            <div class="card-body">
+                <p>https://a.520gexing.com/uploads/allimg/2023092607/z52gncuk0ei.jpg</p>
+                <button type="button" class="btn btn-primary img-copy-url-btn">复制链接</button>
             </div>
         </div>
     </div>