新增组件示例

admin/src/views/template/component/file.vue

@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <el-card header="基础使用" shadow="none" class="!border-none">
+            <div class="flex flex-wrap">
+                <div class="flex m-4">
+                    <div class="mr-4">选择图片：</div>
+                    <material-picker v-model="state.value1" />
+                </div>
+                <div class="flex m-4">
+                    <div class="mr-4">选择视频：</div>
+                    <material-picker type="video" v-model="state.value3" />
+                </div>
+                <div class="flex flex-1 m-4">
+                    <div class="mr-4">多张图片：</div>
+                    <div class="flex-1">
+                        <!-- 外层需要有足够的宽度，这样预览图和选择按钮才不会直接换行 -->
+                        <material-picker :limit="4" v-model="state.value2" />
+                    </div>
+                </div>
+            </div>
+        </el-card>
+        <el-card header="进阶用法" shadow="none" class="!border-none mt-4">
+            <div class="flex flex-wrap">
+                <div class="flex m-4">
+                    <div class="mr-4">自定义选择器大小：</div>
+                    <material-picker size="60px" v-model="state.value4" />
+                </div>
+                <div class="flex m-4">
+                    <div class="mr-4">使用插槽：</div>
+                    <material-picker v-model="state.value5">
+                        <template #upload>
+                            <el-button>选择文件</el-button>
+                        </template>
+                    </material-picker>
+                </div>
+                <div class="flex m-4">
+                    <div class="mr-4">选出地址不带域名：</div>
+                    <material-picker :exclude-domain="true" v-model="state.value6" />
+                </div>
+            </div>
+            <div>
+                <div class="flex m-4 items-center">
+                    <div class="w-20 flex-none">带域名：</div>
+                    <el-input class="w-[500px]" :model-value="state.value5" />
+                </div>
+                <div class="flex m-4 items-center">
+                    <div class="w-20 flex-none">不带域名：</div>
+                    <el-input class="w-[500px]" :model-value="state.value6" />
+                </div>
+            </div>
+        </el-card>
+    </div>
+</template>
+<script lang="ts" setup>
+const state = reactive({
+    value1: '',
+    value2: [],
+    value3: '',
+    value4: '',
+    value5: '',
+    value6: ''
+})
+</script>

admin/src/views/template/component/icon.vue

@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <el-card header="element-plus图标" shadow="none" class="!border-none">
+            <div class="flex items-center">
+                <icon class="m-4" :size="24" name="el-icon-Search" />
+                <icon class="m-4" :size="24" name="el-icon-Plus" />
+                <icon class="m-4" :size="24" name="el-icon-FullScreen" />
+                <icon class="m-4" :size="24" name="el-icon-Setting" />
+                <icon class="m-4" :size="24" name="el-icon-Warning" />
+            </div>
+        </el-card>
+        <el-card header="本地图标" shadow="none" class="!border-none mt-4">
+            <div class="flex items-center">
+                <icon class="m-4" :size="24" name="local-icon-baoxian" />
+                <icon class="m-4" :size="24" name="local-icon-youhui" />
+                <icon class="m-4" :size="24" name="local-icon-daiyunying" />
+                <icon class="m-4" :size="24" name="local-icon-diancanshezhi" />
+                <icon class="m-4" :size="24" name="local-icon-dianzifapiao" />
+            </div>
+        </el-card>
+        <el-card header="图标选择器" shadow="none" class="!border-none mt-4">
+            <div class="flex items-center">
+                <icon-picker v-model="state.value" />
+            </div>
+        </el-card>
+        <el-card
+            header="element-plus图标库大全（点击复制图标名称）"
+            shadow="none"
+            class="!border-none mt-4"
+        >
+            <div class="flex items-center">
+                <div class="flex flex-wrap">
+                    <div v-for="item in getElementPlusIconNames()" :key="item" class="m-1">
+                        <el-button v-copy="item">
+                            <icon :name="item" :size="20" />
+                        </el-button>
+                    </div>
+                </div>
+            </div>
+        </el-card>
+        <el-card
+            header="本地图标库大全（点击复制图标名称）"
+            shadow="none"
+            class="!border-none mt-4"
+        >
+            <div class="flex items-center">
+                <div class="flex flex-wrap">
+                    <div v-for="item in getLocalIconNames()" :key="item" class="m-1">
+                        <el-button v-copy="item">
+                            <icon :name="item" :size="20" />
+                        </el-button>
+                    </div>
+                </div>
+            </div>
+        </el-card>
+    </div>
+</template>
+<script lang="ts" setup>
+import Icon from '@/components/icon/index.vue'
+import { getElementPlusIconNames, getLocalIconNames } from '@/components/icon'
+const state = reactive({
+    value: ''
+})
+</script>

