update trending page

babel.config.js

@@ -15,6 +15,8 @@ module.exports = {
         customName: name => {
           if(name === 'at-list-item'){
             name = 'at-list/item'
+          } else if(name === 'at-action-sheet-item'){
+            name = 'at-action-sheet/body/item'
           }
           return `taro-ui/lib/components/${name.slice(3)}`
         },
@@ -25,9 +27,12 @@ module.exports = {
           if(name === 'at-tabs-pane'){
             name = 'at-tabs'
           }
-          if(name === 'at-list-item'){
+          else if(name === 'at-list-item'){
             name = 'at-list'
           }
+          else if(name === 'at-action-sheet-item'){
+            name = 'at-action-sheet'
+          }
           return `taro-ui/dist/style/components/${name.slice(3)}.scss`
         }
       },

src/components/empty/index.module.scss

@@ -3,11 +3,11 @@
   width: 100vw;
   display: flex;
   justify-content: center;
-  align-items: center;
+
   background: $bg;
 }
 .inner {
-  margin: auto;
+  margin: 40px auto;
 }
 
 .img {
@@ -20,3 +20,7 @@
   font-size: 35px;
   color: rgb(88, 88, 88);
 }
+
+.tips {
+  color: $primary;
+}

src/components/empty/index.tsx

@@ -1,17 +1,20 @@
 import img from '@/assets/spidertocat.png';
-import { Image, View } from '@tarojs/components';
-import Taro from '@tarojs/taro';
+import { Image, Text, View } from '@tarojs/components';
 import { FC } from 'react';
-import { AtButton } from 'taro-ui';
 import styles from './index.module.scss';
 
 const Empty: FC = () => {
   return (
     <View className={styles.wrap}>
       <View className={styles.inner}>
         <Image src={img} className={styles.img}></Image>
-        <View className={styles.desc}>没有数据</View>
-        <View>
+        <View className={styles.desc}>
+          <Text>没有数据~</Text>
+          <View>
+            <Text className={styles.tips}>试试下拉刷新</Text>
+          </View>
+        </View>
+        {/* <View>
           <AtButton
             size="small"
             type="primary"
@@ -21,7 +24,7 @@ const Empty: FC = () => {
           >
             重试
           </AtButton>
-        </View>
+        </View> */}
       </View>
     </View>
   );

src/components/fab-button/index.tsx

@@ -1,28 +1,31 @@
 import { View } from '@tarojs/components';
 import { ITouchEvent } from '@tarojs/components/types/common';
+import { ReactNode } from 'react';
 import { AtFab, AtIcon } from 'taro-ui';
 import styles from './index.module.scss';
 
 interface FabButtonProps {
   icon?: string;
   prefixClass?: string;
+  children?: ReactNode;
+  size?: 'small' | 'normal';
   onClick: (e: ITouchEvent) => void;
 }
 
 const FabButton = ({
   icon = 'filter',
   prefixClass = '',
   onClick,
+  children,
+  size = 'small',
 }: FabButtonProps) => {
   const props: any = { value: icon };
   if (prefixClass) {
     props.prefixClass = prefixClass;
   }
   return (
     <View className={styles['fab-btn']} onClick={onClick}>
-      <AtFab size="small">
-        <AtIcon {...props}></AtIcon>
-      </AtFab>
+      <AtFab size={size}>{children || <AtIcon {...props}></AtIcon>}</AtFab>
     </View>
   );
 };

src/constants.ts

@@ -19,3 +19,5 @@ export const PULL_DOWN_REFRESH_EVENT = 'pull_down_refresh_event';
 export const THROTTLE_DELAY = 1500;
 
 export const TRENDING_URL = 'https://trending.stayin.cn';
+
+export const CURRENT_LANGUAGE_STORAGE_KEY = 'current-language';

src/hooks/useTrending.ts

@@ -1,13 +1,17 @@
 import { TRENDING_URL } from '@/constants';
 import { useQuery } from '@tanstack/react-query';
 import Taro from '@tarojs/taro';
-import { TrendingRepoData, TrendingRequestParams } from 'types/trending';
+import {
+  TrendingDeveloperData,
+  TrendingRepoData,
+  TrendingRequestParams,
+} from 'types/trending';
 
 const useTrending = ({
   type = 'repositories',
   ...params
 }: TrendingRequestParams) => {
-  return useQuery<TrendingRepoData[]>(
+  return useQuery<(TrendingRepoData | TrendingDeveloperData)[]>(
     ['trending', type, params],
     () => {
       // Taro.showLoading({ title: '努力加载中...' });

src/pages/my-languages/index.tsx

@@ -21,10 +21,10 @@ const MyLanguages = () => {
   const [optionsLangs, setOptionsLangs] =
     useState<OptionsLang[]>(LANGUAGE_LIST);
   const [selectedList, setSelectedList] = useState<string[]>(initSelectedList);
-  const [fiterVal, setFilterVal] = useState<string>('');
+  const [filterVal, setFilterVal] = useState<string>('');
   const dispatch = useDispatch();
 
-  const handleSeletedChange = (val) => {
+  const handleSelectedChange = (val) => {
     setSelectedList(val);
   };
 
@@ -62,15 +62,15 @@ const MyLanguages = () => {
           focus
           placeholder="Search"
           className={styles['filter-input']}
-          value={fiterVal}
+          value={filterVal}
           onInput={handleChangeInput}
         ></Input>
       </View>
       <View>
         <AtCheckbox
           options={optionsLangs}
           selectedList={selectedList}
-          onChange={handleSeletedChange}
+          onChange={handleSelectedChange}
         ></AtCheckbox>
       </View>
       <FabButton icon="check" onClick={handleFabClick}></FabButton>

src/pages/my-languages/languages.ts

@@ -2,6 +2,7 @@ export const LANGUAGE_LIST = [
   {
     value: '',
     label: 'All Languages',
+    disabled: true,
   },
   {
     value: '1c-enterprise',

src/pages/trending/index.module.scss

@@ -2,8 +2,35 @@
 }
 
 .header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
   display: flex;
+  background-color: white;
+  padding: 0 20px;
+
+  :global(.at-tabs__item--active .at-tabs__item-underline) {
+    width: 50%;
+    transform: translate(-50%);
+    left: 50%;
+    transition: none;
+  }
+}
+
+.filterIcon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:active {
+    color: $primary;
+  }
 }
 
 .tabs {
 }
+
+.main {
+  padding: 80px 0;
+}