fix:不重要的提交

quasar.config.js

@@ -83,7 +83,9 @@ module.exports = configure(function (ctx) {
       https: false,
       port: 8080,
       open: true, // opens browser window automatically
-      proxy: {},
+      proxy: {
+        changeOrigin: true,
+      },
     },
 
     extras: [

src/layouts/MainLayout.vue

@@ -71,17 +71,19 @@
     </q-header>
 
     <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
-      <q-list>
-        <q-item-label header style="padding: 0">
-          <TopLeftLoading />
-        </q-item-label>
+      <q-scroll-area style="height: 100%">
+        <q-list>
+          <q-item-label header style="padding: 0">
+            <TopLeftLoading />
+          </q-item-label>
 
-        <EssentialLink
-          v-for="link in essentialLinks"
-          :key="link.title"
-          v-bind="link"
-        />
-      </q-list>
+          <EssentialLink
+            v-for="link in essentialLinks"
+            :key="link.title"
+            v-bind="link"
+          />
+        </q-list>
+      </q-scroll-area>
     </q-drawer>
 
     <q-page-container>

src/layouts/config.ts

@@ -122,4 +122,11 @@ export const MenuList = [
     link: '/amis',
     active: false,
   },
+  {
+    title: 'Vue Study',
+    caption: '',
+    icon: require('./menuListIcons/amis.svg'),
+    link: '/vue-study',
+    active: false,
+  },
 ];

src/modules/amis/IndexPage.vue

@@ -6,9 +6,11 @@ export default {
 
 <script setup lang="ts">
 import { ref, onMounted, reactive, onBeforeUnmount } from 'vue';
-import { is } from 'src/common/utils';
+import { MyBtn } from 'src/components';
+import request from 'src/http';
 
 const boxRef = ref(null);
+const boxRef2 = ref(null);
 
 const amisScoped = ref<any>(null);
 const amisjson = reactive({
@@ -35,6 +37,187 @@ const amisjson = reactive({
   },
 });
 
+const amisScoped2 = ref<any>(null);
+const amisjson2 = reactive({
+  type: 'page',
+  name: 'myPage2',
+  toolbar: [
+    {
+      type: 'form',
+      panelClassName: 'mb-0',
+      title: '',
+      body: [
+        {
+          type: 'select',
+          label: '区域',
+          name: 'businessLineId',
+          mode: 'inline',
+          options: ['北京', '上海'],
+          selectFirst: true,
+          checkAll: false,
+        },
+        {
+          type: 'input-date-range',
+          label: '时间范围',
+          name: 'dateRange',
+          inline: true,
+          value: '-1month,+0month',
+          inputFormat: 'YYYY-MM-DD',
+          format: 'YYYY-MM-DD',
+          closeOnSelect: true,
+          clearable: false,
+        },
+      ],
+      actions: [],
+      mode: 'inline',
+      target: 'mainPage',
+      submitOnChange: true,
+      submitOnInit: true,
+    },
+  ],
+  body: [
+    {
+      type: 'grid',
+      columns: [
+        {
+          type: 'panel',
+          className: 'h-full',
+          body: {
+            type: 'tabs',
+            tabs: [
+              {
+                title: '消费趋势',
+                tab: [
+                  {
+                    type: 'chart',
+                    config: {
+                      title: {
+                        text: '消费趋势',
+                      },
+                      tooltip: {},
+                      xAxis: {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: ['一月', '二月', '三月', '四月', '五月', '六月'],
+                      },
+                      yAxis: {},
+                      series: [
+                        {
+                          name: '销量',
+                          type: 'line',
+                          areaStyle: {
+                            color: {
+                              type: 'linear',
+                              x: 0,
+                              y: 0,
+                              x2: 0,
+                              y2: 1,
+                              colorStops: [
+                                {
+                                  offset: 0,
+                                  color: 'rgba(84, 112, 197, 1)',
+                                },
+                                {
+                                  offset: 1,
+                                  color: 'rgba(84, 112, 197, 0)',
+                                },
+                              ],
+                              global: false,
+                            },
+                          },
+                          data: [5, 20, 36, 10, 10, 20],
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+              {
+                title: '账户余额',
+                tab: '0',
+              },
+            ],
+          },
+        },
+        {
+          type: 'panel',
+          className: 'h-full',
+          body: [
+            {
+              type: 'chart',
+              config: {
+                title: {
+                  text: '使用资源占比',
+                },
+                series: [
+                  {
+                    type: 'pie',
+                    data: [
+                      {
+                        name: 'BOS',
+                        value: 70,
+                      },
+                      {
+                        name: 'CDN',
+                        value: 68,
+                      },
+                      {
+                        name: 'BCC',
+                        value: 48,
+                      },
+                      {
+                        name: 'DCC',
+                        value: 40,
+                      },
+                      {
+                        name: 'RDS',
+                        value: 32,
+                      },
+                    ],
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: 'crud',
+      name: 'myCrud',
+      className: 'm-t-sm',
+      // https://aisuda.bce.baidu.com/amis/api/mock2/sample?page=6&perPage=10
+      // api: '/amis/api/mock2/sample',
+      columns: [
+        {
+          name: 'id',
+          label: 'ID',
+        },
+        {
+          name: 'engine',
+          label: 'Rendering engine',
+        },
+        {
+          name: 'browser',
+          label: 'Browser',
+        },
+        {
+          name: 'platform',
+          label: 'Platform(s)',
+        },
+        {
+          name: 'version',
+          label: 'Engine version',
+        },
+        {
+          name: 'grade',
+          label: 'CSS grade',
+        },
+      ],
+    },
+  ],
+});
+
 const state = reactive({
   amisMap: new Map(),
 });
@@ -42,6 +225,7 @@ const state = reactive({
 onBeforeUnmount(() => {
   // 如果是单页应用，在离开当前页面的时候通常需要销毁实例，可以通过 unmount 方法来完成。
   amisScoped.value.unmount();
+  amisScoped2.value.unmount();
 });
 
 onMounted(() => {
@@ -50,15 +234,48 @@ onMounted(() => {
   state.amisMap.set('amis1', amisjson);
   const amis = (window as any).amisRequire('amis/embed');
   amisScoped.value = amis.embed(boxRef.value, amisjson);
-  console.log('amisScoped', amisScoped.value);
 
-  const a = '12';
-  const type = is.number(a);
-  console.log(a, 'is Number', type);
+  state.amisMap.set('amis2', amisjson2);
+  amisScoped2.value = amis.embed(boxRef2.value, amisjson2);
+
+  // axios
+  //   .get('https://aisuda.bce.baidu.com/amis/api/mock2/sample', {
+  //     params: {
+  //       page: 1,
+  //       perPage: 10,
+  //     },
+  //   })
+  //   .then((res) => {
+  //     console.log('res', res);
+  //   })
+  //   .catch((err) => {
+  //     console.log('err', err);
+  //   });
+
+  request({
+    url: 'https://aisuda.bce.baidu.com/amis/api/mock2/sample',
+    method: 'get',
+    params: {
+      page: 1,
+      perPage: 10,
+    },
+    error_return: true,
+  })
+    .then((res: any) => {
+      console.log('res', res.data);
+    })
+    .catch((err: any) => {
+      console.log('err', err);
+    });
+
+  setTimeout(() => {
+    const re = amisScoped2.value.getComponentByName('myPage2.myCrud');
+    console.log('re >>>>', re);
+  }, 2000);
 });
 
 function getFormData() {
-  const re = amisScoped.value.getComponentByName('myPage1.myForm1').getValues();
+  const re = amisScoped.value.getComponentByName('myPage1.myCrud');
   console.log('获取表单的值', re);
 }
 
@@ -100,7 +317,14 @@ function viewConfig(key: string) {
           @click="viewConfig('amis1')"
         />
       </div>
-      <div ref="boxRef" class="my-amis-form"></div>
+      <div ref="boxRef"></div>
+    </div>
+
+    <div class="item">
+      <div class="actions">
+        <my-btn label="操作按钮" />
+      </div>
+      <div ref="boxRef2"></div>
     </div>
   </div>
 </template>

src/modules/page9/IndexPage.vue

@@ -24,6 +24,7 @@ import AgGridSelection from './element/AgGridSelection.vue';
 import AgGridCheckboxSelection from './element/AgGridCheckboxSelection.vue';
 import AgGridGroupSelection from './element/AgGridGroupSelection.vue';
 import AgGridCustomCellEdit from './element/AgGridCustomCellEdit.vue';
+import SpinningWheelGame from './element/SpinningWheelGame.vue';
 
 const listData = [
   {
@@ -46,6 +47,11 @@ const listData = [
     title: '变形动画',
     name: 'transformation-animation',
   },
+  {
+    title: '转轮游戏',
+    name: 'spinning-wheel-game',
+  },
+
   {
     title: 'AG grid',
     name: 'ag-grid-study',
@@ -88,8 +94,8 @@ const listData = [
   },
 ];
 const isShow = ref(true);
-const elementName = ref('ag-grid-custom-cell-edit');
-const elementTitle = ref('Ag Grid 自定义单元格编辑器');
+const elementName = ref('spinning-wheel-game');
+const elementTitle = ref('转轮游戏');
 
 function onclick(data: any) {
   elementTitle.value = data.title;
@@ -147,6 +153,7 @@ function goBack() {
         <ag-grid-custom-cell-edit
           v-if="elementName === 'ag-grid-custom-cell-edit'"
         />
+        <spinning-wheel-game v-if="elementName === 'spinning-wheel-game'" />
       </div>
     </div>
     <div v-else>

src/modules/page9/element/AgGridCustomCellEdit.vue

@@ -6,10 +6,11 @@
 -->
 <script setup lang="ts">
 import { ref, reactive, onMounted, toRaw } from 'vue';
+import { useQuasar } from 'quasar';
 import { useMessage } from 'src/common/hooks';
 
 import { AgGridVue } from 'ag-grid-vue3';
-import { MyBtn } from 'src/components';
+import { MyBtn, ComDialogTip } from 'src/components';
 import AG_GRID_LOCALE from 'src/config/ag-grid-locale';
 import DoubleNumberEdit from '../ag-grid-element/DoubleNumberEdit.vue';
 import MyCellEditer from '../ag-grid-element/MyCellEditer.vue';
@@ -17,6 +18,7 @@ import ButtonCellRender from '../ag-grid-element/ButtonCellRender.vue';
 
 import type { ColumnDefsType, ButtonCellRenderType } from 'src/common/types';
 
+const $q = useQuasar();
 const { info } = useMessage();
 
 const defaultColDef = {
@@ -72,8 +74,8 @@ const columnDefs = reactive<Array<ColumnDefsType>>([
             label: '复制',
             icon: 'bi-clipboard-check',
             color: 'light-green-6',
-            callback: () => {
-              info('复制');
+            callback: (data: any) => {
+              onCopy(data);
             },
           },
           {
@@ -92,16 +94,6 @@ const columnDefs = reactive<Array<ColumnDefsType>>([
               info('计划');
             },
           },
-
-          {
-            label: '删除',
-            icon: 'bi-trash',
-            color: 'brown-6',
-            callback: (data: any) => {
-              info('删除');
-              onDel(data);
-            },
-          },
         ],
       },
     } as ButtonCellRenderType,
@@ -109,7 +101,7 @@ const columnDefs = reactive<Array<ColumnDefsType>>([
 ]);
 
 const state = reactive({
-  rowData: [] as any,
+  rowData: [] as any[],
 });
 
 onMounted(() => {
@@ -147,7 +139,26 @@ function onAdd() {
 }
 
 function onDel(data: any) {
-  console.log('onDel >>>>', data);
+  $q.dialog({
+    component: ComDialogTip,
+    componentProps: {
+      persistent: true,
+      text: `确定删除当前列 ${data.data.name}`,
+      color: 'negative',
+    },
+  }).onOk(() => {
+    state.rowData.splice(data.rowIndex, 1);
+    setTimeout(() => {
+      gridApi.value.setRowData(state.rowData);
+    }, 0);
+  });
+}
+
+function onCopy(data: any) {
+  state.rowData.push(data.data);
+  setTimeout(() => {
+    gridApi.value.setRowData(state.rowData);
+  }, 0);
 }
 </script>
 <template>

src/modules/page9/element/SpinningWheelGame.vue

+<!--
+ * 转轮游戏
+-->
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const wheelRef = ref<any>(null);
+const val = ref(Math.ceil(Math.random() * 3600));
+
+function spinClick() {
+  wheelRef.value.style.transform = `rotate(${val.value}deg)`;
+  val.value += Math.ceil(Math.random() * 3600);
+}
+</script>
+<template>
+  <div class="box fit">
+    <div class="container">
+      <div class="spin-btn" @click="spinClick">开始</div>
+      <div class="wheel" ref="wheelRef">
+        <div class="number" style="--i: 1; --clr: #f2bdd0">
+          <span>100</span>
+        </div>
+        <div class="number" style="--i: 2; --clr: #f0f4c1"><span>1</span></div>
+        <div class="number" style="--i: 3; --clr: #cccc99"><span>50</span></div>
+        <div class="number" style="--i: 4; --clr: #cccccc"><span>0</span></div>
+        <div class="number" style="--i: 5; --clr: #cb7575">
+          <span>1000</span>
+        </div>
+        <div class="number" style="--i: 6; --clr: #ecb83c"><span>10</span></div>
+        <div class="number" style="--i: 7; --clr: #d3e397"><span>5</span></div>
+        <div class="number" style="--i: 8; --clr: #f8dcdc"><span>20</span></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #333;
+}
+.container {
+  position: relative;
+  width: 400px;
+  height: 400px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .spin-btn {
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    background-color: #fff;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 600;
+    color: #333;
+    letter-spacing: 0.1em;
+    border: 4px solid rgba(0, 0, 0, 0.75);
+    cursor: pointer;
+    user-select: none;
+    z-index: 10;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 20px;
+      height: 30px;
+      background-color: #fff;
+      top: -28px;
+      clip-path: polygon(50% 0%, 15% 100%, 85% 100%);
+    }
+  }
+
+  .wheel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #333;
+    border-radius: 50%;
+    box-shadow: 0 0 0 5px #333, 0 0 0 15px #fff, 0 0 0 18px #111;
+    transition: transform 5s ease-in-out;
+
+    .number {
+      position: absolute;
+      width: 50%;
+      height: 50%;
+      background-color: var(--clr);
+      transform-origin: bottom right;
+      transform: rotate(calc(45deg * var(--i)));
+      clip-path: polygon(0 0, 56% 0, 100% 100%, 0 56%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      user-select: none;
+      span {
+        position: relative;
+        transform: rotate(45deg);
+        font-size: 2em;
+        font-weight: 700;
+        color: #fff;
+        text-shadow: 3px 5px 2px rgba(0, 0, 0, 0.15);
+        &::after {
+          content: '¥';
+          position: absolute;
+          top: 5px;
+          font-size: 0.75em;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}
+</style>

src/modules/vue-study/IndexPage.vue

+<!--
+ * Vue Study
+-->
+<script lang="ts">
+export default {
+  name: 'VUE_STUDY',
+};
+</script>
+<script setup lang="ts">
+import { reactive, onMounted, watch, ref, nextTick, markRaw } from 'vue';
+import * as echarts from 'echarts';
+// import { useMessage } from 'src/common/hooks';
+import PROVICE from './provice';
+import { ChartOption } from './config';
+
+// const { info } = useMessage();
+
+const citySelectRef = ref<any>(null);
+const regionSelectRef = ref<any>(null);
+const chartRef = ref<any>(null);
+
+const showContent = ref(false);
+const state = reactive({
+  province: null as any,
+  provinceOpt: [] as any[],
+  city: null as any,
+  cityOpt: [] as any[],
+  region: null as any,
+  regionOpt: [] as any[],
+  myChart: null as any,
+});
+
+watch(
+  () => state.province,
+  (newVal) => {
+    state.city = null;
+    state.cityOpt = newVal?.city || [];
+    if (state.cityOpt.length > 0) {
+      nextTick(() => {
+        citySelectRef.value?.showPopup();
+      });
+    }
+  }
+);
+watch(
+  () => state.city,
+  (newVal) => {
+    state.region = null;
+    state.regionOpt = newVal?.districtAndCounty || [];
+    if (state.regionOpt.length > 0) {
+      nextTick(() => {
+        regionSelectRef.value?.showPopup();
+      });
+    }
+  }
+);
+
+onMounted(() => {
+  handleData();
+  setChart();
+});
+
+function handleData() {
+  PROVICE.map((item) => {
+    state.provinceOpt.push(item);
+  });
+}
+
+function setChart() {
+  state.myChart = markRaw(echarts.init(chartRef.value));
+  state.myChart.setOption(ChartOption);
+}
+
+function showBox() {
+  showContent.value = !showContent.value;
+}
+// function clickChartBox(e: any) {
+//   e.stopPropagation(); // 阻止冒泡
+// }
+</script>
+<template>
+  <div>
+    <div class="q-pa-md">
+      <div class="item-box">
+        <div class="item">
+          <div>省</div>
+          <q-select
+            filled
+            dense
+            v-model="state.province"
+            :options="state.provinceOpt"
+            option-label="name"
+            option-value="name"
+          />
+        </div>
+        <div class="item">
+          <div>市</div>
+          <q-select
+            ref="citySelectRef"
+            filled
+            dense
+            v-model="state.city"
+            :options="state.cityOpt"
+            option-label="name"
+            option-value="name"
+          />
+        </div>
+        <div class="item">
+          <div>区/县</div>
+          <q-select
+            ref="regionSelectRef"
+            filled
+            dense
+            v-model="state.region"
+            :options="state.regionOpt"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="aniamte-box q-pa-md relative-position">
+      <div :class="['square', showContent ? 'square-show' : 'square-hide']">
+        <div class="title-box cursor-pointer" @click="showBox">
+          <div class="title-text">图表</div>
+          <div class="title-action">
+            <div
+              :class="[
+                'icon-box',
+                showContent ? 'icon-box-show' : 'icon-box-hide',
+              ]"
+            >
+              <q-icon name="expand_more" />
+            </div>
+          </div>
+        </div>
+        <div class="chart-box" ref="chartRef"></div>
+        <div class="legend-box"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.item-box {
+  display: flex;
+  column-gap: 16px;
+}
+.item {
+  width: 300px;
+}
+.aniamte-box {
+}
+.title-text {
+  font-size: 16px;
+  font-weight: bold;
+  letter-spacing: 0.1em;
+  color: rgb(75, 75, 75);
+}
+.title-action {
+}
+.icon-box {
+  transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);
+  > i {
+    font-size: 24px;
+    color: rgb(150, 150, 150);
+  }
+}
+.icon-box-hide {
+  transform: rotate(0deg);
+}
+.icon-box-show {
+  transform: rotate(180deg);
+}
+.square {
+  box-sizing: border-box;
+  width: 100%;
+  position: relative;
+  left: 0;
+  overflow: hidden;
+  transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);
+  .title-box {
+    background-color: rgba(180, 180, 180, 0.2);
+    height: 40px;
+    padding: 0 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .chart-box {
+    box-sizing: border-box;
+    border-left: 1px solid rgba(180, 180, 180, 0.3);
+    border-right: 1px solid rgba(180, 180, 180, 0.3);
+    border-bottom: 1px solid rgba(180, 180, 180, 0.3);
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    width: 100%;
+    height: 300px;
+    background-color: #fff;
+  }
+  .legend-box {
+    position: absolute;
+    width: 130px;
+    height: 100px;
+    background-color: pink;
+    top: 160px;
+    right: 0;
+  }
+}
+.square-hide {
+  height: 40px;
+  border-radius: 2px;
+}
+.square-show {
+  height: 340px;
+  border-radius: 12px;
+}
+</style>

src/modules/vue-study/config.ts

+export const ChartOption = {
+  title: {
+    text: 'Stacked Line',
+    left: 'center',
+    top: 12,
+  },
+  tooltip: {
+    trigger: 'axis',
+  },
+  //   legend: {
+  //     data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
+  //   },
+  grid: {
+    left: 60,
+    right: 140,
+    bottom: 40,
+    top: 60,
+  },
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [
+    {
+      name: 'Email',
+      type: 'line',
+      data: [120, 132, 101, 134, 90, 230, 210],
+    },
+    {
+      name: 'Union Ads',
+      type: 'line',
+      data: [220, 182, 191, 234, 290, 330, 310],
+    },
+    {
+      name: 'Video Ads',
+      type: 'line',
+      data: [150, 232, 201, 154, 190, 330, 410],
+    },
+    {
+      name: 'Direct',
+      type: 'line',
+      data: [320, 332, 301, 334, 390, 330, 320],
+    },
+    {
+      name: 'Search Engine',
+      type: 'line',
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+    },
+  ],
+};

src/modules/vue-study/route.ts

+export default [
+  {
+    path: 'vue-study',
+    name: 'VUE_STUDY',
+    component: () => import('./IndexPage.vue'),
+    meta: {
+      title: 'Vue Study',
+      permission: ['*'],
+      keepalive: true,
+    },
+  },
+];

src/router/routes.ts

@@ -3,6 +3,7 @@ import { RouteRecordRaw } from 'vue-router';
 import FORM_TEST from '../modules/form-test/route';
 import TREE from '../modules/tree/route';
 import AMIS from '../modules/amis/route';
+import VUE_STUDY from '../modules/vue-study/route';
 
 const routes: RouteRecordRaw[] = [
   {
@@ -14,7 +15,7 @@ const routes: RouteRecordRaw[] = [
         path: '',
         name: 'LaoutIndexPage',
         component: () => import('pages/IndexPage.vue'),
-        redirect: '/amis',
+        redirect: '/vue-study',
         children: [
           {
             path: 'home',
@@ -129,6 +130,7 @@ const routes: RouteRecordRaw[] = [
           ...FORM_TEST,
           ...TREE,
           ...AMIS,
+          ...VUE_STUDY,
         ],
       },
     ],