u

src/views/website/Search/index.tsx

@@ -56,6 +56,7 @@ export default defineComponent({
           <div class="flex items-center mt-60px mb-50px py-10px pr-17px px-10px bg-light-50 <md:(mt-30px mb-25px)">
             <div class="flex-1">
               <Input
+                allowClear
                 class="!text-16px"
                 placeholder="请输入关键词"
                 bordered={false}

src/views/website/Search/item.tsx

@@ -12,10 +12,10 @@ export default defineComponent({
   setup(props) {
     const getLink = (record: any) => {
       switch (record.type) {
-        case "article":
-          return `/article/${record.cid}?aid=${record._id}`;
         case "detail":
           return `/detail/${record.cid}`;
+        case "list":
+        case "article":
         default:
           return `/article/${record.cid}?aid=${record._id}`;
       }

src/views/website/components/layout/Footer.tsx

@@ -2,15 +2,23 @@ import { useCategory } from "@/modules";
 import { css } from "@linaria/core";
 import { Space } from "ant-design-vue";
 import { defineComponent } from "vue";
-
 import { RouterLink } from "vue-router";
 
 export default defineComponent(() => {
   const storeCategory = useCategory();
+
   return () => {
+    const topCate = storeCategory.categoryTree.filter((e: CategoryItem) => {
+      return e.isHome == false;
+    });
     const mainCate = storeCategory.categoryTree.filter((e: CategoryItem) => {
       return e.isHome == true;
     });
+    mainCate.push({
+      children: topCate,
+      name: "其他",
+    });
+
     return (
       <div class={FooterLayout}>
         <div class={"footer_fix_link"}>
@@ -76,6 +84,7 @@ export default defineComponent(() => {
     );
   };
 });
+
 const FooterLayout = css`
   .footer_fix_link {
     position: fixed;

src/views/website/components/layout/Header.tsx

@@ -22,10 +22,8 @@ export default defineComponent(() => {
     });
     return (
       <div class={HeaderLayout}>
-        <div class="lay_top flex align-center justify-between">
-          <div class="tips hidden">
-            立足四川、面向全国，贴近行业，服务社会。
-          </div>
+        <div class="lay_top flex align-center justify-between hidden">
+          <div class="tips">立足四川、面向全国，贴近行业，服务社会。</div>
           <div class={"top_links"}>
             {topCate.map((e) => {
               return (
@@ -40,7 +38,7 @@ export default defineComponent(() => {
               <img src={getImageUrl("logo_header.png")} />
             </router-link>
           </div>
-          <div class="menu relative flex-1 flex items-center justify-end ml-50px">
+          <div class="menu relative flex-1 flex items-center justify-end mx-50px">
             <Menu data={mainCate} />
             <Search />
           </div>
@@ -101,7 +99,7 @@ const HeaderLayout = css`
   }
   .lay_menu {
     align-items: center;
-    padding: 16px 30px;
+    padding: 7px 30px;
     background: var(--vt-c-white);
     .menu_logo {
       img {
@@ -113,9 +111,6 @@ const HeaderLayout = css`
     .mobile_header {
       display: none;
     }
-    .menu {
-      padding-left: 50px;
-    }
   }
   @media screen and (max-width: 1280px) {
     .lay_top {

src/views/website/components/layout/MobileSearch.tsx

@@ -1,5 +1,5 @@
 import { CloseOutlined, SearchOutlined } from "@ant-design/icons-vue";
-import { cx } from "@linaria/core";
+import { css, cx } from "@linaria/core";
 import { Input } from "ant-design-vue";
 import { defineComponent, reactive, ref } from "vue";
 import { useRouter } from "vue-router";
@@ -40,11 +40,11 @@ export default defineComponent({
           <div class="flex items-center mx-30px mt-40px">
             <SearchOutlined class="text-24px !text-light-50" />
             <Input
-              autofocus
+              allowClear
               ref={searchInputRef}
               bordered={false}
               placeholder="请输入关键字"
-              class="!text-18px !text-light-50"
+              class={inputStyles}
               onPressEnter={(e: any) => {
                 searchInputRef.value.blur();
                 router.push({
@@ -60,3 +60,12 @@ export default defineComponent({
     );
   },
 });
+
+const inputStyles = css`
+  .anticon.ant-input-clear-icon,
+  .anticon.ant-input-clear-icon:hover,
+  input {
+    color: #fff;
+    font-size: 18px;
+  }
+`;

src/views/website/components/layout/Search.tsx

@@ -16,24 +16,25 @@ export default defineComponent({
 
     return () => (
       <>
-        <div class="text-gray-500">
+        <div class="w-1/20 text-right text-gray-500">
           <SearchOutlined
-            class="ml-40px text-20px cursor-pointer hover:text-primary"
+            class="text-20px hover:text-primary"
             onClick={() => {
               state.showSearch = true;
-              searchInputRef.value.focus();
+              searchInputRef.value?.focus();
             }}
           />
         </div>
         <div
           class={cx(
-            state.showSearch ? "w-85/100 opacity-100" : "w-0 opacity-0",
+            state.showSearch ? "w-90/100 opacity-100" : "w-0 opacity-0",
             "absolute h-1/1 flex items-center bg-light-50 overflow-hidden transition-all duration-500"
           )}
         >
           <div class="flex-1 flex items-center border-primary border-1 border-solid pl-10px py-5px">
             <SearchOutlined class="text-18px !text-gray-600" />
             <Input
+              allowClear
               bordered={false}
               placeholder="请输入关键词"
               class="w-1/1"

src/views/website/detail/article.tsx

@@ -1,10 +1,9 @@
 import { useArticle, useCategory } from "@/modules";
 import { css } from "@linaria/core";
-
+import { Empty, message } from "ant-design-vue";
 import { defineComponent, onMounted, reactive, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import PageTabs from "./PageTabs";
-import { Empty, message } from "ant-design-vue";
 
 export default defineComponent({
   setup() {
@@ -12,6 +11,7 @@ export default defineComponent({
     const router = useRouter();
     const categoryStore = useCategory();
     const articleStore = useArticle();
+
     const state = reactive({
       currFloor: {} as any,
       currMid: {} as any,
@@ -20,16 +20,7 @@ export default defineComponent({
       content: "",
       loading: true,
     });
-    watch(
-      () => categoryStore.listController.state.list,
-      () => {
-        initCategory();
-      }
-    );
-    onMounted(() => {
-      initCategory();
-      initArticle();
-    });
+
     const initCategory = () => {
       const id = route.params.id;
       const currCategory = categoryStore.listController.state.list.find(
@@ -77,10 +68,19 @@ export default defineComponent({
       } else {
         state.currFloor = state.currMid;
       }
+      const t = categoryStore.listController.state.list.find(
+        (e) => e._id == currCategory.pid
+      );
+
+      if (t?.pid == "top") {
+        state.currTree = t;
+        return;
+      }
       state.currTree = categoryStore.categoryTree.find((e) => {
-        return e._id == currCategory.pid;
+        return e._id == t?.pid;
       });
     };
+
     const initArticle = async () => {
       const aid = route.query.aid;
       if (!aid) {
@@ -97,28 +97,39 @@ export default defineComponent({
       state.content = res.result.content;
     };
 
+    watch(
+      () => categoryStore.listController.state.list,
+      () => {
+        initCategory();
+      }
+    );
+
+    onMounted(() => {
+      initCategory();
+      initArticle();
+    });
+
     return () => {
+      const { currMid = {}, currTree = {} } = state;
+
       return (
         <div class={page}>
           <div
             class={"page_title_box"}
             style={{
               backgroundImage: `url(${
-                state.currMid.cover ? state.currMid.cover : state.currTree.cover
+                currMid.cover ? currMid.cover : currTree.cover
               })`,
             }}
           >
             <div class={"title detail_page_w"}>
-              <h1>{state.currTree.name}</h1>
-              <h2>{state.currTree.subName}</h2>
+              <h1>{currTree.name}</h1>
+              <h2>{currTree.subName}</h2>
             </div>
           </div>
           <div class={"page_tabs_box"}>
             <div class="detail_page_w">
-              <PageTabs
-                data={state.currTree.children}
-                activeKey={state.currMid._id}
-              />
+              <PageTabs data={currTree.children} activeKey={currMid._id} />
             </div>
           </div>
           <div class={"page_content"}>
@@ -136,6 +147,7 @@ export default defineComponent({
     };
   },
 });
+
 const page = css`
   .page_title_box {
     position: relative;