102 lines
3.5 KiB
Plaintext
102 lines
3.5 KiB
Plaintext
/**
|
||
* 图标：设计稿字符 → RemixIcon 名称 映射
|
||
* ------------------------------------------------------------
|
||
* 设计稿里用「▦ ✓ ⚑」等字符当图标，真机渲染效果差且不统一。
|
||
* 这里统一转成 RemixIcon（https://remixicon.com/）名称，由 x-icon 渲染。
|
||
*
|
||
* 用法：`<x-icon :name="toRemixIcon(glyph)" />`
|
||
* 若传入的本身就是 RemixIcon 名（含 '-'），原样返回，可直接透传。
|
||
*
|
||
* ⚠⚠ 本文件导出的函数**不要直接写在 .uvue 的 template 里**！
|
||
* uvue 编译器会把模板里的「import 函数」编译成 `unref(toRemixIcon)(x)`，
|
||
* App 端 Kotlin 报：找不到名称"invoke" / Function invocation 'toRemixIcon(...)' expected。
|
||
* 正确做法：在页面 script 里包一层本文件内定义的函数再给模板用：
|
||
* function entryIcon(g : string) : string { return toRemixIcon(g) }
|
||
* （hr-lrow / hr-tip / hr-empty 是在 computed 里调用的，没问题。）
|
||
*/
|
||
const ICON_MAP : Map<string, string> = new Map<string, string>([
|
||
// 列表 / 文件 / 数据
|
||
['▦', 'layout-grid-line'],
|
||
['▤', 'file-list-3-line'],
|
||
['▣', 'monitor-line'],
|
||
['▢', 'clipboard-line'],
|
||
['▥', 'bar-chart-2-line'],
|
||
// 状态
|
||
['✓', 'check-line'],
|
||
['✗', 'close-line'],
|
||
['✕', 'close-line'],
|
||
['×', 'close-line'],
|
||
['!', 'error-warning-line'],
|
||
['⚠', 'alarm-warning-line'],
|
||
['ℹ', 'information-line'],
|
||
['?', 'question-line'],
|
||
['? ', 'question-line'],
|
||
// 操作
|
||
['⚑', 'flag-line'],
|
||
['＋', 'add-line'],
|
||
['+', 'add-line'],
|
||
['⇅', 'arrow-up-down-line'],
|
||
['⇄', 'arrow-left-right-line'],
|
||
['↦', 'route-line'],
|
||
['✎', 'edit-line'],
|
||
['⌕', 'search-line'],
|
||
['⋯', 'more-fill'],
|
||
['…', 'more-fill'],
|
||
['⟨', 'more-fill'],
|
||
// 导航
|
||
['⌂', 'home-3-line'],
|
||
['⌗', 'qr-scan-line'],
|
||
['☺', 'user-3-line'],
|
||
['✉', 'mail-line'],
|
||
['☎', 'phone-line'],
|
||
['⚙', 'settings-3-line'],
|
||
['›', 'arrow-right-s-line'],
|
||
['‹', 'arrow-left-s-line'],
|
||
['⌄', 'arrow-down-s-line'],
|
||
['⌃', 'arrow-up-s-line'],
|
||
// 业务
|
||
['♡', 'heart-pulse-line'],
|
||
['★', 'star-line'],
|
||
['☆', 'star-line'],
|
||
['◔', 'time-line'],
|
||
['◍', 'bubble-chart-line'],
|
||
['⚡', 'flashlight-line'],
|
||
['◈', 'apps-2-line'],
|
||
['☣', 'biohazard-line'],
|
||
['✦', 'sparkling-line'],
|
||
// 播放器
|
||
['▶', 'play-fill'],
|
||
['▸', 'play-line'],
|
||
['⏸', 'pause-line'],
|
||
['⤢', 'fullscreen-line'],
|
||
['⏮', 'skip-back-line'],
|
||
['⏭', 'skip-forward-line'],
|
||
// 分隔 / 其它
|
||
['—', 'subtract-line'],
|
||
['·', 'more-line']
|
||
])
|
||
|
||
/** 字符图标 → RemixIcon 名；已是 RemixIcon 名则原样返回 */
|
||
export function toRemixIcon(glyph : string) : string {
|
||
if (glyph == null || glyph == '') { return '' }
|
||
const mapped = ICON_MAP.get(glyph)
|
||
if (mapped != null) { return mapped }
|
||
// 含 '-' 视为已经是 remixicon 名称，直接透传
|
||
if (glyph.indexOf('-') > -1) { return glyph }
|
||
return 'checkbox-blank-circle-line'
|
||
}
|
||
|
||
/** 主题 → 图标底色 / 图标色（保持设计稿的四色语义） */
|
||
export type HrThemeColor = {
|
||
bg : string
|
||
color : string
|
||
}
|
||
|
||
export function themeColor(theme : string) : HrThemeColor {
|
||
if (theme == 'pri') { return { bg: '#EFF6FF', color: '#2563EB' } as HrThemeColor }
|
||
if (theme == 'red') { return { bg: '#FEF2F2', color: '#DC2626' } as HrThemeColor }
|
||
if (theme == 'amb') { return { bg: '#FEF3C7', color: '#D97706' } as HrThemeColor }
|
||
if (theme == 'grn') { return { bg: '#ECFDF5', color: '#059669' } as HrThemeColor }
|
||
return { bg: '#F3F4F6', color: '#6B7280' } as HrThemeColor
|
||
}
|