first commit

历届学生/front-end-team-11/项目开发/学生项目/冯文焌/fontend/src/components/admin/leftMenu.vue

@@ -0,0 +1,84 @@
+<template>
+  <el-menu router class="el-menu-vertical-demo" :default-active="route().fullPath" @open="handleOpen" @close="handleClose">
+
+    <template v-for="item, index in state.menu" :key="index">
+      <el-menu-item v-if="item.menu_id == -1" :index="item.menu_href">
+        <template #title>
+          <el-icon>
+            <component :is="item.menu_icon"></component>
+          </el-icon>
+          <span>{{ item.menu_text }}</span>
+        </template>
+      </el-menu-item>
+
+      <el-sub-menu v-else :index="`${index}`">
+        <template #title>
+          <el-icon>
+            <component :is="item.menu_icon"></component>
+          </el-icon>
+          <span>{{ item.menu_text }}</span>
+        </template>
+
+
+
+        <el-menu-item v-for="v, i in item.children" :index="'/admin/' + item.menu_href + v.menu_href">
+          <template #title>
+            <el-icon>
+              <component :is="v.menu_icon"></component>
+            </el-icon>
+            <span>{{ v.menu_text }}</span>
+          </template>
+        </el-menu-item>
+
+      </el-sub-menu>
+    </template>
+
+
+
+  </el-menu>
+</template>
+
+<script lang="ts" setup>
+
+import http, { setItem, getItem, firstToUpper, createdRouterConfig } from "@/utils";
+import { Menu } from "@/types/response/Menu";
+import { useRouterAction } from "@/utils/router";
+import { defaultMenu } from "@/router";
+import { onMounted, reactive } from "vue";
+const modules = import.meta.glob('@/views/admin/**/*.vue')
+
+const { router, route } = useRouterAction()
+
+const state: {
+  menu: Menu[]
+} = reactive({
+  menu: []
+})
+
+onMounted(() => {
+  console.log("menu------: ");
+  getAllMenu();
+})
+
+
+const getAllMenu = async () => {
+  state.menu = await http.menuList();
+  state.menu.unshift(...defaultMenu)
+  setItem("menu", state.menu)
+  console.log(123,state.menu);
+
+  if (router.getRoutes().length <= 12) {
+    createdRouterConfig(router)
+  }
+
+}
+
+
+
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+</script>

历届学生/front-end-team-11/项目开发/学生项目/冯文焌/fontend/src/components/admin/pageHeader.vue

@@ -0,0 +1,22 @@
+<template>
+    <el-page-header class="page_header" @back="back()">
+        <template #content>
+            <span class="text-large font-600 mr-3"> {{title}} </span>
+        </template>
+    </el-page-header>
+</template>
+
+<script lang="ts" setup>
+import { back } from "@/router";
+withDefaults(defineProps<{
+    title: string
+}>(), {
+    title: "默认标题"
+})
+</script>
+
+<style lang="less" scoped>
+.page_header {
+    margin-bottom: 30px;
+}
+</style>

历届学生/front-end-team-11/项目开发/学生项目/冯文焌/fontend/src/components/admin/pageSearch.vue

@@ -0,0 +1,10 @@
+<template>
+    <el-row>
+        <el-col :span="21">
+            <slot name="input"></slot>
+        </el-col>
+        <el-col :span="2" :offset="1">
+            <slot name="button"></slot>
+        </el-col>
+    </el-row>
+</template>

历届学生/front-end-team-11/项目开发/学生项目/冯文焌/fontend/src/components/admin/topMenu.vue

@@ -0,0 +1,44 @@
+<template>
+
+<el-menu
+    :default-active="activeIndex"
+    class="el-menu-demo"
+    mode="horizontal"
+    background-color="#545c64"
+    text-color="#fff"
+    active-text-color="#ffd04b"
+    :ellipsis="false"
+    @select="handleSelect"
+  >
+    <el-menu-item index="0">LOGO</el-menu-item>
+    <div class="flex-grow" />
+    <el-menu-item index="1">Processing Center</el-menu-item>
+    <el-sub-menu index="2">
+      <template #title>Workspace</template>
+      <el-menu-item index="2-1">item one</el-menu-item>
+      <el-menu-item index="2-2">item two</el-menu-item>
+      <el-menu-item index="2-3">item three</el-menu-item>
+      <el-sub-menu index="2-4">
+        <template #title>item four</template>
+        <el-menu-item index="2-4-1">item one</el-menu-item>
+        <el-menu-item index="2-4-2">item two</el-menu-item>
+        <el-menu-item index="2-4-3">item three</el-menu-item>
+      </el-sub-menu>
+    </el-sub-menu>
+  </el-menu>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const activeIndex = ref('1')
+const handleSelect = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+</script>
+
+<style lang="less" scoped>
+.flex-grow {
+  flex-grow: 1;
+}
+</style>

