update

src/components/Filter/index.vue

@@ -0,0 +1,104 @@
+<script setup>
+import {defineModel} from 'vue';
+
+const FROM_TYPE = {
+    INPUT: 'input',
+    SELECT: 'select',
+    DATETIME: 'datetime',
+    CUSTOM: 'custom',
+}
+const emits = defineEmits(['search']);
+const {config} = defineProps({
+    config: {
+        type: Array,
+        default: []
+    }
+});
+const from = defineModel('from');
+
+const reset = () => {
+    Object.keys(from.value).forEach(key => {
+        from.value[key] = null;
+    });
+    emits('search');
+}
+</script>
+
+<template>
+    <div class="title">
+        查询任务
+    </div>
+
+    <div class="flex">
+        <div class="flex-grow">
+            <a-form class="AFORM">
+                <div class="grid grid-cols-3">
+                    <template v-for="(item, index) in config" :key="index">
+                        <a-form-item :label="item.label">
+                            <template v-if="item.type === FROM_TYPE.INPUT">
+                                <a-input
+                                    class="w-full"
+                                    v-model:model-value="from[item.key]"
+                                    :placeholder="item.placeholder">
+                                </a-input>
+                            </template>
+
+                            <template v-if="item.type === FROM_TYPE.SELECT">
+                                <a-select
+                                    class="w-full"
+                                    v-model:model-value="from[item.key]"
+                                    :options="item.options"
+                                    :placeholder="item.placeholder">
+                                </a-select>
+                            </template>
+
+                            <template v-if="item.type === FROM_TYPE.DATETIME">
+                                <a-range-picker
+                                    class="w-full"
+                                    @change="(v) => from[item.key] = `${v[0]}~${v[1]}`">
+                                </a-range-picker>
+                            </template>
+
+                            <template v-if="item.type === FROM_TYPE.CUSTOM">
+                                <slot :name="item.slotName" :scope="item"></slot>
+                            </template>
+                        </a-form-item>
+                    </template>
+                </div>
+            </a-form>
+        </div>
+
+        <a-divider direction="vertical" margin="20px"></a-divider>
+
+        <div class="flex flex-col gap-[16px]">
+            <a-button @click="emits('search')" type="primary">
+                <template #icon>
+                    <icon-search/>
+                </template>
+                查询
+            </a-button>
+            <a-button @click="reset">
+                <template #icon>
+                    <icon-refresh />
+                </template>
+                重置
+            </a-button>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.title {
+    color: rgb(29, 33, 41);
+    font-family: PingFang SC, serif;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 28px;
+    text-align: left;
+}
+.AFORM {
+    :deep(.arco-row) {
+        margin-bottom: 16px;
+    }
+}
+</style>

src/components/Filter/mock.js

@@ -0,0 +1,10 @@
+const config = [
+    {
+        key: 'keywords',
+        type: 'input',
+        label: '任务编号',
+        placeholder: '请输入集合编号'
+    },
+];
+
+export default config;

src/components/LayoutHeader/index.vue

@@ -5,7 +5,7 @@ const SystemStore = useSystemStore();
 </script>
 
 <template>
-    <div class="w-full h-full flex items-center px-[24px] box-border">
+    <div class="w-full h-full flex items-center px-[24px] box-border bg-white">
         <div class="title">
             代发平台-{{SystemStore.isRoot?'管理员':'商家'}}
         </div>

src/components/LayoutSider/index.vue

@@ -1,32 +1,31 @@
 <script setup>
 import {onMounted} from "vue";
-import mockRoutes from "./mock.js";
-import routesMap from "../../router/routes-map.js";
 import {toPath} from "../../utils/index.js";
+import {useSystemStore} from "../../pinia/SystemStore/index.js";
+
+const SystemStore = useSystemStore();
 
 onMounted(() => {
-    console.log(mockRoutes.map(v => ({
-        path: v.path,
-        name: v.name,
-        component: routesMap[v.component]
-    })))
 });
 
 const menuItemClick = (e) => {
     toPath(`/home${e}`);
 }
+//--main-bg-color
 </script>
 
 <template>
-    <a-menu @menu-item-click="menuItemClick">
-        <a-sub-menu v-for="item in mockRoutes" :key="item.name">
-            <template #icon>
-                <icon-apps></icon-apps>
-            </template>
-            <template #title>{{ item.title }}</template>
-            <a-menu-item v-for="k in item.children" :key="item.path + k.path">{{k.title}}</a-menu-item>
-        </a-sub-menu>
-    </a-menu>
+    <div class="w-full h-full box-border">
+        <a-menu @menu-item-click="menuItemClick">
+            <a-sub-menu v-for="item in SystemStore.RoutesTemp" :key="item.name">
+                <template #icon>
+                    <icon-apps></icon-apps>
+                </template>
+                <template #title>{{ item.title }}</template>
+                <a-menu-item v-for="k in item.children" :key="`/${item.path}/${k.path}`">{{ k.title }}</a-menu-item>
+            </a-sub-menu>
+        </a-menu>
+    </div>
 </template>
 
 <style lang="scss" scoped>

src/components/LayoutSider/mock.js

@@ -1,27 +0,0 @@
-const mockRoutes = [
-    {
-        path: 'task-center',
-        name: 'task-center',
-        title: '任务中心',
-        icon: '',
-        component: 'task-center',
-        children: [
-            {
-                path: 'reward-mission',
-                name: 'reward-mission',
-                title: '悬赏任务',
-                icon: '',
-                component: 'reward-mission',
-            },
-            {
-                path: 'appointed-task',
-                name: 'appointed-task',
-                title: '任务指派',
-                icon: '',
-                component: 'appointed-task',
-            }
-        ]
-    },
-];
-
-export default mockRoutes;

src/components/TooltipTag/index.vue

@@ -0,0 +1,31 @@
+<script setup>
+const {color, content} = defineProps({
+    color: {
+        type: String,
+        default: 'red',
+    },
+    content: {
+        type: String,
+        default: '内容',
+    }
+});
+</script>
+
+<template>
+    <a-tooltip :content="content">
+        <a-badge>
+            <template v-slot:content>
+                <icon-question-circle :style="{ verticalAlign: 'middle', color: 'rgb(var(--primary-6))' }"/>
+
+                <slot v-if="$slots.icon" name="icon"></slot>
+            </template>
+            <a-tag :color="color" class="cursor-pointer">
+                <slot></slot>
+            </a-tag>
+        </a-badge>
+    </a-tooltip>
+</template>
+
+<style scoped>
+
+</style>