From f863219b0ce95502ea4592cb23f1a96647ec20f8 Mon Sep 17 00:00:00 2001
From: Wayne <wwayne.hsu@gmail.com>
Date: Fri, 2 Feb 2024 17:25:56 +0800
Subject: [PATCH] bug fix

---
 admin/src/pages/News/activity/Index.vue | 13 ++++++++
 admin/src/pages/Site/config.vue         | 42 +++++++++++++++++++++++--
 web/assets/css/ckeditor.css             | 29 +++++++++++++++++
 web/pages/index.vue                     |  7 ++---
 web/pages/social/activity/index.vue     |  2 +-
 5 files changed, 85 insertions(+), 8 deletions(-)

diff --git a/admin/src/pages/News/activity/Index.vue b/admin/src/pages/News/activity/Index.vue
index 058e813..2a58ee3 100644
--- a/admin/src/pages/News/activity/Index.vue
+++ b/admin/src/pages/News/activity/Index.vue
@@ -159,6 +159,19 @@ const handleCloseFormDraw = (val) => {
           </template>
         </el-table-column>
       </el-table>
+      <div class="pagination-block">
+          <el-pagination 
+          v-model:current-page="page" 
+          v-model:page-size="pageSize" 
+          :page-sizes="[10, 20, 50, 100]"
+          layout="->,total, sizes, prev, pager, next, jumper" 
+          :total="total" 
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          @prev-click="handlePrevClick"
+          @next-click="handleNextClick"
+          />
+      </div>
     </el-card>
   </div>
 
diff --git a/admin/src/pages/Site/config.vue b/admin/src/pages/Site/config.vue
index cc35e7b..03d2f3a 100644
--- a/admin/src/pages/Site/config.vue
+++ b/admin/src/pages/Site/config.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { ref, reactive, onMounted, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import ClassicEditor from "ckeditor5-custom-build/build/ckeditor.js";
+
 
 const route = useRoute();
 const router = useRouter();
@@ -13,6 +15,38 @@ const loading = ref(false);
 const formRef = ref(null);
 const form = ref({});
 
+// 初始化編輯器
+const editor = ClassicEditor;
+const editorConfig = ref({
+  simpleUpload: {
+    // The URL that the images are uploaded to.
+    uploadUrl: 'https://prodio.zltest.com.tw/adminapi/article/uploadImage',
+    // // Headers sent along with the XMLHttpRequest to the upload server.
+    headers: {
+      'X-CSRF-TOKEN': 'CSFR-Token',
+      'Authorization' : `${sessionStorage.getItem('token')}`
+    }
+  },
+  image: {
+    resize: true,
+    toolbar: [
+      "imageTextAlternative",
+      "|",
+      "imageStyle:alignLeft",
+      "imageStyle:alignRight",
+      "|",
+      "imageStyle:alignBlockLeft",
+      "imageStyle:block",
+      "imageStyle:alignBlockRight",
+    ],
+    styles: [
+      'full',
+      'alignLeft',
+      'alignRight',
+    ],
+  },
+});
+
 onMounted(async () => {
     let res = await getConfig();
     if (res.code === 200) {
@@ -97,8 +131,8 @@ const submitForm = (formEl) => {
       <el-form-item label="產品與服務" prop="products">
           <el-input type="textarea" :rows="3" v-model="form.products" />
       </el-form-item>
-      <el-form-item label="企業永續發展" prop="development">
-          <el-input type="textarea" :rows="3" v-model="form.development" />
+      <el-form-item label="首頁下方區塊" prop="development">
+          <ckeditor :editor="editor" v-model="form.development" :config="editorConfig"></ckeditor>
       </el-form-item>
     </el-form>
     <div class="demo-drawer__footer" style="text-align: right;">
@@ -112,4 +146,8 @@ const submitForm = (formEl) => {
 
 <style lang="less" scoped>
 
+:deep(.ck-editor__editable_inline) {
+  width: 70vw;
+  height: 111px;
+}
 </style>
\ No newline at end of file
diff --git a/web/assets/css/ckeditor.css b/web/assets/css/ckeditor.css
index 206d98b..d1186b6 100644
--- a/web/assets/css/ckeditor.css
+++ b/web/assets/css/ckeditor.css
@@ -558,4 +558,33 @@ margin-left: -15px;
 .table table {
     width: 100%;
     white-space: nowrap;
+}
+
+.ck-content h2 {
+    display: block;
+    font-size: 1.5em;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+}
+
+.ck-content h3 {
+    display: block;
+    font-size: 1.17em;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+}
+
+.ck-content h4 {
+    display: block;
+    margin-block-start: 1.33em;
+    margin-block-end: 1.33em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
 }
\ No newline at end of file
diff --git a/web/pages/index.vue b/web/pages/index.vue
index b01367f..7aa6727 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -109,12 +109,9 @@ onMounted(async () => {
       <section class="section concept">
         <div class="bg"><img :src="featureImg" alt=""></div>
         <div class="container">
-          <div class="content">
-            <div class="secTitle mb-4">{{ $t('development') }}</div>
-            <div class="secDesc">
-              {{ config[locale].development }}
+          <div class="content" >
+            <div class="ck-content" v-html="config[locale].development">
             </div>
-            <!-- <div class="moreBtn">MORE</div> -->
           </div>
         </div>
       </section>
diff --git a/web/pages/social/activity/index.vue b/web/pages/social/activity/index.vue
index 45e08fb..8cd64a2 100644
--- a/web/pages/social/activity/index.vue
+++ b/web/pages/social/activity/index.vue
@@ -3,7 +3,7 @@
 const activityList = computed(() => res.value.data);
 
 const page = ref(1)
-const pageSize = ref(10)
+const pageSize = ref(12)
 
 // 取得活動資料
 const { data: res } = await useMyFetch('/social/getActivityList', "POST", {