✨ feat(search-bar): 初步完成搜索框功能

src/background/index.ts

@@ -1,9 +1,15 @@
 console.log('This is background page!');
 
-chrome.browserAction.onClicked.addListener((tab) => {
- console.log(tab);
- console.log('123');
+chrome.browserAction.onClicked.addListener(() => {
  chrome.tabs.create({ url: 'https://yuque.com' });
 });
 
-export default null;
+chrome.runtime.onMessage.addListener((message) => {
+ switch (message.action) {
+ case 'openOptionsPage':
+ chrome.runtime.openOptionsPage();
+ break;
+ default:
+ break;
+ }
+});

src/contentScripts/searchBar/app/index.tsx

@@ -1,9 +1,11 @@
 import type { FC } from 'react';
 import React, { useContext } from 'react';
 import { useYuqueTokenService, YuqueTokenService } from '@/services';
+import { Button, Space } from 'antd';
 
 import useSearchBarService, { SearchBarService } from './useSearchBarService';
 import { SearchService, useSearchService } from './useSearchService';
+import { useCheckTokenValidService } from './useCheckTokenValidService';
 
 import SearchInput from './SearchInput';
 import SearchResult from './SearchResult';
@@ -14,17 +16,59 @@ import styles from './style.less';
 const SearchBar: FC = () => {
  const { visible, searchBarRef } = useContext(SearchBarService);
 
+ const valid = useCheckTokenValidService();
+
  return visible ? (
  <div className={styles.container}>
  <div ref={searchBarRef} className={styles.bar}>
- <div className={styles.input}>
- <SearchInput />
- </div>
- <div className={styles.result}>
- <AnimatedHeight maxHeight={400}>
- <SearchResult />
- </AnimatedHeight>
- </div>
+ {valid ? (
+ <>
+ <div className={styles.input}>
+ <SearchInput />
+ </div>
+ <div className={styles.result}>
+ <AnimatedHeight maxHeight={400}>
+ <SearchResult />
+ </AnimatedHeight>
+ </div>
+ </>
+ ) : (
+ <Space direction={'vertical'} className={styles.invalid}>
+ <div>
+ <img
+ src="https://gw.alipayobjects.com/mdn/rms_15e52e/afts/img/A*TJ7dTIRWjVoAAAAAAAAAAAAAARQnAQ"
+ alt="无效的 token"
+ />
+ </div>
+ <div style={{ marginTop: 16 }}>
+ <h3>Token 无效</h3>
+ </div>
+ <div style={{ width: 400, textAlign: 'center' }}>
+ 没有配置 token 或 token 无效，请前往配置页添加 token。
+ 添加完成后请刷新页面并重试。
+ </div>
+ <Space style={{ marginTop: 16 }}>
+ <Button
+ onClick={() => {
+ window.open(
+ 'https://www.yuque.com/design-engineering/power-yuque/add-token',
+ );
+ }}
+ >
+ 查看教程
+ </Button>
+ <Button
+ type={'primary'}
+ onClick={() => {
+ console.log(chrome.runtime);
+ chrome.runtime.sendMessage({ action: 'openOptionsPage' });
+ }}
+ >
+ 立即添加
+ </Button>
+ </Space>
+ </Space>
+ )}
  </div>
  </div>
  ) : null;

src/contentScripts/searchBar/app/style.less

@@ -2,35 +2,40 @@
 
 .container {
  position: fixed;
- left: 0;
  top: 0;
+ left: 0;
  z-index: 999999;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
 }
 .bar {
  position: fixed;
-
  top: 50%;
  left: 50%;
- transform: translate(-50%, -50%);
-
  width: 600px;
+ transform: translate(-50%, -50%);
 }
 .input {
  .search-bar-shadow;
- border-radius: 4px;
+
  background: @background-color-base;
+ border-radius: 4px;
 }
-
 .result {
  margin-top: 8px;
+ overflow: hidden;
  border-radius: 4px;
  .search-bar-shadow;
- overflow: hidden;
 }
 
+.invalid {
+ width: 500px;
+ padding: 24px;
+ background: @white;
+ border-radius: 4px;
+ .flex-center-children;
+}
 [theme='light'] {
  .result {
  background: white;

src/contentScripts/searchBar/app/useCheckTokenValidService.ts

@@ -0,0 +1,26 @@
+import { useContext, useEffect } from 'react';
+
+import { SearchBarService } from './useSearchBarService';
+import { YuqueTokenService } from '@/services';
+
+/**
+ * SearchInput 需要的状态
+ */
+export const useCheckTokenValidService = () => {
+ const { visible } = useContext(SearchBarService);
+
+ const { checkTokenValid, valid } = useContext(YuqueTokenService);
+
+ useEffect(() => {
+ // 可见且 token 无效时 检查 token
+ if (visible && !valid) {
+ checkTokenValid();
+ }
+ }, [visible, checkTokenValid]);
+
+ useEffect(() => {
+ checkTokenValid();
+ }, []);
+
+ return valid;
+};

src/pages/options/Token/index.tsx

@@ -1,14 +1,18 @@
 import React, { useContext } from 'react';
-import { Button, Input, Space } from 'antd';
+import { Button, Input, message, Space } from 'antd';
 
 import { YuqueTokenService } from '@/services';
 
 import styles from './style.less';
 
 const Token = () => {
- const { setYuqueToken, token, syncToCloudStorage } = useContext(
- YuqueTokenService,
- );
+ const {
+ setYuqueToken,
+ token,
+ syncToCloudStorage,
+ checkTokenValid,
+ valid,
+ } = useContext(YuqueTokenService);
 
  return (
  <div className={styles.container}>
@@ -22,9 +26,27 @@ const Token = () => {
  }}
  onPressEnter={syncToCloudStorage}
  />
- <Button type={'primary'} onClick={syncToCloudStorage}>
- 保存
- </Button>
+ <Space>
+ <Button
+ onClick={async () => {
+ const data = await checkTokenValid();
+ if (data) {
+ message.success('Token 有效');
+ } else {
+ message.error('Token 无效，请重试');
+ }
+ }}
+ >
+ 测试 Token
+ </Button>
+ <Button
+ disabled={!valid}
+ type={'primary'}
+ onClick={syncToCloudStorage}
+ >
+ 保存
+ </Button>
+ </Space>
  </Space>
  </div>
  );

src/pages/options/index.tsx

@@ -28,17 +28,17 @@ const App = () => {
  <Menu.Item key="token">
  <KeyOutlined /> 语雀 Token
  </Menu.Item>
- <Menu.Item key="typographic">
+ <Menu.Item disabled key="typographic">
  <FontColorsOutlined />
  排版配置
  </Menu.Item>
 
- <Menu.Item key="dark">
+ <Menu.Item disabled key="dark">
  <BulbOutlined />
  深色模式
  </Menu.Item>
- <Menu.Item key="12">
- <SearchOutlined /> 搜索框
+ <Menu.Item disabled key="search-bar">
+ <SearchOutlined /> 高级搜索框
  </Menu.Item>
  </Menu>
 

src/services/useYuqueTokenService.ts

@@ -1,14 +1,16 @@
 import { useLocalStorageState } from 'ahooks';
-import { getServiceToken } from '@/utils';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { message } from 'antd';
+import request from 'umi-request';
+
+import { getServiceToken } from '@/utils';
 
 /**
  * Yuque Token
  */
 export const useYuqueTokenService = () => {
  // SearchBar 可见
- const [token, setYuqueToken] = useLocalStorageState('yuque_token', '');
+ const [token, setYuqueToken] = useLocalStorageState('PY_YUQUE_TOKEN', '');
 
  const syncToCloudStorage = useCallback(() => {
  chrome.storage?.sync.set({ yuque_token: token }, () => {
@@ -17,16 +19,42 @@ export const useYuqueTokenService = () => {
  message.success('保存成功');
  }, [token]);
 
+ const [valid, setValid] = useState(false);
+
+ /**
+ * 验证 token 是否有效
+ */
+ const checkTokenValid = useCallback(async () => {
+ // 如果验证过有效,就不验证了
+ if (valid) return;
+
+ try {
+ const data = await request.get('https://www.yuque.com/api/v2/hello', {
+ headers: {
+ 'X-Auth-Token': token || '',
+ 'Access-Control-Allow-Origin': '*',
+ },
+ getResponse: true,
+ });
+ console.log(data);
+ setValid(true);
+ return true;
+ } catch (e) {
+ setValid(false);
+ return false;
+ }
+ }, [token, valid]);
+
+ // 初始化时做一次检查
  useEffect(() => {
  chrome.storage?.sync.get((data) => {
- console.log(data);
  if (data.yuque_token !== token) {
  setYuqueToken(data.yuque_token);
  }
  });
  }, []);
 
- return { token, setYuqueToken, syncToCloudStorage };
+ return { token, setYuqueToken, syncToCloudStorage, valid, checkTokenValid };
 };
 
 // 这个服务将被注册至全局

src/utils/request.ts

@@ -60,6 +60,6 @@ export const request = extend({
  credentials: 'include', // 默认请求是否带上cookie
  headers: {
  'X-Auth-Token':
- localStorage.getItem('yuque_token')?.replace(/"/g, '') || '',
+ localStorage.getItem('PY_YUQUE_TOKEN')?.replace(/"/g, '') || '',
  },
 });