diff --git a/src/ZonyLrcTools.Cli/Commands/SubCommand/SearchCommand.cs b/src/ZonyLrcTools.Cli/Commands/SubCommand/SearchCommand.cs
new file mode 100644
index 0000000..77fdcb8
--- /dev/null
+++ b/src/ZonyLrcTools.Cli/Commands/SubCommand/SearchCommand.cs
@@ -0,0 +1,29 @@
+using System.Threading.Tasks;
+using McMaster.Extensions.CommandLineUtils;
+using Microsoft.Extensions.Logging;
+
+namespace ZonyLrcTools.Cli.Commands.SubCommand;
+
+[Command("search", Description = "手动指定信息，用于搜索歌词数据。")]
+public class SearchCommand : ToolCommandBase
+{
+    private readonly ILogger<SearchCommand> _logger;
+
+    #region > Options <
+
+    public string Name { get; set; }
+
+    public string Artist { get; set; }
+
+    #endregion
+
+    public SearchCommand(ILogger<SearchCommand> logger)
+    {
+        _logger = logger;
+    }
+
+    protected override Task<int> OnExecuteAsync(CommandLineApplication app)
+    {
+        return base.OnExecuteAsync(app);
+    }
+}
\ No newline at end of file
diff --git a/src/ui/src/App.vue b/src/ui/src/App.vue
index d59bf87..a319e79 100644
--- a/src/ui/src/App.vue
+++ b/src/ui/src/App.vue
@@ -9,13 +9,7 @@
           color="grey lighten-4"
           class="pa-4"
       >
-        <v-avatar
-            class="mb-4"
-            color="grey darken-1"
-            size="64"
-        ></v-avatar>
-
-        <div>john@vuetifyjs.com</div>
+        <div>ZonyLrcTools-X</div>
       </v-sheet>
 
       <v-divider></v-divider>
diff --git a/src/ui/src/components/HelloWorld.vue b/src/ui/src/components/HelloWorld.vue
deleted file mode 100644
index 8e95071..0000000
--- a/src/ui/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <v-container>
-    <v-row class="text-center">
-      <v-col cols="12">
-        <v-img
-          :src="require('../assets/logo.svg')"
-          class="my-3"
-          contain
-          height="200"
-        />
-      </v-col>
-
-      <v-col class="mb-4">
-        <h1 class="display-2 font-weight-bold mb-3">
-          Welcome to Vuetify
-        </h1>
-
-        <p class="subheading font-weight-regular">
-          For help and collaboration with other Vuetify developers,
-          <br>please join our online
-          <a
-            href="https://community.vuetifyjs.com"
-            target="_blank"
-          >Discord Community</a>
-        </p>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          What's next?
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(next, i) in whatsNext"
-            :key="i"
-            :href="next.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ next.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Important Links
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(link, i) in importantLinks"
-            :key="i"
-            :href="link.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ link.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Ecosystem
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(eco, i) in ecosystem"
-            :key="i"
-            :href="eco.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ eco.text }}
-          </a>
-        </v-row>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script>
-  export default {
-    name: 'HelloWorld',
-
-    data: () => ({
-      ecosystem: [
-        {
-          text: 'vuetify-loader',
-          href: 'https://github.com/vuetifyjs/vuetify-loader',
-        },
-        {
-          text: 'github',
-          href: 'https://github.com/vuetifyjs/vuetify',
-        },
-        {
-          text: 'awesome-vuetify',
-          href: 'https://github.com/vuetifyjs/awesome-vuetify',
-        },
-      ],
-      importantLinks: [
-        {
-          text: 'Documentation',
-          href: 'https://vuetifyjs.com',
-        },
-        {
-          text: 'Chat',
-          href: 'https://community.vuetifyjs.com',
-        },
-        {
-          text: 'Made with Vuetify',
-          href: 'https://madewithvuejs.com/vuetify',
-        },
-        {
-          text: 'Twitter',
-          href: 'https://twitter.com/vuetifyjs',
-        },
-        {
-          text: 'Articles',
-          href: 'https://medium.com/vuetify',
-        },
-      ],
-      whatsNext: [
-        {
-          text: 'Explore components',
-          href: 'https://vuetifyjs.com/components/api-explorer',
-        },
-        {
-          text: 'Select a layout',
-          href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
-        },
-        {
-          text: 'Frequently Asked Questions',
-          href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
-        },
-      ],
-    }),
-  }
-</script>
diff --git a/src/ui/src/views/HomeView.vue b/src/ui/src/views/HomeView.vue
index cdf3a46..cd99c38 100644
--- a/src/ui/src/views/HomeView.vue
+++ b/src/ui/src/views/HomeView.vue
@@ -1,6 +1,29 @@
 <template>
