download

src/views/admin/detail/components/DetailEditor.tsx

@@ -47,7 +47,7 @@ export default defineComponent({
         subData.title = data?.name;
         subData.cid = data._id;
       }
-      let summary = state.data.summary.substring(0, 70);
+      let summary = state.data.summary.substring(0, 60);
       summary = summary.replace(/\n/g, "");
       state.data.summary = summary;
       artStore.addOrUpdateArticle(subData);

src/views/admin/detail/components/ListEditModal.tsx

@@ -51,7 +51,7 @@ export default defineComponent({
           await uploader.uploadBlobImages(state.formData);
         }
 
-        let summary = state.formData.summary.substring(0, 70);
+        let summary = state.formData.summary.substring(0, 60);
         summary = summary.replace(/\n/g, "");
         state.formData.summary = summary;
         modal.submit(state.formData);

src/views/website/detail/DownloadPage.tsx

@@ -0,0 +1,127 @@
+import loading from "@/components/Provider/Loading";
+import { useArticle } from "@/modules";
+import { css } from "@linaria/core";
+import { List } from "ant-design-vue";
+import { defineComponent, onMounted } from "vue";
+import { object } from "vue-types";
+import dayjs from "dayjs";
+export default defineComponent({
+  props: {
+    data: object<CategoryItem>(),
+  },
+  setup(props) {
+    const data: any = props.data || {};
+    const artStore = useArticle();
+    artStore.listController.state.list = [];
+
+    onMounted(() => {
+      initDetail();
+    });
+
+    const initDetail = async () => {
+      loading.show("");
+
+      artStore.listController.state.query = JSON.stringify({
+        cid: data._id,
+      });
+      await artStore.listController.loadPage(1);
+      loading.hidden();
+    };
+
+    return () => {
+      return (
+        <div class={page}>
+          <div class={"list_content"}>
+            <List
+              grid={{ column: 1, gutter: 0 }}
+              dataSource={artStore.listController.state.list}
+              rowKey={(item) => item._id}
+              renderItem={({ item, index }) => {
+                return (
+                  <List.Item>
+                    <div class={"list_item"}>
+                      <div class={"info"}>
+                        <div class={"time"}>
+                          {dayjs(item.createTime).format("YYYY.MM.DD")}
+                        </div>
+                        <div class={"name"}>{item.title}</div>
+                      </div>
+                      <a class={"download"} href={item.summary}>
+                        下载
+                      </a>
+                    </div>
+                  </List.Item>
+                );
+              }}
+              pagination={{
+                hideOnSinglePage: true,
+                current: artStore.listController.state.page * 1,
+                pageSize: artStore.listController.state.size,
+                total: artStore.listController.state.total,
+                onChange: (v) => {
+                  artStore.listController.loadPage(v);
+                },
+              }}
+            ></List>
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+const page = css`
+  .list_content {
+    .ant-list-pagination {
+      text-align: center;
+      .ant-pagination-item-active {
+        background: var(--vt-c-primary);
+        border-color: var(--vt-c-primary);
+        a {
+          color: #fff;
+        }
+      }
+    }
+    .ant-list-item {
+      margin-bottom: 1px;
+    }
+    .list_item {
+      display: flex;
+      align-items: center;
+      padding: 20px 24px;
+      background-color: #fff;
+      .info {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        .time {
+          font-size: 16px;
+          color: #666666;
+        }
+        .name {
+          flex: 1;
+          width: 0;
+          padding: 0 48px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 16px;
+          font-weight: 400;
+          color: #333333;
+        }
+      }
+      .download {
+        padding: 4px 14px;
+        color: var(--vt-c-primary);
+        border: 1px solid var(--vt-c-primary);
+        border-radius: 4px;
+        transition: all 0.2s ease-in-out;
+        &:hover {
+          color: #fff;
+          background-color: var(--vt-c-primary);
+        }
+      }
+    }
+  }
+`;

src/views/website/detail/ListPage.tsx

@@ -120,7 +120,7 @@ const ArticleItem = defineComponent({
       if (summary && summary.length > 60) {
         return summary.substring(0, 60) + "...";
       }
-      return summary;
+      return summary + "...";
     };
     return () => (
       <div class={ListItemStyle}>

src/views/website/detail/index.tsx

@@ -8,6 +8,7 @@ import PageTabs from "./PageTabs";
 import DetailPage from "./DetailPage";
 import PageTabsLow from "./PageTabsLow";
 import ListPage from "./ListPage";
+import DownloadPage from "./DownloadPage";
 
 export default defineComponent({
   setup() {
@@ -131,6 +132,12 @@ export default defineComponent({
               {state.currFloor.type == "list" && (
                 <ListPage key={state.currFloor._id} data={state.currFloor} />
               )}
+              {state.currFloor.type == "download" && (
+                <DownloadPage
+                  key={state.currFloor._id}
+                  data={state.currFloor}
+                />
+              )}
             </div>
           </div>
         </div>