Wordpress怎么做筛选功能/品牌搜索引擎服务优化

Wordpress怎么做筛选功能,品牌搜索引擎服务优化,苏州浒关网站建设,用wordpress做app一、antd的datePicker自定义 需求:用户需要为日期选择器的每个日期单元格添加一个Tooltip,当鼠标悬停时显示日期、可兑换流量余额和本公会可兑流量。这些数据需要从接口获取。我需要结合之前的代码,确保Tooltip正确显示,并且数据…
一、antd的datePicker自定义
需求:用户需要为日期选择器的每个日期单元格添加一个Tooltip,当鼠标悬停时显示日期、可兑换流量余额和本公会可兑流量。这些数据需要从接口获取。我需要结合之前的代码,确保Tooltip正确显示,并且数据来自接口。

主要汉化点:

  1. 整个日期选择器面板中文化
  2. 星期显示为中文(周一 到 周日)
  3. 月份显示为中文格式
  4. 操作按钮汉化("确定"、"现在" 等)
  5. 日期格式统一使用中文年月日
  6. 加载提示中文化
  7. Tooltip内容中文化

效果包含:

  • 月份显示为 "2024年5月"
  • 星期列显示为 "一、二、三、四、五、六、日"
  • 今天按钮显示为 "今天"
  • 确定按钮显示为 "确定"
  • 十年范围显示为 "2020-2029"
  • 时间列显示为 "时","分","秒"
  • index.tsx文件
import React, { useState, useEffect } from 'react';
import { DatePicker, Tooltip, Spin, ConfigProvider } from 'antd';
import dayjs, { Dayjs } from 'dayjs';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
import './custom-datepicker.css';
import 'dayjs/locale/zh-cn';
import zhCN from 'antd/locale/zh_CN';
dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);
dayjs.locale('zh-cn'); // 设置dayjs为中文interface TrafficData {date: string;personal: string;guild: string;
}const App: React.FC = () => {const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);const [trafficData, setTrafficData] = useState<Record<string, TrafficData>>({});const [loading, setLoading] = useState(true);const today = dayjs().startOf('day');const sevenDaysLater = today.add(6, 'day');useEffect(() => {const mockApi = async () => {const data: Record<string, TrafficData> = {};Array.from({ length: 7 }).forEach((_, i) => {const date = today.add(i, 'day').format('YYYY-MM-DD');data[date] = {date,personal: `${[0, 20, 30, 40, 80, 100, 50][i]}%`,guild: `${Math.floor(Math.random() * 100000).toLocaleString()}`,};});await new Promise(resolve => setTimeout(resolve, 500));setTrafficData(data);setLoading(false);};mockApi();}, []);const disabledDate = (current: Dayjs) => current.isBefore(today, 'day') || current.isAfter(sevenDaysLater, 'day');if (loading) return <Spin tip="数据加载中..." />;return (<ConfigProvider locale={zhCN}> {/* 设置Ant Design为中文 */}<DatePickervalue={selectedDate}disabledDate={disabledDate}onChange={setSelectedDate}dropdownClassName="custom-picker-dropdown"dateRender={current => {const dateStr = current.format('YYYY-MM-DD');const data = trafficData[dateStr];const isInRange = current.isSameOrAfter(today) && current.isSameOrBefore(sevenDaysLater);const isSelected = selectedDate?.isSame(current, 'day');return (<div className="custom-cell-wrapper"><div className="native-cell-content">{current.date()}</div><Tooltiptitle={data ?`${dayjs(dateStr).format('YYYY年M月D日')}\n可兑流量余额: ${data.personal}\n本公会可兑流量: ${data.guild}`: '无可用数据'}overlayStyle={{whiteSpace: 'pre-line',pointerEvents: 'none',}}placement="bottom"mouseEnterDelay={0}mouseLeaveDelay={0.1}trigger={['hover']}getPopupContainer={trigger => trigger.parentElement!}><div className={`custom-cell ${isInRange ? 'recent-date' : ''}`}><div className={`date-number ${isSelected ? 'selected' : ''}`}>{current.date()}</div>{data && (<div className={`availability ${data.personal === '0%' ? 'empty' : ''}`}>余{data.personal}</div>)}</div></Tooltip></div>);}}/></ConfigProvider>);
};export default App;
  • custom-datepicker.css文件
