feat: 本次提交更新内容如下

样式修复
This commit is contained in:
笔记本里的永平
2025-07-22 12:07:59 +08:00
parent 8c85792f67
commit 28059d7e2b
10 changed files with 189 additions and 230 deletions

View File

@@ -79,8 +79,8 @@
} }
.stat-label { .stat-label {
font-size: 16px; font-size: 14px;
color: #666; color: #333;
line-height: 1.2; line-height: 1.2;
font-weight: bold; font-weight: bold;
} }

View File

@@ -8,10 +8,10 @@ import {
Switch, Switch,
Selector, Selector,
TextArea, TextArea,
NavBar,
} from "antd-mobile"; } from "antd-mobile";
import { LeftOutline } from "antd-mobile-icons"; import { ArrowLeftOutlined } from "@ant-design/icons";
import Layout from "@/components/Layout/Layout"; import Layout from "@/components/Layout/Layout";
import MeauMobile from "@/components/MeauMobile/MeauMoible";
import style from "./index.module.scss"; import style from "./index.module.scss";
import { createAutoGroup, updateAutoGroup } from "./api"; import { createAutoGroup, updateAutoGroup } from "./api";
@@ -82,14 +82,22 @@ const AutoGroupForm: React.FC = () => {
return ( return (
<Layout <Layout
header={ header={
<div className={style.headerBar}> <NavBar
<Button fill="none" size="small" onClick={() => navigate(-1)}> back={null}
<LeftOutline /> style={{ background: "#fff" }}
</Button> left={
<div className={style.title}> <div className="nav-title">
<ArrowLeftOutlined
twoToneColor="#1677ff"
onClick={() => navigate(-1)}
/>
</div>
}
>
<span className="nav-title">
{isEdit ? "编辑建群任务" : "新建建群任务"} {isEdit ? "编辑建群任务" : "新建建群任务"}
</div> </span>
</div> </NavBar>
} }
> >
<div className={style.autoGroupForm}> <div className={style.autoGroupForm}>

View File

@@ -1,38 +1,8 @@
.autoGroupList { .autoGroupList {
padding: 16px 0 80px 0; padding: 0 12px;
background: #f7f8fa;
min-height: 100vh;
}
.headerBar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
height: 48px;
background: #fff;
border-bottom: 1px solid #f0f0f0;
font-size: 18px;
font-weight: 600;
}
.title {
font-size: 18px;
font-weight: 600;
color: #222;
}
.searchBar {
display: flex;
align-items: center;
padding: 12px 16px 0 16px;
background: #fff;
gap: 8px;
} }
.taskList { .taskList {
margin-top: 16px;
padding: 0 8px;
} }
.taskCard { .taskCard {

View File

@@ -3,27 +3,31 @@ import { useNavigate } from "react-router-dom";
import { import {
Button, Button,
Card, Card,
Input,
Switch, Switch,
ProgressBar, ProgressBar,
Popover, Popover,
Toast, Toast,
NavBar,
} from "antd-mobile"; } from "antd-mobile";
import { Input } from "antd";
import { import {
MoreOutline, MoreOutline,
AddCircleOutline, AddCircleOutline,
SearchOutline,
FilterOutline,
UserAddOutline, UserAddOutline,
ClockCircleOutline, ClockCircleOutline,
TeamOutline, TeamOutline,
CalendarOutline, CalendarOutline,
} from "antd-mobile-icons"; } from "antd-mobile-icons";
import { ReloadOutlined, SettingOutlined } from "@ant-design/icons"; import {
ReloadOutlined,
SettingOutlined,
PlusOutlined,
ArrowLeftOutlined,
SearchOutlined,
} from "@ant-design/icons";
import Layout from "@/components/Layout/Layout"; import Layout from "@/components/Layout/Layout";
import MeauMobile from "@/components/MeauMobile/MeauMoible";
import style from "./index.module.scss"; import style from "./index.module.scss";
interface GroupTask { interface GroupTask {
@@ -175,35 +179,51 @@ const AutoGroupList: React.FC = () => {
return ( return (
<Layout <Layout
header={ header={
<div className={style.headerBar}> <>
<div className={style.title}></div> <NavBar
<Button back={null}
color="primary" style={{ background: "#fff" }}
fill="solid" left={
size="small" <div className="nav-title">
onClick={handleCreateNew} <ArrowLeftOutlined
twoToneColor="#1677ff"
onClick={() => navigate(-1)}
/>
</div>
}
right={
<Button size="small" color="primary" onClick={handleCreateNew}>
<PlusOutlined />
</Button>
}
> >
<AddCircleOutline /> <span className="nav-title"></span>
</Button> </NavBar>
</div> {/* 搜索栏 */}
<div className="search-bar">
<div className="search-input-wrapper">
<Input
placeholder="搜索计划名称"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
prefix={<SearchOutlined />}
allowClear
size="large"
/>
</div>
<Button
size="small"
onClick={() => {}}
loading={false}
className="refresh-btn"
>
<ReloadOutlined />
</Button>
</div>
</>
} }
footer={<MeauMobile />}
> >
<div className={style.autoGroupList}> <div className={style.autoGroupList}>
<div className={style.searchBar}>
<Input
placeholder="搜索任务名称"
value={searchTerm}
onChange={(val) => setSearchTerm(val)}
clearable
/>
<Button size="small" fill="outline" style={{ marginLeft: 8 }}>
<FilterOutline />
</Button>
<Button size="small" fill="outline" style={{ marginLeft: 8 }}>
<ReloadOutlined />
</Button>
</div>
<div className={style.taskList}> <div className={style.taskList}>
{filteredTasks.length === 0 ? ( {filteredTasks.length === 0 ? (
<Card className={style.emptyCard}> <Card className={style.emptyCard}>

View File

@@ -1,64 +1,3 @@
.header {
background: white;
border-bottom: 1px solid #e5e5e5;
position: sticky;
top: 0;
z-index: 10;
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
}
.header-left {
display: flex;
align-items: center;
gap: 12px;
}
.header-title {
font-size: 18px;
font-weight: 600;
color: #333;
}
.search-bar {
display: flex;
gap: 12px;
align-items: center;
padding: 16px;
}
.search-input-wrapper {
position: relative;
flex: 1;
.ant-input {
border-radius: 8px;
height: 40px;
}
}
.refresh-btn {
height: 40px;
width: 40px;
padding: 0;
border-radius: 8px;
}
.new-task-btn {
height: 32px;
padding: 0 12px;
border-radius: 6px;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.task-list { .task-list {
padding: 0 16px; padding: 0 16px;
display: flex; display: flex;

View File

@@ -1,28 +1,17 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { import { NavBar, Button, Toast, SpinLoading, Dialog, Card } from "antd-mobile";
NavBar,
Button,
Toast,
SpinLoading,
Dialog,
Popup,
Card,
Tag,
} from "antd-mobile";
import { Input } from "antd"; import { Input } from "antd";
import { import {
PlusOutlined, PlusOutlined,
CopyOutlined, CopyOutlined,
DeleteOutlined, DeleteOutlined,
SettingOutlined,
SearchOutlined, SearchOutlined,
ReloadOutlined, ReloadOutlined,
EyeOutlined, EyeOutlined,
EditOutlined, EditOutlined,
MoreOutlined, MoreOutlined,
LikeOutlined, LikeOutlined,
ClockCircleOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { ArrowLeftOutlined } from "@ant-design/icons"; import { ArrowLeftOutlined } from "@ant-design/icons";
@@ -262,8 +251,8 @@ const AutoLike: React.FC = () => {
</NavBar> </NavBar>
{/* 搜索栏 */} {/* 搜索栏 */}
<div className={style["search-bar"]}> <div className="search-bar">
<div className={style["search-input-wrapper"]}> <div className="search-input-wrapper">
<Input <Input
placeholder="搜索计划名称" placeholder="搜索计划名称"
value={searchTerm} value={searchTerm}
@@ -277,7 +266,7 @@ const AutoLike: React.FC = () => {
size="small" size="small"
onClick={fetchTasks} onClick={fetchTasks}
loading={loading} loading={loading}
className={style["refresh-btn"]} className="refresh-btn"
> >
<ReloadOutlined /> <ReloadOutlined />
</Button> </Button>

View File

@@ -6,6 +6,8 @@ import {
ArrowLeftOutlined, ArrowLeftOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { Button, Input, Switch, message, Spin } from "antd"; import { Button, Input, Switch, message, Spin } from "antd";
import { NavBar } from "antd-mobile";
import Layout from "@/components/Layout/Layout";
import { import {
createAutoLikeTask, createAutoLikeTask,
updateAutoLikeTask, updateAutoLikeTask,
@@ -120,21 +122,6 @@ const NewAutoLike: React.FC = () => {
} }
}; };
// 顶部导航栏
const renderNavBar = () => (
<div className={style["nav-bar"]}>
<Button
type="text"
icon={<ArrowLeftOutlined />}
className={style["nav-back-btn"]}
onClick={() => navigate(-1)}
/>
<span className={style["nav-title"]}>
{isEditMode ? "编辑自动点赞" : "新建自动点赞"}
</span>
</div>
);
// 步骤1基础设置 // 步骤1基础设置
const renderBasicSettings = () => ( const renderBasicSettings = () => (
<div className={style["form-section"]}> <div className={style["form-section"]}>
@@ -314,23 +301,43 @@ const NewAutoLike: React.FC = () => {
); );
return ( return (
<div className={style["new-page-bg"]}> <Layout
{renderNavBar()} header={
<div className={style["new-page-center"]}> <NavBar
{/* 步骤器保留新项目的 */} back={null}
{/* 你可以在这里插入新项目的步骤器组件 */} style={{ background: "#fff" }}
<div className={style["form-card"]}> left={
{currentStep === 1 && renderBasicSettings()} <div className="nav-title">
{currentStep === 2 && renderDeviceSelection()} <ArrowLeftOutlined
{currentStep === 3 && renderFriendSettings()} twoToneColor="#1677ff"
{isLoading && ( onClick={() => navigate(-1)}
<div className={style["loading"]}> />
<Spin />
</div> </div>
)} }
>
<span className="nav-title">
{isEditMode ? "编辑自动点赞" : "新建自动点赞"}
</span>
</NavBar>
}
>
<div className={style["new-page-bg"]}>
<div className={style["new-page-center"]}>
{/* 步骤器保留新项目的 */}
{/* 你可以在这里插入新项目的步骤器组件 */}
<div className={style["form-card"]}>
{currentStep === 1 && renderBasicSettings()}
{currentStep === 2 && renderDeviceSelection()}
{currentStep === 3 && renderFriendSettings()}
{isLoading && (
<div className={style["loading"]}>
<Spin />
</div>
)}
</div>
</div> </div>
</div> </div>
</div> </Layout>
); );
}; };

View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Button, Switch, Input, message, Badge, Dropdown, Menu } from "antd"; import { Switch, Input, message, Dropdown, Menu } from "antd";
import { NavBar, Button } from "antd-mobile";
import { import {
PlusOutlined, PlusOutlined,
SearchOutlined, SearchOutlined,
@@ -148,37 +149,48 @@ const MomentsSync: React.FC = () => {
<Layout <Layout
header={ header={
<> <>
<div className={style.headerBar}> <NavBar
back={null}
style={{ background: "#fff" }}
left={
<div className="nav-title">
<ArrowLeftOutlined
twoToneColor="#1677ff"
onClick={() => navigate("/workspace")}
/>
</div>
}
right={
<Button
size="small"
color="primary"
onClick={() => navigate("/workspace/moments-sync/new")}
>
<PlusOutlined />
</Button>
}
>
<span className="nav-title"></span>
</NavBar>
<div className="search-bar">
<div className="search-input-wrapper">
<Input
placeholder="搜索任务名称"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
prefix={<SearchOutlined />}
allowClear
size="large"
/>
</div>
<Button <Button
type="text" size="small"
icon={<ArrowLeftOutlined />}
onClick={() => navigate("/workspace")}
className={style.backBtn}
/>
<span className={style.title}></span>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => navigate("/workspace/moments-sync/new")}
className={style.addBtn}
>
</Button>
</div>
<div className={style.searchBar}>
<Input
placeholder="搜索任务名称"
prefix={<SearchOutlined />}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
onPressEnter={fetchTasks}
className={style.searchInput}
/>
<Button
icon={<ReloadOutlined />}
onClick={fetchTasks} onClick={fetchTasks}
loading={loading} loading={loading}
/> className="refresh-btn"
>
<ReloadOutlined />
</Button>
</div> </div>
</> </>
} }

View File

@@ -1,17 +1,8 @@
.pageBg { .pageBg {
background: #f8f6f3;
padding-bottom: 24px;
} }
.headerBar {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border-bottom: 1px solid #f0f0f0;
padding: 0 16px;
height: 56px;
}
.title { .title {
font-size: 18px; font-size: 18px;
@@ -32,21 +23,9 @@
margin-left: 8px; margin-left: 8px;
} }
.searchBar {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 16px 0 16px;
background: #f8f6f3;
}
.searchInput {
flex: 1;
min-width: 0;
}
.taskList { .taskList {
padding: 16px; padding:0 16px;
} }
.taskCard { .taskCard {

View File

@@ -123,9 +123,44 @@ input, textarea {
body, input, textarea, select, button { body, input, textarea, select, button {
touch-action: manipulation; touch-action: manipulation;
} }
// 导航栏样式 // 导航栏样式
.nav-title { .nav-title {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: var(--primary-color); color: var(--primary-color);
} }
// 搜索相关样式
.search-bar {
display: flex;
gap: 12px;
align-items: center;
padding: 12px;
}
.search-input-wrapper {
position: relative;
flex: 1;
.ant-input {
border-radius: 8px;
}
}
.refresh-btn {
height: 40px;
width: 40px;
padding: 0;
border-radius: 8px;
}
.new-task-btn {
height: 32px;
padding: 0 12px;
border-radius: 6px;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
}