From aded1c718bbe72f7fbbab2b3946df3f0f51e8ea8 Mon Sep 17 00:00:00 2001 From: ywxapp Date: Sun, 16 Aug 2026 17:02:42 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E6=B8=85=E7=90=86=E6=97=A0=E5=BC=95?= =?UTF-8?q?=E7=94=A8=E7=9A=84=E6=AE=8B=E7=95=99=E8=A7=86=E5=9B=BE=E4=B8=8E?= =?UTF-8?q?=E9=9D=99=E6=80=81=E6=96=87=E4=BB=B6(=E4=BF=9D=E7=95=99=20ywxap?= =?UTF-8?q?p=20=E5=AD=A4=E5=84=BF=E7=B1=BB)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addon/wxchat/view/index/index copy 2.html | 1277 --------------------- addon/wxchat/view/index/index copy.html | 1130 ------------------ app/backend/view/chat/index.html | 11 - public/static/backend/views/about.html | 17 - public/static/backend/views/theme.html | 84 -- 5 files changed, 2519 deletions(-) delete mode 100644 addon/wxchat/view/index/index copy 2.html delete mode 100644 addon/wxchat/view/index/index copy.html delete mode 100644 app/backend/view/chat/index.html delete mode 100644 public/static/backend/views/about.html delete mode 100644 public/static/backend/views/theme.html diff --git a/addon/wxchat/view/index/index copy 2.html b/addon/wxchat/view/index/index copy 2.html deleted file mode 100644 index 2874250..0000000 --- a/addon/wxchat/view/index/index copy 2.html +++ /dev/null @@ -1,1277 +0,0 @@ - - - - - - - - - - 纯 CSS 垂直选项卡 | 左侧标题 + 右侧内容 - - - - - - -
-
-

✨ 纯 CSS 垂直选项卡

-

左侧导航 + 右侧内容区域 | 无 JavaScript | Flexbox 布局 | 响应式设计 | 平滑动画

-
- -
- - - - - - - - -
- - - - - -
- - -
-
-

首页概览

-

这是一个完全使用 纯 CSS 实现 的垂直选项卡组件，无需任何 JavaScript 代码。

-

左侧为垂直排列的导航标题，右侧为对应的内容区域。通过 CSS 的 :checked 伪类和兄弟选择器实现切换逻辑。

-

组件特点：

-
    -
  • ✅ 100% 纯 CSS 实现，无 JavaScript 依赖
    • -
  • ✅ 语义化 HTML 结构，无障碍友好
    • -
  • ✅ Flexbox 布局，响应式设计
    • -
  • ✅ 平滑动画过渡效果
    • -
  • ✅ 激活状态视觉反馈清晰
    • -
-
- -
-

技术实现

-

核心原理： 利用隐藏的 radio 按钮的 :checked 状态，通过 CSS 兄弟选择器控制内容显示。

- -
-
-

HTML 结构

-

radio 按钮 + label 作为标题，内容区域使用绝对定位

-
-
-

CSS 选择器

-

#tab1:checked ~ .tab-contents .content-1

-
-
-

Flexbox 布局

-

容器 display: flex，标题区域 flex-direction: column

-
-
-

动画效果

-

使用 opacity + transform 实现平滑过渡

-
-
- -

- 关键 CSS 片段： -

- 
-            #tab1:checked ~ .tab-contents .content-1 {
-            opacity: 1;
-            transform: translateX(0);
-            pointer-events: all;
-            }
-
- -
-

设计特点

-

本组件在视觉设计上注重用户体验和现代感：

- -
-
-

激活状态反馈

-

左侧蓝色边框 + 背景高亮 + 微妙的右移动画

-
-
-

内容过渡动画

-

内容从右侧滑入，配合淡入效果，流畅自然

-
-
-

视觉层次

-

卡片阴影、分隔线、图标系统构建清晰信息层级

-
-
-

响应式优化

-

小屏设备自动切换为水平选项卡布局

-
-
- -

