1. 搭建鸿蒙工程结构与入口配置#

使用 DevEco Studio 创建 Stage 模型工程 calculator，主模块名为 entry，设备类型选择 phone。工程采用标准的鸿蒙目录结构：

1
entry/src/main/
2
├── ets/
3
│   ├── entryability/EntryAbility.ets    # 应用生命周期入口
4
│   ├── entrybackupability/EntryBackupAbility.ets
5
│   ├── pages/Index.ets                  # 唯一页面（计算器主界面）
6
│   ├── common/constants/                # 全局常量
7
│   │   ├── CommonConstants.ets          # 按键数据集、状态文案、业务阈值
8
│   │   └── ThemeConstants.ets           # 深色/浅色主题色板
9
│   ├── common/util/
10
│   │   └── CalculateUtil.ets            # 表达式引擎（词法分析 + 递归下降求值）
11
│   └── viewmodel/
12
│       ├── PressKeysItem.ets            # 按键条目数据模型
13
│       └── PresskeysViewModel.ets       # 按键数据集组装
14
├── resources/base/media/                # 图片资源（背景、符文、吉祥物等）
15
├── resources/base/profile/main_pages.json
16
├── module.json5                         # 模块清单（能力注册）

module.json5 中将 EntryAbility 注册为主能力，图标使用分层图像 $media:layered_image，启动窗口图标设为 $media:startIcon：

1
{
2
  module: {
3
    name: 'entry',
4
    type: 'entry',
5
    mainElement: 'EntryAbility',
6
    deviceTypes: ['phone'],
7
    abilities: [{
8
      name: 'EntryAbility',
9
      srcEntry: './ets/entryability/EntryAbility.ets',
10
      icon: '$media:layered_image',
11
      label: '$string:EntryAbility_label',
12
      startWindowIcon: '$media:startIcon'
13
    }]
14
  }
15
}

main_pages.json 配置路由表，当前只有 'pages/Index' 一个页面。EntryAbility.ets 在 onWindowStageCreate 中调用 windowStage.loadContent('pages/Index') 加载主页。

2. 设计主题色板与按键数据模型#

所有颜色定义集中在 ThemeConstants.ets 的 ThemePalette 接口中，分别导出 THEME_DARK（玄青霓虹）和 THEME_LIGHT（月白青瓷）两套色板，包含 28 个语义化字段（bg / card / neon / crimson / gold / text / border 等），确保深浅模式切换时只需替换引用对象而不改动任何组件代码。

CommonConstants.ets 定义基础按键数组 KEYS_BASIC（18 个：AC / ⌫ / % / ÷ / 7–9 × / 4–6 − / 1–3 + / 0 . =）和科学按键数组 KEYS_SCIENCE（12 个：sin cos tan ln log √ / x² xʸ π e ( )），以及四条状态文案（灵力稳定 / 术式输入中 / 符阵已闭合 / 术式失效）和历史上限 5 条、灵力满格长度 24。

PressKeysItem.ets 是轻量数据模型，每个条目携带 label（显示文本）、span（跨列数，仅 '0' 为 2）、isEquals（是否等号，决定字号）。PresskeysViewModel.ets 从常量中读取并组装成 PressKeysItem[]，供 UI 层直接消费：

1
static getBasicKeys(): PressKeysItem[] {
2
  return CommonConstants.KEYS_BASIC.map((label: string) =>
3
    new PressKeysItem(label, label === '0' ? 2 : 1, label === '=')
4
  )
5
}

3. 实现表达式引擎 CalculateUtil#

CalculateUtil.ets 是整个计算器的核心——一个不依赖任何 UI 框架的纯逻辑类，负责将用户输入的字符串表达式解析并求值。整体流程分为三步：词法分析 → 递归下降语法分析 → 格式化输出。

词法分析 tokenize 将输入串拆分为 token 数组，识别数字（含小数）、标识符（函数名 / 常量 pi / e）、运算符（+ - * / ^ %）和括号，遇到非法字符直接抛异常：

