papers ui init +vueuse +tailwindcss

back-ui/package.json

@@ -17,8 +17,9 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
+    "@tailwindcss/vite": "^4.1.13",
     "@vueup/vue-quill": "1.2.0",
-    "@vueuse/core": "13.3.0",
+    "@vueuse/core": "^13.3.0",
     "axios": "1.9.0",
     "clipboard": "2.0.11",
     "echarts": "5.6.0",
@@ -31,6 +32,7 @@
     "nprogress": "0.2.0",
     "pinia": "3.0.2",
     "splitpanes": "4.0.4",
+    "tailwindcss": "^4.1.13",
     "vue": "3.5.16",
     "vue-cropper": "1.1.1",
     "vue-router": "4.5.1",

back-ui/src/api/dz/papers.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+/// 科目列表
+export function getPaperSubjects(query) {
+    return request({
+        url: '/learn/teaching/subjects',
+        method: 'get',
+        params: query
+    })
+}
+
+/// 科目列表
+export function getPaperKnowledges(query) {
+    return request({
+        url: '/learn/teaching/knowledges',
+        method: 'get',
+        params: query
+    })
+}

back-ui/src/assets/styles/tailwind.css

@@ -0,0 +1,15 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+/* 没有使用base, 禁用了preflight, 否则会和若依自己的样式有冲突 */
+
+@theme {
+    --color-main: '#303030';
+    --color-content: '#606060';
+    --color-tips: '#909090';
+    --color-primary: var(--el-color-primary);
+    --color-warning: var(--el-color-warning);
+    --color-danger: var(--el-color-danger);
+    --color-success: var(--el-color-success);
+    --color-info: var(--el-color-info);
+}

back-ui/src/main.js

@@ -7,6 +7,7 @@ import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import locale from 'element-plus/es/locale/lang/zh-cn'
 
+import '@/assets/styles/tailwind.css'
 import '@/assets/styles/index.scss' // global css
 
 import App from './App'

back-ui/src/views/dz/papers/components/paper-by-hand.vue

@@ -0,0 +1,19 @@
+<template>
+    <el-tabs type="border-card">
+        <el-tab-pane label="全量组卷">
+            <paper-hand-full />
+        </el-tab-pane>
+        <el-tab-pane label="定向组卷">
+            <paper-hand-exact />
+        </el-tab-pane>
+    </el-tabs>
+</template>
+
+<script setup name="PaperByHand">
+import PaperHandFull from "@/views/dz/papers/components/paper-hand-full.vue";
+import PaperHandExact from "@/views/dz/papers/components/paper-hand-exact.vue";
+</script>
+
+<style scoped>
+
+</style>

back-ui/src/views/dz/papers/components/paper-by-intelligent.vue

@@ -0,0 +1,19 @@
+<template>
+    <el-tabs type="border-card">
+        <el-tab-pane label="全量组卷">
+            <paper-intelligent-full />
+        </el-tab-pane>
+        <el-tab-pane label="定向组卷">
+            <paper-intelligent-exact />
+        </el-tab-pane>
+    </el-tabs>
+</template>
+
+<script setup name="PaperByIntelligent">
+import PaperIntelligentFull from "@/views/dz/papers/components/paper-intelligent-full.vue";
+import PaperIntelligentExact from "@/views/dz/papers/components/paper-intelligent-exact.vue";
+</script>
+
+<style scoped>
+
+</style>

back-ui/src/views/dz/papers/components/paper-exact-conditions.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+    name: "paper-exact-conditions"
+}
+</script>
+
+<style scoped>
+
+</style>

back-ui/src/views/dz/papers/components/paper-full-conditions.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="flex flex-row items-center gap-2">
+        <span class="break-keep text-sm font-bold">科目：</span>
+        <el-radio-group v-model="subjectId">
+            <el-radio-button v-for="s in subjects" :label="s.subjectName" :value="s.subjectId"/>
+        </el-radio-group>
+    </div>
+</template>
+
+<script setup name="PaperFullConditions">
+import {useInjectPaperFullCondition} from "@/views/dz/papers/hooks/usePaperFullCondition.js";
+
+const {subjectId, subjects} = useInjectPaperFullCondition()
+</script>
+
+<style scoped>
+
+</style>

back-ui/src/views/dz/papers/components/paper-hand-exact.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+    name: "paper-hand-exact"
+}
+</script>
+
+<style scoped>
+
+</style>

back-ui/src/views/dz/papers/components/paper-hand-full.vue

@@ -0,0 +1,21 @@
+<template>
+    <paper-full-conditions />
+    <el-container class="mt-5">
+        <el-aside width="350px">
+            <paper-knowledge-tree/>
+        </el-aside>
+        <el-main></el-main>
+    </el-container>
+</template>
+
+<script setup name="PaperHandFull">
+import PaperFullConditions from "@/views/dz/papers/components/paper-full-conditions.vue";
+import {useProvidePaperFullCondition} from "@/views/dz/papers/hooks/usePaperFullCondition.js";
+import PaperKnowledgeTree from "@/views/dz/papers/components/paper-knowledge-tree.vue";
+
+const {subjectId, knowledgeId} = useProvidePaperFullCondition()
+</script>
+
+<style scoped>
+
+</style>

back-ui/src/views/dz/papers/components/paper-intelligent-exact.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+    name: "paper-intelligent-exact"
+}
+</script>
+
+<style scoped>
+
+</style>