-  <div class="Home">
-    <h1>This is a home page</h1>
+  <div class="container">
+    <div class="button-group">
+      <v-btn @click="openDir">
+        扫描文件
+      </v-btn>
+      <input type="file" class="d-none">
+
+      <v-btn class="ml-5" disabled>开始下载</v-btn>
+    </div>
+    <div class="file-list mt-5">
+      <v-data-table
+          :headers="headers"
+          :items="items"
+          class="elevation-1"
+      >
+        <template v-slot:item.status="{ item }">
+          <v-icon v-if="item.status === 'success'" color="success">mdi-check</v-icon>
+          <v-icon v-else-if="item.status === 'error'" color="error">mdi-close</v-icon>
+          <v-icon v-else>mdi-minus</v-icon>
+        </template>
+      </v-data-table>
+      <div class="output mt-8">
+        <v-textarea disabled outlined label="日志信息" value="输出"/>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -8,5 +31,40 @@
 
 export default {
   name: 'Home',
+  data() {
+    return {
+      headers: [
+        {
+          text: '文件名',
+          align: 'start',
+          sortable: false,
+          value: 'name',
+        },
+        {text: '大小', value: 'size'},
+        {text: '状态', value: 'status'},
+        {text: '操作', value: 'action'},
+      ],
+      items: [
+        {
+          name: 'Frozen Yogurt',
+          size: 159,
+          status: 'success',
+          action: 4.0,
+        },
+        {
+          name: 'Ice cream sandwich',
+          size: 237,
+          status: 'error',
+          action: 4.3,
+        },
+      ],
+    }
+  },
+  methods: {
+    openDir() {
+
+    }
+  },
+  computed: {}
 }
 </script>
diff --git a/src/ui/src/views/SettingView.vue b/src/ui/src/views/SettingView.vue
index 786ef44..5b69a32 100644
--- a/src/ui/src/views/SettingView.vue
+++ b/src/ui/src/views/SettingView.vue
@@ -1,11 +1,132 @@
 <template>
