You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
820 lines
27 KiB
820 lines
27 KiB
import { Ionicons } from '@expo/vector-icons';
|
|
import { useRouter } from 'expo-router';
|
|
import { useEffect, useState } from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
Alert,
|
|
Modal,
|
|
Pressable,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Switch,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
} from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import {
|
|
RESUME_EXPORT_FORMAT_NOTICE,
|
|
RESUME_EXPORT_PASSWORD_NOTICE,
|
|
RESUME_FILE_NAME_HINT,
|
|
RESUME_ORIENTATIONS,
|
|
RESUME_PAPER_SIZES,
|
|
RESUME_TEMPLATES,
|
|
} from '../../src/constants';
|
|
import { useResume, useResumeExport } from '../../src/hooks';
|
|
import { colors, templateAccentColors } from '../../src/theme';
|
|
import type { ResumeExportFormat, ResumeExportSettings } from '../../src/types';
|
|
|
|
const FORMATS: { key: ResumeExportFormat; label: string; icon: keyof typeof Ionicons.glyphMap }[] = [
|
|
{ key: 'pdf', label: 'PDF', icon: 'document-outline' },
|
|
{ key: 'word', label: 'Word', icon: 'document-text-outline' },
|
|
{ key: 'image', label: '图片', icon: 'image-outline' },
|
|
];
|
|
|
|
/* ===================== 子组件：顶部导航 ===================== */
|
|
|
|
/**
|
|
* 顶部导航。onSave 可选：加载中 / 加载失败时设置尚未就绪（localSettings 为 null），
|
|
* 此时不渲染「保存」按钮，避免出现点了无反应的入口（比照 progress.tsx 移除无效按钮的处理）。
|
|
* 该态下仍渲染同尺寸占位，维持标题居中。
|
|
*/
|
|
function Header({ onBack, onSave }: { onBack: () => void; onSave?: () => void }) {
|
|
return (
|
|
<View style={styles.header}>
|
|
<Pressable style={styles.headerBtn} onPress={onBack} hitSlop={8}>
|
|
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
|
|
</Pressable>
|
|
<Text style={styles.headerTitle}>导出简历</Text>
|
|
{onSave ? (
|
|
<Pressable style={styles.headerBtn} onPress={onSave} hitSlop={8}>
|
|
<Text style={styles.headerSave}>保存</Text>
|
|
</Pressable>
|
|
) : (
|
|
<View style={styles.headerBtn} />
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：预览入口 ===================== */
|
|
|
|
function PreviewCard({ onOpen }: { onOpen: () => void }) {
|
|
return (
|
|
<View style={styles.previewCard}>
|
|
<View style={styles.previewThumb}>
|
|
<Ionicons name="document-text-outline" size={48} color={colors.primary} />
|
|
</View>
|
|
<Text style={styles.previewText}>实时预览你的简历效果</Text>
|
|
<Pressable style={styles.previewLink} onPress={onOpen} hitSlop={8}>
|
|
<Text style={styles.previewLinkText}>打开预览</Text>
|
|
<Ionicons name="chevron-forward" size={14} color={colors.primary} />
|
|
</Pressable>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：格式选择 ===================== */
|
|
|
|
function FormatSelect({
|
|
value,
|
|
onChange,
|
|
}: {
|
|
value: ResumeExportFormat;
|
|
onChange: (v: ResumeExportFormat) => void;
|
|
}) {
|
|
return (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>选择导出格式</Text>
|
|
<View style={styles.formatRow}>
|
|
{FORMATS.map((f) => {
|
|
const selected = value === f.key;
|
|
return (
|
|
<Pressable
|
|
key={f.key}
|
|
style={[styles.formatCard, selected && styles.formatCardActive]}
|
|
onPress={() => onChange(f.key)}
|
|
>
|
|
<Ionicons name={f.icon} size={28} color={selected ? colors.primary : colors.textHint} />
|
|
<Text style={[styles.formatLabel, selected && styles.formatLabelActive]}>{f.label}</Text>
|
|
<Text style={styles.formatHint}>高清 · 格式友好</Text>
|
|
{selected && (
|
|
<View style={styles.formatCheck}>
|
|
<Ionicons name="checkmark-circle" size={18} color={colors.primary} />
|
|
</View>
|
|
)}
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
{/* 非 PDF 选中的那一刻就说清能做到什么：等到导出后才说，用户已经白等一次 */}
|
|
{value !== 'pdf' && (
|
|
<View style={styles.noticeRow}>
|
|
<Ionicons name="information-circle-outline" size={14} color={colors.textHint} />
|
|
<Text style={styles.noticeText}>{RESUME_EXPORT_FORMAT_NOTICE}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：模板选择 ===================== */
|
|
|
|
function TemplateSelect({
|
|
value,
|
|
onChange,
|
|
onMore,
|
|
}: {
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
onMore: () => void;
|
|
}) {
|
|
return (
|
|
<View style={styles.section}>
|
|
<View style={styles.sectionHeader}>
|
|
<Text style={styles.sectionTitle}>选择简历模板</Text>
|
|
<Pressable onPress={onMore} hitSlop={8}>
|
|
<Text style={styles.moreLink}>全部模板 ></Text>
|
|
</Pressable>
|
|
</View>
|
|
<View style={styles.templateRow}>
|
|
{RESUME_TEMPLATES.map((t) => {
|
|
const selected = value === t.id;
|
|
return (
|
|
<Pressable
|
|
key={t.id}
|
|
style={[styles.templateCard, selected && styles.templateCardActive]}
|
|
onPress={() => onChange(t.id)}
|
|
>
|
|
{/* TODO(素材)：需 UI 出 3 张模板预览图（简约经典 / 创意设计 / 技术专业），
|
|
当前用模板强调色色块 + 线条占位 */}
|
|
<View
|
|
style={[
|
|
styles.templateThumb,
|
|
{ backgroundColor: templateAccentColors[t.color] ?? colors.primary },
|
|
]}
|
|
>
|
|
<View style={styles.templateLines}>
|
|
<View style={styles.templateLine} />
|
|
<View style={styles.templateLineShort} />
|
|
</View>
|
|
</View>
|
|
<Text style={[styles.templateName, selected && styles.templateNameActive]}>
|
|
{t.name}
|
|
</Text>
|
|
{selected && <Ionicons name="checkmark-circle" size={18} color={colors.primary} />}
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：开关行 ===================== */
|
|
|
|
function ToggleRow({
|
|
label,
|
|
desc,
|
|
notice,
|
|
value,
|
|
onChange,
|
|
}: {
|
|
label: string;
|
|
desc?: string;
|
|
notice?: string;
|
|
value: boolean;
|
|
onChange: (v: boolean) => void;
|
|
}) {
|
|
return (
|
|
<View style={styles.toggleRow}>
|
|
<View style={styles.toggleText}>
|
|
<Text style={styles.toggleLabel}>{label}</Text>
|
|
{desc && <Text style={styles.toggleDesc}>{desc}</Text>}
|
|
{notice && <Text style={styles.noticeText}>{notice}</Text>}
|
|
</View>
|
|
<Switch
|
|
value={value}
|
|
onValueChange={onChange}
|
|
trackColor={{ false: colors.border, true: colors.primaryBorder }}
|
|
thumbColor={value ? colors.primary : colors.white}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：输入行 / 选择行 ===================== */
|
|
|
|
function InputRow({
|
|
label,
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
hint,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
placeholder?: string;
|
|
hint?: string;
|
|
}) {
|
|
return (
|
|
<View style={styles.inputRow}>
|
|
<View style={styles.inputLabelBox}>
|
|
<Text style={styles.inputLabel}>{label}</Text>
|
|
{hint && <Text style={styles.inputHint}>{hint}</Text>}
|
|
</View>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={value}
|
|
onChangeText={onChange}
|
|
placeholder={placeholder}
|
|
placeholderTextColor={colors.textHint}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/** 点开弹层选择的行：纸型 / 方向用（原先两行的 onChange 是空函数，点下去没反应） */
|
|
function SelectRow({
|
|
label,
|
|
value,
|
|
onPress,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
onPress: () => void;
|
|
}) {
|
|
return (
|
|
<Pressable style={styles.inputRow} onPress={onPress}>
|
|
<Text style={styles.inputLabel}>{label}</Text>
|
|
<View style={styles.selectValue}>
|
|
<Text style={styles.selectValueText}>{value}</Text>
|
|
<Ionicons name="chevron-forward" size={14} color={colors.textHint} />
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：选择弹层 ===================== */
|
|
|
|
interface SheetOption {
|
|
value: string;
|
|
label: string;
|
|
/** 模板缩略色块（纸型 / 方向不需要） */
|
|
accent?: string;
|
|
}
|
|
|
|
interface SheetState {
|
|
title: string;
|
|
hint?: string;
|
|
value: string;
|
|
options: SheetOption[];
|
|
onSelect: (value: string) => void;
|
|
}
|
|
|
|
/** 底部选择弹层：模板 / 纸型 / 方向共用（三者的交互完全一致，只差选项与标题） */
|
|
function OptionSheet({ sheet, onClose }: { sheet: SheetState; onClose: () => void }) {
|
|
return (
|
|
<Modal visible transparent animationType="slide" onRequestClose={onClose}>
|
|
<Pressable style={styles.scrim} onPress={onClose}>
|
|
{/* affordance-ok：吞冒泡，点弹层内容区不关闭 */}
|
|
<Pressable style={styles.sheet} onPress={() => {}}>
|
|
<Text style={styles.sheetTitle}>{sheet.title}</Text>
|
|
{sheet.options.map((option) => {
|
|
const selected = option.value === sheet.value;
|
|
return (
|
|
<Pressable
|
|
key={option.value}
|
|
style={styles.sheetRow}
|
|
onPress={() => sheet.onSelect(option.value)}
|
|
>
|
|
{option.accent !== undefined && (
|
|
<View style={[styles.sheetSwatch, { backgroundColor: option.accent }]} />
|
|
)}
|
|
<Text style={[styles.sheetLabel, selected && styles.sheetLabelActive]}>
|
|
{option.label}
|
|
</Text>
|
|
{selected && <Ionicons name="checkmark" size={18} color={colors.primary} />}
|
|
</Pressable>
|
|
);
|
|
})}
|
|
{sheet.hint !== undefined && <Text style={styles.sheetHint}>{sheet.hint}</Text>}
|
|
<Pressable style={styles.sheetCancel} onPress={onClose}>
|
|
<Text style={styles.sheetCancelText}>取消</Text>
|
|
</Pressable>
|
|
</Pressable>
|
|
</Pressable>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：四态 ===================== */
|
|
|
|
function Loading() {
|
|
return (
|
|
<View style={styles.center}>
|
|
<ActivityIndicator size="large" color={colors.primary} />
|
|
<Text style={styles.tip}>正在加载设置…</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function ErrorState({ onRetry }: { onRetry: () => void }) {
|
|
return (
|
|
<View style={styles.center}>
|
|
<Ionicons name="download-outline" size={40} color={colors.textHint} />
|
|
<Text style={styles.tip}>设置加载失败</Text>
|
|
<Pressable style={styles.retryBtn} onPress={onRetry} hitSlop={6}>
|
|
<Text style={styles.retryText}>点击重试</Text>
|
|
</Pressable>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 工具：storage 值 → 合法设置值 ===================== */
|
|
|
|
/** 弹层回传字符串，白名单校验后才写入设置（storage 里的值不保证是这两个之一） */
|
|
function pickPaperSize(value: string): ResumeExportSettings['paperSize'] {
|
|
return value === 'letter' ? 'letter' : 'A4';
|
|
}
|
|
|
|
function pickOrientation(value: string): ResumeExportSettings['orientation'] {
|
|
return value === 'landscape' ? 'landscape' : 'portrait';
|
|
}
|
|
|
|
/* ===================== 页面 ===================== */
|
|
|
|
export default function ResumeExportScreen() {
|
|
const router = useRouter();
|
|
const { settings, loading, error, refresh, save, exportFile, share, exporting, sharing } =
|
|
useResumeExport();
|
|
/**
|
|
* AI 定向优化走简历域的 hook（页面不直连 API）。
|
|
* 这里只取 `optimizeWithJD`，本页不渲染简历数据。
|
|
*/
|
|
const { optimizeWithJD } = useResume();
|
|
const [localSettings, setLocalSettings] = useState<ResumeExportSettings | null>(null);
|
|
const [sheet, setSheet] = useState<SheetState | null>(null);
|
|
const [optimizing, setOptimizing] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (settings && !localSettings) {
|
|
setLocalSettings(settings);
|
|
}
|
|
}, [settings, localSettings]);
|
|
|
|
const update = <K extends keyof ResumeExportSettings>(key: K, value: ResumeExportSettings[K]) => {
|
|
setLocalSettings((prev) => (prev ? { ...prev, [key]: value } : prev));
|
|
};
|
|
|
|
/** 只落盘不带提示：导出 / 分享前先把设置保存好，避免导出用的是一份没保存的配置 */
|
|
const persist = async () => {
|
|
if (localSettings) await save(localSettings);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
await persist();
|
|
Alert.alert('已保存', '导出设置已保存在本机，下次进入仍是这份设置。');
|
|
};
|
|
|
|
const handleExport = async () => {
|
|
if (!localSettings) return;
|
|
await persist();
|
|
const outcome = await exportFile(localSettings);
|
|
if (!outcome.ok) {
|
|
Alert.alert('导出失败', outcome.message);
|
|
return;
|
|
}
|
|
Alert.alert(
|
|
'导出成功',
|
|
[
|
|
`已生成 ${outcome.fileName}（共 ${outcome.pages} 页）。`,
|
|
'文件在本机缓存中，点「分享」可保存到「文件」或发送给他人；缓存可能被系统清理，需要长期留存请先分享出去。',
|
|
localSettings.format === 'pdf' ? '' : RESUME_EXPORT_FORMAT_NOTICE,
|
|
]
|
|
.filter((line) => line !== '')
|
|
.join('\n\n'),
|
|
[
|
|
{ text: '知道了', style: 'cancel' },
|
|
{ text: '分享', onPress: () => void handleShare() },
|
|
],
|
|
);
|
|
};
|
|
|
|
const handleShare = async () => {
|
|
if (!localSettings) return;
|
|
await persist();
|
|
const outcome = await share(localSettings);
|
|
// 成功不弹提示：系统分享面板本身就是反馈；失败必须说清原因
|
|
if (!outcome.ok) Alert.alert('无法分享', outcome.message);
|
|
};
|
|
|
|
const jd = (localSettings?.targetJobDescription ?? '').trim();
|
|
|
|
const handleOptimize = async () => {
|
|
if (jd === '' || optimizing) return;
|
|
setOptimizing(true);
|
|
try {
|
|
const result = await optimizeWithJD(jd);
|
|
if (result.available) {
|
|
Alert.alert('已完成', result.message);
|
|
} else {
|
|
Alert.alert('暂未开放', result.message);
|
|
}
|
|
} finally {
|
|
setOptimizing(false);
|
|
}
|
|
};
|
|
|
|
// 保存设置会 refresh，refresh 会把 loading 置真；此时 localSettings 已有值，
|
|
// 不能因为刷新再闪一次整页加载态（首次加载才显示 loading）
|
|
if (loading && localSettings === null) {
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['top']}>
|
|
<Header onBack={() => router.back()} />
|
|
<Loading />
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
if (error || !localSettings) {
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['top']}>
|
|
<Header onBack={() => router.back()} />
|
|
<ErrorState onRetry={refresh} />
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['top']}>
|
|
<Header onBack={() => router.back()} onSave={handleSave} />
|
|
<ScrollView contentContainerStyle={styles.body} showsVerticalScrollIndicator={false}>
|
|
<PreviewCard onOpen={() => router.push('/resume/preview')} />
|
|
|
|
<FormatSelect value={localSettings.format} onChange={(v) => update('format', v)} />
|
|
|
|
<TemplateSelect
|
|
value={localSettings.templateId}
|
|
onChange={(v) => update('templateId', v)}
|
|
onMore={() =>
|
|
setSheet({
|
|
title: '选择简历模板',
|
|
hint: '更多模板将在后端模板库接入后提供',
|
|
value: localSettings.templateId,
|
|
options: RESUME_TEMPLATES.map((t) => ({
|
|
value: t.id,
|
|
label: t.name,
|
|
accent: templateAccentColors[t.color] ?? colors.primary,
|
|
})),
|
|
onSelect: (v) => update('templateId', v),
|
|
})
|
|
}
|
|
/>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>导出设置</Text>
|
|
<View style={styles.card}>
|
|
<ToggleRow
|
|
label="隐藏联系方式"
|
|
desc="保护隐私，不展示手机号/邮箱"
|
|
value={localSettings.hideContact}
|
|
onChange={(v) => update('hideContact', v)}
|
|
/>
|
|
<ToggleRow
|
|
label="导出密码"
|
|
desc="为导出的简历设置查看密码"
|
|
notice={localSettings.exportPassword ? RESUME_EXPORT_PASSWORD_NOTICE : undefined}
|
|
value={localSettings.exportPassword}
|
|
onChange={(v) => update('exportPassword', v)}
|
|
/>
|
|
<SelectRow
|
|
label="纸型"
|
|
value={
|
|
RESUME_PAPER_SIZES.find((p) => p.value === localSettings.paperSize)?.label ?? 'A4'
|
|
}
|
|
onPress={() =>
|
|
setSheet({
|
|
title: '选择纸型',
|
|
value: localSettings.paperSize,
|
|
options: RESUME_PAPER_SIZES.map((p) => ({ value: p.value, label: p.label })),
|
|
onSelect: (v) => update('paperSize', pickPaperSize(v)),
|
|
})
|
|
}
|
|
/>
|
|
<SelectRow
|
|
label="方向"
|
|
value={
|
|
RESUME_ORIENTATIONS.find((o) => o.value === localSettings.orientation)?.label ??
|
|
'纵向'
|
|
}
|
|
onPress={() =>
|
|
setSheet({
|
|
title: '选择方向',
|
|
value: localSettings.orientation,
|
|
options: RESUME_ORIENTATIONS.map((o) => ({ value: o.value, label: o.label })),
|
|
onSelect: (v) => update('orientation', pickOrientation(v)),
|
|
})
|
|
}
|
|
/>
|
|
<InputRow
|
|
label="文件名"
|
|
value={localSettings.fileName}
|
|
onChange={(v) => update('fileName', v)}
|
|
placeholder="请输入文件名"
|
|
hint={RESUME_FILE_NAME_HINT}
|
|
/>
|
|
<ToggleRow
|
|
label="包含封面页"
|
|
desc="封面含姓名、期望职位与联系方式"
|
|
value={localSettings.includeCover}
|
|
onChange={(v) => update('includeCover', v)}
|
|
/>
|
|
<ToggleRow
|
|
label="包含自荐信"
|
|
desc="以自我评价内容生成；自我评价为空时不生成"
|
|
value={localSettings.includeRecommendation}
|
|
onChange={(v) => update('includeRecommendation', v)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>定向优化（可选）</Text>
|
|
<View style={styles.card}>
|
|
<Text style={styles.targetLabel}>粘贴岗位描述，AI 自动优化简历匹配度</Text>
|
|
<TextInput
|
|
style={styles.targetInput}
|
|
value={localSettings.targetJobDescription ?? ''}
|
|
onChangeText={(v) => update('targetJobDescription', v)}
|
|
placeholder="输入岗位 JD…"
|
|
placeholderTextColor={colors.textHint}
|
|
multiline
|
|
numberOfLines={4}
|
|
textAlignVertical="top"
|
|
/>
|
|
<Pressable
|
|
style={[styles.targetBtn, (jd === '' || optimizing) && styles.targetBtnDisabled]}
|
|
onPress={handleOptimize}
|
|
disabled={jd === '' || optimizing}
|
|
>
|
|
{optimizing ? (
|
|
<ActivityIndicator size="small" color={colors.white} />
|
|
) : (
|
|
<>
|
|
<Ionicons name="sparkles" size={16} color={colors.white} />
|
|
<Text style={styles.targetBtnText}>AI 智能优化</Text>
|
|
</>
|
|
)}
|
|
</Pressable>
|
|
{/* 按钮置灰时把原因写在旁边：灰按钮不给理由，用户只会以为坏了 */}
|
|
{jd === '' && <Text style={styles.noticeText}>请先粘贴岗位描述，再点优化</Text>}
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
|
|
<View style={styles.footer}>
|
|
<Pressable
|
|
style={[styles.shareBtn, sharing && styles.shareBtnDisabled]}
|
|
onPress={() => void handleShare()}
|
|
disabled={sharing}
|
|
>
|
|
{sharing ? (
|
|
<ActivityIndicator size="small" color={colors.textPrimary} />
|
|
) : (
|
|
<Text style={styles.shareBtnText}>分享简历</Text>
|
|
)}
|
|
</Pressable>
|
|
<Pressable
|
|
style={[styles.exportBtn, exporting && styles.exportBtnDisabled]}
|
|
onPress={handleExport}
|
|
disabled={exporting}
|
|
>
|
|
{exporting ? (
|
|
<ActivityIndicator size="small" color={colors.white} />
|
|
) : (
|
|
<Text style={styles.exportBtnText}>立即导出</Text>
|
|
)}
|
|
</Pressable>
|
|
</View>
|
|
|
|
{sheet !== null && (
|
|
<OptionSheet
|
|
sheet={sheet}
|
|
onClose={() => setSheet(null)}
|
|
/>
|
|
)}
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: colors.pageBg },
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 12,
|
|
backgroundColor: colors.white,
|
|
},
|
|
headerBtn: { width: 60, justifyContent: 'center' },
|
|
headerTitle: { fontSize: 17, fontWeight: '700', color: colors.textPrimary },
|
|
headerSave: { fontSize: 14, color: colors.primary, textAlign: 'right' },
|
|
body: { padding: 8, paddingBottom: 100 },
|
|
center: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 40, gap: 12 },
|
|
tip: { fontSize: 14, color: colors.textSecondary },
|
|
retryBtn: { paddingHorizontal: 18, paddingVertical: 8, borderRadius: 16, backgroundColor: colors.primaryLight },
|
|
retryText: { fontSize: 13, fontWeight: '600', color: colors.primaryText },
|
|
previewCard: {
|
|
backgroundColor: colors.white,
|
|
borderRadius: 8,
|
|
padding: 8,
|
|
alignItems: 'center',
|
|
marginBottom: 8,
|
|
borderWidth: 1,
|
|
borderColor: colors.borderLight,
|
|
},
|
|
previewThumb: {
|
|
width: 80,
|
|
height: 80,
|
|
borderRadius: 40,
|
|
backgroundColor: colors.primaryLight,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: 10,
|
|
},
|
|
previewText: { fontSize: 14, color: colors.textSecondary },
|
|
previewLink: { flexDirection: 'row', alignItems: 'center', marginTop: 8 },
|
|
previewLinkText: { fontSize: 13, color: colors.primary, marginRight: 2 },
|
|
section: { marginBottom: 16 },
|
|
sectionHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBottom: 12,
|
|
},
|
|
sectionTitle: { fontSize: 16, fontWeight: '700', color: colors.textPrimary, marginBottom: 12 },
|
|
moreLink: { fontSize: 13, color: colors.primary },
|
|
formatRow: { flexDirection: 'row', gap: 10 },
|
|
formatCard: {
|
|
flex: 1,
|
|
backgroundColor: colors.white,
|
|
borderRadius: 8,
|
|
padding: 8,
|
|
alignItems: 'center',
|
|
borderWidth: 1,
|
|
borderColor: colors.borderLight,
|
|
},
|
|
formatCardActive: { borderColor: colors.primary, backgroundColor: colors.primaryLight },
|
|
formatLabel: { fontSize: 13, fontWeight: '700', color: colors.textPrimary, marginTop: 8 },
|
|
formatLabelActive: { color: colors.primaryText },
|
|
formatHint: { fontSize: 10, color: colors.textHint, marginTop: 2 },
|
|
formatCheck: { position: 'absolute', top: 8, right: 8 },
|
|
noticeRow: { flexDirection: 'row', alignItems: 'center', gap: 4, marginTop: 10 },
|
|
noticeText: { fontSize: 12, color: colors.textHint, lineHeight: 17, marginTop: 4 },
|
|
templateRow: { flexDirection: 'row', gap: 10 },
|
|
templateCard: {
|
|
flex: 1,
|
|
backgroundColor: colors.white,
|
|
borderRadius: 8,
|
|
padding: 8,
|
|
alignItems: 'center',
|
|
borderWidth: 1,
|
|
borderColor: colors.borderLight,
|
|
},
|
|
templateCardActive: { borderColor: colors.primary },
|
|
templateThumb: {
|
|
width: '100%',
|
|
height: 80,
|
|
borderRadius: 8,
|
|
backgroundColor: colors.primary,
|
|
padding: 12,
|
|
marginBottom: 8,
|
|
},
|
|
templateLines: { gap: 8, marginTop: 8 },
|
|
templateLine: { height: 8, borderRadius: 4, backgroundColor: colors.white, opacity: 0.9 },
|
|
templateLineShort: { width: '60%', height: 8, borderRadius: 4, backgroundColor: colors.white, opacity: 0.7 },
|
|
templateName: { fontSize: 12, color: colors.textPrimary },
|
|
templateNameActive: { color: colors.primaryText, fontWeight: '700' },
|
|
card: {
|
|
backgroundColor: colors.white,
|
|
borderRadius: 8,
|
|
padding: 8,
|
|
borderWidth: 1,
|
|
borderColor: colors.borderLight,
|
|
},
|
|
toggleRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 12,
|
|
borderTopWidth: 1,
|
|
borderTopColor: colors.borderLight,
|
|
},
|
|
toggleText: { flex: 1, marginRight: 12 },
|
|
toggleLabel: { fontSize: 14, color: colors.textPrimary },
|
|
toggleDesc: { fontSize: 12, color: colors.textHint, marginTop: 2 },
|
|
inputRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 12,
|
|
borderTopWidth: 1,
|
|
borderTopColor: colors.borderLight,
|
|
},
|
|
inputLabelBox: { flex: 1, marginRight: 12 },
|
|
inputLabel: { fontSize: 14, color: colors.textPrimary, width: 80 },
|
|
inputHint: { fontSize: 11, color: colors.textHint, marginTop: 2 },
|
|
input: {
|
|
flex: 1,
|
|
fontSize: 14,
|
|
color: colors.textPrimary,
|
|
textAlign: 'right',
|
|
},
|
|
selectValue: { flexDirection: 'row', alignItems: 'center', gap: 4 },
|
|
selectValueText: { fontSize: 14, color: colors.textSecondary },
|
|
targetLabel: { fontSize: 13, color: colors.textSecondary, marginBottom: 10 },
|
|
targetInput: {
|
|
height: 100,
|
|
borderRadius: 10,
|
|
backgroundColor: colors.pageBg,
|
|
padding: 12,
|
|
fontSize: 14,
|
|
color: colors.textPrimary,
|
|
},
|
|
targetBtn: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: colors.primaryBtn,
|
|
borderRadius: 12,
|
|
paddingVertical: 12,
|
|
marginTop: 12,
|
|
},
|
|
targetBtnDisabled: { backgroundColor: colors.textDisabled },
|
|
targetBtnText: { fontSize: 14, fontWeight: '700', color: colors.white, marginLeft: 6 },
|
|
scrim: { flex: 1, backgroundColor: colors.scrim, justifyContent: 'flex-end' },
|
|
sheet: {
|
|
backgroundColor: colors.white,
|
|
borderTopLeftRadius: 18,
|
|
borderTopRightRadius: 18,
|
|
paddingHorizontal: 20,
|
|
paddingTop: 18,
|
|
paddingBottom: 28,
|
|
},
|
|
sheetTitle: { fontSize: 16, fontWeight: '700', color: colors.textPrimary, marginBottom: 8 },
|
|
sheetRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: 14,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.borderLight,
|
|
},
|
|
sheetSwatch: { width: 22, height: 22, borderRadius: 6, marginRight: 12 },
|
|
sheetLabel: { flex: 1, fontSize: 15, color: colors.textPrimary },
|
|
sheetLabelActive: { color: colors.primaryText, fontWeight: '700' },
|
|
sheetHint: { fontSize: 12, color: colors.textHint, marginTop: 12, lineHeight: 18 },
|
|
sheetCancel: {
|
|
marginTop: 16,
|
|
paddingVertical: 12,
|
|
borderRadius: 24,
|
|
alignItems: 'center',
|
|
backgroundColor: colors.pageBg,
|
|
},
|
|
sheetCancelText: { fontSize: 15, fontWeight: '600', color: colors.textSecondary },
|
|
footer: {
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
flexDirection: 'row',
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
backgroundColor: colors.white,
|
|
borderTopWidth: 1,
|
|
borderTopColor: colors.borderLight,
|
|
},
|
|
shareBtn: {
|
|
flex: 1,
|
|
backgroundColor: colors.white,
|
|
borderRadius: 24,
|
|
paddingVertical: 14,
|
|
alignItems: 'center',
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
marginRight: 12,
|
|
},
|
|
shareBtnDisabled: { borderColor: colors.borderLight },
|
|
shareBtnText: { fontSize: 15, fontWeight: '700', color: colors.textPrimary },
|
|
exportBtn: {
|
|
flex: 2,
|
|
backgroundColor: colors.primaryBtn,
|
|
borderRadius: 24,
|
|
paddingVertical: 14,
|
|
alignItems: 'center',
|
|
},
|
|
exportBtnDisabled: { backgroundColor: colors.textDisabled },
|
|
exportBtnText: { fontSize: 15, fontWeight: '700', color: colors.white },
|
|
});
|
|
|