From 7ea4a7b7f54c89636584acc0c6759351a2af4ac2 Mon Sep 17 00:00:00 2001
From: rayadaschn <115447518+rayadaschn@users.noreply.github.com>
Date: Wed, 25 Oct 2023 08:35:51 +0800
Subject: [PATCH] feat: add pageSetting

---
 src/hooks/modules/useLoadQuestionData.ts      |  1 -
 .../edit/component/leftPanel/LeftLayers.tsx   | 43 ++++++++++++++++-
 .../component/rightPanel/RightPageSetting.tsx | 48 +++++++++++++++++++
 .../edit/component/rightPanel/index.tsx       | 11 +++--
 src/pages/question/edit/index.tsx             | 16 ++++++-
 5 files changed, 110 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/question/edit/component/rightPanel/RightPageSetting.tsx

diff --git a/src/hooks/modules/useLoadQuestionData.ts b/src/hooks/modules/useLoadQuestionData.ts
index d08a0e1..8702011 100644
--- a/src/hooks/modules/useLoadQuestionData.ts
+++ b/src/hooks/modules/useLoadQuestionData.ts
@@ -1,7 +1,6 @@
 import { useParams } from 'react-router-dom'
 import { getQuestionService } from '@/api'
 import { useDispatch } from 'react-redux'
-import store from '@/store'
 import { resetPageInfo } from '@/store/modules/pageInfoReducer'
 import { resetComponents } from '@/store/modules/componentsReducer'
 
diff --git a/src/pages/question/edit/component/leftPanel/LeftLayers.tsx b/src/pages/question/edit/component/leftPanel/LeftLayers.tsx
index e04902d..12faeb4 100644
--- a/src/pages/question/edit/component/leftPanel/LeftLayers.tsx
+++ b/src/pages/question/edit/component/leftPanel/LeftLayers.tsx
@@ -1,9 +1,12 @@
 import { useGetComponentInfo } from '@/hooks'
 import {
+  changeComponentHidden,
   changeComponentTitle,
   changeSelectedId,
+  toggleComponentLocked,
 } from '@/store/modules/componentsReducer'
-import { Input, message } from 'antd'
+import { EyeInvisibleOutlined, LockOutlined } from '@ant-design/icons'
+import { Button, Input, Space, message } from 'antd'
 import classNames from 'classnames'
 import React, { ChangeEvent, FC } from 'react'
 import { useDispatch } from 'react-redux'
@@ -39,6 +42,16 @@ const LeftLayers: FC = () => {
     dispatch(changeComponentTitle({ fe_id: selectedId, title: newTitle }))
   }
 
+  /** 切换显示/隐藏 */
+  const toggleHidden = (fe_id: string, isHidden: boolean) => {
+    dispatch(changeComponentHidden({ fe_id, isHidden }))
+  }
+
+  /** 切换锁定/解锁 */
+  const toggleLocked = (fe_id: string) => {
+    dispatch(toggleComponentLocked({ fe_id }))
+  }
+
   return (
     <>
       {componentList.map((c) => {
@@ -49,6 +62,13 @@ const LeftLayers: FC = () => {
           [titleDefaultClassName]: true,
           [selectedClassName]: fe_id === selectedId,
         })
+        const isShowName = 'opacity-20'
+        const hiddenButtonClassName = classNames({
+          [isShowName]: isHidden,
+        })
+        const clockButtonClassName = classNames({
+          [isShowName]: isHidden,
+        })
 
         return (
           <div
@@ -69,7 +89,26 @@ const LeftLayers: FC = () => {
               )}
               {fe_id !== changingTitleId && title}
             </div>
-            <div className="w-12 text-end">按钮</div>
+            <div className="w-12 text-end">
+              <Space>
+                <Button
+                  size="small"
+                  shape="circle"
+                  className={hiddenButtonClassName}
+                  icon={<EyeInvisibleOutlined />}
+                  type={isHidden ? 'primary' : 'text'}
+                  onClick={() => toggleHidden(fe_id, !isHidden)}
+                />
+                <Button
+                  size="small"
+                  shape="circle"
+                  className={clockButtonClassName}
+                  icon={<LockOutlined />}
+                  type={isLocked ? 'primary' : 'text'}
+                  onClick={() => toggleLocked(fe_id)}
+                />
+              </Space>
+            </div>
           </div>
         )
       })}
