menu

src/modules/objects/index.ts

@@ -13,3 +13,21 @@ export const request = createRequest({
   },
 });
 export const uploader = new UploadController(request);
+export const renderTitle = (title?: string) => {
+  if (title) {
+    if (title.length > 30) {
+      return title.substring(0, 30) + "...";
+    }
+    return title;
+  }
+  return "";
+};
+export const renderSummary = (summary?: string) => {
+  if (summary) {
+    if (summary.length >= 60) {
+      return summary.substring(0, 60) + "...";
+    }
+    return summary;
+  }
+  return "";
+};

src/styles/main.css

@@ -9,23 +9,16 @@
 .global_w {
   max-width: 1644px;
   width: 100%;
+  padding: 0 20px;
   margin: 0 auto;
 }
-@media screen and (max-width: 1644px) {
-  .global_w {
-    padding: 0 20px;
-  }
-}
 .detail_page_w {
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
+  padding: 0 20px;
 }
-@media screen and (max-width: 1200px) {
-  .detail_page_w {
-    padding: 0 20px;
-  }
-}
+
 .image_error {
   background: #f2f2f2 url("../assets/image_error.png") no-repeat center;
 }

src/views/admin/category/CategoryTree.tsx

@@ -1,6 +1,7 @@
 import {
   FormOutlined,
-  PlusSquareOutlined
+  PlusSquareOutlined,
+  DeleteOutlined,
 } from "@ant-design/icons-vue";
 import { css } from "@linaria/core";
 import { Button, Tree } from "ant-design-vue";
@@ -45,7 +46,7 @@ export default defineComponent({
                   emit("update", item, key);
                 }}
               ></Button>
-              {/* <Button
+              <Button
                 class="tree_btn"
                 title="删除"
                 icon={<DeleteOutlined />}
@@ -53,7 +54,7 @@ export default defineComponent({
                   e.stopPropagation();
                   emit("delete", item);
                 }}
-              ></Button> */}
+              ></Button>
             </div>
           </div>
         );

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

@@ -56,6 +56,7 @@ const HeaderLayout = css`
     }
   }
   .lay_menu {
+    align-items: center;
     padding: 16px 30px;
     background: var(--vt-c-primary);
     .menu_logo {

src/views/website/detail/List.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, reactive } from "vue";
-import { array, bool, object } from "vue-types";
+import { array, bool, object, string } from "vue-types";
 
 import { css } from "@linaria/core";
 import { List } from "ant-design-vue";
@@ -10,6 +10,7 @@ export default defineComponent({
     dataSource: array<any>().isRequired,
     loading: bool(),
     actions: object() as any,
+    gridType: string().def("article"),
   },
   setup(props, { slots }) {
     const state = reactive({
@@ -17,13 +18,18 @@ export default defineComponent({
     });
     const route = useRoute();
     const router = useRouter();
+
     return () => {
-      const { dataSource, actions } = props;
+      const { dataSource, actions, gridType } = props;
+      const grid =
+        gridType == "article"
+          ? { gutter: 18, xs: 2, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }
+          : { column: 1, gutter: 0 };
       return (
         <div class={ListContent}>
           <List
             loading={state.loading}
-            grid={{ gutter: 18, xs: 2, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }}
+            grid={grid}
             dataSource={dataSource}
             rowKey={(item) => item._id}
             renderItem={({ item, index }) => {

src/views/website/detail/ListPage.tsx

@@ -1,12 +1,14 @@
 import Image from "@/components/Image";
 import loading from "@/components/Provider/Loading";
 import { useArticle } from "@/modules";
+import { ArrowRightOutlined } from "@ant-design/icons-vue";
 import { css } from "@linaria/core";
 import dayjs from "dayjs";
 import { defineComponent, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { any, object } from "vue-types";
 import List from "./List";
+import { renderSummary, renderTitle } from "@/modules/objects";
 const teacherList = [
   "6464ae7a8dcb7ddb98b57a28",
   "6464b7ca8dcb7ddb98b57a63",
@@ -16,8 +18,8 @@ const teacherList = [
   "6464b7e38dcb7ddb98b57a67",
   "6464b7e98dcb7ddb98b57a68",
   "6464b7f08dcb7ddb98b57a69",
-  "6464b7f68dcb7ddb98b57a6a",
 ];
+const itemList = ["6464aead8dcb7ddb98b57a29"];
 export default defineComponent({
   props: {
     data: object<CategoryItem>(),
@@ -55,13 +57,23 @@ export default defineComponent({
       if (teacherList.includes(category._id)) {
         return <TeacherItem item={item} key={item._id} />;
       }
+      if (itemList.includes(category._id)) {
+        return <DefItem item={item} key={item._id} />;
+      }
       return <ArticleItem item={item} key={item._id} />;
     };
+
     return () => {
+      let gridType = "article";
+      if (itemList.includes(category._id)) {
+        gridType = "def";
+      }
+
       return (
         <div class={page}>
-          <div class={"list_content"}>
+          <div class={["list_content", gridType == "def" ? "nomargin" : ""]}>
             <List
+              gridType={gridType}
               dataSource={artStore.listController.state.list}
               actions={artStore.listController}
             >
@@ -112,18 +124,6 @@ const ArticleItem = defineComponent({
     const { item } = props;
     const router = useRouter();
     const route = useRoute();
-    const renderTitle = (title?: string) => {
-      if (title) {
-        return title.substring(0, 30) + "...";
-      }
-      return "";
-    };
-    const renderSummary = (summary?: string) => {
-      if (summary) {
-        return summary.substring(0, 60) + "...";
-      }
-      return "";
-    };
     return () => (
       <div class={ListItemStyle}>
         <div
@@ -149,7 +149,54 @@ const ArticleItem = defineComponent({
     );
   },
 });
-const page = css``;
+const DefItem = defineComponent({
+  props: {
+    item: object<ArticleItem>(),
+  },
+  setup(props) {
+    const { item } = props;
+    const router = useRouter();
+    const route = useRoute();
+    const renderTitle = (title?: string) => {
+      if (title) {
+        if (title.length > 30) {
+          return title.substring(0, 30) + "...";
+        }
+        return title;
+      }
+      return "";
+    };
+
+    return () => (
+      <div class={DefItemStyle}>
+        <div
+          class={"item"}
+          onClick={() => {
+            const id = route.params.id;
+            const aid = item?._id;
+            router.push({ name: "article", params: { id }, query: { aid } });
+          }}
+        >
+          <div class={"item_tit"}>{renderTitle(item?.title)}</div>
+          <div class={"arrow"}>
+            <ArrowRightOutlined />
+          </div>
+        </div>
+      </div>
+    );
+  },
+});
+const page = css`
+  .nomargin {
+    .ant-list-grid {
+      .ant-col {
+        & > .ant-list-item {
+          margin-bottom: 1px;
+        }
+      }
+    }
+  }
+`;
 const TeacherItemStyle = css`
   width: 100%;
   height: 380px;
