修改道路交互

src/components/base/components/icon/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4084834 */
-  src: url('iconfont.woff2?t=1686102789104') format('woff2'),
-       url('iconfont.woff?t=1686102789104') format('woff'),
-       url('iconfont.ttf?t=1686102789104') format('truetype');
+  src: url('iconfont.woff2?t=1686129647618') format('woff2'),
+       url('iconfont.woff?t=1686129647618') format('woff'),
+       url('iconfont.ttf?t=1686129647618') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,154 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-huoche_s1:before {
+  content: "\e75a";
+}
+
+.icon-keche_s:before {
+  content: "\e75b";
+}
+
+.icon-lunshijixie_p:before {
+  content: "\e75c";
+}
+
+.icon-huoche_s2:before {
+  content: "\e75d";
+}
+
+.icon-zhengsanlun_p:before {
+  content: "\e75e";
+}
+
+.icon-lunshituolaji_p:before {
+  content: "\e75f";
+}
+
+.icon-keche_p:before {
+  content: "\e760";
+}
+
+.icon-shoufutuolaji_s:before {
+  content: "\e761";
+}
+
+.icon-lunshituolaji_s:before {
+  content: "\e762";
+}
+
+.icon-qianyinche_p:before {
+  content: "\e763";
+}
+
+.icon-guache_p:before {
+  content: "\e764";
+}
+
+.icon-huoche_p:before {
+  content: "\e765";
+}
+
+.icon-jiaoche_s:before {
+  content: "\e766";
+}
+
+.icon-guache_pingmian:before {
+  content: "\e767";
+}
+
+.icon-shoufutuolaji_p:before {
+  content: "\e768";
+}
+
+.icon-dianche_s:before {
+  content: "\e769";
+}
+
+.icon-erlunmotuoche:before {
+  content: "\e76a";
+}
+
+.icon-chemotuoche_p:before {
+  content: "\e76b";
+}
+
+.icon-jiaoche_p:before {
+  content: "\e76c";
+}
+
+.icon-qianyinche_s:before {
+  content: "\e76d";
+}
+
+.icon-zhengsanlun_s:before {
+  content: "\e76e";
+}
+
+.icon-dianche_p:before {
+  content: "\e76f";
+}
+
+.icon-r_structure:before {
+  content: "\e758";
+}
+
+.icon-r_template:before {
+  content: "\e759";
+}
+
+.icon-line_sf:before {
+  content: "\e751";
+}
+
+.icon-line_df:before {
+  content: "\e752";
+}
+
+.icon-line_sd:before {
+  content: "\e753";
+}
+
+.icon-line_dot:before {
+  content: "\e754";
+}
+
+.icon-line_broken:before {
+  content: "\e755";
+}
+
+.icon-line_dd:before {
+  content: "\e756";
+}
+
+.icon-treelawn:before {
+  content: "\e757";
+}
+
+.icon-road_sd:before {
+  content: "\e74b";
+}
+
+.icon-road_ss:before {
+  content: "\e74c";
+}
+
+.icon-road_st:before {
+  content: "\e74d";
+}
+
+.icon-road_ds:before {
+  content: "\e74e";
+}
+
+.icon-road_dd:before {
+  content: "\e74f";
+}
+
+.icon-road_dt:before {
+  content: "\e750";
+}
+
 .icon-arrows_s:before {
   content: "\e749";
 }

src/components/base/components/icon/iconfont/iconfont.json

