chore:不重要的提交

package.json

@@ -28,6 +28,7 @@
     "sortablejs": "^1.15.0",
     "swiper": "^8.4.5",
     "vue": "^3.0.0",
+    "vue-cropper": "^1.0.7",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.0.0",
     "vuedraggable": "^4.1.0",

src/App.vue

@@ -18,6 +18,9 @@ import 'ag-grid-enterprise';
 // import './amis/sdk/iconfont.css';
 // import './amis/sdk/sdk.js';
 
+// vue-cropper
+import 'vue-cropper/dist/index.css';
+
 export default defineComponent({
   name: 'App',
 });

src/modules/page10/config.ts

@@ -1279,4 +1279,98 @@ export const poems = [
       color: '#E18689',
     },
   },
+  {
+    key: '129',
+    author: '博尔赫斯',
+    content: [
+      '我用什么才能留住你？',
+      '我给你瘦落的街道、绝望的落日、荒郊的月亮。',
+      '我给你一个久久地望着孤月的人的悲哀。',
+    ],
+    style: {
+      backgroundImage:
+        'linear-gradient(25deg, #3e234a, #4d577a, #508dad, #43c7e4)',
+      color: '#D0DFE6',
+    },
+  },
+  {
+    key: '130',
+    author: '博尔赫斯',
+    content: [
+      '一朵玫瑰正马不停蹄地成为另一朵玫瑰',
+      '你是云、是海、是忘却',
+      '你也是你曾失去的每一个自己',
+    ],
+    style: {
+      backgroundImage:
+        'linear-gradient(25deg, #001c48, #4b1e43, #7a193d, #a80037)',
+      color: '#D65F00',
+    },
+  },
+  {
+    key: '131',
+    author: '川端康成《雪国》',
+    content: ['你连指尖都泛出好看的颜色'],
+    style: {
+      backgroundImage:
+        'linear-gradient(25deg, #c16e80, #b68f77, #a6ad6d, #90c961)',
+      color: '#FDFDEB',
+    },
+  },
+  {
+    key: '132',
+    author: '粤剧《帝女花》',
+    content: [
+      '落花满天蔽月光，',
+      '借一杯附荐凤台上。',
+      '帝女花带泪上香，',
+      '愿丧生回谢爹娘。',
+    ],
+    style: {
+      backgroundColor: '#6D4659',
+      color: '#CA798A',
+    },
+  },
+  {
+    key: '133',
+    author: '京剧《锁麟囊》',
+    content: [
+      '他教我收余恨、免娇嗔、且自新、改性情、',
+      '休恋逝水、苦海回身、早悟兰因。',
+    ],
+    style: {
+      backgroundColor: '#809181',
+      color: '#F1EFD7',
+    },
+  },
+  {
+    key: '134',
+    author: '黄梅调电影《梁山伯与祝英台》',
+    content: [
+      '“英台不是女儿身，因何耳上有环痕？”',
+      '“耳环痕有原因，梁兄何必起疑云，',
+      '村里酬神多庙会，年年由我扮观音，',
+      '梁兄做文章要专心，你前程不想想钗裙。”',
+      '“我从此不敢看观音。”',
+    ],
+    style: {
+      backgroundColor: '#716e77',
+      color: '#e79686',
+    },
+  },
+  {
+    key: '135',
+    author: '黄梅戏《女驸马》',
+    content: [
+      '我也曾赴过琼林宴，',
+      '我也曾打马御街前，',
+      '人人夸我潘安貌，',
+      '原来纱帽罩哇',
+      '罩婵娟哪',
+    ],
+    style: {
+      backgroundColor: '#00818A',
+      color: '#FCD271',
+    },
+  },
 ];

src/modules/page10/element/MyPoems.vue

@@ -27,7 +27,7 @@ const { info } = useMessage();
 const source = ref(require('../media/羽肿-花火が瞬く夜に.mp3'));
 const isPlaying = ref(false);
 const carouselRef = ref<any>(null);
