up

.workbuddy/expert-history.json

@@ -13,5 +13,5 @@
       }
     ]
   },
-  "lastUpdated": 1774931057335
+  "lastUpdated": 1774942956287
 }

.workbuddy/memory/2026-03-31.md

@@ -6,3 +6,73 @@
 - 用户确认：主力前端开发目录是 `frontend/ops_vue_js`（JS 版，Tabler UI）
 - `frontend/ops_vue/`（TypeScript 版）为旧目录已弃用
 - MEMORY.md 已更新为正确的前端目录信息
+
+## 前端整体重构 ✅
+- **方案**：整体翻新（方案 C），新建文件替换旧代码
+- **构建结果**：6176 modules transformed, 0 errors, 7.23s
+
+### 新建基础设施层
+- `src/api/index.js` — axios 实例 + 请求/响应拦截器 + async/await 封装
+- `src/api/auth.js` — 认证相关 API（登录/注册/修改密码/更新信息等）
+- `src/api/purchase.js` — 采购相关 API
+- `src/stores/user.js` — 精简的 user store（computed getter、async actions）
+- `src/stores/toast.js` — 全局 Toast 通知 store
+- `src/composables/usePageTitle.js` — 自动页面标题（一行搞定，替代三件套）
+- `src/composables/index.js` — useValidation + isValidEmail
+
+### 新建布局和组件
+- `src/layouts/DefaultLayout.vue` — 带 Header + Footer 的主布局
+- `src/layouts/AuthLayout.vue` — 登录/注册的全屏居中布局
+- `src/components/AppHeader.vue` — 导航栏（Tabler Icons 替代内联 SVG）
+- `src/components/AppFooter.vue` — 页脚
+- `src/components/AppToast.vue` — 全局 Toast 通知（替代 MyOffcanvas）
+- `src/components/SettingNav.vue` — 设置侧边导航
+
+### 重写的页面
+- 认证：LoginView / RegisterView / ForgotPasswordView
+- 设置：AccountView / ContactView / SecurityView
+- 采购：PurchaseList / AddOrder / ShowOrder
+- 其他：HomeView / ScheduleView / WarehouseView / AdminView / NotFoundView
+
+### 核心改进
+1. **API 层**：回调地狱 → async/await，统一拦截器处理 cookie 注入和错误
+2. **响应式**：DOM 操作 `ref.value.classList.add()` → `v-model` + `is-invalid` class
+3. **Auth guard**：每个页面手动检查 → Router beforeEach 统一守卫
+4. **页面标题**：三件套复制5遍 → `usePageTitle(key)` 一行
+5. **图标**：内联 SVG → `@tabler/icons-vue` 组件
+6. **命名**：HeardMain → AppHeader, myfunc → composables 等
+7. **布局分离**：认证页和主站页使用不同 Layout
+
+### 删除的旧文件
+- `my_network_func.js`, `myfunc.js`
+- `HeardMain.vue`, `FooterMain.vue`, `MyOffcanvas.vue`, `settingNavigation.vue`
+- `HelloWorld.vue`, `TheWelcome.vue`, `WelcomeItem.vue`
+- 所有旧视图文件（loginView/registerView/forgotPassword/adminView/warehouse/test/404/scheduleView 等）
+
+## CSS 框架迁移：Bootstrap/Tabler → Tailwind CSS v4 ✅
+- **安装**：`tailwindcss` + `@tailwindcss/vite`（Vite 插件方式）
+- **卸载**：`@tabler/core`、`bootstrap`
+- **构建结果**：6160 modules transformed, 0 errors, 8.84s
+- CSS 总大小：~56 kB（之前 Tabler 整包 200+ kB），Tree-shaking 后更小
+
+### 改动的文件（全部从 Bootstrap class 替换为 Tailwind class）
+- `vite.config.js` — 添加 tailwindcss 插件
+- `src/assets/main.css` — `@import "tailwindcss"` 替换 Tabler CSS
+- `src/main.js` — 移除 Tabler CSS 导入
+- `src/layouts/` — DefaultLayout/AuthLayout
+- `src/components/` — AppHeader/AppFooter/AppToast/SettingNav/imageCropper
+- `src/views/` — 所有 15 个视图文件全部重写
+- 主题切换改用 `document.documentElement.classList.toggle('dark')`
+- 所有表单控件、按钮、卡片、表格、分页等均用 Tailwind class 重写
+
+## 字符损坏修复（第二次） ✅
+- 20 个 Vue 文件因批量字符替换脚本导致损坏（`a→n`, `i→l`, `s→n` 等偏移）
+- 前一 session 已修复 4 个组件文件（dateTimePicker/tagadder/useDropzone/imageCropper）
+- 本次 session 修复了剩余 14 个视图文件：
+  - Auth: LoginView, RegisterView, ForgotPasswordView
+  - 基础: HomeView, NotFoundView
+  - 占位: WarehouseView, AdminView, ScheduleView（FullCalendar）
+  - Settings: AccountView, ContactView, SecurityView
+  - Purchase: PurchaseList, AddOrder, ShowOrder
+- **构建验证**：6169 modules, 0 errors, 15.73s ✅
+- 修复了 `IconFileTypeText` 不存在于 `@tabler/icons-vue` 的导入错误

