github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

chore: add tailwindcss prettier plugin and reformat code 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-05-29 23:55:06 +08:00
parent bcb44b892d
commit 558b8a3778
54 changed files with 764 additions and 747 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -15,7 +15,8 @@
"typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false", "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
"story:dev": "histoire dev --port 4000", "story:dev": "histoire dev --port 4000",
"story:build": "histoire build" "story:build": "histoire build",
"prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'"
}, },
"dependencies": { "dependencies": {
"@halo-dev/admin-api": "^1.0.0", "@halo-dev/admin-api": "^1.0.0",
@ -53,6 +54,7 @@
"jsdom": "^19.0.0", "jsdom": "^19.0.0",
"postcss": "^8.4.14", "postcss": "^8.4.14",
"prettier": "^2.6.2", "prettier": "^2.6.2",
"prettier-plugin-tailwindcss": "^0.1.11",
"sass": "^1.52.1", "sass": "^1.52.1",
"start-server-and-test": "^1.14.0", "start-server-and-test": "^1.14.0",
"tailwindcss": "^3.0.24", "tailwindcss": "^3.0.24",

11
pnpm-lock.yaml
View File

@ -30,6 +30,7 @@ specifiers:
pinia: ^2.0.14 pinia: ^2.0.14
postcss: ^8.4.14 postcss: ^8.4.14
prettier: ^2.6.2 prettier: ^2.6.2
prettier-plugin-tailwindcss: ^0.1.11
sass: ^1.52.1 sass: ^1.52.1
start-server-and-test: ^1.14.0 start-server-and-test: ^1.14.0
tailwindcss: ^3.0.24 tailwindcss: ^3.0.24
@ -84,6 +85,7 @@ devDependencies:
jsdom: 19.0.0 jsdom: 19.0.0
postcss: 8.4.14 postcss: 8.4.14
prettier: 2.6.2 prettier: 2.6.2
prettier-plugin-tailwindcss: 0.1.11_prettier@2.6.2
sass: 1.52.1 sass: 1.52.1
start-server-and-test: 1.14.0 start-server-and-test: 1.14.0
tailwindcss: 3.0.24 tailwindcss: 3.0.24
@ -5620,6 +5622,15 @@ packages:
fast-diff: 1.2.0 fast-diff: 1.2.0
dev: true dev: true
/prettier-plugin-tailwindcss/0.1.11_prettier@2.6.2:
resolution: {integrity: sha512-a28+1jvpIZQdZ/W97wOXb6VqI762MKE/TxMMuibMEHhyYsSxQA8Ek30KObd5kJI2HF1ldtSYprFayXJXi3pz8Q==}
engines: {node: '>=12.17.0'}
peerDependencies:
prettier: '>=2.2.0'
dependencies:
prettier: 2.6.2
dev: true
/prettier/2.6.2: /prettier/2.6.2:
resolution: {integrity: sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==} resolution: {integrity: sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==}
engines: {node: '>=10.13.0'} engines: {node: '>=10.13.0'}

3
prettier.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
plugins: [require("prettier-plugin-tailwindcss")],
};

22
src/components/base/alert/Alert.story.vue
View File

@ -18,22 +18,22 @@ function initState() {
<Variant title="Show Cases"> <Variant title="Show Cases">
<template #default> <template #default>
<div class="p-3"> <div class="p-3">
<VAlert type="default" title="default" /> <VAlert title="default" type="default" />
</div> </div>
<div class="p-3"> <div class="p-3">
<VAlert type="success" title="default" /> <VAlert title="default" type="success" />
</div> </div>
<div class="p-3"> <div class="p-3">
<VAlert type="info" title="default" /> <VAlert title="default" type="info" />
</div> </div>
<div class="p-3"> <div class="p-3">
<VAlert type="warning" title="default" /> <VAlert title="default" type="warning" />
</div> </div>
<div class="p-3"> <div class="p-3">
<VAlert type="error" title="default" /> <VAlert title="default" type="error" />
</div> </div>
<div class="p-3"> <div class="p-3">
<VAlert type="default" title="提示"> <VAlert title="提示" type="default">
<template #description> <template #description>
目前仅支持远程 Git 仓库和 ZIP 下载链接。更多主题可以访问： 目前仅支持远程 Git 仓库和 ZIP 下载链接。更多主题可以访问：
<a href="https://halo.run/themes">https://halo.run/themes</a> <a href="https://halo.run/themes">https://halo.run/themes</a>
@ -48,14 +48,14 @@ function initState() {
</template> </template>
</Variant> </Variant>
<Variant title="Playground" :init-state="initState"> <Variant :init-state="initState" title="Playground">
<template #default="{ state }"> <template #default="{ state }">
<div class="p-3"> <div class="p-3">
<VAlert <VAlert
:type="state.type"
:title="state.title"
:description="state.description"
:closable="state.closable" :closable="state.closable"
:description="state.description"
:title="state.title"
:type="state.type"
/> />
</div> </div>
</template> </template>
@ -71,7 +71,7 @@ function initState() {
<Variant title="Slots"> <Variant title="Slots">
<template #default> <template #default>
<div class="p-3"> <div class="p-3">
<VAlert type="default" title="你有新的消息"> <VAlert title="你有新的消息" type="default">
<template #icon> <template #icon>
<IconMessage /> <IconMessage />
</template> </template>

2
src/components/base/alert/Alert.vue
View File

@ -119,7 +119,7 @@ const handleClose = () => {
.alert-actions { .alert-actions {
@apply border-t; @apply border-t;
@apply pt-2 mt-3; @apply mt-3 pt-2;
} }
&.alert-default { &.alert-default {

88
src/components/base/button/Button.story.vue
View File

@ -3,75 +3,75 @@
<Variant title="Type"> <Variant title="Type">
<template #default> <template #default>
<VSpace> <VSpace>
<VButton type="primary"> primary </VButton> <VButton type="primary"> primary</VButton>
<VButton type="secondary"> secondary </VButton> <VButton type="secondary"> secondary</VButton>
<VButton type="danger"> danger </VButton> <VButton type="danger"> danger</VButton>
<VButton type="default"> default </VButton> <VButton type="default"> default</VButton>
</VSpace> </VSpace>
</template> </template>
</Variant> </Variant>
<Variant title="Size"> <Variant title="Size">
<template #default> <template #default>
<VSpace> <VSpace>
<VButton type="secondary" size="lg"> Large </VButton> <VButton size="lg" type="secondary"> Large</VButton>
<VButton type="secondary"> default </VButton> <VButton type="secondary"> default</VButton>
<VButton type="secondary" size="sm"> sm </VButton> <VButton size="sm" type="secondary"> sm</VButton>
<VButton type="secondary" size="xs"> xs </VButton> <VButton size="xs" type="secondary"> xs</VButton>
</VSpace> </VSpace>
</template> </template>
</Variant> </Variant>
<Variant title="Circle"> <Variant title="Circle">
<template #default> <template #default>
<VSpace> <VSpace>
<VButton type="secondary" size="lg" circle> lg </VButton> <VButton circle size="lg" type="secondary"> lg</VButton>
<VButton type="secondary" circle> d </VButton> <VButton circle type="secondary"> d</VButton>
<VButton type="secondary" size="sm" circle> sm </VButton> <VButton circle size="sm" type="secondary"> sm</VButton>
<VButton type="secondary" size="xs" circle> xs </VButton> <VButton circle size="xs" type="secondary"> xs</VButton>
</VSpace> </VSpace>
</template> </template>
</Variant> </Variant>
<Variant title="Block"> <Variant title="Block">
<template #default> <template #default>
<VSpace direction="column" class="w-full"> <VSpace class="w-full" direction="column">
<VButton type="primary" block> primary </VButton> <VButton block type="primary"> primary</VButton>
<VButton type="secondary" block> secondary </VButton> <VButton block type="secondary"> secondary</VButton>
<VButton type="danger" block> danger </VButton> <VButton block type="danger"> danger</VButton>
<VButton type="default" block> default </VButton> <VButton block type="default"> default</VButton>
</VSpace> </VSpace>
</template> </template>
</Variant> </Variant>
<Variant title="Disabled" :init-state="disabledState"> <Variant :init-state="disabledState" title="Disabled">
<template #default="{ state }"> <template #default="{ state }">
<VSpace> <VSpace>
<VButton type="primary" :disabled="state.disabled"> primary </VButton> <VButton :disabled="state.disabled" type="primary"> primary</VButton>
<VButton type="secondary" :disabled="state.disabled"> <VButton :disabled="state.disabled" type="secondary">
secondary secondary
</VButton> </VButton>
<VButton type="danger" :disabled="state.disabled"> danger </VButton> <VButton :disabled="state.disabled" type="danger"> danger</VButton>
<VButton type="default" :disabled="state.disabled"> default </VButton> <VButton :disabled="state.disabled" type="default"> default</VButton>
</VSpace> </VSpace>
</template> </template>
<template #controls="{ state }"> <template #controls="{ state }">
<HstCheckbox v-model="state.disabled" title="Disabled" /> <HstCheckbox v-model="state.disabled" title="Disabled" />
</template> </template>
</Variant> </Variant>
<Variant title="Loading" :init-state="loadingState"> <Variant :init-state="loadingState" title="Loading">
<template #default="{ state }"> <template #default="{ state }">
<VSpace> <VSpace>
<VButton type="primary" :loading="state.loading"> Primary </VButton> <VButton :loading="state.loading" type="primary"> Primary</VButton>
<VButton type="secondary" :loading="state.loading"> <VButton :loading="state.loading" type="secondary">
Secondary Secondary
</VButton> </VButton>
<VButton type="danger" :loading="state.loading"> Danger </VButton> <VButton :loading="state.loading" type="danger"> Danger</VButton>
<VButton type="default" :loading="state.loading"> Default </VButton> <VButton :loading="state.loading" type="default"> Default</VButton>
<VButton size="lg" type="secondary" :loading="state.loading"> <VButton :loading="state.loading" size="lg" type="secondary">
Large Large
</VButton> </VButton>
<VButton type="secondary" :loading="state.loading">Default</VButton> <VButton :loading="state.loading" type="secondary">Default</VButton>
<VButton size="sm" type="secondary" :loading="state.loading"> <VButton :loading="state.loading" size="sm" type="secondary">
sm sm
</VButton> </VButton>
<VButton size="xs" type="secondary" :loading="state.loading"> <VButton :loading="state.loading" size="xs" type="secondary">
xs xs
</VButton> </VButton>
</VSpace> </VSpace>
@ -80,49 +80,49 @@
<HstCheckbox v-model="state.loading" title="Loading" /> <HstCheckbox v-model="state.loading" title="Loading" />
</template> </template>
</Variant> </Variant>
<Variant title="Icon" :init-state="iconState"> <Variant :init-state="iconState" title="Icon">
<template #default="{ state }"> <template #default="{ state }">
<VSpace> <VSpace>
<VButton <VButton
:disabled="state.disabled"
:loading="state.loading"
size="lg" size="lg"
type="primary" type="primary"
:loading="state.loading"
:disabled="state.disabled"
> >
<template #icon> <template #icon>
<IconSettings class="w-full h-full" /> <IconSettings class="h-full w-full" />
</template> </template>
Large Large
</VButton> </VButton>
<VButton <VButton
type="secondary"
:loading="state.loading"
:disabled="state.disabled" :disabled="state.disabled"
:loading="state.loading"
type="secondary"
> >
<template #icon> <template #icon>
<IconSettings class="w-full h-full" /> <IconSettings class="h-full w-full" />
</template> </template>
Default Default
</VButton> </VButton>
<VButton <VButton
:disabled="state.disabled"
:loading="state.loading"
size="sm" size="sm"
type="danger" type="danger"
:loading="state.loading"
:disabled="state.disabled"
> >
<template #icon> <template #icon>
<IconSettings class="w-full h-full" /> <IconSettings class="h-full w-full" />
</template> </template>
sm sm
</VButton> </VButton>
<VButton <VButton
:disabled="state.disabled"
:loading="state.loading"
size="xs" size="xs"
type="default" type="default"
:loading="state.loading"
:disabled="state.disabled"
> >
<template #icon> <template #icon>
<IconSettings class="w-full h-full" /> <IconSettings class="h-full w-full" />
</template> </template>
xs xs
</VButton> </VButton>

352
src/components/base/card/Card.story.vue
View File

@ -11,7 +11,7 @@ import { IconSettings } from "@/core/icons";
<template #default> <template #default>
<div class="p-3"> <div class="p-3">
<VCard title="登录"> <VCard title="登录">
<VSpace direction="column" class="w-full"> <VSpace class="w-full" direction="column">
<VInput placeholder="用户名"></VInput> <VInput placeholder="用户名"></VInput>
<VInput placeholder="密码"></VInput> <VInput placeholder="密码"></VInput>
</VSpace> </VSpace>
@ -33,260 +33,260 @@ import { IconSettings } from "@/core/icons";
<!-- https://lofiui.co/--> <!-- https://lofiui.co/-->
<div class="p-3"> <div class="p-3">
<VCard title="Page Views"> <VCard title="Page Views">
<div class="flex flex-col items-center w-full bg-white"> <div class="flex w-full flex-col items-center bg-white">
<div class="flex items-end flex-grow w-full space-x-2 sm:space-x-3"> <div class="flex w-full flex-grow items-end space-x-2 sm:space-x-3">
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$37,500</span >$37,500</span
> >
<div class="flex items-end w-full"> <div class="flex w-full items-end">
<div <div
class="relative flex justify-center flex-grow h-8 bg-indigo-200" class="relative flex h-8 flex-grow justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-6 bg-indigo-300" class="relative flex h-6 flex-grow justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-16 bg-indigo-400" class="relative flex h-16 flex-grow justify-center bg-indigo-400"
></div> ></div>
</div> </div>
<span class="absolute bottom-0 text-xs font-bold">Jan</span> <span class="absolute bottom-0 text-xs font-bold">Jan</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$45,000</span >$45,000</span
> >
<div class="flex items-end w-full"> <div class="flex w-full items-end">
<div <div
class="relative flex justify-center flex-grow h-10 bg-indigo-200" class="relative flex h-10 flex-grow justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-6 bg-indigo-300" class="relative flex h-6 flex-grow justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-20 bg-indigo-400" class="relative flex h-20 flex-grow justify-center bg-indigo-400"
></div> ></div>
</div> </div>
<span class="absolute bottom-0 text-xs font-bold">Feb</span> <span class="absolute bottom-0 text-xs font-bold">Feb</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$47,500</span >$47,500</span
> >
<div class="flex items-end w-full"> <div class="flex w-full items-end">
<div <div
class="relative flex justify-center flex-grow h-10 bg-indigo-200" class="relative flex h-10 flex-grow justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-8 bg-indigo-300" class="relative flex h-8 flex-grow justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-20 bg-indigo-400" class="relative flex h-20 flex-grow justify-center bg-indigo-400"
></div> ></div>
</div> </div>
<span class="absolute bottom-0 text-xs font-bold">Mar</span> <span class="absolute bottom-0 text-xs font-bold">Mar</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$50,000</span >$50,000</span
> >
<div class="flex items-end w-full"> <div class="flex w-full items-end">
<div <div
class="relative flex justify-center flex-grow h-10 bg-indigo-200" class="relative flex h-10 flex-grow justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-6 bg-indigo-300" class="relative flex h-6 flex-grow justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-24 bg-indigo-400" class="relative flex h-24 flex-grow justify-center bg-indigo-400"
></div> ></div>
</div> </div>
<span class="absolute bottom-0 text-xs font-bold">Apr</span> <span class="absolute bottom-0 text-xs font-bold">Apr</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$47,500</span >$47,500</span
> >
<div class="flex items-end w-full"> <div class="flex w-full items-end">
<div <div
class="relative flex justify-center flex-grow h-10 bg-indigo-200" class="relative flex h-10 flex-grow justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-8 bg-indigo-300" class="relative flex h-8 flex-grow justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-20 bg-indigo-400" class="relative flex h-20 flex-grow justify-center bg-indigo-400"
></div> ></div>
</div> </div>
<span class="absolute bottom-0 text-xs font-bold">May</span> <span class="absolute bottom-0 text-xs font-bold">May</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$55,000</span >$55,000</span
> >
<div class="flex items-end w-full"> <div class="flex w-full items-end">
<div <div
class="relative flex justify-center flex-grow h-12 bg-indigo-200" class="relative flex h-12 flex-grow justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-8 bg-indigo-300" class="relative flex h-8 flex-grow justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-24 bg-indigo-400" class="relative flex h-24 flex-grow justify-center bg-indigo-400"
></div> ></div>
</div> </div>
<span class="absolute bottom-0 text-xs font-bold">Jun</span> <span class="absolute bottom-0 text-xs font-bold">Jun</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$60,000</span >$60,000</span
> >
<div class="flex items-end w-full"> <div class="flex w-full items-end">
<div <div
class="relative flex justify-center flex-grow h-12 bg-indigo-200" class="relative flex h-12 flex-grow justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-16 bg-indigo-300" class="relative flex h-16 flex-grow justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-20 bg-indigo-400" class="relative flex h-20 flex-grow justify-center bg-indigo-400"
></div> ></div>
</div> </div>
<span class="absolute bottom-0 text-xs font-bold">Jul</span> <span class="absolute bottom-0 text-xs font-bold">Jul</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$57,500</span >$57,500</span
> >
<div class="flex items-end w-full"> <div class="flex w-full items-end">
<div <div
class="relative flex justify-center flex-grow h-12 bg-indigo-200" class="relative flex h-12 flex-grow justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-10 bg-indigo-300" class="relative flex h-10 flex-grow justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-24 bg-indigo-400" class="relative flex h-24 flex-grow justify-center bg-indigo-400"
></div> ></div>
</div> </div>
<span class="absolute bottom-0 text-xs font-bold">Aug</span> <span class="absolute bottom-0 text-xs font-bold">Aug</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$67,500</span >$67,500</span
> >
<div class="flex items-end w-full"> <div class="flex w-full items-end">
<div <div
class="relative flex justify-center flex-grow h-12 bg-indigo-200" class="relative flex h-12 flex-grow justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-10 bg-indigo-300" class="relative flex h-10 flex-grow justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-32 bg-indigo-400" class="relative flex h-32 flex-grow justify-center bg-indigo-400"
></div> ></div>
</div> </div>
<span class="absolute bottom-0 text-xs font-bold">Sep</span> <span class="absolute bottom-0 text-xs font-bold">Sep</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$65,000</span >$65,000</span
> >
<div class="flex items-end w-full"> <div class="flex w-full items-end">
<div <div
class="relative flex justify-center flex-grow h-12 bg-indigo-200" class="relative flex h-12 flex-grow justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-12 bg-indigo-300" class="relative flex h-12 flex-grow justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow bg-indigo-400 h-28" class="relative flex h-28 flex-grow justify-center bg-indigo-400"
></div> ></div>
</div> </div>
<span class="absolute bottom-0 text-xs font-bold">Oct</span> <span class="absolute bottom-0 text-xs font-bold">Oct</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$70,000</span >$70,000</span
> >
<div class="flex items-end w-full"> <div class="flex w-full items-end">
<div <div
class="relative flex justify-center flex-grow h-8 bg-indigo-200" class="relative flex h-8 flex-grow justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-8 bg-indigo-300" class="relative flex h-8 flex-grow justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-40 bg-indigo-400" class="relative flex h-40 flex-grow justify-center bg-indigo-400"
></div> ></div>
</div> </div>
<span class="absolute bottom-0 text-xs font-bold">Nov</span> <span class="absolute bottom-0 text-xs font-bold">Nov</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$75,000</span >$75,000</span
> >
<div class="flex items-end w-full"> <div class="flex w-full items-end">
<div <div
class="relative flex justify-center flex-grow h-12 bg-indigo-200" class="relative flex h-12 flex-grow justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-8 bg-indigo-300" class="relative flex h-8 flex-grow justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center flex-grow h-40 bg-indigo-400" class="relative flex h-40 flex-grow justify-center bg-indigo-400"
></div> ></div>
</div> </div>
<span class="absolute bottom-0 text-xs font-bold">Dec</span> <span class="absolute bottom-0 text-xs font-bold">Dec</span>
</div> </div>
</div> </div>
<div class="flex w-full mt-3"> <div class="mt-3 flex w-full">
<div class="flex items-center ml-auto"> <div class="ml-auto flex items-center">
<span class="block w-4 h-4 bg-indigo-400"></span> <span class="block h-4 w-4 bg-indigo-400"></span>
<span class="ml-1 text-xs font-medium">Existing</span> <span class="ml-1 text-xs font-medium">Existing</span>
</div> </div>
<div class="flex items-center ml-4"> <div class="ml-4 flex items-center">
<span class="block w-4 h-4 bg-indigo-300"></span> <span class="block h-4 w-4 bg-indigo-300"></span>
<span class="ml-1 text-xs font-medium">Upgrades</span> <span class="ml-1 text-xs font-medium">Upgrades</span>
</div> </div>
<div class="flex items-center ml-4"> <div class="ml-4 flex items-center">
<span class="block w-4 h-4 bg-indigo-200"></span> <span class="block h-4 w-4 bg-indigo-200"></span>
<span class="ml-1 text-xs font-medium">New</span> <span class="ml-1 text-xs font-medium">New</span>
</div> </div>
</div> </div>
@ -297,236 +297,236 @@ import { IconSettings } from "@/core/icons";
<!-- https://lofiui.co/--> <!-- https://lofiui.co/-->
<div class="p-3"> <div class="p-3">
<VCard title="Page Views"> <VCard title="Page Views">
<div class="flex flex-col items-center w-full bg-white"> <div class="flex w-full flex-col items-center bg-white">
<div class="flex items-end flex-grow w-full space-x-2 sm:space-x-3"> <div class="flex w-full flex-grow items-end space-x-2 sm:space-x-3">
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$37,500</span >$37,500</span
> >
<div <div
class="relative flex justify-center w-full h-8 bg-indigo-200" class="relative flex h-8 w-full justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-6 bg-indigo-300" class="relative flex h-6 w-full justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-16 bg-indigo-400" class="relative flex h-16 w-full justify-center bg-indigo-400"
></div> ></div>
<span class="absolute bottom-0 text-xs font-bold">Jan</span> <span class="absolute bottom-0 text-xs font-bold">Jan</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$45,000</span >$45,000</span
> >
<div <div
class="relative flex justify-center w-full h-10 bg-indigo-200" class="relative flex h-10 w-full justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-6 bg-indigo-300" class="relative flex h-6 w-full justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-20 bg-indigo-400" class="relative flex h-20 w-full justify-center bg-indigo-400"
></div> ></div>
<span class="absolute bottom-0 text-xs font-bold">Feb</span> <span class="absolute bottom-0 text-xs font-bold">Feb</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$47,500</span >$47,500</span
> >
<div <div
class="relative flex justify-center w-full h-10 bg-indigo-200" class="relative flex h-10 w-full justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-8 bg-indigo-300" class="relative flex h-8 w-full justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-20 bg-indigo-400" class="relative flex h-20 w-full justify-center bg-indigo-400"
></div> ></div>
<span class="absolute bottom-0 text-xs font-bold">Mar</span> <span class="absolute bottom-0 text-xs font-bold">Mar</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$50,000</span >$50,000</span
> >
<div <div
class="relative flex justify-center w-full h-10 bg-indigo-200" class="relative flex h-10 w-full justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-6 bg-indigo-300" class="relative flex h-6 w-full justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-24 bg-indigo-400" class="relative flex h-24 w-full justify-center bg-indigo-400"
></div> ></div>
<span class="absolute bottom-0 text-xs font-bold">Apr</span> <span class="absolute bottom-0 text-xs font-bold">Apr</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$47,500</span >$47,500</span
> >
<div <div
class="relative flex justify-center w-full h-10 bg-indigo-200" class="relative flex h-10 w-full justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-8 bg-indigo-300" class="relative flex h-8 w-full justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-20 bg-indigo-400" class="relative flex h-20 w-full justify-center bg-indigo-400"
></div> ></div>
<span class="absolute bottom-0 text-xs font-bold">May</span> <span class="absolute bottom-0 text-xs font-bold">May</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$55,000</span >$55,000</span
> >
<div <div
class="relative flex justify-center w-full h-12 bg-indigo-200" class="relative flex h-12 w-full justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-8 bg-indigo-300" class="relative flex h-8 w-full justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-24 bg-indigo-400" class="relative flex h-24 w-full justify-center bg-indigo-400"
></div> ></div>
<span class="absolute bottom-0 text-xs font-bold">Jun</span> <span class="absolute bottom-0 text-xs font-bold">Jun</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$60,000</span >$60,000</span
> >
<div <div
class="relative flex justify-center w-full h-12 bg-indigo-200" class="relative flex h-12 w-full justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-16 bg-indigo-300" class="relative flex h-16 w-full justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-20 bg-indigo-400" class="relative flex h-20 w-full justify-center bg-indigo-400"
></div> ></div>
<span class="absolute bottom-0 text-xs font-bold">Jul</span> <span class="absolute bottom-0 text-xs font-bold">Jul</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$57,500</span >$57,500</span
> >
<div <div
class="relative flex justify-center w-full h-12 bg-indigo-200" class="relative flex h-12 w-full justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-10 bg-indigo-300" class="relative flex h-10 w-full justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-24 bg-indigo-400" class="relative flex h-24 w-full justify-center bg-indigo-400"
></div> ></div>
<span class="absolute bottom-0 text-xs font-bold">Aug</span> <span class="absolute bottom-0 text-xs font-bold">Aug</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$67,500</span >$67,500</span
> >
<div <div
class="relative flex justify-center w-full h-12 bg-indigo-200" class="relative flex h-12 w-full justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-10 bg-indigo-300" class="relative flex h-10 w-full justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-32 bg-indigo-400" class="relative flex h-32 w-full justify-center bg-indigo-400"
></div> ></div>
<span class="absolute bottom-0 text-xs font-bold">Sep</span> <span class="absolute bottom-0 text-xs font-bold">Sep</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$65,000</span >$65,000</span
> >
<div <div
class="relative flex justify-center w-full h-12 bg-indigo-200" class="relative flex h-12 w-full justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-12 bg-indigo-300" class="relative flex h-12 w-full justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center w-full bg-indigo-400 h-28" class="relative flex h-28 w-full justify-center bg-indigo-400"
></div> ></div>
<span class="absolute bottom-0 text-xs font-bold">Oct</span> <span class="absolute bottom-0 text-xs font-bold">Oct</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$70,000</span >$70,000</span
> >
<div <div
class="relative flex justify-center w-full h-8 bg-indigo-200" class="relative flex h-8 w-full justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-8 bg-indigo-300" class="relative flex h-8 w-full justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-40 bg-indigo-400" class="relative flex h-40 w-full justify-center bg-indigo-400"
></div> ></div>
<span class="absolute bottom-0 text-xs font-bold">Nov</span> <span class="absolute bottom-0 text-xs font-bold">Nov</span>
</div> </div>
<div <div
class="relative flex flex-col items-center flex-grow pb-5 group" class="group relative flex flex-grow flex-col items-center pb-5"
> >
<span <span
class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block" class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
>$75,000</span >$75,000</span
> >
<div <div
class="relative flex justify-center w-full h-12 bg-indigo-200" class="relative flex h-12 w-full justify-center bg-indigo-200"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-8 bg-indigo-300" class="relative flex h-8 w-full justify-center bg-indigo-300"
></div> ></div>
<div <div
class="relative flex justify-center w-full h-40 bg-indigo-400" class="relative flex h-40 w-full justify-center bg-indigo-400"
></div> ></div>
<span class="absolute bottom-0 text-xs font-bold">Dec</span> <span class="absolute bottom-0 text-xs font-bold">Dec</span>
</div> </div>
</div> </div>
<div class="flex w-full mt-3"> <div class="mt-3 flex w-full">
<div class="flex items-center ml-auto"> <div class="ml-auto flex items-center">
<span class="block w-4 h-4 bg-indigo-400"></span> <span class="block h-4 w-4 bg-indigo-400"></span>
<span class="ml-1 text-xs font-medium">Existing</span> <span class="ml-1 text-xs font-medium">Existing</span>
</div> </div>
<div class="flex items-center ml-4"> <div class="ml-4 flex items-center">
<span class="block w-4 h-4 bg-indigo-300"></span> <span class="block h-4 w-4 bg-indigo-300"></span>
<span class="ml-1 text-xs font-medium">Upgrades</span> <span class="ml-1 text-xs font-medium">Upgrades</span>
</div> </div>
<div class="flex items-center ml-4"> <div class="ml-4 flex items-center">
<span class="block w-4 h-4 bg-indigo-200"></span> <span class="block h-4 w-4 bg-indigo-200"></span>
<span class="ml-1 text-xs font-medium">New</span> <span class="ml-1 text-xs font-medium">New</span>
</div> </div>
</div> </div>
@ -535,30 +535,30 @@ import { IconSettings } from "@/core/icons";
</div> </div>
<div class="p-3"> <div class="p-3">
<div class="grid lg:grid-cols-3 md:grid-cols-2 gap-6 w-full"> <div class="grid w-full gap-6 md:grid-cols-2 lg:grid-cols-3">
<VCard> <VCard>
<div class="flex items-center bg-white"> <div class="flex items-center bg-white">
<div <div
class="flex flex-shrink-0 items-center justify-center bg-green-200 h-16 w-16 rounded" class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded bg-green-200"
> >
<svg <svg
class="w-6 h-6 fill-current text-green-700" class="h-6 w-6 fill-current text-green-700"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
> >
<path <path
fill-rule="evenodd"
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
clip-rule="evenodd" clip-rule="evenodd"
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
fill-rule="evenodd"
/> />
</svg> </svg>
</div> </div>
<div class="flex-grow flex flex-col ml-4"> <div class="ml-4 flex flex-grow flex-col">
<span class="text-xl font-bold">$8,430</span> <span class="text-xl font-bold">$8,430</span>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-gray-500">Revenue last 30 days</span> <span class="text-gray-500">Revenue last 30 days</span>
<span class="text-green-500 text-sm font-semibold ml-2" <span class="ml-2 text-sm font-semibold text-green-500"
>+12.6%</span >+12.6%</span
> >
</div> </div>
@ -569,26 +569,26 @@ import { IconSettings } from "@/core/icons";
<VCard> <VCard>
<div class="flex items-center bg-white"> <div class="flex items-center bg-white">
<div <div
class="flex flex-shrink-0 items-center justify-center bg-red-200 h-16 w-16 rounded" class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded bg-red-200"
> >
<svg <svg
class="w-6 h-6 fill-current text-red-700" class="h-6 w-6 fill-current text-red-700"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
> >
<path <path
fill-rule="evenodd"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
clip-rule="evenodd" clip-rule="evenodd"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
fill-rule="evenodd"
/> />
</svg> </svg>
</div> </div>
<div class="flex-grow flex flex-col ml-4"> <div class="ml-4 flex flex-grow flex-col">
<span class="text-xl font-bold">211</span> <span class="text-xl font-bold">211</span>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-gray-500">Sales last 30 days</span> <span class="text-gray-500">Sales last 30 days</span>
<span class="text-red-500 text-sm font-semibold ml-2" <span class="ml-2 text-sm font-semibold text-red-500"
>-8.1%</span >-8.1%</span
> >
</div> </div>
@ -599,26 +599,26 @@ import { IconSettings } from "@/core/icons";
<VCard> <VCard>
<div class="flex items-center bg-white"> <div class="flex items-center bg-white">
<div <div
class="flex flex-shrink-0 items-center justify-center bg-green-200 h-16 w-16 rounded" class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded bg-green-200"
> >
<svg <svg
class="w-6 h-6 fill-current text-green-700" class="h-6 w-6 fill-current text-green-700"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
> >
<path <path
fill-rule="evenodd"
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
clip-rule="evenodd" clip-rule="evenodd"
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
fill-rule="evenodd"
/> />
</svg> </svg>
</div> </div>
<div class="flex-grow flex flex-col ml-4"> <div class="ml-4 flex flex-grow flex-col">
<span class="text-xl font-bold">140</span> <span class="text-xl font-bold">140</span>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-gray-500">Customers last 30 days</span> <span class="text-gray-500">Customers last 30 days</span>
<span class="text-green-500 text-sm font-semibold ml-2" <span class="ml-2 text-sm font-semibold text-green-500"
>+28.4%</span >+28.4%</span
> >
</div> </div>

2
src/components/base/card/Card.vue
View File

@ -33,7 +33,7 @@ defineProps({
</template> </template>
<style lang="scss"> <style lang="scss">
.card-wrapper { .card-wrapper {
@apply flex flex-col box-border; @apply box-border flex flex-col;
@apply bg-white; @apply bg-white;
@apply shadow-sm; @apply shadow-sm;
@apply overflow-hidden; @apply overflow-hidden;

2
src/components/base/checkbox/CheckBox.story.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Story title="CheckBox" :init-state="initState"> <Story :init-state="initState" title="CheckBox">
<template #default="{ state }"> <template #default="{ state }">
<VCheckboxGroup <VCheckboxGroup
v-model="state.value" v-model="state.value"

6
src/components/base/header/PageHeader.vue
View File

@ -6,9 +6,9 @@ defineProps({
}); });
</script> </script>
<template> <template>
<div class="flex items-center justify-between p-4 bg-white"> <div class="flex items-center justify-between bg-white p-4">
<div class="flex-1 self-center min-w-0"> <div class="min-w-0 flex-1 self-center">
<h2 class="flex text-xl font-bold text-gray-800 truncate items-center"> <h2 class="flex items-center truncate text-xl font-bold text-gray-800">
<slot name="icon" /> <slot name="icon" />
<span>{{ title }}</span> <span>{{ title }}</span>
</h2> </h2>

2
src/components/base/input/Input.story.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Story title="Input" :init-state="initState"> <Story :init-state="initState" title="Input">
<template #default="{ state }"> <template #default="{ state }">
<div class="w-1/2"> <div class="w-1/2">
<VInput <VInput

8
src/components/base/menu/Menu.story.vue
View File

@ -4,7 +4,7 @@
<template #default> <template #default>
<div class="w-1/3"> <div class="w-1/3">
<VMenu> <VMenu>
<VMenuItem title="仪表盘" active> <VMenuItem active title="仪表盘">
<template #icon> <template #icon>
<Component :is="IconDashboard" /> <Component :is="IconDashboard" />
</template> </template>
@ -39,10 +39,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { VMenu, VMenuItem, VMenuLabel } from "./index"; import { VMenu, VMenuItem, VMenuLabel } from "./index";
import { import {
IconDashboard,
IconBookRead, IconBookRead,
IconPages, IconDashboard,
IconMessage,
IconFolder, IconFolder,
IconMessage,
IconPages,
} from "@/core/icons"; } from "@/core/icons";
</script> </script>

2
src/components/base/menu/Menu.vue
View File

@ -13,7 +13,7 @@ provide<string[] | undefined>("openIds", props.openIds);
</script> </script>
<template> <template>
<div class="menu-container p-3 w-full"> <div class="menu-container w-full p-3">
<ul> <ul>
<slot /> <slot />
</ul> </ul>

4
src/components/base/menu/MenuItem.vue
View File

@ -49,10 +49,10 @@ function handleClick() {
@click.stop="handleClick" @click.stop="handleClick"
> >
<div :class="{ active }" class="menu-item-title"> <div :class="{ active }" class="menu-item-title">
<span v-if="$slots.icon" class="menu-icon self-center mr-3"> <span v-if="$slots.icon" class="menu-icon mr-3 self-center">
<slot name="icon" /> <slot name="icon" />
</span> </span>
<span class="menu-title self-center flex-1"> <span class="menu-title flex-1 self-center">
{{ title }} {{ title }}
</span> </span>
<span <span

4
src/components/base/menu/RoutesMenu.tsx
View File

@ -1,9 +1,9 @@
import type { Component, PropType } from "vue";
import { computed, defineComponent } from "vue"; import { computed, defineComponent } from "vue";
import type { PropType, Component } from "vue";
import type { MenuGroupType, MenuItemType } from "@/router/menus.config"; import type { MenuGroupType, MenuItemType } from "@/router/menus.config";
import { VMenu, VMenuItem, VMenuLabel } from "@/components/base/menu/index"; import { VMenu, VMenuItem, VMenuLabel } from "@/components/base/menu/index";
import { useRoute, useRouter } from "vue-router";
import type { RouteLocationMatched } from "vue-router"; import type { RouteLocationMatched } from "vue-router";
import { useRoute, useRouter } from "vue-router";
const VRoutesMenu = defineComponent({ const VRoutesMenu = defineComponent({
name: "VRoutesMenu", name: "VRoutesMenu",

24
src/components/base/menu/__tests__/__snapshots__/Menu.spec.tsx.snap
View File

@ -1,7 +1,7 @@
// Vitest Snapshot v1 // Vitest Snapshot v1
exports[`Menu > should render 1`] = ` exports[`Menu > should render 1`] = `
"<div class=\\"menu-container p-3 w-full\\"> "<div class=\\"menu-container w-full p-3\\">
<ul></ul> <ul></ul>
</div>" </div>"
`; `;
@ -9,7 +9,7 @@ exports[`Menu > should render 1`] = `
exports[`Menu > should render 2`] = ` exports[`Menu > should render 2`] = `
"<li class=\\"menu-item\\"> "<li class=\\"menu-item\\">
<div class=\\"menu-item-title\\"> <div class=\\"menu-item-title\\">
<!--v-if--><span class=\\"menu-title self-center flex-1\\"></span> <!--v-if--><span class=\\"menu-title flex-1 self-center\\"></span>
<!--v-if--> <!--v-if-->
</div> </div>
<transition-stub> <transition-stub>
@ -19,11 +19,11 @@ exports[`Menu > should render 2`] = `
`; `;
exports[`Menu > should work with openIds prop 1`] = ` exports[`Menu > should work with openIds prop 1`] = `
"<div class=\\"menu-container p-3 w-full\\"> "<div class=\\"menu-container w-full p-3\\">
<ul> <ul>
<li class=\\"menu-item\\"> <li class=\\"menu-item\\">
<div class=\\"menu-item-title\\"> <div class=\\"menu-item-title\\">
<!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 1</span> <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 1</span>
<!--v-if--> <!--v-if-->
</div> </div>
<transition-stub> <transition-stub>
@ -32,7 +32,7 @@ exports[`Menu > should work with openIds prop 1`] = `
</li> </li>
<li class=\\"menu-item\\"> <li class=\\"menu-item\\">
<div class=\\"menu-item-title\\"> <div class=\\"menu-item-title\\">
<!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 2</span> <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 2</span>
<!--v-if--> <!--v-if-->
</div> </div>
<transition-stub> <transition-stub>
@ -41,13 +41,13 @@ exports[`Menu > should work with openIds prop 1`] = `
</li> </li>
<li class=\\"has-submenus menu-item\\"> <li class=\\"has-submenus menu-item\\">
<div class=\\"menu-item-title\\"> <div class=\\"menu-item-title\\">
<!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 3</span><span class=\\"open menu-icon-collapse self-center transition-all\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"m13.172 12l-4.95-4.95l1.414-1.414L16 12l-6.364 6.364l-1.414-1.414z\\"></path></svg></span> <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 3</span><span class=\\"open menu-icon-collapse self-center transition-all\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"m13.172 12l-4.95-4.95l1.414-1.414L16 12l-6.364 6.364l-1.414-1.414z\\"></path></svg></span>
</div> </div>
<transition-stub> <transition-stub>
<ul class=\\"sub-menu-items transition-all\\"> <ul class=\\"sub-menu-items transition-all\\">
<li class=\\"menu-item\\"> <li class=\\"menu-item\\">
<div class=\\"menu-item-title\\"> <div class=\\"menu-item-title\\">
<!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 4</span> <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 4</span>
<!--v-if--> <!--v-if-->
</div> </div>
<transition-stub> <transition-stub>
@ -62,11 +62,11 @@ exports[`Menu > should work with openIds prop 1`] = `
`; `;
exports[`Menu > should work with sub menus 1`] = ` exports[`Menu > should work with sub menus 1`] = `
"<div class=\\"menu-container p-3 w-full\\"> "<div class=\\"menu-container w-full p-3\\">
<ul> <ul>
<li class=\\"menu-item\\"> <li class=\\"menu-item\\">
<div class=\\"menu-item-title\\"> <div class=\\"menu-item-title\\">
<!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 1</span> <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 1</span>
<!--v-if--> <!--v-if-->
</div> </div>
<transition-stub> <transition-stub>
@ -75,7 +75,7 @@ exports[`Menu > should work with sub menus 1`] = `
</li> </li>
<li class=\\"menu-item\\"> <li class=\\"menu-item\\">
<div class=\\"menu-item-title\\"> <div class=\\"menu-item-title\\">
<!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 2</span> <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 2</span>
<!--v-if--> <!--v-if-->
</div> </div>
<transition-stub> <transition-stub>
@ -84,13 +84,13 @@ exports[`Menu > should work with sub menus 1`] = `
</li> </li>
<li class=\\"has-submenus menu-item\\"> <li class=\\"has-submenus menu-item\\">
<div class=\\"menu-item-title\\"> <div class=\\"menu-item-title\\">
<!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 3</span><span class=\\"open menu-icon-collapse self-center transition-all\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"m13.172 12l-4.95-4.95l1.414-1.414L16 12l-6.364 6.364l-1.414-1.414z\\"></path></svg></span> <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 3</span><span class=\\"open menu-icon-collapse self-center transition-all\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"m13.172 12l-4.95-4.95l1.414-1.414L16 12l-6.364 6.364l-1.414-1.414z\\"></path></svg></span>
</div> </div>
<transition-stub> <transition-stub>
<ul class=\\"sub-menu-items transition-all\\"> <ul class=\\"sub-menu-items transition-all\\">
<li class=\\"menu-item\\"> <li class=\\"menu-item\\">
<div class=\\"menu-item-title\\"> <div class=\\"menu-item-title\\">
<!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 4</span> <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 4</span>
<!--v-if--> <!--v-if-->
</div> </div>
<transition-stub> <transition-stub>

12
src/components/base/modal/Modal.story.vue
View File

@ -23,16 +23,16 @@ function initState() {
:width="state.width" :width="state.width"
> >
<div class="flex flex-col"> <div class="flex flex-col">
<img src="https://ryanc.cc/avatar" class="w-full" /> <img class="w-full" src="https://ryanc.cc/avatar" />
<img src="https://ryanc.cc/avatar" class="w-full" /> <img class="w-full" src="https://ryanc.cc/avatar" />
<img src="https://halo.run/logo" class="w-full" /> <img class="w-full" src="https://halo.run/logo" />
</div> </div>
<template #footer> <template #footer>
<VSpace> <VSpace>
<VButton type="primary" @click="state.visible = false" loading <VButton loading type="primary" @click="state.visible = false"
>确定</VButton >确定
> </VButton>
<VButton @click="state.visible = false">取消</VButton> <VButton @click="state.visible = false">取消</VButton>
</VSpace> </VSpace>
</template> </template>

6
src/components/base/modal/Modal.vue
View File

@ -102,7 +102,7 @@ function handleClose() {
.modal-wrapper { .modal-wrapper {
@apply fixed; @apply fixed;
@apply top-0 left-0; @apply top-0 left-0;
@apply w-full h-full; @apply h-full w-full;
@apply flex flex-row; @apply flex flex-row;
@apply items-center justify-center; @apply items-center justify-center;
z-index: 99999; z-index: 99999;
@ -111,7 +111,7 @@ function handleClose() {
@apply flex-none; @apply flex-none;
@apply absolute; @apply absolute;
@apply top-0 left-0; @apply top-0 left-0;
@apply w-full h-full; @apply h-full w-full;
@apply transition-opacity; @apply transition-opacity;
@apply bg-gray-500; @apply bg-gray-500;
@apply bg-opacity-75; @apply bg-opacity-75;
@ -155,7 +155,7 @@ function handleClose() {
} }
.modal-body { .modal-body {
@apply overflow-x-hidden overflow-y-auto; @apply overflow-y-auto overflow-x-hidden;
@apply flex-1; @apply flex-1;
word-wrap: break-word; word-wrap: break-word;
padding: 12px 16px; padding: 12px 16px;

4
src/components/base/radio/Radio.story.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Story title="Radio" :init-state="initState"> <Story :init-state="initState" title="Radio">
<template #default="{ state }"> <template #default="{ state }">
<VRadioGroup v-model="state.value" :options="radioData"></VRadioGroup> <VRadioGroup v-model="state.value" :options="radioData"></VRadioGroup>
@ -15,7 +15,7 @@
</Story> </Story>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { VRadioGroup, VRadio } from "@/components/base/radio/index"; import { VRadio, VRadioGroup } from "@/components/base/radio/index";
function initState() { function initState() {
return { return {

2
src/components/base/radio/RadioGroup.vue
View File

@ -36,8 +36,8 @@ function handleChange(value: string | number | boolean) {
:key="index" :key="index"
:label="option[labelKey] + ''" :label="option[labelKey] + ''"
:model-value="modelValue" :model-value="modelValue"
:value="option[valueKey]"
:name="name" :name="name"
:value="option[valueKey]"
@change="handleChange" @change="handleChange"
/> />
</div> </div>

8
src/components/base/select/Select.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from "vue"; import type { PropType } from "vue";
import type { Size } from "./interface";
import { computed } from "vue"; import { computed } from "vue";
import type { Size } from "./interface";
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
@ -34,12 +34,12 @@ function handleChange(e: Event) {
<template> <template>
<div class="select-wrapper"> <div class="select-wrapper">
<select <select
:class="classes"
:disabled="disabled"
:value="modelValue" :value="modelValue"
@change="handleChange" @change="handleChange"
:disabled="disabled"
:class="classes"
> >
<option v-if="placeholder" value="" key="placeholder" disabled hidden> <option v-if="placeholder" key="placeholder" disabled hidden value="">
{{ placeholder }} {{ placeholder }}
</option> </option>
<slot /> <slot />

4
src/components/base/space/Space.story.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Story title="Space" :init-state="initState"> <Story :init-state="initState" title="Space">
<template #default="{ state }"> <template #default="{ state }">
<VRadio <VRadio
v-for="(option, index) in ['row', 'column']" v-for="(option, index) in ['row', 'column']"
@ -26,9 +26,9 @@
name="spacing" name="spacing"
></VRadio> ></VRadio>
<VSpace <VSpace
:align="state.align"
:direction="state.direction" :direction="state.direction"
:spacing="state.spacing" :spacing="state.spacing"
:align="state.align"
> >
<div>Control：</div> <div>Control：</div>
<VButton type="primary">确定</VButton> <VButton type="primary">确定</VButton>

2
src/components/base/space/Space.vue
View File

@ -26,9 +26,9 @@ const wrapperClasses = computed(() => {
</script> </script>
<template> <template>
<div <div
class="space-wrapper"
:class="wrapperClasses" :class="wrapperClasses"
:style="`gap: ${SpacingSize[spacing]}px`" :style="`gap: ${SpacingSize[spacing]}px`"
class="space-wrapper"
> >
<slot /> <slot />
</div> </div>

2
src/components/base/tabs/TabItem.vue
View File

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject } from "vue";
import type { ComputedRef } from "vue"; import type { ComputedRef } from "vue";
import { computed, inject } from "vue";
const props = defineProps({ const props = defineProps({
id: { id: {

12
src/components/base/tabs/Tabbar.story.vue
View File

@ -13,23 +13,23 @@ function initState() {
} }
</script> </script>
<template> <template>
<Story title="Tabbar" :init-state="initState"> <Story :init-state="initState" title="Tabbar">
<template #default="{ state }"> <template #default="{ state }">
<div class="p-3"> <div class="p-3">
<VTabbar :items="state.items" v-model:activeId="state.activeId" /> <VTabbar v-model:activeId="state.activeId" :items="state.items" />
</div> </div>
<div class="p-3"> <div class="p-3">
<VTabbar <VTabbar
type="pills"
:items="state.items"
v-model:activeId="state.activeId" v-model:activeId="state.activeId"
:items="state.items"
type="pills"
/> />
</div> </div>
<div class="p-3"> <div class="p-3">
<VTabbar <VTabbar
type="outline"
:items="state.items"
v-model:activeId="state.activeId" v-model:activeId="state.activeId"
:items="state.items"
type="outline"
/> />
</div> </div>
</template> </template>

22
src/components/base/tabs/Tabs.story.vue
View File

@ -1,45 +1,45 @@
<script lang="ts" setup> <script lang="ts" setup>
import { VTabs, VTabItem } from "./index"; import { VTabItem, VTabs } from "./index";
</script> </script>
<template> <template>
<Story title="Tabs" :init-state="() => ({ activeId: 'ryanwang' })"> <Story :init-state="() => ({ activeId: 'ryanwang' })" title="Tabs">
<template #default="{ state }"> <template #default="{ state }">
<div class="p-3"> <div class="p-3">
<VTabs v-model:activeId="state.activeId"> <VTabs v-model:activeId="state.activeId">
<VTabItem label="JohnNiang" id="johnniang"> <VTabItem id="johnniang" label="JohnNiang">
This is JohnNiang's Item This is JohnNiang's Item
</VTabItem> </VTabItem>
<VTabItem label="Ryan Wang" id="ryanwang"> <VTabItem id="ryanwang" label="Ryan Wang">
This is Ryan Wang's Item This is Ryan Wang's Item
</VTabItem> </VTabItem>
<VTabItem label="guqing" id="guqing"> <VTabItem id="guqing" label="guqing">
This is guqing's Item This is guqing's Item
</VTabItem> </VTabItem>
</VTabs> </VTabs>
</div> </div>
<div class="p-3"> <div class="p-3">
<VTabs v-model:activeId="state.activeId" type="pills"> <VTabs v-model:activeId="state.activeId" type="pills">
<VTabItem label="JohnNiang" id="johnniang"> <VTabItem id="johnniang" label="JohnNiang">
This is JohnNiang's Item This is JohnNiang's Item
</VTabItem> </VTabItem>
<VTabItem label="Ryan Wang" id="ryanwang"> <VTabItem id="ryanwang" label="Ryan Wang">
This is Ryan Wang's Item This is Ryan Wang's Item
</VTabItem> </VTabItem>
<VTabItem label="guqing" id="guqing"> <VTabItem id="guqing" label="guqing">
This is guqing's Item This is guqing's Item
</VTabItem> </VTabItem>
</VTabs> </VTabs>
</div> </div>
<div class="p-3"> <div class="p-3">
<VTabs v-model:activeId="state.activeId" type="outline"> <VTabs v-model:activeId="state.activeId" type="outline">
<VTabItem label="JohnNiang" id="johnniang"> <VTabItem id="johnniang" label="JohnNiang">
This is JohnNiang's Item This is JohnNiang's Item
</VTabItem> </VTabItem>
<VTabItem label="Ryan Wang" id="ryanwang"> <VTabItem id="ryanwang" label="Ryan Wang">
This is Ryan Wang's Item This is Ryan Wang's Item
</VTabItem> </VTabItem>
<VTabItem label="guqing" id="guqing"> <VTabItem id="guqing" label="guqing">
This is guqing's Item This is guqing's Item
</VTabItem> </VTabItem>
</VTabs> </VTabs>

9
src/components/base/tabs/Tabs.vue
View File

@ -1,8 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { ComputedRef, PropType } from "vue";
import { computed, provide, useSlots } from "vue"; import { computed, provide, useSlots } from "vue";
import type { PropType, ComputedRef } from "vue";
import { VTabbar } from "./index"; import { VTabbar } from "./index";
import type { Type, Direction } from "@/components/base/tabs/interface"; import type { Direction, Type } from "@/components/base/tabs/interface";
const props = defineProps({ const props = defineProps({
activeId: { activeId: {
@ -54,13 +54,13 @@ const handleChange = (id: string | number) => {
}; };
</script> </script>
<template> <template>
<div class="tabs-wrapper" :class="classes"> <div :class="classes" class="tabs-wrapper">
<div class="tabs-bar-wrapper"> <div class="tabs-bar-wrapper">
<VTabbar <VTabbar
:activeId="activeId" :activeId="activeId"
:direction="direction"
:items="tabItems" :items="tabItems"
:type="type" :type="type"
:direction="direction"
@change="handleChange" @change="handleChange"
/> />
</div> </div>
@ -80,6 +80,7 @@ const handleChange = (id: string | number) => {
@apply mt-2; @apply mt-2;
} }
} }
&.tabs-direction-column { &.tabs-direction-column {
.tabs-items-wrapper { .tabs-items-wrapper {
@apply ml-2; @apply ml-2;

4
src/components/base/tag/Tag.story.vue
View File

@ -13,13 +13,13 @@
<Variant title="Icon"> <Variant title="Icon">
<template #default> <template #default>
<VSpace> <VSpace>
<VTag theme="default" rounded> <VTag rounded theme="default">
<template #leftIcon> <template #leftIcon>
<IconSettings /> <IconSettings />
</template> </template>
Halo Halo
</VTag> </VTag>
<VTag theme="primary" rounded> <VTag rounded theme="primary">
<template #leftIcon> <template #leftIcon>
<IconSettings /> <IconSettings />
</template> </template>

4
src/components/base/tag/Tag.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from "vue"; import type { PropType } from "vue";
import type { Theme } from "@/components/base/tag/interface";
import { computed } from "vue"; import { computed } from "vue";
import type { Theme } from "@/components/base/tag/interface";
const props = defineProps({ const props = defineProps({
theme: { theme: {
@ -19,7 +19,7 @@ const classes = computed(() => {
}); });
</script> </script>
<template> <template>
<div class="tag-wrapper" :class="classes"> <div :class="classes" class="tag-wrapper">
<div v-if="$slots.leftIcon" class="tag-left-icon"> <div v-if="$slots.leftIcon" class="tag-left-icon">
<slot name="leftIcon" /> <slot name="leftIcon" />
</div> </div>

4
src/components/base/textarea/Textarea.story.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<Story title="Textarea" :init-state="initState"> <Story :init-state="initState" title="Textarea">
<template #default="{ state }"> <template #default="{ state }">
<div class="w-1/2"> <div class="w-1/2">
<VTextarea <VTextarea
v-model="state.value" v-model="state.value"
:disabled="state.disabled" :disabled="state.disabled"
:placeholder="state.placeholder" :placeholder="state.placeholder"
:size="state.size"
:rows="state.rows" :rows="state.rows"
:size="state.size"
/> />
</div> </div>
</template> </template>

4
src/components/base/textarea/Textarea.vue
View File

@ -26,11 +26,11 @@ function handleInput(e: Event) {
<template> <template>
<div class="textarea-wrapper"> <div class="textarea-wrapper">
<textarea <textarea
:disabled="disabled"
:placeholder="placeholder" :placeholder="placeholder"
:rows="rows"
:value="modelValue" :value="modelValue"
@input="handleInput" @input="handleInput"
:disabled="disabled"
:rows="rows"
> >
</textarea> </textarea>
</div> </div>

32
src/layouts/BasicLayout.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="flex h-full"> <div class="flex h-full">
<aside <aside
class="hidden md:block navbar fixed h-full overflow-y-auto" class="navbar fixed hidden h-full overflow-y-auto md:block"
style="background: #fff" style="background: #fff"
> >
<div class="logo flex justify-center py-5"> <div class="logo flex justify-center py-5">
@ -9,12 +9,12 @@
</div> </div>
<div class="px-3"> <div class="px-3">
<div <div
class="flex p-2 text-gray-400 items-center transition-all bg-gray-100 rounded cursor-pointer hover:text-gray-900" class="flex cursor-pointer items-center rounded bg-gray-100 p-2 text-gray-400 transition-all hover:text-gray-900"
> >
<span class="mr-3"> <span class="mr-3">
<IconSearch /> <IconSearch />
</span> </span>
<span class="flex-1 text-base select-none font-normal">搜索</span> <span class="flex-1 select-none text-base font-normal">搜索</span>
<div class="text-sm">⌘+K</div> <div class="text-sm">⌘+K</div>
</div> </div>
</div> </div>
@ -24,7 +24,7 @@
<img class="h-11 w-11 rounded-full" src="https://ryanc.cc/avatar" /> <img class="h-11 w-11 rounded-full" src="https://ryanc.cc/avatar" />
</div> </div>
<div class="profile-name"> <div class="profile-name">
<div class="flex font-medium text-sm">Ryan Wang</div> <div class="flex text-sm font-medium">Ryan Wang</div>
<div class="flex"> <div class="flex">
<VTag> <VTag>
<template #leftIcon> <template #leftIcon>
@ -35,21 +35,21 @@
</div> </div>
</div> </div>
<div <div
class="profile-control transition-all hover:bg-gray-100 rounded cursor-pointer p-1" class="profile-control cursor-pointer rounded p-1 transition-all hover:bg-gray-100"
@click="handleRouteToProfile" @click="handleRouteToProfile"
> >
<IconMore /> <IconMore />
</div> </div>
</div> </div>
</aside> </aside>
<main class="content w-full overflow-y-auto mb-safe pb-12 md:pb-0"> <main class="content w-full overflow-y-auto pb-12 mb-safe md:pb-0">
<slot v-if="$slots.default" /> <slot v-if="$slots.default" />
<RouterView v-else /> <RouterView v-else />
</main> </main>
<!--bottom nav bar--> <!--bottom nav bar-->
<div <div
class="md:hidden bottom-nav-bar grid grid-cols-6 fixed left-0 bottom-0 right-0 border-t-2 border-black drop-shadow-2xl pb-safe mt-safe" class="bottom-nav-bar fixed left-0 bottom-0 right-0 grid grid-cols-6 border-t-2 border-black drop-shadow-2xl mt-safe pb-safe md:hidden"
style="background: #0e1731" style="background: #0e1731"
> >
<div <div
@ -60,15 +60,15 @@
@click="router.push(menu.path)" @click="router.push(menu.path)"
> >
<div <div
class="p-1 w-full cursor-pointer flex items-center justify-center text-white" class="flex w-full cursor-pointer items-center justify-center p-1 text-white"
> >
<div <div
class="w-10 h-10 flex flex-col justify-center items-center is-active is-active0" class="is-active is-active0 flex h-10 w-10 flex-col items-center justify-center"
> >
<div class="text-base"> <div class="text-base">
<Component :is="menu.icon" /> <Component :is="menu.icon" />
</div> </div>
<div class="text-xs mt-0.5"> <div class="mt-0.5 text-xs">
{{ menu.name }} {{ menu.name }}
</div> </div>
</div> </div>
@ -76,15 +76,15 @@
</div> </div>
<div class="nav-item" @click="moreMenuVisible = true"> <div class="nav-item" @click="moreMenuVisible = true">
<div <div
class="p-1 w-full cursor-pointer flex items-center justify-center text-white" class="flex w-full cursor-pointer items-center justify-center p-1 text-white"
> >
<div <div
class="w-10 h-10 flex flex-col justify-center items-center is-active is-active0" class="is-active is-active0 flex h-10 w-10 flex-col items-center justify-center"
> >
<div class="text-base"> <div class="text-base">
<IconMore /> <IconMore />
</div> </div>
<div class="text-xs mt-0.5">更多</div> <div class="mt-0.5 text-xs">更多</div>
</div> </div>
</div> </div>
</div> </div>
@ -92,7 +92,7 @@
<Teleport to="body"> <Teleport to="body">
<div <div
v-show="moreMenuRootVisible" v-show="moreMenuRootVisible"
class="drawer-wrapper fixed top-0 left-0 w-full h-full flex flex-row items-end justify-center z-[99999]" class="drawer-wrapper fixed top-0 left-0 z-[99999] flex h-full w-full flex-row items-end justify-center"
> >
<transition <transition
enter-active-class="ease-out duration-200" enter-active-class="ease-out duration-200"
@ -106,7 +106,7 @@
> >
<div <div
v-show="moreMenuVisible" v-show="moreMenuVisible"
class="drawer-layer flex-none absolute top-0 left-0 w-full h-full transition-opacity bg-gray-500 bg-opacity-75" class="drawer-layer absolute top-0 left-0 h-full w-full flex-none bg-gray-500 bg-opacity-75 transition-opacity"
@click="moreMenuVisible = false" @click="moreMenuVisible = false"
></div> ></div>
</transition> </transition>
@ -120,7 +120,7 @@
> >
<div <div
v-show="moreMenuVisible" v-show="moreMenuVisible"
class="drawer-content flex flex-col relative bg-white items-stretch shadow-xl w-screen h-3/4 rounded-t-md overflow-y-auto" class="drawer-content relative flex h-3/4 w-screen flex-col items-stretch overflow-y-auto rounded-t-md bg-white shadow-xl"
> >
<div class="drawer-body"> <div class="drawer-body">
<VRoutesMenu <VRoutesMenu

6
src/layouts/SystemSettingsLayout.vue
View File

@ -5,7 +5,7 @@ import { VButton } from "@/components/base/button";
import { VTabbar } from "@/components/base/tabs"; import { VTabbar } from "@/components/base/tabs";
import { IconSettings } from "@/core/icons"; import { IconSettings } from "@/core/icons";
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { useRouter, RouterView, useRoute } from "vue-router"; import { RouterView, useRoute, useRouter } from "vue-router";
const SettingTabs = [ const SettingTabs = [
{ {
@ -42,7 +42,7 @@ const handleTabChange = (id: string) => {
<BasicLayout> <BasicLayout>
<VPageHeader title="设置"> <VPageHeader title="设置">
<template #icon> <template #icon>
<IconSettings class="self-center mr-2" /> <IconSettings class="mr-2 self-center" />
</template> </template>
<template #actions> <template #actions>
<VButton type="secondary">安装</VButton> <VButton type="secondary">安装</VButton>
@ -53,8 +53,8 @@ const handleTabChange = (id: string) => {
<VTabbar <VTabbar
v-model:active-id="activeTab" v-model:active-id="activeTab"
:items="SettingTabs" :items="SettingTabs"
@change="handleTabChange"
type="outline" type="outline"
@change="handleTabChange"
></VTabbar> ></VTabbar>
<div> <div>

132
src/views/contents/attachments/AttachmentList.vue
View File

@ -74,7 +74,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
<template> <template>
<VPageHeader title="附件库"> <VPageHeader title="附件库">
<template #icon> <template #icon>
<IconPalette class="self-center mr-2" /> <IconPalette class="mr-2 self-center" />
</template> </template>
<template #actions> <template #actions>
<VSpace> <VSpace>
@ -90,23 +90,23 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
<div class="w-full sm:w-96"> <div class="w-full sm:w-96">
<VCard :bodyClass="['!p-0']" title="存储策略"> <VCard :bodyClass="['!p-0']" title="存储策略">
<fieldset> <fieldset>
<div class="bg-white -space-y-px divide-y divide-gray-100"> <div class="-space-y-px divide-y divide-gray-100 bg-white">
<label <label
v-for="(strategy, index) in strategies" v-for="(strategy, index) in strategies"
:key="index" :key="index"
:class="{ :class="{
'bg-gray-50': selected === strategy.id, 'bg-gray-50': selected === strategy.id,
}" }"
class="relative p-4 flex cursor-pointer focus:outline-none" class="relative flex cursor-pointer p-4 focus:outline-none"
> >
<input <input
v-model="selected" v-model="selected"
:value="strategy.id" :value="strategy.id"
class="h-4 w-4 mt-0.5 cursor-pointer shrink-0 text-indigo-600 border-gray-300 focus:ring-indigo-500" class="mt-0.5 h-4 w-4 shrink-0 cursor-pointer border-gray-300 text-indigo-600 focus:ring-indigo-500"
name="privacy" name="privacy"
type="radio" type="radio"
/> />
<span class="ml-3 flex flex-col flex-1"> <span class="ml-3 flex flex-1 flex-col">
<span <span
:class="{ 'font-bold': selected === strategy.id }" :class="{ 'font-bold': selected === strategy.id }"
class="block text-sm font-medium" class="block text-sm font-medium"
@ -119,7 +119,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
</span> </span>
<div class="self-center"> <div class="self-center">
<IconSettings <IconSettings
class="hover:text-blue-600 cursor-pointer transition-all" class="cursor-pointer transition-all hover:text-blue-600"
@click.stop="strategyVisible = true" @click.stop="strategyVisible = true"
/> />
</div> </div>
@ -147,16 +147,16 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
<IconArrowRight /> <IconArrowRight />
</div> </div>
</template> </template>
<div class="bg-white overflow-hidden"> <div class="overflow-hidden bg-white">
<div> <div>
<dl> <dl>
<div <div
class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">原始内容</dt> <dt class="text-sm font-medium text-gray-900">原始内容</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<img <img
class="w-full sm:w-1/2 rounded" class="w-full rounded sm:w-1/2"
src="https://picsum.photos/1000/700?random=1" src="https://picsum.photos/1000/700?random=1"
/> />
</dd> </dd>
@ -165,7 +165,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">存储策略</dt> <dt class="text-sm font-medium text-gray-900">存储策略</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
阿里云/bucket/blog-attachments 阿里云/bucket/blog-attachments
</dd> </dd>
</div> </div>
@ -173,7 +173,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">文件名称</dt> <dt class="text-sm font-medium text-gray-900">文件名称</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
attachment-0 attachment-0
</dd> </dd>
</div> </div>
@ -181,7 +181,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">文件类型</dt> <dt class="text-sm font-medium text-gray-900">文件类型</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
image/jpeg image/jpeg
</dd> </dd>
</div> </div>
@ -189,7 +189,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">文件大小</dt> <dt class="text-sm font-medium text-gray-900">文件大小</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
1.2 MB 1.2 MB
</dd> </dd>
</div> </div>
@ -197,7 +197,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">上传者</dt> <dt class="text-sm font-medium text-gray-900">上传者</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
Ryan Wang Ryan Wang
</dd> </dd>
</div> </div>
@ -205,7 +205,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">上传时间</dt> <dt class="text-sm font-medium text-gray-900">上传时间</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
2020-01-01 12:00:00 2020-01-01 12:00:00
</dd> </dd>
</div> </div>
@ -213,7 +213,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">原始链接</dt> <dt class="text-sm font-medium text-gray-900">原始链接</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
https://picsum.photos/1000/700?random=1 https://picsum.photos/1000/700?random=1
</dd> </dd>
</div> </div>
@ -221,7 +221,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">引用位置</dt> <dt class="text-sm font-medium text-gray-900">引用位置</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
https://picsum.photos/1000/700?random=1 https://picsum.photos/1000/700?random=1
</dd> </dd>
</div> </div>
@ -250,16 +250,16 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
> >
<VCard :body-class="['!p-0']"> <VCard :body-class="['!p-0']">
<div <div
class="group block w-full aspect-w-10 aspect-h-7 bg-gray-100 overflow-hidden cursor-pointer" class="group aspect-w-10 aspect-h-7 block w-full cursor-pointer overflow-hidden bg-gray-100"
> >
<img <img
:src="attachment.url" :src="attachment.url"
alt="" alt=""
class="object-cover pointer-events-none group-hover:opacity-75" class="pointer-events-none object-cover group-hover:opacity-75"
/> />
</div> </div>
<p <p
class="block text-sm font-medium text-gray-700 truncate pointer-events-none px-2 py-1" class="pointer-events-none block truncate px-2 py-1 text-sm font-medium text-gray-700"
> >
{{ attachment.name }} {{ attachment.name }}
</p> </p>
@ -273,22 +273,22 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
</VModal> </VModal>
<div class="m-0 md:m-4"> <div class="m-0 md:m-4">
<div class="flex-col flex sm:flex-row gap-2"> <div class="flex flex-col gap-2 sm:flex-row">
<div class="w-full"> <div class="w-full">
<VCard :body-class="[viewType === 'list' ? '!p-0' : '']"> <VCard :body-class="[viewType === 'list' ? '!p-0' : '']">
<template #header> <template #header>
<div class="px-4 py-3 block w-full bg-gray-50"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="flex flex-col sm:flex-row items-start sm:items-center relative" class="relative flex flex-col items-start sm:flex-row sm:items-center"
> >
<div class="hidden sm:flex items-center mr-4"> <div class="mr-4 hidden items-center sm:flex">
<input <input
v-model="checkAll" v-model="checkAll"
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
<div class="w-full sm:w-auto flex flex-1"> <div class="flex w-full flex-1 sm:w-auto">
<VInput <VInput
v-if="!checkAll" v-if="!checkAll"
class="w-full sm:w-72" class="w-full sm:w-72"
@ -299,11 +299,11 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
<VButton type="danger">删除</VButton> <VButton type="danger">删除</VButton>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 sm:mt-0 flex"> <div class="mt-4 flex sm:mt-0">
<VSpace spacing="lg"> <VSpace spacing="lg">
<FloatingDropdown> <FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">上传者</span> <span class="mr-0.5">上传者</span>
<span> <span>
@ -311,7 +311,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
</span> </span>
</div> </div>
<template #popper> <template #popper>
<div class="p-4 w-80 h-96"> <div class="h-96 w-80 p-4">
<div class="bg-white"> <div class="bg-white">
<!--TODO: Auto Focus--> <!--TODO: Auto Focus-->
<VInput placeholder="根据关键词搜索"></VInput> <VInput placeholder="根据关键词搜索"></VInput>
@ -321,12 +321,12 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
<li <li
v-for="(user, index) in users" v-for="(user, index) in users"
:key="index" :key="index"
class="py-4 cursor-pointer hover:bg-gray-50" class="cursor-pointer py-4 hover:bg-gray-50"
> >
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<div class="flex items-center"> <div class="flex items-center">
<input <input
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
@ -337,13 +337,13 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
class="h-10 w-10 rounded" class="h-10 w-10 rounded"
/> />
</div> </div>
<div class="flex-1 min-w-0"> <div class="min-w-0 flex-1">
<p <p
class="text-sm font-medium text-gray-900 truncate" class="truncate text-sm font-medium text-gray-900"
> >
{{ user.name }} {{ user.name }}
</p> </p>
<p class="text-sm text-gray-500 truncate"> <p class="truncate text-sm text-gray-500">
@{{ user.username }} @{{ user.username }}
</p> </p>
</div> </div>
@ -358,7 +358,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
</template> </template>
</FloatingDropdown> </FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm" class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">引用位置</span> <span class="mr-0.5">引用位置</span>
<span> <span>
@ -366,7 +366,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
</span> </span>
</div> </div>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm" class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">标签</span> <span class="mr-0.5">标签</span>
<span> <span>
@ -375,7 +375,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
</div> </div>
<FloatingDropdown> <FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">排序</span> <span class="mr-0.5">排序</span>
<span> <span>
@ -383,25 +383,25 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
</span> </span>
</div> </div>
<template #popper> <template #popper>
<div class="p-4 w-72"> <div class="w-72 p-4">
<ul class="space-y-1"> <ul class="space-y-1">
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">较近上传</span> <span class="truncate">较近上传</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">较晚上传</span> <span class="truncate">较晚上传</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">文件大小降序</span> <span class="truncate">文件大小降序</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">文件大小升序</span> <span class="truncate">文件大小升序</span>
</li> </li>
@ -414,10 +414,10 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
v-for="(item, index) in viewTypes" v-for="(item, index) in viewTypes"
:key="index" :key="index"
:class="{ :class="{
'bg-gray-200 text-black font-bold': 'bg-gray-200 font-bold text-black':
viewType === item.name, viewType === item.name,
}" }"
class="p-1 rounded cursor-pointer hover:bg-gray-200" class="cursor-pointer rounded p-1 hover:bg-gray-200"
@click="viewType = item.name" @click="viewType = item.name"
> >
<component :is="item.icon" /> <component :is="item.icon" />
@ -431,7 +431,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
<div <div
v-if="viewType === 'grid'" v-if="viewType === 'grid'"
class="grid grid-cols-3 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-12 mt-2" class="mt-2 grid grid-cols-3 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-12"
role="list" role="list"
> >
<VCard <VCard
@ -443,16 +443,16 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
> >
<div class="relative bg-white"> <div class="relative bg-white">
<div <div
class="group block w-full h-full aspect-w-10 aspect-h-8 bg-gray-100 overflow-hidden cursor-pointer" class="group aspect-w-10 aspect-h-8 block h-full w-full cursor-pointer overflow-hidden bg-gray-100"
> >
<img <img
:src="attachment.url" :src="attachment.url"
alt="" alt=""
class="object-cover pointer-events-none group-hover:opacity-75" class="pointer-events-none object-cover group-hover:opacity-75"
/> />
</div> </div>
<p <p
class="block text-xs font-medium text-gray-700 truncate text-center pointer-events-none px-2 py-1" class="pointer-events-none block truncate px-2 py-1 text-center text-xs font-medium text-gray-700"
> >
{{ attachment.name }} {{ attachment.name }}
</p> </p>
@ -467,7 +467,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
<ul <ul
v-if="viewType === 'list'" v-if="viewType === 'list'"
class="divide-y divide-gray-100 box-border w-full h-full" class="box-border h-full w-full divide-y divide-gray-100"
role="list" role="list"
> >
<li v-for="(attachment, index) in attachments" :key="index"> <li v-for="(attachment, index) in attachments" :key="index">
@ -475,29 +475,29 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
:class="{ :class="{
'bg-gray-100': checkAll, 'bg-gray-100': checkAll,
}" }"
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative" class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
> >
<div <div
v-show="checkAll" v-show="checkAll"
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary" class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
></div> ></div>
<div class="flex flex-row items-center relative"> <div class="relative flex flex-row items-center">
<div class="hidden mr-4 sm:flex items-center"> <div class="mr-4 hidden items-center sm:flex">
<input <input
v-model="checkAll" v-model="checkAll"
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="flex flex-col sm:flex-row"> <div class="flex flex-col sm:flex-row">
<span <span
class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900" class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
> >
{{ attachment.name }} {{ attachment.name }}
</span> </span>
</div> </div>
<div class="flex mt-1"> <div class="mt-1 flex">
<VSpace> <VSpace>
<span class="text-xs text-gray-500">image/png</span> <span class="text-xs text-gray-500">image/png</span>
<span class="text-xs text-gray-500">1.2 MB</span> <span class="text-xs text-gray-500">1.2 MB</span>
@ -506,10 +506,10 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
</div> </div>
<div class="flex"> <div class="flex">
<div <div
class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6" class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
> >
<img <img
class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white" class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
src="https://ryanc.cc/avatar" src="https://ryanc.cc/avatar"
/> />
<time class="text-sm text-gray-500" datetime="2020-01-07"> <time class="text-sm text-gray-500" datetime="2020-01-07">
@ -526,15 +526,15 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
</ul> </ul>
<template #footer> <template #footer>
<div class="bg-white flex items-center justify-end"> <div class="flex items-center justify-end bg-white">
<div class="flex-1 flex items-center justify-end"> <div class="flex flex-1 items-center justify-end">
<div> <div>
<nav <nav
aria-label="Pagination" aria-label="Pagination"
class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
> >
<a <a
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" class="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
@ -554,30 +554,30 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
</a> </a>
<a <a
aria-current="page" aria-current="page"
class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium" class="relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600"
href="#" href="#"
> >
1 1
</a> </a>
<a <a
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium" class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
2 2
</a> </a>
<span <span
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700" class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
> >
... ...
</span> </span>
<a <a
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium" class="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
href="#" href="#"
> >
4 4
</a> </a>
<a <a
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
<span class="sr-only">Next</span> <span class="sr-only">Next</span>

56
src/views/contents/comments/CommentList.vue
View File

@ -12,7 +12,7 @@ const checkAll = ref(false);
<template> <template>
<VPageHeader title="评论"> <VPageHeader title="评论">
<template #icon> <template #icon>
<IconMessage class="self-center mr-2" /> <IconMessage class="mr-2 self-center" />
</template> </template>
<template #actions> <template #actions>
<VSpace> <VSpace>
@ -24,18 +24,18 @@ const checkAll = ref(false);
<div class="m-0 md:m-4"> <div class="m-0 md:m-4">
<VCard :body-class="['!p-0']"> <VCard :body-class="['!p-0']">
<template #header> <template #header>
<div class="px-4 py-3 block w-full bg-gray-50"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="flex flex-col sm:flex-row items-start sm:items-center relative" class="relative flex flex-col items-start sm:flex-row sm:items-center"
> >
<div class="hidden sm:flex items-center mr-4"> <div class="mr-4 hidden items-center sm:flex">
<input <input
v-model="checkAll" v-model="checkAll"
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
<div class="w-full sm:w-auto flex flex-1"> <div class="flex w-full flex-1 sm:w-auto">
<VInput <VInput
v-if="!checkAll" v-if="!checkAll"
class="w-full sm:w-72" class="w-full sm:w-72"
@ -46,10 +46,10 @@ const checkAll = ref(false);
<VButton type="danger">删除</VButton> <VButton type="danger">删除</VButton>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 sm:mt-0 flex"> <div class="mt-4 flex sm:mt-0">
<VSpace spacing="lg"> <VSpace spacing="lg">
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm" class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">状态</span> <span class="mr-0.5">状态</span>
<span> <span>
@ -57,7 +57,7 @@ const checkAll = ref(false);
</span> </span>
</div> </div>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm" class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">评论者</span> <span class="mr-0.5">评论者</span>
<span> <span>
@ -65,7 +65,7 @@ const checkAll = ref(false);
</span> </span>
</div> </div>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm" class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">排序</span> <span class="mr-0.5">排序</span>
<span> <span>
@ -77,35 +77,35 @@ const checkAll = ref(false);
</div> </div>
</div> </div>
</template> </template>
<ul class="divide-y divide-gray-100 box-border w-full h-full" role="list"> <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
<li v-for="index in 10" :key="index"> <li v-for="index in 10" :key="index">
<div <div
:class="{ :class="{
'bg-gray-100': checkAll, 'bg-gray-100': checkAll,
}" }"
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative" class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
> >
<div <div
v-show="checkAll" v-show="checkAll"
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary" class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
></div> ></div>
<div class="flex flex-row items-center relative"> <div class="relative flex flex-row items-center">
<div class="hidden mr-4 sm:flex items-center"> <div class="mr-4 hidden items-center sm:flex">
<input <input
v-model="checkAll" v-model="checkAll"
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="flex flex-col sm:flex-row"> <div class="flex flex-col sm:flex-row">
<span <span
class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900" class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
> >
Ryan Wang Ryan Wang
</span> </span>
</div> </div>
<div class="flex mt-1"> <div class="mt-1 flex">
<VSpace> <VSpace>
<p class="text-xs text-gray-500">评论测试</p> <p class="text-xs text-gray-500">评论测试</p>
</VSpace> </VSpace>
@ -113,10 +113,10 @@ const checkAll = ref(false);
</div> </div>
<div class="flex"> <div class="flex">
<div <div
class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6" class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
> >
<img <img
class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white" class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
src="https://ryanc.cc/avatar" src="https://ryanc.cc/avatar"
/> />
<time class="text-sm text-gray-500" datetime="2020-01-07"> <time class="text-sm text-gray-500" datetime="2020-01-07">
@ -133,15 +133,15 @@ const checkAll = ref(false);
</ul> </ul>
<template #footer> <template #footer>
<div class="bg-white flex items-center justify-end"> <div class="flex items-center justify-end bg-white">
<div class="flex-1 flex items-center justify-end"> <div class="flex flex-1 items-center justify-end">
<div> <div>
<nav <nav
aria-label="Pagination" aria-label="Pagination"
class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
> >
<a <a
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" class="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
@ -161,30 +161,30 @@ const checkAll = ref(false);
</a> </a>
<a <a
aria-current="page" aria-current="page"
class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium" class="relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600"
href="#" href="#"
> >
1 1
</a> </a>
<a <a
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium" class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
2 2
</a> </a>
<span <span
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700" class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
> >
... ...
</span> </span>
<a <a
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium" class="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
href="#" href="#"
> >
4 4
</a> </a>
<a <a
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
<span class="sr-only">Next</span> <span class="sr-only">Next</span>

6
src/views/contents/posts/PostEditor.vue
View File

@ -7,12 +7,12 @@ import { IconBookRead, IconSave } from "@/core/icons";
<template> <template>
<VPageHeader title="文章"> <VPageHeader title="文章">
<template #icon> <template #icon>
<IconBookRead class="self-center mr-2" /> <IconBookRead class="mr-2 self-center" />
</template> </template>
<template #actions> <template #actions>
<VButton :route="{ name: 'PostEditor' }" type="secondary"> <VButton :route="{ name: 'PostEditor' }" type="secondary">
<template #icon> <template #icon>
<IconSave class="w-full h-full" /> <IconSave class="h-full w-full" />
</template> </template>
发布 发布
</VButton> </VButton>
@ -21,7 +21,7 @@ import { IconBookRead, IconSave } from "@/core/icons";
<div class="editor"> <div class="editor">
<!--mock--> <!--mock-->
<iframe <iframe
class="w-full h-screen border-0" class="h-screen w-full border-0"
src="https://stackedit.io/app" src="https://stackedit.io/app"
></iframe> ></iframe>
</div> </div>

162
src/views/contents/posts/PostList.vue
View File

@ -94,57 +94,57 @@ const handleRouteToEditor = (post: any) => {
<VTabs v-model:active-id="settingActiveId" type="outline"> <VTabs v-model:active-id="settingActiveId" type="outline">
<VTabItem id="general" label="常规"> <VTabItem id="general" label="常规">
<form> <form>
<div class="divide-y-0 sm:divide-y sm:divide-gray-200 space-y-6"> <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
标题 标题
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VInput v-model="selected.title"></VInput> <VInput v-model="selected.title"></VInput>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
别名 别名
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VInput v-model="selected.slug"></VInput> <VInput v-model="selected.slug"></VInput>
</div> </div>
</div> </div>
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-center sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-center sm:gap-4 sm:pt-5"
> >
<label class="block text-sm font-medium text-gray-700"> <label class="block text-sm font-medium text-gray-700">
分类目录 分类目录
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VInput></VInput> <VInput></VInput>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
标签 标签
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VInput></VInput> <VInput></VInput>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
摘要 摘要
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VTextarea v-model="selected.summary"></VTextarea> <VTextarea v-model="selected.summary"></VTextarea>
</div> </div>
</div> </div>
@ -153,74 +153,74 @@ const handleRouteToEditor = (post: any) => {
</VTabItem> </VTabItem>
<VTabItem id="advanced" label="高级"> <VTabItem id="advanced" label="高级">
<form> <form>
<div class="divide-y-0 sm:divide-y sm:divide-gray-200 space-y-6"> <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
禁止评论 禁止评论
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VInput v-model="selected.disallowComment"></VInput> <VInput v-model="selected.disallowComment"></VInput>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
是否置顶 是否置顶
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VInput v-model="selected.topPriority"></VInput> <VInput v-model="selected.topPriority"></VInput>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
发表时间 发表时间
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VInput></VInput> <VInput></VInput>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
自定义模板 自定义模板
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VInput v-model="selected.template"></VInput> <VInput v-model="selected.template"></VInput>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
访问密码 访问密码
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VInput v-model="selected.password"></VInput> <VInput v-model="selected.password"></VInput>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
封面图 封面图
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VSpace align="start" class="w-full" direction="column"> <VSpace align="start" class="w-full" direction="column">
<div class="w-full sm:w-1/2"> <div class="w-full sm:w-1/2">
<div <div
class="block aspect-w-10 aspect-h-7 bg-gray-100 overflow-hidden cursor-pointer rounded" class="aspect-w-10 aspect-h-7 block cursor-pointer overflow-hidden rounded bg-gray-100"
> >
<img <img
:src="selected.thumbnail" :src="selected.thumbnail"
alt="" alt=""
class="object-cover pointer-events-none" class="pointer-events-none object-cover"
/> />
</div> </div>
</div> </div>
@ -233,14 +233,14 @@ const handleRouteToEditor = (post: any) => {
</VTabItem> </VTabItem>
<VTabItem id="seo" label="SEO"> <VTabItem id="seo" label="SEO">
<form> <form>
<div class="divide-y-0 sm:divide-y sm:divide-gray-200 space-y-6"> <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
自定义关键词 自定义关键词
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VTextarea <VTextarea
v-model="selected.metaKeywords" v-model="selected.metaKeywords"
:rows="5" :rows="5"
@ -248,13 +248,13 @@ const handleRouteToEditor = (post: any) => {
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
自定义描述 自定义描述
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VTextarea <VTextarea
v-model="selected.metaDescription" v-model="selected.metaDescription"
:rows="5" :rows="5"
@ -267,25 +267,25 @@ const handleRouteToEditor = (post: any) => {
<VTabItem id="metas" label="元数据"></VTabItem> <VTabItem id="metas" label="元数据"></VTabItem>
<VTabItem id="inject-code" label="代码注入"> <VTabItem id="inject-code" label="代码注入">
<form> <form>
<div class="divide-y-0 sm:divide-y sm:divide-gray-200 space-y-6"> <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
CSS CSS
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VTextarea :rows="5"></VTextarea> <VTextarea :rows="5"></VTextarea>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5"> <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
JavaScript JavaScript
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VTextarea :rows="5"></VTextarea> <VTextarea :rows="5"></VTextarea>
</div> </div>
</div> </div>
@ -305,12 +305,12 @@ const handleRouteToEditor = (post: any) => {
</VModal> </VModal>
<VPageHeader title="文章"> <VPageHeader title="文章">
<template #icon> <template #icon>
<IconBookRead class="self-center mr-2" /> <IconBookRead class="mr-2 self-center" />
</template> </template>
<template #actions> <template #actions>
<VButton :route="{ name: 'PostEditor' }" type="secondary"> <VButton :route="{ name: 'PostEditor' }" type="secondary">
<template #icon> <template #icon>
<IconAddCircle class="w-full h-full" /> <IconAddCircle class="h-full w-full" />
</template> </template>
新建 新建
</VButton> </VButton>
@ -320,19 +320,19 @@ const handleRouteToEditor = (post: any) => {
<div class="m-0 md:m-4"> <div class="m-0 md:m-4">
<VCard :body-class="['!p-0']"> <VCard :body-class="['!p-0']">
<template #header> <template #header>
<div class="px-4 py-3 block w-full bg-gray-50"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="flex flex-col sm:flex-row items-start sm:items-center relative" class="relative flex flex-col items-start sm:flex-row sm:items-center"
> >
<div class="hidden sm:flex items-center mr-4"> <div class="mr-4 hidden items-center sm:flex">
<input <input
v-model="checkAll" v-model="checkAll"
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
@change="handleCheckAll()" @change="handleCheckAll()"
/> />
</div> </div>
<div class="w-full sm:w-auto flex flex-1"> <div class="flex w-full flex-1 sm:w-auto">
<VInput <VInput
v-if="checkedCount <= 0" v-if="checkedCount <= 0"
class="w-full sm:w-72" class="w-full sm:w-72"
@ -343,11 +343,11 @@ const handleRouteToEditor = (post: any) => {
<VButton type="danger">删除</VButton> <VButton type="danger">删除</VButton>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 sm:mt-0 flex"> <div class="mt-4 flex sm:mt-0">
<VSpace spacing="lg"> <VSpace spacing="lg">
<FloatingDropdown> <FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">分类</span> <span class="mr-0.5">分类</span>
<span> <span>
@ -355,14 +355,14 @@ const handleRouteToEditor = (post: any) => {
</span> </span>
</div> </div>
<template #popper> <template #popper>
<div class="p-4 w-80 h-96"> <div class="h-96 w-80 p-4">
<VInput placeholder="根据关键词搜索"></VInput> <VInput placeholder="根据关键词搜索"></VInput>
</div> </div>
</template> </template>
</FloatingDropdown> </FloatingDropdown>
<FloatingDropdown> <FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">标签</span> <span class="mr-0.5">标签</span>
<span> <span>
@ -370,14 +370,14 @@ const handleRouteToEditor = (post: any) => {
</span> </span>
</div> </div>
<template #popper> <template #popper>
<div class="p-4 w-80 h-96"> <div class="h-96 w-80 p-4">
<VInput placeholder="根据关键词搜索"></VInput> <VInput placeholder="根据关键词搜索"></VInput>
</div> </div>
</template> </template>
</FloatingDropdown> </FloatingDropdown>
<FloatingDropdown> <FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">作者</span> <span class="mr-0.5">作者</span>
<span> <span>
@ -385,7 +385,7 @@ const handleRouteToEditor = (post: any) => {
</span> </span>
</div> </div>
<template #popper> <template #popper>
<div class="p-4 w-80 h-96"> <div class="h-96 w-80 p-4">
<div class="bg-white"> <div class="bg-white">
<!--TODO: Auto Focus--> <!--TODO: Auto Focus-->
<VInput placeholder="根据关键词搜索"></VInput> <VInput placeholder="根据关键词搜索"></VInput>
@ -395,12 +395,12 @@ const handleRouteToEditor = (post: any) => {
<li <li
v-for="(user, index) in users" v-for="(user, index) in users"
:key="index" :key="index"
class="py-4 cursor-pointer hover:bg-gray-50" class="cursor-pointer py-4 hover:bg-gray-50"
> >
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<div class="flex items-center"> <div class="flex items-center">
<input <input
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
@ -411,13 +411,13 @@ const handleRouteToEditor = (post: any) => {
class="h-10 w-10 rounded" class="h-10 w-10 rounded"
/> />
</div> </div>
<div class="flex-1 min-w-0"> <div class="min-w-0 flex-1">
<p <p
class="text-sm font-medium text-gray-900 truncate" class="truncate text-sm font-medium text-gray-900"
> >
{{ user.name }} {{ user.name }}
</p> </p>
<p class="text-sm text-gray-500 truncate"> <p class="truncate text-sm text-gray-500">
@{{ user.username }} @{{ user.username }}
</p> </p>
</div> </div>
@ -433,7 +433,7 @@ const handleRouteToEditor = (post: any) => {
</FloatingDropdown> </FloatingDropdown>
<FloatingDropdown> <FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">排序</span> <span class="mr-0.5">排序</span>
<span> <span>
@ -441,35 +441,35 @@ const handleRouteToEditor = (post: any) => {
</span> </span>
</div> </div>
<template #popper> <template #popper>
<div class="p-4 w-72"> <div class="w-72 p-4">
<ul class="space-y-1"> <ul class="space-y-1">
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">较近发布</span> <span class="truncate">较近发布</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">较晚发布</span> <span class="truncate">较晚发布</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">浏览量最多</span> <span class="truncate">浏览量最多</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">浏览量最少</span> <span class="truncate">浏览量最少</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">评论量最多</span> <span class="truncate">评论量最多</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">评论量最少</span> <span class="truncate">评论量最少</span>
</li> </li>
@ -482,7 +482,7 @@ const handleRouteToEditor = (post: any) => {
</div> </div>
</div> </div>
</template> </template>
<ul class="divide-y divide-gray-100 box-border w-full h-full" role="list"> <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
<li <li
v-for="(post, index) in postsRef" v-for="(post, index) in postsRef"
:key="index" :key="index"
@ -492,24 +492,24 @@ const handleRouteToEditor = (post: any) => {
:class="{ :class="{
'bg-gray-100': selected.id === post.id || post.checked, 'bg-gray-100': selected.id === post.id || post.checked,
}" }"
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative" class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
> >
<div <div
v-show="selected.id === post.id || post.checked" v-show="selected.id === post.id || post.checked"
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary" class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
></div> ></div>
<div class="flex flex-row items-center relative"> <div class="relative flex flex-row items-center">
<div class="hidden mr-4 sm:flex items-center"> <div class="mr-4 hidden items-center sm:flex">
<input <input
v-model="post.checked" v-model="post.checked"
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="flex flex-col sm:flex-row"> <div class="flex flex-col sm:flex-row">
<span <span
class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900" class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
> >
{{ post.title }} {{ post.title }}
</span> </span>
@ -519,7 +519,7 @@ const handleRouteToEditor = (post: any) => {
</VTag> </VTag>
</VSpace> </VSpace>
</div> </div>
<div class="flex mt-1"> <div class="mt-1 flex">
<VSpace> <VSpace>
<span class="text-xs text-gray-500" <span class="text-xs text-gray-500"
>访问量 {{ post.visits }}</span >访问量 {{ post.visits }}</span
@ -532,10 +532,10 @@ const handleRouteToEditor = (post: any) => {
</div> </div>
<div class="flex"> <div class="flex">
<div <div
class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6" class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
> >
<img <img
class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white" class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
src="https://ryanc.cc/avatar" src="https://ryanc.cc/avatar"
/> />
<time class="text-sm text-gray-500" datetime="2020-01-07"> <time class="text-sm text-gray-500" datetime="2020-01-07">
@ -552,15 +552,15 @@ const handleRouteToEditor = (post: any) => {
</ul> </ul>
<template #footer> <template #footer>
<div class="bg-white flex items-center justify-end"> <div class="flex items-center justify-end bg-white">
<div class="flex-1 flex items-center justify-end"> <div class="flex flex-1 items-center justify-end">
<div> <div>
<nav <nav
aria-label="Pagination" aria-label="Pagination"
class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
> >
<a <a
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" class="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
@ -580,30 +580,30 @@ const handleRouteToEditor = (post: any) => {
</a> </a>
<a <a
aria-current="page" aria-current="page"
class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium" class="relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600"
href="#" href="#"
> >
1 1
</a> </a>
<a <a
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium" class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
2 2
</a> </a>
<span <span
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700" class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
> >
... ...
</span> </span>
<a <a
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium" class="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
href="#" href="#"
> >
4 4
</a> </a>
<a <a
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
<span class="sr-only">Next</span> <span class="sr-only">Next</span>

92
src/views/contents/sheets/SheetList.vue
View File

@ -59,7 +59,7 @@ const activeId = ref("advanced");
<template> <template>
<VPageHeader title="页面"> <VPageHeader title="页面">
<template #icon> <template #icon>
<IconPages class="self-center mr-2" /> <IconPages class="mr-2 self-center" />
</template> </template>
<template #actions> <template #actions>
<VButton type="secondary">发布</VButton> <VButton type="secondary">发布</VButton>
@ -71,18 +71,18 @@ const activeId = ref("advanced");
<VTabItem id="advanced" label="功能页面"> <VTabItem id="advanced" label="功能页面">
<VCard :body-class="['!p-0']"> <VCard :body-class="['!p-0']">
<ul <ul
class="divide-y divide-gray-100 box-border w-full h-full" class="box-border h-full w-full divide-y divide-gray-100"
role="list" role="list"
> >
<li v-for="(sheet, index) in advancedSheets" :key="index"> <li v-for="(sheet, index) in advancedSheets" :key="index">
<div <div
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative" class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
> >
<div class="flex flex-row items-center relative"> <div class="relative flex flex-row items-center">
<div class="flex-1"> <div class="flex-1">
<div class="flex flex-row"> <div class="flex flex-row">
<span <span
class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900" class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
> >
{{ sheet.name }} {{ sheet.name }}
</span> </span>
@ -91,12 +91,12 @@ const activeId = ref("advanced");
</div> </div>
<div class="flex"> <div class="flex">
<div <div
class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6" class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
> >
<img <img
v-tooltip="`由${sheet.name}插件提供`" v-tooltip="`由${sheet.name}插件提供`"
:src="sheet.logo" :src="sheet.logo"
class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white" class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
/> />
<span class="cursor-pointer"> <span class="cursor-pointer">
<IconSettings /> <IconSettings />
@ -112,18 +112,18 @@ const activeId = ref("advanced");
<VTabItem id="custom" label="自定义页面"> <VTabItem id="custom" label="自定义页面">
<VCard :body-class="['!p-0']"> <VCard :body-class="['!p-0']">
<template #header> <template #header>
<div class="px-4 py-3 block w-full bg-gray-50"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="flex flex-col sm:flex-row items-start sm:items-center relative" class="relative flex flex-col items-start sm:flex-row sm:items-center"
> >
<div class="hidden sm:flex items-center mr-4"> <div class="mr-4 hidden items-center sm:flex">
<input <input
v-model="checkAll" v-model="checkAll"
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
<div class="w-full sm:w-auto flex flex-1"> <div class="flex w-full flex-1 sm:w-auto">
<VInput <VInput
v-if="!checkAll" v-if="!checkAll"
class="w-full sm:w-72" class="w-full sm:w-72"
@ -134,11 +134,11 @@ const activeId = ref("advanced");
<VButton type="danger">删除</VButton> <VButton type="danger">删除</VButton>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 sm:mt-0 flex"> <div class="mt-4 flex sm:mt-0">
<VSpace spacing="lg"> <VSpace spacing="lg">
<FloatingDropdown> <FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">作者</span> <span class="mr-0.5">作者</span>
<span> <span>
@ -146,7 +146,7 @@ const activeId = ref("advanced");
</span> </span>
</div> </div>
<template #popper> <template #popper>
<div class="p-4 w-80 h-96"> <div class="h-96 w-80 p-4">
<div class="bg-white"> <div class="bg-white">
<!--TODO: Auto Focus--> <!--TODO: Auto Focus-->
<VInput placeholder="根据关键词搜索"></VInput> <VInput placeholder="根据关键词搜索"></VInput>
@ -156,12 +156,12 @@ const activeId = ref("advanced");
<li <li
v-for="(user, index) in users" v-for="(user, index) in users"
:key="index" :key="index"
class="py-4 cursor-pointer hover:bg-gray-50" class="cursor-pointer py-4 hover:bg-gray-50"
> >
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<div class="flex items-center"> <div class="flex items-center">
<input <input
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
@ -172,13 +172,13 @@ const activeId = ref("advanced");
class="h-10 w-10 rounded" class="h-10 w-10 rounded"
/> />
</div> </div>
<div class="flex-1 min-w-0"> <div class="min-w-0 flex-1">
<p <p
class="text-sm font-medium text-gray-900 truncate" class="truncate text-sm font-medium text-gray-900"
> >
{{ user.name }} {{ user.name }}
</p> </p>
<p class="text-sm text-gray-500 truncate"> <p class="truncate text-sm text-gray-500">
@{{ user.username }} @{{ user.username }}
</p> </p>
</div> </div>
@ -194,7 +194,7 @@ const activeId = ref("advanced");
</FloatingDropdown> </FloatingDropdown>
<FloatingDropdown> <FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">排序</span> <span class="mr-0.5">排序</span>
<span> <span>
@ -202,35 +202,35 @@ const activeId = ref("advanced");
</span> </span>
</div> </div>
<template #popper> <template #popper>
<div class="p-4 w-72"> <div class="w-72 p-4">
<ul class="space-y-1"> <ul class="space-y-1">
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">较近发布</span> <span class="truncate">较近发布</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">较晚发布</span> <span class="truncate">较晚发布</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">浏览量最多</span> <span class="truncate">浏览量最多</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">浏览量最少</span> <span class="truncate">浏览量最少</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">评论量最多</span> <span class="truncate">评论量最多</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">评论量最少</span> <span class="truncate">评论量最少</span>
</li> </li>
@ -244,7 +244,7 @@ const activeId = ref("advanced");
</div> </div>
</template> </template>
<ul <ul
class="divide-y divide-gray-100 box-border w-full h-full" class="box-border h-full w-full divide-y divide-gray-100"
role="list" role="list"
> >
<li v-for="(sheet, index) in sheetsRef" :key="index"> <li v-for="(sheet, index) in sheetsRef" :key="index">
@ -252,30 +252,30 @@ const activeId = ref("advanced");
:class="{ :class="{
'bg-gray-100': checkAll, 'bg-gray-100': checkAll,
}" }"
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative" class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
> >
<div <div
v-show="checkAll" v-show="checkAll"
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary" class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
></div> ></div>
<div class="flex flex-row items-center relative"> <div class="relative flex flex-row items-center">
<div class="hidden mr-4 sm:flex items-center"> <div class="mr-4 hidden items-center sm:flex">
<input <input
v-model="checkAll" v-model="checkAll"
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="flex flex-row"> <div class="flex flex-row">
<span <span
class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900" class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
> >
{{ sheet.title }} {{ sheet.title }}
</span> </span>
<VTag>{{ sheet.url }}</VTag> <VTag>{{ sheet.url }}</VTag>
</div> </div>
<div class="flex mt-1"> <div class="mt-1 flex">
<VSpace> <VSpace>
<span class="text-xs text-gray-500"> <span class="text-xs text-gray-500">
访问量 {{ sheet.views }} 访问量 {{ sheet.views }}
@ -288,10 +288,10 @@ const activeId = ref("advanced");
</div> </div>
<div class="flex"> <div class="flex">
<div <div
class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6" class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
> >
<img <img
class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white" class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
src="https://ryanc.cc/avatar" src="https://ryanc.cc/avatar"
/> />
<time class="text-sm text-gray-500" datetime="2020-01-07"> <time class="text-sm text-gray-500" datetime="2020-01-07">
@ -308,15 +308,15 @@ const activeId = ref("advanced");
</ul> </ul>
<template #footer> <template #footer>
<div class="bg-white flex items-center justify-end"> <div class="flex items-center justify-end bg-white">
<div class="flex-1 flex items-center justify-end"> <div class="flex flex-1 items-center justify-end">
<div> <div>
<nav <nav
aria-label="Pagination" aria-label="Pagination"
class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
> >
<a <a
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" class="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
@ -336,30 +336,30 @@ const activeId = ref("advanced");
</a> </a>
<a <a
aria-current="page" aria-current="page"
class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium" class="relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600"
href="#" href="#"
> >
1 1
</a> </a>
<a <a
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium" class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
2 2
</a> </a>
<span <span
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700" class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
> >
... ...
</span> </span>
<a <a
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium" class="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
href="#" href="#"
> >
4 4
</a> </a>
<a <a
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
<span class="sr-only">Next</span> <span class="sr-only">Next</span>

12
src/views/dashboard/Dashboard.vue
View File

@ -1,20 +1,20 @@
<template> <template>
<VPageHeader title="仪表盘"> <VPageHeader title="仪表盘">
<template #icon> <template #icon>
<IconDashboard class="self-center mr-2" /> <IconDashboard class="mr-2 self-center" />
</template> </template>
<template #actions> <template #actions>
<VSpace> <VSpace>
<VButton v-if="settings" @click="widgetsModal = true"> <VButton v-if="settings" @click="widgetsModal = true">
<template #icon> <template #icon>
<IconAddCircle class="w-full h-full" /> <IconAddCircle class="h-full w-full" />
</template> </template>
添加组件 添加组件
</VButton> </VButton>
<VButton type="secondary" @click="settings = !settings"> <VButton type="secondary" @click="settings = !settings">
<template #icon> <template #icon>
<IconSettings v-if="!settings" class="w-full h-full" /> <IconSettings v-if="!settings" class="h-full w-full" />
<IconSave v-else class="w-full h-full" /> <IconSave v-else class="h-full w-full" />
</template> </template>
{{ settings ? "完成" : "设置" }} {{ settings ? "完成" : "设置" }}
</VButton> </VButton>
@ -22,7 +22,7 @@
</template> </template>
</VPageHeader> </VPageHeader>
<div class="m-4 dashboard"> <div class="dashboard m-4">
<grid-layout <grid-layout
v-model:layout="layout" v-model:layout="layout"
:col-num="12" :col-num="12"
@ -46,7 +46,7 @@
<component :is="item.widget" /> <component :is="item.widget" />
<div v-if="settings" class="absolute top-2 right-2"> <div v-if="settings" class="absolute top-2 right-2">
<IconCloseCircle <IconCloseCircle
class="text-gray-500 hover:text-gray-900 cursor-pointer text-lg" class="cursor-pointer text-lg text-gray-500 hover:text-gray-900"
@click="handleRemove(item)" @click="handleRemove(item)"
/> />
</div> </div>

2
src/views/dashboard/widgets/CommentStatsWidget.vue
View File

@ -3,7 +3,7 @@ import { VCard } from "@/components/base/card";
</script> </script>
<template> <template>
<VCard class="h-full"> <VCard class="h-full">
<dt class="text-sm font-medium text-gray-500 truncate">评论</dt> <dt class="truncate text-sm font-medium text-gray-500">评论</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">53</dd> <dd class="mt-1 text-3xl font-semibold text-gray-900">53</dd>
</VCard> </VCard>
</template> </template>

2
src/views/dashboard/widgets/PostStatsWidget.vue
View File

@ -3,7 +3,7 @@ import { VCard } from "@/components/base/card";
</script> </script>
<template> <template>
<VCard class="h-full"> <VCard class="h-full">
<dt class="text-sm font-medium text-gray-500 truncate">文章</dt> <dt class="truncate text-sm font-medium text-gray-500">文章</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">123</dd> <dd class="mt-1 text-3xl font-semibold text-gray-900">123</dd>
</VCard> </VCard>
</template> </template>

10
src/views/dashboard/widgets/RecentLoginWidget.vue
View File

@ -8,12 +8,12 @@ import { users } from "@/views/system/users/users-mock";
class="h-full" class="h-full"
title="最近登录" title="最近登录"
> >
<div class="p-4 h-full"> <div class="h-full p-4">
<ul class="divide-y divide-gray-200" role="list"> <ul class="divide-y divide-gray-200" role="list">
<li <li
v-for="(user, index) in users" v-for="(user, index) in users"
:key="index" :key="index"
class="py-4 cursor-pointer hover:bg-gray-50" class="cursor-pointer py-4 hover:bg-gray-50"
> >
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
@ -23,11 +23,11 @@ import { users } from "@/views/system/users/users-mock";
class="h-10 w-10 rounded" class="h-10 w-10 rounded"
/> />
</div> </div>
<div class="flex-1 min-w-0"> <div class="min-w-0 flex-1">
<p class="text-sm font-medium text-gray-900 truncate"> <p class="truncate text-sm font-medium text-gray-900">
{{ user.name }} {{ user.name }}
</p> </p>
<p class="text-sm text-gray-500 truncate">@{{ user.username }}</p> <p class="truncate text-sm text-gray-500">@{{ user.username }}</p>
</div> </div>
<div> <div>
<time class="text-sm text-gray-500" datetime="2020-01-07 20:00"> <time class="text-sm text-gray-500" datetime="2020-01-07 20:00">

10
src/views/dashboard/widgets/RecentPublishedWidget.vue
View File

@ -9,19 +9,19 @@ import { posts } from "@/views/contents/posts/posts-mock";
class="h-full" class="h-full"
title="最近发布" title="最近发布"
> >
<div class="p-4 h-full"> <div class="h-full p-4">
<ul class="divide-y divide-gray-200" role="list"> <ul class="divide-y divide-gray-200" role="list">
<li <li
v-for="(post, index) in posts" v-for="(post, index) in posts"
:key="index" :key="index"
class="py-4 cursor-pointer hover:bg-gray-50" class="cursor-pointer py-4 hover:bg-gray-50"
> >
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<div class="flex-1 min-w-0"> <div class="min-w-0 flex-1">
<p class="text-sm font-medium text-gray-900 truncate"> <p class="truncate text-sm font-medium text-gray-900">
{{ post.title }} {{ post.title }}
</p> </p>
<div class="flex mt-1"> <div class="mt-1 flex">
<VSpace> <VSpace>
<span class="text-xs text-gray-500"> <span class="text-xs text-gray-500">
阅读 {{ post.visits }} 阅读 {{ post.visits }}

2
src/views/dashboard/widgets/UserStatsWidget.vue
View File

@ -3,7 +3,7 @@ import { VCard } from "@/components/base/card";
</script> </script>
<template> <template>
<VCard class="h-full"> <VCard class="h-full">
<dt class="text-sm font-medium text-gray-500 truncate">用户</dt> <dt class="truncate text-sm font-medium text-gray-500">用户</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">5</dd> <dd class="mt-1 text-3xl font-semibold text-gray-900">5</dd>
</VCard> </VCard>
</template> </template>

2
src/views/dashboard/widgets/ViewsStatsWidget.vue
View File

@ -3,7 +3,7 @@ import { VCard } from "@/components/base/card";
</script> </script>
<template> <template>
<VCard class="h-full"> <VCard class="h-full">
<dt class="text-sm font-medium text-gray-500 truncate">浏览量</dt> <dt class="truncate text-sm font-medium text-gray-500">浏览量</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">123,321</dd> <dd class="mt-1 text-3xl font-semibold text-gray-900">123,321</dd>
</VCard> </VCard>
</template> </template>

26
src/views/interface/menus/MenuList.vue
View File

@ -80,14 +80,14 @@ const menus = ref([
<template> <template>
<VPageHeader title="菜单"> <VPageHeader title="菜单">
<template #icon> <template #icon>
<IconListSettings class="self-center mr-2" /> <IconListSettings class="mr-2 self-center" />
</template> </template>
<template #actions> <template #actions>
<VButton type="secondary">重建索引</VButton> <VButton type="secondary">重建索引</VButton>
</template> </template>
</VPageHeader> </VPageHeader>
<div class="m-0 md:m-4"> <div class="m-0 md:m-4">
<div class="flex-col flex sm:flex-row gap-4"> <div class="flex flex-col gap-4 sm:flex-row">
<div class="w-full sm:w-96"> <div class="w-full sm:w-96">
<VCard title="分组"> <VCard title="分组">
<VMenu class="!p-0"> <VMenu class="!p-0">
@ -102,14 +102,14 @@ const menus = ref([
<div class="flex-1"> <div class="flex-1">
<VCard :body-class="['!p-0']"> <VCard :body-class="['!p-0']">
<template #header> <template #header>
<div class="px-4 py-3 block w-full bg-gray-50"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="flex flex-col sm:flex-row items-start sm:items-center relative" class="relative flex flex-col items-start sm:flex-row sm:items-center"
> >
<div class="w-full sm:w-auto flex flex-1"> <div class="flex w-full flex-1 sm:w-auto">
<span class="text-base font-medium">未分组</span> <span class="text-base font-medium">未分组</span>
</div> </div>
<div class="mt-4 sm:mt-0 flex"> <div class="mt-4 flex sm:mt-0">
<VSpace> <VSpace>
<VButton size="xs" type="primary">保存</VButton> <VButton size="xs" type="primary">保存</VButton>
<VButton size="xs" type="default">新增</VButton> <VButton size="xs" type="default">新增</VButton>
@ -119,27 +119,27 @@ const menus = ref([
</div> </div>
</template> </template>
<ul <ul
class="divide-y divide-gray-100 box-border w-full h-full" class="box-border h-full w-full divide-y divide-gray-100"
role="list" role="list"
> >
<li v-for="(menu, index) in menus" :key="index"> <li v-for="(menu, index) in menus" :key="index">
<div <div
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative" class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
> >
<div class="flex flex-row items-center relative"> <div class="relative flex flex-row items-center">
<div class="hidden mr-4 sm:flex items-center cursor-move"> <div class="mr-4 hidden cursor-move items-center sm:flex">
<IconListSettings /> <IconListSettings />
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<span <span
class="mr-2 text-sm font-medium truncate text-gray-900" class="mr-2 truncate text-sm font-medium text-gray-900"
> >
{{ menu.name }} {{ menu.name }}
</span> </span>
<VTag class="sm:hidden">asd</VTag> <VTag class="sm:hidden">asd</VTag>
</div> </div>
<div class="flex mt-1"> <div class="mt-1 flex">
<VSpace align="start" direction="column" spacing="xs"> <VSpace align="start" direction="column" spacing="xs">
<a <a
:href="menu.url" :href="menu.url"
@ -153,7 +153,7 @@ const menus = ref([
</div> </div>
<div class="flex"> <div class="flex">
<div <div
class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6" class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
> >
<span class="cursor-pointer text-sm hover:text-red-600"> <span class="cursor-pointer text-sm hover:text-red-600">
<IconDeleteBin /> <IconDeleteBin />

8
src/views/interface/themes/ThemeList.vue
View File

@ -8,7 +8,7 @@ import { themes } from "@/views/interface/themes/themes-mock";
<template> <template>
<VPageHeader title="主题"> <VPageHeader title="主题">
<template #icon> <template #icon>
<IconPalette class="self-center mr-2" /> <IconPalette class="mr-2 self-center" />
</template> </template>
<template #actions> <template #actions>
<VButton type="secondary">安装</VButton> <VButton type="secondary">安装</VButton>
@ -23,16 +23,16 @@ import { themes } from "@/views/interface/themes/themes-mock";
<li v-for="(theme, index) in themes" :key="index" class="relative"> <li v-for="(theme, index) in themes" :key="index" class="relative">
<VCard :body-class="['!p-0']"> <VCard :body-class="['!p-0']">
<div <div
class="group block w-full aspect-w-10 aspect-h-7 bg-gray-100 overflow-hidden cursor-pointer" class="group aspect-w-10 aspect-h-7 block w-full cursor-pointer overflow-hidden bg-gray-100"
> >
<img <img
:src="theme.screenshots" :src="theme.screenshots"
alt="" alt=""
class="object-cover pointer-events-none group-hover:opacity-75" class="pointer-events-none object-cover group-hover:opacity-75"
/> />
</div> </div>
<p <p
class="block text-sm font-medium text-gray-700 truncate pointer-events-none px-2 py-1" class="pointer-events-none block truncate px-2 py-1 text-sm font-medium text-gray-700"
> >
{{ theme.name }} {{ theme.name }}
</p> </p>

20
src/views/interface/visual/Visual.vue
View File

@ -22,8 +22,8 @@ const iframeClasses = computed(() => {
}); });
</script> </script>
<template> <template>
<div class="h-screen flex"> <div class="flex h-screen">
<div class="h-full bg-white w-96 drop-shadow-sm overflow-y-auto"> <div class="h-full w-96 overflow-y-auto bg-white drop-shadow-sm">
<VTabs v-model:active-id="activeId"> <VTabs v-model:active-id="activeId">
<VTabItem id="general" class="p-3" label="基础设置"> <VTabItem id="general" class="p-3" label="基础设置">
<form> <form>
@ -36,7 +36,7 @@ const iframeClasses = computed(() => {
> >
Halo 当前版本： Halo 当前版本：
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VInput model-value="1.5.3"></VInput> <VInput model-value="1.5.3"></VInput>
</div> </div>
</div> </div>
@ -48,7 +48,7 @@ const iframeClasses = computed(() => {
> >
首页图片： 首页图片：
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VInput <VInput
model-value="https://halo.run/upload/2022/03/support-team.svg" model-value="https://halo.run/upload/2022/03/support-team.svg"
></VInput> ></VInput>
@ -69,7 +69,7 @@ const iframeClasses = computed(() => {
> >
文章代码高亮语言： 文章代码高亮语言：
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VTextarea></VTextarea> <VTextarea></VTextarea>
</div> </div>
</div> </div>
@ -81,7 +81,7 @@ const iframeClasses = computed(() => {
> >
文章代码高亮主题： 文章代码高亮主题：
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<VSelect> <VSelect>
<VOption value="java">Java</VOption> <VOption value="java">Java</VOption>
<VOption value="c">C</VOption> <VOption value="c">C</VOption>
@ -98,10 +98,10 @@ const iframeClasses = computed(() => {
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div <div
class="flex items-center justify-between p-2 bg-white h-16 drop-shadow-sm" class="flex h-16 items-center justify-between bg-white p-2 drop-shadow-sm"
> >
<div> <div>
<h2 class="text-xl font-bold text-gray-800 truncate"> <h2 class="truncate text-xl font-bold text-gray-800">
<span>Anatole</span> <span>Anatole</span>
</h2> </h2>
</div> </div>
@ -130,12 +130,12 @@ const iframeClasses = computed(() => {
</div> </div>
</div> </div>
<div <div
class="h-full flex justify-center items-center" class="flex h-full items-center justify-center"
style="height: calc(100vh - 4rem)" style="height: calc(100vh - 4rem)"
> >
<iframe <iframe
:class="iframeClasses" :class="iframeClasses"
class="border-none" class="border-none transition-all duration-200"
src="http://localhost:8090" src="http://localhost:8090"
></iframe> ></iframe>
</div> </div>

20
src/views/system/plugins/PluginDetail.vue
View File

@ -18,7 +18,7 @@ console.log(plugin);
<template> <template>
<VPageHeader :title="plugin.metadata.name"> <VPageHeader :title="plugin.metadata.name">
<template #icon> <template #icon>
<img :src="plugin.spec.logo" class="w-8 h-8 mr-2" /> <img :src="plugin.spec.logo" class="mr-2 h-8 w-8" />
</template> </template>
<template #actions> <template #actions>
<VButton type="secondary"> 安装</VButton> <VButton type="secondary"> 安装</VButton>
@ -28,8 +28,8 @@ console.log(plugin);
<div class="m-0 md:m-4"> <div class="m-0 md:m-4">
<VCard :body-class="['!p-0']"> <VCard :body-class="['!p-0']">
<div class="px-4 py-5 sm:px-6"> <div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">插件信息</h3> <h3 class="text-lg font-medium leading-6 text-gray-900">插件信息</h3>
<p class="mt-1 max-w-2xl text-sm text-gray-500 flex items-center gap-2"> <p class="mt-1 flex max-w-2xl items-center gap-2 text-sm text-gray-500">
<span>{{ plugin.spec.version }}</span> <span>{{ plugin.spec.version }}</span>
<VTag> <VTag>
{{ plugin.metadata.enabled ? "已启用" : "未启用" }} {{ plugin.metadata.enabled ? "已启用" : "未启用" }}
@ -42,7 +42,7 @@ console.log(plugin);
class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">名称</dt> <dt class="text-sm font-medium text-gray-900">名称</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
{{ plugin.metadata.name }} {{ plugin.metadata.name }}
</dd> </dd>
</div> </div>
@ -50,7 +50,7 @@ console.log(plugin);
class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">插件类别</dt> <dt class="text-sm font-medium text-gray-900">插件类别</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<VTag> <VTag>
extensions.halo.run/category/{{ extensions.halo.run/category/{{
plugin.metadata.labels["extensions.halo.run/category"] plugin.metadata.labels["extensions.halo.run/category"]
@ -62,7 +62,7 @@ console.log(plugin);
class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">版本</dt> <dt class="text-sm font-medium text-gray-900">版本</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
{{ plugin.spec.version }} {{ plugin.spec.version }}
</dd> </dd>
</div> </div>
@ -70,7 +70,7 @@ console.log(plugin);
class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">Halo 版本要求</dt> <dt class="text-sm font-medium text-gray-900">Halo 版本要求</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
{{ plugin.spec.requires }} {{ plugin.spec.requires }}
</dd> </dd>
</div> </div>
@ -78,7 +78,7 @@ console.log(plugin);
class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">提供方</dt> <dt class="text-sm font-medium text-gray-900">提供方</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<a :href="plugin.spec.homepage" target="_blank"> <a :href="plugin.spec.homepage" target="_blank">
@{{ plugin.spec.author }} @{{ plugin.spec.author }}
</a> </a>
@ -88,7 +88,7 @@ console.log(plugin);
class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">协议</dt> <dt class="text-sm font-medium text-gray-900">协议</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
{{ plugin.spec.license }} {{ plugin.spec.license }}
</dd> </dd>
</div> </div>
@ -96,7 +96,7 @@ console.log(plugin);
class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
> >
<dt class="text-sm font-medium text-gray-900">模型定义</dt> <dt class="text-sm font-medium text-gray-900">模型定义</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">无</dd> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">无</dd>
</div> </div>
</dl> </dl>
</div> </div>

92
src/views/system/plugins/PluginList.vue
View File

@ -30,12 +30,12 @@ const handleRouteToDetail = (plugin: any) => {
<template> <template>
<VPageHeader title="插件"> <VPageHeader title="插件">
<template #icon> <template #icon>
<IconPlug class="self-center mr-2" /> <IconPlug class="mr-2 self-center" />
</template> </template>
<template #actions> <template #actions>
<VButton type="secondary"> <VButton type="secondary">
<template #icon> <template #icon>
<IconAddCircle class="w-full h-full" /> <IconAddCircle class="h-full w-full" />
</template> </template>
安装 安装
</VButton> </VButton>
@ -45,18 +45,18 @@ const handleRouteToDetail = (plugin: any) => {
<div class="m-0 md:m-4"> <div class="m-0 md:m-4">
<VCard :body-class="['!p-0']"> <VCard :body-class="['!p-0']">
<template #header> <template #header>
<div class="px-4 py-3 block w-full bg-gray-50"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="flex flex-col sm:flex-row items-start sm:items-center relative" class="relative flex flex-col items-start sm:flex-row sm:items-center"
> >
<div class="hidden sm:flex items-center mr-4"> <div class="mr-4 hidden items-center sm:flex">
<input <input
v-model="checkAll" v-model="checkAll"
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
<div class="w-full sm:w-auto flex flex-1"> <div class="flex w-full flex-1 sm:w-auto">
<VInput <VInput
v-if="!checkAll" v-if="!checkAll"
class="w-full sm:w-72" class="w-full sm:w-72"
@ -67,11 +67,11 @@ const handleRouteToDetail = (plugin: any) => {
<VButton type="danger">卸载</VButton> <VButton type="danger">卸载</VButton>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 sm:mt-0 flex"> <div class="mt-4 flex sm:mt-0">
<VSpace spacing="lg"> <VSpace spacing="lg">
<FloatingDropdown> <FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">启用状态</span> <span class="mr-0.5">启用状态</span>
<span> <span>
@ -79,15 +79,15 @@ const handleRouteToDetail = (plugin: any) => {
</span> </span>
</div> </div>
<template #popper> <template #popper>
<div class="p-4 w-52"> <div class="w-52 p-4">
<ul class="space-y-1"> <ul class="space-y-1">
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">已启用</span> <span class="truncate">已启用</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">未启用</span> <span class="truncate">未启用</span>
</li> </li>
@ -96,7 +96,7 @@ const handleRouteToDetail = (plugin: any) => {
</template> </template>
</FloatingDropdown> </FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">类别</span> <span class="mr-0.5">类别</span>
<span> <span>
@ -105,7 +105,7 @@ const handleRouteToDetail = (plugin: any) => {
</div> </div>
<FloatingDropdown> <FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">提供方</span> <span class="mr-0.5">提供方</span>
<span> <span>
@ -113,18 +113,18 @@ const handleRouteToDetail = (plugin: any) => {
</span> </span>
</div> </div>
<template #popper> <template #popper>
<div class="p-4 w-80 h-96"> <div class="h-96 w-80 p-4">
<div class="bg-white"> <div class="bg-white">
<!--TODO: Auto Focus--> <!--TODO: Auto Focus-->
<VInput placeholder="根据关键词搜索"></VInput> <VInput placeholder="根据关键词搜索"></VInput>
</div> </div>
<div class="mt-2"> <div class="mt-2">
<ul class="divide-y divide-gray-200" role="list"> <ul class="divide-y divide-gray-200" role="list">
<li class="py-4 cursor-pointer hover:bg-gray-50"> <li class="cursor-pointer py-4 hover:bg-gray-50">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<div class="flex items-center"> <div class="flex items-center">
<input <input
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
@ -135,13 +135,13 @@ const handleRouteToDetail = (plugin: any) => {
src="https://halo.run/logo" src="https://halo.run/logo"
/> />
</div> </div>
<div class="flex-1 min-w-0"> <div class="min-w-0 flex-1">
<p <p
class="text-sm font-medium text-gray-900 truncate" class="truncate text-sm font-medium text-gray-900"
> >
Halo Halo
</p> </p>
<p class="text-sm text-gray-500 truncate"> <p class="truncate text-sm text-gray-500">
https://halo.run https://halo.run
</p> </p>
</div> </div>
@ -157,7 +157,7 @@ const handleRouteToDetail = (plugin: any) => {
</FloatingDropdown> </FloatingDropdown>
<FloatingDropdown> <FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">排序</span> <span class="mr-0.5">排序</span>
<span> <span>
@ -165,15 +165,15 @@ const handleRouteToDetail = (plugin: any) => {
</span> </span>
</div> </div>
<template #popper> <template #popper>
<div class="p-4 w-72"> <div class="w-72 p-4">
<ul class="space-y-1"> <ul class="space-y-1">
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">较近安装</span> <span class="truncate">较近安装</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">较晚安装</span> <span class="truncate">较晚安装</span>
</li> </li>
@ -186,7 +186,7 @@ const handleRouteToDetail = (plugin: any) => {
</div> </div>
</div> </div>
</template> </template>
<ul class="divide-y divide-gray-100 box-border w-full h-full" role="list"> <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
<li <li
v-for="(plugin, index) in plugins" v-for="(plugin, index) in plugins"
:key="index" :key="index"
@ -196,34 +196,34 @@ const handleRouteToDetail = (plugin: any) => {
:class="{ :class="{
'bg-gray-100': checkAll, 'bg-gray-100': checkAll,
}" }"
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative" class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
> >
<div <div
v-show="checkAll" v-show="checkAll"
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary" class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
></div> ></div>
<div class="flex flex-row items-center relative"> <div class="relative flex flex-row items-center">
<div class="hidden mr-4 sm:flex items-center"> <div class="mr-4 hidden items-center sm:flex">
<input <input
v-model="checkAll" v-model="checkAll"
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
<div v-if="plugin.spec.logo" class="mr-4"> <div v-if="plugin.spec.logo" class="mr-4">
<div <div
class="w-12 h-12 border rounded p-1 hover:shadow-sm bg-white" class="h-12 w-12 rounded border bg-white p-1 hover:shadow-sm"
> >
<img <img
:alt="plugin.metadata.name" :alt="plugin.metadata.name"
:src="plugin.spec.logo" :src="plugin.spec.logo"
class="w-full h-full" class="h-full w-full"
/> />
</div> </div>
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<span class="mr-2 text-sm font-medium truncate text-gray-900"> <span class="mr-2 truncate text-sm font-medium text-gray-900">
{{ plugin.metadata.name }} {{ plugin.metadata.name }}
</span> </span>
<VSpace> <VSpace>
@ -232,12 +232,12 @@ const handleRouteToDetail = (plugin: any) => {
</VTag> </VTag>
</VSpace> </VSpace>
</div> </div>
<div class="flex mt-2"> <div class="mt-2 flex">
<VSpace align="start" direction="column" spacing="xs"> <VSpace align="start" direction="column" spacing="xs">
<span class="text-xs text-gray-500"> <span class="text-xs text-gray-500">
{{ plugin.spec.description }} {{ plugin.spec.description }}
</span> </span>
<span class="sm:hidden text-xs text-gray-500"> <span class="text-xs text-gray-500 sm:hidden">
@{{ plugin.spec.author }} {{ plugin.spec.version }} @{{ plugin.spec.author }} {{ plugin.spec.version }}
</span> </span>
</VSpace> </VSpace>
@ -245,16 +245,16 @@ const handleRouteToDetail = (plugin: any) => {
</div> </div>
<div class="flex"> <div class="flex">
<div <div
class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6" class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
> >
<a <a
:href="plugin.spec.homepage" :href="plugin.spec.homepage"
class="hidden sm:block text-sm text-gray-500 hover:text-gray-900" class="hidden text-sm text-gray-500 hover:text-gray-900 sm:block"
target="_blank" target="_blank"
> >
@{{ plugin.spec.author }} @{{ plugin.spec.author }}
</a> </a>
<span class="hidden sm:block text-sm text-gray-500"> <span class="hidden text-sm text-gray-500 sm:block">
{{ plugin.spec.version }} {{ plugin.spec.version }}
</span> </span>
<time class="text-sm text-gray-500" datetime="2020-01-07"> <time class="text-sm text-gray-500" datetime="2020-01-07">
@ -271,15 +271,15 @@ const handleRouteToDetail = (plugin: any) => {
</ul> </ul>
<template #footer> <template #footer>
<div class="bg-white flex items-center justify-end"> <div class="flex items-center justify-end bg-white">
<div class="flex-1 flex items-center justify-end"> <div class="flex flex-1 items-center justify-end">
<div> <div>
<nav <nav
aria-label="Pagination" aria-label="Pagination"
class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
> >
<a <a
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" class="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
@ -299,30 +299,30 @@ const handleRouteToDetail = (plugin: any) => {
</a> </a>
<a <a
aria-current="page" aria-current="page"
class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium" class="relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600"
href="#" href="#"
> >
1 1
</a> </a>
<a <a
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium" class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
2 2
</a> </a>
<span <span
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700" class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
> >
... ...
</span> </span>
<a <a
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium" class="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
href="#" href="#"
> >
4 4
</a> </a>
<a <a
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
<span class="sr-only">Next</span> <span class="sr-only">Next</span>

26
src/views/system/settings/GeneralSettings.vue
View File

@ -5,60 +5,60 @@ import { VButton } from "@/components/base/button";
<template> <template>
<form class="space-y-8 divide-y divide-gray-200"> <form class="space-y-8 divide-y divide-gray-200">
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5"> <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5"> <div class="mt-6 space-y-6 sm:mt-5 sm:space-y-5">
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
站点地址 站点地址
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput modelValue="https://halo.run" /> <VInput modelValue="https://halo.run" />
</div> </div>
</div> </div>
</div> </div>
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
站点标题 站点标题
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput modelValue="Halo" /> <VInput modelValue="Halo" />
</div> </div>
</div> </div>
</div> </div>
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
站点副标题 站点副标题
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput modelValue="开源的现代化 CMS 应用" /> <VInput modelValue="开源的现代化 CMS 应用" />
</div> </div>
</div> </div>
</div> </div>
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
Logo Logo
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput modelValue="https://halo.run/logo" /> <VInput modelValue="https://halo.run/logo" />
</div> </div>
</div> </div>

26
src/views/system/settings/NotificationSettings.vue
View File

@ -5,60 +5,60 @@ import { VButton } from "@/components/base/button";
<template> <template>
<form class="space-y-8 divide-y divide-gray-200"> <form class="space-y-8 divide-y divide-gray-200">
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5"> <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5"> <div class="mt-6 space-y-6 sm:mt-5 sm:space-y-5">
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
站点地址 站点地址
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput modelValue="https://halo.run" /> <VInput modelValue="https://halo.run" />
</div> </div>
</div> </div>
</div> </div>
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
站点标题 站点标题
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput modelValue="Halo" /> <VInput modelValue="Halo" />
</div> </div>
</div> </div>
</div> </div>
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
站点副标题 站点副标题
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput modelValue="开源的现代化 CMS 应用" /> <VInput modelValue="开源的现代化 CMS 应用" />
</div> </div>
</div> </div>
</div> </div>
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
Logo Logo
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput modelValue="https://halo.run/logo" /> <VInput modelValue="https://halo.run/logo" />
</div> </div>
</div> </div>

58
src/views/system/users/Profile.vue
View File

@ -24,19 +24,19 @@ if (route.params.username) {
<header class="bg-white"> <header class="bg-white">
<div :class="user.cover" class="h-48 bg-gradient-to-r"></div> <div :class="user.cover" class="h-48 bg-gradient-to-r"></div>
<div class="px-4 sm:px-6 lg:px-8"> <div class="px-4 sm:px-6 lg:px-8">
<div class="-mt-12 sm:-mt-16 flex items-end space-x-5"> <div class="-mt-12 flex items-end space-x-5 sm:-mt-16">
<div class="flex"> <div class="flex">
<img <img
:src="user.avatar" :src="user.avatar"
alt="Avatar" alt="Avatar"
class="h-24 w-24 rounded-full ring-4 ring-white sm:h-32 sm:w-32 drop-shadow-lg" class="h-24 w-24 rounded-full ring-4 ring-white drop-shadow-lg sm:h-32 sm:w-32"
/> />
</div> </div>
<div <div
class="mt-6 sm:flex-1 sm:min-w-0 sm:flex sm:items-center sm:justify-end sm:space-x-6 sm:pb-1" class="mt-6 sm:flex sm:min-w-0 sm:flex-1 sm:items-center sm:justify-end sm:space-x-6 sm:pb-1"
> >
<div class="block mt-6 min-w-0 flex-1"> <div class="mt-6 block min-w-0 flex-1">
<h1 class="text-xl font-bold text-gray-900 truncate"> <h1 class="truncate text-xl font-bold text-gray-900">
<span class="mr-1">{{ user.name }}</span> <span class="mr-1">{{ user.name }}</span>
<VTag theme="default"> <VTag theme="default">
<template #leftIcon> <template #leftIcon>
@ -47,7 +47,7 @@ if (route.params.username) {
</h1> </h1>
</div> </div>
<div <div
class="hidden mt-6 md:flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4" class="justify-stretch mt-6 hidden flex-col space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4 md:flex"
> >
<VButton type="default">退出登录</VButton> <VButton type="default">退出登录</VButton>
</div> </div>
@ -60,60 +60,60 @@ if (route.params.username) {
<VTabItem id="general" label="基本资料"> <VTabItem id="general" label="基本资料">
<form class="space-y-8 divide-y divide-gray-200"> <form class="space-y-8 divide-y divide-gray-200">
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5"> <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5"> <div class="mt-6 space-y-6 sm:mt-5 sm:space-y-5">
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
用户名 用户名
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput :modelValue="user.username" /> <VInput :modelValue="user.username" />
</div> </div>
</div> </div>
</div> </div>
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
昵称 昵称
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput :modelValue="user.name" /> <VInput :modelValue="user.name" />
</div> </div>
</div> </div>
</div> </div>
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
电子邮箱 电子邮箱
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput :modelValue="user.email" /> <VInput :modelValue="user.email" />
</div> </div>
</div> </div>
</div> </div>
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
个人说明 个人说明
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VTextarea modelValue="Halo" /> <VTextarea modelValue="Halo" />
</div> </div>
</div> </div>
@ -131,46 +131,46 @@ if (route.params.username) {
<VTabItem id="password" label="密码"> <VTabItem id="password" label="密码">
<form class="space-y-8 divide-y divide-gray-200"> <form class="space-y-8 divide-y divide-gray-200">
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5"> <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5"> <div class="mt-6 space-y-6 sm:mt-5 sm:space-y-5">
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
原密码 原密码
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput /> <VInput />
</div> </div>
</div> </div>
</div> </div>
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
新密码 新密码
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput /> <VInput />
</div> </div>
</div> </div>
</div> </div>
<div <div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5" class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
> >
<label <label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
> >
确认密码 确认密码
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="max-w-lg flex shadow-sm"> <div class="flex max-w-lg shadow-sm">
<VInput /> <VInput />
</div> </div>
</div> </div>

74
src/views/system/users/UserList.vue
View File

@ -27,19 +27,19 @@ const handleRouteToDetail = (username: string) => {
<template> <template>
<VPageHeader title="用户"> <VPageHeader title="用户">
<template #icon> <template #icon>
<IconUserSettings class="self-center mr-2" /> <IconUserSettings class="mr-2 self-center" />
</template> </template>
<template #actions> <template #actions>
<VSpace> <VSpace>
<VButton size="sm" type="default"> <VButton size="sm" type="default">
<template #icon> <template #icon>
<IconUserFollow class="w-full h-full" /> <IconUserFollow class="h-full w-full" />
</template> </template>
角色管理 角色管理
</VButton> </VButton>
<VButton type="secondary"> <VButton type="secondary">
<template #icon> <template #icon>
<IconAddCircle class="w-full h-full" /> <IconAddCircle class="h-full w-full" />
</template> </template>
添加用户 添加用户
</VButton> </VButton>
@ -50,18 +50,18 @@ const handleRouteToDetail = (username: string) => {
<div class="m-0 md:m-4"> <div class="m-0 md:m-4">
<VCard :body-class="['!p-0']"> <VCard :body-class="['!p-0']">
<template #header> <template #header>
<div class="px-4 py-3 block w-full bg-gray-50"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="flex flex-col sm:flex-row items-start sm:items-center relative" class="relative flex flex-col items-start sm:flex-row sm:items-center"
> >
<div class="hidden sm:flex items-center mr-4"> <div class="mr-4 hidden items-center sm:flex">
<input <input
v-model="checkAll" v-model="checkAll"
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
<div class="w-full sm:w-auto flex flex-1"> <div class="flex w-full flex-1 sm:w-auto">
<VInput <VInput
v-if="!checkAll" v-if="!checkAll"
class="w-full sm:w-72" class="w-full sm:w-72"
@ -72,11 +72,11 @@ const handleRouteToDetail = (username: string) => {
<VButton type="danger">删除</VButton> <VButton type="danger">删除</VButton>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 sm:mt-0 flex"> <div class="mt-4 flex sm:mt-0">
<VSpace spacing="lg"> <VSpace spacing="lg">
<FloatingDropdown> <FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">状态</span> <span class="mr-0.5">状态</span>
<span> <span>
@ -84,15 +84,15 @@ const handleRouteToDetail = (username: string) => {
</span> </span>
</div> </div>
<template #popper> <template #popper>
<div class="p-4 w-52"> <div class="w-52 p-4">
<ul class="space-y-1"> <ul class="space-y-1">
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">正常</span> <span class="truncate">正常</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">已禁用</span> <span class="truncate">已禁用</span>
</li> </li>
@ -101,7 +101,7 @@ const handleRouteToDetail = (username: string) => {
</template> </template>
</FloatingDropdown> </FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm" class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">角色</span> <span class="mr-0.5">角色</span>
<span> <span>
@ -110,7 +110,7 @@ const handleRouteToDetail = (username: string) => {
</div> </div>
<FloatingDropdown> <FloatingDropdown>
<div <div
class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none" class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
> >
<span class="mr-0.5">排序</span> <span class="mr-0.5">排序</span>
<span> <span>
@ -118,15 +118,15 @@ const handleRouteToDetail = (username: string) => {
</span> </span>
</div> </div>
<template #popper> <template #popper>
<div class="p-4 w-72"> <div class="w-72 p-4">
<ul class="space-y-1"> <ul class="space-y-1">
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">较近登录</span> <span class="truncate">较近登录</span>
</li> </li>
<li <li
class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded" class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
> >
<span class="truncate">较晚登录</span> <span class="truncate">较晚登录</span>
</li> </li>
@ -139,7 +139,7 @@ const handleRouteToDetail = (username: string) => {
</div> </div>
</div> </div>
</template> </template>
<ul class="divide-y divide-gray-100 box-border w-full h-full" role="list"> <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
<li <li
v-for="(user, index) in users" v-for="(user, index) in users"
:key="index" :key="index"
@ -149,39 +149,39 @@ const handleRouteToDetail = (username: string) => {
:class="{ :class="{
'bg-gray-100': checkAll, 'bg-gray-100': checkAll,
}" }"
class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative" class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
> >
<div <div
v-show="checkAll" v-show="checkAll"
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary" class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
></div> ></div>
<div class="flex flex-row items-center relative"> <div class="relative flex flex-row items-center">
<div class="hidden mr-4 sm:flex items-center"> <div class="mr-4 hidden items-center sm:flex">
<input <input
v-model="checkAll" v-model="checkAll"
class="h-4 w-4 text-indigo-600 border-gray-300 rounded" class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox" type="checkbox"
/> />
</div> </div>
<div v-if="user.avatar" class="mr-4"> <div v-if="user.avatar" class="mr-4">
<div <div
class="w-12 h-12 border rounded hover:shadow-sm bg-white overflow-hidden" class="h-12 w-12 overflow-hidden rounded border bg-white hover:shadow-sm"
> >
<img <img
:alt="user.name" :alt="user.name"
:src="user.avatar" :src="user.avatar"
class="w-full h-full" class="h-full w-full"
/> />
</div> </div>
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<span class="mr-2 text-sm font-medium truncate text-gray-900"> <span class="mr-2 truncate text-sm font-medium text-gray-900">
{{ user.name }} {{ user.name }}
</span> </span>
<VTag class="sm:hidden">{{ user.role }}</VTag> <VTag class="sm:hidden">{{ user.role }}</VTag>
</div> </div>
<div class="flex mt-1"> <div class="mt-1 flex">
<VSpace align="start" direction="column" spacing="xs"> <VSpace align="start" direction="column" spacing="xs">
<span class="text-xs text-gray-500"> <span class="text-xs text-gray-500">
{{ user.username }} {{ user.username }}
@ -191,7 +191,7 @@ const handleRouteToDetail = (username: string) => {
</div> </div>
<div class="flex"> <div class="flex">
<div <div
class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6" class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
> >
<span class="hidden sm:block"> <span class="hidden sm:block">
<VTag> <VTag>
@ -212,15 +212,15 @@ const handleRouteToDetail = (username: string) => {
</ul> </ul>
<template #footer> <template #footer>
<div class="bg-white flex items-center justify-end"> <div class="flex items-center justify-end bg-white">
<div class="flex-1 flex items-center justify-end"> <div class="flex flex-1 items-center justify-end">
<div> <div>
<nav <nav
aria-label="Pagination" aria-label="Pagination"
class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
> >
<a <a
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" class="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
@ -240,30 +240,30 @@ const handleRouteToDetail = (username: string) => {
</a> </a>
<a <a
aria-current="page" aria-current="page"
class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium" class="relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600"
href="#" href="#"
> >
1 1
</a> </a>
<a <a
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium" class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
2 2
</a> </a>
<span <span
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700" class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
> >
... ...
</span> </span>
<a <a
class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium" class="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
href="#" href="#"
> >
4 4
</a> </a>
<a <a
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
href="#" href="#"
> >
<span class="sr-only">Next</span> <span class="sr-only">Next</span>