feat: 添加设置

src/components/bill-ui/components/icon/iconfont/demo_index.html

@@ -55,6 +55,126 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe70d;</span>
+                <div class="name">keyboard</div>
+                <div class="code-name">&amp;#xe70d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe693;</span>
+                <div class="name">recover</div>
+                <div class="code-name">&amp;#xe693;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe694;</span>
+                <div class="name">repeal</div>
+                <div class="code-name">&amp;#xe694;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6fd;</span>
+                <div class="name">broken_l</div>
+                <div class="code-name">&amp;#xe6fd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6fe;</span>
+                <div class="name">arrows</div>
+                <div class="code-name">&amp;#xe6fe;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ff;</span>
+                <div class="name">blood</div>
+                <div class="code-name">&amp;#xe6ff;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe700;</span>
+                <div class="name">circle</div>
+                <div class="code-name">&amp;#xe700;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe701;</span>
+                <div class="name">cigarette_e</div>
+                <div class="code-name">&amp;#xe701;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe702;</span>
+                <div class="name">corpse</div>
+                <div class="code-name">&amp;#xe702;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe703;</span>
+                <div class="name">icon_n</div>
+                <div class="code-name">&amp;#xe703;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe704;</span>
+                <div class="name">form</div>
+                <div class="code-name">&amp;#xe704;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe705;</span>
+                <div class="name">footprint_l</div>
+                <div class="code-name">&amp;#xe705;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe706;</span>
+                <div class="name">footprint_r</div>
+                <div class="code-name">&amp;#xe706;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe707;</span>
+                <div class="name">fire_p</div>
+                <div class="code-name">&amp;#xe707;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe708;</span>
+                <div class="name">rectangle</div>
+                <div class="code-name">&amp;#xe708;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe709;</span>
+                <div class="name">shoeprints_l</div>
+                <div class="code-name">&amp;#xe709;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe70a;</span>
+                <div class="name">text</div>
+                <div class="code-name">&amp;#xe70a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe70b;</span>
+                <div class="name">fingerprint</div>
+                <div class="code-name">&amp;#xe70b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe70c;</span>
+                <div class="name">shoeprints_r</div>
+                <div class="code-name">&amp;#xe70c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64b;</span>
+                <div class="name">nav-setup</div>
+                <div class="code-name">&amp;#xe64b;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe6e8;</span>
                 <div class="name">a-film</div>
                 <div class="code-name">&amp;#xe6e8;</div>