@@ -6,6 +6,265 @@
   "description": "交通事故现场勘验系统",
   "glyphs": [
     {
+      "icon_id": "35882982",
+      "name": "huoche_s1",
+      "font_class": "huoche_s1",
+      "unicode": "e75a",
+      "unicode_decimal": 59226
+    },
+    {
+      "icon_id": "35882983",
+      "name": "keche_s",
+      "font_class": "keche_s",
+      "unicode": "e75b",
+      "unicode_decimal": 59227
+    },
+    {
+      "icon_id": "35882984",
+      "name": "lunshijixie_p",
+      "font_class": "lunshijixie_p",
+      "unicode": "e75c",
+      "unicode_decimal": 59228
+    },
+    {
+      "icon_id": "35882985",
+      "name": "huoche_s2",
+      "font_class": "huoche_s2",
+      "unicode": "e75d",
+      "unicode_decimal": 59229
+    },
+    {
+      "icon_id": "35882986",
+      "name": "zhengsanlun_p",
+      "font_class": "zhengsanlun_p",
+      "unicode": "e75e",
+      "unicode_decimal": 59230
+    },
+    {
+      "icon_id": "35882987",
+      "name": "lunshituolaji_p",
+      "font_class": "lunshituolaji_p",
+      "unicode": "e75f",
+      "unicode_decimal": 59231
+    },
+    {
+      "icon_id": "35882988",
+      "name": "keche_p",
+      "font_class": "keche_p",
+      "unicode": "e760",
+      "unicode_decimal": 59232
+    },
+    {
+      "icon_id": "35882989",
+      "name": "shoufutuolaji_s",
+      "font_class": "shoufutuolaji_s",
+      "unicode": "e761",
+      "unicode_decimal": 59233
+    },
+    {
+      "icon_id": "35882990",
+      "name": "lunshituolaji_s",
+      "font_class": "lunshituolaji_s",
+      "unicode": "e762",
+      "unicode_decimal": 59234
+    },
+    {
+      "icon_id": "35882991",
+      "name": "qianyinche_p",
+      "font_class": "qianyinche_p",
+      "unicode": "e763",
+      "unicode_decimal": 59235
+    },
+    {
+      "icon_id": "35882992",
+      "name": "guache_p",
+      "font_class": "guache_p",
+      "unicode": "e764",
+      "unicode_decimal": 59236
+    },
+    {
+      "icon_id": "35882993",
+      "name": "huoche_p",
+      "font_class": "huoche_p",
+      "unicode": "e765",
+      "unicode_decimal": 59237
+    },
+    {
+      "icon_id": "35882994",
+      "name": "jiaoche_s",
+      "font_class": "jiaoche_s",
+      "unicode": "e766",
+      "unicode_decimal": 59238
+    },
+    {
+      "icon_id": "35882995",
+      "name": "guache_pingmian",
+      "font_class": "guache_pingmian",
+      "unicode": "e767",
+      "unicode_decimal": 59239
+    },
+    {
+      "icon_id": "35882996",
+      "name": "shoufutuolaji_p",
+      "font_class": "shoufutuolaji_p",
+      "unicode": "e768",
+      "unicode_decimal": 59240
+    },
+    {
+      "icon_id": "35882997",
+      "name": "dianche_s",
+      "font_class": "dianche_s",
+      "unicode": "e769",
+      "unicode_decimal": 59241
+    },
+    {
+      "icon_id": "35882998",
+      "name": "erlunmotuoche",
+      "font_class": "erlunmotuoche",
+      "unicode": "e76a",
+      "unicode_decimal": 59242
+    },
+    {
+      "icon_id": "35882999",
+      "name": "chemotuoche_p",
+      "font_class": "chemotuoche_p",
+      "unicode": "e76b",
+      "unicode_decimal": 59243
+    },
+    {
+      "icon_id": "35883000",
+      "name": "jiaoche_p",
+      "font_class": "jiaoche_p",
+      "unicode": "e76c",
+      "unicode_decimal": 59244
+    },
+    {
+      "icon_id": "35883001",
+      "name": "qianyinche_s",
+      "font_class": "qianyinche_s",
+      "unicode": "e76d",
+      "unicode_decimal": 59245
+    },
+    {
+      "icon_id": "35883002",
+      "name": "zhengsanlun_s",
+      "font_class": "zhengsanlun_s",
+      "unicode": "e76e",
+      "unicode_decimal": 59246
+    },
+    {
+      "icon_id": "35883003",
+      "name": "dianche_p",
+      "font_class": "dianche_p",
+      "unicode": "e76f",
+      "unicode_decimal": 59247
+    },
+    {
+      "icon_id": "35874728",
+      "name": "r_structure",
+      "font_class": "r_structure",
+      "unicode": "e758",
+      "unicode_decimal": 59224
+    },
+    {
+      "icon_id": "35874729",
+      "name": "r_template",
+      "font_class": "r_template",
+      "unicode": "e759",
+      "unicode_decimal": 59225
+    },
+    {
+      "icon_id": "35873698",
+      "name": "line_sf",
+      "font_class": "line_sf",
+      "unicode": "e751",
+      "unicode_decimal": 59217
+    },
+    {
+      "icon_id": "35873699",
+      "name": "line_df",
+      "font_class": "line_df",
+      "unicode": "e752",
+      "unicode_decimal": 59218
+    },
+    {
+      "icon_id": "35873700",
+      "name": "line_sd",
+      "font_class": "line_sd",
+      "unicode": "e753",
+      "unicode_decimal": 59219
+    },
+    {
+      "icon_id": "35873701",
+      "name": "line_dot",
+      "font_class": "line_dot",
+      "unicode": "e754",
+      "unicode_decimal": 59220
+    },
+    {
+      "icon_id": "35873702",
+      "name": "line_broken",
+      "font_class": "line_broken",
+      "unicode": "e755",
+      "unicode_decimal": 59221
+    },
+    {
+      "icon_id": "35873703",
+      "name": "line_dd",
+      "font_class": "line_dd",
+      "unicode": "e756",
+      "unicode_decimal": 59222
+    },
+    {
+      "icon_id": "35873704",
+      "name": "treelawn",
+      "font_class": "treelawn",
+      "unicode": "e757",
+      "unicode_decimal": 59223
+    },
+    {
+      "icon_id": "35870945",
+      "name": "road_sd",
+      "font_class": "road_sd",
+      "unicode": "e74b",
+      "unicode_decimal": 59211
+    },
+    {
+      "icon_id": "35870946",
+      "name": "road_ss",
+      "font_class": "road_ss",
+      "unicode": "e74c",
+      "unicode_decimal": 59212
+    },
+    {
+      "icon_id": "35870947",
+      "name": "road_st",
+      "font_class": "road_st",
+      "unicode": "e74d",
+      "unicode_decimal": 59213
+    },
+    {
+      "icon_id": "35870948",
+      "name": "road_ds",
+      "font_class": "road_ds",
+      "unicode": "e74e",
+      "unicode_decimal": 59214
+    },
+    {
+      "icon_id": "35870949",
+      "name": "road_dd",
+      "font_class": "road_dd",
+      "unicode": "e74f",
+      "unicode_decimal": 59215
+    },
+    {
+      "icon_id": "35870950",
+      "name": "road_dt",
+      "font_class": "road_dt",
+      "unicode": "e750",
+      "unicode_decimal": 59216
+    },
+    {
       "icon_id": "35850865",
       "name": "arrows_s",
       "font_class": "arrows_s",

src/graphic/enum/SVGType.js

@@ -1,4 +1,8 @@
-const SVGType = {
-  BusPlane: "BusPlane",
-};
+import icons from "../CanvasStyle/ImageLabels/SVGIcons.js"
+
+const SVGType = {}
+Object.keys(icons).forEach(key => {
+  SVGType[key] = key
+})
+
 export default SVGType;

src/views/graphic/imageLabel.vue

@@ -1,3 +1,154 @@
 <template>
+  <div class="graphic-child-menus">
+    <div class="header">
+      <ui-icon type="left" class="icon" ctrl @click="$emit('quit')" />
+      <p>图例</p>
+    </div>
+    <ui-input type="text" width="100%" v-model="keyword">
+      <template v-slot:preIcon>
+        <ui-icon type="magnify_g"  color="rgba(255,255,255,0.6)"/>
+      </template>
+    </ui-input>
 
-</template>
+    <div v-for="typeMenu in typeMenus" :key="typeMenu.title" class="type-menu">
+      <h2 @click="showTypeMenu = typeMenu">
+        {{typeMenu.title}}
+        <ui-icon :type="showTypeMenu.title === typeMenu.title ? 'del' : 'copy'" />
+      </h2>
+      <div class="menu-list" v-show="showTypeMenu.title === typeMenu.title">
+        <div
+            v-for="menu in typeMenu.children"
+            :key="menu.key"
+            class="menu"
+            :class="{active: uiType.current === menu.key}"
+            @click="uiType.change(menu.key as any)"
+        >
+          <ui-icon :type="menu.icon" class="icon" />
+          <p>{{ menu.text }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiIcon from "@/components/base/components/icon/index.vue";
+import { uiType } from '@/hook/useGraphic'
+import icons, {typeKeys} from "@/graphic/CanvasStyle/ImageLabels/SVGIcons"
+import {computed, ref, watch} from "vue";
+import UiInput from "@/components/base/components/input/index.vue";
+
+
+const typeMenusRaw = typeKeys.map(({type, children}) => ({
+  title: type,
+  children: children.map(key => ({
+    key: key,
+    text: icons[key].text,
+    icon: key.substring(0,key.lastIndexOf("."))
+  }))
+}))
+const keyword = ref("")
+const typeMenus = computed(() => typeMenusRaw
+  .map(
+    (typeMenu) => ({
+      ...typeMenu,
+      children: typeMenu.children.filter(item => item.text.includes(keyword.value))
+    })
+  )
+  .filter(typeMenu => typeMenu.children.length > 0)
+)
+const showTypeMenu = ref()
+watch(
+  typeMenus,
+  () => showTypeMenu.value = typeMenus.value[0],
+  { immediate: true }
+)
+console.log(typeMenus, showTypeMenu.value)
+
+defineEmits<{ (e: "quit") }>();
+
+</script>
+
+<style lang="scss" scoped>
+.graphic-child-menus {
+  background-color: var(--editor-menu-back);
+  position: absolute;
+  top: calc(var(--editor-head-height) + var(--header-top));
+  bottom: 0;
+  left: calc(var(--editor-menu-left) + var(--editor-menu-width));
+  padding: 16px;
+  overflow-y: auto;
+
+  .menu-list {
+    display: grid;
+    grid-template-columns: repeat(3, 80px);
+    grid-gap: 16px;
+    padding-bottom: 16px;
+  }
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  height: 100px;
+  transition: color .3s ease;
+
+  //&:hover,
+  &.active {
+    color: var(--colors-primary-base);
+  }
+
+  &.active {
+    background-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    font-size: 40px;
+    text-align: center;
+    background: #383838;
+  }
+  p {
+    padding: 4px;
+    font-size: 12px;
+    text-align: center;
+  }
+}
+
+.header {
+  margin-bottom: 10px;
+  padding: 5px 0;
+  text-align: center;
+  font-size: 16px;
+  position: relative;
+
+  .icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+  }
+}
+
+.type-menu {
+  margin-top: 21px;
+  h2 {
+    margin: 16px 0;
+    font-size: 16px;
+    font-weight: bold;
+    color: rgba(255,255,255,0.6);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .icon {
+      font-size: 16px;
+    }
+  }
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+</style>

src/views/graphic/menus.ts

@@ -135,14 +135,14 @@ export const mainMenusRaw: MenusRaw = [
     text: "道路",
     icon: "road",
     children: [
-      { key: UIType.OneEdgeOneLanRoad, text: "单向单车道直路" },
-      { key: UIType.OneEdgeTwoLanRoad, text: "单向双车道直路" },
-      { key: UIType.OneEdgeThreeLanRoad, text: "单向三车道直路" },
-      { key: UIType.TwoEdgeOneLanRoad, text: "双向单车道直路" },
-      { key: UIType.TwoEdgeTwoLanRoad, text: "双向双车道直路" },
-      { key: UIType.TwoEdgeThreeLanRoad, text: "双向三车道直路" },
-      { key: UITypeExtend.structure, text: "道路结构", extend: structureMenusRaw },
-      { key: UITypeExtend.template, text: "道路模板", extend: templateMenusRaw },
+      { key: UIType.OneEdgeOneLanRoad, icon: "road_ss", text: "单向单车道直路" },
+      { key: UIType.OneEdgeTwoLanRoad, icon: "road_sd", text: "单向双车道直路" },
+      { key: UIType.OneEdgeThreeLanRoad, icon: "road_st", text: "单向三车道直路" },
+      { key: UIType.TwoEdgeOneLanRoad, icon: "road_ds", text: "双向单车道直路" },
+      { key: UIType.TwoEdgeTwoLanRoad, icon: "road_dd", text: "双向双车道直路" },
+      { key: UIType.TwoEdgeThreeLanRoad, icon: "road_dt", text: "双向三车道直路" },
+      { key: UITypeExtend.structure, icon: "r_template", text: "道路结构", extend: structureMenusRaw },
+      { key: UITypeExtend.template, icon: "r_structure", text: "道路模板", extend: templateMenusRaw },
     ]
   }, {
     key: UITypeExtend.image,