-  <div class="Setting">
-    <h1>This is a setting page</h1>
-  </div>
+
+  <v-list subheader flat two-line>
+    <v-subheader>网络代理</v-subheader>
+
+    <v-list-item>
+      <v-switch v-model="proxyEnabled" label="启用代理"/>
+    </v-list-item>
+    <v-list-item>
+      <v-text-field :disabled="'false'" v-model="proxyHost" label="代理地址" placeholder="请输入代理服务器的地址，例如 127.0.0.1:1080。"/>
+    </v-list-item>
+    <v-list-item>
+      <v-text-field :disabled="'false'" v-model="proxyPort" label="更新检查地址" placeholder="请输入更新检查地址，默认情况下无需变更。"/>
+    </v-list-item>
+
+    <v-divider></v-divider>
+    <v-subheader>全局下载设置</v-subheader>
+    <v-list-item>
+      <v-switch label="是否启用翻译歌词" v-model="translateLrc"/>
+    </v-list-item>
+    <v-list-item>
+      <v-switch label="仅输出翻译歌词" v-model="onlyTranslateLrc"/>
+    </v-list-item>
+    <v-list-item>
+      <v-switch label="跳过歌词文件已存在的歌曲" v-model="skipExistLrc"/>
+    </v-list-item>
+    <v-list-item>
+      <v-switch label="双语歌词合并展示" v-model="mergeLrc"/>
+    </v-list-item>
+    <v-list-item>
+      <!--文件编码-->
+      <v-select v-model="lrcEncoding" :items="lrcEncodings" label="歌词文件编码" placeholder="请选择歌词文件编码"/>
+    </v-list-item>
+    <v-list-item>
+      <!--换行符下拉选择-->
+      <v-row>
+        <v-col>
+          <v-select label="换行符" v-model="lineBreak" :items="lineBreakOptions" item-text="label"
+                    item-value="value"/>
+        </v-col>
+      </v-row>
+    </v-list-item>
+
+    <v-divider></v-divider>
+    <v-list-item>
+      <v-row>
+        <v-col cols="6">
+          <v-subheader>歌词下载器设置</v-subheader>
+          <v-list-item>
+            <v-data-table hide-default-footer :headers="lyricDownloaderHeaders" :items="lyricDownloader"
+                          class="elevation-1" disable-sort>
+              <template v-slot:item.enabled="{ item }">
+                <v-simple-checkbox v-model="item.isEnabled" color="primary"/>
+              </template>
+            </v-data-table>
+          </v-list-item>
+        </v-col>
+
+        <v-col cols="6">
+          <v-subheader>标签解析器设置</v-subheader>
+          <v-list-item>
+            <v-data-table hide-default-footer :headers="tagParserHeaders" :items="tagParser" class="elevation-1"
+                          disable-sort>
+              <template v-slot:item.enabled="{ item }">
+                <v-simple-checkbox v-model="item.enabled"></v-simple-checkbox>
+              </template>
+            </v-data-table>
+          </v-list-item>
+        </v-col>
+      </v-row>
+    </v-list-item>
+
+    <v-divider class="mt-5"></v-divider>
+    <v-subheader>屏蔽字典</v-subheader>
+    <v-list-item>
+      <v-switch label="启用屏蔽字典" v-model="enableBlockDict"/>
+    </v-list-item>
+    <v-list-item>
+      <v-text-field v-model="blockDict" label="屏蔽字典路径" placeholder="请选择屏蔽字典的文件路径。"/>
+      <v-btn icon @click="openBlockDict">
+        <v-icon>mdi-folder</v-icon>
+      </v-btn>
+    </v-list-item>
+
+    <v-divider></v-divider>
+    <v-subheader>扫描设置</v-subheader>
+    <v-list-item>
+      <v-text-field v-model="fileSearchSuffix" label="文件搜索后缀"
+                    placeholder="请输入文件搜索后缀，多个后缀以英文逗号分隔。"/>
+    </v-list-item>
+
+  </v-list>
+
 </template>
 
 <script>
 export default {
-  name: "Setting"
+  name: "Setting",
+  data: () => {
+    return {
+      proxyEnabled: false,
+      proxyHost: "",
+      proxyPort: "",
+      mergeLrc: false,
+      lineBreak: "lf",
+      lineBreakOptions: [
+        {label: "LF", value: "lf"},
+        {label: "CRLF", value: "crlf"},
+      ],
+      lrcEncoding: "utf-8",
+      lyricDownloaderHeaders: [
+        {text: "启用", value: "isEnabled"},
+        {text: "歌词源", value: "name"},
+        {text: "搜索深度", value: "searchDepth"},
+        {text: "优先级", value: "priority"},
+      ],
+      lyricDownloader: [
+        {isEnabled: true, name: "网易云音乐", searchDepth: 10, priority: 1},
+      ],
+      tagParserHeaders: [
+        {text: "启用", value: "enabled", sortable: false, width: "10%"},
+        {text: "标签解析器", value: "name", sortable: false, width: "90%"},
+      ],
+      tagParser: [
+        {name: '正则表达式解析器', enabled: true},
+      ],
+    }
+  },
+  computed: {},
+  methods: {},
 };
 </script>
\ No newline at end of file