.workbuddy/memory/MEMORY.md

@@ -19,23 +19,24 @@
 - **框架**：Vue 3 + JavaScript（非 TypeScript）
 - **路由**：Vue Router（Hash 模式）
 - **构建工具**：Vite 7
-- **UI 框架**：Tabler（Bootstrap 5 + @tabler/core）
+- **CSS 框架**：Tailwind CSS v4（@tailwindcss/vite 插件）
 - **图标**：@tabler/icons-vue
 - **状态管理**：Pinia
 - **国际化**：vue-i18n
 - **日期选择**：flatpickr / litepicker
 - **文件上传**：FilePond
-- **图片裁剪**：CropperJS / @cropper/*
+- **图片裁剪**：CropperJS（@cropper/elements）
 - **日历**：FullCalendar（含 daygrid/timegrid/list/interaction）
-- **其他组件**：MyOffcanvas、imageCropper、datePicker、dateTimePicker、tagadder、useDropzone 等
+- **其他组件**：imageCropper、tagadder、dateTimePicker、useDropzone 等
+- ~~**UI 框架**：Tabler（Bootstrap 5 + @tabler/core）~~ 已弃用（2026-03-31 迁移至 Tailwind）
 
 > 注意：`frontend/ops_vue/`（TypeScript 版）是旧目录，已弃用
 
 ### 前端页面路由（ops_vue_js）
 - `/` — 首页（HomeView）
-- `/login` — 登录
-- `/register` — 注册
-- `/forgot_password` — 找回密码
+- `/login` — 登录（AuthLayout）
+- `/register` — 注册（AuthLayout）
+- `/forgot_password` — 找回密码（AuthLayout）
 - `/admin` — 管理后台
 - `/schedule` — 日程/排班（FullCalendar）
 - `/purchase` — 采购订单列表
@@ -71,11 +72,25 @@
 
 ## 项目现状（2026-03-31）
 - 后端基础架构完整，采购模块已有基础实现
-- 前端 `ops_vue_js` 目录是主力开发目录（JS 版 Vue3，Tabler UI）
-- 已有页面：登录/注册/采购/日程/仓库/设置等
+- 前端 `ops_vue_js` 目录是主力开发目录（Vue 3 + Tailwind CSS v4）
+- **已完成前端整体重构**：API 层 async/await、Router 导航守卫、composables、布局分离
+- **已完成 Tabler → Tailwind CSS v4 迁移**
+- **已修复所有字符损坏文件**（20 个 Vue 文件，因批量脚本偏移错误）
+- 所有页面构建通过，6169 modules, 0 errors
 - 前端构建产物放在 `backend/dist/` 供后端 serve
 - `frontend/ops_vue/`（TypeScript 版）是旧目录，已弃用
-- 目录名原为 `frontent`（拼写错误），实际文件系统路径为 `frontend`
+
+## 经验教训
+- **批量字符替换脚本危险**：需在源码上使用前先备份，并限定替换范围
+- **`@tabler/icons-vue` 不包含所有图标**：如 `IconFileTypeText` 不存在，使用前需确认
+
+## 前端重构后架构（2026-03-31）
+- **API 层**：`src/api/` — axios 实例 + 拦截器，async/await 封装
+- **Composables**：`src/composables/` — usePageTitle、useValidation、isValidEmail
+- **Stores**：`src/stores/user.js`（精简）、`src/stores/toast.js`（全局通知）
+- **布局**：`src/layouts/DefaultLayout.vue`（主站）、`AuthLayout.vue`（认证页）
+- **公共组件**：AppHeader、AppFooter、AppToast、SettingNav
+- **命名规范**：PascalCase 文件名，camelCase 函数名
 
 ## 开发规范
 - API 请求统一携带 `userCookieValue` 做身份验证