历届学生/front-end-team-11/项目开发/学生项目/冯文焌/fontend/src/components/admin/wangeditor.vue

@@ -0,0 +1,44 @@
+<template>
+    <div style="border: 1px solid #ccc">
+        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
+        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" mode="default"
+            @onCreated="handleCreated"
+            @onChange="onBlur" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, onBeforeUnmount, shallowRef, onMounted } from 'vue'
+import '@wangeditor/editor/dist/css/style.css';
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef()
+
+const emits = defineEmits(["html"])
+
+// 内容 HTML
+const valueHtml = ref('')
+
+const toolbarConfig = {}
+const editorConfig = { placeholder: '请输入内容...' }
+
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+    const editor = editorRef.value
+    if (editor == null) return
+    editor.destroy()
+})
+
+const onBlur = (editor: any) => emits("html", editor.getHtml())
+
+const handleCreated = (editor: any) => {
+    editorRef.value = editor // 记录 editor 实例，重要！
+}
+
+defineExpose({
+    editorRef
+})
+
+</script>

历届学生/front-end-team-11/项目开发/学生项目/冯文焌/fontend/src/components/app/comment.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="comment">
+
+        <div class="comment_fa">
+            <a-textarea @change="test" :allowClear="true" class="push_comment" v-model:value="state.params.comment_text"
+                :placeholder="state.placeholderText" :rows="4" @focus="isLoginAction"/>
+            <a-button class="button" @click="sendComment">发 送</a-button>
+        </div>
+
+
+        <a-comment v-for="item, index in data.article_comment" :key="index">
+            <template #actions>
+                <span key="comment-basic-reply-to" @click="replyTo(item, item)">回复1</span>
+            </template>
+            <template #author><a>{{ item.user_name }}</a></template>
+            <template #avatar>
+                <a-avatar :src="item.user_img" :alt="item.user_name" />
+            </template>
+            <template #content>
+                <p>
+                    {{ item.comment_text }}
+                </p>
+            </template>
+            <a-comment v-for="v, i in item.comment_children
+" :key="i">
+                <template #actions>
+                    <span @click="replyTo(item, v)">回复2</span>
+                </template>
+                <template #author>
+                    <a>{{ v.user_name }} 回复 {{ v.user_reply_name }}</a>
+                </template>
+                <template #avatar>
+                    <a-avatar :src="v.user_img" :alt="v.user_name" />
+                </template>
+                <template #content>
+                    <p>
+                        {{ v.comment_text }}
+                    </p>
+                </template>
+            </a-comment>
+
+            <a-skeleton v-if="item.loading" avatar :paragraph="{ rows: 2 }" />
+            <div class="more" @click="getMore(item)">展开更多</div>
+
+
+        </a-comment>
+
+        <a-spin v-if="data.loading" />
+        <div v-else class="test" @click="loadMore">加载更多..</div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { ArticleInfoType, comment } from "@/types/response/home";
+import http,{ getItem, isLoginAction } from "@/utils";
+import { onMounted } from "vue";
+
+const props = defineProps<{
+    data: ArticleInfoType
+}>()
+
+const emits = defineEmits(["refresh"])
+
+const state: any = reactive({
+    loading: false,
+    placeholderText: "善语结善缘，恶言伤人心",
+    params: {
+        comment_text: "",
+        comment_father_id: 0,
+        article_id: props.data.article_id,
+        user_reply_id: 0
+    }
+})
+
+onMounted(() => {
+
+})
+
+const test = () => {
+    if (state.params.comment_text.length == 0) {
+        state.params.comment_father_id = 0;
+        state.params.user_reply_id = 0;
+        state.placeholderText = "善语结善缘，恶言伤人心"
+    }
+}
+
+const replyTo = (item: comment, v: comment) => {
+    state.params.comment_father_id = item.comment_id
+    state.params.user_reply_id = v.user_id;
+    state.params.comment_text = "";
+    state.placeholderText = `${getItem("userInfo").user_name} 回复 ${v.user_name}`
+}
+
+const sendComment = async () => {
+    await http.pushComment(state.params)
+    state.params.comment_text = "";
+    test()
+    emits("refresh")
+}
+
+
+const loadMore = () => {
+    console.log("data: ", props.data);
+
+    props.data.loading = true;
+    setTimeout(() => {
+        props.data.loading = false;
+    }, 4000)
+}
+
+const getMore = (item: comment) => {
+    item.loading = true
+    setTimeout(() => {
+        item.loading = false;
+    }, 4000)
+}
+
+</script>
+
+<style lang="less" scoped>
+.comment {
+    /deep/ .anticon.ant-input-clear-icon-hidden {
+        visibility: inherit;
+    }
+
+    .comment_fa {
+        margin-bottom: 20px;
+
+        .button {
+            margin-top: 10px;
+        }
+
+        .push_comment {
+            resize: none;
+        }
+    }
+
+}
+</style>