@@ -272,3 +319,25 @@ const ListItemStyle = css`
     color: #999999;
   }
 `;
+const DefItemStyle = css`
+  .item {
+    padding: 20px 24px;
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    cursor: pointer;
+    .item_tit {
+      flex: 1;
+      font-size: 16px;
+      color: #333333;
+      overflow: hidden;
+    }
+    .arrow {
+      padding: 4px;
+      line-height: 1;
+      border-radius: 12px;
+      border: 1px solid var(--vt-c-primary);
+      color: var(--vt-c-primary);
+    }
+  }
+`;

src/views/website/detail/PageTabsLow.tsx

@@ -25,7 +25,7 @@ export default defineComponent({
                     router.push({ path: route.path, query: { cid: e._id } });
                   }}
                 >
-                  {e.name}
+                  <div class={"name"}>{e.name}</div>
                 </div>
               );
             })}
@@ -36,23 +36,35 @@ export default defineComponent({
 });
 const page = css`
   display: flex;
-  justify-content: center;
   align-items: center;
-  background-color: #fff;
   margin-bottom: 50px;
   .tabs_item {
     position: relative;
-    margin: 0 30px;
-    height: 46px;
-    line-height: 46px;
+    margin-right: 30px;
+    height: 24px;
+    line-height: 24px;
     font-size: 14px;
     font-weight: 400;
     color: #666666;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
+    .name {
+      position: relative;
+      z-index: 2;
+    }
     &.cur {
       font-weight: 600;
       color: #333;
+      &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        z-index: 1;
+        width: 100%;
+        height: 8px;
+        background-color: var(--vt-c-primary);
+      }
     }
   }
 `;

src/views/website/home/components/Research.tsx

@@ -7,6 +7,7 @@ import { Empty } from "ant-design-vue";
 import dayjs from "dayjs";
 import { defineComponent, onMounted, reactive } from "vue";
 import { RouterLink, useRouter } from "vue-router";