@@ -348,9 +468,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1661736391827') format('woff2'),
-       url('iconfont.woff?t=1661736391827') format('woff'),
-       url('iconfont.ttf?t=1661736391827') format('truetype');
+  src: url('iconfont.woff2?t=1670990245148') format('woff2'),
+       url('iconfont.woff?t=1670990245148') format('woff'),
+       url('iconfont.ttf?t=1670990245148') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -377,6 +497,186 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-keyboard"></span>
+            <div class="name">
+              keyboard
+            </div>
+            <div class="code-name">.icon-keyboard
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-recover"></span>
+            <div class="name">
+              recover
+            </div>
+            <div class="code-name">.icon-recover
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-repeal"></span>
+            <div class="name">
+              repeal
+            </div>
+            <div class="code-name">.icon-repeal
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-broken_l"></span>
+            <div class="name">
+              broken_l
+            </div>
+            <div class="code-name">.icon-broken_l
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-arrows"></span>
+            <div class="name">
+              arrows
+            </div>
+            <div class="code-name">.icon-arrows
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-blood"></span>
+            <div class="name">
+              blood
+            </div>
+            <div class="code-name">.icon-blood
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-circle"></span>
+            <div class="name">
+              circle
+            </div>
+            <div class="code-name">.icon-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-cigarette_e"></span>
+            <div class="name">
+              cigarette_e
+            </div>
+            <div class="code-name">.icon-cigarette_e
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-corpse"></span>
+            <div class="name">
+              corpse
+            </div>
+            <div class="code-name">.icon-corpse
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-icon_n"></span>
+            <div class="name">
+              icon_n
+            </div>
+            <div class="code-name">.icon-icon_n
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-form"></span>
+            <div class="name">
+              form
+            </div>
+            <div class="code-name">.icon-form
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-footprint_l"></span>
+            <div class="name">
+              footprint_l
+            </div>
+            <div class="code-name">.icon-footprint_l
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-footprint_r"></span>
+            <div class="name">
+              footprint_r
+            </div>
+            <div class="code-name">.icon-footprint_r
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fire_p"></span>
+            <div class="name">
+              fire_p
+            </div>
+            <div class="code-name">.icon-fire_p
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-rectangle"></span>
+            <div class="name">
+              rectangle
+            </div>
+            <div class="code-name">.icon-rectangle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shoeprints_l"></span>
+            <div class="name">
+              shoeprints_l
+            </div>
+            <div class="code-name">.icon-shoeprints_l
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-text"></span>
+            <div class="name">
+              text
+            </div>
+            <div class="code-name">.icon-text
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fingerprint"></span>
+            <div class="name">
+              fingerprint
+            </div>
+            <div class="code-name">.icon-fingerprint
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shoeprints_r"></span>
+            <div class="name">
+              shoeprints_r
+            </div>
+            <div class="code-name">.icon-shoeprints_r
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-nav-setup"></span>
+            <div class="name">
+              nav-setup
+            </div>
+            <div class="code-name">.icon-nav-setup
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-a-film"></span>
             <div class="name">
               a-film
@@ -819,6 +1119,166 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-keyboard"></use>
+                </svg>
+                <div class="name">keyboard</div>
+                <div class="code-name">#icon-keyboard</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-recover"></use>
+                </svg>
+                <div class="name">recover</div>
+                <div class="code-name">#icon-recover</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-repeal"></use>
+                </svg>
+                <div class="name">repeal</div>
+                <div class="code-name">#icon-repeal</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-broken_l"></use>
+                </svg>
+                <div class="name">broken_l</div>
+                <div class="code-name">#icon-broken_l</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-arrows"></use>
+                </svg>
+                <div class="name">arrows</div>
+                <div class="code-name">#icon-arrows</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-blood"></use>
+                </svg>
+                <div class="name">blood</div>
+                <div class="code-name">#icon-blood</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-circle"></use>
+                </svg>
+                <div class="name">circle</div>
+                <div class="code-name">#icon-circle</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-cigarette_e"></use>
+                </svg>
+                <div class="name">cigarette_e</div>
+                <div class="code-name">#icon-cigarette_e</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-corpse"></use>
+                </svg>
+                <div class="name">corpse</div>
+                <div class="code-name">#icon-corpse</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon_n"></use>
+                </svg>
+                <div class="name">icon_n</div>
+                <div class="code-name">#icon-icon_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-form"></use>
+                </svg>
+                <div class="name">form</div>
+                <div class="code-name">#icon-form</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-footprint_l"></use>
+                </svg>
+                <div class="name">footprint_l</div>
+                <div class="code-name">#icon-footprint_l</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-footprint_r"></use>
+                </svg>
+                <div class="name">footprint_r</div>
+                <div class="code-name">#icon-footprint_r</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fire_p"></use>
+                </svg>
+                <div class="name">fire_p</div>
+                <div class="code-name">#icon-fire_p</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-rectangle"></use>
+                </svg>
+                <div class="name">rectangle</div>
+                <div class="code-name">#icon-rectangle</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shoeprints_l"></use>
+                </svg>
+                <div class="name">shoeprints_l</div>
+                <div class="code-name">#icon-shoeprints_l</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-text"></use>
+                </svg>
+                <div class="name">text</div>
+                <div class="code-name">#icon-text</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fingerprint"></use>
+                </svg>
+                <div class="name">fingerprint</div>
+                <div class="code-name">#icon-fingerprint</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shoeprints_r"></use>
+                </svg>
+                <div class="name">shoeprints_r</div>
+                <div class="code-name">#icon-shoeprints_r</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-nav-setup"></use>
+                </svg>
+                <div class="name">nav-setup</div>
+                <div class="code-name">#icon-nav-setup</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-a-film"></use>
                 </svg>
                 <div class="name">a-film</div>

