178 lines
4.2 KiB
Markdown
178 lines
4.2 KiB
Markdown
# 新配置系统集成指南
|
||
|
||
## 数据库结构
|
||
|
||
### 主表+翻译表设计
|
||
```sql
|
||
-- 主配置表
|
||
ak_global_config (
|
||
id UUID PRIMARY KEY,
|
||
config_key VARCHAR(100) UNIQUE,
|
||
config_type VARCHAR(50),
|
||
config_category VARCHAR(50),
|
||
default_value TEXT,
|
||
is_translatable BOOLEAN,
|
||
is_active BOOLEAN,
|
||
sort_order INTEGER
|
||
)
|
||
|
||
-- 翻译表
|
||
ak_global_config_translations (
|
||
id UUID PRIMARY KEY,
|
||
config_id UUID REFERENCES ak_global_config(id),
|
||
language_code VARCHAR(10),
|
||
translated_value TEXT NOT NULL,
|
||
is_active BOOLEAN
|
||
)
|
||
|
||
-- 语言表（保留现有）
|
||
ak_languages (
|
||
id UUID PRIMARY KEY,
|
||
code VARCHAR(10) UNIQUE,
|
||
name VARCHAR(100),
|
||
native_name VARCHAR(100),
|
||
is_active BOOLEAN
|
||
)
|
||
```
|
||
|
||
## 前端集成
|
||
|
||
### 1. 数据获取方式（优先级顺序）
|
||
|
||
#### 方式1：使用优化函数（推荐）
|
||
```typescript
|
||
const result = await supa.rpc('get_configs_by_language', {
|
||
p_language_code: 'zh'
|
||
})
|
||
```
|
||
|
||
#### 方式2：使用多语言视图
|
||
```typescript
|
||
const result = await supa
|
||
.from('vw_global_config_multilingual')
|
||
.select('config_key, config_value, config_type, config_category')
|
||
.eq('language_code', 'zh')
|
||
.eq('is_active', true)
|
||
```
|
||
|
||
#### 方式3：主表+翻译表联查
|
||
```typescript
|
||
const result = await supa
|
||
.from('ak_global_config')
|
||
.select(`
|
||
config_key,
|
||
config_type,
|
||
config_category,
|
||
default_value,
|
||
is_translatable,
|
||
ak_global_config_translations!left(
|
||
language_code,
|
||
translated_value
|
||
)
|
||
`)
|
||
.eq('is_active', true)
|
||
```
|
||
|
||
### 2. 语言代码映射
|
||
|
||
```typescript
|
||
const getStandardLanguageCode = (langCode: string): string => {
|
||
switch (langCode) {
|
||
case 'en':
|
||
case 'en-US':
|
||
return 'en'
|
||
case 'zh-TW':
|
||
return 'tw'
|
||
case 'ja':
|
||
case 'ja-JP':
|
||
return 'ja'
|
||
case 'zh-CN':
|
||
case 'zh':
|
||
default:
|
||
return 'zh'
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3. 配置使用
|
||
|
||
#### 公司基本信息
|
||
- `company_name` - 公司名称（多语言）
|
||
- `company_slogan` - 公司标语（多语言）
|
||
- `company_address` - 公司地址（多语言）
|
||
- `company_phone` - 联系电话（无多语言）
|
||
- `company_email` - 邮箱（无多语言）
|
||
- `company_icp` - ICP备案（无多语言）
|
||
- `company_logo_url` - LOGO链接（无多语言）
|
||
|
||
#### 社交媒体链接
|
||
- `social_wechat_url` - 微信链接
|
||
- `social_weibo_url` - 微博链接
|
||
- `social_qq_url` - QQ链接
|
||
- `social_linkedin_url` - LinkedIn链接
|
||
- `social_twitter_url` - Twitter链接
|
||
|
||
#### 热门搜索关键词
|
||
- `hot_search_1` - 关键词1（多语言）
|
||
- `hot_search_2` - 关键词2（多语言）
|
||
- `hot_search_3` - 关键词3（多语言）
|
||
- `hot_search_4` - 关键词4（多语言）
|
||
- `hot_search_5` - 关键词5（多语言）
|
||
|
||
## 部署步骤
|
||
|
||
1. **数据库初始化**
|
||
```sql
|
||
-- 执行 improved_global_config_with_translation.sql
|
||
```
|
||
|
||
2. **清理旧表**（可选）
|
||
```sql
|
||
-- 执行 force_cleanup_new_tables.sql
|
||
```
|
||
|
||
3. **前端更新**
|
||
- 新的数据获取逻辑已集成到 `comindex.uvue`
|
||
- 支持自动降级到不同查询方式
|
||
- 包含完整的错误处理和默认配置
|
||
|
||
## 优势
|
||
|
||
### 数据库层面
|
||
- ✅ 结构清晰：主表+翻译表分离
|
||
- ✅ 性能优化：索引和视图支持
|
||
- ✅ 扩展性强：易于添加新语言和配置项
|
||
- ✅ 数据完整性：外键约束和触发器
|
||
|
||
### 前端层面
|
||
- ✅ 智能降级：多种查询方式自动切换
|
||
- ✅ 语言支持：完整的多语言代码映射
|
||
- ✅ 错误处理：完善的错误处理和默认配置
|
||
- ✅ 调试支持：开发环境调试面板
|
||
|
||
### 维护层面
|
||
- ✅ 易于管理：分类和排序支持
|
||
- ✅ 灵活配置：可翻译字段标识
|
||
- ✅ 版本控制：创建和更新时间记录
|
||
- ✅ 数据安全：RLS和权限控制
|
||
|
||
## 调试功能
|
||
|
||
### 开发环境调试面板
|
||
- 显示当前配置状态
|
||
- 测试多语言切换
|
||
- 验证数据库查询
|
||
- 配置值实时查看
|
||
|
||
### 控制台日志
|
||
- 详细的加载过程日志
|
||
- 错误信息和回退逻辑
|
||
- 配置更新状态追踪
|
||
|
||
## 注意事项
|
||
|
||
1. **语言代码一致性**：确保前端和数据库使用相同的语言代码格式
|
||
2. **默认配置**：始终提供默认配置作为最后的回退方案
|
||
3. **性能考虑**：语言切换时重新加载配置，避免缓存问题
|
||
4. **错误处理**：每个查询都有完整的错误处理机制
|