功能菜单组件

src/packages/components/Units/Titles/FeatureMenu/config.ts

@@ -0,0 +1,23 @@
+import { PublicConfigClass } from '@/packages/public'
+import { FeatureMenuConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+const option = {
+  buttonList: [
+    '现场标绘','任务下发','路线规划'
+  ],
+  selectButton: '现场标绘',
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = FeatureMenuConfig.key
+  public chartConfig = cloneDeep(FeatureMenuConfig)
+  public option = cloneDeep(option)
+  constructor() {
+    super(); 
+    this.attr.w = 348; 
+    this.attr.h = 38;
+  }
+}

src/packages/components/Units/Titles/FeatureMenu/config.vue

@@ -0,0 +1,91 @@
+<template>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="默认选中" :alone="true">
+      <n-select v-model:value="optionData.selectButton" :options="selectButtonOptions" size="small" />
+    </SettingItemBox> 
+    <SettingItemBox name="按钮" :alone="true">
+      <div class="button-setting-div" v-for="index in optionData.buttonList.length">
+        <n-input
+          class="button-setting-input"
+          size="small"
+          v-model:value="optionData.buttonList[index-1]"
+          :minlength="1"
+          type="text"
+          placeholder="请输入Id"
+        />
+        <div class="button-setting-del" @click="deleteButton(index-1)">
+          <Icon icon="ic:baseline-delete" size="18px"/>
+        </div>
+      </div>
+      <div class="button-insert-div" @click="insertButton"><Icon icon="material-symbols-light:new-window-sharp" size="18px" style="margin-right: 5px;"/>添加按钮</div>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import Icon from '@/components/Icon/Icon.vue';
+import { computed } from 'vue';
+const props = defineProps({
+  optionData: {
+    type: Object,
+    required: true
+  }
+})
+console.log('config',props)
+const selectButtonOptions = computed(() => {
+  return props.optionData.buttonList.map(item => {
+    return {
+      value: item,
+      label: item,
+    }
+  })
+})
+const insertButton = () => {
+  props.optionData.buttonList.push("")
+}
+const deleteButton = (index) => {
+  props.optionData.buttonList.splice(index,1)
+}
+</script>
+<style lang="scss" scoped>
+.button-setting-div{
+  display: flex;
+  margin-bottom: 10px;
+  .button-setting-input{
+    width: 80%;
+    margin-right: 20px;
+  }
+  .button-setting-del{
+    width: 28px;
+    height: 28px; 
+    background-color: #e2e2e2;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 0.2s;
+  }
+  .button-setting-del:hover{
+    background-color: #ff4d4f;
+    color: #fff;
+  }
+}
+.button-insert-div{
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: #0960bd;
+  cursor: pointer;
+  user-select: none;
+  transition: 0.2s;
+}
+.button-insert-div:hover{
+  color: #4f99d6
+}
+</style>

src/packages/components/Units/Titles/FeatureMenu/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const FeatureMenuConfig: ConfigType = {
+  key: 'FeatureMenu',
+  chartKey: 'VFeatureMenu',
+  conKey: 'VCFeatureMenu',
+  title: '功能菜单',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.UNITS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'feature_menu.png'
+}

src/packages/components/Units/Titles/FeatureMenu/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="button-list-div">
+      <div :class="`button-item ${props.chartConfig.option.selectButton == item? 'button-select': ''}`"
+        v-for="item in buttonList" 
+        @click=changeButton(item)
+      >
+        {{item}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, PropType } from 'vue'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object,
+    required: true
+  }
+})
+const changeButton = (type) => {
+  props.chartConfig.option.selectButton = type
+}
+
+const { buttonList, selectButton } = props.chartConfig.option
+</script>
+<style lang="scss" scoped>
+.button-list-div{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  .button-item{
+    width: 102px;
+    height: 38px;
+    background-image: url('/public/components/FeatureMenu/feature_button_background.png');
+    background-size: 100% 100%;
+    font-family: 'PingFangSC-Regular';
+    font-weight: 400;
+    font-size: 16px;
+    color: #D4E9FF;
+    line-height: 22px;
+    text-shadow: 0px 1px 4px rgba(34,54,74,0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 20px;
+    cursor: pointer;
+    user-select: none;
+  }
+  .button-select{
+    background-image: url('/public/components/FeatureMenu/feature_button_active.png');
+  }
+  .button-item:nth-last-child(1){
+    margin-right: 0px;
+  }
+}
+</style>

src/packages/components/Units/Titles/index.ts

@@ -29,6 +29,7 @@ import { UnitsBg01Config } from './UnitsBg01/index';
 import { UnitsBg02Config } from './UnitsBg02/index';
 import { UnitsBg03Config } from './UnitsBg03/index';
 import { UnitsBg04Config } from './UnitsBg04/index';
+import { FeatureMenuConfig } from './FeatureMenu/index';
 
 
 export default [
@@ -62,5 +63,6 @@ export default [
     UnitsBg01Config,
     UnitsBg02Config,
     UnitsBg03Config,
-    UnitsBg04Config
+    UnitsBg04Config,
+    FeatureMenuConfig,
 ];