79 lines
4.1 KiB
Markdown
79 lines
4.1 KiB
Markdown
# 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` 的导入错误
|