youlegames/codes/minipro/calculation/miniprogram/pages/calculator/calculator.wxml

<!--pages/calculator/calculator.wxml-->
<view class="calculator-container">
  <privacy-popup></privacy-popup>
  <!-- 帮助说明面板 -->
  <view class="history-panel {{showHelp ? 'show' : ''}}" catchtouchmove="preventTouchMove" style="z-index: 200;">
    <view class="history-mask" bindtap="toggleHelp"></view>
    <view class="history-content help-content">
      <view class="history-header">
        <text class="history-title">使用说明</text>
        <text class="history-clear" bindtap="toggleHelp">关闭</text>
      </view>
      <scroll-view scroll-y class="history-list help-list">
        <view class="help-section">
            <view class="help-item">
                <text class="help-icon">⚗️</text>
                <view class="help-text">
                    <text class="help-h1">科学模式</text>
                    <text class="help-p">点击左上角“科学”按钮切换模式，支持三角函数(sin, cos, tan)、对数(log, ln)、指数(x²)、开方(√)等高级运算。</text>
                </view>
            </view>
            <view class="help-item">
                <text class="help-icon">🕐</text>
                <view class="help-text">
                    <text class="help-h1">历史记录</text>
                    <text class="help-p">点击时钟图标查看过往计算记录，点击某条记录可将其结果填入当前计算。</text>
                </view>
            </view>
            <view class="help-item">
                <text class="help-icon">📋</text>
                <view class="help-text">
                    <text class="help-h1">复制结果</text>
                    <text class="help-p">点击剪贴板图标可将当前显示结果复制到系统剪贴板。</text>
                </view>
            </view>
             <button class="share-btn-large" open-type="share">分享给好友</button>
        </view>
      </scroll-view>
    </view>
  </view>

  <!-- 历史记录面板 -->
  <view class="history-panel {{showHistory ? 'show' : ''}}" catchtouchmove="preventTouchMove">
    <view class="history-mask" bindtap="toggleHistory"></view>
    <view class="history-content">
      <view class="history-header">
        <text class="history-title">计算历史</text>
        <text class="history-clear" bindtap="clearHistory">清空</text>
      </view>
      <scroll-view scroll-y class="history-list" enhanced show-scrollbar="{{false}}">
        <block wx:if="{{historyList.length > 0}}">
          <view class="history-item" wx:for="{{historyList}}" wx:key="index" 
                bindtap="useHistoryResult" data-result="{{item.result}}" 
                hover-class="history-item-hover" hover-stay-time="100">
            <text class="history-expr">{{item.expression}}</text>
            <text class="history-result">= {{item.result}}</text>
          </view>
        </block>
        <view wx:else class="history-empty">
          <text class="history-empty-icon">📭</text>
          <text>暂无计算记录</text>
        </view>
      </scroll-view>
    </view>
  </view>

  <!-- 显示区域 -->
  <view class="display-area">
    <view class="display-top-bar">
      <view class="mode-indicator">
        <text class="{{!isScientific ? 'active' : ''}}" bindtap="switchMode" data-mode="normal">常用</text>
        <text class="{{isScientific ? 'active' : ''}}" bindtap="switchMode" data-mode="scientific">科学</text>
      </view>
      <view class="top-actions">
        <!-- 复制结果按钮 (带文字) -->
        <view class="action-btn copy-btn" bindtap="copyResult" hover-class="action-btn-hover" hover-stay-time="100">
          <text class="action-icon">📋</text>
          <text class="action-text">复制结果</text>
        </view>

        <!-- 设置按钮 (包含历史和帮助) -->
        <view class="settings-container">
            <view class="action-btn" bindtap="toggleSettings" hover-class="action-btn-hover" hover-stay-time="100">
                <text class="action-icon">⚙️</text>
            </view>
            <!-- 下拉菜单 -->
            <view class="dropdown-menu {{showSettingsMenu ? 'show' : ''}}">
                <view class="menu-item" bindtap="toggleHistory">
                    <text class="menu-icon">🕐</text>
                    <text class="menu-text">历史记录</text>
                </view>
                <view class="menu-item" bindtap="toggleHelp">
                    <text class="menu-icon">❓</text>
                    <text class="menu-text">使用帮助</text>
                </view>
            </view>
            <!-- 点击背景关闭菜单 -->
            <view class="settings-mask" wx:if="{{showSettingsMenu}}" bindtap="closeSettings"></view>
        </view>
      </view>
    </view>
    <view class="history-text">{{history}}</view>
    <view class="current-value {{displayValue.length > 9 ? 'shrink' : ''}} {{displayValue.length > 15 ? 'shrink-more' : ''}}">{{displayValue}}</view>
  </view>
  
  <!-- 键盘区域 -->
  <view class="keypad-area {{isScientific ? 'scientific-pad' : ''}}">
    
    <!-- 科学功能区 (隐藏/显示) -->
    <block wx:if="{{isScientific}}">
        <view class="row small-row">
            <view class="btn sci-btn" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onMathFunc" data-func="sin">sin</view>
            <view class="btn sci-btn" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onMathFunc" data-func="cos">cos</view>
            <view class="btn sci-btn" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onMathFunc" data-func="tan">tan</view>
            <view class="btn sci-btn" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onMathFunc" data-func="log">log</view>
            <view class="btn sci-btn" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onMathFunc" data-func="ln">ln</view>
        </view>
        <view class="row small-row">
            <view class="btn sci-btn" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onConstant" data-const="pi">π</view>
            <view class="btn sci-btn" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onConstant" data-const="e">e</view>
            <view class="btn sci-btn" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onMathFunc" data-func="pow2">x²</view>
            <view class="btn sci-btn" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onMathFunc" data-func="sqrt">√</view>
            <view class="btn sci-btn" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onMathFunc" data-func="percent">%</view>
        </view>
    </block>
  
    <!-- 基础键盘 -->
    <view class="row">
      <view class="btn func" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onClear">AC</view>
      <view class="btn func" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onDelete">⌫</view>
      <view class="btn func" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onToggleSign">+/-</view>
      <view class="btn operator" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onOperator" data-op="÷">÷</view>
    </view>
    
    <view class="row">
      <view class="btn digit" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onDigit" data-digit="7">7</view>
      <view class="btn digit" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onDigit" data-digit="8">8</view>
      <view class="btn digit" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onDigit" data-digit="9">9</view>
      <view class="btn operator" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onOperator" data-op="×">×</view>
    </view>
    
    <view class="row">
      <view class="btn digit" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onDigit" data-digit="4">4</view>
      <view class="btn digit" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onDigit" data-digit="5">5</view>
      <view class="btn digit" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onDigit" data-digit="6">6</view>
      <view class="btn operator" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onOperator" data-op="-">−</view>
    </view>
    
    <view class="row">
      <view class="btn digit" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onDigit" data-digit="1">1</view>
      <view class="btn digit" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onDigit" data-digit="2">2</view>
      <view class="btn digit" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onDigit" data-digit="3">3</view>
      <view class="btn operator" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onOperator" data-op="+">+</view>
    </view>
    
    <view class="row">
      <view class="btn digit zero" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onDigit" data-digit="0">0</view>
      <view class="btn digit" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onDot">.</view>
      <view class="btn operator equal" hover-class="btn-hover" hover-start-time="0" hover-stay-time="100" bindtap="onEqual">=</view>
    </view>
  </view>
</view>