历届学生/front-end-team-11/项目开发/学生项目/冯文焌/fontend/src/components/app/header.vue

@@ -0,0 +1,61 @@
+<template>
+    <a-menu theme="light" v-model:selectedKeys="current" mode="horizontal" @click="handelClick">
+        <a-menu-item :key="item.key" v-for="item, index in menu">
+            <template #icon>
+                <component :is="item.icon"></component>
+            </template>
+            {{ item.text }}
+        </a-menu-item>
+
+        <a-menu-item v-if="!isLoginStaus()" @click="push({ name: 'appuser' })">
+            登录 / 注册
+        </a-menu-item>
+
+        <a-sub-menu v-else>
+            <template #icon>
+                <a-avatar :src="user.getUserInfo.user_img" />
+            </template>
+            <template #title>{{ user.getUserInfo.user_name }}</template>
+            <a-menu-item-group>
+                <a-menu-item>自定义展示的下拉信息....</a-menu-item>
+                <a-menu-item key="/admin/home" v-if="user.getUserInfo.user_type == 1">进入管理后台</a-menu-item>
+            </a-menu-item-group>
+          
+        </a-sub-menu>
+
+
+    </a-menu>
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { ref, reactive, onMounted } from 'vue';
+import { MailOutlined } from '@ant-design/icons-vue';
+import { VagueOject } from '@/types/common';
+import { push } from "@/router";
+import { isLoginStaus, getItem } from "@/utils";
+import { useUserStore } from "@/state/user";
+
+// const { getUserInfo } = storeToRefs(useUserStore())
+// const { setUserInfo } = useUserStore()
+const user = useUserStore()
+
+withDefaults(defineProps<{
+    menu: VagueOject[]
+}>(), {
+    menu: () => []
+})
+
+onMounted(() => {
+    // TODO 这行在登录写完后需要删除
+    user.setUserInfo(getItem("userinfo")) 
+    console.log("getUserInfo: ", user.getUserInfo);
+
+})
+
+const handelClick = (item: any) => {
+    push(item.key)
+}
+
+const current = ref<string[]>(['mail']);
+</script>

历届学生/front-end-team-11/项目开发/学生项目/冯文焌/fontend/src/components/app/page.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="page" :style="{ marginTop: `${top}px`, marginBottom: `${bottom}px` }">
+        <slot></slot>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+withDefaults(defineProps<{
+    top: number,
+    bottom: number
+}>(), {
+    top: 45,
+    bottom: 50
+})
+
+
+</script>
+
+<style lang="less" scoped>
+.page {
+    width: 1200px;
+    margin: 0 auto;
+}
+</style>

历届学生/front-end-team-11/项目开发/学生项目/冯文焌/fontend/src/components/app/right.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="home">
+        <ul class="list">
+            <li v-for="item, index in state.ArticleList" :key="index">
+                <a-typography-title :level="3">{{ item.link_title }}</a-typography-title>
+                <a-typography-paragraph type="secondary"> <a :href="item.link_url">{{ item.link_url }}</a>
+                </a-typography-paragraph>
+            </li>
+        </ul>
+    </div>
+</template>
+  
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+import { linkList } from "@/types/response/home";
+import { onMounted, reactive, toRefs } from "vue";
+import http, { format } from "@/utils";
+
+
+const state: {
+    ArticleList: linkList[]
+} = reactive({
+    ArticleList: []
+})
+
+onMounted(() => {
+    getLinkList()
+})
+
+
+
+let getLinkList = async () => {
+    state.ArticleList = await http.linkList();
+    console.log("789797987: ", state.ArticleList);
+}
+</script>
+  
+  
+  
+  
+<style lang="less" scoped>
+@import "@page/Home.less";
+</style>