提交

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@fluentui/react-components": "^9.55.1",
+    "@fluentui/react-datepicker-compat": "^0.4.53",
     "@fluentui/react-icons": "^2.0.264",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

src/component/content/index.css

@@ -159,4 +159,7 @@ a.content-side-li-nav {
     flex: 0 0 calc(100% - 227px);
     max-width: calc(100% - 227px); 
     padding: 8px;
+}
+.content-header-img-name {
+    align-self: center;
 }

src/component/form/index.css

@@ -0,0 +1,52 @@
+.layout-col-12.form-height {
+    padding: 16px;
+}
+
+.layout-col-12.card-height {
+    padding: 16px;
+}
+
+.layout-main {
+    height: calc(100vh - 145px);
+    overflow: auto;
+}
+
+.layout-col-12.form-height > div > div {
+    flex: 1 1 33.333333%;
+    max-width: 33.3333333%;
+    gap: 0;
+    padding: 8px;
+}
+
+.layout-col-12.form-height > div {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: 0;
+}
+
+div#field-ra__control {
+    flex-direction: row;
+}
+
+.form-btn {
+    display: flex;
+    flex-direction: row;
+}
+.checkbox-form > div {
+    display: flex;
+}
+
+.form-btngroup {
+    display: flex;
+    flex-direction: row !important;
+    align-items: flex-end;
+}
+
+.form-btngroup > button {
+    flex-grow: 1;
+    margin: 16px;
+    min-height: 35px;
+}

src/component/form/index.tsx

@@ -0,0 +1,135 @@
+import * as React from "react";
+import {
+  makeStyles,
+  useId,
+  Button,
+  Input,
+  Label,
+  Text,
+  Select,
+  Checkbox,
+  Field,
+  Textarea,
+  Radio,
+  RadioGroup
+} from "@fluentui/react-components";
+import {
+  PersonRegular,
+  MicRegular,
+  bundleIcon,
+  CalendarMonthFilled,
+  CalendarMonthRegular,
+} from "@fluentui/react-icons";
+import type { ButtonProps } from "@fluentui/react-components";
+import { DatePicker } from "@fluentui/react-datepicker-compat";
+import "./index.css"
+const useStyles = makeStyles({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "20px",
+    // Prevent the example from taking the full width of the page (optional)
+    maxWidth: "400px",
+    // Stack the label above the field (with 2px gap per the design system)
+    "> div": { display: "flex", flexDirection: "column", gap: "2px" },
+  },
+});
+
+const MicButton: React.FC<ButtonProps> = (props) => {
+  return (
+    <Button
+      {...props}
+      appearance="transparent"
+      icon={<MicRegular />}
+      size="small"
+    />
+  );
+};
+
+export const ContentBeforeAfter = () => {
+  const styles = useStyles();
+
+  const beforeId = useId("content-before");
+  const afterId = useId("content-after");
+  const beforeAndAfterId = useId("content-before-and-after");
+  const beforeLabelId = useId("before-label");
+  const afterLabelId = useId("after-label");
+
+  return (
+    <div className={styles.root}>
+      <div>
+        <Label htmlFor={beforeId}>姓名</Label>
+        <Input contentBefore={<PersonRegular />} id={beforeId} />
+      </div>
+
+      <div>
+        <Label htmlFor={afterId}>地址</Label>
+        <Input
+          contentAfter={<MicButton aria-label="Enter by voice" />}
+          id={afterId}
+        />
+      </div>
+
+      <div>
+        <Label htmlFor={beforeAndAfterId}>费用</Label>
+        <Input
+          contentBefore={
+            <Text size={400} id={beforeLabelId}>
+              $
+            </Text>
+          }
+          contentAfter={
+            <Text size={400} id={afterLabelId}>
+              .00
+            </Text>
+          }
+          aria-labelledby={`${beforeAndAfterId} ${beforeLabelId} ${afterLabelId}`}
+          id={beforeAndAfterId}
+        />
+      </div>
+      <div>
+        <Field label="性别">
+          <RadioGroup>
+            <Radio value="apple" label="男" />
+            <Radio value="pear" label="女" />
+            <Radio value="banana" label="未知" />
+          </RadioGroup>
+        </Field>
+      </div>
+      <div className="checkbox-form">
+        <Label htmlFor={beforeAndAfterId}>爱好</Label>
+        <Field>
+            <Checkbox label="写代码" />
+            <Checkbox label="看书" />
+            <Checkbox label="健身" />
+        </Field>
+      </div>
+      <div>
+        <label>Color</label>
+        <Select>
+          <option>Red</option>
+          <option>Green</option>
+          <option>Blue</option>
+        </Select>
+      </div>
+      <div>
+        <Field label="Select a date">
+          <DatePicker placeholder="Select a date..." />
+        </Field>
+      </div>
+      <div>
+        <Field label="Default Textarea">
+          <Textarea />
+        </Field>
+      </div>
+      <div className="form-btngroup">
+        <Button appearance="primary" icon={<CalendarMonthRegular />}>
+          确定
+        </Button>
+        <Button appearance="outline" icon={<CalendarMonthFilled />}>
+          取消
+        </Button>
+      </div>
+    </div>
+  );
+};

src/component/hedaer/index.css

