diff --git a/package-lock.json b/package-lock.json
index d872393..85c1555 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@mdui/icons": "^1.0.2",
         "axios": "^1.6.7",
         "electron-updater": "^6.1.7",
-        "mdui": "^2.0.3",
+        "mdui": "^2.0.6",
         "python-shell": "^5.0.0",
         "vue-clipboard3": "^2.0.0",
         "vue-router": "^4.2.5"
@@ -1599,9 +1599,9 @@
       }
     },
     "node_modules/@mdui/shared": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@mdui/shared/-/shared-1.0.3.tgz",
-      "integrity": "sha512-0pooQH3tFxG3Y5yo4WznpDOIMtLjxeDz7kxH8DI9M3cGabziEWN4kMZ6bO47pRF/Hh522U6QIL1CrSbFtQcrIw==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@mdui/shared/-/shared-1.0.5.tgz",
+      "integrity": "sha512-5ypE0/p5ijI0jG/ioXd38mXUjYnIU7hr7fMKLG7Zhugkw9A7rkhstLLDzvuH6tDOOsx8co5/lny1WFwSPagI4A==",
       "dependencies": {
         "@mdui/jq": "^3.0.1",
         "@open-wc/dedupe-mixin": "^1.4.0",
@@ -5214,15 +5214,15 @@
       }
     },
     "node_modules/mdui": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/mdui/-/mdui-2.0.3.tgz",