src/components/bill-ui/components/icon/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3549513 */
-  src: url('iconfont.woff2?t=1661736391827') format('woff2'),
-       url('iconfont.woff?t=1661736391827') format('woff'),
-       url('iconfont.ttf?t=1661736391827') format('truetype');
+  src: url('iconfont.woff2?t=1670990245148') format('woff2'),
+       url('iconfont.woff?t=1670990245148') format('woff'),
+       url('iconfont.ttf?t=1670990245148') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,86 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-keyboard:before {
+  content: "\e70d";
+}
+
+.icon-recover:before {
+  content: "\e693";
+}
+
+.icon-repeal:before {
+  content: "\e694";
+}
+
+.icon-broken_l:before {
+  content: "\e6fd";
+}
+
+.icon-arrows:before {
+  content: "\e6fe";
+}
+
+.icon-blood:before {
+  content: "\e6ff";
+}
+
+.icon-circle:before {
+  content: "\e700";
+}
+
+.icon-cigarette_e:before {
+  content: "\e701";
+}
+
+.icon-corpse:before {
+  content: "\e702";
+}
+
+.icon-icon_n:before {
+  content: "\e703";
+}
+
+.icon-form:before {
+  content: "\e704";
+}
+
+.icon-footprint_l:before {
+  content: "\e705";
+}
+
+.icon-footprint_r:before {
+  content: "\e706";
+}
+
+.icon-fire_p:before {
+  content: "\e707";
+}
+
+.icon-rectangle:before {
+  content: "\e708";
+}
+
+.icon-shoeprints_l:before {
+  content: "\e709";
+}
+
+.icon-text:before {
+  content: "\e70a";
+}
+
+.icon-fingerprint:before {
+  content: "\e70b";
+}
+
+.icon-shoeprints_r:before {
+  content: "\e70c";
+}
+
+.icon-nav-setup:before {
+  content: "\e64b";
+}
+
 .icon-a-film:before {
   content: "\e6e8";
 }

src/components/bill-ui/components/icon/iconfont/iconfont.json

