feat: 重构 App 组件的布局和样式;添加 SiderHeader 和 SystemSettings 组件。

2 weeks ago · d661e8e11e
7 changed files with 381 additions and 21 deletions
--- a/src/renderer/src/App.jsx
+++ b/src/renderer/src/App.jsx
@ -1,29 +1,14 @@
 import { Layout } from 'antd'
+import styles from './App.module.css'
 const { Sider, Content } = Layout
-const contentStyle = {
-  textAlign: 'center',
-  minHeight: 'calc(100vh - 20px)',
-  color: '#fff',
-  backgroundColor: '#0958d9'
-}
-const siderStyle = {
-  textAlign: 'center',
-  color: '#fff',
-  backgroundColor: '#1677ff'
-}
-const layoutStyle = {
-  borderRadius: 8,
-  overflow: 'hidden',
-  width: 'calc(100% - 8px)',
-  maxWidth: 'calc(100% - 8px)'
-}
+import SiderHeader from './components/SiderHeader/SiderHeader'
 const App = () => (
-  <Layout style={layoutStyle}>
-    <Sider width={'20%'} style={siderStyle}>
-      Sider
+  <Layout className={styles.layoutStyle}>
+    <Sider width={300} className={styles.siderStyle}>
+      <SiderHeader></SiderHeader>
    </Sider>
    <Layout>
-      <Content style={contentStyle}>Content</Content>
+      <Content className={styles.contentStyle}>Content</Content>
    </Layout>
  </Layout>
 )
