├── .npmrc
├── .stylelintignore
├── src
    ├── plugins
    │   ├── shepherd.ts
    │   ├── avue.ts
    │   ├── xlsx.ts
    │   └── element-plus.ts
    ├── utils
    │   ├── cookie.ts
    │   ├── validate.ts
    │   ├── time.ts
    │   ├── ajax.ts
    │   ├── storage.ts
    │   └── helper.ts
    ├── assets
    │   └── images
    │   │   ├── 404.png
    │   │   ├── logo.png
    │   │   ├── logout.png
    │   │   └── 404-cloud.png
    ├── store
    │   ├── index.ts
    │   └── modules
    │   │   ├── user.ts
    │   │   ├── permission.ts
    │   │   └── app.ts
    ├── constant
    │   └── role.ts
    ├── styles
    │   ├── _mixins.scss
    │   ├── variables.ts
    │   ├── _variables.scss
    │   └── nprogress.scss
    ├── layout
    │   ├── components
    │   │   ├── index.ts
    │   │   ├── AppMain.vue
    │   │   ├── Sidebar
    │   │   │   ├── SidebarItemLink.vue
    │   │   │   ├── index.vue
    │   │   │   └── SidebarItem.vue
    │   │   └── Navbar.vue
    │   └── Layout.vue
    ├── views
    │   ├── data
    │   │   ├── Article.vue
    │   │   ├── Resource.vue
    │   │   ├── ProxyConfig.vue
    │   │   ├── Category.vue
    │   │   ├── WebhookLog.vue
    │   │   ├── CustomQuery.vue
    │   │   ├── Hook.vue
    │   │   └── Feed.vue
    │   ├── admin
    │   │   ├── User.vue
    │   │   ├── DailyCount.vue
    │   │   └── System.vue
    │   ├── Docs.vue
    │   ├── user
    │   │   └── Personal.vue
    │   ├── About.vue
    │   ├── Home.vue
    │   ├── Page404.vue
    │   ├── Register.vue
    │   └── Login.vue
    ├── App.vue
    ├── components
    │   ├── index.ts
    │   ├── Hamburger.vue
    │   ├── Breadcrumb.vue
    │   ├── CrudList.vue
    │   └── CrudForm.vue
    ├── vite-env.d.ts
    ├── config
    │   └── env.ts
    ├── hooks
    │   ├── use-id-transformer.ts
    │   ├── use-statistics.ts
    │   └── use-crud-ajax.ts
    ├── api
    │   └── index.ts
    ├── main.ts
    ├── permission.ts
    ├── interfaces
    │   └── avue.d.ts
    └── router
    │   └── index.ts
├── commitlint.config.ts
├── public
    └── favicon.ico
├── .husky
    ├── pre-commit
    └── commit-msg
├── .vscode
    └── extensions.json
├── eslint.config.js
├── auto-imports.d.ts
├── tsconfig.node.json
├── .github
    ├── mergify.yml
    ├── workflows
    │   ├── todo.yml
    │   ├── test.yml
    │   ├── release.yml
    │   └── deploy.yml
    ├── dependabot.yml
    ├── FUNDING.yml
    └── ISSUE_TEMPLATE
    │   ├── feature_request.yml
    │   ├── question.yml
    │   └── bug_report.yml
├── .gitignore
├── vercel.json
├── .editorconfig
├── .env
├── .stylelintrc.js
├── .releaserc.js
├── api
    └── index.ts
├── tsconfig.json
├── CODE_OF_CONDUCT.md
├── components.d.ts
├── CONTRIBUTING.md
├── index.html
├── README.md
├── vite.config.ts
└── package.json


/.npmrc:
--------------------------------------------------------------------------------
1 | strict-peer-dependencies=false
2 | package-lock=true
3 | 


--------------------------------------------------------------------------------
/.stylelintignore:
--------------------------------------------------------------------------------
1 | /dist/
2 | /test/
3 | *.min.css
4 | *.js
5 | *.ts
6 | _*


--------------------------------------------------------------------------------
/src/plugins/shepherd.ts:
--------------------------------------------------------------------------------
1 | import 'shepherd.js/dist/css/shepherd.css'
2 | 
3 | 


--------------------------------------------------------------------------------
/src/utils/cookie.ts:
--------------------------------------------------------------------------------
1 | // import { useCookies } from '@vueuse/integrations/useCookies'
2 | 


--------------------------------------------------------------------------------
/commitlint.config.ts:
--------------------------------------------------------------------------------
1 | // commitlint.config.ts
2 | export default {
3 |     extends: ['cmyr'],
4 | }
5 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaoMeiYouRen/rss-impact-web/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | npx --no-install lint-staged
5 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/assets/images/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaoMeiYouRen/rss-impact-web/HEAD/src/assets/images/404.png


--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | npx --no-install commitlint --edit "$1"
5 | 


--------------------------------------------------------------------------------
/src/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaoMeiYouRen/rss-impact-web/HEAD/src/assets/images/logo.png


--------------------------------------------------------------------------------
/src/assets/images/logout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaoMeiYouRen/rss-impact-web/HEAD/src/assets/images/logout.png


--------------------------------------------------------------------------------
/src/assets/images/404-cloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaoMeiYouRen/rss-impact-web/HEAD/src/assets/images/404-cloud.png


--------------------------------------------------------------------------------
/src/plugins/avue.ts:
--------------------------------------------------------------------------------
1 | import Avue from '@smallwei/avue'
2 | import '@smallwei/avue/lib/index.css'
3 | 
4 | export default Avue
5 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
1 | import { createPinia } from 'pinia'
2 | 
3 | const store = createPinia()
4 | 
5 | export default store
6 | 


--------------------------------------------------------------------------------
/src/constant/role.ts:
--------------------------------------------------------------------------------
1 | export enum Role {
2 |     user = 'user',
3 |     admin = 'admin',
4 | }
5 | 
6 | export type RoleType = 'user' | 'admin'
7 | 
8 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'eslint/config'
2 | import cmyr from 'eslint-config-cmyr/vue'
3 | export default defineConfig([cmyr,
4 | ])
5 | 


--------------------------------------------------------------------------------
/src/styles/_mixins.scss:
--------------------------------------------------------------------------------
1 | /* Mixins */
2 | @mixin clearfix {
3 |   &:after {
4 |     content: "";
5 |     display: table;
6 |     clear: both;
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/plugins/xlsx.ts:
--------------------------------------------------------------------------------
1 | import * as XLSX from 'xlsx'
2 | 
3 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
4 | // @ts-ignore
5 | window.XLSX = XLSX
6 | 


--------------------------------------------------------------------------------
/src/layout/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as AppMain } from './AppMain.vue'
2 | export { default as Navbar } from './Navbar.vue'
3 | export { default as Sidebar } from './Sidebar/index.vue'
4 | 


--------------------------------------------------------------------------------
/src/views/data/Article.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <CrudList
 3 |         model="article"
 4 |     />
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 | </script>
 9 | 
10 | <style lang="scss" scoped>
11 | </style>
12 | 


--------------------------------------------------------------------------------
/src/views/admin/User.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <CrudList
 3 |         model="user"
 4 |     />
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 | 
 9 | </script>
10 | 
11 | <style lang="scss" scoped>
12 | </style>
13 | 


--------------------------------------------------------------------------------
/src/views/data/Resource.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <CrudList
 3 |         model="resource"
 4 |     />
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 | </script>
 9 | 
10 | <style lang="scss" scoped>
11 | </style>
12 | 


--------------------------------------------------------------------------------
/src/views/data/ProxyConfig.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <CrudList
 3 |         model="proxy-config"
 4 |     />
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 | </script>
 9 | 
10 | <style lang="scss" scoped>
11 | </style>
12 | 


--------------------------------------------------------------------------------
/src/plugins/element-plus.ts:
--------------------------------------------------------------------------------
1 | import ElementPlus from 'element-plus'
2 | import 'element-plus/dist/index.css'
3 | import * as ElementPlusIconsVue from '@element-plus/icons-vue'
4 | 
5 | export {
6 |     ElementPlus,
7 |     ElementPlusIconsVue,
8 | }
9 | 


--------------------------------------------------------------------------------
/auto-imports.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /* prettier-ignore */
 3 | // @ts-nocheck
 4 | // noinspection JSUnusedGlobalSymbols
 5 | // Generated by unplugin-auto-import
 6 | // biome-ignore lint: disable
 7 | export {}
 8 | declare global {
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "composite": true,
 4 |         "module": "ESNext",
 5 |         "moduleResolution": "bundler",
 6 |         "allowSyntheticDefaultImports": true
 7 |     },
 8 |     "include": [
 9 |         "vite.config.ts"
10 |     ]
11 | }


--------------------------------------------------------------------------------
/.github/mergify.yml:
--------------------------------------------------------------------------------
 1 | pull_request_rules:
 2 |   - name: automatic merge for Dependabot pull requests
 3 |     conditions:
 4 |       - check-success=Test
 5 |       - author~=^dependabot(|-preview)\[bot\]$
 6 |       - label=dependencies
 7 |     actions:
 8 |       merge:
 9 |         method: rebase
10 | 


--------------------------------------------------------------------------------
/src/styles/variables.ts:
--------------------------------------------------------------------------------
 1 | export interface IScssVariables {
 2 |     menuBg: string
 3 |     menuText: string
 4 |     menuActiveText: string
 5 | }
 6 | 
 7 | export const variables: IScssVariables = {
 8 |     menuBg: '#304156',
 9 |     menuText: '#bfcbd9',
10 |     menuActiveText: '#409EFF',
11 | }
12 | 
13 | export default variables
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | .vercel
27 | 
28 | sonda-report.html
29 | 


--------------------------------------------------------------------------------
/src/views/data/Category.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <CrudList
 3 |         model="category"
 4 |         :post-get="postGet"
 5 |         :pre-save="preSave"
 6 |         :pre-update="preUpdate"
 7 |     />
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 | import { useIdTransformer } from '@/hooks/use-id-transformer'
12 | 
13 | const { postGet, preSave, preUpdate } = useIdTransformer(['feeds'])
14 | </script>
15 | 
16 | <style lang="scss" scoped>
17 | </style>
18 | 


--------------------------------------------------------------------------------
/src/views/data/WebhookLog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <CrudList
 3 |         model="webhook-log"
 4 |         :post-get="postGet"
 5 |         :pre-save="preSave"
 6 |         :pre-update="preUpdate"
 7 |     />
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 | import { useIdTransformer } from '@/hooks/use-id-transformer'
12 | const { postGet, preSave, preUpdate } = useIdTransformer(['articles'])
13 | </script>
14 | 
15 | <style lang="scss" scoped>
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/views/Docs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="docs">
 3 |         <iframe
 4 |             id="about"
 5 |             src="https://rss-docs.cmyr.dev/"
 6 |             height="100%"
 7 |             width="100%"
 8 |             frameborder="0"
 9 |             sandbox="allow-forms allow-same-origin allow-scripts"
10 |         />
11 |     </div>
12 | </template>
13 | 
14 | <style lang="scss" scoped>
15 | .docs {
16 |     height: calc(100vh - 90px);
17 | }
18 | </style>
19 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "framework": "vite",
 3 |     "rewrites": [
 4 |         {
 5 |             "source": "/api/(.*)",
 6 |             "destination": "/api"
 7 |         },
 8 |         {
 9 |             "source": "/(.*)",
10 |             "destination": "/index.html"
11 |         }
12 |     ],
13 |     "outputDirectory": "dist",
14 |     "functions": {
15 |         "api/*.ts": {
16 |             "memory": 128,
17 |             "maxDuration": 25
18 |         }
19 |     }
20 | }


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <router-view />
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 | import { onMounted } from 'vue'
 9 | import { useAppStore } from './store/modules/app'
10 | import { api } from '@/api'
11 | 
12 | const state = useAppStore()
13 | 
14 | onMounted(async () => {
15 |     const meta = await api.api.authMeta()
16 |     state.setAuthMeta(meta)
17 | })
18 | 
19 | </script>
20 | 
21 | <style lang="scss">
22 | #app {
23 | 
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
 1 | // import Vue from 'vue'
 2 | // import { upperFirst, camelCase } from 'lodash-es'
 3 | import Breadcrumb from './Breadcrumb.vue'
 4 | import CrudList from './CrudList.vue'
 5 | // import DataPanel from './DataPanel.vue'
 6 | import Hamburger from './Hamburger.vue'
 7 | import CrudForm from './CrudForm.vue'
 8 | 
 9 | const components = {
10 |     Breadcrumb,
11 |     CrudList,
12 |     // DataPanel,
13 |     Hamburger,
14 |     CrudForm,
15 | }
16 | 
17 | export default components
18 | 
19 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | #启用编辑器配置
 3 | root = true
 4 | # 对所有文件生效
 5 | [*]
 6 | #编码方式
 7 | charset = utf-8
 8 | #缩进格式
 9 | indent_style = space
10 | indent_size = 4
11 | #换行符
12 | end_of_line = lf
13 | #插入最终换行符
14 | insert_final_newline = true
15 | #修剪尾随空格
16 | trim_trailing_whitespace = true
17 | # 对后缀名为 md 的文件生效
18 | [*.md]
19 | trim_trailing_whitespace = false
20 | [*.sh]
21 | #换行符
22 | end_of_line = lf
23 | [package.json]
24 | indent_size = 2
25 | insert_final_newline = false
26 | [*.yml]
27 | indent_size = 2
28 | 


--------------------------------------------------------------------------------
/.github/workflows/todo.yml:
--------------------------------------------------------------------------------
 1 | name: Run TODO to Issue
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - master
 6 | # 仅取消针对当前工作流正在进行的作业或运行
 7 | concurrency:
 8 |   group: ${{ github.workflow }}-${{ github.ref }}
 9 |   cancel-in-progress: true
10 | 
11 | jobs:
12 |   build:
13 |     permissions:
14 |       issues: write
15 |       contents: read
16 |     timeout-minutes: 10
17 |     runs-on: "ubuntu-latest"
18 |     steps:
19 |       - uses: "actions/checkout@v6"
20 |       - name: "TODO to Issue"
21 |         uses: "alstr/todo-to-issue-action@v5"
22 | 


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
 1 | # API基础路径
 2 | VITE_API_BASE_URL='/api'
 3 | VITE_WITH_CREDENTIALS=true
 4 | # API 基础路径，用于 vercel edge function 代理请求，以解决跨域问题
 5 | # 注意，和 VITE_API_BASE_URL 不是一个概念，VITE_API_BASE_URL 是 vite 配置，API_BASE_URL 是 edge function 配置
 6 | # API_BASE_URL='https://example.vercel.app'
 7 | 
 8 | # Sentry dsn 路径
 9 | VITE_SENTRY_DSN=''
10 | 
11 | # 百度统计 ID
12 | VITE_BAIDU_STATISTICS=''
13 | # 启用的域名，如果不匹配将不会载入 Sentry 和 统计代码
14 | VITE_DOMAIN=''
15 | 
16 | # 禁用 Vercel node.js helpers
17 | NODEJS_HELPERS=0
18 | 
19 | VITE_TIMEOUT=30000
20 | 
21 | # petercat.ai token，用于文档 AI 的调用
22 | VITE_PETERCAT_AI_TOKEN=
23 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 |   - package-ecosystem: npm
 4 |     directory: /
 5 |     open-pull-requests-limit: 20
 6 |     schedule:
 7 |       time: "04:00"
 8 |       interval: "monthly"
 9 |       timezone: Asia/Shanghai
10 |     ignore:
11 |       - dependency-name: semantic-release
12 |       - dependency-name: "sass"
13 |         versions:
14 |           - ">= 2.0.0"
15 |   - package-ecosystem: github-actions
16 |     directory: /
17 |     open-pull-requests-limit: 20
18 |     schedule:
19 |       interval: "monthly"
20 |       time: "04:00"
21 |       timezone: Asia/Shanghai
22 | 


--------------------------------------------------------------------------------
/src/views/data/CustomQuery.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <CrudList
 3 |         model="custom-query"
 4 |         :post-get="postGet"
 5 |         :pre-save="customPreSave"
 6 |         :pre-update="customPreSave"
 7 |     />
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 | import { CustomQuery } from '@/api/api'
12 | import { useIdTransformer } from '@/hooks/use-id-transformer'
13 | const { postGet, preSave } = useIdTransformer(['categories', 'feeds'])
14 | 
15 | const customPreSave = (data: CustomQuery) => {
16 |     data = preSave(data)
17 |     return data
18 | }
19 | 
20 | </script>
21 | 
22 | <style lang="scss" scoped>
23 | </style>
24 | 


--------------------------------------------------------------------------------
/src/utils/validate.ts:
--------------------------------------------------------------------------------
 1 | export const isEmpty = (str: string): boolean => !str || str.trim().length === 0
 2 | 
 3 | export const isValidUsername = (str: string): boolean => isEmpty(str)
 4 | 
 5 | export const isExternal = (path: string): boolean => /^(https?:|mailto:|tel:)/.test(path)
 6 | 
 7 | export const isEmail = (str: string): boolean => /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(str)
 8 | 
 9 | export function baseValidatePassword(value: string): Error | null {
10 |     if (isEmpty(value)) {
11 |         return new Error('请输入密码')
12 |     }
13 |     if (value.length < 6) {
14 |         return new Error('密码不得短于6位')
15 |     }
16 |     return null
17 | }
18 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: Test
 2 | on:
 3 |   push:
 4 |   pull_request:
 5 |   workflow_dispatch:
 6 | jobs:
 7 |   test:
 8 |     name: Test
 9 |     runs-on: ubuntu-latest
10 |     timeout-minutes: 10
11 |     steps:
12 |       - uses: actions/checkout@v6
13 |       - name: Setup pnpm
14 |         uses: pnpm/action-setup@v4
15 |         with:
16 |           version: "latest"
17 |       - name: Setup Node.js@lts environment
18 |         uses: actions/setup-node@v6
19 |         with:
20 |           node-version: "lts/*"
21 |           cache: "pnpm"
22 |       - run: pnpm i --frozen-lockfile
23 |       - run: pnpm run lint
24 |       - run: pnpm run lint:css
25 |       - run: pnpm run build
26 | 


--------------------------------------------------------------------------------
/.stylelintrc.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('stylelint').Config} */
 2 | export default {
 3 |     extends: ['stylelint-config-cmyr'],
 4 |     rules: {
 5 |         'at-rule-no-unknown': null,
 6 |         'no-empty-source': null,
 7 |         'font-family-no-missing-generic-family-keyword': null,
 8 |         'no-descending-specificity': null,
 9 |         'length-zero-no-unit': null,
10 |         'block-no-empty': null,
11 |         'lightness-notation': null,
12 |         'media-query-no-invalid': null,
13 |         'selector-anb-no-unmatchable': null,
14 |         'selector-class-pattern': null,
15 |         'keyframes-name-pattern': null,
16 |         'no-invalid-position-declaration': null,
17 |     },
18 | }
19 | 


--------------------------------------------------------------------------------
/src/utils/time.ts:
--------------------------------------------------------------------------------
 1 | import dayjs from 'dayjs'
 2 | import utc from 'dayjs/plugin/utc'
 3 | import timezone from 'dayjs/plugin/timezone'
 4 | dayjs.extend(utc)
 5 | dayjs.extend(timezone)
 6 | 
 7 | /**
 8 |  * 格式化时间
 9 |  *
10 |  * @author CaoMeiYouRen
11 |  * @export
12 |  * @param {(number | string | Date)} [date=Date.now()]
13 |  * @param {string} [pattern='YYYY-MM-DD HH:mm:ss.SSS']
14 |  * @returns
15 |  */
16 | export function timeFormat(date: number | string | Date = Date.now(), pattern: string = 'YYYY-MM-DD HH:mm:ss.SSS') {
17 |     if (typeof date === 'number' && date.toString().length === 10) {
18 |         if (date < 1e10) {
19 |             date *= 1000
20 |         }
21 |     }
22 |     return dayjs(date).tz().format(pattern)
23 | }
24 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="vite/client" />
 2 | 
 3 | declare module '*.vue' {
 4 |     import type { DefineComponent } from 'vue'
 5 |     const component: DefineComponent<{}, {}, any>
 6 |     export default component
 7 | }
 8 | 
 9 | interface ImportMetaEnv {
10 |     // 环境变量
11 |     readonly VITE_API_BASE_URL: string
12 |     readonly VITE_WITH_CREDENTIALS: string
13 |     readonly VITE_SENTRY_DSN: string
14 |     readonly VITE_BAIDU_STATISTICS: string
15 |     readonly VITE_DOMAIN: string
16 |     readonly VITE_GIT_HASH: string
17 |     readonly VITE_GIT_DATE: string
18 |     readonly VITE_TIMEOUT: string
19 |     readonly VITE_PETERCAT_AI_TOKEN: string
20 | }
21 | 
22 | interface ImportMeta {
23 |     readonly env: ImportMetaEnv
24 | }
25 | 


--------------------------------------------------------------------------------
/src/layout/components/AppMain.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <section class="app-main">
 3 |         <router-view v-slot="{Component}">
 4 |             <transition
 5 |                 name="fade-transform"
 6 |                 mode="out-in"
 7 |             >
 8 |                 <keep-alive :exclude="/404/ig">
 9 |                     <component :is="Component" />
