Skip to content

A
assets
Commit e470998d authored by 罗超's avatar 罗超
Browse files
Options

调整分支适配问题

parent 876dcb48
Hide whitespace changes
Inline Side-by-side
Showing with 20972 additions and 12923 deletions
.kiro/specs/jewelry-text-adaptation/design.md 0 → 100644
View file @ e470998d
# 珠宝销售系统文字适配设计文档
## 概述
本设计文档描述了如何将现有资产管理系统的界面文字系统性地改造为珠宝销售行业术语。设计采用配置化和模块化的方式，确保文字修改的一致性和可维护性。
## 架构设计
### 文字管理架构
```
前端显示层
↓
文字配置层 (新增)
↓
业务逻辑层 (不变)
↓
数据访问层 (不变)
```
### 文字配置策略
1. **集中化配置**：创建统一的文字配置文件
2. **模块化管理**：按功能模块组织文字配置
3. **动态替换**：运行时动态替换显示文字
4. **向后兼容**：保持原有数据结构不变
## 组件设计
### 1. 文字配置管理组件
**配置文件结构：**
```javascript
// jewelry-terms.js
export const jewelryTerms = {
// 系统级别术语
system: {
title: "珠宝销售管理系统",
welcome: "欢迎使用珠宝销售管理系统"
},
// 导航菜单术语
navigation: {
assetManagement: "珠宝商品管理",
materialManagement: "珠宝库存管理",
approvalManagement: "销售审批管理",
reportManagement: "销售报表管理"
},
// 页面标题术语
pageTitle: {
assetsList: "珠宝商品列表",
materialWarehouse: "珠宝仓库管理",
approvalMan: "销售审批管理"
},
// 表格列标题术语
tableHeaders: {
assetName: "珠宝名称",
assetCode: "商品编码",
assetStatus: "商品状态",
supplierName: "珠宝供应商"
},
// 按钮文字术语
buttons: {
addAsset: "新增珠宝",
editAsset: "编辑珠宝",
deleteAsset: "删除珠宝",
sellAsset: "销售出库"
},
// 状态术语
status: {
inUse: "在售",
idle: "库存",
maintenance: "维护保养",
disposed: "已下架",
borrowed: "已预定"
},
// 操作术语
operations: {
receive: "销售",
return: "退货",
transfer: "调货",
dispose: "下架处理"
}
}
```
### 2. 文字替换组件
**Vue混入组件：**
```javascript
// jewelry-terms-mixin.js
import { jewelryTerms } from './jewelry-terms.js'
export const jewelryTermsMixin = {
data() {
return {
$terms: jewelryTerms
}
},
methods: {
// 获取术语
getTerm(category, key) {
return this.$terms[category]?.[key] || key
},
// 替换页面标题
setJewelryTitle(originalTitle) {
const mapping = {
'资产列表': '珠宝商品列表',
'物料仓库': '珠宝仓库管理',
'审批管理': '销售审批管理'
}
return mapping[originalTitle] || originalTitle
}
}
}
```
### 3. 全局文字过滤器
**Vue过滤器：**
```javascript
// jewelry-filters.js
export const jewelryFilters = {
// 资产术语过滤器
assetTerm(value) {
const mapping = {
'资产': '珠宝商品',
'资产名称': '珠宝名称',
'资产编码': '商品编码',
'资产状态': '商品状态'
}
return mapping[value] || value
},
// 状态术语过滤器
statusTerm(value) {
const mapping = {
'在用': '在售',
'闲置': '库存',
'维修': '维护保养',
'报废': '已下架',
'借出': '已预定'
}
return mapping[value] || value
},
// 操作术语过滤器
operationTerm(value) {
const mapping = {
'领用': '销售',
'归还': '退货',
'调拨': '调货',
'处置': '下架处理'
}
return mapping[value] || value
}
}
```
## 数据模型设计
### 文字映射数据结构
```javascript
// 页面级别映射
const pageMapping = {
'/assetsList': {
title: '珠宝商品列表',
breadcrumb: ['首页', '珠宝管理', '商品列表']
},
'/Materialwarehouse': {
title: '珠宝仓库管理',
breadcrumb: ['首页', '库存管理', '仓库管理']
}
}
// 组件级别映射
const componentMapping = {
'assetsList': {
searchPlaceholder: '请输入珠宝名称',
tableHeaders: ['珠宝名称', '商品编码', '商品状态', '供应商'],
buttons: ['新增珠宝', '编辑', '删除', '销售出库']
}
}
```
## 界面设计
### 1. 导航菜单改造
**原有菜单结构 → 珠宝业务菜单结构：**
```
系统管理
├── 资产分类 → 珠宝分类管理
├── 耗材分类 → 配件分类管理
└── 供应商管理 → 珠宝供应商管理
资产管理
├── 资产列表 → 珠宝商品管理
├── 出库申请 → 销售出库申请
├── 采购列表 → 珠宝采购管理
├── 派发&退库 → 销售&退货管理
├── 借出&归还 → 预定&取消管理
└── 盘点管理 → 库存盘点管理
物料管理
├── 物料仓库 → 珠宝仓库管理
├── 物料档案 → 珠宝档案管理
├── 入库单 → 珠宝入库管理
├── 出库单 → 珠宝销售出库
└── 现存量查询 → 库存查询
审批管理
├── 审批管理 → 销售审批管理
├── 资产申请 → 珠宝销售申请
├── 我的资产 → 我的销售记录
└── 请购单 → 珠宝采购申请
报表管理
├── 资产统计 → 珠宝销售统计
├── 资产汇总查询 → 珠宝库存汇总
├── 资产履历 → 珠宝销售记录
└── 到期资产 → 预定到期提醒
```
### 2. 页面标题设计
**标题层次结构：**
```
一级标题：珠宝销售管理系统
二级标题：功能模块名称（如：珠宝商品管理）
三级标题：具体页面名称（如：珠宝商品列表）
```
### 3. 表单字段标签设计
**字段标签映射：**
```javascript
const fieldLabels = {
// 商品相关
'Name': '珠宝名称',
'PropertyNum': '商品编码',
'SerialNumber': '序列号',
'PropertyStatus': '商品状态',
'SupplierId': '珠宝供应商',
// 库存相关
'WarehouseName': '珠宝仓库',
'StockQuantity': '库存数量',
'SafeStock': '安全库存',
// 销售相关
'CustomerName': '客户姓名',
'SalePrice': '销售价格',
'SaleDate': '销售日期'
}
```
## 错误处理设计
### 文字缺失处理
```javascript
// 安全的文字获取函数
function getSafeTerm(category, key, fallback = null) {
try {
return jewelryTerms[category]?.[key] || fallback || key
} catch (error) {
console.warn(`术语获取失败: ${category}.${key}`)
return fallback || key
}
}
```
### 兼容性处理
```javascript
// 向后兼容处理
const compatibilityLayer = {
// 如果新术语不存在，使用原术语
getDisplayText(originalText, newText) {
return newText && newText.trim() ? newText : originalText
}
}
```
## 测试策略
### 1. 文字显示测试
- 验证所有页面标题正确显示
- 验证所有菜单项正确显示
- 验证所有表格标题正确显示
- 验证所有按钮文字正确显示
### 2. 功能完整性测试
- 确保文字修改不影响原有功能
- 验证所有链接和跳转正常工作
- 确保表单提交和数据处理正常
### 3. 兼容性测试
- 测试不同浏览器下的显示效果
- 验证移动端显示适配
- 测试长文字的显示效果
## 部署策略
### 1. 渐进式部署
- 第一阶段：核心页面文字替换
- 第二阶段：详细页面文字替换
- 第三阶段：提示信息和错误信息替换
### 2. 回滚机制
- 保留原有文字配置作为备份
- 提供快速切换机制
- 建立文字版本管理
### 3. 性能优化
- 文字配置缓存机制
- 按需加载文字配置
- 压缩文字配置文件
## 维护策略
### 1. 文字配置管理
- 建立文字配置的版本控制
- 提供文字配置的在线编辑功能
- 建立文字使用情况的监控
### 2. 扩展性设计
- 支持多语言扩展
- 支持客户自定义术语
- 支持行业术语的动态更新
这个设计确保了文字改造的系统性、一致性和可维护性，同时保持了原有系统功能的完整性。
.kiro/specs/jewelry-text-adaptation/requirements.md 0 → 100644
View file @ e470998d
# 珠宝销售系统文字适配需求文档
## 项目概述
将现有资产管理系统的界面文字改造为适合珠宝销售行业的术语，使系统看起来更符合珠宝销售公司的业务需求。此阶段仅进行文字修改，不涉及功能变更。
## 需求列表
### 需求1：系统标题和导航文字适配
**用户故事：** 作为珠宝销售公司的用户，我希望看到的系统标题和菜单项都是珠宝行业相关的术语，这样我能更容易理解和使用系统。
#### 验收标准
1. WHEN 用户访问系统首页 THEN 系统标题应显示为"珠宝销售管理系统"
2. WHEN 用户查看导航菜单 THEN 所有菜单项都应使用珠宝行业术语
3. WHEN 用户查看页面标题 THEN 页面标题应反映珠宝业务场景
### 需求2：资产管理模块文字适配
**用户故事：** 作为珠宝销售人员，我希望资产管理相关的页面显示为商品管理相关术语，这样我能直观地管理珠宝商品。
#### 验收标准
1. WHEN 用户访问资产列表页面 THEN 页面标题应显示为"珠宝商品管理"
2. WHEN 用户查看资产相关字段 THEN 应显示为商品相关术语（如：商品名称、商品编码等）
3. WHEN 用户查看资产状态 THEN 应显示为商品状态（如：在售、已售、预定等）
4. WHEN 用户进行资产操作 THEN 操作按钮应显示为商品相关操作
### 需求3：物料管理模块文字适配
**用户故事：** 作为珠宝店库管人员，我希望物料管理显示为珠宝库存管理术语，这样我能更好地管理珠宝库存。
#### 验收标准
1. WHEN 用户访问物料仓库页面 THEN 应显示为"珠宝仓库管理"
2. WHEN 用户查看物料档案 THEN 应显示为"珠宝档案管理"
3. WHEN 用户查看入库单 THEN 应显示为"珠宝入库管理"
4. WHEN 用户查看出库单 THEN 应显示为"珠宝销售出库"
5. WHEN 用户查看耗材相关内容 THEN 应适配为珠宝配件或包装材料
### 需求4：审批流程文字适配
**用户故事：** 作为珠宝店管理人员，我希望审批流程中的术语符合珠宝销售业务场景，这样我能更好地理解审批内容。
#### 验收标准
1. WHEN 用户查看审批管理页面 THEN 应显示珠宝销售相关的审批类型
2. WHEN 用户查看资产申请 THEN 应显示为"珠宝销售申请"
3. WHEN 用户查看我的资产 THEN 应显示为"我的销售记录"
4. WHEN 用户查看请购单 THEN 应显示为"珠宝采购申请"
### 需求5：报表统计文字适配
**用户故事：** 作为珠宝店老板，我希望报表中的统计项目都是珠宝销售相关的指标，这样我能更好地了解业务状况。
#### 验收标准
1. WHEN 用户查看资产统计报表 THEN 应显示为"珠宝销售统计"
2. WHEN 用户查看资产汇总 THEN 应显示为"珠宝库存汇总"
3. WHEN 用户查看资产履历 THEN 应显示为"珠宝销售记录"
4. WHEN 用户查看到期资产 THEN 应显示为"预定到期提醒"
### 需求6：供应商和分类管理文字适配
**用户故事：** 作为珠宝采购人员，我希望供应商和分类管理的术语符合珠宝行业特点，这样我能更准确地管理供应商和商品分类。
#### 验收标准
1. WHEN 用户查看供应商管理 THEN 应显示为"珠宝供应商管理"
2. WHEN 用户查看资产分类 THEN 应显示为"珠宝分类管理"
3. WHEN 用户查看耗材分类 THEN 应显示为"配件分类管理"
4. WHEN 用户添加分类时 THEN 分类选项应包含珠宝行业常见分类
### 需求7：用户角色和权限文字适配
**用户故事：** 作为系统管理员，我希望用户角色和权限的描述符合珠宝店的组织架构，这样我能更好地分配权限。
#### 验收标准
1. WHEN 管理员设置用户角色 THEN 角色名称应反映珠宝店职位（如：店长、销售员、库管员等）
2. WHEN 管理员查看权限设置 THEN 权限描述应使用珠宝业务术语
3. WHEN 用户查看个人信息 THEN 职位信息应显示珠宝店相关职位
## 文字映射对照表
### 核心术语映射
- 资产 → 珠宝商品
- 物料/耗材 → 珠宝配件/包装材料
- 资产管理 → 珠宝商品管理
- 物料管理 → 珠宝库存管理
- 供应商 → 珠宝供应商
- 采购 → 珠宝采购
- 出库 → 销售出库
- 入库 → 采购入库
- 盘点 → 库存盘点
- 申请 → 销售申请
- 审批 → 销售审批
### 状态术语映射
- 在用 → 在售
- 闲置 → 库存
- 维修 → 维护保养
- 报废 → 下架
- 借出 → 预定
- 归还 → 取消预定
### 操作术语映射
- 领用 → 销售
- 归还 → 退货
- 调拨 → 调货
- 处置 → 下架处理
- 折旧 → 价格调整
## 技术约束
1. 仅修改显示文字，不改变数据库字段名
2. 不修改API接口和数据结构
3. 不改变页面布局和功能逻辑
4. 保持原有的表单验证规则
5. 确保修改后的文字长度适合原有UI布局
## 验收标准
1. 所有页面标题都已更新为珠宝行业术语
2. 所有菜单项都使用珠宝业务相关名称
3. 所有表格列标题都适配为珠宝行业术语
4. 所有按钮文字都符合珠宝业务场景
5. 所有提示信息都使用珠宝行业语言
6. 系统整体看起来像一个专业的珠宝销售管理系统
\ No newline at end of file
.kiro/specs/jewelry-text-adaptation/tasks.md 0 → 100644
View file @ e470998d
# 珠宝销售系统文字适配实施计划
## 实施任务列表
- [x] 1. 创建文字配置基础架构
- 创建珠宝行业术语配置文件，包含所有需要替换的文字映射关系
- 实现 Vue 混入组件用于统一管理文字替换逻辑
- 创建全局过滤器处理常用术语转换
- _需求: 1.1, 1.2, 1.3_
- [ ] 2. 实现路由配置文字替换
- 修改 src/router/config.js 中的路由 meta 信息，更新页面标题为珠宝业务术语
- 更新面包屑导航显示文字
- 确保路由跳转功能不受影响
- _需求: 1.1, 1.2_
- [ ] 3. 改造系统主页面文字显示
- 修改 src/components/Home.vue 中的页面标题和统计项目名称
- 更新首页卡片显示的业务指标名称（如：我的资产 → 我的销售记录）
- 修改图表标题和图例文字为珠宝销售相关术语
- _需求: 1.1, 5.1, 5.2, 5.3, 5.4_
- [ ] 4. 改造资产管理模块页面文字
- 修改 src/components/assetsman/assetsList.vue 页面标题和表格列标题
- 更新资产相关的所有显示文字为珠宝商品术语
- 修改按钮文字和操作提示信息
- 更新资产状态显示文字（在用 → 在售，闲置 → 库存等）
- _需求: 2.1, 2.2, 2.3, 2.4_
- [ ] 5. 改造物料管理模块页面文字
- 修改 src/components/Materialman/Materialwarehouse.vue 等物料管理页面标题
- 更新物料相关术语为珠宝库存管理术语
- 修改入库单、出库单页面的显示文字
- 更新仓库管理相关的所有文字显示
- _需求: 3.1, 3.2, 3.3, 3.4, 3.5_
- [ ] 6. 改造审批管理模块页面文字
- 修改 src/components/approval/approvalMan.vue 等审批页面的标题和内容
- 更新审批类型显示为珠宝销售相关审批
- 修改资产申请页面为珠宝销售申请
- 更新我的资产页面为我的销售记录
- _需求: 4.1, 4.2, 4.3, 4.4_
- [ ] 7. 改造报表统计模块页面文字
- 修改 src/components/report/目录下所有报表页面的标题
- 更新统计项目名称为珠宝销售相关指标
- 修改报表列标题和图表标题
- 更新报表导出文件名称
- _需求: 5.1, 5.2, 5.3, 5.4_
- [ ] 8. 改造系统管理模块页面文字
- 修改 src/components/Systemman/目录下页面的标题和内容
- 更新资产分类为珠宝分类管理
- 修改供应商管理为珠宝供应商管理
- 更新耗材分类为配件分类管理
- _需求: 6.1, 6.2, 6.3, 6.4_
- [ ] 9. 更新全局导航菜单文字
- 修改 src/components/global/index.vue 中的导航菜单显示文字
- 确保所有菜单项都使用珠宝业务相关术语
- 更新菜单图标对应的提示文字
- 测试菜单导航功能正常工作
- _需求: 1.2_
- [ ] 10. 实现表单字段标签文字替换
- 创建统一的字段标签映射配置
- 批量更新所有表单中的字段标签文字
- 确保表单验证提示信息也使用珠宝业务术语
- 测试表单提交功能不受影响
- _需求: 2.2, 3.4, 4.2_
- [ ] 11. 更新按钮和操作文字
- 统一更新所有页面中的按钮文字（新增 → 新增珠宝，编辑 → 编辑珠宝等）
- 修改操作确认对话框中的提示文字
- 更新操作成功/失败的提示信息
- 确保所有交互操作使用珠宝业务术语
- _需求: 2.4, 3.4, 4.2_
- [ ] 12. 更新状态和枚举值显示文字
- 修改所有状态枚举的显示文字（在用 → 在售，闲置 → 库存等）
- 更新下拉选择框中的选项文字
- 修改状态标签和徽章的显示文字
- 确保状态逻辑功能不受影响
- _需求: 2.3, 3.5, 4.1_
- [ ] 13. 实现搜索和筛选功能文字替换
- 更新所有搜索框的占位符文字
- 修改筛选条件的标签和选项文字
- 更新高级查询功能中的字段名称
- 确保搜索和筛选功能正常工作
- _需求: 2.2, 3.2, 4.1_
- [ ] 14. 更新提示信息和错误信息文字
- 修改所有成功提示信息使用珠宝业务术语
- 更新错误提示信息中的业务术语
- 修改确认对话框中的提示文字
- 更新帮助文档和说明文字
- _需求: 1.3, 2.4, 3.4, 4.2_
- [ ] 15. 进行全面测试和验证
- 测试所有页面的文字显示是否正确
- 验证所有功能操作不受文字修改影响
- 检查文字长度是否适合原有 UI 布局
- 进行用户体验测试确保术语使用恰当
- _需求: 1.1, 1.2, 1.3, 2.1, 2.2, 2.3, 2.4, 3.1, 3.2, 3.3, 3.4, 3.5, 4.1, 4.2, 4.3, 4.4, 5.1, 5.2, 5.3, 5.4, 6.1, 6.2, 6.3, 6.4, 7.1_
## 任务执行顺序说明
1. **基础架构任务（任务 1）**：首先建立文字配置管理基础，为后续所有任务提供支撑
2. **核心页面任务（任务 2-9）**：按模块逐步替换各个功能页面的文字
3. **细节完善任务（任务 10-14）**：处理表单、按钮、状态等细节文字
4. **测试验证任务（任务 15）**：确保所有修改正确且不影响功能
## 预估工作量
- 任务 1：基础架构 - 4 小时
- 任务 2-9：页面文字替换 - 每个任务 2-3 小时，共 20 小时
- 任务 10-14：细节文字处理 - 每个任务 1-2 小时，共 8 小时
- 任务 15：测试验证 - 4 小时
**总计预估：36 小时（约 4.5 个工作日）**
## 注意事项
1. 每个任务完成后都要进行功能测试，确保不影响原有功能
2. 文字修改要考虑 UI 布局，避免文字过长导致显示问题
3. 保持术语使用的一致性，相同概念在不同页面要使用相同术语
4. 备份原有文件，以便需要时快速回滚
5. 建议分批次提交代码，便于问题定位和回滚
.npmrc 0 → 100644
View file @ e470998d
optional=false
chromedriver_skip_download=true
package-lock.json
View file @ e470998d
This source diff could not be displayed because it is too large. You can view the blob instead.
src/config/jewelry-terms-usage.md 0 → 100644
View file @ e470998d
# 珠宝术语系统使用说明
## 概述
珠宝术语系统提供了一套完整的文字替换解决方案，将资产管理系统的术语转换为珠宝销售行业的专业术语。
## 安装和配置
### 1. 在main.js中安装插件
```javascript
import Vue from 'vue'
import JewelryTermsPlugin from '@/plugins/jewelry-terms.js'
// 安装珠宝术语插件
Vue.use(JewelryTermsPlugin)
// 或者带自定义配置安装
Vue.use(JewelryTermsPlugin, {
customTerms: {
// 自定义术语配置
pageTitle: {
customPage: '自定义页面标题'
}
}
})
```
### 2. 在组件中使用混入
```javascript
// 方式1：全局混入（已自动安装）
export default {
name: 'MyComponent',
// 可以直接使用混入的方法
}
// 方式2：手动混入（如果需要）
import { jewelryTermsMixin } from '@/mixins/jewelry-terms-mixin.js'
export default {
name: 'MyComponent',
mixins: [jewelryTermsMixin]
}
```
## 使用方法
### 1. 在模板中使用过滤器
```vue
<template>
<div>
<!-- 使用过滤器转换文字 -->
<h1>{{ '资产管理' | jewelryText }}</h1>
<!-- 输出：珠宝商品管理 -->
<el-button>{{ '新增资产' | buttonText }}</el-button>
<!-- 输出：新增珠宝 -->
<el-table-column :label="'资产名称' | tableHeader"></el-table-column>
<!-- 输出：珠宝名称 -->
<span>{{ '在用' | statusTerm }}</span>
<!-- 输出：在售 -->
</div>
</template>
```
### 2. 在JavaScript中使用方法
```javascript
export default {
methods: {
handleClick() {
// 获取术语
const title = this.getTerm('pageTitle', 'assetsList')
console.log(title) // 输出：珠宝商品列表
// 获取页面标题
const pageTitle = this.getPageTitle('AssetsList')
console.log(pageTitle) // 输出：珠宝商品列表
// 获取表格列标题
const header = this.getTableHeader('Name')
console.log(header) // 输出：珠宝名称
// 获取按钮文字
const buttonText = this.getButtonText('addJewelry')
console.log(buttonText) // 输出：新增珠宝
// 获取状态文字
const status = this.getStatusText('inUse')
console.log(status) // 输出：在售
// 批量替换文字
const text = this.replaceText('资产管理系统')
console.log(text) // 输出：珠宝商品管理系统
// 使用全局方法
const term = this.$getJewelryTerm('system', 'title')
console.log(term) // 输出：珠宝销售管理系统
const replaced = this.$replaceJewelryText('资产列表')
console.log(replaced) // 输出：珠宝商品列表
}
}
}
```
### 3. 动态设置页面标题
```javascript
export default {
mounted() {
// 自动设置页面标题（混入已处理）
// 或手动设置
this.setJewelryPageTitle('资产管理')
// 页面标题变为：珠宝商品管理 - 珠宝销售管理系统
}
}
```
### 4. 在路由中使用
```javascript
// router/config.js
export default {
routes: [{
path: '/assetsList',
name: 'AssetsList',
component: AssetsList,
meta: {
title: '资产列表' // 会自动转换为：珠宝商品列表
}
}]
}
```
## 配置文件说明
### jewelry-terms.js 配置结构
```javascript
export const jewelryTerms = {
// 系统级别术语
system: {
title: "珠宝销售管理系统",
welcome: "欢迎使用珠宝销售管理系统"
},
// 导航菜单术语
navigation: {
assetManagement: "珠宝商品管理"
},
// 页面标题术语
pageTitle: {
assetsList: "珠宝商品列表"
},
// 表格列标题术语
tableHeaders: {
name: "珠宝名称",
propertyNum: "商品编码"
},
// 按钮文字术语
buttons: {
addJewelry: "新增珠宝"
},
// 状态术语
status: {
inUse: "在售",
idle: "库存"
},
// 操作术语
operations: {
receive: "销售",
return: "退货"
},
// 提示信息术语
messages: {
saveSuccess: "保存成功"
},
// 占位符文字
placeholders: {
jewelryName: "请输入珠宝名称"
}
}
```
## 扩展和自定义
### 1. 添加新的术语分类
```javascript
// 在jewelry-terms.js中添加
export const jewelryTerms = {
// 现有配置...
// 新增分类
newCategory: {
key1: "值1",
key2: "值2"
}
}
```
### 2. 添加新的过滤器
```javascript
// 在jewelry-filters.js中添加
export const jewelryFilters = {
// 现有过滤器...
// 新增过滤器
customFilter(value) {
// 自定义转换逻辑
return transformedValue
}
}
```
### 3. 扩展混入方法
```javascript
// 在jewelry-terms-mixin.js中添加
export const jewelryTermsMixin = {
// 现有方法...
methods: {
// 现有方法...
// 新增方法
getCustomTerm(key) {
return this.getTerm('newCategory', key)
}
}
}
```
## 最佳实践
### 1. 统一使用术语
```vue
<!-- 好的做法 -->
<template>
<div>
<h1>{{ getPageTitle($route.name) }}</h1>
<el-button>{{ getButtonText('addJewelry') }}</el-button>
</div>
</template>
<!-- 避免硬编码 -->
<template>
<div>
<h1>珠宝商品列表</h1>
<el-button>新增珠宝</el-button>
</div>
</template>
```
### 2. 合理使用过滤器
```vue
<!-- 适合静态文字转换 -->
<template>
<span>{{ '资产状态' | jewelryText }}</span>
</template>
<!-- 适合动态内容 -->
<template>
<span>{{ getStatusText(item.status) }}</span>
</template>
```
### 3. 错误处理
```javascript
// 始终提供备用值
const title = this.getTerm('pageTitle', 'unknownPage', '默认标题')
// 使用try-catch处理异常
try {
const text = this.replaceText(originalText)
} catch (error) {
console.error('文字替换失败:', error)
// 使用原始文字作为备用
}
```
## 注意事项
1. **性能考虑**：过滤器会在每次数据变化时执行，对于大量数据建议使用计算属性
2. **缓存机制**：术语配置会被缓存，修改配置后需要重新加载页面
3. **向后兼容**：所有方法都提供了备用值，确保在术语缺失时不会出错
4. **调试支持**：开发环境下会输出警告信息，帮助定位问题
## 故障排除
### 1. 术语不显示
- 检查术语配置是否正确
- 确认插件是否正确安装
- 查看控制台是否有错误信息
### 2. 过滤器不工作
- 确认过滤器是否正确注册
- 检查过滤器名称是否正确
- 验证Vue版本兼容性
### 3. 混入方法不可用
- 确认组件是否正确混入
- 检查方法名称是否正确
- 验证this上下文是否正确
test/e2e/custom-assertions/elementCount.js deleted 100644 → 0
View file @ 876dcb48
// A custom Nightwatch assertion.
// The assertion name is the filename.
// Example usage:
//
// browser.assert.elementCount(selector, count)
//
// For more information on custom assertions see:
// http://nightwatchjs.org/guide#writing-custom-assertions
exports.assertion = function (selector, count) {
this.message = 'Testing if element <' + selector + '> has count: ' + count
this.expected = count
this.pass = function (val) {
return val === this.expected
}
this.value = function (res) {
return res.value
}
this.command = function (cb) {
var self = this
return this.api.execute(function (selector) {
return document.querySelectorAll(selector).length
}, [selector], function (res) {
cb.call(self, res)
})
}
}
test/e2e/nightwatch.conf.js deleted 100644 → 0
View file @ 876dcb48
require('babel-register')
var config = require('../../config')
// http://nightwatchjs.org/gettingstarted#settings-file
module.exports = {
src_folders: ['test/e2e/specs'],
output_folder: 'test/e2e/reports',
custom_assertions_path: ['test/e2e/custom-assertions'],
selenium: {
start_process: true,
server_path: require('selenium-server').path,
host: '127.0.0.1',
port: 4444,
cli_args: {
'webdriver.chrome.driver': require('chromedriver').path
}
},
test_settings: {
default: {
selenium_port: 4444,
selenium_host: 'localhost',
silent: true,
globals: {
devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
}
},
chrome: {
desiredCapabilities: {
browserName: 'chrome',
javascriptEnabled: true,
acceptSslCerts: true
}
},
firefox: {
desiredCapabilities: {
browserName: 'firefox',
javascriptEnabled: true,
acceptSslCerts: true
}
}
}
}
test/e2e/runner.js deleted 100644 → 0
View file @ 876dcb48
// 1. start the dev server using production config
process.env.NODE_ENV = 'testing'
const webpack = require('webpack')
const DevServer = require('webpack-dev-server')
const webpackConfig = require('../../build/webpack.prod.conf')
const devConfigPromise = require('../../build/webpack.dev.conf')
let server
devConfigPromise.then(devConfig => {
const devServerOptions = devConfig.devServer
const compiler = webpack(webpackConfig)
server = new DevServer(compiler, devServerOptions)
const port = devServerOptions.port
const host = devServerOptions.host
return server.listen(port, host)
})
.then(() => {
// 2. run the nightwatch test suite against it
// to run in additional browsers:
// 1. add an entry in test/e2e/nightwatch.conf.js under "test_settings"
// 2. add it to the --env flag below
// or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
// For more information on Nightwatch's config file, see
// http://nightwatchjs.org/guide#settings-file
let opts = process.argv.slice(2)
if (opts.indexOf('--config') === -1) {
opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
}
if (opts.indexOf('--env') === -1) {
opts = opts.concat(['--env', 'chrome'])
}
const spawn = require('cross-spawn')
const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
runner.on('exit', function (code) {
server.close()
process.exit(code)
})
runner.on('error', function (err) {
server.close()
throw err
})
})
test/e2e/specs/test.js deleted 100644 → 0
View file @ 876dcb48
// For authoring Nightwatch tests, see
// http://nightwatchjs.org/guide#usage
module.exports = {
'default e2e tests': function (browser) {
// automatically uses dev Server port from /config.index.js
// default: http://localhost:8080
// see nightwatch.conf.js
const devServer = browser.globals.devServerURL
browser
.url(devServer)
.waitForElementVisible('#app', 5000)
.assert.elementPresent('.hello')
.assert.containsText('h1', 'Welcome to Your Vue.js App')
.assert.elementCount('img', 1)
.end()
}
}
test/unit/.eslintrc deleted 100644 → 0
View file @ 876dcb48
{
"env": {
"jest": true
},
"globals": {
}
}
test/unit/jest.conf.js deleted 100644 → 0
View file @ 876dcb48
const path = require('path')
module.exports = {
rootDir: path.resolve(__dirname, '../../'),
moduleFileExtensions: [
'js',
'json',
'vue'
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
transform: {
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
},
testPathIgnorePatterns: [
'<rootDir>/test/e2e'
],
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
setupFiles: ['<rootDir>/test/unit/setup'],
mapCoverage: true,
coverageDirectory: '<rootDir>/test/unit/coverage',
collectCoverageFrom: [
'src/**/*.{js,vue}',
'!src/main.js',
'!src/router/index.js',
'!**/node_modules/**'
]
}
test/unit/setup.js deleted 100644 → 0
View file @ 876dcb48
import Vue from 'vue'
Vue.config.productionTip = false
test/unit/specs/HelloWorld.spec.js deleted 100644 → 0
View file @ 876dcb48
import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'
describe('HelloWorld.vue', () => {
it('should render correct contents', () => {
const Constructor = Vue.extend(HelloWorld)
const vm = new Constructor().$mount()
expect(vm.$el.querySelector('.hello h1').textContent)
.toEqual('Welcome to Your Vue.js App')
})
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment