feat: 登录时，前台展示编辑按钮 #234

Mereithhh · May 5, 2023 · 6af8a1b · 6af8a1b
1 parent 4690cbf
commit 6af8a1b
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 33 deletions.
diff --git a/packages/admin/src/components/SiteInfoForm/index.tsx b/packages/admin/src/components/SiteInfoForm/index.tsx
@@ -23,14 +23,14 @@ export default function (props: {
             label="作者名字"
             placeholder={'请输入作者名字'}
             rules={[{ required: true, message: '这是必填项' }]}
-          ></ProFormText>
+          />
           <ProFormText
             name="authorDesc"
             required
             label="作者描述"
             placeholder={'请输入作者描述'}
             rules={[{ required: true, message: '这是必填项' }]}
-          ></ProFormText>
+          />
           <UrlFormItem
             isInit={props.isInit}
             formRef={props.form}
@@ -88,14 +88,14 @@ export default function (props: {
             label="网站名"
             placeholder={'请输入网站名'}
             rules={[{ required: true, message: '这是必填项' }]}
-          ></ProFormText>
+          />
           <ProFormText
             name="siteDesc"
             required
             label="网站描述"
             placeholder={'请输入网站描述'}
             rules={[{ required: true, message: '这是必填项' }]}
-          ></ProFormText>
+          />
         </>
       )}
       {props.showOption && (
@@ -146,31 +146,27 @@ export default function (props: {
       )}
       {props.showOption && (
         <>
-          <ProFormText
-            name="copyrightAggreement"
-            label="版权协议"
-            placeholder={'版权协议'}
-          ></ProFormText>
+          <ProFormText name="copyrightAggreement" label="版权协议" placeholder={'版权协议'} />
           <ProFormText
             name="beianNumber"
             label="IPC 备案号"
             placeholder={'请输入备案号，留空不显示备案信息'}
-          ></ProFormText>
+          />
           <ProFormText
             name="beianUrl"
             label="IPC 备案网址"
             placeholder={'请输入备案网址，留空不显示备案信息'}
-          ></ProFormText>
+          />
           <ProFormText
             name="gaBeianNumber"
             label="公安备案号"
             placeholder={'请输入公安备案号，留空不显示公安备案信息'}
-          ></ProFormText>
+          />
           <ProFormText
             name="gaBeianUrl"
             label="公安备案网址"
             placeholder={'请输入公安备案号点击后跳转的网址，留空则不跳转'}
-          ></ProFormText>
+          />
           <UrlFormItem
             formRef={props.form}
             isInit={props.isInit}
@@ -183,12 +179,12 @@ export default function (props: {
             name="gaAnalysisId"
             label="Google Analysis ID"
             placeholder={'请输入 Google Analysis ID，留空表示不启用'}
-          ></ProFormText>
+          />
           <ProFormText
             name="baiduAnalysisId"
             label="Baidu 分析 ID"
             placeholder={'请输入 Baidu 分析 ID，留空表示不启用'}
-          ></ProFormText>
+          />
           <ProFormSelect
             name={'enableComment'}
             label="是否开启评论系统"
@@ -198,7 +194,7 @@ export default function (props: {
               false: '关闭',
             }}
             tooltip={'默认开启'}
-          ></ProFormSelect>
+          />
           <ProFormDateTimePicker
             name="since"
             width={'lg'}
@@ -219,7 +215,7 @@ export default function (props: {
               false: '隐藏',
             }}
             tooltip={'默认隐藏，开启后将在主导航栏下方显示分类子导航栏（其实就是双层导航栏）。'}
-          ></ProFormSelect>
+          />
 
           <ProFormDigit
             name={'subMenuOffset'}
@@ -230,7 +226,7 @@ export default function (props: {
             min={0}
             max={200}
             tooltip={'导航栏显示的是网站名的时候，设置正确偏移以对其分类第一个字。'}
-          ></ProFormDigit>
+          />
           <ProFormSelect
             name={'headerLeftContent'}
             label="导航栏左侧显示内容"
@@ -240,7 +236,7 @@ export default function (props: {
             }}
             placeholder="网站名"
             tooltip={'显示网站 logo 的前提是已设置正确的网站 logo 哦。默认显示网站名'}
-          ></ProFormSelect>
+          />
           <ProFormSelect
             name={'showAdminButton'}
             label="后台按钮是否显示"
@@ -250,7 +246,7 @@ export default function (props: {
               false: '隐藏',
             }}
             tooltip={'默认显示，关闭后前台会隐藏后台按钮'}
-          ></ProFormSelect>
+          />
           <ProFormSelect
             name={'showDonateInfo'}
             label="是否显示捐赠信息"
@@ -260,7 +256,7 @@ export default function (props: {
               false: '隐藏',
             }}
             tooltip={'默认显示，关闭后关于页面会隐藏捐赠信息'}
-          ></ProFormSelect>
+          />
 
           <ProFormSelect
             name={'showCopyRight'}
@@ -271,7 +267,7 @@ export default function (props: {
               false: '隐藏',
             }}
             tooltip={'默认显示，关闭后文章页面将不显示版权声明'}
-          ></ProFormSelect>
+          />
           <ProFormSelect
             name={'showDonateButton'}
             label="是否显示打赏按钮"
@@ -281,7 +277,7 @@ export default function (props: {
               false: '隐藏',
             }}
             tooltip={'默认显示（前提是设置了支付宝和微信支付图片），关闭后所有位置将不显示打赏按钮'}
-          ></ProFormSelect>
+          />
           <ProFormSelect
             name={'showDonateInAbout'}
             label="关于页面是否显示打赏按钮"
@@ -291,7 +287,7 @@ export default function (props: {
               false: '隐藏',
             }}
             tooltip={'默认隐藏，开启后关于页面会显示打赏按钮'}
-          ></ProFormSelect>
+          />
           <ProFormSelect
             name={'defaultTheme'}
             label="前台默认主题模式"
@@ -302,7 +298,7 @@ export default function (props: {
               light: '亮色模式',
             }}
             tooltip={'设置后第一次进入前台的用户将以此作为默认主题模式'}
-          ></ProFormSelect>
+          />
           <ProFormSelect
             name={'allowOpenHiddenPostByUrl'}
             label="是否允许通过 URL 打开隐藏的文章"
@@ -312,7 +308,7 @@ export default function (props: {
               false: '不允许',
             }}
             tooltip={'默认不允许，开启后可通过 URL 打开隐藏文章。'}
-          ></ProFormSelect>
+          />
           <ProFormSelect
             name={'enableCustomizing'}
             label="是否开启客制化功能"
@@ -322,7 +318,7 @@ export default function (props: {
               false: '关闭',
             }}
             tooltip={'默认开启，关闭后即使通过客制化面板，自定义了 CSS、Script、HTML 也不会生效。'}
-          ></ProFormSelect>
+          />
           <ProFormSelect
             name={'showRSS'}
             label="是否显示 RSS 按钮"
@@ -332,7 +328,7 @@ export default function (props: {
               false: '隐藏',
             }}
             tooltip={'默认显示，关闭后所有位置会隐藏 RSS 按钮。'}
-          ></ProFormSelect>
+          />
           <ProFormSelect
             name={'openArticleLinksInNewWindow'}
             label="前台点击链接时的默认行为"
@@ -344,7 +340,7 @@ export default function (props: {
             tooltip={
               '默认在当前页面跳转，会影响除了导航栏之外的大部分链接。注意如果打开新标签的话，就不会那么丝滑了哦（当前页面跳转的话是无感切换的）'
             }
-          ></ProFormSelect>
+          />
           <ProFormSelect
             name={'showExpirationReminder'}
             label="是否显示文章内容过时提醒"
@@ -354,7 +350,17 @@ export default function (props: {
               false: '隐藏',
             }}
             tooltip={'默认显示，关闭后文章页面不会显示内容过期提醒。'}
-          ></ProFormSelect>
+          />
+          <ProFormSelect
+            name={'showEditButton'}
+            label="是否在登录后台时，在前台展示编辑按钮"
+            placeholder={'显示'}
+            valueEnum={{
+              true: '显示',
+              false: '隐藏',
+            }}
+            tooltip={'默认开启，关闭后登录后台时，前台将不再显示编辑按钮。'}
+          />
         </>
       )}
     </>

diff --git a/packages/server/src/types/site.dto.ts b/packages/server/src/types/site.dto.ts
@@ -38,6 +38,7 @@ export class SiteInfo {
   showRSS: 'true' | 'false';
   openArticleLinksInNewWindow: 'true' | 'false';
   showExpirationReminder?: 'true' | 'false';
+  showEditButton?: 'true' | 'false';
 }
 export interface updateUserDto {
   username: string;

diff --git a/packages/website/api/getAllData.ts b/packages/website/api/getAllData.ts
@@ -125,6 +125,7 @@ export interface MetaProps {
     showRSS: "true" | "false";
     openArticleLinksInNewWindow: "true" | "false";
     showExpirationReminder: "true" | "false";
+    showEditButton: "true" | "false";
   };
 }
 export interface PublicMetaProp {
@@ -185,6 +186,7 @@ const defaultMeta: MetaProps = {
     showExpirationReminder: "true",
     showRSS: "true",
     openArticleLinksInNewWindow: "false",
+    showEditButton: "false",
   },
 };
 

diff --git a/packages/website/components/PostCard/index.tsx b/packages/website/components/PostCard/index.tsx
@@ -38,6 +38,7 @@ export default function (props: {
   copyrightAggreement: string;
   customCopyRight: string | null;
   showExpirationReminder: boolean;
+  showEditButton: boolean;
 }) {
   const [lock, setLock] = useState(props.type != "overview" && props.private);
   const { content, setContent } = props;
@@ -95,6 +96,7 @@ export default function (props: {
           id={props.id}
           title={props.title}
           openArticleLinksInNewWindow={props.openArticleLinksInNewWindow}
+          showEditButton={props.showEditButton}
         />
 
         <SubTitle

diff --git a/packages/website/components/PostCard/title.tsx b/packages/website/components/PostCard/title.tsx
@@ -10,6 +10,7 @@ export function Title(props: {
   id: number | string;
   title: string;
   openArticleLinksInNewWindow: boolean;
+  showEditButton: boolean;
 }) {
   const newTab = useMemo(() => {
     if (props.type == "overview" && props.openArticleLinksInNewWindow) {
@@ -22,19 +23,37 @@ export function Title(props: {
       {props.type != "about" ? (
         <Link href={`/post/${props.id}`} target={getTarget(newTab)}>
           <div
-            className={`text-lg block font-medium px-5  text-center mb-2 mt-2 dark:text-dark text-gray-700 md:text-${props.type == "overview" ? "xl" : "2xl"
-              } ua ua-link`}
+            className={`text-lg block font-medium px-5  text-center mb-2 mt-2 dark:text-dark text-gray-700 ${
+              props.showEditButton ? "ml-8" : ""
+            } md:text-${props.type == "overview" ? "xl" : "2xl"} ua ua-link`}
           >
             {props.title}
           </div>
         </Link>
       ) : (
         <div
-          className={`text-lg block font-medium mb-2 mt-2 dark:text-dark text-gray-700 md:text-2xl ua ua-link  select-none`}
+          className={`text-lg block font-medium mb-2 mt-2 dark:text-dark text-gray-700 md:text-2xl ua ua-link  select-none ${
+            props.showEditButton ? "ml-12 mr-4" : ""
+          }`}
         >
           {props.title}
         </div>
       )}
+      {props.showEditButton && (
+        <a
+          className="flex items-center"
+          href={
+            props.type === "about"
+              ? "/admin/editor?type=about"
+              : `/admin/editor?type=article&id=${props.id}`
+          }
+          target="_blank"
+        >
+          <div className=" text-dark dark:text-gray-700">
+            <div>编辑</div>
+          </div>
+        </a>
+      )}
     </div>
   );
 }

diff --git a/packages/website/pages/about.tsx b/packages/website/pages/about.tsx
@@ -74,6 +74,7 @@ const AboutPage = (props: AboutPageProps) => {
         customCopyRight={null}
         showDonateInAbout={props.showDonateInAbout == "true"}
         copyrightAggreement={props.layoutProps.copyrightAggreement}
+        showEditButton={props.layoutProps.showEditButton === "true"}
       ></PostCard>
     </Layout>
   );

diff --git a/packages/website/pages/index.tsx b/packages/website/pages/index.tsx
@@ -32,6 +32,7 @@ const Home = (props: IndexPageProps) => {
       <div className="space-y-2 md:space-y-4">
         {props.articles.map((article) => (
           <PostCard
+            showEditButton={props.layoutProps.showEditButton === "true"}
             setContent={() => {}}
             showExpirationReminder={
               props.layoutProps.showExpirationReminder == "true"

diff --git a/packages/website/pages/page/[p].tsx b/packages/website/pages/page/[p].tsx
@@ -37,6 +37,8 @@ const PagePages = (props: PagePagesProps) => {
       <div className="space-y-2 md:space-y-4">
         {props.articles.map((article) => (
           <PostCard
+
+            showEditButton={props.layoutProps.showEditButton === "true"}
             setContent={() => {}}
             showExpirationReminder={
               props.layoutProps.showExpirationReminder == "true"

diff --git a/packages/website/pages/post/[id].tsx b/packages/website/pages/post/[id].tsx
@@ -57,6 +57,7 @@ const PostPages = (props: PostPagesProps) => {
         ></meta>
       </Head>
       <PostCard
+        showEditButton={props.layoutProps.showEditButton === "true"}
         showExpirationReminder={
           props.layoutProps.showExpirationReminder == "true"
         }

diff --git a/packages/website/utils/auth.ts b/packages/website/utils/auth.ts
@@ -0,0 +1,4 @@
+export const checkLogin = () => {
+  if (typeof window === "undefined") return false;
+  return !!localStorage?.getItem("token");
+};
diff --git a/packages/website/utils/getLayoutProps.ts b/packages/website/utils/getLayoutProps.ts
@@ -1,6 +1,7 @@
 import { defaultMenu, MenuItem, PublicMetaProp } from "../api/getAllData";
 import dayjs from "dayjs";
 import { AuthorCardProps } from "../components/AuthorCard";
+import { checkLogin } from "./auth";
 export interface LayoutProps {
   description: string;
   ipcNumber: string;
@@ -33,6 +34,7 @@ export interface LayoutProps {
   showRSS: "true" | "false";
   showExpirationReminder: "true" | "false";
   openArticleLinksInNewWindow: "true" | "false";
+  showEditButton: "true" | "false";
   subMenuOffset: number;
   customCss?: string;
   customScript?: string;
@@ -97,6 +99,14 @@ export function getLayoutProps(data: PublicMetaProp): LayoutProps {
   ) {
     showExpirationReminder = "false";
   }
+  let showEditButton: "true" | "false" = "true";
+  if (
+    data.meta.siteInfo?.showEditButton &&
+    data.meta.siteInfo?.showEditButton == "false"
+  ) {
+    showEditButton = "false";
+  }
+  if (!checkLogin()) showEditButton = "false";
   let openArticleLinksInNewWindow: "true" | "false" = "false";
   if (
     data.meta.siteInfo?.openArticleLinksInNewWindow &&
@@ -136,6 +146,7 @@ export function getLayoutProps(data: PublicMetaProp): LayoutProps {
     showCopyRight,
     showDonateButton,
     showRSS,
+    showEditButton,
     ...customSetting,
   };
 }