10 |                 </keep-alive>
11 |             </transition>
12 |         </router-view>
13 |     </section>
14 | </template>
15 | 
16 | <script lang="ts">
17 | import { defineComponent } from 'vue'
18 | export default defineComponent({
19 |     name: 'AppMain',
20 | })
21 | </script>
22 | 
23 | <style lang="scss" scoped>
24 | .app-main {
25 |     overflow: hidden;
26 |     padding: 20px;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/src/config/env.ts:
--------------------------------------------------------------------------------
 1 | // API基础路径
 2 | export const VITE_API_BASE_URL = import.meta.env.VITE_API_BASE_URL
 3 | export const VITE_WITH_CREDENTIALS = import.meta.env.VITE_WITH_CREDENTIALS === 'true'
 4 | 
 5 | export const VITE_SENTRY_DSN = import.meta.env.VITE_SENTRY_DSN
 6 | 
 7 | export const VITE_BAIDU_STATISTICS = import.meta.env.VITE_BAIDU_STATISTICS
 8 | export const VITE_DOMAIN = import.meta.env.VITE_DOMAIN
 9 | 
10 | export const __PROD__ = import.meta.env.PROD
11 | export const __DEV__ = import.meta.env.DEV
12 | 
13 | export const VITE_GIT_HASH = import.meta.env.VITE_GIT_HASH
14 | export const VITE_GIT_DATE = import.meta.env.VITE_GIT_DATE
15 | 
16 | export const VITE_TIMEOUT = parseInt(import.meta.env.VITE_TIMEOUT) || 30000
17 | 
18 | export const VITE_PETERCAT_AI_TOKEN = import.meta.env.VITE_PETERCAT_AI_TOKEN
19 | 


--------------------------------------------------------------------------------
/src/layout/components/Sidebar/SidebarItemLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <a
 3 |         v-if="isExternal(to)"
 4 |         :href="to"
 5 |         target="_blank"
 6 |         rel="noopener"
 7 |     >
 8 |         <slot />
 9 |     </a>
10 |     <router-link
11 |         v-else
12 |         :to="to"
13 |     >
14 |         <slot />
15 |     </router-link>
16 | </template>
17 | 
18 | <script lang="ts">
19 | import { defineComponent } from 'vue'
20 | import { isExternal } from '@/utils/validate'
21 | export default defineComponent({
22 |     name: 'SidebarItemLink',
23 |     props: {
24 |         to: {
25 |             type: String,
26 |             required: true,
27 |         },
28 |     },
29 |     setup() {
30 |         return {
31 |             isExternal,
32 |         }
33 |     },
34 | })
35 | </script>
36 | 
37 | <style lang="scss" scoped>
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/styles/_variables.scss:
--------------------------------------------------------------------------------
 1 | /* Variables */
 2 | 
 3 | // Base color
 4 | $blue:#324157;
 5 | $light-blue:#3A71A8;
 6 | $red:#C03639;
 7 | $pink: #E65D6E;
 8 | $green: #30B08F;
 9 | $tiffany: #4AB7BD;
10 | $yellow:#FEC171;
11 | $panGreen: #30B08F;
12 | 
13 | // Sidebar
14 | $sideBarWidth: 210px;
15 | $subMenuBg:#1f2d3d;
16 | $subMenuHover:#001528;
17 | $subMenuActiveText:#f4f4f5;
18 | $menuBg:#304156;
19 | $menuText:#bfcbd9;
20 | $menuActiveText:#409EFF; // Also see settings.sidebarTextTheme
21 | 
22 | // Login page
23 | $lightGray: #eee;
24 | $darkGray:#889aa4;
25 | $loginBg: #2d3a4b;
26 | $loginCursorColor: #fff;
27 | 
28 | // The :export directive is the magic sauce for webpack
29 | // https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
30 | // :export {
31 | //   menuBg: $menuBg;
32 | //   menuText: $menuText;
33 | //   menuActiveText: $menuActiveText;
34 | // }
35 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - master
 6 | jobs:
 7 |   release:
 8 |     name: Release
 9 |     runs-on: ubuntu-latest
10 |     timeout-minutes: 10
11 |     permissions:
12 |       contents: write
13 |     steps:
14 |       - uses: actions/checkout@v6
15 |         with:
16 |           persist-credentials: false
17 |       - name: Setup pnpm
18 |         uses: pnpm/action-setup@v4
19 |         with:
20 |           version: "latest"
21 |       - name: Setup Node.js environment
22 |         uses: actions/setup-node@v6
23 |         with:
24 |           node-version: "lts/*"
25 |           cache: "pnpm"
26 |       - run: pnpm i --frozen-lockfile
27 |       - run: pnpm run lint
28 |       - run: pnpm run lint:css
29 |       - run: pnpm run build
30 |       # - env:
31 |       #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
32 |       #   run: pnpm run release
33 | 


--------------------------------------------------------------------------------
/src/hooks/use-id-transformer.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 转换指定 props 上的 数组为 id 数组；并反过来
 3 |  *
 4 |  * @author CaoMeiYouRen
 5 |  * @date 2024-04-10
 6 |  * @export
 7 |  * @param props
 8 |  */
 9 | export function useIdTransformer(props: string[]) {
10 |     const postGet = (data: any) => {
11 |         props.forEach((prop) => {
12 |             if (data?.[prop]?.length) {
13 |                 data[prop] = data[prop].map((e) => e.id) as any[]
14 |             }
15 |         })
16 |         return data
17 |     }
18 | 
19 |     const pre = (data: any) => {
20 |         props.forEach((prop) => {
21 |             if (data?.[prop]?.length) {
22 |                 data[prop] = data[prop].map((id) => ({ id })) as any[]
23 |             }
24 |         })
25 |         return data
26 |     }
27 |     const preSave = pre
28 |     const preUpdate = pre
29 | 
30 |     return {
31 |         postGet,
32 |         preSave,
33 |         preUpdate,
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | # github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 4 | # patreon: # Replace with a single Patreon username
 5 | # open_collective: # Replace with a single Open Collective username
 6 | # ko_fi: # Replace with a single Ko-fi username
 7 | # tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | # community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | # liberapay: # Replace with a single Liberapay username
10 | # issuehunt: # Replace with a single IssueHunt username
11 | # lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
12 | # polar: # Replace with a single Polar username
13 | # buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
14 | # thanks_dev: # Replace with a single thanks.dev username
15 | custom: ["https://afdian.com/a/CaoMeiYouRen"] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
16 | 


--------------------------------------------------------------------------------
/.releaserc.js:
--------------------------------------------------------------------------------
 1 | const { name } = require('./package.json')
 2 | module.exports = {
 3 |     plugins: [
 4 |         [
 5 |             "@semantic-release/commit-analyzer",
 6 |             {
 7 |                 "config": "conventional-changelog-cmyr-config"
 8 |             }
 9 |         ],
10 |         [
11 |             "@semantic-release/release-notes-generator",
12 |             {
13 |                 "config": "conventional-changelog-cmyr-config"
14 |             }
15 |         ],
16 |         [
17 |             "@semantic-release/changelog",
18 |             {
19 |                 "changelogFile": "CHANGELOG.md",
20 |                 "changelogTitle": "# " + name
21 |             }
22 |         ],
23 |         '@semantic-release/npm',
24 |         '@semantic-release/github',
25 |         [
26 |             "@semantic-release/git",
27 |             {
28 |                 "assets": [
29 |                     "src",
30 |                     "CHANGELOG.md",
31 |                     "package.json"
32 |                 ]
33 |             }
34 |         ]
35 |     ]
36 | }
37 | 


--------------------------------------------------------------------------------
/api/index.ts:
--------------------------------------------------------------------------------
 1 | export const config = {
 2 |     runtime: 'edge',
 3 | }
 4 | const API_BASE_URL = process.env.API_BASE_URL
 5 | export default (request: Request): Response | Promise<Response> => {
 6 |     // 如果 VITE_API_BASE_URL 是 http url，则将请求转发到该地址，否则报错
 7 |     // 将 body method headers cookie 等信息转发到目标地址
 8 |     if (API_BASE_URL && (API_BASE_URL.startsWith('http://') || API_BASE_URL.startsWith('https://'))) {
 9 |         const url = new URL(request.url)
10 |         url.hostname = new URL(API_BASE_URL).hostname
11 |         // eslint-disable-next-line no-undef
12 |         const init: RequestInit = {
13 |             method: request.method,
14 |             headers: request.headers,
15 |             body: request.body,
16 |             redirect: request.redirect,
17 |             credentials: request.credentials,
18 |         }
19 |         const newRequest = new Request(url, init)
20 |         return fetch(newRequest)
21 |     }
22 |     return new Response(`VITE_API_BASE_URL is not set or is not a valid HTTP URL: ${API_BASE_URL}`, {
23 |         status: 500,
24 |     })
25 | }
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "target": "ESNext",
 4 |         "useDefineForClassFields": true,
 5 |         "module": "ESNext",
 6 |         "moduleResolution": "Node",
 7 |         "strict": true,
 8 |         "jsx": "preserve",
 9 |         "resolveJsonModule": true,
10 |         "isolatedModules": true,
11 |         "esModuleInterop": true,
12 |         "noImplicitAny": false,
13 |         "allowSyntheticDefaultImports": true,
14 |         "strictPropertyInitialization": false,
15 |         "incremental": false,
16 |         "lib": [
17 |             "ESNext",
18 |             "DOM"
19 |         ],
20 |         "skipLibCheck": true,
21 |         "noEmit": true,
22 |         "baseUrl": ".",
23 |         "paths": {
24 |             "@/*": [
25 |                 "src/*"
26 |             ]
27 |         },
28 |     },
29 |     "include": [
30 |         "src/**/*.ts",
31 |         "src/**/*.d.ts",
32 |         "src/**/*.tsx",
33 |         "src/**/*.vue",
34 |         // "components.d.ts"
35 |     ],
36 |     "references": [
37 |         {
38 |             "path": "./tsconfig.node.json"
39 |         }
40 |     ]
41 | }


--------------------------------------------------------------------------------
/src/utils/ajax.ts:
--------------------------------------------------------------------------------
 1 | import { Method, AxiosRequestHeaders } from 'axios'
 2 | import { VITE_API_BASE_URL } from '@/config/env'
 3 | import { instance } from '@/api'
 4 | 
 5 | export interface AjaxConfig {
 6 |     url: string
 7 |     query?: Record<string, unknown>
 8 |     data?: Record<string, unknown>
 9 |     method?: Method
10 |     headers?: AxiosRequestHeaders
11 |     timeout?: number
12 |     baseURL?: string
13 | }
14 | 
15 | /**
16 |  * axios 接口封装
17 |  *
18 |  * @author CaoMeiYouRen
19 |  * @export
20 |  * @param {AjaxConfig} config
21 |  * @returns {Promise<AxiosResponse<any>>}
22 |  */
23 | export async function ajax<T = any>(config: AjaxConfig): Promise<T> {
24 |     // try {
25 |     const { url, query = {}, data = {}, method = 'GET', headers = {}, timeout = 10000, baseURL = VITE_API_BASE_URL } = config
26 |     const resp = await instance(url, {
27 |         method,
28 |         headers,
29 |         params: query,
30 |         data,
31 |         timeout,
32 |         baseURL,
33 |     })
34 |     return resp.data
35 |     // } catch (error: any) {
36 |     //     if (error.toJSON) {
37 |     //         console.error(error.toJSON())
38 |     //     } else {
39 |     //         console.error(error)
40 |     //     }
41 |     //     throw error
42 |     // }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/utils/storage.ts:
--------------------------------------------------------------------------------
 1 | import { useLocalStorage } from '@vueuse/core'
 2 | import { User } from '@/api/api'
 3 | 
 4 | export function useMyLocalStorage<T = any>(key: string, initialValue?: T) {
 5 |     const state = useLocalStorage(key, initialValue)
 6 |     const setState = (value: T) => {
 7 |         state.value = value
 8 |     }
 9 |     const getState = () => state.value
10 |     const removeState = () => {
11 |         state.value = null
12 |     }
13 |     return {
14 |         state,
15 |         setState,
16 |         getState,
17 |         removeState,
18 |     }
19 | }
20 | 
21 | // App
22 | const sidebarStatusKey = 'sidebar_status'
23 | const {
24 |     state: sidebarStatusStorage,
25 |     setState: setSidebarStatus,
26 |     getState: getSidebarStatus,
27 |     removeState: removeSidebarStatus,
28 | } = useMyLocalStorage(sidebarStatusKey, '')
29 | export {
30 |     sidebarStatusStorage,
31 |     setSidebarStatus,
32 |     getSidebarStatus,
33 |     removeSidebarStatus,
34 | }
35 | 
36 | // User
37 | const userKey = 'rss_impact_user'
38 | const {
39 |     state: userStorage,
40 |     setState: setUser,
41 |     getState: getUser,
42 |     removeState: removeUser,
43 | } = useMyLocalStorage<User>(userKey, null as any)
44 | export {
45 |     userStorage,
46 |     setUser,
47 |     getUser,
48 |     removeUser,
49 | }
50 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.yml:
--------------------------------------------------------------------------------
 1 | name: Feature Request
 2 | description: 新功能请求
 3 | title: "[feature] "
 4 | labels: ["enhancement"]
 5 | # assignees: []
 6 | body:
 7 |   - type: textarea
 8 |     id: problem-description
 9 |     attributes:
10 |       label: Problem Description
11 |       description: 请提供对问题的清晰简洁的描述。例如，当 [...]
12 |       placeholder: 例如，当我尝试 [...] 时，我总是感到沮丧。
13 |     validations:
14 |       required: false
15 | 
16 |   - type: textarea
17 |     id: solution-description
18 |     attributes:
19 |       label: Solution Description
20 |       description: 请描述您想要的解决方案。
21 |       placeholder: 例如，我希望有一个功能可以 [...]
22 |     validations:
23 |       required: true
24 | 
25 |   - type: textarea
26 |     id: alternative-solutions
27 |     attributes:
28 |       label: Alternative Solutions
29 |       description: 请描述您考虑过的任何替代解决方案或功能。
30 |       placeholder: 例如，我考虑过使用 [...] 作为替代方案。
31 |     validations:
32 |       required: false
33 | 
34 |   - type: textarea
35 |     id: additional-context
36 |     attributes:
37 |       label: Additional Context
38 |       description: 如果适用，在此处添加有关功能请求的上下文信息或屏幕截图链接。
39 |       placeholder: 例如，https://example.com/screenshot.png
40 |     validations:
41 |       required: false
42 | 
43 |   - type: markdown
44 |     attributes:
45 |       value: |
46 |         **Paid Consultation/付费咨询**
47 | 
48 |         如果您愿意支付费用以获得更快的功能开发优先级，请[前往爱发电进行赞助](https://afdian.com/a/CaoMeiYouRen)。
49 | 
50 |         如果您不愿意付费，请耐心等待开发者回复。开发者可能因为各种各样的原因无法及时回复，还请谅解。
51 | 


--------------------------------------------------------------------------------
/src/store/modules/user.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | import { ref, computed } from 'vue'
 3 | import { isEmpty } from 'lodash-es'
 4 | import { LoginDto, User } from '@/api/api'
 5 | import { api } from '@/api'
 6 | import * as storage from '@/utils/storage'
 7 | 
 8 | export const useUserStore = defineStore('user', () => {
 9 |     const user = ref<User | null>(storage.getUser() || null)
10 |     const isLoadRoutes = ref(false)
11 |     const isLogin = computed(() => !isEmpty(user.value))
12 | 
13 |     const setIsLoadRoutes = (value: boolean) => {
14 |         isLoadRoutes.value = value
15 |     }
16 | 
17 |     const login = async (data: LoginDto) => {
18 |         const response = await api.api.authLogin(data)
19 |         return response
20 |     }
21 | 
22 |     const logout = async () => {
23 |         // 移除本地的cookie
24 |         user.value = null
25 |         storage.removeUser()
26 |         setIsLoadRoutes(false)
27 |         // remove('connect.sid') // 无法移除 http only
28 |         await api.api.authLogout()
29 |     }
30 | 
31 |     const setUser = (newUser: User) => {
32 |         user.value = newUser
33 |         storage.setUser(newUser)
34 |     }
35 | 
36 |     const getUserInfo = async () => {
37 |         const newUser = await api.api.userMe()
38 |         if (newUser) {
39 |             setUser(newUser)
40 |         }
41 |     }
42 | 
43 |     return {
44 |         user,
45 |         isLogin,
46 |         isLoadRoutes,
47 |         login,
48 |         logout,
49 |         setUser,
50 |         setIsLoadRoutes,
51 |         getUserInfo,
52 |     }
53 | })
54 | 


--------------------------------------------------------------------------------
/src/views/data/Hook.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <CrudList
 3 |         v-model="form"
 4 |         model="hook"
 5 |         :post-get="postGet"
 6 |         :pre-save="preSave"
 7 |         :pre-update="preUpdate"
 8 |     />
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 | import { ref, watch } from 'vue'
13 | import { omit } from 'lodash-es'
14 | import { Hook } from '@/api/api'
15 | import { objectValueToString, remove$key, stringValueToObject } from '@/utils/helper'
16 | const form = ref<Hook>({} as any)
17 | const postGet = (data: Hook) => {
18 |     if (['notification', 'webhook'].includes(data.type)) {
19 |         (data.config as any) = objectValueToString(data.config as any)
20 |     }
21 |     return data
22 | }
23 | 
24 | const pre = (data: Hook) => {
25 |     if ((data?.config as any)?._type) {
26 |         delete (data.config as any)._type
27 |     }
28 |     if (['notification', 'webhook'].includes(data.type)) {
29 |         (data.config as any) = stringValueToObject(data.config as any)
30 |     }
31 |     data.config = omit(data.config as any, ['0', '1']) as any
32 |     data.config = remove$key(data.config as any) as any
33 |     if (!data.proxyConfigId) {
34 |         data.proxyConfigId = null as any
35 |     }
36 |     return data
37 | }
38 | const preSave = pre
39 | const preUpdate = pre
40 | watch(() => form.value?.type, (type) => {
41 |     if (form.value?.config && type) {
42 |         form.value.config = { // 将 type 同步到 config
43 |             ...form.value.config,
44 |             _type: type,
45 |         } as any
46 |     }
47 | })
48 | 
49 | </script>
50 | 
51 | <style lang="scss" scoped>
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/components/Hamburger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div
 3 |         style="padding: 0 15px;"
 4 |         @click="toggleClick"
 5 |     >
 6 |         <svg
 7 |             :class="{'is-active': isActive}"
 8 |             class="hamburger"
 9 |             viewBox="0 0 1024 1024"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             width="64"
12 |             height="64"
13 |         >
14 |             <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
15 |         </svg>
16 |     </div>
17 | </template>
18 | 
19 | <script lang="ts">
20 | import { defineComponent } from 'vue'
21 | export default defineComponent({
22 |     name: 'Hamburger',
23 |     props: {
24 |         isActive: {
25 |             type: Boolean,
26 |             default: false,
27 |         },
28 |     },
29 |     emits: ['toggleClick'],
30 |     methods: {
31 |         toggleClick(): void {
32 |             this.$emit('toggleClick')
33 |         },
34 |     },
35 | })
36 | </script>
37 | 
38 | <style lang="scss" scoped>
39 | .hamburger {
40 |     display: inline-block;
41 |     width: 20px;
42 |     height: 20px;
43 |     vertical-align: middle;
44 | }
45 | 
46 | .hamburger.is-active {
47 |     transform: rotate(180deg);
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/styles/nprogress.scss:
--------------------------------------------------------------------------------
 1 | /* Make clicks pass-through */
 2 | $nprogress-color: #1890ff;
 3 | 
 4 | #nprogress {
 5 |     pointer-events: none;
 6 | }
 7 | 
 8 | #nprogress .bar {
 9 |     position: fixed;
10 |     top: 0;
11 |     left: 0;
12 |     z-index: 1031;
13 |     width: 100%;
14 |     height: 2px;
15 |     background: $nprogress-color;
16 | }
17 | 
18 | /* Fancy blur effect */
19 | #nprogress .peg {
20 |     position: absolute;
21 |     right: 0px;
22 |     display: block;
23 |     width: 100px;
24 |     height: 100%;
25 |     box-shadow: 0 0 10px $nprogress-color, 0 0 5px $nprogress-color;
26 |     transform: rotate(3deg) translate(0px, -4px);
27 |     opacity: 1;
28 | }
29 | 
30 | /* Remove these to get rid of the spinner */
31 | #nprogress .spinner {
32 |     position: fixed;
33 |     top: 15px;
34 |     right: 15px;
35 |     z-index: 1031;
36 |     display: block;
37 | }
38 | 
39 | #nprogress .spinner-icon {
40 |     box-sizing: border-box;
41 |     width: 18px;
42 |     height: 18px;
43 |     border: solid 2px transparent;
44 |     border-top-color: $nprogress-color;
45 |     border-left-color: $nprogress-color;
46 |     border-radius: 50%;
47 |     animation: nprogress-spinner 400ms linear infinite;
48 | }
49 | 
50 | .nprogress-custom-parent {
51 |     position: relative;
52 |     overflow: hidden;
53 | }
54 | 
55 | .nprogress-custom-parent #nprogress .spinner,
56 | .nprogress-custom-parent #nprogress .bar {
57 |     position: absolute;
58 | }
59 | 
60 | @keyframes nprogress-spinner {
61 |     0% { transform: rotate(0deg); }
62 |     100% { transform: rotate(360deg); }
63 | }
64 | 
65 | @keyframes nprogress-spinner {
66 |     0% { transform: rotate(0deg); }
67 |     100% { transform: rotate(360deg); }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/store/modules/permission.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | import { ref } from 'vue'
 3 | import { asyncRoutes, constantRoutes, RouteConfig } from '@/router'
 4 | import { Role } from '@/constant/role'
 5 | 
 6 | export const hasPermission = (roles: string[], route: RouteConfig) => {
 7 |     const routeRoles = route?.meta?.roles as string[]
 8 |     if (routeRoles?.length) {
 9 |         return roles.some((role) => routeRoles.some((role2) => role === role2))
10 |     }
11 |     return true
12 | }
13 | 
14 | export const filterAsyncRoutes = (routes: RouteConfig[], roles: string[]): RouteConfig[] => {
15 |     const res: RouteConfig[] = []
16 |     routes.forEach((route) => {
17 |         const r = { ...route }
18 |         if (hasPermission(roles, r)) {
19 |             if (r.children) {
20 |                 r.children = filterAsyncRoutes(r.children, roles)
21 |             }
22 |             res.push(r)
23 |         }
24 |     })
25 |     return res
26 | }
27 | 
28 | export interface IPermissionState {
29 |     routes: RouteConfig[]
30 |     dynamicRoutes: RouteConfig[]
31 | }
32 | 
33 | export const usePermissionStore = defineStore('permission', () => {
34 |     const routes = ref<RouteConfig[]>([])
35 |     const dynamicRoutes = ref<RouteConfig[]>([])
36 | 
37 |     const generateRoutes = (roles: string[]) => {
38 |         let accessedRoutes: RouteConfig[] = []
39 |         if (roles.includes(Role.admin)) {
40 |             // 如果有 admin 权限直接放行
41 |             accessedRoutes = asyncRoutes
42 |         } else {
43 |             accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
44 |         }
45 |         routes.value = constantRoutes.concat(accessedRoutes)
46 |         dynamicRoutes.value = accessedRoutes
47 |     }
48 | 
49 |     return { routes, dynamicRoutes, generateRoutes }
50 | })
51 | 


--------------------------------------------------------------------------------
/src/api/index.ts:
--------------------------------------------------------------------------------
 1 | import { AxiosError } from 'axios'
 2 | import { ElMessage } from 'element-plus'
 3 | import { Api } from './api'
 4 | import router from '@/router'
 5 | import { useUserStore } from '@/store/modules/user'
 6 | import { VITE_API_BASE_URL, VITE_TIMEOUT, VITE_WITH_CREDENTIALS } from '@/config/env'
 7 | import { isHttpURL } from '@/utils/helper'
 8 | 
 9 | export const api = new Api({
10 |     baseURL: isHttpURL(VITE_API_BASE_URL) ? new URL(VITE_API_BASE_URL).origin : undefined,
11 |     timeout: VITE_TIMEOUT,
12 |     withCredentials: VITE_WITH_CREDENTIALS,
13 | })
14 | /**
15 |  * axios 实例
16 |  */
17 | export const instance = api.instance
18 | 
19 | // 添加响应拦截器
20 | // 2xx 范围内的状态码都会触发该函数。
21 | // 对响应数据做点什么
22 | instance.interceptors.response.use((response) => response, async (error: Error | AxiosError) => {
23 |     // 超出 2xx 范围的状态码都会触发该函数。
24 |     // 对响应错误做点什么
25 |     let message = '访问后台接口出现错误'
26 |     if (error instanceof AxiosError) {
27 |         message = error.response?.data?.message
28 |         if (message) {
29 |             ElMessage.error(message)
30 |         }
31 |         if (error.response?.status === 401) {
32 |             const userStore = useUserStore()
33 |             // 如果是 401 则要求登录
34 |             if (router.currentRoute.value.path !== '/login') {
35 |                 await userStore.logout()
36 |                 await router.push({
37 |                     path: '/login',
38 |                     query: {
39 |                         redirect: '/',
40 |                     },
41 |                 })
42 |             }
43 |         }
44 |         return Promise.reject(error)
45 |     }
46 |     if (error?.message) {
47 |         message = error.message
48 |     }
49 |     if (message) {
50 |         ElMessage.error(message)
51 |     }
52 |     return Promise.reject(error)
53 | })
54 | 


--------------------------------------------------------------------------------
/src/store/modules/app.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | import { ref } from 'vue'
 3 | import { getSidebarStatus, setSidebarStatus } from '@/utils/storage'
 4 | import { AuthMeta } from '@/api/api'
 5 | 
 6 | export enum DeviceType {
 7 |     Mobile,
 8 |     Desktop,
 9 | }
10 | 
11 | export interface Sidebar {
12 |     opened: boolean
13 |     withoutAnimation: boolean
14 | }
15 | 
16 | export interface IAppState {
17 |     device: DeviceType
18 |     sidebar: Sidebar
19 | }
20 | 
21 | export const useAppStore = defineStore('app', () => {
22 |     const device = ref<DeviceType>(DeviceType.Desktop)
23 |     const sidebar = ref<Sidebar>({
24 |         opened: getSidebarStatus() !== 'closed',
25 |         withoutAnimation: false,
26 |     })
27 |     const authMeta = ref<AuthMeta>({
28 |         enableRegister: false,
29 |         disablePasswordLogin: false,
30 |         disablePasswordRegister: false,
31 |         enableAuth0: false,
32 |     })
33 | 
34 |     function toggleSidebar(withoutAnimation: boolean) {
35 |         sidebar.value.opened = !sidebar.value.opened
36 |         sidebar.value.withoutAnimation = withoutAnimation
37 |         if (sidebar.value.opened) {
38 |             setSidebarStatus('opened')
39 |         } else {
40 |             setSidebarStatus('closed')
41 |         }
42 |     }
43 | 
44 |     function closeSidebar(withoutAnimation: boolean) {
45 |         sidebar.value.opened = false
46 |         sidebar.value.withoutAnimation = withoutAnimation
47 |         setSidebarStatus('closed')
48 |     }
49 | 
50 |     function toggleDevice(deviceType: DeviceType) {
51 |         device.value = deviceType
52 |     }
53 | 
54 |     function setAuthMeta(meta: AuthMeta) {
55 |         authMeta.value = meta
56 |     }
57 | 
58 |     return { device, sidebar, toggleSidebar, closeSidebar, toggleDevice, setAuthMeta, authMeta }
59 | })
60 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import 'normalize.css'
 2 | import { createApp } from 'vue'
 3 | import axios from 'axios'
 4 | import zhLocale from '@smallwei/avue/lib/locale/lang/zh'
 5 | import zhCn from 'element-plus/es/locale/lang/zh-cn'
 6 | import * as Sentry from '@sentry/vue'
 7 | import App from './App.vue'
 8 | import { __PROD__, VITE_API_BASE_URL, VITE_DOMAIN, VITE_SENTRY_DSN, VITE_TIMEOUT, VITE_WITH_CREDENTIALS } from './config/env'
 9 | import router from '@/router'
10 | import store from '@/store'
11 | import {
12 |     ElementPlus,
13 |     ElementPlusIconsVue,
14 | } from '@/plugins/element-plus'
15 | import Avue from '@/plugins/avue'
16 | import '@/permission'
17 | import components from '@/components'
18 | import '@/plugins/xlsx'
19 | import '@/plugins/shepherd'
20 | 
21 | const app = createApp(App)
22 |     .use(router)
23 |     .use(store)
24 |     .use(ElementPlus, {
25 |         locale: zhCn,
26 |     })
27 |     .use(Avue, {
28 |         axios: axios.create({
29 |             baseURL: VITE_API_BASE_URL,
30 |             timeout: VITE_TIMEOUT,
31 |             withCredentials: VITE_WITH_CREDENTIALS,
32 |         }),
33 |         locale: zhLocale,
34 |     })
35 | 
36 | if (__PROD__ && VITE_SENTRY_DSN && location.host.endsWith(VITE_DOMAIN)) {
37 |     Sentry.init({
38 |         app,
39 |         dsn: VITE_SENTRY_DSN,
40 |         integrations: [
41 |             Sentry.browserTracingIntegration({ router }),
42 | 
43 |             Sentry.replayIntegration({}),
44 |         ],
45 |         tracesSampleRate: 0.1,
46 |         tracePropagationTargets: ['localhost', '127.0.0.1', /\/api/],
47 |         replaysSessionSampleRate: 0.1,
48 |         replaysOnErrorSampleRate: 1.0,
49 |     })
50 | }
51 | 
52 | for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
53 |     app.component(key, component)
54 | }
55 | 
56 | for (const [key, component] of Object.entries(components)) {
57 |     app.component(key, component)
58 | }
59 | 
60 | app.mount('#app')
61 | 
62 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy static content to Pages
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [master]
 6 |   # 允许你从 Actions 选项卡手动运行此工作流程
 7 |   workflow_dispatch:
 8 | 
 9 | # 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。
10 | permissions:
11 |   contents: write
12 |   pages: write
13 |   id-token: write
14 | 
15 | # 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
16 | concurrency:
17 |   group: ${{ github.workflow }}-${{ github.ref }}
18 |   cancel-in-progress: true
19 | 
20 | jobs:
21 |   # 构建工作
22 |   deploy:
23 |     environment:
24 |       name: github-pages
25 |       url: ${{ steps.deployment.outputs.page_url }}
26 |     runs-on: ubuntu-latest
27 |     steps:
28 |       - name: Checkout
29 |         uses: actions/checkout@v6
30 |       - name: Setup pnpm
31 |         uses: pnpm/action-setup@v4
32 |         with:
33 |           version: "latest"
34 |       - name: Setup Node.js@lts environment
35 |         uses: actions/setup-node@v6
36 |         with:
37 |           node-version: "lts/*"
38 |           cache: "pnpm"
39 |       - name: Install dependencies
40 |         run: pnpm i --frozen-lockfile
41 |       - name: Lint
42 |         run: pnpm run lint
43 |       - name: Lint CSS
44 |         run: pnpm run lint:css
45 |       - name: Build
46 |         run: pnpm run build
47 |         env:
48 |           NODE_ENV: production
49 |           VITE_BAIDU_STATISTICS: ${{ secrets.VITE_BAIDU_STATISTICS }}
50 |           VITE_DOMAIN: ${{ secrets.VITE_DOMAIN }}
51 |           VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
52 |           VITE_PETERCAT_AI_TOKEN: ${{ secrets.VITE_PETERCAT_AI_TOKEN }}
53 |       - name: Deploy to GitHub Pages
54 |         id: deployment
55 |         uses: peaceiris/actions-gh-pages@v4
56 |         with:
57 |           github_token: ${{ secrets.GITHUB_TOKEN }}
58 |           publish_dir: ./dist
59 |           user_name: "github-actions[bot]"
60 |           user_email: "github-actions[bot]@users.noreply.github.com"
61 |           keep_files: false
62 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # 贡献者公约
 2 | 
 3 | ## 我们的承诺
 4 | 
 5 | 身为项目成员、贡献者、负责人，我们保证参与此社区的每个人都不受骚扰，不论其年龄、体型、身体条件、民族、性征、性别认同与表现、经验水平、教育程度、社会地位、国籍、相貌、种族、宗教信仰及性取向如何。
 6 | 
 7 | 我们承诺致力于建设开放、友善、多元、包容、健康的社区环境。
 8 | 
 9 | ## 我们的准则