@@ -4,7 +4,7 @@
 }
 
 .zl-365-header {
-    background-color: #004d88;
+    background-color: var(--colorBrandBackground);
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
@@ -12,6 +12,10 @@
     max-width: 100%;
 }
 
+.zl-365-header-search > span {
+    width: 400px;
+}
+
 .zl-365-logo-search {
     display: flex;
     flex-wrap: nowrap;
@@ -21,7 +25,7 @@
     position: absolute;
     left: 9px;
     top: 9px;
-    color: #0078d4;
+    color: var(--colorBrandBackground);
 }
 
 .header-logo-input {
@@ -73,16 +77,16 @@ span.header-search-svg {
     position: relative;
     left: 30px;
     top: 3px;
-    color: #0078d4;
+    color: var(--colorBrandBackground);
 }
 
 .zl-365-header-function:hover {
-    background-color: #004d88;
+    background-color: var(--colorBrandBackground);
     cursor: pointer;
 }
 
 .zl-365-header-tools>div:hover {
-    background-color: #065693;
+    background-color: var(--colorBrandBackground);
     cursor: pointer;
 }
 
@@ -204,7 +208,7 @@ input:focus {
 }
 
 input.header-logo-input:hover:after {
-    border-bottom: 2px solid #0f6cbd;
+    border-bottom: 2px solid var(--colorBrandBackground);
     position: absolute;
     content: '';
     width: 100%;
@@ -220,9 +224,18 @@ span.header-loge-input:hover:after {
     right: 0;
     width: 100%;
     height: 2px;
-    border-bottom: 2px solid #0f6cbd;
+    border-bottom: 2px solid var(--colorBrandBackground);
 }
 
 span.header-loge-input {
     position: relative;
+}
+
+span.header-loge-input > span {
+    width: 100%;
+}
+
+span.header-loge-input {
+    width: 100%;
+    padding: 0 8px;
 }

src/component/hedaer/index.jsx

@@ -5,9 +5,13 @@ import {
   mergeClasses,
   Button,
   Popover,
+  Input,
   PopoverSurface,
   PopoverTrigger,
 } from "@fluentui/react-components";
+import {
+  SearchRegular,
+} from "@fluentui/react-icons";
 import m365 from "../../img/m365.svg";
 import outlook from "../../img/outlook.svg";
 import oneDrice from "../../img/oneDrice.svg";
@@ -109,8 +113,8 @@ const PositionedComponent = (props) => {
         >
           <div class="zl-365-logo-search">
           <span class="header-loge-input">
-            <span class="header-logo-svg"><svg t="1730778975282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22289" width="16" height="16"><path d="M314.445 652.986l-190.73 190.73c-15.62 15.62-15.62 40.947 0 56.568 15.622 15.621 40.948 15.621 56.57 0l190.729-190.73C433.062 759.268 511.809 789 597.5 789 797.703 789 960 626.703 960 426.5S797.703 64 597.5 64 235 226.297 235 426.5c0 85.691 29.733 164.438 79.445 226.486zM597.5 709C441.48 709 315 582.52 315 426.5 315 270.48 441.48 144 597.5 144 753.52 144 880 270.48 880 426.5 880 582.52 753.52 709 597.5 709z" fill="currentColor" p-id="22290"></path></svg></span>
-            <input type="text" class="header-logo-input" placeholder="查找Microsoft 365应用" />
+                <Input  placeholder="在此网站中搜索" contentBefore={<SearchRegular />}/>
+      
             </span>
           </div>
         </div>
@@ -556,29 +560,7 @@ export default class Header extends Component {
         </div>
         <div class="zl-365-header-name">ZlSoftSharePoint</div>
         <div class="zl-365-header-search">
-          <span class="header-search-svg">
-            <svg
-              t="1730778975282"
-              class="icon"
-              viewBox="0 0 1024 1024"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              p-id="22289"
-              width="16"
-              height="16"
-            >
-              <path
-                d="M314.445 652.986l-190.73 190.73c-15.62 15.62-15.62 40.947 0 56.568 15.622 15.621 40.948 15.621 56.57 0l190.729-190.73C433.062 759.268 511.809 789 597.5 789 797.703 789 960 626.703 960 426.5S797.703 64 597.5 64 235 226.297 235 426.5c0 85.691 29.733 164.438 79.445 226.486zM597.5 709C441.48 709 315 582.52 315 426.5 315 270.48 441.48 144 597.5 144 753.52 144 880 270.48 880 426.5 880 582.52 753.52 709 597.5 709z"
-                fill="currentColor"
-                p-id="22290"
-              ></path>
-            </svg>
-          </span>
-          <input
-            type="text"
-            class="header-search-input"
-            placeholder="在SharePoint中搜索"
-          />
+          <Input  placeholder="在此网站中搜索" contentBefore={<SearchRegular />}/>
         </div>
         <div class="zl-365-header-tools">
           <div class="header-tools-set">

src/pages/home/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import {FocusMode as Card} from '../../component/card';
+import {ContentBeforeAfter as Form} from '../../component/form';
 
 function MyNavlink() {
     const { t } = useTranslation();
@@ -16,7 +17,9 @@ function MyNavlink() {
                 <div className="layout-col-8 list-height"></div>
             </div>
             <div className="layout-row">
-                <div className="layout-col-12 form-height"></div>
+                <div className="layout-col-12 form-height">
+                    <Form/>
+                </div>
             </div>
         </div>
     );