--- a/src/renderer/src/App.module.css
+++ b/src/renderer/src/App.module.css
@ -0,0 +1,16 @@
+.contentStyle {
+  text-align: center;
+  min-height: calc(100vh - 20px);
+  background-color: #fff;
+}
+
+.siderStyle {
+  background-color: #fff;
+  border-right: 1px solid var(--border-color);
+}
+
+.layoutStyle {
+  border-radius: 4px;
+  overflow: hidden;
+  width: calc(100% - 8px);
+}
--- a/src/renderer/src/assets/base.css
+++ b/src/renderer/src/assets/base.css
@ -1,3 +1,7 @@
+:root{
+  --bg-color: #ebe9e9;
+  --border-color: #c4c2c2;
+}
 *,
 *::before,
 *::after {
--- a/src/renderer/src/components/SiderHeader/SiderHeader.jsx
+++ b/src/renderer/src/components/SiderHeader/SiderHeader.jsx
@ -0,0 +1,48 @@
+import styles from './SiderHeader.module.css'
+import { Flex } from 'antd'
+import { Select, Button, Input } from 'antd'
+import {
+  VideoCameraFilled,
+  GoldFilled,
+  ApiFilled,
+  SecurityScanFilled,
+  SlidersFilled
+} from '@ant-design/icons'
+import SystemSettings from '../SystemSettings/SystemSettings'
+function SiderHeader() {
+  return (
+    <Flex vertical>
+      <Flex className={styles.header}>
+        <div className={styles.titlePanel}>
+          挠度仪控制面板
+          <SlidersFilled />
+        </div>
+        <Flex vertical gap={8} className={styles.contentPanel}>
+          <Flex align="center">
+            <VideoCameraFilled className={styles.icon} />
+            <span className={styles.label}>设备列表:</span>
+            <Select className={styles.deviceSelect} placeholder="" />
+          </Flex>
+          <Flex align="center">
+            <span className={styles.label}>设备端口:</span>
+            <GoldFilled className={styles.icon} />
+            <Input className={styles.deviceInput} defaultValue="2230" />
+          </Flex>
+          <Flex gap={8}>
+            <Button className={styles.actionButton}>
+              <SecurityScanFilled />
+              搜索设备
+            </Button>
+            <Button className={styles.actionButton}>
+              <ApiFilled />
+              连接设备
+            </Button>
+          </Flex>
+        </Flex>
+      </Flex>
+      <SystemSettings />
+    </Flex>
+  )
+}
+
+export default SiderHeader
--- a/src/renderer/src/components/SiderHeader/SiderHeader.module.css
+++ b/src/renderer/src/components/SiderHeader/SiderHeader.module.css
@ -0,0 +1,40 @@
+/* SiderHeader component styles */
+
+.header {
+  border-bottom: 1px solid var(--bg-color);
+}
+
+.titlePanel {
+  writing-mode: vertical-rl;
+  text-align: center;
+  user-select: none;
+  font-size: 14px;
+  margin-top: 8px;
+}
+
+.contentPanel {
+  flex: 1;
+  padding: 4px;
+}
+
+.icon {
+  padding: 4px;
+}
+
+.label {
+  margin-right: 8px;
+}
+
+.deviceSelect {
+  flex: 1;
+  height: 26px;
+}
+
+.deviceInput {
+  flex: 1;
+  height: 26px;
+}
+
+.actionButton {
+  flex: 1;
+}
--- a/src/renderer/src/components/SystemSettings/SystemSettings.jsx
+++ b/src/renderer/src/components/SystemSettings/SystemSettings.jsx
@ -0,0 +1,138 @@
+import styles from './SystemSettings.module.css'
+import { Flex, InputNumber, Select, Button, Input, Checkbox } from 'antd'
+import {
+  SettingFilled,
+  InfoCircleFilled,
+  ControlFilled,
+  FolderFilled,
+  EyeOutlined,
+  EditOutlined
+} from '@ant-design/icons'
+
+function SystemSettings() {
+  return (
+    <Flex vertical gap={4} className={styles.container}>
+      <div className={styles.header}>
+        <span className={styles.title}>
+          <SettingFilled className={styles.titleIcon} />
+          系统设置
+        </span>
+      </div>
+
+      {/* 基本参数 */}
+      <div className={styles.basicParamsSection}>
+        <div className={styles.sectionTitle}>基本参数</div>
+        <Select
+          className={styles.paramSelect}
+          placeholder="请选择基本参数"
+          options={[
+            { value: 'imageSendTime', label: 'imageSendTime' },
+            { value: 'zeroCount', label: 'zeroCount' },
+            { value: 'resultCount', label: 'resultCount' },
+            { value: 'dataFps', label: 'dataFps' },
+            { value: 'videoFps', label: 'videoFps' },
+            { value: 'threshold', label: 'threshold' },
+            { value: 'invalidDataCount', label: 'invalidDataCount' }
+          ]}
+        />
+        <Input className={styles.paramInput} />
+        <Flex gap={12}>
+          <Button icon={<InfoCircleFilled />} className={styles.paramButton}>
+            读取
+          </Button>
+          <Button icon={<ControlFilled />} className={styles.paramButton}>
+            设置
+          </Button>
+        </Flex>
+      </div>
+
+      {/* 应用参数 */}
+      <div className={styles.appParamsSection}>
+        <div className={styles.sectionTitle}>应用参数</div>
+
+        {/* 系统功能 */}
+        <div className={styles.subSection}>
+          <div className={styles.subSectionTitle}>系统功能</div>
+          <Flex vertical gap={4}>
+            <Button className={styles.systemButton} block>
+              系统清零使能
+            </Button>
+            <Button className={styles.systemButton} block>
+              开始发送图片
+            </Button>
+            <Button className={styles.systemButton} block>
+              停止发送图片
+            </Button>
+          </Flex>
+        </div>
+
+        {/* 重连功能 */}
+        <div className={styles.subSection}>
+          <div className={styles.subSectionTitle}>重连功能</div>
+          <Checkbox className={styles.checkbox}>是否使能重连功能</Checkbox>
+          <div className={styles.reconnectInterval}>
+            <InputNumber addonBefore={'重连间隔'} className={styles.inputNumber} />
+          </div>
+        </div>
+
+        {/* 报警功能 */}
+        <div className={styles.subSection}>
+          <div className={styles.subSectionTitle}>报警功能</div>
+          <Checkbox className={styles.checkboxLarge}>是否使能报警功能</Checkbox>
+          <Flex gap="middle" className={styles.alarmInputs} vertical>
+            <InputNumber
+              precision={2}
+              addonBefore={'X轴上限'}
+              className={styles.inputNumber}
+              defaultValue="15.00"
+            />
+
+            <InputNumber
+              precision={2}
+              addonBefore={'X轴下限'}
+              className={styles.inputNumber}
+              defaultValue="15.00"
+            />
+
+            <InputNumber
+              precision={2}
+              addonBefore={'Y轴上限'}
+              className={styles.inputNumber}
+              defaultValue="15.00"
+            />
+
+            <InputNumber
+              precision={2}
+              addonBefore={'Y轴下限'}
+              className={styles.inputNumberLast}
+              defaultValue="15.00"
+            />
+          </Flex>
+        </div>
+      </div>
+
+      {/* 存储设置 */}
+      <div className={styles.storageSection}>
+        <Flex className={styles.storageTitle}>存储设置</Flex>
+        <Flex align="center" justify="space-between" className={styles.storageHeader}>
+          <div>
+            <FolderFilled className={styles.storageIcon} />
+            存储目录
+          </div>
+          <div>
+            <Button icon={<EyeOutlined />} type="text"></Button>
+            <Button icon={<EditOutlined />} type="text"></Button>
+          </div>
+        </Flex>
+
+        <Flex align="center" gap={8} className={styles.storageInputRow}>
+          <Input className={styles.storageInput} />
+        </Flex>
+        <Checkbox className={styles.checkboxRight}>实时数据</Checkbox>
+        <Checkbox>报警数据</Checkbox>
+      </div>
+    </Flex>
+  )
+}
+
+export default SystemSettings
--- a/src/renderer/src/components/SystemSettings/SystemSettings.module.css
+++ b/src/renderer/src/components/SystemSettings/SystemSettings.module.css
@ -0,0 +1,129 @@
+/* SystemSettings component styles */
+
+.container {
+  flex: 1;
+  overflow: auto;
+}
+
+.header {
+  padding: 4px;
+  padding-bottom: 0;
+}
+
+.title {
+  font-weight: bold;
+}
+
+.titleIcon {
+  margin-right: 4px;
+}
+
+.section {
+  border: 1px solid #eee;
+  border-radius: 6px;
+  margin: 4px;
+  padding: 4px;
+}
+
+.sectionTitle {
+  font-weight: bold;
+}
+
+.basicParamsSection {
+  border: 1px solid #eee;
+  border-radius: 6px;
+  margin: 4px;
+  padding: 4px;
+}
+
+.paramSelect {
+  width: 100%;
+  margin-bottom: 6px;
+  height: 26px;
+}
+
+.paramInput {
+  flex: 1;
+  height: 26px;
+  margin-bottom: 6px;
+}
+
+.paramButton {
+  flex: 1;
+  height: 28px;
+}
+
+.appParamsSection {
+  border: 1px solid #eee;
+  border-radius: 6px;
+  margin: 4px;
+}
+
+.subSection {
+  margin-bottom: 6px;
+  border: 1px solid #eee;
+  padding: 4px;
+}
+
+.subSectionTitle {
+  font-weight: bold;
+  margin-bottom: 6px;
+}
+
+.systemButton {
+  height: 28px;
+}
+
+.checkbox {
+  margin-bottom: 4px;
+}
+
+.checkboxLarge {
+  margin-bottom: 6px;
+}
+
+.reconnectInterval {
+  margin-bottom: 8px;
+}
+
+.inputNumber {
+  height: 18px;
+  margin-bottom: 4px;
+}
+
+.inputNumberLast {
+  height: 18px;
+  margin-bottom: 8px;
+}
+
+.alarmInputs {
+  margin-bottom: 6px;
+}
+
+.storageSection {
+  border: 1px solid #eee;
+  border-radius: 6px;
+  margin: 4px;
+  padding: 4px;
+}
+
+.storageTitle {
+  font-weight: bold;
+}
+
+.storageIcon {
+  padding: 4px;
+}
+
+.storageInputRow {
+  margin-bottom: 6px;
+}
+
+.storageInput {
+  height: 26px;
+  flex: 1;
+}
+
+.checkboxRight {
+  margin-right: 8px;
+}