/* custom-datepicker.css */
.custom-picker-dropdown {z-index: 1001;
}.custom-cell-wrapper {position: relative;height: 100%;width: 100%;
}.native-cell-content {visibility: hidden;
}.custom-cell {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;z-index: 2;padding: 3px 0;
}.date-number {width: 24px;height: 24px;line-height: 24px;text-align: center;color: #000;transition: all 0.2s;border-radius: 50%;
}.date-number.selected {background: #1890ff;color: white !important;
}.recent-date:hover .date-number:not(.selected) {color: #1890ff;
}.availability {font-size: 10px;line-height: 14px;color: #1890ff;margin-top: 2px;
}.availability.empty {color: #ff4d4f !important;
}.ant-picker-cell-inner {padding: 0 !important;height: 100% !important;
}.ant-picker-cell:hover .ant-picker-cell-inner {background: transparent !important;
}/* 添加中文面板样式调整 */
.ant-picker-date-panel {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}.ant-picker-header-view button {font-weight: 500;
}.ant-picker-cell-inner::before {border-radius: 50% !important;
}

二、封装成组件

  • DateSelector.tsx文件
// DateSelector.tsx
import React from 'react';
import {DatePicker, Tooltip, Spin, ConfigProvider} from 'antd';
import dayjs, { Dayjs } from 'dayjs';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
import 'dayjs/locale/zh-cn';
import './custom-datepicker.css';
import zhCN from 'antd/locale/zh_CN';dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);export interface TrafficData {personal: string;guild: string;
}interface DateSelectorProps {value?: Dayjs | null;trafficData: Record<string, TrafficData>;onChange?: (date: Dayjs | null) => void;loading?: boolean;
}const DateSelector: React.FC<DateSelectorProps> = ({value,trafficData,onChange,loading = false,
}) => {const today = dayjs().startOf('day');const sevenDaysLater = today.add(6, 'day');const disabledDate = (current: Dayjs) => current.isBefore(today, 'day') || current.isAfter(sevenDaysLater, 'day');const handleChange = (date: Dayjs | null) => {onChange?.(date);};if (loading) {return <Spin tip="数据加载中..." style={{ padding: '8px 0' }} />;}return (<ConfigProvider locale={zhCN}> {/* 设置Ant Design为中文 */}<DatePickervalue={value}disabledDate={disabledDate}onChange={handleChange}dropdownClassName="custom-picker-dropdown"dateRender={current => {const dateStr = current.format('YYYY-MM-DD');const data = trafficData[dateStr];const isInRange = current.isSameOrAfter(today) && current.isSameOrBefore(sevenDaysLater);const isSelected = value?.isSame(current, 'day');return (<div className="custom-cell-wrapper"><div className="native-cell-content">{current.date()}</div><Tooltiptitle={data ?`${dayjs(dateStr).format('YYYY年M月D日')}\n可兑流量余额: ${data.personal}\n本公会可兑流量: ${data.guild}`: '无可用数据'}overlayStyle={{whiteSpace: 'pre-line',pointerEvents: 'none',}}placement="bottom"mouseEnterDelay={0}mouseLeaveDelay={0.1}><div className={`custom-cell ${isInRange ? 'recent-date' : ''}`}><div className={`date-number ${isSelected ? 'selected' : ''}`}>{current.date()}</div>{data && (<div className={`availability ${data.personal === '0%' ? 'empty' : ''}`}>余{data.personal}</div>)}</div></Tooltip></div>);}}/></ConfigProvider>);
};export default DateSelector;
  • custom-datepicker.css
/* custom-datepicker.css */
.custom-picker-dropdown {z-index: 1001;
}.custom-cell-wrapper {position: relative;height: 100%;width: 100%;
}.native-cell-content {visibility: hidden;
}.custom-cell {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;z-index: 2;padding: 3px 0;
}.date-number {width: 24px;height: 24px;line-height: 24px;text-align: center;color: #000;transition: all 0.2s;border-radius: 50%;
}.date-number.selected {background: #1890ff;color: white !important;
}.recent-date:hover .date-number:not(.selected) {color: #1890ff;
}.availability {font-size: 10px;line-height: 14px;color: #1890ff;margin-top: 2px;
}.availability.empty {color: #ff4d4f !important;
}.ant-picker-cell-inner {padding: 0 !important;height: 100% !important;
}.ant-picker-cell:hover .ant-picker-cell-inner {background: transparent !important;
}/* 添加中文面板样式调整 */
.ant-picker-date-panel {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}.ant-picker-header-view button {font-weight: 500;
}.ant-picker-cell-inner::before {border-radius: 50% !important;
}
  • index.tsx文件