diff --git a/src/pages/question/edit/component/rightPanel/RightPageSetting.tsx b/src/pages/question/edit/component/rightPanel/RightPageSetting.tsx
new file mode 100644
index 0000000..0f0fe26
--- /dev/null
+++ b/src/pages/question/edit/component/rightPanel/RightPageSetting.tsx
@@ -0,0 +1,48 @@
+import { useGetPageInfo } from '@/hooks'
+import { resetPageInfo } from '@/store/modules/pageInfoReducer'
+import { Form, Input } from 'antd'
+import TextArea from 'antd/es/input/TextArea'
+import { FC } from 'react'
+import { useDispatch } from 'react-redux'
+
+const RightPageSetting: FC = () => {
+  const pageInfo = useGetPageInfo()
+  const [form] = Form.useForm()
+  const dispatch = useDispatch()
+
+  /** 更新表单 */
+  const handelValuesChange = () => {
+    dispatch(resetPageInfo(form.getFieldsValue()))
+  }
+
+  return (
+    <Form
+      layout="vertical"
+      initialValues={pageInfo}
+      onValuesChange={handelValuesChange}
+      form={form}
+    >
+      <Form.Item
+        name="title"
+        label="问卷标题"
+        rules={[{ required: true, message: '请输入标题' }]}
+      >
+        <Input placeholder="请输入标题" />
+      </Form.Item>
+
+      <Form.Item name="desc" label="问卷描述">
+        <TextArea placeholder="问卷描述信息" />
+      </Form.Item>
+
+      <Form.Item name="css" label="样式代码">
+        <TextArea placeholder="请输入 CSS 样式代码" />
+      </Form.Item>
+
+      <Form.Item name="js" label="脚本代码">
+        <TextArea placeholder="请输入 JS 脚本代码" />
+      </Form.Item>
+    </Form>
+  )
+}
+
+export default RightPageSetting
diff --git a/src/pages/question/edit/component/rightPanel/index.tsx b/src/pages/question/edit/component/rightPanel/index.tsx
index fc9d3a4..66b9951 100644
--- a/src/pages/question/edit/component/rightPanel/index.tsx
+++ b/src/pages/question/edit/component/rightPanel/index.tsx
@@ -3,8 +3,8 @@ import { FileTextOutlined, SettingOutlined } from '@ant-design/icons'
 import React, { FC } from 'react'
 import RightComponentProp from './RightComponentProp'
 import { Tabs } from 'antd'
+import RightPageSetting from './RightPageSetting'
 
-// TS 枚举
 enum TAB_KEYS {
   PROP_KEY = 'prop',
   SETTING_KEY = 'setting',
@@ -15,8 +15,11 @@ const EditRightPanel: FC = () => {
   const { selectedId } = useGetComponentInfo()
 
   useEffect(() => {
-    if (selectedId) setActiveKey(TAB_KEYS.PROP_KEY)
-    else setActiveKey(TAB_KEYS.SETTING_KEY)
+    if (selectedId) {
+      setActiveKey(TAB_KEYS.PROP_KEY)
+    } else {
+      setActiveKey(TAB_KEYS.SETTING_KEY)
+    }
   }, [selectedId])
 
   const tabsItems = [
@@ -38,7 +41,7 @@ const EditRightPanel: FC = () => {
           页面设置
         </span>
       ),
-      children: <div>页面设置</div>,
+      children: <RightPageSetting />,
     },
   ]
   return <Tabs activeKey={activeKey} items={tabsItems} />
diff --git a/src/pages/question/edit/index.tsx b/src/pages/question/edit/index.tsx
index c9d08fd..49dbeba 100644
--- a/src/pages/question/edit/index.tsx
+++ b/src/pages/question/edit/index.tsx
@@ -4,12 +4,21 @@ import EditHeader from './component/header'
 import EditLeftPanel from './component/leftPanel'
 import EditCenterPanel from './component/centerPanel'
 import EditRightPanel from './component/rightPanel'
+import { useDispatch } from 'react-redux'
+import { changeSelectedId } from '@/store/modules/componentsReducer'
 
 const Edit: FC = () => {
+  const dispatch = useDispatch()
   const { loading } = useLoadQuestionData()
 
   const { title } = useGetPageInfo()
-  useTitle(`问卷编辑 - ${title}`)
+  const pageTitle = title ? `问卷编辑 - ${title}` : '问卷调查'
+  useTitle(pageTitle)
+
+  /** 清空选择 */
+  const clearSelectedId = () => {
+    dispatch(changeSelectedId(''))
+  }
 
   return (
     <div className="h-screen flex flex-col bg-[#f0f2f5]">
@@ -20,7 +29,10 @@ const Edit: FC = () => {
             <EditLeftPanel />
           </div>
 
-          <div className="relative flex-1 overflow-hidden">
+          <div
+            className="relative flex-1 overflow-hidden"
+            onClick={clearSelectedId}
+          >
             <div className="absolute left-1/2 top-1/2 h-178 w-150 transform items-center justify-center overflow-auto shadow-2xl -translate-x-1/2 -translate-y-1/2">
               <EditCenterPanel loading={loading} />
             </div>