🐛 fix: 修正 search bar 开发时配置

arvinxx · Feb 14, 2021 · fce42d1 · fce42d1
1 parent f4f55fe
commit fce42d1
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 15 deletions.
diff --git a/config/config.ts b/config/config.ts
@@ -10,6 +10,9 @@ export default defineConfig({
  theme: resolve(__dirname, '../src/theme'),
  },
  theme,
+ define: {
+ 'process.env.SEARCH_BAR': process.env.SEARCH_BAR,
+ },
  // chrome 插件配置项
  extensions: {
  name: `Power Yuque${isDev ? ' DEV' : ''}`,

diff --git a/src/contentScripts/searchBar/app/SearchResult/useKeyboardResult.ts b/src/contentScripts/searchBar/app/SearchResult/useKeyboardResult.ts
@@ -18,25 +18,25 @@ export const useKeyboardResult = () => {
 
  const [resultIndex, setResultIndex] = useState(0);
  const resultRef = useRef<HTMLDivElement>(null);
- console.log('real', resultIndex);
 
  /**
  * 处理结果区高度
  */
- const scrollResultContainer = (index: number, back?: boolean) => {
+ const scrollResultContainer = (back?: boolean) => {
  const { current: ctn } = resultRef;
  if (!ctn) return;
 
  const step = 77;
 
- if (index === result.length) {
- ctn.scrollTop = 0;
- }
-
  if (!back) {
- if (index > 3) {
+ if (resultIndex > 3) {
  ctn.scrollTop += step;
  }
+
+ // 最后一个
+ if (resultIndex === result.length - 1) {
+ ctn.scrollTop = 0;
+ }
  } else if (ctn.scrollTop > 0) {
  ctn.scrollTop -= step;
  }
@@ -65,7 +65,6 @@ export const useKeyboardResult = () => {
  // 将焦点切换到 Options
  const onKeyDown = (event: KeyboardEvent) => {
  if (focusKey !== 'result') return;
- console.log(resultIndex);
 
  switch (event.key) {
  case 'Tab':
@@ -74,7 +73,7 @@ export const useKeyboardResult = () => {
  break;
  case 'ArrowDown':
  event.preventDefault();
- scrollResultContainer(resultIndex + 1);
+ scrollResultContainer();
  switchResultIndex();
  break;
  case 'ArrowUp':
@@ -83,7 +82,7 @@ export const useKeyboardResult = () => {
  if (resultIndex === 0) {
  focusOnOptions();
  } else {
- scrollResultContainer(resultIndex - 1, true);
+ scrollResultContainer(true);
  switchResultIndex(true);
  }
  break;

diff --git a/src/contentScripts/searchBar/app/index.tsx b/src/contentScripts/searchBar/app/index.tsx
@@ -12,7 +12,7 @@ import SearchInput from './SearchInput';
 import SearchResult from './SearchResult';
 
 import styles from './style.less';
-import { isDev } from '@/utils';
+import { isDevSearchBar } from '@/utils';
 
 const SearchBar: FC = () => {
  const { visible, searchBarRef } = useContext(SearchBarService);
@@ -77,7 +77,7 @@ const SearchBar: FC = () => {
 
 export default () => (
  <YuqueTokenService.Provider value={useYuqueTokenService()}>
- <SearchBarService.Provider value={useSearchBarService(isDev)}>
+ <SearchBarService.Provider value={useSearchBarService(isDevSearchBar)}>
  <SearchService.Provider value={useSearchService()}>
  <SearchBar />
  </SearchService.Provider>

diff --git a/src/contentScripts/searchBar/app/useSearchService.ts b/src/contentScripts/searchBar/app/useSearchService.ts
@@ -14,7 +14,7 @@ import {
  distinctUntilChanged,
 } from 'rxjs/operators';
 
-import { getServiceToken, request } from '@/utils';
+import { getServiceToken, isDevSearchBar, request } from '@/utils';
 
 /**
  * SearchInput 需要的状态
@@ -92,8 +92,10 @@ export const useSearchService = () => {
 
  // TEST 用于测试 list 的代码
  useEffect(() => {
- // @ts-ignore
- onSearchEvent({ target: { value: '设计' } });
+ if (isDevSearchBar) {
+ // @ts-ignore
+ onSearchEvent({ target: { value: '设计' } });
+ }
  }, []);
 
  return {

diff --git a/src/utils/env.ts b/src/utils/env.ts
@@ -1,5 +1,6 @@
 export const isDev = process.env.NODE_ENV === 'development';
 export const isTest = process.env.NODE_ENV === 'test';
+export const isDevSearchBar = process.env.SEARCH_BAR === '1';
 
 export const yuqueToken = isTest
  ? process.env.YUQUE_TOKEN!