修复typescript类型错误

2024-09-06 16:10:46 +08:00
parent 5b7c5d0f1d
commit 2eab11561d
10 changed files with 110 additions and 69 deletions
--- 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);
--- 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(),
--- 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
                    })
--- 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>
--- 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();
--- 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 };
--- 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;
--- 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;
 }

--- 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)
--- 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)