- 设计细节： 激活项使用 transform-origin 实现从底部生长的边框动画，配合 cubic-bezier 贝塞尔曲线创造更自然的运动感。 -

-
- -
-

使用场景

-

此垂直选项卡组件适用于多种场景：

- -
-
-

管理后台

-

设置面板、用户资料编辑、系统配置等

-
-
-

产品介绍页

-

功能特性分组展示，提升信息可读性

-
-
-

文档系统

-

API 文档分类、帮助中心内容组织

-
-
-

数据仪表盘

-

不同数据视图切换，保持界面整洁

-
-
- -

- 💡 最佳实践建议： -

-
    -
  • 标题文字简洁明了（建议 2-4 个汉字）
    • -
  • 选项卡数量控制在 3-6 个，避免滚动
    • -
  • 重要内容放在前两个选项卡（用户可见区域）
    • -
  • 为 radio 按钮添加 aria-label 提升无障碍体验
    • -
-
-
-
-
-

左侧导航

-

固定宽度 200px

-
-
-
头部区域
-
-

中间内容区域

-

这里是主要内容区域，会自动填充剩余空间。

-

左侧区域固定宽度，右侧区域自适应填充剩余空间。

-

右侧内部采用上中下结构：

-
    -
  • 头部区域固定高度 60px
    • -
  • 中间内容区域自动填充剩余空间
    • -
  • 底部区域固定高度 40px
    • -
-
-
底部区域
-
-
-
-
-
- -
-

✨ 纯 CSS 垂直选项卡组件 | 无 JavaScript 依赖 | 响应式设计 | 无障碍友好

-

适用于管理后台、产品介绍、文档系统等场景 • 复制代码即可直接使用

-
-
- - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/addon/wxchat/view/index/index copy.html b/addon/wxchat/view/index/index copy.html deleted file mode 100644 index 8f0435f..0000000 --- a/addon/wxchat/view/index/index copy.html +++ /dev/null @@ -1,1130 +0,0 @@ - - - - - - - 企业微信 · Layui版 - - - - - -
- -
-
-
💬 企业微信
-
-
-
- - -
- -
- - -
-
-
T
-
-
选择联系人开始聊天
-
未连接
-
-
- -
-
- -
-
-
👈 请从左侧选择联系人或群聊
-
-
- -
-
-
- -
-
- - -
-
- - -
-
-
-
- -
- - -
-
-
-
- - -
-
- -
-
- - -
● 已连接
- - - - - - - - - - - - - \ No newline at end of file diff --git a/app/backend/view/chat/index.html b/app/backend/view/chat/index.html deleted file mode 100644 index 2ecb01d..0000000 --- a/app/backend/view/chat/index.html +++ /dev/null @@ -1,11 +0,0 @@ -
-
聊天管理
-
-

聊天功能由 wxchat 插件（基于 GatewayWorker）提供，本页为后台入口占位说明。

-
    -
  • 实时聊天、好友 / 群组、消息记录由 wxchat 插件服务承载；
    • -
  • 相关配置请在「插件管理 → 配置」中维护 wxchat 插件；
    • -
  • 若需查看在线连接 / 消息吞吐，请前往 MQTT 代理（mqttbroker 插件）后台。
    • -
-
-
diff --git a/public/static/backend/views/about.html b/public/static/backend/views/about.html deleted file mode 100644 index 2450879..0000000 --- a/public/static/backend/views/about.html +++ /dev/null @@ -1,17 +0,0 @@ -
版本
-
-
- -
-
- -
关于
-
-
- 一套纯静态的 HTML 网页界面模板，以开源免费的 Layui 基础组件和页面模板 Demo 为组成，没有任何后端程序及数据库存储等服务端代码。 -

开发者使用该网页模板，可省去前端的大量工作，从而更高效地开发 Web 应用系统。 - -
-
\ No newline at end of file diff --git a/public/static/backend/views/theme.html b/public/static/backend/views/theme.html deleted file mode 100644 index 037e2d3..0000000 --- a/public/static/backend/views/theme.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - \ No newline at end of file