feat: 支持隐藏条目，只有登录后才展示Mereithhh#2

moeacgx · Jun 27, 2023 · e819e93 · e819e93
1 parent 2cf9c05
commit e819e93
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 38 deletions.
diff --git a/init.db.go b/init.db.go
@@ -66,6 +66,13 @@ func initDB() {
 	_, err = db.Exec(sql_create_table)
 	checkErr(err)
 
+	// tools数据表结构升级-20230627
+	sql_create_table = `
+		ALTER TABLE nav_table ADD COLUMN hide BOOLEAN;
+		`
+	_, err = db.Exec(sql_create_table)
+	checkErr(err)
+
 	// 分类表
 	sql_create_table = `
 		CREATE TABLE IF NOT EXISTS nav_catelog (

diff --git a/main.go b/main.go
@@ -158,12 +158,12 @@ func updateTool(data updateToolDto, db *sql.DB) {
 	// 除了更新工具本身之外，也要更新 img 表
 	sql_update_tool := `
 		UPDATE nav_table
-		SET name = ?, url = ?, logo = ?, catelog = ?, desc = ?, sort = ?
+		SET name = ?, url = ?, logo = ?, catelog = ?, desc = ?, sort = ?, hide = ?
 		WHERE id = ?;
 		`
 	stmt, err := db.Prepare(sql_update_tool)
 	checkErr(err)
-	res, err := stmt.Exec(data.Name, data.Url, data.Logo, data.Catelog, data.Desc, data.Sort, data.Id)
+	res, err := stmt.Exec(data.Name, data.Url, data.Logo, data.Catelog, data.Desc, data.Sort, data.Hide, data.Id)
 	checkErr(err)
 	_, err = res.RowsAffected()
 	checkErr(err)
@@ -244,12 +244,12 @@ func addCatelog(data addCatelogDto, db *sql.DB) {
 
 func addTool(data addToolDto, db *sql.DB) int64 {
 	sql_add_tool := `
-		INSERT INTO nav_table (name, url, logo, catelog, desc, sort)
-		VALUES (?, ?, ?, ?, ?, ?);
+		INSERT INTO nav_table (name, url, logo, catelog, desc, sort, hide)
+		VALUES (?, ?, ?, ?, ?, ?, ?);
 		`
 	stmt, err := db.Prepare(sql_add_tool)
 	checkErr(err)
-	res, err := stmt.Exec(data.Name, data.Url, data.Logo, data.Catelog, data.Desc, data.Sort)
+	res, err := stmt.Exec(data.Name, data.Url, data.Logo, data.Catelog, data.Desc, data.Sort, data.Hide)
 	checkErr(err)
 	id, err := res.LastInsertId()
 	checkErr(err)
@@ -267,7 +267,17 @@ func getAllTool(db *sql.DB) []Tool {
 	checkErr(err)
 	for rows.Next() {
 		var tool Tool
-		err = rows.Scan(&tool.Id, &tool.Name, &tool.Url, &tool.Logo, &tool.Catelog, &tool.Desc, &tool.Sort)
+		var hide interface{}
+		err = rows.Scan(&tool.Id, &tool.Name, &tool.Url, &tool.Logo, &tool.Catelog, &tool.Desc, &tool.Sort, &hide)
+		if hide == nil {
+			tool.Hide = false
+		} else {
+			if hide.(int64) == 0 {
+				tool.Hide = false
+			} else {
+				tool.Hide = true
+			}
+		}
 		checkErr(err)
 		results = append(results, tool)
 	}

diff --git a/types.go b/types.go
@@ -54,6 +54,7 @@ type Tool struct {
 	Catelog string `json:"catelog"`
 	Desc    string `json:"desc"`
 	Sort    int    `json:"sort"`
+	Hide    bool   `json:"hide"`
 }
 
 type addToolDto struct {
@@ -63,6 +64,7 @@ type addToolDto struct {
 	Catelog string `json:"catelog"`
 	Desc    string `json:"desc"`
 	Sort    int    `json:"sort"`
+	Hide    bool   `json:"hide"`
 }
 
 type updateToolDto struct {
@@ -73,6 +75,7 @@ type updateToolDto struct {
 	Catelog string `json:"catelog"`
 	Desc    string `json:"desc"`
 	Sort    int    `json:"sort"`
+	Hide    bool   `json:"hide"`
 }
 type updateCatelogDto struct {
 	Id   int    `json:"id"`

diff --git a/ui/admin/src/pages/Tools/index.tsx b/ui/admin/src/pages/Tools/index.tsx
@@ -12,7 +12,8 @@ import {
   Select,
   Upload,
   message,
-  Tooltip
+  Tooltip,
+  Switch
 } from "antd";
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { useCallback, useContext, useState } from "react";
@@ -26,7 +27,7 @@ import {
   fetchUpdateTool,
 } from "../../utils/api";
 import "./index.css";
-export interface ToolsProps {}
+export interface ToolsProps { }
 export const Tools: React.FC<ToolsProps> = (props) => {
   const { store, setStore, reload, loading } = useContext(GlobalContext);
   const [showEdit, setShowEdit] = useState(false);
@@ -55,7 +56,7 @@ export const Tools: React.FC<ToolsProps> = (props) => {
       setRequestLoading(true);
       try {
         await fetchUpdateTool(record);
-        message.success("更新成功! Logo 将在 3 秒后刷新并加载！",3);
+        message.success("更新成功! Logo 将在 3 秒后刷新并加载！", 3);
         setTimeout(() => {
           reload();
         }, 3000);
@@ -74,7 +75,7 @@ export const Tools: React.FC<ToolsProps> = (props) => {
       setRequestLoading(true);
       try {
         await fetchAddTool(record);
-        message.success("添加成功! Logo 将在 3 秒后刷新并加载！",3);
+        message.success("添加成功! Logo 将在 3 秒后刷新并加载！", 3);
         setTimeout(() => {
           reload();
         }, 3000);
@@ -106,11 +107,11 @@ export const Tools: React.FC<ToolsProps> = (props) => {
       for (const each of selectedRows) {
         try {
           await fetchDeleteTool(each.id);
-        } catch (err) {}
+        } catch (err) { }
       }
       message.success("删除成功!");
     } catch (err) {
-      message.success( "删除失败!" );
+      message.success("删除失败!");
     } finally {
       reload();
     }
@@ -120,11 +121,11 @@ export const Tools: React.FC<ToolsProps> = (props) => {
       for (const each of selectedRows) {
         try {
           await fetchUpdateTool({ ...each, logo: "" });
-        } catch (err) {}
+        } catch (err) { }
       }
       message.success("重置成功!");
     } catch (err) {
-      message.success("重置失败!" );
+      message.success("重置失败!");
     } finally {
       reload();
     }
@@ -134,7 +135,7 @@ export const Tools: React.FC<ToolsProps> = (props) => {
       for (const each of selectedRows) {
         try {
           await fetchUpdateTool(each);
-        } catch (err) {}
+        } catch (err) { }
       }
       message.success("重置成功!");
     } catch (err) {
@@ -272,7 +273,7 @@ export const Tools: React.FC<ToolsProps> = (props) => {
                 show = mutiSearch(item.name, searchString) || mutiSearch(item.desc, searchString);
               }
               // 过滤分类
-              if (!catelogName || catelogName === ""){
+              if (!catelogName || catelogName === "") {
                 show = show && true;
               } else {
                 show = show && mutiSearch(item.catelog, catelogName);
@@ -296,8 +297,8 @@ export const Tools: React.FC<ToolsProps> = (props) => {
             render={(_, record: any) => {
               return (
                 <div style={{
-                  display:"flex",
-                  flexDirection:"row",
+                  display: "flex",
+                  flexDirection: "row",
                   alignItems: "center"
                 }}>
                   {" "}
@@ -330,17 +331,27 @@ export const Tools: React.FC<ToolsProps> = (props) => {
             }}
           />
           <Table.Column title="网址" dataIndex="url" width={150} />
-          <Table.Column 
+          <Table.Column
             title={
-              <span>排序 
+              <span>排序
                 <Tooltip title="升序，按数字从小到大排序">
                   <QuestionCircleOutlined style={{ marginLeft: '5px' }} />
                 </Tooltip>
               </span>
             }
-            dataIndex="sort" 
-            width={30} 
+            dataIndex="sort"
+            width={30}
           />
+          <Table.Column title={
+            <span>隐藏
+              <Tooltip title="开启后只有登录后才会展示该工具">
+                <QuestionCircleOutlined style={{ marginLeft: '5px' }} />
+              </Tooltip>
+            </span>
+          } dataIndex={"hide"} width={50} render={(val) => {
+            return Boolean(val) ? "是" : "否"
+          }} />
+
           <Table.Column
             title="操作"
             width={40}
@@ -428,7 +439,7 @@ export const Tools: React.FC<ToolsProps> = (props) => {
             >
               <Input placeholder="请输入描述" />
             </Form.Item>
-            <Form.Item 
+            <Form.Item
               rules={[{ required: true, message: "请排序" }]}
               name="sort"
               initialValue={1}
@@ -438,11 +449,26 @@ export const Tools: React.FC<ToolsProps> = (props) => {
                   <Tooltip title="升序，按数字从小到大排序">
                     <QuestionCircleOutlined style={{ marginLeft: '5px' }} />
                   </Tooltip>
-                  &nbsp;排序 
+                  &nbsp;排序
                 </span>
-              } 
+              }
               labelCol={{ span: 4 }}>
-              <InputNumber placeholder="请输入排序"/>
+              <InputNumber placeholder="请输入排序" />
+            </Form.Item>
+            <Form.Item
+              name="hide"
+              initialValue={false}
+              required
+              label={
+                <span>
+                  <Tooltip title="开启后只有登录后才会展示该工具">
+                    <QuestionCircleOutlined style={{ marginLeft: '5px' }} />
+                  </Tooltip>
+                  &nbsp;隐藏
+                </span>
+              }
+              labelCol={{ span: 4 }}>
+              <Switch checkedChildren="开" unCheckedChildren="关" />
             </Form.Item>
           </Form>
         </Spin>
@@ -486,7 +512,7 @@ export const Tools: React.FC<ToolsProps> = (props) => {
             <Form.Item name="desc" required label="描述" labelCol={{ span: 4 }}>
               <Input placeholder="请输入描述" />
             </Form.Item>
-            
+
             <Form.Item
               name="sort"
               required
@@ -495,11 +521,26 @@ export const Tools: React.FC<ToolsProps> = (props) => {
                   <Tooltip title="升序，按数字从小到大排序">
                     <QuestionCircleOutlined style={{ marginLeft: '5px' }} />
                   </Tooltip>
-                  &nbsp;排序 
+                  &nbsp;排序
+                </span>
+              }
+              labelCol={{ span: 4 }}>
+              <InputNumber placeholder="请输入排序" defaultValue={1} />
+            </Form.Item>
+
+            <Form.Item
+              name="hide"
+              required
+              label={
+                <span>
+                  <Tooltip title="开启后只有登录后才会展示该工具">
+                    <QuestionCircleOutlined style={{ marginLeft: '5px' }} />
+                  </Tooltip>
+                  &nbsp;隐藏
                 </span>
-              } 
+              }
               labelCol={{ span: 4 }}>
-              <InputNumber placeholder="请输入排序" defaultValue={1}/>
+              <Switch checkedChildren="开" unCheckedChildren="关" />
             </Form.Item>
           </Form>
         </Spin>

diff --git a/ui/admin/src/utils/api.ts b/ui/admin/src/utils/api.ts
@@ -20,28 +20,28 @@ export const fetchImportTools = async (payload: any) => {
 };
 export const fetchExportTools = async () => {
   const { data } = await axios.get(`/api/admin/exportTools`);
-  return data?.data ;
+  return data?.data;
 };
 // 工具管理接口：删除、修改、新增
 export const fetchDeleteTool = async (id: number) => {
   const { data } = await axios.delete(`/api/admin/tool/${id}`);
   return data?.data || {};
 };
 export const fetchUpdateTool = async (payload: any) => {
-  const { data } = await axios.put(`/api/admin/tool/${payload.id}`,payload);
+  const { data } = await axios.put(`/api/admin/tool/${payload.id}`, payload);
   return data?.data || {};
 };
 export const fetchAddTool = async (payload: any) => {
-  const { data } = await axios.post(`/api/admin/tool`,payload);
+  const { data } = await axios.post(`/api/admin/tool`, payload);
   return data?.data || {};
 };
 // 分类管理接口；新增、修改、删除
 export const fetchAddCateLog = async (payload: any) => {
-  const { data } = await axios.post(`/api/admin/catelog`,payload);
+  const { data } = await axios.post(`/api/admin/catelog`, payload);
   return data?.data || {};
 };
 export const fetchUpdateCateLog = async (payload: any) => {
-  const { data } = await axios.put(`/api/admin/catelog/${payload.id}`,payload);
+  const { data } = await axios.put(`/api/admin/catelog/${payload.id}`, payload);
   return data?.data || {};
 };
 export const fetchDeleteCatelog = async (id: number) => {
@@ -50,17 +50,17 @@ export const fetchDeleteCatelog = async (id: number) => {
 };
 
 export const fetchUpdateSetting = async (payload: any) => {
-  const { data } = await axios.put(`/api/admin/setting`,payload);
+  const { data } = await axios.put(`/api/admin/setting`, payload);
   return data?.data || {};
 };
 
 export const fetchUpdateUser = async (payload: any) => {
-  const { data } = await axios.put(`/api/admin/user`,payload);
+  const { data } = await axios.put(`/api/admin/user`, payload);
   return data?.data || {};
 };
 
 export const fetchAddApiToken = async (payload: any) => {
-  const { data } = await axios.post(`/api/admin/apiToken`,payload);
+  const { data } = await axios.post(`/api/admin/apiToken`, payload);
   return data?.data || {};
 };
 export const fetchDeleteApiToken = async (id: number) => {

diff --git a/ui/website/src/components/Content/index.tsx b/ui/website/src/components/Content/index.tsx
@@ -10,6 +10,7 @@ import { useDebounce } from "../../utils/tools";
 import pinyin from "pinyin-match";
 import GithubLink from "../GithubLink";
 import DarkSwitch from "../DarkSwitch";
+import { isLogin } from "../../utils/check";
 
 const mutiSearch = (s, t) => {
   const source = (s as string).toLowerCase();
@@ -82,6 +83,12 @@ const Content = (props: any) => {
   const filteredData = useMemo(() => {
     if (data.tools) {
       return data.tools
+        .filter((item: any) => {
+          const hide = item.hide;
+          if (!hide) return true;
+          if (hide && isLogin()) return false;
+          return false;
+        })
         .filter((item: any) => {
           if (currTag === "全部工具") {
             return true;

diff --git a/ui/website/src/utils/check.ts b/ui/website/src/utils/check.ts
@@ -0,0 +1,3 @@
+export const isLogin = () => {
+  return localStorage.getItem('_token') ? true : false
+}