admin/src/views/template/component/link.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+        <el-card header="基础使用" shadow="none" class="!border-none">
+            <link-picker v-model="state.value1" />
+        </el-card>
+    </div>
+</template>
+<script lang="ts" setup>
+const state = reactive({
+    value1: {}
+})
+</script>

admin/src/views/template/component/overflow.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+        <el-card header="基础使用" shadow="none" class="!border-none">
+            <overflow-tooltip class="w-20 m-4" content="超出自动打点，悬浮弹窗显示全部内容" />
+            <overflow-tooltip class="w-60 m-4" content="超出自动打点，悬浮弹窗显示全部内容" />
+        </el-card>
+    </div>
+</template>
+<script lang="ts" setup></script>

admin/src/views/template/component/popover_input.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <el-card header="基础使用" shadow="none" class="!border-none">
+            <div class="flex flex-wrap">
+                <div class="m-4">
+                    <popover-input @confirm="onConfirm">
+                        <template #default>
+                            <el-button> 点击输入 </el-button>
+                        </template>
+                    </popover-input>
+                </div>
+                <div class="m-4">
+                    <popover-input type="number" @confirm="onConfirm">
+                        <template #default>
+                            <el-button> 输入数字 </el-button>
+                        </template>
+                    </popover-input>
+                </div>
+                <div class="m-4">
+                    <popover-input size="small" @confirm="onConfirm">
+                        <template #default>
+                            <el-button> 调整大小 </el-button>
+                        </template>
+                    </popover-input>
+                </div>
+                <div class="m-4">
+                    <popover-input :limit="20" :show-limit="true" @confirm="onConfirm">
+                        <template #default>
+                            <el-button> 限制输入长度 </el-button>
+                        </template>
+                    </popover-input>
+                </div>
+                <div class="m-4">
+                    <popover-input value="默认值" @confirm="onConfirm">
+                        <template #default>
+                            <el-button> 默认值 </el-button>
+                        </template>
+                    </popover-input>
+                </div>
+            </div>
+        </el-card>
+    </div>
+</template>
+<script lang="ts" setup>
+const onConfirm = (value: string) => {
+    console.log(value)
+}
+</script>

admin/src/views/template/component/rich_text.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <el-card header="基础使用" shadow="none" class="!border-none">
+            <editor v-model="state.value1" height="500px" />
+        </el-card>
+        <el-card header="简洁模式" shadow="none" class="!border-none mt-4">
+            <editor v-model="state.value2" height="500px" mode="simple" />
+        </el-card>
+    </div>
+</template>
+<script lang="ts" setup>
+const state = reactive({
+    value1: '',
+    value2: ''
+})
+</script>

admin/src/views/template/component/upload.vue

@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <el-card header="基础使用" shadow="none" class="!border-none">
+            <div class="flex flex-wrap">
+                <div class="m-4">
+                    <upload
+                        @change="onChange"
+                        @success="onSuccess"
+                        @error="onError"
+                        :show-progress="true"
+                    >
+                        <el-button type="primary">上传图片</el-button>
+                    </upload>
+                </div>
+                <div class="m-4">
+                    <upload
+                        type="video"
+                        @change="onChange"
+                        @success="onSuccess"
+                        @error="onError"
+                        :show-progress="true"
+                    >
+                        <el-button type="primary">上传视频</el-button>
+                    </upload>
+                </div>
+                <div class="m-4">
+                    <upload
+                        :multiple="false"
+                        @change="onChange"
+                        @success="onSuccess"
+                        @error="onError"
+                        :show-progress="true"
+                    >
+                        <el-button type="primary">取消多选</el-button>
+                    </upload>
+                </div>
+                <div class="m-4">
+                    <upload
+                        :limit="2"
+                        @change="onChange"
+                        @success="onSuccess"
+                        @error="onError"
+                        :show-progress="true"
+                    >
+                        <el-button type="primary">一次最多上传2张</el-button>
+                    </upload>
+                </div>
+            </div>
+        </el-card>
+    </div>
+</template>
+<script lang="ts" setup>
+import Upload from '@/components/upload/index.vue'
+const onChange = (file: any) => {
+    console.log('上传文件的状态发生改变', file)
+}
+
+const onSuccess = (file: any) => {
+    console.log('上传文件成功', file)
+}
+
+const onError = (file: any) => {
+    console.log('上传文件失败', file)
+}
+</script>