back-ui/src/views/dz/papers/components/paper-intelligent-form.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+    name: "paper-intelligent-form"
+}
+</script>
+
+<style scoped>
+
+</style>

back-ui/src/views/dz/papers/components/paper-intelligent-full.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+    name: "paper-intelligent-full"
+}
+</script>
+
+<style scoped>
+
+</style>

back-ui/src/views/dz/papers/components/paper-knowledge-tree.vue

@@ -0,0 +1,37 @@
+<template>
+    <el-input v-model="keyword" placeholder="请输入知识点名称" clearable prefix-icon="Search"
+              style="margin-bottom: 20px"/>
+    <el-tree :data="knowledges" :props="{ label: 'name', children: 'children' }" :expand-on-click-node="false"
+             :filter-node-method="filterNode" node-key="id" highlight-current default-expand-all
+             :show-checkbox="allowMultiple" @node-click="handleNodeClick" @check="handleNodeCheck"/>
+</template>
+
+<script setup name="PaperKnowledgeTree">
+import {useInjectPaperFullCondition} from "@/views/dz/papers/hooks/usePaperFullCondition.js";
+
+const props = defineProps({
+    allowMultiple: Boolean
+})
+
+const keyword = ref('')
+const {knowledgeId, knowledges, knowledgeCheckNodes} = useInjectPaperFullCondition()
+
+const filterNode = function (value, data) {
+    if (!value) return true
+    return data.name.indexOf(value) !== -1
+}
+
+const handleNodeClick = function (data) {
+    knowledgeId.value = data.id
+}
+
+const handleNodeCheck = function (data, {checkedNodes}) {
+    // 多选时，只保留叶子节点
+    knowledgeCheckNodes.value = checkedNodes.filter(k => !!!k.children?.length)
+    console.log('knowledgeCheckNodes', knowledgeCheckNodes.value)
+}
+</script>
+
+<style scoped>
+
+</style>

back-ui/src/views/dz/papers/detail.vue

@@ -0,0 +1,10 @@
+<template>
+
+</template>
+
+<script setup name="PaperDetail">
+</script>
+
+<style scoped>
+
+</style>

back-ui/src/views/dz/papers/hooks/usePaperFullCondition.js

@@ -0,0 +1,38 @@
+import {injectLocal, provideLocal} from "@vueuse/core";
+import {getPaperKnowledges, getPaperSubjects} from "@/api/dz/papers.js";
+import {watch} from "vue";
+
+const key = Symbol('PaperFullCondition')
+
+export const useProvidePaperFullCondition = function () {
+    const subjects = ref([])
+    const subjectId = ref('')
+    const knowledges = ref([])
+    const knowledgeId = ref('') // 单选
+    const knowledgeCheckNodes = ref([]) // 多选的节点
+    const knowledgeIds = computed(() => knowledgeCheckNodes.value.map(k => k.id))
+
+    const payload = {subjectId, subjects, knowledgeId, knowledges, knowledgeCheckNodes, knowledgeIds}
+    provideLocal(key, payload)
+
+    onMounted(async () => {
+        const res = await getPaperSubjects()
+        subjects.value = res.data
+        // 给一个默认值
+        if (res.data.length) subjectId.value = res.data[0].subjectId
+    })
+    watch(subjectId, async () => {
+        // 先清空以前的知识点
+        knowledgeId.value = '' // 单选的情况
+        knowledgeCheckNodes.value = [] // 多选的情况
+
+        // 获取知识点数据
+        const res = await getPaperKnowledges({subjectId: toValue(subjectId)})
+        knowledges.value = res.data
+    })
+    return payload
+}
+
+export const useInjectPaperFullCondition = function () {
+    return injectLocal(key)
+}

back-ui/src/views/dz/papers/index.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="app-container">
+        <el-tabs>
+            <el-tab-pane label="手动组卷">
+                <paper-by-hand />
+            </el-tab-pane>
+            <el-tab-pane label="智能组卷">
+                <paper-by-intelligent />
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script setup name="PaperIndex">
+import PaperByHand from "@/views/dz/papers/components/paper-by-hand.vue";
+import PaperByIntelligent from "@/views/dz/papers/components/paper-by-intelligent.vue";
+</script>
+
+<style scoped>
+
+</style>

back-ui/src/views/dz/papers/list.vue

@@ -0,0 +1,10 @@
+<template>
+
+</template>
+
+<script setup name="PaperList">
+</script>
+
+<style scoped>
+
+</style>

back-ui/tailwind.config.cjs

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+/* 这个文件在这个项目里没有实际作用，只是为了让tailwind的提示起作用，真实起作用的是assets/style/tailwind.css，注意与它保持一致 */
+module.exports = {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}'
+  ]
+}
+

back-ui/vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig, loadEnv } from 'vite'
 import path from 'path'
 import createVitePlugins from './vite/plugins'
+import tailwindcss from '@tailwindcss/vite'
 
 const baseUrl = 'https://dz.shineking.top/prod-api' // 后端接口
 
@@ -13,7 +14,7 @@ export default defineConfig(({ mode, command }) => {
     // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
     // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
     base: VITE_APP_ENV === 'production' ? '/admin/' : '/admin/',
-    plugins: createVitePlugins(env, command === 'build'),
+    plugins: [createVitePlugins(env, command === 'build'), tailwindcss()],
     resolve: {
       // https://cn.vitejs.dev/config/#resolve-alias
       alias: {