1
private static tokenize(input: string): string[] {
2
  const tokens: string[] = []
3
  let i: number = 0
4
  while (i < input.length) {
5
    const c = input[i]
6
    if (c === ' ') { i++; continue }
7
    const isDigit = (c >= '0' && c <= '9') || c === '.'
8
    const isLetter = (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z')
9
    if (isDigit || isLetter) {
10
      let s = ''
11
      while (i < input.length) { /* 贪婪匹配数字或字母 */ }
12
      tokens.push(s); continue
13
    }
14
    if ('+-*/^()%'.indexOf(c) >= 0) { tokens.push(c); i++; continue }
15
    throw new Error('char:' + c)
16
  }
17
  return tokens
18
}

递归下降求值 evaluate 先将显示符号（× ÷ −）归一化为 ASCII（* / -），再按以下优先级从低到高构建语法树：

三角函数通过 mul 参数控制角度 / 弧度转换：radian ? 1 : Math.PI / 180。applyFunc 对非法参数（ln(0)、sqrt(-1)、tan(90°)）返回 NaN，由外层 isFinite 校验统一转为「术式失效」错误。

自动补全与合法性判断：completeForEvaluation 在求值前检查末尾是否需要补齐缺失的右括号（如 sin(30 → sin(30)），而 isCompletable 判断当前表达式是否已具备可求值的最小条件（末尾不是运算符且不以左括号结尾）。

格式化 format 处理浮点误差：绝对值小于 1e-12 归零；超大或超小数用科学计数法（8 位有效数字）；其余用 toPrecision(12) 再转字符串以去除无意义尾零。

4. 构建计算器主界面 Index.ets#

Index.ets 是唯一的页面组件，使用 @Entry @Component 装饰器标记。内部通过大量 @State 变量驱动响应式渲染：expression（当前输入表达式）、result（上次计算结果）、preview（实时预览值）、history（历史记录数组）、scientific（是否展开科学面板）、radian（角度 / 弧度）、darkMode（深浅主题）、evaluated（是否处于已计算状态）、pressedKey（当前按下键名，用于触控反馈动画）等。

build() 布局采用三层 Stack 结构：

1. 底层：全屏背景图 qingcalc_bg.png（深色模式下 75% 不透明度）+ 底部角落装饰图 + 右上角吉祥物
2. 中层 Column：从上到下依次排列
   • 标题栏：app 图标 + 「玄青符算」标题 + 「QINGCALC · RUNE TERMINAL」副标题 + 右侧状态芯片（● ONLINE / 灵力稳定）
   • 功能行：标准 / 科学切换按钮、DEG / RAD 切换、☾ 深色 / ☀ 浅色切换
   • 显示卡片 displayCard() @Builder：Stack 内层叠半透明符文 rune_core.png（旋转动画）+ 内容 Column（表达式大字右对齐、预览行、灵力进度条、RAD/DEG 与记录数）；长按 450ms 弹出历史下拉面板
   • 科学键盘 Grid（条件渲染）：6 列 × 2 行，展示 sin / cos / tan 等科学函数键
   • 基础键盘 Grid：4 列 × 5 行，‘0’ 键跨两列，’=’ 键使用鎏金色突出
   • 页脚：「东方幻想 UI · v3.0」

按键绘制 keyButton() @Builder 是所有按钮的统一模板，根据 key 类型动态决定颜色（等号→鎏金、运算符→朱砂红、功能键→青灰、科学键→深青、数字键→暗青），并在按下时触发缩放 + 下移 + 阴影扩散的 70ms 按压动画，松开时 190ms 缓动回弹：

1
@Builder keyButton(key: string, scienceKey: boolean) {
2
  Button(key)
3
    .fontSize(key === '=' ? 27 : (scienceKey ? 14 : 20))
4
    .fontColor(key === '=' || this.activeOperator === key ? '#17262A' : this.text())
5
    .backgroundColor(this.buttonColor(key)).borderRadius(scienceKey ? 13 : 18)
6
    .border({ width: this.pressedKey === key ? 2 : (this.activeOperator === key ? 1.5 : 0),
7
              color: this.pressedKey === key ? this.gold() : this.neon() })
8
    .scale({ x: this.pressedKey === key ? 0.90 : 1, y: this.pressedKey === key ? 0.90 : 1 })
9
    .translate({ y: this.pressedKey === key ? 3 : 0 })
10
    .animation({ duration: this.pressedKey === key ? 70 : 190,
11
                 curve: this.pressedKey === key ? Curve.EaseIn : Curve.EaseOut })
12
    .onTouch((event: TouchEvent) => {
13
      if (event.type === TouchType.Down) this.pressDown(key)
14
      else if (event.type === TouchType.Up || event.type === TouchType.Cancel) this.pressUp(key)
15
    })
16
    .onClick(() => this.handleKey(key))
17
}

5. 输入处理与实时预览#

handleKey(key) 是所有按键的统一分发入口，根据 key 类型调用对应方法：

1
handleKey(key: string): void {
2
  if (key === 'AC') { this.clearAll(); return }
3
  if (key === '⌫') { this.deleteUnit(); return }
4
  if (key === '=') { this.calculate(); return }
5
  if (this.isOperator(key)) { this.appendOperator(key); return }
6
  if (key === '.') { this.appendDecimal(); return }
7
  if (key >= '0' && key <= '9') { this.appendDigit(key); return }
8
  // 科学函数、√、x²、xʸ、π、e、(、) → appendValue
9
}

数字输入 appendDigit 处理多种边界：已计算状态下自动清空重新开始；当前段为 "0" 时替换而非追加；表达式尾部是 ) / % / pi / e 时自动插入隐式乘号 ×。

运算符输入 appendOperator 保证连续运算符只保留最后一个（输入 + 后再输 - 会替换为 -）；已计算状态下将结果作为左操作数继续运算；允许表达式开头出现负号。

隐式乘法：当已有值（数字 / 右括号 / % / pi / e）后面紧跟 ( / pi / e / 函数名时，自动插入 ×，使 2π、3(、2sin( 等写法合法。

实时预览：expression 变量带有 @Watch('onInputChange') 装饰器，每次变化时触发 updatePreview，调用 CalculateUtil.isCompletable 判断是否可求值，若可以则通过 completeForEvaluation 补齐括号后调用 evaluate + format 得到预览结果，显示在表达式下方（如输入 12×8+5 即刻显示 = 101）。

字号自适应 fitSize 根据文本长度动态缩小字号，保证长表达式不截断为省略号：基准字号下能容纳 fitLen 个字符，超出则线性缩小至最小字号 min。

6. 计算、历史记录与卦象系统#

点击 = 触发 calculate()：先检查是否处于「连算」状态（已计算后再次按 =, 则用上次捕获的运算符和右操作数继续运算），然后调用 CalculateUtil.evaluate 求值，成功后执行一系列副作用：

1. 捕获连算信息 captureRepeat：从完成后的表达式中提取最后一个运算符及其右侧操作数，供下次连算使用。
2. 写入历史 history：将 表达式 = 结果 格式的条目插入数组头部，最多保留 5 条（HISTORY_MAX），重复结果不追加。
3. 卦象映射 castHexagram：将结果取绝对值乘 1000 后对 64 取模，索引到内置的 64 卦名称数组（乾为天 ~ 火水未济），显示 Unicode 卦符 + 序号 + 卦名（如结果为 3.14159 → 第 43 卦 · 夬）。
4. 结果动画 playResultAnimation：符文旋转 180°、结果文字先缩放到 0.72 再弹回 1.08 最后稳定于 1.0、表达式上移并淡出，形成「结算」视觉反馈。
5. 状态更新：evaluated 置为 true，状态改为「符阵已闭合」，活跃运算符清空。

历史下拉面板 historyDropdown() @Builder 以浮动卡片形式覆盖在显示卡片上方，列出最近 5 条记录（每条显示表达式和结果，结果用鎏金高亮），支持点击复用表达式重新编辑，并提供「清除全部」和关闭按钮。长按显示卡片区域 450ms 触发显示 / 隐藏切换。

7. 编译运行#

完成后在 DevEco Studio 中使用 Previewer 预览或连接模拟器运行。启动后正确显示「玄青符算」标题栏和深色背景纹理；输入 12×8+5 时预览区即时显示 = 101；点击 = 后结果以霓虹青色大字呈现，符文旋转播放结算动画，下方显示对应卦象；切换「科学」按钮展开三角函数 / 对数 / 幂 / 常量面板；点击 DEG 切换为弧度模式后 sin(30) 结果从 0.5 变为 -0.988；长按显示卡片弹出历史记录下拉；点击「☀ 浅色」一键切换为月白青瓷配色；所有按键均有按压缩放反馈，运算符激活态有霓虹边框高亮。