-const slide = ref('128');
+const slide = ref('135');
 
 onMounted(() => {
   // rightClick();

src/modules/vue-study/IndexPage.vue

@@ -14,12 +14,14 @@ import PROVICE from './provice';
 import { ChartOption, Series_A, Series_B, Series_D } from './config';
 import DateDetail from './element/DateDetail.vue';
 import ImageScale from './element/ImageScale.vue';
+import CropperImg from './element/CropperImg.vue';
 
 // const { info } = useMessage();
 
 const citySelectRef = ref<any>(null);
 const regionSelectRef = ref<any>(null);
 const chartRef = ref<any>(null);
+const CropperImgRef = ref<any>(null);
 
 const showContent = ref(false);
 const showContent2 = ref(false);
@@ -112,6 +114,9 @@ function clickLegend(type: string) {
   legendState[type].show = !legendState[type].show;
   setChart();
 }
+function openCropperModel() {
+  CropperImgRef.value.openModel();
+}
 </script>
 <template>
   <div>
@@ -227,8 +232,14 @@ function clickLegend(type: string) {
       </div>
 
       <ImageScale />
+
+      <div class="upload-img-action q-ma-md">
+        <q-btn color="primary" label="上传头像" @click="openCropperModel" />
+      </div>
     </div>
   </div>
+  <!-- 上传头像/修改头像 弹框 -->
+  <CropperImg ref="CropperImgRef" />
 </template>
 
 <style lang="scss" scoped>

src/modules/vue-study/element/CropperImg.vue

+<!--
+ * 图片裁剪
+-->
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { VueCropper } from 'vue-cropper';
+
+defineExpose({
+  openModel,
+});
+
+const show = ref(false);
+const option = reactive({
+  img: 'https://w.wallhaven.cc/full/kx/wallhaven-kx98xd.jpg',
+  outputType: '',
+});
+
+function openModel() {
+  show.value = true;
+}
+function onClose() {
+  show.value = false;
+}
+</script>
+<template>
+  <q-dialog v-model="show" persistent>
+    <q-card style="width: 700px; max-width: 700px">
+      <q-card-section class="row items-center q-pb-none">
+        <div class="text-h6">修改图片</div>
+        <q-space />
+        <q-btn icon="close" flat round dense v-close-popup @click="onClose" />
+      </q-card-section>
+
+      <q-card-section style="padding-bottom: 8px">
+        <div class="content" style="height: 400px; width: 100%">
+          <div class="left content-item">
+            <div class="left-content">
+              <VueCropper
+                ref="cropper"
+                :img="option.img"
+                autoCrop
+                fixed
+              ></VueCropper>
+            </div>
+            <div class="left-action">
+              <q-btn color="primary" label="上传" outline icon="cloud_upload" />
+            </div>
+          </div>
+          <div class="right content-item">
+            <div class="right-content">
+              <img :src="option.img" alt="图片" />
+            </div>
+            <div class="right-action">
+              <q-btn color="primary" label="提交" unelevated />
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.left {
+  //   background-color: pink;
+}
+.right {
+  //   background-color: bisque;
+}
+.right-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > img {
+    width: 140px;
+    height: 140px;
+    object-fit: contain;
+    border: 1px solid rgba(180, 180, 180, 0.3);
+    border-radius: 50%;
+  }
+}
+.right-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.left-action {
+  display: flex;
+  align-items: center;
+}
+.content-item {
+  display: grid;
+  grid-template-rows: auto 70px;
+}
+</style>

src/modules/vue-study/element/ImageScale.vue

@@ -117,7 +117,7 @@ function sliderUpdate(value: any) {
   .img-mask {
     position: absolute;
     box-sizing: border-box;
-    background-color: pink;
+    background-color: #dadada;
     width: 100%;
     height: 100%;
     top: 0;

yarn.lock

@@ -5957,6 +5957,11 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+vue-cropper@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/vue-cropper/-/vue-cropper-1.0.7.tgz#be8f22bcaa012a93917ad4dc2aab1e0e8e138e1d"
+  integrity sha512-7d/pG+ZVbemmwLu1qQUOsSnmvS0Cr1RYhC1tAG7bTlZTuR5RDDf/F6Tp71CSNzr0j8feTRp9UD/+JKxH3ip8hQ==
+
 vue-demi@*:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"