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
    • -
-
-
底部区域
-
-
-
-
-
- - -
- - - - - - - - - - - - - - - - - - - - - \ 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）提供，本页为后台入口占位说明。

- -
-
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