10 | 
11 | 有助于促进本社区积极环境的行为包括但不限于：
12 | 
13 | * 与人为善、推己及人
14 | * 尊重不同的主张、观点和经历
15 | * 积极提出、耐心接受有益批评
16 | * 面对过失，承担责任、认真道歉、从中学习
17 | * 关注社区共同诉求，而非一己私利
18 | 
19 | 不当行为包括但不限于：
20 | 
21 | * 发布与性有关的言论或图像，以及任何形式的献殷勤或勾引
22 | * 挑衅行为、侮辱或贬损的言论、人身及政治攻击
23 | * 公开或私下骚扰
24 | * 未获明确授权擅自发布他人的资料，如地址、电子邮箱等
25 | * 其他有理由认定为违反职业操守的不当行为
26 | 
27 | ## 落实之义务
28 | 
29 | 社区负责人有责任诠释何谓“妥当行为”，并据此准则，妥善公正地认定与处置不当、威胁、冒犯及有害的行为。
30 | 
31 | 社区负责人有权利和义务删除、编辑、拒绝违背本公约的评论（comment）、提交（commit）、代码、维基（wiki）编辑、问题（issue）等贡献。如有必要，需告知采取措施之理由。
32 | 
33 | ## 适用范围
34 | 
35 | 此行为标准适用于本社区全部场合，以及在其他场合代表本社区的个人。
36 | 
37 | 代表本社区的情形包括但不限于：使用官方电子邮件与社交平台、作为指定代表参与在线或线下活动。
38 | 
39 | ## 贯彻落实
40 | 
41 | 如遇滥用、骚扰等不当行为，请通过 [support@cmyr.dev](mailto:support@cmyr.dev) 向纪律检查委员举报。
42 | 纪委将迅速审议并调查全部投诉。
43 | 
44 | 社区全体负责人有义务保密举报者信息。
45 | 
46 | ## 指导方针
47 | 
48 | 社区负责人将依据下列方案判断并处置违纪行为：
49 | 
50 | ### 一、督促
51 | 
52 | **社区影响**：用语不当、举止不符合职业道德或不受社区欢迎。
53 | 
54 | **处理意见**：由社区负责人予以非公开的书面警告，阐明违纪事由、解释举止如何不妥。或将要求公开道歉。
55 | 
56 | ### 二、警告
57 | 
58 | **社区影响**：一起或多起事件中的违纪行为。
59 | 
60 | **处理意见**：警告继续违纪之后果、违纪者在特定时间内禁止与当事人往来、不得擅自与社区执法者往来，禁令涵盖社区内外、社交网络在内的一切联络。如有违反，可致封禁乃至开除。
61 | 
62 | ### 三、封禁
63 | 
64 | **社区影响**：严重违纪行为，包括屡教不改。
65 | 
66 | **处理意见**：违纪者在特定时间内禁止与社区的任何往来或公开联络，禁止任何与当事人公开或私下往来，不得擅自与社区执法者往来。如有违反，可致开除。
67 | 
68 | ### 四、开除
69 | 
70 | **社区影响**：典型违纪行为，例如屡教不改、骚扰某个人、敌对或贬低某个群体。
71 | 
72 | **处理意见**：无限期禁止违纪者与项目社区的一切公开往来。
73 | 
74 | ## 来源
75 | 
76 | 本行为标准改编自[参与者公约][homepage]2.0 版，可在此查阅：[https://www.contributor-covenant.org/zh-cn/version/2/0/code_of_conduct.html][v2.0]
77 | 
78 | 指导方针借鉴自[Mozilla 纪检分级][Mozilla CoC]。
79 | 
80 | 此行为标准常见问题请洽：[https://www.contributor-covenant.org/faq][FAQ]。
81 | 另有诸译本：[https://www.contributor-covenant.org/translations][translations]。
82 | 
83 | [homepage]:https://www.contributor-covenant.org
84 | [v2.0]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html
85 | [Mozilla CoC]: https://github.com/mozilla/diversity
86 | [FAQ]: https://www.contributor-covenant.org/faq
87 | [translations]: https://www.contributor-covenant.org/translations
88 | 


--------------------------------------------------------------------------------
/components.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | // @ts-nocheck
 3 | // Generated by unplugin-vue-components
 4 | // Read more: https://github.com/vuejs/core/pull/3399
 5 | // biome-ignore lint: disable
 6 | export {}
 7 | 
 8 | /* prettier-ignore */
 9 | declare module 'vue' {
10 |   export interface GlobalComponents {
11 |     Breadcrumb: typeof import('./src/components/Breadcrumb.vue')['default']
12 |     CrudForm: typeof import('./src/components/CrudForm.vue')['default']
13 |     CrudList: typeof import('./src/components/CrudList.vue')['default']
14 |     ElBacktop: typeof import('element-plus/es')['ElBacktop']
15 |     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
16 |     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
17 |     ElButton: typeof import('element-plus/es')['ElButton']
18 |     ElCol: typeof import('element-plus/es')['ElCol']
19 |     ElCollapse: typeof import('element-plus/es')['ElCollapse']
20 |     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
21 |     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
22 |     ElDropdown: typeof import('element-plus/es')['ElDropdown']
23 |     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
24 |     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
25 |     ElIcon: typeof import('element-plus/es')['ElIcon']
26 |     ElImage: typeof import('element-plus/es')['ElImage']
27 |     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
28 |     ElMenu: typeof import('element-plus/es')['ElMenu']
29 |     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
30 |     ElRow: typeof import('element-plus/es')['ElRow']
31 |     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
32 |     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
33 |     ElTabPane: typeof import('element-plus/es')['ElTabPane']
34 |     ElTabs: typeof import('element-plus/es')['ElTabs']
35 |     ElTooltip: typeof import('element-plus/es')['ElTooltip']
36 |     Hamburger: typeof import('./src/components/Hamburger.vue')['default']
37 |     RouterLink: typeof import('vue-router')['RouterLink']
38 |     RouterView: typeof import('vue-router')['RouterView']
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/layout/components/Sidebar/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <el-scrollbar wrap-class="scrollbar-wrapper">
 3 |         <el-menu
 4 |             :collapse="isCollapse"
 5 |             :background-color="variables.menuBg"
 6 |             :text-color="variables.menuText"
 7 |             :active-text-color="variables.menuActiveText"
 8 |             :unique-opened="false"
 9 |             :collapse-transition="false"
10 |             :default-active="$route.path"
11 |             mode="vertical"
12 |         >
13 |             <SidebarItem
14 |                 v-for="route in routes"
15 |                 :key="route.path"
16 |                 :item="route"
17 |                 :base-path="route.path"
18 |                 :is-collapse="isCollapse"
19 |             />
20 |         </el-menu>
21 |     </el-scrollbar>
22 | </template>
23 | 
24 | <script lang="ts" setup>
25 | import { computed } from 'vue'
26 | import SidebarItem from './SidebarItem.vue'
27 | import { useAppStore } from '@/store/modules/app'
28 | import variables from '@/styles/variables'
29 | import { usePermissionStore } from '@/store/modules/permission'
30 | const permissionStore = usePermissionStore()
31 | const state = useAppStore()
32 | 
33 | const routes = computed(() => permissionStore.routes)
34 | const isCollapse = computed(() => !state.sidebar.opened)
35 | </script>
36 | 
37 | <style lang="scss" scoped>
38 | </style>
39 | 
40 | <style lang="scss">
41 | .sidebar-container {
42 |     // reset element-ui css
43 |     .horizontal-collapse-transition {
44 |         transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
45 |     }
46 | 
47 |     .scrollbar-wrapper {
48 |         overflow-x: hidden !important;
49 |     }
50 | 
51 |     .el-scrollbar__view {
52 |         height: 100%;
53 |     }
54 | 
55 |     .el-scrollbar__bar {
56 |         &.is-vertical {
57 |             right: 0;
58 |         }
59 | 
60 |         &.is-horizontal {
61 |             display: none;
62 |         }
63 |     }
64 | }
65 | </style>
66 | 
67 | <style lang="scss" scoped>
68 | .el-scrollbar {
69 |     height: 100%;
70 | }
71 | 
72 | .el-menu {
73 |     width: 100% !important;
74 |     height: 100%;
75 |     border: none;
76 | }
77 | </style>
78 | @/store/modules/app
79 | 


--------------------------------------------------------------------------------
/src/views/user/Personal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <el-row :gutter="20">
 4 |             <el-col
 5 |                 :sm="24"
 6 |                 :md="12"
 7 |                 :lg="8"
 8 |             >
 9 |                 <CrudForm
10 |                     v-model="userForm"
11 |                     method="POST"
12 |                     url="/user/me"
13 |                     @success="onSuccess"
14 |                     @fail="onFail"
15 |                 />
16 |             </el-col>
17 |             <el-col
18 |                 v-if="!disablePasswordLogin"
19 |                 :sm="24"
20 |                 :md="12"
21 |                 :lg="8"
22 |             >
23 |                 <CrudForm
24 |                     v-model="passwordForm"
25 |                     method="POST"
26 |                     url="/user/resetPassword"
27 |                     @success="onResetPasswordSuccess"
28 |                     @fail="onFail"
29 |                 />
30 |             </el-col>
31 |         </el-row>
32 |     </div>
33 | </template>
34 | 
35 | <script lang="ts" setup>
36 | import { computed, onMounted, ref } from 'vue'
37 | import { ElMessage } from 'element-plus'
38 | import { useRouter } from 'vue-router'
39 | import { api } from '@/api'
40 | import { useAppStore } from '@/store/modules/app'
41 | import { useUserStore } from '@/store/modules/user'
42 | 
43 | const router = useRouter()
44 | const state = useAppStore()
45 | const userStore = useUserStore()
46 | // 是否禁用密码登录，如果禁用了，则隐藏修改密码表单
47 | const disablePasswordLogin = computed(() => Boolean(state.authMeta.disablePasswordLogin || userStore.user?.disablePasswordLogin))
48 | 
49 | const userForm = ref({})
50 | const passwordForm = ref({})
51 | 
52 | const onSuccess = () => {
53 |     ElMessage.success('修改成功！')
54 | }
55 | 
56 | const onFail = () => {
57 |     ElMessage.error('修改失败！')
58 | }
59 | 
60 | const onResetPasswordSuccess = () => {
61 |     ElMessage.success('修改成功！即将跳转到登录页面重新登录')
62 |     setTimeout(async () => {
63 |         await router.push({
64 |             path: '/login',
65 |         })
66 |     }, 3000)
67 | }
68 | 
69 | onMounted(async () => {
70 |     userForm.value = await api.api.userMe()
71 | })
72 | 
73 | </script>
74 | 
75 | <style lang="scss" scoped>
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/layout/Layout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div
  3 |         :class="classObj"
  4 |         class="app-wrapper"
  5 |     >
  6 |         <Sidebar class="sidebar-container" />
  7 |         <div class="main-container">
  8 |             <Navbar />
  9 |             <AppMain />
 10 |         </div>
 11 |     </div>
 12 | </template>
 13 | 
 14 | <script lang="ts" setup>
 15 | import { computed } from 'vue'
 16 | import { AppMain, Navbar, Sidebar } from './components'
 17 | import { useAppStore } from '@/store/modules/app'
 18 | 
 19 | const state = useAppStore()
 20 | const classObj = computed(() => ({
 21 |     hideSidebar: !state.sidebar.opened,
 22 |     openSidebar: state.sidebar.opened,
 23 | }))
 24 | </script>
 25 | 
 26 | <style lang="scss" scoped>
 27 | .app-wrapper {
 28 |     position: relative;
 29 |     width: 100%;
 30 |     height: 100%;
 31 | 
 32 |     @include clearfix;
 33 | }
 34 | 
 35 | .drawer-bg {
 36 |     position: absolute;
 37 |     top: 0;
 38 |     z-index: 999;
 39 |     width: 100%;
 40 |     height: 100%;
 41 |     background: #000;
 42 |     opacity: 0.3;
 43 | }
 44 | 
 45 | .main-container {
 46 |     position: relative;
 47 |     min-height: 100%;
 48 |     margin-left: $sideBarWidth;
 49 |     transition: margin-left 0.28s;
 50 | }
 51 | 
 52 | .sidebar-container {
 53 |     position: fixed;
 54 |     top: 0;
 55 |     bottom: 0;
 56 |     left: 0;
 57 |     z-index: 1001;
 58 |     width: $sideBarWidth !important;
 59 |     height: 100%;
 60 |     overflow: hidden;
 61 |     font-size: 0;
 62 |     transition: width 0.28s;
 63 | }
 64 | 
 65 | .hideSidebar {
 66 |     .main-container {
 67 |         margin-left: 54px;
 68 |     }
 69 | 
 70 |     .sidebar-container {
 71 |         width: 54px !important;
 72 |     }
 73 | }
 74 | 
 75 | /* for mobile response 适配移动端 */
 76 | .mobile {
 77 |     .main-container {
 78 |         margin-left: 0;
 79 |     }
 80 | 
 81 |     .sidebar-container {
 82 |         width: $sideBarWidth !important;
 83 |         transition: transform 0.28s;
 84 |     }
 85 | 
 86 |     &.openSidebar {
 87 |         position: fixed;
 88 |         top: 0;
 89 |     }
 90 | 
 91 |     &.hideSidebar {
 92 |         .sidebar-container {
 93 |             transform: translate3d(-$sideBarWidth, 0, 0);
 94 |             transition-duration: 0.3s;
 95 |             pointer-events: none;
 96 |         }
 97 |     }
 98 | }
 99 | 
100 | .withoutAnimation {
101 |     .main-container,
102 |     .sidebar-container {
103 |         transition: none;
104 |     }
105 | }
106 | </style>
107 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # 贡献指南
 2 | 
 3 | 在为此存储库做出贡献时，请首先通过 issue、电子邮件或任何其他方法与此存储库的所有者讨论您希望进行的更改，然后再进行更改。
 4 | 
 5 | **建议阅读过 [贡献者公约](https://www.contributor-covenant.org/zh-cn/version/2/0/code_of_conduct/) 后再来参与贡献**
 6 | 
 7 | **注意**:
 8 | 
 9 | - 提问之前请三思，不要浪费我们的时间
10 | - 不要问那些你自己就能搞清楚的问题
11 | - 不要问在文档中提过的问题
12 | 
13 | ## 开发环境设置
14 | 
15 | 要设置开发环境，请按照以下步骤操作：
16 | 
17 | 1. Clone 本项目
18 | 
19 |    ```sh
20 |    git clone https://github.com/CaoMeiYouRen/rss-impact-web.git
21 |    ```
22 | 
23 | 2.  安装依赖
24 | 
25 |    ```sh
26 |    npm i
27 |    # 或 yarn
28 |    # 或 pnpm i
29 |    ```
30 | 3.  运行开发环境
31 | 
32 |     ```sh
33 |     npm run dev
34 |     ```
35 | 
36 | ## 问题和功能请求
37 | 
38 | 你在源代码中发现了一个错误，文档中有一个错误，或者你想要一个新功能？ 看看[GitHub 讨论](https://github.com/CaoMeiYouRen/rss-impact-web/discussions)看看它是否已经在讨论中。您可以通过[在 GitHub 上提交问题](https://github.com/CaoMeiYouRen/rss-impact-web/issues)来帮助我们。在创建问题之前，请确保搜索[问题存档](https://github.com/CaoMeiYouRen/rss-impact-web/issues?q=is%3Aissue+is%3Aclosed) - 您的问题可能已经得到解决！
39 | 
40 | 请尝试创建以下错误报告：
41 | 
42 | - *可重现*。包括重现问题的步骤。
43 | - *具体的*。包括尽可能多的细节：哪个版本，什么环境等。
44 | - *独特的*。不要复制现有的已打开问题。
45 | - *范围仅限于单个错误*。每个报告一个错误。
46 | 
47 | **更好的是：提交带有修复或新功能的 Pull Requests！**
48 | 
49 | **如果是反馈 BUG，请提供一个最小的、可稳定复现 BUG 的 repo，否则将直接关闭 issue**
50 | 
51 | ### 如何提交拉取请求
52 | 
53 | 1. 在我们的存储库中搜索 与您的提交相关的开放或关闭的 [Pull Requests](https://github.com/CaoMeiYouRen/rss-impact-web/pulls)，如果你不想重复努力。
54 | 
55 | 2. Fork 本项目
56 | 
57 | 3. 创建您的功能分支 ( `git checkout -b feat/your_feature`)
58 | 
59 | 4. 提交您的更改
60 | 
61 |    本项目使用 [约定式提交](https://www.conventionalcommits.org/zh-hans/v1.0.0/)，因此请遵循提交消息中的规范。
62 |    
63 |    git commit 将用于自动化生成日志，所以请勿直接提交 git commit。
64 |    
65 |    非常建议使用 [commitizen](https://github.com/commitizen/cz-cli) 工具来生成 git commit，使用 husky 约束 git commit
66 | 
67 |     ```sh
68 |     git add .
69 |     git cz # 使用 commitizen 提交！
70 |     git push # 请合并最新代码并解决冲突后提交！
71 |     #请勿直接提交git commit
72 |     #若觉得修改太多也可分开提交。先 git add 一部分，执行 git cz 提交后再提交另外一部分
73 |     ```
74 | 
75 |     关于选项，参考 [semantic-release](https://github.com/semantic-release/semantic-release) 的文档
76 | 
77 |     -   若为 BUG 修复，则选择 `fix`
78 |     -   若为新增功能，则选择 `feat`
79 |     -   若为性能优化，则选择 `perf`
80 |     -   若为移除某些功能，则选择 `BREAKING CHANGE`
81 |         -    `BREAKING CHANGE` 和其他破坏性更新，若不是为了修复 BUG，原则上将拒绝该 PR
82 | 
83 | 
84 | 5. 推送到分支 ( `git push origin feat/your_feature`)
85 | 
86 | 6. [打开一个新的 Pull Request](https://github.com/CaoMeiYouRen/rss-impact-web/compare?expand=1)
87 | 
88 | ***
89 | _This CONTRIBUTING was generated with ❤️ by [cmyr-template-cli](https://github.com/CaoMeiYouRen/cmyr-template-cli)_
90 | 


--------------------------------------------------------------------------------
/src/components/Breadcrumb.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <el-breadcrumb
 3 |         class="app-breadcrumb"
 4 |         separator="/"
 5 |     >
 6 |         <transition-group name="breadcrumb">
 7 |             <el-breadcrumb-item
 8 |                 v-for="(item, index) in breadcrumbs"
 9 |                 :key="item.path"
10 |             >
11 |                 <span
12 |                     v-if="item.redirect === 'noredirect' || index === breadcrumbs.length-1"
13 |                     class="no-redirect"
14 |                 >{{ item.meta.title }}</span>
15 |                 <a
16 |                     v-else
17 |                     @click.prevent="handleLink(item)"
18 |                 >{{ item.meta.title }}</a>
19 |             </el-breadcrumb-item>
20 |         </transition-group>
21 |     </el-breadcrumb>
22 | </template>
23 | 
24 | <script lang="ts">
25 | import { defineComponent, ref } from 'vue'
26 | import { RouteRecord, RouteRecordRaw } from 'vue-router'
27 | import { compile } from 'path-to-regexp'
28 | export default defineComponent({
29 |     name: 'Breadcrumb',
30 |     // props: {},
31 |     setup() {
32 |         const breadcrumbs = ref<RouteRecord[]>([])
33 |         return {
34 |             breadcrumbs,
35 |         }
36 |     },
37 |     watch: {
38 |         $route(route: RouteRecordRaw) {
39 |             if (route.path.startsWith('/redirect/')) {
40 |                 return
41 |             }
42 |             this.getBreadcrumb()
43 |         },
44 |     },
45 |     created() {
46 |         this.getBreadcrumb()
47 |     },
48 |     methods: {
49 |         getBreadcrumb() {
50 |             const matched = this.$route.matched.filter((item) => item.meta && item.meta.title)
51 |             this.breadcrumbs = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false)
52 |         },
53 |         pathCompile(path: string) {
54 |             const { params } = this.$route
55 |             const toPath = compile(path)
56 |             return toPath(params)
57 |         },
58 |         handleLink(item: any) {
59 |             const { redirect, path } = item
60 |             if (redirect) {
61 |                 this.$router.push(redirect)
62 |                 return
63 |             }
64 |             this.$router.push(this.pathCompile(path))
65 |         },
66 |     },
67 | })
68 | </script>
69 | 
70 | <style lang="scss" scoped>
71 | .app-breadcrumb.el-breadcrumb {
72 |     display: inline-block;
73 |     margin-left: 8px;
74 |     font-size: 14px;
75 |     line-height: 50px;
76 | 
77 |     .no-redirect {
78 |         color: #97a8be;
79 |         cursor: text;
80 |     }
81 | }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/src/permission.ts:
--------------------------------------------------------------------------------
 1 | import NProgress from 'nprogress'
 2 | import router from './router'
 3 | import '@/styles/nprogress.scss'
 4 | import { useUserStore } from './store/modules/user'
 5 | import { usePermissionStore } from './store/modules/permission'
 6 | import { Dictionary, getOtherQuery } from './utils/helper'
 7 | 
 8 | NProgress.configure({ showSpinner: false })
 9 | 
10 | const whiteList = ['/login', '/register', '/404']
11 | 
12 | router.beforeEach(async (to, _, next) => {
13 |     const userStore = useUserStore()
14 |     const permissionStore = usePermissionStore()
15 |     NProgress.start()
16 | 
17 |     const otherQuery = getOtherQuery(to.query as Dictionary<string>)
18 |     const query = {
19 |         ...otherQuery,
20 |         redirect: to.path,
21 |     }
22 |     const search = new URLSearchParams(query)
23 |     const loginUrl = `/login?${search}`
24 |     if (userStore.isLogin) { // 如果已登录
25 |         if (!userStore.isLoadRoutes) { // 未载入异步路由
26 |             try {
27 |                 await userStore.getUserInfo()
28 |                 const roles = userStore.user?.roles
29 |                 if (roles?.length) {
30 |                     permissionStore.generateRoutes(roles)
31 |                 }
32 |                 const accessedRoutes = permissionStore.dynamicRoutes
33 |                 accessedRoutes.forEach(router.addRoute)
34 |                 userStore.setIsLoadRoutes(true)
35 |                 next({ ...to, replace: true })
36 |                 return
37 |             } catch (error: any) {
38 |                 console.error(error)
39 |                 await userStore.logout()
40 |                 // ElMessage.error(error?.message || '出现错误！')
41 |                 // next(`/login?redirect=${to.path}`)
42 |                 if (_.path !== '/login') {
43 |                     next(loginUrl)
44 |                     return
45 |                 }
46 |                 search.set('redirect', '/')
47 |                 next(`/login?${search}`)
48 |                 return
49 |             }
50 |         }
51 |         if (to.path === '/login') {
52 |             // 如果已经登录则跳转 home 页面
53 |             next({ path: '/' })
54 |             return
55 |         }
56 | 
57 |         if (whiteList.includes(to.path)) {
58 |             // 如果在白名单内，直接放行
59 |             next()
60 |             return
61 |         }
62 |         // 没有权限要求直接放行
63 |         next()
64 |         return
65 |     }
66 | 
67 |     if (whiteList.includes(to.path)) {
68 |         // 如果在白名单内，直接放行
69 |         next()
70 |         return
71 |     }
72 |     // await userStore.logout()
73 |     // 其他情况回到 login 页面要求登录
74 |     next(loginUrl)
75 | })
76 | 
77 | router.afterEach((to) => {
78 |     // Finish progress bar
79 |     NProgress.done()
80 | 
81 |     // set page title
82 |     document.title = to?.meta?.title as string || document.title
83 | })
84 | 


--------------------------------------------------------------------------------
/src/components/CrudList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="app-container">
  3 |         <!-- <slot
  4 |             name="header"
  5 |             v-bind="crud"
  6 |         /> -->
  7 |         <avue-crud
  8 |             ref="formDom"
  9 |             v-model="form"
 10 |             v-model:page="page"
 11 |             v-model:search="search"
 12 |             :option="option"
 13 |             :table-loading="loading"
 14 |             :data="list"
 15 |             @row-update="rowUpdate"
 16 |             @row-save="rowSave"
 17 |             @row-del="rowDel"
 18 |             @search-change="searchChange"
 19 |             @search-reset="searchReset"
 20 |             @current-change="currentChange"
 21 |             @size-change="sizeChange"
 22 |             @refresh-change="refreshChange"
 23 |             @selection-change="selectionChange"
 24 |         />
 25 |         <!-- <slot
 26 |             name="footer"
 27 |             v-bind="crud"
 28 |         /> -->
 29 |     </div>
 30 | </template>
 31 | 
 32 | <script lang="ts" setup>
 33 | import { PropType, watch } from 'vue'
 34 | import { useRoute } from 'vue-router'
 35 | import { useCrudAjax } from '@/hooks/use-crud-ajax'
 36 | 
 37 | const route = useRoute()
 38 | 
 39 | const props = defineProps({
 40 |     model: {
 41 |         type: String,
 42 |         required: true,
 43 |     },
 44 |     alias: { // 别名
 45 |         type: String,
 46 |     },
 47 |     postGet: {
 48 |         type: Function as PropType<(data: any) => any>,
 49 |     },
 50 |     preSave: {
 51 |         type: Function as PropType<(data: any) => any>,
 52 |     },
 53 |     preUpdate: {
 54 |         type: Function as PropType<(data: any) => any>,
 55 |     },
 56 |     globalWhere: {
 57 |         type: Object,
 58 |         default: () => ({}),
 59 |     },
 60 | })
 61 | const form = defineModel<any>({ default: {} as any })
 62 | const crud = useCrudAjax(form, props.model, props, true)
 63 | const {
 64 |     option,
 65 |     loading,
 66 |     list,
 67 |     page,
 68 |     formDom,
 69 |     rowUpdate,
 70 |     rowSave,
 71 |     rowDel,
 72 |     currentChange,
 73 |     sizeChange,
 74 |     searchChange,
 75 |     searchReset,
 76 |     refreshChange,
 77 |     selectionChange,
 78 |     updateDic,
 79 |     search,
 80 | } = crud
 81 | watch(
 82 |     () => route.path,
 83 |     async () => {
 84 |         if ([`/${props.model}`, `/${props.alias}`].includes(route.path)) {
 85 |             document.title = option.value.title || document.title
 86 |             await updateDic() // 显示当前页面时刷新字典，解决新增用户等字典未更新问题
 87 |             await refreshChange() // 重新载入数据，确保数据同步
 88 |         }
 89 |     },
 90 | )
 91 | 
 92 | defineExpose({
 93 |     searchReset,
 94 |     refreshChange,
 95 |     updateDic,
 96 | })
 97 | 
 98 | </script>
 99 | 
100 | <style lang="scss" scoped>
101 | </style>
102 | 


--------------------------------------------------------------------------------
/src/hooks/use-statistics.ts:
--------------------------------------------------------------------------------
 1 | import { computed, onMounted, Ref, ref, watch } from 'vue'
 2 | import dayjs from 'dayjs'
 3 | import { get } from 'lodash-es'
 4 | import { useCrudAjax } from './use-crud-ajax'
 5 | 
 6 | /**
 7 |  *
 8 |  *
 9 |  * @author CaoMeiYouRen
10 |  * @date 2024-06-28
11 |  * @export
12 |  * @param model
13 |  * @param category 横轴数据
14 |  * @param columns 纵轴数据
15 |  */
16 | export function useStatistics(model: string, category: string, columns: string[]) {
17 |     const form = ref()
18 |     const { loading, list, getOption, page, getList, option } = useCrudAjax(form, model, undefined, false)
19 | 
20 |     page.value.pageSize = 1000 // 设置记录条数
21 | 
22 |     const defaultDate = dayjs().hour(0).minute(0).second(0).millisecond(0)
23 |     const defaultStart = defaultDate.add(-31, 'day')
24 |     const defaultEnd = defaultDate.add(1, 'day').add(-1, 'millisecond')
25 | 
26 |     const datetimerange: Ref<Date[]> = ref([
27 |         defaultStart.toDate(),
28 |         defaultEnd.toDate(),
29 |     ])
30 | 
31 |     const column = computed(() => option.value.column?.filter((e) => columns.includes(e?.prop || '')) || [])
32 | 
33 |     const chartOption = computed(() => ({
34 |         xAxis: {
35 |             type: 'category',
36 |             data: list.value.map((e) => get(e, category)),
37 |         },
38 |         yAxis: {
39 |             type: 'value',
40 |         },
41 |         series: column.value.map((col) => ({
42 |             data: list.value.map((e) => get(e, col?.prop || '')),
43 |             type: 'line',
44 |             name: col.label,
45 |         })),
46 |         tooltip: {
47 |             trigger: 'axis',
48 |         },
49 |         legend: {
50 |             data: column.value.map((e) => e.label),
51 |             orient: 'vertical',
52 |             right: 10,
53 |             top: 'center',
54 |         },
55 |     }))
56 | 
57 |     const onSearch = async () => {
58 |         const start = datetimerange.value[0]
59 |         const end = datetimerange.value[1]
60 |         loading.value = true
61 |         await getList(
62 |             {
63 |                 date: {
64 |                     $op: 'Between',
65 |                     value: [start, end],
66 |                 },
67 |             },
68 |             {
69 |                 // date: 'ASC', // 正序
70 |                 rawDate: 'ASC', // 正序
71 |                 createdAt: undefined,
72 |                 id: undefined,
73 |             },
74 |         )
75 |         loading.value = false
76 |     }
77 | 
78 |     watch([datetimerange], async () => {
79 |         await onSearch()
80 |     })
81 | 
82 |     onMounted(async () => {
83 |         await getOption()
84 |         await onSearch()
85 |     })
86 | 
87 |     return {
88 |         loading,
89 |         list,
90 |         datetimerange,
91 |         // chartData,
92 |         // chartSettings,
93 |         chartOption,
94 |         onSearch,
95 |     }
96 | }
97 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/question.yml:
--------------------------------------------------------------------------------
  1 | name: Question
  2 | description: 使用上的问题。如果是 Bug 请使用 `Bug report` 模板。此外，更建议前往 discussions 讨论。
  3 | title: "[question] "
  4 | labels: ["question"]
  5 | # assignees: []
  6 | body:
  7 |   - type: textarea
  8 |     id: question-description
  9 |     attributes:
 10 |       label: Question Description
 11 |       description: 请对您的问题进行清晰详细的描述。包括任何相关的上下文、背景信息或具体细节，以帮助他人理解您的问题。
 12 |       placeholder: 例如，我在使用某个功能时遇到了困难，具体表现为 [...]
 13 |     validations:
 14 |       required: true
 15 | 
 16 |   - type: textarea
 17 |     id: reproduction-steps
 18 |     attributes:
 19 |       label: Reproduction Steps
 20 |       description: 如果适用，请提供重现问题的步骤。
 21 |       placeholder: 1. 打开应用程序。2. 点击按钮。3. 观察到应用程序崩溃。
 22 |     validations:
 23 |       required: false
 24 | 
 25 |   - type: input
 26 |     id: screenshots
 27 |     attributes:
 28 |       label: Screenshots
 29 |       description: 如果适用，请添加屏幕截图以帮助解释您的问题
 30 |       placeholder: 例如，https://example.com/screenshot.png
 31 |     validations:
 32 |       required: false
 33 | 
 34 |   - type: markdown
 35 |     attributes:
 36 |       value: |
 37 |         **Desktop (please complete the following information):/系统信息（请填写以下信息）：**
 38 | 
 39 |   - type: input
 40 |     id: os
 41 |     attributes:
 42 |       label: Operating System
 43 |       description: 请提供操作系统信息。
 44 |       placeholder: 例如，Windows 10, macOS 11.2, Ubuntu 20.04, Docker
 45 |     validations:
 46 |       required: true
 47 | 
 48 |   - type: input
 49 |     id: browser
 50 |     attributes:
 51 |       label: Browser
 52 |       description: 请提供浏览器信息。
 53 |       placeholder: 例如，Chrome 91, Firefox 89
 54 |     validations:
 55 |       required: true
 56 | 
 57 |   - type: input
 58 |     id: nodejs-version
 59 |     attributes:
 60 |       label: NodeJS Version
 61 |       description: 请提供 NodeJS 版本信息。
 62 |       placeholder: 例如，20.0.0
 63 |     validations:
 64 |       required: true
 65 | 
 66 |   - type: input
 67 |     id: rss-impact-version
 68 |     attributes:
 69 |       label: RSS Impact Version
 70 |       description: 请提供 RSS Impact 版本信息。在 /about 页面可以找到。
 71 |       placeholder: 例如，1.0.0
 72 |     validations:
 73 |       required: true
 74 | 
 75 |   - type: input
 76 |     id: rss-impact-commit-hash
 77 |     attributes:
 78 |       label: RSS Impact Commit Hash
 79 |       description: 请提供 RSS Impact 的前端构建哈希。在 /about 页面可以找到。
 80 |       placeholder: 例如，a593056
 81 |     validations:
 82 |       required: true
 83 | 
 84 |   - type: textarea
 85 |     id: additional-context
 86 |     attributes:
 87 |       label: Additional Context
 88 |       description: 请提供任何其他相关的上下文信息。
 89 |       placeholder: 例如，我使用的是最新版本的应用程序。
 90 |     validations:
 91 |       required: false
 92 | 
 93 |   - type: markdown
 94 |     attributes:
 95 |       value: |
 96 |         **Paid Consultation/付费咨询**
 97 | 
 98 |         如果您愿意支付费用以获得更快的回复，请[前往爱发电进行赞助](https://afdian.com/a/CaoMeiYouRen)。
 99 | 
100 |         如果您不愿意付费，请耐心等待开发者回复。开发者可能因为各种各样的原因无法及时回复，还请谅解。
101 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8" />
 6 |     <link rel="icon" href="/favicon.ico" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>RSS Impact</title>
 9 |     <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4497014_2eqjac6p7rj.css">
10 |     <script src="https://s4.zstatic.net/npm/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
11 |     <script src="https://s4.zstatic.net/npm/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
12 |     <script src="https://s4.zstatic.net/npm/dayjs@1.11.13/dayjs.min.js" integrity="sha384-DpVxUeeBWjUvUV1czyIHJAjh+jYUZFu2lLakbdua5vbwOrBGi1UgaKCHjTC+x3Ky" crossorigin="anonymous"></script>
13 |     <script src="https://s4.zstatic.net/npm/antd@5.22.4/dist/antd.js" integrity="sha384-fUDl2rBZ4FKVorbun5HEm9N1KR2ZYf+PLQEDGptIzlznOGVhFBPggAXfFob/kiQ2" crossorigin="anonymous"></script>
14 |     <script src="https://s4.zstatic.net/npm/lottie-web@5.12.2/build/player/lottie.js" integrity="sha384-9PRmoHP4fdzvOWYSuumntsQhlLqWWJOgW/FQr0S6/RMgSmKPBanJxUFzL25Mt6Dp" crossorigin="anonymous"></script>
15 |     <script src="https://s4.zstatic.net/npm/@petercatai/assistant@1.0.7/dist/umd/assistant.min.js" integrity="sha384-hAOOaF95kFVDoSVwD++9io03MoEekz6J/GnwKuCHdVFZSSlRJUPW5gj9sIUXbP8t" crossorigin="anonymous"></script>
16 |     <link rel="stylesheet" href="https://s4.zstatic.net/npm/@petercatai/assistant@1.0.7/dist/umd/assistant.min.css" integrity="sha384-KvQvP/Mk8shTDe+KrMb9YPIoHSaDEgtb6aV/sCpJOp4FKuQr8sguuwYDvCFOIhKX" crossorigin="anonymous">
17 |     <script>
18 |         var _hmt = _hmt || [];
19 |         (function () {
20 |             let VITE_BAIDU_STATISTICS = '%VITE_BAIDU_STATISTICS%'
21 |             let VITE_DOMAIN = '%VITE_DOMAIN%'
22 |             let VITE_PETERCAT_AI_TOKEN = '%VITE_PETERCAT_AI_TOKEN%'
23 |             if (VITE_BAIDU_STATISTICS && location.host.endsWith(VITE_DOMAIN)) {
24 |                 var hm = document.createElement("script");
25 |                 hm.src = "https://hm.baidu.com/hm.js?" + VITE_BAIDU_STATISTICS;
26 |                 var s = document.getElementsByTagName("script")[0];
27 |                 s.parentNode.insertBefore(hm, s);
28 |             }
29 |             if (VITE_PETERCAT_AI_TOKEN && location.host.endsWith(VITE_DOMAIN)) {
30 |                 window.onload = () => {
31 |                     window.petercat = PetercatLUI.initAssistant({
32 |                         apiDomain: 'https://api.petercat.ai',
33 |                         token: VITE_PETERCAT_AI_TOKEN,
34 |                         clearMessage: true
35 |                     });
36 |                 }
37 |             }
38 |         })();
39 |     </script>
40 | </head>
41 | 
42 | <body>
43 |     <div id="app"></div>
44 |     <script type="module" src="/src/main.ts"></script>
45 | </body>
46 | 
47 | </html>
48 | 


--------------------------------------------------------------------------------
/src/views/admin/DailyCount.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <!-- 右上角添加按钮 -->
 4 |         <el-row :gutter="20" justify="end">
 5 |             <el-col
 6 |                 :sm="24"
 7 |                 :md="12"
 8 |                 :lg="8"
 9 |             >
10 |                 <label>天数：</label>
11 |                 <el-input-number
12 |                     v-model="dayNum"
13 |                     :min="1"
14 |                     :max="365"
15 |                 />
16 |                 &nbsp;
17 |                 <el-button type="warning" @click="onReCount">
18 |                     <el-icon><Refresh /></el-icon>
19 |                     &nbsp;
20 |                     重新统计
21 |                 </el-button>
22 |             </el-col>
23 |         </el-row>
24 |         <el-row :gutter="20">
25 |             <el-col :sm="24">
26 |                 <label>时间范围：</label>
27 |                 <el-date-picker
28 |                     v-model="datetimerange"
29 |                     type="datetimerange"
30 |                     range-separator="至"
31 |                     start-placeholder="开始日期"
32 |                     end-placeholder="结束日期"
33 |                 />
34 |             </el-col>
35 |             <el-col :sm="24">
36 |                 <VChart class="chart" :option="chartOption" />
37 |             </el-col>
38 |             <el-col :sm="24">
39 |                 <CrudList model="daily-count" />
40 |             </el-col>
41 |         </el-row>
42 |     </div>
43 | </template>
44 | 
45 | <script lang="ts" setup>
46 | import { use } from 'echarts/core'
47 | import { CanvasRenderer } from 'echarts/renderers'
48 | import { LineChart } from 'echarts/charts'
49 | import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
50 | import VChart from 'vue-echarts'
51 | import { ElMessage, ElMessageBox } from 'element-plus'
52 | import { ref } from 'vue'
53 | import { useStatistics } from '@/hooks/use-statistics'
54 | import { api } from '@/api'
55 | 
56 | use([GridComponent, LineChart, CanvasRenderer, TooltipComponent, LegendComponent])
57 | 
58 | const {
59 |     datetimerange,
60 |     chartOption,
61 |     onSearch,
62 | } = useStatistics('daily-count', 'date',
63 |     ['articleCount', 'resourceCount', 'webhookLogCount', 'feedCount', 'categoryCount', 'hookCount', 'customQueryCount', 'proxyConfigCount', 'userCount'],
64 | )
65 | 
66 | const dayNum = ref(30)
67 | 
68 | async function onReCount() {
69 |     try {
70 |         await ElMessageBox.confirm(`确定重新统计 ${dayNum.value} 天内的日志吗？此操作可以修复错误的统计数据，但不可回退！`, '提示', {
71 |             confirmButtonText: '确定',
72 |             cancelButtonText: '取消',
73 |             type: 'warning',
74 |         })
75 |         await api.api.dailyCountReCount({ dayNum: dayNum.value })
76 |         ElMessage.success('重新统计成功')
77 |         await onSearch()
78 |     } catch (error) {
79 |         console.error(error)
80 |         if (error === 'cancel') {
81 |             return
82 |         }
83 |         ElMessage.error('重新统计失败')
84 |     }
85 | }
86 | 
87 | </script>
88 | 
89 | <style lang="scss" scoped>
90 | .chart {
91 |     height: 500px;
92 | }
93 | </style>
94 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.yml:
--------------------------------------------------------------------------------
  1 | name: Bug Report
  2 | description: 反馈 Bug
  3 | title: "[bug] "
  4 | labels: ["bug"]
  5 | # assignees: []
  6 | body:
  7 |   - type: textarea
  8 |     id: bug-description
  9 |     attributes:
 10 |       label: Bug Description
 11 |       description: 请提供对 bug 的清晰简洁的描述。
 12 |       placeholder: 例如，当我点击按钮时，应用程序崩溃了。
 13 |     validations:
 14 |       required: true
 15 | 
 16 |   - type: textarea
 17 |     id: reproduction-steps
 18 |     attributes:
 19 |       label: Reproduction Steps
 20 |       description: 请提供再现 bug 的步骤。
 21 |       placeholder: 1. 打开应用程序。2. 点击按钮。3. 观察到应用程序崩溃。
 22 |     validations:
 23 |       required: true
 24 | 
 25 |   - type: textarea
 26 |     id: expected-behavior
 27 |     attributes:
 28 |       label: Expected Behavior
 29 |       description: 请描述你期望发生的行为。
 30 |       placeholder: 例如，点击按钮后，应用程序应该正常运行。
 31 |     validations:
 32 |       required: true
 33 | 
 34 |   - type: input
 35 |     id: screenshots
 36 |     attributes:
 37 |       label: Screenshots
 38 |       description: 如果适用，请添加屏幕截图以帮助解释您的问题。
 39 |       placeholder: 例如，https://example.com/screenshot.png
 40 |     validations:
 41 |       required: false
 42 | 
 43 |   - type: markdown
 44 |     attributes:
 45 |       value: |
 46 |         **Desktop (please complete the following information):/系统信息（请填写以下信息）：**
 47 | 
 48 |   - type: input
 49 |     id: os
 50 |     attributes:
 51 |       label: Operating System
 52 |       description: 请提供操作系统信息。
 53 |       placeholder: 例如，Windows 10, macOS 11.2, Ubuntu 20.04, Docker
 54 |     validations:
 55 |       required: true
 56 | 
 57 |   - type: input
 58 |     id: browser
 59 |     attributes:
 60 |       label: Browser
 61 |       description: 请提供浏览器信息。
 62 |       placeholder: 例如，Chrome 91, Firefox 89
 63 |     validations:
 64 |       required: true
 65 | 
 66 |   - type: input
 67 |     id: nodejs-version
 68 |     attributes:
 69 |       label: NodeJS Version
 70 |       description: 请提供 NodeJS 版本信息。
 71 |       placeholder: 例如，20.0.0
 72 |     validations:
 73 |       required: true
 74 | 
 75 |   - type: input
 76 |     id: rss-impact-version
 77 |     attributes:
 78 |       label: RSS Impact Version
 79 |       description: 请提供 RSS Impact 版本信息。在 /about 页面可以找到。
 80 |       placeholder: 例如，1.0.0
 81 |     validations:
 82 |       required: true
 83 | 
 84 |   - type: input
 85 |     id: rss-impact-commit-hash
 86 |     attributes:
 87 |       label: RSS Impact Commit Hash
 88 |       description: 请提供 RSS Impact 的前端构建哈希。在 /about 页面可以找到。
 89 |       placeholder: 例如，a593056
 90 |     validations:
 91 |       required: true
 92 | 
 93 |   - type: textarea
 94 |     id: additional-context
 95 |     attributes:
 96 |       label: Additional Context
 97 |       description: 在此处添加有关该问题的任何其他上下文。
 98 |       placeholder: 例如，我使用的是最新版本的应用程序。
 99 |     validations:
100 |       required: false
101 | 
102 |   - type: markdown
103 |     attributes:
104 |       value: |
105 |         **Paid Consultation/付费咨询**
106 | 
107 |         如果您愿意支付费用以获得更快的回复，请[前往爱发电进行赞助](https://afdian.com/a/CaoMeiYouRen)。
108 | 
109 |         如果您不愿意付费，请耐心等待开发者回复。开发者可能因为各种各样的原因无法及时回复，还请谅解。
110 | 


--------------------------------------------------------------------------------
/src/views/admin/System.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <el-row :gutter="20">
  4 |             <el-col
  5 |                 :sm="24"
  6 |                 :md="12"
  7 |                 :lg="8"
  8 |             >
  9 |                 <CrudForm
 10 |                     ref="formDom"
 11 |                     v-model="databaseInfo"
 12 |                     method="GET"
 13 |                     url="/system/getDatabaseInfo"
 14 |                 />
 15 |                 <el-tooltip
 16 |                     class="box-item"
 17 |                     effect="dark"
 18 |                     content="触发 sqlite 的 VACUUM 命令以释放未使用空间"
 19 |                     placement="bottom"
 20 |                 >
 21 |                     <el-button
 22 |                         v-if="enableSqliteVacuum"
 23 |                         type="primary"
 24 |                         @click="onCompactDatabase"
 25 |                     >
 26 |                         压缩数据库
 27 |                     </el-button>
 28 |                 </el-tooltip>
 29 |                 <el-tooltip
 30 |                     class="box-item"
 31 |                     effect="dark"
 32 |                     content="禁用所有不包含 Hook 和 自定义查询的订阅"
 33 |                     placement="bottom"
 34 |                 >
 35 |                     <el-button
 36 |                         v-if="enableSqliteVacuum"
 37 |                         type="primary"
 38 |                         @click="onDisableEmptyFeeds"
 39 |                     >
 40 |                         禁用空订阅
 41 |                     </el-button>
 42 |                 </el-tooltip>
 43 |             </el-col>
 44 |             <el-col
 45 |                 :sm="24"
 46 |                 :md="12"
 47 |                 :lg="8"
 48 |             >
 49 |                 <CrudForm method="GET" url="/system/getOsInfo" />
 50 |             </el-col>
 51 |         </el-row>
 52 |     </div>
 53 | </template>
 54 | 
 55 | <script lang="ts" setup>
 56 | import { ref, computed, shallowRef } from 'vue'
 57 | import { ElMessage, ElMessageBox } from 'element-plus'
 58 | import { DatabaseInfoDto } from '@/api/api'
 59 | import { api } from '@/api'
 60 | 
 61 | const formDom = shallowRef()
 62 | 
 63 | const databaseInfo = ref<DatabaseInfoDto>({} as any)
 64 | 
 65 | const enableSqliteVacuum = computed(() => databaseInfo.value.type === 'sqlite')
 66 | // 压缩数据库
 67 | const onCompactDatabase = async () => {
 68 |     try {
 69 |         await api.api.systemSqliteVacuum()
 70 |         ElMessage.success('执行成功！')
 71 |         if (formDom.value) {
 72 |             await formDom.value.initForm()
 73 |         }
 74 |     } catch (error) {
 75 |         ElMessage.error('执行失败！')
 76 |         console.error(error)
 77 |     }
 78 | }
 79 | 
 80 | // 禁用空订阅
 81 | const onDisableEmptyFeeds = async () => {
 82 |     try {
 83 |         // 警告
 84 |         const action = await ElMessageBox.confirm('确定禁用所有不包含 Hook 和 自定义查询的订阅吗？', '提示', {
 85 |             confirmButtonText: '确定',
 86 |             cancelButtonText: '取消',
 87 |             type: 'warning',
 88 |         })
 89 |         if (action === 'confirm') {
 90 |             await api.api.systemDisableEmptyFeeds()
 91 |             ElMessage.success('执行成功！')
 92 |         }
 93 |     } catch (error) {
 94 |         ElMessage.error('执行失败！')
 95 |         console.error(error)
 96 |     }
 97 | }
 98 | 
 99 | </script>
100 | 
101 | <!-- <style lang="scss" scoped>
102 | </style> -->
103 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center">rss-impact-web </h1>
  2 | <p>
  3 |   <img alt="Version" src="https://img.shields.io/github/package-json/v/CaoMeiYouRen/rss-impact-web" />
  4 |   <a href="https://github.com/CaoMeiYouRen/rss-impact-web/actions?query=workflow%3ARelease" target="_blank">
  5 |     <img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/CaoMeiYouRen/rss-impact-web/release.yml?branch=master">
  6 |   </a>
  7 |   <img src="https://img.shields.io/badge/node-%3E%3D20-blue.svg" />
  8 |   <a href="https://github.com/CaoMeiYouRen/rss-impact-web#readme" target="_blank">
  9 |     <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
 10 |   </a>
 11 |   <a href="https://github.com/CaoMeiYouRen/rss-impact-web/graphs/commit-activity" target="_blank">
 12 |     <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" />
 13 |   </a>
 14 |   <a href="https://github.com/CaoMeiYouRen/rss-impact-web/blob/master/LICENSE" target="_blank">
 15 |     <img alt="License: AGPL-3.0" src="https://img.shields.io/github/license/CaoMeiYouRen/rss-impact-web?color=yellow" />
 16 |   </a>
 17 | </p>
 18 | 
 19 | 
 20 | > RSS + Hook = RSS Impact
 21 | >
 22 | > 一个支持 Hook 的 RSS 订阅工具。
 23 | >
 24 | > 本项目为前端部分，后端部分请参考 [rss-impact-server](https://github.com/CaoMeiYouRen/rss-impact-server)。
 25 | >
 26 | > 当 RSS Impact 开发完毕的时候，您将收到通知邮件，**[点击链接立即加入等待名单](https://waitlist.cmyr.dev)**。
 27 | 
 28 | ## 🏠 主页
 29 | 
 30 | [https://github.com/CaoMeiYouRen/rss-impact-web#readme](https://github.com/CaoMeiYouRen/rss-impact-web#readme)
 31 | 
 32 | 
 33 | ## ✨ Demo
 34 | 
 35 | https://rss-demo.cmyr.dev
 36 | 
 37 | > Demo 站开放注册，可以随意体验。
 38 | >
 39 | > Demo 站不保证可用性，仅供演示使用。
 40 | >
 41 | > 注意：Demo 站每次部署都会重置数据，因此仅供体验，请勿存放重要数据！
 42 | 
 43 | 
 44 | ## 📦 依赖要求
 45 | 
 46 | 
 47 | - node >=20
 48 | 
 49 | ## 🚀 安装
 50 | 
 51 | ```sh
 52 | npm install
 53 | ```
 54 | 
 55 | ## 🛠️ 开发
 56 | 
 57 | ```sh
 58 | npm run dev
 59 | ```
 60 | 
 61 | ## 🔧 编译
 62 | 
 63 | ```sh
 64 | npm run build
 65 | ```
 66 | 
 67 | ## 🔍 Lint
 68 | 
 69 | ```sh
 70 | npm run lint
 71 | ```
 72 | 
 73 | ## 💾 Commit
 74 | 
 75 | ```sh
 76 | npm run commit
 77 | ```
 78 | 
 79 | 
 80 | ## 👤 作者
 81 | 
 82 | 
 83 | **CaoMeiYouRen**
 84 | 
 85 | * Website: [https://blog.cmyr.ltd/](https://blog.cmyr.ltd/)
 86 | 
 87 | * GitHub: [@CaoMeiYouRen](https://github.com/CaoMeiYouRen)
 88 | 
 89 | 
 90 | ## 🤝 贡献
 91 | 
 92 | 欢迎 贡献、提问或提出新功能！<br />如有问题请查看 [issues page](https://github.com/CaoMeiYouRen/rss-impact-web/issues). <br/>贡献或提出新功能可以查看[contributing guide](https://github.com/CaoMeiYouRen/rss-impact-web/blob/master/CONTRIBUTING.md).
 93 | 
 94 | ## 💰 支持
 95 | 
 96 | 如果觉得这个项目有用的话请给一颗⭐️，非常感谢。
 97 | 
 98 | <a href="https://afdian.com/@CaoMeiYouRen">
 99 |   <img src="https://cdn.jsdelivr.net/gh/CaoMeiYouRen/image-hosting-01@master/images/202306192324870.png" width="312px" height="78px" alt="在爱发电支持我">
100 | </a>
101 | 
102 | ## 🌟 Star History
103 | 
104 | [![Star History Chart](https://api.star-history.com/svg?repos=CaoMeiYouRen/rss-impact-web&type=Date)](https://star-history.com/#CaoMeiYouRen/rss-impact-web&Date)
105 | 
106 | ## 📝 License
107 | 
108 | 1. 本项目采用 AGPLv3 授权，并附加以下额外条件。
109 | 2. 额外条件请参考 [License](https://github.com/CaoMeiYouRen/rss-impact-server?tab=readme-ov-file#-license)
110 | 
111 | Copyright © 2024 [CaoMeiYouRen](https://github.com/CaoMeiYouRen).<br />
112 | This project is [AGPL-3.0](https://github.com/CaoMeiYouRen/rss-impact-web/blob/master/LICENSE) licensed.
113 | 
114 | ***
115 | _This README was generated with ❤️ by [cmyr-template-cli](https://github.com/CaoMeiYouRen/cmyr-template-cli)_
116 | 


--------------------------------------------------------------------------------
/src/views/data/Feed.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <el-collapse v-model="activeNames">
  4 |             <el-collapse-item name="1">
  5 |                 <template #title>
  6 |                     <h3>快速添加订阅</h3>
  7 |                 </template>
  8 |                 <CrudForm
  9 |                     ref="crudFormDom"
 10 |                     url="/feed/quickCreate"
 11 |                     :pre-submit="preSave"
 12 |                     @success="onSuccess"
 13 |                     @reset-change="onReset"
 14 |                 />
 15 |             </el-collapse-item>
 16 |             <el-collapse-item name="2">
 17 |                 <template #title>
 18 |                     <h3>从 OPML 文件导入</h3>
 19 |                 </template>
 20 |                 <CrudForm
 21 |                     url="/feed/import"
 22 |                     :upload-after="onImportSuccess"
 23 |                     @success="onImportSuccess"
 24 |                 />
 25 |             </el-collapse-item>
 26 |             <el-collapse-item name="3">
 27 |                 <template #title>
 28 |                     <h3>导出为 OPML 文件</h3>
 29 |                 </template>
 30 |                 <el-button type="primary" @click="download">
 31 |                     <el-icon><Download /></el-icon> 导出
 32 |                 </el-button>
 33 |             </el-collapse-item>
 34 |         </el-collapse>
 35 | 
 36 |         <CrudList
 37 |             ref="crudListDom"
 38 |             model="feed"
 39 |             alias="feed"
 40 |             :post-get="postGet"
 41 |             :pre-save="preSave"
 42 |             :pre-update="preUpdate"
 43 |         />
 44 |     </div>
 45 | </template>
 46 | 
 47 | <script lang="ts" setup>
 48 | import { ElMessage } from 'element-plus'
 49 | import { shallowRef, watch, ref } from 'vue'
 50 | import { useRoute } from 'vue-router'
 51 | import { saveAs } from 'file-saver'
 52 | import { useIdTransformer } from '@/hooks/use-id-transformer'
 53 | import CrudForm from '@/components/CrudForm.vue'
 54 | import CrudList from '@/components/CrudList.vue'
 55 | import { api } from '@/api'
 56 | import { getSafeFileName } from '@/utils/helper'
 57 | import { timeFormat } from '@/utils/time'
 58 | 
 59 | const route = useRoute()
 60 | 
 61 | const { postGet, preSave, preUpdate } = useIdTransformer(['hooks', 'customQueries'])
 62 | const crudFormDom = shallowRef<InstanceType<typeof CrudForm> | null>(null)
 63 | const crudListDom = shallowRef<InstanceType<typeof CrudList> | null>(null)
 64 | const activeNames = ref(['1'])
 65 | 
 66 | const onSuccess = async () => {
 67 |     ElMessage.success('添加成功！')
 68 |     await crudListDom.value?.updateDic()
 69 |     await crudListDom.value?.refreshChange()
 70 | }
 71 | 
 72 | const onReset = async () => {
 73 |     crudFormDom.value?.initForm()
 74 | }
 75 | 
 76 | const onImportSuccess = async () => {
 77 |     ElMessage.success('添加成功！')
 78 |     await crudListDom.value?.updateDic()
 79 |     await crudListDom.value?.refreshChange()
 80 | }
 81 | 
 82 | const download = async () => {
 83 |     try {
 84 |         const content = await api.api.feedExportByOpml()
 85 |         const blob = new Blob([content], { type: 'application/xml; charset=utf-8' })
 86 |         const filename = getSafeFileName(`rss-impact-${timeFormat(new Date(), 'YYYYMMDDHHmmss')}`)
 87 |         saveAs(blob, `${filename}.xml`)
 88 |         ElMessage.success('导出成功！')
 89 |     } catch (error) {
 90 |         ElMessage.error('导出失败！')
 91 |     }
 92 | }
 93 | 
 94 | watch(
 95 |     () => route.path,
 96 |     async () => {
 97 |         if (route.path.includes('/feed')) {
 98 |             await crudFormDom.value?.updateDic() // 显示当前页面时刷新字典，解决新增用户等字典未更新问题
 99 |         }
100 |     },
101 | )
102 | 
103 | </script>
104 | 
105 | <style lang="scss" scoped>
106 | </style>
107 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
  1 | import path from 'path'
  2 | import { execSync } from 'child_process'
  3 | import { env } from 'process'
  4 | import { defineConfig } from 'vite'
  5 | import vue from '@vitejs/plugin-vue'
  6 | import tsconfigPaths from 'vite-tsconfig-paths'
  7 | import { vitePluginSwaggerTypescriptApi, GenerateApiOption } from 'vite-plugin-swagger-typescript-api'
  8 | import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  9 | import Components from 'unplugin-vue-components/vite'
 10 | import AutoImport from 'unplugin-auto-import/vite'
 11 | import dayjs from 'dayjs'
 12 | import Sonda from 'sonda/vite'
 13 | 
 14 | // 生成 gitHash
 15 | let gitHash = process.env.HEROKU_SLUG_COMMIT?.slice(0, 7) || process.env.VERCEL_GIT_COMMIT_SHA?.slice(0, 7)
 16 | let gitDate: string | undefined
 17 | if (!gitHash) {
 18 |     try {
 19 |         gitHash = execSync('git rev-parse HEAD').toString().trim().slice(0, 7)
 20 |         const gitDateValue = new Date(execSync('git log -1 --format=%cd').toString().trim())
 21 |         if (dayjs(gitDateValue).isValid()) {
 22 |             gitDate = gitDateValue.toISOString()
 23 |         } else {
 24 |             gitDate = new Date().toISOString()
 25 |         }
 26 |     } catch {
 27 |         gitHash = 'unknown'
 28 |         gitDate = 'unknown'
 29 |     }
 30 | }
 31 | 
 32 | if (!gitDate) {
 33 |     gitDate = new Date().toISOString()
 34 | }
 35 | 
 36 | env.VITE_GIT_HASH = gitHash
 37 | env.VITE_GIT_DATE = gitDate
 38 | 
 39 | // https://vitejs.dev/config/
 40 | export default defineConfig({
 41 |     plugins: [
 42 |         vue(),
 43 |         tsconfigPaths(),
 44 |         vitePluginSwaggerTypescriptApi({ // swagger-typescript-api 的配置，具体可参考 https://github.com/acacode/swagger-typescript-api
 45 |             name: 'api.ts', // 要生成的文件名称
 46 |             output: path.resolve('./src/api'), // 生成的文件所在的文件夹，注意要使用 path.resolve 解析出绝对路径，否则路径可能会有错误
 47 |             url: 'http://localhost:3000/docs-json', // 如果从远程接口载入
 48 |             httpClientType: 'axios', // or "fetch" 生成的接口类型
 49 |             primitiveTypeConstructs: (constructs) => ({
 50 |                 ...constructs,
 51 |                 string: {
 52 |                     'date-time': 'Date', // 修复 Date 类型问题
 53 |                 },
 54 |             } as any),
 55 |             unwrapResponseData: true, // 解包 response 中的 data
 56 |         } as GenerateApiOption),
 57 |         AutoImport({
 58 |             resolvers: [ElementPlusResolver()],
 59 |         }),
 60 |         Components({
 61 |             resolvers: [ElementPlusResolver()],
 62 |         }),
 63 |         Sonda({
 64 |             enabled: process.env.NODE_ENV === 'production', // 是否启用，仅在生产环境启用
 65 |             format: 'html',
 66 |             filename: 'sonda-report.html',
 67 |             open: false, // 是否自动打开浏览器
 68 |             // detailed: true, // 是否显示详细信息
 69 |             sources: true, // 是否显示源码
 70 |             gzip: true, // 是否启用 gzip 压缩
 71 |             brotli: true, // 是否启用 brotli 压缩
 72 |         }),
 73 |     ],
 74 |     server: {
 75 |         port: Number(process.env.PORT) || 4400,
 76 |         open: true,
 77 |         proxy: {
 78 |             '/api': {
 79 |                 target: 'http://127.0.0.1:3000',
 80 |                 changeOrigin: true,
 81 |                 // rewrite: (url) => url.replace(/^\/api/, ''),
 82 |             },
 83 |         },
 84 |     },
 85 |     resolve: {
 86 |         alias: {
 87 |             '@': path.resolve(__dirname, 'src'),
 88 |         },
 89 |     },
 90 |     css: {
 91 |         preprocessorOptions: {
 92 |             scss: {
 93 |                 additionalData: '@import "@/styles/mixins.scss"; @import "@/styles/variables.scss";', // 添加公共样式
 94 |                 silenceDeprecations: ['import', 'legacy-js-api'], // 忽略警告
 95 |             },
 96 |         },
 97 |     },
 98 |     build: {
 99 |         // 增大代码块大小警告的阈值
100 |         chunkSizeWarningLimit: 1024,
101 |         minify: 'esbuild',
102 |         sourcemap: true,
103 |         rollupOptions: {
104 |             output: {
105 |                 // 手动划分代码块
106 |                 manualChunks: {
107 |                     vendor: ['vue', 'vue-router', 'pinia', '@sentry/vue', '@vueuse/core'],
108 |                     elementPlusIcons: ['@element-plus/icons-vue'],
109 |                     // elementPlus: ['element-plus'],
110 |                     // avue: ['@smallwei/avue'],
111 |                     echarts: ['echarts', 'vue-echarts'],
112 |                     utils: ['axios', 'dayjs', 'lodash-es', 'file-saver', 'nprogress', 'path-browserify', 'path-to-regexp'],
113 |                 },
114 |             },
115 |         },
116 |     },
117 |     define: {
118 |         'process.env': {},
119 |     },
120 | })
121 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="about-container">
  3 |         <div class="about-content">
  4 |             <h1 class="about-title">
  5 |                 关于 RSS Impact
  6 |             </h1>
  7 |             <p class="about-description">
  8 |                 RSS + Hook = RSS Impact<br>
  9 |                 一个支持 Hook 的 RSS 订阅工具。
 10 |             </p>
 11 |             <p class="about-description" />
 12 | 
 13 |             <h2 class="about-subtitle">
 14 |                 作者
 15 |             </h2>
 16 |             <p class="about-description">
 17 |                 <b>CaoMeiYouRen</b><br>
 18 |                 博客: <a href="https://blog.cmyr.ltd" target="_blank">https://blog.cmyr.ltd</a><br>
 19 |                 GitHub: <a href="https://github.com/CaoMeiYouRen" target="_blank">@CaoMeiYouRen</a>
 20 |             </p>
 21 | 
 22 |             <h2 class="about-subtitle">
 23 |                 项目链接
 24 |             </h2>
 25 |             <p class="about-description">
 26 |                 GitHub:<br>
 27 |                 前端部分：<a href="https://github.com/CaoMeiYouRen/rss-impact-web" target="_blank">rss-impact-web</a><br>
 28 |                 后端部分：<a href="https://github.com/CaoMeiYouRen/rss-impact-server" target="_blank">rss-impact-server</a>
 29 |                 <br>
 30 |                 Demo: <a href="https://rss-demo.cmyr.dev" target="_blank">Demo 站</a>
 31 |             </p>
 32 | 
 33 |             <h2 class="about-subtitle">
 34 |                 前端构建信息
 35 |             </h2>
 36 |             <p class="about-description">
 37 |                 构建哈希：<a :href="frontendCommitUrl" :title="frontendCommit">{{ frontendCommit }}</a><br>
 38 |                 构建时间：{{ frontendGitDate }}
 39 |             </p>
 40 |             <h2 class="about-subtitle">
 41 |                 后端构建信息
 42 |             </h2>
 43 |             <p class="about-description">
 44 |                 版本号：{{ backendVersion }}<br>
 45 |                 构建哈希：<a :href="backendCommitUrl" :title="backendCommit">{{ backendCommit }}</a><br>
 46 |                 构建时间：{{ backendGitDate }}
 47 |             </p>
 48 |         </div>
 49 |     </div>
 50 | </template>
 51 | 
 52 | <script setup lang="ts">
 53 | import dayjs from 'dayjs'
 54 | import { onMounted, ref } from 'vue'
 55 | import { VITE_GIT_HASH, VITE_GIT_DATE } from '@/config/env'
 56 | import { timeFormat } from '@/utils/time'
 57 | import { api } from '@/api'
 58 | 
 59 | const frontendCommit = VITE_GIT_HASH
 60 | const frontendCommitUrl = `https://github.com/CaoMeiYouRen/rss-impact-web/commit/${frontendCommit}`
 61 | const frontendGitDate = dayjs(VITE_GIT_DATE).isValid() ? timeFormat(VITE_GIT_DATE, 'YYYY-MM-DD HH:mm:ss') : 'unknown'
 62 | 
 63 | const backendCommit = ref('')
 64 | const backendCommitUrl = ref('')
 65 | const backendGitDate = ref('unknown')
 66 | const backendVersion = ref('unknown')
 67 | 
 68 | onMounted(async () => {
 69 |     const res = await api.api.appGetHello() as any
 70 |     backendCommit.value = res.gitHash
 71 |     backendCommitUrl.value = res.commitUrl
 72 |     backendGitDate.value = timeFormat(res.gitDate, 'YYYY-MM-DD HH:mm:ss')
 73 |     backendVersion.value = res.version
 74 | })
 75 | 
 76 | </script>
 77 | 
 78 | <style lang="scss" scoped>
 79 | .about-container {
 80 |     display: flex;
 81 |     justify-content: center;
 82 |     align-items: start;
 83 |     width: 100%;
 84 |     height: 100vh;
 85 | 
 86 |     // background: linear-gradient(135deg, #83a4d4, #b6fbff);
 87 |     // 设置背景颜色为浅灰色
 88 |     // background-color: rgba(245, 245, 245, 0.9);
 89 |     color: #333;
 90 |     font-family: 'Helvetica Neue', Arial, sans-serif;
 91 | 
 92 |     .about-content {
 93 |         background: rgb(255 255 255 / 0.9);
 94 |         padding: 40px;
 95 |         border-radius: 10px;
 96 |         box-shadow: 0 10px 20px rgb(0 0 0 / 0.1);
 97 |         text-align: center;
 98 |         max-width: 600px;
 99 |         width: 100%;
100 | 
101 |         .about-title {
102 |             font-size: 1.8em;
103 |             margin-bottom: 20px;
104 |             color: #409eff;
105 |         }
106 | 
107 |         .about-subtitle {
108 |             font-size: 1.5rem;
109 |             margin-top: 30px;
110 |             margin-bottom: 15px;
111 |             color: #409eff;
112 |         }
113 | 
114 |         .about-description {
115 |             font-size: 1.2rem;
116 |             margin-bottom: 20px;
117 |             color: #666;
118 | 
119 |             a {
120 |                 color: #409eff;
121 |                 text-decoration: none;
122 |                 transition: color 0.3s ease;
123 | 
124 |                 &:hover {
125 |                     color: #66b1ff;
126 |                 }
127 |             }
128 |         }
129 |     }
130 | }
131 | </style>
132 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "rss-impact-web",
  3 |   "private": true,
  4 |   "version": "0.1.0",
  5 |   "type": "module",
  6 |   "scripts": {
  7 |     "lint:css": "stylelint src/**/*.{html,css,scss,sass,vue} --fix",
  8 |     "lint": "cross-env NODE_ENV=production eslint src --fix --ext .js,.ts,.vue",
  9 |     "release": "semantic-release",
 10 |     "dev": "vite",
 11 |     "build": "vite build",
 12 |     "preview": "vite preview",
 13 |     "commit": "cz",
 14 |     "prepare": "husky install",
 15 |     "dev:vercel": "vercel dev",
 16 |     "deploy:vercel": "vercel",
 17 |     "build:vercel": "vercel build"
 18 |   },
 19 |   "dependencies": {
 20 |     "@element-plus/icons-vue": "^2.3.2",
 21 |     "@sentry/vue": "^10.30.0",
 22 |     "@smallwei/avue": "^3.7.3",
 23 |     "@vercel/node": "^5.5.15",
 24 |     "@vueuse/core": "^14.1.0",
 25 |     "@vueuse/integrations": "^14.0.0",
 26 |     "animate.css": "^4.1.1",
 27 |     "axios": "^1.13.1",
 28 |     "dayjs": "^1.11.19",
 29 |     "echarts": "^5.6.0",
 30 |     "element-plus": "^2.11.9",
 31 |     "file-saver": "^2.0.5",
 32 |     "lodash-es": "^4.17.21",
 33 |     "normalize.css": "^8.0.1",
 34 |     "nprogress": "^0.2.0",
 35 |     "path-browserify": "^1.0.1",
 36 |     "path-to-regexp": "^8.3.0",
 37 |     "pinia": "^3.0.4",
 38 |     "shepherd.js": "^14.5.1",
 39 |     "universal-cookie": "^8.0.1",
 40 |     "vue": "^3.5.24",
 41 |     "vue-echarts": "^7.0.3",
 42 |     "vue-router": "^4.6.3",
 43 |     "vue-shepherd": "^5.0.1",
 44 |     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
 45 |   },
 46 |   "devDependencies": {
 47 |     "@cao-mei-you-ren/avue-types": "^1.1.0",
 48 |     "@commitlint/cli": "^20.1.0",
 49 |     "@semantic-release/changelog": "^6.0.3",
 50 |     "@semantic-release/git": "^10.0.1",
 51 |     "@types/file-saver": "^2.0.7",
 52 |     "@types/lodash-es": "^4.17.12",
 53 |     "@types/node": "^24.10.1",
 54 |     "@types/nprogress": "^0.2.3",
 55 |     "@vitejs/plugin-vue": "^6.0.3",
 56 |     "commitizen": "^4.3.1",
 57 |     "commitlint-config-cmyr": "1.0.0",
 58 |     "conventional-changelog-cmyr-config": "^3.0.0",
 59 |     "cross-env": "^10.1.0",
 60 |     "cz-conventional-changelog-cmyr": "^2.0.0",
 61 |     "eslint": "^9.39.1",
 62 |     "eslint-config-cmyr": "^2.0.1",
 63 |     "eslint-plugin-vue": "^10.6.2",
 64 |     "husky": "^9.1.7",
 65 |     "lint-staged": "^16.2.7",
 66 |     "postcss": "^8.4.31",
 67 |     "sass": "^1.94.2",
 68 |     "semantic-release": "^21.0.1",
 69 |     "sonda": "^0.10.1",
 70 |     "stylelint": "^16.26.1",
 71 |     "stylelint-config-cmyr": "^1.0.0",
 72 |     "typescript": "^5.9.3",
 73 |     "unplugin-auto-import": "^20.3.0",
 74 |     "unplugin-vue-components": "^30.0.0",
 75 |     "vercel": "^48.12.0",
 76 |     "vite": "^7.2.2",
 77 |     "vite-plugin-swagger-typescript-api": "^1.0.1",
 78 |     "vite-tsconfig-paths": "^5.1.4",
 79 |     "vue-tsc": "^3.1.5"
 80 |   },
 81 |   "config": {
 82 |     "commitizen": {
 83 |       "path": "cz-conventional-changelog-cmyr"
 84 |     }
 85 |   },
 86 |   "author": "CaoMeiYouRen",
 87 |   "description": "一个基于 RSS 的 Hook 系统。本项目为前端部分",
 88 |   "keywords": [
 89 |     "RSS",
 90 |     "Hook",
 91 |     "Push",
 92 |     "BitTorrent",
 93 |     "Notification"
 94 |   ],
 95 |   "license": "AGPL-3.0",
 96 |   "engines": {
 97 |     "node": ">=20"
 98 |   },
 99 |   "homepage": "https://github.com/CaoMeiYouRen/rss-impact-web#readme",
100 |   "repository": {
101 |     "type": "git",
102 |     "url": "git+https://github.com/CaoMeiYouRen/rss-impact-web.git"
103 |   },
104 |   "bugs": {
105 |     "url": "https://github.com/CaoMeiYouRen/rss-impact-web/issues"
106 |   },
107 |   "changelog": {
108 |     "language": "zh"
109 |   },
110 |   "lint-staged": {
111 |     "*.{js,ts,vue}": [
112 |       "npm run lint",
113 |       "git add"
114 |     ]
115 |   },
116 |   "pnpm": {
117 |     "overrides": {
118 |       "compare-func": "2.0.0",
119 |       "postcss": "$postcss",
120 |       "yargs-parser": "^21.1.1",
121 |       "braces": "^3.0.3",
122 |       "trim-newlines": "^4.1.1",
123 |       "trim": "^1.0.1",
124 |       "tmp": "~0.2.4",
125 |       "micromatch": "^4.0.8",
126 |       "cookie": "^0.7.0",
127 |       "path-to-regexp": "$path-to-regexp",
128 |       "nanoid": "^3.3.8",
129 |       "tar": "^6.2.1",
130 |       "undici": "^5.28.5",
131 |       "esbuild": "^0.25.0",
132 |       "@octokit/plugin-paginate-rest": "^11.4.1",
133 |       "@octokit/request": "^9.2.1",
134 |       "@octokit/request-error": "^5.1.1",
135 |       "@babel/helpers": "^7.26.10",
136 |       "glob": "^11.1.0",
137 |       "js-yaml": "^4.1.1"
138 |     },
139 |     "onlyBuiltDependencies": [
140 |       "@parcel/watcher",
141 |       "@scarf/scarf",
142 |       "esbuild",
143 |       "vue-demi"
144 |     ]
145 |   }
146 | }
147 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="home-container">
  3 |         <div class="home-content">
  4 |             <p class="welcome-title">
  5 |                 欢迎用户 {{ userStore.user?.username }} 访问 RSS Impact
  6 |             </p>
  7 |             <p class="description">
  8 |                 这是一个支持 Hook 的 RSS 订阅工具。<br>
  9 |                 查看使用文档：<a
 10 |                     ref="docs"
 11 |                     href="https://rss-docs.cmyr.dev/docs/usage"
 12 |                     target="_blank"
 13 |                     title="rss-impact-server docs"
 14 |                 >文档</a><br><br>
 15 |                 <span v-if="hasAI">您也可以点击右下角的图标启动 AI 文档助手解答问题</span>
 16 |                 <!-- 您也可以点击按钮启动交互式引导
 17 |                 <el-button type="primary" @click="startTour">
 18 |                     打开引导
 19 |                 </el-button> -->
 20 |             </p>
 21 |             <p class="powered-by">
 22 |                 由 <a
 23 |                     href="https://github.com/CaoMeiYouRen/rss-impact-server"
 24 |                     target="_blank"
 25 |                     title="rss-impact-server"
 26 |                 >rss-impact-server</a>
 27 |                 强力驱动
 28 |             </p>
 29 |             <p class="issues">
 30 |                 问题反馈： <a
 31 |                     ref="issues"
 32 |                     href="https://github.com/CaoMeiYouRen/rss-impact-server/issues"
 33 |                     target="_blank"
 34 |                     title="rss-impact-server/issues"
 35 |                 >issues</a>
 36 |             </p>
 37 |         </div>
 38 |     </div>
 39 | </template>
 40 | 
 41 | <script setup lang="ts">
 42 | import { onMounted, shallowRef, onBeforeUnmount, computed } from 'vue'
 43 | import { useShepherd } from 'vue-shepherd'
 44 | import { useUserStore } from '@/store/modules/user'
 45 | import { VITE_PETERCAT_AI_TOKEN, VITE_DOMAIN } from '@/config/env'
 46 | const userStore = useUserStore()
 47 | 
 48 | const docs = shallowRef(null)
 49 | const issues = shallowRef(null)
 50 | 
 51 | const hasAI = computed(() => Boolean(VITE_PETERCAT_AI_TOKEN && location.host.endsWith(VITE_DOMAIN)))
 52 | 
 53 | const tour = useShepherd({
 54 |     useModalOverlay: true,
 55 | })
 56 | 
 57 | const startTour = () => {
 58 |     tour.start()
 59 | }
 60 | 
 61 | onMounted(() => {
 62 |     tour.addStep({
 63 |         attachTo: { element: docs.value, on: 'top' },
 64 |         text: '如果您更喜欢先查看使用文档，可以点击这里',
 65 |         buttons: [
 66 |             {
 67 |                 text: '下一步',
 68 |                 action: tour.next,
 69 |             },
 70 |         ],
 71 |     })
 72 |     tour.addStep({
 73 |         attachTo: { element: issues.value, on: 'top' },
 74 |         text: '如果您在使用中遇到了问题，可以点击这里反馈',
 75 |         buttons: [
 76 |             {
 77 |                 text: '下一步',
 78 |                 action: tour.next,
 79 |             },
 80 |         ],
 81 |     })
 82 | })
 83 | 
 84 | onBeforeUnmount(() => {
 85 |     tour.cancel()
 86 | })
 87 | 
 88 | </script>
 89 | 
 90 | <style lang="scss" scoped>
 91 | .home-container {
 92 |     display: flex;
 93 |     justify-content: center;
 94 |     align-items: start;
 95 |     width: 100%;
 96 |     height: 100vh;
 97 | 
 98 |     // background: linear-gradient(135deg, #83a4d4, #b6fbff);
 99 |     // 设置背景颜色为浅灰色
100 |     // background-color: rgba(245, 245, 245, 0.9);
101 |     color: #333;
102 |     font-family: 'Helvetica Neue', Arial, sans-serif;
103 | 
104 |     .home-content {
105 |         background: rgb(255 255 255 / 0.9);
106 |         padding: 40px;
107 |         border-radius: 10px;
108 |         box-shadow: 0 10px 20px rgb(0 0 0 / 0.1);
109 |         text-align: center;
110 |         max-width: 800px;
111 |         width: 100%;
112 | 
113 |         .welcome-title {
114 |             font-size: 1.8em;
115 |             margin-bottom: 20px;
116 |             color: #409eff;
117 |         }
118 | 
119 |         .description {
120 |             font-size: 1.5rem;
121 |             margin-bottom: 20px;
122 |             color: #666;
123 | 
124 |             a {
125 |                 color: #409eff;
126 |                 text-decoration: none;
127 |                 transition: color 0.3s ease;
128 | 
129 |                 &:hover {
130 |                     color: #66b1ff;
131 |                 }
132 |             }
133 |         }
134 | 
135 |         .powered-by,
136 |         .issues {
137 |             font-size: 1.2rem;
138 |             color: #888;
139 | 
140 |             a {
141 |                 color: #409eff;
142 |                 text-decoration: none;
143 |                 transition: color 0.3s ease;
144 | 
145 |                 &:hover {
146 |                     color: #66b1ff;
147 |                 }
148 |             }
149 |         }
150 |     }
151 | }
152 | </style>
153 | 


--------------------------------------------------------------------------------
/src/utils/helper.ts:
--------------------------------------------------------------------------------
  1 | import { Field } from '@/interfaces/avue'
  2 | 
  3 | /**
  4 |  * 移除对象中 $ 开头的 key
  5 |  *
  6 |  * @author CaoMeiYouRen
  7 |  * @export
  8 |  * @param obj
  9 |  * @returns
 10 |  */
 11 | export function remove$key(obj: Record<string, unknown>) {
 12 |     return Object.fromEntries(Object.entries(obj).filter(([key]) => !String(key).startsWith('$')))
 13 | }
 14 | 
 15 | /**
 16 |  *
 17 |  * 转换 object 到 string
 18 |  * @author CaoMeiYouRen
 19 |  * @date 2024-04-06
 20 |  * @export
 21 |  * @param obj
 22 |  * @param [excludeKeys=[]] 排除的key
 23 |  */
 24 | export function objectValueToString(obj: Record<string, unknown>, excludeKeys: string[] = []) {
 25 |     return Object.fromEntries(Object.entries(obj).map(([key, value]) => {
 26 |         if (excludeKeys.includes(key)) {
 27 |             return [key, value]
 28 |         }
 29 |         if (typeof value === 'object') {
 30 |             return [key, JSON.stringify(value, null, 4)]
 31 |         }
 32 |         return [key, value]
 33 |     }))
 34 | }
 35 | 
 36 | /**
 37 |  *
 38 |  * 转换 string 到 object
 39 |  * @author CaoMeiYouRen
 40 |  * @date 2024-04-06
 41 |  * @export
 42 |  * @param obj
 43 |  * @param [excludeKeys=[]] 排除的key
 44 |  */
 45 | export function stringValueToObject(obj: Record<string, unknown>, excludeKeys: string[] = []) {
 46 |     return Object.fromEntries(Object.entries(obj).map(([key, value]) => {
 47 |         if (excludeKeys.includes(key)) {
 48 |             return [key, value]
 49 |         }
 50 |         if (typeof value === 'string') {
 51 |             try {
 52 |                 return [key, JSON.parse(value)]
 53 |             } catch (error) {
 54 |                 return [key, value]
 55 |             }
 56 |         }
 57 |         return [key, value]
 58 |     }))
 59 | }
 60 | 
 61 | /**
 62 |  * 格式化流量数据
 63 |  *
 64 |  * @author CaoMeiYouRen
 65 |  * @date 2024-04-12
 66 |  * @export
 67 |  * @param data 单位B
 68 |  */
 69 | export function dataFormat(data: number | bigint): string {
 70 |     const arr = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
 71 |     let i = 0
 72 |     let value: number | bigint
 73 | 
 74 |     if (typeof data === 'bigint' || data > Number.MAX_SAFE_INTEGER) {
 75 |         value = BigInt(data)
 76 |         while (value >= 1024n && i < arr.length - 1) {
 77 |             value /= 1024n
 78 |             i++
 79 |         }
 80 |         return `${value} ${arr[i]}`
 81 |     }
 82 |     value = data
 83 |     while (value >= 1024 && i < arr.length - 1) {
 84 |         value /= 1024
 85 |         i++
 86 |     }
 87 |     if (i === 0) {
 88 |         return `${value} ${arr[i]}`
 89 |     }
 90 |     return `${value.toFixed(2)} ${arr[i]}`
 91 | }
 92 | 
 93 | export function isNullOrUndefined(value: unknown) {
 94 |     return typeof value === 'undefined' || value === null
 95 | }
 96 | 
 97 | /**
 98 |  * 基于 columns 转换 object
 99 |  *
100 |  * @author CaoMeiYouRen
101 |  * @date 2024-05-26
102 |  * @export
103 |  * @template T
104 |  * @param obj
105 |  * @param columns
106 |  */
107 | export function transformObjectByColumns<T extends object = Record<string, unknown>>(obj: T, columns: Field[]): T {
108 |     return Object.fromEntries(Object.entries(obj).map(([key, value]) => {
109 |         // 除了 boolean 类型的字段
110 |         if (typeof value === 'boolean') {
111 |             return [key, value]
112 |         }
113 |         const column = columns.find((e) => e.prop === key)
114 |         if (['url', 'img'].includes(column?.type || '') && column?.alone && Array.isArray(value)) { // 解决 url/img 的问题
115 |             value = value[0]
116 |         }
117 |         // 对于支持 nullable 的字段，
118 |         if (column?.nullable) {
119 |             if (column?.isId && !value) { // 如果为 id，且为 假值，则设置为 null，解决 可选 id 的问题
120 |                 return [key, null]
121 |             }
122 |             if (value === '') { // 如果是空字符串，则设置为 null，解决 可选字段 的问题
123 |                 return [key, null]
124 |             }
125 |         }
126 |         if (typeof value === 'object' && value !== null && column?.params?.option?.column) { // 如果 value 是 object ，则递归
127 |             return [key, transformObjectByColumns(value as any, column?.params?.option?.column)]
128 |         }
129 |         return [key, value]
130 |     })) as T
131 | }
132 | /**
133 |  * 获取安全的文件名
134 |  * @param filename
135 |  */
136 | export function getSafeFileName(filename: string) {
137 |     const pattern = /[^\u4E00-\u9FA5A-Za-z0-9_-]/g
138 |     return filename.replace(pattern, '_')
139 | }
140 | 
141 | /**
142 |  * 检测是否为 http/https 开头的 url
143 |  * @param url
144 |  * @returns
145 |  */
146 | export const isHttpURL = (url: string) => /^(https?:\/\/)/.test(url)
147 | 
148 | export type Dictionary<T> = { [key: string]: T }
149 | 
150 | export function getOtherQuery(query: Dictionary<string>) {
151 |     return Object.keys(query).reduce((acc, cur) => {
152 |         if (cur !== 'redirect') {
153 |             acc[cur] = query[cur]
154 |         }
155 |         return acc
156 |     }, {} as Dictionary<string>)
157 | }
158 | 


--------------------------------------------------------------------------------
/src/interfaces/avue.d.ts:
--------------------------------------------------------------------------------
  1 | import { Option, Column, Page, DicData } from '@cao-mei-you-ren/avue-types'
  2 | 
  3 | export { DicData }
  4 | 
  5 | export declare interface AvueCrudConfig {
  6 |     option?: AvueCrudOption
  7 |     [key: string]: any
  8 | }
  9 | 
 10 | export declare interface AvueCrudOption extends Option {
 11 |     column?: Field[]
 12 |     [key: string]: any
 13 | }
 14 | 
 15 | export declare interface AvueFormConfig {
 16 |     option?: AvueFormOption
 17 |     [key: string]: any
 18 | }
 19 | 
 20 | /**
 21 |  * Avue 表单属性
 22 |  *
 23 |  * @author CaoMeiYouRen
 24 |  * @date 2022-02-22
 25 |  * @export
 26 |  * @interface AvueFormOption
 27 |  */
 28 | export declare interface AvueFormOption {
 29 |     /**
 30 |      *弹出表单的标题的统一宽度
 31 |      *
 32 |      * @author CaoMeiYouRen
 33 |      * @date 2022-02-22
 34 |      */
 35 |     labelWidth?: number
 36 |     /**
 37 |      *表单操作菜单的显影
 38 |      *
 39 |      * @author CaoMeiYouRen
 40 |      * @date 2022-02-22
 41 |      */
 42 |     menuBtn?: boolean
 43 |     /**
 44 |      *表单操作菜单栅格占据的列数
 45 |      *
 46 |      * @author CaoMeiYouRen
 47 |      * @date 2022-02-22
 48 |      */
 49 |     menuSpan?: number
 50 |     /**
 51 |      *表单菜单按钮的排列方式left/center/right
 52 |      *
 53 |      * @author CaoMeiYouRen
 54 |      * @date 2022-02-22
 55 |      */
 56 |     menuPosition?: 'left' | 'center' | 'right'
 57 |     /**
 58 |      *表格总控件大小
 59 |      *
 60 |      * @author CaoMeiYouRen
 61 |      * @date 2022-02-22
 62 |      */
 63 |     size?: 'medium' | 'small' | 'mini'
 64 |     /**
 65 |      *重置不清空的字段
 66 |      *
 67 |      * @author CaoMeiYouRen
 68 |      * @date 2022-02-22
 69 |      */
 70 |     clearExclude?: any[]
 71 |     /**
 72 |      * 提交按钮显隐
 73 |      *
 74 |      * @author CaoMeiYouRen
 75 |      * @date 2022-02-22
 76 |      */
 77 |     submitBtn?: boolean
 78 |     /**
 79 |      * 提交按钮文案
 80 |      *
 81 |      * @author CaoMeiYouRen
 82 |      * @date 2022-02-22
 83 |      */
 84 |     submitText?: string
 85 |     /**
 86 |      * 清空按钮显隐
 87 |      *
 88 |      * @author CaoMeiYouRen
 89 |      * @date 2022-02-22
 90 |      */
 91 |     emptyBtn?: boolean
 92 |     /**
 93 |      * 数据为空文案
 94 |      *
 95 |      * @author CaoMeiYouRen
 96 |      * @date 2022-02-22
 97 |      */
 98 |     emptyText?: string
 99 |     /**
100 |      *表格列配置属性
101 |      *
102 |      * @author CaoMeiYouRen
103 |      * @date 2022-02-22
104 |      */
105 |     column?: Field[]
106 |     /**
107 |      *分组表单,放入正常的column配置就行
108 |      *
109 |      * @author CaoMeiYouRen
110 |      * @date 2022-02-22
111 |      */
112 |     group?: Field[]
113 |     [key: string]: any
114 | }
115 | 
116 | export declare interface CrudOptions {
117 |     routes?: CrudRoutes
118 | }
119 | 
120 | export declare interface CrudOptionsWithModel extends CrudOptions {
121 |     name?: string | string[]
122 |     model: any
123 |     fields?: Fields
124 |     config?: ((instance?: any) => AvueCrudConfig | Promise<AvueCrudConfig>) | AvueCrudConfig
125 | }
126 | 
127 | export declare interface CrudRoute {
128 |     decorators?: MethodDecorator[]
129 | }
130 | 
131 | export declare interface CrudRouteForFind extends CrudRoute {
132 |     paginate?: PaginateKeys | false
133 |     limit?: number
134 |     page?: number
135 |     populate?: string | any
136 |     sort?: string | any
137 |     where?: any
138 |     skip?: number
139 |     select?: string | any
140 |     collation?: any
141 |     dto?: any
142 | }
143 | 
144 | export declare interface CrudRouteForFindOne extends CrudRoute {
145 |     populate?: string | any
146 |     where?: any
147 |     select?: any
148 | }
149 | 
150 | export declare interface CrudRoutes {
151 |     grid?: false
152 |     form?: false
153 |     find?: CrudRouteForFind | false
154 |     findOne?: CrudRouteForFindOne | false
155 |     create?: CrudRouteWithDto | false
156 |     update?: CrudRouteWithDto | false
157 |     delete?: CrudRoute | false
158 |     config?: CrudRoute | false
159 | }
160 | 
161 | export declare interface CrudRouteWithDto extends CrudRoute {
162 |     dto?: any
163 |     transform?: (data: any) => any
164 | }
165 | 
166 | export declare interface Field extends Column {
167 |     type?: 'array' | 'hide' | 'text' | 'input' | 'autocomplete' | 'textarea' | 'number' | 'checkbox' | 'checkbox-button' | 'radio' | 'date' | 'dates' | 'week' | 'month' | 'year' | 'daterange' | 'time' | 'datetime' | 'datetimerange' | 'switch' | 'yesno' | 'slider' | 'password' | 'color' | 'select' | 'cascader' | 'transfer' | 'rate' | 'tag' | 'img' | 'image' | 'button' | 'json-editor' | 'upload-file' | 'image-uploader' | 'tree-select' | 'video-uploader' | 'quill-editor' | 'markdown-editor' | 'bmap' | 'codemirror' | 'gallery' | 'url' | 'upload'
168 |     _type?: string
169 |     [key: string]: any
170 | }
171 | 
172 | export declare interface OptionItem {
173 |     text: string
174 |     value: string
175 | }
176 | 
177 | export declare interface PaginateKeys extends Page {
178 |     data?: string
179 |     total?: string
180 |     lastPage?: string
181 |     currentPage?: string
182 | }
183 | 
184 | export declare interface Fields {
185 |     [key: string]: Field
186 | }
187 | 


--------------------------------------------------------------------------------
/src/layout/components/Navbar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="navbar">
  3 |         <Hamburger
  4 |             id="hamburger-container"
  5 |             :is-active="state.sidebar.opened"
  6 |             class="hamburger-container"
  7 |             @toggle-click="toggleSideBar"
  8 |         />
  9 |         <Breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 10 | 
 11 |         <div class="right-menu">
 12 |             <el-dropdown class="avatar-container hover-effect right-menu-item" trigger="click">
 13 |                 <div class="avatar-wrapper">
 14 |                     <!-- <p>RSS Impact</p> -->
 15 |                     <!-- <img
 16 |                         :src="logo"
 17 |                         class="user-avatar"
 18 |                     > -->
 19 |                     <!-- <i class="el-icon-caret-bottom" /> -->
 20 |                     <el-icon :size="20">
 21 |                         <Operation />
 22 |                     </el-icon>
 23 |                 </div>
 24 |                 <template #dropdown>
 25 |                     <el-dropdown-menu>
 26 |                         <div v-for="(item, index) in navbar" :key="item.title">
 27 |                             <router-link v-if="item.to" :to="item.to">
 28 |                                 <el-dropdown-item :divided="index > 1">
 29 |                                     {{ item.title }}
 30 |                                 </el-dropdown-item>
 31 |                             </router-link>
 32 |                             <span v-else @click="item.click">
 33 |                                 <el-dropdown-item :divided="index > 1">
 34 |                                     {{ item.title }}
 35 |                                 </el-dropdown-item>
 36 |                             </span>
 37 |                         </div>
 38 |                     </el-dropdown-menu>
 39 |                 </template>
 40 |             </el-dropdown>
 41 |         </div>
 42 |         <el-backtop
 43 |             :right="50"
 44 |             :bottom="50"
 45 |             :visibility-height="100"
 46 |         >
 47 |             <el-tooltip
 48 |                 class="box-item"
 49 |                 effect="dark"
 50 |                 content="返回顶部"
 51 |                 placement="top"
 52 |             >
 53 |                 <el-button
 54 |                     circle
 55 |                     size="large"
 56 |                     type="primary"
 57 |                 >
 58 |                     <el-icon :size="20">
 59 |                         <ArrowUp />
 60 |                     </el-icon>
 61 |                 </el-button>
 62 |             </el-tooltip>
 63 |         </el-backtop>
 64 |     </div>
 65 | </template>
 66 | 
 67 | <script lang="ts" setup>
 68 | import { useRouter } from 'vue-router'
 69 | import { useAppStore } from '@/store/modules/app'
 70 | import Breadcrumb from '@/components/Breadcrumb.vue'
 71 | import Hamburger from '@/components/Hamburger.vue'
 72 | import { useUserStore } from '@/store/modules/user'
 73 | 
 74 | const router = useRouter()
 75 | const state = useAppStore()
 76 | const userStore = useUserStore()
 77 | 
 78 | const navbar = [
 79 |     {
 80 |         title: '主页',
 81 |         to: '/',
 82 |     },
 83 |     // {
 84 |     //     title: '个人中心',
 85 |     //     to: '/user/index',
 86 |     // },
 87 |     {
 88 |         title: '退出',
 89 |         click: async () => {
 90 |             await Promise.all([
 91 |                 userStore.logout(),
 92 |                 router.push('/login'),
 93 |             ])
 94 |         },
 95 |     },
 96 | ]
 97 | 
 98 | function toggleSideBar() {
 99 |     state.toggleSidebar(true)
100 | }
101 | </script>
102 | 
103 | <style lang="scss" scoped>
104 | .navbar {
105 |     position: relative;
106 |     height: 50px;
107 |     overflow: hidden;
108 |     background: #fff;
109 |     box-shadow: 0 1px 4px rgb(0 21 41 / 0.08);
110 | 
111 |     .hamburger-container {
112 |         float: left;
113 |         height: 100%;
114 |         padding: 0 15px;
115 |         line-height: 46px;
116 |         cursor: pointer;
117 |         transition: background 0.3s;
118 |         -webkit-tap-highlight-color: transparent;
119 | 
120 |         &:hover {
121 |             background: rgb(0 0 0 / 0.025);
122 |         }
123 |     }
124 | 
125 |     .breadcrumb-container {
126 |         float: left;
127 |     }
128 | 
129 |     .right-menu {
130 |         float: right;
131 |         height: 100%;
132 |         line-height: 50px;
133 | 
134 |         &:focus {
135 |             outline: none;
136 |         }
137 | 
138 |         .right-menu-item {
139 |             display: inline-block;
140 |             height: 100%;
141 |             padding: 0 8px;
142 |             color: #5a5e66;
143 |             font-size: 18px;
144 |             vertical-align: text-bottom;
145 | 
146 |             &.hover-effect {
147 |                 cursor: pointer;
148 |                 transition: background 0.3s;
149 | 
150 |                 &:hover {
151 |                     background: rgb(0 0 0 / 0.025);
152 |                 }
153 |             }
154 |         }
155 | 
156 |         .avatar-container {
157 |             margin-right: 30px;
158 | 
159 |             .avatar-wrapper {
160 |                 position: relative;
161 |                 margin-top: 12px;
162 | 
163 |                 .user-avatar {
164 |                     width: 40px;
165 |                     height: 40px;
166 |                     border-radius: 10px;
167 |                     cursor: pointer;
168 |                 }
169 | 
170 |                 .el-icon-caret-bottom {
171 |                     position: absolute;
172 |                     top: 25px;
173 |                     right: -20px;
174 |                     font-size: 12px;
175 |                     cursor: pointer;
176 |                 }
177 |             }
178 |         }
179 |     }
180 | }
181 | </style>
182 | 


--------------------------------------------------------------------------------
/src/components/CrudForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <template v-if="form && formOption">
  4 |             <h3 v-if="formOption.title">
  5 |                 {{ formOption.title }}
  6 |             </h3>
  7 |             <avue-form
  8 |                 ref="formDom"
  9 |                 v-model="form"
 10 |                 :option="formOption"
 11 |                 @submit="submit"
 12 |                 @reset-change="resetChange"
 13 |             />
 14 |         </template>
 15 |         <template v-else>
 16 |             <span>无数据</span>
 17 |         </template>
 18 |     </div>
 19 | </template>
 20 | 
 21 | <script lang="ts" setup>
 22 | import { PropType, Ref, ref, toRefs, onMounted, watch, shallowRef } from 'vue'
 23 | import { Method } from 'axios'
 24 | import { ElMessage as Message } from 'element-plus'
 25 | import { AjaxConfig, ajax } from '@/utils/ajax'
 26 | import { AvueFormOption } from '@/interfaces/avue'
 27 | import { isNullOrUndefined, remove$key } from '@/utils/helper'
 28 | 
 29 | type Form = Record<string, unknown>
 30 | 
 31 | const defaultAvueFormOption: AvueFormOption = {
 32 |     column: [],
 33 | }
 34 | const props = defineProps({
 35 |     url: { // 提交到的URL
 36 |         type: String,
 37 |         required: false,
 38 |     },
 39 |     method: { // 请求方法
 40 |         type: String as PropType<Method>,
 41 |         default: 'POST',
 42 |     },
 43 |     option: { // 配置
 44 |         type: Object as PropType<AvueFormOption>,
 45 |     },
 46 |     optionUrl: { // 配置的URL
 47 |         type: String,
 48 |     },
 49 |     defaultValue: {
 50 |         type: Object as PropType<Form>,
 51 |     },
 52 |     config: {
 53 |         type: Object as PropType<AjaxConfig>,
 54 |     },
 55 |     disabled: {
 56 |         type: Boolean,
 57 |     },
 58 |     dynamicOption: {
 59 |         type: Array as PropType<AvueFormOption[]>,
 60 |     },
 61 |     preSubmit: {
 62 |         type: Function as PropType<(data: any) => any>,
 63 |     },
 64 | })
 65 | const emit = defineEmits(['submit', 'reset-change', 'success', 'fail'])
 66 | 
 67 | const { url, method, optionUrl, option, defaultValue, config, disabled, dynamicOption, preSubmit } = toRefs(props)
 68 | 
 69 | const form = defineModel<Form>({ default: {} as Form })
 70 | 
 71 | const loading = ref(false)
 72 | const formDom = shallowRef()
 73 | const formOption: Ref<AvueFormOption> = ref({ ...defaultAvueFormOption })
 74 | 
 75 | const submit = async (data: any, done: () => void) => {
 76 |     try {
 77 |         let reqData = remove$key({ ...data })
 78 |         if (preSubmit?.value) {
 79 |             reqData = preSubmit?.value(reqData)
 80 |         }
 81 |         const response = await ajax({
 82 |             ...config?.value || {},
 83 |             url: url?.value || '',
 84 |             method: method.value,
 85 |             data: reqData,
 86 |         })
 87 |         emit('submit', response)
 88 |         emit('success', response)
 89 |     } catch (error: any) {
 90 |         console.error(error)
 91 |         // Message.error('提交失败！')
 92 |         emit('submit', error)
 93 |         emit('fail', error)
 94 |     } finally {
 95 |         done()
 96 |     }
 97 | }
 98 | const resetChange = () => {
 99 |     emit('reset-change')
100 |     formDom.value?.clearValidate()
101 | }
102 | 
103 | const getOption = async () => {
104 |     try {
105 |         loading.value = true
106 |         if (dynamicOption?.value?.length) { // 解决 Hook 的动态配置
107 |             formOption.value = dynamicOption.value.find((e) => e.optionId === form.value?._type) as AvueFormOption
108 |         } else if (option?.value) {
109 |             formOption.value = option.value
110 |         } else {
111 |             const _url = optionUrl?.value || `${url?.value}/option`
112 |             const response = await ajax<AvueFormOption>({
113 |                 url: _url,
114 |                 method: 'GET',
115 |             })
116 |             if (!response) {
117 |                 Message.error('获取表单配置失败')
118 |                 return
119 |             }
120 |             formOption.value = response
121 |         }
122 | 
123 |         if (formOption.value) {
124 |             initForm()
125 |         }
126 |     } catch (error) {
127 |         console.error(error)
128 |         Message.error('获取表单配置失败')
129 |     } finally {
130 |         loading.value = false
131 |     }
132 | }
133 | 
134 | const initForm = async () => {
135 |     if (formOption.value) {
136 |         formOption.value.disabled = disabled.value
137 |         // 过滤 hide
138 |         formOption.value.column = formOption.value.column?.filter((col) => !col.hide)
139 |         // 初始化默认值
140 |         formOption.value.column?.forEach((col) => {
141 |             if (!isNullOrUndefined(col.value) && col.prop && isNullOrUndefined(form.value[col.prop])) {
142 |                 form.value[col.prop] = col.value
143 |             }
144 |         })
145 |         // 如果是 get ，则获取数据
146 |         if (method.value?.toUpperCase() === 'GET' && url?.value) {
147 |             const _url = url?.value
148 |             const response = await ajax<Form>({
149 |                 url: _url,
150 |                 method: 'GET',
151 |             })
152 |             if (!response) {
153 |                 Message.error('获取表单内容失败')
154 |                 return
155 |             }
156 |             form.value = response
157 |         }
158 |     }
159 | }
160 | 
161 | // 更新字典
162 | const updateDic = async () => {
163 |     try {
164 |         // await formDom.value?.updateDic()
165 |         await formDom.value?.dicInit()
166 |     } catch (error) {
167 |         console.error(error)
168 |     }
169 | }
170 | 
171 | onMounted(async () => {
172 |     await getOption()
173 |     await updateDic()
174 |     if (defaultValue?.value && typeof defaultValue?.value === 'object') {
175 |         form.value = {
176 |             ...defaultValue.value,
177 |         }
178 |     }
179 |     if (dynamicOption?.value?.length) { // 解决 Hook 的动态配置
180 |         watch(() => form.value?._type, async () => {
181 |             await getOption()
182 |         })
183 |     }
184 | })
185 | 
186 | defineExpose({
187 |     updateDic,
188 |     resetChange,
189 |     getOption,
190 |     initForm,
191 | })
192 | 
193 | </script>
194 | 
195 | <style lang="scss" scoped>
196 | </style>
197 | 


--------------------------------------------------------------------------------
/src/layout/components/Sidebar/SidebarItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div
  3 |         v-if="!item.meta || !item.meta.hidden"
  4 |         :class="['menu-wrapper', isCollapse ? 'simple-mode' : 'full-mode', {'first-level': isFirstLevel}]"
  5 |     >
  6 |         <template v-if="theOnlyOneChild && !theOnlyOneChild.children">
  7 |             <SidebarItemLink
  8 |                 v-if="theOnlyOneChild.meta"
  9 |                 :to="resolvePath(theOnlyOneChild.path)"
 10 |             >
 11 |                 <el-menu-item
 12 |                     :index="resolvePath(theOnlyOneChild.path)"
 13 |                     :class="{'sub-menu-title-noDropdown': isFirstLevel}"
 14 |                 >
 15 |                     <el-icon v-if="theOnlyOneChild.meta && theOnlyOneChild.meta.icon">
 16 |                         <i
 17 |                             v-if="typeof theOnlyOneChild.meta.icon === 'string'"
 18 |                             :class="theOnlyOneChild.meta.icon"
 19 |                         />
 20 |                         <component :is="theOnlyOneChild.meta.icon" v-else />
 21 |                     </el-icon>
 22 |                     <span
 23 |                         v-if="theOnlyOneChild.meta.title && (!isFirstLevel || !isCollapse)"
 24 |                     >{{ theOnlyOneChild.meta.title }}</span>
 25 |                 </el-menu-item>
 26 |             </SidebarItemLink>
 27 |         </template>
 28 |         <el-sub-menu
 29 |             v-else
 30 |             :index="resolvePath(item.path)"
 31 |             popper-append-to-body
 32 |         >
 33 |             <template #title>
 34 |                 <el-icon v-if="item.meta && item.meta.icon">
 35 |                     <i
 36 |                         v-if="typeof item.meta.icon === 'string'"
 37 |                         :class="item.meta.icon"
 38 |                     />
 39 |                     <component :is="item.meta.icon" v-else />
 40 |                 </el-icon>
 41 |                 <span
 42 |                     v-if="item.meta && item.meta.title"
 43 |                 >{{ item.meta.title }}</span>
 44 |             </template>
 45 |             <template v-if="item.children">
 46 |                 <sidebar-item
 47 |                     v-for="child in item.children"
 48 |                     :key="child.path"
 49 |                     :item="child"
 50 |                     :is-collapse="isCollapse"
 51 |                     :is-first-level="false"
 52 |                     :base-path="resolvePath(child.path)"
 53 |                     class="nest-menu"
 54 |                 />
 55 |             </template>
 56 |         </el-sub-menu>
 57 |     </div>
 58 | </template>
 59 | 
 60 | <script lang="ts">
 61 | import { defineComponent, PropType, toRefs, computed } from 'vue'
 62 | import { RouteRecordRaw } from 'vue-router'
 63 | import { resolve } from 'path-browserify'
 64 | import SidebarItemLink from './SidebarItemLink.vue'
 65 | import { isExternal } from '@/utils/validate'
 66 | 
 67 | export default defineComponent({
 68 |     name: 'SidebarItem',
 69 |     components: {
 70 |         SidebarItemLink,
 71 |     },
 72 |     props: {
 73 |         item: {
 74 |             type: Object as PropType<RouteRecordRaw>,
 75 |             required: true,
 76 |         },
 77 |         isCollapse: {
 78 |             type: Boolean,
 79 |             default: false,
 80 |         },
 81 |         isFirstLevel: {
 82 |             type: Boolean,
 83 |             default: true,
 84 |         },
 85 |         basePath: {
 86 |             type: String,
 87 |             default: '',
 88 |         },
 89 |     },
 90 |     setup(props) {
 91 |         const { item, basePath } = toRefs(props)
 92 |         const showingChildNumber = computed(() => {
 93 |             if (item.value.children) {
 94 |                 const showingChildren = item.value.children.filter((subItem) => !subItem.meta || !subItem.meta.hidden)
 95 |                 return showingChildren.length
 96 |             }
 97 |             return 0
 98 |         })
 99 | 
100 |         const theOnlyOneChild = computed(() => {
101 |             if (showingChildNumber.value > 1) {
102 |                 return null
103 |             }
104 |             if (item.value.children) {
105 |                 for (const child of item.value.children) {
106 |                     if (!child.meta || !child.meta.hidden) {
107 |                         return child
108 |                     }
109 |                 }
110 |             }
111 |             return { ...item.value, path: '' }
112 |         })
113 | 
114 |         function resolvePath(routePath: string) {
115 |             if (isExternal(routePath)) {
116 |                 return routePath
117 |             }
118 |             if (isExternal(basePath.value)) {
119 |                 return basePath.value
120 |             }
121 |             return resolve(basePath.value, routePath)
122 |         }
123 |         return {
124 |             showingChildNumber,
125 |             theOnlyOneChild,
126 |             resolvePath,
127 |         }
128 |     },
129 | })
130 | </script>
131 | 
132 | <style lang="scss">
133 |     .el-sub-menu.is-active > .el-sub-menu__title {
134 |         color: $subMenuActiveText !important;
135 |     }
136 | 
137 |     .full-mode {
138 |         a {
139 |             text-decoration: none !important; /* 移除下划线 */
140 |         }
141 | 
142 |         .nest-menu .el-sub-menu > .el-sub-menu__title,
143 |         .el-sub-menu .el-menu-item {
144 |             min-width: $sideBarWidth !important;
145 |             background-color: $subMenuBg !important;
146 | 
147 |             &:hover {
148 |                 background-color: $subMenuHover !important;
149 |             }
150 |         }
151 |     }
152 | 
153 |     .simple-mode {
154 |         &.first-level {
155 |             .sub-menu-title-noDropdown {
156 |                 position: relative;
157 |                 padding: 0 15px;
158 | 
159 |                 .el-tooltip {
160 |                     padding: 0 !important;
161 |                 }
162 |             }
163 | 
164 |             .el-sub-menu {
165 |                 overflow: hidden;
166 | 
167 |                 & > .el-sub-menu__title {
168 |                     padding: 0 15px;
169 | 
170 |                     .el-sub-menu__icon-arrow {
171 |                         display: none;
172 |                     }
173 | 
174 |                     & > span {
175 |                         visibility: hidden;
176 |                     }
177 |                 }
178 |             }
179 |         }
180 |     }
181 | </style>
182 | 
183 | <style lang="scss" scoped>
184 |     .svg-icon {
185 |         margin-right: 16px;
186 |     }
187 | 
188 |     i[class^="el-icon-"] {
189 |         margin-right: 16px;
190 |     }
191 | 
192 |     i[class^="iconfont"] {
193 |         width: 24px;
194 |         margin-right: 16px;
195 |         margin-left: 4px;
196 |         text-align: center;
197 |     }
198 | 
199 |     .simple-mode {
200 |         .svg-icon {
201 |             margin-left: 20px;
202 |         }
203 | 
204 |         i[class^="el-icon-"] {
205 |             margin-left: 16px;
206 |         }
207 | 
208 |         i[class^="iconfont"] {
209 |             margin-left: 16px;
210 |         }
211 |     }
212 | </style>
213 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
  1 | import { createRouter, createWebHistory, RouteLocationNormalized, RouteRecordRaw, RouterOptions } from 'vue-router'
  2 | import { HomeFilled, InfoFilled, UserFilled, Histogram, Grid, Setting, Document } from '@element-plus/icons-vue'
  3 | import Layout from '@/layout/Layout.vue'
  4 | import { Role } from '@/constant/role'
  5 | 
  6 | export type RouteConfig = RouteRecordRaw
  7 | 
  8 | export type Route = RouteLocationNormalized
  9 | 
 10 | export const constantRoutes: RouteConfig[] = [
 11 |     {
 12 |         path: '/404',
 13 |         component: () => import('@/views/Page404.vue'),
 14 |         meta: {
 15 |             hidden: true,
 16 |             title: '404',
 17 |         },
 18 |     },
 19 |     {
 20 |         path: '/login',
 21 |         component: () => import('@/views/Login.vue'),
 22 |         meta: {
 23 |             hidden: true,
 24 |             title: '登录',
 25 |         },
 26 |     },
 27 |     {
 28 |         path: '/register',
 29 |         component: () => import('@/views/Register.vue'),
 30 |         meta: {
 31 |             hidden: true,
 32 |             title: '注册',
 33 |         },
 34 |     },
 35 |     {
 36 |         path: '/',
 37 |         component: Layout,
 38 |         children: [
 39 |             {
 40 |                 path: '',
 41 |                 name: 'Home',
 42 |                 component: () => import('@/views/Home.vue'),
 43 |                 meta: {
 44 |                     title: '主页',
 45 |                     icon: HomeFilled,
 46 |                 },
 47 |             },
 48 |         ],
 49 |     },
 50 |     {
 51 |         path: '/',
 52 |         component: Layout,
 53 |         meta: {
 54 |             title: '数据管理',
 55 |             icon: Histogram,
 56 |         },
 57 |         children: [
 58 |             {
 59 |                 path: 'feed', // subscribe 订阅
 60 |                 // // 避免 RSSHub Radar 匹配到 /feed 路由
 61 |                 component: () => import('@/views/data/Feed.vue'),
 62 |                 meta: {
 63 |                     title: '订阅管理',
 64 |                     icon: 'iconfont icon-xinhao',
 65 |                 },
 66 |             },
 67 |             {
 68 |                 path: 'category',
 69 |                 component: () => import('@/views/data/Category.vue'),
 70 |                 meta: {
 71 |                     title: '分类管理',
 72 |                     icon: 'iconfont icon-fenlei',
 73 |                 },
 74 |             },
 75 |             {
 76 |                 path: 'article',
 77 |                 component: () => import('@/views/data/Article.vue'),
 78 |                 meta: {
 79 |                     title: '文章管理',
 80 |                     icon: 'iconfont icon-wenzhang',
 81 |                 },
 82 |             },
 83 |             {
 84 |                 path: 'hook',
 85 |                 component: () => import('@/views/data/Hook.vue'),
 86 |                 meta: {
 87 |                     title: 'Hook管理',
 88 |                     icon: 'iconfont icon-webhook',
 89 |                 },
 90 |             },
 91 |             {
 92 |                 path: 'custom-query',
 93 |                 component: () => import('@/views/data/CustomQuery.vue'),
 94 |                 meta: {
 95 |                     title: '自定义查询',
 96 |                     icon: 'iconfont icon-custom-query',
 97 |                 },
 98 |             },
 99 |             {
100 |                 path: 'proxy-config',
101 |                 component: () => import('@/views/data/ProxyConfig.vue'),
102 |                 meta: {
103 |                     title: '代理管理',
104 |                     icon: 'iconfont icon-proxy',
105 |                 },
106 |             },
107 |             {
108 |                 path: 'resource',
109 |                 component: () => import('@/views/data/Resource.vue'),
110 |                 meta: {
111 |                     title: '资源管理',
112 |                     icon: 'iconfont icon-ziyuanguanli',
113 |                 },
114 |             },
115 |             {
116 |                 path: 'webhook-log',
117 |                 component: () => import('@/views/data/WebhookLog.vue'),
118 |                 meta: {
119 |                     title: 'Webhook和通知日志',
120 |                     icon: 'iconfont icon-tongzhirizhi',
121 |                 },
122 |             },
123 |         ],
124 |     },
125 |     {
126 |         path: '/',
127 |         component: Layout,
128 |         children: [
129 |             {
130 |                 path: 'personal',
131 |                 name: 'Personal',
132 |                 component: () => import('@/views/user/Personal.vue'),
133 |                 meta: {
134 |                     title: '个人中心',
135 |                     icon: UserFilled,
136 |                 },
137 |             },
138 |         ],
139 |     },
140 |     {
141 |         path: '/docs',
142 |         component: Layout,
143 |         children: [
144 |             {
145 |                 path: '',
146 |                 name: 'Docs',
147 |                 component: () => import('@/views/Docs.vue'),
148 |                 meta: {
149 |                     title: '文档',
150 |                     icon: Document,
151 |                 },
152 |             },
153 |         ],
154 |     },
155 |     {
156 |         path: '/about',
157 |         component: Layout,
158 |         children: [
159 |             {
160 |                 path: '',
161 |                 name: 'About',
162 |                 component: () => import('@/views/About.vue'),
163 |                 meta: {
164 |                     title: '关于',
165 |                     icon: InfoFilled,
166 |                 },
167 |             },
168 |         ],
169 |     },
170 |     {
171 |         path: '/(.*)',
172 |         redirect: '/404',
173 |         meta: { hidden: true },
174 |     },
175 | ]
176 | 
177 | export const asyncRoutes: RouteConfig[] = [
178 |     {
179 |         path: '/admin',
180 |         component: Layout,
181 |         meta: {
182 |             title: '后台管理',
183 |             icon: Grid,
184 |             roles: [Role.admin],
185 |         },
186 |         children: [
187 |             {
188 |                 path: 'user',
189 |                 name: 'User',
190 |                 component: () => import('@/views/admin/User.vue'),
191 |                 meta: {
192 |                     title: '用户管理',
193 |                     icon: UserFilled,
194 |                 },
195 |             },
196 |             {
197 |                 path: 'system',
198 |                 name: 'System',
199 |                 component: () => import('@/views/admin/System.vue'),
200 |                 meta: {
201 |                     title: '系统管理',
202 |                     icon: Setting,
203 |                 },
204 |             },
205 |             {
206 |                 path: 'daily-count',
207 |                 name: 'DailyCount',
208 |                 component: () => import('@/views/admin/DailyCount.vue'),
209 |                 meta: {
210 |                     title: '使用统计',
211 |                     icon: 'iconfont icon-tongji',
212 |                 },
213 |             },
214 |         ],
215 |     },
216 | ]
217 | 
218 | const options: RouterOptions = {
219 |     history: createWebHistory(import.meta.env.BASE_URL),
220 |     routes: constantRoutes,
221 |     scrollBehavior: (to, from, savedPosition) => {
222 |         if (savedPosition) {
223 |             return savedPosition
224 |         }
225 |         return { left: 0, top: 0 }
226 |     },
227 | }
228 | 
229 | let router = createRouter(options)
230 | 
231 | export function resetRouter(): void {
232 |     const newRouter = createRouter(options)
233 |     router = newRouter
234 | }
235 | 
236 | export default router
237 | 


--------------------------------------------------------------------------------
/src/views/Page404.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="wscn-http404-container">
  3 |         <div class="wscn-http404">
  4 |             <div class="pic-404">
  5 |                 <img
  6 |                     class="pic-404__parent"
  7 |                     src="@/assets/images/404.png"
  8 |                     alt="404"
  9 |                 >
 10 |                 <img
 11 |                     class="left pic-404__child"
 12 |                     src="@/assets/images/404-cloud.png"
 13 |                     alt="404"
 14 |                 >
 15 |                 <img
 16 |                     class="mid pic-404__child"
 17 |                     src="@/assets/images/404-cloud.png"
 18 |                     alt="404"
 19 |                 >
 20 |                 <img
 21 |                     class="pic-404__child right"
 22 |                     src="@/assets/images/404-cloud.png"
 23 |                     alt="404"
 24 |                 >
 25 |             </div>
 26 |             <div class="text-404">
 27 |                 <div class="text-404__oops">
 28 |                     404 NOT FOUND
 29 |                 </div>
 30 |                 <div class="text-404__headline">
 31 |                     {{ message }}
 32 |                 </div>
 33 |                 <div class="text-404__info">
 34 |                     请检查您输入的URL是否正确，或单击下面的按钮返回主页
 35 |                 </div>
 36 |                 <router-link
 37 |                     to="/"
 38 |                     class="text-404__return-home"
 39 |                 >
 40 |                     返回首页
 41 |                 </router-link>
 42 |             </div>
 43 |         </div>
 44 |     </div>
 45 | </template>
 46 | 
 47 | <script lang="ts" setup>
 48 | import { defineProps } from 'vue'
 49 | defineProps({
 50 |     message: {
 51 |         type: String,
 52 |         default: '找不到要访问的网页',
 53 |     },
 54 | })
 55 | </script>
 56 | 
 57 | <style lang="scss" scoped>
 58 | .wscn-http404-container {
 59 |     position: absolute;
 60 |     top: 40%;
 61 |     left: 50%;
 62 |     transform: translate(-50%, -50%);
 63 | }
 64 | 
 65 | .wscn-http404 {
 66 |     position: relative;
 67 |     width: 1200px;
 68 |     padding: 0 50px;
 69 |     overflow: hidden;
 70 | 
 71 |     .pic-404 {
 72 |         position: relative;
 73 |         float: left;
 74 |         width: 600px;
 75 |         overflow: hidden;
 76 | 
 77 |         &__parent {
 78 |             width: 100%;
 79 |         }
 80 | 
 81 |         &__child {
 82 |             position: absolute;
 83 | 
 84 |             &.left {
 85 |                 top: 17px;
 86 |                 left: 220px;
 87 |                 width: 80px;
 88 |                 opacity: 0;
 89 |                 animation-name: cloudLeft;
 90 |                 animation-duration: 2s;
 91 |                 animation-timing-function: linear;
 92 |                 animation-delay: 1s;
 93 |                 animation-fill-mode: forwards;
 94 |             }
 95 | 
 96 |             &.mid {
 97 |                 top: 10px;
 98 |                 left: 420px;
 99 |                 width: 46px;
100 |                 opacity: 0;
101 |                 animation-name: cloudMid;
102 |                 animation-duration: 2s;
103 |                 animation-timing-function: linear;
104 |                 animation-delay: 1.2s;
105 |                 animation-fill-mode: forwards;
106 |             }
107 | 
108 |             &.right {
109 |                 top: 100px;
110 |                 left: 500px;
111 |                 width: 62px;
112 |                 opacity: 0;
113 |                 animation-name: cloudRight;
114 |                 animation-duration: 2s;
115 |                 animation-timing-function: linear;
116 |                 animation-delay: 1s;
117 |                 animation-fill-mode: forwards;
118 |             }
119 | 
120 |             @keyframes cloudLeft {
121 |                 0% {
122 |                     top: 17px;
123 |                     left: 220px;
124 |                     opacity: 0;
125 |                 }
126 | 
127 |                 20% {
128 |                     top: 33px;
129 |                     left: 188px;
130 |                     opacity: 1;
131 |                 }
132 | 
133 |                 80% {
134 |                     top: 81px;
135 |                     left: 92px;
136 |                     opacity: 1;
137 |                 }
138 | 
139 |                 100% {
140 |                     top: 97px;
141 |                     left: 60px;
142 |                     opacity: 0;
143 |                 }
144 |             }
145 | 
146 |             @keyframes cloudMid {
147 |                 0% {
148 |                     top: 10px;
149 |                     left: 420px;
150 |                     opacity: 0;
151 |                 }
152 | 
153 |                 20% {
154 |                     top: 40px;
155 |                     left: 360px;
156 |                     opacity: 1;
157 |                 }
158 | 
159 |                 70% {
160 |                     top: 130px;
161 |                     left: 180px;
162 |                     opacity: 1;
163 |                 }
164 | 
165 |                 100% {
166 |                     top: 160px;
167 |                     left: 120px;
168 |                     opacity: 0;
169 |                 }
170 |             }
171 | 
172 |             @keyframes cloudRight {
173 |                 0% {
174 |                     top: 100px;
175 |                     left: 500px;
176 |                     opacity: 0;
177 |                 }
178 | 
179 |                 20% {
180 |                     top: 120px;
181 |                     left: 460px;
182 |                     opacity: 1;
183 |                 }
184 | 
185 |                 80% {
186 |                     top: 180px;
187 |                     left: 340px;
188 |                     opacity: 1;
189 |                 }
190 | 
191 |                 100% {
192 |                     top: 200px;
193 |                     left: 300px;
194 |                     opacity: 0;
195 |                 }
196 |             }
197 |         }
198 |     }
199 | 
200 |     .text-404 {
201 |         position: relative;
202 |         float: left;
203 |         width: 300px;
204 |         padding: 30px 0;
205 |         overflow: hidden;
206 | 
207 |         &__oops {
208 |             margin-bottom: 20px;
209 |             color: #1482f0;
210 |             font-weight: bold;
211 |             font-size: 32px;
212 |             line-height: 40px;
213 |             opacity: 0;
214 |             animation-name: slideUp;
215 |             animation-duration: 0.5s;
216 |             animation-fill-mode: forwards;
217 |         }
218 | 
219 |         &__headline {
220 |             margin-bottom: 10px;
221 |             color: #222;
222 |             font-weight: bold;
223 |             font-size: 20px;
224 |             line-height: 24px;
225 |             opacity: 0;
226 |             animation-name: slideUp;
227 |             animation-duration: 0.5s;
228 |             animation-delay: 0.1s;
229 |             animation-fill-mode: forwards;
230 |         }
231 | 
232 |         &__info {
233 |             margin-bottom: 30px;
234 |             color: grey;
235 |             font-size: 13px;
236 |             line-height: 21px;
237 |             opacity: 0;
238 |             animation-name: slideUp;
239 |             animation-duration: 0.5s;
240 |             animation-delay: 0.2s;
241 |             animation-fill-mode: forwards;
242 |         }
243 | 
244 |         &__return-home {
245 |             display: block;
246 |             float: left;
247 |             width: 110px;
248 |             height: 36px;
249 |             color: #fff;
250 |             font-size: 14px;
251 |             line-height: 36px;
252 |             text-align: center;
253 |             background: #1482f0;
254 |             border-radius: 100px;
255 |             cursor: pointer;
256 |             opacity: 0;
257 |             animation-name: slideUp;
258 |             animation-duration: 0.5s;
259 |             animation-delay: 0.3s;
260 |             animation-fill-mode: forwards;
261 |         }
262 | 
263 |         @keyframes slideUp {
264 |             0% {
265 |                 transform: translateY(60px);
266 |                 opacity: 0;
267 |             }
268 | 
269 |             100% {
270 |                 transform: translateY(0);
271 |                 opacity: 1;
272 |             }
273 |         }
274 |     }
275 | }
276 | </style>
277 | 


--------------------------------------------------------------------------------
/src/views/Register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="register-container">
  3 |         <div class="register-form">
  4 |             <div>
  5 |                 <div class="logo" tabindex="-1">
  6 |                     <el-image
  7 |                         :src="logo"
  8 |                         tabindex="-1"
  9 |                         lazy
 10 |                     >
 11 |                         <template #placeholder>
 12 |                             <div class="image-slot">
 13 |                                 Loading<span class="dot">...</span>
 14 |                             </div>
 15 |                         </template>
 16 |                         <template #error>
 17 |                             <div class="image-slot">
 18 |                                 <el-icon><icon-picture /></el-icon>
 19 |                             </div>
 20 |                         </template>
 21 |                     </el-image>
 22 |                 </div>
 23 |                 <h1 class="logo-title">
 24 |                     RSS Impact
 25 |                 </h1>
 26 |             </div>
 27 |             <avue-form
 28 |                 ref="formRef"
 29 |                 v-model="registerForm"
 30 |                 :option="option"
 31 | 
 32 |                 @submit="submit"
 33 |             >
 34 |                 <template #menu-form="{size}">
 35 |                     <el-row class="button-row" justify="space-between">
 36 |                         <!-- <el-col :span="11">
 37 |                             <el-button
 38 |                                 type="danger"
 39 |                                 class="clear-button"
 40 |                                 :size="size"
 41 |                                 @click="clearForm"
 42 |                             >
 43 |                                 <el-icon><Delete /></el-icon>
 44 |                                 <span>清空</span>
 45 |                             </el-button>
 46 |                         </el-col> -->
 47 |                         <el-col :span="11">
 48 |                             <el-button
 49 |                                 type="primary"
 50 |                                 class="login-button"
 51 |                                 size="large"
 52 |                                 @click="$router.push('/login')"
 53 |                             >
 54 |                                 <el-icon><CaretLeft /></el-icon>
 55 |                                 <span>返回登录</span>
 56 |                             </el-button>
 57 |                         </el-col>
 58 |                         <el-col :span="11">
 59 |                             <el-button
 60 |                                 type="success"
 61 |                                 native-type="submit"
 62 |                                 class="register-button"
 63 |                                 size="large"
 64 |                                 :disabled="disablePasswordRegister"
 65 |                                 @click="onRegister"
 66 |                             >
 67 |                                 <el-icon><Position /></el-icon>
 68 |                                 <span>注册</span>
 69 |                             </el-button>
 70 |                         </el-col>
 71 |                     </el-row>
 72 |                 </template>
 73 |             </avue-form>
 74 |         </div>
 75 |     </div>
 76 | </template>
 77 | 
 78 | <script lang="ts" setup>
 79 | import { computed, ref, shallowRef } from 'vue'
 80 | import { useRouter } from 'vue-router'
 81 | import { ElMessage } from 'element-plus'
 82 | import { RegisterDto } from '@/api/api'
 83 | import { baseValidatePassword, isEmail, isValidUsername } from '@/utils/validate'
 84 | import { api } from '@/api'
 85 | import logo from '@/assets/images/logo.png'
 86 | import { AvueFormOption } from '@/interfaces/avue'
 87 | import { useAppStore } from '@/store/modules/app'
 88 | 
 89 | const router = useRouter()
 90 | const state = useAppStore()
 91 | 
 92 | const disablePasswordRegister = computed(() => state.authMeta.disablePasswordRegister)
 93 | 
 94 | const validateUsername = (_rule: any, value: string, callback: (error?: Error) => void) => {
 95 |     if (isValidUsername(value)) {
 96 |         return callback(new Error('请输入用户名'))
 97 |     }
 98 |     callback()
 99 | }
100 | 
101 | const validatePassword = (_rule: any, value: string, callback: (error?: Error) => void) => {
102 |     const error = baseValidatePassword(value)
103 |     if (error) {
104 |         return callback(error)
105 |     }
106 |     callback()
107 | }
108 | 
109 | const validateEmail = (_rule: any, value: string, callback: (error?: Error) => void) => {
110 |     if (!isEmail(value)) {
111 |         return callback(new Error('邮箱格式有误'))
112 |     }
113 |     callback()
114 | }
115 | 
116 | const formRef = shallowRef<any>(null)
117 | 
118 | const registerForm = ref<RegisterDto>({
119 |     username: '',
120 |     password: '',
121 |     email: '',
122 | })
123 | 
124 | const option: AvueFormOption = {
125 |     submitBtn: false,
126 |     submitText: '注册',
127 |     emptyBtn: false,
128 |     column: {
129 |         username: {
130 |             span: 24,
131 |             label: '用户名',
132 |             prefixIcon: 'el-icon-user',
133 |             autocomplete: 'off',
134 |             rules: [
135 |                 { required: true, message: '请输入用户名', trigger: 'blur' },
136 |                 { validator: validateUsername, trigger: 'blur' },
137 |             ],
138 |         },
139 |         email: {
140 |             span: 24,
141 |             label: '邮箱',
142 |             prefixIcon: 'el-icon-message',
143 |             autocomplete: 'off',
144 |             rules: [
145 |                 { required: true, message: '请输入邮箱', trigger: 'blur' },
146 |                 { validator: validateEmail, trigger: 'blur' },
147 |             ],
148 |         },
149 |         password: {
150 |             type: 'password',
151 |             span: 24,
152 |             label: '密码',
153 |             prefixIcon: 'el-icon-lock',
154 |             autocomplete: 'off',
155 |             rules: [
156 |                 { required: true, message: '请输入密码', trigger: 'blur' },
157 |                 { validator: validatePassword, trigger: 'blur' },
158 |             ],
159 |         },
160 |     } as any,
161 | }
162 | 
163 | const onRegister = () => {
164 |     formRef.value?.submit()
165 | }
166 | 
167 | const submit = async (form: RegisterDto, done: () => void) => {
168 |     try {
169 |         await api.api.authRegister(form)
170 |         ElMessage.success('注册成功！即将跳转到登录页面')
171 |         setTimeout(async () => {
172 |             await router.push({
173 |                 path: '/login',
174 |             })
175 |         }, 3000)
176 |     } catch (error) {
177 |         console.error(error)
178 |     } finally {
179 |         done()
180 |     }
181 | }
182 | 
183 | const clearForm = () => {
184 |     registerForm.value = {
185 |         username: '',
186 |         password: '',
187 |         email: '',
188 |     }
189 | }
190 | </script>
191 | 
192 | <style lang="scss" scoped>
193 | .register-container {
194 |     display: flex;
195 |     justify-content: center;
196 |     align-items: center;
197 |     width: 100%;
198 |     height: 100vh;
199 |     background: linear-gradient(135deg, #83a4d4, #b6fbff);
200 | 
201 |     .register-form {
202 |         background: rgb(255 255 255 / 1);
203 |         padding: 40px;
204 |         border-radius: 10px;
205 |         box-shadow: 0 10px 20px rgb(0 0 0 / 0.1);
206 |         width: 400px;
207 |         text-align: center;
208 | 
209 |         .logo {
210 |             margin: 0 auto 20px;
211 |             width: 150px;
212 |         }
213 | 
214 |         .logo-title{
215 |             color:rgb(20 34 51);
216 |         }
217 | 
218 |         .el-form-item {
219 |             margin-bottom: 20px;
220 |         }
221 | 
222 |         .button-row {
223 |             margin-top: 20px;
224 |             margin-bottom: 20px;
225 |         }
226 | 
227 |         .el-button {
228 |             width: 100%;
229 |             border-radius: 5px;
230 |             transition: background-color 0.3s ease;
231 | 
232 |             // &:hover {
233 |             //     background-color: #66bb6a;
234 |             // }
235 |         }
236 | 
237 |         .clear-button {
238 |             background-color: #f56c6c;
239 |             border-color: #f56c6c;
240 | 
241 |             &:hover {
242 |                 background-color: #f78989;
243 |                 border-color: #f78989;
244 |             }
245 |         }
246 |     }
247 | }
248 | </style>
249 | 


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="login-container">
  3 |         <div class="login-form">
  4 |             <div>
  5 |                 <div class="logo" tabindex="-1">
  6 |                     <el-image
  7 |                         :src="logo"
  8 |                         tabindex="-1"
  9 |                         lazy
 10 |                     >
 11 |                         <template #placeholder>
 12 |                             <div class="image-slot">
 13 |                                 Loading<span class="dot">...</span>
 14 |                             </div>
 15 |                         </template>
 16 |                         <template #error>
 17 |                             <div class="image-slot">
 18 |                                 <el-icon><icon-picture /></el-icon>
 19 |                             </div>
 20 |                         </template>
 21 |                     </el-image>
 22 |                 </div>
 23 |                 <h1 class="logo-title">
 24 |                     RSS Impact
 25 |                 </h1>
 26 |             </div>
 27 |             <el-tabs v-model="activeTab">
 28 |                 <el-tab-pane
 29 |                     v-if="!disableForm"
 30 |                     label="表单登录"
 31 |                     name="legacy"
 32 |                 >
 33 |                     <avue-form
 34 |                         ref="formRef"
 35 |                         v-model="loginForm"
 36 |                         :option="option"
 37 |                         @submit="submit"
 38 |                     >
 39 |                         <template #menu-form="{size}">
 40 |                             <el-row class="button-row" justify="space-between">
 41 |                                 <el-col :span="11">
 42 |                                     <el-button
 43 |                                         v-if="!disablePasswordRegister"
 44 |                                         type="success"
 45 |                                         class="register-button"
 46 |                                         size="large"
 47 |                                         @click="$router.push('/register')"
 48 |                                     >
 49 |                                         <el-icon>
 50 |                                             <Position />
 51 |                                         </el-icon>
 52 |                                         <span>前往注册</span>
 53 |                                     </el-button>
 54 |                                 </el-col>
 55 |                                 <el-col :span="11">
 56 |                                     <el-button
 57 |                                         type="primary"
 58 |                                         native-type="submit"
 59 |                                         class="login-button"
 60 |                                         size="large"
 61 |                                         @click="onLogin"
 62 |                                     >
 63 |                                         <el-icon>
 64 |                                             <Lock />
 65 |                                         </el-icon>
 66 |                                         <span>登录</span>
 67 |                                     </el-button>
 68 |                                 </el-col>
 69 |                             </el-row>
 70 |                         </template>
 71 |                     </avue-form>
 72 |                 </el-tab-pane>
 73 |                 <el-tab-pane
 74 |                     v-if="enableAuth0"
 75 |                     label="一键登录"
 76 |                     name="one-click"
 77 |                 >
 78 |                     <el-row class="one-click-button-row" justify="space-between">
 79 |                         <el-col :span="11">
 80 |                             <el-button
 81 |                                 v-if="enableRegister"
 82 |                                 type="success"
 83 |                                 size="large"
 84 |                                 @click="onOneClickRegister"
 85 |                             >
 86 |                                 <el-icon>
 87 |                                     <Position />
 88 |                                 </el-icon>
 89 |                                 <span>一键注册</span>
 90 |                             </el-button>
 91 |                         </el-col>
 92 |                         <el-col :span="11">
 93 |                             <el-button
 94 |                                 type="primary"
 95 |                                 size="large"
 96 |                                 @click="onOneClickLogin"
 97 |                             >
 98 |                                 <el-icon>
 99 |                                     <Lock />
100 |                                 </el-icon>
101 |                                 <span>一键登录</span>
102 |                             </el-button>
103 |                         </el-col>
104 |                     </el-row>
105 |                 </el-tab-pane>
106 |             </el-tabs>
107 |         </div>
108 |     </div>
109 | </template>
110 | 
111 | <script lang="ts" setup>
112 | import { computed, onMounted, ref, shallowRef } from 'vue'
113 | import { useRouter } from 'vue-router'
114 | import { LoginDto } from '@/api/api'
115 | import { baseValidatePassword, isValidUsername } from '@/utils/validate'
116 | import { useUserStore } from '@/store/modules/user'
117 | import logo from '@/assets/images/logo.png'
118 | import { AvueFormOption } from '@/interfaces/avue'
119 | import { useAppStore } from '@/store/modules/app'
120 | import { Dictionary, getOtherQuery } from '@/utils/helper'
121 | 
122 | const router = useRouter()
123 | const userStore = useUserStore()
124 | const state = useAppStore()
125 | 
126 | const enableRegister = computed(() => state.authMeta.enableRegister)
127 | const disablePasswordLogin = computed(() => state.authMeta.disablePasswordLogin)
128 | const disablePasswordRegister = computed(() => state.authMeta.disablePasswordRegister)
129 | const enableAuth0 = computed(() => state.authMeta.enableAuth0)
130 | 
131 | const disableForm = computed(() => disablePasswordLogin.value && disablePasswordRegister.value)
132 | 
133 | const validateUsername = (rule: any, value: string, callback: (error?: Error) => void) => {
134 |     if (isValidUsername(value)) {
135 |         return callback(new Error('请输入用户名'))
136 |     }
137 |     callback()
138 | }
139 | const validatePassword = (rule: any, value: string, callback: (error?: Error) => void) => {
140 |     const error = baseValidatePassword(value)
141 |     if (error) {
142 |         return callback(error)
143 |     }
144 |     callback()
145 | }
146 | const formRef = shallowRef<any>(null)
147 | const loginForm = ref<LoginDto>({
148 |     username: '',
149 |     password: '',
150 | })
151 | const redirect = ref('')
152 | const otherQuery = ref<Dictionary<string>>({})
153 | 
154 | const option: AvueFormOption = {
155 |     submitBtn: false,
156 |     submitText: '登录',
157 |     emptyBtn: false,
158 |     column: {
159 |         username: {
160 |             span: 24,
161 |             label: '用户名',
162 |             prefixIcon: 'el-icon-user',
163 |             autocomplete: 'off',
164 |             rules: [
165 |                 { required: true, message: '请输入用户名', trigger: 'blur' },
166 |                 { validator: validateUsername, trigger: 'blur' },
167 |             ],
168 |         },
169 |         password: {
170 |             type: 'password',
171 |             span: 24,
172 |             label: '密码',
173 |             prefixIcon: 'el-icon-lock',
174 |             autocomplete: 'off',
175 |             rules: [
176 |                 { required: true, message: '请输入密码', trigger: 'blur' },
177 |                 { validator: validatePassword, trigger: 'blur' },
178 |             ],
179 |         },
180 |     } as any,
181 | }
182 | 
183 | const onLogin = () => {
184 |     formRef.value?.submit()
185 | }
186 | 
187 | const submit = async (form: LoginDto, done: () => void) => {
188 |     try {
189 |         await userStore.login(form)
190 |         await userStore.getUserInfo()
191 |         await router.push({
192 |             path: redirect.value || '/',
193 |             query: otherQuery.value,
194 |         })
195 |     } catch (error) {
196 |         console.error(error)
197 |     } finally {
198 |         done()
199 |     }
200 | }
201 | 
202 | const clearForm = () => {
203 |     loginForm.value = {
204 |         username: '',
205 |         password: '',
206 |     }
207 | }
208 | // one-click 一键登录
209 | // legacy 表单登录
210 | const activeTab = ref('one-click')
211 | 
212 | const onOneClickRegister = () => {
213 |     const url = new URL(window.location.href)
214 |     url.pathname = '/api/auth/register'
215 |     // url.searchParams.set('redirect', window.location.origin)
216 |     window.location.href = url.href
217 | }
218 | 
219 | const onOneClickLogin = () => {
220 |     const url = new URL(window.location.href)
221 |     url.pathname = '/api/auth/login'
222 |     // url.searchParams.set('redirect', window.location.origin)
223 |     window.location.href = url.href
224 | }
225 | 
226 | const onAuth0LoginCallback = async () => {
227 |     try {
228 |         if (otherQuery.value?.state?.startsWith('auth0_login_') || otherQuery.value?.state?.startsWith('oidc_login_')) { // 如果从 auth0 回调
229 |             await userStore.getUserInfo()
230 |             await router.push({
231 |                 path: redirect.value || '/',
232 |                 query: {},
233 |             })
234 |         }
235 |     } catch (error) {
236 |         console.error(error)
237 |         await userStore.logout()
238 |     }
239 | }
240 | 
241 | onMounted(async () => {
242 |     if (enableAuth0.value) {
243 |         activeTab.value = 'one-click'
244 |     } else {
245 |         activeTab.value = 'legacy'
246 |     }
247 |     const query = router.currentRoute.value.query as Dictionary<string>
248 |     redirect.value = query?.redirect
249 |     otherQuery.value = getOtherQuery(query)
250 |     await onAuth0LoginCallback()
251 | })
252 | 
253 | </script>
254 | 
255 | <style lang="scss" scoped>
256 | .login-container {
257 |     display: flex;
258 |     justify-content: center;
259 |     align-items: center;
260 |     width: 100%;
261 |     height: 100vh;
262 |     background: linear-gradient(135deg, #83a4d4, #b6fbff);
263 | 
264 |     .login-form {
265 |         background: rgb(255 255 255 / 1);
266 |         padding: 40px;
267 |         border-radius: 10px;
268 |         box-shadow: 0 10px 20px rgb(0 0 0 / 0.1);
269 |         width: 400px;
270 |         text-align: center;
271 | 
272 |         .logo {
273 |             margin: 0 auto 20px;
274 |             width: 150px;
275 |         }
276 | 
277 |         .logo-title {
278 |             color: rgb(20 34 51);
279 |         }
280 | 
281 |         .el-form-item {
282 |             margin-bottom: 20px;
283 |         }
284 | 
285 |         .button-row {
286 |             // margin-top: 20px;
287 |             margin-bottom: 20px;
288 |         }
289 | 
290 |         .one-click-button-row {
291 |             margin-top: 30px;
292 |             margin-bottom: 20px;
293 |         }
294 | 
295 |         .el-button {
296 |             width: 100%;
297 |             border-radius: 5px;
298 |             transition: background-color 0.3s ease;
299 | 
300 |             // &:hover {
301 |             //     background-color: #66bb6a;
302 |             // }
303 |         }
304 | 
305 |         .clear-button {
306 |             background-color: #f56c6c;
307 |             border-color: #f56c6c;
308 | 
309 |             &:hover {
310 |                 background-color: #f78989;
311 |                 border-color: #f78989;
312 |             }
313 |         }
314 | 
315 |         .login-button {
316 |             // background-color: #409eff;
317 |             // border-color: #409eff;
318 | 
319 |             // &:hover {
320 |             //     background-color: #66b1ff;
321 |             //     border-color: #66b1ff;
322 |             // }
323 |         }
324 | 
325 |         .register-button {
326 |             // margin-top: 20px;
327 |             // background-color: #42b983;
328 |             // border-color: #42b983;
329 | 
330 |             // &:hover {
331 |             //     background-color: #3da87a;
332 |             //     border-color: #3da87a;
333 |             // }
334 |         }
335 |     }
336 | }
337 | </style>
338 | 


--------------------------------------------------------------------------------
/src/hooks/use-crud-ajax.ts:
--------------------------------------------------------------------------------
  1 | import { computed, onMounted, ref, Ref, unref, shallowRef } from 'vue'
  2 | import { ElMessage, ElMessageBox } from 'element-plus'
  3 | import { AvueCrudOption } from '@/interfaces/avue'
  4 | import { ajax } from '@/utils/ajax'
  5 | import { objectValueToString, remove$key, stringValueToObject, transformObjectByColumns } from '@/utils/helper'
  6 | 
  7 | const Message = ElMessage
  8 | const MessageBox = ElMessageBox
  9 | 
 10 | export interface GetConfigResponse {
 11 |     option: AvueCrudOption
 12 | }
 13 | 
 14 | export interface GetListResponse<T = any> {
 15 |     total: number
 16 |     data: T[]
 17 |     page: number
 18 |     lastPage: number
 19 | }
 20 | 
 21 | export interface TransformOption {
 22 |     /**
 23 |      * 获取后执行转换操作
 24 |      *
 25 |      */
 26 |     postGet?: (data: any) => any
 27 |     /**
 28 |      * 保存前执行转换操作
 29 |     */
 30 |     preSave?: (data: any) => any
 31 |     /**
 32 |      * 更新前执行转换操作
 33 |      */
 34 |     preUpdate?: (data: any) => any
 35 | }
 36 | 
 37 | interface IProps extends TransformOption {
 38 |     postGet?: (data: any) => any
 39 |     /**
 40 |      * 保存前执行转换操作
 41 |     */
 42 |     preSave?: (data: any) => any
 43 |     /**
 44 |      * 更新前执行转换操作
 45 |      */
 46 |     preUpdate?: (data: any) => any
 47 | 
 48 |     model?: string
 49 |     btnText2?: string
 50 |     titleProp?: string
 51 |     noteProp?: string
 52 |     formUrl?: string
 53 |     disabled?: boolean
 54 |     globalWhere?: Record<string, unknown>
 55 | }
 56 | 
 57 | interface Page {
 58 |     currentPage: number
 59 |     pageSize: number
 60 |     total: number
 61 |     pageSizes: number[]
 62 | }
 63 | 
 64 | const defaultOption: AvueCrudOption = {
 65 |     title: '',
 66 |     index: false,
 67 |     align: 'center',
 68 |     border: true,
 69 |     stripe: true,
 70 |     columnBtn: false,
 71 |     refreshBtn: false,
 72 |     grid: false,
 73 |     column: [],
 74 | }
 75 | 
 76 | /**
 77 |  *
 78 |  * crud 封装
 79 |  * @author CaoMeiYouRen
 80 |  * @export
 81 |  * @param model
 82 |  * @param [transform]
 83 |  * @param [autoMount] 自动挂载
 84 |  * @returns
 85 |  */
 86 | 
 87 | export function useCrudAjax<T extends Record<string, unknown> = any>(form: Ref<T>, model: string | Ref<string>, transform: IProps = {}, autoMount: boolean = true) {
 88 |     const option = ref<AvueCrudOption>({ ...defaultOption })
 89 |     const list = ref<T[]>([])
 90 |     const selections = ref<T[]>([])
 91 |     const loading = ref(false)
 92 |     const page = ref<Page>({
 93 |         currentPage: 1,
 94 |         pageSize: 10,
 95 |         total: 0,
 96 |         pageSizes: [10, 20, 30, 40, 50, 100],
 97 |     })
 98 |     const search = ref<Record<string, unknown>>({})
 99 | 
100 |     const formDom = shallowRef<any>(null)
101 |     const slotColumns = computed(() => option.value.column?.filter((e) => e.slot))
102 |     // 排除转换的 key
103 |     const excludeKeys = computed(() => option.value.column?.filter((e) => {
104 |         if (e.component === 'CrudForm') {
105 |             return true
106 |         }
107 |         if (!e.type) {
108 |             return false
109 |         }
110 |         if (['array', 'img', 'url', 'password'].includes(e.type)) {
111 |             return true
112 |         }
113 |         if (e.type === 'select' && e.multiple) {
114 |             return true
115 |         }
116 |         return false
117 |     }).map((e) => e.prop || '').filter(Boolean))
118 | 
119 |     const searchWhere = computed(() => remove$key(search.value))
120 | 
121 |     const { postGet, preSave, preUpdate, globalWhere = {} } = transform
122 | 
123 |     async function getOption() {
124 |         loading.value = true
125 |         try {
126 |             const response = await ajax<GetConfigResponse>({
127 |                 url: `${unref(model)}/config`,
128 |                 method: 'GET',
129 |                 // baseURL: '/api',
130 |             })
131 |             if (!response) {
132 |                 Message.error('获取表格配置失败')
133 |                 return
134 |             }
135 |             option.value = response.option
136 |             if (response.option.pageSizes) {
137 |                 page.value.pageSizes = response.option.pageSizes
138 |             }
139 |         } catch (error) {
140 |             Message.error('获取表格配置失败')
141 |         } finally {
142 |             loading.value = false
143 |         }
144 |     }
145 | 
146 |     // 查询
147 |     async function getList(where?: Record<string, unknown>, sort?: Record<string, unknown>) {
148 |         loading.value = true
149 |         try {
150 |             const response = await ajax<GetListResponse<T>>({
151 |                 url: unref(model),
152 |                 method: 'GET',
153 |                 query: {
154 |                     query: JSON.stringify({
155 |                         limit: page.value.pageSize,
156 |                         page: page.value.currentPage,
157 |                         sort: {
158 |                             id: 'DESC', // 倒序
159 |                             createdAt: 'DESC', // 倒序
160 |                             ...sort || {},
161 |                         },
162 |                         where: {
163 |                             ...globalWhere,
164 |                             ...where || {},
165 |                         },
166 |                     }),
167 |                 },
168 |             })
169 |             if (!response) {
170 |                 Message.error('获取数据失败')
171 |                 list.value = []
172 |                 page.value.total = 0
173 |                 return
174 |             }
175 |             const { total = 0 } = response
176 |             let { data = [] } = response
177 |             data = data.map((e) => objectValueToString(e as any, excludeKeys.value) as any)
178 |             if (postGet) {
179 |                 data = data.map((e) => postGet(e))
180 |             }
181 |             list.value = data as any[]
182 |             page.value.total = total
183 |         } catch (error) {
184 |             Message.error('获取数据失败')
185 |         } finally {
186 |             loading.value = false
187 |         }
188 |     }
189 | 
190 |     // 新增
191 |     async function rowSave(row: T, done: () => void) {
192 |         let obj = { ...row }
193 |         if (preSave) {
194 |             obj = preSave(obj)
195 |         }
196 |         delete obj.id
197 |         obj = stringValueToObject(obj, excludeKeys.value) as any
198 |         obj = transformObjectByColumns(obj, option.value.column || [])
199 |         try {
200 |             const newObj = await ajax({
201 |                 url: unref(model),
202 |                 method: 'POST',
203 |                 data: obj,
204 |             })
205 |             if (!newObj) {
206 |                 Message.error('新增失败')
207 |                 return
208 |             }
209 |             Message.success('新增成功')
210 |             await searchChange() // 重新拉取数据，直接新增会导致分页错误
211 |         } catch (error) {
212 |             Message.error('新增失败')
213 |         } finally {
214 |             done()
215 |         }
216 |     }
217 |     // 更新
218 |     async function rowUpdate(row: any, index: number, done: () => void) {
219 |         let obj = { ...row }
220 |         if (preUpdate) {
221 |             obj = preUpdate(obj)
222 |         }
223 |         obj = stringValueToObject(obj, excludeKeys.value)
224 |         obj = transformObjectByColumns(obj, option.value.column || [])
225 |         try {
226 |             const newObj = await ajax({
227 |                 url: `${unref(model)}`,
228 |                 method: 'PUT',
229 |                 data: obj,
230 |             })
231 |             if (!newObj) {
232 |                 Message.error('修改失败')
233 |                 return
234 |             }
235 |             Message.success('修改成功')
236 |             await searchChange() // 更新不会导致分页错误
237 |         } catch (error) {
238 |             Message.error('修改失败')
239 |         } finally {
240 |             done()
241 |         }
242 |     }
243 |     // 删除
244 |     async function rowDel(row: any) {
245 |         const id = row.id
246 |         try {
247 |             await MessageBox.confirm('此操作将永久删除该条数据, 是否继续？', '提示', {
248 |                 confirmButtonText: '确定',
249 |                 cancelButtonText: '取消',
250 |                 type: 'warning',
251 |             })
252 |             loading.value = true
253 |             const newObj = await ajax({
254 |                 url: `${unref(model)}/${id}`,
255 |                 method: 'DELETE',
256 |             })
257 |             if (!newObj) {
258 |                 Message.error('删除失败')
259 |                 return
260 |             }
261 |             Message.success('删除成功')
262 |             await searchChange() // 重新拉取数据，直接删除会导致分页错误
263 |         } catch (error) {
264 |             console.error(error)
265 |             // 排除正常关闭
266 |             if (typeof error === 'string' && ['cancel', 'close'].includes(error)) {
267 |                 return
268 |             }
269 |             Message.error('删除失败')
270 |         } finally {
271 |             loading.value = false
272 |         }
273 |     }
274 | 
275 |     async function currentChange() {
276 |         return searchChange()
277 |     }
278 | 
279 |     async function sizeChange() {
280 |         return searchChange()
281 |     }
282 | 
283 |     // 搜索
284 |     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
285 |     async function searchChange(_searchForm: Record<string, unknown> = {}, done: () => void = () => { }) {
286 |         const where = Object.fromEntries(Object.entries(searchWhere.value).filter(([, value]) => {
287 |             if (typeof value === 'string' && value === '') {
288 |                 return false
289 |             }
290 |             return true
291 |         }).map(([key, value]) => {
292 |             const column = option.value.column?.find((e) => e.prop === key)
293 |             if (column?.type === 'select') { // 如果为单选则精确匹配
294 |                 if (column?.multiple) {
295 |                     if ((value as any)?.length === 0) { // 如果为空数组则不查询
296 |                         return [
297 |                             key,
298 |                             undefined,
299 |                         ]
300 |                     }
301 |                     return [
302 |                         key,
303 |                         {
304 |                             $op: 'In',
305 |                             value,
306 |                         },
307 |                     ]
308 |                 }
309 |                 return [
310 |                     key,
311 |                     value,
312 |                 ]
313 |             }
314 |             if ((column?.type === 'url' || column?.type === 'img') && column?.alone && Array.isArray(value)) { // 如果为 url/img 单选
315 |                 if (value?.length && value[0]) {
316 |                     return [
317 |                         key,
318 |                         value[0],
319 |                     ]
320 |                 }
321 |                 return [
322 |                     key,
323 |                     undefined,
324 |                 ]
325 |             }
326 |             if (column?.type === 'datetime' && column?.searchRange && Array.isArray(value)) { // 如果为日期且为范围选择
327 |                 if (value.length === 2) {
328 |                     return [
329 |                         key,
330 |                         {
331 |                             $op: 'Between',
332 |                             value,
333 |                             // 大于等于第一个时间
334 |                             // 小于第二个时间，左闭右开 [date1,date2)
335 |                         },
336 |                     ]
337 |                 }
338 |                 return [
339 |                     key,
340 |                     undefined,
341 |                 ]
342 |             }
343 |             if (Array.isArray(value)) {
344 |                 if (value.length > 0) {
345 |                     return [
346 |                         key,
347 |                         {
348 |                             // $op: 'In',
349 |                             // value,
350 |                             $op: 'ILike', // 模糊查询
351 |                             value: `%${value.map((e) => e.replaceAll('%', '\\%')).join('%')}%`, // 模糊查询
352 |                         },
353 |                     ]
354 |                 }
355 |                 return [
356 |                     key,
357 |                     undefined,
358 |                 ]
359 |             }
360 |             if (typeof value === 'string') {
361 |                 return [
362 |                     key,
363 |                     {
364 |                         $op: 'ILike', // 模糊查询
365 |                         value: `%${value?.replaceAll('%', '\\%')}%`, // 模糊查询
366 |                     },
367 |                 ]
368 |             }
369 |             return [
370 |                 key,
371 |                 value,
372 |             ]
373 |         }))
374 |         await getList(where)
375 |         done()
376 |     }
377 | 
378 |     async function searchReset() {
379 |         page.value.currentPage = 1
380 |         page.value.total = 0
381 |         return getList()
382 |     }
383 | 
384 |     async function refreshChange() {
385 |         return searchChange()
386 |     }
387 | 
388 |     async function initDic() {
389 |         if (!formDom.value) {
390 |             return
391 |         }
392 |         try {
393 |             await formDom.value?.dicInit()
394 |         } catch (error) {
395 |             console.error(error)
396 |         }
397 |     }
398 | 
399 |     // 更新字典
400 |     async function updateDic() {
401 |         if (!formDom.value) {
402 |             return
403 |         }
404 |         try {
405 |             await formDom.value?.dicInit()
406 |         } catch (error) {
407 |             console.error(error)
408 |         }
409 |     }
410 | 
411 |     function selectionChange(newList: any[]) {
412 |         selections.value = newList
413 |     }
414 | 
415 |     if (autoMount) {
416 |         onMounted(async () => {
417 |             await getOption()
418 |             await initDic()
419 |             await getList()
420 |         })
421 |     }
422 | 
423 |     return {
424 |         option,
425 |         loading,
426 |         list,
427 |         page,
428 |         form,
429 |         formDom,
430 |         getOption,
431 |         getList,
432 |         rowUpdate,
433 |         rowSave,
434 |         rowDel,
435 |         currentChange,
436 |         sizeChange,
437 |         searchChange,
438 |         searchReset,
439 |         refreshChange,
440 |         initDic,
441 |         updateDic,
442 |         slotColumns,
443 |         selections,
444 |         selectionChange,
445 |         search,
446 |         searchWhere,
447 |     }
448 | }
449 | 


--------------------------------------------------------------------------------