@@ -6,6 +6,146 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "33322597",
+      "name": "keyboard",
+      "font_class": "keyboard",
+      "unicode": "e70d",
+      "unicode_decimal": 59149
+    },
+    {
+      "icon_id": "27198776",
+      "name": "recover",
+      "font_class": "recover",
+      "unicode": "e693",
+      "unicode_decimal": 59027
+    },
+    {
+      "icon_id": "27198777",
+      "name": "repeal",
+      "font_class": "repeal",
+      "unicode": "e694",
+      "unicode_decimal": 59028
+    },
+    {
+      "icon_id": "33292114",
+      "name": "broken_l",
+      "font_class": "broken_l",
+      "unicode": "e6fd",
+      "unicode_decimal": 59133
+    },
+    {
+      "icon_id": "33292115",
+      "name": "arrows",
+      "font_class": "arrows",
+      "unicode": "e6fe",
+      "unicode_decimal": 59134
+    },
+    {
+      "icon_id": "33292116",
+      "name": "blood",
+      "font_class": "blood",
+      "unicode": "e6ff",
+      "unicode_decimal": 59135
+    },
+    {
+      "icon_id": "33292117",
+      "name": "circle",
+      "font_class": "circle",
+      "unicode": "e700",
+      "unicode_decimal": 59136
+    },
+    {
+      "icon_id": "33292118",
+      "name": "cigarette_e",
+      "font_class": "cigarette_e",
+      "unicode": "e701",
+      "unicode_decimal": 59137
+    },
+    {
+      "icon_id": "33292119",
+      "name": "corpse",
+      "font_class": "corpse",
+      "unicode": "e702",
+      "unicode_decimal": 59138
+    },
+    {
+      "icon_id": "33292120",
+      "name": "icon_n",
+      "font_class": "icon_n",
+      "unicode": "e703",
+      "unicode_decimal": 59139
+    },
+    {
+      "icon_id": "33292121",
+      "name": "form",
+      "font_class": "form",
+      "unicode": "e704",
+      "unicode_decimal": 59140
+    },
+    {
+      "icon_id": "33292122",
+      "name": "footprint_l",
+      "font_class": "footprint_l",
+      "unicode": "e705",
+      "unicode_decimal": 59141
+    },
+    {
+      "icon_id": "33292123",
+      "name": "footprint_r",
+      "font_class": "footprint_r",
+      "unicode": "e706",
+      "unicode_decimal": 59142
+    },
+    {
+      "icon_id": "33292124",
+      "name": "fire_p",
+      "font_class": "fire_p",
+      "unicode": "e707",
+      "unicode_decimal": 59143
+    },
+    {
+      "icon_id": "33292125",
+      "name": "rectangle",
+      "font_class": "rectangle",
+      "unicode": "e708",
+      "unicode_decimal": 59144
+    },
+    {
+      "icon_id": "33292126",
+      "name": "shoeprints_l",
+      "font_class": "shoeprints_l",
+      "unicode": "e709",
+      "unicode_decimal": 59145
+    },
+    {
+      "icon_id": "33292127",
+      "name": "text",
+      "font_class": "text",
+      "unicode": "e70a",
+      "unicode_decimal": 59146
+    },
+    {
+      "icon_id": "33292128",
+      "name": "fingerprint",
+      "font_class": "fingerprint",
+      "unicode": "e70b",
+      "unicode_decimal": 59147
+    },
+    {
+      "icon_id": "33292129",
+      "name": "shoeprints_r",
+      "font_class": "shoeprints_r",
+      "unicode": "e70c",
+      "unicode_decimal": 59148
+    },
+    {
+      "icon_id": "25631133",
+      "name": "nav-setup",
+      "font_class": "nav-setup",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
       "icon_id": "31503933",
       "name": "a-film",
       "font_class": "a-film",

src/layout/edit/fuse-slide-menu.vue

@@ -27,6 +27,10 @@ const items: Items = [
   {
     name: RoutesName.guide,
     ...metas[RoutesName.guide]
+  },
+  {
+    name: RoutesName.setting,
+    ...metas[RoutesName.setting]
   }
 ]
 

src/router/config.ts

@@ -40,6 +40,12 @@ export const routes = [
             name: RoutesName.guide,
             meta: metas.guide,
             component: () => import('@/views/guide/index.vue')
+          },
+          {
+            path: paths[RoutesName.setting],
+            name: RoutesName.setting,
+            meta: metas.setting,
+            component: () => import('@/views/setting/index.vue')
           }
         ]
       },

src/router/constant.ts

