diff --git a/.travis.yml b/.travis.yml
index 251c5f4..0f93df6 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -47,6 +47,7 @@ script:
         -v ~/.cache/electron-builder:/root/.cache/electron-builder \
         electronuserland/builder:wine \
         /bin/bash -c "npm install && npm run electron:build -- --bundler builder --target linux"
+        ls dist/electron/Packaged/
       linux_file=`ls dist/electron/Packaged/ | grep '.AppImage$'`
       ./ossutil64 cp "dist/electron/Packaged/${linux_file}" "${BUCKET}/${linux_file}" -f
 
@@ -59,10 +60,14 @@ script:
         -v ~/.cache/electron-builder:/root/.cache/electron-builder \
         electronuserland/builder:wine \
         /bin/bash -c "npm install && npm run electron:build -- --bundler builder --target win"
-        win_file=`ls dist/electron/Packaged/ | grep '.zip$'`
-      ./ossutil64 cp "dist/electron/Packaged/${win_file}" "${BUCKET}/${win_file}" -f
+      ls dist/electron/Packaged/
+      for i in `ls dist/electron/Packaged/ | grep 'win.zip$'`;
+      do
+      ./ossutil64 cp "dist/electron/Packaged/$i" "${BUCKET}/$i" -f
+      done
     else
       npm run electron:build
+      ls dist/electron/Packaged/
       osx_file=`ls dist/electron/Packaged/ | grep '.dmg$'`
       ./ossutilmac64 cp "dist/electron/Packaged/${osx_file}" "${BUCKET}/${osx_file}" -f
     fi
diff --git a/package.json b/package.json
index 38ac029..90e61fd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "h-player",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "A Quasar Framework app",
   "productName": "h-player",
   "cordovaId": "org.cordova.quasar.app",
@@ -29,6 +29,7 @@
     "vue-i18n": "^8.14.1",
     "vue-navigation": "^1.1.4",
     "vue-rx": "^6.2.0",