+import { renderSummary, renderTitle } from "@/modules/objects";
 export default defineComponent({
   setup() {
     const storeArt = useArticle();
@@ -37,18 +38,6 @@ export default defineComponent({
         query: { aid },
       });
     };
-    const renderTitle = (title?: string) => {
-      if (title) {
-        return title.substring(0, 30) + "...";
-      }
-      return title;
-    };
-    const renderSummary = (summary?: string) => {
-      if (summary) {
-        return summary.substring(0, 60) + "...";
-      }
-      return "";
-    };
     return () => (
       <div class={[page, "home_lay_item_box"]}>
         <div class={"global_w"}>

src/views/website/home/components/Speciality.tsx

@@ -3,66 +3,42 @@ import { ArrowRightOutlined } from "@ant-design/icons-vue";
 import { defineComponent, onMounted, reactive, watch } from "vue";
 import { useArticle, useCategory } from "@/modules";
 import { RouterLink } from "vue-router";
+import { renderSummary } from "@/modules/objects";
 
 export default defineComponent({
   setup() {
-    const storeCategory = useCategory();
     const storeArt = useArticle();
-    const categoryId = "64649b6e8dcb7ddb98b57a1a";
+    const listId = "64740f78821dd32d1688a1bc";
+    const categoryId = "6464aead8dcb7ddb98b57a29";
     const state = reactive({
       summarys: [] as any,
       specialities: [],
     });
-    watch(
-      () => storeCategory.categoryTree.length,
-      () => {
-        initSpeciality();
-      }
-    );
+
     onMounted(() => {
-      initSpeciality();
+      getList();
     });
-    const initSpeciality = async () => {
-      const speciality = storeCategory.categoryTree.find((e) => {
-        return e._id == categoryId;
-      });
-      if (!speciality) {
-        return;
-      }
-      const children = speciality.children;
 
-      const res = children.map((e: any) => {
-        return getCardSummary(e._id);
-      });
-      Promise.all(res).then((e) => {
-        state.summarys = e;
-        state.specialities = children;
-      });
-    };
-
-    const getCardSummary = (id: string) => {
-      return new Promise(async (resolve) => {
-        const query = { page: 1, size: 1, query: JSON.stringify({ cid: id }) };
-        const res = await storeArt.getArticleList(query);
-        const list = res.list || [];
-        if (list[0]) {
-          let summary = list[0].summary;
-          summary = summary.substring(0, 60) + "...";
-          resolve(summary);
-        }
-        resolve("");
-      });
+    const getList = async () => {
+      const query = {
+        page: 1,
+        size: 5,
+        query: JSON.stringify({ cid: listId }),
+      };
+      const res = await storeArt.getArticleList(query);
+      const list = res.list || [];
+      state.specialities = list;
     };
     return () => {
       return (
         <div class={[page, "home_lay_item_box"]}>
           <div class={"global_w"}>
             <div class={"home_lay_title"}>
-              专业建设<span>/</span>
+              系部设置<span>/</span>
               <span>Speciality</span>
             </div>
             <div class={"spe_cards"}>
-              {state.specialities.map((e: any, index: number) => {
+              {state.specialities.map((e: ArticleItem, index: number) => {
                 return (
                   <div class={`cards_item card_${index + 1}`}>
                     <div class={"card_icon"}>
@@ -73,12 +49,18 @@ export default defineComponent({
                       />
                     </div>
                     <div class={"card_tit"}>
-                      <div>{e.name}</div>
+                      <div>{e.title}</div>
                     </div>
                     <div class={"card_desc"}>
-                      <div class={"desc"}>{state.summarys[index]}</div>
+                      <div class={"desc"}>{renderSummary(e.summary)}</div>
                       <div class={"more"}>
-                        <RouterLink to={`/detail/${e._id}`}>
+                        <RouterLink
+                          to={{
+                            name: "article",
+                            params: { id: categoryId },
+                            query: { aid: e._id },
+                          }}
+                        >
                           了解更多
                           <ArrowRightOutlined class={"arrow"} />
                         </RouterLink>

src/views/website/home/components/Talents.tsx

@@ -7,6 +7,7 @@ import Image from "@/components/Image";
 import { useArticle, useCategory } from "@/modules";
 import { RouterLink, useRouter } from "vue-router";
 import dayjs from "dayjs";
+import { renderSummary, renderTitle } from "@/modules/objects";
 export default defineComponent({
   setup() {
     const storeCategory = useCategory();
@@ -60,18 +61,6 @@ export default defineComponent({
         query: { aid },
       });
     };
-    const renderTitle = (title?: string) => {
-      if (title && title.length > 30) {
-        return title.substring(0, 30) + "...";
-      }
-      return title;
-    };
-    const renderSummary = (summary?: string) => {
-      if (summary) {
-        return summary.substring(0, 60) + "...";
-      }
-      return "";
-    };
     return () => (
       <div class={[page, "home_lay_item_box"]}>
         <div class={"global_w"}>