feat: [Group 1] Update template pages (#4)

* build: 新增数据mock，mock源采用前沿的 `faker-js/faker`

* build: axois二次封装

* refactor: mock状态码设置、添加request测试

* perf: 优化axios封装

* refactor: axios重构、新增时间转换

* build: 登录页初始化

* feat(auth): 实现基础认证 store

* feat(auth): 实现基础认证 store

* feat(drawer): 侧边栏状态管理示例

* feat(messages): 实现消息核心功能

* feat(message): 添加消息列表和聊天功能实现

* feat(profile): 添加个人中心个人资料编辑和设置页面 编辑设置仅为创建

* feat(avatar): 添加头像组件，支持加载失败时显示占位图及自定义样式

* feat(avatars): 本地添加用户头像和占位图文件

* feat(main): 在应用挂载前预加载消息头像

* polish: 网络请求库相关变量命名优化

* chore(dependencies): 添加 pinia 状态管理库tdesign-mobile-vue 组件库

* types(components): 更新组件类型定义，添加 tdesign-mobile-vue 组件支持

* build(types): 添加新的路由定义以支持消息和个人资料页面

* Merge branch 'dev/yzx' of https://github.com/liuyax0818/tdesign-mobile-vue-starter-community into dev/yzx

* feat: 403、404页面创建

* chore: 新增 `tdesign-icons-vue-next` 图标库

* chore: 全局盒子模型改为 `border-box`

* feat(layout): 页面布局完善，新增 `footer` 控制

* perf: 剔除无用 `hook`

* feat(profile): 添加个人信息表单页

* feat(profile): 完善个人信息表单页功能和用户体验

* feat(profile): 完善照片上传功能和相关验证

* feat: 手机号登录页面

* polish(profile): 调整css变量

* fix(components): 移除重复的TNavBar组件声明

* build(plugin): 修改 `unplugin-vue-components` 配置，排除 `src/components` 下的组件

* feat(banner): 新增 `banner` 组件，并挂载至全局

* feat: 添加 `Banner` 示例

* polish(profile): 优化上传组件样式

* refactor: 重构 `Banner` 组件，使用 `t-navbar` 封装

* refactor(auth): 重构认证存储，添加用户ID和加载状态管理

* feat(user): 添加用户状态管理和模拟用户数据库

* perf(profile): 更新用户信息展示和认证状态管理，优化服务列表和发布状态

* feat(types): 添加 AllIcons 和 Icon 组件到全局组件声明

* perf(profile): 优化用户信息加载状态管理，添加加载提示和错误处理

* feat(types): 添加 TSkeleton 组件到全局组件声明

* types(RouteMeta): 扩展 `RouteMeta` 类型

* perf(layout): 优化 `layout-body` 内容

* feat: 密码登录页面

* feat: 添加搜索页

* refactor: 登录页设置Banner

* refactor: 登录页css样式优化

* feat: 添加发布页

* feat: 个人信息表单页

* chore: 提出一些建议性注释，解决合并冲突

* feat(info): 更新个人信息表单验证规则

* feat(info): 优化生日和地址选择器

* polish(info): 优化表单验证规则，省市ref改成reactive

* chore: 修改一些代码，添加一些优化建议注释

* feat: 设置页初始化

* chore: 新增文档站

* perf: 调整搜索页面

* chore: 修改 `eslint` 规则，适配`vitepress` 的 `markdown` 文件

* perf(doc): 文档国际化适配

* refactor: 设置页css优化

* feat: 新增数据图表页面

* feat(directives): 添加复制文本指令及测试页面

* feat(layout): 实现未读消息与 layout-footer 的对接

* perf(avatar): 更新头像组件样式及交互逻辑

* refactor(doc): 国际化配置重构，抽离语言配置

* fix(mock): 修复 `mock` 路径跨平台不兼容问题

* feat: 页面目录创建

* feat(MessageBubble): 添加消息气泡组件及样式，整合至聊天界面

* feat(message): 优化消息显示逻辑，动态计算最大字符数并调整未读消息显示

* feat(style): 添加聊天组件样式及过渡动画变量

* refactor: 重构数据图表页面的表格

* refactor(directives): 简化复制文本指令实现

* polish: 优化发布界面UI

* feat(profile): 添加个人信息表单页mock

* refactor(message): 更改屏幕宽度计算逻辑，简化消息字符数处理

* perf(input): 修改自适应高度的消息输入框，优化发送消息逻辑，完善样式

* perf(chat): 重构聊天界面，优化消息发送逻辑及输入区域样式

* refactor(message): 简化消息发送逻辑，优化滚动行为及输入区域样式

* refactor(message): 重构消息列表组件，简化逻辑并优化样式

* refactor(message): 优化消息单元格布局，调整样式以提升可读性和响应式设计

* refactor(message): 移除联系人类型定义，优化未读消息计数逻辑及样式

* refactor(message): 移除不必要的文本区域调整逻辑，优化输入框样式及最大高度

* refactor(message): 隐藏消息输入框的滚动条以提升用户体验

* feat: 新增主页

* feat(directives): 添加触摸事件指令

* revert(profile): 删除旧版个人信息表单页

* feat(directives): 添加防抖和节流指令及测试

* feat(directives): 添加图片懒加载指令及测试

* polish(profile): 为用户名输入框添加最大长度限制

* fix: 修复 `tdesign-mobile-vue` 类型错误

* feat(components): `Banner` 组件新增边框参数

* refactor: 消息列表、对话页重写

* polish(message): 调整消息页导航栏的边框，使其符合UI

* perf(info): 优化了个人信息表单页，对一些逻辑进行拆分，补充注释和类型

* perf(setting): 设置页面调整

* perf(search): 搜索页优化，添加 `mock` 数据

* perf(search): 简化搜索页逻辑

* refactor(publish): `发布动态` 页面进行了小重构

* refactor(layout): `footer` 部分替换为 `t-tab-bar` 组件

* feat(layout): 新增 `showBackground` 配置，控制背景图显示，`Banner` 新增 `transparent` 参数，控制透明

* perf(profile): `个人中心` 页面调整

* refactor: 登录页样式修改

* refactor: 404等页面样式修改

* perf(statistics): `数据中心` 界面模块拆分

* polish: 登录页样式调整

* fix: 修复打包后svg图标不显示

* refactor(home): 主页模块拆分

* perf(home): 首页优化

* perf(layout): 路由配置新增背景颜色控制

* feat(utils): 新增字符串处理工具函数

* perf(login): `登陆页面` 模块拆分

* refactor: 项目结构调整

- 去除多余静态文件
- 去除多余状态管理，仅保留示例
- 去除没用到的工具函数
- 调整首页数据源结构
- 去除登录页遗留的调试信息

* docs: 更新文档及文档站

* docs: 文档目录框架搭建

* docs: 撰写搜索页文档

* docs: `mock`、`自定义指令` 文档编写

* docs: 更新对话页面、消息列表页面和个人中心文档内容

* docs: 更新对话页面和消息列表页面标题

* docs: 编写个人信息页文档

* docs: `国际化`、`Tailwind CSS` 文档编写

* docs: 撰写主页文档

* docs: `路由`、`全局配置`、`组件` 文档编写，修改其他文档细节

* docs: 撰写发布页文档

* docs: http、页面目录、错误页、登录页、设置页 文档编写

* docs: 撰写数据图表页文档

* docs: `导航栏` 文档编写，其他细节修改

* docs: 优化文档内容

* docs: 优化文档内容

* docs: 同步英文版文档

* docs(fix): 修复无法打包bug

* docs: 优化文档首页

* docs(charts): 修正文字换行

* docs: 优化英文版文档（VitePress开发指南、起步、进阶）

* docs: 优化英文版文档（功能模块）

* refactor(#2): 设置页groups进行封装

* refactor(#1): 页面目录补全

* perf: 优化主页发布按钮 #1

* perf: 添加发布按钮的消息通知触发 #1

* perf: 发出消息通知触发改为mock实现 #1

* perf: 将发布页面标签字体大小和视觉稿对齐 #1

* perf: 去除搜索发布数据中心页面的border-bottom #1

* feat(user): 添加用户登录状态管理功能

- 实现任意手机号密码登录功能
- 登录后固定返回用户"小小轩"信息
- 添加localStorage持久化存储

* perf(#1): 登录页部分样式调整

* perf(#10): 输入验证码时唤起数字键盘

* fix: 修复导航栏遮盖问题 #5

* perf: mock数据脱敏 #8

* perf: mock数据脱敏 #8

* feat(message): 支持消息内容换行显示，完善enter按键功能

* fix(package.json): 移除重复声明的依赖 #11

* fix(publish): 将底部按钮模块改为固定定位 #7

* fix(message): 将底部按钮模块改为固定定位 #7

* fix(info): 修复个人信息页样式问题 #12

* feat(search): 增加enter触发搜索逻辑 #3

* fix(#9): 修复 footer 不随着目录跳转更新问题

* perf(#3): 搜索框预留输入事件，并设置防抖

* perf(#1): 个人中心页面对齐设计稿

* refactor(#6): 使用图标自动引入

* perf: 优化tsx下的图标组件处理

* refactor: request优化、封装auth处理

* chore: 新增生产环境移除 `console.log` 插件

* polish: 剔除多余css和类型

* types: 优化api接口类型参数

* perf: 优化目录页、自定义指令页

* perf: 优化自定义指令，处理内存泄漏风险

* chore: 完善国际化内容

* fix(directives): img-lazy 在卸载时 disconnect #14

* fix(directives): 把 console 改为 Toast，不在生产环境输出 console #15

* feat: 添加用户信息存储功能，优化用户状态管理

* feat: 使用虚拟滚动组件

* feat: 添加 vue3-virtual-scroller 依赖

* feat: 优化虚拟滚动组件的滚动逻辑，确保消息列表渲染完成后滚动到底部

* types: 补充国际化函数在应用时的类型

* refactor: 登录、用户逻辑全部重构

* refactor(#16、#17): 用户登录 mock、token处理全部重构

* fix(profile): 修复hook丢失参数

* refactor: 虚拟滚动重构

* perf(#18): 消息列表页虚拟滚动处理

* docs: 更新文档内容

* perf(login): 修改验证码逻辑

* refactor: 调整静态资源目录结构

* chore: 补充国际化内容、类型、注释

---------

Co-authored-by: FunEnn <3095852337@qq.com>
Co-authored-by: Yi ZiXiong <neikun25@gmail.com>
Co-authored-by: Reuse5653 <tcoinsm@163.com>
Co-authored-by: Tonite14 <100067095+Tonite14@users.noreply.github.com>
Co-authored-by: Tonite14 <2014003602@qq.com>

Author: 5 people

.env.development

@@ -2,4 +2,7 @@
 VITE_BASE_PATH = '/'
 
 # 开发环境路由模式，推荐 hash
-VITE_ROUTER_MODE = 'hash'
+VITE_ROUTER_MODE = 'hash'
+
+# http 请求统一前缀
+VITE_API_BASE_URL = '/api'

.env.production

@@ -2,4 +2,7 @@
 VITE_BASE_PATH = '/'
 
 # 打包环境路由模式，推荐 history
-VITE_ROUTER_MODE = 'history'
+VITE_ROUTER_MODE = 'history'
+
+# http 请求统一前缀
+VITE_API_BASE_URL = '/api'

.gitignore

@@ -5,6 +5,10 @@ dist*
 report.html
 vite.config.*.timestamp*
 
+# vitepress
+**.vitepress/cache/**
+**.vitepress/dist/**
+
 yarn.lock
 npm-debug.log*
 .pnpm-error.log*

.vitepress/config.ts

@@ -0,0 +1,99 @@
+import { defineConfig } from 'vitepress'
+import { zh } from './locales'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  srcDir: 'docs',
+  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
+
+  locales: {
+    root: {
+      title: 'TDesign Docs',
+      description: 'TDesign Mobile Vue Quick Start',
+      label: 'English',
+      lang: 'en',
+      themeConfig: {
+        nav: [
+          { text: 'Home', link: '/' },
+          { text: 'Quickstart', link: '/guide/quick-start' },
+        ],
+        sidebar: [
+          {
+            text: 'Examples',
+            collapsed: false,
+            items: [
+              { text: 'Markdown Examples', link: '/vp-inst/markdown-examples' },
+              { text: 'Runtime API Examples', link: '/vp-inst/api-examples' },
+            ],
+          },
+          {
+            text: 'Get Start',
+            collapsed: false,
+            items: [
+              { text: 'Introduction', link: '/guide/instruction' },
+              { text: 'Quickstart', link: '/guide/quick-start' },
+              { text: 'File Structure', link: '/guide/directory' },
+            ],
+          },
+          {
+            text: 'Advanced',
+            collapsed: false,
+            items: [
+              { text: 'Mock', link: '/advanced/mock' },
+              { text: 'HTTP', link: '/advanced/http' },
+              { text: 'Internationalization', link: '/advanced/i18n' },
+              { text: 'Tailwind CSS', link: '/advanced/tailwindcss' },
+              { text: 'Components', link: '/advanced/components' },
+              { text: 'Router', link: '/advanced/router' },
+              { text: 'Global Config', link: '/advanced/config' },
+              { text: 'Directives', link: '/advanced/directives' },
+            ],
+          },
+          {
+            text: 'Pages',
+            collapsed: false,
+            items: [
+              { text: 'Navbar', link: '/pages/navbar' },
+              { text: 'Catalog', link: '/pages/catalog' },
+              { text: 'Search', link: '/pages/search' },
+              { text: 'Home', link: '/pages/home' },
+              { text: 'Publish', link: '/pages/publish' },
+              { text: 'Message list', link: '/pages/messages' },
+              { text: 'Chat', link: '/pages/chat' },
+              { text: 'Profile', link: '/pages/profile' },
+              { text: 'Profile info', link: '/pages/info' },
+              { text: 'Settings', link: '/pages/settings' },
+              { text: 'Charts', link: '/pages/charts' },
+              { text: 'Login', link: '/pages/login' },
+              { text: 'Error', link: '/pages/error' },
+            ],
+          },
+        ],
+      },
+    },
+    zh,
+  },
+
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    logo: '/logo2.png',
+    outline: {
+      level: 'deep',
+    },
+
+    search: {
+      provider: 'local',
+    },
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/TDesignOteam/tdesign-mobile-vue-starter-community' },
+    ],
+  },
+
+  vite: {
+    server: {
+      port: 4399,
+      host: '0.0.0.0',
+      proxy: {},
+    },
+  },
+})

.vitepress/locales/index.ts

@@ -0,0 +1 @@
+export * from './zh'

.vitepress/locales/zh.ts

@@ -0,0 +1,111 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const zh: LocaleSpecificConfig<DefaultTheme.Config> & { label: string, link?: string } = {
+  title: 'TDesign 文档',
+  description: 'TDesign 移动端模板',
+  label: '中文（简体）',
+  lang: 'zh',
+  link: '/zh',
+  themeConfig: {
+    search: {
+      provider: 'local',
+      options: searchOptions(),
+    },
+    outline: {
+      label: '页面导航',
+    },
+    lastUpdated: {
+      text: '最后更新于',
+    },
+    docFooter: {
+      prev: '上一页',
+      next: '下一页',
+    },
+    nav: [
+      { text: '首页', link: '/zh/index' },
+      { text: '快速开始', link: '/zh/guide/quick-start' },
+    ],
+    sidebar: getSideBar(),
+  },
+}
+
+function searchOptions(): Partial<DefaultTheme.LocalSearchOptions> {
+  return {
+    translations: {
+      button: {
+        buttonText: '搜索文档',
+        buttonAriaLabel: '搜索文档',
+      },
+      modal: {
+        displayDetails: '显示详情',
+        resetButtonTitle: '清除',
+        backButtonTitle: '返回',
+        noResultsText: '无法找到相关结果',
+        footer: {
+          selectText: '选择',
+          selectKeyAriaLabel: 'Enter 键',
+          navigateText: '切换',
+          navigateUpKeyAriaLabel: '向上箭头',
+          navigateDownKeyAriaLabel: '向下箭头',
+          closeText: '关闭',
+          closeKeyAriaLabel: 'Esc 键',
+        },
+      },
+    },
+  }
+}
+
+function getSideBar(): DefaultTheme.Sidebar {
+  return [
+    {
+      text: 'VitePress 开发指南',
+      collapsed: false,
+      items: [
+        { text: 'Markdown 示例', link: '/zh/vp-inst/markdown-examples' },
+        { text: '运行时 API 示例', link: '/zh/vp-inst/api-examples' },
+      ],
+    },
+    {
+      text: '起步',
+      collapsed: false,
+      items: [
+        { text: '项目介绍', link: '/zh/guide/instruction' },
+        { text: '快速开始', link: '/zh/guide/quick-start' },
+        { text: '目录结构', link: '/zh/guide/directory' },
+      ],
+    },
+    {
+      text: '进阶',
+      collapsed: false,
+      items: [
+        { text: 'Mock', link: '/zh/advanced/mock' },
+        { text: 'HTTP', link: '/zh/advanced/http' },
+        { text: '国际化', link: '/zh/advanced/i18n' },
+        { text: 'Tailwind CSS', link: '/zh/advanced/tailwindcss' },
+        { text: '组件', link: '/zh/advanced/components' },
+        { text: '路由', link: '/zh/advanced/router' },
+        { text: '全局配置', link: '/zh/advanced/config' },
+        { text: '自定义指令', link: '/zh/advanced/directives' },
+      ],
+    },
+    {
+      text: '功能模块',
+      collapsed: false,
+      items: [
+        { text: '导航栏', link: '/zh/pages/navbar' },
+        { text: '页面目录', link: '/zh/pages/catalog' },
+        { text: '搜索页', link: '/zh/pages/search' },
+        { text: '首页', link: '/zh/pages/home' },
+        { text: '发布页', link: '/zh/pages/publish' },
+        { text: '消息列表页', link: '/zh/pages/messages' },
+        { text: '对话页', link: '/zh/pages/chat' },
+        { text: '个人中心', link: '/zh/pages/profile' },
+        { text: '个人信息页', link: '/zh/pages/info' },
+        { text: '设置页', link: '/zh/pages/settings' },
+        { text: '数据图表页', link: '/zh/pages/charts' },
+        { text: '登录页', link: '/zh/pages/login' },
+        { text: '错误页', link: '/zh/pages/error' },
+      ],
+    },
+  ]
+}

.vitepress/theme/index.ts

@@ -0,0 +1,17 @@
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import './style.css'
+
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    })
+  },
+  enhanceApp({ app, router, siteData }) {
+    // ...
+  },
+} satisfies Theme

.vitepress/theme/style.css

@@ -0,0 +1,130 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create an accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attached to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}