+    "vuedraggable": "^2.23.0",
     "xml2js": "^0.4.22"
   },
   "devDependencies": {
diff --git a/quasar.conf.js b/quasar.conf.js
index 3dc5a20..07f1a84 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -208,7 +208,15 @@ module.exports = function (ctx) {
           target: 'dmg',
         },
         win: {
-          target: 'zip',
+          target: [
+            {
+              target: 'zip',
+              arch: [
+                'x64',
+                'ia32',
+              ],
+            },
+          ],
         },
         linux: {
           target: 'AppImage',
diff --git a/src/layouts/Config.vue b/src/layouts/Config.vue
index a3e73d9..2d19072 100644
--- a/src/layouts/Config.vue
+++ b/src/layouts/Config.vue
@@ -26,526 +26,30 @@
       <footer-content></footer-content>
     </q-footer>
     <q-page-container>
-      <q-page class="flex">
-        <scroll-warp>
-          <q-scroll-area
-            :thumb-style="thumbStyle"
-            class="fit"
-          >
-            <div class="text-h4 q-pa-sm">视频源设置</div>
-            <q-separator></q-separator>
-            <div class="q-pa-sm">
-              <q-btn
-                color="primary"
-                label="导入视频源"
-                @click="openDialog"
-              />
-            </div>
-            <div class="q-pa-sm">
-              <q-table
-                title="Treats"
-                :data="data"
-                :columns="columns"
-                row-key="id"
-                :filter="filter"
-                :loading="loading"
-              >
-                <template v-slot:top>
-                  <q-btn
-                    flat
-                    dense
-                    color="primary"
-                    :disable="loading"
-                    label="添加"
-                    @click="addRow"
-                  />
-                  <q-space />
-                  <q-input
-                    borderless
-                    dense
-                    debounce="300"
-                    color="primary"
-                    v-model="filter"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="search" />
-                    </template>
-                  </q-input>
-                </template>
-                <template v-slot:body="props">
-                  <q-tr :props="props">
-                    <q-td
-                      key="id"
-                      :props="props"
-                    >{{ props.row.id }}</q-td>
-                    <q-td
-                      key="name"
-                      :props="props"
-                    >
-                      {{ props.row.name }}
-                      <q-popup-edit
-                        v-model="props.row.name"
-                        buttons
-                      >
-                        <q-input
-                          v-model="props.row.name"
-                          dense
-                          autofocus
-                          counter
-                        />
-                      </q-popup-edit>
-                    </q-td>
-                    <q-td
-                      key="uri"
-                      :props="props"
-                    >
-                      {{ props.row.uri }}
-                      <q-popup-edit
-                        v-model="props.row.uri"
-                        buttons
-                      >
-                        <q-input
-                          v-model="props.row.uri"
-                          dense
-                          autofocus
-                          counter
-                        />
-                      </q-popup-edit>
-                    </q-td>
-                    <q-td
-                      key="httpApi"
-                      :props="props"
-                    >
-                      <div class="text-pre-wrap">{{ props.row.httpApi }}</div>
-                      <q-popup-edit
-                        v-model="props.row.httpApi"
-                        buttons
-                      >
-                        <q-input
-                          v-model="props.row.httpApi"
-                          dense
-                          autofocus
-                        />
-                      </q-popup-edit>
-                    </q-td>
-                    <q-td
-                      key="httpsApi"
-                      :props="props"
-                    >
-                      <div class="text-pre-wrap">{{ props.row.httpsApi }}</div>
-                      <q-popup-edit
-                        v-model="props.row.httpsApi"
-                        buttons
-                      >
-                        <q-input
-                          v-model="props.row.httpsApi"
-                          dense
-                          autofocus
-                        />
-                      </q-popup-edit>
-                    </q-td>
-                    <q-td
-                      key="type"
-                      :props="props"
-                    >
-                      <div class="text-pre-wrap">{{ props.row.type }}</div>
-                      <q-popup-edit
-                        v-model="props.row.type"
-                        buttons
-                      >
-                        <q-input
-                          v-model="props.row.type"
-                          dense
-                          autofocus
-                        />
-                      </q-popup-edit>
-                    </q-td>
-                    <q-td
-                      key="action"
-                      :props="props"
-                    >
-                      <q-btn
-                        dense
-                        flat
-                        color="red"
-                        icon="close"
-                        @click="deleteRow(props)"
-                      />
-                    </q-td>
-                  </q-tr>
-                </template>
-              </q-table>
-              <q-dialog
-                v-model="addDialog"
-                persistent
-              >
-                <q-card style="min-width: 400px">
-                  <q-card-section>
-                    <div class="text-h6">name</div>
-                  </q-card-section>
-
-                  <q-card-section>
-                    <q-input
-                      dense
-                      v-model="addRowData.name"
-                      autofocus
-                    />
-                  </q-card-section>
-                  <q-card-section>
-                    <div class="text-h6">url</div>
-                  </q-card-section>
-
-                  <q-card-section>
-                    <q-input
-                      dense
-                      v-model="addRowData.uri"
-                    />
-                  </q-card-section>
-                  <q-card-section>
-                    <div class="text-h6">httpApi</div>
-                  </q-card-section>
-
-                  <q-card-section>
-                    <q-input
-                      dense
-                      v-model="addRowData.httpApi"
-                    />
-                  </q-card-section>
-                  <q-card-section>
-                    <div class="text-h6">httpsApi</div>
-                  </q-card-section>
-
-                  <q-card-section>
-                    <q-input
-                      dense
-                      v-model="addRowData.httpsApi"
-                    />
-                  </q-card-section>
-                  <q-card-section>
-                    <div class="text-h6">type</div>
-                  </q-card-section>
-
-                  <q-card-section>
-                    <q-input
-                      dense
-                      v-model="addRowData.type"
-                    />
-                  </q-card-section>
-
-                  <q-card-actions
-                    align="right"
-                    class="text-primary"
-                  >
-                    <q-btn
-                      flat
-                      label="取消"
-                      v-close-popup
-                    />
-                    <q-btn
-                      flat
-                      @click="addRowInTable"
-                      label="确定"
-                      v-close-popup
-                    />
-                  </q-card-actions>
-                </q-card>
-              </q-dialog>
-            </div>
-            <div class="q-pa-sm">
-              <q-btn
-                color="primary"
-                label="导出视频源"
-                @click="saveDialog"
-              />
-            </div>
-            <div class="q-pa-sm">
-              <q-btn
-                color="red"
-                label="清空视频源"
-                @click="showClearConfirm"
-              />
-              <q-dialog
-                v-model="clearConfirm"
-                persistent
-              >
-                <q-card>
-                  <q-card-section class="row items-center">
-                    <q-avatar
-                      icon="warning"
-                      color="primary"
-                      text-color="white"
-                    />
-                    <span class="q-ml-sm">清空视频源后需要重新导入或添加，请确定已备份当前视频源</span>
-                  </q-card-section>
-
-                  <q-card-actions align="right">
-                    <q-btn
-                      flat
-                      label="取消"
-                      color="primary"
-                      v-close-popup
-                    />
-                    <q-btn
-                      flat
-                      label="确定"
-                      color="primary"
-                      v-close-popup
-                      @click="clearSource"
-                    />
-                  </q-card-actions>
-                </q-card>
-              </q-dialog>
-            </div>
-            <div class="text-h4 q-pa-sm">全局设置</div>
-            <q-separator></q-separator>
-            <div>
-              <q-toggle
-                v-model="https"
-                label="是否使用https"
-              />
-            </div>
-            <div>
-              <q-toggle
-                v-model="loadImage"
-                label="是否自动加载图片"
-              />
-            </div>
-            <div class="q-ml-sm">
-              <q-btn
-                color="primary"
-                icon="bug_report"
-                label="打开开发者工具"
-                @click="toggleDevTools"
-              />
-            </div>
-            <div class="text-h4 q-pa-sm">软件信息</div>
-            <q-separator></q-separator>
-            <div class="q-pa-sm">
-              <div>
-                当前版本:
-                <q-chip
-                  icon="computer"
-                  size="10px"
-                >{{currentVersion}}</q-chip>
-              </div>
-              <div>
-                最新版本:
-                <q-chip
-                  icon="cloud"
-                  size="10px"
-                >{{latestVersion}}</q-chip>
-              </div>
-            </div>
-            <div class="q-pa-sm">
-              <q-btn
-                :loading="updateing"
-                @click="checkUpdate"
-                color="primary"
-                icon="cloud_upload"
-                label="检查更新"
-              />
-            </div>
-            <div class="q-pa-sm">
-              <q-btn
-                @click="createIssue"
-                color="red"
-                icon="error"
-                label="提交反馈"
-              />
-            </div>
-          </q-scroll-area>
-        </scroll-warp>
-      </q-page>
+      <router-view></router-view>
     </q-page-container>
   </q-layout>
 </template>
 
 <script>
 import footerContent from 'components/footerContent';
-import scrollWarp from 'components/scrollWarp';
-import clonedeep from 'lodash/cloneDeep';
 import titleBar from 'components/titleBar';
-import { mapMutations, mapState } from 'vuex';
-import { uid } from 'quasar';
-import fs from 'fs-extra';
-import { openNewGitHubIssue } from 'electron-util';
 
 export default {
   name: 'Config',
   data() {
     return {
       leftDrawer: this.$q.platform.is.desktop,
-      loading: false,
-      updateing: false,
-      filter: '',
-      rowCount: 10,
-      columns: [
-        {
-          name: 'id',
-          required: true,
-          label: 'id',
-          align: 'left',
-          field: 'id',
-          sortable: true,
-        },
-        {
-          name: 'name',
-          align: 'center',
-          label: 'name',
-          field: 'name',
-          sortable: true,
-        },
-        {
-          name: 'uri',
-          label: 'uri',
-          field: 'uri',
-          sortable: true,
-        },
-        { name: 'httpApi', label: 'httpApi', field: 'httpApi' },
-        { name: 'httpsApi', label: 'httpsApi', field: 'httpsApi' },
-        { name: 'type', label: 'type', field: 'type' },
-        { name: 'action', label: '操作' },
-      ],
-      data: [],
-      addDialog: false,
-      clearConfirm: false,
-      addRowData: {
-        id: '',
-        name: '',
-        uri: '',
-        httpApi: '',
-        httpsApi: '',
-        type: '',
-      },
     };
   },
-  watch: {
-    data: {
-      handler() {
-        console.log('config->watch->data->handler');
-        this.setSiteList(clonedeep(this.data));
-      },
-      deep: true,
-    },
-  },
   components: {
     titleBar,
-    scrollWarp,
     footerContent,
   },
-  mounted() {
-    this.data = clonedeep(this.siteList);
-  },
-  computed: {
-    ...mapState({
-      siteList: state => state.site.siteList,
-      currentVersion: state => state.app.currentVersion,
-      latestVersion: state => state.app.latestVersion,
-    }),
-    https: {
-      get() {
-        return this.$store.state.app.https;
-      },
-      set(value) {
-        this.$store.commit('setHttps', value);
-      },
-    },
-    loadImage: {
-      get() {
-        return this.$store.state.app.loadImage;
-      },
-      set(value) {
-        this.$store.commit('setLoadImage', value);
-      },
-    },
-    thumbStyle() {
-      return {
-        right: '2px',
-        borderRadius: '5px',
-        backgroundColor: '#027be3',
-        width: '5px',
-        opacity: 0.75,
-      };
-    },
-  },
   methods: {
-    ...mapMutations(['setSiteList']),
-    async openDialog() {
-      const { dialog } = this.$q.electron.remote;
-      const dialogResult = await dialog.showOpenDialog({
-        properties: ['openFile'],
-        filters: [{ name: 'JSON', extensions: ['json'] }],
-      });
-      if (!dialogResult.canceled && dialogResult.filePaths) {
-        const importedFile = await fs.readJSON(dialogResult.filePaths[0]);
-        this.data = clonedeep(importedFile);
-      }
-    },
-    async saveDialog() {
-      const { dialog } = this.$q.electron.remote;
-      const dialogResult = await dialog.showSaveDialog({
-        defaultPath: 'source.json',
-      });
-      if (!dialogResult.canceled && dialogResult.filePath) {
-        await fs.writeJson(dialogResult.filePath, this.siteList);
-      }
-    },
     closeConfig() {
       this.$router.replace('/');
     },
-    addRow() {
-      this.addDialog = true;
-    },
-    deleteRow(prop) {
-      this.data = this.data.filter(element => element.id !== prop.row.id);
-    },
-    addRowInTable() {
-      this.addRowData.id = uid();
-      this.data.push(this.addRowData);
-      this.addRowData = {
-        id: '',
-        name: '',
-        uri: '',
-        httpApi: '',
-        httpsApi: '',
-        type: '',
-      };
-    },
-    showClearConfirm() {
-      this.clearConfirm = true;
-    },
-    clearSource() {
-      this.$electronStore.clear();
-      this.data = [];
-    },
-    checkUpdate() {
-      this.updateing = true;
-      this.$store
-        .dispatch('getLatestVersion')
-        .catch((error) => {
-          console.error(error);
-        })
-        .finally(() => {
-          this.updateing = false;
-        });
-    },
-    createIssue() {
-      openNewGitHubIssue({
-        user: 'ZyqGitHub1',
-        repo: 'h-player-v2',
-      });
-    },
-    toggleDevTools() {
-      const win = this.$q.electron.remote.BrowserWindow.getFocusedWindow();
-      if (win) {
-        const { webContents } = win;
-        if (webContents.isDevToolsOpened()) {
-          webContents.closeDevTools();
-        } else {
-          webContents.openDevTools();
-        }
-      }
-    },
   },
 };
 </script>
diff --git a/src/pages/config/components/dndSort.vue b/src/pages/config/components/dndSort.vue
new file mode 100644
index 0000000..1c1ca1a
--- /dev/null
+++ b/src/pages/config/components/dndSort.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <draggable
+      class="list-group"
+      v-model="list"
+      v-bind="dragOptions"
+      @start="isDragging = true"
+      @end="isDragging = false"
+      @change="changeHandler"
+    >
+      <transition-group
+        type="transition"
+        name="flip-list"
+      >
+        <div
+          class="list-group-item"
+          v-for="element in list"
+          :key="element.id"
+        >
+          <q-icon name="drag_handle" />
+          {{ element.name }}
+        </div>
+      </transition-group>
+    </draggable>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable';
+import clonedeep from 'lodash/cloneDeep';
+import { mapState, mapMutations } from 'vuex';
+
+export default {
+  name: 'transition-example',
+  display: 'Transition',
+  order: 6,
+  components: {
+    draggable,
+  },
+  data() {
+    return {
+      list: [],
+    };
+  },
+  mounted() {
+    this.list = clonedeep(this.siteList);
+  },
+  methods: {
+    ...mapMutations(['setSiteList']),
+    changeHandler() {
+      this.$emit('change-order', this.list);
+    },
+  },
+  computed: {
+    ...mapState({
+      siteList: state => state.site.siteList,
+    }),
+    dragOptions() {
+      return {
+        animation: 0,
+        group: 'description',
+        disabled: false,
+        ghostClass: 'ghost',
+      };
+    },
+  },
+};
+</script>
+
+<style>
+.list-group {
+  display: flex;
+  flex-direction: column;
+}
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 0.75rem 1.25rem;
+  margin-bottom: -1px;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+}
+.flip-list-move {
+  transition: transform 0.5s;
+}
+.no-move {
+  transition: transform 0s;
+}
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+.list-group {
+  min-height: 20px;
+}
+.list-group-item {
+  cursor: move;
+}
+.list-group-item i {
+  cursor: pointer;
+}
+</style>
diff --git a/src/pages/config/index.vue b/src/pages/config/index.vue
new file mode 100644
index 0000000..7568aed
--- /dev/null
+++ b/src/pages/config/index.vue
@@ -0,0 +1,585 @@
+<template>
+  <q-page class="flex">
+    <scroll-warp>
+      <q-scroll-area
+        :thumb-style="thumbStyle"
+        class="fit"
+      >
+        <div class="text-h4 q-pa-sm">视频源设置</div>
+        <q-separator></q-separator>
+        <div class="q-pa-sm">
+          <q-btn
+            color="primary"
+            label="导入视频源"
+            @click="openDialog"
+          />
+        </div>
+        <div class="q-pa-sm">
+          <q-table
+            title="Treats"
+            :data="data"
+            :columns="columns"
+            row-key="id"
+            :filter="filter"
+            :loading="loading"
+          >
+            <template v-slot:top>
+              <q-btn
+                flat
+                dense
+                color="primary"
+                :disable="loading"
+                label="添加"
+                @click="addRow"
+              />
+              <q-btn
+                flat
+                dense
+                color="primary"
+                :disable="loading"
+                label="排序"
+                @click="showSort"
+              />
+              <q-space />
+              <q-input
+                borderless
+                dense
+                debounce="300"
+                color="primary"
+                v-model="filter"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td
+                  key="id"
+                  :props="props"
+                >{{ props.row.id }}</q-td>
+                <q-td
+                  key="name"
+                  :props="props"
+                >
+                  {{ props.row.name }}
+                  <q-popup-edit
+                    v-model="props.row.name"
+                    buttons
+                  >
+                    <q-input
+                      v-model="props.row.name"
+                      dense
+                      autofocus
+                      counter
+                    />
+                  </q-popup-edit>
+                </q-td>
+                <q-td
+                  key="uri"
+                  :props="props"
+                >
+                  {{ props.row.uri }}
+                  <q-popup-edit
+                    v-model="props.row.uri"
+                    buttons
+                  >
+                    <q-input
+                      v-model="props.row.uri"
+                      dense
+                      autofocus
+                      counter
+                    />
+                  </q-popup-edit>
+                </q-td>
+                <q-td
+                  key="httpApi"
+                  :props="props"
+                >
+                  <div class="text-pre-wrap">{{ props.row.httpApi }}</div>
+                  <q-popup-edit
+                    v-model="props.row.httpApi"
+                    buttons
+                  >
+                    <q-input
+                      v-model="props.row.httpApi"
+                      dense
+                      autofocus
+                    />
+                  </q-popup-edit>
+                </q-td>
+                <q-td
+                  key="httpsApi"
+                  :props="props"
+                >
+                  <div class="text-pre-wrap">{{ props.row.httpsApi }}</div>
+                  <q-popup-edit
+                    v-model="props.row.httpsApi"
+                    buttons
+                  >
+                    <q-input
+                      v-model="props.row.httpsApi"
+                      dense
+                      autofocus
+                    />
+                  </q-popup-edit>
+                </q-td>
+                <q-td
+                  key="type"
+                  :props="props"
+                >
+                  <div class="text-pre-wrap">{{ props.row.type }}</div>
+                  <q-popup-edit
+                    v-model="props.row.type"
+                    buttons
+                  >
+                    <q-input
+                      v-model="props.row.type"
+                      dense
+                      autofocus
+                    />
+                  </q-popup-edit>
+                </q-td>
+                <q-td
+                  key="action"
+                  :props="props"
+                >
+                  <q-btn
+                    dense
+                    flat
+                    color="red"
+                    icon="close"
+                    @click="deleteRow(props)"
+                  />
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+          <q-dialog
+            v-model="addDialog"
+            persistent
+          >
+            <q-card style="min-width: 400px">
+              <q-card-section class="row items-center">
+                <div class="text-h6">添加视频源</div>
+                <q-space />
+                <q-btn
+                  icon="close"
+                  flat
+                  round
+                  dense
+                  v-close-popup
+                />
+              </q-card-section>
+              <q-card-section
+                style="max-height: 50vh"
+                class="scroll"
+              >
+                <q-input
+                  v-model="addRowData.name"
+                  ref="name"
+                  autofocus
+                  label="name"
+                  :rules="[val => !!val || '必填项']"
+                />
+                <q-input
+                  v-model="addRowData.uri"
+                  label="url"
+                />
+                <q-input
+                  v-model="addRowData.httpApi"
+                  ref="httpApi"
+                  label="httpApi"
+                  :rules="[isUrl]"
+                />
+                <q-input
+                  v-model="addRowData.httpsApi"
+                  ref="httpsApi"
+                  label="httpsApi"
+                  :rules="[isUrl]"
+                />
+                <q-input
+                  v-model="addRowData.type"
+                  label="type"
+                />
+              </q-card-section>
+              <q-card-actions
+                align="right"
+                class="text-primary"
+              >
+                <q-btn
+                  flat
+                  label="取消"
+                  v-close-popup
+                />
+                <q-btn
+                  flat
+                  @click="addRowInTable"
+                  label="确定"
+                />
+              </q-card-actions>
+            </q-card>
+          </q-dialog>
+          <q-dialog
+            v-model="sortDialog"
+            persistent
+          >
+            <q-card style="min-width: 400px">
+              <q-card-section class="row items-center">
+                <div class="text-h6">拖动排序</div>
+                <q-space />
+                <q-btn
+                  icon="close"
+                  flat
+                  round
+                  dense
+                  v-close-popup
+                />
+              </q-card-section>
+              <q-card-section
+                style="max-height: calc(100vh - 200px)"
+                class="scroll"
+              >
+                <dnd-sort @change-order="changeOrder"></dnd-sort>
+              </q-card-section>
+              <q-card-actions
+                align="right"
+                class="text-primary"
+              >
+                <q-btn
+                  flat
+                  label="取消"
+                  v-close-popup
+                />
+                <q-btn
+                  flat
+                  @click="finishSort"
+                  label="确定"
+                  v-close-popup
+                />
+              </q-card-actions>
+            </q-card>
+          </q-dialog>
+        </div>
+        <div class="q-pa-sm">
+          <q-btn
+            color="primary"
+            label="导出视频源"
+            @click="saveDialog"
+          />
+        </div>
+        <div class="q-pa-sm">
+          <q-btn
+            color="red"
+            label="清空视频源"
+            @click="showClearConfirm"
+          />
+          <q-dialog
+            v-model="clearConfirm"
+            persistent
+          >
+            <q-card>
+              <q-card-section class="row items-center">
+                <q-avatar
+                  icon="warning"
+                  color="primary"
+                  text-color="white"
+                />
+                <span class="q-ml-sm">清空视频源后需要重新导入或添加，请确定已备份当前视频源</span>
+              </q-card-section>
+
+              <q-card-actions align="right">
+                <q-btn
+                  flat
+                  label="取消"
+                  color="primary"
+                  v-close-popup
+                />
+                <q-btn
+                  flat
+                  label="确定"
+                  color="primary"
+                  v-close-popup
+                  @click="clearSource"
+                />
+              </q-card-actions>
+            </q-card>
+          </q-dialog>
+        </div>
+        <div class="text-h4 q-pa-sm">全局设置</div>
+        <q-separator></q-separator>
+        <div>
+          <q-toggle
+            v-model="https"
+            label="是否使用https"
+          />
+        </div>
+        <div>
+          <q-toggle
+            v-model="loadImage"
+            label="是否自动加载图片"
+          />
+        </div>
+        <div class="q-ml-sm">
+          <q-btn
+            color="primary"
+            icon="bug_report"
+            label="打开开发者工具"
+            @click="toggleDevTools"
+          />
+        </div>
+        <div class="text-h4 q-pa-sm">软件信息</div>
+        <q-separator></q-separator>
+        <div class="q-pa-sm">
+          <div>
+            当前版本:
+            <q-chip
+              icon="computer"
+              size="10px"
+            >{{currentVersion}}</q-chip>
+          </div>
+          <div>
+            最新版本:
+            <q-chip
+              icon="cloud"
+              size="10px"
+            >{{latestVersion}}</q-chip>
+          </div>
+        </div>
+        <div class="q-pa-sm">
+          <q-btn
+            :loading="updateing"
+            @click="checkUpdate"
+            color="primary"
+            icon="cloud_upload"
+            label="检查更新"
+          />
+        </div>
+        <div class="q-pa-sm">
+          <q-btn
+            @click="createIssue"
+            color="red"
+            icon="error"
+            label="提交反馈"
+          />
+        </div>
+      </q-scroll-area>
+    </scroll-warp>
+  </q-page>
+</template>
+
+<script>
+import scrollWarp from 'components/scrollWarp';
+import clonedeep from 'lodash/cloneDeep';
+import { mapMutations, mapState } from 'vuex';
+import { uid } from 'quasar';
+import fs from 'fs-extra';
+import { openNewGitHubIssue } from 'electron-util';
+import isAbsoluteUrl from 'is-absolute-url';
+import dndSort from './components/dndSort';
+
+export default {
+  name: 'Config',
+  data() {
+    return {
+      leftDrawer: this.$q.platform.is.desktop,
+      loading: false,
+      updateing: false,
+      filter: '',
+      rowCount: 10,
+      tempOrder: [],
+      columns: [
+        {
+          name: 'id',
+          required: true,
+          label: 'id',
+          align: 'left',
+          field: 'id',
+          sortable: true,
+        },
+        {
+          name: 'name',
+          align: 'center',
+          label: 'name',
+          field: 'name',
+          sortable: true,
+        },
+        {
+          name: 'uri',
+          label: 'uri',
+          field: 'uri',
+          sortable: true,
+        },
+        { name: 'httpApi', label: 'httpApi', field: 'httpApi' },
+        { name: 'httpsApi', label: 'httpsApi', field: 'httpsApi' },
+        { name: 'type', label: 'type', field: 'type' },
+        { name: 'action', label: '操作' },
+      ],
+      data: [],
+      addDialog: false,
+      sortDialog: false,
+      clearConfirm: false,
+      addRowData: {
+        id: '',
+        name: '',
+        uri: '',
+        httpApi: '',
+        httpsApi: '',
+        type: '',
+      },
+    };
+  },
+  watch: {
+    data: {
+      handler() {
+        console.log('config->watch->data->handler');
+        this.setSiteList(clonedeep(this.data));
+      },
+      deep: true,
+    },
+  },
+  components: {
+    scrollWarp,
+    dndSort,
+  },
+  mounted() {
+    this.data = clonedeep(this.siteList);
+  },
+  computed: {
+    ...mapState({
+      siteList: state => state.site.siteList,
+      currentVersion: state => state.app.currentVersion,
+      latestVersion: state => state.app.latestVersion,
+    }),
+    https: {
+      get() {
+        return this.$store.state.app.https;
+      },
+      set(value) {
+        this.$store.commit('setHttps', value);
+      },
+    },
+    loadImage: {
+      get() {
+        return this.$store.state.app.loadImage;
+      },
+      set(value) {
+        this.$store.commit('setLoadImage', value);
+      },
+    },
+    thumbStyle() {
+      return {
+        right: '2px',
+        borderRadius: '5px',
+        backgroundColor: '#027be3',
+        width: '5px',
+        opacity: 0.75,
+      };
+    },
+  },
+  methods: {
+    ...mapMutations(['setSiteList']),
+    async openDialog() {
+      const { dialog } = this.$q.electron.remote;
+      const dialogResult = await dialog.showOpenDialog({
+        properties: ['openFile'],
+        filters: [{ name: 'JSON', extensions: ['json'] }],
+      });
+      if (!dialogResult.canceled && dialogResult.filePaths) {
+        const importedFile = await fs.readJSON(dialogResult.filePaths[0]);
+        this.data = clonedeep(importedFile);
+      }
+    },
+    async saveDialog() {
+      const { dialog } = this.$q.electron.remote;
+      const dialogResult = await dialog.showSaveDialog({
+        defaultPath: 'source.json',
+      });
+      if (!dialogResult.canceled && dialogResult.filePath) {
+        await fs.writeJson(dialogResult.filePath, this.siteList);
+      }
+    },
+    addRow() {
+      this.addDialog = true;
+    },
+    deleteRow(prop) {
+      this.data = this.data.filter(element => element.id !== prop.row.id);
+    },
+    addRowInTable() {
+      this.$refs.name.validate();
+      this.$refs.httpApi.validate();
+      this.$refs.httpsApi.validate();
+
+      if (this.$refs.name.hasError || this.$refs.httpApi.hasError || this.$refs.httpsApi.hasError) {
+        this.$q.notify({
+          color: 'negative',
+          message: '请完善添加的视频源信息',
+        });
+      } else {
+        this.addRowData.id = uid();
+        this.data.push(this.addRowData);
+        this.addRowData = {
+          id: '',
+          name: '',
+          uri: '',
+          httpApi: '',
+          httpsApi: '',
+          type: '',
+        };
+        this.addDialog = false;
+      }
+    },
+    showSort() {
+      this.sortDialog = true;
+      this.tempOrder = clonedeep(this.data);
+    },
+    changeOrder(list) {
+      this.tempOrder = list;
+    },
+    finishSort() {
+      this.data = this.tempOrder;
+    },
+    showClearConfirm() {
+      this.clearConfirm = true;
+    },
+    clearSource() {
+      this.$electronStore.clear();
+      this.data = [];
+    },
+    checkUpdate() {
+      this.updateing = true;
+      this.$store
+        .dispatch('getLatestVersion')
+        .catch((error) => {
+          console.error(error);
+        })
+        .finally(() => {
+          this.updateing = false;
+        });
+    },
+    createIssue() {
+      openNewGitHubIssue({
+        user: 'ZyqGitHub1',
+        repo: 'h-player-v2',
+      });
+    },
+    toggleDevTools() {
+      const win = this.$q.electron.remote.BrowserWindow.getFocusedWindow();
+      if (win) {
+        const { webContents } = win;
+        if (webContents.isDevToolsOpened()) {
+          webContents.closeDevTools();
+        } else {
+          webContents.openDevTools();
+        }
+      }
+    },
+    isUrl(val) {
+      return isAbsoluteUrl(val) || '请输入有效url';
+    },
+  },
+};
+</script>
+
+<style lang="stylus"></style>
diff --git a/src/router/routes.js b/src/router/routes.js
index abfc0e1..db75c92 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -24,7 +24,7 @@ const routes = [
   {
     path: '/config',
     component: () => import('layouts/Config'),
-    // children: [{ path: '', component: () => import('pages/MiniVideo') }],
+    children: [{ path: '', component: () => import('pages/config') }],
   },
 ];
 
diff --git a/yarn.lock b/yarn.lock
index e6bb640..ecb10f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8561,6 +8561,11 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+sortablejs@^1.9.0:
+  version "1.10.0"
+  resolved "https://registry.npm.taobao.org/sortablejs/download/sortablejs-1.10.0.tgz?cache=0&sync_timestamp=1568575491802&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsortablejs%2Fdownload%2Fsortablejs-1.10.0.tgz#0ebc054acff2486569194a2f975b2b145dd5e7d6"
+  integrity sha1-DrwFSs/ySGVpGUovl1srFF3V59Y=
+
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npm.taobao.org/source-list-map/download/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -9703,6 +9708,13 @@ vue@2.6.10:
   resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
   integrity sha1-pysaQqTYKnIepDjRtr9V5mGVxjc=
 
+vuedraggable@^2.23.0:
+  version "2.23.0"
+  resolved "https://registry.npm.taobao.org/vuedraggable/download/vuedraggable-2.23.0.tgz#1f4a5a601675a5dbf0d96ee61aebfffa43445262"
+  integrity sha1-H0paYBZ1pdvw2W7mGuv/+kNEUmI=
+  dependencies:
+    sortablejs "^1.9.0"
+
 vuex@3.1.1:
   version "3.1.1"
   resolved "https://registry.npm.taobao.org/vuex/download/vuex-3.1.1.tgz#0c264bfe30cdbccf96ab9db3177d211828a5910e"