pc/layouts/components/header/information.vue

@@ -11,7 +11,7 @@
                 <el-dropdown-menu>
                     <NuxtLink
                         :to="{
-                            path: '/information/default',
+                            path: '/information/search',
                             query: {
                                 cid: item.id,
                                 name: item.name

pc/layouts/components/header/navbar.vue

@@ -19,9 +19,6 @@
                     <template v-if="item.component == 'mobile'">
                         <Mobile :menu-item="item" />
                     </template>
-                    <template v-if="item.component == 'admin'">
-                        <Admin :menu-item="item" />
-                    </template>
                 </div>
             </template>
         </Menu>

pc/pages/information/[source]/index.vue

@@ -6,42 +6,44 @@
             </span>
             <span v-else>{{ route.query.name || getSourceText }}</span>
         </div>
-        <div
+        <div v-loading="pending">
-            class="bg-white px-5 rounded overflow-hidden"
+            <div
-            v-if="data.lists.length"
+                class="bg-white px-5 rounded overflow-hidden"
-        >
+                v-if="data.lists.length"
-            <div class="pt-5 text-tx-secondary" v-if="route.query.keywords">
+            >
-                为您找到相关结果 {{ data.count }}个
+                <div class="pt-5 text-tx-secondary" v-if="route.query.keywords">
+                    为您找到相关结果 {{ data.count }}个
+                </div>
+                <InformationItems
+                    v-for="item in data.lists"
+                    :key="item.id"
+                    :id="item.id"
+                    :title="item.title"
+                    :desc="item.desc"
+                    :click="item.click"
+                    :author="item.author"
+                    :create-time="item.create_time"
+                    :image="item.image"
+                    :only-title="false"
+                />
+                <div class="py-4 flex justify-end">
+                    <el-pagination
+                        v-model:current-page="params.page_no"
+                        :total="data.count"
+                        :page-size="params.page_size"
+                        hide-on-single-page
+                        @current-change="refresh()"
+                    />
+                </div>
             </div>
-            <InformationItems
+            <div v-else class="flex-1 flex justify-center items-center">
-                v-for="item in data.lists"
+                <el-empty
-                :key="item.id"
+                    :image="empty_news"
-                :id="item.id"
+                    description="暂无资讯"
-                :title="item.title"
+                    :image-size="250"
-                :desc="item.desc"
-                :click="item.click"
-                :author="item.author"
-                :create-time="item.create_time"
-                :image="item.image"
-                :only-title="false"
-            />
-            <div class="py-4 flex justify-end">
-                <el-pagination
-                    v-model:current-page="params.page_no"
-                    :total="data.count"
-                    :page-size="params.page_size"
-                    hide-on-single-page
-                    @current-change="refresh()"
                 />
             </div>
         </div>
-        <div v-else class="flex-1 flex justify-center items-center">
-            <el-empty
-                :image="empty_news"
-                description="暂无资讯"
-                :image-size="250"
-            />
-        </div>
     </div>
 </template>
 <script lang="ts" setup>
@@ -49,16 +51,24 @@ import { ElPagination, ElEmpty } from 'element-plus'
 import empty_news from '@/assets/images/empty_news.png'
 import { getArticleList } from '~~/api/news'
 const route = useRoute()
+const sort = computed(() =>
+    route.params.source == 'search' ? '' : route.params.source
+)
+const keyword = computed(() => route.query.keywords || '')
+const cid = computed(() => route.query.cid || '')
 const params = reactive({
     page_no: 1,
     page_size: 15,
-    keyword: route.query.keywords,
+    keyword,
-    cid: route.query.cid || '',
+    cid,
-    sort: route.params.source
+    sort
-})
-const { data, refresh } = await useAsyncData(() => getArticleList(params), {
-    initialCache: false
 })
+const { data, refresh, pending } = await useAsyncData(
+    () => getArticleList(params),
+    {
+        initialCache: false
+    }
+)
 
 const getSourceText = computed(() => {
     switch (route.params.source) {
@@ -71,12 +81,8 @@ const getSourceText = computed(() => {
     }
 })
 
-watch(
+watch([() => route.query.keywords, () => route.query.cid], () => {
-    () => route.query.keywords,
+    refresh()
-    (value) => {
+})
-        params.keyword = value as string
-        refresh()
-    }
-)
 </script>
 <style lang="scss" scoped></style>