-      "integrity": "sha512-fQVPovZ/vHOePRz0XgMl6g3yMXJSnvvl5fzWdnFlbWpuFbFAEDk7zluQZO+2Ul4k8u/+6CaV6IxkyBojHtWGyQ==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/mdui/-/mdui-2.0.6.tgz",
+      "integrity": "sha512-OZowMR/df9vrwKTQ7d9LorEXe4+v9CKp88meTM1hj8ey5VWAOsqIQFXt7XcMSLPO7luDRk/tmeDqQa5YgP89ug==",
       "dependencies": {
         "@floating-ui/utils": "^0.1.6",
         "@lit-labs/motion": "^1.0.5",
         "@material/material-color-utilities": "^0.2.7",
         "@mdui/jq": "^3.0.1",
-        "@mdui/shared": "^1.0.3",
+        "@mdui/shared": "^1.0.5",
         "@open-wc/dedupe-mixin": "^1.4.0",
         "classcat": "^5.0.4",
         "is-promise": "^4.0.0",
diff --git a/package.json b/package.json
index 31eeb0f..255b4c1 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@mdui/icons": "^1.0.2",
     "axios": "^1.6.7",
     "electron-updater": "^6.1.7",
-    "mdui": "^2.0.3",
+    "mdui": "^2.0.6",
     "python-shell": "^5.0.0",
     "vue-clipboard3": "^2.0.0",
     "vue-router": "^4.2.5"
diff --git a/src/flask/scripts/__pycache__/bili.cpython-311.pyc b/src/flask/scripts/__pycache__/bili.cpython-311.pyc
index 9821520..c633be2 100644
Binary files a/src/flask/scripts/__pycache__/bili.cpython-311.pyc and b/src/flask/scripts/__pycache__/bili.cpython-311.pyc differ
diff --git a/src/flask/scripts/bili.py b/src/flask/scripts/bili.py
index a8eab31..729bc51 100644
--- a/src/flask/scripts/bili.py
+++ b/src/flask/scripts/bili.py
@@ -33,9 +33,12 @@ def convert(val):
     outputDir = val['output']  # output video file root
     
     CREATE_UP_DIR = val['isUp'] # 如果需要将同一个up的视频放在单独一个文件夹,则改为True
+    TRANS_DM = val['isDm']
     REMOVE_ORI = val['isDel']  # True if would like to delete origin cache file
 
-    logging.info(CREATE_UP_DIR)
+    logging.info("CREATE_UP_DIR: " + str(CREATE_UP_DIR))
+    logging.info("TRANS_DM: " + str(TRANS_DM))
+    logging.info("REMOVE_ORI: " + str(REMOVE_ORI))
 
     # collect failed
     failedVideos = []
@@ -108,13 +111,13 @@ def convert(val):
                     # videoQualityWidth = row_data.get('page_data', 'no page data').get('width', 'no width')
                     # videoQualityHeight = row_data.get('page_data', 'no page data').get('height', 'no height')
                     logging.info("Current resolution: " + str(videoQualityWidth) + '*' + str(videoQualityHeight))
+                    if TRANS_DM:
+                        # 转换后的danmaku.ass在与danmaku.xml同级目录下
+                        danmakuXMLPath = Path(PDir, "danmaku.xml")
+                        danmakuASSPath = Path(PDir, "danmaku.ass")
 
-                    # 转换后的danmaku.ass在与danmaku.xml同级目录下
-                    danmakuXMLPath = Path(PDir, "danmaku.xml")
-                    danmakuASSPath = Path(PDir, "danmaku.ass")
-
-                    danmaku2ass.Danmaku2ASS(str(danmakuXMLPath), 'Bilibili', str(danmakuASSPath), videoQualityWidth, videoQualityHeight, 0,
-                                'Microsoft YaHei', 40)
+                        danmaku2ass.Danmaku2ASS(str(danmakuXMLPath), 'Bilibili', str(danmakuASSPath), videoQualityWidth, videoQualityHeight, 0,
+                                    'Microsoft YaHei', 40)
 
                     for M4SDir in list(filter(Path.is_dir, Path.iterdir(PDir))):  # 视频一般放在分p文件夹中的数字文件夹中，一般数字文件夹仅一个
                         sepPath = M4SDir
@@ -163,11 +166,11 @@ def convert(val):
                                 logging.info(out.stdout)
                             Path.rename(filePathOrigin, filePathOutput)
                             logging.info("Output video: " + str(currentOutputDir))
-
-                        if Path.exists(danmakuPathOutput):
-                            Path.unlink(danmakuPathOutput) 
-                            logging.warning('Ass already exist, but replace it with new one.')
-                        Path.rename(danmakuASSPath, danmakuPathOutput)
+                        if TRANS_DM:
+                            if Path.exists(danmakuPathOutput):
+                                Path.unlink(danmakuPathOutput) 
+                                logging.warning('Ass already exist, but replace it with new one.')
+                            Path.rename(danmakuASSPath, danmakuPathOutput)
 
                 except Exception as e:
                     logging.error(e)
diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index 0c5467f..0e30c1e 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -2,8 +2,8 @@
 
 body {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  /* align-items: center; */
+  /* justify-content: center; */
   overflow: hidden;
   background-image: url('./bilibili.svg');
   /* background-color: transparent; */
@@ -35,6 +35,31 @@ code {
   margin-bottom: 80px;
 }
 
+.index-layout-left {
+  vertical-align: middle;
+  height: 100vh;
+}
+
+.index-layout-main {
+  /* min-height: 300px; */
+  height: 100vh;
+  width: 100vw;
+  align-items: center;
+  justify-content: center;
+  background-color: hsla(0, 0%, 100%, 0.5);
+}
+
+.main-card {
+  width: 400px;
+  padding: 20px 20px 20px 20px;
+  background-color: hsl(0, 0%, 100%);
+}
+
+.navi {
+  position: relative;
+  height: 100%;
+}
+
 .logo {
   margin-bottom: 20px;
   -webkit-user-drag: none;
@@ -115,6 +140,7 @@ code {
   font-size: 12px;
   line-height: 14px;
   opacity: 0.8;
+
   &:last-child {
     border: none;
   }
@@ -133,8 +159,9 @@ code {
 }
 
 @media (max-width: 350px) {
+
   .tip,
   .actions {
     display: none;
   }
-}
+}
\ No newline at end of file
diff --git a/src/renderer/src/components/Android.vue b/src/renderer/src/components/Android.vue
new file mode 100644
index 0000000..53cf063
--- /dev/null
+++ b/src/renderer/src/components/Android.vue
@@ -0,0 +1,177 @@
+<template>
+    <div class="text">
+        <mdui-card class="main-card">
+            <mdui-linear-progress :style="this.progress.visible"></mdui-linear-progress>
+            <mdui-text-field style="margin-bottom: 20px;" v-model="this.form.path" variant="outlined"
+                label="Cache Directory">
+                <mdui-button-icon slot="end-icon" @click="triggerPath('path')">
+                    <mdui-icon-attach-file></mdui-icon-attach-file>
+                </mdui-button-icon>
+            </mdui-text-field>
+            <mdui-text-field style="margin-bottom: 20px;" v-model="this.form.output" variant="outlined"
+                label="Output Directory">
+                <mdui-button-icon slot="end-icon" @click="triggerPath('output')">
+                    <mdui-icon-attach-file></mdui-icon-attach-file>
+                </mdui-button-icon>
+            </mdui-text-field>
+            <mdui-checkbox ref="checkup" checked>UP主独立文件夹</mdui-checkbox>
+            <mdui-checkbox ref="checkdm" checked>同时转换弹幕</mdui-checkbox>
+            <mdui-checkbox ref="checkdel" disabled>删除源</mdui-checkbox>
+            <mdui-button full-width variant="tonal" :disabled="this.btn" v-on:click="requestConvert">
+                <mdui-icon-autorenew></mdui-icon-autorenew>
+            </mdui-button>
+        </mdui-card>
+
+        <mdui-dialog fullscreen class="example-dialog">
+            <mdui-top-app-bar slot="header">
+                <mdui-button-icon @click="closeDialog()">
+                    <mdui-icon-close></mdui-icon-close>
+                </mdui-button-icon>
+                <mdui-top-app-bar-title>部分成功 以下路径出错</mdui-top-app-bar-title>
+                <mdui-button variant="text" @click="copyPath(JSON.stringify(failedItems))">复制到剪贴板</mdui-button>
+            </mdui-top-app-bar>
+            <mdui-list>
+                <mdui-list-subheader>点击项目可复制路径</mdui-list-subheader>
+                <mdui-list-item v-for="item in failedItems" @click="copyPath(item.path)">
+                    {{ item.path }}
+                    <span slot="description">{{ item.error }}</span>
+                </mdui-list-item>
+            </mdui-list>
+
+            <div class="clipboardInner" @click="copyPath" style="display: inline;"></div>
+        </mdui-dialog>
+        <div ref="clipboard" @click="handleCopy" style="display: inline; "></div>
+    </div>
+</template>
+<script>
+
+import { onMounted, ref } from 'vue';
+import useClipboard from "vue-clipboard3";
+import { snackbar } from 'mdui/functions/snackbar.js';
+import { getTheme } from 'mdui/functions/getTheme.js';
+import { setColorScheme } from 'mdui/functions/setColorScheme.js';
+import { hello, convert } from '@renderer/api';
+export default {
+    name: 'android',
+    setup() {
+        const clipboard = ref(null)
+        const { toClipboard } = useClipboard()
+        const text = ref('')
+        const handleCopy = async () => {
+            try {
+                console.log(text)
+                await toClipboard(text.value, document.querySelector(".clipboardInner"))
+                console.log('复制成功')
+            } catch (e) {
+                console.error(e);
+                console.error('复制失败')
+            }
+        }
+        const checkup = ref(null)
+        const checkdm = ref(null)
+        const checkdel = ref(null)
+
+        onMounted(() => {
+        })
+        return {
+            checkup: checkup,
+            checkdm: checkdm,
+            checkdel: checkdel,
+            clipboard: clipboard,
+            handleCopy,
+            text
+        }
+    },
+    data() {
+        return {
+            form: {
+                path: '',
+                output: '',
+                isUp: false,
+                isDm: false,
+                isDel: false
+            },
+
+            checked: false,
+            btn: false,
+            progress: {
+                visible: 'visibility: hidden',
+                value: '0'
+            },
+            failedItems: [],
+            clipboardTemp: ''
+        }
+    },
+    methods: {
+        check() {
+            if (this.checked === false) {
+                this.checked = true
+            }
+            console.log(this.checked)
+        },
+        // 触发主进程 打开文件选择
+        async triggerPath(val) {
+            const filePath = await window.electronAPI.openFile()
+            if (val === 'path') {
+                this.form.path = filePath
+            } else if (val === 'output') {
+                this.form.output = filePath
+            }
+        },
+        requestConvert() {
+            this.form.isUp = this.checkup.checked
+            this.form.isDm = this.checkdm.checked
+            this.form.isDel = this.checkdel.checked
+            console.log(this.form)
+            this.btn = true
+            this.progress.visible = ''
+            let form = JSON.parse(JSON.stringify(this.form));
+            convert({ form }).then((response) => {
+                // console.log(response.data)
+                // if (response.code === 200) {
+                // }
+                let res = response.data
+                console.log(res[1][0])
+                if (res[0] === 'true') {
+                    if (res[1].length === 0) {
+                        this.info('转换成功 :)')
+                    } else {
+                        console.log(res[1])
+                        // this.warn(res[1])
+                        this.failedItems = res[1]
+                        const dialog = document.querySelector(".example-dialog")
+                        dialog.open = true
+                    }
+                } else if (res[0] === 'false') {
+                    this.info('致命错误 请检查日志')
+                }
+                this.btn = false
+                this.progress.visible = 'visibility: hidden'
+            }).catch((error) => {
+                console.log(error);
+            });
+        },
+        copyPath(val) {
+            this.text = val
+            console.log(this.clipboard)
+            this.clipboard.click()
+        },
+        info(message) {
+            snackbar({
+                message: message
+            });
+        },
+        closeDialog() {
+            const dialog = document.querySelector(".example-dialog")
+            dialog.open = false
+            this.failedItems = []
+        }
+    },
+    created() {
+        setColorScheme('#80DAF6');
+    },
+    mounted() {
+        console.log(getTheme())
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/renderer/src/components/Index.vue b/src/renderer/src/components/Index.vue
index 9918263..2eacb0b 100644
--- a/src/renderer/src/components/Index.vue
+++ b/src/renderer/src/components/Index.vue
@@ -1,68 +1,39 @@
 <template>
-    <div class="text mdui-theme-auto">
-        <div class="">
-            <mdui-card style="width: 400px;padding: 20px 20px 20px 20px;background-color: hsla(0, 0%, 100%, 0.95);">
-                <mdui-linear-progress :style="this.progress.visible"></mdui-linear-progress>
-                <mdui-text-field style="margin-bottom: 20px;" v-model="this.form.path" variant="outlined"
-                    label="Cache Directory">
-                    <mdui-button-icon slot="end-icon" @click="triggerPath('path')">
-                        <mdui-icon-attach-file></mdui-icon-attach-file>
-                    </mdui-button-icon>
-                </mdui-text-field>
-                <mdui-text-field style="margin-bottom: 20px;" v-model="this.form.output" variant="outlined"
-                    label="Output Directory">
-                    <mdui-button-icon slot="end-icon" @click="triggerPath('output')">
-                        <mdui-icon-attach-file></mdui-icon-attach-file>
-                    </mdui-button-icon>
-                </mdui-text-field>
-                <mdui-checkbox ref="checkup" checked>UP主Folder</mdui-checkbox>
-                <mdui-checkbox ref="checkdel" disabled>删除源</mdui-checkbox>
-                <mdui-button full-width variant="tonal" :disabled="this.btn" v-on:click="requestConvert">
-                    <mdui-icon-autorenew></mdui-icon-autorenew>
-                </mdui-button>
-            </mdui-card>
+    <div class="mdui-theme-auto">
+        <mdui-layout>
+            <mdui-layout-item placement="left" class="index-layout-left">
+                <mdui-navigation-rail class="navi" value="android">
+                    <mdui-navigation-rail-item @click="gotoPostDetail('/index/android')" value="android">
+                        <mdui-icon-phone-android--outlined slot="icon"></mdui-icon-phone-android--outlined>
+                        Android</mdui-navigation-rail-item>
+                    <!-- <mdui-navigation-rail-item @click="gotoPostDetail('/index/windows')" value="windows">
+                        <mdui-icon-desktop-windows--outlined slot="icon"></mdui-icon-desktop-windows--outlined>
+                        Windows</mdui-navigation-rail-item>
+                    <mdui-navigation-rail-item @click="gotoPostDetail('/index/settings')" value="settings">
+                        <mdui-icon-settings--outlined slot="icon"></mdui-icon-settings--outlined>
+                        Settings</mdui-navigation-rail-item> -->
+                </mdui-navigation-rail>
+            </mdui-layout-item>
 
-            <mdui-dialog fullscreen class="example-dialog">
-                <mdui-top-app-bar slot="header">
-                    <mdui-button-icon @click="closeDialog()">
-                        <mdui-icon-close></mdui-icon-close>
-                    </mdui-button-icon>
-                    <mdui-top-app-bar-title>部分成功 以下路径出错</mdui-top-app-bar-title>
-                    <mdui-button variant="text" @click="copyPath(JSON.stringify(failedItems))">复制到剪贴板</mdui-button>
-                </mdui-top-app-bar>
-                <mdui-list>
-                    <mdui-list-subheader>点击项目可复制路径</mdui-list-subheader>
-                    <mdui-list-item v-for="item in failedItems" @click="copyPath(item.path)">
-                        {{ item.path }}
-                        <span slot="description">{{ item.error }}</span>
-                    </mdui-list-item>
-                </mdui-list>
-
-                <div class="clipboardInner" @click="copyPath" style="display: inline;"></div>
-            </mdui-dialog>
-            <div ref="clipboard" @click="handleCopy" style="display: inline; "></div>
-        </div>
+            <mdui-layout-main class="index-layout-main">
+                <router-view></router-view>
+            </mdui-layout-main>
+        </mdui-layout>
     </div>
 
-
-    <div class="actions mdui-theme-auto">
-        <div class="action">
-            <mdui-chip href="https://github.com/BlueCitizens/bilibili-app-cache-converter" target="_blank">
-                GitHub<img src="../assets/link.svg" style="height: 16px;padding-left: 8px;padding-top: 3px;" />
-            </mdui-chip>
-        </div>
-    </div>
     <Versions />
 </template>
 <script>
-import { onMounted, ref } from 'vue';
 import Versions from '@renderer/components/Versions.vue';
-import useClipboard from "vue-clipboard3";
 import 'mdui/mdui.css';
+import 'mdui/components/layout.js';
+import 'mdui/components/layout-item.js';
+import 'mdui/components/layout-main.js';
+import 'mdui/components/navigation-rail.js';
+import 'mdui/components/navigation-rail-item.js';
 import 'mdui/components/text-field.js';
 import 'mdui/components/button.js';
 import 'mdui/components/fab.js';
-import 'mdui/components/icon.js';
 import 'mdui/components/button-icon.js';
 import 'mdui/components/card.js';
 import 'mdui/components/chip.js';
@@ -74,135 +45,24 @@ import 'mdui/components/linear-progress.js';
 import 'mdui/components/list.js';
 import 'mdui/components/list-item.js';
 import 'mdui/components/list-subheader.js';
+import 'mdui/components/icon.js';
+import '@mdui/icons/phone-android--outlined.js';
+import '@mdui/icons/desktop-windows--outlined.js';
+import '@mdui/icons/settings--outlined.js';
 import '@mdui/icons/attach-file.js';
 import '@mdui/icons/autorenew.js';
 import '@mdui/icons/close.js';
-import { snackbar } from 'mdui/functions/snackbar.js';
-import { getTheme } from 'mdui/functions/getTheme.js';
-import { dialog } from 'mdui/functions/dialog.js';
-import { setColorScheme } from 'mdui/functions/setColorScheme.js';
-import { hello, convert } from '@renderer/api';
-
 
 
 export default {
+
     name: 'index',
     components: { Versions },
-    setup() {
-        const clipboard = ref(null)
-        const { toClipboard } = useClipboard()
-        const text = ref('')
-        const handleCopy = async () => {
-            try {
-                console.log(text)
-                await toClipboard(text.value, document.querySelector(".clipboardInner"))
-                console.log('复制成功')
-            } catch (e) {
-                console.error(e);
-                console.error('复制失败')
-            }
-        }
-        const checkup = ref(null)
-        const checkdel = ref(null)
-
-        onMounted(() => {
-        })
-        return {
-            checkup: checkup,
-            checkdel: checkdel,
-            clipboard: clipboard,
-            handleCopy,
-            text
-        }
-    },
-    data() {
-        return {
-            form: {
-                path: '',
-                output: '',
-                isUp: false,
-                isDel: false
-            },
-
-            checked: false,
-            btn: false,
-            progress: {
-                visible: 'visibility: hidden',
-                value: '0'
-            },
-            failedItems: [],
-            clipboardTemp: ''
-        }
-    },
     methods: {
-        check() {
-            if (this.checked === false) {
-                this.checked = true
-            }
-            console.log(this.checked)
-        },
-        // 触发主进程 打开文件选择
-        async triggerPath(val) {
-            const filePath = await window.electronAPI.openFile()
-            if (val === 'path') {
-                this.form.path = filePath
-            } else if (val === 'output') {
-                this.form.output = filePath
-            }
-        },
-        requestConvert() {
-            this.form.isUp = this.checkup.checked
-            this.form.isDel = this.checkdel.checked
-            console.log(this.form)
-            this.btn = true
-            this.progress.visible = ''
-            let form = JSON.parse(JSON.stringify(this.form));
-            convert({ form }).then((response) => {
-                // console.log(response.data)
-                // if (response.code === 200) {
-                // }
-                let res = response.data
-                console.log(res[1][0])
-                if (res[0] === 'true') {
-                    if (res[1].length === 0) {
-                        this.info('转换成功 :)')
-                    } else {
-                        console.log(res[1])
-                        // this.warn(res[1])
-                        this.failedItems = res[1]
-                        const dialog = document.querySelector(".example-dialog")
-                        dialog.open = true
-                    }
-                } else if (res[0] === 'false') {
-                    this.info('致命错误 请检查日志')
-                }
-                this.btn = false
-                this.progress.visible = 'visibility: hidden'
-            }).catch((error) => {
-                console.log(error);
-            });
-        },
-        copyPath(val) {
-            this.text = val
-            console.log(this.clipboard)
-            this.clipboard.click()
-        },
-        info(message) {
-            snackbar({
-                message: message
-            });
+        gotoPostDetail(post) {
+            console.log(post)
+            this.$router.push(post);
         },
-        closeDialog() {
-            const dialog = document.querySelector(".example-dialog")
-            dialog.open = false
-            this.failedItems = []
-        }
-    },
-    created() {
-        setColorScheme('#80DAF6');
-    },
-    mounted() {
-        console.log(getTheme())
     }
 }
 
diff --git a/src/renderer/src/components/Settings.vue b/src/renderer/src/components/Settings.vue
new file mode 100644
index 0000000..e5429fc
--- /dev/null
+++ b/src/renderer/src/components/Settings.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="text">
+        <mdui-card class="main-card">
+            <mdui-tabs placement="top" value="tab-1">
+                <mdui-tab value="tab-1">安卓版设置</mdui-tab>
+                <mdui-tab value="tab-2">WIN版设置</mdui-tab>
+                <mdui-tab value="tab-3">About</mdui-tab>
+
+                <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
+                <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
+                <mdui-tab-panel slot="panel" value="tab-3">
+                    <div class="action">
+                        <mdui-chip href="https://github.com/BlueCitizens/bilibili-app-cache-converter" target="_blank">
+                            GitHub<img src="../assets/link.svg"
+                                style="height: 16px;padding-left: 8px;padding-top: 3px;" />
+                        </mdui-chip>
+                    </div>
+                </mdui-tab-panel>
+            </mdui-tabs>
+        </mdui-card>
+    </div>
+</template>
+
+<script>
+import 'mdui/components/tabs.js';
+import 'mdui/components/tab.js';
+import 'mdui/components/tab-panel.js';
+</script>
\ No newline at end of file
diff --git a/src/renderer/src/components/Windows.vue b/src/renderer/src/components/Windows.vue
new file mode 100644
index 0000000..8e1cefb
--- /dev/null
+++ b/src/renderer/src/components/Windows.vue
@@ -0,0 +1,172 @@
+<template>
+    <div class="text">
+        <mdui-card class="main-card">
+            <mdui-linear-progress :style="this.progress.visible"></mdui-linear-progress>
+            <mdui-text-field style="margin-bottom: 20px;" v-model="this.form.path" variant="outlined"
+                label="Cache Directory">
+                <mdui-button-icon slot="end-icon" @click="triggerPath('path')">
+                    <mdui-icon-attach-file></mdui-icon-attach-file>
+                </mdui-button-icon>
+            </mdui-text-field>
+            <mdui-text-field style="margin-bottom: 20px;" v-model="this.form.output" variant="outlined"
+                label="Output Directory">
+                <mdui-button-icon slot="end-icon" @click="triggerPath('output')">
+                    <mdui-icon-attach-file></mdui-icon-attach-file>
+                </mdui-button-icon>
+            </mdui-text-field>
+            <mdui-checkbox ref="checkup" checked>UP主Folder</mdui-checkbox>
+            <mdui-checkbox ref="checkdel" disabled>删除源</mdui-checkbox>
+            <mdui-button full-width variant="tonal" :disabled="this.btn" v-on:click="requestConvert">
+                <mdui-icon-autorenew></mdui-icon-autorenew>
+            </mdui-button>
+        </mdui-card>
+
+        <mdui-dialog fullscreen class="example-dialog">
+            <mdui-top-app-bar slot="header">
+                <mdui-button-icon @click="closeDialog()">
+                    <mdui-icon-close></mdui-icon-close>
+                </mdui-button-icon>
+                <mdui-top-app-bar-title>部分成功 以下路径出错</mdui-top-app-bar-title>
+                <mdui-button variant="text" @click="copyPath(JSON.stringify(failedItems))">复制到剪贴板</mdui-button>
+            </mdui-top-app-bar>
+            <mdui-list>
+                <mdui-list-subheader>点击项目可复制路径</mdui-list-subheader>
+                <mdui-list-item v-for="item in failedItems" @click="copyPath(item.path)">
+                    {{ item.path }}
+                    <span slot="description">{{ item.error }}</span>
+                </mdui-list-item>
+            </mdui-list>
+
+            <div class="clipboardInner" @click="copyPath" style="display: inline;"></div>
+        </mdui-dialog>
+        <div ref="clipboard" @click="handleCopy" style="display: inline; "></div>
+    </div>
+</template>
+<script>
+
+import { onMounted, ref } from 'vue';
+import useClipboard from "vue-clipboard3";
+import { snackbar } from 'mdui/functions/snackbar.js';
+import { getTheme } from 'mdui/functions/getTheme.js';
+import { setColorScheme } from 'mdui/functions/setColorScheme.js';
+import { hello, convert } from '@renderer/api';
+export default {
+    name: 'android',
+    setup() {
+        const clipboard = ref(null)
+        const { toClipboard } = useClipboard()
+        const text = ref('')
+        const handleCopy = async () => {
+            try {
+                console.log(text)
+                await toClipboard(text.value, document.querySelector(".clipboardInner"))
+                console.log('复制成功')
+            } catch (e) {
+                console.error(e);
+                console.error('复制失败')
+            }
+        }
+        const checkup = ref(null)
+        const checkdel = ref(null)
+
+        onMounted(() => {
+        })
+        return {
+            checkup: checkup,
+            checkdel: checkdel,
+            clipboard: clipboard,
+            handleCopy,
+            text
+        }
+    },
+    data() {
+        return {
+            form: {
+                path: '',
+                output: '',
+                isUp: false,
+                isDel: false
+            },
+
+            checked: false,
+            btn: false,
+            progress: {
+                visible: 'visibility: hidden',
+                value: '0'
+            },
+            failedItems: [],
+            clipboardTemp: ''
+        }
+    },
+    methods: {
+        check() {
+            if (this.checked === false) {
+                this.checked = true
+            }
+            console.log(this.checked)
+        },
+        // 触发主进程 打开文件选择
+        async triggerPath(val) {
+            const filePath = await window.electronAPI.openFile()
+            if (val === 'path') {
+                this.form.path = filePath
+            } else if (val === 'output') {
+                this.form.output = filePath
+            }
+        },
+        requestConvert() {
+            this.form.isUp = this.checkup.checked
+            this.form.isDel = this.checkdel.checked
+            console.log(this.form)
+            this.btn = true
+            this.progress.visible = ''
+            let form = JSON.parse(JSON.stringify(this.form));
+            convert({ form }).then((response) => {
+                // console.log(response.data)
+                // if (response.code === 200) {
+                // }
+                let res = response.data
+                console.log(res[1][0])
+                if (res[0] === 'true') {
+                    if (res[1].length === 0) {
+                        this.info('转换成功 :)')
+                    } else {
+                        console.log(res[1])
+                        // this.warn(res[1])
+                        this.failedItems = res[1]
+                        const dialog = document.querySelector(".example-dialog")
+                        dialog.open = true
+                    }
+                } else if (res[0] === 'false') {
+                    this.info('致命错误 请检查日志')
+                }
+                this.btn = false
+                this.progress.visible = 'visibility: hidden'
+            }).catch((error) => {
+                console.log(error);
+            });
+        },
+        copyPath(val) {
+            this.text = val
+            console.log(this.clipboard)
+            this.clipboard.click()
+        },
+        info(message) {
+            snackbar({
+                message: message
+            });
+        },
+        closeDialog() {
+            const dialog = document.querySelector(".example-dialog")
+            dialog.open = false
+            this.failedItems = []
+        }
+    },
+    created() {
+        setColorScheme('#80DAF6');
+    },
+    mounted() {
+        console.log(getTheme())
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/renderer/src/router/routers.js b/src/renderer/src/router/routers.js
index 34d5c21..c0a031c 100644
--- a/src/renderer/src/router/routers.js
+++ b/src/renderer/src/router/routers.js
@@ -3,13 +3,31 @@
 const routes = [
     {
         path: '/',
-        redirect: '/index',
+        redirect: '/index/android',
     },
     {
         path: '/index',
-        component:()=> import('@renderer/components/Index.vue')
+        component: () => import('@renderer/components/Index.vue'),
+        children: [
+            {
+                path: "android",
+                name: "android",
+                component: () => import('@renderer/components/Android.vue')
+            },
+            {
+                path: "windows",
+                name: "windows",
+                component: () => import('@renderer/components/Windows.vue')
+            },
+            {
+                path: "settings",
+                name: "settings",
+                component: () => import('@renderer/components/Settings.vue')
+            },
+        ]
     },
 
+
 ]
 
 export default routes