// 使用示例 ParentComponent.tsx
import React, { useState, useEffect } from 'react';
import DateSelector, { TrafficData } from './DateSelector';
import dayjs from 'dayjs';const ParentComponent: React.FC = () => {const [selectedDate, setSelectedDate] = useState<dayjs.Dayjs | null>(null);const [trafficData, setTrafficData] = useState<Record<string, TrafficData>>({});const [loading, setLoading] = useState(true);const today = dayjs().startOf('day');// useEffect(() => {//   // 模拟API调用//   const mockFetchData = async () => {//     const mockData = {//       [dayjs().format('YYYY-MM-DD')]: {//         personal: '80%',//         guild: '100,000',//       },//       [dayjs().add(1, 'day')//         .format('YYYY-MM-DD')]: {//         personal: '50%',//         guild: '75,000',//       },//     };////     await new Promise(resolve => setTimeout(resolve, 800));//     setTrafficData(mockData);//     setLoading(false);//   };////   mockFetchData();// }, []);useEffect(() => {const mockApi = async () => {const data: Record<string, TrafficData> = {};Array.from({ length: 7 }).forEach((_, i) => {const date = today.add(i, 'day').format('YYYY-MM-DD');data[date] = {personal: `${[0, 20, 30, 40, 80, 100, 50][i]}%`,guild: `${Math.floor(Math.random() * 100000).toLocaleString()}`,};});await new Promise(resolve => setTimeout(resolve, 500));setTrafficData(data);setLoading(false);};mockApi();}, []);return (<div style={{ padding: 24 }}><h2>日期选择器示例</h2><div style={{ marginBottom: 16 }}>当前选择:{selectedDate?.format('YYYY年M月D日') || '未选择'}</div><DateSelectorvalue={selectedDate}trafficData={trafficData}onChange={setSelectedDate}loading={loading}/></div>);
};export default ParentComponent;

三、生效时间选择完日期后,还需填入具体时间(或提供一个时间选择器),精确到分,默认为00:00;如选择的日期为今天,则填写的时间不能早于当前时间

// index.tsx
import React, { useState, useEffect } from 'react';
import { Row, Col, TimePicker, Spin, ConfigProvider } from 'antd';
import DateSelector, { TrafficData } from './DateSelector';
import dayjs, { Dayjs } from 'dayjs';
import zhCN from 'antd/locale/zh_CN';declare module 'dayjs' {interface Dayjs {isToday(): boolean;}
}dayjs.extend((o, c) => {c.prototype.isToday = function () {return this.isSame(dayjs(), 'day');}
});const DateTimePicker: React.FC = () => {const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);const [selectedTime, setSelectedTime] = useState<Dayjs>(dayjs().startOf('minute'));const [trafficData, setTrafficData] = useState<Record<string, TrafficData>>({});const [loading, setLoading] = useState(true);const today = dayjs().startOf('day');const disabledTime = (current: Dayjs | null) => {if (!current || !selectedDate?.isToday()) {return { disabledHours: () => [], disabledMinutes: () => [] };}const now = dayjs();return {disabledHours: () => {const currentHour = now.hour();return Array.from({ length: currentHour }, (_, i) => i);},disabledMinutes: (selectedHour: number) => {if (selectedHour < now.hour()) return [];return Array.from({ length: now.minute() }, (_, i) => i);},};};const handleDateChange = (date: Dayjs | null) => {setSelectedDate(date);setSelectedTime(date?.isToday() ? dayjs().startOf('minute') : dayjs().startOf('day'));};// useEffect(() => {//   // 模拟API请求//   const mockData = {//     [dayjs().format('YYYY-MM-DD')]: { personal: '80%', guild: '100,000' },//     [dayjs().add(1, 'day')//       .format('YYYY-MM-DD')]: { personal: '50%', guild: '75,000' },//   };////   setTimeout(() => {//     setTrafficData(mockData);//     setLoading(false);//   }, 800);// }, []);useEffect(() => {const mockApi = async () => {const data: Record<string, TrafficData> = {};Array.from({ length: 7 }).forEach((_, i) => {const date = today.add(i, 'day').format('YYYY-MM-DD');data[date] = {personal: `${[0, 20, 30, 40, 80, 100, 50][i]}%`,guild: `${Math.floor(Math.random() * 100000).toLocaleString()}`,};});await new Promise(resolve => setTimeout(resolve, 500));setTrafficData(data);setLoading(false);};mockApi();}, []);return (<ConfigProvider locale={zhCN}> {/* 设置Ant Design为中文 */}<div style={{ padding: 24, maxWidth: 380, margin: '0 auto' }}><h2 style={{ marginBottom: 24 }}>预约时间选择</h2><Row gutter={24} align="middle"><Col span={12}>{/*<div style={{ marginBottom: 8 }}>选择日期</div>*/}<DateSelectorvalue={selectedDate}trafficData={trafficData}onChange={handleDateChange}loading={loading}/></Col><Col span={12}>{/*<div style={{ marginBottom: 8 }}>选择时间</div>*/}<TimePickervalue={selectedTime}format="HH:mm"minuteStep={1}disabledTime={disabledTime}onChange={time => setSelectedTime(time || dayjs().startOf('minute'))}placeholder="请选择时间"disabled={!selectedDate}allowClear={false}showNow={false}style={{ width: '100%' }}/></Col></Row><div style={{ marginTop: 24, padding: 16, background: '#f5f5f5', borderRadius: 4 }}>已选择时间: {selectedDate ?`${selectedDate.format('YYYY年MM月DD日')} ${selectedTime.format('HH:mm')}`: '请先选择日期'}</div></div></ConfigProvider>);
};export default DateTimePicker;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/896512.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript 系列之:垃圾回收机制

