Merge pull request #217 from 1129921824/master

实现简易的搜索功能

feature/src/languages/langs/en-US.ts

@@ -4,6 +4,7 @@ export default {
       market: {
         title: 'Market',
         search: 'Search Plugins',
+        searchResult: 'Search Results',
         explore: 'Explore',
         efficiency: 'Efficiency',
         searchTool: 'Search Tools',

feature/src/languages/langs/zh-CN.ts

@@ -4,6 +4,7 @@ export default {
       market: {
         title: '插件市场',
         search: '搜索插件',
+        searchResult: '搜索结果',
         explore: '探索',
         efficiency: '效率',
         searchTool: '搜索工具',

feature/src/store/index.ts

@@ -16,6 +16,7 @@ export default createStore({
   state: {
     totalPlugins: [],
     localPlugins: [],
+    searchValue: '',
   },
   mutations: {
     commonUpdate(state: any, payload) {
@@ -23,6 +24,9 @@ export default createStore({
         state[key] = payload[key];
       });
     },
+    setSearchValue(state: any, payload) {
+      state.searchValue = payload;
+    },
   },
   actions: {
     async init({ commit }) {

feature/src/views/market/components/result.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="result">
+    <PluginList
+      v-if="result && !!result.length"
+      @downloadSuccess="downloadSuccess"
+      :title="$t('feature.market.searchResult')"
+      :list="result"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import PluginList from './plugin-list.vue';
+
+import { useStore } from 'vuex';
+const store = useStore();
+
+const totalPlugins = computed(() => store.state.totalPlugins);
+const searchValue = computed(() => store.state.searchValue);
+
+const result = computed(() => {
+  if (searchValue.value.trim().length > 0) {
+    const pattern = new RegExp(searchValue.value);
+    return totalPlugins.value.filter((plugin) => {
+      if (plugin.pluginName.match(pattern)) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+  } else {
+    return totalPlugins.value;
+  }
+});
+</script>
+
+<style lang="less">
+.result {
+  width: 100%;
+  height: 100vh;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+</style>

feature/src/views/market/index.vue

@@ -73,6 +73,7 @@ import Worker from './components/worker.vue';
 import Tools from './components/tools.vue';
 import Dev from './components/devlopment.vue';
 import Image from './components/image.vue';
+import Result from './components/result.vue';
 
 const Components = {
   finder: Finder,
@@ -81,6 +82,7 @@ const Components = {
   image: Image,
   tools: Tools,
   dev: Dev,
+  result: Result,
 };
 
 const state = reactive({
@@ -93,6 +95,11 @@ const store = useStore();
 const totalPlugins = computed(() => store.state.totalPlugins);
 
 const { searchValue, current } = toRefs(state);
+
+const onSearch = (searchValue: string) => {
+  state.current = ['result'];
+  store.commit('setSearchValue', searchValue);
+};
 </script>
 
 <style lang="less" scoped>
@@ -104,9 +111,11 @@ const { searchValue, current } = toRefs(state);
   width: 100%;
   overflow: hidden;
   background: var(--color-menu-bg);
-  height: calc(~"100vh - 46px");
+  height: calc(~'100vh - 46px');
   .search {
-    :deep(.ant-btn), :deep(.ant-input), :deep(.ant-input-group-addon) {
+    :deep(.ant-btn),
+    :deep(.ant-input),
+    :deep(.ant-input-group-addon) {
       color: var(--ant-primary-color) !important;
       background: var(--color-input-hover);
       border-color: var(--color-border-light);