@@ -13,6 +13,7 @@ export enum RoutesName {
   taggingPosition = 'taggingPosition',
   guide = 'guide',
   measure = 'measure',
+  setting = 'setting',
   
   // 编辑场景，提取视图，录制视频
   sceneEdit = 'sceneEdit',
@@ -47,6 +48,7 @@ export const paths = {
   [RoutesName.taggingPosition]: 'taggingPosition/:id',
   [RoutesName.guide]: 'path',
   [RoutesName.measure]: 'measure',
+  [RoutesName.setting]: 'setting',
   
   [RoutesName.sceneEdit]: '/sceneEdit',
   [RoutesName.record]: 'record',
@@ -80,6 +82,10 @@ export const metas = {
     icon: 'nav-measure',
     title: '测量'
   },
+  [RoutesName.setting]: {
+    icon: 'nav-setup',
+    title: '设置'
+  },
 
   [RoutesName.view]: { sysTitle: '视图提取' },
   [RoutesName.record]: { sysTitle: '屏幕录制' },

src/sdk/association.ts

@@ -29,7 +29,8 @@ import {
   measures,
   fuseModelsLoaded,
   getMeasureIsShow,
-  SceneStatus
+  SceneStatus,
+  pic
 } from '@/store'
 import { currentLayout, RoutesName } from '@/router'
 
@@ -82,7 +83,6 @@ const associationModels = (sdk: SDK) => {
 
       const itemRaw = toRaw(item)
       let sceneModel: SceneModel
-      console.error('loaded', itemRaw)
       try {
         sceneModel = sdk.addModel({
           ...itemRaw,
@@ -234,10 +234,6 @@ const associationModels = (sdk: SDK) => {
       // { immediate: true }
     )
   })
-
-  watch(() => custom.currentModel, () => {
-
-  })
 }
 
 
@@ -410,6 +406,8 @@ export const setupAssociation = (mountEl: HTMLDivElement) => {
     if (fuseModelsLoaded.value) {
       associationTaggings(mountEl)
       associationMessaures(sdk)
+      pic.value.pose && sdk.comeTo(pic.value.pose)
+      // pic.value.back && sdk.setBackdrop(pic.value.back)
       nextTick(() => stopWatch())
     }
   })

src/sdk/sdk.ts

@@ -104,6 +104,7 @@ export type StartMeasure<T extends StoreMeasure['type']> = Measure<T> & {
 export interface SDK {
   layout: HTMLDivElement,
   sceneBus: Emitter<{ 'cameraChange': void }>
+  setBackdrop: (drop: string) => void
   addModel: (props: AddModelProps) => SceneModel
   calcPathInfo: (paths: CalcPathProps[0], info: CalcPathProps[1]) => Required<CalcPathProps[1]>
   getPositionByScreen: (screenPos: ScreenLocalPos, modelId?: FuseModel['id']) => ScenePos | null

src/store/index.ts

@@ -11,4 +11,5 @@ export * from './record'
 export * from './view'
 export * from './record-fragment'
 export * from './floder'
-export * from './floder-type'
+export * from './floder-type'
+export * from './setup'

src/store/setup.ts

@@ -0,0 +1,17 @@
+import { ref, watchEffect } from "vue";
+import defaultCover from '@/assets/pic.jpg'
+
+export type PicA = {
+  pose?: {
+    position: SceneLocalPos
+    target: SceneLocalPos
+  },
+  cover: string,
+  back: string
+}
+
+export type Pic = LocalMode<PicA, 'cover'>
+
+export const pic = ref<Pic>({ cover: defaultCover, back: 'none' })
+
+watchEffect(() => console.log(JSON.stringify(pic.value.pose)))

src/store/sys.ts

@@ -4,7 +4,6 @@ import { Dialog } from 'bill/index'
 import { useViewStack } from '@/hook'
 
 import type { UnwrapRef } from 'vue'
-import { getCaseInfo } from '@/api'
 import { currentMeta } from '@/router'
 
 const Flags = {

src/views/setting/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <RightFillPano>
+    <ui-group title="初始画面" borderBottom>
+      <ui-group-option>
+        <div class="init-pic" :class="{ disabled: isEdit }">
+          <img :src="getFileUrl(pic.cover)" class="init-puc-cover">
+          <div class="init-pic-set" @click="enterSetPic">设置</div>
+        </div>
+      </ui-group-option>
+    </ui-group>
+
+    <ui-group title="设置天空">
+      <ui-group-option>
+        <div class="back-layout">
+          <div 
+            v-for="back in backs" 
+            :key="back.value" 
+            class="back-item" 
+            :class="{ [back.type]: true, active: pic.back === back.value}"
+            @click="pic.back !== back.value && changeBack(back.value)"
+          >
+            <img :src="back.image" v-if="back.type === 'img'">
+            <i class="iconfont" :class="back.image" v-else-if="back.type === 'icon'" />
+            <span :style="{background: back.image}" v-else></span>
+            <p class="back-item-desc">{{ back.label }}</p>
+          </div>
+        </div>
+      </ui-group-option>
+    </ui-group>
+  </RightFillPano>
+</template>
+
+<script lang="ts" setup>
+import { RightFillPano } from '@/layout'
+import ltby from '@/assets/pic_ltby@2x.png'
+import hmm from '@/assets/pic_hmm@2x.png'
+import xk from '@/assets/pic_xk@2x.png'
+import yk from '@/assets/pic_yj@2x.png'
+import hmm360 from '@/assets/huimengmeng.jpg'
+import ltby360 from '@/assets/lantianbaiyun.jpg'
+import yk360 from '@/assets/preller_drive_2k.jpg'
+import xk360 from '@/assets/xingkong.jpg.jpg'
+import { enterEdit, enterOld, pic, isEdit } from '@/store'
+import { reactive, ref } from 'vue'
+import { togetherCallback, getFileUrl } from '@/utils'
+import { showRightPanoStack, showRightCtrlPanoStack } from '@/env'
+import { sdk } from '@/sdk'
+
+const backs = reactive([
+  { label: '无', type: 'icon', image: 'icon-left1', value: 'none' },
+  { label: '蓝天白云', type: 'img', image: ltby, value: ltby360 },
+  { label: '灰蒙蒙', type: 'img', image: hmm, value: hmm360 },
+  { label: '星空', type: 'img', image: xk, value: xk360 },
+  { label: '夜间', type: 'img', image: yk, value: yk360 },
+  { label: '灰色', type: 'color', image: '#333333', value: '#333' },
+  { label: '黑色', type: 'color', image: '#000000', value: '#000' },
+])
+
+const enterSetPic = () => {
+  enterEdit(
+    togetherCallback([
+      showRightPanoStack.push(ref(false)),
+      showRightCtrlPanoStack.push(ref(false)),
+    ])
+  )
+  enterOld(async () => {
+    const dataURL = await sdk.screenshot(300, 150)
+    const res = await fetch(dataURL)
+    const blob = await res.blob()
+    pic.value = {
+      ...pic.value,
+      cover: { url: dataURL, blob },
+      pose: sdk.getPose()
+    }
+  })
+}
+
+const initBack = pic.value.back
+let isFirst = true
+const changeBack = (back: string) => {
+  pic.value.back = back
+  sdk.setBackdrop(back)
+
+  if (isFirst) {
+    let isSave = false
+    isFirst = false
+    enterEdit(() => {
+      if (!isSave) {
+        pic.value.back = initBack
+      }
+      isFirst = true
+    })
+    enterOld(() => {
+      isSave = true
+      console.log('保存背景')
+    })
+  }
+}
+
+</script>
+
+<style scoped lang="scss">
+.init-pic {
+  height: 150px;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+
+.init-puc-cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover
+  
+}
+
+.init-pic-set {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0,0,0,0.5);
+  font-size: 12px;
+  color: #fff;
+  line-height: 32px;
+  z-index: 1;
+  text-align: center;
+  cursor: pointer;
+}
+
+.back-layout {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+.back-item {
+  > span, .iconfont, img {
+    display: block;
+    height: 88px;
+    cursor: pointer;
+    outline: 2px solid transparent;
+    transition: all .3s;
+    border-radius: 4px;
+  }
+  .iconfont {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #525252;
+    font-size: 32px;
+  }
+
+  img {
+    object-fit: cover;
+  }
+
+  &.active {
+    > span, .iconfont, img {
+      outline-color:  #00C8AF;
+    }
+  }
+}
+
+.back-item-desc {
+  font-size: 14px;
+  color: #fff;
+  margin-top: 10px;
+  text-align: center;
+}
+</style>