From 2eab11561d65e25d93f7975d52895cb15c031d62 Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Fri, 6 Sep 2024 16:10:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dtypescript=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tonecn/src/components/Blog/BlogComment.vue    |  8 +--
 .../components/Blog/BlogContentToolBar.vue    | 10 ++--
 .../Common/RotationVerification.vue           | 19 ++++---
 tonecn/src/components/Console/Blogs.vue       | 49 ++++++++++++-------
 tonecn/src/components/Console/Resources.vue   | 32 +++++++-----
 tonecn/src/lib/request.ts                     |  9 +++-
 tonecn/src/views/Blog.vue                     |  8 +--
 tonecn/src/views/BlogContent.vue              | 36 +++++++++-----
 tonecn/src/views/Download.vue                 |  4 +-
 tonecn/src/views/Resource.vue                 |  4 +-
 10 files changed, 110 insertions(+), 69 deletions(-)

diff --git a/tonecn/src/components/Blog/BlogComment.vue b/tonecn/src/components/Blog/BlogComment.vue
index c54bbc0..c771eae 100644
--- a/tonecn/src/components/Blog/BlogComment.vue
+++ b/tonecn/src/components/Blog/BlogComment.vue
@@ -1,12 +1,12 @@
-<script setup>
-import { request } from '@/lib/request';
+<script setup lang='ts'>
+import { request, type BaseResponseData } from '@/lib/request';
 import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { timestampToString } from '@/lib/timestampToString';
 const model = defineModel();
 const route = useRoute()
 const bloguuid = route.params.uuid;