前言 垃圾回收是一种自动内存管理机制&#xff0c;用于检测和清除不再使用的对象&#xff0c;以释放内存空间。当一个对象不再被引用时&#xff0c;垃圾回收器会将其标记为垃圾&#xff0c;然后在适当的时候清除这些垃圾对象&#xff0c;并将内存回收给系统以供其他对象使用。…

(七)趣学设计模式 之 适配器模式!

目录 一、 啥是适配器模式&#xff1f;二、 为什么要用适配器模式&#xff1f;三、 适配器模式的实现方式1. 类适配器模式&#xff08;继承插座 &#x1f468;‍&#x1f469;‍&#x1f467;‍&#x1f466;&#xff09;2. 对象适配器模式&#xff08;插座转换器 &#x1f50c…

内网穿透:打破网络限制的利器

目录 深入理解内网穿透 内网与外网的奥秘 内网穿透的原理剖析 总结与展望 在如今这个数字化时代&#xff0c;网络已经成为我们生活和工作中不可或缺的一部分。但你是否遇到过这样的困扰&#xff1a;在家办公时&#xff0c;想要访问公司内部的文件服务器&#xff0c;却因为网…

html css js网页制作成品——HTML+CSS甜品店网页设计(5页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…

初阶数据结构(C语言实现)——3顺序表和链表(2)

2.3 数组相关面试题 原地移除数组中所有的元素val&#xff0c;要求时间复杂度为O(N)&#xff0c;空间复杂度为O(1)。OJ链接 力扣OJ链接-移除元素删除排序数组中的重复项。力扣OJ链接-删除有序数组中的重复项合并两个有序数组。力扣OJ链接-合并两个有序数组 2.3.1 移除元素 1…

ubuntu终端指令集 shell编程基础(一)

磁盘指令 连接与查看&#xff1a;磁盘与 Ubuntu 有两种连接方式&#xff1b;使用ls /dev/sd*查看是否连接成功&#xff0c;通过df系列指令查看磁盘使用信息。若 U 盘已挂载&#xff0c;相关操作可能失败&#xff0c;需用umount取消挂载。磁盘操作&#xff1a;使用sudo fdisk 磁…

基于Spark的电商供应链系统的设计与实现

目录 1.研究背景与意义 2、国内外研究现状 3、相关理论与技术 &#xff08;一&#xff09;分布式计算系统Spark &#xff08;二&#xff09;数据仓库Hive &#xff08;三&#xff09;读取服务器本地磁盘的日志数据Flume &#xff08;四&#xff09;分布式消息队列Kafka …

使用TortoiseGit配合BeyondCompare实现在Git仓库中比对二进制文件

使用TortoiseGit的比对工具可以直接右键&#xff0c;点击选择比对和上一版本的变化差异&#xff1a; 但是TortoiseGit只能支持比对纯文本文件的变化差异&#xff0c;如果尝试比对二进制文件&#xff0c;会提示这不是一个有效的文本文件&#xff1a; BeyondCompare可以比对二进制…

BladeX框架接口请求跨域

前端使用代理请求接口&#xff0c;接口可以正常访问。如果换全路径请求就跨域。 除了后端要配置跨域 还需要修改配置文件对OPTIONS请求的限制

在VSCode中使用MarsCode AI最新版本详解

如何在VSCode中使用MarsCode AI&#xff1a;最新版本详解与使用场景 在当今快速发展的软件开发领域&#xff0c;人工智能&#xff08;AI&#xff09;技术的应用已经变得越来越普遍。ByteDance推出的MarsCode AI是一款强大的AI编程助手&#xff0c;旨在帮助开发者更高效地编写代…

mac修改docker的daemon.json 镜像文件

1、找到daemon.json文件的位置 docker info 可以看出位置在&#xff1a; /Users/spuer/.docker 2. 进入daemon.json 所在的目录&#xff1a; cd /Users/spuer/.docker3. 查看daemon.json的内容&#xff1a; more daemon.json可以看出&#xff0c;没有配置registry-mirrors&…

【大语言模型】【整合版】DeepSeek 模型提示词学习笔记(散装的可以看我之前的学习笔记,这里只是归纳与总结了一下思路,内容和之前发的差不多)

以下是个人笔记的正文内容: 原文在FlowUs知识库上&#xff0c;如下截图。里面内容和这里一样&#xff0c;知识排版好看一点 一、什么是 DeepSeek 1. DeepSeek 简介 DeepSeek 是一家专注于通用人工智能&#xff08;AGI&#xff09;的中国科技公司&#xff0c;主攻大模型研发与…

additional-spring-configuration-metadata.json实现springboot自定义提示

在配置additional-spring-configuration-metadata.json文件后&#xff0c;在开发人员的IDE工具使用个人编写的配置读取很有效的在application.properties或application.yml文件下完成提示。 配置元数据文件位于jar下面。 META-INF/spring-configuration-metadata.json它们使用简…

Dify在Ubuntu20.04系统的部署

文章目录 一、dify 介绍1.核心功能优势2.应用场景 二、dify 安装(docker方式)1.代码库下载2.配置文件修改3.启动docker 容器 三、遇到问题与解决1.使用sudo docker compose up -d报错2.使用service docker start报错 一、dify 介绍 Dify 是一款开源的大语言模型&#xff08;LL…

kafka-关于ISR-概述

一. 什么是ISR &#xff1f; Kafka 中通常每个分区都有多个副本&#xff0c;其中一个副本被选举为 Leader&#xff0c;其他副本为 Follower。ISR 是指与 Leader 副本保持同步的 Follower 副本集合。ISR 机制的核心是确保数据在多个副本之间的一致性和可靠性&#xff0c;同时在 …

.Net 9下使用Tensorflow.net---DNN_Keras

.Net 9下使用Tensorflow.net---DNN_Keras 1、创建应用&#xff0c;导入依赖2、编写代码1&#xff09;添加引用2&#xff09;创建基础对象3&#xff09;初始化数据集4&#xff09;重点步骤&#xff1a;创建 Keras下的DNN模型5&#xff09;训练模型得到评估值6&#xff09;结果输…

重大更新!锂电池剩余寿命预测新增 CALCE 数据集

往期精彩内容&#xff1a; 单步预测-风速预测模型代码全家桶-CSDN博客 半天入门&#xff01;锂电池剩余寿命预测&#xff08;Python&#xff09;-CSDN博客 超强预测模型&#xff1a;二次分解-组合预测-CSDN博客 VMD CEEMDAN 二次分解&#xff0c;BiLSTM-Attention预测模型…

开发一个交易所需要哪些技术?

在当今数字化时代&#xff0c;交易所作为金融市场的重要组成部分&#xff0c;其技术架构和功能的复杂性日益增加。无论是传统的股票、期货交易所&#xff0c;还是新兴的数字货币交易所&#xff0c;开发一个高效、安全、可靠的交易所系统都是一个复杂而系统的工程。本文将深入探…

【Maui】系统找不到指定的文件Xamarin.Android.Aapt2.targets

文章目录 前言一、问题描述二、解决方案三、软件开发&#xff08;源码&#xff09;四、项目展示 前言 .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架&#xff0c;用于使用 C# 和 XAML 创建本机移动和桌面应用。 使用 .NET MAUI&#xff0c;可从单个共享代码库开发可在 And…

GDidees CMS v3.9.1本地文件泄露漏洞(CVE-2023-27179)

漏洞简介&#xff1a; GDidees CMS v3.9.1及更低版本被发现存在本地文件泄露漏洞&#xff0c;漏洞通过位于 /_admin/imgdownload.php 的 filename 参数进行利用。 漏洞环境&#xff1a; 春秋云镜中的漏洞靶标&#xff0c;CVE编号为CVE-2023-27179 漏洞复现: 进入靶场发现没…