mirror of https://github.com/halo-dev/halo-admin
chore: add tailwindcss prettier plugin and reformat code
Signed-off-by: Ryan Wang <i@ryanc.cc>pull/581/head
Ryan Wang
parent
bcb44b892d
commit
558b8a3778
|
|
@ -15,7 +15,8 @@
|
|||
"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",
|
||||
"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": {
|
||||
"@halo-dev/admin-api": "^1.0.0",
|
||||
|
|
@ -53,6 +54,7 @@
|
|||
"jsdom": "^19.0.0",
|
||||
"postcss": "^8.4.14",
|
||||
"prettier": "^2.6.2",
|
||||
"prettier-plugin-tailwindcss": "^0.1.11",
|
||||
"sass": "^1.52.1",
|
||||
"start-server-and-test": "^1.14.0",
|
||||
"tailwindcss": "^3.0.24",
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ specifiers:
|
|||
pinia: ^2.0.14
|
||||
postcss: ^8.4.14
|
||||
prettier: ^2.6.2
|
||||
prettier-plugin-tailwindcss: ^0.1.11
|
||||
sass: ^1.52.1
|
||||
start-server-and-test: ^1.14.0
|
||||
tailwindcss: ^3.0.24
|
||||
|
|
@ -84,6 +85,7 @@ devDependencies:
|
|||
jsdom: 19.0.0
|
||||
postcss: 8.4.14
|
||||
prettier: 2.6.2
|
||||
prettier-plugin-tailwindcss: 0.1.11_prettier@2.6.2
|
||||
sass: 1.52.1
|
||||
start-server-and-test: 1.14.0
|
||||
tailwindcss: 3.0.24
|
||||
|
|
@ -5620,6 +5622,15 @@ packages:
|
|||
fast-diff: 1.2.0
|
||||
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:
|
||||
resolution: {integrity: sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==}
|
||||
engines: {node: '>=10.13.0'}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
plugins: [require("prettier-plugin-tailwindcss")],
|
||||
};
|
||||
|
|
@ -18,22 +18,22 @@ function initState() {
|
|||
<Variant title="Show Cases">
|
||||
<template #default>
|
||||
<div class="p-3">
|
||||
<VAlert type="default" title="default" />
|
||||
<VAlert title="default" type="default" />
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VAlert type="success" title="default" />
|
||||
<VAlert title="default" type="success" />
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VAlert type="info" title="default" />
|
||||
<VAlert title="default" type="info" />
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VAlert type="warning" title="default" />
|
||||
<VAlert title="default" type="warning" />
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VAlert type="error" title="default" />
|
||||
<VAlert title="default" type="error" />
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VAlert type="default" title="提示">
|
||||
<VAlert title="提示" type="default">
|
||||
<template #description>
|
||||
目前仅支持远程 Git 仓库和 ZIP 下载链接。更多主题可以访问：
|
||||
<a href="https://halo.run/themes">https://halo.run/themes</a>
|
||||
|
|
@ -48,14 +48,14 @@ function initState() {
|
|||
</template>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Playground" :init-state="initState">
|
||||
<Variant :init-state="initState" title="Playground">
|
||||
<template #default="{ state }">
|
||||
<div class="p-3">
|
||||
<VAlert
|
||||
:type="state.type"
|
||||
:title="state.title"
|
||||
:description="state.description"
|
||||
:closable="state.closable"
|
||||
:description="state.description"
|
||||
:title="state.title"
|
||||
:type="state.type"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -71,7 +71,7 @@ function initState() {
|
|||
<Variant title="Slots">
|
||||
<template #default>
|
||||
<div class="p-3">
|
||||
<VAlert type="default" title="你有新的消息">
|
||||
<VAlert title="你有新的消息" type="default">
|
||||
<template #icon>
|
||||
<IconMessage />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ const handleClose = () => {
|
|||
|
||||
.alert-actions {
|
||||
@apply border-t;
|
||||
@apply pt-2 mt-3;
|
||||
@apply mt-3 pt-2;
|
||||
}
|
||||
|
||||
&.alert-default {
|
||||
|
|
|
|||
|
|
@ -3,75 +3,75 @@
|
|||
<Variant title="Type">
|
||||
<template #default>
|
||||
<VSpace>
|
||||
<VButton type="primary"> primary </VButton>
|
||||
<VButton type="secondary"> secondary </VButton>
|
||||
<VButton type="danger"> danger </VButton>
|
||||
<VButton type="default"> default </VButton>
|
||||
<VButton type="primary"> primary</VButton>
|
||||
<VButton type="secondary"> secondary</VButton>
|
||||
<VButton type="danger"> danger</VButton>
|
||||
<VButton type="default"> default</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</Variant>
|
||||
<Variant title="Size">
|
||||
<template #default>
|
||||
<VSpace>
|
||||
<VButton type="secondary" size="lg"> Large </VButton>
|
||||
<VButton type="secondary"> default </VButton>
|
||||
<VButton type="secondary" size="sm"> sm </VButton>
|
||||
<VButton type="secondary" size="xs"> xs </VButton>
|
||||
<VButton size="lg" type="secondary"> Large</VButton>
|
||||
<VButton type="secondary"> default</VButton>
|
||||
<VButton size="sm" type="secondary"> sm</VButton>
|
||||
<VButton size="xs" type="secondary"> xs</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</Variant>
|
||||
<Variant title="Circle">
|
||||
<template #default>
|
||||
<VSpace>
|
||||
<VButton type="secondary" size="lg" circle> lg </VButton>
|
||||
<VButton type="secondary" circle> d </VButton>
|
||||
<VButton type="secondary" size="sm" circle> sm </VButton>
|
||||
<VButton type="secondary" size="xs" circle> xs </VButton>
|
||||
<VButton circle size="lg" type="secondary"> lg</VButton>
|
||||
<VButton circle type="secondary"> d</VButton>
|
||||
<VButton circle size="sm" type="secondary"> sm</VButton>
|
||||
<VButton circle size="xs" type="secondary"> xs</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</Variant>
|
||||
<Variant title="Block">
|
||||
<template #default>
|
||||
<VSpace direction="column" class="w-full">
|
||||
<VButton type="primary" block> primary </VButton>
|
||||
<VButton type="secondary" block> secondary </VButton>
|
||||
<VButton type="danger" block> danger </VButton>
|
||||
<VButton type="default" block> default </VButton>
|
||||
<VSpace class="w-full" direction="column">
|
||||
<VButton block type="primary"> primary</VButton>
|
||||
<VButton block type="secondary"> secondary</VButton>
|
||||
<VButton block type="danger"> danger</VButton>
|
||||
<VButton block type="default"> default</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</Variant>
|
||||
<Variant title="Disabled" :init-state="disabledState">
|
||||
<Variant :init-state="disabledState" title="Disabled">
|
||||
<template #default="{ state }">
|
||||
<VSpace>
|
||||
<VButton type="primary" :disabled="state.disabled"> primary </VButton>
|
||||
<VButton type="secondary" :disabled="state.disabled">
|
||||
<VButton :disabled="state.disabled" type="primary"> primary</VButton>
|
||||
<VButton :disabled="state.disabled" type="secondary">
|
||||
secondary
|
||||
</VButton>
|
||||
<VButton type="danger" :disabled="state.disabled"> danger </VButton>
|
||||
<VButton type="default" :disabled="state.disabled"> default </VButton>
|
||||
<VButton :disabled="state.disabled" type="danger"> danger</VButton>
|
||||
<VButton :disabled="state.disabled" type="default"> default</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
<template #controls="{ state }">
|
||||
<HstCheckbox v-model="state.disabled" title="Disabled" />
|
||||
</template>
|
||||
</Variant>
|
||||
<Variant title="Loading" :init-state="loadingState">
|
||||
<Variant :init-state="loadingState" title="Loading">
|
||||
<template #default="{ state }">
|
||||
<VSpace>
|
||||
<VButton type="primary" :loading="state.loading"> Primary </VButton>
|
||||
<VButton type="secondary" :loading="state.loading">
|
||||
<VButton :loading="state.loading" type="primary"> Primary</VButton>
|
||||
<VButton :loading="state.loading" type="secondary">
|
||||
Secondary
|
||||
</VButton>
|
||||
<VButton type="danger" :loading="state.loading"> Danger </VButton>
|
||||
<VButton type="default" :loading="state.loading"> Default </VButton>
|
||||
<VButton size="lg" type="secondary" :loading="state.loading">
|
||||
<VButton :loading="state.loading" type="danger"> Danger</VButton>
|
||||
<VButton :loading="state.loading" type="default"> Default</VButton>
|
||||
<VButton :loading="state.loading" size="lg" type="secondary">
|
||||
Large
|
||||
</VButton>
|
||||
<VButton type="secondary" :loading="state.loading">Default</VButton>
|
||||
<VButton size="sm" type="secondary" :loading="state.loading">
|
||||
<VButton :loading="state.loading" type="secondary">Default</VButton>
|
||||
<VButton :loading="state.loading" size="sm" type="secondary">
|
||||
sm
|
||||
</VButton>
|
||||
<VButton size="xs" type="secondary" :loading="state.loading">
|
||||
<VButton :loading="state.loading" size="xs" type="secondary">
|
||||
xs
|
||||
</VButton>
|
||||
</VSpace>
|
||||
|
|
@ -80,49 +80,49 @@
|
|||
<HstCheckbox v-model="state.loading" title="Loading" />
|
||||
</template>
|
||||
</Variant>
|
||||
<Variant title="Icon" :init-state="iconState">
|
||||
<Variant :init-state="iconState" title="Icon">
|
||||
<template #default="{ state }">
|
||||
<VSpace>
|
||||
<VButton
|
||||
:disabled="state.disabled"
|
||||
:loading="state.loading"
|
||||
size="lg"
|
||||
type="primary"
|
||||
:loading="state.loading"
|
||||
:disabled="state.disabled"
|
||||
>
|
||||
<template #icon>
|
||||
<IconSettings class="w-full h-full" />
|
||||
<IconSettings class="h-full w-full" />
|
||||
</template>
|
||||
Large
|
||||
</VButton>
|
||||
<VButton
|
||||
type="secondary"
|
||||
:loading="state.loading"
|
||||
:disabled="state.disabled"
|
||||
:loading="state.loading"
|
||||
type="secondary"
|
||||
>
|
||||
<template #icon>
|
||||
<IconSettings class="w-full h-full" />
|
||||
<IconSettings class="h-full w-full" />
|
||||
</template>
|
||||
Default
|
||||
</VButton>
|
||||
<VButton
|
||||
:disabled="state.disabled"
|
||||
:loading="state.loading"
|
||||
size="sm"
|
||||
type="danger"
|
||||
:loading="state.loading"
|
||||
:disabled="state.disabled"
|
||||
>
|
||||
<template #icon>
|
||||
<IconSettings class="w-full h-full" />
|
||||
<IconSettings class="h-full w-full" />
|
||||
</template>
|
||||
sm
|
||||
</VButton>
|
||||
<VButton
|
||||
:disabled="state.disabled"
|
||||
:loading="state.loading"
|
||||
size="xs"
|
||||
type="default"
|
||||
:loading="state.loading"
|
||||
:disabled="state.disabled"
|
||||
>
|
||||
<template #icon>
|
||||
<IconSettings class="w-full h-full" />
|
||||
<IconSettings class="h-full w-full" />
|
||||
</template>
|
||||
xs
|
||||
</VButton>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { IconSettings } from "@/core/icons";
|
|||
<template #default>
|
||||
<div class="p-3">
|
||||
<VCard title="登录">
|
||||
<VSpace direction="column" class="w-full">
|
||||
<VSpace class="w-full" direction="column">
|
||||
<VInput placeholder="用户名"></VInput>
|
||||
<VInput placeholder="密码"></VInput>
|
||||
</VSpace>
|
||||
|
|
@ -33,260 +33,260 @@ import { IconSettings } from "@/core/icons";
|
|||
<!-- https://lofiui.co/-->
|
||||
<div class="p-3">
|
||||
<VCard title="Page Views">
|
||||
<div class="flex flex-col items-center w-full bg-white">
|
||||
<div class="flex items-end flex-grow w-full space-x-2 sm:space-x-3">
|
||||
<div class="flex w-full flex-col items-center bg-white">
|
||||
<div class="flex w-full flex-grow items-end space-x-2 sm:space-x-3">
|
||||
<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
|
||||
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
|
||||
>
|
||||
<div class="flex items-end w-full">
|
||||
<div class="flex w-full items-end">
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jan</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<div class="flex items-end w-full">
|
||||
<div class="flex w-full items-end">
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Feb</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<div class="flex items-end w-full">
|
||||
<div class="flex w-full items-end">
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Mar</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<div class="flex items-end w-full">
|
||||
<div class="flex w-full items-end">
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Apr</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<div class="flex items-end w-full">
|
||||
<div class="flex w-full items-end">
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">May</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<div class="flex items-end w-full">
|
||||
<div class="flex w-full items-end">
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jun</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<div class="flex items-end w-full">
|
||||
<div class="flex w-full items-end">
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jul</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<div class="flex items-end w-full">
|
||||
<div class="flex w-full items-end">
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Aug</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<div class="flex items-end w-full">
|
||||
<div class="flex w-full items-end">
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Sep</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<div class="flex items-end w-full">
|
||||
<div class="flex w-full items-end">
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Oct</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<div class="flex items-end w-full">
|
||||
<div class="flex w-full items-end">
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Nov</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<div class="flex items-end w-full">
|
||||
<div class="flex w-full items-end">
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Dec</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full mt-3">
|
||||
<div class="flex items-center ml-auto">
|
||||
<span class="block w-4 h-4 bg-indigo-400"></span>
|
||||
<div class="mt-3 flex w-full">
|
||||
<div class="ml-auto flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-400"></span>
|
||||
<span class="ml-1 text-xs font-medium">Existing</span>
|
||||
</div>
|
||||
<div class="flex items-center ml-4">
|
||||
<span class="block w-4 h-4 bg-indigo-300"></span>
|
||||
<div class="ml-4 flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-300"></span>
|
||||
<span class="ml-1 text-xs font-medium">Upgrades</span>
|
||||
</div>
|
||||
<div class="flex items-center ml-4">
|
||||
<span class="block w-4 h-4 bg-indigo-200"></span>
|
||||
<div class="ml-4 flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-200"></span>
|
||||
<span class="ml-1 text-xs font-medium">New</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -297,236 +297,236 @@ import { IconSettings } from "@/core/icons";
|
|||
<!-- https://lofiui.co/-->
|
||||
<div class="p-3">
|
||||
<VCard title="Page Views">
|
||||
<div class="flex flex-col items-center w-full bg-white">
|
||||
<div class="flex items-end flex-grow w-full space-x-2 sm:space-x-3">
|
||||
<div class="flex w-full flex-col items-center bg-white">
|
||||
<div class="flex w-full flex-grow items-end space-x-2 sm:space-x-3">
|
||||
<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
|
||||
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
|
||||
>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jan</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Feb</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Mar</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Apr</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">May</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jun</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Jul</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Aug</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Sep</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Oct</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Nov</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
<span class="absolute bottom-0 text-xs font-bold">Dec</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full mt-3">
|
||||
<div class="flex items-center ml-auto">
|
||||
<span class="block w-4 h-4 bg-indigo-400"></span>
|
||||
<div class="mt-3 flex w-full">
|
||||
<div class="ml-auto flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-400"></span>
|
||||
<span class="ml-1 text-xs font-medium">Existing</span>
|
||||
</div>
|
||||
<div class="flex items-center ml-4">
|
||||
<span class="block w-4 h-4 bg-indigo-300"></span>
|
||||
<div class="ml-4 flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-300"></span>
|
||||
<span class="ml-1 text-xs font-medium">Upgrades</span>
|
||||
</div>
|
||||
<div class="flex items-center ml-4">
|
||||
<span class="block w-4 h-4 bg-indigo-200"></span>
|
||||
<div class="ml-4 flex items-center">
|
||||
<span class="block h-4 w-4 bg-indigo-200"></span>
|
||||
<span class="ml-1 text-xs font-medium">New</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -535,30 +535,30 @@ import { IconSettings } from "@/core/icons";
|
|||
</div>
|
||||
|
||||
<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>
|
||||
<div class="flex items-center bg-white">
|
||||
<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
|
||||
class="w-6 h-6 fill-current text-green-700"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
class="h-6 w-6 fill-current text-green-700"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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"
|
||||
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>
|
||||
</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>
|
||||
<div class="flex items-center justify-between">
|
||||
<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
|
||||
>
|
||||
</div>
|
||||
|
|
@ -569,26 +569,26 @@ import { IconSettings } from "@/core/icons";
|
|||
<VCard>
|
||||
<div class="flex items-center bg-white">
|
||||
<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
|
||||
class="w-6 h-6 fill-current text-red-700"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
class="h-6 w-6 fill-current text-red-700"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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"
|
||||
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>
|
||||
</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>
|
||||
<div class="flex items-center justify-between">
|
||||
<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
|
||||
>
|
||||
</div>
|
||||
|
|
@ -599,26 +599,26 @@ import { IconSettings } from "@/core/icons";
|
|||
<VCard>
|
||||
<div class="flex items-center bg-white">
|
||||
<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
|
||||
class="w-6 h-6 fill-current text-green-700"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
class="h-6 w-6 fill-current text-green-700"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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"
|
||||
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>
|
||||
</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>
|
||||
<div class="flex items-center justify-between">
|
||||
<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
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ defineProps({
|
|||
</template>
|
||||
<style lang="scss">
|
||||
.card-wrapper {
|
||||
@apply flex flex-col box-border;
|
||||
@apply box-border flex flex-col;
|
||||
@apply bg-white;
|
||||
@apply shadow-sm;
|
||||
@apply overflow-hidden;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Story title="CheckBox" :init-state="initState">
|
||||
<Story :init-state="initState" title="CheckBox">
|
||||
<template #default="{ state }">
|
||||
<VCheckboxGroup
|
||||
v-model="state.value"
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ defineProps({
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex items-center justify-between p-4 bg-white">
|
||||
<div class="flex-1 self-center min-w-0">
|
||||
<h2 class="flex text-xl font-bold text-gray-800 truncate items-center">
|
||||
<div class="flex items-center justify-between bg-white p-4">
|
||||
<div class="min-w-0 flex-1 self-center">
|
||||
<h2 class="flex items-center truncate text-xl font-bold text-gray-800">
|
||||
<slot name="icon" />
|
||||
<span>{{ title }}</span>
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Story title="Input" :init-state="initState">
|
||||
<Story :init-state="initState" title="Input">
|
||||
<template #default="{ state }">
|
||||
<div class="w-1/2">
|
||||
<VInput
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<template #default>
|
||||
<div class="w-1/3">
|
||||
<VMenu>
|
||||
<VMenuItem title="仪表盘" active>
|
||||
<VMenuItem active title="仪表盘">
|
||||
<template #icon>
|
||||
<Component :is="IconDashboard" />
|
||||
</template>
|
||||
|
|
@ -39,10 +39,10 @@
|
|||
<script lang="ts" setup>
|
||||
import { VMenu, VMenuItem, VMenuLabel } from "./index";
|
||||
import {
|
||||
IconDashboard,
|
||||
IconBookRead,
|
||||
IconPages,
|
||||
IconMessage,
|
||||
IconDashboard,
|
||||
IconFolder,
|
||||
IconMessage,
|
||||
IconPages,
|
||||
} from "@/core/icons";
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ provide<string[] | undefined>("openIds", props.openIds);
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="menu-container p-3 w-full">
|
||||
<div class="menu-container w-full p-3">
|
||||
<ul>
|
||||
<slot />
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -49,10 +49,10 @@ function handleClick() {
|
|||
@click.stop="handleClick"
|
||||
>
|
||||
<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" />
|
||||
</span>
|
||||
<span class="menu-title self-center flex-1">
|
||||
<span class="menu-title flex-1 self-center">
|
||||
{{ title }}
|
||||
</span>
|
||||
<span
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import type { Component, PropType } from "vue";
|
||||
import { computed, defineComponent } from "vue";
|
||||
import type { PropType, Component } from "vue";
|
||||
import type { MenuGroupType, MenuItemType } from "@/router/menus.config";
|
||||
import { VMenu, VMenuItem, VMenuLabel } from "@/components/base/menu/index";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import type { RouteLocationMatched } from "vue-router";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
const VRoutesMenu = defineComponent({
|
||||
name: "VRoutesMenu",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Vitest Snapshot v1
|
||||
|
||||
exports[`Menu > should render 1`] = `
|
||||
"<div class=\\"menu-container p-3 w-full\\">
|
||||
"<div class=\\"menu-container w-full p-3\\">
|
||||
<ul></ul>
|
||||
</div>"
|
||||
`;
|
||||
|
|
@ -9,7 +9,7 @@ exports[`Menu > should render 1`] = `
|
|||
exports[`Menu > should render 2`] = `
|
||||
"<li class=\\"menu-item\\">
|
||||
<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-->
|
||||
</div>
|
||||
<transition-stub>
|
||||
|
|
@ -19,11 +19,11 @@ exports[`Menu > should render 2`] = `
|
|||
`;
|
||||
|
||||
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>
|
||||
<li class=\\"menu-item\\">
|
||||
<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-->
|
||||
</div>
|
||||
<transition-stub>
|
||||
|
|
@ -32,7 +32,7 @@ exports[`Menu > should work with openIds prop 1`] = `
|
|||
</li>
|
||||
<li class=\\"menu-item\\">
|
||||
<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-->
|
||||
</div>
|
||||
<transition-stub>
|
||||
|
|
@ -41,13 +41,13 @@ exports[`Menu > should work with openIds prop 1`] = `
|
|||
</li>
|
||||
<li class=\\"has-submenus menu-item\\">
|
||||
<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>
|
||||
<transition-stub>
|
||||
<ul class=\\"sub-menu-items transition-all\\">
|
||||
<li class=\\"menu-item\\">
|
||||
<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-->
|
||||
</div>
|
||||
<transition-stub>
|
||||
|
|
@ -62,11 +62,11 @@ exports[`Menu > should work with openIds prop 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>
|
||||
<li class=\\"menu-item\\">
|
||||
<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-->
|
||||
</div>
|
||||
<transition-stub>
|
||||
|
|
@ -75,7 +75,7 @@ exports[`Menu > should work with sub menus 1`] = `
|
|||
</li>
|
||||
<li class=\\"menu-item\\">
|
||||
<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-->
|
||||
</div>
|
||||
<transition-stub>
|
||||
|
|
@ -84,13 +84,13 @@ exports[`Menu > should work with sub menus 1`] = `
|
|||
</li>
|
||||
<li class=\\"has-submenus menu-item\\">
|
||||
<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>
|
||||
<transition-stub>
|
||||
<ul class=\\"sub-menu-items transition-all\\">
|
||||
<li class=\\"menu-item\\">
|
||||
<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-->
|
||||
</div>
|
||||
<transition-stub>
|
||||
|
|
|
|||
|
|
@ -23,16 +23,16 @@ function initState() {
|
|||
:width="state.width"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<img src="https://ryanc.cc/avatar" class="w-full" />
|
||||
<img src="https://ryanc.cc/avatar" class="w-full" />
|
||||
<img src="https://halo.run/logo" class="w-full" />
|
||||
<img class="w-full" src="https://ryanc.cc/avatar" />
|
||||
<img class="w-full" src="https://ryanc.cc/avatar" />
|
||||
<img class="w-full" src="https://halo.run/logo" />
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<VSpace>
|
||||
<VButton type="primary" @click="state.visible = false" loading
|
||||
>确定</VButton
|
||||
>
|
||||
<VButton loading type="primary" @click="state.visible = false"
|
||||
>确定
|
||||
</VButton>
|
||||
<VButton @click="state.visible = false">取消</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ function handleClose() {
|
|||
.modal-wrapper {
|
||||
@apply fixed;
|
||||
@apply top-0 left-0;
|
||||
@apply w-full h-full;
|
||||
@apply h-full w-full;
|
||||
@apply flex flex-row;
|
||||
@apply items-center justify-center;
|
||||
z-index: 99999;
|
||||
|
|
@ -111,7 +111,7 @@ function handleClose() {
|
|||
@apply flex-none;
|
||||
@apply absolute;
|
||||
@apply top-0 left-0;
|
||||
@apply w-full h-full;
|
||||
@apply h-full w-full;
|
||||
@apply transition-opacity;
|
||||
@apply bg-gray-500;
|
||||
@apply bg-opacity-75;
|
||||
|
|
@ -155,7 +155,7 @@ function handleClose() {
|
|||
}
|
||||
|
||||
.modal-body {
|
||||
@apply overflow-x-hidden overflow-y-auto;
|
||||
@apply overflow-y-auto overflow-x-hidden;
|
||||
@apply flex-1;
|
||||
word-wrap: break-word;
|
||||
padding: 12px 16px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Story title="Radio" :init-state="initState">
|
||||
<Story :init-state="initState" title="Radio">
|
||||
<template #default="{ state }">
|
||||
<VRadioGroup v-model="state.value" :options="radioData"></VRadioGroup>
|
||||
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
</Story>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { VRadioGroup, VRadio } from "@/components/base/radio/index";
|
||||
import { VRadio, VRadioGroup } from "@/components/base/radio/index";
|
||||
|
||||
function initState() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@ function handleChange(value: string | number | boolean) {
|
|||
:key="index"
|
||||
:label="option[labelKey] + ''"
|
||||
:model-value="modelValue"
|
||||
:value="option[valueKey]"
|
||||
:name="name"
|
||||
:value="option[valueKey]"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import type { PropType } from "vue";
|
||||
import type { Size } from "./interface";
|
||||
import { computed } from "vue";
|
||||
import type { Size } from "./interface";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
|
@ -34,12 +34,12 @@ function handleChange(e: Event) {
|
|||
<template>
|
||||
<div class="select-wrapper">
|
||||
<select
|
||||
:class="classes"
|
||||
:disabled="disabled"
|
||||
:value="modelValue"
|
||||
@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 }}
|
||||
</option>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Story title="Space" :init-state="initState">
|
||||
<Story :init-state="initState" title="Space">
|
||||
<template #default="{ state }">
|
||||
<VRadio
|
||||
v-for="(option, index) in ['row', 'column']"
|
||||
|
|
@ -26,9 +26,9 @@
|
|||
name="spacing"
|
||||
></VRadio>
|
||||
<VSpace
|
||||
:align="state.align"
|
||||
:direction="state.direction"
|
||||
:spacing="state.spacing"
|
||||
:align="state.align"
|
||||
>
|
||||
<div>Control：</div>
|
||||
<VButton type="primary">确定</VButton>
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@ const wrapperClasses = computed(() => {
|
|||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="space-wrapper"
|
||||
:class="wrapperClasses"
|
||||
:style="`gap: ${SpacingSize[spacing]}px`"
|
||||
class="space-wrapper"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, inject } from "vue";
|
||||
import type { ComputedRef } from "vue";
|
||||
import { computed, inject } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
|
|
|
|||
|
|
@ -13,23 +13,23 @@ function initState() {
|
|||
}
|
||||
</script>
|
||||
<template>
|
||||
<Story title="Tabbar" :init-state="initState">
|
||||
<Story :init-state="initState" title="Tabbar">
|
||||
<template #default="{ state }">
|
||||
<div class="p-3">
|
||||
<VTabbar :items="state.items" v-model:activeId="state.activeId" />
|
||||
<VTabbar v-model:activeId="state.activeId" :items="state.items" />
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VTabbar
|
||||
type="pills"
|
||||
:items="state.items"
|
||||
v-model:activeId="state.activeId"
|
||||
:items="state.items"
|
||||
type="pills"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VTabbar
|
||||
type="outline"
|
||||
:items="state.items"
|
||||
v-model:activeId="state.activeId"
|
||||
:items="state.items"
|
||||
type="outline"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
<script lang="ts" setup>
|
||||
import { VTabs, VTabItem } from "./index";
|
||||
import { VTabItem, VTabs } from "./index";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story title="Tabs" :init-state="() => ({ activeId: 'ryanwang' })">
|
||||
<Story :init-state="() => ({ activeId: 'ryanwang' })" title="Tabs">
|
||||
<template #default="{ state }">
|
||||
<div class="p-3">
|
||||
<VTabs v-model:activeId="state.activeId">
|
||||
<VTabItem label="JohnNiang" id="johnniang">
|
||||
<VTabItem id="johnniang" label="JohnNiang">
|
||||
This is JohnNiang's Item
|
||||
</VTabItem>
|
||||
<VTabItem label="Ryan Wang" id="ryanwang">
|
||||
<VTabItem id="ryanwang" label="Ryan Wang">
|
||||
This is Ryan Wang's Item
|
||||
</VTabItem>
|
||||
<VTabItem label="guqing" id="guqing">
|
||||
<VTabItem id="guqing" label="guqing">
|
||||
This is guqing's Item
|
||||
</VTabItem>
|
||||
</VTabs>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VTabs v-model:activeId="state.activeId" type="pills">
|
||||
<VTabItem label="JohnNiang" id="johnniang">
|
||||
<VTabItem id="johnniang" label="JohnNiang">
|
||||
This is JohnNiang's Item
|
||||
</VTabItem>
|
||||
<VTabItem label="Ryan Wang" id="ryanwang">
|
||||
<VTabItem id="ryanwang" label="Ryan Wang">
|
||||
This is Ryan Wang's Item
|
||||
</VTabItem>
|
||||
<VTabItem label="guqing" id="guqing">
|
||||
<VTabItem id="guqing" label="guqing">
|
||||
This is guqing's Item
|
||||
</VTabItem>
|
||||
</VTabs>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<VTabs v-model:activeId="state.activeId" type="outline">
|
||||
<VTabItem label="JohnNiang" id="johnniang">
|
||||
<VTabItem id="johnniang" label="JohnNiang">
|
||||
This is JohnNiang's Item
|
||||
</VTabItem>
|
||||
<VTabItem label="Ryan Wang" id="ryanwang">
|
||||
<VTabItem id="ryanwang" label="Ryan Wang">
|
||||
This is Ryan Wang's Item
|
||||
</VTabItem>
|
||||
<VTabItem label="guqing" id="guqing">
|
||||
<VTabItem id="guqing" label="guqing">
|
||||
This is guqing's Item
|
||||
</VTabItem>
|
||||
</VTabs>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script lang="ts" setup>
|
||||
import type { ComputedRef, PropType } from "vue";
|
||||
import { computed, provide, useSlots } from "vue";
|
||||
import type { PropType, ComputedRef } from "vue";
|
||||
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({
|
||||
activeId: {
|
||||
|
|
@ -54,13 +54,13 @@ const handleChange = (id: string | number) => {
|
|||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="tabs-wrapper" :class="classes">
|
||||
<div :class="classes" class="tabs-wrapper">
|
||||
<div class="tabs-bar-wrapper">
|
||||
<VTabbar
|
||||
:activeId="activeId"
|
||||
:direction="direction"
|
||||
:items="tabItems"
|
||||
:type="type"
|
||||
:direction="direction"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -80,6 +80,7 @@ const handleChange = (id: string | number) => {
|
|||
@apply mt-2;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabs-direction-column {
|
||||
.tabs-items-wrapper {
|
||||
@apply ml-2;
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@
|
|||
<Variant title="Icon">
|
||||
<template #default>
|
||||
<VSpace>
|
||||
<VTag theme="default" rounded>
|
||||
<VTag rounded theme="default">
|
||||
<template #leftIcon>
|
||||
<IconSettings />
|
||||
</template>
|
||||
Halo
|
||||
</VTag>
|
||||
<VTag theme="primary" rounded>
|
||||
<VTag rounded theme="primary">
|
||||
<template #leftIcon>
|
||||
<IconSettings />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import type { PropType } from "vue";
|
||||
import type { Theme } from "@/components/base/tag/interface";
|
||||
import { computed } from "vue";
|
||||
import type { Theme } from "@/components/base/tag/interface";
|
||||
|
||||
const props = defineProps({
|
||||
theme: {
|
||||
|
|
@ -19,7 +19,7 @@ const classes = computed(() => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="tag-wrapper" :class="classes">
|
||||
<div :class="classes" class="tag-wrapper">
|
||||
<div v-if="$slots.leftIcon" class="tag-left-icon">
|
||||
<slot name="leftIcon" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<Story title="Textarea" :init-state="initState">
|
||||
<Story :init-state="initState" title="Textarea">
|
||||
<template #default="{ state }">
|
||||
<div class="w-1/2">
|
||||
<VTextarea
|
||||
v-model="state.value"
|
||||
:disabled="state.disabled"
|
||||
:placeholder="state.placeholder"
|
||||
:size="state.size"
|
||||
:rows="state.rows"
|
||||
:size="state.size"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@ function handleInput(e: Event) {
|
|||
<template>
|
||||
<div class="textarea-wrapper">
|
||||
<textarea
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
:rows="rows"
|
||||
:value="modelValue"
|
||||
@input="handleInput"
|
||||
:disabled="disabled"
|
||||
:rows="rows"
|
||||
>
|
||||
</textarea>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="flex h-full">
|
||||
<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"
|
||||
>
|
||||
<div class="logo flex justify-center py-5">
|
||||
|
|
@ -9,12 +9,12 @@
|
|||
</div>
|
||||
<div class="px-3">
|
||||
<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">
|
||||
<IconSearch />
|
||||
</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>
|
||||
</div>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<img class="h-11 w-11 rounded-full" src="https://ryanc.cc/avatar" />
|
||||
</div>
|
||||
<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">
|
||||
<VTag>
|
||||
<template #leftIcon>
|
||||
|
|
@ -35,21 +35,21 @@
|
|||
</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"
|
||||
>
|
||||
<IconMore />
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
<RouterView v-else />
|
||||
</main>
|
||||
|
||||
<!--bottom nav bar-->
|
||||
<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"
|
||||
>
|
||||
<div
|
||||
|
|
@ -60,15 +60,15 @@
|
|||
@click="router.push(menu.path)"
|
||||
>
|
||||
<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
|
||||
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">
|
||||
<Component :is="menu.icon" />
|
||||
</div>
|
||||
<div class="text-xs mt-0.5">
|
||||
<div class="mt-0.5 text-xs">
|
||||
{{ menu.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -76,15 +76,15 @@
|
|||
</div>
|
||||
<div class="nav-item" @click="moreMenuVisible = true">
|
||||
<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
|
||||
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">
|
||||
<IconMore />
|
||||
</div>
|
||||
<div class="text-xs mt-0.5">更多</div>
|
||||
<div class="mt-0.5 text-xs">更多</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
<Teleport to="body">
|
||||
<div
|
||||
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
|
||||
enter-active-class="ease-out duration-200"
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
>
|
||||
<div
|
||||
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"
|
||||
></div>
|
||||
</transition>
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
>
|
||||
<div
|
||||
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">
|
||||
<VRoutesMenu
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { VButton } from "@/components/base/button";
|
|||
import { VTabbar } from "@/components/base/tabs";
|
||||
import { IconSettings } from "@/core/icons";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRouter, RouterView, useRoute } from "vue-router";
|
||||
import { RouterView, useRoute, useRouter } from "vue-router";
|
||||
|
||||
const SettingTabs = [
|
||||
{
|
||||
|
|
@ -42,7 +42,7 @@ const handleTabChange = (id: string) => {
|
|||
<BasicLayout>
|
||||
<VPageHeader title="设置">
|
||||
<template #icon>
|
||||
<IconSettings class="self-center mr-2" />
|
||||
<IconSettings class="mr-2 self-center" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<VButton type="secondary">安装</VButton>
|
||||
|
|
@ -53,8 +53,8 @@ const handleTabChange = (id: string) => {
|
|||
<VTabbar
|
||||
v-model:active-id="activeTab"
|
||||
:items="SettingTabs"
|
||||
@change="handleTabChange"
|
||||
type="outline"
|
||||
@change="handleTabChange"
|
||||
></VTabbar>
|
||||
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
<template>
|
||||
<VPageHeader title="附件库">
|
||||
<template #icon>
|
||||
<IconPalette class="self-center mr-2" />
|
||||
<IconPalette class="mr-2 self-center" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<VSpace>
|
||||
|
|
@ -90,23 +90,23 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
<div class="w-full sm:w-96">
|
||||
<VCard :bodyClass="['!p-0']" title="存储策略">
|
||||
<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
|
||||
v-for="(strategy, index) in strategies"
|
||||
:key="index"
|
||||
:class="{
|
||||
'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
|
||||
v-model="selected"
|
||||
: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"
|
||||
type="radio"
|
||||
/>
|
||||
<span class="ml-3 flex flex-col flex-1">
|
||||
<span class="ml-3 flex flex-1 flex-col">
|
||||
<span
|
||||
:class="{ 'font-bold': selected === strategy.id }"
|
||||
class="block text-sm font-medium"
|
||||
|
|
@ -119,7 +119,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
</span>
|
||||
<div class="self-center">
|
||||
<IconSettings
|
||||
class="hover:text-blue-600 cursor-pointer transition-all"
|
||||
class="cursor-pointer transition-all hover:text-blue-600"
|
||||
@click.stop="strategyVisible = true"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -147,16 +147,16 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
<IconArrowRight />
|
||||
</div>
|
||||
</template>
|
||||
<div class="bg-white overflow-hidden">
|
||||
<div class="overflow-hidden bg-white">
|
||||
<div>
|
||||
<dl>
|
||||
<div
|
||||
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>
|
||||
<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
|
||||
class="w-full sm:w-1/2 rounded"
|
||||
class="w-full rounded sm:w-1/2"
|
||||
src="https://picsum.photos/1000/700?random=1"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
<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
|
||||
</dd>
|
||||
</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"
|
||||
>
|
||||
<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
|
||||
</dd>
|
||||
</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"
|
||||
>
|
||||
<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
|
||||
</dd>
|
||||
</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"
|
||||
>
|
||||
<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
|
||||
</dd>
|
||||
</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"
|
||||
>
|
||||
<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
|
||||
</dd>
|
||||
</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"
|
||||
>
|
||||
<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
|
||||
</dd>
|
||||
</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"
|
||||
>
|
||||
<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
|
||||
</dd>
|
||||
</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"
|
||||
>
|
||||
<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
|
||||
</dd>
|
||||
</div>
|
||||
|
|
@ -250,16 +250,16 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
>
|
||||
<VCard :body-class="['!p-0']">
|
||||
<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
|
||||
:src="attachment.url"
|
||||
alt=""
|
||||
class="object-cover pointer-events-none group-hover:opacity-75"
|
||||
class="pointer-events-none object-cover group-hover:opacity-75"
|
||||
/>
|
||||
</div>
|
||||
<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 }}
|
||||
</p>
|
||||
|
|
@ -273,22 +273,22 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
</VModal>
|
||||
|
||||
<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">
|
||||
<VCard :body-class="[viewType === 'list' ? '!p-0' : '']">
|
||||
<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
|
||||
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
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full sm:w-auto flex flex-1">
|
||||
<div class="flex w-full flex-1 sm:w-auto">
|
||||
<VInput
|
||||
v-if="!checkAll"
|
||||
class="w-full sm:w-72"
|
||||
|
|
@ -299,11 +299,11 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
<VButton type="danger">删除</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-0 flex">
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -311,7 +311,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
</span>
|
||||
</div>
|
||||
<template #popper>
|
||||
<div class="p-4 w-80 h-96">
|
||||
<div class="h-96 w-80 p-4">
|
||||
<div class="bg-white">
|
||||
<!--TODO: Auto Focus-->
|
||||
<VInput placeholder="根据关键词搜索"></VInput>
|
||||
|
|
@ -321,12 +321,12 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
<li
|
||||
v-for="(user, index) in users"
|
||||
: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">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -337,13 +337,13 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
class="h-10 w-10 rounded"
|
||||
/>
|
||||
</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"
|
||||
class="truncate text-sm font-medium text-gray-900"
|
||||
>
|
||||
{{ user.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 truncate">
|
||||
<p class="truncate text-sm text-gray-500">
|
||||
@{{ user.username }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -358,7 +358,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
</template>
|
||||
</FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -366,7 +366,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
</span>
|
||||
</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>
|
||||
|
|
@ -375,7 +375,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
</div>
|
||||
<FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -383,25 +383,25 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
</span>
|
||||
</div>
|
||||
<template #popper>
|
||||
<div class="p-4 w-72">
|
||||
<div class="w-72 p-4">
|
||||
<ul class="space-y-1">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</li>
|
||||
|
|
@ -414,10 +414,10 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
v-for="(item, index) in viewTypes"
|
||||
:key="index"
|
||||
:class="{
|
||||
'bg-gray-200 text-black font-bold':
|
||||
'bg-gray-200 font-bold text-black':
|
||||
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"
|
||||
>
|
||||
<component :is="item.icon" />
|
||||
|
|
@ -431,7 +431,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<VCard
|
||||
|
|
@ -443,16 +443,16 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
>
|
||||
<div class="relative bg-white">
|
||||
<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
|
||||
:src="attachment.url"
|
||||
alt=""
|
||||
class="object-cover pointer-events-none group-hover:opacity-75"
|
||||
class="pointer-events-none object-cover group-hover:opacity-75"
|
||||
/>
|
||||
</div>
|
||||
<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 }}
|
||||
</p>
|
||||
|
|
@ -467,7 +467,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
|
||||
<ul
|
||||
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"
|
||||
>
|
||||
<li v-for="(attachment, index) in attachments" :key="index">
|
||||
|
|
@ -475,29 +475,29 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
:class="{
|
||||
'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
|
||||
v-show="checkAll"
|
||||
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
|
||||
></div>
|
||||
<div class="flex flex-row items-center relative">
|
||||
<div class="hidden mr-4 sm:flex items-center">
|
||||
<div class="relative flex flex-row items-center">
|
||||
<div class="mr-4 hidden items-center sm:flex">
|
||||
<input
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<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 }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex mt-1">
|
||||
<div class="mt-1 flex">
|
||||
<VSpace>
|
||||
<span class="text-xs text-gray-500">image/png</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 class="flex">
|
||||
<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
|
||||
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"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<template #footer>
|
||||
<div class="bg-white flex items-center justify-end">
|
||||
<div class="flex-1 flex items-center justify-end">
|
||||
<div class="flex items-center justify-end bg-white">
|
||||
<div class="flex flex-1 items-center justify-end">
|
||||
<div>
|
||||
<nav
|
||||
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
|
||||
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="#"
|
||||
>
|
||||
<span class="sr-only">Previous</span>
|
||||
|
|
@ -554,30 +554,30 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
|
|||
</a>
|
||||
<a
|
||||
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="#"
|
||||
>
|
||||
1
|
||||
</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="#"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
<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>
|
||||
<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="#"
|
||||
>
|
||||
4
|
||||
</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="#"
|
||||
>
|
||||
<span class="sr-only">Next</span>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const checkAll = ref(false);
|
|||
<template>
|
||||
<VPageHeader title="评论">
|
||||
<template #icon>
|
||||
<IconMessage class="self-center mr-2" />
|
||||
<IconMessage class="mr-2 self-center" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<VSpace>
|
||||
|
|
@ -24,18 +24,18 @@ const checkAll = ref(false);
|
|||
<div class="m-0 md:m-4">
|
||||
<VCard :body-class="['!p-0']">
|
||||
<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
|
||||
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
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full sm:w-auto flex flex-1">
|
||||
<div class="flex w-full flex-1 sm:w-auto">
|
||||
<VInput
|
||||
v-if="!checkAll"
|
||||
class="w-full sm:w-72"
|
||||
|
|
@ -46,10 +46,10 @@ const checkAll = ref(false);
|
|||
<VButton type="danger">删除</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-0 flex">
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<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>
|
||||
|
|
@ -57,7 +57,7 @@ const checkAll = ref(false);
|
|||
</span>
|
||||
</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>
|
||||
|
|
@ -65,7 +65,7 @@ const checkAll = ref(false);
|
|||
</span>
|
||||
</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>
|
||||
|
|
@ -77,35 +77,35 @@ const checkAll = ref(false);
|
|||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<div
|
||||
:class="{
|
||||
'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
|
||||
v-show="checkAll"
|
||||
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
|
||||
></div>
|
||||
<div class="flex flex-row items-center relative">
|
||||
<div class="hidden mr-4 sm:flex items-center">
|
||||
<div class="relative flex flex-row items-center">
|
||||
<div class="mr-4 hidden items-center sm:flex">
|
||||
<input
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<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
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex mt-1">
|
||||
<div class="mt-1 flex">
|
||||
<VSpace>
|
||||
<p class="text-xs text-gray-500">评论测试</p>
|
||||
</VSpace>
|
||||
|
|
@ -113,10 +113,10 @@ const checkAll = ref(false);
|
|||
</div>
|
||||
<div class="flex">
|
||||
<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
|
||||
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"
|
||||
/>
|
||||
<time class="text-sm text-gray-500" datetime="2020-01-07">
|
||||
|
|
@ -133,15 +133,15 @@ const checkAll = ref(false);
|
|||
</ul>
|
||||
|
||||
<template #footer>
|
||||
<div class="bg-white flex items-center justify-end">
|
||||
<div class="flex-1 flex items-center justify-end">
|
||||
<div class="flex items-center justify-end bg-white">
|
||||
<div class="flex flex-1 items-center justify-end">
|
||||
<div>
|
||||
<nav
|
||||
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
|
||||
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="#"
|
||||
>
|
||||
<span class="sr-only">Previous</span>
|
||||
|
|
@ -161,30 +161,30 @@ const checkAll = ref(false);
|
|||
</a>
|
||||
<a
|
||||
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="#"
|
||||
>
|
||||
1
|
||||
</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="#"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
<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>
|
||||
<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="#"
|
||||
>
|
||||
4
|
||||
</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="#"
|
||||
>
|
||||
<span class="sr-only">Next</span>
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ import { IconBookRead, IconSave } from "@/core/icons";
|
|||
<template>
|
||||
<VPageHeader title="文章">
|
||||
<template #icon>
|
||||
<IconBookRead class="self-center mr-2" />
|
||||
<IconBookRead class="mr-2 self-center" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<VButton :route="{ name: 'PostEditor' }" type="secondary">
|
||||
<template #icon>
|
||||
<IconSave class="w-full h-full" />
|
||||
<IconSave class="h-full w-full" />
|
||||
</template>
|
||||
发布
|
||||
</VButton>
|
||||
|
|
@ -21,7 +21,7 @@ import { IconBookRead, IconSave } from "@/core/icons";
|
|||
<div class="editor">
|
||||
<!--mock-->
|
||||
<iframe
|
||||
class="w-full h-screen border-0"
|
||||
class="h-screen w-full border-0"
|
||||
src="https://stackedit.io/app"
|
||||
></iframe>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -94,57 +94,57 @@ const handleRouteToEditor = (post: any) => {
|
|||
<VTabs v-model:active-id="settingActiveId" type="outline">
|
||||
<VTabItem id="general" label="常规">
|
||||
<form>
|
||||
<div class="divide-y-0 sm:divide-y sm:divide-gray-200 space-y-6">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
标题
|
||||
</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>
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
别名
|
||||
</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>
|
||||
</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>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<VInput></VInput>
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
标签
|
||||
</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>
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
摘要
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -153,74 +153,74 @@ const handleRouteToEditor = (post: any) => {
|
|||
</VTabItem>
|
||||
<VTabItem id="advanced" label="高级">
|
||||
<form>
|
||||
<div class="divide-y-0 sm:divide-y sm:divide-gray-200 space-y-6">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
禁止评论
|
||||
</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>
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
是否置顶
|
||||
</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>
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
发表时间
|
||||
</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>
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
自定义模板
|
||||
</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>
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
访问密码
|
||||
</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>
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
封面图
|
||||
</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">
|
||||
<div class="w-full sm:w-1/2">
|
||||
<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
|
||||
:src="selected.thumbnail"
|
||||
alt=""
|
||||
class="object-cover pointer-events-none"
|
||||
class="pointer-events-none object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -233,14 +233,14 @@ const handleRouteToEditor = (post: any) => {
|
|||
</VTabItem>
|
||||
<VTabItem id="seo" label="SEO">
|
||||
<form>
|
||||
<div class="divide-y-0 sm:divide-y sm:divide-gray-200 space-y-6">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
自定义关键词
|
||||
</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.metaKeywords"
|
||||
:rows="5"
|
||||
|
|
@ -248,13 +248,13 @@ const handleRouteToEditor = (post: any) => {
|
|||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
自定义描述
|
||||
</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.metaDescription"
|
||||
:rows="5"
|
||||
|
|
@ -267,25 +267,25 @@ const handleRouteToEditor = (post: any) => {
|
|||
<VTabItem id="metas" label="元数据"></VTabItem>
|
||||
<VTabItem id="inject-code" label="代码注入">
|
||||
<form>
|
||||
<div class="divide-y-0 sm:divide-y sm:divide-gray-200 space-y-6">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
|
||||
<div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
CSS
|
||||
</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>
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
JavaScript
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -305,12 +305,12 @@ const handleRouteToEditor = (post: any) => {
|
|||
</VModal>
|
||||
<VPageHeader title="文章">
|
||||
<template #icon>
|
||||
<IconBookRead class="self-center mr-2" />
|
||||
<IconBookRead class="mr-2 self-center" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<VButton :route="{ name: 'PostEditor' }" type="secondary">
|
||||
<template #icon>
|
||||
<IconAddCircle class="w-full h-full" />
|
||||
<IconAddCircle class="h-full w-full" />
|
||||
</template>
|
||||
新建
|
||||
</VButton>
|
||||
|
|
@ -320,19 +320,19 @@ const handleRouteToEditor = (post: any) => {
|
|||
<div class="m-0 md:m-4">
|
||||
<VCard :body-class="['!p-0']">
|
||||
<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
|
||||
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
|
||||
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"
|
||||
@change="handleCheckAll()"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full sm:w-auto flex flex-1">
|
||||
<div class="flex w-full flex-1 sm:w-auto">
|
||||
<VInput
|
||||
v-if="checkedCount <= 0"
|
||||
class="w-full sm:w-72"
|
||||
|
|
@ -343,11 +343,11 @@ const handleRouteToEditor = (post: any) => {
|
|||
<VButton type="danger">删除</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-0 flex">
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -355,14 +355,14 @@ const handleRouteToEditor = (post: any) => {
|
|||
</span>
|
||||
</div>
|
||||
<template #popper>
|
||||
<div class="p-4 w-80 h-96">
|
||||
<div class="h-96 w-80 p-4">
|
||||
<VInput placeholder="根据关键词搜索"></VInput>
|
||||
</div>
|
||||
</template>
|
||||
</FloatingDropdown>
|
||||
<FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -370,14 +370,14 @@ const handleRouteToEditor = (post: any) => {
|
|||
</span>
|
||||
</div>
|
||||
<template #popper>
|
||||
<div class="p-4 w-80 h-96">
|
||||
<div class="h-96 w-80 p-4">
|
||||
<VInput placeholder="根据关键词搜索"></VInput>
|
||||
</div>
|
||||
</template>
|
||||
</FloatingDropdown>
|
||||
<FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -385,7 +385,7 @@ const handleRouteToEditor = (post: any) => {
|
|||
</span>
|
||||
</div>
|
||||
<template #popper>
|
||||
<div class="p-4 w-80 h-96">
|
||||
<div class="h-96 w-80 p-4">
|
||||
<div class="bg-white">
|
||||
<!--TODO: Auto Focus-->
|
||||
<VInput placeholder="根据关键词搜索"></VInput>
|
||||
|
|
@ -395,12 +395,12 @@ const handleRouteToEditor = (post: any) => {
|
|||
<li
|
||||
v-for="(user, index) in users"
|
||||
: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">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -411,13 +411,13 @@ const handleRouteToEditor = (post: any) => {
|
|||
class="h-10 w-10 rounded"
|
||||
/>
|
||||
</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"
|
||||
class="truncate text-sm font-medium text-gray-900"
|
||||
>
|
||||
{{ user.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 truncate">
|
||||
<p class="truncate text-sm text-gray-500">
|
||||
@{{ user.username }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -433,7 +433,7 @@ const handleRouteToEditor = (post: any) => {
|
|||
</FloatingDropdown>
|
||||
<FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -441,35 +441,35 @@ const handleRouteToEditor = (post: any) => {
|
|||
</span>
|
||||
</div>
|
||||
<template #popper>
|
||||
<div class="p-4 w-72">
|
||||
<div class="w-72 p-4">
|
||||
<ul class="space-y-1">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</li>
|
||||
|
|
@ -482,7 +482,7 @@ const handleRouteToEditor = (post: any) => {
|
|||
</div>
|
||||
</div>
|
||||
</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="(post, index) in postsRef"
|
||||
:key="index"
|
||||
|
|
@ -492,24 +492,24 @@ const handleRouteToEditor = (post: any) => {
|
|||
:class="{
|
||||
'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
|
||||
v-show="selected.id === post.id || post.checked"
|
||||
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
|
||||
></div>
|
||||
<div class="flex flex-row items-center relative">
|
||||
<div class="hidden mr-4 sm:flex items-center">
|
||||
<div class="relative flex flex-row items-center">
|
||||
<div class="mr-4 hidden items-center sm:flex">
|
||||
<input
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<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 }}
|
||||
</span>
|
||||
|
|
@ -519,7 +519,7 @@ const handleRouteToEditor = (post: any) => {
|
|||
</VTag>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="flex mt-1">
|
||||
<div class="mt-1 flex">
|
||||
<VSpace>
|
||||
<span class="text-xs text-gray-500"
|
||||
>访问量 {{ post.visits }}</span
|
||||
|
|
@ -532,10 +532,10 @@ const handleRouteToEditor = (post: any) => {
|
|||
</div>
|
||||
<div class="flex">
|
||||
<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
|
||||
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"
|
||||
/>
|
||||
<time class="text-sm text-gray-500" datetime="2020-01-07">
|
||||
|
|
@ -552,15 +552,15 @@ const handleRouteToEditor = (post: any) => {
|
|||
</ul>
|
||||
|
||||
<template #footer>
|
||||
<div class="bg-white flex items-center justify-end">
|
||||
<div class="flex-1 flex items-center justify-end">
|
||||
<div class="flex items-center justify-end bg-white">
|
||||
<div class="flex flex-1 items-center justify-end">
|
||||
<div>
|
||||
<nav
|
||||
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
|
||||
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="#"
|
||||
>
|
||||
<span class="sr-only">Previous</span>
|
||||
|
|
@ -580,30 +580,30 @@ const handleRouteToEditor = (post: any) => {
|
|||
</a>
|
||||
<a
|
||||
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="#"
|
||||
>
|
||||
1
|
||||
</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="#"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
<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>
|
||||
<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="#"
|
||||
>
|
||||
4
|
||||
</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="#"
|
||||
>
|
||||
<span class="sr-only">Next</span>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ const activeId = ref("advanced");
|
|||
<template>
|
||||
<VPageHeader title="页面">
|
||||
<template #icon>
|
||||
<IconPages class="self-center mr-2" />
|
||||
<IconPages class="mr-2 self-center" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<VButton type="secondary">发布</VButton>
|
||||
|
|
@ -71,18 +71,18 @@ const activeId = ref("advanced");
|
|||
<VTabItem id="advanced" label="功能页面">
|
||||
<VCard :body-class="['!p-0']">
|
||||
<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"
|
||||
>
|
||||
<li v-for="(sheet, index) in advancedSheets" :key="index">
|
||||
<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 flex-row">
|
||||
<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 }}
|
||||
</span>
|
||||
|
|
@ -91,12 +91,12 @@ const activeId = ref("advanced");
|
|||
</div>
|
||||
<div class="flex">
|
||||
<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
|
||||
v-tooltip="`由${sheet.name}插件提供`"
|
||||
: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">
|
||||
<IconSettings />
|
||||
|
|
@ -112,18 +112,18 @@ const activeId = ref("advanced");
|
|||
<VTabItem id="custom" label="自定义页面">
|
||||
<VCard :body-class="['!p-0']">
|
||||
<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
|
||||
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
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full sm:w-auto flex flex-1">
|
||||
<div class="flex w-full flex-1 sm:w-auto">
|
||||
<VInput
|
||||
v-if="!checkAll"
|
||||
class="w-full sm:w-72"
|
||||
|
|
@ -134,11 +134,11 @@ const activeId = ref("advanced");
|
|||
<VButton type="danger">删除</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-0 flex">
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -146,7 +146,7 @@ const activeId = ref("advanced");
|
|||
</span>
|
||||
</div>
|
||||
<template #popper>
|
||||
<div class="p-4 w-80 h-96">
|
||||
<div class="h-96 w-80 p-4">
|
||||
<div class="bg-white">
|
||||
<!--TODO: Auto Focus-->
|
||||
<VInput placeholder="根据关键词搜索"></VInput>
|
||||
|
|
@ -156,12 +156,12 @@ const activeId = ref("advanced");
|
|||
<li
|
||||
v-for="(user, index) in users"
|
||||
: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">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -172,13 +172,13 @@ const activeId = ref("advanced");
|
|||
class="h-10 w-10 rounded"
|
||||
/>
|
||||
</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"
|
||||
class="truncate text-sm font-medium text-gray-900"
|
||||
>
|
||||
{{ user.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 truncate">
|
||||
<p class="truncate text-sm text-gray-500">
|
||||
@{{ user.username }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -194,7 +194,7 @@ const activeId = ref("advanced");
|
|||
</FloatingDropdown>
|
||||
<FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -202,35 +202,35 @@ const activeId = ref("advanced");
|
|||
</span>
|
||||
</div>
|
||||
<template #popper>
|
||||
<div class="p-4 w-72">
|
||||
<div class="w-72 p-4">
|
||||
<ul class="space-y-1">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</li>
|
||||
|
|
@ -244,7 +244,7 @@ const activeId = ref("advanced");
|
|||
</div>
|
||||
</template>
|
||||
<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"
|
||||
>
|
||||
<li v-for="(sheet, index) in sheetsRef" :key="index">
|
||||
|
|
@ -252,30 +252,30 @@ const activeId = ref("advanced");
|
|||
:class="{
|
||||
'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
|
||||
v-show="checkAll"
|
||||
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
|
||||
></div>
|
||||
<div class="flex flex-row items-center relative">
|
||||
<div class="hidden mr-4 sm:flex items-center">
|
||||
<div class="relative flex flex-row items-center">
|
||||
<div class="mr-4 hidden items-center sm:flex">
|
||||
<input
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-row">
|
||||
<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 }}
|
||||
</span>
|
||||
<VTag>{{ sheet.url }}</VTag>
|
||||
</div>
|
||||
<div class="flex mt-1">
|
||||
<div class="mt-1 flex">
|
||||
<VSpace>
|
||||
<span class="text-xs text-gray-500">
|
||||
访问量 {{ sheet.views }}
|
||||
|
|
@ -288,10 +288,10 @@ const activeId = ref("advanced");
|
|||
</div>
|
||||
<div class="flex">
|
||||
<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
|
||||
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"
|
||||
/>
|
||||
<time class="text-sm text-gray-500" datetime="2020-01-07">
|
||||
|
|
@ -308,15 +308,15 @@ const activeId = ref("advanced");
|
|||
</ul>
|
||||
|
||||
<template #footer>
|
||||
<div class="bg-white flex items-center justify-end">
|
||||
<div class="flex-1 flex items-center justify-end">
|
||||
<div class="flex items-center justify-end bg-white">
|
||||
<div class="flex flex-1 items-center justify-end">
|
||||
<div>
|
||||
<nav
|
||||
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
|
||||
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="#"
|
||||
>
|
||||
<span class="sr-only">Previous</span>
|
||||
|
|
@ -336,30 +336,30 @@ const activeId = ref("advanced");
|
|||
</a>
|
||||
<a
|
||||
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="#"
|
||||
>
|
||||
1
|
||||
</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="#"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
<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>
|
||||
<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="#"
|
||||
>
|
||||
4
|
||||
</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="#"
|
||||
>
|
||||
<span class="sr-only">Next</span>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<VPageHeader title="仪表盘">
|
||||
<template #icon>
|
||||
<IconDashboard class="self-center mr-2" />
|
||||
<IconDashboard class="mr-2 self-center" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<VSpace>
|
||||
<VButton v-if="settings" @click="widgetsModal = true">
|
||||
<template #icon>
|
||||
<IconAddCircle class="w-full h-full" />
|
||||
<IconAddCircle class="h-full w-full" />
|
||||
</template>
|
||||
添加组件
|
||||
</VButton>
|
||||
<VButton type="secondary" @click="settings = !settings">
|
||||
<template #icon>
|
||||
<IconSettings v-if="!settings" class="w-full h-full" />
|
||||
<IconSave v-else class="w-full h-full" />
|
||||
<IconSettings v-if="!settings" class="h-full w-full" />
|
||||
<IconSave v-else class="h-full w-full" />
|
||||
</template>
|
||||
{{ settings ? "完成" : "设置" }}
|
||||
</VButton>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</template>
|
||||
</VPageHeader>
|
||||
|
||||
<div class="m-4 dashboard">
|
||||
<div class="dashboard m-4">
|
||||
<grid-layout
|
||||
v-model:layout="layout"
|
||||
:col-num="12"
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<component :is="item.widget" />
|
||||
<div v-if="settings" class="absolute top-2 right-2">
|
||||
<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)"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { VCard } from "@/components/base/card";
|
|||
</script>
|
||||
<template>
|
||||
<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>
|
||||
</VCard>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { VCard } from "@/components/base/card";
|
|||
</script>
|
||||
<template>
|
||||
<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>
|
||||
</VCard>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ import { users } from "@/views/system/users/users-mock";
|
|||
class="h-full"
|
||||
title="最近登录"
|
||||
>
|
||||
<div class="p-4 h-full">
|
||||
<div class="h-full p-4">
|
||||
<ul class="divide-y divide-gray-200" role="list">
|
||||
<li
|
||||
v-for="(user, index) in users"
|
||||
: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-shrink-0">
|
||||
|
|
@ -23,11 +23,11 @@ import { users } from "@/views/system/users/users-mock";
|
|||
class="h-10 w-10 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-gray-900 truncate">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm font-medium text-gray-900">
|
||||
{{ user.name }}
|
||||
</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>
|
||||
<time class="text-sm text-gray-500" datetime="2020-01-07 20:00">
|
||||
|
|
|
|||
|
|
@ -9,19 +9,19 @@ import { posts } from "@/views/contents/posts/posts-mock";
|
|||
class="h-full"
|
||||
title="最近发布"
|
||||
>
|
||||
<div class="p-4 h-full">
|
||||
<div class="h-full p-4">
|
||||
<ul class="divide-y divide-gray-200" role="list">
|
||||
<li
|
||||
v-for="(post, index) in posts"
|
||||
: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-1 min-w-0">
|
||||
<p class="text-sm font-medium text-gray-900 truncate">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm font-medium text-gray-900">
|
||||
{{ post.title }}
|
||||
</p>
|
||||
<div class="flex mt-1">
|
||||
<div class="mt-1 flex">
|
||||
<VSpace>
|
||||
<span class="text-xs text-gray-500">
|
||||
阅读 {{ post.visits }}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { VCard } from "@/components/base/card";
|
|||
</script>
|
||||
<template>
|
||||
<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>
|
||||
</VCard>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { VCard } from "@/components/base/card";
|
|||
</script>
|
||||
<template>
|
||||
<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>
|
||||
</VCard>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -80,14 +80,14 @@ const menus = ref([
|
|||
<template>
|
||||
<VPageHeader title="菜单">
|
||||
<template #icon>
|
||||
<IconListSettings class="self-center mr-2" />
|
||||
<IconListSettings class="mr-2 self-center" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<VButton type="secondary">重建索引</VButton>
|
||||
</template>
|
||||
</VPageHeader>
|
||||
<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">
|
||||
<VCard title="分组">
|
||||
<VMenu class="!p-0">
|
||||
|
|
@ -102,14 +102,14 @@ const menus = ref([
|
|||
<div class="flex-1">
|
||||
<VCard :body-class="['!p-0']">
|
||||
<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
|
||||
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>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-0 flex">
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace>
|
||||
<VButton size="xs" type="primary">保存</VButton>
|
||||
<VButton size="xs" type="default">新增</VButton>
|
||||
|
|
@ -119,27 +119,27 @@ const menus = ref([
|
|||
</div>
|
||||
</template>
|
||||
<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"
|
||||
>
|
||||
<li v-for="(menu, index) in menus" :key="index">
|
||||
<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="hidden mr-4 sm:flex items-center cursor-move">
|
||||
<div class="relative flex flex-row items-center">
|
||||
<div class="mr-4 hidden cursor-move items-center sm:flex">
|
||||
<IconListSettings />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-row items-center">
|
||||
<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 }}
|
||||
</span>
|
||||
<VTag class="sm:hidden">asd</VTag>
|
||||
</div>
|
||||
<div class="flex mt-1">
|
||||
<div class="mt-1 flex">
|
||||
<VSpace align="start" direction="column" spacing="xs">
|
||||
<a
|
||||
:href="menu.url"
|
||||
|
|
@ -153,7 +153,7 @@ const menus = ref([
|
|||
</div>
|
||||
<div class="flex">
|
||||
<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">
|
||||
<IconDeleteBin />
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { themes } from "@/views/interface/themes/themes-mock";
|
|||
<template>
|
||||
<VPageHeader title="主题">
|
||||
<template #icon>
|
||||
<IconPalette class="self-center mr-2" />
|
||||
<IconPalette class="mr-2 self-center" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<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">
|
||||
<VCard :body-class="['!p-0']">
|
||||
<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
|
||||
:src="theme.screenshots"
|
||||
alt=""
|
||||
class="object-cover pointer-events-none group-hover:opacity-75"
|
||||
class="pointer-events-none object-cover group-hover:opacity-75"
|
||||
/>
|
||||
</div>
|
||||
<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 }}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@ const iframeClasses = computed(() => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="h-screen flex">
|
||||
<div class="h-full bg-white w-96 drop-shadow-sm overflow-y-auto">
|
||||
<div class="flex h-screen">
|
||||
<div class="h-full w-96 overflow-y-auto bg-white drop-shadow-sm">
|
||||
<VTabs v-model:active-id="activeId">
|
||||
<VTabItem id="general" class="p-3" label="基础设置">
|
||||
<form>
|
||||
|
|
@ -36,7 +36,7 @@ const iframeClasses = computed(() => {
|
|||
>
|
||||
Halo 当前版本：
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -48,7 +48,7 @@ const iframeClasses = computed(() => {
|
|||
>
|
||||
首页图片：
|
||||
</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="https://halo.run/upload/2022/03/support-team.svg"
|
||||
></VInput>
|
||||
|
|
@ -69,7 +69,7 @@ const iframeClasses = computed(() => {
|
|||
>
|
||||
文章代码高亮语言：
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -81,7 +81,7 @@ const iframeClasses = computed(() => {
|
|||
>
|
||||
文章代码高亮主题：
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<VSelect>
|
||||
<VOption value="java">Java</VOption>
|
||||
<VOption value="c">C</VOption>
|
||||
|
|
@ -98,10 +98,10 @@ const iframeClasses = computed(() => {
|
|||
</div>
|
||||
<div class="flex-1">
|
||||
<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>
|
||||
<h2 class="text-xl font-bold text-gray-800 truncate">
|
||||
<h2 class="truncate text-xl font-bold text-gray-800">
|
||||
<span>Anatole</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
|
@ -130,12 +130,12 @@ const iframeClasses = computed(() => {
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="h-full flex justify-center items-center"
|
||||
class="flex h-full items-center justify-center"
|
||||
style="height: calc(100vh - 4rem)"
|
||||
>
|
||||
<iframe
|
||||
:class="iframeClasses"
|
||||
class="border-none"
|
||||
class="border-none transition-all duration-200"
|
||||
src="http://localhost:8090"
|
||||
></iframe>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ console.log(plugin);
|
|||
<template>
|
||||
<VPageHeader :title="plugin.metadata.name">
|
||||
<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 #actions>
|
||||
<VButton type="secondary"> 安装</VButton>
|
||||
|
|
@ -28,8 +28,8 @@ console.log(plugin);
|
|||
<div class="m-0 md:m-4">
|
||||
<VCard :body-class="['!p-0']">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">插件信息</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm text-gray-500 flex items-center gap-2">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">插件信息</h3>
|
||||
<p class="mt-1 flex max-w-2xl items-center gap-2 text-sm text-gray-500">
|
||||
<span>{{ plugin.spec.version }}</span>
|
||||
<VTag>
|
||||
{{ 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"
|
||||
>
|
||||
<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 }}
|
||||
</dd>
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
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"
|
||||
>
|
||||
<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 }}
|
||||
</dd>
|
||||
</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"
|
||||
>
|
||||
<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 }}
|
||||
</dd>
|
||||
</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"
|
||||
>
|
||||
<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">
|
||||
@{{ plugin.spec.author }}
|
||||
</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"
|
||||
>
|
||||
<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 }}
|
||||
</dd>
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,12 +30,12 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
<template>
|
||||
<VPageHeader title="插件">
|
||||
<template #icon>
|
||||
<IconPlug class="self-center mr-2" />
|
||||
<IconPlug class="mr-2 self-center" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<VButton type="secondary">
|
||||
<template #icon>
|
||||
<IconAddCircle class="w-full h-full" />
|
||||
<IconAddCircle class="h-full w-full" />
|
||||
</template>
|
||||
安装
|
||||
</VButton>
|
||||
|
|
@ -45,18 +45,18 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
<div class="m-0 md:m-4">
|
||||
<VCard :body-class="['!p-0']">
|
||||
<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
|
||||
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
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full sm:w-auto flex flex-1">
|
||||
<div class="flex w-full flex-1 sm:w-auto">
|
||||
<VInput
|
||||
v-if="!checkAll"
|
||||
class="w-full sm:w-72"
|
||||
|
|
@ -67,11 +67,11 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
<VButton type="danger">卸载</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-0 flex">
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -79,15 +79,15 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
</span>
|
||||
</div>
|
||||
<template #popper>
|
||||
<div class="p-4 w-52">
|
||||
<div class="w-52 p-4">
|
||||
<ul class="space-y-1">
|
||||
<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>
|
||||
</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>
|
||||
</li>
|
||||
|
|
@ -96,7 +96,7 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
</template>
|
||||
</FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -105,7 +105,7 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
</div>
|
||||
<FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -113,18 +113,18 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
</span>
|
||||
</div>
|
||||
<template #popper>
|
||||
<div class="p-4 w-80 h-96">
|
||||
<div class="h-96 w-80 p-4">
|
||||
<div class="bg-white">
|
||||
<!--TODO: Auto Focus-->
|
||||
<VInput placeholder="根据关键词搜索"></VInput>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<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">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -135,13 +135,13 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
src="https://halo.run/logo"
|
||||
/>
|
||||
</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"
|
||||
class="truncate text-sm font-medium text-gray-900"
|
||||
>
|
||||
Halo
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 truncate">
|
||||
<p class="truncate text-sm text-gray-500">
|
||||
https://halo.run
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -157,7 +157,7 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
</FloatingDropdown>
|
||||
<FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -165,15 +165,15 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
</span>
|
||||
</div>
|
||||
<template #popper>
|
||||
<div class="p-4 w-72">
|
||||
<div class="w-72 p-4">
|
||||
<ul class="space-y-1">
|
||||
<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>
|
||||
</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>
|
||||
</li>
|
||||
|
|
@ -186,7 +186,7 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
</div>
|
||||
</div>
|
||||
</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="(plugin, index) in plugins"
|
||||
:key="index"
|
||||
|
|
@ -196,34 +196,34 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
:class="{
|
||||
'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
|
||||
v-show="checkAll"
|
||||
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
|
||||
></div>
|
||||
<div class="flex flex-row items-center relative">
|
||||
<div class="hidden mr-4 sm:flex items-center">
|
||||
<div class="relative flex flex-row items-center">
|
||||
<div class="mr-4 hidden items-center sm:flex">
|
||||
<input
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="plugin.spec.logo" class="mr-4">
|
||||
<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
|
||||
:alt="plugin.metadata.name"
|
||||
:src="plugin.spec.logo"
|
||||
class="w-full h-full"
|
||||
class="h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<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 }}
|
||||
</span>
|
||||
<VSpace>
|
||||
|
|
@ -232,12 +232,12 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
</VTag>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="flex mt-2">
|
||||
<div class="mt-2 flex">
|
||||
<VSpace align="start" direction="column" spacing="xs">
|
||||
<span class="text-xs text-gray-500">
|
||||
{{ plugin.spec.description }}
|
||||
</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 }}
|
||||
</span>
|
||||
</VSpace>
|
||||
|
|
@ -245,16 +245,16 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
</div>
|
||||
<div class="flex">
|
||||
<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
|
||||
: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"
|
||||
>
|
||||
@{{ plugin.spec.author }}
|
||||
</a>
|
||||
<span class="hidden sm:block text-sm text-gray-500">
|
||||
<span class="hidden text-sm text-gray-500 sm:block">
|
||||
{{ plugin.spec.version }}
|
||||
</span>
|
||||
<time class="text-sm text-gray-500" datetime="2020-01-07">
|
||||
|
|
@ -271,15 +271,15 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
</ul>
|
||||
|
||||
<template #footer>
|
||||
<div class="bg-white flex items-center justify-end">
|
||||
<div class="flex-1 flex items-center justify-end">
|
||||
<div class="flex items-center justify-end bg-white">
|
||||
<div class="flex flex-1 items-center justify-end">
|
||||
<div>
|
||||
<nav
|
||||
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
|
||||
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="#"
|
||||
>
|
||||
<span class="sr-only">Previous</span>
|
||||
|
|
@ -299,30 +299,30 @@ const handleRouteToDetail = (plugin: any) => {
|
|||
</a>
|
||||
<a
|
||||
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="#"
|
||||
>
|
||||
1
|
||||
</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="#"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
<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>
|
||||
<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="#"
|
||||
>
|
||||
4
|
||||
</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="#"
|
||||
>
|
||||
<span class="sr-only">Next</span>
|
||||
|
|
|
|||
|
|
@ -5,60 +5,60 @@ import { VButton } from "@/components/base/button";
|
|||
<template>
|
||||
<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="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
|
||||
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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
站点地址
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput modelValue="https://halo.run" />
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
站点标题
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput modelValue="Halo" />
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
站点副标题
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput modelValue="开源的现代化 CMS 应用" />
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
Logo
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput modelValue="https://halo.run/logo" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,60 +5,60 @@ import { VButton } from "@/components/base/button";
|
|||
<template>
|
||||
<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="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
|
||||
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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
站点地址
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput modelValue="https://halo.run" />
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
站点标题
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput modelValue="Halo" />
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
站点副标题
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput modelValue="开源的现代化 CMS 应用" />
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
Logo
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput modelValue="https://halo.run/logo" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,19 +24,19 @@ if (route.params.username) {
|
|||
<header class="bg-white">
|
||||
<div :class="user.cover" class="h-48 bg-gradient-to-r"></div>
|
||||
<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">
|
||||
<img
|
||||
:src="user.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
|
||||
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">
|
||||
<h1 class="text-xl font-bold text-gray-900 truncate">
|
||||
<div class="mt-6 block min-w-0 flex-1">
|
||||
<h1 class="truncate text-xl font-bold text-gray-900">
|
||||
<span class="mr-1">{{ user.name }}</span>
|
||||
<VTag theme="default">
|
||||
<template #leftIcon>
|
||||
|
|
@ -47,7 +47,7 @@ if (route.params.username) {
|
|||
</h1>
|
||||
</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>
|
||||
</div>
|
||||
|
|
@ -60,60 +60,60 @@ if (route.params.username) {
|
|||
<VTabItem id="general" label="基本资料">
|
||||
<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="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
|
||||
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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
用户名
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput :modelValue="user.username" />
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
昵称
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput :modelValue="user.name" />
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
电子邮箱
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput :modelValue="user.email" />
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
个人说明
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VTextarea modelValue="Halo" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -131,46 +131,46 @@ if (route.params.username) {
|
|||
<VTabItem id="password" label="密码">
|
||||
<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="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
|
||||
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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
原密码
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput />
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
新密码
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput />
|
||||
</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
|
||||
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
|
||||
>
|
||||
确认密码
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex shadow-sm">
|
||||
<div class="mt-1 sm:col-span-2 sm:mt-0">
|
||||
<div class="flex max-w-lg shadow-sm">
|
||||
<VInput />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,19 +27,19 @@ const handleRouteToDetail = (username: string) => {
|
|||
<template>
|
||||
<VPageHeader title="用户">
|
||||
<template #icon>
|
||||
<IconUserSettings class="self-center mr-2" />
|
||||
<IconUserSettings class="mr-2 self-center" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<VSpace>
|
||||
<VButton size="sm" type="default">
|
||||
<template #icon>
|
||||
<IconUserFollow class="w-full h-full" />
|
||||
<IconUserFollow class="h-full w-full" />
|
||||
</template>
|
||||
角色管理
|
||||
</VButton>
|
||||
<VButton type="secondary">
|
||||
<template #icon>
|
||||
<IconAddCircle class="w-full h-full" />
|
||||
<IconAddCircle class="h-full w-full" />
|
||||
</template>
|
||||
添加用户
|
||||
</VButton>
|
||||
|
|
@ -50,18 +50,18 @@ const handleRouteToDetail = (username: string) => {
|
|||
<div class="m-0 md:m-4">
|
||||
<VCard :body-class="['!p-0']">
|
||||
<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
|
||||
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
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full sm:w-auto flex flex-1">
|
||||
<div class="flex w-full flex-1 sm:w-auto">
|
||||
<VInput
|
||||
v-if="!checkAll"
|
||||
class="w-full sm:w-72"
|
||||
|
|
@ -72,11 +72,11 @@ const handleRouteToDetail = (username: string) => {
|
|||
<VButton type="danger">删除</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-0 flex">
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -84,15 +84,15 @@ const handleRouteToDetail = (username: string) => {
|
|||
</span>
|
||||
</div>
|
||||
<template #popper>
|
||||
<div class="p-4 w-52">
|
||||
<div class="w-52 p-4">
|
||||
<ul class="space-y-1">
|
||||
<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>
|
||||
</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>
|
||||
</li>
|
||||
|
|
@ -101,7 +101,7 @@ const handleRouteToDetail = (username: string) => {
|
|||
</template>
|
||||
</FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -110,7 +110,7 @@ const handleRouteToDetail = (username: string) => {
|
|||
</div>
|
||||
<FloatingDropdown>
|
||||
<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>
|
||||
|
|
@ -118,15 +118,15 @@ const handleRouteToDetail = (username: string) => {
|
|||
</span>
|
||||
</div>
|
||||
<template #popper>
|
||||
<div class="p-4 w-72">
|
||||
<div class="w-72 p-4">
|
||||
<ul class="space-y-1">
|
||||
<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>
|
||||
</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>
|
||||
</li>
|
||||
|
|
@ -139,7 +139,7 @@ const handleRouteToDetail = (username: string) => {
|
|||
</div>
|
||||
</div>
|
||||
</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="(user, index) in users"
|
||||
:key="index"
|
||||
|
|
@ -149,39 +149,39 @@ const handleRouteToDetail = (username: string) => {
|
|||
:class="{
|
||||
'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
|
||||
v-show="checkAll"
|
||||
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
|
||||
></div>
|
||||
<div class="flex flex-row items-center relative">
|
||||
<div class="hidden mr-4 sm:flex items-center">
|
||||
<div class="relative flex flex-row items-center">
|
||||
<div class="mr-4 hidden items-center sm:flex">
|
||||
<input
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="user.avatar" class="mr-4">
|
||||
<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
|
||||
:alt="user.name"
|
||||
:src="user.avatar"
|
||||
class="w-full h-full"
|
||||
class="h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<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 }}
|
||||
</span>
|
||||
<VTag class="sm:hidden">{{ user.role }}</VTag>
|
||||
</div>
|
||||
<div class="flex mt-1">
|
||||
<div class="mt-1 flex">
|
||||
<VSpace align="start" direction="column" spacing="xs">
|
||||
<span class="text-xs text-gray-500">
|
||||
{{ user.username }}
|
||||
|
|
@ -191,7 +191,7 @@ const handleRouteToDetail = (username: string) => {
|
|||
</div>
|
||||
<div class="flex">
|
||||
<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">
|
||||
<VTag>
|
||||
|
|
@ -212,15 +212,15 @@ const handleRouteToDetail = (username: string) => {
|
|||
</ul>
|
||||
|
||||
<template #footer>
|
||||
<div class="bg-white flex items-center justify-end">
|
||||
<div class="flex-1 flex items-center justify-end">
|
||||
<div class="flex items-center justify-end bg-white">
|
||||
<div class="flex flex-1 items-center justify-end">
|
||||
<div>
|
||||
<nav
|
||||
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
|
||||
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="#"
|
||||
>
|
||||
<span class="sr-only">Previous</span>
|
||||
|
|
@ -240,30 +240,30 @@ const handleRouteToDetail = (username: string) => {
|
|||
</a>
|
||||
<a
|
||||
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="#"
|
||||
>
|
||||
1
|
||||
</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="#"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
<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>
|
||||
<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="#"
|
||||
>
|
||||
4
|
||||
</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="#"
|
||||
>
|
||||
<span class="sr-only">Next</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue