npmapps 1.0.25 → 1.0.26

package/app/src/components/FormulaEditor/index.vue

@@ -0,0 +1,435 @@
+<template>
+  <div class="formula-editor">
+    <!-- 顶部区域：公式编辑 + 提示 -->
+    <div class="top-area">
+      <!-- 左侧：公式编辑区域 -->
+      <div class="section formula-section">
+        <div class="section-header">
+           <h3 class="section-title">公式编辑</h3>
+           <el-popover
+            placement="bottom"
+            width="300"
+            trigger="hover"
+            content="点击右侧按钮输入数字和运算符，或直接在文本框输入。支持加减乘除及括号运算。"
+          >
+            <i slot="reference" class="el-icon-question help-icon"></i>
+          </el-popover>
+        </div>
+        <div class="editor-container">
+          <!-- 左边：文本域输入框 -->
+          <div class="left-panel">
+            <el-input
+              ref="formulaInput"
+              type="textarea"
+              v-model="formula"
+              placeholder="在此输入公式..."
+              resize="none"
+              class="formula-textarea"
+              @drop.native="handleInputDrop"
+              @blur="recordCursorPos"
+              @click.native="recordCursorPos"
+              @keyup.native="recordCursorPos"
+            ></el-input>
+          </div>
+          <!-- 右边：按钮区域 -->
+          <div class="right-panel">
+            <div class="btn-grid">
+              <el-button size="mini" plain @click="insertText('1')" @mousedown.native.prevent>1</el-button>
+              <el-button size="mini" plain @click="insertText('2')" @mousedown.native.prevent>2</el-button>
+              <el-button size="mini" plain @click="insertText('3')" @mousedown.native.prevent>3</el-button>
+              <el-button size="mini" type="primary" plain @click="insertText('+')" @mousedown.native.prevent>+</el-button>
+              
+              <el-button size="mini" plain @click="insertText('4')" @mousedown.native.prevent>4</el-button>
+              <el-button size="mini" plain @click="insertText('5')" @mousedown.native.prevent>5</el-button>
+              <el-button size="mini" plain @click="insertText('6')" @mousedown.native.prevent>6</el-button>
+              <el-button size="mini" type="primary" plain @click="insertText('-')" @mousedown.native.prevent>-</el-button>
+              
+              <el-button size="mini" plain @click="insertText('7')" @mousedown.native.prevent>7</el-button>
+              <el-button size="mini" plain @click="insertText('8')" @mousedown.native.prevent>8</el-button>
+              <el-button size="mini" plain @click="insertText('9')" @mousedown.native.prevent>9</el-button>
+              <el-button size="mini" type="primary" plain @click="insertText('*')" @mousedown.native.prevent>*</el-button>
+              
+              <el-button size="mini" plain @click="insertText('0')" @mousedown.native.prevent>0</el-button>
+              <el-button size="mini" plain @click="insertText('.')" @mousedown.native.prevent>.</el-button>
+              <el-button size="mini" plain @click="insertText('(')" @mousedown.native.prevent>(</el-button>
+              <el-button size="mini" type="primary" plain @click="insertText('/')" @mousedown.native.prevent>/</el-button>
+            </div>
+             <div class="btn-actions">
+              <el-button size="mini" plain @click="insertText(')')" class="action-btn" @mousedown.native.prevent>)</el-button>
+              <el-button size="mini" type="danger" plain @click="clearFormula" class="action-btn" @mousedown.native.prevent>清空</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部区域：公式预选模块 -->
+    <div class="section selection-section">
+      <h3 class="section-title">参数预选</h3>
+      <div class="selection-container" :style="{ height: selectionHeight + 'px' }">
+        <div
+          v-for="(item, index) in selectorList"
+          :key="index"
+          class="selection-item card-shadow"
+        >
+          <component
+            :is="item.component"
+            v-bind="item.props"
+            @select="handleSelect"
+            :onlyLeafClickable="onlyLeafClickable"
+          />
+        </div>
+      </div>
+      <!-- 拖拽手柄 -->
+      <div class="resize-handle" @mousedown="startResize"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import FunctionSelector from "./FunctionSelector.vue";
+import OperatorSelector from "./OperatorSelector.vue";
+import ParameterSelector from "./ParameterSelector.vue";
+
+export default {
+  name: "FormulaEditor",
+  components: {
+    FunctionSelector,
+    OperatorSelector,
+    ParameterSelector,
+  },
+  props: {
+    selectors: {
+      type: Array,
+      default: () => [
+        { type: "function", props: { prefix: "F_" } },
+        { type: "operator", props: { prefix: "" } },
+        { type: "parameter", props: { prefix: "P_" } },
+      ],
+    },
+  },
+  data() {
+    return {
+      formula: "",
+      selectionHeight: 300,
+      startY: 0,
+      startHeight: 0,
+      onlyLeafClickable: true, // 控制是否只能点击最底层的子数据
+      componentMap: {
+        function: "FunctionSelector",
+        operator: "OperatorSelector",
+        parameter: "ParameterSelector",
+      },
+      cursorPos: null,
+    };
+  },
+  computed: {
+    selectorList() {
+      return this.selectors.map((item) => {
+        // 兼容旧的字符串格式配置
+        if (typeof item === 'string') {
+          return {
+             component: this.componentMap[item],
+             props: {}
+          }
+        }
+        // 新的对象格式配置
+        return {
+          component: this.componentMap[item.type],
+          props: item.props || {},
+        };
+      });
+    },
+  },
+  methods: {
+    insertText(text) {
+      const textarea = this.$refs.formulaInput.$refs.textarea;
+      let pos = this.cursorPos;
+      
+      // 如果当前已经是聚焦状态，直接使用当前光标位置
+      if (document.activeElement === textarea) {
+        pos = textarea.selectionStart;
+      } else if (pos === null) {
+        // 如果没有记录位置且未聚焦，默认追加到最后
+        pos = this.formula.length;
+      }
+      
+      const val = this.formula;
+      const newVal = val.slice(0, pos) + text + val.slice(pos);
+      this.formula = newVal;
+      
+      // 计算新的光标位置
+      let newCursorPos = pos + text.length;
+      
+      // 检查插入内容是否包含 "()"
+      // 如果包含，光标定位到第一个 "()" 的中间
+      const parenIndex = text.indexOf("()");
+      if (parenIndex !== -1) {
+        newCursorPos = pos + parenIndex + 1;
+      }
+      
+      this.cursorPos = newCursorPos;
+      
+      // 聚焦并设置光标
+      this.$nextTick(() => {
+        textarea.focus();
+        textarea.setSelectionRange(this.cursorPos, this.cursorPos);
+      });
+    },
+    handleSelect(item) {
+      if (item && item.value) {
+        this.insertText(item.value);
+      }
+    },
+    recordCursorPos(e) {
+      // 记录光标位置
+      if (e.target && e.target.selectionStart !== undefined) {
+        this.cursorPos = e.target.selectionStart;
+      }
+    },
+    handleInputDrop(e) {
+      // 获取拖拽的文本内容 (必须在异步回调前获取)
+      const droppedText = (e.dataTransfer && e.dataTransfer.getData) 
+        ? e.dataTransfer.getData("text/plain") 
+        : "";
+
+      // 拖拽释放后，自动聚焦文本域
+      // 增加延时，确保在浏览器默认行为（插入+选中）以及 Vue 的 DOM 更新完成后执行
+      setTimeout(() => {
+        if (this.$refs.formulaInput) {
+           const textarea = this.$refs.formulaInput.$refs.textarea;
+           this.$refs.formulaInput.focus();
+           
+           // 获取选区结束位置（即插入文本的末尾）
+           let endPos = textarea.selectionEnd;
+           
+           // 尝试根据拖拽文本定位光标
+           if (droppedText) {
+             const parenIndex = droppedText.indexOf("()");
+             if (parenIndex !== -1) {
+               // 光标应该在 startPos + parenIndex + 1
+               // 为了安全，校验一下长度是否足够
+               if (endPos >= droppedText.length) {
+                  endPos = endPos - droppedText.length + parenIndex + 1;
+               }
+             }
+           } else {
+              // 降级处理：检查插入内容是否以 "()" 结尾
+              const val = textarea.value;
+              if (endPos >= 2 && val.slice(endPos - 2, endPos) === '()') {
+                endPos -= 1;
+              }
+           }
+           
+           // 强制移动光标到指定位置，取消选中状态
+           if (typeof textarea.setSelectionRange === 'function') {
+             textarea.setSelectionRange(endPos, endPos);
+           }
+           
+           // 更新光标位置记录
+           this.cursorPos = endPos;
+        }
+      }, 50);
+    },
+    clearFormula() {
+      this.formula = "";
+      this.cursorPos = 0;
+      this.$nextTick(() => {
+        this.$refs.formulaInput.focus();
+      });
+    },
+    startResize(e) {
+      this.startY = e.clientY;
+      this.startHeight = this.selectionHeight;
+      document.addEventListener("mousemove", this.doResize);
+      document.addEventListener("mouseup", this.stopResize);
+      document.body.style.cursor = "ns-resize";
+      document.body.style.userSelect = "none";
+    },
+    doResize(e) {
+      const dy = e.clientY - this.startY;
+      this.selectionHeight = Math.max(150, this.startHeight + dy);
+    },
+    stopResize() {
+      document.removeEventListener("mousemove", this.doResize);
+      document.removeEventListener("mouseup", this.stopResize);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    },
+  },
+};
+</script>
+
+<style scoped>
+.formula-editor {
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: #f5f7fa; /* 整体背景色 */
+}
+
+.section {
+  background-color: #fff;
+  border-radius: 8px; /* 圆角增加 */
+  padding: 15px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); /* 添加阴影 */
+  border: none; /* 去除边框 */
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.section-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  padding-left: 8px;
+  border-left: 4px solid #409eff; /* 左侧强调条 */
+  line-height: 1.2;
+}
+
+.help-icon {
+  margin-left: 8px;
+  color: #909399;
+  cursor: pointer;
+  font-size: 16px;
+}
+.help-icon:hover {
+  color: #409eff;
+}
+
+/* 顶部区域布局 */
+.top-area {
+  flex-shrink: 0;
+}
+
+.editor-container {
+  display: flex;
+  gap: 15px;
+}
+
+.left-panel {
+  flex: 1;
+}
+
+/* 文本域样式优化 */
+.formula-textarea ::v-deep .el-textarea__inner {
+  height: 180px; /* 稍微增加高度适应按钮网格 */
+  max-height: 180px;
+  font-family: 'Consolas', 'Monaco', monospace; /* 更好看的等宽字体 */
+  font-size: 16px;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  padding: 10px;
+  transition: border-color 0.2s;
+}
+
+.formula-textarea ::v-deep .el-textarea__inner:focus {
+  border-color: #409eff;
+}
+
+.right-panel {
+  width: 200px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* 按钮网格布局 */
+.btn-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+
+.btn-grid .el-button {
+  margin: 0;
+  padding: 10px 0;
+  font-weight: bold;
+}
+
+.btn-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.action-btn {
+  flex: 1;
+  margin: 0;
+}
+
+/* 底部预选区域布局 */
+.selection-section {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 5px; /* 调整底部间距 */
+}
+
+.selection-container {
+  display: flex;
+  gap: 15px;
+  /* height 由 inline style 控制 */
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 5px 2px; /* 增加一点padding避免阴影被截断 */
+  min-height: 150px;
+}
+
+.resize-handle {
+  height: 12px;
+  cursor: ns-resize;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 5px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.resize-handle:hover {
+  background-color: #f0f2f5;
+}
+
+.resize-handle::after {
+  content: '';
+  width: 40px;
+  height: 4px;
+  background-color: #dcdfe6;
+  border-radius: 2px;
+}
+
+.selection-item {
+  width: 220px; /* 稍微加宽 */
+  flex-shrink: 0;
+  height: 100%;
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  overflow: hidden;
+  transition: box-shadow 0.3s;
+}
+
+.card-shadow:hover {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* 滚动条样式美化 */
+.selection-container::-webkit-scrollbar {
+  height: 8px;
+}
+.selection-container::-webkit-scrollbar-thumb {
+  background: #dcdfe6;
+  border-radius: 4px;
+}
+.selection-container::-webkit-scrollbar-track {
+  background: #f5f7fa;
+}
+</style>

package/app/src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

package/app/src/components/PageHeader/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="page-header">
+    <div class="header-content" ref="contentRef">
+      <div class="header-text">
+        <span class="text-description">{{ description }}</span>
+        <span v-if="usage" class="text-usage">使用方法：{{ usage }}</span>
+      </div>
+      <el-button v-if="isOverflow" type="text" size="small" class="expand-btn" @click="showDialog">
+        查看全部
+        <i class="el-icon-arrow-right"></i>
+      </el-button>
+    </div>
+
+    <el-dialog :title="title || '使用说明'" :visible.sync="dialogVisible" width="640px">
+      <div class="dialog-body">
+        <div class="dialog-section">
+          <div class="dialog-label">功能说明</div>
+          <div class="dialog-value">{{ description }}</div>
+        </div>
+        <div class="dialog-section" v-if="usage">
+          <div class="dialog-label">使用方法</div>
+          <div class="dialog-value usage-box" v-html="usage"></div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageHeader',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    usage: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      isOverflow: false,
+      dialogVisible: false
+    }
+  },
+  methods: {
+    checkOverflow() {
+      this.$nextTick(() => {
+        const el = this.$refs.contentRef
+        if (el) {
+          this.isOverflow = el.scrollHeight > el.clientHeight
+        }
+      })
+    },
+    showDialog() {
+      this.dialogVisible = true
+    }
+  },
+  mounted() {
+    this.checkOverflow()
+  },
+  updated() {
+    this.checkOverflow()
+  }
+}
+</script>
+
+<style scoped>
+.page-header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 8px;
+  padding: 14px 16px;
+  margin-bottom: 20px;
+}
+.header-content {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  max-height: 44px;
+  overflow: hidden;
+}
+.header-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow: hidden;
+}
+.text-description {
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 1.6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.text-usage {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.75);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.expand-btn {
+  color: rgba(255, 255, 255, 0.9);
+  flex-shrink: 0;
+  padding: 4px 8px;
+}
+.expand-btn:hover {
+  color: #fff;
+}
+.dialog-body {
+  font-size: 14px;
+  line-height: 1.8;
+}
+.dialog-section {
+  margin-bottom: 20px;
+}
+.dialog-section:last-child {
+  margin-bottom: 0;
+}
+.dialog-label {
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 8px;
+}
+.dialog-value {
+  color: #606266;
+  background: #f5f7fa;
+  padding: 10px 14px;
+  border-radius: 6px;
+  line-height: 1.7;
+}
+.usage-box {
+  font-family: Consolas, Monaco, monospace;
+  font-size: 13px;
+  background: #f8f9fb;
+  word-break: break-all;
+}
+.usage-box :deep(code) {
+  background: #e4e7ea;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+</style>