-const blogCommentList = reactive([]);
+const blogCommentList: any[] = reactive([]);
 const loadStatus = ref(0)// 0加载中 1已加载全部评论 -1加载失败
 onMounted(async () => {
     await loadComment();
@@ -25,7 +25,7 @@ const getStatusText = computed(() => {
 
 const loadComment = async () => {
     try {
-        let commentRes = await request.get(`/blogComment?bloguuid=${bloguuid}`);
+        let commentRes:BaseResponseData = await request.get(`/blogComment?bloguuid=${bloguuid}`);
         if (commentRes.code == 0) {
             blogCommentList.splice(0, blogCommentList.length);
             blogCommentList.push(...commentRes.data);
diff --git a/tonecn/src/components/Blog/BlogContentToolBar.vue b/tonecn/src/components/Blog/BlogContentToolBar.vue
index cd257a9..70de3ee 100644
--- a/tonecn/src/components/Blog/BlogContentToolBar.vue
+++ b/tonecn/src/components/Blog/BlogContentToolBar.vue
@@ -1,9 +1,9 @@
-<script setup>
+<script setup lang='ts'>
 import { Star, Edit, StarFilled } from '@element-plus/icons-vue'
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useRoute } from 'vue-router';
-import { request } from '@/lib/request';
+import { request, type BaseResponseData } from '@/lib/request';
 import RotationVerification from '../Common/RotationVerification.vue';
 const route = useRoute()
 const bloguuid = route.params.uuid;
@@ -28,7 +28,7 @@ const likeBlog = async () => {
         return ElMessage.success('已经点过赞啦～')
     }
     try {
-        let likeRes = await request.post('/blogLike?bloguuid=' + bloguuid)
+        let likeRes: BaseResponseData = await request.post('/blogLike?bloguuid=' + bloguuid)
         if (likeRes.code == 0) {
             isLiked.value = true;
             return ElMessage.success('点赞成功～')
@@ -65,7 +65,7 @@ const submitComment = async () => {
     isCaptchaViewShow.value = false;
     ElMessage.info('正在提交，请稍后')
     try {
-        let commentRes = await request.post('blogComment', {
+        let commentRes: BaseResponseData = await request.post('blogComment', {
             session: localStorage.getItem('captcha-session'),
             bloguuid: bloguuid,
             content: inputComment.value.trim(),
diff --git a/tonecn/src/components/Common/RotationVerification.vue b/tonecn/src/components/Common/RotationVerification.vue
index 7e95286..3019ece 100644
--- a/tonecn/src/components/Common/RotationVerification.vue
+++ b/tonecn/src/components/Common/RotationVerification.vue
@@ -1,12 +1,12 @@
-<script setup>
+<script setup lang='ts'>
 /**
  * 旋转图像验证码组件
  * @event success 验证成功
  * @event fail 验证失败
  * @requires ServerSDK
- * @since 1.0.1
+ * @since 1.0.2
  */
-import { request } from '@/lib/request';
+import { request, type BaseResponseData } from '@/lib/request';
 import { onBeforeMount, onMounted, ref } from 'vue';
 let imageBase64 = ref('');
 const emit = defineEmits(['fail', 'success'])
@@ -14,7 +14,7 @@ let onVerifying = ref(false);
 let onVerifyFail = ref(false);
 onBeforeMount(async () => {
     try {
-        let res = await request.get('captcha')
+        let res: BaseResponseData = await request.get('captcha')
         localStorage.setItem('captcha-session', res.data.session)
         imageBase64.value = res.data.imgPreStr + res.data.img;
     } catch (error) {
@@ -27,8 +27,11 @@ onMounted(() => {
     let imageEle = document.getElementById('RV-image');
     let isDragging = false;// 正在移动标志位
     let silderMoveable = true;// 是否可以开始移动标识位
-    let startX;
-    let deltaX;// 拖动距离
+    let startX: number;
+    let deltaX: number;// 拖动距离
+    if(!slider || !imageEle){
+        throw new Error('element is null')
+    }
     slider.addEventListener('mousedown', function (e) {
         if (silderMoveable) {
             isDragging = true;
@@ -83,7 +86,7 @@ onMounted(() => {
             } else {
                 try {
                     onVerifying.value = true;
-                    let res = await request.post('checkCaptcha', {
+                    let res: BaseResponseData = await request.post('checkCaptcha', {
                         session: localStorage.getItem('captcha-session'),
                         rotateDeg: deltaX * 9 / 5
                     })
@@ -129,7 +132,7 @@ onMounted(() => {
             } else {
                 try {
                     onVerifying.value = true;
-                    let res = await request.post('checkCaptcha', {
+                    let res: BaseResponseData = await request.post('checkCaptcha', {
                         session: localStorage.getItem('captcha-session'),
                         rotateDeg: deltaX * 9 / 5
                     })
diff --git a/tonecn/src/components/Console/Blogs.vue b/tonecn/src/components/Console/Blogs.vue
index c991097..eb29804 100644
--- a/tonecn/src/components/Console/Blogs.vue
+++ b/tonecn/src/components/Console/Blogs.vue
@@ -1,14 +1,27 @@
-<script setup>
-import { onMounted, reactive, ref } from 'vue';
-import { request } from '../../lib/request'
+<script setup lang='ts'>
+import { onMounted, reactive, ref, type Ref } from 'vue';
+import { request, type BaseResponseData } from '../../lib/request'
 import { ElMessage } from 'element-plus';
 import { timestampToString } from '@/lib/timestampToString';
+const tableData: Ref<any[]> = ref([])
+const dialogEditFormVisible = ref(false);
+type BlogContentData = {
+    id: string,
+    uuid: string,
+    title: string,
+    description: string,
+    publish_time: Date,
+    src: string,
+    access_level: number,
+    visit_count: number,
+    like_count: number
+}
 onMounted(async () => {
     await loadTableData();
 })
 const loadTableData = async () => {
     try {
-        let resourcesRes = await request.get('/console/blogs')
+        let resourcesRes: BaseResponseData = await request.get('/console/blogs')
         if (resourcesRes.code == 0) {
             tableData.value = [];
             tableData.value.push(...resourcesRes.data);
@@ -19,20 +32,18 @@ const loadTableData = async () => {
         ElMessage.error(`加载失败 ${error}`)
     }
 }
-const tableData = ref([])
-const dialogEditFormVisible = ref(false);
-const editForm = reactive({
+const editForm: BlogContentData = reactive({
     id: '',
     uuid: '',
     title: '',
     description: '',
-    publish_time: '',
+    publish_time: new Date(),
     src: '',
-    access_level: '',
-    visit_count: '',
-    like_count: ''
+    access_level: 0,
+    visit_count: 0,
+    like_count: 0
 })
-const editHandle = (data) => {
+const editHandle = (data: any) => {
     editForm.id = data.id;
     editForm.uuid = data.uuid;
     editForm.title = data.title;
@@ -48,7 +59,7 @@ const addHandle = () => {
     editForm.uuid = '';
     editForm.title = '';
     editForm.description = '';
-    editForm.publish_time = '';
+    editForm.publish_time = new Date();
     editForm.src = '';
     editForm.access_level = 10;
     editForm.visit_count = 0;
@@ -61,7 +72,7 @@ const saveHandle = async () => {
         return ElMessage.warning('请先完成表单')
     }
     try {
-        let res = await request.post('/console/saveBlog', {
+        let res: BaseResponseData = await request.post('/console/saveBlog', {
             id: editForm.id,
             uuid: editForm.uuid,
             title: editForm.title,
@@ -81,10 +92,10 @@ const saveHandle = async () => {
         return ElMessage.error(`保存失败 ${error}`);
     }
 }
-const delHandle = async (data) => {
+const delHandle = async (data: { id: string, [key: string]: any }) => {
     let { id } = data;
     try {
-        let res = await request.delete('/console/blog?id=' + id);
+        let res: BaseResponseData = await request.delete('/console/blog?id=' + id);
         if (res.code == 0) {
             ElMessage.success('删除成功');
             loadTableData();
@@ -95,7 +106,7 @@ const delHandle = async (data) => {
         return ElMessage.error(`删除失败 ${error}`);
     }
 }
-const formatTime = (row, column, cellValue, index) => {
+const formatTime = (row: any, _column: any, _cellValue: any, _index: any) => {
     return timestampToString(row.publish_time);
 }
 </script>
@@ -146,10 +157,10 @@ const formatTime = (row, column, cellValue, index) => {
                 <el-text style="margin-left: 20px;" size="small">默认可访问大于6的项</el-text>
             </el-form-item>
             <el-form-item label="访问量">
-                <el-input-number v-model="editForm.visit_count" :min="0" disabled/>
+                <el-input-number v-model="editForm.visit_count" :min="0" disabled />
             </el-form-item>
             <el-form-item label="点赞量">
-                <el-input-number v-model="editForm.like_count" :min="0" disabled/>
+                <el-input-number v-model="editForm.like_count" :min="0" disabled />
             </el-form-item>
         </el-form>
         <template #footer>
diff --git a/tonecn/src/components/Console/Resources.vue b/tonecn/src/components/Console/Resources.vue
index 0d14bbe..dad38a7 100644
--- a/tonecn/src/components/Console/Resources.vue
+++ b/tonecn/src/components/Console/Resources.vue
@@ -1,13 +1,25 @@
-<script setup>
-import { onMounted, reactive, ref } from 'vue';
-import { request } from '../../lib/request'
+<script setup lang='ts'>
+import { onMounted, reactive, ref, type Ref } from 'vue';
+import { request, type BaseResponseData } from '../../lib/request'
 import { ElMessage } from 'element-plus';
+type ResourceData = {
+    id: string,
+    type: string,
+    recommand: number,
+    title: string,
+    describe: string,
+    icon_src: string,
+    addition: string,
+    src: string,
+}
 onMounted(async () => {
     await loadTableData();
 })
+const tableData: Ref<any[]> = ref([])
+const dialogEditFormVisible = ref(false);
 const loadTableData = async () => {
     try {
-        let resourcesRes = await request.get('/console/resources')
+        let resourcesRes: BaseResponseData = await request.get('/console/resources')
         if (resourcesRes.code == 0) {
             tableData.value = [];
             tableData.value.push(...resourcesRes.data);
@@ -18,9 +30,7 @@ const loadTableData = async () => {
         ElMessage.error(`加载失败 ${error}`)
     }
 }
-const tableData = ref([])
-const dialogEditFormVisible = ref(false);
-const editForm = reactive({
+const editForm: ResourceData = reactive({
     id: '',
     type: '',
     recommand: 1,
@@ -30,7 +40,7 @@ const editForm = reactive({
     addition: '',
     src: '',
 })
-const editHandle = (data) => {
+const editHandle = (data: ResourceData) => {
     editForm.id = data.id;
     editForm.type = data.type;
     editForm.recommand = +data.recommand;
@@ -58,7 +68,7 @@ const saveHandle = async () => {
         return ElMessage.warning('请先完成表单')
     }
     try {
-        let res = await request.post('/console/saveResource', {
+        let res: BaseResponseData = await request.post('/console/saveResource', {
             id: editForm.id,
             type: editForm.type,
             recommand: editForm.recommand,
@@ -79,10 +89,10 @@ const saveHandle = async () => {
         return ElMessage.error(`保存失败 ${error}`);
     }
 }
-const delHandle = async (data) => {
+const delHandle = async (data: { id: string, [key: string]: any }) => {
     let { id } = data;
     try {
-        let res = await request.delete('/console/resource?id=' + id);
+        let res: BaseResponseData = await request.delete('/console/resource?id=' + id);
         if (res.code == 0) {
             ElMessage.success('删除成功');
             loadTableData();
diff --git a/tonecn/src/lib/request.ts b/tonecn/src/lib/request.ts
index b885856..e1440cf 100644
--- a/tonecn/src/lib/request.ts
+++ b/tonecn/src/lib/request.ts
@@ -1,10 +1,14 @@
 import axios from "axios";
-
+type BaseResponseData = {
+  code: number,
+  message: string,
+  data: any
+};
 // axios.defaults.baseURL = "http://localhost:23500";
 axios.defaults.baseURL = "https://tonesc.cn/apis";
 
 axios.interceptors.response.use((response) => {
-  if(response.data && response.data.code == -5){
+  if (response.data && response.data.code == -5) {
     // auth error
     localStorage.removeItem('jwtToken');
     window.location.reload()
@@ -20,4 +24,5 @@ axios.interceptors.request.use((request) => {
   return request;
 })
 
+export type { BaseResponseData };
 export { axios as request };
\ No newline at end of file
diff --git a/tonecn/src/views/Blog.vue b/tonecn/src/views/Blog.vue
index 1289b0d..48b2439 100644
--- a/tonecn/src/views/Blog.vue
+++ b/tonecn/src/views/Blog.vue
@@ -1,14 +1,14 @@
-<script setup>
-import { request } from '@/lib/request';
+<script setup lang='ts'>
+import { request, type BaseResponseData } from '@/lib/request';
 import { onMounted, reactive, ref } from 'vue';
 import { timestampToString } from '../lib/timestampToString'
 import { formateTimes } from '@/lib/formateTimes';
 const loadStatus = ref(0);
-const blogList = reactive([]);
+const blogList: any[] = reactive([]);
 
 onMounted(async () => {
     try {
-        const blogListRes = await request.get('/blogList');
+        const blogListRes:BaseResponseData = await request.get('/blogList');
         if (blogListRes.code == 0) {
             blogList.push(...blogListRes.data);
             loadStatus.value = 1;
diff --git a/tonecn/src/views/BlogContent.vue b/tonecn/src/views/BlogContent.vue
index a65f127..373f7b4 100644
--- a/tonecn/src/views/BlogContent.vue
+++ b/tonecn/src/views/BlogContent.vue
@@ -1,6 +1,6 @@
-<script setup>
-import { request } from '@/lib/request';
-import { onMounted, onUnmounted, ref } from 'vue';
+<script setup lang='ts'>
+import { request, type BaseResponseData } from '@/lib/request';
+import { onMounted, onUnmounted, ref, type Ref } from 'vue';
 import { timestampToString } from '../lib/timestampToString'
 import { useRoute } from 'vue-router'
 import { Marked } from 'marked';
@@ -9,11 +9,23 @@ import hljs from 'highlight.js';
 import "highlight.js/styles/xcode.css";
 import BlogContentToolBar from '@/components/Blog/BlogContentToolBar.vue';
 import BlogComment from '@/components/Blog/BlogComment.vue';
-
+type BlogInfo = {
+    visit_count: number,
+    title: string,
+    publish_time: string,
+    like_count: number,
+    description: string
+}
 const loadStatus = ref(0);// 0加载中 -1加载失败 -2文章不存在或不可见 1加载成功
 const route = useRoute();
 const blogContent = ref('');
-const blogInfo = ref({});
+const blogInfo: Ref<BlogInfo> = ref({
+    visit_count: 0,
+    title: '',
+    publish_time: '',
+    like_count: 0,
+    description: ''
+});
 const blogCommentReload = ref(false);
 
 const marked = new Marked(
@@ -32,10 +44,10 @@ onMounted(async () => {
         return loadStatus.value = -1;
     }
     try {
-        let blogContentRes = await request.get(`/blogContent?bloguuid=${bloguuid}`);
+        let blogContentRes: BaseResponseData = await request.get(`/blogContent?bloguuid=${bloguuid}`);
         if (blogContentRes.code == 0) {
             try {
-                blogContent.value = marked.parse(decodeURIComponent(escape(atob(blogContentRes.data.data))))
+                blogContent.value = await marked.parse(decodeURIComponent(escape(atob(blogContentRes.data.data))))
                 blogInfo.value = blogContentRes.data.info;
                 loadStatus.value = 1;
 
@@ -55,7 +67,7 @@ onMounted(async () => {
         loadStatus.value = -1;
     }
 })
-onUnmounted(()=>{
+onUnmounted(() => {
     document.title = '特恩(TONE)';
 })
 </script>
@@ -73,9 +85,9 @@ onUnmounted(()=>{
             <div v-html="blogContent" id="blogContentContainer"></div>
         </div>
 
-        <BlogComment v-if="loadStatus == 1" v-model="blogCommentReload"/>
+        <BlogComment v-if="loadStatus == 1" v-model="blogCommentReload" />
     </div>
-    <BlogContentToolBar @comment-success="blogCommentReload = true;"/>
+    <BlogContentToolBar @comment-success="blogCommentReload = true;" />
 </template>
 <style scoped>
 .bcc {
@@ -125,12 +137,12 @@ onUnmounted(()=>{
     color: #888;
 }
 
-#blogContentContainer pre{
+#blogContentContainer pre {
     border-radius: 5px;
     overflow: hidden;
 }
 
-#blogContentContainer pre code{
+#blogContentContainer pre code {
     overflow-x: scroll;
 }
 
diff --git a/tonecn/src/views/Download.vue b/tonecn/src/views/Download.vue
index 0d35967..0908b2a 100644
--- a/tonecn/src/views/Download.vue
+++ b/tonecn/src/views/Download.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { request } from '@/lib/request';
+import { request, type BaseResponseData } from '@/lib/request';
 import Agreement from '@/components/Common/Agreement.vue';
 import { ref, onMounted, reactive } from 'vue';
 let showAgreement = ref(false);
@@ -8,7 +8,7 @@ let ResourceDatas: any[] = reactive([])
 onMounted(async () => {
   // 用于获取数据的函数
   try {
-    let res: any = await request.get('/resourceList?type=download');
+    let res: BaseResponseData = await request.get('/resourceList?type=download');
     if (res && res.code == 0) {
       loadStatus.value = 1;
       ResourceDatas.push(...res.data)
diff --git a/tonecn/src/views/Resource.vue b/tonecn/src/views/Resource.vue
index 072a8b4..5bf94e2 100644
--- a/tonecn/src/views/Resource.vue
+++ b/tonecn/src/views/Resource.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { request } from '@/lib/request';
+import { request, type BaseResponseData } from '@/lib/request';
 import Agreement from '@/components/Common/Agreement.vue';
 import { ref, onMounted, reactive } from 'vue';
 let showAgreement = ref(false);
@@ -8,7 +8,7 @@ let ResourceDatas: any[] = reactive([])
 onMounted(async () => {
   // 用于获取数据的函数
   try {
-    let res: any = await request.get('/resourceList?type=resource');
+    let res: BaseResponseData = await request.get('/resourceList?type=resource');
     if (res && res.code == 0) {
       loadStatus.value = 1;
       ResourceDatas.push(...res.data)