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

2026-03-31 工作日志

项目初次接触

• 完整阅读了 OPS2 项目结构，初始化了 MEMORY.md
• 项目是一个前后端分离的运营管理系统（Go + Vue3）
• 用户确认：主力前端开发目录是 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 的导入错误